/* ============================================================
   blazing-pepper.com
   Tokens first; every colour is defined on bare :root so the
   dark block only needs to override, never introduce.
   ============================================================ */
:root {
  --bg:        #fbf9f7;
  --surface:   #ffffff;
  --surface-2: #f4f0ec;
  --fg:        #1a1614;
  --muted:     #6b6259;
  --accent:    #c1341a;
  --accent-2:  #e8683f;
  --accent-soft:#fdeeea;
  --line:      #e6e0da;
  --shadow:    0 1px 2px rgb(0 0 0 / .04), 0 8px 24px rgb(0 0 0 / .06);
  --radius:    14px;
  --measure:   36rem;
  /* Screenshot sizing, in one place. Shots support the text; they do not
     lead it. --shot-lead is the in-article hero, --shot-thumb the gallery
     tiles, --shot-tall the height cap for portrait phone captures. */
  --shot-lead:  20rem;
  --shot-thumb: 11rem;
  --shot-tall:  12rem;
  --shot-home:  21rem;
  /* Matches the logo tile so the lockup reads as one badge. The dark theme
     needs a lifted tint or the border vanishes into the background. */
  --brand-edge: #2b0c07;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #14110f;
    --surface:   #1d1916;
    --surface-2: #241f1b;
    --fg:        #f2ede8;
    --muted:     #a1968b;
    --accent:    #ff6b4a;
    --accent-2:  #ffa07f;
    --accent-soft:#2b1a14;
    --line:      #2e2823;
    --shadow:    0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .35);
    --brand-edge: #4a1a10;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
.wrap { width: min(68rem, 100% - 2.5rem); margin-inline: auto; }

/* ---------- header ---------- */
header {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
}
header .wrap { display: flex; align-items: center; gap: 1rem; padding: .85rem 0; }
/* Brand lockup: mark + two-weight wordmark. The mark is an original SVG,
   not the watermarked stock reference. */
.brand {
  display: inline-flex; align-items: center; gap: .55rem;
  text-decoration: none; color: var(--fg);
  border: 2px solid var(--brand-edge); border-radius: 12px;
  padding: .3rem .7rem .3rem .35rem;
}
.brand img { width: 30px; height: 30px; flex: none; }
.brand .wordmark { display: flex; flex-direction: column; line-height: 1.05; }
.brand .wordmark b {
  font-weight: 800; font-size: 1.0625rem; letter-spacing: -.025em;
}
.brand .wordmark b em { font-style: normal; color: var(--accent); }
.brand .wordmark small {
  font-size: .6875rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
@media (max-width: 26rem) { .brand .wordmark small { display: none; } }
nav { margin-left: auto; display: flex; gap: 1.4rem; }
nav a { color: var(--muted); text-decoration: none; font-size: .9375rem; }
nav a:hover, nav a:focus-visible { color: var(--fg); }

/* ---------- buttons ---------- */
.btn {
  display: inline-block; padding: .62rem 1.15rem; border-radius: 10px;
  text-decoration: none; font-size: .9375rem; font-weight: 600;
  border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { filter: brightness(1.08); }
.btn-ghost { border-color: var(--line); color: var(--fg); background: var(--surface); }
.btn-ghost:hover { border-color: var(--accent); }
.btn[disabled] { opacity: .55; cursor: not-allowed; filter: none; }

/* ---------- home: compact intro, games lead ---------- */
.intro { padding: clamp(2.5rem, 7vw, 4rem) 0 .5rem; }
.intro h1 {
  font-size: clamp(1.9rem, 4.5vw, 2.75rem); line-height: 1.08;
  letter-spacing: -.03em; margin: 0 0 .6rem;
}
.intro p {
  color: var(--muted); font-size: 1.0625rem;
  max-width: 32rem; margin: 0;
}

/* feature rows - the games themselves carry the page */
.feature {
  display: grid; gap: clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: 1fr;
  align-items: center;
  padding: clamp(2.25rem, 5vw, 3.25rem) 0;
  border-top: 1px solid var(--line);
}
@media (min-width: 46rem) {
  /* Text column first and wider: the name and description lead, the
     screenshot supports. Source order already matches, so mobile stacks
     name -> description -> screenshot with no ordering tricks. */
  .feature { grid-template-columns: 1fr minmax(0, var(--shot-home)); }
}
.feature .shot-frame {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(.75rem, 2vw, 1.25rem);
  box-shadow: var(--shadow);
}
.feature .shot-frame img { border-radius: 8px; }
.feature-body .eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .8125rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .6rem;
}
.feature-body .eyebrow img { width: 22px; height: 22px; border-radius: 5px; }
.feature-body h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem); letter-spacing: -.02em;
  margin: 0 0 .5rem; line-height: 1.15;
}
.feature-body p { color: var(--muted); margin: 0 0 1rem; max-width: var(--measure); }
.feature-body .btn { margin-top: .25rem; }

