/* DarkGameCore — Matrix-inspired theme layer (additive; does not remove existing styles) */

:root {
  /* Neon teal (Matrix-style accent) */
  --neon-teal: #20b2aa;
  --neon-teal-dim: #1a9a93;
  --neon-teal-glow: rgba(32, 178, 170, 0.45);
  --neon-teal-soft: rgba(32, 178, 170, 0.18);
  /* Neon orange (accent for CTAs / highlights) */
  --neon-orange: #ff8c00;
  --neon-orange-dim: #e67e00;
  --neon-orange-glow: rgba(255, 140, 0, 0.45);
  --neon-orange-soft: rgba(255, 140, 0, 0.18);
}

/* Canvas sits behind all content */
#matrix-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

body {
  position: relative;
  z-index: 1;
}

.site-header,
main,
.site-footer,
.panel-overlay .panel,
.modal .modal-box {
  position: relative;
  z-index: 1;
}

/* Subtle scanline overlay (optional Matrix feel) */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 2px,
    rgba(0, 0, 0, 0.03) 4px
  );
  opacity: 0.4;
}

/* Header: Matrix-style border glow */
.site-header {
  border-bottom-color: var(--neon-teal);
  box-shadow: 0 0 20px var(--neon-teal-soft), 0 0 40px rgba(57, 255, 20, 0.08);
}

.nav-main a:hover {
  color: var(--neon-teal);
  text-shadow: 0 0 8px var(--neon-teal-glow);
}

/* Hero: teal/green blend + subtle radial glow */
.hero-bg {
  box-shadow: inset 0 0 80px var(--neon-green-soft), inset 0 0 120px var(--neon-teal-soft);
  background-image:
    linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-dark) 70%),
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(32, 178, 170, 0.07) 0%, transparent 55%);
}

.hero-text h1 {
  text-shadow: 0 0 20px var(--neon-blue-soft), 0 0 30px var(--neon-teal-soft);
}

/* About cards: alternate teal/orange accent on hover */
.about-card:nth-child(1):hover { box-shadow: 0 0 20px var(--neon-green-soft), 0 0 15px var(--neon-teal-soft); }
.about-card:nth-child(2):hover { box-shadow: 0 0 20px var(--neon-orange-soft), 0 0 15px var(--neon-red-soft); }
.about-card:nth-child(3):hover { box-shadow: 0 0 20px var(--neon-blue-soft), 0 0 15px var(--neon-teal-soft); }

/* Game cards: teal border glow on hover */
.game-card:hover {
  border-color: var(--neon-teal);
  box-shadow: 0 0 24px var(--neon-teal-glow), 0 0 15px var(--neon-blue-soft);
}

.game-title {
  text-shadow: 0 0 8px var(--neon-blue-glow), 0 0 4px var(--neon-teal-soft);
}

/* Featured cards: green + orange accent */
.featured-card:hover {
  border-color: var(--neon-green);
  box-shadow: 0 0 20px var(--neon-green-soft), 0 0 12px var(--neon-orange-soft);
}

/* FAQ: teal focus */
.faq-item summary:hover {
  color: var(--neon-teal);
}

.faq-item[open] summary {
  color: var(--neon-teal);
  text-shadow: 0 0 8px var(--neon-teal-glow);
}

.faq-item summary::after {
  color: var(--neon-teal);
  text-shadow: 0 0 8px var(--neon-teal-glow);
}

/* Socials: orange/red blend */
.social-link:hover {
  border-color: var(--neon-orange);
  color: var(--neon-orange);
  box-shadow: 0 0 15px var(--neon-orange-soft), 0 0 10px var(--neon-red-soft);
}

/* Footer: teal undertone */
.site-footer {
  box-shadow: 0 -1px 0 var(--neon-teal-soft);
}

/* ——— Tabs (Member+ & Staff): Matrix-themed ——— */
#member-panel .member-tab:hover {
  color: var(--neon-teal);
}

#member-panel .member-tab.active {
  color: var(--neon-green);
  border-bottom-color: var(--neon-green);
  text-shadow: 0 0 10px var(--neon-green-glow);
}

#staff-panel .staff-admin-tab:hover {
  color: var(--neon-teal);
}

#staff-panel .staff-admin-tab.active {
  color: var(--neon-green);
  border-bottom-color: var(--neon-green);
  text-shadow: 0 0 8px var(--neon-green-glow);
}

.member-content-tab:hover {
  color: var(--neon-teal);
}

.member-content-tab.active {
  color: var(--neon-green);
  border-bottom-color: var(--neon-green);
  text-shadow: 0 0 6px var(--neon-green-glow);
}

/* Buttons: primary keep green; ghost hover can use teal */
.btn-ghost:hover {
  border-color: var(--neon-teal);
  box-shadow: 0 0 12px var(--neon-teal-soft);
}

/* Modal: teal border glow */
.modal-box {
  border-color: var(--neon-teal);
  box-shadow: 0 0 40px var(--neon-teal-soft), 0 0 25px var(--neon-green-soft), 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Panel borders: green + teal glow */
.panel {
  border-color: var(--neon-green);
  box-shadow: 0 0 35px var(--neon-green-soft), 0 0 20px var(--neon-teal-soft), 0 20px 60px rgba(0, 0, 0, 0.5);
}

/* Link accent */
.link:hover {
  text-shadow: 0 0 12px var(--neon-green-glow), 0 0 6px var(--neon-teal-soft);
}

/* Section headings: subtle teal glow */
.section h2 {
  text-shadow: 0 0 15px var(--neon-green-soft), 0 0 8px var(--neon-teal-soft);
}