/* Bilimdon.uz - Topqir.uz uslubidagi zamonaviy interaktiv platforma stillari */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* EduPro Primary & Accent Tokens (#5145FF, #2693FF, #12B886, #FFAA45) */
  --primary: #5145FF;
  --primary-hover: #4135E0;
  --primary-blue: #2693FF;
  --secondary: #2693FF;
  --accent: #FFAA45;
  --success: #12B886;
  --warning: #FFAA45;
  --error: #DC2626;

  /* EduPro Light Mode Surface Tokens (Light background: #F5F7FF, Asosiy matn: #111B4D) */
  --bg-main: #F5F7FF;
  --bg-surface: #FFFFFF;
  --bg-surface-secondary: #EDF1FD;
  --text-primary: #111B4D;
  --text-secondary: #586380;
  --border-color: #E2E8F8;
  --btn-primary: #5145FF;

  /* EduPro Radius Hierarchy (12px inputs/buttons, 16px cards, 20px containers) */
  --radius-sm: 0.5rem;    /* 8px */
  --radius-btn: 0.75rem;  /* 12px */
  --radius-card: 1rem;    /* 16px */
  --radius-lg: 1.25rem;   /* 20px */
  --radius-2xl: 1.5rem;   /* 24px */

  /* EduPro Subtle & Crisp Elevation Shadows */
  --shadow-edu-sm: 0 1px 2px 0 rgba(17, 27, 77, 0.05);
  --shadow-edu: 0 1px 3px 0 rgba(17, 27, 77, 0.08), 0 1px 2px -1px rgba(17, 27, 77, 0.06);
  --shadow-edu-md: 0 6px 12px -2px rgba(17, 27, 77, 0.08), 0 3px 6px -2px rgba(17, 27, 77, 0.05);
  --shadow-edu-lg: 0 14px 24px -4px rgba(17, 27, 77, 0.1), 0 4px 8px -2px rgba(17, 27, 77, 0.04);

  /* Legacy variable aliases for component compatibility */
  --teal: #2693FF;
  --violet: #5145FF;
  --amber: #FFAA45;
}

.dark {
  /* EduPro Dark Mode Surface Tokens (Dark background: #15172B) */
  --primary: #6E63FF;
  --primary-hover: #8C84FF;
  --primary-blue: #3FA3FF;
  --secondary: #3FA3FF;
  --accent: #FFB75E;
  --success: #20C997;
  --warning: #FFB75E;
  --error: #EF4444;

  --bg-main: #15172B;
  --bg-surface: #1C1E38;
  --bg-surface-secondary: #24284C;
  --text-primary: #F5F7FF;
  --text-secondary: #9FAAC7;
  --border-color: #2D325A;
  --btn-primary: #6E63FF;

  --shadow-edu-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-edu: 0 2px 4px 0 rgba(0, 0, 0, 0.4);
  --shadow-edu-md: 0 6px 12px -2px rgba(0, 0, 0, 0.5);
  --shadow-edu-lg: 0 16px 24px -4px rgba(0, 0, 0, 0.6);

  /* Legacy variable aliases */
  --primary-blue: #818CF8;
  --teal: #38BDF8;
  --violet: #A5B4FC;
  --amber: #F59E0B;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, .font-heading, .topqir-title {
  font-family: 'Baloo 2', 'Inter', sans-serif;
}

/* Glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.80);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.dark .glass {
  background: rgba(18, 26, 43, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(41, 52, 73, 0.75);
}

.glass-card {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(226, 232, 240, 0.85);
  box-shadow: 0 8px 24px -4px rgba(16, 24, 40, 0.06);
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dark .glass-card {
  background: rgba(18, 26, 43, 0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(41, 52, 73, 0.75);
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.4);
  transition: all 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.glass-card:hover {
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 16px 36px -8px rgba(79, 70, 229, 0.22);
}

.dark .glass-card:hover {
  border-color: rgba(129, 140, 248, 0.5);
  box-shadow: 0 18px 42px -8px rgba(99, 102, 241, 0.35);
}

/* Topqir 3D Playful Shadow */
.shadow-playful {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.shadow-playful-lg {
  box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.12), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
.dark ::-webkit-scrollbar-thumb {
  background: #334155;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Topqir Marquee animation */
@keyframes marquee {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 35s linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}

/* Float & Bounce animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
}

.animate-float {
  animation: float 3.5s ease-in-out infinite;
}

/* Topqir Game Card Hover Effects */
.topqir-game-card {
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}

.topqir-game-card:hover {
  transform: translateY(-6px) scale(1.02);
}

.topqir-game-card:active {
  transform: scale(0.97);
}

/* Confetti Canvas Container */
#confetti-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
}

/* Shake animation for mistakes */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}

.animate-shake {
  animation: shake 0.4s ease-in-out;
}

/* Pulse glow for live elements */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(99, 102, 241, 0.4); }
  50% { box-shadow: 0 0 25px rgba(99, 102, 241, 0.8); }
}

.animate-pulse-glow {
  animation: pulse-glow 2s infinite ease-in-out;
}

/* Shimmer button sheen */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(60deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: rotate(30deg);
  transition: transform 0.6s ease;
}
.btn-shimmer:hover::after {
  transform: rotate(30deg) translate(50%, 50%);
}

.safe-area-bottom {
  padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px));
}

/* Animated Game Cover Shimmer & Ambient Glows */
@keyframes cover-sheen {
  0% { transform: translateX(-150%) skewX(-20deg); }
  50%, 100% { transform: translateX(250%) skewX(-20deg); }
}

.cover-shimmer-sweep {
  position: relative;
  overflow: hidden;
}

.cover-shimmer-sweep::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  transform: translateX(-150%) skewX(-20deg);
  pointer-events: none;
  animation: cover-sheen 6s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.group:hover .cover-shimmer-sweep::after {
  animation: cover-sheen 2.2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* 3D Floating Game Card Elevation */
.game-card-animated {
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  perspective: 1000px;
}

.game-card-animated:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 35px -10px rgba(99, 102, 241, 0.25), 0 10px 15px -5px rgba(0, 0, 0, 0.1);
}

/* Pulsing Live Beacon Animation */
@keyframes beacon-ping {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.animate-beacon {
  animation: beacon-ping 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* Dynamic Flame & Sparkle Micro-Motion */
@keyframes flame-pulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.15) rotate(-3deg); }
  75% { transform: scale(1.1) rotate(3deg); }
}

/* Accessibility Keyboard Focus Indicators */
:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}

/* ==========================================================================
   AMBIENT DYNAMIC REVOLVING COLORFUL BACKGROUND (Turfa xil aylanuvchi ranglar)
   ========================================================================== */

.ambient-bg-container {
  display: none !important;
}

/* Revolving Grand Conic Rainbow Aurora */
.ambient-aurora-mesh {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140vmax;
  height: 140vmax;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg,
    rgba(99, 102, 241, 0.22) 0deg,
    rgba(14, 165, 233, 0.25) 60deg,
    rgba(16, 185, 129, 0.20) 120deg,
    rgba(245, 158, 11, 0.22) 180deg,
    rgba(236, 72, 153, 0.26) 240deg,
    rgba(139, 92, 246, 0.24) 300deg,
    rgba(99, 102, 241, 0.22) 360deg
  );
  filter: blur(95px);
  animation: ambient-spin-aurora 48s linear infinite;
  opacity: 0.55;
  mix-blend-mode: normal;
  will-change: transform;
}

.dark .ambient-aurora-mesh {
  opacity: 0.42;
  background: conic-gradient(
    from 0deg,
    rgba(99, 102, 241, 0.32) 0deg,
    rgba(14, 165, 233, 0.35) 60deg,
    rgba(16, 185, 129, 0.24) 120deg,
    rgba(245, 158, 11, 0.26) 180deg,
    rgba(236, 72, 153, 0.36) 240deg,
    rgba(139, 92, 246, 0.32) 300deg,
    rgba(99, 102, 241, 0.32) 360deg
  );
  mix-blend-mode: screen;
}

