/* styles.css — the one stylesheet for the whole Harlequin site.
   Look and feel: dark "app" theme (deep wine-black surfaces, soft glows,
   gradient cards, pill badges, Montserrat), in the Quins colours:
   burgundy for the brand, gold for highlights and the main buttons.

   Order: 1 tokens · 2 base · 3 layout · 4 header · 5 hero + stats ·
   6 buttons · 7 cards · 8 forms · 9 tables · 10 table cards (phones) ·
   11 tabs, chips, badges · 12 news · 13 contact + footer · 14 feedback ·
   15 portal + admin · 16 rules page · 17 404 · 18 utilities · 19 print.

   To restyle the site, change the tokens in section 1 — every page follows. */

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

/* =====================================================================
   1. DESIGN TOKENS
   ===================================================================== */
/* COLOUR THEMES — dark is the default. Light mode is switched on by
   <html data-theme="light"> (theme.js: the visitor's choice, else the device
   setting). The hero, contact band, footer and 404 page stay dark in both
   themes (they repeat the dark tokens) so the logo and brand bands read well. */
:root,
:root[data-theme="light"] :is(.hero, .section-dark, footer, .error-page) {
  color-scheme: dark;
  --accent-2:     #E8CB6A;           /* emphasis text, links */
  --accent-text:  #D4AF37;           /* gold used as text */
  --rose:         #F08AA8;

  --bg:           #120A0E;
  --bg-2:         #170D12;           /* inputs, wells */
  --surface:      #21131A;           /* cards */
  --surface-end:  #1A0F15;           /* card gradient end */
  --surface-2:    #2A1820;           /* raised: menus, modals, tiles */
  --surface-3:    #352029;           /* chips, icon wells */
  --th:           #1C1016;           /* table header */
  --band:         #160C11;           /* alternate page band */
  --ink-900:      #0C0608;           /* contact band + footer */
  --glass:        rgba(18, 10, 14, .78);    /* see-through header */
  --glass-strong: rgba(18, 10, 14, .92);
  --tint-1:       rgba(255, 255, 255, .04); /* hover / zebra */
  --tint-2:       rgba(255, 255, 255, .07);
  --glow-1:       rgba(176, 33, 76, .16);
  --glow-2:       rgba(212, 175, 55, .06);

  --line:         #3A2630;
  --line-soft:    rgba(255, 255, 255, .07);
  --line-strong:  #5C424C;           /* form borders, ≥3:1 on --bg-2 */

  --text:         #F3ECE8;
  --muted:        #C2B1B7;
  --faint:        #9C878F;           /* ≥4.5:1 on --surface */

  --good:  #6FCF8E;   --good-bg: rgba(111, 207, 142, .12);   --good-line: rgba(111, 207, 142, .4);
  --warn:  #F2B53A;   --warn-bg: rgba(242, 181, 58, .12);    --warn-line: rgba(242, 181, 58, .42);
  --bad:   #EF5B5B;   --bad-bg:  rgba(239, 91, 91, .12);     --bad-line:  rgba(239, 91, 91, .4);
  --bad-text: #FFB3B3;
  --info:  #6BB8E0;   --info-bg: rgba(107, 184, 224, .12);   --info-line: rgba(107, 184, 224, .4);
  --gold-bg: rgba(212, 175, 55, .12);  --gold-line: rgba(212, 175, 55, .45);
  --brand-bg: rgba(176, 33, 76, .16);  --brand-line: rgba(176, 33, 76, .5);
  --focus: #E8CB6A;
  --focus-ring: rgba(212, 175, 55, .22);

  --shadow:    0 10px 30px rgba(0, 0, 0, .38);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .28);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);

  --grad-card: linear-gradient(180deg, var(--surface) 0%, var(--surface-end) 100%);
  --grad-tile: linear-gradient(160deg, var(--surface-2) 0%, var(--surface) 100%);
  --gradient-hero:
    radial-gradient(900px 420px at 80% -10%, rgba(176, 33, 76, .55), transparent 65%),
    radial-gradient(700px 360px at 0% 110%, rgba(212, 175, 55, .14), transparent 60%),
    linear-gradient(180deg, #2A0E19 0%, var(--bg) 100%);
}

:root[data-theme="light"] {
  color-scheme: light;
  --accent-2:     #8B1538;           /* burgundy text on light */
  --accent-text:  #8A6A12;           /* dark gold, readable on white */
  --rose:         #8B1538;

  --bg:           #F7F3F1;
  --bg-2:         #FFFFFF;
  --surface:      #FFFFFF;
  --surface-end:  #FCFAF9;
  --surface-2:    #FFFFFF;
  --surface-3:    #F2EBE8;
  --th:           #F5EFEC;
  --band:         #F0EAE7;
  --glass:        rgba(255, 255, 255, .82);
  --glass-strong: rgba(255, 255, 255, .95);
  --tint-1:       rgba(60, 20, 35, .035);
  --tint-2:       rgba(60, 20, 35, .06);
  --glow-1:       rgba(176, 33, 76, .07);
  --glow-2:       rgba(212, 175, 55, .08);

  --line:         #E4D9D5;
  --line-soft:    rgba(60, 20, 35, .08);
  --line-strong:  #C9BAB5;

  --text:         #1F1A1C;
  --muted:        #5E5257;
  --faint:        #75686D;

  --good:  #1D7A45;   --good-bg: rgba(29, 122, 69, .1);    --good-line: rgba(29, 122, 69, .35);
  --warn:  #8A5A00;   --warn-bg: rgba(242, 181, 58, .18);  --warn-line: rgba(200, 140, 20, .45);
  --bad:   #B3261E;   --bad-bg:  rgba(179, 38, 30, .08);   --bad-line:  rgba(179, 38, 30, .35);
  --bad-text: #B3261E;
  --info:  #1B5E8C;   --info-bg: rgba(27, 94, 140, .09);   --info-line: rgba(27, 94, 140, .3);
  --gold-bg: rgba(212, 175, 55, .16);  --gold-line: rgba(176, 140, 30, .5);
  --brand-bg: rgba(139, 21, 56, .08);  --brand-line: rgba(139, 21, 56, .35);
  --focus: #8B1538;
  --focus-ring: rgba(139, 21, 56, .18);

  --shadow:    0 6px 20px rgba(60, 20, 35, .09), 0 1px 3px rgba(60, 20, 35, .06);
  --shadow-sm: 0 2px 8px rgba(60, 20, 35, .07);
  --shadow-lg: 0 18px 44px rgba(60, 20, 35, .18);
}

