/* ============================================================
   The Falkners Arms Golf Society — Design System v2
   Concept: the club crest itself. Navy and white, concentric
   rings, condensed badge lettering, laurel-adjacent restraint.
   Leaderboard positions read as medallions, not table cells.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;600&display=swap');

:root {
    --navy: #1B3A6C;
    --navy-dark: #10233F;
    --navy-mid: #274B85;
    --white: #FFFFFF;
    --paper: #F3F5F9;
    --panel: #FFFFFF;
    --gold: #B8923C;
    --gold-light: #D9BE7C;
    --ink: #171F30;
    --ink-soft: #57617A;
    --line: rgba(27, 58, 108, 0.16);

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  --radius: 3px;
    --shadow-card: 0 1px 0 rgba(16,35,63,0.05), 0 14px 28px -18px rgba(16,35,63,0.45);
}

* { box-sizing: border-box; }
/* scroll-padding keeps linked-to sections clear of the fixed header
   instead of sliding underneath it. */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
  color: var(--navy);
}

h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 700; letter-spacing: 0.005em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; color: var(--ink-soft); font-family: var(--font-body); text-transform: none; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  display: inline-block;
  margin-bottom: 0.6em;
  position: relative;
  padding-left: 18px;
}
.eyebrow::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 11px; height: 11px;
  margin-top: -5.5px;
  border: 1.5px solid var(--gold);
  border-radius: 50%;
}

.container { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* ---------- Header / Nav ---------- */

.site-header {
  background: var(--navy);
  color: var(--white);
  border-bottom: 4px solid var(--navy-dark);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.08);
  /* Stays put while the page scrolls, on phones and desktops alike, so
     the menu is always a tap away rather than a scroll back to the top. */
  position: sticky;
  top: 0;
  z-index: 70;
}

.nav-wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--white); }

.brand img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--navy), 0 0 0 3px rgba(255,255,255,0.5);
}

.brand-text {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 1rem;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.brand-text small {
  display: block;
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--gold-light);
  margin-top: 4px;
}

.main-nav { display: flex; gap: 2px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }

.main-nav a {
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.82);
  padding: 9px 12px;
  border-radius: var(--radius);
  transition: background 0.15s ease, color 0.15s ease;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  background: rgba(255,255,255,0.12);
  color: var(--white);
}

.main-nav a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--gold); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.88rem;
  padding: 12px 24px;
  border-radius: var(--radius);
  border: 2px solid var(--navy);
  background: var(--navy);
  color: var(--white);
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); background: var(--navy-mid); }

.btn-brass { background: var(--gold); border-color: var(--gold); color: var(--navy-dark); }
.btn-brass:hover { background: var(--gold-light); }
.btn-outline { background: transparent; color: var(--navy); }
.btn-maroon { background: #7A2331; border-color: #7A2331; }
.btn-small { padding: 6px 14px; font-size: 0.72rem; }

/* ---------- Hero ---------- */

.hero {
  background: var(--navy);
  color: var(--white);
  padding: 68px 0 52px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -40% -10%;
  background: radial-gradient(circle, rgba(255,255,255,0.05), transparent 60%);
  pointer-events: none;
}

.hero-inner { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 800px) { .hero-inner { grid-template-columns: 1fr; } }

.hero h1 { color: var(--white); }
.hero p.lede { color: rgba(255,255,255,0.82); font-size: 1.12rem; max-width: 46ch; font-family: var(--font-body); }

.hero-badge {
  justify-self: center;
  width: min(280px, 80%);
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 6px;
  background: conic-gradient(from 0deg, var(--gold-light), var(--gold), var(--gold-light));
  box-shadow: var(--shadow-card);
}
.hero-badge-inner {
  width: 100%; height: 100%; border-radius: 50%;
  background: var(--white);
  padding: 10px;
}
.hero-badge img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

/* ---------- Sections ---------- */

.section { padding: 56px 0; }
.section-alt { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.section-head { max-width: 62ch; margin-bottom: 32px; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 3px solid var(--navy);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.card h3 { margin-bottom: 0.35em; }

/* ---------- Scorecard component (signature element) ---------- */
/* Ring-badge position markers echo the crest's concentric circles. */

.scorecard {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.scorecard-head {
  background: var(--navy);
  color: var(--white);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-bottom: 3px solid var(--gold);
}

.scorecard-head h3 { color: var(--white); margin: 0; }

.scorecard-head .meta {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--gold-light);
  text-transform: none;
}

table.score-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }

table.score-table th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 12px 20px 8px;
  border-bottom: 2px solid var(--navy);
}

table.score-table td { padding: 10px 20px; border-bottom: 1px solid var(--line); }
table.score-table tr:last-child td { border-bottom: none; }

table.score-table td.num, table.score-table th.num { font-family: var(--font-mono); text-align: right; }

table.score-table td.pos { width: 3ch; padding-left: 20px; }

.pos-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 0.8rem;
}

