html,body{margin:0;padding:0;height:100%;background:#000;overflow:hidden;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;font-family:ui-monospace,Cascadia Code,JetBrains Mono,Menlo,Consolas,monospace}:root{--accent: #00e5ff;--hud-text: #e6e6f0;--bezel: #17181f;--bezel-hi: #2a2c38;--bezel-lo: #0a0b10}#tv{position:fixed;inset:0;background:radial-gradient(120% 90% at 50% 110%,#0d0f1a,#050609 60%,#000)}#screen{position:absolute;left:4.5vw;right:4.5vw;top:4.5vh;bottom:7.5vh;overflow:hidden;background:#000;border-radius:1.2vw / 1.2vh}#display,#fx{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}#display{background:#000;z-index:1}#fx{pointer-events:none;z-index:2;visibility:hidden}#tv-frame{position:absolute;inset:0;z-index:40;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%;background-position:0 0}#tv-frame:after{content:"";position:absolute;inset:4.5% 4.5% 7.5%;border-radius:1.2vw / 1.2vh;background:linear-gradient(115deg,#ffffff0d,#fff0 35%);pointer-events:none}#tv-led{position:absolute;right:6.5vw;bottom:2.6vh;width:10px;height:10px;border-radius:50%;background:#ff3b5c;box-shadow:0 0 8px #ff3b5c,0 0 18px #ff3b5c99;z-index:41;pointer-events:none;animation:led-breathe 3.2s ease-in-out infinite}@keyframes led-breathe{0%,to{opacity:.55;box-shadow:0 0 4px #ff3b5c,0 0 8px #ff3b5c66}50%{opacity:1;box-shadow:0 0 10px #ff3b5c,0 0 22px #ff3b5cb3}}#footer{position:absolute;left:12px;bottom:8px;z-index:20;font-size:10px;letter-spacing:.12em;color:#4b5270;pointer-events:none}#dpad{position:fixed;right:18px;bottom:18px;width:150px;height:150px;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;z-index:50;touch-action:none}#dpad[hidden]{display:none}.dpad-btn{appearance:none;border:2px solid color-mix(in srgb,var(--accent) 55%,transparent);border-radius:10px;background:#0a0e1e8c;color:var(--accent);font:700 20px/1 ui-monospace,monospace;text-shadow:0 0 8px var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 25%,transparent) inset,0 0 10px color-mix(in srgb,var(--accent) 25%,transparent);touch-action:none;cursor:pointer}.dpad-btn:active{background:color-mix(in srgb,var(--accent) 35%,transparent)}.dpad-up{grid-column:2;grid-row:1}.dpad-left{grid-column:1;grid-row:2}.dpad-right{grid-column:3;grid-row:2}.dpad-down{grid-column:2;grid-row:3}@media(orientation:landscape)and (max-height:600px){#dpad{right:auto;left:18px;bottom:50%;transform:translateY(50%)}}#mute{position:absolute;top:12px;right:12px;z-index:60;width:40px;height:40px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);background:#0a0e1e99;color:var(--accent);font:700 18px/1 ui-monospace,monospace;text-shadow:0 0 8px var(--accent);cursor:pointer}#mute[aria-pressed=true]{color:#7f8bb0;text-shadow:none;opacity:.8}#mute:focus-visible{outline:2px solid #ff2e88;outline-offset:2px}#hud{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;padding:12px 16px 0;z-index:20;pointer-events:none;color:var(--hud-text);text-shadow:0 0 6px rgba(0,0,0,.9),0 0 10px color-mix(in srgb,var(--accent) 55%,transparent)}.hud-item{display:flex;flex-direction:column;gap:2px;min-width:90px}.hud-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);opacity:.9}.hud-value{font-size:22px;font-weight:700;line-height:1}.hud-level .hud-value{color:var(--accent)}.hud-level.max .hud-value{animation:hud-max 1.2s ease-in-out infinite alternate}.hud-best{text-align:right;align-items:flex-end}.hud-combo{font-size:12px;color:#ffd166;text-shadow:0 0 8px rgba(255,209,102,.8)}.hud-combo[hidden]{display:none}@keyframes hud-max{0%{opacity:.7}to{opacity:1;text-shadow:0 0 14px var(--accent)}}#popups{position:absolute;inset:0;pointer-events:none;z-index:21}.popup{position:absolute;transform:translate(-50%,-100%);font-size:14px;font-weight:700;color:#fff;text-shadow:0 0 6px var(--accent),0 0 12px var(--accent);opacity:0}.popup[hidden]{display:none}.popup.live{animation:popup-rise .7s ease-out forwards}@keyframes popup-rise{0%{opacity:1;transform:translate(-50%,-100%)}to{opacity:0;transform:translate(-50%,calc(-100% - 28px))}}#banner{position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);font-size:clamp(22px,5vw,44px);font-weight:800;letter-spacing:.12em;color:#fff;text-shadow:0 0 10px var(--accent),0 0 28px var(--accent);pointer-events:none;z-index:22}#banner[hidden]{display:none}#banner.live{animation:banner-pop 1.6s ease-out forwards}@keyframes banner-pop{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}15%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}30%{transform:translate(-50%,-50%) scale(1)}80%{opacity:1}to{opacity:0;transform:translate(-50%,-60%) scale(1)}}#overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;z-index:30;pointer-events:none;background:radial-gradient(60% 50% at 50% 50%,#05060e8c,#05060ed1);color:#e6e6f0}#overlay[hidden]{display:none}.ov-title{font-size:clamp(30px,7vw,64px);font-weight:800;letter-spacing:.1em;color:#eaf6ff;text-shadow:0 0 12px var(--accent),0 0 40px color-mix(in srgb,var(--accent) 60%,transparent)}.ov-sub{font-size:14px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}.ov-body{font-size:18px;margin-top:8px}.ov-hint{font-size:12px;color:#9aa4c7;margin-top:6px}#overlay[data-mode=title] .ov-body{animation:blink 1.4s steps(2,start) infinite}@keyframes blink{to{visibility:hidden}}#ui-top{position:absolute;top:12px;right:60px;z-index:60}#gear{width:40px;height:40px;border-radius:10px;border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);background:#0a0e1e99;color:var(--accent);font:700 20px/1 ui-monospace,monospace;text-shadow:0 0 8px var(--accent);cursor:pointer}#gear:focus-visible{outline:2px solid #ff2e88;outline-offset:2px}#settings{position:fixed;inset:0;z-index:70}#settings[hidden]{display:none}.settings-backdrop{position:absolute;inset:0;background:#020308b3}.settings-panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);min-width:300px;max-width:90vw;padding:20px 22px 16px;border-radius:14px;background:#0b0d1a;border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 0 30px color-mix(in srgb,var(--accent) 25%,transparent),0 20px 60px #000c;color:#e6e6f0}.settings-panel h2{margin:0 0 14px;font-size:15px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);text-shadow:0 0 10px var(--accent)}.settings-list{display:flex;flex-direction:column;gap:8px}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:16px}.settings-label{font-size:14px}.settings-toggle{min-width:74px;padding:6px 12px;border-radius:999px;border:1px solid #3a3f5c;background:#141728;color:#9aa4c7;font:700 12px/1 ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.settings-toggle.on{border-color:var(--accent);color:#0b0d1a;background:var(--accent);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 60%,transparent)}.settings-toggle:focus-visible,.settings-close:focus-visible{outline:2px solid #ff2e88;outline-offset:2px}.settings-close{margin-top:16px;width:100%;padding:8px 12px;border-radius:10px;border:1px solid #3a3f5c;background:#141728;color:#e6e6f0;font:700 12px/1 ui-monospace,monospace;letter-spacing:.12em;text-transform:uppercase;cursor:pointer}#fps{position:absolute;left:12px;bottom:24px;z-index:25;padding:4px 8px;border-radius:6px;background:#05060eb3;color:#9fe8ff;font-size:11px;letter-spacing:.06em;pointer-events:none}#fps[hidden]{display:none}