:root {
  /* Brand. Swap these four and the whole game follows: every tint below is
     derived from them, so nothing is left behind at the old colour. */
  --accent: #4ade80;       /* good, earned, primary action */
  --accent2: #22d3ee;      /* intel: labels, tags, anything revealed to you */
  --gold: #fbbf24;         /* rare, jackpot, premium */
  --danger: #f87171;       /* bad, busted, refused */

  /* Elevation. Each step is one level closer to the player:
     bg (page) > surface (panels) > surface-2 (nested containers, cards)
     > surface-3 (the tiles you actually click). Lighter means nearer. */
  --bg: #0b0e14;
  --surface: #131826;
  --surface-2: #1a2136;
  --surface-3: #232c45;

  --text: #e8ecf4;
  --muted: #8a93a8;

  /* Two lines, not five. --line edges a surface, --line-soft divides within one. */
  --line: #2a3450;
  --line-soft: #222b42;

  /* Derived tints. */
  --accent-ink: color-mix(in srgb, var(--accent) 20%, #000);        /* text on an accent fill */
  --accent-dim: color-mix(in srgb, var(--accent) 22%, var(--bg));   /* filled "earned" state */
  --accent-deep: color-mix(in srgb, var(--accent) 12%, var(--bg));  /* gradient tail */
  --accent-soft: color-mix(in srgb, var(--accent) 35%, var(--text));/* body copy on an accent fill */
  --accent2-dim: color-mix(in srgb, var(--accent2) 18%, var(--bg)); /* filled "revealed" state */
  --danger-dim: color-mix(in srgb, var(--danger) 22%, var(--bg));   /* filled "missed" state */
  --slice-neutral: color-mix(in srgb, var(--muted) 40%, var(--surface-2)); /* wheel: nothing happened */
  --chip-ink: #fff;        /* the number on a roulette chip, over red/black/green */

  /* Newsprint. A deliberate light island; its accents still track the brand. */
  --paper: #f4f0e6;
  --ink: #191919;
  --ink-soft: #4a4a4a;
  --paper-good: color-mix(in srgb, var(--accent) 12%, #fff);
  --paper-good-line: color-mix(in srgb, var(--accent) 70%, #000);
  --paper-gold: color-mix(in srgb, var(--gold) 15%, #fff);
  --paper-bad: color-mix(in srgb, var(--danger) 15%, #fff);
  --paper-bad-line: color-mix(in srgb, var(--danger) 65%, #000);

  /* Three corner sizes so a theme can set the whole corner language at once:
     panels, tiles, and hairline chrome like bars and chips. */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-xs: 4px;
  --font: -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
}

/*
 * Zerf brand. Set CONFIG.brand = "zerf" in data.js, or add ?brand=zerf to the
 * URL. Black, cream and magenta, taken from the zerf.tech landing site.
 * The brand carries one accent, so gold and danger are functional additions:
 * a game still needs four signals you can tell apart at a glance.
 */
:root[data-brand="zerf"] {
  --accent: #ff00c8;
  --accent2: #c4b8a8;
  --gold: #f0c060;
  --danger: #ff5470;

  --bg: #000000;
  --surface: #0b0b0b;
  --surface-2: #161616;
  --surface-3: #1f1f1f;

  --text: #f7f7f1;
  --muted: #a8a8a2;

  --line: #2a2a2a;
  --line-soft: #1f1f1f;

  --paper: #fafaf6;
  --ink: #0a0a0a;
  --ink-soft: #5d5d58;

  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

.topbar {
  padding: 14px 24px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
}
.logo { font-weight: 900; letter-spacing: 2px; }
.logo .by { font-weight: 400; font-size: .7rem; color: var(--muted); margin-left: 10px; letter-spacing: 0; }

/* The look picker. Small, in the bar, on every screen, never in the way. */
.theme-picker { margin-left: auto; display: flex; gap: 4px; }
.theme-btn {
  background: transparent; border: 1px solid var(--line-soft); color: var(--muted);
  border-radius: 999px; padding: 5px 11px; cursor: pointer;
  font-family: var(--font); font-size: .6rem; font-weight: 800; letter-spacing: 1.5px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.theme-btn:hover { color: var(--text); border-color: var(--line); }
.theme-btn.on { color: var(--accent-ink); background: var(--accent); border-color: var(--accent); }
@media (max-width: 560px) {
  .theme-btn { padding: 5px 8px; font-size: .55rem; letter-spacing: 1px; }
}

.screen { flex: 1; width: 100%; max-width: 1080px; margin: 0 auto; padding: 32px 20px 60px; }
.hidden { display: none !important; }

.kicker { color: var(--accent); font-weight: 700; letter-spacing: 3px; font-size: .8rem; }
h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); font-weight: 900; font-style: italic; letter-spacing: -1px; margin: 6px 0 10px; }
.tagline { color: var(--muted); max-width: 560px; margin-bottom: 28px; }
.hint { color: var(--muted); font-size: .8rem; margin-top: 8px; }

.field { margin-bottom: 26px; }
.field > label { display: block; font-size: .75rem; letter-spacing: 2px; color: var(--muted); margin-bottom: 10px; }

.track-picker { display: flex; gap: 14px; flex-wrap: wrap; }
.track-card {
  flex: 1 1 220px;
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: var(--radius);
  color: var(--text);
  padding: 18px;
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
}
.track-card small { color: var(--muted); }
.track-card:hover { border-color: var(--line); background: var(--surface-2); }
.track-card.selected, .track-card.selected:hover { border-color: var(--accent); background: var(--surface-2); }
.track-emoji { font-size: 1.6rem; }

/* Three doors, always on one line. */
.start-companies { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.company-card {
  background: var(--surface);
  border: 2px solid transparent;
  border-radius: var(--radius);
  color: var(--text);
  padding: 14px;
  text-align: left;
  cursor: pointer;
}
.company-card:hover { border-color: var(--line); background: var(--surface-2); }
.company-card.selected, .company-card.selected:hover { border-color: var(--accent); background: var(--surface-2); }
.company-card .tier { font-size: .7rem; letter-spacing: 1px; color: var(--accent2); }
.company-card .sal { color: var(--muted); font-size: .8rem; }

input[type="text"], input[type="email"] {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 1rem;
}

.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  border-radius: var(--radius);
  font-weight: 800;
  letter-spacing: 1px;
  font-size: 1rem;
  padding: 16px 28px;
  cursor: pointer;
  display: inline-block;
  text-align: center;
  text-decoration: none; /* the report CTA is an <a>, and it is still a button */
}
.btn-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 85%, #fff); }
.btn-primary:disabled { opacity: .35; cursor: not-allowed; }
.btn-ghost {
  background: transparent; border: 1px solid currentColor; color: var(--muted);
  border-radius: var(--radius); padding: 12px 20px; cursor: pointer;
}
.btn-ghost:hover { color: var(--text); }

/* One visible focus ring for the whole game, on every focusable thing. */
:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* GAME LAYOUT */
#screen-game { display: flex; gap: 24px; align-items: flex-start; }
.statbar {
  width: 260px; flex-shrink: 0;
  background: var(--surface);
  border-radius: var(--radius);
  padding: 18px;
  position: sticky; top: 20px;
}
.statbar h2 { font-size: 1rem; font-weight: 900; }
.statbar .sub { color: var(--muted); font-size: .78rem; margin-bottom: 12px; }
.bigstats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.bigstat { background: var(--surface-2); border-radius: var(--radius-sm); padding: 8px; text-align: center; }
.bigstat b { display: block; font-size: 1.1rem; }
.bigstat span { font-size: .62rem; letter-spacing: 1px; color: var(--muted); }
.skill { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; padding: 4px 0; border-bottom: 1px dashed var(--line-soft); }
.skill b.up { color: var(--accent); }
.skill .boosted { font-style: normal; color: var(--gold); font-size: .72rem; font-weight: 700; }
/* The number the season is graded on. */
.skill.overall { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); border-bottom: none; font-weight: 700; }
.skill.overall small { display: block; font-weight: 400; color: var(--muted); font-size: .66rem; letter-spacing: .5px; }
.skill.overall b { font-size: 1.15rem; }
.skill.overall b.good { color: var(--accent); }
.skill.overall b.bad { color: var(--danger); }
.skill.overall b i { font-style: normal; font-size: .7rem; margin-left: 4px; opacity: .8; }
/* Stamina sits beside the overall but is not part of it: it is the burnout
   clock, and it stays on screen when the card is reduced on a phone. */
.skill.stamina-line { border-bottom: none; font-weight: 700; padding-top: 2px; }
.skill.stamina-line small { display: block; font-weight: 400; font-size: .66rem; letter-spacing: .5px; color: var(--muted); }
.skill.stamina-line b { font-size: 1.15rem; }
.skill.stamina-line .good { color: var(--accent); }
.skill.stamina-line .warn { color: var(--gold); }
.skill.stamina-line .bad { color: var(--danger); }
.skill.stamina-line .boosted { font-style: normal; color: var(--gold); font-size: .72rem; }
/* Below the safe line the row does not sit quietly. */
.stamina-alarm { display: inline-block; margin-left: 4px; animation: alarm-pulse 1.6s ease-in-out infinite; }
.stamina-alarm.critical { animation-duration: .7s; }
.skill.stamina-line.at-risk { background: color-mix(in srgb, var(--gold) 7%, transparent); border-radius: var(--radius-xs); padding-left: 6px; padding-right: 6px; margin-left: -6px; margin-right: -6px; }
@keyframes alarm-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(1.18); } }

/* Burning out gets a moment before the newspaper lands on it. */
.burnout-fx {
  position: relative; height: 76px; margin-bottom: -8px;
  overflow: hidden; pointer-events: none;
  /* Collapses itself once the fire burns out, so it doesn't leave a hole
     above the newspaper for the rest of the screen's life. */
  animation: burn-collapse 2.1s ease-out forwards;
}
@keyframes burn-collapse {
  0%, 72% { height: 76px; margin-bottom: -8px; }
  100% { height: 0; margin-bottom: 0; }
}
.burnout-fx span {
  position: absolute; bottom: -14px; font-size: 1.5rem;
  animation: burn-rise 1.5s ease-out forwards;
}
.burnout-fx b {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 900; letter-spacing: 4px;
  color: var(--danger);
  text-shadow: 0 0 18px color-mix(in srgb, var(--danger) 60%, transparent);
  animation: burn-flash 1.5s ease-out forwards;
}
@keyframes burn-rise {
  0% { transform: translateY(0) scale(.7); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateY(-74px) scale(1.25); opacity: 0; }
}
@keyframes burn-flash {
  0% { opacity: 0; transform: scale(.9); }
  25% { opacity: 1; transform: scale(1); }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .burnout-fx span, .stamina-alarm { animation: none; }
  .burnout-fx { animation: none; height: 44px; }
  .burnout-fx b { animation: none; opacity: 1; }
}
.rep-meter { margin-top: 14px; }
.rep-meter .lvl { font-size: .8rem; font-weight: 700; }
.rep-bar { height: 8px; background: var(--line-soft); border-radius: var(--radius-xs); margin: 6px 0; overflow: hidden; }
.rep-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); }
.rep-meter small { color: var(--muted); font-size: .72rem; }
.rival-line { margin-top: 12px; font-size: .78rem; color: var(--muted); }
/* Who they are, so the name on the statbar is never an unexplained stranger. */
.rival-who {
  display: block;
  font-size: .58rem; font-weight: 700; letter-spacing: 1.5px;
  color: var(--accent2);
  margin-bottom: 3px;
}
/* Desktop has the room for the whole card, so there is nothing to expand. */
.statbar-toggle { display: none; }

/* Day one: the rival is introduced before the first number is ever shown. */
.rival-intro {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--danger);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin: 14px 0 18px;
}
.rival-intro strong { display: block; font-size: .95rem; margin-bottom: 4px; }
.rival-intro p { color: var(--muted); font-size: .82rem; line-height: 1.5; margin: 0 0 6px; }
.rival-intro small { display: block; color: var(--text); font-size: .74rem; }
.rival-intro small b { color: var(--danger); }

