:root{color:#f6f1e7;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--bg:#070b14;--bg-deep:#05070d;--text:#f6f1e7;--muted:#f6f1e7a8;--crimson:#ff2b3a;--gold:#ffd25a;--line:#f6f1e724;background:#05070d;font-family:Noto Sans KR,Noto Sans CJK KR,Apple SD Gothic Neo,Malgun Gothic,WenQuanYi Micro Hei,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg-deep);overscroll-behavior:none;-webkit-user-select:none;user-select:none;height:100%;margin:0;overflow:hidden}button,p,h1,h2,h3{margin:0}button,a{font:inherit}#app{place-items:center;min-height:100dvh;display:grid}.frame{background:radial-gradient(90% 42% at 50% 100%, #ff2b3a2e, transparent 60%), radial-gradient(70% 30% at 50% 0%, #ffd25a14, transparent 55%), var(--bg);width:min(100vw,56.25dvh);height:100dvh;position:relative;overflow:hidden;box-shadow:0 0 0 1px #f6f1e714}.screen{padding:calc(18px + env(safe-area-inset-top)) 18px calc(16px + env(safe-area-inset-bottom));flex-direction:column;gap:12px;display:flex;position:absolute;inset:0}.screen[hidden],.overlay[hidden],.judge[hidden],.big-combo[hidden],.wait-hint[hidden],.record[hidden],.unlock[hidden]{display:none!important}.title-top{flex-direction:column;gap:14px;display:flex}h1{align-items:center;gap:12px;display:flex}.mark{background:var(--crimson);color:#fff8ef;letter-spacing:-.04em;border-radius:8px;place-items:center;width:84px;height:58px;font-family:Impact,Arial Black,sans-serif;font-size:40px;display:grid}.name{letter-spacing:-.05em;font-size:40px;font-weight:800}.tag,.body,.blurb{color:var(--muted);white-space:pre-line;font-size:16px;line-height:1.45}.face-row{gap:10px;margin-top:8px;display:flex}.face-row img,.song-face{object-fit:contain;background:#ffd25a14;border-radius:50%;width:64px;height:64px;box-shadow:0 8px 18px #00000059}.title-bottom,.select-foot,.result{flex-direction:column;align-items:center;gap:8px;display:flex}.preview{background:linear-gradient(var(--gold), var(--crimson)) center / 78% 2px no-repeat;flex:1;grid-template-columns:repeat(4,1fr);align-items:center;min-height:140px;padding:0 8px;display:grid}.preview span{aspect-ratio:1;border:2px solid #ffd25acc;border-radius:50%;width:62%;margin:0 auto;box-shadow:0 0 16px #ff2b3a47,inset 0 0 12px #ffd25a1f}.meta,.kicker{color:var(--muted);font-size:13px}.kicker{letter-spacing:.08em;font-weight:700}.start,.primary,.ghost{appearance:none;letter-spacing:-.03em;border:0;border-radius:14px;width:min(100%,280px);height:52px;font-size:18px;font-weight:800}.start,.primary{color:#fff8ef;background:var(--crimson);box-shadow:inset 0 -3px #00000047}.ghost{color:var(--text);background:0 0;border:1px solid #ffd25a8c}.start:active,.primary:active,.ghost:active{transform:translateY(1px)}.start:disabled,.primary:disabled,.ghost:disabled{opacity:.45}.tcg-banner{color:var(--gold);letter-spacing:.04em;background:#141008b8;border:1px solid #ffd25a73;border-radius:999px;align-items:center;padding:6px 12px;font-size:12px;font-weight:800;text-decoration:none;display:inline-flex}.sound,.text{appearance:none;color:var(--text);border:1px solid var(--line);background:#070b14b8;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700}.sound{z-index:7;top:calc(12px + env(safe-area-inset-top));position:absolute;right:12px}.select-head,.hud{justify-content:space-between;align-items:center;gap:8px;padding-right:78px;display:flex}.select-head h2,.result h2,.overlay h2{letter-spacing:-.05em;font-size:28px}.song-list{flex-direction:column;flex:1;gap:10px;min-height:0;padding-bottom:8px;display:flex;overflow:auto}.song-card{border:1px solid var(--line);background:#10182aeb;border-radius:16px;grid-template-columns:64px 1fr auto;align-items:center;gap:12px;padding:12px;display:grid}.song-card.locked{opacity:.72}.song-copy{flex-direction:column;gap:2px;min-width:0;display:flex}.song-copy h3{letter-spacing:-.04em;font-size:18px}.blurb{font-size:13px}.lock{color:var(--gold);font-size:12px;font-weight:700}.song-card .primary,.song-card .ghost{width:72px;height:42px;font-size:15px}.stars{gap:2px;font-size:16px;display:flex}.star{color:#f6f1e747}.star.on{color:var(--gold)}.play{gap:6px;padding-left:0;padding-right:0}.hud,.combo-line,.progress{padding-left:14px;padding-right:14px}.hud{padding-right:92px}.play-title{letter-spacing:-.04em;font-size:18px;font-weight:800}.hud-score{text-align:right}.score,.result-score{color:var(--gold);font-variant-numeric:tabular-nums;letter-spacing:-.04em;font-size:22px;font-weight:800}.combo-line{color:var(--muted);font-size:13px}.combo-line strong{color:var(--text);font-size:16px}.progress{background:#f6f1e714;border-radius:999px;height:4px;margin:0 14px;padding:0;overflow:hidden}.progress-bar{background:linear-gradient(90deg, var(--crimson), var(--gold));width:0;height:100%;display:block}.playfield{flex:1;min-height:0;margin-top:4px;position:relative}.lanes{height:100%;display:flex}.lane{color:inherit;touch-action:none;background:0 0;border:0;flex:1;padding:0;position:relative}.lane+.lane{box-shadow:inset 1px 0 #f6f1e714}.lane:nth-child(odd){background:#ffffff04}.lane.pressed{background:#ffd25a14}.receptor{aspect-ratio:1;pointer-events:none;border:2px solid #ffd25ae6;border-radius:50%;width:74%;position:absolute;bottom:18px;left:13%;box-shadow:0 0 16px #ff2b3a59,inset 0 0 12px #ffd25a29}.lane.pressed .receptor{background:#ffd25a29;transform:scale(.96)}.key-hint{text-align:center;color:#f6f1e773;pointer-events:none;font-size:11px;position:absolute;bottom:0;left:0;right:0}.note{aspect-ratio:1;pointer-events:none;will-change:transform;width:74%;position:absolute;top:0;left:13%}.note img{object-fit:contain;filter:drop-shadow(0 8px 10px #00000073);border-radius:50%;width:100%;height:100%}.note.hit{opacity:0;transition:opacity .18s linear}.note.missed{opacity:.25;filter:grayscale(.7)}.hit-line{background:linear-gradient(90deg, transparent, var(--gold), var(--crimson), var(--gold), transparent);pointer-events:none;opacity:.85;height:2px;position:absolute;bottom:52px;left:10px;right:10px}.judge{text-align:center;letter-spacing:-.04em;pointer-events:none;text-shadow:0 3px #00000059;font-size:34px;font-weight:800;animation:.45s ease-out pop;position:absolute;top:30%;left:0;right:0}.judge.perfect{color:var(--gold)}.judge.good{color:#d7ecff}.judge.miss{color:var(--crimson)}.big-combo{text-align:center;color:var(--gold);pointer-events:none;text-shadow:0 4px #00000059;font-size:42px;font-weight:800;position:absolute;top:40%;left:0;right:0}.wait-hint{text-align:center;color:var(--muted);pointer-events:none;font-size:15px;position:absolute;top:22%;left:16px;right:16px}.overlay{z-index:5;background:#070b14f7;flex-direction:column;justify-content:center;align-items:center;gap:10px;padding:24px;display:flex;position:absolute;inset:0}.result{text-align:center;background:#070b14f0;justify-content:center}.result-score{font-size:36px}.rank{letter-spacing:.08em;font-size:18px;font-weight:800}.record{color:var(--crimson);letter-spacing:.08em;font-weight:800}.unlock{color:var(--gold);font-weight:800}.rotate{z-index:8;text-align:center;background:var(--bg);place-items:center;padding:24px;font-size:20px;font-weight:800;display:none;position:absolute;inset:0}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}@keyframes pop{0%{opacity:0;transform:scale(1.2)translateY(8px)}to{opacity:1;transform:none}}@media (pointer:coarse){.key-hint{display:none}}@media (orientation:landscape) and (max-height:520px){.rotate{display:grid}}