/* =========================================
   ICSA — Indoor Cricket South Africa
   main.css
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,600;1,9..40,300&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink:    #060e07;
  --pine:   #00420d;
  --turf:   #006b1b;
  --lime:   #4cd964;
  --mist:   #e8f2e9;
  --white:  #ffffff;
  --gray:   #8a9c8b;
  --border: rgba(0,66,13,0.12);

  --display: 'Bebas Neue', sans-serif;
  --body:    'DM Sans', sans-serif;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;

  --transition: 0.28s cubic-bezier(0.4,0,0.2,1);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--body);
  background: var(--white);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ─── UTILITIES ───────────────────────────── */
.container { width: min(1160px, 100%); margin-inline: auto; padding-inline: 24px; }

.section-label {
  font-family: var(--body);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--lime);
}
.section-title {
  font-family: var(--display);
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1; color: var(--ink); margin-top: 6px;
}
.divider { width: 40px; height: 3px; background: var(--lime); border-radius: 2px; margin-top: 14px; }

/* ─── NAV ─────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(8px);
}
.nav-inner {
  display: flex; align-items: center;
  justify-content: space-between; height: 64px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
}
.nav-logo img { height: 40px; width: auto; }
.nav-logo-text { font-family: var(--display); font-size: 22px; line-height: 1; letter-spacing: 0.04em; }
.nav-logo-sub  { font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gray); margin-top: 2px; }

.nav-links { display: flex; align-items: center; gap: 32px; list-style: none; }
.nav-links a {
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; text-decoration: none;
  color: var(--ink); transition: color var(--transition);
}
.nav-links a:hover { color: var(--turf); }
.nav-login-btn {
  background: rgba(76,217,100,0.12) !important;
  border: 1px solid rgba(76,217,100,0.3) !important;
  border-radius: 6px !important;
  padding: 5px 14px !important;
  color: var(--lime) !important;
  font-weight: 700 !important;
  transition: background var(--transition), border-color var(--transition) !important;
}
.nav-login-btn:hover {
  background: rgba(76,217,100,0.2) !important;
  border-color: var(--lime) !important;
}
.nav-login-secondary {
  font-size: 11px !important;
  padding: 5px 11px !important;
  opacity: 0.75;
}
.nav-login-secondary:hover { opacity: 1; }
.nav-login-group {
  display: flex; align-items: center; gap: 6px;
}
  background: var(--pine) !important; color: var(--white) !important;
  padding: 8px 18px; border-radius: var(--r-sm);
}
.nav-cta:hover { background: var(--turf) !important; }

.hamburger { display: none; background: none; border: none; cursor: pointer; padding: 4px; }
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--ink); margin: 5px 0;
  border-radius: 1px; transition: var(--transition);
}

/* ─── HERO ────────────────────────────────── */
.hero {
  background: var(--pine);
  min-height: 88vh;
  position: relative; overflow: hidden;
  display: grid; place-items: center;
}
/* Dynamic photo background — filled by JS gallery rotation */
#heroImage {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* Temporary layer used to crossfade between hero images without display:none */
.hero-fade-layer {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 800ms ease;
  pointer-events: none;
}
.hero-fade-layer.show { opacity: 1; }
.hero-bg {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 60% 60% at 70% 50%, rgba(76,217,100,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 80% 80% at 20% 80%, rgba(0,107,27,0.42) 0%, transparent 60%),
    linear-gradient(135deg, rgba(0,42,10,0.74) 0%, rgba(0,74,18,0.68) 45%, rgba(0,56,26,0.72) 100%);
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(76,217,100,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,217,100,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.hero-content {
  position: relative; z-index: 2;
  text-align: center; padding: 80px 24px;
  max-width: 800px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(76,217,100,0.12);
  border: 1px solid rgba(76,217,100,0.25);
  border-radius: 100px; padding: 6px 14px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--lime);
  margin-bottom: 28px;
}
.hero-badge-dot { width: 6px; height: 6px; background: var(--lime); border-radius: 50%; }
.hero-title {
  font-family: var(--display);
  font-size: clamp(52px, 10vw, 108px);
  line-height: 0.95; color: var(--white);
  letter-spacing: 0.01em; margin-bottom: 10px;
}
.hero-title span { color: var(--lime); }
.hero-sub {
  font-size: 16px; font-weight: 300;
  color: rgba(255,255,255,0.65);
  margin-top: 20px; margin-bottom: 40px;
  max-width: 500px; margin-inline: auto;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.btn-primary {
  background: var(--lime); color: var(--ink);
  font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 14px 28px; border-radius: var(--r-sm);
  text-decoration: none; border: none; cursor: pointer;
  transition: var(--transition);
}
.btn-primary:hover { background: #5fe870; transform: translateY(-1px); }

.btn-ghost {
  background: transparent; color: var(--white);
  font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 14px 28px; border-radius: var(--r-sm);
  text-decoration: none; border: 1px solid rgba(255,255,255,0.2);
  cursor: pointer; transition: var(--transition);
}
.btn-ghost:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }

/* Crowd silhouette at hero bottom */
.hero-crowd {
  position: absolute;
  bottom: -2px; left: 0;
  width: 100%; z-index: 3;
  line-height: 0; pointer-events: none;
}
.hero-crowd img {
  width: 100%; height: auto; display: block;
}

.hero-scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.3); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
}
.hero-scroll-line {
  width: 1px; height: 36px; background: rgba(255,255,255,0.2);
  animation: scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse {
  0%,100% { opacity:.2; height:24px; }
  50%      { opacity:.6; height:36px; }
}

/* ─── TOURNAMENT SECTION ─────────────────── */
.countdown-section { background: var(--ink); padding: 64px 0 48px; scroll-margin-top: 64px; }
.countdown-section .section-label { color: rgba(76,217,100,0.7); }
.countdown-section .section-title  { color: var(--white); }
.countdown-section .divider        { display: none; }

.tournament-section-inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* Featured tournament meta (above countdown) */
.featured-tournament-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-bottom: 16px; min-height: 24px;
}
.featured-name {
  font-family: var(--display); font-size: 28px;
  color: var(--white); line-height: 1; width: 100%;
}
.featured-category {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 6px;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.82);
}
.featured-date {
  font-size: 12px; color: var(--gray);
  display: flex; align-items: center; gap: 5px;
}
.featured-date svg { width: 12px; height: 12px; fill: var(--gray); flex-shrink: 0; }
.featured-venue {
  font-size: 12px; color: var(--gray);
  display: flex; align-items: center; gap: 5px;
}
.featured-venue svg { width: 12px; height: 12px; fill: var(--gray); flex-shrink: 0; }
.tournament-card-province {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--lime); display: flex; align-items: center; gap: 4px;
}
.tournament-card-province svg { width: 11px; height: 11px; fill: var(--lime); flex-shrink: 0; }
.countdown-units { display: flex; gap: 8px; align-items: center; }
.countdown-unit {
  text-align: center; min-width: 72px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-md); padding: 12px 8px 8px;
}
.countdown-num {
  font-family: var(--display); font-size: 36px;
  line-height: 1; color: var(--white); display: block;
}
.countdown-period {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gray); display: block; margin-top: 4px;
}
.countdown-sep {
  font-family: var(--display); font-size: 32px;
  color: var(--lime); line-height: 1;
}

/* Tournament list cards */
.tournament-divider {
  display: flex; align-items: center; gap: 14px;
  margin: 30px 0 20px;
}
.tournament-divider::before,
.tournament-divider::after {
  content: ''; flex: 1; height: 1px; background: rgba(255,255,255,0.12);
}
.tournament-divider span {
  font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gray); white-space: nowrap;
}
.tournament-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 14px;
}
@media (min-width: 1200px) {
  .tournament-list { grid-template-columns: repeat(3, 1fr); }
}
.tournament-card {
  position: relative;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--r-md);
  padding: 18px 20px 18px 22px;
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
}
.tournament-card::before {
  content: ''; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px;
  border-radius: 3px; background: var(--lime); opacity: 0.5;
}
.tournament-card:hover {
  border-color: rgba(76,217,100,0.35);
  background: rgba(255,255,255,0.055);
  transform: translateY(-2px);
}
.tournament-card:hover::before { opacity: 1; }

/* Faded year watermark — mirrors the past-tournament cards, tuned for the dark bg */
.tc-yearmark {
  position: absolute; top: 6px; right: 14px; z-index: 0;
  font-family: var(--display); font-size: 46px; line-height: 1;
  color: #fff; opacity: 0.06; pointer-events: none; user-select: none;
}
.tournament-card-header,
.tournament-card-meta,
.tournament-card-reg,
.tournament-card-fixtures { position: relative; z-index: 1; }

