/* =============================================================
   chess-book-ai · 「民國棋譜 × 工程紀錄」
   ---------------------------------------------------------------
   Editorial reissue of a Chinese-chess opening manual fused with a
   precision analytical instrument. Serif gravitas + monospace
   engine ledger + vermillion seal accents on rice-paper cream.

   DOM hooks below are load-bearing — see site_builder/assets/board.js
   and site_builder/render_site.py before renaming anything.
   ============================================================= */

/* ---------- design tokens (琥珀 / amber — default) ---------- */
:root {
  /* Editorial palette */
  --ink:        #1d150b;
  --ink-soft:   #4a3c28;
  --ink-faint:  #8b7a5e;
  --rule:       rgba(29, 21, 11, 0.18);
  --rule-soft:  rgba(29, 21, 11, 0.08);
  --paper:      #f3ead5;
  --paper-2:    #ebe0c5;
  --paper-3:    #fbf4e1;
  --vermillion: #b9221c;          /* 朱砂 — red side / seal stamps */
  --vermillion-bright: #d63a32;
  --vermillion-soft:   #f4d8d4;
  --jade:       #2b6a5f;          /* 青瓷 — engine cool accent */
  --jade-soft:  #d3e6e1;
  --amber:      #b07a17;          /* 銅黃 — annote */
  --amber-soft: #f6e7c2;
  --brass:      #806015;
  --smoke:      #c7773a;          /* trap underline */
  --smoke-soft: #fbe7d4;

  /* Semantic aliases (theme-overridable). Components reference ONLY
     these tokens, not the raw palette above — so re-skinning the page
     is a matter of re-binding this block in :root[data-theme=...] */
  --bg:            var(--paper);
  --bg-elev:       var(--paper-3);
  --bg-sunken:     var(--paper-2);
  --fg:            var(--ink);
  --fg-soft:       var(--ink-soft);
  --fg-faint:      var(--ink-faint);
  --line:          var(--rule);
  --line-soft:     var(--rule-soft);
  --accent:        var(--vermillion);
  --accent-bright: var(--vermillion-bright);
  --accent-soft:   var(--vermillion-soft);
  --cool:          var(--jade);
  --cool-soft:     var(--jade-soft);
  --note:          var(--amber);
  --note-soft:     var(--amber-soft);
  --note-deep:     var(--brass);
  --warn:          var(--smoke);
  --warn-soft:     var(--smoke-soft);

  --red:           var(--vermillion);
  --black:         #14110c;
  --row-red:       rgba(185, 34, 28, 0.045);
  --row-black:     rgba(20, 17, 12, 0.045);
  --hl:            #f9e6a2;
  --dim:           var(--fg-faint);
  --board-bg:      #e6c995;
  --board-grid:    #4a2e10;

  /* Geometry */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 36px;
  --space-7: 56px;
  --radius-sm: 2px;
  --radius-md: 3px;
  --radius-lg: 4px;
  --shadow-paper: 0 1px 0 rgba(29,21,11,0.05), 0 18px 40px -28px rgba(29,21,11,0.35);
  --shadow-lift:  0 2px 4px rgba(29,21,11,0.06), 0 8px 24px -10px rgba(29,21,11,0.18);
  --shadow-pop:   0 1px 2px rgba(29,21,11,0.10), 0 4px 14px rgba(29,21,11,0.10);
  --duration-fast: 110ms;
  --duration-base: 200ms;
  --duration-slow: 420ms;
  --easing:        cubic-bezier(0.32, 0.72, 0, 1);

  /* Type system. CJK-first ordering: Noto Serif TC supplies both Han and
     Latin glyphs in harmonized strokes, avoiding the per-character fallback
     mismatch that happens when a Latin serif is listed first. */
  --font-display: "Noto Serif TC", "Songti TC", "PMingLiU", "Source Han Serif TC", serif;
  --font-serif:   "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --font-sans:    "IBM Plex Sans TC", "PingFang TC", "Microsoft JhengHei", "Noto Sans TC", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Consolas, "Cascadia Mono", monospace;
}

