/* ─────────────────────────────────────────────────────────────────
 * DinkTracker Design System — shared CSS
 * Single source of truth for tokens, typography, frost-glass cards,
 * buttons, nav, footer, atmospheric video backdrop, reveal animations.
 * Page-specific layouts (hero, dashboard panels, leaderboard, etc.)
 * live in each page's inline <style> block.
 * ───────────────────────────────────────────────────────────────── */

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

:root{
  --cream:           #F5F0E8;
  --cream-warm:      #EFE5D0;

  --olive-deep:      #2D3820;
  --olive-ink:       #1F2818;
  --olive:           #5C6B3C;
  --olive-mid:       #7A8F55;
  --sage:            #A8B98C;
  --sage-light:      #C8D5B0;
  --sage-fog:        rgba(168, 185, 140, 0.22);

  --gold:            #C5A55A;
  --gold-deep:       #9B7E3A;
  --gold-warm:       #D4B976;
  --gold-glow:       rgba(197, 165, 90, 0.38);

  --dupr-navy:       #001762;
  /* DUPR brand blues — used wherever a rating, eyebrow, or accent renders
     so DUPR-sourced surfaces read as DUPR-blue (not the in-app olive). */
  --dupr-blue:       #1865F2;
  --dupr-blue-deep:  #0F47B8;

  --ink:             #1F2818;
  --ink-soft:        #4A5440;
  /* --ink-quiet darkened 2026-05-24 from #7F8773 (~3.5:1) to #65705C
     (~4.68:1) on --cream background per WCAG AA body-text floor. */
  --ink-quiet:       #65705C;

  /* Semantic gold-text — was #7d6020 hard-coded across 9+ surfaces. */
  --gold-text:       #7d6020;

  /* Red (destructive) — was #c0392b inline across 11+ surfaces. */
  --red:             #c0392b;
  --red-deep:        #8a2820;

  /* Bright success neon used by DUPR sync rows (was #7ed984 inline). */
  --olive-bright:    #7ed984;

  /* Success-positive (W/win badges, "Ready to start", "Played" pills).
     Consolidates the rogue greens #8a9e5a/#5a8d3f/#5a9e63/#2d5a2f/#3a7a3d
     into a single semantic. Sits between --olive (#5C6B3C) and --olive-mid
     (#7A8F55) — slightly brighter for badge/pill legibility on cream. */
  --success:         #8a9e5a;
  --success-dot:     #5a9e63;
  --success-dark:    #2d5a2f;

  --rad-card:        24px;
  --rad-pill:        999px;
  --rad-sm:          14px;
  --rad-md:          12px;
  --rad-lg:          18px;

  --ease-out:        cubic-bezier(0.16, 1, 0.3, 1);
}

html{scroll-behavior:smooth;background:var(--cream)}
body{
  font-family:'Geist', system-ui, -apple-system, sans-serif;
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  background:transparent;
}

/* ─── Fixed video backdrop (court mist) ────────────────────── */
.bg-video{
  position:fixed;inset:0;width:100vw;height:100vh;
  object-fit:cover;object-position:center center;
  z-index:-2;pointer-events:none;
}
.bg-veil{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:transparent;
}
@media (prefers-reduced-motion: reduce){
  .bg-video{display:none}
  body::before{
    content:'';position:fixed;inset:0;z-index:-3;
    background:url('/video/court-poster.jpg') center/cover no-repeat;
  }
}

/* ─── Typography ────────────────────────────────────────────── */
h1, h2{
  font-family:'Anton', 'Geist', sans-serif;
  font-weight:400;
  color:var(--olive-ink);
  text-transform:uppercase;
  letter-spacing:-0.005em;
  line-height:0.94;
}
h1{font-size:clamp(3.2rem, 8.4vw, 7.2rem);line-height:0.92}
h2{font-size:clamp(2.4rem, 5.4vw, 4.4rem);line-height:0.94}
h3{
  font-family:'Geist', sans-serif;
  color:var(--olive-ink);
  font-weight:800;
  font-size:1.18rem;
  text-transform:uppercase;
  letter-spacing:0.005em;
  line-height:1.15;
}

p{color:var(--ink-soft);font-size:1rem;line-height:1.6;font-weight:500}
.lead{font-size:clamp(1.05rem, 1.4vw, 1.18rem);line-height:1.5;color:var(--ink-soft);font-weight:500;max-width:54ch}
a{color:inherit;text-decoration:none}

