/* ============================================================
 * CORE CSS: base styles + all fix layers (April 2026)
 * Merged bundle — built 2026-07-03 (reorg). Original cascade order:
 *   - css/style.css
 *   - css/enhanced-ui.css
 *   - css/games-redesign.css
 *   - css/stream-ready-v2.css
 *   - css/fix-all.css
 *   - css/final-fixes-2026.css
 *   - css/mega-upgrade-2026.css
 *   - css/perf-polish-2026.css
 *   - css/games-fixes-2026-04-17.css
 *   - css/games-layout-fix-2026-04-17.css
 *   - css/ux-fixes-2026-04-17.css
 *   - css/auth-modal-perf-fix.css
 *   - css/fixes-2026-04-17-v2.css
 *   - css/draw-guess-bigger-2026-04-18.css
 *   - css/games-per-game-settings-2026-04-18.css
 * ============================================================ */

/* ─────────── SOURCE: css/style.css ─────────── */
/* ============ KAWKAB ELASHKEF V3 - BENRATI GOLDEN RAMADAN THEME ============ */

/* ============ LOADING SCREEN ============ */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: #0A0714;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.8s ease, visibility 0.8s ease;
  overflow: hidden;
}

.loading-screen.fade-out {
  opacity: 0;
  visibility: hidden;
}

.loading-screen::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(45, 27, 105, 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 60%, rgba(124, 58, 237, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(232, 183, 48, 0.06) 0%, transparent 60%);
}

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

/* Stars */
.loading-stars {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.loading-star {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: loading-twinkle var(--dur) ease-in-out infinite;
  animation-delay: var(--del);
}

.loading-star.gold {
  background: var(--benrati-light, #F5D56A);
  box-shadow: 0 0 4px rgba(232, 183, 48, 0.6);
}

@keyframes loading-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.3); }
}

/* Planet wrapper */
.loading-planet-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 30px;
}

/* Orbit rings */
.loading-orbit-ring {
  position: absolute;
  border: 1px solid;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading-orbit-1 {
  width: 160px;
  height: 160px;
  border-color: rgba(232, 183, 48, 0.15);
  animation: loading-orbit-spin 8s linear infinite;
}

.loading-orbit-2 {
  width: 190px;
  height: 190px;
  border-color: rgba(124, 58, 237, 0.12);
  animation: loading-orbit-spin 12s linear infinite reverse;
}

.loading-orbit-3 {
  width: 130px;
  height: 130px;
  border-color: rgba(255, 255, 255, 0.08);
  animation: loading-orbit-spin 6s linear infinite;
}

@keyframes loading-orbit-spin {
  0% { transform: translate(-50%, -50%) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Planet core with logo */
.loading-planet-core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(232, 183, 48, 0.15), rgba(10, 7, 20, 0.9));
  border: 2px solid rgba(232, 183, 48, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 30px rgba(232, 183, 48, 0.3),
    0 0 60px rgba(232, 183, 48, 0.1),
    inset 0 0 20px rgba(232, 183, 48, 0.1);
  animation: loading-core-pulse 3s ease-in-out infinite;
  overflow: hidden;
}

.loading-logo-img {
  width: 60px;
  height: 60px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(232, 183, 48, 0.5));
}

@keyframes loading-core-pulse {
  0%, 100% {
    box-shadow:
      0 0 30px rgba(232, 183, 48, 0.3),
      0 0 60px rgba(232, 183, 48, 0.1);
  }
  50% {
    box-shadow:
      0 0 50px rgba(232, 183, 48, 0.5),
      0 0 100px rgba(232, 183, 48, 0.2),
      0 0 150px rgba(232, 183, 48, 0.05);
  }
}

/* Orbiting particles */
.loading-orbit-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
}

.loading-orbit-particle.p1 {
  background: #FFD700;
  box-shadow: 0 0 10px #FFD700, 0 0 20px rgba(255, 215, 0, 0.5);
  animation: loading-particle-orbit-1 4s linear infinite;
}

.loading-orbit-particle.p2 {
  background: #A78BFA;
  box-shadow: 0 0 10px #A78BFA, 0 0 20px rgba(167, 139, 250, 0.5);
  width: 4px;
  height: 4px;
  animation: loading-particle-orbit-2 6s linear infinite;
}

.loading-orbit-particle.p3 {
  background: #F5D56A;
  box-shadow: 0 0 8px #F5D56A;
  width: 5px;
  height: 5px;
  animation: loading-particle-orbit-3 5s linear infinite;
}

.loading-orbit-particle.p4 {
  background: #67E8F9;
  box-shadow: 0 0 8px #67E8F9;
  width: 3px;
  height: 3px;
  animation: loading-particle-orbit-4 7s linear infinite;
}

@keyframes loading-particle-orbit-1 {
  0% { transform: translate(-50%, -50%) rotate(0deg) translateX(80px) rotate(0deg); }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateX(80px) rotate(-360deg); }
}

@keyframes loading-particle-orbit-2 {
  0% { transform: translate(-50%, -50%) rotate(90deg) translateX(95px) rotate(-90deg); }
  100% { transform: translate(-50%, -50%) rotate(-270deg) translateX(95px) rotate(270deg); }
}

@keyframes loading-particle-orbit-3 {
  0% { transform: translate(-50%, -50%) rotate(200deg) translateX(65px) rotate(-200deg); }
  100% { transform: translate(-50%, -50%) rotate(560deg) translateX(65px) rotate(-560deg); }
}

@keyframes loading-particle-orbit-4 {
  0% { transform: translate(-50%, -50%) rotate(300deg) translateX(75px) rotate(-300deg); }
  100% { transform: translate(-50%, -50%) rotate(-60deg) translateX(75px) rotate(60deg); }
}

/* Title */
.loading-title {
  font-family: 'Cairo', sans-serif;
  font-size: 2.5rem;
  font-weight: 900;
  color: #FFD700;
  margin-bottom: 4px;
  text-shadow:
    0 0 20px rgba(255, 215, 0, 0.5),
    0 0 40px rgba(255, 215, 0, 0.2);
  animation: loading-title-glow 3s ease-in-out infinite;
}

.loading-subtitle {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 4px;
  text-transform: uppercase;
  margin-bottom: 35px;
}

@keyframes loading-title-glow {
  0%, 100% { text-shadow: 0 0 15px rgba(255, 215, 0, 0.4), 0 0 30px rgba(255, 215, 0, 0.15); }
  50% { text-shadow: 0 0 30px rgba(255, 215, 0, 0.7), 0 0 60px rgba(255, 215, 0, 0.3), 0 0 90px rgba(255, 215, 0, 0.1); }
}

/* Loading bar */
.loading-bar-container {
  width: 280px;
  margin: 0 auto 20px;
}

.loading-bar-track {
  position: relative;
  width: 100%;
  height: 4px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
}

.loading-bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #C49A1A, #FFD700, #F5D56A, #FFD700);
  background-size: 200% 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
  animation: loading-bar-shimmer 2s linear infinite;
}

.loading-bar-glow {
  position: absolute;
  top: -4px;
  left: 0;
  height: 12px;
  width: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.4), transparent);
  animation: loading-glow-sweep 2s ease-in-out infinite;
  border-radius: 4px;
}

@keyframes loading-bar-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes loading-glow-sweep {
  0% { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

.loading-percentage {
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  color: rgba(255, 215, 0, 0.6);
  margin-top: 8px;
  letter-spacing: 2px;
}

/* Loading tip */
.loading-tip {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'Cairo', sans-serif;
  animation: loading-tip-fade 3s ease-in-out infinite;
}

@keyframes loading-tip-fade {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.7; }
}

/* Mobile responsive for loading */
@media (max-width: 640px) {
  .loading-planet-wrapper {
    width: 160px;
    height: 160px;
  }
  .loading-planet-core {
    width: 70px;
    height: 70px;
  }
  .loading-logo-img {
    width: 45px;
    height: 45px;
  }
  .loading-title {
    font-size: 1.8rem;
  }
  .loading-bar-container {
    width: 220px;
  }
  .loading-orbit-1 { width: 130px; height: 130px; }
  .loading-orbit-2 { width: 155px; height: 155px; }
  .loading-orbit-3 { width: 105px; height: 105px; }
}

/* ============ MAIN STYLES ============ */
:root {
  /* Benrati Yellow-Gold Primary Palette */
  --benrati: #E8B730;
  --benrati-light: #F5D56A;
  --benrati-dark: #C49A1A;
  --benrati-deep: #9A7810;
  --benrati-glow: rgba(232, 183, 48, 0.4);
  
  /* Gold tones */
  --gold: #FFD700;
  --gold-light: #FFE44D;
  --gold-dark: #B8960F;
  --gold-glow: rgba(255, 215, 0, 0.3);
  
  /* Purple accents */
  --primary: #7C3AED;
  --primary-light: #A78BFA;
  --primary-dark: #5B21B6;
  --purple-deep: #2D1B69;
  --purple-glow: rgba(124, 58, 237, 0.3);
  
  /* Secondary */
  --secondary: #06B6D4;
  --accent: #F59E0B;
  --accent-light: #FBBF24;
  --accent-dark: #D97706;
  
  /* Dark base */
  --dark: #0A0714;
  --dark-light: #120E22;
  --dark-card: #16103A;
  --dark-card-hover: #1E1650;
  
  /* Glass */
  --glass-bg: rgba(22, 16, 58, 0.75);
  --glass-border: rgba(232, 183, 48, 0.15);
  --glass-border-hover: rgba(232, 183, 48, 0.4);
  
  /* Ramadan */
  --ramadan-green: #2DD4BF;
  --ramadan-purple: #8B5CF6;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--dark); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--benrati), var(--gold-dark)); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }

body {
  background: var(--dark);
  font-family: 'Cairo', sans-serif;
  color: white;
  min-height: 100vh;
  overflow-x: hidden;
}

/* ============ CUSTOM CURSOR (BASE STYLES) ============ */
/* Cursor structural styles are now managed in final-fixes-2026.css
   Particle & star animations remain here. */

.cursor-particle {
  position: fixed;
  pointer-events: none;
  z-index: 99997;
  border-radius: 50%;
  opacity: 0;
  animation: cursor-particle-fade 1.2s ease-out forwards;
}
.cursor-star {
  position: fixed;
  pointer-events: none;
  z-index: 99997;
  animation: cursor-star-fade 1s ease-out forwards;
  font-size: 12px;
}

@keyframes cursor-particle-fade {
  0% { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(0) translateY(-20px); }
}
@keyframes cursor-star-fade {
  0% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(0) rotate(180deg) translateY(-30px); }
}

/* ============ GLASSMORPHISM - BENRATI GOLDEN THEME ============ */
.glass-card {
  background: linear-gradient(135deg, rgba(22, 16, 58, 0.85), rgba(10, 7, 20, 0.95));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.glass-card:hover {
  border-color: var(--glass-border-hover);
  box-shadow: 0 8px 40px rgba(232, 183, 48, 0.08);
}

.glass-card-strong {
  background: linear-gradient(135deg, rgba(22, 16, 58, 0.95), rgba(45, 27, 105, 0.88));
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(232, 183, 48, 0.25);
  border-radius: 20px;
}

.glass-nav {
  background: linear-gradient(180deg, rgba(10, 7, 20, 0.97), rgba(10, 7, 20, 0.88));
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(232, 183, 48, 0.1);
}

.glass-btn {
  background: rgba(232, 183, 48, 0.08);
  border: 1px solid rgba(232, 183, 48, 0.2);
  border-radius: 12px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Cairo', sans-serif;
}
.glass-btn:hover {
  background: rgba(232, 183, 48, 0.15);
  border-color: rgba(232, 183, 48, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 4px 18px rgba(232, 183, 48, 0.12);
}

.glass-btn-primary {
  background: linear-gradient(135deg, var(--benrati), var(--gold-dark));
  border: none;
  border-radius: 12px;
  color: #0A0714;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 700;
  font-family: 'Cairo', sans-serif;
  text-shadow: 0 1px 0 rgba(255,255,255,0.15);
}
.glass-btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 30px rgba(232, 183, 48, 0.45);
  background: linear-gradient(135deg, var(--gold), var(--benrati));
}

.glass-btn-outline {
  background: transparent;
  border: 2px solid var(--benrati);
  border-radius: 12px;
  color: var(--benrati);
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
  font-family: 'Cairo', sans-serif;
}
.glass-btn-outline:hover {
  background: rgba(232, 183, 48, 0.1);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(232, 183, 48, 0.2);
}

.glass-btn-danger {
  background: linear-gradient(135deg, #EF4444, #DC2626);
  border: none;
  border-radius: 12px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 600;
}
.glass-btn-danger:hover { transform: scale(1.05); box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); }

.glass-input {
  background: rgba(232, 183, 48, 0.05);
  border: 1px solid rgba(232, 183, 48, 0.15);
  border-radius: 12px;
  color: white;
  padding: 12px 16px;
  outline: none;
  transition: all 0.3s ease;
  font-family: 'Cairo', sans-serif;
}
.glass-input:focus {
  border-color: var(--benrati);
  box-shadow: 0 0 20px rgba(232, 183, 48, 0.15);
  background: rgba(232, 183, 48, 0.08);
}
.glass-input::placeholder { color: rgba(255,255,255,0.25); }
.glass-input option { background: var(--dark-card); color: white; }

/* ============ NAVIGATION ============ */
.nav-btn {
  padding: 8px 18px;
  border-radius: 12px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Cairo', sans-serif;
  font-size: 0.95rem;
  position: relative;
}
.nav-btn:hover { color: var(--benrati-light); }
.nav-btn.active { color: var(--benrati); font-weight: 700; }
.nav-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 20%;
  right: 20%;
  height: 3px;
  background: linear-gradient(90deg, var(--benrati), var(--gold));
  border-radius: 3px;
  box-shadow: 0 0 8px var(--benrati-glow);
}

.mobile-nav-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: all 0.2s;
  font-family: 'Cairo';
  text-align: right;
}
.mobile-nav-btn:hover { background: rgba(232, 183, 48, 0.1); color: var(--benrati); }

/* ============ ANIMATIONS ============ */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes pulse-glow { 0%,100% { box-shadow: 0 0 15px var(--benrati-glow); } 50% { box-shadow: 0 0 40px var(--benrati-glow); } }
@keyframes scale-in { from { transform: scale(0.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes slide-up { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slide-down { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes twinkle { 0%,100% { opacity: 0.2; } 50% { opacity: 1; } }
@keyframes fall { 0% { transform: translateY(-10vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0; } }
@keyframes moon-glow { 0%,100% { filter: drop-shadow(0 0 20px rgba(232,183,48,0.4)); } 50% { filter: drop-shadow(0 0 50px rgba(232,183,48,0.9)); } }
@keyframes lantern-swing { 0%,100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-6px); } }
@keyframes lantern-glow { 0%,100% { filter: drop-shadow(0 0 8px rgba(232,183,48,0.6)); } 50% { filter: drop-shadow(0 0 25px rgba(232,183,48,0.95)); } }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes glow-pulse { 0%,100% { box-shadow: 0 0 5px currentColor; } 50% { box-shadow: 0 0 20px currentColor, 0 0 40px currentColor; } }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes flip-in { from { transform: rotateY(90deg); opacity: 0; } to { transform: rotateY(0); opacity: 1; } }
@keyframes spin-slow { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes scroll-indicator { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(10px); opacity: 0.5; } }
@keyframes gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes text-glow {
  0%,100% { text-shadow: 0 0 10px rgba(232,183,48,0.3); }
  50% { text-shadow: 0 0 30px rgba(232,183,48,0.7), 0 0 60px rgba(232,183,48,0.3); }
}

/* Cannon Fire Animation */
@keyframes cannon-fire {
  0% { transform: scale(1) rotate(0deg); }
  10% { transform: scale(1.4) rotate(-8deg); }
  20% { transform: scale(1.5) rotate(5deg); }
  30% { transform: scale(0.9) rotate(-2deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes cannon-shake {
  0%,100% { transform: translateX(0) translateY(0); }
  10% { transform: translateX(-3px) translateY(-2px); }
  20% { transform: translateX(3px) translateY(2px); }
  30% { transform: translateX(-2px) translateY(1px); }
  40% { transform: translateX(2px) translateY(-1px); }
}
@keyframes smoke-rise {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-120px) scale(2.5); }
}
@keyframes firework-burst {
  0% { opacity: 1; transform: scale(0) translate(0,0); }
  50% { opacity: 1; }
  100% { opacity: 0; transform: scale(1) translate(var(--tx), var(--ty)); }
}
@keyframes star-shoot {
  0% { transform: translate(0,0) scale(1); opacity: 1; }
  100% { transform: translate(-200px, 200px) scale(0); opacity: 0; }
}
@keyframes hero-glow { 0%,100% { opacity: 0.3; } 50% { opacity: 0.6; } }
@keyframes horror-flicker {
  0%,100% { opacity: 1; }
  50% { opacity: 0.85; }
  75% { opacity: 0.95; }
}

/* Ramadan specific */
@keyframes crescent-pulse {
  0%,100% { transform: scale(1); filter: drop-shadow(0 0 20px rgba(232,183,48,0.5)); }
  50% { transform: scale(1.05); filter: drop-shadow(0 0 40px rgba(232,183,48,0.9)); }
}
@keyframes star-twinkle-gold {
  0%,100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.2); }
}
@keyframes particle-float {
  0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(20px) rotate(360deg); opacity: 0; }
}

.animate-scale-in { animation: scale-in 0.3s ease; }
.animate-slide-up { animation: slide-up 0.5s ease both; }
.animate-fade-in { animation: fade-in 0.4s ease; }
.animate-float { animation: float 3s ease-in-out infinite; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }
.animate-bounce { animation: bounce 2s ease-in-out infinite; }
.animate-shake { animation: shake 0.5s ease-in-out; }
.animate-flip { animation: flip-in 0.5s ease; }
.animate-text-glow { animation: text-glow 3s ease-in-out infinite; }

/* ============ WELCOME TEXT STYLES ============ */
.welcome-title-wrapper {
  text-align: center;
}

.welcome-text-line {
  color: #ffffff !important;
  text-shadow: 
    0 0 15px rgba(255, 255, 255, 0.5),
    0 0 30px rgba(255, 255, 255, 0.3),
    0 0 60px rgba(255, 255, 255, 0.15),
    0 0 80px rgba(255, 255, 255, 0.1);
  animation: welcome-glow 3s ease-in-out infinite;
  letter-spacing: 2px;
  position: relative;
  display: inline-block;
}

.welcome-text-line::before,
.welcome-text-line::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  animation: welcome-line-pulse 3s ease-in-out infinite;
}

.welcome-text-line::before {
  right: calc(100% + 15px);
}

.welcome-text-line::after {
  left: calc(100% + 15px);
}

@keyframes welcome-glow {
  0%, 100% {
    text-shadow: 
      0 0 10px rgba(255, 255, 255, 0.4),
      0 0 20px rgba(255, 255, 255, 0.2),
      0 0 40px rgba(255, 255, 255, 0.1);
  }
  50% {
    text-shadow: 
      0 0 20px rgba(255, 255, 255, 0.7),
      0 0 40px rgba(255, 255, 255, 0.4),
      0 0 80px rgba(255, 255, 255, 0.2),
      0 0 100px rgba(255, 255, 255, 0.1);
  }
}

@keyframes welcome-line-pulse {
  0%, 100% { opacity: 0.3; width: 40px; }
  50% { opacity: 0.8; width: 80px; }
}

/* ============ HERO SECTION ============ */
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(ellipse at 30% 20%, rgba(45, 27, 105, 0.7) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(124, 58, 237, 0.15) 0%, transparent 40%),
    radial-gradient(ellipse at 50% 50%, rgba(232, 183, 48, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #0A0714 0%, #120E22 50%, #0A0714 100%);
}
.hero-stars { position: absolute; inset: 0; overflow: hidden; }
.hero-stars .star {
  position: absolute;
  width: 2px; height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkle var(--duration) ease-in-out infinite;
  animation-delay: var(--delay);
}
.hero-stars .star.big {
  width: 3px; height: 3px;
  background: var(--benrati-light);
  box-shadow: 0 0 8px var(--benrati-glow);
}

/* Crown Icon */
.crown-icon {
  width: 110px; height: 110px;
  border-radius: 50%;
  border: 3px solid var(--benrati);
  display: flex; align-items: center; justify-content: center;
  font-size: 3.5rem;
  margin: 0 auto 2rem;
  animation: pulse-glow 3s ease-in-out infinite;
  background: rgba(232, 183, 48, 0.06);
  box-shadow: 0 0 40px rgba(232, 183, 48, 0.15);
}

/* Ramadan Hero Decorations */
.hero-moon {
  position: absolute;
  top: 8%; left: 5%;
  font-size: 6rem;
  animation: crescent-pulse 4s ease-in-out infinite;
  z-index: 2;
}
.hero-lantern {
  position: absolute;
  animation: lantern-swing 4s ease-in-out infinite, lantern-glow 3s ease-in-out infinite;
  transform-origin: top center;
  z-index: 2;
  font-size: 2rem;
}

/* Stats badges in hero */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border-radius: 50px;
  background: rgba(232, 183, 48, 0.08);
  border: 1px solid rgba(232, 183, 48, 0.2);
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  transition: all 0.3s;
}
.hero-badge:hover {
  background: rgba(232, 183, 48, 0.18);
  border-color: rgba(232, 183, 48, 0.45);
  transform: translateY(-2px);
}
.hero-badge i, .hero-badge .badge-icon { color: var(--benrati); }

/* ============ GAME CARDS - PREMIUM BENRATI DESIGN ============ */
.game-card {
  background: linear-gradient(180deg, var(--dark-card) 0%, rgba(10,7,20,0.98) 100%);
  border: 1px solid rgba(232, 183, 48, 0.08);
  border-radius: 20px;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  position: relative;
}
.game-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, transparent, rgba(232,183,48,0.15), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}
.game-card:hover::before { opacity: 1; }
.game-card:hover {
  transform: translateY(-10px);
  border-color: rgba(232, 183, 48, 0.25);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(232, 183, 48, 0.08);
}

.game-card .game-image {
  width: 100%; height: 280px;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--purple-deep), var(--dark-card));
}
.game-card .game-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.game-card:hover .game-image img { transform: scale(1.1); }

.game-card .game-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,7,20,1) 0%, rgba(10,7,20,0.3) 40%, transparent 70%);
  z-index: 1;
}
.game-card .game-icon-overlay {
  position: absolute; z-index: 2;
  font-size: 4rem;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5));
  opacity: 0;
  display: none;
}
.game-card .game-badges {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 5;
  display: flex; gap: 6px;
}
.game-card .game-badge-new {
  background: linear-gradient(135deg, #10B981, #059669);
  color: white;
  font-size: 0.7rem;
  padding: 4px 12px;
  border-radius: 50px;
  font-weight: 700;
  display: flex; align-items: center; gap: 4px;
  box-shadow: 0 2px 10px rgba(16,185,129,0.3);
}
.game-card .game-badge-updated {
  background: linear-gradient(135deg, var(--benrati), var(--gold-dark));
  color: #0A0714;
  font-size: 0.7rem;
  padding: 4px 12px;
  border-radius: 50px;
  font-weight: 700;
  display: flex; align-items: center; gap: 4px;
  box-shadow: 0 2px 10px rgba(232,183,48,0.3);
}
.game-card .game-badge-ramadan {
  background: linear-gradient(135deg, #7C3AED, #A855F7);
  color: white;
  font-size: 0.7rem;
  padding: 4px 12px;
  border-radius: 50px;
  font-weight: 700;
  display: flex; align-items: center; gap: 4px;
  box-shadow: 0 2px 10px rgba(124,58,237,0.3);
}
.game-card .platform-icons {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 5;
  display: flex; gap: 4px;
}
.game-card .platform-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  backdrop-filter: blur(10px);
}
.game-card .platform-icon.kick { background: rgba(83,252,24,0.2); border: 1px solid rgba(83,252,24,0.3); color: #53FC18; }
.game-card .platform-icon.twitch { background: rgba(145,70,255,0.2); border: 1px solid rgba(145,70,255,0.3); color: #9146FF; }

.game-card .game-info {
  padding: 16px 20px 20px;
  position: relative;
}
.game-card .game-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: white;
  margin-bottom: 4px;
}
.game-card .game-desc {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
  margin-bottom: 12px;
}
.game-card .game-tags {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.game-card .game-tag {
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 50px;
  background: rgba(232, 183, 48, 0.08);
  border: 1px solid rgba(232, 183, 48, 0.15);
  color: var(--benrati-light);
  display: flex; align-items: center; gap: 4px;
}
.game-card .game-tag i { font-size: 0.6rem; }

/* ============ RAMADAN SECTION - ENHANCED ============ */
.ramadan-cannon-section {
  background: linear-gradient(135deg, rgba(45, 27, 105, 0.35), rgba(10, 7, 20, 0.92));
  border: 1px solid rgba(232, 183, 48, 0.18);
  border-radius: 24px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}
.ramadan-cannon-section::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(232,183,48,0.04) 0%, transparent 60%);
  animation: spin-slow 30s linear infinite;
}
.cannon-emoji {
  font-size: 4rem;
  display: inline-block;
  transition: transform 0.3s;
}
.cannon-emoji.firing { animation: cannon-fire 0.6s ease-out; }
.cannon-smoke {
  position: absolute;
  animation: smoke-rise 1.5s ease-out forwards;
  font-size: 2rem;
  pointer-events: none;
}

/* Firework particle */
.firework-particle {
  position: fixed;
  pointer-events: none;
  z-index: 200;
  font-size: 1.5rem;
  animation: firework-burst 1.5s ease-out forwards;
}

.timer-digit {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 75px; height: 85px;
  background: linear-gradient(135deg, rgba(232,183,48,0.12), rgba(232,183,48,0.03));
  border: 1px solid rgba(232,183,48,0.25);
  border-radius: 18px;
  font-size: 2.5rem;
  font-weight: 900;
  color: var(--benrati);
  font-family: 'Poppins', sans-serif;
  text-shadow: 0 0 25px rgba(232,183,48,0.4);
}
.timer-label {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
}
.timer-separator {
  font-size: 2rem;
  color: var(--benrati);
  font-weight: 900;
  animation: twinkle 1s ease-in-out infinite;
}

/* ============ RAMADAN DECORATIONS OVERLAY ============ */
.ramadan-lantern {
  position: absolute;
  animation: lantern-swing 3s ease-in-out infinite, lantern-glow 4s ease-in-out infinite;
  transform-origin: top center;
}
.ramadan-moon { animation: crescent-pulse 4s ease-in-out infinite; }
.falling-star {
  position: absolute;
  animation: fall var(--duration) linear infinite;
  animation-delay: var(--delay);
  opacity: 0.4;
}

/* Floating Ramadan particles */
.ramadan-particle {
  position: absolute;
  animation: particle-float var(--duration, 8s) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0.3;
  font-size: var(--size, 1rem);
}

/* ============ STREAMER SECTION ============ */
.streamer-avatar {
  width: 180px; height: 180px;
  border-radius: 24px;
  border: 3px solid var(--benrati);
  box-shadow: 0 0 35px rgba(232,183,48,0.2);
  object-fit: cover;
  transition: all 0.3s ease;
}
.streamer-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 0 55px rgba(232,183,48,0.4);
}

/* ============ STREAM PAGE ============ */
.stream-container {
  aspect-ratio: 16/9;
  background: rgba(0,0,0,0.5);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
}

/* ============ ADMIN DASHBOARD ============ */
.admin-sidebar-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: transparent;
  border: none;
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
  text-align: right;
  font-family: 'Cairo';
}
.admin-sidebar-btn:hover { background: rgba(232, 183, 48, 0.08); color: var(--benrati-light); }
.admin-sidebar-btn.active { background: rgba(232, 183, 48, 0.12); color: var(--benrati); border-right: 3px solid var(--benrati); }

