/* ────────────────────────────────────────────────────────────────────────
   Socceroos Trivia · "Sticker Album" theme  (shared base for all pages)

   The look: a Panini-style collectible album. Flat printed colour, a green
   album page with halftone dots, white die-cut sticker sheets, foil-gold
   accents, chunky press-down buttons, condensed poster type. No glassmorphism,
   no dark mesh-gradient, no blur. ONE light theme, locked across the site.

   Palette lock : gold #FFC629 is the only accent. Green = the album field.
   Shape  lock  : sheets 24px · stickers/cards 16-18px · buttons 12-14px · pills full.
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --field: #0a7a3a;     /* grass-green album page */
  --field-2: #0c8a42;   /* lighter pool, top-left */
  --paper: #fdfdf8;     /* sticker white (warm, not beige) */
  --edge: #ffffff;      /* die-cut sticker border */
  --ink: #15251b;       /* near-black, green-tinted */
  --ink-soft: #5b6b61;  /* muted body text */
  --gold: #FFC629;      /* foil accent */
  --gold-d: #d99e0a;    /* foil shadow / press */
  --green: #00843D;     /* brand green fill */
  --green-d: #03642f;   /* green press shadow */
  --ok: #1f9d49;        /* correct */
  --no: #e0463f;        /* wrong */
  --line: rgba(21, 37, 27, 0.12);
  --sheet-shadow: 0 18px 40px rgba(4, 40, 20, 0.30);
  --foil: linear-gradient(135deg, #ffe27a, var(--gold) 46%, var(--gold-d));
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* Kill the default blue/grey tap rectangle on iPad Safari; focus rings below
   are gold and follow each element's border-radius. */
* { -webkit-tap-highlight-color: transparent; }
:focus { outline: none; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  -webkit-text-size-adjust: 100%;
  background:
    radial-gradient(120% 90% at 28% 12%, var(--field-2), var(--field) 62%),
    var(--field);
}

/* Halftone print dots — fixed, behind content, never on a scrolling layer. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.11) 1.3px, transparent 1.6px);
  background-size: 13px 13px;
}
body > * { position: relative; z-index: 1; }

/* Condensed poster display type for all headings. */
h1, h2, h3, .display {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 0.95;
}

/* The main white sticker sheet that holds a screen. */
.sticker-sheet {
  background: var(--paper);
  border: 5px solid var(--edge);
  border-radius: 24px;
  box-shadow: var(--sheet-shadow);
}

/* Foil-gold helpers. */
.foil { background: var(--foil); color: var(--ink); }

/* ── Lucide icon buttons ── */
/* Align inline SVG icons with button text. */
.btn, .next-btn, .start-btn, .btn-restart,
.btn-play-again, .btn-review, .btn-back-results {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn .ic, .next-btn .ic, .btn-back-results .ic { width: 18px; height: 18px; flex-shrink: 0; }

/* Persistent Home button (positioned inside .vbrg-fixed-nav on game screens). */
.home-btn {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--ink); box-shadow: 0 4px 0 var(--ink);
  text-decoration: none;
  transition: transform 0.12s, box-shadow 0.12s, background 0.15s;
}
.home-btn:hover { background: #fff7e0; }
.home-btn:active { transform: translateY(4px); box-shadow: 0 0 0 var(--ink); }
.home-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.home-btn svg { width: 24px; height: 24px; }
@media (max-width: 600px) { .home-btn { width: 42px; height: 42px; } }
@media (prefers-reduced-motion: reduce) { .home-btn:active { transform: none; } }

/* ── SPA shell: in landscape (iPad), the PAGE never scrolls. Each screen's
   sheet is capped to the viewport; only a sheet itself scrolls internally if a
   screen is unusually dense (e.g. the answer-review list). ── */
@media (orientation: landscape) and (min-width: 820px) {
  html { height: 100%; }
  body { height: 100dvh; min-height: 0; overflow: hidden; padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
}