/* Palette is lifted from the game's own art: the storm sea of the board,
   the gold of the title, and the ember in a Golem's core. */
:root {
  --slate: #121a20;      /* page */
  --tide: #1d2a32;       /* raised surfaces */
  --tide-line: #33454f;  /* rules and tile edges */
  --parchment: #e8e0cc;  /* body text */
  --iron: #9aa6ab;       /* secondary text */
  --gold: #e2b33c;       /* the title, headings */
  --ember: #ee6a2c;      /* the buy action, nothing else */
  --ember-hot: #ff8146;

  /* territory colors, as printed on the cards */
  --galv: #e4c440;
  --baron: #e0782c;
  --sub: #4fa3d9;
  --waste: #a3a3a3;
  --lush: #5db04b;

  --display: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Cormorant Garamond", Garamond, Georgia, serif;
  --measure: 34em;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--slate);
  color: var(--parchment);
  font: 400 1.25rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; margin: 0; }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); color: var(--gold); letter-spacing: .02em; }
h3 { font-size: 1.05rem; color: var(--parchment); letter-spacing: .03em; }
p { margin: 0; }
strong { font-weight: 600; color: #fff6e2; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.lede { max-width: var(--measure); margin-top: .6em; color: var(--iron); }
.note { margin-top: 1.2em; max-width: var(--measure); color: var(--iron); font-style: italic; }

/* ── Buttons ─────────────────────────────────────── */
.btn {
  display: inline-block;
  padding: .7em 1.4em .62em;
  background: var(--ember);
  color: #1a0d05;
  font: 700 1rem/1 var(--display);
  letter-spacing: .04em;
  text-decoration: none;
  border-radius: 3px;
  transition: background-color .15s;
}
.btn:hover { background: var(--ember-hot); }
.btn--small { font-size: .82rem; padding: .6em 1.1em .52em; }
.link { color: var(--gold); text-underline-offset: .25em; font-weight: 600; }
.link:hover { color: #f2cc66; }

/* ── Top bar ─────────────────────────────────────── */
.bar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px var(--gutter);
  background: rgb(18 26 32 / .86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--tide-line);
}
.bar__home img { height: 34px; width: auto; }

/* ── Hero ────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  background: #0f1519;
}
.hero__art img { width: 100%; height: min(78vh, 720px); object-fit: cover; object-position: 50% 35%; }
.hero__text { padding: 28px var(--gutter) 56px; }
.hero h1 img { width: min(420px, 82%); margin-left: -2%; }
.hero__pitch { margin-top: 1rem; max-width: 28em; font-size: clamp(1.3rem, 1.1rem + .7vw, 1.6rem); line-height: 1.45; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 1.6rem; margin-top: 1.8rem; }
.hero__meta { margin-top: 1.6rem; color: var(--iron); font-size: 1.05rem; }

@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 45fr) minmax(0, 55fr); min-height: calc(100vh - 56px); }
  .hero__art { order: 2; position: relative; }
  .hero__art img { position: absolute; inset: 0; height: 100%; }
  /* the art bleeds into the text column instead of stopping at a hard edge */
  .hero__art::before {
    content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; z-index: 1;
    background: linear-gradient(90deg, #0f1519, transparent);
  }
  .hero__text { align-self: center; padding: 64px var(--gutter) 64px max(var(--gutter), calc((100vw - 1200px) / 2)); }
}

/* ── Board ───────────────────────────────────────── */
.board-sec { padding: clamp(64px, 9vw, 120px) 0; }
.board-layout { display: grid; gap: 40px; margin-top: 40px; }
@media (min-width: 1100px) { .board-layout { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); align-items: center; } }

/* Tile geometry measured from Citadel_GAMEBOARD_v1: square tiles 257px
   apart on the 1800px render, first column at x=4, a row line at y=237.
   Pieces are placed by column/row index (--c, --r); the Nexus is c3 r2. */
.board {
  --tw: calc(257 / 1800 * 100%);
  --th: calc(257 / 1206 * 100%);
  position: relative; margin: 0;
  border: 1px solid var(--tide-line);
  border-radius: 4px; overflow: hidden;
  box-shadow: 0 30px 60px -30px #000;
}
.board__img { width: 100%; }
.piece {
  position: absolute;
  width: calc(var(--tw) * .84);
  left: calc(4 / 1800 * 100% + var(--c) * var(--tw) + var(--tw) * .08);
  top: calc(-20 / 1206 * 100% + var(--r) * var(--th) + var(--th) * .08);
  border-radius: 2px;
  box-shadow: 0 6px 14px rgb(0 0 0 / .55);
}
.nexus-label {
  position: absolute;
  left: calc(4 / 1800 * 100% + var(--c) * var(--tw));
  width: var(--tw);
  top: calc(-20 / 1206 * 100% + (var(--r) + 1) * var(--th) + .5em);
  text-align: center;
  font: 700 clamp(.55rem, 1.1vw, .85rem)/1 var(--display);
  color: var(--gold); letter-spacing: .08em;
  text-shadow: 0 1px 3px #000, 0 0 8px #000;
}