.stat-card {
  background: linear-gradient(135deg, var(--glass-bg), rgba(10,7,20,0.8));
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 24px;
  transition: all 0.3s;
}
.stat-card:hover { border-color: var(--glass-border-hover); box-shadow: 0 8px 30px rgba(232,183,48,0.08); }

/* Image upload area */
.image-upload-area {
  border: 2px dashed rgba(232, 183, 48, 0.25);
  border-radius: 16px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
  background: rgba(232, 183, 48, 0.02);
}
.image-upload-area:hover {
  border-color: rgba(232, 183, 48, 0.5);
  background: rgba(232, 183, 48, 0.05);
}
.image-upload-area.dragover {
  border-color: var(--benrati);
  background: rgba(232, 183, 48, 0.1);
}

/* ============ TOAST ============ */
.toast {
  padding: 14px 28px;
  border-radius: 14px;
  font-size: 0.9rem;
  animation: slide-down 0.4s ease;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.1);
  min-width: 250px;
  text-align: center;
  font-weight: 600;
}
.toast-success { background: rgba(16, 185, 129, 0.88); }
.toast-error { background: rgba(239, 68, 68, 0.88); }
.toast-info { background: rgba(232, 183, 48, 0.88); color: #0A0714; }

/* ============ CODENAMES GAME - PREMIUM REDESIGN ============ */
.cn-lobby { max-width: 800px; margin: 0 auto; }
.cn-team-card {
  border-radius: 20px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  min-height: 200px;
}
.cn-team-card:hover { transform: translateY(-4px); }
.cn-team-red {
  background: linear-gradient(135deg, rgba(239,68,68,0.15), rgba(239,68,68,0.03));
  border: 2px solid rgba(239,68,68,0.3);
}
.cn-team-red:hover, .cn-team-red.selected { border-color: rgba(239,68,68,0.7); box-shadow: 0 0 30px rgba(239,68,68,0.15); }
.cn-team-blue {
  background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(59,130,246,0.03));
  border: 2px solid rgba(59,130,246,0.3);
}
.cn-team-blue:hover, .cn-team-blue.selected { border-color: rgba(59,130,246,0.7); box-shadow: 0 0 30px rgba(59,130,246,0.15); }

.cn-role-btn {
  padding: 10px 20px;
  border-radius: 14px;
  font-weight: 600;
  transition: all 0.3s;
  cursor: pointer;
  border: 2px solid transparent;
  font-family: 'Cairo', sans-serif;
}
.cn-role-btn:hover { transform: scale(1.03); }

/* Codenames Board */
.cn-board-wrapper {
  background: linear-gradient(135deg, rgba(22, 16, 58, 0.5), rgba(10, 7, 20, 0.8));
  border: 1px solid rgba(232, 183, 48, 0.1);
  border-radius: 20px;
  padding: 16px;
}
.codename-card {
  padding: 14px 8px;
  border-radius: 14px;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid transparent;
  font-size: 0.85rem;
  min-height: 70px;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
  font-family: 'Cairo', sans-serif;
  background: linear-gradient(135deg, rgba(45, 27, 105, 0.4), rgba(22, 16, 58, 0.6));
  border-color: rgba(232, 183, 48, 0.15);
  color: white;
}
.codename-card::before {
  content: '';
  position: absolute; inset: 0;
  opacity: 0;
  background: radial-gradient(circle, rgba(232,183,48,0.1), transparent);
  transition: opacity 0.3s;
}
.codename-card:hover::before { opacity: 1; }
.codename-card.unrevealed:hover {
  transform: translateY(-3px);
  border-color: rgba(232, 183, 48, 0.4);
  box-shadow: 0 6px 20px rgba(232, 183, 48, 0.1);
}
.codename-card.red {
  background: linear-gradient(135deg, rgba(239,68,68,0.5), rgba(239,68,68,0.25));
  border-color: rgba(239,68,68,0.6);
  box-shadow: inset 0 0 20px rgba(239,68,68,0.1);
}
.codename-card.blue {
  background: linear-gradient(135deg, rgba(59,130,246,0.5), rgba(59,130,246,0.25));
  border-color: rgba(59,130,246,0.6);
  box-shadow: inset 0 0 20px rgba(59,130,246,0.1);
}
.codename-card.neutral { background: rgba(156,163,175,0.2); border-color: rgba(156,163,175,0.3); }
.codename-card.assassin {
  background: linear-gradient(135deg, rgba(0,0,0,0.8), rgba(50,0,0,0.5));
  border-color: rgba(255,0,0,0.5);
  color: #EF4444;
  box-shadow: inset 0 0 20px rgba(255,0,0,0.1);
}
.codename-card.revealed { opacity: 0.65; pointer-events: none; }

/* ============ OTHER GAME STYLES ============ */
.spy-card {
  background: var(--glass-bg);
  border: 2px solid var(--glass-border);
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  transition: all 0.5s;
  cursor: pointer;
  min-height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.spy-card.revealed-spy {
  background: linear-gradient(135deg, rgba(239,68,68,0.4), rgba(220,38,38,0.2));
  border-color: rgba(239,68,68,0.6);
  animation: glow-pulse 2s ease-in-out infinite;
  color: #EF4444;
}
.spy-card.revealed-normal {
  background: linear-gradient(135deg, rgba(16,185,129,0.3), rgba(16,185,129,0.1));
  border-color: rgba(16,185,129,0.5);
}

.qa-option {
  padding: 16px 20px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.3s;
  border: 2px solid rgba(232, 183, 48, 0.15);
  background: rgba(232, 183, 48, 0.04);
}
.qa-option:hover { background: rgba(232, 183, 48, 0.1); transform: translateX(-5px); border-color: rgba(232,183,48,0.35); }
.qa-option.correct { background: rgba(16,185,129,0.3); border-color: rgba(16,185,129,0.6); }
.qa-option.wrong { background: rgba(239,68,68,0.3); border-color: rgba(239,68,68,0.6); }

.country-flag {
  font-size: 4rem;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
  transition: transform 0.3s;
}
.country-flag:hover { transform: scale(1.2); }

.memory-card {
  aspect-ratio: 1;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.4s;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  background: rgba(232, 183, 48, 0.05);
  border: 2px solid rgba(232, 183, 48, 0.15);
}
.memory-card:hover { transform: scale(1.05); border-color: var(--benrati); }
.memory-card.flipped { background: rgba(232, 183, 48, 0.15); border-color: var(--benrati); }
.memory-card.matched { background: rgba(16,185,129,0.2); border-color: rgba(16,185,129,0.5); pointer-events: none; }

/* Horror Game */
.horror-scene { position: relative; overflow: hidden; }
.horror-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.7));
  pointer-events: none; z-index: 1;
}
.horror-image-container {
  width: 200px; height: 200px;
  margin: 0 auto;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(239,68,68,0.3);
  box-shadow: 0 0 30px rgba(239,68,68,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 5rem;
  background: rgba(0,0,0,0.3);
}

/* ============ SECTION HEADERS ============ */
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header h2 {
  font-size: 2.5rem;
  font-weight: 900;
  color: white;
  margin-bottom: 0.5rem;
}
.section-header .gold-text { color: var(--benrati); }
.section-header p {
  color: rgba(255,255,255,0.5);
  font-size: 1.1rem;
}
.section-divider {
  width: 80px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--benrati), transparent);
  margin: 1rem auto;
  border-radius: 2px;
  box-shadow: 0 0 10px var(--benrati-glow);
}

/* ============ FOOTER ============ */
.site-footer {
  background: linear-gradient(180deg, transparent, rgba(10, 7, 20, 0.97));
  border-top: 1px solid rgba(232, 183, 48, 0.08);
  padding: 3rem 0 2rem;
}
.footer-social-link {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(232, 183, 48, 0.05);
  border: 1px solid rgba(232, 183, 48, 0.1);
  color: rgba(255,255,255,0.5);
  transition: all 0.3s;
  font-size: 1.1rem;
}
.footer-social-link:hover {
  background: rgba(232, 183, 48, 0.18);
  border-color: var(--benrati);
  color: var(--benrati);
  transform: translateY(-3px);
}

/* ============ LTR SUPPORT ============ */
html[dir="ltr"] .admin-sidebar-btn.active { border-right: none; border-left: 3px solid var(--benrati); }
html[dir="ltr"] .admin-sidebar-btn, html[dir="ltr"] .mobile-nav-btn { text-align: left; }
html[dir="ltr"] .game-card .game-badges { left: 12px; right: auto; }
html[dir="ltr"] .game-card .platform-icons { right: 12px; left: auto; }

/* ============ ENHANCED NAVIGATION ============ */
.nav-logo-glow {
  border: 2px solid rgba(232,183,48,0.3);
  box-shadow: 0 0 15px rgba(232,183,48,0.15);
  transition: all 0.3s;
}
.nav-logo-glow:hover {
  box-shadow: 0 0 25px rgba(232,183,48,0.35);
  border-color: rgba(232,183,48,0.6);
}
.nav-title-gradient {
  background: linear-gradient(135deg, var(--gold), var(--benrati-light), var(--gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% auto;
  animation: gradient-shift 4s ease infinite;
}

/* ============ HERO CHARACTER ============ */

/* Outer wrapper - holds the circle + external glow + particles */
.hero-character-outer {
  position: relative;
  display: inline-block;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}

/* The main circular container - clips everything inside */
.hero-character-circle {
  --halo-color: #E8B730;
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--halo-color);
  box-shadow: 
    0 0 20px rgba(232,183,48,0.15),
    0 0 40px rgba(232,183,48,0.08),
    inset 0 0 30px rgba(232,183,48,0.05);
  z-index: 3;
  animation: float 4s ease-in-out infinite;
}

/* Halo glow background BEHIND the character - inside the circle */
.hero-character-halo-bg {
  --halo-color: #E8B730;
  --halo-intensity: 60;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    circle at 50% 40%,
    rgba(232,183,48,calc(var(--halo-intensity) * 0.005)) 0%,
    rgba(232,183,48,calc(var(--halo-intensity) * 0.003)) 30%,
    rgba(232,183,48,calc(var(--halo-intensity) * 0.001)) 60%,
    transparent 80%
  );
  animation: haloGlowBg 4s ease-in-out infinite;
}

@keyframes haloGlowBg {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Character image - positioned inside circle, only image moves via top/left offsets */
.hero-character-img {
  width: 340px;
  height: 340px;
  object-fit: contain;
  object-position: center top;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  /* Use CSS custom properties for offset from admin panel */
  /* --char-offset-y: vertical shift (negative=up, positive=down) */
  /* --char-offset-x: horizontal shift (negative=left, positive=right) */
  transition: width 0.3s ease, height 0.3s ease;
}

/* Character ABOVE circle mode - no clipping, character floats on top */
.hero-character-circle.char-above-circle {
  overflow: visible;
}
.hero-character-circle.char-above-circle .hero-character-img {
  z-index: 5;
}
.hero-character-circle.char-above-circle .hero-character-halo-bg {
  border-radius: 50%;
  overflow: hidden;
}

/* Soft glow behind the circle (external, not clipped) */
.hero-character-outer .hero-character-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,183,48,0.2) 0%, rgba(232,183,48,0.06) 40%, transparent 70%);
  z-index: 0;
  animation: hero-glow 4s ease-in-out infinite;
  pointer-events: none;
}

/* Particles outside the circle */
.hero-character-particles {
  position: absolute;
  inset: -30px;
  z-index: 4;
  pointer-events: none;
}
.hero-float-particle {
  position: absolute;
  background: var(--benrati);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--benrati-glow);
  animation: particle-float-hero ease-in-out infinite;
}
@keyframes particle-float-hero {
  0%,100% { transform: translateY(0) scale(1); opacity: 0.3; }
  50% { transform: translateY(-20px) scale(1.3); opacity: 0.8; }
}

/* ============ SHOOTING STARS ============ */
.shooting-star {
  position: absolute;
  width: 4px;
  height: 4px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 6px white, -40px 0 8px rgba(255,255,255,0.5), -80px 0 6px rgba(255,255,255,0.2);
  animation: star-shoot 4s ease-in-out infinite;
}

/* ============ ABOUT SECTION - PREMIUM ============ */
.about-streamer-premium {
  position: relative;
  background: linear-gradient(135deg, rgba(22, 16, 58, 0.9), rgba(10, 7, 20, 0.95));
  border: 1px solid rgba(232, 183, 48, 0.12);
  border-radius: 28px;
  padding: 3rem;
  overflow: hidden;
}
.about-bg-decor {
  position: absolute;
  top: -50%;
  right: -20%;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,183,48,0.06) 0%, transparent 60%);
  animation: spin-slow 40s linear infinite;
}
.about-content-wrapper {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}
.about-portrait-side {
  flex-shrink: 0;
  text-align: center;
}
.about-portrait-frame {
  position: relative;
  width: 220px;
  height: 280px;
  border-radius: 24px;
  overflow: hidden;
  border: 3px solid var(--benrati);
  box-shadow: 0 0 40px rgba(232,183,48,0.2);
}
.about-portrait-glow {
  position: absolute;
  inset: -10px;
  background: radial-gradient(circle at center, rgba(232,183,48,0.15), transparent 70%);
  z-index: 0;
}
.about-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: 1;
  transition: transform 0.5s;
}
.about-portrait-frame:hover .about-portrait-img {
  transform: scale(1.05);
}
.about-username-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 20px;
  border-radius: 50px;
  background: rgba(22, 16, 58, 0.95);
  border: 1px solid rgba(232, 183, 48, 0.25);
  font-size: 0.9rem;
  font-weight: 700;
}
.about-bio-side {
  flex: 1;
  padding-top: 0.5rem;
}
.about-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 50px;
  background: rgba(232, 183, 48, 0.06);
  border: 1px solid rgba(232, 183, 48, 0.15);
  font-size: 0.85rem;
  color: rgba(255,255,255,0.9);
  transition: all 0.3s;
}
.about-tag:hover {
  background: rgba(232, 183, 48, 0.15);
  border-color: rgba(232, 183, 48, 0.4);
}
.about-quote {
  position: relative;
  padding: 1.2rem 1.5rem;
  border-radius: 16px;
  background: rgba(232, 183, 48, 0.04);
  border: 1px solid rgba(232, 183, 48, 0.15);
  border-right: 4px solid var(--benrati);
}
html[dir="ltr"] .about-quote {
  border-right: 1px solid rgba(232, 183, 48, 0.15);
  border-left: 4px solid var(--benrati);
}
.about-quote-marks {
  position: absolute;
  top: -8px;
  right: 16px;
  font-size: 2rem;
  font-weight: 900;
  color: var(--benrati);
  opacity: 0.5;
  line-height: 1;
}
html[dir="ltr"] .about-quote-marks { right: auto; left: 16px; }
.about-quote p {
  color: rgba(255,255,255,0.75);
  font-size: 0.95rem;
  font-style: italic;
  line-height: 1.7;
}
.about-platform-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.8);
  font-size: 0.9rem;
  transition: all 0.3s;
  text-decoration: none;
}
.about-platform-link:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px color-mix(in srgb, var(--accent) 20%, transparent);
}

/* ============ RAMADAN WATERMARK ============ */
.ramadan-watermark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(4rem, 12vw, 10rem);
  font-weight: 900;
  color: rgba(232, 183, 48, 0.04);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  font-family: 'Cairo', sans-serif;
}

/* ============ MOSQUE SILHOUETTE ============ */
.mosque-silhouette {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,120 L0,100 Q25,60 50,100 L50,80 Q60,40 70,80 L70,100 Q80,50 90,100 L90,60 Q100,20 110,60 L110,100 Q120,70 130,100 L200,100 L200,40 Q210,0 220,40 L220,100 L300,100 L300,70 Q320,30 340,70 L340,100 L400,100 L400,90 Q410,60 420,90 L420,100 L450,100 L450,50 L455,20 L460,50 L460,100 L500,100 Q520,80 540,100 L600,100 L600,30 Q620,-10 640,30 L640,100 L700,100 L700,80 Q720,50 740,80 L740,100 L800,100 L800,60 L805,25 L810,60 L810,100 L850,100 Q870,70 890,100 L950,100 L950,45 Q970,5 990,45 L990,100 L1050,100 L1050,85 Q1060,55 1070,85 L1070,100 L1100,100 L1100,70 L1105,35 L1110,70 L1110,100 L1200,100 L1200,120 Z' fill='rgba(10,7,20,0.4)'/%3E%3C/svg%3E") no-repeat bottom;
  background-size: cover;
  z-index: 1;
  pointer-events: none;
  opacity: 0.5;
}

/* ============ BACKGROUND AUDIO CONTROL ============ */
.bg-audio-control {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 100;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(22, 16, 58, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(232, 183, 48, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--benrati);
  font-size: 1.1rem;
  transition: all 0.3s;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.bg-audio-control:hover {
  background: rgba(232, 183, 48, 0.15);
  border-color: var(--benrati);
  transform: scale(1.1);
}
html[dir="ltr"] .bg-audio-control { left: 24px; right: auto; }
html[dir="rtl"] .bg-audio-control { right: 24px; left: auto; }

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
  .game-card .game-image { height: 220px; }
  .hero-moon { font-size: 3.5rem; top: 5%; left: 3%; }
  .hero-lantern { font-size: 1.5rem; }
  .timer-digit { width: 55px; height: 65px; font-size: 2rem; }
  .crown-icon { width: 75px; height: 75px; font-size: 2.2rem; }
  .codename-card { font-size: 0.7rem; padding: 8px 4px; min-height: 55px; }
  .streamer-avatar { width: 120px; height: 120px; }
  .section-header h2 { font-size: 1.8rem; }
  .hero-character-img { width: 240px !important; height: 240px !important; }
  .hero-character-circle { width: 220px !important; height: 220px !important; }
  .hero-character-outer .hero-character-glow { width: 260px; height: 260px; }
  .about-content-wrapper { flex-direction: column; align-items: center; text-align: center; }
  .about-portrait-frame { width: 180px; height: 230px; }
  .about-streamer-premium { padding: 1.5rem; }
  .about-quote { border-right: 1px solid rgba(232, 183, 48, 0.15); border-bottom: 4px solid var(--benrati); }
  .ramadan-watermark { font-size: 3rem; }
  .global-mosque-silhouette { height: 100px; }
}
@media (max-width: 480px) {
  .game-card .game-image { height: 180px; }
  .codename-card { font-size: 0.6rem; padding: 6px 2px; min-height: 45px; }
  .timer-digit { width: 45px; height: 55px; font-size: 1.5rem; }
  .global-mosque-silhouette { height: 70px; }
}

/* ============ GAME INFO BUTTON ============ */
.game-info-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(232, 183, 48, 0.1);
  border: 1px solid rgba(232, 183, 48, 0.25);
  color: var(--benrati);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: all 0.3s;
  flex-shrink: 0;
}
.game-info-btn:hover {
  background: rgba(232, 183, 48, 0.25);
  border-color: var(--benrati);
  transform: scale(1.1);
  box-shadow: 0 0 12px rgba(232, 183, 48, 0.3);
}

/* ============ GLOBAL MOSQUE SILHOUETTE (ALL PAGES) ============ */
.global-mosque-silhouette {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 150' preserveAspectRatio='none'%3E%3Cpath d='M0,150 L0,120 Q15,95 30,120 L30,105 Q40,70 50,105 L50,120 Q60,85 70,120 L70,90 Q80,50 90,90 L90,120 Q100,80 110,120 L110,100 Q120,60 130,100 L200,100 L200,50 Q210,10 220,50 L220,100 L250,100 L250,85 Q260,55 270,85 L270,100 L300,100 L300,70 Q320,20 340,70 L340,100 L380,100 L380,90 Q390,55 400,90 L400,100 L430,100 L430,60 L435,25 L440,60 L440,100 L480,100 Q500,80 520,100 L560,100 L560,85 Q575,50 590,85 L590,100 L620,100 L620,40 Q640,0 660,40 L660,100 L700,100 L700,80 Q720,45 740,80 L740,100 L780,100 L780,65 L785,30 L790,65 L790,100 L830,100 Q850,70 870,100 L920,100 L920,50 Q940,10 960,50 L960,100 L1000,100 L1000,85 Q1010,55 1020,85 L1020,100 L1060,100 L1060,75 L1065,40 L1070,75 L1070,100 L1110,100 L1110,90 Q1125,60 1140,90 L1140,100 L1180,100 L1180,70 Q1200,30 1220,70 L1220,100 L1260,100 L1260,95 Q1270,70 1280,95 L1280,100 L1320,100 L1320,80 Q1340,50 1360,80 L1360,100 L1400,100 L1400,150 Z' fill='rgba(10,7,20,0.6)'/%3E%3Cpath d='M0,150 L0,130 Q30,110 60,130 L100,130 L100,110 Q115,80 130,110 L130,130 L200,130 L200,100 Q220,70 240,100 L240,130 L350,130 L350,115 L355,85 L360,115 L360,130 L450,130 L450,110 Q470,80 490,110 L490,130 L600,130 L600,95 Q620,60 640,95 L640,130 L750,130 L750,120 Q770,95 790,120 L790,130 L900,130 L900,105 L905,75 L910,105 L910,130 L1000,130 L1000,115 Q1020,85 1040,115 L1040,130 L1150,130 L1150,100 Q1170,65 1190,100 L1190,130 L1300,130 L1300,120 Q1320,100 1340,120 L1340,130 L1400,130 L1400,150 Z' fill='rgba(10,7,20,0.35)'/%3E%3C/svg%3E") no-repeat bottom;
  background-size: cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}

/* Old snakes block removed - see PREMIUM BOARD section below */

/* ============ WORDLE ============ */
.wordle-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.wordle-row {
  display: flex;
  gap: 6px;
  position: relative;
}
.wordle-guesser {
  position: absolute;
  right: -80px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  color: rgba(255,215,0,0.6);
  white-space: nowrap;
}
[dir="rtl"] .wordle-guesser {
  right: auto;
  left: -80px;
}
.wordle-cell {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  border-radius: 8px;
  border: 2px solid rgba(255,255,255,0.15);
  background: rgba(22, 16, 58, 0.8);
  transition: all 0.3s;
  text-transform: uppercase;
}
.wordle-cell.filled {
  border-color: rgba(255,215,0,0.4);
  animation: wordle-pop 0.15s ease;
}
.wordle-cell.correct {
  background: #538d4e;
  border-color: #538d4e;
  color: white;
}
.wordle-cell.present {
  background: #b59f3b;
  border-color: #b59f3b;
  color: white;
}
.wordle-cell.absent {
  background: #3a3a3c;
  border-color: #3a3a3c;
  color: white;
}
.wordle-cell.empty {
  opacity: 0.5;
}

@keyframes wordle-pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes animate-flip {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0); }
}
.animate-flip {
  animation: animate-flip 0.5s ease forwards;
}

/* Wordle Keyboard */
.wordle-keyboard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.wordle-kb-row {
  display: flex;
  gap: 4px;
}
.wordle-key {
  min-width: 28px;
  height: 42px;
  border: none;
  border-radius: 6px;
  background: rgba(255,255,255,0.12);
  color: white;
  font-weight: bold;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.wordle-key:hover {
  background: rgba(255,215,0,0.2);
  transform: scale(1.05);
}
.wordle-key.special {
  min-width: 48px;
  font-size: 1rem;
}
.wordle-key.correct { background: #538d4e; }
.wordle-key.present { background: #b59f3b; }
.wordle-key.absent { background: #3a3a3c; opacity: 0.6; }

@media (max-width: 640px) {
  .wordle-cell { width: 44px; height: 44px; font-size: 1.2rem; }
  .wordle-key { min-width: 22px; height: 36px; font-size: 0.75rem; }
  .wordle-key.special { min-width: 36px; }
  .wordle-guesser { display: none; }
}

/* ============ AUTOCOMPLETE BUS ============ */
/* Uses standard glass-card styles, no additional CSS needed */

/* ============ SNAKES & LADDERS - ULTRA PREMIUM CARTOON BOARD ============ */

/* Game Layout */
.sl-game-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  max-width: 100%;
  margin: 0 auto;
}
@media (max-width: 1024px) {
  .sl-game-layout {
    grid-template-columns: 1fr;
  }
}

.sl-board-section {
  background: linear-gradient(145deg, rgba(22, 16, 58, 0.9), rgba(10, 7, 20, 0.95));
  border: 1px solid rgba(232, 183, 48, 0.15);
  border-radius: 20px;
  padding: 20px;
}
.sl-board-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.sl-board-title {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gold);
}

/* Board wrapper */
.snakes-board-wrapper {
  position: relative;
  width: 100%;
  max-width: 850px;
  margin: 0 auto;
  aspect-ratio: 1;
  background: 
    linear-gradient(135deg, #0c0a1e 0%, #1a1145 30%, #12082e 60%, #0d0b20 100%),
    repeating-linear-gradient(45deg, rgba(232,183,48,0.02) 0px, transparent 2px, transparent 10px);
  border-radius: 16px;
  padding: 8px;
  border: 2px solid rgba(232, 183, 48, 0.35);
  box-shadow: 
    0 0 60px rgba(232, 183, 48, 0.12),
    0 0 120px rgba(124, 58, 237, 0.06),
    inset 0 0 80px rgba(0,0,0,0.4),
    inset 0 0 2px rgba(232,183,48,0.1);
  overflow: hidden;
}
.snakes-board {
  display: grid;
  grid-template-rows: repeat(10, 1fr);
  width: 100%;
  height: 100%;
  gap: 2px;
  position: relative;
}
.snakes-row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 2px;
}
.snakes-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: all 0.2s;
  min-height: 0;
  overflow: visible;
  background: rgba(22, 16, 58, 0.6);
  border: 1px solid rgba(255,255,255,0.06);
  backdrop-filter: blur(1px);
}
.snakes-cell:hover {
  background: rgba(232, 183, 48, 0.12);
  border-color: rgba(232, 183, 48, 0.25);
  transform: scale(1.08);
  z-index: 10;
  box-shadow: 0 0 12px rgba(232,183,48,0.15);
}
.snakes-cell .cell-num {
  position: absolute;
  top: 1px;
  left: 2px;
  font-size: 0.55rem;
  color: rgba(255,255,255,0.5);
  font-weight: 700;
  line-height: 1;
  z-index: 2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.snakes-cell .cell-num i {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
}
.snakes-cell.cell-start {
  background: rgba(46, 204, 113, 0.15) !important;
  border-color: rgba(46, 204, 113, 0.3) !important;
}
.snakes-cell.snake-cell {
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.25);
  box-shadow: inset 0 0 8px rgba(239, 68, 68, 0.1);
}
.snakes-cell.snake-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: radial-gradient(circle at center, rgba(239, 68, 68, 0.15), transparent 70%);
  pointer-events: none;
  animation: snakeCellPulse 3s ease-in-out infinite;
}
@keyframes snakeCellPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.snakes-cell.ladder-cell {
  background: rgba(34, 197, 94, 0.12);
  border-color: rgba(34, 197, 94, 0.25);
  box-shadow: inset 0 0 8px rgba(34, 197, 94, 0.1);
}
.snakes-cell.ladder-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 5px;
  background: radial-gradient(circle at center, rgba(34, 197, 94, 0.15), transparent 70%);
  pointer-events: none;
  animation: ladderCellPulse 3s ease-in-out infinite;
}
@keyframes ladderCellPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
.snakes-cell.cell-100 {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(232, 183, 48, 0.15));
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
  animation: cell100Glow 2s ease-in-out infinite;
}
@keyframes cell100Glow {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 215, 0, 0.15); }
  50% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.35); }
}
.snakes-cell .cell-icon {
  font-size: 0.85rem;
  z-index: 3;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  line-height: 1;
}
.snakes-cell .cell-players {
  position: absolute;
  bottom: 1px;
  right: 1px;
  display: flex;
  gap: 1px;
  flex-wrap: wrap;
  justify-content: flex-end;
  z-index: 5;
}
.cell-start-icon {
  position: absolute;
  bottom: 2px;
  left: 2px;
  z-index: 2;
}
.player-token {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.5rem;
  font-weight: 900;
  color: white;
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 10px currentColor;
  text-transform: uppercase;
  animation: tokenPulse 2s ease-in-out infinite;
  z-index: 10;
  transition: transform 0.3s;
}
/* Image-based player token (Twitch avatar) */
.player-token-img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 2px 8px rgba(0,0,0,0.5), 0 0 10px rgba(145,70,255,0.4);
  animation: tokenPulse 2s ease-in-out infinite;
  z-index: 10;
  transition: transform 0.3s;
}
.player-token-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.player-token-img.active-token {
  animation: tokenBounce 0.6s ease-in-out infinite;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 18px rgba(255,215,0,0.5);
  transform: scale(1.25);
  border-color: var(--gold);
}
.player-token.active-token {
  animation: tokenBounce 0.6s ease-in-out infinite;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6), 0 0 18px currentColor;
  transform: scale(1.25);
  border-color: var(--gold);
}
/* Current player avatar in side panel (image version) */
.sl-current-avatar-img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid;
}
@keyframes tokenPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes tokenBounce {
  0%, 100% { transform: scale(1.2) translateY(0); }
  50% { transform: scale(1.2) translateY(-3px); }
}