.stage { flex: 1; min-width: 0; }
.panel {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 26px;
  animation: pop .25s ease;
}
@keyframes pop { from { transform: translateY(8px); opacity: 0; } }

.panel .phase-kicker { color: var(--accent); letter-spacing: 3px; font-size: .75rem; font-weight: 700; }
.panel h2 { font-size: 1.6rem; font-weight: 900; font-style: italic; margin: 6px 0 8px; }
.panel .desc { color: var(--muted); margin-bottom: 18px; }

.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
/* upgrade hand: always three cards, always one row */
.choices.trio { grid-template-columns: repeat(3, 1fr); }
.choice-card {
  background: var(--surface-2);
  border: 2px solid transparent;
  border-radius: var(--radius);
  color: var(--text);
  padding: 16px;
  text-align: left;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 8px;
}
.choice-card:hover { border-color: var(--accent); }
.choice-card .tag { font-size: .65rem; letter-spacing: 1px; color: var(--accent2); }
.choice-card .tag.rare { color: var(--gold); }
.choice-card strong { font-size: .95rem; line-height: 1.25; }
.choice-card small { color: var(--muted); line-height: 1.35; }
.choice-card .boost { font-weight: 800; color: var(--accent); }
.choice-card .warn { color: var(--danger); font-size: .78rem; }

