:root { color-scheme: dark; font-family: Inter, ui-monospace, Consolas, monospace; background: #05060a; color: #f5f7ff; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; overflow: auto; background: radial-gradient(circle at 50% 20%, rgba(103,64,255,.16), transparent 35%), linear-gradient(#090b12 1px, transparent 1px), linear-gradient(90deg,#090b12 1px,transparent 1px), #05060a; background-size: auto,38px 38px,38px 38px; }
.game-shell { width: min(1500px,98vw); padding: 10px 0; }
header, footer { display: flex; justify-content: space-between; align-items: center; gap: 18px; }
header { margin-bottom: 7px; }
.brand { display: flex; align-items: center; gap: 14px; }
.header-actions, .code-access { display: flex; align-items: center; gap: 8px; }
.code-access input { width: 142px; border: 1px solid #30384e; border-radius: 3px; padding: 8px 10px; outline: none; background: #090c14; color: #fff; font: 700 10px inherit; text-transform: uppercase; letter-spacing: .08em; }
.code-access input:focus { border-color: #7afcff; }
.code-access button { margin: 0; padding: 9px 11px; box-shadow: none; font-size: 9px; }
.code-access button:hover { transform: none; box-shadow: 0 0 14px rgba(122,252,255,.18); }
.code-access.invalid input { border-color: #ff4d69; animation: codeShake .22s linear 2; }
@keyframes codeShake { 50% { transform: translateX(4px); } }
.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; }
h1 { margin: 0; font-size: clamp(20px,2.6vw,34px); letter-spacing: -.05em; }
.eyebrow { margin: 0; color: #7afcff; font-size: 10px; letter-spacing: .22em; }
.canvas-wrap { position: relative; border: 1px solid #24293a; box-shadow: 0 0 0 1px #090b12,0 24px 80px #000,inset 0 0 80px rgba(89,48,255,.06); background: #070910; }
canvas { display: block; width: 100%; max-height: calc(100vh - 94px); aspect-ratio: 5/3; cursor: crosshair; }
.overlay { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 24px; background: rgba(4,5,10,.74); backdrop-filter: blur(8px); }
.overlay.hidden { display: none; }
.overlay.level-transition { background: radial-gradient(circle,rgba(110,77,255,.34),rgba(4,5,10,.91) 55%); }
.overlay.level-transition h2 { animation: levelPulse .75s ease-in-out infinite alternate; }
@keyframes levelPulse { to { transform: scale(1.045); text-shadow: 0 0 28px #7afcff; } }
.overlay h2 { margin: 5px 0 10px; font-size: clamp(28px,6vw,70px); letter-spacing: -.06em; }
.overlay > p:not(.eyebrow) { color: #aab0c1; }
.player-field { width: min(320px,80vw); display: grid; gap: 7px; margin-top: 14px; color: #7d859b; text-align: left; font-size: 9px; letter-spacing: .16em; }
.player-field.hidden { display: none; }
.player-field input { width: 100%; border: 1px solid #30384e; border-radius: 3px; padding: 11px 13px; outline: none; background: rgba(4,6,12,.85); color: #fff; font: 700 14px inherit; text-transform: uppercase; }
.player-field input:focus { border-color: #7afcff; box-shadow: 0 0 15px rgba(122,252,255,.18); }
button { margin-top: 18px; border: 0; padding: 13px 26px; color: #05060a; background: #7afcff; font: 800 12px inherit; letter-spacing: .16em; cursor: pointer; box-shadow: 6px 6px 0 #6e4dff; }
button:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 #6e4dff; }
.sound-toggle { margin: 0; padding: 9px 13px; color: #7afcff; border: 1px solid #30384e; background: #090c14; box-shadow: none; font-size: 10px; }
.sound-toggle:hover { transform: none; border-color: #7afcff; box-shadow: 0 0 14px rgba(122,252,255,.18); }
.sound-toggle.muted { color: #737c93; border-color: #242a3a; }
footer { margin-top: 7px; color: #697086; font-size: 10px; letter-spacing: .1em; }
@media (max-width:750px) { header { align-items: flex-start; } .header-actions { align-items: flex-end; flex-direction: column-reverse; } .code-access input { width: 120px; } footer { flex-direction: column; align-items: start; gap: 4px; } }