/* SVG Overlay */
.board-svg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

/* Legend */
.sl-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
  padding: 10px 0;
}
.sl-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
}

/* Side Panel */
.sl-side-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.sl-dice-section {
  padding: 24px;
  text-align: center;
  border-radius: 20px;
}
.sl-dice-container {
  width: 100px;
  height: 100px;
  margin: 0 auto 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, #1a1145, #2d1b69);
  border: 3px solid var(--benrati);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--gold);
  box-shadow: 0 8px 30px rgba(232, 183, 48, 0.15), inset 0 2px 10px rgba(255,255,255,0.05);
  transition: all 0.3s;
}
.sl-dice-container.rolling {
  animation: diceRoll 0.15s ease-in-out infinite;
  border-color: var(--gold);
  box-shadow: 0 8px 40px rgba(255, 215, 0, 0.3);
}
@keyframes diceRoll {
  0% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(10deg) scale(1.05); }
  50% { transform: rotate(-5deg) scale(0.98); }
  75% { transform: rotate(8deg) scale(1.03); }
  100% { transform: rotate(0deg) scale(1); }
}
.sl-dice-status {
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.sl-current-player {
  padding: 12px;
  border-radius: 14px;
  margin-bottom: 16px;
  text-align: center;
}
.sl-current-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 0.85rem;
}
.sl-position-bar {
  width: 100%;
  height: 4px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.sl-position-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.5s ease;
}
.sl-roll-btn {
  width: 100%;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: 2px solid var(--benrati);
  color: white;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sl-roll-btn:hover:not(.disabled) {
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(124, 58, 237, 0.3);
}
.sl-roll-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.sl-players-list {
  padding: 16px;
  border-radius: 16px;
}

/* Player list */
.sl-player-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border-radius: 10px;
  transition: all 0.3s;
  border: 1px solid transparent;
}
.sl-player-item.current-turn {
  background: rgba(255, 215, 0, 0.08);
  border-color: rgba(255, 215, 0, 0.3);
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.05);
}
.sl-player-item.current-turn .sl-player-name {
  color: var(--gold);
  font-weight: 700;
}

/* Crown on cell 100 */
.crown-icon {
  position: absolute;
  top: 1px;
  right: 2px;
  z-index: 6;
  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
}

/* Animation overlays */
.sl-anim-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  border-radius: 16px;
  animation: animOverlayFade 1.4s ease forwards;
}
.sl-anim-overlay.snake-anim {
  background: rgba(239, 68, 68, 0.15);
  backdrop-filter: blur(2px);
}
.sl-anim-overlay.ladder-anim {
  background: rgba(34, 197, 94, 0.15);
  backdrop-filter: blur(2px);
}
.sl-anim-content {
  text-align: center;
  animation: animContentBounce 0.5s ease;
}
.sl-anim-text {
  font-size: 1.4rem;
  font-weight: 800;
  margin-top: 8px;
}
@keyframes animOverlayFade {
  0% { opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes animContentBounce {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

/* Lobby Styles */
.sl-lobby-container {
  max-width: 700px;
  margin: 0 auto;
}
.sl-lobby-title-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 8px;
}
.sl-lobby-snake-decor svg {
  opacity: 0.6;
}

/* Winner */
.sl-winner-container {
  max-width: 600px;
  margin: 0 auto;
}
.sl-winner-trophy {
  font-size: 5rem;
  color: var(--gold);
  margin-bottom: 16px;
  animation: trophyBounce 1s ease infinite;
  filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.4));
}
@keyframes trophyBounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.05); }
}

/* Responsive */
/* Cell indicator icons (snake/ladder FontAwesome icons) */
.cell-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.6rem;
  z-index: 3;
  opacity: 0.7;
  pointer-events: none;
  line-height: 1;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.6));
}
.cell-indicator.snake-ind { opacity: 0.8; }
.cell-indicator.ladder-ind { opacity: 0.8; }

@media (max-width: 768px) {
  .snakes-board-wrapper { max-width: 100%; padding: 4px; border-radius: 12px; }
  .snakes-cell .cell-num { font-size: 0.45rem; top: 0; left: 1px; }
  .snakes-cell .cell-icon { font-size: 0.65rem; }
  .cell-indicator { font-size: 0.45rem; }
  .player-token { width: 16px; height: 16px; font-size: 0.4rem; }
  .player-token-img { width: 16px; height: 16px; }
  .sl-dice-container { width: 80px; height: 80px; font-size: 2.5rem; border-radius: 14px; }
  .sl-board-section { padding: 12px; }
}
@media (max-width: 480px) {
  .snakes-cell .cell-num { font-size: 0.38rem; }
  .player-token { width: 14px; height: 14px; font-size: 0.35rem; border-width: 1px; }
  .player-token-img { width: 14px; height: 14px; border-width: 1px; }
  .snakes-cell .cell-icon { font-size: 0.5rem; }
  .cell-indicator { font-size: 0.35rem; }
  .sl-board-section { padding: 8px; }
}

/* ============ LEVEL DEVIL (JUMP QUEST) GAME ============ */
.jq-game-canvas {
  display: block;
  border-radius: 12px;
  border: 2px solid rgba(232, 183, 48, 0.2);
  box-shadow: 0 0 30px rgba(0,0,0,0.5);
  background: #1a1a2e;
  image-rendering: pixelated;
}
.jq-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}
.jq-btn {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: rgba(22, 16, 58, 0.8);
  border: 2px solid rgba(232, 183, 48, 0.3);
  color: var(--gold);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.jq-btn:active {
  transform: scale(0.9);
  background: rgba(232, 183, 48, 0.15);
  border-color: var(--gold);
}
@media (min-width: 769px) {
  .jq-controls { display: none; }
}

/* ============ HORROR GAME ENHANCED CSS ============ */
.horror-game-container {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}
.horror-atmosphere-dark { background: linear-gradient(180deg, #000 0%, #0a0014 50%, #000 100%); }
.horror-atmosphere-red { background: linear-gradient(180deg, #1a0000 0%, #330000 50%, #1a0000 100%); }
.horror-atmosphere-blue { background: linear-gradient(180deg, #000011 0%, #001133 50%, #000011 100%); }

.horror-bg-effects { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.horror-fog {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.8) 100%);
  animation: horror-fog-move 10s ease-in-out infinite alternate;
}
@keyframes horror-fog-move {
  0% { opacity: 0.3; transform: scale(1); }
  100% { opacity: 0.7; transform: scale(1.1); }
}

.horror-particle {
  position: absolute; width: 2px; height: 2px;
  background: rgba(255, 0, 0, 0.6); border-radius: 50%;
  animation: horror-particle-fall linear infinite;
  box-shadow: 0 0 4px rgba(255,0,0,0.4);
}
@keyframes horror-particle-fall {
  0% { transform: translateY(-20px); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(400px); opacity: 0; }
}

.horror-blood-drip {
  position: absolute; top: 0; left: 0; right: 0; height: 100%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px, transparent 40px,
    rgba(139,0,0,0.1) 40px, rgba(139,0,0,0.1) 42px
  );
  animation: horror-blood-flow 8s linear infinite;
}
@keyframes horror-blood-flow {
  0% { background-position: 0 -100%; }
  100% { background-position: 0 100%; }
}

.horror-static-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  animation: horror-static 0.3s steps(4) infinite;
  opacity: 0.15;
  mix-blend-mode: overlay;
}
@keyframes horror-static {
  0% { transform: translate(0,0); }
  25% { transform: translate(-2px,1px); }
  50% { transform: translate(1px,-1px); }
  75% { transform: translate(-1px,2px); }
  100% { transform: translate(2px,-2px); }
}

.horror-vignette-light {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.8) 100%);
}
.horror-vignette-heavy {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(100,0,0,0.4) 70%, rgba(0,0,0,0.9) 100%);
  animation: horror-vignette-pulse 3s ease-in-out infinite;
}
@keyframes horror-vignette-pulse {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 1; }
}

.horror-meter-bar {
  background: rgba(0,0,0,0.8);
  border-bottom: 1px solid rgba(255,0,0,0.2);
  position: relative; z-index: 10;
}
.horror-meter-pulse { animation: horror-pulse-bar 1s ease-in-out infinite; }
@keyframes horror-pulse-bar { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

.horror-emoji-breathe { animation: horror-breathe 3s ease-in-out infinite; }
@keyframes horror-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
.horror-emoji-float { animation: horror-float 2s ease-in-out infinite; }
@keyframes horror-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-15px); }
}
.horror-emoji-shake { animation: horror-shake 0.5s ease-in-out infinite; }
@keyframes horror-shake {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  25% { transform: translate(-3px,2px) rotate(-2deg); }
  50% { transform: translate(3px,-2px) rotate(2deg); }
  75% { transform: translate(-2px,3px) rotate(-1deg); }
}

.horror-text-flicker { animation: horror-flicker 4s infinite; }
@keyframes horror-flicker {
  0%, 92%, 94%, 100% { opacity: 1; }
  93% { opacity: 0.3; }
  95% { opacity: 0.8; }
}

.horror-story-text { text-shadow: 0 0 10px rgba(0,0,0,0.5); line-height: 2; }

.horror-choice-btn {
  background: rgba(139, 0, 0, 0.08);
  border: 1px solid rgba(139, 0, 0, 0.2);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: right;
  color: #ddd;
}
.horror-choice-btn:hover {
  background: rgba(139, 0, 0, 0.2);
  border-color: rgba(255, 0, 0, 0.5);
  transform: translateX(-4px);
  box-shadow: 0 0 20px rgba(255,0,0,0.15);
}
.horror-choice-number {
  background: rgba(139, 0, 0, 0.2);
  border: 1px solid rgba(255, 0, 0, 0.3);
  color: #ff6666;
}
.horror-vote-bar {
  background: rgba(139, 0, 0, 0.1);
  transition: width 0.5s ease;
}

.horror-jumpscare-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: transparent; pointer-events: none;
  transition: all 0.1s;
}
.horror-jumpscare-active {
  background: rgba(255, 0, 0, 0.4) !important;
  animation: horror-jumpscare-flash 0.5s ease;
}
@keyframes horror-jumpscare-flash {
  0% { background: white; }
  20% { background: rgba(255,0,0,0.8); }
  100% { background: transparent; }
}

.horror-ending-animation { animation: horror-ending-appear 1s ease-out; }
@keyframes horror-ending-appear {
  0% { transform: scale(0.5); opacity: 0; }
  60% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}

.horror-glow-green { text-shadow: 0 0 20px rgba(0,255,0,0.5); }
.horror-glow-red { text-shadow: 0 0 20px rgba(255,0,0,0.5); }
.horror-glow-gold { text-shadow: 0 0 20px rgba(255,215,0,0.5); }

.horror-btn-glow {
  animation: horror-btn-pulse 2s ease-in-out infinite;
}
@keyframes horror-btn-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(139,92,246,0.3); }
  50% { box-shadow: 0 0 25px rgba(139,92,246,0.6); }
}


/* ─────────── SOURCE: css/enhanced-ui.css ─────────── */
/* ============ ENHANCED UI/UX V4 - PROFESSIONAL UPGRADE ============ */

/* ============ IMPROVED GAME CARDS ============ */
.game-card {
  background: linear-gradient(165deg, rgba(22, 16, 58, 0.95) 0%, rgba(10, 7, 20, 0.98) 100%);
  border: 1px solid rgba(232, 183, 48, 0.06);
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
  position: relative;
  backdrop-filter: blur(10px);
}
.game-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 24px;
  padding: 1px;
  background: linear-gradient(135deg, transparent 30%, rgba(232,183,48,0.2) 50%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s;
  pointer-events: none;
}
.game-card:hover::before { opacity: 1; }
.game-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(232, 183, 48, 0.3);
  box-shadow: 
    0 20px 50px rgba(0, 0, 0, 0.5), 
    0 0 50px rgba(232, 183, 48, 0.06),
    inset 0 0 30px rgba(232, 183, 48, 0.02);
}

.game-card .game-image {
  width: 100%; height: 240px;
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(91, 33, 182, 0.3), rgba(22, 16, 58, 0.9));
}
.game-card .game-image img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease, filter 0.5s ease;
  filter: brightness(0.85) saturate(1.1);
}
.game-card:hover .game-image img { 
  transform: scale(1.08); 
  filter: brightness(0.95) saturate(1.2);
}

.game-card .game-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,7,20,1) 0%, rgba(10,7,20,0.4) 35%, transparent 65%);
  z-index: 1;
}

.game-card .game-info {
  padding: 18px 22px 22px;
  position: relative;
}
.game-card .game-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: white;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.game-card .game-desc {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.6;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.game-card .game-tags {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.game-card .game-tag {
  font-size: 0.7rem;
  padding: 4px 12px;
  border-radius: 50px;
  background: rgba(232, 183, 48, 0.06);
  border: 1px solid rgba(232, 183, 48, 0.12);
  color: var(--benrati-light);
  display: flex; align-items: center; gap: 5px;
  transition: all 0.3s;
}
.game-card:hover .game-tag {
  background: rgba(232, 183, 48, 0.1);
  border-color: rgba(232, 183, 48, 0.2);
}
.game-card .game-tag i { font-size: 0.6rem; }

/* Badge improvements */
.game-card .game-badge-new {
  background: linear-gradient(135deg, #10B981, #059669);
  color: white;
  font-size: 0.68rem;
  padding: 5px 14px;
  border-radius: 50px;
  font-weight: 700;
  display: flex; align-items: center; gap: 5px;
  box-shadow: 0 3px 15px rgba(16,185,129,0.3);
  animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
  0%,100% { box-shadow: 0 3px 15px rgba(16,185,129,0.3); }
  50% { box-shadow: 0 3px 25px rgba(16,185,129,0.5); }
}

.game-card .game-badge-ramadan {
  background: linear-gradient(135deg, #7C3AED, #A855F7);
  color: white;
  font-size: 0.68rem;
  padding: 5px 14px;
  border-radius: 50px;
  font-weight: 700;
  display: flex; align-items: center; gap: 5px;
  box-shadow: 0 3px 15px rgba(124,58,237,0.3);
}

/* Platform icons enhancement */
.game-card .platform-icons {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 5;
  display: flex; gap: 5px;
}
.game-card .platform-icon {
  width: 30px; height: 30px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  backdrop-filter: blur(12px);
  transition: transform 0.3s;
}
.game-card:hover .platform-icon { transform: scale(1.1); }

/* ============ ENHANCED CHAT ANSWERS DISPLAY ============ */
.chat-answers-panel {
  background: linear-gradient(165deg, rgba(22, 16, 58, 0.6), rgba(10, 7, 20, 0.8));
  border: 1px solid rgba(232, 183, 48, 0.1);
  border-radius: 16px;
  padding: 16px;
  backdrop-filter: blur(15px);
  max-height: 350px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(232,183,48,0.2) transparent;
}
.chat-answers-panel::-webkit-scrollbar { width: 4px; }
.chat-answers-panel::-webkit-scrollbar-track { background: transparent; }
.chat-answers-panel::-webkit-scrollbar-thumb { 
  background: rgba(232,183,48,0.2); 
  border-radius: 4px; 
}

.chat-answer-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 6px;
  transition: all 0.3s ease;
  animation: answer-slide-in 0.4s ease-out;
}
.chat-answer-item:last-child { margin-bottom: 0; }
.chat-answer-item:hover {
  background: rgba(232,183,48,0.06);
  border-color: rgba(232,183,48,0.1);
}
.chat-answer-item.latest {
  background: rgba(232,183,48,0.08);
  border-color: rgba(232,183,48,0.2);
  box-shadow: 0 0 15px rgba(232,183,48,0.05);
}
.chat-answer-item.correct {
  background: rgba(16,185,129,0.08);
  border-color: rgba(16,185,129,0.2);
}
.chat-answer-item.wrong {
  background: rgba(239,68,68,0.05);
  border-color: rgba(239,68,68,0.1);
}

.chat-answer-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(232,183,48,0.2);
  flex-shrink: 0;
}
.chat-answer-avatar-placeholder {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(232,183,48,0.2));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--benrati-light);
  flex-shrink: 0;
  border: 2px solid rgba(232,183,48,0.15);
}

.chat-answer-username {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--benrati-light);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-answer-text {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.7);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-answer-time {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.chat-answer-platform {
  font-size: 0.65rem;
  padding: 2px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}
.chat-answer-platform.twitch {
  background: rgba(145,70,255,0.15);
  color: #9146FF;
}
.chat-answer-platform.kick {
  background: rgba(83,252,24,0.1);
  color: #53FC18;
}

.chat-answers-empty {
  text-align: center;
  padding: 24px 16px;
  color: rgba(255,255,255,0.25);
  font-size: 0.85rem;
}
.chat-answers-empty i {
  display: block;
  font-size: 2rem;
  margin-bottom: 8px;
  opacity: 0.3;
}

@keyframes answer-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============ IMPROVED SECTION HEADER ============ */
.section-header { text-align: center; margin-bottom: 3.5rem; }
.section-header h2 {
  font-size: 2.4rem;
  font-weight: 900;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.section-header .gold-text { 
  color: var(--benrati); 
  text-shadow: 0 0 20px rgba(232,183,48,0.2);
}
.section-header p {
  color: rgba(255,255,255,0.45);
  font-size: 1rem;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.7;
}
.section-divider {
  width: 80px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--benrati), transparent);
  margin: 12px auto;
  border-radius: 2px;
}

/* ============ IMPROVED FILTER BUTTONS ============ */
.filter-btn {
  transition: all 0.3s ease;
  border-radius: 12px !important;
}
.filter-btn.active {
  background: rgba(232,183,48,0.1) !important;
  border-color: var(--gold) !important;
  color: var(--gold) !important;
  box-shadow: 0 0 15px rgba(232,183,48,0.1);
}
.filter-btn:not(.active):hover {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.1) !important;
}

/* ============ GLASS BUTTON IMPROVEMENTS ============ */
.glass-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  color: rgba(255,255,255,0.8);
  transition: all 0.3s ease;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.glass-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
  transform: translateY(-1px);
}

.glass-btn-primary {
  background: linear-gradient(135deg, rgba(232,183,48,0.15), rgba(232,183,48,0.08));
  border: 1px solid rgba(232,183,48,0.25);
  border-radius: 12px;
  color: var(--benrati-light);
  transition: all 0.3s ease;
  cursor: pointer;
}
.glass-btn-primary:hover {
  background: linear-gradient(135deg, rgba(232,183,48,0.25), rgba(232,183,48,0.15));
  border-color: rgba(232,183,48,0.4);
  box-shadow: 0 0 20px rgba(232,183,48,0.1);
  transform: translateY(-1px);
}

/* ============ QA OPTION IMPROVEMENTS ============ */
.qa-option {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 14px 18px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0.95rem;
}
.qa-option:hover {
  background: rgba(232,183,48,0.08);
  border-color: rgba(232,183,48,0.2);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
.qa-option.correct {
  background: rgba(16,185,129,0.15) !important;
  border-color: rgba(16,185,129,0.4) !important;
  color: #10B981;
}
.qa-option.wrong {
  background: rgba(239,68,68,0.1) !important;
  border-color: rgba(239,68,68,0.3) !important;
  color: #EF4444;
}

/* ============ IMPROVED NAVIGATION ============ */
.glass-nav {
  background: rgba(10,7,20,0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(232,183,48,0.06) !important;
}

.nav-btn {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.nav-btn:hover {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.04);
}
.nav-btn.active {
  color: var(--benrati) !important;
  background: rgba(232,183,48,0.08);
  border-color: rgba(232,183,48,0.15);
}

/* ============ SPIN WHEEL STYLES ============ */
.wheel-container {
  position: relative;
  width: 400px;
  height: 400px;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .wheel-container { width: 300px; height: 300px; }
}
.wheel-canvas {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 
    0 0 0 8px rgba(232,183,48,0.3),
    0 0 0 12px rgba(10,7,20,0.8),
    0 0 40px rgba(232,183,48,0.15),
    inset 0 0 30px rgba(0,0,0,0.3);
  transition: filter 0.3s;
}
.wheel-spinning .wheel-canvas {
  filter: drop-shadow(0 0 20px rgba(232,183,48,0.3));
}
.wheel-pointer {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-top: 35px solid var(--benrati);
  filter: drop-shadow(0 3px 10px rgba(232,183,48,0.5));
  z-index: 10;
}
.wheel-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--benrati) 0%, var(--benrati-dark) 100%);
  border: 4px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  z-index: 5;
  cursor: pointer;
  box-shadow: 0 0 25px rgba(232,183,48,0.4);
  transition: transform 0.3s, box-shadow 0.3s;
}
.wheel-center:hover {
  transform: translate(-50%, -50%) scale(1.1);
  box-shadow: 0 0 35px rgba(232,183,48,0.6);
}

.wheel-winner-popup {
  animation: winner-pop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes winner-pop {
  0% { opacity: 0; transform: scale(0.5); }
  60% { transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

.wheel-history-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 6px;
  font-size: 0.85rem;
}
.wheel-history-item .round-num {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: rgba(232,183,48,0.1);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  color: var(--benrati);
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* Participant list */
.participant-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  transition: all 0.3s ease;
  animation: answer-slide-in 0.3s ease-out;
}
.participant-item:hover {
  background: rgba(232,183,48,0.06);
}
.participant-item .remove-btn {
  opacity: 0;
  transition: opacity 0.2s;
  cursor: pointer;
  color: rgba(239,68,68,0.6);
  font-size: 0.75rem;
}
.participant-item:hover .remove-btn { opacity: 1; }

/* ============ NEW GAME STYLES ============ */
/* Hangman */
.hangman-letter {
  width: 42px; height: 50px;
  border-radius: 10px;
  background: rgba(232,183,48,0.06);
  border: 2px solid rgba(232,183,48,0.15);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.4rem; font-weight: 800;
  color: var(--benrati);
  margin: 3px;
  transition: all 0.3s;
}
.hangman-letter.revealed {
  background: rgba(232,183,48,0.15);
  border-color: rgba(232,183,48,0.3);
  animation: letter-reveal 0.4s ease;
}
.hangman-keyboard-key {
  width: 38px; height: 42px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.9rem; font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  margin: 2px;
}
.hangman-keyboard-key:hover {
  background: rgba(232,183,48,0.1);
  border-color: rgba(232,183,48,0.2);
  transform: translateY(-2px);
}
.hangman-keyboard-key.used {
  opacity: 0.2;
  pointer-events: none;
}
.hangman-keyboard-key.correct {
  background: rgba(16,185,129,0.15);
  border-color: rgba(16,185,129,0.3);
  color: #10B981;
}
.hangman-keyboard-key.wrong {
  background: rgba(239,68,68,0.1);
  border-color: rgba(239,68,68,0.2);
  color: #EF4444;
}

@keyframes letter-reveal {
  0% { transform: rotateX(90deg); opacity: 0; }
  100% { transform: rotateX(0); opacity: 1; }
}

/* Number Guess */
.number-guess-input {
  font-size: 2.5rem;
  text-align: center;
  width: 140px;
  background: rgba(255,255,255,0.03);
  border: 2px solid rgba(232,183,48,0.15);
  border-radius: 16px;
  color: var(--benrati);
  padding: 10px;
  font-weight: 800;
}
.number-guess-input:focus {
  border-color: rgba(232,183,48,0.4);
  outline: none;
  box-shadow: 0 0 20px rgba(232,183,48,0.1);
}

.guess-history-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 600;
}
.guess-history-item.higher {
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.15);
  color: #F87171;
}
.guess-history-item.lower {
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.15);
  color: #60A5FA;
}
.guess-history-item.correct {
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.2);
  color: #34D399;
}

/* ============ CONFETTI ANIMATION ============ */
.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  top: -10px;
  z-index: 9999;
  animation: confetti-fall linear forwards;
  pointer-events: none;
}
@keyframes confetti-fall {
  0% { top: -10px; opacity: 1; transform: rotateZ(0deg); }
  100% { top: 110vh; opacity: 0; transform: rotateZ(720deg); }
}

/* ============ RESPONSIVE IMPROVEMENTS ============ */
@media (max-width: 1024px) {
  .game-card .game-image { height: 200px; }
  .section-header h2 { font-size: 2rem; }
}
@media (max-width: 768px) {
  .game-card .game-image { height: 180px; }
  .section-header h2 { font-size: 1.7rem; }
  .section-header p { font-size: 0.9rem; }
  .chat-answers-panel { max-height: 250px; }
  .wheel-container { width: 280px; height: 280px; }
  .qa-option { padding: 12px 14px; font-size: 0.88rem; }
}
@media (max-width: 480px) {
  .game-card .game-image { height: 160px; }
  .game-card .game-info { padding: 14px 16px 18px; }
  .game-card .game-title { font-size: 1.05rem; }
  .wheel-container { width: 250px; height: 250px; }
  .hangman-letter { width: 34px; height: 42px; font-size: 1.1rem; }
  .hangman-keyboard-key { width: 30px; height: 36px; font-size: 0.8rem; }
}

/* ============ IMPROVED GAME PAGE LAYOUT ============ */
.game-page-header {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 24px;
}
.game-page-controls {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
}
@media (max-width: 1024px) {
  .game-page-controls {
    grid-template-columns: 1fr;
  }
}

/* ============ ADMIN PANEL IMPROVEMENTS ============ */
.admin-game-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  margin-bottom: 6px;
}
.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: rgba(255,255,255,0.1);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s;
}
.toggle-switch.active {
  background: rgba(16,185,129,0.3);
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  transition: transform 0.3s;
}
.toggle-switch.active::after {
  transform: translateX(20px);
}


/* ─────────── SOURCE: css/games-redesign.css ─────────── */
/* ============ GAMES UI OVERHAUL V7 - COMPLETE PREMIUM REDESIGN ============ */
/* This replaces ALL previous game card, grid, and page styles */

/* ===================== VARIABLES ===================== */
:root {
  --gc-gold: #E8B730;
  --gc-gold-light: #F5D261;
  --gc-dark: #0A0714;
  --gc-dark-card: rgba(18, 13, 45, 0.95);
  --gc-purple: #7C3AED;
  --gc-glass: rgba(255,255,255,0.03);
}

/* ===================== GAMES HUB SECTION ===================== */
.games-hub-section {
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 20px 60px;
}

