/* ── CSS Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Fullscreen game container: prevent overflow and mobile elastic scrolling ── */
html, body, #root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  background: #111;
}

/* ── Canvas defaults to transparent overlay: video background and separate overlay must show through ── */
canvas { background: transparent; }

/* ── Preset animations ── */

@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-4px, 2px); }
  20% { transform: translate(4px, -2px); }
  30% { transform: translate(-3px, -3px); }
  40% { transform: translate(3px, 3px); }
  50% { transform: translate(-2px, 1px); }
  60% { transform: translate(2px, -1px); }
  70% { transform: translate(-1px, 2px); }
  80% { transform: translate(1px, -1px); }
}
@keyframes float-up {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-60px) scale(1.3); }
}
@keyframes flash {
  0% { opacity: 0.6; }
  100% { opacity: 0; }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 0.4; }
}

.animate-shake      { animation: shake 0.3s ease-out; }
.animate-float-up   { animation: float-up 0.8s ease-out forwards; }
.animate-flash      { animation: flash 0.15s ease-out; }
.animate-pulse-glow { animation: pulse-glow 2s ease-in-out infinite; }

/* ── Button press feedback ── */
.btn-press { transition: transform 0.1s; }
.btn-press:active { transform: scale(0.95); }

/* ── Texture utility classes — apply directly to game background elements ── */

.game-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

.game-scanlines {
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 3px
  );
}

.game-grid {
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 19px, rgba(255,255,255,0.03) 20px),
    repeating-linear-gradient(90deg, transparent, transparent 19px, rgba(255,255,255,0.03) 20px);
}

.game-dots {
  background-image: radial-gradient(circle, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 20px 20px;
}