/* =========================================================================
   TRAZOS TÁCTICOS QTE DE JEFE

   El trazo entero (riel, pulsos, nodos, retícula, estela y chispas) se pinta
   en un canvas 2D desde `game/boss_qte.js`. Aquí sólo queda el marco: overlay,
   cabecera y rótulos. NO se añaden animaciones infinitas de transformada ni
   filtros: en el WebView de Android cada una repinta el subárbol por CPU y era
   la causa medida de los tirones justo durante el trazo.
   ========================================================================= */

.boss-qte-overlay {
  position: absolute;
  inset: 0;
  pointer-events: auto;
  touch-action: none;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-user-select: none;
  /* Fondo de alto contraste para que los slides tácticos se vean nítidos y sólidos */
  background: radial-gradient(circle at center, rgba(3, 10, 28, 0.76) 0%, rgba(1, 4, 14, 0.92) 100%);
  animation: qteOverlayIn 0.16s cubic-bezier(0.16, 1, 0.3, 1);
  contain: strict;
}

@keyframes qteOverlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.boss-qte-overlay.qte-fizzle {
  animation: qteOverlayOut 0.24s ease-out forwards;
}

@keyframes qteOverlayOut {
  to { opacity: 0; }
}

.boss-qte-overlay.qte-success {
  animation: qteSuccessBlast 0.2s ease-out forwards;
}

@keyframes qteSuccessBlast {
  to { opacity: 0; filter: brightness(2.2); }
}

/* ------------------------------- Cabecera ------------------------------- */
.boss-qte-hud {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.boss-qte-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 99px;
  background: rgba(3, 8, 22, 0.88);
  border: 2px solid #00E5FF;
  box-shadow: 0 0 22px rgba(0, 229, 255, 0.45);
  color: #EAFDFF;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  white-space: nowrap;
}

.boss-qte-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FF2D55;
  box-shadow: 0 0 10px #FF2D55;
  animation: dotPulse 0.7s ease-in-out infinite alternate;
}

@keyframes dotPulse {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}

.boss-qte-time-gauge {
  position: relative;
  width: 200px;
  height: 16px;
  border-radius: 99px;
  background: rgba(3, 8, 22, 0.9);
  border: 2px solid rgba(0, 229, 255, 0.55);
  overflow: hidden;
}

.boss-qte-time-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: linear-gradient(90deg, #FF2D55, #FFD700, #00FFC6);
}

.boss-qte-time-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 900;
  color: #FFF;
  text-shadow: 0 1px 3px #000;
}

/* -------------------------------- Rótulos -------------------------------- */
.boss-qte-hint {
  position: absolute;
  bottom: 13%;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 16px;
  border-radius: 99px;
  background: rgba(3, 8, 22, 0.8);
  border: 1px solid rgba(0, 255, 150, 0.5);
  color: #9CFFD8;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.6px;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.18s linear;
}

.boss-qte-hint.oculto { opacity: 0; }

.boss-qte-veredicto {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFF;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 3px;
  text-shadow: 0 0 20px #00E5FF, 0 0 42px #FFD700, 0 3px 10px #000;
  pointer-events: none;
}

/* ------------------------------ Lienzo del trazo ------------------------------ */
.boss-qte-stage {
  position: relative;
  width: min(94vw, 460px);
  aspect-ratio: 360 / 220;
  pointer-events: none;
}

.boss-qte-canvas {
  width: 100%;
  height: 100%;
  display: block;
}
/* =========================================================================
   BANNER ÉPICO DE GOLPE CRÍTICO MASIVO (PURA DOPAMINA & LUCES)
   ========================================================================= */

.boss-crit-banner {
  position: absolute;
  top: 34%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
  z-index: 300;
  animation: critBannerDopamina 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.boss-crit-badge {
  padding: 8px 26px;
  border-radius: 99px;
  background: linear-gradient(90deg, #FF9900, #FF0055, #9900FF, #00FFCC);
  background-size: 300% 300%;
  animation: rainbowShift 1s linear infinite;
  box-shadow: 0 0 35px rgba(255, 0, 85, 0.8), 0 0 65px rgba(85, 230, 255, 0.6);
  border: 3px solid #FFF;
  color: #FFF;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 15px #FFF;
  white-space: nowrap;
}

@keyframes rainbowShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.boss-crit-damage {
  font-size: 40px;
  font-weight: 900;
  color: #FFF;
  -webkit-text-stroke: 1.5px #FF9900;
  text-shadow: 0 0 25px #FFD700, 0 0 50px #FF0055, 0 4px 12px #000;
  letter-spacing: 1.5px;
  animation: dmgPulse 0.4s ease-out;
}

@keyframes dmgPulse {
  0% { transform: scale(0.6); }
  50% { transform: scale(1.25); }
  100% { transform: scale(1); }
}

@keyframes critBannerDopamina {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  28% { transform: translate(-50%, -50%) scale(1.0); }
  75% { opacity: 1; transform: translate(-50%, -50%) scale(1.03); }
  100% { opacity: 0; transform: translate(-50%, -65%) scale(1.15); }
}