/* =========================================================
   極簡白底黑字風格 - 6歲幼兒專用學習遊戲樣式表 (2.3 手機平行排版與行動收音優化)
   ========================================================= */

:root {
  --bg-color: #ffffff;
  --text-main: #18181b;     /* 黑軍 / 深灰黑 */
  --text-muted: #52525b;    /* 次要文字 */
  --card-bg: #fafafa;       /* 極淺灰卡片底色 */
  --card-border: #e4e4e7;   /* 細緻邊框 */
  --accent-blue: #2563eb;   /* 語音 / 互動主要提示藍 */
  --accent-green: #16a34a;  /* 答對成功綠 */
  --accent-candy: #ec4899;  /* 糖果甜美粉紅 */
  --accent-red-tone: #dc2626; /* 醒目紅色注音聲符 */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation; /* 消除手機端 300ms 點擊延遲 */
}

body {
  background-color: var(--bg-color);
  color: var(--text-main);
  font-family: var(--font-family);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 14px 12px;
  overflow-x: hidden;
}

/* 主容器 */
.game-container {
  width: 100%;
  max-width: 660px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* 頂部瀏覽器與麥克風提示橫幅 */
.browser-tip-banner {
  background: #f8fafc;
  border: 1.5px solid #94a3b8;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: #000000; /* 依要求使用純黑字體 */
  line-height: 1.45;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  animation: bannerFadeIn 0.3s ease;
}

.browser-tip-banner.in-app-warning {
  background: #fffbeb;
  border-color: #f59e0b;
  color: #000000;
}

.tip-content {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.tip-text {
  color: #000000 !important; /* 純黑字 */
  font-weight: 700;
}

.tip-text strong {
  color: #000000 !important;
  font-weight: 900;
}

.tip-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* 動態難度徽章樣式 */
.difficulty-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 16px;
  background: #f4f4f5;
  color: #18181b;
  border: 1px solid #d4d4d8;
}

.difficulty-badge.advanced {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #f87171;
}

.tip-close-btn {
  background: none;
  border: none;
  font-size: 16px;
  color: #94a3b8;
  cursor: pointer;
  padding: 4px 8px;
  line-height: 1;
  border-radius: 6px;
  transition: all 0.15s;
}

.tip-close-btn:hover {
  background: #e2e8f0;
  color: #0f172a;
}

@keyframes bannerFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 頂部標題與狀態列 */
.header {
  text-align: center;
  padding: 4px 0;
}

.title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--text-main);
  margin-bottom: 6px;
}

.stats-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 8px 16px;
  background-color: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
}

.score-badge {
  color: #0284c7;
  font-size: 20px;
}

/* 20 顆糖果收集列 */
.candy-tracker {
  background: #fff;
  border: 2px dashed #cbd5e1;
  border-radius: 16px;
  padding: 10px 12px;
  text-align: center;
}

.candy-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.candy-slots {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  justify-items: center;
}

.candy-slot {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: grayscale(100%);
  opacity: 0.3;
}

.candy-slot.unlocked {
  filter: grayscale(0%);
  opacity: 1;
  background: #fdf2f8;
  border-color: var(--accent-candy);
  animation: candyPop 0.5s ease;
  transform: scale(1.08);
}

@keyframes candyPop {
  0% { transform: scale(0.5); }
  60% { transform: scale(1.3); }
  100% { transform: scale(1.08); }
}

/* 題目主卡片 */
.question-card {
  background: #ffffff;
  border: 2px solid var(--card-border);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  border-radius: 20px;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  min-height: 360px;
}

.question-type-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  background: #f4f4f5;
  color: var(--text-main);
  padding: 5px 14px;
  border-radius: 20px;
  margin-bottom: 12px;
}

/* 圖示展示 */
.illustration-box {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 10px;
  user-select: none;
}

/* 題目文字呈現區域 */
.target-display-area {
  display: flex;
  flex-direction: column; /* 確保 KK 音標 100% 垂直置於單字正下方，絕不跑至右邊 */
  align-items: center;
  justify-content: center;
  min-height: 100px;
  margin-bottom: 12px;
  width: 100%;
}

