/* ── CSS Variables & Global Reset ── */
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;700;900&display=swap');

:root {
  /* Colors */
  --dark: #000000;
  --dark2: #0a0508;
  --dark3: #120a0e;
  --accent: #e94560;
  --accent2: #f5a623;
  --neon-red: #ff2244;
  --neon-green: #00ff88;
  --neon-blue: #00cfff;
  --glass: rgba(255,255,255,0.04);
  --gb: rgba(255,255,255,0.07);
  --text: #eaeaf5;
  --dim: rgba(255,255,255,0.38);

  /* Semantic colors */
  --color-success: #4ade80;
  --color-warning: #f5a623;
  --color-danger: #e94560;
  --color-info: #60a5fa;

  /* Spacing scale */
  --space-2xs: 0.25rem;   /* 4px */
  --space-xs: 0.5rem;     /* 8px */
  --space-sm: 0.75rem;    /* 12px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 2.5rem;    /* 40px */
  --space-3xl: 3.5rem;    /* 56px */

  /* Border radius */
  --radius-sm: 0.5rem;    /* 8px */
  --radius-md: 0.75rem;   /* 12px */
  --radius-lg: 1rem;      /* 16px */
  --radius-xl: 1.375rem;  /* 22px */
  --radius-2xl: 1.625rem; /* 26px */
  --radius-full: 50px;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-md: 0 8px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05);
  --shadow-lg: 0 15px 42px rgba(0,0,0,0.5);
  --shadow-glow-accent: 0 0 24px rgba(233,69,96,0.45);
  --shadow-glow-accent2: 0 8px 24px rgba(245,166,35,0.2);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-slow: 0.4s ease;
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Typography */
  --font-family: 'Vazirmatn', sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.82rem;
  --font-size-base: 0.92rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.18rem;
  --font-size-xl: 1.38rem;
  --font-size-2xl: 1.55rem;

  /* Safe area insets */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Touch target minimum */
  --touch-min: 2.75rem; /* 44px */

  /* Z-index layers */
  --z-base: 1;
  --z-overlay: 100;
  --z-modal: 500;
  --z-toast: 9999;
}

