/* ===== HOME ===== */
.hero {
  display: grid; grid-template-columns: 7fr 5fr; gap: var(--s-xxl);
  padding: var(--s-section) 0 var(--s-xxl);
  align-items: center;
}
.hero-h1 { margin: 0 0 var(--s-md); }
.hero-h1 .han { color: var(--c-ink); display: block; }
.hero-h1 .lat { display: block; color: var(--c-ink); }
.hero-sub { color: var(--c-body); font-size: clamp(16px, 1.5vw, 18px); max-width: 56ch; margin: 0 0 var(--s-xl); }
.hero-pinyin {
  display: inline-block; font-size: 18px; color: var(--c-muted);
  letter-spacing: .04em; margin-bottom: var(--s-sm);
}
.hero-actions { display: flex; gap: var(--s-sm); flex-wrap: wrap; }
.hero-art {
  position: relative; aspect-ratio: 1 / 1;
  background: var(--c-surface-soft);
  border-radius: var(--r-xl);
  overflow: hidden;
  display: grid; place-items: center;
  isolation: isolate;
}
.blob { position: absolute; border-radius: 50%; filter: blur(0.5px); }
.blob.b1 { inset: -8% -10% auto auto; width: 65%; aspect-ratio: 1; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, white 50%, var(--c-pink)), var(--c-pink) 75%); }
.blob.b2 { inset: auto auto -10% -8%; width: 55%; aspect-ratio: 1; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, white 50%, var(--c-lavender)), var(--c-lavender) 75%); }
.blob.b3 { inset: 30% auto auto 25%; width: 28%; aspect-ratio: 1; background: radial-gradient(circle at 30% 30%, color-mix(in srgb, white 60%, var(--c-ochre)), var(--c-ochre) 80%); }
.hero-art .han-jumbo {
  position: relative; z-index: 2;
  font-family: var(--f-han); font-weight: 700;
  font-size: clamp(140px, 22vw, 240px);
  color: var(--c-ink); line-height: 1;
  text-shadow: 0 4px 0 color-mix(in srgb, var(--c-ink) 8%, transparent);
}
.hero-art .han-pinyin {
  position: absolute; bottom: 12%; left: 50%; transform: translateX(-50%);
  z-index: 2; font-size: clamp(18px, 1.6vw, 22px); color: var(--c-ink); letter-spacing: .04em;
  background: var(--c-canvas); padding: 6px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--c-hairline);
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: var(--s-xl); gap: var(--s-xl); }
  .hero-art { aspect-ratio: 4 / 3; }
}

.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-md); margin: 0 0 var(--s-lg); }
.section { padding: var(--s-xxl) 0; }

.modes-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-lg);
}
@media (max-width: 1000px) { .modes-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .modes-grid { grid-template-columns: 1fr; } }

.mode-card {
  position: relative; isolation: isolate;
  border-radius: var(--r-xl);
  padding: var(--s-xl);
  min-height: 260px;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-md);
  text-decoration: none;
  overflow: hidden;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out);
  border: 1px solid transparent;
}
.mode-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -16px rgba(10,10,10,.18); }
.mode-card .mode-title { font-family: var(--f-display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; }
.mode-card .mode-han { font-family: var(--f-han); font-size: 14px; font-weight: 500; opacity: .8; margin-bottom: 4px; display: block; }
.mode-card .mode-desc { font-size: 14px; line-height: 1.55; opacity: .85; }
.mode-card .mode-cta { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.mode-card .mode-cta::after { content: "→"; transition: transform .2s var(--ease-out); }
.mode-card:hover .mode-cta::after { transform: translateX(4px); }
.mode-card .mode-deco { position: absolute; right: -20px; bottom: -30px; font-family: var(--f-han); font-weight: 700; font-size: 220px; line-height: 1; opacity: .12; pointer-events: none; user-select: none; }

.mode-pink { background: var(--c-pink); color: var(--c-on-primary); }
.mode-teal { background: var(--c-teal); color: var(--c-on-dark); }
.mode-lavender { background: var(--c-lavender); color: var(--c-ink); }
.mode-peach { background: var(--c-peach); color: var(--c-ink); }
.mode-ochre { background: var(--c-ochre); color: var(--c-ink); }
.mode-cream { background: var(--c-surface-card); color: var(--c-ink); border-color: var(--c-hairline); }

.stats-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-md); }
@media (max-width: 760px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }
.stat-card {
  background: var(--c-canvas); border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg); padding: var(--s-lg);
}
.stat-num { font-family: var(--f-display); font-weight: 600; font-size: 36px; line-height: 1; letter-spacing: -0.03em; }
.stat-label { font-size: 13px; color: var(--c-muted); margin-top: 4px; letter-spacing: .04em; text-transform: uppercase; }

