/* === Design tokens === */
:root {
  --font-scale: 1;
  --bg: #fff8f0;
  --bg-soft: #fffdf7;
  --ink: #2d2a4a;
  --ink-soft: #5a567e;
  --primary: #6b8cff;
  --primary-soft: #cdd9ff;
  --accent: #ff6fa3;
  --accent-soft: #ffd6e7;
  --success: #4ec9a8;
  --success-soft: #c8f0e3;
  --warn: #ff9f43;
  --warn-soft: #ffe2c2;
  --danger: #ff6b6b;
  --danger-soft: #ffd1d1;
  --candy-1: #ffd6e0;
  --candy-2: #cdeafe;
  --candy-3: #d0f4de;
  --candy-4: #fff5ba;
  --candy-5: #e0c3fc;
  --shadow: 0 4px 0 rgba(0,0,0,0.08), 0 8px 24px rgba(45,42,74,0.08);
  --radius: 18px;
  --radius-lg: 28px;
  --font: "Comic Sans MS", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background: linear-gradient(180deg, var(--bg) 0%, #fff 100%);
  color: var(--ink);
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  font-size: calc(15px * var(--font-scale));
}
@media (min-width: 768px) {
  body { font-size: calc(16px * var(--font-scale)); }
}
@media (min-width: 1024px) {
  body { font-size: calc(17px * var(--font-scale)); }
}

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

/* === 注音 — 漢字 + 注音欄並排，垂直置中（台灣課本習慣） ===
   結構：<span.zh-pair>
            <span.zh-base>漢字</span>
            <span.zh-bopo>
              <span.bopo-tone>聲調</span>  // 在頂端
              <span.bopo-char>注音字</span>
              <span.bopo-char>注音字</span>
            </span>
         </span>
   - .zh-pair: inline-flex，將漢字和注音欄並排，align-items: center → 垂直至中
   - vertical-align: middle 讓整組與旁邊文字（emoji/英文）的中心對齊
   - line-height: 1 避免行高擠壓注音 */
.zh-pair {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  vertical-align: middle;
  line-height: 1;
  margin-right: 1px;
}
.zh-base {
  display: inline-block;
  line-height: 1;
}
.zh-bopo {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.5em;
  line-height: 1;
  color: var(--ink-soft);
  font-family: "PingFang TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  font-weight: 700;
  user-select: none;
  letter-spacing: 0;
  white-space: nowrap;
  margin-left: 2px;
}
.bopo-char {
  display: block;
  line-height: 1;
}
/* 聲調 ˊ ˇ ˋ：直書欄的「右上角」（先 render → 跑到 column 頂端） */
.bopo-tone {
  display: block;
  line-height: 1;
  font-size: 1em;
  font-weight: 800;
  align-self: flex-end;
}
/* 輕聲 ˙：頂端置中 */
.bopo-tone--neutral {
  align-self: center;
}
/* Mobile: smaller bopomofo */
@media (max-width: 480px) {
  .zh-bopo { font-size: 0.45em; margin-left: 1px; }
}
/* Tablet+: bigger bopomofo */
@media (min-width: 768px) {
  .zh-bopo { font-size: 0.55em; margin-left: 3px; }
}
/* Give rows containing bopomofo enough vertical room so 3-bopo + tone
   never bumps into the next line. */
.hero, .section, .word-row, .sentence-card, .btn, .cat-card,
.profile-pill, .session-row, .struggle-row, .unit-bar, .kid-stats {
  line-height: 1.5;
}

/* === Header === */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 248, 240, 0.95);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--primary-soft);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.header__back {
  min-width: 48px;
  min-height: 48px;
  border-radius: var(--radius);
  background: var(--primary-soft);
  font-size: 24px;
  display: grid;
  place-items: center;
}
.header__back:hover { background: var(--primary); color: white; }
.header__title {
  flex: 1;
  font-size: calc(20px * var(--font-scale));
  font-weight: 800;
  text-align: center;
}
.header__progress {
  min-width: 60px;
  text-align: right;
  font-weight: 700;
  font-size: calc(16px * var(--font-scale));
  color: var(--ink-soft);
}
.header__tools {
  display: flex;
  gap: 4px;
  align-items: center;
}
.tool-btn {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--candy-2);
  font-size: 14px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.tool-btn--on { background: var(--success); color: white; }

