/**
 * WiGames — Global CSS
 * ----------------------
 * Custom styles that complement Tailwind.
 * Tailwind handles most styling via utility classes.
 */

/* ══════════════════════════════════════════════════
   THEME SYSTEM — CSS Custom Properties
   ══════════════════════════════════════════════════ */

/* ── Dark Theme (default) ──────────────────────── */
[data-theme="dark"], :root {
  --color-primary: #6366f1;
  --color-primary-light: #818cf8;
  --color-primary-dark: #4f46e5;
  --color-secondary: #ec4899;
  --color-secondary-light: #f472b6;
  --color-secondary-dark: #db2777;
  --color-accent: #14b8a6;
  --color-accent-light: #2dd4bf;
  --color-accent-dark: #0d9488;
  --color-surface: #1e293b;
  --color-surface-light: #334155;
  --color-surface-dark: #0f172a;
  --color-text: #e2e8f0;
  --color-text-muted: #94a3b8;
  --color-text-dim: #64748b;
  --color-border: #334155;
  --scrollbar-track: #0f172a;
  --scrollbar-thumb: #334155;
  --swal-bg: #1e293b;
  --swal-color: #e2e8f0;
}

/* ── Light Theme ───────────────────────────────── */
[data-theme="light"] {
  --color-primary: #4f46e5;
  --color-primary-light: #6366f1;
  --color-primary-dark: #4338ca;
  --color-secondary: #db2777;
  --color-secondary-light: #ec4899;
  --color-secondary-dark: #be185d;
  --color-accent: #0d9488;
  --color-accent-light: #14b8a6;
  --color-accent-dark: #0f766e;
  --color-surface: #ffffff;
  --color-surface-light: #f1f5f9;
  --color-surface-dark: #e2e8f0;
  --color-text: #1e293b;
  --color-text-muted: #475569;
  --color-text-dim: #94a3b8;
  --color-border: #cbd5e1;
  --scrollbar-track: #e2e8f0;
  --scrollbar-thumb: #94a3b8;
  --swal-bg: #ffffff;
  --swal-color: #1e293b;
}

/* ── Ocean Theme ───────────────────────────────── */
[data-theme="ocean"] {
  --color-primary: #0ea5e9;
  --color-primary-light: #38bdf8;
  --color-primary-dark: #0284c7;
  --color-secondary: #a78bfa;
  --color-secondary-light: #c4b5fd;
  --color-secondary-dark: #7c3aed;
  --color-accent: #2dd4bf;
  --color-accent-light: #5eead4;
  --color-accent-dark: #14b8a6;
  --color-surface: #0c4a6e;
  --color-surface-light: #075985;
  --color-surface-dark: #082f49;
  --color-text: #e0f2fe;
  --color-text-muted: #7dd3fc;
  --color-text-dim: #38bdf8;
  --color-border: #0369a1;
  --scrollbar-track: #082f49;
  --scrollbar-thumb: #0369a1;
  --swal-bg: #0c4a6e;
  --swal-color: #e0f2fe;
}

/* ── Sunset Theme ──────────────────────────────── */
[data-theme="sunset"] {
  --color-primary: #f97316;
  --color-primary-light: #fb923c;
  --color-primary-dark: #ea580c;
  --color-secondary: #f43f5e;
  --color-secondary-light: #fb7185;
  --color-secondary-dark: #e11d48;
  --color-accent: #fbbf24;
  --color-accent-light: #fcd34d;
  --color-accent-dark: #f59e0b;
  --color-surface: #7c2d12;
  --color-surface-light: #9a3412;
  --color-surface-dark: #431407;
  --color-text: #fff7ed;
  --color-text-muted: #fed7aa;
  --color-text-dim: #fdba74;
  --color-border: #9a3412;
  --scrollbar-track: #431407;
  --scrollbar-thumb: #9a3412;
  --swal-bg: #7c2d12;
  --swal-color: #fff7ed;
}

