/* Shared touch controls and paper palette. See design-system/MASTER.md. */
:root {
  --paper: #faf7f3;
  --surface: #fffdfa;
  --ink-blue: #29263e;
  --muted-ink: #5e586c;
  --paper-line: #e4dce4;
  --action: #433570;
  --action-hover: #342758;
  --lavender: #eee9fa;
  --rose: #fae8eb;
  --star-red: #b52e32;
  --star-outline: #766a80;
  --mint-ink: #245f51;
  --mint-paper: #e9f4ef;
  --touch: 44px;
}
.ui-icon {
  width: 1.16em; height: 1.16em; flex: 0 0 auto; display: inline-block;
  vertical-align: -.18em; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.top {
  background: var(--surface); color: var(--ink-blue); box-shadow: none;
  border-bottom: 1px solid var(--paper-line);
  padding-inline: max(16px, env(safe-area-inset-left)) max(16px, env(safe-area-inset-right));
}
.top .bar {
  max-width: 1120px; min-height: 66px; gap: 10px 16px; padding-block: 8px;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
}
.top .brand {color: var(--ink-blue); font-size: 1.06rem; letter-spacing: .025em; gap: 8px}
.brand-mark {
  display: grid; place-items: center; width: 39px; height: 39px;
  border-radius: 12px; background: var(--action); color: #fff1c5; transform: rotate(-4deg);
}
.brand-mark .ui-icon {width: 23px; height: 23px; fill: currentColor; transform: rotate(4deg)}
.top nav {gap: 3px; margin: 0; display: grid; grid-template-columns: repeat(8,minmax(0,1fr))}
.top nav a {
  justify-content: center; gap: 5px; min-height: var(--touch); padding: 4px 5px;
  color: var(--ink-blue); background: transparent; border: 1px solid transparent;
  border-radius: 10px; box-shadow: none; font-size: .83rem;
}
.top nav .ui-icon {width: 16px; height: 16px; color: #6a5a86}
.top nav a:hover:not([aria-current]) {background: #f2edf8; border-color: #f2edf8}
.top nav a[aria-current] {background: #fff0c4; border-color: #edda9e; color: #543717; box-shadow: none}
.top nav a[aria-current] .ui-icon {color: #6b471d}
.top .status-hud {gap: 6px}
.top .status-hud button,.top .wallet {
  min-height: var(--touch); border: 1px solid var(--paper-line); border-radius: 11px;
  background: #fff; box-shadow: none; color: var(--action);
}
.top .status-hud button {padding: 0; width: var(--touch); font-size: 1.04rem}
.top .status-hud button[aria-pressed=false] {color: var(--muted-ink); background: #f4f1f5}
.top .wallet {background: #faedf0; border-color: #efd4db; color: var(--star-red); padding: 6px 11px; gap: 5px; font-variant-numeric: tabular-nums}
.top .wallet svg {fill: currentColor}
.top :is(a,button):focus-visible,#app :is(a,button,input):focus-visible {outline: 3px solid #634798; outline-offset: 3px}
@media (max-width: 980px) {
  .top .bar {grid-template-columns: minmax(0,1fr) max-content; min-height: 0; row-gap: 3px}
  .top nav {grid-column: 1 / -1; grid-row: 2}
  .top .status-hud {grid-column: 2}
}
@media (max-width: 620px) {
  .top nav {grid-template-columns: repeat(4,minmax(0,1fr)); row-gap: 2px}
  .top nav a {font-size: .78rem}
}
@media (max-width: 369px) {
  .top {padding-inline: max(10px, env(safe-area-inset-left)) max(10px, env(safe-area-inset-right))}
  .top nav a {font-size: .74rem; padding-inline: 1px; gap: 3px}
  .top nav .ui-icon {width: 14px; height: 14px}
}

/* Inner pages share titles, back links and the same action hierarchy. */
body:not([data-screen=home],[data-screen=game]) {
  --white: var(--surface); --line: var(--paper-line); --muted: var(--muted-ink);
  color: var(--ink-blue); background: #faf3e4;
  background-image: linear-gradient(#fffaf036,#fffaf018), url("assets/interior-meadow.webp?v=1");
  background-size: cover; background-position: center bottom; background-attachment: fixed;
}
body:not([data-screen=home]) #app {max-width: 1060px}
#app .back,body[data-screen=game] #app .back {
  min-height: var(--touch); gap: 7px; padding: 5px 12px; color: var(--action);
  background: var(--surface); border: 1px solid #d9cfe1; border-radius: 9px; box-shadow: none;
}
#app .back:hover {background: var(--lavender)}
#app .back .ui-icon {width: 18px; height: 18px}
body:not([data-screen=game]) .screen-title {background: transparent; border: 0; box-shadow: none; border-radius: 0; padding: 8px 0 0; margin: 10px 0 19px}
body:not([data-screen=game]) .screen-title h1 {color: var(--ink-blue); font-weight: 850; letter-spacing: .03em}
body:not([data-screen=game]) .screen-title .kicker {color: var(--muted-ink); letter-spacing: .08em}
body:not([data-screen=home],[data-screen=game]) #app .sheet {
  background: #fffdf7f5; border: 1px solid var(--paper-line); border-radius: 16px;
  box-shadow: 0 2px 0 #30203908;
}
body:not([data-screen=home],[data-screen=game]) #app :is(.primary,.secondary) {
  min-height: var(--touch); padding: 8px 14px; gap: 7px; border: 1px solid transparent;
  border-radius: 9px; box-shadow: none; font-weight: 760;
}
body:not([data-screen=home],[data-screen=game]) #app .primary {background: var(--action); color: #fff}
body:not([data-screen=home],[data-screen=game]) #app .primary:hover:not(:disabled) {background: var(--action-hover)}
body:not([data-screen=home],[data-screen=game]) #app .secondary {background: #fff; color: var(--action); border-color: #d9cfe1}
body:not([data-screen=home],[data-screen=game]) #app .secondary:hover:not(:disabled) {background: var(--lavender)}
body:not([data-screen=home],[data-screen=game]) #app .secondary[aria-pressed=true] {background: var(--lavender); color: var(--action); border-color: #c8b6df}
body:not([data-screen=game]) .quiz .option {background: #f6f1fc; border-color: #ded2ec; border-radius: 10px}
body:not([data-screen=game]) .quiz .option.correct {background: var(--mint-paper); border-color: #75a693; color: var(--mint-ink)}
body:not([data-screen=game]) .quiz .option.wrong {background: var(--rose); border-color: #c88593; color: #842b41}
body:not([data-screen=game]) .quiz .dots .lit {color: var(--star-red)}
body:not([data-screen=game]) .quiz .dots .now {color: var(--action)}
body:not([data-screen=home],[data-screen=game]) .foot {background: transparent; color: var(--muted-ink)}

/* The challenge letter stays centered on a quiet patch of the illustration. */
.read-game .read-glyph {
  position: relative; isolation: isolate; padding: 20px 12px 36px;
  border: 1px solid #d9e3ca;
}
.read-game .read-glyph:not(.review,.timeout) {
  background: linear-gradient(90deg,#f0f6e325,#f6f8e7f2 40% 60%,#f0f6e325),
    #ecf4df url("assets/interior-meadow.webp?v=1") center bottom / cover no-repeat;
}
.read-game .read-correct-stamp {
  position: absolute; inset: auto 12px 9px; margin: auto; width: max-content;
  max-width: calc(100% - 24px); padding: 4px 11px; border-radius: 100px;
  background: #e3f4e7; border: 1px solid #a0c8af; color: #20533d;
  font-size: .84rem; font-weight: 800; line-height: 1.2;
}
@media (hover: none) {
  body:not([data-screen=home],[data-screen=game]) {
    background-attachment: scroll;
    background-position: center top;
    background-size: auto min(100svh, 900px);
    background-repeat: no-repeat;
  }
}

/* 生字岛: an illustrated chapter cover, controls, then the card catalog. */
.bank-hero {
  margin: 12px 0 18px; min-height: clamp(155px, 23vw, 234px);
  display: grid; grid-template-columns: 1fr 43%; align-items: center;
  position: relative; isolation: isolate; overflow: hidden;
  background: #f8e9e9; border: 1px solid #efd7db; border-radius: 17px;
}
.bank-hero-copy {position: relative; z-index: 1; padding: 19px 0 22px clamp(15px,4vw,40px)}
.bank-eyebrow {display: inline-flex; align-items: center; gap: 5px; color: #812d49; font-size: .78rem; font-weight: 800; letter-spacing: .09em}
.bank-hero h1 {font-size: clamp(2.3rem,7vw,4rem); font-weight: 900; letter-spacing: .075em; line-height: 1.05; margin: 8px 0 9px; color: var(--ink-blue)}
.bank-hero p {color: #5d3e53; font-size: clamp(.88rem,2.3vw,1.08rem); font-weight: 650}
.bank-hero-art {
  width: 100%; height: 100%; max-height: 245px; object-fit: contain; object-position: center;
  position: absolute; top: 0; right: 0; width: 48%;
  -webkit-mask-image: radial-gradient(ellipse 78% 75% at 52% 51%, #000 59%, transparent 97%);
  mask-image: radial-gradient(ellipse 78% 75% at 52% 51%, #000 59%, transparent 97%);
}
.bank-panel {padding: clamp(14px, 3vw, 28px)}
.bank-top {align-items: center; gap: 12px 25px}
.bank-tabs {
  display: inline-flex; gap: 3px; flex-wrap: nowrap; padding: 3px;
  border: 1px solid #e8e0eb; border-radius: 11px; background: #f6f1f7;
}
.choice-button,.filter-button {
  background: transparent; color: var(--muted-ink); font-weight: 750; border: 1px solid transparent;
  border-radius: 8px; min-height: var(--touch); padding: 5px 12px;
}
.choice-button[aria-pressed=true] {background: var(--surface); color: var(--action); border-color: #e4d8ee; box-shadow: 0 1px 2px #34275812}
.choice-button:hover,.filter-button:hover {color: var(--action)}
.bank-counts {margin: 5px 0 0 5px; color: var(--muted-ink); font-size: .79rem; font-weight: 650}
.bank-counts span {margin: 0 .23em}
.bank-progress {width: clamp(120px, 32%, 230px); align-self: center}
.bank-progress div {display: flex; justify-content: space-between; gap: 5px; color: var(--muted-ink); font-size: .78rem; font-weight: 700}
.bank-progress b {color: var(--action); font-variant-numeric: tabular-nums}
.bank-progress progress {width: 100%; height: 7px; display: block; margin-top: 6px; appearance: none; border: 0; border-radius: 99px; overflow: hidden; background: #eee8f1; color: var(--action)}
.bank-progress progress::-webkit-progress-bar {background: #eee8f1}
.bank-progress progress::-webkit-progress-value {background: var(--action); border-radius: 99px}
.bank-progress progress::-moz-progress-bar {background: var(--action); border-radius: 99px}
.bank-call {
  gap: 10px 14px; margin: 16px 0 20px; padding: 12px 14px;
  border: 1px solid #e8dff5; border-radius: 12px; background: #f2edf9;
}
.bank-call-copy,.bank-call-actions {display: flex; align-items: center; gap: 9px}
.bank-call-actions {flex-wrap: wrap}
.bank-call-icon {width: 39px; height: 39px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; background: #e6d9f8; color: var(--action); font-size: 1.3rem}
.bank-call h2,.bank-shelf h2 {font-size: 1.12rem; color: var(--ink-blue); font-weight: 850}
.bank-call p,.bank-shelf p {margin: 4px 0 0; color: var(--muted-ink); font-size: .82rem}
.bank-shelf {display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 7px 16px; margin-bottom: 10px}
.bank-shelf p .ui-icon {color: var(--star-red); fill: currentColor}
.bank-filters {margin: 0; gap: 4px}
.filter-button {padding-inline: 9px}
.filter-button[aria-pressed=true] {background: var(--lavender); color: var(--action); border-color: #dacbec}
.bank-grid {grid-template-columns: repeat(auto-fill,minmax(96px,1fr)); gap: 8px}
.bank-grid .glyph {
  min-height: 113px; align-content: center; gap: 4px; padding: 8px 5px;
  background: #fff; color: var(--ink-blue); border: 1px solid #e4dce6; border-radius: 11px;
}
.bank-grid .glyph:hover {border-color: #8c70ac}
.bank-grid .glyph small {color: var(--muted-ink); font-size: .82rem}
.bank-grid .glyph strong {font-size: clamp(1.75rem,4vw,2.25rem); line-height: 1.12; font-weight: 800}
.bank-grid .glyph-state {color: var(--muted-ink); font-size: .72rem; font-weight: 700}
.bank-grid .glyph.write-1,.bank-grid .glyph.write-2 {background: var(--mint-paper); border-color: #b8d7ca}
.bank-grid .glyph.write-1 .glyph-state,.bank-grid .glyph.write-2 .glyph-state {color: var(--mint-ink)}
.bank-grid .glyph.write-3 {background: #fceef0; border-color: #e9c3ce}
.bank-grid .glyph.write-3 .glyph-state {color: #902d47}
.bank-grid .glyph .glyph-pin.done {
  position: absolute; top: 6px; right: 5px; margin: 0; width: 16px; height: 16px; padding: 0;
  display: grid; place-items: center; background: #e2f0f7; color: #245676; border-radius: 5px;
}
.glyph-pin .ui-icon {width: 12px; height: 12px; stroke-width: 2.2}
.glyph-stars,.stroke-stars {display: flex; align-items: center; gap: 3px; color: var(--star-outline)}
.glyph-stars {justify-content: center; font-size: .95rem}
.stroke-stars {gap: 6px; font-size: 1.65rem}
.glyph-stars .ui-icon,.stroke-stars .ui-icon {display: block}
.glyph-stars .earned,.stroke-stars .earned {color: var(--star-red)}
.glyph-stars .earned .ui-icon,.stroke-stars .earned .ui-icon {fill: currentColor}
.bank-pager {margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--paper-line); font-variant-numeric: tabular-nums}

/* The word detail repeats the same typography, colors, and controls. */
.glyph-learn {gap: 12px; grid-template-columns: 1fr 1.1fr}
.glyph-pronunciation,.glyph-blend {background: #f0edf8; border: 1px solid #e5ddf1; border-radius: 12px; padding: 14px}
.glyph-blend {background: #fff4ef; border-color: #efddd4}
.glyph-lesson .activity-label {display: flex; align-items: center; gap: 6px; color: var(--action)}
.glyph-reading,.blend-line {color: var(--ink-blue)}
.glyph-reading span,.blend-line span {background: #e7def4}
.blend-line .part-on {color: #862940; background: #f9d6df; box-shadow: 0 0 0 2px #ebb7c6}
.glyph-writing {border-top: 1px solid var(--paper-line)}
.glyph-writing .grid {border-color: #d4c3d7; border-radius: 10px; background-color: #faf4f7}
@media (max-width: 650px) {.bank-grid {grid-template-columns: repeat(auto-fill,minmax(87px,1fr))}}
@media (max-width: 530px) {
  .bank-call-actions {width: 100%}
  .bank-call-actions > * {flex: 1}
  .bank-hero-art {width: 49%; object-fit: contain}
  .bank-progress {width: 100%}
  .bank-grid {grid-template-columns: repeat(3,minmax(0,1fr))}
  .glyph-learn {grid-template-columns: 1fr}
}
@media (prefers-reduced-motion: no-preference) {
  .top nav a,.bank-grid .glyph,.choice-button,.filter-button {transition: background-color 140ms,border-color 140ms}
}

/* Listening controls keep the replay and answer choices separate. */
.quiz-listen{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.quiz .quiz-listen button{min-height:44px}
.quiz-tone-line{width:28px;height:20px;vertical-align:-3px;margin-inline-end:.32em;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.quiz-tone-compare{margin:14px auto 0;max-width:500px;border:1px solid #ded5e8;border-radius:12px;background:#faf6fd;color:#44366e;padding:0 12px}
.quiz-tone-compare summary{min-height:44px;padding:10px 0;cursor:pointer;font-weight:750}
.quiz-tone-compare>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 0 12px}
.quiz-tone-compare button{font-size:.96rem;justify-content:center}
.quiz-tone-compare .quiz-tone-line{width:20px;margin-inline-end:0}

/* Pinyin reference: each sound is a separate, large touch target. */
.pinyin-memory{margin-bottom:20px}
.pinyin-memory>h2{margin:.25em 0 0;font-size:clamp(1.6rem,4vw,2.2rem)}
.pinyin-memory>p,.memory-card>p{margin:.3em 0 .8em;color:var(--muted-ink)}
.basics-actions{display:flex;gap:8px;flex-wrap:wrap}
.basics-actions :is(button,a){min-height:44px}
.memory-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
body[data-screen=basics] #app .memory-tab{padding-inline:6px;white-space:nowrap}
body[data-screen=basics] #app .memory-tab[aria-selected=true],
body[data-screen=basics] #app .memory-tab[aria-selected=true]:hover{background:var(--action);color:white;border-color:var(--action)}
.memory-panel{margin-top:16px}
.memory-panel[hidden]{display:none}
.memory-card,.memory-basics-panel{padding:clamp(12px,3vw,20px);border:1px solid var(--memory-line);border-radius:16px;background:var(--memory-wash)}
.memory-card{--memory-wash:#f1ebf9;--memory-line:#d9cae8;--memory-ink:#4e3975}
.memory-basics-panel{--memory-wash:#fff8ec;--memory-line:#ecddc7}
@media(max-width:520px){.memory-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.memory-final{--memory-wash:#eaf5ef;--memory-line:#c8dfd0;--memory-ink:#245746}
.memory-whole{--memory-wash:#fff3e4;--memory-line:#ead6b9;--memory-ink:#774c24}
.memory-card h3{margin:0;color:var(--memory-ink);font-size:1.25rem}
.memory-card h3 small{display:inline-block;background:#fff;border-radius:20px;padding:3px 9px;font-size:.74rem;margin-inline-start:4px;vertical-align:2px}
.memory-subgroup{margin-top:13px}
.memory-subgroup h4{margin:0 0 6px;font-size:.93rem;color:var(--memory-ink)}
.memory-tiles{display:flex;flex-wrap:wrap;gap:7px}
.memory-tile{display:grid;place-content:center;text-align:center;min-width:clamp(48px,10vw,64px);min-height:52px;border:1px solid var(--memory-line);border-radius:10px;background:white;color:var(--memory-ink);padding:4px 7px;cursor:pointer}
.memory-tile:hover,.memory-tile:active{box-shadow:inset 0 0 0 2px var(--memory-line)}
.memory-tile.is-playing{background:#fff2d0;box-shadow:inset 0 0 0 2px #c39859}
.memory-tile strong{font-size:1.3rem;line-height:1.05}
.memory-tile small{font-size:.76rem;margin-top:3px}
.memory-card>.memory-note{font-size:.88rem;margin:.85rem 0 0}