/* ==========================================================================
   CARTESIAN CLASH — FORMALIZED UI & COLOR DESIGN SYSTEM
   Single Source of Truth for Design Tokens, Themes, and Components
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LIGHT THEME (Warm Risograph Graph Paper)
   Default palette inspired by mathematical textbooks & two-ink print
   -------------------------------------------------------------------------- */
:root,
body.theme-light,
[data-theme="light"] {
  /* Surfaces & Paper Backgrounds */
  --gw-bg-paper:        #E2E5DE; /* Authentic warm risograph base sheet */
  --gw-bg-deep:         #D5DAD1; /* Recessed gutters, tool wells, side rails */
  --gw-bg-lift:         #EDEFE9; /* Elevated cards, modals, dialog panels */
  --gw-bg-overlay:      rgba(20, 26, 23, 0.65); /* Modal backdrops */

  /* Mathematical Coordinate Rules */
  --gw-rule:            #A9B1A7; /* Risograph printed graph paper grid lines */
  --gw-rule-accent:     #828D80; /* Major axes (x=0, y=0) */

  /* Inks & Typography */
  --gw-ink:             #141A17; /* High-density carbon black printing ink */
  --gw-ink-muted:       #535D57; /* Secondary labels, subtitles (passes WCAG AA) */
  --gw-ink-subtle:      #79857E; /* Captions, registration marks, hints */
  --gw-ink-invert:      #EDEFE9; /* High-contrast text on dark buttons */

  /* Tactile Borders */
  --gw-border-ink:      #141A17; /* Solid bold tactile 2px border */
  --gw-border-hairline: #A9B1A7; /* Subtle interior panel divider */
  --gw-border-focus:    #1B3FD8; /* Keyboard accessibility focus ring */

  /* Tactile Action Accents */
  --gw-yellow:          #FFDE00; /* Primary arcade tactile PLAY yellow */
  --gw-yellow-shadow:   #CA8A04; /* Deep bevel shadow for yellow action buttons */
  --gw-yellow-hover:    #FEE135; /* Hover brighten for yellow */
  --gw-flo:             #FF4A18; /* Fluorescent vermilion / Team Omega / Danger */
  --gw-flo-shadow:      #C23007; /* Shadow for vermilion elements */
  --gw-blue:            #1B3FD8; /* Alpha blue / Primary coordinate ink */
  --gw-gold:            #EAB308; /* Star points / Currency / Rank badges */
  --gw-gold-shadow:     #A16207; /* Shadow for gold badges */
  --gw-green:           #10B981; /* Solved / success ink */
  --gw-on-accent:       #EDEFE9; /* Text on a blue or vermilion fill */
  --gw-on-yellow:       #141A17; /* Text on the arcade yellow, both themes */

  /* Team Battle Inks (Calculated for greyscale & colorblind accessibility) */
  --gw-team-0:          #1B3FD8; /* Team Alpha: Cobalt Blue */
  --gw-team-1:          #FF4A18; /* Team Omega: Fluorescent Orange */
  --gw-team-2:          #1E7A46; /* Team Gamma: Forest Green */
  --gw-team-3:          #B4278A; /* Team Delta: Deep Magenta */
  --gw-team-4:          #9A6B00; /* Team Epsilon: Bronze Ochre */
  --gw-team-5:          #0E7C86; /* Team Zeta: Ocean Cyan */

  --gw-team-0-text:     #1B3FD8;
  --gw-team-1-text:     #A83100;
  --gw-team-2-text:     #146035;
  --gw-team-3-text:     #91206F;
  --gw-team-4-text:     #6F4D00;
  --gw-team-5-text:     #0A5C64;

  /* Rarity Tiers */
  --gw-tier-common:     #64748B;
  --gw-tier-tactical:   #0284C7;
  --gw-tier-epic:       #9333EA;
  --gw-tier-mythic:     #D97706;
  --gw-tier-dev:        #DC2626;

  /* Live Match Status */
  --gw-status-live:     #16A34A; /* Pulsing green indicator */
  --gw-status-warning:  #D97706; /* Timer expiring */
  --gw-status-danger:   #DC2626; /* Disconnected / Critically low HP */

  /* Backward Compatibility Aliases */
  --paper:              var(--gw-bg-paper);
  --paper-deep:         var(--gw-bg-deep);
  --paper-lift:         var(--gw-bg-lift);
  --rule:               var(--gw-rule);
  --ink:                var(--gw-ink);
  --ink-soft:           var(--gw-ink-muted);
  --blue:               var(--gw-blue);
  --flo:                var(--gw-flo);
  --gold:               var(--gw-gold);
  --play-yellow:        var(--gw-yellow);
  --play-shadow:        var(--gw-yellow-shadow);
  --border-ink:         var(--gw-border-ink);
  --card-bg:            var(--gw-bg-lift);
}