/* ── Forest Theme ──────────────────────────────── */
[data-theme="forest"] {
  --color-primary: #22c55e;
  --color-primary-light: #4ade80;
  --color-primary-dark: #16a34a;
  --color-secondary: #a3e635;
  --color-secondary-light: #bef264;
  --color-secondary-dark: #84cc16;
  --color-accent: #2dd4bf;
  --color-accent-light: #5eead4;
  --color-accent-dark: #14b8a6;
  --color-surface: #14532d;
  --color-surface-light: #166534;
  --color-surface-dark: #052e16;
  --color-text: #f0fdf4;
  --color-text-muted: #86efac;
  --color-text-dim: #4ade80;
  --color-border: #166534;
  --scrollbar-track: #052e16;
  --scrollbar-thumb: #166534;
  --swal-bg: #14532d;
  --swal-color: #f0fdf4;
}

[data-theme="blossom"] {
  /* تدرجات الوردي والبنفسجي - ألوان أنثوية حيوية */
  --color-primary: #f472b6;        /* وردي زاهي للعناصر الأساسية */
  --color-primary-light: #fbcfe8;  /* وردي فاتح ناعم */
  --color-primary-dark: #db2777;   /* وردي غامق للظلال */

  /* تدرجات البنفسجي الفاتح (Lavender) */
  --color-secondary: #c084fc;
  --color-secondary-light: #e9d5ff;
  --color-secondary-dark: #9333ea;

  /* لون التميز (لون التوت) - للعدادات والنقاط */
  --color-accent: #fb7185;
  --color-accent-light: #fecdd3;
  --color-accent-dark: #e11d48;

  /* الخلفيات - بنفسجي ليلي ناعم ومريح للعين */
  --color-surface: #2e102e;        /* خلفية باذنجانية داكنة جداً تريح العين */
  --color-surface-light: #4c1d4d;  /* خلفية صناديق الأسئلة */
  --color-surface-dark: #1f081f;   /* خلفية القوائم العميقة */

  /* النصوص - أبيض نقي لتباين مثالي */
  --color-text: #ffffff;           /* نص أبيض صريح */
  --color-text-muted: #f9a8d4;     /* نص وردي باهت للمعلومات الإضافية */
  --color-text-dim: #f472b6;       /* نص خافت */

  /* الحدود وشريط التمرير */
  --color-border: #701a75;
  --scrollbar-track: #1f081f;
  --scrollbar-thumb: #701a75;

  /* تنبيهات المسابقة (SweetAlert) - مظهر أنيق وجذاب */
  --swal-bg: #4c1d4d;
  --swal-color: #ffffff;
}

[data-theme="nebula"] {
  /* تدرجات البنفسجي الملكي - حيوية وهادئة */
  --color-primary: #a855f7;        /* بنفسجي ساطع */
  --color-primary-light: #c084fc;  /* بنفسجي فاتح للوهج */
  --color-primary-dark: #9333ea;   /* بنفسجي عميق */

  /* تدرجات النيلي (Indigo) - للتباين الاحترافي */
  --color-secondary: #818cf8;
  --color-secondary-light: #a5b4fc;
  --color-secondary-dark: #6366f1;

  /* لون التميز (الوردي الفوشي) - لكسر الروتين وجذب الانتباه */
  --color-accent: #f472b6;
  --color-accent-light: #fbcfe8;
  --color-accent-dark: #db2777;

  /* الخلفيات - بنفسجي ليلي غامق (Midnight Purple) */
  --color-surface: #1e1b4b;        /* كحلي مائل للبنفسجي العميق */
  --color-surface-light: #312e81;  /* خلفية صناديق الأسئلة */
  --color-surface-dark: #11103d;   /* خلفية القوائم العميقة */

  /* النصوص - أبيض نقي وواضح جداً */
  --color-text: #ffffff;           /* نص أبيض ناصع */
  --color-text-muted: #c7d2fe;     /* نص لافندر باهت للمعلومات */
  --color-text-dim: #a5b4fc;       /* نص خافت */

  /* الحدود وشريط التمرير */
  --color-border: #4338ca;
  --scrollbar-track: #11103d;
  --scrollbar-thumb: #4338ca;

  /* تنبيهات المسابقة (SweetAlert) - مظهر عصري */
  --swal-bg: #312e81;
  --swal-color: #ffffff;
}
/* ── Apply theme variables to elements ─────────── */
body {
  background-color: var(--color-surface-dark) !important;
  color: var(--color-text) !important;
}

/* Theme-aware scrollbar */
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
}

