:root { --header-h: 112px; } /* header 實際高度由 JS 同步（syncHeaderH），此為 fallback */
* { margin:0; padding:0; box-sizing:border-box; }
:where(a, button, select, input):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
:where(a, button, select, input) {
  touch-action: manipulation;
  scroll-margin-block: var(--header-h, 112px) calc(92px + env(safe-area-inset-bottom, 0px));
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 10000; min-height: var(--tap-target);
  display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 10px;
  background: var(--ink); color: var(--ink); font-weight: 700; text-decoration: none;
  transform: translateY(calc(-100% - 16px));
}
.skip-link:focus-visible { transform: translateY(0); }
body {
  padding-top: var(--header-h, 112px); /* 讓開 fixed header（#hero 不再重複讓位——2026-09-07 消首頁留白） */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Hiragino Sans", "Yu Gothic", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  padding-bottom: 80px;
}
#main-content { min-height: calc(100svh - 120px); }
header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: linear-gradient(135deg, #111118 0%, #0A0A0F 50%, #1A1A24 100%);
  padding: 6px 16px;
  box-shadow: 0 2px 8px color-mix(in srgb, black 20%, transparent);
}
/* 桌機三欄：logo、品牌資訊、控制列各有穩定區域 */
.header-top {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) 156px;
  align-items: center; gap: 14px;
  width: 100%; min-height: 56px; margin: 0 auto; padding: 6px 14px;
  background: rgba(26,26,36,.9); border: 1px solid var(--border);
  border-radius: 24px; box-shadow: 0 7px 20px color-mix(in srgb, var(--purple) 13%, transparent);
  backdrop-filter: blur(7px);
}
.header-logo {
  width: 48px; height: 48px; margin: 0;
  background: radial-gradient(circle at 50% 35%, #FFF8E8 0%, var(--border) 70%);
  border-radius: 50%;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--pink) 22%, transparent);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 3px solid #fff;
}
.header-logo img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.header-mid { min-width: 0; text-align: left; }
header h1 {
  overflow: hidden; color: var(--ink); font-size: 24px; line-height: 1.3;
  letter-spacing: 1px; text-overflow: ellipsis; white-space: nowrap;
  /* 2026-09-07：舊亮色主題殘留 #5A3E5B＋白色下影，暗底上字與影糊在一起 → 亮字無影 */
}
header h1 .h1-sub { font-size: 15px; font-weight: 600; color: var(--purple-text); letter-spacing: 1.5px; margin-left: 6px; }
header p {
  overflow: hidden; margin-top: 3px; color: var(--muted); font-size: 13px;
  font-weight: 600; line-height: 1.45; text-overflow: ellipsis; white-space: nowrap;
}
.header-controls {
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: center; gap: 7px; min-width: 0; min-height: 95px;
}
.lang-switch {
  display: inline-flex; gap: 3px; background: rgba(255,255,255,.7);
  border: 2px solid rgba(255,255,255,.9); border-radius: 999px; padding: 3px;
  backdrop-filter: blur(4px); box-shadow: 0 2px 8px color-mix(in srgb, var(--pink) 15%, transparent);
}
.lang-btn {
  border: none; background: transparent; color: #26262F; /* 淺膠囊上改用深字（原 --muted 淺藍灰疊淺底看不清） */
  font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  min-width: var(--tap-target); min-height: var(--tap-target);
  cursor: pointer; transition: background .15s, color .15s;
}
.lang-btn:hover { background: rgba(10,10,15,.08); color: #0A0A0F; }
.lang-btn.active {
  background: linear-gradient(135deg, var(--purple-text), var(--pink-text));
  color: #12121A; /* 粉/紫漸層上要深字才讀得到（原 --ink 淺字對比僅 ~2.9） */
}
nav {
  display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(26,26,36,.96); backdrop-filter: blur(10px);
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  border-top: 2px solid var(--border); box-shadow: 0 -4px 16px rgba(0,0,0,.3);
}
/* 底部固定 tab 列實測 79px，74px 預留不足，最後一行內容會被蓋住（2026-09-04 UX review） */
main { padding-bottom: 100px; }
nav button {
  background: var(--panel2); color: var(--ink); border: 2px solid var(--border);
  min-height: var(--tap-target);
  padding: 6px 2px; border-radius: 12px; cursor: pointer; font-size: 11px; font-weight: 700;
  transition: color .2s, background-color .2s, border-color .2s, box-shadow .2s, transform .2s; flex: 1 1 0; min-width: 0; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; line-height: 1.35;
}
nav button .nav-ko { display: block; font-size: 11px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.nav-ico { margin-right: 3px; }
nav button.active { background: var(--pink-text); border-color: var(--accent-pink, var(--pink-text)); color: var(--ink); box-shadow: 0 4px 14px color-mix(in srgb, var(--pink) 40%, transparent); }
nav button.active .nav-ko { color: rgba(255,255,255,.9); }
nav button:hover { transform: translateY(-2px); }

/* 手機：logo 跨兩列，控制列在品牌文字下方橫排 */
@media (max-width: 600px) {
  :root { --header-h: 98px; }
  header { padding: 8px 10px; }
  .header-top {
    grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: auto auto;
    column-gap: 10px; row-gap: 5px; min-height: 82px; padding: 8px 10px;
    border-radius: 20px;
  }
  .header-logo { grid-row: 1 / 3; width: 58px; height: 58px; }
  .header-mid { align-self: end; }
  header h1 { font-size: 19px; line-height: 1.25; }
  header h1 .h1-sub { font-size: 12px; letter-spacing: .8px; margin-left: 3px; }
  header p { margin-top: 1px; font-size: 11px; line-height: 1.35; }
  .header-controls {
    grid-column: 2; align-self: start; flex-direction: row;
    align-items: center; justify-content: space-between; gap: 6px; min-height: var(--tap-target);
  }
  /* 語言切換（Nick 2026-09-15）：原本貼左不好看 → 靠右；高度縮到約 2/3。
     膠囊 52→34px、按鈕 44→26px；縮掉的觸控面積用 ::after 補回 --tap-target 高，
     維持 44px 級觸控高度（視覺高度不變）。margin-left:auto 讓單顆語言膠囊靠右，
     同時保留歌曲頁「選歌」鈕在左的既有排列。 */
  .header-controls .lang-switch { gap: 1px; padding: 2px; margin-left: auto; }
  .header-controls .lang-btn {
    position: relative;
    padding: 3px 6px; font-size: 10px;
    min-width: 30px; min-height: 26px;
  }
  .header-controls .lang-btn::after {
    content: ''; position: absolute; left: 0; right: 0; top: 50%;
    height: var(--tap-target); transform: translateY(-50%);
  }
  .back-home { padding: 3px 9px; font-size: 11px; }
  nav { gap: 5px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); }
  nav button { padding: 5px 1px; border-radius: 10px; font-size: 10px; }
  /* 400px 級距一列六個 tab 每個僅 ~61px，中韓雙行塞不下會把中文剪到剩半字
     → 窄螢幕只顯示中文主標籤（2026-09-04 手機 UX review） */
  nav button .nav-ko, nav button .nav-ico { display: none; }
  nav button [data-i18n] { display: block; overflow: hidden; text-overflow: ellipsis; }
  main { padding-bottom: 64px; }
}

@media (max-width: 379px) {
  header h1 .h1-sub { display: none; }
  nav button { font-size: 9px; }
}
main { max-width: 760px; margin: 0 auto; padding: 20px 16px 100px; }
main > section { display: none; }
main > section.active { display: block; }
/* 潮牌首頁區塊在 <main> 外，不受 section 隱藏規則影響（2026-09-05） */
/* 學習模式隱藏 street 首頁區塊（2026-09-05 Nick 回報：歌曲頁背景還是 hero） */
body.learning-mode .hero-street,
body.learning-mode .stats-street,
body.learning-mode .features-street,
body.learning-mode .marquee-street,
body.learning-mode #learning-hub { display: none; }
.hero-street, .stats-street, .features-street, .marquee-street { display: block; }

/* 卡片 */
.card {
  background: var(--panel); border: 2px solid var(--border);
  border-radius: 24px; padding: 20px; margin-bottom: 14px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--pink) 6%, transparent);
}

/* 完整歌詞 */
.full-lyrics {
  background: var(--panel); border: 2px solid var(--border);
  border-radius: 24px; padding: 22px; margin-bottom: 14px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--pink) 6%, transparent);
}

