/* The Person Who Matters Most On Internet
 *
 * The page is a high score table, so it is built like one: an arcade marquee
 * rather than a donation page. Flat blocks of saturated colour, heavy ink
 * outlines, hard offset shadows with no blur, and condensed poster type for
 * every number. Nothing here is subtle on purpose - a leaderboard should be
 * legible from across the room.
 */

:root {
  /* A comic panel lit by an arcade cabinet. One committed world: the page is
     always dark, so every colour is painted rather than inherited.

     --ink is the text colour and --outline is what draws the panels. On the
     old cream board those were the same near-black; here they are opposites,
     so anything that draws a border or a hard shadow must reach for
     --outline, and anything that sets type reaches for --ink. */
  --paper:      #0B0716;
  --paper-warm: #140E24;
  --card:       #140E24;
  --outline:    #07050C;
  --ink:        #FFF6EC;
  --ink-2:      #9A8FB5;
  --ink-3:      #6A5F85;

  --red:        #FF2D95;
  --red-soft:   rgba(255,45,149,.16);
  --blue:       #00E5FF;
  --blue-soft:  rgba(0,229,255,.14);
  --gold:       #FFE500;
  --gold-soft:  rgba(255,229,0,.15);
  --mint:       #3DFFA8;
  --mint-soft:  rgba(61,255,168,.14);

  --display: 'Bungee', Impact, 'Arial Black', sans-serif;
  --body:    'Chakra Petch', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --mono:    'DM Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --edge:   3px solid var(--outline);
  --pop:    5px 5px 0 var(--outline);
  --pop-sm: 3px 3px 0 var(--outline);
  --pop-lg: 8px 8px 0 var(--outline);
}

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

html, body { margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Ben-Day dots: the halftone screen of cheap comic printing, in the two inks
   the page is printed in. It drifts on a stepped loop, so it reads as a
   physical screen shifting rather than a CSS gradient sliding. */
body::before {
  content: "";
  position: fixed;
  inset: -50px;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(255, 45, 149, .5) 1px, transparent 1.6px),
    radial-gradient(circle at 1px 1px, rgba(0, 229, 255, .32) 1px, transparent 1.6px);
  background-size: 7px 7px, 7px 7px;
  background-position: 0 0, 3px 3px;
  animation: dotdrift 24s steps(6) infinite;
}

/* CRT scanlines over everything, with one slow band travelling down. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .3;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.32) 0 1px, transparent 1px 3px);
}
body > * { position: relative; z-index: 1; }

a { color: var(--blue); text-decoration: none; font-weight: 600; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

.display { font-family: var(--display); font-weight: 400; letter-spacing: .002em; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

@keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@keyframes driftx { from { transform: translateX(0) } to { transform: translateX(-50%) } }
@keyframes spin { to { transform: rotate(360deg) } }
@keyframes dotdrift {
  0%   { transform: translate(0, 0) }
  50%  { transform: translate(-7px, -7px) }
  100% { transform: translate(0, 0) }
}
@keyframes aberrate {
  0%, 100% { text-shadow: -3px 0 var(--red), 3px 0 var(--blue) }
  50%      { text-shadow: -5px 1px var(--red), 4px -1px var(--blue) }
}
@keyframes pop-in { from { transform: scale(.94); opacity: 0 } to { transform: scale(1); opacity: 1 } }
/* Panels arrive in three visible frames rather than sliding - stop-motion
   timing is what makes the page read as drawn instead of rendered. */
@keyframes snap { from { opacity: 0; transform: translateY(10px) } to { opacity: 1 } }
@keyframes glitch {
  0%, 92%, 100% { transform: rotate(-.3deg) translate(0, 0); box-shadow: 6px 6px 0 var(--blue) }
  93% { transform: rotate(-.3deg) translate(-4px, 1px); box-shadow: 9px 5px 0 var(--blue), -4px 0 0 var(--gold) }
  95% { transform: rotate(-.3deg) translate(3px, -1px);  box-shadow: 3px 7px 0 var(--blue) }
  97% { transform: rotate(-.3deg) translate(-2px, 0);    box-shadow: 8px 6px 0 var(--blue) }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* The card stops turning, so the back has to stay reachable by hand. */
  .champion-flip { transition: transform .3s ease !important; }
  .champion-stage3d:hover .champion-flip,
  .champion-stage3d:focus-within .champion-flip { transform: rotateY(180deg); }
}