/* Theme-aware active theme dot indicator */
.theme-dot {
  position: relative;
}
.theme-dot.active {
  box-shadow: 0 0 0 2px var(--color-primary);
  transform: scale(1.15);
}

/* ── TV Theme Buttons (Admin) ─────────────────── */
.tv-theme-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5rem 0.25rem;
  background: var(--color-surface-dark);
  border: 2px solid transparent;
  border-radius: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}
.tv-theme-btn:hover {
  border-color: rgba(255, 255, 255, 0.15);
  background: var(--color-surface-light);
}
.tv-theme-btn.tv-theme-active {
  border-color: var(--color-primary);
  background: rgba(99, 102, 241, 0.1);
  box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
}
.tv-theme-btn.tv-theme-active span:first-child {
  box-shadow: 0 0 0 3px var(--color-primary);
  transform: scale(1.1);
}

/* TV Theme dots in topbar dropdown */
.tv-theme-btn-dot.tv-theme-active {
  box-shadow: 0 0 0 2px var(--color-primary);
  transform: scale(1.15);
}

/* ── Custom Scrollbar ──────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
  background: #475569;
}

/* ── Hide Scrollbar Utility ────────────────────── */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* ── Smooth Transitions ────────────────────────── */
* {
  scroll-behavior: smooth;
}

/* ══════════════════════════════════════════════════
   SHARED GAME BUTTON CLASSES
   Standardized patterns for game controls.
   Use these instead of repeating long Tailwind chains.
   ══════════════════════════════════════════════════ */

/* Admin: Start game button (accent, prominent) */
.btn-game-start {
  width: 100%;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  transition: all 0.2s;
  box-shadow: 0 4px 6px -1px rgba(20, 184, 166, 0.25);
  min-height: 48px;
  font-size: 1rem;
}
.btn-game-start:hover {
  background: var(--color-accent-dark);
  transform: scale(1.02);
}
.btn-game-start:active {
  transform: scale(0.95);
}

/* Admin: Restart / New round button (accent) */
.btn-game-restart {
  width: 100%;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
  padding: 0.75rem;
  border-radius: 0.75rem;
  transition: all 0.2s;
}
.btn-game-restart:hover {
  background: var(--color-accent-dark);
}

/* Admin: Back to lobby button (surface + border) */
.btn-game-lobby {
  width: 100%;
  background: var(--color-surface);
  color: #d1d5db;
  font-weight: 700;
  padding: 0.75rem;
  border-radius: 0.75rem;
  transition: all 0.2s;
  border: 1px solid #374151;
}
.btn-game-lobby:hover {
  background: var(--color-surface-dark);
}

/* Admin: End game button (red, danger) */
.btn-game-end {
  padding: 0.375rem 1rem;
  border-radius: 0.5rem;
  background: rgba(220, 38, 38, 0.3);
  color: #f87171;
  font-size: 0.75rem;
  transition: all 0.2s;
}
.btn-game-end:hover {
  background: rgba(220, 38, 38, 0.5);
}

/* Admin: Skip leaderboard button */
.btn-game-skip {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  background: rgba(99, 102, 241, 0.8);
  border-radius: 0.5rem;
  transition: colors 0.2s;
}
.btn-game-skip:hover {
  background: var(--color-primary);
}

/* ── Input Number — hide arrows ────────────────── */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* ── Session Code Input — large centered ───────── */
.code-input {
  letter-spacing: 0.5em;
  text-align: center;
  font-family: 'Courier New', monospace;
}

