/* Mobile play surface. Desktop keeps its keyboard-oriented layout. */
.joystick-zone,.attacks button .energy-cost,.touch-instructions{display:none}
#mobile-help,#fullscreen-toggle{font-size:18px;min-width:36px}
.help-panel{position:relative}#help-close{position:absolute;right:12px;top:10px;width:44px;height:44px;border-radius:50%;background:#263c43;color:#e9e1cc}
.help-panel h2{padding-right:40px}
.rotate-screen{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:max(28px,var(--safe-area-inset-top, env(safe-area-inset-top, 0px))) 30px max(24px,var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));background:radial-gradient(ellipse at 50% 35%,#314743,#101e25 60%,#0c151b);overflow:auto}
.rotate-brand{font-size:25px;font-weight:950;font-style:italic;letter-spacing:-1px;color:#fff0d5}
.rotate-brand>span{display:block;font:9px monospace;letter-spacing:3px;color:#94aba8;margin-top:7px}
.rotate-illustration{position:relative;width:160px;height:106px;margin:22px 0 4px;display:grid;place-items:center}
.phone-outline{width:140px;height:76px;border:3px solid #f3bd84;border-radius:15px;transform:rotate(-8deg);display:flex;align-items:center;justify-content:space-evenly;box-shadow:0 0 55px #e3ac6c20;background:#e3ac6c08}
.phone-outline i{height:23px;width:23px;border:1px solid #f3bd8470;border-radius:50%;background:#f3bd841a}
.phone-outline>span{font-size:30px;color:#f3bd84}.rotate-arrow{position:absolute;right:-3px;top:-23px;color:#95c8b0;font-size:36px}
.rotate-eyebrow{font:9px monospace;color:#abc8bc;letter-spacing:2px}
.rotate-screen h1{font-size:clamp(32px,9vw,44px);letter-spacing:-1.5px;line-height:1.08;margin:0;font-weight:900;color:#f5e9d4}
.rotate-screen p{font-size:14px;line-height:1.6;color:#9eb4b5;max-width:310px;margin:0}
.rotate-screen .primary-button{min-height:54px;white-space:normal;line-height:1.5;margin-top:10px;width:min(310px,100%);border-radius:12px;font-size:12px}
.rotate-footnote{font-size:10px;color:#789695;line-height:1.5}
.mobile-layout{--toolbar-height:44px;--pad-bottom:max(12px,var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)));--pad-left:max(18px,var(--safe-area-inset-left, env(safe-area-inset-left, 0px)));--pad-right:max(18px,var(--safe-area-inset-right, env(safe-area-inset-right, 0px)));--top-safe:var(--safe-area-inset-top, env(safe-area-inset-top, 0px));--key-size:clamp(52px,16dvh,68px);--stick-size:clamp(120px,37dvh,154px)}
.mobile-layout body{padding:0;min-height:0;height:100svh;height:100dvh;overflow:hidden;overscroll-behavior:none;background:#0c171d}
.mobile-layout .game-shell{position:relative;max-width:none;width:100%;height:100%;margin:0;overflow:hidden}
.mobile-layout .topbar,.mobile-layout footer{display:none}
.mobile-layout .arena-section{position:absolute;inset:0;max-width:none;box-shadow:none;display:flex;align-items:center;justify-content:center;padding-top:calc(var(--toolbar-height) + var(--top-safe));padding-bottom:var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));padding-left:var(--safe-area-inset-left, env(safe-area-inset-left, 0px));padding-right:var(--safe-area-inset-right, env(safe-area-inset-right, 0px))}
.mobile-layout .arena-toolbar{position:absolute;top:var(--top-safe);left:var(--pad-left);right:var(--pad-right);height:var(--toolbar-height);padding:0;background:transparent;border:0;z-index:9;letter-spacing:0;justify-content:space-between}
.mobile-layout .arena-toolbar>span{font-size:8px;letter-spacing:1px;color:#789594}
.mobile-layout .arena-toolbar>span em{padding:0 5px}
.mobile-layout .arena-toolbar>div{display:flex;align-items:center;gap:4px;height:100%}
.mobile-layout .arena-toolbar button{height:44px;min-width:44px;padding:0 10px;font:11px Arial,sans-serif;border:0;border-radius:10px;margin:0;color:#d3ded6;background:#b8d5c608;touch-action:manipulation}
.mobile-layout .arena-toolbar button:active{background:#b8d5c628}
.mobile-layout #mobile-help,.mobile-layout #fullscreen-toggle{font-size:20px;padding:0}
.mobile-layout .arena{width:min(100%,calc((100dvh - var(--toolbar-height) - var(--top-safe) - var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)))*16/9));aspect-ratio:16/9;flex-shrink:0;border:0;border-radius:3px;touch-action:none}
.mobile-layout .arena::after{box-shadow:inset 0 0 50px #0c17202a}
.mobile-layout .hud{inset:9px 4% auto;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);gap:14px}
.mobile-layout .fighter-hud b{font-size:clamp(12px,2vw,16px);margin:3px 0 6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mobile-layout .fighter-label{font-size:7px;letter-spacing:.4px}
.mobile-layout .health-track{height:11px;border-width:1px}
.mobile-layout .energy-track{height:4px;margin-top:6px}
.mobile-layout .clock-box>span{font-size:6px;letter-spacing:.5px}
.mobile-layout .clock-box strong{font-size:32px}
.mobile-layout .round-dots{font-size:7px;letter-spacing:4px}
.mobile-layout .stage-label,.mobile-layout .arena-corner{display:none}
.mobile-layout .controls{position:absolute;inset:calc(var(--toolbar-height) + var(--top-safe)) 0 0;padding:0;margin:0;z-index:4;display:block;pointer-events:none}
.mobile-layout .controls[inert]{opacity:.28;visibility:visible}
.mobile-layout body:has(.arena[data-phase="select"]) .controls{visibility:hidden}
.mobile-layout .controls[inert] button,.mobile-layout .controls[inert] .joystick{pointer-events:none}
.mobile-layout .dpad,.mobile-layout .controls-note{display:none}
.mobile-layout .joystick-zone{display:flex;position:absolute;left:var(--pad-left);bottom:var(--pad-bottom);width:var(--stick-size);align-items:center;flex-direction:column;gap:7px;user-select:none;-webkit-user-select:none}
.mobile-layout .joystick{position:relative;width:var(--stick-size);height:var(--stick-size);border:1.5px solid #e3f4ef45;border-radius:50%;background:radial-gradient(circle,#c3ddd812 0 28%,#172b3345 29% 66%,#bcd5d815 67%);box-shadow:inset 0 0 0 9px #c9e5e609,0 2px 12px #08161b26;pointer-events:auto;touch-action:none;--stick-x:0px;--stick-y:0px}
.mobile-layout .joystick::before{content:"";position:absolute;inset:22%;border:1px solid #e3f4ef23;border-radius:50%}
.mobile-layout .joystick-thumb{position:absolute;left:50%;top:50%;width:43%;height:43%;border:1.5px solid #e5f3eb8c;border-radius:50%;background:linear-gradient(140deg,#dce8e550,#638b9278);box-shadow:0 3px 8px #02111855,inset 0 1px #f3ffeb60;transform:translate(calc(-50% + var(--stick-x)),calc(-50% + var(--stick-y)));display:grid;place-items:center;pointer-events:none}
.mobile-layout .joystick-thumb i{width:6px;height:6px;border-radius:50%;background:#f4efd9aa;box-shadow:0 0 0 4px #f4efd910}
.mobile-layout .joystick.is-held{border-color:#f5d3a9a0;background-color:#678b9140}
.mobile-layout .joystick.is-held .joystick-thumb{background:linear-gradient(135deg,#f3d2a9ba,#8faca8a0);border-color:#ffe4bd}
.mobile-layout .stick-direction{position:absolute;color:#e7f3eb9e;font-size:17px;line-height:1;pointer-events:none}
.mobile-layout .stick-up{left:50%;top:7%;transform:translateX(-50%)}.mobile-layout .stick-down{left:50%;bottom:7%;transform:translateX(-50%)}
.mobile-layout .stick-left{left:8%;top:50%;transform:translateY(-50%)}.mobile-layout .stick-right{right:8%;top:50%;transform:translateY(-50%)}
.mobile-layout .joystick-caption{font:8px monospace;letter-spacing:1px;color:#e5e7da9c;text-shadow:0 1px 3px #10222f}
.mobile-layout .attacks{position:absolute;right:var(--pad-right);bottom:calc(var(--pad-bottom) + 10px);display:grid;grid-template-columns:48px repeat(2,var(--key-size));grid-template-rows:repeat(2,var(--key-size));gap:10px;opacity:1;align-items:center}
.mobile-layout .attacks button[data-action]{min-height:48px;min-width:48px;width:var(--key-size);height:var(--key-size);border:1.5px solid #e7f1e995;background:#19323c80;border-radius:50%;box-shadow:0 2px 7px #08171e3d,inset 0 1px #ffffff2b;color:#fff2de;pointer-events:auto;touch-action:none;position:relative}
.mobile-layout .attacks button[data-action="punch"]{background:#70352380;border-color:#ffc5a8a3}
.mobile-layout .attacks button[data-action="kick"]{background:#214f4780;border-color:#b1e1c9a6}
.mobile-layout .attacks button.special-button{background:#62532d7a;border-color:#f5d898a8;color:#ffe9b7}
.mobile-layout .attacks button[data-action="alternate"]{background:#4b39587a;border-color:#dcc1eea6;color:#f2deff}
.mobile-layout .attacks button span{font-size:clamp(11px,3.1dvh,12px);font-weight:900;letter-spacing:.4px;text-shadow:0 1px 3px #13242a}
.mobile-layout .attacks button small{display:none}
.mobile-layout .attacks button .energy-cost{display:block;font:9px monospace;letter-spacing:0;margin-top:5px;color:#fff1d6c4}
.mobile-layout .attacks button.block-button{grid-area:1/1/3/2;align-self:end;margin-bottom:12px;width:48px;height:48px;background:#243a4780;border-color:#dae5eca0}
.mobile-layout .attacks button.block-button span{font-size:9px}
.mobile-layout .attacks button.is-low-energy{border-style:dashed;border-color:#d5d7d650;background:#1d2d397a;color:#b1b5b3}
.mobile-layout .attacks button.is-low-energy .energy-cost{color:#c9b7a4}
.mobile-layout .attacks button.is-pressed{background:#efc18de0;border-color:#fff1d5;color:#17252b;box-shadow:0 0 0 4px #ffdf9f28,inset 0 3px 5px #17252b30;transform:scale(.94)}
.mobile-layout .attacks button.is-pressed span{color:#17252b;text-shadow:none}
.mobile-layout .selection{position:absolute;inset:calc(var(--toolbar-height) + var(--top-safe) + 5px) var(--pad-right) var(--pad-bottom) var(--pad-left);width:auto;max-height:none;transform:none;margin:0;padding:14px;z-index:6;border:1px solid #5d7a7266;border-radius:16px;background:linear-gradient(125deg,#172b32fa,#102027fc);box-shadow:0 10px 40px #04121970;display:grid;grid-template-columns:minmax(0,1fr) 205px;grid-template-rows:auto minmax(0,1fr) auto;gap:12px 18px;overflow:hidden}
.mobile-layout .selection-heading{grid-column:1/-1;margin:0;align-items:center;gap:8px;font-size:10px;letter-spacing:1.1px;min-height:16px}
.mobile-layout .selection-heading>span:last-child{font-size:8px;letter-spacing:.5px}
.mobile-layout .selection-content{display:contents}
.mobile-layout .fighter-options{grid-column:1;grid-row:2/4;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:76px;align-content:start;gap:8px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y;min-height:0;padding:2px 6px 6px 2px;scrollbar-width:thin;scrollbar-color:#628176 #112329}
.mobile-layout .fighter-card{height:76px;min-height:64px;display:flex;flex-direction:row;align-items:center;padding:0 5px;gap:4px;text-align:left;border-radius:9px;background:#29404960;touch-action:manipulation}
.mobile-layout .fighter-card.selected{background:linear-gradient(110deg,#77634266,#41575066);border-color:#f4c890;box-shadow:inset 3px 0 #f4c890}
.mobile-layout .fighter-card canvas{width:44px;height:66px;flex-shrink:0;align-self:end}
.mobile-layout .fighter-card>span{min-width:0}
.mobile-layout .fighter-card strong{font-size:11px;line-height:1.15;margin:4px 0;min-height:0;white-space:normal;display:block}
.mobile-layout .fighter-card small{font:6px monospace;color:#a1b8b3;letter-spacing:0}
.mobile-layout .fighter-card em{display:none}
.mobile-layout .fighter-card i{font-size:10px;top:5px;right:5px}
.mobile-layout .start-area{grid-column:2;grid-row:2;display:flex;flex-direction:column;justify-content:flex-start;gap:12px;align-items:stretch;min-width:0;width:auto}
.mobile-layout .opponent-picker{font:9px monospace;letter-spacing:1px;gap:8px;margin:0;color:#b8c8bd}
.mobile-layout .opponent-picker select{font:13px Arial,sans-serif;min-height:44px;border-radius:8px;padding:8px 10px;color:#f0eadc;background:#22383e;border-color:#537268}
.mobile-layout .start-area .primary-button{width:100%;min-height:52px;height:auto;border-radius:9px;padding:12px 8px;font-size:11px;letter-spacing:.4px}
.mobile-layout .training-toggle{justify-content:flex-start;min-height:44px;font-size:11px;margin:0;gap:8px;flex-wrap:nowrap}
.mobile-layout .training-toggle input{width:20px;height:20px;margin:0}.mobile-layout .training-toggle span{display:none}
.mobile-layout .selected-moves{grid-column:2;grid-row:3;font:10px/1.6 Arial,sans-serif;letter-spacing:0;color:#e2cba7;margin:0;padding-top:9px;border-top:1px solid #6d86774d}
.mobile-layout .match-overlay{inset:18% 5% auto;z-index:5;padding:16px 5px;pointer-events:none}
.mobile-layout .match-overlay h1{font-size:clamp(30px,8dvh,52px);line-height:1;margin:8px 0 14px}
.mobile-layout .match-overlay>span{font:10px monospace;letter-spacing:1px}
.mobile-layout .match-overlay .primary-button,.mobile-layout .match-overlay .secondary-button{min-height:48px;font-size:12px;padding:12px 18px;border-radius:9px}
.mobile-layout .arena[data-phase="paused"]::before{height:100%;background:#0a1723b8;z-index:2}
.mobile-layout .help-panel{display:block;position:absolute;inset:calc(var(--toolbar-height) + var(--top-safe) + 8px) max(30px,var(--safe-area-inset-right, env(safe-area-inset-right, 0px))) var(--pad-bottom) max(30px,var(--safe-area-inset-left, env(safe-area-inset-left, 0px)));z-index:12;border-radius:16px;background:#13272afc;padding:16px 24px;margin:0;overflow-y:auto;overscroll-behavior:contain}
.mobile-layout .help-panel h2{font-size:21px;margin:5px 0 15px;color:#f5e8cf}
.mobile-layout .help-panel p{font-size:13px;line-height:1.7;max-width:700px}
.mobile-layout .touch-instructions{display:block}.mobile-layout .keyboard-instructions{display:none}
@media(max-height:360px) and (orientation:landscape){
 .mobile-layout{--stick-size:112px;--key-size:50px;--pad-bottom:max(6px,var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)))}
 .mobile-layout .selection{padding:9px 12px;gap:7px 12px;grid-template-columns:minmax(0,1fr) 190px}
 .mobile-layout .fighter-options{grid-auto-rows:65px;gap:6px}.mobile-layout .fighter-card{height:65px}.mobile-layout .fighter-card canvas{height:59px;width:40px}
 .mobile-layout .start-area{gap:5px}.mobile-layout .selected-moves{font-size:9px;padding-top:5px}
 .mobile-layout .hud{inset:7px 4% auto}.mobile-layout .fighter-label{display:none}.mobile-layout .fighter-hud b{font-size:12px}
 .mobile-layout .attacks{gap:7px;bottom:var(--pad-bottom)}.mobile-layout .joystick-caption{display:none}
}
@media(max-width:740px) and (orientation:landscape){
 .mobile-layout .arena-toolbar>span{display:none}.mobile-layout .arena-toolbar{justify-content:flex-end}
 .mobile-layout .fighter-options{grid-template-columns:repeat(2,minmax(0,1fr))}
 .mobile-layout .selection{grid-template-columns:minmax(0,1fr) 190px;gap:8px 12px}
 .mobile-layout .selection-heading{font-size:9px}.mobile-layout .selection-heading>span:last-child{font-size:7px}
}
@media(orientation:portrait) and (max-height:650px){.rotate-screen{gap:10px;padding-top:18px;padding-bottom:18px}.rotate-illustration{margin:8px 0 0;height:88px}.rotate-screen h1{font-size:32px}.rotate-screen p{font-size:12px}}
/* Browser toolbars can leave less than 300px of usable landscape height. */
@media(orientation:landscape) and (max-height:300px){
 .mobile-layout .selection{grid-template-rows:auto minmax(0,1fr)}
 .mobile-layout .fighter-options{grid-row:2}
 .mobile-layout .selected-moves{display:none}
 .mobile-layout .start-area{gap:4px}
 .mobile-layout .start-area .primary-button{min-height:48px}
 .mobile-layout .opponent-picker{gap:4px}
 .mobile-layout .match-overlay{inset:10% 4% auto;padding:10px 5px}
 .mobile-layout .match-overlay h1{margin:6px 0 10px}
}