/* 翡翠 — emerald: a quieter sage-and-copper variant */
:root[data-theme="emerald"] {
  --paper:      #ecefe4;
  --paper-2:    #dee4d0;
  --paper-3:    #f6f8ef;
  --ink:        #1a221b;
  --ink-soft:   #38473a;
  --ink-faint:  #76876f;
  --rule:       rgba(26, 34, 27, 0.18);
  --rule-soft:  rgba(26, 34, 27, 0.08);
  --bg:         var(--paper);
  --bg-elev:    var(--paper-3);
  --bg-sunken:  var(--paper-2);
  --fg:         var(--ink);
  --fg-soft:    var(--ink-soft);
  --fg-faint:   var(--ink-faint);
  --line:       var(--rule);
  --line-soft:  var(--rule-soft);
  --accent:        #a8442a;       /* 銅紅 */
  --accent-bright: #c0532f;
  --accent-soft:   #f1d6c8;
  --cool:        #1f5e4d;          /* deep jade */
  --cool-soft:   #cfe2da;
  --note:        #946812;
  --note-soft:   #ecdaa6;
  --note-deep:   #6d4d0c;
  --warn:        #b56120;
  --warn-soft:   #f1d9c1;
  --row-red:     rgba(168, 68, 42, 0.05);
  --row-black:   rgba(20, 26, 20, 0.04);
  --hl:          #e7d99a;
  --board-bg:    #d7d2a2;
}

/* 墨拓 — ink rubbing: a scholar's late-night reading room. Warm soot-black
   ground, parchment text, and four accents drawn from traditional Chinese
   mineral pigments: 銀朱 vermillion / 花青 indigo / 藤黃 gamboge brass /
   赭石 ochre rust. All accents low-chroma so none feels neon against the dim
   surround; hue families are well-separated (red / blue / gold / rust) so
   the four don't compete. */
:root[data-theme="ink"] {
  /* Backgrounds — warm 鬆煙墨 black with subtle brown undertone */
  --paper:      #15120c;
  --paper-2:    #1c1811;
  --paper-3:    #211d15;
  /* Foreground — brightened parchment scale for legibility on the dark
     ground. Original amber-theme values were too muted/yellow once placed
     on a near-black background. */
  --ink:        #f2e8cc;   /* primary text — high contrast */
  --ink-soft:   #d2c69e;   /* secondary text (engine output, deltas) */
  --ink-faint:  #948a6d;   /* labels, codes, dim metadata */
  --rule:       rgba(242, 232, 204, 0.16);
  --rule-soft:  rgba(242, 232, 204, 0.08);
  --bg:         var(--paper);
  --bg-elev:    var(--paper-3);
  --bg-sunken:  var(--paper-2);
  --fg:         var(--ink);
  --fg-soft:    var(--ink-soft);
  --fg-faint:   var(--ink-faint);
  --line:       var(--rule);
  --line-soft:  var(--rule-soft);
  /* 銀朱 — deep vermillion, brick-leaning, not neon */
  --accent:        #cd4d3b;
  --accent-bright: #e26054;
  --accent-soft:   rgba(205, 77, 59, 0.16);
  /* 花青 — faded indigo blue; cool but harmonious with warm ground */
  --cool:        #7ea4ce;
  --cool-soft:   rgba(126, 164, 206, 0.15);
  /* 藤黃 — muted brass gold for annotations */
  --note:        #c8a05a;
  --note-soft:   rgba(200, 160, 90, 0.15);
  --note-deep:   #ddb87c;
  /* 赭石 — rust ochre for traps; distinct hue from both red and gold */
  --warn:        #c07a48;
  --warn-soft:   rgba(192, 122, 72, 0.18);
  --row-red:     rgba(205, 77, 59, 0.07);
  --row-black:   rgba(242, 232, 204, 0.035);
  --hl:          rgba(221, 184, 124, 0.20);
  /* Board — warm walnut, deeper than amber theme so pieces read against it */
  --board-bg:    #2a2114;
  --board-grid:  #7a6440;
  --shadow-paper: 0 1px 0 rgba(0,0,0,0.5), 0 20px 50px -28px rgba(0,0,0,0.7);
  --shadow-lift:  0 2px 6px rgba(0,0,0,0.4), 0 10px 30px -12px rgba(0,0,0,0.55);
}

