/* ============================================================
   平板遊戲 — 全面強化版 style.css
   策略：保留所有 class 名稱，只升級視覺層
   ============================================================ */

:root {
  /* ── 背景色 ── */
  --bg1: #FFCFBD;          /* 更飽和的暖珊瑚 */
  --bg2: #C2E3FF;          /* 更飽和的天藍 */
  --bg3: #F7E6FF;          /* 新增：淡紫（背景第三層） */

  /* ── 文字色 ── */
  --ink: #2C1F3E;
  --ink-soft: #6B5A7C;

  /* ── 介面色 ── */
  --white: #FFFFFF;
  --card-bg: rgba(255,255,255,0.88);
  --glass-bg: rgba(255,255,255,0.62);
  --glass-border: rgba(255,255,255,0.55);

  /* ── 語意色 ── */
  --correct: #2EC97A;
  --correct-glow: rgba(46,201,122,0.40);
  --wrong: #FF4D6D;
  --wrong-glow: rgba(255,77,109,0.40);

  /* ── 主題色（按鈕/強調） ── */
  --accent: #8C6FFF;
  --accent-dark: #6A4FD8;
  --accent-glow: rgba(140,111,255,0.42);

  /* ── 陰影 ── */
  --shadow:    0 6px 20px rgba(90,50,140,0.13);
  --shadow-lg: 0 14px 38px rgba(90,50,140,0.20);
  --shadow-color: 0 8px 24px rgba(90,50,140,0.22);

  /* ── 動畫 ── */
  --ease-bounce: cubic-bezier(.34,1.56,.64,1);
  --ease-smooth: cubic-bezier(.4,0,.2,1);

  /* ── 字體 ── */
  --font-fun: 'Fredoka','PingFang TC','Microsoft JhengHei',sans-serif;
  font-size: 20px;
}

/* ── 字體套用 ── */
.hero h1, .flash-card .word, .quiz-word-btn, .mode-card .text h3,
.cat-card .name, .cat-card .nameEn, .gate-box h1, #resultTitle,
.player-name, .quiz-score, .quiz-wrong {
  font-family: var(--font-fun);
}

/* ── 彩虹漸層標題 ── */
.rainbow-text {
  background: linear-gradient(92deg, #FF4D7E, #FF7E2F, #FFD500, #2EC97A, #4DA6FF, #B96BFF);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: rainbowShift 6s linear infinite;
}
@keyframes rainbowShift {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── 基礎重置 ── */
*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
button {
  -webkit-appearance: none;
  appearance: none;
  transform: none;
  -webkit-transform: none;
  text-rendering: optimizeSpeed;
}

/* ── 全域背景：三層漸層 + 光暈點陣 ── */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(255,180,200,0.35) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 85% 75%, rgba(140,111,255,0.22) 0%, transparent 65%),
    radial-gradient(circle, rgba(255,255,255,0.5) 3.5px, transparent 4px) 0 0 / 56px 56px,
    radial-gradient(circle, rgba(255,255,255,0.5) 3.5px, transparent 4px) 28px 28px / 56px 56px,
    linear-gradient(150deg, var(--bg1) 0%, var(--bg3) 48%, var(--bg2) 100%);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", "Segoe UI", sans-serif;
  color: var(--ink);
  touch-action: manipulation;
}

#app {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

/* ============================================================
   密碼閘門
   ============================================================ */
.gate-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 60% 40% at 15% 20%, rgba(255,180,200,0.35) 0%, transparent 65%),
    radial-gradient(ellipse 55% 45% at 85% 75%, rgba(140,111,255,0.22) 0%, transparent 65%),
    radial-gradient(circle, rgba(255,255,255,0.5) 3.5px, transparent 4px) 0 0 / 56px 56px,
    radial-gradient(circle, rgba(255,255,255,0.5) 3.5px, transparent 4px) 28px 28px / 56px 56px,
    linear-gradient(150deg, var(--bg1) 0%, var(--bg3) 48%, var(--bg2) 100%);
}
.gate-screen.hidden { display: none; }

.gate-box {
  text-align: center;
  background: var(--card-bg);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1.5px solid var(--glass-border);
  border-radius: 2.4rem;
  box-shadow: var(--shadow-lg), 0 2px 0 rgba(255,255,255,0.9) inset;
  padding: 2.6rem 2.2rem 2.2rem;
  width: min(90vw, 28rem);
  position: relative;
  overflow: hidden;
}
.gate-box::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -15%;
  width: 60%;
  height: 60%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.75), rgba(255,255,255,0));
  pointer-events: none;
}

.gate-mascot {
  font-size: 4.2rem;
  display: inline-block;
  animation: mascotBounce 2.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(140,111,255,0.30));
}
.gate-box h1 {
  margin: 0.3rem 0 0.5rem;
  font-size: 1.9rem;
  text-shadow: 0 2px 8px rgba(140,111,255,0.18);
}
.gate-box p {
  margin: 0 0 1.2rem;
  color: var(--ink-soft);
  font-size: 1rem;
}
.gate-input {
  width: 100%;
  font-size: 1.3rem;
  padding: 0.85rem 1.1rem;
  border-radius: 1.1rem;
  border: 2px solid rgba(140,111,255,0.20);
  text-align: center;
  margin-bottom: 1rem;
  background: rgba(255,255,255,0.80);
  color: var(--ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gate-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-glow);
}
.gate-btn { width: 100%; }
.gate-error {
  color: var(--wrong);
  font-weight: 700;
  font-size: 0.9rem;
  margin: 0.8rem 0 0;
  display: none;
}
.gate-error.show { display: block; }

