/* First Light — tablet edition. One reading column, newspaper type, one accent colour. */

@font-face { font-family: "Literata"; font-weight: 400; src: url(fonts/Literata-400.ttf); font-display: swap; }
@font-face { font-family: "Literata"; font-weight: 700; src: url(fonts/Literata-700.ttf); font-display: swap; }
@font-face { font-family: "Literata"; font-style: italic; font-weight: 400; src: url(fonts/Literata-400i.ttf); font-display: swap; }
@font-face { font-family: "Playfair"; font-weight: 700; src: url(fonts/PlayfairDisplay-700.ttf); font-display: swap; }
@font-face { font-family: "Playfair"; font-weight: 900; src: url(fonts/PlayfairDisplay-900.ttf); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 500; src: url(fonts/Inter-500.ttf); font-display: swap; }
@font-face { font-family: "Inter"; font-weight: 700; src: url(fonts/Inter-700.ttf); font-display: swap; }
@font-face { font-family: "Chess"; src: url(fonts/ChessPieces.ttf); }

:root {
  --paper: #fbf8f2; --paper-2: #f3eee4; --ink: #1b1a17; --ink-2: #57534a; --rule: #d9d2c3;
  --accent: #b3261e; --accent-soft: #f6e3e1; --good: #2e6b3a; --good-soft: #e3efe4; --bad: #a3261e; --bad-soft: #f7e1df;
  --sq-light: #efe6d2; --sq-dark: #b99b73; --sq-hi: #e8c35a;
  --col: 44rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #17150f; --paper-2: #221f17; --ink: #ece6d8; --ink-2: #b1a992; --rule: #3a3528;
    --accent: #e0736b; --accent-soft: #3a2320; --good: #8fcf98; --good-soft: #1f3322; --bad: #ef8b82; --bad-soft: #3a2320;
    --sq-light: #6b6252; --sq-dark: #463d30; --sq-hi: #8a7432;
  }
}
:root[data-theme="dark"] {
  --paper: #17150f; --paper-2: #221f17; --ink: #ece6d8; --ink-2: #b1a992; --rule: #3a3528;
  --accent: #e0736b; --accent-soft: #3a2320; --good: #8fcf98; --good-soft: #1f3322; --bad: #ef8b82; --bad-soft: #3a2320;
  --sq-light: #6b6252; --sq-dark: #463d30; --sq-hi: #8a7432;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Literata", Georgia, serif; font-size: 19px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 900px) { body { font-size: 20px; } }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; color: inherit; }
a { color: var(--accent); }
em { font-style: italic; }
p { margin: 0 0 0.8em; }

/* ---------- chrome ---------- */
.topbar {
  position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--rule);
}
.topbar-inner { max-width: calc(var(--col) + 4rem); margin: 0 auto; padding: 0.55rem 1rem; display: flex; align-items: center; gap: 1rem; }
.topbar .mark { font-family: "Playfair"; font-weight: 900; font-size: 1.2rem; white-space: nowrap; }
.topbar nav { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; flex: 1; }
.topbar nav::-webkit-scrollbar { display: none; }
.topbar nav a {
  font-family: "Inter"; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none; padding: 0.4rem 0.6rem; border-radius: 99px; white-space: nowrap;
}
.topbar nav a.on { background: var(--ink); color: var(--paper); }
.progress { height: 3px; background: var(--accent); width: 0; transition: width 0.2s; }
.iconbtn { background: none; border: 1px solid var(--rule); border-radius: 99px; width: 2.2rem; height: 2.2rem; cursor: pointer; }

main { max-width: calc(var(--col) + 2rem); margin: 0 auto; padding: 0 1rem 6rem; }
section.part { padding-top: 2.5rem; }