:root {
  /* Quins brand (same in both themes) */
  --brand:        #8B1538;           /* burgundy */
  --brand-2:      #B0214C;           /* brighter burgundy: glows */
  --brand-deep:   #4A0B1E;
  --accent:       #D4AF37;           /* gold: main buttons, active states */
  --accent-3:     #C29B26;
  --accent-ink:   #1A0D12;           /* text on gold */
  --grad-accent:  linear-gradient(90deg, #D4AF37 0%, #E8CB6A 100%);
  --grad-brand:   linear-gradient(135deg, var(--brand-2) 0%, var(--brand) 55%, var(--brand-deep) 100%);

  /* Shape */
  --radius-sm: 9px;
  --radius:    12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Spacing */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem;  --space-7: 3rem;   --space-8: 4rem;
  --section-y: clamp(2.5rem, 1.75rem + 3.5vw, 4.5rem);
  --header-h: 68px;

  /* Type */
  --font: "Montserrat", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fs-xs: .75rem; --fs-sm: .8125rem; --fs-base: .9375rem; --fs-md: 1.0625rem;
  --fs-lg: 1.1875rem; --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  --fs-3xl: clamp(1.9rem, 1.4rem + 2vw, 2.75rem);

  /* TABLES — one compact row style for every table on the site */
  --table-cell-py: .5rem;      /* row height: top/bottom padding of a cell */
  --table-cell-px: .85rem;     /* left/right padding of a cell */
  --table-head-py: .6rem;      /* header row padding */
  --table-font: .875rem;       /* body text size */
  --table-head-font: .6875rem; /* header text size (uppercase) */
  --table-line: 1.4;           /* line height inside cells */
  --table-wrap-pad: 0;         /* padding of the frame around a table */

  /* FORM CONTROLS — one size for every text box and dropdown.
     Keep --control-font at 1rem or more: iPhones zoom into smaller text. */
  --control-h: 44px;
  --control-pad-x: .85rem;
  --control-font: 1rem;
  --control-max-w: 26rem;
}
@media (max-width: 480px) {
  :root { --table-cell-px: .6rem; --table-font: .85rem; }
}

/* =====================================================================
   2. BASE
   ===================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font: 400 var(--fs-base)/1.65 var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 500px at 85% -10%, var(--glow-1), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, var(--glow-2), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
a { color: var(--accent-2); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-text); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: rgba(212, 175, 55, .35); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; border: 2px solid var(--bg); }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
[hidden] { display: none !important; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font); font-weight: 700; line-height: 1.2;
  letter-spacing: -.015em; color: var(--text); margin-bottom: .75rem; text-wrap: balance;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-lg); font-weight: 600; }
h4 { font-size: var(--fs-md); font-weight: 600; }
p { margin-bottom: .75rem; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: .3rem; }
li::marker { color: var(--accent-text); }
strong { font-weight: 600; }
.muted { color: var(--muted); }

/* Focus + accessibility */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; }
.skip-to-content {
  position: fixed; left: 12px; top: -60px; z-index: 10000; padding: 10px 16px; border-radius: 10px;
  background: var(--accent); color: var(--accent-ink); font-weight: 700; transition: top .15s;
}
.skip-to-content:focus { top: 12px; color: var(--accent-ink); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hp-field { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* =====================================================================
   3. LAYOUT
   ===================================================================== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section { padding: var(--section-y) 0; position: relative; }
.section-light { background: var(--band); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

/* Centred section titles get a small gold bar underneath */
.section > .container > h2.text-center::after {
  content: ""; display: block; width: 44px; height: 3px; margin: .8rem auto 0;
  border-radius: 3px; background: var(--grad-accent);
}

.grid { display: grid; gap: 1.25rem; margin: 1.5rem 0; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* =====================================================================
   4. HEADER + NAVIGATION
   ===================================================================== */
header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 1000;
  background: var(--glass);
  backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
  transition: background .2s, box-shadow .2s;
}
header.is-scrolled { background: var(--glass-strong); box-shadow: 0 8px 24px rgba(0, 0, 0, .35); }
.nav-container { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }

.logo { display: flex; align-items: center; gap: 12px; color: var(--text); font-weight: 700; font-size: 1.02rem; letter-spacing: .02em; }
.logo:hover { color: var(--text); }
.logo-emblem { height: 44px; width: auto; filter: drop-shadow(0 4px 10px rgba(176, 33, 76, .45)); }
.logo span { white-space: nowrap; }

.nav-menu { display: flex; align-items: center; list-style: none; gap: .15rem; padding: 0; }
.nav-menu li { margin: 0; }
.nav-menu a {
  position: relative; display: block; padding: .5rem .7rem; border-radius: 9px;
  color: var(--muted); font-size: .875rem; font-weight: 600; white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-menu a:hover { color: var(--text); background: var(--tint-1); }
.nav-menu a.active { color: var(--accent-2); }
.nav-menu a.active::after {
  content: ""; position: absolute; left: .7rem; right: .7rem; bottom: .2rem; height: 2px;
  border-radius: 2px; background: var(--accent);
}

/* Login button (opens member/captain portal or admin) */
.nav-menu .nav-login { display: flex; align-items: center; margin-left: .4rem; }
.login-menu { position: relative; }
.login-menu summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem;
  min-height: 38px; padding: 0 1rem; border-radius: 10px;
  background: var(--grad-accent); color: var(--accent-ink);
  font-size: .875rem; font-weight: 700; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(212, 175, 55, .22); transition: filter .15s;
}
.login-menu summary::-webkit-details-marker { display: none; }
.login-menu summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 2px 2px 0; transform: translateY(-2px) rotate(45deg); }
.login-menu summary:hover, .login-menu[open] summary { filter: brightness(1.08); }
.login-menu-list {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 1001; min-width: 240px;
  list-style: none; margin: 0; padding: 6px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow);
}
.nav-menu .login-menu-list a { padding: .6rem .75rem; color: var(--text); }
.nav-menu .login-menu-list a::after { content: none; }
.nav-menu .login-menu-list a:hover { background: var(--tint-2); color: var(--accent-2); }

.mobile-menu-toggle {
  display: none; flex-direction: column; justify-content: center; align-items: center;
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
}
.mobile-menu-toggle span { display: block; width: 18px; height: 2px; margin: 2px 0; border-radius: 2px; background: var(--text); transition: transform .2s, opacity .2s; }
.mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (min-width: 769px) and (max-width: 1200px) {
  .logo span { display: none; }         /* emblem only, so the menu + Login fit */
  .nav-menu a { padding: .5rem .45rem; font-size: .82rem; }
}
@media (max-width: 768px) {
  :root { --header-h: 60px; }
  .logo-emblem { height: 38px; }
  .mobile-menu-toggle { display: flex; }
  .nav-menu {
    position: fixed; top: var(--header-h); left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
    padding: .75rem 1rem 1.25rem;
    background: var(--surface-end); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-lg);
    transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
  }
  .nav-menu.active { transform: none; opacity: 1; visibility: visible; }
  .nav-menu a { padding: .75rem .9rem; font-size: 1rem; }
  .nav-menu a.active { background: var(--gold-bg); }
  .nav-menu a.active::after { content: none; }
  .nav-menu .nav-login { margin: .5rem 0 0; display: block; }
  .login-menu summary { min-height: 44px; width: 100%; justify-content: center; }
  .login-menu-list { position: static; margin-top: 6px; box-shadow: none; }
}

/* =====================================================================
   5. HERO + STATS
   ===================================================================== */
.hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 600px; padding: calc(var(--header-h) + 72px) 20px 110px;
  background: var(--gradient-hero);
}
.hero.page-hero { border-bottom: 1px solid var(--line-soft); }
/* faint court-line grid */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--tint-1) 1px, transparent 1px), linear-gradient(90deg, var(--tint-1) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%);
}
.hero-content { position: relative; z-index: 2; max-width: 820px; }
.hero-heading { margin: 0; line-height: 0; }
.hero-logo {
  width: 90%; max-width: 560px; max-height: 240px; height: auto; object-fit: contain;
  margin-bottom: 1.25rem; filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .45));
  animation: rise .7s var(--ease) both;
}
.hero h1 { color: #fff; }
.hero-subtitle { font-size: var(--fs-md); font-weight: 500; color: var(--muted); letter-spacing: .02em; margin-bottom: 1.75rem; }
.cta-buttons { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }

/* Inner-page heroes (Northerns, Rules) size to their content */
.hero.page-hero { min-height: 0; padding: calc(var(--header-h) + 56px) 20px 52px; }
.page-hero-title { color: #fff !important; text-shadow: none !important; }
.hero.page-hero .hero-subtitle { margin-bottom: 0; }

/* Stats: KPI tiles that overlap the bottom of the hero */
.stats-section { padding: 0 0 var(--space-6); margin-top: -64px; z-index: 3; }
.stats-section .grid { margin: 0; gap: 1rem; }
.stats-section .card {
  overflow: hidden; padding: 1.1rem 1.2rem 1rem; text-align: left;
  background: var(--grad-tile); box-shadow: var(--shadow);
  animation: rise .5s var(--ease) both;
}
.stats-section .card::after {
  content: ""; position: absolute; right: -36px; top: -36px; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(176, 33, 76, .35) 0%, transparent 70%); pointer-events: none;
}
.stats-section .card:nth-child(2n)::after { background: radial-gradient(circle, rgba(212, 175, 55, .22) 0%, transparent 70%); }
.stat-number { font-size: 2.1rem; font-weight: 700; letter-spacing: -.03em; margin: 0 0 .1rem; color: var(--text); font-variant-numeric: tabular-nums; }
.stats-section .card p { color: var(--muted); font-size: var(--fs-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin: 0; }
.stats-section .card p::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: .5rem; border-radius: 50%; background: var(--accent); vertical-align: middle; transform: translateY(-1px); }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* =====================================================================
   6. BUTTONS
   ===================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 44px; padding: .55rem 1.2rem; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--text);
  font-size: .875rem; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s, filter .15s, box-shadow .15s;
}
.btn:hover { border-color: var(--accent); color: var(--accent-2); }
.btn:active { filter: brightness(.92); }
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; filter: none; }
.btn-primary {
  background: var(--grad-accent); border-color: var(--accent); color: var(--accent-ink);
  box-shadow: 0 8px 22px rgba(212, 175, 55, .2);
}
.btn-primary:hover { color: var(--accent-ink); filter: brightness(1.07); border-color: var(--accent-2); }
.btn-secondary { background: var(--tint-1); border-color: rgba(255, 255, 255, .35); color: #fff; }
.btn-secondary:hover { background: var(--tint-2); border-color: #fff; color: #fff; }
.btn-outline { background: transparent; border-color: var(--accent); color: var(--accent-2); }
.btn-outline:hover { background: var(--gold-bg); }
.btn-danger { background: var(--bad-bg); border-color: rgba(239, 91, 91, .6); color: var(--bad-text); }
.btn-danger:hover { background: var(--bad); border-color: var(--bad); color: #fff; }
.btn-small { min-height: 34px; padding: .3rem .85rem; font-size: .8125rem; border-radius: 8px; }

/* Buttons in a row with a text box/dropdown match its height */
:is(.inline, .actions, .lineup-row, .btn-row) > .btn { min-height: var(--control-h); }
.btn-row { display: flex !important; flex-wrap: wrap !important; gap: .5rem; }

/* Spinner used inside a "Sending…" button */
.loading {
  display: inline-block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================
   7. CARDS + CONTENT BLOCKS
   ===================================================================== */
.card {
  position: relative; min-width: 0;
  background: var(--grad-card);
  border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 1.5rem; box-shadow: var(--shadow);
}
.card > h3:first-child, .card > h2:first-child { margin-bottom: .9rem; }
.card h4.text-primary, .card h4 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .09em; color: var(--muted) !important; margin: 1.1rem 0 .55rem; }
.card ul { margin-bottom: .5rem; }

/* "Why choose" style cards: small gold dot before the title */
.grid-3 > .card > h3:first-child::before {
  content: ""; display: block; width: 34px; height: 34px; margin-bottom: .85rem; border-radius: 10px;
  background: radial-gradient(circle at 50% 50%, var(--accent) 0 5px, transparent 6px), var(--surface-3);
  box-shadow: inset 0 0 0 1px var(--line);
}

.tick-list { list-style: none; padding: 0; margin: 0; }
.tick-list li { position: relative; padding: .6rem 0 .6rem 1.6rem; margin: 0; border-top: 1px solid var(--line-soft); }
.tick-list li:first-child { border-top: 0; }
.tick-list li::before {
  content: ""; position: absolute; left: 0; top: .95rem; width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold-bg); box-shadow: inset 0 0 0 1px var(--gold-line);
}
.tick-list li::after { content: ""; position: absolute; left: 4px; top: 1.15rem; width: 6px; height: 3px; border: solid var(--accent); border-width: 0 0 2px 2px; transform: rotate(-45deg); }

.info-box { margin: 1rem 0 !important; padding: .9rem 1rem !important; border-radius: 10px !important; background: var(--info-bg) !important; border: 1px solid var(--info-line); }

.fixtures-empty { text-align: center; padding: 2rem; color: var(--muted); }
.fixtures-cta { margin-top: 1.25rem; }
.ladder-status { margin-top: .9rem; color: var(--muted); font-size: var(--fs-sm); }
.show-more-wrap { text-align: center; margin-top: 1.25rem; }

/* =====================================================================
   8. FORMS
   ===================================================================== */
.form-group, .field { margin-bottom: 1rem; }
.form-group label, .field > label {
  display: block; margin-bottom: .4rem; font-size: var(--fs-sm); font-weight: 600; color: var(--muted);
}
.form-control {
  display: block; width: 100%; padding: .7rem var(--control-pad-x);
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--bg-2); color: var(--text); font-size: var(--control-font);
  transition: border-color .15s, box-shadow .15s;
}
.form-control:hover { border-color: var(--faint); }
.form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); }
.form-control::placeholder { color: var(--faint); }
.form-control[readonly], .form-control:disabled { opacity: .7; cursor: not-allowed; }
.form-control[aria-invalid="true"] { border-color: var(--bad); }
textarea.form-control { min-height: 120px; resize: vertical; }
input[type="file"].form-control { padding: .5rem; height: auto !important; }
input[type="file"].form-control::file-selector-button {
  margin-right: .75rem; padding: .45rem .9rem; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface-3); color: var(--text); font-weight: 600;
}
select.form-control {
  appearance: none; cursor: pointer; text-overflow: ellipsis;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23C2B1B7' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2.25rem;
}
select.form-control option { background: var(--surface-2); color: var(--text); }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); flex: none; cursor: pointer; }

