:root {
    --neon-orange: #FF8C00;
    --neon-blue: #1E90FF;
    --neon-cyan: #2EFFBE;
    --void: #000000;
  }

  * { box-sizing: border-box; }

  html, body {
    background: var(--void);
    color: #fff;
    font-family: 'Rajdhani', system-ui, sans-serif;
    overflow-x: hidden;
  }

  .font-display { font-family: 'Orbitron', system-ui, sans-serif; letter-spacing: 0.04em; }

  /* Animated grid background */
  .grid-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image:
      linear-gradient(rgba(46, 255, 190, 0.07) 1px, transparent 1px),
      linear-gradient(90deg, rgba(30, 144, 255, 0.07) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
    pointer-events: none;
  }

  .scanline::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(
      0deg,
      rgba(0,0,0,0) 0px,
      rgba(0,0,0,0) 2px,
      rgba(255,255,255,0.015) 3px,
      rgba(0,0,0,0) 4px
    );
  }

  .neon-text-cyan {
    color: var(--neon-cyan);
    text-shadow:
      0 0 4px var(--neon-cyan),
      0 0 12px rgba(46, 255, 190, 0.6),
      0 0 24px rgba(46, 255, 190, 0.4);
  }
  .neon-text-orange {
    color: var(--neon-orange);
    text-shadow:
      0 0 4px var(--neon-orange),
      0 0 12px rgba(255, 140, 0, 0.6),
      0 0 24px rgba(255, 140, 0, 0.4);
  }
  .neon-text-blue {
    color: var(--neon-blue);
    text-shadow:
      0 0 4px var(--neon-blue),
      0 0 12px rgba(30, 144, 255, 0.6),
      0 0 24px rgba(30, 144, 255, 0.4);
  }
  .neon-text-orange-s { 
    color: var(--neon-orange); 
    text-shadow: 0 0 4px var(--neon-orange), 0 0 12px rgba(255, 140, 0, 0.6), 0 0 24px rgba(255, 140, 0, 0.4); 
    font-size: 0.7em; 
}
.neon-text-blue-s { 
    color: var(--neon-blue); 
    text-shadow: 0 0 4px var(--neon-blue), 0 0 12px rgba(255, 140, 0, 0.6), 0 0 24px rgba(255, 140, 0, 0.4); 
    font-size: 0.6.5em; 
}

  .neon-border-cyan {
    box-shadow:
      0 0 0 1px var(--neon-cyan),
      0 0 12px rgba(46, 255, 190, 0.4),
      inset 0 0 12px rgba(46, 255, 190, 0.15);
  }
  .neon-border-orange {
    box-shadow:
      0 0 0 1px var(--neon-orange),
      0 0 14px rgba(255, 140, 0, 0.45),
      inset 0 0 14px rgba(255, 140, 0, 0.15);
  }
  .neon-border-blue {
    box-shadow:
      0 0 0 1px var(--neon-blue),
      0 0 14px rgba(30, 144, 255, 0.45),
      inset 0 0 14px rgba(30, 144, 255, 0.15);
  }

  .neon-btn {
    position: relative;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 700;
  }
  .neon-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.15);
  }
  .neon-btn:active { transform: translateY(0); }

  .btn-cyan {
    background: var(--neon-cyan);
    color: #000;
    box-shadow:
      0 0 0 1px var(--neon-cyan),
      0 0 18px rgba(46, 255, 190, 0.7),
      0 0 36px rgba(46, 255, 190, 0.35);
  }
  .btn-cyan:hover {
    box-shadow:
      0 0 0 1px var(--neon-cyan),
      0 0 26px rgba(46, 255, 190, 0.9),
      0 0 50px rgba(46, 255, 190, 0.55);
  }
  .btn-orange {
    background: var(--neon-orange);
    color: #000;
    box-shadow:
      0 0 0 1px var(--neon-orange),
      0 0 18px rgba(255, 140, 0, 0.7),
      0 0 36px rgba(255, 140, 0, 0.35);
  }
  .btn-orange:hover {
    box-shadow:
      0 0 0 1px var(--neon-orange),
      0 0 26px rgba(255, 140, 0, 0.9),
      0 0 50px rgba(255, 140, 0, 0.55);
  }
  .btn-ghost {
    background: transparent;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
  }
  .btn-ghost:hover {
    border-color: var(--neon-blue);
    color: var(--neon-blue);
    box-shadow: 0 0 16px rgba(30, 144, 255, 0.5);
  }

  .card {
    background: linear-gradient(160deg, rgba(30, 144, 255, 0.08), rgba(255, 140, 0, 0.05) 60%, rgba(46, 255, 190, 0.08));
    backdrop-filter: blur(6px);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .card:hover {
    transform: translateY(-6px);
  }

  .tilt-art {
    aspect-ratio: 4/3;
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .tilt-art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.65));
  }

  .pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--neon-cyan);
    box-shadow: 0 0 10px var(--neon-cyan);
    animation: pulse 1.6s ease-in-out infinite;
  }
  @keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: 0.6; }
  }

  .glitch {
    position: relative;
    display: inline-block;
  }
  .glitch::before, .glitch::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .glitch::before {
    color: var(--neon-blue);
    transform: translate(-2px, 0);
    mix-blend-mode: screen;
    opacity: 0.7;
    animation: glitchA 3s infinite linear alternate;
  }
  .glitch::after {
    color: var(--neon-orange);
    transform: translate(2px, 0);
    mix-blend-mode: screen;
    opacity: 0.7;
    animation: glitchB 2.4s infinite linear alternate;
  }
  @keyframes glitchA {
    0%, 92%, 100% { transform: translate(-2px, 0); }
    93% { transform: translate(-4px, -1px); }
    95% { transform: translate(0, 1px); }
  }
  @keyframes glitchB {
    0%, 90%, 100% { transform: translate(2px, 0); }
    91% { transform: translate(4px, 1px); }
    94% { transform: translate(-1px, -1px); }
  }

  .marquee {
    display: flex;
    gap: 3rem;
    animation: scroll 25s linear infinite;
    width: max-content;
  }
  @keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  .tag {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }

  /* Hero gradient blobs */
  .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.55;
    pointer-events: none;
  }

  /* Sticky floating top bar */
  .site-header {
    position: fixed;
    top: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 1.5rem);
    max-width: 80rem;
    z-index: 50;
    border-radius: 1.25rem;
    background: #000000;
    transition: background-color 5s ease-out, backdrop-filter 5s ease-out, box-shadow 5s ease-out;
  }
  @media (min-width: 640px) {
    .site-header {
      top: 1rem;
      width: calc(100% - 3rem);
    }
  }

  /* Mobile menu */
  .mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }
  .mobile-menu.open { max-height: 500px; }

  /* Stat counter */
  .stat-num {
    font-family: 'Orbitron', sans-serif;
    font-weight: 900;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
  }

  /* Glow divider */
  .glow-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--neon-cyan), var(--neon-blue), transparent);
    box-shadow: 0 0 12px rgba(46, 255, 190, 0.5);
  }

  /* Logo glow */
  .logo-glow {
    filter: drop-shadow(0 0 8px rgba(46, 255, 190, 0.6)) drop-shadow(0 0 18px rgba(30, 144, 255, 0.4));
  }

  /* Active category pill */
  .cat-pill {
    transition: all 0.2s ease;
    cursor: pointer;
  }
  .cat-pill.active {
    background: var(--neon-cyan);
    color: #000;
    box-shadow: 0 0 18px rgba(46, 255, 190, 0.6);
  }

  /* Subtle hover for game cards */
  .game-card .play-overlay {
    opacity: 0;
    transition: opacity 0.25s ease;
  }
  .game-card:hover .play-overlay {
    opacity: 1;
  }