/* Soweto Derby competition: Adam Kramer's slide 6 mock (teal card on cream), brand tokens from Zeroa KB build/cream/brand.css */
:root {
  --bg: #f5f3ee;
  --ink: #1e2a38;
  --muted: #5a6675;
  --teal: #127e83;
  --teal-deep: #0b5357;
  --teal-dark: #08393c;
  --line: rgba(255, 255, 255, 0.28);
  --bad: #ffb4a8;
  --serif: Georgia, "Georgia Pro", "Times New Roman", serif;
  --sans: "Segoe UI", Arial, Helvetica, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--ink); font: 16px/1.5 var(--sans); -webkit-text-size-adjust: 100%; }
a { color: inherit; }

/* review build only: shows until DRAFT is switched off in the page script */
.draft-bar { display: none; background: #ffe7a3; color: #4a3a00; font-size: 13px; padding: 8px 16px; text-align: center; }
.draft .draft-bar { display: block; }
.tbc { display: none; }
.draft .tbc { display: inline; background: #ffe7a3; color: #4a3a00; border-radius: 3px; padding: 0 4px; font-size: 0.85em; font-weight: 600; }

.shell { max-width: 560px; margin: 0 auto; padding: 0 0 32px; }
.card { background: var(--teal); color: #fff; overflow: hidden; }
@media (min-width: 600px) { .shell { padding: 32px 16px 48px; } .card { border-radius: 18px; box-shadow: 0 12px 40px rgba(8, 57, 60, 0.18); } }

/* hero: Adam's photo goes in --hero-img when he sends it; until then a pitch-line gradient holds the space */
.hero { position: relative; padding: 36px 24px 56px; background:
    linear-gradient(160deg, rgba(8, 57, 60, 0.55), rgba(8, 57, 60, 0.15)),
    var(--hero-img, repeating-linear-gradient(90deg, transparent 0 46px, rgba(255, 255, 255, 0.05) 46px 48px)),
    linear-gradient(160deg, var(--teal-dark), var(--teal-deep));
  background-size: cover; background-position: center; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
/* pitch markings: halfway line and centre circle, drawn faint behind the hero text; drop both when --hero-img arrives */
.hero::before, .hero::after { content: ""; position: absolute; pointer-events: none; }
.hero::before { top: 0; bottom: 0; right: 56px; width: 2px; background: rgba(255, 255, 255, 0.12); }
.hero::after { top: 46%; right: -73px; width: 260px; height: 260px; transform: translateY(-50%); border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.12); background: radial-gradient(circle, rgba(255, 255, 255, 0.22) 0 5px, transparent 6px); }
.hero > * { position: relative; z-index: 1; }
@media (max-width: 480px) { .hero::before { right: 40px; } .hero::after { right: -59px; width: 200px; height: 200px; } }
.hero h1 { font: 400 clamp(34px, 9vw, 46px)/1.05 var(--serif); margin: 0 0 14px; letter-spacing: -0.5px; }
.hero p { margin: 0; max-width: 30em; font-size: 15px; color: rgba(255, 255, 255, 0.92); }
.hero .closes { margin-top: 10px; font-weight: 600; color: #fff; }

.body { padding: 8px 24px 28px; }
.match { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 10px; margin: 6px 0 4px; }
.match .team { font-weight: 600; font-size: 16px; line-height: 1.2; }
.match .team.home { text-align: right; }
.match .dash { font-size: 22px; opacity: 0.85; }
.score { width: 54px; height: 54px; border: 2px solid transparent; border-radius: 10px; background: #fff; color: var(--ink);
  font: 600 26px var(--sans); text-align: center; -moz-appearance: textfield; }
.score::-webkit-outer-spin-button, .score::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.hint { font-size: 13px; color: #fff; text-align: center; margin: 4px 0 18px; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.field { margin-bottom: 12px; }
.field.full { grid-column: 1 / -1; }
@media (max-width: 380px) { .grid { grid-template-columns: 1fr; } }
label.lbl { display: block; font-size: 14px; font-weight: 500; margin-bottom: 4px; }
input.txt { width: 100%; height: 46px; border: 2px solid transparent; border-radius: 10px; background: #fff; color: var(--ink); padding: 10px 12px; font: 16px var(--sans); }
input.bad, .score.bad { border-color: var(--bad); }
input.txt:focus, .score:focus { outline: none; border-color: #ffd36b; }
.err { display: none; background: #fff1ef; color: #a1261b; font-size: 13px; font-weight: 600; border-radius: 6px; padding: 4px 8px; margin-top: 6px; }
.err.show { display: block; }

.card p, .tick span { text-wrap: pretty; }
.tick { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0 2px; font-size: 14px; cursor: pointer; }
.tick input { width: 20px; height: 20px; min-width: 20px; margin: 1px 0 0; accent-color: #fff; cursor: pointer; }
.go { display: block; width: 100%; margin-top: 18px; border: 0; border-radius: 28px; background: #fff; color: var(--teal-deep);
  font: 700 17px var(--sans); padding: 15px 0; cursor: pointer; }
.go:hover { background: #e9f4f4; }
.go:focus-visible, .tick input:focus-visible { outline: 3px solid #ffd36b; outline-offset: 2px; }
.notice { font-size: 12.5px; color: #fff; margin: 12px 0 0; }
.go:disabled { opacity: 0.7; cursor: wait; }

.disclaimer { margin: 0; padding: 0 24px 4px; font-size: 13px; color: #fff; text-align: center; }

.brand { text-align: center; padding: 22px 24px 26px; }
.brand img { width: 128px; height: auto; filter: brightness(0) invert(1); }

.done, .closed { display: none; padding: 8px 24px 28px; }
.done h2, .closed h2 { font: 400 34px/1.1 var(--serif); margin: 0 0 12px; }
.pick { background: rgba(8, 57, 60, 0.35); border-radius: 12px; padding: 14px 16px; margin: 14px 0; font-size: 18px; font-weight: 600; text-align: center; }
.join { display: inline-block; margin-top: 8px; background: #fff; color: var(--teal-deep); border-radius: 22px; padding: 11px 20px; font-weight: 700; text-decoration: none; }
.state-done .entry, .state-closed .entry { display: none; }
.state-done .done { display: block; }
.state-closed .closed { display: block; }

.foot { color: var(--muted); font-size: 12px; line-height: 1.5; padding: 16px 24px 0; }
.foot p { margin: 0 0 8px; }

/* rules page */
.doc { max-width: 760px; margin: 0 auto; padding: 24px 20px 48px; color: var(--ink); }
.doc h1 { font: 400 32px/1.15 var(--serif); color: var(--teal-deep); margin: 8px 0 4px; }
.doc h2 { font: 600 17px var(--sans); color: var(--teal-deep); margin: 26px 0 8px; }
.doc p, .doc li { font-size: 15px; text-wrap: pretty; }
.doc ol, .doc ul { padding-left: 22px; }
.doc .meta { color: var(--muted); font-size: 14px; }
.doc .back { color: var(--teal-deep); font-weight: 600; text-decoration: none; }