/* ========================================
   EFFECTS & ANIMATIONS
======================================== */

/* Red Border Flash Effect */
@keyframes borderFlash {
  0% {
    border-color: var(--bg-a);
    box-shadow: inset 0 -20px 60px rgba(2,6,23,0.25), 0 0 0 0 rgba(255,0,0,0);
  }
  20% {
    border-color: rgba(255,60,60,1);
    box-shadow: inset 0 -20px 60px rgba(2,6,23,0.25), 0 0 40px 15px rgba(255,0,0,0.8);
  }
  50% {
    border-color: rgba(255,60,60,1);
    box-shadow: inset 0 -20px 60px rgba(2,6,23,0.25), 0 0 40px 15px rgba(255,0,0,0.8);
  }
  80% {
    border-color: rgba(255,60,60,1);
    box-shadow: inset 0 -20px 60px rgba(2,6,23,0.25), 0 0 40px 15px rgba(255,0,0,0.8);
  }
  100% {
    border-color: var(--bg-a);
    box-shadow: inset 0 -20px 60px rgba(2,6,23,0.25), 0 0 0 0 rgba(255,0,0,0);
  }
}

.play-area.flash-border {
  animation: borderFlash 2s ease-in-out forwards;
}

/* Sentence Warning Shake */
@keyframes sentenceShake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-4px, 2px); }
  20% { transform: translate(4px, -2px); }
  30% { transform: translate(-4px, -2px); }
  40% { transform: translate(4px, 2px); }
  50% { transform: translate(-4px, 2px); }
  60% { transform: translate(4px, -2px); }
  70% { transform: translate(-4px, -2px); }
  80% { transform: translate(4px, 2px); }
  90% { transform: translate(-2px, 0); }
}

.play-area.sentence-warning {
  animation: sentenceShake 0.6s ease-in-out;
}

/* Explosion Pieces */
.piece {
  position: absolute;
  font-size: 34px;
  font-weight: 900;
  color: var(--accent-blu);
  pointer-events: none;
  text-shadow: 0 6px 18px rgba(61,224,255,0.08);
  z-index: 80;
}

.center-piece-large {
  position: absolute;
  font-weight: 900;
  color: var(--accent-blu);
  pointer-events: none;
  z-index: 220;
  will-change: transform, opacity;
  text-shadow: 0 10px 30px rgba(61,224,255,0.12);
  -webkit-text-stroke: 1px rgba(0,0,0,0.15);
  mix-blend-mode: screen;
}

.center-piece-large.golden {
  color: #7a4a00;
  text-shadow: 0 12px 48px rgba(255,209,102,0.20);
}

.center-piece-large.sentence {
  color: #0f5132;
  text-shadow: 0 12px 48px rgba(74,222,128,0.20);
}

/* Floating Text (+$) */
#floating-container { 
  position: fixed; 
  inset: 0; 
  pointer-events: none; 
  z-index: 60; 
}

.floating {
  position: absolute;
  font-weight: 900;
  color: var(--accent1);
  pointer-events: none;
  z-index: 70;
  opacity: 1;
  text-shadow: 0 6px 18px rgba(255,209,102,0.08);
  transform-origin: center;
}