/* 霞鹜文楷, self-hosted (fonts/README.md): the same 楷体 on every device, and no request to
   a font service that may be blocked. One regular weight serves every size and weight. */
@font-face {
  font-family: "LXGW WenKai";
  src: url("../fonts/lxgwwenkai-regular.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Theme A, 文房: rice paper, ink and a cinnabar seal, with mineral-pigment accents
     (石绿 for right, 石青 for the selection, 藤黄 for the current idiom). Text colours
     are at least 4.5:1 against the background, in both modes. */
  --bg: #f6f1e7;           /* 宣纸 */
  --surface: #fbf8f1;      /* 素绢 */
  --ink: #1f1b18;          /* 墨 */
  --muted: #6b6157;        /* 淡墨 */
  --line: #e3dacb;         /* 界栏 */
  --accent: #b5382a;       /* 朱砂 */
  --accent-ink: #ffffff;
  --good: #2e6a4e;         /* 石绿 */
  --good-bg: #e3eee6;
  --bad: #b5382a;
  --bad-bg: #f6e3df;
  --select: #2b4e7a;       /* 石青 */
  --blank: #efe8da;
  --mark: #f3d57e;         /* 藤黄 */
  --tianzige: #e8c7bf;     /* the red guide lines of a 田字格 */
  --radius: 6px;
  --shadow: none;
  --kai: "LXGW WenKai", "Kaiti SC", "STKaiti", "KaiTi", "BiauKai", "Noto Serif SC", serif;

  /* Type scale. Sans for the UI; 楷体 for titles and idioms. 楷体 reads about a step larger
     than sans and has one weight, so a kai role sits a step below where a sans one would,
     and hierarchy comes from size alone. Characters that are the task itself (board cells,
     填空's big characters and options, tray tiles, 接龙 choices) keep their own larger sizes.
     Letter-spacing only on titles of four characters or fewer. */
  --fs-2xs: 0.75rem;      /* 12  key numbers, pinyin on chips, icon labels */
  --fs-xs: 0.8125rem;     /* 13  captions, notes, list meta */
  --fs-sm: 0.9375rem;     /* 15  secondary text, pinyin, meanings in lists */
  --fs-body: 1rem;        /* 16  body, buttons */
  --fs-lead: 1.125rem;    /* 18  verdicts, scores, section heads (sans, bold) */
  --kai-word: 1.25rem;    /* 20  an idiom in a list */
  --kai-head: 1.375rem;   /* 22  card titles: 今日纵横, game names, levels */
  --kai-title: 1.5rem;    /* 24  page titles, result titles */
  --kai-display: 1.75rem; /* 28  menu titles (≤4 字) */
  --lh-title: 1.25;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 夜墨 */
    --bg: #17140f;
    --surface: #221d17;
    --ink: #ede6d8;
    --muted: #a89e91;
    --line: #3a332b;
    --accent: #e2705c;
    --accent-ink: #17140f;
    --good: #83c2a0;
    --good-bg: #1f3328;
    --bad: #e2705c;
    --bad-bg: #3b2120;
    --select: #93b3db;
    --blank: #2c261f;
    --mark: #5a4a17;
    --tianzige: #4a3a33;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-body)/1.6 system-ui, -apple-system, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

#app { max-width: 560px; margin: 0 auto; padding: 16px; }

h1 { font-family: var(--kai); font-size: var(--kai-display); font-weight: normal; line-height: var(--lh-title); margin: 0.4em 0 0.1em; letter-spacing: 0.08em; }
.muted { color: var(--muted); }
pre, code { background: var(--blank); border-radius: 6px; padding: 2px 6px; }
pre { padding: 10px; overflow-x: auto; }

button {
  font: inherit;
  color: inherit;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: var(--radius);
  padding: 10px 16px;
  cursor: pointer;
  touch-action: manipulation;
}
button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
button:disabled { cursor: default; }
.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }
.ghost { background: transparent; }
.icon { padding: 6px 12px; font-size: 1.2rem; }

/* menu */
a { color: var(--accent); }
.back { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-size: var(--fs-sm); }
.games { display: grid; gap: 14px; margin-top: 20px; }
.game { display: block; text-decoration: none; color: inherit; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 18px; }
.game b { font-family: var(--kai); font-size: var(--kai-head); font-weight: normal; line-height: var(--lh-title); display: block; margin-bottom: 4px; }
.game .muted { font-size: var(--fs-sm); }
.menu-head { text-align: center; margin-bottom: 16px; }
.menu-head p { margin: 0.4em 0 0; }
.levels { display: grid; gap: 12px; }
.level {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 18px; box-shadow: var(--shadow); text-align: left;
}
.level b { font-size: var(--kai-head); font-family: var(--kai); font-weight: normal; }
.level .muted { font-size: var(--fs-sm); }
.pick { margin: 18px 0 8px; text-align: center; }
.review { width: 100%; margin-top: 12px; border-style: dashed; }
.settings { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: center; margin-top: 24px; }
.settings input { width: 18px; height: 18px; vertical-align: -3px; accent-color: var(--accent); }

/* play */
.bar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bar .score { margin-left: auto; font-weight: 600; }
.streak { color: var(--accent); font-weight: 600; }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 12px 12px; text-align: center;
}
.word { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.ch { display: flex; flex-direction: column; align-items: center; min-width: 64px; }
.ch .py { font-size: var(--fs-sm); color: var(--muted); min-height: 1.5em; }
.ch .hz {
  font-family: var(--kai); font-size: 3.2rem; line-height: 1.25; width: 64px; height: 76px;
  display: flex; align-items: center; justify-content: center; border-radius: 10px;
}
.ch.blank .hz { background-color: var(--surface); border: 1.5px dashed var(--muted); color: var(--muted); }
/* An empty square is a 田字格, the cross-ruled square children learn to write in
   (成语填空's blank, 成语纵横's empty cells). */
.ch.blank:not(.good):not(.bad) .hz, .cell.empty {
  background-image:
    linear-gradient(to right, transparent calc(50% - 0.5px), var(--tianzige) calc(50% - 0.5px), var(--tianzige) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to bottom, transparent calc(50% - 0.5px), var(--tianzige) calc(50% - 0.5px), var(--tianzige) calc(50% + 0.5px), transparent calc(50% + 0.5px));
}
.ch.blank.good .hz { background: var(--good-bg); border-color: var(--good); color: var(--good); border-style: solid; }
.ch.blank.bad .hz { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); border-style: solid; }
.tools { display: flex; justify-content: center; gap: 8px; margin-top: 12px; min-height: 44px; }

