/* PlayJev demo page. Ink and blue: a deep navy page, one blue for the move the model took, coral #F0545C for the
   teacher and for anything that went wrong, amber for the numbers that matter. System fonts, no external
   resources, light and dark. */
:root {
  color-scheme: light;
  --bg: #f4f6fa;
  --bg-2: #eaeef6;
  --card: #ffffff;
  --sunk: #f0f3f9;
  --line: #dde3ee;
  --line-soft: #e9edf5;
  --fg: #0d1320;
  --fg-2: #39435a;
  --muted: #64708a;
  --board: #0b1018;
  --accent: #1f6fe5;
  --accent-2: #6d5ce7;
  --accent-soft: #dbe7fd;
  --amber: #b9770e;
  --coral: #e0424f;
  --coral-soft: #fbdcde;
  --track: #e6eaf3;
  --btn: #ffffff;
  --btn-hover: #eef2fa;
  --btn-on: #12203a;
  --btn-on-fg: #ffffff;
  --code: #f2f5fb;
  --link: #1f6fe5;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 26, 48, .06), 0 10px 30px rgba(16, 26, 48, .07);
  --shadow-lift: 0 2px 6px rgba(16, 26, 48, .08), 0 18px 44px rgba(16, 26, 48, .12);
  --glow: radial-gradient(1100px 520px at 78% -12%, rgba(109, 92, 231, .16), transparent 60%),
          radial-gradient(760px 420px at 6% -6%, rgba(31, 111, 229, .14), transparent 62%);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #080b12;
    --bg-2: #0c111b;
    --card: #121826;
    --sunk: #0d1320;
    --line: #232c40;
    --line-soft: #1a2130;
    --fg: #eef1f7;
    --fg-2: #c2cada;
    --muted: #8894ac;
    --board: #05070c;
    --accent: #4d8dff;
    --accent-2: #a78bfa;
    --accent-soft: #16294b;
    --amber: #f5b43c;
    --coral: #ff5f6d;
    --coral-soft: #3a1a20;
    --track: #1f2637;
    --btn: #172033;
    --btn-hover: #1e2a42;
    --btn-on: #eef1f7;
    --btn-on-fg: #080b12;
    --code: #0d1320;
    --link: #79aaff;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 38px rgba(0, 0, 0, .42);
    --shadow-lift: 0 2px 8px rgba(0, 0, 0, .55), 0 22px 56px rgba(0, 0, 0, .5);
    --glow: radial-gradient(1100px 540px at 78% -14%, rgba(167, 139, 250, .20), transparent 62%),
            radial-gradient(820px 460px at 4% -8%, rgba(77, 141, 255, .18), transparent 64%);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #080b12;
  --bg-2: #0c111b;
  --card: #121826;
  --sunk: #0d1320;
  --line: #232c40;
  --line-soft: #1a2130;
  --fg: #eef1f7;
  --fg-2: #c2cada;
  --muted: #8894ac;
  --board: #05070c;
  --accent: #4d8dff;
  --accent-2: #a78bfa;
  --accent-soft: #16294b;
  --amber: #f5b43c;
  --coral: #ff5f6d;
  --coral-soft: #3a1a20;
  --track: #1f2637;
  --btn: #172033;
  --btn-hover: #1e2a42;
  --btn-on: #eef1f7;
  --btn-on-fg: #080b12;
  --code: #0d1320;
  --link: #79aaff;
  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 14px 38px rgba(0, 0, 0, .42);
  --shadow-lift: 0 2px 8px rgba(0, 0, 0, .55), 0 22px 56px rgba(0, 0, 0, .5);
  --glow: radial-gradient(1100px 540px at 78% -14%, rgba(167, 139, 250, .20), transparent 62%),
          radial-gradient(820px 460px at 4% -8%, rgba(77, 141, 255, .18), transparent 64%);
}

* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0; color: var(--fg);
  background: var(--glow), linear-gradient(var(--bg-2), var(--bg) 620px);
  background-repeat: no-repeat; background-attachment: scroll;
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
b { font-weight: 600; }
.wrap { max-width: 1260px; margin: 0 auto; padding: 0 28px; }
h1 {
  font-size: clamp(30px, 3.5vw, 44px); font-weight: 680; line-height: 1.12; letter-spacing: -0.028em;
  margin: 0 0 16px; text-wrap: balance;
}
h2 { font-size: 28px; font-weight: 660; letter-spacing: -0.022em; line-height: 1.22; margin: 0 0 12px; }
h3 { font-size: 19px; font-weight: 640; letter-spacing: -0.012em; margin: 34px 0 8px; }
p { margin: 0 0 12px; max-width: 74ch; color: var(--fg-2); }
.quiet { color: var(--fg-2); }
#notice { color: var(--fg-2); }
#notice:empty { display: none; }
main section { padding: 58px 0 0; scroll-margin-top: 78px; }
main section + section { padding-top: 66px; }
.k-blue { color: var(--accent); }
.k-coral { color: var(--coral); }

/* ---------------------------------------------------------------- top bar */
.top {
  position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 93%, transparent);
  backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid transparent;
}
.top.stuck { border-bottom-color: var(--line); }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 56px; }
.brand { color: var(--fg); font-size: 17px; font-weight: 650; letter-spacing: -0.02em; }
.brand:hover { text-decoration: none; }
.top nav { display: flex; align-items: center; gap: 17px; font-size: 14.5px; }
.top nav a { color: var(--fg-2); }
.top nav a:hover { color: var(--fg); text-decoration: none; }
.top nav .navgap { width: 1px; height: 18px; background: var(--line); }
.top nav a.icon { display: inline-flex; align-items: center; font-size: 16px; line-height: 1; color: var(--fg-2); }
.top nav a.icon:hover { color: var(--accent); }
.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand-mark {
  width: 11px; height: 11px; border-radius: 3px; flex: none;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
@media (max-width: 820px) { .top nav a:not(.icon) { display: none; } }

button, select {
  font: inherit; font-size: 13px; line-height: 1.2; color: var(--fg-2); background: var(--btn);
  border: 1px solid var(--line); border-radius: 7px; padding: 5px 10px; cursor: pointer;
}
button:hover, select:hover { background: var(--btn-hover); color: var(--fg); }
button.on { background: var(--btn-on); color: var(--btn-on-fg); border-color: var(--btn-on); }
button:disabled { opacity: .4; cursor: default; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg { display: inline-flex; }
.seg button { border-radius: 0; margin-left: -1px; }
.seg button:first-child { border-radius: 7px 0 0 7px; margin-left: 0; }
.seg button:last-child { border-radius: 0 7px 7px 0; }
.seg button.on + button { border-left-color: var(--btn-on); }

/* ---------------------------------------------------------------- lead */
/* the project-page header: title, the link buttons, then the board itself */
.lead { padding-top: 48px; }
.pagetitle {
  text-align: center; margin: 0 auto 36px; text-wrap: initial;
  font-size: clamp(30px, 4vw, 50px); line-height: 1.14;
}
.hero-buttons { display: flex; justify-content: center; gap: 11px; flex-wrap: wrap; margin: 0 0 34px; }
.hero-buttons .btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 17px; border-radius: 9px;
  font-weight: 600; font-size: 14.5px; color: #fff; border: 0; letter-spacing: -0.01em;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.hero-buttons a.btn:hover { text-decoration: none; transform: translateY(-2px); filter: saturate(1.08); box-shadow: 0 8px 20px rgba(16, 26, 48, .22); }
.hero-buttons .btn svg { flex: none; width: 15px; height: 15px; }
.hero-buttons .tagx { font-style: normal; font-size: 11px; font-weight: 600; opacity: .72; letter-spacing: .01em; }
/* not published yet: the button keeps its colour so the row is not a grey wall, and says so */
.hero-buttons .soon { opacity: .46; cursor: default; }
.btn-paper { background: #d93a4a; }
.btn-code { background: #1e2735; }
.btn-model { background: #ffd21e; color: #1d2333; }
.btn-jev { background: #1f6fe5; }
.btn-list { background: #7c5cf0; }
.lead-stage { max-width: 1080px; margin: 0 auto; }
.stage-note { margin-top: 12px; max-width: 70ch; }

.tabs { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.tabs button {
  background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 9px 9px 0 0;
  padding: 9px 16px 8px; font-size: 14.5px; font-weight: 550; color: var(--muted); margin-bottom: -1px;
}
.tabs button:hover { background: var(--sunk); color: var(--fg); }
.tabs button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 660; background: none; }

/* ---------------------------------------------------------------- tiles */
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px;
  min-width: 0; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow);
}
.tile .head { display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 600; line-height: 1.2; }
.tile .head .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile .head .score { margin-left: auto; flex: none; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--fg); font-weight: 600; }
.tile .head .mark { display: none; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); flex: none; }
.tile.mismatch .head .mark { display: inline-block; }

.tile .board { position: relative; min-width: 0; }
.tile .view {
  position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
  background-color: var(--board); background-image: var(--poster, none);
  background-size: cover; background-repeat: no-repeat;
  border-radius: 8px; isolation: isolate;
}
/* the hero tile letterboxes the game instead of filling, so its still does the same */
.tile.hero .view { background-size: contain; }
.tile .view iframe {
  position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none;
  background: transparent; visibility: hidden;
}
.tile .view iframe.shown { visibility: visible; }
.tile .view .overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 10px; font-size: 13px; color: #9aa3ae; background: var(--board);
}
.tile .view .overlay.err { color: var(--coral); }
.tile .view .overlay[hidden] { display: none; }

/* play controls sit on the board and only come out on hover or keyboard focus */
.tile .board > .controls {
  position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 5px; align-items: center;
  opacity: 0; transition: opacity 120ms ease; z-index: 2;
}
.tile:hover .board > .controls, .tile .board > .controls:focus-within { opacity: 1; }
@media (hover: none) { .tile .board > .controls { opacity: 1; } }
/* in the readout they are ordinary buttons on the card, not a strip floating over the game */
.tile .deck > .controls { display: flex; align-items: center; gap: 5px; }
.tile .deck > .controls button, .tile .deck > .controls select {
  background: var(--btn); color: var(--fg-2); border: 1px solid var(--line); backdrop-filter: none; max-width: none;
}
.tile .deck > .controls button:hover, .tile .deck > .controls select:hover { background: var(--btn-hover); color: var(--fg); }
.tile .controls button, .tile .controls select {
  font-size: 12px; padding: 3px 8px; background: rgba(12, 14, 17, .74); color: #e9eaec; border-color: rgba(255, 255, 255, .16);
  backdrop-filter: blur(6px);
}
.tile .controls button:hover, .tile .controls select:hover { background: rgba(12, 14, 17, .9); color: #fff; }
.tile .controls .pp { min-width: 46px; }
.tile .controls select { max-width: 45%; }

/* one grid for the block so every bar starts at the same x; a row is display: contents */
.bars {
  display: grid; grid-template-columns: fit-content(42%) minmax(24px, 1fr) 30px; column-gap: 8px; row-gap: 4px;
  align-items: center; font-size: 12.5px; line-height: 1.25;
}
.bars .row { display: contents; }
.bars .row > * { color: var(--muted); min-width: 0; }
.bars .row .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bars .row .bar { height: 8px; border-radius: 999px; background: var(--track); overflow: hidden; }
.bars .row .bar i { display: block; height: 100%; width: 0; background: var(--muted); border-radius: 999px; transition: width 110ms linear; }
.bars .row .val { text-align: right; font-variant-numeric: tabular-nums; }
.bars .row.taken > * { color: var(--fg); font-weight: 600; }
.bars .row.taken .bar { background: var(--accent-soft); }
.bars .row.taken .bar i { background: var(--accent); }
.bars.s2 .row.taken .bar { background: var(--coral-soft); }
.bars.s2 .row.taken .bar i { background: var(--coral); }

.tile .conf { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; display: flex; gap: 10px; flex-wrap: wrap; }
.tile .conf b { color: var(--fg); font-weight: 600; }
.tile .conf .s2tag { color: var(--coral); font-weight: 600; }
.tile .foot {
  display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12.5px; color: var(--muted);
  font-variant-numeric: tabular-nums; line-height: 1.35; margin-top: auto;
}
.tile .foot .rec { color: var(--fg-2); }
.tile .foot .rec.random { color: var(--coral); }
.tile .foot .warn { color: var(--coral); flex-basis: 100%; }
.tile .foot .warn:empty { display: none; }

/* the featured board: game on the left, readout on the right */
.tile.hero { padding: 14px; gap: 10px 16px; }
@media (min-width: 720px) {
  .tile.hero {
    display: grid; grid-template-columns: minmax(0, 1fr) 272px;
    grid-template-areas: "board head" "board bars" "board conf" "board trace" "board foot";
    /* the trace takes whatever room the readout has left, so the column has no hole in it */
    grid-template-rows: auto auto auto 1fr auto;
  }
  .tile.hero .head { grid-area: head; font-size: 17px; }
  .tile.hero .board { grid-area: board; }
  .tile.hero .bars { grid-area: bars; }
  .tile.hero .conf { grid-area: conf; }
  .tile.hero .trace { grid-area: trace; align-self: stretch; width: 100%; }
  .tile.hero .foot { grid-area: foot; align-content: start; margin-top: 0; }
}
/* --ar is the game's own width / height, set in fit(); a free board is exactly that shape, never letterboxed */
.tile.hero { --cap-h: clamp(320px, 60vh, 600px); }
.tile.hero .board, .duel .board { width: min(100%, calc(var(--cap-h) * var(--ar, 1))); margin-inline: auto; }
.tile.hero .view, .duel .view { width: 100%; height: auto; aspect-ratio: var(--ar, 1); }
.tile.hero .bars { font-size: 13.5px; row-gap: 6px; }
.tile.hero .trace { margin-top: 6px; }
.tile.hero .bars .row .bar { height: 10px; }
.tile.hero .bars .row .val { width: 34px; }
.tile.hero .conf { font-size: 13.5px; }
.tile.hero .foot { font-size: 13px; }

/* the episode's confidence as a line: played part blue, the rest faint, teacher steps as coral ticks */
.tile .trace { display: none; margin-top: 2px; }
.tile.hero .trace { display: flex; flex-direction: column; min-height: 0; }
.tile.hero .trace svg { flex: 1 1 auto; min-height: 56px; }
.tile .trace .tlabel { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 1px; }
.tile .trace svg { display: block; width: 100%; height: auto; overflow: visible; }
.trace .tbase { stroke: var(--line); stroke-width: 1; }
.trace .tfull { fill: none; stroke: var(--line); stroke-width: 1.4; stroke-linejoin: round; }
.trace .tafull { fill: var(--line-soft); stroke: none; }
.trace .taplayed { fill: var(--accent-soft); stroke: none; }
.trace .tplayed { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.trace .ttick { stroke: var(--coral); stroke-width: 1.4; }
.trace .tnow { stroke: var(--line); stroke-width: 1; }
.trace .tdot { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.trace .tdot.h { fill: var(--coral); }

/* ---------------------------------------------------------------- the ten */
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 18px 0 16px; }
.toolbar-note { font-size: 13.5px; color: var(--muted); flex: 1 1 260px; min-width: 200px; }
.grid { display: grid; gap: 16px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1180px) { .grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .wrap { padding: 0 16px; }
  .toolbar-note { flex-basis: 100%; }   /* the note gets its own line instead of sitting in a hole beside a button */
}

/* Every tile in the grid shares one set of rows, so the boards, the bar block, the confidence line and the step
   line sit at the same height across the row however many moves a game has. Tiles keep their own 8px row gap. */
@supports (grid-template-rows: subgrid) {
  .grid:not(.solo) > .tile { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 8px; }
  .grid:not(.solo) > .tile .bars { align-content: start; }
  .grid:not(.solo) > .tile .foot { margin-top: 0; }
}

/* one at a time: the running game keeps a full tile, the rest collapse to a clickable name */
.grid.solo { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.grid.solo .tile { flex: 0 0 auto; }
/* the one running game is the main event: a taller board, and the card hugs it instead of padding it out */
.grid.solo .tile.active { flex: 0 1 auto; max-width: min(1060px, 100%); order: 1; --cap-h: clamp(300px, 56vh, 600px); }
@media (min-width: 720px) {
  .grid.solo .tile.active { grid-template-columns: minmax(0, calc(var(--cap-h) * var(--ar, 1))) 244px; }
}
.grid.solo::after { content: ''; order: 0; flex-basis: 100%; height: 0; }
.grid.solo .tile:not(.active) {
  cursor: pointer; padding: 5px 13px; align-self: flex-start; border-radius: 999px; box-shadow: none;
}
.grid.solo .tile:not(.active) .board,
.grid.solo .tile:not(.active) .bars,
.grid.solo .tile:not(.active) .conf,
.grid.solo .tile:not(.active) .foot { display: none; }
.grid.solo .tile:not(.active) .head { font-weight: 500; font-size: 13px; }
.grid.solo .tile:not(.active) .head .score { display: none; }
.grid.solo .tile:not(.active):hover { border-color: var(--accent); }
.grid.solo .tile:not(.active):hover .head .title { color: var(--accent); }

/* ---------------------------------------------------------------- score chart */
.chart { margin: 22px 0 8px; }
.chart .scale { display: grid; grid-template-columns: var(--namew, 148px) minmax(0, 1fr) 52px; gap: 0 14px; align-items: end; }
.chart .scale .ticks { position: relative; height: 18px; font-size: 12.5px; color: var(--muted); }
.chart .scale .ticks span { position: absolute; bottom: 0; transform: translateX(-50%); white-space: nowrap; }
.chart .scale .ticks span:first-child { transform: none; }
.chart .rows { display: grid; grid-template-columns: var(--namew, 148px) minmax(0, 1fr) 52px; gap: 7px 14px; align-items: center; }
.chart .name { font-size: 14px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart .lane { position: relative; height: 18px; }
.chart .lane .grid-line { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--line); }
.chart .lane .fill {
  position: absolute; left: 0; top: 3px; height: 12px; background: var(--accent);
  border-radius: 0 4px 4px 0; min-width: 2px;
}
.chart .lane .fill.zero { background: var(--muted); opacity: .45; }
.chart .value { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--fg); text-align: right; }
.chart .value.pending { color: var(--muted); font-variant-numeric: normal; }
.chart-note { font-size: 13.5px; color: var(--muted); margin-top: 14px; }

/* ---------------------------------------------------------------- tables */
.table-view { margin: 18px 0 10px; }
.table-view summary { font-size: 14px; color: var(--muted); cursor: pointer; width: max-content; }
.table-view summary:hover { color: var(--fg); }
.table-view[open] summary { margin-bottom: 10px; }
.tablewrap { overflow-x: auto; }
table { border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 7px 18px 7px 0; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
th { font-weight: 600; color: var(--fg); }
td { color: var(--fg-2); }
td.num, th.num { text-align: right; }
td .sub { color: var(--muted); font-size: 12.5px; }
td.pending { color: var(--muted); }
#transfer-body .hi { color: var(--fg); font-weight: 600; }
#transfer-body tr.sep td { border-top: 1px solid var(--line); }
#transfer-body tr.sep:first-child td { border-top: 0; }

/* ---------------------------------------------------------------- small multiples */
.panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 18px 20px; margin: 22px 0 10px; }
.panels.transfer { grid-template-columns: repeat(auto-fill, minmax(280px, 400px)); }
.panels figure { margin: 0; display: flex; flex-direction: column; }
.panels svg { display: block; width: 100%; height: auto; }
/* the caption is the panel's title, so it reads first, above the plot */
.panels figcaption { order: -1; font-size: 13.5px; color: var(--fg-2); margin: 0 0 4px; }
.panels .axis { stroke: var(--line); stroke-width: 1; }
.panels .diag { stroke: var(--line); stroke-width: 1; }
.panels .txt { fill: var(--muted); font-size: 10px; }
.panels .pt { fill: var(--accent); stroke: var(--card); stroke-width: 2; }
.panels .line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.panels .ctl { fill: var(--coral); stroke: var(--card); stroke-width: 2; }
.panels .ctlline { fill: none; stroke: var(--coral); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; color: var(--fg-2); margin-top: 16px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 14px; height: 3px; border-radius: 2px; background: var(--accent); }
.legend i.c { background: var(--coral); }

/* ---------------------------------------------------------------- duel */
.duel-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px 32px; margin: 20px 0 8px; }
/* min-width: 0 lets the pair drop to one column on a phone instead of running off the side */
.duel { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; flex: 0 1 auto; min-width: 0; max-width: 980px; }
#duel-note { flex: 1 1 250px; max-width: 44ch; }
.duel .tile { --cap-h: min(360px, 42vh); }
.duel .tile .head .title { font-variant-numeric: tabular-nums; }
.duel .tile.lead-board { border-color: var(--accent); }

/* ---------------------------------------------------------------- how it works */
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; }
@media (max-width: 980px) { .how { grid-template-columns: minmax(0, 1fr); gap: 18px; } }
pre {
  background: var(--code); border: 1px solid var(--line-soft); border-radius: 10px; padding: 14px 16px;
  font-size: 12.5px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 10px;
  color: var(--fg-2);
}
pre .ph { color: var(--accent); }
.promptrow { display: flex; gap: 10px; align-items: center; margin: 0 0 10px; font-size: 14px; color: var(--fg-2); }

footer {
  margin-top: 64px; padding-top: 18px; padding-bottom: 40px; font-size: 13.5px; color: var(--muted);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px;
  border-top: 1px solid var(--line-soft);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bars .row .bar i { transition: none; }
}

/* ---------------------------------------------------------------- the play deck (name, score, then these) */
.tile .deck { display: none; }
.tile.hero .deck, .grid.solo .tile.active .deck {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; grid-area: deck;
}
.tile .deck .decklabel { font-size: 12.5px; color: var(--muted); }
.tile .deck .pp { min-width: 54px; }
.tile .deck .speeds button { padding: 4px 8px; font-variant-numeric: tabular-nums; }

/* the featured board grows a row for the deck, between the name and the bars */
@media (min-width: 720px) {
  .tile.hero {
    grid-template-areas: "board head" "board deck" "board bars" "board conf" "board trace" "board foot";
    grid-template-rows: auto auto auto auto 1fr auto;
  }
}

/* ---------------------------------------------------------------- the games we vendored */
.credit-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 8px; margin-top: 18px; }
.credit-grid a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 10px; padding: 10px 13px; border-radius: 11px;
  border: 1px solid var(--line); background: var(--card); color: var(--fg); font-size: 14.5px; font-weight: 600;
}
.credit-grid a b { grid-column: 1; grid-row: 1; font-weight: 640; }
.credit-grid a em { grid-column: 1; grid-row: 2; font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--muted); overflow-wrap: anywhere; }
.credit-grid a i {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end;
  font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.credit-grid a:hover { text-decoration: none; border-color: var(--accent); box-shadow: var(--shadow-lift); }

/* ---------------------------------------------------------------- polish */
.tile:not(.hero):hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.top { background: color-mix(in srgb, var(--bg) 82%, transparent); }
h2 { position: relative; }
h1 b, h2 b { color: var(--accent); }