:root {
  --primary-color: #6c63ff;
  --secondary-color: #ff6584;
  --accent-color: #00f2fe;
  --bg-dark: #0f0f13;
  --bg-card: rgba(20, 20, 30, 0.6);
  --border-card: rgba(255, 255, 255, 0.15);
  --text-main: #ffffff;
  --text-muted: #a0a0b0;
}

body {
  background: linear-gradient(-45deg, #1a1a24, #2a0b2e, #131433, #0f0f13);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  color: var(--text-main);
  font-family: "Inter", "Roboto", sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

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

.app-wrapper-container {
  background: transparent !important;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.8);
}

/* Premium Glassmorphism Cards */
.top-games-section .card-box,
.top-games-active-users .card-box {
  background: var(--bg-card) !important;
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid var(--border-card) !important;
  border-radius: 20px !important;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  padding: 14px !important;
  overflow: visible !important;
}

.top-games-section .card-box:hover,
.top-games-active-users .card-box:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 15px 40px rgba(108, 99, 255, 0.4),
    0 0 20px rgba(255, 101, 132, 0.2);
  border-color: rgba(255, 101, 132, 0.5) !important;
}

.adBG {
  background: var(--bg-card) !important;
  backdrop-filter: blur(12px);
  border: 1px solid var(--border-card) !important;
  border-radius: 18px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}

.adBG::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(108, 99, 255, 0.1) 0%,
    transparent 70%
  );
  animation: rotateGlow 10s linear infinite;
  pointer-events: none;
}

@keyframes rotateGlow {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Images */
.featured-image {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  position: relative;
}

.featured-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none;
}

.featured-image img {
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card-box:hover .featured-image img {
  transform: scale(1.1) rotate(1deg);
}

/* Buttons */
.cusBtnOption,
.playcusBtnOption {
  background: linear-gradient(135deg, var(--primary-color), #4facfe) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 30px !important;
  color: #fff !important;
  font-weight: 800 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 13px !important;
  box-shadow: 0 4px 15px rgba(79, 172, 254, 0.4) !important;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

.cusBtnOption:hover,
.playcusBtnOption:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 25px rgba(79, 172, 254, 0.6) !important;
  color: #fff !important;
}

/* Reward Pulse Button */
.reward-btn-container {
  background: linear-gradient(
    135deg,
    var(--secondary-color),
    #fa709a
  ) !important;
  border: none !important;
  animation: pulseReward 2s infinite cubic-bezier(0.66, 0, 0, 1);
  color: #fff !important;
  font-weight: bold;
}

@keyframes pulseReward {
  0% {
    box-shadow: 0 0 0 0 rgba(250, 112, 154, 0.7);
  }
  70% {
    box-shadow: 0 0 0 15px rgba(250, 112, 154, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(250, 112, 154, 0);
  }
}

.reward-banner-inner {
  background: linear-gradient(
    135deg,
    rgba(255, 101, 132, 0.2),
    rgba(108, 99, 255, 0.2)
  ) !important;
  backdrop-filter: blur(10px);
  border-radius: 20px !important;
  box-shadow:
    0 8px 32px rgba(108, 99, 255, 0.2),
    inset 0 0 20px rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.txtClr {
  color: var(--text-main) !important;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Shimmer Animation Update */
.shimmer-effect {
  color: rgba(255, 255, 255, 1) !important;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.8) 50%,
    rgba(255, 255, 255, 0) 60%
  ) !important;
  background-size: 200% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: shimmerAnim 2.5s infinite linear !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

@keyframes shimmerAnim {
  0% {
    background-position: 200% center;
  }
  100% {
    background-position: -200% center;
  }
}

h3 {
  color: var(--text-main) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

h2.txtClr,
h3.txtClr {
  background: linear-gradient(135deg, #fff, var(--accent-color));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}