/* === HERO HEADER === */
.games-hub-header {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  margin-bottom: 32px;
  padding: 50px 30px 40px;
  background: linear-gradient(165deg, rgba(124,58,237,0.15) 0%, rgba(10,7,20,0.95) 50%, rgba(232,183,48,0.08) 100%);
  border: 1px solid rgba(232,183,48,0.08);
}
.games-hub-header-bg {
  position: absolute; inset: 0;
  background: 
    radial-gradient(circle at 20% 30%, rgba(124,58,237,0.12) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(232,183,48,0.08) 0%, transparent 40%);
  pointer-events: none;
}
.games-hub-header-content {
  position: relative; z-index: 2;
  text-align: center;
}
.games-hub-icon {
  width: 72px; height: 72px;
  margin: 0 auto 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(232,183,48,0.15), rgba(124,58,237,0.15));
  border: 1px solid rgba(232,183,48,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; color: var(--gc-gold);
}
.games-hub-title {
  font-size: 2.8rem !important;
  font-weight: 900 !important;
  color: white;
  letter-spacing: -0.03em;
  margin-bottom: 8px;
  line-height: 1.2;
}
.games-hub-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.45);
  max-width: 500px;
  margin: 0 auto 24px;
  line-height: 1.6;
}
.games-hub-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 16px 24px;
  background: rgba(255,255,255,0.03);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.05);
  width: fit-content;
  margin: 0 auto;
}
.games-hub-stat { text-align: center; }
.games-hub-stat-num {
  display: block;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--gc-gold);
}
.games-hub-stat-label {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.games-hub-stat-divider {
  width: 1px; height: 32px;
  background: rgba(255,255,255,0.08);
}

/* ===================== FILTER BAR ===================== */
.games-filter-bar {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 32px;
  padding: 0 10px;
}
.games-filter-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.6);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}
.games-filter-chip:hover {
  background: rgba(232,183,48,0.06);
  border-color: rgba(232,183,48,0.15);
  color: rgba(255,255,255,0.85);
}
.games-filter-chip.active {
  background: linear-gradient(135deg, rgba(232,183,48,0.12), rgba(232,183,48,0.06));
  border-color: rgba(232,183,48,0.3);
  color: var(--gc-gold);
  box-shadow: 0 0 20px rgba(232,183,48,0.08);
}
.games-filter-chip-emoji { font-size: 1rem; }
.games-filter-chip-count {
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.4);
  font-weight: 700;
}
.games-filter-chip.active .games-filter-chip-count {
  background: rgba(232,183,48,0.15);
  color: var(--gc-gold);
}

/* ===================== GAMES GRID ===================== */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 24px;
}

/* ===================== GAME CARD ===================== */
.gc-card {
  background: var(--gc-dark-card);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.04);
  cursor: pointer;
  transition: transform 0.35s cubic-bezier(0.175,0.885,0.32,1.275), 
              box-shadow 0.35s ease, 
              border-color 0.35s ease;
  position: relative;
  contain: layout style paint;
  animation: gcFadeIn 0.5s ease both;
}
@keyframes gcFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.gc-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 22px;
  padding: 1.5px;
  background: linear-gradient(135deg, transparent 30%, rgba(232,183,48,0.3) 50%, transparent 70%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none; z-index: 2;
}
.gc-card:hover::before { opacity: 1; }
.gc-card:hover {
  transform: translateY(-8px) scale(1.01);
  border-color: rgba(232,183,48,0.2);
  box-shadow: 
    0 24px 48px rgba(0,0,0,0.4),
    0 0 40px rgba(232,183,48,0.06);
}

/* === Card Image === */
.gc-image-wrap {
  position: relative;
  height: 240px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(124,58,237,0.2), rgba(22,16,58,0.8));
}
.gc-image {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease, filter 0.5s ease;
  filter: brightness(0.8) saturate(1.15);
}
.gc-card:hover .gc-image {
  transform: scale(1.08);
  filter: brightness(0.9) saturate(1.25);
}
.gc-image-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--gc-dark-card) 0%, rgba(18,13,45,0.5) 30%, transparent 60%);
  z-index: 1;
}
.gc-image-icon {
  position: absolute;
  bottom: 16px; left: 16px;
  width: 48px; height: 48px;
  border-radius: 14px;
  background: rgba(10,7,20,0.7);
  border: 1px solid rgba(232,183,48,0.15);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  z-index: 3;
  transition: transform 0.3s ease;
}
html[dir="rtl"] .gc-image-icon { left: auto; right: 16px; }
.gc-card:hover .gc-image-icon { transform: scale(1.1) rotate(-5deg); }

/* === Card Badges === */
.gc-badge {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 4;
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 800;
  display: flex; align-items: center; gap: 5px;
  letter-spacing: 0.3px;
}
html[dir="ltr"] .gc-badge { left: 14px; right: auto; }
.gc-badge-new {
  background: linear-gradient(135deg, #E8B730, #F5D261);
  color: #1a0f3e;
  box-shadow: 0 4px 16px rgba(232,183,48,0.35);
}
.gc-badge-ramadan {
  background: linear-gradient(135deg, #7C3AED, #A855F7);
  color: white;
  box-shadow: 0 4px 16px rgba(124,58,237,0.35);
}

/* === Card Platforms === */
.gc-platforms {
  position: absolute;
  top: 14px; left: 14px;
  z-index: 4;
  display: flex; gap: 6px;
}
html[dir="ltr"] .gc-platforms { right: 14px; left: auto; }
.gc-platform {
  width: 32px; height: 32px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  backdrop-filter: blur(10px);
  transition: transform 0.25s ease;
}
.gc-platform-twitch {
  background: rgba(145,70,255,0.3);
  border: 1px solid rgba(145,70,255,0.3);
  color: #B57CFF;
}
.gc-platform-kick {
  background: rgba(83,252,24,0.15);
  border: 1px solid rgba(83,252,24,0.2);
  color: #53FC18;
  font-weight: 900; font-size: 0.8rem;
}
.gc-card:hover .gc-platform { transform: scale(1.15); }

/* === Card Body === */
.gc-body {
  padding: 18px 20px 20px;
}
.gc-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.gc-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: white;
  line-height: 1.35;
  flex: 1;
}
.gc-info-btn {
  width: 30px; height: 30px;
  border-radius: 10px;
  background: rgba(232,183,48,0.08);
  border: 1px solid rgba(232,183,48,0.12);
  color: rgba(232,183,48,0.5);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
  font-size: 0.8rem;
}
.gc-info-btn:hover {
  background: rgba(232,183,48,0.15);
  color: var(--gc-gold);
  transform: scale(1.1);
}
.gc-desc {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.6;
  margin-bottom: 14px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.gc-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  flex: 1;
}
.gc-tag {
  padding: 4px 10px;
  border-radius: 50px;
  font-size: 0.65rem;
  font-weight: 600;
  background: rgba(232,183,48,0.06);
  border: 1px solid rgba(232,183,48,0.08);
  color: rgba(255,255,255,0.55);
  transition: all 0.2s ease;
}
.gc-card:hover .gc-tag {
  background: rgba(232,183,48,0.1);
  border-color: rgba(232,183,48,0.15);
  color: rgba(255,255,255,0.7);
}
.gc-players {
  font-size: 0.7rem;
  color: rgba(255,255,255,0.4);
  display: flex; align-items: center; gap: 5px;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 50px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}

/* ===================== GAME PAGE ===================== */
.game-page-section {
  max-width: 1500px;
  margin: 0 auto;
  padding: 24px 20px 60px;
}

/* Back Button */
.gp-nav { margin-bottom: 20px; }
.gp-back-btn {
  display: inline-flex;
  align-items: center; gap: 8px;
  padding: 10px 20px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.6);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}
.gp-back-btn:hover {
  background: rgba(232,183,48,0.08);
  border-color: rgba(232,183,48,0.15);
  color: var(--gc-gold);
  transform: translateX(-4px);
}
html[dir="rtl"] .gp-back-btn:hover { transform: translateX(4px); }

/* Hero */
.gp-hero {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 24px;
  background: var(--gc-dark-card);
  border: 1px solid rgba(232,183,48,0.06);
}
.gp-hero-image-wrap {
  position: relative;
  height: 200px;
  overflow: hidden;
}
.gp-hero-image {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.7);
}
.gp-hero-gradient {
  position: absolute; inset: 0;
  background: linear-gradient(to top, var(--gc-dark-card) 0%, rgba(18,13,45,0.6) 40%, transparent 100%);
}
.gp-hero-content {
  padding: 0 28px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: relative;
  margin-top: -40px;
  z-index: 2;
}
.gp-hero-icon-wrap {
  flex-shrink: 0;
}
.gp-hero-icon {
  width: 68px; height: 68px;
  border-radius: 20px;
  background: rgba(232,183,48,0.1);
  border: 2px solid rgba(232,183,48,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  backdrop-filter: blur(8px);
}
.gp-hero-text { flex: 1; }
.gp-hero-title {
  font-size: 2rem;
  font-weight: 900;
  color: white;
  margin-bottom: 4px;
}
.gp-hero-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.5;
}
.gp-hero-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0 28px 20px;
}
.gp-meta-tag {
  display: inline-flex;
  align-items: center; gap: 6px;
  padding: 7px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 0.8rem; font-weight: 600;
  color: rgba(255,255,255,0.6);
}
.gp-meta-twitch {
  background: rgba(145,70,255,0.1);
  border-color: rgba(145,70,255,0.2);
  color: #B57CFF;
}
.gp-meta-kick {
  background: rgba(83,252,24,0.08);
  border-color: rgba(83,252,24,0.15);
  color: #53FC18;
}
.gp-meta-badge {
  background: rgba(232,183,48,0.08);
  border-color: rgba(232,183,48,0.15);
  color: var(--gc-gold);
}

/* Rooms */
.gp-rooms-card {
  background: var(--gc-dark-card);
  border: 1px solid rgba(232,183,48,0.06);
  border-radius: 20px;
  padding: 24px;
  margin-bottom: 24px;
}
.gp-rooms-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gc-gold);
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.gp-rooms-actions {
  display: flex; gap: 12px;
  flex-wrap: wrap; align-items: stretch;
}
.gp-rooms-create-btn {
  padding: 12px 24px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(232,183,48,0.15), rgba(232,183,48,0.08));
  border: 1px solid rgba(232,183,48,0.2);
  color: var(--gc-gold);
  font-weight: 700; font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex; align-items: center; gap: 8px;
}
.gp-rooms-create-btn:hover {
  background: linear-gradient(135deg, rgba(232,183,48,0.25), rgba(232,183,48,0.12));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(232,183,48,0.12);
}
.gp-rooms-join {
  display: flex; gap: 8px;
  flex: 1; min-width: 220px;
}
.gp-rooms-input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: white;
  font-size: 0.85rem;
  outline: none;
  transition: border-color 0.2s;
}
.gp-rooms-input:focus {
  border-color: rgba(232,183,48,0.3);
}
.gp-rooms-join-btn {
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6);
  cursor: pointer;
  transition: all 0.2s ease;
}
.gp-rooms-join-btn:hover {
  background: rgba(232,183,48,0.1);
  border-color: rgba(232,183,48,0.2);
  color: var(--gc-gold);
}
.gp-rooms-list { margin-top: 12px; }

/* Game Container */
.gp-game-container {
  width: 100%;
  max-width: 100%;
}

/* ===================== CHAT ANSWERS V7 ===================== */
.chat-answers-panel-v7 {
  background: linear-gradient(165deg, rgba(22,16,58,0.9), rgba(10,7,20,0.95));
  border: 1px solid rgba(232,183,48,0.08);
  border-radius: 18px;
  overflow: hidden;
}
.chat-answers-header-v7 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(232,183,48,0.04);
  border-bottom: 1px solid rgba(232,183,48,0.06);
}
.chat-answers-header-v7 .ca-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--gc-gold);
  display: flex; align-items: center; gap: 8px;
}
.chat-answers-header-v7 .ca-count {
  padding: 3px 10px;
  border-radius: 50px;
  background: rgba(232,183,48,0.1);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--gc-gold);
}
.chat-answers-body-v7 {
  padding: 10px;
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(232,183,48,0.15) transparent;
}
.chat-answers-body-v7::-webkit-scrollbar { width: 4px; }
.chat-answers-body-v7::-webkit-scrollbar-thumb { background: rgba(232,183,48,0.15); border-radius: 4px; }

.ca-item-v7 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  margin-bottom: 5px;
  transition: all 0.25s ease;
  animation: caSlideIn 0.3s ease both;
}
@keyframes caSlideIn {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}
html[dir="rtl"] @keyframes caSlideIn {
  from { opacity: 0; transform: translateX(-12px); }
  to { opacity: 1; transform: translateX(0); }
}
.ca-item-v7:hover {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.04);
}
.ca-item-v7.ca-latest {
  border-color: rgba(232,183,48,0.15);
  background: rgba(232,183,48,0.04);
}
.ca-item-v7.ca-correct {
  border-color: rgba(16,185,129,0.25);
  background: rgba(16,185,129,0.06);
}
.ca-item-v7.ca-wrong {
  border-color: rgba(239,68,68,0.2);
  background: rgba(239,68,68,0.04);
}

.ca-avatar-v7 {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(232,183,48,0.15), rgba(124,58,237,0.15));
  border: 1px solid rgba(232,183,48,0.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 800;
  color: var(--gc-gold);
  flex-shrink: 0;
  overflow: hidden;
}
.ca-avatar-v7 img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 12px;
}
.ca-content-v7 { flex: 1; min-width: 0; }
.ca-username-v7 {
  font-size: 0.8rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 2px;
}
.ca-username-v7 .ca-platform-badge {
  font-size: 0.55rem;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
}
.ca-platform-badge.twitch { background: rgba(145,70,255,0.2); color: #B57CFF; }
.ca-platform-badge.kick { background: rgba(83,252,24,0.12); color: #53FC18; }

.ca-answer-v7 {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.5);
}
.ca-answer-v7 .ca-answer-num {
  display: inline-block;
  width: 22px; height: 22px;
  line-height: 22px;
  text-align: center;
  border-radius: 7px;
  background: rgba(232,183,48,0.1);
  color: var(--gc-gold);
  font-weight: 800;
  font-size: 0.72rem;
  margin-inline-end: 4px;
}
.ca-correct .ca-answer-num { background: rgba(16,185,129,0.15); color: #10B981; }
.ca-wrong .ca-answer-num { background: rgba(239,68,68,0.12); color: #EF4444; }

.ca-status-v7 {
  flex-shrink: 0;
  font-size: 0.7rem;
}
.ca-status-v7 .ca-new-badge {
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(232,183,48,0.1);
  color: var(--gc-gold);
  font-weight: 700;
  font-size: 0.6rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.ca-empty-v7 {
  text-align: center;
  padding: 32px 20px;
  color: rgba(255,255,255,0.2);
}
.ca-empty-v7 .ca-empty-icon {
  font-size: 2.2rem; margin-bottom: 10px;
  opacity: 0.4;
}
.ca-empty-v7 p { font-size: 0.82rem; margin-bottom: 4px; }
.ca-empty-v7 .ca-empty-hint { font-size: 0.7rem; color: rgba(255,255,255,0.15); }

/* ===================== SPIN WHEEL V7 ===================== */
.wheel-container {
  position: relative;
  width: 380px; height: 380px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.wheel-canvas {
  width: 100%; height: 100%;
  border-radius: 50%;
  filter: drop-shadow(0 0 20px rgba(232,183,48,0.1));
  transition: filter 0.3s ease;
}
.wheel-spinning .wheel-canvas {
  filter: drop-shadow(0 0 40px rgba(232,183,48,0.25));
}
.wheel-pointer {
  position: absolute;
  top: -12px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-top: 30px solid var(--gc-gold);
  z-index: 10;
  filter: drop-shadow(0 4px 10px rgba(232,183,48,0.4));
}
.wheel-center {
  position: absolute;
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8B730, #F5D261);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  cursor: pointer; z-index: 5;
  box-shadow: 0 0 20px rgba(232,183,48,0.35);
  transition: transform 0.2s ease;
}
.wheel-center:hover { transform: scale(1.1); }

/* Participant items in wheel */
.participant-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
  transition: all 0.2s ease;
}
.participant-item:hover {
  background: rgba(255,255,255,0.05);
  border-color: rgba(232,183,48,0.1);
}
.chat-answer-avatar-placeholder {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(232,183,48,0.15), rgba(124,58,237,0.15));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 800; color: var(--gc-gold);
  flex-shrink: 0;
}
.chat-answer-platform {
  font-size: 0.6rem; padding: 3px 8px;
  border-radius: 6px;
}
.chat-answer-platform.twitch { background: rgba(145,70,255,0.2); color: #B57CFF; }
.chat-answer-platform.kick { background: rgba(83,252,24,0.12); color: #53FC18; }
.remove-btn {
  width: 24px; height: 24px;
  border-radius: 6px;
  background: transparent;
  border: none;
  color: rgba(239,68,68,0.4);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  transition: all 0.2s;
}
.remove-btn:hover { background: rgba(239,68,68,0.12); color: #EF4444; }

/* Toggle Switch */
.toggle-switch {
  width: 40px; height: 22px;
  border-radius: 50px;
  background: rgba(255,255,255,0.08);
  position: relative;
  cursor: pointer;
  transition: background 0.3s;
}
.toggle-switch::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.4);
  transition: all 0.3s;
}
.toggle-switch.active { background: rgba(232,183,48,0.25); }
.toggle-switch.active::after {
  transform: translateX(18px);
  background: var(--gc-gold);
}

/* Wheel winner popup */
.wheel-winner-popup {
  border: 1px solid rgba(232,183,48,0.15) !important;
  position: relative;
}

/* Wheel history */
.wheel-history-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.03);
}
.wheel-history-item .round-num {
  font-size: 0.7rem; font-weight: 800;
  color: rgba(255,255,255,0.3);
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.04);
}

/* ===================== CONFETTI ===================== */
.confetti-piece {
  position: fixed;
  width: 8px; height: 8px;
  z-index: 10000;
  pointer-events: none;
  animation: confettiFall 2s ease forwards;
}
@keyframes confettiFall {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}

/* ===================== QA GAME OVERRIDES ===================== */
.qa-option {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  padding: 14px 18px !important;
  cursor: pointer;
  transition: all 0.25s ease !important;
}
.qa-option:hover {
  background: rgba(232,183,48,0.06) !important;
  border-color: rgba(232,183,48,0.15) !important;
  transform: translateY(-2px);
}
.qa-option.correct {
  background: rgba(16,185,129,0.12) !important;
  border-color: rgba(16,185,129,0.3) !important;
}
.qa-option.wrong {
  background: rgba(239,68,68,0.1) !important;
  border-color: rgba(239,68,68,0.3) !important;
}

/* ===================== PERFORMANCE OVERRIDES ===================== */
.gc-card, .gp-hero, .gp-rooms-card {
  will-change: auto;
  contain: layout style paint;
}
.gc-card .gc-image, .gp-hero-image {
  will-change: auto;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1200px) {
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
}
@media (max-width: 768px) {
  .games-hub-header { padding: 30px 20px; border-radius: 20px; }
  .games-hub-title { font-size: 2rem !important; }
  .games-hub-subtitle { font-size: 0.85rem; }
  .games-hub-stats { gap: 14px; padding: 12px 18px; }
  .games-filter-bar { gap: 6px; }
  .games-filter-chip { padding: 8px 12px; font-size: 0.75rem; }
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
  .gc-image-wrap { height: 200px; }
  .gc-body { padding: 14px 16px 16px; }
  .gp-hero-title { font-size: 1.5rem; }
  .gp-hero-content { padding: 0 20px 16px; gap: 12px; }
  .gp-hero-icon { width: 52px; height: 52px; font-size: 1.5rem; }
  .gp-hero-meta { padding: 0 20px 16px; }
  .wheel-container { width: 300px; height: 300px; }
}
@media (max-width: 480px) {
  .games-hub-section { padding: 0 12px 40px; }
  .games-hub-header { padding: 24px 16px; margin-bottom: 20px; }
  .games-hub-title { font-size: 1.6rem !important; }
  .games-hub-icon { width: 56px; height: 56px; font-size: 1.5rem; }
  .games-grid { grid-template-columns: 1fr; gap: 14px; }
  .gc-image-wrap { height: 180px; }
  .gp-hero-image-wrap { height: 150px; }
  .gp-hero-title { font-size: 1.3rem; }
  .wheel-container { width: 260px; height: 260px; }
  .chat-answers-body-v7 { max-height: 280px; }
}


/* ─────────── SOURCE: css/stream-ready-v2.css ─────────── */
/* ============================================================
   STREAM-READY DESIGN SYSTEM V4 - JAWLAH-STYLE 3-COLUMN LAYOUT
   Dark theme · Grid background · Purple accents
   Matches jawlah.live reference screenshots
   ============================================================ */

/* ===================== CSS VARIABLES ===================== */
:root {
  --sr-bg: #0B0A1A;
  --sr-bg-alt: #0F0E24;
  --sr-surface: rgba(16, 14, 36, 0.95);
  --sr-surface-2: rgba(22, 18, 50, 0.92);
  --sr-surface-3: rgba(28, 24, 62, 0.88);
  --sr-border: rgba(255,255,255,0.06);
  --sr-border-active: rgba(168,85,247,0.4);
  --sr-purple: #A855F7;
  --sr-purple-dark: #7C3AED;
  --sr-purple-glow: rgba(168,85,247,0.15);
  --sr-gold: #E8B730;
  --sr-text: rgba(255,255,255,0.94);
  --sr-text-secondary: rgba(255,255,255,0.55);
  --sr-text-muted: rgba(255,255,255,0.3);
  --sr-correct: #10B981;
  --sr-wrong: #EF4444;
  --sr-radius: 16px;
  --sr-radius-sm: 12px;
  --sr-radius-xs: 8px;
  --sr-shadow: 0 4px 20px rgba(0,0,0,0.3);
  --sr-transition: all 0.25s ease;
  --sr-font: 'Cairo', 'Poppins', sans-serif;
}

/* ===================== PERFORMANCE ===================== */
.gc-card, .jawlah-chat-msg, .jawlah-player-item { contain: layout style; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ===================== GAMES HUB ===================== */
.games-hub-section {
  padding: 100px 24px 40px;
  max-width: 1400px;
  margin: 0 auto;
}
.games-hub-header {
  text-align: center;
  margin-bottom: 32px;
}
.games-hub-title {
  font-size: 2.2rem;
  font-weight: 900;
  color: white;
  margin-bottom: 8px;
}
.gold-text { color: var(--sr-gold); }
.games-hub-subtitle {
  color: var(--sr-text-secondary);
  font-size: 1rem;
  margin-bottom: 20px;
}
.games-hub-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.games-hub-stat { text-align: center; }
.games-hub-stat-num { display: block; font-size: 1.4rem; font-weight: 800; color: white; }
.games-hub-stat-label { font-size: 0.75rem; color: var(--sr-text-secondary); }
.games-hub-stat-divider { width: 1px; height: 30px; background: var(--sr-border); }

/* Filter Bar */
.games-filter-bar {
  display: flex;
  gap: 8px;
  padding: 12px 0;
  margin-bottom: 24px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.games-filter-bar::-webkit-scrollbar { display: none; }
.games-filter-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 50px;
  background: var(--sr-surface);
  border: 1px solid var(--sr-border);
  color: var(--sr-text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--sr-transition);
}
.games-filter-chip:hover { border-color: var(--sr-border-active); color: white; }
.games-filter-chip.active {
  background: var(--sr-purple);
  border-color: var(--sr-purple);
  color: white;
}
.games-filter-chip-count {
  background: rgba(255,255,255,0.15);
  padding: 1px 8px;
  border-radius: 20px;
  font-size: 0.75rem;
}

/* Game Cards Grid */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}
.gc-card {
  background: var(--sr-surface);
  border-radius: var(--sr-radius);
  border: 1px solid var(--sr-border);
  overflow: hidden;
  cursor: pointer;
  transition: var(--sr-transition);
  animation: fadeInUp 0.4s ease both;
}
.gc-card:hover {
  transform: translateY(-4px);
  border-color: var(--sr-border-active);
  box-shadow: 0 8px 30px rgba(168,85,247,0.1);
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.gc-image-wrap {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(168,85,247,0.15), rgba(16,14,36,0.9));
}
.gc-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gc-card:hover .gc-image { transform: scale(1.05); }
.gc-image-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,10,26,0.9) 0%, transparent 60%);
}
.gc-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.7rem;
  font-weight: 700;
  z-index: 2;
}
.gc-badge-new { background: var(--sr-purple); color: white; }
.gc-badge-ramadan { background: rgba(232,183,48,0.2); color: var(--sr-gold); }
.gc-platforms {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
  z-index: 2;
}
.gc-platform {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  backdrop-filter: blur(8px);
}
.gc-platform-twitch { background: rgba(145,70,255,0.3); color: #9146FF; }
.gc-platform-kick { background: rgba(83,252,24,0.15); color: #53FC18; font-weight: 900; font-size: 0.65rem; }
.gc-body { padding: 16px; }
.gc-title { font-size: 1.05rem; font-weight: 800; color: white; margin-bottom: 6px; }
.gc-desc { font-size: 0.8rem; color: var(--sr-text-secondary); line-height: 1.5; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gc-footer { display: flex; justify-content: space-between; align-items: center; }
.gc-players { font-size: 0.75rem; color: var(--sr-text-muted); display: flex; align-items: center; gap: 4px; }

/* ===================== JAWLAH GAME PAGE - 3-COLUMN LAYOUT ===================== */
.jawlah-game-layout {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--sr-bg);
  z-index: 60;
  overflow: hidden;
}

/* Header */
.jawlah-game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 48px;
  min-height: 48px;
  background: var(--sr-surface);
  border-bottom: 1px solid var(--sr-border);
  z-index: 10;
}
.jawlah-header-left, .jawlah-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 200px;
}
.jawlah-header-right { justify-content: flex-end; }
.jawlah-header-center {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  font-size: 1rem;
  color: white;
}
.jawlah-header-center i { color: var(--sr-purple); }
.jawlah-header-label {
  font-size: 0.78rem;
  color: var(--sr-text-muted);
  font-weight: 500;
}
.jawlah-header-separator {
  width: 1px;
  height: 20px;
  background: var(--sr-border);
}
.jawlah-back-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--sr-border);
  color: var(--sr-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--sr-transition);
}
.jawlah-back-btn:hover { background: rgba(255,255,255,0.1); color: white; }
.jawlah-player-count {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--sr-purple);
  font-weight: 700;
}
.jawlah-game-title { color: white; }

/* Body: 3 columns */
.jawlah-game-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* Sidebars */
.jawlah-sidebar {
  width: 300px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  background: var(--sr-surface);
  border-right: 1px solid var(--sr-border);
}
.jawlah-sidebar-right {
  border-right: none;
  border-left: 1px solid var(--sr-border);
}
.jawlah-sidebar-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 0.9rem;
  color: white;
  border-bottom: 1px solid var(--sr-border);
}
.jawlah-sidebar-header i { color: var(--sr-purple); }

/* Tabs */
.jawlah-sidebar-tabs {
  display: flex;
  border-bottom: 1px solid var(--sr-border);
}
.jawlah-tab {
  flex: 1;
  padding: 10px 8px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--sr-text-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  transition: var(--sr-transition);
}
.jawlah-tab:hover { color: var(--sr-text-secondary); }
.jawlah-tab.active {
  color: var(--sr-purple);
  border-bottom-color: var(--sr-purple);
}
.jawlah-tab-content {
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(168,85,247,0.2) transparent;
}
.jawlah-tab-content.hidden { display: none; }

/* Chat Messages */
.jawlah-chat-messages, .jawlah-log-messages {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 100%;
}
.jawlah-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 16px;
  text-align: center;
  color: var(--sr-text-muted);
  gap: 8px;
}
.jawlah-empty-state i { font-size: 2rem; opacity: 0.3; }
.jawlah-empty-state p { font-size: 0.82rem; }
.jawlah-empty-hint { font-size: 0.72rem !important; color: var(--sr-text-muted); }

