/* ============================================================
   Feeling Beltzville'd — site styles
   Palette mirrors the game (src/render.h). Retro pixel aesthetic.
   ============================================================ */

:root {
  /* Game palette (src/render.h) */
  --water-dark: #082555;
  --water-mid:  #06405a;
  --algae:      #2a5a1a;
  --algae-br:   #3a7a1a;
  --bact1:      #4a8a2a;
  --bact2:      #6aaa3a;
  --brown-dark: #2a1a0a;
  --yellow:     #eaaa00;
  --yellow-dk:  #aa7a00;
  --red:        #ca1a0a;
  --red-dark:   #8a0a00;
  --white:      #eaeaea;
  --grey:       #8a8a8a;
  --black:      #0a0a0a;

  --bg:        #04132e;            /* a touch darker than water-dark */
  --panel:     #082a52;
  --panel-alt: #0a1f3f;
  --ink:       var(--white);

  --pixel: 'Press Start 2P', system-ui, sans-serif;
  --body:  'VT323', 'Courier New', monospace;

  --maxw: 1040px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--water-mid) 0%, transparent 60%),
    linear-gradient(180deg, var(--water-dark) 0%, var(--bg) 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body);
  font-size: 22px;
  line-height: 1.5;
  -webkit-font-smoothing: none;
}

img, .player-sprite, .floater, .hazard__icon, .footer__tv, .snack__art {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

a { color: var(--yellow); text-decoration: none; }
a:hover { color: #fff; text-decoration: underline; }

.legal {
  width: min(900px, calc(100% - 2rem));
  margin: 3rem auto 5rem;
  padding: 2rem;
  background: var(--panel);
  border: 3px solid var(--water-mid);
  box-shadow: 8px 8px 0 var(--black);
}
.legal h1, .legal h2 {
  color: var(--yellow);
  font-family: var(--pixel);
  line-height: 1.5;
}
.legal h1 { font-size: 1.25rem; }
.legal h2 { margin-top: 2rem; font-size: .8rem; }
.legal__updated { color: var(--grey); }

/* ===== Genesis-cartridge homage strip ===== */
.cartridge-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 1rem;
  background: var(--black);
  border-bottom: 3px solid var(--yellow-dk);
  font-family: var(--pixel);
  font-size: 0.42rem;
  letter-spacing: 1px;
  color: var(--grey);
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
}
.cartridge-bar__mid { color: var(--yellow); }

/* ===== Nav ===== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.2rem;
  background: rgba(4, 19, 46, 0.92);
  border-bottom: 3px solid var(--water-mid);
  backdrop-filter: blur(4px);
}
.nav__brand {
  font-family: var(--pixel);
  font-size: 0.7rem;
  color: var(--yellow);
  letter-spacing: 0.5px;
}
.nav__brand:hover { color: #fff; text-decoration: none; }
.nav__links { display: flex; align-items: center; gap: 1.2rem; }
.nav__links a { color: var(--white); font-size: 1.1rem; }
.nav__links a:hover { color: var(--yellow); text-decoration: none; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  font-family: var(--pixel);
  font-size: 0.7rem;
  line-height: 1.4;
  padding: 0.8em 1.1em;
  border: 3px solid var(--black);
  box-shadow: 4px 4px 0 var(--black);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
  cursor: pointer;
}
.btn:hover { text-decoration: none; transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--black); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--black); }
.btn--small { font-size: 0.6rem; padding: 0.7em 0.9em; background: var(--water-mid); color: #fff; box-shadow: 3px 3px 0 var(--black); }
.btn--primary { background: var(--yellow); color: var(--brown-dark); }
.btn--ghost { background: transparent; color: var(--white); border-color: var(--white); box-shadow: 4px 4px 0 var(--water-mid); }

/* ===== Hero ===== */
.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.5rem, 8vw, 6rem) 1.2rem 1.5rem;
}
.hero__inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.hero__copy { flex: 1 1 360px; }
.kicker {
  font-family: var(--pixel);
  font-size: 0.6rem;
  color: var(--bact2);
  letter-spacing: 1px;
  margin: 0 0 1rem;
}
.hero__title {
  font-family: var(--pixel);
  font-size: clamp(1.6rem, 6vw, 3rem);
  line-height: 1.2;
  color: var(--yellow);
  text-shadow: 4px 4px 0 var(--red-dark), 8px 8px 0 rgba(0,0,0,0.4);
  margin: 0 0 1.2rem;
}
.hero__title sup { font-size: 0.35em; }
.hero__tagline { font-size: 1.4rem; color: var(--white); margin: 0 0 0.8rem; max-width: 30ch; }
.hero__subline { font-size: 1.2rem; color: var(--bact2); margin: 0 0 1.4rem; max-width: 34ch; }