/* Single-line inputs + dropdowns all share one height (not the score boxes) */
:where(input.form-control:not([type="checkbox"], [type="radio"], [type="file"]), select.form-control):not(.gpair *) {
  height: var(--control-h); padding-top: 0; padding-bottom: 0; line-height: normal;
}

/* Stand-alone pickers fill the row up to one shared maximum width */
.control-picker { flex: 1 1 14rem; width: 100%; max-width: var(--control-max-w); min-width: 0; }
.league-filter { margin: 0 auto !important; }

.form-error { color: var(--bad-text); font-weight: 500; font-size: var(--fs-sm); min-height: 1.2em; margin: 0 0 .75rem; }
.form-error:empty { min-height: 0; margin: 0; }
.form-success { padding: 1.25rem; border-radius: 12px; background: var(--good-bg); border: 1px solid var(--good-line); }
.form-success h4 { margin-top: 0; color: var(--good); }

/* =====================================================================
   9. TABLES
   ===================================================================== */
.clubs-table-container {
  overflow-x: auto; padding: var(--table-wrap-pad);
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}
.clubs-table, .membership-table, .rules-table, .result-table, .news-admin-list {
  width: 100%; border-collapse: collapse; background: transparent;
}
:where(.clubs-table, .membership-table, .rules-table, .result-table, .news-admin-list) :where(th) {
  padding: var(--table-head-py) var(--table-cell-px);
  font-size: var(--table-head-font); line-height: var(--table-line);
  background: var(--th); color: var(--muted); text-align: left; white-space: nowrap;
  font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid var(--line);
}
:where(.clubs-table, .membership-table, .rules-table, .result-table, .news-admin-list) :where(td) {
  padding: var(--table-cell-py) var(--table-cell-px);
  font-size: var(--table-font); line-height: var(--table-line);
  border-top: 1px solid var(--line-soft); color: var(--text);
}
:where(.clubs-table, .membership-table, .rules-table, .news-admin-list) tbody tr { transition: background .12s; }
:where(.clubs-table, .membership-table, .rules-table, .news-admin-list) tbody tr:hover { background: rgba(212, 175, 55, .05); }
:where(.clubs-table, .membership-table, .rules-table, .news-admin-list) tbody tr:first-child td { border-top: 0; }

/* Buttons inside table rows stay small so rows stay compact */
:where(.clubs-table, .membership-table, .rules-table, .news-admin-list, .result-table) td .btn { min-height: 32px; padding: .2rem .75rem; font-size: .8rem; border-radius: 8px; }

/* Ladder: rank column, top three in gold */
.ladder-table th:first-child, .ladder-table td:first-child { width: 3.25rem; text-align: right; font-variant-numeric: tabular-nums; }
.ladder-table td:first-child { color: var(--muted); font-weight: 600; }
.ladder-table tbody tr:nth-child(-n+3) td:first-child { color: var(--accent-text); font-weight: 700; }
.ladder-table tbody tr:nth-child(even) { background: var(--tint-1); }
.ladder-standings-wrap .clubs-table-container { max-width: 720px; margin: 0 auto; }

/* Membership fees: group rows look like section headings */
.membership-table { margin: .25rem 0 1rem; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.membership-table tbody tr:has(td strong) { background: var(--tint-1); }
.membership-table tbody tr:has(td strong) td { padding-top: .7rem; }
.membership-table tbody tr td:first-child strong { color: var(--accent-2); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; }
.membership-table td:last-child, .membership-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.membership-table td:last-child { font-weight: 700; }

/* Northerns clubs: our own club row */
.clubs-table tbody tr.highlight-row { background: var(--gold-bg); box-shadow: inset 3px 0 0 var(--accent); }
.clubs-table td:first-child { font-weight: 500; }
#fixturesTable td:first-child, #fixturesTable td:nth-child(5) { white-space: nowrap; }

/* Fixture home/away badges */
.badge-home, .badge-away {
  display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  font-size: .72rem; font-weight: 700;
}
.badge-home { background: var(--good-bg); color: var(--good); box-shadow: inset 0 0 0 1px var(--good-line); }
.badge-away { background: var(--info-bg); color: var(--info); box-shadow: inset 0 0 0 1px var(--info-line); }

/* Directions links */
.map-link {
  display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem; border-radius: var(--radius-pill);
  background: var(--gold-bg); color: var(--accent-2); font-size: .8125rem; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent; transition: border-color .15s, background .15s;
}
.map-link::before {
  content: ""; width: 12px; height: 14px; flex: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 0a5 5 0 0 0-5 5c0 3.6 5 9 5 9s5-5.4 5-9a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 0a5 5 0 0 0-5 5c0 3.6 5 9 5 9s5-5.4 5-9a5 5 0 0 0-5-5zm0 7a2 2 0 1 1 0-4 2 2 0 0 1 0 4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.map-link:hover { border-color: var(--gold-line); color: var(--accent-text); }
.no-coordinates { color: var(--faint); font-style: italic; font-size: var(--fs-sm); }

/* =====================================================================
   10. TABLE CARDS — wide tables become stacked cards on phones.
   Add class="table-cards" (and optionally data-card-title="N") to a <table>;
   table-cards.js labels the cells from the column headings.
   ===================================================================== */
@media (max-width: 640px) {
  .clubs-table-container:has(> table.table-cards),
  .card > table.table-cards { background: none; border: 0; box-shadow: none; padding: 0; overflow: visible; }
  table.table-cards, table.table-cards > tbody { display: block; width: 100%; }
  table.table-cards > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  table.table-cards > tbody > tr {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem 1rem;
    padding: .7rem .9rem; margin-bottom: .6rem;
    background: var(--grad-tile); border: 1px solid var(--line-soft); border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }
  table.table-cards > tbody > tr:hover { background: var(--grad-tile); }
  table.table-cards > tbody > tr[hidden] { display: none; }
  table.table-cards > tbody > tr > td { display: block; padding: 0; border: 0; text-align: left; min-width: 0; overflow-wrap: anywhere; }
  table.table-cards > tbody > tr > td::before {
    content: attr(data-label); display: block; line-height: 1.3; margin-bottom: .1rem;
    color: var(--faint); font-size: .6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em;
  }
  table.table-cards > tbody > tr > td[data-label=""]::before,
  table.table-cards > tbody > tr > td.card-title::before,
  table.table-cards > tbody > tr > td.card-full::before { content: none; }
  table.table-cards > tbody > tr > td:empty { display: none; }
  table.table-cards > tbody > tr > td.card-title {
    order: -1; grid-column: 1 / -1; line-height: 1.3;
    font-weight: 700; font-size: 1rem; padding-bottom: .4rem; margin-bottom: .1rem; border-bottom: 1px solid var(--line-soft);
  }
  table.table-cards > tbody > tr > td.card-full,
  table.table-cards > tbody > tr > td.row-actions,
  table.table-cards.rules-table > tbody > tr > td { grid-column: 1 / -1; }
  table.table-cards > tbody > tr > td.row-actions { white-space: normal; }
}

/* =====================================================================
   11. TABS, SEGMENTED CONTROLS, CHIPS, BADGES
   ===================================================================== */
/* Segmented control: home-page ladder switch + portal/admin ladder switch */
.ladder-tabs, .ladder-subtabs {
  display: flex; width: fit-content; gap: 2px; padding: 3px; margin: 0 auto 1.25rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.ladder-subtabs { margin: 0 0 1rem; }
.ladder-tab, .ladder-subtab {
  min-height: 36px !important; padding: .35rem 1.1rem; border: 0; border-radius: 9px;
  background: transparent; color: var(--muted); font-size: .8125rem; box-shadow: none;
}
.ladder-tab:hover, .ladder-subtab:hover { color: var(--text); background: var(--tint-1); }
.ladder-tab.active, .ladder-subtab.active { background: var(--grad-accent); color: var(--accent-ink); }

/* Underlined tabs: portal + admin sections */
.portal-tabs, .admin-tabs {
  display: flex; gap: 4px; margin: 0 0 1.5rem; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
.portal-tabs::-webkit-scrollbar, .admin-tabs::-webkit-scrollbar { display: none; }
.portal-tabs .portal-tab, .admin-tabs .admin-tab {
  min-height: 44px; padding: .6rem 1rem; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  background: none; color: var(--muted); font-size: .875rem; box-shadow: none;
}
.portal-tabs .portal-tab:hover, .admin-tabs .admin-tab:hover { color: var(--text); border-color: transparent; border-bottom-color: var(--line-strong); }
.portal-tabs .portal-tab.active, .admin-tabs .admin-tab.active { color: var(--accent-2); border-bottom-color: var(--accent); }
.portal-tabs .portal-tab:focus-visible, .admin-tabs .admin-tab:focus-visible { outline-offset: -2px; }

/* Chips: team picker, league picker */
.chip {
  display: inline-flex; align-items: center; gap: 4px; min-height: 36px; margin: 0 .35rem .5rem 0;
  padding: .3rem .95rem; border-radius: var(--radius-pill); cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--muted);
  font-size: .8125rem; font-weight: 600; white-space: nowrap; transition: color .15s, border-color .15s, background .15s;
}
.chip:hover { color: var(--text); border-color: var(--muted); }
.chip.active { background: var(--gold-bg); border-color: var(--gold-line); color: var(--accent-2); }

/* Pills / status badges (dot + label) */
.pill, .challenge-status, .news-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: .15rem .65rem; border-radius: var(--radius-pill);
  font-size: .72rem; font-weight: 600; white-space: nowrap; line-height: 1.6;
  color: var(--muted); background: var(--tint-2);
}
.pill::before, .challenge-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill.published, .pill.role-member, .challenge-status.s-completed { color: var(--good); background: var(--good-bg); }
.pill.draft, .pill.prospect, .challenge-status.s-pending, .challenge-status.s-accepted { color: var(--warn); background: var(--warn-bg); }
.pill.captain, .pill.role-captain { color: var(--info); background: var(--info-bg); }
.pill.role-admin { color: var(--rose); background: var(--brand-bg); }
.pill.archived, .pill.inactive { color: var(--muted); background: var(--tint-2); }

/* =====================================================================
   12. NEWS
   ===================================================================== */
.news-container { display: grid; gap: 1.25rem; }
.news-item {
  position: relative; overflow: hidden;
  background: var(--grad-card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 1.5rem; box-shadow: var(--shadow); transition: border-color .2s, transform .2s var(--ease);
}
.news-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand-2); }
.news-item.featured::before { background: var(--grad-accent); }
.news-item:hover { border-color: rgba(212, 175, 55, .3); }
.news-item.has-media { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 760px) {
  .news-item.has-media { grid-template-columns: minmax(220px, 34%) minmax(0, 1fr); gap: 1.75rem; align-items: start; }
}
.news-media { margin: 0; }
.news-image { display: block; width: 100%; height: auto; border-radius: var(--radius); margin: 0 0 1rem; }
.news-media .news-image {           /* the whole photo, heads included — never cropped */
  margin: 0; object-fit: contain; max-height: none;
  border: 1px solid var(--line-soft); box-shadow: var(--shadow-sm);
}
@media (max-width: 759px) {
  .news-media .news-image { max-height: 70vh; width: auto; max-width: 100%; margin: 0 auto; }
}
.news-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .6rem; }
.news-badge { color: var(--accent-2); background: var(--gold-bg); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .6rem; }
.news-meta .news-badge, .news-meta .news-date { margin: 0; }
.news-date { color: var(--faint); font-size: var(--fs-sm); font-weight: 500; margin-bottom: .6rem; }
.news-title { font-size: var(--fs-xl); font-weight: 700; color: var(--text); margin: 0 0 .6rem; line-height: 1.25; }
.news-body { color: var(--muted); line-height: 1.75; }
.news-body p { margin-bottom: .85rem; }
.news-body strong { color: var(--text); }
.news-highlight {
  margin: 1rem 0; padding: .8rem 1rem; border-radius: 10px;
  background: var(--gold-bg); border: 1px solid var(--gold-line); color: var(--text);
}
.news-footer, .news-content .news-footer {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem;
  margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line-soft); font-size: var(--fs-sm);
}
.news-category { padding: .15rem .65rem; border-radius: var(--radius-pill); background: var(--tint-2); color: var(--muted); font-size: .72rem; font-weight: 600; }
.news-author { color: var(--faint); font-size: var(--fs-sm); }
.news-read-more {
  background: none; border: 0; padding: .25rem 0; margin-bottom: .5rem; cursor: pointer;
  color: var(--accent-2); font-weight: 600; font-size: var(--fs-sm);
}
.news-read-more:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
   13. CONTACT BAND + FOOTER
   ===================================================================== */
