/* =====================================================
   EL CULEBRAS — Custom CSS
   (todo lo que Tailwind no cubre inline)
   ===================================================== */

/* ---------- Background grid ---------- */
#bg-grid {
  background-image:
    linear-gradient(rgba(57,255,20,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57,255,20,0.04) 1px, transparent 1px);
  background-size: 32px 32px;
  animation: gridPan 20s linear infinite;
}

@keyframes gridPan {
  0%   { background-position: 0 0; }
  100% { background-position: 32px 32px; }
}

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #050a0e; }
::-webkit-scrollbar-thumb { background: #39ff1444; border-radius: 3px; }

/* ---------- D-Pad buttons ---------- */
.dpad-btn {
  width: 3rem;
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(57,255,20,0.08);
  border: 1px solid rgba(57,255,20,0.35);
  border-radius: 0.5rem;
  color: #39ff14;
  transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.dpad-btn:active {
  background: rgba(57,255,20,0.25);
  transform: scale(0.9);
}

/* ---------- Score card pulse on update ---------- */
.score-card.popping {
  animation: scorePop 0.3s ease-out;
}

@keyframes scorePop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* ---------- Difficulty buttons ---------- */
.diff-btn.active {
  border-color: #00f0ff;
  background: rgba(0,240,255,0.15);
  color: #00f0ff;
  box-shadow: 0 0 8px #00f0ff66;
}

/* ---------- Canvas responsive ---------- */
#gameCanvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  max-width: 100%;
  height: auto;
}

/* ---------- Particle ---------- */
.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: particleFly 0.7s ease-out forwards;
}

@keyframes particleFly {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0); }
}

/* ---------- Screen overlays ---------- */
.screen-panel {
  animation: fadeIn 0.35s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- CRT scanlines (subtle) ---------- */
#canvas-wrapper::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.07) 2px,
    rgba(0,0,0,0.07) 4px
  );
  pointer-events: none;
  border-radius: 0.75rem;
  z-index: 1;
}

/* ---------- Responsive canvas wrapper ---------- */
@media (max-width: 640px) {
  #canvas-wrapper {
    max-width: 340px;
    margin: 0 auto;
  }
}

/* ---------- Glow text helper ---------- */
.glow-green { text-shadow: 0 0 8px #39ff14, 0 0 20px #39ff14; }
.glow-blue  { text-shadow: 0 0 8px #00f0ff, 0 0 20px #00f0ff; }
.glow-pink  { text-shadow: 0 0 8px #ff2d78, 0 0 20px #ff2d78; }