/* ══════════════════════════════════════════════════════
   TennisAC — shared theme
   Cream court, terracotta-orange accent, Barlow Condensed display type.
   Used by every page for nav, buttons, cards, chips and motion.
════════════════════════════════════════════════════════ */

:root{
  --cream:#FFF7F0;
  --ink:#150800;
  --accent:#FF4800;
  --accent-2:#FF6A00;
  --accent-3:#FF2E00;
  --accent-deep:#C82800;
  --border:rgba(255,80,0,.16);
  --border-soft:rgba(255,80,0,.1);
  --muted:#7A4030;
  --muted-2:#A07060;
  --muted-3:#B08070;
  --muted-4:#C09080;

  --dark-1:#140600;
  --dark-2:#2A1000;
  --dark-3:#180800;
  --on-dark:#FFF3EC;
  --on-dark-muted:rgba(255,200,170,.62);

  --good:#5B9B23;
  --good-bg:rgba(139,195,74,.16);
  --ok:#C8811E;
  --ok-bg:rgba(226,169,60,.16);
  --bad:#C8362B;
  --bad-bg:rgba(216,68,50,.14);

  --radius:18px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{min-height:100%}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.disp{font-family:'Barlow Condensed',sans-serif}
.serif-em{font-family:'DM Serif Display',serif;font-style:italic}

/* ── Nav ─────────────────────────────────────────────── */
.site-nav{
  position:sticky;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(20px,5vw,48px);height:68px;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .4s,border-color .4s,backdrop-filter .4s;
}
.site-nav.is-solid{
  background:rgba(255,247,240,.85);
  backdrop-filter:blur(20px) saturate(1.4);
  border-bottom:1px solid var(--border-soft);
}
.nav-logo{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:26px;
  letter-spacing:-.01em;color:var(--ink);text-decoration:none;display:inline-flex;
}
.nav-logo span{color:var(--accent)}
.nav-right{display:flex;align-items:center;gap:6px}
.nav-user-chip{
  display:flex;align-items:center;gap:10px;padding:8px 16px;border-radius:100px;
  background:var(--accent-soft,rgba(255,72,0,.07));border:1.5px solid var(--border);
  margin-right:6px;
}
.nav-avatar{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,#FF8000,#FF2800);
  display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10.5px;
  letter-spacing:.04em;color:#fff;
}
.nav-user-chip span.name{font-size:13px;font-weight:500;color:var(--ink)}
.nav-dot{width:6px;height:6px;border-radius:50%;background:#4CAF50;animation:pulse-ring 2s ease-in-out infinite}
.nav-link{
  font-size:13px;color:var(--muted-2);text-decoration:none;font-weight:600;
  padding:8px 14px;border-radius:8px;transition:color .15s;
}
.nav-link:hover{color:var(--ink)}
.nav-sub{font-size:11px;color:var(--muted-3);text-transform:uppercase;letter-spacing:.14em;margin-top:2px}

/* ── Eyebrow / section markers ──────────────────────── */
.eyebrow{
  display:flex;align-items:center;gap:12px;margin-bottom:20px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--accent);
}
.eyebrow::before{content:"";display:block;width:32px;height:1.5px;background:currentColor}
.eyebrow.on-dark{color:#FF7050}
.big-num{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;line-height:1;
  letter-spacing:-.04em;color:rgba(255,80,0,.1);user-select:none;
}

/* ── Buttons ─────────────────────────────────────────── */
.btn-cta{
  position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;
  gap:8px;text-decoration:none;border:none;cursor:pointer;
  padding:18px 44px;border-radius:100px;
  background:linear-gradient(135deg,var(--accent-2),var(--accent-3));
  color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:16px;
  letter-spacing:.16em;text-transform:uppercase;
  box-shadow:0 10px 36px rgba(255,60,0,.38);
  transition:transform .2s ease,box-shadow .2s ease;
}
.btn-cta::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  background-size:300% 100%;animation:shimmer 2.6s linear infinite;
}
.btn-cta:hover{transform:translateY(-3px);box-shadow:0 16px 44px rgba(220,60,0,.5)}
.btn-cta:active{transform:translateY(-1px)}
.btn-cta:disabled{opacity:.65;cursor:not-allowed;transform:none}
.btn-cta.full{width:100%}

/* ── Panels / cards ──────────────────────────────────── */
.panel{
  background:#fff;border:1px solid var(--border-soft);border-radius:var(--radius);
  padding:clamp(22px,4vw,36px);
  box-shadow:0 24px 48px -28px rgba(120,50,0,.25);
}

/* ── Chips ───────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:9px;padding:11px 20px;border-radius:100px;
  background:#fff;border:1.5px solid var(--border);
  box-shadow:0 2px 12px rgba(0,0,0,.04);
}
.chip .k{
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted-3);
}
.chip .v{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:16px;color:var(--ink)}
.chip.chip-solid{
  padding:13px 26px;border:none;
  background:linear-gradient(135deg,var(--accent-2),var(--accent-3));
  box-shadow:0 8px 28px rgba(255,70,0,.32);
}
.chip.chip-solid .k{color:rgba(255,255,255,.65)}
.chip.chip-solid .v{color:#fff;font-size:20px}

/* ── Dark band section ───────────────────────────────── */
.dark-band{
  position:relative;overflow:hidden;color:var(--on-dark);
  background:linear-gradient(160deg,var(--dark-1) 0%,var(--dark-2) 45%,var(--dark-3) 100%);
}

/* ── Marquee ─────────────────────────────────────────── */
.marquee-band{overflow:hidden;background:var(--accent);padding:14px 0}
.marquee-band.dark{background:var(--dark-1)}
.marquee-track{display:flex;white-space:nowrap;width:max-content;animation:marquee 24s linear infinite}
.marquee-track span{
  font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:13px;
  letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.55);
  padding-right:3.5rem;
}
.marquee-band.dark .marquee-track span{color:rgba(255,255,255,.4)}

