/* ============================================================
   BETTER BREAK POINT — night court
   Palette: hard-court green-black · tennis-ball neon · clay · line white
   ============================================================ */

:root{
  --court:      #07160F;
  --court-2:    #0B2117;
  --court-3:    #103024;
  --ball:       #DDFF4D;
  --ball-2:     #B6F02A;
  --ball-dim:   #8FBF1F;
  --clay:       #D07A50;
  --clay-2:     #E89A6E;
  --line:       #F3F7EF;
  --ink:        #E8F0E4;
  --ink-2:      rgba(232,240,228,.66);
  --ink-3:      rgba(232,240,228,.40);
  --glass:      rgba(255,255,255,.045);
  --glass-2:    rgba(255,255,255,.075);
  --edge:       rgba(221,255,77,.16);
  --edge-soft:  rgba(255,255,255,.09);
  --ok:         #6BE38A;
  --no:         #F0605F;
  --maybe:      #FFC24D;

  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --shadow:     0 24px 60px -22px rgba(0,0,0,.75);
  --shadow-lg:  0 40px 90px -30px rgba(0,0,0,.85);
  --glow:       0 0 0 1px rgba(221,255,77,.25), 0 12px 40px -10px rgba(221,255,77,.35);

  --font-d: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --font-b: 'Inter', system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --spring: cubic-bezier(.34,1.56,.64,1);

  --pad: clamp(20px, 5vw, 40px);
}

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

/* The browser hides [hidden] with display:none, but ANY author display rule
   beats it — so .inline-error{display:flex} silently made hidden do nothing.
   This makes the hidden attribute mean what it says, everywhere. */
[hidden]{ display:none !important; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--court);
  color:var(--ink);
  font-family:var(--font-b);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
}

h1,h2,h3,h4{ font-family:var(--font-d); font-weight:800; line-height:1.02; letter-spacing:-.03em; margin:0; }
p{ margin:0; }
a{ color:inherit; }

/* ══════════ AMBIENT BACKGROUND ══════════ */
.bg{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

.bg-mesh{
  position:absolute; inset:-20%;
  background:
    radial-gradient(60% 50% at 15% 8%,  rgba(221,255,77,.13), transparent 62%),
    radial-gradient(55% 45% at 88% 22%, rgba(208,122,80,.13), transparent 60%),
    radial-gradient(70% 60% at 50% 100%,rgba(16,48,36,.85),  transparent 65%);
  animation:drift 26s var(--ease) infinite alternate;
}
@keyframes drift{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(-3%,2%,0) scale(1.08); }
}