.section-dark {
  background:
    radial-gradient(700px 320px at 100% 0%, rgba(176, 33, 76, .22), transparent 65%),
    var(--ink-900);
  border-top: 1px solid var(--line-soft);
}
.section-dark h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.section-dark .card h3 { font-size: var(--fs-lg); text-transform: none; letter-spacing: -.015em; }
.section-dark .card { color: var(--text); }
.contact-link { color: var(--accent-2); font-weight: 600; }
.contact-link:hover { text-decoration: underline; text-underline-offset: 3px; }

footer { background: var(--ink-900); border-top: 1px solid var(--line-soft); padding: 3rem 0 1.25rem; color: var(--muted); }
.footer-content { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2rem; margin-bottom: 2rem; }
.footer-section h3 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--accent-text); margin-bottom: .9rem; }
.footer-section p, .footer-section li { font-size: var(--fs-sm); color: var(--muted); }
.footer-section ul { list-style: none; padding: 0; }
.footer-section li { margin-bottom: .2rem; }
.footer-section a { display: inline-block; padding: .25rem 0; color: var(--muted); }
.footer-section a:hover { color: var(--accent-2); }
.footer-emblem { width: 64px; height: auto; margin-bottom: .9rem; opacity: .95; }
.footer-bottom { border-top: 1px solid var(--line-soft); padding-top: 1rem; text-align: center; font-size: var(--fs-xs); color: var(--faint); }

/* =====================================================================
   14. FEEDBACK: toasts, back-to-top, entrance animation
   ===================================================================== */
.notification {
  position: fixed; top: calc(var(--header-h) + 14px); right: 20px; z-index: 1100;
  max-width: min(420px, calc(100vw - 40px)); padding: .85rem 1.1rem .85rem 1.2rem;
  border-radius: 12px; background: var(--surface-3); border: 1px solid var(--line); color: var(--text);
  box-shadow: var(--shadow-lg); font-size: var(--fs-sm); font-weight: 500;
  border-left: 4px solid var(--info);
  opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s var(--ease);
}
.notification.visible { opacity: 1; transform: none; }
.notification-success { border-left-color: var(--good); }
.notification-error   { border-left-color: var(--bad); }
.notification-info    { border-left-color: var(--info); }
:where(.page-portal, .page-admin) .notification { top: 76px; }

.back-to-top {
  position: fixed; right: 24px; bottom: 24px; z-index: 900;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--gold-line); background: var(--surface-2); color: var(--accent-2); font-size: 18px;
  box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s, border-color .15s;
}
.back-to-top.visible { opacity: 1; visibility: visible; }
.back-to-top:hover { border-color: var(--accent); color: var(--accent-text); }

.fade-in { animation: rise .6s var(--ease) both; }

/* =====================================================================
   15. MEMBER PORTAL + ADMIN (app-style screens)
   ===================================================================== */
:where(.page-portal, .page-admin) .hidden { display: none !important; }
body:where(.page-portal, .page-admin) { min-height: 100vh; }

/* Sign-in screens */
.login-wrap { width: min(420px, calc(100% - 32px)); margin: 8vh auto 0; }
p.login-wrap { margin-bottom: .75rem !important; }
.login-wrap.card, .login-wrap .card { padding: 2rem 1.9rem 1.6rem; }
.login-back { display: inline-flex; align-items: center; gap: .35rem; margin-bottom: .9rem; color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.login-back:hover { color: var(--accent-2); }
.login-emblem { display: block; height: 72px; width: auto; margin: 0 auto .9rem; filter: drop-shadow(0 6px 18px rgba(176, 33, 76, .5)); }
.login-title { font-size: 1.35rem; text-align: center; margin: 0 0 .35rem; }
.page-admin #loginView h2 { font-size: 1.35rem; }
.login-wrap .muted { font-size: var(--fs-sm); margin-bottom: 1.4rem; }
.login-wrap .btn-primary { min-height: 46px; font-size: .9375rem; margin-top: .25rem; }
.login-help { margin: 1.25rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line-soft); font-size: var(--fs-sm); text-align: center; color: var(--muted); }
.login-help a { font-weight: 600; }

/* Top bar (like an app header): emblem, title, user, actions */
.portal-bar, .admin-bar {
  position: sticky; top: 0; z-index: 50;
  background: var(--glass-strong); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft); padding: .75rem 0;
}
.portal-bar .container, .admin-bar .container { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; }
.portal-bar h1, .admin-bar h1 { display: flex; align-items: center; gap: .7rem; margin: 0; font-size: 1.15rem; letter-spacing: -.01em; }
.portal-bar h1::before, .admin-bar h1::before {
  content: ""; width: 26px; height: 38px; flex: none;
  background: url("Images/emblem-shadow-120.webp") center / contain no-repeat;
}
.portal-bar .who, .admin-bar .who {
  display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem .3rem .45rem; border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted);
}
.portal-bar .who:empty, .admin-bar .who:empty { display: none; }
.portal-bar .who::before, .admin-bar .who::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-bg); }
.portal-site-link { color: var(--muted); font-size: var(--fs-sm); font-weight: 600; }
.portal-site-link:hover { color: var(--accent-2); }
.bar-actions, .admin-bar .inline { display: flex !important; align-items: center !important; gap: .5rem !important; flex-wrap: wrap !important; justify-content: flex-end !important; }
.portal-bar .btn, .admin-bar .btn { min-height: 36px; background: transparent; border-color: var(--line); color: var(--muted); }
.portal-bar .btn:hover, .admin-bar .btn:hover { color: var(--text); border-color: var(--line-strong); background: var(--tint-1); }

