/* ═══════════════════════════════════════════════════════════════
   UI 개편(2026-10-04~) 공통 값과 부품.
   시안: E:\교육\crossword\graphics\ui_mock\ (lobby2 · stage · game · more · complete · collection · avatar · start)
   1단계 — 이 파일은 값과 부품만 정의한다. 기존 화면은 아직 이 값을 쓰지 않으므로 겉모습은 바뀌지 않는다.
   이름은 전부 ui- 로 시작한다(기존 style.css · home.css 와 겹치지 않게).
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* 바탕 세 층: 배경 → 카드 → 조각(안 얻은 퍼즐 조각) */
  --ui-bg: #edeaf6;
  --ui-bg-top: #f5f3fa;
  --ui-bg-pink: #ffe6f5;
  --ui-bg-lav: #e4def4;
  --ui-card: #ffffff;
  --ui-card-soft: #f6f3fc;
  --ui-line: #e6dafb;
  --ui-line-strong: #cdbcf2;
  --ui-piece: #b7a4e3;
  --ui-piece-light: #c9baec;
  --ui-piece-dark: #a690db;

  /* 글자 */
  --ui-ink: #2e2150;
  --ui-soft: #4e4180;
  --ui-mute: #6e609e;
  --ui-off: #a79fc0;

  /* 강조: 보라 → 분홍은 주요 행동·진행에만 */
  --ui-vio: #7b45d6;
  --ui-vio-deep: #4a2f8f;
  --ui-pink: #e0489e;
  --ui-grad: linear-gradient(90deg, #7b45f0, #e0489e);
  --ui-grad-edge: #5a2bb8;
  --ui-ok: #22a559;
  --ui-ok-soft: #eafaf0;
  --ui-danger: #d8364f;
  --ui-new: #ffd23d;
  --ui-dim: rgba(42, 29, 85, .65);

  /* 모서리 · 그림자 · 높이 */
  --ui-r-card: 24px;
  --ui-r-tile: 20px;
  --ui-r-btn: 20px;
  --ui-r-chip: 999px;
  --ui-shadow-card: 0 12px 28px rgba(149, 114, 175, .2);
  --ui-shadow-chip: 0 4px 10px rgba(149, 114, 175, .13);
  --ui-shadow-nav: 0 10px 26px rgba(149, 114, 175, .33);
  --ui-shadow-sheet: 0 -14px 40px rgba(26, 15, 58, .4);
  --ui-h-btn: 58px;
  --ui-h-btn-sm: 46px;
  --ui-h-chip: 38px;
  --ui-h-nav: 62px;
  --ui-gutter: 12px;
  --ui-safe-bottom: env(safe-area-inset-bottom, 0px);

  --ui-font: 'Noto Sans KR', sans-serif;
  --ui-font-title: 'Jua', sans-serif;
  --ui-font-num: 'Black Han Sans', sans-serif;
}

/* ── 화면 바탕 ── */
.ui-page {
  color: var(--ui-ink);
  font-family: var(--ui-font);
  background:
    radial-gradient(70% 22% at 100% 0%, var(--ui-bg-pink) 0%, transparent 70%),
    radial-gradient(80% 30% at 0% 12%, var(--ui-bg-lav) 0%, transparent 70%),
    linear-gradient(180deg, var(--ui-bg-top), var(--ui-bg));
}

/* ── 카드 ── */
.ui-card {
  background: var(--ui-card);
  border: 1px solid #fff;
  border-radius: var(--ui-r-card);
  box-shadow: var(--ui-shadow-card);
}
.ui-title { font-family: var(--ui-font-title); font-weight: 400; color: var(--ui-ink); }
.ui-sub { font-size: 12px; font-weight: 700; color: var(--ui-soft); }

/* ── 칩(머리띠의 점수 · 연속학습 · 아바타) ── */
.ui-chip {
  display: inline-flex; align-items: center; gap: 5px;
  height: var(--ui-h-chip); padding: 0 11px 0 5px;
  border-radius: var(--ui-r-chip);
  background: var(--ui-card); border: 1px solid var(--ui-line);
  box-shadow: var(--ui-shadow-chip);
  font: 900 15px var(--ui-font); color: var(--ui-ink);
  cursor: pointer;
}
.ui-chip img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.ui-chip small { font-size: 10px; font-weight: 700; color: var(--ui-soft); }