/* Individual revolving glowing orbs */
.ambient-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(85px);
  opacity: 0.58;
  will-change: transform, opacity;
  pointer-events: none;
}

.dark .ambient-orb {
  opacity: 0.52;
  filter: blur(100px);
  mix-blend-mode: screen;
}

/* 1. Violet / Indigo Orb: orbits top-left and sweeps across */
.ambient-orb-violet {
  width: 52vw;
  height: 52vw;
  max-width: 700px;
  max-height: 700px;
  top: -10%;
  left: -10%;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.95) 0%, rgba(129, 140, 248, 0.5) 45%, rgba(99, 102, 241, 0) 70%);
  animation: orbit-violet 26s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* 2. Cyan / Neon Sky Orb: orbits bottom-right and sweeps left */
.ambient-orb-cyan {
  width: 54vw;
  height: 54vw;
  max-width: 680px;
  max-height: 680px;
  bottom: -15%;
  right: -10%;
  background: radial-gradient(circle, rgba(14, 165, 233, 0.95) 0%, rgba(56, 189, 248, 0.5) 45%, rgba(14, 165, 233, 0) 70%);
  animation: orbit-cyan 32s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* 3. Rose / Fuchsia Orb: orbits center and bottom-left */
.ambient-orb-rose {
  width: 45vw;
  height: 45vw;
  max-width: 600px;
  max-height: 600px;
  top: 35%;
  left: 20%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.9) 0%, rgba(244, 63, 94, 0.5) 45%, rgba(236, 72, 153, 0) 70%);
  animation: orbit-rose 24s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* 4. Amber / Golden Sunshine Orb: orbits top-right & center */
.ambient-orb-amber {
  width: 46vw;
  height: 46vw;
  max-width: 580px;
  max-height: 580px;
  top: 5%;
  right: 5%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.9) 0%, rgba(251, 146, 60, 0.5) 45%, rgba(245, 158, 11, 0) 70%);
  animation: orbit-amber 36s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* 5. Emerald / Mint Teal Orb: orbits bottom-left and center */
.ambient-orb-emerald {
  width: 48vw;
  height: 48vw;
  max-width: 620px;
  max-height: 620px;
  bottom: 0%;
  left: 5%;
  background: radial-gradient(circle, rgba(16, 185, 129, 0.9) 0%, rgba(20, 184, 166, 0.5) 45%, rgba(16, 185, 129, 0) 70%);
  animation: orbit-emerald 28s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

/* Soft Volumetric Radial Vignette */
.ambient-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, var(--bg-main) 100%);
  opacity: 0.7;
  pointer-events: none;
}