/* welcome pop-up */
.modal-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  width: 100%; max-width: 760px;
  animation: pop .25s ease;
}
.modal h2 { font-size: 1.5rem; font-weight: 900; font-style: italic; margin: 6px 0 8px; }
.modal .desc { color: var(--muted); margin-bottom: 18px; }

/* season boosters: savings converted into one season of advantage */
.shop { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.shop-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.shop-head span:first-child { font-size: .7rem; letter-spacing: 2px; color: var(--muted); }
.shop-head .wallet { font-size: .8rem; font-weight: 800; color: var(--accent); }
.shop-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.shop-card {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); padding: 12px; text-align: left; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .15s ease;
}
.shop-card:hover:not(:disabled) { border-color: var(--accent); }
.shop-card .tag { font-size: .62rem; letter-spacing: 1px; color: var(--gold); font-weight: 700; }
.shop-card strong { font-size: .78rem; line-height: 1.25; }
.shop-card small { color: var(--muted); font-size: .7rem; line-height: 1.3; flex: 1; }
.shop-card .price { font-size: .78rem; font-weight: 800; color: var(--accent); }
.shop-card:disabled { cursor: default; }
.shop-card:disabled:not(.owned) { opacity: .45; }
.shop-card:disabled:not(.owned) .price { color: var(--muted); }
.shop-card.owned { border-color: var(--gold); background: var(--surface-3); }
.shop-card.owned .price { color: var(--gold); }

@media (max-width: 640px) {
  .shop-row { grid-template-columns: repeat(2, 1fr); }
}

/* season market event banner */
.season-event {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; margin: 4px 0 12px;
  font-size: .85rem;
}
.season-event b { letter-spacing: 1px; }
.season-event .good { color: var(--accent); font-weight: 700; }
.season-event .bad { color: var(--danger); font-weight: 700; }

/* newspaper recap */
.newspaper {
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
  padding: 26px;
  font-family: Georgia, "Times New Roman", serif;
}
.newspaper .masthead {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 3px double var(--ink); padding-bottom: 6px; margin-bottom: 14px;
  font-family: var(--font);
}
.newspaper .masthead b { letter-spacing: 2px; }
.newspaper .masthead span { font-size: .75rem; color: var(--ink-soft); }
.newspaper h2 { font-size: 2rem; font-weight: 900; font-style: normal; text-transform: uppercase; line-height: 1.05; margin-bottom: 6px; }
.newspaper .lede { color: var(--ink-soft); font-style: italic; margin-bottom: 14px; }
.rating-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.rating-box {
  flex: 1 1 180px;
  border: 2px solid var(--ink); border-radius: 8px;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 16px;
  font-family: var(--font);
}
.rating-box span { font-size: .68rem; letter-spacing: 1px; color: var(--ink-soft); }
.rating-box b { font-size: 1.8rem; white-space: nowrap; }
/* The season overall carries the same good/bad language as the rest of the game. */
.rating-box.great { border-color: var(--paper-good-line); background: var(--paper-good); }
.rating-box.great b { color: var(--paper-good-line); }
.rating-box.poor { border-color: var(--paper-bad-line); background: var(--paper-bad); }
.rating-box.poor b { color: var(--paper-bad-line); }
.newspaper ul { list-style: none; }
.newspaper li { border-left: 3px solid var(--ink); padding: 5px 0 5px 12px; margin-bottom: 8px; font-size: .95rem; }
.newspaper li.gold { border-color: var(--gold); background: var(--paper-gold); }
.newspaper li.zerf { border-color: var(--paper-good-line); background: var(--paper-good); }
.newspaper li.bad { border-color: var(--paper-bad-line); background: var(--paper-bad); }

/* Every line in the recap shows what it actually did to you. A line with no
   chips would read as "this mattered" when it didn't, so the nothing-happened
   branches get an explicit "no change" chip instead of silence. */
.fx-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; margin-left: 8px; vertical-align: middle; }
.fx-chips i {
  font-family: var(--font); font-style: normal;
  font-size: .62rem; letter-spacing: .5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  border: 1px solid currentColor;
}
.fx-chips i.up { color: var(--paper-good-line); background: var(--paper-good); }
.fx-chips i.down { color: var(--paper-bad-line); background: var(--paper-bad); }
.fx-chips i.none { color: var(--ink-soft); background: transparent; border-style: dashed; }