/* ---------- header ---------- */

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: 14px 28px;
  position: sticky; top: 0; z-index: 30;
  background: var(--gold); color: var(--outline);
  border-bottom: var(--edge); box-shadow: 0 5px 0 var(--red);
}
.site-header .wordmark-core { color: var(--outline); }
.site-header .wordmark-frame { color: rgba(7, 5, 12, .62); }

.brand { display: flex; align-items: center; gap: 11px; color: inherit; font-weight: inherit; }
.brand:hover { text-decoration: none; color: inherit; }
.brand:focus-visible { outline-offset: 4px; }

.brand-crown { flex: none; width: 24px; height: 24px; display: block; }

/* Six words is too many for one line, so the mark stacks: the stress falls on
   "Matters Most" and the framing words sit above and below in small caps. */
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark-frame {
  font-family: var(--mono);
  font-size: 8px; font-weight: 500; letter-spacing: .17em;
  text-transform: uppercase; color: var(--ink-3); line-height: 1.4;
}
.wordmark-frame--end { text-align: right; }
.wordmark-core {
  font-family: var(--display);
  font-size: 23px; line-height: .96; letter-spacing: .01em;
  color: var(--ink); white-space: nowrap; text-transform: uppercase;
}

.header-stats {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em;
}
.stat-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border: 2px solid var(--outline); border-radius: 0;
  background: var(--ink); color: var(--outline); white-space: nowrap;
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.stat-chip--live { background: var(--ink); }
.stat-chip--live .live-dot { background: var(--mint); }
.stat-chip strong { font-weight: 500; }
.live-dot {
  width: 7px; height: 7px; border-radius: 0;
  border-radius: 50%; background: var(--mint); animation: blink 1.6s ease-in-out infinite;
}


.ticker {
  overflow: hidden; padding: 8px 0;
  background: var(--outline); border-bottom: var(--edge);
}
.ticker-track {
  display: flex; width: 200%;
  animation: driftx 40s linear infinite;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gold); white-space: nowrap;
}
.ticker-track span { padding-right: 40px; }

/* ---------- hero ---------- */

.hero {
  max-width: 1180px; margin: 0 auto;
  padding: 52px 28px 26px;
  display: flex; flex-wrap: wrap; gap: 40px;
  align-items: center; justify-content: space-between;
}
.hero-copy { flex: 1 1 500px; min-width: 0; }

/* ---------- the strip ---------- */

