@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;700;900&display=swap";:root{color-scheme:dark;--black: #050708;--lime: #b7ff00;--acid: #dfff2f;--wolf: #f2f5eb;--danger-low: #b7ff00;--danger-mid: #ffdd00;--danger-high: #ff3c3c}*{box-sizing:border-box}html,body{margin:0;min-height:100%;overflow:hidden;background:radial-gradient(circle at 50% 18%,#142118,#050708 52%,#010202);color:var(--wolf);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,a{-webkit-tap-highlight-color:transparent}.page{min-height:100dvh;width:100vw;display:grid;place-items:center;padding:max(10px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}.game-frame{position:relative;width:min(100vw - 20px,calc((100dvh - 20px)*.5625));aspect-ratio:9 / 16;max-height:calc(100dvh - 20px);overflow:hidden;background:#050708;border:1px solid rgba(183,255,0,.22);box-shadow:0 24px 90px #000000b8,0 0 46px #b7ff001f}#game-root,#game-root canvas{display:block;width:100%;height:100%}.ui-overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:28px;pointer-events:none;background:radial-gradient(circle at 50% 28%,rgba(183,255,0,.12),transparent 27%),linear-gradient(180deg,#05070847,#050708d6)}.ui-overlay.is-visible{display:flex;pointer-events:auto}.menu-panel{display:none;width:min(100%,410px);text-align:center}.menu-panel.is-active{display:block}.hud-framed{position:relative;--hud-bevel: 16px;--hud-edge: rgba(183, 255, 0, .55);padding:24px 20px 22px;background:var(--hud-edge);clip-path:polygon(var(--hud-bevel) 0,calc(100% - var(--hud-bevel)) 0,100% var(--hud-bevel),100% calc(100% - var(--hud-bevel)),calc(100% - var(--hud-bevel)) 100%,var(--hud-bevel) 100%,0 calc(100% - var(--hud-bevel)),0 var(--hud-bevel))}.hud-framed:before{content:"";position:absolute;inset:1.5px;background:#050708f0;clip-path:polygon(var(--hud-bevel) 0,calc(100% - var(--hud-bevel)) 0,100% var(--hud-bevel),100% calc(100% - var(--hud-bevel)),calc(100% - var(--hud-bevel)) 100%,var(--hud-bevel) 100%,0 calc(100% - var(--hud-bevel)),0 var(--hud-bevel));z-index:-1}.hud-framed:after{content:"";position:absolute;top:0;left:var(--hud-bevel);right:var(--hud-bevel);height:2px;background:linear-gradient(90deg,transparent,var(--hud-edge),transparent);pointer-events:none}#game-over-panel .result-title,#victory-panel .result-title{margin:2px auto 6px;max-width:100%;padding:0 6px;box-sizing:border-box;font-size:clamp(.95rem,4.6vw,1.4rem);line-height:1.2;font-weight:900;letter-spacing:.02em;text-transform:uppercase;text-align:center;color:var(--wolf)}.result-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0 14px}.hud-framed .rank-progress{margin:14px auto 16px}.hud-framed .record-callout{margin:0 auto 16px}.result-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px;border-radius:6px;background:#ffffff0b;border:1px solid rgba(255,255,255,.09)}.result-card-icon{width:18px;height:18px;color:#f2f5eb8c}.result-card-label{font-size:.54rem;font-weight:800;letter-spacing:.14em;color:#f2f5eb80;text-transform:uppercase}.result-card-value{font-size:1.12rem;font-weight:950;line-height:1;color:var(--wolf);text-align:center;word-break:break-word}.result-card.is-rank{border-color:#b7ff0073;background:#b7ff0014}.result-card.is-rank .result-card-icon,.result-card.is-rank .result-card-value{color:var(--lime);font-size:clamp(.66rem,2.5vw,.82rem);letter-spacing:.01em;white-space:nowrap;word-break:normal}.secondary-actions{display:flex;justify-content:center;gap:10px;width:min(100%,340px);margin:10px auto 0}.secondary-actions .secondary-button{flex:1;max-width:none}.ranking-sub{margin:0 0 6px;font-size:.62rem;font-weight:700;letter-spacing:.14em;color:#f2f5eb80;text-transform:uppercase}#toast-container{position:absolute;top:88px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;z-index:10}.toast{display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:100px;background:#050708d1;border:1px solid rgba(183,255,0,.46);color:var(--acid);font-family:Inter,ui-sans-serif,sans-serif;font-size:.75rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 0 18px #b7ff0038;animation:toastIn .24s cubic-bezier(.34,1.56,.64,1) both,toastOut .3s ease-in 1.6s both}.toast.is-champion{border-color:#dfff2fb8;background:#1e2805eb;box-shadow:0 0 32px #dfff2f61;font-size:.88rem}.toast.is-danger{border-color:#ff3c3c9e;color:#ff8080;box-shadow:0 0 18px #ff3c3c38}@keyframes toastIn{0%{opacity:0;transform:translateY(-10px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes toastOut{0%{opacity:1}to{opacity:0;transform:translateY(-6px)}}#progress-track{position:absolute;bottom:0;left:0;right:0;height:3px;display:flex;gap:2px;padding:0 2px;pointer-events:none;z-index:5}.progress-seg{flex:1;height:100%;background:#ffffff14;border-radius:2px;transition:background .4s ease}.progress-seg.is-done{background:var(--lime);box-shadow:0 0 4px #b7ff0099}.progress-seg.is-active{background:var(--acid);animation:segPulse .9s ease-in-out infinite}@keyframes segPulse{0%,to{opacity:1}50%{opacity:.5}}.start-badge{display:inline-block;margin-bottom:18px;padding:5px 14px;border-radius:100px;border:1px solid rgba(183,255,0,.38);color:var(--lime);font-size:.68rem;font-weight:900;letter-spacing:.22em;text-transform:uppercase;animation:badgePulse 2.4s ease-in-out infinite}@keyframes badgePulse{0%,to{box-shadow:0 0 #b7ff0000}50%{box-shadow:0 0 18px #b7ff0052}}.stat-row{display:flex;justify-content:center;gap:24px;margin:14px 0 22px}.stat-item{text-align:center}.stat-value{display:block;font-size:1.35rem;font-weight:900;color:var(--acid);line-height:1}.stat-label{display:block;font-size:.62rem;font-weight:700;letter-spacing:.14em;color:#f2f5eb85;text-transform:uppercase;margin-top:3px}.score-display{margin:6px 0 16px;font-size:clamp(2.8rem,9vh,5.5rem);font-weight:950;color:var(--wolf);line-height:1;text-shadow:0 0 40px rgba(255,60,60,.38)}.score-sub{font-size:.78rem;font-weight:700;color:#f2f5eb85;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px}.reward-title{margin:0 auto 6px;color:var(--acid);font-size:clamp(1.22rem,3.1vh,1.86rem);font-weight:950;letter-spacing:.14em;text-transform:uppercase}.rank-label,.rank-phrase,.rank-progress,.rank-reason{margin:0 auto;max-width:22rem}.rank-label{color:#f2f5eb85;font-size:.62rem;font-weight:950;letter-spacing:.18em;text-transform:uppercase}.rank-phrase{margin-bottom:5px;color:#f2f5ebd1;font-size:.8rem;font-weight:800}.rank-progress,.rank-reason{color:#dfff2fdb;font-size:.68rem;font-weight:900;letter-spacing:.06em;text-transform:uppercase}.rank-reason{margin-bottom:8px;color:#ffdd66e6}.reward-medals{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:min(100%,350px);margin:0 auto 10px}.reward-medals span{min-height:22px;padding:4px 8px;border:1px solid rgba(183,255,0,.3);border-radius:4px;color:#f2f5ebe6;background:#0507087a;font-size:.62rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.record-callout{display:inline-flex;align-items:center;justify-content:center;min-height:26px;margin:0 0 10px;padding:4px 12px;border:1px solid rgba(183,255,0,.34);border-radius:4px;color:var(--acid);background:#05070880;font-size:.7rem;font-weight:950;letter-spacing:.13em;text-transform:uppercase}.record-form{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:min(100%,340px);margin:0 auto 12px}.record-input,.record-button{min-height:38px;border-radius:4px;font-family:Inter,ui-sans-serif,sans-serif;font-weight:950}.record-input{width:100%;min-width:0;border:1px solid rgba(183,255,0,.32);color:var(--wolf);background:#0507089e;padding:0 10px;text-align:center;letter-spacing:.08em;text-transform:uppercase}.record-button{border:0;padding:0 10px;color:#061008;background:var(--acid);cursor:pointer;font-size:.72rem}.record-button:disabled{opacity:.58;cursor:default}.leaderboard{display:grid;gap:5px;width:min(100%,392px);margin:0 auto 14px;padding:0;list-style:none}.leaderboard li{display:grid;grid-template-columns:30px minmax(70px,1.4fr) minmax(64px,1fr) minmax(64px,auto);align-items:center;gap:8px;min-height:32px;padding:6px 10px;border-radius:4px;color:#f2f5ebd1;background:#ffffff0e;font-size:.68rem;font-weight:800;text-align:left}.leaderboard li strong{text-align:right}.leaderboard.is-ranking{margin-top:6px}.leaderboard li.leaderboard-empty{display:block;text-align:center;color:#f2f5eb99;letter-spacing:.1em;text-transform:uppercase}.leaderboard li span,.leaderboard li strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.leaderboard .leaderboard-header{min-height:22px;color:#f2f5eb7a;background:transparent;font-size:.5rem;letter-spacing:.06em;text-transform:uppercase}.leaderboard strong{color:var(--acid)}.leaderboard li.is-you{color:var(--wolf);background:#b7ff0024;box-shadow:inset 0 0 0 1px #b7ff008c}.leaderboard li.leaderboard-zone-sep{display:block;min-height:0;margin-top:6px;padding:4px 10px;text-align:center;color:var(--lime);background:transparent;font-size:.52rem;font-weight:950;letter-spacing:.16em;text-transform:uppercase}.leaderboard li.leaderboard-gap-note{display:block;min-height:0;margin-top:2px;padding:4px 10px;text-align:center;color:var(--acid);background:transparent;font-size:.62rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase}.victory-score{margin:6px 0 4px;font-size:clamp(2.4rem,7.5vh,4.5rem);font-weight:950;color:var(--acid);line-height:1;text-shadow:0 0 40px rgba(183,255,0,.5);animation:victoryGlow 1.8s ease-in-out infinite}@keyframes victoryGlow{0%,to{text-shadow:0 0 28px rgba(183,255,0,.4)}50%{text-shadow:0 0 56px rgba(183,255,0,.7),0 0 100px rgba(183,255,0,.22)}}.eyebrow{margin:0 0 8px;color:var(--acid);font-size:.72rem;font-weight:900;letter-spacing:.18em}.menu-panel h1,.menu-panel h2{margin:0 0 14px;color:var(--wolf);line-height:.94;text-transform:uppercase;font-weight:950;text-shadow:0 0 26px rgba(183,255,0,.3),0 10px 30px rgba(0,0,0,.92)}.menu-panel h1{font-size:clamp(2.35rem,7.6vh,4.65rem)}.menu-panel h2{font-size:clamp(1.72rem,4.8vh,3rem)}.tagline{margin:0 auto 20px;max-width:27rem;color:#f2f5ebd1;font-size:clamp(.96rem,2.05vh,1.16rem);line-height:1.35}.song-rule{margin:-8px auto 18px;max-width:20rem;color:var(--acid);font-size:.78rem;font-weight:900;letter-spacing:.08em;line-height:1.25;text-transform:uppercase}.primary-button,.music-links a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;max-width:100%;border-radius:4px;font-weight:950;text-decoration:none;cursor:pointer}.primary-button{width:min(100%,286px);border:0;padding:0 18px;color:#061008;background:linear-gradient(135deg,var(--lime),var(--acid));box-shadow:0 0 28px #b7ff0059,0 12px 26px #0000007a}#game-over-panel .primary-button,#victory-panel .primary-button{width:min(100%,340px);margin:0 auto}.start-loader{position:relative;width:min(100%,286px);min-height:44px;margin:0 auto;border-radius:4px;overflow:hidden;background:#0507089e;border:1px solid rgba(183,255,0,.34);display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .28s ease}.start-loader.is-hidden{opacity:0;pointer-events:none}.start-loader-fill{position:absolute;inset:0 auto 0 0;width:0%;background:linear-gradient(135deg,var(--lime),var(--acid));box-shadow:0 0 18px #b7ff0052;transition:width .25s ease}.start-loader-label{position:relative;z-index:1;font-weight:950;font-size:.86rem;letter-spacing:.04em;color:var(--wolf);mix-blend-mode:difference}.primary-button.is-hidden{display:none}.music-links{display:grid;gap:8px;width:min(100%,300px);margin:12px auto 0}.music-links a{border:1px solid rgba(183,255,0,.34);color:var(--wolf);background:#05070894}.ui-overlay:has(#pause-panel.is-active){background:radial-gradient(circle at 50% 26%,rgba(183,255,0,.1),transparent 30%),linear-gradient(180deg,#0507089e,#050708eb)}.pause-actions{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:22px}.pause-divider{width:min(100%,286px);height:1px;background:linear-gradient(90deg,transparent,rgba(183,255,0,.28),transparent)}.pause-secondary-group{display:grid;gap:10px;width:min(100%,286px)}.secondary-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;width:100%;padding:0 18px;border:1px solid rgba(183,255,0,.34);border-radius:4px;font-weight:950;letter-spacing:.04em;color:var(--wolf);background:#05070894;cursor:pointer;transition:border-color .18s ease,background .18s ease,color .18s ease}.secondary-button:hover,.secondary-button:focus-visible{border-color:#b7ff0099;background:#050708bd}.secondary-button.is-exit{border-color:#ff6a1a75;color:#ff9d6b}.secondary-button.is-exit:hover,.secondary-button.is-exit:focus-visible{border-color:#ff6a1acc;background:#241006a8;color:#ff6a1a}