.jawlah-chat-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: var(--sr-radius-xs);
  background: rgba(255,255,255,0.02);
  transition: background 0.2s;
  animation: chatSlide 0.3s ease;
}
@keyframes chatSlide {
  from { opacity: 0; transform: translateX(-8px); }
  to { opacity: 1; transform: translateX(0); }
}
.jawlah-chat-msg:hover { background: rgba(255,255,255,0.04); }
.jawlah-chat-msg.correct { background: rgba(16,185,129,0.08); border-left: 3px solid var(--sr-correct); }
.jawlah-chat-msg.wrong { background: rgba(239,68,68,0.06); }
.jawlah-chat-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.jawlah-chat-avatar-fallback {
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.jawlah-chat-body { flex: 1; min-width: 0; }
.jawlah-chat-name { font-size: 0.75rem; font-weight: 700; margin-left: 4px; }
.jawlah-chat-text { font-size: 0.8rem; color: var(--sr-text); display: block; word-break: break-word; }
.jawlah-chat-correct { color: var(--sr-correct); font-size: 0.85rem; }
.jawlah-chat-wrong { color: var(--sr-wrong); font-size: 0.85rem; }

/* Log Messages */
.jawlah-log-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  font-size: 0.78rem;
  color: var(--sr-text-secondary);
  border-radius: var(--sr-radius-xs);
}
.jawlah-log-msg i { font-size: 0.7rem; }
.jawlah-log-info i { color: #3B82F6; }
.jawlah-log-success i { color: var(--sr-correct); }
.jawlah-log-warning i { color: #F59E0B; }
.jawlah-log-error i { color: var(--sr-wrong); }
.jawlah-log-time { margin-right: auto; font-size: 0.68rem; color: var(--sr-text-muted); }

/* Sidebar Footer */
.jawlah-sidebar-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--sr-border);
  background: rgba(0,0,0,0.15);
}
.jawlah-footer-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--sr-border);
  color: var(--sr-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.72rem;
  transition: var(--sr-transition);
}
.jawlah-footer-btn:hover { color: white; background: rgba(255,255,255,0.1); }
.jawlah-footer-label {
  margin-right: auto;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.7rem;
  color: var(--sr-text-muted);
}

/* Center Game Area */
.jawlah-game-center {
  flex: 1;
  position: relative;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.jawlah-grid-bg {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(rgba(168,85,247,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,85,247,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}
.jawlah-game-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 900px;
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Players List in Sidebar */
.jawlah-players-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  font-size: 0.82rem;
  font-weight: 700;
  color: white;
  border-bottom: 1px solid var(--sr-border);
}
.jawlah-players-count { font-size: 0.72rem; color: var(--sr-text-muted); }
.jawlah-players-list { padding: 8px; }
.jawlah-player-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--sr-radius-xs);
  transition: background 0.2s;
}
.jawlah-player-item:hover { background: rgba(255,255,255,0.03); }
.jawlah-player-rank {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: rgba(168,85,247,0.15);
  color: var(--sr-purple);
  font-size: 0.7rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.jawlah-player-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.jawlah-player-avatar-fallback {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}
.jawlah-player-name {
  font-size: 0.82rem;
  font-weight: 700;
  flex: 1;
}
.jawlah-player-score {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--sr-gold);
}

/* Settings Panel */
.jawlah-settings-list {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.jawlah-setting-item label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
}
.jawlah-setting-hint {
  font-size: 0.7rem;
  color: var(--sr-text-muted);
  margin-top: 4px;
}
.jawlah-slider-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.jawlah-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.08);
  outline: none;
}
.jawlah-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sr-purple);
  cursor: pointer;
  box-shadow: 0 0 8px rgba(168,85,247,0.3);
}
.jawlah-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--sr-purple);
  cursor: pointer;
  border: none;
}
.jawlah-slider-val {
  min-width: 32px;
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: var(--sr-purple);
}
.jawlah-setting-divider {
  height: 1px;
  background: var(--sr-border);
}

/* Radio Group */
.jawlah-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.jawlah-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--sr-radius-xs);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--sr-border);
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--sr-text-secondary);
  transition: var(--sr-transition);
}
.jawlah-radio:hover { border-color: var(--sr-border-active); }
.jawlah-radio.active {
  border-color: var(--sr-purple);
  background: rgba(168,85,247,0.08);
  color: white;
}
.jawlah-radio input { display: none; }

/* Toggle */
.jawlah-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}
.jawlah-toggle-label { font-size: 0.78rem; color: var(--sr-text-secondary); }
.jawlah-toggle {
  position: relative;
  width: 42px;
  height: 22px;
  cursor: pointer;
}
.jawlah-toggle input { display: none; }
.jawlah-toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  border-radius: 11px;
  transition: 0.3s;
}
.jawlah-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  top: 2px;
  left: 2px;
  transition: 0.3s;
}
.jawlah-toggle input:checked + .jawlah-toggle-slider { background: var(--sr-purple); }
.jawlah-toggle input:checked + .jawlah-toggle-slider::before { transform: translateX(20px); }

/* Difficulty Cards */
.jawlah-difficulty-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.jawlah-diff-card {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  border-radius: var(--sr-radius-xs);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--sr-border);
  cursor: pointer;
  text-align: right;
  transition: var(--sr-transition);
}
.jawlah-diff-card:hover { border-color: var(--sr-border-active); }
.jawlah-diff-card.active {
  border-color: var(--sr-purple);
  background: rgba(168,85,247,0.1);
}
.jawlah-diff-card.active .jawlah-diff-icon { color: var(--sr-purple); }
.jawlah-diff-icon {
  font-size: 1rem;
  margin-bottom: 2px;
  color: var(--sr-text-muted);
}
.jawlah-diff-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: white;
}
.jawlah-diff-desc {
  font-size: 0.7rem;
  color: var(--sr-text-muted);
}

/* Reset Button */
.jawlah-btn-reset {
  margin: 16px 14px;
  padding: 10px 16px;
  border-radius: var(--sr-radius-xs);
  background: rgba(239,68,68,0.1);
  border: 1px solid rgba(239,68,68,0.2);
  color: #EF4444;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--sr-transition);
  text-align: center;
}
.jawlah-btn-reset:hover { background: rgba(239,68,68,0.15); }

/* Buttons */
.jawlah-btn-primary {
  padding: 10px 20px;
  border-radius: var(--sr-radius-xs);
  background: var(--sr-purple);
  color: white;
  font-weight: 700;
  font-size: 0.85rem;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: var(--sr-transition);
}
.jawlah-btn-primary:hover { background: var(--sr-purple-dark); transform: translateY(-1px); }
.jawlah-input {
  padding: 8px 14px;
  border-radius: var(--sr-radius-xs);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--sr-border);
  color: white;
  font-size: 0.85rem;
  outline: none;
  transition: var(--sr-transition);
}
.jawlah-input:focus { border-color: var(--sr-purple); }

/* Rooms */
.jawlah-rooms-card {
  background: var(--sr-surface);
  border-radius: var(--sr-radius);
  border: 1px solid var(--sr-border);
  padding: 20px;
  margin-bottom: 20px;
  width: 100%;
  max-width: 600px;
}
.jawlah-rooms-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.jawlah-rooms-join {
  display: flex;
  gap: 6px;
  flex: 1;
}
.jawlah-btn-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--sr-radius-xs);
  background: var(--sr-purple);
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===================== GAME INTERNAL STYLES ===================== */
/* Waiting Room Modal (shows inside game-container) */
.jawlah-waiting-modal {
  background: var(--sr-surface);
  border-radius: var(--sr-radius);
  border: 1px solid var(--sr-border);
  padding: 40px;
  text-align: center;
  max-width: 500px;
  margin: auto;
}
.jawlah-waiting-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: rgba(168,85,247,0.15);
  color: var(--sr-purple);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 16px;
}
.jawlah-waiting-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 8px;
}
.jawlah-waiting-subtitle {
  font-size: 0.88rem;
  color: var(--sr-text-secondary);
  margin-bottom: 24px;
}
.jawlah-waiting-steps {
  background: rgba(168,85,247,0.06);
  border: 1px solid rgba(168,85,247,0.15);
  border-radius: var(--sr-radius-sm);
  padding: 16px;
  margin-bottom: 24px;
}
.jawlah-waiting-steps h4 {
  color: var(--sr-purple);
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.jawlah-waiting-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: var(--sr-radius-xs);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--sr-border);
  margin-bottom: 6px;
  text-align: right;
}
.jawlah-waiting-step-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--sr-purple);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  flex-shrink: 0;
}
.jawlah-waiting-step-text {
  font-size: 0.82rem;
  color: var(--sr-text);
}
.jawlah-waiting-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.jawlah-btn-secondary {
  padding: 10px 20px;
  border-radius: var(--sr-radius-xs);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--sr-border);
  color: var(--sr-text-secondary);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: var(--sr-transition);
}
.jawlah-btn-secondary:hover { background: rgba(255,255,255,0.08); color: white; }

/* Timer */
.jawlah-timer {
  font-size: 3rem;
  font-weight: 900;
  color: var(--sr-purple);
  text-shadow: 0 0 20px rgba(168,85,247,0.3);
  text-align: center;
  margin: 10px 0;
}
.jawlah-timer.danger { color: var(--sr-wrong); text-shadow: 0 0 20px rgba(239,68,68,0.3); }

/* Question Text */
.jawlah-question {
  font-size: 1.8rem;
  font-weight: 800;
  color: white;
  text-align: center;
  margin: 16px 0;
  line-height: 1.4;
}

/* Answer Options */
.jawlah-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}
.jawlah-option {
  padding: 16px;
  border-radius: var(--sr-radius-sm);
  background: var(--sr-surface-2);
  border: 2px solid var(--sr-border);
  color: white;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: var(--sr-transition);
}
.jawlah-option:hover {
  border-color: var(--sr-purple);
  background: rgba(168,85,247,0.1);
}
.jawlah-option.correct {
  border-color: var(--sr-correct);
  background: rgba(16,185,129,0.15);
  animation: correctPulse 0.6s ease;
}
.jawlah-option.wrong {
  border-color: var(--sr-wrong);
  background: rgba(239,68,68,0.1);
  animation: wrongShake 0.5s ease;
}
@keyframes correctPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
@keyframes wrongShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* Results */
.jawlah-results {
  text-align: center;
  padding: 24px;
}
.jawlah-results-title {
  font-size: 2rem;
  font-weight: 900;
  color: var(--sr-gold);
  margin-bottom: 16px;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1024px) {
  .jawlah-sidebar-left { display: none; }
  .jawlah-sidebar-right { width: 260px; min-width: 260px; }
}
@media (max-width: 768px) {
  .jawlah-sidebar-left, .jawlah-sidebar-right { display: none; }
  .jawlah-game-container { padding: 16px; }
  .jawlah-question { font-size: 1.3rem; }
  .jawlah-timer { font-size: 2.2rem; }
  .jawlah-options { grid-template-columns: 1fr; }
  .games-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
  .games-hub-section { padding: 80px 14px 30px; }
  .games-hub-title { font-size: 1.6rem; }
}
@media (max-width: 480px) {
  .gc-image-wrap { height: 120px; }
  .jawlah-game-header { padding: 0 10px; }
  .jawlah-header-left, .jawlah-header-right { min-width: auto; }
  .jawlah-header-label { display: none; }
}

/* ===================== CHAT ANSWERS PANEL V7 OVERRIDE ===================== */
.chat-answers-panel-v7 {
  background: var(--sr-surface);
  border-radius: var(--sr-radius);
  border: 1px solid var(--sr-border);
  overflow: hidden;
  margin: 16px 0;
}
.chat-answers-header-v7 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--sr-border);
  background: rgba(168,85,247,0.05);
}
.ca-title {
  font-weight: 700;
  font-size: 0.88rem;
  color: white;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ca-title i { color: var(--sr-purple); }
.ca-count {
  min-width: 24px;
  height: 24px;
  border-radius: 12px;
  background: var(--sr-purple);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
}
.chat-answers-body-v7 {
  max-height: 350px;
  overflow-y: auto;
  padding: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(168,85,247,0.2) transparent;
}
.ca-item-v7 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--sr-radius-xs);
  transition: background 0.2s;
  animation: chatSlide 0.3s ease;
}
.ca-item-v7:hover { background: rgba(255,255,255,0.03); }
.ca-item-v7.correct { background: rgba(16,185,129,0.06); border-right: 3px solid var(--sr-correct); }
.ca-item-v7.wrong { background: rgba(239,68,68,0.04); }
.ca-item-v7.latest { border-right: 3px solid var(--sr-purple); }
.ca-avatar-v7 {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  color: white;
  overflow: hidden;
  flex-shrink: 0;
}
.ca-avatar-v7 img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ca-info-v7 { flex: 1; min-width: 0; }
.ca-name-v7 { font-size: 0.78rem; font-weight: 700; }
.ca-answer-v7 { font-size: 0.85rem; color: var(--sr-text); display: block; word-break: break-word; }
.ca-badge-v7 {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
}
.ca-badge-live {
  background: var(--sr-purple);
  color: white;
  animation: livePulse 1.5s ease infinite;
}
@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.ca-empty-v7 {
  text-align: center;
  padding: 30px;
  color: var(--sr-text-muted);
}
.ca-empty-icon { font-size: 2rem; margin-bottom: 8px; opacity: 0.3; }
.ca-empty-v7 p { font-size: 0.82rem; }
.ca-empty-hint { font-size: 0.7rem; color: var(--sr-text-muted); margin-top: 4px; }


/* ─────────── SOURCE: css/fix-all.css ─────────── */
/* ============================================================
   FINAL FIXES V1 - Override all conflicts
   Loaded LAST to fix: Twitch/Kick icons, badge size, cursor
   ============================================================ */

/* === FIX 1: Twitch/Kick Platform Icons on Game Cards ===
   Problem: games-redesign.css makes them 32x32 squares with border-radius:10px
   Fix: Force them to be small 26px circles with proper icons */
.gc-platforms {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  left: auto !important;
  display: flex !important;
  gap: 5px !important;
  z-index: 4 !important;
}
html[dir="rtl"] .gc-platforms {
  right: auto !important;
  left: 10px !important;
}
.gc-platform {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.72rem !important;
  backdrop-filter: blur(10px) !important;
  border: none !important;
  transition: transform 0.2s ease !important;
}
.gc-platform-twitch {
  background: rgba(145,70,255,0.35) !important;
  color: #B57CFF !important;
}
.gc-platform-twitch .fab.fa-twitch,
.gc-platform-twitch i {
  font-size: 0.75rem !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
.gc-platform-kick {
  background: rgba(83,252,24,0.18) !important;
  color: #53FC18 !important;
  font-weight: 900 !important;
  font-size: 0.72rem !important;
}
.gc-card:hover .gc-platform {
  transform: scale(1.1) !important;
}

/* === FIX 2: "جديدة" / "NEW" Badge - Make it small pill ===
   Problem: Shows as a huge rectangle
   Fix: Small pill badge with icon */
.gc-badge {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  right: auto !important;
  z-index: 4 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  letter-spacing: 0.3px !important;
  line-height: 1.3 !important;
  max-width: 90px !important;
  white-space: nowrap !important;
  box-shadow: none !important;
}
html[dir="rtl"] .gc-badge {
  left: auto !important;
  right: 10px !important;
}
.gc-badge-new {
  background: rgba(168,85,247,0.9) !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(168,85,247,0.3) !important;
}
.gc-badge-new i {
  font-size: 0.6rem !important;
}
.gc-badge-ramadan {
  background: rgba(232,183,48,0.2) !important;
  color: #E8B730 !important;
  box-shadow: 0 2px 8px rgba(232,183,48,0.2) !important;
}

/* === FIX 3: Custom Cursor styles moved to final-fixes-2026.css ===
   Purple hardcoded colors removed to allow dynamic cursor style selection
   from the admin dashboard. */
/* DISABLED: was forcing native arrow cursor to show, causing double-cursor bug.
   Native cursor hiding is now handled by final-fixes-2026.css (desktop) and
   re-enabled for touch devices in the media query below. */

/* Hide cursor particles on mobile */
@media (hover: none), (pointer: coarse) {
  #cursor-main, #cursor-dot, #cursor-trail {
    display: none !important;
  }
  /* On touch devices, restore native cursor (harmless - touch devices don't show cursor anyway) */
  html, body, body * {
    cursor: auto !important;
  }
}

/* === FIX 4: Game card image height consistency === */
.gc-image-wrap {
  height: 170px !important;
}



/* ─────────── SOURCE: css/final-fixes-2026.css ─────────── */
/* ============================================================
   FINAL FIXES 2026-04-17 - Cursor, Game Layout, Game Sizing
   Loaded LAST to fix multiple UI issues
   ============================================================ */

/* ===================================================
   FIX 1: Glowing Circle Cursor (Desktop only)
   - KEEP native arrow/pointer visible (so user knows exactly where they click)
   - Add a decorative glowing ring + dot that FOLLOWS the native cursor
   - The ring has pointer-events:none so it never blocks clicks
   =================================================== */
@media (hover: hover) and (pointer: fine) {
  /* 2026-04-17 UPDATE: Hide native cursor so custom glowing cursor becomes the primary pointer */
  html, body, body * {
    cursor: none !important;
  }
  /* Text cursor for text fields (keep I-beam so typing is usable) */
  input[type="text"], input[type="email"], input[type="number"], input[type="search"],
  input[type="password"], input[type="url"], input[type="tel"],
  textarea, [contenteditable="true"] {
    cursor: text !important;
  }
  /* Not-allowed for disabled */
  button:disabled, input:disabled, [disabled] {
    cursor: not-allowed !important;
  }
  /* Iframes keep native cursor (we cannot control cursor inside them) */
  iframe {
    cursor: auto !important;
  }
}

/* The main glowing ring (outer)
   Colors are set by JS (initCursorEffects in app.js) based on chosen style.
   Here we only set structural properties and a golden FALLBACK color. */
#cursor-main {
  display: block !important;
  position: fixed !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  width: 26px !important;
  height: 26px !important;
  border: 1.5px solid rgba(232, 183, 48, 0.65); /* Golden fallback - softer */
  border-radius: 50% !important;
  transform: translate(-9999px, -9999px); /* initial off-screen; JS sets real transform on first mousemove */
  /* PERF: Only transition size/color changes, NOT position */
  transition: width 0.15s ease, height 0.15s ease, border-color 0.15s ease, background 0.15s ease !important;
  box-shadow:
    0 0 12px rgba(232, 183, 48, 0.35),
    0 0 24px rgba(232, 183, 48, 0.15);
  background: transparent;
  top: 0;
  left: 0;
  will-change: transform;
  contain: layout style;
}

/* Center dot - bright pulse */
#cursor-dot {
  display: block !important;
  position: fixed !important;
  pointer-events: none !important;
  z-index: 999999 !important;
  width: 6px !important;
  height: 6px !important;
  background: rgba(232, 183, 48, 1); /* Golden fallback */
  border-radius: 50% !important;
  transform: translate(-9999px, -9999px); /* initial off-screen; JS sets real transform on first mousemove */
  box-shadow:
    0 0 12px rgba(232, 183, 48, 0.85),
    0 0 24px rgba(232, 183, 48, 0.45); /* Golden fallback */
  top: 0;
  left: 0;
  will-change: transform;
  contain: layout style;
}

/* Outer soft glow trail */
#cursor-trail {
  display: block !important;
  position: fixed !important;
  pointer-events: none !important;
  z-index: 999998 !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle,
    rgba(232, 183, 48, 0.35),
    rgba(232, 183, 48, 0.08) 60%,
    transparent 80%); /* Golden fallback */
  transform: translate(-9999px, -9999px); /* initial off-screen; JS sets real transform on first mousemove */
  mix-blend-mode: screen;
  transition: width 0.3s ease, height 0.3s ease !important;
  top: 0;
  left: 0;
  will-change: transform;
  contain: layout style;
}

/* Hide all cursors on mobile / touch devices */
@media (hover: none), (pointer: coarse) {
  #cursor-main, #cursor-dot, #cursor-trail {
    display: none !important;
  }
  html, body, body * {
    cursor: auto !important;
  }
}

/* Ensure the decorative glowing ring/dot stays visible above modals/overlays.
   The native cursor is always visible (we no longer hide it). */
@media (hover: hover) and (pointer: fine) {
  #cursor-main, #cursor-dot, #cursor-trail {
    /* Override any accidental display:none from page-specific CSS */
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
  }
  /* Decoration layer above modals but click-through */
  #cursor-main { z-index: 2147483647 !important; }
  #cursor-dot  { z-index: 2147483647 !important; }
  #cursor-trail { z-index: 2147483646 !important; }
  /* Inside auth modal, keep native cursor visible so users can precisely click buttons */
  #auth-modal, #auth-modal * {
    cursor: auto;
  }
  #auth-modal a, #auth-modal button, #auth-modal [onclick], #auth-modal [role="button"] {
    cursor: pointer !important;
  }
  #auth-modal input, #auth-modal textarea, #auth-modal [contenteditable="true"] {
    cursor: text !important;
  }
}

/* ===================================================
   FIX 2: Jawlah Game Layout - Below Main Nav
   The main navbar (#main-nav) is fixed at top with
   height ~65px. The game layout must start BELOW it.
   =================================================== */
.jawlah-game-layout {
  position: fixed !important;
  top: 65px !important;           /* Leave room for main navbar */
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  /* inset removed to not override top/bottom */
  z-index: 40 !important;         /* Below navbar (z-50) so navbar stays clickable */
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* On mobile, navbar is smaller / may be different - adjust */
@media (max-width: 768px) {
  .jawlah-game-layout {
    top: 60px !important;
  }
}

/* Header within the game layout - make sure it's visible */
.jawlah-game-header {
  position: relative !important;
  z-index: 5 !important;
  height: 50px !important;
  min-height: 50px !important;
  flex-shrink: 0 !important;
}

/* Body fills remaining space */
.jawlah-game-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* ===================================================
   FIX 3: Game Center - Proper Sizing and Scrolling
   The game area should be scrollable if content is too tall
   =================================================== */
.jawlah-game-center {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding: 20px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  position: relative !important;
}

/* Game container fills width */
.jawlah-game-container,
#game-container {
  width: 100% !important;
  max-width: 900px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

/* Ensure glass-cards inside games aren't cut */
#game-container .glass-card {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto 16px auto !important;
  box-sizing: border-box !important;
}

/* Sidebars also scroll properly */
.jawlah-sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  min-height: 0 !important;
}

.jawlah-sidebar-left,
.jawlah-sidebar-right {
  display: flex !important;
  flex-direction: column !important;
}

/* Tab content scrolls */
.jawlah-tab-content {
  overflow-y: auto !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

/* Settings list spacing */
.jawlah-settings-list {
  padding-bottom: 16px !important;
}

/* ===================================================
   FIX 4: Responsive - stack sidebars on small screens
   =================================================== */
@media (max-width: 1100px) {
  .jawlah-sidebar-left {
    display: none !important;
  }
  .jawlah-sidebar-right {
    width: 280px !important;
    min-width: 280px !important;
  }
}

@media (max-width: 768px) {
  .jawlah-game-body {
    flex-direction: column !important;
  }
  .jawlah-sidebar-left, .jawlah-sidebar-right {
    display: none !important;
  }
  .jawlah-game-center {
    padding: 12px !important;
  }
}

/* ===================================================
   FIX 5: Make sure redo/replay buttons look clickable
   =================================================== */
#game-container button,
.jawlah-game-container button {
  cursor: pointer !important;
}

#game-container button:hover,
.jawlah-game-container button:hover {
  filter: brightness(1.15) !important;
}

/* Give visual feedback on redo buttons specifically */
#game-container button:has(.fa-redo),
.jawlah-game-container button:has(.fa-redo) {
  transition: transform 0.2s ease, background 0.2s ease !important;
}
#game-container button:has(.fa-redo):hover,
.jawlah-game-container button:has(.fa-redo):hover {
  transform: rotate(-90deg) !important;
}


/* ─────────── SOURCE: css/mega-upgrade-2026.css ─────────── */
/* ============ MEGA UPGRADE 2026 ============ */
/* Modern effects: Glass borders, Parallax, 3D tilt, Skeleton loaders, Stream Live cursor */

/* ===== ANIMATED GLASS BORDERS ===== */
@keyframes glass-border-rotate {
  0% { --angle: 0deg; }
  100% { --angle: 360deg; }
}

@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

.game-card {
  position: relative;
  overflow: hidden;
  will-change: transform;
  transform: translateZ(0);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.game-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--angle, 0deg), transparent 40%, rgba(232,183,48,0.4) 50%, transparent 60%);
  animation: glass-border-rotate 4s linear infinite;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.game-card:hover::before {
  opacity: 1;
}

/* ===== 3D TILT EFFECT ON HOVER ===== */
.game-card:hover {
  transform: perspective(800px) rotateY(var(--rx, 0deg)) rotateX(var(--ry, 0deg)) scale(1.03);
  box-shadow: 0 20px 40px rgba(0,0,0,0.4), 0 0 30px rgba(232,183,48,0.1);
}

/* ===== SKELETON LOADERS ===== */
@keyframes skeleton-shimmer {
  0% { background-position: -200px 0; }
  100% { background-position: calc(200px + 100%) 0; }
}

.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 8px;
}

.skeleton-card {
  background: rgba(22,16,58,0.5);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.05);
  overflow: hidden;
}

.skeleton-card .skeleton-image {
  width: 100%;
  height: 160px;
  background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
  background-size: 200px 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

.skeleton-card .skeleton-title {
  height: 20px;
  width: 70%;
  margin: 16px;
  border-radius: 4px;
}

.skeleton-card .skeleton-desc {
  height: 14px;
  width: 90%;
  margin: 0 16px 16px;
  border-radius: 4px;
}

.skeleton-card .skeleton-tags {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
}

.skeleton-card .skeleton-tag {
  height: 24px;
  width: 60px;
  border-radius: 12px;
}

/* ===== PARALLAX SPACE BACKGROUND ===== */
.hero-section {
  position: relative;
  overflow: hidden;
}

.hero-bg {
  transition: transform 0.1s linear;
  will-change: transform;
}

/* ===== STREAM LIVE CURSOR (Style 9) ===== */
.cursor-stream-dot {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 15px rgba(239,68,68,0.8), 0 0 30px rgba(239,68,68,0.4);
  pointer-events: none;
  z-index: 99996;
  animation: stream-pulse 1.2s infinite;
  transform: translate(-50%, -50%);
}

@keyframes stream-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.7; }
}