.portal-main, .admin-main { padding: 1.75rem 0 4rem; }
:where(.page-portal, .page-admin) .card { padding: 1.35rem; }
:where(.page-portal, .page-admin) .card > h3:first-child { font-size: 1.05rem; }
:where(.page-portal, .page-admin) .muted { font-size: var(--fs-sm); }
:where(.page-portal, .page-admin) .grid { margin: 0; }

/* Admin forms */
.grid-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1.25rem; }
.inline { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.field.inline > label { margin: 0; color: var(--text); font-weight: 500; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.card-head h3 { margin: 0; }
.row-actions { white-space: nowrap; }
.row-actions .btn { margin: .1rem; }
.move-btn { min-height: 30px !important; padding: .15rem .55rem !important; line-height: 1; }
.position-input { width: 70px; display: inline-block; }
.mono { font-family: Consolas, "Cascadia Mono", "Courier New", monospace; }
.temp-pw { display: flex; gap: .5rem; align-items: center; }
.temp-pw input { font-size: 1.1rem; letter-spacing: 1px; color: var(--accent-2); }
.csv-result { margin-top: .5rem; }
.pre-line { white-space: pre-line; }

/* Modal (change password etc.) */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(6, 2, 4, .66); backdrop-filter: blur(3px);
}
.modal-box {
  width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; padding: 1.6rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  animation: rise .2s var(--ease) both;
}
.modal-box h3 { margin-top: 0; }

/* Captain: line-up builder */
.lineup-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .6rem; }
.lineup-row label { width: 90px; font-weight: 600; color: var(--muted); font-size: var(--fs-sm); }
.lineup-row select { flex: 1; }

/* Captain: score capture */
.gpair { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.gpair input {
  width: 46px; padding: .4rem .2rem; font-size: .95rem; text-align: center; font-variant-numeric: tabular-nums;
  -moz-appearance: textfield; appearance: textfield;
}
.gpair input::-webkit-outer-spin-button, .gpair input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gpair .vs { color: var(--faint); }
.result-table .gpair input[aria-invalid="true"] { border-color: var(--bad); background: var(--bad-bg); }
td.derived { font-weight: 700; white-space: nowrap; color: var(--accent-2); }
.result-table td.pos-cell { color: var(--accent-text); font-weight: 700; }
@media (max-width: 700px) {
  /* Phones: one card per position, big score boxes */
  .result-table, .result-table tbody { display: block; width: 100%; }
  .result-table thead { display: none; }
  .clubs-table-container:has(> .result-table) { background: none; border: 0; box-shadow: none; }
  .result-table tbody tr {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .35rem .75rem;
    padding: .8rem .9rem; margin-bottom: .75rem;
    background: var(--grad-tile); border: 1px solid var(--line-soft); border-radius: var(--radius);
  }
  .result-table tbody td { border: 0; padding: 0; }
  .result-table tbody td.player-cell { font-weight: 600; }
  .result-table tbody td.derived { grid-column: 3; grid-row: 1; font-size: .95rem; }
  .result-table tbody td.derived:not(:empty)::before { content: "Games "; font-weight: 500; color: var(--faint); }
  .result-table tbody td.game-cell {
    grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between;
    padding: .25rem 0; border-top: 1px solid var(--line-soft);
  }
  .result-table tbody td.game-cell::before { content: attr(data-label); font-weight: 500; color: var(--muted); }
  .result-table .gpair { gap: .5rem; }
  .result-table .gpair input { width: 3.75rem; height: 2.9rem; font-size: 1.15rem; }
  .result-table tbody tr:has(td.game-cell)::after {
    content: "Harlequin  :  Opponent"; grid-column: 1 / -1; grid-row: 2; justify-self: end;
    font-size: .72rem; color: var(--faint); letter-spacing: .02em; padding-right: .25rem;
  }
  .result-table tbody td[colspan] { grid-column: 1 / -1; }
}

/* Ladder: my own row */
tr.me-row { background: var(--gold-bg) !important; box-shadow: inset 3px 0 0 var(--accent); font-weight: 600; }

/* Challenges list */
.challenge-item {
  padding: .85rem 1rem; margin-bottom: .6rem; border-radius: var(--radius);
  background: var(--surface-2); border: 1px solid var(--line-soft);
}
.challenge-item.needs-me { border-color: var(--gold-line); background: linear-gradient(90deg, rgba(212, 175, 55, .1), var(--surface-2) 60%); }
.challenge-item .who-line { font-weight: 600; margin-bottom: .2rem; }
.challenge-item .meta { font-size: var(--fs-sm); color: var(--muted); margin-bottom: .55rem; }
.challenge-item .actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.challenge-item .actions input { width: 56px; }
.load-error { color: var(--bad-text); }

/* =====================================================================
   16. RULES PAGE — sidebar navigation, search, clause links, print
   ===================================================================== */
.rules-intro { font-style: italic; color: var(--muted); }
.rules-meta { color: var(--accent-2); font-weight: 600; }
.rules-doc-note { color: var(--muted); }

.key-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin: 0 0 1.5rem; }
.key-facts .kf {
  position: relative; overflow: hidden; padding: 1rem 1.1rem;
  background: var(--grad-tile); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.key-facts .kf::after { content: ""; position: absolute; right: -30px; top: -30px; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, rgba(176, 33, 76, .3) 0%, transparent 70%); }
.key-facts .kf strong { display: block; color: var(--text); font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; }
.key-facts .kf span { font-size: var(--fs-sm); color: var(--muted); }

.rules-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 2.25rem; align-items: start; margin-top: 2rem; }
.rules-nav {
  position: sticky; top: calc(var(--header-h) + 20px); max-height: calc(100vh - var(--header-h) - 40px); overflow-y: auto;
  padding: 1.1rem; background: var(--grad-card); border: 1px solid var(--line-soft); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.rules-search label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); margin-bottom: .35rem; }
.rules-search-status { min-height: 1.1em; margin: .35rem 0 0; font-size: var(--fs-xs); color: var(--faint); }
.rules-nav-title { font-size: .6875rem !important; text-transform: uppercase; letter-spacing: .1em; color: var(--faint) !important; margin: 1rem 0 .4rem; border: 0 !important; padding: 0 !important; }
.rules-toc { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 2rem; }
.rules-toc li { margin-bottom: .3rem; break-inside: avoid; }
.rules-nav .rules-toc { columns: 1; }
.rules-nav .rules-toc li { margin: 0; }
.rules-nav .rules-toc a {
  display: block; padding: .32rem .6rem; border-radius: 8px; border-left: 2px solid transparent;
  color: var(--muted); font-size: var(--fs-sm); line-height: 1.35;
}
.rules-nav .rules-toc a:hover { background: var(--tint-1); color: var(--text); }
.rules-nav .rules-toc a.active { background: var(--gold-bg); border-left-color: var(--accent); color: var(--accent-2); font-weight: 600; }
.rules-nav .rules-toc a.rules-miss { opacity: .35; }
.rules-print { margin-top: 1rem; width: 100%; }

.rules-section { scroll-margin-top: calc(var(--header-h) + 24px); margin-bottom: 2.25rem; }
.rules-section.card { margin-bottom: 1.5rem; }
.rules-section h2 { font-size: var(--fs-xl); padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.rules-section h2::after { content: ""; display: block; width: 40px; height: 3px; margin-top: .6rem; margin-bottom: -.65rem; border-radius: 3px; background: var(--grad-accent); }
.rules-section h3 { font-size: 1.05rem; color: var(--accent-2); margin-top: 1.4rem; }
.clause { margin: .45rem 0; padding-left: 3.2rem; text-indent: -3.2rem; line-height: 1.7; scroll-margin-top: calc(var(--header-h) + 40px); border-radius: 6px; color: var(--muted); }
.clause .n { display: inline-block; min-width: 2.8rem; text-indent: 0; font-weight: 700; color: var(--accent-2); font-variant-numeric: tabular-nums; }
.clause.sub { padding-left: 4.6rem; text-indent: -4.6rem; }
.clause.sub .n { min-width: 4.2rem; color: var(--faint); }
.clause a.n:hover { text-decoration: underline; text-underline-offset: 3px; }
.clause strong { color: var(--text); }
.rules-callout { margin: 1rem 0; padding: .85rem 1.1rem; border-radius: 10px; background: var(--gold-bg); border: 1px solid var(--gold-line); color: var(--text); }
.back-to-toc { font-size: var(--fs-sm); }
.back-to-toc a { color: var(--faint); }
.rules-table { margin: 1rem 0; border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden; }
.rules-table th, .rules-table td { vertical-align: top; }
@keyframes rules-flash { 0%, 60% { background: rgba(212, 175, 55, .3); } 100% { background: transparent; } }
.rules-flash { animation: rules-flash 2.2s ease-out; }
mark.rules-hit { background: rgba(212, 175, 55, .45); color: var(--text); padding: 0 .1em; border-radius: 3px; }
.rules-body .rules-miss { display: none !important; }
.rules-no-results { padding: 1.5rem; text-align: center; color: var(--muted); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius); }
.rules-jump { display: none; }

@media (max-width: 900px) {
  .rules-layout { grid-template-columns: 1fr; gap: 1rem; margin-top: 1.5rem; }
  .rules-nav { position: static; max-height: none; overflow: visible; }
  .rules-nav .rules-nav-title, .rules-nav .rules-toc, .rules-print { display: none; }
  .rules-jump {
    display: block; position: sticky; top: var(--header-h); z-index: 5;
    margin: 0 -20px 1rem; padding: .6rem 20px;
    background: var(--glass-strong); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
  }
  .rules-jump .form-control { font-weight: 500; }
  .rules-section { scroll-margin-top: calc(var(--header-h) + 76px); }
  .clause { scroll-margin-top: calc(var(--header-h) + 86px); }
}
@media (max-width: 600px) { .rules-toc { columns: 1; } }

