/* ── 設計代幣（docs/word-puzzle-ui-screens.md §7）─────────────────────────
   視覺定案只改這一區；元件樣式不動。分成三組：色票、depth、字型。
   色票沿用「暖紙＋森林墨綠＋琥珀」的識別，但把預設的扁平米白做深、
   給它層次與觸感（§7 只是草案值，定案時只改這組變數即可）。 */
:root {
  /* 色票：深青墨字磚 + 暖珊瑚強調，鋪在中性暖紙上。
     刻意放掉通用的「綠+金」預設，改一組有主張、切合「墨水/字典」主題的雙色。*/
  --bg: #f4efe8; /* 中性暖紙底（較不偏黃）*/
  --bg-tint: #efe8dd; /* 背景漸層的另一端（微暈染，非扁平單色）*/
  --surface: #fffdf9; /* 卡片／轉盤底（暖白，非純白）*/
  --surface-hi: #ffffff; /* 立體件的高光面（emboss 頂端）*/
  --grid-empty: #ddd6ca; /* 未填格（凹槽）*/
  --grid-filled: #0f6d6e; /* 已填格底：深青墨。filled 與 revealed 同色（§10）；白字 6.1:1 AA */
  --grid-filled-hi: #148486; /* 已填格頂端高光（僅漸層用，仍屬同一狀態）*/
  --letter-on-fill: #ffffff;
  --text: #23282a;
  --text-soft: #6a6f6e; /* 次要文字（釋義、授權）*/
  --line: #e7ded0; /* 立體件的細邊框，取代硬陰影邊緣 */
  --accent: #e5613e; /* 暖珊瑚：選中字母底／手勢連線／強調光暈（填色與發光用）*/
  --accent-rgb: 229 97 62; /* 同色的 RGB 分量，供半透明光暈 rgb(var(--accent-rgb)/α) */
  --accent-ink: #a63417; /* 珊瑚墨色（文字用）：16px 粗體在珊瑚淡底/暖白上皆 ≥4.5:1（AA）*/
  --accent-soft: #fbe0d3; /* 珊瑚淡底（金幣膠囊、目前關）*/
  --on-accent: #3a1608; /* 珊瑚底上的字（選中字母）：深色比白字清楚，兩套主題皆 ≥4.5:1 */

  /* depth：一組分層陰影，色調改中性冷灰以配青／珊瑚（取代扁平 0 1px 3px）*/
  --shadow-sm: 0 1px 2px rgb(28 40 40 / 0.16);
  --shadow-md: 0 1px 2px rgb(28 40 40 / 0.12), 0 4px 12px rgb(28 40 40 / 0.14);
  --shadow-lg: 0 4px 10px rgb(28 40 40 / 0.16), 0 16px 40px rgb(28 40 40 / 0.22);
  --emboss: inset 0 1px 0 rgb(255 255 255 / 0.65); /* 立體件頂端內高光 */
  --deboss: inset 0 2px 4px rgb(28 40 40 / 0.18); /* 凹槽（未填格）*/

  /* 字型：圓體 display 給遊戲件（字磚、轉盤字、標題）＝親切、玩具感；
     內文用乾淨系統字。全離線，不引入 CDN 字檔（主文件約束）。 */
  --font-display: ui-rounded, "SF Pro Rounded", "Segoe UI Rounded", system-ui, sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10201f; /* 深青墨黑底 */
    --bg-tint: #16302c;
    --surface: #1b2c2b;
    --surface-hi: #223634; /* 深色靠亮面差＋細邊做層次，不靠黑陰影 */
    --grid-empty: #2a3b39;
    --grid-filled: #1c8f88; /* 已填格：亮青墨；白字（大字粗體）達 AA-large */
    --grid-filled-hi: #29a69d;
    --letter-on-fill: #ffffff;
    --text: #e6ede9;
    --text-soft: #9aa5a1;
    --line: rgb(255 255 255 / 0.09);
    --accent: #ff7a52; /* 亮珊瑚 */
    --accent-rgb: 255 122 82;
    --accent-ink: #ff8f63; /* 深底上亮珊瑚本身即達 AA */
    --accent-soft: rgb(255 122 82 / 0.16); /* 半透明珊瑚，疊在深 surface 上 */
    --on-accent: #3a1608; /* 珊瑚底上仍用深字，與淺色主題一致 */

    /* 深色 depth：黑陰影在深底幾乎看不見 → 加深陰影＋用細亮邊當接觸線 */
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 2px 6px rgb(0 0 0 / 0.44), 0 1px 0 rgb(255 255 255 / 0.04) inset;
    --shadow-lg: 0 8px 20px rgb(0 0 0 / 0.55), 0 1px 0 rgb(255 255 255 / 0.05) inset;
    --emboss: inset 0 1px 0 rgb(255 255 255 / 0.06);
    --deboss: inset 0 2px 5px rgb(0 0 0 / 0.45);
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  overflow: hidden;
  color: var(--text);
  font-family: var(--font-body);
  /* 暖紙不是扁平單色：極淡的暖暈染做出深度，仍在同一識別內 */
  background: radial-gradient(120% 90% at 50% -10%, var(--bg-tint), transparent 60%), var(--bg);
  /* 避免長按選字、iOS 放大鏡（設計文件 §4）*/
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

/* ---- 圖示：內嵌線性 SVG，用 mask 上色 → 吃 currentColor、自動跟主題變色，
   取代原本各平台長相不一的 emoji。全離線、無外部字檔/CDN（主文件約束）。
   -webkit-mask 是給 Phase 2 的 WKWebView。 */
:root {
  --i-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
  --i-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.4.9 1 1 1.6l.1.5h4.8l.1-.5c.1-.6.4-1.2 1-1.6A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
  --i-shuffle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 3 21 3 21 8'/%3E%3Cline x1='4' y1='20' x2='21' y2='3'/%3E%3Cpolyline points='21 16 21 21 16 21'/%3E%3Cline x1='15' y1='15' x2='21' y2='21'/%3E%3Cline x1='4' y1='4' x2='9' y2='9'/%3E%3C/svg%3E");
  --i-speaker: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E");
  --i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='19' y1='12' x2='5' y2='12'/%3E%3Cpolyline points='12 19 5 12 12 5'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  --i-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
  --i-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M7 4v16l13-8z'/%3E%3C/svg%3E");
  --i-coin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3C/svg%3E");
}
.icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex: none;
  vertical-align: middle;
  background-color: currentColor;
  -webkit-mask: var(--i) center / contain no-repeat;
  mask: var(--i) center / contain no-repeat;
}
.icon-gear {
  --i: var(--i-gear);
}
.icon-bulb {
  --i: var(--i-bulb);
  width: 26px;
  height: 26px;
}
.icon-shuffle {
  --i: var(--i-shuffle);
  width: 22px;
  height: 22px;
}
.icon-speaker {
  --i: var(--i-speaker);
  width: 18px;
  height: 18px;
}
.icon-back {
  --i: var(--i-back);
}
.icon-check {
  --i: var(--i-check);
}
.icon-lock {
  --i: var(--i-lock);
}
.icon-play {
  --i: var(--i-play);
}
.icon-coin {
  --i: var(--i-coin);
}

