@font-face{font-family:future-glitch;src:url(./future-glitch-CqwNBvXW.ttf) format("truetype");font-display:swap}*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}:root{--lane-0: #ff1a1a;--lane-1: #ff3333;--lane-2: #ff4d4d;--lane-3: #cc0000;--bg: #060d0d;--surface: #0c1a1a;--text: #ffffff;--text-green: #197364;--text-dim: #679890}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:"Press Start 2P",monospace;user-select:none;-webkit-user-select:none}.screen{position:fixed;inset:0;display:none;flex-direction:column}.screen.active{display:flex}.menu-content{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;height:100%;padding:20px;overflow-y:auto}.title-block{display:flex;flex-direction:column;gap:4px;text-align:center;margin-top:80px;margin-bottom:24px}.preheader{color:var(--text-green);font-size:.75rem;letter-spacing:.3em;text-transform:uppercase}.game-title{font-family:future-glitch,"Press Start 2P",monospace;font-size:3.5rem;font-weight:900;letter-spacing:.15em;line-height:1.1;color:#fff;text-shadow:0 0 20px rgba(255,26,26,.6),0 0 40px rgba(255,26,26,.3)}@media screen and (min-width:400px){.game-title{font-size:4.5rem}}.song-list{width:100%;max-width:400px;display:flex;flex-direction:column;gap:8px}.song-card{background:var(--surface);border:2px solid transparent;border-radius:12px;padding:14px 18px;cursor:pointer;transition:all .2s}.song-card.selected{border-color:#ff1a1a;background:#1a0a0a;box-shadow:0 0 20px #ff1a1a26}.song-card .song-name{font-weight:700;font-size:.7rem}.song-card .song-info{font-size:.55rem;color:var(--text-dim);margin-top:2px}.song-card .song-bpm{font-size:.5rem;color:#ff1a1a;margin-top:4px;font-weight:600}.difficulty-selector{display:flex;flex-direction:column;align-items:center;gap:8px}.difficulty-selector label{color:var(--text-dim);text-transform:uppercase;font-size:.5rem;letter-spacing:.2em}.difficulty-buttons{display:flex;gap:8px}.diff-btn{padding:8px 20px;border:2px solid #1a2a2a;border-radius:8px;background:transparent;color:var(--text-dim);font-family:"Press Start 2P",monospace;font-weight:600;font-size:.55rem;cursor:pointer;transition:all .2s}.diff-btn.active{border-color:#ff1a1a;color:#ff1a1a;background:#ff1a1a1a}.start-btn{padding:14px 48px;border:none;border-radius:12px;background:linear-gradient(135deg,#ff1a1a,#c00);color:#fff;font-family:"Press Start 2P",monospace;font-size:.8rem;font-weight:700;letter-spacing:.15em;cursor:pointer;transition:transform .15s,box-shadow .15s;box-shadow:0 4px 20px #ff1a1a4d}.start-btn:active{transform:scale(.96)}.start-btn.secondary{background:var(--surface);box-shadow:none;border:2px solid #1a2a2a}.game-description{color:var(--text-dim);font-size:.75rem;text-align:center;line-height:1.6;max-width:336px}.footer-banner{width:100%;max-width:400px;display:block;margin-top:auto;align-self:center}.game-hud{position:absolute;top:12px;left:0;right:0;margin:auto;width:100%;max-width:400px;display:flex;justify-content:space-between;padding:12px 16px 4px;z-index:10;pointer-events:none}.score{font-size:1rem;font-weight:800;font-variant-numeric:tabular-nums}.combo{font-size:.6rem;font-weight:700;color:#f33;min-height:1.3em}.accuracy{font-size:.6rem;font-weight:600;text-align:right;font-variant-numeric:tabular-nums}.multiplier{font-size:.6rem;font-weight:700;color:#fff;text-align:right;transition:color .3s}.multiplier.multiplier-change{animation:multiplier-pulse .35s ease-out}@keyframes multiplier-pulse{0%{transform:scale(1.6);filter:brightness(2)}50%{transform:scale(1.1)}to{transform:scale(1);filter:brightness(1)}}.combo-progress-wrap{width:60px;height:3px;background:#ffffff14;border-radius:2px;margin-top:4px;margin-left:auto}.combo-progress{height:100%;width:0%;border-radius:2px;transition:width .15s linear,background .3s}.score.score-punch{animation:score-punch .15s ease-out}@keyframes score-punch{0%{transform:scale(1.15)}to{transform:scale(1)}}.progress-bar-container{position:absolute;top:0;left:0;right:0;height:3px;background:#ffffff0d;z-index:10}.progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#ff1a1a,#c00);transition:width .3s linear}#lane-backgrounds{position:absolute;inset:0;display:flex;justify-content:center;z-index:1}#lane-backgrounds .lane{width:100px;max-width:25vw;height:100%;border-left:1px solid rgba(255,255,255,.03);background-image:url(./lane-CmrAvTD2.png);background-repeat:repeat-y}#lane-backgrounds .lane[data-lane="0"]{background-position-y:0%}#lane-backgrounds .lane[data-lane="1"]{background-position-y:80%}#lane-backgrounds .lane[data-lane="2"]{background-position-y:160%}#lane-backgrounds .lane[data-lane="3"]{background-position-y:240%}.pause-btn{position:absolute;bottom:16px;right:16px;background:#ffffff14;border:2px solid rgba(255,255,255,.2);border-radius:12px;color:#fff9;font-size:1rem;cursor:pointer;padding:10px 14px;letter-spacing:.15em;transition:background .2s,border-color .2s;z-index:15}.pause-btn:active{background:#ffffff26;border-color:#fff6}.pause-overlay{position:absolute;inset:0;background:#060d0dbf;z-index:20;display:none;flex-direction:column;align-items:center;justify-content:center;gap:20px}.pause-overlay.active{display:flex}.pause-label{font-size:1.5rem;font-weight:800;letter-spacing:.3em;color:#fff;text-shadow:0 0 20px rgba(255,26,26,.6);margin-bottom:8px}#game-canvas{position:relative;flex:1;width:100%;z-index:10}#character-container{position:absolute;width:400px;height:400px;top:calc(50% - 100px);left:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:5}#character-canvas{width:400px;height:400px}#screen-image,#frame-image{position:absolute;width:400px;height:400px;top:calc(50% - 100px);left:50%;transform:translate(-50%,-50%);pointer-events:none;background-size:100%;background-position:center;background-repeat:no-repeat}#screen-image{background-image:url(./screen-yAF9ONiJ.png);mix-blend-mode:plus-lighter;filter:contrast(1.25);z-index:15}#frame-image{background-image:url(./frame-BCLcNAk1.png);z-index:16}.hit-feedback{position:absolute;left:50%;top:68%;transform:translate(-50%);font-size:.9rem;font-weight:800;pointer-events:none;z-index:20;text-align:center;text-shadow:0 0 10px rgba(255,26,26,.8),0 0 20px rgba(255,26,26,.4);opacity:0;transition:opacity .1s}.hit-feedback.show{opacity:1;animation:feedback-pop .6s ease-out forwards}.hit-feedback.show-miss{opacity:1;animation:feedback-pop-miss .45s ease-out forwards}@keyframes feedback-pop{0%{transform:translate(-50%) scale(.3) translateY(0);opacity:1}35%{transform:translate(-50%) scale(1.5) translateY(-15px);opacity:1}to{transform:translate(-50%) scale(1) translateY(-50px);opacity:0}}@keyframes feedback-pop-miss{0%{transform:translate(-50%) translate(0) scale(1);opacity:1}15%{transform:translate(-50%) translate(-6px) scale(1.1);opacity:1}30%{transform:translate(-50%) translate(5px) scale(1.05);opacity:1}45%{transform:translate(-50%) translate(-4px) scale(1);opacity:.8}60%{transform:translate(-50%) translate(3px) scale(.95);opacity:.6}to{transform:translate(-50%) translate(0) scale(.9) translateY(-20px);opacity:0}}.lane-buttons{position:absolute;left:50%;transform:translate(-50%,-50%);top:78%;max-width:400px;width:100%;display:flex;gap:6px;padding:0 14px;box-sizing:border-box;justify-content:center;z-index:15}.lane-btn{flex:1;max-width:100px;aspect-ratio:4 / 3;border:3px solid;border-radius:16px;background:#060d0d99;font-size:1.8rem;cursor:pointer;transition:background .08s,transform .08s;display:flex;align-items:center;justify-content:center}.lane-btn[data-lane="0"]{border-color:var(--lane-0);color:var(--lane-0)}.lane-btn[data-lane="1"]{border-color:var(--lane-1);color:var(--lane-1)}.lane-btn[data-lane="2"]{border-color:var(--lane-2);color:var(--lane-2)}.lane-btn[data-lane="3"]{border-color:var(--lane-3);color:var(--lane-3)}.lane-btn.pressed{transform:scale(.92)}.lane-btn[data-lane="0"].pressed{background:#ff1a1a4d}.lane-btn[data-lane="1"].pressed{background:#ff33334d}.lane-btn[data-lane="2"].pressed{background:#ff4d4d4d}.lane-btn[data-lane="3"].pressed{background:#cc00004d}.results-content{display:flex;flex-direction:column;align-items:center;gap:12px;height:100%;padding:24px 20px;padding-top:max(24px,env(safe-area-inset-top,24px));padding-bottom:max(24px,env(safe-area-inset-bottom,24px));overflow-y:auto;-webkit-overflow-scrolling:touch}.results-heading{font-size:.75rem;letter-spacing:.15em;color:var(--text-dim);text-align:center}.scorecard{width:100%;max-width:320px;background:var(--surface);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:20px}.scorecard-top{display:flex;gap:12px}.scorecard-grade{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0}.grade{font-size:4.5rem;font-weight:900;line-height:1;background:linear-gradient(160deg,#ff1a1a,#ff4d4d);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 20px rgba(255,26,26,.4))}.grade-label{font-size:.4rem;color:var(--text-dim);letter-spacing:.15em;margin-top:4px}.scorecard-stats{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}.stat-score{display:flex;flex-direction:column;align-items:flex-end}.stat-score-value{font-size:1.25rem;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.2}.stat-label{font-size:.4rem;color:var(--text-dim);letter-spacing:.15em;text-transform:capitalize}.stat-row-pair{display:flex;gap:8px}.stat-small{flex:1;background:var(--surface);border-radius:5px;display:flex;flex-direction:column;align-items:flex-end}.stat-small-value{font-size:.875rem;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.2}.scorecard-hits{display:flex;justify-content:space-between;padding-top:12px;border-top:1px solid rgba(255,255,255,.05)}.hit-count{display:flex;flex-direction:column;align-items:center;gap:4px}.hit-label{font-size:.5rem;font-weight:600;color:var(--text-dim)}.hit-value{font-size:.5rem;font-weight:800}.hit-count.perfect .hit-value{color:#00e680}.hit-count.great .hit-value{color:#3cf}.hit-count.good .hit-value{color:var(--text-dim)}.hit-count.miss .hit-value{color:#f33}.results-actions{display:flex;gap:8px;width:100%;max-width:320px}.results-btn{padding:16px 8px;border:2px solid #1a2a2a;border-radius:10px;background:var(--surface);color:var(--text-dim);font-family:"Press Start 2P",monospace;font-size:.5625rem;font-weight:700;letter-spacing:.04em;line-height:1.4;cursor:pointer;transition:transform .12s,border-color .2s,color .2s;text-align:center}.results-actions .results-btn{flex:1}.results-btn:active{transform:scale(.95)}.results-btn.primary{background:linear-gradient(160deg,#ff1a1a,#c00);border-color:transparent;color:#fff;box-shadow:0 2px 12px #ff1a1a4d}.spotify-section{width:100%;max-width:320px;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:auto;padding-top:40px}.spotify-heading{font-size:.75rem;letter-spacing:.15em;color:var(--text-dim);text-align:center}.spotify-embed{width:100%;flex-shrink:0}.results-footer{display:flex;justify-content:center;width:100%;max-width:320px;padding-top:20px;padding-bottom:24px}.results-btn.footer-btn{padding:14px 32px;font-size:.75rem;letter-spacing:.04em}@media(hover:hover)and (pointer:fine){.lane-btn:after{content:attr(data-key);position:absolute;bottom:4px;font-size:.4rem;color:var(--text-dim)}}