:root {
  --bg: #f6f4ef; --panel: #ffffff; --ink: #24211c; --muted: #6b655b; --line: #e3ded3;
  --accent: #2f6f4e; --accent-ink: #ffffff; --accent-soft: #e5f0ea;
  --light: #eedcb7; --dark: #b48a5e;
  --good: #2f7d4f; --best: #1f6fa8; --inacc: #b8860b; --mistake: #d2691e; --blunder: #c0392b; --note: #6b655b;
  --last: rgba(235, 205, 60, .55); --sel: rgba(47, 111, 78, .45); --hl: rgba(31, 111, 168, .35);
  --radius: 10px; --shadow: 0 1px 2px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1d1f; --panel: #24272a; --ink: #e8e6e1; --muted: #a09b92; --line: #363a3e;
    --accent: #5fae84; --accent-ink: #0f1712; --accent-soft: #23362b;
    --note: #a09b92; color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--accent); }
button { font: inherit; cursor: pointer; }

/* ---------- top bar ---------- */
header.top { position: sticky; top: 0; z-index: 10; background: var(--panel); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; flex-wrap: wrap; }
header.top .brand { font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: .4rem; }
header.top .brand .logo { width: 26px; height: 26px; background-size: contain; background-repeat: no-repeat; }
nav.tabs { display: flex; gap: .25rem; flex-wrap: wrap; }
nav.tabs a { text-decoration: none; color: var(--muted); padding: .35rem .7rem; border-radius: 999px; font-weight: 500; }
nav.tabs a.on, nav.tabs a:hover { background: var(--accent-soft); color: var(--accent); }

/* ---------- shell: the board is always on screen ---------- */
.shell { display: grid; grid-template-columns: minmax(280px, 540px) minmax(0, 1fr); gap: 1.5rem;
  max-width: 1320px; margin: 0 auto; padding: 1.25rem 1rem 4rem; align-items: start; }
.board-pane { position: sticky; top: 4.2rem; }
main { min-width: 0; }
@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; gap: 1rem; padding-top: .75rem; }
  .board-pane { position: static; max-width: 520px; width: 100%; margin: 0 auto; }
}
h1 { font-size: 1.6rem; margin: .2rem 0 .6rem; }
h2 { font-size: 1.25rem; margin: 1.4rem 0 .6rem; }
h3 { font-size: 1.05rem; margin: 1rem 0 .4rem; }
p.lead { color: var(--muted); max-width: 60ch; margin-top: 0; }
.muted { color: var(--muted); }
.crumb { color: var(--muted); font-size: .9rem; margin-bottom: .3rem; }
.crumb a { text-decoration: none; }

/* ---------- cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .9rem; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow);
  text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: .35rem; transition: transform .08s ease, border-color .08s; }
a.card:hover { transform: translateY(-2px); border-color: var(--accent); }
.card .t { font-weight: 650; }
.card .d { color: var(--muted); font-size: .92rem; }
.card .meta { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: auto; padding-top: .3rem; }
.tag { font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.tag.grey { background: var(--line); color: var(--muted); }
.hero-cards .card { padding: 1.3rem; }
.hero-cards .card .t { font-size: 1.15rem; }

/* ---------- study layout ---------- */
.study { display: grid; grid-template-columns: minmax(280px, 560px) minmax(300px, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 860px) { .study { grid-template-columns: 1fr; } }
.side { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); min-width: 0; }
.board-col { position: sticky; top: 4.2rem; }
@media (max-width: 860px) { .board-col { position: static; } }
.controls { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .6rem; align-items: center; }
.btn { border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: .4rem .8rem; border-radius: 8px; font-weight: 500; }
.btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.sm { padding: .2rem .55rem; font-size: .88rem; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: transparent; padding: .35rem .8rem; color: var(--muted); }
.seg button.on { background: var(--accent); color: var(--accent-ink); }

