/* HSK Mastery — "learn your first characters" landing flow.
   Reuses site tokens (--paper*, --ink*, --accent, --hairline, --han, --serif-*)
   and .btn / .wrap / .eyebrow / .section-head from styles.css. */

.fc-wrap { max-width: 640px; margin: 0 auto; }

.fc-card,
.fc-say,
.fc-done {
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: clamp(20px, 4vw, 32px);
  box-shadow: 0 1px 0 var(--paper-sunken);
}

/* ---------- HUD: progress bar + XP + streak ---------- */
.fc-hud { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.fc-bar {
  flex: 1; height: 8px; border-radius: 99px;
  background: var(--paper-sunken); overflow: hidden;
}
.fc-bar-fill {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--hsk0), var(--accent));
  transition: width .4s cubic-bezier(.2,.7,.3,1);
}
.fc-stats { display: flex; gap: 12px; font-size: 13.5px; white-space: nowrap; }
.fc-xp { color: var(--accent); font-weight: 700; }
.fc-streak { color: var(--ink-whisper); font-weight: 600; }
.fc-streak.on { color: var(--hsk3); }

/* ---------- "say" narration cards ---------- */
.fc-eyebrow {
  font-family: var(--serif-body); color: var(--accent);
  font-weight: 600; letter-spacing: .02em; margin: 0 0 10px; font-size: 14px;
}
.fc-say-title {
  font-family: var(--serif-display); font-size: clamp(22px, 5vw, 30px);
  color: var(--ink); line-height: 1.25; margin: 0 0 14px;
}
.fc-say-body { font-size: 17px; line-height: 1.6; color: var(--ink); margin: 0 0 24px; }
.fc-say-body b { color: var(--accent-dark); }
.fc-tones { font-family: var(--han); font-size: 19px; color: var(--ink); line-height: 1.9; }

/* ---------- prompts / glosses ---------- */
.fc-prompt {
  font-family: var(--serif-body); color: var(--ink-faded);
  font-size: 15px; margin: 0 0 16px; text-align: center;
}
.fc-gloss {
  font-family: var(--serif-display); font-style: italic;
  color: var(--ink-whisper); text-align: center; margin: 0 0 14px; font-size: 15px;
}

/* ---------- big character / syllable ---------- */
.fc-syllable {
  font-family: var(--han); font-size: clamp(48px, 12vw, 72px);
  color: var(--ink); text-align: center; margin: 6px 0 4px; font-weight: 500;
}
.fc-char { font-family: var(--han); color: var(--ink); line-height: 1; }
.fc-char-lg { font-size: clamp(72px, 20vw, 120px); text-align: center; margin: 4px 0 10px; }

