@font-face{font-family:Inter;src:url('/assets/inter.woff2') format('woff2');font-style:normal;font-weight:400 800;font-display:swap}@font-face{font-family:'IBM Plex Mono';src:url('/assets/plex-mono.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
:root{--ground:#0e7c7b;--paper:#f7f6f2;--board:#0f1830;--captured:#1e4fb5;--orange:#e8742c;--ink:#16181d;--muted:#4a4d55;--line:#e3e1da;--mono:'IBM Plex Mono',ui-monospace,monospace}*{box-shadow:none!important;text-shadow:none!important;background-image:none!important}html{background:var(--ground)}body,body.tv,body.playing{background:var(--ground)!important;color:var(--ink);font-family:Inter,system-ui,sans-serif;font-size:14px;min-height:100dvh;margin:0;padding:24px 16px}body main,body.playing main,body.is-running main{max-width:520px;width:100%;margin:24px auto;padding:22px;background:var(--paper);border:0;border-radius:6px}header{border-bottom:1px solid var(--line);padding:0 0 14px;gap:10px;min-height:38px}a{color:var(--ink)}a:hover{color:var(--captured)}.brand{font-family:Inter,sans-serif;font-size:22px;font-weight:800;letter-spacing:-1px;color:var(--ink);line-height:1}.brand span,.brand i{color:var(--ink)}.brand small{display:none!important}header>span,#mode-label,.eyebrow,small,.hint,.progress-copy,.controller-heading,.room-code-block span{font-family:var(--mono);color:var(--muted);font-weight:400;letter-spacing:.06em}.eyebrow{font-size:10px;margin-top:22px}h1,#start-menu h1{font-family:Inter,sans-serif;font-size:38px;font-weight:800;line-height:1.08;letter-spacing:-.03em;margin:12px 0}h2{font-size:24px;font-weight:800;letter-spacing:-.03em}p,.lead{font-family:Inter,sans-serif;color:var(--muted);font-size:14px;line-height:1.5}.lead{margin:10px 0 20px}#network{font-family:var(--mono);font-size:9px;line-height:1.5;color:var(--muted);margin:10px 0 16px;min-height:14px;letter-spacing:0}#network.offline{background:#fff0d7;color:#794e10;border:1px solid #d7b66b;border-radius:4px;padding:8px}button,input,select,textarea{font-family:Inter,sans-serif;color:var(--ink);font-size:14px;border-radius:4px;background:transparent!important;transition:transform 80ms,border-color 80ms}button{border:2px solid var(--ink);padding:10px 14px;min-height:44px;font-weight:700;touch-action:manipulation}button:hover{border-color:var(--captured);box-shadow:none!important}button:active{transform:translateY(1px)}button.active{color:var(--paper);background:var(--ink)!important;border-color:var(--ink)}button:disabled{opacity:.45}button.primary,.primary.link{min-height:56px;border:2px solid;border-color:#5c6170 #000 #000 #5c6170;background:var(--ink)!important;color:var(--paper);box-shadow:inset -1px -1px #000!important;border-radius:4px;font-size:16px;font-weight:700;line-height:1.25}button.primary:active,.primary.link:active{border-color:#000 #5c6170 #5c6170 #000;transform:translateY(2px);box-shadow:inset 1px 1px #000!important}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--captured);outline-offset:3px}.card{background:transparent!important;border:0;border-top:1px solid var(--line);border-radius:0;margin:20px 0;padding:18px 0}input:not([type=checkbox]),select,textarea{border:1px solid #b7b8b5;background:#fff!important;padding:12px;width:100%;min-height:44px;border-radius:4px}input[type=checkbox]{accent-color:var(--captured);width:18px;height:18px}input[type=range]{accent-color:var(--captured);padding:0;min-height:32px;background:transparent!important}textarea{resize:vertical;line-height:1.5}label{font-family:Inter,sans-serif;font-size:12px;color:var(--muted);font-weight:500}.mode-grid,.start-grid{display:grid;grid-template-columns:1fr;gap:12px;margin:20px 0}.mode-card,.start-grid .mode-card{display:block;min-height:0;padding:17px 18px;background:#fff!important;border:1px solid var(--line);border-radius:4px;position:relative;color:var(--ink);transform:none!important}.mode-card:hover{border-color:var(--ink)}.mode-card .mode-icon{font-family:var(--mono);position:absolute;top:17px;right:17px;font-size:18px!important;line-height:1;letter-spacing:0;color:var(--muted)!important}.mode-card h2,.start-grid .mode-card h2{font-size:20px;margin:0 45px 6px 0;letter-spacing:-.02em}.mode-card p,.start-grid .mode-card p{font-size:12px;line-height:1.5;margin:0 24px 0 0}.mode-cta,.start-grid .mode-cta{display:none}.start-grid .mode-card:first-child{background:var(--ink)!important;color:var(--paper);border:2px solid;border-color:#5c6170 #000 #000 #5c6170;box-shadow:inset -1px -1px #000!important}.start-grid .mode-card:first-child p,.start-grid .mode-card:first-child .mode-icon{color:#dededc!important}.start-grid .mode-card:first-child:active{border-color:#000 #5c6170 #5c6170 #000;transform:translateY(2px)!important}.menu-preview{position:relative;overflow:hidden;border-radius:4px;background:var(--board);margin:18px 0}.menu-preview canvas{display:block;width:100%;height:auto;aspect-ratio:720/380;border:0;border-radius:4px;object-fit:cover}.preview-label{position:absolute;top:12px;left:12px;color:var(--paper);font:9px var(--mono);letter-spacing:.06em;pointer-events:none}.menu-back{font-family:Inter,sans-serif;color:var(--muted);font-size:12px;margin-top:16px}.join-bar{background:transparent!important;border:1px solid var(--line);border-radius:4px;padding:14px}.join-bar label{font-family:var(--mono);font-size:10px}.join-bar button{font-size:12px}.options{gap:12px}.hint{font-family:Inter,sans-serif;font-size:11px;letter-spacing:0;line-height:1.5}.room-heading{gap:12px;align-items:center}.room-heading h1,body.tv .room-heading h1{font-size:30px;margin:8px 0}.room-heading .eyebrow{font-size:9px;margin-top:12px}.room-code-block{background:#fff!important;border:1px solid var(--line);border-radius:4px;padding:10px 14px}.room-code-block strong,body.tv .room-code-block strong{font-family:var(--mono);font-size:28px;color:var(--ink);letter-spacing:.06em}.room-code-block span{font-size:8px}.share-grid{grid-template-columns:1fr auto;padding:16px 0;gap:18px}.share-grid h2{font-size:21px;margin:0 0 8px}.share-grid p{font-size:12px;margin:6px 0}.share-grid #join-link{font-family:var(--mono);font-size:10px;color:var(--muted)}#qr{border:1px solid var(--line);border-radius:4px;background:#fff!important;padding:6px}#qr svg{width:120px;height:120px}#copy-link{font-size:11px;padding:8px 10px}#host-pin{font-family:var(--mono);color:var(--ink)}details{font-size:12px;color:var(--muted)}summary{font-family:Inter,sans-serif;cursor:pointer}.player-chip,body.tv #roster .player-chip{font-size:12px;padding:10px 12px;border:1px solid var(--line);border-radius:4px;background:#fff!important}.player-chip.ready{border-color:var(--ground)}.player-chip small{font-size:9px;color:var(--muted);letter-spacing:0}#lobby-controls .primary{max-width:none}#lobby-hint{font-size:12px}#host-controls{flex-wrap:wrap}#host-controls button{font-size:11px;min-height:40px}.stats{display:flex;gap:8px;padding:0!important;margin:12px 0!important;border:0!important;border-radius:0;background:transparent!important;color:var(--muted);letter-spacing:.06em}.stats>span{flex:1;background:#fff;border:1px solid var(--line);border-radius:4px;padding:9px 10px;font:9px var(--mono);color:var(--muted)}.stats b,.stats #percent,.stats #lives{font-family:var(--mono);font-size:22px;font-weight:500;line-height:1.2;color:var(--ink)!important;letter-spacing:-.03em;margin-top:5px;display:block}.progress-copy{font:9px var(--mono);letter-spacing:.03em;color:var(--muted)}#progress-label{color:var(--muted);font-weight:400}.track,.progress-track{height:7px!important;background:#e3e1da!important;border:0;border-radius:0;overflow:hidden;margin-bottom:12px}#fill,#progress-fill{background:var(--captured)!important;border-radius:0;box-shadow:none!important}.board,.online-board,body.controller-active .online-board,canvas{background:var(--board)!important;border-color:var(--board);border-radius:4px!important;box-shadow:none!important}.board,.online-board{border:0!important;overflow:hidden}canvas{box-shadow:none!important}.overlay,.cover,.result-cover{background:var(--paper)!important;border-radius:4px;backdrop-filter:none;border:1px solid var(--line)}.cover{inset:4px}.cover h2,.overlay h2,.result-card h2{color:var(--ink);font-weight:800}.cover p,.overlay p{color:var(--muted)}.controller-heading{font-size:10px;letter-spacing:0;color:var(--muted)}.controller-heading>span:first-child{color:var(--ink)}.mode-picker label{font:9px var(--mono);letter-spacing:.06em;color:var(--muted)}.mode-picker select{font-family:Inter,sans-serif;font-size:13px!important}.directions button,.thumb-controls button{background:var(--paper)!important;color:var(--ink);border:1px solid var(--ink);border-radius:4px!important}.directions button.active,.thumb-controls button.active{background:var(--ink)!important;color:var(--paper)}.thumb-controls .shoot,#build{background:var(--orange)!important;color:var(--ink)!important;border:1px solid var(--ink);box-shadow:none!important}body.controller-active .thumb-controls,.thumb-controls{background:var(--paper)!important;border-color:var(--ink);border-radius:4px;backdrop-filter:none}.bottom,#notice{font-family:Inter,sans-serif;color:var(--muted);font-size:11px}.bottom button,#pause,#restart{font-size:11px}#reactions-panel summary{font-size:11px;color:var(--muted)}.reactions button{min-height:44px;font-size:12px;border:1px solid var(--ink);border-radius:4px;background:var(--paper)!important}.rival-chip{background:#fff!important;border:1px solid var(--line);border-radius:4px;color:var(--ink)}.rival-chip>span{font-family:var(--mono);color:var(--muted)}.rival-track{height:4px;border-radius:0;background:var(--line)!important}.rival-track>div{background:var(--captured)!important;border-radius:0}.rival-chip.done{border-color:var(--ground)}.rival-chip.done>span{color:var(--ground)}.reaction-toast{font-family:Inter,sans-serif;background:var(--paper)!important;border:2px solid var(--ink);border-radius:4px!important;color:var(--ink);font-size:16px}.reaction-toast.received{border-color:var(--ground)}.reaction-toast.cut,.reaction-toast.clear{border-color:var(--captured)}.reaction-toast.finish{border-color:var(--orange)}.activity-log{color:var(--muted);border-color:var(--line)}#manage-players{background:var(--paper)!important;border:1px solid var(--line);border-radius:4px}#manage-players summary{color:var(--muted)}.manage-row{border-color:var(--line)}.manage-row button{border-width:1px}.tile{background:var(--paper)!important;border:1px solid var(--line);border-radius:4px}.tile-head{color:var(--ink)}.tile-stat,.tile-status{font-family:var(--mono);color:var(--muted);letter-spacing:0}.tile canvas{background:var(--board)!important;border-radius:0!important}.score-row{border-color:var(--line);font-size:14px}.score-row small{color:var(--muted)}.result-grid>div{background:#fff!important;border:1px solid var(--line);border-radius:4px;color:var(--muted)}.result-grid strong{color:var(--ink);font-family:var(--mono)}.result-label{color:var(--muted);font-family:var(--mono)}.new-tag{background:var(--paper)!important;color:var(--ground);border-radius:0}.clear-banner{background:var(--paper)!important;color:var(--ink);border:1px solid var(--orange);border-radius:4px}.new-best h2,.capture-hit .progress-track{animation:none!important}.layout{display:block;margin-top:18px}.layout aside{padding:0;border:0}.layout>section>.eyebrow{font-family:var(--mono);font-size:9px}.layout>section>p{font-size:13px}.layout .board{width:100%;aspect-ratio:720/520}.layout .board canvas{width:100%;height:100%;border:0}.layout aside .thumb-controls{display:flex;position:static;width:100%;padding:10px 0;margin:8px 0;border:0}.layout .thumb-row{width:100%}.layout .thumb-row .seg{flex-direction:row;gap:8px}.layout .thumb-row .seg button{font-size:12px;min-height:48px}.layout .thumb-row #build{font-size:14px;min-height:48px}.layout .thumb-controls label{display:none}.layout .mode-picker{margin-top:0}.layout .cover h2{font-size:26px}.layout #notice{font-size:11px;min-height:18px}.layout footer{width:100%;height:auto;margin-top:8px}.layout footer button{min-height:40px}.layout .note{border-color:var(--line)}.layout .note p{font-size:12px}.tutorial-strip{background:#fff!important;border:1px solid var(--line);border-radius:4px;color:var(--ink)}.tutorial-strip>span:first-child{font-family:var(--mono);color:var(--muted)}.tutorial-focus{outline:2px solid var(--orange);outline-offset:3px;animation:none!important}body.is-running .layout>section>h1,body.is-running .layout>section>p,body.is-running .layout>section>.eyebrow{display:none}footer{margin-top:22px;color:var(--muted);font:10px var(--mono);letter-spacing:0;line-height:1.5}footer a{color:var(--muted)}header .native-audio-control{display:none!important}.experience-tools{display:flex;align-items:center;gap:6px;margin-left:auto}.experience-tools button{border:0;min-height:36px;padding:5px 7px;font-size:10px;color:var(--muted);display:flex;align-items:center;gap:4px}.experience-tools button svg{flex:none}.experience-tools button:hover{color:var(--ink);text-decoration:underline}header #mode-label{font-size:8px;letter-spacing:.04em;margin-left:0;max-width:110px}dialog{position:fixed;inset:0;border:1px solid var(--ink);border-radius:6px;background:var(--paper);color:var(--ink);width:min(460px,calc(100vw - 28px));max-height:calc(100dvh - 36px);padding:22px;overflow-y:auto}dialog::backdrop{background:#14171c99}dialog[open]{display:block}.sheet-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.sheet-heading h2{margin:0;font-size:24px;line-height:1.15}.sheet-heading button{min-height:36px;font-size:11px;padding:6px 9px;border-width:1px;flex:none}.sheet-note{font-size:11px;color:var(--muted);line-height:1.5}dialog p{font-size:13px}dialog label{display:block;margin:14px 0 7px;font-size:12px}.audio-setting{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);margin-top:18px}.toggle-label{display:flex;align-items:center;gap:9px;color:var(--ink);font-size:14px}.audio-setting span{font:9px var(--mono);color:var(--muted)}.range-label{font:10px var(--mono);letter-spacing:.04em}#legacy-settings{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}#legacy-settings details{margin:0}#legacy-settings details>summary{display:none}#legacy-settings .note:last-child{display:none}#legacy-settings .mode-picker{height:auto}#legacy-settings .hint{font:12px Inter,sans-serif;letter-spacing:0;min-height:0}#legacy-settings h2,#legacy-settings .eyebrow{display:none}#legacy-settings .saved-runs{margin-bottom:18px}#legacy-settings .saved-runs h3{font-size:13px}#legacy-settings #hint{display:none}.text-button{border:0;text-decoration:underline;padding:8px 0;font-size:12px;color:var(--muted)}#feedback-sheet textarea{min-height:130px}#feedback-sheet .primary{width:100%;margin-top:8px}#feedback-status{font-size:12px;color:var(--ground);min-height:18px}.optional{font-weight:400;color:var(--muted)}body.tv:not(.playing) main{max-width:720px}body.tv.playing{padding:8px}body.tv.playing main{width:100%;max-width:none;margin:0;padding:12px 16px;background:var(--paper)}body.tv.playing .tv-grid{height:calc(100dvh - 270px)}body.tv.playing .tile canvas{background:var(--board)!important}body.tv .share-grid #qr svg{width:180px;height:180px}body.tv.playing .room-heading h1{font-size:clamp(28px,2vw,64px)}body.tv.playing #round-status{font-family:var(--mono);color:var(--ink);font-size:24px}.is-running #legacy-settings{display:block}.is-running.menu-page .experience-tools [data-settings]{display:none}
@media(max-width:760px){body,body.playing{padding:12px 10px;padding-top:max(12px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom))}body main,body.playing main,body.is-running main{padding:18px 16px;margin:0 auto;border-radius:6px;max-width:520px}h1,#start-menu h1{font-size:36px;margin-top:10px}.lead{font-size:13px;margin-bottom:16px}.eyebrow{margin-top:18px}header{padding-bottom:10px;gap:8px}.brand{font-size:20px}header #mode-label{font-size:7px;max-width:95px}#network{font-size:8px;margin:8px 0 14px}.menu-preview{margin:16px 0}.menu-preview canvas{aspect-ratio:720/380}.start-grid{gap:10px;margin:16px 0}.start-grid .mode-card{padding:15px 16px}.start-grid .mode-card h2{font-size:19px}.start-grid .mode-card p{font-size:11px;margin-right:20px}.mode-card{padding:16px}.room-heading h1,body.tv .room-heading h1{font-size:25px;letter-spacing:-.03em}.room-code-block{padding:9px}.room-code-block strong,body.tv .room-code-block strong{font-size:24px}.room-heading .eyebrow{font-size:8px}.share-grid{grid-template-columns:1fr auto;gap:10px}.share-grid h2{font-size:19px}.share-grid p{font-size:11px}#qr svg{width:100px;height:100px}.share-grid #join-link{font-size:9px}.stats{gap:6px}.stats>span{font-size:8px;padding:8px}.stats b{font-size:21px}.stats span b{margin-top:4px}body.controller-active main{padding:12px}body.controller-active .controller-heading{font-size:9px}body.controller-active .mode-picker{height:38px;margin:5px 0}body.controller-active .mode-picker select{min-height:36px;padding:7px 8px;font-size:12px!important}body.controller-active .stats{padding:0!important;margin:8px 0!important}body.controller-active .stats b{font-size:20px}body.controller-active .online-board{width:min(100%,calc((100dvh - 385px)*1.384615));border:0}body.controller-active .thumb-controls{width:66px;right:max(12px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));padding:5px;border:1px solid var(--ink);border-radius:4px}body.controller-active .thumb-controls button{font-size:9px;border-radius:4px!important}body.controller-active .bottom{padding-right:72px}body.controller-active #reactions-panel{margin-right:72px}.rival-strip{gap:6px}.rival-chip{padding:7px;font-size:10px}.rival-chip>span{font-size:8px}.rival-track{height:3px}.experience-tools button{font-size:9px;padding:5px;min-height:36px}.experience-tools button[data-settings]>span{display:none}.experience-tools svg{width:18px;height:18px}#manage-players{border-color:var(--line);padding:0 10px}.layout .board{width:100%;aspect-ratio:720/520}.layout .cover h2{font-size:22px}.layout .cover p{font-size:11px}.layout footer{width:100%;margin-top:8px;min-height:42px}.layout #notice{padding-right:72px;min-height:32px}.layout aside .thumb-controls{position:fixed;right:12px;bottom:max(20px,env(safe-area-inset-bottom));width:66px;border:1px solid var(--ink);padding:5px}.layout .thumb-row{flex-direction:column;gap:7px}.layout .thumb-row .seg{flex-direction:column;gap:7px}.layout .thumb-row .seg button{font-size:9px;min-height:58px;padding:7px 1px}.layout .thumb-row #build{font-size:13px;min-height:70px}.layout footer>div{margin-right:70px}.layout .board.results-open{height:440px;min-height:440px;aspect-ratio:auto}.result-actions{flex-wrap:wrap}.result-actions button{font-size:11px}#play-again{font-size:17px}.capture-progress{margin-bottom:9px}.layout{margin-top:12px}body.is-running .layout{margin-top:8px}body.tutorial-active .layout .board{width:100%}dialog{padding:18px}.sheet-heading h2{font-size:22px}footer{font-size:9px;margin-top:18px}body.tv:not(.playing) main{max-width:520px}body.tv .share-grid #qr svg{width:110px;height:110px}}
@media(max-width:700px) and (max-height:740px){body.controller-active .online-board{width:min(calc(100% - 72px),calc((100dvh - 330px)*1.384615));margin-left:0;margin-right:auto}.layout .board{width:calc(100% - 72px);margin-left:0;margin-right:auto}.layout .board.results-open{width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.menu-page #network{display:none}body.menu-page footer{margin-top:20px}
.result-card,.reaction-toast{animation:none!important}.rival-track>div{transition:none}
.menu-link{font-size:11px;color:var(--muted);margin-left:auto;text-decoration:none}.menu-link:hover{text-decoration:underline}.layout aside .thumb-controls{visibility:hidden}body.is-running .layout aside .thumb-controls{visibility:visible}body.results-open .layout aside .thumb-controls{visibility:hidden}

.game-credit{max-width:480px;margin:20px auto 12px;padding:0 16px;text-align:center;font-size:11px;line-height:1.6;color:var(--muted)}.game-credit a{color:inherit;text-underline-offset:2px}body.is-running main>.game-credit,body.controller-active main>.game-credit{display:none}dialog .game-credit{margin-bottom:0;padding:16px 0 0;border-top:1px solid var(--line)}

.live-stats{margin:20px auto 0;text-align:center;font-family:var(--mono);font-size:11px;line-height:1.6;color:var(--muted);font-variant-numeric:tabular-nums}body.is-running main>.live-stats,body.controller-active main>.live-stats{display:none}.live-stats[hidden]{display:none}

/* Focus play: the board scales uniformly to the usable viewport. */
body.immersive{padding:8px max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left));min-height:100dvh}
body.immersive main,body.immersive.is-running main{max-width:none;width:100%;margin:0 auto;padding:10px 12px}
body.immersive header{padding:0 0 7px;min-height:32px}
body.immersive .brand{font-size:19px}
body.immersive .layout{margin-top:6px}
body.immersive .layout>section>h1,body.immersive .layout>section>p,body.immersive .layout>section>.eyebrow{display:none}
body.immersive .stats{display:flex;gap:8px;margin:5px auto!important;padding:0!important;max-width:720px}
body.immersive .stats>span{flex:1;display:flex;align-items:baseline;justify-content:center;gap:8px;padding:5px 8px;font-size:9px}
body.immersive .stats b,body.immersive .stats span b{font-size:20px;margin:0}
body.immersive .capture-progress{margin:0 auto 6px;max-width:720px}
body.immersive .progress-copy{font-size:9px;margin:3px 0}
body.immersive .progress-track,body.immersive .track{height:3px}
body.immersive .board,body.immersive.controller-active .online-board{margin:0 auto;max-width:100%;min-height:0;aspect-ratio:720/520}
body.immersive canvas{width:100%;height:100%}
body.immersive .layout #notice{padding:0;min-height:18px;margin-top:5px;text-align:center;font-size:11px}
body.immersive .layout footer{display:flex;justify-content:center;margin:5px 0 0;min-height:38px}
body.immersive .layout footer>div{margin:0}
body.immersive #best-strip{display:none!important}
body.immersive .layout footer button{min-height:38px;padding:8px 14px}
body.immersive main>.game-credit,body.immersive main>.live-stats{display:none}
/* Accessible controls are an optional inline row, never a floating rail. */
body .layout aside .thumb-controls,body.controller-active .thumb-controls{position:static!important;left:auto;right:auto;bottom:auto;display:flex;width:100%;max-width:720px;margin:6px auto 0;padding:0;border:0;visibility:visible}
body .layout .thumb-row,body .layout .thumb-row .seg,body.controller-active .thumb-controls .directions{display:flex;flex-direction:row;justify-content:center;gap:8px;width:100%}
body .layout .thumb-row .seg button,body.controller-active .thumb-controls button{font-size:12px;min-height:44px;padding:8px 16px}
body .layout .thumb-row #build{min-height:44px;font-size:14px;flex:0 1 260px}
body.hide-directions .thumb-controls .seg,body.hide-directions .directions{display:none!important}
body.hide-directions:not(.needs-shoot) .thumb-controls{display:none!important}
body:not(.immersive) .layout aside .thumb-controls{visibility:hidden}
body.immersive #room>:not(#controller){display:none!important}
body.immersive #controller .controller-heading{font-size:9px;margin:3px auto}
body.immersive #controller .bottom{padding:0;text-align:center;min-height:34px}
body.immersive #controller #instruction{font-size:11px}
body.immersive #controller #sync-status{display:none}
body.immersive .rival-strip{margin:3px auto;max-width:720px}
body.immersive .rival-chip{padding:3px 6px}
body.immersive #controller .thumb-controls #shoot{width:160px;min-height:44px}
body.immersive #play .stats{margin:5px 0!important}
body.immersive #play .bottom{padding:5px 0;min-height:38px}
body.immersive #play .hud{margin:4px 0}
.arcade-summary{display:block;width:100%;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none!important;padding:10px 0;text-align:center;font:11px var(--mono);color:var(--ink);line-height:1.6;cursor:pointer}
.arcade-summary[hidden]{display:none}
body.immersive .arcade-summary{font-size:10px;padding:4px 0}
#arcade-top{padding-left:24px;font:14px var(--mono);line-height:2}
.arcade-post{margin:14px 0;padding:12px;border:1px solid var(--line);text-align:left}
.arcade-post[hidden]{display:none}
.arcade-post label{font-size:13px;font-weight:700}
.arcade-post .sheet-note{font-size:11px;margin:5px 0 9px}
.arcade-entry{display:flex;align-items:center;gap:8px}
.arcade-entry input{min-width:0;width:85px;font:20px var(--mono);text-align:center;letter-spacing:.1em;padding:10px}
.arcade-entry button{min-height:44px;font-size:12px;padding:8px 12px}
.layout .board.results-open{height:auto!important;min-height:560px;aspect-ratio:auto}
#run-result{overflow:auto;overscroll-behavior:contain}
.result-card{max-height:85dvh;overflow:auto}
@media(max-height:500px) and (min-width:600px){body.immersive header{min-height:26px}body.immersive .stats>span{padding:2px 6px}body.immersive .stats b{font-size:16px}body.immersive .arcade-summary{font-size:9px;padding:2px 0}body.immersive main{padding:6px 10px}}

@media(max-height:500px) and (min-width:600px){
 body.immersive:has(.layout) main{display:grid;grid-template-columns:minmax(0,1fr) 164px;grid-template-rows:repeat(7,auto);gap:3px 12px;align-items:center}
 body.immersive .layout,body.immersive .layout>section,body.immersive .layout>aside{display:contents}
 body.immersive:has(.layout) header{grid-column:2;grid-row:1;gap:5px;min-width:0;flex-wrap:wrap;padding:0 0 4px}
 body.immersive:has(.layout) header .brand{font-size:15px}
 body.immersive:has(.layout) header #mode-label{display:none}
 body.immersive:has(.layout) header .experience-tools button{min-height:28px;padding:3px}
 body.immersive:has(.layout) header .experience-tools button>span{display:none}
 body.immersive:has(.layout) .arcade-summary{grid-column:2;grid-row:2;font-size:8px;padding:4px 0}
 body.immersive .layout .board{grid-column:1;grid-row:1/8;align-self:center;justify-self:center}
 body.immersive .layout .stats{grid-column:2;grid-row:3;flex-direction:column;gap:3px;width:100%;margin:0!important}
 body.immersive .layout .stats>span{justify-content:space-between;padding:2px 7px;font-size:8px}
 body.immersive .layout .stats b{font-size:16px}
 body.immersive .layout .capture-progress{grid-column:2;grid-row:4;width:100%;margin:0}
 body.immersive .layout #notice{grid-column:2;grid-row:5;font-size:10px;line-height:1.4;margin:0;min-height:0}
 body.immersive .layout footer{grid-column:2;grid-row:6;margin:0;min-height:34px}
 body.immersive .layout footer button{min-height:34px;font-size:11px;padding:7px 10px}
 body.immersive .layout .thumb-controls{grid-column:2;grid-row:7;margin:0}
 body.immersive .layout .thumb-row{gap:4px}
 body.immersive .layout .thumb-row .seg button{font-size:10px;padding:5px;min-height:44px}
}

.compact-rotate[hidden]{display:none!important}body.hide-directions.needs-rotate .thumb-controls{display:flex!important}.compact-rotate{min-height:44px;padding:8px 16px;flex:0 0 auto}

.arcade-summary>span{font-size:9px;letter-spacing:.06em;margin-right:12px}.arcade-summary>strong{color:var(--captured);font:700 14px Inter,sans-serif}body.immersive .arcade-summary>strong{font-size:12px}@media(max-height:500px) and (min-width:600px){body.immersive .arcade-summary>span{display:block;margin:0;font-size:8px}body.immersive .arcade-summary>strong{font-size:10px}}

header a.brand{text-decoration:none}header .home-link{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:7px 12px;margin-left:auto;border:1px solid var(--ink);border-radius:4px;font:700 12px Inter,sans-serif;text-decoration:none;white-space:nowrap;background:var(--paper)}body.menu-page header .home-link{display:none}
.result-navigation{display:flex;gap:8px;position:sticky;top:0;z-index:2;background:var(--paper);padding:9px 0 12px;margin:0 0 12px;border-bottom:1px solid var(--line)}.result-navigation #play-again{width:auto;flex:1;min-width:0;margin:0;font-size:16px;min-height:48px}.result-navigation #main-menu{flex:0 0 88px;min-height:48px;font-weight:700}
.level-records{display:block;width:100%;margin:4px auto 8px;padding:5px 2px;min-height:32px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;font:10px var(--mono);color:var(--captured);line-height:1.5;text-align:center}.level-records:hover{text-decoration:underline}body.immersive .level-records{max-width:720px;margin:2px auto 4px;font-size:10px;min-height:26px}
@media(max-height:500px) and (min-width:600px){body.immersive .layout .board{grid-row:1/9}body.immersive .layout .level-records{grid-column:2;grid-row:5;margin:0;padding:3px;min-height:24px;font-size:9px}body.immersive .layout #notice{grid-row:6}body.immersive .layout footer{grid-row:7}body.immersive .layout .thumb-controls{grid-row:8}body.immersive header .home-link{font-size:10px;min-height:32px;padding:4px 8px}}

.daily-entry{display:block;text-decoration:none;border:1px solid var(--line);padding:12px;border-radius:4px;margin:18px 0}.daily-entry .menu-preview{margin:0 0 12px}.daily-entry strong{font-size:23px;letter-spacing:-.03em}.daily-entry p{font-size:12px;margin:8px 0}.daily-cta{display:block;color:var(--captured);font-weight:700;font-size:14px;margin-top:12px}.daily-entry:hover{border-color:var(--captured)}

.turf-entry{display:block;font-size:12px;font-weight:700;text-align:center;margin:18px 0;color:var(--captured)}

/* Put the game choices before the demonstration and the records. */
#start-menu .home-eyebrow{margin-top:22px;font-size:9px}#start-menu h1{font-size:34px;margin:8px 0;line-height:1.1}#start-menu>.lead{margin:0 0 18px;font-size:13px}.single-choices{display:block}.home-play{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:60px;padding:14px 16px;text-decoration:none;border:2px solid var(--ink);border-radius:4px;font:700 16px Inter,sans-serif;color:var(--ink)}.home-play.primary.link{font-size:18px;min-height:60px}.home-play:hover{border-color:var(--captured)}.home-play small{display:block;font-family:Inter,sans-serif;font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted);margin-top:5px}.daily-play{background:white!important}.choice-note,#start-menu .choice-note{font-size:11px;line-height:1.5;margin:7px 0 16px;color:var(--muted)}.home-friends{border-top:1px solid var(--line);margin-top:22px;padding-top:18px}.home-friends h2{font-size:20px;margin:0 0 12px}.friends-play{min-height:52px;font-size:14px;border-width:1px}.home-turf{display:inline-block;font-size:11px;color:var(--captured);font-weight:600;margin:0 0 6px;text-underline-offset:3px}.home-preview{border-radius:4px;overflow:hidden;margin:20px 0 12px;background:var(--board)}.home-preview canvas{width:100%;height:120px;object-fit:cover;border:0;display:block}.home-records:empty{display:none}#home-records .arcade-summary{margin:8px 0 0;padding:12px 0;width:100%;font-size:9px;min-height:44px}#home-records .arcade-summary strong{font-size:12px}.home-play:focus-visible{outline:3px solid var(--captured);outline-offset:3px}@media(max-width:500px){#start-menu h1{font-size:32px}#start-menu .home-eyebrow{margin-top:18px}.home-play{padding:12px 14px}.home-friends{margin-top:18px;padding-top:16px}.home-preview canvas{height:105px}}

.home-preview{display:block;position:relative;text-decoration:none}.home-preview>span{position:absolute;z-index:1;top:9px;left:10px;font:8px var(--mono);letter-spacing:.06em;color:var(--paper);background:var(--board);padding:3px 5px}
#percent{display:inline-block;transform-origin:left center;transition:transform 140ms cubic-bezier(.3,1.6,.5,1)}#percent.bump{transform:scale(1.22)}@media (prefers-reduced-motion:reduce){#percent{transition:none}#percent.bump{transform:none}}
.home-hero{display:block;position:relative;margin:18px 0 4px;border-radius:6px;overflow:hidden;background:var(--board);text-decoration:none;color:#fff;-webkit-tap-highlight-color:transparent}.home-hero canvas{display:block;width:100%;height:auto;aspect-ratio:720/520;border:0;border-radius:6px}.hero-hud{position:absolute;top:10px;left:10px;display:flex;align-items:baseline;gap:8px;padding:5px 10px 6px;border-radius:4px;background:rgba(15,24,48,.82);pointer-events:none;color:#fff;font:9px var(--mono);letter-spacing:.08em}.hero-hud b{font:600 22px var(--mono);letter-spacing:0;font-variant-numeric:tabular-nums;display:inline-block;transform-origin:left center;transition:transform 140ms cubic-bezier(.3,1.6,.5,1)}.hero-hud b.bump{transform:scale(1.22)}.hero-tap{position:absolute;right:12px;bottom:12px;display:inline-flex;gap:8px;align-items:center;padding:9px 14px;border-radius:4px;background:var(--paper);color:var(--ink);font:700 14px Inter,sans-serif;transition:transform 120ms}.home-hero:hover .hero-tap,.home-hero:focus-visible .hero-tap{transform:translateY(-2px)}.home-hero:active .hero-tap{transform:translateY(1px)}#start-menu .home-hero+.home-eyebrow{margin-top:18px}#start-menu h1{font-size:clamp(30px,7vw,38px)}.home-single{margin:22px 0 12px;font-size:20px}@media (prefers-reduced-motion:reduce){.hero-hud b,.hero-tap{transition:none}.hero-hud b.bump{transform:none}}
.arcade-cabinet{position:relative;margin:22px 0 6px;padding:16px 16px 14px;border-radius:6px;color:#FDFCF7;font-family:var(--mono);background-color:#0F1830!important;background-image:linear-gradient(#1A274F 1px,transparent 1px),linear-gradient(90deg,#1A274F 1px,transparent 1px)!important;background-size:24px 24px;background-position:-1px -1px}.arcade-cabinet.in-sheet{margin:14px 0 10px}.cab-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-bottom:10px;margin-bottom:6px;border-bottom:2px solid #2F6BFF}#start-menu .cab-title,.cab-title{margin:0;font:600 20px/1 var(--mono);letter-spacing:.22em;color:#FDFCF7;text-shadow:0 0 10px rgba(47,107,255,.85),0 0 2px rgba(157,184,255,.9)!important}.cab-sub{font-size:10px;letter-spacing:.12em;color:#8C9AC4}.cab-rows{list-style:none;margin:0;padding:0;display:grid;gap:2px}.cab-row{position:relative;display:grid;grid-template-columns:3.4em 3.6em minmax(12px,1fr) 3em 4.6em;align-items:baseline;gap:0 8px;padding:5px 8px;border-radius:3px;font-size:15px;line-height:1.35;font-variant-numeric:tabular-nums;letter-spacing:.06em}.cab-rank{color:#FF7A2F;font-weight:600}.cab-ini{font-weight:600;letter-spacing:.18em}.cab-dots{align-self:center;border-bottom:2px dotted #34467E;height:0;transform:translateY(3px)}.cab-lvl,.cab-area{text-align:right}.cab-lvl{color:#9DB8FF}.cab-row.first{background:#2F6BFF}.cab-row.first .cab-rank,.cab-row.first .cab-lvl{color:#FDFCF7}.cab-row.first .cab-dots{border-color:rgba(253,252,247,.45)}.cab-row:nth-child(n+4) .cab-rank{color:#8C9AC4}.cab-row.empty{color:#3E4F86}.cab-row.empty .cab-rank,.cab-row.empty .cab-lvl{color:#3E4F86}.cab-row.empty .cab-dots{border-color:#24335F}.cab-row.me{outline:2px dashed #FF7A2F;outline-offset:-2px}.cab-dots{position:relative}.cab-you{position:absolute;left:6px;top:0;transform:translateY(-50%);font-size:9px;line-height:1;letter-spacing:.1em;color:#0F1830;background:#FF7A2F;padding:3px 4px;border-radius:2px}.cab-in{animation:cabIn 360ms steps(4,end) both;animation-delay:calc(var(--i) * 80ms)}@keyframes cabIn{from{opacity:0;clip-path:inset(0 100% 0 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}.cab-cta{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;padding:10px 8px 2px;border-top:1px solid #24335F;color:#FF7A2F;font:600 12px var(--mono);letter-spacing:.14em;text-decoration:none}.cab-cta:hover{color:#FFA36B}.cab-cta i{display:inline-block;width:.6em;height:1em;background:#FF7A2F;animation:cabBlink 1s steps(2,start) infinite}@keyframes cabBlink{to{visibility:hidden}}.arcade-sheet{width:min(500px,calc(100vw - 28px))}@media (max-width:420px){.arcade-cabinet{padding:14px 10px 12px}.cab-row{font-size:13px;grid-template-columns:3.2em 3.4em minmax(8px,1fr) 2.6em 4.4em;gap:0 6px;padding:5px 6px}.cab-title{font-size:17px}.cab-you{left:2px}}@media (prefers-reduced-motion:reduce){.cab-in{animation:none}.cab-cta i{animation:none}}
/* ===== Arcade cabinet theme =====
   The whole site wears the HIGH SCORES look: night-blue cabinet, board grid, glowing mono titles,
   orange arcade buttons. Layered last so it re-themes every page through the shared tokens. */
:root{--ground:#070C1C;--paper:#101A36;--panel:#16224A;--ink:#FDFCF7;--muted:#8C9AC4;--line:#24335F;--captured:#8FB0FF;--orange:#FF7A2F;--board:#0F1830;--glow:0 0 10px rgba(47,107,255,.85),0 0 2px rgba(157,184,255,.9)}
html,html body,html body.tv,html body.playing{background-color:var(--ground)!important;background-image:linear-gradient(rgba(47,107,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(47,107,255,.08) 1px,transparent 1px)!important;background-size:32px 32px!important;color:var(--ink)}
html body main,html body.playing main,html body.is-running main,html body.tv main{background:var(--paper)!important;border:2px solid var(--line);color:var(--ink)}
header{border-bottom-color:var(--line)}
.brand,.brand span,.brand i{color:var(--ink)!important;text-shadow:var(--glow)!important}
h1,#start-menu h1,h2{color:var(--ink);font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.04em;text-wrap:balance}
h1,#start-menu h1{font-size:clamp(24px,3.2vw,36px);line-height:1.15;text-shadow:var(--glow)!important}
h2{font-size:clamp(17px,2vw,20px);letter-spacing:.08em}
.eyebrow,.home-eyebrow{color:var(--orange)!important;letter-spacing:.14em}
p,.lead,.choice-note,label,.hint,small{color:var(--muted)}
a{color:var(--ink)}a:hover{color:var(--captured)}
input:not([type=checkbox]),select,textarea{background:#0A1228!important;border-color:#34467E;color:var(--ink)}
input::placeholder,textarea::placeholder{color:#56679A}
.mode-card,.start-grid .mode-card,.room-code-block,.player-chip,body.tv #roster .player-chip,.stats>span,.rival-chip,.result-grid>div,.tutorial-strip,.join-bar,.result-card{background:var(--panel)!important;border-color:var(--line)!important;color:var(--ink)}
.room-code-block strong,body.tv .room-code-block strong,.stats b{color:var(--ink)}
.track,.progress-track{background:var(--line)!important}
#network.offline{background:#3A2A10;color:#FFD48A;border-color:#7A5A20}
button{border-color:var(--ink);color:var(--ink)}
button.active{background:var(--ink)!important;color:var(--board)!important}
button.primary,.primary.link,.start-grid .mode-card:first-child,a.home-play.primary{background:var(--orange)!important;color:#0F1830!important;border:2px solid;border-color:#FFB283 #A9481A #A9481A #FFB283!important;box-shadow:inset 0 -3px 0 rgba(0,0,0,.18)!important;font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
button.primary:hover,.primary.link:hover{background:#FF8C4A!important;color:#0F1830!important}
button.primary:active,.primary.link:active{border-color:#A9481A #FFB283 #FFB283 #A9481A!important;box-shadow:none!important}
.start-grid .mode-card:first-child p,.start-grid .mode-card:first-child .mode-icon{color:#3A1A08!important}
.home-play{border-color:#34467E;color:var(--ink);background:var(--panel)!important;font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:15px}
.home-play:hover{border-color:var(--captured);color:var(--ink)}
.home-play small{display:block;font-family:Inter,sans-serif;text-transform:none;letter-spacing:0;font-weight:500;color:var(--muted);margin-top:2px}
.home-turf{color:var(--captured)}
.home-friends{border-top-color:var(--line)}
.hero-tap{background:var(--orange)!important;color:#0F1830;font-family:var(--mono);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:13px}
.home-hero{border:2px solid #2F6BFF}
dialog{background:var(--paper)!important;color:var(--ink);border-color:var(--line)}
dialog::backdrop{background:rgba(3,6,16,.75)}
#percent{color:#8FB0FF!important}#lives{color:#FF6B6B!important}
/* HI-SCORE marquee: the #1 run, at the top of every page that has the arcade board */
html body .arcade-summary{display:flex;align-items:baseline;justify-content:center;gap:14px;flex-wrap:wrap;width:100%;margin:0;padding:10px 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent!important;color:var(--ink);font-family:var(--mono);cursor:pointer;min-height:0;text-align:center}
html body .arcade-summary>span{display:inline;margin:0;color:var(--orange);font:600 11px var(--mono);letter-spacing:.2em}
html body .arcade-summary>strong{display:inline;color:var(--ink);font:600 18px var(--mono);letter-spacing:.14em;text-shadow:var(--glow)!important}
html body .arcade-summary:hover>strong{color:#fff}
html body .arcade-summary.home-hi{padding:14px 12px 12px}
html body .arcade-summary.home-hi>strong{font-size:clamp(20px,2.4vw,28px)}
/* Home: a wide two-column cabinet on desktop, board left, high scores right */
@media (min-width:980px){
 html body main:has(> #start-menu:not([hidden])){max-width:1180px;padding:26px 34px 30px}
 #start-menu:not([hidden]){display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,380px);column-gap:40px;align-items:start}
 #start-menu>*{grid-column:1}
 #start-menu>.arcade-cabinet{grid-column:2;grid-row:1/span 30;position:sticky;top:18px;margin:18px 0 0}
 #start-menu .cab-row{font-size:15px}
}
@media (min-width:700px){html body main:not(:has(> #start-menu:not([hidden]))):not(body.immersive main){max-width:640px}}
html body .arcade-summary>strong{white-space:pre}
/* Solo start overlay: the full board is live behind it, arcade "press start" on top */
html body .board .cover.start-cover{inset:0;border-radius:4px;gap:10px;padding:20px;background:rgba(7,12,28,.74)!important;backdrop-filter:blur(2px);color:var(--ink)}
.start-cover .cover-eyebrow{font:600 11px var(--mono);letter-spacing:.2em;color:var(--orange)}
html body .start-cover h2{margin:0;font:600 clamp(30px,5vw,56px)/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);text-shadow:var(--glow)!important}
html body .start-cover p{margin:0;max-width:440px;color:var(--muted);font-size:14px}
html body .start-cover #start{min-width:220px;min-height:60px;margin-top:6px;font-size:20px;letter-spacing:.2em}
.quick-controls{list-style:none;margin:8px 0 0;padding:12px 14px;display:grid;gap:6px;max-width:440px;width:100%;border:1px solid var(--line);border-radius:4px;background:rgba(16,26,54,.85);text-align:left}
.quick-controls li{display:grid;grid-template-columns:5.2em 1fr;gap:10px;align-items:baseline;font-size:12px;color:var(--muted);line-height:1.4}
.quick-controls b{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.qc-touch{display:none!important}
@media (hover:none) and (pointer:coarse){.qc-desktop,.press-start{display:none!important}.qc-touch{display:grid!important}}
.press-start{font:600 11px var(--mono);letter-spacing:.24em;color:var(--orange);animation:cabBlink 1.2s steps(2,start) infinite}
@media (max-height:560px),(max-width:420px){.quick-controls{display:none}html body .start-cover p{font-size:12px}}
@media (prefers-reduced-motion:reduce){.press-start{animation:none}}
/* BOXED wordmark: chunky caps with a live mini-board as the O */
html body .brand{display:inline-flex;align-items:center;font-size:26px;letter-spacing:0;text-decoration:none}
.logo{display:inline-flex;align-items:center;font-family:Inter,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.03em;line-height:1}
.logo>span{display:block;transform:translateY(.02em)}
html body .brand canvas.logo-box{display:block;width:.84em!important;height:.84em!important;max-width:none;aspect-ratio:1;margin:0 .05em 0 .04em;flex:none;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;touch-action:auto;cursor:inherit}
html body main:has(> #start-menu:not([hidden])) .brand{font-size:clamp(32px,4.2vw,46px)}
html body.immersive .brand{font-size:21px}
@media (max-width:520px){html body .brand{font-size:22px}html body main:has(> #start-menu:not([hidden])) .brand{font-size:30px}}