.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Geist Mono', monospace;font-size:0.7rem;font-weight:600;
  letter-spacing:0.20em;text-transform:uppercase;color:var(--olive);
}
.eyebrow::before{content:'';width:26px;height:1px;background:var(--gold)}
.eyebrow.center::before{display:none}

/* ─── Frost glass card system ─────────────────────────────── */
.frost{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.34) 0%, rgba(255,255,255,0.18) 100%);
  -webkit-backdrop-filter:blur(56px) saturate(190%) brightness(112%);
  backdrop-filter:blur(56px) saturate(190%) brightness(112%);
  border:1px solid rgba(255,255,255,0.60);
  border-radius:var(--rad-card);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(15,20,16,0.10),
    0 1px 2px rgba(15,20,16,0.10),
    0 30px 70px -18px rgba(15,20,16,0.55),
    0 70px 160px -36px rgba(15,20,16,0.55);
  transition:transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), border-color 0.4s var(--ease-out);
}
.frost::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,0.45) 0%, transparent 30%);
  mix-blend-mode:overlay;
}
.frost:hover{
  transform:translateY(-3px);
  border-color:rgba(255,255,255,0.80);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 40px 100px -20px rgba(15,20,16,0.60),
    0 90px 200px -38px rgba(15,20,16,0.62);
}

.frost-gold{
  position:relative;
  background:linear-gradient(180deg, rgba(255,250,235,0.40) 0%, rgba(255,243,213,0.22) 100%);
  -webkit-backdrop-filter:blur(56px) saturate(190%) brightness(112%);
  backdrop-filter:blur(56px) saturate(190%) brightness(112%);
  border:1px solid rgba(197,165,90,0.65);
  border-radius:var(--rad-card);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 0 0 1px rgba(197,165,90,0.28),
    0 30px 80px -14px var(--gold-glow),
    0 70px 160px -32px rgba(197,165,90,0.60);
}
.frost-gold::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,0.5) 0%, transparent 32%);
  mix-blend-mode:overlay;
}

/* Solid frost for data-dense surfaces (leaderboards, tables, forms with
   small text where you need more contrast than the see-through baseline). */
.frost-solid{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.58) 100%);
  -webkit-backdrop-filter:blur(56px) saturate(190%) brightness(112%);
  backdrop-filter:blur(56px) saturate(190%) brightness(112%);
  border:1px solid rgba(255,255,255,0.70);
  border-radius:var(--rad-card);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    0 1px 2px rgba(15,20,16,0.10),
    0 30px 70px -18px rgba(15,20,16,0.55),
    0 70px 160px -36px rgba(15,20,16,0.55);
}
.frost-solid::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,0.55) 0%, transparent 28%);
  mix-blend-mode:overlay;
}

/* Dark frost (dashboards / at-court / OLED). Same material philosophy as
   .frost — translucent glass, blur, specular highlight — inverted for dark
   surfaces. Sage-tinted edge to thread the brand color through. */
.frost-dark{
  position:relative;
  background:linear-gradient(180deg, rgba(28,32,24,0.62) 0%, rgba(20,24,18,0.42) 100%);
  -webkit-backdrop-filter:blur(40px) saturate(140%);
  backdrop-filter:blur(40px) saturate(140%);
  border:1px solid rgba(168,185,140,0.18);
  border-radius:var(--rad-card);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    0 1px 2px rgba(0,0,0,0.35),
    0 20px 50px -16px rgba(0,0,0,0.65),
    0 60px 130px -36px rgba(0,0,0,0.55);
}
.frost-dark::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,0.06) 0%, transparent 32%);
  mix-blend-mode:overlay;
}

/* Dark frost solid — data-dense surfaces (match cards, standings rows). */
.frost-dark-solid{
  position:relative;
  background:linear-gradient(180deg, rgba(30,34,26,0.92) 0%, rgba(22,26,20,0.78) 100%);
  -webkit-backdrop-filter:blur(40px) saturate(140%);
  backdrop-filter:blur(40px) saturate(140%);
  border:1px solid rgba(168,185,140,0.22);
  border-radius:var(--rad-card);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 1px 2px rgba(0,0,0,0.4),
    0 20px 50px -16px rgba(0,0,0,0.7),
    0 60px 130px -36px rgba(0,0,0,0.55);
}
.frost-dark-solid::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(160deg, rgba(255,255,255,0.07) 0%, transparent 28%);
  mix-blend-mode:overlay;
}