/* ============================================================
   訪客體驗版時效鎖：到期後全站反灰、不能點選（js/expiry.js 控制）
   ============================================================ */
.trial-expired #app,
.trial-expired .screentime-bar,
.trial-expired .volume-slider,
.trial-expired .bg-decor {
  filter: grayscale(1);
  pointer-events: none;
  user-select: none;
}
#expiredScreen { z-index: 30; }

/* ============================================================
   保護眼睛：右側遊戲時間剩餘量長條（貼在安全區域最右緣，直式排列）
   ============================================================ */
.screentime-bar {
  position: fixed;
  right: env(safe-area-inset-right);
  top: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 6.5rem 0.6rem 1rem;
  pointer-events: none;
}
.screentime-bar.hidden { display: none; }
.screentime-bar-icon { font-size: 2rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.18)); }
.screentime-bar-track {
  flex: 1;
  max-height: 18rem;
  width: 1.3rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.65);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.screentime-bar-fill {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  background: var(--correct);
  transition: height 1s linear, background-color 0.4s ease;
}
.screentime-bar-fill.warn   { background: #FFC93D; }
.screentime-bar-fill.danger { background: var(--wrong); }

/* ============================================================
   背景音樂音量：貼在保護眼睛沙漏長條左邊，平行排列的直式拉軸
   ============================================================ */
.volume-slider {
  position: fixed;
  right: calc(env(safe-area-inset-right) + 3.6rem);
  top: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.8rem;
  padding: 6.5rem 0.6rem 1rem;
}
.volume-slider.hidden { display: none; }
.volume-slider-icon { font-size: 1.8rem; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.18)); }
.volume-range-wrap {
  position: relative;
  flex: 1;
  max-height: 18rem;
  width: 2.2rem;
}
.volume-range {
  /* 用絕對定位＋位移置中，不能用 flex 排版置中：旋轉前寬度會被 JS 設成跟沙漏長條一樣高（600px級別），
     遠超過 .volume-range-wrap 本身 2.2rem 的寬度，如果用 flex 置中，flex-shrink 會把它硬壓縮回容器寬度，
     長度就對不上了。絕對定位讓它脫離 flex 排版，寬度設定才會完整生效 */
  position: absolute;
  top: 50%;
  left: 50%;
  /* 寬度（旋轉後變成拉軸長度）由 JS 的 syncVolumeSliderLength() 即時量測沙漏長條高度後設定，
     這裡的 16rem 只是 JS 還沒跑之前的保底值 */
  width: 16rem;
  height: 1.3rem;
  margin: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  touch-action: none;
}
.volume-range::-webkit-slider-runnable-track {
  height: 1.3rem;
  border-radius: 999px;
  background: linear-gradient(to right, var(--accent) var(--vol-pct, 10%), rgba(255,255,255,0.65) var(--vol-pct, 10%));
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.10);
}
.volume-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.9rem;
  height: 1.9rem;
  margin-top: -0.3rem;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
}
.volume-range::-moz-range-track {
  height: 1.3rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.65);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.12), 0 2px 6px rgba(0,0,0,0.10);
}
.volume-range::-moz-range-progress {
  height: 1.3rem;
  border-radius: 999px;
  background: var(--accent);
}
.volume-range::-moz-range-thumb {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  cursor: pointer;
}

/* ============================================================
   背景裝飾元素
   ============================================================ */
.bg-decor { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg-decor .decor {
  position: absolute;
  opacity: 0.65;
  animation: decorFloat ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.12));
}
.decor.d1  { top: 5%;  left: 7%;  font-size: 2.8rem; animation-duration: 7s;  animation-name: starTwinkle; }
.decor.d2  { top: 11%; right: 8%; font-size: 3.6rem; animation-duration: 11s; animation-delay: -2s; }
.decor.d3  { top: 35%; left: 4%;  font-size: 2.1rem; animation-duration: 6s;  animation-delay: -1s; }
.decor.d4  { top: 65%; right: 6%; font-size: 3rem;   animation-duration: 9s;  animation-delay: -3s; }
.decor.d5  { bottom: 5%;  left: 10%; font-size: 3.2rem; animation-duration: 12s; animation-delay: -4s; }
.decor.d6  { top: 57%;  right: 21%; font-size: 2.4rem; animation-duration: 10s; animation-delay: -5s; }
.decor.d7  { bottom: 14%; left: 33%; font-size: 2.2rem; animation-duration: 8s;  animation-delay: -2s; animation-name: starTwinkle; }
.decor.d8  { top: 81%;  right: 37%; font-size: 2rem;   animation-duration: 7s;  animation-delay: -1s; }
.decor.d9  { bottom: 13%; right: 47%; font-size: 2.6rem; animation-duration: 9.5s; animation-delay: -3.5s; }

@keyframes decorFloat {
  from { transform: translateY(0) rotate(-7deg); }
  to   { transform: translateY(-22px) rotate(7deg); }
}
@keyframes starTwinkle {
  0%,100% { transform: translateY(0) rotate(-10deg) scale(0.82); opacity: 0.38; }
  50%      { transform: translateY(-24px) rotate(12deg) scale(1.28); opacity: 0.92; }
}

/* ============================================================
   畫面切換
   ============================================================ */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: calc(1.2rem + env(safe-area-inset-top)) 1.5rem 1.2rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.screen.active { display: flex; }

/* ============================================================
   頂部欄（玻璃擬態）
   ============================================================ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  flex: 0 0 auto;
  gap: 0.5rem;
  /* 玻璃效果底部 */
  background: rgba(255,255,255,0.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 1.6rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(255,255,255,0.60);
  box-shadow: 0 2px 12px rgba(90,50,140,0.10);
}
.topbar-left  { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }
.topbar-right { display: flex; align-items: center; gap: 0.6rem; flex: 0 0 auto; }