/* === Layout === */
.app {
  max-width: 880px;
  margin: 0 auto;
  padding: 20px 16px 80px;
}

.section {
  margin-top: 28px;
}
.section__title {
  font-size: calc(22px * var(--font-scale));
  font-weight: 800;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* === Profile gate === */
.profile-gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 20px;
}
.profile-card {
  max-width: 420px;
  width: 100%;
  background: white;
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  box-shadow: var(--shadow);
  text-align: center;
}
.profile-card h1 { font-size: 28px; margin: 0 0 4px; }
.profile-card p { color: var(--ink-soft); margin: 0 0 20px; }
.profile-card input {
  width: 100%;
  padding: 16px;
  font-size: 22px;
  font-weight: 800;
  border-radius: var(--radius);
  border: 3px solid var(--primary-soft);
  text-align: center;
  font-family: inherit;
}
.profile-card input:focus { outline: none; border-color: var(--primary); }
.profile-list {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.profile-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--candy-2);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 18px;
  font-weight: 700;
}
.profile-pill button {
  margin-left: auto;
  font-size: 14px;
  color: var(--ink-soft);
  text-decoration: underline;
}

.user-chip {
  background: var(--candy-3);
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* === Home hero === */
.hero {
  background: linear-gradient(135deg, var(--accent-soft), var(--candy-2));
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow);
}
.hero__date {
  font-size: calc(15px * var(--font-scale));
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.hero__title {
  font-size: calc(28px * var(--font-scale));
  font-weight: 900;
  margin: 0 0 16px 0;
  line-height: 1.2;
}
.hero__title small {
  display: block;
  font-size: calc(15px * var(--font-scale));
  color: var(--ink-soft);
  font-weight: 600;
  margin-top: 4px;
}
.hero__words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}
.hero__chip {
  background: white;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: calc(18px * var(--font-scale));
  box-shadow: 0 2px 0 rgba(0,0,0,0.06);
}
.hero__sentence {
  background: white;
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-bottom: 16px;
  font-size: calc(18px * var(--font-scale));
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
}
.hero__sentence small {
  display: block;
  color: var(--ink-soft);
  font-weight: 500;
  font-size: calc(14px * var(--font-scale));
  margin-top: 4px;
}
.hero__buttons {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* === Big buttons === */
.btn {
  min-height: 56px;
  padding: 12px 20px;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: calc(18px * var(--font-scale));
  background: var(--primary);
  color: white;
  box-shadow: var(--shadow);
  transition: transform 0.05s, box-shadow 0.05s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.08); }
.btn--accent { background: var(--accent); }
.btn--success { background: var(--success); }
.btn--warn { background: var(--warn); }
.btn--danger { background: var(--danger); }
.btn--ghost {
  background: white;
  color: var(--ink);
  border: 2px solid var(--primary-soft);
  box-shadow: 0 2px 0 rgba(0,0,0,0.04);
}
.btn--full { width: 100%; }
.btn--xl { font-size: calc(22px * var(--font-scale)); min-height: 68px; }

/* === Star jar === */
.star-jar {
  background: white;
  border-radius: var(--radius);
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.04);
}
.star-jar__icon { font-size: 32px; }
.star-jar__count { font-size: calc(20px * var(--font-scale)); font-weight: 900; }
.star-jar__label { font-size: calc(13px * var(--font-scale)); color: var(--ink-soft); }

/* === Streak chip === */
.streak {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--warn-soft);
  color: var(--warn);
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 14px;
  margin-left: 6px;
}
.streak--big {
  font-size: calc(18px * var(--font-scale));
  padding: 6px 14px;
  background: var(--warn);
  color: white;
}

