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

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  font-family: -apple-system, "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", sans-serif;
  /* 漸層第一格（全站底色）食 --bg：佢同 <meta name="theme-color"> 必須同一個來源，
     寫死兩次就係兩份底——改 --bg 而唔跟呢度，主屏模式會行到一條走色嘅狀態列（覆核第 5 條）。
     後兩格（#FFE8D6／#FFF0F5）唔喺 Task 5 範圍，照留寫死。 */
  background: linear-gradient(135deg, var(--bg) 0%, #FFE8D6 50%, #FFF0F5 100%);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  /* 全站手勢格（spec §1.3）：唔同系統格鬥——縮放由 viewport 鎖死，
     長按選字同橡皮筋回彈一律關咗；橫向手勢留返畀 .subcat-tabs 自己滾 */
  touch-action: manipulation;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

#app {
  /* 應用高度得一個來源：--app-h（tokens.css）。兜底唔使喺呢度再列 100vh／100dvh——
     舊引擎冇 dvh 由 --app-h base 嗰份 100vh 兜住，識得 dvh 嘅引擎由 tokens.css 嘅
     @supports (height: 100dvh) 覆寫升做 100dvh，兩邊食嘅都係同一個名 */
  height: var(--app-h);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Background shapes */
#bg-shapes {
  position: fixed;
  inset: 0;
  z-index: var(--z-bg);
  pointer-events: none;
  overflow: hidden;
}

.bg-circle {
  position: absolute;
  border-radius: 50%;
  opacity: 0.15;
  animation-name: var(--ambient-a, float);
  animation-duration: var(--dur-ambient);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.c1 { width: 200px; height: 200px; background: var(--primary); top: -50px; left: -50px; animation-delay: 0s; }
.c2 { width: 150px; height: 150px; background: var(--secondary); top: 30%; right: -40px; animation-delay: -4s; }
.c3 { width: 180px; height: 180px; background: var(--accent); bottom: -60px; left: 20%; animation-delay: -8s; }
.c4 { width: 120px; height: 120px; background: var(--purple); top: 60%; left: -30px; animation-delay: -12s; }
.c5 { width: 100px; height: 100px; background: var(--green); top: 10%; right: 20%; animation-delay: -16s; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(20px, -30px) scale(1.05); }
  50% { transform: translate(-10px, 20px) scale(0.95); }
  75% { transform: translate(15px, 10px) scale(1.02); }
}

/* Top bar */
#top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 內距底數食 --top-pad-y／--top-pad-x（tokens.css）：矮屏檔位覆寫 12px→8px，
     呢度唔準再寫死第二份（安全區加算照住 token 行，見 spec §1.2） */
  padding: var(--top-pad-y) var(--top-pad-x);
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  /* 瀏海／狀態列唔好食走按鈕：內距加安全區，頂欄抬高到 HUD 層，企喺內容之上 */
  padding-top: calc(var(--top-pad-y) + var(--sa-t));
  padding-left: calc(var(--top-pad-x) + var(--sa-l));
  padding-right: calc(var(--top-pad-x) + var(--sa-r));
  position: relative;
  z-index: var(--z-hud);
  flex-shrink: 0;
}

.top-bar-right {
  display: flex;
  gap: 8px;
}

.nav-btn {
  min-width: var(--tap-min);
  min-height: var(--tap-min);
  border: none;
  border-radius: 50%;
  background: white;
  font-size: 24px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--dur-2), box-shadow var(--dur-2);
}

.nav-btn:active {
  transform: scale(0.9);
}

.kb-help-btn {
  font-size: 20px;
}

#page-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

