/* Uncommon Chess — the site.
   One stylesheet, no build step, so the whole thing can be dropped on Netlify
   or any static host and just work.

   The look is the game's own, and the game's is Uncommon Tanks': paper on a
   dark table. Graphite cards with an ink outline and a hard shadow, paper
   stickers for anything you would press, gold for what you own. Colour is
   spent on meaning and nowhere else. The pixel face is kept for the wordmark
   and the headings — it is the art — and everything you actually read is set
   in a plain rounded sans, which is the change the game made and did not
   regret. */

:root {
  --night: #120d1a;
  --night-2: #181122;
  --panel: #241d33;
  --panel-hi: #655578;
  --edge: #2f2743;
  --ink: #191325;
  --paper: #f3eee2;
  --muted: #a294b8;
  --gold: #ffc23d;
  --lime: #bdef4c;
  --sky: #72c6ff;
  --measure: 62rem;
  --pad: clamp(20px, 5vw, 56px);
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--night);
  color: var(--paper);
  font-family: ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

.pixel {
  font-family: "Press Start 2P", "Courier New", monospace;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.02em;
}

a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--paper); }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 var(--pad); }

/* --- Header and footer ------------------------------------------------- */

header.site {
  border-bottom: 2px solid var(--ink);
  background: var(--night-2);
}
header.site .wrap {
  display: flex; align-items: center; gap: 1rem;
  padding-block: 1rem; flex-wrap: wrap;
}
header.site .mark { font-size: 0.72rem; color: var(--gold); text-decoration: none; }
header.site nav { margin-left: auto; display: flex; gap: 1.25rem; font-size: 0.95rem; font-weight: 600; }
header.site nav a { text-decoration: none; color: var(--muted); }
header.site nav a:hover { color: var(--paper); }

footer.site {
  border-top: 2px solid var(--ink);
  background: var(--night-2);
  padding: 2rem 0 3rem; color: var(--muted); font-size: 0.9rem;
}
footer.site .wrap { display: flex; gap: 1.25rem; flex-wrap: wrap; }
footer.site .spacer { margin-left: auto; }

/* --- Hero --------------------------------------------------------------- */

.hero { padding: clamp(3rem, 8vw, 5.5rem) 0 3rem; text-align: center; }
.hero h1 {
  font-size: clamp(1.5rem, 6.4vw, 3rem);
  margin: 0 0 .5rem; color: var(--paper);
  text-shadow: 0 4px 0 var(--ink);
}
.hero .sub {
  font-size: clamp(1.2rem, 5.6vw, 2.4rem);
  color: var(--gold); margin: 0 0 1.75rem;
  text-shadow: 0 4px 0 var(--ink);
}
.hero p.lede {
  color: var(--muted); max-width: 38rem; margin: 0 auto 2rem; font-size: 1.05rem;
}

/* A paper sticker, exactly as the game's buttons are: rounded card, ink
   outline, lit top hairline, hard shadow. */
.price {
  display: inline-flex; align-items: baseline; gap: .7rem; flex-wrap: wrap;
  justify-content: center;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: 10px;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 rgba(0,0,0,.16), 3px 3px 0 var(--ink);
  padding: .7rem 1.25rem;
}
.price .amount { font-family: "Press Start 2P", monospace; font-size: 1rem; }
.price .note { font-size: .85rem; color: #5a5168; font-weight: 600; }

/* --- Sections ----------------------------------------------------------- */

section { padding: clamp(2.5rem, 6vw, 4rem) 0; border-top: 1px solid var(--edge); }
section h2 { font-size: .8rem; color: var(--gold); margin: 0 0 1.75rem; }
section h3 { font-size: 1.05rem; margin: 2rem 0 .5rem; color: var(--paper); }
section h3:first-of-type { margin-top: 0; }
section p { max-width: 46rem; }

/* Graphite cards with a lit top hairline and a hard shadow: the game's
   panels, in CSS. */
.card, .callout, .shot figcaption {
  background: var(--panel);
  border: 2px solid var(--ink);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 var(--panel-hi), 4px 4px 0 var(--ink);
}

.grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.card { padding: 1.25rem 1.25rem 1.35rem; }
.card h3 { margin: 0 0 .5rem; font-size: 1rem; color: var(--gold); font-weight: 800; }
.card p { margin: 0; color: var(--muted); font-size: .95rem; }

.callout { padding: 1.1rem 1.25rem 1.2rem; margin: 1.75rem 0; }
.callout strong { color: var(--lime); }

/* --- Screenshots -------------------------------------------------------- */

.shots {
  display: grid; gap: 1.25rem; margin-top: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.shot { margin: 0; }
.shot img {
  display: block; width: 100%; height: auto;
  image-rendering: pixelated;
  border: 2px solid var(--ink); border-radius: 12px;
  box-shadow: 4px 4px 0 var(--ink);
  background: var(--night-2);
}
.shot figcaption {
  margin-top: .7rem; padding: .5rem .75rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  border-radius: 8px; box-shadow: inset 0 1px 0 var(--panel-hi), 3px 3px 0 var(--ink);
}

/* --- Long copy ---------------------------------------------------------- */

dl.faq dt { font-weight: 800; margin-top: 1.6rem; color: var(--paper); }
dl.faq dt:first-child { margin-top: 0; }
dl.faq dd { margin: .4rem 0 0; color: var(--muted); max-width: 46rem; }

.legal { color: var(--muted); }
.legal p, .legal li { max-width: 46rem; }
.legal ul { padding-left: 1.15rem; }
.legal li { margin-bottom: .5rem; }
.legal strong { color: var(--paper); }
.legal .updated { font-size: .85rem; font-style: italic; }