/* ============================================================
   altar-reliquias.css — o seletor das 5 relíquias
   ============================================================ */

.hunter-relicario-editar {
  width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: .3rem; font-size: .68rem;
  color: var(--text-muted);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(148,163,184,.22);
  transition: all .2s;
}
.hunter-relicario-editar:hover {
  color: var(--gold-bright); border-color: var(--gold-bright);
  background: rgba(251,191,36,.12); transform: rotate(-12deg);
}

.al-overlay {
  position: fixed; inset: 0; z-index: 9990;
  display: flex; align-items: center; justify-content: center; padding: 1.2rem;
  background: rgba(3,3,8,.9); backdrop-filter: blur(7px);
  animation: al-fade .2s ease both;
}
@keyframes al-fade { from { opacity: 0; } }

.al-painel {
  width: min(720px, 100%); max-height: 88vh; display: flex; flex-direction: column;
  padding: 1.4rem 1.5rem; border-radius: 18px;
  background: linear-gradient(170deg, #191228, #0a0710 65%);
  border: 1px solid rgba(251,191,36,.4);
  box-shadow: 0 24px 60px rgba(0,0,0,.7);
  animation: al-subir .26s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes al-subir { from { opacity: 0; transform: translateY(14px) scale(.98); } }

.al-cab { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.al-titulo {
  font-family: var(--font-title); font-size: 1.15rem; color: var(--gold-bright);
}
.al-sub {
  font-family: var(--font-section); font-size: .68rem; letter-spacing: .1em;
  color: var(--text-muted); margin-top: .2rem;
}
.al-x {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.1rem;
}
.al-x:hover { color: #fff; }

.al-contador {
  font-family: var(--font-section); font-size: .72rem; color: var(--text-secondary);
  margin-bottom: .8rem;
}
.al-contador b { color: var(--gold-bright); font-family: 'Orbitron', monospace; }

.al-grade {
  flex: 1; overflow-y: auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .55rem;
}
.al-item {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .35rem;
  padding: .8rem .5rem .6rem; border-radius: 13px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(148,163,184,.14);
  color: var(--text-primary);
  transition: all .2s;
}
.al-item:hover { transform: translateY(-3px); border-color: rgba(251,191,36,.45); }
.al-item.on {
  border-color: var(--gold-bright);
  background: linear-gradient(165deg, rgba(251,191,36,.15), rgba(0,0,0,.3));
  box-shadow: 0 0 20px rgba(251,191,36,.28);
}
.al-med { height: 62px; display: flex; align-items: center; justify-content: center; }
/* A regra global `img, svg { max-width:100% }` colapsa medalha em
   contêiner sem largura — já nos custou caro na aura. */
.al-med svg { max-width: none; }
.al-nome {
  font-family: var(--font-section); font-size: .66rem; font-weight: 700;
  line-height: 1.25; text-align: center;
}
.al-marca {
  position: absolute; top: .4rem; right: .45rem;
  width: 19px; height: 19px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; font-weight: 700;
  color: #0b0b12; background: var(--gold-bright);
  opacity: 0; transform: scale(.5);
  transition: opacity .18s, transform .22s cubic-bezier(.34,1.6,.64,1);
}
.al-item.on .al-marca { opacity: 1; transform: scale(1); }

.al-rodape {
  display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.2rem;
}
.al-btn-limpar, .al-btn-salvar {
  font-family: var(--font-section); font-size: .8rem; font-weight: 700;
  padding: .65rem 1.2rem; border-radius: 10px; cursor: pointer;
  transition: all .2s;
}
.al-btn-limpar {
  color: var(--text-secondary);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(148,163,184,.2);
}
.al-btn-limpar:hover { color: #fff; border-color: var(--purple-glow); }
.al-btn-salvar {
  margin-left: auto; color: #0b0b12;
  background: linear-gradient(100deg, var(--gold-bright), #f59e0b);
  border: 1px solid var(--gold-bright);
  box-shadow: 0 0 18px rgba(251,191,36,.3);
}
.al-btn-salvar:hover { transform: translateY(-2px); box-shadow: 0 0 28px rgba(251,191,36,.55); }

.al-vazio {
  grid-column: 1 / -1; text-align: center; padding: 2rem;
  font-family: var(--font-section); font-size: .82rem; color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .al-overlay, .al-painel { animation: none; }
}