/* tennis court, drawn to real proportions */
.bg-court{
  position:absolute; inset:0; width:100%; height:100%;
  mask-image:radial-gradient(ellipse 95% 75% at 50% 35%, #000 30%, transparent 82%);
  -webkit-mask-image:radial-gradient(ellipse 95% 75% at 50% 35%, #000 30%, transparent 82%);
}
.court-lines{
  stroke:var(--line);
  stroke-width:4;
  opacity:.22;
}
.court-net rect{ fill:var(--line); }
.court-net{ opacity:.20; }
.court-net rect:first-child{ fill:url(#bbpNet); opacity:1; }

.bg-glow{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.5; }
.bg-glow--a{ width:44vw; height:44vw; top:-12vw; left:-10vw; background:rgba(221,255,77,.18); animation:float 18s ease-in-out infinite; }
.bg-glow--b{ width:38vw; height:38vw; bottom:6vh; right:-12vw; background:rgba(208,122,80,.16); animation:float 22s ease-in-out infinite reverse; }
@keyframes float{ 0%,100%{transform:translate(0,0)} 50%{transform:translate(4vw,-4vh)} }

.bg-grain{
  position:absolute; inset:0; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

main{ position:relative; z-index:1; }

/* ══════════ TOPBAR ══════════ */
.topbar{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px var(--pad);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  background:linear-gradient(to bottom, rgba(7,22,15,.82), rgba(7,22,15,.42));
  border-bottom:1px solid transparent;
  transition:border-color .4s var(--ease), background .4s var(--ease);
}
.topbar.is-stuck{
  border-bottom-color:var(--edge-soft);
  background:rgba(7,22,15,.92);
}

.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.brand-ball{
  width:34px; height:34px; flex:none;
  filter:drop-shadow(0 0 14px rgba(221,255,77,.45));
  animation:spin 14s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text b{ font-family:var(--font-d); font-weight:800; font-size:15.5px; letter-spacing:-.025em; }
.brand-text i{ font-style:normal; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }

@media (max-width:430px){ .brand-text i{ display:none; } }

/* ══════════ BUTTONS ══════════ */
.btn{
  --bg:transparent;
  appearance:none; border:0; cursor:pointer;
  font-family:var(--font-b); font-weight:600; font-size:14.5px; letter-spacing:-.01em;
  padding:12px 20px; border-radius:100px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  text-decoration:none; white-space:nowrap;
  transition:transform .25s var(--spring), box-shadow .3s var(--ease),
             background .25s var(--ease), color .25s var(--ease), opacity .2s;
}
.btn:active{ transform:scale(.96); }
.btn:focus-visible{ outline:2px solid var(--ball); outline-offset:3px; }

.btn--solid{
  background:linear-gradient(135deg, var(--ball), var(--ball-2));
  color:#0A1A11;
  box-shadow:0 10px 30px -10px rgba(221,255,77,.55), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn--solid:hover{ box-shadow:0 16px 44px -12px rgba(221,255,77,.75), inset 0 1px 0 rgba(255,255,255,.6); transform:translateY(-2px); }

.btn--ghost{
  background:var(--glass); color:var(--ink);
  border:1px solid var(--edge-soft);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.btn--ghost:hover{ background:var(--glass-2); border-color:var(--edge); transform:translateY(-2px); }

.btn--quiet{
  background:none; color:var(--ink-2); padding:10px 14px; font-size:13.5px;
  text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--ink-3);
}
.btn--quiet:hover{ color:var(--ball); text-decoration-color:var(--ball); }

.btn--wide{ width:100%; }

.btn--login{ padding:10px 18px; font-size:13.5px; }
.dot-live{
  width:6px; height:6px; border-radius:50%; background:var(--ball);
  box-shadow:0 0 0 0 rgba(221,255,77,.6); animation:ping 2.4s infinite;
}
@keyframes ping{
  0%{ box-shadow:0 0 0 0 rgba(221,255,77,.55); }
  70%{ box-shadow:0 0 0 8px rgba(221,255,77,0); }
  100%{ box-shadow:0 0 0 0 rgba(221,255,77,0); }
}

/* ══════════ LAYOUT ══════════ */
.wrap{ width:min(1120px, 100%); margin-inline:auto; padding-inline:var(--pad); }
.wrap--narrow{ width:min(720px, 100%); }
.section{ padding-block:clamp(56px, 9vw, 110px); }

/* ══════════ HERO ══════════ */
.hero{
  position:relative;
  min-height:clamp(560px, 92svh, 900px);
  display:flex; align-items:center;
  padding:clamp(40px,7vw,80px) var(--pad) clamp(70px,9vw,110px);
}
.hero-inner{ width:min(900px,100%); margin-inline:auto; }

.eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 15px 7px 11px; border-radius:100px;
  background:var(--glass); border:1px solid var(--edge);
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ball); margin-bottom:26px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.pulse{ width:7px; height:7px; border-radius:50%; background:var(--ball); animation:ping 2.4s infinite; }

.hero-title{
  font-size:clamp(46px, 12.5vw, 116px);
  margin-bottom:26px;
}
.hero-title .line{ display:block; }
.hero-title .line--accent{
  background:linear-gradient(100deg, var(--ball) 0%, var(--ball-2) 45%, var(--clay-2) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 6px 30px rgba(221,255,77,.28));
}

.hero-sub{
  font-size:clamp(16px,2.1vw,20px); color:var(--ink-2);
  max-width:56ch; margin-bottom:34px;
}
.hero-sub b{ color:var(--ink); font-weight:700; }

.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; }
.hero-cta .btn{ padding:15px 28px; font-size:15.5px; }

.scroll-cue{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  width:24px; height:38px; border:1.5px solid var(--edge-soft); border-radius:100px;
  display:flex; justify-content:center; padding-top:7px;
}
.scroll-cue span{
  width:3px; height:7px; border-radius:3px; background:var(--ball);
  animation:cue 1.9s var(--ease) infinite;
}
@keyframes cue{ 0%{opacity:0;transform:translateY(0)} 35%{opacity:1} 100%{opacity:0;transform:translateY(14px)} }

/* ══════════ CARDS ══════════ */
/* Cards sit at 15% fill so the court reads through them. The heavier
   backdrop-blur is what keeps the text legible at that opacity. */
.card{
  position:relative;
  background:linear-gradient(160deg, rgba(16,48,36,.15), rgba(7,22,15,.15));
  border:1px solid var(--edge-soft);
  border-radius:var(--r-lg);
  padding:clamp(24px,3.4vw,34px);
  backdrop-filter:blur(26px) saturate(160%);
  -webkit-backdrop-filter:blur(26px) saturate(160%);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,.10), transparent 42%);
}

.detail-grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit, minmax(268px,1fr));
}
.card--detail{ transition:transform .5s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); }
.card--detail:hover{ transform:translateY(-6px); border-color:var(--edge); box-shadow:var(--shadow-lg); }