/* ---------- generic sections ---------- */
section { padding: clamp(2.5rem, 6vw, 3.5rem) 0; border-top: 1px solid var(--line); }
section > .wrap > h2 {
  font-size: 1.3rem; letter-spacing: -.02em; margin: 0 0 .75rem;
}
section p { color: var(--muted); max-width: var(--measure); }

/* ---------- subpages ---------- */
.crumb { color: var(--muted); font-size: .875rem; margin: 0 0 .75rem; }
.crumb a { color: var(--muted); text-decoration: none; }
.crumb a:hover { color: var(--fg); }
.page { padding: 2.25rem 0 1rem; }
.page h1 { font-size: clamp(1.75rem, 4vw, 2.4rem); letter-spacing: -.025em; margin: 0 0 .4rem; }
.stamp { color: var(--muted); font-size: .9375rem; margin: 0 0 2rem; }

article h2 { font-size: 1.125rem; margin: 2.25rem 0 .6rem; letter-spacing: -.01em; }
/* Sub-headings inside a section (the two gaming services under one heading in
   the privacy policy). Without this the browser default outranks h2. */
article h3 { font-size: .9375rem; margin: 1.4rem 0 .4rem; letter-spacing: -.01em; }
article p, article li { color: var(--muted); max-width: var(--measure); }
article ul { padding-left: 1.15rem; margin: .5rem 0; }
article li { margin-bottom: .4rem; }
article a { color: var(--accent); }

.note {
  background: var(--accent-soft); border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 10px; padding: .95rem 1.15rem; margin: 1.75rem 0;
  max-width: var(--measure);
}
.note p { margin: 0; color: var(--fg); font-size: .9375rem; }

/* ---------- game page ---------- */
.game-head { display: flex; gap: 1.25rem; align-items: center; flex-wrap: wrap; }
.game-head > img {
  width: 88px; height: 88px; border-radius: 20px; flex: none;
  box-shadow: var(--shadow);
}
.game-head h1 { margin: 0 0 .3rem; }
.pills { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0 0; padding: 0; list-style: none; }
.pills li {
  font-size: .75rem; color: var(--muted); margin: 0;
  border: 1px solid var(--line); border-radius: 100px; padding: .18rem .65rem;
  background: var(--surface);
}

/* The lead shot is sized, not full-bleed - screenshots were overwhelming
   the text before. Wide captures cap by width, phone captures by height. */
figure { margin: 0; }
figure img {
  border-radius: 10px; border: 1px solid var(--line);
  background: var(--surface-2); box-shadow: var(--shadow);
}
figcaption { font-size: .8125rem; color: var(--muted); margin-top: .5rem; }

.lead-shot { margin: 1.5rem 0 .5rem; max-width: var(--shot-lead); }

