:root {
  color-scheme: light;
  --brand: #1f8a4c;
  --brand-dark: #166b3a;
  --ink: #15201a;
  --muted: #5b6b62;
  --bg: #ffffff;
  --bg-alt: #f4f8f5;
  --line: #e2ebe5;
  --surface: #ffffff;
  --nav-bg: rgba(255, 255, 255, 0.95);
  --cta-bg: var(--brand);
  --shadow: rgba(31, 138, 76, 0.12);
  --radius: 12px;
  --maxw: 1080px;
  /* The address-bar colour, as tokens rather than literals in JS. Light follows
     the accent, so a per-vertical --brand carries into the browser chrome with
     no second edit; dark is the page background and does not vary by vertical.
     interactive.js used to write both as literals, which silently overwrote any
     per-page value the moment the theme was applied. */
  --theme-color-light: var(--brand);
  --theme-color-dark: #0e1411;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
}
h1, h2, h3 { line-height: 1.2; letter-spacing: -0.01em; }
a { color: var(--brand-dark); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.container--narrow { max-width: 760px; }

.skip-link {
  position: absolute; left: -999px; top: 0; background: var(--brand); color: #fff;
  padding: 8px 14px; border-radius: 0 0 8px 0; z-index: 100;
}
.skip-link:focus { left: 0; }

/* Nav */
.nav { position: sticky; top: 0; background: var(--nav-bg);
  backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); z-index: 50; }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { font-weight: 800; font-size: 1.25rem; color: var(--brand-dark); text-decoration: none; }
.nav__menu { display: flex; align-items: center; gap: 22px; }
.nav__menu a { color: var(--ink); text-decoration: none; font-weight: 600; font-size: 0.95rem; }
.nav__menu a:hover { color: var(--brand-dark); }
.nav__toggle { display: none; background: none; border: 0; font-size: 1.5rem; cursor: pointer; }

/* Buttons */
.btn { display: inline-block; padding: 10px 18px; border-radius: 10px; font-weight: 700;
  text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: transform .05s ease; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--brand); color: #fff; }
.btn--primary:hover { background: var(--brand-dark); }
.btn--ghost { background: transparent; color: var(--brand-dark); border-color: var(--brand); }
.btn--ghost:hover { background: var(--bg-alt); }
.btn--lg { padding: 14px 26px; font-size: 1.05rem; }

/* Hero */
.hero { background: linear-gradient(160deg, var(--bg-alt), var(--bg)); padding: 84px 0 64px; text-align: center; }
/* The vertical's mark, above the headline on a generated landing page. Decorative
   and aria-hidden in the markup: the headline already says which game this is. */
.hero__glyph { color: var(--brand); font-size: 2.6rem; line-height: 1; margin: 0 0 12px; }
.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin: 0 0 8px; }
.hero__tagline { color: var(--brand-dark); font-weight: 700; font-size: 1.2rem; margin: 0 0 18px; }
.hero__sub { color: var(--muted); font-size: 1.15rem; max-width: 640px; margin: 0 auto 28px; }
.hero__cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero__note { color: var(--muted); font-size: 0.85rem; margin-top: 18px; }

/* Sections */
.section { padding: 72px 0; }
.section--alt { background: var(--bg-alt); }
.section h2 { font-size: clamp(1.6rem, 3.5vw, 2.3rem); text-align: center; margin: 0 0 8px; }
.section__lead { text-align: center; color: var(--muted); margin: 0 0 36px; font-size: 1.1rem; }
.section__note { text-align: center; color: var(--muted); font-size: 0.9rem; margin-top: 24px; }

