:root {
  --ink: #1c1a17; --dim: #5d574e; --rule: #d8d2c6;
  --bg: #faf8f4; --panel: #fff; --accent: #7a4a1e;

  --frame: #6b4a2c; --felt: #e7dcc6;
  --pt-a: #b8834e; --pt-b: #8c5a30; --pt-num: #f0e6d2;
  --ck-x: #f4efe4; --ck-o: #2e2a26; --ck-count: #f4efe4;
  --die: #f7f4ee; --die-pip: #26221e; --lit: #fffaea; --yes: #4c7a3f;
  --gold: #f0c060; --gold-edge: #b8862c;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink:#e8e3da; --dim:#a29a8d; --rule:#3a3630; --bg:#191714; --panel:#211e1a; --accent:#d9a066;

    --frame: #3a2a1c; --felt: #2b3a30;
    --pt-a: #7a5636; --pt-b: #4e3a26; --pt-num: #c8bba4;
    --ck-x: #e6ddcc; --ck-o: #1a1714;
    --die: #ece7dd; --die-pip: #26221e; --lit: #ffe9b4; --yes: #8ab97a;
    --gold: #e0b355; --gold-edge: #8c6520;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font: 16px/1.6 Georgia, "Times New Roman", serif;
  overflow: hidden;                 /* the pager owns scrolling, not the body */
}

/* ---- the pager: one screen per question ---- */
.pager {
  height: 100dvh; overflow-y: auto;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}
.screen {
  height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

/* ---- board: pinned, owns its own gestures ---- */
.board-area {
  flex: 0 0 auto;
  touch-action: none;               /* swipes here navigate, they don't scroll */
  -webkit-user-select: none; user-select: none;
  padding: 1.25rem 1rem 0.75rem;
  display: flex; flex-direction: column; align-items: center;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}
/* The SVG carries its own aspect ratio; give it the width and cap the height
   so the discussion below always has room. */
.bg-board {
  display: block; width: 100%; height: auto;
  max-height: 46dvh; max-width: 40rem;
}

/* Board colours live here, not in the SVG, so the whole board restyles with
   the theme like everything else. */
.bg-board .frame { fill: var(--frame); }
.bg-board .felt  { fill: var(--felt); }
.bg-board .bar   { fill: var(--frame); }
.bg-board .tray  { fill: var(--felt); stroke: var(--frame); stroke-width: 0.6; }
.bg-board .pt.a  { fill: var(--pt-a); }
.bg-board .pt.b  { fill: var(--pt-b); }
.bg-board .num   { fill: var(--pt-num); font: 4px/1 system-ui, sans-serif; text-anchor: middle; }

.bg-board .ck    { stroke: rgba(0, 0, 0, 0.35); stroke-width: 0.4; }
.bg-board .ck.x  { fill: var(--ck-x); }
.bg-board .ck.o  { fill: var(--ck-o); }
.bg-board .count {
  fill: var(--ck-count); font: bold 4.4px/1 system-ui, sans-serif; text-anchor: middle;
  paint-order: stroke; stroke: rgba(0, 0, 0, 0.45); stroke-width: 0.7;
}

.bg-board .die-face { fill: var(--die); stroke: rgba(0, 0, 0, 0.4); stroke-width: 0.3; }
.bg-board .pip      { fill: var(--die-pip); }

/* A wash rather than an outline. Two strengths: the brighter one means the
   marked die will go from here, the fainter that only the other one will.
   Tapping the dice swaps which is which, and that is how the dice reveal
   themselves as a control. */
.bg-board .lit {
  fill: var(--lit); fill-opacity: 0.15;
  stroke: var(--lit); stroke-opacity: 0.45; stroke-width: 0.35;
}
.bg-board .lit.weak { fill-opacity: 0.05; stroke-opacity: 0.16; }

/* Targets exist only on playable points, so this is the whole of the cursor
   rule: if it is a pointer, something happens. */
.bg-board .hit { fill: transparent; cursor: pointer; }

.bg-board .die.spent { opacity: 0.25; }
.bg-board .die.now .die-face { stroke: var(--accent); stroke-width: 0.9; }

/* A medal sits on the board's corner once the question has been solved, and
   stays there on the next visit. */
.board-area { position: relative; }
.medal {
  position: absolute; top: 0.9rem; right: 0.9rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--gold), var(--gold-edge));
  color: #4a3208; font-size: 0.95rem; line-height: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