/* Keyboard hint bar */
.keyboard-hint {
  background: linear-gradient(90deg, #FFF3B0, #FFD93D);
  color: var(--ink);
  font-size: 13px;
  padding: 6px 16px;
  text-align: center;
  font-weight: 500;
  border-bottom: 2px solid rgba(0,0,0,0.06);
  min-height: 0;
  transition: opacity var(--dur-2);
}
.keyboard-hint:empty { display: none; }

/* Main content */
#main-content {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  position: relative;
  z-index: var(--z-content);
  -webkit-overflow-scrolling: touch;
  /* 圓角機身嘅左右安全區靠呢度撐返；橫向拖曳唔準溜走成系統嘅「返回」手勢 */
  padding-left: var(--sa-l);
  padding-right: var(--sa-r);
  overscroll-behavior-x: contain;
  touch-action: pan-y;
  /* 寬屏 900px 居中上限：由舊 @media (min-width: 900px) 升上 base——
     視口細過 900px 時上限 bind 唔到，行為逐位相同；斷點唔準留尺寸值（plan L3089） */
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.view {
  display: none;
  padding: 16px;
  padding-bottom: 32px;
  min-height: 100%;
  animation: fadeIn 0.3s ease;
}

.view.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Home */
.home-hero {
  text-align: center;
  margin-bottom: 20px;
}

.mascot {
  font-size: 64px;
  animation-name: var(--ambient-a, bounce);
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  display: inline-block;
}

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

.hero-text {
  font-size: 18px;
  color: var(--text-light);
  margin-top: 8px;
  font-weight: 500;
}

.category-grid {
  display: grid;
  /* 欄數由 tokens.css 四條設備檔位決定，呢度唔準自己寫死 */
  grid-template-columns: repeat(var(--grid-cols), minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 24px;
}

.category-card {
  background: white;
  border-radius: var(--radius);
  padding: 20px 12px;
  text-align: center;
  cursor: pointer;
  box-shadow: var(--card-shadow);
  transition: transform var(--dur-2), box-shadow var(--dur-2);
  position: relative;
  overflow: hidden;
}

.category-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--primary);
}

.category-card.kb-focus {
  box-shadow: var(--kb-focus-ring);
  transform: scale(1.04);
  z-index: 2;
}

.cat-emoji {
  font-size: 48px;
  display: block;
  margin-bottom: 8px;
}

.cat-name {
  font-size: 20px;
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

.cat-sub-count {
  display: block;
  font-size: 11px;
  color: var(--text-light);
  margin-bottom: 4px;
}

.cat-count {
  font-size: 13px;
  color: var(--text-light);
}

.cat-key-hint {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 217, 61, 0.9);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
}

.cat-key-hint:empty { display: none; }

.cat-progress {
  margin-top: 8px;
  height: 6px;
  background: #f0f0f0;
  border-radius: 3px;
  overflow: hidden;
}

.cat-progress-fill {
  height: 100%;
  border-radius: 3px;
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out);
}

.home-stats {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.stat-bubble {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: white;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.stat-icon {
  font-size: 20px;
}

.stat-bubble span:nth-child(2) {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.stat-label {
  font-size: 11px;
  color: var(--text-light);
}

/* Learn View */
#view-learn {
  /* 上下內距食 token：base 值（16px／32px）逐字等似 .view 嗰份，行為冇變；
     矮屏檔位將佢哋覆寫做 8px／8px，所以檔位規則唔使再寫死尺寸 */
  padding-top: var(--learn-pad-t);
  padding-bottom: var(--learn-pad-b);
}

.learn-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.learn-cat-name {
  font-size: 22px;
  font-weight: 700;
}

.learn-progress {
  font-size: 15px;
  color: var(--text-light);
  background: white;
  padding: 4px 12px;
  border-radius: 20px;
}

/* Subcategory tabs */
.subcat-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: var(--tabs-pad-b);
  margin-bottom: 14px;
  scrollbar-width: thin;
}
.subcat-tabs::-webkit-scrollbar { height: 4px; }
.subcat-tabs::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 2px; }

.subcat-tab {
  flex-shrink: 0;
  padding: 8px 14px;
  border: 2px solid transparent;
  border-radius: 20px;
  background: rgba(255,255,255,0.9);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: inherit;
}