tr.pos-1 { background: rgba(184,146,60,0.08); }
tr.pos-1 .pos-badge { background: var(--gold); border-color: var(--gold); color: var(--navy-dark); }

.empty-state { padding: 32px 20px; text-align: center; color: var(--ink-soft); font-style: italic; }

/* ---------- Fixtures list ---------- */

.fixture-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.fixture-item {
  display: flex;
  gap: 20px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-left: 4px solid var(--navy);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-card);
}

.fixture-date {
  font-family: var(--font-mono);
  background: var(--navy);
  color: var(--white);
  border-radius: 50%;
  width: 64px;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  line-height: 1.25;
  flex-shrink: 0;
}

.fixture-date strong { display: block; font-size: 1.15rem; }

.fixture-body { flex: 1; }
.fixture-body h3 { margin-bottom: 2px; text-transform: none; font-family: var(--font-body); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.fixture-body h3 a { color: inherit; text-decoration: none; }
.fixture-body h3 a:hover { text-decoration: underline; }
.fixture-body .venue { color: var(--ink-soft); font-size: 0.9rem; }

/* ---------- Forms ---------- */

.form-field { margin-bottom: 18px; }

.form-field label {
  display: block;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.78rem;
  color: var(--navy);
  margin-bottom: 6px;
}

.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 0.98rem;
  background: var(--white);
  color: var(--ink);
}

.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: 3px solid var(--gold-light);
  outline-offset: 1px;
  border-color: var(--gold);
}

.form-row { display: flex; gap: 16px; flex-wrap: wrap; }
.form-row .form-field { flex: 1; min-width: 160px; }

.status-msg { padding: 12px 16px; border-radius: var(--radius); font-size: 0.92rem; margin-bottom: 18px; }
.status-msg.ok { background: rgba(27,58,108,0.08); color: var(--navy); }
.status-msg.err { background: rgba(122,35,49,0.10); color: #7A2331; }

/* ---------- Admin ---------- */

.admin-shell { max-width: 720px; margin: 0 auto; }
.entry-row {
  display: grid;
  grid-template-columns: 1.6fr 0.8fr 0.8fr 0.8fr;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}
@media (max-width: 640px) { .entry-row { grid-template-columns: 1fr 1fr; } }
.entry-row .player-name { font-weight: 600; grid-column: 1 / -1; }
@media (min-width: 641px) { .entry-row .player-name { grid-column: auto; } }

/* ---------- Gallery ---------- */

.gallery-grid {
     display: grid;
     grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
     gap: 14px;
}

.gallery-item {
     background: var(--paper);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     overflow: hidden;
}

.gallery-item img {
     width: 100%;
     aspect-ratio: 1;
     object-fit: cover;
}

.gallery-caption {
     padding: 8px 10px;
     font-size: 0.8rem;
     display: flex;
     flex-direction: column;
     gap: 2px;
}

.gallery-caption span { color: var(--ink); }
.gallery-caption small { color: var(--ink-soft); font-family: var(--font-mono); font-size: 0.7rem; }

/* ---------- Attendance & groupings ---------- */

.attendee-list {
     display: flex;
     flex-wrap: wrap;
     gap: 8px;
}

.attendee-chip {
     background: var(--paper);
     border: 1px solid var(--line);
     border-radius: 999px;
     padding: 6px 14px;
     font-size: 0.85rem;
}

.groupings-board {
     display: flex;
     gap: 16px;
     flex-wrap: wrap;
     margin-top: 12px;
}

.group-column {
     flex: 1;
     min-width: 180px;
     background: var(--paper);
     border: 1px solid var(--line);
     border-radius: var(--radius);
     padding: 12px;
     min-height: 80px;
}

.group-column h4 {
     margin: 0 0 8px;
     font-size: 0.78rem;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--ink-soft);
}

