/* ============================================================
   PvE Defeat Modal — Premium redesign 2026-05-11
   Prefix: dft-*
   Paleta: crimson + ash + bone · cinematic crypt death screen
   Imágenes:
     /assets/ui/defeat_bg.png        → fondo a sangre (cripta gótica)
     /assets/ui/defeat_skull.png     → cráneo central con daga y ojos rojos
     /assets/ui/defeat_gold_lost.png → bolsa de oro derramada
   ============================================================ */

.dft-overlay {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(7px);
  animation: dftFadeIn 0.4s ease-out;
}
@keyframes dftFadeIn {
  from { opacity: 0; backdrop-filter: blur(0); }
  to   { opacity: 1; backdrop-filter: blur(7px); }
}

.dft-panel {
  position: relative;
  width: 100%;
  max-width: 520px;
  max-height: 95vh;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 24px 80px rgba(0,0,0,0.85),
    0 0 60px rgba(180, 30, 50, 0.30),
    0 0 0 2px rgba(140, 30, 40, 0.55);
  animation: dftPanelIn 0.65s cubic-bezier(.2,.9,.3,1.05);
}
@keyframes dftPanelIn {
  from { opacity: 0; transform: translateY(34px) scale(0.92); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.dft-bg {
  position: absolute;
  inset: 0;
  background-image: url('../assets/ui/defeat_bg.webp?v=1');
  background-size: cover;
  background-position: center top;
  z-index: 0;
}
.dft-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 100% at 50% 25%, transparent 0%, rgba(8, 4, 4, 0.55) 60%, rgba(0,0,0,0.95) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.82) 100%);
}

.dft-scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow-y: auto;
  padding: 22px 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  scrollbar-width: thin;
  scrollbar-color: rgba(180,30,50,0.4) transparent;
}
.dft-scroll::-webkit-scrollbar { width: 6px; }
.dft-scroll::-webkit-scrollbar-thumb { background: rgba(180,30,50,0.4); border-radius: 3px; }

/* ============================================================
   HERO — cráneo + título
   ============================================================ */
.dft-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
}

.dft-skull-wrap {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}
.dft-skull-wrap::before {
  content: '';
  position: absolute;
  inset: -25%;
  background: radial-gradient(circle, rgba(200, 30, 50, 0.55) 0%, rgba(120, 18, 30, 0.20) 40%, transparent 70%);
  filter: blur(14px);
  animation: dftAuraPulse 3.4s ease-in-out infinite;
}
.dft-skull-wrap::after {
  content: '';
  position: absolute;
  inset: 12%;
  background: radial-gradient(circle, rgba(255, 60, 90, 0.36) 0%, transparent 60%);
  filter: blur(10px);
  animation: dftAuraPulse 3.4s ease-in-out infinite 0.5s;
}
@keyframes dftAuraPulse {
  0%, 100% { opacity: 0.80; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.07); }
}
.dft-skull {
  position: relative;
  z-index: 2;
  width: 168px;
  height: 168px;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0,0,0,0.85))
          drop-shadow(0 0 18px rgba(200, 30, 50, 0.55));
  /* 2026-05-15: dftSkullFloat removida — calavera fija. */
}

/* Rays oscuros — vibe siniestro */
.dft-rays {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.dft-rays::before,
.dft-rays::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 240px; height: 240px;
  margin: -120px 0 0 -120px;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(200, 30, 50, 0.30) 18deg,
    transparent 36deg,
    transparent 90deg,
    rgba(120, 30, 40, 0.28) 110deg,
    transparent 130deg,
    transparent 180deg,
    rgba(200, 30, 50, 0.26) 210deg,
    transparent 232deg,
    transparent 270deg,
    rgba(120, 30, 40, 0.24) 295deg,
    transparent 318deg
  );
  border-radius: 50%;
  filter: blur(4px);
  animation: dftRaysSpin 22s linear infinite;
  opacity: 0.65;
}
.dft-rays::after { animation-direction: reverse; animation-duration: 32s; opacity: 0.38; }
@keyframes dftRaysSpin { to { transform: rotate(360deg); } }

/* Título DERROTA */
.dft-title {
  font-family: 'Cinzel', 'Cormorant Garamond', serif;
  font-size: clamp(38px, 9vw, 56px);
  font-weight: 900;
  letter-spacing: 0.10em;
  background: linear-gradient(180deg, #ffd0d0 0%, #e85060 30%, #b41e2e 65%, #6a0d18 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 30px rgba(200, 30, 50, 0.50),
               0 0 14px rgba(60, 10, 16, 0.65);
  line-height: 0.96;
  margin: 4px 0 4px;
  animation: dftTitleIn 0.8s 0.15s both cubic-bezier(.2,.9,.3,1.1);
}
@keyframes dftTitleIn {
  from { opacity: 0; transform: translateY(14px) scale(0.92); letter-spacing: 0.20em; }
  to   { opacity: 1; transform: translateY(0)    scale(1);    letter-spacing: 0.10em; }
}

/* Divisor decorativo crimson */
.dft-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 360px;
  margin: 6px 0 6px;
}
.dft-divider::before,
.dft-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 30, 50, 0.6), transparent);
}
.dft-divider i {
  color: rgba(180, 30, 50, 0.85);
  font-size: 14px;
}

