/* ═══════════════════════════════════════════════════════════════════════════
   ARMED FORCES SLUGFEST — "Zombie Apocalypse" design system
   Dark horror-grunge base · toxic-green + blood-red · military sub-theme.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Creepster&family=Anton&family=Oswald:wght@400;500;600;700&family=Black+Ops+One&family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Surfaces */
  --void:   #070a07;
  --soil:   #0d120c;
  --soil-2: #131a11;
  --soil-3: #1a2216;
  --line:   rgba(131,229,9,.14);
  --line-2: rgba(233,231,214,.08);

  /* Ink */
  --bone:   #e9e7d6;
  --ash:    #9aa08c;
  --ash-dim:#8b917d;

  /* Zombie accents */
  --toxic:      #83e509;
  --toxic-glow: #a6ff2e;
  --toxic-deep: #4f8a06;
  --blood:      #c11017;
  --blood-deep: #6f0a0d;
  --rust:       #8a6234;

  /* Military sub-theme */
  --olive:  #7c8a3f;
  --khaki:  #c3ad74;
  --steel:  #3a4635;

  --gold:   #d8b24a;

  --shadow: 0 18px 50px rgba(0,0,0,.6);
  --radius: 14px;
  --wrap: 1180px;

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --impact: 'Anton', 'Oswald', Impact, sans-serif;
  --head: 'Oswald', 'Inter', sans-serif;
  --horror: 'Creepster', 'Anton', cursive;
  --stencil: 'Black Ops One', 'Oswald', sans-serif;
}

/* ── Reset ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--bone);
  line-height: 1.6;
  background: var(--void);
  overflow-x: hidden;
}
/* Grain + toxic haze overlay */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(1100px 620px at 78% -8%, rgba(131,229,9,.10), transparent 60%),
    radial-gradient(900px 560px at 8% 108%, rgba(193,16,23,.10), transparent 60%),
    linear-gradient(180deg, #080b08 0%, #0a0d09 40%, #070a07 100%);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: -1; opacity: .045; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1,h2,h3,h4 { margin: 0 0 .4em; line-height: 1.05; letter-spacing: .01em; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }
.section { padding: 76px 0; position: relative; }
.section--tight { padding: 48px 0; }
.center { text-align: center; }
.muted { color: var(--ash); }
.toxic-text { color: var(--toxic); }
.blood-text { color: var(--blood); }

/* ── Eyebrow / section headers ───────────────────────────────────────────── */
.eyebrow {
  font-family: var(--head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .28em; font-size: 12.5px; color: var(--toxic);
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px;
}
.eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--toxic); box-shadow: 0 0 10px var(--toxic); }
.section-title {
  font-family: var(--impact); text-transform: uppercase; letter-spacing: .01em;
  font-size: clamp(30px, 5vw, 52px); font-weight: 400; color: var(--bone);
  line-height: .98;
}
.section-title em { color: var(--toxic); font-style: normal; text-shadow: 0 0 22px rgba(131,229,9,.5); }
.lede { font-size: 18px; color: var(--ash); max-width: 62ch; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--head); font-weight: 700; text-transform: uppercase;
  letter-spacing: .12em; font-size: 14px; padding: 14px 26px; border-radius: 10px;
  border: 1px solid transparent; transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn--toxic {
  background: linear-gradient(180deg, var(--toxic-glow), var(--toxic-deep));
  color: #0a1400; box-shadow: 0 10px 30px rgba(131,229,9,.32), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--toxic:hover { box-shadow: 0 16px 40px rgba(131,229,9,.5); }
.btn--blood {
  background: linear-gradient(180deg, var(--blood), var(--blood-deep));
  color: #fff; box-shadow: 0 10px 30px rgba(193,16,23,.3);
}
.btn--ghost { background: rgba(233,231,214,.02); color: var(--bone); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--toxic); color: var(--toxic); box-shadow: 0 0 24px rgba(131,229,9,.18); }
.btn--sm { padding: 9px 16px; font-size: 12.5px; }