.btn-continue { margin-top: 20px; width: 100%; }

/* the retainer, sold in the shop next to the boosters */
.shop-card.zerf-card {
  border-color: var(--accent);
  background: var(--accent-deep);
}
.shop-card.zerf-card:not(:disabled):hover { background: var(--accent-dim); }
.shop-card.zerf-card .tag { color: var(--accent); }
.shop-card.zerf-card.owned { border-style: solid; }
.zerf-payback {
  display: block; margin-top: 6px;
  font-size: .66rem; letter-spacing: .5px; color: var(--gold);
}
.shop-card.zerf-card:disabled .zerf-payback { color: var(--muted); }
.zerf-promo {
  display: block; margin-top: 4px;
  font-size: .66rem; letter-spacing: .5px; color: var(--accent);
}
.shop-card.zerf-card:disabled .zerf-promo { color: var(--muted); }

/* the races: four lanes and four cards */
.race-track { display: grid; gap: 6px; margin-bottom: 14px; }
.lane {
  position: relative; height: 36px; border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-3), var(--surface-2) 22%);
  border: 1px solid var(--line-soft); overflow: hidden;
  display: flex; align-items: center;
}
/* The finishing post, so the run has somewhere to end. */
.lane::after {
  content: ""; position: absolute; right: 26px; top: 0; bottom: 0; width: 3px;
  background: repeating-linear-gradient(180deg, var(--text) 0 4px, transparent 4px 8px);
  opacity: .45;
}
.lane-no {
  width: 28px; flex: 0 0 28px; text-align: center;
  font-weight: 900; font-size: .8rem; color: var(--muted);
  border-right: 1px solid var(--line-soft); align-self: stretch; line-height: 32px;
}
.lane-horse {
  position: absolute; left: 32px; font-size: 1.15rem; z-index: 2;
  transition: left 1600ms cubic-bezier(.35,.1,.4,1);
}
.lane-name {
  position: absolute; left: 40px;
  font-size: .68rem; letter-spacing: 1px; color: var(--muted);
  pointer-events: none;
}
.race-picks { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.runner {
  background: var(--surface-2); border: 2px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); padding: 10px 8px; cursor: pointer; text-align: center;
}
.runner b { display: block; font-size: 1.4rem; line-height: 1; }
.runner span { font-size: .62rem; letter-spacing: .5px; color: var(--muted); }
.runner:hover:not(:disabled) { border-color: var(--accent); }
.runner.picked { border-color: var(--accent); background: var(--accent-dim); }
.runner.scratched { opacity: .35; text-decoration: line-through; cursor: not-allowed; }
.runner.winner { border-color: var(--gold); background: var(--paper-gold); color: var(--ink); }
.runner.winner span { color: var(--ink-soft); }

/* the split: one shape, one line */
.split-svg {
  display: block; width: 100%; max-width: 320px; margin: 0 auto 10px;
  aspect-ratio: 1; cursor: crosshair; touch-action: none;
}
.split-svg.done { cursor: default; }
.split-shape { fill: var(--accent-dim); stroke: var(--accent); stroke-width: 1.2; }
.split-line { stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 4 2.5; }
#split-go { width: 100%; margin-top: 8px; }
/* The race button is full width like every other commit button in a game. */
#race-go { width: 100%; margin-top: 4px; }

/* the report: play again where you can reach it, and the card you send on */
.report-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 4px; }
.report-top .btn-ghost { padding: 8px 14px; font-size: .7rem; letter-spacing: 1px; font-weight: 700; white-space: nowrap; }

.share-card { margin: 20px 0 24px; }
.sc-face {
  background: var(--surface); border: 2px solid var(--accent);
  border-radius: var(--radius); padding: 22px 24px;
  display: grid; gap: 10px;
}
.sc-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sc-brand { font-size: .66rem; letter-spacing: 2px; font-weight: 800; color: var(--muted); }
.sc-brand i { font-style: normal; font-weight: 400; }
.sc-caption { font-size: .66rem; letter-spacing: 2px; font-weight: 800; color: var(--accent); }
.sc-name { font-size: clamp(1.3rem, 4vw, 2rem); font-weight: 900; font-style: italic; line-height: 1.05; }
.sc-score { display: flex; align-items: baseline; gap: 8px; }
.sc-score b { font-size: 2.8rem; font-weight: 900; color: var(--accent); line-height: 1; }
.sc-score span { color: var(--muted); font-size: .9rem; }
.sc-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px;
  border-top: 1px solid var(--line); padding-top: 12px;
}
.sc-stats span { display: block; font-size: .6rem; letter-spacing: 1.5px; color: var(--muted); }
.sc-stats b { font-size: 1rem; }
.sc-url { font-size: .68rem; color: var(--muted); letter-spacing: .5px; }
.sc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.sc-actions .btn-primary, .sc-actions .btn-ghost { padding: 12px 18px; font-size: .78rem; }

/* the board, before an address unlocks it */
.leaderboard.locked { text-align: left; }
.lb-gate { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 6px; }
.lb-gate input { flex: 1 1 240px; max-width: 340px; }
.lb-gate .btn-primary { padding: 14px 20px; font-size: .82rem; white-space: nowrap; }

/* the retainer quote, on its own screen rather than in the shop */
.zerf-quote {
  display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--accent);
  border-radius: var(--radius); padding: 18px; margin: 4px 0 18px;
}
.zq-price { flex: 0 0 auto; min-width: 190px; }
.zq-price span { display: block; font-size: .66rem; letter-spacing: 2px; color: var(--muted); }
.zq-price b { display: block; font-size: 2.3rem; color: var(--accent); line-height: 1.1; }
.zq-price small { color: var(--muted); font-size: .74rem; }
.zq-list { flex: 1 1 300px; list-style: none; display: grid; gap: 6px; }
.zq-list li { font-size: .86rem; color: var(--text); padding-left: 18px; position: relative; }
.zq-list li::before { content: "▸"; position: absolute; left: 0; color: var(--accent); }
.zq-list li.zq-payback { color: var(--gold); }
.zq-list li.zq-payback::before { content: "↩"; color: var(--gold); }