/* Mini "at a glance" pixel chips */
.hero__stats {
  list-style: none; margin: 0 0 1.8rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem;
}
.hero__stats li {
  font-family: var(--pixel);
  font-size: 0.55rem;
  line-height: 1.4;
  color: var(--white);
  background: var(--panel);
  border: 2px solid var(--water-mid);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.35);
  padding: 0.55em 0.7em;
}
.hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero__cta--center { justify-content: center; margin: 1.6rem 0; }

.hero__art { flex: 0 1 280px; display: flex; justify-content: center; }
/* BeltzvillePlayer.webp = 512x256 sheet, 8 frames @128px. Animate the 4-frame
   "Floating" idle loop (frames 0-3; see assets/spites/BeltzvillePlayer.json). */
.player-sprite {
  width: 256px; height: 256px;
  background: url('assets/sprites/BeltzvillePlayer.webp') 0 0 / 1024px 512px no-repeat;
  animation: bob 2.4s ease-in-out infinite, paddle 1s steps(4) infinite;
  filter: drop-shadow(0 12px 0 rgba(0,0,0,0.25));
}
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
/* Percentage (not px) offsets so this survives the .player-sprite background-size
   swap at the mobile breakpoint below — background is always exactly 4 frames wide.
   "to" is 133.3333% (= 4/3 * 100%), not 100%: with steps(4) sampling the range at
   quarter-points (0, 1/4, 2/4, 3/4), the "to" value has to be one frame-width PAST
   the last real frame so those quarter-points land exactly on the 4 real frames
   (0%, 33.33%, 66.67%, 100% of the sheet) instead of undershooting each by 25%. */
@keyframes paddle { from { background-position-x: 0%; } to { background-position-x: 133.3333%; } }

/* Floating hazard particles */
.hero__floaters { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.floater {
  position: absolute;
  bottom: -40px;
  left: var(--x);
  width: 32px; height: 32px;
  opacity: 0.7;
  animation: rise 9s linear infinite;
  animation-delay: var(--d);
}
.floater--bact  { background: url('assets/sprites/Bacteria.webp') center / contain no-repeat; }
.floater--algae { background: url('assets/sprites/AlgaeBlob.webp') center / contain no-repeat; }
@keyframes rise {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.7; }
  90%  { opacity: 0.7; }
  100% { transform: translateY(-110vh) rotate(220deg); opacity: 0; }
}

/* ===== Gameplay window (arcade cabinet placeholder) ===== */
.gameplay { padding: 1rem 1.2rem 2.5rem; }
.cabinet {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 18px;
  background: linear-gradient(180deg, #14365f, var(--panel-alt));
  border: 4px solid var(--black);
  border-radius: 14px;
  box-shadow: 8px 8px 0 rgba(0,0,0,0.45), inset 0 0 0 3px var(--water-mid);
}
.cabinet__bolt {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #cfd6df, #5a6470 70%, #2a2f38);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.5);
}
.cabinet__bolt--tl { top: 8px; left: 8px; }
.cabinet__bolt--tr { top: 8px; right: 8px; }
.cabinet__bolt--bl { bottom: 8px; left: 8px; }
.cabinet__bolt--br { bottom: 8px; right: 8px; }

.screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 3px solid var(--black);
  border-radius: 8px;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--water-mid) 0%, transparent 60%),
    linear-gradient(180deg, var(--water-dark), #03142c);
}
.screen__inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1rem; z-index: 1;
}
/* Player from the 512x256 sheet, paddling + bobbing in the "screen" (see .player-sprite). */
.screen__player {
  width: 128px; height: 128px;
  background: url('assets/sprites/BeltzvillePlayer.webp') 0 0 / 512px 256px no-repeat;
  animation: bob 2.4s ease-in-out infinite, paddle 1s steps(4) infinite;
}
.screen__label {
  font-family: var(--pixel); font-size: 0.8rem; line-height: 1.6;
  color: var(--yellow); text-align: center; margin: 0;
  text-shadow: 2px 2px 0 var(--black);
}
.screen__scanlines {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.5;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0.35) 0 1px, transparent 1px 3px);
}
/* Click-to-load facade (button) shown until the visitor opts to watch — defers the
   ~924 KB WASM download. Reuses .screen__inner layout + .screen__player/.screen__label. */
