/* ============================================================
   ARCANUM — Animation Layer (dungeon-v2.css)
   Solo animaciones. Sin colores, sin layout, sin estructura.
   ─ Emil Kowalski principles para micro-interactions
   ─ Sonner/Silao principles para toasts y popups
   ============================================================ */

/* ─── EASING CURVES ─────────────────────────────────────────── */
:root {
  --ek-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --ek-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ek-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ek-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ─── BUTTONS — scale(0.97) al presionar (Emil) ─────────────── */
/* Solo en elementos realmente presionables, no en checks ni sliders */
button:not(.quest-check):not(.dur-btn):not(.pom-mini-btn):not(.sidebar-item):active,
.btn:active,
.add-quest-trigger-btn:active,
.icon-btn:active,
.filter-tab:active,
.sidebar-item:active {
  transform: scale(0.97) !important;
  transition: transform 100ms var(--ek-out) !important;
}

/* ─── SIDEBAR ITEMS — hover suave ───────────────────────────── */
.sidebar-item {
  transition: background 160ms var(--ek-out),
              border-color 160ms var(--ek-out),
              color 160ms var(--ek-out) !important;
}

/* ─── ICON BUTTONS — sin el translateY que ya tiene dungeon.css ─ */
.icon-btn {
  transition: border-color 160ms var(--ek-out),
              color 160ms var(--ek-out),
              background 160ms var(--ek-out) !important;
}
/* Quitar el translateY(-2px) del hover — se siente inestable */
.icon-btn:hover { transform: none !important; }

/* ─── MODALES — Emil Kowalski ────────────────────────────────── */
/* Entran desde scale(0.95) ease-out, NO desde spring/scale(0.93) */

.modal-overlay .modal {
  transform: scale(0.95) translateY(6px);
  opacity: 0;
  transition: transform 220ms var(--ek-out),
              opacity 180ms var(--ek-out) !important;
}

.modal-overlay.open .modal {
  transform: scale(1) translateY(0) !important;
  opacity: 1 !important;
}

/* ─── TOASTS — Silao / Sonner style ─────────────────────────── */
/* Entran desde abajo: translateY(8px) scale(0.95)
   Consistente con dirección de swipe-to-dismiss (Emil principle) */

.toast {
  animation: silao-enter 240ms var(--ek-out) both !important;
}

@keyframes silao-enter {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Toast salida — más rápida que entrada (Emil: exits faster) */
.toast.toast-exit {
  animation: silao-exit 160ms var(--ek-in-out) both !important;
}

@keyframes silao-exit {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(4px) scale(0.97);
  }
}

/* ─── QUEST ITEMS — stagger en lista (Emil: 30-50ms) ────────── */
@keyframes quest-enter {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.quest-list > .quest-item:nth-child(1)  { animation: quest-enter 260ms var(--ek-out) 0ms   both; }
.quest-list > .quest-item:nth-child(2)  { animation: quest-enter 260ms var(--ek-out) 35ms  both; }
.quest-list > .quest-item:nth-child(3)  { animation: quest-enter 260ms var(--ek-out) 70ms  both; }
.quest-list > .quest-item:nth-child(4)  { animation: quest-enter 260ms var(--ek-out) 105ms both; }
.quest-list > .quest-item:nth-child(5)  { animation: quest-enter 260ms var(--ek-out) 140ms both; }
.quest-list > .quest-item:nth-child(6)  { animation: quest-enter 260ms var(--ek-out) 165ms both; }
.quest-list > .quest-item:nth-child(n+7){ animation: quest-enter 260ms var(--ek-out) 190ms both; }

/* ─── QUEST ITEM HOVER — feedback sutil ─────────────────────── */
.quest-item {
  transition: border-color 160ms var(--ek-out),
              background 160ms var(--ek-out) !important;
}

/* ─── BOSS CARDS — hover lift ───────────────────────────────── */
.bcard {
  transition: transform 200ms var(--ek-out),
              border-color 200ms var(--ek-out),
              box-shadow 200ms var(--ek-out) !important;
}

.bcard:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}

/* ─── STAT CHIPS — hover suave ──────────────────────────────── */
.stat-chip {
  transition: border-color 160ms var(--ek-out),
              box-shadow 160ms var(--ek-out) !important;
}

/* ─── XP BAR — transición fluida ────────────────────────────── */
.xp-bar-fill {
  transition: width 700ms var(--ek-out) !important;
}

.hp-bar-fill, .mana-bar-fill {
  transition: width 500ms var(--ek-out) !important;
}

/* ─── MORE MENU — enter desde arriba ────────────────────────── */
.more-menu {
  transform-origin: top right;
  animation: menu-enter 180ms var(--ek-out) both;
}

@keyframes menu-enter {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-6px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* ─── SIDEBAR ITEMS — stagger al cargar ─────────────────────── */
@keyframes sidebar-enter {
  from { opacity: 0; transform: translateX(-4px); }
  to   { opacity: 1; transform: translateX(0); }
}

.sb-nav .sidebar-item:nth-child(1)  { animation: sidebar-enter 220ms var(--ek-out) 50ms  both; }
.sb-nav .sidebar-item:nth-child(2)  { animation: sidebar-enter 220ms var(--ek-out) 80ms  both; }
.sb-nav .sidebar-item:nth-child(3)  { animation: sidebar-enter 220ms var(--ek-out) 110ms both; }
.sb-nav .sidebar-item:nth-child(4)  { animation: sidebar-enter 220ms var(--ek-out) 130ms both; }
.sb-nav .sidebar-item:nth-child(n+5){ animation: sidebar-enter 220ms var(--ek-out) 150ms both; }

/* ─── ACHIEVEMENT CARDS — hover ─────────────────────────────── */
.achievement-card {
  transition: transform 180ms var(--ek-out),
              border-color 180ms var(--ek-out) !important;
}
.achievement-card:hover { transform: translateY(-2px) !important; }

/* ─── PET CARDS — spring hover ──────────────────────────────── */
.pet-card {
  transition: transform 220ms var(--ek-spring) !important;
}
.pet-card:hover { transform: translateY(-2px) scale(1.01) !important; }

/* ─── SHOP ITEMS ─────────────────────────────────────────────── */
.shop-item {
  transition: transform 180ms var(--ek-out),
              border-color 180ms var(--ek-out) !important;
}
.shop-item:hover { transform: translateY(-2px) !important; }

/* ─── CHAR SLOTS — hover lift ───────────────────────────────── */
.char-slot {
  transition: transform 160ms var(--ek-out),
              border-color 160ms var(--ek-out) !important;
}
.char-slot:hover { transform: translateY(-1px) !important; }
.char-slot:active { transform: scale(0.97) !important; }

/* ─── HEATMAP CELLS — micro zoom ────────────────────────────── */
.heatmap-cell {
  transition: transform 120ms var(--ek-out) !important;
}
.heatmap-cell:hover { transform: scale(1.3) !important; }

/* ─── FILTER TABS — transición color ────────────────────────── */
.filter-tab, .view-tab, .char-tab, .date-filter-btn {
  transition: color 140ms var(--ek-out),
              background 140ms var(--ek-out),
              border-color 140ms var(--ek-out) !important;
}

/* ─── INPUTS — focus suave ───────────────────────────────────── */
input, textarea, select {
  transition: border-color 160ms var(--ek-out),
              box-shadow 160ms var(--ek-out) !important;
}

/* ─── SKILL NODES ────────────────────────────────────────────── */
.skill-node {
  transition: transform 200ms var(--ek-out),
              box-shadow 200ms var(--ek-out) !important;
}
.skill-node:hover { transform: scale(1.1) !important; }
.skill-node:active { transform: scale(0.95) !important; }

/* ─── LOOT DROP PARTICLES ───────────────────────────────────── */
.particle {
  animation: loot-float 850ms var(--ek-out) both !important;
}

@keyframes loot-float {
  0%   { opacity: 0; transform: translateY(0) scale(0.8); }
  15%  { opacity: 1; transform: translateY(-10px) scale(1.05); }
  100% { opacity: 0; transform: translateY(-50px) scale(0.9); }
}

/* ─── HEADER HUD INFO — efectos + progreso en el header ─────── */
.header-hud-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
  min-width: 0;
}

/* Effects bar compact en header */
.header-hud-info .effects-bar {
  display: flex !important;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  overflow: hidden;
  background: rgba(168,85,247,.08);
  border: 1px solid rgba(168,85,247,.2);
  border-radius: 20px;
  padding: 4px 10px;
  margin: 0;
  cursor: pointer;
  max-width: 360px;
  min-width: 0;
  height: 28px;
  white-space: nowrap;
  transition: background 160ms var(--ek-out), border-color 160ms var(--ek-out);
}
.header-hud-info .effects-bar:hover {
  background: rgba(168,85,247,.14);
  border-color: rgba(168,85,247,.35);
}
/* Ocultar el botón expandir en header — no hay espacio */
.header-hud-info .effects-bar .efx-expand { display: none; }

/* Divisor vertical */
.hud-divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}
/* Ocultar divisor si está solo */
.hud-divider:first-child,
.hud-divider:last-child { display: none; }

