:root{--bg:#000;--grid:#151515;--fg:#f5f5f5;--muted:#8a8a8a;--accent:#2b5cff;--accent-2:#67e8f9;--danger:#ef4444;--ok:#22c55e;--font-pixel:"Press Start 2P", monospace}body{background-color:var(--bg);color:var(--fg);margin:0;font-family:Inter,system-ui,sans-serif;overflow:hidden}#game-container{background:var(--bg);width:100vw;height:100vh;position:relative}#game-container:before{content:"";z-index:0;pointer-events:none;background-image:radial-gradient(circle,#2b5cff14 0%,#0000 70%);position:absolute;inset:0}#webcam{display:none}#game-canvas{object-fit:cover;z-index:10;width:100%;height:100%;position:absolute;top:0;left:0}#game-canvas.mirrored{transform:scaleX(-1)}#ui-layer{z-index:20;pointer-events:none;box-sizing:border-box;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:2rem;display:flex;position:absolute;top:0;left:0}.status-box{border:1px solid var(--grid);text-align:center;pointer-events:auto;background:#000000d1;border-radius:4px;padding:1rem 2rem;transition:border-color .2s,box-shadow .2s}.hud-title{font-family:var(--font-pixel);letter-spacing:2px;color:var(--fg);margin:0;font-size:13px}.hud-menu-btn{pointer-events:auto;cursor:pointer;color:var(--fg);border:2px solid var(--grid);font:12px/1 var(--font-pixel);letter-spacing:1px;background:0 0;border-radius:4px;margin-top:10px;padding:8px 16px;transition:border-color .15s,transform .15s}.hud-menu-btn:hover,.hud-menu-btn:focus-visible{border-color:var(--accent);outline:none;transform:translateY(-1px)}.recording{border-color:var(--danger);box-shadow:0 0 16px #ef444459}.playing{border-color:var(--accent-2);box-shadow:0 0 16px #67e8f959}.instruction-box{color:var(--fg);border:1px solid var(--grid);background:#000000bf;border-radius:4px;padding:1rem 2rem;font-size:1.25rem;display:inline-block}.scene{z-index:5;background-color:var(--bg);background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px), radial-gradient(ellipse at 50% 30%, #2b5cff1a 0%, #0000 65%);color:var(--fg);box-sizing:border-box;background-size:64px 64px,64px 64px,100% 100%;position:fixed;inset:0;overflow-y:auto}.scene[hidden]{display:none!important}.scene:after{content:"";z-index:-1;pointer-events:none;background-image:radial-gradient(1px 1px at 20% 30%, var(--accent-2) 0%, transparent 100%), radial-gradient(1px 1px at 70% 60%, var(--accent) 0%, transparent 100%), radial-gradient(1px 1px at 40% 80%, var(--accent-2) 0%, transparent 100%), radial-gradient(1px 1px at 85% 15%, var(--accent) 0%, transparent 100%);opacity:.5;animation:12s linear infinite drift-dots;position:fixed;inset:0}@keyframes drift-dots{0%{background-position:0 0,0 0,0 0,0 0}to{background-position:30px 40px,-40px 20px,20px -30px,-20px -40px}}.menu-scene{flex-direction:column;justify-content:center;align-items:center;gap:2rem;padding:2rem;display:flex}.menu-badge{text-align:center;max-width:130px;position:absolute;top:24px;left:24px}.menu-badge img{object-fit:contain;width:96px;height:96px;image-rendering:pixelated;border:1px solid var(--grid)}.menu-badge p{color:var(--muted);margin:6px 0 0;font:11px system-ui}.menu-title-wrap{text-align:center}.menu-title{font-family:var(--font-pixel);letter-spacing:4px;color:var(--fg);margin:0;font-size:clamp(2rem,6vw,4.5rem)}.menu-subtitle{font-family:var(--font-pixel);letter-spacing:3px;color:var(--accent);margin:12px 0 0;font-size:clamp(1rem,3vw,1.5rem)}.menu-tagline{color:var(--muted);margin:14px 0 0;font:14px system-ui}.menu-buttons{flex-direction:column;gap:12px;width:min(360px,90vw);display:flex}.menu-btn,.level-card button,.account-hud button,.account-panel button,.settings-panel button{font:12px/1.4 var(--font-pixel);letter-spacing:1px;border:2px solid var(--grid);min-height:56px;color:var(--fg);cursor:pointer;pointer-events:auto;box-sizing:border-box;background:#000;border-radius:4px;padding:16px 18px;transition:border-color .15s,transform .15s}.menu-btn{min-width:280px}.level-card .menu-btn{box-sizing:border-box;width:100%;min-width:0}.menu-btn:hover,.level-card button:hover,.account-hud button:hover,.account-panel button:hover,.settings-panel button:hover,.menu-btn:focus-visible,.level-card button:focus-visible,.account-panel button:focus-visible{border-color:var(--accent);outline:none;transform:translateY(-1px)}.menu-btn--primary{background:var(--accent);border-color:var(--accent);color:#fff}.menu-btn--primary:hover,.menu-btn--primary:focus-visible{border-color:var(--accent-2)}.menu-btn:disabled,.level-card button:disabled{opacity:.5;cursor:default;border-color:var(--grid);transform:none}.menu-status{text-align:center;color:var(--muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:18px;padding:0 1rem;font:12px/1.6 SF Mono,Menlo,monospace;display:flex;position:absolute;bottom:20px;left:0;right:0}.status-segment{align-items:center;gap:6px;display:inline-flex}.status-dot{background:var(--muted);border-radius:50%;width:8px;height:8px;display:inline-block}.status-dot--ok{background:var(--ok)}.status-dot--danger{background:var(--danger)}.status-dot--muted{background:var(--muted)}.levels-scene{flex-direction:column;justify-content:center;align-items:center;gap:2rem;padding:2rem;display:flex}.levels-heading{font-family:var(--font-pixel);letter-spacing:3px;color:var(--accent);margin:0;font-size:clamp(1.2rem,3vw,1.8rem)}.levels-grid{grid-template-columns:repeat(3,minmax(220px,260px));justify-content:center;gap:24px;display:grid}.level-card{border:1px solid var(--grid);text-align:center;background:#000;border-radius:4px;flex-direction:column;gap:10px;padding:20px;transition:border-color .15s;display:flex;position:relative}.level-card:not(.locked):hover{border-color:var(--accent)}.level-card.locked{opacity:.6}.level-card-num{font-family:var(--font-pixel);color:var(--accent);text-align:left;font-size:1.2rem}.level-card-name{font-size:1.05rem;font-weight:700}.level-card-echoes,.level-card-best{color:var(--muted);font:13px system-ui}.level-card-lock{font-size:1.6rem}.levels-nav{gap:16px;display:flex}@media (width<=900px){.levels-grid{grid-template-columns:1fr;width:min(320px,90vw)}}@media (width<=600px){.menu-badge{margin-bottom:.5rem;position:static}}@keyframes brief-scoop-path{0%,8%{opacity:1;transform:translate(118px,108px)scale(1)}18%{transform:translate(108px,92px)scale(1.05)}28%,36%{transform:translate(102px,86px)scale(.92)}58%{transform:translate(232px,126px)scale(1)}68%,78%{opacity:1;transform:translate(248px,142px)scale(.86)}88%,to{opacity:0;transform:translate(118px,108px)scale(1)}}@keyframes brief-thumb-pinch{0%,12%{transform:rotate(-32deg)translate(0)}22%,36%{transform:rotate(-14deg)translate(8px,-10px)}50%,to{transform:rotate(-32deg)translate(0)}}@keyframes brief-index-pinch{0%,12%{transform:translate(0)}22%,36%{transform:translate(-6px,12px)}50%,to{transform:translate(0)}}@keyframes brief-hand-carry{0%,28%{opacity:1;transform:translate(0)}58%{opacity:1;transform:translate(108px,6px)}72%,to{opacity:.3;transform:translate(108px,6px)}}@keyframes brief-ring-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.72;transform:scale(1.1)}}@keyframes brief-spark-pop{0%,18%{opacity:0;transform:scale(.4)}24%{opacity:1;transform:scale(1.2)}34%{opacity:.85;transform:scale(1)}42%,to{opacity:0;transform:scale(.5)}}.brief-scoop{transform-box:fill-box;transform-origin:50%;animation:4.4s cubic-bezier(.4,.1,.3,1) infinite brief-scoop-path}.brief-hand{transform-box:fill-box;transform-origin:50%;animation:4.4s cubic-bezier(.4,.1,.3,1) infinite brief-hand-carry}.brief-thumb{transform-box:fill-box;transform-origin:50%;animation:4.4s cubic-bezier(.4,.1,.3,1) infinite brief-thumb-pinch}.brief-index{transform-box:fill-box;transform-origin:50%;animation:4.4s cubic-bezier(.4,.1,.3,1) infinite brief-index-pinch}.brief-ring{transform-box:fill-box;transform-origin:50%;animation:1.8s ease-in-out infinite brief-ring-pulse}.brief-spark{transform-box:fill-box;transform-origin:50%;animation:4.4s ease-out infinite brief-spark-pop}@media (prefers-reduced-motion:reduce){.brief-scoop,.brief-hand,.brief-thumb,.brief-index,.brief-ring,.brief-spark,.scene:after{animation:none!important}}.account-hud{z-index:30;border:1px solid var(--grid);max-width:min(480px,95vw);color:var(--fg);pointer-events:auto;background:#000000e6;border-radius:4px;flex-wrap:wrap;gap:8px;padding:10px;font:14px system-ui;display:flex;position:fixed;top:104px;right:16px}.account-hud span:nth-child(2){color:var(--accent-2)}.account-hud button,.account-panel button,.settings-panel button{min-height:44px;padding:10px 14px}.account-panel{z-index:100;width:min(540px,94vw);max-height:85vh;color:var(--fg);border:1px solid var(--grid);background:#000;border-radius:4px;margin:auto;padding:24px;font:16px system-ui;overflow:auto}.account-panel::backdrop{background:#000000bf}.account-panel h2{font-family:var(--font-pixel);letter-spacing:1px;border-bottom:1px solid var(--accent);color:var(--fg);margin-bottom:16px;padding-bottom:12px;font-size:15px}.account-panel p{color:var(--muted);margin:12px 0}.account-panel form{gap:12px;margin-top:20px;display:grid}.account-panel input{color:var(--fg);border:1px solid var(--grid);background:#0a0a0a;border-radius:4px;padding:12px;font:14px system-ui}.account-panel input:focus{border-color:var(--accent);outline:none}.account-panel table{text-align:left;border-collapse:collapse;width:100%;margin:20px 0}.account-panel td,.account-panel th{border-bottom:1px solid var(--grid);padding:8px}.account-panel .is-me{color:var(--accent-2)}.account-panel [hidden],.account-hud [hidden]{display:none}.dwell-cursor{z-index:1000;pointer-events:none;border:3px solid var(--accent-2);border-radius:50%;width:24px;height:24px;position:fixed;transform:translate(-50%,-50%)}#mode-indicator{align-self:flex-start;padding:12px 24px}.settings-panel .row{border-bottom:1px solid var(--grid);grid-template-columns:1fr auto;align-items:center;gap:12px;padding:10px 0;display:grid}.settings-panel select{color:var(--fg);border:1px solid var(--grid);background:#0a0a0a;border-radius:4px;padding:8px;font:13px system-ui}.settings-panel button.is-on,.account-panel button[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}.settings-panel h2{color:var(--fg)}.settings-panel p{color:var(--accent-2);font-size:13px}