/* ── Footer ──────────────────────────────────────────── */
.site-footer{
  border-top:1px solid var(--border-soft);padding:28px clamp(20px,5vw,48px);
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;
  background:var(--cream);
}
.site-footer .foot-logo{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:20px}
.site-footer .foot-logo span{color:var(--accent)}
.site-footer p{font-size:12px;color:var(--muted-3);margin:0;letter-spacing:.05em}

/* ── Scroll progress ─────────────────────────────────── */
.scroll-progress-track{position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;background:rgba(255,80,0,.1);pointer-events:none}
.scroll-progress-fill{height:100%;width:0%;background:linear-gradient(90deg,#FF8000,#FF3500);box-shadow:0 0 8px #FF5A00;transition:width .1s linear}

/* ── Grain ───────────────────────────────────────────── */
.grain{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.045}

/* ── Reveal on scroll ────────────────────────────────── */
.rev{opacity:0;transform:translateY(48px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.rev.on{opacity:1;transform:none}
.d1{transition-delay:.08s!important}
.d2{transition-delay:.16s!important}
.d3{transition-delay:.24s!important}
.d4{transition-delay:.32s!important}
.d5{transition-delay:.4s!important}

/* ── Inputs (auth / forms) ──────────────────────────── */
.field-group + .field-group{margin-top:22px}
.field-label{
  display:block;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted-3);margin-bottom:12px;
}
.input{
  width:100%;background:#fff;border:1.5px solid var(--border);border-radius:12px;
  padding:14px 16px;color:var(--ink);font-family:'Inter',sans-serif;font-size:15px;
  box-shadow:inset 0 1px 3px rgba(120,50,0,.04);transition:border-color .15s,box-shadow .15s;
}
.input::placeholder{color:var(--muted-4)}
.input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(255,72,0,.12)}
select.input{
  appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted-3) 50%),linear-gradient(135deg,var(--muted-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 21px,calc(100% - 13px) 21px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:38px;
}
textarea.input{resize:vertical}

.radio-group{display:flex;flex-wrap:wrap;gap:10px}
.radio-opt{position:relative;cursor:pointer}
.radio-opt input{position:absolute;opacity:0;pointer-events:none}
.radio-opt span{
  display:inline-block;background:#fff;border:1.5px solid var(--border);border-radius:100px;
  padding:11px 18px;font-size:13.5px;font-weight:500;color:var(--ink);transition:all .15s;
}
.radio-opt:hover span{border-color:var(--muted-4)}
.radio-opt input:checked + span{
  background:rgba(255,72,0,.09);border-color:var(--accent);box-shadow:0 0 0 1px var(--accent) inset;color:var(--accent-deep);font-weight:700;
}
.radio-opt input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

.flash-msg{
  background:var(--bad-bg);border:1px solid rgba(216,68,50,.4);color:var(--bad);
  font-size:13.5px;padding:13px 16px;border-radius:12px;margin-bottom:20px;
}

/* Agreement checkbox (privacy policy on signup) */
.agree{display:flex;align-items:flex-start;gap:11px;margin-top:20px;font-size:13.5px;line-height:1.5;color:var(--muted);cursor:pointer}
.agree input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}
.agree a{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(255,72,0,.35)}
.agree a:hover{border-bottom-color:var(--accent)}

/* ── Dropzone ────────────────────────────────────────── */
.dropzone{position:relative;margin-top:6px}
.dz-inner{
  border:2px dashed var(--border);border-radius:20px;background:#fff;
  padding:52px 24px;text-align:center;transition:all .18s;
}
.dropzone:hover .dz-inner,.dropzone.dragover .dz-inner{border-color:var(--accent);background:rgba(255,72,0,.05)}
.dz-icon{display:flex;justify-content:center;margin-bottom:14px;color:var(--accent)}
.dz-text{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:19px;letter-spacing:.03em;text-transform:uppercase;margin:0}
.dz-sub{color:var(--muted-3);font-size:12.5px;margin-top:6px;letter-spacing:.03em}
.dropzone input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.tip{color:var(--muted-3);font-size:12.5px;margin-top:12px}
.hidden{display:none}

/* ── Keyframes ───────────────────────────────────────── */
@keyframes float-a{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-22px,-30px) scale(1.06)}66%{transform:translate(18px,14px) scale(.96)}}
@keyframes float-b{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(20px,-18px) scale(1.04)}60%{transform:translate(-14px,26px) scale(.98)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes spin-r{to{transform:rotate(-360deg)}}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes word-in{from{opacity:0;transform:translateY(60%) skewY(3deg)}to{opacity:1;transform:translateY(0) skewY(0)}}
@keyframes pulse-ring{0%{box-shadow:0 0 0 0 rgba(255,80,0,.5)}70%{box-shadow:0 0 0 14px rgba(255,80,0,0)}100%{box-shadow:0 0 0 0 rgba(255,80,0,0)}}
@keyframes pulse-border{0%,100%{border-color:rgba(255,80,0,.25)}50%{border-color:rgba(255,80,0,.9)}}
@keyframes scan-line{0%{top:-4px;opacity:0}10%{opacity:.5}90%{opacity:.5}100%{top:100%;opacity:0}}
@keyframes shimmer{0%{background-position:-300% center}100%{background-position:300% center}}
@keyframes nav-in{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:translateY(0)}}
@keyframes count-in{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}

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