/* ── Top nav ─────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(8,11,8,.82); backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--line);
}
.nav__inner { max-width: var(--wrap); margin: 0 auto; padding: 12px 22px; display: flex; align-items: center; gap: 18px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { width: 42px; height: 42px; flex: 0 0 auto; filter: drop-shadow(0 0 10px rgba(131,229,9,.35)); }
.brand__name { display: block; font-family: var(--impact); text-transform: uppercase; font-size: 19px; letter-spacing: .02em; line-height: .95; }
.brand__name span { color: var(--toxic); }
.brand__sub { display: block; font-family: var(--head); font-size: 10px; letter-spacing: .26em; color: var(--ash-dim); text-transform: uppercase; margin-top: 3px; }
.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.nav__links a {
  font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
  /* 10px, not 12px: eleven links plus the Register button need every pixel of the
     1180px bar. See the nav note at the 1240px breakpoint below. */
  font-size: 13px; color: var(--ash); padding: 8px 10px; border-radius: 8px; transition: .15s;
}
.nav__links a:hover, .nav__links a.active { color: var(--toxic); background: rgba(131,229,9,.07); }
.nav__cta { margin-left: 6px; }
/* keep the Register CTA's dark, high-contrast text (beat the .nav__links a color) */
.nav__links a.nav__cta, .nav__links a.nav__cta:hover { color: #0a1400; background: linear-gradient(180deg, var(--toxic-glow), var(--toxic-deep)); }
.nav__toggle { display: none; background: none; border: 1px solid var(--line); color: var(--bone); border-radius: 8px; min-width: 46px; min-height: 46px; align-items: center; justify-content: center; cursor: pointer; }
.nav__toggle span, .nav__toggle span::before, .nav__toggle span::after { display:block; width:20px; height:2px; background: var(--toxic); position: relative; }
.nav__toggle span::before { content:''; position:absolute; top:-6px; } .nav__toggle span::after { content:''; position:absolute; top:6px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { position: relative; padding: 96px 0 84px; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero__glow { position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(760px 420px at 70% 20%, rgba(131,229,9,.16), transparent 62%),
              radial-gradient(620px 360px at 12% 92%, rgba(193,16,23,.14), transparent 60%); }
.hero .wrap { position: relative; z-index: 2; }
.hero__flag {
  font-family: var(--head); text-transform: uppercase; letter-spacing: .3em; font-size: 13px;
  color: var(--blood); font-weight: 700; margin-bottom: 18px; display: inline-flex; gap: 10px; align-items: center;
}
.hero__flag::before, .hero__flag::after { content:''; width: 30px; height: 2px; background: var(--blood); }
.hero__title {
  font-family: var(--horror); font-weight: 400; color: var(--toxic);
  font-size: clamp(52px, 11vw, 132px); line-height: .86; letter-spacing: .01em;
  text-shadow: 0 0 26px rgba(131,229,9,.45), 0 4px 0 #163400, 0 8px 30px rgba(0,0,0,.6);
  margin: 0 0 6px; animation: flicker 6s infinite;
}
.hero__title .sub { display:block; font-family: var(--impact); font-size: clamp(20px,4vw,42px); color: var(--bone); letter-spacing:.04em; text-shadow: none; margin-top: 8px; }
@keyframes flicker {
  0%,100%{opacity:1} 92%{opacity:1} 93%{opacity:.55} 94%{opacity:1} 96%{opacity:.72} 97%{opacity:1}
}
.hero__meta { display: flex; flex-wrap: wrap; gap: 12px 26px; margin: 22px 0 26px; color: var(--bone); font-family: var(--head); font-weight: 600; letter-spacing: .04em; }
.hero__meta b { color: var(--toxic); }
.hero__meta .chip { display:inline-flex; align-items:center; gap:9px; font-size: 15px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Countdown ───────────────────────────────────────────────────────────── */
.countdown { display: flex; gap: 12px; flex-wrap: wrap; }
.count-cell {
  background: linear-gradient(180deg, var(--soil-2), var(--soil));
  border: 1px solid var(--line); border-radius: 12px; padding: 14px 20px; min-width: 92px; text-align: center;
  box-shadow: inset 0 0 30px rgba(0,0,0,.4);
}
.count-cell b { font-family: var(--impact); font-size: 40px; color: var(--toxic); display:block; line-height: 1; text-shadow: 0 0 18px rgba(131,229,9,.4); }
.count-cell span { font-family: var(--head); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ash); }

/* ── Blood-drip divider ──────────────────────────────────────────────────── */
.drip { height: 22px; width: 100%; display:block;
  background:
    radial-gradient(6px 14px at 8% 0, var(--blood) 60%, transparent 62%),
    radial-gradient(5px 20px at 20% 0, var(--blood) 60%, transparent 62%),
    radial-gradient(7px 11px at 33% 0, var(--blood) 60%, transparent 62%),
    radial-gradient(4px 24px at 47% 0, var(--blood) 60%, transparent 62%),
    radial-gradient(6px 16px at 61% 0, var(--blood) 60%, transparent 62%),
    radial-gradient(5px 22px at 74% 0, var(--blood) 60%, transparent 62%),
    radial-gradient(7px 13px at 88% 0, var(--blood) 60%, transparent 62%),
    linear-gradient(180deg, var(--blood) 0 4px, transparent 4px);
  filter: drop-shadow(0 6px 6px rgba(111,10,13,.5)); opacity: .9;
}

/* ── Cards / panels ──────────────────────────────────────────────────────── */
.panel { background: linear-gradient(180deg, var(--soil-2), var(--soil)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* Event cards */
.event-card { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--soil-2), var(--soil)); display: flex; flex-direction: column; transition: .2s; }
.event-card:hover { transform: translateY(-4px); border-color: var(--toxic); box-shadow: 0 22px 60px rgba(0,0,0,.6), 0 0 40px rgba(131,229,9,.12); }
.event-card__top { padding: 22px 22px 0; }
.event-card__tag { font-family: var(--head); font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: 11px; color: var(--toxic); }
.event-card--military .event-card__tag { color: var(--khaki); }
.event-card--military:hover { border-color: var(--khaki); box-shadow: 0 22px 60px rgba(0,0,0,.6), 0 0 40px rgba(195,173,116,.12); }
.event-card__name { font-family: var(--impact); text-transform: uppercase; font-size: 27px; margin: 8px 0 4px; }
.event-card__date { font-family: var(--head); font-weight: 600; color: var(--bone); letter-spacing: .05em; }
.event-card__body { padding: 14px 22px 22px; color: var(--ash); flex: 1; }
.event-card__foot { padding: 0 22px 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.ribbon { position: absolute; top: 16px; right: -34px; transform: rotate(45deg); background: var(--blood); color: #fff;
  font-family: var(--head); font-weight: 700; letter-spacing: .16em; font-size: 11px; padding: 6px 44px; text-transform: uppercase; box-shadow: 0 6px 16px rgba(0,0,0,.5); }

/* Stat tiles */
.stat { text-align: center; padding: 22px; }
.stat b { font-family: var(--impact); font-size: clamp(30px,4vw,44px); color: var(--toxic); display:block; line-height: 1; }
.stat span { font-family: var(--head); text-transform: uppercase; letter-spacing: .14em; font-size: 12px; color: var(--ash); }

/* Feature cards */
.feature { padding: 26px; }
.feature__icon { width: 46px; height: 46px; margin-bottom: 14px; color: var(--toxic); }
.feature h3 { font-family: var(--head); text-transform: uppercase; letter-spacing: .04em; font-size: 18px; }

/* ── Capacity meter ──────────────────────────────────────────────────────── */
.capacity { border: 1px solid var(--line); border-radius: 14px; padding: 22px; background: linear-gradient(180deg, var(--soil-2), var(--soil)); }
.capacity__bar { height: 16px; border-radius: 10px; background: #0a0f08; border: 1px solid var(--line); overflow: hidden; margin: 12px 0 8px; }
.capacity__fill { height: 100%; width: 0; border-radius: 10px 0 0 10px;
  background: linear-gradient(90deg, var(--toxic-deep), var(--toxic-glow)); box-shadow: 0 0 18px rgba(131,229,9,.5);
  transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.capacity__row { display:flex; justify-content: space-between; font-family: var(--head); font-weight:600; letter-spacing:.04em; }

/* ── Divisions grid ──────────────────────────────────────────────────────── */
.div-chip { display:flex; align-items:center; justify-content:center; flex-direction: column; gap: 4px;
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, var(--soil-2), var(--soil));
  transition: .16s; }
.div-chip:hover { border-color: var(--toxic); transform: translateY(-3px); box-shadow: 0 0 30px rgba(131,229,9,.14); }
.div-chip b { font-family: var(--impact); font-size: 30px; color: var(--bone); }
.div-chip:hover b { color: var(--toxic); }
.div-chip span { font-family: var(--head); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ash-dim); }

/* ── Tables (schedule / standings / results) ─────────────────────────────── */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
table.data { width: 100%; border-collapse: collapse; min-width: 560px; }
table.data th { font-family: var(--head); text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; color: var(--toxic);
  text-align: left; padding: 12px 14px; background: var(--soil-3); border-bottom: 1px solid var(--line); white-space: nowrap; }
table.data td { padding: 12px 14px; border-bottom: 1px solid var(--line-2); font-size: 14.5px; }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: rgba(131,229,9,.04); }
.score-pill { font-family: var(--impact); font-size: 15px; letter-spacing: .04em; }
.win { color: var(--toxic); } .lose { color: var(--ash-dim); }
.badge { display:inline-block; font-family: var(--head); font-weight:600; font-size: 11px; letter-spacing:.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border:1px solid var(--line); color: var(--ash); }
.badge--live { color: var(--toxic); border-color: var(--toxic); background: rgba(131,229,9,.08); }
.badge--live::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%; background: var(--toxic); margin-right:6px; box-shadow: 0 0 8px var(--toxic); animation: pulse 1.4s infinite; vertical-align: middle; }
.badge--final { color: var(--ash); }
.badge--pool { color: var(--khaki); border-color: rgba(195,173,116,.4); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Brackets ────────────────────────────────────────────────────────────── */
.bracket-tabs { display:flex; gap:8px; flex-wrap: wrap; margin-bottom: 22px; }
.bracket-tabs button { font-family: var(--head); font-weight:600; text-transform: uppercase; letter-spacing:.08em; font-size:12.5px;
  padding: 9px 15px; border-radius: 8px; border:1px solid var(--line); background: var(--soil); color: var(--ash); cursor:pointer; transition:.15s; }
.bracket-tabs button:hover { color: var(--bone); border-color: var(--toxic); }
.bracket-tabs button.active { color:#0a1400; background: linear-gradient(180deg, var(--toxic-glow), var(--toxic-deep)); border-color: transparent; }
.bracket-flow { display:flex; gap: 42px; overflow-x: auto; padding: 10px 4px 24px; }
.bracket-round { display:flex; flex-direction: column; justify-content: space-around; gap: 20px; min-width: 232px; }
.bracket-round__title { font-family: var(--head); text-transform: uppercase; letter-spacing:.16em; font-size: 11px; color: var(--toxic); margin-bottom: 4px; }
.match { position: relative; background: linear-gradient(180deg, var(--soil-2), var(--soil)); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.match__row { display:flex; align-items:center; justify-content: space-between; padding: 9px 12px; font-size: 14px; }
.match__row + .match__row { border-top: 1px solid var(--line-2); }
.match__team { font-family: var(--head); font-weight: 600; letter-spacing:.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.match__team.tbd { color: var(--ash-dim); font-weight: 400; font-style: italic; }
.match__score { font-family: var(--impact); font-size: 16px; margin-left: 10px; color: var(--ash); }
.match__row.won .match__team { color: var(--toxic); } .match__row.won .match__score { color: var(--toxic); }
.match__row.won::before { content:''; position:absolute; left:0; width:3px; height:calc(50% - 1px); background: var(--toxic); box-shadow: 0 0 10px var(--toxic); }
.match__meta { padding: 6px 12px; font-family: var(--head); font-size: 10.5px; letter-spacing:.1em; text-transform: uppercase; color: var(--ash-dim); background: rgba(0,0,0,.25); border-top:1px solid var(--line-2); display:flex; justify-content: space-between; }
.champ-banner { text-align:center; padding: 26px; border:1px solid var(--gold); border-radius: 14px; background: radial-gradient(circle at 50% 0, rgba(216,178,74,.14), transparent 70%), linear-gradient(180deg, var(--soil-2), var(--soil)); }
.champ-banner .lbl { font-family: var(--head); letter-spacing:.24em; text-transform: uppercase; font-size: 12px; color: var(--gold); }
.champ-banner .name { font-family: var(--impact); font-size: clamp(24px,4vw,40px); color: var(--bone); text-shadow: 0 0 22px rgba(216,178,74,.4); }

/* ── Sponsors ────────────────────────────────────────────────────────────── */
.sponsor-row { display:flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.sponsor { font-family: var(--head); font-weight:600; letter-spacing:.04em; color: var(--ash); border:1px solid var(--line); border-radius: 999px; padding: 10px 18px; font-size: 13.5px; transition:.15s; }
.sponsor:hover { color: var(--khaki); border-color: rgba(195,173,116,.5); }

/* ── Military section theming ────────────────────────────────────────────── */
.mil { --toxic: var(--khaki); }
.mil .section-title em { color: var(--khaki); text-shadow: 0 0 20px rgba(195,173,116,.35); }
.mil .eyebrow { color: var(--khaki); } .mil .eyebrow::before { background: var(--khaki); box-shadow: 0 0 8px var(--khaki); }
.dogtag { display:inline-flex; align-items:center; gap:10px; font-family: var(--stencil); letter-spacing:.06em; color: var(--khaki);
  border:1px solid rgba(195,173,116,.4); border-radius: 999px; padding: 8px 16px; background: rgba(124,138,63,.08); }

/* ── Info / prose ────────────────────────────────────────────────────────── */
.prose h3 { font-family: var(--head); text-transform: uppercase; letter-spacing:.04em; color: var(--toxic); margin-top: 1.6em; font-size: 19px; }
.prose ul { padding-left: 20px; } .prose li { margin: .4em 0; color: var(--ash); }
.prose strong { color: var(--bone); }
.rulecard { border:1px solid var(--line); border-radius: 12px; padding: 22px 24px; background: linear-gradient(180deg,var(--soil-2),var(--soil)); }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--soil), var(--void)); padding: 54px 0 34px; margin-top: 40px; }
.footer__grid { display:grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; }
.footer h4 { font-family: var(--head); text-transform: uppercase; letter-spacing:.14em; font-size: 12px; color: var(--toxic); }
.footer a { color: var(--ash); font-size: 14px; display:block; padding: 4px 0; }
.footer a:hover { color: var(--toxic); }
.footer__bottom { border-top: 1px solid var(--line-2); margin-top: 34px; padding-top: 20px; display:flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: var(--ash-dim); font-size: 12.5px; }
/* The footer's nav links are block level; the credit line needs an inline one. */
.footer__bottom a { display: inline; padding: 0; font-size: inherit; color: var(--ash);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.footer__bottom a:hover { color: var(--toxic); }
.footer__disc { font-size: 11.5px; color: var(--ash-dim); max-width: 60ch; margin-top: 8px; }

/* ── Reveal on scroll ────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
/* Nav: the bar is capped at 1180px wide no matter how big the screen is, which
   leaves 1136px inside the padding, minus the 121px brand. Eleven links plus the
   Register button fit on one row only with the short "Zombie" label AND 10px link
   padding; with "Zombie SlugFest" and 12px padding the row wrapped at EVERY width,
   since a wider screen never widens this bar. Below 1240px the menu button takes over,
   earlier than the rest of the tablet layout, which stays at 900px.
   ⚠ Adding a nav link or lengthening a label means measuring this again. */
@media (max-width: 1240px) {
  .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: rgba(8,11,8,.98); border-bottom: 1px solid var(--line); padding: 8px 14px 16px; }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 12px 10px; border-bottom: 1px solid var(--line-2); }
  .nav__cta { margin: 8px 0 0; }
  .nav__toggle { display: flex; margin-left: auto; }
}
@media (max-width: 900px) {
  .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
  .nav__links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch;
    background: rgba(8,11,8,.98); border-bottom: 1px solid var(--line); padding: 8px 14px 16px; }
  .nav__links.open { display: flex; }
  .nav__links a { padding: 12px 10px; border-bottom: 1px solid var(--line-2); }
  .nav__cta { margin: 8px 0 0; }
  .nav__toggle { display: flex; margin-left: auto; }
}
@media (max-width: 560px) {
  .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .hero { padding: 64px 0 56px; }
  .section { padding: 54px 0; }
  .count-cell { min-width: 72px; padding: 12px 14px; }
  .count-cell b { font-size: 30px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   INTERACTIVE BRACKET CANVAS (D27/STS-style) — path-trace + connectors + zoom
   ═══════════════════════════════════════════════════════════════════════════ */

/* Team badge (hashed color + monogram; no logos needed) */
.afsf-badge { display:inline-flex; align-items:center; justify-content:center; border-radius:6px; color:#fff;
  font-family:var(--head); font-weight:700; flex:0 0 auto; letter-spacing:.02em; line-height:1;
  text-shadow:0 1px 2px rgba(0,0,0,.55); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14); }
.afsf-badge--ghost { background:#1b231710; color:var(--ash-dim); box-shadow:inset 0 0 0 1px var(--line-2); }

/* Division chips (tabs) */
.bk-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.bk-chip { font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.07em; font-size:12.5px;
  padding:9px 15px; border-radius:8px; border:1px solid var(--line); background:var(--soil); color:var(--ash); cursor:pointer; transition:.15s; }
.bk-chip:hover { color:var(--bone); border-color:var(--toxic); }
.bk-chip.active { color:#0a1400; background:linear-gradient(180deg,var(--toxic-glow),var(--toxic-deep)); border-color:transparent; }

/* Toolbar: hint + zoom */
.bk-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:14px 0 6px; }
.bk-hint { font-size:12.5px; color:var(--ash-dim); font-family:var(--head); letter-spacing:.02em; }
.bk-following { color:var(--toxic); cursor:pointer; border:1px solid var(--toxic); border-radius:999px; padding:5px 12px;
  background:rgba(131,229,9,.08); font-weight:600; }
.bk-following b { color:var(--bone); }
.bk-zoomctl { display:inline-flex; align-items:center; gap:4px; }
.bk-zoomctl button { font-family:var(--head); font-weight:700; font-size:14px; min-width:34px; height:32px; padding:0 10px;
  border:1px solid var(--line); background:var(--soil); color:var(--bone); border-radius:8px; cursor:pointer; transition:.14s; }
.bk-zoomctl button:hover { border-color:var(--toxic); color:var(--toxic); }
.bk-zoomctl span { font-family:var(--head); font-size:12px; color:var(--ash); min-width:44px; text-align:center; }

/* Canvas + connectors */
.bk-zoomwrap { position:relative; }
.bk-scroll { overflow-x:auto; overflow-y:hidden; padding:12px 2px 22px; }
.bk-canvas { position:relative; }
.bk-canvas svg { position:absolute; inset:0; pointer-events:none; overflow:visible; }

/* Match card — absolute positioned; fixed chrome height 132 (24+34+34+40) */
.bk-match { position:absolute; width:210px; box-sizing:border-box; border-radius:10px; overflow:hidden; z-index:2; cursor:pointer;
  background:linear-gradient(180deg,var(--soil-2),var(--soil));
  box-shadow:0 0 0 1px var(--line), 0 8px 20px rgba(0,0,0,.45); transition:box-shadow .15s ease, transform .12s ease; }
.bk-match::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--toxic-deep); z-index:3; }
.bk-match.acc-l::before { background:var(--blood); }
.bk-match.acc-f::before { background:var(--gold); }
.bk-match:hover, .bk-match:focus-visible { transform:translateY(-3px); outline:none;
  box-shadow:0 0 0 1px var(--toxic), 0 0 26px rgba(131,229,9,.30), 0 12px 30px rgba(0,0,0,.6); z-index:6; }
.bk-match.acc-f { box-shadow:0 0 0 1px var(--gold), 0 0 26px rgba(216,178,74,.22), 0 10px 24px rgba(0,0,0,.5); }
.bk-match.live::before { background:var(--toxic); box-shadow:0 0 12px var(--toxic); }

.bk-mtop { display:flex; align-items:center; justify-content:space-between; height:24px; padding:0 10px 0 12px;
  box-shadow:inset 0 -1px 0 var(--line-2); background:rgba(0,0,0,.22); }
.bk-mtop .g { font-family:var(--head); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ash-dim); }
.bk-mtop .tag { font-family:var(--head); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--ash); display:inline-flex; align-items:center; gap:5px; }
.bk-mtop .tag.live { color:var(--toxic); }
.bk-mtop .tag.done { color:var(--ash-dim); }
.bk-livedot { width:6px; height:6px; border-radius:50%; background:var(--toxic); box-shadow:0 0 7px var(--toxic); animation:pulse 1.4s infinite; }
.acc-f .bk-mtop { background:linear-gradient(180deg,rgba(216,178,74,.16),transparent); }
.acc-f .bk-mtop .g { color:var(--gold); }