.dark .ambient-vignette {
  background: radial-gradient(ellipse at center, transparent 25%, #0B1020 95%);
  opacity: 0.65;
}

/* Ambient Mode States */
.ambient-dim .ambient-orb {
  opacity: 0.22 !important;
}
.ambient-dim .ambient-aurora-mesh {
  opacity: 0.20 !important;
}
.ambient-off {
  display: none !important;
}

/* Animated Live Avatar Frames (Do'kon va Profil uchun) */
@keyframes neon-pulse-frame {
  0%, 100% {
    box-shadow: 0 0 10px #f59e0b, 0 0 20px #d97706, inset 0 0 5px #fbbf24;
    border-color: #fbbf24;
  }
  50% {
    box-shadow: 0 0 20px #fbbf24, 0 0 35px #f59e0b, inset 0 0 10px #fef08a;
    border-color: #fef08a;
  }
}

@keyframes diamond-glow-frame {
  0%, 100% {
    box-shadow: 0 0 10px #06b6d4, 0 0 25px #0891b2, inset 0 0 8px #67e8f9;
    border-color: #67e8f9;
  }
  50% {
    box-shadow: 0 0 22px #22d3ee, 0 0 40px #06b6d4, inset 0 0 14px #a5f3fc;
    border-color: #cffafe;
  }
}

@keyframes fire-flame-frame {
  0%, 100% {
    box-shadow: 0 0 12px #ef4444, 0 0 25px #f97316, inset 0 0 8px #fca5a5;
    border-color: #ef4444;
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 25px #f97316, 0 0 45px #dc2626, inset 0 0 12px #fed7aa;
    border-color: #f97316;
    transform: scale(1.02);
  }
}

@keyframes cyber-spark-frame {
  0% {
    box-shadow: 0 0 8px #8b5cf6, 0 0 18px #a855f7;
    border-color: #c084fc;
  }
  50% {
    box-shadow: 0 0 22px #a855f7, 0 0 35px #ec4899;
    border-color: #f472b6;
  }
  100% {
    box-shadow: 0 0 8px #8b5cf6, 0 0 18px #a855f7;
    border-color: #c084fc;
  }
}

@keyframes rainbow-cosmic-frame {
  0% {
    border-color: #ef4444;
    box-shadow: 0 0 15px #ef4444, 0 0 30px #f59e0b;
  }
  25% {
    border-color: #f59e0b;
    box-shadow: 0 0 15px #f59e0b, 0 0 30px #10b981;
  }
  50% {
    border-color: #10b981;
    box-shadow: 0 0 15px #10b981, 0 0 30px #06b6d4;
  }
  75% {
    border-color: #8b5cf6;
    box-shadow: 0 0 15px #8b5cf6, 0 0 30px #ec4899;
  }
  100% {
    border-color: #ef4444;
    box-shadow: 0 0 15px #ef4444, 0 0 30px #f59e0b;
  }
}

.avatar-frame-gold, .frame-gold {
  border: 3px solid #fbbf24 !important;
  animation: neon-pulse-frame 2s infinite ease-in-out !important;
}

.avatar-frame-diamond, .frame-cyan, .frame-diamond {
  border: 3px solid #22d3ee !important;
  animation: diamond-glow-frame 2.2s infinite ease-in-out !important;
}

.avatar-frame-fire, .frame-rose, .frame-fire {
  border: 3px solid #ef4444 !important;
  animation: fire-flame-frame 1.8s infinite ease-in-out !important;
}

.avatar-frame-cyber, .frame-cyber {
  border: 3px solid #a855f7 !important;
  animation: cyber-spark-frame 2s infinite ease-in-out !important;
}

.avatar-frame-rainbow, .frame-rainbow {
  border: 3px solid #f43f5e !important;
  animation: rainbow-cosmic-frame 3s infinite linear !important;
}

.avatar-frame-galaxy, .frame-galaxy {
  border: 3px solid #8b5cf6 !important;
  box-shadow: 0 0 20px #8b5cf6, 0 0 35px #06b6d4, inset 0 0 10px #ec4899 !important;
  animation: rainbow-cosmic-frame 3s infinite linear !important;
}

.avatar-frame-vip-pulse, .frame-vip-pulse {
  border: 3px solid #f59e0b !important;
  box-shadow: 0 0 25px rgba(245, 158, 11, 0.8), 0 0 40px rgba(236, 72, 153, 0.6) !important;
  animation: neon-pulse-frame 1.5s infinite ease-in-out !important;
}

@keyframes ambient-spin-aurora {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1.12);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
  }
}

@keyframes orbit-violet {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  25% {
    transform: translate3d(25vw, 15vh, 0) rotate(90deg) scale(1.18);
  }
  50% {
    transform: translate3d(50vw, 5vh, 0) rotate(180deg) scale(0.92);
  }
  75% {
    transform: translate3d(20vw, 30vh, 0) rotate(270deg) scale(1.1);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(360deg) scale(1);
  }
}

