/* =========================================================================
   🎮 GAMES OF SPADES - CENTRAL DYNAMIC THEME SYSTEM (theme.css)
   =========================================================================
   CHANGE COLORS HERE IN ONE PLACE TO CHANGE THE ENTIRE WEBSITE!
   All pages across the entire site automatically inherit these variables.
   ========================================================================= */

:root {
  /* ── 1. PRIMARY ACCENT (Electric Cyan & Neon Blue from Logo) ────────── */
  --theme-primary: #00d2ff;
  --theme-primary-hover: #38bdf8;
  --theme-primary-dark: #0284c7;
  --theme-primary-glow: rgba(0, 210, 255, 0.45);
  --theme-primary-glow-lg: 0 0 20px rgba(0, 210, 255, 0.55);
  --theme-primary-subtle: rgba(0, 210, 255, 0.12);
  --theme-primary-border: rgba(0, 210, 255, 0.28);

  /* ── 2. SECONDARY ACCENT (Royal Gold & Amber Crown from Logo) ───────── */
  --theme-gold: #ffb700;
  --theme-gold-hover: #ffd700;
  --theme-gold-dark: #d97706;
  --theme-gold-glow: rgba(255, 183, 0, 0.45);
  --theme-gold-subtle: rgba(255, 183, 0, 0.14);
  --theme-gold-border: rgba(255, 183, 0, 0.32);

  /* ── 3. BACKGROUND & SURFACE COLORS (Deep Space & Midnight Navy) ───── */
  --theme-bg-body: #060919;
  --theme-bg-radial: radial-gradient(ellipse at 50% -10%, #0d1e48 0%, #070d24 50%, #040612 100%);
  --theme-bg-header: linear-gradient(180deg, #0e1a3e 0%, #070d22 100%);
  --theme-bg-card: rgba(13, 23, 56, 0.72);
  --theme-bg-card-hover: rgba(18, 33, 80, 0.95);
  --theme-bg-elevated: #0f1c44;
  --theme-bg-slider: linear-gradient(180deg, #0e1a42 0%, #060c22 100%);
  --theme-bg-slider-fade-left: linear-gradient(90deg, #060c22 0%, transparent 100%);
  --theme-bg-slider-fade-right: linear-gradient(270deg, #060c22 0%, transparent 100%);
  --theme-bg-footer: linear-gradient(180deg, #0b132e 0%, #050816 100%);

  /* ── 4. THEME GRADIENTS ────────────────────────────────────────────── */
  --theme-gradient-primary: linear-gradient(135deg, #00d2ff 0%, #0066ff 100%);
  --theme-gradient-primary-reverse: linear-gradient(135deg, #0066ff 0%, #00d2ff 100%);
  --theme-gradient-gold: linear-gradient(135deg, #ffe066 0%, #ffb700 50%, #f59e0b 100%);
  --theme-gradient-accent: linear-gradient(135deg, #00d2ff 0%, #ffb700 100%);
  --theme-gradient-pill-active: linear-gradient(135deg, rgba(0, 210, 255, 0.35), rgba(0, 114, 255, 0.35));
  --theme-gradient-section-header: linear-gradient(90deg, rgba(0, 210, 255, 0.14) 0%, rgba(255, 183, 0, 0.05) 100%);
  --theme-gradient-badge: linear-gradient(135deg, rgba(0, 210, 255, 0.16), rgba(255, 183, 0, 0.12));

  /* ── 5. TYPOGRAPHY & TEXT COLORS ───────────────────────────────────── */
  --theme-text-main: #f8fafc;
  --theme-text-muted: #94a3b8;
  --theme-text-pill: #e0f2fe;
  --theme-text-gold: #fef08a;

  /* ── 6. BORDERS & SHADOWS ─────────────────────────────────────────── */
  --theme-border-card: rgba(0, 210, 255, 0.2);
  --theme-border-card-hover: rgba(0, 210, 255, 0.55);
  --theme-border-header: rgba(0, 210, 255, 0.24);
  --theme-border-footer: rgba(0, 210, 255, 0.18);
  --theme-shadow-header: 0px 4px 25px rgba(0, 0, 0, 0.85), 0 0 15px rgba(0, 210, 255, 0.18);
  --theme-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.5);
  --theme-shadow-card-hover: 0 8px 30px rgba(0, 210, 255, 0.25), 0 0 15px rgba(0, 210, 255, 0.2);
}

/* Global body & root overrides using theme variables */
body {
  background-color: var(--theme-bg-body) !important;
  background-image: var(--theme-bg-radial) !important;
  background-attachment: fixed !important;
  color: var(--theme-text-main) !important;
}

/* Header & Logo */
.header {
  background: var(--theme-bg-header) !important;
  border-bottom: 1px solid var(--theme-border-header) !important;
  box-shadow: var(--theme-shadow-header) !important;
}

.logo img {
  filter: drop-shadow(0 0 12px var(--theme-primary-glow)) !important;
}

.logo:hover img {
  filter: drop-shadow(0 0 18px var(--theme-primary-glow)) drop-shadow(0 0 8px var(--theme-gold-glow)) !important;
}

.header-badge {
  background: var(--theme-gradient-badge) !important;
  border: 1px solid var(--theme-primary-border) !important;
  color: var(--theme-text-pill) !important;
}

.live-dot {
  background: var(--theme-primary) !important;
  box-shadow: 0 0 10px var(--theme-primary) !important;
}

/* Category Slider */
.category-slider-wrapper {
  background: var(--theme-bg-slider) !important;
  border-bottom: 1px solid var(--theme-primary-border) !important;
}

.category-slider-wrapper::before {
  background: var(--theme-bg-slider-fade-left) !important;
}

.category-slider-wrapper::after {
  background: var(--theme-bg-slider-fade-right) !important;
}

/* Category Pills */
.tag-pill {
  background: var(--theme-primary-subtle) !important;
  border: 1px solid var(--theme-primary-border) !important;
  color: var(--theme-text-pill) !important;
}

.tag-pill:hover,
.tag-pill.active {
  background: var(--theme-gradient-pill-active) !important;
  border-color: var(--theme-primary) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 15px var(--theme-primary-glow) !important;
}

/* Section Header */
.section-header {
  background: var(--theme-gradient-section-header) !important;
  border: 1px solid var(--theme-primary-border) !important;
  border-left: 4px solid var(--theme-primary) !important;
}

.section-heading {
  background: linear-gradient(135deg, #ffffff 0%, var(--theme-text-pill) 40%, var(--theme-primary) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  filter: drop-shadow(0 2px 10px var(--theme-primary-glow)) !important;
}

.section-sub {
  background: var(--theme-primary-subtle) !important;
  border: 1px solid var(--theme-primary-border) !important;
  color: var(--theme-text-pill) !important;
}

/* Game Item Cards */
.game-list-2 .game-item {
  border: 1px solid var(--theme-border-card) !important;
  box-shadow: var(--theme-shadow-card) !important;
}

.game-list-2 .game-item:hover {
  border-color: var(--theme-border-card-hover) !important;
  box-shadow: var(--theme-shadow-card-hover) !important;
}

.game-item:hover .game-title {
  color: var(--theme-primary) !important;
  text-shadow: 0 0 12px var(--theme-primary-glow) !important;
}

.game-item .game-icon::after {
  background: var(--theme-gradient-primary) !important;
  box-shadow: 0 0 25px var(--theme-primary-glow), inset 0 2px 4px rgba(255, 255, 255, 0.5) !important;
}

/* Top 5 Games Highlighting (Royal Gold from Logo Crown) */
.game-list-2 .game-item:nth-child(-n+5) {
  border: 2px solid var(--theme-gold) !important;
  box-shadow: 0 6px 20px var(--theme-gold-glow) !important;
  background: linear-gradient(145deg, #101c44, #070d22) !important;
}

.game-list-2 .game-item:nth-child(-n+5):hover {
  box-shadow: 0 14px 30px var(--theme-gold-glow) !important;
  border-color: var(--theme-gold-hover) !important;
}

.game-list-2 .game-item:nth-child(-n+5)::before {
  background: var(--theme-gradient-gold) !important;
  color: #060919 !important;
  font-weight: 900 !important;
}

/* Play Now & Action Buttons */
.btn-down, a#playNowBtn, .btn-play {
  background: var(--theme-gradient-primary) !important;
  box-shadow: 0 8px 25px var(--theme-primary-glow) !important;
  color: #ffffff !important;
}

.btn-down:hover, a#playNowBtn:hover, .btn-play:hover {
  background: var(--theme-gradient-primary-reverse) !important;
  box-shadow: 0 12px 32px var(--theme-primary-glow), 0 0 15px var(--theme-gold-glow) !important;
}

/* Footer & Navigation */
.site-footer {
  background: var(--theme-bg-footer) !important;
  border-top: 1px solid var(--theme-border-footer) !important;
}

.footer-links a {
  color: var(--theme-primary) !important;
}

.footer-links a:hover {
  color: var(--theme-gold) !important;
  text-shadow: 0 0 10px var(--theme-gold-glow) !important;
}