.deck-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-md); }
.deck-card {
  background: var(--c-canvas); border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg); padding: var(--s-lg);
  text-decoration: none; color: var(--c-ink);
  display: flex; flex-direction: column; gap: var(--s-sm);
  transition: transform .2s var(--ease-out), border-color .2s;
}
.deck-card:hover { transform: translateY(-2px); border-color: var(--c-ink); }
.deck-card .deck-han { font-family: var(--f-han); font-size: 24px; font-weight: 600; }
.deck-card .deck-en { color: var(--c-muted); font-size: 14px; }
.deck-card .deck-meta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; font-size: 13px; color: var(--c-muted); }
.deck-progress { height: 6px; background: var(--c-surface-card); border-radius: var(--r-pill); overflow: hidden; }
.deck-progress > span { display: block; height: 100%; background: var(--c-primary); transition: width .4s var(--ease-out); }

/* ===== Common mode shell ===== */
.mode-shell { padding: var(--s-xxl) 0 var(--s-xl); }
.mode-head { display: flex; align-items: end; justify-content: space-between; gap: var(--s-md); margin-bottom: var(--s-xl); flex-wrap: wrap; }
.mode-head h1 { margin: 0; }
.mode-controls { display: flex; gap: var(--s-xs); flex-wrap: wrap; align-items: center; }
.deck-select { background: var(--c-canvas); border: 1px solid var(--c-hairline); border-radius: var(--r-md); height: 40px; padding: 0 12px; font: inherit; }
.progress-track { height: 6px; background: var(--c-surface-card); border-radius: var(--r-pill); overflow: hidden; margin-bottom: var(--s-xl); }
.progress-track > span { display: block; height: 100%; background: var(--c-primary); transition: width .4s var(--ease-out); }

/* ===== Flashcards ===== */
.fc-stage { max-width: 720px; margin: 0 auto; }
.fc-card {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl);
  cursor: pointer;
  user-select: none;
  background: var(--c-surface-card);
  display: grid; place-items: center; padding: var(--s-xl);
  text-align: center;
  overflow: hidden;
  transition: background .35s var(--ease-out);
}
.fc-card.reveal-2 { background: var(--c-teal); color: var(--c-on-dark); }
.fc-content { display: flex; flex-direction: column; align-items: center; gap: var(--s-sm); }
.fc-han { font-family: var(--f-han); font-weight: 700; font-size: clamp(72px, 14vw, 160px); line-height: 1; letter-spacing: 0; }
.fc-pinyin { font-size: clamp(18px, 2.2vw, 26px); color: var(--c-muted); letter-spacing: .04em; }
.fc-card.reveal-2 .fc-pinyin { color: color-mix(in srgb, var(--c-on-dark) 80%, transparent); }
.fc-en { font-family: var(--f-display); font-weight: 600; font-size: clamp(32px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.02em; max-width: 90%; }
.fc-reveal { opacity: 0; transform: translateY(6px); transition: opacity .25s var(--ease-out), transform .25s var(--ease-out); }
.fc-card.reveal-1 .fc-pinyin,
.fc-card.reveal-2 .fc-pinyin,
.fc-card.reveal-2 .fc-en { opacity: 1; transform: none; }
.fc-meta { position: absolute; top: var(--s-md); left: var(--s-md); display: flex; gap: 6px; }
.fc-listen { position: absolute; top: var(--s-md); right: var(--s-md); }
.fc-hint { position: absolute; bottom: var(--s-md); left: 0; right: 0; text-align: center; font-size: 12px; opacity: .55; }
.fc-card.reveal-2 .fc-hint { color: color-mix(in srgb, var(--c-on-dark) 70%, transparent); opacity: .8; }

/* Example sentence (renders below the card when w.s is present) */
.fc-sentence {
  margin-top: var(--s-lg);
  background: var(--c-surface-soft);
  border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg);
  padding: var(--s-lg) var(--s-xl);
  text-align: center;
}
.fc-sentence-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-sm); }
.fc-sentence-han { font-family: var(--f-han); font-weight: 600; font-size: clamp(22px, 3vw, 30px); line-height: 1.3; }
.fc-sentence-pinyin { font-size: 15px; color: var(--c-muted); letter-spacing: .03em; margin-top: 4px; }
.fc-sentence-en { font-size: 15px; color: var(--c-body); margin-top: 4px; }
.fc-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-sm); margin-top: var(--s-lg); max-width: 720px; margin-left: auto; margin-right: auto; }
.fc-actions .btn { width: 100%; }
.fc-counter { font-size: 13px; color: var(--c-muted); }
.btn-again { background: color-mix(in srgb, var(--c-error) 90%, white); color: white; }
.btn-hard { background: color-mix(in srgb, var(--c-warning) 88%, white); color: var(--c-ink); }
.btn-good { background: color-mix(in srgb, var(--c-mint) 70%, white); color: var(--c-ink); }
.btn-easy { background: color-mix(in srgb, var(--c-success) 90%, white); color: white; }
@media (max-width: 600px) {
  .fc-actions { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Quiz ===== */
.quiz-stage { max-width: 760px; margin: 0 auto; }
.quiz-prompt {
  background: var(--c-surface-card); border-radius: var(--r-xl);
  padding: var(--s-xxl) var(--s-xl); text-align: center;
  margin-bottom: var(--s-lg);
}
.quiz-han { font-family: var(--f-han); font-weight: 700; font-size: clamp(64px, 12vw, 120px); line-height: 1; }
.quiz-pinyin { font-size: 18px; color: var(--c-muted); margin-top: var(--s-sm); letter-spacing: .04em; }
.quiz-en { font-family: var(--f-display); font-weight: 600; font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.02em; }
.quiz-eyebrow { display: block; font-size: 12px; color: var(--c-muted); letter-spacing: .15em; text-transform: uppercase; margin-bottom: var(--s-md); }
.quiz-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-sm); }
.quiz-opt {
  background: var(--c-canvas); border: 1px solid var(--c-hairline);
  border-radius: var(--r-lg); padding: var(--s-lg);
  text-align: left; font: inherit;
  cursor: pointer; transition: border-color .15s, background .15s, transform .12s var(--ease-out);
  display: flex; flex-direction: column; gap: 4px;
}
.quiz-opt:hover { border-color: var(--c-ink); background: var(--c-canvas); }
.quiz-opt:active { transform: translateY(1px); }
.quiz-opt .opt-han { font-family: var(--f-han); font-size: 24px; font-weight: 600; }
.quiz-opt .opt-pinyin { font-size: 12px; color: var(--c-muted); }
.quiz-opt .opt-en { font-size: 16px; font-weight: 500; }
.quiz-opt.correct { background: color-mix(in srgb, var(--c-success) 18%, white); border-color: var(--c-success); }
.quiz-opt.wrong   { background: color-mix(in srgb, var(--c-error) 14%, white); border-color: var(--c-error); }
.quiz-opt:disabled { cursor: default; }
.quiz-listen { display: inline-flex; gap: 6px; align-items: center; margin: 0 auto; }
@media (max-width: 600px) { .quiz-options { grid-template-columns: 1fr; } }