.strip {
  max-width: 1180px; margin: 0 auto; padding: 0 28px 8px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;
}
@media (min-width: 720px) { .strip { grid-template-columns: repeat(4, 1fr); } }
.strip-cell {
  background: var(--card); border: var(--edge); box-shadow: 4px 4px 0 var(--outline);
  padding: 11px 14px;
}
.strip-cell dt {
  font-family: var(--body); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.strip-cell dd {
  margin: 3px 0 0; font-family: var(--display); font-size: 21px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.strip-cell:nth-child(2) dd { color: var(--gold); }
.strip-cell:nth-child(3) dd { color: var(--blue); }

/* ---------- the champion, built as a collectible card ---------- */

.champion-stage3d {
  flex: 0 0 300px; align-self: center; perspective: 1400px;
  height: 430px;
}
.champion-flip { height: 100%; }
.champion-tilt { height: 100%; transition: transform .18s ease-out; }
.champion-flip {
  position: relative; transform-style: preserve-3d;
  animation: cardturn 9s cubic-bezier(.5, 0, .2, 1) infinite 2.4s;
}
/* The card is a physical object being turned, so this one animation is smooth
   while everything else on the page is stepped. It rests, turns once, rests
   again - the pause is what makes the turn read as deliberate rather than idle. */
@keyframes cardturn {
  0%, 58% { transform: rotateY(0deg) }
  100%    { transform: rotateY(360deg) }
}
.champion-stage3d:hover .champion-flip,
.champion-stage3d:focus-within .champion-flip { animation-play-state: paused; }

.champion, .champion-back {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: var(--card); border: var(--edge); border-radius: 0;
  box-shadow: var(--pop-lg); overflow: hidden;
  display: flex; flex-direction: column;
}
.champion-back {
  position: absolute; inset: 0; transform: rotateY(180deg);
  display: flex; flex-direction: column;
}
.champion-back-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; border-bottom: var(--edge); background: var(--blue);
  color: var(--outline); font-family: var(--display); font-size: 11px;
  text-transform: uppercase;
}
.champion-back-body { padding: 15px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.back-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  border-bottom: 2px dashed var(--ink-3); padding-bottom: 7px;
}
.back-row dt {
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 700;
}
.back-row dd { margin: 0; font-family: var(--display); font-size: 14px; color: var(--ink); }
#back-total { color: var(--gold); }
#back-since { color: var(--blue); }
.back-quote { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 0; flex: 1; }
.back-bars {
  height: 26px;
  background: repeating-linear-gradient(90deg,
    var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 9px,
    var(--ink) 9px 12px, transparent 12px 14px);
  opacity: .8;
}
.back-mark {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-3); text-align: center;
}
.champion-stage {
  background: var(--red); border-bottom: var(--edge);
  flex: 1; min-height: 0; padding: 18px 20px;
  display: flex; align-items: center; justify-content: center;
  /* Faint rays behind the figure, like a marquee light box. */
  background-image: repeating-conic-gradient(
    from 0deg at 50% 100%,
    rgba(23, 18, 13, .05) 0deg 9deg, transparent 9deg 18deg);
}
.champion-art { width: 120px; height: auto; display: block; }
.champion--vacant .champion-stage { background-color: var(--paper-warm); }
/* An unclaimed throne: the figure fades back, the crown becomes an outline. */
.champion-art .sil { fill: var(--outline); }
.champion--vacant .champion-art .sil { fill: #C6BCAE; }

/* Both crowns are drawn; CSS picks which one shows. This only works because the
   figure is inlined rather than cloned through <use>, whose shadow tree is out
   of reach of document styles. */
#champion-crown-empty { display: none; }
.champion--vacant #champion-crown { display: none; }
.champion--vacant #champion-crown-empty { display: block; }

.champion-body { padding: 16px 20px 20px; background: var(--ink); }
.champion-label {
  margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: #6B5F52;
}
.champion-name {
  margin: 5px 0 0; font-size: 27px; line-height: 1.02;
  text-transform: uppercase; overflow-wrap: anywhere; color: var(--outline);
}
.champion-amount {
  margin: 3px 0 0; font-size: 38px; line-height: 1; color: var(--outline);
  font-variant-numeric: tabular-nums;
}
/* The top seat is the most-looked-at spot on the site, so it gets the handle
   spelled out rather than the bare icon the board rows have room for. */
.champion-social { margin: 10px 0 0; }
.champion-handle {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 11px 6px 8px;
  background: var(--paper-warm); border: 2px solid var(--outline); border-radius: 0;
  box-shadow: 2px 2px 0 var(--outline);
  font-family: var(--mono); font-size: 12px; font-weight: 400;
  color: var(--ink); max-width: 100%;
  transition: transform 100ms ease, background 100ms ease;
}
.champion-handle:hover { background: var(--gold); text-decoration: none; }
.champion-handle:active { transform: translate(2px, 2px); box-shadow: none; }
.champion-handle svg { width: 15px; height: 15px; flex: none; }
.champion-handle span {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

.champion-quote {
  margin: 11px 0 0; padding-top: 11px; border-top: 2px dashed var(--edge);
  border-top-color: #E5DCCC;
  font-size: 14px; line-height: 1.5; color: var(--ink-2);
}
.champion-quote::before { content: "\201C"; color: var(--gold); font-family: var(--display); font-size: 17px; margin-right: 2px; }
.champion-quote::after { content: "\201D"; color: var(--gold); font-family: var(--display); font-size: 17px; }
.champion-meta {
  margin: 10px 0 0; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3);
}
.eyebrow {
  display: inline-block;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--outline); font-weight: 700;
  background: var(--blue); border: var(--edge); border-radius: 0;
  padding: 5px 13px; box-shadow: var(--pop-sm); margin-bottom: 20px;
  transform: rotate(-1.2deg);
}
.hero h1 {
  margin: 0; max-width: 15ch;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(44px, 8.5vw, 92px);
  line-height: .9; letter-spacing: -.005em; text-transform: uppercase;
  text-wrap: balance;
  /* Misregistered ink: the plate for one colour landed a few thousandths off,
     the way cheap comic printing does. Stepped rather than eased, so it reads
     as a printing fault and not as a CSS glow. */
  text-shadow: -3px 0 var(--red), 3px 0 var(--blue);
  animation: aberrate 3.4s steps(2) infinite;
}
.hero h1 em {
  font-style: normal; color: var(--gold);
  /* A marker stroke through the words that carry the promise. Sized and placed
     explicitly so it hugs the text instead of running to the line box edge. */
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-size: 100% .26em;
  background-position: 0 78%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 .04em;
}
.hero-sub {
  margin: 20px 0 0; max-width: 46ch;
  font-size: 17.5px; line-height: 1.55; color: var(--ink-2);
  text-wrap: pretty;
}
.hero-sub strong { color: var(--ink); font-weight: 700; }

