/* status-negativos.css -- página /status-negativos. A cor de cada condição chega em --cor (statusEfeitosCatalogo()). */

/* ---------- Atalhos ---------- */
.sn-chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:0 0 1.5rem; }
.sn-chip{
  --cor:#9aa0b4;
  display:inline-flex; align-items:center; gap:.45rem; padding:.35rem .8rem .35rem .4rem; border-radius:999px;
  border:1px solid color-mix(in srgb, var(--cor) 40%, transparent);
  background: color-mix(in srgb, var(--cor) 10%, var(--panel-2));
  color: color-mix(in srgb, var(--cor) 75%, white 25%); font-size:.82rem; font-weight:600; text-decoration:none;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.sn-chip img{ width:22px; height:22px; }
.sn-chip:hover, .sn-chip:focus-visible{ background: color-mix(in srgb, var(--cor) 22%, var(--panel-2)); border-color: var(--cor); color:#fff; transform: translateY(-1px); }
.sn-chip:focus-visible{ outline:2px solid var(--cor); outline-offset:2px; }

/* ---------- Painéis ---------- */
.sn-painel{
  margin-bottom:1.5rem; padding:1.25rem; border-radius:18px; border:1px solid var(--hairline);
  background: linear-gradient(160deg, var(--panel) 0%, var(--panel-2) 100%); box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.sn-painel-topo{ margin-bottom:1rem; }
.sn-painel-topo h2{ display:flex; align-items:center; gap:.6rem; margin:0; font-size:1.05rem; font-weight:700; color: var(--text-bright); text-wrap:balance; }
.sn-painel-topo h2 i{ color: var(--gold); }
.sn-painel-topo p{ margin:.4rem 0 0; font-size:.85rem; color: var(--text-dim); max-width:72ch; }
.sn-nota{ margin:.9rem 0 0; font-size:.78rem; color: var(--text-dim); }
.sn-nota code, .montador-notas code{ font-family: var(--font-mono); font-size:.92em; color: var(--text); }

/* ---------- Tabela de interações ---------- */
.sn-tabela-wrap{ overflow-x:auto; }
.sn-tabela{ width:100%; border-collapse:separate; border-spacing:0; min-width:520px; }
.sn-tabela th, .sn-tabela td{ padding:.6rem .75rem; border-bottom:1px solid var(--hairline); text-align:left; vertical-align:middle; }
.sn-tabela thead th{ font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--text-dim); }
.sn-tabela tbody tr:last-child > *{ border-bottom:0; }
.sn-tabela tbody tr:hover > *{ background: rgba(255,255,255,.02); }
.sn-tabela td{ display:table-cell; }
.sn-vazio{ font-size:.8rem; color: var(--text-dim); }

/* Elemento + multiplicador. */
.sn-mult{ display:inline-flex; align-items:center; gap:.35rem; margin:.15rem .6rem .15rem 0; }
.sn-mult .elemento-badge{ float:none; }
.sn-mult b{ font-size:.85rem; font-variant-numeric: tabular-nums; }
.sn-mult--mais b{ color:#4cc38a; }
.sn-mult--menos b{ color:#ef6b6b; }

/* ---------- Busca ---------- */
.sn-busca{ margin-bottom:1rem; }
.sn-sem-resultado{ padding:1.5rem; text-align:center; color: var(--text-dim); }

/* ---------- Cards ---------- */
.sn-grade{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); gap:1.1rem; margin-bottom:1.5rem; }
.sn-card{
  --cor:#9aa0b4;
  position:relative; display:flex; flex-direction:column; gap:1rem; padding:1.2rem; border-radius:18px; overflow:hidden;
  border:1px solid color-mix(in srgb, var(--cor) 28%, var(--hairline));
  background:
    radial-gradient(120% 70% at 0% 0%, color-mix(in srgb, var(--cor) 16%, transparent), transparent 60%),
    linear-gradient(170deg, var(--panel) 0%, var(--panel-2) 100%);
  box-shadow: 0 10px 28px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.04);
  scroll-margin-top: calc(var(--site-nav-height) + 1rem);
}
.sn-card:target{ border-color: var(--cor); box-shadow: 0 0 0 1px var(--cor), 0 10px 28px rgba(0,0,0,.32); }

.sn-card-topo{ display:grid; grid-template-columns:auto 1fr; gap:.25rem .9rem; align-items:center; }
.sn-card-icone{
  grid-row: span 2; display:grid; place-items:center; width:58px; height:58px; border-radius:50%;
  background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--cor) 55%, white 10%), color-mix(in srgb, var(--cor) 25%, #0c0f14 75%));
  border:2px solid color-mix(in srgb, var(--cor) 70%, black 20%);
  box-shadow: 0 0 22px color-mix(in srgb, var(--cor) 35%, transparent), inset 0 1px 2px rgba(255,255,255,.35);
}
.sn-card-icone img{ width:38px; height:38px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.5)); }
.sn-card-titulo{ min-width:0; }
.sn-card-titulo h2{ margin:0; font-family: var(--font-display); font-size:1.7rem; font-weight:700; line-height:1.05; color: color-mix(in srgb, var(--cor) 70%, white 30%); }
.sn-card-titulo p{ margin:.2rem 0 0; font-size:.85rem; color: var(--text); }
.sn-card-bp{
  grid-column: 2; justify-self:start; padding:.1rem .45rem; border-radius:6px; border:1px solid var(--hairline);
  background: rgba(0,0,0,.25); font-family: var(--font-mono); font-size:.68rem; color: var(--text-dim); overflow-wrap:anywhere;
}

