/* ============================================================
   TILE FLIP (reveal)
   ============================================================ */
@keyframes tile-flip {
  0%   { transform: scale(1) rotateY(0deg); }
  35%  { transform: scale(0.88) rotateY(90deg); }
  65%  { transform: scale(0.88) rotateY(90deg); }
  100% { transform: scale(1) rotateY(0deg); }
}

.tile-flip {
  animation: tile-flip 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   SCREEN SHAKE (bomb)
   ============================================================ */
@keyframes screen-shake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  15%       { transform: translate(-7px, -3px) rotate(-0.8deg); }
  30%       { transform: translate(7px,  3px) rotate(0.8deg); }
  45%       { transform: translate(-5px, 2px) rotate(-0.4deg); }
  60%       { transform: translate(4px, -2px) rotate(0.4deg); }
  75%       { transform: translate(-2px, 1px); }
}

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

/* ============================================================
   BUBBLE POP (spot revealed)
   ============================================================ */
@keyframes bubble-pop {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.18); }
  55%  { transform: scale(0.94); }
  80%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

.tile.bomb {
  animation: bubble-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ============================================================
   LATE BOMB REVEAL (other bombs shown after defeat)
   ============================================================ */
@keyframes bomb-late-reveal {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 0.75; transform: scale(1); }
}

.tile.bomb-late {
  animation: bomb-late-reveal 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) forwards;
}

/* ============================================================
   FLOATING POINT
   ============================================================ */
@keyframes float-up {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  55%  { opacity: 1; transform: translateY(-36px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-64px) scale(0.85); }
}

.float-point {
  animation: float-up 0.9s ease-out forwards;
}

/* ============================================================
   SCORE PULSE
   ============================================================ */
@keyframes pulse-scale {
  0%, 100% { transform: scale(1); }
  45%       { transform: scale(1.28); }
}

.score-pulse {
  animation: pulse-scale 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: inline-block;
}

/* ============================================================
   GUARANTEE BUTTON READY PULSE
   ============================================================ */
@keyframes pulse-green {
  0%, 100% {
    box-shadow:
      inset 0 4px 10px rgba(255,255,255,0.88),
      inset 0 -5px 12px rgba(5,80,65,0.42),
      0 6px 20px rgba(28,166,148,0.52),
      0 3px 8px rgba(10,100,85,0.35);
  }
  50% {
    box-shadow:
      inset 0 4px 10px rgba(255,255,255,0.88),
      inset 0 -5px 12px rgba(5,80,65,0.42),
      0 10px 30px rgba(28,166,148,0.72),
      0 0 0 8px rgba(28,166,148,0.16),
      0 3px 8px rgba(10,100,85,0.35);
  }
}

/* ============================================================
   OVERLAY CARD ENTRANCE
   ============================================================ */
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.overlay:not(.hidden) .card {
  animation: card-in 0.28s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ============================================================
   SHIELD FLASH
   ============================================================ */
@keyframes shield-flash {
  0%   { filter: brightness(1); }
  40%  { filter: brightness(1.8) saturate(0.2); }
  100% { filter: brightness(1); }
}

.tile.shield-hit {
  animation: shield-flash 0.4s ease-out;
}

/* ============================================================
   XRAY REVEAL
   ============================================================ */
@keyframes xray-reveal {
  from { opacity: 0; transform: scaleY(0.6); }
  to   { opacity: 1; transform: scaleY(1); }
}

.tile.xray-revealed {
  animation: xray-reveal 0.22s cubic-bezier(0.34, 1.4, 0.64, 1);
}

/* ============================================================
   REVEAL-AROUND SELECTION MODE
   Pulse revealed tiles so player knows which to tap
   ============================================================ */
@keyframes reveal-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,220,80,0); }
  50%       { box-shadow: 0 0 0 4px rgba(255,220,80,0.65); }
}

.board.choosing-reveal .tile.revealed:not(.bomb) {
  animation: reveal-pulse 1s ease-in-out infinite;
  cursor: pointer;
}

/* ============================================================
   LEVEL CARD HOVER
   ============================================================ */
@media (hover: hover) {
  .level-card:not(.locked):hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
      inset 0 4px 10px rgba(255,255,255,0.85),
      inset 0 -5px 12px rgba(15,70,160,0.4),
      0 12px 28px rgba(30,110,200,0.55),
      0 4px 10px rgba(10,60,150,0.35);
  }
}