.group-column.drag-over {
     border-color: var(--gold);
     background: var(--gold-light);
}

.player-chip {
     background: var(--white);
     border: 1px solid var(--line);
     border-radius: 8px;
     padding: 8px 10px;
     margin-bottom: 6px;
     font-size: 0.88rem;
     cursor: grab;
     user-select: none;
}

.player-chip.dragging { opacity: 0.35; }

/* ---------- Footer ---------- */

.site-footer { background: var(--navy-dark); color: rgba(255,255,255,0.75); padding: 32px 0; font-size: 0.85rem; }
.footer-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; }
.footer-links { display: flex; gap: 18px; list-style: none; padding: 0; margin: 0; }
.footer-links a { text-decoration: none; color: rgba(255,255,255,0.75); }
.footer-links a:hover { color: var(--white); }

/* ---------- Utility ---------- */

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.small { font-size: 0.85rem; color: var(--ink-soft); text-transform: none; font-family: var(--font-body); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }


/* ---------- Fixtures list: expandable detail panel ---------- */

.fixture-item { display: block; padding: 0; overflow: hidden; }

.fixture-head {
  display: flex;
  gap: 20px;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  background: none;
  border: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.fixture-head:hover .fixture-title { text-decoration: underline; }
.fixture-head:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

.fixture-title {
  display: block;
  margin-bottom: 2px;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--ink);
}

.fixture-chevron {
  flex-shrink: 0;
  color: var(--navy);
  font-size: 0.9rem;
  transition: transform 0.18s ease;
}

.fixture-item.is-open .fixture-chevron { transform: rotate(180deg); }

.fixture-panel { padding: 4px 20px 20px; border-top: 1px solid var(--line); }
.fixture-panel[hidden] { display: none; }

.fixture-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 8px 18px;
  margin: 16px 0 20px;
  font-size: 0.9rem;
}

.fixture-facts dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 2px;
}

.fixture-facts dd { margin: 0; color: var(--ink); }
.fixture-facts dd a { color: var(--navy); }

/* ---------- Prizes on the day, under a round's scorecard ---------- */

.prize-heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--navy);
}

.prize-list dd { font-weight: 600; }

/* ---------- The hole-in-one pot ---------- */

.pot-figure {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 9vw, 4rem);
  line-height: 1;
  color: var(--navy);
  margin: 6px 0 4px;
}

.pot-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 24px;
  margin: 24px 0 8px;
  box-shadow: var(--shadow-card);
}