.cursor-stream-label {
  position: fixed;
  pointer-events: none;
  z-index: 99995;
  background: rgba(239,68,68,0.15);
  border: 1px solid rgba(239,68,68,0.5);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: bold;
  color: #ef4444;
  letter-spacing: 1px;
  text-transform: uppercase;
  transform: translate(-50%, 12px);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

/* ===== CURSOR REPLAY ANIMATION ===== */
@keyframes cursor-preview-bounce {
  0% { transform: translate(-50%,-50%) scale(0.3); opacity: 0; }
  40% { transform: translate(-50%,-50%) scale(1.2); opacity: 1; }
  60% { transform: translate(-50%,-50%) scale(0.9); }
  80% { transform: translate(-50%,-50%) scale(1.05); }
  100% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
}

.cursor-replay {
  animation: cursor-preview-bounce 0.5s ease-out !important;
}

/* ===== DARK/LIGHT MODE ===== */
body.light-mode {
  background: #f0f0f5 !important;
  color: #1a1a2e !important;
}

body.light-mode .glass-nav {
  background: rgba(255,255,255,0.85) !important;
  border-bottom-color: rgba(0,0,0,0.1) !important;
}

body.light-mode .glass-card,
body.light-mode .glass-card-strong {
  background: rgba(255,255,255,0.8) !important;
  border-color: rgba(0,0,0,0.1) !important;
  color: #1a1a2e !important;
}

body.light-mode .game-card {
  background: rgba(255,255,255,0.9) !important;
  border-color: rgba(0,0,0,0.08) !important;
  color: #1a1a2e !important;
}

body.light-mode .game-card .game-title {
  color: #1a1a2e !important;
}

body.light-mode .game-card .game-desc {
  color: #555 !important;
}

body.light-mode .nav-btn,
body.light-mode .glass-btn {
  color: #1a1a2e !important;
}

body.light-mode .stat-card {
  background: rgba(255,255,255,0.7) !important;
  border-color: rgba(0,0,0,0.08) !important;
}

body.light-mode .text-gray-300,
body.light-mode .text-gray-400 {
  color: #555 !important;
}

body.light-mode .text-gray-500,
body.light-mode .text-gray-600 {
  color: #777 !important;
}

body.light-mode .site-footer {
  background: rgba(0,0,0,0.03) !important;
}

body.light-mode .admin-sidebar {
  background: rgba(255,255,255,0.95) !important;
}

body.light-mode .admin-sidebar .admin-nav-btn {
  color: #333 !important;
}

body.light-mode .admin-content-area {
  background: rgba(245,245,250,0.95) !important;
}

body.light-mode .glass-input {
  background: rgba(0,0,0,0.05) !important;
  color: #1a1a2e !important;
  border-color: rgba(0,0,0,0.15) !important;
}

body.light-mode .section-header h2 {
  color: #1a1a2e !important;
}

body.light-mode .hero-section {
  background: linear-gradient(135deg, #e8e4f0 0%, #d4d0e0 50%, #f0edf5 100%) !important;
}

body.light-mode .loading-screen {
  background: linear-gradient(135deg, #f0f0f5, #e0e0ea) !important;
}

body.light-mode .loading-title,
body.light-mode .loading-subtitle {
  color: #1a1a2e !important;
}

/* ===== OPTIMIZED TRANSITIONS ===== */
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Reduce paint for cursor elements */
#cursor-main, #cursor-dot, #cursor-trail {
  will-change: left, top, transform;
  contain: layout style;
}

/* Hardware accelerate animated elements */
.animate-slide-up,
.animate-fade-in,
.animate-scale-in {
  will-change: transform, opacity;
  backface-visibility: hidden;
}

/* Reduce repaints on hover */
.game-card,
.stat-card,
.hero-badge,
.about-platform-link {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ===== ADMIN KEYBOARD SHORTCUTS HINT ===== */
.admin-nav-btn .shortcut-hint {
  display: none;
  font-size: 10px;
  opacity: 0.5;
  margin-right: 8px;
  background: rgba(255,255,255,0.1);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: monospace;
}

@media (min-width: 768px) {
  .admin-nav-btn .shortcut-hint {
    display: inline;
  }
}

/* ===== IMPROVED GAME IMAGE LOADING ===== */
.game-image img {
  transition: opacity 0.3s ease;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.game-image img[src=''] {
  opacity: 0;
}

/* ===== FIX: Prevent layout shift ===== */
.game-card .game-image {
  aspect-ratio: 16/10;
  overflow: hidden;
  background: rgba(22,16,58,0.5);
}

/* ===== PERFORMANCE: Limit animation on 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;
  }
  .game-card::before { display: none; }
  .hero-bg { transform: none !important; }
}


/* ─────────── SOURCE: css/perf-polish-2026.css ─────────── */
/* ================================================================= */
/*  Performance & Polish Upgrade 2026 — ElAshkef                     */
/*  Stream Live cursor, 3D tilt, skeleton loaders, animated glass   */
/* ================================================================= */

/* ============ STREAM LIVE CURSOR ============ */
/* Red broadcast pulsing effect for the new "stream_live" cursor style */
#cursor-main.cursor-live-pulse {
  animation: cursorLivePulse 1.3s ease-in-out infinite;
}
#cursor-dot.cursor-live-pulse-dot {
  animation: cursorLiveDotPulse 1.3s ease-in-out infinite;
}
@keyframes cursorLivePulse {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(255,59,59,0.6),
      0 0 12px rgba(255,59,59,0.55),
      0 0 28px rgba(255,59,59,0.30);
  }
  50% {
    box-shadow:
      0 0 0 14px rgba(255,59,59,0),
      0 0 22px rgba(255,59,59,0.80),
      0 0 45px rgba(255,59,59,0.45);
  }
}
@keyframes cursorLiveDotPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 1; }
  50%      { transform: translate(-50%, -50%) scale(1.3); opacity: 0.85; }
}

/* ============ CURSOR "POP" PREVIEW ANIMATION ============ */
/* Triggered once when a cursor style is selected */
#cursor-main.cursor-preview-anim,
#cursor-dot.cursor-preview-anim {
  animation-name: cursorPreviewPop;
  animation-duration: 0.45s;
  animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Don't override the ongoing live-pulse animation */
#cursor-main.cursor-live-pulse.cursor-preview-anim {
  animation:
    cursorPreviewPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
    cursorLivePulse 1.3s ease-in-out 0.5s infinite;
}
@keyframes cursorPreviewPop {
  0%   { transform: translate(-50%, -50%) scale(0.3); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); }
}

/* ============ SKELETON LOADER ============ */
/* Replaces spinners on game cards and image slots */
.skeleton-loader {
  position: relative;
  background: linear-gradient(90deg,
    rgba(40, 30, 70, 0.5)  0%,
    rgba(60, 50, 100, 0.75) 50%,
    rgba(40, 30, 70, 0.5) 100%);
  background-size: 200% 100%;
  animation: skeletonShine 1.4s ease-in-out infinite;
  overflow: hidden;
}
.skeleton-loader img {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.skeleton-loader img[src]:not([src=""]) {
  /* Will be set to opacity:1 once loaded via JS */
}
.skeleton-loader::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
    transparent 30%,
    rgba(232,183,48,0.08) 50%,
    transparent 70%);
  animation: skeletonSweep 1.8s ease-in-out infinite;
  pointer-events: none;
}
/* Hide skeleton decoration once real image loaded */
.game-image:not(.skeleton-loader) img { opacity: 1; }
.game-image:not(.skeleton-loader)::after { display: none; }
.game-image:not(.skeleton-loader) { animation: none; background: transparent; }

@keyframes skeletonShine {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes skeletonSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Show real image when loaded (JS removes skeleton-loader class) */
.game-image img { opacity: 1 !important; }
.game-image.skeleton-loader img { opacity: 0 !important; }

/* ============ 3D TILT HOVER FOR GAME CARDS ============ */
/* Subtle rotateX/rotateY on hover - GPU accelerated */
.game-card {
  transform-style: preserve-3d;
  transition:
    transform 0.45s cubic-bezier(0.22, 0.9, 0.3, 1.15),
    box-shadow 0.4s ease;
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  .game-card:hover {
    transform: translateY(-6px) rotateX(3deg) rotateY(-3deg) scale(1.015);
    box-shadow:
      0 20px 40px -10px rgba(0,0,0,0.55),
      0 0 30px rgba(232,183,48,0.18);
  }
  .game-card:hover .game-image img {
    transform: scale(1.06);
    transition: transform 0.6s ease;
  }
}

/* ============ ANIMATED GLASS BORDERS ============ */
/* Subtle rotating conic gradient border around featured cards */
.game-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(232,183,48,0.35) 90deg,
    transparent 180deg,
    rgba(232,183,48,0.25) 270deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  animation: glassBorderSpin 6s linear infinite;
  animation-play-state: paused;
  pointer-events: none;
  z-index: 1;
}
@media (hover: hover) and (pointer: fine) {
  .game-card:hover::before {
    opacity: 1;
    animation-play-state: running;
  }
}
@keyframes glassBorderSpin {
  0%   { transform: rotate(0deg);   }
  100% { transform: rotate(360deg); }
}

/* ============ PARALLAX BACKGROUND (subtle) ============ */
/* Already handled via #bg-animation in app.js; only add the
   translate-Y-on-scroll class that app.js will apply. */
body.parallax-ready #bg-animation {
  will-change: transform;
  transition: transform 0.15s linear;
}

/* ============ PERFORMANCE: REDUCE MOTION FOR LOW-POWER DEVICES ============ */
@media (prefers-reduced-motion: reduce) {
  .game-card,
  .game-card::before,
  .skeleton-loader,
  .skeleton-loader::after,
  #cursor-main.cursor-live-pulse,
  #cursor-dot.cursor-live-pulse-dot,
  #cursor-main.cursor-preview-anim,
  #cursor-dot.cursor-preview-anim {
    animation: none !important;
    transition: none !important;
  }
  .game-card:hover {
    transform: none !important;
  }
}

/* ============ DASHBOARD KEYBOARD SHORTCUT HINT ============ */
.admin-shortcut-hint {
  display: inline-block;
  font-size: 0.65rem;
  padding: 2px 6px;
  margin-inline-start: 6px;
  border-radius: 4px;
  background: rgba(232,183,48,0.1);
  color: var(--gold, #E8B730);
  border: 1px solid rgba(232,183,48,0.25);
  font-family: 'Courier New', monospace;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ============ ADMIN FLASH HIGHLIGHT (when shortcut activates a tab) ============ */
@keyframes adminShortcutFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,183,48,0); }
  50%      { box-shadow: 0 0 0 3px rgba(232,183,48,0.55); }
}
.admin-nav-btn.shortcut-flash {
  animation: adminShortcutFlash 0.5s ease;
}

/* ============ FONTS LOADED CLASS ============ */
/* Lighter text rendering before webfont loads to prevent layout jank */
html:not(.fonts-loaded) body {
  font-synthesis: style weight;
}


/* ─────────── SOURCE: css/games-fixes-2026-04-17.css ─────────── */
/* ============================================================
   GAMES FIXES 2026-04-17 - Load LAST (after final-fixes-2026.css)
   Fixes:
   1. Game center area too small (was max-width 900px, now adaptive)
   2. Join-by-code proper styling in a clean landing area
   3. Settings panel improvements
   ============================================================ */

/* ============================================================
   FIX 1: ENLARGE GAME CENTER AREA
   The jawlah layout has 3 columns: left-sidebar | center | right-sidebar
   The center game container was capped at 900px, leaving a lot of
   empty gray space on big screens. We expand it responsively and
   remove the artificial max-width cap.
   ============================================================ */

/* The center (main game area in jawlah layout) — full flex, no artificial cap */
.jawlah-game-center {
  padding: 16px 20px !important;
  /* keep flex so content aligns, but DO NOT center vertically on tall games */
  justify-content: flex-start !important;
}

/* The inner container — use near full width, sensible cap for readability */
.jawlah-game-container,
#game-container {
  /* Replace the previous 900px cap with a much more generous value */
  max-width: 1400px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 16px 8px !important;
  box-sizing: border-box !important;
}

/* Games with very wide needs (spin wheel, snakes & ladders) — allow wider */
.jawlah-game-container:has(.wheel-container),
.jawlah-game-container:has(#snakes-board),
.jawlah-game-container:has(#jump-quest-canvas) {
  max-width: 1200px !important;
}

/* Internal game cards should expand to fill the new wider container */
#game-container .glass-card,
#game-container .glass-card-strong,
.jawlah-game-container .glass-card,
.jawlah-game-container .glass-card-strong {
  max-width: 100% !important;
  width: 100% !important;
}

/* Game content cards that had explicit max-w-5xl etc. from Tailwind
   should stretch to fill the new container */
#game-container .max-w-5xl,
#game-container .max-w-4xl,
#game-container .max-w-3xl,
.jawlah-game-container .max-w-5xl,
.jawlah-game-container .max-w-4xl,
.jawlah-game-container .max-w-3xl {
  max-width: 100% !important;
}

/* Slightly smaller sidebars on medium-large screens to give games more room */
@media (min-width: 1100px) and (max-width: 1500px) {
  .jawlah-sidebar-left,
  .jawlah-sidebar-right {
    width: 270px !important;
    min-width: 270px !important;
  }
}

/* Very large screens: allow even more game space, keep sidebars at 300 */
@media (min-width: 1501px) {
  .jawlah-game-container,
  #game-container {
    max-width: 1500px !important;
  }
}

/* Mobile: full width, tighter padding */
@media (max-width: 768px) {
  .jawlah-game-container,
  #game-container {
    padding: 8px 4px !important;
  }
  .jawlah-game-center {
    padding: 12px 10px !important;
  }
}

/* ============================================================
   FIX 2: JOIN BY CODE + ROOM MANAGEMENT — Better styling
   Make the input + button clearly visible and clickable.
   ============================================================ */

.jawlah-rooms-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(232,183,48,0.12);
  border-radius: 16px;
  padding: 18px 20px;
  margin-bottom: 16px;
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.jawlah-rooms-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: #E8B730;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.jawlah-rooms-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: stretch;
}
.jawlah-rooms-actions .jawlah-btn-primary {
  padding: 10px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(232,183,48,0.2), rgba(232,183,48,0.08));
  border: 1px solid rgba(232,183,48,0.3);
  color: #E8B730;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 8px;
}
.jawlah-rooms-actions .jawlah-btn-primary:hover {
  background: linear-gradient(135deg, rgba(232,183,48,0.3), rgba(232,183,48,0.15));
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232,183,48,0.15);
}
.jawlah-rooms-join {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 220px;
}
.jawlah-rooms-join .jawlah-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  color: white;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.2s;
  direction: ltr; /* room codes are latin */
  text-align: center;
  letter-spacing: 2px;
  font-family: monospace;
  text-transform: uppercase;
}
.jawlah-rooms-join .jawlah-input:focus {
  border-color: rgba(232,183,48,0.4);
  background: rgba(0,0,0,0.5);
}
.jawlah-rooms-join .jawlah-btn-icon {
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.3);
  color: #10B981;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 50px;
  font-weight: 700;
}
.jawlah-rooms-join .jawlah-btn-icon:hover {
  background: rgba(16,185,129,0.2);
  border-color: rgba(16,185,129,0.5);
  transform: scale(1.03);
}
.jawlah-rooms-join .jawlah-btn-icon:active {
  transform: scale(0.97);
}
#room-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ============================================================
   FIX 3: "Join-by-code" visibility toggle in settings
   When code-only is selected, highlight the code field in header
   ============================================================ */

.jawlah-rooms-join.code-required {
  outline: 2px solid rgba(232,183,48,0.4);
  outline-offset: 4px;
  border-radius: 14px;
  animation: joinCodePulse 1.5s ease-in-out infinite;
}
@keyframes joinCodePulse {
  0%, 100% { outline-color: rgba(232,183,48,0.3); }
  50% { outline-color: rgba(232,183,48,0.7); }
}

/* ============================================================
   FIX 4: Radio group styling — was flat, now clearer
   ============================================================ */
.jawlah-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.jawlah-radio {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: all 0.2s;
}
.jawlah-radio:hover {
  background: rgba(232,183,48,0.04);
  border-color: rgba(232,183,48,0.15);
}
.jawlah-radio.active {
  background: rgba(232,183,48,0.08);
  border-color: rgba(232,183,48,0.3);
  color: #E8B730;
}
.jawlah-radio input[type="radio"] {
  accent-color: #E8B730;
  cursor: pointer;
}

/* Toggle switches (accept guesses) */
.jawlah-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  cursor: pointer;
}
.jawlah-toggle input { opacity: 0; width: 0; height: 0; }
.jawlah-toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  border-radius: 24px;
  transition: all 0.2s;
}
.jawlah-toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px; width: 18px;
  left: 3px; top: 3px;
  background: white;
  border-radius: 50%;
  transition: all 0.2s;
}
.jawlah-toggle input:checked + .jawlah-toggle-slider {
  background: rgba(232,183,48,0.4);
}
.jawlah-toggle input:checked + .jawlah-toggle-slider::before {
  transform: translateX(20px);
  background: #E8B730;
}
html[dir="rtl"] .jawlah-toggle input:checked + .jawlah-toggle-slider::before {
  transform: translateX(-20px);
}

/* Settings hint text */
.jawlah-setting-hint {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.4);
  margin-top: 6px;
}

/* Difficulty cards */
.jawlah-difficulty-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.jawlah-diff-card {
  padding: 10px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: rgba(255,255,255,0.7);
}
.jawlah-diff-card:hover {
  background: rgba(232,183,48,0.04);
  border-color: rgba(232,183,48,0.15);
}
.jawlah-diff-card.active {
  background: rgba(232,183,48,0.08);
  border-color: rgba(232,183,48,0.3);
  color: #E8B730;
}
.jawlah-diff-name { font-weight: 700; font-size: 0.82rem; }
.jawlah-diff-desc { font-size: 0.68rem; color: rgba(255,255,255,0.4); }

.jawlah-setting-divider {
  height: 1px;
  background: rgba(255,255,255,0.05);
  margin: 6px 0;
}

.jawlah-btn-reset {
  margin: 12px 14px 14px;
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.2);
  color: #EF4444;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.2s;
}
.jawlah-btn-reset:hover {
  background: rgba(239,68,68,0.15);
  border-color: rgba(239,68,68,0.4);
}

/* Settings field labels */
.jawlah-setting-item {
  padding: 12px 14px;
}
.jawlah-setting-item label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin-bottom: 8px;
}
.jawlah-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.jawlah-slider {
  flex: 1;
  accent-color: #E8B730;
}
.jawlah-slider-val {
  min-width: 30px;
  padding: 3px 8px;
  background: rgba(232,183,48,0.1);
  border-radius: 6px;
  color: #E8B730;
  font-weight: 700;
  font-size: 0.8rem;
  text-align: center;
}

/* Toggle row */
.jawlah-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.jawlah-toggle-label {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  flex: 1;
}

/* ============================================================
   FIX 5: Custom scrollbar for the new wider game center
   ============================================================ */
.jawlah-game-center::-webkit-scrollbar { width: 6px; }
.jawlah-game-center::-webkit-scrollbar-track { background: transparent; }
.jawlah-game-center::-webkit-scrollbar-thumb {
  background: rgba(232,183,48,0.15);
  border-radius: 4px;
}
.jawlah-game-center::-webkit-scrollbar-thumb:hover {
  background: rgba(232,183,48,0.3);
}

/* ============================================================
   FIX 6: Landing page "Join game by code" component
   Shown on the homepage / in the games hub for users who have
   a code but haven't picked a specific game yet.
   ============================================================ */
.global-join-banner {
  max-width: 700px;
  margin: 0 auto 24px;
  padding: 14px 18px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(16,185,129,0.08), rgba(232,183,48,0.05));
  border: 1px solid rgba(16,185,129,0.2);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.global-join-banner .gjb-icon {
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(16,185,129,0.15);
  display: flex; align-items: center; justify-content: center;
  color: #10B981;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.global-join-banner .gjb-label {
  font-weight: 700;
  color: white;
  font-size: 0.9rem;
}
.global-join-banner .gjb-sub {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
}
.global-join-banner-form {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 240px;
}
.global-join-banner-input {
  flex: 1;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.1);
  color: white;
  font-family: monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-align: center;
  font-size: 0.9rem;
  outline: none;
}
.global-join-banner-input:focus {
  border-color: rgba(16,185,129,0.4);
  background: rgba(0,0,0,0.5);
}
.global-join-banner-btn {
  padding: 10px 18px;
  border-radius: 10px;
  background: #10B981;
  color: white;
  border: none;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.global-join-banner-btn:hover {
  background: #059669;
  transform: translateY(-1px);
}

/* ============================================================
   FIX 7: Jawlah player / setting items visual improvements
   ============================================================ */
.jawlah-player-score {
  margin-inline-start: auto;
  font-size: 0.72rem;
  color: #E8B730;
  background: rgba(232,183,48,0.08);
  padding: 2px 8px;
  border-radius: 6px;
  font-weight: 700;
}
.jawlah-player-name {
  font-size: 0.85rem;
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Ensure chat panel for live chat shows messages correctly */
.jawlah-chat-messages {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}


/* ─────────── SOURCE: css/games-layout-fix-2026-04-17.css ─────────── */
/* ================================================================
   GAMES LAYOUT FIX - 2026-04-17
   Eliminates the huge empty gutters in game pages.
   Loaded LAST so it overrides everything else.
   ================================================================ */

/* ----------------------------------------------------------------
   1)  Let the center fill ALL available horizontal space.
       Previously games-fixes-2026-04-17.css kept max-width:1400px
       but many games only used max-w-md / max-w-xl / max-w-3xl
       inside, which centered the content and created huge empty
       grey bars on the sides.
   ---------------------------------------------------------------- */
.jawlah-game-center {
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;   /* was center → caused empty gutters */
  justify-content: flex-start !important;
}

.jawlah-game-container,
#game-container {
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Any internal Tailwind max-w-* cap is relaxed inside the 3-column
   layout, because the center column is already sized properly. */
#game-container .max-w-md,
#game-container .max-w-lg,
#game-container .max-w-xl,
#game-container .max-w-2xl,
#game-container .max-w-3xl,
#game-container .max-w-4xl,
#game-container .max-w-5xl,
#game-container .max-w-6xl,
#game-container .max-w-7xl,
.jawlah-game-container .max-w-md,
.jawlah-game-container .max-w-lg,
.jawlah-game-container .max-w-xl,
.jawlah-game-container .max-w-2xl,
.jawlah-game-container .max-w-3xl,
.jawlah-game-container .max-w-4xl,
.jawlah-game-container .max-w-5xl,
.jawlah-game-container .max-w-6xl,
.jawlah-game-container .max-w-7xl {
  max-width: 100% !important;
  width: 100% !important;
}

/* Glass cards inside games: fill width and breathe */
#game-container .glass-card,
#game-container .glass-card-strong,
.jawlah-game-container .glass-card,
.jawlah-game-container .glass-card-strong {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 14px 0 !important;
  box-sizing: border-box !important;
}

/* ----------------------------------------------------------------
   2)  Games that have their OWN internal "3-column" grid
       (qa-game, trivia, etc. use grid-cols-1 lg:grid-cols-3
        to emulate a chat sidebar).  With Jawlah sidebars that
       is redundant and wastes ~30% horizontal space.  Flatten
       them to a single column inside the Jawlah layout — the
       jawlah sidebars already show chat answers.
   ---------------------------------------------------------------- */
.jawlah-game-container .grid.lg\:grid-cols-3,
#game-container .grid.lg\:grid-cols-3 {
  grid-template-columns: 1fr !important;
}
.jawlah-game-container .lg\:col-span-2,
#game-container .lg\:col-span-2 {
  grid-column: auto !important;
}

/* RE-ENABLED 2026-04-17: Show per-game chat-answers panel again.
   Users reported they couldn't see live answers inside the game page
   (they only showed in the jawlah sidebar which is narrow).
   Now we keep BOTH: the jawlah sidebar (compact) + the main panel
   that appears under the question (wide, easy to read on stream). */
.jawlah-game-container #qa-chat-answers,
.jawlah-game-container #trivia-chat-answers,
.jawlah-game-container #eftekasaat-chat-answers,
.jawlah-game-container #country-chat-answers,
.jawlah-game-container #similar-chat-answers,
.jawlah-game-container #flags-chat-answers,
.jawlah-game-container #capitals-chat-answers,
.jawlah-game-container #brand-chat-answers,
#game-container #qa-chat-answers,
#game-container #trivia-chat-answers,
#game-container #eftekasaat-chat-answers,
#game-container #country-chat-answers,
#game-container #similar-chat-answers,
#game-container #flags-chat-answers,
#game-container #capitals-chat-answers,
#game-container #brand-chat-answers {
  display: block !important;
  margin-top: 16px !important;
  width: 100% !important;
}
/* Make sure the chat-answers panel is nicely spaced and visible */
.jawlah-game-container .chat-answers-panel-v7,
#game-container .chat-answers-panel-v7 {
  margin-top: 14px !important;
  max-height: 420px !important;
  overflow: hidden !important;
}
.jawlah-game-container .chat-answers-body-v7,
#game-container .chat-answers-body-v7 {
  max-height: 340px !important;
  overflow-y: auto !important;
}

/* ----------------------------------------------------------------
   3)  Small empty-state polishing: chat/log/players look better
       when empty (instead of giant centred text).
   ---------------------------------------------------------------- */
.jawlah-empty-state {
  padding: 22px 14px !important;
  color: rgba(255,255,255,0.45) !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}
.jawlah-empty-state i {
  font-size: 1.8rem !important;
  color: rgba(232,183,48,0.35) !important;
}
.jawlah-empty-hint {
  font-size: 0.72rem !important;
  color: rgba(255,255,255,0.32) !important;
}

/* ----------------------------------------------------------------
   4)  Live chat / system-log message styles
       (kept tight so the panel fits a lot of messages)
   ---------------------------------------------------------------- */