/* The single most motivating number on the page: what it costs, right now. */
.challenge {
  margin: 30px 0 0;
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 16px;
  padding: 14px 20px;
  background: var(--card); border: var(--edge); border-radius: 0;
  box-shadow: var(--pop);
}
.challenge-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
}
.challenge-figure {
  font-family: var(--display); font-size: 34px; line-height: 1; color: var(--blue);
}
.challenge-tail { font-size: 14.5px; color: var(--ink-2); }

/* ---------- layout ---------- */

.layout {
  max-width: 1180px; margin: 0 auto;
  padding: 22px 28px 88px;
  display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start;
}

.board {
  flex: 1 1 560px; min-width: 0;
  background: var(--card); border: var(--edge); border-radius: 0;
  box-shadow: var(--pop-lg); overflow: hidden;
}

.board-title {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  padding: 16px 20px; background: var(--outline); color: var(--gold);
}
.board-title h2 {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: 24px; letter-spacing: .04em; text-transform: uppercase;
}
.board-title .sub {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: #C9BCAA;
}

.seats { padding: 12px; display: flex; flex-direction: column; gap: 10px; }

.seat {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  grid-template-areas:
    "rank name  amount"
    "rank quote quote";
  gap: 4px 14px;
  align-items: center;
  padding: 13px 16px;
  background: var(--card);
  border: var(--edge); border-radius: 0;
  box-shadow: var(--pop);
  animation: snap 280ms steps(3) both;
  transition: box-shadow 100ms steps(2), transform 100ms steps(2);
}
/* Every panel sits a fraction off square, alternating, so the board reads as a
   page of frames rather than a stack of divs. */
.seat:nth-child(odd)  { transform: rotate(-.3deg); }
.seat:nth-child(even) { transform: rotate(.28deg); }
.seat:hover { box-shadow: 8px 8px 0 var(--red), -3px -3px 0 var(--blue); }

.seat--1 {
  background: var(--red); border-color: var(--outline);
  animation: snap 280ms steps(3) both, glitch 6s steps(2) infinite 1.4s;
}
.seat--1:hover { box-shadow: 9px 9px 0 var(--blue), -3px -3px 0 var(--gold); }
/* Black type on magenta - the crown panel is the one place the page inverts. */
.seat--1 .seat-name, .seat--1 .seat-amount, .seat--1 .rank { color: var(--outline); }
.seat--1 .seat-quote, .seat--1 .seat-meta { color: var(--outline); }
.seat--1 .seat-quote::before, .seat--1 .seat-quote::after { color: var(--outline); }
.seat--1 .take { background: var(--outline); color: var(--ink); }
.seat--1 .social-link { color: var(--outline); border-color: var(--outline); }
.seat--empty {
  background: transparent;
  border-style: dashed; border-color: var(--ink-3); box-shadow: none;
  animation: none;
}
.seat--empty:hover { box-shadow: none; }

.rank {
  grid-area: rank;
  width: 42px; display: grid; place-content: center;
  font-family: var(--display); font-size: 27px; line-height: 1;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.seat--empty .rank { color: rgba(154, 143, 181, .3); }

.seat-name {
  grid-area: name;
  display: flex; align-items: center; gap: 9px; min-width: 0;
  font-family: var(--display); font-size: 23px; line-height: 1.1;
  text-transform: uppercase; letter-spacing: .01em;
}
.seat-name > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.seat--1 .seat-name { font-size: 28px; }
.seat--empty .seat-name {
  font-size: 18px; color: var(--ink-3); letter-spacing: .06em;
}

.social-link {
  flex: none; display: inline-grid; place-content: center;
  width: 26px; height: 26px; border-radius: 0;
  color: var(--ink); background: var(--card);
  border: 2px solid var(--outline);
  transition: transform 120ms ease, background 120ms ease;
}
.social-link svg { width: 14px; height: 14px; display: block; }
.social-link:hover { background: var(--gold); transform: translateY(-1px); text-decoration: none; }

.seat-amount {
  grid-area: amount;
  font-family: var(--display); font-size: 26px; line-height: 1;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.seat--1 .seat-amount { font-size: 32px; color: var(--outline); }
.seat--empty .seat-amount { color: var(--ink-3); font-size: 20px; }

/* The line under the name - the reason to read the board rather than scan it. */
.seat-quote {
  grid-area: quote;
  margin: 4px 0 0;
  font-size: 14.5px; line-height: 1.5; color: var(--ink-2);
  max-width: 62ch;
}
.seat-quote::before {
  content: "\201C";
  font-family: var(--display); font-size: 20px; color: var(--gold);
  margin-right: 3px; vertical-align: -3px;
}
.seat-quote::after { content: "\201D"; color: var(--gold); font-family: var(--display); }
.seat--1 .seat-quote { font-size: 16px; }

.seat-meta {
  grid-area: quote;
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3);
  margin: 3px 0 0;
}

.seat-actions { grid-area: amount; display: flex; justify-content: flex-end; }

.take {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 500;
  padding: 8px 12px; margin-left: 12px;
  background: var(--card); color: var(--ink);
  border: 2px solid var(--outline); border-radius: 0;
  transition: background 80ms steps(2), color 80ms steps(2);
  cursor: pointer; box-shadow: 2px 2px 0 var(--outline);
  transition: transform 100ms ease, background 100ms ease;
  white-space: nowrap;
}
.take:hover { background: var(--gold); }
.take:active { transform: translate(2px, 2px); box-shadow: none; }

.amount-cell { display: flex; align-items: center; justify-content: flex-end; gap: 0; }

.board-foot {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
  padding: 14px 20px; border-top: var(--edge);
  background: var(--paper-warm);
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2);
}