.screen__poster {
  border: 0; background: transparent; cursor: pointer; width: 100%; z-index: 1;
}
.screen__poster:hover .screen__label { color: #fff; }
.screen__poster:hover .screen__player { transform: translateY(-6px); }

/* The embedded WebAssembly game (web/game/). Fills the 16:9 cabinet screen; the
   pointer-events:none scanlines above sit on top without blocking input. */
.screen__game {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; display: block; z-index: 1; background: var(--water-dark);
}
.gameplay__caption { text-align: center; color: var(--grey); font-size: 1.1rem; margin: 1rem 0 0; }

/* ===== ASCII flourishes ===== */
.ascii-rule {
  font-family: var(--pixel);
  font-size: 0.6rem;
  color: var(--water-mid);
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  margin: 1.5rem 0;
}

/* ===== Sections ===== */
.section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) 1.2rem;
}
.section--alt {
  max-width: none;
  background: linear-gradient(180deg, var(--panel-alt), transparent);
  border-top: 3px solid var(--water-mid);
  border-bottom: 3px solid var(--water-mid);
}
.section--alt > * { max-width: var(--maxw); margin-left: auto; margin-right: auto; }
.section__title {
  font-family: var(--pixel);
  font-size: clamp(1rem, 3.5vw, 1.5rem);
  color: var(--white);
  margin: 0 0 1.5rem;
}
/* Tiny pixel-sprite icon that can stand in for an emoji in a heading/chip. */
.sprite-icon {
  width: 1.4em; height: 1.4em;
  vertical-align: -0.3em;
  margin-right: 0.15em;
  object-fit: cover;
  object-position: top left;   /* show frame 0 of any sprite sheet */
  image-rendering: pixelated;
}
.section__sub { color: var(--grey); font-size: 1.2rem; margin: -0.6rem 0 1.8rem; }
.prose { max-width: 60ch; font-size: 1.3rem; }
.prose p { margin: 0 0 1.1rem; }
.prose strong { color: var(--yellow); }
.prose em { color: var(--bact2); font-style: normal; }

/* Manual page-number pip (bottom-right flourish, à la a printed manual). */
.pageno {
  font-family: var(--pixel);
  font-size: 0.5rem;
  color: var(--grey);
  text-align: right;
  margin: 2.2rem 0 0;
  opacity: 0.7;
}
/* Boxed "Important:" style callout. */
.callout {
  border: 3px solid var(--water-mid);
  background: var(--panel);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.35);
  padding: 1rem 1.2rem;
  font-size: 1.2rem;
  color: var(--white);
  margin: 1.6rem 0 0;
}
.callout strong { font-family: var(--pixel); font-size: 0.7rem; color: var(--yellow); }
.callout em { color: var(--bact2); font-style: normal; }
.callout--warn { border-color: var(--red); box-shadow: 5px 5px 0 rgba(138,10,0,0.4); }
.callout--warn strong { color: var(--red); }

/* ===== The Story (prose + food-truck crash illustration) ===== */
.story { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.6rem 2.4rem; }
.story .prose { flex: 1 1 340px; max-width: 60ch; }
/* Framed "crash scene" panel, matching the item-monitor look. */
.crash-scene {
  flex: 0 0 auto;
  margin: 0;
  background: linear-gradient(180deg, var(--water-dark), #03142c);
  border: 3px solid var(--black);
  border-radius: 6px;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.4), inset 0 0 0 2px var(--water-mid);
  padding: 12px 12px 0;
}
/* Crop the 810x270 title-art layer to its left content region (tree + overturned
   truck + dock), pixel-perfect at natural scale — same background-crop trick the
   sprite-frame icons use. */
.crash-scene__pic {
  width: 202px; height: 247px;
  background: url('assets/FoodTruck.webp') no-repeat left top;
  background-size: 810px 270px;
  image-rendering: pixelated;
}
.crash-scene__cap {
  font-family: var(--pixel);
  font-size: 0.5rem;
  color: var(--grey);
  text-align: center;
  padding: 0.8rem 0 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ===== Take Control! (controls diagram) ===== */
.controls-diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.6rem 2rem;
}
/* A stylized 16:9 "screen" split into the left steer field + right USE band,
   mirroring the game's real mobile layout (layout.h). */