/* Números principais. */
.sn-stats{ display:grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap:.5rem; margin:0; }
.sn-stats > div{ padding:.55rem .7rem; border-radius:12px; background: rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.05); }
.sn-stats dt{ font-size:.66rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--text-dim); }
.sn-stats dd{ margin:.15rem 0 0; font-size:1.15rem; font-weight:700; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.sn-stats dd small{ font-size:.7rem; font-weight:500; color: var(--text-dim); }

/* Dano por tipo de alvo. */
.sn-classes{ border-radius:12px; border:1px solid var(--hairline); overflow:hidden; }
.sn-classes-titulo{ padding:.5rem .75rem; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--text-dim); background: rgba(0,0,0,.2); }
.sn-classes table{ width:100%; border-collapse:collapse; font-size:.85rem; }
.sn-classes th, .sn-classes td{ padding:.4rem .75rem; border-top:1px solid var(--hairline); text-align:left; }
.sn-classes thead th{ font-size:.68rem; font-weight:600; color: var(--text-dim); border-top:0; }
.sn-classes tbody th{ font-weight:500; color: var(--text); }
.sn-classes td{ font-variant-numeric: tabular-nums; color: var(--text-bright); font-weight:600; }
.sn-classes tr.is-imune td{ color: var(--text-dim); font-weight:500; }

.sn-elementos{ display:flex; flex-wrap:wrap; }

/* Regras. */
.sn-regras{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.45rem; font-size:.86rem; color: var(--text); }
.sn-regras li{ position:relative; padding-left:1.1rem; }
.sn-regras li::before{ content:''; position:absolute; left:0; top:.55em; width:6px; height:6px; border-radius:50%; background: var(--cor); box-shadow: 0 0 8px var(--cor); }

.sn-imunes{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:auto; padding-top:.75rem; border-top:1px dashed var(--hairline); }
.sn-imunes > span{ margin-right:.25rem; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: var(--text-dim); }
.sn-imunes small{ font-weight:500; text-transform:none; letter-spacing:0; }
.sn-imunes .elemento-badge{ float:none; }

/* ---------- Sinergias ---------- */
.sn-sinergias{ display:grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap:.75rem; }
.sn-sinergia{
  --cor:#9aa0b4;
  display:flex; gap:.8rem; padding:.8rem; border-radius:14px; text-decoration:none; color: var(--text);
  border:1px solid var(--hairline); background: color-mix(in srgb, var(--cor) 6%, var(--panel-2));
  transition: border-color .15s ease, background .15s ease;
}
.sn-sinergia:hover, .sn-sinergia:focus-visible{ border-color: var(--cor); background: color-mix(in srgb, var(--cor) 12%, var(--panel-2)); color: var(--text); }
.sn-sinergia:focus-visible{ outline:2px solid var(--cor); outline-offset:2px; }
.sn-sinergia-img{ width:64px; height:64px; flex-shrink:0; object-fit:contain; border-radius:12px; background: rgba(0,0,0,.25); }
.sn-sinergia-corpo{ display:flex; flex-direction:column; gap:.35rem; min-width:0; }
.sn-sinergia-topo{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.sn-sinergia-topo b{ font-size:1rem; color: var(--text-bright); }
.sn-sinergia-efeito{ font-size:.84rem; }
.sn-sinergia-niveis{ display:flex; flex-wrap:wrap; gap:.3rem; }
.sn-sinergia-niveis span{
  display:inline-flex; flex-direction:column; align-items:center; min-width:42px; padding:.2rem .35rem; border-radius:8px;
  background: rgba(0,0,0,.25); font-weight:700; font-variant-numeric: tabular-nums; color: var(--text-bright); font-size:.85rem;
}
.sn-sinergia-niveis small{ font-size:.6rem; font-weight:600; color: var(--text-dim); }
.sn-sinergia-unidade{ font-size:.72rem; color: var(--text-dim); }

/* ---------- Regras gerais ---------- */
.sn-gerais{ margin:0; padding-left:1.1rem; display:flex; flex-direction:column; gap:.55rem; font-size:.88rem; color: var(--text); max-width:90ch; }
.sn-gerais b{ color: var(--text-bright); }
.sn-gerais small{ color: var(--text-dim); }

@media (max-width:520px){
  .sn-card{ padding:1rem; }
  .sn-card-titulo h2{ font-size:1.45rem; }
  .sn-card-icone{ width:50px; height:50px; }
  .sn-card-icone img{ width:32px; height:32px; }
}
@media (prefers-reduced-motion: reduce){
  .sn-chip, .sn-sinergia{ transition:none; }
  .sn-chip:hover{ transform:none; }
}