/* === Week grid === */
.weeks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
}
.week-card {
  background: white;
  border-radius: var(--radius);
  padding: 14px 12px;
  box-shadow: var(--shadow);
  text-align: left;
  border: 3px solid transparent;
  transition: transform 0.05s;
}
.week-card:hover { transform: translateY(-2px); }
.week-card--current { border-color: var(--accent); background: var(--accent-soft); }
.week-card--exam { background: var(--warn-soft); }
.week-card__num {
  font-size: calc(14px * var(--font-scale));
  color: var(--ink-soft);
  font-weight: 700;
}
.week-card__date {
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.week-card__progress {
  font-size: calc(16px * var(--font-scale));
  font-weight: 800;
  margin-bottom: 6px;
}
.week-card__words {
  font-size: calc(13px * var(--font-scale));
  color: var(--ink-soft);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* === Category grid === */
.categories {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
}
.cat-card {
  border-radius: var(--radius-lg);
  padding: 20px 16px;
  box-shadow: var(--shadow);
  text-align: center;
  transition: transform 0.05s;
}
.cat-card:hover { transform: translateY(-3px) scale(1.02); }
.cat-card__emoji {
  font-size: 48px;
  display: block;
  margin-bottom: 8px;
}
.cat-card__name {
  font-size: calc(20px * var(--font-scale));
  font-weight: 900;
  margin-bottom: 2px;
}
.cat-card__name-en {
  font-size: calc(14px * var(--font-scale));
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 6px;
}
.cat-card__count {
  font-size: calc(13px * var(--font-scale));
  color: var(--ink-soft);
  font-weight: 700;
}

/* === Word list === */
.word-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.word-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: white;
  padding: 12px 14px;
  border-radius: var(--radius);
  box-shadow: 0 2px 0 rgba(0,0,0,0.04);
}
.word-row__emoji { font-size: 32px; }
.word-row__en { font-weight: 800; font-size: calc(18px * var(--font-scale)); }
.word-row__zh { font-size: calc(15px * var(--font-scale)); color: var(--ink-soft); }
.word-row__star {
  margin-left: auto;
  font-size: 22px;
}

/* === Mode chooser === */
.modes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

/* === Flashcard === */
.flashcard-wrap {
  perspective: 1200px;
  margin: 24px auto;
  max-width: 480px;
}
.flashcard {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  transform-style: preserve-3d;
  transition: transform 0.5s;
  cursor: pointer;
}
.flashcard.flipped { transform: rotateY(180deg); }
.flashcard__face {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  background: white;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  padding: 20px;
  text-align: center;
}
.flashcard__face--back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--candy-2), var(--candy-3));
}
.flashcard__emoji { font-size: 96px; line-height: 1; margin-bottom: 12px; }
.flashcard__en { font-size: calc(40px * var(--font-scale)); font-weight: 900; }
.flashcard__zh { font-size: calc(36px * var(--font-scale)); font-weight: 900; }
.flashcard__hint {
  position: absolute;
  bottom: 12px;
  left: 0; right: 0;
  text-align: center;
  font-size: calc(13px * var(--font-scale));
  color: var(--ink-soft);
}