.card-tag{
  font-size:10.5px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ball); margin-bottom:16px;
}
.card--detail h3{ font-size:clamp(23px,2.9vw,30px); margin-bottom:12px; }
.card--detail p{ color:var(--ink-2); font-size:15px; }

.link-out{
  display:inline-flex; align-items:center; gap:7px; margin-top:18px;
  font-weight:600; font-size:14.5px; color:var(--ball); text-decoration:none;
  border-bottom:1px solid rgba(221,255,77,.3); padding-bottom:3px;
  transition:gap .3s var(--ease), border-color .3s;
}
.link-out:hover{ gap:11px; border-bottom-color:var(--ball); }
.link-out svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.chip-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:18px; }
.chip{
  font-size:12px; font-weight:600; padding:6px 13px; border-radius:100px;
  background:rgba(221,255,77,.09); border:1px solid var(--edge); color:var(--ball);
}

.card--vibe{ background:linear-gradient(160deg, rgba(208,122,80,.14), var(--glass)); }
.card--vibe .card-tag{ color:var(--clay-2); }
.eq{ display:flex; align-items:flex-end; gap:4px; height:30px; margin-top:20px; }
.eq i{
  width:4px; border-radius:3px; background:linear-gradient(to top,var(--clay),var(--ball));
  animation:eq 1.1s ease-in-out infinite;
}
.eq i:nth-child(1){ height:40%; animation-delay:0s }
.eq i:nth-child(2){ height:85%; animation-delay:.14s }
.eq i:nth-child(3){ height:55%; animation-delay:.28s }
.eq i:nth-child(4){ height:100%; animation-delay:.1s }
.eq i:nth-child(5){ height:35%; animation-delay:.36s }
.eq i:nth-child(6){ height:70%; animation-delay:.22s }
.eq i:nth-child(7){ height:48%; animation-delay:.05s }
@keyframes eq{ 0%,100%{transform:scaleY(.45)} 50%{transform:scaleY(1)} }
.eq i{ transform-origin:bottom; }

/* ══════════ NOTICES ══════════ */
.notice{
  border-radius:var(--r); padding:20px 22px;
  border:1px solid var(--edge-soft); background:rgba(16,48,36,.15);
  backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%);
}
.notice--urgent{
  display:flex; gap:14px; align-items:flex-start;
  border-color:rgba(221,255,77,.28);
  background:linear-gradient(120deg, rgba(221,255,77,.10), rgba(255,255,255,.04));
  margin-bottom:22px;
}
.notice--urgent svg{ width:22px; height:22px; flex:none; margin-top:1px; fill:none; stroke:var(--ball); stroke-width:1.8; stroke-linecap:round; }
.notice--urgent p{ font-size:14.5px; color:var(--ink-2); }
.notice--urgent b{ color:var(--ink); }

.notice--soft{ margin-top:30px; }
.notice--soft h4{ font-size:18px; margin-bottom:10px; }
.notice--soft p{ font-size:14.5px; color:var(--ink-2); }
.notice--soft p + p{ margin-top:12px; }
.notice--soft b{ color:var(--ink); }
.notice--soft .fine{
  font-size:13.5px; padding-top:12px; border-top:1px solid var(--edge-soft); color:var(--ink-3);
}
.notice--soft .fine b{ color:var(--clay-2); }

/* ══════════ FORM ══════════ */
.card--form{ padding:clamp(26px,3.6vw,38px); }
.form-head{ margin-bottom:24px; }
.form-head h2{ font-size:clamp(28px,4.2vw,38px); margin-bottom:9px; }
.form-head p{ color:var(--ink-2); font-size:15px; }

.field{ margin-bottom:18px; }
.field label{
  display:block; font-size:12.5px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2); margin-bottom:8px;
}
.field label .req{ text-transform:none; letter-spacing:0; font-weight:500; color:var(--ink-3); font-size:11.5px; }

