/* =============================================
   Sight Words Fun! — 樣式表
   字型：Nunito（英文）+ Noto Sans TC（中文）
   設計：活潑、色彩豐富，適合 6 歲幼稚園學生
   ============================================= */

/* ---------- 全域重置 & 基礎設定 ---------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --bg-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --card-bg: rgba(40, 50, 75, 0.85);            /* V4: 深藍灰半透明卡片（原白色） */
  --card-border: rgba(255, 255, 255, 0.18);     /* V4: 卡片微邊框 */
  --primary: #4A90D9;
  --primary-light: #6BB5F8;                     /* V4: 深底用亮藍 */
  --primary-dark: #357ABD;
  --accent: #FF9F43;
  --accent-light: #FFB668;                      /* V4: 深底用亮橘 */
  --accent-dark: #E08C35;
  --success: #27AE60;
  --success-light: #7FE5A0;                     /* V4: 深底狀態文字 */
  --success-soft: rgba(39, 174, 96, 0.28);      /* V4: 深底狀態背景 */
  --error: #E74C3C;
  --error-light: #FFA8A0;                       /* V4: 深底狀態文字 */
  --error-soft: rgba(231, 76, 60, 0.28);        /* V4: 深底狀態背景 */
  --text: #FFFFFF;                              /* V4: 卡片內主文字（深底→白字） */
  --text-light: rgba(255, 255, 255, 0.72);      /* V4: 卡片內輔助文字 */
  --text-on-light: #2C3E50;                     /* V4: 白底元件用（鍵盤/letter-slot） */
  --star-color: #FFD93D;                        /* V4: 黃星調亮 */
  --shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
  --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.22);
  --radius: 20px;
  --radius-sm: 12px;
}

html, body {
  height: 100%;
  font-family: 'Nunito', 'Noto Sans TC', sans-serif;
  background: var(--bg-gradient);
  background-attachment: fixed;
  color: var(--text);
  overflow-x: hidden;
  /* 防止手機端雙擊縮放 */
  touch-action: manipulation;
}

/* ---------- 畫面切換系統 ---------- */
.screen {
  display: none;
  min-height: 100vh;
  width: 100%;
  position: relative;
  animation: fadeIn 0.35s ease;
}

.screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* =============================================
   Screen 1：首頁
   ============================================= */

/* 首頁注音漢字繼承標題白色（V4 注音全域改白，移除原淺粉紅特例） */
.home-container .zy-char {
  color: inherit;
}

.home-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 16px 40px;
  width: 100%;
  max-width: 600px;
}

.home-title-area {
  text-align: center;
  margin-bottom: 40px;
}

.main-title {
  font-size: 3.4rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 3px 12px rgba(0,0,0,0.25);
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.main-subtitle {
  font-size: 1.6rem;
  font-weight: 700;
  color: rgba(255,255,255,0.9);
  margin-top: 12px;
  font-family: 'Noto Sans TC', sans-serif;
}

.mascot {
  font-size: 5rem;
  margin-top: 16px;
  animation: bounce 2s ease-in-out infinite;
}

.choose-label {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  margin-bottom: 24px;
  text-align: center;
  line-height: 1.8;
}

.home-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.btn-semester {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 28px;
  border: none;
  border-radius: var(--radius);
  font-family: 'Nunito', 'Noto Sans TC', sans-serif;
  font-size: 1.3rem;
  font-weight: 800;
  cursor: pointer;
  width: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  color: #fff;
}

.btn-semester:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow);
}

.btn-semester:active {
  transform: translateY(0) scale(0.97);
}