/* display:grid above outranks the UA rule for [hidden], so say it again */
.medal[hidden] { display: none; }

/* The question's number, opposite the medal. It is how a question is referred
   to, so it is always there. */
.qnum {
  position: absolute; top: 0.9rem; left: 0.9rem;
  width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  color: var(--dim); font: 0.9rem/1 system-ui, sans-serif;
  border: 1px solid var(--rule); border-radius: 50%;
}

.controls { display: flex; justify-content: center; min-height: 1.9rem; margin-top: 0.5rem; }
.controls .undo {
  -webkit-appearance: none; appearance: none;
  border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--dim);
  font: 0.78rem/1 system-ui, sans-serif; letter-spacing: 0.04em;
  padding: 0.45rem 1.1rem; cursor: pointer; touch-action: manipulation;
}
.controls .undo:active { background: var(--rule); color: var(--ink); }

.hint { color: var(--dim); font-style: italic; font-size: 0.88rem; }
.answer { margin-top: 1.25rem; }
.answer .played { font-size: 0.95rem; color: var(--dim); }
.answer .played b { color: var(--ink); font-family: ui-monospace, monospace; }
.answer .call { font-size: 1.05rem; }
.answer .call.good { color: var(--yes); }
.answer .call.bad { color: var(--accent); }
.answer .call.unknown { color: var(--dim); }
.verdict { border-left: 3px solid var(--rule); padding-left: 0.9rem; }
.verdict.good    { border-left-color: var(--yes); }
.verdict.bad     { border-left-color: var(--accent); }
.verdict.unknown { border-left-color: var(--dim); font-style: italic; }
.verdict p:last-child { margin-bottom: 0; }

/* ---- discussion: scrolls on its own, never chains out to the pager ---- */
.discussion {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;     /* this is what keeps the board in place */
  -webkit-overflow-scrolling: touch;
}
.discussion-inner, .text-inner { max-width: 34rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }
.text-inner { padding-bottom: 1.5rem; }

/* A text screen has no board to swipe, so its swipe must reach the pager.
   It stays a scroll container for the rare over-long screen, but chains
   instead of containing -- `contain` here made the first screen a trap with
   no way off it on a touch device. */
.screen-text {
  justify-content: center;
  overflow-y: auto; overscroll-behavior-y: auto;
}

h1 { font-size: 1.8rem; line-height: 1.15; margin: 0 0 1.25rem; letter-spacing: -0.01em; }

/* The title and the page's opening words ride in the first question's
   discussion, so that a board is the first thing on the screen. */
.lead { margin-bottom: 1.5rem; }
.lead h1 { font-size: 1.45rem; margin-bottom: 0.6rem; }
.lead p { color: var(--dim); }
.lead p strong { color: var(--accent); }