/* Large faded year beside the featured countdown */
.countdown-block { position: relative; }
.countdown-yearmark {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--display); font-size: 150px; line-height: 0.8;
  color: #fff; opacity: 0.045; pointer-events: none; user-select: none; z-index: 0;
}
.featured-tournament-meta,
.countdown-units { position: relative; z-index: 1; }
@media (max-width: 760px) {
  .countdown-yearmark { display: none; }
}
.tournament-card-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.tournament-card-name {
  font-size: 14px; font-weight: 600; color: var(--white); line-height: 1.3;
}
.tournament-card-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
  padding: 3px 9px; border-radius: 6px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.82); flex-shrink: 0;
  margin-top: 28px;
}
.tournament-card-meta {
  display: flex; flex-direction: column; gap: 4px;
}
.tournament-card-meta span {
  font-size: 12px; color: var(--gray);
  display: flex; align-items: center; gap: 6px;
}
.tournament-card-meta svg { width: 12px; height: 12px; fill: var(--gray); flex-shrink: 0; }
.tournament-card-reg,
a.tournament-card-reg {
  margin-top: 14px; display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 100px;
  background: var(--lime); color: var(--ink);
  border: 1px solid var(--lime);
}
a.tournament-card-reg {
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
a.tournament-card-reg:hover {
  background: #62e57a; border-color: #62e57a;
  box-shadow: 0 4px 14px rgba(76,217,100,0.25);
}
.tournament-card-reg.closed {  background: rgba(255,255,255,0.05); color: var(--gray);
  border-color: rgba(255,255,255,0.1);
}
.tournament-card-fixtures {
  margin-top: 14px; margin-left: 8px; display: inline-block;
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 100px; cursor: pointer;
  background: rgba(255,255,255,0.06); color: var(--mist);
  border: 1px solid rgba(255,255,255,0.18);
  transition: background var(--transition), border-color var(--transition);
}
.tournament-card-fixtures:hover {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35);
}
.tournament-list-empty {
  font-size: 13px; color: var(--gray); padding: 8px 0;
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .countdown-units { gap: 4px; }
  .countdown-unit  { min-width: 60px; }
  .countdown-num   { font-size: 28px; }
}

/* ─── AFFILIATES ──────────────────────────── */
.affiliates-section { padding: 72px 0; border-bottom: 1px solid var(--border); }
.affiliates-header  { margin-bottom: 40px; }
.logos-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.logo-chip {
  display: flex; align-items: center; gap: 8px;
  background: var(--mist); border: 1px solid var(--border);
  border-radius: 100px; padding: 8px 16px 8px 10px;
  transition: var(--transition);
}
.logo-chip:hover { border-color: var(--turf); background: rgba(0,107,27,0.05); }
.logo-chip img  { height: 28px; width: 28px; object-fit: contain; border-radius: 50%; }
.logo-chip span { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }

/* ── Affiliates: compact, expandable province cards ────────── */
.affiliates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
  align-items: start;
}
.affiliates-loading {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  color: var(--gray); font-size: 14px; padding: 24px 0;
}
.affiliates-spinner {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border); border-top-color: var(--turf);
  animation: aff-spin .8s linear infinite; display: inline-block;
}
@keyframes aff-spin { to { transform: rotate(360deg); } }

.prov-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  transition: box-shadow var(--transition), border-color var(--transition);
  opacity: 0; transform: translateY(10px);
  animation: prov-rise .45s forwards;
}
@keyframes prov-rise { to { opacity: 1; transform: translateY(0); } }
/* Accent bar that sweeps the brand gradient on the left edge */
.prov-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--lime), var(--turf), var(--pine));
  transform: scaleY(0); transform-origin: top; transition: transform var(--transition);
  z-index: 1;
}
.prov-card:hover { box-shadow: 0 10px 24px rgba(0,66,13,0.12); border-color: rgba(0,107,27,0.30); }
.prov-card.expanded::before,
.prov-card:hover::before { transform: scaleY(1); }

/* Header row — the whole thing is the click target when expandable */
.prov-head {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 11px 13px; margin: 0;
  background: none; border: 0; text-align: left;
  font: inherit; color: inherit;
}
.prov-head.clickable { cursor: pointer; }
.prov-head.clickable:hover h3 { color: var(--turf); }

.prov-logo {
  width: 38px; height: 38px; flex: 0 0 38px;
  border-radius: 10px; overflow: hidden;
  display: grid; place-items: center;
  background: var(--mist); border: 1px solid var(--border);
}
.prov-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.prov-logo .prov-monogram {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-family: var(--display); font-size: 16px; letter-spacing: .5px;
  color: var(--white);
  background: linear-gradient(135deg, var(--turf), var(--pine));
}
.prov-head h3 {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--body); font-size: 14px; font-weight: 700;
  color: var(--ink); margin: 0; line-height: 1.25;
  transition: color var(--transition);
}
.prov-chevron {
  flex: 0 0 16px; width: 16px; height: 16px; fill: var(--gray);
  transition: transform var(--transition);
}
.prov-card.expanded .prov-chevron { transform: rotate(180deg); fill: var(--turf); }

/* Collapsible details — animates to natural height via grid rows trick */
.prov-details {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition);
}
.prov-card.expanded .prov-details { grid-template-rows: 1fr; }
.prov-details-inner { overflow: hidden; }
.prov-details-pad { padding: 0 13px 13px 13px; }

.prov-meta { display: flex; flex-direction: column; gap: 7px; }
.prov-row {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px; color: #4a584b; line-height: 1.4;
}
.prov-row svg { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 1px; fill: var(--turf); opacity: .85; }
.prov-contact {
  margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--border);
  display: flex; flex-direction: column; gap: 7px;
}
.prov-contact a {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--turf);
  text-decoration: none; transition: color var(--transition);
  word-break: break-word;
}
.prov-contact a svg { width: 14px; height: 14px; flex: 0 0 14px; fill: currentColor; }
.prov-contact a:hover { color: var(--pine); text-decoration: underline; }
.prov-empty {
  grid-column: 1 / -1; color: var(--gray); font-size: 14px; padding: 16px 0;
}
@media (max-width: 600px) {
  /* Hero crowd silhouette — bigger on mobile, integer height kills the
     subpixel hairline that let the hero background show through */
  .hero-crowd { bottom: -1px; }
  .hero-crowd img {
    height: 64px;
    object-fit: cover;
    object-position: center bottom;
  }

  /* Province cards — two per row, compact */
  .affiliates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .prov-head { gap: 8px; padding: 10px; }
  .prov-logo { width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; }
  .prov-logo .prov-monogram { font-size: 13px; }
  .prov-head h3 { font-size: 12.5px; }
  .prov-chevron { flex: 0 0 14px; width: 14px; height: 14px; }
  .prov-details-pad { padding: 0 10px 10px; }
}

.edit-consent-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.edit-consent-row {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  font-size: 13px; color: var(--ink); line-height: 1.4;
}
.edit-consent-row input[type=checkbox] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; accent-color: var(--turf); }

/* ─── ID DOC CROP MODAL ──────────────────── */
.crop-image-wrap {
  width: 100%; max-height: 360px; overflow: hidden;
  background: #111; border-radius: 8px;
}
.crop-image-wrap img { display: block; max-width: 100%; }
.crop-toolbar {
  display: flex; gap: 8px; justify-content: center; margin-top: 12px;
}
.crop-tool-btn {
  width: 44px; height: 44px; border-radius: 8px;
  border: 1px solid var(--border); background: #fff; cursor: pointer;
  display: grid; place-items: center; transition: all var(--transition);
}
.crop-tool-btn svg { width: 20px; height: 20px; fill: var(--turf); }
.crop-tool-btn:hover { background: var(--mist); border-color: var(--turf); }