.board-empty {
  margin: 0 12px 12px; padding: 14px 16px;
  background: var(--paper-warm); border: 2px dashed var(--ink-3); border-radius: 0;
  font-size: 14px; line-height: 1.6; color: var(--ink-2); text-align: center;
}

/* ---------- claim panel ---------- */

.panel {
  flex: 1 1 340px; max-width: 388px; position: sticky; top: 88px;
  background: var(--card); border: var(--edge); border-radius: 0;
  box-shadow: var(--pop-lg); overflow: hidden;
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 15px 20px; background: var(--red); color: var(--card);
  border-bottom: var(--edge);
}
.panel-head .title {
  font-family: var(--display); font-size: 21px; letter-spacing: .04em;
  text-transform: uppercase;
}
.panel-head .status {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; opacity: .92;
}
.panel-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; }

.field { display: flex; flex-direction: column; gap: 6px; }
.field > span {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
}
.field .hint {
  font-family: var(--body); font-size: 12.5px; letter-spacing: 0;
  text-transform: none; color: var(--ink-3); line-height: 1.5;
}
.opt {
  font-family: var(--mono); font-size: 9px; letter-spacing: .1em;
  padding: 2px 6px; margin-left: 6px; border-radius: 0;
  background: var(--paper-warm); border: 1.5px solid var(--ink-3); color: var(--ink-3);
}

input[type='text'], input[type='email'], select, textarea {
  font-family: var(--body); font-size: 15px;
  width: 100%; padding: 11px 12px;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--outline); border-radius: 0;
  outline: none;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }

.amount-row {
  display: flex; align-items: stretch;
  background: var(--paper); border: 2px solid var(--outline); border-radius: 0;
  overflow: hidden;
}
.amount-row select {
  width: auto; border: 0; border-right: 2px solid var(--outline); border-radius: 0;
  font-family: var(--mono); font-size: 13px; padding: 0 8px 0 12px;
  background: var(--gold); cursor: pointer;
}
.amount-row input {
  flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent;
  font-family: var(--display); font-size: 30px; letter-spacing: .01em;
  padding: 8px 12px; font-variant-numeric: tabular-nums;
}
.amount-row:focus-within { outline: 3px solid var(--blue); outline-offset: 2px; }

/* Shown only when the amount is large enough that the payer's choice of method
   starts to matter. Amber rather than red: it is guidance, not an error. */
.method-note {
  background: var(--gold-soft); border: 2px solid var(--gold);
  border-radius: 0; padding: 8px 10px; color: var(--ink) !important;
}

.presets { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  font-family: var(--mono); font-size: 11px; letter-spacing: .05em;
  text-transform: uppercase; padding: 8px 11px;
  background: var(--paper-warm); color: var(--ink);
  border: 2px solid var(--outline); border-radius: 0;
  cursor: pointer; box-shadow: 2px 2px 0 var(--outline);
  transition: transform 100ms ease, background 100ms ease;
}
.chip:hover { background: var(--gold); }
.chip:active { transform: translate(2px, 2px); box-shadow: none; }