/* ─── Buttons ──────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:15px 28px;border:none;cursor:pointer;
  font-family:'Geist', sans-serif;font-weight:600;font-size:0.92rem;
  border-radius:var(--rad-pill);
  transition:transform 0.25s var(--ease-out), background 0.25s var(--ease-out), box-shadow 0.25s var(--ease-out);
  white-space:nowrap;line-height:1;text-decoration:none;
}
.btn .arr{display:inline-block;transition:transform 0.3s var(--ease-out)}
.btn:hover .arr{transform:translateX(4px)}

.btn-gold{
  background:linear-gradient(180deg, var(--gold-warm), var(--gold));
  color:var(--olive-ink);
  box-shadow:0 10px 28px -8px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.5);
}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 18px 40px -8px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.6)}

.btn-ghost{
  background:rgba(255,255,255,0.30);color:var(--olive-ink);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  backdrop-filter:blur(18px) saturate(180%);
  border:1px solid rgba(255,255,255,0.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.75);
}
.btn-ghost:hover{background:rgba(255,255,255,0.45);transform:translateY(-1px)}

.btn-primary{
  background:var(--olive-ink);color:var(--cream);
  box-shadow:0 10px 28px -10px rgba(45,56,32,0.7), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn-primary:hover{background:var(--olive-deep);transform:translateY(-1px)}

.btn-danger{
  background:#c0392b;color:#fff;
  box-shadow:0 10px 28px -10px rgba(192,57,43,0.5), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn-danger:hover{background:#a03020;transform:translateY(-1px)}

.btn-sm{padding:11px 20px;font-size:0.82rem}
.btn-block{width:100%}

/* ─── Layout ──────────────────────────────────────────────── */
.container{max-width:1240px;margin:0 auto;padding:0 36px;position:relative;z-index:2}
.container-tight{max-width:900px;margin:0 auto;padding:0 36px;position:relative;z-index:2}
@media(max-width:768px){.container,.container-tight{padding:0 22px}}

.section{position:relative;padding:120px 0}
@media(max-width:768px){.section{padding:80px 0}}

/* ─── Reveal animations ──────────────────────────────────── */
@keyframes blurFadeUp{0%{opacity:0;filter:blur(14px);transform:translateY(28px)}100%{opacity:1;filter:blur(0);transform:translateY(0)}}
.reveal{opacity:0;animation:blurFadeUp 1s var(--ease-out) forwards}
.reveal-1{animation-delay:0.08s}
.reveal-2{animation-delay:0.18s}
.reveal-3{animation-delay:0.28s}
.reveal-4{animation-delay:0.38s}
.reveal-5{animation-delay:0.48s}
.scroll-reveal{opacity:0;transform:translateY(30px);filter:blur(10px);transition:opacity 1s var(--ease-out), transform 1s var(--ease-out), filter 1s var(--ease-out)}
.scroll-reveal.is-in{opacity:1;transform:translateY(0);filter:blur(0)}
@media (prefers-reduced-motion: reduce){.reveal, .scroll-reveal{animation:none;opacity:1;filter:none;transform:none;transition:none}*{transition-duration:0.001s !important;animation-duration:0.001s !important}}

/* ─── Nav (floating frost pill) ──────────────────────────── */
nav.dink-nav{
  position:fixed;top:18px;left:50%;transform:translateX(-50%);
  z-index:200;
  width:calc(100% - 40px);max-width:1180px;
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 12px 10px 22px;
  background:rgba(245,240,232,0.62);
  -webkit-backdrop-filter:blur(40px) saturate(180%);
  backdrop-filter:blur(40px) saturate(180%);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:var(--rad-pill);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 4px 14px rgba(15,20,16,0.10),
    0 24px 56px -18px rgba(15,20,16,0.40);
}
.nav-logo{display:inline-flex;align-items:center;font-family:'Geist',sans-serif}
.nav-logo .brand-wordmark{height:64px;width:auto;display:block}
.dink-nav .nav-logo .brand-wordmark{transform:translateY(-8px)}
.foot .nav-logo .brand-wordmark{height:72px}
@media(max-width:600px){.nav-logo .brand-wordmark{height:50px}.dink-nav .nav-logo .brand-wordmark{transform:translateY(-6px)}}