.btn-s1 { background: linear-gradient(135deg, #FF9F43, #FF6B6B); }
.btn-s2 { background: linear-gradient(135deg, #26de81, #20bf6b); }
.btn-all { background: linear-gradient(135deg, #4A90D9, #764ba2); }

.sem-num {
  font-size: 2rem;
  flex-shrink: 0;
}

.sem-text {
  text-align: left;
  line-height: 1.3;
}

.sem-text small {
  font-size: 0.9rem;
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 600;
  opacity: 0.9;
}

/* =============================================
   Screen 2：模式選擇
   ============================================= */
.mode-container {
  width: 100%;
  max-width: 680px;
  padding: 24px 16px 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.mode-header {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin-bottom: 8px;
}

.mode-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  font-family: 'Noto Sans TC', sans-serif;
  flex: 1;
}

.mode-subtitle {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  margin-bottom: 28px;
  font-family: 'Noto Sans TC', sans-serif;
}

.mode-cards {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
}

.mode-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 24px 28px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 3px solid transparent;
}

.mode-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: var(--shadow);
  border-color: var(--primary);
}

.mode-card:active {
  transform: scale(0.97);
}

.mode-icon {
  font-size: 2.4rem;
  line-height: 1;
}

.mode-name {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text);
  font-family: 'Noto Sans TC', sans-serif;
}

.mode-name-en {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--primary-light);                  /* V4: 深底用亮藍 */
}

.mode-desc {
  font-size: 0.95rem;
  color: var(--text-light);
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 500;
  margin-top: 4px;
}

/* ---------- 返回按鈕 ---------- */
.btn-back {
  background: rgba(255,255,255,0.25);
  border: 2px solid rgba(255,255,255,0.5);
  color: #fff;
  font-family: 'Nunito', 'Noto Sans TC', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-back:hover {
  background: rgba(255,255,255,0.4);
  transform: translateX(-2px);
}

.btn-back-small {
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.4);
  color: #fff;
  font-family: 'Nunito', 'Noto Sans TC', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.btn-back-small:hover {
  background: rgba(255,255,255,0.35);
}

/* =============================================
   Screen 3：遊戲畫面
   ============================================= */

/* 頂部工具列 */
.game-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px 8px;
  flex-wrap: nowrap;
  background: rgba(0,0,0,0.15);
  backdrop-filter: blur(4px);
}

.game-mode-name {
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  font-family: 'Noto Sans TC', sans-serif;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.game-progress {
  font-size: 1rem;
  font-weight: 800;
  color: rgba(255,255,255,0.9);
  white-space: nowrap;
}

.game-score {
  font-size: 1rem;
  font-weight: 800;
  color: var(--star-color);
  background: rgba(255,255,255,0.15);
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* 進度條 */
.progress-bar-wrap {
  width: 100%;
  height: 8px;
  background: rgba(255,255,255,0.2);
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #FFD93D, #FF9F43);
  border-radius: 0 4px 4px 0;
  transition: width 0.4s ease;
  width: 0%;
}

/* 遊戲主內容區 */
.game-content {
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  padding: 20px 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

/* ---------- Mode 1：聽音選字 ---------- */
.listen-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  animation: fadeIn 0.3s ease;
}

.listen-q-num {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}

.speaker-btn {
  background: var(--card-bg);
  border: none;
  border-radius: 50%;
  width: 120px;
  height: 120px;
  font-size: 3.5rem;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.speaker-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 12px 40px rgba(0,0,0,0.22);
}

.speaker-btn:active {
  transform: scale(0.95);
}

.speaker-btn.playing {
  animation: pulse 0.6s ease-in-out infinite alternate;
}

.word-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}

.word-option-btn {
  background: var(--card-bg);
  border: 3px solid transparent;
  border-radius: var(--radius-sm);
  padding: 20px 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--text);
  cursor: pointer;
  min-height: 80px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s, border-color 0.2s;
  letter-spacing: 1px;
}

.word-option-btn:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.03);
  box-shadow: var(--shadow);
  border-color: var(--primary);
}

.word-option-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.word-option-btn.correct {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success-light);
  animation: bounceIn 0.4s ease;
}

.word-option-btn.wrong {
  background: var(--error-soft);
  border-color: var(--error);
  color: var(--error-light);
  animation: shake 0.4s ease;
}

.word-option-btn:disabled {
  cursor: default;
}

/* 答對後顯示的注音區 */
.listen-answer-display {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px 32px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  animation: fadeIn 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.listen-zhuyin-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
}

.listen-answer-display .zh-sentence {
  font-size: 1rem;
  color: var(--text-light);
  font-family: 'Noto Sans TC', sans-serif;
  margin-top: 4px;
}

/* ---------- Mode 2：拼字挑戰 ---------- */
.spell-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  animation: fadeIn 0.3s ease;
}

.spell-zhuyin-display {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 20px 36px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  box-shadow: var(--shadow);
  min-width: 120px;
}

/* 語境提示（拼字挑戰：消歧義用） */
.spell-hint {
  background: rgba(255, 255, 255, 0.15);
  border: 2px dashed rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  padding: 8px 20px;
  color: #fff;
  font-size: 1.3rem;
  text-align: center;
  margin-top: 4px;
}

.spell-speaker-btn {
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  padding: 8px 20px;
  font-size: 1.5rem;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  transition: background 0.15s, transform 0.12s;
  display: flex;
  align-items: center;
  gap: 8px;
}