/* ---------- type ---------- */
.kicker { font-family: "Inter"; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.5rem; }
.label { font-family: "Inter"; font-weight: 700; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; margin: 0 0 0.5rem; }
.meta { font-family: "Inter"; font-size: 0.75rem; letter-spacing: 0.05em; color: var(--ink-2); text-transform: uppercase; }
h1, h2, h3 { font-family: "Playfair"; font-weight: 700; line-height: 1.12; margin: 0 0 0.5rem; text-wrap: balance; }
h2.hed { font-size: 2rem; }
h3.sub { font-family: "Inter"; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin: 1.8rem 0 0.6rem; }
.dek { font-style: italic; font-size: 1.12rem; line-height: 1.4; color: var(--ink-2); margin-bottom: 1rem; }
.leadin { font-family: "Inter"; font-weight: 700; font-size: 0.82em; letter-spacing: 0.05em; text-transform: uppercase; }
.rule { border: 0; border-top: 1px solid var(--rule); margin: 1.2rem 0; }
.article { margin: 0 0 3rem; }
.article p { text-align: justify; hyphens: auto; }

/* ---------- section openers ---------- */
.opener { text-align: center; padding: 3rem 0 2rem; border-top: 3px double var(--ink); margin-top: 2rem; }
.opener .numeral { font-family: "Playfair"; font-weight: 900; font-size: 3.5rem; line-height: 1; margin: 0; color: var(--accent); }
.opener h2 { font-size: 2.6rem; margin: 0.2rem 0 0.4rem; }
.opener p { font-style: italic; color: var(--ink-2); max-width: 30rem; margin: 0 auto 0.4rem; }

/* ---------- cover ---------- */
.cover { text-align: center; padding-top: 1.5rem; }
.cover .tag { font-family: "Inter"; font-weight: 700; font-size: 0.7rem; letter-spacing: 0.3em; }
.cover h1 { font-weight: 900; font-size: clamp(3rem, 9vw, 5rem); margin: 0.2rem 0 0; letter-spacing: -0.01em; }
.dateline { font-family: "Inter"; font-size: 0.78rem; letter-spacing: 0.14em; border-top: 3px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 0.5rem 0; margin: 0.5rem 0 1.8rem; }
.cover .lead h2 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
.contents { width: 100%; border-collapse: collapse; margin: 1.5rem 0; text-align: left; }
.contents td { padding: 0.7rem 0.2rem; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.contents td.n { font-family: "Playfair"; font-weight: 700; color: var(--accent); width: 2.5rem; }
.contents a { color: var(--ink); text-decoration: none; font-weight: 700; }
.contents span { display: block; font-style: italic; font-weight: 400; font-size: 0.9em; color: var(--ink-2); }
.contents td.m { font-family: "Inter"; font-size: 0.75rem; text-align: right; white-space: nowrap; color: var(--ink-2); }
.streak { font-family: "Inter"; font-size: 0.8rem; color: var(--ink-2); }

/* ---------- boxes ---------- */
.box { border: 2px solid var(--ink); border-radius: 4px; padding: 1.1rem 1.2rem 0.6rem; margin: 1.5rem 0; }
.box.fill { background: var(--paper-2); border-color: transparent; }
.box.accent { border-color: var(--accent); }
.side { border-left: 4px solid var(--accent); padding: 0.1rem 0 0.1rem 1rem; margin: 1.4rem 0; }
.quote { border-left: 3px solid var(--ink); padding-left: 1.1rem; font-style: italic; margin: 1.4rem 0; }
.quote .attrib { font-family: "Inter"; font-style: normal; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
figure { margin: 1rem 0 1.4rem; }
figure img { border-radius: 3px; width: 100%; }
figcaption { font-family: "Inter"; font-size: 0.78rem; line-height: 1.4; color: var(--ink-2); margin-top: 0.4rem; }
.chart-title { font-family: "Playfair"; font-weight: 700; font-size: 1.25rem; margin: 0; }
.chart-sub { font-family: "Inter"; font-size: 0.8rem; color: var(--ink-2); margin: 0 0 0.5rem; }
table.data { border-collapse: collapse; margin: 0.8rem auto 1.2rem; font-size: 0.9rem; }
table.data th, table.data td { border: 1px solid var(--rule); padding: 0.4rem 0.7rem; text-align: center; }
table.data th { font-family: "Inter"; font-size: 0.75rem; background: var(--paper-2); }
.formula { text-align: center; font-weight: 700; font-size: 1.1rem; margin: 1rem 0; }
ul.takeaways { margin: 0.2rem 0 0.8rem 1.1rem; padding: 0; }
.brief-item { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
.brief-item .where { font-family: "Inter"; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--accent); margin-right: 0.4rem; }

/* ---------- interaction ---------- */
.btn {
  font-family: "Inter"; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border: 0; border-radius: 99px; padding: 0.75rem 1.2rem; cursor: pointer;
  min-height: 2.8rem;
}
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); }
.btn.small { padding: 0.45rem 0.8rem; min-height: 2.2rem; font-size: 0.72rem; }
.btn:disabled { opacity: 0.35; cursor: default; }
.btnrow { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0.8rem 0; }
.reveal { margin: 0.8rem 0 1.2rem; }
.reveal .hidden-body { display: none; }
.reveal.open .hidden-body { display: block; animation: fade 0.25s; }
.reveal.open > .btn { display: none; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.pause { border: 2px dashed var(--accent); border-radius: 6px; padding: 1rem 1.1rem 0.4rem; margin: 1.5rem 0; background: var(--accent-soft); }
.locked { display: none; }
.feedback { font-family: "Inter"; font-weight: 700; font-size: 0.9rem; padding: 0.6rem 0.9rem; border-radius: 6px; margin: 0.6rem 0; }
.feedback.good { background: var(--good-soft); color: var(--good); }
.feedback.bad { background: var(--bad-soft); color: var(--bad); }
.puzzle { border-top: 3px solid var(--ink); padding-top: 0.8rem; margin: 2.5rem 0; }
.puzzle h2 { font-size: 1.7rem; }
.difficulty { font-family: "Inter"; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-2); margin-bottom: 1rem; }