/* ── 圖示按鈕：所有「返回／回首頁」類的導覽按鈕統一用同一個尺寸(4rem)，
   不再依畫面各自有 2.8rem/6.4rem 不同大小；只有「重複播放」這種動作按鈕維持 icon-btn-lg 稍大一點 ── */
.icon-btn {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: 1.5px solid var(--glass-border);
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  flex: 0 0 auto;
  box-shadow: var(--shadow);
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.18s var(--ease-bounce), box-shadow 0.18s ease;
}
.icon-btn:active {
  transform: scale(0.90);
  box-shadow: 0 2px 8px rgba(90,50,140,0.12);
}
.icon-btn-lg { width: 4.6rem; height: 4.6rem; font-size: 2.3rem; }
.icon-btn-home { padding-bottom: 0.25rem; }

/* ── 分數/錯誤 計數器：✅/❌ 兩個是對等的一組數字，統一大小、只差顏色，
   之前❌那顆字級小很多、內距也小很多，兩邊看起來重量不一致，這裡拉齊 ── */
.quiz-score, .quiz-wrong {
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-weight: 900;
  font-size: 1.95rem;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
.quiz-score {
  background: linear-gradient(135deg, rgba(46,201,122,0.15), rgba(46,201,122,0.06));
  border: 2px solid rgba(46,201,122,0.35);
  box-shadow: 0 3px 10px rgba(46,201,122,0.20);
  color: var(--correct);
}
.quiz-wrong {
  background: linear-gradient(135deg, rgba(255,77,109,0.12), rgba(255,77,109,0.05));
  border: 2px solid rgba(255,77,109,0.30);
  box-shadow: 0 3px 10px rgba(255,77,109,0.15);
  color: var(--wrong);
}

.title-block { text-align: center; flex: 1; }
.title-block h1 { margin: 0; font-size: 1.4rem; font-weight: 800; }
.scores-trophy { display: inline-block; font-size: 2em; vertical-align: middle; }
.title-block .sub { margin: 0; font-size: 0.85rem; color: var(--ink-soft); }
.spacer { width: 4rem; } /* 跟統一後的 .icon-btn 尺寸一致，topbar 左右才會平衡 */

.quiz-word-btn {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink);
  font-size: 3.6rem;
  font-weight: 900;
  padding: 0.2rem 0.5rem;
  font-family: inherit;
  line-height: 1.2;
  white-space: nowrap;
  transform: none;
  display: inline-block;
  text-shadow: 0 3px 10px rgba(90,50,140,0.15);
}
.quiz-word-btn:active { transform: scale(0.94); }

/* ============================================================
   玩家選擇畫面
   ============================================================ */
.player-grid {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1rem;
  flex-wrap: wrap;
}
.player-card {
  position: relative;
  overflow: hidden;
  border: none;
  background: var(--white);
  border-radius: 2.4rem;
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(255,255,255,0.90);
  padding: 1rem;
  cursor: pointer;
  width: min(40vw, 17rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  animation: cardPopIn 0.6s var(--ease-bounce) both;
  /* 彩色漸層邊框效果 */
  outline: 3.5px solid transparent;
  outline-offset: 3px;
  transition: transform 0.25s var(--ease-bounce), box-shadow 0.25s ease;
}
.player-card::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -20%;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.80), rgba(255,255,255,0));
  pointer-events: none;
  z-index: 1;
}
.player-card::after {
  content: '';
  position: absolute;
  inset: -3.5px;
  border-radius: 2.6rem;
  background: linear-gradient(135deg, #FF7ED4, #FFC86B, #4DA6FF, #B96BFF);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.player-card:nth-child(1) {
  animation-delay: 0.08s;
  animation-name: cardPopIn, playerWiggle;
  animation-duration: 0.6s, 3.4s;
  animation-timing-function: var(--ease-bounce), ease-in-out;
  animation-iteration-count: 1, infinite;
}
.player-card:nth-child(2) {
  animation-delay: 0.2s;
  animation-name: cardPopIn, playerWiggle;
  animation-duration: 0.6s, 3.4s;
  animation-timing-function: var(--ease-bounce), ease-in-out;
  animation-iteration-count: 1, infinite;
  animation-delay: 0.2s, 1.1s;
}
.player-card:active { transform: scale(0.93) rotate(-2deg); }
.player-card img {
  position: relative;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  border-radius: 1.8rem;
  box-shadow: 0 4px 14px rgba(90,50,140,0.14);
}
.player-name {
  position: relative;
  font-size: 1.7rem;
  font-weight: 900;
  text-shadow: 0 2px 6px rgba(90,50,140,0.12);
}
@keyframes playerWiggle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-7px) rotate(-1.5deg); }
}

/* ============================================================
   主頁 Hero 區塊
   ============================================================ */
.hero { text-align: center; margin-bottom: 0.6rem; flex: 0 0 auto; position: relative; }
.switch-player-btn { position: absolute; top: 0; left: 0; z-index: 2; } /* 尺寸沿用 .icon-btn 的統一大小(4rem)，跟其他畫面的返回鍵一致 */
.hero .mascot {
  font-size: 4.6rem;
  line-height: 1;
  filter: drop-shadow(0 6px 14px rgba(140,111,255,0.30));
  display: inline-block;
  animation: mascotBounce 2.4s ease-in-out infinite;
}
.hero img.mascot {
  font-size: 0;
  width: 6.6rem;
  height: 6.6rem;
  object-fit: cover;
  border-radius: 50%;
  border: 5px solid var(--white);
  box-shadow: var(--shadow-lg), 0 0 0 8px rgba(140,111,255,0.15);
  filter: none;
  animation: mascotBounce 2.4s ease-in-out infinite;
}
@keyframes mascotBounce {
  0%, 100% { transform: translateY(0) scale(1) rotate(-4deg); }
  50%       { transform: translateY(-15px) scale(1.06) rotate(4deg); }
}
.hero h1 {
  font-size: 2.2rem;
  margin: 0.3rem 0 0;
  font-weight: 900;
  display: inline-block;
  animation: titleWiggle 2.6s ease-in-out infinite;
  text-shadow: 0 3px 12px rgba(140,111,255,0.18);
}
@keyframes titleWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25%       { transform: rotate(-2deg) scale(1.03); }
  75%       { transform: rotate(2deg) scale(1.03); }
}
.hero p { margin: 0.3rem 0 0; color: var(--ink-soft); font-size: 1rem; }

/* ============================================================
   類別格子
   ============================================================ */
.category-grid {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  padding: 0.4rem 0.2rem 1rem;
}
@media (min-width: 820px) {
  .category-grid { grid-template-columns: repeat(auto-fill, minmax(11rem, 16rem)); justify-content: center; }
}

/* ============================================================
   備份欄
   ============================================================ */
.backup-bar { display: flex; justify-content: center; gap: 0.8rem; padding: 0 0 0.6rem; flex: 0 0 auto; }
.backup-btn { width: auto; font-size: 0.85rem; padding: 0.6rem 1.1rem; }

/* ============================================================
   成績總覽
   ============================================================ */
.scores-wrap { flex: 1; min-height: 0; overflow-y: auto; padding: 0.3rem 0.2rem 1rem; display: flex; flex-direction: column; }
.modal-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  text-align: center;
  color: var(--ink-soft);
  font-size: 1.2rem;
  font-weight: 700;
  padding: 2rem;
}
.modal-empty::before {
  content: '🎯';
  font-size: 4.5rem;
  filter: drop-shadow(0 4px 8px rgba(140,111,255,0.22));
}
.scores-panel {
  background: var(--card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid var(--glass-border);
  border-radius: 1.6rem;
  box-shadow: var(--shadow);
  padding: 1rem 1.2rem 1.2rem;
}
.scores-summary {
  font-size: 1.25rem;
  text-align: center;
  padding-bottom: 1rem;
  margin-bottom: 0.8rem;
  border-bottom: 2px solid rgba(200,170,255,0.30);
}
.scores-summary b { color: var(--correct); font-size: 1.7rem; }
.scores-reward {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: linear-gradient(145deg, #FFE040, #FFAB00);
  border-radius: 1.3rem;
  padding: 0.9rem 1.1rem;
  margin-bottom: 1rem;
  color: var(--white);
  box-shadow: 0 6px 20px rgba(255,171,0,0.35);
  border: 1.5px solid rgba(255,255,255,0.45);
}
.scores-reward-badge {
  font-size: 5.2rem;
  flex: 0 0 auto;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.18));
}
.scores-reward-text { font-size: 1.05rem; font-weight: 800; line-height: 1.4; }
.scores-reward-text b { font-size: 1.4rem; }
.scores-reward-sub { font-size: 0.85rem; font-weight: 700; opacity: 0.9; margin-top: 0.1rem; }
.scores-list { display: flex; flex-direction: column; gap: 0.7rem; }
.score-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 1.15rem;
  background: rgba(255,255,255,0.70);
  border-radius: 1.1rem;
  padding: 1rem 1.2rem;
  border-left: 0.4rem solid var(--correct);
  box-shadow: 0 2px 8px rgba(90,50,140,0.08);
}
.score-date { font-weight: 700; color: var(--ink-soft); flex: 0 0 auto; min-width: 7.5rem; font-size: 1.05rem; }
.score-today {
  background: linear-gradient(135deg, var(--correct), #27B86A);
  color: var(--white);
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  margin-left: 0.3rem;
  box-shadow: 0 2px 6px var(--correct-glow);
}
.score-cat  { font-weight: 800; flex: 0 0 auto; font-size: 1.2rem; }
.score-stars { letter-spacing: 2px; flex: 0 0 auto; font-size: 1.3rem; }
.score-num { margin-left: auto; font-weight: 900; color: var(--correct); flex: 0 0 auto; font-size: 1.5rem; }
.score-mode-badge {
  font-size: 0.75rem;
  background: rgba(140, 111, 255, 0.12);
  color: var(--accent-dark);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  margin-left: 0.4rem;
  font-weight: 800;
  vertical-align: middle;
  border: 1px solid rgba(140, 111, 255, 0.2);
  display: inline-block;
}

/* ============================================================
   類別卡（首頁主題卡）
   ============================================================ */
.cat-card {
  position: relative;
  border: none;
  border-radius: 2rem;
  padding: 1.2rem 0.8rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  overflow: hidden;
  /* 多層陰影：色彩陰影 + 底部按下感 */
  box-shadow:
    var(--shadow),
    inset 0 -7px 0 rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.30);
  cursor: pointer;
  color: var(--white);
  transition: transform 0.25s var(--ease-bounce), box-shadow 0.2s ease;
  animation: cardPopIn 0.55s var(--ease-bounce) both;
  /* 上方玻璃高光邊框 */
  border-top: 1.5px solid rgba(255,255,255,0.45);
  border-left: 1.5px solid rgba(255,255,255,0.35);
}
.cat-card:nth-child(1) { animation-delay: 0.05s; }
.cat-card:nth-child(2) { animation-delay: 0.12s; }
.cat-card:nth-child(3) { animation-delay: 0.19s; }
.cat-card:nth-child(4) { animation-delay: 0.26s; }
.cat-card:nth-child(5) { animation-delay: 0.33s; }
.cat-card:nth-child(6) { animation-delay: 0.40s; }

