/* ============================================================
   Shared palette with the games. Light is the base; dark
   redefines tokens only, and an explicit choice wins over both.
   ============================================================ */
:root{
  --bg:#E9E5D9;
  --bg-weave:#DFDACB;
  --surface:#F4F1E8;
  --surface-2:#EAE6DA;
  --line:#CBC3AF;
  --line-soft:#DCD5C3;
  --text:#1B2540;
  --muted:#6A6C7C;
  --indigo:#26406F;
  --brass:#A26A22;
  --shadow:0 1px 0 rgba(27,37,64,.06), 0 10px 30px -18px rgba(27,37,64,.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1421;
    --bg-weave:#131A29;
    --surface:#161D2C;
    --surface-2:#1C2434;
    --line:#2C3548;
    --line-soft:#232B3C;
    --text:#E8E3D6;
    --muted:#93A0B8;
    --indigo:#DFD8C6;
    --brass:#D2913C;
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 14px 34px -20px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --bg:#0E1421;
  --bg-weave:#131A29;
  --surface:#161D2C;
  --surface-2:#1C2434;
  --line:#2C3548;
  --line-soft:#232B3C;
  --text:#E8E3D6;
  --muted:#93A0B8;
  --indigo:#DFD8C6;
  --brass:#D2913C;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 14px 34px -20px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{
  margin:0;min-height:100svh;
  background:var(--bg);
  background-image:repeating-linear-gradient(90deg, var(--bg-weave) 0 1px, transparent 1px 7px),
                   repeating-linear-gradient(0deg, var(--bg-weave) 0 1px, transparent 1px 7px);
  color:var(--text);
  font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  font-size:15px;line-height:1.55;
}
@media (hover: none){ body{background-image:none} }

.wrap{max-width:980px;margin:0 auto;padding:34px 18px 64px}

/* ---------------------------- masthead ---------------------------- */
.masthead{
  display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  padding-bottom:18px;margin-bottom:30px;
}
.punchmark{
  width:38px;height:50px;flex:none;
  border:1px solid var(--line);background:var(--surface);
  clip-path:polygon(10px 0,100% 0,100% 100%,0 100%,0 10px);
  display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);
  gap:2px;padding:6px 5px;
}
.punchmark i{border-radius:1px;border:1px solid var(--line)}
.punchmark i.on{background:var(--indigo);border-color:var(--indigo)}
h1{
  font-family:"Archivo", ui-sans-serif, system-ui, sans-serif;
  font-variation-settings:"wdth" 118,"wght" 760;
  font-size:clamp(28px,6vw,46px);
  letter-spacing:-.015em;line-height:.95;margin:0;text-transform:uppercase;
  text-wrap:balance;
}
.tagline{
  margin:6px 0 0;color:var(--muted);
  font:400 12px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.13em;text-transform:uppercase;
}

/* ---------------------------- shelf ---------------------------- */
.shelf{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  margin:0;padding:0;list-style:none;
}
.game{
  display:flex;flex-direction:column;gap:14px;
  padding:20px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:2px;box-shadow:var(--shadow);
  color:inherit;text-decoration:none;
  clip-path:polygon(18px 0,100% 0,100% 100%,0 100%,0 18px);
  transition:border-color .16s ease, transform .16s ease;
}
@media (hover: hover){
  .game:hover{border-color:var(--muted);transform:translateY(-2px)}
}
.game:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}
@media (prefers-reduced-motion: reduce){ .game{transition:none} }

.game h2{
  font-family:"Archivo", sans-serif;
  font-variation-settings:"wdth" 112,"wght" 700;
  font-size:23px;letter-spacing:-.01em;margin:0;
}
.game .sub{
  margin:5px 0 0;color:var(--muted);
  font:400 11px/1.4 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.12em;text-transform:uppercase;
}
.game p{margin:0;font-size:14px;line-height:1.55;max-width:52ch}
.facts{
  display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0;list-style:none;
}
.facts li{
  border:1px solid var(--line-soft);border-radius:2px;
  padding:5px 8px;color:var(--muted);
  font:500 10.5px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.08em;text-transform:uppercase;
}
.play{
  margin-top:auto;align-self:flex-start;
  padding:10px 15px;border-radius:2px;
  background:var(--indigo);color:var(--surface);
  font:500 12px/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.1em;text-transform:uppercase;
}

/* a preview of the board, drawn in CSS rather than shipped as an image */
.chip-grid{
  display:grid;grid-template-columns:repeat(6,1fr);gap:3px;
  width:104px;
}
.chip-grid span{
  aspect-ratio:1;border-radius:1px;background:var(--surface-2);
  display:grid;place-items:center;
  font:600 9px/1 "IBM Plex Mono", ui-monospace, monospace;
}
.chip-grid span.one{color:var(--indigo)}
.chip-grid span.zero{color:var(--brass)}

/* drawn previews, same footprint as the chip grid */
.sun-mark{width:104px;color:var(--brass)}
.sun-mark svg{display:block;width:100%;height:auto}
.scene-mark{color:var(--indigo)}

footer{
  margin-top:40px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--muted);text-align:center;
  font:400 11px/1.6 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.06em;
}