:root{color:#f7fff5;font-family:Pretendard,Apple SD Gothic Neo,Noto Sans KR,system-ui,sans-serif;font-synthesis:none;--cream: #fff7d6;--forest: #173d34;--mint: #85dd9b;--yellow: #ffdc63;background:#102c29}*{box-sizing:border-box}html,body{width:100%;min-height:100%;margin:0;overscroll-behavior:none;background:radial-gradient(circle at 50% 12%,rgba(90,158,119,.48),transparent 40%),linear-gradient(145deg,#0c2323,#1e473a)}body{overflow:hidden;touch-action:manipulation}button{font:inherit}.app{display:grid;min-height:100dvh;place-items:center;padding:14px}.game-shell{position:relative;width:min(1120px,calc(100vw - 28px),calc((100dvh - 28px) * 4 / 3));aspect-ratio:4 / 3;overflow:hidden;border:2px solid rgba(255,247,214,.4);border-radius:28px;background:#5f9c62;box-shadow:0 28px 90px #000c0985,inset 0 0 0 1px #ffffff26;isolation:isolate}.game-shell:after{position:absolute;inset:0;z-index:1;pointer-events:none;content:"";box-shadow:inset 0 0 110px #0d37253d}#gameCanvas{display:block;width:100%;height:100%;outline:none;touch-action:none}.gameplay-ui{visibility:hidden}.game-shell.is-gameplay .gameplay-ui{visibility:visible}.hud{position:absolute;z-index:4;top:clamp(12px,2.2vw,24px);left:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px);display:grid;grid-template-columns:1fr auto auto auto auto;gap:10px;align-items:center;pointer-events:none}.brand-mark,.score-card,.combo-card,.volume-control,.mini-restart{border:1px solid rgba(255,255,255,.28);background:#143b2ec7;box-shadow:0 7px 20px #0d322533;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.volume-control{display:grid;grid-template-columns:auto minmax(48px,86px) 30px;gap:6px;align-items:center;padding:7px 10px;border-radius:15px;color:#f7fff5d1;font-size:9px;font-weight:800;pointer-events:auto}.volume-control input{width:86px;accent-color:var(--yellow);cursor:pointer}.volume-control output{color:var(--cream);text-align:right;font-variant-numeric:tabular-nums}.brand-mark{justify-self:start;display:flex;gap:9px;align-items:center;padding:10px 16px;border-radius:999px;color:var(--cream);font-weight:900;letter-spacing:-.04em}.brand-note{color:var(--yellow);font-size:1.35em}.score-card,.combo-card{display:flex;min-width:94px;flex-direction:column;align-items:center;padding:7px 14px 8px;border-radius:15px;transition:transform .18s,background .18s}.hud-label{color:#efffe9b3;font-size:9px;font-weight:800;letter-spacing:.14em}.score-card strong,.combo-card strong{color:#fff9d9;font-size:clamp(16px,2.2vw,24px);line-height:1.1}.combo-card.is-hot{transform:translateY(-2px) scale(1.04);background:#cd7031e0}.mini-restart{width:44px;height:44px;border-radius:50%;color:#fff;cursor:pointer;font-size:22px;pointer-events:auto}.progress-track{position:absolute;z-index:4;top:0;left:0;right:0;height:5px;background:#0f3a2a59}.progress-fill{width:0;height:100%;border-radius:0 5px 5px 0;background:linear-gradient(90deg,#8bea91,#ffe46e);box-shadow:0 0 12px #aef6a7}.desktop-hint{position:absolute;z-index:4;bottom:18px;left:50%;display:flex;align-items:center;gap:9px;padding:8px 13px;transform:translate(-50%);border-radius:999px;background:#143b2ea3;color:#ffffffe6;font-size:12px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}kbd{padding:3px 8px;border:1px solid rgba(255,255,255,.45);border-radius:5px;background:#ffffff24;box-shadow:0 2px #0000003d;font-family:inherit;font-size:10px;font-weight:900}.timing-feedback{position:absolute;z-index:5;top:25%;left:50%;opacity:0;transform:translate(-50%,10px) scale(.7) rotate(-3deg);color:#fff7a3;font-size:clamp(30px,5.5vw,62px);font-weight:1000;letter-spacing:-.06em;text-shadow:0 4px 0 #c76e3c,0 10px 30px rgba(20,62,36,.4);pointer-events:none}.timing-feedback.good{color:#bfffe0;text-shadow:0 4px 0 #3c8c72,0 10px 30px rgba(20,62,36,.4)}.timing-feedback.early{color:#bfe9ff;text-shadow:0 4px 0 #407aa3,0 10px 30px rgba(20,62,36,.4)}.timing-feedback.late{color:#ffd1a3;text-shadow:0 4px 0 #b66b3f,0 10px 30px rgba(20,62,36,.4)}.timing-feedback.miss{color:#ffe2df;text-shadow:0 4px 0 #b8554f}.timing-feedback.show{animation:feedback-pop .52s ease-out both}.jump-button{position:absolute;z-index:6;bottom:max(16px,env(safe-area-inset-bottom));left:50%;display:none;width:98px;height:72px;transform:translate(-50%);border:3px solid rgba(255,255,255,.7);border-radius:50%;background:linear-gradient(180deg,#ffdf63,#f19745);box-shadow:0 7px #a84f31,0 13px 30px #39251652;color:#5b3521;font-weight:1000;line-height:1;cursor:pointer;touch-action:none}.jump-button span{display:block}.jump-icon{margin-bottom:2px;font-size:22px}.jump-button.is-pressed{transform:translate(-50%,6px) scale(.97);box-shadow:0 2px #a84f31,0 7px 18px #39251652}.overlay{position:absolute;inset:0;z-index:10;display:grid;place-items:center;padding:26px;background:radial-gradient(circle at 50% 42%,rgba(69,134,84,.23),transparent 42%),linear-gradient(135deg,#0d2f29e0,#194732bd);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:opacity .28s ease,visibility .28s ease}.overlay.is-hidden{visibility:hidden;opacity:0;pointer-events:none}.title-overlay{background:linear-gradient(180deg,#0a2a2333,#0a2a2380);-webkit-backdrop-filter:none;backdrop-filter:none}.title-overlay h1{margin-bottom:7%;font-size:clamp(56px,10vw,108px);filter:drop-shadow(0 10px 28px rgba(4,29,23,.46))}.title-prompt{position:absolute;bottom:12%;left:50%;padding:10px 18px;transform:translate(-50%);border:0;border-radius:999px;background:transparent;color:var(--cream);font-size:clamp(11px,1.8vw,16px);font-weight:900;letter-spacing:.14em;text-shadow:0 3px 12px rgba(4,29,23,.7);cursor:pointer;animation:prompt-pulse 1.7s ease-in-out infinite}.title-prompt:focus-visible{outline:3px solid var(--yellow);outline-offset:5px;background:#143b2e9e}.song-select-panel{width:min(700px,94%);padding:clamp(20px,3.5vw,38px);border:1px solid rgba(255,255,255,.25);border-radius:30px;background:#173d34e0;box-shadow:0 22px 60px #051d1766,inset 0 1px #ffffff26;text-align:center}.song-select-panel h2{font-size:clamp(32px,5vw,54px)}.stage-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:24px}.stage-card{position:relative;display:flex;min-height:150px;flex-direction:column;align-items:flex-start;justify-content:center;gap:7px;padding:22px;border:2px solid rgba(255,255,255,.22);border-radius:22px;background:linear-gradient(145deg,#6fbe74c7,#28694ce6);color:#fff;text-align:left;cursor:pointer;transition:transform .16s,border-color .16s,filter .16s}.stage-card.playable:hover,.stage-card.playable:focus-visible{transform:translateY(-3px);border-color:var(--yellow);filter:brightness(1.08);outline:none}.stage-card.locked{background:#24413ac2;color:#ffffff85;cursor:not-allowed}.stage-meta{color:#d0f6d0;font-size:10px;font-weight:900;letter-spacing:.18em}.stage-card strong{font-size:clamp(20px,3vw,30px);letter-spacing:-.05em}.stage-badge{padding:5px 9px;border-radius:999px;background:var(--yellow);color:#4c3921;font-size:9px;font-weight:1000;letter-spacing:.08em}.stage-card.locked .stage-badge{background:#ffffff1f;color:#ffffff9e}.start-card,.result-card{width:min(560px,92%);padding:clamp(24px,4.4vw,48px);border:1px solid rgba(255,255,255,.25);border-radius:34px;background:#173d34e0;box-shadow:0 22px 60px #051d1766,inset 0 1px #ffffff26;text-align:center}.eyebrow{margin:0 0 9px;color:#a6ecb0;font-size:clamp(9px,1.3vw,12px);font-weight:900;letter-spacing:.22em}h1,h2{margin:0;color:var(--cream);font-weight:1000;letter-spacing:-.08em}h1{font-size:clamp(44px,8vw,84px);line-height:.98;text-shadow:0 5px 0 rgba(4,29,23,.32)}h1 span{color:var(--yellow)}.start-copy{margin:16px 0;color:#f6fff1d6;font-size:clamp(13px,2vw,17px);line-height:1.55}.pet-dots{display:flex;justify-content:center;gap:7px;margin-bottom:18px}.pet-dots span{padding:4px 8px;border-radius:999px;background:#87da9921;color:#d5f5d6;font-size:10px;font-weight:700}.primary-button{display:flex;width:min(280px,100%);min-height:58px;margin:0 auto;align-items:center;justify-content:center;gap:14px;border:0;border-radius:18px;background:linear-gradient(180deg,#ffe47a,#ffb451);box-shadow:0 7px #ad663e,0 14px 26px #0b221b52;color:#513722;font-size:17px;font-weight:1000;cursor:pointer;transition:transform .15s,filter .15s}.primary-button:not(:disabled):hover{filter:brightness(1.07);transform:translateY(-2px)}.primary-button:disabled{cursor:wait;filter:saturate(.45);opacity:.7}.secondary-button{margin:15px auto 0;padding:8px 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:#ffffff14;color:#ffffffd1;font-weight:800;cursor:pointer}.secondary-button:focus-visible,.secondary-button:hover{border-color:var(--yellow);outline:none}.load-track{width:min(280px,100%);height:4px;margin:17px auto 0;overflow:hidden;border-radius:999px;background:#ffffff1f}.load-track div{width:0;height:100%;border-radius:inherit;background:#8bea91;transition:width .18s}.instruction{margin:13px 0 0;color:#f3fff099;font-size:11px}.instruction strong{color:#c9f6c8}.result-stars{color:var(--yellow);font-size:24px}.result-card h2{font-size:clamp(36px,6vw,62px)}.result-score{display:flex;flex-direction:column;margin:20px auto 14px;color:#ffffffa3;font-size:12px}.result-score strong{color:var(--yellow);font-size:clamp(38px,6vw,58px)}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}.result-stats div{display:flex;flex-direction:column;padding:10px;border-radius:13px;background:#ffffff14;color:#fff9;font-size:10px}.result-stats strong{color:#fff;font-size:20px}.miss-shake{animation:miss-shake .28s ease-out}@keyframes feedback-pop{0%{opacity:0;transform:translate(-50%,15px) scale(.6) rotate(-3deg)}34%{opacity:1;transform:translate(-50%) scale(1.1) rotate(2deg)}72%{opacity:1;transform:translate(-50%,-5px) scale(1) rotate(0)}to{opacity:0;transform:translate(-50%,-20px) scale(.92)}}@keyframes miss-shake{0%,to{transform:translate(0)}25%{transform:translate(-7px)}52%{transform:translate(6px)}76%{transform:translate(-3px)}}@keyframes prompt-pulse{0%,to{opacity:.58;transform:translate(-50%) scale(.98)}50%{opacity:1;transform:translate(-50%) scale(1)}}@media(pointer:coarse),(max-width:720px){.desktop-hint{display:none}.jump-button{display:block}}@media(max-width:620px){.app{padding:0}.game-shell{width:100vw;max-width:100vw;border:0;border-radius:0}.brand-mark{padding:8px 11px;font-size:12px}.score-card,.combo-card{min-width:62px;padding:5px 8px 6px}.mini-restart{width:36px;height:36px;font-size:18px}.volume-control{grid-column:2 / 5;grid-row:2;justify-self:end;padding:4px 8px}.volume-control input{width:72px}.start-card,.result-card{padding:22px;border-radius:24px}.pet-dots{margin-bottom:13px}.primary-button{min-height:50px}.song-select-overlay{padding:8px}.song-select-panel{max-height:calc(100% - 8px);overflow-y:auto;padding:14px;border-radius:20px}.stage-list{gap:8px;margin-top:10px}.stage-card{min-height:96px;padding:12px;border-radius:15px}}@media(max-height:520px),(max-width:600px){.start-copy,.pet-dots,.instruction{display:none}.start-card,.result-card{max-height:calc(100% - 12px);overflow-y:auto;padding:12px 18px}.overlay{align-items:center;overflow-y:auto;padding:6px}.result-stars{display:none}.result-card h2{font-size:30px}.result-score{margin:5px auto}.result-score strong{font-size:30px}.result-stats{margin-bottom:7px}.result-stats div{padding:4px}.result-stats strong{font-size:16px}.primary-button{min-height:38px}.song-select-panel{max-height:calc(100% - 8px);overflow-y:auto;padding:10px 14px}.song-select-panel h2{font-size:28px}.stage-list{margin-top:8px}.stage-card{min-height:82px;padding:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}