/* ===== Tone trainer ===== */
.tone-stage { max-width: 720px; margin: 0 auto; }
.tone-card {
  background: var(--c-lavender); color: var(--c-ink);
  border-radius: var(--r-xl); padding: var(--s-xxl);
  text-align: center; margin-bottom: var(--s-lg);
  position: relative; overflow: hidden;
}
.tone-han { font-family: var(--f-han); font-weight: 700; font-size: clamp(72px, 14vw, 160px); line-height: 1; }
.tone-syllable-row { display: inline-flex; gap: var(--s-md); align-items: center; justify-content: center; margin-top: var(--s-sm); }
.tone-syllable { font-size: 20px; color: var(--c-ink); opacity: .75; letter-spacing: .04em; }
.tone-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-xs); margin-top: var(--s-lg); }
.tone-btn {
  height: 88px; border-radius: var(--r-lg); border: 0;
  display: grid; place-items: center; gap: 4px;
  font: inherit; font-weight: 600; cursor: pointer;
  transition: transform .12s var(--ease-out), background .15s;
  background: var(--c-canvas); color: var(--c-ink);
  border: 1px solid var(--c-hairline);
}
.tone-btn:hover { transform: translateY(-2px); }
.tone-btn .tone-shape { font-size: 28px; line-height: 1; }
.tone-btn .tone-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.tone-btn[data-tone="1"]:hover { background: color-mix(in srgb, var(--tone-1) 18%, white); border-color: var(--tone-1); }
.tone-btn[data-tone="2"]:hover { background: color-mix(in srgb, var(--tone-2) 18%, white); border-color: var(--tone-2); }
.tone-btn[data-tone="3"]:hover { background: color-mix(in srgb, var(--tone-3) 18%, white); border-color: var(--tone-3); }
.tone-btn[data-tone="4"]:hover { background: color-mix(in srgb, var(--tone-4) 18%, white); border-color: var(--tone-4); }
.tone-btn[data-tone="5"]:hover { background: var(--c-surface-card); }
.tone-btn.correct { background: color-mix(in srgb, var(--c-success) 22%, white); border-color: var(--c-success); }
.tone-btn.wrong   { background: color-mix(in srgb, var(--c-error) 18%, white); border-color: var(--c-error); }
@media (max-width: 600px) { .tone-options { grid-template-columns: repeat(5, 1fr); } .tone-btn { height: 72px; } .tone-btn .tone-shape { font-size: 22px; } .tone-btn .tone-label { font-size: 10px; } }