.spell-speaker-btn span {
  font-size: 0.95rem;
  font-family: 'Noto Sans TC', sans-serif;
}

.spell-speaker-btn:hover {
  background: rgba(255,255,255,0.35);
  transform: scale(1.04);
}

/* 字母格子列 */
.letter-slots-row {
  display: flex;
  flex-direction: row;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.letter-slot {
  width: 52px;
  height: 58px;
  border: 3px solid rgba(255,255,255,0.5);
  border-radius: 10px;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 900;
  font-family: 'Nunito', sans-serif;
  color: #fff;
  text-transform: uppercase;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.letter-slot.filled {
  background: rgba(255,255,255,0.9);
  border-color: var(--primary);
  color: var(--text-on-light);                  /* V4: 白底用深色文字 */
}

.letter-slot.correct {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success-light);
}

.letter-slot.wrong {
  background: var(--error-soft);
  border-color: var(--error);
  color: var(--error-light);
}

/* 鍵盤 */
.onscreen-keyboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  align-items: center;
}

.kb-row {
  display: flex;
  flex-direction: row;
  gap: 5px;
  flex-wrap: nowrap;
  justify-content: center;
  width: 100%;                                  /* V4-fix: 撐滿容器讓鍵盤自適應 */
}

/* V4-fix: 鍵盤改 flex 自適應，iPhone 標準寬度（375-430px）不再爆版
   原 width 改 max-width，10 鍵以 flex:1 均分可用寬度，桌面/平板上限不超過 max-width */
.kb-key {
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: 8px;
  flex: 1 1 0;
  min-width: 0;
  max-width: 44px;
  height: 48px;
  font-size: 1.1rem;
  font-weight: 800;
  font-family: 'Nunito', sans-serif;
  color: var(--text-on-light);                  /* V4: 鍵盤白底用深色文字 */
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,0.2);
  transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
}

.kb-key:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 5px 0 rgba(0,0,0,0.18);
}

.kb-key:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.18);
}

.kb-key:disabled {
  opacity: 0.4;
  cursor: default;
  transform: none;
}

.kb-key-util {
  width: 64px !important;
  max-width: 64px !important;                   /* V4-fix: 覆蓋 .kb-key 的 max-width 限制 */
  height: 52px !important;
  font-size: 1.8rem !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
}

.kb-key-backspace {
  background: rgba(231,76,60,0.85);
  color: #fff;
}

.kb-key-backspace:hover {
  background: rgba(231,76,60,1);
}

.kb-row-util {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  justify-content: center;
}

.kb-key-sound {
  background: rgba(74,144,217,0.85);
  color: #fff;
}

.kb-key-sound:hover {
  background: rgba(74,144,217,1);
}

.kb-key-sound:hover {
  background: rgba(74,144,217,1);
  transform: scale(1.04);
}

/* V4-fix(2026-05-10): 拼字模式隱藏 input — iPad Safari 必須有 input focused
   才會把外接鍵盤 keydown 路由到 document，否則桌機能用、iPad 外接鍵盤失效。
   不能用 display:none / visibility:hidden（focus 會失效），改用 left:-9999px 移出畫面。 */
#spell-keyboard-trap {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  border: 0;
  background: transparent;
  pointer-events: none;
}

/* 嘗試次數提示 */
.spell-attempts-label {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  font-weight: 600;
  font-family: 'Noto Sans TC', sans-serif;
  min-height: 1.2em;
}

/* 句子填空：發音按鈕列 */
.fill-speaker-row {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.fill-speaker-btn {
  background: rgba(255,255,255,0.9);
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-size: 1rem;
  font-weight: 700;
  font-family: 'Noto Sans TC', sans-serif;
  color: var(--primary-dark);                   /* V4: 白底用深藍 */
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s, box-shadow 0.12s;
}

.fill-speaker-btn .btn-icon {
  font-size: 1.4rem;
}

.fill-speaker-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.fill-speaker-btn:active {
  transform: scale(0.96);
}

.fill-speaker-sentence {
  color: var(--accent-dark);                    /* 白底按鈕文字保留深橘 */
}

/* V4 self-review fix：白/淺底按鈕內含中文注音時，注音強制深色（避免白底白字） */
.fill-speaker-btn .zy-char,
.fill-speaker-btn .zy-s,
.fill-speaker-btn .zy-tone,
.btn-secondary .zy-char,
.btn-secondary .zy-s,
.btn-secondary .zy-tone {
  color: var(--text-on-light);
}

/* ---------- Mode 3：句子填空 ---------- */
.fill-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  animation: fadeIn 0.3s ease;
}

