@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --cerulean:#0B6E8A;
  --cerulean-dark:#084F63;
  --peach:#F26B3D;
  --peach-dark:#D9552A;
  --gold:#E9D96B;
  --willow:#8BD35C;
  --willow-dark:#5FA334;
  --sand:#E8DCC0;
  --ink:#14231F;
  --ink-soft:#3E4A44;
  --white:#FFFFFF;
  --line:rgba(20,35,31,0.12);
  --radius:14px;
  --shadow:0 4px 18px rgba(20,35,31,0.08);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  line-height:1.5;
}

h1,h2,h3,.display{
  font-family:'Fraunces',serif;
  font-weight:600;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0 0 0.3em;
}

.mono{font-family:'IBM Plex Mono',monospace;}

a{color:var(--cerulean-dark);}

/* ---------- layout shell ---------- */
.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.topbar .brand{
  display:flex; align-items:center; gap:10px;
  font-family:'Fraunces',serif; font-weight:700; font-size:1.25rem;
}
.topbar .brand .dot{width:10px;height:10px;border-radius:50%;background:var(--peach);}
.ecolaunch-btn{
  width:38px; height:38px; border-radius:50%; border:none; cursor:pointer; padding:0;
  background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.15); transition:transform 0.15s ease;
}
.ecolaunch-btn:hover{ transform:scale(1.08); }
.topbar nav{display:flex; gap:10px; align-items:center;}
/* Account tools: inline on desktop, a slide-in menu on phones (☰). */
.account-menu{display:flex; align-items:center; gap:10px;}
.topbar .account-menu-btn, .account-menu-backdrop, .account-menu-title{display:none;}
.account-menu-dot{position:absolute; top:-2px; right:-2px; width:9px; height:9px; border-radius:50%; background:#B23A2E;}
@media (max-width:720px){
  .topbar{padding:12px 16px;}
  .topbar nav{gap:8px;}
  .account-hi{display:none;}
  .topbar .account-menu-btn{display:inline-flex; position:relative; font-size:1.15rem; padding:6px 12px;}
  .account-menu{position:fixed; top:var(--vv-top, 0); right:0; height:var(--vv-height, 100vh); width:min(78vw, 280px);
    flex-direction:column; align-items:stretch; gap:6px; padding:20px 16px; overflow-y:auto;
    background:var(--white); box-shadow:-4px 0 18px rgba(0,0,0,0.25); z-index:1001;
    transform:translateX(105%); transition:transform 0.25s ease;}
  .account-menu .btn{width:100%; justify-content:flex-start; text-align:left; padding:12px 14px;}
  .account-menu-title{display:block; font-family:'Fraunces',serif; font-weight:700; font-size:1.1rem; margin-bottom:8px;}
  body.account-menu-open .account-menu{transform:none;}
  body.account-menu-open .account-menu-backdrop{display:block; position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:1000;}
}

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

.hero{
  padding:48px 24px 28px;
  text-align:left;
}
.hero h1{font-size:clamp(1.8rem,4vw,2.6rem);}
.hero p{color:var(--ink-soft); max-width:560px;}

/* ---------- buttons & inputs ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:0.92rem;
  padding:10px 18px; border-radius:10px; border:1px solid transparent;
  cursor:pointer; transition:transform .12s ease, box-shadow .12s ease;
  text-decoration:none;
}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--peach); color:var(--white);}
.btn-primary:hover{background:var(--peach-dark);}
.btn-secondary{background:var(--white); color:var(--cerulean-dark); border-color:var(--line);}
.btn-secondary:hover{border-color:var(--cerulean);}
.btn-ghost{background:transparent; color:var(--ink-soft); border-color:transparent;}
.btn-ghost:hover{color:var(--ink);}
.btn-danger{background:#fff; color:#B23A2E; border-color:#E9C9C2;}
.btn:disabled{opacity:0.5; cursor:not-allowed;}
.btn-block{width:100%;}
.btn-sm{padding:6px 12px; font-size:0.82rem; border-radius:8px;}

input,select,textarea{
  width:100%;
  font-family:'IBM Plex Sans',sans-serif;
  font-size:0.95rem;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--white);
  color:var(--ink);
}
input:focus,select:focus,textarea:focus{
  outline:2px solid var(--cerulean);
  outline-offset:1px;
}
label{font-size:0.82rem; font-weight:600; color:var(--ink-soft); display:block; margin-bottom:4px;}
.field{margin-bottom:14px;}
.field-row{display:flex; gap:12px;}
.field-row > .field{flex:1;}
.pw-wrap{position:relative;}
.pw-wrap input{padding-right:56px;}
.pw-toggle{
  position:absolute; top:0; right:0; bottom:0;
  padding:0 12px; border:none; background:transparent;
  font-size:0.78rem; font-weight:600; color:var(--cerulean); cursor:pointer;
}
.hint{font-size:0.78rem; color:var(--ink-soft); margin-top:4px;}
.error-text{font-size:0.82rem; color:#B23A2E; margin-top:6px;}

/* ---------- filter chips ---------- */
.filters{
  display:flex; flex-wrap:wrap; gap:8px;
  padding:0 24px 20px;
}
.chip{
  padding:7px 14px; border-radius:999px; border:1px solid var(--line);
  background:var(--white); font-size:0.85rem; font-weight:600; color:var(--ink-soft);
  cursor:pointer;
}
.chip.active{background:var(--cerulean); border-color:var(--cerulean); color:var(--white);}

/* ---------- game type sections ---------- */
.type-section{padding:8px 24px 32px;}
.type-section h2{font-size:1.15rem; display:flex; align-items:center; gap:10px;}
.type-section-heading{
  font-family:'Fraunces',serif; font-size:1.1rem; font-weight:700;
  color:var(--ink); margin:0;
}
.type-section h2::before{
  content:""; display:inline-block; width:22px; height:3px; background:var(--peach); border-radius:2px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:16px;
  margin-top:14px;
}

/* ---------- game card ---------- */
.card{
  background:var(--white);
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:18px;
  cursor:pointer;
  position:relative;
  transition:transform .14s ease, box-shadow .14s ease;
  display:flex; flex-direction:column; gap:10px;
}
.card:hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,35,31,0.12);}

/* A plain announcement card (signup_display_mode: 'capacity_only') —
   nothing to open yet, so it shouldn't invite a click. */
.card.is-inert{cursor:default;}
.card.is-inert:hover{transform:none; box-shadow:var(--shadow);}
.card:focus-visible{outline:2px solid var(--cerulean); outline-offset:2px;}

/* Sunday games get a steady (non-animated) dark blue + gold border,
   distinct from the animated orange/gold glow used for featured
   games — placed before .is-featured below so that on the rare
   occasion a game is both featured AND on a Sunday, the featured
   glow still wins visually rather than the two fighting each other. */
.card.is-sunday-game{
  border: 2px solid var(--cerulean-dark);
  box-shadow: 0 0 0 2px var(--gold), var(--shadow);
}

/* CPD games (CPD Drills, or any game marked "Counts as CPD") get the
   light purple of the CPD badge across the whole card. */
.card.is-cpd,
.mini-featured-card.is-cpd{
  background:#EFE5FB;
  border-color:#CDB4EE;
}

/* Featured/FOMO card — used sparingly (admin-toggled per game) so it
   actually stands out against the normal card grid. */
@keyframes featured-glow{
  0%,100%{box-shadow:0 0 0 4px var(--peach), 0 12px 28px rgba(242,107,61,0.4);}
  50%{box-shadow:0 0 0 4px var(--gold), 0 18px 36px rgba(233,217,107,0.55);}
}
.card.is-featured{
  animation:featured-glow 1.6s ease-in-out infinite;
  border-color:transparent;
}
.card.is-featured:hover{transform:translateY(-3px) scale(1.01);}

.featured-flames{
  position:absolute; top:14px; right:16px;
  font-size: 1.3rem;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 0;
}

/* A steady row of flames marking a featured game — no motion, just a
   clear visual flag. (Earlier versions of this bounced/swept across
   the card — a whiffle ball, then a siren beacon — if this ever needs
   reverting to something animated again.) */
.featured-flames{
  font-size: 1.3rem;
  letter-spacing: 2px;
  line-height: 1;
  margin-bottom: 4px;
}
.featured-ribbon{
  align-self:flex-start;
  background:linear-gradient(90deg, var(--peach), var(--peach-dark));
  color:#fff; font-weight:800; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.03em;
  padding:4px 12px; border-radius:999px;
  margin-bottom:-2px;
}
.countdown{
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:0.82rem;
  color:var(--peach-dark); margin-top:6px;
}

/* Row pairing the main game list with the featured-games rail. .home-row
   centers the pair as a unit — #gamesRoot keeps its own 1080px cap but
   drops its own auto-centering (home-row's gap+justify-content does that
   job now) and is allowed to flex narrower on tighter widths so the rail
   always gets its full column rather than being squeezed out. */
.home-row{display:flex; align-items:flex-start; justify-content:center; gap:24px;}
.home-row #gamesRoot.container{margin:0; flex:1; min-width:0;}

/* Persistent right-side rail of featured games (see renderFeaturedSidebar()
   in app.js). A real column next to the game list, not just floated in
   whatever page margin happens to be free — sticky (rather than fixed)
   so it stays in view while the list scrolls but still respects the
   footer at the bottom of the page instead of floating over it.
   Below the width where a second column no longer fits without cramping
   the game list, it's hidden entirely and the existing featured strip
   pinned at the top of the game list takes over instead — see the
   max-width:1100px media query below. */
.featured-sidebar{
  position:sticky; top:90px; align-self:flex-start; flex-shrink:0;
  width:280px; max-height:calc(100vh - 114px); overflow-y:auto;
  display:flex; flex-direction:column; gap:10px;
}
/* 🌤️ Dar weather now (app.js weatherBoxHtml): top of the side panel, or a
   strip above the games on phones. */