.bk-side { display:flex; align-items:center; gap:8px; padding:0 10px 0 12px; height:34px; box-sizing:border-box; transition:background .14s ease; }
.bk-side + .bk-side { box-shadow:inset 0 1px 0 var(--line-2); }
.bk-side .nm { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:var(--head); font-weight:600; font-size:13px; color:var(--bone); }
.bk-side.tbd .nm { color:var(--ash-dim); font-weight:400; font-style:italic; }
.bk-side .nm .via { font-size:9.5px; color:var(--ash-dim); font-weight:500; margin-left:5px; font-style:normal; }
.bk-side .bk-seed { color:var(--blood); font-weight:700; margin-right:5px; font-size:10.5px; }
.bk-side .sc { font-family:var(--impact); font-size:15px; min-width:18px; text-align:center; color:var(--ash); }
.bk-side.win .nm { color:var(--toxic); } .bk-side.win .sc { color:var(--toxic); }

/* Path highlight (hover + pin) */
.bk-side[data-team] { cursor:pointer; }
.bk-side.path-hi { background:rgba(131,229,9,.15); box-shadow:inset 0 0 0 1px rgba(131,229,9,.55); }
.bk-canvas.bk-tracing .bk-side[data-team]:not(.path-hi) { opacity:.34; }

.bk-mfoot { height:40px; box-sizing:border-box; padding:5px 10px 6px 12px; display:flex; flex-direction:column; justify-content:center;
  gap:2px; box-shadow:inset 0 1px 0 var(--line-2); background:rgba(0,0,0,.18); }
