*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#070c17;color:#f7eacb;font-family:Arial,Helvetica,sans-serif;touch-action:none;user-select:none;-webkit-user-select:none}button{font:800 13px Arial,sans-serif;letter-spacing:.06em;color:#eee4ce;background:#132239;border:1px solid #726248;padding:12px 18px;cursor:pointer;touch-action:none;box-shadow:inset 0 1px #ffffff1a}button:hover,button:focus-visible{border-color:#ffe0a1;background:#283746;outline:2px solid #e8c07c;outline-offset:2px}button:disabled{opacity:.5;cursor:default}.primary,.gold{background:#d5b277;color:#161724;border-color:#f0d2a0}.pressed{transform:translateY(2px);filter:brightness(1.45)}[hidden]{display:none!important}#screen{width:100%;height:100dvh;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;background:radial-gradient(ellipse,#152034,#050812)}#stage{position:relative;aspect-ratio:16/9;max-width:100%;max-height:100%;width:min(100vw,177.778dvh);flex:none;overflow:hidden;box-shadow:0 0 70px #0008}canvas{display:block;width:100%;height:100%;outline:none;image-rendering:pixelated}#tools{position:absolute;right:8px;top:8px;display:flex;gap:5px;z-index:15}#tools button{width:35px;height:32px;padding:0;font-size:19px;background:#090f20dd;border-color:#665b47}#overlay{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:14px;z-index:10}#overlay>*{pointer-events:auto}.title-menu{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:520px;margin-top:150px}.title-menu .primary{width:100%}.title-menu small{width:100%;text-align:center;font-size:11px;line-height:1.6;color:#c6c3bb}.selection{width:min(100%,920px);display:flex;flex-direction:column;gap:10px}.selection h2{font-size:20px;letter-spacing:.12em;margin:0 125px 0 0}.selection .info{margin-left:40%;min-height:155px;padding:12px 18px;background:linear-gradient(90deg,#0c152ae8,#0c152a88);border-left:3px solid var(--accent)}.info h3{margin:0 0 5px;font-size:28px;color:var(--accent)}.info .book{font-size:11px;letter-spacing:.12em;color:#d3c4a7}.info p{font-size:13px;line-height:1.45;margin:9px 0}.stats{display:flex;gap:15px;font-size:10px;color:#c9c4b6}.stat{display:flex;align-items:center;gap:5px}.stat i{display:block;width:48px;height:4px;background:#334055}.stat b{display:block;height:100%;background:var(--accent)}.moves{color:#f6d299!important;font-size:12px!important}.roster{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px}.fighter{padding:0;position:relative;height:82px;overflow:hidden;background:linear-gradient(145deg,#203147,#0c1223);border:1px solid #4c4f59}.fighter .portrait{display:block;position:absolute;inset:0;background-size:800% 400%;background-position:0 0;image-rendering:pixelated;opacity:.8}.fighter span:last-child{position:absolute;bottom:0;left:0;right:0;padding:4px 1px;background:#080d1de6;font-size:9px;letter-spacing:0;color:#e6dfd0}.fighter.selected{border:2px solid var(--accent);box-shadow:0 0 15px color-mix(in srgb,var(--accent) 40%,transparent)}.fighter.selected .portrait{opacity:1}.selection nav{display:flex;justify-content:center;gap:10px}.scene-actions{position:absolute;bottom:8%;left:5%;right:5%;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}.scene-actions p{width:100%;text-align:center;font-size:14px;text-shadow:0 2px 4px #000;margin:0}.scene-actions .quote{font-style:italic;background:#060c19bb;padding:8px 14px;max-width:600px}.route{display:flex;gap:4px;justify-content:center;width:100%}.route i{width:12px;height:4px;background:#39455a}.route i.done{background:#d3b378}.record{width:min(470px,96%);max-height:95%;overflow:auto;padding:22px;background:#0b1224f5;border:1px solid #a88e61;text-align:center;touch-action:pan-y}.record h2{font-size:22px;margin:4px}.letters{display:flex;justify-content:center;gap:12px;margin:12px}.letter{display:flex;flex-direction:column;gap:5px}.letter b{font-size:34px;display:block;padding:4px 14px}.letter.selected b{background:#d1ad70;color:#101522}.letter button{padding:6px 12px}.record p{font-size:13px;line-height:1.4}.leaderboard{font:14px monospace;max-height:130px;overflow:auto;margin:12px 0;text-align:left;touch-action:pan-y}.leaderboard div{padding:5px 12px;display:flex;justify-content:space-between;border-bottom:1px solid #ffffff14}.record nav{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}#modal{position:absolute;inset:0;z-index:30;background:#030714dd;display:flex;justify-content:center;align-items:center;padding:16px}.dialog{width:min(580px,100%);max-height:100%;overflow:auto;background:#0f192b;padding:24px;border:1px solid #a98b59;touch-action:pan-y}.dialog h2{margin:0 0 15px;color:#efcf92}.dialog p{font-size:14px;line-height:1.55}.dialog nav{display:flex;flex-wrap:wrap;gap:8px}#controls{display:none;flex:none;width:min(960px,100%);height:130px;justify-content:space-between;align-items:center;padding:8px max(12px,env(safe-area-inset-right));gap:15px;background:#080e1bea;z-index:11}#dpad{display:grid;grid-template-columns:repeat(3,43px);grid-template-rows:repeat(2,48px);gap:4px}#dpad button{padding:0;font-size:21px;border-radius:6px}.up{grid-area:1/2}.left{grid-area:2/1}.down{grid-area:2/2}.right{grid-area:2/3}#actions{display:grid;grid-template-columns:repeat(3,minmax(47px,72px));gap:7px}#actions button{height:45px;padding:0 3px;font-size:10px;border-radius:5px}#actions .small{background:#182439;color:#d1d4de}.touch #controls{display:flex}.touch #stage{width:min(100vw,calc((100dvh - 130px)*1.77778));max-height:calc(100dvh - 130px)}.touch #overlay{bottom:130px}.touch.selecting #controls,.touch.menu-scene #controls{display:none}.touch.selecting #stage,.touch.menu-scene #stage{width:min(100vw,177.778dvh);max-height:100%}.touch.selecting #overlay,.touch.menu-scene #overlay{bottom:0}.practice-note{position:absolute;top:15%;font-size:12px;background:#071326cc;padding:8px}.loading{background:#0b1224;padding:30px;text-align:center}.loading progress{display:block;width:200px;margin:15px auto;accent-color:#d6b57a}
@media(max-width:650px) and (orientation:portrait){.selection h2{font-size:15px;letter-spacing:.05em;margin-right:105px}.selection{gap:7px}.selection .info{margin-left:0;background:#0c152ae8;min-height:108px;padding:10px}.info h3{font-size:22px}.info p{font-size:11px;margin:6px 0}.info .book{font-size:10px}.roster{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}.fighter{height:63px}.fighter span:last-child{font-size:8px}.stats{font-size:8px;gap:8px}.stat i{width:35px}.selection nav button{padding:10px 15px}.title-menu{margin-top:130px;max-width:300px}.title-menu button{padding:11px;font-size:11px}.scene-actions{bottom:9%;gap:6px}.scene-actions p{font-size:11px}.scene-actions button{font-size:11px;padding:9px}.record{padding:12px}.record h2{font-size:18px}#controls{height:150px}.touch #stage{width:min(100vw,calc((100dvh - 150px)*1.77778));max-height:calc(100dvh - 150px)}.touch #overlay{bottom:150px}}
@media(max-height:520px) and (orientation:landscape){#controls{height:100px}#dpad{grid-template-columns:repeat(3,43px);grid-template-rows:repeat(2,38px)}#actions button{height:37px}.touch #stage{width:min(100vw,calc((100dvh - 100px)*1.77778));max-height:calc(100dvh - 100px)}.touch #overlay{bottom:100px}.selection{gap:5px}.selection .info{min-height:85px;margin-left:37%;padding:6px 12px}.info h3{font-size:22px}.info p{font-size:10px;margin:3px 0}.info .book{font-size:9px}.moves{font-size:10px!important}.selection h2{font-size:16px}.fighter{height:54px}.fighter span:last-child{font-size:8px}.selection nav button{padding:8px 14px;font-size:11px}.title-menu{margin-top:140px;max-width:480px}.title-menu .primary{width:auto}.title-menu button{padding:9px 14px;font-size:11px}.title-menu small{display:none}.scene-actions{bottom:4%;gap:6px}.scene-actions .quote{display:none}.scene-actions p{font-size:11px}.scene-actions button{padding:8px 15px;font-size:11px}.record{max-height:100%;padding:10px}.record h2{font-size:16px}.letters{margin:5px}.letter b{font-size:25px}.letter button{padding:3px 10px}.record p{margin:5px}.leaderboard{max-height:65px}}
/* Keep title controls below the illustration on both portrait and landscape. */
.title-menu{position:absolute;top:60%;margin-top:0}
@media(max-height:400px){.title-menu{top:63%}}

/* Arcade screen layout: all scene UI is anchored to the actual game viewport. */
#overlay,.touch #overlay,.touch.selecting #overlay,.touch.menu-scene #overlay{inset:0;padding:0}
.selection{position:absolute;inset:0;width:100%;display:block}
.selection h2,.selection .info{display:none}
.roster{position:absolute;left:42.7%;top:16%;width:54%;height:61%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:4px}
.fighter{height:auto;min-height:0;border:2px solid #738bba;background:linear-gradient(135deg,#385993,#142c5a);box-shadow:inset 0 0 0 2px #132b50}
.fighter .portrait{background-size:1400% 700%;background-position:2.3% 0;opacity:1}
.fighter span:last-child{font-size:clamp(5px,1.03vw,10px);padding:2px 0;background:#080f24df;white-space:nowrap;overflow:hidden;line-height:1.1}
.fighter.selected{border:3px solid #fff3ac;box-shadow:0 0 0 2px #ff6c2b,0 0 18px #ffbd65;z-index:2;animation:cursorGlow .55s steps(2) infinite}
.fighter.selected:after{content:'1P';position:absolute;left:2px;top:1px;font:bold 12px monospace;color:#ffeb75;text-shadow:2px 2px #07132d}
.selection nav{position:absolute;left:43%;right:3%;bottom:5%;display:flex;gap:8px;justify-content:stretch}
.selection nav button{flex:1;font-size:clamp(9px,1.5vw,14px);padding:clamp(5px,1.2vh,12px) 3px}
.scene-actions{bottom:3%;left:4%;right:4%;gap:8px}.scene-actions .route{display:none}
.scene-actions p{font-size:clamp(8px,1.45vw,14px)}.scene-actions button{font-size:clamp(9px,1.4vw,13px);padding:8px 18px}
body[data-scene="intro"] .scene-actions{bottom:3%;left:auto;right:3%}
body[data-scene="result"] .scene-actions{left:47%;right:3%;bottom:4%}
body[data-scene="result"] .scene-actions p{font-size:clamp(8px,1.2vw,12px)}
#tools{opacity:.65}#tools:hover{opacity:1}
@keyframes cursorGlow{50%{border-color:#ffb142}}
@media (orientation:landscape) and (pointer:coarse){
 .touch #stage{width:min(100vw,177.778dvh);max-height:100%}
 .touch #controls{position:absolute;bottom:2px;left:0;right:0;height:112px;width:100%;max-width:none;background:none;pointer-events:none;padding:4px 12px}
 #dpad,#actions{pointer-events:auto;opacity:.76}#dpad{grid-template-columns:repeat(3,42px);grid-template-rows:repeat(2,43px);gap:3px}#actions{grid-template-columns:repeat(3,48px);gap:5px}#actions button{height:42px;border-radius:50%;font-size:8px;background:#12243cbb;border:2px solid #f4d9a887}#dpad button{background:#12243cbb;border:2px solid #c3d2e985}
 .touch:not([data-scene="play"]):not([data-scene="ready"]) #controls{display:none}
 .touch #tools{top:77px;right:4px;flex-direction:column}#tools button{width:29px;height:27px;font-size:15px}
}
@media(max-width:650px) and (orientation:portrait){
 .roster{grid-template-columns:repeat(5,minmax(0,1fr));gap:2px}.fighter{border-width:1px}.fighter.selected{border-width:2px}.fighter.selected:after{font-size:8px}.selection nav button{padding:5px 2px;font-size:8px}
 .title-menu{top:59%;gap:4px;max-width:88%}.title-menu button{font-size:9px;padding:6px 8px}.title-menu .primary{width:auto}.title-menu small{display:none}
 .scene-actions button{padding:5px 8px;font-size:8px}.scene-actions p{font-size:8px}#tools button{width:28px;height:27px;font-size:15px}
}

/* The canvas draws the complete roster; semantic buttons supply hit targets. */
.fighter,.fighter.selected,.fighter:hover,.fighter:focus-visible{background:transparent;border:0;box-shadow:none;animation:none;outline-offset:0}
.fighter .portrait,.fighter span:last-child,.fighter.selected:after{visibility:hidden}
.fighter:focus-visible{outline:2px solid white}
/* Larger multitouch targets, with enough separation for two-thumb play. */
.touch #controls{--key:clamp(54px,7.1vw,78px);height:calc(var(--key)*2 + 32px);gap:12px;padding:12px max(12px,env(safe-area-inset-right));}
.touch #dpad{grid-template-columns:repeat(3,var(--key));grid-template-rows:repeat(2,var(--key));gap:5px;opacity:.9}
.touch #actions{grid-template-columns:repeat(3,var(--key));gap:7px;opacity:.9}
.touch #actions button,.touch #dpad button{height:var(--key);min-width:var(--key);padding:0 2px;border:2px solid #c3d2e9a0;font-size:clamp(10px,1.35vw,13px);font-weight:900}
.touch #dpad button{font-size:26px;background:#142840db}
.touch #actions button{border-radius:50%;background:#203b64e8}
.touch #actions button[data-key=light]{background:#8c3039e8}.touch #actions button[data-key=heavy]{background:#245997e8}.touch #actions button[data-key=kick]{background:#927225e8}.touch #actions button[data-key=special]{background:#69439be8}
@media(orientation:landscape){.touch #stage{width:min(100vw,177.778dvh);max-height:100%}.touch #controls{position:absolute;bottom:max(8px,env(safe-area-inset-bottom));left:0;right:0;width:100%;max-width:none;background:none;pointer-events:none}.touch #dpad,.touch #actions{pointer-events:auto}.touch #tools{top:85px;right:4px;flex-direction:column}.touch #tools button{width:40px;height:38px;font-size:20px}.touch:not([data-scene="play"]):not([data-scene="ready"]) #controls{display:none}}
@media(orientation:portrait){.touch #screen{justify-content:space-evenly}.touch #controls{--key:clamp(50px,12vw,76px);height:calc(var(--key)*2 + 42px);width:100%;padding:8px;gap:8px}.touch #dpad{gap:3px}.touch #actions{gap:4px}.touch #stage{width:100vw;max-height:calc(100dvh - 210px)}.touch.menu-scene #stage{width:min(100vw,177.778dvh);max-height:100%}}
@media(max-width:360px) and (orientation:portrait){.touch #controls{--key:46px}}
/* Safari form controls need explicit selection/callout suppression. */
button,button *,#controls,#controls *,#tools,#tools *,canvas{-webkit-user-select:none!important;user-select:none!important;-webkit-touch-callout:none!important;-webkit-user-drag:none;touch-action:none}
.touch #controls{--key:clamp(68px,9vw,96px);padding:8px max(8px,env(safe-area-inset-right));height:calc(var(--key)*2 + 24px)}
.touch #actions button{font-size:clamp(11px,1.5vw,15px)}.touch #dpad button{font-size:32px}
@media(hover:none){button:hover{outline:none}.touch #controls button:hover,.touch #controls button:focus:not(:focus-visible){outline:none;border-color:#c3d2e9a0}.touch #controls .pressed{filter:brightness(1.3);transform:translateY(1px)}}
@media(orientation:portrait){.touch #controls{--key:clamp(46px,calc((100vw - 34px)/6),88px);gap:6px;padding:8px;height:calc(var(--key)*2 + 30px)}.touch #dpad{gap:3px}.touch #actions{gap:3px}.touch #actions button{font-size:clamp(9px,2.6vw,14px)}.touch #stage{max-height:calc(100dvh - 230px)}.touch.menu-scene #stage{max-height:100%}}