:root {
  --danger: #ff2222;
  --amber: #ffaa00;
  --green: #00ff66;
  --bg: #0a0a0a;
  --bomb-black: #1a1a1a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: #e0e0e0;
  font-family: 'Oswald', sans-serif;
  overflow-x: hidden;
  min-height: 100vh;
}

@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(2.5); opacity: 0; }
}

@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  10% { transform: translate(-8px, -6px) rotate(-1deg); }
  20% { transform: translate(8px, 4px) rotate(1deg); }
  30% { transform: translate(-6px, 8px) rotate(-0.5deg); }
  40% { transform: translate(6px, -4px) rotate(0.5deg); }
  50% { transform: translate(-4px, 6px) rotate(-1deg); }
  60% { transform: translate(4px, -8px) rotate(1deg); }
  70% { transform: translate(-8px, 4px) rotate(-0.5deg); }
  80% { transform: translate(8px, -6px) rotate(0.5deg); }
  90% { transform: translate(-4px, -4px) rotate(0); }
}

@keyframes shake-small {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}

@keyframes glow-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
  75% { opacity: 0.9; }
  90% { opacity: 0.5; }
}

@keyframes fuse-spark {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.5); }
}

@keyframes explosion-flash {
  0% { opacity: 1; background: white; }
  30% { opacity: 1; background: #ff4400; }
  100% { opacity: 0; background: transparent; }
}

@keyframes explosion-particle {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

@keyframes confetti-fall {
  0% { transform: translate(0, -20px) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--drift), 100vh) rotate(720deg); opacity: 0; }
}

@keyframes vignette-pulse {
  0%, 100% { opacity: var(--vig-min, 0); }
  50% { opacity: var(--vig-max, 0); }
}

@keyframes letter-reveal {
  0% { transform: scale(1.4); color: var(--green); text-shadow: 0 0 20px var(--green); }
  100% { transform: scale(1); color: #e0e0e0; text-shadow: none; }
}

@keyframes key-correct {
  0% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

@keyframes key-wrong {
  0% { transform: translateX(-3px); }
  25% { transform: translateX(3px); }
  50% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}

@keyframes bomb-tick {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}

@keyframes charred-reveal {
  0% { opacity: 0; transform: scale(0.5); filter: blur(10px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes wire-snip {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(1.1); }
  100% { transform: scaleY(0.3) translateY(10px); opacity: 0.5; }
}

@keyframes emergency-btn {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 34, 34, 0.5); }
  50% { box-shadow: 0 0 40px rgba(255, 34, 34, 0.9); }
}

@keyframes defuse-glow {
  0%, 100% { box-shadow: 0 0 30px rgba(0, 255, 102, 0.3); }
  50% { box-shadow: 0 0 60px rgba(0, 255, 102, 0.7); }
}

.shaking {
  animation: screen-shake 0.5s ease-in-out;
}

.shake-small {
  animation: shake-small 0.3s ease-in-out;
}

.vignette-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 50;
  background: radial-gradient(ellipse at center, transparent 50%, var(--danger) 150%);
  animation: vignette-pulse 1s ease-in-out infinite;
}

.explosion-overlay {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  animation: explosion-flash 1s ease-out forwards;
}

.led-text {
  font-family: 'VT323', monospace;
  color: var(--danger);
  text-shadow: 0 0 10px var(--danger), 0 0 20px rgba(255, 34, 34, 0.5);
}

.stencil-font {
  font-family: 'Oswald', sans-serif;
  font-weight: 900;
  letter-spacing: 4px;
  text-transform: uppercase;
}

.mono-font {
  font-family: 'Share Tech Mono', monospace;
}