@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("assets/fonts/fredoka-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("assets/fonts/nunito-latin.woff2") format("woff2");
}

/* The reference palette is shared by desktop and the bounded mobile surface.
   This sheet changes presentation only; content, coordinates and UI state stay
   in the existing lesson, progress and mobile-shell modules. */
:root[data-theme="playful"] {
  color-scheme: light;
  --bg: #fff9f5;
  --surface: #ffffff;
  --surface-soft: #f4f1fb;
  --ink: #2d3748;
  --muted: #64748b;
  --line: #ccd2dc;
  --accent: #166534;
  --accent-soft: #e7faeb;
  --accent-ink: #ffffff;
  --quest-action: #22c55e;
  --quest-action-ink: #2d3748;
  --quest-radius: 24px;
  --quest-radius-small: 14px;
  --paper-shadow: 5px 5px 0 #2d3748;
  --playful-peach: #fdbcb4;
  --playful-peach-soft: #fff0ec;
  --playful-sky: #add8e6;
  --playful-sky-soft: #e3f3fa;
  --playful-lavender: #e6e6fa;
  --playful-mint: #98ff98;
  font-family: "Nunito", "Segoe UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}

:root[data-theme="playful"] :is(button, summary, select) { font-weight: 700; }
:root[data-theme="playful"] :is(button, a, summary, select, input, [tabindex]):focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}
:root[data-theme="playful"] .site-header { border-bottom-color: #dcd8d5; }
:root[data-theme="playful"] .brand {
  font-family: "Fredoka", "Nunito", "Segoe UI", sans-serif;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -.7px;
}
:root[data-theme="playful"] .brand-seal {
  background: var(--playful-peach);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: 2px 2px 0 var(--ink);
}
:root[data-theme="playful"] .journey-nav > .quiet-button { color: var(--ink); }
:root[data-theme="playful"] .journey-nav > #journey-open::after { background: var(--playful-peach); height: 4px; }
:root[data-theme="playful"] #saved-count { background: var(--playful-sky); color: var(--ink); border: 1px solid var(--ink); }
:root[data-theme="playful"] .lesson-title-group h1 {
  color: var(--ink);
  font-family: "Fredoka", "Nunito", "Segoe UI", sans-serif;
  font-weight: 650;
  letter-spacing: -.6px;
}
:root[data-theme="playful"] .lesson-title-group .eyebrow {
  width: fit-content;
  max-width: 100%;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--playful-peach);
  color: var(--ink);
  letter-spacing: 1px;
  font-weight: 900;
}
:root[data-theme="playful"] .lesson-subtitle { color: var(--muted); }
:root[data-theme="playful"] .learning-modes {
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: var(--surface);
  box-shadow: 3px 3px 0 var(--ink);
}
:root[data-theme="playful"] .learning-modes button { color: var(--ink); border-radius: 13px; font-weight: 700; }
:root[data-theme="playful"] .learning-modes button::before { background: var(--playful-peach-soft); color: var(--ink); }
:root[data-theme="playful"] .learning-modes button:hover { background: var(--playful-sky-soft); }
:root[data-theme="playful"] .learning-modes :is(button.is-active, button[aria-current="step"]) {
  background: var(--playful-sky);
  color: var(--ink);
  font-weight: 900;
}
:root[data-theme="playful"] .learning-modes :is(button.is-active, button[aria-current="step"])::before {
  background: var(--ink);
  color: #ffffff;
  box-shadow: none;
}

:root[data-theme="playful"] :is(.scene-figure, .word-card, .collection-panel, .narrator) {
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: var(--paper-shadow);
}
:root[data-theme="playful"] .scene-figure { background: var(--surface); }
:root[data-theme="playful"] .picture-toolbar { color: var(--ink); }
:root[data-theme="playful"] .picture-toolbar > #scene-caption { color: var(--ink); font-weight: 800; }
:root[data-theme="playful"] .zoom-controls button { color: var(--ink); border-radius: 11px; }
:root[data-theme="playful"] .zoom-controls button:hover { background: var(--playful-peach-soft); }
:root[data-theme="playful"] .zoom-controls #zoom-reset { color: var(--ink); }
:root[data-theme="playful"] .scene-viewport { background: var(--bg); border-radius: 15px; }
:root[data-theme="playful"] .scene-figure figcaption { color: var(--muted); }
:root[data-theme="playful"] .hotspot-dot {
  background: #ffffff;
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 2px #ffffffd9;
}
:root[data-theme="playful"] .hotspot:hover .hotspot-dot { background: var(--playful-sky); }
:root[data-theme="playful"] .hotspot.is-discovered .hotspot-dot {
  background: var(--playful-mint);
  border-color: var(--ink);
  box-shadow: 0 0 0 2px #ffffffd9;
}
:root[data-theme="playful"] .hotspot.is-discovered .hotspot-dot::after {
  border-left-color: var(--ink);
  border-bottom-color: var(--ink);
}
:root[data-theme="playful"] .hotspot.active .hotspot-dot {
  background: var(--playful-peach);
  border-color: var(--ink);
  box-shadow: 0 0 0 2px #ffffff;
  outline: 3px solid #ffffffaa;
}
:root[data-theme="playful"] .hotspot-label {
  background: #ffffff;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 11px;
  box-shadow: 2px 2px 0 var(--ink);
}
:root[data-theme="playful"] .hotspot.active .hotspot-label { background: var(--playful-peach); }

