/* ═══════════════════════════════════════
   JuegosDrag — Efectos de Subida de Nivel
   Cargar globalmente (ej. $GLOBAL_AHEADER$)
   <link rel="stylesheet" href="/css/levelup.css">
   ═══════════════════════════════════════ */

/* 1. Terremoto */
@keyframes quake {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-4px, 2px); }
  40%  { transform: translate(4px, -2px); }
  60%  { transform: translate(-4px, -2px); }
  80%  { transform: translate(4px, 2px); }
  100% { transform: translate(0, 0); }
}
.quake-effect {
  animation: quake 0.4s ease-in-out !important;
}

/* 2. Parpadeo Ámbar */
@keyframes blinkArc {
  0%   { background: rgba(255, 171, 0, 0); }
  20%  { background: rgba(255, 171, 0, 0.2); }
  100% { background: rgba(255, 171, 0, 0); }
}
.blink-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  z-index: 2147483646;
  pointer-events: none;
  animation: blinkArc 0.3s ease-in-out 3;
}

/* 3. Sello de Victoria */
@keyframes sealCinematic {
  0%   { transform: translate(-50%, -50%) scale(0.2) rotate(-45deg); opacity: 0; filter: brightness(2) blur(10px); }
  30%  { transform: translate(-50%, -50%) scale(1.1) rotate(0deg); opacity: 1; filter: brightness(1.2) blur(0px) drop-shadow(0 0 40px #ffab00); }
  80%  { transform: translate(-50%, -50%) scale(1); opacity: 0.9; filter: brightness(1); }
  100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; filter: brightness(0.5) blur(5px); }
}
.victory-seal {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px; height: 320px;
  z-index: 2147483645;
  pointer-events: none;
  background: url('/imagenes/iconos/sello.jpg') no-repeat center / contain;
  border-radius: 50%;
  animation: sealCinematic 1.8s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

/* 4. Barra XP */
#exp-bar {
  transition: width 0.8s ease;
}
.bar-gold {
  background-color: #ffab00 !important;
  box-shadow: 0 0 20px #ffab00 !important;
}