/* ==========================================================================
   Combinatorial Game Theory — tokens.
   ==========================================================================

   The structural stylesheet is essay-kit's base.css, loaded first. Everything
   below is this site's identity and nothing else.

   Light mode is ivory — a games table, bone and boxwood. Dark mode is walnut,
   the other half of the same table, rather than a generic night theme.

   The three principal roles are not chosen. bLue is Left and Red is Right,
   which is Conway's own mnemonic and the convention of Winning Ways, of
   Hackenbush and of every paper in the field; green is an edge either player
   may take, which is what makes a game impartial. Adopting them means a reader
   who knows the subject can read these figures without a key, and a reader who
   does not learns the convention they will meet everywhere else.
   ========================================================================== */

:root {
  --paper:   #faf8f3;
  --paper-2: #f2efe6;
  --paper-3: #e6e1d3;
  --ink:     #1c1a16;
  --ink-2:   #48443c;
  --ink-3:   #676157;
  --rule:    #d8d2c2;
  --rule-3:  #e9e4d7;
  --rule-2:  #e9e4d7;

  --c-a: #1f4fa8;   /* Left — bLue, and every edge only Left may cut */
  --c-b: #b3231f;   /* Right — Red */
  --c-c: #16704a;   /* green — an edge either player may take: impartial */
  --c-d: #7a5a12;   /* the value: a number, a temperature, a Grundy value */
  --c-e: #8a2a86;   /* fuzzy, confused with zero, or otherwise not a number */
  --c-warn: #a52218;

  --fig-ink:   var(--ink);
  --fig-soft:  #5a554b;
  --fig-faint: #c6c0ae;

  /* Board and pieces, which several figures need and which are not roles. */
  --board:      #efe9d9;
  --board-alt:  #e2dac6;
  --board-edge: #a49b85;

  --tint: 13%;
  --tint-strong: 24%;

  --font-body: Georgia, "Nimbus Roman", "Liberation Serif", "Times New Roman", serif;
  --font-display: var(--font-body);
  --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 34rem;
  --radius: 3px;
  --shadow: 0 1px 2px rgb(28 26 22 / 8%), 0 8px 24px -14px rgb(28 26 22 / 28%);

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:   #1a1512;
    --paper-2: #241d18;
    --paper-3: #302720;
    --ink:     #f0e9e0;
    --ink-2:   #c0b6a8;
    --ink-3:   #9a8f80;
    --rule:    #3d3229;
    --rule-2:  #291f1a;
    --rule-3:  #291f1a;

    --c-a: #77aaf5;
    --c-b: #ff8b7a;
    --c-c: #4fcb96;
    --c-d: #e3bd5c;
    --c-e: #e08ede;
    --c-warn: #fb7b6f;

    --fig-ink:   #ece5db;
    --fig-soft:  #9c9182;
    --fig-faint: #3f342b;

    --board:      #2b2219;
    --board-alt:  #362b21;
    --board-edge: #7d7263;

    --tint: 19%;
    --tint-strong: 32%;
    --shadow: 0 1px 2px rgb(0 0 0 / 46%), 0 12px 34px -16px rgb(0 0 0 / 78%);
  }
}

:root[data-theme="dark"] {
  --paper:   #1a1512;
  --paper-2: #241d18;
  --paper-3: #302720;
  --ink:     #f0e9e0;
  --ink-2:   #c0b6a8;
  --ink-3:   #9a8f80;
  --rule:    #3d3229;
  --rule-2:  #291f1a;
  --rule-3:  #291f1a;

  --c-a: #77aaf5;
  --c-b: #ff8b7a;
  --c-c: #4fcb96;
  --c-d: #e3bd5c;
  --c-e: #e08ede;
  --c-warn: #fb7b6f;

  --fig-ink:   #ece5db;
  --fig-soft:  #9c9182;
  --fig-faint: #3f342b;

  --board:      #2b2219;
  --board-alt:  #362b21;
  --board-edge: #7d7263;

  --tint: 19%;
  --tint-strong: 32%;
  --shadow: 0 1px 2px rgb(0 0 0 / 46%), 0 12px 34px -16px rgb(0 0 0 / 78%);
}

/* --- site-specific roles -------------------------------------------------- */

/* The two players, and the edges only one of them may take. */
.fig-svg .left        { stroke: var(--c-a); stroke-width: 2.6; fill: none; stroke-linecap: round; }
.fig-svg .right       { stroke: var(--c-b); stroke-width: 2.6; fill: none; stroke-linecap: round; }
.fig-svg .either      { stroke: var(--c-c); stroke-width: 2.6; fill: none; stroke-linecap: round; }
.fig-svg .left-fill   { fill: color-mix(in oklab, var(--c-a) 58%, var(--paper)); stroke: var(--c-a); stroke-width: 1.3; }
.fig-svg .right-fill  { fill: color-mix(in oklab, var(--c-b) 58%, var(--paper)); stroke: var(--c-b); stroke-width: 1.3; }
.fig-svg .either-fill { fill: color-mix(in oklab, var(--c-c) 52%, var(--paper)); stroke: var(--c-c); stroke-width: 1.3; }

