:root{--bg:#0a0e13;--panel:#10161e;--panel2:#151d27;--fg:#cfe6d4;--dim:#5c6f63;--accent:#7fffd4;--ghost:#6db8ff;--bug:#ff5d7a;--gold:#ffd75e;--danger:#f44;--mono:"Menlo", "Monaco", "Courier New", monospace}*{box-sizing:border-box}body{background:var(--bg);color:var(--fg);font-family:var(--mono);margin:0;overflow:hidden}body:before{content:"";pointer-events:none;z-index:90;background:repeating-linear-gradient(0deg,#00000029 0 1px,#0000 1px 3px);position:fixed;inset:0}body:after{content:"";pointer-events:none;z-index:91;background:radial-gradient(#0000 55%,#0000008c 100%);animation:5s infinite crt-flicker;position:fixed;inset:0}@keyframes crt-flicker{0%,to{opacity:1}92%{opacity:1}93%{opacity:.92}94%{opacity:1}}#app{height:100vh}.screen{flex-direction:column;height:100vh;padding:18px 22px;display:flex}kbd{color:var(--accent);font-family:var(--mono);background:#1d2833;border:1px solid #33465a;border-bottom-width:2px;border-radius:4px;padding:1px 7px;font-size:.92em}.belts-screen{justify-content:center;align-items:center;gap:20px}.logo{text-align:center}.logo-main{letter-spacing:.25em;color:var(--fg);text-shadow:0 0 24px #7fffd473,4px 4px #0d3b33;font-size:88px;font-weight:700}.logo-sub{color:var(--accent);letter-spacing:.3em;margin-top:6px}.logo-desc{color:var(--dim);text-align:center;line-height:1.7}.belt-cards{gap:18px;margin-top:8px;display:flex}.belt-card{background:var(--panel);cursor:pointer;border:1px solid #223142;border-radius:10px;flex-direction:column;gap:10px;width:250px;padding:16px;transition:transform .15s,border-color .15s,box-shadow .15s;display:flex}.belt-card:hover:not(.locked){border-color:var(--accent);transform:translateY(-4px);box-shadow:0 8px 28px #7fffd426}.belt-card.locked{opacity:.42;cursor:default;filter:grayscale(.7)}.belt-head{align-items:center;gap:10px;display:flex}.belt-key{background:var(--panel2);color:var(--gold);border:1px solid #33465a;border-radius:4px;padding:1px 8px}.belt-name{font-size:22px;font-weight:700}.belt-white .belt-name{color:#f2f5f0}.belt-yellow .belt-name{color:var(--gold)}.belt-black .belt-name{color:#b48cff}.belt-count{color:var(--dim);margin-left:auto;font-size:12px}.belt-tagline{color:var(--dim);font-size:12px}.belt-teaches{flex-wrap:wrap;gap:5px;display:flex}.belt-times{gap:14px;display:flex}.belt-times .label{color:var(--dim);font-size:10px;display:block}.belt-times .value{font-size:20px}.belt-times .value.has-pb{color:var(--accent)}.spark{min-height:52px}.spark-empty{color:var(--dim);padding-top:12px;font-size:11px}.spark-label{color:var(--dim);font-size:10px}.belt-cta{color:var(--dim);border-top:1px dashed #223142;padding-top:8px;font-size:11px}.belts-help{color:var(--dim);font-size:12px}.run-screen{gap:12px}.hud{background:var(--panel);border:1px solid #223142;border-radius:8px;align-items:baseline;gap:22px;padding:10px 16px;display:flex}.hud-belt{color:var(--gold);font-weight:700}.hud-timer{color:var(--fg);min-width:120px;font-size:30px}.hud-kills{color:var(--accent)}.hud-mode{color:var(--dim);margin-left:auto}.hud-mode.insert{color:var(--gold)}.hud-hint{color:var(--dim);font-size:13px}.run-main{flex:1;gap:14px;min-height:0;display:flex}.editor-wrap{background:var(--panel);border:1px solid #223142;border-radius:8px;flex:1;padding:18px 12px;transition:box-shadow .2s;position:relative;overflow:hidden}.editor-wrap.locked{box-shadow:inset 0 0 0 3px var(--danger)}.editor-wrap.locked:after{content:"FROZEN";color:var(--danger);letter-spacing:.3em;font-weight:700;animation:.4s infinite alternate blink;position:absolute;top:8px;right:14px}@keyframes blink{0%{opacity:1}to{opacity:.3}}.editor{z-index:2;font-size:15px;line-height:1.55;position:relative}.line{white-space:pre;height:1.55em}.lnum{color:#3a4a55;-webkit-user-select:none;user-select:none;padding-right:12px}.lnum.cur{color:var(--gold)}.ch{width:1ch;display:inline-block;position:relative}.ch.cursor{background:var(--accent);color:#06231c;border-radius:2px;box-shadow:0 0 10px #7fffd4cc}.ch.caret{box-shadow:inset 2px 0 0 var(--gold)}.ch.bug{color:var(--bug);text-shadow:0 0 8px #ff5d7ae6;font-weight:700;animation:.55s infinite alternate bug-pulse}@keyframes bug-pulse{0%{transform:translateY(0)}to{text-shadow:0 0 14px #ff5d7a;transform:translateY(-1.5px)}}.ghost-cursor{z-index:1;background:#6db8ff57;border-radius:2px;outline:1px solid #6db8ffbf;transition:transform 90ms linear;position:absolute;top:18px;left:12px;box-shadow:0 0 12px #6db8ff8c}.ghost-trail{z-index:1;background:#6db8ff33;border-radius:2px;animation:.9s forwards trail-fade;position:absolute;top:18px;left:12px}@keyframes trail-fade{to{opacity:0}}.fx-layer{pointer-events:none;z-index:3;position:absolute;inset:18px 12px}.side{background:var(--panel);border:1px solid #223142;border-radius:8px;flex-direction:column;gap:10px;width:230px;min-height:0;padding:14px;display:flex}.side-title{color:var(--ghost);border-bottom:1px solid #223142;padding-bottom:8px;font-size:13px}.race-status{color:var(--dim);min-height:22px;font-size:16px}.race-status.ahead{color:var(--accent)}.race-status.behind{color:var(--bug)}.splits{flex:1;margin:0;padding:0;list-style:none;overflow-y:auto}.split{gap:8px;padding:2px 0;font-size:13px;display:flex}.split-idx{color:var(--dim);width:34px}.split-time{color:var(--fg)}.split-delta{margin-left:auto}.split-delta.ahead{color:var(--accent)}.split-delta.behind{color:var(--bug)}.race-bar{background:var(--panel);border:1px solid #223142;border-radius:6px;height:12px;position:relative;overflow:hidden}.race-me,.race-ghost{transition:width .25s;position:absolute;top:0;bottom:0;left:0}.race-me{background:linear-gradient(90deg, transparent, var(--accent));height:50%}.race-ghost{background:linear-gradient(90deg, transparent, var(--ghost));top:50%}.fx-shake{animation:.4s shake}@keyframes shake{10%,90%{transform:translate(-2px,1px)}30%,70%{transform:translate(4px,-2px)}50%{transform:translate(-5px,2px)}}.penalty-flash{animation:.5s penalty}@keyframes penalty{0%{box-shadow:inset 0 0 120px #ff4444b3}to{box-shadow:none}}.fx-slash{background:linear-gradient(90deg, transparent, #fff, var(--accent), transparent);transform-origin:0;z-index:4;height:3px;animation:.42s ease-out forwards slash;position:absolute;transform:rotate(-12deg)scaleX(0)}@keyframes slash{20%{opacity:1;transform:rotate(-12deg)scaleX(1)}to{opacity:0;transform:rotate(-12deg)scaleX(1.05)}}.fx-particle{background:var(--accent);border-radius:50%;width:4px;height:4px;animation:.65s ease-out forwards particle;position:absolute}@keyframes particle{to{transform:translate(var(--dx), var(--dy));opacity:0}}.fx-float{z-index:5;font-size:15px;font-weight:700;animation:1.1s ease-out forwards float-up;position:absolute}.fx-float.ahead{color:var(--accent);text-shadow:0 0 8px #7fffd4b3}.fx-float.behind{color:var(--bug)}@keyframes float-up{to{opacity:0;transform:translateY(-34px)}}.fx-toast{border:1px solid var(--bug);color:var(--bug);opacity:0;z-index:6;white-space:nowrap;background:#2a1218;border-radius:6px;padding:7px 16px;transition:opacity .2s;position:absolute;bottom:20px;left:50%;transform:translate(-50%)}.fx-toast.show{opacity:1}.overlay{z-index:50;justify-content:center;align-items:center;display:none;position:fixed;inset:0}.overlay.show{display:flex}.overlay.countdown{color:var(--fg);text-shadow:0 0 30px #7fffd499;letter-spacing:.2em;background:#06090d99;font-size:72px;font-weight:700}.overlay.finish{background:#06090dd1}.finish-box{text-align:center;background:var(--panel);border:1px solid #33465a;border-radius:12px;flex-direction:column;gap:12px;padding:34px 60px;animation:.3s ease-out rise;display:flex}@keyframes rise{0%{opacity:0;transform:translateY(16px)}}.finish-title{color:var(--dim);letter-spacing:.5em}.finish-time{color:var(--fg);font-size:58px}.finish-delta{font-size:20px}.finish-delta.ahead{color:var(--accent)}.finish-delta.behind{color:var(--bug)}.pb-stamp{color:var(--gold);border:3px solid var(--gold);text-shadow:0 0 12px #ffd75eb3;border-radius:8px;align-self:center;padding:6px 18px;font-size:22px;font-weight:700;animation:.35s cubic-bezier(.2,2.4,.4,1) .25s backwards stamp;transform:rotate(-6deg)}@keyframes stamp{0%{opacity:0;transform:rotate(-6deg)scale(2.4)}}.finish-stats{color:var(--dim);font-size:13px}.finish-keys{color:var(--dim);margin-top:8px;font-size:13px}.hud-quit{color:#3a4a55;font-size:11px}.bug-tag{z-index:4;border:1px solid var(--bug);color:var(--bug);white-space:nowrap;pointer-events:none;background:#2a1218;border-radius:4px;padding:1px 8px;font-size:12px;font-weight:700;animation:.7s ease-in-out infinite alternate tag-bob;position:absolute;top:18px;left:12px}.bug-tag:after{content:"";border:5px solid #0000;border-top-color:var(--bug);border-bottom:none;position:absolute;bottom:-5px;left:10px}@keyframes tag-bob{0%{margin-top:0}to{margin-top:-3px}}.side-teaches{border-bottom:1px solid #223142;flex-wrap:wrap;align-items:center;gap:5px;padding-bottom:10px;display:flex}.side-teaches-label{width:100%;color:var(--dim);font-size:10px}.overlay.howto{background:#06090dd9}.howto-box{background:var(--panel);border:1px solid #33465a;border-radius:12px;flex-direction:column;gap:16px;max-width:640px;padding:30px 40px;line-height:1.9;animation:.3s ease-out rise;display:flex}.howto-title{color:var(--gold);letter-spacing:.5em;text-align:center;font-size:20px}.howto-step{font-size:14px}.howto-num{background:var(--panel2);text-align:center;width:22px;height:22px;color:var(--accent);border:1px solid #33465a;border-radius:50%;margin-right:10px;font-size:12px;line-height:22px;display:inline-block}.howto-bug{color:var(--bug);text-shadow:0 0 8px #ff5d7acc;font-weight:700}.howto-ghost{color:var(--ghost);text-shadow:0 0 8px #6db8ffb3;font-weight:700}.howto-warn{color:var(--dim);border-top:1px dashed #223142;padding-top:12px;font-size:12px}.howto-go{text-align:center;color:var(--accent);animation:.9s infinite alternate blink}.mode-divider{color:var(--dim);letter-spacing:.4em;font-size:11px}.outbreak-card{border-color:#3a2233;width:520px}.outbreak-card .belt-name{color:var(--bug);text-shadow:0 0 10px #ff5d7a80}.outbreak-card:hover{border-color:var(--bug)!important;box-shadow:0 8px 28px #ff5d7a2e!important}.hp-bar{background:#1a1016;border:1px solid #442231;border-radius:6px;align-self:center;width:180px;height:12px;overflow:hidden}.hp-fill{background:linear-gradient(90deg, #2e8f6f, var(--accent));width:100%;height:100%;transition:width .25s}.hp-fill.low{background:linear-gradient(90deg, #8f2e2e, var(--danger));animation:.5s infinite alternate blink}.hud-score-wrap{color:var(--dim);font-size:12px}.hud-score{color:var(--gold);font-size:20px}.hud-combo{color:var(--gold);min-width:100px;font-weight:700}.hud-phase{color:var(--bug);letter-spacing:.2em;font-size:12px}.tag-layer{z-index:4}.bug-tag.fuse{border-color:var(--accent);color:var(--accent);flex-direction:column;gap:2px;animation:none;display:flex}.bug-tag.fuse:after{border-top-color:var(--accent)}.fuse-bar{background:#1a2530;border-radius:2px;min-width:26px;height:3px;overflow:hidden}.fuse-fill{background:var(--accent);height:100%;transition:width .2s linear}.bug-tag.fuse.fuse-warn{border-color:var(--gold);color:var(--gold)}.bug-tag.fuse.fuse-warn:after{border-top-color:var(--gold)}.bug-tag.fuse.fuse-warn .fuse-fill{background:var(--gold)}.bug-tag.fuse.fuse-danger{border-color:var(--danger);color:var(--danger);animation:.25s infinite alternate blink}.bug-tag.fuse.fuse-danger:after{border-top-color:var(--danger)}.bug-tag.fuse.fuse-danger .fuse-fill{background:var(--danger)}.editor-wrap.danger{box-shadow:inset 0 0 40px #ff44441f}.line.junk-line .ch{color:var(--bug)}.fx-float.closecall{color:var(--gold);text-shadow:0 0 14px #ffd75ee6;font-size:19px}.gameover-title{color:var(--danger);letter-spacing:.4em}