/* =====================================================================
   17. 404 PAGE
   ===================================================================== */
.error-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; padding: 2rem; background: var(--gradient-hero); }
.error-card { max-width: 540px; }
.error-page img { width: 96px; height: auto; margin-bottom: 1.25rem; filter: drop-shadow(0 10px 28px rgba(176, 33, 76, .55)); }
.error-page h1 { font-size: clamp(4rem, 3rem + 5vw, 6rem); margin: 0; letter-spacing: -.04em; background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.error-page h2 { font-size: var(--fs-xl); }
.error-page p { color: var(--muted); margin-bottom: 1.75rem; }
.tagline { font-style: italic !important; color: var(--faint); }

/* =====================================================================
   18. UTILITIES (replace former inline style="" attributes — !important on
   purpose so they keep the precedence an inline style had)
   ===================================================================== */
.text-center { text-align: center; }
.text-primary { color: var(--accent-2); }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }
.u-m-0 { margin: 0 !important; }
.u-mt-0 { margin-top: 0 !important; }
.u-mt-100 { margin-top: 1rem !important; }
.u-mt-150 { margin-top: 1.5rem !important; }
.u-mt-200 { margin-top: 2rem !important; }
.u-mt-250 { margin-top: 2.5rem !important; }
.u-mb-050 { margin-bottom: .5rem !important; }
.u-mb-075 { margin-bottom: .75rem !important; }
.u-mb-100 { margin-bottom: 1rem !important; }
.u-mb-150 { margin-bottom: 1.5rem !important; }
.u-mb-200 { margin-bottom: 2rem !important; }
.u-mb-300 { margin-bottom: 3rem !important; }
.u-my-100 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.u-ml-075 { margin-left: .75rem !important; }
.u-ml-150 { margin-left: 1.5rem !important; }
.u-mr-050 { margin-right: .5rem !important; }
.u-text-center { text-align: center !important; }
.u-text-white { color: var(--text) !important; }
.u-text-accent { color: var(--accent-text) !important; }
.u-text-primary { color: var(--accent-2) !important; }
.u-fw-500 { font-weight: 500 !important; }
.u-no-underline { text-decoration: none !important; }
.u-fs-230 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.3rem) !important; }
.u-fs-250 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.5rem) !important; }
.u-w-100 { width: 100% !important; }
.u-maxw-160 { max-width: 160px !important; }
.u-wrap { flex-wrap: wrap !important; }
.u-gap-100 { gap: 1rem !important; }

/* =====================================================================
   RESPONSIVE (phones)
   ===================================================================== */
@media (max-width: 768px) {
  .hero { min-height: 0; padding: calc(var(--header-h) + 36px) 16px 84px; }
  .hero-logo { max-width: 300px; margin-bottom: .75rem; }
  .hero-subtitle { font-size: var(--fs-base); margin-bottom: 1.1rem; }
  .hero.page-hero { padding: calc(var(--header-h) + 28px) 16px 28px; }
  .stats-section { margin-top: -52px; padding-bottom: 1rem; }
  .stats-section .grid-4 { grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .stats-section .card { padding: .8rem .9rem; }
  .stat-number { font-size: 1.65rem; }
  .section { padding: 2.25rem 0; }
  .card { padding: 1.2rem; }
  .news-item { padding: 1.2rem; }
  .news-title { font-size: 1.2rem; }
  .portal-bar h1, .admin-bar h1 { font-size: 1rem; }
  /* Phones: the app bar scrolls away so it never covers the score boxes */
  .portal-bar, .admin-bar { position: relative; padding: .6rem 0; }
  .portal-bar .container, .admin-bar .container { gap: .5rem; }
  .bar-actions, .admin-bar .inline { justify-content: flex-start !important; }
  .portal-bar .who, .admin-bar .who { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: .8rem; }
  .portal-bar .who::before, .admin-bar .who::before { display: none; }
}
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  .hero-logo { max-width: 250px; }
  .hero .btn { min-height: 42px; padding: .5rem 1rem; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .news-footer { flex-direction: column; align-items: flex-start; }
  .rules-jump { margin: 0 -16px 1rem; padding: .6rem 16px; }
}

/* =====================================================================
   19. PRINT — plain black on white (used for the rules)
   ===================================================================== */
@media print {
  header, footer, .rules-nav, .rules-jump, .back-to-top, .back-to-toc, .skip-to-content, .notification { display: none !important; }
  *, *::before, *::after { color: #000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; -webkit-text-fill-color: #000 !important; }
  body { background: #fff !important; font-size: 11pt; }
  .hero, .hero.page-hero { padding: 0 0 1rem; min-height: 0; border: 0; }
  .hero::before, .section > .container > h2.text-center::after, .rules-section h2::after, .key-facts .kf::after { content: none !important; }
  .rules-layout { display: block; margin-top: 1rem; }
  .section { padding: 0; }
  .card, .key-facts .kf, .rules-callout, .rules-table, :where(.rules-table) :where(th, td) { border-color: #999 !important; }
  .rules-section { break-inside: auto; }
  .rules-section h2 { break-after: avoid; border-color: #999; }
  .clause { break-inside: avoid; }
  a { text-decoration: none; }
}

/* =====================================================================
   20. LIGHT / DARK SWITCH (theme.js) — round button with a sun or moon
   ===================================================================== */
.theme-toggle {
  display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; margin-left: .5rem;
  border-radius: 50%; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--muted);
  transition: color .15s, border-color .15s;
}
.theme-toggle:hover { color: var(--accent-text); border-color: var(--line-strong); }
.theme-toggle::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  /* sun: shown in dark mode (click for light) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.5'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E") center / contain no-repeat;
}
:root[data-theme="light"] .theme-toggle::before {
  /* moon: shown in light mode (click for dark) */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 14.5A8.5 8.5 0 0 1 9.5 3.5a8.5 8.5 0 1 0 11 11z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 14.5A8.5 8.5 0 0 1 9.5 3.5a8.5 8.5 0 1 0 11 11z'/%3E%3C/svg%3E");
}
.portal-bar .theme-toggle, .admin-bar .theme-toggle { width: 36px; height: 36px; margin: 0; background: transparent; }
@media (max-width: 768px) {
  .nav-container > .theme-toggle { margin-left: auto; margin-right: .5rem; }
}
/* Smooth colour change when switching (not on first paint) */
html.theme-anim, html.theme-anim * { transition: background-color .25s, color .25s, border-color .25s !important; }

/* Light mode: the dark brand bands keep light text */
:root[data-theme="light"] :is(.hero, .section-dark, footer, .error-page) { color: var(--text); }

/* Northerns: "show past fixtures" switch */
.fixtures-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.25rem; margin-bottom: 1.5rem; }
.fixtures-filters .league-filter { margin: 0 !important; }
.check-toggle { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--muted); }
.check-toggle:hover { color: var(--text); }
.fixtures-count { text-align: center; color: var(--faint); font-size: var(--fs-sm); margin-top: .75rem; }
#fixturesTable tr.is-past td { color: var(--muted); }
#fixturesTable tr.is-past td:last-child { color: var(--text); font-weight: 600; }

/* =====================================================================
   21. SCORE KEEPER (/scorer/) — phone-first live scoring for league nights
   ===================================================================== */
.page-scorer {
  --sk-a: #D4AF37;  --sk-a-glow: rgba(212, 175, 55, .28);
  --sk-b: #E35D84;  --sk-b-glow: rgba(227, 93, 132, .26);
  --sk-bar-h: 56px;
  min-height: 100vh; min-height: 100dvh; overscroll-behavior: none;
}
:root[data-theme="light"] .page-scorer { --sk-a: #B08D1E; --sk-a-glow: rgba(212, 175, 55, .3); --sk-b: #A3194A; --sk-b-glow: rgba(163, 25, 74, .2); }
.page-scorer[data-screen="live"] { overflow: hidden; }

/* Icons (CSS masks, take the text colour) */
.sk-ic { display: inline-block; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; }
.sk-ic-voice  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9v6h4l5 4V5L8 9H4z'/%3E%3Cpath d='M16 9a4 4 0 0 1 0 6M18.5 6.5a8 8 0 0 1 0 11'/%3E%3C/svg%3E"); }
.sk-ic-more   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 5h.01M12 12h.01M12 19h.01'/%3E%3C/svg%3E"); }
.sk-ic-swap   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4v16M4 17l3 3 3-3M17 20V4M14 7l3-3 3 3'/%3E%3C/svg%3E"); }
.sk-ic-full   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9V4h5M20 9V4h-5M4 15v5h5M20 15v5h-5'/%3E%3C/svg%3E"); }
.sk-ic-list   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E"); }
.sk-ic-stop   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3C/svg%3E"); }
.sk-ic-exit   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h4v16h-4M10 8l-4 4 4 4M6 12h10'/%3E%3C/svg%3E"); }
.sk-ic-spin   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 12a8 8 0 1 1-2.3-5.7M20 4v5h-5'/%3E%3C/svg%3E"); }
.sk-ic-undo   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h10.5a5.5 5.5 0 0 1 0 11H11'/%3E%3C/svg%3E"); }
.sk-ic-let    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3M18 3v4h-4M6 21v-4h4'/%3E%3C/svg%3E"); }
.sk-ic-stroke { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); }
.sk-ic-nolet  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.sk-ic-share  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V3M8 7l4-4 4 4M5 12v7h14v-7'/%3E%3C/svg%3E"); }

/* App bar */
.sk-bar {
  position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: .5rem;
  height: calc(var(--sk-bar-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) max(12px, env(safe-area-inset-right)) 0 max(12px, env(safe-area-inset-left));
  background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-soft);
}
.sk-brand { display: flex; align-items: center; gap: .55rem; color: var(--text); font-weight: 700; font-size: .95rem; white-space: nowrap; }
.sk-brand:hover { color: var(--text); }
.sk-bar-live { flex: 1; display: flex; flex-direction: column; align-items: center; line-height: 1.15; min-width: 0; }
.sk-clock { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .95rem; }
.sk-gameno { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); white-space: nowrap; }
.page-scorer[data-screen="setup"] .sk-bar-live { visibility: hidden; }
.page-scorer:not([data-screen="setup"]) .sk-brand span { display: none; }
.sk-bar-actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.sk-bar .theme-toggle { width: 38px; height: 38px; margin: 0; }
.sk-icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--muted); }
.sk-icon-btn:hover { color: var(--text); border-color: var(--line-strong); }
.sk-icon-btn[aria-pressed="true"] { color: var(--accent-ink); background: var(--grad-accent); border-color: var(--accent); }
.sk-menu {
  position: absolute; right: 10px; top: calc(100% + 6px); min-width: 240px; padding: 6px; z-index: 60;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-lg);
}
.sk-menu button { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: 44px; padding: .55rem .7rem; border: 0; border-radius: 10px; background: none; color: var(--text); font-weight: 600; font-size: .9rem; text-align: left; cursor: pointer; }
.sk-menu button .sk-ic { color: var(--muted); }
.sk-menu button:hover { background: var(--tint-2); }
.sk-menu button.danger, .sk-menu button.danger .sk-ic { color: var(--bad-text); }