/* ---------- reset + base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 14px;
  font-feature-settings: "tnum";
  color: var(--fg);
  background:
    /* faint horizontal rule, like a manuscript page */
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 31px,
      rgba(29, 21, 11, 0.025) 31px,
      rgba(29, 21, 11, 0.025) 32px
    ),
    /* warm paper grain via radial noise */
    radial-gradient(circle at 20% 12%, rgba(255,255,255,0.5), transparent 38%),
    radial-gradient(circle at 78% 88%, rgba(0,0,0,0.04), transparent 45%),
    var(--bg);
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root[data-theme="ink"] body {
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 31px,
      rgba(236, 226, 200, 0.025) 31px,
      rgba(236, 226, 200, 0.025) 32px
    ),
    radial-gradient(circle at 20% 12%, rgba(236, 226, 200, 0.04), transparent 40%),
    var(--bg);
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

code, .mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "zero";
}

/* ---------- masthead (index + game page share) ---------- */
header {
  position: relative;
  padding: var(--space-5) var(--space-5) var(--space-3);
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, var(--bg-elev), transparent 80%);
}
header::after {
  /* double-rule, like a vintage frontispiece */
  content: "";
  position: absolute;
  left: var(--space-5);
  right: var(--space-5);
  bottom: -1px;
  border-bottom: 3px double var(--line);
}
header h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: 0.04em;
  margin: 0;
  line-height: 1.1;
  color: var(--fg);
  font-variant-numeric: lining-nums proportional-nums;
}
header h1::before {
  /* hairline rule sitting flush above the title */
  content: "";
  display: block;
  width: 44px;
  border-top: 1px solid var(--accent);
  margin-bottom: var(--space-3);
}
header .meta {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 var(--space-1);
}

/* ---------- theme picker (sits in masthead corner) ---------- */
.theme-picker {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.theme-picker select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 4px 22px 4px 10px;
  border: none;
  border-bottom: 1px solid var(--fg-soft);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-soft) 50%),
                    linear-gradient(135deg, var(--fg-soft) 50%, transparent 50%);
  background-position: calc(100% - 12px) 60%, calc(100% - 7px) 60%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  transition: border-color var(--duration-fast) var(--easing),
              color var(--duration-fast) var(--easing);
}
.theme-picker select:hover { border-color: var(--accent); color: var(--accent); }
.theme-picker select option { background: var(--bg-elev); color: var(--fg); }

/* ============================================================
   INDEX PAGE
   ============================================================ */
main { padding: var(--space-5) var(--space-5); }
main.categories { padding: var(--space-5) var(--space-5); }

.category { margin-bottom: var(--space-7); }
.category h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.06em;
  color: var(--fg);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.category h2::before {
  content: "❖";
  color: var(--accent);
  font-size: 14px;
}
.category h2 .dim {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-left: auto;
}

.game-list {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: var(--space-7);
}
.game-list li {
  break-inside: avoid;
  padding: var(--space-2) 0;
  border-bottom: 1px dotted var(--line);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}
.game-list a {
  font-family: var(--font-serif);
  font-size: 15px;
  color: var(--fg);
  text-decoration: none;
  position: relative;
  padding-left: var(--space-2);
  transition: color var(--duration-fast) var(--easing),
              padding-left var(--duration-fast) var(--easing);
}
.game-list a::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 0;
  border-top: 1px solid var(--accent);
  transition: width var(--duration-base) var(--easing);
}
.game-list a:hover { color: var(--accent); padding-left: 14px; text-decoration: none; }
.game-list a:hover::before { width: 9px; }

.game-list .dim {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--fg-faint);
  margin-left: auto;
  white-space: nowrap;
}
.game-list .ai-mark {
  color: var(--note);
  font-family: var(--font-serif);
  cursor: help;
  font-size: 13px;
}

/* Per-game badges on the index — trap count, decisive count, deep coverage.
   Same-line with title so the user can scan "where to spend study time". */
.game-list .badge {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  font-size: 10px;
  line-height: 16px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-weight: 600;
  vertical-align: middle;
}
.game-list .badge-trap     { color: var(--accent);     background: var(--accent-soft); }
.game-list .badge-decisive { color: var(--note-deep);  background: var(--note-soft); }
.game-list .badge-deep     { color: var(--cool);       background: var(--cool-soft); opacity: 0.85; }
.game-list .badge-deep.deep-low     { opacity: 0.55; }
.game-list .badge-deep.deep-partial { opacity: 0.75; }

