/* ═══════════════════════════════════════════════════════════
   DOMINO v2 — real dominoes on green felt.
   The reference is the actual game: ivory tiles with a brass
   spinner, dice-face pips, doubles, a boneyard, a leather table
   rim, and the SLAM. Goofy through physicality, not mascots.
   The eight segment colors belong to pips in the queue only.
   ═══════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Outfit:wght@500;600;700;800&display=swap");

:root {
  --felt: #1f7f47;
  --felt-deep: #145c33;
  --felt-line: #12522e;
  --leather: #5c3a21;
  --leather-2: #472c18;
  --brass: #d9a441;
  --ivory: #fffdf2;
  --ivory-2: #f4eeda;
  --bone-edge: #d8cfae;
  --ink: #221d14;
  --paper: #fffef8;
  --paper-line: #e8503a;

  /* the segment wheel — pips in the queue only */
  --seg-red: #e03a2f;
  --seg-orange: #f07f13;
  --seg-yellow: #e8b800;
  --seg-green: #2f9c53;
  --seg-blue: #1f6fd0;
  --seg-purple: #8e4fc4;
  --seg-pink: #e0447e;
  --seg-cyan: #2ab5be;

  --display: "Alfa Slab One", "Outfit", system-ui, serif;
  --body: "Outfit", system-ui, sans-serif;

  --snap: cubic-bezier(0.2, 1.4, 0.4, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--body);
  font-weight: 600;
  color: var(--ivory);
  background:
    radial-gradient(ellipse 120% 90% at 50% 0%, rgba(255, 255, 255, 0.07) 0%, transparent 55%),
    radial-gradient(ellipse 140% 100% at 50% 115%, rgba(0, 0, 0, 0.35) 0%, transparent 60%),
    repeating-linear-gradient(48deg, rgba(0, 0, 0, 0.02) 0 2px, transparent 2px 5px),
    var(--felt);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--brass); color: var(--ink); }
img { max-width: 100%; }
a { color: inherit; }

:is(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--ivory);
  outline-offset: 3px;
}

/* ── the leather table rim (nav) ───────────────────────── */
.rim {
  position: sticky;
  top: 0;
  z-index: 50;
  background:
    linear-gradient(180deg, #6b452a 0%, var(--leather) 45%, var(--leather-2) 100%);
  border-bottom: 3px solid #2e1c0e;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.rim-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: clamp(0.7rem, 2vw, 1.4rem);
  padding: 0.6rem clamp(1rem, 3vw, 1.8rem);
}
/* brass studs on the rim */
.rim::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 5px;
  height: 8px;
  background-image: radial-gradient(circle at 4px 4px, var(--brass) 0 2.6px, rgba(0, 0, 0, 0.35) 3.2px, transparent 4px);
  background-size: 46px 8px;
  background-repeat: repeat-x;
  opacity: 0.9;
  pointer-events: none;
}
.rim-brand {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--ivory);
  text-decoration: none;
  letter-spacing: 0.03em;
  text-shadow: 0 2.5px 0 rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.rim-brand img { width: 26px; height: 34px; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.4)); }