@keyframes cardPopIn {
  0%   { opacity: 0; transform: scale(0.68) translateY(12px); }
  60%  { opacity: 1; transform: scale(1.06) translateY(-3px); }
  100% { opacity: 1; transform: scale(1)    translateY(0); }
}

/* 頂部高光光暈 */
.cat-card::before {
  content: '';
  position: absolute;
  top: -35%;
  left: -18%;
  width: 72%;
  height: 72%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.65), rgba(255,255,255,0));
  pointer-events: none;
}
/* 底部漸層壓暗（增加層次感） */
.cat-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.12));
  pointer-events: none;
  border-radius: 0 0 2rem 2rem;
}
.cat-card:active { transform: scale(0.91) rotate(-2deg); }

.cat-card .emoji {
  font-size: 3.6rem;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,0.20));
  position: relative;
  display: inline-block;
  animation: iconBreathe 2.4s ease-in-out infinite;
  z-index: 1;
}
.cat-card:nth-child(even) .emoji  { animation-delay: 0.7s; }
.cat-card:nth-child(3n)   .emoji  { animation-delay: 1.3s; }
.cat-card[data-cat="zhuyin"] .emoji { font-size: 2.1rem; letter-spacing: 0.05em; }

@keyframes iconBreathe {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50%       { transform: scale(1.14) rotate(-6deg); }
}
.cat-card .name   { font-size: 1.15rem; font-weight: 800; position: relative; z-index: 1; text-shadow: 0 2px 5px rgba(0,0,0,0.15); }
.cat-card .nameEn { font-size: 0.8rem; opacity: 0.92; font-weight: 600; position: relative; z-index: 1; }
.cat-card .stars  { font-size: 1.1rem; letter-spacing: 2px; margin-top: 0.15rem; position: relative; z-index: 1; }
.cat-card.locked  { filter: grayscale(0.65); opacity: 0.72; cursor: not-allowed; }
.cat-card .lock-overlay {
  position: absolute;
  inset: 0;
  border-radius: 2rem;
  background: rgba(30,20,40,0.40);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  z-index: 2;
}
.cat-card.done-today { filter: grayscale(0.55); opacity: 0.78; }
.cat-card .done-overlay {
  position: absolute;
  inset: 0;
  border-radius: 2rem;
  background: rgba(30,20,40,0.38);
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  z-index: 2;
}

/* 選擇體驗區畫面：英文/中文卡片 */
#screen-zone .category-grid {
  grid-template-columns: repeat(2, min(38vw, 20rem));
  justify-content: center;
}
#screen-zone .cat-card { aspect-ratio: 1/1; justify-content: center; }
#screen-zone .cat-card .emoji { font-size: 5.2rem; }

/* ============================================================
   模式選擇（學習 / 挑戰 / 手寫 / 接接看）
   ============================================================ */
.mode-grid {
  flex: 1;
  display: flex;
  flex-flow: row wrap;
  gap: 1.4rem;
  justify-content: center;
  align-items: center;
}
.mode-card {
  position: relative;
  overflow: hidden;
  width: min(48vw, 19rem);
  border: none;
  border-radius: 2.2rem;
  border-bottom: 0.55rem solid var(--bg2);
  padding: 2.3rem 1.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  background: var(--card-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1.5px solid var(--glass-border);
  border-left: 1.5px solid rgba(255,255,255,0.50);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  animation: cardPopIn 0.5s var(--ease-bounce) both;
  transition: transform 0.25s var(--ease-bounce), box-shadow 0.2s ease;
}
.mode-card:nth-child(1) { animation-delay: 0.05s; border-bottom-color: #70B8FF; }
.mode-card:nth-child(2) { animation-delay: 0.15s; border-bottom-color: #FF85B8; }
.mode-card:nth-child(3) { border-bottom-color: #A890FF; }
.mode-card:nth-child(4) { border-bottom-color: #FFC06B; }
.mode-card::before {
  content: '';
  position: absolute;
  top: -40%;
  left: -20%;
  width: 62%;
  height: 62%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.68), rgba(255,255,255,0));
  pointer-events: none;
}
.mode-card:active { transform: scale(0.93) rotate(-2deg); }
.mode-card .emoji {
  font-size: 4.2rem;
  display: inline-block;
  animation: iconBreathe 2.4s ease-in-out infinite;
  filter: drop-shadow(0 4px 10px rgba(90,50,140,0.20));
}
.mode-card:nth-child(2) .emoji { animation-delay: 0.7s; }
.mode-card .text { text-align: center; }
.mode-card .text h3 { margin: 0; font-size: 1.3rem; font-weight: 800; }
.mode-card .text p  { margin: 0.3rem 0 0; color: var(--ink-soft); font-size: 0.85rem; }
.attempts-row { margin-top: 0.4rem; font-size: 1.15rem; letter-spacing: 0.15rem; }
.lock-countdown { margin-top: 0.3rem; font-size: 0.78rem; font-weight: 700; color: var(--wrong); }
.mode-card.locked { filter: grayscale(0.6); opacity: 0.7; cursor: not-allowed; }
.mode-card.locked:active { transform: none; }

/* ============================================================
   學習模式（單字卡格）
   ============================================================ */
.flash-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
  overflow-y: auto;
  padding: 0.4rem;
  align-content: start;
}
@media (min-width: 820px) { .flash-grid { grid-template-columns: repeat(2, 1fr); } }

.flash-card {
  position: relative;
  min-width: 0;
  border: none;
  border-radius: 2rem; /* 跟同尺寸級距的 .cat-card 對齊，不再是唯一用 1.8rem 的卡片 */
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1.5px solid var(--glass-border);
  border-left: 1.5px solid rgba(255,255,255,0.45);
  box-shadow: var(--shadow);
  padding: 1rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
  transition: filter 0.2s ease, opacity 0.2s ease, transform 0.18s var(--ease-bounce);
}
.flash-card:active { transform: scale(0.92); }
/* 點下新卡片後要等發音播完才能點下一張，避免用連點跳過發音、沒真的聽到就過關；
   鎖住期間其他卡片變暗且不能點，正在播放的那張維持原本亮度讓小朋友知道要等它 */
.flash-grid.learn-locked .flash-card { pointer-events: none; opacity: 0.55; }
.flash-grid.learn-locked .flash-card.playing { opacity: 1; }
.flash-card .emoji-visual { font-size: 3rem; }
.flash-photo {
  width: 85%;
  aspect-ratio: 1/1;
  object-fit: contain;
  border-radius: 1rem;
  background: rgba(194,227,255,0.55);
  margin: 0 auto;
}
.flash-photo.swatch-visual { border: 2px solid rgba(0,0,0,0.12); }
.flash-photo.numeral-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.2rem;
  font-weight: 900;
  border: 2px solid rgba(0,0,0,0.08);
}
.flash-card .word {
  font-weight: 800;
  font-size: 1.6rem;
  text-align: center;
  width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}
.flash-card.visited { filter: grayscale(0.9); opacity: 0.50; }
.flash-check {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--correct), #27B86A);
  color: var(--white);
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 900;
  box-shadow: 0 2px 8px var(--correct-glow);
}
.flash-card.visited .flash-check { display: flex; }