/* ── 버튼 ── */
.ui-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: var(--ui-h-btn);
  border: 0; border-radius: var(--ui-r-btn);
  font-family: var(--ui-font-title); font-size: 22px; color: #fff;
  background: var(--ui-grad);
  box-shadow: 0 5px 0 var(--ui-grad-edge), 0 12px 22px rgba(160, 75, 208, .33);
  cursor: pointer;
  transition: transform .08s, box-shadow .08s;
}
.ui-btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ui-grad-edge); }
.ui-btn.is-off { background: #e6e0f3; color: #8f84b8; box-shadow: 0 5px 0 #d3cbe8; cursor: default; }
.ui-btn.is-ok { background: var(--ui-ok); box-shadow: 0 5px 0 #17803f; }
.ui-btn-sub {
  height: var(--ui-h-btn-sm); border-radius: 14px;
  border: 1.5px solid var(--ui-line-strong); background: var(--ui-card);
  font: 900 14px var(--ui-font); color: var(--ui-vio);
  cursor: pointer;
}
.ui-btn-sub.is-danger { border-color: #f0c4cc; color: var(--ui-danger); }

/* ── 진행 막대 ── */
.ui-bar { height: 8px; border-radius: 4px; background: #e9e0fb; overflow: hidden; }
.ui-bar > i { display: block; height: 100%; border-radius: 4px; background: var(--ui-grad); }

/* ── 켜고 끄기 ── */
.ui-switch { width: 46px; height: 26px; border-radius: 13px; background: var(--ui-grad); position: relative; cursor: pointer; flex-shrink: 0; }
.ui-switch::after { content: ""; position: absolute; right: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: right .15s; }
.ui-switch.is-off { background: #cfc7e2; }
.ui-switch.is-off::after { right: 23px; }

/* ── 아래에서 올라오는 창(아바타 창 · 더보기 창) ── */
.ui-dim { position: fixed; inset: 0; background: var(--ui-dim); z-index: 9000; }
.ui-sheet {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 100%; max-width: 430px; max-height: calc(100% - 64px);
  display: flex; flex-direction: column;
  padding: 10px 14px calc(18px + var(--ui-safe-bottom));
  border-radius: 28px 28px 0 0;
  background: var(--ui-card); color: var(--ui-ink); font-family: var(--ui-font);
  box-shadow: var(--ui-shadow-sheet);
  z-index: 9001;
  animation: ui-rise .35s cubic-bezier(.2, .9, .3, 1) both;
}
.ui-sheet-grab { width: 44px; height: 5px; border-radius: 3px; background: #dcd2f2; margin: 0 auto 10px; flex-shrink: 0; }
@keyframes ui-rise { from { transform: translate(-50%, 100%); } }

/* ── 아래 메뉴(홈 · 무대 · 아티스트 · 컬렉션 · 순위) ── */
.ui-nav {
  position: fixed; left: 50%; bottom: calc(10px + var(--ui-safe-bottom)); transform: translateX(-50%);
  width: calc(100% - 24px); max-width: 406px; height: var(--ui-h-nav);
  display: flex; align-items: center; padding: 0 4px;
  border-radius: 24px; background: rgba(255, 255, 255, .95); border: 1px solid #fff;
  box-shadow: var(--ui-shadow-nav); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 800;
}
.ui-nav > button {
  flex: 1; border: 0; background: none; padding: 0;
  font: 900 11px var(--ui-font); color: var(--ui-mute); text-align: center; cursor: pointer;
}
.ui-nav svg { display: block; margin: 0 auto 3px; width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ui-nav > button.is-on { color: var(--ui-vio); }
.ui-nav > button.is-on svg { fill: rgba(123, 69, 214, .13); }
/* 아래 메뉴에 가리지 않게 내용 끝에 두는 여백 */
.ui-nav-space { height: calc(var(--ui-h-nav) + 34px + var(--ui-safe-bottom)); }


/* ═══════════════ 2단계: 로비 머리띠 칩 셋 + 아래 메뉴 다섯 개 ═══════════════
   옛 머리띠(.cw-header 의 동그란 버튼)와 위 탭 줄은 아직 그대로 둔다 — 새 길이 다 이어진 뒤에 정리한다. */
#music-home .ui-topline { display: flex; align-items: center; gap: 6px; }
#music-home .ui-chips { margin-left: auto; display: flex; align-items: center; gap: 6px; }
#music-home .ui-chip-me { padding: 0 4px; }
#music-home .ui-chip-me img { width: 30px; height: 30px; }
.ui-flame { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(160deg, #ffb347, #ff5e62); font-size: 15px; }

@media (max-width: 700px) {
  /* 로고 줄 오른쪽은 아직 옛 로그인 버튼·사용자 정보 자리(style.css top:76px)라, 칩은 로고 아래 줄에 둔다.
     로그인이 아바타 창으로 옮겨 가면(3단계 뒤 정리) 칩을 로고 옆으로 올린다. */
  #music-home .learning-topbar .ui-topline { align-self: stretch; flex-direction: column; align-items: stretch; gap: 4px; }
  #music-home .learning-topbar .ui-chips { margin-left: 0; justify-content: flex-end; }
  #music-home .learning-mobile-nav.ui-nav {
    position: fixed; left: 50%; right: auto; bottom: calc(10px + var(--ui-safe-bottom)); transform: translateX(-50%);
    width: calc(100% - 24px); max-width: 406px; height: var(--ui-h-nav);
    display: flex; align-items: center; padding: 0 4px;
    border: 1px solid #fff; border-radius: 24px; background: rgba(255, 255, 255, .95);
    box-shadow: var(--ui-shadow-nav);
  }
  #music-home .learning-mobile-nav.ui-nav button {
    display: block; flex: 1; padding: 0; gap: 0;
    font: 900 11px var(--ui-font); color: var(--ui-mute); text-align: center;
  }
  #music-home .learning-mobile-nav.ui-nav button.is-on { color: var(--ui-vio); }
  /* 떠 있는 아래 메뉴에 마지막 카드가 가리지 않게 */
  #music-home { padding-bottom: calc(var(--ui-h-nav) + 34px + var(--ui-safe-bottom)) !important; }
}


/* ═══════════════ 3단계: 아바타 창 · 게임 화면 더보기 창 (js/ui-sheets.js) ═══════════════ */
.ui-sheet-x { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1e9ff; color: var(--ui-soft); font: 900 14px var(--ui-font); cursor: pointer; z-index: 2; }
.ui-sheet-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; scrollbar-width: none; }
.ui-sheet-body::-webkit-scrollbar { display: none; }
.ui-sheet button { font-family: var(--ui-font); }

.ui-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 16px; background: #f1ecfa; margin: 0 44px 10px 0; flex-shrink: 0; }
.ui-tabs button { height: 44px; border: 0; border-radius: 12px; background: transparent; font: 900 14px var(--ui-font); color: var(--ui-soft); cursor: pointer; line-height: 1.2; }
.ui-tabs button small { display: block; font-size: 9px; font-weight: 700; opacity: .9; }
.ui-tabs button.is-on { background: var(--ui-grad); color: #fff; box-shadow: 0 3px 0 var(--ui-grad-edge); }

.ui-pick { display: flex; align-items: center; gap: 12px; }
.ui-pick-big { width: 88px; height: 88px; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 6px 8px rgba(149, 114, 175, .33)); }
.ui-pick-3d { border-radius: 20px; background: var(--ui-card-soft); display: grid; place-items: center; font-size: 46px; filter: none; }
.ui-pick-3d img { width: 76px; height: 76px; object-fit: contain; }
.ui-pick-info { flex: 1; min-width: 0; }
.ui-pick-info > b { display: block; font-family: var(--ui-font-title); font-weight: 400; font-size: 22px; color: var(--ui-ink); }
.ui-pick-info > b em { font-style: normal; font: 900 11px var(--ui-font); color: #fff; background: var(--ui-ok); border-radius: 999px; padding: 2px 8px; margin-left: 6px; vertical-align: 3px; }
.ui-pick-info > b em.is-pick { background: var(--ui-pink); }
.ui-pick-info > span { display: block; font-size: 11px; font-weight: 700; color: var(--ui-soft); }
.ui-pick-info > span b { color: var(--ui-vio); }
.ui-pick-info .ui-pick-note.is-bad { color: var(--ui-danger); }
.ui-pick-info input { margin: 6px 0 2px; width: 100%; height: 38px; border-radius: 12px; border: 1.5px solid var(--ui-line-strong); padding: 0 12px; font: 700 14px var(--ui-font); color: var(--ui-ink); background: #fff; user-select: text; -webkit-user-select: text; }
.ui-pick-info input:disabled { background: #f1ecfa; color: var(--ui-mute); }
.ui-pick-info .ui-bar { margin: 6px 0 3px; height: 7px; }

.ui-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.ui-grid-scroll { max-height: 212px; overflow-y: auto; margin-top: 10px; padding: 6px 2px 2px; scrollbar-width: thin; }
.ui-grid-scroll .ui-grid { margin-top: 0; }
.ui-cell { position: relative; min-height: 48px; padding: 3px 0; border-radius: 13px; border: 2px solid transparent; background: var(--ui-card-soft); font: 900 10px var(--ui-font); color: var(--ui-ink); text-align: center; cursor: pointer; overflow: visible; }
.ui-cell img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.ui-cell .ui-em { display: grid; place-items: center; aspect-ratio: 1; font-size: 28px; }
.ui-cell.is-on { border-color: var(--ui-pink); background: #fff; box-shadow: 0 0 0 3px rgba(224, 72, 158, .18); color: var(--ui-vio); }
.ui-cell.is-cur::after { content: "✓"; position: absolute; right: -4px; top: -6px; width: 17px; height: 17px; border-radius: 50%; background: var(--ui-ok); color: #fff; font-size: 10px; display: grid; place-items: center; border: 2px solid #fff; }
.ui-cell.is-lock { background: #efedf5; color: #8f84b8; }
.ui-cell.is-lock img { filter: brightness(0) opacity(.22); }
.ui-apply { margin-top: 10px; height: 52px; font-size: 20px; border-radius: 18px; }

.ui-rows { margin-top: 12px; border-radius: 18px; background: var(--ui-card-soft); overflow: hidden; }
.ui-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-top: 1px solid #e8e0f6; background: transparent; font: 900 14px var(--ui-font); color: var(--ui-ink); text-align: left; }
.ui-rows > .ui-row:first-child { border-top: 0; }
.ui-row > span { flex: 1; min-width: 0; }
.ui-row > span small { display: block; font-size: 11px; font-weight: 700; color: var(--ui-soft); }
.ui-row-go { cursor: pointer; }
.ui-row-go i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--ui-soft); white-space: nowrap; }
.ui-row-btn { height: 32px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--ui-line-strong); background: #fff; font: 900 12px var(--ui-font); color: var(--ui-vio); cursor: pointer; }
.ui-switch { border: 0; padding: 0; }
.ui-two { display: flex; padding: 3px; border-radius: 12px; background: #e6def5; }
.ui-two button { height: 30px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; font: 900 12px var(--ui-font); color: var(--ui-soft); cursor: pointer; }
.ui-two button.is-on { background: #fff; color: var(--ui-vio); box-shadow: 0 2px 5px rgba(90, 60, 153, .2); }

/* 더보기 창 */
.ui-more-title { font-family: var(--ui-font-title); font-weight: 400; font-size: 20px; margin: 0 2px 2px; color: var(--ui-ink); flex-shrink: 0; }
.ui-more-sub { font-size: 12px; font-weight: 700; color: var(--ui-soft); margin: 0 2px 10px; flex-shrink: 0; }
.ui-more > .ui-btn { height: 54px; font-size: 21px; border-radius: 18px; flex-shrink: 0; }
.ui-play { width: 0; height: 0; border-left: 12px solid #fff; border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.ui-more-rows { overflow-y: auto; flex: 1 1 auto; min-height: 100px; scrollbar-width: none; margin-top: 14px; }
.ui-more-end { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; flex-shrink: 0; }

/* 한 번 더 묻는 창 */
.ui-ask { position: fixed; inset: 0; z-index: 9100; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(42, 29, 85, .6); font-family: var(--ui-font); }
.ui-ask-box { width: 100%; max-width: 320px; border-radius: 24px; background: #fff; padding: 18px 16px 14px; text-align: center; box-shadow: 0 20px 44px rgba(26, 15, 58, .53); }
.ui-ask-box h3 { font-family: var(--ui-font-title); font-weight: 400; font-size: 20px; margin: 0 0 4px; color: var(--ui-ink); }
.ui-ask-box p { margin: 0 0 14px; font-size: 13px; font-weight: 700; color: var(--ui-soft); line-height: 1.45; }
.ui-ask-box > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ui-ask-box button { height: 46px; border-radius: 14px; border: 0; font: 900 14px var(--ui-font); cursor: pointer; }
.ui-ask-no { background: #f1ecfa; color: var(--ui-ink); }
.ui-ask-yes { background: var(--ui-grad); color: #fff; }
.ui-ask-yes.is-danger { background: var(--ui-danger); }

/* 게임 화면의 ⋯ 버튼 — 옛 머리띠 버튼을 정리하기 전까지는 머리띠 아래 오른쪽에 떠 있다 */
.ui-more-btn { position: fixed; right: 10px; top: 64px; z-index: 60; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #fff; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 10px rgba(0, 0, 0, .25); color: var(--ui-ink); font: 900 18px var(--ui-font); letter-spacing: 1px; line-height: 1; cursor: pointer; }
body.home-active .ui-more-btn { display: none; }
/* hidden 속성이 위의 display 규칙에 지지 않게 */
.ui-sheet [hidden] { display: none !important; }


/* ═══════════════ 4단계: 새 로비 (js/home.js #ui-lobby) ═══════════════
   폰 너비에서만 쓴다. PC 너비는 옛 대문 그대로. */
@media all {   /* 처음엔 폰 너비 전용이었으나 PC 도 새 로비를 쓴다(2026-10-04) */
  #music-home .ui-lobby { display: block; font-family: var(--ui-font); color: var(--ui-ink); }
  /* 새 로비가 대신하는 옛 것: 이어하기 띠 · 큰 대문 · 다섯 단계 카드 (지우지 않고 감추기만 — 새 버튼이 이 버튼들을 누른다) */
  #music-home .journey-continue,
  #music-home #music-panel .learning-hero,
  #music-home #music-panel .learning-path { display: none !important; }
  body.home-active { background:
    radial-gradient(70% 22% at 100% 0%, var(--ui-bg-pink) 0%, transparent 70%),
    radial-gradient(80% 30% at 0% 12%, var(--ui-bg-lav) 0%, transparent 70%),
    linear-gradient(180deg, var(--ui-bg-top), var(--ui-bg)) !important; background-attachment: fixed !important; }

  #music-home .ui-lobby .ui-card { padding: 14px; margin-top: 10px; display: block; width: 100%; text-align: left; }
  #music-home .ui-lobby .ui-title { margin: 0; line-height: 1.2; text-shadow: none; letter-spacing: 0; }
  #music-home .ui-lb-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
  #music-home .ui-lb-head h2 { font-size: 21px; }
  #music-home .ui-lb-head > span { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ui-soft); background: #fff; border: 1px solid var(--ui-line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
  #music-home .ui-lb-head > span:empty { display: none; }

  #music-home .ui-lb-now { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 18px; background: var(--ui-card-soft); border: 1px solid var(--ui-line); }
  #music-home .ui-lb-now img { width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 5px 10px rgba(90, 60, 153, .33); }
  #music-home .ui-lb-now > div { min-width: 0; }
  #music-home .ui-lb-now h3 { font-size: 19px; }
  #music-home .ui-lb-now p { margin: 2px 0 0; font-size: 12px; font-weight: 700; color: var(--ui-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #music-home .ui-lb-next .ui-btn { margin-top: 12px; }

  #music-home .ui-lobby .ui-lb-streak { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--ui-r-tile); cursor: pointer; font-family: var(--ui-font); }
  #music-home .ui-lb-streak-copy { flex: 1; min-width: 0; display: block; }
  #music-home .ui-lb-streak-copy b { font-family: var(--ui-font-title); font-weight: 400; font-size: 17px; color: var(--ui-pink); }
  #music-home .ui-lb-streak-copy small { margin-left: 8px; font-size: 11px; font-weight: 700; color: var(--ui-soft); }
  #music-home .ui-lb-dots { display: flex; gap: 4px; margin-top: 7px; max-width: 220px; }
  #music-home .ui-lb-dots i { flex: 1; height: 8px; border-radius: 4px; background: #e2d6f8; }
  #music-home .ui-lb-dots i.is-on { background: linear-gradient(90deg, #ffb347, #ff5e62); }
  #music-home .ui-lb-streak > img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; background: var(--ui-card-soft); flex-shrink: 0; }

  #music-home .ui-lb-discs { display: flex; justify-content: space-between; }
  #music-home .ui-lb-discs button { width: 19%; padding: 0; border: 0; background: none; font: 900 12px var(--ui-font); color: var(--ui-ink); text-align: center; cursor: pointer; }
  #music-home .ui-lb-discs img { width: 52px; height: 52px; border-radius: 50%; display: block; margin: 0 auto 4px; box-shadow: 0 5px 10px rgba(90, 60, 153, .33); }
  #music-home .ui-lb-discs small { display: block; font-size: 10px; font-weight: 700; color: var(--ui-soft); line-height: 1.25; }
  #music-home .ui-lb-discs button.is-on { color: var(--ui-vio); }
  #music-home .ui-lb-discs button.is-on img { outline: 2px solid var(--ui-vio); outline-offset: 3px; }

  #music-home .ui-lb-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
  #music-home .ui-lb-tile { position: relative; overflow: hidden; min-height: 118px; padding: 12px; border-radius: 22px; border: 1px solid #fff; background: var(--ui-card); box-shadow: var(--ui-shadow-card); text-align: left; font-family: var(--ui-font); color: var(--ui-ink); cursor: pointer; }
  #music-home .ui-lb-tile b { display: block; font-size: 17px; }
  #music-home .ui-lb-tile small { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--ui-soft); }
  #music-home .ui-lb-tile.is-dark { background: linear-gradient(170deg, #2b2168, #1a1446); border-color: #4a3d96; color: #f4f0ff; }
  #music-home .ui-lb-tile.is-dark b { color: #f4f0ff; }
  #music-home .ui-lb-tile.is-dark small { color: #b4a9e6; }
  #music-home .ui-lb-tile img { position: absolute; right: -6px; bottom: -10px; width: 92px; height: 92px; object-fit: contain; filter: brightness(0) invert(1); opacity: .18; }
  #music-home .ui-lb-tile i { position: absolute; right: 12px; bottom: 12px; width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center; font: 400 28px var(--ui-font-num); font-style: normal; color: #fff; background: linear-gradient(135deg, var(--ui-piece-light), var(--ui-piece-dark)); transform: rotate(4deg); }
}
@media all {
  #music-home .ui-lobby .ui-btn { font-family: var(--ui-font-title); font-size: 22px; font-weight: 400; color: #fff; }
  #music-home .ui-lb-tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
}


/* ═══════════════ 5단계: 컬렉션 — 그림 퍼즐 · 디스크 · 가방 (js/home.js renderCollection, js/achievements.js renderPanel) ═══════════════ */
#achv-panel { font-family: var(--ui-font); color: var(--ui-ink); }
#achv-panel [hidden] { display: none !important; }
#achv-panel .ui-col-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; margin-top: 4px; border-radius: 18px; background: #fff; border: 1px solid #fff; box-shadow: 0 8px 20px rgba(149, 114, 175, .13); }
#achv-panel .ui-col-seg button { height: 44px; border: 0; border-radius: 14px; background: transparent; font: 900 14px var(--ui-font); color: var(--ui-soft); cursor: pointer; line-height: 1.2; }
#achv-panel .ui-col-seg button small { display: block; font-size: 10px; font-weight: 700; opacity: .9; }
#achv-panel .ui-col-seg button.is-on { background: var(--ui-grad); color: #fff; box-shadow: 0 3px 0 var(--ui-grad-edge); }

/* 그림 퍼즐 */
#achv-panel .achv-head { margin-top: 10px; display: block; }
#achv-panel .achv-total { display: flex; gap: 8px; }
#achv-panel .achv-total > span { flex: 1; border-radius: 16px; background: #fff; padding: 8px 10px; }
#achv-panel .achv-total b { font-family: var(--ui-font-num); font-weight: 400; font-size: 22px; color: var(--ui-vio); margin-right: 3px; }
#achv-panel .achv-total i { font-size: 11px; font-weight: 700; color: var(--ui-soft); opacity: 1; margin-right: 0; }
#achv-panel .achv-chips { flex-wrap: nowrap; overflow-x: auto; gap: 6px; margin: 10px -4px 0; padding: 0 4px 2px; scrollbar-width: none; }
#achv-panel .achv-chips::-webkit-scrollbar { display: none; }
#achv-panel .achv-chips button { flex-shrink: 0; height: 32px; padding: 0 12px; border-radius: 999px; background: #fff; border: 1px solid var(--ui-line); font: 900 12px var(--ui-font); color: var(--ui-soft); }
#achv-panel .achv-chips button[aria-pressed="true"] { background: var(--ui-vio-deep); border-color: var(--ui-vio-deep); color: #fff; }
#achv-panel .achv-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
#achv-panel .achv-card { gap: 2px; padding: 8px 8px 10px; border-radius: 20px; border: 1px solid #fff; background: #fff; box-shadow: 0 10px 22px rgba(149, 114, 175, .17); text-align: left; font-family: var(--ui-font); color: var(--ui-ink); }
#achv-panel .achv-card.full { border-color: var(--ui-pink); box-shadow: 0 0 0 2px rgba(224, 72, 158, .25), 0 10px 22px rgba(149, 114, 175, .17); }
#achv-panel .achv-frame { border-radius: 13px; background: var(--ui-piece); }
#achv-panel .achv-st { display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 0; }
#achv-panel .achv-st em { font-style: normal; font-size: 10px; font-weight: 900; color: #fff; background: var(--ui-grad); border-radius: 999px; padding: 2px 8px; }
#achv-panel .achv-st em.full { background: var(--ui-ok); }
#achv-panel .achv-st b { font-size: 11px; font-weight: 900; color: var(--ui-vio); }
#achv-panel .achv-card strong { margin: 2px 2px 0; font-size: 14px; font-weight: 900; }
#achv-panel .achv-prog { margin: 0 2px 4px; font-size: 11px; font-weight: 700; color: var(--ui-soft); opacity: 1; }
#achv-panel .achv-dots { margin: 0 2px; }
#achv-panel .achv-dots i { height: 6px; background: #e9e0fb; }
#achv-panel .achv-dots i.on { background: var(--ui-vio); }
#achv-panel .achv-more { margin-top: 10px; border-radius: 20px; padding: 12px 14px; display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1.5px dashed #c9bbeb; font-size: 14px; font-weight: 900; }
#achv-panel .achv-more > b { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, var(--ui-piece-light), var(--ui-piece-dark)); color: #fff; font: 400 24px var(--ui-font-num); flex-shrink: 0; }
#achv-panel .achv-more span { color: var(--ui-vio); }
#achv-panel .achv-more small { display: block; font-size: 11px; font-weight: 700; color: var(--ui-soft); margin-top: 1px; }
#achv-panel .achv-more-go { display: block; margin-top: 8px; height: 34px; padding: 0 14px; border-radius: 12px; border: 0; font: 900 12px var(--ui-font); color: #fff; background: var(--ui-grad); box-shadow: 0 3px 0 var(--ui-grad-edge); cursor: pointer; }

/* 디스크 */
#achv-panel .ui-col-total { margin-top: 10px; border-radius: 20px; padding: 12px 14px; display: flex; align-items: center; gap: 10px; color: #fff; background: var(--ui-grad); box-shadow: 0 10px 22px rgba(160, 75, 208, .27); }
#achv-panel .ui-col-total b { font: 400 28px var(--ui-font-num); }
#achv-panel .ui-col-total span { font-size: 12px; font-weight: 700; line-height: 1.35; }
#achv-panel .ui-col-total button { margin-left: auto; border: 0; border-radius: 999px; padding: 6px 12px; background: rgba(255, 255, 255, .22); color: #fff; font: 900 12px var(--ui-font); cursor: pointer; white-space: nowrap; }
#achv-panel .ui-col-tier { display: flex; align-items: center; gap: 12px; margin-top: 10px; border-radius: 20px; padding: 12px; background: #fff; box-shadow: 0 10px 22px rgba(149, 114, 175, .17); }
#achv-panel .ui-col-tier > img { width: 58px; height: 58px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 5px 10px rgba(90, 60, 153, .33); }
#achv-panel .ui-col-tier > div { flex: 1; min-width: 0; }
#achv-panel .ui-col-tier h3 { margin: 0; font: 400 19px var(--ui-font-title); color: var(--ui-ink); }
#achv-panel .ui-col-tier p { margin: 0 0 5px; font-size: 11px; font-weight: 700; color: var(--ui-soft); }
#achv-panel .ui-col-tier-n { text-align: right; white-space: nowrap; font-size: 12px; font-weight: 900; color: var(--ui-soft); }
#achv-panel .ui-col-tier-n b { display: block; font: 400 24px/1 var(--ui-font-num); color: var(--ui-vio); }
#achv-panel .ui-col-tier-n span { display: inline-flex; align-items: center; gap: 2px; margin-top: 3px; }
#achv-panel .ui-col-tier-n img { width: 13px; height: 13px; }

/* 가방 */
#achv-panel .ui-col-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }
#achv-panel .ui-col-item { position: relative; border-radius: 18px; padding: 10px 4px 8px; text-align: center; background: #fff; box-shadow: 0 8px 18px rgba(149, 114, 175, .15); font-size: 12px; font-weight: 900; }
#achv-panel .ui-col-item img { width: 54px; height: 54px; object-fit: contain; display: block; margin: 0 auto 4px; }
#achv-panel .ui-col-item em { position: absolute; right: 8px; top: 8px; min-width: 24px; height: 22px; border-radius: 11px; padding: 0 6px; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; background: var(--ui-vio); }
#achv-panel .ui-col-item.is-zero { color: var(--ui-off); }
#achv-panel .ui-col-item.is-zero img { filter: grayscale(1) opacity(.45); }
#achv-panel .ui-col-item.is-zero em { background: #c3bcd8; }
#achv-panel .ui-col-open { display: block; width: 100%; margin-top: 12px; }


/* ═══════════════ 6단계: 완료 창 (index.html #modal · js/game.js) ═══════════════ */
#modal.modal-overlay { background: rgba(59, 42, 102, .6); padding: 54px 14px 16px; align-items: flex-start; overflow-y: auto; }
#modal .modal-box.ui-done { position: relative; width: 100%; max-width: 400px; max-height: none; margin: auto; padding: 50px 14px 14px; border-radius: 28px; overflow: visible;
  background: linear-gradient(180deg, #fff, #f6efff); border: 1px solid #fff; box-shadow: 0 24px 50px rgba(26, 15, 58, .53); font-family: var(--ui-font); color: var(--ui-ink); }
#modal .ui-done [hidden] { display: none !important; }
#modal .ui-done-me { position: absolute; left: 50%; top: -46px; margin-left: -46px; width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(26, 15, 58, .4)); animation: ui-hop .9s ease-in-out infinite alternate; }
@keyframes ui-hop { to { transform: translateY(-7px); } }
#modal .ui-done .modal-title { font-family: var(--ui-font-title); font-weight: 400; font-size: 28px; color: var(--ui-ink); margin: 0; }
#modal .ui-done .modal-sub { margin: 0; color: var(--ui-ink); font-size: 13px; }
#modal .ui-done-stars { display: flex; justify-content: center; align-items: flex-end; gap: 6px; margin: 6px 0 2px; }
#modal .ui-done-stars img { width: 46px; height: 46px; animation: ui-pop .45s cubic-bezier(.3, 1.7, .5, 1) both; }
#modal .ui-done-stars img:nth-child(2) { width: 56px; height: 56px; animation-delay: .18s; }
#modal .ui-done-stars img:nth-child(3) { animation-delay: .36s; }
#modal .ui-done-stars img.is-off { filter: grayscale(1) brightness(.4) opacity(.35); }
@keyframes ui-pop { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
#modal .ui-done-desc { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--ui-soft); }
#modal .ui-done-disc { display: flex; align-items: center; gap: 12px; text-align: left; border-radius: 20px; padding: 10px 12px; background: linear-gradient(120deg, #fff4e6, #ffe9f6); border: 1px solid #ffd9b8; }
#modal .ui-done-disc > img { width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 5px 10px rgba(90, 60, 153, .33); animation: vinyl-spin 6s linear infinite; }
#modal .ui-done-disc > div:nth-child(2) { flex: 1; min-width: 0; }
#modal .ui-done-disc b { display: block; font-family: var(--ui-font-title); font-weight: 400; font-size: 18px; color: #8a4b12; }
#modal .ui-done-disc span { font-size: 12px; font-weight: 700; color: var(--ui-soft); }
#modal .ui-done-pts { text-align: right; white-space: nowrap; font-size: 13px; font-weight: 900; }
#modal .ui-done-pts b { display: inline; font-family: var(--ui-font-num); font-weight: 400; font-size: 26px; color: var(--ui-vio); }
#modal .ui-done-pts small { display: block; font-size: 10px; font-weight: 900; color: var(--ui-pink); }
#modal .ui-done-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 6px; margin-top: 8px; }
#modal .ui-done-chip { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: #fff; border: 1px solid var(--ui-line); box-shadow: 0 3px 0 #dccdf7; font: 700 11px var(--ui-font); color: var(--ui-soft); text-align: left; cursor: pointer; transition: transform .08s, box-shadow .08s, background .08s; }
#modal .ui-done-chip:active { transform: translateY(3px) scale(.98); box-shadow: 0 0 0 #dccdf7; background: #f4eefe; }
#modal .ui-done-chip i { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex-shrink: 0; background: linear-gradient(135deg, var(--ui-piece-light), var(--ui-piece-dark)); color: #fff; font: 400 18px var(--ui-font-num); font-style: normal; }
#modal .ui-done-chip b { flex: 1; font-size: 14px; font-weight: 900; color: var(--ui-vio); }
#modal .ui-done-chip small { font-size: 11px; font-weight: 900; color: var(--ui-ok); }
#modal .ui-done-point { margin-top: 6px; font-size: 12px; }
#modal .ui-done > .ui-btn { margin-top: 12px; }
#modal .ui-done-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
#modal .ui-done-words { margin-top: 10px; border-radius: 16px; background: #f6f0ff; border: 1px solid var(--ui-line); text-align: left; padding: 8px 10px; }
#modal .ui-done-words summary { list-style: none; cursor: pointer; display: flex; align-items: center; font-size: 12px; font-weight: 900; color: var(--ui-soft); }
#modal .ui-done-words summary::-webkit-details-marker { display: none; }
#modal .ui-done-words summary::after { content: "▾"; margin-left: auto; padding-left: 8px; }
#modal .ui-done-words[open] summary::after { content: "▴"; }
#modal .ui-done-words summary b { color: #e8590c; }
#modal .ui-done-words .wc-head { display: none; }
#modal .ui-done-words .modal-words { margin: 8px 0 0; }
#modal .ui-done-words .wc-list { max-height: 34vh; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
#modal .ui-done-disc > img { animation-name: ui-spin; }


/* ═══════════════ 7단계: 새 그림 표시 ═══════════════ */
/* 가는 길마다 찍는 점: 아래 메뉴 컬렉션 · 로비 그림 퍼즐 칸 · 컬렉션의 그림 퍼즐 탭 */
#music-home .ui-nav button.has-new, #music-home .ui-lb-tile.has-new, #achv-panel .ui-col-seg button.has-new { position: relative; }
#music-home .ui-nav button.has-new::after, #music-home .ui-lb-tile.has-new::after, #achv-panel .ui-col-seg button.has-new::after {
  content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--ui-new); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
#music-home .ui-nav button.has-new::after { left: calc(50% + 8px); top: -2px; }
#music-home .ui-lb-tile.has-new::after { right: 10px; top: 10px; width: 12px; height: 12px; }
#achv-panel .ui-col-seg button.has-new::after { right: 14px; top: 6px; }
/* 컬렉션 카드 */
#achv-panel .achv-card { position: relative; }
#achv-panel .achv-card.is-new { border-color: var(--ui-pink); box-shadow: 0 0 0 2px rgba(224, 72, 158, .3), 0 10px 22px rgba(224, 72, 158, .22); animation: ui-appear .55s cubic-bezier(.3, 1.5, .5, 1) both; }
#achv-panel .achv-new { position: absolute; right: -4px; top: -8px; z-index: 2; font-size: 10px; font-weight: 900; color: #fff; background: var(--ui-pink); border-radius: 999px; padding: 3px 9px; box-shadow: 0 3px 6px rgba(224, 72, 158, .4); }
@keyframes ui-appear { from { transform: scale(.7); opacity: 0; } }
/* 완료 창의 그림 퍼즐 칩 */
#modal .ui-done-chip > span { flex: 1; min-width: 0; display: block; }
#modal .ui-done-chip > span b { display: block; }
#modal .ui-done-chip > span u { display: block; text-decoration: none; font-size: 11px; font-weight: 700; color: var(--ui-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modal .ui-done-chip.is-new { border-color: var(--ui-pink); box-shadow: 0 3px 0 #f3b6d8; }
#modal .ui-done-new { position: absolute; right: -4px; top: -9px; font-style: normal; font-size: 10px; font-weight: 900; color: #fff; background: var(--ui-pink); border-radius: 999px; padding: 2px 8px; }
#modal .ui-done-chip small { white-space: nowrap; }


/* ═══════════════ 8단계: 옛 것 정리 (폰 너비에서만 — PC 너비는 옛 머리띠·탭 줄 그대로) ═══════════════
   지우지 않고 감춘다. 옛 버튼이 하던 일은 전부 새 길로 갔다:
   점수 내역 → 컬렉션 디스크 탭 / 연속학습 → 칩·카드 / 3D 아바타 → 아바타 창 게임 캐릭터 탭 / 가방 → 컬렉션 가방 탭·게임 화면 가방 /
   순위 → 아래 메뉴 / 소리·설정·로그인·포털 → 아바타 창 / 2D·3D → 더보기 창 */
.ui-sheet a.ui-row { text-decoration: none; }
@media all {   /* 처음엔 폰 너비 전용이었으나 PC 도 같이 정리(2026-10-04) */
  /* 로비: 옛 머리띠 통째로(동그란 버튼들 + 로그인 버튼 + 사용자 정보) */
  body.home-active .cw-header { display: none !important; }
  #music-home { padding-top: 10px !important; }
  /* 칩을 로고 옆으로 */
  #music-home .learning-topbar .ui-topline { flex-direction: row; align-items: center; gap: 6px; }
  #music-home .learning-topbar .ui-chips { margin-left: auto; }
  #music-home .learning-topbar .learning-logo { align-self: auto; width: 108px; height: 57px; }
  #music-home .learning-topbar { min-height: 0; }
  /* 위 탭 줄: 「무대」에서만, 판 종류 탭 다섯 개만 */
  #music-home .home-tabs { display: none; }
  #music-home.ui-mode-stage .home-tabs { display: flex; }
  #music-home.ui-mode-stage #artist-tab, #music-home.ui-mode-stage #achv-tab { display: none; }
  /* KPOP 탭: 홈이면 새 로비, 무대면 다섯 단계 카드 */
  #music-home.ui-mode-stage #ui-lobby { display: none; }
  #music-home.ui-mode-stage #music-panel .learning-path { display: block !important; }

  /* 게임 화면: 뒤로 · 판 이름만 남기고, 나머지는 ⋯(더보기) 안에 */
  body:not(.home-active) .cw-header .cw-home-btn,
  body:not(.home-active) .cw-header .cw-resource-wrap,
  body:not(.home-active) .cw-header #streak-tab,
  body:not(.home-active) .cw-header .cw-header-center,
  body:not(.home-active) .cw-header #cw-login-btn,
  body:not(.home-active) .cw-header #user-info { display: none !important; }
  .ui-more-btn { top: 8px; right: 8px; }
}


/* ═══════════════ 오늘의 미션 (js/missions.js) ═══════════════ */
#music-home .ui-lb-missions { margin-top: 12px; }
#music-home .ui-ms-head { display: flex; align-items: center; margin: 0 2px 6px; font-size: 13px; }
#music-home .ui-ms-head b { font-weight: 900; color: var(--ui-ink); }
#music-home .ui-ms-head b i { font-style: normal; color: var(--ui-vio); }
#music-home .ui-ms-claim { margin-left: auto; display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 6px; border-radius: 999px; border: 1px solid var(--ui-line); background: var(--ui-card-soft); font: 900 11px var(--ui-font); color: var(--ui-soft); }
#music-home .ui-ms-claim img { width: 22px; height: 22px; object-fit: contain; filter: grayscale(.35) opacity(.9); }
#music-home .ui-ms-claim.is-ready { border: 0; background: var(--ui-grad); color: #fff; box-shadow: 0 3px 0 var(--ui-grad-edge); cursor: pointer; animation: ui-pulse 1.2s ease-in-out infinite alternate; }
#music-home .ui-ms-claim.is-ready img { filter: none; }
@keyframes ui-pulse { to { transform: scale(1.05); } }
#music-home .ui-ms-got { margin-left: auto; font-size: 11px; font-weight: 900; color: var(--ui-ok); }
#music-home .ui-ms-row { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 10px; margin-top: 5px; border-radius: 12px; background: #fff; border: 1px solid var(--ui-line); font-size: 12px; font-weight: 700; color: var(--ui-ink); }
#music-home .ui-ms-row > i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #b9a8e6; flex-shrink: 0; display: grid; place-items: center; font-style: normal; font-size: 11px; color: #fff; }
#music-home .ui-ms-row > span { flex: 1; min-width: 0; }
#music-home .ui-ms-row > em { font-style: normal; font-size: 11px; font-weight: 900; color: var(--ui-vio); }
#music-home .ui-ms-row.is-done { background: var(--ui-ok-soft); border-color: #bfe9cf; }
#music-home .ui-ms-row.is-done > i { background: var(--ui-ok); border-color: var(--ui-ok); }
/* 완료 창: 칩이 둘이면 위아래로 */
#modal .ui-done-chips { grid-template-columns: 1fr; }
#modal .ui-done-chip i.ui-done-ms { background: linear-gradient(135deg, #7fe0a7, #22a559); font-size: 16px; }


/* ═══════════════ 판 고르기 = 앨범 묶음 (js/home.js buildAlbums) ═══════════════ */
.home-picker { background: linear-gradient(180deg, var(--ui-bg-top), var(--ui-bg)); color: var(--ui-ink); font-family: var(--ui-font); }
.home-picker h2 { color: var(--ui-ink); font-size: 21px; }
.home-picker .picker-close { background: #fff; color: var(--ui-soft); }
.home-picker .picker-heading { margin-bottom: 12px; }
.picker-size-tabs button[aria-selected="true"] { background: var(--ui-grad); border-color: transparent; box-shadow: 0 3px 0 var(--ui-grad-edge); }
.home-picker .picker-grid.ui-alb { display: block; justify-items: normal; justify-content: normal; padding: 4px 2px 6px; max-height: 64vh; }   /* 옛 규칙의 justify-items:center 가 블록 자식을 가운데로 줄이지 않게 */
.ui-alb-now { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 22px; background: #fff; border: 1.5px solid #c9a8f5; box-shadow: var(--ui-shadow-card); }
.ui-alb-deck { position: relative; width: 92px; height: 92px; flex-shrink: 0; }
.ui-alb-deck img { width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 8px 18px rgba(0, 0, 0, .45); animation: ui-spin 9s linear infinite; }
.ui-alb-deck b { position: absolute; inset: 0; display: grid; place-items: center; font: 400 22px var(--ui-font-num); color: #fff; text-shadow: 0 2px 4px #000; }
.ui-alb-nowtxt { flex: 1; min-width: 0; }
.ui-alb-tag { display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: 1.5px; color: #fff; background: var(--ui-grad); border-radius: 999px; padding: 2px 9px; }
.ui-alb-nowtxt h3 { margin: 4px 0 0; font: 400 21px var(--ui-font-title); color: var(--ui-ink); }
.ui-alb-nowtxt p { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--ui-soft); }
.ui-alb-nowtxt .ui-btn { height: 44px; font-size: 18px; border-radius: 14px; box-shadow: 0 4px 0 var(--ui-grad-edge); }
.ui-alb-box { margin-top: 12px; padding: 12px 8px 10px; border-radius: 20px; background: #fff; box-shadow: var(--ui-shadow-card); }
.ui-alb-head { display: flex; align-items: center; gap: 8px; margin: 0 4px 10px; }
.ui-alb-head h3 { margin: 0; font: 400 16px var(--ui-font-title); color: var(--ui-ink); white-space: nowrap; }
.ui-alb-head .ui-bar { flex: 1; height: 6px; }
.ui-alb-head > span { font-size: 12px; font-weight: 900; color: var(--ui-soft); }
.ui-alb-chest { position: relative; display: flex; align-items: center; gap: 2px; height: 30px; padding: 0 4px; border: 0; border-radius: 999px; background: transparent; }
.ui-alb-chest img { width: 26px; height: 26px; object-fit: contain; filter: grayscale(.75) opacity(.55); }
.ui-alb-chest em { font-style: normal; font: 900 11px var(--ui-font); color: var(--ui-ok); }
.ui-alb-chest.is-ready { padding: 0 10px 0 6px; background: var(--ui-grad); box-shadow: 0 3px 0 var(--ui-grad-edge); cursor: pointer; animation: ui-pulse 1.2s ease-in-out infinite alternate; }
.ui-alb-chest.is-ready img { filter: none; }
.ui-alb-chest.is-ready em { color: #fff; }
.ui-alb-chest.is-got img { filter: none; opacity: .9; }
.ui-alb-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 4px; }
.ui-alb-grid .pick-vinyl-wrap { min-width: 0; }
.ui-alb-grid .pick-vinyl { width: 100%; height: auto; aspect-ratio: 1; background-size: cover; }
.ui-alb-grid .pick-vinyl-year { font-size: 13px; }
.ui-alb-grid .pick-vinyl-stars { gap: 0; margin-top: 3px; }
.ui-alb-grid .pick-vinyl-stars .pick-star { width: 14px; height: 14px; }
.ui-alb-grid .pick-vinyl-wrap:not(:has(.pick-vinyl.done)) .pick-vinyl-stars { visibility: hidden; }
.ui-alb-grid .pick-vinyl-wrap.is-cur .pick-vinyl { outline: 3px solid var(--ui-pink); outline-offset: 2px; box-shadow: 0 0 14px rgba(224, 72, 158, .55); }
.ui-alb-grid .pick-vinyl-playing { transform: translateX(-50%) scale(.62); transform-origin: top center; top: -8px; }

.ui-alb-grid .pick-vinyl-wrap.is-long .pick-vinyl-year { font-size: 9px; letter-spacing: -.5px; }
.ui-alb-deck b { font-size: clamp(14px, 5vw, 22px); }

/* 완료 창 칩: 글이 길어도 창 밖으로 나가지 않게(2026-10-04 사용자 화면에서 발견) */
#modal .ui-done-chips { grid-template-columns: minmax(0, 1fr); }
#modal .ui-done-chip { min-width: 0; width: 100%; }
#modal .ui-done-chip > span { overflow: hidden; }
#modal .ui-done-chip > span b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#modal .ui-done-chip small { flex-shrink: 0; }


/* ═══════════════ PC 너비: 두 칸 로비 + 위 메뉴 (2026-10-04) ═══════════════
   폰의 부품을 그대로 쓰고 배치만 바꾼다: 왼쪽 큰 그림(버튼은 「판 고르기」) / 오른쪽 이어서 할 무대·미션 + 연속학습 / 아래 어디서든 시작 + 히든 무대·그림 퍼즐 */
#music-home .ui-lb-hero { display: none; }
@media (min-width: 701px) {
  #music-home { position: relative; padding-top: 22px !important; }
  #music-home .learning-topbar { flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; padding: 0; }
  #music-home .learning-topbar .ui-topline { min-height: 64px; }
  #music-home .learning-topbar .learning-logo { width: 150px; height: 78px; }
  #music-home .ui-chip { height: 44px; font-size: 17px; padding: 0 14px 0 6px; }
  #music-home .ui-chip img, #music-home .ui-flame { width: 32px; height: 32px; }
  #music-home .ui-chip-me { padding: 0 5px; }
  #music-home .ui-chip-me img { width: 34px; height: 34px; }

  /* 위 메뉴: 폰의 아래 메뉴와 같은 다섯 개 */
  #music-home .learning-mobile-nav.ui-nav {
    display: flex; align-items: center; gap: 2px; position: absolute; top: 33px; left: 50%; right: auto; bottom: auto; transform: translateX(-50%);
    width: auto; max-width: none; height: 56px; padding: 0 6px; border-radius: 999px;
    background: #fff; border: 1px solid #fff; box-shadow: var(--ui-shadow-chip); z-index: 5;
  }
  #music-home .learning-mobile-nav.ui-nav button { display: flex; align-items: center; gap: 6px; flex: none; height: 44px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font: 900 14px var(--ui-font); color: var(--ui-mute); cursor: pointer; white-space: nowrap; }
  #music-home .learning-mobile-nav.ui-nav svg { margin: 0; width: 20px; height: 20px; }
  #music-home .learning-mobile-nav.ui-nav button.is-on { background: #f1ecfa; color: var(--ui-vio); }
  #music-home .ui-nav button.has-new::after { left: auto; right: 8px; top: 6px; }

  /* 두 칸 배치 */
  #music-home .ui-lobby { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-areas: "hero next" "hero streak" "any duo"; gap: 14px; margin-top: 6px; }
  #music-home .ui-lobby .ui-card { margin-top: 0; }
  #music-home .ui-lb-next { grid-area: next; }
  #music-home .ui-lobby .ui-lb-streak { grid-area: streak; }
  #music-home .ui-lb-any { grid-area: any; display: flex !important; flex-direction: column; justify-content: center; }
  #music-home .ui-lb-duo { grid-area: duo; margin-top: 0; }
  #music-home .ui-lb-hero { grid-area: hero; display: flex; align-items: center; position: relative; overflow: hidden; min-height: 400px; padding: 34px 38px; border-radius: 28px; border: 1px solid #fff;
    background: linear-gradient(100deg, rgba(255, 255, 255, .94) 28%, rgba(255, 255, 255, .25) 70%), url(../img/bg_kpop.jpg) center / cover; box-shadow: var(--ui-shadow-card); }
  #music-home .ui-lb-hero > img { position: absolute; right: -2%; bottom: -6%; width: 54%; max-width: 420px; filter: drop-shadow(0 14px 20px rgba(90, 60, 153, .35)); }
  #music-home .ui-lb-hero > div { position: relative; max-width: 52%; }
  #music-home .ui-lb-eyebrow { font-size: 12px; font-weight: 900; letter-spacing: 2px; color: var(--ui-pink); }
  #music-home .ui-lb-hero h2 { margin: 10px 0 12px; font-size: clamp(34px, 3.6vw, 48px); line-height: 1.15; letter-spacing: -1px; }
  #music-home .ui-lb-hero h2 em { font-style: normal; color: var(--ui-pink); }
  #music-home .ui-lb-hero p { margin: 0 0 20px; font-size: 16px; font-weight: 700; color: var(--ui-soft); line-height: 1.5; }
  #music-home .ui-lb-hero .ui-btn-sub { height: 50px; padding: 0 24px; font-size: 16px; border-radius: 16px; box-shadow: 0 3px 0 #dccdf7; }
  #music-home .ui-lb-discs img { width: 68px; height: 68px; }
  #music-home .ui-lb-discs button { font-size: 14px; }
  #music-home .ui-lb-discs small { font-size: 11px; }
  #music-home .ui-lb-tile { min-height: 0; height: 100%; }

  /* 게임 화면의 ⋯ */
  .ui-more-btn { top: 12px; right: 14px; width: 46px; height: 46px; }
}
@media (min-width: 701px) {
  /* 로비 폭: 두 칸 배치가 숨 쉴 수 있게 860 → 1100 (게임 화면에는 영향 없음) */
  body.home-active #screen-list { max-width: 1100px !important; }
  #music-home .ui-lb-hero h2, #music-home .ui-lb-hero p { word-break: keep-all; }
}
@media (min-width: 880px) {
  /* 위 메뉴는 로고와 칩 「사이」의 가운데에 둔다 — 화면 한가운데에 두면 로그인 칩이 생겼을 때 칩과 겹친다.
     칩 줄 너비는 로그인 전(#music-home.lp-guest, login-prompt.js)이 더 넓다 */
  #music-home .learning-mobile-nav.ui-nav { left: 194px; right: 300px; transform: none; margin: 0 auto; width: fit-content; }
  #music-home.lp-guest .learning-mobile-nav.ui-nav { right: 404px; }
}
@media (min-width: 880px) and (max-width: 1100px) {
  /* 중간 너비(880~1100): 위 메뉴를 로고 바로 옆, 같은 줄에 — 메뉴를 한 줄 아래로 내리면 로고와 칩 사이가 비어 보였다(사용자 10/4).
     로그인 칩이 있어도 들어가게 로고·메뉴·칩을 조금씩 줄인다 */
  #music-home .learning-topbar .learning-logo { width: 118px; height: 62px; }
  #music-home .learning-mobile-nav.ui-nav { top: 29px; left: 162px; right: 292px; height: 50px; padding: 0 4px; gap: 0; }
  #music-home.lp-guest .learning-mobile-nav.ui-nav { right: 340px; }
  #music-home .ui-chip-login .lp-g { display: none; }   /* 가방 칩이 생겨 좁다 → 글자만 */
  #music-home .learning-mobile-nav.ui-nav button { height: 40px; padding: 0 9px; gap: 4px; font-size: 13px; }
  #music-home .learning-mobile-nav.ui-nav svg { width: 18px; height: 18px; }
  #music-home .ui-chips { gap: 5px; }
  #music-home .ui-chip { height: 40px; font-size: 15px; padding: 0 10px 0 5px; }
  #music-home .ui-chip img, #music-home .ui-flame { width: 28px; height: 28px; }
  #music-home .ui-chip-me img { width: 30px; height: 30px; }
  #music-home .ui-chip-login { padding: 0 10px; font-size: 13px; }
}
@media (min-width: 701px) and (max-width: 879px) {
  /* 좁은 PC 너비: 한 줄에 다 안 들어가서 위 메뉴를 한 줄 아래로 */
  #music-home .learning-mobile-nav.ui-nav { top: 106px; }
  #music-home .learning-topbar .ui-topline { margin-bottom: 62px; }   /* 위 메뉴가 들어갈 자리 — 로고 줄과 판 종류 탭 사이(무대에서 탭 줄을 가리지 않게) */
  #music-home .ui-lb-hero { min-height: 320px; padding: 24px; }
  #music-home .ui-lb-discs img { width: 52px; height: 52px; }
}

/* ⋯ 버튼은 머리띠(.cw-header) 안에 있다 — 머리띠 기준으로 오른쪽 끝에 (2026-10-04: 머리띠 밖에 있을 때는 머리띠에 가려 눌리지 않았음) */
.cw-header .ui-more-btn { position: absolute; z-index: 5; pointer-events: auto; }

/* ── 로그인 안내 (js/login-prompt.js, 2026-10-04) — 로그인 전에만 보인다 ── */
.lp-g { width: 18px; height: 18px; flex: none; }
.ui-chip-login { padding: 0 13px 0 10px; gap: 6px; font: 900 13px var(--ui-font); color: var(--ui-vio); cursor: pointer; white-space: nowrap; flex: none; }
.ui-chip-login[hidden], .ui-lb-login[hidden], .lp-start[hidden] { display: none !important; }
.lp-google {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 14px; border-radius: 12px;
  border: 1.5px solid #dadce0; background: #fff;
  font: 700 14px var(--ui-font); color: #3c4043; cursor: pointer; white-space: nowrap;
}
.lp-google:active { background: #f1f3f4; }
.ui-lb-login {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 12px; padding: 10px 12px; border-radius: 16px;
  background: var(--ui-card-soft); border: 1px solid var(--ui-line);
}
/* 글이 긴 언어(영어·일본어·스페인어…)는 버튼이 글 자리를 다 가져가 한 낱말씩 꺾였다 → 글이 160px 을 못 얻으면 버튼이 아랫줄로 내려가 한 줄을 다 쓴다 */
.ui-lb-login > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 999 1 160px; }
.ui-lb-login .lp-google { flex: 1 0 auto; max-width: 100%; }
.ui-lb-login b { font: 900 13px var(--ui-font); color: var(--ui-ink); }
.ui-lb-login small { font: 500 11px var(--ui-font); color: var(--ui-mute); }
.lp-start { margin-top: 12px; text-align: center; }
.lp-start .lp-google { width: 100%; height: 48px; border-radius: 15px; font-size: 15px; }
.lp-start p { margin: 8px 0 0; font: 500 11px var(--ui-font); color: #907e9f; line-height: 1.5; }
@media (max-width: 520px) {
  .ui-lb-login { flex-direction: column; flex-wrap: nowrap; align-items: stretch; text-align: center; }
  .ui-lb-login > span, .ui-lb-login .lp-google { flex: none; }   /* 세로로 쌓을 때는 위의 flex-basis 160px 이 높이가 된다 → 끈다 */
  .ui-chip-login { padding: 0 10px; }
  .ui-chip-login .lp-g { display: none; }   /* 폰: 칩 줄이 좁아 글자만 */
}

/* 가방 칩 (2026-10-04) — 그림은 동그랗게 자르지 않는다 */
#music-home .ui-chip-bag img { border-radius: 0; object-fit: contain; }
#music-home .ui-chip-bag { cursor: pointer; }
@media (max-width: 520px) {
  /* 폰: 칩 줄이 꽉 찬다 → 로고를 줄이고 칩 사이를 좁힌다 */
  #music-home .learning-topbar .learning-logo { width: 78px; height: 42px; }
  #music-home .ui-chips { gap: 4px; }
  #music-home .ui-chip { padding: 0 8px 0 4px; gap: 3px; }
  #music-home .ui-chip-me { padding: 0 4px; }
  #music-home .ui-chip img, #music-home .ui-flame { width: 24px; height: 24px; }
}

/* ── 광고 전용 보물상자 (js/ad-chest.js, 2026-10-04) ── */
.adc-overlay { position: fixed; inset: 0; z-index: 9150; display: none; align-items: center; justify-content: center; padding: 16px; background: var(--ui-dim); }
.adc-overlay.show { display: flex; }
.adc-card { position: relative; width: min(360px, 100%); max-height: 92vh; overflow: auto; padding: 22px 20px 20px; border-radius: 26px; background: var(--ui-card); box-shadow: 0 24px 60px rgba(26, 15, 58, .45); text-align: center; font-family: var(--ui-font); color: var(--ui-ink); }
.adc-card .adc-close:not(.ui-btn) { position: absolute; top: 12px; right: 12px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f1ecfa; color: var(--ui-soft); font-size: 16px; cursor: pointer; }
.adc-chest { width: 132px; height: 132px; object-fit: contain; filter: drop-shadow(0 10px 16px rgba(90, 60, 153, .3)); }
.adc-card h2 { margin: 6px 0 4px; font: 900 21px var(--ui-font); }
.adc-card p { margin: 0 0 12px; font: 500 13px var(--ui-font); color: var(--ui-mute); line-height: 1.5; }
.adc-card h3 { margin: 0 0 6px; font: 900 12px var(--ui-font); color: var(--ui-soft); text-align: left; }
.adc-odds { list-style: none; margin: 0 0 16px; padding: 4px 12px; border-radius: 16px; background: var(--ui-card-soft); border: 1px solid var(--ui-line); }
.adc-odds li { display: flex; align-items: center; gap: 10px; padding: 6px 0; font: 700 13px var(--ui-font); }
.adc-odds li + li { border-top: 1px solid var(--ui-line); }
.adc-odds img { width: 28px; height: 28px; object-fit: contain; }
.adc-odds span { flex: 1; text-align: left; }
.adc-odds b { color: var(--ui-vio); }
.adc-result .adc-chest { width: 96px; height: 96px; opacity: .9; }
.adc-got { display: block; width: 110px; height: 110px; margin: -18px auto 0; object-fit: contain; animation: adc-pop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes adc-pop { from { transform: scale(.3) translateY(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── 업데이트 안내 (js/app-update.js, 2026-10-04) — 화면을 막는다 ── */
.upd-overlay { position: fixed; inset: 0; z-index: 9900; display: none; align-items: center; justify-content: center; padding: 20px; background: linear-gradient(180deg, var(--ui-bg-top), var(--ui-bg-lav)); }
.upd-overlay.show { display: flex; }
.upd-card { width: min(340px, 100%); text-align: center; font-family: var(--ui-font); color: var(--ui-ink); }
.upd-card img { width: 220px; max-width: 70%; }
.upd-card h2 { margin: 18px 0 8px; font: 900 22px var(--ui-font); }
.upd-card p { margin: 0 0 22px; font: 500 14px var(--ui-font); color: var(--ui-mute); line-height: 1.6; word-break: keep-all; }
.upd-card small { display: block; margin-top: 14px; font: 500 11px var(--ui-font); color: var(--ui-off); }

/* 계정 삭제 줄 (아바타 창) */
.ui-row-danger span { color: var(--ui-danger); }

/* ── 안내·동의 창 (js/legal.js, 2026-10-04) ── */
.lg-overlay { position: fixed; inset: 0; z-index: 9200; display: none; align-items: center; justify-content: center; padding: 14px; background: var(--ui-dim); }
.lg-overlay.show { display: flex; }
#lg-page { z-index: 9300; }
.lg-card, .lg-doc { width: min(420px, 100%); max-height: 92vh; overflow: auto; padding: 16px 18px 18px; border-radius: 24px; background: var(--ui-card); box-shadow: 0 24px 60px rgba(26, 15, 58, .45); font-family: var(--ui-font); color: var(--ui-ink); }
.lg-doc { width: min(760px, 100%); height: 92vh; padding: 12px 12px 12px; display: flex; flex-direction: column; overflow: hidden; }
.lg-doc iframe { flex: 1; width: 100%; border: 0; border-radius: 14px; background: #f7f4fc; }
.lg-card header, .lg-doc header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.lg-card h2, .lg-doc h2 { margin: 0; font: 900 18px var(--ui-font); }
.lg-close { flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #f1ecfa; color: var(--ui-soft); font-size: 16px; cursor: pointer; }
.lg-card .ui-row { width: 100%; text-decoration: none; }
.lg-card .ui-row i { font-size: 12px; }
.lg-desc { margin: 0 0 12px; font: 500 13.5px var(--ui-font); color: var(--ui-soft); line-height: 1.6; word-break: keep-all; }
.lg-check { display: flex; align-items: flex-start; gap: 10px; padding: 11px 12px; margin-bottom: 8px; border-radius: 14px; background: var(--ui-card-soft); border: 1px solid var(--ui-line); font: 700 13.5px var(--ui-font); line-height: 1.5; cursor: pointer; }
.lg-check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--ui-vio); }
.lg-link { border: 0; padding: 0; background: none; font: inherit; color: var(--ui-vio); text-decoration: underline; cursor: pointer; }
.lg-go { margin-top: 8px; }
.lg-note { margin: 10px 2px 0; font: 500 12px var(--ui-font); color: var(--ui-mute); line-height: 1.5; }
.lg-ver { margin: 12px 0 0; text-align: center; font: 500 11px var(--ui-font); color: var(--ui-off); }

/* ── 첫 판 안내 (js/first-guide.js, 2026-10-04) — 맵·타일 위에 얹는 표시 ── */
/* 판을 열 때·한동안 손을 안 댈 때: 통통 튀며 노란 빛 (원래의 어두운 바탕 그대로 — 사용자 2026-10-04: 색보다 움직임으로) */
@keyframes fg-pulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 0 rgba(255, 210, 61, 0); transform: translateY(0) scale(1); }
  18% { box-shadow: 0 14px 28px rgba(0, 0, 0, .4), 0 0 0 7px rgba(255, 210, 61, .95); transform: translateY(-12px) scale(1.05); }
  36% { transform: translateY(0) scale(1); }
  52% { box-shadow: 0 12px 26px rgba(0, 0, 0, .4), 0 0 0 5px rgba(255, 210, 61, .8); transform: translateY(-6px) scale(1.03); }
  70% { transform: translateY(0) scale(1); box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 3px rgba(255, 210, 61, .5); }
}
/* 힌트가 바뀔 때(다른 낱말을 골랐을 때): 한 번 살짝 커졌다 돌아온다 */
@keyframes fg-pop { 0% { transform: scale(1); } 35% { transform: scale(1.06); box-shadow: 0 8px 24px rgba(0, 0, 0, .35), 0 0 0 4px rgba(255, 210, 61, .75); } 100% { transform: scale(1); } }
#hud-3d-clue.fg-pop { animation: fg-pop .45s ease-out 2; }
#hud-3d-clue.fg-pulse { animation: fg-pulse 1.5s ease-in-out 2; }
.fg-card { position: fixed; left: 50%; top: 42%; z-index: 2500; width: min(86vw, 420px); margin-left: calc(min(86vw, 420px) / -2); padding: 18px 20px 20px; border-radius: 24px; background: #1c1836; color: #fff; text-align: center; box-shadow: 0 0 0 4px #ffd23d, 0 24px 60px rgba(10, 5, 40, .55); font-family: var(--ui-font); pointer-events: none; transform-origin: center; animation: fg-in .35s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes fg-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.fg-card small { display: block; font: 900 12px var(--ui-font); letter-spacing: 2px; color: #ffd23d; }
.fg-card b { display: inline-block; margin: 8px 0 8px; padding: 3px 12px; border-radius: 999px; background: #e0364f; font: 900 13px var(--ui-font); }
.fg-card p { margin: 0; font: 700 19px/1.5 var(--ui-font); word-break: keep-all; }
.fg-arrow { position: fixed; z-index: 2400; width: 0; height: 0; pointer-events: none; }
.fg-arrow span { position: absolute; left: -22px; top: -92px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: #ffd23d; color: #2e2150; font-size: 22px; box-shadow: 0 6px 14px rgba(0, 0, 0, .35); animation: fg-bob .8s ease-in-out infinite; }
@keyframes fg-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
.fg-tip { position: fixed; left: 50%; top: 76px; z-index: 2400; transform: translateX(-50%); max-width: 88vw; padding: 10px 16px; border-radius: 16px; background: rgba(28, 24, 54, .92); color: #fff; text-align: center; pointer-events: none; font-family: var(--ui-font); box-shadow: 0 8px 20px rgba(10, 5, 40, .35); }
.fg-tip b { display: block; font: 900 17px var(--ui-font); color: #ffd23d; }
.fg-tip small { display: block; margin-top: 2px; font: 500 12px var(--ui-font); opacity: .9; }
.fg-arrow[hidden], .fg-tip[hidden] { display: none; }

/* ── 힌트 줄 글자를 키운다 (2026-10-04, 사용자: 힌트가 작다 — 폰에서 12.5px 이던 것을 15px 로) ── */
#hud-3d-bottom .hud-clue-text { font-size: 1rem; line-height: 1.4; max-height: 4.3em; }
#hud-3d-bottom .hud-clue-badge { font-size: .8rem; margin-top: 2px; }
@media (max-width: 600px) {
  #hud-3d-bottom .hud-clue-text { font-size: .95rem; line-height: 1.4; max-height: 4.3em; }
  #hud-3d-bottom .hud-clue-badge { font-size: .76rem; }
  /* 힌트 줄이 세 줄일 때 조금 높아져서 방향키 아래 화살표를 가렸다 → 방향키·동작 버튼을 그만큼 올린다 */
  #control-panel { bottom: calc(136px + env(safe-area-inset-bottom)); }
}

/* ── 접근성 (2026-10-04, 외부 검토): 보이는 크기는 그대로 두고 누를 수 있는 영역만 44px 이상으로 ── */
/* 방향키: 이제 진짜 버튼 — 버튼 기본 모양을 지우고(모양은 style.css 의 .dpad-btn 그대로), 둘레 8px 까지 눌린다 */
button.dpad-btn { padding: 0; margin: 0; font-family: inherit; line-height: 1; -webkit-appearance: none; appearance: none; touch-action: none; -webkit-tap-highlight-color: transparent; }
button.dpad-btn::after { content: ''; position: absolute; inset: -8px; }
button.dpad-btn:focus-visible { outline: 3px solid #ffd23d; outline-offset: 2px; }
/* 위쪽 칩(점수·연속학습·가방·프로필): 위아래 5px 씩 더 눌린다 */
#music-home .ui-chip { position: relative; }
#music-home .ui-chip::after { content: ''; position: absolute; inset: -5px -2px; }
#music-home .ui-chip-me::after { inset: -5px; }
@media (max-width: 520px) {
  /* 판 화면의 뒤로 가기: 그림은 24px 동그라미 그대로, 버튼은 44px (그림을 버튼이 아니라 그림 자신이 동그랗게 자른다) */
  body.in-game-3d .cw-game-back { width: 44px; height: 44px; flex-basis: 44px; margin: -10px; overflow: visible; border-radius: 0; }
  body.in-game-3d .cw-game-back img { clip-path: circle(12px at 50% 50%); }
}

/* ── 타이틀 화면 (2026-10-04) — 그림 파일 없이 그린다: 어두운 무대 · 조명 · 로고 · 낱말판 · 큐브 냥이 ── */
#title-screen { position: fixed; inset: 0; z-index: 9990; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: max(5vh, env(safe-area-inset-top)) 16px max(5vh, env(safe-area-inset-bottom));
  background: radial-gradient(120% 70% at 50% 108%, #ff5fb0 0%, #8a3ff0 26%, #2b1766 58%, #120a33 100%); font-family: var(--ui-font, sans-serif); transition: opacity .7s ease; }
#title-screen.ts-out { opacity: 0; pointer-events: none; }
.ts-bokeh { position: absolute; inset: 0; background: url(../img/bg_kpop.jpg) center / cover; opacity: .28; mix-blend-mode: screen; }
.ts-beam { position: absolute; top: -12%; left: 50%; width: 46vmin; height: 135%; transform-origin: 50% 0; mix-blend-mode: screen; filter: blur(7px); opacity: .5;
  background: linear-gradient(180deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 82%); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
.ts-beam-a { --c: -26deg; background: linear-gradient(180deg, rgba(120, 220, 255, .9), rgba(120, 220, 255, 0) 82%); animation: ts-sway 5.2s ease-in-out infinite alternate; }
.ts-beam-b { --c: 4deg; background: linear-gradient(180deg, rgba(255, 150, 220, .9), rgba(255, 150, 220, 0) 82%); animation: ts-sway 6.4s ease-in-out -2s infinite alternate-reverse; }
.ts-beam-c { --c: 30deg; background: linear-gradient(180deg, rgba(255, 226, 120, .85), rgba(255, 226, 120, 0) 82%); animation: ts-sway 4.6s ease-in-out -1s infinite alternate; }
@keyframes ts-sway { from { transform: translateX(-50%) rotate(calc(var(--c) - 9deg)); } to { transform: translateX(-50%) rotate(calc(var(--c) + 9deg)); } }
.ts-dots i { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #fff; opacity: 0; animation: ts-twinkle 2.4s ease-in-out infinite; }
.ts-dots i:nth-child(1) { left: 8%; top: 12%; } .ts-dots i:nth-child(2) { left: 88%; top: 9%; animation-delay: .5s; } .ts-dots i:nth-child(3) { left: 16%; top: 44%; animation-delay: 1s; background: #ffe27a; }
.ts-dots i:nth-child(4) { left: 82%; top: 40%; animation-delay: 1.4s; } .ts-dots i:nth-child(5) { left: 6%; top: 70%; animation-delay: .8s; background: #8fe3ff; } .ts-dots i:nth-child(6) { left: 93%; top: 66%; animation-delay: .2s; background: #ff9fdc; }
.ts-dots i:nth-child(7) { left: 30%; top: 5%; animation-delay: 1.8s; } .ts-dots i:nth-child(8) { left: 70%; top: 28%; animation-delay: 1.1s; background: #ffe27a; } .ts-dots i:nth-child(9) { left: 24%; top: 84%; animation-delay: .4s; }
.ts-dots i:nth-child(10) { left: 76%; top: 86%; animation-delay: 1.6s; background: #8fe3ff; } .ts-dots i:nth-child(11) { left: 48%; top: 34%; animation-delay: 2s; width: 4px; height: 4px; } .ts-dots i:nth-child(12) { left: 58%; top: 92%; animation-delay: .9s; width: 4px; height: 4px; }
@keyframes ts-twinkle { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: .95; transform: scale(1.25); } }
.ts-logo { position: relative; width: min(86vw, 52vh, 520px); height: auto; filter: drop-shadow(0 10px 22px rgba(10, 4, 40, .55)); animation: ts-logo-in .7s cubic-bezier(.2, 1.4, .4, 1) both, ts-float 3.6s ease-in-out .7s infinite; }
@keyframes ts-logo-in { from { opacity: 0; transform: translateY(-26px) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes ts-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.ts-stage { position: relative; --u: min(18vw, 9.6vh, 86px); width: calc(var(--u) * 4.4); height: calc(var(--u) * 4.6); margin-top: 1vh; }
.ts-board { position: absolute; left: 50%; top: 0; width: calc(var(--u) * 4); height: calc(var(--u) * 4); transform: translateX(-50%) perspective(900px) rotateX(24deg); transform-origin: 50% 100%; }
.ts-floor { position: absolute; left: 50%; bottom: 0; width: 150%; height: 34%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .5), rgba(255, 190, 240, .2) 55%, rgba(255, 255, 255, 0)); filter: blur(4px); z-index: -1; }
.ts-t { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--u) - 6px); height: calc(var(--u) - 6px); display: grid; place-items: center;
  border-radius: calc(var(--u) * .2); background: linear-gradient(180deg, #fff, #f1ecff); border: calc(var(--u) * .07) solid #ff7fc4; color: #1b1340; font: 900 calc(var(--u) * .52) / 1 var(--ui-font, sans-serif);
  box-shadow: 0 calc(var(--u) * .1) 0 #c94f9a, 0 calc(var(--u) * .22) calc(var(--u) * .3) rgba(10, 4, 40, .45); opacity: 0; animation: ts-pop .5s cubic-bezier(.2, 1.5, .4, 1) calc(.35s + var(--d) * .14s) both; }
.ts-t.ts-gold { border-color: #ffc23d; box-shadow: 0 calc(var(--u) * .1) 0 #d08a12, 0 calc(var(--u) * .22) calc(var(--u) * .3) rgba(10, 4, 40, .45); }
.ts-t.ts-ko { border-color: #58c8f5; box-shadow: 0 calc(var(--u) * .1) 0 #2b8fc4, 0 calc(var(--u) * .22) calc(var(--u) * .3) rgba(10, 4, 40, .45); }
.ts-t.ts-key { background: linear-gradient(180deg, #fff6c9, #ffe27a); }
@keyframes ts-pop { from { opacity: 0; transform: translateY(calc(var(--u) * -.9)) scale(.5); } to { opacity: 1; transform: none; } }
/* 큐브 냥이: 회색 정육면체 얼굴 + 귀 + 노란 눈, 머리 위에 글자 타일 */
.ts-cat { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--u) - 6px); height: calc(var(--u) - 6px); opacity: 0; animation: ts-cat-in .6s cubic-bezier(.2, 1.5, .4, 1) 1.75s both, ts-hop 1.5s ease-in-out 2.4s infinite; }
.ts-cat span { position: absolute; inset: 8% 6% 0; border-radius: 22%; background: linear-gradient(180deg, #8d93a6, #5d6377); box-shadow: 0 calc(var(--u) * .1) 0 #3d4254, 0 calc(var(--u) * .2) calc(var(--u) * .26) rgba(10, 4, 40, .5); }
.ts-cat span::before, .ts-cat span::after { content: ''; position: absolute; top: -20%; width: 34%; height: 34%; background: #7c8296; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.ts-cat span::before { left: 4%; } .ts-cat span::after { right: 4%; }
.ts-cat u { position: absolute; top: 44%; width: 22%; height: 14%; border-radius: 50%; background: #ffd23d; box-shadow: inset 0 calc(var(--u) * -.03) 0 #1b1340; animation: ts-blink 3.2s infinite; }
.ts-cat u:first-child { left: 16%; } .ts-cat u:last-child { right: 16%; }
.ts-hold { position: absolute; left: 50%; top: -62%; width: 62%; height: 62%; transform: translateX(-50%); display: grid; place-items: center; border-radius: 20%; background: #fff; border: calc(var(--u) * .05) solid #7c3aed; color: #1b1340; font: 900 calc(var(--u) * .32) / 1 var(--ui-font, sans-serif); font-style: normal; box-shadow: 0 0 calc(var(--u) * .3) rgba(255, 255, 255, .7); }
@keyframes ts-cat-in { from { opacity: 0; transform: translateY(calc(var(--u) * -1.4)); } to { opacity: 1; transform: none; } }
@keyframes ts-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(calc(var(--u) * -.14)); } }
@keyframes ts-blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.ts-foot { position: relative; width: min(84vw, 420px); text-align: center; }
.ts-tip { min-height: 2.6em; margin: 0 0 12px; color: #fff; font: 700 15px / 1.3 var(--ui-font, sans-serif); text-shadow: 0 2px 8px rgba(10, 4, 40, .7); opacity: 0; }
.ts-tip.on { animation: ts-tip 2.4s ease both; }
@keyframes ts-tip { 0% { opacity: 0; transform: translateY(6px); } 14%, 86% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.ts-bar { height: 12px; border-radius: 99px; background: rgba(255, 255, 255, .22); border: 2px solid rgba(255, 255, 255, .55); overflow: hidden; }
.ts-bar i { display: block; height: 100%; width: 88%; border-radius: 99px; background: linear-gradient(90deg, #ffd23d, #ff7fc4, #58c8f5); transform-origin: 0 50%; animation: ts-load 2.4s cubic-bezier(.2, .7, .3, 1) both; transition: width .25s ease; }
#title-screen.ts-done .ts-bar i { width: 100%; }
@keyframes ts-load { from { transform: scaleX(.04); } to { transform: scaleX(1); } }
/* 처음 온 사람: 진행 막대 대신 「시작하기」 (title-screen.js ask) — 언어 창은 이 화면 위에 떠야 한다 */
#title-screen.ts-ask .ts-bar { display: none; }
.ts-go { animation: ts-go-in .45s cubic-bezier(.2, 1.4, .4, 1) both; }
.ts-go[hidden] { display: none; }
@keyframes ts-go-in { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
.ts-start { display: block; width: 100%; min-height: 58px; border: 0; border-radius: 99px; background: linear-gradient(180deg, #ffe27a, #ffc23d); color: #1b1340; font: 900 21px / 1 var(--ui-font, sans-serif); cursor: pointer;
  box-shadow: 0 6px 0 #d08a12, 0 14px 26px rgba(10, 4, 40, .45); }
.ts-start:active { transform: translateY(4px); box-shadow: 0 2px 0 #d08a12, 0 8px 16px rgba(10, 4, 40, .45); }
.ts-links { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.ts-link { min-height: 44px; padding: 0 16px; border: 2px solid rgba(255, 255, 255, .5); border-radius: 99px; background: rgba(255, 255, 255, .16); color: #fff; font: 700 14px / 1 var(--ui-font, sans-serif); cursor: pointer; }
.ts-start:focus-visible, .ts-link:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
body #cw-lang-overlay { z-index: 9995; }
@media (orientation: landscape) and (max-height: 520px) { .ts-logo { width: min(40vw, 46vh); } .ts-stage { --u: min(9vh, 44px); } .ts-tip { margin-bottom: 6px; font-size: 13px; min-height: 1.4em; } }
@media (prefers-reduced-motion: reduce) { .ts-beam, .ts-logo, .ts-cat, .ts-dots i { animation-iteration-count: 1; } }
.fg-tip.fg-compact { top: 58px; padding: 6px 14px; white-space: nowrap; }
.fg-tip.fg-compact small { display: none; }
.fg-tip.fg-compact b { font-size: 15px; }
.fg-arrow.fg-ring span { left: -25px; top: -25px; width: 50px; height: 50px; background: transparent; border: 4px solid #ffd23d; font-size: 0; box-shadow: 0 0 14px 4px rgba(255, 210, 61, .75), inset 0 0 10px rgba(255, 210, 61, .5); animation: fg-ring .9s ease-in-out infinite; }
@keyframes fg-ring { 0%, 100% { transform: scale(.82); opacity: 1; } 50% { transform: scale(1.18); opacity: .7; } }

/* 첫 보물을 게스트로 얻었을 때: 다음 보물부터는 로그인 (artist-treasures.js reveal) */
.treasure-reveal-login { margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); }
.treasure-reveal-login p { margin: 0 0 12px; color: #fff; font: 700 14px / 1.45 var(--ui-font, sans-serif); }
.treasure-reveal-login button { min-height: 44px; padding: 0 22px; border: 0; border-radius: 999px; background: #fff; color: #2e2150; font: 800 15px var(--ui-font, sans-serif); cursor: pointer; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }

/* ── 보상을 눌러서 받기 (2026-10-05) — 미션 줄의 「받기」 · 연속학습 창의 받을 보상 · 그림 퍼즐의 「보상 받기」 · 받을 것이 있다는 점 ── */
#music-home .ui-ms-get { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 28px; padding: 0 12px 0 8px; border: 0; border-radius: 999px; background: var(--ui-grad); color: #fff; font: 900 11px var(--ui-font); box-shadow: 0 3px 0 var(--ui-grad-edge); cursor: pointer; animation: ui-pulse 1.2s ease-in-out infinite alternate; }
#music-home .ui-ms-get img { width: 20px; height: 20px; object-fit: contain; }
#music-home .ui-ms-get:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ui-grad-edge); }
#music-home .ui-ms-row.is-owed { border-style: dashed; }
#music-home .ui-lb-streak.has-claim, #music-home .ui-chip.has-claim { position: relative; }
#music-home .ui-lb-streak.has-claim::after, #music-home .ui-chip.has-claim::after { content: ""; position: absolute; right: 8px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--ui-new); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); }
#music-home .ui-chip.has-claim::after { right: -2px; top: -2px; width: 10px; height: 10px; }
#streak-owed { border-top: 1px solid #d9bd8b77; margin: 9px 0; padding: 8px 0; }
#streak-owed[hidden] { display: none; }
#streak-owed p { margin: 0 0 6px; }
#streak-owed-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 8px; }
#streak-owed-list span { display: inline-flex; align-items: center; gap: 3px; font-weight: 900; }
#streak-owed-list img { width: 30px; height: 30px; object-fit: contain; }
#streak-owed button { min-height: 44px; padding: 0 26px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #7c3aed, #e0489e); color: #fff; font: 900 15px inherit; box-shadow: 0 4px 0 #5b21b6; cursor: pointer; }
#streak-owed button:active { transform: translateY(3px); box-shadow: 0 1px 0 #5b21b6; }
.achv-claim { display: block; margin: 12px auto 0; min-height: 44px; padding: 0 26px; border: 0; border-radius: 999px; background: linear-gradient(135deg, #7c3aed, #e0489e); color: #fff; font: 900 15px var(--ui-font, sans-serif); box-shadow: 0 4px 0 #5b21b6; cursor: pointer; }
.achv-claim:active { transform: translateY(3px); box-shadow: 0 1px 0 #5b21b6; }
#achv-panel .achv-claim-all { margin: 10px 0 0; min-height: 40px; font-size: 13px; }
#achv-panel .achv-card { position: relative; }
#achv-panel .achv-get { position: absolute; left: -4px; top: -8px; z-index: 2; font-size: 10px; font-weight: 900; color: #fff; background: linear-gradient(135deg, #7c3aed, #e0489e); border-radius: 999px; padding: 3px 9px; box-shadow: 0 3px 6px rgba(124, 58, 237, .4); }
.achv-ladder li.owed em { color: #ffd66b; font-weight: 900; opacity: 1; }
.achv-ladder li.got { opacity: .78; }
.achv-ladder li.got span { color: #7fe0a7; opacity: 1; font-weight: 900; }
#modal .ui-done-chip i.ui-done-gift { background: linear-gradient(135deg, #ffd66b, #f59e0b); font-size: 16px; font-style: normal; }
#modal .ui-done-chip.is-claim { border-color: #f5c451; box-shadow: 0 3px 0 #f1dca0; }

/* ── 게스트에게 로그인 안내 창 (login-prompt.js ④, 2026-10-05) ── */
#lp-nudge { position: fixed; inset: 0; z-index: 2050; display: flex; align-items: center; justify-content: center; padding: 20px; background: #23173bbd; backdrop-filter: blur(6px); }
.lp-nudge-card { width: min(380px, 100%); padding: 24px 20px 18px; border-radius: 26px; background: linear-gradient(160deg, #fff, #f6efff); box-shadow: 0 24px 60px #2a164d55; text-align: center; font-family: var(--ui-font, sans-serif); }
.lp-nudge-card img { width: 84px; height: 84px; object-fit: contain; }
.lp-nudge-card h2 { margin: 6px 0 8px; font: 900 20px / 1.3 var(--ui-font, sans-serif); color: #35245a; }
.lp-nudge-card p { margin: 0 0 16px; font: 500 14px / 1.55 var(--ui-font, sans-serif); color: #6b5a82; }
.lp-nudge-card .lp-google { width: 100%; height: 48px; border-radius: 15px; font-size: 15px; }
.lp-nudge-later { display: block; width: 100%; min-height: 44px; margin-top: 6px; border: 0; background: none; color: #8b7a9e; font: 700 14px var(--ui-font, sans-serif); cursor: pointer; }
/* 로비 큰 제목의 강조 낱말(K-POP · 한국어)은 줄 끝에서 「K-」 뒤로 꺾이지 않게 (2026-10-05) */
#music-home h1 em, #music-home h2.ui-title em { white-space: nowrap; }

/* 무대 > 플레이리스트 탭: 탭째로 「COMING SOON」 (2026-10-05) */
#music-home #years-tab { position: relative; opacity: .8; }
#music-home .pl-soon-tag { position: absolute; right: 2px; top: -8px; padding: 2px 7px; border-radius: 999px; background: var(--ui-pink, #e0489e); color: #fff; font: 900 8px / 1.4 var(--ui-font, sans-serif); letter-spacing: .04em; font-style: normal; white-space: nowrap; box-shadow: 0 2px 5px rgba(224, 72, 158, .35); }

/* ── 히든 무대 설명 (2026-10-05): 아티스트 탭 맨 위 안내 · 무대 카드 상태 줄 · 보물 창의 진행 줄 ── */
#music-home .artist-intro { grid-column: 1 / -1; padding: 16px 18px; border-radius: 22px; background: #fff; border: 1px solid var(--ui-line, #e6dcf5); box-shadow: 0 8px 20px rgba(149, 114, 175, .14); font-family: var(--ui-font, sans-serif); }
#music-home .artist-intro b { display: block; font-size: 17px; font-weight: 900; color: var(--ui-ink, #2e2452); }
#music-home .artist-intro p { margin: 6px 0 12px; font-size: 13px; line-height: 1.55; color: var(--ui-soft, #6b5a82); }
#music-home .artist-intro ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: center; }
#music-home .artist-intro li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--ui-card-soft, #f5f0fd); font-size: 12px; font-weight: 800; color: var(--ui-vio, #6d3fd0); }
#music-home .artist-intro li + li::before { content: "→"; margin: 0 4px 0 -2px; color: #b9a8e6; font-weight: 900; }
#music-home .artist-intro li i { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--ui-vio, #6d3fd0); color: #fff; font-style: normal; font-size: 11px; font-weight: 900; }
#music-home .artist-status { margin-top: 10px; text-align: center; font: 800 12px var(--ui-font, sans-serif); color: #c9bfe6; }
#music-home .artist-status.is-ready { color: #f3d27a; }
#music-home .artist-status.is-got { color: #8fe3b4; }
#treasure-reveal .treasure-reveal-progress { margin: 10px 0 0; padding: 7px 14px; border-radius: 999px; display: inline-block; background: rgba(255, 255, 255, .14); color: #ffe9a8; font-size: 13px; font-weight: 800; line-height: 1.4; }

/* ── 진엔딩 (true-hidden.js, 2026-10-05): ARTIST 탭 무대 칸의 키워드 힌트·입장 버튼, 판 안의 스킬 버튼 ── */
#music-home .artist-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin-top: 10px; }
#music-home .artist-keys span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 999px; background: #ffffff12; box-shadow: inset 0 0 0 1px #ffffff26; color: #d9d0f2; font: 800 11px var(--ui-font, sans-serif); letter-spacing: .08em; white-space: nowrap; }
#music-home .artist-keys span i { font-style: normal; letter-spacing: 0; color: #b9aadb; font-weight: 700; }
#music-home .artist-keys span.is-got { background: #f3d27a22; box-shadow: inset 0 0 0 1px #f3d27a88; color: #f3d27a; letter-spacing: 0; }
#music-home .artist-true { display: block; width: 100%; min-height: 40px; margin-top: 10px; border: 0; border-radius: 14px; background: #ffffff14; color: #c9bfe6; font: 900 12px var(--ui-font, sans-serif); cursor: pointer; }
#music-home .artist-true.is-ready { background: linear-gradient(135deg, #f3d27a, #e0489e); color: #2a1648; box-shadow: 0 4px 0 #9a3d77; }
#music-home .artist-true.is-done { background: #8fe3b422; color: #8fe3b4; }
.hud-btn.skill-btn { background: linear-gradient(135deg, #7c3aed, #58c8f5); color: #fff; font-weight: 900; border-radius: 15px; padding: 0 12px; white-space: nowrap; }
.hud-btn.skill-btn[hidden] { display: none; }
.hud-btn.skill-btn.is-used { background: #94a3b8; opacity: .6; }
body.hidden-stage .hud-btn.skill-btn { display: none; }