/* Index header link to /traps.html — meant to look like an action, not a meta note. */
header .traps-link {
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed var(--accent-soft);
}
header .traps-link:hover { border-bottom-style: solid; }

/* ============================================================
   TRAPS PAGE — grouped by 目錄 → 棋譜 for top-to-bottom scanning
   ============================================================ */
main.traps-page {
  padding: var(--space-3) var(--space-5) var(--space-6);
  max-width: 1100px;
  margin: 0 auto;
}
/* Column legend — explains the unlabeled table columns so the user doesn't
   have to guess what "深失/淺失" mean. Stays visible at top of page; the
   wrap-at-narrow-screens behavior is intentional (label + hint pairs cluster). */
.traps-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--bg-soft);
  border-radius: 4px;
  font-size: 11.5px;
  align-items: center;
}
.traps-legend .leg-key {
  font-family: var(--font-mono);
  color: var(--fg-faint);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-right: var(--space-3);
  border-right: 1px solid var(--bg-soft);
}
.traps-legend .leg-label {
  font-weight: 600;
  color: var(--fg);
  margin-right: 6px;
}
.traps-legend .leg-label.deep    { color: var(--accent); }
.traps-legend .leg-label.shallow { color: var(--fg-faint); }
.traps-legend .leg-hint {
  color: var(--fg-dim);
  font-size: 11px;
}

.folder-block { margin-bottom: var(--space-6); }
.folder-head {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: var(--space-5) 0 var(--space-2);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--accent-soft);
  scroll-margin-top: 80px;  /* anchor jumps land below the sticky header */
}
.folder-head .folder-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
  font-weight: 400;
  letter-spacing: 0.06em;
  margin-left: var(--space-2);
  text-transform: uppercase;
}
.file-block {
  margin: var(--space-3) 0 var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--bg-soft);
  border-radius: 4px;
  overflow: hidden;
}
.file-head {
  margin: 0;
  padding: 6px var(--space-3);
  font-size: 13px;
  font-weight: 600;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--bg-soft);
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  scroll-margin-top: 80px;
}
.file-head .file-link {
  color: var(--fg);
  text-decoration: none;
  flex: 0 1 auto;
}
.file-head .file-link:hover { color: var(--accent); text-decoration: underline; }
.file-head .file-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-faint);
  font-weight: 400;
  letter-spacing: 0.04em;
}

.traps-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  table-layout: fixed;
}
.traps-table tbody td {
  padding: 4px var(--space-3);
  border-bottom: 1px solid var(--bg-soft);
  vertical-align: middle;
  line-height: 1.4;
}
.traps-table tbody tr:last-child td { border-bottom: none; }
.traps-table tbody tr:nth-child(even) { background: rgba(0, 0, 0, 0.015); }
.traps-table tbody tr:hover { background: var(--accent-soft); }
.traps-table .vp     { font-family: var(--font-mono); white-space: nowrap; width: 130px; }
.traps-table .vp a   { color: var(--fg-dim); text-decoration: none; }
.traps-table .vp a:hover { color: var(--accent); text-decoration: underline; }
.traps-table .side       { width: 32px; text-align: center; }
.traps-table .side.red   { color: var(--accent); font-weight: 600; }
.traps-table .side.black { color: var(--fg); font-weight: 600; }
.traps-table .move       { width: 150px; white-space: nowrap; }
.traps-table .move code  { color: var(--fg-faint); font-size: 10.5px; margin-left: 4px; }
.traps-table .loss       { font-family: var(--font-mono); text-align: right; }
.traps-table .loss.deep    { color: var(--accent); font-weight: 700; width: 70px; }
.traps-table .loss.shallow { color: var(--fg-faint); width: 70px; }
/* depth-28 verification column (verify_traps.py output) */
.traps-table .loss.vdeep         { color: var(--fg-dim); width: 70px; font-weight: 600; }
.traps-table .loss.vdeep.confirm { color: var(--accent); font-weight: 700; }
.traps-table .loss.vdeep.mild    { color: var(--note-deep); }
.traps-table .loss.vdeep.reject  { color: var(--cool); font-weight: 400; }
.traps-legend .leg-label.vdeep   { color: var(--accent); }

