/* --- Gaming Theme Override --- */
:root {
  --game-bg: #0b0e14;
  --game-card: #161b22;
  --game-accent: #a855f7; /* Purple */
  --game-neon: #06b6d4;   /* Cyan */
}

body {
  background-color: var(--game-bg) !important;
  background-image: 
    linear-gradient(rgba(168, 85, 247, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168, 85, 247, 0.05) 1px, transparent 1px);
  background-size: 30px 30px;
  color: #e5e7eb !important;
}

/* Force Dark Mode on Cards */
.bg-white, .bg-gray-50, .bg-blue-50 {
  background-color: var(--game-card) !important;
  border: 1px solid rgba(168, 85, 247, 0.2) !important;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
}

/* Gaming Glow Buttons */
button, .bg-blue-600 {
  background: linear-gradient(135deg, var(--game-accent), var(--game-neon)) !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.4) !important;
  transition: all 0.3s ease !important;
}

button:hover {
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.6) !important;
  transform: translateY(-2px);
}

/* Animated Title Glow */
h1, h2 {
  color: #fff !important;
  text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

/* Scanline Effect Overlay (Optional) */
body::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0; left: 0; bottom: 0; right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.1) 50%), 
              linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  z-index: 9999;
  background-size: 100% 4px, 3px 100%;
  pointer-events: none;
}

/* --- SPECIFIC GAME THUMBNAIL OVERRIDE --- */

/* 1. Target the main thumbnail container */
.game-thumbnail {
    background-color: var(--game-card) !important;
    border: 2px solid rgba(168, 85, 247, 0.2) !important; /* Purple border */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6) !important;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

/* 2. Selection Effect: Glow and Lift */
.game-thumbnail:hover {
    border-color: var(--game-neon) !important; /* Glows Cyan on hover */
    transform: scale(1.08) !important;
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.5) !important;
    z-index: 20;
}

/* 3. The Title Overlay: Making it pop */
.game-thumbnail .absolute.bottom-0 {
    background: linear-gradient(transparent, rgba(11, 14, 20, 0.95)) !important;
}

.game-thumbnail p {
    color: var(--game-neon) !important; /* Cyan Titles */
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 4. The SVG Play Icon: Make it Purple */
.game-thumbnail svg {
    color: var(--game-accent) !important;
    filter: drop-shadow(0 0 5px var(--game-accent));
}

/* 5. Force the image to fit perfectly */
.game-thumbnail img {
    filter: brightness(0.9) saturate(1.1);
    transition: filter 0.3s ease;
}

.game-thumbnail:hover img {
    filter: brightness(1.1) saturate(1.3);
}