.english-word-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* 英文大字體 */
.english-word {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--text-main);
  text-transform: lowercase;
  text-align: center;
  word-break: break-word;
}

/* 英文單字拼音 (KK音標格式 [拼音]) */
.english-phonics {
  font-size: 26px;
  font-weight: 600;
  color: #4b5563;
  margin-top: 6px;
  letter-spacing: 1.5px;
  font-family: "Lucida Sans Unicode", "Arial Unicode MS", "Segoe UI", sans-serif;
  text-align: center;
  user-select: none;
}

/* 英文填空槽位 */
.blank-slot {
  display: inline-block;
  min-width: 40px;
  border-bottom: 4px solid var(--text-main);
  text-align: center;
  color: var(--accent-blue);
  font-size: 48px;
  font-weight: 800;
  margin: 0 4px;
}

/* 數學算式大字體 */
.math-expression {
  font-size: 52px;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--text-main);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.math-blank {
  display: inline-block;
  min-width: 54px;
  border-bottom: 4px solid var(--text-main);
  text-align: center;
  color: var(--accent-blue);
  font-size: 52px;
  font-weight: 800;
}

/* =========================================================
   注音與聲調排版 (粗體大字 + 紅色聲調)
   ========================================================= */
.zhuyin-word-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

.zhuyin-char-unit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.zhuyin-main-char {
  font-size: 76px;
  font-weight: 900;
  line-height: 1;
  color: #09090b;
  user-select: none;
}

.zhuyin-bpmf-container {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  user-select: none;
}

.bpmf-tone-light {
  font-size: 24px;
  font-weight: 900;
  color: var(--accent-red-tone);
  line-height: 1;
  margin-bottom: -2px;
  -webkit-text-stroke: 0.8px var(--accent-red-tone);
}

.zhuyin-bpmf-body {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
}

.zhuyin-symbols-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.bpmf-sym {
  font-size: 28px;
  font-weight: 900;
  line-height: 1.15;
  color: #09090b;
  display: block;
  text-align: center;
  -webkit-text-stroke: 0.6px #09090b;
}

.zhuyin-tone-col {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 14px;
  margin-left: 3px;
}

.bpmf-tone {
  font-size: 26px;
  font-weight: 900;
  color: var(--accent-red-tone);
  line-height: 1;
  -webkit-text-stroke: 0.8px var(--accent-red-tone);
}

/* =========================================================
   中文句子注音排版 (字體自適應縮小 + 支援標點符號與自動折行)
   ========================================================= */
.zhuyin-sentence-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 14px;
  max-width: 98%;
  margin: 0 auto;
  padding: 4px 0;
}

.zhuyin-sentence-char-unit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.zhuyin-sentence-main-char {
  font-size: 42px; /* 相比單字的 76px，句子自動縮小至 42px */
  font-weight: 900;
  line-height: 1;
  color: #09090b;
  user-select: none;
}

.zhuyin-sentence-punctuation {
  font-size: 38px;
  font-weight: 800;
  color: #52525b;
  display: inline-flex;
  align-items: center;
  padding: 0 2px;
  line-height: 1;
  user-select: none;
}

.zhuyin-sentence-container .bpmf-sym {
  font-size: 16px; /* 句子注音符號相應調降至 16px */
  -webkit-text-stroke: 0.4px #09090b;
}

.zhuyin-sentence-container .bpmf-tone {
  font-size: 14px;
  -webkit-text-stroke: 0.5px var(--accent-red-tone);
}

.zhuyin-sentence-container .bpmf-tone-light {
  font-size: 14px;
}

/* =========================================================
   英文句子排版 (依要求完全不列 KK 音標，字級自適應縮小)
   ========================================================= */