/* options (flaw) */
.options { list-style: none; padding: 0; margin: 1rem 0; }
.options li button {
  width: 100%; text-align: left; background: var(--paper-2); border: 1.5px solid transparent; border-radius: 8px;
  padding: 0.8rem 1rem; margin: 0 0 0.5rem; cursor: pointer; line-height: 1.4; display: flex; gap: 0.8rem;
}
.options li button b { font-family: "Inter"; }
.options li button.right { border-color: var(--good); background: var(--good-soft); }
.options li button.wrong { border-color: var(--bad); background: var(--bad-soft); }

/* logic grid */
table.solve { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.95rem; }
table.solve th, table.solve td { border: 1px solid var(--rule); padding: 0.35rem; text-align: center; }
table.solve th { font-family: "Inter"; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; background: var(--paper-2); }
table.solve select { font: inherit; width: 100%; padding: 0.45rem; border-radius: 6px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); }
table.solve td.right select { border-color: var(--good); background: var(--good-soft); }
table.solve td.wrong select { border-color: var(--bad); background: var(--bad-soft); }

/* games */
.game { background: var(--paper-2); border-radius: 10px; padding: 1.2rem; margin: 1rem 0; }
.game .status { font-family: "Inter"; font-weight: 700; font-size: 0.9rem; min-height: 1.4rem; margin-bottom: 0.8rem; }
.game .log { font-family: "Inter"; font-size: 0.78rem; color: var(--ink-2); margin-top: 0.8rem; }
.tokens { display: flex; flex-wrap: wrap; gap: 6px; margin: 0.6rem 0 1rem; }
.tok { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); transition: transform 0.2s, opacity 0.3s; }
.tok.gone { opacity: 0.12; transform: scale(0.6); }
.heap { display: flex; align-items: center; gap: 6px; margin: 0.5rem 0; min-height: 34px; }
.heap .name { font-family: "Inter"; font-weight: 700; width: 1.6rem; }
.heap button.stone { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--accent); cursor: pointer; }
.heap button.stone:hover, .heap button.stone.pre { outline: 3px solid var(--ink); }
.bignum { font-family: "Playfair"; font-weight: 900; font-size: 4rem; text-align: center; margin: 0.2rem 0 0.6rem; }
.wgrid { display: grid; gap: 2px; margin: 0.6rem auto; max-width: 30rem; }
.wgrid button { aspect-ratio: 1; border: 0; background: var(--paper); border-radius: 3px; cursor: default; font-family: "Chess"; font-size: 1.5rem; line-height: 1; padding: 0; }
.wgrid button.reach { background: var(--accent-soft); cursor: pointer; }
.wgrid button.corner { outline: 2px solid var(--accent); }
.pins { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0.6rem 0; }
.pinrow { display: flex; gap: 4px; padding: 6px 8px; background: var(--paper); border-radius: 8px; }
.pinrow button { width: 26px; height: 40px; border-radius: 13px 13px 6px 6px; border: 0; background: var(--ink); cursor: pointer; }
.pinrow button.down { background: var(--rule); opacity: 0.4; cursor: default; }
.pile { display: inline-flex; flex-direction: column; align-items: center; margin: 0 0.8rem 0.8rem 0; cursor: pointer; background: none; border: 0; }
.pile .stack { display: flex; flex-direction: column-reverse; gap: 3px; }
.pile .stack i { display: block; width: 36px; height: 9px; border-radius: 3px; background: var(--accent); }
.pile .n { font-family: "Inter"; font-weight: 700; font-size: 0.8rem; margin-top: 4px; }
.pile.sel .stack i { background: var(--ink); }

