/* micro-Max 4.8 UCI (Core) — site styles
   Copyright (c) 2026 64Logic. SPDX-License-Identifier: MIT */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-variable.woff2") format("woff2-variations"),
       url("/fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand, taken from the Core banner */
  --yellow: #FFE53B;
  --gold: #FFD21F;
  --amber: #FFAA1C;
  --orange: #F7861E;
  --red: #B00000;
  --black: #000000;
  --white: #FFFFFF;

  /* Neutrals */
  --ink-2: #3D3D3D;          /* secondary text on white */
  --ink-on-yellow: #2B2100;  /* secondary text on yellow */
  --rule: #E6E6E6;
  --panel: #000000;
  --panel-raise: #161616;
  --panel-line: #2A2A2A;
  --panel-text: #F4F4F4;
  --panel-dim: #A3A3A3;

  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --gutter: 16px;
  --maxw: 1180px;
  --panel-w: 290px;
  --frame: 6px;
  /* Board squares area. Chessground draws at a multiple of 8px, so snap to it.
     The 408px floor keeps room for about 3 moves in the panel on short
     windows (1366x768 laptops); the page scrolls a little there instead. */
  --board-raw: clamp(408px, min(calc(100vh - 320px), calc(100vw - var(--panel-w) - 3 * var(--gutter) - 36px)), 624px);
  --board: var(--board-raw);
  --play-gap: 20px;
  --play-w: calc(var(--board) + 2 * var(--frame) + var(--play-gap) + var(--panel-w));

  color-scheme: light;
}

@supports (width: round(down, 100px, 8px)) {
  :root { --board: round(down, var(--board-raw), 8px); }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-stretch: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; }
img { max-width: 100%; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; top: 8px;
  background: var(--black); color: var(--white);
  padding: 8px 14px; border-radius: 999px; z-index: 10;
}
.skip:focus { left: 16px; }

/* ---------------------------------------------------------------- Hero */

.hero {
  background: linear-gradient(118deg, var(--yellow) 0%, var(--gold) 38%, var(--amber) 78%, var(--orange) 100%);
  padding-bottom: 40px;
  /* Chessground's coordinate strip runs past the board's right edge */
  overflow-x: hidden;
  overflow-x: clip;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.brand {
  font-weight: 900;
  font-stretch: 112%;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.topnav { display: flex; gap: 22px; font-weight: 600; font-size: 0.95rem; }
.topnav a { text-decoration: none; }
.topnav a:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }

.intro {
  /* Same two columns as the board and panel below, so their edges line up:
     the title sits over the board, the intro and button over the panel. */
  max-width: calc(var(--play-w) + 2 * var(--gutter));
  display: grid;
  grid-template-columns: calc(var(--board) + 2 * var(--frame)) var(--panel-w);
  justify-content: center;
  align-items: center;
  gap: 18px var(--play-gap);
  padding-top: 6px;
  padding-bottom: 26px;
}

/* Logotype, rebuilt in type from the Core banner */
.logo {
  margin: 0;
  display: inline-grid;
  justify-items: stretch;
  line-height: 1;
  /* The mark is about 10.5em wide: size it to the room beside the lead. */
  font-size: clamp(2rem, calc((var(--play-w) - 370px) / 10.9), 4.6rem);
}

.logo-mark {
  display: block;
  font-weight: 900;
  font-stretch: 116%;
  letter-spacing: -0.035em;
  transform: skewX(-12deg);
  transform-origin: bottom left;
  white-space: nowrap;
}
.logo-ver { color: var(--red); margin-left: 0.2em; }

/* Under the name: a rule with the edition pill in the middle, the same
   system as the GitHub banners. The lines fill the width of the name. */
.logo-rule {
  display: flex;
  align-items: center;
  gap: 0.38em;
  margin-top: 0.42em;
  font-size: 0.36em;
}
.logo-rule::before,
.logo-rule::after {
  content: "";
  flex: 1;
  height: max(2px, 0.08em);
  background: var(--black);
}

.logo-engine { font-size: clamp(2rem, calc((var(--board) + 2 * var(--frame)) / 8.2), 4.4rem); }
/* The slant pivots on the center so the name sits centered over the rule. */
.logo-engine .logo-mark { transform-origin: center; }

/* Edition pills. Full edition: a black "UCI" pill. Core: one pill split into
   two equal halves, "UCI" on black and "Core" on white, outlined. */
.pill,
.pill-split {
  font-weight: 800;
  font-stretch: 110%;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  border-radius: 999px;
  transform: skewX(-12deg);
}
.pill {
  display: inline-block;
  padding: 0.14em 0.8em 0.18em;
  background: var(--black);
  color: var(--white);
}
.pill-split {
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}
.pill-split > span { padding: 0.14em 0.8em 0.18em; text-align: center; }
.pill-uci { background: var(--black); color: var(--white); }
.pill-core { background: var(--white); color: var(--black); }
/* The outline is drawn over both halves. */
.pill-split::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 max(1.5px, 0.08em) var(--black);
  pointer-events: none;
}

