/* Derby Dash Cash Drive — public site styles.
   Brand palette (§11): royal blue #0057B8, gold #FFC72C, white.
   Scene colors sampled from the reference art. */

:root {
  --blue: #0057B8;
  --navy: #12315e;
  --gold: #FFC72C;
  --gold-dark: #E0A800;
  --sky: #bfe4fb;
  --sky-deep: #9fd4f7;
  --grass: #6db64c;
  --grass-dark: #4f9636;
  --dirt: #c99e6d;
  --dirt-dark: #b3854f;
  --cream: #fff7e0;
  --paleblue: #eaf4ff;
  --ink: #1c2c44;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
}
img { max-width: 100%; }
h1, h2, h3 { line-height: 1.2; }
a { color: var(--blue); }

.btn {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  font-weight: 800; font-size: 1rem; border-radius: 999px; padding: 12px 22px;
  transition: transform .08s ease, filter .12s ease;
}
.btn:active { transform: scale(.97); }
/* glossy "primary button" treatment (per provided button reference art) */
.btn-blue {
  background: linear-gradient(#4a94e8, #0f60c4 48%, #0a4da6);
  color: #fff; border: 2px solid #0a3d85; text-shadow: 0 1px 1px rgba(0,0,0,.35);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 3px 0 #0a3d85;
}
.btn-blue:hover { filter: brightness(1.08); }
.btn-gold {
  background: linear-gradient(#ffd75e, var(--gold) 48%, var(--gold-dark));
  color: var(--navy); border: 2px solid #c79000;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.55), 0 3px 0 #c79000;
}
.btn-gold:hover { filter: brightness(1.05); }
.btn-plain { background: #e4e9f2; color: var(--ink); }

/* ---- Top bar ---- */
.topbar { background: var(--navy); color: #fff; }
.topbar-inner {
  max-width: 1100px; margin: 0 auto; padding: 8px 16px;
  display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: .95rem;
}
.topbar-logo { width: 34px; height: 34px; border-radius: 50%; background: #fff; }

/* ---- Hero ---- */
.hero {
  background: linear-gradient(var(--sky) 0%, var(--sky-deep) 78%, var(--grass) 78%, var(--grass-dark) 100%);
  padding: 24px 16px 34px;
}
.hero-inner {
  max-width: 1100px; margin: 0 auto; display: flex; gap: 24px; align-items: center;
  flex-wrap: wrap;
}
.hero-left { flex: 1 1 420px; min-width: 300px; }
.hero-school { max-width: 440px; width: 88%; display: block; margin: 0 auto 4px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.hero-logo { max-width: 480px; width: 100%; display: block; margin: 0 auto; }
.hero-dates {
  width: fit-content; margin: 8px auto 12px; font-weight: 800; color: var(--navy);
  font-size: 1.1rem; background: rgba(255,255,255,.85); padding: 5px 18px;
  border-radius: 999px; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.hundred-banner {
  background: var(--navy); color: #fff; border-radius: 14px; padding: 12px 16px;
  font-size: 1rem; text-align: center; box-shadow: 0 3px 0 rgba(0,0,0,.15);
}
.hundred-banner strong { color: var(--gold); }
.campaign-note {
  margin-top: 10px; background: var(--gold); color: var(--navy); font-weight: 700;
  border-radius: 12px; padding: 10px 14px; text-align: center;
}

.goal-card {
  flex: 0 1 320px; min-width: 280px; margin: 0 auto;
  background: #fff; border-radius: 18px; padding: 18px 20px 16px; text-align: center;
  box-shadow: 0 6px 18px rgba(18,49,94,.18);
}
.goal-title { color: var(--navy); font-weight: 900; letter-spacing: .06em; }
.goal-amount { margin: 6px 0 10px; color: var(--ink); font-size: 1.05rem; }
.goal-amount strong { color: var(--navy); font-weight: 900; }
.goal-amount .js-goal-raised { font-size: 1.5rem; }
/* second goal card at the bottom of the page */
.goal-bottom { display: flex; justify-content: center; margin: 26px 16px 8px; }
.goal-bottom .goal-card { width: min(420px, 100%); }
/* simple progress bar */
.progress-bar {
  position: relative; height: 22px; background: #e2e8f2; border-radius: 999px;
  overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}
.progress-fill {
  height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  transition: width .8s ease;
}
.progress-pct {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-weight: 900; font-size: .82rem; color: var(--navy);
}
.goal-bonus { margin-top: 8px; font-size: .9rem; color: #56617a; }

/* ---- Content cards ---- */
.content { max-width: 1100px; margin: 0 auto; padding: 22px 14px 30px; }
.cards { display: flex; flex-direction: column; gap: 18px; }
.card {
  flex: 0 0 auto; border-radius: 16px; padding: 18px 20px;
  box-shadow: 0 3px 10px rgba(18,49,94,.08);
}
.card h2 { margin: 0 0 10px; color: var(--navy); font-size: 1.2rem; }
.card-funds { background: var(--navy); border: 2px solid var(--gold); color: #fff; }
.card-funds h2 { color: var(--gold); }
/* collapsible "What your donation funds" (native <details>, closed by default) */
.card-funds summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent;
}
.card-funds summary::-webkit-details-marker { display: none; }
.card-funds summary h2 { margin: 0; }
.funds-hint {
  margin-left: auto; color: var(--gold); font-size: .85rem; font-weight: 700;
  font-style: italic; white-space: nowrap; opacity: .9;
}
.funds-hint::after { content: "Tap to expand"; }
.card-funds[open] .funds-hint::after { content: "Tap to close"; }
.funds-chevron { color: var(--gold); font-size: 2.2rem; line-height: 1; font-weight: 900; transition: transform .15s ease; }
.card-funds[open] .funds-chevron { transform: rotate(90deg); }
.card-funds[open] summary { margin-bottom: 10px; }
.card-funds ul { margin: 0 0 12px; padding-left: 20px; }
.card-funds li { margin-bottom: 6px; }
.card-how { background: var(--paleblue); border: 2px solid #cfe4fa; }
.card-how ol { margin: 0; padding-left: 20px; }
.card-how li { margin-bottom: 8px; }

/* ---- Tile key: compact single row, sits on the grass inside the track ---- */
.tile-key {
  margin: 4px 10px 8px; background: rgba(255,255,255,.92); border-radius: 999px;
  padding: 5px 14px; position: relative; z-index: 2;
  display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,.2); font-weight: 700; font-size: .82rem;
  overflow-x: auto;
}
.key-title { font-weight: 900; color: var(--navy); letter-spacing: .05em; flex: none; }
.key-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; flex: none; }
/* mini versions of the real board tiles, with the same label overlay */
.key-tile { position: relative; display: inline-block; width: 34px; flex: none; }
.key-richie { width: 30px; height: 30px; object-fit: contain; flex: none; }
.key-tile img { display: block; width: 100%; border-radius: 6px; box-shadow: 0 1px 3px rgba(0,0,0,.22); }
.key-tile .tile-label {
  position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%);
  font-size: 6px; font-weight: 900; padding: 0 4px; border-radius: 999px; white-space: nowrap;
}
.key-tile .avail-label { background: var(--blue); color: #fff; }
.key-tile .claimed-label { background: var(--gold); color: var(--navy); }

/* ---- Track: horse-paddock race course ----
   Layers (per the racetrack build guide): base grass texture -> dirt track
   path -> inner lane shading -> recessed tile wells -> tiles -> sparkles. */
.track-wrap {
  --path: #d8a566;
  --path-edge: #c08c4e;
  --well: #c2924f;
  --well-deep: #b3823f;
  background: linear-gradient(rgba(255,255,255,.06), rgba(0,0,0,.08)),
              url(/assets/img/grass_texture.jpg);
  background-size: auto, 420px;
  border-radius: 22px; padding: 0 0 26px; overflow: hidden;
}
/* full-bleed illustrated banner at the top of the track */
.track-banner {
  display: block; width: 100%; height: auto; margin: 0 0 2px;
}
.track-loading { color: #fff; text-align: center; font-weight: 700; padding: 30px;
  text-shadow: 0 1px 2px rgba(0,0,0,.4); }
/* visually-hidden but readable by screen readers / search engines */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* white paddock fence rails across the top and bottom of the field */
.fence {
  height: 46px; margin: 2px 10px;
  background: url(/assets/img/fence_straight.png) repeat-x bottom center / auto 100%;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}

.track { padding: 0 8px; }

/* START sign: navy board with checkered flags on gold posts (per mockup) */
.race-sign {
  display: inline-flex; flex-direction: column; align-items: center;
  margin: 2px 14px; position: relative; z-index: 2;
}
.race-sign .sign-board {
  background: linear-gradient(#1d4f96, var(--navy)); color: #fff; font-weight: 900;
  letter-spacing: .12em; font-size: 1.15rem; padding: 7px 20px 9px; border-radius: 10px;
  border: 2px solid #0a1e3d; box-shadow: 0 3px 0 rgba(0,0,0,.3), inset 0 2px 0 rgba(255,255,255,.25);
  display: flex; align-items: center; gap: 10px; text-shadow: 0 1px 1px rgba(0,0,0,.4);
}
.race-sign .checkers {
  width: 34px; height: 22px; border-radius: 3px;
  background: repeating-conic-gradient(var(--navy) 0% 25%, var(--gold) 0% 50%) 0 0/11px 11px;
  border: 1px solid #0a1e3d;
}
.race-sign .sign-posts {
  width: 70%; height: 16px;
  background: linear-gradient(90deg, var(--gold-dark) 0 8px, transparent 8px calc(100% - 8px), var(--gold-dark) calc(100% - 8px));
}
/* FINISH LINE: banner flanked by a Bonus horseshoe on each side */
.finish-row {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(4px, 2vw, 24px); margin: 8px 6px 0; position: relative; z-index: 2;
}
.finish-banner {
  display: block; margin: 0; width: min(440px, 60%); height: auto; flex: 0 1 auto;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.25));
}
.bonus-shoe-tile {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center;
  gap: 3px; text-decoration: none;
}
.bonus-shoe-tile img {
  width: clamp(70px, 12vw, 118px); height: auto;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.3));
  transition: transform .12s ease;
}
.bonus-shoe-tile:hover img { transform: translateY(-3px) scale(1.05); }
.bonus-shoe-caption {
  font-weight: 900; font-size: clamp(.7rem, 1.4vw, .9rem); color: #fff;
  background: var(--navy); padding: 3px 12px; border-radius: 999px;
  box-shadow: 0 2px 4px rgba(0,0,0,.25); white-space: nowrap;
}

/* one row of the winding dirt path — the track is wider than the tiles so
   the winding shape stays visible (build guide rule 1) */
.lane {
  position: relative;
  display: flex; gap: 6px; align-items: center;
  padding: 13px var(--gutter, 58px);
  margin: 0 6px;
}
/* the straight dirt band: nearly-square ends so it butts seamlessly into the
   turn connectors; single inset shadow only (no drop shadow -> no seam lines) */
.lane::before {
  content: ""; position: absolute; z-index: 0;
  left: 8px; right: 8px; top: 6px; bottom: 6px;
  background: linear-gradient(var(--path), var(--path-edge));
  border-radius: 10px;
  box-shadow: inset 0 4px 7px rgba(0,0,0,.16);
}
/* U-turn connector linking this row to the next, on alternating sides.
   Same dirt fill + thickness as the straight, overlapping both bands so the
   path reads as one continuous shape with a smooth rounded outer turn. */
.lane.turn-right::after, .lane.turn-left::after {
  content: ""; position: absolute; z-index: 0;
  top: 6px; height: calc(200% - 12px);
  width: calc(var(--gutter, 58px) + 20px);
  background: linear-gradient(var(--path), var(--path-edge));
  box-shadow: inset 0 4px 7px rgba(0,0,0,.14);
}
.lane.turn-right::after { right: 4px; border-radius: 0 999px 999px 0; }
.lane.turn-left::after  { left: 4px;  border-radius: 999px 0 0 999px; }
.lane.rev { flex-direction: row-reverse; }

/* scenery PNGs (bushes, rocks, wildflowers) in the grass gutters —
   layered beneath the wells so they never cover a tile */
.decor {
  position: absolute; z-index: 0; width: 48px; height: auto; pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.25));
}

/* recessed tile well carved into the dirt (build guide rule 2):
   consistent size, spacing, and corner radius; tile sits inside with a
   visible dirt margin (rule 3) */
.well {
  position: relative; z-index: 1; flex: 1 1 0; min-width: 0; aspect-ratio: 1;
  border-radius: 16%;
  background: linear-gradient(var(--well-deep), var(--well));
  box-shadow: inset 0 3px 6px rgba(0,0,0,.30), inset 0 -1px 2px rgba(255,255,255,.30);
}

/* the tile fills the well minus a visible dirt margin */
.well > .tile {
  position: absolute; inset: 6.5%; z-index: 1;
  border: 0; padding: 0; background: none; cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.tile img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  border-radius: 10px; box-shadow: 0 2px 4px rgba(0,0,0,.30);
}
/* sparkle accent on claimed tiles (build guide layer 6) */
.well .tile.claimed::before {
  content: "✦"; position: absolute; top: -9px; left: -7px; z-index: 3;
  color: #ffe27a; font-size: 13px; text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.tile .tile-label {
  position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%);
  font-size: clamp(7px, 1vw, 10px); font-weight: 900; letter-spacing: .02em;
  padding: 1px 6px; border-radius: 999px; white-space: nowrap; z-index: 2;
}
.tile.available { cursor: pointer; }
.tile.available .tile-label { background: var(--blue); color: #fff; }
.tile.available:hover img { transform: translateY(-2px) scale(1.04); transition: transform .1s; }
.tile.claimed .tile-label { background: var(--gold); color: var(--navy); }
.tile.reserved img { filter: grayscale(.8) opacity(.65); }
.tile.reserved .tile-label { background: #7a828f; color: #fff; }
.tile.premium::after {
  content: "⭐"; position: absolute; top: -4px; right: -2px; font-size: clamp(11px, 1.4vw, 15px);
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); z-index: 2;
}
/* fallback card when a custom amount has no PNG art */
.tile .tile-fallback {
  width: 100%; height: 100%;
  border-radius: 10px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; box-shadow: 0 2px 4px rgba(0,0,0,.3);
  font-weight: 900; background: #fff; color: var(--blue);
  border: 2px solid var(--blue); font-size: clamp(9px, 1.1vw, 13px);
}
.tile.claimed .tile-fallback { background: var(--blue); color: var(--gold); border-color: var(--gold); }
.tile .shoe { transform: rotate(180deg); font-size: 1.2em; }

/* Richie straddles the boundary between the last paid tile and the next
   open one: anchored to the leading edge of the first unpaid tile. In
   reversed (right-to-left) lanes that edge is on the right, and he flips
   to keep facing the direction of travel. */
.richie-marker {
  position: absolute; top: 50%; left: 0; transform: translate(-58%, -54%);
  width: 108%; height: 108%; z-index: 3;
  object-fit: contain; pointer-events: none;
  /* bright yellow outline (4-direction drop-shadow) + soft ground shadow */
  filter: drop-shadow(2px 0 0 #ffd900) drop-shadow(-2px 0 0 #ffd900)
          drop-shadow(0 2px 0 #ffd900) drop-shadow(0 -2px 0 #ffd900)
          drop-shadow(0 3px 3px rgba(0,0,0,.35));
}
.lane.rev .richie-marker {
  left: auto; right: 0; transform: translate(58%, -54%) scaleX(-1);
}
/* Richie at the finish line once every horseshoe is paid */
.richie-finish {
  width: 72px; height: 72px; object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0,0,0,.3));
  animation: richie-bounce 1s ease-in-out infinite alternate;
}
@keyframes richie-bounce {
  from { transform: translateY(0); }
  to   { transform: translateY(-6px); }
}

/* finish-line scene */
.finish-scene {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; margin: 8px 16px 0;
}
.finish-scene img { width: 120px; }
.finish-card {
  background: #fff; border-radius: 16px; padding: 14px 22px; max-width: 420px;
  text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.finish-card h3 { margin: 0 0 4px; color: var(--navy); font-size: 1.25rem; }
.finish-card p { margin: 0; color: var(--ink); font-weight: 600; }

/* ---- Bonus ---- */
.bonus-wrap { margin-top: 22px; }
.bonus-card {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  background: #fff; border: 3px dashed var(--gold-dark); border-radius: 18px; padding: 16px 20px;
  box-shadow: 0 3px 10px rgba(18,49,94,.08);
}
.bonus-shoe { font-size: 2.4rem; }
.bonus-text { flex: 1 1 300px; }
.bonus-text h2 { margin: 0 0 6px; color: var(--navy); font-size: 1.2rem; }
.bonus-text p { margin: 0; }

/* ---- Footer ---- */
.footer { background: var(--navy); color: #fff; margin-top: 30px; }
.footer a { color: var(--gold); }
.footer-inner {
  max-width: 1100px; margin: 0 auto; padding: 24px 16px;
  display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap;
}
.footer-club { display: flex; gap: 14px; align-items: center; }
.footer-club img { width: 64px; height: 64px; border-radius: 50%; background: #fff; }
.footer-qr {
  display: flex; gap: 12px; align-items: center; background: #fff; color: var(--navy);
  border-radius: 14px; padding: 10px 14px; font-weight: 700; text-align: left;
}
.footer-qr img { width: 92px; height: 92px; }
.poster-link { font-size: .85rem; }
.footer-thanks {
  text-align: center; background: var(--gold); color: var(--navy);
  font-weight: 900; padding: 10px; letter-spacing: .03em;
}

/* ---- Modal ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(12,25,50,.55); z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal-backdrop[hidden], .toast[hidden] { display: none; }
.modal {
  background: #fff; border-radius: 20px; max-width: 420px; width: 100%;
  padding: 22px 22px 18px; text-align: center; box-shadow: 0 12px 40px rgba(0,0,0,.35);
}
.modal-badge { width: 72px; height: 72px; }
.modal h3 { margin: 8px 0 6px; color: var(--navy); font-size: 1.3rem; }
.modal #modal-amount { color: var(--blue); }
.modal-hold { font-size: .9rem; color: #56617a; }
.modal-buttons { display: flex; gap: 10px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }

/* ---- Zeffy payment modal ---- */
/* darker, dimmed backdrop so the page recedes and the modal clearly floats */
.zeffy-backdrop { background: rgba(4,10,22,.82); }
.zeffy-box {
  width: min(560px, 96vw); height: min(88vh, 800px);
  background: #fff; border-radius: 20px; overflow: hidden;
  display: flex; flex-direction: column;
  /* light frame + glow so the modal edge stands out even over dark page areas */
  border: 5px solid #fff;
  box-shadow: 0 18px 55px rgba(0,0,0,.6), 0 0 0 3px rgba(255,199,44,.55);
}
.zeffy-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--navy); color: #fff; padding: 10px 14px; font-size: .95rem;
}
.zeffy-head strong { color: var(--gold); }
.zeffy-timer {
  background: rgba(255,255,255,.14); color: var(--gold); font-weight: 900;
  font-variant-numeric: tabular-nums; border-radius: 999px; padding: 5px 12px;
  white-space: nowrap; font-size: .9rem;
}
.zeffy-timer.urgent { background: #c0392b; color: #fff; }
.zeffy-close {
  border: 0; background: var(--gold); color: var(--navy); font-weight: 800;
  border-radius: 999px; padding: 7px 14px; cursor: pointer; white-space: nowrap;
}
.zeffy-close:hover { filter: brightness(1.05); }
.zeffy-instruct {
  background: #0d2444; color: var(--gold); text-align: center;
  font-weight: 700; padding: 7px 12px; font-size: .95rem;
  border-top: 1px solid rgba(255,255,255,.12);
}
.zeffy-instruct strong { font-weight: 900; }
#zeffy-frame { flex: 1; width: 100%; border: 0; background: #f4f7fb; }
.zeffy-foot {
  padding: 8px 14px; font-size: .8rem; color: #56617a; background: #f4f7fb;
  border-top: 1px solid #e2e8f2;
}

/* ---- "Make your gift go further" share modal ---- */
.share-box { max-width: 440px; text-align: center; }
.share-emoji { font-size: 2.4rem; line-height: 1; }
.share-raffle {
  display: inline-block; margin: 8px 0 2px; padding: 6px 14px;
  background: var(--gold); color: var(--navy); border-radius: 999px;
  font-weight: 800; font-size: .95rem;
}
.share-box h3 { margin: 6px 0 6px; color: var(--navy); font-size: 1.35rem; }
.share-intro { color: var(--ink); font-size: .95rem; margin: 0 0 14px; }
#share-fields { text-align: left; }
#share-fields label { display: block; font-weight: 700; font-size: .85rem; color: var(--navy); margin: 10px 0 3px; }
#share-fields label .muted { font-weight: 500; color: #7a869c; }
#share-fields input, #share-fields textarea {
  width: 100%; padding: 10px 12px; border: 1px solid #c6d2e4; border-radius: 10px;
  font-size: 1rem; font-family: inherit; box-sizing: border-box;
}
#share-fields textarea { resize: vertical; }
/* honeypot: invisible to people, present for bots */
.hp { position: absolute !important; left: -9999px !important; width: 1px !important;
      height: 1px !important; opacity: 0 !important; pointer-events: none; }
.share-msg { margin-top: 12px; font-weight: 700; border-radius: 10px; padding: 10px 12px; }
.share-msg.ok { background: #e3f2e5; color: #1c7a2e; }
.share-msg.err { background: #ffecec; color: #b0243a; }

/* ---- Toast ---- */
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--navy); color: #fff; font-weight: 700; border-radius: 999px;
  padding: 12px 22px; z-index: 60; box-shadow: 0 6px 18px rgba(0,0,0,.3);
  max-width: 92vw; text-align: center;
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
  .goal-raised { font-size: 2.1rem; }
  .lane { --gutter: 42px; }
  .decor { width: 26px !important; }
  .fence { height: 34px; }
  .footer-inner { justify-content: center; text-align: center; }
  .footer-club { flex-direction: column; text-align: center; }
  .tile .tile-label { font-size: 7px; padding: 1px 4px; }
  .lane { --gutter: 34px; margin: 0 2px; padding-top: 5px; padding-bottom: 5px; }
  .lane.turn-right::after { right: 4px; }
  .lane.turn-left::after  { left: 4px; }
  /* compact tile key on phones: drop the descriptive words so it fits one line */
  .key-extra { display: none; }
  .tile-key { gap: 9px; font-size: .74rem; padding: 5px 8px; margin: 4px 4px 8px; }
  .key-tile { width: 28px; }
  .decor { font-size: 13px; }
  .fence { background-size: auto, auto; height: 24px; }
  .richie-finish { width: 56px; height: 56px; }
  .finish-scene img { width: 90px; }
}

/* ---- Print (poster handled by poster.php; hide chrome if someone prints the board) ---- */
@media print {
  .modal-backdrop, .toast { display: none !important; }
}