.preview {
  background: var(--blue-soft); border: 2px solid var(--outline);
  border-radius: 0; padding: 15px 16px;
}
.preview .label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-2);
}
.preview-row { display: flex; align-items: baseline; gap: 12px; margin-top: 4px; }
.preview-rank {
  font-family: var(--display); font-size: 52px; line-height: 1; color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.preview-note { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.rule { height: 2px; background: var(--ink); margin: 13px 0; opacity: .18; }
.preview-line {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; color: var(--ink-2);
}
.preview-line + .preview-line { margin-top: 6px; }
.preview-line strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.consent {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 12.5px; line-height: 1.5; color: var(--ink-2);
}
.consent input {
  flex: none; margin-top: 1px; width: 18px; height: 18px;
  accent-color: var(--red);
}

.cta {
  font-family: var(--display); font-size: 19px; letter-spacing: .04em;
  text-transform: uppercase; padding: 15px;
  background: var(--red); color: var(--ink);
  border: var(--edge); border-radius: 0;
  cursor: pointer; box-shadow: var(--pop);
  transition: transform 80ms steps(2), box-shadow 80ms steps(2);
}
.cta:hover:not(:disabled) { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--outline); }
.cta:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--outline); }
.cta:disabled { background: var(--ink-3); cursor: not-allowed; box-shadow: var(--pop-sm); }

.cta--quiet {
  background: var(--card); color: var(--ink);
  font-size: 14px; padding: 11px; box-shadow: var(--pop-sm);
}
.cta--quiet:hover:not(:disabled) { background: var(--paper-warm); }

.spinner {
  display: inline-block; width: 13px; height: 13px; margin-right: 8px;
  border: 2.5px solid rgba(255, 255, 255, .35); border-top-color: #fff;
  border-radius: 0; animation: spin 700ms linear infinite; vertical-align: -1px;
}

.fine {
  font-size: 11.5px; line-height: 1.6; color: var(--ink-3); text-align: center;
}

.form-error {
  background: var(--red-soft); border: 2px solid var(--red);
  border-radius: 0; padding: 11px 13px;
  font-size: 13px; line-height: 1.5; color: #8C1A11;
}
.field-error { font-size: 12px; color: var(--red); font-weight: 600; }
input[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--red); }

/* ---------- the winner screen ---------- */

.receipt {
  background: var(--gold); border: var(--edge); border-radius: 0;
  padding: 20px; text-align: center; box-shadow: var(--pop);
}
.receipt .label {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
}
.receipt-rank {
  font-family: var(--display); font-size: 68px; line-height: .92; margin-top: 8px;
  font-variant-numeric: tabular-nums;
}
.receipt-name {
  font-family: var(--display); font-size: 24px; text-transform: uppercase;
  line-height: 1.1; overflow-wrap: anywhere;
}
.receipt-blurb { font-size: 13.5px; line-height: 1.55; margin-top: 10px; color: var(--ink); }
.receipt-code {
  margin-top: 12px; font-family: var(--mono); font-size: 11.5px;
  letter-spacing: .06em; color: var(--ink-2);
}

/* The quote composer: the second half of what someone paid for. */
.compose {
  background: var(--card); border: var(--edge); border-radius: 0;
  padding: 16px; box-shadow: var(--pop-sm);
}
.compose-q {
  font-family: var(--display); font-size: 20px; line-height: 1.1;
  text-transform: uppercase; margin: 0 0 4px;
}
.compose-sub { font-size: 13px; color: var(--ink-2); margin: 0 0 11px; line-height: 1.5; }
.compose textarea {
  min-height: 84px; resize: vertical; font-size: 15px; line-height: 1.5;
}
.compose-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 9px;
}
.counter {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.counter--over { color: var(--red); font-weight: 500; }
.compose .cta { font-size: 14px; padding: 10px 16px; box-shadow: var(--pop-sm); }

.saved-flash {
  font-family: var(--mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mint);
}

/* ---------- what you are paying for ---------- */

.explain { max-width: 1180px; margin: 0 auto; padding: 0 28px 80px; }
.explain-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
}
.explain-card {
  background: var(--card); border: var(--edge); border-radius: 0;
  padding: 20px; box-shadow: var(--pop);
}
.explain-card--warn { background: var(--gold-soft); }
.explain-card h3 {
  margin: 0 0 12px; font-size: 19px; letter-spacing: .03em; text-transform: uppercase;
}
.explain-card ul { margin: 0; padding-left: 18px; }
.explain-card li {
  font-size: 14.5px; line-height: 1.5; color: var(--ink-2); margin-bottom: 8px;
}
.explain-card li:last-child { margin-bottom: 0; }
.explain-card strong { color: var(--ink); font-weight: 700; }

/* ---------- footer + documents ---------- */