.jawlah-chat-msg,
.jawlah-log-msg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 2px 4px;
  border-radius: 8px;
  font-size: 0.82rem;
  line-height: 1.25;
  animation: jawlahSlideIn 0.25s ease-out;
}
.jawlah-chat-msg:hover,
.jawlah-log-msg:hover {
  background: rgba(255,255,255,0.03);
}
.jawlah-chat-msg.correct { background: rgba(16,185,129,0.08); border-left: 2px solid #10B981; }
.jawlah-chat-msg.wrong   { background: rgba(239,68,68,0.06);  border-left: 2px solid #EF4444; }

.jawlah-chat-avatar,
.jawlah-chat-avatar-fallback {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.72rem;
  color: #fff;
}
.jawlah-chat-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.jawlah-chat-name {
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jawlah-chat-text {
  color: rgba(255,255,255,0.78);
  font-size: 0.82rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jawlah-log-msg { font-family: 'Menlo','Consolas',monospace; font-size: 0.76rem; }
.jawlah-log-msg i { font-size: 0.8rem; flex-shrink: 0; }
.jawlah-log-info    i { color: #60A5FA; }
.jawlah-log-success i { color: #10B981; }
.jawlah-log-warning i { color: #F59E0B; }
.jawlah-log-error   i { color: #EF4444; }
.jawlah-log-msg span { flex: 1; min-width: 0; color: rgba(255,255,255,0.8); }
.jawlah-log-time {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.35);
  flex-shrink: 0;
}

/* Players list polish */
.jawlah-player-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 2px 4px;
  border-radius: 8px;
  background: rgba(255,255,255,0.02);
  font-size: 0.82rem;
  animation: jawlahSlideIn 0.25s ease-out;
}
.jawlah-player-item:hover { background: rgba(255,255,255,0.05); }
.jawlah-player-rank {
  width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 50%;
  background: rgba(232,183,48,0.12);
  color: var(--gold);
  font-weight: 800;
  font-size: 0.72rem;
  display: flex; align-items: center; justify-content: center;
}
.jawlah-player-avatar,
.jawlah-player-avatar-fallback {
  width: 26px; height: 26px;
  border-radius: 50%;
  object-fit: cover;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  color: #fff;
  font-size: 0.72rem;
  flex-shrink: 0;
}
.jawlah-player-name {
  flex: 1;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jawlah-player-score {
  font-weight: 800;
  color: var(--gold);
  background: rgba(232,183,48,0.08);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.74rem;
  flex-shrink: 0;
}

@keyframes jawlahSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Dynamic platform icon wrapper */
.user-platform-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 4px;
  font-size: inherit;
  vertical-align: middle;
}

/* Scrollbars inside sidebars: thin & themed */
.jawlah-chat-messages::-webkit-scrollbar,
.jawlah-log-messages::-webkit-scrollbar,
.jawlah-players-list::-webkit-scrollbar,
.jawlah-tab-content::-webkit-scrollbar { width: 6px; }
.jawlah-chat-messages::-webkit-scrollbar-track,
.jawlah-log-messages::-webkit-scrollbar-track,
.jawlah-players-list::-webkit-scrollbar-track,
.jawlah-tab-content::-webkit-scrollbar-track { background: transparent; }
.jawlah-chat-messages::-webkit-scrollbar-thumb,
.jawlah-log-messages::-webkit-scrollbar-thumb,
.jawlah-players-list::-webkit-scrollbar-thumb,
.jawlah-tab-content::-webkit-scrollbar-thumb {
  background: rgba(232,183,48,0.18);
  border-radius: 3px;
}
.jawlah-chat-messages::-webkit-scrollbar-thumb:hover,
.jawlah-log-messages::-webkit-scrollbar-thumb:hover,
.jawlah-players-list::-webkit-scrollbar-thumb:hover,
.jawlah-tab-content::-webkit-scrollbar-thumb:hover {
  background: rgba(232,183,48,0.35);
}

/* ----------------------------------------------------------------
   5)  On very small laptops / tablets, hide LEFT sidebar first
       (chat is replicated elsewhere) and keep RIGHT for settings.
   ---------------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1100px) {
  .jawlah-sidebar-left { width: 260px !important; min-width: 260px !important; }
  .jawlah-sidebar-right { width: 280px !important; min-width: 280px !important; }
}

/* Mobile: stack everything; let game take full width */
@media (max-width: 768px) {
  .jawlah-game-center {
    padding: 10px !important;
  }
}


/* ─────────── SOURCE: css/ux-fixes-2026-04-17.css ─────────── */
/* ================================================================
   UX FIXES 2026-04-17
   - Cursor: smaller precise ring + brighter dot so users know where
             the click actually happens.
   - Chat answers panels: re-enable inside game cards so answers
             are visible on all screen sizes (previous version hid
             them below 1100px because the left jawlah sidebar was
             hidden too → nothing was shown at all).
   - Live chat avatars: guarantee visibility + fallback sizing.
   - Auth modal open: lighten heavy effects while modal is open.
   Loaded LAST so it overrides previous CSS.
   ================================================================ */

/* ----------------------------------------------------------------
   1) CURSOR — precise click target
   The previous cursor had a 32px ring with the clickable point
   roughly at its centre BUT the ring animated to 48-50px on hover
   so users were never sure where the real pointer was.
   We:
     - shrink the ring to 22px (was 32px)
     - shrink the hover size to 32px (was 50px)  → +10px only
     - enlarge the center dot to 8px (was 6px) and brighten it
     - reduce the trail so it isn't mistaken for the cursor
   ---------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  #cursor-main {
    width: 22px !important;
    height: 22px !important;
    border-width: 1.5px !important;
    /* softer glow — the old 36px shadow was visually louder than
       the ring itself and confused the target point */
    box-shadow:
      0 0 10px rgba(232, 183, 48, 0.45),
      0 0 20px rgba(232, 183, 48, 0.15) !important;
  }
  #cursor-dot {
    width: 8px !important;
    height: 8px !important;
    /* brighter centre dot = the real click target */
    box-shadow:
      0 0 10px rgba(232, 183, 48, 1),
      0 0 18px rgba(232, 183, 48, 0.7) !important;
  }
  #cursor-trail {
    width: 34px !important;
    height: 34px !important;
    opacity: 0.55 !important;
    /* mix-blend-mode:screen was causing some text to invert under
       the trail on certain panels. Switch to normal blend. */
    mix-blend-mode: normal !important;
  }
}

/* While an auth modal / any modal is open we hide the trail and
   particles so the form is easier to target (was the reason for
   "لما اضغط دخول الصفحة بتبقى بطيئة") */
body.modal-open #cursor-trail,
body.modal-open .cursor-particle,
body.modal-open .cursor-star {
  display: none !important;
}

/* ----------------------------------------------------------------
   2) CHAT ANSWERS PANELS — unhide inside game cards
   games-layout-fix-2026-04-17.css hid these panels to avoid
   duplication with the jawlah left sidebar. But the jawlah left
   sidebar is hidden below 1100px → nothing was visible.
   We invert the rule: show panels again inside .jawlah-game-container
   on all sizes, but hide them only on very wide screens where the
   left sidebar IS visible.
   ---------------------------------------------------------------- */
.jawlah-game-container #qa-chat-answers,
.jawlah-game-container #trivia-chat-answers,
.jawlah-game-container #eftekasaat-chat-answers,
.jawlah-game-container #country-chat-answers,
.jawlah-game-container #similar-chat-answers,
.jawlah-game-container #flags-chat-answers,
.jawlah-game-container #capitals-chat-answers,
.jawlah-game-container #brand-chat-answers,
#game-container #qa-chat-answers,
#game-container #trivia-chat-answers,
#game-container #eftekasaat-chat-answers,
#game-container #country-chat-answers,
#game-container #similar-chat-answers,
#game-container #flags-chat-answers,
#game-container #capitals-chat-answers,
#game-container #brand-chat-answers {
  display: block !important;   /* override the previous !important none */
  margin-top: 12px !important;
  width: 100% !important;
}

/* On very wide screens where the left jawlah sidebar IS visible,
   hide the inline panel to avoid duplication. */
@media (min-width: 1400px) {
  .jawlah-game-container #qa-chat-answers,
  .jawlah-game-container #trivia-chat-answers,
  .jawlah-game-container #eftekasaat-chat-answers,
  .jawlah-game-container #country-chat-answers,
  .jawlah-game-container #similar-chat-answers,
  .jawlah-game-container #flags-chat-answers,
  .jawlah-game-container #capitals-chat-answers,
  .jawlah-game-container #brand-chat-answers {
    display: none !important;
  }
}

/* Also re-allow the internal grid-cols-3 layout on desktop so the
   sidebar sits nicely next to the question. Only on narrow screens
   we force a single column. */
@media (min-width: 1024px) and (max-width: 1399px) {
  .jawlah-game-container .grid.lg\:grid-cols-3,
  #game-container .grid.lg\:grid-cols-3 {
    grid-template-columns: 2fr 1fr !important;
  }
  .jawlah-game-container .lg\:col-span-2,
  #game-container .lg\:col-span-2 {
    grid-column: span 1 !important;
  }
}

/* ----------------------------------------------------------------
   3) CHAT ANSWERS AVATARS — make sure they're visible everywhere
   ---------------------------------------------------------------- */
.ca-avatar-v7 {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  flex-shrink: 0 !important;
}
.ca-avatar-v7 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 50% !important;
  display: block !important;
}

/* ----------------------------------------------------------------
   4) JAWLAH LIVE CHAT AVATARS — visible and well-sized
   ---------------------------------------------------------------- */
.jawlah-chat-avatar,
.jawlah-player-avatar {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  border: 1.5px solid rgba(232, 183, 48, 0.2);
  background: rgba(255, 255, 255, 0.04);
}

.jawlah-chat-avatar-fallback,
.jawlah-player-avatar-fallback {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 800 !important;
  font-size: 0.85rem !important;
  color: #fff !important;
  flex-shrink: 0 !important;
}

.jawlah-chat-msg {
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  margin-bottom: 4px !important;
}
.jawlah-chat-msg:hover {
  background: rgba(255, 255, 255, 0.02);
}
.jawlah-chat-msg.correct { background: rgba(16,185,129,0.08) !important; border-right: 2px solid #10B981; }
.jawlah-chat-msg.wrong   { background: rgba(239,68,68,0.06) !important; border-right: 2px solid #EF4444; }

.jawlah-chat-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jawlah-chat-name {
  font-weight: 700;
  font-size: 0.78rem;
  line-height: 1.1;
}
.jawlah-chat-text {
  font-size: 0.82rem;
  color: #d1d5db;
  word-break: break-word;
}

/* ----------------------------------------------------------------
   5) AUTH MODAL — snappier open
   While the modal is open we lighten the background animations so
   the form renders without jank.
   ---------------------------------------------------------------- */
body.modal-open #bg-animation,
body.modal-open #ramadan-decorations,
body.modal-open #global-mosque,
body.modal-open .loading-orbit-particle {
  animation: none !important;
  opacity: 0.15 !important;
}

/* Make sure the modal pops in instantly, no transforms on entrance */
#auth-modal {
  will-change: opacity;
}
#auth-modal.flex {
  animation: authModalFade 0.15s ease-out;
}
@keyframes authModalFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Prevent body scroll while modal open (avoids layout thrash) */
body.modal-open {
  overflow: hidden;
}


/* ─────────── SOURCE: css/auth-modal-perf-fix.css ─────────── */
/* ================================================================
   AUTH MODAL PERFORMANCE FIX 2026-04-17 (Hang on login click)
   Goals:
     1) Remove heavy backdrop-filter blur from #auth-modal background.
        backdrop-filter + many animated children = compositor stalls
        on mid-range laptops (the exact symptom: 'الموقع يعلق').
     2) Hide all background animated particles while modal is open.
     3) Promote modal to its own compositing layer for instant paint.
     4) Disable heavy outer shadows / animations on the modal card.
   Loaded LAST so it overrides previous css.
   ================================================================ */
#auth-modal {
  /* Drop the blur entirely — it's the #1 perf killer when hundreds
     of twinkling children are behind it. A solid darker background
     reads just as well. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: rgba(8, 4, 24, 0.88) !important;
  /* Own layer = avoid re-paint of the whole page behind us. */
  will-change: opacity;
  contain: layout paint style;
}

/* While modal open, nuke everything that paints continuously. */
body.modal-open #bg-animation,
body.modal-open #ramadan-decorations,
body.modal-open #global-mosque,
body.modal-open .loading-orbit-particle,
body.modal-open .ramadan-particle,
body.modal-open .falling-star,
body.modal-open .ramadan-lantern,
body.modal-open .cursor-particle,
body.modal-open .cursor-star {
  animation-play-state: paused !important;
  visibility: hidden !important;
}

/* Keep the golden ring + dot but hide the soft trail while modal
   is open so user input feels snappier and target is obvious. */
body.modal-open #cursor-trail {
  display: none !important;
}

/* Lighten the scale-in animation — 0.3s is too slow with so many
   siblings repainting. Reduce to a fast opacity-only fade. */
#auth-modal .glass-card-strong.animate-scale-in {
  animation: authCardFadeIn 0.15s ease-out !important;
  will-change: opacity;
  /* Ensure no expensive shadows animate */
  transition: none !important;
}
@keyframes authCardFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hard stop: while body has .modal-open class, no child of
   bg-animation or ramadan-decorations can spawn new DOM nodes —
   but just in case they do, keep them invisible. */
body.modal-open #bg-animation *,
body.modal-open #ramadan-decorations *,
body.modal-open #global-mosque * {
  animation: none !important;
  transition: none !important;
  visibility: hidden !important;
}


/* ─────────── SOURCE: css/fixes-2026-04-17-v2.css ─────────── */
/* =================================================================
   COMPREHENSIVE FIXES V2 — 2026-04-17
   - Jawlah settings toggle layout (right-side "Accept guesses")
   - How-to-play modal styling
   - Join-by-code UX
   - Drawing game professional UI
   - Sticky button polish across games
   LOADED LAST — overrides everything.
   ================================================================= */

/* ---------------------------------------------------------------
   1) JAWLAH SETTINGS — "Accept guesses" toggle row layout
   The old CSS had the toggle overflowing its row because the
   toggle-label took flex:1 AND the parent .jawlah-setting-item
   had no alignment constraints. We rewrite the row completely
   so the switch is ALWAYS on the right side, nicely aligned,
   never overflowing, with proper spacing.
   --------------------------------------------------------------- */
.jawlah-setting-item .jawlah-toggle-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
  padding: 10px 0 !important;
  background: rgba(232, 183, 48, 0.03);
  border: 1px solid rgba(232, 183, 48, 0.08);
  border-radius: 10px;
  padding: 10px 14px !important;
  margin-top: 4px;
}
.jawlah-setting-item .jawlah-toggle-row .jawlah-toggle-label {
  flex: 1 1 auto !important;
  font-size: 0.82rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  /* Keep text on one line on wide, wrap nicely on narrow */
  white-space: normal !important;
}
.jawlah-setting-item .jawlah-toggle-row .jawlah-toggle {
  flex: 0 0 auto !important;
  position: relative !important;
  display: inline-block !important;
  width: 46px !important;
  height: 26px !important;
  cursor: pointer !important;
  margin: 0 !important;
}
.jawlah-setting-item .jawlah-toggle-row .jawlah-toggle input {
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  position: absolute !important;
}
.jawlah-setting-item .jawlah-toggle-row .jawlah-toggle-slider {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: 26px !important;
  transition: background 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  overflow: hidden !important; /* knob ne'er escapes the track */
}
/*
 * RTL-safe knob positioning:
 * Use logical property inset-inline-start so the knob always starts
 * from the "start" edge (left in LTR, right in RTL). The translation
 * on checked always moves it toward the "end" edge via a POSITIVE
 * translateX combined with a CSS var that flips sign per direction.
 */
.jawlah-setting-item .jawlah-toggle-row .jawlah-toggle-slider::before {
  content: '' !important;
  position: absolute !important;
  height: 20px !important;
  width: 20px !important;
  inset-inline-start: 2px !important;
  top: 2px !important;
  background: white !important;
  border-radius: 50% !important;
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  transform: translateX(0) !important;
  will-change: transform;
}
.jawlah-setting-item .jawlah-toggle-row .jawlah-toggle input:checked + .jawlah-toggle-slider {
  background: linear-gradient(135deg, #E8B730, #F5D261) !important;
  border-color: rgba(232, 183, 48, 0.5) !important;
}
/* LTR: move knob 20px to the right */
.jawlah-setting-item .jawlah-toggle-row .jawlah-toggle input:checked + .jawlah-toggle-slider::before {
  transform: translateX(20px) !important;
}
/* RTL: move knob 20px to the LEFT (because start edge is now on the right) */
html[dir="rtl"] .jawlah-setting-item .jawlah-toggle-row .jawlah-toggle input:checked + .jawlah-toggle-slider::before {
  transform: translateX(-20px) !important;
}

/* Also keep the radio group (join method) aligned cleanly */
.jawlah-setting-item .jawlah-radio-group {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 8px !important;
  margin-top: 4px !important;
}
.jawlah-setting-item .jawlah-radio {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  font-size: 0.82rem !important;
  justify-content: center !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.8) !important;
  min-height: 42px;
}
.jawlah-setting-item .jawlah-radio.active,
.jawlah-setting-item .jawlah-radio:has(input:checked) {
  background: rgba(232, 183, 48, 0.1) !important;
  border-color: rgba(232, 183, 48, 0.4) !important;
  color: #E8B730 !important;
  font-weight: 600 !important;
}
.jawlah-setting-item .jawlah-radio input {
  display: none !important;
}

/* ---------------------------------------------------------------
   1b) AVATAR SIMPLIFICATION — real photo only, no letter bubble
   Per user request: show the user's actual avatar (or a default
   silhouette). Hide the old letter-initial fallback everywhere it
   may still be injected by legacy code.
   --------------------------------------------------------------- */
.jawlah-chat-avatar-fallback,
.jawlah-player-avatar-fallback {
  display: none !important;
}

/* ---------------------------------------------------------------
   2) HOW-TO-PLAY MODAL
   --------------------------------------------------------------- */
/* While the how-to-play modal is open: freeze scroll and tame the
   animated background to stop long paint work from blocking interaction. */
body.htp-open {
  overflow: hidden !important;
  touch-action: none !important;
}
body.htp-open .jawlah-chat-msg,
body.htp-open .gc-card {
  animation: none !important;
}

.htp-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* Slightly darker solid bg instead of costly backdrop-filter.
     blur(10px) over a full-viewport animated site was the #1 cause of
     UI freezes when the how-to-play modal opened. */
  background: rgba(3, 3, 12, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: htp-fade-in 0.18s ease-out;
  /* Promote to its own layer so paint cost is isolated */
  contain: layout style paint;
  will-change: opacity;
}
.htp-overlay.closing {
  animation: htp-fade-out 0.15s ease-out forwards;
}
@keyframes htp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes htp-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}
.htp-modal {
  position: relative;
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 40px);
  background: linear-gradient(145deg, #14142a, #0f0f1a);
  border: 1px solid rgba(232, 183, 48, 0.25);
  border-radius: 18px;
  /* Reduced shadow layers — the glowing 80px spread shadow was
     extremely expensive while the pop-in animation ran. */
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: htp-pop-in 0.22s ease-out;
  contain: layout style;
}
@keyframes htp-pop-in {
  from { transform: scale(0.96) translateY(8px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);   opacity: 1; }
}
.htp-header {
  padding: 22px 24px 18px;
  border-bottom: 1px solid rgba(232, 183, 48, 0.15);
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, rgba(232, 183, 48, 0.08), transparent);
}
.htp-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #E8B730, #F5D261);
  color: #1a1a2e;
  font-size: 22px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(232, 183, 48, 0.3);
}
.htp-title-wrap { flex: 1; }
.htp-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.htp-subtitle {
  font-size: 0.82rem;
  color: rgba(232, 183, 48, 0.85);
  margin-top: 2px;
  font-weight: 500;
}
.htp-close {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 15px;
}
html[dir="rtl"] .htp-close { left: auto; right: 14px; }
.htp-close:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.4);
  color: #EF4444;
}
.htp-body {
  padding: 22px 24px;
  overflow-y: auto;
  flex: 1;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
  line-height: 1.7;
}
.htp-body::-webkit-scrollbar { width: 6px; }
.htp-body::-webkit-scrollbar-thumb { background: rgba(232, 183, 48, 0.2); border-radius: 3px; }
.htp-section { margin-bottom: 18px; }
.htp-section:last-child { margin-bottom: 0; }
.htp-section-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: #E8B730;
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.htp-section-title i {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: rgba(232, 183, 48, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
}
.htp-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.htp-list li {
  padding: 6px 0 6px 22px;
  position: relative;
  color: rgba(255, 255, 255, 0.85);
}
html[dir="rtl"] .htp-list li { padding: 6px 22px 6px 0; }
.htp-list li::before {
  content: '▸';
  position: absolute;
  left: 4px;
  top: 6px;
  color: #E8B730;
  font-size: 0.9em;
}
html[dir="rtl"] .htp-list li::before { left: auto; right: 4px; }
.htp-chat-example {
  background: rgba(145, 70, 255, 0.08);
  border: 1px solid rgba(145, 70, 255, 0.2);
  border-radius: 12px;
  padding: 12px 14px;
  margin: 10px 0;
  font-family: 'Courier New', monospace;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.95);
}
.htp-chat-example .htp-chat-user {
  color: #A78BFA;
  font-weight: 700;
}
.htp-chat-example .htp-chat-msg {
  color: #53FC18;
  font-weight: 600;
  margin-inline-start: 6px;
}
.htp-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.2);
}
.htp-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.85rem;
  user-select: none;
}
.htp-checkbox input {
  width: 18px;
  height: 18px;
  accent-color: #E8B730;
  cursor: pointer;
}
.htp-btn-got-it {
  background: linear-gradient(135deg, #E8B730, #F5D261);
  color: #1a1a2e;
  border: none;
  padding: 10px 24px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  box-shadow: 0 4px 12px rgba(232, 183, 48, 0.35);
}
.htp-btn-got-it:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 183, 48, 0.5);
}
.htp-btn-got-it:active { transform: translateY(0); }

/* Small floating help button on game pages to reopen tutorial */
.htp-help-fab {
  position: fixed;
  bottom: 22px;
  left: 22px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #E8B730, #F5D261);
  color: #1a1a2e;
  border: none;
  box-shadow:
    0 6px 16px rgba(232, 183, 48, 0.4),
    0 0 0 1px rgba(232, 183, 48, 0.2);
  display: none;  /* shown only when help tip exists for current game */
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  z-index: 500;
  transition: all 0.25s;
  font-weight: 800;
}
html[dir="rtl"] .htp-help-fab { left: auto; right: 22px; }
.htp-help-fab:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 20px rgba(232, 183, 48, 0.55);
}
.htp-help-fab.visible { display: inline-flex; }
@media (max-width: 768px) {
  .htp-help-fab { bottom: 72px; width: 40px; height: 40px; font-size: 16px; }
}

/* ---------------------------------------------------------------
   3) JOIN-BY-CODE — clearer visual when "code only" mode is on.
   When user selects "Code only" the room join area should be
   highlighted and the "Create room" button dimmed since joining
   is the expected action.
   --------------------------------------------------------------- */
.jawlah-rooms-join.code-required {
  outline: 2px dashed rgba(232, 183, 48, 0.5);
  outline-offset: 4px;
  border-radius: 12px;
  animation: code-req-pulse 2.4s ease-in-out infinite;
}
@keyframes code-req-pulse {
  0%, 100% { outline-color: rgba(232, 183, 48, 0.45); }
  50% { outline-color: rgba(232, 183, 48, 0.9); }
}
.jawlah-rooms-card.code-required-mode .jawlah-btn-primary {
  opacity: 0.45;
  filter: grayscale(0.3);
}
.jawlah-rooms-card.code-required-mode .jawlah-btn-primary::after {
  content: attr(data-code-hint);
  display: block;
  font-size: 0.7rem;
  font-weight: 500;
  opacity: 0.8;
  margin-top: 2px;
}
.join-by-code-hint {
  background: linear-gradient(135deg, rgba(232, 183, 48, 0.1), rgba(232, 183, 48, 0.04));
  border: 1px solid rgba(232, 183, 48, 0.25);
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 10px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  gap: 10px;
}
.join-by-code-hint i {
  color: #E8B730;
  font-size: 16px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------
   4) DRAWING GAME — professional layout & UX
   --------------------------------------------------------------- */