/* Brilliants page reuses the traps-table classes but flips the sentiment:
   .gain.deep = mover-positive (jade/cool), .gain.vdeep.confirm = depth-28
   keeps the gain (also jade), .gain.vdeep.reject = depth-28 retracted it. */
.traps-table .gain         { font-family: var(--font-mono); text-align: right; width: 70px; }
.traps-table .gain.deep    { color: var(--cool); font-weight: 700; }
.traps-table .gain.vdeep         { color: var(--fg-dim); font-weight: 600; }
.traps-table .gain.vdeep.confirm { color: var(--cool); font-weight: 700; }
.traps-table .gain.vdeep.mild    { color: var(--note-deep); }
.traps-table .gain.vdeep.reject  { color: var(--accent); font-weight: 400; }

/* Index folder badge + header link parity with trap variants. */
.game-list .badge.badge-brilliant,
.category h2 .folder-trap-link.badge-brilliant {
  color: var(--cool);
  background: var(--cool-soft);
}
.category h2 .folder-trap-link.badge-brilliant:hover {
  background: var(--cool);
  color: white;
}
header .traps-link.brilliants-link {
  color: var(--cool);
  border-bottom-color: var(--cool-soft);
}
header .traps-link.brilliants-link:hover { border-bottom-style: solid; }
header.game-header .back-brilliants { color: var(--cool); }
header.game-header .back-brilliants:hover { color: var(--cool); filter: brightness(1.2); }
.traps-table .annote {
  color: var(--fg-dim);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.traps-table .annote .dim { color: var(--fg-faint); }
.empty { text-align: center; color: var(--fg-faint); padding: var(--space-6); }

/* Folder-level trap link on the index page — looks like a badge, behaves like a link. */
.category h2 .folder-trap-link {
  margin-left: var(--space-2);
  text-decoration: none;
  font-size: 11px;
  vertical-align: middle;
}
.category h2 .folder-trap-link:hover {
  background: var(--accent);
  color: white;
}

/* ============================================================
   GAME PAGE
   ============================================================ */
header.game-header {
  padding: var(--space-3) var(--space-5);
  align-items: baseline;
  gap: var(--space-4);
}
header.game-header h1 {
  font-size: 22px;
  flex: 0 1 auto;
}
header.game-header h1::before { margin-bottom: var(--space-2); width: 32px; }
header.game-header .back {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  align-self: center;
  transition: color var(--duration-fast) var(--easing);
}
header.game-header .back:hover { color: var(--accent); text-decoration: none; }
header.game-header .back-traps { color: var(--accent); }
header.game-header .back-traps:hover { color: var(--accent-bright); }
header.game-header .meta {
  font-size: 11px;
  letter-spacing: 0.18em;
}

/* ---------- two-column layout ---------- */
.game {
  display: grid;
  grid-template-columns: 560px minmax(420px, 1fr);
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5) var(--space-5);
  align-items: start;
  animation: fadeUp var(--duration-slow) var(--easing) both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.board-panel {
  position: sticky;
  top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* ---------- board: thin frame, paper shadow, corner marks ---------- */
#board {
  width: 540px;
  height: 600px;
  background: var(--board-bg);
  border: 1px solid var(--ink);
  box-shadow: var(--shadow-paper);
  display: block;
  border-radius: var(--radius-sm);
}

/* ---------- chart: graph-paper inset ---------- */
#chart {
  width: 540px;
  height: 140px;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  display: block;
  position: relative;
  box-shadow: var(--shadow-paper);
}

/* ---------- game-panel ---------- */
.game-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--space-3);
}

/* ---------- control bar ---------- */
.control-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper);
}
.control-bar select {
  appearance: none;
  -webkit-appearance: none;
  font-family: var(--font-sans);
  font-size: 12.5px;
  padding: 5px 26px 5px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--fg);
  max-width: 280px;
  cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--fg-soft) 50%),
                    linear-gradient(135deg, var(--fg-soft) 50%, transparent 50%);
  background-position: calc(100% - 14px) 56%, calc(100% - 9px) 56%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  transition: border-color var(--duration-fast) var(--easing);
}
.control-bar select:hover { border-color: var(--accent); }
.control-bar select option { background: var(--bg-elev); color: var(--fg); }