.subcat-tab:hover { background: white; }

/* 分層白紗蓋喺 var(--cat-tab-color) 之上：13 隻 category 色入面最壞嗰隻 #E056A0
   舊寫法得 3.63 <4.5（正文級 15px/600）；rgba(255,255,255,0.22) 壓上去 → 4.77 ≥4.5。
   呢度唔單止修 --blue（4.30），係為晒 13 隻食落去都過閘揀 0.22（用家會見到 active 行頭稍微變淺）。 */
.subcat-tab.active {
  background: linear-gradient(rgba(255,255,255,0.22), rgba(255,255,255,0.22)), var(--cat-tab-color, #FF6B6B);
  color: var(--ink);
  border-color: rgba(0,0,0,0.05);
  transform: scale(1.05);
}

.subcat-badge {
  background: rgba(0,0,0,0.15);
  padding: 2px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
}

.subcat-tab.active .subcat-badge {
  background: rgba(255,255,255,0.35);
}

.card-area {
  display: flex;
  justify-content: center;
  perspective: 1000px;
  margin-bottom: 16px;
}

.flashcard {
  width: var(--card-w);
  height: var(--card-h);
  cursor: pointer;
  position: relative;
  --cat-color: var(--primary);
}

.flashcard-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform var(--dur-flip) var(--ease-glide);
}

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

.flashcard-front, .flashcard-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--card-pad);
  box-shadow: var(--card-shadow);
}

/* Colorful card front: gradient background with decorative pattern */
.flashcard-front {
  background:
    radial-gradient(circle at 20% 20%, var(--cat-color) 0%, transparent 40%),
    radial-gradient(circle at 80% 20%, var(--cat-color) 0%, transparent 40%),
    radial-gradient(circle at 50% 80%, var(--cat-color) 0%, transparent 45%),
    linear-gradient(135deg, #ffffff 0%, #fef8f0 100%);
  border: 4px solid var(--cat-color);
}

/* 卡背由「向黑漸變」改做「白紗蓋 cat 色」：--ink 同向黑嘅漸變天生打架（舊 background
   linear-gradient(135deg, var(--cat-color) 0%, rgba(0,0,0,0.55) 140%)）。
   歷史數字（屬已廢除嘅向黑模型，唔係今日量度閘嘅實數，唔準再當現況讀）：13 色 × 4 點
   最壞 2.34，豁免都救唔返——改返白字都做唔到（白字最壞 2.38、41/52 唔合格）。
   而家蓋一層白紗（.86→.62 沿對角淡出）壓喺 var(--cat-color) 之上。現況實數由
   tests/page-structure.test.js 嘅量度閘喺用家呢份成品自印（口徑：沿 135deg 一維取樣
   0/25/50/70 加 stop 位置，色用預乘 alpha 插值——兩邊都係保守下限，實測只會更好唔會更差）：
   .flashcard-back（--ink 22px／400，正文級閘 4.5）13 隻 category color 逐隻過，最壞 8.02
   食喺 #E056A0；.card-english 無自己嘅 color、靠繼承再食自己條 opacity:.8 衰減，
   同一組 13 色最壞 4.99（都係 #E056A0），照樣過 4.5。卡背由暗沉變返粉彩（用戶可見）。 */
.flashcard-back {
  background: linear-gradient(135deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.62) 140%), var(--cat-color);
  color: var(--ink);
  transform: rotateY(180deg);
}

/* Colorful emoji frame：尺寸食 --card-frame-* token（base 相對值跟卡縮，矮屏檔位覆寫做緊湊值） */
.card-emoji-frame {
  width: var(--card-frame-size);
  height: var(--card-frame-size);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 6px solid var(--cat-color);
  box-shadow:
    0 6px 20px rgba(0,0,0,0.08),
    inset 0 0 30px rgba(255,255,255,0.9);
  margin-bottom: var(--card-frame-mb);
  position: relative;
}

