@font-face{font-family:Barlow;src:url('assets/fonts/barlow-500.ttf') format('truetype');font-weight:500;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/barlow-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/barlow-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/barlow-800.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:Barlow;src:url('assets/fonts/barlow-900.ttf') format('truetype');font-weight:900;font-display:swap}
:root{font-family:Barlow,'Arial Narrow',system-ui,sans-serif;color:#0b2051;background:#101e43;font-synthesis:none;--ink:#102459;--blue:#173888;--cream:#fff3d3;--lavender:#beb5fa;--yellow:#ffe15d;--orange:#ff9511}
*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;touch-action:manipulation}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #e75412;outline-offset:4px}[hidden]{display:none!important}h1,h2,h3,p{margin:0}button{color:inherit}img{max-width:100%}
/* Viewport lock: shell always equals the visible viewport (svh never exceeds it, dvh/vh are fallbacks) so the page itself never scrolls. */
.game-shell{width:100%;max-width:460px;margin:auto;height:100vh;height:100dvh;height:100svh;max-height:100svh;display:flex;flex-direction:column;container-type:inline-size;isolation:isolate;background:#ffe467 url('assets/arena.webp') center 160px/100% auto;position:relative;overflow:hidden}
/* The dice canvas is prepended to the shell by game.js: z-index 2 puts it above the NTB stage (z:1) but below the die-hit buttons, which live in .dice-stage (z:2, tree-order later). */
.game-shell>.dice-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none}
.game-header{height:18.7cqw;min-height:68px;flex-shrink:0;display:flex;align-items:center;gap:3cqw;padding:2cqw 3.7cqw 2.8cqw 4.5cqw;background:#132c65;color:#b5bce4;border-radius:0 0 7.2cqw 7.2cqw;box-shadow:inset 0 -10px 20px #071c49,inset 0 4px 16px #24488466,0 2px 0 #647dae77;z-index:2}
.game-header h1{width:47cqw;line-height:0;flex-shrink:0;transform:rotate(-2deg)}.game-header h1 img{width:100%;height:auto}.win-target{font-size:3.45cqw;font-weight:800;white-space:nowrap;letter-spacing:.01em;margin-left:auto}.header-icons{display:flex;gap:2cqw;flex-shrink:0}.menu-button{flex-shrink:0;width:12cqw;height:12cqw;min-width:44px;min-height:44px;border-radius:50%;padding:3cqw;background:#173780;border:1px solid #081d53;box-shadow:inset 0 2px 2px #5575ac,inset 0 -6px 12px #071c49,0 3px 4px #07143677}.menu-button img{width:100%;filter:brightness(0) invert(1)}.full-width{width:100%}
.scoreboard{display:grid;grid-template-columns:1fr 1fr;align-items:center;flex-shrink:0}.opponent{margin:0 4cqw;min-height:22cqw;border-radius:8cqw;padding:3.3cqw 5.8cqw 3cqw;background:#c6bdff;box-shadow:inset 0 2px 1px #f4eeff,inset 0 -7px 10px #9593e777,0 3px 4px #68533855;border:1px solid #ebe5ff;position:relative;z-index:1}.score-section{min-width:0}.score-section h2{font-weight:800;font-size:4.4cqw;line-height:1.1;letter-spacing:.025em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.score{display:flex;align-items:baseline;gap:1cqw;line-height:.95;margin-top:.8cqw;white-space:nowrap}.score strong{font-size:13.5cqw;font-weight:900;letter-spacing:-.04em;font-variant-numeric:tabular-nums}.score>span{font-size:5.8cqw;font-weight:600}.penalty-section{border-left:1px solid #7e83c9;padding-left:6cqw;min-width:0}.penalty-label{font-weight:800;white-space:nowrap;display:flex;gap:1.5cqw;font-size:4.2cqw}.penalty-label strong{font-weight:800}.penalty-dots{display:flex;gap:2.25cqw;margin-top:2.7cqw;flex-wrap:wrap}.penalty-dot{width:4.8cqw;height:4.8cqw;border-radius:50%;background:#979acf;border:1px solid #9392c9;box-shadow:inset 0 1px 2px #62649944}.penalty-dot.filled{background:#ff9a0a;border:1px solid #dc7915;box-shadow:inset 0 2px 2px #ffe297,inset 0 -3px 4px #f58411}.penalty-dots.many{gap:1.3cqw}.penalty-dots.many .penalty-dot{width:3cqw;height:3cqw}
.play-area{display:flex;flex-direction:column;flex:1;min-height:0;position:relative;padding-top:2.6cqw;overflow:hidden}.target-stage{position:relative;z-index:1;min-height:0;align-self:center;width:65cqw;height:45cqw;display:grid;place-items:center}.target-ring{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}.target-content{text-align:center;z-index:1;padding-top:1.5cqw}.target-content h2{font-size:4.25cqw;letter-spacing:.005em;font-weight:800;line-height:1.2}.target-content output{display:block;font-size:23.7cqw;font-weight:900;line-height:.94;letter-spacing:-.05em;margin-top:1cqw;font-variant-numeric:tabular-nums;padding-right:1cqw}
.dice-stage{width:100%;height:46cqw;position:relative;z-index:2;isolation:isolate;overflow:visible}.dice-renderer{position:absolute;inset:0;pointer-events:none}.dice-canvas{display:block;width:100%;height:100%}.die-hit{position:absolute;top:5%;width:46%;height:90%;background:transparent;border:0;border-radius:24%;padding:0;display:flex;align-items:center;justify-content:center;z-index:1;outline-offset:-4px!important}.die-hit:first-of-type{left:4%}.die-hit:last-of-type{right:4%}.die-hit:enabled:hover{background:#fff6ba18}.die-hit:enabled:active{transform:scale(.98)}.die-cue{position:absolute;bottom:2%;font-size:3.1cqw;font-weight:800;letter-spacing:.1em;color:#0d285d;background:#fff3c9;border:1px solid #e9cd7d;border-radius:20px;padding:1.2cqw 3cqw;box-shadow:0 2px 3px #88612344;display:none}.die-hit:enabled .die-cue{display:block}.die-fallback{display:block;width:76%;aspect-ratio:1;align-content:center;background:#ff921b;border-radius:20%;color:#fff6df;font-size:22cqw;font-weight:800;box-shadow:inset 0 3px 3px #ffc869,0 12px 14px #735b3f55;border:2px solid #ffc166}.has-webgl .die-fallback{display:none}.die-fallback.revealed{background:#fff3d6;color:#112451}.dice-stage.rolling:not(.has-webgl) .die-fallback{animation:fallback-roll 1.1s ease-out}.turn-message{text-align:center;min-height:0;height:15.6cqw;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;padding:2.4cqw 3cqw 1.6cqw;display:flex;flex-direction:column;justify-content:center}.turn-message h2{font-size:4.7cqw;font-weight:800;letter-spacing:.015em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.turn-message p{font-size:3.8cqw;line-height:1.2;margin-top:1cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.turn-message p:empty{display:none}.actions-zone{padding:0 4.5cqw 5.5cqw;min-height:28cqw;display:flex;flex-direction:column;justify-content:flex-end}.decision-actions{display:grid;grid-template-columns:1fr 1fr;gap:2.3cqw}.game-button{border:1px solid #0d2262;background:#173889;color:#f7f6ff;border-radius:5.8cqw;box-shadow:inset 0 2px 2px #7793d2,inset 0 -8px 12px #091c51,0 5px 5px #82632666;min-height:20.5cqw;transition:transform .12s,filter .12s,box-shadow .12s;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.5cqw;padding:3cqw 1.3cqw;font-weight:800}.game-button:hover:enabled{filter:brightness(1.07)}.game-button:active:enabled{transform:translateY(3px);box-shadow:inset 0 1px 3px #7793d2,inset 0 -3px 8px #091c51,0 1px 2px #82632677}.game-button strong{font-size:6.6cqw;line-height:1.1;font-weight:800;white-space:nowrap}.game-button>span{font-size:3.85cqw;font-weight:600;white-space:nowrap}.defense-button{background:#bcb2ff;color:#0e2455;border-color:#a8a0e2;box-shadow:inset 0 3px 3px #f2ebff,inset 0 -8px 12px #8d8bcdaa,0 5px 5px #82632666}.primary-action{width:100%;flex-direction:row;gap:5cqw}.primary-action>span{font-weight:800;font-size:6.5cqw}.primary-action img{width:6cqw;filter:brightness(0) invert(1)}.primary-action:disabled{filter:saturate(.75);opacity:.8}.choice-explanations{display:grid;grid-template-columns:1fr 1fr;gap:3cqw;text-align:center;margin-top:3.3cqw;min-height:15.5cqw;font-size:3.95cqw;line-height:1.19;font-weight:500}.outcome-detail{text-align:center;font-size:4.5cqw;line-height:1.3;padding:3cqw 3cqw 0;min-height:18.8cqw}.you{background:#142f70;color:#f8f7ff;border-radius:9cqw 9cqw 0 0;min-height:28cqw;position:sticky;bottom:0;padding:4.7cqw 6.8cqw calc(5.3cqw + env(safe-area-inset-bottom));box-shadow:inset 0 2px 2px #6582b8,inset 0 -15px 35px #0b1d48;border-top:1px solid #0c2058;z-index:3}.you .score-section h2{color:#ffde58}.you .penalty-section{border-left-color:#7686be}.you .score strong{font-size:14.2cqw}.you .penalty-label{font-size:4.05cqw}.you .penalty-dot:not(.filled){background:#7388bd;border-color:#6c82bc}.game-shell[data-terminal="true"] .you{box-shadow:inset 0 3px 0 #ffde58,inset 0 -15px 35px #0b1d48}.game-shell[data-passing="true"] .play-area{visibility:hidden}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sheet{padding:25px;color:#102459;background:#fff6de;border:1px solid #fffaf0;border-radius:26px;width:min(92vw,440px);max-height:88svh;overflow:auto;box-shadow:0 20px 80px #030d3677;font-size:17px;font-weight:500}.sheet::backdrop{background:#081b48b3;backdrop-filter:blur(5px)}.sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:22px}.sheet h2{font-size:29px;font-weight:800;line-height:1.1}.sheet h3{margin:22px 0 9px;font-size:20px;font-weight:800}.sheet p{line-height:1.4}.icon-button{border:0;background:#e5ddff;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;flex-shrink:0}.icon-button img{width:23px}.sheet-link{width:100%;text-decoration:none;color:#102459;display:flex;align-items:center;gap:14px;padding:16px 0;min-height:54px;background:none;border:0;border-bottom:1px solid #dfd4ba;text-align:left;font-size:20px;font-weight:600}.sheet-link img{width:24px;height:24px}.sheet-link>span:last-child:not(#sound-label){margin-left:auto}.sheet-note{font-size:15px;color:#5d5e76;margin-top:18px!important}.sheet label{display:flex;flex-direction:column;gap:6px;font-weight:600;margin:15px 0}.sheet select,.sheet input{min-width:0;width:100%;border:1px solid #b7b5cc;border-radius:12px;background:#fffdf5;color:#122758;padding:12px;font-size:17px;min-height:48px}.form-row{display:flex;gap:16px}.form-row>*{flex:1;min-width:0}.sheet-primary{width:100%;font-size:24px;min-height:60px;border-radius:18px;margin-top:24px}.small-button{border:1px solid #a9a5c7;background:#e4ddff;border-radius:12px;padding:12px;font-size:16px;font-weight:600}.rules-list{padding-left:22px;line-height:1.4}.rules-list li{padding-left:5px;margin-bottom:12px}.pass-sheet{text-align:center}.pass-sheet>h2{margin:10px 0 18px}.pass-sheet>p{font-size:21px}.pass-sheet .sheet-note{font-size:16px}.sheet table{width:100%;border-collapse:collapse;font-size:15px}.sheet td,.sheet th{padding:10px 4px;border-bottom:1px solid #d6cbb2;text-align:right}.sheet td:first-child,.sheet th:first-child{text-align:left}.sheet pre{white-space:pre-wrap;font-size:13px;line-height:1.5;max-height:200px;overflow:auto;font-family:ui-monospace,monospace}.wide-sheet{width:min(92vw,580px)}
@keyframes fallback-roll{0%{transform:rotate(0) scale(.85)}30%{transform:rotate(145deg) scale(1)}75%{transform:rotate(315deg) scale(.92)}100%{transform:rotate(360deg)}}
/* Unified #result-popup: one arcade card owns every resolved message (turn result, EXTREME, KAPUTT, win/loss, rematch), so the inline turn row never reflows. pop-* kinds reuse the old toast color language. No dim/scrim: the overlay stays transparent and click-through so the dice remain the hero; only the bottom-anchored card catches taps. */
.result-popup{position:absolute;inset:0;z-index:10;display:flex;align-items:flex-end;justify-content:center;padding:0 4.5cqw 4cqw;background:transparent;pointer-events:none;--pop:#fff0bd}
.result-popup.pop-success{--pop:#4ade80}.result-popup.pop-kaputt{--pop:#ff4444}.result-popup.pop-extreme{--pop:#ff9511}.result-popup.pop-win{--pop:#ffe15d}.result-popup.pop-lose{--pop:#beb5fa}
.result-card{width:100%;max-width:440px;display:flex;flex-direction:column;align-items:center;gap:1.8cqw;text-align:center;padding:4cqw 4.5cqw 4.5cqw;background:#162f75;border:2px solid var(--pop);border-radius:5cqw;box-shadow:0 14px 32px #050d2e99,inset 0 1px 0 #ffffff1f;pointer-events:auto}
.result-headline{max-width:100%;font-size:8.6cqw;font-weight:900;letter-spacing:.03em;line-height:1.05;color:#ffe46b;text-shadow:0 3px 0 #0d1a48;overflow-wrap:break-word}
.result-math{max-width:100%;font-family:ui-monospace,'Cascadia Mono',Menlo,Consolas,monospace;font-size:3.4cqw;line-height:1.35;letter-spacing:.01em;color:#b5bce4;overflow-wrap:break-word}
.result-math:empty{display:none}
.result-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:1.6cqw}
.result-badges[hidden]{display:none}
.result-badge{font-size:3.1cqw;font-weight:800;letter-spacing:.09em;line-height:1.2;padding:1.1cqw 3cqw;border-radius:99px;border:1.5px solid currentColor;background:#ffffff14}
.result-badge.badge-extreme{color:#ff9511}.result-badge.badge-kaputt{color:#ff4444}.result-badge.badge-hold{color:#beb5fa}.result-badge.badge-win{color:#ffe15d}
.result-action{width:100%;margin-top:1cqw}
@keyframes result-rise{0%{opacity:0;transform:translateY(9cqw) scale(.95)}65%{opacity:1;transform:translateY(-1.2cqw) scale(1.01)}100%{opacity:1;transform:translateY(0) scale(1)}}
.result-popup:not([hidden]) .result-card{animation:result-rise .38s cubic-bezier(.2,.9,.25,1) both}
@media(max-height:740px){.result-popup{padding-bottom:3cqw}.result-card{gap:1.4cqw;padding:3.4cqw 4cqw 3.8cqw}.result-headline{font-size:7.6cqw}}
@media(max-height:630px){.result-popup{padding-bottom:2.5cqw}.result-headline{font-size:7cqw}.result-math{font-size:3.1cqw}.result-badge{font-size:2.9cqw;padding:.9cqw 2.6cqw}}
@media(min-width:600px){.game-shell{box-shadow:0 0 70px #050e2966}.sheet{border-radius:28px}}
@media(max-width:360px){.game-header{min-height:62px}.penalty-label{gap:1cqw}.game-button strong{font-size:6.5cqw}.choice-explanations{font-size:4.1cqw}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* A phone uses overlay scrollbars; keep the same content width in embedded previews. */
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
.opponent{padding-top:2.6cqw;padding-bottom:2.6cqw}.opponent .score-section h2{font-size:4.3cqw;line-height:1}.opponent .score{margin-top:.45cqw}.opponent .score strong{font-size:12.5cqw}
.dice-stage{height:45cqw}.game-button strong{font-size:6.8cqw}.score-section h2,.penalty-label,.target-content h2,.turn-message h2{font-weight:800}
.game-header h1{width:45cqw}.win-target{margin-left:0;flex:1;font-size:3.1cqw}.choice-explanations{font-size:3.5cqw}.game-button strong{font-size:6.6cqw}

.game-button:disabled{opacity:.68;filter:saturate(.55)}
.sheet-primary{min-height:88px;padding:14px 12px 23px;font-size:24px;margin-top:16px}

.outcome-detail{min-height:0;font-size:4cqw;padding-top:1cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.actions-zone{margin-top:auto;flex-shrink:0;padding-bottom:3cqw;min-height:28cqw;display:flex;flex-direction:column;justify-content:flex-end}
/* Turn copy stays inline and height-capped: #turn-title / #turn-detail clamp to one ellipsized line each, and #outcome-detail stays hidden while #result-popup is open, so text changes never shift layout. Resolved feedback goes through the #result-popup card (with #game-announcement for screen readers). */
.connection-bar{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 16px;font-size:14px;font-weight:600;background:#fff2bf;border-bottom:1px solid #dfca75;min-height:38px}
.connection-bar[data-connected="false"]{background:#fff1da;color:#80431e}
.connection-bar .text-button{margin:0;padding:2px 8px;min-height:30px}
.text-button{border:0;background:transparent;color:#183c88;text-decoration:underline;text-underline-offset:3px;font-weight:700;padding:12px;min-height:44px;margin-top:10px}
.full-width{width:100%;margin-top:14px}.small-button{min-height:48px}.small-button:disabled{opacity:.55}.small-button img{width:19px;vertical-align:middle;margin-right:6px}
.join-row #join-code{flex:2;letter-spacing:.14em;font-size:23px;text-transform:uppercase;text-align:center}
.room-code{font-size:58px;letter-spacing:.14em;font-weight:900;display:block;margin:18px 0;color:#163984}
#lobby-status{margin-top:24px;font-weight:700}#online-link{display:block;margin-top:12px}#setup-note{margin-top:12px!important}
#leave-dialog>p{margin-top:16px;font-size:18px}
.celebration{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.celebration img{position:absolute;top:12%;width:7cqw;filter:invert(78%) sepia(73%) saturate(969%) hue-rotate(350deg)}
.die-hit:enabled .die-cue{animation:cue-in 220ms ease-out}
@keyframes cue-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important}

/* Layering: court (0) < NTB stage (1) < dice canvas / .dice-stage (2) < sticky you-bar (3) < celebration (5) < result-popup (10). */
.game-shell::before{content:"";position:absolute;inset:28cqw 0 0;z-index:0;pointer-events:none;background:url('assets/court-smooth.webp') center/100% 100% no-repeat;mask-image:linear-gradient(to bottom,transparent,#000 14cqw)}
/* Single height-tier block: the 630/740 queries used to be scattered and overrode each other by source order. Short screens shrink NTB + dice first; turn copy is capped and the actions-zone never shrinks. */
@media(max-height:740px){.target-stage{height:34cqw}.dice-stage{height:40cqw}.game-button{min-height:21cqw}.actions-zone{min-height:0}}
@media(max-height:630px){.play-area{padding-top:0}.target-stage{height:30cqw}.target-content output{font-size:20cqw}.dice-stage{height:39cqw}.turn-message h2{font-size:4.4cqw}.turn-message p{font-size:3.5cqw}.you{min-height:23cqw;padding-top:3cqw;padding-bottom:calc(3cqw + env(safe-area-inset-bottom))}.game-header{height:17cqw}.game-shell:has(.connection-bar:not([hidden])) .game-header{min-height:54px;height:54px}.game-shell:has(.connection-bar:not([hidden])) .target-stage{height:28cqw}.game-shell:has(.connection-bar:not([hidden])) .dice-stage{height:36cqw}}
@media(min-height:741px){.actions-zone{padding-bottom:4.2cqw}}

/* Start screen onboarding */
#start-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;justify-content:safe center;min-height:100%;overflow-y:auto;padding:24px 20px;text-align:center;gap:16px;z-index:10;background:#ffe467 url('assets/arena.webp') center 160px/100% auto}
.game-shell[data-start="false"] #start-screen,.game-shell:not([data-start="true"]) #start-screen{display:none}
.game-shell[data-start="true"] .game-header,.game-shell[data-start="true"] .scoreboard,.game-shell[data-start="true"] .play-area,.game-shell[data-start="true"] .you,.game-shell[data-start="true"] .celebration,.game-shell[data-start="true"] .connection-bar{display:none}
.start-logo{width:min(70vw,320px);height:auto;margin-bottom:4px}
.start-tagline{font-size:22px;font-weight:800;color:#173888;letter-spacing:.04em;margin-bottom:12px}
#name-step{width:min(100%,380px)}
.start-label{display:block;font-size:18px;font-weight:700;color:#173888;margin-bottom:10px}
.start-name-row{display:flex;gap:10px}
.start-name-row input{flex:1;min-width:0;border:2px solid #173888;border-radius:14px;background:#fffdf5;color:#122758;padding:14px 16px;font-size:18px;font-weight:600;min-height:52px}
.start-name-row input:focus{outline:3px solid #e75412;outline-offset:2px}
.start-continue{border-radius:14px;padding:14px 24px;font-size:18px;min-height:52px;white-space:nowrap}
.start-welcome{font-size:18px;font-weight:600;color:#173888;margin-bottom:16px}
.start-welcome b{color:#0b2051}
#mode-step{width:min(100%,380px)}
.start-modes{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.start-mode{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:20px 12px;border-radius:20px;border:2px solid #173888;background:linear-gradient(180deg,#1e4a9a 0%,#173888 100%);color:#f7f6ff;box-shadow:inset 0 2px 4px #5575ac,inset 0 -6px 12px #0b1d48,0 4px 8px #0b1d4844;cursor:pointer;transition:transform .12s,filter .12s}
.start-mode:hover{filter:brightness(1.08)}
.start-mode:active{transform:translateY(2px);box-shadow:inset 0 1px 3px #5575ac,inset 0 -3px 6px #0b1d48}
.start-mode img{width:32px;height:32px;filter:brightness(0) invert(1)}
.start-mode strong{font-size:17px;font-weight:800;letter-spacing:.02em}
.start-mode span{font-size:13px;font-weight:500;opacity:.8}
.start-change-name{margin-top:8px;font-size:14px}
.start-hint{font-size:14px;color:#3d4a7a;margin-top:10px}
.start-error{color:#b3261e;font-weight:700}
@media(max-width:360px){.start-logo{width:min(80vw,260px)}.start-tagline{font-size:18px}.start-modes{gap:8px}.start-mode{padding:14px 8px}.start-mode strong{font-size:15px}.start-mode span{font-size:12px}.start-name-row{flex-direction:column;gap:8px}.start-continue{width:100%}}
@media(min-width:600px){#start-screen{padding:40px}.start-logo{width:min(50vw,380px)}.start-tagline{font-size:26px}.start-modes{gap:16px;max-width:440px;margin:0 auto}.start-mode{padding:24px 16px}.start-mode strong{font-size:19px}.start-mode span{font-size:14px}}
@media(max-height:630px){#start-screen{gap:10px;padding:16px}.start-logo{width:min(60vw,220px)}.start-tagline{font-size:16px;margin-bottom:6px}.start-mode{padding:12px 8px;gap:4px}.start-mode img{width:26px;height:26px}.start-mode strong{font-size:15px}.start-mode span{font-size:11px}.start-welcome{margin-bottom:10px}}

/* Leaderboard in-app dialog */
.periods{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px}.periods button{min-height:44px;padding:8px 12px;border:1px solid #b2a3d5;border-radius:12px;background:#fff9e9;font-weight:700}.periods button[aria-pressed="true"]{background:#173888;color:white;border-color:#173888}
.ranking{list-style:none;margin:0;padding:0;display:grid;gap:12px}.ranking li{background:#fff9e9;border:1px solid #e4d6a6;border-radius:22px;padding:16px;box-shadow:0 3px 0 #e5d691}.rank-top{display:flex;align-items:center;gap:12px}.rank-number{background:#c6bdff;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;font-weight:800;flex-shrink:0}.rank-name{font-size:22px;font-weight:800;overflow-wrap:anywhere;flex:1}.wins{font-weight:800;white-space:nowrap}.rank-stats{display:flex;gap:12px;flex-wrap:wrap;font-size:14px;color:#565b78;margin:12px 0 0 50px}.rank-stats b{color:#102459}
.badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:16px}.badge{background:#c6bdff;border:1px solid #f2edff;border-radius:20px;padding:18px 12px;text-align:center}.badge img{width:30px;height:30px}.badge h3{font-size:18px;margin:6px 0}.badge p{font-size:16px;overflow-wrap:anywhere}.badge small{display:block;font-size:13px;margin-top:6px;color:#424b6d}

/* Focused mode setup screens: one Play action, then a Back link that returns to the home screen. */
.setup-footer{display:flex;flex-direction:column;align-items:stretch}
.setup-footer .setup-back{text-align:center;margin-top:4px}

/* No text selection UI-wide: only editable fields stay selectable (caret, drag-select, iOS callout). */
*{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
input,textarea,select,[contenteditable],[contenteditable] *{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* Portrait lock for small landscape screens: opaque navy overlay covers the game, which stays in the DOM underneath. */
#rotate-overlay{position:fixed;inset:0;z-index:80;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px;text-align:center;background:#11265d;color:#fff3d3}
#rotate-overlay img{width:72px;height:72px;filter:invert(78%) sepia(73%) saturate(969%) hue-rotate(350deg);animation:rotate-cue 2.4s ease-in-out infinite}
#rotate-overlay p{font-size:26px;font-weight:800;letter-spacing:.03em}
#rotate-overlay .rotate-hint{font-size:16px;font-weight:600;color:#b5bce4;letter-spacing:.01em}
@keyframes rotate-cue{0%,100%{transform:rotate(0)}50%{transform:rotate(-14deg)}}
@media (orientation:landscape) and (max-height:600px) and (max-width:1024px){#rotate-overlay{display:flex}.game-shell{visibility:hidden}}

/* Terminal popup: bigger headline, burst entrance, and two actions (Play Again + Home). The card is an absolute overlay inside .play-area, so the game layout and viewport lock never move; both actions share one grid row so the card keeps its height. */
.result-actions{display:grid;grid-template-columns:1fr;gap:1.8cqw;width:100%;margin-top:1cqw}
.result-actions>*{width:100%;margin-top:0}
.result-popup.pop-win .result-actions,.result-popup.pop-lose .result-actions{grid-template-columns:1.5fr 1fr}
.result-secondary{background:#0e2159;border:1px solid #46609f;color:#cdd6f6;box-shadow:inset 0 2px 2px #2b3f77,inset 0 -6px 10px #061131;flex-direction:row;gap:2cqw}
.result-secondary>span{font-size:5cqw;font-weight:800;letter-spacing:.05em}
.result-popup.pop-win .result-card,.result-popup.pop-lose .result-card{border-width:3px;box-shadow:0 18px 44px #050d2ecc,inset 0 1px 0 #ffffff2b}
.result-popup.pop-win .result-headline,.result-popup.pop-lose .result-headline{font-size:11cqw;letter-spacing:.04em;text-shadow:0 4px 0 #0d1a48,0 0 26px #ffe46b59}
@keyframes result-burst{0%{opacity:0;transform:translateY(11cqw) scale(.82)}58%{opacity:1;transform:translateY(-2cqw) scale(1.05)}100%{opacity:1;transform:translateY(0) scale(1)}}
.result-popup.pop-win:not([hidden]) .result-card,.result-popup.pop-lose:not([hidden]) .result-card{animation:result-burst .52s cubic-bezier(.2,.92,.25,1.06) both}
@media(max-height:740px){.result-popup.pop-win .result-headline,.result-popup.pop-lose .result-headline{font-size:9.6cqw}}
@media(max-height:630px){.result-popup.pop-win .result-headline,.result-popup.pop-lose .result-headline{font-size:8.6cqw}.result-secondary>span{font-size:4.6cqw}}