.english-sentence-text {
  font-size: 34px; /* 相比單字的 48px，句子適時縮小至 34px */
  font-weight: 800;
  color: var(--text-main);
  text-align: center;
  line-height: 1.35;
  letter-spacing: 0.5px;
  max-width: 96%;
  word-wrap: break-word;
  padding: 6px 12px;
  user-select: none;
}

/* =========================================================
   平行排列控制列 (解決手機垂直重疊問題)
   ========================================================= */
.voice-controls-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
  margin: 8px 0;
}

/* 聽示範發音按鈕 (膠囊按鈕，與麥克風水平並排) */
.listen-hint-btn {
  background: #ffffff;
  border: 2px solid #d4d4d8;
  color: var(--text-main);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 30px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.listen-hint-btn:hover {
  background: #f4f4f5;
  border-color: var(--text-main);
}

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

/* 麥克風錄音按鈕 (大圓形按鈕，與聽發音水平並排) */
.mic-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--text-main);
  color: #ffffff;
  border: none;
  font-size: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  flex-shrink: 0;
}

.mic-btn:hover {
  transform: scale(1.06);
}

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

.mic-btn.recording {
  background: #dc2626;
  animation: pulseRecording 1.4s infinite;
}

@keyframes pulseRecording {
  0% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
  70% { box-shadow: 0 0 0 20px rgba(220, 38, 38, 0); }
  100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}

.mic-prompt-text {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-main);
  margin-top: 4px;
  text-align: center;
}

/* 聽辨狀態反饋 */
.speech-feedback-box {
  min-height: 28px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  padding: 0 10px;
}

/* 字母 / 數字選項卡 */
.letter-options {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10px 0;
}

.letter-btn {
  min-width: 64px;
  height: 64px;
  padding: 0 14px;
  font-size: 28px;
  font-weight: 800;
  border: 2px solid var(--text-main);
  background: #ffffff;
  color: var(--text-main);
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 0 var(--text-main);
  transition: all 0.15s ease;
}

.letter-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--text-main);
  background: #f8fafc;
}

.letter-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--text-main);
}

.letter-btn.number-btn {
  min-width: 78px;
  font-size: 30px;
}

/* 幾何邏輯題選項與主畫布樣式 */
.logic-puzzle-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
}

.logic-puzzle-svg {
  width: 170px;
  height: 170px;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.07));
}

.logic-prompt-text {
  font-size: 16px;
  font-weight: 800;
  color: #3f3f46;
}

.letter-btn.logic-shape-btn {
  width: 74px;
  height: 74px;
  min-width: 74px;
  padding: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.logic-option-svg {
  width: 48px;
  height: 48px;
}

/* 顏色認知題樣式 */
.color-question-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
}

.color-item-sphere {
  width: 110px;
  height: 110px;
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16), inset -8px -8px 16px rgba(0, 0, 0, 0.25), inset 8px 8px 16px rgba(255, 255, 255, 0.6);
  animation: sphereFloat 2.2s infinite ease-in-out;
}

@keyframes sphereFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.color-prompt-text {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-main);
}

.letter-btn.color-option-btn {
  min-width: 110px;
  height: 52px;
  font-size: 18px;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
}

.color-option-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}

/* 狀態訊息提示 */
.status-banner {
  margin-top: 14px;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 800;
  text-align: center;
  display: none;
}

.status-banner.success {
  display: block;
  background: #dcfce7;
  color: var(--accent-green);
  animation: bannerPop 0.3s ease;
}

.status-banner.retry {
  display: block;
  background: #fef3c7;
  color: #b45309;
}

.status-banner.failure {
  display: block;
  background: #fee2e2;
  color: #b91c1c;
  animation: bannerPop 0.3s ease;
}

@keyframes bannerPop {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* 底部輔助按鈕 */
.footer-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px;
  gap: 12px;
}

/* 暫時隱藏家長小幫手按鈕 (保留功能邏輯) */
#parent-skip-btn {
  display: none !important;
}

.parent-helper-btn {
  background: none;
  border: none;
  color: #a1a1aa;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px 2px;
}

.parent-helper-btn:hover {
  color: var(--text-main);
}

