/* ============ 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 ============ */
body.custom-cursor, body.custom-cursor * { cursor: none !important; }

#cursor-main {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  width: 24px;
  height: 24px;
  border: 2px solid var(--benrati);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, border-color 0.2s, background 0.2s;
  mix-blend-mode: difference;
  box-shadow: 0 0 10px var(--benrati-glow);
}
#cursor-dot {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  width: 6px;
  height: 6px;
  background: var(--benrati);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.1s, height 0.1s;
  box-shadow: 0 0 8px var(--benrati-glow);
}
#cursor-trail {
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,183,48,0.4), transparent);
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, opacity 0.3s;
  mix-blend-mode: screen;
}

.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); }
}