.control-bar button {
  font-family: var(--font-sans);
  font-size: 12.5px;
  padding: 5px 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing),
              color var(--duration-fast) var(--easing),
              border-color var(--duration-fast) var(--easing),
              transform var(--duration-fast) var(--easing);
}
.control-bar button:hover:not(:disabled) {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
}
.control-bar button:active:not(:disabled) { transform: translateY(1px); }
.control-bar button:disabled { opacity: 0.4; cursor: not-allowed; }

.control-bar .nav-status {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--fg-soft);
  min-width: 96px;
  text-align: center;
  padding: 0 var(--space-2);
}

.control-bar .nav-first,
.control-bar .nav-prev,
.control-bar .nav-next,
.control-bar .nav-last {
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 5px 10px;
  min-width: 36px;
}

/* Demo buttons — pill toggles with subtle accent stripe */
.control-bar button.demo-play {
  position: relative;
  padding-left: 22px;
  border-color: var(--cool);
  color: var(--cool);
  background: var(--bg);
}
.control-bar button.demo-play::before {
  content: "";
  position: absolute;
  left: 9px; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--cool);
  transform: translateY(-50%);
  transition: background var(--duration-fast) var(--easing);
}
.control-bar button.demo-play:hover:not(:disabled) {
  background: var(--cool);
  color: var(--bg);
  border-color: var(--cool);
}
.control-bar button.demo-play:hover:not(:disabled)::before { background: var(--bg); }

.control-bar button.demo-play.demo-deep {
  border-color: var(--accent);
  color: var(--accent);
}
.control-bar button.demo-play.demo-deep::before { background: var(--accent); }
.control-bar button.demo-play.demo-deep:hover:not(:disabled) {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.control-bar button.demo-play.stop {
  border-color: var(--accent-bright);
  background: var(--accent);
  color: var(--bg);
  animation: pulse-stop 1.2s ease-in-out infinite;
}
.control-bar button.demo-play.stop::before { background: var(--bg); }
@keyframes pulse-stop {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); }
  50%      { box-shadow: 0 0 0 4px transparent; }
}

.control-bar .redp {
  margin-left: auto;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  color: var(--fg-soft);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}
.control-bar .redp input { accent-color: var(--accent); }

/* ---------- step info colophon ---------- */
.step-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  font-size: 13px;
  min-height: 44px;
  box-shadow: var(--shadow-paper);
}
.step-info .placeholder {
  color: var(--fg-faint);
  font-style: italic;
  font-family: var(--font-serif);
}
.step-info .item {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
}
.step-info .label {
  color: var(--fg-faint);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--font-sans);
}
.step-info code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-soft);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
}
.step-info .score-positive {
  color: var(--accent);
  font-weight: 600;
  font-family: var(--font-mono);
}
.step-info .score-negative {
  color: var(--fg);
  font-weight: 600;
  font-family: var(--font-mono);
}
.step-info .diff-tag {
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.12em;
  font-size: 11px;
  text-transform: uppercase;
}
.step-info .demo-tag {
  color: var(--bg);
  background: var(--cool);
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: 11px;
  text-transform: uppercase;
}

.step-info .restore-btn {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  border-radius: var(--radius-sm);
  cursor: pointer;
  margin-left: auto;
  transition: background var(--duration-fast) var(--easing),
              color var(--duration-fast) var(--easing);
}
.step-info .restore-btn:hover { background: var(--fg); color: var(--bg); }

/* ---------- body: plies table + side scholia ---------- */
.game-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: var(--space-3);
  align-items: start;
}

.right-col {
  position: sticky;
  top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-height: calc(100vh - var(--space-5));
  min-width: 0;
}

/* ---------- scholia (annote + alts boxes — book-margin commentary) ---------- */
.annote-box {
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 2px solid var(--note);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper);
  font-size: 13.5px;
  line-height: 1.7;
  flex: 0 0 45%;
  overflow-y: auto;
  position: relative;
}
.annote-box::before {
  /* tiny corner dingbat */
  content: "❖";
  position: absolute;
  top: 10px; right: 12px;
  color: var(--note);
  opacity: 0.4;
  font-size: 12px;
}
.annote-box .annote-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--note-deep);
  margin-bottom: var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-bottom: var(--space-2);
  border-bottom: 1px dotted var(--note);
}

