@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');
:root{color-scheme:dark;--bg:#040810;--cyan:#65eee6;--orange:#ff875e;--white:#edf6fa;--muted:#7e919e;--line:#23333f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--white);font:16px 'DM Sans',sans-serif}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:1px solid var(--line);border-radius:3px;cursor:pointer;transition:background .18s,border-color .18s,transform .18s}button:hover{border-color:var(--cyan);background:#65eee60a}button:disabled{opacity:.4;cursor:wait}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}[hidden]{display:none!important}header{height:76px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #1c2936}.brand{display:flex;align-items:center;gap:12px;color:#f2f8fa;text-decoration:none;font-weight:700;letter-spacing:2px;font-size:20px}.brand-icon{font-size:40px;line-height:1;color:var(--cyan)}.brand-sub{font:11px 'Space Mono',monospace;letter-spacing:2px;color:var(--muted);border-left:1px solid #34424d;padding-left:18px;margin-left:10px}.header-right{display:flex;align-items:center;gap:9px}.header-right button{font-size:12px;padding:8px 13px}.version{font:10px 'Space Mono',monospace;letter-spacing:1px;color:#59717f;margin-right:20px}main{padding:0 28px}.match-hud{display:flex;align-items:center;justify-content:center;gap:32px;padding:22px 5%;}.fighter-hud{flex:1;max-width:460px;color:var(--cyan)}.fighter-name{display:flex;justify-content:space-between;align-items:center;font-weight:700;font-size:15px;letter-spacing:1.5px}.fighter-name small{font:10px 'Space Mono',monospace;letter-spacing:1px;opacity:.65}.health{height:5px;background:#172732;margin:9px 0 7px;overflow:hidden}.health>div{width:100%;height:100%;background:var(--cyan);transition:width .15s;box-shadow:0 0 20px var(--cyan)}.orange{color:var(--orange)}.orange .health>div{background:var(--orange)}.health-caption{display:flex;justify-content:space-between;font:9px 'Space Mono',monospace;letter-spacing:1px;color:#8197a5}.score-hud{display:flex;align-items:center;gap:22px}.score-hud>span{font:600 42px 'Barlow Condensed',sans-serif;min-width:18px}.score-hud>span:first-child{color:var(--cyan)}.score-hud>span:last-child{color:var(--orange)}.score-hud>div{text-align:center;display:flex;flex-direction:column;gap:8px}.score-hud div span{font:9px 'Space Mono',monospace;letter-spacing:1.3px;color:#657e8c}.score-hud strong{font:11px 'Space Mono',monospace;letter-spacing:1.2px;white-space:nowrap}.game-shell{position:relative;height:calc(100dvh - 234px);min-height:520px;max-height:1000px;border:1px solid #263743;overflow:hidden;background:#050b13}#arena{position:absolute;inset:0}#arena canvas{width:100%;height:100%;display:block;touch-action:none}body.playing #arena{cursor:crosshair}.arena-label{position:absolute;top:19px;left:23px;font:10px 'Space Mono',monospace;letter-spacing:1.7px;color:#aac1cf;pointer-events:none}.arena-label>span:not(.small-square){color:#4a626f;margin:0 10px}.small-square{display:inline-block;width:5px;height:5px;background:var(--cyan);margin-right:10px}#network-status{position:absolute;top:19px;right:24px;color:var(--cyan);font:11px 'Space Mono',monospace;background:#08141aca;padding:5px 9px}.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:4% 6%;background:linear-gradient(90deg,#040910e8 0%,#04091080 43%,#04091045 60%,#040910d9 100%)}.intro .eyebrow{margin-bottom:22px}.eyebrow{font:11px 'Space Mono',monospace;letter-spacing:2px;color:var(--cyan);margin:0 0 14px}.intro h1{font:800 clamp(60px,6.3vw,104px)/.83 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.5px;margin:0}.intro h1 em{color:var(--cyan);font-style:normal}.intro p{font-size:15px;line-height:1.7;color:#90a8b8;margin-top:26px}.intro-bottom{display:flex;align-items:center;gap:14px;font:10px 'Space Mono',monospace;letter-spacing:1px;color:#72909e;margin-top:28px}.disc-symbol{color:var(--cyan);font-size:24px}.muted{color:#344e60}.mode-panel{width:365px;max-width:42%}.panel-heading{font:10px 'Space Mono',monospace;letter-spacing:1px;display:flex;justify-content:space-between;color:#90a5b0;margin-bottom:17px}.panel-heading span{color:#475e6d}.mode-card{display:block;width:100%;text-align:left;background:linear-gradient(135deg,#0c222bd9,#08121bf5);padding:24px 25px;border-color:#3a6970;position:relative}.mode-card:hover{background:#102e37;transform:translateY(-2px);border-color:var(--cyan)}.mode-number{font:12px 'Space Mono',monospace;color:var(--cyan);display:flex;align-items:center;gap:10px}.mode-number>span{color:#c6d7df;font-size:10px;letter-spacing:1px}.mode-card h2{font:600 29px 'Barlow Condensed',sans-serif;margin:14px 0 9px;letter-spacing:.2px}.mode-card h2>span{float:right;color:var(--cyan)}.mode-card p{font-size:13px;line-height:1.65;color:#92a9b7;margin:0 0 21px}.mode-footer{font:9px 'Space Mono',monospace;letter-spacing:.6px;display:flex;align-items:center;color:var(--cyan);gap:7px}.mode-footer>span:last-child{margin-left:auto;color:#778c9b;font-size:8px}.live-dot{display:inline-block;width:5px;height:5px;flex:none;background:var(--cyan);border-radius:50%}.online-card{margin-top:13px;background:#0b121dea;border-color:#30424e}.online-card .mode-number,.online-card h2>span{color:var(--orange)}.online-card .mode-footer{color:#b2c1c9}.legacy-link{display:block;text-align:right;font-size:11px;text-decoration:none;color:#81939f;margin-top:17px}.legacy-link:hover{color:#fff}footer{display:flex;align-items:center;gap:21px;padding:18px 0;color:#6f8797;font:9px 'Space Mono',monospace;letter-spacing:.4px}footer>span{white-space:nowrap}kbd{font:9px 'Space Mono',monospace;padding:4px 6px;border:1px solid #334653;border-radius:3px;color:#b8cbd5;background:#0a131d;margin-right:5px}.footer-note{margin-left:auto;font-size:8px;color:#3f5868}.central{justify-content:center;background:#030911a8;backdrop-filter:blur(6px)}.modal-card{text-align:center;max-width:380px;width:100%}.modal-card h2{font:700 58px/.95 'Barlow Condensed',sans-serif;margin:20px 0}.modal-card p{color:#91a7b7;font-size:15px;line-height:1.65;margin-bottom:26px}.primary,.secondary{display:block;width:100%;padding:14px 18px;font-weight:600;font-size:14px;border-radius:3px;text-align:center}.primary{background:var(--cyan);border-color:var(--cyan);color:#072028}.primary:hover{background:#a2fff7}.primary>span{float:right}.secondary{margin-top:10px;color:#adc3d0;border-color:#344b5b}.secondary:hover{background:#132631}.ai-readout{position:absolute;top:58px;left:24px;padding:15px 18px;border-left:2px solid #ff875e69;background:linear-gradient(90deg,#06111ad9,#06111a00);pointer-events:none}.ai-readout .eyebrow{font-size:9px;color:var(--orange);letter-spacing:1px;display:block}.ai-readout strong{font-size:13px;font-weight:500}.ai-readout p{font:9px 'Space Mono',monospace;color:#6f8b9f;line-height:1.7;margin:8px 0 0}.readout-separator{margin:0 6px}.combat-hud{position:absolute;bottom:21px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:23px;background:#08111ce8;border:1px solid #294550;padding:15px 22px;pointer-events:none}.hud-label{font:9px 'Space Mono',monospace;color:#7a9aa9}.energy{width:110px;height:4px;background:#1a2e3b;margin-top:8px}.energy>div{height:100%;background:var(--cyan)}.ability{display:flex;align-items:center;gap:5px;white-space:nowrap;font:9px 'Space Mono',monospace;color:#9db5c3}.charge{width:110px}.charge>span{font:8px 'Space Mono',monospace;color:#8da8b5;white-space:nowrap}.charge>div{height:3px;background:#243d4d;margin-top:7px}.charge>div>div{height:100%;background:#fff;width:0}#countdown{position:absolute;top:35%;left:0;width:100%;text-align:center;pointer-events:none;font:700 110px 'Barlow Condensed',sans-serif;color:#e3ffff;text-shadow:0 0 40px #5bfff775}#round-banner{position:absolute;top:36%;left:0;width:100%;text-align:center;pointer-events:none;text-shadow:0 2px 20px #000}#round-banner small{font:12px 'Space Mono',monospace;letter-spacing:3px;color:var(--cyan)}#round-banner h2{font:700 65px 'Barlow Condensed',sans-serif;margin:8px;text-transform:uppercase}#notice{position:absolute;top:25px;left:50%;transform:translateX(-50%);font-size:13px;color:var(--cyan);text-align:center;pointer-events:none}dialog{width:470px;max-width:calc(100% - 32px);padding:34px;background:#0b1521;color:#e6f2f8;border:1px solid #32515f;border-radius:5px;max-height:90dvh}dialog::backdrop{background:#000a;backdrop-filter:blur(8px)}dialog h2{font:600 36px 'Barlow Condensed',sans-serif;line-height:1;margin:18px 0}dialog p{font-size:14px;line-height:1.65;color:#93abba}dialog .close{position:absolute;right:15px;top:10px;border:none;font-size:27px;color:#a8c0ce;width:30px}#lobby .primary{margin-top:25px}.divider{display:flex;align-items:center;gap:15px;color:#648495;font:9px 'Space Mono',monospace;margin:25px 0}.divider:before,.divider:after{content:'';height:1px;flex:1;background:#243848}label{display:block;font-size:13px;color:#afc5d2;margin-bottom:9px}.join-row{display:flex;gap:10px}.join-row input{background:#050e18;border:1px solid #304b5d;padding:13px;width:100%;min-width:0;font:18px 'Space Mono',monospace;letter-spacing:2px;color:#e7ffff;border-radius:3px}.join-row .secondary{margin:0;width:90px}.error{color:#ffa38a!important;font-size:13px}.room-code-label{font:10px 'Space Mono',monospace;color:#7da4b6;letter-spacing:2px;margin-top:25px}#room-code{font:30px 'Space Mono',monospace;letter-spacing:5px;color:var(--cyan);padding:15px 0}.waiting{color:var(--cyan)!important}.waiting .live-dot{margin-right:8px}.access-note{font-size:12px!important}.instructions p{padding-bottom:12px;border-bottom:1px solid #203341}.instructions b{color:#dfeef5}#fatal{position:fixed;inset:0;background:#07111cf5;z-index:100;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}#fatal p{max-width:440px;line-height:1.7;color:#a2b5c5}#fatal button{padding:14px 24px}#touch-ui{position:absolute;inset:0;pointer-events:none;touch-action:none}#joystick{position:absolute;bottom:25px;left:25px;width:110px;height:110px;border:1px solid #598c9990;background:#06233155;border-radius:50%;pointer-events:auto;touch-action:none}#stick{width:45px;height:45px;border:1px solid #63c5c399;background:#32bab64a;position:absolute;left:32px;top:32px;border-radius:50%;pointer-events:none}.touch-actions{position:absolute;right:20px;bottom:20px;display:grid;grid-template-columns:repeat(2,62px);gap:8px;pointer-events:auto}.touch-actions button{height:52px;font-size:9px;background:#092331bd;border-color:#3c6e7d;touch-action:none}.touch-actions #touch-fire{background:#4cd6cece;color:#052329;border-color:var(--cyan)}
@media(min-width:1600px){.game-shell{min-height:650px}.intro h1{font-size:120px}.mode-panel{width:420px}.mode-card{padding:32px}.mode-card h2{font-size:34px}.mode-card p{font-size:15px}}@media(max-width:1150px){header{padding:0 20px}.version{display:none}main{padding:0 16px}.match-hud{padding:20px 2%;gap:20px}.score-hud{gap:12px}.footer-note{display:none}footer{gap:12px;font-size:8px}.screen{padding:5%}.mode-panel{width:330px;max-width:47%}.mode-card{padding:20px}.mode-card p{font-size:12px}.intro-bottom{font-size:9px;gap:8px}.combat-hud{gap:16px}.ai-readout{top:50px}}
@media(max-width:760px){header{height:58px;padding:0 13px}.brand{font-size:16px;gap:6px}.brand-icon{font-size:29px}.brand-sub{display:none}.header-right{gap:5px}.header-right button{padding:7px 9px;font-size:10px}main{padding:0 8px}.match-hud{gap:12px;padding:14px 3px}.fighter-name{font-size:12px}.fighter-name small{display:none}.health-caption{font-size:7px;letter-spacing:0}.health-caption span:last-child{display:none}.score-hud{gap:11px}.score-hud>span{font-size:28px}.score-hud div span{font-size:7px}.score-hud strong{font-size:8px;letter-spacing:.4px}.score-hud>div{gap:4px}.game-shell{height:calc(100dvh - 154px);min-height:570px}.arena-label{font-size:8px;top:15px;left:14px}.screen{display:block;padding:42px 22px 20px;background:linear-gradient(90deg,#040910cc,#04091055)}.intro h1{font-size:56px;line-height:.88;letter-spacing:.5px}.intro h1 br{display:none}.intro h1 br:after{content:' '}.intro h1 em{display:block}.intro p{margin:12px 0;font-size:12px}.intro .eyebrow{font-size:8px;margin-bottom:14px}.intro-bottom{display:none}.mode-panel{width:100%;max-width:100%;margin-top:24px}.panel-heading{font-size:8px;margin-bottom:10px}.mode-card{padding:17px 19px}.mode-card h2{font-size:26px;margin:10px 0 7px}.mode-card p{font-size:12px;margin-bottom:15px}.mode-number{font-size:10px}.mode-number span{font-size:8px}.mode-footer{font-size:8px}.online-card{margin-top:10px}.legacy-link{font-size:10px;margin-top:12px}.central{display:flex;padding:25px}.combat-hud{bottom:13px;left:50%;gap:13px;padding:10px 14px}.combat-hud .ability{display:none}.combat-hud .charge{width:100px}.energy{width:95px}body.touch .combat-hud{bottom:140px;padding:8px 14px}#network-status{font-size:8px;top:10px;right:12px}.ai-readout{left:14px;top:39px;padding:8px 12px}.ai-readout strong{font-size:11px}.ai-readout p{font-size:8px}.ai-readout .eyebrow{font-size:8px;margin-bottom:8px}footer{justify-content:center;gap:0;padding:10px;font-size:8px}footer span:not(:first-child){display:none}body.touch footer span:first-child{font-size:0}body.touch footer span:first-child kbd{display:none}body.touch footer span:first-child:after{content:'LEFT STICK TO MOVE · HOLD THROW TO CHARGE · AUTO-AIM';font-size:8px}dialog{padding:28px}.modal-card h2{font-size:47px}.arena-label>span:not(.small-square){margin:0 4px}}
@media(max-height:640px) and (orientation:landscape){header{height:47px}.match-hud{padding:9px 2%}.game-shell{height:calc(100dvh - 136px);min-height:310px}footer{padding:8px}.screen{padding:25px 5%;display:flex}.intro h1{font-size:52px}.intro p{font-size:12px}.intro-bottom{display:none}.intro .eyebrow{font-size:8px;margin-bottom:12px}.mode-panel{margin:0;width:310px;max-width:48%}.panel-heading{font-size:8px;margin-bottom:10px}.mode-card{padding:12px 16px}.mode-card h2{font-size:24px;margin:6px 0}.mode-card p{font-size:11px;margin-bottom:10px}.mode-number{font-size:9px}.mode-number span{font-size:8px}.mode-footer{font-size:8px}.online-card{margin-top:8px}.legacy-link{margin-top:8px;font-size:9px}.mode-card p br{display:none}.ai-readout{padding:6px 10px}.ai-readout p{display:none}body.touch .combat-hud{bottom:15px}.combat-hud{padding:8px 12px}.combat-hud .ability{display:none}.ai-readout strong{font-size:10px}.ai-readout .eyebrow{font-size:8px;margin-bottom:5px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
/* Ascension: cinematic framing and combat powers. */
.game-shell{height:calc(100dvh - 216px);min-height:570px}.screen{background:linear-gradient(90deg,#040910d9 0%,#04091045 43%,#04091010 60%,#040910bb 100%)}.mode-card p{font-size:14px}.version{margin-right:8px}.combat-hud{left:24px;transform:none;bottom:22px;gap:14px;padding:12px 16px}.combat-hud .ability{font-size:11px}.combat-hud .charge{width:100px}#power-tray{position:absolute;bottom:22px;right:24px;display:flex;gap:8px}#power-tray button{display:flex;align-items:center;gap:9px;background:#091722ed;border-color:#325260;padding:12px 16px;text-align:left;min-height:58px}#power-tray button:disabled{cursor:default;opacity:.5}#power-tray button strong{display:block;font-size:14px;font-weight:500}#power-tray button span{display:block;font:10px 'Space Mono',monospace;color:var(--cyan);margin-top:5px}#power-overdrive{border-color:#685536!important}#power-overdrive span{color:#ffca7a!important}#power-phase{border-color:#514565!important}#power-phase span{color:#c6a7ff!important}#cinematic{position:absolute;inset:0;pointer-events:none;z-index:8}.cinema-bar{position:absolute;left:0;right:0;height:10%;background:#000}.cinema-bar.top{top:0}.cinema-bar.bottom{bottom:0}.cinema-caption{position:absolute;left:5%;bottom:14%;text-shadow:0 2px 15px #000}.cinema-caption>span{font:12px 'Space Mono',monospace;letter-spacing:2px;color:var(--cyan)}.cinema-caption h2{font:600 40px 'Barlow Condensed',sans-serif;margin:10px 0;color:#f0ffff}#skip-intro{position:absolute;right:22px;bottom:3%;pointer-events:auto;font-size:12px;border:0;background:#101a24;padding:8px 12px}#skip-intro kbd{font-size:10px;margin-left:8px}.cinematic .arena-label{visibility:hidden}#camera-button{white-space:nowrap}#touch-ui{z-index:5}#power-tray{z-index:6}
@media(max-width:1250px){.version{display:none}.combat-hud .charge{display:none}.combat-hud .ability:last-of-type{display:none}.header-right{gap:6px}#power-tray button{padding:10px 12px}#power-tray{right:16px}.combat-hud{left:16px}footer{gap:12px}}
@media(max-width:900px){.brand-sub{display:none}#power-tray button strong{font-size:12px}.combat-hud .ability{display:none}.combat-hud{padding:12px}#power-tray button{padding:10px}.energy{width:85px}.header-right #camera-button{font-size:10px}.cinema-caption h2{font-size:30px}.cinema-caption>span{font-size:10px}}
@media(max-width:760px){.game-shell{height:calc(100dvh - 150px);min-height:590px}.header-right #camera-button{display:none}#power-tray{left:12px;right:12px;bottom:80px;justify-content:center;gap:6px}#power-tray button{flex:1;min-width:0;justify-content:center;padding:9px 7px}#power-tray kbd{display:none}#power-tray button span{font-size:9px}body.touch #power-tray{bottom:192px;left:auto;width:220px;right:12px}body.touch #power-tray button strong{font-size:10px}body.touch #power-tray button{padding:8px 4px}.touch-actions{grid-template-columns:repeat(2,62px)}body.touch .combat-hud{bottom:155px;left:25px;transform:none}.combat-hud{left:50%;transform:translateX(-50%);bottom:20px}.cinema-caption{bottom:19%}.cinema-caption h2{font-size:28px;max-width:280px}#skip-intro{bottom:2%;font-size:11px}body.touch footer span:first-child:after{content:'MOVE · THROW · FLIP · DASH · 3 POWERS';font-size:9px}.mode-card p{font-size:13px}}
@media(max-height:640px) and (orientation:landscape){.game-shell{height:calc(100dvh - 136px);min-height:310px}.combat-hud{bottom:14px}body.touch .combat-hud{bottom:145px;left:25px}body.touch #power-tray{bottom:20px;left:50%;right:auto;transform:translateX(-50%);width:230px}.mode-card p{font-size:11px}#power-tray button strong{font-size:11px}.cinema-caption h2{font-size:28px}.cinema-caption>span{font-size:10px}}

/* Duel rules v8 */
#guard-status{position:absolute;left:50%;top:45px;transform:translateX(-50%);color:#fff;background:#07111dd9;padding:7px 12px;border:1px solid #40566b;border-radius:6px;font:600 10px sans-serif;pointer-events:none;z-index:4;white-space:nowrap}
body:not(.playing) #guard-status,body.cinematic #guard-status{display:none}
.suit-picker{display:flex;flex-wrap:wrap;gap:10px;padding:12px;background:#0d1725;border:1px solid #314256;border-radius:10px;margin-bottom:12px}.suit-picker label{display:flex;align-items:center;gap:8px;font-size:12px;color:#e7f3ff}.suit-picker input{width:45px;height:35px;border:0;background:transparent;cursor:pointer}.suit-picker small{width:100%;color:#98acbb;font-size:10px}
/* Phone arena: stable viewport, thumb controls, and safe screen edges. */
@media (pointer:coarse), (max-width:760px) {
  body { overscroll-behavior:none; }
  #app { height:100svh; height:100dvh; display:flex; flex-direction:column; }
  header { height:52px; min-height:52px; padding:0 max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left)); }
  .brand { font-size:14px; gap:5px; }
  .brand-sub,.version { display:none; }
  .header-right button { min-height:40px; padding:6px 8px; }
  main { flex:1; min-height:0; padding:0; display:flex; flex-direction:column; }
  .match-hud { flex:none; padding:8px 12px; gap:10px; }
  .score-hud>span { font-size:26px; }
  .fighter-name { font-size:11px; }
  .game-shell { flex:1; height:auto; min-height:0; max-height:none; border-left:0; border-right:0; }
  footer { display:none; }
  .screen { overflow-y:auto; overscroll-behavior:contain; padding:32px 18px 24px; }
  .intro h1 { font-size:clamp(35px,9vw,54px); }
  .intro p { font-size:12px; margin:10px 0; }
  .intro-bottom { display:none; }
  .mode-panel { margin-top:14px; }
  .mode-card { padding:12px 16px; }
  .mode-card h2 { font-size:25px; margin:7px 0; }
  .mode-card p { font-size:12px; margin-bottom:10px; }
  .primary,.secondary { min-height:44px; }
  .central { overflow-y:auto; }
  .modal-card { margin:auto; max-height:100%; }
  .modal-card h2 { font-size:36px; }
  dialog { max-height:calc(100dvh - 24px); overflow-y:auto; padding:26px 20px; }
  dialog input { font-size:16px; }
  .arena-label { display:none; }
  body.touch #ai-readout { top:8px; left:10px; padding:5px 8px; max-width:52%; }
  body.touch #ai-readout p,body.touch #ai-readout .eyebrow { display:none; }
  body.touch #ai-readout strong { font-size:10px; }
  #notice { top:40px; width:80%; font-size:11px; z-index:7; }
  #network-status { top:10px; right:10px; max-width:45%; text-align:right; }
  body.touch #touch-ui { user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
  body.touch #joystick { width:112px; height:112px; left:max(14px,env(safe-area-inset-left)); bottom:calc(18px + env(safe-area-inset-bottom)); }
  body.touch #stick { left:33px; top:33px; }
  body.touch .touch-actions { right:max(12px,env(safe-area-inset-right)); bottom:calc(14px + env(safe-area-inset-bottom)); grid-template-columns:repeat(2,60px); gap:7px; }
  body.touch .touch-actions button { height:48px; font-size:10px; border-radius:12px; font-weight:700; }
  body.touch #touch-fire { grid-column:2; grid-row:1 / span 2; height:103px; }
  body.touch #touch-guard { grid-column:1; grid-row:1; }
  body.touch #touch-jump { grid-column:1; grid-row:2; }
  body.touch #touch-dash { grid-column:1; grid-row:3; }
  body.touch #touch-recall { grid-column:2; grid-row:3; }
  body.touch .combat-hud { left:12px; bottom:calc(142px + env(safe-area-inset-bottom)); transform:none; padding:7px 8px; gap:0; border:0; background:#08111cbb; }
  body.touch .combat-hud .charge { display:none; }
  body.touch .combat-hud .energy { width:98px; }
  body.touch #power-tray { top:44px; bottom:auto; left:50%; right:auto; transform:translateX(-50%); width:min(290px,calc(100% - 24px)); gap:6px; }
  body.touch #power-tray button { min-height:48px; padding:6px; flex:1; border-radius:10px; justify-content:center; touch-action:none; }
  body.touch #power-tray kbd { display:none; }
  body.touch #power-tray button strong { font-size:10px; }
  body.touch #power-tray button span { font-size:9px; }
  .touch-actions button.is-held { background:#2b6675; border-color:#cffffa; transform:scale(.95); }
  body.touch #touch-fire.is-held { background:#b1fff7; }
  .cinema-caption h2 { font-size:26px; }
  #skip-intro { min-height:44px; bottom:max(4px,env(safe-area-inset-bottom)); }
  #skip-intro kbd { display:none; }
  #countdown { font-size:72px; top:30%; }
  #round-banner h2 { font-size:38px; }
}
@media (pointer:coarse) and (orientation:landscape) {
  header { height:42px; min-height:42px; }
  .match-hud { padding:4px max(14px,env(safe-area-inset-left)); }
  .health { margin:4px 0; }
  .health-caption { display:none; }
  .screen { display:flex; align-items:flex-start; gap:20px; padding:15px max(20px,env(safe-area-inset-left)); }
  .intro { flex:1; }
  .intro h1 { font-size:38px; }
  .intro .eyebrow { margin-bottom:8px; }
  .mode-panel { flex:1; width:auto; max-width:48%; margin:0; }
  .mode-card p,.panel-heading,.mode-footer,.legacy-link { display:none; }
  .mode-card { padding:9px 12px; }
  .mode-card h2 { font-size:21px; }
  .central { align-items:center; }
  body.touch #ai-readout { display:none!important; }
  body.touch #power-tray { top:auto; bottom:calc(10px + env(safe-area-inset-bottom)); width:min(240px,calc(100% - 300px)); }
  body.touch .combat-hud { left:50%; bottom:calc(67px + env(safe-area-inset-bottom)); transform:translateX(-50%); }
  body.touch #joystick { bottom:calc(12px + env(safe-area-inset-bottom)); }
  body.touch .touch-actions { bottom:calc(10px + env(safe-area-inset-bottom)); }
}

.brand-nav,.game-tabs{display:flex;align-items:center}.game-tabs .brand-sub{display:block;text-decoration:none;white-space:nowrap}.game-tabs .brand-sub:hover{color:var(--cyan)}@media(max-width:900px){header{height:auto;min-height:76px;flex-wrap:wrap;gap:12px;padding:14px 16px}.brand-nav{flex-wrap:wrap;gap:12px}.game-tabs .brand-sub{display:block;margin-left:0;margin-right:16px;padding-left:12px}.header-right .version{display:none}}

/* Touch-sized game actions stay reachable in portrait and landscape. */
#menu-button,#exit-game,#resume,#leave,#result-menu,#rematch{min-width:64px;min-height:48px;touch-action:manipulation}
#player-name{font-size:16px;max-width:100%;min-height:44px}
@media(max-width:700px),(max-height:500px){
.header-right{display:flex;gap:6px;flex-wrap:wrap}.playing .header-right #sound,.playing .header-right #help,.playing .header-right .version{display:none}
.screen.central{overflow-y:auto;padding:16px;padding-bottom:max(16px,env(safe-area-inset-bottom))}.modal-card{max-height:100%;overflow-y:auto}
#exit-game,#menu-button{padding:8px 12px}#team-roster{font-size:10px!important;top:105px!important;max-height:100px;overflow:auto}
}

/* Complete touchscreen layout, including hybrid tablets. */
body.touch #touch-ui{touch-action:none;user-select:none;-webkit-user-select:none}
body.touch .touch-actions{grid-template-columns:repeat(3,56px);gap:7px;bottom:max(12px,env(safe-area-inset-bottom));right:max(12px,env(safe-area-inset-right))}
body.touch .touch-actions button{min-height:52px;font-size:10px;touch-action:none}
body.touch #touch-fire{grid-column:2 / 4;grid-row:1;min-height:64px}
body.touch #touch-guard{grid-column:1;grid-row:1}
body.touch #touch-jump{grid-column:1 / 4;grid-row:2}
body.touch #touch-flip-left{grid-column:1;grid-row:3}
body.touch #touch-flip-back{grid-column:2;grid-row:3}
body.touch #touch-flip-right{grid-column:3;grid-row:3}
body.touch footer,body.touch kbd{display:none}
body.touch #touch-recall{display:none!important}
body.touch dialog{overflow-y:auto;overscroll-behavior:contain}
body.touch button,body.touch a,body.touch input{min-height:44px;touch-action:manipulation}
body.touch #joystick,body.touch .touch-actions button{touch-action:none}
body.touch .game-shell{min-height:0;height:calc(100dvh - 150px)}
body.touch.playing{overscroll-behavior:none}
@media(max-height:500px){body.touch .touch-actions{grid-template-columns:repeat(3,52px);gap:4px}body.touch .touch-actions button{min-height:44px;height:44px}body.touch #touch-fire{min-height:44px}body.touch .game-shell{height:calc(100dvh - 106px)}}

/* Gesture gameplay: only Shield remains on the Disc Arena touch layer. */
body.touch #joystick,body.touch #touch-fire,body.touch #touch-jump,body.touch #touch-recall,body.touch #touch-flip-left,body.touch #touch-flip-right,body.touch #touch-flip-back{display:none!important}
body.touch .touch-actions{display:block;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom))}
body.touch #touch-guard{min-width:84px;min-height:56px}

/* Shared game navigation, gray on both game menus. */
.brand-nav{display:flex;align-items:center;gap:0;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:12px;color:#f2f8fa;text-decoration:none;font:700 20px system-ui,sans-serif;letter-spacing:2px}.brand-icon{font-size:40px;line-height:1;color:#65eee6}.game-tabs{display:flex;align-items:center;gap:0}.game-tabs a.brand-sub{display:flex;align-items:center;min-height:44px;padding:0 18px;margin:0 0 0 12px;border-left:1px solid #34424d;font:11px 'Space Mono',monospace;letter-spacing:2px;white-space:nowrap;text-decoration:none;color:#92999f}.game-tabs a.brand-sub:hover,.game-tabs a.brand-sub:focus-visible{color:#c8ccd0}.game-tabs a[aria-current="page"]{color:#aeb4b9}
@media(max-width:900px){.brand-nav{gap:4px 12px}.game-tabs a.brand-sub{margin:0;padding:0 12px;font-size:10px;letter-spacing:1.5px}.brand{font-size:16px;letter-spacing:1.5px}.brand-icon{font-size:32px}header{height:auto;min-height:60px;flex-wrap:wrap;gap:6px;padding:8px 12px}}

#ai-readout,#memory-badge{display:none!important}.suit-picker{display:flex!important;flex-direction:column;align-items:stretch!important;gap:16px!important}.suit-picker label{display:flex!important;align-items:center;gap:14px;width:100%;margin:0!important}.suit-picker label:first-child{display:flex!important;flex-direction:column;align-items:stretch;gap:9px}.suit-picker #player-name{display:block;width:100%!important;min-width:0!important;max-width:none!important;flex:1;font:inherit;font-size:18px;min-height:48px;padding:12px;color:#edf6fa;background:#06101b;border:1px solid #536675;border-radius:5px;box-sizing:border-box}.suit-picker input[type=color]{flex:none;width:64px;height:44px}.suit-picker small{margin:0}.mode-panel{min-width:0}

.spectator-controls{position:absolute;bottom:max(16px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:20;display:flex;align-items:center;gap:8px;max-width:calc(100% - 20px);padding:10px;background:#06101bed;border:1px solid #6f919f;border-radius:8px;color:#edf6fa;font:13px system-ui,sans-serif;pointer-events:auto}.spectator-controls label{display:flex;align-items:center;gap:8px;margin:0;min-width:0}.spectator-controls select{width:200px;max-width:35vw;text-overflow:ellipsis;min-height:44px;padding:8px;background:#142837;color:#fff;border:1px solid #5d7785;font:inherit}.spectator-controls button{min-height:44px;min-width:44px;padding:8px;background:#142837;color:#fff;border:1px solid #5d7785;font:inherit}.spectator-controls button:disabled{opacity:.45}@media(max-width:650px),(max-height:500px){.spectator-controls{bottom:8px;padding:5px;gap:5px;font-size:11px}.spectator-controls label{gap:4px}.spectator-controls select{width:150px;max-width:28vw}}

#name-0,#name-1,#team-roster{color:#fff!important}