.pot-history { margin-top: 26px; font-size: 0.9rem; }
.pot-history li { padding: 8px 0; border-bottom: 1px solid var(--line); list-style: none; }
.pot-history ul { padding: 0; margin: 10px 0 0; }
.pot-payout { color: #7A2331; font-weight: 600; }

/* ---------- Payment block on a fixture ---------- */

.pay-box {
  margin-top: 16px;
  padding: 16px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: rgba(0,0,0,0.015);
}

.pay-box dl { margin: 10px 0 14px; }
.pay-ref { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.04em; }

.pay-status {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
}

.pay-status.is-confirmed { background: #E7F3EC; border-color: #B6DCC4; color: #1F6B3C; }
.pay-status.is-claimed { background: #FFF6E0; border-color: #EBD69C; color: #7A5A11; }

.fixture-cost { font-weight: 700; }

.fixture-notes {
  margin: 0 0 20px;
  padding: 12px 14px;
  background: var(--paper);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  font-size: 0.9rem;
  color: var(--ink);
}

.fixture-section-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.fixture-panel .attendee-list { margin-bottom: 16px; }

@media (max-width: 560px) {
  .fixture-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .fixture-facts dd { margin-bottom: 10px; }
}

/* Quick links above the fixture list */
.fixtures-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* Non-interactive fixture row (homepage "next fixture"): links through to
   the fixtures page rather than expanding in place. */
.fixture-item-static .fixture-head { text-decoration: none; color: inherit; }
.fixture-item-static .fixture-chevron { font-size: 1.4rem; line-height: 1; }

/* ---------- Navigation: burger menu on small screens ---------- */

.nav-auth-btn {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--white);
  text-decoration: none;
  padding: 8px 14px;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius);
  white-space: nowrap;
}

.nav-auth-btn:hover { background: rgba(255,255,255,0.12); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: var(--radius);
  color: var(--white);
  padding: 10px 12px;
  cursor: pointer;
}

/* Three bars drawn from one element, so there's less markup to inject. */
.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before,
.nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

/* Burger turns into a cross while the menu is open. */
.is-nav-open .nav-toggle-bars { background: transparent; }
.is-nav-open .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
.is-nav-open .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-wrap { gap: 12px; }
  .nav-toggle { display: block; order: 3; }
  .nav-auth-btn { order: 2; margin-left: auto; }

  .main-nav {
    order: 4;
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    margin-top: 4px;
    border-top: 1px solid rgba(255,255,255,0.16);
  }

  /* With a fixed header, a long open menu could run off the bottom of a
     small screen — let it scroll inside itself instead. */
  .nav-wrap.is-nav-open .main-nav {
    display: flex;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }

  .main-nav li { width: 100%; }

  .main-nav a {
    display: block;
    padding: 13px 4px;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255,255,255,0.10);
  }
}

/* ---------- Season tabs on the results page ---------- */

.year-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.year-tab {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  padding: 8px 16px;
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.year-tab:hover { background: rgba(27,58,108,0.06); }

.year-tab.is-active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

/* The crest is decorative and eats most of a phone screen before you
   reach any content, so hide it once the hero stacks. */
@media (max-width: 800px) {
  .hero-badge { display: none; }
}

/* ---------- Score tables on small screens ---------- */
/* Five columns of 20px-padded cells overflow a phone. Rather than let
   them scroll off sideways, tighten the spacing and drop the least
   important column on the narrowest screens. Column 3 is HCap and
   column 4 is Rounds (leaderboard) / Gross (scorecards); position,
   name and points — the things people actually look for — always stay. */

@media (max-width: 620px) {
  table.score-table { font-size: 0.88rem; }
  table.score-table th,
  table.score-table td { padding: 9px 8px; }
  table.score-table td.pos { padding-left: 10px; }
  table.score-table th:first-child,
  table.score-table td:first-child { padding-left: 10px; }
  table.score-table th:last-child,
  table.score-table td:last-child { padding-right: 10px; }
}

@media (max-width: 470px) {
  /* Drop Rounds / Gross first — it's the most expendable of the five. */
  table.score-table th:nth-child(99),
  table.score-table td:nth-child(99) { display: none; }
}

@media (max-width: 380px) {
  /* Very narrow: handicap goes too, leaving Pos / Name / Points. */
  table.score-table th:nth-child(98),
  table.score-table td:nth-child(98) { display: none; }
}

/* Long names shouldn't force the table wider than the screen. */
table.score-table td:nth-child(2) { overflow-wrap: anywhere; }

/* Belt and braces: if a table still can't fit (an unusually long name,
   a future extra column), let that one table scroll rather than
   stretching the whole page sideways. */
.scorecard { overflow-x: auto; }

/* ---------- Social links ---------- */

.social-links { display: flex; align-items: center; gap: 10px; }

.social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--white);
  opacity: 0.85;
  transition: opacity 0.15s ease, background 0.15s ease;
}

