/* ==========================================
   ZESTYGAME - MODERN GAMING THEME
   ========================================== */

:root {
  /* Primary Colors - Purple & Cyan Gaming Theme */
  --primary1: #0f0f23;        /* Dark background */
  --primary2: #00d4ff;        /* Cyan accent */
  --primary3: #8b5cf6;        /* Purple accent */
  --primary4: #ec4899;        /* Pink accent */
  
  /* Secondary Colors */
  --secondary1: #1a1a2e;      /* Slightly lighter background */
  --secondary2: #16213e;      /* Card background */
  --secondary3: #0f3460;      /* Hover background */
  
  /* Accent Colors */
  --accent1: #00d4ff;         /* Cyan - Primary accent */
  --accent2: #8b5cf6;         /* Purple - Secondary accent */
  --accent3: #ec4899;         /* Pink - Highlight */
  --accent4: #06b6d4;         /* Teal - Alternative */
  
  /* Text Colors */
  --text-primary: #ffffff;    /* Main text */
  --text-secondary: #b0b0c0;  /* Secondary text */
  --text-muted: #6b7280;      /* Muted text */
  
  /* Gradients */
  --gradient-main: linear-gradient(135deg, #8b5cf6 0%, #00d4ff 100%);
  --gradient-alt: linear-gradient(135deg, #00d4ff 0%, #ec4899 100%);
  --gradient-dark: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
}

/* ==========================================
   GLOBAL COLOR APPLICATION
   ========================================== */

* {
  --box-color: var(--primary1);
}

html {
  background: var(--primary1);
  color: var(--text-primary);
}

body {
  background: var(--primary1);
  color: var(--text-primary);
  font-family: 'Jockey One', 'Segoe UI', sans-serif;
}

/* Tailwind Custom Classes */
.bg-primary1 {
  background-color: var(--primary1) !important;
}

.bg-primary2 {
  background-color: var(--accent1) !important;
}

.bg-primary3 {
  background-color: var(--accent2) !important;
  background-color: rgba(139, 92, 246, 0.2) !important; /* Semi-transparent */
}

.bg-primary4 {
  background-color: var(--accent3) !important;
}

.text-primary1 {
  color: var(--text-primary) !important;
}

.text-primary2 {
  color: var(--accent1) !important;
}

.text-primary3 {
  color: var(--accent2) !important;
}

.border-primary1 {
  border-color: var(--primary2) !important;
}

.border-primary2 {
  border-color: var(--accent1) !important;
}

.border-primary3 {
  border-color: var(--accent2) !important;
}

/* ==========================================
   BUTTON STYLES
   ========================================== */

button {
  transition: all 0.3s ease;
}

.bg-gradient-to-b {
  background: var(--gradient-main) !important;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 212, 255, 0.4);
}

/* ==========================================
   CARD & CONTAINER STYLES
   ========================================== */

.card {
  background: var(--secondary2);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 12px;
  padding: 16px;
  transition: all 0.3s ease;
}

.card:hover {
  border-color: rgba(0, 212, 255, 0.6);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
}

/* ==========================================
   POPUP/MODAL STYLES
   ========================================== */

.popup-overlay {
  background: rgba(15, 15, 35, 0.95) !important;
  backdrop-filter: blur(8px);
}

.popup-content {
  background: var(--gradient-dark);
  border: 2px solid var(--accent1);
  box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
  border-radius: 16px;
}

.close-popup {
  background: var(--accent1) !important;
  color: var(--primary1) !important;
  border: none !important;
  font-weight: 800;
  transition: all 0.3s ease;
}

.close-popup:hover {
  background: var(--accent3) !important;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.5);
}

/* ==========================================
   AD SLOT STYLES
   ========================================== */

.adslot-top,
.adslot-bottom {
  background: rgba(139, 92, 246, 0.1);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 8px;
  padding: 10px;
}

.adslot-popup {
  background: rgba(0, 212, 255, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.adsbygoogle {
  max-width: 100%;
}

/* ==========================================
   SCROLLBAR STYLING
   ========================================== */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--primary1);
}

::-webkit-scrollbar-thumb {
  background: var(--accent2);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent1);
}

/* ==========================================
   LINKS & INTERACTIVE ELEMENTS
   ========================================== */

a {
  color: var(--accent1);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  color: var(--accent3);
  text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
}

/* ==========================================
   INPUT FIELDS
   ========================================== */

input,
textarea,
select {
  background: var(--secondary2);
  color: var(--text-primary);
  border: 1px solid rgba(0, 212, 255, 0.2);
  border-radius: 8px;
  padding: 10px 12px;
  transition: all 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent1);
  box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
  outline: none;
}

/* ==========================================
   LOADING & ANIMATION
   ========================================== */

@keyframes glow {
  0%, 100% {
    text-shadow: 0 0 10px rgba(0, 212, 255, 0.5);
  }
  50% {
    text-shadow: 0 0 20px rgba(139, 92, 246, 0.8);
  }
}

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

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 rgba(0, 212, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.8);
  }
}

/* ==========================================
   RESPONSIVE DESIGN
   ========================================== */

@media (max-width: 640px) {
  body {
    font-size: 14px;
  }
  
  button {
    padding: 10px 16px;
  }
}

/* ==========================================
   DARK MODE SUPPORT
   ========================================== */

@media (prefers-color-scheme: light) {
  :root {
    --primary1: #ffffff;
    --secondary1: #f5f5f7;
    --secondary2: #e8e8ed;
    --text-primary: #1a1a2e;
    --text-secondary: #666;
  }
}