/* Grid + cards */
.grid { display: grid; gap: 20px; margin-top: 36px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.card h3 { margin: 0 0 8px; font-size: 1.15rem; }
.card p { margin: 0; color: var(--muted); }
/* A card that is itself a link, for the per-game landing pages. The whole card
   is the target rather than a word inside it, so it works on touch. */
.card--link { display: block; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.card--link:hover, .card--link:focus-visible { border-color: var(--brand); transform: translateY(-2px); }
.card--link h3 { color: var(--brand-dark); }
.card__glyph { color: var(--brand); }
.section__lede { color: var(--muted); max-width: 640px; margin: -8px 0 24px; }

/* Steps */
.steps { list-style: none; counter-reset: step; padding: 0; margin: 36px 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; }
.steps li::before { content: counter(step); display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; margin-bottom: 12px; }
.steps strong { display: block; margin-bottom: 4px; }
.steps span { color: var(--muted); }

/* Pricing */
.price { display: flex; flex-direction: column; }
.price__amount { font-size: 2rem; font-weight: 800; color: var(--brand-dark); margin: 6px 0; }
.price__blurb { color: var(--muted); margin: 0 0 14px; }
.price ul { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.price ul li { padding: 6px 0 6px 24px; position: relative; }
.price ul li::before { content: "✓"; position: absolute; left: 0; color: var(--brand); font-weight: 800; }
.price--featured { border-color: var(--brand); box-shadow: 0 8px 30px var(--shadow); }

/* FAQ */
.faq { margin-top: 28px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; text-align: left; background: none; border: 0; padding: 18px 0;
  font-size: 1.05rem; font-weight: 600; cursor: pointer; color: var(--ink); display: flex; justify-content: space-between; }
.faq__q::after { content: "+"; color: var(--brand); font-weight: 800; }
.faq__q[aria-expanded="true"]::after { content: "−"; }
.faq__a { padding: 0 0 18px; color: var(--muted); }

/* CTA */
.cta { background: var(--cta-bg); color: #fff; padding: 64px 0; text-align: center; }
.cta h2 { margin: 0 0 8px; }
.cta p { margin: 0 0 24px; opacity: 0.92; }
.cta .btn--ghost { color: #fff; border-color: #fff; }
.cta .btn--ghost:hover { background: rgba(255,255,255,0.12); }
.cta .btn--primary { background: #fff; color: #15201a; }

/* Footer */
.footer { padding: 28px 0; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.9rem; }
.footer__inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.footer__links { display: flex; gap: 18px; }
.footer__links a { color: var(--muted); text-decoration: none; }
.footer__links a:hover { color: var(--brand-dark); }

/* Responsive */
@media (max-width: 820px) {
  .grid--3, .steps { grid-template-columns: 1fr; }
  .nav__toggle { display: block; }
  .nav__menu { position: absolute; top: 64px; left: 0; right: 0; background: var(--surface);
    border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px 20px 16px; display: none; }
  .nav__menu[data-open="true"] { display: flex; }
  .nav__menu a { padding: 12px 0; }
}


/* ── Legal pages (terms.html, privacy.html) ──────────────────────────────── */
.legal { max-width: 46rem; padding: 3rem 1rem 4rem; }
.legal h1 { margin-bottom: .25rem; }
.legal h2 { margin-top: 2rem; margin-bottom: .5rem; }
.legal h3 { margin-top: 1.25rem; margin-bottom: .35rem; font-size: 1rem; }
.legal p, .legal li { line-height: 1.65; }
.legal ul { padding-left: 1.25rem; margin: .5rem 0; }
.legal li { margin-bottom: .35rem; }
.legal__meta { opacity: .7; font-size: .9rem; margin-bottom: 1.5rem; }
/* Draft/owner-action callouts, deliberately loud so they cannot ship unnoticed. */
.legal__note,
.legal__todo {
  border-left: 3px solid currentColor;
  padding: .75rem 1rem;
  margin: 1rem 0;
  font-size: .95rem;
}
.legal__note { border-left-color: #d98324; background: rgba(217, 131, 36, .08); }
.legal__todo { border-left-color: #1f8a4c; background: rgba(31, 138, 76, .08); }

/* ── Dark theme ─────────────────────────────────────────────────────────────
   Declared twice on purpose. The media query serves a visitor whose system is
   dark even with JavaScript disabled; the attribute serves a pinned choice.
   The media query is scoped with :not([data-theme="light"]) so it can never
   override someone who explicitly chose light on a dark machine.

   --brand-dark is the link/accent colour, so in dark mode it holds a LIGHTER
   green than --brand. The token name reads oddly here; overriding values while
   keeping names is still better than a parallel set of dark-only names that
   every future rule would have to remember to use. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #2fa25e;
  --brand-dark: #6ddc9c;
  --ink: #e6efe9;
  --muted: #9aaea2;
  --bg: #0e1411;
  --bg-alt: #141c17;
  --surface: #161f1a;
  --line: #26332b;
  --nav-bg: rgba(14, 20, 17, 0.95);
  --cta-bg: #17623c;
  --shadow: rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: #2fa25e;
    --brand-dark: #6ddc9c;
    --ink: #e6efe9;
    --muted: #9aaea2;
    --bg: #0e1411;
    --bg-alt: #141c17;
    --surface: #161f1a;
    --line: #26332b;
    --nav-bg: rgba(14, 20, 17, 0.95);
    --cta-bg: #17623c;
    --shadow: rgba(0, 0, 0, 0.45);
  }
}

/* ── Per-vertical accents ───────────────────────────────────────────────────
   A fourth axis, orthogonal to data-theme. data-vertical is written statically
   into the served HTML rather than by script, so there is no flash and
   theme-init.js needs no change.

   Each vertical needs all three blocks, because the palette above is declared
   three times (light, pinned dark, system dark) and an accent given only once
   drifts in the modes it forgot. test/theme.test.js fails the build on a
   vertical missing one, and pins these values against site-data.js so the CSS
   and the page copy cannot disagree about what colour a vertical is.

   Specificity, since it is load bearing: :root[data-vertical] is (0,1,1), the
   same as the base :root[data-theme="dark"], so these come after it and the
   light accent would win in dark mode on source order alone. The dark variants
   below are (0,2,1) and take it back. Setting the accent inline on the element
   instead would beat every one of these and break dark mode outright.

   Only the accent moves. Background, ink and line stay shared, so a vertical
   page is recognisably the same site. --cta-bg and --shadow are listed because
   they hold literal greens rather than var(--brand); everything else follows. */
:root[data-vertical="poker"] {
  --brand: #1f8a4c;
  --brand-dark: #166b3a;
  --shadow: rgba(31, 138, 76, 0.12);
}
:root[data-vertical="poker"][data-theme="dark"] {
  --brand: #2fa25e;
  --brand-dark: #6ddc9c;
  --cta-bg: #17623c;
}
@media (prefers-color-scheme: dark) {
  :root[data-vertical="poker"]:not([data-theme="light"]) {
    --brand: #2fa25e;
    --brand-dark: #6ddc9c;
    --cta-bg: #17623c;
  }
}

:root[data-vertical="mtg"] {
  --brand: #a2560b;
  --brand-dark: #7c3f06;
  --shadow: rgba(162, 86, 11, 0.12);
}
:root[data-vertical="mtg"][data-theme="dark"] {
  --brand: #f59e0b;
  --brand-dark: #fcd34d;
  --cta-bg: #7c4306;
}
@media (prefers-color-scheme: dark) {
  :root[data-vertical="mtg"]:not([data-theme="light"]) {
    --brand: #f59e0b;
    --brand-dark: #fcd34d;
    --cta-bg: #7c4306;
  }
}

:root[data-vertical="pubgames"] {
  --brand: #a41c1c;
  --brand-dark: #7f1616;
  --shadow: rgba(164, 28, 28, 0.12);
}
:root[data-vertical="pubgames"][data-theme="dark"] {
  --brand: #ef4444;
  --brand-dark: #fca5a5;
  --cta-bg: #7f1d1d;
}
@media (prefers-color-scheme: dark) {
  :root[data-vertical="pubgames"]:not([data-theme="light"]) {
    --brand: #ef4444;
    --brand-dark: #fca5a5;
    --cta-bg: #7f1d1d;
  }
}

/* Theme toggle. Sits outside .nav__menu so it stays reachable on mobile,
   where the menu collapses behind the hamburger. */
.nav__theme {
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: 10px;
  width: 38px;
  height: 38px;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav__theme:hover { border-color: var(--brand); color: var(--brand-dark); }
.nav__theme:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nav__inner .nav__menu { margin-left: 0; }

/* ---------------------------------------------------------------------------
   Points simulator and blog. Both reuse the existing tokens, so a theme change
   reaches them without a second edit.
   --------------------------------------------------------------------------- */
.sim__layout { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .sim__layout { grid-template-columns: 22rem 1fr; align-items: start; } }

.sim__panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.sim__panel h2 { margin-top: 0; font-size: 1.05rem; }
.sim__field { display: block; margin-bottom: 1rem; }
.sim__field > span { display: block; font-weight: 600; margin-bottom: 0.35rem; font-size: 0.92rem; }
.sim__hint { color: var(--muted); font-size: 0.85rem; font-weight: 400; }

.sim__panel select,
.sim__panel input[type="number"],
.sim__panel textarea {
  width: 100%;
  padding: 0.55rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
}
.sim__panel textarea { min-height: 17rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85rem; line-height: 1.5; resize: vertical; }
.sim__panel select:focus-visible,
.sim__panel input:focus-visible,
.sim__panel textarea:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.sim__check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; }
.sim__check input { width: auto; }

.sim__summary { color: var(--muted); margin: 0 0 0.85rem; }
.sim__errors { background: var(--bg-alt); border-left: 3px solid var(--brand); padding: 0.6rem 1rem; border-radius: 6px; font-size: 0.9rem; }
.sim__errors ul { margin: 0; padding-left: 1.1rem; }

.sim__tablewrap { overflow-x: auto; }
.sim__table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.sim__table th, .sim__table td { text-align: left; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.sim__table th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.sim__table tbody tr:hover { background: var(--bg-alt); }

.sim__delta { font-size: 0.85rem; font-weight: 600; }
.sim__delta--up { color: var(--brand-dark); }
.sim__delta--down { color: #b4462f; }
.sim__delta--flat { color: var(--muted); font-weight: 400; }
:root[data-theme="dark"] .sim__delta--down { color: #f0917a; }

.posts { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.1rem; }
.post-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
}
.post-card h2 { margin: 0 0 0.35rem; font-size: 1.18rem; }
.post-card h2 a { color: inherit; text-decoration: none; }
.post-card h2 a:hover { color: var(--brand-dark); }
.post-card p { margin: 0.4rem 0 0; color: var(--muted); }
.post__meta { color: var(--muted); font-size: 0.88rem; margin: 0; }

.post { max-width: 46rem; }
.post h2 { margin-top: 2rem; }
.post h3 { margin-top: 1.4rem; }
.post table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; font-size: 0.94rem; }
.post th, .post td { text-align: left; padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--line); }
.post th { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); }
.post blockquote { margin: 1.2rem 0; padding: 0.6rem 1rem; border-left: 3px solid var(--brand); background: var(--bg-alt); border-radius: 6px; }
.post code { background: var(--bg-alt); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.92em; }
.post__cta { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }