/* Dedicated Game Boy-style controls: never laid over a canvas or menu. */
.handheld-pad{--unit:42px;--action:62px;display:none!important;position:relative!important;inset:auto!important;z-index:auto!important;flex:none;box-sizing:border-box;width:100%;max-width:none!important;min-height:154px!important;height:auto;margin:0!important;padding:12px 18px!important;gap:12px;align-items:center;justify-content:space-between;background:linear-gradient(145deg,#c9c8d3,#aaaabb)!important;border:0!important;border-top:3px solid #8d8b9e!important;border-radius:0!important;opacity:1!important;pointer-events:auto!important;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:contain}
.touch-layout .handheld-pad{display:flex!important}.handheld-pad *{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
.handheld-pad .dpad{position:relative!important;display:grid!important;grid-template:repeat(3,var(--unit))/repeat(3,var(--unit))!important;gap:0;flex:none;filter:drop-shadow(0 4px 0 #555366);padding:0!important;margin:0!important;pointer-events:auto}
.handheld-pad .dpad button,.handheld-pad .dpad .center{background:#34333f!important;color:#dad9e2!important;border:0!important;border-radius:3px!important;padding:0!important;min-width:0;min-height:0;width:var(--unit);height:var(--unit);box-shadow:inset 0 2px 2px #777480!important;font:20px monospace!important;transform:none!important}
.handheld-pad .dpad .up{grid-area:1/2}.handheld-pad .dpad .left{grid-area:2/1}.handheld-pad .dpad .center{grid-area:2/2;background:#2e2d38!important;box-shadow:none!important}.handheld-pad .dpad .right{grid-area:2/3}.handheld-pad .dpad .down{grid-area:3/2}
.handheld-pad .pad-actions{display:grid!important;grid-template-columns:repeat(2,var(--action));gap:9px;align-items:center;justify-content:center;transform:none!important;padding:0!important;margin:0!important;flex:none;pointer-events:auto}
.handheld-pad .pad-actions button{position:static!important;display:flex!important;flex-direction:column;align-items:center;justify-content:center;width:var(--action)!important;height:var(--action)!important;min-width:0;padding:0!important;border-radius:50%!important;background:#a92e58!important;color:#fff0f4!important;border:2px solid #7b2245!important;box-shadow:0 4px 0 #70203c,inset 0 2px 2px #ec8ba3!important;transform:none!important;letter-spacing:0}
.handheld-pad .pad-actions b{font:bold 21px monospace;line-height:1}.handheld-pad .pad-actions small{font:8px monospace!important;letter-spacing:0!important;color:#ffe5ee!important;margin-top:4px}
.handheld-pad .pad-actions.single{grid-template-columns:var(--action)}.handheld-pad .pad-meta{display:flex;flex-direction:column;align-items:center;gap:8px;font:italic bold 12px monospace;color:#4a456b}.handheld-pad .pad-meta button{padding:7px 10px;background:#656175;border:0;border-radius:12px;color:white;font:12px monospace;box-shadow:0 3px 0 #494653}
.handheld-pad button.pressed{filter:brightness(1.35);box-shadow:inset 0 2px 5px #0008!important;translate:0 2px}.handheld-pad.is-disabled .dpad,.handheld-pad.is-disabled .pad-actions{pointer-events:none;opacity:.5}
.handheld-pad.four{--action:54px}.handheld-pad.four .pad-actions{gap:9px}
.play-area{position:relative;min-width:0;min-height:0;width:100%;height:100%;flex:1}.screen{display:flex;flex-direction:column}
body.fighter-touch:not(.handheld-playing) #touch.handheld-pad{display:none!important}
@media(any-pointer:coarse),(max-width:900px){
 body.touch-layout main{padding:6px;max-width:100%}body.touch-layout header{margin-bottom:7px;min-height:38px;gap:8px}body.touch-layout .brand{font-size:22px}body.touch-layout .brand small{font-size:7px;margin-top:5px}body.touch-layout .edition,body.touch-layout .controls,body.touch-layout main>footer{display:none!important}body.touch-layout header button{font-size:9px;padding:8px}body.touch-layout .machine{padding:4px}body.touch-layout .topline{padding:5px;font-size:8px;min-height:24px}body.touch-layout .bottomline{display:none}
 body.touch-layout.handheld-playing .screen{height:auto;aspect-ratio:auto}body.touch-layout.handheld-playing .play-area{flex:none;aspect-ratio:4/3;height:auto}body.touch-layout.handheld-playing #game{width:100%;height:100%;object-fit:contain}
 body.touch-layout.chapter-open .screen{height:calc(100dvh - 82px);min-height:280px;aspect-ratio:auto}body.touch-layout #chapterTitle{padding:5px 7px!important;font-size:9px!important;line-height:1.3;flex:none}body.touch-layout #chapterFrame{min-height:0}
 body.touch-layout .machine:fullscreen{padding:0;width:100%;height:100dvh;justify-content:center}body.touch-layout.handheld-playing .machine:fullscreen .screen{width:100%;height:auto;max-height:calc(100dvh - 28px)}body.touch-layout.chapter-open .machine:fullscreen .screen{width:100%;height:calc(100dvh - 28px)}
 /* Platform: normal flow puts the controller below the play area and its overlays. */
 body.touch-layout.platform-touch,body.touch-layout.platform-touch main{height:100%;overflow:hidden;padding:0!important}
 body.touch-layout.platform-touch main{display:flex;flex-direction:column;justify-content:center;width:100%;margin:0!important}
 body.touch-layout.platform-touch #stage{position:relative!important;inset:auto!important;flex:none;width:100%!important;max-width:none;height:auto!important;aspect-ratio:4/3;margin:0!important;overflow:hidden;box-shadow:none}
 body.touch-layout.platform-touch #stage canvas{width:100%;height:100%;aspect-ratio:auto;object-fit:contain}
 body.touch-layout.platform-touch #touch{order:0;flex:none}
 body.touch-layout.platform-touch main>footer{display:flex!important;position:relative!important;inset:auto!important;flex:none;order:1;height:36px!important;min-height:36px;margin:0!important;padding:4px!important;justify-content:center}
 body.touch-layout.platform-touch main>footer>div:first-child{display:none}body.touch-layout.platform-touch footer button{padding:5px!important;font-size:9px!important}
 /* Orbital controls are siblings of the viewport, never children of it. */
 body.touch-layout.orbit-touch main{padding:0!important;height:100%}
 body.touch-layout.orbit-touch .cabinet{display:flex;height:100%;flex-direction:column;justify-content:center}
 body.touch-layout.orbit-touch .viewport{flex:none!important;width:100%;height:auto!important;aspect-ratio:16/9!important}
 body.touch-layout.orbit-touch .hud{flex:none;height:44px!important;padding:5px 8px;gap:10px}body.touch-layout.orbit-touch .hud strong{font-size:14px}body.touch-layout.orbit-touch .hud button{padding:7px}body.touch-layout.orbit-touch .hud small{font-size:7px}
 body.touch-layout.orbit-touch .cabinetfoot{flex:none;padding:7px;font-size:7px}body.touch-layout.orbit-touch #buffs,body.touch-layout.orbit-touch #chargeHud{left:10px}body.touch-layout.orbit-touch .below{display:none}
}
@media(max-width:360px){.handheld-pad{--unit:36px;--action:55px;padding:10px!important;gap:6px;min-height:132px!important}.handheld-pad.four{--action:48px}.handheld-pad .pad-meta{font-size:10px}}
@media(orientation:landscape) and (any-pointer:coarse), (orientation:landscape) and (max-width:900px){
 .handheld-pad{--unit:34px;--action:58px}.handheld-pad.four{--action:48px}
 body.touch-layout header{min-height:27px;margin-bottom:3px}body.touch-layout header .brand{font-size:17px}body.touch-layout .brand small{display:none}body.touch-layout header button{padding:5px}body.touch-layout .topline{min-height:20px;padding:3px}
 body.touch-layout.handheld-playing .screen{display:grid;grid-template-columns:120px minmax(0,1fr) 130px;height:calc(100dvh - 64px);min-height:190px}
 body.touch-layout.handheld-playing .play-area{grid-column:2;grid-row:1;aspect-ratio:auto;height:100%;width:100%;display:flex;align-items:center}body.touch-layout.handheld-playing .play-area canvas{object-fit:contain}
 body.touch-layout.handheld-playing #touch.handheld-pad{display:contents!important}body.touch-layout.handheld-playing #touch .dpad{grid-column:1;grid-row:1;align-self:center;justify-self:center}body.touch-layout.handheld-playing #touch .pad-actions{grid-column:3;grid-row:1;align-self:center;justify-self:center}body.touch-layout.handheld-playing #touch .pad-meta{grid-column:3;grid-row:1;align-self:end;justify-self:center;padding-bottom:4px}body.touch-layout.handheld-playing #touch .pad-meta>span{display:none}
 body.touch-layout.chapter-open .screen{height:calc(100dvh - 64px);min-height:190px}body.touch-layout .machine:fullscreen .screen{height:calc(100dvh - 24px)!important}
 body.touch-layout.platform-touch main{display:grid!important;grid-template-columns:114px minmax(0,1fr) 126px;grid-template-rows:minmax(0,1fr) 32px}
 body.touch-layout.platform-touch #stage{grid-column:2;grid-row:1;height:100%!important;aspect-ratio:auto!important;min-height:0;display:block}
 body.touch-layout.platform-touch #touch.handheld-pad{display:contents!important}body.touch-layout.platform-touch #touch .dpad{grid-column:1;grid-row:1;align-self:center;justify-self:center}body.touch-layout.platform-touch #touch .pad-actions{grid-column:3;grid-row:1;align-self:center;justify-self:center}body.touch-layout.platform-touch #touch .pad-meta{display:none}body.touch-layout.platform-touch main>footer{grid-column:1/-1;grid-row:2;height:32px!important;min-height:32px}
 body.touch-layout.orbit-touch .cabinet{display:grid!important;grid-template-columns:114px minmax(0,1fr) 100px;grid-template-rows:38px minmax(0,1fr) 24px;height:100%}
 body.touch-layout.orbit-touch .hud{grid-column:1/-1;grid-row:1;height:38px!important}body.touch-layout.orbit-touch .viewport{grid-column:2;grid-row:2;aspect-ratio:auto!important;height:100%!important;min-height:0}
 body.touch-layout.orbit-touch #touch.handheld-pad{display:contents!important}body.touch-layout.orbit-touch #touch .dpad{grid-column:1;grid-row:2;align-self:center;justify-self:center}body.touch-layout.orbit-touch #touch .pad-actions{grid-column:3;grid-row:2;align-self:center;justify-self:center}body.touch-layout.orbit-touch #touch .pad-meta{display:none}body.touch-layout.orbit-touch .cabinetfoot{grid-column:1/-1;grid-row:3;padding:5px;height:24px}
}
/* Absolute canvases do not impose their intrinsic 600/720px height on phones. */
body.touch-layout.handheld-playing .play-area>canvas,body.touch-layout.platform-touch #stage>canvas,body.touch-layout.orbit-touch .viewport>canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* Only the game bitmap keeps its native ratio. The surrounding UI fills the phone. */
body.fighter-touch.touch-layout{height:100dvh;overflow:hidden}
body.fighter-touch.touch-layout main{height:100dvh;min-height:0;display:flex;flex-direction:column;padding:4px;overflow:hidden}
body.fighter-touch.touch-layout main>header{flex:none}
body.fighter-touch.touch-layout .machine{flex:1;min-height:0;display:flex;flex-direction:column}
body.fighter-touch.touch-layout .topline{flex:none}
body.fighter-touch.touch-layout .screen{flex:1;min-height:0!important;height:auto!important;aspect-ratio:auto}
body.fighter-touch.touch-layout .play-area{flex:1;min-height:0;height:auto;aspect-ratio:auto}
body.fighter-touch.touch-layout.handheld-playing .play-area{height:100%;aspect-ratio:auto}
body.fighter-touch.touch-layout .machine:fullscreen{width:100vw;height:100dvh;min-height:0;justify-content:flex-start}
body.fighter-touch.touch-layout .comic-stage{align-items:center}
body.fighter-touch.touch-layout .crt-bezel{width:100%;height:auto;aspect-ratio:4/3;max-height:100%}
@media(orientation:portrait){
 body.touch-layout.platform-touch main{justify-content:flex-start}
 body.touch-layout.platform-touch #stage{flex:1;min-height:0;height:0!important;aspect-ratio:auto}
 body.touch-layout.orbit-touch .viewport{flex:1!important;min-height:0;height:0!important;aspect-ratio:auto!important}
}
body.platform-touch.platform-paused #overlay{justify-content:center!important;padding:12px!important;overflow:hidden}
body.platform-touch.platform-paused #overlay #stage-brief,body.platform-touch.platform-paused #overlay>.hint,body.platform-touch.platform-paused #overlay>small{display:none!important}
body.platform-touch.platform-paused #overlay h2{margin:8px 0;flex:none}