:root[data-theme="playful"] .word-card { background: #ffffff; }
:root[data-theme="playful"] .word-card-top {
  background: var(--playful-peach-soft);
  border-radius: 12px;
  padding-inline: 7px;
}
:root[data-theme="playful"] .discovery-status {
  background: var(--playful-peach-soft);
  color: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 8px;
  letter-spacing: .6px;
  font-weight: 900;
}
:root[data-theme="playful"] .discovery-status.is-discovered {
  background: var(--playful-mint);
  color: var(--ink);
  border: 1px solid var(--ink);
  box-shadow: none;
  transform: none;
}
:root[data-theme="playful"] .word-crop { border-color: var(--playful-peach-soft); border-radius: 13px; }
:root[data-theme="playful"] .word-core h2 { color: var(--ink); font-weight: 700; }
:root[data-theme="playful"] .word-pinyin { color: #42526b; }
/* The reference display fonts omit some precomposed pinyin tone letters.
   Learning text uses the system's full language fallback instead. */
:root[data-theme="playful"] :is(.word-pinyin, #example-pinyin, #scene-caption, .hotspot .pin, .saved-detail, .quiz-choice span, #word-dialog-title) {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Noto Sans CJK SC", sans-serif;
}
:root[data-theme="playful"] .word-meaning { color: var(--ink); }
:root[data-theme="playful"] .pronounce-button {
  color: var(--ink);
  background: var(--playful-sky);
  border: 2px solid var(--ink);
}
:root[data-theme="playful"] .pronounce-button:hover { background: #c7e8f2; }
:root[data-theme="playful"] .pronounce-button[aria-pressed="true"] { background: var(--playful-mint); }
:root[data-theme="playful"] .example-preview { background: var(--playful-sky-soft); border-radius: 14px; }
:root[data-theme="playful"] .example-preview :is(#example-zh, #example-en) { color: var(--ink); }
:root[data-theme="playful"] .example-preview #example-zh { font-weight: 700; }
:root[data-theme="playful"] :is(.explanation-button, .primary-button, .play-main, #mobile-explain) {
  color: var(--quest-action-ink);
  background: var(--quest-action);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font-weight: 900;
}
:root[data-theme="playful"] :is(.explanation-button, .primary-button) { border-radius: 14px; }
:root[data-theme="playful"] :is(.explanation-button, .primary-button, .play-main, #mobile-explain):hover { background: #4ade80; filter: none; }
:root[data-theme="playful"] :is(.explanation-button, .play-main, #mobile-explain)[aria-pressed="true"] {
  color: #ffffff;
  background: #166534;
}
:root[data-theme="playful"] .word-card-top .icon-button { color: var(--ink); }
:root[data-theme="playful"] .save-word[aria-pressed="true"] { background: var(--playful-peach); color: var(--ink); }
:root[data-theme="playful"] .word-details > summary { color: #536178; font-weight: 700; }
:root[data-theme="playful"] .detail-content { color: #536178; }
:root[data-theme="playful"] .detail-content strong { color: var(--ink); }
:root[data-theme="playful"] #example-pinyin { color: #42526b; }
:root[data-theme="playful"] .word-navigation .icon-button {
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  background: #ffffff;
}
:root[data-theme="playful"] :is(.word-navigation .icon-button, .icon-button):hover { background: var(--playful-sky-soft); }
:root[data-theme="playful"] .known-button {
  color: var(--ink);
  border: 2px solid var(--ink);
  background: #ffffff;
  border-radius: 12px;
}
:root[data-theme="playful"] .known-button.is-known { background: var(--playful-mint); color: var(--ink); }

:root[data-theme="playful"] .narrator { background: var(--playful-sky-soft); }
:root[data-theme="playful"] .narrator::before,
:root[data-theme="playful"] .narrator::after { display: none; }
:root[data-theme="playful"] .play-main { border-width: 3px; }
:root[data-theme="playful"] .narrator-copy strong { color: var(--ink); font-weight: 900; }
:root[data-theme="playful"] :is(.player-timing, .narration-line) { color: #536178; }
:root[data-theme="playful"] #audio-seek { accent-color: #166534; }
:root[data-theme="playful"] .collection-heading h3 { color: var(--ink); font-weight: 900; }
:root[data-theme="playful"] #collection-count {
  padding: 3px 6px;
  color: var(--ink);
  border-radius: 999px;
  background: #b9f8cc;
  font-size: 11px;
  font-weight: 900;
}
:root[data-theme="playful"] .collection-word {
  background: var(--playful-lavender);
  border: 1px dashed #939bb4;
  border-radius: 12px;
}
:root[data-theme="playful"] .collection-word.is-discovered { background: var(--bg); border: 1px solid #d8d6d2; }
:root[data-theme="playful"] .collection-word:hover { border-color: var(--ink); background: var(--playful-sky-soft); }
:root[data-theme="playful"] .collection-word.is-current { border-color: var(--ink); background: var(--playful-peach-soft); box-shadow: 0 0 0 2px var(--playful-peach); }
:root[data-theme="playful"] .collection-check { color: var(--ink); background: var(--playful-mint); border: 1px solid var(--ink); font-weight: 900; }
:root[data-theme="playful"] .card-mystery { color: #6b7190; font-family: "Fredoka", "Nunito", sans-serif; opacity: 1; }
:root[data-theme="playful"] .word-thumbnail { border-radius: 9px; }
:root[data-theme="playful"] .journey-thumb { border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); }
:root[data-theme="playful"] .journey-stop::after { border-top-color: #aeb8c7; }
:root[data-theme="playful"] .journey-stop:hover { background: var(--playful-sky-soft); }
:root[data-theme="playful"] .journey-stop.is-active .journey-thumb { border-color: var(--ink); box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--playful-peach); }
:root[data-theme="playful"] .stop-badge { color: var(--ink); background: var(--playful-mint); border-color: var(--ink); }
:root[data-theme="playful"] .journey-stop.is-practiced .stop-badge { color: var(--ink); background: var(--playful-mint); }
:root[data-theme="playful"] .journey-stop.is-active .stop-badge { color: var(--ink); background: var(--playful-peach); }
:root[data-theme="playful"] .journey-stop.is-active .journey-stop-copy strong { color: #8b4137; }
:root[data-theme="playful"] .journey-heading h2 { color: var(--ink); font-weight: 900; }
:root[data-theme="playful"] .lesson-bottom button { color: var(--ink); font-weight: 900; }

:root[data-theme="playful"] :is(dialog, .settings-panel) {
  background: #ffffff;
  border: 3px solid var(--ink);
  border-radius: 24px;
  box-shadow: 6px 6px 0 var(--ink);
}
:root[data-theme="playful"] dialog::backdrop { background: #2533488c; backdrop-filter: blur(3px); }
:root[data-theme="playful"] dialog h2 { font-family: "Fredoka", "Nunito", "PingFang SC", sans-serif; color: var(--ink); font-weight: 600; }
:root[data-theme="playful"] dialog .panel-label { color: var(--ink); font-weight: 900; }
:root[data-theme="playful"] .dialog-top .icon-button { color: var(--ink); background: var(--playful-peach); border: 2px solid var(--ink); border-radius: 12px; }
:root[data-theme="playful"] .scene-card { background: var(--bg); border: 2px solid var(--ink); border-radius: 17px; }
:root[data-theme="playful"] .scene-card:hover { background: var(--playful-sky-soft); }
:root[data-theme="playful"] .scene-card.active { background: var(--playful-peach-soft); box-shadow: 3px 3px 0 var(--playful-peach); }
:root[data-theme="playful"] .scene-card-image { border-radius: 11px; }
:root[data-theme="playful"] .card-badge { color: var(--ink); background: var(--playful-mint); border: 1px solid var(--ink); border-radius: 8px; font-weight: 900; }
:root[data-theme="playful"] .card-progress { background: #dce4df; }
:root[data-theme="playful"] .card-progress span { background: #166534; }
:root[data-theme="playful"] .pack-group > h3 { color: var(--ink); font-weight: 900; }
:root[data-theme="playful"] .pack-picker select { border: 2px solid var(--ink); background: var(--playful-sky-soft); box-shadow: 2px 2px 0 var(--ink); font-weight: 800; }
:root[data-theme="playful"] .scene-navigation select { border: 2px solid var(--ink); background: #ffffff; box-shadow: 2px 2px 0 var(--ink); font-weight: 700; }
:root[data-theme="playful"] .quiz-choice { background: var(--bg); color: var(--ink); border: 2px solid var(--ink); border-radius: 16px; }
:root[data-theme="playful"] .quiz-choice.correct { background: var(--playful-mint); border-color: #166534; color: var(--ink); }
:root[data-theme="playful"] .quiz-choice.incorrect { background: var(--playful-peach-soft); border-color: #b53b32; opacity: 1; }
:root[data-theme="playful"] .quiz-feedback { color: #536178; }
:root[data-theme="playful"] .result-score { font-family: "Fredoka", "Nunito", sans-serif; color: #166534; }
:root[data-theme="playful"] .secondary-button { color: var(--ink); background: var(--playful-sky-soft); border: 2px solid var(--ink); border-radius: 14px; }
:root[data-theme="playful"] .wordbook-tab { color: var(--ink); background: #ffffff; border: 2px solid var(--ink); border-radius: 12px; }
:root[data-theme="playful"] .wordbook-tab[aria-selected="true"] { color: var(--ink); background: var(--playful-sky); border-color: var(--ink); }
:root[data-theme="playful"] .discovered-check { color: var(--ink); background: var(--playful-mint); }
:root[data-theme="playful"] .saved-row strong { color: var(--ink); font-weight: 700; }
:root[data-theme="playful"] .settings-menu > summary { color: var(--ink); }
:root[data-theme="playful"] .setting-toggle { border-radius: 10px; color: var(--ink); }
:root[data-theme="playful"] .setting-toggle:hover { background: var(--playful-sky-soft); }
:root[data-theme="playful"] .speed-label select { border: 2px solid var(--ink); border-radius: 11px; background: var(--bg); }
:root[data-theme="playful"] .theme-option { border: 2px solid var(--ink); border-radius: 12px; }
:root[data-theme="playful"] .theme-option[aria-pressed="true"] { color: var(--ink); border-color: var(--ink); background: var(--playful-peach); }
:root[data-theme="playful"] .theme-label > a { color: #42526b; }
:root[data-theme="playful"] .toast { background: var(--ink); color: #ffffff; border: 2px solid #ffffff; box-shadow: 2px 2px 0 var(--ink); }

/* Keep the one-screen height budget: smaller strokes and shadows, with no
   extra padding, rows or decorative bands added to the mobile layout. */
@media (max-width: 600px), (max-width: 900px) and (max-height: 600px) {
  :root[data-theme="playful"] { --paper-shadow: 2px 2px 0 #2d3748; --quest-radius: 17px; }
  :root[data-theme="playful"] .brand-seal { border-radius: 9px; box-shadow: 1px 1px 0 var(--ink); }
  :root[data-theme="playful"] :is(.scene-figure, .word-card, .collection-panel, .narrator, dialog, .settings-panel) {
    border-width: 2px;
    border-radius: 17px;
    box-shadow: 2px 2px 0 var(--ink);
  }
  :root[data-theme="playful"] .learning-modes { border-width: 2px; border-radius: 13px; box-shadow: 1px 1px 0 var(--ink); }
  :root[data-theme="playful"] .learning-modes button { border-radius: 9px; font-size: 12px; }
  :root[data-theme="playful"] .scene-viewport { border-radius: 11px; }
  :root[data-theme="playful"] :is(.play-main, .explanation-button, .primary-button, #mobile-explain) { border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
  :root[data-theme="playful"] .mobile-word-actions button { color: var(--ink); background: #ffffff; border: 2px solid var(--ink); border-radius: 11px; font-size: 12px; }
  :root[data-theme="playful"] .mobile-word-actions :is(#mobile-prev-word, #mobile-next-word) { font-size: 23px; }
  :root[data-theme="playful"] .mobile-word-actions #mobile-explain { color: var(--ink); background: var(--quest-action); font-weight: 900; }
  :root[data-theme="playful"] .mobile-word-actions #mobile-explain[aria-pressed="true"] { color: #ffffff; background: #166534; }
  :root[data-theme="playful"] #mobile-details-open { background: var(--playful-peach-soft); }
  :root[data-theme="playful"] #mobile-collection-open { color: var(--ink); }
  :root[data-theme="playful"] #mobile-collection-count { font-size: 12px; }
  :root[data-theme="playful"] .example-preview { border-radius: 11px; }
  :root[data-theme="playful"] .hotspot-label { border-width: 2px; border-radius: 9px; box-shadow: 1px 1px 0 var(--ink); }
  :root[data-theme="playful"] #mobile-word-content .word-card-top { background: var(--playful-peach-soft); }
  :root[data-theme="playful"] #mobile-word-content .discovery-status { font-size: 12px; }
  :root[data-theme="playful"] #mobile-collection-content .collection-panel { border: 0; border-radius: 0; box-shadow: none; }
  :root[data-theme="playful"] #mobile-collection-content #collection-count { font-size: 12px; }
  :root[data-theme="playful"] #mobile-wordbook-open { color: var(--ink); background: var(--playful-sky); border: 2px solid var(--ink); border-radius: 12px; }
}