.intro-copy { justify-self: stretch; }

.lead {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.45;
  font-weight: 500;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

@media (min-width: 981px) {
  /* Header links start where the intro text starts and end at the panel's
     right edge; "64Logic" stays lined up with the sections below. */
  .topbar { position: relative; }
  .topnav {
    position: absolute;
    top: 50%;
    left: calc(50% + var(--play-w) / 2 - var(--panel-w));
    width: var(--panel-w);
    transform: translateY(-50%);
    justify-content: space-between;
    gap: 0;
  }

  /* Title centered over the board. */
  .logo-engine { justify-self: center; }
}

/* ---------------------------------------------------------------- Play */

.play {
  display: grid;
  grid-template-columns: calc(var(--board) + 2 * var(--frame)) var(--panel-w);
  justify-content: center;
  align-items: start;
  gap: var(--play-gap);
}

.board-frame {
  position: relative;
  padding: var(--frame);
  background: var(--black);
  border-radius: 6px;
  box-shadow: 0 28px 50px -24px rgba(77, 40, 0, 0.55);
}

.board {
  width: var(--board);
  height: var(--board);
}

/* Chessground fills the board box; if its 8px snapping leaves a sliver,
   keep the board centered in the frame. */
.board.cg-wrap { width: var(--board); height: var(--board); }
.board cg-container { left: 50%; top: 50%; transform: translate(-50%, -50%); }

/* Lichess brown board colors */
.board cg-board {
  background-color: #F0D9B5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23B58863' d='M1 0h1v1h-1zM3 0h1v1h-1zM5 0h1v1h-1zM7 0h1v1h-1zM0 1h1v1h-1zM2 1h1v1h-1zM4 1h1v1h-1zM6 1h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM4 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM3 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM2 5h1v1h-1zM4 5h1v1h-1zM6 5h1v1h-1zM1 6h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM4 7h1v1h-1zM6 7h1v1h-1z'/%3E%3C/svg%3E");
}

/* Coordinates in the opposite square color, as on Lichess: rank numbers in
   each a-file square's top-left corner, file letters in each first-rank
   square's bottom-right corner. a1 is dark; the order flips for Black. */
.board.cg-wrap coords { font-family: var(--sans); font-size: 11px; font-weight: 700; opacity: 1; }
.board.cg-wrap coords.ranks { left: 0; top: 0; width: 16px; }
.board.cg-wrap coords.ranks coord { transform: none; padding: 3px 0 0 4px; line-height: 1; }
.board.cg-wrap coords.files { left: 0; bottom: 0; height: 15px; }
.board.cg-wrap coords.files coord { text-align: right; padding-right: 4px; line-height: 1; }
.board.orientation-white coords :nth-child(odd),
.board.orientation-black coords :nth-child(even) { color: #F0D9B5; }
.board.orientation-white coords :nth-child(even),
.board.orientation-black coords :nth-child(odd) { color: #B58863; }

.panel {
  display: flex;
  flex-direction: column;
  height: calc(var(--board) + 2 * var(--frame));
  background: var(--panel);
  color: var(--panel-text);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 28px 50px -24px rgba(77, 40, 0, 0.55);
}

.player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  font-weight: 700;
  font-stretch: 105%;
}
.player-engine { border-bottom: 1px solid var(--panel-line); }
.player-you { border-top: 1px solid var(--panel-line); }

.player-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #4A4A4A;
  flex: none;
}
.player.is-turn .player-dot { background: var(--gold); }
.player-engine.is-thinking .player-dot { animation: pulse 1s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

.player-name { flex: 1; }
.player-clock, .player-side {
  font-weight: 500;
  color: var(--panel-dim);
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}

.moves {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  font-variant-numeric: tabular-nums;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
  color-scheme: dark;   /* dark scroll bar where the system draws one (Safari) */
}

.moves li {
  display: grid;
  grid-template-columns: 2.6em 1fr 1fr;
  align-items: baseline;
  padding: 3px 16px;
  font-size: 0.98rem;
}
.moves li:nth-child(even) { background: var(--panel-raise); }
.move-num { color: var(--panel-dim); font-size: 0.88rem; }
.move { font-weight: 600; }
.move.is-last { color: var(--gold); }
.moves li.result {
  display: block;
  text-align: center;
  font-weight: 800;
  color: var(--gold);
  background: transparent;
  padding-top: 10px;
}
.moves li.moves-empty {
  display: block;
  background: transparent;
  color: var(--panel-dim);
  padding: 10px 16px;
  font-size: 0.92rem;
}

.status {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--panel-line);
  min-height: 82px;
}
.status p { margin: 0; }
.status-main { font-weight: 700; line-height: 1.35; }
.status-sub { color: var(--panel-dim); font-size: 0.9rem; line-height: 1.4; margin-top: 4px !important; }
.status-sub a { color: var(--gold); }

.new-game {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  padding: 0 12px 12px;
}

/* ---------------------------------------------------------------- Buttons */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 0.98rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
.btn-light { background: var(--white); color: var(--black); }
.btn-light:hover { background: var(--gold); }
.btn-light:focus-visible { outline-color: var(--gold); }

/* New Game: the side being played stays gold; the other button only tints on
   hover, so gold always means "the side you're playing". */
.new-game .btn.is-selected,
.new-game .btn.is-selected:hover { background: var(--gold); color: var(--black); }
.new-game .btn:not(.is-selected):hover { background: #FFF1B8; }
/* New Game as Black is always black, with a thin white ring so it stays visible
   on the black panel. Hover turns the ring gold; when Black is the side being
   played, the ring and the letters are gold. */
.new-game .btn[data-new=black] { background: var(--black); color: var(--white); box-shadow: inset 0 0 0 1.5px var(--white); }
.new-game .btn[data-new=black]:not(.is-selected):hover { background: var(--black); color: var(--white); box-shadow: inset 0 0 0 2px var(--gold); }
.new-game .btn[data-new=black].is-selected,
.new-game .btn[data-new=black].is-selected:hover { background: var(--black); color: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.btn-dark { background: var(--black); color: var(--white); }
.btn-dark:hover { background: var(--red); }

/* ---------------------------------------------------------------- Story */

.story { padding: 88px 0 72px; }

.story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: start;
}

h2 {
  margin: 0 0 20px;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  line-height: 1.08;
  font-weight: 900;
  font-stretch: 112%;
  letter-spacing: -0.025em;
}

h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 800;
  font-stretch: 106%;
  letter-spacing: -0.01em;
}

.story-text { max-width: 62ch; }
.story-text p { margin: 0 0 18px; }
.story-text h3 { margin-top: 34px; }

code { font-family: var(--mono); font-size: 0.9em; }

.features {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.features li {
  position: relative;
  padding: 7px 0 7px 22px;
  border-bottom: 1px solid var(--rule);
}
.features li::before {
  content: "";
  position: absolute;
  left: 2px; top: 0.95em;
  width: 9px; height: 9px;
  background: var(--gold);
  border: 2px solid var(--black);
  transform: skewX(-12deg);
}


.source {
  margin: 0;
  background: var(--black);
  color: #EDEDED;
  border-radius: 10px;
  overflow: hidden;
}

.source-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--panel-line);
  font-size: 0.92rem;
}
.source-file { font-family: var(--mono); color: var(--white); }
.source-check { color: var(--panel-dim); text-align: right; }
.source-check.is-ok { color: var(--gold); font-weight: 600; }
.source-check.is-bad { color: #FF6B5A; font-weight: 600; }

.source-code {
  margin: 0;
  padding: 14px 16px;
  height: min(560px, 70vh);
  overflow: auto;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  tab-size: 8;
  scrollbar-width: thin;
  scrollbar-color: #444 transparent;
  color-scheme: dark;   /* dark scroll bar where the system draws one (Safari) */
}
.source-code:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.source-code .c { color: #8C8C8C; }   /* comments */
/* C syntax colors in the site palette (app.js highlightC) */
.source-code .p { color: #FF8A70; }   /* #define */
.source-code .t,
.source-code .k { color: #FFD21F; }   /* types and keywords */
.source-code .n { color: #FFAA1C; }   /* numbers */
.source-code .s { color: #FFE9A8; }   /* strings */

@media (min-width: 981px) {
  /* Engine section: the umax4_8.c box spans the text column from the heading
     to the last paragraph; the code area fills the height and scrolls. */
  .story-grid { align-items: stretch; }
  .source { display: flex; flex-direction: column; }
  .source-code { flex: 1 1 0; height: 0; min-height: 320px; }
}

/* Phones and narrow windows: the code box doesn't scroll by itself (a swipe on
   it scrolls the page). It shows a preview at its usual height, fading out, and
   "Show the full source code" opens the whole file; the page then scrolls
   through it. Desktop keeps the scrolling box beside the text. */
.source-more { display: none; }
@media (max-width: 980px) {
  .source-code {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 60%, transparent);
    mask-image: linear-gradient(#000 60%, transparent);
  }
  .source.is-open .source-code {
    height: auto;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .source-more:not([hidden]) {
    display: block;
    width: 100%;
    min-height: 46px;
    margin: 0;
    padding: 12px 16px;
    border: 0;
    border-top: 1px solid var(--panel-line);
    background: var(--black);
    color: var(--gold);
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    cursor: pointer;
  }
  .source-more:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
}

.source-hash {
  margin: 0;
  padding: 10px 16px 12px;
  border-top: 1px solid var(--panel-line);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--panel-dim);
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- No JavaScript */

.board-noscript {
  position: absolute;
  inset: var(--frame);
  display: grid;
  place-items: center;
  padding: 24px;
  background-color: #F0D9B5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'%3E%3Cpath fill='%23B58863' d='M1 0h1v1h-1zM3 0h1v1h-1zM5 0h1v1h-1zM7 0h1v1h-1zM0 1h1v1h-1zM2 1h1v1h-1zM4 1h1v1h-1zM6 1h1v1h-1zM1 2h1v1h-1zM3 2h1v1h-1zM5 2h1v1h-1zM7 2h1v1h-1zM0 3h1v1h-1zM2 3h1v1h-1zM4 3h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1zM3 4h1v1h-1zM5 4h1v1h-1zM7 4h1v1h-1zM0 5h1v1h-1zM2 5h1v1h-1zM4 5h1v1h-1zM6 5h1v1h-1zM1 6h1v1h-1zM3 6h1v1h-1zM5 6h1v1h-1zM7 6h1v1h-1zM0 7h1v1h-1zM2 7h1v1h-1zM4 7h1v1h-1zM6 7h1v1h-1z'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.board-noscript-card {
  display: grid;
  justify-items: center;
  gap: 16px;
  max-width: 300px;
  padding: 24px 24px 22px;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.45);
  text-align: center;
}
.board-noscript-card p { margin: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.35; }

.source-noscript {
  margin: 0;
  padding: 18px 16px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #EDEDED;
}
.source-noscript a { color: var(--gold); }

/* ---------------------------------------------------------------- Editions */

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Keeps "micro-Max" from breaking at its hyphen. */
.nowrap { white-space: nowrap; }

.editions {
  padding: 80px 0 88px;
  background: linear-gradient(118deg, var(--yellow) 0%, var(--gold) 38%, var(--amber) 78%, var(--orange) 100%);
}

.section-lead { max-width: 62ch; margin: 0 0 36px; font-size: 1.1rem; }

.edition-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.edition {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 30px;
  border-radius: 12px;
}
.edition-core {
  background: var(--black);
  color: var(--panel-text);
  box-shadow: 0 28px 50px -24px rgba(77, 40, 0, 0.55);
}
.edition-full {
  background: rgba(255, 255, 255, 0.55);
  border: 2px dashed var(--black);
}

.edition-head { margin-bottom: 14px; }

.edition-name {
  margin: 0;
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  font-weight: 900;
  font-stretch: 112%;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

.edition-name .pill,
.edition-name .pill-split { font-size: 0.62em; vertical-align: 0.29em; margin-left: 0.25em; }
/* On the black Core card a thin white ring keeps the black half visible. */
.edition-core .pill-split::after { box-shadow: inset 0 0 0 max(1.5px, 0.07em) var(--white); }

.edition-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0;
  font-weight: 700;
  font-size: 0.95rem;
}
.edition-status::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
}
.edition-status.is-live { color: var(--gold); }
.edition-status.is-live::before { background: var(--gold); }
.edition-status.is-dev::before { border: 2px solid var(--black); }
/* The "Planned" key, at the right end of the full edition's status line. */
.status-key {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--ink-on-yellow);
}
.status-key .spec-planned { position: relative; left: 0; top: 0; flex: none; }

.edition-blurb { margin: 0 0 18px; }
.edition-core .edition-blurb { color: #D9D9D9; }

.edition-specs {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.edition-specs li {
  position: relative;
  padding: 9px 0 9px 26px;
  border-top: 1px solid rgba(0, 0, 0, 0.18);
}
.edition-core .edition-specs li { border-top-color: var(--panel-line); }
.edition-specs code { font-size: 0.86em; }

.spec-yes, .spec-no {
  position: absolute;
  left: 0;
  top: calc(9px + 0.35em);
  width: 14px;
  height: 14px;
}
.spec-yes::after {
  content: "";
  position: absolute;
  left: 4px; top: 0;
  width: 5px; height: 10px;
  border: solid currentColor;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.edition-core .spec-yes { color: var(--gold); }
.spec-no::after {
  content: "";
  position: absolute;
  left: 1px; top: 6px;
  width: 12px; height: 2.5px;
  background: currentColor;
}
.edition-core .spec-no { color: #6E6E6E; }

/* Planned (not yet released): a check inside a circle. */
.spec-planned {
  position: absolute;
  left: -1px;
  top: calc(9px + 0.2em);
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 50%;
  box-sizing: border-box;
}
.spec-planned::after {
  content: "";
  position: absolute;
  left: 4px; top: 1.5px;
  width: 3.5px; height: 7px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.edition-core li:has(.spec-no) { color: var(--panel-dim); }

.edition-note { margin: 0 0 22px; font-size: 0.92rem; }
.edition-core .edition-note { color: var(--panel-dim); }
.edition-full .edition-note { color: var(--ink-on-yellow); }

.edition .btn { margin-top: auto; align-self: flex-start; }
.btn-gold { background: var(--gold); color: var(--black); }
.btn-gold:hover { background: var(--white); }
.btn-gold:focus-visible { outline-color: var(--gold); }
.btn-outline { background: transparent; color: var(--black); box-shadow: inset 0 0 0 2px var(--black); }
.btn-outline:hover { background: var(--black); color: var(--white); }

/* ---------------------------------------------------------------- Download */

.download { padding: 80px 0 88px; }

.release-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 10px;
  margin: 0 0 14px;
  font-size: 1.35rem;
  font-weight: 900;
  font-stretch: 112%;
}
.release-title .pill,
.release-title .pill-split { font-size: 0.7em; position: relative; top: -0.27em; }
.release-ver { font-weight: 600; font-stretch: 100%; font-size: 0.85em; color: var(--ink-2); }

.release-upcoming {
  margin-top: 44px;
  padding: 22px 0 0;
  border-top: 2px dashed var(--black);
}
.release-upcoming .release-title { margin-bottom: 4px; }
.release-upcoming p { margin: 0; color: var(--ink-2); }

.download-lead { max-width: 60ch; margin: 0 0 36px; }

.platforms { border-top: 2px solid var(--black); }

.platform {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 6px 24px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
}
.platform h3 { margin: 0; font-size: 1.25rem; }
.platform-note {
  grid-column: 2;
  margin: 2px 0 0;
  font-size: 0.9rem;
  color: var(--ink-2);
  max-width: 64ch;
}

.builds { display: flex; flex-wrap: wrap; gap: 10px; }

.build {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 18px;
  min-height: 44px;
  border: 2px solid var(--black);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 120ms ease;
}
.build:hover { background: var(--gold); }
.build-arch { font-weight: 800; }
.build-meta { font-size: 0.88rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.checksums { margin: 22px 0 0; font-size: 0.95rem; color: var(--ink-2); }

.build-source {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 40px;
  align-items: center;
  margin-top: 64px;
}
.build-source p { margin: 0 0 20px; max-width: 46ch; }

.terminal-wrap { min-width: 0; }
.terminal {
  position: relative;
  min-width: 0;
  container-type: inline-size;
  background: var(--black);
  color: var(--white);
  border-radius: 10px;
}
.terminal pre {
  margin: 0;
  padding: 20px 22px;
  padding-right: 100px;
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.75;
  overflow-x: auto;
}
.copy-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid #3A3A3A;
  border-radius: 999px;
  background: #1C1C1C;
  color: var(--white);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}
/* When the box is too narrow for the longest command and the button side by
   side, the button gets its own strip above the commands. */
@container (max-width: 599px) {
  .terminal pre { padding-top: 58px; padding-right: 22px; }
}
.copy-btn:hover { background: #2A2A2A; }
.copy-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.copy-btn.is-copied { background: var(--gold); color: var(--black); border-color: var(--gold); }
.terminal-note { margin: 12px 0 0 !important; font-size: 0.92rem; color: var(--ink-2); max-width: none !important; }
.terminal-note code { font-size: 0.88em; }

/* ---------------------------------------------------------------- Footer */

.footer {
  background: var(--black);
  color: var(--panel-dim);
  padding: 44px 0 52px;
  font-size: 0.92rem;
}
.footer a { color: var(--white); }
.footer-grid {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) auto;
  gap: 24px;
}
.footer-brand { margin: 0; color: var(--white); font-weight: 900; font-stretch: 112%; font-size: 1.1rem; }
.footer-credits p { margin: 0 0 8px; max-width: 70ch; }
.footer-copy { margin: 0; }
.footer :focus-visible { outline-color: var(--gold); }

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 980px) {
  :root {
    --board-raw: min(calc(100vw - 2 * var(--gutter) - 2 * var(--frame)), 600px);
    --play-w: calc(var(--board) + 2 * var(--frame));
  }

  .intro { grid-template-columns: 1fr; justify-content: stretch; }
  .logo { font-size: min(4.6rem, calc(var(--play-w) / 10.9)); }
  .logo-engine { font-size: min(4.4rem, calc(var(--play-w) / 8.6)); }

  .play { grid-template-columns: calc(var(--board) + 2 * var(--frame)); }
  .panel { height: auto; }
  .moves { max-height: 228px; min-height: 110px; }
  .new-game { grid-template-columns: 1fr 1fr; }

  .story-grid { grid-template-columns: 1fr; gap: 40px; }
  .edition-grid { grid-template-columns: 1fr; }
  .build-source { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 640px) {
  body { font-size: 1rem; }
  .topnav { gap: 16px; font-size: 0.9rem; }
  .topnav a:not(:last-child) { display: none; }
  .hero { padding-bottom: 28px; }
  .lead { font-size: 1.08rem; }
  .story { padding: 64px 0 52px; }
  .download { padding: 56px 0 64px; }
  .editions { padding: 56px 0 64px; }
  .edition { padding: 22px 20px 24px; }
  /* Both edition cards put the pill on its own line under the name. */
  .edition-name .pill { display: block; width: max-content; margin: 0.45em 0 0; }
  .edition-name .pill-split { display: grid; width: max-content; margin: 0.45em 0 0; }
  .platform { grid-template-columns: 1fr; }
  .platform-note { grid-column: 1; }
  .footer-grid { grid-template-columns: 1fr; gap: 14px; }
  /* Side by side on phones: sized so each label fits on one line at 375 px (iPhone XS). */
  .new-game .btn { font-size: 0.84rem; padding: 10px 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .player-engine.is-thinking .player-dot { animation: none; }
  .btn, .build, .copy-btn { transition: none; }
}