:root{--app-height:100dvh;--app-width:100dvw;--view-top:0px;--view-left:0px;--control-bottom:max(22px,calc(env(safe-area-inset-bottom) + 16px));--stick-size:clamp(112px,30dvh,160px)}
html,body{width:100%;height:100%;height:var(--app-height);min-height:0;overflow:hidden;overscroll-behavior:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}*,*::before,*::after{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}img,canvas{pointer-events:none;-webkit-user-drag:none}button{touch-action:none}#home,#comic{height:var(--app-height);padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}#game{position:fixed;left:var(--view-left);top:var(--view-top);width:var(--app-width);height:var(--app-height);max-width:none;max-height:none;transform:none;overflow:hidden;isolation:isolate}#arena{width:100%;height:100%;object-fit:contain;pointer-events:auto}.touch-controls{inset:0}.joystick{position:absolute;pointer-events:auto;touch-action:none;left:max(20px,calc(env(safe-area-inset-left) + 12px));bottom:var(--control-bottom);width:var(--stick-size);height:var(--stick-size);border-radius:50%;background:radial-gradient(circle at 45% 40%,#4d71946b,#13243c9c 65%,#0c152db8);border:2px solid #b3ebff9c;box-shadow:inset 0 1px 5px #ffffff4d,0 3px 10px #05081e88;--stick-x:0px;--stick-y:0px}.joystick::before{content:'';position:absolute;inset:18%;border-radius:50%;border:1px solid #c7e8ff26}.stick-knob{position:absolute;width:43%;height:43%;left:28.5%;top:28.5%;border-radius:50%;background:radial-gradient(circle at 38% 28%,#92c9e0d9,#334f70e8 70%);border:2px solid #e1faffc9;box-shadow:inset 0 2px 5px #fff5,0 3px 8px #050b246e;transform:translate(var(--stick-x),var(--stick-y));pointer-events:none}.joystick.engaged{border-color:#ffe5a2;box-shadow:0 0 15px #98efff55}.joystick.engaged .stick-knob{border-color:#ffe6a2}.stick-mark,.stick-diagonal{position:absolute;pointer-events:none;color:#e3f7ffbb;font:bold 14px system-ui;line-height:1}.north{left:44%;top:6%}.south{left:44%;bottom:6%}.west{left:6%;top:44%}.east{right:6%;top:44%}.nw{left:19%;top:17%}.ne{right:19%;top:17%}.stick-diagonal{font-size:16px;color:#ffe3aeb0}
.action-pad{width:204px;height:145px;right:max(20px,calc(env(safe-area-inset-right) + 12px));bottom:var(--control-bottom)}.action-pad button{width:60px;height:60px;min-height:60px;opacity:.9;border:2px solid #e8f2ffb8;font-size:19px}.action-pad small{font-size:7px}.action-pad .s1{top:0;left:0;right:auto;bottom:auto}.action-pad .s2{top:0;right:43px;left:auto;bottom:auto}.action-pad .punch{left:34px;bottom:0;top:auto;right:auto}.action-pad .kick{right:0;bottom:25px;left:auto;top:auto}.action-pad button.unready{opacity:.66}.game-tools{top:auto!important;bottom:var(--control-bottom)!important;gap:7px;max-width:36vw}.game-tools button,#home-button{min-height:42px!important;min-width:44px;font-size:11px!important;padding:6px 10px!important}.game-tools #charge{font-size:9px!important;max-width:92px}.game-tools #swap{display:none}
#pause-dialog{box-sizing:border-box;width:min(660px,calc(var(--app-width) - env(safe-area-inset-left) - env(safe-area-inset-right) - 32px));max-width:none;max-height:calc(var(--app-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px);padding:18px 24px;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:center}#pause-dialog:not([open]){display:none}#pause-dialog h1{grid-column:1/-1;font-size:36px;margin:0;text-align:center;line-height:1.1}#pause-dialog #resume{grid-column:1/-1}#pause-dialog>button{width:auto;display:block;margin:0!important;min-height:46px;font-size:14px}#pause-dialog .voice-toggle{margin:0;display:flex;align-items:center;justify-content:center;min-height:46px;background:#132b46a8;border:1px solid #c9edff45;border-radius:12px}#pause-dialog .voice-toggle input{width:22px;height:22px;margin:0 10px 0 0}
dialog{max-height:calc(var(--app-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px)}#controls{padding:16px 24px}#controls .control-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}#controls .control-grid div{padding:6px 9px;min-height:35px;gap:8px}#controls .control-grid b{min-width:70px;font-size:14px}#controls .control-grid span{font-size:11px}#controls h1{font-size:30px;line-height:1.1;margin:5px 0 9px}#controls>p{font-size:11px;margin:5px 0}#controls .eyebrow{font-size:9px}#controls #begin{min-height:44px;margin:5px 0 0;width:100%;font-size:17px}#rotate{display:none!important;position:fixed;inset:0;width:var(--app-width);height:var(--app-height);z-index:999999;background:radial-gradient(ellipse at center,#2a2457,#080e22 75%);align-items:center;justify-content:center;flex-direction:column;gap:20px;padding:28px;text-align:center;font-size:60px}#rotate b{font:italic 950 28px 'Arial Black',sans-serif;color:#ffe1a0}#rotate span{font-size:16px}#rotate small{font-size:12px;max-width:300px;color:#bccbe2}#landscape-enter{font-size:14px;min-height:48px;color:#ffedb2;border:1px solid #e2bf6d}
@media(orientation:portrait){#rotate{display:flex!important}#home,#game,#comic,dialog{visibility:hidden!important}dialog::backdrop{display:none!important}#rotate{visibility:visible}}
@media(orientation:landscape) and (max-height:550px){:root{--stick-size:clamp(112px,31dvh,140px)}.action-pad{width:184px;height:128px}.action-pad button{width:54px;height:54px;min-height:54px;font-size:17px}.action-pad .s2{right:37px}.action-pad .punch{left:30px}.action-pad .kick{bottom:22px}.action-pad small{font-size:6px}#tutorial{left:30%;right:30%;top:24%;padding:6px 10px}#tutorial strong{font-size:11px}#tutorial span{font-size:10px}#pause-dialog{padding:14px 20px;gap:8px}#pause-dialog h1{font-size:30px}#pause-dialog>button,#pause-dialog .voice-toggle{min-height:42px;font-size:12px}#controls{padding:10px 18px}#controls .control-grid{gap:5px}#controls .control-grid div{min-height:32px;padding:4px 7px}#controls h1{font-size:26px;margin:2px 0 6px}#controls .control-grid span{font-size:10px}#controls>p{font-size:10px}#controls #begin{min-height:40px;font-size:15px}}
@media(orientation:landscape) and (max-height:340px){:root{--control-bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px));--stick-size:112px}.action-pad{width:166px;height:116px}.action-pad button{width:50px;height:50px;min-height:50px}.action-pad .s2{right:34px}.action-pad .punch{left:27px}.action-pad .kick{bottom:18px}.action-pad small{font-size:6px}.game-tools{gap:4px}.game-tools button,#home-button{min-height:38px!important;font-size:9px!important;padding:4px 7px!important}#pause-dialog{gap:6px;padding:10px 16px}#pause-dialog h1{font-size:25px}#pause-dialog>button,#pause-dialog .voice-toggle{min-height:38px;font-size:11px}#controls .control-grid div{min-height:28px}#controls .control-grid span{font-size:9px}#controls .control-grid b{font-size:11px;min-width:60px}#controls h1{font-size:23px}#controls>p{font-size:9px;margin:3px 0}#controls #begin{min-height:38px}.mode-panel h1{display:none}.brand img{height:23dvh}.brand p{font-size:17px}.mode-buttons button{min-height:40px;font-size:13px}.mode-buttons small{display:none}#welcome{grid-template-rows:35% 65%}#mode-description{font-size:8px;margin:3px 0;min-height:10px}.difficulty-buttons button{min-height:30px;padding:3px}.mode-panel>.primary{min-height:34px}.mode-panel{padding:0 8px}#home header{flex-basis:24px;min-height:24px}#home footer{font-size:7px;min-height:14px;flex-basis:14px}#tutorial{top:23%;padding:4px 7px}#tutorial strong{font-size:10px}#tutorial span{font-size:9px}}

#rotate{border:0;max-width:none;max-height:none;margin:0;top:0;left:0;box-shadow:none}#rotate::backdrop{background:#080e22;backdrop-filter:none}
#rotate{visibility:visible!important}
#controls #begin{padding:8px 12px;line-height:1.2}#pause-dialog>button{padding:6px 10px;line-height:1.2}

/* Character welcome for the portrait orientation gate. */
#rotate{gap:clamp(7px,1.8vh,16px);padding:16px max(20px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom));overflow:hidden}
#rotate .rotate-cast{flex:0 1 auto;width:min(80vw,350px);min-height:0;display:flex;flex-direction:column;align-items:center;gap:0}
#rotate-character{display:block;width:auto;max-width:100%;height:clamp(120px,36vh,310px);aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 0 15px #a570d92b)}
#rotate-character-name{display:block;font:italic 900 clamp(13px,4vw,19px)/1.2 'Arial Black',sans-serif;color:#ffdf9e;min-height:1.2em;text-shadow:0 2px 0 #7b3b27}
#rotate .rotate-symbol{font-size:32px;line-height:1}
#rotate>b{font-size:clamp(20px,6vw,28px);line-height:1.15}
#rotate>span:not(.rotate-symbol){font-size:clamp(12px,3.6vw,16px);line-height:1.3}
#rotate>small{font-size:clamp(10px,2.9vw,12px);line-height:1.35}
#rotate #landscape-enter{flex-shrink:0;min-height:44px;padding:9px 16px}
@media(orientation:portrait) and (max-height:570px){#rotate{gap:5px}#rotate-character{height:27vh}#rotate .rotate-symbol{font-size:24px}}