.bk-when { font-family:var(--head); font-size:10.5px; letter-spacing:.04em; color:var(--ash); text-transform:uppercase; }
.bk-frow { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.bk-field { font-size:10.5px; color:var(--ash-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.bk-cue { font-family:var(--head); font-size:10.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--toxic); flex:0 0 auto; }
.bk-cue.recap { color:var(--gold); }

/* Champion banner */
.bk-champion { display:flex; align-items:center; gap:22px; padding:20px 26px; margin:8px 0 12px; border-radius:16px;
  border:1px solid var(--toxic); background:radial-gradient(circle at 14% 10%,rgba(131,229,9,.14),transparent 62%),linear-gradient(180deg,var(--soil-2),var(--soil));
  box-shadow:0 0 34px rgba(131,229,9,.14); animation:champShine 3s ease-in-out infinite; }
@keyframes champShine { 0%,100%{box-shadow:0 0 28px rgba(131,229,9,.12)} 50%{box-shadow:0 0 46px rgba(131,229,9,.28)} }
.bk-champion .bk-trophy-img { width:clamp(78px,11vw,116px); height:auto; border-radius:12px; flex:0 0 auto;
  box-shadow:0 10px 30px rgba(0,0,0,.55), 0 0 26px rgba(131,229,9,.14); }
.bk-champion .ct { flex:1; min-width:0; }
.bk-champion .tourn { font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:var(--ash); }
.bk-champion .lbl { font-family:var(--head); letter-spacing:.22em; text-transform:uppercase; font-size:10.5px; color:var(--toxic); margin:3px 0; }
.bk-champion .team { font-family:var(--impact); font-size:clamp(26px,4vw,44px); color:var(--bone); line-height:1; text-shadow:0 0 22px rgba(131,229,9,.35); }
.bk-champion .bk-champ-photo { margin-top:12px; display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  font-family:var(--head); text-transform:uppercase; letter-spacing:.08em; font-size:12px; color:#0a1400;
  background:var(--toxic); border:none; border-radius:999px; padding:9px 18px; box-shadow:0 6px 18px rgba(131,229,9,.28); }
.bk-champion .bk-champ-photo:hover { filter:brightness(1.08); }
.bk-champion .bk-tlogo .afsf-badge { border-radius:12px; }
@media (max-width:560px){ .bk-champion .bk-tlogo { display:none; } .bk-champion { padding:16px; gap:14px; } }
/* Who's Coming (pre-tournament registered-teams list) */
.wc-div { margin-bottom:28px; }
.wc-divlabel { font-family:var(--head); text-transform:uppercase; letter-spacing:.08em; color:var(--toxic); font-size:16px; border-bottom:1px solid var(--line-2); padding-bottom:8px; margin-bottom:14px; }
.wc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:10px; }
.wc-team { display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--line-2); border-radius:10px; background:rgba(0,0,0,.22); }
.wc-team .afsf-badge { flex:0 0 auto; }
.wc-tinfo { min-width:0; }
.wc-tname { color:var(--bone); font-size:14px; font-weight:600; line-height:1.2; }
.wc-tmeta { color:var(--ash); font-size:12px; margin-top:2px; }