/* ─── Wordmark (web-font, replaces 292KB PNG) ──────────────
   Geist 800 + 0.06em letter-spacing per design-handoff. Same
   weight/spacing as the original PNG trace; no y-translate hack
   needed because text has no whitespace gutter above the cap-height.
   .dt-wordmark is the canonical class; size + color set by the
   container (e.g. .topbar-wordmark, .brand-wordmark, .login-wordmark).
*/
.dt-wordmark{
  font-family:'Geist','Inter',system-ui,-apple-system,sans-serif;
  font-weight:800;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--olive-deep,#2D3820);
  display:inline-block;
  line-height:1;
  white-space:nowrap;
  -webkit-font-smoothing:antialiased;
}
/* Marketing nav/footer use .brand-wordmark sizing; preserve those
   pixel-heights when an inner .dt-wordmark span replaces the PNG. */
.nav-logo .brand-wordmark.dt-wordmark{height:auto;font-size:2.1rem}
.dink-nav .nav-logo .brand-wordmark.dt-wordmark{transform:none}
.foot .nav-logo .brand-wordmark.dt-wordmark{font-size:2.4rem}
@media(max-width:600px){.nav-logo .brand-wordmark.dt-wordmark{font-size:1.6rem}.dink-nav .nav-logo .brand-wordmark.dt-wordmark{transform:none}}

.nav-links{display:flex;align-items:center;gap:6px}
.nav-links a:not(.btn){color:var(--ink-soft);font-size:0.86rem;font-weight:500;padding:8px 14px;border-radius:var(--rad-pill);transition:color 0.2s, background 0.2s}
.nav-links a:not(.btn):hover{color:var(--olive-ink);background:rgba(168,185,140,0.22)}
.nav-cta{margin-left:6px}

.nav-menu-btn{display:none;background:transparent;border:none;cursor:pointer;width:44px;height:44px;align-items:center;justify-content:center;color:var(--olive-ink)}
.nav-menu-btn svg{width:22px;height:22px}

.nav-mobile{display:none;position:fixed;top:84px;left:20px;right:20px;z-index:199;background:rgba(245,240,232,0.92);-webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);border:1px solid rgba(255,255,255,0.55);border-radius:24px;padding:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.85), 0 24px 60px rgba(15,20,16,0.32);flex-direction:column;gap:6px}
.nav-mobile.open{display:flex}
.nav-mobile a{padding:14px 16px;font-size:0.96rem;font-weight:500;color:var(--olive-ink);border-radius:14px;transition:background 0.2s}
.nav-mobile a:hover{background:rgba(168,185,140,0.25)}
.nav-mobile .btn{justify-content:center;margin-top:8px;width:100%}
/* Specificity rescue: .nav-mobile a forces color:olive-ink, which beats
   .btn-primary's color:cream — leaving "Create your league" as dark text
   on dark olive (invisible). Restore the cream label inside the mobile
   menu specifically. Anas flagged 2026-05-23. */
.nav-mobile a.btn-primary{color:var(--cream)}
.nav-mobile a.btn-primary:hover{background:var(--olive-deep);color:var(--cream)}
@media(max-width:780px){.nav-links-desktop{display:none}.nav-menu-btn{display:inline-flex}}

/* ─── Partner co-sign badge (DUPR) ──────────────────────── */
.partner-badge{
  display:inline-flex;align-items:center;gap:14px;
  padding:9px 16px 9px 14px;
  background:rgba(255,255,255,0.55);
  border:1px solid rgba(0,23,98,0.18);
  border-radius:var(--rad-pill);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.85), 0 4px 14px -4px rgba(0,23,98,0.18);
}
.partner-badge img{height:18px;width:auto;display:block}
.partner-badge .lbl{
  font-family:'Geist Mono',monospace;font-size:0.66rem;font-weight:700;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--dupr-navy);
  white-space:nowrap;
}
.partner-badge .sep{display:inline-block;width:1px;height:14px;background:rgba(0,23,98,0.22)}

/* Dark variant — restraint-tuned for dark surfaces (dashboard, app).
   DUPR brand guide allows white wordmark on dark; we filter the navy
   asset to white at render time so we don't carry a second PNG. */