/* vegas: the machine at the end of the row */
.slot-machine { text-align: center; }
.slot-reels {
  display: flex; justify-content: center; gap: 10px; margin: 6px 0 14px;
}
.slot-reels.spinning .reel-cell { animation: reel-spin 140ms linear infinite; }
@keyframes reel-spin {
  0% { transform: translateY(-6px); opacity: .35; }
  50% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(6px); opacity: .35; }
}
.reel-cell {
  width: 76px; height: 92px; max-width: 26vw;
  display: flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink);
  border: 3px solid var(--line); border-radius: 10px;
  font-size: 2.4rem; line-height: 1;
}
/* The jackpot symbol is the isologotype itself, in the brand colour. */
.reel-cell.zerf {
  background: var(--accent-dim); border-color: var(--accent); color: var(--accent);
}
.zerf-mark { width: 68%; height: auto; display: block; }
.slot-pulls { display: flex; justify-content: center; gap: 7px; margin-bottom: 10px; }
.slot-pulls i {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent); display: block;
}
.slot-pulls i.spent { background: var(--line); }
@media (prefers-reduced-motion: reduce) {
  .slot-reels.spinning .reel-cell { animation: none; opacity: .5; }
}

/* zerf ad event */
.zerf-offer {
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  padding: 4px 10px;
  display: inline-block;
  color: var(--accent);
  font-size: .7rem;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

/* the other side of the blackjack table */
.hand-label {
  font-size: .62rem; letter-spacing: 2px; color: var(--muted);
  margin: 14px 0 6px; text-align: center;
}
.hand-cards.dealer { opacity: .95; }
.pcard.back {
  background: var(--surface-3); color: var(--muted);
  border-style: dashed;
}
.pcard.back b, .pcard.back i { opacity: .6; }

/* the shell game: three cups, one ball, one shuffle */
.cup-table {
  position: relative;
  height: 150px;
  margin: 8px 0 14px;
}
.cup {
  position: absolute; bottom: 0;
  width: 33.3333%; height: 100%;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  /* --cup-ms is set per round: the shuffle speed IS the difficulty. */
  transition: left var(--cup-ms, 620ms) cubic-bezier(.45, .05, .3, 1);
}
/* A cup, not a box: narrow at the top, wide at the base, with a rim you can
   see lift. The clip-path does the taper, the ::before is the rim. */
.cup-body {
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 84px; height: 96px; max-width: 90%;
  background: linear-gradient(170deg,
    color-mix(in srgb, var(--surface-3) 70%, var(--text)) 0%,
    var(--surface-3) 45%, var(--surface-2) 100%);
  border-bottom: 3px solid var(--accent2);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  transition: transform 200ms ease, filter 200ms ease;
}
.cup-body::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 6px;
  background: var(--accent2);
}
.cup-ball {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff3, transparent 55%), var(--gold);
  box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 55%, transparent);
  opacity: 0;
}
.cup.lifted .cup-body { transform: translateX(-50%) translateY(-64px); }
.cup.lifted .cup-ball { opacity: 0; }
/* Only the cup actually hiding the ball shows one when it is lifted. */
.cup.lifted.has-ball .cup-ball { opacity: 1; }
.cup.right .cup-body { border-bottom-color: var(--accent); filter: drop-shadow(0 0 10px var(--accent-dim)); }
.cup.right .cup-body::before { background: var(--accent); }
.cup.wrong .cup-body { border-bottom-color: var(--danger); }
.cup.wrong .cup-body::before { background: var(--danger); }
.cup:not(:disabled):hover .cup-body { filter: brightness(1.25); }
.cup:disabled { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .cup { transition: none; }
  .cup-body { transition: none; }
}

/* ---- minigames ---- */
.mg-card {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  margin: 16px 0;
}
.mg-readout { text-align: center; }
.mg-readout span { display: block; font-size: .68rem; letter-spacing: 2px; color: var(--muted); }
.mg-readout b { font-size: 2.4rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.mg-readout b.sm { font-size: 1.3rem; }
.mg-readout b.bad { color: var(--danger); }
.mg-readout.split { display: flex; justify-content: space-between; align-items: flex-end; text-align: left; }
.mg-readout .right { text-align: right; }
.mg-readout small { display: block; font-size: .7rem; color: var(--muted); }
.mg-meta { display: flex; justify-content: center; gap: 18px; margin-top: 16px; font-size: .8rem; color: var(--muted); }
.mg-meta b.good { color: var(--accent); }
.mg-meta b.bad { color: var(--danger); }
.mg-hint { color: var(--muted); font-size: .78rem; text-align: center; margin-top: 10px; }

/* The ? beside a game's title. One line of rules on hover, and on focus so it
   is reachable by keyboard and by tapping on a phone, where hover never fires. */
.mg-help {
  position: relative; display: inline-grid; place-items: center;
  width: 1.15em; height: 1.15em; margin-left: .45em; vertical-align: middle;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface-2); color: var(--muted);
  font-family: var(--font); font-size: .62em; font-weight: 700; font-style: normal; line-height: 1;
  cursor: help;
}
.mg-help:hover, .mg-help:focus-visible, .mg-help.open { border-color: var(--accent2); color: var(--accent2); outline: none; }
.mg-help::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: min(30rem, 46vw);
  padding: 9px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-3); color: var(--text);
  font-family: var(--font); font-size: .8rem; font-weight: 400; font-style: normal; line-height: 1.4;
  letter-spacing: 0; text-align: left; text-transform: none; white-space: normal;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
  z-index: 20;
}
.mg-help:hover::after, .mg-help:focus-visible::after, .mg-help.open::after { opacity: 1; visibility: visible; }
/* On a phone a 480px bubble centred on the badge always hangs off one edge, and
   which edge depends on how long the title is. Dropping the badge out of the
   positioning chain hands the bubble to the heading instead, so it spans the
   card exactly and cannot overflow whatever the title is. Not `fixed`: the game
   card animates in on a transform, which would make it the containing block. */
