:root{color-scheme:dark;--surface-canvas: #050811;--surface-raised: #0b1221;--surface-overlay: rgba(5, 8, 17, .9);--text-primary: #f7fbff;--text-secondary: #91a6b8;--action-primary: #4de3ff;--action-primary-ink: #04121a;--status-danger: #ff667a;--status-gold: #ffc857;--status-finish: #b8ff65;--border-subtle: rgba(154, 210, 235, .16);--focus-ring: #ffffff;--font-display: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;--font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;--ease-snap: cubic-bezier(.2, .8, .2, 1);font-family:var(--font-body);background:var(--surface-canvas);color:var(--text-primary);font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html,body{width:100%;min-width:280px;min-height:100%;margin:0;overflow:hidden;background:radial-gradient(circle at 50% 15%,rgba(34,101,134,.13),transparent 45%),#03060d}body{min-height:100dvh}button,canvas{-webkit-tap-highlight-color:transparent}button{font:inherit}#app{min-height:100dvh}.game-shell{position:relative;display:grid;place-content:center;width:100%;min-height:100dvh;padding:clamp(12px,2.5vw,34px);isolation:isolate}.game-shell:before{position:fixed;inset:0;z-index:-1;content:"";pointer-events:none;background-image:linear-gradient(rgba(72,147,182,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(72,147,182,.025) 1px,transparent 1px);background-size:40px 40px;-webkit-mask-image:linear-gradient(to bottom,black,transparent 85%);mask-image:linear-gradient(to bottom,black,transparent 85%)}.game-frame{position:relative;width:min(1180px,calc(100vw - clamp(24px,5vw,68px)));max-height:calc(100dvh - 90px);aspect-ratio:var(--game-aspect-ratio);overflow:hidden;border:1px solid var(--border-subtle);background:var(--surface-canvas);box-shadow:0 32px 80px #0000008c,0 0 0 1px #ffffff06 inset}#game-canvas{display:block;width:100%;height:100%;outline:none;cursor:pointer;touch-action:none;-webkit-user-select:none;user-select:none}#game-canvas:focus-visible{box-shadow:0 0 0 3px var(--focus-ring) inset}.frame-corners{position:absolute;inset:9px;z-index:6;border:1px solid transparent;pointer-events:none;background:linear-gradient(var(--action-primary),var(--action-primary)) left top / 18px 1px no-repeat,linear-gradient(var(--action-primary),var(--action-primary)) left top / 1px 18px no-repeat,linear-gradient(var(--action-primary),var(--action-primary)) right top / 18px 1px no-repeat,linear-gradient(var(--action-primary),var(--action-primary)) right top / 1px 18px no-repeat,linear-gradient(var(--action-primary),var(--action-primary)) left bottom / 18px 1px no-repeat,linear-gradient(var(--action-primary),var(--action-primary)) left bottom / 1px 18px no-repeat,linear-gradient(var(--action-primary),var(--action-primary)) right bottom / 18px 1px no-repeat,linear-gradient(var(--action-primary),var(--action-primary)) right bottom / 1px 18px no-repeat;opacity:.38}.game-footer{display:flex;justify-content:space-between;width:min(1180px,calc(100vw - clamp(24px,5vw,68px)));padding:12px 2px 0;color:#62798d;font:600 10px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}.hud{position:absolute;top:max(clamp(22px,4vw,48px),env(safe-area-inset-top));left:50%;z-index:10;display:flex;align-items:flex-start;justify-content:space-between;width:min(1110px,calc(100vw - clamp(54px,8vw,112px)));pointer-events:none;transform:translate(-50%);transition:opacity .16s ease}.hud.is-hidden{display:none;opacity:0}.hud__room{display:grid;grid-template-columns:auto 1px auto;gap:10px;align-items:center;color:var(--text-primary);font:650 11px/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;text-shadow:0 2px 14px #000}.hud__room:before{grid-column:2;width:1px;height:18px;content:"";background:#ffffff3d}.hud__room-index{grid-column:1;color:var(--status-gold)}.hud__room-name{grid-column:3}.hud__time{position:relative;display:grid;grid-template-columns:auto auto auto;gap:9px;align-items:center}.hud__state,.hud__meter-value{color:var(--text-secondary);font:700 10px/1 var(--font-mono);letter-spacing:.1em}.hud__state{width:76px;text-align:right}.hud__meter{display:flex;gap:8px;align-items:center}.hud__meter-track{position:relative;width:clamp(90px,14vw,168px);height:7px;overflow:hidden;border:1px solid rgba(117,211,242,.3);background:#02080fb3}.hud__meter-track:after{position:absolute;inset:0;content:"";background:repeating-linear-gradient(90deg,transparent 0,transparent calc(33.333% - 1px),rgba(255,255,255,.2) calc(33.333% - 1px),rgba(255,255,255,.2) 33.333%)}.hud__meter-fill{display:block;width:0;height:100%;background:linear-gradient(90deg,#176b91,var(--action-primary));box-shadow:0 0 12px #4de3ff9e;transition:width 70ms linear}.hud__meter-value{min-width:31px;color:var(--text-primary)}.hud__hold{width:16px;height:16px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:conic-gradient(var(--action-primary) var(--hold-progress, 0deg),rgba(255,255,255,.07) 0);opacity:0;transform:scale(.8);transition:opacity .1s ease,transform .1s ease}.hud.is-holding .hud__hold{opacity:1;transform:scale(1)}.hud.is-rewinding .hud__state,.hud.is-rewinding .hud__meter-value{color:var(--action-primary)}.hud.is-paused .hud__state{color:var(--status-gold)}.hud.is-rewinding .hud__meter-fill{transition:none}.overlay{position:absolute;inset:0;z-index:20;display:grid;place-items:center;pointer-events:none}.overlay:before{position:absolute;inset:0;content:"";background:radial-gradient(circle at 50% 45%,rgba(15,48,67,.18),transparent 48%),#02050bb8;opacity:0;pointer-events:none;transition:opacity .18s ease}.overlay.is-paused:before{opacity:1}.overlay.is-menu,.overlay.is-paused{pointer-events:auto}.panel{position:relative;width:min(560px,calc(100vw - 46px));padding:clamp(28px,5vw,58px);border:1px solid rgba(120,205,237,.18);background:linear-gradient(135deg,#122335e0,#050811f0),var(--surface-overlay);box-shadow:0 32px 90px #000000a6,0 0 0 9px #060f1b6b;pointer-events:auto;animation:panel-in .5s var(--ease-snap) both;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.panel:before{position:absolute;top:-1px;left:11%;width:34%;height:2px;content:"";background:var(--action-primary);box-shadow:0 0 16px #4de3ffcc}.panel.is-hidden,.room-announcement.is-hidden{display:none}.panel__kicker{margin:0 0 16px;color:var(--action-primary);font:750 10px/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase}.panel__kicker--danger{color:var(--status-danger)}.panel__kicker--finish{color:var(--status-finish)}.panel h1,.panel h2{margin:0;font-family:var(--font-display);font-weight:850;letter-spacing:-.06em;text-transform:uppercase}.panel h1{display:flex;flex-direction:column;font-size:clamp(52px,8vw,92px);line-height:.76}.panel h1 em{margin-left:1.25em;color:transparent;font-style:normal;-webkit-text-stroke:1px var(--action-primary);text-shadow:0 0 30px rgba(77,227,255,.16)}.panel h2{font-size:clamp(40px,6vw,68px);line-height:.92}.panel__lede{max-width:46ch;margin:28px 0;color:#b7c8d5;font-size:clamp(13px,1.7vw,16px);line-height:1.65}.control-card{display:grid;margin:26px 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}.control-card>div{display:grid;grid-template-columns:88px 1fr;gap:18px;align-items:center;min-height:43px;border-bottom:1px solid rgba(145,166,184,.09)}.control-card>div:last-child{border-bottom:0}kbd{color:var(--action-primary);font:700 11px/1 var(--font-mono);letter-spacing:.12em;text-transform:uppercase}.control-card span{color:var(--text-secondary);font-size:13px}.button{display:inline-flex;gap:28px;align-items:center;justify-content:space-between;min-width:210px;min-height:50px;padding:0 18px;border:1px solid transparent;border-radius:0;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:color .14s ease,background .14s ease,transform .14s var(--ease-snap),box-shadow .14s ease}.button--primary{color:var(--action-primary-ink);background:var(--action-primary);box-shadow:0 8px 30px #4de3ff2e}.button:hover{transform:translateY(-2px);box-shadow:0 12px 34px #4de3ff47}.button:active{transform:translateY(0)}.button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:4px}.panel__hint{display:inline-block;margin:0 0 0 14px;color:#62798d;font:650 9px/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.panel--caught{width:min(470px,calc(100vw - 46px));text-align:center}.panel--caught:before{left:33%;background:var(--status-danger);box-shadow:0 0 16px #ff667abf}.panel--caught p:last-child{margin:22px 0 0;color:var(--text-secondary);font:650 12px/1.5 var(--font-mono)}.panel--pause{width:min(530px,calc(100vw - 46px))}.panel--pause:before{width:22%}.pause-heading{display:flex;gap:20px;align-items:center}.pause-mark{width:44px;height:56px;flex:0 0 auto;background:linear-gradient(var(--action-primary),var(--action-primary)) left center / 13px 100% no-repeat,linear-gradient(var(--action-primary),var(--action-primary)) right center / 13px 100% no-repeat;filter:drop-shadow(0 0 12px rgba(77,227,255,.35))}.panel__actions{display:flex;gap:12px;align-items:stretch}.panel__actions .button{flex:1 1 190px}.button--secondary{color:var(--text-primary);border-color:#91a6b852;background:#070f1bb3;box-shadow:none}.button--secondary:hover{border-color:#4de3ff94;background:#102434e0;box-shadow:0 10px 28px #00000047}.button__shortcut{padding:4px 6px;border:1px solid rgba(4,18,26,.3);font:800 9px/1 var(--font-mono);letter-spacing:.08em}.panel__hint--standalone{display:block;margin:18px 0 0}.panel--complete:before{background:var(--status-finish);box-shadow:0 0 16px #b8ff65b3}.stats-grid{display:grid;grid-template-columns:1fr 1fr;margin:26px 0;border-top:1px solid var(--border-subtle);border-left:1px solid var(--border-subtle)}.stats-grid>div{padding:15px;border-right:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}.stats-grid dt{color:var(--text-secondary);font:650 9px/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase}.stats-grid dd{margin:8px 0 0;color:var(--text-primary);font:750 22px/1 var(--font-mono)}.room-announcement{position:absolute;left:max(34px,calc((100vw - min(1110px,calc(100vw - clamp(54px,8vw,112px))))/2));bottom:clamp(32px,8vw,95px);display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;width:min(520px,calc(100vw - 68px));padding:14px 18px 14px 14px;border-left:2px solid var(--status-gold);background:linear-gradient(90deg,#060d18eb,#060d1800);animation:room-in .4s var(--ease-snap) both}.room-announcement.is-leaving{animation:room-out .35s ease both}.room-announcement__number{display:grid;place-items:center;width:54px;height:54px;color:var(--status-gold);border:1px solid rgba(255,200,87,.38);font:750 18px/1 var(--font-mono)}.room-announcement p,.room-announcement h2{margin:0}.room-announcement__eyebrow{color:var(--status-gold);font:700 8px/1 var(--font-mono);letter-spacing:.15em;text-transform:uppercase}.room-announcement__name{margin-top:4px!important;font:800 clamp(18px,2.8vw,28px)/1 var(--font-display);letter-spacing:-.03em;text-transform:uppercase}.room-announcement__subtitle{margin-top:5px!important;color:var(--text-secondary);font-size:11px}.fade-layer{position:absolute;inset:0;z-index:100;background:#02050b;opacity:0;pointer-events:none;transition:opacity 90ms linear}.fade-layer.is-active{opacity:1}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes panel-in{0%{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}@keyframes room-in{0%{opacity:0;transform:translate(-24px)}to{opacity:1;transform:none}}@keyframes room-out{to{opacity:0;transform:translate(20px)}}@media(max-aspect-ratio:4 / 5){.game-shell{padding:10px}.game-frame,.game-footer{width:calc(100vw - 20px)}.panel{padding:28px}.panel h1{font-size:clamp(44px,14vw,68px)}.panel__lede{margin:20px 0}.control-card{margin:18px 0}.hud{top:22px;width:calc(100vw - 44px)}}@media(max-width:620px){.hud__room-name,.hud__state{display:none}.hud__time{grid-template-columns:auto auto}.panel__hint{display:block;margin:14px 0 0}.control-card>div{grid-template-columns:72px 1fr}.panel__actions{flex-direction:column}.panel__actions .button{flex-basis:auto;width:100%}.game-footer span:nth-child(2){display:none}}@media(max-height:780px){.panel{max-height:calc(100dvh - 30px);padding:22px 28px;overflow-y:auto}.panel h1{font-size:clamp(44px,11vh,70px)}.panel__lede{margin:16px 0}.control-card{margin:14px 0}.control-card>div{min-height:36px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}