.rim-links { display: flex; gap: clamp(0.6rem, 1.6vw, 1.2rem); margin-left: auto; align-items: center; }
.rim-link {
  color: #e9d9c4;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.25em 0.1em;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
.rim-link:hover { color: var(--ivory); border-bottom-color: var(--brass); }
/* the nav ripple: one link nudges the next */
.rim-link, .rim-links .slam { transform-origin: 50% 100%; }
.tipwave { animation: linkTip 0.5s var(--snap); }
@keyframes linkTip {
  0% { transform: rotate(0); }
  35% { transform: rotate(calc(var(--a, 8) * 1deg)); }
  100% { transform: rotate(0); }
}

/* ── the slam button: an ivory tile you slap down ──────── */
.slam {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.02rem;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(168deg, #fffef8 0%, var(--ivory) 50%, var(--ivory-2) 100%);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  padding: 0.75em 1.4em 0.8em;
  box-shadow:
    0 6px 0 var(--bone-edge),
    0 12px 18px rgba(0, 0, 0, 0.35),
    inset 0 2px 0 #ffffff;
  transition: transform 0.16s var(--snap), box-shadow 0.16s var(--snap);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.slam::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f0cf8b, var(--brass) 60%, #96671e);
  border: 1.5px solid rgba(34, 29, 20, 0.7);
  flex: none;
}
/* about to tip: the button leans, it does not bounce */
.slam { transform-origin: 50% 100%; }
.slam:hover {
  transform: perspective(600px) rotateX(-7deg);
  box-shadow: 0 8px 0 var(--bone-edge), 0 15px 20px rgba(0, 0, 0, 0.36), inset 0 2px 0 #fff;
}
.slam:active { transform: translateY(2px); }

/* the label letters topple like a chain, one into the next */
.slam .lbl { display: inline-block; white-space: pre; }
.slam .lt { display: inline-block; transform-origin: 62% 96%; }
.slam .lt.tip { animation: ltTip 0.42s var(--snap); }
@keyframes ltTip {
  0% { transform: rotate(0); }
  40% { transform: rotate(64deg); }
  100% { transform: rotate(0); }
}
.slam-big { font-size: 1.3rem; padding: 0.9em 1.8em 0.95em; border-radius: 15px; }
.slam-felt {
  background: linear-gradient(168deg, #24925382 0%, rgba(18, 82, 46, 0.6) 100%);
  color: var(--ivory);
  border-color: var(--ivory);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35), 0 12px 18px rgba(0, 0, 0, 0.3);
}
.slam-felt::before { background: radial-gradient(circle at 34% 30%, #fffdf2, #d8cfae 70%); border-color: rgba(255, 253, 242, 0.7); }
.slam-felt:hover { box-shadow: 0 9px 0 rgba(0, 0, 0, 0.35), 0 16px 22px rgba(0, 0, 0, 0.32); }
.slam-felt:active { box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), 0 3px 6px rgba(0, 0, 0, 0.4); }
.slam-x { padding: 0.62em 0.72em; }
.slam-x::before { display: none; }
.slam-x svg { width: 18px; height: 18px; display: block; }
.slam[disabled] { opacity: 0.5; cursor: not-allowed; }
.js-wallet.connected { font-family: ui-monospace, monospace; font-size: 0.92rem; }

/* ── hero ──────────────────────────────────────────────── */
main { position: relative; z-index: 1; }

.hero {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2.2rem, 6vh, 4rem) clamp(1rem, 4vw, 2.4rem) 0;
  text-align: center;
}
.hero-copy { max-width: none; }
.kicker {
  display: inline-block;
  font-weight: 700;
  font-size: 0.92rem;
  color: #cfe8d6;
  background: rgba(18, 82, 46, 0.55);
  border: 2px dashed rgba(255, 253, 242, 0.4);
  border-radius: 999px;
  padding: 0.4em 1.2em;
  margin-bottom: 1.4rem;
}
.kicker b { color: var(--ivory); }

.wordmark {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 10.5vw, 6.8rem);
  line-height: 1;
  margin: 0;
  color: var(--ivory);
  letter-spacing: 0.02em;
  text-shadow:
    0 4px 0 rgba(0, 0, 0, 0.45),
    0 10px 24px rgba(0, 0, 0, 0.35);
}
/* the O is a real pip: ivory disc, black dot */
.wordmark .pip {
  display: inline-block;
  width: 0.72em; height: 0.72em;
  background: radial-gradient(circle at 32% 28%, #fffef8, var(--ivory) 55%, var(--ivory-2) 100%);
  border: 0.075em solid var(--ink);
  border-radius: 50%;
  position: relative;
  vertical-align: 0.015em;
  box-shadow: 0 0.06em 0 rgba(0, 0, 0, 0.45);
}
.wordmark .pip::after {
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: var(--ink);
}
/* hover the name: the first pip rolls into the second */
.wordmark:hover .pip { animation: pipRoll 0.55s var(--snap); }
.wordmark:hover .pip:last-of-type { animation-delay: 0.14s; }
@keyframes pipRoll {
  0% { transform: translateX(0) rotate(0); }
  45% { transform: translateX(0.09em) rotate(102deg); }
  100% { transform: translateX(0) rotate(0); }
}

.hero .lede {
  font-size: clamp(1.02rem, 2vw, 1.18rem);
  line-height: 1.66;
  max-width: 62ch;
  margin: 1.5rem auto 1.7rem;
  color: #eaf5ec;
  font-weight: 600;
}
.hero .lede b { color: #ffffff; font-weight: 800; }
.hero-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.hero-hint { margin: 1.8rem 0 0.4rem; font-weight: 700; color: #b9dcc3; font-size: 0.94rem; }

/* ── the run: the table, framed in leather ─────────────── */
.run-band {
  position: relative;
  margin: 1.3rem auto 0;
  max-width: 1380px;
  padding: 0 clamp(0.6rem, 2vw, 1.6rem);
}

.run-frame {
  position: relative;
  border: 4px solid var(--leather);
  outline: 2.5px solid #2e1c0e;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 130% at 50% -20%, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
    var(--felt-deep);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45), inset 0 0 60px rgba(0, 0, 0, 0.25);
}
.run-frame canvas { display: block; width: 100%; height: auto; }

.run-tag {
  position: absolute;
  top: 12px; left: 16px;
  font-weight: 700;
  font-size: 0.8rem;
  color: #cfe8d6;
  border: 2px dashed rgba(255, 253, 242, 0.35);
  border-radius: 999px;
  padding: 0.25em 0.85em;
  background: rgba(18, 82, 46, 0.6);
}

/* the score pad */
.scorepad {
  position: absolute;
  top: 10px; right: 14px;
  background: var(--paper);
  color: var(--ink);
  border-radius: 8px 8px 10px 10px;
  box-shadow: 0 5px 12px rgba(0, 0, 0, 0.45), inset 0 -26px 0 rgba(0, 0, 0, 0.03);
  padding: 0.5rem 0.8rem 0.55rem 1.1rem;
  min-width: 132px;
  transform: rotate(1.6deg);
  font-variant-numeric: tabular-nums;
}
.scorepad::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0.62rem;
  width: 2px;
  background: var(--paper-line);
  opacity: 0.75;
}
.scorepad::after {
  content: "";
  position: absolute;
  top: -7px; left: 50%;
  transform: translateX(-50%);
  width: 46px; height: 13px;
  background: rgba(217, 164, 65, 0.75);
  border-left: 1px solid rgba(0, 0, 0, 0.12);
  border-right: 1px solid rgba(0, 0, 0, 0.12);
}
.scorepad .sp-title {
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  border-bottom: 2px solid rgba(34, 29, 20, 0.2);
  padding-bottom: 2px;
  margin-bottom: 3px;
}
.scorepad .sp-row {
  display: flex;
  justify-content: space-between;
  gap: 0.9em;
  font-size: 0.86rem;
  font-weight: 700;
  border-bottom: 1.5px solid rgba(34, 29, 20, 0.1);
  padding: 1.5px 0;
}
.scorepad .sp-row:last-child { border-bottom: none; }
.scorepad .sp-row b { font-weight: 800; }

.run-caption {
  font-weight: 700;
  color: #cfe8d6;
  font-size: 0.95rem;
  padding: 0.8rem 0.4rem 0;
  min-height: 2.1em;
  text-align: left;
}
.run-caption b { color: #ffffff; }

/* ── sections ──────────────────────────────────────────── */
.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3rem, 7vh, 5rem) clamp(1rem, 4vw, 2.4rem) 0;
}
.section-head {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.3rem, 3vh, 2rem);
}
.section-head h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  margin: 0;
  color: var(--ivory);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}