/* chess */
.board { display: grid; grid-template-columns: repeat(8, 1fr); width: min(100%, 30rem); margin: 0.8rem auto; border: 3px solid var(--ink); border-radius: 3px; touch-action: manipulation; }
.board button { aspect-ratio: 1; border: 0; padding: 0; font-family: "Chess"; font-size: clamp(1.6rem, 6vw, 2.6rem); line-height: 1; cursor: pointer; position: relative; color: #111; }
.board button.l { background: var(--sq-light); }
.board button.d { background: var(--sq-dark); }
.board button.sel { box-shadow: inset 0 0 0 4px var(--accent); }
.board button.last { box-shadow: inset 0 0 0 4px var(--sq-hi); }
.board button .coord { position: absolute; left: 3px; bottom: 1px; font-family: "Inter"; font-size: 0.55rem; color: #3b3326; opacity: 0.8; }
.board .w { color: #fff; text-shadow: 0 0 1px #000, 0 0 1px #000, 0 0 2px #000; }

/* memory */
.memgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 2rem; margin: 0.8rem 0; }
.memgrid div { font-family: "Playfair"; font-weight: 700; font-size: 1.3rem; }
.memgrid small { font-family: "Inter"; font-size: 0.7rem; color: var(--ink-2); margin-right: 0.5rem; }
.digits { font-family: "Inter"; font-weight: 700; font-size: 1.6rem; letter-spacing: 0.15em; text-align: center; }
.timer { font-family: "Inter"; font-weight: 700; font-size: 2.2rem; text-align: center; color: var(--accent); }
textarea, input[type=text], input[type=password] {
  font: inherit; width: 100%; padding: 0.7rem; border-radius: 8px; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink);
}
.recall-q { padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }

/* philosophy + word */
h2.word { font-family: "Playfair"; font-weight: 900; font-size: 3.2rem; margin: 0.1rem 0; }
.pron { font-family: "Inter"; font-size: 0.9rem; color: var(--ink-2); }

/* end + lock */
.finis { text-align: center; padding: 4rem 0 2rem; border-top: 3px double var(--ink); margin-top: 3rem; }
.finis h2 { font-size: 2.4rem; }
.finis .q { font-style: italic; font-size: 1.15rem; max-width: 32rem; margin: 1.5rem auto 0.4rem; }
.stats { display: flex; justify-content: center; gap: 2rem; margin: 1.5rem 0; font-family: "Inter"; }
.stats b { display: block; font-size: 1.8rem; font-family: "Playfair"; font-weight: 900; color: var(--accent); }
.stats span { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.lock { min-height: 100vh; display: grid; place-items: center; padding: 1rem; }
.lock .card { max-width: 24rem; width: 100%; text-align: center; }
.lock h1 { font-weight: 900; font-size: 3.2rem; }
.lock p { color: var(--ink-2); }
.loading { text-align: center; padding: 5rem 1rem; font-family: "Inter"; color: var(--ink-2); }

/* ---------- the Forge ---------- */
:root { --you: #0f7c8c; --them: #d9603f; --glow: #f0b43c; --board: #f1ead9; --board-2: #e7dcc4; --wall: #3a342a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --you: #4fc3cf; --them: #f08a6c; --glow: #f5c55a; --board: #2a261d; --board-2: #332e23; --wall: #0e0c08; } }
:root[data-theme="dark"] { --you: #4fc3cf; --them: #f08a6c; --glow: #f5c55a; --board: #2a261d; --board-2: #332e23; --wall: #0e0c08; }
.fgame { background: radial-gradient(120% 90% at 50% 0%, var(--paper-2), var(--board)); border-radius: 18px; padding: 1.1rem 1.1rem 0.8rem; margin: 1.2rem 0;
  box-shadow: inset 0 0 0 1px var(--rule), 0 10px 30px -18px rgba(0,0,0,0.45); }
.fstatus { font-family: "Inter"; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.01em; min-height: 1.5rem; }
.fstatus.won { color: var(--good); } .fstatus.lost { color: var(--bad); }
.fboard { margin: 0.6rem 0; display: flex; flex-direction: column; align-items: center; }
.fboard > * { width: 100%; max-width: 34rem; }
.fsvg { width: 100%; max-width: 34rem; height: auto; touch-action: manipulation; user-select: none; }
.fchips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.5rem 0; }
.fchips.center { justify-content: center; }
.chip { font-family: "Inter"; font-weight: 600; font-size: 0.78rem; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink);
  border-radius: 99px; padding: 0.5rem 0.85rem; cursor: pointer; transition: transform 0.12s, border-color 0.12s; }
.chip:hover { border-color: var(--you); transform: translateY(-1px); }
.chip.hot { border-color: var(--you); color: var(--you); }
.chip.big { font-size: 1.05rem; padding: 0.75rem 1.2rem; }
.flog { display: flex; flex-wrap: wrap; gap: 0.35rem; font-family: "Inter"; font-size: 0.72rem; margin-top: 0.4rem; }
.flog span { padding: 0.2rem 0.55rem; border-radius: 99px; background: var(--paper); border: 1px solid var(--rule); }
.flog span.you { color: var(--you); } .flog span.them { color: var(--them); }
.firstlist { list-style: none; padding: 0; font-family: "Inter"; font-size: 0.85rem; }
.firstlist li.w { color: var(--good); } .firstlist li.l { color: var(--ink-2); }
/* boards */
.fsvg .cell { fill: var(--board-2); transition: fill 0.2s; }
.fsvg .cell.alt { fill: var(--board); }
.fsvg .cell.cold { fill: color-mix(in srgb, var(--you) 28%, var(--board)); }
.fsvg .cell.dest { fill: color-mix(in srgb, var(--glow) 55%, var(--board)); cursor: pointer; animation: pulse 1.6s ease-in-out infinite; }
.fsvg .wall, .fsvg .pit { fill: var(--wall); }
.fsvg .cellnum { font-family: "Inter"; font-size: 11px; fill: var(--ink-2); text-anchor: middle; }
.fsvg .goalstar { font-size: 22px; fill: var(--glow); text-anchor: middle; pointer-events: none; }
.fsvg .token { fill: var(--you); stroke: var(--paper); stroke-width: 3; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.25)); transition: all 0.25s; }
.fsvg .token.can { cursor: pointer; }
.fsvg .token.sel { stroke: var(--glow); stroke-width: 5; }
.fsvg .orb { fill: var(--them); stroke: color-mix(in srgb, var(--them) 60%, #fff); stroke-width: 1.5; }
.fsvg .pilebg { fill: var(--board-2); opacity: 0.6; }
.fsvg .pilecol.can { cursor: pointer; } .fsvg .pilecol.can:hover .pilebg, .fsvg .pilecol.sel .pilebg { fill: color-mix(in srgb, var(--glow) 40%, var(--board)); opacity: 1; }
.fsvg .pilelab { font-family: "Inter"; font-weight: 700; font-size: 14px; fill: var(--ink); text-anchor: middle; }
.fsvg .road { stroke: var(--ink-2); stroke-width: 2.5; opacity: 0.55; }
.fsvg .road.used { stroke: var(--you); opacity: 0.9; stroke-width: 3.5; }
.fsvg .arrowhead { fill: var(--ink-2); }
.fsvg .town circle { fill: var(--board-2); stroke: var(--ink-2); stroke-width: 2; transition: all 0.2s; }
.fsvg .town.seen circle { fill: color-mix(in srgb, var(--you) 25%, var(--board)); }
.fsvg .town.cur circle { fill: var(--you); stroke: var(--glow); stroke-width: 5; }
.fsvg .town.dest { cursor: pointer; } .fsvg .town.dest circle { fill: color-mix(in srgb, var(--glow) 60%, var(--board)); animation: pulse 1.6s ease-in-out infinite; }
.fsvg .townname { font-family: "Inter"; font-weight: 600; font-size: 14px; fill: var(--ink); text-anchor: middle; }
.fsvg .domino { stroke: var(--paper); stroke-width: 2.5; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.25)); }
.fsvg .domino.you { fill: var(--you); } .fsvg .domino.them { fill: var(--them); }
.fsvg .toad { fill: var(--you); } .fsvg .toad.can { cursor: pointer; stroke: var(--glow); stroke-width: 3; }
.fsvg .frog { fill: var(--them); }
.fsvg .spot circle { stroke: var(--ink-2); stroke-width: 2; transition: all 0.2s; }
.fsvg .spot.free circle { fill: var(--board-2); }
.fsvg .spot.you circle { fill: var(--you); } .fsvg .spot.them circle { fill: var(--them); }
.fsvg .spot.dest { cursor: pointer; } .fsvg .spot.dest circle { fill: color-mix(in srgb, var(--glow) 55%, var(--board)); animation: pulse 1.6s ease-in-out infinite; }
.fsvg .spotnum { font-family: "Inter"; font-weight: 700; font-size: 13px; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.numboard { text-align: center; }
.bignum2 { font-family: "Playfair"; font-weight: 900; font-size: clamp(4rem, 14vw, 7rem); line-height: 1; margin: 0.4rem 0 0.8rem; color: var(--you); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
.movelist summary { font-family: "Inter"; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); cursor: pointer; margin-top: 0.3rem; }
.fsvg { max-height: 30rem; }

/* ---------- the Leap: Rule Hunter ---------- */
.rcard { width: 72px; height: 96px; }
.rcard-bg { fill: var(--paper); stroke: var(--rule); stroke-width: 1.5; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.12)); }
.badge-yes { fill: var(--good); } .badge-no { fill: var(--bad); }
.badge-t { font-family: "Inter"; font-weight: 700; font-size: 13px; fill: #fff; text-anchor: middle; }
.startex { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1rem 0; }
.notebook-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.lab { background: radial-gradient(120% 90% at 50% 0%, var(--paper-2), var(--board)); border-radius: 18px; padding: 1rem 1.1rem; margin: 1rem 0; box-shadow: inset 0 0 0 1px var(--rule); }
.builder { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.builder .rcard { width: 96px; height: 128px; }
.builder-rows { display: grid; gap: 0.45rem; }
.seg { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.segbtn { min-width: 2.6rem; height: 2.6rem; border-radius: 10px; border: 1.5px solid var(--rule); background: var(--paper); cursor: pointer; font-family: "Inter"; font-weight: 600; font-size: 0.8rem; padding: 0 0.6rem; display: grid; place-items: center; }
.segbtn.on { border-color: var(--you); box-shadow: 0 0 0 2px color-mix(in srgb, var(--you) 35%, transparent); }
.segicon { width: 22px; height: 22px; fill: var(--ink); }
.swatch { width: 20px; height: 20px; border-radius: 50%; display: block; }
.numin { width: 8rem !important; font-size: 1.4rem; text-align: center; }
.nchip { font-family: "Inter"; font-weight: 700; font-size: 1rem; padding: 0.45rem 0.8rem; border-radius: 10px; background: var(--paper); border: 1.5px solid var(--rule); }
.nchip.yes { border-color: var(--good); color: var(--good); } .nchip.no { border-color: var(--bad); color: var(--bad); }
.exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.8rem; margin: 1rem 0; }
.exam-item { background: var(--paper-2); border-radius: 12px; padding: 0.7rem; text-align: center; display: flex; flex-direction: column; align-items: center; }
.btn.ghost.on { background: var(--ink); color: var(--paper); }

/* ---------- the Leap: grid machine ---------- */
:root { --arc0: #efe8d8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --arc0: #2d291f; } }
:root[data-theme="dark"] { --arc0: #2d291f; }
.pairs { display: grid; gap: 1rem; margin: 1rem 0; }
.pair { background: var(--paper-2); border-radius: 14px; padding: 0.7rem 0.9rem; }
.pair.test { outline: 2px solid var(--glow); }
.pairrow { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.3rem; }
.arrow { font-size: 1.6rem; color: var(--ink-2); }
.agrid { display: grid; gap: 2px; width: min(42%, 11rem); background: var(--rule); padding: 2px; border-radius: 6px; }
.agrid.big { width: min(100%, 19rem); touch-action: none; }
.acell { aspect-ratio: 1; border-radius: 2px; }
.agrid.big .acell { cursor: crosshair; border-radius: 3px; }
.palette { display: flex; gap: 0.5rem; margin: 0.8rem 0; flex-wrap: wrap; }
.pswatch { width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 3px solid var(--paper); box-shadow: 0 0 0 1.5px var(--rule); cursor: pointer; font-size: 0.9rem; color: var(--ink-2); }
.pswatch.on { box-shadow: 0 0 0 3px var(--ink); }

/* ---------- the Duel ---------- */
table.payoff { border-collapse: separate; border-spacing: 4px; margin: 1rem auto; font-family: "Inter"; }
table.payoff th { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); padding: 0.4rem; }
table.payoff th.corner { font-size: 0.62rem; text-transform: none; }
table.payoff td { width: 4.2rem; height: 3.2rem; text-align: center; font-family: "Playfair"; font-weight: 900; font-size: 1.6rem; background: var(--paper-2); border-radius: 10px; }
.mix { display: grid; gap: 0.5rem; margin: 0.6rem 0; }
.mixrow { display: grid; grid-template-columns: 8rem 1fr 3.5rem; align-items: center; gap: 0.7rem; font-family: "Inter"; font-size: 0.85rem; }
.mixrow input { accent-color: var(--you); }
.rounds { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.rchip { font-family: "Inter"; font-size: 0.72rem; background: var(--paper); border: 1px solid var(--rule); padding: 0.25rem 0.6rem; border-radius: 99px; }

/* ---------- knights and knaves ---------- */
.islanders { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.9rem; margin: 1rem 0; }
.islander { background: var(--paper-2); border-radius: 16px; padding: 1rem; text-align: center; transition: box-shadow 0.2s; }
.islander.knight { box-shadow: inset 0 0 0 2px var(--good); } .islander.knave { box-shadow: inset 0 0 0 2px var(--bad); }
.avatar { width: 3rem; height: 3rem; border-radius: 50%; margin: 0 auto 0.4rem; display: grid; place-items: center; font-family: "Playfair"; font-weight: 900; font-size: 1.4rem; background: var(--you); color: var(--paper); }
.said { font-style: italic; font-size: 0.95rem; min-height: 3.2rem; }
.answer-holder { flex: 1 1 12rem; max-width: 19rem; }
.answer-holder .agrid.big { width: 100%; }