/* Seton Cornhole — "County Fair Field Day" theme.
   Palette pulled from the real thing (public/cornhole-director.jpg): field
   green, corn gold, bag blue, sun-washed canvas. Display face is a carnival
   slab; body face is Atkinson Hyperlegible (built for legibility in glare).
   Semantic match-state colors are deliberately NOT tokens — identical across
   any rebrand (pending/flagged/final/FF). */

:root {
  --bg: #F6EDD8;             /* sun-washed canvas */
  --bg-admin: #EFE8D2;
  --surface: #FFFBF0;
  --ink: #1E2A1B;            /* espresso green, not black */
  --muted: #5D6650;
  --muted-tertiary: #6E7660;
  --muted-faint: #A5A88E;
  --line: #E2D7B8;
  --line-row: #EEE5CC;
  --line-input: #CFC3A0;
  --primary: #17603B;        /* field green — CTAs, links, LIVE energy */
  --primary-dark: #0F4A2C;
  --primary-shadow: #0A3820; /* 3D button underside */
  --primary-tint: #E1EEDF;
  --secondary: #2456A6;      /* bag blue — secondary accents */
  --secondary-tint: #E8EEF9;
  --secondary-light: #D6E2F5;
  --highlight: #F5B301;      /* corn gold — the loud one */
  --highlight-ink: #3A2600;
  --danger: #B91C1C;
  --radius-card: 14px;
  --radius-btn: 10px;
  --radius-sheet: 16px;
  --radius-pill: 999px;
  --mono: ui-monospace, Menlo, monospace;
  --display: "Alfa Slab One", "Georgia", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16.5px;
  line-height: 1.55;
  /* Board-hole dots, barely there — texture instead of a flat fill. */
  background-color: var(--bg);
  background-image: radial-gradient(rgba(30, 42, 27, 0.055) 1.6px, transparent 1.6px);
  background-size: 28px 28px;
}
body.admin { background-color: var(--bg-admin); }

