:root {
  --clay: #A4532E;
  --clay-dark: #6E3519;
  --ink: #1C0F08;
  --tide: #10B5B0;
  --gold: #F2C14E;
  --line: #F4E3D3;
  --display: "Bungee", system-ui, sans-serif;
  --body: "Nunito Sans", system-ui, sans-serif;
  /* brushed clay: long curved sweep marks, like a court after the drag brush */
  --sweep: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='260' viewBox='0 0 420 260'%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M-20 40 C 110 10, 300 70, 440 30' stroke='%23C0683F' stroke-opacity='.35' stroke-width='9'/%3E%3Cpath d='M-20 58 C 120 30, 290 92, 440 50' stroke='%238A4325' stroke-opacity='.28' stroke-width='3'/%3E%3Cpath d='M-20 120 C 90 150, 320 90, 440 128' stroke='%23C0683F' stroke-opacity='.3' stroke-width='12'/%3E%3Cpath d='M-20 140 C 100 168, 310 110, 440 148' stroke='%238A4325' stroke-opacity='.25' stroke-width='2'/%3E%3Cpath d='M-20 200 C 140 180, 260 240, 440 206' stroke='%23C0683F' stroke-opacity='.32' stroke-width='8'/%3E%3Cpath d='M-20 222 C 150 200, 270 258, 440 226' stroke='%23F4E3D3' stroke-opacity='.08' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; }
html { background: var(--clay); }
body {
  margin: 0;
  font: 400 15px/1.6 var(--body);
  color: var(--line);
  background-color: var(--clay);
  background-image: var(--sweep);
  background-size: 420px 260px;
  min-height: 100vh;
}
a { color: var(--gold); }
button { font: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: 0.55; }

.top {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px clamp(16px, 4vw, 48px);
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--line); }
.logo span { font: 24px/1 var(--display); }
.connect {
  border: 2px solid var(--line); background: transparent; color: var(--line);
  padding: 9px 18px; border-radius: 999px; font-weight: 800;
}
.connect:hover { background: var(--line); color: var(--clay-dark); }

/* rope lane across the full width with a team column on each side */
.arena {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr minmax(150px, 220px);
  align-items: stretch;
  margin-top: 8px;
  background: linear-gradient(180deg, rgba(110, 53, 25, 0.55), rgba(110, 53, 25, 0.25));
  border-top: 4px solid var(--line);
  border-bottom: 4px solid var(--line);
}
.side { padding: 28px 22px; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.side.clay { border-right: 2px dashed rgba(244, 227, 211, 0.4); }
.side.tide { border-left: 2px dashed rgba(244, 227, 211, 0.4); text-align: right; align-items: flex-end; }
.team { margin: 0; font: 24px/1 var(--display); }
.clay .team { color: var(--gold); }
.tide .team { color: var(--tide); }
.score { margin: 10px 0 0; font: 64px/1 var(--display); color: var(--line); }
.sub { margin: 0 0 18px; font-size: 13px; opacity: 0.8; }
.pull {
  border: 0; border-radius: 14px; padding: 14px 18px; font-weight: 800; font-size: 16px;
  box-shadow: 0 5px 0 rgba(28, 15, 8, 0.55);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.pull:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 rgba(28, 15, 8, 0.55); }
.clay .pull { background: var(--gold); color: var(--ink); }
.tide .pull { background: var(--tide); color: var(--ink); }

.lane { position: relative; min-height: 300px; }
#rope { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ropeRead {
  position: absolute; left: 0; right: 0; bottom: 10px; margin: 0;
  text-align: center; font-weight: 800; font-size: 15px; color: var(--line);
  text-shadow: 0 1px 2px rgba(28, 15, 8, 0.7);
}

.status {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  margin: 0 clamp(16px, 4vw, 48px); background: rgba(244, 227, 211, 0.25);
  border-radius: 0 0 18px 18px; overflow: hidden;
}
.status div { background: var(--clay-dark); padding: 16px 18px; display: flex; flex-direction: column; }
.status b { font: 20px/1.15 var(--display); color: var(--line); overflow-wrap: anywhere; }
.status span { font-size: 13px; opacity: 0.8; }
.note { min-height: 24px; margin: 14px clamp(16px, 4vw, 48px) 0; font-weight: 700; }
.note.bad { color: #FFD6C2; }

.how, .board { padding: 56px clamp(16px, 4vw, 48px) 0; max-width: 1180px; margin: 0 auto; }
h2 { font: 40px/1.05 var(--display); margin: 0 0 22px; color: var(--line); }
h3 { font: 24px/1.1 var(--display); margin: 0 0 8px; color: var(--gold); }
.how ol { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; }
.how li { counter-increment: step; position: relative; padding: 22px 22px 22px 70px; background: rgba(28, 15, 8, 0.28); border-left: 4px solid var(--line); }
.how li::before { content: counter(step); position: absolute; left: 20px; top: 18px; font: 40px/1 var(--display); color: var(--tide); }
.how p { margin: 0; font-size: 16px; }

.board { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.rounds, .feed { list-style: none; margin: 0; padding: 0; }
.rounds li, .feed li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid rgba(244, 227, 211, 0.25); font-size: 15px; }
.rounds .who { font-weight: 800; }
.rounds .who.c0 { color: var(--gold); }
.rounds .who.c1 { color: var(--tide); }
.feed .t0 { color: var(--gold); font-weight: 800; }
.feed .t1 { color: var(--tide); font-weight: 800; }
.feed a { color: var(--line); }
.empty { opacity: 0.75; }
.totals { font-size: 13px; opacity: 0.85; }

.foot { max-width: 1180px; margin: 64px auto 0; padding: 26px clamp(16px, 4vw, 48px) 40px; border-top: 2px solid rgba(244, 227, 211, 0.35); font-size: 14px; }
.foot p { margin: 4px 0; overflow-wrap: anywhere; }
.foot .built { font: 24px/1.2 var(--display); margin-bottom: 10px; }

@media (max-width: 860px) {
  .arena { grid-template-columns: 1fr 1fr; }
  .lane { grid-column: 1 / -1; grid-row: 1; min-height: 240px; }
  .side { padding: 18px 16px; }
  .score { font-size: 44px; }
  .status { grid-template-columns: 1fr 1fr; }
  .how ol, .board { grid-template-columns: 1fr; }
  h2 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) { .pull { transition: none; } }