.field input{
  width:100%; padding:15px 17px;
  font-family:var(--font-b); font-size:16px; color:var(--ink);
  background:rgba(0,0,0,.28);
  border:1px solid var(--edge-soft); border-radius:var(--r-sm);
  transition:border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder{ color:rgba(232,240,228,.28); }
.field input:focus{
  outline:none; border-color:var(--ball);
  background:rgba(0,0,0,.4);
  box-shadow:0 0 0 4px rgba(221,255,77,.13);
}
.field input.is-bad{ border-color:var(--no); box-shadow:0 0 0 4px rgba(240,96,95,.13); }

.hint{ display:block; font-size:12.5px; color:var(--ink-3); margin-top:8px; line-height:1.5; }
.err{ display:none; font-size:12.5px; color:var(--no); margin-top:7px; font-weight:600; }
.err.is-on{ display:block; animation:shakeIn .4s var(--ease); }
.err--block{ margin-bottom:12px; }
@keyframes shakeIn{ 0%{opacity:0;transform:translateX(-6px)} 60%{transform:translateX(3px)} 100%{opacity:1;transform:none} }

.form-actions{ display:flex; flex-direction:column; gap:8px; margin-top:24px; }
.form-status{ font-size:13.5px; color:var(--ball); margin-top:12px; text-align:center; min-height:1em; }

.signed-in{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.avatar{
  width:52px; height:52px; flex:none; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-d); font-weight:800; font-size:19px; color:#0A1A11;
  background:linear-gradient(135deg,var(--ball),var(--ball-2));
  box-shadow:0 8px 24px -8px rgba(221,255,77,.6);
}
.signed-in-meta{ display:flex; flex-direction:column; flex:1 1 160px; min-width:0; }
.signed-in-meta b{ font-family:var(--font-d); font-size:19px; letter-spacing:-.02em; }
.signed-in-meta span{ font-size:13px; color:var(--ink-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.signed-in-actions{ display:flex; gap:4px; }

/* ══════════ SECTION HEAD ══════════ */
.sec-head{ margin-bottom:26px; }
.sec-kicker{
  font-size:10.5px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
  color:var(--clay-2); margin-bottom:14px;
}
.sec-head h2{ font-size:clamp(30px,5.2vw,48px); margin-bottom:13px; }
.sec-head p{ color:var(--ink-2); font-size:15.5px; max-width:52ch; }

/* ══════════ SWIPE HINTS (inline, in the intro copy) ══════════ */
.sw{
  display:inline-block; white-space:nowrap;
  padding:2px 9px; border-radius:100px;
  font-weight:700; font-size:.93em; line-height:1.5;
}
.sw--out  { background:rgba(240,96,95,.14);  color:var(--no); }
.sw--in   { background:rgba(107,227,138,.14);color:var(--ok); }
.sw--maybe{ background:rgba(255,194,77,.14); color:var(--maybe); }

/* ══════════ INLINE ERROR ══════════ */
.inline-error{
  display:flex; gap:13px; align-items:flex-start;
  padding:17px 18px; margin-bottom:20px;
  border-radius:var(--r); border:1px solid rgba(240,96,95,.45);
  background:linear-gradient(120deg, rgba(240,96,95,.14), rgba(255,255,255,.03));
  animation:popIn .4s var(--spring);
}
.inline-error > svg{ width:21px; height:21px; flex:none; margin-top:2px; fill:none; stroke:var(--no); stroke-width:1.8; stroke-linecap:round; }
.inline-error div{ flex:1; min-width:0; }
.inline-error b{ display:block; font-size:14.5px; margin-bottom:4px; }
.inline-error span{ display:block; font-size:13.5px; color:var(--ink-2); }
.link-inline{
  display:inline-block; margin-top:9px; font-size:13.5px; font-weight:600;
  color:var(--ball); text-decoration:none; border-bottom:1px solid rgba(221,255,77,.35); padding-bottom:2px;
}
.link-inline:hover{ border-bottom-color:var(--ball); }
.inline-error-x{
  appearance:none; background:none; border:0; cursor:pointer;
  color:var(--ink-3); font-size:22px; line-height:1; padding:0 2px; flex:none;
}
.inline-error-x:hover{ color:var(--ink); }
@keyframes popIn{ from{opacity:0;transform:translateY(-8px) scale(.98)} to{opacity:1;transform:none} }

/* ══════════ DATE LIST ══════════ */
.date-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }

.date-row{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  isolation:isolate;
  opacity:0; transform:translateY(16px);
  animation:rowIn .55s var(--ease) forwards;
}
@keyframes rowIn{ to{ opacity:1; transform:none; } }

/* swipe backdrop revealed underneath the card */
.date-under{
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; border-radius:var(--r);
  /* green left / red right, matching the label order in the markup */
  background:linear-gradient(90deg, rgba(107,227,138,.35), rgba(7,22,15,.2) 40%, rgba(7,22,15,.2) 60%, rgba(240,96,95,.35));
  font-family:var(--font-d); font-weight:800; font-size:14px; letter-spacing:.1em; text-transform:uppercase;
}
.date-under .u-out{ color:var(--no); }
.date-under .u-in{ color:var(--ok); }

.date-card{
  position:relative; z-index:1;
  padding:16px 16px 14px;
  border-radius:var(--r);
  background:linear-gradient(150deg, rgba(16,48,36,.15), rgba(11,33,23,.15));
  border:1px solid var(--edge-soft);
  backdrop-filter:blur(24px) saturate(150%); -webkit-backdrop-filter:blur(24px) saturate(150%);
  cursor:grab; touch-action:pan-y;
  user-select:none; -webkit-user-select:none;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), background .3s var(--ease);
}
.date-card:active{ cursor:grabbing; }
.date-card.is-dragging{ transition:none; box-shadow:var(--shadow-lg); }
.date-card.is-snapping{ transition:transform .45s var(--spring), border-color .3s, background .3s; }
.date-card:focus-visible{ outline:2px solid var(--ball); outline-offset:3px; }

/* ---- head row: date mark · full date · status ---- */
.date-head{ display:flex; align-items:center; gap:13px; }

.date-mark{
  flex:none; width:46px; text-align:center;
  padding:5px 0 6px; border-radius:11px;
  background:rgba(0,0,0,.3); border:1px solid var(--edge-soft);
}
.date-mark .m{ display:block; font-size:9.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--clay-2); }
.date-mark .n{ display:block; font-family:var(--font-d); font-size:22px; font-weight:800; line-height:1.05; }

