:root{
  --bg:#0b0d18;
  --panel:rgba(18,21,38,.92);
  --line:rgba(255,255,255,.12);
  --txt:#eef1ff;
  --dim:#9aa3c7;
  --accent:#4ad9ff;
  --pink:#ff6fb5;
  --gold:#ffd75e;
  --green:#4ef0a6;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg);
  color:var(--txt);
  font-family:"Pretendard","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  touch-action:none;
  overscroll-behavior:none;
}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
.hidden{display:none!important}

/* ---------- 공통 화면 ---------- */
.screen{
  position:fixed;inset:0;z-index:10;
  display:flex;flex-direction:column;align-items:center;
  /* safe center: 내용이 화면보다 길어도 위쪽이 잘리지 않고 스크롤된다 */
  justify-content:safe center;
  overflow-y:auto;
  gap:22px;padding:24px;
  background:radial-gradient(120% 90% at 50% 0%,#1b2145 0%,#0b0d18 65%);
}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:32px 36px;min-width:min(440px,92vw);
  display:flex;flex-direction:column;gap:14px;align-items:stretch;
  box-shadow:0 24px 70px rgba(0,0,0,.55);
  backdrop-filter:blur(14px);
}
.panel h2{font-size:20px;text-align:center;letter-spacing:.04em;margin-bottom:6px}

/* ---------- 로딩 ---------- */
#loading{z-index:20}   /* 곡 전환 중에는 곡 선택 화면 위를 덮는다 */
.loader-ring{
  width:54px;height:54px;border-radius:50%;
  border:3px solid rgba(255,255,255,.14);border-top-color:var(--accent);
  animation:spin .9s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.loader-text{color:var(--dim);font-size:14px;letter-spacing:.06em}
.loader-bar{width:min(320px,70vw);height:4px;border-radius:4px;background:rgba(255,255,255,.1);overflow:hidden}
.loader-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--pink));transition:width .2s}

/* ---------- 곡 선택 ---------- */
.select-head{
  font-size:11px;letter-spacing:.42em;color:var(--dim);
  text-transform:uppercase;margin-bottom:-8px;
}
.song-list{
  display:flex;flex-direction:column;gap:10px;
  width:min(640px,94vw);
}
.song{
  display:flex;gap:16px;align-items:center;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:18px;
  padding:14px 20px 14px 14px;cursor:pointer;font-family:inherit;color:inherit;
  box-shadow:0 14px 44px rgba(0,0,0,.4);transition:.16s;
}
.song:hover{border-color:rgba(255,255,255,.28);transform:translateY(-1px)}
.song.on{
  border-color:hsla(var(--h),90%,68%,.75);
  background:linear-gradient(100deg,hsla(var(--h),80%,55%,.14),var(--panel) 60%);
  box-shadow:0 14px 44px rgba(0,0,0,.45),0 0 0 1px hsla(var(--h),90%,68%,.3);
}
.jacket{
  width:74px;height:74px;flex:none;border-radius:13px;
  background:linear-gradient(145deg,
    hsl(var(--h,318) 55% 34%), hsl(calc(var(--h,318) + 45) 60% 42%) 60%, hsl(calc(var(--h,318) + 90) 70% 55%));
  display:grid;place-items:center;font-size:26px;color:rgba(255,255,255,.9);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}