/* ─── REGISTRATION MODAL ────────────────── */
.reg-modal-box { max-width: 580px !important; }
.reg-progress {
  display: flex; align-items: center; justify-content: center;
  padding: 14px 24px; background: #fafcfa; border-bottom: 1px solid var(--mist);
  flex-shrink: 0;
}
.reg-step {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--gray); background: #fff;
  transition: all var(--transition); flex-shrink: 0;
}
.reg-step.active { border-color: var(--turf); background: var(--turf); color: #fff; }
.reg-step.done   { border-color: var(--lime); background: var(--lime); color: var(--pine); }
.reg-step-line   { flex: 1; height: 2px; background: var(--border); max-width: 60px; }
.reg-step-title  { font-family: var(--display); font-size: 20px; color: var(--ink); margin-bottom: 6px; }
.reg-step-desc   { font-size: 13px; color: var(--gray); margin-bottom: 18px; }
.reg-id-doc-area {
  border: 2px dashed var(--border); border-radius: 8px; padding: 16px;
  text-align: center; cursor: pointer; transition: all var(--transition); background: #fafcfa;
}
.reg-id-doc-area:hover { border-color: var(--turf); background: var(--mist); }
.reg-indemnity {
  background: #fafcfa; border: 1px solid var(--mist); border-radius: 8px;
  padding: 14px 16px; font-size: 12px; color: #555; line-height: 1.6;
  max-height: 160px; overflow-y: auto; margin-bottom: 16px;
}
.reg-indemnity ol { padding-left: 18px; margin: 8px 0 0; }
.reg-indemnity li { margin-bottom: 6px; }
.reg-consent-section { display: flex; flex-direction: column; gap: 10px; }
.reg-popia-intro  { font-size: 12px; color: var(--gray); margin-bottom: 4px; }
.reg-popia-notice {
  font-size: 11px; color: var(--gray); background: #fafcfa;
  border: 1px solid var(--mist); border-radius: 6px; padding: 10px; margin: 4px 0; font-style: italic;
}
.reg-consent-item {
  display: flex; align-items: flex-start;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
  transition: border-color var(--transition);
}
.reg-consent-item label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; width: 100%; }
.reg-consent-item input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--turf); }
.reg-consent-item span { font-size: 13px; color: var(--ink); line-height: 1.4; }
.reg-sig-wrap {
  position: relative; border: 2px dashed var(--border); border-radius: 8px;
  background: #fafcfa; overflow: hidden; min-height: 140px;
}
.reg-sig-wrap canvas { display: block; width: 100%; height: 140px; touch-action: none; cursor: crosshair; }
.reg-sig-clear {
  position: absolute; top: 8px; right: 8px;
  background: rgba(255,255,255,0.9); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px; font-size: 11px; font-weight: 600;
  color: var(--gray); cursor: pointer; transition: all var(--transition);
}
.reg-sig-clear:hover { border-color: var(--turf); color: var(--turf); }

.login-modal-error {
  background: #ffeaea; border: 1px solid #ffb3b3; border-radius: 8px;
  padding: 9px 13px; font-size: 13px; color: #c0392b; margin-bottom: 14px;
}
.otp-sent-msg {
  font-size: 13px; color: #2e7d32; background: #e8f5e9;
  border: 1px solid #a5d6a7; border-radius: 8px;
  padding: 10px 13px; margin-bottom: 14px; line-height: 1.5;
}
.auth-modal {
  position: fixed; inset: 0; z-index: 600;
}
.auth-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
}
.auth-modal-box {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(600px, 96vw); max-height: 90vh;
  background: #fff; border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  display: flex; flex-direction: column; overflow: hidden;
}
.auth-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 24px; background: var(--pine); flex-shrink: 0;
}
.auth-modal-title {
  font-family: var(--display); font-size: 24px; color: var(--white); line-height: 1;
}
.auth-modal-sub {
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); display: block; margin-top: 4px;
}
.auth-modal-close {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: rgba(255,255,255,0.5); transition: color var(--transition);
  display: grid; place-items: center; flex-shrink: 0;
}
.auth-modal-close:hover { color: var(--white); }
.auth-modal-close svg { width: 20px; height: 20px; fill: currentColor; }
.auth-modal-body { overflow-y: auto; flex: 1; padding: 24px; }

/* Form elements inside auth modals */
.form-group-auth, .player-form-group { margin-bottom: 14px; }
.auth-label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--turf); margin-bottom: 5px;
}
.auth-input {
  width: 100%; padding: 9px 13px;
  border: 1px solid var(--border); border-radius: 8px;
  font-family: var(--body); font-size: 13px; color: var(--ink);
  outline: none; background: #fafcfa; transition: border-color var(--transition);
}
.auth-input:focus { border-color: var(--turf); background: #fff; }
.auth-input[readonly] { background: #f0f4f0; color: var(--gray); cursor: not-allowed; }

.auth-actions { display: flex; gap: 10px; margin-top: 20px; }
.auth-btn-primary {
  padding: 10px 22px; border-radius: 8px; border: none; cursor: pointer;
  font-family: var(--body); font-size: 13px; font-weight: 700;
  background: var(--pine); color: var(--white); transition: background var(--transition);
}
.auth-btn-primary:hover    { background: var(--turf); }
.auth-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.auth-btn-outline {
  padding: 10px 22px; border-radius: 8px; cursor: pointer;
  font-family: var(--body); font-size: 13px; font-weight: 700;
  background: none; border: 1px solid var(--border); color: var(--gray);
  transition: all var(--transition);
}
.auth-btn-outline:hover { border-color: var(--turf); color: var(--turf); }
.auth-btn-back {
  background: none; border: none; cursor: pointer;
  font-family: var(--body); font-size: 13px; font-weight: 600;
  color: var(--turf); padding: 0; margin-bottom: 16px;
  display: block; transition: color var(--transition);
}
.auth-btn-back:hover { color: var(--pine); }
.auth-status {
  padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 12px;
}
.auth-status-success { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.auth-status-error   { background: #ffeaea; color: #c0392b; border: 1px solid #ffb3b3; }

/* Upload drop zone */
.upload-drop-zone {
  border: 2px dashed var(--border); border-radius: 10px;
  padding: 36px 24px; text-align: center; cursor: pointer;
  transition: all var(--transition); background: #fafcfa; margin-bottom: 16px;
}
.upload-drop-zone:hover, .upload-drop-zone.drag-over { border-color: var(--turf); background: var(--mist); }
.upload-drop-zone svg { width: 36px; height: 36px; fill: var(--border); margin-bottom: 10px; display: block; margin-inline: auto; }
.upload-drop-zone.drag-over svg { fill: var(--turf); }
.upload-drop-zone p { font-size: 13px; color: var(--gray); }
.upload-drop-zone p strong { color: var(--turf); }
.upload-hint { font-size: 11px; margin-top: 4px; }
.upload-preview-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; margin-bottom: 12px;
}
.upload-preview-item {
  position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 1; background: var(--mist);
}
.upload-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.upload-remove-btn {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  background: rgba(0,0,0,0.6); border: none; border-radius: 50%; color: #fff;
  font-size: 13px; cursor: pointer; display: grid; place-items: center; line-height: 1;
}

/* Player reg grouped by person */
.player-person-group { margin-bottom: 24px; }
.player-person-group:last-child { margin-bottom: 0; }
.player-person-header {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 8px; border-bottom: 2px solid var(--mist); margin-bottom: 12px;
}
.player-person-name { font-size: 15px; font-weight: 700; color: var(--pine); }
.player-person-id   { font-size: 11px; color: var(--gray); letter-spacing: 0.04em; }
.player-entries     { display: flex; flex-direction: column; gap: 10px; }
.player-reg-card {
  border: 1px solid var(--border); border-radius: 10px; padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.player-reg-card-header { display: flex; justify-content: space-between; align-items: flex-start; }
.player-reg-tour        { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turf); }
.player-reg-playername  { font-size: 15px; font-weight: 600; color: var(--ink); margin-top: 2px; }
.player-reg-dates       { font-size: 12px; color: var(--gray); margin-top: 2px; }
.player-reg-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.player-reg-meta span { font-size: 11px; padding: 3px 8px; background: var(--mist); border-radius: 100px; color: var(--turf); }
.player-reg-updated { font-size: 11px; color: var(--gray); }
.player-reg-ref     { font-size: 10px; color: var(--gray); letter-spacing: 0.04em; font-family: monospace; }
.reg-delete-btn {
  padding: 8px 16px; border-radius: 8px; border: 1px solid #ffb3b3;
  background: #fff5f5; color: #c0392b; font-family: var(--body);
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: all var(--transition);
}
.reg-delete-btn:hover   { background: #ffeaea; border-color: #e74c3c; }
.reg-delete-confirm     { background: #c0392b !important; color: #fff !important; border-color: #c0392b !important; font-size: 11px !important; }
.reg-approved-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px;
  background: rgba(76,217,100,0.12); border: 1px solid rgba(76,217,100,0.3); color: #1a7a2e;
}
.player-edit-btn { align-self: flex-start; margin-top: 4px; }

/* Player edit form */
.player-edit-title {
  font-family: var(--display); font-size: 20px; color: var(--ink);
  margin-bottom: 18px;
}
.player-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.player-form-full { grid-column: 1 / -1; }

/* Nav logout button */
.nav-logout-btn { font-size: 12px !important; color: rgba(255,255,255,0.4) !important; transition: color var(--transition) !important; }
.nav-logout-btn:hover { color: rgba(255,255,255,0.8) !important; }
.nav-logout-inline {
  font-size: 11px !important; font-weight: 600 !important;
  color: var(--turf) !important;
  margin-left: 10px; text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 4px; padding: 3px 8px;
  transition: all var(--transition);
}
.nav-logout-inline:hover { color: var(--pine) !important; border-color: var(--turf) !important; }
#nav-auth-item { display: flex; align-items: center; }

/* ─── CURRENT TOURNAMENTS (Live Now) ─────── */
.current-tournaments-section {
  background: var(--pine); padding: 32px 0;
}
.live-section-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 20px;
}
.live-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 0 0 rgba(76,217,100,0.6);
  animation: livePulse 1.6s ease-out infinite;
  flex-shrink: 0;
}
.live-dot-sm {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--lime); margin-right: 4px; flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(76,217,100,0.6);
  animation: livePulse 1.6s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(76,217,100,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(76,217,100,0); }
  100% { box-shadow: 0 0 0 0 rgba(76,217,100,0); }
}
.live-title {
  font-family: var(--display); font-size: 22px; color: var(--white); line-height: 1;
}
.current-tournament-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}

