:root{--void: #03060f;--cyan: #16f4ff;--magenta: #ff2bd6;color-scheme:dark}*{margin:0;padding:0;box-sizing:border-box}html,body,#app{width:100%;height:100%;overflow:hidden;background:var(--void);font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}#app{position:relative}#renderCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none}#overlay{position:absolute;inset:0;pointer-events:none}.touch-zone{position:absolute;top:0;bottom:0;width:50%;pointer-events:auto;touch-action:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}#left-zone{left:0}#right-zone{right:0}.zone-hint{font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;color:color-mix(in srgb,var(--cyan) 55%,transparent);opacity:.6;transition:opacity .4s ease;animation:hint-pulse 2.4s ease-in-out infinite}#right-zone .zone-hint{color:color-mix(in srgb,var(--magenta) 60%,transparent)}#app.engaged .zone-hint{opacity:0}@keyframes hint-pulse{0%,to{opacity:.6}50%{opacity:.2}}.oj-base{position:fixed;width:132px;height:132px;border-radius:50%;border:2px solid color-mix(in srgb,var(--cyan) 45%,transparent);background:color-mix(in srgb,var(--cyan) 7%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--cyan) 25%,transparent);transform:translate(-50%,-50%);pointer-events:none;touch-action:none;z-index:15}.oj-base.look{border-color:color-mix(in srgb,var(--magenta) 45%,transparent);background:color-mix(in srgb,var(--magenta) 7%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--magenta) 25%,transparent)}.oj-knob{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:var(--cyan);box-shadow:0 0 18px var(--cyan);transition:transform .05s linear}.oj-base.look .oj-knob{background:var(--magenta);box-shadow:0 0 18px var(--magenta)}#tilt-btn{position:absolute;bottom:max(2rem,env(safe-area-inset-bottom));right:max(2rem,env(safe-area-inset-right));pointer-events:auto;font:inherit;font-size:.8rem;color:var(--void);background:var(--magenta);border:0;border-radius:8px;padding:.7rem 1.2rem;box-shadow:0 0 20px color-mix(in srgb,var(--magenta) 60%,transparent)}#tilt-btn[hidden]{display:none}#start-gate{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;margin:0;border:0;font:inherit;cursor:pointer;color:var(--cyan);background:radial-gradient(ellipse at 50% 45%,rgba(22,244,255,.1),var(--void) 70%);-webkit-tap-highlight-color:transparent}#start-gate[hidden]{display:none}#start-gate .title{font-size:clamp(1.4rem,5vw,2.4rem);letter-spacing:.12em;text-shadow:0 0 12px var(--cyan),0 0 36px color-mix(in srgb,var(--cyan) 50%,transparent);animation:pulse 2.2s ease-in-out infinite}#start-gate .sub{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;color:color-mix(in srgb,var(--magenta) 85%,white)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.55}}#rotate-hint{position:absolute;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:16vh;gap:1rem;background:var(--void);color:var(--cyan);text-align:center}#rotate-hint[hidden]{display:none}#rotate-hint div{font-size:3rem;animation:spin 2.5s ease-in-out infinite}@keyframes spin{0%,to{transform:rotate(0)}50%{transform:rotate(90deg)}}.board-panel{position:absolute;top:max(.9rem,env(safe-area-inset-top));left:50%;transform:translate(-50%,-12px);z-index:12;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:.15rem;min-width:14rem;max-width:80vw;padding:.7rem 1.2rem;text-align:center;border-radius:10px;background:color-mix(in srgb,var(--void) 78%,transparent);border:1px solid color-mix(in srgb,var(--cyan) 45%,transparent);box-shadow:0 0 24px color-mix(in srgb,var(--cyan) 18%,transparent);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s ease,transform .3s ease}.board-panel.visible{opacity:1;transform:translate(-50%)}.board-year{font-size:1.4rem;font-weight:700;letter-spacing:.1em;color:var(--cyan);text-shadow:0 0 10px color-mix(in srgb,var(--cyan) 60%,transparent)}.board-title{font-size:.85rem;letter-spacing:.18em;text-transform:uppercase;color:color-mix(in srgb,var(--magenta) 85%,white)}.board-detail{font-size:.8rem;color:#b8d3e8;max-width:28rem}.prompt-hud{position:absolute;bottom:max(8.5rem,calc(env(safe-area-inset-bottom) + 8rem));left:50%;transform:translate(-50%);z-index:12;pointer-events:none;font-size:.8rem;letter-spacing:.05em;color:color-mix(in srgb,var(--cyan) 85%,white);text-shadow:0 0 8px color-mix(in srgb,var(--cyan) 50%,transparent);opacity:0;transition:opacity .2s ease;text-align:center}.prompt-hud.visible{opacity:.95}.prompt-hud.bubble{font-size:.95rem;font-weight:700;color:#eafbff;padding:.7rem 1.1rem;border-radius:14px;background:color-mix(in srgb,var(--void) 82%,transparent);border:1px solid color-mix(in srgb,var(--cyan) 60%,transparent);box-shadow:0 0 26px color-mix(in srgb,var(--cyan) 30%,transparent);backdrop-filter:blur(8px);animation:bubble-pop .25s ease}.prompt-hud.bubble:after{content:"";position:absolute;left:50%;bottom:-7px;transform:translate(-50%) rotate(45deg);width:12px;height:12px;background:color-mix(in srgb,var(--void) 82%,transparent);border-right:1px solid color-mix(in srgb,var(--cyan) 60%,transparent);border-bottom:1px solid color-mix(in srgb,var(--cyan) 60%,transparent)}@keyframes bubble-pop{0%{transform:translate(-50%) scale(.9)}to{transform:translate(-50%) scale(1)}}.interact-btn{position:absolute;right:max(2rem,env(safe-area-inset-right));top:50%;transform:translateY(-50%);z-index:13;pointer-events:auto;font:inherit;font-size:.8rem;letter-spacing:.12em;color:var(--void);background:var(--cyan);border:0;border-radius:999px;padding:.9rem 1.3rem;box-shadow:0 0 22px color-mix(in srgb,var(--cyan) 60%,transparent)}.interact-btn[hidden]{display:none}.voltage-wheel{position:absolute;bottom:max(1.4rem,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);z-index:14;display:none;flex-direction:column;align-items:center;gap:.4rem;pointer-events:none}.vw-dial{position:relative;width:116px;height:116px;border-radius:50%;pointer-events:auto;touch-action:none;border:3px solid color-mix(in srgb,var(--cyan) 55%,transparent);background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--cyan) 12%,transparent),transparent 70%),color-mix(in srgb,var(--void) 60%,transparent);box-shadow:0 0 22px color-mix(in srgb,var(--cyan) 25%,transparent)}.vw-marker{position:absolute;top:6px;left:50%;width:6px;height:30px;margin-left:-3px;border-radius:3px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}.voltage-wheel.hot .vw-dial{border-color:color-mix(in srgb,var(--magenta) 70%,white);box-shadow:0 0 34px color-mix(in srgb,var(--magenta) 60%,transparent)}.voltage-wheel.hot .vw-marker{background:#fff;box-shadow:0 0 16px var(--magenta)}.vw-label{font-size:.8rem;font-weight:700;letter-spacing:.1em;color:var(--cyan);text-shadow:0 0 8px color-mix(in srgb,var(--cyan) 60%,transparent)}.voltage-wheel.hot .vw-label{color:color-mix(in srgb,var(--magenta) 90%,white)}.action-btn{position:absolute;z-index:14;pointer-events:auto;width:78px;height:78px;border-radius:50%;font:inherit;font-size:.72rem;letter-spacing:.08em;font-weight:700;color:var(--void);border:0;-webkit-tap-highlight-color:transparent;bottom:max(1.8rem,env(safe-area-inset-bottom))}.jump-btn{right:max(1.6rem,env(safe-area-inset-right));background:var(--cyan);box-shadow:0 0 22px color-mix(in srgb,var(--cyan) 60%,transparent)}.crouch-btn{right:max(8.4rem,calc(env(safe-area-inset-right) + 6.8rem));background:color-mix(in srgb,var(--magenta) 88%,white);box-shadow:0 0 22px color-mix(in srgb,var(--magenta) 55%,transparent)}.action-btn:active{filter:brightness(1.3)}#app.warn-flash:after{content:"";position:absolute;inset:0;z-index:11;pointer-events:none;box-shadow:inset 0 0 120px color-mix(in srgb,var(--magenta) 55%,transparent)}.scene-complete{position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:0;visibility:hidden}.scene-complete.active{opacity:1;visibility:visible;animation:sc-fade 2.8s ease forwards}.scene-complete .sc-flash{position:absolute;inset:0;background:var(--cyan);opacity:0;animation:sc-flash .6s ease forwards}.scene-complete .sc-title{position:relative;text-align:center;font-size:clamp(1.5rem,6vw,3rem);font-weight:700;letter-spacing:.14em;line-height:1.3;color:#eafbff;text-shadow:0 0 14px var(--cyan),0 0 48px color-mix(in srgb,var(--cyan) 50%,transparent);opacity:0;animation:sc-title 2s ease .5s forwards}@keyframes sc-flash{0%{opacity:0}35%{opacity:.9}to{opacity:0}}@keyframes sc-title{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}@keyframes sc-fade{0%,90%{opacity:1}to{opacity:1}}