.social-links a:hover { opacity: 1; background: rgba(255,255,255,0.14); }
.social-links svg { width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }

.social-footer { margin-left: 16px; }

/* On a desktop the header reads as two rows: the crest with the social
   icons and the login button opposite it, then the menu across the
   bottom. Before this, all four fought for one line and the login
   button was pushed onto an orphan row of its own. */
@media (min-width: 861px) {
  .nav-wrap { flex-wrap: wrap; row-gap: 4px; align-items: center; }
  .nav-wrap .brand { order: 1; }
  .nav-wrap .social-header { order: 2; margin-left: auto; }
  .nav-wrap .nav-auth-btn { order: 3; margin-left: 16px; }
  /* Slightly tighter so all ten links sit on one line rather than
     spilling a lonely "Contact" onto a second row. */
  .nav-wrap .main-nav { order: 4; width: 100%; gap: 0; margin-top: 2px; }
  .nav-wrap .main-nav a { padding: 9px 9px; font-size: 0.78rem; }
}

@media (max-width: 860px) {
  /* Header is tight on a phone — the footer pair is enough there. */
  .social-header { display: none; }
  .footer-inner { flex-wrap: wrap; gap: 10px; }
  .social-footer { margin-left: 0; }
}

/* ---------- Floating WhatsApp button ---------- */

.whatsapp-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  box-shadow: 0 6px 18px -4px rgba(16,35,63,0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.whatsapp-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -6px rgba(16,35,63,0.55); }
.whatsapp-fab:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.whatsapp-fab svg { width: 28px; height: 28px; fill: currentColor; flex-shrink: 0; }

@media (max-width: 560px) {
  .whatsapp-fab { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .whatsapp-fab svg { width: 26px; height: 26px; }
}

/* ---------- Members directory ---------- */

.member-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--gold);
  background: var(--paper);
}

.member-avatar-initials {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--navy);
  background: var(--paper);
}

.member-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}

.member-bio { margin: 0; font-size: 0.92rem; color: var(--ink); white-space: pre-line; }

/* ---------- The tee draw on a fixture ---------- */

/* Groups run across the page as columns, each headed by its number
   with the players stacked underneath, so a four reads top to bottom.
   auto-fill means the row packs as many cards as will fit and drops to
   one column on a phone without a breakpoint. Pairs use the same grid,
   so they line up under the tee draw. */
.tee-groups {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin: 6px 0 4px;
}

.tee-group {
  padding: 10px 12px 11px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  background: var(--white);
  font-size: 0.92rem;
}

.tee-group-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  white-space: nowrap;
  margin-bottom: 7px;
}

.tee-group-names { list-style: none; margin: 0; padding: 0; }

.tee-group-names li { padding: 2px 0; line-height: 1.35; }

/* Pairs follow the tee draw, so its heading needs air above it. */
.tee-groups + .fixture-section-label { margin-top: 18px; }

/* ---------- Ticking several players onto a round ---------- */

/* A tick list rather than one name at a time. It packs into as many
   columns as fit and scrolls once it is taller than a screenful, so a
   list of forty names does not push the button out of reach. */
.tick-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 2px 16px;
  max-height: 320px;
  overflow-y: auto;
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}

.tick-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.92rem;
  cursor: pointer;
}

/* The stylesheet stretches inputs to full width for forms, which would
   blow a checkbox up to the width of the column. */
.tick-list input[type="checkbox"] {
  width: auto;
  min-width: 0;
  margin: 0;
  flex: none;
}