/* The ground a Hackenbush position stands on, and its nodes. */
.fig-svg .ground      { stroke: var(--fig-ink); stroke-width: 2.6; }
.fig-svg .node        { fill: var(--fig-ink); stroke: none; }
.fig-svg .node-open   { fill: var(--paper); stroke: var(--fig-ink); stroke-width: 1.4; }

/* Boards: Domineering, Toads and Frogs, anything on a grid. */
.fig-svg .cell        { fill: var(--board); stroke: var(--board-edge); stroke-width: 1.1; }
.fig-svg .cell-alt    { fill: var(--board-alt); stroke: var(--board-edge); stroke-width: 1.1; }
.fig-svg .cell-empty  { fill: none; stroke: var(--board-edge); stroke-width: 1.1; }
.fig-svg .heap        { fill: color-mix(in oklab, var(--c-d) 44%, var(--paper)); stroke: var(--c-d); stroke-width: 1.2; }

/* Values, trees and everything the solver computed. */
.fig-svg .value       { fill: var(--c-d); stroke: none; }
.fig-svg .edge        { stroke: var(--fig-soft); stroke-width: 1.4; fill: none; }
.fig-svg .edge-left   { stroke: var(--c-a); stroke-width: 1.6; fill: none; }
.fig-svg .edge-right  { stroke: var(--c-b); stroke-width: 1.6; fill: none; }
.fig-svg .fuzzy       { stroke: var(--c-e); stroke-width: 2.2; fill: none; }
.fig-svg .fuzzy-fill  { fill: color-mix(in oklab, var(--c-e) var(--tint), var(--paper-2)); stroke: var(--c-e); stroke-width: 1.3; }
.fig-svg .mast        { stroke: var(--c-d); stroke-width: 2.2; fill: none; stroke-dasharray: 5 4; }
.fig-svg .axis        { stroke: var(--fig-soft); stroke-width: 1.4; fill: none; }
.fig-svg .grid        { stroke: var(--fig-faint); stroke-width: 0.9; }
.fig-svg text.mono    { font-family: var(--font-mono); }

/* A rule under section headings. */
.section-head::after { border-top-style: solid; }

/* --- the play control -----------------------------------------------------
   The strongest argument this site can make is to name the winner in advance
   and then be right. The control that lets a reader try is added by script;
   the position, its value and the winning move are in the server-rendered SVG,
   so a reader without JavaScript loses the game and keeps the argument. */

.play-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0.6rem 0 0; }

.play-btn {
  display: inline-flex; align-items: center; gap: 0.4em;
  font: 600 0.82rem/1 var(--font-ui);
  color: var(--c-a);
  background: color-mix(in oklab, var(--c-a) 9%, var(--paper));
  border: 1px solid color-mix(in oklab, var(--c-a) 34%, var(--paper));
  border-radius: 999px;
  padding: 0.45em 0.95em;
  cursor: pointer;
}
.play-btn:hover { background: color-mix(in oklab, var(--c-a) 16%, var(--paper)); }
.play-btn:focus-visible { outline: 2px solid var(--c-a); outline-offset: 2px; }
.play-btn[disabled] { opacity: 0.45; cursor: default; }
.play-note { font: 0.78rem/1.45 var(--font-ui); color: var(--ink-3); }
.play-note strong { color: var(--ink-2); font-weight: 600; }

/* A move the reader can take: only meaningful once the script is running. */
.fig-svg .playable { cursor: pointer; }
.fig-svg .playable:hover { stroke-width: 4.5; }
/* Filled playables — Domineering pairs, toads, Nim counters — have no stroke to
   thicken, so they answer with the outline instead. */
.fig-svg rect.playable, .fig-svg circle.playable {
  stroke: color-mix(in oklab, var(--c-a) 70%, transparent);
  stroke-width: 1.5;
}
.fig-svg rect.playable:hover, .fig-svg circle.playable:hover {
  stroke: var(--c-a); stroke-width: 2.5;
}
.fig-svg .playable:focus-visible,
.fig-svg .play-target:focus-visible { outline: 2px solid var(--c-a); outline-offset: 2px; }
/* A place a piece could go, rather than a piece: it must read as an invitation
   and must not hide the board it sits on. */
.fig-svg .play-target {
  fill: color-mix(in oklab, var(--c-a) 15%, transparent);
  stroke: color-mix(in oklab, var(--c-a) 70%, transparent);
  stroke-width: 1.4;
  cursor: pointer;
}
.fig-svg .play-target:hover {
  fill: color-mix(in oklab, var(--c-a) 30%, transparent);
  stroke: var(--c-a); stroke-width: 2;
}
.fig-svg .play-tick {
  stroke: color-mix(in oklab, var(--c-a) 75%, transparent);
  stroke-width: 2; stroke-linecap: round; pointer-events: none;
}