* { 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: 16px 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: #fff; font-weight: 700; text-decoration: none;
  transform: translateY(calc(-100% - 16px));
}
.skip-link:focus-visible { transform: translateY(0); }
body {
  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: relative;
  background: linear-gradient(135deg, #FFE29A 0%, #FFB4D0 45%, #A9C6FF 100%);
  padding: 12px 16px;
}
/* 桌機三欄：logo、品牌資訊、控制列各有穩定區域 */
.header-top {
  display: grid; grid-template-columns: 68px minmax(0, 1fr) 156px;
  align-items: center; gap: 14px;
  max-width: 900px; min-height: 88px; margin: 0 auto; padding: 10px 14px;
  background: rgba(255,255,255,.72); border: 2px solid rgba(255,255,255,.9);
  border-radius: 24px; box-shadow: 0 7px 20px color-mix(in srgb, var(--purple) 13%, transparent);
  backdrop-filter: blur(7px);
}
.header-logo {
  width: 68px; height: 68px; 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: #5A3E5B; font-size: 24px; line-height: 1.3;
  letter-spacing: 1px; text-overflow: ellipsis; text-shadow: 0 2px 0 rgba(255,255,255,.6);
  white-space: nowrap;
}
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: #7A5B6E; 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: var(--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: color .2s, background-color .2s;
}
.lang-btn:hover { color: var(--pink-text); }
.lang-btn.active { background: linear-gradient(135deg, var(--purple-text), var(--pink-text)); color: #fff; }
nav {
  display: flex; gap: 8px; justify-content: center; flex-wrap: nowrap;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.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,.08);
}
main { padding-bottom: 74px; }
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 button.active { background: var(--pink-text); border-color: var(--pink-text); color: #fff; 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) {
  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);
  }
  .lang-switch { gap: 1px; padding: 2px; }
  .lang-btn { padding: 3px 7px; font-size: 11px; }
  .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; }
  nav button .nav-ko { font-size: 10px; margin-top: 1px; }
  main { padding-bottom: 64px; }
}

@media (max-width: 379px) {
  header h1 .h1-sub { display: none; }
}
main { max-width: 760px; margin: 0 auto; padding: 20px 16px 74px; }
section { display: none; }
section.active { 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; }
.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 給酷酷力頭像跳動空間 */
}
/* 酷酷力頭像指示器（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);
}
.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: background .15s, color .15s; }
.now-lyric .lyric-word.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pink) 50%, transparent), color-mix(in srgb, var(--pink) 80%, transparent));
  color: #fff;
}
/* 羅馬拼音獨立一行（韓文下方） */
.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: #fff; 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; }

/* 手機橫放 → 影片全視窗覆蓋（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: 0; z-index: 90; }
}

/* PC 寬螢幕：播放器 = 可拖曳、可縮放的浮動視窗（2026-08-14 Nick 要求） */
@media (min-width: 1024px) {
  .yt-wrap {
    /* top 對齊歌曲欣賞區塊（header 下方）——2026-08-16 nav 移底部後：124(header) + 16 間距 */
    position: fixed; left: 20px; top: 140px; width: 340px; z-index: 90;
    margin-bottom: 0;
    resize: both; overflow: hidden;          /* CSS 原生縮放（右下角把手） */
    min-width: 280px; 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 不搶滑鼠事件 */
  main { margin-left: 390px; max-width: 760px; }
}
.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: background .15s, color .15s; }
.lyric-part-line .lyric-word.on {
  background: linear-gradient(180deg, color-mix(in srgb, var(--pink) 45%, transparent), color-mix(in srgb, var(--pink) 75%, transparent));
  color: #fff;
}
.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: #fff; 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(--pink-text); color: 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: #fff; 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; }
/* .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: #fff; transform: scale(1.1); }
.listen-btn.speaking { background: var(--pink-text); color: #fff; 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(--pink-text); font-size: 15px; margin-bottom: 6px; }
.grammar-panel p { font-size: 14px; color: var(--ink); margin-bottom: 6px; }
.grammar-panel .pattern { background: #fff; 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(--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(--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: #fff; 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: #fff; 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: #fff;
  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: #fff; 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: #fff; 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: #fff; 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: #fff; 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: #fff; 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） */
.artist-grid { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 520px; margin: 0 auto; }
.artist-view-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; max-width: 520px; 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: #fff; 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: #fff; 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: #fff; 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: #fff; 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: #fff; 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: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.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,.06); }
.quiz-exit-btn { width: var(--tap-target); height: var(--tap-target); border-radius: 50%; border: 2px solid var(--border); background: #fff; 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: #fff; }
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: #fff; 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: #fff; 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: #fff; 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(--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: #fff; 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: 1fr 1fr; max-width: 780px; } }
.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: 14px; }
@media (max-width: 480px) { .song-grid { grid-template-columns: 1fr; } }
.song-card {
  background: var(--panel); border: 2px solid var(--border); border-radius: 22px;
  padding: 20px 18px; 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;
}
.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; border-radius: 14px; overflow: hidden; margin-bottom: 12px;
  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); }
.song-card .sc-kr { font-size: 14px; color: var(--muted); margin-top: 2px; }
.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(--pink-text); }
.song-card .sc-summary { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.5; }

/* 課程 */
.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: #fff; 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: #fff; 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(--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; }

/* 發音提示 */
.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; }
}