/* ==========================================================================
   Fusão de pets: tela de escolha e animação
   ========================================================================== */

.fusion-screen { padding-bottom: var(--nav-space, 110px); }
.fusion-wallets { display: flex; gap: 6px; }
.fusion-wallet { padding: 6px 12px; font-weight: 700; }
.fusion-pay { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.fusion-pay .gbtn { white-space: nowrap; padding-inline: 10px; font-size: 0.95rem; }

.fusion-altar {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background:
    radial-gradient(70% 60% at 50% 40%, color-mix(in srgb, var(--brand-purple) 30%, transparent), transparent 72%),
    var(--glass-surface);
  display: grid;
  gap: var(--s-3);
}
.fusion-slots { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-2); }
.fusion-plus { font-size: 1.6rem; color: var(--brand-violet); text-shadow: 0 0 16px var(--brand-purple); animation: fusion-twinkle 2.4s ease-in-out infinite; }
.fusion-slot {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-height: 170px;
  padding: var(--s-2);
  border-radius: var(--r-lg);
  border: 1.5px dashed var(--glass-border-bright);
  background: var(--glass-surface-soft);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
  text-align: center;
}
.fusion-slot.is-filled {
  border-style: solid;
  border-color: color-mix(in srgb, var(--el) 70%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--el) 35%, transparent);
}
.fusion-slot__art { width: 96px; aspect-ratio: 1; }
.fusion-slot__art svg, .fusion-pick__art svg { width: 100%; height: 100%; }
.fusion-slot__empty { display: grid; place-items: center; width: 64px; height: 64px; margin-top: 30px; border-radius: 50%; font-size: 2rem; color: var(--text-secondary); border: 1.5px dashed var(--glass-border-bright); }

.fusion-forecast { display: grid; gap: 6px; padding: var(--s-3); border-radius: var(--r-md); background: color-mix(in srgb, var(--bg-deep) 40%, transparent); }
.fusion-forecast__row { display: flex; justify-content: space-between; gap: var(--s-2); font-size: 0.86rem; }
.fusion-forecast__row span { color: var(--text-secondary); }
.fusion-forecast__row strong { text-align: right; }

.fusion-roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--s-2); }
.fusion-pick {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding: 6px;
  border-radius: var(--r-md);
  border: 1.5px solid var(--glass-border);
  background: var(--glass-surface-soft);
  color: var(--text-primary);
  font: inherit;
  cursor: pointer;
}
.fusion-pick.is-picked { border-color: var(--brand-violet); box-shadow: var(--shadow-glow-purple); }
.fusion-pick__art { width: 70px; aspect-ratio: 1; }
.fusion-note { color: var(--text-secondary); }
.lobby-fuse { margin-top: var(--s-1); }

/* ---------- A animação ---------- */
.fusion-fx {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  overflow: hidden;
  --el: hsl(268 70% 66%);
}
.fx-backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(168, 85, 247, 0.35), transparent 55%),
    rgba(6, 4, 18, 0.92);
  backdrop-filter: blur(10px);
  animation: fx-fade 500ms ease both;
}
.fx-pet {
  position: absolute;
  top: 38%;
  width: min(38vw, 170px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 0 18px var(--el));
  opacity: 0;
}
.fx-pet svg { width: 100%; height: 100%; }
.fx-pet--left { left: 26%; }
.fx-pet--right { left: 74%; }