.date-lines{ flex:1; min-width:0; }
.date-full{
  font-family:var(--font-d); font-size:16px; font-weight:600; letter-spacing:-.02em;
  line-height:1.2;
}
.date-meta{ font-size:12.5px; color:var(--ink-3); margin-top:3px; }

/* status pill — always visible on every date */
.spots{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap;
  padding:6px 12px; border-radius:100px;
  background:rgba(107,227,138,.13); border:1px solid rgba(107,227,138,.3); color:var(--ok);
  transition:all .35s var(--ease);
}
.spots::before{ content:''; width:5px; height:5px; border-radius:50%; background:currentColor; }
.spots.is-full{ background:rgba(208,122,80,.16); border-color:rgba(208,122,80,.45); color:var(--clay-2); }

@media (max-width:560px){
  .date-head{ flex-wrap:wrap; }
  .date-lines{ flex:1 1 auto; }
  .spots{ order:3; flex:1 0 100%; justify-content:center; margin-top:11px; }
}

.date-sub{
  font-size:12.5px; color:var(--ink-2); margin-top:11px;
  padding-left:2px; line-height:1.45;
}
.date-sub b{ color:var(--ball); }

/* ---- Pass / Maybe / Play ---- */
.date-choice{
  display:grid; grid-template-columns:repeat(3,1fr); gap:7px;
  margin-top:13px; padding-top:13px;
  border-top:1px solid var(--edge-soft);
}
.choice{
  appearance:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:7px;
  min-height:46px; padding:12px 8px; border-radius:12px;
  font-family:var(--font-b); font-size:13.5px; font-weight:700; letter-spacing:-.01em;
  background:rgba(255,255,255,.045); border:1px solid var(--edge-soft); color:var(--ink-3);
  transition:all .25s var(--spring);
}
.choice:hover{ transform:translateY(-2px); color:var(--ink); background:rgba(255,255,255,.08); }
.choice:active{ transform:scale(.96); }
.choice:focus-visible{ outline:2px solid var(--ball); outline-offset:2px; }
.choice-glyph{ font-size:14px; font-weight:800; line-height:1; }
.choice-label{ line-height:1; }

.choice--out:hover  { border-color:rgba(240,96,95,.45);  color:var(--no); }
.choice--maybe:hover{ border-color:rgba(255,194,77,.45); color:var(--maybe); }
.choice--in:hover   { border-color:rgba(107,227,138,.45);color:var(--ok); }

.choice--out.is-on{
  background:rgba(240,96,95,.2); border-color:var(--no); color:var(--no);
  box-shadow:0 0 0 1px rgba(240,96,95,.3), 0 8px 22px -10px rgba(240,96,95,.7);
}
.choice--maybe.is-on{
  background:rgba(255,194,77,.2); border-color:var(--maybe); color:var(--maybe);
  box-shadow:0 0 0 1px rgba(255,194,77,.3), 0 8px 22px -10px rgba(255,194,77,.7);
}
.choice--in.is-on{
  background:rgba(107,227,138,.2); border-color:var(--ok); color:var(--ok);
  box-shadow:0 0 0 1px rgba(107,227,138,.3), 0 8px 22px -10px rgba(107,227,138,.7);
}

@media (max-width:360px){
  .choice{ flex-direction:column; gap:4px; font-size:12px; padding:9px 4px; }
}

/* ---- crossed out: date is full, so this answer isn't available ---- */
.choice.is-locked{
  position:relative; cursor:not-allowed; opacity:.32;
  background:rgba(255,255,255,.02); border-color:var(--edge-soft); color:var(--ink-3);
}
.choice.is-locked:hover{ transform:none; background:rgba(255,255,255,.02); color:var(--ink-3); border-color:var(--edge-soft); }
.choice.is-locked .choice-label{ text-decoration:line-through; text-decoration-thickness:1.5px; }
/* diagonal strike across the whole button */
.choice.is-locked::after{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(to top left,
    transparent calc(50% - 1px), currentColor calc(50% - 1px),
    currentColor calc(50% + 1px), transparent calc(50% + 1px));
  opacity:.5;
}