.alts-box {
  padding: var(--space-3) var(--space-3) var(--space-3);
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-left: 2px solid var(--cool);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-paper);
  font-size: 13px;
  flex: 0 0 55%;
  overflow-y: auto;
  position: relative;
}
.alts-box::before {
  content: "✦";
  position: absolute;
  top: 10px; right: 12px;
  color: var(--cool);
  opacity: 0.4;
  font-size: 12px;
}
.alts-box .alts-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--cool);
  margin: 0 4px var(--space-2);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding-bottom: var(--space-2);
  border-bottom: 1px dotted var(--cool);
}
.alts-box .alts-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.alts-placeholder {
  color: var(--fg-faint);
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 13px;
  padding: var(--space-2) var(--space-2);
}
.alts-item {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto auto;
  gap: var(--space-2);
  align-items: baseline;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid transparent;
  background: transparent;
  transition: background var(--duration-fast) var(--easing),
              border-color var(--duration-fast) var(--easing),
              transform var(--duration-fast) var(--easing);
}
.alts-item:hover {
  background: var(--bg);
  border-color: var(--line);
  transform: translateX(2px);
}
.alts-item.current {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.alts-item.current:hover { transform: none; }
.alts-item .alts-side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 11px;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-sm);
  letter-spacing: 0;
}
/* Themed chips: red uses the accent token so it tracks per theme;
   the "dark" chip uses --fg (page-fg inverse of bg) so it inverts cleanly —
   dark on light themes, parchment on the ink theme. Text always uses
   var(--bg)-or-equivalent so it stays high-contrast. */
.alts-item .alts-side.red {
  background: var(--accent);
  color: #fbeed1;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}
.alts-item .alts-side.black {
  background: var(--fg);
  color: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}
.alts-item .alts-cn {
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.04em;
}
.alts-item .alts-iccs {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-soft);
  background: var(--bg);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-soft);
}
.alts-item .alts-score {
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-align: right;
  min-width: 48px;
}

.annote-placeholder {
  color: var(--fg-faint);
  font-style: italic;
  font-family: var(--font-serif);
}
.annote-box .annote-body {
  white-space: pre-line;
  color: var(--fg);
  font-family: var(--font-serif);
  font-size: 14px;
  line-height: 1.75;
}

.annote-marker {
  color: var(--note);
  font-weight: 700;
  cursor: help;
  margin-left: 3px;
  font-family: var(--font-mono);
}
.annote-icon {
  font-size: 11px;
  cursor: help;
  opacity: 0.7;
}

table.plies tr.has-annote .book-cn { color: var(--note-deep); font-weight: 500; }

/* ---------- plies ledger (the main analysis table) ---------- */
.plies-host { min-width: 0; }
.plies-wrap {
  max-height: calc(100vh - 270px);
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  box-shadow: var(--shadow-paper);
}

/* Custom scrollbar to match aesthetic */
.plies-wrap::-webkit-scrollbar { width: 8px; }
.plies-wrap::-webkit-scrollbar-track { background: transparent; }
.plies-wrap::-webkit-scrollbar-thumb {
  background: var(--line);
  border-radius: 4px;
}
.plies-wrap::-webkit-scrollbar-thumb:hover { background: var(--fg-faint); }

table.plies {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
table.plies th {
  text-align: left;
  background: var(--bg-elev);
  padding: 8px 8px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 2;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-faint);
  white-space: nowrap;
}
table.plies th::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  border-bottom: 1px solid var(--accent);
  opacity: 0.25;
}
table.plies td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
  white-space: nowrap;
}
table.plies tr {
  cursor: pointer;
  transition: background var(--duration-fast) var(--easing);
}
table.plies tbody tr.red   { background: var(--row-red); }
table.plies tbody tr.black { background: var(--row-black); }
table.plies tbody tr:hover {
  background: var(--bg);
  box-shadow: inset 3px 0 0 var(--fg-soft);
}
table.plies tbody tr.active {
  background: var(--hl) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}