.tick-list .tick-hcap { color: var(--ink-soft); font-size: 0.85rem; }

/* ---------- Admin on a phone ---------- */
/* Several admin card grids carry an inline two-column style, which is
   right on a laptop and far too tight on a phone. An inline style beats
   a stylesheet rule, so overriding it here needs !important — the one
   place in this file that does. */
@media (max-width: 720px) {
  .card-grid { grid-template-columns: 1fr !important; }

  /* Number inputs have a minimum intrinsic width; below this the four
     score boxes stop fitting side by side and push the page wide. */
  .entry-row { grid-template-columns: 1fr 1fr; }
  .entry-row input { min-width: 0; width: 100%; }
}


/* ---------- Gallery lightbox ---------- */

/* thumbnails now signal that they open */
.gallery-item img {
   cursor: zoom-in;
   transition: transform 0.35s ease, opacity 0.2s ease;
}
.gallery-item { position: relative; }
.gallery-item:hover img { transform: scale(1.04); }
.gallery-item img:focus-visible {
   outline: 3px solid var(--gold);
   outline-offset: -3px;
}

.lb {
   position: fixed;
   inset: 0;
   z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
   background: rgba(16, 35, 63, 0.96);
   opacity: 0;
   transition: opacity 0.22s ease;
}
.lb.is-open { opacity: 1; }
.lb[hidden] { display: none; }

.lb__stage {
   margin: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 14px;
   max-width: 92vw;
}

.lb__img {
   max-width: 92vw;
   max-height: 76vh;
   object-fit: contain;
   border-radius: var(--radius);
   box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7);
   -webkit-user-drag: none;
   user-select: none;
}

.lb__meta {
   text-align: center;
   max-width: 60ch;
   display: flex;
   flex-direction: column;
   gap: 4px;
}

.lb__round {
   font-family: var(--font-display);
   text-transform: uppercase;
   letter-spacing: 0.08em;
   font-size: 0.8rem;
   color: var(--gold-light);
}
.lb__cap { color: var(--white); font-size: 0.95rem; line-height: 1.45; }
.lb__by {
   font-family: var(--font-mono);
   font-size: 0.7rem;
   color: rgba(255, 255, 255, 0.55);
}
.lb__round[hidden], .lb__cap[hidden], .lb__by[hidden] { display: none; }

.lb__btn {
   position: absolute;
   appearance: none;
   border: 1px solid rgba(255, 255, 255, 0.18);
   background: rgba(255, 255, 255, 0.08);
   color: var(--white);
   width: 46px;
   height: 46px;
   border-radius: 50%;
   font-size: 22px;
   line-height: 1;
   cursor: pointer;
   display: grid;
   place-items: center;
   transition: background 0.15s ease, border-color 0.15s ease;
}
.lb__btn:hover {
   background: rgba(184, 146, 60, 0.28);
   border-color: var(--gold);
}
.lb__btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.lb__btn[hidden] { display: none; }

.lb__prev { left: 20px; }
.lb__next { right: 20px; }
.lb__close { top: 20px; right: 20px; font-size: 24px; }

.lb__count {
   position: absolute;
   bottom: 18px;
   left: 50%;
   transform: translateX(-50%);
   font-family: var(--font-mono);
   font-size: 0.7rem;
   letter-spacing: 0.1em;
   color: rgba(255, 255, 255, 0.6);
}
.lb__count[hidden] { display: none; }

/* stop the page behind scrolling while the viewer is open */
body.lb-lock { overflow: hidden; }

@media (max-width: 640px) {
   .lb__btn { width: 40px; height: 40px; }
   .lb__prev { left: 8px; }
   .lb__next { right: 8px; }
   .lb__close { top: 12px; right: 12px; }
   .lb__img { max-height: 68vh; }
}

@media (prefers-reduced-motion: reduce) {
   .lb, .gallery-item img { transition: none; }
   .gallery-item:hover img { transform: none; }
}