/* ============================================================
   Shared palette with the games. Light is the base; dark
   redefines tokens only, and an explicit choice wins over both.
   ============================================================ */
:root{
  --bg:#E7ECEB;
  --bg-weave:#DDE4E3;
  --surface:#F2F5F4;
  --surface-2:#E2E8E7;
  --line:#BCC7C6;
  --line-soft:#CFD8D7;
  --text:#0C1B1D;
  --muted:#5C7173;
  --indigo:#12807C;
  --brass:#A85A33;
  --shadow:0 1px 0 rgba(12,27,29,.06), 0 10px 30px -18px rgba(12,27,29,.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0B1517;
    --bg-weave:#0F1B1D;
    --surface:#101F21;
    --surface-2:#16282A;
    --line:#23383A;
    --line-soft:#1C2E30;
    --text:#DCE6E4;
    --muted:#829A9A;
    --indigo:#46C6BC;
    --brass:#D98A5C;
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 14px 34px -20px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --bg:#0B1517;
  --bg-weave:#0F1B1D;
  --surface:#101F21;
  --surface-2:#16282A;
  --line:#23383A;
  --line-soft:#1C2E30;
  --text:#DCE6E4;
  --muted:#829A9A;
  --indigo:#46C6BC;
  --brass:#D98A5C;
  --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:"Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, 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;align-self:center;
  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:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight:400;
  font-size:clamp(30px,6vw,48px);
  letter-spacing:-.02em;line-height:1.02;margin:0;
  text-wrap:balance;
}
.tagline{
  margin:6px 0 0;color:var(--muted);
  font:400 12px/1.4 Consolas, "SF Mono", Menlo, "DejaVu Sans 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:"Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight:400;
  font-size:24px;letter-spacing:-.012em;margin:0;
}
.game .sub{
  margin:5px 0 0;color:var(--muted);
  font:400 11px/1.4 Consolas, "SF Mono", Menlo, "DejaVu Sans 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 Consolas, "SF Mono", Menlo, "DejaVu Sans 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 Consolas, "SF Mono", Menlo, "DejaVu Sans 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 Consolas, "SF Mono", Menlo, "DejaVu Sans 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 Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", ui-monospace, monospace;
  letter-spacing:.06em;
}

/* ---------------------------- studio sitebar ----------------------------
   The same header as mountainstream.dev, mapped onto this palette, so the
   hub reads as part of the studio site. */
/* shared:header start (generated - edit shared/ in MountainStreamWebsite, run node tools/sync-header.mjs) */
/* Reserve the scrollbar gutter on every page: a page short enough to lose
   its scrollbar would otherwise center .bar-wrap 8px to the right of a
   page that scrolls, and the bars visibly jump between the two sites. */
html{scrollbar-gutter:stable}
.sitebar{
  position:sticky;top:0;z-index:20;
  /* solid: backdrop-filter over animated content smears on scroll in Chromium */
  background:var(--bg);
  border-bottom:1px solid var(--line);
}
/* The wordmark never wraps: when the row gets too tight the whole nav
   drops to its own line underneath instead.
   box-sizing and line-height are pinned because the two sites' global
   resets differ; without them the bar's width and height drift apart. */
.bar-wrap{
  box-sizing:content-box;
  max-width:1180px;margin:0 auto;
  padding:1.05rem 1.6rem;
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:0.45rem 1.6rem;
  line-height:1.4;
}
.wordmark{
  font-family:"Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  font-size:1.14rem;color:var(--text);text-decoration:none;white-space:nowrap;
}
/* Brush mark is drawn in near-black; dark themes flip it to white with an
   invert, and the hue-rotate turns the inverted orange swirl back to blue. */
.wordmark .mark{
  height:2em;width:auto;vertical-align:-0.62em;margin-right:0.55em;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .wordmark .mark{filter:invert(1) hue-rotate(180deg)}
}
:root[data-theme="dark"] .wordmark .mark{filter:invert(1) hue-rotate(180deg)}
:root[data-theme="light"] .wordmark .mark{filter:none}
.wordmark .suffix{
  font:400 0.66rem/1 Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
  letter-spacing:0.18em;text-transform:uppercase;
  color:var(--muted);margin-left:0.5em;
}
.sitebar nav{display:flex;flex-wrap:wrap;gap:0.45rem 1.6rem}
.sitebar nav a{
  font:400 0.74rem/1.4 Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
  letter-spacing:0.1em;text-transform:uppercase;
  text-decoration:none;color:var(--muted);
  padding-bottom:2px;border-bottom:1px solid transparent;
  transition:color 140ms ease, border-color 140ms ease;
}
/* Portal ends the row, set apart from the section links by a wider gap. */
.sitebar nav a.portal{margin-left:1.6rem}
.sitebar nav a:hover{color:var(--text);border-bottom-color:var(--indigo)}
.sitebar nav a[aria-current="page"]{color:var(--text);border-bottom-color:var(--indigo)}
@media (prefers-reduced-motion: reduce){
  .sitebar nav a{transition:none}
}
/* shared:header end */