.fx-runes {
  /* Centralizado por margem, não por transform: o giro (`rotate`) e o zoom
     (`scale`) animados giravam junto o translate de centralização. */
  --rs: min(78vw, 360px);
  position: absolute;
  top: calc(38% - var(--rs) / 2);
  left: calc(50% - var(--rs) / 2);
  width: var(--rs);
  height: var(--rs);
  scale: 0.6;
  opacity: 0;
}
.fx-runes span {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #e9d5ff;
  font-size: 1.1rem;
  text-shadow: 0 0 10px #a855f7;
  translate: -50% -50%;
  transform: rotate(calc(var(--i) * 30deg)) translateY(calc(var(--rs) * -0.48));
}
.fx-motes { position: absolute; top: 38%; left: 50%; width: 0; height: 0; opacity: 0; }
.fx-motes i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
  transform: rotate(calc(var(--i) * 15deg)) translateX(150px);
}
.fx-flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 38%, #fff, #e9d5ff 18%, rgba(168, 85, 247, 0.6) 38%, transparent 70%); opacity: 0; pointer-events: none; }
.fx-waves { position: absolute; top: 38%; left: 50%; width: 0; height: 0; }
.fx-waves i { position: absolute; left: -10px; top: -10px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #e9d5ff; box-shadow: 0 0 18px rgba(168, 85, 247, 0.8); opacity: 0; }
.fx-caption { position: absolute; bottom: 18%; left: 0; right: 0; text-align: center; color: #e9d5ff; font-family: var(--font-display); font-size: 1.05rem; padding: 0 var(--s-4); }
.fx-result { position: relative; display: grid; justify-items: center; gap: var(--s-2); width: min(92vw, 380px); text-align: center; color: #f4f6ff; opacity: 0; }
.fx-result__art { width: min(62vw, 240px); aspect-ratio: 1; filter: drop-shadow(0 0 26px var(--el)); }
.fx-result__art svg { width: 100%; height: 100%; }
.fx-result__up { animation: fx-pop 700ms var(--ease-liquid) both 300ms; }

/* 1. Os dois aparecem, cada um com a aura do seu elemento. */
.fusion-fx.is-gather .fx-pet { animation: fx-appear 900ms var(--ease-liquid) both; }
.fusion-fx.is-gather .fx-pet--right { animation-delay: 150ms; }
.fusion-fx.is-gather .fx-runes { animation: fx-runes-in 1000ms ease both, fx-spin 14s linear infinite; }

/* 2. Espiral: giram um em direção ao outro, com rastro de brilho. */
.fusion-fx.is-spiral .fx-pet--left { animation: fx-spiral-left 1900ms cubic-bezier(0.55, 0, 0.45, 1) forwards; }
.fusion-fx.is-spiral .fx-pet--right { animation: fx-spiral-right 1900ms cubic-bezier(0.55, 0, 0.45, 1) forwards; }
.fusion-fx.is-spiral .fx-motes { animation: fx-motes 1900ms ease-in forwards; }
.fusion-fx.is-spiral .fx-runes { animation: fx-spin 3s linear infinite, fx-runes-tight 1900ms ease-in forwards; }

/* 3. Clarão e ondas de luz. */
.fusion-fx.is-burst .fx-flash { animation: fx-flash 900ms ease-out both; }
.fusion-fx.is-burst .fx-waves i { animation: fx-wave 1100ms ease-out both; }
.fusion-fx.is-burst .fx-waves i:nth-child(2) { animation-delay: 140ms; }
.fusion-fx.is-burst .fx-waves i:nth-child(3) { animation-delay: 280ms; }
.fusion-fx.is-burst .fx-pet, .fusion-fx.is-burst .fx-runes, .fusion-fx.is-burst .fx-motes { opacity: 0 !important; animation: none; transition: opacity 200ms; }

/* 4. O pet novo surge flutuando. */
.fusion-fx.is-reveal .fx-result { animation: fx-reveal 900ms var(--ease-liquid) both 150ms; }
.fusion-fx.is-reveal .fx-result__art { animation: fx-float 3.2s ease-in-out infinite 1s; }
.fusion-fx.is-reveal .fx-backdrop { background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--el) 40%, transparent), transparent 60%), rgba(6, 4, 18, 0.92); }

/* Menos movimento: sem espiral nem clarão, só a revelação. */
.fusion-fx.is-calm .fx-pet, .fusion-fx.is-calm .fx-runes, .fusion-fx.is-calm .fx-motes { display: none; }
.fusion-fx.is-calm.is-reveal .fx-result { animation: fx-fade 400ms ease both; }
.fusion-fx.is-calm.is-reveal .fx-result__art { animation: none; }

@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-appear { from { opacity: 0; transform: translate(-50%, -30%) scale(0.6); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes fx-runes-in { from { opacity: 0; scale: 0.6; } to { opacity: 0.9; scale: 1; } }
@keyframes fx-spin { to { rotate: 360deg; } }
@keyframes fx-runes-tight { from { opacity: 0.9; scale: 1; } to { opacity: 1; scale: 0.35; } }
@keyframes fx-spiral-left {
  0% { opacity: 1; left: 26%; top: 38%; transform: translate(-50%, -50%) scale(1) rotate(0); }
  35% { left: 34%; top: 26%; transform: translate(-50%, -50%) scale(0.85) rotate(-90deg); }
  70% { left: 58%; top: 34%; transform: translate(-50%, -50%) scale(0.6) rotate(-220deg); }
  100% { opacity: 0.2; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(0.25) rotate(-360deg); filter: drop-shadow(0 0 40px #fff) brightness(2); }
}
@keyframes fx-spiral-right {
  0% { opacity: 1; left: 74%; top: 38%; transform: translate(-50%, -50%) scale(1) rotate(0); }
  35% { left: 66%; top: 50%; transform: translate(-50%, -50%) scale(0.85) rotate(90deg); }
  70% { left: 42%; top: 42%; transform: translate(-50%, -50%) scale(0.6) rotate(220deg); }
  100% { opacity: 0.2; left: 50%; top: 38%; transform: translate(-50%, -50%) scale(0.25) rotate(360deg); filter: drop-shadow(0 0 40px #fff) brightness(2); }
}
@keyframes fx-motes {
  0% { opacity: 0; transform: rotate(0) scale(1.2); }
  20% { opacity: 1; }
  100% { opacity: 1; transform: rotate(540deg) scale(0.05); }
}
@keyframes fx-flash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
/* O anel cresce em tamanho (não em escala): a borda continua fina. */
@keyframes fx-wave { from { opacity: 0.9; width: 20px; height: 20px; left: -10px; top: -10px; } to { opacity: 0; width: 900px; height: 900px; left: -450px; top: -450px; } }
@keyframes fx-reveal { from { opacity: 0; transform: scale(0.4); filter: brightness(2.5); } 60% { opacity: 1; transform: scale(1.06); } to { opacity: 1; transform: scale(1); filter: none; } }
@keyframes fx-float { 50% { transform: translateY(-8px); } }
@keyframes fx-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }
@keyframes fusion-twinkle { 50% { opacity: 0.5; transform: scale(0.85); } }

@media (prefers-reduced-motion: reduce) {
  .fusion-plus { animation: none; }
}