/* ============================================================
   挑戰模式（選擇題）
   ============================================================ */
.quiz-wrap {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3rem 0 0.5rem;
  gap: 0.5rem;
}

/* 進度點：脈動動畫 */
.progress-dots { display: flex; gap: 0.55rem; flex: 0 0 auto; }
.quiz-wrap .progress-dots { order: 1; }
.progress-dots .dot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: rgba(180,160,220,0.40);
  transition: background 0.2s ease, transform 0.2s var(--ease-bounce);
}
.progress-dots .dot.done {
  background: linear-gradient(135deg, var(--correct), #27B86A);
  box-shadow: 0 2px 6px var(--correct-glow);
}
.progress-dots .dot.current {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  box-shadow: 0 2px 8px rgba(255,165,0,0.50);
  animation: dotPulse 1.2s ease-in-out infinite;
  transform: scale(1.25);
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 2px 8px rgba(255,165,0,0.50); transform: scale(1.25); }
  50%       { box-shadow: 0 2px 14px rgba(255,165,0,0.80); transform: scale(1.40); }
}

.choice-grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 1.1rem;
  width: 100%;
  max-width: 56rem;
}
.choice-grid.choices-3 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr; max-width: 64rem; }
.choice-grid.choices-2 { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr; max-width: 40rem; }

.choice-card {
  border: none;
  border-radius: 2.2rem;
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-top: 1.5px solid var(--glass-border);
  border-left: 1.5px solid rgba(255,255,255,0.50);
  box-shadow: var(--shadow-lg);
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.5rem;
  cursor: pointer;
  overflow: hidden;
  padding: 0.7rem;
  transition: transform 0.18s var(--ease-bounce), box-shadow 0.18s ease;
}
.choice-photo { width: 100%; height: 100%; object-fit: contain; border-radius: 1.6rem; background: rgba(194,227,255,0.55); }
.choice-photo.swatch-visual { border: 3px solid rgba(0,0,0,0.12); }
.choice-photo.numeral-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.4rem;
  font-weight: 900;
  border: 2px solid rgba(0,0,0,0.08);
}
.choice-card .emoji-visual { font-size: 4.5rem; }
.choice-card:active { transform: scale(0.93); }
.choice-card.correct {
  background: linear-gradient(135deg, var(--correct), #27B86A);
  border-color: transparent;
  box-shadow: 0 0 0 8px var(--correct-glow), var(--shadow-lg);
  animation: pop 0.45s ease;
}
.choice-card.wrong {
  background: linear-gradient(135deg, var(--wrong), #E8304E);
  border-color: transparent;
  box-shadow: 0 0 0 8px var(--wrong-glow), var(--shadow-lg);
  animation: shake 0.4s ease;
}

@keyframes pop   { 0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-9px); } 75% { transform: translateX(9px); } }

/* ============================================================
   手寫模式
   ============================================================ */