/* Live badge inside card */
.live-inline-badge {
  display: inline-flex; align-items: center;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px;
  background: rgba(76,217,100,0.15);
  border: 1px solid rgba(76,217,100,0.35);
  color: var(--lime);
}

/* Live card variant */
.past-tournament-card.is-live {
  border-color: rgba(76,217,100,0.3);
  background: rgba(255,255,255,0.06);
}
.past-tournament-card.is-live .past-tournament-card-name { color: var(--white); }
.past-tournament-card.is-live .past-tournament-card-meta span { color: rgba(255,255,255,0.5); }
.past-tournament-card.is-live .past-tournament-card-meta svg { fill: rgba(255,255,255,0.4); }

/* Card footer row (view btn + year/cat badge) */
.past-tournament-card-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; gap: 8px;
}
.tournament-year-cat-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px;
  background: rgba(0,107,27,0.08); border: 1px solid rgba(0,107,27,0.2);
  color: var(--turf); white-space: nowrap; margin-left: auto;
}
.past-tournaments-section { padding: 72px 0; background: var(--white); }
.past-tournaments-section .section-title { color: var(--ink); }
.past-tournaments-section .section-label { color: var(--turf); }

.past-tournament-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 40px;
}
.past-tournament-card {
  position: relative; overflow: hidden;
  background: linear-gradient(158deg, #ffffff 0%, var(--mist) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px 20px 18px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.past-tournament-card::before {            /* category accent bar */
  content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--turf);
}
.past-tournament-card:hover {
  transform: translateY(-3px);
  border-color: var(--turf);
  box-shadow: 0 12px 30px rgba(0,66,13,0.13);
}
.ptc-yearmark {
  position: absolute; top: 4px; right: 14px; z-index: 0;
  font-family: var(--display); font-size: 50px; line-height: 1;
  color: var(--turf); opacity: 0.08; pointer-events: none; user-select: none;
}
.past-tournament-card-header,
.past-tournament-card-meta,
.past-tournament-card-footer { position: relative; z-index: 1; }
.past-tournament-card-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
  margin-bottom: 10px;
}
.past-tournament-card-name {
  font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.3;
}
.past-tournament-card-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap; flex-shrink: 0;
  padding: 3px 8px; border-radius: 100px;
  background: rgba(0,107,27,0.08);
  border: 1px solid var(--border);
  color: var(--turf);
}
.past-tournament-card-meta span {
  font-size: 12px; color: var(--gray);
  display: flex; align-items: center; gap: 6px;
}
.past-tournament-card-meta svg { width: 12px; height: 12px; fill: var(--gray); flex-shrink: 0; }
.past-tournament-card-link {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--turf); text-decoration: none;
  padding: 7px 14px; border-radius: 100px;
  background: rgba(0,107,27,0.07); border: 1px solid rgba(0,107,27,0.22);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.past-tournament-card-link svg { width: 13px; height: 13px; fill: currentColor; transition: transform var(--transition); }
.past-tournament-card-link:hover { background: var(--turf); color: var(--white); border-color: var(--turf); }
.past-tournament-card-link:hover svg { transform: translateX(2px); }