.cd-screen {
  position: relative;
  flex: 1 1 340px;
  max-width: 460px;
  aspect-ratio: 16 / 9;
  display: flex;
  border: 4px solid var(--black);
  border-radius: 8px;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.4), inset 0 0 0 3px var(--water-mid);
  overflow: hidden;
  background: linear-gradient(180deg, var(--water-dark), #03142c);
}
.cd-field { flex: 3 1 0; display: flex; flex-direction: column; }
.cd-zone {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pixel);
  font-size: 0.7rem;
  color: var(--yellow);
  text-shadow: 2px 2px 0 var(--black);
}
.cd-zone--up   { background: rgba(106,170,58,0.14); border-bottom: 2px dashed var(--water-mid); }
.cd-zone--down { background: rgba(106,170,58,0.06); }
.cd-band {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--yellow);
  color: var(--brown-dark);
  border-left: 3px solid var(--black);
  font-family: var(--pixel);
  font-size: 0.7rem;
  line-height: 1.6;
}
.cd-screen__scan {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0.4;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,0.35) 0 1px, transparent 1px 3px);
}
.cd-legend {
  flex: 1 1 300px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cd-legend li {
  font-size: 1.2rem;
  color: var(--white);
  padding: 0.7rem 0;
  border-bottom: 2px dotted var(--water-mid);
}
.cd-legend li:last-child { border-bottom: none; }
.cd-legend__key {
  display: block;
  font-family: var(--pixel);
  font-size: 0.6rem;
  color: var(--bact2);
  margin-bottom: 0.35rem;
}
.controls__note {
  margin: 1.8rem 0 0;
  font-size: 1.2rem;
  color: var(--grey);
  max-width: 60ch;
}

/* ===== Items for Survival (food power-ups, manual item boxes) ===== */
.items { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.itembox {
  display: flex;
  align-items: center;
  gap: 1.3rem;
  background: var(--panel);
  border: 3px solid var(--water-mid);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.35);
  padding: 1.1rem 1.3rem;
}
/* Dark "video monitor" that frames the item sprite (Sonic item-box look). */
.itembox__monitor {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 104px; height: 104px;
  background: linear-gradient(180deg, var(--water-dark), #03142c);
  border: 3px solid var(--black);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--water-mid);
}
.itembox__body { flex: 1 1 auto; }
.itembox__name {
  font-family: var(--pixel);
  font-size: 0.8rem;
  color: var(--yellow);
  line-height: 1.4;
  margin: 0 0 0.6rem;
}
.itembox__desc { font-size: 1.2rem; color: var(--white); margin: 0; }
.itembox__desc strong { color: var(--bact2); }

.snack__art {
  display: block;
  width: 72px; height: 72px;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(0 5px 0 rgba(0,0,0,0.3));
}
/* Single-frame 32px sprites — scale to fill the 72px tile. */
.snack__art--hotdog  { background-image: url('assets/sprites/Hotdog.webp');     background-size: contain; }
.snack__art--pretzel { background-image: url('assets/sprites/Pretzel.webp');    background-size: contain; }
.snack__art--apple   { background-image: url('assets/sprites/CandyApple.webp'); background-size: contain; }
.snack__art--pickle  { background-image: url('assets/sprites/Pickle.webp');     background-size: contain; }
/* RootBeer is a 128x32 four-frame sheet; show frame 0 (top-left), each cell scaled 32→72. */
.snack__art--rootbeer {
  background-image: url('assets/sprites/RootBeer.webp');
  background-size: 288px 72px;
  background-position: top left;
}

/* ===== Leaderboard ===== */
.boards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.board {
  background: var(--panel);
  border: 3px solid var(--yellow-dk);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.35);
  padding: 1.2rem 1.4rem;
}
/* Headline score board — full-width, sits above the two secondary boards and
   stands out with a brighter border + larger title. */
.board--hero {
  margin-bottom: 1.5rem;
  border-color: var(--yellow);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.4);
}
.board--hero .board__title { font-size: 1rem; }
/* Hall of Fame — a wider first column ("July 2026") than the rank column the other
   boards use, plus a bit of top margin since it follows the live boards' own footer. The
   most-recent-month highlight reuses .board__row--top's tint, but its rank-cell font-size
   bump is sized for a medal glyph, not a month label — cancel that here so "July 2026"
   doesn't wrap. */