/* ── Light theme ── */
[data-theme="light"] {
  --dark: #f0f0f5;
  --dark2: #e8e5ea;
  --dark3: #ddd8dc;
  --glass: rgba(0,0,0,0.04);
  --gb: rgba(0,0,0,0.08);
  --text: #1a1a2e;
  --dim: rgba(0,0,0,0.45);
  --accent: #c0392b;
  --accent2: #d97706;
  --color-success: #16a34a;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-info: #2563eb;
}
[data-theme="light"] body { background: #f0f0f5; }
[data-theme="light"] .atmo-glow,
[data-theme="light"] .atmo-fog { opacity: 0.3; }
[data-theme="light"] .bottom-nav { background: rgba(240,240,245,.95); border-top-color: rgba(0,0,0,.08); }
[data-theme="light"] .bnav-btn { color: rgba(0,0,0,.4); }
[data-theme="light"] .bnav-btn.active { color: var(--accent); }
[data-theme="light"] .card-back { background: linear-gradient(145deg, #e8e5ea, #ddd8dc, #d0cdd2); border-color: rgba(0,0,0,.1); }
[data-theme="light"] .card-number { color: var(--accent); text-shadow: none; filter: none; }
[data-theme="light"] .fs-game-menu { background: rgba(240,240,245,.97); }
[data-theme="light"] .mod-panel { background: rgba(0,0,0,.03); }
[data-theme="light"] .toast { background: rgba(240,240,245,.97); color: #1a1a2e; }
[data-theme="light"] .gc { background: rgba(0,0,0,0.03); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .card-front.mafia { background: radial-gradient(ellipse at 50% 0%, #fff0f0, #fff5f5, #fff8f8); border-color: rgba(200,0,0,0.2); }
[data-theme="light"] .card-front.citizen { background: radial-gradient(ellipse at 50% 0%, #f0fff5, #f5fff8, #f8fffa); border-color: rgba(0,200,120,0.2); }
[data-theme="light"] .mafia .card-role-name { color: #c0392b; text-shadow: none; }
[data-theme="light"] .citizen .card-role-name { color: #16a34a; text-shadow: none; }
[data-theme="light"] .modal-box { background: #f5f5fa; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .modal-overlay { background: rgba(0,0,0,0.5); }
[data-theme="light"] input, [data-theme="light"] textarea { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.12); color: #1a1a2e; }
[data-theme="light"] .auth-bar { background: rgba(0,0,0,0.03); }
[data-theme="light"] .setup-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .group-btn { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); color: #1a1a2e; }
[data-theme="light"] .count-btn { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); color: #1a1a2e; }
[data-theme="light"] .empty-state-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .error-state { background: rgba(220,38,38,0.04); border-color: rgba(220,38,38,0.12); }

/* ── 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;
  }
}

/* ── Splash Screen ── */
.splash {
  position: fixed; inset: 0; z-index: 99999;
  background: #000; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: opacity 0.6s ease, transform 0.6s ease;
  overflow: hidden;
}
.splash.hide { opacity: 0; transform: scale(1.1); pointer-events: none; }

.splash-particles {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.splash-glow {
  position: absolute; width: 300px; height: 300px;
  border-radius: 50%; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(233,69,96,.12) 0%, rgba(245,166,35,.05) 40%, transparent 70%);
  animation: splashPulse 2.5s ease-in-out infinite;
}
@keyframes splashPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; }
}

.splash-content { text-align: center; position: relative; z-index: 2; }

.splash-mask {
  font-size: 3.5rem; margin-bottom: 8px;
  animation: splashMaskFloat 2s ease-in-out infinite;
  filter: drop-shadow(0 0 20px rgba(233,69,96,.4));
}
@keyframes splashMaskFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(-5deg); }
  75% { transform: translateY(-4px) rotate(5deg); }
}

.splash-logo {
  font-family: var(--font-family); font-size: clamp(3.5rem, 14vw, 5.5rem);
  font-weight: 900; letter-spacing: -3px;
  background: linear-gradient(120deg, #ff2244 0%, #ff7700 40%, #f5a623 60%, #ff2244 100%);
  background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; animation: shine 3s linear infinite;
  filter: drop-shadow(0 0 50px rgba(255,34,68,.5));
}
.splash-sub {
  font-size: 0.7rem; color: rgba(255,255,255,.15);
  letter-spacing: 8px; margin-top: 4px; text-transform: uppercase;
}
.splash-tagline {
  font-size: 0.85rem; color: rgba(255,255,255,.35);
  margin-top: 20px; height: 1.2em;
  font-weight: 500;
}
.splash-bar-wrap {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; margin-top: 16px;
}
.splash-bar {
  width: 160px; height: 3px;
  background: rgba(255,255,255,.06); border-radius: 3px; overflow: hidden;
}
.splash-fill {
  width: 0%; height: 100%;
  background: linear-gradient(90deg, #e94560, #f5a623);
  border-radius: 3px; transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(233,69,96,.4);
}
.splash-percent {
  font-size: 0.7rem; color: rgba(255,255,255,.25);
  font-variant-numeric: tabular-nums; min-width: 2rem;
  font-family: monospace;
}
.splash-footer {
  position: absolute; bottom: 24px;
  font-size: 0.65rem; color: rgba(255,255,255,.08); letter-spacing: 1px;
}

/* ── Global Reset ── */
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-family);
  background: #000000;
  color: var(--text);
  min-height: 100dvh;
  overflow-x: hidden;
  padding-top: var(--safe-top);
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  /* Firefox scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(233,69,96,.25) transparent;
}

/* Webkit scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Global focus-visible */
:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}