.partner-badge.dark{
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06);
}
.partner-badge.dark .lbl{color:#cfcfcf;letter-spacing:0.08em;font-weight:600}
.partner-badge.dark .sep{background:rgba(255,255,255,0.18)}
.partner-badge.dark img{filter:brightness(0) invert(1);opacity:0.92}

/* ─── Icon sprite (status iconography) ─────────────────────
   Replaces unicode emoji glyphs (per feedback_no_emojis). Each consumer
   inlines the sprite from /img/icons.svg once per page (so #ids resolve
   without an extra HTTP round-trip) and renders an instance with
     <svg class="icon icon-NAME"><use href="#icon-NAME"/></svg>
   Stroke + fill inherit currentColor so existing color styles cascade. */
.icon{
  display:inline-block;
  width:1em;height:1em;
  vertical-align:-0.15em;
  fill:none;
  stroke:currentColor;
  flex-shrink:0;
}
.icon-sm{font-size:0.85em}
.icon-md{font-size:1em}
.icon-lg{font-size:1.5em}
/* dots + bang + warn use filled glyphs inside the symbol — let them paint. */
.icon-dots, .icon-dots use{fill:currentColor;stroke:none}

/* ─── Forms (shared input/label conventions) ─────────────── */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-family:'Geist Mono',monospace;font-size:0.66rem;font-weight:600;letter-spacing:0.18em;text-transform:uppercase;color:var(--olive)}
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=tel], .field input[type=number], .field select, .field textarea{
  width:100%;padding:14px 16px;font-family:'Geist',sans-serif;font-size:1rem;font-weight:500;color:var(--olive-ink);
  background:rgba(255,255,255,0.78);
  border:1px solid rgba(45,56,32,0.18);
  border-radius:12px;
  transition:border-color 0.2s, background 0.2s, box-shadow 0.2s;
  -webkit-appearance:none;appearance:none;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--olive);
  background:rgba(255,255,255,0.95);
  box-shadow:0 0 0 3px rgba(168,185,140,0.25);
}
.field .hint{font-family:'Geist Mono',monospace;font-size:0.66rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-quiet)}
.field .err{font-size:0.85rem;color:#c0392b;font-weight:600;margin-top:4px}

/* Code-style input (six-char join code, OTP, etc) */
.field input.code{
  font-family:'Geist Mono',monospace;font-size:1.6rem;font-weight:700;
  text-align:center;letter-spacing:0.2em;text-transform:uppercase;
  padding:18px 16px;
}

/* ─── Footer ─────────────────────────────────────────────── */
footer.dink-foot{
  position:relative;z-index:5;
  background:rgba(245,240,232,0.85);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  padding:36px 0;
  border-top:1px solid rgba(45,56,32,0.08);
}
.foot{max-width:1240px;margin:0 auto;padding:0 36px;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.foot .nav-logo{font-size:1rem}
.foot-links{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.foot-links a{font-family:'Geist Mono',monospace;font-size:0.7rem;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-quiet);transition:color 0.2s}
.foot-links a:hover{color:var(--olive-ink)}
.foot-legal{font-family:'Geist Mono',monospace;font-size:0.66rem;font-weight:500;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink-quiet)}
@media(max-width:680px){.foot{flex-direction:column;align-items:flex-start;gap:18px}}

/* ─── Auth/entry-flow centered card layout ──────────────── */
.entry-page{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:140px 22px 80px;
}
.entry-card{
  width:100%;max-width:460px;
  padding:44px 40px;
}
.entry-card.wide{max-width:640px}
.entry-card h1{font-size:clamp(2.4rem, 5vw, 3.4rem);line-height:0.95;margin:14px 0 10px}
.entry-card .lead{margin-bottom:24px}
.entry-card .eyebrow{margin-bottom:6px}
.entry-card .partner-badge{margin-bottom:20px}
@media(max-width:480px){.entry-card{padding:32px 24px}}

/* ─────────────────────────────────────────────────────────────────
 * DASHBOARD PRIMITIVES — shared between player + organizer dashboards
 * ─────────────────────────────────────────────────────────────────
 * Canonical visual vocabulary for the in-app dashboards. Both player
 * (site/dashboard) and organizer (site/organizer) link this stylesheet
 * and use the same classes for pills, chips, modals, and bottom sheets
 * so a tweak here updates every surface.
 *
 * Class prefixes:
 *   .pill / .pill-*    status/tag indicators (Active/Paid/Dropped/etc.)
 *   .dt-chip           filter chips (toggleable, "show only X")
 *   .dt-modal-*        centered confirm modal (yes/no decisions)
 *   .dt-sheet-*        bottom-sheet (pick from list of actions)
 *
 * Each component is meant to be composed into per-page DOM by JS, but
 * the visual treatment is locked here. Don't override these in page
 * <style> blocks — extend by adding modifier classes.
 * ───────────────────────────────────────────────────────────────── */

/* Pills — small inline status indicators. Used by player Account-tab
   chips, organizer Players-roster status/level cells, anywhere a
   colored tag conveys state. */
.pill{
  font-family:'Geist Mono',monospace;display:inline-block;
  padding:4px 12px;border-radius:var(--rad-pill,999px);
  font-size:0.66rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
}
.pill-olive{background:rgba(138,158,90,0.22);color:var(--olive-deep)}
.pill-amber{background:rgba(212,160,23,0.18);color:var(--gold-text);border:1px solid rgba(212,160,23,0.40)}
.pill-red{background:rgba(192,57,43,0.14);color:var(--red-deep);border:1px solid rgba(192,57,43,0.40)}
.pill-gray{background:rgba(45,56,32,0.08);color:var(--ink-quiet)}
.pill-blue{background:rgba(24,101,242,0.14);color:var(--dupr-blue-deep);border:1px solid rgba(24,101,242,0.40)}

/* Filter chips — toggleable, off-state is muted, on-state is olive-ink.
   The .count span inside renders a smaller counter so a chip can carry
   "Active 26" or "L2 8" without competing with the label. */
.dt-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;border-radius:var(--rad-pill,999px);
  background:rgba(45,56,32,0.06);border:1px solid rgba(45,56,32,0.18);
  color:var(--ink-soft);font-family:'Geist Mono',monospace;
  font-size:0.7rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  cursor:pointer;min-height:32px;line-height:1;
  -webkit-tap-highlight-color:transparent;
}
.dt-chip:hover{background:rgba(45,56,32,0.10);border-color:rgba(45,56,32,0.30)}
.dt-chip.is-active{background:var(--olive-ink);border-color:var(--olive-ink);color:var(--cream)}
.dt-chip .count{font-family:'Geist Mono',monospace;opacity:0.75;font-weight:500}