/* ── Player Card Animation ─────────────────────── */
.player-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.player-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ── Score Animation ───────────────────────────── */
@keyframes scoreUp {
  0%   { transform: scale(1); color: inherit; }
  50%  { transform: scale(1.4); color: #22c55e; }
  100% { transform: scale(1); color: inherit; }
}
.score-animate {
  animation: scoreUp 0.5s ease-in-out;
}

/* ── Pulse Dot (waiting) ───────────────────────── */
@keyframes pulseDot {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50%      { opacity: 1; transform: scale(1.2); }
}
.pulse-dot {
  animation: pulseDot 1.5s ease-in-out infinite;
}

/* ── QR Code Container ─────────────────────────── */
.qr-container img {
  border-radius: 8px;
  background: white;
  padding: 4px;
}

/* ── Toast notification position fix ───────────── */
.swal2-container {
  z-index: 99999 !important;
}

/* ── Mobile-first ──────────────────────────────── */
@media (max-width: 640px) {
  /* Touch-friendly tap targets */
  button, a, select, input, .btn {
    min-height: 40px;
  }
  /* Prevent zoom on input focus in iOS */
  input, select, textarea {
    font-size: 16px !important;
  }
  /* Full-width cards on mobile */
  .bg-surface {
    border-radius: 0.75rem;
  }
}

/* ── RTL support ───────────────────────────────── */
[dir="rtl"] .code-input {
  direction: ltr;
  text-align: center;
}

/* ── Connection status dot ─────────────────────── */
.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.3s ease;
}
.conn-dot.online  { background-color: #22c55e; }
.conn-dot.offline { background-color: #ef4444; }

/* ── Fixed top bar spacing ─────────────────────── */
.pt-16 { padding-top: 4rem; }

/* ── Nav icon buttons ──────────────────────────── */
.nav-icon-btn {
  -webkit-tap-highlight-color: transparent;
}
.nav-icon-btn:active {
  opacity: 0.7;
}

/* ── Settings select dropdown ─────────────────── */
select.appearance-none {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%239ca3af' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  padding-right: 2rem;
}
[dir="rtl"] select.appearance-none {
  background-position: left 0.5rem center;
  padding-right: 0.75rem;
  padding-left: 2rem;
}

/* ── Players Grid (Bottom Bar) ─────────────────── */
#playersGridBar,
#gamePlayersGridBar {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.player-grid-card {
  transition: opacity 0.4s ease, filter 0.4s ease, transform 0.3s ease;
}

.player-grid-card.player-pending {
  opacity: 0.25;
  filter: grayscale(60%);
}

.player-grid-card.player-answered {
  opacity: 1;
  filter: none;
  animation: playerAnsweredPulse 0.5s ease-out;
}

.player-grid-card.player-submitted {
  opacity: 1;
  filter: none;
  border: 1px solid rgba(99, 102, 241, 0.5);
  background-color: rgba(99, 102, 241, 0.1);
  animation: playerAnsweredPulse 0.5s ease-out;
}

.player-grid-card.player-voted {
  opacity: 1;
  filter: none;
  border: 1px solid rgba(234, 179, 8, 0.5);
  background-color: rgba(234, 179, 8, 0.1);
  animation: playerAnsweredPulse 0.5s ease-out;
}

.player-grid-card.player-false-start {
  opacity: 0.6;
  filter: none;
}

@keyframes playerAnsweredPulse {
  0%   { transform: scale(0.9); opacity: 0.5; }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Game Card ─────────────────────────────────── */
.game-card {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.game-card:active {
  transform: scale(0.97);
}

/* ── Game Settings Overlay Transition ──────────── */
#gameSettingsOverlay {
  transition: opacity 0.2s ease;
}

/* ══════════════════════════════════════════════════
   LIGHT THEME OVERRIDES
   Text and border colors that Tailwind hardcodes
   ══════════════════════════════════════════════════ */
[data-theme="light"] .text-white {
  color: #1e293b !important;
}
[data-theme="light"] .text-gray-100 {
  color: #334155 !important;
}
[data-theme="light"] .text-gray-300 {
  color: #475569 !important;
}
[data-theme="light"] .text-gray-400 {
  color: #64748b !important;
}
[data-theme="light"] .text-gray-500 {
  color: #94a3b8 !important;
}
[data-theme="light"] .border-gray-700 {
  border-color: #cbd5e1 !important;
}
[data-theme="light"] header#topBar {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}
[data-theme="light"] #menuDropdown {
  background-color: var(--color-surface) !important;
  border-color: var(--color-border) !important;
}
[data-theme="light"] .bg-surface-dark {
  background-color: var(--color-surface-dark) !important;
}
[data-theme="light"] .bg-surface {
  background-color: var(--color-surface) !important;
}
[data-theme="light"] .bg-surface-light {
  background-color: var(--color-surface-light) !important;
}

/* ── Theme transition (smooth color changes) ───── */
body,
header#topBar,
#menuDropdown,
.bg-surface,
.bg-surface-dark,
.bg-surface-light {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}