.flash-controls {
  display: grid;
  grid-template-columns: 56px 1fr 56px;
  gap: 10px;
  align-items: center;
  margin: 16px 0;
}
.icon-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 28px;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
}
.icon-btn--big {
  width: 72px;
  height: 72px;
  font-size: 36px;
}
.icon-btn--accent { background: var(--accent); }
.icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.flash-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* === Quiz / Listening === */
.quiz-prompt {
  background: white;
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.quiz-prompt__emoji { font-size: 80px; line-height: 1; }
.quiz-prompt__zh { font-size: calc(36px * var(--font-scale)); font-weight: 900; margin-top: 8px; }
.quiz-prompt__hint { font-size: calc(15px * var(--font-scale)); color: var(--ink-soft); margin-top: 6px; }
.quiz-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.quiz-option {
  background: white;
  border: 3px solid var(--primary-soft);
  border-radius: var(--radius);
  padding: 18px 14px;
  font-size: calc(24px * var(--font-scale));
  font-weight: 800;
  min-height: 72px;
  text-align: center;
  transition: transform 0.05s;
}
.quiz-option:hover { transform: translateY(-2px); border-color: var(--primary); }
.quiz-option--correct { background: var(--success-soft); border-color: var(--success); }
.quiz-option--wrong { background: var(--danger-soft); border-color: var(--danger); }
.quiz-feedback {
  text-align: center;
  font-size: calc(22px * var(--font-scale));
  font-weight: 800;
  margin: 16px 0;
  min-height: 32px;
}
.quiz-feedback--correct { color: var(--success); }
.quiz-feedback--wrong { color: var(--danger); }

/* === Spelling === */
.spell-input {
  width: 100%;
  padding: 18px;
  font-size: calc(28px * var(--font-scale));
  font-weight: 800;
  border-radius: var(--radius);
  border: 3px solid var(--primary-soft);
  text-align: center;
  font-family: inherit;
  background: white;
}
.spell-input:focus { outline: none; border-color: var(--primary); }
.spell-hint {
  text-align: center;
  font-size: calc(20px * var(--font-scale));
  color: var(--ink-soft);
  margin-top: 8px;
  font-weight: 700;
  letter-spacing: 4px;
}
.spell-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

/* === Handwriting (canvas) === */
.write-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 14px;
  text-align: center;
}
.write-prompt {
  font-size: calc(22px * var(--font-scale));
  font-weight: 800;
  margin-bottom: 10px;
}
.write-canvas-wrap {
  position: relative;
  width: 100%;
  background: #fffdf6;
  border: 3px dashed var(--primary-soft);
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: none;
}
.write-canvas {
  display: block;
  width: 100%;
  height: 220px;
  cursor: crosshair;
  touch-action: none;
}
.write-guide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Comic Sans MS", "Marker Felt", "Bradley Hand", cursive;
  font-weight: 900;
  font-size: 90px;
  color: rgba(45, 42, 74, 0.12);
  pointer-events: none;
  letter-spacing: 6px;
  user-select: none;
}
.write-guide--small { font-size: 56px; }
.write-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

/* === Sentence specific === */
.sentence-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.sentence-card__en {
  font-size: calc(28px * var(--font-scale));
  font-weight: 900;
  line-height: 1.4;
  margin-bottom: 12px;
}
.sentence-card__zh {
  font-size: calc(24px * var(--font-scale));
  color: var(--ink-soft);
  font-weight: 700;
}
.sentence-list {
  display: grid;
  gap: 10px;
}
.sentence-row {
  background: white;
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.04);
}
.sentence-row__week {
  font-size: calc(13px * var(--font-scale));
  color: var(--ink-soft);
  font-weight: 700;
}
.sentence-row__en {
  font-size: calc(20px * var(--font-scale));
  font-weight: 800;
  margin-top: 2px;
}
.sentence-row__zh {
  font-size: calc(16px * var(--font-scale));
  color: var(--ink-soft);
  margin-top: 2px;
}
.sentence-row--current {
  border: 3px solid var(--accent);
  background: var(--accent-soft);
}

.blank-suggest {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}
.blank-suggest button {
  background: white;
  border: 2px solid var(--primary-soft);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 800;
  font-size: calc(20px * var(--font-scale));
  min-height: 48px;
}
.blank-suggest button:hover { border-color: var(--primary); }
.blank-suggest button.picked { background: var(--success-soft); border-color: var(--success); }