.fill-sentence-card {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 28px 28px 20px;
  width: 100%;
  box-shadow: var(--shadow);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fill-sentence-en {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text);
  line-height: 1.5;
  word-break: break-word;
}

/* 填空的底線（V4: 深底用亮橘/亮綠） */
.fill-blank {
  display: inline-block;
  min-width: 80px;
  border-bottom: 4px solid var(--accent);
  color: var(--accent-light);
  font-weight: 900;
  vertical-align: bottom;
  padding: 0 6px;
  transition: color 0.3s, border-color 0.3s;
}

.fill-blank.correct-word {
  color: var(--success-light);
  border-color: var(--success);
}

.fill-sentence-zh {
  font-size: 1.05rem;
  color: var(--text-light);
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 500;
}

.fill-options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
}

.fill-option-btn {
  background: var(--card-bg);
  border: 3px solid transparent;
  border-radius: var(--radius-sm);
  padding: 18px 10px;
  font-family: 'Nunito', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  color: var(--text);
  cursor: pointer;
  min-height: 72px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.12s, box-shadow 0.12s, background 0.2s, border-color 0.2s;
  letter-spacing: 1px;
}

.fill-option-btn:hover:not(:disabled) {
  transform: translateY(-3px) scale(1.03);
  box-shadow: var(--shadow);
  border-color: var(--primary);
}

.fill-option-btn:active:not(:disabled) {
  transform: scale(0.96);
}

.fill-option-btn.correct {
  background: var(--success-soft);
  border-color: var(--success);
  color: var(--success-light);
  animation: bounceIn 0.4s ease;
}

.fill-option-btn.wrong {
  background: var(--error-soft);
  border-color: var(--error);
  color: var(--error-light);
  animation: shake 0.4s ease;
}

.fill-option-btn:disabled {
  cursor: default;
}

/* =============================================
   答錯回顧畫面
   ============================================= */
.review-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px 40px;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.review-title {
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: 4px;
  text-align: center;
}

.review-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 20px;
  text-align: center;
}

.review-words-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-bottom: 24px;
}

.review-word-card {
  background: var(--card-bg);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: var(--shadow-sm);
  border-left: 5px solid var(--error);
}

.review-word-en {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--error-light);                    /* V4: 深底用亮紅 */
  min-width: 90px;
  text-align: center;
}

.review-word-zy {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: flex-start;
}

.review-play-btn {
  background: none;
  border: 2px solid var(--primary);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  font-size: 1.3rem;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.review-play-btn:active {
  background: rgba(74, 144, 217, 0.15);
}

.review-continue-btn {
  font-size: 1.3rem;
  padding: 14px 40px;
}

/* =============================================
   Screen 4：結果畫面
   ============================================= */
.results-container {
  background: var(--card-bg);
  border-radius: var(--radius);
  padding: 48px 36px 40px;
  max-width: 480px;
  width: calc(100% - 32px);
  margin: auto;
  text-align: center;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  position: relative;
  z-index: 10;
  animation: bounceIn 0.5s ease;
}

#results-screen {
  justify-content: center;
  padding: 24px 16px;
}

.results-title {
  font-size: 2rem;
  font-weight: 900;
  color: var(--text);
  font-family: 'Noto Sans TC', sans-serif;
}

.results-score {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-light);                  /* V4: 深底用亮藍 */
  font-family: 'Noto Sans TC', sans-serif;
}

.results-stars {
  font-size: 2.8rem;
  animation: starPop 0.5s 0.3s both ease;
}

.results-message {
  font-size: 1.15rem;
  color: var(--text-light);
  font-family: 'Noto Sans TC', sans-serif;
  font-weight: 500;
}

.results-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), #6a5acd);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 16px 24px;
  font-family: 'Nunito', 'Noto Sans TC', sans-serif;
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow);
  filter: brightness(1.08);
}

.btn-primary:active {
  transform: scale(0.97);
}

.btn-secondary {
  background: rgba(255,159,67,0.15);
  color: var(--accent-dark);
  border: 2px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 14px 24px;
  font-family: 'Nunito', 'Noto Sans TC', sans-serif;
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}

.btn-secondary:hover {
  background: rgba(255,159,67,0.25);
  transform: scale(1.02);
}

/* =============================================
   注音顯示元件（台灣教科書標準）
   結構：.zy-group > .zy-char + .zy-anno > .zy-col > .zy-s + .zy-tone
   注音符號垂直排列在中文字右側，聲調在注音右側
   ============================================= */