@media (max-width: 620px) {
  #stage h2 { position: relative; }
  .mg-help { position: static; }
  .mg-help::after {
    left: 0; right: 0; width: auto; max-width: none; transform: none;
  }
}
/* Zerf perks speak in the brand colour; skill-earned intel speaks in cyan. */
.mg-glow { color: var(--accent); font-size: .78rem; margin-top: 14px; min-height: 1em; }
.mg-outcome { margin: 14px 0 0; line-height: 1.45; }
/* Round result: the verdict leads, the flavour follows. A player should never
   have to work out from the prose whether they just won. */
.mg-result {
  margin: 16px 0 0; padding: 14px 16px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-2);
  animation: pop .2s ease;
}
.mg-result .mg-verdict { display: block; font-size: 1.15rem; font-weight: 900; letter-spacing: 1px; margin-bottom: 5px; }
.mg-result span { color: var(--muted); line-height: 1.45; }
.mg-result.win { border-color: var(--accent); background: var(--accent-dim); }
.mg-result.win .mg-verdict { color: var(--accent); }
.mg-result.win span { color: var(--text); }
.mg-result.mixed { border-color: var(--gold); }
.mg-result.mixed .mg-verdict { color: var(--gold); }
.mg-result.loss { border-color: var(--danger); background: var(--danger-dim); }
.mg-result.loss .mg-verdict { color: var(--danger); }
.mg-result.loss span { color: var(--text); }
.mg-reasons { list-style: none; margin: 10px 0 0; }
.mg-reasons li { color: var(--accent2); font-size: .8rem; padding: 2px 0; }

/* the ask (slider) */
.mg-slider { position: relative; height: 40px; margin-top: 22px; }
.mg-track { position: absolute; top: 50%; left: 0; right: 0; height: 8px; transform: translateY(-50%); background: var(--bg); border: 1px solid var(--line); border-radius: 4px; }
.mg-sweet { position: absolute; top: 50%; height: 8px; transform: translateY(-50%); background: var(--accent); opacity: .65; border-radius: 4px; }
.mg-glow.retry { color: var(--gold); font-weight: 700; }
.mg-target { position: absolute; top: 50%; height: 24px; width: 2px; transform: translateY(-50%); background: var(--gold); }
.mg-slider input[type="range"] { position: absolute; inset: 0; width: 100%; height: 40px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.mg-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); }
.mg-slider input[type="range"]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); border: 3px solid var(--bg); }
.mg-scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--muted); margin-top: 4px; }

/* the project lottery (wheel) */
.wheel-wrap { position: relative; width: 100%; max-width: 280px; margin: 0 auto; aspect-ratio: 1; }
.wheel-pin {
  position: absolute; top: -2px; left: 50%; transform: translateX(-50%); z-index: 2;
  width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 16px solid var(--text);
}
.wheel-wrap svg { width: 100%; height: 100%; }

