:root{--bg: #FFF5F0;--surface: #FFFFFF;--border: rgba(0,0,0,.08);--shadow: 0 4px 24px rgba(0,0,0,.1);--shadow-lg: 0 8px 40px rgba(0,0,0,.14);--ink: #1A1A2E;--muted: #6B7280;--accent: #FF4757;--success: #00B894;--fail: #FF4757;--font: "Nunito", system-ui, sans-serif;--radius: 20px;--nc0: #FF4757;--nc1: #FF6348;--nc2: #FFA502;--nc3: #ECCC68;--nc4: #7BED9F;--nc5: #2ED573;--nc6: #00B894;--nc7: #1E90FF;--nc8: #5352ED;--nc9: #A29BFE;--nc10: #FD79A8;--nc11: #E84393}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font);color:var(--ink);background:var(--bg)}#app{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bg)}#app canvas{display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:1}.screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;display:flex;flex-direction:column;align-items:center;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch}.screen.hidden{display:none}.home-hero{display:flex;flex-direction:column;align-items:center;padding-top:clamp(40px,10vh,80px);padding-bottom:24px}.home-logo{font-size:clamp(2.8rem,10vw,5rem);font-weight:900;letter-spacing:-.03em;line-height:1}.logo-pitch{color:var(--ink)}.logo-smash{background:linear-gradient(135deg,#ff4757,#ff8c42,#ffa502);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-left:.12em}.home-tagline{margin-top:10px;font-size:clamp(.95rem,2.5vw,1.15rem);font-weight:600;color:var(--muted);text-align:center;padding:0 24px}.home-buttons{display:flex;flex-direction:column;gap:14px;width:100%;max-width:420px;padding:0 24px}.big-btn{display:flex;align-items:center;gap:14px;padding:18px 22px;border-radius:var(--radius);border:none;cursor:pointer;text-align:left;transition:transform .12s,box-shadow .12s;width:100%;font-family:var(--font)}.big-btn:active{transform:scale(.97)}.btn-primary{background:linear-gradient(135deg,#ff4757,#ff6348);color:#fff;box-shadow:0 6px 24px #ff475759}.btn-primary:hover{box-shadow:0 8px 32px #ff475773;transform:translateY(-2px)}.btn-secondary{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);border:2px solid var(--border)}.btn-secondary:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}.btn-outline{background:var(--surface);color:var(--ink);box-shadow:var(--shadow);border:2px solid var(--border)}.btn-outline:hover{box-shadow:var(--shadow-lg);transform:translateY(-1px)}.btn-icon{font-size:2rem;flex-shrink:0}.btn-text{display:flex;flex-direction:column;gap:2px}.btn-label{font-size:1.1rem;font-weight:800;line-height:1.2}.btn-sub{font-size:.82rem;font-weight:600;opacity:.75}.home-status{margin-top:16px;font-size:.88rem;color:var(--fail);font-weight:600;min-height:1.2em;text-align:center}.nav-bar{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 16px 0;flex-shrink:0}.nav-title{font-size:1.15rem;font-weight:800;color:var(--ink)}.back-btn{background:none;border:none;font-family:var(--font);font-size:.92rem;font-weight:700;color:var(--muted);cursor:pointer;padding:6px 4px;border-radius:8px;min-width:70px;text-align:left;transition:color .15s}.back-btn:hover{color:var(--ink)}.phase-badge{font-size:.78rem;font-weight:800;padding:4px 12px;border-radius:999px;letter-spacing:.05em;text-transform:uppercase}.badge-learn{background:#2ed57326;color:#00a854}.badge-test{background:#ffa50226;color:#c47f00}.badge-smash{background:#ff47571f;color:#c52535}.level-grid{width:100%;max-width:500px;padding:16px 20px 40px;display:flex;flex-direction:column;gap:12px}.level-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:16px;background:var(--surface);box-shadow:var(--shadow);border:2px solid transparent;cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .15s;position:relative;overflow:hidden}.level-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:16px 0 0 16px}.level-card:not(.locked):hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.level-card:not(.locked):active{transform:scale(.98)}.level-card.locked{opacity:.55;cursor:not-allowed}.level-number{font-size:1.6rem;font-weight:900;width:36px;text-align:center;flex-shrink:0}.level-info{flex:1}.level-name{font-size:1rem;font-weight:800;color:var(--ink);line-height:1.2}.level-subtitle{font-size:.82rem;font-weight:600;color:var(--muted);margin-top:2px}.level-notes-row{display:flex;gap:4px;margin-top:6px;flex-wrap:wrap}.note-chip{font-size:.68rem;font-weight:800;padding:2px 6px;border-radius:6px;background:#0000000f;color:var(--ink)}.level-status-icon{font-size:1.2rem;flex-shrink:0}.smash-unlock-btn{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:20px;border:none;cursor:pointer;font-family:var(--font);width:100%;background:linear-gradient(135deg,#ff4757,#ff8c42,#ffa502);color:#fff;box-shadow:0 6px 28px #ff475766;transition:transform .12s,box-shadow .12s;font-size:2rem}.smash-unlock-btn:hover{transform:translateY(-3px);box-shadow:0 10px 36px #ff475780}.smash-unlock-btn:active{transform:scale(.97)}.smash-btn-text{display:flex;flex-direction:column;gap:3px;text-align:left}.smash-btn-title{font-size:1.15rem;font-weight:900}.smash-btn-sub{font-size:.82rem;font-weight:600;opacity:.85}.learn-body{display:flex;flex-direction:column;align-items:center;padding:16px 24px 40px;width:100%;max-width:480px;flex:1;gap:18px}.step-dots{display:flex;gap:8px;justify-content:center}.step-dot{width:10px;height:10px;border-radius:50%;background:var(--border);transition:background .2s,transform .2s}.step-dot.done{background:var(--success)}.step-dot.active{background:var(--accent);transform:scale(1.3)}.learn-note-card{width:100%;max-width:320px;padding:32px 24px;border-radius:24px;background:var(--surface);box-shadow:var(--shadow-lg);text-align:center;border:3px solid transparent;transition:border-color .3s,box-shadow .3s}.learn-note-name{font-size:clamp(3.5rem,15vw,5rem);font-weight:900;line-height:1;margin-bottom:8px}.learn-note-desc{font-size:1rem;font-weight:600;color:var(--muted)}.play-btn{background:linear-gradient(135deg,#ff4757,#ff8c42);color:#fff;border:none;border-radius:999px;font-family:var(--font);font-size:1rem;font-weight:800;padding:12px 28px;cursor:pointer;box-shadow:0 4px 18px #ff475759;transition:transform .12s,box-shadow .12s}.play-btn:hover{transform:translateY(-2px);box-shadow:0 6px 24px #ff475773}.play-btn:active{transform:scale(.97)}.sing-area{width:100%;text-align:center}.sing-prompt{font-size:1rem;font-weight:700;color:var(--muted);margin-bottom:12px}.hold-bar-wrap{width:100%;max-width:280px;height:14px;background:#00000012;border-radius:999px;overflow:hidden;margin:0 auto 10px}.hold-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--success),#00D166);border-radius:999px;transition:width .05s linear}.pitch-label{font-size:1.6rem;font-weight:900;color:var(--muted);min-height:2rem;transition:color .2s}.phase-result{width:100%;max-width:320px;padding:14px 20px;border-radius:16px;font-size:.95rem;font-weight:700;text-align:center}.phase-result.success{background:#00b8941f;color:#00a854}.phase-result.fail{background:#ff47571a;color:#c52535}.phase-result.hidden{display:none}.test-body{display:flex;flex-direction:column;align-items:center;padding:12px 24px 40px;width:100%;max-width:480px;flex:1;gap:16px}.test-progress-wrap{width:100%;display:flex;align-items:center;gap:10px}.test-progress-bar{flex:1;height:8px;background:#00000012;border-radius:999px;overflow:hidden}.test-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#ff4757,#ffa502);border-radius:999px;transition:width .3s ease}.test-q-count{font-size:.82rem;font-weight:700;color:var(--muted);white-space:nowrap}.mystery-card{padding:32px 48px;border-radius:24px;background:var(--surface);box-shadow:var(--shadow-lg);text-align:center}.mystery-icon{font-size:clamp(3.5rem,14vw,5rem);font-weight:900;color:var(--border);line-height:1;margin-bottom:6px}.mystery-label{font-size:1rem;font-weight:700;color:var(--muted)}.test-choose-prompt{font-size:.95rem;font-weight:700;color:var(--muted);text-align:center;margin:0}.test-choices{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;width:100%}.choice-btn{padding:16px 22px;border-radius:16px;border:3px solid transparent;font-family:var(--font);font-size:1.3rem;font-weight:900;color:#fff;cursor:pointer;min-width:70px;transition:transform .1s,box-shadow .1s;box-shadow:0 3px 10px #00000026}.choice-btn:hover:not(:disabled){transform:scale(1.08);box-shadow:0 6px 18px #0003}.choice-btn:active:not(:disabled){transform:scale(.95)}.choice-btn:disabled{cursor:default;opacity:.65}.choice-btn.correct{border-color:#00b894;box-shadow:0 0 0 4px #00b8944d;transform:scale(1.08)}.choice-btn.wrong{border-color:#ff4757;box-shadow:0 0 0 4px #ff475740;opacity:.7}.hud{position:fixed;top:0;left:0;right:0;z-index:20;padding:10px 14px;display:flex;align-items:center;gap:10px;background:#fff5f0eb;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,.06)}.hud.hidden{display:none}.hud-left{display:flex;flex-direction:column;gap:0;min-width:70px}.hud-center{flex:1;text-align:center}.hud-right{display:flex;align-items:center;gap:8px}.smash-timer{font-size:1.3rem;font-weight:900;color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}.smash-timer.danger{color:var(--fail);animation:timer-pulse .5s ease-in-out infinite}@keyframes timer-pulse{0%,to{opacity:1}50%{opacity:.6}}.smash-accuracy{font-size:.72rem;font-weight:700;color:var(--muted)}.smash-score{font-size:1.35rem;font-weight:900;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--ink)}.smash-combo{font-size:.72rem;font-weight:800;color:var(--accent);min-height:1em}.mode-toggle{display:flex;background:#0000000f;border-radius:999px;padding:3px;gap:2px}.mode-btn{background:none;border:none;font-family:var(--font);font-size:.72rem;font-weight:700;color:var(--muted);padding:4px 10px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}.mode-btn.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px #0000001a}.hud-icon-btn{background:none;border:1px solid var(--border);border-radius:10px;padding:6px 9px;font-size:1rem;cursor:pointer;color:var(--muted);font-family:var(--font);transition:background .12s,color .12s}.hud-icon-btn:hover{background:#0000000d;color:var(--ink)}.hud-select{font-family:var(--font);font-size:.75rem;font-weight:600;padding:5px 8px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--ink);cursor:pointer;max-width:120px}.smash-song-row{position:fixed;top:56px;right:14px;z-index:21}.smash-song-row.hidden{display:none}.skip-calib-btn{position:fixed;bottom:40px;left:50%;transform:translate(-50%);z-index:25;background:#ffffffd9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid rgba(0,0,0,.1);border-radius:999px;font-family:var(--font);font-size:.88rem;font-weight:700;color:var(--muted);padding:8px 20px;cursor:pointer;transition:color .15s}.skip-calib-btn:hover{color:var(--ink)}.skip-calib-btn.hidden{display:none}#screen-round-complete{justify-content:center;padding:20px}.result-card{width:100%;max-width:420px;background:var(--surface);border-radius:28px;box-shadow:var(--shadow-lg);padding:28px 24px 24px;display:flex;flex-direction:column;align-items:center;gap:16px}.result-title{font-size:1.6rem;font-weight:900;text-align:center;color:var(--ink)}.result-badge{font-size:1rem;font-weight:800;padding:6px 20px;border-radius:999px;min-height:32px;display:flex;align-items:center}.result-badge.pass{background:#00b89424;color:#00a854}.result-badge.fail{background:#ff47571f;color:#c52535}.result-stats{width:100%;display:flex;flex-direction:column;gap:8px}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid rgba(0,0,0,.05)}.stat-label{font-size:.92rem;font-weight:600;color:var(--muted)}.stat-value{font-size:1rem;font-weight:800;color:var(--ink)}.result-actions{width:100%;display:flex;flex-direction:column;gap:10px;margin-top:4px}.action-btn{width:100%;padding:13px 20px;border-radius:14px;border:none;font-family:var(--font);font-size:1rem;font-weight:800;cursor:pointer;transition:transform .12s,box-shadow .12s}.action-btn.btn-primary{background:linear-gradient(135deg,#ff4757,#ff8c42);color:#fff;box-shadow:0 4px 18px #ff475759}.action-btn.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 24px #ff475773}.action-btn.btn-outline{background:var(--surface);border:2px solid var(--border);color:var(--ink);box-shadow:var(--shadow)}.action-btn.btn-outline:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg)}.action-btn:active{transform:scale(.97)}.action-btn.hidden{display:none}.free-timer{font-size:1.5rem;font-weight:900;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.04em;line-height:1}.free-timer.urgent{color:var(--fail);animation:timer-pulse .5s ease-in-out infinite}.milestone-toast{position:fixed;top:80px;left:50%;transform:translate(-50%);z-index:50;background:#141423eb;color:#fff;font-family:var(--font);font-size:1.1rem;font-weight:800;padding:12px 28px;border-radius:999px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none;text-align:center;white-space:nowrap;animation:milestone-in .3s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes milestone-in{0%{opacity:0;transform:translate(-50%) scale(.7)}to{opacity:1;transform:translate(-50%) scale(1)}}.back-home-btn{font-size:.78rem;font-weight:700;padding:6px 11px;color:var(--ink);white-space:nowrap}.countdown-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;pointer-events:none}.countdown-number{font-family:var(--font);font-size:12rem;font-weight:900;color:#fff;text-shadow:0 0 60px rgba(0,0,0,.35),0 4px 20px rgba(0,0,0,.2);animation:countdown-pop .8s ease-out forwards;line-height:1}@keyframes countdown-pop{0%{transform:scale(1.4);opacity:0}15%{opacity:1}70%{transform:scale(1);opacity:1}to{transform:scale(.8);opacity:0}}.song-end-toast{position:fixed;bottom:32px;left:50%;transform:translate(-50%);z-index:50;background:#1e1e28e0;color:#fff;font-family:var(--font);font-size:.9rem;font-weight:700;padding:10px 22px;border-radius:999px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;animation:toast-in .25s ease-out forwards}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.lyric-banner{position:fixed;bottom:18px;left:50%;transform:translate(-50%);z-index:30;font-family:var(--font);font-size:2rem;font-weight:900;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5),0 0 30px rgba(0,0,0,.25);letter-spacing:.02em;pointer-events:none;white-space:nowrap;transition:opacity .12s}.hidden{display:none!important}