.card-emoji-frame::before {
  content: '';
  position: absolute;
  inset: var(--card-frame-ring);
  border-radius: 50%;
  border: 3px dashed var(--cat-color);
  opacity: 0.5;
  animation-name: var(--ambient-a, spin);
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.card-emoji {
  font-size: var(--card-emoji-fs);
  line-height: 1;
  animation-name: var(--ambient-a, wiggle);
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}

.card-char {
  font-size: var(--card-char-fs);
  /* 行高食 token（覆核第 7d 條）：base 係 normal，矮屏收做 1——舊寫法係喺檔位再落一條
     `.card-char { line-height: 1 }`，同一個尺寸兩份來源，檔位仲留咗尺寸類值 */
  line-height: var(--card-char-lh);
  font-weight: 700;
  color: var(--text);
  text-shadow: 2px 2px 0 rgba(255,255,255,0.8);
}

.card-char.long-text {
  font-size: clamp(24px, 5.6vw, 38px);
  line-height: 1.3;
  padding: 0 18px;
}

/* 書面通詞行（詞彙清理）：口語名做卡面大字，呢行喺下面做白色藥丸，兩樣都睇到。
   尺寸／內距／圓角／墊底色全部食 tokens.css（base 係 clamp(13px→16px) 跟視口闊、矮屏 13px；
   點解唔寫死大細見 tokens.css 嗰段出水實錄）；冇 alias 時
   app.js 行 el.hidden，靠 UA 嘅 [hidden]{display:none} 收走，呢度唔準再宣告 display
   （宣告咗就殺走隱藏態）。
   藥丸係必需品，唔係裝飾：本專案 13 隻 category color 逐隻過量度式對比度閘（正文級 4.5），
   冇藥丸時最壞 3.63（#E056A0 色斑 P=0%）同 4.3（#4D96FF）——兩格唔達標；
   墊上 --card-alias-bg 之後同一閘自印最壞 11.03（都係 #E056A0）。墊底色唔準調走。 */
.card-alias {
  font-size: var(--card-alias-fs);
  margin-top: var(--card-alias-mt);
  padding: var(--card-alias-pad);
  border-radius: var(--card-alias-radius);
  background: var(--card-alias-bg);
  font-weight: 600;
  color: var(--ink);
  text-align: center;
}

.speak-btn {
  margin-top: var(--speak-btn-mt);
  min-width: var(--tap-kid);
  min-height: var(--tap-kid);
  border: none;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--pink));
  font-size: 28px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(255,107,107,0.3);
  transition: transform var(--dur-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.speak-btn:active {
  transform: scale(0.85);
}

.speak-btn.speaking {
  animation: pulse 0.8s ease-in-out infinite;
  box-shadow: 0 6px 24px rgba(255, 107, 107, 0.5);
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.card-jyutping {
  font-size: var(--card-jyutping-fs);
  font-weight: 600;
  margin-bottom: var(--card-jyutping-mb);
  opacity: 0.95;
}

.card-english {
  font-size: var(--card-english-fs);
  opacity: 0.8;
}

.flashcard-back .card-emoji {
  font-size: var(--card-back-emoji-fs);
}

.card-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
  /* home indicator 唔好蓋住上一個／下一個 */
  padding-bottom: calc(12px + var(--sa-b));
}

.arrow-btn {
  min-width: var(--tap-kid);
  min-height: var(--tap-kid);
  border: none;
  border-radius: 50%;
  background: white;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform var(--dur-2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.arrow-btn:active {
  transform: scale(0.9);
}

.arrow-btn:disabled {
  opacity: 0.3;
  cursor: default;
}

.card-dots {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 200px;
}

.card-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ddd;
  transition: background-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
  cursor: pointer;
}

.card-dot.active {
  background: var(--primary);
  transform: scale(1.3);
}

.card-dot.learned {
  background: var(--green);
}

.learn-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  /* 主操作最貼底，home indicator 一定要留位 */
  padding-bottom: calc(12px + var(--sa-b));
}

.action-btn {
  padding: 14px 24px;
  min-width: var(--tap-kid);
  min-height: var(--tap-kid);
  border: none;
  border-radius: 50px;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--dur-2), box-shadow var(--dur-2);
  font-family: inherit;
}

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