/* ---------- intro card (char + facts + stroke demo) ---------- */
.fc-intro {
  display: grid; grid-template-columns: 200px 1fr; gap: 22px; align-items: center;
  margin-bottom: 18px;
}
@media (max-width: 520px) { .fc-intro { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.fc-facts .fc-char { font-size: clamp(56px, 16vw, 84px); margin-bottom: 4px; }
.fc-py { font-family: var(--serif-display); font-style: italic; font-size: 22px; color: var(--accent); }
.fc-meaning { font-size: 18px; color: var(--ink); margin-top: 2px; }
.fc-comps { margin-top: 14px; }
.fc-comps-h {
  display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-whisper); margin-bottom: 8px;
}
.fc-comp { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.fc-comp-c { font-family: var(--han); font-size: 26px; color: var(--accent-dark); min-width: 32px; }
.fc-comp-l { font-size: 14px; color: var(--ink-faded); line-height: 1.4; }
.fc-note {
  margin-top: 14px; font-size: 14.5px; color: var(--ink-faded); line-height: 1.5;
  padding: 10px 12px; background: var(--paper-sunken); border-radius: 8px;
}

/* ---------- writer stage (hanzi-writer draws its own SVG here) ---------- */
.fc-stage {
  width: 100%; max-width: 240px; aspect-ratio: 1 / 1; margin: 0 auto;
  background:
    linear-gradient(var(--hairline), var(--hairline)) center/100% 1px no-repeat,
    linear-gradient(var(--hairline), var(--hairline)) center/1px 100% no-repeat;
  border: 1.5px solid var(--hairline); border-radius: 10px;
  position: relative;
}
.fc-stage.fc-demo { background: none; border-style: dashed; }
.fc-stage.fc-grid::before,
.fc-stage.fc-grid::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.fc-stage.fc-grid::before {
  background:
    linear-gradient(45deg, transparent calc(50% - .5px), var(--hairline) 50%, transparent calc(50% + .5px)),
    linear-gradient(-45deg, transparent calc(50% - .5px), var(--hairline) 50%, transparent calc(50% + .5px));
  opacity: .5;
}
.fc-writeface { display: grid; grid-template-columns: 130px 1fr; gap: 18px; align-items: center; }
@media (max-width: 520px) { .fc-writeface { grid-template-columns: 1fr; justify-items: center; } }
.fc-facts-sm { text-align: center; }
.fc-char-ref { font-size: 48px; color: var(--ink-whisper); margin-top: 8px; }
.fc-cue { font-size: 14px; color: var(--ink-whisper); font-style: italic; margin-top: 8px; }
.fc-hint { font-size: 13.5px; color: var(--ink-faded); text-align: center; margin: 14px 0 0; }

/* ---------- choices (tone / meaning MCQ) ---------- */
.fc-choices { display: grid; gap: 10px; margin-top: 8px; }
.fc-choice {
  font: inherit; font-size: 16px; text-align: left;
  padding: 14px 16px; border-radius: 10px; cursor: pointer;
  background: var(--paper); border: 1.5px solid var(--hairline); color: var(--ink);
  transition: border-color .15s, background .15s, transform .05s;
}
.fc-choice:hover:not(:disabled) { border-color: var(--accent); }
.fc-choice:active:not(:disabled) { transform: translateY(1px); }
.fc-choice:disabled { cursor: default; }
.fc-choice.correct { border-color: var(--hsk1); background: rgba(74,124,47,.12); color: var(--hsk1); font-weight: 600; }
.fc-choice.wrong { border-color: var(--accent); background: rgba(168,50,42,.10); color: var(--accent-dark); }

/* ---------- pinyin input ---------- */
.fc-inputrow { display: flex; gap: 8px; max-width: 380px; margin: 0 auto; }
.fc-input {
  flex: 1; font: inherit; font-size: 18px; padding: 12px 14px;
  border: 1.5px solid var(--hairline); border-radius: 10px;
  background: var(--paper); color: var(--ink);
}
.fc-input:focus { outline: none; border-color: var(--accent); }

/* ---------- matching game ---------- */
.fc-match { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 380px; margin: 4px auto 0; }
.fc-match-col { display: grid; gap: 10px; }
.fc-tile {
  font: inherit; font-size: 20px; cursor: pointer;
  padding: 14px 10px; border-radius: 10px;
  background: var(--paper); border: 1.5px solid var(--hairline); color: var(--ink);
  transition: border-color .15s, background .15s, opacity .2s, transform .05s;
}
.fc-match-col .fc-tile { font-family: var(--han); }
.fc-tile:hover:not(:disabled):not(.done) { border-color: var(--accent); }
.fc-tile.sel { border-color: var(--accent); background: rgba(168,50,42,.10); box-shadow: 0 0 0 3px rgba(168,50,42,.12); }
.fc-tile.done { opacity: .35; border-style: dashed; cursor: default; }
.fc-tile.miss { border-color: var(--accent); animation: fcShake .3s; }
@keyframes fcShake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

/* ---------- sentence builder ---------- */
.fc-build-answer {
  min-height: 58px; display: flex; flex-wrap: wrap; gap: 8px; align-content: center;
  padding: 10px; margin: 0 0 14px; border-radius: 10px;
  border: 1.5px dashed var(--hairline); background: var(--paper-sunken);
}
.fc-build-pool { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 4px; }
.fc-build-pool .fc-tile, .fc-build-answer .fc-tile { font-family: var(--han); font-size: 22px; padding: 10px 14px; }
.fc-tile:disabled { opacity: .3; }
.fc-tile.picked { background: var(--paper-raised); border-color: var(--accent); }

/* ---------- actions ---------- */
.fc-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

/* ---------- verdict footer ---------- */
.fc-verdict {
  margin-top: 18px; padding: 16px; border-radius: 12px; text-align: center;
  border: 1px solid var(--hairline); background: var(--paper);
  opacity: 0; transform: translateY(6px); transition: opacity .25s, transform .25s;
}
.fc-verdict.show { opacity: 1; transform: none; }
.fc-verdict.ok { background: rgba(74,124,47,.08); border-color: rgba(74,124,47,.4); }
.fc-verdict.no { background: rgba(168,50,42,.06); border-color: rgba(168,50,42,.35); }
.fc-verdict-head { font-weight: 700; font-size: 17px; margin: 0 0 6px; color: var(--ink); }
.fc-verdict.ok .fc-verdict-head { color: var(--hsk1); }
.fc-verdict.no .fc-verdict-head { color: var(--accent-dark); }
.fc-verdict-body { font-size: 14.5px; color: var(--ink-faded); line-height: 1.5; margin: 0 0 14px; }
.fc-acc { font-family: var(--serif-display); font-style: italic; color: var(--hsk3); font-size: 15px; }

/* ---------- done card ---------- */
.fc-done { text-align: center; }
.fc-done-badge {
  font-family: var(--han); font-size: 40px; color: var(--accent);
  margin: 0 0 8px; letter-spacing: .1em;
}
.fc-done-title { font-family: var(--serif-display); font-size: clamp(24px, 5vw, 32px); color: var(--ink); margin: 0 0 12px; }
.fc-done-stats { display: flex; gap: 18px; justify-content: center; margin: 0 0 16px; font-weight: 600; color: var(--ink-faded); }
.fc-done-body { font-size: 16px; line-height: 1.6; color: var(--ink); max-width: 460px; margin: 0 auto 22px; }
.fc-done-actions { margin-top: 0; }
.fc-fallback { text-align: center; color: var(--ink-faded); padding: 30px; }