:root{--bg:#07080d;--fg:#f4f6ff;--muted:#9aa3c0;--gold:#ffd23f;--p1:#3aa0ff;--p2:#ff8a1f;--panel:#080a149e;--font-display:"Bangers", Impact, "Arial Black", sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--fg);margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}#video{opacity:0;pointer-events:none;width:1px;height:1px;position:absolute}#fx,#overlay{width:100vw;height:100vh;display:block;position:fixed;inset:0}#overlay{pointer-events:none}.hidden{display:none!important}#start{background:radial-gradient(ellipse at 50% 40%, #285ac859, transparent 60%), radial-gradient(ellipse at 50% 120%, #ff781e40, transparent 60%), var(--bg);z-index:10;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.card{background:#0a0c18cc;border:1px solid #78a0ff40;border-radius:18px;width:min(620px,100%);padding:28px 30px;box-shadow:0 0 80px #3aa0ff2e}.card h1{font-family:var(--font-display);letter-spacing:3px;color:#e9f4ff;text-shadow:0 0 18px #3aa0ff,0 0 40px #1f6dff,3px 3px #0b1d4d;margin:0;font-size:clamp(48px,9vw,80px);line-height:1}.tag{color:var(--muted);margin:10px 0 18px}.steps{margin:0 0 20px;padding-left:20px;font-size:14px;line-height:1.55}.steps b{color:var(--gold)}.options{color:var(--muted);flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:18px;font-size:13px;display:flex}.options select{color:var(--fg);background:#11152a;border:1px solid #2a3360;border-radius:8px;margin-left:6px;padding:6px 8px}.options .check{align-items:center;gap:6px;display:flex}.buttons{flex-wrap:wrap;gap:12px;display:flex}button{color:var(--fg);cursor:pointer;background:#131932;border:1px solid #2f3a6e;border-radius:12px;padding:12px 20px;font:600 15px Inter,sans-serif}button.primary{background:linear-gradient(#4fb0ff,#1f6dff);border-color:#7cc4ff;box-shadow:0 0 24px #3aa0ff73}button:disabled{opacity:.5;cursor:progress}#status{min-height:20px;color:var(--muted);margin-top:14px;font-size:13px}#status.error{color:#ff7a7a}.legal{color:var(--muted);opacity:.8;margin:14px 0 0;font-size:11px;line-height:1.5}.legal a{color:inherit}#hud{pointer-events:none;z-index:5;position:fixed;inset:0}.panel{background:var(--panel);border:1px solid color-mix(in srgb, var(--pc) 45%, transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);width:min(260px,42vw);box-shadow:0 0 24px color-mix(in srgb, var(--pc) 25%, transparent);border-radius:14px;padding:12px 14px;transition:opacity .3s;position:absolute;top:16px}.panel.p1{left:16px}.panel.p2{right:16px}.panel.absent{opacity:.45}.panel-head{font-family:var(--font-display);letter-spacing:1px;color:var(--pc);justify-content:space-between;font-size:22px;display:flex}.wins{color:var(--gold)}.ssj-badge{letter-spacing:1.5px;color:var(--gold);text-shadow:0 0 8px #ffd23fcc;font:800 11px Inter,sans-serif;display:none}.panel.ssj{border-color:color-mix(in srgb, var(--gold) 70%, transparent);box-shadow:0 0 32px #ffd23f73}.panel.ssj .ssj-badge{display:block}.state{letter-spacing:1.5px;color:var(--muted);margin:2px 0 8px;font:800 12px Inter,sans-serif}.state[data-phase=charging],.state[data-phase=firing],.state[data-phase=powering]{color:var(--fg)}.bar{background:#ffffff14;border-radius:6px;height:10px;overflow:hidden}.bar .fill{background:linear-gradient(90deg, color-mix(in srgb, var(--pc) 70%, #000), var(--pc), #fff);width:0;height:100%;box-shadow:0 0 12px var(--pc);transition:width 80ms linear}.bar .fill.ascend,.panel.ssj .bar .fill{background:linear-gradient(90deg, #a06c00, var(--gold), #fff);box-shadow:0 0 14px var(--gold)}.pump-row{align-items:center;gap:8px;margin-top:6px;display:none}.pump-row.show{display:flex}.pump-row .bar{flex:1}.pump-label{letter-spacing:1px;color:var(--gold);font:800 10px Inter,sans-serif}.checks{margin:10px 0 6px;padding:0;font-size:12px;line-height:1.7;list-style:none}.checks li:before{width:18px;font-weight:800;display:inline-block}.checks li.ok{color:#c9ffd8}.checks li.ok:before{content:"✓";color:#3dff8a}.checks li.no{color:var(--muted)}.checks li.no:before{content:"✗";color:#ff6b6b}.checks li.unknown{color:#5d6584}.checks li.unknown:before{content:"–"}.form{letter-spacing:1px;color:var(--pc);font:800 11px Inter,sans-serif}.callouts{position:absolute;inset:0}.callout{font-family:var(--font-display);color:#fff;-webkit-text-stroke:2px color-mix(in srgb, var(--pc) 60%, #000);text-shadow:0 0 18px var(--pc), 0 0 36px var(--pc);white-space:nowrap;font-size:clamp(36px,6vw,64px);animation:.9s ease-out forwards pop;position:absolute;transform:translate(-50%,-100%)}.callout.big{font-size:clamp(56px,10vw,120px);animation-duration:1.4s}@keyframes pop{0%{opacity:0;transform:translate(-50%,-60%)scale(.4)}15%{opacity:1;transform:translate(-50%,-100%)scale(1.15)}70%{opacity:1}to{opacity:0;transform:translate(-50%,-160%)scale(1)}}.banner{text-align:center;opacity:0;transition:opacity .2s,transform .25s cubic-bezier(.2,1.6,.4,1);position:absolute;top:28%;left:50%;transform:translate(-50%,-50%)scale(.6)}.banner.show{opacity:1;transform:translate(-50%,-50%)scale(1)}.banner-main{font-family:var(--font-display);letter-spacing:3px;color:#fff;-webkit-text-stroke:2px #000;text-shadow:0 0 24px var(--pc), 0 0 60px var(--pc), 4px 4px 0 #000;white-space:nowrap;font-size:clamp(48px,9vw,110px)}.banner-sub{letter-spacing:2px;color:var(--gold);text-shadow:0 2px 6px #000;font:800 18px Inter,sans-serif}.struggle{opacity:0;width:min(640px,80vw);transition:opacity .25s;position:absolute;bottom:64px;left:50%;transform:translate(-50%)}.struggle.show{opacity:1}.struggle-title{text-align:center;font-family:var(--font-display);letter-spacing:2px;color:var(--gold);text-shadow:0 0 12px #ffd23f99,2px 2px #000;font-size:26px;animation:.5s steps(2,end) infinite blink}@keyframes blink{50%{opacity:.55}}.struggle-track{background:var(--p2);height:16px;box-shadow:0 0 18px var(--p2);border-radius:10px;margin-top:6px;position:relative;overflow:visible}.struggle-fill{background:var(--p1);height:100%;box-shadow:0 0 18px var(--p1);border-radius:10px 0 0 10px}.struggle-marker{background:radial-gradient(circle,#fff 30%,#fff3 70%);border-radius:50%;width:28px;height:28px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 20px #fff}.hint{color:#dfe5ff;text-align:center;background:#00000073;border-radius:10px;width:max-content;max-width:calc(100vw - 32px);padding:8px 14px;font-size:13px;position:absolute;bottom:22px;left:50%;transform:translate(-50%)}.keys{color:#dce1ff73;font-size:11px;position:absolute;bottom:22px;left:16px}.fps{color:#dce1ff73;font:600 11px ui-monospace,Menlo,monospace;position:absolute;bottom:22px;right:16px}@media (width<=900px){.keys{display:none}}.rec{letter-spacing:1px;background:#c80000bf;border-radius:8px;padding:4px 12px;font:800 13px Inter,sans-serif;animation:1s steps(2,end) infinite blink;display:none;position:absolute;top:16px;left:50%;transform:translate(-50%)}.rec.show{display:block}