/* Winner-photo lightbox */
.bk-photo-ov { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.86); display:flex; align-items:center; justify-content:center; padding:24px; }
.bk-photo-box { position:relative; max-width:min(680px,92vw); }
.bk-photo-box img { width:100%; height:auto; max-height:86vh; object-fit:contain; border-radius:14px; border:1px solid var(--toxic); box-shadow:0 0 50px rgba(131,229,9,.2); }
.bk-photo-x { position:absolute; top:-14px; right:-14px; width:38px; height:38px; border-radius:50%; border:1px solid var(--line-2); background:var(--coal); color:var(--bone); font-size:16px; cursor:pointer; }

/* ═══════════════════════════════════════════════════════════════════════════
   GAME MODAL — preview / recap
   ═══════════════════════════════════════════════════════════════════════════ */
.gm-overlay { position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center; padding:20px;
  background:rgba(4,6,4,.78); backdrop-filter:blur(6px); }
.gm-overlay.open { display:flex; animation:gmFade .18s ease; }
@keyframes gmFade { from{opacity:0} to{opacity:1} }
.gm-card { position:relative; width:min(560px,100%); max-height:88vh; overflow:auto; border-radius:16px;
  border:1px solid var(--line); background:linear-gradient(180deg,var(--soil-2),var(--soil)); box-shadow:0 30px 80px rgba(0,0,0,.7), 0 0 40px rgba(131,229,9,.08);
  animation:gmPop .2s cubic-bezier(.2,.8,.2,1); }
@keyframes gmPop { from{transform:translateY(14px) scale(.98); opacity:0} to{transform:none; opacity:1} }
.gm-close { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:8px; border:1px solid var(--line);
  background:rgba(0,0,0,.3); color:var(--bone); cursor:pointer; font-size:14px; z-index:2; transition:.14s; }
.gm-close:hover { border-color:var(--blood); color:var(--blood); }
.gm-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:20px 52px 14px 22px; box-shadow:inset 0 -1px 0 var(--line-2); }
.gm-crumb { font-family:var(--head); font-size:12px; letter-spacing:.04em; color:var(--ash); text-transform:uppercase; }
.gm-badge { font-family:var(--head); font-weight:700; text-transform:uppercase; letter-spacing:.1em; font-size:11px; padding:5px 11px; border-radius:999px; border:1px solid var(--line); flex:0 0 auto; }
.gm-badge.preview { color:var(--toxic); border-color:var(--toxic); background:rgba(131,229,9,.08); }
.gm-badge.final { color:var(--gold); border-color:var(--gold); background:rgba(216,178,74,.08); }
.gm-badge.forfeit, .gm-badge.ppd { color:var(--blood); border-color:var(--blood); background:rgba(193,16,23,.08); }
.gm-body { padding:22px; }
.gm-matchup { display:flex; align-items:center; justify-content:center; gap:20px; margin-bottom:8px; }
.gm-team { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; flex:1; min-width:0; }
.gm-team .afsf-badge { border-radius:14px; }
.gm-team.tbd .gm-tn { color:var(--ash-dim); font-style:italic; }
.gm-tn { font-family:var(--head); font-weight:600; font-size:15px; color:var(--bone); }
.gm-seed { display:inline-block; color:var(--blood); font-family:var(--head); font-weight:700; font-size:12px; margin-top:2px; }
.gm-vs { font-family:var(--impact); font-size:20px; color:var(--toxic); flex:0 0 auto; }
.gm-meta { text-align:center; font-family:var(--head); font-size:12.5px; letter-spacing:.03em; color:var(--ash); margin-bottom:16px; }
.gm-sec h4 { font-family:var(--head); text-transform:uppercase; letter-spacing:.12em; font-size:11px; color:var(--toxic); margin:0 0 8px; }
.gm-recap { color:var(--bone); font-size:15px; line-height:1.62; margin:0; }
.gm-byewrap { display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:16px; }
.gm-byewrap .gm-team { font-family:var(--impact); font-size:24px; color:var(--bone); }
.gm-score { display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
.gm-srow { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 14px; border-radius:10px; border:1px solid var(--line-2); background:rgba(0,0,0,.2); }
.gm-srow.win { border-color:var(--toxic); background:rgba(131,229,9,.08); }
.gm-srow .t { display:flex; align-items:center; gap:10px; min-width:0; }
.gm-srow .t .afsf-badge { border-radius:9px; }
.gm-srow .gm-tn { font-size:15px; }
.gm-srow .s { font-family:var(--impact); font-size:24px; color:var(--ash); }
.gm-srow.win .gm-tn, .gm-srow.win .s { color:var(--toxic); }
.gm-ppd-note { margin-top:14px; padding:10px 14px; border-radius:10px; border:1px solid var(--blood); background:rgba(193,16,23,.08); color:var(--blood); font-family:var(--head); font-size:12.5px; letter-spacing:.04em; }
.gm-foot { padding:0 22px 22px; }
.gm-bracket-btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:12.5px; color:var(--toxic); padding:10px 16px; border:1px solid var(--line); border-radius:9px; transition:.15s; }
.gm-bracket-btn:hover { border-color:var(--toxic); background:rgba(131,229,9,.06); }