.pieces { margin: 0; display: grid; gap: 22px; }
.pieces div { padding-left: 18px; border-left: 2px solid var(--tide-line); }
.pieces dt { font: 700 1.05rem/1.2 var(--display); color: var(--parchment); letter-spacing: .03em; }
.pieces dd { margin: .3em 0 0; color: var(--iron); max-width: var(--measure); }
.pieces .pieces__win { border-left-color: var(--gold); }
.pieces__win dt { color: var(--gold); }
.pieces__win dd { color: var(--parchment); }

/* ── Turn ────────────────────────────────────────── */
.turn-sec { padding: clamp(64px, 9vw, 120px) 0; background: var(--tide); border-block: 1px solid var(--tide-line); }
.turn-layout { display: grid; gap: 56px; }
@media (min-width: 960px) { .turn-layout { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }

.turn { list-style: none; counter-reset: step; margin: 28px 0 0; padding: 0; max-width: var(--measure); }
.turn li { counter-increment: step; position: relative; padding: 0 0 18px 3rem; }
.turn li::before {
  content: counter(step);
  position: absolute; left: 0; top: .05em;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border: 1px solid var(--gold); border-radius: 50%;
  font: 700 .9rem/1 var(--display); color: var(--gold);
}

.terrain { align-self: start; padding: 28px; border: 1px solid var(--tide-line); border-radius: 4px; background: var(--slate); }
.terrain p { margin-top: .6em; color: var(--iron); }
.terrain__list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.terrain__list li { display: flex; align-items: center; gap: 14px; }
.glyph {
  width: 2.1rem; height: 2.1rem; flex: none;
  display: grid; place-items: center;
  font: 700 1.5rem/1 var(--body); font-style: italic;
  color: var(--g); background: color-mix(in srgb, var(--g) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--g) 50%, transparent);
  border-radius: 3px;
}

/* ── Roster ──────────────────────────────────────── */
.roster-sec { padding: clamp(64px, 9vw, 120px) 0 clamp(40px, 6vw, 80px); }
.roster {
  list-style: none; margin: 32px 0 0;
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(200px, 22vw, 260px);
  gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 4px max(var(--gutter), calc((100vw - 1200px) / 2)) 24px;
  scroll-padding-inline: max(var(--gutter), calc((100vw - 1200px) / 2));
  scrollbar-color: var(--tide-line) transparent;
}
.roster li { scroll-snap-align: start; }
.roster img { border-radius: 3px; box-shadow: 0 10px 24px -12px #000; }
.roster h3 { margin-top: 14px; }
.roster p { margin-top: .25em; font-size: 1.08rem; line-height: 1.45; color: var(--iron); }

/* ── Buy ─────────────────────────────────────────── */
.buy-sec { padding: clamp(64px, 9vw, 120px) 0; background: radial-gradient(ellipse at 30% 40%, #22323b 0%, var(--slate) 70%); }
.buy-layout { display: grid; gap: 40px; align-items: center; }
@media (min-width: 860px) { .buy-layout { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 64px; } }
.buy__box { width: min(420px, 100%); margin-inline: auto; border-radius: 4px; box-shadow: 0 40px 80px -30px #000; transform: rotate(-2deg); }
.buy__text > p { max-width: var(--measure); margin-top: 1.2em; }
.buy__text > .note { margin-top: .8em; }

.store { margin-top: 24px; }
.store iframe { display: block; width: 100%; max-width: 552px; height: 167px; border: 0; border-radius: 4px; }
.store__soon {
  max-width: 552px; padding: 22px 24px;
  border: 1px dashed var(--gold); border-radius: 4px;
  background: rgb(226 179 60 / .06);
}
.store__fallback { margin-top: .8em; font-size: 1.05rem; }

/* ── Footer ──────────────────────────────────────── */
.foot { padding: 32px 0 40px; border-top: 1px solid var(--tide-line); color: var(--iron); font-size: 1rem; }