/* Category accents — Opens (green), Juniors (blue), Overs (amber) */
.past-tournament-card.cat-juniors::before { background: #2d9cdb; }
.past-tournament-card.cat-overs::before   { background: #e8943a; }
.cat-juniors .ptc-yearmark { color: #2d9cdb; }
.cat-overs   .ptc-yearmark { color: #e8943a; }
.cat-juniors .tournament-year-cat-badge { background: rgba(45,156,219,0.1);  border-color: rgba(45,156,219,0.3);  color: #1f7bb0; }
.cat-overs   .tournament-year-cat-badge { background: rgba(232,148,58,0.12); border-color: rgba(232,148,58,0.35); color: #b86d1e; }
.cat-juniors .past-tournament-card-link { color: #1f7bb0; background: rgba(45,156,219,0.08); border-color: rgba(45,156,219,0.28); }
.cat-juniors .past-tournament-card-link:hover { background: #2d9cdb; color: #fff; border-color: #2d9cdb; }
.cat-overs   .past-tournament-card-link { color: #b86d1e; background: rgba(232,148,58,0.1);  border-color: rgba(232,148,58,0.3); }
.cat-overs   .past-tournament-card-link:hover { background: #e8943a; color: #fff; border-color: #e8943a; }
.past-tournament-card.cat-juniors:hover { border-color: #2d9cdb; box-shadow: 0 12px 30px rgba(31,123,176,0.16); }
.past-tournament-card.cat-overs:hover   { border-color: #e8943a; box-shadow: 0 12px 30px rgba(184,109,30,0.16); }

/* Live (current) card keeps its own button colours over the category ones */
.past-tournament-card.is-live .past-tournament-card-link {
  color: var(--lime); background: rgba(76,217,100,0.14); border-color: rgba(76,217,100,0.4);
}
.past-tournament-card.is-live .past-tournament-card-link:hover {
  background: var(--lime); color: var(--ink); border-color: var(--lime);
}

/* ─── PILLARS ─────────────────────────────── */
.pillars-section { padding: 96px 0; background: var(--mist); }

/* ── Bye-Laws & Documents section ─────────────── */
.docs-section { padding: 96px 0; background: var(--white); }
.docs-section-intro {
  max-width: 640px; margin: 18px 0 38px;
  color: var(--gray); font-size: 15px; line-height: 1.65;
}
.docs-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px;
}
.doc-card {
  display: flex; align-items: stretch; gap: 16px; text-align: left; width: 100%;
  background: var(--white); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 22px; cursor: pointer; font-family: var(--body);
  transition: var(--transition);
}
.doc-card:hover {
  border-color: var(--turf); transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0,66,13,0.10);
}
.doc-card-badge {
  flex: 0 0 auto; width: 54px; height: 54px; border-radius: var(--r-sm);
  background: var(--pine); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-size: 32px; line-height: 1; letter-spacing: 1px;
  transition: var(--transition);
}
.doc-card:hover .doc-card-badge { background: var(--turf); }
.doc-card-badge svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; }
.doc-card-body { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; min-width: 0; }
.doc-card-title { font-family: var(--display); font-size: 21px; letter-spacing: 0.5px; color: var(--ink); line-height: 1.08; }
.doc-card-sub { font-size: 14px; color: var(--turf); font-weight: 600; margin-top: 3px; }
.doc-card-meta { font-size: 12px; color: var(--gray); margin-top: 7px; }
.doc-card-arrow { flex: 0 0 auto; align-self: center; color: var(--turf); transition: var(--transition); }
.doc-card-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.doc-card:hover .doc-card-arrow { transform: translateX(4px); }
@media (max-width: 600px) {
  .docs-section { padding: 64px 0; }
  .doc-card { padding: 16px; gap: 13px; }
  .doc-card-badge { width: 46px; height: 46px; font-size: 26px; }
  .doc-card-title { font-size: 19px; }
}
.pillars-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px; margin-top: 52px;
}
.pillar-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 36px 32px;
  position: relative; overflow: hidden; transition: var(--transition);
}
.pillar-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0,66,13,0.1);
  border-color: var(--turf);
}
.pillar-card::before {
  content: attr(data-num);
  position: absolute; top: -12px; right: 20px;
  font-family: var(--display); font-size: 96px; line-height: 1;
  color: rgba(0,66,13,0.04); pointer-events: none;
}
.pillar-icon {
  width: 44px; height: 44px; background: var(--pine);
  border-radius: var(--r-sm); display: grid; place-items: center; margin-bottom: 20px;
}
.pillar-icon svg { width: 20px; height: 20px; fill: var(--lime); }
.pillar-card h3  { font-family: var(--display); font-size: 28px; letter-spacing: 0.02em; color: var(--ink); margin-bottom: 12px; }
.pillar-card p   { font-size: 14px; color: #4a5c4a; line-height: 1.7; }

/* ─── TEAM ────────────────────────────────── */
.team-section { padding: 96px 0; }
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 10px; margin-top: 52px;
}
.team-card {
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; transition: var(--transition);
  text-decoration: none; color: var(--ink);
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
}
.team-card:hover { border-color: var(--turf); box-shadow: 0 4px 16px rgba(0,66,13,0.08); }
.team-avatar {
  flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--mist);
  display: grid; place-items: center;
  transition: transform 0.2s ease;
}
.team-card:hover .team-avatar { transform: scale(1.5); }
.team-avatar-placeholder {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--pine); display: grid; place-items: center;
}
.team-avatar-placeholder svg { width: 20px; height: 20px; fill: rgba(255,255,255,0.3); }
.team-avatar-img {
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover; object-position: center top;
  display: block;
}
.team-info { min-width: 0; }
.team-info h4   { font-size: 14px; font-weight: 600; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-info span { font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--turf); }

/* ─── VALUES ──────────────────────────────── */
.values-section {
  padding: 96px 0; background: var(--pine);
  position: relative; overflow: hidden;
}
.values-section::before {
  content: ''; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(76,217,100,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,217,100,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
}
.values-section .section-label { color: rgba(76,217,100,0.7); }
.values-section .section-title { color: var(--white); }
.values-section .divider       { background: var(--lime); }
.values-tags { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }
.value-tag {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(76,217,100,0.2);
  border-radius: 100px; padding: 10px 22px;
  font-size: 14px; font-weight: 600; color: var(--white);
  transition: var(--transition);
}
.value-tag:hover { background: rgba(76,217,100,0.12); border-color: var(--lime); }

/* ─── PAGE HEADER (gallery.html etc) ─────── */
.page-header {
  background: var(--pine);
  padding: 64px 0 52px;
  position: relative; overflow: hidden;
}
.page-header::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(76,217,100,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(76,217,100,0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
}
.page-header .section-label { color: rgba(76,217,100,0.7); }
.page-header .section-title { color: var(--white); }
.page-header .divider       { background: var(--lime); }

/* Active nav link */
.nav-active { color: var(--turf) !important; }

/* Full gallery page — more breathing room */
.gallery-page { padding-bottom: 96px; }

/* ─── GALLERY ─────────────────────────────── */
.gallery-section { padding: 96px 0; background: var(--ink); }
.gallery-section .section-label { color: rgba(76,217,100,0.7); }
.gallery-section .section-title { color: var(--white); }
.gallery-section .divider       { background: var(--lime); }

/* Tab bar */
.gallery-tabs {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 36px; margin-bottom: 32px;
}
.gallery-tab {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 100px; padding: 8px 20px;
  font-family: var(--body); font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,0.55);
  cursor: pointer; transition: var(--transition);
  white-space: nowrap;
}
.gallery-tab:hover { color: var(--white); border-color: rgba(255,255,255,0.3); }
.gallery-tab.active {
  background: var(--lime); border-color: var(--lime);
  color: var(--ink);
}
.gallery-tab-count {
  display: inline-block;
  font-size: 10px; font-weight: 700;
  background: rgba(0,0,0,0.2);
  border-radius: 100px;
  padding: 1px 7px;
  margin-left: 4px;
  vertical-align: middle;
}

/* Grid */
.gallery-grid {
  columns: 4 200px;
  column-gap: 10px;
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 10px;
  border-radius: var(--r-md);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  background: rgba(255,255,255,0.04);
}
.gallery-item img {
  display: block; width: 100%; height: auto;
  transition: transform 0.4s ease, opacity 0.3s ease;
}
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item-overlay {
  position: absolute; inset: 0;
  background: rgba(0,66,13,0.45);
  display: grid; place-items: center;
  opacity: 0; transition: opacity 0.3s ease;
}
.gallery-item:hover .gallery-item-overlay { opacity: 1; }
.gallery-item-overlay svg {
  width: 32px; height: 32px; fill: var(--white);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

/* Gallery breadcrumb (gallery.html direct album view) */
.gallery-breadcrumb {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px; flex-wrap: wrap;
}
.gallery-breadcrumb a {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--lime);
  text-decoration: none; transition: opacity var(--transition);
}
.gallery-breadcrumb a:hover { opacity: 0.75; }
.gallery-breadcrumb a svg { width: 16px; height: 16px; fill: var(--lime); }
.gallery-breadcrumb span {
  font-size: 13px; color: rgba(255,255,255,0.4);
}
.gallery-breadcrumb span::before {
  content: '/'; margin-right: 10px; color: rgba(255,255,255,0.2);
}

/* ─── GALLERY CARDS (index.html) ─────────── */
.gallery-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 40px;
}

.gallery-card {
  display: block;
  text-decoration: none;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  cursor: pointer;
}
.gallery-card:hover {
  transform: translateY(-4px);
  border-color: var(--lime);
  box-shadow: 0 12px 36px rgba(0,0,0,0.4);
}

/* Mosaic thumbnail strip */
.gallery-card-mosaic {
  display: grid;
  height: 180px;
  gap: 2px;
  overflow: hidden;
}
.gallery-card-cols-1 { grid-template-columns: 1fr; }
.gallery-card-cols-2 { grid-template-columns: 1fr 1fr; }
.gallery-card-cols-3 { grid-template-columns: 2fr 1fr; }

/* For 3-col: first image spans both rows */
.gallery-card-cols-3 img:first-child {
  grid-row: span 2;
}

.gallery-card-mosaic img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.gallery-card:hover .gallery-card-mosaic img { transform: scale(1.04); }

/* Info bar */
.gallery-card-info {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.gallery-card-name {
  flex: 1;
  font-size: 14px; font-weight: 600;
  color: var(--white);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gallery-card-badge {
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--lime);
  background: rgba(76,217,100,0.12);
  border: 1px solid rgba(76,217,100,0.2);
  border-radius: 100px;
  padding: 3px 10px;
  white-space: nowrap;
}
.gallery-card-arrow {
  display: flex; align-items: center;
  opacity: 0.4; transition: opacity var(--transition);
}
.gallery-card:hover .gallery-card-arrow { opacity: 1; }
.gallery-card-arrow svg {
  width: 16px; height: 16px; fill: var(--white);
}

/* Preview footer */
.gallery-preview-footer {
  text-align: center;
  margin-top: 36px;
}
.gallery-loading {
  text-align: center; padding: 60px 0;
  color: var(--gray); font-size: 14px;
}
.gallery-empty {
  text-align: center; padding: 60px 0;
  color: var(--gray);
}
.gallery-empty p { font-size: 14px; margin-top: 8px; opacity: 0.6; }

/* Fade animation when switching tabs */
.gallery-grid.fade-out { opacity: 0; transform: translateY(8px); transition: opacity 0.15s, transform 0.15s; }
.gallery-grid.fade-in  { opacity: 1; transform: translateY(0);   transition: opacity 0.25s 0.05s, transform 0.25s 0.05s; }

/* ─── LIGHTBOX ────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 999;
  background: rgba(0,0,0,0.92);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s ease;
}
.lightbox.open { opacity: 1; pointer-events: all; }

.lightbox-img-wrap {
  position: relative;
  max-width: min(92vw, 1200px);
  max-height: 90vh;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-img {
  max-width: 100%; max-height: 90vh;
  border-radius: var(--r-md);
  box-shadow: 0 32px 80px rgba(0,0,0,0.7);
  object-fit: contain;
  transition: opacity 0.2s ease;
}
.lightbox-img.switching { opacity: 0; }

.lightbox-btn {
  position: fixed;
  top: 50%; transform: translateY(-50%);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%; width: 48px; height: 48px;
  display: grid; place-items: center;
  cursor: pointer; transition: var(--transition);
  color: var(--white);
}
.lightbox-btn:hover { background: rgba(255,255,255,0.2); }
.lightbox-btn svg   { width: 20px; height: 20px; fill: var(--white); }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

.lightbox-close {
  position: fixed; top: 16px; right: 16px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%; width: 44px; height: 44px;
  display: grid; place-items: center;
  cursor: pointer; transition: var(--transition);
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }
.lightbox-close svg  { width: 16px; height: 16px; fill: var(--white); }

.lightbox-counter {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em;
  color: rgba(255,255,255,0.45);
}

/* ─── CONTACT ─────────────────────────────── */
.contact-section { padding: 96px 0; background: var(--mist); }
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 60px; align-items: start; margin-top: 52px;
}
.contact-items { display: flex; flex-direction: column; gap: 24px; }
.contact-item  { display: flex; gap: 16px; align-items: flex-start; }
.contact-icon  {
  width: 40px; height: 40px; flex-shrink: 0;
  background: var(--pine); border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.contact-icon svg { width: 16px; height: 16px; fill: var(--lime); }
.contact-item h5  { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray); margin-bottom: 4px; }
.contact-item p, .contact-item a { font-size: 15px; color: var(--ink); text-decoration: none; font-weight: 500; }
.contact-form { display: flex; flex-direction: column; gap: 14px; }
.contact-form input, .contact-form textarea {
  font-family: var(--body); font-size: 14px;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 13px 16px;
  color: var(--ink); outline: none; transition: var(--transition); width: 100%;
}
.contact-form input:focus, .contact-form textarea:focus {
  border-color: var(--turf); box-shadow: 0 0 0 3px rgba(0,107,27,0.1);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.btn-dark {
  background: var(--pine); color: var(--white);
  font-weight: 700; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 14px 28px; border-radius: var(--r-sm);
  border: none; cursor: pointer; transition: var(--transition); align-self: flex-start;
}
.btn-dark:hover { background: var(--turf); }

/* ─── RESULTS MODAL ──────────────────────── */
#resultsModal {
  display: none; position: fixed; inset: 0; z-index: 500;
}
#resultsModal.open { display: block; }

#resultsModalBackdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
}

.results-modal-box {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(900px, 96vw);
  height: 90vh;
  background: #fff;
  border-radius: var(--r-lg);
  box-shadow: 0 24px 80px rgba(0,0,0,0.25);
  display: flex; flex-direction: column;
  overflow: hidden;
}

/* Header */
.results-modal-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 24px 16px;
  background: var(--pine);
  flex-shrink: 0;
}
.results-modal-header-text { display: flex; flex-direction: column; gap: 4px; }
.results-modal-header h3 {
  font-family: var(--display); font-size: 26px;
  color: var(--white); line-height: 1;
}
.modal-title-year {
  font-family: var(--display); font-size: 20px; color: var(--lime);
}
.results-modal-subtitle {
  font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.results-modal-header button {
  background: none; border: none; cursor: pointer; padding: 4px; margin-top: 2px;
  color: rgba(255,255,255,0.5); transition: color var(--transition);
  display: grid; place-items: center; flex-shrink: 0;
}
.results-modal-header button:hover { color: var(--white); }
.results-modal-header button svg { width: 20px; height: 20px; fill: currentColor; }

/* Season bar */
.results-season-bar {
  padding: 8px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--mist);
  flex-shrink: 0;
}
.results-season-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.results-season-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--turf); white-space: nowrap;
}
.results-season-name { font-size: 13px; font-weight: 600; color: var(--pine); }
.results-league-select { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.results-league-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--turf); white-space: nowrap;
}
.results-select-sm, .results-select {
  font-family: var(--body); font-size: 13px;
  background: #fff; border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 5px 10px;
  color: var(--ink); outline: none; max-width: 300px;
  cursor: pointer; transition: border-color var(--transition);
}
.results-select { width: 100%; max-width: 320px; }
.results-select-sm:focus, .results-select:focus { border-color: var(--turf); }

/* Tabs */
.results-modal-tabs {
  display: flex; gap: 0; flex-shrink: 0;
  padding: 0 24px; background: #fff;
  border-bottom: 2px solid var(--mist);
}
.results-tab {
  background: none; border: none; cursor: pointer;
  font-family: var(--body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--gray); padding: 12px 18px;
  border-bottom: 2px solid transparent;
  transition: color var(--transition), border-color var(--transition);
  margin-bottom: -2px;
}
.results-tab:hover  { color: var(--turf); }
.results-tab.active { color: var(--turf); border-bottom-color: var(--turf); }

/* Body */
.results-modal-body { overflow-y: auto; flex: 1; padding: 0 24px 20px; background: #fff; }
.results-panel { display: none; }
.results-panel.active { display: block; }

/* Loading */
.results-loading {
  display: flex; flex-direction: column; align-items: center;
  gap: 12px; padding: 40px 0; color: var(--gray); font-size: 13px;
}
.results-spinner {
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--mist); border-top-color: var(--turf);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.results-error { font-size: 13px; color: #c0392b; padding: 24px 0; text-align: center; }
.results-empty { font-size: 13px; color: var(--gray); padding: 24px 0; text-align: center; }

/* View Results button */
button.past-tournament-card-link {
  cursor: pointer; font-family: var(--body);
}

/* ─── RESULTS / FIXTURES TABLES ─────────── */
.results-search-wrap {
  position: sticky; top: 0; z-index: 6;
  background: #fff; margin: 0 -24px 0; padding: 16px 24px 12px;
  border-bottom: 1px solid var(--border);
}
#panelStandings { padding-top: 16px; }
.results-search {
  font-family: var(--body); font-size: 13px;
  background: var(--mist); border: 1px solid var(--border);
  border-radius: var(--r-sm); padding: 7px 34px 7px 14px;
  color: var(--ink); outline: none; width: 100%; max-width: 360px;
  transition: border-color var(--transition);
}
.results-search:focus { border-color: var(--turf); }
.results-search::placeholder { color: var(--gray); }

.results-search-field { position: relative; display: inline-block; width: 100%; max-width: 360px; }
.results-search-field .results-search { max-width: none; }
.results-search-clear {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0;
  border: none; border-radius: 50%;
  background: var(--border); color: var(--ink);
  font-size: 16px; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  transition: background var(--transition), color var(--transition);
}
.results-search-clear:hover { background: var(--gray); color: #fff; }
.results-search-field.has-text .results-search-clear { display: flex; }

/* ─── Fixtures / Results — day-grouped list ─── */
.fx-list { display: flex; flex-direction: column; padding-bottom: 8px; }
.fx-day {
  position: sticky; top: 60px; z-index: 4;
  font-family: var(--display); font-size: 18px; letter-spacing: 0.03em;
  color: var(--pine); background: var(--mist);
  padding: 9px 24px; margin: 14px -24px 4px;
  box-shadow: 0 1px 0 rgba(0,66,13,0.06);
}
.fx-list .fx-day:first-child { margin-top: 8px; }
.fx-game {
  display: grid;
  grid-template-columns: 84px minmax(0,1fr) 152px;
  align-items: center; column-gap: 14px;
  margin: 0 -24px; padding: 11px 24px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px; color: var(--ink);
}
.fx-game:hover { background: #f6faf6; }

/* Left zone — big time, ref directly beneath */
.fx-when { display: flex; flex-direction: column; line-height: 1.05; min-width: 0; }
.fx-time { font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.fx-ref  { margin-top: 3px; font-size: 10px; font-weight: 600; color: var(--pine); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Centre zone — inner grid keeps the vs/score column in the SAME place on
   every row, so the teams line up in clean columns down the list. */
.fx-match { display: grid; grid-template-columns: minmax(0,1fr) 66px minmax(0,1fr); align-items: center; column-gap: 8px; }
.fx-t1 { justify-self: end; }
.fx-t2 { justify-self: start; }
.fx-team { display: inline-flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; font-weight: 500; }
.fx-tn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-team .team-logo { margin: 0; flex: 0 0 auto; }
.fx-mid { justify-self: center; display: inline-flex; align-items: center; gap: 6px; color: var(--gray); font-size: 11px; text-transform: uppercase; }
.fx-mid-score { font-size: 14px; text-transform: none; }
.fx-score { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.fx-dash { color: var(--gray); }
.fx-team.winner .fx-tn, .fx-score.winner { color: var(--turf); font-weight: 700; }

/* Right zone — court, then league · type, stacked & right-aligned */
.fx-side { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 2px; line-height: 1.2; min-width: 0; }
.fx-court { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--gray); white-space: nowrap; max-width: 100%; overflow: hidden; }
.fx-court svg { width: 11px; height: 11px; fill: var(--gray); flex-shrink: 0; }
.fx-meta2 { max-width: 100%; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 560px) {
  .fx-game {
    grid-template-columns: 1fr auto;
    grid-template-areas: "when side" "match match";
    row-gap: 8px; column-gap: 10px; padding: 13px 24px;
  }
  .fx-when  { grid-area: when; }
  .fx-side  { grid-area: side; }
  .fx-match { grid-area: match; }
}

.results-table {
  width: 100%; border-collapse: collapse; font-size: 13px; color: var(--ink);
}
.results-table thead th {
  text-align: left; padding: 8px 10px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--turf); border-bottom: 2px solid var(--mist);
  white-space: nowrap; background: #f6faf6;
}
.results-table thead th.score-head { text-align: center; }
.results-table tbody tr:hover { background: #f6faf6; }
.results-table tbody td {
  padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle;
}
.results-table td.when { white-space: nowrap; min-width: 90px; }
.when-date { display: block; font-weight: 600; color: var(--ink); }
.when-time { font-size: 12px; color: var(--gray); margin-left: 6px; }
.when-ref  { display: block; font-size: 10px; color: rgba(0,0,0,0.25); margin-top: 2px; letter-spacing: 0.04em; }
.results-table td.league-cell { font-size: 12px; color: rgba(0,0,0,0.5); max-width: 120px; }
.results-table td.league-cell .game-type-badge { display: block; margin-top: 4px; }
.results-table td.team   { font-weight: 500; }
.results-table td.court  { color: var(--gray); font-size: 11px; white-space: nowrap; }

/* Province logo badge next to a team name */
.team-logo {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: -4px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 3px;
    flex: 0 0 auto;
}
.final-winner .team-logo,
.final-loser  .team-logo { vertical-align: -3px; }
.results-table td.score  { font-family: var(--display); font-size: 20px; text-align: center; min-width: 44px; }
.results-table td.winner { color: var(--turf); font-weight: 700; }
.game-type-badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
  background: var(--mist); color: var(--turf);
}

/* ─── STANDINGS ──────────────────────────── */
.standings-finals { display: flex; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.final-result {
  flex: 1; min-width: 220px;
  border-radius: var(--r-sm); overflow: hidden;
}
.final-result.gold   { border: 1px solid rgba(200,160,20,0.35); }
.final-result.bronze { border: 1px solid rgba(160,90,40,0.35); }

.final-header {
  display: flex; align-items: center; gap: 7px;
  padding: 6px 12px;
}
.final-result.gold   .final-header { background: rgba(200,160,20,0.12); }
.final-result.bronze .final-header { background: rgba(160,90,40,0.12); }
.final-medal { font-size: 16px; line-height: 1; }
.final-label {
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em;
  text-transform: uppercase;
}
.final-result.gold   .final-label { color: #a07800; }
.final-result.bronze .final-label { color: #7a4010; }

.final-body {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--mist); flex-wrap: wrap;
}
.final-winner      { font-weight: 700; color: var(--pine); font-size: 13px; flex: 1; min-width: 80px; }
.final-loser       { color: var(--gray); font-size: 13px; flex: 1; min-width: 80px; text-align: right; }
.final-score       { font-family: var(--display); font-size: 20px; color: var(--turf); }
.final-score-loser { font-family: var(--display); font-size: 20px; color: var(--gray); }
.final-vs          { font-size: 10px; color: var(--gray); }
.standings-table td.pos  { color: var(--gray); font-size: 11px; width: 28px; }
.standings-table td.num  { text-align: center; font-variant-numeric: tabular-nums; }
.standings-table td.pts  { font-family: var(--display); font-size: 18px; color: var(--turf); }
.standings-table td.neg  { color: #c0392b; }
.standings-table thead th.num { text-align: center; }

/* ─── PLAYER STATS ───────────────────────── */
.stats-type-tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.stats-type-btn {
  font-family: var(--body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 100px;
  border: 1px solid var(--border); background: var(--mist);
  color: var(--gray); cursor: pointer; transition: all var(--transition);
}
.stats-type-btn:hover  { border-color: var(--turf); color: var(--turf); }
.stats-type-btn.active { background: var(--turf); border-color: var(--turf); color: var(--white); }
.stats-table td.pos         { color: var(--gray); font-size: 11px; width: 28px; }
.stats-table td.player-name { font-weight: 600; }
.stats-table td.player-team { font-size: 12px; color: var(--gray); }
.stats-table td.num         { text-align: center; font-variant-numeric: tabular-nums; }
.stats-table td.hi          { color: var(--turf); font-weight: 700; }

/* Raw JSON preview */
.results-raw {
  font-size: 11px; color: var(--gray);
  background: var(--mist); border-radius: var(--r-sm);
  padding: 16px; overflow-x: auto; white-space: pre-wrap; word-break: break-all;
}


footer { background: var(--ink); padding: 64px 0 32px; }
.footer-grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px; margin-bottom: 56px;
}
.footer-brand-logo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; text-decoration: none;
}
.footer-brand-logo img  { height: 42px; }
.footer-brand-text { font-family: var(--display); font-size: 20px; color: var(--white); }
.footer-brand p    { font-size: 13px; color: var(--gray); line-height: 1.7; max-width: 240px; }
.footer-col h5 {
  font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gray); margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col ul a { font-size: 13px; color: rgba(255,255,255,0.6); text-decoration: none; transition: color var(--transition); }
.footer-col ul a:hover { color: var(--white); }
.footer-col ul p { font-size: 13px; color: rgba(255,255,255,0.6); }
.footer-col ul .footer-doc-group {
  font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.92);
  margin-bottom: -2px;
}
.footer-col ul .footer-doc-item { padding-left: 14px; }
.footer-col ul .footer-doc-item a { font-size: 12.5px; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.06); padding-top: 28px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.footer-bottom p { font-size: 12px; color: var(--gray); }
.footer-version { font-size: 11px; color: rgba(255,255,255,0.25); margin-left: 8px; letter-spacing: 0.04em; }
.social-row { display: flex; gap: 10px; }
.social-btn {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-sm); display: grid; place-items: center;
  cursor: pointer; transition: var(--transition); text-decoration: none;
}
.social-btn:hover { background: rgba(76,217,100,0.12); border-color: rgba(76,217,100,0.3); }
.social-btn svg { width: 14px; height: 14px; fill: rgba(255,255,255,0.6); }

/* ─── MOBILE MENU ─────────────────────────── */
.mobile-nav {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: var(--pine);
  flex-direction: column; justify-content: center; align-items: center; gap: 32px;
}
.mobile-nav.open { display: flex; }
.mobile-nav a {
  font-family: var(--display); font-size: 42px; letter-spacing: 0.04em;
  color: var(--white); text-decoration: none; transition: color var(--transition);
}
.mobile-nav a:hover { color: var(--lime); }
.mobile-nav-divider { width: 40px; height: 2px; background: rgba(255,255,255,0.15); }
.mobile-nav-auth {
  font-size: 22px !important;
  background: var(--lime); color: var(--pine) !important;
  padding: 10px 28px; border-radius: 100px;
}
.mobile-nav-auth:hover { background: #5ee870 !important; color: var(--pine) !important; }
.mobile-nav-auth-secondary {
  background: rgba(76,217,100,0.08) !important;
  border-color: rgba(76,217,100,0.2) !important;
  font-size: 13px !important;
  opacity: 0.8;
}
.mobile-nav-auth-secondary:hover { opacity: 1; background: rgba(76,217,100,0.15) !important; }
.mobile-nav-logout {
  font-size: 14px !important; color: rgba(255,255,255,0.4) !important;
}
.mobile-nav-logout:hover { color: rgba(255,255,255,0.8) !important; }
.mobile-close {
  position: absolute; top: 20px; right: 24px;
  background: none; border: none; cursor: pointer;
  font-family: var(--display); font-size: 32px; color: var(--white);
}

/* ─── RESPONSIVE ──────────────────────────── */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .hamburger { display: block; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid  { grid-template-columns: 1fr 1fr; }
  .gallery-grid { columns: 3 160px; }
  .lightbox-prev { left: 8px; }
  .lightbox-next { right: 8px; }
}
@media (max-width: 600px) {
  .footer-grid     { grid-template-columns: 1fr; gap: 32px; }
  .countdown-inner { gap: 20px; }
  .hero-title      { font-size: 56px; }
  .gallery-grid    { columns: 2 140px; }
}

/* ─── ANIMATIONS ──────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-badge   { animation: fadeUp 0.6s 0.10s both; }
.hero-title   { animation: fadeUp 0.6s 0.25s both; }
.hero-sub     { animation: fadeUp 0.6s 0.40s both; }
.hero-actions { animation: fadeUp 0.6s 0.55s both; }

/* ─── TOURNAMENT MANAGEMENT ───────────────── */
.tour-mgmt-list { display: flex; flex-direction: column; gap: 10px; }
.tour-mgmt-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 16px; border: 1px solid var(--border);
  border-radius: 10px; background: #fafcfa;
}
.tour-mgmt-info { flex: 1; min-width: 0; }
.tour-mgmt-name { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.tour-mgmt-meta { display: flex; flex-wrap: wrap; gap: 6px; }
.tour-mgmt-meta span { font-size: 11px; padding: 2px 8px; background: var(--mist); border-radius: 100px; color: var(--turf); }
.tour-mgmt-reg-open   { font-size: 11px !important; padding: 2px 8px; background: rgba(76,217,100,0.12); border: 1px solid rgba(76,217,100,0.3); border-radius: 100px; color: #1a7a2e; font-weight: 700; }
.tour-mgmt-reg-closed { font-size: 11px !important; padding: 2px 8px; background: #fff0f0; border: 1px solid #ffb3b3; border-radius: 100px; color: #c0392b; }
.tour-mgmt-actions { display: flex; gap: 8px; flex-shrink: 0; }
.tour-edit-btn { font-size: 12px !important; padding: 6px 14px !important; }
.tour-delete-btn {
  padding: 6px 14px; border-radius: 8px; border: 1px solid #ffb3b3;
  background: #fff5f5; color: #c0392b; font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all var(--transition);
}
.tour-delete-btn:hover { background: #ffeaea; }
.nav-tour-mgmt-btn {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ink); text-decoration: none; margin-left: 12px;
  padding: 6px 14px; border: 1px solid var(--border); border-radius: 8px;
  transition: all var(--transition);
}
.nav-tour-mgmt-btn:hover { border-color: var(--turf); color: var(--turf); }

/* Admin dropdown */
.admin-dropdown { position: relative; display: inline-flex; align-items: center; }
.admin-dropdown-trigger {
  font-family: var(--body); font-size: 13px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--ink);
  background: #fff; border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 14px; cursor: pointer; transition: all var(--transition);
  white-space: nowrap;
}
.admin-dropdown-trigger:hover,
.admin-dropdown.open .admin-dropdown-trigger { border-color: var(--turf); color: var(--turf); }
.admin-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12); min-width: 170px; z-index: 500;
  overflow: hidden;
}
.admin-dropdown.open .admin-dropdown-menu { display: block; }
.admin-dropdown-item {
  display: block; width: 100%; text-align: left;
  padding: 11px 16px; font-family: var(--body); font-size: 13px;
  font-weight: 600; color: var(--ink); background: none; border: none;
  cursor: pointer; transition: background var(--transition);
}
.admin-dropdown-item:hover { background: var(--mist); color: var(--turf); }

/* ── Fullscreen portal iframe loader ─────────────────────────── */
.frame-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    background: #0a0f0a;
    color: #cfe8d4;
    font-family: var(--display), sans-serif;
    letter-spacing: 0.06em;
    font-size: 14px;
    z-index: 2;
    transition: opacity 0.25s ease;
}
.frame-loader.is-hidden { opacity: 0; pointer-events: none; }
.frame-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(76,217,100,0.25);
    border-top-color: var(--lime, #4cd964);
    border-radius: 50%;
    animation: frame-spin 0.8s linear infinite;
}
@keyframes frame-spin { to { transform: rotate(360deg); } }

/* ============ Document viewer modal ============ */
.doc-modal-overlay {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0,20,5,0.55);
  display: none; align-items: center; justify-content: center; padding: 24px;
}
.doc-modal-overlay.open { display: flex; }
.doc-modal {
  background: #fff; width: 100%; max-width: 940px; max-height: 90vh;
  border-radius: 14px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(0,0,0,0.35);
}
.doc-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 22px; background: var(--pine); color: #fff; flex-shrink: 0;
}
.doc-modal-title { font-family: var(--display); font-size: 23px; line-height: 1.02; letter-spacing: .01em; }
.doc-modal-meta { font-size: 12px; opacity: .82; margin-top: 5px; }
.doc-modal-close {
  background: none; border: none; color: #fff; font-size: 28px;
  line-height: 1; cursor: pointer; opacity: .85; padding: 0;
}
.doc-modal-close:hover { opacity: 1; }

.doc-modal-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 22px; border-bottom: 1px solid var(--border);
  background: var(--mist); flex-wrap: wrap; flex-shrink: 0;
}
.doc-search { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 220px; }
.doc-search-icon { color: var(--gray); flex-shrink: 0; }
.doc-search input {
  flex: 1; max-width: 360px; font-family: var(--body); font-size: 13px;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px;
  outline: none; background: #fff; color: var(--ink);
}
.doc-search input:focus { border-color: var(--turf); }
.doc-search-count { font-size: 12px; color: var(--gray); min-width: 50px; text-align: center; font-variant-numeric: tabular-nums; }
.doc-search-nav {
  border: 1px solid var(--border); background: #fff; border-radius: 7px;
  width: 30px; height: 30px; cursor: pointer; font-size: 17px; line-height: 1;
  color: var(--ink); display: flex; align-items: center; justify-content: center;
}
.doc-search-nav:hover { background: var(--mist); border-color: var(--turf); color: var(--pine); }
.doc-pdf-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--turf); color: #fff; text-decoration: none;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 9px 16px; border-radius: 100px; transition: background var(--transition);
}
.doc-pdf-btn:hover { background: var(--pine); }
.doc-pdf-btn.is-busy { opacity: 0.65; pointer-events: none; }