/* === Custom exam picker === */
.unit-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.unit-pick__item {
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  cursor: pointer;
  border: 3px solid transparent;
  text-align: left;
  position: relative;
}
.unit-pick__item.checked { border-color: var(--success); }
.unit-pick__item.checked::after {
  content: "✓";
  position: absolute;
  top: 6px;
  right: 10px;
  background: var(--success);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 900;
}
.unit-pick__name { font-size: calc(18px * var(--font-scale)); font-weight: 900; margin-bottom: 4px; }
.unit-pick__count { font-size: calc(13px * var(--font-scale)); color: var(--ink-soft); }
.unit-pick__emoji { font-size: 28px; margin-right: 6px; }

.exam-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.exam-options button {
  padding: 12px 8px;
  border-radius: var(--radius);
  background: var(--candy-2);
  font-weight: 800;
  font-size: calc(16px * var(--font-scale));
  min-height: 56px;
}
.exam-options button.selected { background: var(--primary); color: white; }

/* === Movement break overlay === */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: grid;
  place-items: center;
  z-index: 100;
  padding: 24px;
}
.overlay__card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  max-width: 360px;
  text-align: center;
  box-shadow: var(--shadow);
}
.overlay__emoji { font-size: 72px; }
.overlay__text { font-size: calc(22px * var(--font-scale)); font-weight: 900; margin: 10px 0; }
.overlay__count { font-size: 18px; color: var(--ink-soft); margin-bottom: 18px; }

/* === Result screen === */
.result {
  text-align: center;
  padding: 40px 20px;
  background: linear-gradient(135deg, var(--candy-4), var(--candy-3));
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.result__emoji { font-size: 80px; line-height: 1; }
.result__score { font-size: calc(42px * var(--font-scale)); font-weight: 900; margin: 12px 0; }
.result__msg { font-size: calc(20px * var(--font-scale)); color: var(--ink-soft); margin-bottom: 20px; }

/* === Misc === */
.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-soft);
  font-size: calc(18px * var(--font-scale));
}
.progress-bar {
  height: 14px;
  background: white;
  border-radius: 999px;
  overflow: hidden;
  border: 2px solid var(--primary-soft);
}
.progress-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--success), var(--primary));
  transition: width 0.3s;
}

/* === Focus mode (隱藏次要資訊) === */
body.focus .header__tools,
body.focus .star-jar,
body.focus .section--hide-on-focus { display: none !important; }
body.focus .app { padding-top: 8px; }

/* === Responsive === */
/* Mobile (< 480px) */
@media (max-width: 480px) {
  .app { padding: 14px 12px 60px; }
  .header__title { font-size: calc(15px * var(--font-scale)); }
  .header { padding: 8px 10px; gap: 4px; }
  .header__back { min-width: 40px; min-height: 40px; font-size: 20px; }
  .tool-btn { width: 30px; height: 30px; font-size: 12px; border-radius: 8px; }
  .hero { padding: 16px; }
  .hero__title { font-size: calc(20px * var(--font-scale)); }
  .hero__chip { font-size: calc(14px * var(--font-scale)); padding: 6px 10px; }
  .hero__sentence { font-size: calc(15px * var(--font-scale)); padding: 10px 12px; }
  .section__title { font-size: calc(18px * var(--font-scale)); }
  .btn { font-size: calc(15px * var(--font-scale)); min-height: 48px; padding: 10px 14px; }
  .btn--xl { font-size: calc(18px * var(--font-scale)); min-height: 60px; }
  .flashcard__en, .flashcard__zh { font-size: calc(28px * var(--font-scale)); }
  .flashcard__emoji { font-size: 64px; }
  .quiz-options { grid-template-columns: 1fr; }
  .quiz-prompt { padding: 18px 14px; }
  .quiz-prompt__emoji { font-size: 60px; }
  .quiz-prompt__zh { font-size: calc(24px * var(--font-scale)); }
  .quiz-option { font-size: calc(20px * var(--font-scale)); min-height: 60px; padding: 14px 10px; }
  .sentence-card__en { font-size: calc(20px * var(--font-scale)); }
  .sentence-card__zh { font-size: calc(18px * var(--font-scale)); }
  .write-guide { font-size: 60px; }
  .write-guide--small { font-size: 36px; }
  .cat-card__emoji { font-size: 36px; }
  .cat-card__name { font-size: calc(16px * var(--font-scale)); }
  .star-jar { padding: 10px 14px; }
  .star-jar__icon { font-size: 24px; }
  .star-jar__count { font-size: calc(16px * var(--font-scale)); }
  .profile-card { padding: 20px 16px; }
  .profile-card h1 { font-size: 22px; }
}
/* Tablet (481-1023px) */
@media (min-width: 481px) and (max-width: 1023px) {
  .app { max-width: 720px; }
}
/* Desktop (>= 1024px) */
@media (min-width: 1024px) {
  .app { max-width: 880px; padding: 28px 24px 100px; }
  .hero__title { font-size: calc(32px * var(--font-scale)); }
  .section__title { font-size: calc(24px * var(--font-scale)); }
}