/* Daily progress compact en header */
.header-hud-info .daily-progress-wrap {
  display: flex !important;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  max-width: 200px;
}
.header-hud-info .daily-progress-label {
  font-size: 11px;
  white-space: nowrap;
  color: var(--text2);
}
.header-hud-info .daily-progress-bar {
  flex: 1;
  height: 5px;
}

/* Daily goal bar compact en header */
.header-hud-info .daily-goal-bar {
  display: flex !important;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  margin: 0;
  min-width: 140px;
  max-width: 200px;
}
.header-hud-info .dgb-label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 11px;
  white-space: nowrap;
}
.header-hud-info .dgb-track {
  width: 80px;
  flex-shrink: 0;
}

/* En móvil ocultar el HUD info del header (no cabe) */
@media (max-width: 768px) {
  .header-hud-info { display: none; }
}

/* ─── BOSS GRID — ancho completo sin panel lateral ───────────── */
/* El boss-info-panel fue removido del HTML.
   boss-layout ahora solo tiene boss-scroll → se expande full. */
.boss-layout {
  display: block !important;
}
/* Sin overflow-x para que el grid tome el ancho real del contenedor */
.boss-scroll {
  overflow-x: visible !important;
  width: 100% !important;
}
.boss-scroll .boss-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  flex-wrap: unset !important;
  justify-content: unset !important;
  gap: 14px !important;
  width: 100% !important;
}
/* Quitar el ancho fijo y el flex-shrink de bcard */
.boss-scroll .bcard {
  width: auto !important;
  min-width: 0 !important;
  flex-shrink: unset !important;
}

/* ─── SPELLS MODAL — grid de hechizos en popup ──────────────── */
#spellsModal .spells-list { display: block; }
#spellsModal .spell-orbs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* ─── BESTIARY — ocultar nombres de bosses desconocidos ─────── */
.bestiary-unknown .bestiary-name { display: none; }
/* Nombre conocido más compacto */
.bestiary-known .bestiary-name {
  font-size: 11px;
  text-align: center;
  line-height: 1.3;
  padding: 0 4px;
}

/* ─── REDUCED MOTION — respetar preferencia del OS ──────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}