.doc-modal-body { display: flex; min-height: 0; flex: 1; }
.doc-modal-toc {
  width: 250px; flex-shrink: 0; overflow-y: auto;
  padding: 16px 10px; border-right: 1px solid var(--border); background: #fafbf9;
}
.doc-toc-link {
  display: block; padding: 5px 10px; border-radius: 6px;
  font-size: 12.5px; color: var(--ink); text-decoration: none; line-height: 1.35;
}
.doc-toc-link:hover { background: rgba(0,107,27,0.08); color: var(--pine); }
.doc-toc-link.active {
  background: rgba(0,107,27,0.12); color: var(--pine); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--turf);
}
.doc-xref {
  color: var(--turf); font-weight: 600; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(0,107,27,0.38); text-underline-offset: 2px;
  transition: color var(--transition);
}
.doc-xref:hover { color: var(--pine); text-decoration-color: var(--turf); }
.doc-h.xref-flash { animation: xrefFlash 1.5s ease; border-radius: 4px; }
@keyframes xrefFlash {
  0%, 12% { background: rgba(76,217,100,0.30); }
  100% { background: transparent; }
}
.doc-toc-l3 { font-weight: 700; margin-top: 8px; }
.doc-toc-l4 { padding-left: 22px; color: var(--gray); font-size: 12px; }
.doc-toc-l4:hover { color: var(--pine); }

