:root{color-scheme:dark;--bg: #06070f;--ink: #f7f2d7;--muted: #8da2b8;--teal: #29f1d0;--violet: #8d63ff;--gold: #ffd166;--crimson: #ff4d6d;--panel: rgba(4, 8, 19, .72);--border: rgba(91, 238, 220, .42)}*{box-sizing:border-box}html,body,#app{width:100%;min-height:100%;margin:0}body{overflow:hidden;background:radial-gradient(circle at 20% 15%,rgba(141,99,255,.22),transparent 28rem),radial-gradient(circle at 80% 80%,rgba(41,241,208,.16),transparent 30rem),var(--bg);color:var(--ink);font-family:Courier New,Courier,monospace}.shell{display:grid;width:100vw;height:100vh;place-items:center;padding:clamp(12px,2vw,24px)}.game-frame{position:relative;width:min(100%,960px);aspect-ratio:4 / 3;max-height:calc(100vh - 32px);overflow:hidden;border:2px solid var(--border);border-radius:6px;background:#02040a;box-shadow:0 0 0 4px #ffd16614,0 18px 70px #00000085,0 0 42px #29f1d01f}#game,#game canvas{display:block;width:100%;height:100%;image-rendering:pixelated}.scanline{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0,rgba(255,255,255,.035) 1px,transparent 1px,transparent 4px);mix-blend-mode:screen}.volume-toggle{position:absolute;top:12px;right:12px;display:grid;width:40px;height:40px;place-items:center;border:1px solid rgba(41,241,208,.55);border-radius:6px;background:#040813c2;color:var(--ink);cursor:pointer;box-shadow:inset 0 0 12px #29f1d014,0 8px 24px #00000047}.volume-toggle:hover,.volume-toggle:focus-visible{border-color:#ffd166b8;color:var(--gold);outline:none}.volume-toggle svg{width:24px;height:24px;fill:currentColor}.volume-toggle svg path{stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.volume-toggle svg>path{stroke:none}.volume-toggle .volume-off{display:none}.volume-toggle.is-muted{color:var(--muted)}.volume-toggle.is-muted .volume-on{display:none}.volume-toggle.is-muted .volume-off{display:block}.hud{position:absolute;top:12px;left:12px;display:grid;grid-template-columns:repeat(5,minmax(74px,1fr));gap:8px;width:min(650px,calc(100% - 24px));pointer-events:none}.hud>div{min-width:0;border:1px solid rgba(141,99,255,.55);border-radius:4px;background:var(--panel);padding:7px 8px;box-shadow:inset 0 0 12px #29f1d014}.hud span{display:block;color:var(--muted);font-size:10px;line-height:1;text-transform:uppercase}.hud strong{display:block;margin-top:4px;color:var(--ink);font-size:clamp(16px,2vw,24px);line-height:1}.message{position:absolute;right:12px;bottom:12px;max-width:min(430px,calc(100% - 24px));border:1px solid rgba(255,209,102,.52);border-radius:4px;background:var(--panel);color:var(--gold);padding:8px 10px;font-size:clamp(11px,1.6vw,14px);line-height:1.25;pointer-events:none;text-shadow:0 0 8px rgba(255,209,102,.32)}.dev-panel{position:absolute;top:12px;right:12px;width:min(300px,calc(100% - 24px));max-height:calc(100% - 24px);overflow:auto;border:1px solid rgba(41,241,208,.55);border-radius:4px;background:#03060fe6;box-shadow:inset 0 0 18px #29f1d014,0 12px 38px #0000006b;color:var(--ink);padding:10px}.dev-panel[hidden]{display:none}.dev-panel header{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(141,99,255,.35);padding-bottom:8px}.dev-panel header strong,.dev-panel h2{font-size:12px;line-height:1;text-transform:uppercase}.dev-panel header span{color:var(--muted);font-size:10px}.dev-panel section{display:grid;gap:8px;padding-top:10px}.dev-panel h2{margin:0;color:var(--gold)}.dev-panel label{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;color:var(--muted);font-size:11px}.dev-panel input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--teal)}.dev-panel input[type=color]{width:44px;height:24px;border:1px solid rgba(247,242,215,.35);border-radius:3px;background:transparent;padding:0}@media (max-width: 640px){body{overflow:auto}.shell{height:auto;min-height:100vh;padding:8px}.game-frame{width:100%;max-height:none}.hud{top:8px;left:8px;grid-template-columns:repeat(2,minmax(74px,1fr));width:min(280px,calc(100% - 16px));gap:6px}.message{right:8px;bottom:8px}.volume-toggle{top:8px;right:8px;width:36px;height:36px}.dev-panel{top:8px;right:8px}}