/* --------------------------------------------------------------------------
   2. DARK THEME (Dark Slate Blueprint / Blackboard)
   Inverted coordinate grid with luminous function trajectories
   -------------------------------------------------------------------------- */
body.theme-dark,
[data-theme="dark"] {
  /* Surfaces & Slate Backgrounds */
  --gw-bg-paper:        #141A17; /* Deep matte slate blackboard */
  --gw-bg-deep:         #0C110E; /* Recessed chalkboard wells */
  --gw-bg-lift:         #1F2722; /* Elevated cards & modal slate */
  --gw-bg-overlay:      rgba(7, 10, 8, 0.85); /* Dark backdrop overlay */

  /* Mathematical Coordinate Rules */
  --gw-rule:            rgba(169, 177, 167, 0.22); /* Glowing graph grid line */
  --gw-rule-accent:     rgba(169, 177, 167, 0.45); /* Highlighted axes */

  /* Inks & Typography */
  --gw-ink:             #EDEFE9; /* Crisp chalk white coordinate text */
  --gw-ink-muted:       #9BA59F; /* Slate secondary typography */
  --gw-ink-subtle:      #626D67; /* Ghost notations & borders */
  --gw-ink-invert:      #141A17; /* Dark text when on bright buttons */

  /* Tactile Borders */
  --gw-border-ink:      #EDEFE9; /* Crisp chalk border line */
  --gw-border-hairline: rgba(169, 177, 167, 0.25);
  --gw-border-focus:    #38BDF8; /* Neon cyan keyboard focus */

  /* Tactile Action Accents */
  --gw-yellow:          #FACC15; /* Luminous tactile PLAY yellow */
  --gw-yellow-shadow:   #B45309; /* Bevel shadow */
  --gw-yellow-hover:    #FDE047;
  --gw-flo:             #FF4A18; /* Electric radiant vermilion */
  --gw-flo-shadow:      #991B1B;
  --gw-blue:            #38BDF8; /* Electric Cyan Alpha */
  --gw-gold:            #FBBF24; /* Radiant Star Gold */
  --gw-gold-shadow:     #92400E;
  --gw-green:           #22C55E;
  --gw-on-accent:       #141A17; /* Dark text on the light cyan/vermilion fills */
  --gw-on-yellow:       #141A17;

  /* Team Battle Inks in Dark Mode */
  --gw-team-0:          #38BDF8; /* Electric Cyan */
  --gw-team-1:          #FF4A18; /* Neon Vermilion */
  --gw-team-2:          #34D399; /* Neon Emerald */
  --gw-team-3:          #F472B6; /* Hot Pink */
  --gw-team-4:          #FBBF24; /* Amber Gold */
  --gw-team-5:          #2DD4BF; /* Bright Teal */

  --gw-team-0-text:     #38BDF8;
  --gw-team-1-text:     #FB923C;
  --gw-team-2-text:     #34D399;
  --gw-team-3-text:     #F472B6;
  --gw-team-4-text:     #FBBF24;
  --gw-team-5-text:     #2DD4BF;

  /* Rarity Tiers in Dark Mode */
  --gw-tier-common:     #94A3B8;
  --gw-tier-tactical:   #38BDF8;
  --gw-tier-epic:       #C084FC;
  --gw-tier-mythic:     #FBBF24;
  --gw-tier-dev:        #EF4444;

  /* Live Match Status in Dark Mode */
  --gw-status-live:     #22C55E;
  --gw-status-warning:  #F59E0B;
  --gw-status-danger:   #EF4444;

  /* Backward Compatibility Aliases in Dark Mode */
  --paper:              var(--gw-bg-paper);
  --paper-deep:         var(--gw-bg-deep);
  --paper-lift:         var(--gw-bg-lift);
  --rule:               var(--gw-rule);
  --ink:                var(--gw-ink);
  --ink-soft:           var(--gw-ink-muted);
  --blue:               var(--gw-blue);
  --flo:                var(--gw-flo);
  --gold:               var(--gw-gold);
  --play-yellow:        var(--gw-yellow);
  --play-shadow:        var(--gw-yellow-shadow);
  --border-ink:         var(--gw-border-ink);
  --card-bg:            var(--gw-bg-lift);
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY & SHADOW TOKENS (Shared across themes)
   -------------------------------------------------------------------------- */
:root {
  /* Typography Families */
  --gw-font-display:    'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
  --gw-font-mono:       'IBM Plex Mono', ui-monospace, monospace;
  --gw-font-pixel:      'Press Start 2P', monospace;

  /* Tactile Physical Elevation. One press grammar everywhere: a hard ink
     ledge straight below the part (never diagonal, never blurred) that the
     part sinks onto when pressed. */
  --gw-press-rest:         0 3px 0 var(--gw-border-ink);
  --gw-press-hover:        0 4px 0 var(--gw-border-ink);
  --gw-press-down:         0 1px 0 var(--gw-border-ink);
  --gw-shadow-tactile:     var(--gw-press-rest);
  --gw-shadow-tactile-lg:  0 6px 0 var(--gw-border-ink);
  --gw-shadow-pressed:     var(--gw-press-down);
  --gw-shadow-yellow-btn:  0 3px 0 var(--gw-yellow-shadow), 0 5px 0 var(--gw-border-ink);

  /* Corner Radii */
  --gw-radius-sm:       2px;
  --gw-radius-md:       4px;
  --gw-radius-lg:       6px;
  --gw-radius-pill:     9999px;

  /* Spacing Scale */
  --gw-space-1:         4px;
  --gw-space-2:         8px;
  --gw-space-3:         12px;
  --gw-space-4:         16px;
  --gw-space-5:         24px;
  --gw-space-6:         32px;
  --gw-space-7:         48px;
  --gw-space-8:         64px;
}

/* --------------------------------------------------------------------------
   4. SHARED ARCADE UTILITIES & COMPONENT TOKENS
   Reusable across Lobby, Waiting Scene, and Battlefield
   -------------------------------------------------------------------------- */

/* Tactile Yellow Action Button (Standardized Arcade Style) */
.gw-btn-tactile-yellow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 18px;
  font-family: var(--gw-font-pixel);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gw-on-yellow);
  background-color: var(--gw-yellow);
  /* The border stays dark on both papers: the yellow is a printed chip, and a
     chalk outline on dark slate would read as a hole. The ledge below takes
     the paper's own ink, so on dark paper it is chalk and still shows. */
  border: 2px solid var(--gw-on-yellow);
  border-radius: var(--gw-radius-sm);
  box-shadow: var(--gw-shadow-yellow-btn);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, background-color 0.1s ease-out;
  user-select: none;
}
.gw-btn-tactile-yellow:hover {
  background-color: var(--gw-yellow-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 0 var(--gw-yellow-shadow), 0 6px 0 var(--gw-border-ink);
}
.gw-btn-tactile-yellow:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--gw-yellow-shadow), 0 2px 0 var(--gw-border-ink);
}
.gw-btn-tactile-yellow:focus-visible,
.gw-btn-tactile-ink:focus-visible,
.game-profile-chip:focus-visible,
.drawer-close-btn:focus-visible,
.login-tab-btn:focus-visible,
.auth-action-btn:focus-visible {
  outline: 2px solid var(--gw-border-focus);
  outline-offset: 3px;
}

