/* Chariton Arcade chrome.
   Chariton Media is the publisher and reads primary; Nolan Law Firm is a
   sponsor and reads subordinate. No ad is ever positioned over a game canvas
   and no ad is ever rendered inside a game iframe; the slots are siblings of
   the frame, never children.

   Vendored nothing and fetched nothing. System font stack only, so the page
   makes no external request of any kind. */

:root {
  --bg: #070a12;
  --bg-panel: #0d1220;
  --bg-raised: #131a2c;
  --rule: #222d47;
  --fg: #dfe7f5;
  --fg-dim: #93a1bd;
  --fg-faint: #6c7a97;
  --accent: #7ce7ff;
  --accent-warm: #ffd166;
  --focus: #7ce7ff;
  --maxw: 1180px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 16px;
}

/* ── Masthead ─────────────────────────────────────────── */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--bg-panel);
}

.masthead__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 18px 16px 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.masthead__title {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg);
}

.masthead__title a { color: inherit; text-decoration: none; }
.masthead__title a:hover { color: var(--accent); }

.masthead__publisher {
  margin: 0;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.masthead__back {
  margin-left: auto;
  font-size: 0.85rem;
  text-decoration: none;
  white-space: nowrap;
}

.masthead__back:hover { text-decoration: underline; }

/* ── Sponsor bar; subordinate to the masthead by design ── */

.sponsor {
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
}

.sponsor__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 7px 16px;
  font-size: 0.8rem;
  color: var(--fg-dim);
}

.sponsor__inner a { color: var(--fg-dim); }
.sponsor__inner a:hover { color: var(--accent); }

/* ── Lobby ────────────────────────────────────────────── */

.lede {
  padding: 26px 0 6px;
  max-width: 58ch;
}

.lede h2 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 700;
}

.lede p {
  margin: 0;
  color: var(--fg-dim);
}

/* Auto-fitting, so a fourth and fifth game need no CSS change (PRD P2). */
.games {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  padding: 20px 0 8px;
  margin: 0;
  list-style: none;
}

.game-card {
  display: flex;
  flex-direction: column;
  background: var(--bg-panel);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 16px;
}

