/* ═══════════════════════════════════════════════════════════════════
   MatchMode — Shared Design System
   theme.css · v1.0

   Import in every screen BEFORE the Tailwind config script:
     <link href="theme.css" rel="stylesheet">

   Tailwind config in each screen maps custom tokens to these vars:
     "background-dark":   "var(--c-bg)"
     "surface":           "var(--c-surface)"
     "border-subtle":     "var(--c-border)"
     "foreground":        "var(--c-text)"
     "foreground-heading":"var(--c-text-heading)"
     "text-muted":        "var(--c-muted)"
     "secondary":         "var(--c-secondary)"
═══════════════════════════════════════════════════════════════════ */


/* ── 1. Design Tokens ──────────────────────────────────────────── */

:root {
  /* Backgrounds */
  --c-bg: #F8FAFC;
  /* Slate 50  — soft matte, no glare       */
  --c-surface: #FFFFFF;
  /* Pure white — pops on Slate 50           */

  /* Borders — use sparingly in dark mode; let surface elevation carry it   */
  --c-border: #E2E8F0;
  /* Slate 200                               */

  /* Typography — two-tier approach for light-mode softness                 */
  --c-text-heading: #0F172A;
  /* Slate 950 — player names, key numbers   */
  --c-text: #334155;
  /* Slate 700 — body / general text (soft)  */
  --c-muted: #64748B;
  /* Slate 500 — 7.6:1 contrast on white ✓  */

  /* Brand (same across modes) */
  --c-primary: #1A75FF;
  /* Electric Blue — identity, nav, links    */
  --c-secondary: #F59E0B;
  /* Amber — achievements, key metrics, CTAs */

  /* State colors */
  --c-error: #f87171;           /* Red 400 — error text / icon              */
  --c-error-surface: #2a1515;   /* Dark red — error toast background        */
  --c-success: #22c55e;         /* Green 500 — success states               */
  --c-destructive: #ef4444;     /* Red 500 — destructive action hover       */

  /* Browser chrome */
  color-scheme: light;
}

.dark {
  --c-bg: #081117;
  /* Deep Space — warm tint, no pure-black   */
  --c-surface: #121E26;
  /* Slate — visible lift from bg   */
  --c-border: #1E2F3A;
  /* Very subtle — let color do the work     */
  --c-text-heading: #F1F5F9;
  /* Slate 100                               */
  --c-text: #CBD5E1;
  /* Slate 300 — comfortable dark reading    */
  --c-muted: #94A3B8;
  /* Slate 400 — more visible in dark        */
  --c-primary: #1A75FF;
  --c-secondary: #F59E0B;

  /* State colors (same values — semantic meaning is mode-agnostic) */
  --c-error: #f87171;
  --c-error-surface: #2a1515;
  --c-success: #22c55e;
  --c-destructive: #ef4444;

  color-scheme: dark;
}


/* ── 2. Base ────────────────────────────────────────────────────── */

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

body {
  background-color: var(--c-bg);
  color: var(--c-text);
}


/* ── 3. Reduced Motion ──────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ── 4. Touch optimisation ──────────────────────────────────────── */
/* Removes the ~300 ms tap delay on mobile browsers                  */

a,
button,
[role="button"],
input,
select,
textarea,
label {
  touch-action: manipulation;
}


/* ── 5. Focus rings ─────────────────────────────────────────────── */
/* Replace bare outline:none with a visible ring                     */

