/* Direction: 描红作业本 — 毛边纸、朱砂印、米字格、课本封面青绿 */
:root {
  --paper: #f3dba8;
  --sheet: #fff8e6;
  --ink: #1c120c;
  --cinnabar: #c81d25;
  --cinnabar-deep: #8e1218;
  --cloth: #1e4d45;
  --grid: #e7a090;
  --gold: #b8860b;
  --good: #2f6b45;
  --muted: #6d5340;
  --line: #d9b57a;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  color: var(--ink);
  background:
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(200,29,37,.12) 27px 28px),
    linear-gradient(#f6e3b4, var(--paper));
  font-family: "YouYuan", "幼圆", "PingFang SC", "Microsoft YaHei", sans-serif;
}
body { min-height: 100dvh; }
body::before {
  content: "";
  position: fixed;
  left: max(12px, calc(50% - 320px));
  top: 0; bottom: 0;
  width: 3px;
  background: var(--cinnabar);
  opacity: .55;
  pointer-events: none;
}
[x-cloak] { display: none !important; }
button, a, input, select, textarea { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--cinnabar);
  outline-offset: 2px;
}
#app { max-width: 520px; margin: 0 auto; padding: 10px 16px 48px 22px; }
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  position: sticky; top: 0; z-index: 5;
  background: color-mix(in srgb, var(--paper) 88%, white);
  padding: 8px 0 10px;
  border-bottom: 1px dashed var(--line);
}
.brand {
  display: flex; align-items: center; gap: 8px;
  border: 0; background: transparent; color: inherit;
  font-size: 20px; font-weight: 700; letter-spacing: .08em;
}
.brand-mark {
  width: 32px; height: 32px; display: grid; place-items: center;
  border: 2px solid var(--cinnabar); color: var(--cinnabar);
  font-family: "KaiTi", "STKaiti", "Kaiti SC", serif;
  font-size: 22px; line-height: 1;
}
.top-actions { display: flex; align-items: center; gap: 8px; }
.kid-switch, .lock-btn, .home-btn {
  border: 1px solid var(--line); background: var(--sheet); border-radius: 4px;
  padding: 6px 12px; font-size: 16px; display: flex; gap: 6px; align-items: center;
}
.lock-btn { width: 44px; height: 44px; justify-content: center; padding: 0; font-size: 18px; border-radius: 4px; }
.home-btn { font-weight: 700; color: var(--cloth); }
.hold-bar { height: 6px; background: #ead3a0; overflow: hidden; margin-bottom: 8px; }
.hold-fill { height: 100%; background: var(--cinnabar); width: 0; }
.hero { text-align: center; padding: 20px 0 4px; }
.mizi {
  --s: 168px;
  width: var(--s); height: var(--s); margin: 0 auto;
  background:
    linear-gradient(var(--grid), var(--grid)) center / 100% 1px no-repeat,
    linear-gradient(var(--grid), var(--grid)) center / 1px 100% no-repeat,
    linear-gradient(to bottom right, transparent calc(50% - .5px), var(--grid) calc(50% - .5px), var(--grid) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to bottom left, transparent calc(50% - .5px), var(--grid) calc(50% - .5px), var(--grid) calc(50% + .5px), transparent calc(50% + .5px)),
    var(--sheet);
  border: 2px solid var(--cinnabar);
  display: grid; place-items: center;
}
.mizi span, .hanzi {
  font-family: "KaiTi", "STKaiti", "Kaiti SC", serif;
  font-size: 108px; line-height: 1; font-weight: 400; color: var(--ink);
}
.mascot-grid { --s: 132px; margin-bottom: 12px; }
.mascot-grid span { font-size: 92px; color: var(--cinnabar); }
.hanzi-box { margin: 12px auto; }
h1, h2 { margin: 8px 0; font-weight: 700; letter-spacing: .12em; }
h1 { font-size: 32px; }
.muted { color: var(--muted); font-size: 14px; }
.muted a { color: var(--cloth); }
.center { text-align: center; }
.card {
  background: var(--sheet);
  border: 1px solid var(--line);
  border-left: 4px solid var(--cinnabar);
  border-radius: 2px;
  padding: 16px;
  margin: 12px 0;
}
.form label { display: block; margin: 10px 0 6px; font-weight: 700; }
.form input, .form textarea, .form select {
  width: 100%; font-size: 18px; padding: 12px;
  border: 1px solid var(--line); background: #fffdf6; border-radius: 2px;
}
.btn {
  display: block; width: 100%; margin: 12px 0 0; border: 1px solid var(--ink);
  border-radius: 2px; padding: 14px; font-size: 18px; font-weight: 700;
  background: var(--sheet); color: var(--ink);
}
.btn.primary { background: var(--cinnabar); color: #fff8e6; border-color: var(--cinnabar-deep); }
.btn.ghost { background: transparent; }
.btn.danger { background: #f3d0c6; border-color: var(--cinnabar); }
.btn.tiny { width: auto; padding: 8px 12px; margin: 0; }
.btn:disabled { opacity: .55; }
.btn.seal {
  width: 148px; height: 148px; margin: 18px auto;
  border-radius: 50%;
  border: 6px double var(--cinnabar);
  background: transparent;
  color: var(--cinnabar);
  font-size: 28px;
  letter-spacing: .2em;
  box-shadow: inset 0 0 0 3px rgba(200,29,37,.25);
  transform: rotate(-8deg);
}
.err { color: var(--cinnabar); min-height: 1.2em; }
.hint { background: #fff1c2; padding: 8px 12px; border: 1px dashed var(--gold); }
.score-row {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--ink);
  background: var(--sheet);
  margin: 12px 0;
}
.score-row > div { padding: 14px 6px; text-align: center; border-right: 1px solid var(--line); }
.score-row > div:last-child { border-right: 0; }
.score-row .muted { color: var(--muted); }
.big { font-size: 28px; font-weight: 800; font-variant-numeric: tabular-nums; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tile {
  background: var(--sheet); border: 1px solid var(--ink);
  border-radius: 2px; padding: 14px 10px;
  display: flex; align-items: center; gap: 10px; text-align: left;
  font-size: 16px; font-weight: 700;
}
.tile i {
  font-style: normal;
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--cinnabar); color: var(--cinnabar);
  font-family: "KaiTi", "STKaiti", serif; font-size: 22px;
}
.progress {
  display: flex; justify-content: space-between; font-weight: 700;
  margin: 8px 0; padding-bottom: 8px; border-bottom: 1px dashed var(--line);
}
.practice-box {
  background: var(--sheet); border: 1px solid var(--ink);
  padding: 18px 12px 24px; text-align: center;
}
.pinyin { font-size: 26px; color: var(--cinnabar-deep); min-height: 34px; letter-spacing: .2em; }
.hanzi-sm { font-size: 40px; font-family: "KaiTi", "STKaiti", serif; width: 64px; }
.speaker {
  margin: 10px auto; border: 1px solid var(--cloth); background: transparent;
  color: var(--cloth); border-radius: 99px; padding: 8px 18px; font-size: 16px;
}
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.choice {
  font-family: "KaiTi", "STKaiti", "Kaiti SC", serif;
  font-size: 52px; line-height: 1.2; color: var(--ink);
  min-height: 92px;
  border: 2px solid var(--cinnabar); background: var(--sheet); padding: 12px;
}
.choice.good { background: #dcecd8; border-color: var(--good); }
.choice.bad { background: #f6d4ce; border-color: var(--cinnabar); }
.nav-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.nav-row .btn { font-size: 15px; padding: 12px 6px; }
.mastery { margin-top: 12px; display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.mastery button { border: 1px solid var(--line); background: var(--sheet); padding: 8px 12px; font-weight: 700; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid var(--line); background: var(--sheet);
  border-radius: 2px; padding: 6px 12px;
}
.chip.on { background: var(--cinnabar); color: #fff8e6; border-color: var(--cinnabar-deep); }
.chip small { display: block; font-size: 11px; font-weight: 600; opacity: .9; }
.avatar-grid, .shop, .medal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.av { font-size: 32px; background: var(--sheet); border: 1px solid var(--line); padding: 8px; }
.av.on { border-color: var(--cinnabar); box-shadow: inset 0 0 0 2px var(--cinnabar); }
.list-item {
  display: flex; gap: 12px; align-items: center; width: 100%;
  background: var(--sheet); border: 1px solid var(--line); padding: 10px; margin: 8px 0; text-align: left;
}
.medal { text-align: center; background: var(--sheet); border: 1px solid var(--line); padding: 10px 4px; }
.medal.off { filter: grayscale(1); opacity: .4; }
.m-emoji { font-size: 32px; }
.shop-item { background: var(--sheet); border: 1px solid var(--line); padding: 8px; }
.sheet { position: fixed; inset: 0; background: rgba(28,18,12,.4); display: flex; align-items: flex-end; }
.sheet-inner {
  background: var(--sheet); width: 100%; max-width: 520px; margin: 0 auto;
  border-top: 4px solid var(--cinnabar); padding: 16px 16px 32px;
}
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--ink); color: var(--sheet); padding: 10px 16px; z-index: 9;
}
.blank-line { font-size: 36px; font-weight: 800; }
.rank-row {
  display: grid; grid-template-columns: 48px 40px 1fr auto;
  align-items: center; gap: 8px;
  background: var(--sheet); border: 1px solid var(--line);
  padding: 10px 12px; margin: 8px 0;
}
.rank-row.me { border-color: var(--cinnabar); border-width: 2px; }
.rank-row.top { background: #fff1c2; }
.rank-n { font-weight: 800; text-align: center; font-size: 18px; }
.rank-name { font-weight: 800; }
.rank-val { font-weight: 800; color: var(--cinnabar-deep); }
.row { display: flex; align-items: center; gap: 8px; }
.mascot { font-size: 64px; line-height: 1; }
@media (min-width: 800px) {
  #app { max-width: 640px; padding-top: 24px; }
  .mizi { --s: 196px; }
  .hanzi, .mizi span { font-size: 128px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn.seal { transform: none; }
}