table.plies td.num {
  color: var(--fg-faint);
  width: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 4px;
}
table.plies td.side {
  width: 28px;
  text-align: center;
  padding: 5px 4px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 13px;
}
/* Themed: light themes give dark vermillion + ink; ink theme swaps to
   brighter accent + parchment foreground automatically. */
table.plies tr.red   td.side { color: var(--accent); }
table.plies tr.black td.side { color: var(--fg); }

table.plies td.book-cn {
  font-family: var(--font-serif);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--fg);
  white-space: nowrap;
}
table.plies td.eng-best {
  font-family: var(--font-serif);
  font-size: 13px;
  color: var(--fg-soft);
  white-space: nowrap;
}
table.plies td.same { width: 36px; text-align: center; font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); }
table.plies tr.diff td.same { color: var(--accent); font-weight: 700; }

table.plies code {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--fg-faint);
}
table.plies code.tiny {
  font-size: 9.5px;
  color: var(--fg-faint);
  margin-left: 4px;
  opacity: 0.85;
}
table.plies tr.invalid {
  background: var(--accent-soft);
  color: var(--accent);
}
table.plies td.score,
table.plies td.delta,
table.plies td.deep-delta,
table.plies td.cdb {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
table.plies .score-positive { color: var(--accent); font-weight: 600; }
table.plies .score-negative { color: var(--fg); font-weight: 600; }
table.plies td.delta      { width: 60px; text-align: right; padding-right: 10px; }
table.plies td.deep-delta {
  width: 60px;
  text-align: right;
  padding-right: 14px;
  border-left: 1px dashed var(--line);
  position: relative;
}

/* Red-POV signed delta classes (used by 分, Δ, 深Δ, 雲庫 columns). */
.delta-pos-strong { color: var(--accent); font-weight: 700; }
.delta-pos-mild   { color: var(--accent); opacity: 0.85; }
.delta-neg-strong { color: var(--fg); font-weight: 700; }
.delta-neg-mild   { color: var(--fg-soft); }
.delta-neutral    { color: var(--fg-faint); }

/* "Human trap": shallow OK + deep blunder. Warm amber wash + seal stamp. */
table.plies tr.ply-trap {
  background: var(--warn-soft) !important;
  box-shadow: inset 3px 0 0 var(--warn);
}
table.plies tr.ply-trap.active {
  background: var(--warn-soft) !important;
  box-shadow: inset 3px 0 0 var(--accent), inset 0 0 0 1px var(--warn);
}
table.plies tr.ply-trap td.book-cn {
  text-decoration: underline wavy var(--warn);
  text-underline-offset: 4px;
}
table.plies tr.ply-trap td.deep-delta::after {
  content: " ⚠";
  color: var(--accent);
  font-size: 12px;
  margin-left: 2px;
  font-weight: 700;
}

/* Branch indicator — this ply is a fork point in the book tree (more than
   one move tried at this same position across variations). Small fork badge
   showing the count so the eye picks it up scanning the table. */
table.plies tr.ply-branch td.book-cn { font-weight: 600; }
.branch-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 14px;
  color: var(--cool);
  background: var(--cool-soft);
  border-radius: 3px;
  font-weight: 500;
  font-family: var(--font-mono);
}
.branch-badge::before { content: "⑂"; margin-right: 2px; }

/* chessdb 雲庫 column — community winrate of book's chosen move. */
table.plies td.cdb {
  width: 64px;
  text-align: right;
  padding-right: 10px;
  border-left: 1px dashed var(--line);
  cursor: help;
}
.cdb-missing {
  color: var(--fg-faint);
  font-style: italic;
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .game { grid-template-columns: 1fr; }
  .board-panel { position: static; }
  #board, #chart { width: 100%; height: auto; max-width: 560px; }
  .right-col { position: static; max-height: none; }
  .game-body { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  header, header.game-header, main, main.categories,
  .game { padding-left: var(--space-3); padding-right: var(--space-3); }
  header h1 { font-size: 26px; }
  header.game-header h1 { font-size: 20px; }
  .game-list { columns: 1; }
}

/* ---------- google fonts fallback hint ----------
   If you cannot load Google Fonts (offline / firewalled), the
   --font-* stacks degrade to system serif / Microsoft JhengHei /
   Consolas. The aesthetic survives — it just loses some refinement.
   ============================================================= */