/* YouTube 播放器 */
.yt-wrap {
  background: var(--panel); border: 2px solid var(--border);
  border-radius: 20px; padding: 12px; margin-bottom: 14px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--pink) 8%, transparent);
}
.yt-wrap .yt-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
/* macOS 交通燈控制（2026-08-14 Nick 要求：視覺抄 macOS 系統；只在 PC 浮動視窗模式顯示） */
.mac-controls { display: none; }
@media (min-width: 1024px) {
  .mac-controls { display: inline-flex; gap: 6px; flex-shrink: 0; align-items: center; }
}
.mac-btn {
  width: var(--tap-target); height: var(--tap-target); border-radius: 50%; border: 0;
  padding: 0; background: transparent; cursor: pointer; position: relative; transition: transform .12s;
}
.mac-btn:hover { transform: scale(1.15); }
.mac-btn::before {
  content: ''; position: absolute; width: 13px; height: 13px; border-radius: 50%;
  inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  background: var(--mac-color); border: 1px solid rgba(0,0,0,.15);
}
.mac-btn::after {
  content: ''; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 8px; font-weight: 800; color: rgba(0,0,0,.55); line-height: 1; opacity: 0; transition: opacity .12s;
}
.mac-btn:hover::after { opacity: 1; }
.mac-red { --mac-color: #FF5F57; } .mac-red::after { content: '×'; }
.mac-yellow { --mac-color: #FEBC2E; } .mac-yellow::after { content: '−'; }
.mac-green { --mac-color: #28C840; } .mac-green::after { content: '⤢'; }
/* 最大化狀態：綠色按鈕變「還原」符號 */
.yt-wrap.mac-maxed .mac-green::after { content: '⤡'; }
.yt-wrap .yt-title { font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 8px; }
.yt-wrap .yt-link { min-height: var(--tap-target); padding-inline: 4px; display: inline-flex; align-items: center; font-size: 12px; color: var(--pink); text-decoration: none; flex-shrink: 0; }
.yt-wrap .yt-link:hover { text-decoration: underline; }
.yt-frame-wrap { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; }

/* ── YouTube 載入畫面：酷酷力 + 音符飄浮（2026-09-05 Nick 要求黑畫面要有 loader） ── */
.yt-loading {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(160deg, #1a1025 0%, #2d1a3d 40%, #1a1025 100%);
  transition: opacity .6s ease;
}
.yt-loading.yt-loading-hide { opacity: 0; }
.yt-loading-lion {
  width: 88px; height: 88px; object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(255,107,157,.35));
  animation: lionBounce 1.8s ease-in-out infinite;
}
@keyframes lionBounce {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-10px) rotate(2deg); }
}
.yt-loading-notes {
  position: absolute; inset: 0; pointer-events: none;
}
.yt-note {
  position: absolute; font-size: 20px; color: rgba(255,107,157,.7);
  animation: noteFloat 3s ease-in-out infinite;
}
.yt-note-1 { left: 22%; bottom: 30%; animation-delay: 0s; font-size: 18px; }
.yt-note-2 { right: 25%; bottom: 25%; animation-delay: .8s; font-size: 24px; color: rgba(139,124,246,.6); }
.yt-note-3 { left: 60%; bottom: 40%; animation-delay: 1.6s; font-size: 16px; color: rgba(79,195,247,.5); }
@keyframes noteFloat {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  30% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-60px) rotate(15deg); }
}
.yt-loading-dots { display: flex; gap: 8px; }
.yt-loading-dots span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--pink);
  animation: dotPulse 1.4s ease-in-out infinite;
}
.yt-loading-dots span:nth-child(2) { animation-delay: .2s; background: var(--purple); }
.yt-loading-dots span:nth-child(3) { animation-delay: .4s; background: var(--pink); }
@keyframes dotPulse {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
/* 2026-08-25 Nick 要求：影片不可點擊，控制權全交給下方 KITT 播放按鈕 */
.yt-frame-wrap { pointer-events: none; }
.yt-frame-wrap #yt-player { position: absolute; inset: 0; width: 100%; height: 100%; }
.yt-frame-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 卡拉 OK 動態歌詞（播放器正下方，跟著 sticky） */
.now-lyric {
  position: relative;
  margin-top: 10px;
  min-height: 44px;
  display: block;
  text-align: center;
  font-size: 17px; font-weight: 700; line-height: 1.5;
  color: var(--ink);
  background: var(--panel2);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 56px 14px 10px;   /* 上方留 56px 給酷酷力頭像跳動空間 */
  cursor: pointer;           /* 點一下 = 重唱這一句（bindNowLyricReplay） */
}
/* 酷酷力頭像指示器（2026-08-14 Nick 要求：不要張嘴動畫，純微縮放） */
.now-star {
  position: absolute;
  width: 44px; height: 44px;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transition: left .25s ease, top .25s ease, opacity .2s;
}
/* 廣告中提示（2026-08-14 Nick 問：非 Premium 廣告時顯示） */
.ad-notice {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; font-size: 14px; font-weight: 600; color: var(--muted);
}
/* 準備中提示：影片還沒播放前，卡拉 OK 字幕區引導按播放鍵（2026-08-25 Nick 要求）。
   播放開始 → showNowLyricPreparing() 的 replaceChildren() 自動清掉。 */
.now-lyric .now-idle-hint {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px; font-size: 14.5px; font-weight: 600; color: var(--muted);
}

/* 卡拉 OK 字幕區下方控制按鈕（2026-08-25 Nick 要求，now-lyric 外面） */
.now-controls {
  display: flex; gap: 10px; margin-top: 10px; justify-content: center;
  flex-wrap: wrap;
}
.now-controls button {
  background: var(--panel2); color: var(--ink); border: 2px solid var(--border);
  border-radius: 12px; padding: 10px 18px; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .15s, transform .05s;
  min-height: 44px; min-width: 44px; /* 觸控友善 */
}
  .now-controls button::before {
    content: ""; position: absolute; width: 20px; height: 20px; left: 50%; top: 50%;
    transform: translate(-50%, -50%); background-size: contain; background-repeat: no-repeat;
  }
  .now-controls button.play::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M8 5v14l11-7L8 5z"/></svg>"); }
  .now-controls button.pause::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><rect x="5" y="5" width="14" height="14" fill="currentColor"/></svg>"); }
  .now-controls button.rewind::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill='currentColor' d="M15 18l-5-5L5 12l5-5 5 5z"/></svg>"); }
.now-controls button:hover { background: var(--ink); color: var(--panel2); }
.now-controls button:active { transform: scale(0.95); }
.now-btn.play { color: var(--pink); }
.now-btn.playing { color: var(--ink); }   /* 播放/暫停合一切換鈕：播放中顯示 ⏸️ */
.now-btn.rewind { color: var(--cyan); }
/* 歌詞同步校準（伴唱機式毫秒補償；2026-09-09）*/
.sync-cal { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.sync-cal-btn { min-width: 40px; min-height: 44px; padding: 8px 10px; font-size: 13px; font-weight: 800; }
.sync-cal-val {
  font-size: 12px; font-weight: 700; color: var(--muted);
  min-width: 46px; text-align: center; font-variant-numeric: tabular-nums;
}
.now-controls button:focus { outline: 2px solid var(--pink); outline-offset: 2px; }
.now-star .now-mascot {
  width: 100%; height: 100%;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
/* 呼吸：微微放大縮小（Nick 嫌張嘴效果差 → 純縮放） */
.now-star.bounce { animation: mascot-breathe 1.2s ease-in-out infinite; }
@keyframes mascot-breathe {
  0%, 100% { transform: translateY(-2px) scale(1); }
  50% { transform: translateY(-6px) scale(1.06); }
}
/* 準備中提示：文字 2 倍大，每個字輪流變成酷酷力頭像（2026-08-14 Nick 定案，放棄毛毛蟲） */
.now-lyric .preparing-lyric {
  font-size: 28px; font-weight: 400; color: var(--muted);
  display: inline-block;
}
.now-lyric .preparing-lyric .prep-char {
  position: relative;
  display: inline-block;
  margin: 0 2px;
}
.now-lyric .preparing-lyric .prep-mascot {
  display: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.now-lyric .preparing-lyric .prep-char.active { visibility: hidden; }
/* ⚠️ visibility 會繼承給子元素：頭像 img 要自己 visible，否則也被藏起來（2026-08-14 Nick 抓到） */
.now-lyric .preparing-lyric .prep-char.active .prep-mascot {
  display: block;
  visibility: visible;
  animation: prep-pop .55s ease-in-out infinite;
}
@keyframes prep-pop {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.1); }
}
/* 韓文行 inline 橫排（單字 span 自然流動，不會一行一個） */
.now-lyric .lyric-text { display: block; word-break: keep-all; overflow-wrap: break-word; }
.now-lyric .lyric-text .lyric-word { white-space: normal; }
.now-lyric .lyric-word { border-radius: 4px; padding: 0 1px; transition: color .15s; --p: 0; }
/* 伴唱機式逐字洗色：--p 0→1 由 JS 每帧寫入，背景從左到右連續填充 */
.now-lyric .lyric-word.on {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pink) 55%, transparent) 0%,
    color-mix(in srgb, var(--pink) 55%, transparent) calc(var(--p, 1) * 100%),
    transparent calc(var(--p, 1) * 100%));
  color: var(--ink);
}
/* 羅馬拼音獨立一行（韓文下方） */
.now-lyric .lyric-rom { font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 3px; }
.now-lyric .lyric-rom .lyric-word { color: var(--muted); background: none; }
.now-lyric .lyric-rom .lyric-word.on { color: var(--ink); background: color-mix(in srgb, var(--pink) 55%, transparent); }
/* 動態歌詞條中文翻譯（2026-08-14 Nick 要求） */
.now-lyric .now-cn {
  font-size: 12px; font-weight: 400; color: var(--amber);
  margin-top: 4px; line-height: 1.4;
}
.now-lyric:empty { display: none; }
/* 預唱行：下一句淡色預告（伴唱機雙行顯示）*/
.now-lyric .lyric-next {
  font-size: 13px; font-weight: 500; color: var(--muted);
  opacity: .8; margin-top: 6px; word-break: keep-all; overflow-wrap: break-word;
}
.now-lyric .lyric-next::before { content: "⏭ "; opacity: .7; font-size: 11px; }