/* ---- 畫面骨架 ---- */
.screen {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom)
    env(safe-area-inset-left);
}
.screen[hidden] {
  display: none;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
}
.chip {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums; /* 金幣／關卡數字不跳寬 */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 15px;
  font-weight: 700;
  box-shadow: var(--shadow-sm), var(--emboss);
  transition: transform 0.12s ease;
}
.chip:active {
  transform: scale(0.94);
}
.chip.coin {
  color: var(--accent-ink); /* 琥珀墨色在淡底上達 AA（4.67:1）*/
  background: var(--accent-soft);
  border-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chip.coin::before {
  /* 金幣圖示，跟著文字上琥珀色 */
  content: "";
  width: 1.05em;
  height: 1.05em;
  background-color: currentColor;
  -webkit-mask: var(--i-coin) center / contain no-repeat;
  mask: var(--i-coin) center / contain no-repeat;
}

/* ---- 填字格：置中，佔上方剩餘空間 ---- */
.grid-area {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: 8px;
}
.grid {
  display: grid;
  grid-template-rows: repeat(var(--rows), 1fr);
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 6px;
  /* 格子尺寸 = 可用寬高取小除以行列數（設計文件 §7）*/
  --cell: min(88vw / var(--cols), 46vh / var(--rows), 56px);
  width: calc(var(--cell) * var(--cols));
  height: calc(var(--cell) * var(--rows));
}
.cell {
  font-family: var(--font-display);
  background: var(--grid-empty);
  border-radius: 8px;
  box-shadow: var(--deboss); /* 未填 = 凹槽 */
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: calc(var(--cell) * 0.55);
}
.cell.on {
  /* 已填 = 浮起的字磚 */
  background: linear-gradient(var(--grid-filled-hi), var(--grid-filled));
  color: var(--letter-on-fill);
  box-shadow: var(--shadow-md), var(--emboss);
  text-shadow: 0 1px 1px rgb(0 0 0 / 0.18);
}
.cell.pop {
  animation: pop 0.3s ease-out;
}
@keyframes pop {
  0% {
    transform: scale(0.3);
  }
  70% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}

/* ---- 拼字串顯示區：高度固定預留，不跳動 ---- */
.preview {
  font-family: var(--font-display);
  height: 3.3rem; /* 固定用 rem，不用 em——避免 .dup 縮小字體時連帶縮高度造成版面跳動 */
  text-align: center;
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  color: var(--accent-ink);
  text-shadow: 0 1px 0 var(--surface-hi);
}
.preview.dup {
  color: var(--text-soft);
  opacity: 0.85;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
}
.preview.good {
  color: var(--accent-ink);
}
.preview.shake {
  animation: shake 0.35s;
  opacity: 0.7;
}
.shake {
  animation: shake 0.35s;
}
@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}