/* Tactile Ink Outline Button */
.gw-btn-tactile-ink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-family: var(--gw-font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gw-ink);
  background-color: var(--gw-bg-lift);
  border: 2px solid var(--gw-border-ink);
  border-radius: var(--gw-radius-sm);
  box-shadow: var(--gw-press-rest);
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}
.gw-btn-tactile-ink:hover {
  transform: translateY(-1px);
  box-shadow: var(--gw-press-hover);
}
.gw-btn-tactile-ink:active {
  transform: translateY(2px);
  box-shadow: var(--gw-press-down);
}

/* Tactile Chip / Pill */
.gw-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-family: var(--gw-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--gw-ink);
  background-color: var(--gw-bg-lift);
  border: 1px solid var(--gw-border-ink);
  border-radius: var(--gw-radius-pill);
}

/* Live Connection Dot */
.gw-conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--gw-status-live);
  display: inline-block;
  /* A printed dot with an ink ring, not a glow. */
  box-shadow: 0 0 0 1.5px var(--gw-border-ink);
}
.gw-conn-dot--warning { background-color: var(--gw-status-warning); }
.gw-conn-dot--danger { background-color: var(--gw-status-danger); }

/* --------------------------------------------------------------------------
   5. SHARED PROFILE CHIP & AUTH MODAL STYLES
   -------------------------------------------------------------------------- */

/* In-Game Player Profile Chip */
.game-profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  background-color: var(--gw-bg-lift);
  border: 2px solid var(--gw-border-ink);
  border-radius: var(--gw-radius-pill);
  box-shadow: var(--gw-press-rest);
  cursor: pointer;
  user-select: none;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
  min-height: 32px;
  font: inherit;
  color: inherit;
}
.game-profile-chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--gw-press-hover);
}
.game-profile-chip:active {
  transform: translateY(2px);
  box-shadow: var(--gw-press-down);
}

.game-avatar-canvas {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gw-bg-deep);
  border: 1.5px solid var(--gw-border-ink);
  display: block;
}