@keyframes orbit-cyan {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1.05);
  }
  25% {
    transform: translate3d(-20vw, -20vh, 0) rotate(-90deg) scale(1.2);
  }
  50% {
    transform: translate3d(-45vw, -10vh, 0) rotate(-180deg) scale(0.95);
  }
  75% {
    transform: translate3d(-25vw, 15vh, 0) rotate(-270deg) scale(1.15);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(-360deg) scale(1.05);
  }
}

@keyframes orbit-rose {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(0.95);
  }
  33% {
    transform: translate3d(-25vw, 25vh, 0) rotate(120deg) scale(1.22);
  }
  66% {
    transform: translate3d(30vw, -20vh, 0) rotate(240deg) scale(1.02);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(360deg) scale(0.95);
  }
}

@keyframes orbit-amber {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate3d(-35vw, 25vh, 0) rotate(120deg) scale(1.25);
  }
  66% {
    transform: translate3d(-15vw, -15vh, 0) rotate(240deg) scale(0.9);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(360deg) scale(1);
  }
}

@keyframes orbit-emerald {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg) scale(1);
  }
  33% {
    transform: translate3d(35vw, -30vh, 0) rotate(-120deg) scale(1.18);
  }
  66% {
    transform: translate3d(20vw, 15vh, 0) rotate(-240deg) scale(0.95);
  }
  100% {
    transform: translate3d(0, 0, 0) rotate(-360deg) scale(1);
  }
}

/* ==========================================================================
   DESIGN ENHANCEMENT UTILITIES (Dizaynni kuchaytirish)
   ========================================================================== */

/* Multi-color flowing animated gradient text */
.animated-gradient-text {
  background: linear-gradient(135deg, #4F46E5 0%, #0EA5E9 25%, #EC4899 50%, #F59E0B 75%, #10B981 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-flow 8s ease infinite;
}

@keyframes gradient-flow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Premium translucent glass card that lets revolving background colors shine through */
.glass-panel {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  box-shadow: 0 10px 30px -5px rgba(16, 24, 40, 0.05);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.dark .glass-panel {
  background: rgba(18, 26, 43, 0.76);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(41, 52, 73, 0.75);
  box-shadow: 0 12px 36px -6px rgba(0, 0, 0, 0.45);
}

.glass-panel:hover {
  transform: translateY(-4px);
  border-color: rgba(99, 102, 241, 0.4);
  box-shadow: 0 20px 40px -10px rgba(79, 70, 229, 0.25);
}

.dark .glass-panel:hover {
  box-shadow: 0 20px 45px -10px rgba(99, 102, 241, 0.35);
}

/* Neon Glow Badges */
.badge-neon-glow {
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(79, 70, 229, 0.3);
}

/* Enhanced CTA Glow Button */
.btn-cta-glow {
  position: relative;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4), 0 0 15px rgba(14, 165, 233, 0.25);
}

.btn-cta-glow:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 15px 35px -5px rgba(79, 70, 229, 0.6), 0 0 25px rgba(14, 165, 233, 0.4);
}

.btn-cta-glow:active {
  transform: scale(0.97);
}

/* Reduced Motion Preference Support */
@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;
  }
  .ambient-orb, .ambient-aurora-mesh {
    animation: none !important;
  }
}

/* ==============================================================
   JONLI ANIMATSIYALAR & ZAMONAVIY EFFEKTLAR (v8.4.0)
   ============================================================== */

/* 1. Karta Jonli Nuri (Live Glow Pulse) */
@keyframes liveGlowPulse {
  0%, 100% {
    box-shadow: 0 0 15px -3px rgba(99, 102, 241, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 0 0 28px 4px rgba(139, 92, 246, 0.5), 0 10px 20px -3px rgba(99, 102, 241, 0.25);
  }
}

.live-card-glow {
  animation: liveGlowPulse 3s infinite ease-in-out;
}

/* 2. Yumshoq Suzib Turish (Gentle Float) */
@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-6px);
  }
}