.gallery {
  display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1rem 0 0;
  align-items: flex-end;
}
.gallery figure { flex: 0 1 auto; max-width: var(--shot-thumb); }
.gallery figure.wide { max-width: var(--shot-thumb); }
.gallery figure.tall img { max-height: var(--shot-tall); width: auto; }
.gallery figure img { max-height: var(--shot-tall); width: auto; }

/* ---------- forms ---------- */
form { max-width: var(--measure); margin-top: 1.5rem; }
.field { margin-bottom: 1.1rem; }
label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .35rem; }
input[type="text"], input[type="email"], textarea, select {
  width: 100%; padding: .62rem .8rem; font: inherit; font-size: .9375rem;
  color: var(--fg); background: var(--surface);
  border: 1px solid var(--line); border-radius: 10px;
}
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent;
}
textarea { min-height: 9.5rem; resize: vertical; }
.hint { font-size: .8125rem; color: var(--muted); margin: .35rem 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.status { margin-top: 1rem; padding: .8rem 1rem; border-radius: 10px; font-size: .9375rem; display: none; }
.status.show { display: block; }
.status.ok   { background: var(--accent-soft); border: 1px solid var(--accent); color: var(--fg); }
.status.err  { background: var(--surface-2);  border: 1px solid var(--line);   color: var(--fg); }

details { border-bottom: 1px solid var(--line); padding: .85rem 0; max-width: var(--measure); }
details summary { cursor: pointer; font-weight: 600; font-size: .9375rem; }
details p { margin: .55rem 0 0; }

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--line); padding: 2rem 0 3rem;
  color: var(--muted); font-size: .875rem;
}
footer a { color: inherit; }

/* ---------- store call to action (App Store and Google Play) ---------- */
.store {
  display: flex; flex-wrap: wrap; align-items: center; gap: .85rem;
  margin: 1.5rem 0 .25rem;
}
/* Both labels are cut to one width so the App Store and Play rows line up, and
   so "Coming to Google Play" does not read as a lesser button than the one above
   it. 16.5rem clears the longest label, "Download on the App Store". */
.store .btn-primary, .store .soon {
  min-width: 16.5rem; justify-content: center; box-sizing: border-box;
}
.store .btn-primary { display: inline-flex; align-items: center; gap: .5rem; }
.store .btn-primary svg { width: 17px; height: 17px; fill: currentColor; }
.store-meta { font-size: .875rem; color: var(--muted); }
.store-meta b { color: var(--fg); font-weight: 650; }
/* A game on both stores carries two of these, stacked. A small gap holds them
   apart, still tighter than the space to the paragraph below, so the pair reads
   as one block. */
.store + .store { margin-top: .4rem; }

/* ---------- home: the two families ---------- */
/* The home page carries games and apps now, and they are not the same
   proposition, so each list gets a name. The family draws the hairline that
   used to belong to its first feature row; that row drops its own or the two
   would sit a few pixels apart and read as a mistake. */
.family { border-top: 1px solid var(--line); }
.family-head h2 {
  font-size: .8125rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
  margin: clamp(2rem, 5vw, 2.75rem) 0 0;
}
.family-head + .feature { border-top: 0; padding-top: 1.25rem; }

/* ---------- App Store call to action: not yet ---------- */
/* A button linking to an app record Apple has not published yet lands the
   reader on "not available in your region", which is worse than saying so.
   Unreleased apps get this instead, and it carries the same meta line beside
   it so the price and the platforms still read the same way. */
.store .soon {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .62rem 1.15rem; border-radius: 10px;
  font-size: .9375rem; font-weight: 600; color: var(--fg);
  background: var(--surface); border: 1px dashed var(--line);
}
.store .soon svg { width: 17px; height: 17px; fill: var(--accent); }
@media (max-width: 26rem) {
  .store .btn-primary, .store .soon { min-width: 100%; }
}

/* ---------- home: games | apps, side by side ---------- */
/* Games on the left, apps on the right. Each product is a card rather than a
   text-beside-screenshot row, because a half-width column has no room for the
   row. Below 52rem the columns stack, games first, which is source order. */