/* the roulette: call a colour */
.rl-bets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.rl-bet {
  padding: 12px 8px; border-radius: var(--radius); cursor: pointer;
  border: 2px solid var(--line); background: var(--surface-3); color: var(--text);
  font-weight: 800; letter-spacing: 1px; font-size: .85rem;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  transition: border-color .15s ease, background .15s ease;
}
.rl-bet small { font-weight: 400; letter-spacing: 0; font-size: .68rem; color: var(--muted); }
.rl-bet.red { color: var(--danger); }
.rl-bet.green { color: var(--accent); }
.rl-bet.black { color: var(--text); }
.rl-bet:hover:not(:disabled) { border-color: currentColor; background: var(--surface-2); }
.rl-bet:disabled { opacity: .4; cursor: default; }
#rl-odds b.green { color: var(--accent); }
#rl-odds b.red { color: var(--danger); }
#rl-odds b.black { color: var(--text); }
.rl-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-weight: 800; font-variant-numeric: tabular-nums; color: var(--chip-ink);
  border: 2px solid var(--line);
}
.rl-chip.green { background: var(--accent); color: var(--accent-ink); }
.rl-chip.red { background: var(--danger); color: #2a0808; }
.rl-chip.black { background: #111318; color: var(--text); }
#rl-pocket { margin-top: 14px; gap: 10px; align-items: center; }

/* the commitment: a real deck, so real playing cards */
.hand-cards { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.pcard {
  width: 46px; height: 64px; border-radius: 7px;
  background: #f6f4ef; color: #16181d;
  border: 1px solid #cfcabc; box-shadow: 0 1px 0 rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  font-variant-numeric: tabular-nums;
  animation: pop .18s ease;
}
.pcard b { font-size: 1.05rem; font-weight: 800; line-height: 1; }
.pcard i { font-style: normal; font-size: .95rem; line-height: 1; }
.pcard.red { color: #b3261e; }
.mg-readout small { display: block; font-size: .66rem; color: var(--gold); letter-spacing: 1px; text-transform: uppercase; }
.mg-readout b.good { color: var(--accent); }

/* the nomination: the prize is stated before you play for it */
.prize-box {
  margin: 16px 0 4px; padding: 16px 18px;
  border: 1px solid var(--gold); border-radius: var(--radius);
  background: color-mix(in srgb, var(--gold) 8%, var(--surface-2));
}
.prize-label { display: block; font-size: .62rem; letter-spacing: 2px; color: var(--muted); margin-bottom: 6px; }
.prize-box b { display: block; font-size: 1.05rem; color: var(--gold); }
.prize-box b.prize-cash { margin-top: 2px; color: var(--accent); }
.prize-box small { display: block; margin-top: 8px; color: var(--muted); font-size: .76rem; line-height: 1.4; }

/* the offsite (memory) */
/* Columns are set inline per board so the grid is always a full rectangle. */
.mem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mem-card {
  min-height: 62px; padding: 4px;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--muted); font-size: .78rem; line-height: 1.2;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.mem-card:hover:not(:disabled) { border-color: var(--muted); }
.mem-card.open { border-color: var(--accent2); background: var(--accent2-dim); color: var(--text); }
.mem-card.matched { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.mem-card:disabled { cursor: default; }

/* the standoff (tateti) */
.tt-grid { display: grid; grid-template-columns: repeat(3, 76px); gap: 8px; justify-content: center; }
.tt-cell {
  width: 76px; height: 76px; font-size: 2rem; line-height: 1;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.tt-cell:hover:not(:disabled) { border-color: var(--muted); }
.tt-cell:disabled { cursor: default; }
.tt-cell.mine { color: var(--accent); border-color: var(--accent); }
.tt-cell.theirs { color: var(--danger); border-color: var(--danger); }
.tt-cell.win { background: var(--accent-dim); }
.tt-cell.theirs.win { background: var(--danger-dim); }

/* the darts match */
.dart-wrap { display: flex; justify-content: center; }
.dart-board {
  position: relative; width: 100%; max-width: 300px; aspect-ratio: 1;
  cursor: crosshair;
}
/* A regulation board: cream and black beds, red and green doubles and trebles,
   drawn from the real ring radii in minigames.js. */
.db { position: absolute; inset: 0; width: 100%; height: 100%; }
.db path { stroke: #0000004d; stroke-width: .6; }
.db-single.dark { fill: #14100c; }
.db-single.light { fill: #e8dcc0; }
.db-double.red, .db-treble.red { fill: #c8102e; }
.db-double.green, .db-treble.green { fill: #007a3d; }
.db-outerbull { fill: #007a3d; stroke: #0000004d; stroke-width: .6; }
.db-bull { fill: #c8102e; stroke: #0000004d; stroke-width: .6; }
.db-num {
  fill: var(--text); font-family: var(--font); font-weight: 800;
  font-size: 11px; text-anchor: middle; dominant-baseline: central;
}
.dart-hits { position: absolute; inset: 0; pointer-events: none; }
.dart-hit {
  position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--text);
  border: 2px solid var(--bg); box-shadow: 0 0 0 1px var(--text);
}
.dart-hit.bust { background: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.dart-line { position: absolute; background: var(--accent); pointer-events: none; }
.dart-line.x { top: 0; bottom: 0; width: 2px; left: 0; }
.dart-line.y { left: 0; right: 0; height: 2px; top: 0; }
@keyframes dart-sweep-x { from { left: 4%; } to { left: 96%; } }
@keyframes dart-sweep-y { from { top: 4%; } to { top: 96%; } }
.dart-pips { margin-left: 8px; }
.dart-pip {
  min-width: 30px;
  display: inline-block; min-width: 26px; margin-left: 4px; padding: 1px 5px;
  border-radius: var(--radius-sm); background: var(--surface-3); border: 1px solid var(--line);
  font-size: .72rem; font-variant-numeric: tabular-nums; color: var(--muted);
}
.dart-pip.bull { color: var(--gold); border-color: var(--gold); }
.dart-pip.good { color: var(--accent); border-color: var(--accent); }
.dart-pip.bad { color: var(--danger); border-color: var(--danger); }

@media (max-width: 420px) {
  .tt-grid { grid-template-columns: repeat(3, 1fr); }
  .tt-cell { width: 100%; }
}

/* the board room (pitch grid) */
.pitch-grid { display: grid; grid-template-columns: repeat(3, 76px); gap: 10px; justify-content: center; }
.pitch-cell {
  width: 76px; height: 76px; font-size: 1.6rem;
  background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; color: var(--text);
  transition: border-color .15s ease, background .15s ease;
}
.pitch-cell:hover:not(:disabled) { border-color: var(--muted); }
.pitch-cell:disabled { cursor: default; }
/* Handed to you by a skill or by Zerf reads as intel (cyan); won in the room reads as earned (green). */
.pitch-cell.known { background: var(--accent2-dim); border-color: var(--accent2); }
.pitch-cell.hit { background: var(--accent-dim); border-color: var(--accent); }
.pitch-cell.miss { background: var(--danger-dim); border-color: var(--danger); }
.pitch-status { color: var(--muted); font-size: .85rem; text-align: center; margin-top: 16px; }
.pitch-status b.good { color: var(--accent); }

@media (max-width: 420px) {
  .pitch-grid { grid-template-columns: repeat(3, 1fr); }
  .pitch-cell { width: 100%; }
}

/* the trio must stay one row even on phones: shrink, don't wrap */
@media (max-width: 640px) {
  .start-companies { gap: 8px; }
  .company-card { padding: 10px 8px; }
  .company-card .tier { font-size: .58rem; }
  .company-card strong { font-size: .8rem; }
  .company-card .sal { font-size: .68rem; line-height: 1.3; }
  .choices.trio { gap: 8px; }
  .choices.trio .choice-card { padding: 10px 8px; gap: 5px; }
  .choices.trio .choice-card strong { font-size: .78rem; }
  .choices.trio .choice-card .tag { font-size: .58rem; }
  .choices.trio .choice-card .boost { font-size: .78rem; }
  .choices.trio .choice-card small { font-size: .68rem; }
}

/* offers */
.offer-card .sal-big { font-size: 1.3rem; font-weight: 900; color: var(--accent); }
.offer-card .meta { font-size: .78rem; color: var(--muted); }
.offer-badge { font-size: .65rem; letter-spacing: 2px; color: var(--gold); font-weight: 800; }

/* report */
#report-body table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .85rem; }
#report-body th, #report-body td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); }
#report-body th { color: var(--muted); font-size: .7rem; letter-spacing: 1px; }
.report-hero { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0; }
.report-stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 22px; }
.report-stat b { display: block; font-size: 1.5rem; }
.report-stat span { color: var(--muted); font-size: .72rem; letter-spacing: 1px; }

/* the name the career gets at the end */
.career-name { margin-bottom: 4px; }
.career-name-sub {
  color: var(--text); font-size: 1.02rem; max-width: 620px; margin-bottom: 8px;
}
.career-name-meta {
  color: var(--muted); font-size: .8rem; letter-spacing: 1px; margin-bottom: 8px;
}

/* final score: the four things a career is judged on, and the verdict */
.final-score {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; margin: 18px 0;
}
.fs-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 16px; }
.fs-total { font-size: 1rem; color: var(--muted); }
.fs-total b { font-size: 2.1rem; color: var(--accent); }
.fs-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.fs-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .82rem; }
.fs-row span { color: var(--muted); font-size: .68rem; letter-spacing: 1px; }
.fs-row b { font-size: .95rem; white-space: nowrap; }
.fs-bar { height: 7px; border-radius: 999px; background: var(--surface-2); margin: 6px 0 4px; overflow: hidden; }
.fs-bar i { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.fs-part small { color: var(--muted); font-size: .66rem; }
.fs-note { color: var(--text); font-size: .78rem; margin-top: 6px; opacity: .85; }
/* A channel you actually maxed should look like it. */
.fs-part.maxed .fs-row span { color: var(--gold); }
.fs-part.maxed .fs-bar i { background: var(--gold); }
.fs-caption {
  margin-top: 18px; padding: 14px 16px;
  border-left: 3px solid var(--line); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-2);
}
.fs-caption b { display: block; letter-spacing: 2px; font-size: .8rem; margin-bottom: 4px; }
.fs-caption p { color: var(--muted); font-size: .9rem; }
.fs-caption.great { border-left-color: var(--accent); background: var(--accent-deep); }
.fs-caption.great b { color: var(--accent); }
.fs-caption.poor { border-left-color: var(--danger); }
.fs-caption.poor b { color: var(--danger); }
/* achievements */
.achievements { margin-top: 24px; }
.ach-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.ach-count { font-size: .9rem; color: var(--muted); }
.ach-count b { color: var(--accent); font-size: 1.15rem; }
.ach-sub { margin: 16px 0 8px; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ach-grid.muted { opacity: .5; }
.ach {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
}
.ach.won { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--surface)); }
.ach-emoji { font-size: 1.3rem; line-height: 1.2; }
.ach b { display: block; font-size: .8rem; letter-spacing: 1px; }
.ach.won b { color: var(--gold); }
.ach small { display: block; color: var(--muted); font-size: .74rem; line-height: 1.3; margin-top: 2px; }

/* the closing verdict */
.verdict-note {
  margin: 6px 0 18px; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
}
.verdict-note p { font-size: 1.02rem; line-height: 1.5; }
.verdict-note b { color: var(--accent); }
.verdict-note .coda { margin-top: 8px; color: var(--muted); font-size: .9rem; }

/* leaderboard */
.leaderboard {
  margin-top: 24px; padding: 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.lb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lb-rank { font-size: .9rem; color: var(--muted); }
.lb-rank b { color: var(--accent); font-size: 1.05rem; }
.lb-table { width: 100%; border-collapse: collapse; margin: 14px 0 10px; font-size: .85rem; }
.lb-table th { text-align: left; color: var(--muted); font-size: .65rem; letter-spacing: 1px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.lb-table td { padding: 8px; border-bottom: 1px solid var(--line-soft); }
.lb-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.lb-table tr.you td { background: var(--accent-dim); color: var(--text); font-weight: 700; }
.lb-table tr.you td:first-child { border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.lb-table tr.you td:last-child { border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.lb-table tr.gap td { text-align: center; color: var(--muted); padding: 2px; border: none; letter-spacing: 3px; }
.you-tag { font-size: .6rem; letter-spacing: 1px; background: var(--accent); color: var(--accent-ink); padding: 2px 6px; border-radius: var(--radius-xs); margin-left: 6px; }
.past-tag { font-size: .65rem; color: var(--muted); font-weight: 400; }
.zerf-cta {
  margin-top: 26px; padding: 22px; border-radius: var(--radius);
  background: linear-gradient(135deg, var(--accent-dim), var(--accent-deep));
  border: 1px solid var(--accent);
}
.zerf-cta h3 { margin-bottom: 6px; }
.zerf-cta p { color: var(--accent-soft); font-size: .9rem; margin-bottom: 14px; }
/* A slate hairline disappears on the green panel, so borrow the accent instead. */
.zerf-cta .btn-ghost { color: var(--accent-soft); }
.zerf-cta .btn-ghost:hover { color: var(--text); }

.foot { text-align: center; color: var(--muted); font-size: .75rem; padding: 18px; border-top: 1px solid var(--line-soft); }

@media (max-width: 760px) {
  #screen-game { flex-direction: column; }
  /* align-items: flex-start governs the horizontal axis once the direction
     flips, so both children need an explicit width or they shrink to content. */
  .statbar, .stage { width: 100%; position: static; }
  /* Reduced by default: the attribute rows and the reputation meter collapse so
     the card doesn't push the actual game off the bottom of the screen. */
  .statbar.collapsed .statbar-more { display: none; }
  .statbar-toggle {
    display: block; width: 100%; margin-top: 12px; padding: 9px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
    color: var(--muted);
    font-family: inherit; font-size: .68rem; font-weight: 700; letter-spacing: 1.5px;
    cursor: pointer;
  }
  .statbar-toggle:hover { color: var(--text); }
}

/* market: what your network actually bought you */
.offer-card .stepup { color: var(--accent); font-weight: 700; }