/* ---- the ending: every question's medal, won or not ---- */
.screen-end .score { font-size: 1.15rem; margin-bottom: 1rem; }
.screen-end.won .score { color: var(--yes); }
.medals {
  list-style: none; padding: 0; margin: 0 0 1.75rem;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem 0.5rem;
}
.medals a {
  display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  text-decoration: none; color: var(--dim);
}
.medals .pip {
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--rule); background: transparent;
  color: var(--dim); font: 0.9rem/1 system-ui, sans-serif;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.medal-slot.won .pip {
  background: linear-gradient(160deg, var(--gold), var(--gold-edge));
  border-color: var(--gold-edge); color: #4a3208;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.medal-slot.won a { color: var(--ink); }
.medals .roll { font: 0.72rem/1 ui-monospace, monospace; }
.onward-wrap { margin-top: 1.75rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.onward {
  display: inline-block; padding: 0.6rem 1.2rem;
  border: 1px solid var(--accent); border-radius: 999px;
  text-decoration: none; font-family: system-ui, sans-serif; font-size: 0.9rem;
}
p { margin: 0 0 1rem; }
strong { color: var(--accent); }
.placeholder { color: var(--dim); font-style: italic; font-size: 0.9rem; }
.toc { list-style: none; padding: 0; }
.toc li { margin: 0.6rem 0; }
a, .toc a { color: var(--accent); }

/* ---- position readout and the always-visible prev/next ---- */
/* Bottom corner, not mid-height: the board fills the upper half of a question
   screen and a centred control would sit on its corner. It is also where a
   thumb already is. */
.progress {
  position: fixed; right: 0.5rem; z-index: 5;
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
}
.progress .dots { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.15rem 0; }
.progress i {
  display: block; width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid var(--rule); background: transparent;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.progress i.won { background: var(--gold); border-color: var(--gold-edge); }
.progress i.end { border-radius: 1px; }
.progress i.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--accent); }

.progress button {
  -webkit-appearance: none; appearance: none;
  width: 2.5rem; height: 2.5rem; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--rule); border-radius: 50%;
  background: var(--panel); color: var(--accent);
  font: 1rem/1 system-ui, sans-serif;
  cursor: pointer; touch-action: manipulation;
  transition: opacity 0.2s, background 0.15s;
}
.progress button:active { background: var(--rule); }
.progress button[disabled] { opacity: 0.25; cursor: default; }

/* keep prose clear of the control on narrow screens */
@media (max-width: 30rem) {
  .discussion-inner, .text-inner { padding-right: 3.75rem; }
}

@media (min-width: 48rem) {
  .board { font-size: 15px; }
  .board-area { padding-top: 2rem; }
}


/* ---- glossary ---------------------------------------------------------- */

a.gloss {
  color: inherit; text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  cursor: pointer;
}
a.gloss:active { background: var(--lit); }

/* The pane covers the window: the board behind it is not the thing being
   read, and half-covering it would leave the student peering round an edge. */
.gloss-pane {
  position: fixed; inset: 0; z-index: 40;
  background: var(--bg);
  display: flex; flex-direction: column;
}
.gloss-pane[hidden] { display: none; }
body.gloss-open { overflow: hidden; }

.gloss-head {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 0.75rem;
  padding: calc(0.9rem + env(safe-area-inset-top)) 1rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  background: var(--panel);
}
.gloss-head h2 { margin: 0; font-size: 1.1rem; flex: 1 1 auto; }
.gloss-open {
  font: 0.8rem/1 system-ui, sans-serif; color: var(--accent);
  text-decoration: none; border: 1px solid var(--rule);
  border-radius: 999px; padding: 0.45rem 0.85rem;
}
.gloss-close {
  -webkit-appearance: none; appearance: none;
  width: 2.2rem; height: 2.2rem; padding: 0;
  border: 1px solid var(--rule); border-radius: 50%;
  background: transparent; color: var(--ink);
  font: 1.2rem/1 system-ui, sans-serif; cursor: pointer;
  touch-action: manipulation;
}

.gloss-body {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.25rem 1.25rem calc(3rem + env(safe-area-inset-bottom));
}
.gloss-page { height: 100dvh; display: flex; flex-direction: column; }

.gloss-list { max-width: 34rem; margin: 0 auto; }
.gloss-list dt {
  font-weight: bold; color: var(--accent);
  margin: 1.4rem 0 0.2rem; scroll-margin-top: 1rem;
}
.gloss-list dt:first-child { margin-top: 0; }
.gloss-list dd { margin: 0; }
.gloss-list .see, .gloss-list .src {
  display: inline; font-size: 0.82rem; color: var(--dim);
}
.gloss-list .see { margin-left: 0.4rem; }
.gloss-list .src {
  margin-left: 0.4rem; text-decoration: none;
  border-bottom: 1px dotted var(--rule);
}

/* what you came for, held for a moment */
.gloss-list dt.here, .gloss-list dd.here { background: var(--lit); }
.gloss-list dt.here { box-shadow: -0.5rem 0 0 var(--lit); }
.gloss-list dd.here { box-shadow: -0.5rem 0 0 var(--lit), 0.5rem 0 0 var(--lit); }