.animate-float-gentle {
  animation: floatGentle 3.5s ease-in-out infinite;
}

/* 3. Yorqin Yaltirash To'lqini (Shine Sweep) */
@keyframes shineSweep {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shine {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: shineSweep 2.5s infinite;
}

/* 4. VIP Jonli Avatar Ramkasi (Spinning Rainbow Border) */
@keyframes spinBorder {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

.avatar-frame-vip {
  position: relative;
  border-radius: 9999px;
  padding: 3px;
  background: linear-gradient(135deg, #f59e0b, #ec4899, #8b5cf6, #3b82f6, #10b981);
  animation: spinBorder 4s linear infinite;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.5);
}

/* 5. Sahifaga Kirishda Qiziqarli Ochilish Animatsiyasi (Page Enter Reveal) */
@keyframes pageEnterReveal {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.page-enter-reveal {
  animation: pageEnterReveal 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 6. Mobil Tegish (Touch) va Adaptiv Ko'rinish */
@media (max-width: 640px) {
  .touch-target-friendly {
    min-height: 44px;
    min-width: 44px;
  }
}

/* ==============================================================
   7. VERTIKAL MENYUNI YOPISH VA OCHISH (COLLAPSIBLE SIDEBAR)
   ============================================================== */
#desktop-vertical-sidebar {
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease;
}

#desktop-vertical-sidebar.sidebar-collapsed {
  width: 5rem !important; /* 80px */
  padding-left: 0.6rem !important;
  padding-right: 0.6rem !important;
}

#desktop-vertical-sidebar.sidebar-collapsed .sidebar-text,
#desktop-vertical-sidebar.sidebar-collapsed .sidebar-badge,
#desktop-vertical-sidebar.sidebar-collapsed #nav-logo div,
#desktop-vertical-sidebar.sidebar-collapsed [data-page="shop"] .sidebar-shop-text {
  display: none !important;
}

#desktop-vertical-sidebar.sidebar-collapsed nav button {
  justify-content: center !important;
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
}

#desktop-vertical-sidebar.sidebar-collapsed nav button i {
  margin-right: 0 !important;
  font-size: 1.1rem !important;
}

#desktop-vertical-sidebar.sidebar-collapsed .sidebar-subgroup {
  padding-left: 0 !important;
  border-left: none !important;
  margin-left: 0 !important;
}

#desktop-vertical-sidebar.sidebar-collapsed #btn-lang-desktop span.lang-code,
#desktop-vertical-sidebar.sidebar-collapsed #btn-lang-desktop i {
  display: none !important;
}

body.sidebar-is-collapsed main {
  padding-left: 5rem !important; /* 80px */
  transition: padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   EDUZUKKO GAME FULLSCREEN (KENGAYTIRISH / TO'LIQ EKRAN REJIMI)
   Smartbordlar, proyektorlar va maktab monitorlarida 100% ekran
============================================================ */
body.bilimdon-game-fullscreen {
  overflow: hidden !important;
}

body.bilimdon-game-fullscreen #navbar-root,
body.bilimdon-game-fullscreen footer {
  display: none !important;
}

body.bilimdon-game-fullscreen main {
  padding-left: 0 !important;
  margin: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  min-height: 100vh !important;
  overflow: hidden !important;
}

/* O'yin davomida barcha savollarda doimiy to'liq ekranda turish qoidasi */
body.bilimdon-game-fullscreen #app-root,
body.bilimdon-game-fullscreen #app-root > * {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  z-index: 99999 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background-color: #020617 !important;
  padding: 1rem 1.5rem !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.game-fullscreen-active {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  z-index: 99999 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  background-color: #020617 !important; /* bg-slate-950 */
  padding: 1rem 1.5rem !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.game-fullscreen-active > div {
  width: 100% !important;
  max-width: 1200px !important;
  margin: auto !important;
}