/* ===== Match ===== */
.match-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-sm); max-width: 960px; margin: 0 auto; }
@media (max-width: 700px) { .match-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px) { .match-grid { grid-template-columns: repeat(2, 1fr); } }
.match-tile {
  aspect-ratio: 1; border-radius: var(--r-lg); border: 1px solid var(--c-hairline);
  background: var(--c-canvas);
  display: grid; place-items: center; padding: var(--s-md);
  cursor: pointer; font: inherit;
  transition: transform .12s var(--ease-out), background .15s, border-color .15s;
  text-align: center;
}
.match-tile:hover { transform: translateY(-2px); border-color: var(--c-ink); }
.match-tile.selected { background: var(--c-surface-card); border-color: var(--c-ink); transform: translateY(-2px); }
.match-tile.matched {
  background: color-mix(in srgb, var(--c-mint) 35%, white);
  border-color: var(--c-mint);
  cursor: default; pointer-events: none;
  animation: pop .35s var(--ease-out);
}
.match-tile.miss {
  background: color-mix(in srgb, var(--c-error) 14%, white);
  border-color: var(--c-error);
  animation: shake .3s var(--ease-out);
}
.match-tile .han { font-family: var(--f-han); font-weight: 600; font-size: clamp(20px, 2.6vw, 30px); }
.match-tile .en { font-weight: 500; font-size: clamp(13px, 1.4vw, 16px); }
@keyframes shake { 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(3px)} 30%,50%,70%{transform:translateX(-5px)} 40%,60%{transform:translateX(5px)} }
.match-info { display: flex; justify-content: center; gap: var(--s-lg); margin-bottom: var(--s-lg); }
.match-info .pill .num { font-family: var(--f-display); font-weight: 600; }

/* ===== Typing ===== */
.type-stage { max-width: 720px; margin: 0 auto; }
.type-card {
  background: var(--c-ochre); color: var(--c-ink);
  border-radius: var(--r-xl); padding: var(--s-xxl) var(--s-xl);
  text-align: center; margin-bottom: var(--s-lg);
  position: relative; overflow: hidden;
}
.type-han { font-family: var(--f-han); font-weight: 700; font-size: clamp(72px, 14vw, 160px); line-height: 1; }
.type-en  { font-family: var(--f-display); font-weight: 600; font-size: clamp(20px, 2.4vw, 26px); margin-top: var(--s-sm); letter-spacing: -0.01em; }
.type-input {
  width: 100%; max-width: 480px;
  height: 64px; padding: 0 var(--s-lg);
  background: var(--c-canvas); border: 2px solid var(--c-hairline);
  border-radius: var(--r-lg); font: 600 24px var(--f-body); text-align: center;
  letter-spacing: .04em; color: var(--c-ink);
  margin: 0 auto; display: block;
}
.type-input:focus { outline: none; border-color: var(--c-ink); }
.type-input.correct { border-color: var(--c-success); background: color-mix(in srgb, var(--c-success) 12%, white); }
.type-input.wrong   { border-color: var(--c-error); background: color-mix(in srgb, var(--c-error) 10%, white); animation: shake .3s var(--ease-out); }
.type-hint { display: flex; justify-content: center; gap: var(--s-md); margin-top: var(--s-md); font-size: 13px; color: var(--c-muted); }
.type-hint kbd { background: var(--c-surface-card); border: 1px solid var(--c-hairline); padding: 2px 6px; border-radius: var(--r-sm); font: inherit; font-size: 12px; }

/* === Empty state, finished === */
.complete-card {
  max-width: 560px; margin: 0 auto; text-align: center;
  background: var(--c-surface-card); border-radius: var(--r-xl);
  padding: var(--s-xxl); animation: pop .5s var(--ease-out);
}
.complete-emoji { font-family: var(--f-han); font-weight: 700; font-size: 96px; line-height: 1; }
.complete-title { font-family: var(--f-display); font-size: 40px; font-weight: 600; letter-spacing: -0.03em; margin: var(--s-sm) 0; }
.complete-stats { display: flex; justify-content: center; gap: var(--s-xl); margin: var(--s-lg) 0; }
.complete-stats .num { font-family: var(--f-display); font-weight: 600; font-size: 32px; line-height: 1; }
.complete-stats .lbl { font-size: 12px; color: var(--c-muted); letter-spacing: .1em; text-transform: uppercase; }