/* === Parent dashboard === */
.kid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.kid-card {
  background: white;
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow);
  text-align: left;
  border: 3px solid transparent;
  transition: transform 0.05s;
  cursor: pointer;
  font-family: inherit;
}
.kid-card:hover { transform: translateY(-2px); border-color: var(--primary-soft); }
.kid-card__name {
  font-size: calc(20px * var(--font-scale));
  font-weight: 900;
  margin-bottom: 6px;
}
.kid-card__stats {
  display: flex;
  gap: 12px;
  font-size: calc(14px * var(--font-scale));
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.kid-card__date {
  font-size: calc(12px * var(--font-scale));
  color: var(--ink-soft);
}
.kid-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}
@media (min-width: 600px) {
  .kid-stats { grid-template-columns: repeat(4, 1fr); }
}
.kid-stats__box {
  background: white;
  border-radius: var(--radius);
  padding: 12px 8px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.04);
  text-align: center;
}
.unit-bars {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.unit-bar {
  background: white;
  border-radius: var(--radius);
  padding: 10px 14px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.04);
}
.unit-bar__head {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: calc(15px * var(--font-scale));
  margin-bottom: 6px;
}
.unit-bar__count {
  margin-left: auto;
  color: var(--ink-soft);
  font-size: calc(13px * var(--font-scale));
}
.progress-bar__fill--warn {
  background: linear-gradient(90deg, var(--danger), var(--warn));
}
.struggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--danger-soft);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.struggle-row__en {
  font-weight: 800;
  font-size: calc(17px * var(--font-scale));
}
.struggle-row__zh {
  color: var(--ink-soft);
  font-size: calc(14px * var(--font-scale));
}
.struggle-row__count {
  margin-left: auto;
  color: var(--danger);
  font-weight: 800;
  font-size: calc(14px * var(--font-scale));
}
.session-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: calc(13px * var(--font-scale));
  box-shadow: 0 2px 0 rgba(0,0,0,0.04);
  flex-wrap: wrap;
}
.session-row__date { color: var(--ink-soft); min-width: 90px; }
.session-row__mode { font-weight: 800; min-width: 60px; }
.session-row__set { color: var(--ink-soft); flex: 1; word-break: break-all; }
.session-row__score {
  font-weight: 900;
  color: var(--primary);
  min-width: 40px;
  text-align: right;
}
.session-row__score--full {
  color: var(--success);
}
.parent-danger {
  background: var(--danger-soft);
  border-radius: var(--radius-lg);
  padding: 16px;
  margin-top: 24px;
}

/* === Animations === */
@keyframes pop {
  0% { transform: scale(0.7); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
.pop { animation: pop 0.3s ease-out; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.shake { animation: shake 0.3s; }

@keyframes confetti-burst {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  100% { transform: scale(2) rotate(360deg); opacity: 0; }
}
.burst {
  position: absolute;
  pointer-events: none;
  font-size: 32px;
  animation: confetti-burst 0.6s ease-out forwards;
}