.sk-eyebrow { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-text); margin-bottom: .35rem; }

/* ---- Setup */
.sk-setup-inner { width: min(560px, 100%); margin: 0 auto; padding: 1.25rem 16px calc(2rem + env(safe-area-inset-bottom)); }
.sk-hero { text-align: center; margin: .75rem 0 1.25rem; }
.sk-hero h1 { font-size: clamp(2rem, 1.5rem + 3vw, 2.6rem); margin-bottom: .4rem; }
.sk-hero .muted { max-width: 30rem; margin: 0 auto; font-size: var(--fs-sm); }
.sk-resume { display: flex; align-items: center; justify-content: space-between; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: 1rem; padding: 1rem 1.1rem; border-color: var(--gold-line); }
.sk-resume[hidden] { display: none; }
.sk-resume-text { margin: 0; font-weight: 600; }
.sk-form { padding: 1.25rem; display: grid; gap: 1.1rem; }
.sk-players { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: .6rem; }
.sk-player-field label { display: flex; align-items: center; gap: .45rem; font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .4rem; }
.sk-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.sk-pa .sk-dot { background: var(--sk-a); box-shadow: 0 0 0 3px var(--sk-a-glow); }
.sk-pb .sk-dot { background: var(--sk-b); box-shadow: 0 0 0 3px var(--sk-b-glow); }
.sk-pa .form-control:focus { border-color: var(--sk-a); }
.sk-pb .form-control:focus { border-color: var(--sk-b); box-shadow: 0 0 0 3px var(--sk-b-glow); }
.sk-vs { height: var(--control-h); display: grid; place-items: center; font-size: .75rem; font-weight: 800; color: var(--faint); text-transform: uppercase; }
@media (max-width: 420px) {
  .sk-players { grid-template-columns: 1fr; }
  .sk-vs { height: auto; margin: -.3rem 0 -.5rem; }
}
.sk-opt { border: 0; display: grid; gap: .6rem; min-width: 0; }
.sk-opt legend { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: .5rem; padding: 0; }
@media (min-width: 480px) { .sk-form > .sk-opt:first-of-type { grid-template-columns: 1fr 1fr; } }
.sk-seg { display: flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); min-width: 0; }
.sk-seg label { flex: 1; position: relative; cursor: pointer; min-width: 0; }
.sk-seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sk-seg span { display: grid; place-items: center; min-height: 40px; padding: 0 .6rem; border-radius: 9px; font-size: .85rem; font-weight: 600; color: var(--muted); text-align: center; transition: background .15s, color .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk-seg label:hover span { color: var(--text); }
.sk-seg input:checked + span { background: var(--grad-accent); color: var(--accent-ink); box-shadow: 0 4px 12px rgba(212, 175, 55, .22); }
.sk-seg input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 1px; }
.sk-serve-pick { display: flex; gap: .5rem; }
.sk-seg-wide { flex: 1; }
.sk-spin { flex: none; min-height: 48px; }
.sk-spin.is-spinning .sk-ic { animation: spin .3s linear infinite; }
.sk-spin-result { margin: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-text); }
.sk-spin-result:empty { display: none; }
.sk-switch { display: flex; align-items: center; gap: .75rem; min-height: 44px; cursor: pointer; font-size: .9rem; font-weight: 500; position: relative; }
.sk-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sk-sw { position: relative; flex: none; width: 44px; height: 26px; border-radius: 26px; background: var(--surface-3); border: 1px solid var(--line-strong); transition: background .15s; }
.sk-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .18s var(--ease), background .15s; }
.sk-switch input:checked + .sk-sw { background: var(--gold-bg); border-color: var(--accent); }
.sk-switch input:checked + .sk-sw::after { transform: translateX(18px); background: var(--accent); }
.sk-switch input:focus-visible + .sk-sw { outline: 2px solid var(--focus); outline-offset: 2px; }
.sk-interval { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: .9rem; font-weight: 500; }
.sk-interval .sk-seg { width: 11rem; }
.sk-start { width: 100%; min-height: 56px; font-size: 1.05rem; border-radius: 14px; }
.sk-foot { text-align: center; font-size: var(--fs-xs); margin-top: 1rem; }

/* ---- Live scoring */
.sk-live {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--sk-bar-h) - env(safe-area-inset-top)); height: calc(100dvh - var(--sk-bar-h) - env(safe-area-inset-top));
  padding: 10px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  gap: 8px;
}
.sk-live[hidden], .sk-break[hidden], .sk-done[hidden], .sk-setup[hidden] { display: none; }
.sk-court { flex: 1; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); gap: 8px; }
.sk-court #skPanel0 { order: 1; } .sk-court #skPanel1 { order: 3; }
.sk-court.is-swapped #skPanel0 { order: 3; }
.sk-court.is-swapped #skPanel1 { order: 1; }
.sk-court .sk-call-strip { order: 2; }
.sk-panel {
  --c: var(--sk-a); --g: var(--sk-a-glow);
  position: relative; overflow: hidden; min-height: 0; width: 100%; font: inherit;
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center; align-items: center;
  padding: 14px 16px 12px; border-radius: 24px; cursor: pointer; color: var(--text);
  border: 1px solid var(--line-soft);
  background: radial-gradient(120% 90% at 50% 0%, var(--g), transparent 60%), var(--grad-card);
  box-shadow: var(--shadow);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  transition: border-color .2s, box-shadow .2s, transform .08s;
}
.sk-panel[data-p="1"] { --c: var(--sk-b); --g: var(--sk-b-glow); }
.sk-panel:active { transform: scale(.985); }
.sk-panel.is-serving { border-color: var(--c); box-shadow: var(--shadow), inset 0 0 0 1px var(--c), 0 0 28px -6px var(--g); }
.sk-panel:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.sk-panel-top { justify-self: stretch; display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-width: 0; }
.sk-name { font-size: clamp(1rem, .85rem + 1vw, 1.35rem); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-name::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: .5rem; border-radius: 50%; background: var(--c); vertical-align: middle; transform: translateY(-2px); box-shadow: 0 0 0 3px var(--g); }
.sk-games { display: flex; gap: 6px; flex: none; }
.sk-games i { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-strong); }
.sk-games i.on { background: var(--c); border-color: var(--c); box-shadow: 0 0 10px var(--g); }
.sk-score { font-size: clamp(5.5rem, 26vmin, 15rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; text-shadow: 0 8px 40px var(--g); }
.sk-score.bump { animation: sk-bump .32s var(--ease); }
@keyframes sk-bump { 0% { transform: scale(1); } 35% { transform: scale(1.14); color: var(--c); } 100% { transform: scale(1); } }
.sk-serve { display: inline-flex; align-items: center; gap: .5rem; padding: .3rem .8rem; border-radius: var(--radius-pill); background: var(--tint-2); font-size: .78rem; font-weight: 700; color: var(--text); }
.sk-serve[hidden] { display: inline-flex !important; visibility: hidden; }
.sk-serve i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); animation: sk-pulse 1.6s infinite; }
@keyframes sk-pulse { 0% { box-shadow: 0 0 0 0 var(--g); } 70% { box-shadow: 0 0 0 9px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.sk-tap-hint { position: absolute; left: 0; right: 0; bottom: 46px; text-align: center; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); opacity: 0; transition: opacity .3s; pointer-events: none; }
.sk-court.is-fresh .sk-tap-hint { opacity: 1; }
.sk-ripple { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--c); opacity: .35; pointer-events: none; animation: sk-ripple .55s ease-out forwards; }
@keyframes sk-ripple { to { transform: scale(28); opacity: 0; } }