.learned-btn {
  background: var(--green);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(107,203,119,0.3);
}

/* 分層白紗蓋喺 --blue 之上（唔準用 color-mix：舊 Safari 唔支持會成條 background 宣告丟走、按鈕冇底）。
   rgba(255,255,255,0.22) 壓落 var(--blue) → 實算 --ink 對比 5.54（正文級 17px/600，過閘 4.5），
   舊寫法 var(--blue) 直接壓 --ink 得 4.30 <4.5（spec §2.4）。藍色按鈕會稍微變淺（用戶可見）。 */
.quiz-btn {
  background: linear-gradient(rgba(255,255,255,0.22), rgba(255,255,255,0.22)), var(--blue);
  color: var(--ink);
  box-shadow: 0 4px 12px rgba(77,150,255,0.3);
}

/* Quiz View */
.quiz-top {
  margin-bottom: 20px;
}

.quiz-progress-bar {
  height: 10px;
  background: #f0f0f0;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), var(--orange));
  border-radius: 5px;
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out);
}

.quiz-counter {
  font-size: 15px;
  color: var(--text-light);
  text-align: right;
  display: block;
}

.quiz-area {
  text-align: center;
}

.quiz-prompt {
  margin-bottom: 24px;
}

.quiz-emoji {
  font-size: 80px;
  margin-bottom: 8px;
  animation-name: var(--ambient-a, wiggle);
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.quiz-speak {
  width: 56px;
  height: 56px;
  margin: 0 auto 12px;
}

.quiz-hint {
  font-size: 16px;
  color: var(--text-light);
  font-weight: 500;
}

.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-kid);
  max-width: var(--quiz-options-max-w);
  margin: 0 auto;
}