.zy-group {
  display: inline-flex;
  align-items: center;
  margin: 0 2px;
}

.zy-char {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.2;
  font-family: 'Noto Sans TC', sans-serif;
  color: var(--text);
}

/* 注音 + 聲調容器（水平排列：注音直行 | 聲調） */
.zy-anno {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  margin-left: 2px;
  padding-top: 3px;
}

/* 注音符號直行排列 */
.zy-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 個別注音符號（V4: 改白色） */
.zy-s {
  font-size: 0.8rem;
  line-height: 1.2;
  font-family: 'Noto Sans TC', sans-serif;
  color: #FFFFFF;
  font-weight: 500;
}

/* 聲調標記：置於注音右側垂直置中（V4: 改白色） */
.zy-tone {
  display: flex;
  align-items: center;
  font-size: 0.7rem;
  color: #FFFFFF;
  margin-left: 1px;
  font-weight: 600;
  line-height: 1;
}

/* 輕聲（˙）：整個 anno 改為 column 排列，˙ 在注音正上方 */
.zy-anno-neutral {
  flex-direction: column;
  align-items: center;
}

.zy-tone-neutral {
  font-size: 0.6rem;
  line-height: 1;
  margin-bottom: 1px;
  margin-left: 0;
}

/* --- 尺寸變體：中型（首頁副標題） --- */
.zy-group.zy-md .zy-char {
  font-size: 1.6rem;
}
.zy-group.zy-md .zy-s {
  font-size: 0.55rem;
}
.zy-group.zy-md .zy-tone {
  font-size: 0.45rem;
}
.zy-group.zy-md .zy-tone-neutral {
  font-size: 0.4rem;
}
.zy-group.zy-md .zy-anno {
  padding-top: 2px;
}

/* --- 尺寸變體：小型（按鈕內文） --- */
.zy-group.zy-sm .zy-char {
  font-size: 1.1rem;
  font-weight: 600;
}
.zy-group.zy-sm .zy-s {
  font-size: 0.42rem;
  line-height: 1.1;
}
.zy-group.zy-sm .zy-tone {
  font-size: 0.35rem;
}
.zy-group.zy-sm .zy-tone-neutral {
  font-size: 0.3rem;
}
.zy-group.zy-sm .zy-anno {
  margin-left: 1px;
  padding-top: 1px;
}

/* =============================================
   彩紙慶祝效果（CSS only）
   ============================================= */
.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
}

.confetti-piece {
  position: absolute;
  top: -10px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
}

/* =============================================
   Mode 4：配對翻牌
   ============================================= */
.match-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px 32px;
  max-width: 600px;
  margin: 0 auto;
  width: 100%;
}

.match-info {
  display: flex;
  gap: 20px;
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.match-info strong {
  font-size: 1.3rem;
}

.match-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
  max-width: 420px;
}

.match-card {
  aspect-ratio: 3 / 4;
  perspective: 600px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.match-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.5s;
  transform-style: preserve-3d;
}

.match-card.flipped .match-card-inner {
  transform: rotateY(180deg);
}

.match-card-front,
.match-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 800;
  box-shadow: var(--shadow-sm);
}

.match-card-back {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  font-size: 2rem;
}

.match-card-front {
  background: var(--card-bg);
  color: var(--text);
  transform: rotateY(180deg);
}

.match-card-speaker {
  font-size: 2.2rem;
}

.match-card-word {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary-light);                  /* V4: 深底卡片用亮藍 */
}

.match-card-sound {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.match-card-zh {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}

.match-card.matched {
  pointer-events: none;
}

.match-card.matched .match-card-inner {
  transform: rotateY(180deg);
}

.match-card.matched .match-card-front {
  background: var(--success-soft);              /* V4: 深底版半透明綠 */
  border: 3px solid var(--success);
}

/* =============================================
   Mode 5：打地鼠
   ============================================= */
.whack-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 12px 32px;
  max-width: 500px;
  margin: 0 auto;
  width: 100%;
  transition: background 0.3s;
}

/* 倒數時間條 */
.whack-timer-bar-wrap {
  width: 100%;
  height: 14px;
  background: rgba(255,255,255,0.25);
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 4px;
}

.whack-timer-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--success), #2ecc71);
  border-radius: 7px;
  transition: width 0.1s linear;
}