.families {
  display: grid; grid-template-columns: 1fr; gap: 0 clamp(1.5rem, 4vw, 2.75rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 52rem) { .families { grid-template-columns: 1fr 1fr; } }
.families .family { border-top: 0; min-width: 0; }
.families .family-head h2 { margin-bottom: 1rem; }
.cards { display: grid; gap: 1.25rem; padding-bottom: clamp(2rem, 5vw, 3rem); }
.card {
  display: flex; flex-direction: column; gap: .15rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.15rem 1.15rem;
  box-shadow: var(--shadow);
}
.card .shot-frame {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 10px; padding: .5rem; margin-bottom: .85rem;
}
.card .shot-frame img { border-radius: 6px; aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.card .eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 .3rem;
}
.card .eyebrow img { width: 22px; height: 22px; border-radius: 5px; }
.card h3 { font-size: 1.3rem; letter-spacing: -.02em; margin: 0 0 .35rem; line-height: 1.2; }
.card p { color: var(--muted); margin: 0 0 .75rem; font-size: .9375rem; }
.card .card-meta { font-size: .8125rem; margin: 0 0 .9rem; }
.card .card-meta b { color: var(--fg); font-weight: 650; }
.card .btn { align-self: flex-start; margin-top: auto; }
.badge {
  display: inline-block; font-size: .6875rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent); border-radius: 100px; padding: .05rem .55rem;
  vertical-align: middle; margin-left: .35rem;
}

/* ---------- privacy: one policy per product ---------- */
.policy-list { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .5rem; max-width: var(--measure); }
.policy-list li { margin: 0; max-width: none; }
.policy-list a {
  display: flex; align-items: center; gap: .75rem; text-decoration: none;
  color: var(--fg); background: var(--surface); border: 1px solid var(--line);
  border-radius: 10px; padding: .6rem .85rem;
}
.policy-list a:hover { border-color: var(--accent); }
.policy-list img { width: 32px; height: 32px; border-radius: 7px; flex: none; }
.policy-list span { display: flex; flex-direction: column; line-height: 1.3; }
.policy-list small { color: var(--muted); font-size: .8125rem; }

/* Four nav links beside the lockup overran a 390px phone. Tighten them there. */
@media (max-width: 30rem) {
  header .wrap { gap: .6rem; }
  nav { gap: .8rem; }
  nav a { font-size: .875rem; }
}
@media (max-width: 23.5rem) {
  nav { gap: .6rem; }
  nav a { font-size: .8125rem; }
}

/* Every card the same size. On the two-column layout both families share one
   grid through subgrid: row 1 holds the two headings and every later row is
   1fr, which in an auto-height grid sizes all rows to the tallest card. When
   the columns stack, each family's cards are equalised among themselves. */
.cards { grid-auto-rows: 1fr; }
@media (min-width: 52rem) {
  .families { grid-template-rows: auto; grid-auto-rows: 1fr; row-gap: 1.25rem; }
  /* span = 1 heading row + 4 cards; raise it if a family grows past four. */
  .families .family { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
  .families .family-head h2 { margin-bottom: 0; }
  .families .cards { display: contents; }
  .families { padding-bottom: clamp(2rem, 5vw, 3rem); }
}
.card .shot-frame { margin: .7rem 0 .85rem; }

/* ---------- /games/ and /apps/ ---------- */
.lede { max-width: 44rem; }
.cards-page { margin-top: .5rem; }
@media (min-width: 46rem) { .cards-page { grid-template-columns: 1fr 1fr; } }
.card h2 { font-size: 1.3rem; letter-spacing: -.02em; margin: 0 0 .35rem; line-height: 1.2; }
.families .family-head h2 a { color: inherit; text-decoration: none; }
.families .family-head h2 a:hover { color: var(--accent); }
.families .family-head h2 a::after { content: " \2192"; }