@media (max-width:600px){ .bk-zoomctl { display:none; } .gm-card { max-height:92vh; } .gm-matchup { gap:12px; } }

/* Clickable schedule/results rows → open the preview/recap modal */
table.data tr.row-click { cursor:pointer; }
table.data tr.row-click:hover { background:rgba(131,229,9,.06); }
.row-cue { font-family:var(--head); font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--toxic); margin-left:8px; white-space:nowrap; }

/* ── Registration form ──────────────────────────────────────────────────── */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px 20px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field.full { grid-column:1 / -1; }
.field label { font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.07em; font-size:11.5px; color:var(--ash); }
.field label .req { color:var(--blood); }
.field label .hint { color:var(--ash-dim); font-weight:400; text-transform:none; letter-spacing:0; font-size:11.5px; }
.field input, .field select {
  font-family:var(--sans); font-size:15px; color:var(--bone); background:rgba(0,0,0,.32);
  border:1px solid var(--line); border-radius:10px; padding:12px 14px; width:100%; transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus { outline:none; border-color:var(--toxic); box-shadow:0 0 0 3px rgba(131,229,9,.14); }
.field input::placeholder { color:var(--ash-dim); }
.field input:invalid:not(:placeholder-shown), .field select:invalid { border-color:rgba(193,16,23,.5); }
.field select { appearance:none; -webkit-appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%2383e509' stroke-width='2'%3E%3Cpath d='M3 5l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 13px center; padding-right:34px; }
.radio-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.radio-card { position:relative; border:1px solid var(--line); border-radius:10px; padding:12px 14px; cursor:pointer; transition:.15s; background:rgba(0,0,0,.25); }
.radio-card:hover { border-color:var(--toxic); }
.radio-card input { position:absolute; opacity:0; inset:0; cursor:pointer; }
.radio-card b { display:block; font-family:var(--impact); font-size:20px; color:var(--bone); line-height:1; }
.radio-card span { font-family:var(--head); font-size:11.5px; letter-spacing:.04em; color:var(--ash); }
.radio-card.selected, .radio-card:has(input:checked) { border-color:var(--toxic); background:rgba(131,229,9,.09); box-shadow:0 0 0 1px var(--toxic); }
.radio-card.selected b, .radio-card:has(input:checked) b { color:var(--toxic); }
.check-row { display:flex; gap:12px; align-items:flex-start; }
.check-row input { width:20px; height:20px; margin-top:2px; accent-color:var(--toxic); flex:0 0 auto; }
.check-row label { font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:14px; color:var(--ash); font-weight:400; line-height:1.5; }
.form-err { color:#ff6b6b; font-family:var(--head); font-size:13.5px; letter-spacing:.02em; }
.form-success { text-align:center; padding:30px 20px; }
.form-success .big { font-family:var(--impact); font-size:clamp(28px,4vw,42px); color:var(--toxic); text-shadow:0 0 20px rgba(131,229,9,.4); margin-top:6px; }
@media (max-width:600px){ .form-grid { grid-template-columns:1fr; } .radio-cards { grid-template-columns:1fr; } }

/* ── Hero with crest emblem (home) ──────────────────────────────────────── */
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.hero-copy { min-width:0; position:relative; z-index:3; }
/* black halo bleeds the crest's black background into the hero so there's no
   visible rectangle/box edge; no coloured glow (that made it look pasted-on). */
.hero-crest { position:relative; margin:0; line-height:0; display:flex; justify-content:center; }
.hero-crest::before {
  content:''; position:absolute; left:52%; top:50%; width:150%; height:150%;
  transform:translate(-50%,-50%); z-index:0; pointer-events:none;
  background: radial-gradient(ellipse at center, #000 58%, rgba(2,4,2,.45) 76%, transparent 93%);
}
.hero-crest img { position:relative; z-index:1; width:100%; max-width:480px; height:auto; display:block;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.85));
  -webkit-mask-image: radial-gradient(ellipse farthest-side at 50% 50%, #000 84%, transparent 99%);
          mask-image: radial-gradient(ellipse farthest-side at 50% 50%, #000 84%, transparent 99%); }
@media (max-width:880px) {
  .hero-grid { grid-template-columns:1fr; gap:20px; text-align:center; }
  .hero-crest { order:-1; }
  .hero-crest img { max-width:380px; }
  .hero-crest::before { width:132%; height:124%; }
  .hero-copy .hero__meta, .hero-copy .hero__actions, .hero-copy .countdown { justify-content:center; }
  .hero-copy .lede { margin-left:auto; margin-right:auto; }
}

/* ── Admin (registrations & payments) ───────────────────────────────────── */
.admin-top { border-bottom:1px solid var(--line); background:rgba(8,11,8,.9); backdrop-filter:blur(10px); position:sticky; top:0; z-index:60; }
.admin-top__in { max-width:1240px; margin:0 auto; padding:12px 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.admin-top .who { font-family:var(--head); text-transform:uppercase; letter-spacing:.12em; font-size:12px; color:var(--ash); }
.admin-top .who b { color:var(--toxic); }
.admin-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:18px 0 20px; }
.admin-toolbar input[type=search], .admin-toolbar select {
  font-family:var(--sans); font-size:14px; color:var(--bone); background:rgba(0,0,0,.32); border:1px solid var(--line);
  border-radius:9px; padding:9px 12px; }
.admin-toolbar input[type=search]:focus, .admin-toolbar select:focus { outline:none; border-color:var(--toxic); }
.fchip { font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:12px; padding:8px 14px;
  border-radius:999px; border:1px solid var(--line); background:var(--soil); color:var(--ash); cursor:pointer; transition:.14s; }
.fchip:hover { color:var(--bone); border-color:var(--toxic); }
.fchip.active { color:#0a1400; background:linear-gradient(180deg,var(--toxic-glow),var(--toxic-deep)); border-color:transparent; }
.badge--paid { color:var(--toxic); border-color:var(--toxic); background:rgba(131,229,9,.10); cursor:pointer; }
.badge--paid::before { content:'✓ '; }
.badge--unpaid { color:var(--blood); border-color:var(--blood); background:rgba(193,16,23,.10); cursor:pointer; }
.badge--unpaid::before { content:'● '; }

/* ── Full-bleed page banners (home + brackets headers) ──────────────────── */
.page-banner {
  width:100%; margin:0; display:block; background-color:#000;
  background-repeat:no-repeat; background-size:100% auto;   /* full width — never crops the sides */
}
/* height is a constant fraction of width (vw) so the crop ratio never changes
   with screen size — the logo/text can't get cut off. min floor for phones. */
/* all banners share the "brackets" treatment: full-width (100% auto), crop only
   the black top/bottom via a vw height + tuned vertical position per image. */
.page-banner--home {
  background-image:url('/assets/home-banner.jpg'); background-position:center 78%;
  height:max(210px, 23vw);
}
.page-banner--brackets {
  background-image:url('/assets/brackets-banner.jpg'); background-position:center 50%;
  height:max(160px, 20vw);
}
.page-banner--schedule {
  background-image:url('/assets/schedule-banner.jpg'); background-position:center 72%;
  height:max(180px, 23vw);
}
.page-banner--scores {
  background-image:url('/assets/scores-banner.jpg'); background-position:center 72%;
  height:max(180px, 23vw);
}
.page-banner--register {
  background-image:url('/assets/register-banner.jpg'); background-position:center 54%;
  height:max(170px, 22vw);
}
.page-banner--armed {
  background-image:url('/assets/armed-banner.jpg'); background-position:center 50%;
  height:max(200px, 27vw);
}
/* Mobile: the full-width fit leaves the header tiny in a big black box. Zoom the
   image IN so the centered wordmark fills the header and the black padding crops away. */
@media (max-width: 640px) {
  .page-banner { background-size:auto 150%; background-position:center center; }
  .page-banner--home,
  .page-banner--brackets,
  .page-banner--schedule,
  .page-banner--scores,
  .page-banner--register,
  .page-banner--armed { height:210px; }
}
.hero--compact { padding:6px 0 56px; }

/* ── Game-card grid (schedule + scores) — like the DVSL/D27 card grid ────── */
.daylabel { font-family:var(--head); text-transform:uppercase; letter-spacing:.05em; color:var(--toxic); font-size:19px; margin:0 0 16px; }
.daylabel span { color:var(--bone); }
.game-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
@media (max-width:760px) { .game-grid { grid-template-columns:1fr; } }
.game-card { position:relative; border-radius:12px; overflow:hidden; background:linear-gradient(180deg,var(--soil-2),var(--soil));
  box-shadow:0 0 0 1px var(--line), 0 8px 20px rgba(0,0,0,.4); transition:box-shadow .15s ease, transform .12s ease; }
.game-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--toxic-deep); z-index:2; }
.game-card.acc-f::before { background:var(--gold); }
.game-card.live::before { background:var(--toxic); box-shadow:0 0 12px var(--toxic); }
.game-card.clickable { cursor:pointer; }
.game-card.clickable:hover, .game-card.clickable:focus-visible { transform:translateY(-2px); outline:none;
  box-shadow:0 0 0 1px var(--toxic), 0 0 22px rgba(131,229,9,.22), 0 12px 26px rgba(0,0,0,.55); }
.game-card__top { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 14px; background:rgba(0,0,0,.26);
  box-shadow:inset 0 -1px 0 var(--line-2); font-family:var(--head); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ash-dim); }
.game-card__top .badge { flex:0 0 auto; }
.game-card__team { display:flex; align-items:center; gap:11px; padding:11px 14px; }
.game-card__team + .game-card__team { box-shadow:inset 0 1px 0 var(--line-2); }
.game-card__team .nm { flex:1; min-width:0; font-family:var(--head); font-weight:600; font-size:15px; color:var(--bone); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.game-card__team.tbd .nm { color:var(--ash-dim); font-weight:400; font-style:italic; }
.game-card__team .sc { font-family:var(--impact); font-size:21px; color:var(--ash); min-width:26px; text-align:center; }
.game-card__team.win .nm, .game-card__team.win .sc { color:var(--toxic); }
.game-card__foot { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 14px; background:rgba(0,0,0,.18); box-shadow:inset 0 1px 0 var(--line-2); }
.game-card__foot .rd { font-family:var(--head); font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--ash-dim); }
.game-card__cue { font-family:var(--head); font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--toxic); }
.game-card__cue.recap { color:var(--gold); }

/* game-card footer buttons: Recap/Preview (modal) + Bracket (link) */
.gc-btns { display:inline-flex; gap:8px; flex:0 0 auto; }
.gc-btn { display:inline-flex; align-items:center; font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.04em;
  font-size:11px; padding:6px 12px; border-radius:7px; border:1px solid var(--line); background:rgba(0,0,0,.32); color:var(--ash); cursor:pointer; transition:.14s; white-space:nowrap; }
.gc-btn:hover { border-color:var(--toxic); color:var(--toxic); background:rgba(131,229,9,.08); }
/* Tap the field name for directions. Dotted underline so it reads as a link without
   shouting over the team names. */
.gc-field, .gm-meta .gc-field { color:inherit; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px; }
.gc-field:hover, .gm-meta .gc-field:hover { color:var(--toxic); }
.gc-btn--go { color:var(--toxic); border-color:rgba(131,229,9,.42); }
.gc-btn--go:hover { background:rgba(131,229,9,.12); }

/* ── Admin tabs + schedule/scores editor ────────────────────────────────── */
.admin-tabs { display:flex; gap:6px; margin-bottom:22px; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.atab { font-family:var(--head); font-weight:600; text-transform:uppercase; letter-spacing:.05em; font-size:13px; padding:11px 16px; border:none; background:none; color:var(--ash); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px; }
.atab:hover { color:var(--bone); }
.atab.active { color:var(--toxic); border-bottom-color:var(--toxic); }
.ed-chips { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px; }
.ed-in { font-family:var(--sans); font-size:13px; color:var(--bone); background:rgba(0,0,0,.3); border:1px solid var(--line); border-radius:6px; padding:6px 8px; width:100%; box-sizing:border-box; }
.ed-in:focus { outline:none; border-color:var(--toxic); }
.ed-sc { width:58px; text-align:center; font-family:var(--impact); font-size:16px; }
#edTable th { white-space:nowrap; }
#edTable td { padding:7px 9px; }
#edTable input[type=date].ed-in { min-width:130px; } #edTable input[type=time].ed-in { min-width:96px; }

/* ── Photo gallery (director-posted photos via the inline editor) ─────────── */
.afsf-gal { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr)); gap:14px; align-items:start; }
.afsf-gal-item { margin:0; border-radius:12px; overflow:hidden; background:rgba(0,0,0,.3); border:1px solid var(--line-2); }
.afsf-gal-item img { width:100%; height:210px; object-fit:cover; display:block; }
.afsf-gal-item figcaption { padding:8px 12px; font-size:13px; color:var(--ash); line-height:1.4; }

