:root{--bg: #0a0806;--surface-1: #14100a;--surface-2: #1f180f;--text: #ffd9a0;--text-muted: #a8845a;--accent: #ffb000;--accent-support: #ff6b35;--success: #7fff9f;--danger: #ff4444;--font-display: "Press Start 2P", "Courier New", monospace;--font-ui: "Share Tech Mono", "Courier New", monospace;--space-1: 4px;--space-2: 8px;--space-3: 16px;--space-4: 24px;--space-5: 32px;--radius-sm: 2px;--radius-md: 4px;--glow-sm: 0 0 6px rgba(255, 176, 0, .55);--glow-md: 0 0 16px rgba(255, 176, 0, .4);--ease-out: cubic-bezier(.16, 1, .3, 1);--t-ui: .18s;--t-juice: .1s}*{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-ui);background-image:repeating-linear-gradient(0deg,rgba(255,176,0,.035) 0px,rgba(255,176,0,.035) 1px,transparent 1px,transparent 3px),radial-gradient(ellipse at 50% 0%,rgba(255,176,0,.08),transparent 60%)}#app{display:flex;flex-direction:column;min-height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--surface-2)}.brand{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}.wordmark{font-family:var(--font-display);font-size:clamp(1rem,2.4vw,1.5rem);letter-spacing:.15em;color:var(--accent);text-shadow:var(--glow-sm);margin:0}.tagline{margin:0;font-size:.8rem;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (max-width: 480px){.tagline{display:none}}.icon-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--radius-md);border:1px solid var(--surface-2);background:var(--surface-1);color:var(--accent);cursor:pointer;transition:background var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out)}.icon-btn.is-muted .sound-wave{opacity:.2}.icon-btn.is-muted:after{content:"";position:absolute;width:2px;height:22px;background:var(--danger);transform:rotate(45deg)}.icon-btn:hover{background:var(--surface-2);box-shadow:var(--glow-sm)}.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.icon-btn:active{transform:scale(.94)}.stage{flex:1;display:flex;gap:var(--space-4);padding:var(--space-4);min-height:60vh}.scene-frame{position:relative;flex:1;min-width:0;border-radius:var(--radius-md);border:1px solid var(--surface-2);box-shadow:var(--glow-md);background:var(--surface-1);overflow:hidden}#scene{display:block;width:100%;height:100%}#scene:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;box-shadow:var(--glow-md)}.scene-frame:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;mix-blend-mode:screen;background-image:repeating-linear-gradient(0deg,rgba(255,176,0,.05) 0px,rgba(255,176,0,.05) 1px,transparent 1px,transparent 3px)}.radar-sweep{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.radar-sweep:before{content:"";position:absolute;top:-50%;right:-50%;bottom:-50%;left:-50%;background:conic-gradient(from 0deg,rgba(255,176,0,.22),transparent 12%,transparent 100%);animation:radar-spin 6s linear infinite}@keyframes radar-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.radar-sweep:before{animation:none}}.hud{width:260px;flex-shrink:0;font-size:.95rem;color:var(--text-muted)}.hud-stats{display:flex;flex-direction:column;gap:var(--space-2);margin:0 0 var(--space-3);padding:var(--space-3);background:var(--surface-1);border:1px solid var(--surface-2);border-radius:var(--radius-md)}.hud-stats>div{display:flex;justify-content:space-between;gap:var(--space-2)}.hud-stats dt{color:var(--text-muted)}.hud-stats dd{margin:0;color:var(--accent);text-shadow:var(--glow-sm)}.hud-hint{margin:0;color:var(--text-muted);line-height:1.5}@media (max-width: 768px){.stage{flex-direction:column}.scene-frame{min-height:60vh}.hud{width:auto}}.win-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:var(--space-4);background:#0a0806d1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.win-overlay[hidden]{display:none}.win-panel{position:relative;width:min(360px,100%);padding:var(--space-5) var(--space-4);background:var(--surface-1);border:1px solid var(--accent);border-radius:var(--radius-md);box-shadow:var(--glow-md);text-align:center}.win-panel h2{margin:0 0 var(--space-4);font-family:var(--font-display);font-size:1.05rem;color:var(--success);text-shadow:0 0 10px rgba(127,255,159,.6)}.win-stats{display:flex;justify-content:center;gap:var(--space-5);margin:0 0 var(--space-4)}.win-stat{display:flex;flex-direction:column;gap:var(--space-1)}.win-stat-label{font-size:.7rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em}.win-stat span:last-child{font-size:1.4rem;color:var(--accent);text-shadow:var(--glow-sm)}.win-actions{display:flex;gap:var(--space-3);justify-content:center}.btn{min-height:44px;padding:var(--space-2) var(--space-4);font-family:var(--font-ui);font-size:.9rem;color:var(--text);background:var(--surface-2);border:1px solid var(--surface-2);border-radius:var(--radius-md);cursor:pointer;transition:background var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out)}.btn:hover{background:var(--surface-1);box-shadow:var(--glow-sm)}.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn:active{transform:scale(.96)}.btn-primary{color:var(--bg);background:var(--accent);border-color:var(--accent)}.btn-primary:hover{background:var(--accent-support);border-color:var(--accent-support);box-shadow:var(--glow-md)}.win-particles{position:absolute;top:0;right:0;bottom:0;left:0;overflow:visible;pointer-events:none}.win-spark{position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background:var(--success);box-shadow:0 0 6px #7fff9fcc;opacity:0;animation:spark-burst .6s var(--ease-out) forwards}@keyframes spark-burst{0%{opacity:1;transform:translate(-50%,-50%) translate(0) scale(1)}to{opacity:0;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(.4)}}@media (prefers-reduced-motion: reduce){.win-spark{animation:none;opacity:0}}.about{border-top:1px solid var(--surface-2);padding:var(--space-5) var(--space-4);background:radial-gradient(ellipse at 50% 0%,rgba(255,176,0,.06),transparent 55%),var(--bg)}.about-inner{max-width:68ch;margin:0 auto}.about h2{font-family:var(--font-display);font-size:clamp(.95rem,2.2vw,1.25rem);color:var(--accent);text-shadow:var(--glow-sm);letter-spacing:.08em;margin:0 0 var(--space-4)}.about h3{font-family:var(--font-display);font-size:.85rem;color:var(--text);letter-spacing:.06em;margin:var(--space-5) 0 var(--space-3)}.about p,.about li,.about dd{color:var(--text-muted);line-height:1.65}.about strong{color:var(--text)}.about-steps,.about-features{margin:0;padding-left:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}.about-features{list-style:none;padding-left:0}.about-features li{padding:var(--space-3);background:var(--surface-1);border:1px solid var(--surface-2);border-radius:var(--radius-md)}.about-faq{margin:0}.about-faq dt{color:var(--accent);margin-top:var(--space-3)}.about-faq dd{margin:var(--space-1) 0 0}.about-cta{display:inline-block;margin-top:var(--space-5);min-height:44px;padding:var(--space-3) var(--space-4);font-family:var(--font-ui);color:var(--bg);background:var(--accent);border:1px solid var(--accent);border-radius:var(--radius-md);text-decoration:none;transition:background var(--t-ui) var(--ease-out),box-shadow var(--t-ui) var(--ease-out),transform var(--t-ui) var(--ease-out)}.about-cta:hover{background:var(--accent-support);border-color:var(--accent-support);box-shadow:var(--glow-md)}.about-cta:focus-visible{outline:2px solid var(--text);outline-offset:2px}.about-cta:active{transform:scale(.97)}.about-footer{max-width:68ch;margin:var(--space-5) auto 0;padding-top:var(--space-4);border-top:1px solid var(--surface-2);font-size:.85rem}.about-footer a{color:var(--text-muted);text-decoration:none;transition:color var(--t-ui) var(--ease-out)}.about-footer a:hover{color:var(--accent)}.about-footer a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}