.weather-now{display:flex; flex-direction:column; gap:2px; padding:10px 12px; border-radius:12px;
  background:var(--card, #fff); border:1px solid rgba(20,35,31,0.12);}
.weather-now.hidden{display:none !important;}
/* Weather on a game card, its own line under the date (app.js fillRainBadges). */
.rain-badge:not(:empty){display:flex; align-items:center; gap:8px; width:fit-content; margin:8px 0 2px; padding:5px 14px 5px 8px;
  border-radius:999px; font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:1rem; font-weight:700; letter-spacing:0;}
.rain-badge .wx-icon{font-size:1.6rem; line-height:1;}
.rain-badge[data-state="rain"]{background:#0B6E8A; color:#fff;}
.rain-badge[data-state="cloud"]{background:#DDE3E6; color:#2E3A40;}
.rain-badge[data-state="sun"]{background:#FFE9A8; color:#6B4A00;}
.rain-badge[data-state="night"]{background:#1F2A4A; color:#fff;}
.weather-now-main{font-weight:600; font-size:0.9rem; display:flex; flex-wrap:wrap; gap:4px 12px;}
.weather-now-venue{white-space:nowrap;}
.weather-now-sub{font-size:0.75rem; color:var(--ink-soft);}
.weather-now-phone{display:none; max-width:720px; margin:10px auto 0; box-sizing:border-box;}
.featured-sidebar-title{
  font-family:'Fraunces',serif; font-weight:700; font-size:0.85rem;
  text-transform:uppercase; letter-spacing:0.05em; color:var(--ink-soft);
  margin:0;
}

/* Compact pointer to a featured game, not a repeat of its full card —
   just enough to recognize it and tap through to the real one (which
   opens the same modal .card does). Deliberately small and text-light so
   a handful of these fit on screen at once without the rail needing its
   own inner scrollbar. */
.mini-featured-card{
  display:flex; align-items:stretch; overflow:hidden;
  background:var(--white); border-radius:10px;
  border:2px solid var(--peach); box-shadow:var(--shadow); cursor:pointer;
  transition:transform .12s ease, box-shadow .12s ease;
}
.mini-featured-card:hover{transform:translateY(-2px); box-shadow:0 8px 18px rgba(20,35,31,0.14);}
.mini-featured-card:focus-visible{outline:2px solid var(--cerulean); outline-offset:2px;}
/* Dar United events (in practice, nearly everything that gets featured)
   get the same steady blue halo as their full-size card — see
   .card.is-featured.is-dar-united further down. */
.mini-featured-card.is-dar-united{ border-color:var(--dar-blue); }
/* The day label as its own fixed-width strip on the card's left edge,
   rather than inline text — every card's label lands in the same spot,
   so scanning down the rail reads as one aligned column, all framed by
   the card's own halo border rather than floating loose above the text. */
.mini-featured-day{
  flex:0 0 42px; display:flex; align-items:center; justify-content:center;
  background:var(--peach); color:#fff;
  font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:0.68rem; letter-spacing:0.03em;
  text-align:center; padding:4px;
}
.mini-featured-card.is-dar-united .mini-featured-day{ background:var(--dar-navy); color:var(--dar-yellow); }
.mini-featured-body{flex:1; min-width:0; padding:9px 12px;}
.mini-featured-top{display:flex; align-items:center; justify-content:space-between; gap:6px;}
.mini-featured-date{font-family:'IBM Plex Mono',monospace; font-size:0.68rem; color:var(--cerulean-dark); font-weight:600;}
.mini-featured-flame{font-size:0.8rem;}
.mini-featured-title{font-family:'Fraunces',serif; font-weight:700; font-size:0.9rem; margin:3px 0 1px; line-height:1.25;}
.mini-featured-loc{font-size:0.74rem; color:var(--ink-soft);}

/* 📣 Special announcements: top of the side column; on phones (no side
   column) the same notes sit under the pinned homepage message. */
.special-ann{background:var(--white); border-radius:10px; border:2px solid var(--cerulean); box-shadow:var(--shadow); padding:10px 12px;}
.special-ann-title{font-family:'Fraunces',serif; font-weight:700; font-size:0.92rem; line-height:1.25;}
.special-ann-body{font-size:0.8rem; color:var(--ink); margin-top:3px; white-space:pre-wrap;}
.special-ann-phone{display:none; max-width:720px; margin:10px auto 0; padding:0 16px; flex-direction:column; gap:8px;}
@media (max-width:1100px){
  .special-ann-phone.has-notes{display:flex;}
  .weather-now-phone:not(.hidden){display:flex; width:calc(100% - 32px);}
  .featured-sidebar{display:none !important;}
  .home-row #gamesRoot.container{margin:0 auto;}
}
.card .card-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px;}
.card .card-date{font-family:'IBM Plex Mono',monospace; font-size:0.78rem; color:var(--cerulean-dark); font-weight:600;}
.today-tomorrow-tag{
  display:inline-block; background:var(--peach); color:var(--white);
  font-family:'IBM Plex Mono',monospace; font-size:0.72rem; font-weight:700;
  padding:2px 7px; border-radius:5px; letter-spacing:0.03em;
}
/* Sundays are consistently the strongest sign-up day — a distinct
   color makes them jump out at a glance while scanning the schedule. */
/* Sundays are consistently the strongest sign-up day — a distinct
   color makes them jump out at a glance while scanning the schedule. */
.today-tomorrow-tag.is-sunday{
  background:var(--cerulean-dark); color:var(--gold);
}

/* Wraps each week's group of cards in a light gray block, so the
   week groupings read as distinct visual units and a Sunday session
   (colored separately, see .is-sunday above) is easy to spot within
   whichever week block it falls in. */
.week-block{
  background:#F4F4F1; border-radius:var(--radius); padding:16px 16px 20px;
}
.week-block .type-section-heading{ margin-top:0; }
.card .card-title{font-family:'Fraunces',serif; font-weight:600; font-size:1.08rem; margin:2px 0 0;}
.card .card-loc{font-size:0.85rem; color:var(--ink-soft);}
.card .card-loc .maps-link{text-decoration:none; padding:2px 4px; margin:-2px 0 -2px -4px; border-radius:6px;}
.card .card-loc .maps-link:hover{background:var(--cream, #f4efe6);}
.gm-facts .maps-link{font-weight:700; white-space:nowrap;}
.card .card-meta{display:flex; justify-content:space-between; align-items:center; font-size:0.85rem; color:var(--ink-soft);}
.card .card-meta{flex-wrap:wrap; gap:8px;}
/* The price takes its own row when it needs it (the wallet price and its bar); the badges wrap under it, to the right. */
.card .card-meta .card-price{flex:1 1 230px; min-width:0;}
.card .card-meta .card-badges{margin-left:auto;}
.card .cost{font-weight:600; color:var(--ink);}

.avatar-stack{display:flex; align-items:center; gap:6px; margin-top:2px;}
.avatar-dots{display:flex;}
.avatar-dot{
  width:22px; height:22px; border-radius:50%;
  background:var(--sand); border:2px solid var(--white);
  display:flex; align-items:center; justify-content:center;
  margin-left:-8px; box-shadow:0 1px 2px rgba(20,35,31,0.15);
  overflow:hidden;
}
.avatar-dot img{width:100%; height:100%; object-fit:cover;}
.avatar-dot:first-child{margin-left:0;}
.avatar-dot svg{width:11px; height:11px; opacity:0.55;}
.avatar-more{
  font-family:'IBM Plex Mono',monospace; font-size:0.72rem; font-weight:600;
  color:var(--ink-soft); margin-left:6px;
}
.interested-label{font-size:0.78rem; color:var(--peach-dark); font-weight:600;}

.confirmed-grid{display:flex; flex-wrap:wrap; gap:10px; margin:10px 0;}
.confirmed-player{display:flex; flex-direction:column; align-items:center; gap:4px; width:52px;}
.confirmed-player .avatar-lg{
  width:44px; height:44px; border-radius:50%; overflow:hidden;
  background:var(--sand); display:flex; align-items:center; justify-content:center;
  border:2px solid var(--white); box-shadow:0 1px 3px rgba(20,35,31,0.15);
}
.confirmed-player .avatar-lg img{width:100%; height:100%; object-fit:cover;}
.confirmed-player .avatar-lg svg{width:20px; height:20px; opacity:0.5;}
.confirmed-player .rating-pill{font-size:0.72rem; padding:2px 7px;}

.avatar-upload-row{display:flex; align-items:center; gap:12px;}
.avatar-upload-preview{
  width:56px; height:56px; border-radius:50%; overflow:hidden; flex-shrink:0;
  background:var(--sand); display:flex; align-items:center; justify-content:center;
  border:2px solid var(--line);
}
.avatar-upload-preview img{width:100%; height:100%; object-fit:cover;}
.avatar-upload-preview svg{width:26px; height:26px; opacity:0.4;}

.badge{
  font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em;
  padding:3px 8px; border-radius:6px;
}
.badge-full{background:#F7E4DE; color:#B23A2E;}
.badge-open{background:#E4F3D9; color:var(--willow-dark);}
.badge-planned{background:#FBF3D9; color:#8A6D1D;}
.badge-closed{background:#E5E5E5; color:#5A5A5A;}

/* signature element: court-line capacity meter */
.court-meter{
  position:relative;
  height:10px;
  border-radius:999px;
  background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  overflow:hidden;
}
.court-meter .fill{
  position:absolute; inset:0 auto 0 0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--willow), var(--willow-dark));
  transition:width .3s ease;
  z-index:2;
}
.court-meter .fill-pending{
  position:absolute; inset:0 auto 0 0;
  height:100%;
  background:repeating-linear-gradient(135deg, var(--gold) 0 6px, #F0E4A8 6px 12px);
  transition:width .3s ease;
  z-index:1;
}
.court-meter.near-full .fill{background:linear-gradient(90deg, var(--gold), var(--peach));}
.court-meter.is-full .fill{background:linear-gradient(90deg, var(--peach), var(--peach-dark));}
.meter-label{
  display:flex; justify-content:space-between; align-items:baseline;
  font-family:'IBM Plex Mono',monospace; font-size:0.78rem; font-weight:600; color:var(--ink-soft);
}

/* interest meter for planned games — same bar language as court-meter,
   but a distinct color so it reads as "gauging demand" not "confirmed
   spots." Fill is capped at 100% width even when interest exceeds
   capacity; the overflow shows as text, not an overfilled bar. */
.interest-meter{
  position:relative;
  height:10px;
  border-radius:999px;
  background:repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px);
  overflow:hidden;
}
.interest-meter .fill{
  position:absolute; inset:0 auto 0 0;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--cerulean), var(--cerulean-dark));
  transition:width .3s ease;
}
.interest-meter.over-capacity .fill{background:linear-gradient(90deg, var(--gold), var(--peach-dark));}
.interest-overflow{
  font-size:0.78rem; font-weight:700; color:var(--peach-dark); margin-top:4px;
}

/* ---------- modal ---------- */
.overlay{
  position:fixed; inset:0; background:rgba(20,35,31,0.45);
  display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:100;
}
.overlay.hidden{display:none;}
.modal{
  background:var(--white); border-radius:18px; padding:28px;
  width:100%; max-width:480px; max-height:88vh; overflow-y:auto; overflow-x:auto;
  box-shadow:0 20px 60px rgba(20,35,31,0.25);
}
.modal-header{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:16px;}
.modal-close{background:none; border:none; font-size:1.4rem; line-height:1; cursor:pointer; color:var(--ink-soft);}

.rating-pills{display:flex; flex-wrap:wrap; gap:6px; margin:10px 0;}
.rating-pill{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:0.85rem;
  background:var(--sand); border:1px solid var(--line); border-radius:8px; padding:4px 10px;
}
.rating-pill-male{background:#D6EAF5; border-color:#B9DCEF; color:#0B4F66;}
.rating-pill-female{background:#F9D6E6; border-color:#F3B9D3; color:#7A1F4A;}
.rating-pill-pending{background:#FBF3D9; border-color:#E9D96B; color:#8A6D1D;}

.divider{height:1px; background:var(--line); margin:18px 0;}

.notice{
  background:#FBF3D9; border:1px solid var(--gold); border-radius:10px;
  padding:12px 14px; font-size:0.88rem; color:var(--ink-soft);
}
.notice.success{background:#E4F3D9; border-color:var(--willow);}
.notice strong{color:var(--ink);}

.wa-number{
  font-family:'IBM Plex Mono',monospace; font-weight:600; font-size:1.05rem;
  color:var(--cerulean-dark);
}

/* ---------- empty state ---------- */
.empty{
  text-align:center; padding:40px 20px; color:var(--ink-soft);
}

/* ---------- admin table ---------- */
table{width:100%; border-collapse:collapse; font-size:0.9rem;}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);}
th{font-size:0.75rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); position:sticky; top:0; background:var(--white); z-index:2; box-shadow:0 1px 0 var(--line);}
tr:hover td{background:rgba(11,110,138,0.04);}
/* Freeze panes: every admin table sits in its own scroll box (wrapped by
   admin.js), so the header row stays put while scrolling down and the
   first column — the player/game name — stays put while scrolling across.
   Frozen cells need an opaque background or the scrolled cells show through. */
.table-scroll{overflow:auto; max-height:75vh; -webkit-overflow-scrolling:touch;}
.table-scroll th:first-child, .table-scroll td:first-child,
.table-scroll table.freeze-2 th:nth-child(2), .table-scroll table.freeze-2 td:nth-child(2){position:sticky; left:0; z-index:1; background:var(--white); box-shadow:1px 0 0 var(--line);}
.table-scroll th:first-child, .table-scroll table.freeze-2 th:nth-child(2){z-index:3;}
.table-scroll tr:hover td:first-child, .table-scroll table.freeze-2 tr:hover td:nth-child(2){background:linear-gradient(rgba(11,110,138,0.04),rgba(11,110,138,0.04)), var(--white);}
.table-scroll td[colspan]:first-child{position:static; box-shadow:none;}
.table-scroll table.freeze-2 th:first-child, .table-scroll table.freeze-2 td:first-child{width:40px; min-width:40px; max-width:40px; box-sizing:border-box; padding-left:10px; padding-right:6px; box-shadow:none;}
.table-scroll table.freeze-2 th:nth-child(2), .table-scroll table.freeze-2 td:nth-child(2){left:40px; min-width:140px;}
.status-pill{padding:3px 9px; border-radius:6px; font-size:0.74rem; font-weight:700;}
.status-pending{background:#FBE4D6; color:#B5501F;}
.status-paid{background:#E4F3D9; color:var(--willow-dark);}
.status-cancelled{background:#F1E4E4; color:#8A3E36;}
.status-hold{background:#FBF3D5; color:#8A7412;}
/* Games table status dropdown — the generic select{width:100%} rule above
   lets this shrink down to a sliver in a 14-column table, clipping the
   text to a single letter. Give it enough room for its longest option
   ("Planned (not bookable)") so the full status is always readable. */
.statusSelect{width:auto; min-width:170px;}

.admin-shell{display:grid; grid-template-columns:244px 1fr; min-height:100vh;}
/* Court bookings month calendar */
.courts-cal{max-width:380px;}
.courts-cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
.courts-cal-grid{display:grid; grid-template-columns:repeat(7, 1fr); gap:4px;}
.courts-cal-wd{text-align:center; font-size:0.72rem; color:var(--ink-soft); font-weight:700;}
.courts-cal-day{position:relative; aspect-ratio:1; border:1px solid var(--line); background:var(--white); border-radius:8px;
  font:inherit; font-size:0.9rem; cursor:pointer; padding:0; color:var(--ink);}
.courts-cal-day.is-booked{font-weight:800;}
.courts-cal-day.is-today{border:2px solid var(--peach);}
.courts-cal-day.is-picked{background:var(--ink); color:var(--white); border-color:var(--ink);}
.courts-cal-dots{position:absolute; bottom:4px; left:50%; transform:translateX(-50%); display:flex; gap:3px;}
.courts-cal-dot{width:6px; height:6px; border-radius:50%; background:var(--peach);}
.courts-cal-dot.is-court{background:#2B6CB0;}
.courts-cal-day.is-picked .courts-cal-dot.is-court{background:#63B3ED;}
.courts-cal-dot.is-cancelled{background:#A0AEC0;}
.courts-cal-dot.is-tz{background:#7B3FB5;}
.courts-cal-dot.is-pamoja{background:#D9822B;}
.courts-cal-day.is-clash{box-shadow:inset 0 0 0 2px #B23A2E;}
/* A game that day has no confirmed court: red frame, pink fill and a ⚠ corner. */
.courts-cal-day.is-nobook{background:#FDE2E0; box-shadow:inset 0 0 0 2px #D64545; color:#8F1D1D; font-weight:800;}
.courts-cal-day.is-nobook::after{content:'\26A0'; position:absolute; top:1px; right:4px; font-size:0.7rem; color:#D64545;}
.courts-cal-day.is-nobook.is-picked{background:#8F1D1D; color:var(--white);}
/* Milder: a court booked with no game that day. Dashed orange frame and a small "!". */
.courts-cal-day.is-nogame:not(.is-nobook){outline:2px dashed #D9822B; outline-offset:-3px;}
.courts-cal-day.is-nogame:not(.is-nobook)::after{content:'!'; position:absolute; top:1px; right:5px; font-size:0.72rem; font-weight:800; color:#D9822B;}
/* A crossed-out day (holiday, trip, other): struck through on a hatched background. */
.courts-cal-day.is-blocked{text-decoration:line-through; color:#9A9A9A; background:repeating-linear-gradient(135deg, #F3F0EA 0 5px, #E7E2D8 5px 10px);}
.courts-cal-day.is-blocked.is-picked{color:var(--white); background:var(--ink);}
/* Players' calendar: a day the organizer crossed out (holiday, trip, other). */
.calendar-day.is-blocked{background:repeating-linear-gradient(135deg, #F3F0EA 0 6px, #E7E2D8 6px 12px);}
.calendar-day.is-blocked .day-num{text-decoration:line-through; color:#9A9A9A;}
.calendar-day .day-blocked{position:absolute; bottom:3px; left:4px; font-size:0.7rem;}
.courts-cal-block{position:absolute; top:2px; right:3px; font-size:0.6rem; text-decoration:none;}
.admin-mobile-bar, .admin-drawer-backdrop{display:none;}
#adminMenuBtn{background:rgba(255,255,255,0.12); color:var(--white); border:0; border-radius:8px; padding:9px 14px;
  font:inherit; font-weight:700; cursor:pointer; position:relative; display:flex; align-items:center; gap:6px;}
.admin-menu-dot{position:absolute; top:4px; right:4px; width:9px; height:9px; border-radius:50%; background:var(--peach);}
#adminMobileTitle{font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.admin-sidebar{background:var(--ink); color:var(--sand); padding:22px 16px; position:sticky; top:0; height:100vh; overflow-y:auto;}
.admin-sidebar .view-site-link{
  display:block; text-align:center; margin:4px 0 14px; padding:9px 10px;
  border-radius:8px; background:var(--peach); color:var(--white) !important;
  font-weight:700; text-decoration:none;
}
.admin-sidebar .view-site-link:hover{background:var(--peach-dark); color:var(--white) !important;}
.admin-sidebar .brand{color:var(--white); font-family:'Fraunces',serif; font-weight:700; font-size:1.2rem; margin-bottom:14px;}
/* Grouped menu: small section titles, an icon per item, badges pushed right,
   and a peach bar on the open tab so it's easy to see where you are. */
.admin-sidebar .nav-section{
  font-size:0.68rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(255,255,255,0.45); margin:16px 10px 6px;
}
.admin-sidebar a[data-tab]{
  display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:var(--sand);
  text-decoration:none; font-size:0.9rem; font-weight:500; margin-bottom:1px;
  border-left:3px solid transparent; transition:background .12s;
}
.admin-sidebar .nav-ico{width:20px; text-align:center; font-size:1rem; flex-shrink:0;}
.admin-sidebar .nav-label{flex:1; min-width:0; line-height:1.25;}
.admin-sidebar a[data-tab]:hover{background:rgba(255,255,255,0.07); color:var(--white);}
.admin-sidebar a[data-tab].active{background:rgba(255,255,255,0.12); color:var(--white); font-weight:700; border-left-color:var(--peach);}
/* Shortcuts under a menu item: jump straight to one panel of that tab. */
.admin-sidebar a.nav-sub[data-tab]{padding:4px 10px 4px 40px; font-size:0.78rem; color:rgba(255,255,255,0.6);}
.admin-main .panel, .admin-main details{scroll-margin-top:70px;}
/* Court bookings: one calendar, then a section per venue. */
.court-venue-head{font-size:1.15rem; margin:28px 0 12px; padding-bottom:6px; border-bottom:2px solid var(--line);}
.sidebar-badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:999px;
  background:var(--peach); color:#fff; font-size:0.72rem; font-weight:700;
  font-family:'IBM Plex Mono',monospace; margin-left:auto; flex-shrink:0;
}
.admin-main{padding:28px 32px;}
.panel{background:var(--white); border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow); padding:22px; margin-bottom:20px; overflow-x:auto;}
.panel h3{font-size:1rem; margin-bottom:14px;}
.tabs{display:flex; gap:6px; margin-bottom:16px;}
.tab{padding:7px 14px; border-radius:8px; font-size:0.85rem; font-weight:600; cursor:pointer; color:var(--ink-soft);}
.tab.active{background:var(--cerulean); color:var(--white);}

.stat-row{display:flex; gap:16px; margin-bottom:20px; flex-wrap:wrap;}
.stat{
  background:var(--white); border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; min-width:140px; box-shadow:var(--shadow);
}
.stat .num{font-family:'IBM Plex Mono',monospace; font-size:1.6rem; font-weight:600;}
.stat .lbl{font-size:0.78rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em;}

.hidden{display:none !important;}
/* Homepage cards (data-home-card in index.html) stay out of sight until
   app.js has read admin → Settings → Homepage cards, so a card that has
   been switched off never flashes up. */
html:not(.home-cards-ready) [data-home-card], [data-home-card].home-card-off{display:none !important;}

@media (max-width:720px){
  .admin-shell{display:block;}
  /* The menu becomes a drawer that slides in from the left (☰ Menu). It's
     placed on the visible part of the screen, like pop-ups (viewport-fit.js). */
  .admin-mobile-bar{display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:50;
    background:var(--ink); color:var(--white); padding:10px 14px;}
  .admin-sidebar{position:fixed; top:var(--vv-top, 0); left:var(--vv-left, 0); height:var(--vv-height, 100vh);
    width:min(82vw, 300px); z-index:1001; transform:translateX(-105%); transition:transform 0.25s ease;
    box-shadow:4px 0 18px rgba(0,0,0,0.35);}
  .admin-shell.drawer-open .admin-sidebar{transform:none;}
  .admin-shell.drawer-open .admin-drawer-backdrop{display:block; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:1000;}
  .admin-sidebar a[data-tab]{padding:12px 10px;}
  .admin-sidebar a.nav-sub[data-tab]{padding:8px 10px 8px 40px;}
  .field-row{flex-direction:column; gap:0;}
  /* Desktop-sized panel/page padding was eating a huge share of a phone's
     width for no reason, on top of every wide admin table having nowhere
     to scroll but the whole page — .panel/.modal now scroll horizontally
     on their own (see base rules above), this just reclaims the margins
     around them and gives table-row action buttons a real tap target. */
  .admin-main{padding:14px;}
  .panel{padding:14px;}
  .btn-sm{padding:9px 14px;}
}

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

.partner-boxes{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:16px;
  padding:0 24px 8px;
}
.partner-card{
  position:relative;
  border-radius:var(--radius);
  padding:24px;
  min-height:150px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  text-decoration:none;
  overflow:hidden;
  box-shadow:var(--shadow);
  transition:transform .14s ease, box-shadow .14s ease;
}
.partner-card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(20,35,31,0.18);}
.partner-card .partner-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:0.72rem; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; opacity:0.85;
}
.partner-card .partner-title{
  font-family:'Fraunces',serif; font-weight:700; font-size:1.7rem; margin:4px 0;
}
.partner-card .partner-sub{font-size:0.88rem; opacity:0.92; max-width:85%;}
.partner-card .partner-cta{
  align-self:flex-start; margin-top:12px; font-size:0.82rem; font-weight:700;
  display:flex; align-items:center; gap:6px;
}

.partner-card-darunited{
  background:linear-gradient(135deg, #06132b 0%, #0b2145 100%);
  color:#fff;
}
.partner-card-darunited .partner-eyebrow{color:#ffc414;}
.partner-card-darunited .partner-cta{color:#f26722;}
.partner-card-darunited::after{
  content:""; position:absolute; right:-30px; bottom:-30px; width:140px; height:140px;
  border-radius:50%; background:radial-gradient(circle, rgba(98,173,45,0.35), transparent 70%);
}

.partner-card-tplon{
  background:linear-gradient(115deg, #1EB53A 0%, #1EB53A 32%, #000 32%, #000 36%, #FCD116 36%, #FCD116 44%, #000 44%, #000 48%, #00A3DD 48%, #00A3DD 100%);
  color:#fff;
}
.partner-card-tplon .partner-eyebrow{color:#fff; text-shadow:0 1px 3px rgba(0,0,0,0.5);}
.partner-card-tplon .partner-title,
.partner-card-tplon .partner-sub{text-shadow:0 1px 4px rgba(0,0,0,0.55);}

.partner-card-doublespartner{
  background:linear-gradient(135deg, #8e419d 0%, #6a2f77 100%);
  color:#fff;
}
.partner-card-doublespartner .partner-eyebrow{color:#ffc414;}
.partner-card-doublespartner .partner-cta{color:#fff;}
.partner-card-doublespartner::after{
  content:""; position:absolute; right:-30px; bottom:-30px; width:140px; height:140px;
  border-radius:50%; background:radial-gradient(circle, rgba(20,155,216,0.35), transparent 70%);
}
.partner-card-duprcoach{
  background:#D170FE; /* the DUPR Coach logo's own purple, so it blends in */
  color:#111;
}
.partner-card-duprcoach .duprcoach-logo{display:block; width:185px; max-width:62%; height:auto; margin:-12px 0 2px -12px;}
.partner-card-duprcoach .partner-title{font-size:1.45rem;}
.partner-card-duprcoach .partner-sub{opacity:1;}
.partner-card-duprcoach .partner-cta{color:#111; text-decoration:underline;}

.partner-card-volunteer{
  background:linear-gradient(135deg, #F26B3D 0%, #E8436A 100%);
  color:#fff;
}
.partner-card-volunteer::after{
  content:""; position:absolute; left:-40px; bottom:-50px; width:170px; height:170px;
  border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.22), transparent 70%);
}
.partner-card-volunteer > div{position:relative; z-index:1; max-width:72%;}
.partner-card-volunteer .partner-eyebrow{color:#FFF3C4; opacity:1;}
.partner-card-volunteer .partner-sub{opacity:1; max-width:none;}
.partner-card-volunteer .partner-cta{
  position:relative; z-index:1; background:#fff; color:#D9552A;
  padding:8px 14px; border-radius:999px; box-shadow:0 2px 8px rgba(0,0,0,0.15);
}
.volunteer-badge{
  position:absolute; top:16px; right:16px; width:76px; height:76px; border-radius:50%;
  background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.18);
}
.volunteer-rules{margin:0 0 12px; padding-left:18px; font-size:0.9rem;}
.volunteer-rules li{margin-bottom:4px;}
.volunteer-game{border:1px solid rgba(20,35,31,0.15); border-radius:10px; padding:10px 12px; margin-bottom:8px;}
.volunteer-spots{display:flex; flex-wrap:wrap; gap:6px; margin-top:8px;}

/* ---------- sponsor spotlight ---------- */
.sponsor-spotlight{
  margin:0 24px 20px;
  border-radius:var(--radius);
  background:linear-gradient(135deg, #06132b 0%, #10241a 55%, #06132b 100%);
  color:#fff;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.sponsor-spotlight::after{
  content:""; position:absolute; right:-70px; top:-70px; width:240px; height:240px;
  border-radius:50%; background:radial-gradient(circle, rgba(190,170,111,0.35), transparent 70%);
}
.sponsor-spotlight-inner{
  display:flex; align-items:center; gap:28px; padding:32px 28px; flex-wrap:wrap;
  position:relative; z-index:1;
}
.sponsor-spotlight-badge{flex:0 0 auto;}
.sponsor-spotlight-badge img{
  width:112px; height:112px; border-radius:20px; display:block;
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
}
.sponsor-spotlight-copy{flex:1 1 380px; min-width:0;}
.sponsor-spotlight-eyebrow{
  font-family:'IBM Plex Mono',monospace; font-size:0.74rem; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; color:#BEAA6F;
}
.sponsor-spotlight-title{
  font-family:'Fraunces',serif; font-weight:700; color:#fff;
  font-size:clamp(1.4rem,3vw,2rem); margin:6px 0 12px;
}
.sponsor-spotlight-body{
  font-size:0.95rem; line-height:1.65; opacity:0.94; margin:0 0 12px; max-width:660px;
}
.sponsor-spotlight-signoff{
  font-family:'Fraunces',serif; font-style:italic; font-size:1rem; color:#F2E7C4; margin:0 0 18px;
}
.sponsor-spotlight-family{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.sponsor-spotlight-family-label{
  font-family:'IBM Plex Mono',monospace; font-size:0.7rem; font-weight:600;
  letter-spacing:0.05em; text-transform:uppercase; opacity:0.7; margin-right:2px;
}
.sponsor-chip{
  font-family:'IBM Plex Sans',sans-serif; font-size:0.8rem; font-weight:600;
  padding:5px 12px; border-radius:999px; color:#fff;
  background:rgba(255,255,255,0.1); border:1px solid rgba(190,170,111,0.5);
}
@media (max-width:600px){
  .sponsor-spotlight-inner{padding:24px 18px; gap:16px;}
  .sponsor-spotlight-badge img{width:84px; height:84px; border-radius:16px;}
}

.announcement-banner{
  margin:0 24px 20px;
  padding:20px 24px;
  border-radius:var(--radius);
  border-left:5px solid var(--peach);
  background:var(--white);
  color:var(--ink);
  box-shadow:var(--shadow);
  position:relative;
}
.tplon-apply-banner{
  margin:0 24px 20px;
  padding:18px 24px;
  border-radius:var(--radius);
  border-left:5px solid var(--willow-dark);
  background:#F3FAEC;
  color:var(--ink);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}
.tplon-apply-banner strong{font-size:1rem;}
.tplon-apply-banner p{margin:2px 0 0; font-size:0.88rem; color:var(--ink-soft);}
.chip-tplon{background:#F3FAEC; border-color:var(--willow-dark); color:var(--willow-dark); font-weight:600;}
.chip-tplon:hover{background:var(--willow-dark); color:#fff;}
.form-section{
  margin-top:24px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.form-section:first-of-type{margin-top:8px; padding-top:0; border-top:none;}
.form-section-label{
  font-family:'IBM Plex Mono',monospace; font-size:0.7rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--cerulean-dark);
  margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.dupr-badge{
  display:inline-flex; align-items:center; gap:5px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:2px 10px 2px 6px; font-size:0.72rem; font-weight:700; color:var(--ink);
}
.dupr-badge img{height:14px; width:auto; display:block;}
.announcement-banner .announcement-label{
  font-family:'IBM Plex Mono',monospace; font-size:0.72rem; font-weight:700;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--peach-dark); margin-bottom:8px;
}
.announcement-banner .announcement-body{
  font-size:0.98rem; line-height:1.65; white-space:pre-line; color:var(--ink-soft);
}
.announcement-banner .announcement-body em{font-style:italic;}
.announcement-banner .announcement-body a{color:var(--cerulean-dark);}

/* ---------- calendar view ---------- */
.calendar-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0 10px;
}
.calendar-header h2{font-size:1.2rem; margin:0;}
.calendar-nav{display:flex; gap:8px; align-items:center;}
.calendar-weekdays{
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:6px;
  font-family:'IBM Plex Mono',monospace; font-size:0.72rem; font-weight:600;
  color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.03em;
  padding:0 0 6px;
}
.calendar-weekdays div{text-align:center;}
.calendar-grid{
  display:grid; grid-template-columns:repeat(7,1fr);
  gap:6px;
  padding-bottom:32px;
}
.calendar-day{
  aspect-ratio:1;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--white);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px;
  position:relative;
  font-family:'IBM Plex Sans',sans-serif;
  cursor:default;
}
.calendar-day.empty{background:transparent; border-color:transparent;}
.calendar-day.today{border-color:var(--cerulean); border-width:2px;}
/* Past days are always game-free here (upcoming games only) — dimmed so
   they read as "already happened" rather than looking identical to an
   empty future day with nothing scheduled yet. */
.calendar-day.is-past{background:#F4F4F1;}
.day-private-lock{position:absolute; top:4px; right:6px; font-size:0.68rem;}
.calendar-day.is-past .day-num{color:#A8ADA8;}
.calendar-day .day-num{font-size:0.85rem; color:var(--ink-soft); font-weight:600;}
.calendar-day.has-games{cursor:pointer; border-color:var(--peach);}
.calendar-day.has-games:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.calendar-day .day-badge{
  display:flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 5px; border-radius:999px;
  background:var(--peach); color:#fff; font-size:0.72rem; font-weight:700;
  font-family:'IBM Plex Mono',monospace;
}
.day-game-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid var(--line); cursor:pointer;
}
.day-game-row:last-child{border-bottom:none;}
.day-game-row:hover{background:rgba(11,110,138,0.04);}

/* ---------- leagues chip (TZ flag) + club sub-filters ---------- */
/* ---------- competition badges (small corner icon on a game card) ----------
   Reusable pattern: a small badge in a card's corner identifies which
   competition a match belongs to, without taking over the whole card's
   look. .competition-badge is the shared positioning/shape; each specific
   competition just supplies its own background via a modifier class —
   .competition-badge-league today, .competition-badge-tplon /
   .competition-badge-darunited can follow the same pattern later once
   those need their own badge too. */
.competition-badge{
  position:absolute; top:10px; right:10px;
  width:30px; height:30px; border-radius:50%;
  box-shadow:0 1px 4px rgba(0,0,0,0.35);
  border:2px solid rgba(255,255,255,0.9);
  z-index:2;
}
.competition-badge-league{
  background:linear-gradient(115deg, #1EB53A 0%, #1EB53A 28%, #000 28%, #000 34%, #FCD116 34%, #FCD116 44%, #000 44%, #000 50%, #00A3DD 50%, #00A3DD 100%);
}

/* Tournament logos get their own larger, round treatment, vertically
   centered on the card's right edge — a small circular crop of a
   wordmark logo loses detail if too small, so this stays generously
   sized to keep the logo legible. */
.tournament-badge{
  width:58px; height:58px; border-radius:50%;
  background:var(--white); border:1px solid var(--line);
  box-shadow:0 2px 6px rgba(0,0,0,0.25);
  background-size:contain; background-repeat:no-repeat; background-position:center;
  padding:4px; box-sizing:border-box;
  flex-shrink:0;
}
/* DUPR Coach sessions carry the DUPR Coach logo the way tournaments carry theirs. */
.coach-session-badge{display:block; height:36px; width:auto; border-radius:8px; box-shadow:0 2px 6px rgba(0,0,0,0.25); flex-shrink:0;}
.coach-session-logo{display:block; height:46px; width:auto; border-radius:10px; margin:0 0 12px;}
.tournament-badge-related{
  width:46px; height:46px;
  border:2px solid var(--cerulean);
  margin-left:-14px;
}
/* Series/group badges (Niners, PreQuals) sit next to the tournament badge. */
.group-badge{ background-size:cover; padding:0; margin-left:-10px; }
.group-badge:first-child{ margin-left:0; }

/* ---------- league-today banner (main homepage) ---------- */
.league-today-banner{
  display:flex; align-items:center; gap:14px;
  position:relative;
  background:var(--white); border:1px solid var(--line);
  border-radius:var(--radius); padding:16px 18px;
  cursor:pointer; margin-bottom:12px;
  box-shadow:var(--shadow);
}
.league-today-banner:hover{box-shadow:0 10px 24px rgba(20,35,31,0.12);}
.league-today-title{
  font-family:'Fraunces',serif; font-weight:700; font-size:1.05rem;
  color:var(--ink);
}

.chip-leagues{
  background:linear-gradient(115deg, #1EB53A 0%, #1EB53A 28%, #000 28%, #000 34%, #FCD116 34%, #FCD116 44%, #000 44%, #000 50%, #00A3DD 50%, #00A3DD 100%);
  color:#fff;
  border-color:transparent;
  text-shadow:0 1px 3px rgba(0,0,0,0.55);
  font-weight:700;
}
.chip-leagues:hover{opacity:0.92;}
.club-subfilters{
  padding-top:0;
  margin-top:-8px;
}
.chip-sm{padding:5px 12px; font-size:0.8rem;}
.calendar-day{position:relative;}
.calendar-day .day-badge{position:relative;}
.day-dot{width:7px; height:7px; border-radius:50%; display:inline-block;}
.day-markers{
  display:flex; gap:4px; align-items:center; justify-content:center;
  position:absolute; bottom:5px; left:0; right:0;
}
.day-badge.day-badge-owl{background:linear-gradient(90deg, #B23A2E, #922E24);}
.day-badge.day-badge-morning{background:linear-gradient(90deg, #E9D96B, #D4BE4C); color:var(--ink);}
.day-badge.day-badge-tournament{background:linear-gradient(90deg, var(--cerulean), var(--cerulean-dark));}

.calendar-legend{
  display:flex; flex-wrap:wrap; gap:18px;
  padding:10px 0 16px;
  font-size:1rem; font-weight:600; color:var(--ink-soft);
}
.calendar-legend span{display:flex; align-items:center; gap:8px;}
.legend-dot{width:13px; height:13px; border-radius:50%; display:inline-block; flex-shrink:0;}

/* ---------- calendar: rolling agenda list (replaces the old month grid) ----------
   A single column at any width sidesteps the 7-wide grid squeezing badly
   on mobile, and starting exactly at today means there's never a page of
   empty past days to scroll through first. */
.agenda-list{display:flex; flex-direction:column; gap:8px; margin-top:4px;}
.agenda-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:12px 16px; border-radius:10px; border:1px solid var(--line); background:var(--white);
}
.agenda-row.has-games{cursor:pointer;}
.agenda-row.has-games:hover{box-shadow:var(--shadow);}
.agenda-row.today{border-color:var(--cerulean); border-width:2px;}
.agenda-row.is-past{background:#F4F4F1;}
.agenda-row.is-past .agenda-weekday, .agenda-row.is-past .agenda-daynum{color:#A8ADA8;}
.agenda-date{display:flex; align-items:baseline; gap:10px; min-width:0;}
.agenda-weekday{font-size:0.76rem; font-weight:700; color:var(--ink-soft); letter-spacing:0.03em; width:32px; flex-shrink:0;}
.agenda-daynum{font-size:0.92rem; font-weight:600; color:var(--ink); white-space:nowrap;}
.agenda-today-tag{
  display:inline-block; background:var(--peach); color:var(--white); font-size:0.64rem; font-weight:700;
  padding:2px 7px; border-radius:5px; letter-spacing:0.03em; white-space:nowrap;
}
.agenda-info{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.agenda-info .day-badge{
  display:inline-flex; align-items:center; justify-content:center;
  padding:4px 11px; border-radius:999px;
  background:var(--peach); color:#fff; font-size:0.76rem; font-weight:700;
  font-family:'IBM Plex Mono',monospace; white-space:nowrap;
}
.agenda-info .day-markers{position:static; display:flex; gap:4px; align-items:center;}
.agenda-none{color:var(--line); font-size:0.85rem;}
@media (max-width:480px){
  .agenda-row{padding:10px 12px; gap:8px;}
  .agenda-date{gap:6px;}
  .agenda-weekday{width:28px; font-size:0.7rem;}
  .agenda-daynum{font-size:0.84rem;}
  .agenda-today-tag{display:none;} /* the cerulean border already marks today at this width */
  .agenda-info .day-badge{font-size:0.7rem; padding:3px 9px;}
}

/* ---------- airport-style signup counter ---------- */
.airport-counter{
  display:inline-flex; align-items:center; gap:16px;
  background:#14231F;
  padding:14px 22px;
  border-radius:12px;
  box-shadow:0 6px 20px rgba(20,35,31,0.35);
  margin-top:10px;
}
.airport-digits{display:flex; gap:5px;}
.airport-digit{
  background:#0B1512;
  color:#F5C542;
  font-family:'IBM Plex Mono',monospace;
  font-weight:700;
  font-size:2.1rem;
  line-height:1;
  min-width:0.75em;
  text-align:center;
  padding:6px 4px;
  border-radius:6px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.1), inset 0 2px 4px rgba(0,0,0,0.4);
}
.airport-digit.comma{
  background:transparent;
  box-shadow:none;
  padding:6px 0;
  color:#F5C542;
}
.airport-digit.flip{animation:airport-flip 0.6s ease-out;}
@keyframes airport-flip{
  0%{transform:rotateX(90deg); filter:brightness(1.6);}
  60%{transform:rotateX(-12deg);}
  100%{transform:rotateX(0); filter:none;}
}
@media (prefers-reduced-motion:reduce){.airport-digit.flip{animation:none;}}
.airport-icon{font-size:1.8rem;}
.airport-togo{
  color:var(--peach);
  font-family:'IBM Plex Mono',monospace;
  font-weight:700;
  font-size:1.6rem;
  line-height:1;
  text-shadow:0 0 10px rgba(242,107,61,0.45);
}
.airport-label{
  color:#E8DCC0;
  font-family:'IBM Plex Mono',monospace;
  font-size:0.75rem;
  letter-spacing:0.09em;
  text-transform:uppercase;
  line-height:1.4;
  max-width:130px;
}
@media (max-width:520px){
  .airport-counter{padding:10px 16px; gap:10px;}
  .airport-digit{font-size:1.5rem; padding:4px 3px;}
  .airport-label{font-size:0.65rem; max-width:100px;}
  .airport-togo{font-size:1.2rem;}
}

/* ---------- public leagues page ---------- */
.league-card{
  background:var(--white); border-radius:var(--radius); border:1px solid var(--line);
  box-shadow:var(--shadow); padding:22px; margin-bottom:16px;
}
.league-card h3{margin:0 0 6px;}
.league-card .league-meta{
  display:flex; flex-wrap:wrap; gap:14px; margin:10px 0;
  font-size:0.88rem; color:var(--ink-soft);
}
.league-card .league-meta strong{color:var(--ink);}
.league-games-list{margin-top:14px;}

/* ---------- our apps directory page ---------- */
.apps-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:16px;
  margin-top:8px;
}
.app-card{
  display:block;
  background:var(--white);
  border-radius:var(--radius);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  padding:22px;
  text-decoration:none;
  transition:transform .14s ease, box-shadow .14s ease;
}
.app-card:hover{transform:translateY(-3px); box-shadow:0 12px 28px rgba(20,35,31,0.18);}
.app-card-emoji{font-size:1.8rem; margin-bottom:8px;}
.app-card-logo{height:44px; max-width:140px; object-fit:contain; margin-bottom:8px; display:block;}
.app-card-title{font-family:'Fraunces',serif; font-weight:700; font-size:1.15rem; color:var(--ink); margin-bottom:6px;}
.app-card-sub{font-size:0.88rem; color:var(--ink-soft); margin-bottom:10px; line-height:1.45;}
.app-card-url{font-family:'IBM Plex Mono',monospace; font-size:0.78rem; font-weight:600; color:var(--cerulean-dark);}
.app-card-here{
  border-color:var(--cerulean);
  border-width:2px;
  background:linear-gradient(135deg, rgba(11,110,138,0.06), rgba(11,110,138,0.02));
}
.app-card-here .app-card-url{color:var(--peach-dark);}

/* The list/calendar switch: its own centred row, big enough to spot. */
.view-toggle-row{display:flex; justify-content:center; padding:0 16px 18px;}
.view-toggle{font-size:1.05rem; font-weight:700; padding:12px 28px; border-radius:999px; box-shadow:0 6px 16px rgba(20,35,31,0.18); min-width:240px;}

/* ---------- mobile polish (public site) ---------- */
@media (max-width:600px){
  .container{padding:0 14px;}
  .hero{padding:32px 14px 20px;}
  .filters{padding:0 14px 14px; gap:6px;}
  .filters .chip{padding:6px 11px; font-size:0.8rem;}
  #locationFilterSelect{margin-left:0 !important; width:100% !important; order:99;}
  .view-toggle-row{padding:0 14px 14px;}
  .view-toggle{width:100%;}
  .club-subfilters{padding:0 14px 14px;}

  .partner-boxes{padding:0 14px 8px; grid-template-columns:1fr;}
  .type-section{padding:8px 14px 28px;}
  .grid{grid-template-columns:1fr; gap:12px;}

  .modal{padding:18px; max-width:100%; border-radius:14px;}

  .calendar-header{padding:10px 0 8px; flex-wrap:wrap; gap:8px;}
  .calendar-header h2{font-size:1.05rem;}
  .calendar-nav{gap:4px;}
  .calendar-nav .btn{padding:6px 10px; font-size:0.78rem;}
  .calendar-legend{gap:10px 14px; font-size:0.8rem; padding:6px 0 12px;}
  .legend-dot{width:10px; height:10px;}
  .calendar-weekdays{font-size:0.62rem; gap:4px;}
  .calendar-grid{gap:4px; padding-bottom:20px;}
  .calendar-day{border-radius:8px;}
  .calendar-day .day-num{font-size:0.72rem;}
  .calendar-day .day-badge{
    min-width:16px; height:16px; font-size:0.6rem; padding:0 3px;
  }
  .day-markers{bottom:3px; gap:3px;}
  .day-dot{width:5px; height:5px;}

  .league-card{padding:16px;}
  .league-card .league-meta{gap:8px 12px; font-size:0.82rem;}
  .apps-grid{grid-template-columns:1fr;}
}

/* ---------- score entry (Scores screen) ---------- */
.score-round-header{font-weight:800; font-size:1.1rem; margin:18px 0 8px;}
.score-court-label{font-weight:700; color:var(--ink-soft); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.03em; margin:10px 0 4px; display:flex; align-items:center; gap:6px;}
.score-match-row{border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:6px;}
.score-team-line{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:4px 0;}
.score-team-names{font-weight:700; flex:1; min-width:0; overflow-wrap:break-word;}
.score-tapbox{
  width:52px; height:44px; text-align:center; font-size:1.2rem; font-weight:800;
  border:2px solid var(--line); border-radius:8px; background:var(--white); color:var(--ink);
  -moz-appearance:textfield;
}
.score-tapbox::-webkit-outer-spin-button, .score-tapbox::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.score-team-line.is-winner .score-tapbox{border-color:var(--peach); background:#FFF3EC;}
.score-dupr-check{width:22px; height:22px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:0.75rem; flex-shrink:0; border:2px solid var(--line); color:transparent;}
.score-dupr-check.is-validated{border-color:var(--willow-dark); color:var(--willow-dark);}
.score-dupr-check.is-exported{border-color:var(--ink); background:var(--ink); color:var(--white);}
.score-bye-row{color:var(--ink-soft); font-size:0.85rem; padding:6px 0;}
.score-submit-row{display:flex; gap:8px; margin-top:8px;}

/* ---------- Airport-style visit counter (shared style, used across the ecosystem) ---------- */
.airport-board{
  display:inline-block; background:#0d0d0d; border:3px solid #222; border-radius:8px;
  padding:14px 22px; box-shadow: inset 0 0 14px rgba(0,0,0,0.8), 0 3px 8px rgba(0,0,0,0.35);
  text-align:center; font-family:'Courier New', monospace;
}
.airport-label{ display:block; color:#8a8a8a; font-size:0.62rem; letter-spacing:0.2em; margin-bottom:6px; font-weight:700; }
.airport-digits{ display:flex; gap:3px; justify-content:center; }
.airport-flap{
  display:inline-block; background:#111; border:1px solid #333; border-radius:3px;
  min-width:1.1em; padding:4px 2px; color:#ffb000; font-size:1.6rem; font-weight:700;
  text-shadow:0 0 8px rgba(255,176,0,0.75), 0 0 2px rgba(255,176,0,0.9);
  line-height:1;
}
.airport-flap.comma{ background:transparent; border:0; min-width:0; padding:4px 0; }
.airport-sub{ display:block; color:#777; font-size:0.66rem; margin-top:6px; letter-spacing:0.05em; }

/* ---------- Dar United branding ---------- */
/* Recolors a Dar United card/modal's accent elements (badges, meters,
   featured ribbon, date/countdown text) to darunited.org's own
   navy/yellow/orange/teal palette, so it reads as the same event across
   both sites instead of blending into the regular peach/orange DOP theme.
   Applied via .is-dar-united on the card <article> and on the game modal
   overlay — deliberately doesn't touch border-color/layout, since a Dar
   United game can also be .is-featured/.is-sunday-game and those own the
   card border already. */
:root{
  --dar-navy:#06132b;
  --dar-yellow:#ffc414;
  --dar-orange:#f26722;
  --dar-teal:#2b8fa3;
  --dar-blue:#149bd8;
}
/* Featured Dar United cards (the DAY-1/DAY-2/DAY-3 tournament-day cards)
   get a steady blue halo instead of the default pulsing peach/gold glow —
   always blue, matching darunited.org's own blue, not animated between
   colors like a regular featured game. */
.card.is-featured.is-dar-united{
  animation:none;
  border-color:transparent;
  box-shadow:0 0 0 4px var(--dar-blue), 0 12px 28px rgba(20,155,216,0.4);
}
.card.is-featured.is-dar-united:hover{
  box-shadow:0 0 0 4px var(--dar-blue), 0 16px 32px rgba(20,155,216,0.45);
}
.is-dar-united .card-date,
.is-dar-united .countdown,
.is-dar-united .interested-label{ color:var(--dar-navy); }
.is-dar-united .today-tomorrow-tag{ background:var(--dar-navy); color:var(--dar-yellow); }
.is-dar-united .badge-open{ background:#E3F0F3; color:var(--dar-teal); }
.is-dar-united .badge-planned{ background:#FFF3D6; color:#8A6D1D; }
.is-dar-united .court-meter .fill{ background:linear-gradient(90deg, var(--dar-teal), var(--dar-navy)); }
.is-dar-united .court-meter.near-full .fill,
.is-dar-united .court-meter.is-full .fill{ background:linear-gradient(90deg, var(--dar-orange), var(--dar-navy)); }
.is-dar-united .interest-meter .fill{ background:linear-gradient(90deg, var(--dar-yellow), var(--dar-orange)); }
.is-dar-united .interest-meter.over-capacity .fill{ background:linear-gradient(90deg, var(--dar-orange), var(--dar-navy)); }
.is-dar-united .featured-ribbon{ background:linear-gradient(90deg, var(--dar-navy), var(--dar-orange)); }

/* ---------- game pop-up: compact, phone-first ---------- */
.gm-facts{display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 12px;}
.gm-facts span{font-size:0.8rem; background:var(--sand); border:1px solid var(--line); border-radius:999px; padding:3px 10px; color:var(--ink);}
#gameActionArea{margin-top:12px;}
.gm-section{border-top:1px solid var(--line); margin-top:14px; padding-top:10px;}
.gm-section > summary{cursor:pointer; font-weight:700; font-size:0.9rem; list-style:none; display:flex; justify-content:space-between; align-items:center;}
.gm-section > summary::-webkit-details-marker{display:none;}
.gm-section > summary::after{content:'▾'; color:var(--ink-soft); transition:transform .15s;}
.gm-section[open] > summary::after{transform:rotate(180deg);}
.cancel-box{border-top:1px dashed var(--line); margin-top:12px; padding-top:10px;}
@media (max-width:600px){
  /* Bottom sheet: full width, scrolls inside, header stays put. */
  #gameModalOverlay{align-items:flex-end; padding:0;}
  #gameModalBody{max-width:100%; max-height:calc(var(--vv-height, 100vh) * 0.9); border-radius:18px 18px 0 0; padding:0 16px 20px;}
  #gameModalBody > .modal-header{position:sticky; top:0; z-index:5; background:var(--white); padding:14px 0 10px; margin:0 0 6px; border-bottom:1px solid var(--line);}
  #gameModalBody .modal-header h3{font-size:1.15rem; line-height:1.25;}
  #gameModalBody .notice{padding:10px 12px; font-size:0.9rem;}

  /* The admin roster/waitlist tables render inside this sheet, and on a
     phone they are wider than the screen. Because .modal carries
     overflow-x:auto, that width was inherited by the whole sheet: the
     title, the fact chips, the spots meter and the DUPR badges all ran off
     the right edge and needed a sideways scroll to read. Pin the sheet to
     the viewport and let each table scroll on its own instead. */
  #gameModalBody{overflow-x:hidden;}
  #gameModalBody table{display:block; width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}

  /* Long unbroken content - a venue name, a format description, a DUPR
     badge - must wrap rather than set the sheet's width. */
  #gameModalBody .gm-facts span{max-width:100%; white-space:normal;}
  /* inline-flex makes the label one unshrinkable item, so the long DUPR
     session text could only ever be clipped. Inline-block lets it wrap. */
  #gameModalBody .dupr-badge{display:inline-block; max-width:100%; white-space:normal; line-height:1.45;}
  #gameModalBody .dupr-badge img{display:inline; vertical-align:-2px; margin-right:4px;}
  #gameModalBody p, #gameModalBody h3{overflow-wrap:anywhere;}

  /* Six columns of roster cannot be read on a phone even when the table
     scrolls on its own - the last ones simply live off the side. Stack each
     row into a labelled card so everything is visible in one downward read.
     stackModalTablesForPhone() puts the header text on each cell. */
  #gameModalBody table.stacked,
  #gameModalBody table.stacked tbody,
  #gameModalBody table.stacked tr,
  #gameModalBody table.stacked td{display:block; width:100%;}
  #gameModalBody table.stacked{overflow-x:visible;}
  #gameModalBody table.stacked thead{display:none;}
  #gameModalBody table.stacked tr{
    border:1px solid var(--line); border-radius:12px;
    padding:8px 12px; margin-bottom:8px; background:var(--white);
  }
  /* One label/value per line made a six-field row six lines tall, so a full
     roster became a very long scroll. Name as the card's heading, the rest
     paired two-up underneath. */
  #gameModalBody table.stacked tr{display:grid; grid-template-columns:1fr 1fr; gap:6px 12px;}
  #gameModalBody table.stacked td{display:block; border:none; padding:0; text-align:left;}
  #gameModalBody table.stacked td::before{
    content:attr(data-label); display:block;
    font-size:0.64rem; font-weight:700; letter-spacing:0.05em;
    text-transform:uppercase; color:var(--ink-soft); margin-bottom:1px;
  }
  /* The name is the card's title, not another labelled field. */
  #gameModalBody table.stacked td:first-child{grid-column:1/-1; font-weight:700; font-size:1rem;}
  #gameModalBody table.stacked td:first-child::before{content:none;}
  /* An action cell has no header worth printing. */
  #gameModalBody table.stacked td[data-label=""]{grid-column:1/-1; text-align:right;}
  #gameModalBody table.stacked td[data-label=""]::before{content:none;}

  /* Tighter facts: four of these were taking three rows before the meter. */
  #gameModalBody .gm-facts{gap:5px;}
  #gameModalBody .gm-facts span{font-size:0.76rem; padding:2px 9px;}
  #gameModalBody .dupr-badge{margin-bottom:8px !important; font-size:0.7rem;}
}

/* ---------- every pop-up on a phone ----------
   The game pop-up got a bottom-sheet layout; every other pop-up was still a
   desktop card squeezed into the screen: 20px of overlay padding plus 18px
   inside, a vh height that ignores the browser's own toolbars (so the bottom
   of the pop-up, usually its button, sat under them), and a title that
   scrolled away with everything else. Give them all the same sheet. */
.modal{max-height:88dvh; overscroll-behavior:contain;}
body:has(.overlay:not(.hidden)){overflow:hidden;}
@media (max-width:600px){
  /* Place the overlay on the part of the page actually on screen, not
     inset:0 — see viewport-fit.js for why. The fallbacks are the screen. */
  .overlay{
    align-items:flex-end; padding:0; inset:auto;
    top:var(--vv-top, 0px); left:var(--vv-left, 0px);
    width:var(--vv-width, 100vw); height:var(--vv-height, 100dvh);
  }
  .overlay > .modal{
    max-width:100% !important; width:100%;
    max-height:90vh; max-height:calc(var(--vv-height, 100dvh) * 0.9);
    border-radius:18px 18px 0 0; padding:0 16px calc(20px + env(safe-area-inset-bottom));
    overflow-x:hidden; -webkit-overflow-scrolling:touch;
  }
  .overlay > .modal > :first-child:not(.modal-header){margin-top:16px;}
  .overlay > .modal > .modal-header{
    position:sticky; top:0; z-index:5; background:var(--white);
    padding:14px 0 10px; margin:0 0 10px; border-bottom:1px solid var(--line);
  }
  .overlay > .modal .modal-header h3{font-size:1.15rem; line-height:1.25; overflow-wrap:anywhere;}
  .overlay > .modal .modal-close{padding:4px 2px 4px 12px; font-size:1.6rem;}
  .overlay > .modal .notice{padding:10px 12px; font-size:0.9rem;}
  .overlay > .modal .field{margin-bottom:10px;}
  /* Wide tables scroll on their own instead of widening the whole sheet. */
  .overlay > .modal table{display:block; width:100%; overflow-x:auto;}
  .overlay > .modal img{max-width:100%;}
}

/* ---------- forecast player pickers ---------- */
.fc-slot{position:relative;}
.fc-results{
  position:absolute; left:0; right:0; top:100%; z-index:10;
  background:var(--white); border:1px solid var(--line); border-radius:10px;
  box-shadow:0 8px 24px rgba(20,35,31,0.15); max-height:220px; overflow-y:auto;
}
.fc-results:empty{display:none;}
.fc-results .fc-opt{padding:10px 12px; cursor:pointer; border-bottom:1px solid var(--line);}
.fc-results .fc-opt:last-child{border-bottom:none;}
.fc-results .fc-opt:hover, .fc-results .fc-opt:focus{background:rgba(11,110,138,0.06); outline:none;}
.fc-results .hint{padding:10px 12px; margin:0;}
.fc-picked{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  border:1px solid var(--cerulean); border-radius:10px; padding:9px 12px;
  background:rgba(11,110,138,0.05); font-weight:600;
}
.fc-picked button{background:none; border:none; font-size:1.2rem; line-height:1; cursor:pointer; color:var(--ink-soft);}
/* Two players side by side even on a phone — four stacked fields made the
   pop-up needlessly tall. */
.fc-team{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.fc-team .field{margin-bottom:0;}

/* ---------- "you're signed up" marker on a game card ---------- */
.signed-up-heart{
  display:flex; align-items:center; gap:8px; margin:10px 0 8px;
  font-weight:700; font-size:0.9rem; color:#2c6b1f;
}
.signed-up-heart .heart{font-size:2.2rem; line-height:1;}
/* Spot cancelled for non-payment (yours, or your set partner's). */
.spot-cancelled{
  display:flex; align-items:center; gap:8px; margin:10px 0 8px; padding:6px 10px;
  border-radius:10px; background:#FDECEA; border:1px solid #F3B9B5;
  font-weight:700; font-size:0.9rem; color:#9B1C1C;
}
.spot-cancelled img{width:34px; height:34px; flex:none;}

/* ---------- SnS DUPR rankings ---------- */
.rank-filters{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px;}
.rank-filters .chip{padding:6px 11px; font-size:0.8rem;}
.rank-list{list-style:none; padding:0; margin:10px 0 0;}
.rank-row{display:flex; align-items:center; gap:12px; padding:9px 4px; border-bottom:1px solid var(--line);}
.rank-row.is-me{background:rgba(98,173,45,0.12); border-radius:8px;}
.rank-num{flex:0 0 34px; text-align:center; font-family:'IBM Plex Mono',monospace; font-weight:700; color:var(--ink-soft);}
.rank-name{flex:1; min-width:0; font-weight:600; overflow-wrap:anywhere;}
.rank-bracket{display:block; font-size:0.72rem; font-weight:500; color:var(--ink-soft);}
.rank-rating{font-family:'IBM Plex Mono',monospace; font-weight:700;}

/* ---------- admin: money review ---------- */
.money-review-progress{height:8px; background:var(--line); border-radius:999px; overflow:hidden; margin:8px 0 16px;}
.money-review-progress > div{height:100%; background:var(--cerulean);}
.money-review-card{max-width:640px;}
.money-review-options{display:grid; gap:12px; margin-top:14px;}
.money-review-option{display:grid; grid-template-columns:200px 1fr; gap:12px; align-items:start; border:1px solid var(--line); border-radius:12px; padding:12px;}
.money-review-option .btn{width:100%;}
.money-review-paid-fields{grid-column:2; display:flex; gap:8px; flex-wrap:wrap;}
.money-review-paid-fields select, .money-review-paid-fields input{width:auto;}
@media (max-width:600px){
  .money-review-option{grid-template-columns:1fr;}
  .money-review-paid-fields{grid-column:1;}
}

/* ---------- admin: money book ---------- */
.money-cancel-opt{display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; cursor:pointer;}
.money-cancel-opt input[type=radio]{width:auto; margin-top:4px;}

/* Admin → Revenue: summary tiles. */
.rv-tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px;}
.rv-tile{background:var(--white); border:1px solid var(--line); border-radius:12px; padding:12px 14px;}
.rv-tile-num{font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:1.35rem;}
.rv-tile-label{font-size:0.78rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); margin-top:2px;}
/* Admin → Games: 📣 promote mark on games not covering their costs yet. */
.promote-badge{display:inline-block; margin-top:3px; padding:2px 8px; border-radius:999px; background:#FDE6D3; color:#9A4A12; font-size:0.74rem; font-weight:700;}
.promote-badge.is-stuck{background:#FBD5D0; color:#B23A2E;}
/* Game form: live break-even hints under Players and Price. */
.be-hint{font-size:0.8rem; margin-top:4px; min-height:1.1em;}
.be-ok{color:var(--willow-dark); font-weight:600;}
.be-warn{color:var(--peach-dark); font-weight:600;}
#gfMoreOptions > summary{list-style:none;}
#gfMoreOptions > summary::before{content:'▸ '; }
#gfMoreOptions[open] > summary::before{content:'▾ ';}
/* My Ledger: what they played this month, above the balance. */
.ledger-played{background:#EAF4EC; border-radius:10px; padding:10px 14px; margin-bottom:10px; text-align:center; font-size:0.95rem;}

/* Δ (delta): gap between the two teams' average DUPR */
.delta-mark { color: #C0392B; font-weight: 700; }

/* Admin game form: what you decide on the left, what the system fills in on the right. */
.gf-cols{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;}
.gf-cols .gf-col{margin:0; min-width:0;}
.gf-auto{background:#F7F4EC; border-radius:12px; padding:12px 14px;}
@media (max-width: 900px){ .gf-cols{grid-template-columns:1fr;} }

/* Admin → Games as cards (admin.js renderGameCardsAdmin): tap one to edit it. */
.agc-group{font-family:'Fraunces',serif; font-size:1.05rem; margin:16px 0 8px;}
.agc-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px;}
.admin-game-card{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px 12px; cursor:pointer;
  display:flex; flex-direction:column; gap:4px; transition:border-color .15s, box-shadow .15s;}
.admin-game-card:hover, .admin-game-card:focus{border-color:var(--cerulean); box-shadow:0 2px 10px rgba(11,110,138,0.15); outline:none;}
.admin-game-card.status-cancelled{opacity:0.55;}
.admin-game-card.status-draft{border-style:dashed;}
.agc-actions{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px;}
.agc-top{display:flex; justify-content:space-between; align-items:center; gap:6px;}
.agc-date{font-size:0.78rem; color:var(--cerulean-dark); font-weight:600;}
.agc-status{font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft);}
.status-open .agc-status{color:var(--willow-dark);}
.status-cancelled .agc-status{color:#B23A2E;}
.agc-title{font-weight:700; line-height:1.25;}
.agc-facts{font-size:0.85rem;}

/* Last visit's games, shown while the fresh list loads (showGamesSnapshot). */
#gamesRoot.is-stale { opacity: 0.6; pointer-events: none; transition: opacity 0.2s ease; }

/* 💳 "Is your wallet READY?" on the home page */
.wallet-ready-btn{display:inline-flex; align-items:center; gap:6px; margin-top:10px; padding:10px 18px; border:2px solid #06132B; border-radius:999px; background:#F6CF26; color:#06132B; font-size:1rem; font-weight:600; cursor:pointer; box-shadow:0 3px 0 #06132B;}
.wallet-ready-btn:active{transform:translateY(2px); box-shadow:0 1px 0 #06132B;}

/* 🎉 Reverse counter to the next 10,000 visits, under the board's digits */
.airport-board .airport-togo{ display:block; margin-top:6px; font-size:1.3rem; }

/* 📍 Venues (☰ menu) */
/* Venue cards look like the game cards, with a green border and the venue's logo. */
.vn-card{background:var(--white); border:2px solid #2E9E5B; border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:12px; overflow:hidden;
  transition:transform .14s ease, box-shadow .14s ease;}
.vn-card:not(.open):hover{transform:translateY(-2px); box-shadow:0 10px 24px rgba(20,35,31,0.12);}
.vn-head{display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:3px; align-items:start; width:100%; padding:16px 18px; background:none; border:0; text-align:left; cursor:pointer; font:inherit; color:inherit;}
.vn-head > *:not(.vn-logo){grid-column:2;}
.vn-logo{grid-column:1; grid-row:1 / span 6; width:72px; height:72px; object-fit:contain; border-radius:12px; border:1px solid var(--line); padding:4px;}
.vn-logo-text{display:flex; align-items:center; justify-content:center; background:#EAF6EF; color:#2E9E5B; font-family:'Fraunces',serif; font-weight:700; font-size:1.4rem;}
.vn-name{font-family:'Fraunces',serif;}
.vn-card.open .vn-head{background:#F6F8FB;}
.vn-name{font-weight:700; font-size:1.05rem;}
.vn-area{font-size:0.88rem; color:#555;}
.vn-visits{margin:0 0 8px; font-weight:700; font-size:0.95rem;}
.vn-facts{font-size:0.88rem; color:#333;}
.vn-maps{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0;}
.vn-maps .btn{text-decoration:none;}
.vn-intro{margin:0 0 8px; padding:8px 10px; background:#FFF8E1; border-radius:8px; font-size:0.88rem;}
.vn-meta{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:0.9rem;}
.vn-stars{letter-spacing:1px; white-space:nowrap;}
.vn-star{color:#D5D9E0;}
.vn-star.on{color:#F4B400;}
.vn-star.half{background:linear-gradient(90deg,#F4B400 50%,#D5D9E0 50%); -webkit-background-clip:text; background-clip:text; color:transparent;}
.vn-body{padding:4px 14px 14px;}
.vn-sub{font-weight:700; margin:12px 0 6px;}
.vn-games{margin:0; padding-left:18px;}
.vn-games li{margin:3px 0;}
.vn-aspects{width:100%; border-collapse:collapse; font-size:0.9rem;}
.vn-aspects td{padding:4px 4px 4px 0; vertical-align:middle;}
.vn-rate{text-align:right; white-space:nowrap;}
.vn-pick{background:none; border:0; padding:0 1px; font-size:1.25rem; line-height:1; color:#D5D9E0; cursor:pointer;}
.vn-pick.on{color:#F4B400;}
.vn-rate-row{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:6px; flex-wrap:wrap;}
#vnComment{width:100%; box-sizing:border-box; padding:8px; border:1px solid #D5D9E0; border-radius:8px; font:inherit;}
.vn-comments{margin-top:10px;}
.vn-comment{position:relative; padding:8px 26px 8px 0; border-top:1px solid #EEF0F4; font-size:0.92rem; word-break:break-word;}
.vn-comment-text{white-space:pre-wrap;}
.vn-ban{position:absolute; top:6px; right:24px; background:none; border:0; color:#B23A2E; cursor:pointer; font-size:0.8rem;}
.vn-comment:has(.vn-ban){padding-right:80px;}
.vn-banned{margin:8px 0; padding:8px 10px; background:#FDECEA; border-radius:8px; font-size:0.88rem;}
.vn-ban-row{display:flex; justify-content:space-between; align-items:center; gap:8px; padding:4px 0; border-top:1px solid #EEF0F4;}
.vn-del{position:absolute; top:6px; right:0; background:none; border:0; color:#B23A2E; cursor:pointer;}
@media (max-width:520px){
  .vn-aspects, .vn-aspects tbody{display:block;}
  .vn-aspects tr{display:grid; grid-template-columns:1fr auto auto; align-items:center;}
  .vn-aspects td.vn-rate{grid-column:1 / -1; text-align:left;}
}
.vn-reply{margin:8px 0 0 14px; padding:6px 26px 6px 10px; border-left:3px solid #0B6E8A; background:#F3F8FA; border-radius:0 8px 8px 0; position:relative;}
.vn-reply-del{position:absolute; top:4px; right:4px; background:none; border:0; color:#B23A2E; cursor:pointer;}
.vn-reply-btn{background:none; border:0; padding:4px 0; color:#0B6E8A; font-weight:600; cursor:pointer; font-size:0.85rem;}
.vn-reply-form{margin:8px 0 0 14px;}
.vn-reply-form textarea{width:100%; box-sizing:border-box; padding:8px; border:1px solid #D5D9E0; border-radius:8px; font:inherit; margin-bottom:6px;}
#snsComment{width:100%; box-sizing:border-box; padding:8px; border:1px solid #D5D9E0; border-radius:8px; font:inherit;}
.vn-choice{margin:0 0 12px; padding:12px; border:2px solid #B23A2E; border-radius:12px; background:#FFF6F5;}
.vn-choice .btn{margin:0 6px 6px 0;}