/* Click a gallery photo to see it full size. The overlay shows the whole picture,
   never a crop, and sits above the sticky header. */
.afsf-gal-item img { cursor:zoom-in; }
body.afsf-editing .afsf-gal-item img { cursor:default; }
.afsf-lb { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center;
  background:rgba(3,6,2,.97); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); padding:20px; }
.afsf-lb.open { display:flex; }
body.afsf-lb-open { overflow:hidden; }
.afsf-lb-fig { margin:0; max-width:100%; max-height:100%; display:flex; flex-direction:column; align-items:center; gap:12px; }
.afsf-lb-fig img { max-width:min(100%,1200px); max-height:min(78vh, calc(100vh - 150px)); width:auto; height:auto; object-fit:contain;
  border-radius:10px; box-shadow:0 18px 60px rgba(0,0,0,.6); }
.afsf-lb-fig figcaption { color:var(--bone); font-size:15px; line-height:1.45; text-align:center;
  max-width:60ch; padding:0 8px; }
.afsf-lb-btn { position:absolute; background:rgba(0,0,0,.55); color:var(--bone); border:1px solid var(--line-2);
  border-radius:999px; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center;
  font-family:var(--head); }
.afsf-lb-btn:hover { background:rgba(0,0,0,.8); border-color:var(--toxic); color:var(--toxic); }
.afsf-lb-x { top:16px; right:16px; width:44px; height:44px; font-size:26px; }
.afsf-lb-prev, .afsf-lb-next { top:50%; transform:translateY(-50%); width:48px; height:48px; font-size:30px; }
.afsf-lb-prev { left:14px; } .afsf-lb-next { right:14px; }
@media (max-width:700px) {
  .afsf-lb { padding:12px; }
  .afsf-lb-fig img { max-height:min(72vh, calc(100vh - 130px)); }
  .afsf-lb-prev, .afsf-lb-next { width:42px; height:42px; font-size:26px; }
  .afsf-lb-prev { left:6px; } .afsf-lb-next { right:6px; }
}