.quiz-option {
  min-height: var(--tap-kid);
  padding: var(--quiz-option-pad);
  border: 3px solid #e0e0e0;
  border-radius: var(--radius);
  background: white;
  font-size: var(--quiz-option-fs);
  font-weight: 700;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
  font-family: inherit;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.quiz-opt-char { display: block; }
.quiz-opt-char.long-text { font-size: 0.62em; line-height: 1.3; }
.quiz-opt-key {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 12px;
  font-weight: 700;
  background: rgba(255,217,61,0.9);
  color: var(--ink);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: monospace;
}

.quiz-option.kb-focus {
  box-shadow: var(--kb-focus-ring);
  border-color: var(--accent);
}

.quiz-option:active {
  transform: scale(0.95);
}

.quiz-option.correct {
  border-color: var(--green);
  background: #e8f8e8;
}

.quiz-option.wrong {
  border-color: var(--primary);
  background: #ffe8e8;
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}

/* Quiz Result */
.quiz-result, .quiz-final {
  text-align: center;
  padding: 24px;
}

.quiz-result.hidden, .quiz-final.hidden {
  display: none;
}

.result-icon {
  font-size: 80px;
  margin-bottom: 12px;
}

.result-text {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
}

/* 分層白紗蓋 --blue：同 .quiz-btn 同一手法，實算 --ink 5.54 ≥4.5（舊 4.30 <4.5）。 */
.next-btn {
  background: linear-gradient(rgba(255,255,255,0.22), rgba(255,255,255,0.22)), var(--blue);
  color: var(--ink);
}

.retry-btn {
  background: var(--orange);
  color: var(--ink);
  margin-bottom: 12px;
}

.home-btn {
  background: var(--secondary);
  color: var(--ink);
}

.final-stars {
  font-size: 48px;
  margin-bottom: 16px;
}

.final-score {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
}

.final-msg {
  font-size: 18px;
  color: var(--text-light);
  margin-bottom: 24px;
}

.final-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

/* Parent Dashboard */
.parent-content {
  max-width: 700px;
  margin: 0 auto;
}

.parent-content h2 {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
}

.parent-content h3 {
  font-size: 18px;
  margin: 20px 0 12px;
  color: var(--text);
}

.parent-overview {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (min-width: 500px) {
  .parent-overview { grid-template-columns: repeat(4, 1fr); }
}

.overview-card {
  background: white;
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.overview-card .ov-num {
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
}

.overview-card .ov-label {
  font-size: 13px;
  color: var(--text-light);
  margin-top: 4px;
}

.parent-categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.parent-cat-row {
  background: white;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.parent-cat-emoji {
  font-size: 28px;
}

.parent-cat-info {
  flex: 1;
}

.parent-cat-name {
  font-size: 16px;
  font-weight: 600;
}

.parent-cat-subs {
  font-size: 11px;
  color: var(--text-light);
  margin-top: 2px;
  line-height: 1.4;
}

.parent-cat-bar {
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 6px;
}

.parent-cat-bar-fill {
  height: 100%;
  border-radius: 4px;
  transform-origin: left center;
  transition: transform var(--dur-3) var(--ease-out);
}

.parent-cat-stat {
  font-size: 13px;
  color: var(--text-light);
  min-width: 50px;
  text-align: right;
}

.parent-history {
  background: white;
  border-radius: var(--radius-sm);
  padding: 16px;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.history-item {
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
  color: var(--text-light);
}

.history-item:last-child {
  border-bottom: none;
}

/* 第 17 處漏網：舊 color #ccc 喺白底 14px 正文級得 1.61，係真文字色缺陷。
   改食 --text-light（#5F6A6E，白底實算 5.57、canvas 最壞端 #FFE8D6 實算 4.71，兩邊都 ≥4.5）。呢檔唔準刪 --text／--text-light 宣告。 */
.history-empty {
  color: var(--text-light);
  text-align: center;
  padding: 20px;
  font-size: 14px;
}

.parent-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 24px;
  padding-bottom: 20px;
}

.reset-btn {
  background: #ff6b6b;
  color: var(--ink);
}

.back-btn {
  background: var(--secondary);
  color: var(--ink);
}

/* Confetti 嘅定位規則已遷去 motion.css，呢度唔準再寫一份（兩邊會打架） */

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

@keyframes confettiFall {
  0% {
    transform: translateY(-20px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

/* Toast */
/* 深底 rgba(0,0,0,0.8) 覆喺 #FFF8F0 → 白字實測 12.86:1（plan 表 15.2 冇計呢層底），屬 §2.4 豁免 */
.toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(0,0,0,0.8);
  color: white;
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 500;
  z-index: var(--z-toast);
  transition: transform var(--dur-3) ease;
  pointer-events: none;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

/* Keyboard help overlay */
.keyboard-help-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: var(--z-help);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  backdrop-filter: blur(4px);
}
.keyboard-help-overlay.visible { display: flex; }

.keyboard-help-content {
  background: white;
  border-radius: 20px;
  padding: 24px 28px;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}

.keyboard-help-content h2 {
  text-align: center;
  margin-bottom: 16px;
  color: var(--ink);
}

.kb-section {
  margin-bottom: 16px;
  padding: 12px;
  background: #fef7e6;
  border-radius: 12px;
}

.kb-section h3 {
  font-size: 16px;
  margin-bottom: 8px;
  color: var(--ink);
}

.kb-row {
  padding: 4px 0;
  font-size: 14px;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

kbd {
  display: inline-block;
  background: white;
  border: 2px solid #FFD93D;
  border-bottom-width: 3px;
  border-radius: 6px;
  padding: 2px 8px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  min-width: 22px;
  text-align: center;
}

.kb-close-btn {
  display: block;
  margin: 8px auto 0;
  padding: 10px 20px;
  background: var(--primary);
  color: var(--ink);
  border: none;
  border-radius: 50px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* Responsive：卡嘅幾何、卡內文同版面骨架尺寸已全部收返 tokens.css（base 規則食
   var(--card-emoji-fs)、var(--top-pad-y) 等 token，檔位 :root 覆寫），呢度嘅 @media
   只準留結構性聲明——舊 @media (min-width: 600px) 四條尺寸同 @media (min-width: 900px)
   居中上限已遷走，得返 min-width: 500px（網格欄數）、近方形雙欄同矮屏兩欄三條結構檔 */

/* Scrollbar */
#main-content::-webkit-scrollbar {
  width: 4px;
}

#main-content::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.15);
  border-radius: 2px;
}

/* 摺疊屏內屏（≈4:3.6 近方形）：卡區左、操作右；min-height 守衛要跟 tokens.css 嘅近方形檔位一模一樣（D8） */
@media (min-width: 441px) and (max-width: 900px) and (min-aspect-ratio: 4/5) and (min-height: 541px) {
  #view-learn.active {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "head head"
      "tabs tabs"
      "card act";
    align-items: center;
    gap: var(--gap-kid);
  }
  .learn-header { grid-area: head; }
  .subcat-tabs  { grid-area: tabs; }
  .card-area    { grid-area: card; justify-self: center; }
  /* 兩條都派咗 act 格係缺陷源頭：實錄重疊 325×76px，幼兒會撳錯。
     一上一下食晒右欄高度，先至分得開 */
  .card-nav      { grid-area: act; align-self: start; }
  .learn-actions { grid-area: act; align-self: end; }
}

/* 矮屏：緊湊模式——關裝飾、藏鍵盤提示條 */
@media (max-height: 540px) {
  #bg-shapes { display: none; }
  .keyboard-hint { display: none; }
  .home-stats { display: none; }

  /* 單欄直排嘅非卡開支（頂欄＋行頭＋卡區導航＋主操作）實算 364px，大過 844×390 得返嘅
     310px 預算，所以呢檔唔係調尺寸可以解決，要改結構：同近方形一套設計語言，
     卡喺左、操作喺右。行頭同行尾並排做第一行，卡同操作並排做第二行。
     呢檔得返結構性聲明：所有 8px／6px 呢類緊湊尺寸已收返 tokens.css 矮屏 :root 覆寫
     （--top-pad-y／--learn-pad-*／--learn-row-gap／--tabs-pad-b／--card-* 全域），
     頂欄安全區加算照住 base 嘅 calc(var(--top-pad-y) + var(--sa-t)) 行，唔使亦唔準喺度重寫 */
  #view-learn.active {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "head tabs"
      "card act";
    gap: var(--learn-row-gap) var(--gap-kid);
    align-items: center;
  }
  .learn-header { grid-area: head; margin-bottom: 0; }
  .subcat-tabs  { grid-area: tabs; justify-self: end; margin-bottom: 0; }
  .card-area    { grid-area: card; justify-self: center; margin-bottom: 0; }
  /* 同一格分上落：導航貼頂、主操作貼底，兩組按鈕零重疊（近方形同一條病灶，唔準再犯）。
     16px 下外距喺直排係分隔，喺呢度只會頂大成行高度，所以要歸零 */
  .card-nav      { grid-area: act; align-self: start; margin-bottom: 0; }
  .learn-actions { grid-area: act; align-self: end; }

  /* 呢檔得返結構性聲明：舊 `.card-char { line-height: 1 }` 都收咗做 --card-char-lh
     （覆核第 7d 條）——無單位行高雖然唔算「帶單位絕對長度」，但佢照係尺寸類值，
     留喺檔位就係 tokens.css 以外嘅第二份來源 */
}