.game-card h3 {
  margin: 0 0 6px;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.game-card__desc {
  margin: 0 0 12px;
  color: var(--fg-dim);
  font-size: 0.92rem;
}

.game-card__controls {
  margin: 0 0 16px;
  font-size: 0.82rem;
  color: var(--fg-faint);
}

.game-card__controls b { color: var(--fg-dim); font-weight: 600; }

.game-card__play {
  margin-top: auto;
  display: inline-block;
  align-self: flex-start;
  padding: 9px 20px;
  border: 1px solid var(--accent);
  border-radius: 5px;
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.game-card__play:hover,
.game-card__play:focus-visible {
  background: var(--accent);
  color: #04070f;
}

/* ── Play page: game plus its ad slots ────────────────── */

.play {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-areas:
    "frame sidebar"
    "strip strip";
  gap: 18px;
  padding: 18px 0 8px;
  align-items: start;
}

.play__frame { grid-area: frame; }
.play__sidebar { grid-area: sidebar; }
.play__strip { grid-area: strip; }

.frame-shell {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 380px;
  background: #000;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}

.frame-shell iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.sr-title {
  margin: 0 0 10px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.frame-note {
  margin: 8px 0 0;
  font-size: 0.78rem;
  color: var(--fg-faint);
}

/* Lobby ad block: the strip sits above, the creative centred beneath it.
   Neither is ever placed over content. */
.lobby-ads {
  display: flex;
  justify-content: center;
  padding: 16px 0 4px;
}

/* ── Ad slots ─────────────────────────────────────────── */

.ad-slot {
  display: block;
}

.ad-slot__label {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 5px;
}

.ad-sidebar {
  position: relative;
  width: 300px;
  /* Height comes from the manifest, not from a constant. Three of the five
     live creatives render taller than the 355 the PRD assumed: will-or-trust
     needs 396 and loses its footer and phone number at 355; aging-parents and
     farm-estate need 366. Measured, not read off a stylesheet. */
  height: var(--ad-h, 355px);
  max-width: 100%;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--bg-panel);
}

.ad-sidebar__frame {
  display: block;
  width: 300px;
  height: var(--ad-h, 355px);
  border: 0;
}

/* An iframe swallows its own clicks, so the click is taken here and routed
   through /go/<id>. The creative underneath stays display only. */
.ad-sidebar__hit {
  position: absolute;
  inset: 0;
  display: block;
  text-indent: -9999px;
  overflow: hidden;
}

.ad-sidebar__hit:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -2px;
}

.ad-strip {
  display: block;
  padding: 13px 16px;
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-warm);
  border-radius: 6px;
  text-decoration: none;
  color: var(--fg);
}

.ad-strip:hover { border-color: var(--accent-warm); }

.ad-strip__headline {
  display: block;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ad-strip__body {
  display: block;
  color: var(--fg-dim);
  font-size: 0.9rem;
  margin-top: 2px;
}

.ad-strip__cta {
  display: block;
  color: var(--accent-warm);
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 6px;
}

/* ── Footer ───────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--rule);
  margin-top: 26px;
  padding: 18px 0 32px;
  color: var(--fg-faint);
  font-size: 0.82rem;
}

.site-footer p { margin: 0 0 6px; }
.site-footer a { color: var(--fg-dim); }

/* ── Narrow viewports ─────────────────────────────────
   Both slots drop below the game and stack. No ad is ever
   placed over the canvas at any width. */

@media (max-width: 900px) {
  .play {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "frame"
      "sidebar"
      "strip";
  }
  .play__sidebar {
    display: flex;
    justify-content: center;
  }
  /* The games are full-window applications. A 4/3 box on a phone handed
     Scrap Belt a 351x300 playfield, about a third of its standalone size,
     and its own controls then collided with its own menu text. Give the
     frame real vertical room instead and let the ads sit below the fold. */
  .frame-shell {
    aspect-ratio: auto;
    height: 78vh;
    min-height: 460px;
    max-height: 780px;
  }
}

@media (max-width: 420px) {
  .masthead__title { font-size: 1.3rem; }
  .masthead__back { margin-left: 0; width: 100%; }
  .site-footer p { margin-bottom: 0; }
  .wrap, .masthead__inner, .sponsor__inner { padding-left: 12px; padding-right: 12px; }
  /* 300px creative plus two 1px borders fits inside a 375px viewport with
     12px gutters; nothing is allowed to force a horizontal scrollbar. */
  .ad-sidebar { width: 300px; }
}

/* ── Tap targets ──────────────────────────────────────
   40px minimum on every chrome link. Scoped by pointer type and by width,
   not by a single narrow breakpoint: the first version of this rule lived in
   `max-width: 420px` and left the 15px sponsor credit intact on an iPhone 15
   Plus (430), an iPhone 16 Pro Max (440), a Galaxy S24 Ultra (480) and every
   tablet. The sponsor credit is the monetized path, which is the whole reason
   the defect mattered. `.prose a` is in the list because the privacy page's
   only content link was 17px at every width. */

@media (pointer: coarse), (max-width: 1024px) {
  .masthead__title a,
  .masthead__back,
  .sponsor__inner a,
  .site-footer a,
  .prose a {
    display: inline-block;
    min-height: 40px;
    line-height: 40px;
  }
  .sponsor__inner { padding-top: 2px; padding-bottom: 2px; }
  .site-footer p { margin-bottom: 0; }
  .prose p { line-height: 1.7; }
}

/* ── Accessibility and motion ─────────────────────────── */

a:focus-visible,
.game-card__play:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
  z-index: 10;
  background: var(--bg-raised);
  padding: 8px 14px;
  border-radius: 5px;
}

/* ── Privacy page prose ───────────────────────────────── */

.prose {
  padding: 26px 0 8px;
  max-width: 68ch;
}

.prose h2 {
  margin: 0 0 14px;
  font-size: 1.5rem;
  letter-spacing: 0.03em;
}

.prose h3 {
  margin: 26px 0 8px;
  font-size: 1.02rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
}

.prose p {
  margin: 0 0 12px;
  color: var(--fg-dim);
}

.prose code {
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.88em;
  color: var(--fg);
}

.prose__stamp {
  margin-top: 26px;
  font-size: 0.8rem;
  color: var(--fg-faint);
}

/* ── Game card screenshot ─────────────────────────────
   A real screenshot of each game, not artwork. Patrick's note: without one,
   a reader who did not build these cannot tell what any of them is.
   Explicit width and height plus a fixed aspect ratio so the card never
   reflows as the image arrives; the lobby has a sub-3s mobile budget and a
   layout shift is the cheapest way to fail it. */

.game-card__shot {
  display: block;
  margin: -16px -16px 14px;
  border-bottom: 1px solid var(--rule);
  border-radius: 7px 7px 0 0;
  overflow: hidden;
  background: #04060f;
  line-height: 0;
}

.game-card__shot img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.game-card:hover .game-card__shot img {
  opacity: 0.92;
}

/* ── Reserve the ad slots before they fill ────────────
   The slots had no height until js/ads.js injected a creative, so every page
   shifted when the ad landed: CLS 0.1372 before the thumbnails, still 0.0546
   after. Reserving the space removes the shift rather than shrinking it.
   396 is the tallest creative in the manifest (will-or-trust); a shorter one
   simply leaves a little slack. */

.ad-slot[data-slot="sidebar"] {
  min-height: 414px;   /* 396 creative + label and its margin */
}

.ad-slot[data-slot="strip"] {
  min-height: 108px;   /* measured strip unit + label */
}

@media (max-width: 420px) {
  .ad-slot[data-slot="strip"] { min-height: 132px; }
}