.hw-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 0.3rem 0 0.5rem; gap: 0.6rem; }
.hw-main { flex: 1; min-height: 0; width: 100%; max-width: 56rem; display: flex; gap: 1.2rem; align-items: stretch; }
.hw-canvas-box {
  flex: 1;
  min-width: 0;
  border-radius: 1.6rem;
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--glass-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  transition: box-shadow 0.2s ease;
}
.hw-canvas-box canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.hw-canvas-box.correct {
  box-shadow: 0 0 0 8px var(--correct-glow), var(--shadow-lg);
  animation: pop 0.4s ease;
}
.hw-canvas-box.wrong {
  box-shadow: 0 0 0 8px var(--wrong-glow), var(--shadow-lg);
  animation: shake 0.4s ease;
}
.hw-clear-btn   { flex: 0 0 auto; padding: 0.6rem 1.2rem; font-size: 0.95rem; }
.hw-trace-feedback { flex: 0 0 auto; min-height: 1.6rem; font-size: 1.1rem; font-weight: 800; text-align: center; }
.hw-trace-feedback.good { color: var(--correct); }
.hw-trace-feedback.okay { color: #FF9B54; }

/* ============================================================
   接接看模式
   ============================================================ */
.catch-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 0.3rem 0 0.5rem; gap: 0.6rem; }
.catch-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: 56rem;
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--glass-border);
  border-radius: 1.6rem;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  touch-action: none; /* 手指在畫面上滑動切水果，不能被瀏覽器當成捲動/選字手勢 */
  user-select: none;
}