/* Buy Me a Coffee 贊助按鈕樣式 */
.coffee-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 4px 0 16px 0;
}

.coffee-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: #FFDD00;
  color: #000000;
  font-size: 14px;
  font-weight: 800;
  padding: 9px 20px;
  border-radius: 24px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
  border: 2px solid #18181b;
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.coffee-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
  background-color: #facc15;
}

.coffee-icon {
  font-size: 18px;
}

.modal-coffee-container {
  margin-top: 16px;
}

.coffee-link-subtle {
  color: #71717a;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  transition: color 0.2s;
}

.coffee-link-subtle:hover {
  color: #18181b;
}

/* 破關慶祝彈窗 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
  backdrop-filter: blur(4px);
}

.modal-overlay.active {
  display: flex;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.reward-card {
  background: #ffffff;
  border-radius: 24px;
  max-width: 620px;
  width: 100%;
  padding: 24px 20px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  position: relative;
  max-height: 92vh;
  overflow-y: auto;
}

.evaluation-title {
  font-size: 26px;
  font-weight: 800;
  color: #e11d48;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.evaluation-score-line {
  font-size: 19px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 14px;
}

.reward-image-wrapper {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  margin-bottom: 16px;
  border: 3px solid #f43f5e;
}

.reward-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.reward-badge-text {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 16px;
}

.restart-btn {
  background: var(--text-main);
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  padding: 13px 32px;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  transition: all 0.2s;
}

.restart-btn:hover {
  transform: scale(1.04);
  background: #27272a;
}

#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1001;
}

/* 手機響應式微調 (寬度小於 480px) */
@media (max-width: 480px) {
  body { padding: 10px 8px; }
  .game-container { gap: 12px; }
  .title { font-size: 20px; }
  .stats-bar { font-size: 13px; padding: 6px 10px; gap: 6px; }
  .difficulty-badge { font-size: 11px; padding: 2px 7px; }
  .score-badge { font-size: 14px; font-weight: 800; }
  .question-card { padding: 18px 12px; min-height: 330px; }
  .english-word, .blank-slot, .math-expression, .math-blank { font-size: 38px; }
  .english-phonics { font-size: 20px; margin-top: 4px; }
  .zhuyin-main-char { font-size: 60px; }
  .bpmf-sym { font-size: 22px; }
  .bpmf-tone { font-size: 20px; }
  .candy-slot { width: 29px; height: 29px; font-size: 15px; }
  .letter-btn { min-width: 52px; height: 52px; font-size: 24px; padding: 0 6px; }
  .evaluation-title { font-size: 20px; }

  /* 手機平行按鈕尺寸微調 */
  .voice-controls-row { gap: 14px; margin: 6px 0; }
  .listen-hint-btn { font-size: 14px; padding: 10px 16px; }
  .mic-btn { width: 68px; height: 68px; font-size: 30px; }

  /* 邏輯題與顏色題手機適配 */
  .logic-puzzle-svg { width: 135px; height: 135px; }
  .letter-btn.logic-shape-btn { width: 62px; height: 62px; min-width: 62px; padding: 4px; }
  .logic-option-svg { width: 38px; height: 38px; }
  .color-item-sphere { width: 88px; height: 88px; }
  .letter-btn.color-option-btn { min-width: 88px; height: 46px; font-size: 15px; padding: 0 10px; }
  .color-option-dot { width: 18px; height: 18px; }

  /* 中英文句子手機適配 */
  .zhuyin-sentence-container { gap: 8px 10px; }
  .zhuyin-sentence-main-char { font-size: 30px; }
  .zhuyin-sentence-punctuation { font-size: 26px; }
  .zhuyin-sentence-container .bpmf-sym { font-size: 12px; }
  .zhuyin-sentence-container .bpmf-tone { font-size: 11px; }
  .zhuyin-sentence-container .bpmf-tone-light { font-size: 11px; }
  .english-sentence-text { font-size: 24px; line-height: 1.3; }
}