.board--archive { margin-top: 1.5rem; }
.board--archive .board__head,
.board--archive .board__list li { grid-template-columns: 6.5rem 1fr auto; }
.board--archive .board__row--top .board__rank { font-size: 0.7rem; }
.board__title { font-family: var(--pixel); font-size: 0.8rem; color: var(--yellow); margin: 0 0 1rem; line-height: 1.4; }
/* Column header row — same 3-col grid as the list rows below. */
.board__head {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  gap: 0.6rem;
  padding: 0 0 0.5rem;
  border-bottom: 3px solid var(--yellow-dk);
  font-family: var(--pixel);
  font-size: 0.5rem;
  letter-spacing: 0.5px;
  color: var(--grey);
  text-transform: uppercase;
}
.board__head span:last-child { text-align: right; }
.board__list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.board__list li {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 2px dotted var(--water-mid);
  font-size: 1.3rem;
}
.board__list li:last-child { border-bottom: none; }
.board__rank { font-family: var(--pixel); font-size: 0.7rem; color: var(--grey); }
/* Top-3 rows: medal in the rank cell, subtle highlight band. */
.board__row--top { background: linear-gradient(90deg, rgba(234,170,0,0.08), transparent); }
.board__row--top .board__rank { font-size: 1.2rem; }
.board__name { color: var(--white); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board__row--top .board__name { color: var(--yellow); }
.board__val { font-family: var(--pixel); font-size: 0.7rem; color: var(--bact2); text-align: right; }
.board__loading, .board__empty, .board__error { color: var(--grey); border-bottom: none !important; display: block !important; }
.board__error { color: var(--red); }
.board__refreshed {
  text-align: center; color: var(--grey); font-size: 1rem;
  margin-top: 1.2rem; min-height: 1.2em;
}
.board__live { color: var(--bact2); }

/* ===== Hazards on the Lake (named gallery, à la "Robotnik's Badniks") ===== */
.hazards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.hazard {
  margin: 0;
  background: var(--panel);
  border: 3px solid var(--water-mid);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.35);
}
.hazard__shot {
  height: 160px;
  background-color: var(--water-dark);
  border-bottom: 3px solid var(--water-mid);
  image-rendering: pixelated;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Fixed 112px box so multi-frame sheets clip to frame 0 no matter how wide the card's
   grid column is — a fluid shot let neighboring frames bleed into view. */
.hazard__icon { width: 112px; height: 112px; background-repeat: no-repeat; }
.media__icon--bacteria { background-image: url('assets/sprites/Bacteria.webp');   background-size: 112px 112px; }
.media__icon--algae    { background-image: url('assets/sprites/AlgaeBlob.webp'); background-size: 112px 112px; }
/* Goose/Turtle are 96x32 sheets (3 frames of 32x32); show frame 0 at the same 112px
   visual size as the single-frame icons above (32 * 3.5 = 112). */
.media__icon--goose    { background-image: url('assets/sprites/Goose.webp');  background-size: 336px 112px; background-position: left center; }
.media__icon--diaper   { background-image: url('assets/sprites/Diaper.webp'); background-size: 112px 112px; }
.media__icon--turtle   { background-image: url('assets/sprites/Turtle.webp'); background-size: 336px 112px; background-position: left center; }
.hazard figcaption { display: block; padding: 0.9rem 1rem 1rem; }
.hazard__name {
  display: block;
  font-family: var(--pixel);
  font-size: 0.65rem;
  color: var(--yellow);
  line-height: 1.4;
  margin-bottom: 0.5rem;
}
.hazard__note { display: block; font-size: 1.1rem; color: var(--grey); }

/* ===== Scoring ===== */
.scoring { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.scoring li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.9rem;
  font-size: 1.25rem;
  color: var(--white);
  padding: 0.7rem 1rem;
  background: var(--panel);
  border-left: 4px solid var(--yellow-dk);
}
.scoring__key {
  font-family: var(--pixel);
  font-size: 0.6rem;
  color: var(--yellow);
  flex: 0 0 auto;
}
.scoring__foot { font-size: 1.2rem; color: var(--grey); margin: 1.4rem 0 0; }
.scoring__foot strong { color: var(--bact2); }

/* ===== Game Over (sample illness card) ===== */
.gameover {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.8rem 2rem;
}
.gameover__copy { flex: 1 1 300px; }
.gameover__copy p { font-size: 1.3rem; color: var(--white); margin: 0 0 1rem; }
.gameover__signoff { font-family: var(--pixel); font-size: 0.75rem; color: var(--yellow) !important; }
.illness-card {
  flex: 0 1 340px;
  text-align: center;
  background: linear-gradient(180deg, var(--water-dark), #03142c);
  border: 3px solid var(--red-dark);
  box-shadow: 6px 6px 0 rgba(0,0,0,0.45), inset 0 0 0 2px var(--water-mid);
  padding: 1.6rem 1.3rem;
}
.illness-card__head { font-family: var(--pixel); font-size: 0.75rem; color: var(--yellow); line-height: 1.5; margin: 0 0 1.2rem; }
.illness-card__label { font-family: var(--pixel); font-size: 0.5rem; color: var(--grey); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 0.5rem; }
.illness-card__disease { font-family: var(--pixel); font-size: 0.7rem; color: var(--red); line-height: 1.5; margin: 0 0 1rem; }
.illness-card__flavor { font-size: 1.2rem; color: var(--white); margin: 0 0 1.2rem; }
.illness-card__foot { font-family: var(--pixel); font-size: 0.65rem; color: var(--bact2); margin: 0; }

/* Keep the play-section cabinet at its intended width inside a --alt band (whose
   ".section--alt > *" rule would otherwise widen it to the section max-width). */
.gameplay .cabinet, .gameplay .game-controls { max-width: 860px; }

/* ===== CTA / share ===== */
.section--cta { text-align: center; }
.hashtags { font-family: var(--pixel); font-size: 0.7rem; color: var(--bact2); line-height: 1.8; }

/* ===== Game control strip (under the cabinet, revealed once the game loads) ===== */
.game-controls {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0.6rem 0.9rem; max-width: 860px; margin: 0.9rem auto 0;
  font-family: var(--pixel);
}
.game-controls[hidden] { display: none; }
.game-controls__label {
  font-size: 0.55rem; color: var(--grey); text-transform: uppercase; letter-spacing: 0.5px;
}
.game-controls__seg { display: inline-flex; border: 2px solid var(--water-mid); border-radius: 4px; overflow: hidden; }
.gc-btn {
  font-family: var(--pixel); font-size: 0.6rem; color: var(--white);
  background: var(--bg); border: 0; padding: 0.6em 0.9em; cursor: pointer;
  letter-spacing: 0.5px;
}
.game-controls__seg .gc-btn + .gc-btn { border-left: 2px solid var(--water-mid); }
.gc-btn:hover { color: var(--yellow); }
.gc-btn.is-active { background: var(--yellow); color: var(--black); }
.gc-btn--fs { border: 2px solid var(--water-mid); border-radius: 4px; }
.gc-btn--fs:hover { border-color: var(--yellow); }

/* ===== Footer ===== */
.footer {
  text-align: center;
  padding: 2.5rem 1.2rem 3rem;
  border-top: 3px solid var(--water-mid);
  background: var(--bg);
  font-size: 1.15rem;
}
.footer__tv {
  width: 64px; height: 64px; margin: 0 auto 1rem;
  background: url('assets/sprites/PortableTV.webp') center / contain no-repeat;
}
.footer__fine { color: var(--grey); font-size: 1rem; max-width: 50ch; margin: 0.8rem auto 0; }

/* ===== Responsive ===== */
@media (max-width: 640px) {
  body { font-size: 20px; }
  /* Keep the nav on ONE compact row (don't stack) to save vertical space. */
  .nav { gap: 0.5rem; padding: 0.55rem 0.7rem; }
  .nav__brand { font-size: 0.5rem; flex: 0 1 auto; }
  .nav__links { gap: 0.8rem; }
  .nav__links a { font-size: 1rem; }
  .nav__links .btn--small { font-size: 0.5rem; padding: 0.6em 0.7em; }
  .cartridge-bar { font-size: 0.36rem; padding: 0.35rem 0.6rem; }
  .cartridge-bar__mid { display: none; }
  .hero__art { order: -1; }
  .player-sprite { width: 192px; height: 192px; background-size: 768px 384px; }
  .game-controls { gap: 0.5rem 0.7rem; }
  .gc-btn { font-size: 0.55rem; padding: 0.6em 0.7em; }
  .hazards { grid-template-columns: 1fr; }
  /* Stack the item/game-over boxes so the sprite sits above the text. */
  .itembox { flex-direction: column; text-align: center; }
  .controls-diagram { justify-content: center; }
  .crash-scene { margin-left: auto; margin-right: auto; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .hazards { grid-template-columns: repeat(2, 1fr); }
}
/* Very narrow: drop the brand wordmark so the links fit one line. */
@media (max-width: 380px) {
  .nav__brand { display: none; }
  .nav { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .player-sprite, .floater, .screen__player { animation: none; }
  html { scroll-behavior: auto; }
}