/* expedicoes.css -- página /expedicoes (Expedições de Pal).
   Usa as variáveis de codex.css. --exp-cor é a cor da periculosidade, definida por card. */

.exp-secao{ margin-bottom:2rem; }
.exp-secao-desc{ color: var(--text-dim); font-size:.88rem; max-width:820px; margin:-.2rem 0 1rem; }
.exp-lista{ display:flex; flex-direction:column; gap:1.25rem; }

.exp-card{
  background: var(--panel); border:1px solid var(--hairline); border-radius:14px;
  overflow:hidden; scroll-margin-top:80px;
}
.exp-card:target{ border-color: var(--accent-line); }

/* Banner: a imagem do jogo é 1080x100, então o fundo é cortado e centralizado, com degradê
   escuro pra manter o texto legível. */
.exp-banner{
  position:relative; min-height:150px; display:flex; align-items:flex-end;
  background-color: var(--panel-2); background-size:cover; background-position:center;
  border-bottom:3px solid var(--exp-cor, var(--hairline));
}
.exp-banner::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(10,13,20,.15) 0%, rgba(10,13,20,.88) 100%);
}
.exp-banner-conteudo{ position:relative; width:100%; padding:1rem 1.15rem; display:flex; flex-direction:column; gap:.65rem; }
.exp-nome{ margin:0; font-family: var(--font-display); font-size:clamp(1.4rem, 3.4vw, 1.9rem); color: var(--text-bright); text-shadow:0 2px 10px rgba(0,0,0,.6); }
.exp-nome a{ color:inherit; text-decoration:none; }
.exp-nome a:hover{ color: var(--gold); }

.exp-chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.exp-chip{
  display:inline-flex; align-items:center; gap:.4rem;
  background: rgba(10,13,20,.72); border:1px solid var(--hairline); border-radius:999px;
  padding:.2rem .7rem; font-size:.8rem; font-weight:600; color: var(--text-bright);
  font-variant-numeric: tabular-nums; backdrop-filter: blur(2px);
}
.exp-chip img{ width:18px; height:18px; object-fit:contain; }
.exp-chip-dif{ color: var(--exp-cor); border-color: var(--exp-cor); }

.exp-corpo{ padding:1rem 1.15rem 1.15rem; }
.exp-desbloqueio{ display:flex; gap:.6rem; align-items:flex-start; margin:0 0 1rem; color: var(--text); font-size:.9rem; }
.exp-desbloqueio i{ color: var(--gold); margin-top:.15rem; }
.exp-drops-titulo{
  font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color: var(--text-dim); margin-bottom:.6rem;
}

/* Um bloco por slot: o slot sorteia UM item entre os candidatos listados nele. */
.exp-slots{ display:grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap:.6rem; }
.exp-slot{
  display:flex; gap:.6rem; align-items:flex-start; min-width:0;
  background: var(--panel-2); border:1px solid var(--hairline); border-radius:10px; padding:.5rem;
}
.exp-slot-num{
  flex:0 0 auto; width:1.7rem; height:1.7rem; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background: var(--accent-soft); border:1px solid var(--accent-line); color: var(--accent);
  font-size:.75rem; font-weight:700; font-variant-numeric: tabular-nums; margin-top:.35rem;
}
.exp-slot-itens{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:.3rem; }

.exp-item{
  display:flex; align-items:center; gap:.6rem; min-width:0; text-decoration:none; color: var(--text);
  background: var(--panel); border:1px solid var(--hairline); border-left:3px solid var(--rarity-color, var(--hairline));
  border-radius:8px; padding:.35rem .6rem;
  transition: border-color .15s ease, background .15s ease;
}
.exp-item:hover{ border-color: var(--accent-line); border-left-color: var(--rarity-color, var(--accent-line)); background: var(--accent-soft); color: var(--text-bright); }
.exp-item img{ width:36px; height:36px; object-fit:contain; flex:0 0 auto; }
.exp-item-info{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; }
.exp-item-nome{ color: var(--text-bright); font-size:.86rem; font-weight:600; overflow-wrap:anywhere; }
.exp-item-meta{ color: var(--text-dim); font-size:.72rem; font-variant-numeric: tabular-nums; }
.exp-item-chance{ flex:0 0 auto; font-family: var(--font-mono); font-size:.8rem; color: var(--gold); font-variant-numeric: tabular-nums; }

@media (max-width: 560px){
  .exp-slots{ grid-template-columns:1fr; }
  .exp-banner{ min-height:170px; }
}