:root{color-scheme:dark;--bg:#101617;--panel:#1c2526;--ink:#f1f1e8;--muted:#a3b1ae;--lime:#d4f77c}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 5%,#27392b 0,transparent 45%),var(--bg);color:var(--ink);font:16px/1.6 system-ui,-apple-system,sans-serif}header,main,footer{max-width:1200px;margin:auto;padding-left:32px;padding-right:32px}header{display:flex;justify-content:space-between;align-items:center;padding-top:30px;padding-bottom:30px;border-bottom:1px solid #ffffff16}.brand{font-size:22px;letter-spacing:-1px;font-weight:950;color:var(--ink);text-decoration:none}.brand span{color:var(--lime)}.badge,.eyebrow{font-size:11px;letter-spacing:2px;font-weight:800}.badge{border:1px solid #ffffff32;border-radius:50px;padding:7px 12px;color:var(--muted)}.intro{padding:45px 0 30px;max-width:700px}.eyebrow{color:var(--lime);margin:0 0 14px}h1{font-size:clamp(40px,6vw,70px);line-height:1.05;letter-spacing:-3px;margin:0 0 22px;font-weight:850}h1 span{color:var(--lime)}.intro>p:last-child{color:var(--muted);max-width:600px;margin:0}.panel{background:var(--panel);border:1px solid #ffffff18;border-radius:16px;overflow:hidden;box-shadow:0 20px 80px #0003}form{display:flex;gap:18px;align-items:end;padding:24px}label{flex:1;font-size:10px;letter-spacing:1.6px;color:var(--muted);font-weight:750}input{display:block;width:100%;font:16px system-ui;letter-spacing:0;margin-top:9px;padding:13px 14px;background:#101819;border:1px solid #42514d;color:var(--ink);border-radius:7px}input:focus{outline:2px solid var(--lime);outline-offset:2px}button{cursor:pointer;border:0;border-radius:7px;background:var(--lime);color:#1d2917;font:750 15px system-ui;padding:15px 24px;min-height:47px}button span{padding-left:20px}button:hover{filter:brightness(1.08)}button:disabled{opacity:.55;cursor:wait}.secondary{background:#ffffff0c;border:1px solid #ffffff28;color:var(--ink);padding:8px 12px;min-height:34px;font-size:12px}.session-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 24px;border-top:1px solid #ffffff12;font-size:13px;color:var(--muted)}#status{flex:1}progress{width:100%;height:5px;display:block;accent-color:var(--lime)}#game{width:100%;aspect-ratio:8/5;background:#000;position:relative}#game canvas{width:100%!important;height:100%!important}#game:focus{outline:2px solid var(--lime)}.details{font-size:12px;color:var(--muted);padding:16px 0 30px}.details p{margin:5px 0}.details strong{color:var(--ink);margin-left:12px}.details strong:first-child{margin-left:0}footer{padding-bottom:28px;color:#7c8f87;font-size:12px}[hidden]{display:none!important}@media(max-width:700px){header,main,footer{padding-left:18px;padding-right:18px}.badge{font-size:9px}.brand{font-size:18px}form{flex-direction:column;align-items:stretch}h1{letter-spacing:-2px}.intro{padding-top:30px}.session-bar{padding:12px 18px}}
/* Keep the first action and its response in view. */
.intro{padding:28px 0 22px}h1{font-size:clamp(36px,5vw,58px);margin-bottom:16px}form{display:block}.quick-play{display:flex;align-items:center;gap:22px}.quick-play p{margin:0;color:var(--muted);font-size:14px}#play{min-width:180px;font-size:18px}.keyboard-note{margin:14px 0;color:var(--muted);font-size:13px}#options{border-top:1px solid #ffffff18;padding-top:12px;font-size:13px}summary{cursor:pointer;color:var(--ink)}.fields{display:flex;gap:18px;margin-top:16px}label span{font-weight:400;letter-spacing:0}#room-help{color:var(--muted);margin-bottom:0}.secondary{text-decoration:none}.playing .intro{display:none}.playing header{padding-top:12px;padding-bottom:12px}.playing main{padding-top:16px}.playing .session-bar{font-size:16px;min-height:76px;color:var(--ink)}.playing #status{min-width:220px}.playing #game{max-height:calc(100dvh - 210px);aspect-ratio:8/5}.playing progress{height:10px;margin:0}.playing .details{padding-bottom:10px}.has-error .session-bar{background:#572b23}.has-error #status{color:#ffe5df}.panel{scroll-margin-top:12px}#status:focus-visible{outline:2px solid var(--lime);outline-offset:3px}@media(max-width:700px){.quick-play{align-items:stretch;flex-direction:column;gap:12px}.fields{flex-direction:column}.intro{padding-top:22px}.playing .session-bar{font-size:14px}}
/* Fit the whole panel to the available height, including its session bar.
   Unity resets #game's inline margin, so centering belongs on the panel. */
.playing .panel{width:min(100%,calc((100dvh - 210px)*16/9));margin-inline:auto}
.playing #game{width:100%;height:auto;max-height:none;aspect-ratio:16/9}
#game canvas{display:block;position:absolute;inset:0}
/* Keep the same camera/HUD framing on 16:10, 4:3 and ultrawide displays.
   The browser owns fullscreen; Unity still resizes its buffer to the canvas. */
.playing #game:fullscreen{display:grid;place-items:center;width:100vw;height:100vh;max-height:none;aspect-ratio:auto;background:#000!important}
#game:fullscreen canvas{position:static;width:min(100vw,calc(100vh*16/9))!important;height:min(100vh,calc(100vw*9/16))!important}
#display-message{padding:10px 24px;margin:0;color:#ffe5df;background:#572b23}
/* A modest optional boost matches the richer native-game reference. Browsers
   still apply the monitor profile; this is not a universal ICC correction. */
.classic-colors #game canvas{filter:saturate(1.25)}
.color-option{display:flex;align-items:center;gap:8px;margin:12px 0;font:13px system-ui;letter-spacing:0;color:var(--ink)}
.color-option input{width:auto;margin:0;accent-color:var(--lime)}
.color-option span{color:var(--muted)}
/* A separate browser game window keeps its normal OS title bar and controls. */
body.game-window{background:#000;overflow:hidden}
.game-window header,.game-window .intro,.game-window .details,.game-window footer{display:none}
.game-window main{max-width:none;padding:0}
.game-window.playing .panel{width:100%;margin:0;border:0;border-radius:0;box-shadow:none}
.game-window.playing #game{display:grid;place-items:center;width:100vw;height:100dvh;aspect-ratio:auto;background:#000!important}
.game-window #game canvas{position:static;width:min(100vw,calc(100dvh*16/9))!important;height:min(100dvh,calc(100vw*9/16))!important}
.game-window.in-arena .session-bar{display:none}
.game-window.has-error .session-bar{display:flex;position:fixed;inset:0 0 auto;z-index:2}
.game-window #display-message{position:fixed;inset:0 0 auto;z-index:3}