/* === ANIMATIONS (price flashes etc.) === */
.flash-up { animation: flashUp 1.5s ease; }
.flash-down { animation: flashDown 1.5s ease; }
@keyframes flashUp {
  0% { background-color: rgba(0, 255, 0, 0.25); }
  100% { background-color: inherit; }
}
@keyframes flashDown {
  0% { background-color: rgba(255, 0, 0, 0.25); }
  100% { background-color: inherit; }
}

/* === CRASH EVENT VISUAL PACK === */

/* Whole-screen shake */
body.crash {
  animation: screenShake 0.4s ease-in-out infinite;
}

@keyframes screenShake {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(4px, -2px); }
  50% { transform: translate(-4px, 3px); }
  75% { transform: translate(-2px, -3px); }
}

/* Red flash overlay */
body.crash::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 0, 0, 0.3);
  pointer-events: none;
  animation: crashFlash 0.25s ease alternate 8;
  z-index: 9999;
}

@keyframes crashFlash {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Glitching title and prices */
body.crash #title,
body.crash #prod-list td[data-price] {
  animation: textGlitch 0.15s steps(2) infinite;
}

@keyframes textGlitch {
  0% { color: #ff4444; transform: skewX(10deg); text-shadow: 2px 0 #f00; }
  50% { color: #fff; transform: skewX(-10deg); text-shadow: -2px 0 #0ff; }
  100% { color: #ff4444; transform: skewX(10deg); text-shadow: 2px 0 #f00; }
}

/* Matrix rain overlay */
.matrix-rain {
  position: fixed;
  inset: 0;
  background-image: repeating-linear-gradient(
    180deg,
    rgba(0, 255, 0, 0.05) 0px,
    rgba(0, 255, 0, 0.05) 2px,
    transparent 2px,
    transparent 4px
  );
  animation: rainMove 0.2s linear infinite;
  pointer-events: none;
  mix-blend-mode: lighten;
  z-index: 9998;
}

@keyframes rainMove {
  to { background-position-y: 10px; }
}

.crash-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
  font-family: system-ui, sans-serif;
  text-align: center;
  animation: fadeIn 0.3s ease;
}

.crash-title {
  font-size: 2.5rem;
  color: #ff4040;
  text-shadow: 0 0 10px #f00;
  font-weight: bold;
  /* margin-bottom: 1rem; */
}

.crash-countdown {
  font-size: 1.8rem;
  color: #fff;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.event-indicator{ 
  margin: 20px !important;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
}


.float-msg {
  position: fixed;
  bottom: -20px;
  font-size: 1.8rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 0 6px rgba(0,0,0,0.5);
  opacity: 0;
  transform: translateY(0);
  transition: transform 10s ease-out, opacity 5s ease-out;
  z-index: 9999;
  pointer-events: none;
}

.float-msg.animate {
  transform: translateY(-120vh);
  opacity: 1;
}
.float-emoji {
  position: fixed;
  bottom: 10px;
  transform: translate(0, 0) rotate(0);
  opacity: 0;
  z-index: 9999;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
  transition:
    transform 1.3s cubic-bezier(0.25, 0.8, 0.4, 1.2),
    opacity 1.3s ease-out;
}

.float-emoji.throw {
  opacity: 1;
  transform: translate(var(--x), var(--y)) rotate(var(--r));
}