.stitch-note {
  color: #b9dcc3;
  font-size: 0.88rem;
  font-weight: 700;
  border-bottom: 2px dashed rgba(255, 253, 242, 0.45);
  padding-bottom: 2px;
}

.cards4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.9rem, 1.8vw, 1.4rem); }
.cards3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.9rem, 1.8vw, 1.4rem); }
.cards2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(0.9rem, 1.8vw, 1.4rem); }

/* an ivory tile card: spinner + real divider */
.dcard {
  position: relative;
  background: linear-gradient(165deg, #fffef8 0%, var(--ivory) 45%, var(--ivory-2) 100%);
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  box-shadow: 0 7px 0 var(--bone-edge), 0 14px 22px rgba(0, 0, 0, 0.35), inset 0 2px 0 #ffffff;
  padding: clamp(1.05rem, 2.2vw, 1.45rem);
  transition: transform 0.2s var(--snap), box-shadow 0.2s var(--snap);
}
.dcard:hover { transform: translateY(-4px); box-shadow: 0 11px 0 var(--bone-edge), 0 18px 26px rgba(0, 0, 0, 0.38), inset 0 2px 0 #fff; }
.dcard h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.06rem;
  margin: 0 0 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dcard p { margin: 0.45rem 0; line-height: 1.6; font-size: 0.96rem; font-weight: 600; color: #4c4433; }
.dcard p b { color: var(--ink); font-weight: 800; }
/* the divider with its brass spinner */
.dcard .divider {
  position: relative;
  height: 2.5px;
  background: rgba(34, 29, 20, 0.75);
  border-radius: 2px;
  margin: 0.7rem 0;
}
.dcard .divider::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 13px; height: 13px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #f0cf8b, var(--brass) 60%, #96671e);
  border: 2px solid rgba(34, 29, 20, 0.75);
}
/* dice-face pips in the card corner */
.face {
  width: 44px; height: 44px;
  flex: none;
  border: 2.5px solid var(--ink);
  border-radius: 9px;
  background: #fffef8;
  display: grid;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  padding: 4px;
  box-shadow: inset 0 -3px 0 rgba(216, 207, 174, 0.7);
}
.face i { border-radius: 50%; background: var(--ink); width: 8px; height: 8px; place-self: center; visibility: hidden; }
.face[data-n="1"] i:nth-child(5) { visibility: visible; }
.face[data-n="2"] :is(i:nth-child(3), i:nth-child(7)) { visibility: visible; }
.face[data-n="3"] :is(i:nth-child(3), i:nth-child(5), i:nth-child(7)) { visibility: visible; }
.face[data-n="4"] :is(i:nth-child(1), i:nth-child(3), i:nth-child(7), i:nth-child(9)) { visibility: visible; }
.face.f-green i { background: var(--seg-green); }
.face.f-blue i { background: var(--seg-blue); }
.face.f-red i { background: var(--seg-red); }
.face.f-yellow i { background: var(--seg-yellow); }

/* dark felt card with stitched border */
.fcard {
  background: rgba(16, 70, 40, 0.55);
  border: 2.5px dashed rgba(255, 253, 242, 0.4);
  border-radius: 16px;
  padding: clamp(1.05rem, 2.2vw, 1.45rem);
}
.fcard h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: 1.06rem;
  margin: 0 0 0.55rem;
  color: var(--ivory);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}
.fcard p { margin: 0.45rem 0; line-height: 1.62; font-size: 0.97rem; color: #d4ecdb; font-weight: 600; }
.fcard p b { color: #ffffff; font-weight: 800; }

/* fee table */
.fee-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.fee-table th {
  font-family: var(--display);
  font-weight: 400;
  font-size: 0.86rem;
  text-align: left;
  color: var(--ivory);
  padding: 0.55em 0.9em;
  border-bottom: 3px solid rgba(255, 253, 242, 0.35);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.3);
}
.fee-table td {
  padding: 0.5em 0.9em;
  border-bottom: 2px dashed rgba(255, 253, 242, 0.2);
  color: #d4ecdb;
  font-weight: 600;
  font-size: 0.97rem;
}
.fee-table tr:last-child td { border-bottom: none; }
.fee-table td.num { text-align: right; font-weight: 800; color: #ffffff; }
.fee-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  margin-right: 0.5em;
  vertical-align: -1px;
  border: 1.5px solid rgba(0, 0, 0, 0.35);
}

.kv { display: flex; justify-content: space-between; gap: 1rem; padding: 0.42rem 0; border-bottom: 2px dashed rgba(255, 253, 242, 0.18); font-size: 0.96rem; }
.kv:last-child { border-bottom: none; }
.kv span { font-weight: 600; color: #b9dcc3; }
.kv b { font-weight: 800; color: #ffffff; font-variant-numeric: tabular-nums; text-align: right; }

.dcard .kv { border-bottom-color: rgba(34, 29, 20, 0.15); }
.dcard .kv span { color: #6d6349; }
.dcard .kv b { color: var(--ink); }

/* ── big phrase: an embroidered patch ──────────────────── */
.big-phrase {
  max-width: 760px;
  margin: clamp(3rem, 8vh, 5rem) auto;
  text-align: center;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.4rem, 3.8vw, 2.4rem);
  color: var(--ivory);
  line-height: 1.3;
  padding: clamp(1.6rem, 4vw, 2.6rem);
  border: 3px dashed rgba(255, 253, 242, 0.5);
  border-radius: 22px;
  background: rgba(16, 70, 40, 0.45);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
}

/* ── CTA / footer ──────────────────────────────────────── */
.big-cta { text-align: center; padding: 0 1rem clamp(3.2rem, 8vh, 5rem); }

.footer {
  background: linear-gradient(180deg, #6b452a 0%, var(--leather) 45%, var(--leather-2) 100%);
  border-top: 3px solid #2e1c0e;
  color: #e9d9c4;
  padding: 1.4rem clamp(1rem, 4vw, 2.4rem) 2.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  font-weight: 700;
  font-size: 0.93rem;
}
.footer a { text-decoration: underline; }

/* ═══════════════ APP ═══════════════ */
.app-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(1.4rem, 4vh, 2.4rem) clamp(1rem, 4vw, 2.4rem) 3rem;
}

.gauge {
  display: flex;
  gap: clamp(0.5rem, 1.6vw, 1.1rem);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  background: rgba(16, 70, 40, 0.55);
  border: 2.5px dashed rgba(255, 253, 242, 0.4);
  border-radius: 16px;
  padding: 0.7rem 1.2rem;
  margin-bottom: 1.5rem;
  font-variant-numeric: tabular-nums;
}
.gauge-item { display: flex; align-items: baseline; gap: 0.4em; font-weight: 700; font-size: 0.92rem; color: #b9dcc3; white-space: nowrap; }
.gauge-item b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--ivory); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
.gauge-sep { color: rgba(255, 253, 242, 0.3); font-weight: 700; }

.app-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(1.1rem, 2.4vw, 1.8rem);
  align-items: start;
}

.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-top: 1rem; }
.stat-tile {
  background: linear-gradient(165deg, #fffef8, var(--ivory) 55%, var(--ivory-2));
  color: var(--ink);
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  box-shadow: 0 4px 0 var(--bone-edge), 0 8px 14px rgba(0, 0, 0, 0.3);
  padding: 0.55rem 0.5rem 0.65rem;
  text-align: center;
}
.stat-tile b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-variant-numeric: tabular-nums;
}
.stat-tile span { font-size: 0.64rem; font-weight: 800; letter-spacing: 0.05em; opacity: 0.55; text-transform: uppercase; }

.field {
  display: flex;
  align-items: center;
  border: 2.5px solid var(--ink);
  border-radius: 12px;
  background: #fffef8;
  overflow: hidden;
  box-shadow: 0 3px 0 var(--bone-edge);
}
.field input {
  flex: 1; min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--display);
  font-size: 1.2rem;
  color: var(--ink);
  padding: 0.5rem 0.9rem;
  font-variant-numeric: tabular-nums;
}
.field input:focus { outline: none; }
.field .unit { padding: 0 0.9rem; font-weight: 700; font-size: 0.85rem; color: #6d6349; white-space: nowrap; }

.warn {
  border: 2.5px dashed rgba(34, 29, 20, 0.6);
  border-radius: 12px;
  background: #fdf6dd;
  color: #4c4433;
  padding: 0.8rem 1rem;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.55;
  margin: 0.85rem 0;
}
.warn b { color: var(--ink); font-weight: 800; }

.launch-banner {
  border: 2.5px solid var(--ink);
  border-radius: 16px;
  background: linear-gradient(165deg, #fffef8, var(--ivory) 55%, var(--ivory-2));
  color: var(--ink);
  box-shadow: 0 7px 0 var(--bone-edge), 0 16px 26px rgba(0, 0, 0, 0.4);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  text-align: center;
  margin: 0 0 1.4rem;
  animation: slamIn 0.32s var(--snap);
}
@keyframes slamIn {
  0% { opacity: 0; transform: scale(1.12); }
  60% { opacity: 1; transform: scale(0.98); }
  100% { opacity: 1; transform: scale(1); }
}
.launch-banner h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.8vw, 1.8rem);
  margin: 0 0 0.5rem;
}
.launch-banner p { margin: 0 auto; max-width: 56ch; line-height: 1.6; font-weight: 600; color: #4c4433; }
.launch-banner p b { font-family: ui-monospace, monospace; font-size: 0.9em; color: var(--ink); }

.register-empty { color: #b9dcc3; opacity: 0.75; font-weight: 600; }

/* ── stencil: printed straight into the felt ───────────── */
.stencil {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0d4526;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.12), 0 -1px 0 rgba(0, 0, 0, 0.3);
  margin: 0 0 0.4rem;
}
.smallprint {
  color: #9ccba8;
  font-size: 0.88rem;
  font-weight: 700;
  margin: 0 0 1.4rem;
}

/* ── stations along the snake ──────────────────────────── */
.station {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 5vw, 3rem);
}
.station-left { padding-right: clamp(2rem, 14vw, 12rem); }
.station-right { padding-left: clamp(2rem, 14vw, 12rem); text-align: right; }
.station-right .smallprint, .station-right .stencil { text-align: right; }
.station-right .fee-wrap { margin-left: auto; }
.station .tilt-a { transform: rotate(-0.7deg); }
.station .tilt-b { transform: rotate(0.6deg); }

/* ── the trail: laid tiles connecting stations ─────────── */
.trail {
  display: flex;
  gap: 12px;
  width: max-content;
  margin: clamp(1.6rem, 4vh, 3rem) 0 clamp(1.6rem, 4vh, 3rem) 16%;
  transform: rotate(20deg);
}
.trail-left {
  margin-left: auto;
  margin-right: 16%;
  transform: rotate(-20deg);
}
.trail i {
  width: 46px; height: 24px;
  border-radius: 5px;
  background:
    radial-gradient(circle at 26% 50%, rgba(34, 29, 20, 0.85) 0 2.6px, transparent 3.4px),
    radial-gradient(circle at 74% 50%, rgba(34, 29, 20, 0.85) 0 2.6px, transparent 3.4px),
    linear-gradient(90deg, var(--ivory) 0 47%, rgba(34, 29, 20, 0.8) 47% 53%, var(--ivory-2) 53% 100%);
  border: 2px solid var(--ink);
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35);
}
.trail i:nth-child(2n) { transform: rotate(5deg) translateY(3px); }
.trail i:nth-child(3n) { transform: rotate(-4deg) translateY(-2px); }