/* 手機橫放 → 影片全視窗覆蓋（2026-08-14 Nick 要求：橫放最大化、直豎恢復）
   body.yt-fs-mode = 橫向全畫面模式：隱藏一切，只留影片 */
.yt-wrap.yt-fs {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0;
}
.yt-wrap.yt-fs .yt-head { display: none; }
.yt-wrap.yt-fs .yt-frame-wrap {
  width: 100vw;
  height: 56.25vw;   /* 16:9 */
  max-height: 100vh;
  max-width: 177.78vh;
  border-radius: 0;
}
.yt-wrap.yt-fs .now-lyric { display: none !important; }
.yt-wrap.yt-fs .now-star { display: none !important; }
.yt-wrap.yt-fs .preparing-lyric { display: none !important; }

/* 橫向全畫面：隱藏 header/nav/main 其他內容/footer/卡片/back-top——只留 yt-wrap（fixed 已脫離流） */
body.yt-fs-mode header,
body.yt-fs-mode nav,
body.yt-fs-mode footer,
body.yt-fs-mode .back-top,
body.yt-fs-mode main section:not(#tab-song),
body.yt-fs-mode #full-lyrics,
body.yt-fs-mode .card,
body.yt-fs-mode .tooltip {
  display: none !important;
}
body.yt-fs-mode main { padding: 0; margin: 0; max-width: none; }
body.yt-fs-mode #tab-song { display: block; }

/* 手機／窄螢幕：按下播放才固定頂部（2026-08-16 nav 移底部後，頂部無 sticky 元素 → 影片貼視窗頂）；沒播不佔位 */
@media (max-width: 1023px) {
  .yt-wrap.yt-sticky { position: sticky; top: var(--header-h, 112px); z-index: 90; }
  /* 播放中收起 Watch & Sing 說明卡 → 影片緊貼 header 釘住、歌詞佔滿其餘畫面
     （2026-09-05 Nick 回報：說明卡把影片往下推，播放時占掉大半螢幕。
       class 由 js/player.js 播放開始加上、播完/換歌移除） */
  body.song-playing #tab-song > .card { display: none; }
  /* 手機／平板：欣賞頁不顯示完整歌詞區，也不顯示它的切換鈕
     （2026-09-24 Nick 要求：那一大塊在手機上被播放器遮住，還要捲頁面追目前歌詞，
      干擾閱讀；動態歌詞條已固定在播放器正下方，逐句學習在 #tab-sentences 分頁）
     js/lyrics.js 同斷點連渲染都不做、js/player.js 同斷點不做跟隨捲動 */
  #full-lyrics,
  .now-btn[data-action="toggle-lyrics"] { display: none; }
}

/* PC 寬螢幕：播放器 = 可拖曳、可縮放的浮動視窗（2026-08-14 Nick 要求） */
@media (min-width: 1024px) {
  .yt-wrap {
    /* top 對齊歌曲欣賞區塊（header 下方）——2026-08-26 header 改 fixed 後用變數讓位 */
    position: fixed; left: 20px; top: calc(var(--header-h, 112px) + 16px); width: 480px; z-index: 90;
    margin-bottom: 0;
    resize: both; overflow: hidden;          /* CSS 原生縮放（右下角把手） */
    min-width: 320px; min-height: 400px;     /* 最小尺寸：影片 + 卡拉OK歌詞區(152px 預留) 都完整顯示 */
    user-select: none;
    display: flex; flex-direction: column;   /* 上下排列：標題 → 影片 → 卡拉OK歌詞 */
  }
  /* 只有標題列可拖曳（播放器本體維持正常互動） */
  .yt-wrap .yt-head { cursor: grab; }
  .yt-wrap .yt-head:active { cursor: grabbing; }
  .yt-wrap .yt-frame-wrap { flex-shrink: 0; }   /* 影片高度不壓縮 */
  .yt-wrap .now-lyric {
    flex-shrink: 0;                             /* 卡拉OK歌詞區不壓縮（2026-08-14 Nick 要求不被吞掉） */
    /* 固定預留高度：酷酷力頭像(56) + 韓文歌詞2行(17×1.5×2≈51) + 羅馬字(12×1.4≈17) + 翻譯(12×1.4≈17) + padding(10) ≈ 152 */
    min-height: 152px;
    display: flex; flex-direction: column; justify-content: center;
  }
  .yt-wrap .now-lyric:empty { display: flex; }   /* PC 空狀態也佔位，高度不塌陷 */
  .yt-wrap.dragging { opacity: .92; box-shadow: 0 10px 32px color-mix(in srgb, var(--purple) 28%, transparent); }
  .yt-wrap.dragging iframe { pointer-events: none; }   /* 拖曳時 iframe 不搶滑鼠事件 */
  /* 寬螢幕（>1290px）原本右側會剩大片空白 → 內容放寬到 1100 並吃滿剩餘空間
     （2026-09-05 黑盒測試：1920 螢幕上右側 600px 空白像壞掉） */
  main { margin-left: 530px; margin-right: auto; max-width: 1100px; }
  /* 非「歌曲欣賞」分頁沒有左側浮動影片 → 收回置中版面，避免左半邊整片空白
     （2026-09-04 UX review；class 由 js/ui.js activateLearningTab 切換） */
  body.non-song-tab main { margin-left: auto; margin-right: auto; max-width: 900px; }
}
.full-lyrics h3 { font-size: 17px; color: var(--ink); margin-bottom: 4px; }
.full-lyrics .sub { color: var(--muted); font-size: 12px; margin-bottom: 14px; }
.lyric-part { margin-bottom: 12px; }
.lyric-part-label {
  font-size: 12px; color: var(--purple); font-weight: 700;
  letter-spacing: 1px; margin-bottom: 6px; text-transform: uppercase;
}
.lyric-part-line {
  font-size: 18px; padding: 3px 0; line-height: 1.8;
  display: flex; align-items: baseline; gap: 10px;
  transition: color .3s, background-color .3s, border-color .3s, padding-left .3s;
  border-radius: 8px; padding-left: 6px; padding-right: 6px;
}
.lyric-part-line:hover { color: var(--cyan-text); }
.lyric-part-line.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--pink) 14%, transparent), color-mix(in srgb, var(--amber) 10%, transparent));
  color: var(--pink); font-weight: 700;
  border-left: 4px solid var(--pink);
  padding-left: 10px;
}
.lyric-part-line .lyric-main {
  flex: 1; min-width: 0; margin: 0; padding: 0; border: 0; background: none;
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.lyric-part-line .lyric-main:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 5px; }
.lyric-part-line .lyric-text { line-height: 1.8; display: block; word-break: keep-all; overflow-wrap: break-word; }
.lyric-part-line .lyric-word { border-radius: 4px; padding: 0 1px; transition: color .15s; --p: 0; }
.lyric-part-line .lyric-word.on {
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--pink) 55%, transparent) 0%,
    color-mix(in srgb, var(--pink) 55%, transparent) calc(var(--p, 1) * 100%),
    transparent calc(var(--p, 1) * 100%));
  color: var(--ink);
}
.lyric-part-line .lyric-rom {
  display: block; font-size: 12px; font-weight: 400; color: var(--muted);
  letter-spacing: .02em; line-height: 1.4; margin-top: 2px;
}
.lyric-part-line .lyric-rom .lyric-word { color: var(--muted); background: none; }
.lyric-part-line .lyric-rom .lyric-word.on { color: var(--ink); background: color-mix(in srgb, var(--pink) 55%, transparent); }
/* 完整歌詞行中文翻譯（2026-08-14 Nick 要求） */
.lyric-part-line .lyric-cn-full {
  display: block; font-size: 13px; font-weight: 400; color: var(--amber);
  line-height: 1.5; margin-top: 3px;
}
/* 羅馬拼音開關 */
.rom-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: var(--tap-target);
  font-size: 12px; font-weight: 600; color: var(--muted);
  background: var(--panel2); border: 2px solid var(--border);
  border-radius: 999px; padding: 5px 12px; cursor: pointer;
  user-select: none;
}
.rom-toggle input { accent-color: var(--pink); width: 15px; height: 15px; cursor: pointer; }
/* 選歌回首頁按鈕（2026-08-14 晚：改 static，放 header-controls flex 內） */
.back-home {
  background: var(--panel2); border: 2px solid var(--border); color: var(--ink);
  min-height: var(--tap-target);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: color .2s, border-color .2s, background-color .2s;
}
.back-home:hover { border-color: var(--accent-pink, var(--pink-text)); color: var(--accent-pink, var(--pink-text)); }
.lyric-part-line.active .ln-listen { opacity: 1; }
.lyric-part-line .ln-listen {
  width: var(--tap-target); height: var(--tap-target); opacity: 0; margin: 0; padding: 0; border: 0; background: none;
  font-size: 13px; transition: opacity .2s; cursor: pointer;
  color: var(--pink); flex-shrink: 0; appearance: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.lyric-part-line .ln-listen:focus-visible { opacity: 1; outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 5px; }
.lyric-part-line:hover .ln-listen { opacity: 1; }

/* 歌詞區 */
.lyric-line {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--panel); border: 2px solid var(--border);
  border-radius: 20px; padding: 14px 16px; margin-bottom: 10px;
  box-shadow: 0 3px 12px color-mix(in srgb, var(--pink) 5%, transparent);
}
.grammar-btn {
  flex-shrink: 0; width: var(--tap-target); height: var(--tap-target); border-radius: 12px;
  background: linear-gradient(135deg, var(--purple), var(--pink)); color: var(--ink); border: none; cursor: pointer;
  font-size: 14px; font-weight: 700; margin-top: 2px; transition: transform .2s, background-color .2s;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--purple) 35%, transparent);
}
.grammar-btn:hover { transform: scale(1.1) rotate(-5deg); }
.lyric-body { flex: 1; }
.lyric-kr { font-size: 20px; font-weight: 700; cursor: pointer; }
.lyric-kr:hover { color: var(--cyan-text); }
.lyric-token {
  display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-target); min-height: var(--tap-target); margin: 0 6px 0 0; padding: 4px 0; background: none; border: 0;
  color: inherit; font: inherit; line-height: inherit; cursor: pointer;
  appearance: none; -webkit-appearance: none;
}
.lyric-token:hover { color: var(--cyan-text); }
.lyric-token:focus-visible { color: var(--cyan-text); outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
/* 純拉丁 token（英文歌詞）不吃 44px 最小寬，維持自然字距；仍保留高度利於點擊 */
.lyric-token--latin { min-width: 0; padding: 4px 2px; }
/* .lyric-kr 也用在文法總覽的 <button>（2026-08-20 由 <span onclick> 改為可鍵盤操作的 <button>）
   button 的 UA 預設會蓋掉 background/border/color/font-family/line-height，補回讓外觀與原本的 <span> 一致 */
button.lyric-kr {
  display: inline-flex; align-items: center; min-height: var(--tap-target); margin: 0; padding: 4px 0; background: none; border: none;
  font-family: inherit; line-height: inherit; color: inherit; text-align: inherit;
  appearance: none; -webkit-appearance: none;
}
.lyric-rom { color: var(--muted); font-size: 14px; margin-top: 2px; }
.lyric-cn { color: var(--amber-text); font-size: 15px; margin-top: 4px; }
.listen-btn {
  flex-shrink: 0; width: var(--tap-target); height: var(--tap-target); border-radius: 50%;
  background: var(--panel2); border: 2px solid var(--pink); color: var(--pink);
  font-size: 18px; cursor: pointer; margin-left: auto; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s, background-color .2s, transform .2s;
}
.listen-btn:hover { background: var(--pink-text); color: var(--ink); transform: scale(1.1); }
.listen-btn.speaking { background: var(--pink-text); color: var(--ink); animation: pulse 1s infinite; }
.grammar-panel {
  display: none; margin-top: 10px; background: var(--panel2);
  border-left: 4px solid var(--pink); border-radius: 12px; padding: 12px;
}
.grammar-panel.open { display: block; }
.grammar-panel h4 { color: var(--accent-pink, var(--pink-text)); font-size: 15px; margin-bottom: 6px; }
.grammar-panel p { font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.grammar-panel .pattern { background: var(--surface, #1A1A24); padding: 6px 10px; border-radius: 10px; font-size: 13px; color: var(--purple-text); border: 1px solid var(--border); }
.grammar-panel .example { font-size: 13px; color: var(--green-text); margin-top: 4px; }
.grammar-example-btn {
  min-height: var(--tap-target); margin-top: 8px; padding: 6px 12px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--panel2); color: var(--muted); cursor: pointer;
  font: inherit; font-size: 12px;
}
.grammar-title { color: var(--accent-pink, var(--pink-text)); }
.grammar-explain { margin-top: 6px; font-size: 14px; }
.grammar-overview-pattern { margin-top: 8px; }
.grammar-overview-example { margin-top: 4px; }
.grammar-source { margin-top: 8px; color: var(--muted); font-size: 13px; }
.load-error-detail { color: var(--muted); }

/* 單字表 */
.vocab-table { width: 100%; max-width: 100%; border-collapse: collapse; table-layout: fixed; }
.vocab-table th, .vocab-table td {
  padding: 10px 8px; text-align: left; border-bottom: 1px solid var(--border);
  min-width: 0; font-size: 14px; vertical-align: middle; overflow-wrap: anywhere;
}
.vocab-table th { color: var(--muted); font-size: 12px; }
.vocab-table tr:hover td { background: var(--panel2); }
.vocab-kr {
  min-width: var(--tap-target); min-height: var(--tap-target); margin: 0; padding: 6px 0; background: none; border: 0; appearance: none;
  color: var(--purple-text); font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
}
.vocab-kr:hover { text-decoration: underline; color: var(--accent-pink, var(--pink-text)); }
.vocab-kr:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; border-radius: 3px; }
.vocab-note { color: var(--muted); font-size: 12px; }

/* 彈出翻譯 */
.tooltip {
  position: fixed; background: var(--surface, #1A1A24); border: 2px solid var(--pink);
  border-radius: 16px; padding: 12px 16px; z-index: 999; max-width: 260px;
  box-shadow: 0 10px 30px color-mix(in srgb, var(--pink) 25%, transparent); display: none;
}
.tooltip .tt-kr { font-size: 18px; font-weight: 700; color: var(--purple); }
.tooltip .tt-rom { color: var(--muted); font-size: 13px; }
.tooltip .tt-cn { font-size: 14px; margin-top: 4px; }
.tooltip .tt-note { color: var(--muted); font-size: 12px; margin-top: 4px; }
.tooltip button {
  background: var(--pink-text); border: none; color: var(--ink); border-radius: 999px;
  min-height: var(--tap-target); padding: 6px 12px; font-size: 12px; cursor: pointer; margin-top: 8px;
}

/* 首頁歌曲選單（2026-08-14 Nick 要求：多首歌時首頁選歌） */
.song-menu { padding: 16px; }
.song-menu h2 { text-align: center; margin-bottom: 16px; font-size: 22px; }
/* 回訪學習舞台：延續 K-POP 應援手幅語彙，讓下一步比目錄更早被看見。 */
.learning-hub {
  position: relative; isolation: isolate; max-width: 820px; margin: 2px auto 24px; padding: 22px;
  overflow: hidden; border-radius: 28px; color: var(--ink);
  background:
    radial-gradient(circle at 92% 8%, rgba(255,217,61,.34), transparent 28%),
    linear-gradient(135deg, #4A3F72 0%, #6553A7 52%, #D75D8C 120%);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--purple) 28%, transparent);
}
.learning-hub::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .26;
  background-image: repeating-linear-gradient(115deg, transparent 0 34px, rgba(255,255,255,.13) 35px 36px);
}
.learning-hub[hidden] { display: none; }
.learning-hub-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.learning-hub-head h2 { margin: 4px 0 0; color: var(--ink); text-align: left; font-size: clamp(20px, 3vw, 28px); line-height: 1.35; }
.learning-eyebrow { display: block; color: #FFE99A; font-size: 10px; font-weight: 900; letter-spacing: .18em; }
.learning-hub-mark {
  flex: 0 0 auto; padding: 7px 11px; border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
  color: var(--ink); font-size: 11px; font-weight: 700; transform: rotate(2deg);
}
.learning-hub-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(220px, .75fr); gap: 12px; }
.learning-action-card {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 4px 12px; align-items: start;
  min-width: 0; padding: 16px; border: 1px solid rgba(255,255,255,.55); border-radius: 20px;
  background: rgba(255,255,255,.93); color: var(--ink); box-shadow: 0 8px 20px rgba(34,25,63,.14);
}
.learning-action-card[hidden] { display: none; }
.learning-card-icon {
  grid-row: 1 / 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px;
  background: linear-gradient(145deg, var(--pink), var(--purple)); color: var(--ink); font-size: 16px; font-weight: 900;
  box-shadow: 0 5px 12px color-mix(in srgb, var(--pink) 25%, transparent);
}
.review-card .learning-card-icon { background: linear-gradient(145deg, var(--amber), #FF7B7B); }
.learning-card-copy { min-width: 0; }
.learning-card-label { display: block; color: var(--purple); font-size: 11px; font-weight: 800; letter-spacing: .06em; }
.review-card .learning-card-label { color: #D56734; }
.learning-action-card h3 { margin: 2px 0 3px; overflow-wrap: anywhere; font-size: 17px; line-height: 1.35; }
.learning-action-card p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.learning-mini-progress { height: 6px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: var(--border); }
.learning-mini-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--purple), var(--pink), var(--amber)); }
.learning-primary-action, .learning-secondary-action {
  grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-target); margin-top: 9px; padding: 8px 14px; border-radius: 13px;
  color: var(--ink); text-decoration: none; font-size: 13px; font-weight: 800;
  transition: transform .16s ease, box-shadow .16s ease;
}
.learning-primary-action { background: linear-gradient(135deg, var(--pink), var(--purple)); box-shadow: 0 4px 0 #6657C9; }
.learning-secondary-action { background: #FFF4DA; border: 2px solid #F6C765; color: #9C6420; }
.learning-primary-action:hover, .learning-secondary-action:hover { transform: translateY(-2px); }

.review-intro {
  max-width: 520px; margin: 0 auto 16px; padding: 18px; border: 2px solid #F6C765; border-radius: 22px;
  background: linear-gradient(145deg, #FFF9E9, #FFF0F4); box-shadow: 0 7px 18px color-mix(in srgb, var(--amber) 14%, transparent);
}
.review-intro[hidden] { display: none; }
.review-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.review-intro h3 { margin: 3px 0; font-size: 18px; }
.review-intro p { color: var(--muted); font-size: 13px; }
.review-intro .learning-eyebrow { color: #C77621; }
.review-start-btn {
  min-height: var(--tap-target); padding: 10px 16px; border: 0; border-radius: 14px;
  background: linear-gradient(135deg, var(--amber-text), var(--pink-text)); color: var(--ink); cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 800; box-shadow: 0 4px 0 #D87269;
}
.review-start-btn:disabled { cursor: wait; opacity: .65; box-shadow: none; }
.review-intro .quiz-load-status { grid-column: 1 / -1; width: 100%; margin: 0; }

@media (max-width: 700px) {
  .learning-hub { padding: 18px; border-radius: 24px; }
  .learning-hub-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .song-menu { padding: 12px; }
  .learning-hub { margin-bottom: 20px; padding: 16px; }
  .learning-hub-head { gap: 10px; }
  .learning-hub-mark { display: none; }
  .learning-action-card { padding: 14px; }
  .review-intro { grid-template-columns: 1fr; padding: 16px; }
  .review-start-btn { width: 100%; }
}
/* 團體選單（2026-08-15 方案 A；2026-09-11 桌面改一排 6 張） */
.artist-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1024px; margin: 0 auto; }
.artist-view-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; max-width: 1024px; margin: 0 auto 14px; }
.artist-view-head h2 { margin: 0; font-size: 20px; }
.artist-sort { min-height: var(--tap-target); font-family: inherit; font-size: 13px; padding: 6px 10px; border: 2px solid var(--border); border-radius: 12px; background: var(--surface, #1A1A24); color: var(--ink); cursor: pointer; max-width: 100%; }
/* 單字測驗（2026-08-16） */
.quiz-step { font-weight: 700; color: var(--purple-text); margin: 14px 0 10px; font-size: 15px; }
.quiz-opt-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.quiz-mode-btn, .quiz-count-btn { flex: 1 1 200px; cursor: pointer; }
.quiz-mode-btn input, .quiz-count-btn input {
  position: absolute; width: 1px; height: 1px; margin: -1px; opacity: 0; overflow: hidden;
}
.qm-inner { display: block; padding: 14px; border: 2px solid var(--border); border-radius: 16px; background: var(--surface, #1A1A24); text-align: center; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.quiz-count-btn span { display: flex; align-items: center; justify-content: center; min-height: var(--tap-target); padding: 10px; border: 2px solid var(--border); border-radius: 14px; background: var(--surface, #1A1A24); text-align: center; font-weight: 700; transition: border-color .15s, background-color .15s, box-shadow .15s; }
.quiz-mode-btn input:checked + .qm-inner, .quiz-count-btn input:checked + span { border-color: var(--pink); background: var(--panel2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pink) 15%, transparent); }
.quiz-mode-btn input:focus-visible + .qm-inner, .quiz-count-btn input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.quiz-start-btn { display: block; width: 100%; margin: 14px 0 8px; padding: 14px; border: none; border-radius: 16px; background: linear-gradient(135deg, var(--pink-text), var(--purple-text)); color: var(--ink); font-size: 16px; font-weight: 700; cursor: pointer; font-family: inherit; }
.quiz-start-btn[hidden] { display: none; }
.quiz-back-btn { display: block; width: 100%; min-height: var(--tap-target); padding: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface, #1A1A24); color: var(--muted); font-size: 13px; cursor: pointer; font-family: inherit; }
.quiz-best { text-align: center; color: var(--amber); font-weight: 700; margin-top: 10px; }
.quiz-load-status { max-width: 520px; margin: 12px auto; padding: 12px 14px; border: 2px solid var(--border); border-radius: 14px; background: var(--panel); color: var(--muted); text-align: center; font-size: 13px; }
.quiz-load-status[hidden] { display: none; }
.quiz-load-status.error { border-color: var(--red); color: var(--red); background: var(--panel2); }
.quiz-load-retry { min-height: var(--tap-target); margin-left: 8px; padding: 6px 12px; border: 1px solid var(--red); border-radius: 999px; background: var(--panel); color: var(--red); cursor: pointer; font: inherit; font-weight: 700; }
.quiz-card-best { min-height: 0; text-align: center; margin-top: 6px; }
.quiz-badge { display: inline-block; background: var(--amber-text); color: var(--ink); font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
/* 「時間軸校正中」標示：歌單卡片與歌曲頁共用（琥珀色，跟 quiz 徽章同調但更輕） */
.sync-badge {
  display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: .5px;
  color: var(--amber-text); background: color-mix(in srgb, var(--amber-text) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--amber-text) 45%, transparent);
  white-space: nowrap; vertical-align: middle;
}
/* 已人工校正：綠色、低調（卡片上每首都有，不能搶走歌名的注意力） */
.sync-badge--ok {
  color: var(--green-text); background: color-mix(in srgb, var(--green-text) 12%, transparent);
  border-color: color-mix(in srgb, var(--green-text) 38%, transparent);
}
/* 自動對齊：灰色、最低調（全站預設狀態——結構正確但沒人耳確認，不該看起來像已校正） */
.sync-badge--auto {
  color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent);
  border-color: color-mix(in srgb, var(--muted) 34%, transparent);
}
.sync-card-badge { text-align: center; margin-top: 6px; }
.sync-card-badge .sync-badge { margin-left: 0; }
.quiz-card { max-width: 520px; margin: 0 auto; }
.quiz-mascot { text-align: center; margin: 4px 0 10px; }
#quiz-mascot-listen { margin: 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; appearance: none; }
#quiz-mascot-listen:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
#quiz-mascot-img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; border: 3px solid var(--pink); box-shadow: 0 4px 14px color-mix(in srgb, var(--pink) 30%, transparent); transition: transform .25s; }
#quiz-mascot-img.happy { animation: mascot-breathe 1.2s ease-in-out infinite; }
#quiz-mascot-img.sad { transform: rotate(-12deg) scale(.92); filter: grayscale(.4); animation: mascot-cry 1.4s ease-in-out infinite; }
@keyframes mascot-breathe { 0%,100% { transform: translateY(-2px) scale(1); } 50% { transform: translateY(-8px) scale(1.07); } }
@keyframes mascot-cry { 0%,100% { transform: rotate(-12deg) scale(.92); } 50% { transform: rotate(-6deg) scale(.9); } }
/* Duolingo 風格頂部列（2026-08-16）——app bar：白底 + 底邊，✕ 左 / 進度中 / 愛心右 */
.duo-top { display: flex; align-items: center; gap: 12px; padding: 10px 14px; max-width: 560px; margin: 0 auto; background: rgba(255,255,255,.98); border-radius: 0 0 16px 16px; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
body.quiz-fs-mode .duo-top { border-radius: 0; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.quiz-exit-btn { width: var(--tap-target); height: var(--tap-target); border-radius: 50%; border: 2px solid var(--border); background: var(--surface, #1A1A24); color: var(--muted); font-size: 14px; cursor: pointer; flex-shrink: 0; font-family: inherit; }
.quiz-exit-btn:hover { border-color: var(--pink); color: var(--pink); }
.duo-hearts { display: flex; gap: 2px; flex-shrink: 0; }
.duo-heart { font-size: 20px; transition: opacity .2s, filter .2s, transform .2s; }
.duo-heart.lost { opacity: .25; filter: grayscale(1); transform: scale(.8); }
.duo-progress { flex: 1; display: flex; gap: 4px; }
.duo-progress-seg { flex: 1; height: 14px; border-radius: 99px; background: var(--border); }
.duo-progress-seg.done { background: var(--correct); }
.duo-progress-seg.current { background: var(--correct-bg); }
/* 答題全螢幕沉浸（2026-08-16 Nick 要求：不用滾動、app 式按鈕固定底部、隱藏說明區塊、手機瀏覽器版有網址列） */
body.quiz-fs-mode header, body.quiz-fs-mode nav, body.quiz-fs-mode footer, body.quiz-fs-mode .back-top { display: none !important; }
body.quiz-fs-mode { overflow: hidden; height: 100dvh; background: var(--surface, #1A1A24); padding-top: 0; } /* header 已隱藏，不留白 */
body.quiz-fs-mode main { padding: 0; margin: 0; }
body.quiz-fs-mode #tab-quiz > .card { display: none !important; } /* 隱藏 Word Quiz 說明區塊 */
body.quiz-fs-mode #tab-quiz { display: block !important; } /* 保險：fs-mode 強制顯示 quiz section（避免 tab 機制藏掉） */
#quiz-play { display: none; }
body.quiz-fs-mode #quiz-play { display: flex; flex-direction: column; height: 100dvh; box-sizing: border-box; }
body.quiz-fs-mode .quiz-scroll { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 8px 12px 76px; }
body.quiz-fs-mode .quiz-scroll .quiz-card { max-width: 560px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; }
/* CONTINUE 按鈕：fixed 釘在視窗底部（手機瀏覽器網址列縮放也穩） */
body.quiz-fs-mode .duo-continue { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); max-width: 560px; width: calc(100% - 24px); z-index: 60; }
/* 頂部列（退出/愛心/進度）fixed 釘頂部，避免被網址列推走 */
body.quiz-fs-mode .duo-top { position: fixed; top: calc(8px + env(safe-area-inset-top, 0px)); left: 0; right: 0; z-index: 60; }
body.quiz-fs-mode #quiz-play { padding-top: 56px; }
/* 手機（<600px）：全部縮小讓一屏放得下 + banner 顯示時隱藏酷酷力讓位（Duolingo 答題後角色讓位） */
@media (max-width: 600px) {
  body.quiz-fs-mode .quiz-mascot { margin: 0 0 4px; }
  body.quiz-fs-mode #quiz-mascot-img { width: 56px; height: 56px; border-width: 2px; }
  body.quiz-fs-mode .quiz-question { font-size: 28px; margin: 8px 0; min-height: 40px; }
  body.quiz-fs-mode .quiz-options { gap: 8px; }
  body.quiz-fs-mode .quiz-option { padding: 11px 14px; font-size: 15px; border-radius: 14px; }
  body.quiz-fs-mode .duo-feedback { padding: 9px 12px; font-size: 14px; margin-top: 6px; }
  body.quiz-fs-mode .duo-top { padding-top: 6px; }
  body.quiz-fs-mode .duo-heart { font-size: 16px; }
  body.quiz-fs-mode .duo-progress-seg { height: 10px; }
  body.quiz-fs-mode .duo-continue { padding: 12px 24px; font-size: 15px; margin-bottom: 10px; }
}
.quiz-progress { flex: 1; display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.quiz-bar { flex: 1; height: 10px; background: var(--border); border-radius: 99px; overflow: hidden; }
.quiz-bar-fill { height: 100%; background: linear-gradient(90deg, var(--pink), var(--purple)); border-radius: 99px; transition: width .3s; }
.quiz-score-line { text-align: right; color: var(--muted); font-size: 13px; margin-bottom: 16px; }
.quiz-question { text-align: center; font-size: 34px; font-weight: 700; margin: 16px 0; min-height: 60px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.quiz-question .qq-kr { color: var(--ink); }
.quiz-question .qq-rom { font-size: 18px; color: var(--muted); font-weight: 400; }
.quiz-word-prompt { padding: 0 0 2px; border: 0; border-bottom: 2px dashed var(--border); background: transparent; cursor: pointer; font: inherit; }
.quiz-options { display: grid; gap: 12px; }
.quiz-option { display: block; width: 100%; padding: 16px 20px; border: 2px solid var(--border); border-radius: 18px; background: var(--surface, #1A1A24); font-size: 16px; cursor: pointer; font-family: inherit; transition: border-color .15s, background-color .15s, color .15s, transform .15s; text-align: center; font-weight: 600; color: var(--ink); }
.quiz-option:hover:not(:disabled) { border-color: var(--correct); background: #F0FFE8; transform: translateY(-1px); }
.quiz-option.correct { border-color: var(--correct); background: var(--correct-bg); font-weight: 700; color: var(--correct-text); }
.quiz-option.wrong { border-color: var(--wrong); background: var(--wrong-bg); animation: quiz-shake .35s; color: var(--wrong-text); }
.quiz-option:disabled { cursor: default; opacity: .85; }
@keyframes quiz-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
/* Duolingo banner 回饋（2026-08-16） */
.duo-feedback { border-radius: 18px; padding: 14px 18px; text-align: center; font-size: 16px; font-weight: 700; animation: duo-banner-in .25s ease-out; }
.duo-feedback.good { background: var(--correct-bg); color: var(--correct-text); border: 2px solid var(--correct); }
.duo-feedback.bad { background: var(--wrong-bg); color: var(--wrong-text); border: 2px solid var(--wrong); }
.duo-feedback .fb-note { font-weight: 400; font-size: 13px; margin-top: 4px; color: var(--muted); }
@keyframes duo-banner-in { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* Duolingo 綠色橢圓 CONTINUE（2026-08-16） */
.duo-continue { display: block; width: 100%; padding: 14px 28px; border: none; border-radius: 999px; background: var(--correct-action); color: var(--ink); font-size: 16px; font-weight: 800; cursor: pointer; font-family: inherit; letter-spacing: .5px; box-shadow: 0 4px 0 var(--correct-shadow); transition: background-color .1s, box-shadow .1s, transform .1s; }
.duo-continue:hover { background: var(--correct-action-hover); }
.duo-continue:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--correct-shadow); }
.quiz-feedback { text-align: center; margin: 14px 0; min-height: 20px; font-size: 14px; }
.quiz-feedback .fb-ok { color: var(--green); font-weight: 700; font-size: 16px; }
.quiz-feedback .fb-no { color: #E5394A; font-weight: 700; font-size: 16px; }
.quiz-feedback .fb-note { color: var(--muted); font-size: 12px; margin-top: 4px; }
.quiz-next-btn { display: block; width: 100%; padding: 12px; border: none; border-radius: 14px; background: var(--purple); color: var(--ink); font-size: 15px; font-weight: 700; cursor: pointer; font-family: inherit; }
.quiz-result-title { text-align: center; font-size: 26px; font-weight: 800; margin: 10px 0; }
.quiz-result-score { text-align: center; font-size: 44px; font-weight: 800; color: var(--accent-pink, var(--pink-text)); margin: 10px 0; }
.quiz-result-meta { text-align: center; color: var(--muted); font-size: 13px; margin-top: -8px; }
.quiz-result-wrong { margin: 16px 0; padding: 14px; border-radius: 14px; background: var(--panel2); font-size: 13px; color: var(--ink); }
.quiz-result-wrong .qr-item { display: flex; gap: 8px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.quiz-result-wrong .qr-item:last-child { border-bottom: none; }
.quiz-listen-btn { background: linear-gradient(135deg, var(--cyan), var(--purple)); border: none; color: var(--ink); width: 54px; height: 54px; border-radius: 50%; font-size: 24px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: transform .15s; }
.quiz-listen-btn:active { transform: scale(.92); }
.quiz-listen-prompt { width: 100%; color: var(--muted); font-size: 15px; font-weight: 600; }
.quiz-answer-reveal { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.quiz-answer-reveal .qq-rom { margin-top: 3px; }
@media (min-width: 640px) { .artist-grid { grid-template-columns: repeat(3, 1fr); max-width: none; } }
@media (min-width: 768px) { .artist-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .artist-grid { grid-template-columns: repeat(6, 1fr); width: 100%; gap: 14px; } }
/* 一排 6 張後卡片變窄：縮字級與留白，避免標題折行擠壓 */
@media (min-width: 1024px) {
  .artist-card .ac-name { font-size: 16px; }
  .artist-card .ac-kr { font-size: 12px; }
  .artist-card .ac-summary { font-size: 12px; line-height: 1.5; }
  .artist-card .ac-photo { font-size: 34px; }
}
.artist-card {
  background: var(--panel); border: 2px solid var(--border); border-radius: 24px;
  padding: 0 0 16px; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; text-align: center;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pink) 8%, transparent); text-decoration: none; display: block;
  overflow: hidden;
}
.artist-card:hover { transform: translateY(-4px); border-color: var(--artist-color, var(--pink)); box-shadow: 0 8px 24px color-mix(in srgb, var(--pink) 20%, transparent); }
.artist-card .ac-photo {
  width: 100%; aspect-ratio: 3/2; border-radius: 0; overflow: hidden; margin-bottom: 12px;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  display: flex; align-items: center; justify-content: center; font-size: 48px;
  position: relative;
}
.artist-card .ac-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
.artist-card:hover .ac-photo img { transform: scale(1.04); }
.artist-card .ac-photo .ac-photo-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 48px; }
.artist-card .ac-name { font-size: 22px; font-weight: 700; color: var(--ink); padding: 0 14px; }
.artist-card .ac-kr { font-size: 14px; color: var(--muted); margin-top: 2px; padding: 0 14px; }
.artist-card .ac-debut { color: var(--artist-color, var(--muted)); font-weight: 600; }
.artist-card .ac-summary { font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 8px; padding: 0 16px; }
.artist-card .ac-count { display: inline-block; margin-top: 10px; font-size: 12px; font-weight: 700; padding: 4px 14px; border: 2px solid var(--artist-color, var(--pink)); border-radius: 999px; background: var(--panel2); color: var(--ink); }
.song-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; max-width: 1024px; margin: 0 auto; }
@media (min-width: 560px) { .song-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .song-grid { grid-template-columns: repeat(4, 1fr); max-width: none; } }
@media (min-width: 1024px) { .song-grid { grid-template-columns: repeat(6, 1fr); width: 100%; gap: 14px; }
  .song-card .sc-title { font-size: 15px; }
  .song-card .sc-kr { font-size: 12px; }
}
.song-card {
  background: var(--panel); border: 2px solid var(--border); border-radius: 24px;
  padding: 0 0 14px; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; text-align: center;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--pink) 8%, transparent); text-decoration: none; display: block;
  overflow: hidden;
}
.song-card:hover { transform: translateY(-4px); border-color: var(--pink); box-shadow: 0 8px 24px color-mix(in srgb, var(--pink) 20%, transparent); }
/* .song-card 也用在 <button>（測驗選曲卡，2026-08-20 改用 addEventListener 前為 <a href="javascript:void(0)">）
   button 的 UA 預設會蓋掉 width/font-family/color，補回讓外觀與 <a> 版一致 */
button.song-card {
  width: 100%; font-family: inherit; color: inherit;
  appearance: none; -webkit-appearance: none;
}
.song-card .sc-thumb {
  width: 100%; aspect-ratio: 16/9; overflow: hidden; margin-bottom: 10px;
  background: linear-gradient(135deg, var(--purple), var(--pink));
  display: flex; align-items: center; justify-content: center; font-size: 40px;
  position: relative;
}
.song-card .sc-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s ease;
}
.song-card:hover .sc-thumb img { transform: scale(1.05); }
.song-card .sc-thumb .sc-thumb-fallback {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 40px;
}
.song-card .sc-title { font-size: 18px; font-weight: 700; color: var(--ink); padding: 0 14px; }
.song-card .sc-kr { font-size: 14px; color: var(--muted); margin-top: 2px; padding: 0 14px; }
.song-card .sc-level { display: inline-block; margin-top: 8px; font-size: 12px; font-weight: 700; padding: 3px 10px; border: 1px solid var(--pink); border-radius: 999px; background: var(--panel2); color: var(--accent-pink, var(--pink-text)); }
.song-card .sc-summary { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.5; padding: 0 14px; }

/* 課程 */
.day-card { background: var(--panel); border: 2px solid var(--border); border-radius: 20px; padding: 14px 16px; margin-bottom: 10px; box-shadow: 0 3px 12px color-mix(in srgb, var(--pink) 5%, transparent); }
.day-card.done { border-color: var(--green); background: #F4FCF8; }
.day-head { display: flex; align-items: center; gap: 12px; }
.day-num { background: linear-gradient(135deg, var(--purple-text), var(--pink-text)); color: var(--ink); width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; box-shadow: 0 3px 10px color-mix(in srgb, var(--purple) 30%, transparent); }
.day-card.done .day-num { background: var(--green-text); box-shadow: 0 3px 10px color-mix(in srgb, var(--green) 30%, transparent); }
.day-focus { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 15px; font-weight: 600; }
.course-toggle {
  min-height: var(--tap-target); padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--panel2); color: var(--ink); cursor: pointer; font: inherit; font-size: 12px;
}
.day-tasks { list-style: none; margin-top: 8px; padding-left: 44px; }
.day-tasks li { font-size: 13px; color: var(--muted); padding: 2px 0; }
.day-tasks li::before { content: "☐ "; }
.day-card.done .day-tasks li::before { content: "☑ "; color: var(--green); }

/* 進度條 */
.progress-wrap { background: var(--panel); border: 2px solid var(--border); border-radius: 20px; padding: 16px; margin-bottom: 16px; box-shadow: 0 3px 12px color-mix(in srgb, var(--pink) 5%, transparent); }
.progress-bar { height: 12px; background: var(--panel2); border-radius: 999px; overflow: hidden; margin-top: 8px; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--purple), var(--pink), var(--amber)); width: 0%; transition: width .4s; border-radius: 999px; }
.progress-label { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }

/* 回到上方浮動按鈕（2026-08-14 Nick 要求：滑到底部後出現，點擊捲回頂部） */
.back-top {
  position: fixed; right: 20px; bottom: calc(84px + env(safe-area-inset-bottom, 0px)); z-index: 999;
  width: 52px; height: 52px; border-radius: 50%;
  background: linear-gradient(135deg, var(--pink-text), #8F2451);
  color: var(--ink); font-size: 24px; font-weight: 700; line-height: 1;
  border: 3px solid #fff; box-shadow: 0 4px 14px color-mix(in srgb, var(--pink) 35%, transparent);
  cursor: pointer; opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}
.back-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 6px 18px color-mix(in srgb, var(--pink) 45%, transparent); }
.back-top:active { transform: scale(.96); }

footer { text-align: center; color: var(--muted); font-size: 12px; padding: 28px 16px calc(88px + env(safe-area-inset-bottom, 0px)); line-height: 2; }
footer .footer-lion { font-size: 18px; margin-right: 2px; }
footer .footer-brand { font-size: 13px; }
footer .footer-brand strong { color: var(--purple-text); }
footer .footer-nav a { color: var(--accent-pink, var(--pink-text)); text-decoration: none; font-weight: 600; margin: 0 2px; }
footer .footer-nav a:hover { text-decoration: underline; }
footer .footer-meta { font-size: 11px; opacity: .75; }

/* Buy Me a Coffee 按鈕（2026-09-14） */
.bmc-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 16px; border-radius: 20px;
  background: #FFDD00; color: #0D0C0D !important;
  font-size: 13px; font-weight: 700; text-decoration: none !important;
  border: none; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.bmc-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 12px rgba(255,221,0,.3); text-decoration: none !important; }
.bmc-btn:active { transform: translateY(0); }

/* 發音提示 */
.speaking { animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .4; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
  :where(nav button, .grammar-btn, .listen-btn, .quiz-option, .duo-continue, .artist-card, .song-card, .back-top):hover,
  :where(.duo-continue, .quiz-listen-btn, .back-top):active {
    transform: none !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .lyric-part-line .ln-listen { opacity: 1; background: var(--panel2); border-radius: 50%; }
}

@media (max-width: 600px) {
  /* 四欄表格在手機改成資訊卡，不隱藏任何學習內容。 */
  .vocab-table { display: block; }
  .vocab-table thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }
  .vocab-table tbody { display: grid; gap: 10px; }
  .vocab-table tr {
    display: grid; grid-template-columns: minmax(88px, .8fr) minmax(0, 1.2fr);
    gap: 8px 12px; width: 100%; padding: 12px;
    background: var(--panel); border: 2px solid var(--border); border-radius: 16px;
  }
  .vocab-table td { display: block; min-width: 0; padding: 0; border: 0; overflow-wrap: anywhere; }
  .vocab-table td:nth-child(3), .vocab-table td:nth-child(4) { grid-column: 1 / -1; }
  .vocab-table td::before {
    content: attr(data-label); display: block; margin-bottom: 2px;
    color: var(--muted); font-size: 11px; font-weight: 700;
  }
  .vocab-table tr:hover td { background: transparent; }

  .day-head { display: grid; grid-template-columns: var(--tap-target) minmax(0, 1fr); align-items: start; gap: 8px 10px; }
  .day-num { width: var(--tap-target); height: var(--tap-target); }
  .course-toggle { grid-column: 2; justify-self: start; }
  .day-tasks { padding-inline-start: calc(var(--tap-target) + 10px); }

  footer .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 2px; }
  footer .footer-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-target); min-height: var(--tap-target); padding-inline: 4px; }
}

@media (min-width: 601px) and (max-width: 1023px) {
  footer .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 2px; }
  footer .footer-nav a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-target); min-height: var(--tap-target); padding-inline: 4px; }
}

/* ===== 新手導覽（Onboarding Tour）2026-08-24 ===== */
/* 2026-08-25 圖層重構：聚光燈 = 遮罩層內部的 4 塊壓暗矩形（.tour-dim）+ 綠框洞（.tour-hole），
   全部在同一 stacking context——舊版把 spotlight(z:201+200vmax 陰影)加在目標元素上、蓋住 z:200
   遮罩裡的氣泡（子元素逃不出父層 context），已整組移除。
   v5（2026-08-26 Nick 提案）：壓暗區 pointer-events:auto 擋洞外點擊；洞預設透明可穿透，
   tour-locked 時洞變半透明綠盾擋點擊——教學步驟不可真實操作；播放鍵步驟（playStep）不鎖。 */
/* 聚光燈導覽＋錨點捲動：預留 fixed header 高度（2026-08-26 header 固定頂部適配） */
#artist-grid, #song-grid, .now-controls, #lang-switch, #nav-quiz, #full-lyrics,
nav[role="tablist"] {
  scroll-margin-top: calc(var(--header-h, 112px) + 16px);
  scroll-margin-bottom: 110px; /* 底部 nav 列也別撞 */
}

.tour-overlay { position: fixed; inset: 0; z-index: 1200; background: transparent; display: flex; align-items: center; justify-content: center; animation: tour-fade .25s ease; pointer-events: none; }
.tour-overlay > * { pointer-events: auto; }
@keyframes tour-fade { from { opacity: 0; } to { opacity: 1; } }
.tour-dim { position: absolute; background: rgba(10,10,20,.55); }
/* v5（2026-08-26）：洞預設透明可穿透；tour-locked 時洞變半透明綠盾擋點擊——
   教學步驟（語言/分頁/歌詞）禁止真實操作，避免使用者把第一次導覽的畫面狀態切亂。 */
.tour-hole { position: absolute; border-radius: 10px; box-shadow: 0 0 0 4px rgba(88,204,2,.85); transition: box-shadow .2s ease; pointer-events: none; }
.tour-overlay.tour-locked .tour-hole { background: rgba(88,204,2,.12); pointer-events: auto; cursor: not-allowed; }
.tour-overlay.tour-dim-only { background: rgba(10,10,20,.55); }
.tour-welcome, .tour-bubble { background: var(--surface, #1A1A24); border-radius: 16px; padding: 22px 20px 18px; max-width: 340px; width: calc(100vw - 40px); box-shadow: 0 12px 40px rgba(0,0,0,.35); font-family: inherit; position: relative; animation: tour-pop .3s cubic-bezier(.34,1.56,.64,1); }
@keyframes tour-pop { from { transform: scale(.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.tour-lion { width: 72px; height: 72px; border-radius: 50%; display: block; margin: 0 auto 10px; }
.tour-title { margin: 0 0 8px; font-size: 18px; line-height: 1.35; color: var(--ink); }
.tour-body { margin: 0 0 12px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.tour-points { margin: 0 0 14px; padding: 0; list-style: none; }
.tour-next-hint { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: var(--purple-text, #B8AEFF); font-style: italic; }
.tour-points li { font-size: 13.5px; line-height: 1.7; color: var(--ink); padding: 6px 0; border-bottom: 1px dashed var(--border); }
.tour-points li:last-child { border-bottom: none; }
.tour-actions { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 4px; }
.tour-skip { background: none; border: none; color: var(--muted); font-size: 13.5px; cursor: pointer; padding: 8px 4px; font-family: inherit; }
.tour-skip:hover { color: var(--ink); text-decoration: underline; }
.tour-next { background: #58CC02; color: #0A0A0F; border: none; border-radius: 12px; padding: 11px 22px; font-size: 15px; font-weight: 800; cursor: pointer; font-family: inherit; box-shadow: 0 3px 0 #46a302; transition: filter .1s, transform .05s; }
.tour-next:hover { filter: brightness(1.06); }
.tour-next:active { transform: translateY(2px); box-shadow: 0 1px 0 #46a302; }
.tour-step-count { position: absolute; top: -10px; right: 14px; background: #58CC02; color: #0A0A0F; font-size: 11.5px; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
/* 導覽卡內語言切換（2026-09-07）——進行中不必解鎖 header，卡片上直接換 */
.tour-langs { display: flex; gap: 6px; margin: 2px 0 12px; }
.tour-langs-stack { flex-direction: column; gap: 8px; }
.lang-chip {
  flex: 1; min-width: 0; border: 1.5px solid var(--border); background: transparent;
  color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 7px 4px; border-radius: 999px; cursor: pointer; font-family: inherit;
  transition: border-color .15s, color .15s, background .15s;
}
.lang-chip:hover { border-color: var(--accent-pink); color: var(--ink); }
.lang-chip.active { background: var(--accent-pink); border-color: var(--accent-pink); color: var(--bg); }
.tour-langs-stack .lang-chip { flex: none; padding: 11px 12px; font-size: 14.5px; }
/* 垂直語言 rail：tour 進行中釘在視窗右側（2026-09-07 Nick 要求，取代卡片內橫排） */
.tour-langs-rail {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 8px; z-index: 3;
}
.lang-rail-chip {
  flex: none; width: 46px; padding: 12px 2px; font-size: 11px; letter-spacing: .5px;
  background: rgba(26,26,36,.92); backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,.35); border-radius: 12px;
}
.tour-bubble.tour-anchored { position: fixed; max-width: 300px; z-index: 2; }
.tour-bubble.tour-center { margin: 0 auto; }
@media (max-width: 480px) {
  .tour-welcome, .tour-bubble { max-width: calc(100vw - 32px); padding: 18px 16px 14px; }
  .tour-title { font-size: 16.5px; } .tour-body { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .tour-overlay, .tour-welcome, .tour-bubble { animation: none; }
}

/* 選歌後捲到設定面板時讓開固定 header（2026-09-04 UX review） */
#quiz-setup { scroll-margin-top: calc(var(--header-h, 112px) + 12px); }

/* ===== 韓語語音偵測標註（Firefox 無聲問題——2026-09-11）===== */
/* 缺韓語語音時：header 下方出現說明橫幅，發音按鈕加琥珀虛線框提示 */
.tts-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 1080px;
  margin: 4px auto 12px;
  padding: 9px 14px;
  border: 1.5px solid var(--amber);
  border-radius: 12px;
  background: rgba(255, 184, 77, 0.08);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.tts-notice--bad { border-color: var(--pink); background: rgba(255, 62, 127, 0.08); }
.tts-notice-title { font-weight: 800; }
.tts-notice-fix { color: var(--muted); flex: 1; min-width: 200px; }
.tts-notice-close {
  flex: none;
  width: 30px; height: 30px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel2);
  color: var(--ink);
  cursor: pointer;
  font-size: 13px;
}
.tts-notice-close:hover { border-color: var(--amber); }
/* 缺語音時的發音按鈕標註：明確的 🔊 按鈕加虛線框；歌詞字詞按鈕靠 tooltip 說明（全框會太吵） */
body.tts-no-ko-voice .ln-listen,
body.tts-no-ko-voice .listen-btn,
body.tts-no-ko-voice .grammar-example-btn,
body.tts-no-ko-voice .vocab-kr {
  outline: 2px dashed var(--amber);
  outline-offset: 2px;
}

/* ===== 互動版麵包屑列（與 SEO 靜態頁一致：首頁 › 團體 › 歌曲）===== */
/* ⚠️ 全站 nav 元素選擇器是「底部固定 tab 列」樣式（position:fixed bottom:0），
   麵包屑必須完整覆寫回文件流，否則會被釘到畫面底（2026-09-11 實機抓到） */
.app-breadcrumb {
  position: static;
  inset: auto;
  z-index: auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
  font-size: .86rem;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
}
.app-breadcrumb a {
  color: var(--pink);
  text-decoration: none;
  padding: 2px 0;
}
.app-breadcrumb a:hover { text-decoration: underline; }
.app-breadcrumb a:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; border-radius: 4px; }
.app-breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 700; }
.app-breadcrumb .bc-sep { color: var(--muted); }