.site-footer {
  border-top: var(--edge); background: var(--outline); color: var(--ink-2);
  padding: 26px 28px;
  display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: space-between;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer a { color: var(--gold); font-weight: 500; }

.doc { max-width: 720px; margin: 0 auto; padding: 48px 28px 88px; }
.doc h1 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: clamp(32px, 6vw, 52px); line-height: .95; margin: 0 0 8px;
}
.doc .updated {
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 32px;
}
.doc h2 {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 20px; letter-spacing: .03em; margin: 32px 0 8px;
}
.doc p, .doc li { color: var(--ink-2); line-height: 1.7; font-size: 15.5px; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 7px; }
.doc strong { color: var(--ink); }
.doc code {
  font-family: var(--mono); font-size: .88em;
  background: var(--paper-warm); border: 1.5px solid var(--ink-3);
  border-radius: 0; padding: 1px 5px;
}
.doc .back {
  display: inline-block; margin-bottom: 24px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .panel { position: static; max-width: none; }
}

@media (max-width: 620px) {
  .site-header { padding: 11px 16px; flex-wrap: wrap; gap: 10px; }
  .brand-mark { width: 29px; height: 29px; border-radius: 0; }
  .brand-mark svg { width: 18px; height: 18px; }
  .wordmark-core { font-size: 19px; }
  .wordmark-frame { font-size: 7px; }
  .header-stats { font-size: 10.5px; gap: 6px; }
  
  .hero { padding: 32px 16px 18px; gap: 26px; }
  .champion { flex: 1 1 100%; box-shadow: var(--pop); }
  .champion-art { width: 108px; }
  .champion-name { font-size: 23px; }
  .champion-amount { font-size: 31px; }
  .hero-sub { font-size: 16px; }
  .challenge { padding: 12px 15px; }
  .challenge-figure { font-size: 27px; }

  .layout { padding: 16px 16px 56px; gap: 20px; }
  .board { box-shadow: var(--pop); }
  .panel { box-shadow: var(--pop); }
  .seats { padding: 9px; gap: 8px; }

  /* The button drops to its own row rather than squeezing the score. */
  .seat {
    grid-template-columns: 38px minmax(0, 1fr);
    grid-template-areas:
      "rank name"
      "rank amount"
      "quote quote";
    gap: 3px 11px;
    padding: 12px 13px;
  }
  .rank { width: 36px; height: 36px; font-size: 18px; border-radius: 0; }
  .seat-name { font-size: 19px; }
  .seat--1 .seat-name { font-size: 22px; }
  .seat-name > span:first-child { white-space: normal; overflow-wrap: anywhere; }
  .seat-amount, .seat-actions { justify-content: flex-start; }
  .seat-amount { font-size: 21px; }
  .seat--1 .seat-amount { font-size: 25px; }
  .seat-quote, .seat-meta { grid-area: quote; margin-top: 6px; }
  .amount-cell { justify-content: flex-start; }
  .take { margin-left: 10px; }
  .social-link { width: 23px; height: 23px; }
  .social-link svg { width: 12px; height: 12px; }

  .explain { padding: 0 16px 52px; }
  .doc { padding: 30px 16px 56px; }
  .site-footer { padding: 20px 16px; }
}

/* The crown card's footer is printed on paper, so everything on it takes the
   dark ink - these three sit outside the rules above and would otherwise keep
   the cream they use everywhere else on the page. */