/* ---------- Layout containers ---------- */
.wrap        { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 720px; margin: 0 auto; padding: 0 20px; }
.wrap-form   { max-width: 560px; margin: 0 auto; padding: 0 20px; }
.wrap-admin  { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
main { padding: 28px 0 64px; }

/* ---------- Motion (one orchestrated load, CSS-only) ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
.rise { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
.d1 { animation-delay: 0.06s; }
.d2 { animation-delay: 0.14s; }
.d3 { animation-delay: 0.22s; }
.d4 { animation-delay: 0.3s; }
.d5 { animation-delay: 0.38s; }
.d6 { animation-delay: 0.46s; }

@keyframes ticker-roll { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; }
  .ticker-track { animation: none; }
  .card-link, .link-card, .btn { transition: none !important; }
}

/* ---------- Public header ---------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; gap: 14px; height: 66px; }
.logo-mark {
  width: 38px; height: 38px; border-radius: 9px;
  background: var(--highlight); color: var(--highlight-ink);
  font-family: var(--display); font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  transform: rotate(-4deg);
  box-shadow: 0 2px 0 var(--highlight-ink);
}
.wordmark { font-family: var(--display); font-size: 17px; color: var(--ink); text-decoration: none; letter-spacing: 0.01em; }
.site-nav { margin-left: auto; display: flex; gap: 6px; }
.nav-link {
  padding: 8px 14px; border-radius: var(--radius-pill); text-decoration: none;
  font-size: 15px; font-weight: 700; color: var(--muted);
}
.nav-link:hover { color: var(--ink); }
.nav-link.active { color: var(--primary); background: var(--primary-tint); }

/* ---------- Admin header ---------- */
.admin-header { background: var(--ink); color: #fff; border-bottom: 4px solid var(--highlight); }
.admin-header .wrap-admin { display: flex; align-items: center; gap: 12px; height: 56px; }
.admin-header a { color: #fff; text-decoration: none; font-family: var(--display); font-size: 15px; }
.admin-header .who { margin-left: auto; font-size: 13px; color: var(--muted-faint); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 24px 0 40px; }
.site-footer .wrap { display: flex; align-items: center; gap: 16px; font-size: 13.5px; color: var(--muted); }
/* The semi-hidden admin entry: exists, zero visual weight. */
.admin-link { margin-left: auto; font-size: 12.5px; color: var(--muted-faint); text-decoration: none; }

/* ---------- Type ---------- */
h1 { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: 0.005em; margin: 0 0 8px; line-height: 1.15; }
h2 { font-family: var(--display); font-weight: 400; font-size: 20px; margin: 34px 0 14px; }
.eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.lede { color: var(--muted); margin: 0 0 8px; }
.mono { font-family: var(--mono); }

/* ---------- Buttons (52px minimum for anything day-of) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 24px; border-radius: var(--radius-btn); border: none;
  font-size: 16px; font-weight: 700; cursor: pointer; text-decoration: none;
  font-family: inherit;
  transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.12s ease;
}
.btn:active { transform: translateY(2px); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 3px 0 var(--primary-shadow); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:active { box-shadow: 0 1px 0 var(--primary-shadow); }
.btn-outline { background: var(--surface); color: var(--primary); border: 2px solid var(--primary); }
.btn-quiet { background: var(--surface); color: var(--ink); border: 1px solid var(--line); font-weight: 600; }
.btn-finalize { background: var(--primary); color: #fff; box-shadow: 0 3px 0 var(--primary-shadow); }
.btn-finalize:active { box-shadow: 0 1px 0 var(--primary-shadow); }
.btn-destructive { background: #FFF5F5; color: var(--danger); border: 2px solid var(--danger); }
.btn-highlight { background: var(--highlight); color: var(--highlight-ink); box-shadow: 0 3px 0 #B98600; }
.btn-highlight:active { box-shadow: 0 1px 0 #B98600; }
.btn-block { width: 100%; height: 56px; }
.btn[disabled], .btn-disabled { background: var(--line-row); color: var(--muted-faint); cursor: not-allowed; box-shadow: none; }

/* ---------- Cards ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 20px;
}
.card + .card { margin-top: 14px; }
.card-dashed {
  background: var(--surface); border: 2px dashed var(--line-input);
  border-radius: var(--radius-card); padding: 28px 20px; text-align: center; color: var(--muted);
}
a.card-link {
  display: block; text-decoration: none; color: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
a.card-link:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(30, 42, 27, 0.08);
}
.card-live { border: 2px solid var(--primary); }
.warning-card {
  background: #FFF5F5; border: 2px solid #FCA5A5; border-radius: var(--radius-card);
  padding: 16px 18px; color: var(--danger); font-size: 14.5px;
}

/* ---------- Badges & pills ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700;
}
.badge-live { background: var(--primary); color: #fff; font-weight: 800; letter-spacing: 0.04em; }
.badge-live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--highlight); }
.badge-open { background: var(--primary); color: #fff; }
.badge-closed { background: var(--line-row); color: #4C5645; }
.badge-done { background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.badge-champion { background: #FDF3DC; border: 1px solid #E8A33D; color: #8A6414; }
.badge-setup { background: var(--secondary-tint); color: var(--secondary); }

/* Match-state language — shape + word + color, never color alone.
   Semantic across any rebrand; do NOT re-token. */
.state-pending { background: #FEF3C7; color: #92400E; }
.state-pending::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #B45309; }
.state-flagged { background: #FEE2E2; color: #991B1B; }
.state-flagged::before { content: "▲"; font-size: 12px; line-height: 1; }
.state-final { background: #DCFCE7; color: #166534; }
.state-final::before { content: "✓"; font-size: 12px; line-height: 1; }
.state-ff { background: var(--line-row); color: #4C5645; font-family: var(--mono); }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > span { font-size: 14px; font-weight: 700; }
.field .hint { font-size: 12.5px; color: var(--muted); font-weight: 400; }
input[type="text"], input[type="email"], input[type="tel"], input:not([type]) {
  height: 52px; padding: 0 14px; border: 1.5px solid var(--line-input);
  border-radius: var(--radius-btn); font-size: 16px; background: #fff; color: var(--ink);
  font-family: inherit; width: 100%;
}
input:focus {
  border: 2px solid var(--primary); outline: none;
  box-shadow: 0 0 0 3px rgba(23, 96, 59, 0.18);
}
.input-error { border: 2px solid var(--danger) !important; background: #FFF5F5 !important; }
.alert-error {
  background: #FEE2E2; border: 1px solid #FCA5A5; border-radius: var(--radius-btn);
  color: #991B1B; padding: 12px 16px; font-size: 14.5px; margin-bottom: 14px;
}
.form-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0 14px; }

/* ---------- Tables ---------- */
table.ds { width: 100%; border-collapse: collapse; font-size: 15px; }
table.ds th {
  text-align: left; font-size: 13px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted); padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
table.ds td { padding: 12px; border-bottom: 1px solid var(--line-row); }
table.ds tr:last-child td { border-bottom: none; }
table.ds a { color: var(--primary); font-weight: 700; text-decoration: none; }
.row-advancing { background: var(--primary-tint); }
.row-advancing .rank { color: var(--primary); font-weight: 800; }
.diff-pos { color: var(--primary); font-family: var(--mono); }
.diff-neg { color: var(--danger); font-family: var(--mono); }

/* Claim codes — read aloud at arm's length. */
.claim-code { font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: 0.15em; }

/* ---------- Hero (home) — the real field, not a color block ---------- */
.hero {
  position: relative;
  color: #fff;
  border-radius: var(--radius-sheet);
  border-bottom: 6px solid var(--highlight);
  padding: 64px 28px 52px;
  margin-top: 24px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(10, 40, 24, 0.28) 0%, rgba(10, 40, 24, 0.55) 55%, rgba(10, 40, 24, 0.82) 100%),
    url("/cornhole-director.jpg") center 42% / cover no-repeat;
}
.hero .pill {
  display: inline-block; background: var(--highlight); color: var(--highlight-ink);
  padding: 6px 14px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 700;
  margin-bottom: 14px; transform: rotate(-1.5deg);
}
.hero h1 {
  font-family: var(--display); font-size: clamp(36px, 6.5vw, 58px); line-height: 1.04;
  margin: 0 0 10px; color: #fff; text-shadow: 0 2px 0 rgba(10, 40, 24, 0.55);
}
.hero .date { font-size: 17px; opacity: 0.95; margin: 0 0 6px; }
.hero .tagline { font-size: 18px; font-style: italic; opacity: 0.95; margin: 0 0 24px; }
.hero .ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-hero-outline { background: rgba(10, 40, 24, 0.25); color: #fff; border: 2px solid #fff; }

/* ---------- Ticker — CSS-only marquee ---------- */
.ticker {
  margin-top: 14px; border-radius: var(--radius-pill); overflow: hidden;
  background: var(--ink);
}
.ticker-track { display: inline-flex; white-space: nowrap; animation: ticker-roll 26s linear infinite; }
.ticker-half { display: inline-flex; align-items: center; }
.ticker-half span {
  font-family: var(--display); font-size: 13.5px; color: var(--highlight);
  padding: 10px 0 10px 26px; letter-spacing: 0.08em;
}
.ticker-half span::after { content: "🌽"; margin-left: 26px; font-size: 12px; }

/* ---------- Stat cards (scoring rules) ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.stat-card {
  background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--highlight);
  border-radius: var(--radius-card); padding: 18px;
}
.stat-card .big { font-size: 30px; font-family: var(--display); color: var(--primary); }
.stat-card .label { font-size: 14.5px; color: var(--muted); margin-top: 4px; }
.footnote { font-size: 13.5px; color: var(--muted); }

/* ---------- Link cards (rules & resources) ---------- */
.link-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.link-card {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-card); padding: 18px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.link-card:hover {
  border-color: var(--primary); transform: translateY(-2px);
  box-shadow: 0 6px 0 rgba(30, 42, 27, 0.08);
}
.link-card .title { font-weight: 700; color: var(--primary); }
.link-card .sub { font-size: 13.5px; color: var(--muted); margin-top: 4px; }

/* ---------- FAQ ---------- */
details.faq { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); padding: 16px 20px; margin-bottom: 10px; }
details.faq summary { font-weight: 700; cursor: pointer; }
details.faq[open] summary { color: var(--primary); }
details.faq p { margin: 10px 0 2px; color: var(--muted); }

/* ---------- Sponsors ---------- */
.sponsor-strip { display: flex; flex-wrap: wrap; gap: 12px; }
.sponsor-slot {
  width: 140px; height: 56px; border: 2px dashed var(--line-input); border-radius: var(--radius-btn);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12.5px; color: var(--muted-faint); background: var(--surface);
}

/* ---------- Tournament list cards ---------- */
.tour-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tour-card .name { font-size: 17px; font-weight: 700; }
.tour-card .meta { font-size: 13.5px; color: var(--muted); width: 100%; }
.tour-card.past .name { color: var(--muted); }

/* ---------- Bracket container ---------- */
.bracket-card { overflow-x: auto; }
.bracket-card .brackets-viewer { min-width: 560px; }
.brackets-viewer { --primary-color: var(--primary); font-family: inherit; }

/* ---------- Section labels (admin) ---------- */
.section-label {
  font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); margin: 28px 0 10px;
}
.section-label.danger { color: var(--danger); }

@media (max-width: 480px) {
  .site-header .wrap { gap: 8px; }
  .hero { padding: 44px 20px 40px; }
}