/* Centered confirm modal — yes/no decisions with optional input. The
   shell lives in CSS; per-page JS builds the inner content. Backdrop
   uses position:fixed inset:0 so it covers everything underneath. */
.dt-modal-backdrop{
  position:fixed;inset:0;background:rgba(15,20,16,0.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;
}
.dt-modal-card{
  background:linear-gradient(180deg,rgba(255,255,255,0.34) 0%,rgba(255,255,255,0.18) 100%);
  -webkit-backdrop-filter:blur(40px) saturate(180%);backdrop-filter:blur(40px) saturate(180%);
  border:1px solid rgba(255,255,255,0.60);border-radius:var(--rad-card,24px);
  padding:28px;max-width:400px;width:100%;text-align:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.85),0 30px 70px -18px rgba(15,20,16,0.40);
}

/* Bottom-sheet modal — for "pick from a list of actions" patterns.
   On mobile, rises from the bottom edge (align-items:flex-end). Each
   row inside is a full-width button via .dt-sheet-row. */
.dt-sheet-backdrop{
  position:fixed;inset:0;background:rgba(15,20,16,0.55);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  z-index:200;display:flex;align-items:flex-end;justify-content:center;padding:0;
}
.dt-sheet-card{
  background:linear-gradient(180deg,rgba(255,255,255,0.96) 0%,rgba(248,243,232,0.94) 100%);
  border-top:1px solid rgba(45,56,32,0.20);border-radius:20px 20px 0 0;
  padding:18px 0 12px;width:100%;max-width:520px;max-height:80dvh;overflow-y:auto;
  box-shadow:0 -20px 60px -10px rgba(15,20,16,0.40);
}
.dt-sheet-row{
  display:block;width:100%;padding:14px 16px;background:transparent;
  border:none;border-top:1px solid rgba(45,56,32,0.10);
  text-align:left;color:var(--olive-ink);font-size:0.95rem;font-weight:600;
  cursor:pointer;font-family:inherit;min-height:48px;
  -webkit-tap-highlight-color:transparent;
}
.dt-sheet-row:first-of-type{border-top:none}
.dt-sheet-row:hover{background:rgba(92,107,60,0.06)}
.dt-sheet-row.is-danger{color:var(--red-deep)}
.dt-sheet-row.is-cancel{text-align:center;color:var(--ink-quiet);font-weight:600}