.doc-modal-content {
  flex: 1; overflow-y: auto; padding: 24px 30px;
  font-family: var(--body); font-size: 14px; line-height: 1.62; color: var(--ink);
}
.doc-modal-content .doc-h3 {
  font-family: var(--display); font-size: 23px; letter-spacing: .01em;
  color: var(--pine); margin: 28px 0 10px; padding-bottom: 6px;
  border-bottom: 2px solid var(--lime);
}
.doc-modal-content .doc-h3:first-child { margin-top: 0; }
.doc-modal-content .doc-doctitle {
  text-align: center; margin: 0 0 20px; padding-bottom: 16px;
  border-bottom: 2px solid var(--lime);
}
.doc-modal-content .doc-doctitle div {
  font-family: var(--display); font-size: 20px; letter-spacing: .02em;
  color: var(--pine); line-height: 1.1;
}
.doc-modal-content .doc-doctitle div + div { font-size: 16px; color: var(--turf); margin-top: 4px; }
.doc-modal-content .doc-h4 { font-size: 15px; font-weight: 700; color: var(--turf); margin: 22px 0 6px; }
.doc-modal-content p { margin: 0 0 10px; }
.doc-modal-content .doc-list { margin: 0 0 12px; padding-left: 20px; }
.doc-modal-content .doc-list li { margin-bottom: 5px; }
.doc-modal-content em { color: var(--turf); font-style: italic; }
.doc-modal-content strong { color: var(--ink); }

mark.doc-hl { background: #fff3a3; color: inherit; border-radius: 2px; padding: 0 1px; }
mark.doc-hl.active { background: var(--lime); color: #002a0a; box-shadow: 0 0 0 2px rgba(76,217,100,0.55); }

@media (max-width: 720px) {
  .doc-modal-overlay { padding: 0; }
  .doc-modal { max-width: 100%; max-height: 100%; height: 100%; border-radius: 0; }
  .doc-modal-toc { display: none; }
  .doc-modal-content { padding: 18px 18px; }
  .doc-pdf-btn { padding: 8px 12px; }
}

/* ============ LOGIN GATE (pre-launch) ============ */
/* Login & registration entry points hidden until hero badge is triple-clicked */
body:not(.logins-revealed) .login-gated { display: none !important; }

/* ============ MOBILE — FULLSCREEN FIXTURES/RESULTS MODAL ============ */
@media (max-width: 600px) {
  .results-modal-box {
    top: 0; left: 0; transform: none;
    width: 100vw; height: 100dvh;
    border-radius: 0;
  }
  .results-modal-header { padding: 14px 16px 12px; }
  .results-modal-header h3 { font-size: 22px; }
  .results-modal-subtitle { font-size: 12px; }
  .results-modal-tabs { padding: 0 16px; }
  .results-tab { padding: 12px 14px; }
  .results-modal-body { padding: 0 16px 16px; }
  .results-search-wrap { margin: 0 -16px 0; padding: 12px 16px 10px; }

  /* Day-grouped fixtures — realign negative margins & lift font sizes */
  .fx-day  { margin: 14px -16px 4px; padding: 9px 16px; font-size: 19px; }
  .fx-game { margin: 0 -16px; padding: 13px 16px; font-size: 14.5px; }
  .fx-time  { font-size: 18px; }
  .fx-ref   { font-size: 11px; }
  .fx-mid   { font-size: 12px; }
  .fx-mid-score { font-size: 15px; }
  .fx-court { font-size: 12px; }
  .fx-court svg { width: 12px; height: 12px; }
  .fx-meta2 { font-size: 11px; }
  .results-search { font-size: 14px; }
}