/* tapping a crossed-out option (or swiping toward it) gives a small shake */
.date-row.is-locked-nudge .date-choice{ animation:nudge .45s var(--ease); }
@keyframes nudge{
  20%{ transform:translateX(-4px) } 40%{ transform:translateX(4px) }
  60%{ transform:translateX(-3px) } 80%{ transform:translateX(3px) }
}

/* swipe hints light up the underlay word you're heading toward */
.date-row.swipe-in  .date-under .u-in { transform:scale(1.15); opacity:1; }
.date-row.swipe-out .date-under .u-out{ transform:scale(1.15); opacity:1; }
.date-under span{ opacity:.55; transition:transform .2s var(--ease), opacity .2s; }

/* answered states on the row */
.date-row[data-ans="in"]    .date-card{ border-color:rgba(107,227,138,.5); background:linear-gradient(150deg, rgba(107,227,138,.16), rgba(11,33,23,.15)); }
.date-row[data-ans="out"]   .date-card{ border-color:rgba(240,96,95,.35);  background:linear-gradient(150deg, rgba(240,96,95,.13), rgba(11,33,23,.15)); opacity:.72; }
.date-row[data-ans="maybe"] .date-card{ border-color:rgba(255,194,77,.45); background:linear-gradient(150deg, rgba(255,194,77,.14), rgba(11,33,23,.15)); }

.date-row.is-past{ display:none; }

/* demo-mode banner */
.demo-banner{
  display:inline-block; margin-bottom:18px;
  padding:10px 16px; border-radius:100px;
  font-size:12.5px; color:var(--ink-2);
  background:rgba(208,122,80,.14); border:1px solid rgba(208,122,80,.4);
}
.demo-banner b{ color:var(--clay-2); }
.demo-banner[hidden]{ display:none; }

/* unsaved-changes cue on the confirm bar */
.confirm-bar.has-unsaved{ border-color:var(--ball); box-shadow:var(--shadow-lg), 0 0 0 1px rgba(221,255,77,.25); }

.form-status.is-bad{ color:var(--no); }

.thanks-demo{ color:var(--clay-2); font-size:13px; }

/* ══════════ CONFIRM ══════════ */
.confirm-bar{
  position:sticky; bottom:14px; z-index:40;
  margin-top:20px; padding:15px 17px;
  border-radius:var(--r-lg);
  background:rgba(7,22,15,.9);
  border:1px solid var(--edge);
  backdrop-filter:blur(22px) saturate(160%); -webkit-backdrop-filter:blur(22px) saturate(160%);
  box-shadow:var(--shadow-lg);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.confirm-summary{ flex:1 1 180px; font-size:13.5px; color:var(--ink-2); min-width:0; }
.confirm-summary b{ color:var(--ball); font-weight:700; }
.btn--confirm{ flex:0 1 auto; width:auto; padding:14px 26px; }
@media (max-width:520px){ .btn--confirm{ width:100%; } }

.confirm-bar.is-shaking{ animation:shake .5s var(--ease); }
@keyframes shake{ 10%,90%{transform:translateX(-2px)} 20%,80%{transform:translateX(4px)} 30%,50%,70%{transform:translateX(-7px)} 40%,60%{transform:translateX(7px)} }

/* ══════════ THANKS ══════════ */
.thanks{
  margin-top:20px; padding:34px 26px; text-align:center;
  border-radius:var(--r-lg);
  background:linear-gradient(160deg, rgba(221,255,77,.14), rgba(255,255,255,.04));
  border:1px solid rgba(221,255,77,.35);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  animation:popIn .6s var(--spring);
}
.thanks-ball{ width:64px; height:64px; margin:0 auto 18px; animation:bounce 1.6s var(--ease) infinite; }
.thanks-ball svg{ width:100%; height:100%; filter:drop-shadow(0 8px 24px rgba(221,255,77,.5)); }
@keyframes bounce{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-14px) rotate(180deg)} }
.thanks h3{ font-size:clamp(23px,3.6vw,30px); margin-bottom:16px; }