.options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.option { font-family: var(--kai); font-size: 2.6rem; padding: 10px 0; box-shadow: var(--shadow); }
.option .key { display: block; font: var(--fs-2xs) system-ui, sans-serif; color: var(--muted); }
.option.good { background: var(--good-bg); border-color: var(--good); color: var(--good); }
.option.bad { background: var(--bad-bg); border-color: var(--bad); color: var(--bad); }

.feedback { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.verdict { font-weight: 700; font-size: var(--fs-lead); margin: 0 0 6px; }
.verdict.good { color: var(--good); }
.verdict.bad { color: var(--bad); }
.meaning, .english, .example { margin: 6px 0; }
.english { color: var(--muted); font-style: italic; }
.example mark { background: var(--mark); color: inherit; border-radius: 3px; padding: 0 2px; }
details { margin: 10px 0; }
summary { cursor: pointer; color: var(--accent); font-weight: 600; }
#next { width: 100%; margin-top: 10px; }

/* summary */
#summary h1 { text-align: center; font-size: var(--kai-title); letter-spacing: 0.02em; }
.sum-score { text-align: center; font-size: var(--fs-lead); font-weight: 600; margin: 0; }
#sum-best { text-align: center; margin-top: 2px; }
.sum-list { padding: 0; list-style: none; display: grid; gap: 8px; }
.sum-list li { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.sum-list .w { font-family: var(--kai); font-size: var(--kai-word); margin-right: 8px; }
.sum-list li > .muted { font-size: var(--fs-sm); }
.sum-list .good { color: var(--good); }
.sum-list .bad { color: var(--bad); }
.sum-list .m { display: block; color: var(--muted); font-size: var(--fs-sm); }
.sum-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 380px) {
  .ch { min-width: 56px; }
  .ch .hz { width: 56px; height: 68px; font-size: 2.7rem; }
  .option { font-size: 2.2rem; }
}

.notice {
  position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 528px; margin: 0 auto; z-index: 10;
  background: var(--ink); color: var(--bg); border-radius: var(--radius); padding: 12px 16px; box-shadow: var(--shadow);
}

/* A link styled as a button. */
a.button {
  display: inline-block; text-align: center; text-decoration: none; color: inherit;
  border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 10px 16px;
}
a.button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }

/* A seal stamp (印章): a teacher's red 优 / 良 / 好, in place of stars. */
.seal {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: var(--accent); color: var(--bg); font-family: var(--kai); border-radius: 4px;
  transform: rotate(-6deg); box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 4px var(--bg);
}
.seal.small { width: 36px; height: 36px; font-size: 1.4rem; }
.seal.big { width: 60px; height: 60px; font-size: 2.4rem; border-radius: 5px; box-shadow: inset 0 0 0 2px var(--accent), inset 0 0 0 5px var(--bg); }