/* DevGrail Game Center - Cool Gamey Cyber Arcade Theme */

body[data-theme="arcade"] {
  --bg-color: #080a16;
  --header-bg: rgba(10, 13, 28, 0.88);
  --text-color: #f1f5f9;
  --text-muted: #94a3b8;
  --border-color: rgba(0, 240, 255, 0.22);
  --card-bg: rgba(13, 17, 38, 0.85);
  --card-border: rgba(0, 240, 255, 0.18);
  --card-shadow: rgba(0, 0, 0, 0.6);
  --card-hover-shadow: rgba(0, 240, 255, 0.25);
  --card-title-color: #ffffff;

  --accent-primary: #00f0ff;
  --accent-secondary: #ff007f;
  --accent-gradient: linear-gradient(135deg, #00f0ff 0%, #ff007f 100%);
  --accent-glow: rgba(0, 240, 255, 0.45);

  --logo-text-gradient: linear-gradient(90deg, #00f0ff, #ff007f);

  --pill-bg: rgba(18, 24, 52, 0.9);
  --pill-border: rgba(0, 240, 255, 0.3);
  --shadow-color: rgba(0, 0, 0, 0.5);

  --active-theme-bg: linear-gradient(135deg, #00f0ff 0%, #0284c7 100%);
  --active-theme-color: #030712;
  --active-theme-glow: rgba(0, 240, 255, 0.6);

  --hero-card-bg: linear-gradient(135deg, rgba(16, 21, 46, 0.95) 0%, rgba(26, 16, 46, 0.95) 100%);
  --hero-card-border: rgba(0, 240, 255, 0.35);
  --hero-shadow: rgba(0, 240, 255, 0.15);
  --featured-title-gradient: linear-gradient(90deg, #00f0ff 0%, #e0e7ff 50%, #ff007f 100%);

  --badge-featured-bg: rgba(255, 0, 127, 0.18);
  --badge-featured-color: #ff007f;
  --badge-featured-border: rgba(255, 0, 127, 0.45);
  --badge-featured-glow: rgba(255, 0, 127, 0.3);

  --tag-bg: rgba(0, 240, 255, 0.08);
  --tag-border: rgba(0, 240, 255, 0.2);

  --btn-primary-bg: linear-gradient(135deg, #00f0ff 0%, #0088ff 100%);
  --btn-primary-text: #050814;
  --btn-primary-border: #00f0ff;
  --btn-primary-glow: rgba(0, 240, 255, 0.5);

  --btn-secondary-bg: rgba(20, 27, 58, 0.85);
  --btn-secondary-hover-bg: rgba(30, 41, 86, 0.95);

  --featured-art-bg: radial-gradient(circle at center, rgba(0, 240, 255, 0.15) 0%, rgba(255, 0, 127, 0.1) 60%, transparent 100%);
  --art-glow: rgba(0, 240, 255, 0.4);

  --highlight-box-bg: rgba(0, 240, 255, 0.08);
  --highlight-text-color: #38bdf8;

  --active-filter-bg: rgba(0, 240, 255, 0.18);
  --active-filter-color: #00f0ff;

  --media-bg: linear-gradient(180deg, rgba(20, 26, 56, 0.9) 0%, rgba(10, 13, 30, 0.95) 100%);
}

/* Arcade Theme Specific Flourishes */
body[data-theme="arcade"] .site-header {
  border-bottom: 1px solid rgba(0, 240, 255, 0.25);
  box-shadow: 0 4px 20px rgba(0, 240, 255, 0.06);
}

body[data-theme="arcade"] .game-card:hover {
  border-color: #00f0ff;
  box-shadow: 0 0 25px rgba(0, 240, 255, 0.35);
}

body[data-theme="arcade"] .featured-card {
  box-shadow: 0 0 35px rgba(0, 240, 255, 0.18), inset 0 0 40px rgba(255, 0, 127, 0.08);
}

/* Retro Scanline effect toggle */
body[data-theme="arcade"]::after {
  content: " ";
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.03));
  z-index: 99;
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
  opacity: 0.6;
}

body[data-theme="arcade"] .card-media-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, transparent 30%, rgba(10, 13, 28, 0.7) 100%);
  pointer-events: none;
}