.champion-body .champion-quote { color: #3A322B; }
.champion-body .champion-meta  { color: #6B5F52; }
.champion-body .champion-social a { color: #7A2E6E; }

/* The crown badge, pinned to the corner of the top seat. Only one panel on the
   board ever carries it, which is what makes it mean anything. */
.seat--1 { position: relative; }
.seat--1::after {
  content: "#1 · CROWN";
  position: absolute; top: -13px; right: -8px; z-index: 3;
  background: var(--gold); color: var(--outline); border: var(--edge);
  font-family: var(--display); font-size: 10.5px; padding: 3px 9px;
  transform: rotate(7deg); box-shadow: 3px 3px 0 var(--outline);
  pointer-events: none;
}

/* ---------- the seat ticket ----------
   The claim panel is printed on paper, the way the design draws it: a black
   header, white fields, an acid currency tab, and a magenta action. It is the
   only light surface on the page, which is what makes it read as a ticket
   rather than another panel. */

.panel {
  background: var(--ink);
  box-shadow: 8px 8px 0 var(--blue);
  transform: rotate(.4deg);
}
.panel-head {
  background: var(--outline); color: var(--gold);
}
.panel-head .status { color: var(--blue); }

.panel-body .field > span { color: #6B5F52; font-weight: 700; }
.panel-body .field .hint { color: #7A6E62; }
.panel-body .field input,
.panel-body .field select,
.panel-body .field textarea {
  background: #FFFFFF; color: var(--outline);
  border: 2.5px solid var(--outline); border-radius: 0;
}
.panel-body .field input::placeholder { color: #9C9086; }

.panel-body .amount-row {
  background: #FFFFFF; border: 2.5px solid var(--outline); border-radius: 0;
}
.panel-body .amount-row select {
  background: var(--gold); color: var(--outline);
  border: 0; border-right: 2.5px solid var(--outline);
}
.panel-body .amount-row input { color: var(--outline); }

.panel-body .consent { color: #3A322B; }
.panel-body .consent a { color: #B0176B; }
.panel-body .fine-print,
.panel-body .charge-line { color: #6B5F52; }
/* On the ticket's paper the chip has to be printed, not punched out of the
   dark: acid plate, black type, same as every other stamped label here. */
.panel-body .opt {
  background: var(--gold); border: 1.5px solid var(--outline); color: var(--outline);
  font-weight: 700;
}
.panel-body .rule { background: var(--outline); opacity: .22; }
.panel-body .preview {
  background: rgba(7, 5, 12, .05); border-color: rgba(7, 5, 12, .18);
  color: #3A322B;
}
.panel-body .preview .display,
.panel-body .preview strong { color: var(--outline); }
.panel-body .preset {
  background: #FFFFFF; color: var(--outline);
  border: 2px solid var(--outline); box-shadow: 2px 2px 0 var(--outline);
}
.panel-body .method-note { color: var(--outline) !important; border-color: var(--outline); }

/* Everything sitting on the ticket's paper takes the dark ink. These carry
   their own colours elsewhere on the page, so they have to be restated here
   rather than inherited - a light-on-light label is invisible, not subtle. */
.panel-body .chip {
  background: #FFFFFF; color: var(--outline);
  border: 2px solid var(--outline); box-shadow: 2px 2px 0 var(--outline);
}
.panel-body .chip:hover { background: var(--gold); }

.panel-body .preview {
  background: rgba(0, 229, 255, .18); border: 2.5px solid var(--outline);
}
.panel-body .preview .label { color: #5A4F44; }
.panel-body .preview-rank { color: var(--outline); }
.panel-body .preview-note { color: #3A322B; }
.panel-body .preview-line { color: #3A322B; }
.panel-body .preview-line strong { color: var(--outline); }

/* The action is magenta once it can be pressed, and plainly dead before that. */
.panel-body .cta:disabled {
  background: #D8D0C4; color: #6B5F52;
  border-color: var(--outline); box-shadow: 3px 3px 0 var(--outline);
  cursor: not-allowed;
}

/* 4. Hover flips the take button to the acid plate, black on yellow - the same
      inversion the crown badge uses, so the two read as one family. */
.take:hover { background: var(--gold); color: var(--outline); }
.seat--1 .take:hover { background: var(--gold); color: var(--outline); }

/* 2. The crown badge breathes, the way it does in the design. */
@keyframes badgepulse {
  0%, 100% { transform: rotate(7deg) scale(1); }
  50%      { transform: rotate(7deg) scale(1.07); }
}
.seat--1::after { animation: badgepulse 1.6s steps(2) infinite; }

/* 3. Every row is the same height whether or not its holder wrote a line, so
      the board reads as a ruled table instead of a ragged stack. */
.seat { min-height: 84px; align-content: center; }
.seat--1 { min-height: 96px; }

/* The card's title bar, the way the design stamps it: acid plate, black type,
   the rank stated on the right so the card says what it is before you read it. */
.champion-top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 13px; border-bottom: var(--edge);
  background: var(--gold); color: var(--outline);
  font-family: var(--display); font-size: 11px; text-transform: uppercase;
  flex: none;
}
.champion-body { flex: none; }
.champion--vacant .champion-top span:last-child { opacity: .45; }

/* ---------- one crown, everywhere ----------
   The mark is defined once as #icon-crown and cloned wherever a crown appears,
   so the navbar, the card and the tab icon can never drift apart again. The
   card's copy carries the same hard offset shadow every panel on this page
   has - no blur, pure black, down and to the right. */
.champion-art {
  filter: drop-shadow(5px 5px 0 rgba(7, 5, 12, .92));
}
.brand-crown { filter: drop-shadow(2px 2px 0 rgba(7, 5, 12, .28)); }
#champion-crown-empty { display: none; }
.champion--vacant #champion-crown { display: none; }
.champion--vacant #champion-crown-empty { display: block; }
.champion--vacant .champion-art { filter: none; }