/* ============================================================
   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;
}

/* ============================================================
   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: 0 6px 20px rgba(28,166,148,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  }
  50% {
    box-shadow: 0 8px 28px rgba(28,166,148,0.55), 0 0 0 6px rgba(28,166,148,0.12), inset 0 1px 0 rgba(255,255,255,0.2);
  }
}

/* ============================================================
   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);
}

/* ============================================================
   LEVEL CARD HOVER
   ============================================================ */
@media (hover: hover) {
  .level-card:not(.locked):hover {
    transform: translateY(-2px);
    box-shadow:
      0 6px 18px rgba(0,0,0,0.1),
      0 0 0 1px rgba(0,0,0,0.05);
  }
}