/* The city pages ("Who owns New York?", worker/src/citypages.ts): read by search engines and by visitors on their way
   into the game. They don't load the game's stylesheet, so the tokens they use are copied from web/src/style.css
   (:root): keep the two in step. Dark mode borrows the --night family, the game's one dark. */
:root {
  --ink: #1a2133;
  --ink-2: #475066;
  --muted: #6a7286;
  --paper: #ffffff;
  --wash: #eef1f5;
  --line: #d5dbe4;
  --edge: rgba(26, 33, 51, 0.28);
  --lift: 0 2px 0 rgba(26, 33, 51, 0.22);
  --gold: #f2b705;
  --gold-ink: #3a2a00;
  --gold-wash: #fff8e1;
  --sale: #e0661b;
  --link: #2c68c9; /* --theirs: other players' colour, for their names */
  --r-tag: 4px;
  --r-control: 8px;
  --r-card: 10px;
  --r-pill: 999px;
  --display: 'Archivo', system-ui, sans-serif;
  --ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ink: #dfe7f5; /* --night-ink */
    --ink-2: #8fa3c4; /* --night-2 */
    --muted: #8fa3c4;
    --paper: #0d1626; /* --night */
    --wash: #1a2740; /* --night-raise */
    --line: rgba(159, 180, 216, 0.16); /* --night-rule */
    --edge: rgba(159, 180, 216, 0.28);
    --gold-wash: #1a2740;
    --link: #8fb0ff;
  }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--ui); }
a { color: var(--link); }

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  max-width: 760px; margin: 0 auto; padding: 14px 16px;
}
.brand { display: flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font: 800 19px/1 var(--display); font-stretch: 112%; letter-spacing: -0.02em; }
.brand img { width: 28px; height: 28px; }

/* The one loud piece: gold, an ink edge and a hard offset shadow, like the game's gold buttons. */
.play {
  display: inline-block; padding: 10px 18px; border: 2px solid var(--ink); border-radius: var(--r-control);
  background: var(--gold); color: var(--gold-ink); box-shadow: 0 3px 0 var(--ink);
  font: 800 16px/1.2 var(--display); text-decoration: none; white-space: nowrap;
}
.play:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.play.big { font-size: 19px; padding: 13px 26px; margin: 4px 0 8px; }

main { max-width: 760px; margin: 0 auto; padding: 8px 16px 56px; }
h1 { font: 800 36px/1.1 var(--display); font-stretch: 112%; letter-spacing: -0.02em; margin: 16px 0 12px; }
h2 { font: 800 22px/1.2 var(--display); margin: 40px 0 12px; }
h3 { font: 700 17px/1.3 var(--ui); margin: 20px 0 4px; }
.lead { font-size: 18px; color: var(--ink-2); margin: 0 0 20px; }

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 8px; }
.stats div { background: var(--wash); border: 1px solid var(--edge); border-radius: var(--r-card); box-shadow: var(--lift); padding: 12px; }
.stats dt { color: var(--muted); font-size: 13px; }
.stats dd { margin: 2px 0 0; font: 800 24px/1.2 var(--display); font-variant-numeric: tabular-nums; }
.live { color: var(--muted); font-size: 14px; margin: 0 0 16px; }

table { width: 100%; border-collapse: collapse; border: 1px solid var(--edge); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--lift); }
th, td { text-align: start; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--wash); color: var(--muted); font-size: 13px; font-weight: 600; }
tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: end; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.name { font-weight: 600; overflow-wrap: anywhere; }
td.name a { color: var(--ink); text-decoration-color: var(--line); }
.coin { width: 14px; height: 14px; vertical-align: -2px; margin-inline-end: 4px; }
.sale { display: inline-block; padding: 1px 8px; border-radius: var(--r-tag); background: var(--gold-wash); color: var(--sale); font-size: 13px; font-weight: 700; }
.empty { color: var(--muted); }

ol.steps { padding-inline-start: 22px; }
ol.steps li { margin: 6px 0; }

footer { max-width: 760px; margin: 0 auto; padding: 20px 16px 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
footer ul { list-style: none; padding: 0; margin: 8px 0 16px; display: flex; flex-wrap: wrap; gap: 4px 14px; }

@media (max-width: 520px) {
  h1 { font-size: 28px; }
  .stats dd { font-size: 19px; }
  .top .play { padding: 8px 12px; font-size: 15px; }
  th, td { padding: 8px; }
}