/* 滑動軌跡（刀光）畫布：蓋在掉落物上層，本身不接手勢事件，事件都綁在 .catch-stage 上 */
.catch-trail-canvas {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

/* 掉落物外框：決定形狀/碰撞範圍，用幾種不同的圓潤造型＋底色模擬不同水果，避免每顆看起來都一樣單調；
   .catch-slice-half（切開後飛開的兩個半塊）也要套用同一套形狀/底色規則，所以 shape-* 不綁定在 .catch-item 底下 */
.catch-item {
  position: absolute;
  top: 0;
  width: 7.2rem; /* 放大讓圖片更清楚，要跟 js/app.js 的 CATCH_ITEM_SIZE 保持一致 */
  height: 7.2rem;
  padding: 0.4rem;
  will-change: transform;
}
.catch-item, .catch-slice-half {
  border: 1.5px solid rgba(255,255,255,0.65);
  box-shadow: var(--shadow);
}
.shape-a { border-radius: 50%; background: linear-gradient(135deg, #FFB3C6, #FF6B8B); }
.shape-b { border-radius: 50% 50% 48% 48% / 60% 60% 40% 40%; background: linear-gradient(135deg, #FFE08A, #FFB238); }
.shape-c { border-radius: 48% 52% 50% 50% / 55% 45% 55% 45%; background: linear-gradient(135deg, #B7F0B1, #4FCB6A); }
.shape-d { border-radius: 42%; background: linear-gradient(135deg, #D6B3FF, #9B6BFF); }
/* 裡面的內容（emoji/圖片/數字）獨立輕輕搖擺，跟外框的下墜位移（JS控制）分開兩層做，animation跟inline transform才不會互相蓋掉 */
.catch-item-inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fruit-sway 1.6s ease-in-out infinite;
}
@keyframes fruit-sway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.catch-item.reveal-correct {
  animation: pop 0.4s ease;
  box-shadow: 0 0 0 7px var(--correct-glow), var(--shadow-lg);
}
.catch-item .emoji-visual  { font-size: 3.6rem; }
.catch-photo { width: 100%; height: 100%; object-fit: contain; border-radius: 1rem; background: rgba(194,227,255,0.55); }
.catch-photo.swatch-visual   { border: 2px solid rgba(0,0,0,0.12); }
.catch-photo.numeral-visual  { display: flex; align-items: center; justify-content: center; font-size: 2.9rem; font-weight: 900; border: 2px solid rgba(0,0,0,0.08); }

/* 切中/切錯瞬間：把原本掉落物換成兩個各切一半的分身，往左右飛開並淡出，模擬水果被劃開的效果 */
.catch-slice-half {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}
.catch-slice-half.hit-correct { box-shadow: 0 0 0 7px var(--correct-glow); }
.catch-slice-half.hit-wrong   { box-shadow: 0 0 0 7px var(--wrong-glow); }
.catch-slice-half.left  { animation: slice-fly-left 0.55s ease-out forwards; }
.catch-slice-half.right { animation: slice-fly-right 0.55s ease-out forwards; }
@keyframes slice-fly-left  { to { transform: translate(-2.4rem, 2.8rem) rotate(-55deg); opacity: 0; } }
@keyframes slice-fly-right { to { transform: translate(2.4rem, 2.8rem) rotate(55deg); opacity: 0; } }

/* ============================================================
   結果畫面（全面強化）
   ============================================================ */
.result-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  text-align: center;
}
.result-wrap .big-emoji {
  font-size: 6rem;
  filter: drop-shadow(0 0 20px rgba(255,220,0,0.50)) drop-shadow(0 8px 14px rgba(0,0,0,0.15));
  animation: resultBounce 0.7s var(--ease-bounce) both, emojiGlow 2s ease-in-out 0.7s infinite alternate;
}
@keyframes resultBounce {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  70%  { transform: scale(1.25) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes emojiGlow {
  from { filter: drop-shadow(0 0 12px rgba(255,200,0,0.40)) drop-shadow(0 8px 14px rgba(0,0,0,0.15)); }
  to   { filter: drop-shadow(0 0 28px rgba(255,200,0,0.75)) drop-shadow(0 8px 14px rgba(0,0,0,0.15)); }
}

.result-wrap h2 {
  margin: 0;
  font-size: 2rem;
  font-weight: 900;
  font-family: var(--font-fun);
  text-shadow: 0 4px 14px rgba(140,111,255,0.22);
  animation: cardPopIn 0.5s var(--ease-bounce) 0.15s both;
}

.result-stars {
  font-size: 3.2rem;
  letter-spacing: 0.5rem;
  animation: starsReveal 0.6s var(--ease-bounce) 0.3s both;
  filter: drop-shadow(0 0 10px rgba(255,210,0,0.55));
}
@keyframes starsReveal {
  0%   { transform: scale(0.4); opacity: 0; }
  70%  { transform: scale(1.18); opacity: 1; }
  100% { transform: scale(1); }
}

.result-wrap p { margin: 0; color: var(--ink-soft); }
.result-actions { display: flex; gap: 1rem; margin-top: 1rem; }

/* ============================================================
   按鈕系統（閃光 shimmer + 彩色陰影）
   ============================================================ */
.btn {
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 1.8rem;
  padding: 0.95rem 1.7rem;
  font-size: 1.05rem;
  font-weight: 800;
  font-family: var(--font-fun);
  box-shadow:
    var(--shadow),
    inset 0 -4px 0 rgba(0,0,0,0.12),
    0 0 0 0 var(--accent-glow);
  cursor: pointer;
  color: var(--white);
  background: linear-gradient(150deg, #B09AFF, var(--accent), var(--accent-dark));
  background-size: 200% 100%;
  transition: transform 0.25s var(--ease-bounce), box-shadow 0.2s ease, background-position 0.4s ease;
}
/* 頂部光暈 */
.btn::before {
  content: '';
  position: absolute;
  top: -55%;
  left: -8%;
  width: 48%;
  height: 85%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.52), rgba(255,255,255,0));
  pointer-events: none;
}
/* 掃光 shimmer：用 transform 位移取代 left（left 會觸發整頁重新排版，這個動畫是每3.2秒無限跑、
   畫面上每顆按鈕都各自跑一份，越多按鈕越耗電；transform 只需要合成層處理，不會觸發排版/繪製，
   平板上更省電、更不容易掉幀） */
.btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.38) 50%, transparent 70%);
  animation: shimmer 3.2s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
@keyframes shimmer {
  0%   { transform: translateX(-133%); }
  40%  { transform: translateX(217%); }
  100% { transform: translateX(217%); }
}
.btn:active {
  transform: scale(0.94);
  box-shadow: var(--shadow), inset 0 -2px 0 rgba(0,0,0,0.10), 0 0 0 6px var(--accent-glow);
}
.btn.secondary {
  background: var(--card-bg);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1.5px solid var(--glass-border);
  color: var(--ink);
  box-shadow: var(--shadow), inset 0 -4px 0 rgba(0,0,0,0.06);
}
.btn.secondary::before { display: none; }
.btn.secondary::after  { display: none; }
.btn.danger {
  background: linear-gradient(150deg, #FF9EB5, var(--wrong), #E8304E);
}

/* ============================================================
   彩帶
   ============================================================ */
.confetti-piece {
  position: fixed;
  top: -2rem;
  font-size: 1.7rem;
  pointer-events: none;
  animation: fall linear forwards;
  z-index: 50;
}
@keyframes fall {
  to { transform: translateY(110vh) rotate(400deg); opacity: 0.85; }
}

/* ============================================================
   情緒表情區美化與放大
   ============================================================ */
.emotion-emoji {
  display: inline-block;
  /* 使用精美立體投影，配合飽和度與對比度濾鏡，讓系統表情符號呈現如同精美貼紙的質感 */
  filter: drop-shadow(0 6px 10px rgba(90, 50, 140, 0.16)) saturate(1.15) contrast(1.05);
  text-shadow: 0 4px 8px rgba(90, 50, 140, 0.12);
  transition: transform 0.3s var(--ease-bounce), filter 0.3s ease;
  line-height: 1;
}

/* 1. 學習模式（單字卡）內表情放大與浮動動畫 */
.flash-card .emotion-emoji {
  font-size: 5rem; /* 原本是 3rem */
  animation: emotionBreathe 3.2s ease-in-out infinite;
}

.flash-card:hover .emotion-emoji {
  transform: scale(1.12) translateY(-6px);
  filter: drop-shadow(0 10px 16px rgba(90, 50, 140, 0.25)) saturate(1.2) contrast(1.1);
}

.flash-card:active .emotion-emoji {
  transform: scale(0.9) translateY(0) !important;
  animation: none;
}

/* 2. 挑戰模式（四選一選擇題）內表情極致放大 */
.choice-card .emotion-emoji {
  font-size: 6.8rem; /* 原本是 4.5rem */
  animation: emotionFloating 3.6s ease-in-out infinite alternate;
}

.choice-card:hover .emotion-emoji {
  transform: scale(1.08);
  filter: drop-shadow(0 12px 20px rgba(90, 50, 140, 0.28)) saturate(1.2) contrast(1.1);
}

.choice-card:active .emotion-emoji {
  transform: scale(0.9) !important;
  animation: none;
}

/* 3. 接接看（籃子接水果）內表情放大 */
.catch-item .emotion-emoji {
  font-size: 3.6rem; /* 原本是 2.6rem */
  animation: emotionSpinSoft 6s linear infinite;
}

/* 4. 首頁選單中的「情緒體驗區」卡片表情放大與專屬動畫 */
.cat-card[data-cat="emotions"] .emoji {
  font-size: 4.5rem !important; /* 原本是 3.6rem */
  animation: catEmojiPlayful 4s ease-in-out infinite;
}

/* ── 各式動態關鍵影格 ── */
@keyframes emotionBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-6px) scale(1.08); }
}

@keyframes emotionFloating {
  0% { transform: translateY(2px) scale(1) rotate(-2deg); }
  100% { transform: translateY(-8px) scale(1.05) rotate(2deg); }
}

@keyframes emotionSpinSoft {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(8deg); }
}

@keyframes catEmojiPlayful {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.12) rotate(-8deg); }
  75% { transform: scale(1.12) rotate(8deg); }
}