.game-callsign {
  font-family: var(--gw-font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gw-ink);
  letter-spacing: 0.05em;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.game-token-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--gw-font-mono);
  font-size: 10px;
  font-weight: 700;
  color: var(--gw-on-yellow);
  background: var(--gw-yellow);
  padding: 2px 7px;
  border: 1px solid var(--gw-border-ink);
  border-radius: var(--gw-radius-pill);
}

/* Reusable Login & Auth Modal */
.login-modal-overlay {
  position: fixed;
  inset: 0;
  /* Screened, not frosted: the overlay token is already near-opaque. */
  background: var(--gw-bg-overlay);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: modalFadeIn 0.16s cubic-bezier(0.25, 1, 0.5, 1);
}
.login-modal-overlay[hidden] {
  display: none !important;
}

@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .login-modal-overlay { animation: none; }
}

.login-modal-card {
  width: 100%;
  max-width: 440px;
  background: var(--gw-bg-paper);
  border: 3px solid var(--gw-border-ink);
  border-radius: var(--gw-radius-lg);
  box-shadow: var(--gw-shadow-tactile-lg);
  overflow: hidden;
}

.drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  background: var(--gw-bg-deep);
  border-bottom: 2px solid var(--gw-border-ink);
}

.drawer-title {
  font-family: var(--gw-font-pixel);
  font-size: 10px;
  font-weight: 700;
  color: var(--gw-ink);
  letter-spacing: 0.05em;
  margin: 0;
}

.drawer-close-btn {
  background: var(--gw-bg-lift);
  border: 1.5px solid var(--gw-border-ink);
  border-radius: var(--gw-radius-sm);
  color: var(--gw-ink);
  font-family: var(--gw-font-mono);
  font-size: 12px;
  font-weight: 700;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 0 var(--gw-border-ink);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}
.drawer-close-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--gw-border-ink);
}
.drawer-close-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--gw-border-ink);
}

.login-modal-body {
  padding: 20px;
}

.login-tabs-row {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.login-tab-btn {
  flex: 1;
  font-family: var(--gw-font-pixel);
  font-size: 8px;
  font-weight: 700;
  padding: 10px 6px;
  background: var(--gw-bg-lift);
  border: 2px solid var(--gw-border-ink);
  border-radius: var(--gw-radius-sm);
  color: var(--gw-ink-muted);
  cursor: pointer;
  box-shadow: 0 2px 0 var(--gw-border-ink);
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, background-color 0.1s ease-out;
}
.login-tab-btn:active {
  transform: translateY(2px);
  box-shadow: 0 0 0 var(--gw-border-ink);
}
.login-tab-btn.is-active {
  background: var(--gw-blue);
  color: var(--gw-on-accent);
  box-shadow: 0 2px 0 var(--gw-border-ink);
}

.auth-pane-hint {
  font-family: var(--gw-font-mono);
  font-size: 11px;
  color: var(--gw-ink-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

.auth-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.auth-input-label {
  font-family: var(--gw-font-pixel);
  font-size: 8px;
  color: var(--gw-ink);
  letter-spacing: 0.05em;
}

.auth-text-input {
  font-family: var(--gw-font-mono);
  font-size: 14px;
  font-weight: 700;
  padding: 10px 14px;
  background: var(--gw-bg-deep);
  border: 2px solid var(--gw-border-ink);
  border-radius: var(--gw-radius-sm);
  color: var(--gw-ink);
  outline: none;
}
.auth-text-input:focus {
  border-color: var(--gw-border-focus);
}

.auth-action-btn {
  width: 100%;
  padding: 12px;
  font-family: var(--gw-font-pixel);
  font-size: 10px;
  font-weight: 700;
  color: var(--gw-on-yellow);
  background: var(--gw-yellow);
  border: 2px solid var(--gw-on-yellow);
  border-radius: var(--gw-radius-sm);
  box-shadow: var(--gw-shadow-yellow-btn);
  cursor: pointer;
  transition: transform 0.08s ease-out, box-shadow 0.08s ease-out;
}
.auth-action-btn:hover {
  background: var(--gw-yellow-hover);
  transform: translateY(-1px);
}
.auth-action-btn:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--gw-yellow-shadow), 0 2px 0 var(--gw-border-ink);
}
.auth-action-btn--secondary {
  color: var(--gw-ink);
  background: var(--gw-bg-lift);
  border-color: var(--gw-border-ink);
  box-shadow: var(--gw-press-rest);
}
.auth-action-btn--secondary:hover {
  transform: translateY(-1px);
  box-shadow: var(--gw-press-hover);
}
.auth-action-btn--secondary:active {
  transform: translateY(2px);
  box-shadow: var(--gw-press-down);
}