/* itemised list of exactly what was just submitted */
.thanks-list{
  list-style:none; margin:0 auto 18px; padding:0;
  max-width:420px; text-align:left;
}
.thanks-list:empty{ display:none; }
.tl{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 14px; border-radius:12px; margin-bottom:7px;
  background:rgba(0,0,0,.24); border:1px solid var(--edge-soft);
}
.tl-date{ font-size:13.5px; color:var(--ink-2); }
.tl-ans{
  flex:none; font-size:12px; font-weight:800; letter-spacing:.04em;
  padding:4px 11px; border-radius:100px; white-space:nowrap;
}
.tl-ans em{ font-style:normal; font-weight:600; opacity:.85; }
.tl--in    .tl-ans{ background:rgba(107,227,138,.16); color:var(--ok); }
.tl--out   .tl-ans{ background:rgba(240,96,95,.16);  color:var(--no); }
.tl--maybe .tl-ans{ background:rgba(255,194,77,.16); color:var(--maybe); }
.tl--out .tl-date{ opacity:.6; }

@media (max-width:420px){
  .tl{ flex-direction:column; align-items:flex-start; gap:6px; }
}
.thanks p{ color:var(--ink-2); font-size:15px; max-width:44ch; margin:0 auto 20px; }

/* ══════════ FOOTER ══════════ */
.footer{ padding:60px 0 46px; text-align:center; border-top:1px solid var(--edge-soft); margin-top:40px; }
.footer-ball{ width:34px; height:34px; opacity:.5; margin-bottom:16px; }
.footer-line{ font-family:var(--font-d); font-size:14.5px; letter-spacing:-.01em; }
.footer-fine{ font-size:12.5px; color:var(--ink-3); margin-top:7px; }
.host-link{
  appearance:none; background:none; border:0; cursor:pointer;
  margin-top:22px; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(232,240,228,.2); font-family:var(--font-b);
}
.host-link:hover{ color:var(--ball); }

.footer-contact{
  margin-top:26px; padding-top:20px;
  border-top:1px solid var(--edge-soft);
  font-size:13.5px; color:var(--ink-2);
}
.footer-contact a{
  color:var(--ball); font-weight:600; text-decoration:none; white-space:nowrap;
  border-bottom:1px solid rgba(221,255,77,.35); padding-bottom:2px;
  margin-left:4px; transition:border-color .25s;
}
.footer-contact a:hover{ border-bottom-color:var(--ball); }

/* ══════════ MODALS ══════════ */
.modal{ position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; }
.modal[hidden]{ display:none; }
.modal-scrim{ position:absolute; inset:0; background:rgba(3,10,7,.78); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); animation:fadeIn .3s; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal-card{
  position:relative; width:min(430px,100%);
  max-height:88svh; overflow-y:auto;
  padding:32px 28px;
  border-radius:var(--r-xl);
  background:linear-gradient(160deg, var(--court-3), var(--court-2));
  border:1px solid var(--edge);
  box-shadow:var(--shadow-lg);
  animation:modalIn .45s var(--spring);
}
.modal-card--wide{ width:min(620px,100%); }
@keyframes modalIn{ from{opacity:0;transform:translateY(24px) scale(.96)} to{opacity:1;transform:none} }
.modal-card h2{ font-size:27px; margin-bottom:8px; }
.modal-sub{ color:var(--ink-2); font-size:14.5px; margin-bottom:22px; }
.modal-x{
  position:absolute; top:16px; right:18px;
  appearance:none; background:none; border:0; cursor:pointer;
  font-size:26px; line-height:1; color:var(--ink-3);
}
.modal-x:hover{ color:var(--ink); }
.modal-card .btn--wide + .btn--wide{ margin-top:8px; }

/* ══════════ HOST PANEL ══════════ */
.host-tabs{ display:flex; gap:6px; margin-bottom:20px; border-bottom:1px solid var(--edge-soft); }
.host-tab{
  appearance:none; background:none; border:0; cursor:pointer;
  padding:10px 15px; font-family:var(--font-b); font-size:14px; font-weight:600;
  color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px;
}
.host-tab.is-on{ color:var(--ball); border-bottom-color:var(--ball); }

.blast-grid{ display:flex; flex-direction:column; gap:9px; margin-top:6px; }
.blast{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-radius:var(--r-sm);
  background:var(--glass); border:1px solid var(--edge-soft);
  text-decoration:none; color:inherit;
  transition:border-color .25s, background .25s, transform .25s var(--spring);
}
.blast:hover{ border-color:var(--edge); background:var(--glass-2); transform:translateX(3px); }
.blast b{ display:block; font-size:14px; font-weight:700; }
.blast i{ display:block; font-style:normal; font-size:12px; color:var(--ink-3); margin-top:2px; }
.blast span{ flex:none; font-size:12px; font-weight:700; color:var(--ball); }