.dft-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  color: rgba(232, 220, 220, 0.78);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
  animation: dftTitleIn 0.7s 0.30s both cubic-bezier(.2,.9,.3,1.1);
}

/* ============================================================
   GOLD LOST box
   ============================================================ */
.dft-gold-lost {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  margin: 4px 0 18px;
  background:
    linear-gradient(180deg, rgba(60, 12, 18, 0.65), rgba(30, 6, 10, 0.55));
  border: 1px solid rgba(180, 30, 50, 0.45);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 90, 110, 0.08),
    0 6px 20px rgba(0,0,0,0.5);
  text-align: left;
  animation: dftTitleIn 0.7s 0.4s both cubic-bezier(.2,.9,.3,1.1);
}
.dft-gold-lost-img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.7));
}
.dft-gold-lost-body { min-width: 0; }
.dft-gold-lost-num {
  font-family: 'Cinzel', serif;
  font-size: 28px;
  font-weight: 800;
  background: linear-gradient(180deg, #ff8888, #d4324c);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.dft-gold-lost-lbl {
  font-size: 12px;
  color: rgba(232, 220, 220, 0.70);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-top: 4px;
  font-weight: 600;
}
.dft-gold-lost-lbl b { color: rgba(232, 220, 220, 0.92); font-weight: 700; }
.dft-gold-lost-pct {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: rgba(180, 30, 50, 0.18);
  border: 1px solid rgba(180, 30, 50, 0.5);
  color: #ff8898;
  font-size: 10px;
  letter-spacing: 0.06em;
}

/* ============================================================
   REVIVIR section — header + grid de ciudades
   ============================================================ */
.dft-revive {
  width: 100%;
  margin: 4px 0 14px;
  animation: dftTitleIn 0.7s 0.55s both cubic-bezier(.2,.9,.3,1.1);
}
.dft-revive-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  margin-bottom: 12px;
}
.dft-revive-head::before,
.dft-revive-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180, 30, 50, 0.55), transparent);
  max-width: 80px;
}
.dft-revive-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'Cinzel', serif;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ff8898;
  font-weight: 700;
}
.dft-revive-title i { font-size: 14px; }

.dft-cities {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}
.dft-city {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(212, 175, 55, 0.30);
  border-radius: 12px;
  background: rgba(8, 6, 8, 0.6);
  padding: 12px 8px 10px;
  cursor: pointer;
  text-align: center;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.dft-city:hover {
  transform: translateY(-3px);
  border-color: var(--city-color, #d4af37);
  box-shadow: 0 8px 22px rgba(0,0,0,0.55), 0 0 18px color-mix(in srgb, var(--city-color, #d4af37) 30%, transparent);
}
.dft-city-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
  z-index: 0;
  transition: opacity .2s ease, transform .25s ease;
}
.dft-city:hover .dft-city-bg { opacity: 0.75; transform: scale(1.05); }
.dft-city-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.85) 100%);
  z-index: 1;
}
.dft-city-ic {
  position: relative;
  z-index: 2;
  width: 38px;
  height: 38px;
  margin: 0 auto 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 1px solid var(--city-color, #d4af37);
  color: var(--city-color, #d4af37);
  font-size: 18px;
}
.dft-city-name {
  position: relative;
  z-index: 2;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85);
}
.dft-city-tag {
  position: relative;
  z-index: 2;
  font-size: 10px;
  color: rgba(232, 220, 220, 0.75);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  margin-top: 2px;
}

/* Tip pequeño */
.dft-tip {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
  padding: 9px 12px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px dashed rgba(180, 30, 50, 0.40);
  border-radius: 11px;
  font-size: 12px;
  color: rgba(232, 220, 220, 0.72);
  text-align: left;
  line-height: 1.4;
}
.dft-tip i { color: #ff8898; font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 480px) {
  .dft-panel { max-width: 100%; border-radius: 18px; max-height: 96vh; }
  .dft-scroll { padding: 18px 16px 12px; }
  .dft-skull-wrap { width: 170px; height: 170px; }
  .dft-skull { width: 138px; height: 138px; }
  .dft-gold-lost { padding: 10px 12px; gap: 10px; }
  .dft-gold-lost-img { width: 54px; height: 54px; }
  .dft-gold-lost-num { font-size: 24px; }
  .dft-cities { gap: 6px; }
  .dft-city { padding: 10px 6px 8px; }
  .dft-city-ic { width: 34px; height: 34px; font-size: 16px; }
  .dft-city-name { font-size: 12px; }
}

@media (max-width: 360px) {
  .dft-skull-wrap { width: 150px; height: 150px; }
  .dft-skull { width: 120px; height: 120px; }
  .dft-gold-lost-num { font-size: 22px; }
}