/* ---- 字母轉盤：下 1/3 拇指區。整頁的招牌件（signature）---- */
.wheel-row {
  --wheel-d: min(70vw, 38vh, 330px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0 24px;
}
.hint-btn {
  /* 用 right（而非 left）定位，讓按鈕左緣交給內容自然撐開——不必猜按鈕寬度，
     轉盤變大/變小時兩者永遠不會疊到；second min() 分支保底螢幕邊界最少 4px
     （52px 是目前按鈕實際寬度，本專案無 i18n，內容固定不會變寬，設計文件 §4）*/
  position: absolute;
  right: min(calc(50% + var(--wheel-d) / 2 + 8px), calc(100% - 56px));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 1.5rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px 12px;
  box-shadow: var(--shadow-sm), var(--emboss);
  transition: transform 0.12s ease;
}
.hint-btn:active {
  transform: translateY(-50%) scale(0.94);
}
.hint-btn.shake {
  /* .hint-btn 靠 translateY(-50%) 垂直置中，共用的 .shake 只設 translateX 會蓋掉它，
     導致抖動時整顆按鈕往下掉半個身位，所以這裡疊加專屬 keyframes 保留置中位移 */
  animation: hint-shake 0.35s;
}
@keyframes hint-shake {
  0%,
  100% {
    transform: translateY(-50%) translateX(0);
  }
  25% {
    transform: translateY(-50%) translateX(-6px);
  }
  75% {
    transform: translateY(-50%) translateX(6px);
  }
}
.hint-btn small {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-size: 0.72rem;
  color: var(--accent-ink);
  font-weight: 800;
}
.wheel {
  position: relative;
  width: var(--wheel-d);
  height: var(--wheel-d);
  /* 立體圓盤：頂端受光的暖白面 */
  background: radial-gradient(circle at 50% 34%, var(--surface-hi), var(--surface) 72%);
  border: 1px solid var(--line);
  border-radius: 50%;
  box-shadow: var(--shadow-lg), var(--emboss);
  touch-action: none; /* 滑動不觸發捲動／下拉刷新（設計文件 §4）*/
}
.wheel::before {
  /* 內圈刻線：讓它讀起來像個轉盤 */
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  pointer-events: none;
}
.wheel-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.wheel-lines polyline {
  fill: none;
  stroke: var(--accent);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 5px rgb(var(--accent-rgb) / 0.5)); /* 手勢連線微發光 */
}
.wheel-letter {
  position: absolute;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--text);
  background: var(--surface-hi);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm), var(--emboss);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* 命中判斷用座標計算，不靠按鈕事件（§4）*/
  transition:
    transform 0.12s ease,
    background 0.12s ease,
    color 0.12s ease,
    box-shadow 0.12s ease;
}
.wheel-letter.selected {
  background: var(--accent);
  color: var(--on-accent); /* 珊瑚底上用深字，比白字清楚（兩套主題皆 AA）*/
  border-color: transparent;
  transform: scale(1.09);
  box-shadow:
    0 0 0 4px rgb(var(--accent-rgb) / 0.28),
    var(--shadow-md);
}
.wheel-shuffle {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.55;
  padding: 16px;
  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}
.wheel-shuffle .icon {
  width: 42px;
  height: 42px;
}
.wheel-shuffle:active {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0.85;
}