.sk-call-strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; padding: 0 2px; }
.sk-call { margin: 0; justify-self: center; text-align: center; padding: .45rem 1rem; border-radius: var(--radius-pill); font-size: clamp(.95rem, .85rem + .6vw, 1.2rem); font-weight: 800; letter-spacing: .01em; white-space: nowrap; background: var(--surface); border: 1px solid var(--line); }
.sk-call.is-ball { background: var(--grad-accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 6px 20px rgba(212, 175, 55, .3); }
.sk-call.is-match { background: linear-gradient(90deg, var(--brand-2), #E35D84); color: #fff; border-color: #E35D84; animation: sk-glow 1.4s ease-in-out infinite; }
@keyframes sk-glow { 50% { box-shadow: 0 0 26px rgba(227, 93, 132, .55); } }
.sk-rallies { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); min-width: 64px; text-align: right; }
.sk-box-btn { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.sk-box-btn span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 7px; font-size: .8rem; font-weight: 800; color: var(--faint); }
.sk-box-btn[data-box="L"] .sk-box-l, .sk-box-btn[data-box="R"] .sk-box-r { background: var(--grad-accent); color: var(--accent-ink); }
.sk-box-btn:disabled { cursor: default; opacity: .7; }
.sk-box-btn:not(:disabled) { border-color: var(--gold-line); box-shadow: 0 0 0 3px var(--gold-bg); }

.sk-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sk-act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 58px; padding: .4rem; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 700; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.sk-act .sk-ic { width: 22px; height: 22px; color: var(--muted); }
.sk-act:active { transform: scale(.97); }
.sk-act:hover { border-color: var(--line-strong); }
.sk-undo { color: var(--accent-text); border-color: var(--gold-line); background: var(--gold-bg); }
.sk-undo .sk-ic { color: var(--accent-text); }
.sk-act:disabled { opacity: .45; cursor: default; transform: none; }
.sk-last { margin: 0; min-height: 1.1em; text-align: center; font-size: .75rem; color: var(--faint); transition: color .2s; }
.sk-last.is-flash { color: var(--accent-text); font-weight: 700; }

/* Landscape phones / tablets: players side by side */
@media (orientation: landscape) and (min-width: 600px) {
  .sk-court { grid-template-rows: none; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .sk-call-strip { grid-template-columns: 1fr; justify-items: center; align-content: center; gap: .75rem; width: 150px; }
  .sk-call { white-space: normal; max-width: 150px; }
  .sk-rallies { text-align: center; }
  .sk-score { font-size: clamp(5rem, 34vmin, 16rem); }
}
@media (orientation: landscape) and (max-height: 500px) {
  .page-scorer { --sk-bar-h: 46px; }
  .sk-act { min-height: 46px; flex-direction: row; }
  .sk-panel { padding: 8px 12px; }
}

/* ---- Between games */
.sk-break-inner, .sk-done-inner { width: min(560px, 100%); margin: 0 auto; padding: 1.5rem 16px calc(2rem + env(safe-area-inset-bottom)); text-align: center; }
.sk-break-title { font-size: clamp(1.6rem, 1.2rem + 2.5vw, 2.3rem); margin-bottom: .35rem; }
.sk-break-sub { color: var(--muted); margin-bottom: 1.25rem; }
.sk-ring { position: relative; width: 210px; height: 210px; margin: 0 auto 1.25rem; }
.sk-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sk-ring circle { fill: none; stroke-width: 8; }
.sk-ring-bg { stroke: var(--tint-2); }
.sk-ring-fg { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 0; transition: stroke-dashoffset .5s linear, stroke .3s; filter: drop-shadow(0 0 6px rgba(212, 175, 55, .45)); }
.sk-ring.is-late .sk-ring-fg { stroke: var(--sk-b); filter: drop-shadow(0 0 6px var(--sk-b-glow)); }
.sk-ring-lbl { position: absolute; inset: 0; display: grid; place-content: center; }
.sk-ring-lbl b { font-size: 3rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.sk-ring-lbl span { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--faint); margin-top: .3rem; }
.sk-ring.is-time .sk-ring-lbl b { color: var(--sk-b); animation: sk-bump .8s ease-in-out infinite; }
.sk-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.5rem; }
.sk-chip { display: inline-flex; align-items: baseline; gap: .4rem; padding: .4rem .85rem; border-radius: 12px; font-weight: 800; font-variant-numeric: tabular-nums; background: var(--surface); border: 1px solid var(--line); }
.sk-chip small { font-size: .65rem; font-weight: 700; color: var(--faint); letter-spacing: .06em; }
.sk-chip.won-a { border-color: var(--sk-a); box-shadow: inset 0 -3px 0 var(--sk-a); }
.sk-chip.won-b { border-color: var(--sk-b); box-shadow: inset 0 -3px 0 var(--sk-b); }
.sk-chips-lg .sk-chip { font-size: 1.15rem; padding: .55rem 1rem; }
.sk-break-actions, .sk-done-actions { display: grid; gap: .6rem; }
.sk-next { min-height: 56px; font-size: 1.05rem; border-radius: 14px; }

/* ---- Match summary */
.sk-winner { position: relative; padding: 1rem 0 .5rem; }
.sk-trophy { width: 84px; height: 84px; margin: 0 auto .9rem; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(212, 175, 55, .35), transparent 70%), var(--surface); border: 1px solid var(--gold-line); box-shadow: 0 0 50px rgba(212, 175, 55, .3); animation: rise .6s var(--ease) both; }
.sk-trophy::after {
  content: ""; width: 42px; height: 42px; background: var(--grad-accent);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0V4zM8 6H5a3 3 0 0 0 3 4M16 6h3a3 3 0 0 1-3 4M12 13v4M8 20h8M10 17h4v3h-4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4h8v5a4 4 0 0 1-8 0V4zM8 6H5a3 3 0 0 0 3 4M16 6h3a3 3 0 0 1-3 4M12 13v4M8 20h8M10 17h4v3h-4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sk-winner h2 { font-size: clamp(1.7rem, 1.2rem + 3vw, 2.5rem); margin-bottom: .3rem; }
.sk-winner h2 span { display: block; font-size: .6em; color: var(--sk-a); margin-top: .2rem; }
.sk-done.win-b .sk-winner h2 span { color: var(--sk-b); }
.sk-done-sub { color: var(--muted); }
.sk-sheet-box { display: grid; gap: .75rem; text-align: left; margin-bottom: 1rem; border-color: var(--gold-line); }
.sk-sheet-box[hidden] { display: none; }
.sk-sheet-box p { margin: 0; }
.sk-stats, .sk-momentum { text-align: left; margin-bottom: 1rem; }
.sk-stats h3, .sk-momentum h3 { font-size: 1rem; margin-bottom: .75rem; }
.sk-statgrid { display: grid; gap: .55rem; }
.sk-stat { display: grid; grid-template-columns: 7.5rem 1fr; align-items: center; gap: .75rem; font-size: .85rem; }
.sk-stat dt { color: var(--muted); font-weight: 500; }
.sk-stat dd { display: grid; grid-template-columns: 2.2rem 1fr 2.2rem; align-items: center; gap: .5rem; font-variant-numeric: tabular-nums; }
.sk-stat dd b.a { color: var(--sk-a); text-align: right; }
.sk-stat dd b.b { color: var(--sk-b); }
.sk-stat-head dd { grid-template-columns: minmax(0, 1fr) 1fr minmax(0, 1fr); }
.sk-stat-head dd b { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-bar2 { height: 8px; border-radius: 8px; overflow: hidden; background: var(--sk-b); }
.sk-bar2 i { display: block; height: 100%; background: var(--sk-a); border-right: 2px solid var(--surface); }
.sk-stat-plain dd { display: block; font-weight: 600; }
.sk-momentum h3 { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; }
.sk-momentum h3 .muted { font-size: .72rem; font-weight: 500; }
.sk-momentum h3 i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .3rem; }
.sk-momentum h3 i.a { background: var(--sk-a); }
.sk-momentum h3 i.b { background: var(--sk-b); }
.sk-mom-list { display: grid; gap: .75rem; }
.sk-mom { margin: 0; }
.sk-mom figcaption { display: flex; justify-content: space-between; font-size: .78rem; color: var(--muted); margin-bottom: .25rem; }
.sk-mom figcaption span { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sk-mom svg { display: block; width: 100%; height: 64px; border-radius: 10px; background: var(--tint-1); }
.sk-mom-zero { stroke: var(--line-strong); stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.sk-done-actions { grid-template-columns: 1fr 1fr; }
.sk-done-actions .btn { min-height: 50px; }
#skShareBtn { grid-column: 1 / -1; }

/* ---- Dialogs */
.sk-modal[hidden] { display: none; }
.sk-modal .modal-box { text-align: center; }
.sk-stroke-pick { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: 1rem 0; }
.sk-stroke-pick .btn { min-height: 64px; font-size: 1rem; font-weight: 700; border-width: 2px; }
.sk-stroke-a { border-color: var(--sk-a); }
.sk-stroke-b { border-color: var(--sk-b); }
.sk-modal .sk-log-box { text-align: left; }
.sk-log { list-style: none; padding: 0; margin: .5rem 0 1rem; max-height: 55vh; overflow-y: auto; }
.sk-log li { display: flex; gap: .75rem; padding: .45rem 0; border-top: 1px solid var(--line-soft); font-size: .85rem; margin: 0; }
.sk-log time { color: var(--faint); font-variant-numeric: tabular-nums; flex: none; }

/* Entry points to the score keeper elsewhere on the site */
.nav-mobile-only { display: none; }
@media (max-width: 768px) { .nav-menu .nav-mobile-only { display: block; } }
.sk-launch { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .15rem .6rem; border-radius: var(--radius-pill); background: var(--gold-bg); color: var(--accent-text); white-space: nowrap; margin-left: .5rem; vertical-align: middle; }
.sk-launch:hover { color: var(--accent-2); }
@media (max-width: 700px) { .result-table td.player-cell .sk-launch { display: inline-flex; margin: .2rem 0 0 .5rem; } }
.sk-filled { animation: sk-filled 2.4s ease-out; }
@keyframes sk-filled { 0%, 40% { background: var(--gold-bg); } 100% { background: transparent; } }
.fixtures-cta.btn-row { justify-content: center; }