/* 時間條變色：剩餘少時變紅 */
.whack-warning .whack-timer-bar {
  background: linear-gradient(90deg, var(--error), #ff6b6b);
}

.whack-timer-text {
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.whack-warning .whack-timer-text {
  color: #FFD93D;
  animation: whackBlink 0.5s infinite;
}

/* 播放按鈕 */
.whack-speaker-btn {
  background: rgba(255,255,255,0.2);
  border: 2px solid rgba(255,255,255,0.4);
  border-radius: 12px;
  padding: 8px 20px;
  font-size: 1.3rem;
  cursor: pointer;
  color: #fff;
  margin-bottom: 16px;
  transition: background 0.2s;
}

.whack-speaker-btn:active {
  background: rgba(255,255,255,0.35);
}

/* 地洞區 */
.whack-holes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  max-width: 380px;
}

.whack-hole {
  aspect-ratio: 1;
  background: radial-gradient(ellipse at center bottom, #5a3d1a 0%, #8B6914 40%, #6d4c1d 100%);
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 -6px 12px rgba(0,0,0,0.4);
}

.whack-mole {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #ffeaa7 0%, #fdcb6e 100%);
  border-radius: 50%;
  cursor: pointer;
  animation: molePopUp 0.35s ease-out forwards;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  border: 3px solid #e17055;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s, background 0.3s;
}

.whack-mole:active {
  transform: scale(0.9);
}

.whack-mole-word {
  font-size: 1.1rem;
  font-weight: 800;
  color: #2d3436;
  text-align: center;
  line-height: 1.2;
  padding: 4px;
}

/* 打中正確 */
.whack-mole.correct {
  background: linear-gradient(180deg, #a8e6a3, #27ae60) !important;
  border-color: #1e8449;
  animation: bounceIn 0.4s;
}

.whack-mole.correct .whack-mole-word {
  color: #fff;
}

/* 打中錯誤 */
.whack-mole.wrong {
  background: linear-gradient(180deg, #fab1a0, #e74c3c) !important;
  border-color: #c0392b;
  animation: shake 0.5s;
}

.whack-mole.wrong .whack-mole-word {
  color: #fff;
}

/* 超時提示正確答案 */
.whack-mole.timeout-correct {
  animation: whackBlink 0.4s 3;
  background: linear-gradient(180deg, #a8e6a3, #27ae60) !important;
  border-color: #1e8449;
}

.whack-mole.timeout-correct .whack-mole-word {
  color: #fff;
}

/* 閃爍警示背景 */
.whack-warning {
  animation: whackScreenFlash 0.6s infinite;
}

/* =============================================
   Keyframe 動畫
   ============================================= */

/* 畫面進場淡入 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 答對慶祝 bounce */
@keyframes bounceIn {
  0%   { transform: scale(0.85); opacity: 0.7; }
  60%  { transform: scale(1.08); opacity: 1; }
  80%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}

/* 答錯搖晃 */
@keyframes shake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-8px); }
  30%  { transform: translateX(8px); }
  45%  { transform: translateX(-6px); }
  60%  { transform: translateX(6px); }
  75%  { transform: translateX(-3px); }
  90%  { transform: translateX(3px); }
  100% { transform: translateX(0); }
}

/* 彩紙下落 */
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0; }
}