.song-body{flex:1;min-width:0}
.song-title{font-size:19px;font-weight:800;letter-spacing:.01em}
.song-sub{color:var(--dim);font-size:12px;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.badges{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.badge{
  font-size:11px;letter-spacing:.05em;padding:4px 10px;border-radius:99px;
  background:rgba(255,255,255,.07);border:1px solid var(--line);color:var(--dim);
}
.badge b{color:var(--txt);font-weight:700}
.diff-expert{background:rgba(255,80,120,.16);border-color:rgba(255,80,120,.4);color:#ff9ab5}
.diff-expert b{color:#fff}

.options{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 26px;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:22px 26px;min-width:min(560px,94vw);max-width:min(720px,94vw);
}
.opt{display:flex;flex-direction:column;gap:7px}
.opt label{font-size:12px;color:var(--dim);letter-spacing:.05em;display:flex;justify-content:space-between;align-items:baseline}
.opt output{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.opt small{color:#6b7396;font-size:10.5px;line-height:1.5}
.opt small b{color:var(--dim)}
input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;
  background:rgba(255,255,255,.14);outline:none;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent);cursor:pointer;box-shadow:0 0 0 4px rgba(74,217,255,.18);
}
.segmented{display:flex;gap:6px}
.segmented button{
  flex:1;padding:9px 10px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--dim);
  font-size:12px;font-family:inherit;transition:.15s;
}
.segmented button code{font-size:10px;opacity:.7}
.segmented button.on{background:rgba(74,217,255,.16);border-color:rgba(74,217,255,.5);color:#cdf3ff}
.segmented button:hover{border-color:rgba(255,255,255,.3)}

button.primary{
  padding:14px 54px;border-radius:99px;border:none;cursor:pointer;
  background:linear-gradient(100deg,#39c9ff,#9a6bff 55%,#ff5fa8);
  color:#fff;font-size:16px;font-weight:800;letter-spacing:.12em;font-family:inherit;
  box-shadow:0 10px 32px rgba(120,90,255,.42);transition:.15s;
}
button.primary:hover{transform:translateY(-1px);box-shadow:0 14px 40px rgba(120,90,255,.55)}
button.primary:active{transform:translateY(1px)}
.panel button{
  padding:12px;border-radius:12px;cursor:pointer;font-family:inherit;font-size:14px;
  background:rgba(255,255,255,.06);border:1px solid var(--line);color:var(--txt);transition:.15s;
}
.panel button:hover{background:rgba(255,255,255,.12)}
.hint{color:#6b7396;font-size:11.5px;text-align:center;line-height:1.6}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;z-index:5;pointer-events:none}
.hud-top{
  position:absolute;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 20px;gap:16px;
}
.score{
  font-size:30px;font-weight:800;font-variant-numeric:tabular-nums;
  letter-spacing:.03em;text-shadow:0 2px 14px rgba(0,0,0,.7);
}
.hud-right{display:flex;align-items:center;gap:12px}
.lifebar{width:140px;height:7px;border-radius:99px;background:rgba(255,255,255,.12);overflow:hidden}
.lifebar i{display:block;height:100%;width:100%;border-radius:99px;
  background:linear-gradient(90deg,#4ef0a6,#4ad9ff);transition:width .18s}
#pauseBtn{
  pointer-events:auto;width:34px;height:34px;border-radius:9px;cursor:pointer;
  background:rgba(255,255,255,.08);border:1px solid var(--line);color:var(--txt);font-size:11px;
}
.progress{position:absolute;top:0;left:0;right:0;height:2px;background:rgba(255,255,255,.08)}
.progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--accent),var(--pink))}

#comboWrap{
  position:absolute;left:50%;top:26%;transform:translate(-50%,-50%);
  text-align:center;line-height:1;
}
.combo-label{font-size:11px;letter-spacing:.4em;color:rgba(255,255,255,.5);margin-bottom:4px}
.combo-num{
  font-size:64px;font-weight:900;font-variant-numeric:tabular-nums;
  color:#fff;text-shadow:0 0 26px rgba(120,200,255,.65),0 3px 10px rgba(0,0,0,.6);
}
.combo-num.pop{animation:pop .13s ease-out}
@keyframes pop{0%{transform:scale(1.16)}100%{transform:scale(1)}}

#judgeText{
  position:absolute;left:50%;top:37%;transform:translateX(-50%);
  font-size:26px;font-weight:900;letter-spacing:.14em;opacity:0;
  text-shadow:0 2px 14px rgba(0,0,0,.8);
}
#judgeText.show{animation:jt .42s ease-out}
@keyframes jt{0%{opacity:0;transform:translateX(-50%) scale(.82)}
  18%{opacity:1;transform:translateX(-50%) scale(1.04)}
  70%{opacity:1}100%{opacity:0}}

#autoTag{
  /* 레인이 위쪽까지 차므로 판정선 아래 빈 공간으로 */
  position:absolute;left:50%;bottom:4%;transform:translateX(-50%);
  font-size:12px;letter-spacing:.35em;color:rgba(255,215,94,.85);
  border:1px solid rgba(255,215,94,.35);border-radius:99px;padding:5px 16px;
}

/* ---------- 결과 ---------- */
.result-panel{min-width:min(480px,94vw);align-items:center}
.rank{
  font-size:72px;font-weight:900;line-height:1;
  background:linear-gradient(120deg,#ffe98a,#ff9ad4,#7ad6ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 18px rgba(255,180,240,.35));
}
.res-score{font-size:38px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.res-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;width:100%;margin-top:6px}
.res-grid .r{
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:11px;
  padding:10px 4px;text-align:center;
}
.res-grid span{display:block;font-size:9px;letter-spacing:.08em;color:var(--dim);margin-bottom:5px}
.res-grid b{font-size:19px;font-variant-numeric:tabular-nums}
.r.perfect b{color:#ffe27a}.r.great b{color:#7ef2b6}
.r.good b{color:#7ac6ff}.r.bad b{color:#c39cff}.r.miss b{color:#ff8090}
.res-meta{display:flex;gap:22px;justify-content:center;width:100%;margin-top:4px;flex-wrap:wrap}
.res-meta div{text-align:center}
.res-meta span{display:block;font-size:10px;color:var(--dim);letter-spacing:.06em;margin-bottom:3px}
.res-meta b{font-size:17px;font-variant-numeric:tabular-nums}
.res-actions{display:flex;gap:10px;width:100%;margin-top:12px}
.res-actions button{flex:1}
.res-actions .primary{padding:13px 0;font-size:14px}

@media (max-width:640px){
  .title-card{flex-direction:column;text-align:center;padding:20px}
  .badges{justify-content:center}
  .combo-num{font-size:46px}
  .score{font-size:22px}
}