/* ── the fan: your hand of moves ───────────────────────── */
.fan {
  position: relative;
  height: 500px;
  max-width: 980px;
  margin: 1rem 0 0 clamp(0rem, 4vw, 3rem);
}
.fan .dcard {
  position: absolute;
  left: 50%;
  bottom: 24px;
  width: min(272px, 78vw);
  transform-origin: 50% 190%;
  transform: translateX(-50%) rotate(calc(var(--fr) * 1deg + var(--bump, 0) * 0.35deg));
  transition: transform 0.3s var(--snap), box-shadow 0.3s var(--snap);
}
.fan .dcard:hover {
  transform: translateX(-50%) rotate(calc(var(--fr) * 1deg)) translateY(-30px);
  z-index: 6;
  box-shadow: 0 12px 0 var(--bone-edge), 0 26px 34px rgba(0, 0, 0, 0.45), inset 0 2px 0 #fff;
}
.fan .dcard.shy { transform: translateX(-50%) rotate(calc((var(--fr) + var(--shy, 0)) * 1deg)); }

/* ── the score sheet under a brass clip ────────────────── */
.scoresheet {
  position: relative;
  display: inline-block;
  background: var(--paper);
  color: var(--ink);
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45);
  padding: 1.4rem 1.5rem 1.2rem 1.9rem;
  transform: rotate(-1.6deg);
  max-width: 480px;
  text-align: left;
}
.scoresheet::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0.85rem;
  width: 2px;
  background: var(--paper-line);
  opacity: 0.7;
}
.scoresheet::after {
  content: "";
  position: absolute;
  top: -14px; left: 50%;
  transform: translateX(-50%) rotate(1deg);
  width: 92px; height: 26px;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, #f0cf8b 0%, var(--brass) 55%, #96671e 100%);
  border: 2px solid rgba(34, 29, 20, 0.7);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.35);
}
.scoresheet .fee-table th { color: var(--ink); border-bottom-color: rgba(34, 29, 20, 0.5); text-shadow: none; }
.scoresheet .fee-table td { color: #4c4433; border-bottom-color: rgba(34, 29, 20, 0.14); }
.scoresheet .fee-table td.num { color: var(--ink); }
.scoresheet h3 { font-family: var(--display); font-weight: 400; font-size: 1.05rem; margin: 0 0 0.4rem; }

/* ── the finale: the chain knocks the button crooked ───── */
.finale {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  padding: clamp(2.4rem, 7vh, 4.4rem) 1rem 0.8rem;
}
.gagline { display: flex; align-items: flex-end; gap: 7px; }
.gagline i {
  width: 22px; height: 48px;
  border-radius: 4px;
  background: linear-gradient(168deg, #fffef8 0%, var(--ivory) 55%, var(--ivory-2) 100%);
  border: 2.5px solid var(--ink);
  box-shadow: inset 0 -5px 0 var(--bone-edge);
  transform-origin: 100% 100%;
}
.finale.go .gagline i { animation: gagTip 0.5s var(--snap) forwards; }
.finale.go .gagline i:nth-child(1) { animation-delay: 0s; }
.finale.go .gagline i:nth-child(2) { animation-delay: 0.12s; }
.finale.go .gagline i:nth-child(3) { animation-delay: 0.24s; }
.finale.go .gagline i:nth-child(4) { animation-delay: 0.36s; }
.finale.go .gagline i:nth-child(5) { animation-delay: 0.48s; }
@keyframes gagTip {
  0% { transform: rotate(0); }
  100% { transform: rotate(76deg); }
}
#finalCta { transition: transform 0.4s var(--snap) 0.62s; }
.finale.go #finalCta { transform: rotate(-4deg) translate(7px, 3px); }
.finale.go #finalCta:hover { transform: rotate(-4deg) translate(7px, 3px); }
.gag-caption {
  text-align: center;
  color: #9ccba8;
  font-weight: 700;
  font-size: 0.92rem;
  margin: 0.6rem 0 0;
  opacity: 0;
  transition: opacity 0.5s ease 1.15s;
}
.finale.go + .gag-caption { opacity: 1; }

/* ── reveal ────────────────────────────────────────────── */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.5s var(--snap), transform 0.5s var(--snap);
  transition-delay: calc(var(--rvi, 0) * 80ms);
}
.rv.rv-in { opacity: 1; transform: none; }

/* tile cards do not fade: they get laid down in a chain */
.lay.rv {
  transform: perspective(760px) rotateX(-56deg);
  transform-origin: 50% 100%;
  transition: none;
}
.lay.rv.rv-in {
  animation: layDown 0.55s var(--snap) both;
  animation-delay: calc(var(--rvi, 0) * 110ms);
}
@keyframes layDown {
  0% { opacity: 0.35; transform: perspective(760px) rotateX(-56deg); }
  72% { opacity: 1; transform: perspective(760px) rotateX(7deg); }
  100% { opacity: 1; transform: none; }
}

/* ── responsive ────────────────────────────────────────── */
@media (max-width: 960px) {
  .cards4 { grid-template-columns: 1fr 1fr; }
  .cards3 { grid-template-columns: 1fr; }
  .cards2 { grid-template-columns: 1fr; }
  .app-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .fan { height: auto; margin-left: 0; display: grid; gap: 1rem; }
  .fan .dcard { position: static; transform: none !important; width: auto; }
  .station-left, .station-right { padding-left: clamp(1.2rem, 5vw, 3rem); padding-right: clamp(1.2rem, 5vw, 3rem); text-align: left; }
  .station-right .smallprint, .station-right .stencil { text-align: left; }
  .trail, .trail-left { margin: 1.6rem auto; transform: rotate(0); }
}
@media (max-width: 640px) {
  .rim-link { display: none; }
  .cards4 { grid-template-columns: 1fr; }
  .stat-tiles { grid-template-columns: 1fr 1fr; }
  .scorepad { position: static; margin: 0.6rem auto 0; transform: rotate(0); width: max-content; }
  .gauge-item { font-size: 0.8rem; }
  .gauge-item b { font-size: 1rem; }
}

/* ── reduced motion ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wordmark:hover .pip { animation: none; }
  .launch-banner { animation: none; }
  .slam .lt.tip { animation: none; }
  .tipwave { animation: none; }
  .rv { opacity: 1; transform: none; transition: none; }
  .lay.rv, .lay.rv.rv-in { transform: none; animation: none; opacity: 1; }
  .slam, .dcard { transition: none; }
  .slam:hover { transform: none; }
  .fan .dcard { transition: none; }
  .finale.go .gagline i { animation: none; transform: rotate(76deg); }
  #finalCta { transition: none; }
}