.gameon-input {
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gameon-input:focus-visible {
  border-color: var(--c-primary) !important;
  box-shadow: 0 0 0 3px rgba(26, 117, 255, 0.20);
}


/* ── 6. Gradient Buttons ────────────────────────────────────────── */

/* Primary flat — use var(--c-primary) with shadow depth              */
/* Use for: View Details, Save, Confirm, primary page actions        */
.btn-gradient {
  background: var(--c-primary);
  color: #ffffff !important;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(26, 117, 255, 0.28);
  border: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.btn-gradient:hover {
  box-shadow: 0 8px 24px rgba(26, 117, 255, 0.38);
}

.btn-gradient:active {
  transform: scale(0.97);
  box-shadow: 0 2px 8px rgba(26, 117, 255, 0.20);
}

.dark .btn-gradient {
  box-shadow: 0 4px 16px rgba(26, 117, 255, 0.20);
}

.dark .btn-gradient:hover {
  box-shadow: 0 8px 24px rgba(26, 117, 255, 0.30);
}

/* CTA action — amber                                                */
/* Use for: Register Now, Pay, highest-priority single action/screen */
.btn-cta-action {
  background: var(--c-secondary);
  color: #0D1117 !important;
  font-weight: 800;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.28);
  border: none;
  cursor: pointer;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.btn-cta-action:hover {
  box-shadow: 0 10px 28px rgba(245, 158, 11, 0.40);
}

.btn-cta-action:active {
  transform: scale(0.97);
}


/* ── 7. Surface Cards — smart borders ───────────────────────────── */
/*                                                                    */
/*  Light mode: surface (#FFF) sits on bg (#F8FAFC) — very similar,  */
/*              so a border + soft shadow is needed for separation.   */
/*                                                                    */
/*  Dark mode:  surface (#121E26) vs bg (#081117) — a clear tonal     */
/*              lift already separates them. Borders create noise.    */

.gameon-card {
  background: var(--c-surface);
  border-radius: 14px;
  transition: background 0.2s ease;
}

/* Light mode — border + shadow */
:root:not(.dark) .gameon-card {
  border: 1px solid var(--c-border);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* Dark mode — no border, rely on elevation */
.dark .gameon-card {
  border: 1px solid transparent;
  box-shadow: none;
}


/* ── 8. Modal / Overlay ─────────────────────────────────────────── */
/* Prevents scroll bleeding through to the page on iOS / Android     */

.gameon-overlay {
  overscroll-behavior: contain;
}


/* ── 9. Semantic Badges ─────────────────────────────────────────── */

/* Category / format chip — blue tinted */
.tag-primary {
  display: inline-flex;
  align-items: center;
  background: rgba(26, 117, 255, 0.10);
  color: #4D9FFF;
  border: 1px solid rgba(26, 117, 255, 0.20);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 9999px;
}

/* Achievement / urgency delta badge — amber tinted */
.badge-secondary {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(245, 158, 11, 0.12);
  color: var(--c-secondary);
  border: 1px solid rgba(245, 158, 11, 0.22);
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
}

/* Status "You're In" — blue */
.badge-primary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(26, 117, 255, 0.10);
  color: var(--c-primary);
  border: 1px solid rgba(26, 117, 255, 0.22);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 9999px;
}


/* ── 10. Scrollbar suppression ──────────────────────────────────── */

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}


/* ── 11. Bottom Navigation — Standard ──────────────────────────── */
/*                                                                    */
/*  Shared by all player and organizer screens.                       */
/*  Active item:   .nav-item.active → uses --c-primary               */
/*  Inactive item: .nav-item        → uses --c-muted                 */
/*  Hover:         .nav-item:hover  → uses --c-text                  */
/*                                                                    */
/*  Safe-area: expands on iPhone X+ (home bar).                      */
/*  Requires viewport-fit=cover in the <meta viewport> tag.          */

.gameon-bottom-nav,
.matchmode-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.gameon-bottom-nav-inner,
.matchmode-bottom-nav-inner {
  display: flex;
  height: 3.5rem;
  align-items: center;
  justify-content: space-around;
  padding-top: 0.5rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  max-width: 42rem;
  margin-inline: auto;
  width: 100%;
}

.nav-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 4rem;
  color: var(--c-muted);
  text-decoration: none;
  transition: color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.nav-item:hover {
  color: var(--c-text);
}

.nav-item.active {
  color: var(--c-primary);
}

.nav-item .nav-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}

.nav-item .nav-icon {
  font-size: 24px;
  line-height: 1;
}


/* ── 12. Page Loader Overlay ────────────────────────────────────── */
/*                                                                    */
/*  Block animation while a page loads or data fetches.              */
/*  loader.js manages show/hide; screens call MatchModeLoader.hide()    */
/*  once their data is ready.                                        */

#go-loader {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.35s ease;
}

#go-loader.go-loader-hiding {
  opacity: 0;
  pointer-events: none;
}

#go-loader.go-loader-gone {
  display: none;
}

.go-loader-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.go-loader-row {
  display: flex;
  gap: 5px;
}

.go-lb {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  background-color: var(--c-border);
  opacity: 0;
  animation: goBlockFade 2.2s ease-in-out infinite both;
}

/* Staggered delays — bottom row first (row-3), apex last (row-1)      */
/* Each cycle is 2.2s; delays are spread across the first 1.0s so      */
/* blocks cascade upward then all fade out together before looping.    */
.go-loader-row.row-3 .go-lb:nth-child(1) { animation-delay: 0.00s; }
.go-loader-row.row-3 .go-lb:nth-child(2) { animation-delay: 0.10s; }
.go-loader-row.row-3 .go-lb:nth-child(3) { animation-delay: 0.20s; }
.go-loader-row.row-2 .go-lb:nth-child(1) { animation-delay: 0.50s; }
.go-loader-row.row-2 .go-lb:nth-child(2) { animation-delay: 0.60s; }
.go-loader-row.row-1 .go-lb:nth-child(1) { animation-delay: 1.00s; }

@keyframes goBlockFade {
  /* Fade in from below */
  0% {
    opacity: 0;
    transform: translateY(6px);
    background-color: var(--c-border);
    box-shadow: none;
  }

  /* Settled — neutral */
  18% {
    opacity: 1;
    transform: translateY(0);
    background-color: var(--c-border);
    box-shadow: none;
  }

  /* Electric blue pulse */
  38% {
    opacity: 1;
    background-color: #1A75FF;
    box-shadow: 0 0 10px rgba(26, 117, 255, 0.7);
  }

  /* Amber glow peak */
  60% {
    opacity: 1;
    background-color: #F59E0B;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.7);
  }

  /* Fade out — returns to invisible so loop restarts cleanly */
  85% {
    opacity: 0;
    background-color: var(--c-border);
    box-shadow: none;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    background-color: var(--c-border);
    box-shadow: none;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .go-lb {
    animation: none !important;
    opacity: 1 !important;
    background-color: #F59E0B !important;
    box-shadow: none !important;
  }
}