/* Schedule: age-group + level sub-heading inside each day block. */
.divlabel { font-family:var(--head); text-transform:uppercase; letter-spacing:.06em; color:var(--bone);
  font-size:14px; margin:0 0 10px; padding-left:10px; border-left:3px solid var(--toxic); }

/* ── Messages board (homepage). Posts are plain text; see afsf-content.js. ── */
.afsf-posts { display:block; }
.afsf-post { padding:14px 0; border-top:1px solid var(--line-2); }
.afsf-post:first-child { border-top:0; padding-top:0; }
.afsf-post__meta { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-family:var(--head);
  text-transform:uppercase; letter-spacing:.1em; font-size:11px; color:var(--ash); }
.afsf-post__pin { background:var(--toxic); color:#0a1400; border-radius:999px; padding:2px 8px; letter-spacing:.06em; }
.afsf-post__title { margin:0 0 4px; font-family:var(--head); font-size:18px; letter-spacing:.02em; color:var(--bone); }
.afsf-post__body { color:var(--bone); line-height:1.6; overflow-wrap:anywhere; }
.afsf-post__body a { color:var(--toxic); text-decoration:underline; text-underline-offset:2px; }
.afsf-post__imglink { display:block; margin-top:12px; }
.afsf-post__img { display:block; max-width:100%; height:auto; border:1px solid var(--line-2); border-radius:10px; }
.afsf-post__imglink:hover .afsf-post__img { border-color:var(--toxic); }
.afsf-post__body--clip { max-height:13em; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent); mask-image:linear-gradient(180deg,#000 55%,transparent); }
.afsf-post__more { margin-top:6px; padding:4px 0; background:none; border:0; color:var(--toxic); cursor:pointer;
  font:600 14px/1.2 var(--sans, system-ui); text-decoration:underline; text-underline-offset:2px; }
.afsf-posts__older[hidden] { display:none !important; }
.afsf-posts__more { margin-top:10px; background:rgba(131,229,9,.06); border:1px solid var(--toxic-deep); color:var(--toxic); border-radius:999px;
  padding:7px 14px; font-family:var(--head); text-transform:uppercase; letter-spacing:.08em; font-size:11px; cursor:pointer; }
.afsf-posts__more:hover { color:var(--toxic); border-color:var(--toxic); }

/* Homepage "where things stand" panel (replaced a static, wrong capacity meter). */
.evstats .evstat { padding:12px 0; border-top:1px solid var(--line-2); }
.evstats .evstat:first-child { border-top:0; padding-top:0; }
.evstat b { display:block; font-family:var(--head); text-transform:uppercase; letter-spacing:.06em; font-size:15px; }
.evstat span { display:block; color:var(--ash); font-size:14px; margin-top:4px; line-height:1.5; }
.evstat a { color:var(--toxic); }

/* ── Called-off games (postponed / cancelled) ──────────────────────────────
   The director's rain call. The card stays on the schedule so teams can see
   what happened, but it reads as struck through rather than upcoming. */
.badge--off { color: var(--blood); border-color: var(--blood); background: rgba(193,16,23,.10); }
.game-card--off { opacity: .72; }
.game-card--off::before { background: var(--blood); }
.game-card--off .game-card__top > span:first-child { text-decoration: line-through; text-decoration-thickness: 1px; }
.bk-match.off { opacity: .72; }
.bk-mtop .tag.off { color: var(--blood); border-color: var(--blood); background: rgba(193,16,23,.10); }
.footer__visits { color: var(--ash); opacity: .8; }
.bk-missing { text-align:center; margin:0 0 6px; padding:12px 16px; border:1px solid var(--blood);
  background:rgba(193,16,23,.08); border-radius:10px; color:var(--bone);
  font-family:var(--head); font-size:14px; letter-spacing:.02em; }

/* ── FRONT DOORS ───────────────────────────────────────────────────────────
   One set of files serves both addresses (see js/afsf-host.js). Anything that
   belongs to only one tournament is marked, and the door hides the other one.
   !important because these blocks carry inline display styles, and the
   attribute is set in the head so nothing flashes before it applies.        */
[data-site="zombie"] [data-site-only="armed"],
[data-site="armed"]  [data-site-only="zombie"] { display: none !important; }
/* With the other tournament's panel hidden, the two-up register grid would
   leave the remaining panel stranded in half the row. */
[data-site="zombie"] .reg-doors { grid-template-columns: minmax(0, 1fr); max-width: 560px; }