:root {
  --pumpkin: #E07B39;
  --pumpkin-deep: #C9662A;
  --sky: #1E9BE0;
  --sky-dark: #1478B0;
  --navy: #14243A;
  --seat: #FFF4E8;
  --grass: #3E8E41;
  --display: "Bebas Neue", Impact, sans-serif;
  --body: "Source Sans 3", system-ui, sans-serif;
  /* stencil spray overspray: a fine mist of navy dots */
  --spray: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cg fill='%2314243A'%3E%3Ccircle cx='9' cy='14' r='.9' opacity='.16'/%3E%3Ccircle cx='31' cy='7' r='.6' opacity='.12'/%3E%3Ccircle cx='52' cy='22' r='1.1' opacity='.1'/%3E%3Ccircle cx='77' cy='11' r='.7' opacity='.15'/%3E%3Ccircle cx='101' cy='29' r='.9' opacity='.12'/%3E%3Ccircle cx='17' cy='48' r='.7' opacity='.14'/%3E%3Ccircle cx='44' cy='61' r='1' opacity='.1'/%3E%3Ccircle cx='69' cy='43' r='.6' opacity='.16'/%3E%3Ccircle cx='93' cy='66' r='1.2' opacity='.09'/%3E%3Ccircle cx='113' cy='51' r='.7' opacity='.13'/%3E%3Ccircle cx='6' cy='88' r='1' opacity='.11'/%3E%3Ccircle cx='29' cy='103' r='.8' opacity='.15'/%3E%3Ccircle cx='58' cy='92' r='.6' opacity='.13'/%3E%3Ccircle cx='81' cy='112' r='1' opacity='.1'/%3E%3Ccircle cx='107' cy='97' r='.7' opacity='.14'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--pumpkin) var(--spray); color: var(--navy); font: 17px/1.55 var(--body); }
a { color: var(--navy); }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.55; }
h1, h2 { font-family: var(--display); font-weight: 400; line-height: 0.95; margin: 0; letter-spacing: 0.01em; text-shadow: 0 0 5px rgba(20, 36, 58, 0.28); }

.top { display: flex; justify-content: space-between; align-items: center; padding: 16px clamp(16px, 4vw, 48px); }
.logo { display: flex; align-items: center; gap: 10px; color: var(--navy); text-decoration: none; font: 34px/1 var(--display); }
.connect { background: var(--navy); color: var(--seat); border: 0; border-radius: 6px; padding: 10px 18px; font-weight: 700; }

main { max-width: 1160px; margin: 0 auto; padding: 0 clamp(14px, 4vw, 48px) 40px; }

.hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px 48px; align-items: end; margin-top: 8px; }
.kicker { margin: 0 0 6px; font-weight: 700; }
.hero h1 { font-size: clamp(56px, 9vw, 110px); }
.lead { font-size: 18px; max-width: 600px; margin: 12px 0 0; }
.score { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.score div { border-left: 6px solid var(--navy); padding-left: 12px; }
.score b { display: block; font: 52px/0.95 var(--display); font-weight: 400; }
.score span { font-weight: 600; font-size: 15px; }

/* ---------- the stand */
.stadium { margin-top: 30px; perspective: 900px; }
.stand {
  display: grid; gap: 8px; padding: 22px clamp(10px, 3vw, 28px) 16px; background: var(--navy);
  border-radius: 18px 18px 0 0; transform: rotateX(16deg); transform-origin: 50% 100%;
  box-shadow: inset 0 10px 0 rgba(255, 255, 255, 0.05);
}
.tier { display: flex; justify-content: center; gap: clamp(4px, 1vw, 8px); }
.seat {
  width: clamp(18px, 3.4vw, 34px); aspect-ratio: 1 / 1.05; border-radius: 6px 6px 3px 3px;
  background: transparent; border: 2px solid rgba(255, 244, 232, 0.35);
  display: grid; place-items: center; color: var(--navy); font: 700 clamp(8px, 1.1vw, 11px)/1 var(--body);
}
.seat.on { background: var(--sky); border-color: var(--sky); color: #fff; }
.seat.new { animation: lightup 0.6s ease-out both; }
.stand.wave .seat.on { animation: wave 0.7s ease-in-out both; animation-delay: calc(var(--x) * 45ms); }
@keyframes wave { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-42%); background: var(--seat); } }
@keyframes lightup { 0% { background: var(--seat); transform: scale(1.5); box-shadow: 0 0 0 6px rgba(255, 244, 232, 0.5); } 100% { transform: scale(1); } }
.pitch {
  background: repeating-linear-gradient(90deg, var(--grass) 0 70px, #46994A 70px 140px); color: var(--seat);
  text-align: center; padding: 14px; font: 26px/1 var(--display); border-radius: 0 0 18px 18px;
}
.pitch span { font-size: 34px; }

/* ---------- pledge */
.act { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-top: 22px; }
.pledge label { display: block; font-weight: 700; margin-bottom: 6px; }
.row { display: flex; align-items: center; gap: 10px; background: var(--seat); border-radius: 10px; padding: 6px 6px 6px 14px; }
.row input { width: 130px; border: 0; background: transparent; font: 28px var(--display); color: var(--navy); }
.row input:focus { outline: none; }
.row span { font-weight: 700; }
.row button, .go { background: var(--sky); color: #fff; border: 0; border-radius: 8px; padding: 12px 20px; font: 24px/1 var(--display); letter-spacing: 0.03em; box-shadow: 0 4px 0 var(--sky-dark); }
.row button:active, .go:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sky-dark); }
.side-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.line { background: transparent; border: 3px solid var(--navy); color: var(--navy); border-radius: 8px; padding: 9px 16px; font-weight: 700; }
.note { min-height: 1.6em; font-weight: 700; margin: 14px 0 0; }
.note.bad { color: #6B0F0F; }

.lower { display: grid; grid-template-columns: 1.1fr 1fr; gap: 24px; margin-top: 40px; }
.start, .others { background: var(--seat); border-radius: 14px; padding: 24px; }
.start { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; align-content: start; }
.start h2, .others h2 { font-size: 40px; grid-column: 1 / -1; }
.start label { display: grid; gap: 4px; font-weight: 700; font-size: 15px; }
.start .wide, .go, .fine { grid-column: 1 / -1; }
.start input, .start select { font: 17px var(--body); padding: 10px 12px; border: 2px solid #E8D6C2; border-radius: 8px; background: #fff; color: var(--navy); width: 100%; }
.start input:focus, .start select:focus { outline: none; border-color: var(--sky); }
.fine { font-size: 14px; margin: 0; opacity: 0.85; }
.others ul { list-style: none; padding: 0; margin: 12px 0; }
.others li { border-bottom: 2px dashed rgba(20, 36, 58, 0.2); }
.others li a { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0; text-decoration: none; }
.others li b { font-weight: 700; }
.others li em { font-style: normal; font-size: 14px; grid-column: 1 / -1; opacity: 0.8; }
.others .meter { height: 6px; background: #EADBCB; border-radius: 4px; overflow: hidden; grid-column: 1 / -1; }
.others .meter i { display: block; height: 100%; background: var(--sky); }
.others .empty { padding: 10px 0; border: 0; }

.foot { margin-top: 48px; padding-top: 18px; border-top: 4px solid var(--navy); font-size: 14px; }
.foot p { margin: 4px 0; overflow-wrap: anywhere; }
.foot .built { font: 26px/1.2 var(--display); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .lower { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .score b { font-size: 40px; }
  .stand { transform: none; }
  .start { grid-template-columns: 1fr; }
  .row input { width: 90px; }
}
@media (prefers-reduced-motion: reduce) {
  .seat { animation: none !important; }
}