/* 吉祥物彈跳 */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* 星星彈出 */
@keyframes starPop {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  70%  { transform: scale(1.2) rotate(5deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* 地鼠冒出 */
@keyframes molePopUp {
  0%   { transform: translateY(100%); opacity: 0; }
  60%  { transform: translateY(-8%); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* 打地鼠閃爍警示 */
@keyframes whackBlink {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* 打地鼠螢幕閃爍（3 秒警告） */
@keyframes whackScreenFlash {
  0%, 100% { background: transparent; }
  50%      { background: rgba(231, 76, 60, 0.08); }
}

/* 播放中脈動 */
@keyframes pulse {
  from { transform: scale(1); box-shadow: var(--shadow); }
  to   { transform: scale(1.06); box-shadow: 0 0 0 12px rgba(74,144,217,0.2), var(--shadow); }
}

/* =============================================
   響應式設計（平板/桌機）
   ============================================= */
@media (min-width: 640px) {
  .main-title {
    font-size: 3.2rem;
  }

  .home-buttons {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .choose-label {
    flex-basis: 100%;
  }

  .btn-semester {
    flex: 1 1 calc(50% - 8px);
    min-width: 200px;
  }

  .word-options-grid {
    grid-template-columns: 1fr 1fr;
    max-width: 500px;
  }

  .fill-options-grid {
    grid-template-columns: 1fr 1fr;
    max-width: 500px;
  }

  .mode-cards {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .mode-card {
    flex: 1 1 calc(33% - 12px);
    min-width: 180px;
  }

  .kb-key {
    max-width: 48px;
    height: 52px;
  }

  .kb-key-util {
    width: 68px !important;
    max-width: 68px !important;                 /* V4-fix: 同上 */
    height: 54px !important;
  }

  .match-grid {
    gap: 14px;
    max-width: 480px;
  }

  .match-card-word {
    font-size: 1.6rem;
  }

  .whack-holes-grid {
    gap: 16px;
    max-width: 420px;
  }

  .whack-mole-word {
    font-size: 1.3rem;
  }
}

@media (min-width: 768px) {
  .letter-slot {
    width: 60px;
    height: 68px;
    font-size: 2rem;
  }

  .word-option-btn {
    font-size: 2rem;
    padding: 24px 10px;
  }

  .fill-option-btn {
    font-size: 1.7rem;
    padding: 22px 10px;
  }
}

/* =============================================
   V4 RWD 強化：iPad / 桌面字體放大
   起因：6 歲使用者反饋手機 OK 但 iPad / 網頁文字偏小
   策略：1024px+ 各文字 +25%；1280px+ 再 +10%；padding 同步加大
   ============================================= */

/* iPad 橫向模式（>= 1024px）：主要文字放大一級 */
@media (min-width: 1024px) {
  .game-content {
    padding: 32px 40px 48px;
    max-width: 720px;
  }

  /* 首頁標題群 */
  .main-title { font-size: 4.4rem; }
  .main-subtitle { font-size: 2rem; }
  .mascot { font-size: 6rem; }
  .choose-label { font-size: 1.4rem; }

  /* 學期按鈕 */
  .btn-semester {
    font-size: 1.6rem;
    padding: 22px 32px;
  }
  .sem-num { font-size: 2.4rem; }
  .sem-text small { font-size: 1.05rem; }

  /* 模式選擇 */
  .mode-container { max-width: 880px; }
  .mode-title { font-size: 1.8rem; }
  .mode-subtitle { font-size: 1.4rem; }
  .mode-card {
    min-width: 220px;
    padding: 28px 32px;
  }
  .mode-icon { font-size: 3rem; }
  .mode-name { font-size: 1.9rem; }
  .mode-name-en { font-size: 1.25rem; }
  .mode-desc { font-size: 1.15rem; }

  /* 遊戲畫面頂部 */
  .game-mode-name { font-size: 1.3rem; }
  .game-progress { font-size: 1.25rem; }
  .game-score { font-size: 1.25rem; }

  /* 聽音選字 */
  .speaker-btn {
    width: 150px;
    height: 150px;
    font-size: 4.4rem;
  }
  .word-option-btn {
    font-size: 2.4rem;
    padding: 30px 14px;
    min-height: 100px;
  }
  .listen-q-num { font-size: 1.15rem; }
  .listen-answer-display .zh-sentence { font-size: 1.25rem; }

  /* 拼字挑戰 */
  .spell-zhuyin-display { padding: 28px 44px; }
  .spell-hint { font-size: 1.6rem; padding: 12px 28px; }
  .spell-speaker-btn { font-size: 1.8rem; padding: 12px 28px; }
  .spell-speaker-btn span { font-size: 1.2rem; }
  .letter-slot {
    width: 72px;
    height: 80px;
    font-size: 2.4rem;
  }
  .kb-key {
    max-width: 56px;
    height: 60px;
    font-size: 1.4rem;
  }
  .kb-key-util {
    width: 80px !important;
    max-width: 80px !important;                 /* V4-fix: 同上 */
    height: 64px !important;
    font-size: 2.1rem !important;
  }
  .spell-attempts-label { font-size: 1.15rem; }

  /* 句子填空 */
  .fill-sentence-card { padding: 36px 36px 28px; }
  .fill-sentence-en { font-size: 1.85rem; }
  .fill-sentence-zh { font-size: 1.3rem; }
  .fill-blank { min-width: 100px; }
  .fill-option-btn {
    font-size: 2rem;
    padding: 26px 14px;
    min-height: 90px;
  }
  .fill-speaker-btn { font-size: 1.2rem; padding: 12px 26px; }
  .fill-speaker-btn .btn-icon { font-size: 1.7rem; }

  /* 配對翻牌 */
  .match-grid {
    max-width: 600px;
    gap: 18px;
  }
  .match-card-word { font-size: 1.9rem; }
  .match-card-speaker { font-size: 2.6rem; }
  .match-info { font-size: 1.35rem; }
  .match-info strong { font-size: 1.6rem; }

  /* 打地鼠 */
  .whack-container { max-width: 620px; }
  .whack-holes-grid {
    max-width: 540px;
    gap: 20px;
  }
  .whack-mole-word { font-size: 1.55rem; }
  .whack-timer-text { font-size: 1.6rem; }
  .whack-timer-bar-wrap { height: 18px; }
  .whack-speaker-btn { font-size: 1.55rem; padding: 12px 26px; }

  /* 答錯回顧 */
  .review-container { max-width: 760px; }
  .review-title { font-size: 2.4rem; }
  .review-subtitle { font-size: 1.45rem; }
  .review-word-card { padding: 20px 26px; }
  .review-word-en { font-size: 2.2rem; min-width: 110px; }
  .review-play-btn { width: 56px; height: 56px; font-size: 1.6rem; }

  /* 結果頁 */
  .results-container {
    max-width: 580px;
    padding: 56px 44px 48px;
  }
  .results-title { font-size: 2.5rem; }
  .results-score { font-size: 1.7rem; }
  .results-stars { font-size: 3.6rem; }
  .results-message { font-size: 1.4rem; }
  .btn-primary { font-size: 1.4rem; padding: 18px 28px; }
  .btn-secondary { font-size: 1.3rem; padding: 16px 28px; }

  /* 注音元件全面放大 */
  .zy-char { font-size: 3rem; }
  .zy-s { font-size: 0.95rem; }
  .zy-tone { font-size: 0.82rem; }
  .zy-group.zy-md .zy-char { font-size: 1.95rem; }
  .zy-group.zy-md .zy-s { font-size: 0.65rem; }
  .zy-group.zy-md .zy-tone { font-size: 0.55rem; }
  .zy-group.zy-sm .zy-char { font-size: 1.35rem; }
  .zy-group.zy-sm .zy-s { font-size: 0.5rem; }
  .zy-group.zy-sm .zy-tone { font-size: 0.42rem; }

  /* 返回按鈕 */
  .btn-back { font-size: 1.2rem; padding: 10px 20px; }
}

/* 桌面寬螢幕（>= 1280px）：再放大一級 +10% */
@media (min-width: 1280px) {
  .game-content {
    padding: 36px 56px 56px;
    max-width: 820px;
  }

  .main-title { font-size: 5rem; }
  .main-subtitle { font-size: 2.3rem; }
  .mascot { font-size: 6.6rem; }
  .choose-label { font-size: 1.55rem; }

  .mode-container { max-width: 1000px; }
  .mode-name { font-size: 2.1rem; }
  .mode-name-en { font-size: 1.4rem; }
  .mode-desc { font-size: 1.3rem; }

  .word-option-btn {
    font-size: 2.7rem;
    padding: 34px 16px;
    min-height: 110px;
  }
  .fill-option-btn {
    font-size: 2.3rem;
    padding: 30px 16px;
    min-height: 100px;
  }
  .fill-sentence-en { font-size: 2.1rem; }
  .fill-sentence-zh { font-size: 1.45rem; }

  .letter-slot {
    width: 80px;
    height: 88px;
    font-size: 2.7rem;
  }
  .kb-key {
    max-width: 62px;
    height: 66px;
    font-size: 1.55rem;
  }

  .speaker-btn {
    width: 168px;
    height: 168px;
    font-size: 5rem;
  }

  .whack-mole-word { font-size: 1.75rem; }
  .whack-holes-grid { max-width: 600px; }

  .match-grid { max-width: 680px; }
  .match-card-word { font-size: 2.1rem; }

  .results-title { font-size: 2.8rem; }
  .results-message { font-size: 1.55rem; }

  /* 注音再放大 */
  .zy-char { font-size: 3.4rem; }
  .zy-s { font-size: 1.05rem; }
  .zy-tone { font-size: 0.92rem; }
  .zy-group.zy-md .zy-char { font-size: 2.2rem; }
  .zy-group.zy-sm .zy-char { font-size: 1.55rem; }
}

/* 確保小螢幕（iPhone SE 320 / iPhone 13 mini 375）鍵盤不爆版 */
@media (max-width: 380px) {
  .kb-key {
    max-width: 36px;
    height: 42px;
    font-size: 0.95rem;
  }

  .letter-slot {
    width: 44px;
    height: 50px;
    font-size: 1.5rem;
  }
}