/* ================================
   Neon Arcade – Global Theme
   Medium Glow
   ================================ */

:root {
  --neon-cyan:   #38bdf8;
  --neon-purple: #a855f7;
  --neon-yellow: #facc15;
  --neon-green:  #22c55e;
  --neon-red:    #ef4444;
  --bg-dark-1:   #020617;
  --bg-dark-2:   #020617;
}

/* Page-level neon background (optional) */

body.neon-page {
  background: radial-gradient(circle at 10% 0%, rgba(56,189,248,.08), transparent 55%),
              radial-gradient(circle at 90% 100%, rgba(168,85,247,.12), transparent 55%),
              #020617;
  color: #e5e7eb;
}

/* Game playfield frame */

.neon-playfield {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.45);
  background: radial-gradient(circle at 50% 0%, rgba(56,189,248,.16), transparent 55%),
              linear-gradient(180deg, #020617, #020617);
  overflow: hidden;
  box-shadow:
    0 18px 40px rgba(15,23,42,.9),
    0 0 24px rgba(15,23,42,.8);
}

/* Subtle animated grid overlay */

.neon-playfield::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent 96%, rgba(56,189,248,.22) 100%),
    linear-gradient(90deg, transparent 96%, rgba(56,189,248,.18) 100%);
  background-size: 40px 40px;
  opacity: .22;
  mix-blend-mode: screen;
  pointer-events: none;
  animation: neon-grid 16s linear infinite;
}

@keyframes neon-grid {
  from { transform: translateY(0); }
  to   { transform: translateY(40px); }
}

/* Glow utilities */

.glow-soft {
  filter: drop-shadow(0 0 4px rgba(56,189,248,.4));
}

.glow-med {
  filter: drop-shadow(0 0 10px rgba(56,189,248,.75));
}

.glow-strong {
  filter: drop-shadow(0 0 18px rgba(168,85,247,.9));
}

/* Neon buttons */

.btn-neon {
  background: rgba(15,23,42,.9);
  border: 1px solid rgba(56,189,248,.7);
  color: var(--neon-cyan);
  padding: 8px 20px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background .18s ease, transform .12s ease, box-shadow .18s ease;
  box-shadow: 0 0 10px rgba(56,189,248,.35);
}

.btn-neon:hover {
  background: rgba(15,23,42,1);
  transform: translateY(-1px);
  box-shadow: 0 0 16px rgba(56,189,248,.75);
}

/* Neon score panels */

.neon-panel {
  background: rgba(15,23,42,.9);
  border-radius: 10px;
  padding: 8px 14px;
  border: 1px solid rgba(148,163,184,.6);
  box-shadow: 0 0 12px rgba(15,23,42,.9);
  min-width: 70px;
}

.neon-panel .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #9ca3af;
}

.neon-panel .value {
  font-size: 18px;
  font-weight: 700;
  color: var(--neon-cyan);
}

/* Neon modal style */

.modal .box {
  background: radial-gradient(circle at 0 0, rgba(56,189,248,.12), transparent 55%),
              rgba(15,23,42,.98);
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.7);
  box-shadow:
    0 18px 48px rgba(0,0,0,.9),
    0 0 26px rgba(168,85,247,.6);
}

/* Text helpers */

.text-neon {
  color: var(--neon-cyan);
}
.text-neon-soft {
  color: rgba(148,163,184, .95);
}

/* Tiny pulse used across games (e.g. active tile, superpower ready) */

@keyframes neon-pulse {
  0%   { opacity: 1;   box-shadow: 0 0 8px rgba(56,189,248,.5); }
  50%  { opacity: .8;  box-shadow: 0 0 16px rgba(56,189,248,1); }
  100% { opacity: 1;   box-shadow: 0 0 8px rgba(56,189,248,.5); }
}