/* ---------- board ---------- */
.board-wrap { position: relative; width: 100%; max-width: 560px; user-select: none; -webkit-user-select: none; touch-action: none; }
.board { position: relative; display: grid; grid-template-columns: repeat(8, 1fr); aspect-ratio: 1 / 1; width: 100%;
  border-radius: 6px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.sq { position: relative; }
.sq.light { background: var(--light); }
.sq.dark { background: var(--dark); }
.sq.last::before, .sq.sel::before, .sq.hl::before, .sq.check::before { content: ''; position: absolute; inset: 0; }
.sq.last::before { background: var(--last); }
.sq.sel::before { background: var(--sel); }
.sq.hl::before { background: var(--hl); }
.sq.check::before { background: radial-gradient(circle, rgba(220,30,30,.85) 0%, rgba(220,30,30,.45) 45%, rgba(220,30,30,0) 72%); }
.sq.dot::after { content: ''; position: absolute; left: 36%; top: 36%; width: 28%; height: 28%; border-radius: 50%; background: rgba(20,60,40,.35); }
.sq.cap::after { content: ''; position: absolute; inset: 4%; border-radius: 50%; border: 5px solid rgba(20,60,40,.35); }
.pc { position: absolute; inset: 0; background-size: 100% 100%; z-index: 2; cursor: grab; }
.pc.lifted { opacity: .25; }
.pc.ghost { position: fixed; inset: auto; z-index: 1000; pointer-events: none; cursor: grabbing; }
.coord { position: absolute; font-size: .68rem; font-weight: 700; z-index: 3; pointer-events: none; opacity: .85; }
.coord.rank { left: 3px; top: 2px; }
.coord.file { right: 4px; bottom: 1px; }
.sq.light .coord { color: var(--dark); }
.sq.dark .coord { color: var(--light); }
svg.arrows { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
svg.arrows line.arrow { stroke: rgba(31, 111, 168, .78); stroke-width: .17; stroke-linecap: round; }
svg.arrows line.arrow.green { stroke: rgba(30, 140, 70, .8); }
svg.arrows line.arrow.red { stroke: rgba(200, 50, 40, .8); }
svg.arrows .ahead { fill: rgba(31, 111, 168, .9); }
.promo { position: absolute; inset: 0; z-index: 20; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 6px; }
.promo button.pc { position: relative; inset: auto; width: 20%; aspect-ratio: 1; border: 0; border-radius: 8px; background-color: rgba(255,255,255,.9); }
.promo .promo-cancel { position: absolute; top: 6px; right: 10px; border: 0; background: none; color: #fff; font-size: 1.6rem; }
.status { margin-top: .5rem; font-size: .92rem; color: var(--muted); min-height: 1.4em; }

/* ---------- lesson panel ---------- */
.why { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: .7rem .9rem; border-radius: 0 8px 8px 0; margin: .6rem 0; }
.why .mv { font-weight: 700; margin-right: .35rem; }
.movelist { display: flex; flex-wrap: wrap; gap: .15rem .2rem; margin: .5rem 0; font-variant-numeric: tabular-nums; }
.movelist .n { color: var(--muted); margin-left: .3rem; }
.movelist .m { padding: .05rem .35rem; border-radius: 5px; cursor: pointer; }
.movelist .m:hover { background: var(--line); }
.movelist .m.cur { background: var(--accent); color: var(--accent-ink); }
.movelist .m.future { color: var(--muted); opacity: .55; }
.otherlist { margin: .4rem 0; padding-left: 1.1rem; }
.otherlist li { margin: .25rem 0; }
.steps-nav { display: flex; gap: .3rem; flex-wrap: wrap; margin: .3rem 0 .8rem; }
.steps-nav button { width: 1.9rem; height: 1.9rem; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--muted); font-size: .8rem; padding: 0; }
.steps-nav button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.steps-nav button.done { border-color: var(--accent); color: var(--accent); }

/* ---------- feedback ---------- */
.fb { border: 1px solid var(--line); border-radius: 8px; padding: .7rem .9rem; margin: .6rem 0; background: var(--panel); }
.fb .head { font-weight: 650; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fb ul { margin: .4rem 0 0; padding-left: 1.1rem; }
.fb li { margin: .25rem 0; }
.fb.ok { border-color: var(--good); }
.fb.bad { border-color: var(--blunder); }
.fb.alt { border-color: var(--best); }
.badge { font-size: .74rem; font-weight: 700; padding: .1rem .5rem; border-radius: 999px; color: #fff; text-transform: uppercase; letter-spacing: .02em; }
.badge.best { background: var(--best); } .badge.good { background: var(--good); } .badge.inacc { background: var(--inacc); }
.badge.mistake { background: var(--mistake); } .badge.blunder { background: var(--blunder); } .badge.alt { background: var(--best); }
.badge.book { background: var(--good); } .badge.info { background: var(--note); }
li.k-tactic::marker { content: '⚔ '; } li.k-principle::marker { content: '◆ '; } li.k-positive::marker { content: '✓ '; } li.k-note::marker { content: '• '; }
.thinking { color: var(--muted); font-style: italic; }

/* ---------- tree ---------- */
.tree-name { font-size: 1.1rem; font-weight: 650; }
.tree-eco { color: var(--muted); font-weight: 500; margin-right: .3rem; }
table.cont { width: 100%; border-collapse: collapse; margin: .4rem 0; }
table.cont td { padding: .35rem .4rem; border-top: 1px solid var(--line); vertical-align: top; }
table.cont tr:hover td { background: var(--accent-soft); cursor: pointer; }
table.cont .san { font-weight: 700; white-space: nowrap; }
table.cont .cnt { color: var(--muted); text-align: right; white-space: nowrap; font-size: .85rem; }
.reach { columns: 2 220px; margin: .4rem 0; padding: 0; list-style: none; font-size: .9rem; }
.reach li { break-inside: avoid; padding: .1rem 0; }
.reach li a { cursor: pointer; text-decoration: none; }
.reach li a:hover { text-decoration: underline; }
.reach .eco { color: var(--muted); font-size: .8rem; margin-right: .3rem; font-variant-numeric: tabular-nums; }
.filter { width: 100%; padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); }

/* ---------- quiz ---------- */
.mc { display: flex; flex-direction: column; gap: .4rem; margin: .6rem 0; }
.mc button { text-align: left; border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: .55rem .8rem; border-radius: 8px; }
.mc button:hover:not(:disabled) { border-color: var(--accent); }
.mc button.right { border-color: var(--good); background: rgba(47,125,79,.12); }
.mc button.wrong { border-color: var(--blunder); background: rgba(192,57,43,.1); }
.score { font-weight: 650; }
.progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; margin: .4rem 0 .8rem; }
.progress > div { height: 100%; background: var(--accent); transition: width .2s; }
.evalbar { height: 8px; border-radius: 4px; background: #333; overflow: hidden; margin-top: .5rem; }
.evalbar > div { height: 100%; background: #f2f2f2; transition: width .3s; }
kbd { border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; padding: 0 .3rem; font-size: .8rem; }
footer { text-align: center; color: var(--muted); font-size: .8rem; padding: 2rem 1rem; }
.brand .logo.pc { position: static; display: inline-block; width: 28px; height: 28px; cursor: pointer; }
svg.arrows .ahead.green { fill: rgba(30, 140, 70, .9); }
svg.arrows .ahead.red { fill: rgba(200, 50, 40, .9); }

/* ---------- course ---------- */
.unit { scroll-margin-top: 4.5rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; margin: 0 0 .9rem; box-shadow: var(--shadow); }
.unit h2 { margin: 0 0 .2rem; font-size: 1.1rem; display: flex; justify-content: space-between; gap: .5rem; align-items: baseline; }
.unit h2 .cnt { font-size: .82rem; color: var(--muted); font-weight: 500; white-space: nowrap; }
.unit p { margin: 0 0 .5rem; color: var(--muted); font-size: .92rem; }
.lessons { list-style: none; margin: 0; padding: 0; }
.lessons li a { display: flex; gap: .6rem; align-items: center; padding: .45rem .5rem; border-radius: 8px; text-decoration: none; color: var(--ink); }
.lessons li a:hover, .lessons li a.next { background: var(--accent-soft); }
.lessons .num { width: 1.7rem; height: 1.7rem; border-radius: 50%; border: 1.5px solid var(--line); display: inline-flex; align-items: center; justify-content: center;
  font-size: .78rem; color: var(--muted); flex: none; font-weight: 600; }
.lessons .done .num { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.lessons .next .num { border-color: var(--accent); color: var(--accent); }
.lessons .lt { font-weight: 550; }
.lessons .ls { color: var(--muted); font-size: .85rem; }
.lessons .kind { margin-left: auto; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.courseprog { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin: .2rem 0 1rem; }
.courseprog .progress { flex: 1; min-width: 160px; margin: 0; }
.nextbar { display: flex; justify-content: space-between; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--line); }
/* ---------- in-panel move navigation ---------- */
.mvnav { display: flex; align-items: center; gap: .4rem; margin: .5rem 0; }
.mvnav .btn { min-width: 2.6rem; font-size: 1.05rem; padding: .25rem .6rem; }
.mvnav .where { color: var(--muted); font-size: .88rem; margin: 0 .3rem; }
/* ---------- module tiles + collapsible modules ---------- */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; margin: 0 0 .8rem; }
.tile { text-align: left; border: 1px solid var(--line); background: var(--panel); color: var(--ink); border-radius: var(--radius); padding: .7rem .8rem;
  display: flex; flex-direction: column; gap: .2rem; box-shadow: var(--shadow); transition: transform .08s, border-color .08s; }
.tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.tile.current { border-color: var(--accent); background: var(--accent-soft); }
.tile .tn { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.tile .tt { font-weight: 650; font-size: 1rem; }
.tile .tp { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--muted); margin-top: .2rem; }
.tile .bar { flex: 1; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tile .bar > span { display: block; height: 100%; background: var(--accent); }
.tile.complete .tt::after { content: ' ✓'; color: var(--accent); }
details.unit > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-weight: 650; font-size: 1.1rem; }
details.unit > summary::-webkit-details-marker { display: none; }
details.unit > summary .ut::before { content: '▸'; display: inline-block; width: 1.1rem; color: var(--muted); transition: transform .12s; }
details.unit[open] > summary .ut::before { transform: rotate(90deg); }
details.unit > summary .cnt { font-size: .82rem; color: var(--muted); font-weight: 500; white-space: nowrap; }
details.unit > p { margin: .4rem 0 .5rem; color: var(--muted); font-size: .92rem; }
.lessons li.sub { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 700; padding: .7rem .5rem .2rem; }
details.review { margin: .5rem 0; }
details.review summary { cursor: pointer; color: var(--accent); font-weight: 550; }