:root{--hp-good: #4ade80;--hp-mid: #facc15;--hp-bad: #ef4444;--bg: #0a0a14;--accent: #a78bfa;--btc: #f7931a}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:#fff;font-family:ui-monospace,JetBrains Mono,monospace;user-select:none}#game{position:fixed;inset:0;width:100vw;height:100vh;display:block}.hidden{display:none!important}#hud{position:fixed;inset:0;pointer-events:none;z-index:10}#hud-top{position:absolute;top:24px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:flex-start}#hp-wrap{display:flex;flex-direction:column;gap:6px;width:320px}#hp-label{font-size:12px;letter-spacing:.2em;color:#94a3b8}#hp-bar{height:18px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:4px;overflow:hidden}#hp-fill{height:100%;width:100%;background:var(--hp-good);transition:width .15s ease-out,background-color .2s}#score-wrap{text-align:right}#score{font-size:36px;font-weight:700;letter-spacing:.05em}#combo{font-size:18px;color:var(--accent);font-weight:600}#judgment{margin-top:6px;font-size:14px;font-weight:600;height:20px;opacity:0;transition:opacity .4s}#judgment.show{opacity:1}#judgment.perfect{color:#fde047}#judgment.great{color:#86efac}#judgment.good{color:#93c5fd}#judgment.miss{color:#f87171}#hp-bar.flash-perfect{animation:flashPerfect .55s ease-out}#hp-bar.flash-good{animation:flashGood .55s ease-out}@keyframes flashPerfect{0%{box-shadow:0 0 #fde04700}20%{box-shadow:0 0 32px 10px #fde047f2;border-color:#fde047}to{box-shadow:0 0 #fde04700}}@keyframes flashGood{0%{box-shadow:0 0 #fb923c00}20%{box-shadow:0 0 28px 8px #fb923ce6;border-color:#fb923c}to{box-shadow:0 0 #fb923c00}}#rope-bubble{position:fixed;transform:translate(-50%,-100%);background:#0a0a14f0;border:3px solid #fde047;color:#fde047;padding:16px 28px 22px;border-radius:18px;text-align:center;text-shadow:0 0 12px rgba(253,224,71,.7);box-shadow:0 0 32px #fde0478c;pointer-events:none;z-index:20;white-space:nowrap;animation:bubblePulse .55s ease-in-out infinite alternate}#rope-bubble:after{content:"";position:absolute;bottom:-12px;left:50%;transform:translate(-50%);width:0;height:0;border-left:12px solid transparent;border-right:12px solid transparent;border-top:14px solid #fde047}#rope-bubble .rope-bubble-line{font-size:18px;font-weight:800;letter-spacing:.18em;margin-bottom:10px}#rope-bubble .rope-bubble-key{display:inline-block;padding:10px 36px;background:linear-gradient(180deg,#fde047,#fbbf24);color:#1a1a1a;border:3px solid #f59e0b;border-radius:10px;box-shadow:0 5px #b45309,0 0 22px #fde047d9;font-size:30px;font-weight:900;letter-spacing:.3em;text-shadow:none;animation:keyPulse .45s ease-in-out infinite alternate}@keyframes bubblePulse{0%{transform:translate(-50%,-100%) scale(1)}to{transform:translate(-50%,-100%) scale(1.05)}}@keyframes keyPulse{0%{transform:translateY(0);box-shadow:0 5px #b45309,0 0 22px #fde047d9}to{transform:translateY(-3px);box-shadow:0 8px #b45309,0 0 32px #fde047}}#lanes-overlay{position:absolute;inset:0}.lane-key{position:absolute;width:64px;height:64px;border:2px solid rgba(255,255,255,.25);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#ffffffb3;background:#0a0a148c;backdrop-filter:blur(4px);transform:translate(-50%,-50%) scale(1);transition:transform .05s ease-out,background .05s,color .05s,border-color .05s;will-change:transform,left,top}.lane-key.active{transform:translate(-50%,-50%) scale(1.18);background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 24px #a78bfa99}#runner-hud{position:fixed;inset:0;pointer-events:none;z-index:10}#runner-top{position:absolute;top:24px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:flex-start;gap:32px}#runner-score-wrap{text-align:left}#runner-score-label{font-size:12px;letter-spacing:.2em;color:#94a3b8;margin-bottom:4px}#runner-score{font-size:38px;font-weight:700;color:var(--btc);letter-spacing:.05em}#runner-gap-wrap{flex:1;max-width:360px}#runner-gap-label{font-size:12px;letter-spacing:.2em;color:#94a3b8;margin-bottom:6px;text-align:right}#runner-gap-bar{height:14px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:4px;overflow:hidden}#runner-gap-fill{height:100%;width:100%;background:var(--hp-good);transition:width .1s linear,background-color .2s}#menu-screen{position:fixed;inset:0;background:radial-gradient(ellipse at top,rgba(167,139,250,.12),transparent 60%),#0a0a14f0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:100;padding:24px}#menu-screen h1{font-size:84px;letter-spacing:.1em;background:linear-gradient(135deg,#a78bfa,#f7931a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}#menu-screen .subtitle{color:#cbd5e1;margin-bottom:32px;font-size:16px}#mode-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,360px));gap:24px;width:100%;max-width:800px}.mode-card{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:28px;background:#ffffff0a;border:2px solid rgba(255,255,255,.1);border-radius:14px;color:#fff;cursor:pointer;font-family:inherit;text-align:left;transition:transform .15s,border-color .15s,background .15s}.mode-card:hover{transform:translateY(-4px);border-color:var(--accent);background:#a78bfa1a}.mode-emoji{font-size:48px;margin-bottom:8px}.mode-title{font-size:22px;font-weight:700;letter-spacing:.05em}.mode-desc{font-size:13px;color:#cbd5e1;line-height:1.5}.mode-keys{margin-top:auto;padding-top:12px;font-size:12px;color:#94a3b8;letter-spacing:.2em}#loading-screen{position:fixed;inset:0;background:#0a0a14eb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;z-index:100}.spinner{width:48px;height:48px;border:4px solid rgba(167,139,250,.2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#loading-text{font-size:14px;letter-spacing:.2em;color:#94a3b8}#end-screen{position:fixed;inset:0;background:#0a0a14d9;backdrop-filter:blur(6px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;z-index:100}#end-screen h1{font-size:64px;letter-spacing:.1em;color:#f87171;text-shadow:0 0 24px rgba(239,68,68,.6)}#end-screen p{color:#cbd5e1}#end-stats{display:flex;gap:48px;margin:8px 0;flex-wrap:wrap;justify-content:center}#end-stats .stat{display:flex;flex-direction:column;align-items:center;gap:4px}#end-stats .label{font-size:12px;letter-spacing:.2em;color:#94a3b8}#end-stats .value{font-size:42px;font-weight:700;color:#fff}#end-actions{display:flex;gap:16px}#restart-btn,#back-menu-btn{padding:14px 32px;font-size:15px;font-weight:700;letter-spacing:.1em;border:none;border-radius:6px;cursor:pointer;font-family:inherit;transition:transform .1s}#restart-btn{background:var(--accent);color:#fff}#back-menu-btn{background:#ffffff1a;color:#fff;border:1px solid rgba(255,255,255,.2)}#restart-btn:hover,#back-menu-btn:hover{transform:scale(1.05)}