/* ---- 關卡選擇 ---- */
.level-list {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 16px;
  align-content: start;
}
.level-btn {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 0;
  font-weight: 700;
  box-shadow: var(--shadow-sm), var(--emboss);
  transition: transform 0.12s ease;
}
.level-btn .icon {
  width: 13px;
  height: 13px;
}
.level-btn .icon-check {
  color: var(--grid-filled);
} /* 已完成：綠勾 */
.level-btn:active {
  transform: scale(0.94);
}
.level-btn.current {
  /* 目前關：琥珀強調，不用突兀的 outline */
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow:
    0 0 0 3px rgb(var(--accent-rgb) / 0.2),
    var(--shadow-sm);
}
.level-btn:disabled {
  /* 未解鎖：凹陷、去掉浮起感 */
  opacity: 0.5;
  cursor: default;
  background: var(--grid-empty);
  box-shadow: var(--deboss);
}
.level-btn:disabled:active {
  transform: none;
}

/* ---- overlay 們（z-index 疊層順序見 UI 文件 §4）---- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgb(28 22 12 / 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 30;
}
.overlay[hidden] {
  display: none;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 30px;
  min-width: 244px;
  max-width: min(92vw, 360px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: card-in 0.22s ease-out;
}
@keyframes card-in {
  from {
    transform: scale(0.92) translateY(8px);
    opacity: 0;
  }
  to {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}
.card h1,
.card h2 {
  font-family: var(--font-display);
  font-weight: 800;
}
.card .icon-coin {
  color: var(--accent-ink);
  width: 1.05em;
  height: 1.05em;
} /* 過關 +N 金幣 */
.card label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}
.card input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--grid-filled); /* 開關染成綠墨，不用系統藍 */
}
.about-text {
  font-size: 0.75rem;
  color: var(--text-soft);
  text-align: left;
  margin-top: 8px;
  line-height: 1.5;
}
.btn-primary {
  font-family: var(--font-display);
  background: linear-gradient(var(--grid-filled-hi), var(--grid-filled));
  color: var(--letter-on-fill);
  border-radius: 12px;
  padding: 12px 24px;
  font-weight: 800;
  box-shadow: var(--shadow-md), var(--emboss);
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}
.btn-primary:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: var(--shadow-sm);
}
.clear-words-hint {
  font-size: 0.75rem;
  color: var(--text-soft);
  margin-top: -8px;
}
.clear-words {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.clear-word-chip {
  font-family: var(--font-display);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: var(--shadow-sm), var(--emboss);
  transition: transform 0.12s ease;
}
.clear-word-chip:active {
  transform: scale(0.94);
}
.center-screen {
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  text-align: center;
}
.center-screen h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.6rem;
}

/* 教學（不攔截操作，UI 文件 §4-F）*/
.tutorial {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 26vh;
  text-align: center;
  pointer-events: none;
  z-index: 20;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  text-shadow: 0 1px 2px var(--bg);
  animation: pulse 1.6s ease-in-out infinite;
}
.tutorial[hidden] {
  display: none;
}
@keyframes pulse {
  50% {
    opacity: 0.45;
  }
}

/* 查詞卡片（popover）*/
.dict-card {
  position: fixed;
  z-index: 35; /* 過關卡片開著時仍可彈出查詞卡（UI 文件 §4），故蓋在 .overlay(30) 之上 */
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  padding: 14px 18px;
  max-width: 260px;
}
.dict-card[hidden] {
  display: none;
}
.dict-card strong {
  font-family: var(--font-display);
  font-size: 1.15rem;
  margin-right: 8px;
}
.dict-card p {
  font-size: 0.85rem;
  margin-top: 6px;
  line-height: 1.45;
}
.dict-card .def-zh {
  font-size: 0.95rem;
  color: var(--text);
}
.dict-card .def-en {
  font-size: 0.8rem;
  color: var(--text-soft);
}
.speak-btn {
  font-size: 1.1rem;
  transition: transform 0.12s ease;
}
.speak-btn:active {
  transform: scale(0.88);
}

/* 橫式遮罩：蓋過其他一切 */
.rotate-mask {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--bg);
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 800;
}
@media (orientation: landscape) and (max-height: 500px) {
  .rotate-mask {
    display: flex;
  }
}

/* prefers-reduced-motion：跳過動畫與過場，直接顯示結果（設計文件 §7）*/
@media (prefers-reduced-motion: reduce) {
  .cell.pop,
  .preview.shake,
  .shake,
  .tutorial,
  .card {
    animation: none;
  }
  .chip,
  .hint-btn,
  .level-btn,
  .btn-primary,
  .wheel-letter,
  .wheel-shuffle,
  .speak-btn {
    transition: none;
  }
}