.draw-v2-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}
@media (max-width: 1100px) {
  .draw-v2-wrap { grid-template-columns: 1fr; }
}
.draw-v2-main {
  background: linear-gradient(180deg, rgba(14, 14, 28, 0.72), rgba(10, 10, 20, 0.55));
  border: 1px solid rgba(232, 183, 48, 0.22);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.draw-v2-header {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: linear-gradient(180deg, rgba(232, 183, 48, 0.08), transparent);
}
.draw-v2-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: #E8B730;
  font-size: 1.08rem;
}
.draw-v2-title i {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: rgba(232, 183, 48, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
}
.draw-v2-timer {
  background: rgba(232, 183, 48, 0.12);
  color: #E8B730;
  border: 1px solid rgba(232, 183, 48, 0.3);
  padding: 6px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.draw-v2-timer.critical {
  color: #fff;
  background: linear-gradient(135deg, #EF4444, #F97316);
  border-color: rgba(239, 68, 68, 0.6);
  animation: draw-pulse 0.6s ease-in-out infinite alternate;
}
@keyframes draw-pulse {
  from { transform: scale(1); }
  to { transform: scale(1.05); box-shadow: 0 0 14px rgba(239, 68, 68, 0.5); }
}
.draw-v2-wordbar {
  padding: 14px 20px;
  background: linear-gradient(135deg, rgba(232, 183, 48, 0.08), rgba(232, 183, 48, 0.02));
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.draw-v2-wordbar .draw-v2-word-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.draw-v2-wordbar .draw-v2-word-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 600;
}
.draw-v2-wordbar .draw-v2-word-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.draw-v2-wordbar .draw-v2-word {
  position: relative;
  font-size: 1.75rem;
  font-weight: 900;
  color: #F5D261;
  letter-spacing: 1px;
  text-shadow: 0 2px 10px rgba(232, 183, 48, 0.28);
  padding: 2px 10px;
  border-radius: 8px;
  background: rgba(232, 183, 48, 0.06);
  border: 1px solid rgba(232, 183, 48, 0.2);
  min-width: 80px;
  line-height: 1.2;
  transition: background 0.2s, border-color 0.2s;
}
.draw-v2-wordbar .draw-v2-word .draw-v2-word-text {
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.draw-v2-wordbar .draw-v2-word .draw-v2-word-mask {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  color: rgba(245, 210, 97, 0.55);
  letter-spacing: 6px;
  font-size: 1.4rem;
  pointer-events: none;
  user-select: none;
}
.draw-v2-wordbar .draw-v2-word.is-hidden {
  background: rgba(232, 183, 48, 0.12);
  border-color: rgba(232, 183, 48, 0.35);
  text-shadow: none;
}
.draw-v2-wordbar .draw-v2-word.is-hidden .draw-v2-word-text {
  filter: blur(14px) saturate(1.1);
  opacity: 0.35;
  user-select: none;
  pointer-events: none;
}
.draw-v2-wordbar .draw-v2-word.is-hidden .draw-v2-word-mask {
  display: flex;
}

/* Reveal (eye) button — only useful while word is hidden */
.draw-v2-reveal-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid rgba(232, 183, 48, 0.35);
  background: rgba(232, 183, 48, 0.08);
  color: #F5D261;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: background 0.15s, transform 0.1s;
  flex-shrink: 0;
}
.draw-v2-reveal-btn:hover {
  background: rgba(232, 183, 48, 0.18);
}
.draw-v2-reveal-btn:active { transform: scale(0.94); }

/* Stream-safe persistent toggle */
.draw-v2-hidetoggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  font-size: 0.78rem;
  font-weight: 600;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  flex-shrink: 0;
}
.draw-v2-hidetoggle i { font-size: 13px; }
.draw-v2-hidetoggle:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.draw-v2-hidetoggle.is-on {
  background: rgba(147, 51, 234, 0.12);
  border-color: rgba(147, 51, 234, 0.45);
  color: #C084FC;
}
.draw-v2-hidetoggle.is-on i::before { content: "\f06e"; /* eye-slash-ish accent */ }

.draw-v2-wordbar .draw-v2-hint {
  margin-inline-start: auto;
  font-family: 'Courier New', monospace;
  letter-spacing: 6px;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.draw-v2-canvas-wrap {
  position: relative;
  background:
    linear-gradient(#ffffff, #fbfbfc);
  aspect-ratio: 16/10;
  max-height: 560px;
  overflow: hidden;
  /* Subtle inner frame so the white canvas doesn't look naked */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}
.draw-v2-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  display: block;
  /* Prevent any CSS-caused lag */
  will-change: auto;
}
.draw-v2-canvas-wrap.tool-eraser canvas {
  cursor: cell;
}
.draw-v2-canvas-wrap.tool-fill canvas {
  cursor: copy;
}
.draw-v2-toolbar {
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(10, 10, 20, 0.55), rgba(6, 6, 14, 0.8));
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.draw-v2-tools-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.draw-v2-colors {
  display: flex;
  gap: 5px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  flex-wrap: wrap;
}
.draw-v2-color {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.18);
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
  padding: 0;
  outline: none;
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.draw-v2-color:hover { transform: scale(1.12); }
.draw-v2-color.active {
  transform: scale(1.18);
  border-color: #fff;
  box-shadow: 0 0 0 2px rgba(232, 183, 48, 0.7), 0 2px 6px rgba(0, 0, 0, 0.4);
}
.draw-v2-tool-btn {
  width: 38px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: all 0.18s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 0;
}
.draw-v2-tool-btn:hover {
  background: rgba(232, 183, 48, 0.1);
  border-color: rgba(232, 183, 48, 0.3);
  color: #E8B730;
}
.draw-v2-tool-btn.active {
  background: rgba(232, 183, 48, 0.15);
  border-color: rgba(232, 183, 48, 0.5);
  color: #E8B730;
  box-shadow: inset 0 0 0 1px rgba(232, 183, 48, 0.3);
}
.draw-v2-size {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.draw-v2-size input[type="range"] {
  width: 80px;
  accent-color: #E8B730;
  cursor: pointer;
}
.draw-v2-size-preview {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.draw-v2-size-preview::before {
  content: '';
  display: block;
  width: var(--dot-size, 8px);
  height: var(--dot-size, 8px);
  background: currentColor;
  border-radius: 50%;
  transition: width 0.15s, height 0.15s;
}
.draw-v2-action-btn {
  padding: 7px 14px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: #EF4444;
  font-weight: 600;
  font-size: 0.82rem;
  cursor: pointer;
  transition: all 0.18s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.draw-v2-action-btn:hover {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.5);
}
.draw-v2-action-btn.primary {
  color: #E8B730;
  background: rgba(232, 183, 48, 0.08);
  border-color: rgba(232, 183, 48, 0.3);
}
.draw-v2-action-btn.primary:hover {
  background: rgba(232, 183, 48, 0.18);
}

/* Right sidebar for chat guesses / status */
.draw-v2-side {
  background: linear-gradient(180deg, rgba(14, 14, 28, 0.72), rgba(10, 10, 20, 0.55));
  border: 1px solid rgba(232, 183, 48, 0.18);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 660px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.draw-v2-side-header {
  padding: 14px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-weight: 700;
  color: #E8B730;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  background: linear-gradient(180deg, rgba(232, 183, 48, 0.06), transparent);
}
.draw-v2-side-header i {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(145, 70, 255, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.draw-v2-side-list {
  padding: 8px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.draw-v2-guess-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  animation: draw-guess-in 0.3s ease-out;
}
@keyframes draw-guess-in {
  from { transform: translateX(-10px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.draw-v2-guess-item.correct {
  background: linear-gradient(135deg, rgba(52, 211, 153, 0.15), rgba(52, 211, 153, 0.05));
  border-color: rgba(52, 211, 153, 0.4);
  color: #34D399;
  font-weight: 700;
}
.draw-v2-guess-item.close {
  background: rgba(251, 191, 36, 0.08);
  border-color: rgba(251, 191, 36, 0.2);
  color: #FCD34D;
}
.draw-v2-guess-user {
  font-weight: 700;
  color: inherit;
}
.draw-v2-guess-text {
  color: rgba(255, 255, 255, 0.7);
  word-break: break-word;
  flex: 1;
}
.draw-v2-guess-item.correct .draw-v2-guess-text { color: inherit; }
.draw-v2-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.82rem;
  padding: 24px 12px;
}

/* Result overlay for drawing game (professional) */
.draw-v2-result {
  padding: 48px 28px;
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(232, 183, 48, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(232, 183, 48, 0.04), transparent);
}
.draw-v2-result-icon {
  font-size: 4.5rem;
  margin-bottom: 14px;
  animation: drawResultBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes drawResultBounce {
  from { transform: scale(0.4) rotate(-8deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}
.draw-v2-result-title {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.draw-v2-result-title.win { color: #34D399; text-shadow: 0 4px 16px rgba(52, 211, 153, 0.35); }
.draw-v2-result-title.lose { color: #EF4444; text-shadow: 0 4px 16px rgba(239, 68, 68, 0.35); }
.draw-v2-result-word {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 20px;
}
.draw-v2-result-word strong {
  color: #F5D261;
  font-weight: 900;
  font-size: 1.4rem;
  padding: 2px 12px;
  background: rgba(232, 183, 48, 0.12);
  border-radius: 8px;
  margin-inline-start: 4px;
}

/* =================================================================
   5) BUTTON AUDIT FIXES — make sure no game button overflows or
   has clipped design.
   ================================================================= */
.jawlah-settings-list > .jawlah-setting-item {
  padding: 10px 14px !important;
}
.jawlah-settings-list > .jawlah-setting-item + .jawlah-setting-item {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.jawlah-settings-list .jawlah-slider-row {
  background: rgba(255, 255, 255, 0.02);
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 4px;
}
.jawlah-settings-list .jawlah-slider-val {
  min-width: 40px !important;
  background: linear-gradient(135deg, #E8B730, #F5D261) !important;
  color: #1a1a2e !important;
  font-weight: 800 !important;
}

/* Better difficulty cards layout */
.jawlah-settings-list .jawlah-difficulty-cards {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 6px !important;
  margin-top: 4px !important;
}
.jawlah-settings-list .jawlah-diff-card {
  min-height: 62px !important;
  padding: 10px 8px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  gap: 2px !important;
}
.jawlah-settings-list .jawlah-diff-card .jawlah-diff-icon {
  margin-bottom: 2px;
  color: #E8B730;
}

/* ==================================================================
   6) SETTINGS HELPERS — "Accept guesses" tooltip label fix
   The label "استقبال تخمين لسؤال التالي" was overflowing because
   parent had no min-width. Now it wraps gracefully, and we also
   shorten it via JS patch if needed.
   ================================================================== */
.jawlah-setting-item > label:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-weight: 600 !important;
}
.jawlah-setting-item > label:first-child::before {
  content: '•';
  color: #E8B730;
  font-size: 14px;
}


/* ─────────── SOURCE: css/draw-guess-bigger-2026-04-18.css ─────────── */
/* ==================================================================
   DRAW & GUESS — LARGER LAYOUT FIX (2026-04-18)
   --------------------------------------------------------------------
   المشكلة:  لعبة الرسم صغيرة جدا بالنسبة لحجم الصفحة ومساحتها
             + فيه لوحة "تخمينات الشات" مكررة داخل اللعبة رغم أن
             الـ jawlah-sidebar-left (شات مباشر) بتاع الصفحة كلها
             بالفعل بيعرض التخمينات.
   الحل:   -  توسيع .draw-v2-wrap للعرض الكامل للمنطقة الوسطى
           -  تكبير الكانفاس عن طريق إزالة max-height والـ aspect-ratio
              (نستخدم height: min(70vh, 720px)) — لا يزال متوازن
              على شاشات صغيرة
           -  إخفاء .draw-v2-side (اللوحة المضاعفة) على جميع الشاشات
              لأنها تكرار لـ jawlah-sidebar-left
           -  تحسين الـ toolbar ليكون أكثر انضباطا
   نُحمّل بعد fixes-2026-04-17-v2.css حتى تفوز قواعدنا في التتالي.
   ================================================================== */

/* 1) توسيع الحاوية — عمود واحد يأخذ كامل المساحة المتاحة
   (الـ jawlah-game-center بالفعل محدود بـ grid الصفحة، فنأخذ
   كل عرضها). */
.draw-v2-wrap {
  max-width: 100% !important;     /* كان 1200px */
  width: 100% !important;
  grid-template-columns: 1fr !important;  /* عمود واحد — إزالة عمود 300px */
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 2) إخفاء اللوحة المضاعفة داخل اللعبة (نعتمد على jawlah-sidebar-left) */
.draw-v2-side {
  display: none !important;
}

/* 3) ضبط حاوية الكانفاس لأقصى استغلال للمساحة العمودية */
.draw-v2-canvas-wrap {
  /* نلغي aspect-ratio لأنه كان يحد الارتفاع على شاشات عريضة
     ونعتمد على height ديناميكي بدلاً منه */
  aspect-ratio: auto !important;
  height: min(70vh, 780px) !important;     /* كان max-height: 560px */
  max-height: min(70vh, 780px) !important;
  min-height: 380px !important;
  width: 100% !important;
  background: #ffffff !important;
  border-radius: 0 !important;
}

/* 4) تكبير حجم الـ .draw-v2-main حتى تمتد أفقياً لكامل المنطقة */
.draw-v2-main {
  width: 100% !important;
  /* إزالة border-radius الخارجي لأن الحاوية جوّا sidebar
     بالفعل لها شكل منضبط */
}

/* 5) تحسين الـ header (ترتيب أفضل على الشاشات الواسعة) */
.draw-v2-header {
  padding: 12px 18px !important;
  gap: 12px !important;
}
.draw-v2-wordbar {
  padding: 12px 18px !important;
  gap: 12px !important;
  align-items: center !important;
}
.draw-v2-wordbar .draw-v2-word {
  font-size: 1.55rem !important;          /* من 1.75 → أخف قليلا */
}

/* 6) توسيع الـ toolbar */
.draw-v2-toolbar {
  padding: 10px 14px !important;
  gap: 10px !important;
}
.draw-v2-colors {
  flex-wrap: wrap !important;
}
.draw-v2-color {
  width: 28px !important;
  height: 28px !important;
}

/* 7) شريط متحرك عند نقص المساحة — الألعاب التانية مش هتتأثر
   لأن الـ CSS scoped على .draw-v2-wrap فقط */

/* 8) على الشاشات الصغيرة (< 900px) نرجع scope الحاوية للارتفاع
   الطبيعي بدون vh حتى لا ياكل كل الشاشة على موبايل */
@media (max-width: 900px) {
  .draw-v2-canvas-wrap {
    height: 420px !important;
    max-height: 420px !important;
    min-height: 320px !important;
  }
  .draw-v2-wordbar .draw-v2-word { font-size: 1.25rem !important; }
}
@media (max-width: 600px) {
  .draw-v2-canvas-wrap {
    height: 340px !important;
    max-height: 340px !important;
    min-height: 260px !important;
  }
}


/* ─────────── SOURCE: css/games-per-game-settings-2026-04-18.css ─────────── */
/* ============================================================
   PER-GAME SETTINGS PANEL STYLES — 2026-04-18 (v2 polished)
   Matches the jawlah-style right sidebar look.
   RTL-safe, overflow-safe, mobile-ready.
   ============================================================ */

.pgs-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}
.pgs-wrap *, .pgs-wrap *::before, .pgs-wrap *::after { box-sizing: border-box; }

.pgs-header {
  padding: 12px 14px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: linear-gradient(180deg, rgba(124,58,237,0.08), transparent);
}
.pgs-header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
}
.pgs-header-title i { color: var(--gold, #E8B730); }
.pgs-header-hint {
  margin-top: 4px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.5);
  line-height: 1.4;
}

.pgs-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  scrollbar-width: thin;
}
.pgs-body::-webkit-scrollbar { width: 6px; }
.pgs-body::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
}

.pgs-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pgs-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255,255,255,0.88);
  line-height: 1.35;
  /* Bidi-safe: isolate embedded numbers/latin */
  unicode-bidi: plaintext;
}
.pgs-hint {
  margin: 0;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.45);
  line-height: 1.4;
  unicode-bidi: plaintext;
}

/* ----- SLIDER ----- */
.pgs-slider-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* In RTL keep natural order: value-chip first, slider second. */
}
.pgs-slider {
  flex: 1 1 auto;
  min-width: 0;
  appearance: none;
  -webkit-appearance: none;
  height: 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
  outline: none;
  cursor: pointer;
  /* Keep slider direction consistent regardless of page dir */
  direction: ltr;
}
.pgs-slider::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
}
.pgs-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold, #E8B730);
  box-shadow: 0 0 0 3px rgba(232,183,48,0.18);
  cursor: pointer;
  transition: transform 0.15s;
  margin-top: -5.5px;
}
.pgs-slider::-webkit-slider-thumb:hover { transform: scale(1.15); }
.pgs-slider::-moz-range-track {
  height: 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.12);
}
.pgs-slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold, #E8B730);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 0 3px rgba(232,183,48,0.18);
}
.pgs-slider-val {
  flex: 0 0 auto;
  min-width: 42px;
  text-align: center;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--gold, #E8B730);
  background: rgba(232,183,48,0.1);
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid rgba(232,183,48,0.2);
  direction: ltr; /* show numbers left-to-right */
}

/* ----- NUMBER / TEXT ----- */
.pgs-number, .pgs-text {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.pgs-number:focus, .pgs-text:focus {
  border-color: rgba(232,183,48,0.5);
  background: rgba(255,255,255,0.06);
}

/* ----- TOGGLE (RTL-safe, overflow-safe) ----- */
.pgs-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex: 0 0 auto;
  align-self: flex-start;
}
.pgs-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.pgs-toggle-slider {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.12);
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.25s;
  overflow: hidden; /* keep the knob from escaping visually */
}
.pgs-toggle-slider::before {
  content: '';
  position: absolute;
  height: 18px;
  width: 18px;
  top: 3px;
  left: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.25s, background 0.25s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.pgs-toggle input:checked + .pgs-toggle-slider {
  background: linear-gradient(90deg, var(--gold, #E8B730), #F5D261);
}
.pgs-toggle input:checked + .pgs-toggle-slider::before {
  transform: translateX(20px);
}
/* RTL: because we force direction:ltr on the slider, behavior is identical */
.pgs-toggle-slider { direction: ltr; }

/* ----- Toggle row: label on one side, toggle on the other ----- */
.pgs-item-toggle {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.pgs-item-toggle .pgs-label { flex: 1; }

/* ----- SELECT ----- */
.pgs-select {
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  background-color: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  font-size: 0.88rem;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff' opacity='0.55'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: right 10px center;
  padding-right: 34px;
}
html[dir="rtl"] .pgs-select,
[dir="rtl"] .pgs-select {
  background-position: left 10px center;
  padding-right: 12px;
  padding-left: 34px;
}
.pgs-select:focus {
  border-color: rgba(232,183,48,0.5);
  background-color: rgba(255,255,255,0.06);
}
.pgs-select option { background: #1a1530; color: #fff; }

/* ----- RADIO ----- */
.pgs-radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pgs-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
  user-select: none;
}
.pgs-radio:hover { background: rgba(255,255,255,0.06); }
.pgs-radio.active {
  background: rgba(232,183,48,0.08);
  border-color: rgba(232,183,48,0.35);
  color: #fff;
}
.pgs-radio input[type="radio"] {
  accent-color: var(--gold, #E8B730);
  cursor: pointer;
  margin: 0;
  flex: 0 0 auto;
}

/* ----- CHIPS ----- */
.pgs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pgs-chip {
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.pgs-chip:hover { background: rgba(255,255,255,0.08); color: #fff; }
.pgs-chip.active {
  background: linear-gradient(135deg, rgba(232,183,48,0.2), rgba(232,183,48,0.08));
  border-color: rgba(232,183,48,0.5);
  color: var(--gold, #E8B730);
  font-weight: 700;
}

/* ----- DIFFICULTY CARDS ----- */
.pgs-diff-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.pgs-diff-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  transition: all 0.15s;
  color: rgba(255,255,255,0.8);
  min-height: 62px;
  font-family: inherit;
  text-align: center;
}
.pgs-diff-card:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-1px);
}
.pgs-diff-card.active {
  background: linear-gradient(135deg, rgba(232,183,48,0.15), rgba(124,58,237,0.1));
  border-color: rgba(232,183,48,0.4);
  color: var(--gold, #E8B730);
  box-shadow: 0 4px 12px rgba(232,183,48,0.12);
}
.pgs-diff-icon {
  display: inline-flex;
  font-size: 1.05rem;
  color: var(--gold, #E8B730);
  line-height: 1;
}
.pgs-diff-name {
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.2;
}

/* ----- INFO BOX ----- */
.pgs-info-box {
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 10px;
  background: rgba(124,58,237,0.08);
  border: 1px solid rgba(124,58,237,0.2);
  align-items: flex-start;
}
.pgs-info-box i {
  color: #A78BFA;
  font-size: 1.1rem;
  margin-top: 2px;
  flex: 0 0 auto;
}
.pgs-info-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.35;
}
.pgs-info-hint {
  margin-top: 4px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.4;
}

/* ----- FOOTER ----- */
.pgs-footer {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.15);
  flex: 0 0 auto;
}
.pgs-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 10px;
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid transparent;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pgs-btn i { flex: 0 0 auto; }
.pgs-btn-reset {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.75);
}
.pgs-btn-reset:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.pgs-btn-apply {
  background: linear-gradient(135deg, var(--gold, #E8B730), #F5D261);
  color: #1a1530;
  box-shadow: 0 4px 14px rgba(232,183,48,0.28);
}
.pgs-btn-apply:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232,183,48,0.38);
}
.pgs-btn-apply:active,
.pgs-btn-reset:active { transform: translateY(0); }

/* Hide the old, generic settings scaffolding that earlier scripts
   might inject. The jawlah-settings-panel now holds our pgs panel. */
#jawlah-settings-panel > .jawlah-settings-list,
#jawlah-settings-panel > .jawlah-btn-reset {
  display: none !important;
}

/* ----- Small-screen tuning ----- */
@media (max-width: 1100px) {
  .pgs-body { padding: 10px; gap: 14px; }
  .pgs-diff-cards { gap: 6px; }
  .pgs-diff-card { min-height: 56px; padding: 8px 4px; }
  .pgs-diff-name { font-size: 0.75rem; }
}

/* ============================================================
   PROFESSIONAL SPIN WHEEL — 2026-04-18 v3
   Redesigned wheel UI with gradient segments, 3D hub, glow,
   animated pointer, winner card, and polished sidebar cards.
   ============================================================ */

.spwheel-pro-wrap {
  padding: 16px;
  max-width: 1400px;
  margin: 0 auto;
  color: #fff;
}
.spwheel-pro-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1100px) {
  .spwheel-pro-grid { grid-template-columns: 1fr; }
}

.spwheel-pro-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 28px 20px 22px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 20%, rgba(124,58,237,0.18), transparent 65%),
    linear-gradient(180deg, rgba(23,16,51,0.9), rgba(10,4,34,0.9));
  border: 1px solid rgba(232,183,48,0.18);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.05);
}

.spwheel-pro-stage {
  position: relative;
  width: min(560px, 80vw);
  height: min(560px, 80vw);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pointer at the top */
.spwheel-pro-pointer {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  filter: drop-shadow(0 4px 8px rgba(232,183,48,0.55));
  animation: spwheel-bob 2.2s ease-in-out infinite;
}
@keyframes spwheel-bob {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%     { transform: translateX(-50%) translateY(-3px); }
}
.spwheel-pro-pointer-glow {
  position: absolute;
  top: 14px; left: 50%;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,183,48,0.65), transparent 70%);
  transform: translateX(-50%);
  filter: blur(4px);
  pointer-events: none;
  animation: spwheel-glow 2s ease-in-out infinite alternate;
}
@keyframes spwheel-glow {
  from { opacity: 0.4; }
  to   { opacity: 0.9; }
}

/* Wheel disc */
.spwheel-pro-disc {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  transform-origin: 50% 50%;
  box-shadow:
    0 0 0 6px rgba(0,0,0,0.35),
    0 0 40px rgba(232,183,48,0.25),
    0 20px 60px rgba(0,0,0,0.55),
    inset 0 0 50px rgba(0,0,0,0.45);
}
.spwheel-pro-disc canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Central hub button */
.spwheel-pro-hub {
  position: absolute;
  top: 50%; left: 50%;
  width: 112px; height: 112px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 2;
  padding: 0;
  background:
    radial-gradient(circle at 30% 30%, #fff7cf, #E8B730 45%, #8a5a00 100%);
  box-shadow:
    0 0 0 5px rgba(23,16,51,0.9),
    0 0 0 9px rgba(232,183,48,0.6),
    0 10px 30px rgba(0,0,0,0.65),
    inset 0 -6px 18px rgba(0,0,0,0.35),
    inset 0 6px 18px rgba(255,255,255,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.spwheel-pro-hub:hover:not(.disabled) {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow:
    0 0 0 5px rgba(23,16,51,0.9),
    0 0 0 10px rgba(255,222,120,0.85),
    0 12px 40px rgba(232,183,48,0.5),
    inset 0 -6px 18px rgba(0,0,0,0.35),
    inset 0 6px 18px rgba(255,255,255,0.4);
}
.spwheel-pro-hub:active:not(.disabled) {
  transform: translate(-50%, -50%) scale(0.97);
}
.spwheel-pro-hub.disabled { cursor: not-allowed; opacity: 0.7; }
.spwheel-pro-hub-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #3c1f00;
  font-weight: 900;
  font-size: 1.4rem;
  text-shadow: 0 2px 4px rgba(255,255,255,0.45);
}
.spwheel-pro-hub-label { letter-spacing: 1px; }

/* Spin CTA button */
.spwheel-pro-btn-row {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.spwheel-pro-cta {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 14px;
  border: none;
  font-weight: 800;
  font-size: 1.05rem;
  color: #2a1800;
  cursor: pointer;
  background: linear-gradient(135deg, #fff1b8 0%, #E8B730 60%, #c28d00 100%);
  box-shadow:
    0 10px 24px rgba(232,183,48,0.45),
    inset 0 1px 0 rgba(255,255,255,0.6),
    inset 0 -2px 0 rgba(0,0,0,0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.spwheel-pro-cta:hover:not(.disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 14px 32px rgba(232,183,48,0.55),
    inset 0 1px 0 rgba(255,255,255,0.7);
}
.spwheel-pro-cta:active:not(.disabled) { transform: translateY(0); }
.spwheel-pro-cta.disabled {
  cursor: not-allowed;
  opacity: 0.55;
  filter: grayscale(0.3);
}
.spwheel-pro-cta-shine {
  position: absolute;
  top: 0; left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: spwheel-shine 3s ease-in-out infinite;
}
@keyframes spwheel-shine {
  0%, 60% { left: -100%; }
  100%    { left: 150%; }
}

.spwheel-pro-cta-sec {
  width: 48px; height: 48px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(239,68,68,0.15);
  color: #fca5a5;
  cursor: pointer;
  transition: all 0.15s ease;
}
.spwheel-pro-cta-sec:hover {
  background: rgba(239,68,68,0.3);
  color: #fff;
  border-color: rgba(239,68,68,0.5);
}

.spwheel-pro-hint {
  margin: 0;
  color: rgba(255,255,255,0.55);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Winner display slot */
.spwheel-pro-winner-slot { width: 100%; max-width: 420px; }
.spwheel-pro-winner {
  padding: 22px 18px;
  border-radius: 18px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(232,183,48,0.3), transparent 65%),
    linear-gradient(180deg, rgba(60,31,0,0.8), rgba(23,16,51,0.9));
  border: 2px solid rgba(232,183,48,0.5);
  box-shadow:
    0 12px 40px rgba(232,183,48,0.35),
    inset 0 1px 0 rgba(255,255,255,0.1);
  animation: spwheel-winner-in 0.6s cubic-bezier(.34,1.56,.64,1);
}
@keyframes spwheel-winner-in {
  from { opacity: 0; transform: translateY(20px) scale(0.85); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.spwheel-pro-winner-crown {
  font-size: 2.5rem;
  line-height: 1;
  animation: spwheel-crown 1.5s ease-in-out infinite;
}
@keyframes spwheel-crown {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50%     { transform: translateY(-4px) rotate(5deg); }
}
.spwheel-pro-winner-label {
  color: var(--benrati, #E8B730);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 6px 0 10px;
}
.spwheel-pro-winner-avatar-wrap { display: flex; justify-content: center; margin-bottom: 10px; }
.spwheel-pro-winner-avatar,
.spwheel-pro-winner-avatar-ph {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 3px solid var(--benrati, #E8B730);
  box-shadow: 0 0 20px rgba(232,183,48,0.6);
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #8B5CF6, #E8B730);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 900;
}
.spwheel-pro-winner-name {
  font-size: 1.8rem;
  font-weight: 900;
  color: #fff;
  margin-bottom: 6px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.spwheel-pro-winner-plat {
  color: rgba(255,255,255,0.55);
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Side panel cards */
.spwheel-pro-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.spwheel-pro-card {
  background: rgba(23,16,51,0.6);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 14px;
  backdrop-filter: blur(6px);
}
.spwheel-pro-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.spwheel-pro-card-head i {
  color: var(--benrati, #E8B730);
  font-size: 0.95rem;
}
.spwheel-pro-card-head h3 {
  flex: 1;
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
}
.spwheel-pro-count {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
}

/* Input row */
.spwheel-pro-input-row {
  display: flex;
  gap: 6px;
}
.spwheel-pro-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.3);
  color: #fff;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.spwheel-pro-input:focus {
  border-color: rgba(232,183,48,0.6);
  box-shadow: 0 0 0 3px rgba(232,183,48,0.15);
}
.spwheel-pro-input-btn {
  width: 42px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, #E8B730, #c28d00);
  color: #2a1800;
  cursor: pointer;
  font-weight: 700;
  transition: transform 0.1s, box-shadow 0.1s;
}
.spwheel-pro-input-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(232,183,48,0.4);
}

.spwheel-pro-chat-hint {
  margin-top: 10px;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
  display: flex;
  align-items: center;
  gap: 6px;
}
.spwheel-pro-chat-hint b {
  color: var(--benrati, #E8B730);
  font-weight: 700;
}
.spwheel-pro-pulse {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #53FC18;
  box-shadow: 0 0 0 0 rgba(83,252,24, 0.7);
  animation: spwheel-pulse 1.6s infinite;
}
@keyframes spwheel-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(83,252,24,0.7); }
  70%  { box-shadow: 0 0 0 8px rgba(83,252,24,0); }
  100% { box-shadow: 0 0 0 0 rgba(83,252,24,0); }
}

/* Participants list */
.spwheel-pro-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 4px;
}
.spwheel-pro-list::-webkit-scrollbar { width: 5px; }
.spwheel-pro-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}
.spwheel-pro-empty {
  text-align: center;
  padding: 24px 12px;
  color: rgba(255,255,255,0.4);
}
.spwheel-pro-empty i {
  font-size: 2rem;
  margin-bottom: 8px;
  display: block;
  opacity: 0.5;
}
.spwheel-pro-empty p { margin: 0; font-size: 0.82rem; }

.spwheel-pro-pitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
  transition: background 0.15s;
}
.spwheel-pro-pitem:hover {
  background: rgba(255,255,255,0.06);
}
.spwheel-pro-pcolor {
  width: 4px;
  height: 28px;
  border-radius: 2px;
  flex: 0 0 auto;
}
.spwheel-pro-avatar,
.spwheel-pro-avatar-ph {
  width: 28px; height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 0.78rem;
}
.spwheel-pro-pname {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.85rem;
  color: #fff;
}
.spwheel-pro-plat {
  flex: 0 0 auto;
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 8px;
  color: rgba(255,255,255,0.55);
  background: rgba(255,255,255,0.06);
}
.spwheel-pro-plat.twitch {
  color: #a78bfa;
  background: rgba(145,70,255,0.15);
}
.spwheel-pro-plat.kick {
  color: #53FC18;
  background: rgba(83,252,24,0.12);
  font-weight: 900;
}
.spwheel-pro-plat.chat {
  color: #60A5FA;
  background: rgba(59,130,246,0.12);
}
.spwheel-pro-rm {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  flex: 0 0 auto;
  transition: all 0.15s ease;
}
.spwheel-pro-rm:hover {
  background: rgba(239,68,68,0.2);
  color: #fca5a5;
}

/* History */
.spwheel-pro-history {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 240px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.spwheel-pro-hitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  font-size: 0.82rem;
}
.spwheel-pro-hitem:first-child {
  background: linear-gradient(90deg, rgba(232,183,48,0.18), rgba(232,183,48,0.05));
  border: 1px solid rgba(232,183,48,0.3);
}
.spwheel-pro-hrank {
  font-weight: 800;
  color: var(--benrati, #E8B730);
  flex: 0 0 auto;
  min-width: 28px;
}
.spwheel-pro-hname {
  flex: 1 1 auto;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spwheel-pro-htime {
  color: rgba(255,255,255,0.4);
  font-size: 0.72rem;
}

/* Confetti */
.spwheel-pro-confetti {
  position: fixed;
  top: -20px;
  z-index: 9999;
  pointer-events: none;
  animation: spwheel-confetti-fall linear forwards;
}
@keyframes spwheel-confetti-fall {
  from { transform: translateY(0) rotate(0deg); opacity: 1; }
  to   { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* Disable the old in-game settings card from spin-wheel.js
   since we now control settings via the right sidebar. */
.spwheel-pro-wrap ~ .glass-card { display: none; }

/* RTL polish */
[dir="rtl"] .spwheel-pro-cta-shine { left: auto; right: -100%; animation-name: spwheel-shine-rtl; }
@keyframes spwheel-shine-rtl {
  0%, 60% { right: -100%; }
  100%    { right: 150%; }
}

@media (max-width: 700px) {
  .spwheel-pro-stage { width: min(420px, 92vw); height: min(420px, 92vw); }
  .spwheel-pro-hub { width: 88px; height: 88px; }
  .spwheel-pro-hub-label { font-size: 1.1rem; }
  .spwheel-pro-cta { padding: 12px 22px; font-size: 0.95rem; }
  .spwheel-pro-winner-name { font-size: 1.4rem; }
}