/* ---- Lineup tab ---- */
.lineup-out{ display:flex; flex-direction:column; gap:8px; }
.lu{
  border-radius:var(--r-sm); border:1px solid var(--edge-soft);
  background:rgba(0,0,0,.2); overflow:hidden;
}
.lu[open]{ border-color:var(--edge); }
.lu summary{
  display:flex; align-items:center; gap:10px; cursor:pointer;
  padding:12px 14px; list-style:none; user-select:none;
}
.lu summary::-webkit-details-marker{ display:none; }
.lu summary:hover{ background:rgba(255,255,255,.04); }
.lu-date{ flex:1; min-width:0; font-size:13.5px; font-weight:600; }
.lu-counts{ display:flex; gap:5px; flex:none; }
.lu-counts b{
  min-width:26px; text-align:center; font-size:12px; font-weight:800;
  padding:3px 7px; border-radius:7px;
}
.c-yes  { background:rgba(107,227,138,.16); color:var(--ok); }
.c-maybe{ background:rgba(255,194,77,.16);  color:var(--maybe); }
.c-no   { background:rgba(240,96,95,.16);   color:var(--no); }
.lu-open{
  flex:none; font-size:10.5px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3); min-width:52px; text-align:right;
}
.lu-playing{
  display:flex; flex-wrap:wrap; gap:6px;
  padding:0 14px 12px;
}
.lu-playing span{
  font-size:12px; font-weight:600; padding:4px 10px; border-radius:100px;
  background:rgba(107,227,138,.13); border:1px solid rgba(107,227,138,.3); color:var(--ok);
}
.lu-none{ padding:0 14px 12px; font-size:12.5px; color:var(--ink-3); }
.lu-detail{ padding:2px 14px 14px; border-top:1px solid var(--edge-soft); }
.lu[open] .lu-detail{ padding-top:12px; }
.lu:not([open]) .lu-detail{ display:none; }
.lu-grp{ margin-bottom:12px; }
.lu-grp h6{
  margin:0 0 6px; font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  font-family:var(--font-b); font-weight:800; color:var(--ink-3);
}
.lu-grp ul{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px; }
.lu-grp li{ font-size:12.5px; padding:4px 10px; border-radius:8px; background:rgba(255,255,255,.05); }
.lu-grp li em{ font-style:normal; opacity:.6; font-size:11px; }
.lu-grp--yes    li{ color:var(--ok); }
.lu-grp--backup li{ color:var(--clay-2); }
.lu-grp--maybe  li{ color:var(--maybe); }
.lu-grp--no     li{ color:var(--ink-3); }

/* ---- send-email buttons ---- */
.blast--send{
  width:100%; text-align:left; cursor:pointer; font-family:var(--font-b);
}
.blast--send:disabled{ opacity:.45; cursor:wait; }
.blast--send.is-sending span{ opacity:.5; }
.blast-status{ font-size:13px; margin-top:12px; min-height:1.2em; color:var(--ink-3); }
.blast-status.is-ok  { color:var(--ok); }
.blast-status.is-bad { color:var(--no); }
.blast-status.is-warn{ color:var(--maybe); }
.blast-manual{ margin-top:18px; border-top:1px solid var(--edge-soft); padding-top:14px; }
.blast-manual summary{ cursor:pointer; font-size:12.5px; color:var(--ink-3); margin-bottom:12px; }
.blast-manual summary:hover{ color:var(--ball); }
#blastDate{
  width:100%; padding:13px 15px; font-family:var(--font-b); font-size:15px; color:var(--ink);
  background:rgba(0,0,0,.28); border:1px solid var(--edge-soft); border-radius:var(--r-sm);
}
#blastDate:focus{ outline:none; border-color:var(--ball); }

.roster-tools{ display:flex; gap:8px; margin-bottom:16px; flex-wrap:wrap; }
.roster-out{ font-size:13.5px; }
.roster-day{ margin-bottom:18px; }
.roster-day h5{ font-family:var(--font-d); font-size:15px; margin:0 0 8px; color:var(--ball); }
.roster-day ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.roster-day li{
  display:flex; justify-content:space-between; gap:10px;
  padding:9px 12px; border-radius:10px; background:rgba(0,0,0,.22); border:1px solid var(--edge-soft);
}
.roster-day li em{ font-style:normal; font-size:11.5px; color:var(--ink-3); }
.roster-empty{ color:var(--ink-3); font-size:13.5px; }

/* ══════════ TOAST ══════════ */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,120%);
  z-index:200; padding:13px 22px; border-radius:100px;
  background:rgba(7,22,15,.96); border:1px solid var(--edge);
  color:var(--ink); font-size:14px; font-weight:600;
  box-shadow:var(--shadow-lg);
  transition:transform .5s var(--spring); pointer-events:none;
  max-width:min(420px,90vw); text-align:center;
}
.toast.is-on{ transform:translate(-50%,0); }

/* ══════════ REVEAL ══════════ */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
  .date-row{ opacity:1; transform:none; }
}