/* ruinas-acampamentos.css: /ruinas, /ruina/<slug>, /acampamentos e /acampamento/<slug>.
   Complementa masmorras.css (hero, cards, slots de loot, grades de Pal), que estas páginas reaproveitam.
   --mas-cor/--mas-cor2 vêm da página: dourado nas ruínas, laranja/vermelho nos acampamentos e bases. */

/* ---------- Ruínas: listagem ---------- */
.ra-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap:.8rem; margin-bottom:2rem; }

.ra-ruina{
  display:flex; gap:.9rem; align-items:flex-start; text-decoration:none; color: var(--text);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--mas-cor) 10%, transparent), transparent 55%),
    var(--panel);
  border:1px solid var(--hairline); border-radius:14px; padding:.9rem;
  transition: border-color .15s ease, transform .15s ease;
}
.ra-ruina:hover{ border-color: var(--mas-cor); color: var(--text); transform: translateY(-2px); }
.ra-ruina-icone{
  flex:0 0 auto; width:64px; height:64px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  background: var(--panel-2); border:1px solid var(--hairline); border-bottom:3px solid var(--rarity-color, var(--hairline));
}
.ra-ruina-icone img{ width:52px; height:52px; object-fit:contain; }
.ra-ruina-corpo{ display:flex; flex-direction:column; gap:.2rem; min-width:0; flex:1 1 auto; }
.ra-eyebrow{ font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color: var(--mas-cor); }
.ra-ruina-nome{ font-family: var(--font-display); font-size:1.05rem; line-height:1.25; color: var(--text-bright); overflow-wrap:anywhere; text-wrap: balance; }
.ra-ruina-extra{ font-size:.76rem; color: var(--text-dim); }
.ra-ruina-local{ margin-top:.35rem; font-size:.76rem; color: var(--text-dim); display:flex; flex-wrap:wrap; gap:.25rem .5rem; align-items:baseline; }
.ra-ruina-local i{ color: var(--mas-cor); }
.ra-ruina-local b{ font-family: var(--font-mono); font-weight:500; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- Ruína: detalhe ---------- */
.ra-hero-item{ border-bottom:3px solid var(--rarity-color, rgba(255,255,255,.25)); }
.ra-hero-item img{ width:70%; height:70%; object-fit:contain; }
.ra-itens{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:.5rem; }

/* ---------- Acampamentos ---------- */
.ra-emblema-img{ width:72%; height:72%; object-fit:contain; }

.ra-jaula-mini{
  display:flex; flex-wrap:wrap; align-items:center; gap:.25rem;
  padding:.35rem .5rem; border-radius:10px; background: var(--panel-2); border:1px solid var(--hairline);
}
.ra-jaula-mini i{ color: var(--mas-cor); margin-right:.2rem; }
.ra-jaula-mini img{ width:30px; height:30px; object-fit:contain; }
.ra-jaula-mini small{ color: var(--text-dim); font-size:.72rem; margin-left:.15rem; }

.ra-inimigos{ display:grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap:.45rem; }
.ra-inimigo{
  display:flex; align-items:center; gap:.7rem; min-width:0;
  background: var(--panel-2); border:1px solid var(--hairline); border-left:3px solid var(--mas-cor);
  border-radius:10px; padding:.5rem .75rem;
}
.ra-inimigo-qtd{ flex:0 0 auto; font-family: var(--font-mono); font-size:.9rem; color: var(--mas-cor); font-variant-numeric: tabular-nums; min-width:2.2em; }
.ra-inimigo-nome{ flex:1 1 auto; min-width:0; font-size:.86rem; font-weight:600; color: var(--text-bright); overflow-wrap:anywhere; }
.ra-inimigo-nivel{ flex:0 0 auto; font-size:.76rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce){
  .ra-ruina{ transition:none; }
  .ra-ruina:hover{ transform:none; }
}