/* invasoes.css -- página /invasoes. Acento vermelho-alaranjado do aviso "Invasão" do jogo; faixas 1 a 5 em escala
   de calor. Depende de codex.css e pals-list.css (cabeçalho). O modal usa o .modal-backdrop global. */
.inv-pagina, .inv-modal{
  --inv-acento: #ff7a59;
  --inv-acento-soft: rgba(255,122,89,.12);
  --inv-acento-linha: rgba(255,122,89,.35);
  --inv-fundo: #12151f;
  --inv-fundo-2: #0e1119;
  --inv-borda: #262b3d;
  --inv-f1: #7fd1a5; --inv-f2: #c9d36b; --inv-f3: #f2b45a; --inv-f4: #ff8a5c; --inv-f5: #ff5470;
  --inv-faccao: #7fb4ff; --inv-pals: #8fe0a0; --inv-policia: #ffcc4d;
}
.inv-cabecalho{ text-align:left; margin-bottom:1.5rem; }
.inv-cabecalho h1 em{ color: var(--inv-acento); }
.inv-cabecalho p{ max-width:72ch; }
.inv-selo{
  display:inline-flex; align-items:center; gap:.4rem; padding:.2rem .65rem; margin-bottom:.6rem; border-radius:3px;
  background: linear-gradient(90deg, rgba(255,84,112,.25), rgba(255,122,89,.08)); border-left:3px solid var(--inv-f5);
  color:#ffd0c4; font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
}

.inv-secao{ margin-bottom:2.25rem; }
.inv-titulo{ display:flex; align-items:center; gap:.55rem; font-size:1.25rem; color: var(--text-bright); margin-bottom:.9rem; text-wrap:balance; }
.inv-titulo i{ color: var(--inv-acento); }
.inv-texto{ max-width:80ch; color: var(--text); }
.inv-nota{ font-size:.82rem; color: var(--text-dim); margin:.75rem 0 0; }
.inv-nota i{ color: var(--inv-acento); margin-right:.25rem; }
.inv-rotulo{ display:block; font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--text-dim); margin-bottom:.4rem; }
.inv-num{ font-variant-numeric: tabular-nums; white-space:normal; }
.inv-fonte{ display:inline-block; padding:0 .4rem; border-radius:3px; font-size:.68rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; vertical-align:middle; cursor:help; }
.inv-fonte--comunidade{ background: rgba(127,180,255,.14); color: var(--inv-faccao); }

/* ---------- Ciclo ---------- */
.inv-ciclo{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap:.6rem; counter-reset: ciclo; }
.inv-ciclo li{
  position:relative; display:flex; flex-direction:column; gap:.35rem; padding:1rem .9rem .9rem;
  background: var(--inv-fundo); border:1px solid var(--inv-borda); border-radius:6px;
}
.inv-ciclo li:not(:last-child)::after{
  content:''; position:absolute; top:1.75rem; right:-.48rem; width:.36rem; height:.36rem; border-top:2px solid var(--inv-acento-linha); border-right:2px solid var(--inv-acento-linha);
  transform: rotate(45deg); z-index:1;
}
.inv-ciclo-icone{ width:2.1rem; height:2.1rem; display:grid; place-items:center; border-radius:50%; background: var(--inv-acento-soft); color: var(--inv-acento); font-size:1rem; }
.inv-ciclo b{ color: var(--text-bright); font-size:1rem; font-variant-numeric: tabular-nums; }
.inv-ciclo span:last-child{ font-size:.8rem; color: var(--text-dim); line-height:1.4; }

/* ---------- Faixas ---------- */
.inv-faixa{
  display:inline-grid; place-items:center; min-width:1.65rem; height:1.65rem; padding:0 .3rem; border-radius:4px; font-weight:700; font-size:.85rem;
  color:#0b0d13; background: var(--c, var(--inv-f1));
}
.inv-faixa--1{ --c: var(--inv-f1); } .inv-faixa--2{ --c: var(--inv-f2); } .inv-faixa--3{ --c: var(--inv-f3); }
.inv-faixa--4{ --c: var(--inv-f4); } .inv-faixa--5{ --c: var(--inv-f5); }

/* ---------- Simulador ---------- */
.inv-simulador{ padding:1.25rem; border:1px solid var(--inv-acento-linha); border-radius:8px; background: linear-gradient(180deg, rgba(255,122,89,.06), transparent 40%), var(--inv-fundo-2); }
.inv-sim-controles{ display:grid; grid-template-columns: minmax(0, 1fr) 260px auto; gap:1rem 1.5rem; align-items:end; margin-bottom:1rem; }
.inv-regioes{ display:flex; flex-wrap:wrap; gap:.35rem; }
.inv-regiao, .inv-aba{
  padding:.35rem .75rem; border-radius:999px; border:1px solid var(--inv-borda); background: var(--inv-fundo); color: var(--text); font-size:.82rem;
  transition: border-color .15s, color .15s, background .15s;
}
.inv-regiao:hover, .inv-aba:hover{ border-color: var(--inv-acento-linha); color: var(--text-bright); }
.inv-regiao.is-on, .inv-aba.is-on{ border-color: var(--inv-acento); background: var(--inv-acento-soft); color: var(--text-bright); }
.inv-regiao:focus-visible, .inv-aba:focus-visible, .inv-grupo:focus-visible, .inv-sim-item:focus-visible, .inv-botao:focus-visible{ outline:2px solid var(--inv-acento); outline-offset:2px; }
.inv-nivel{ display:flex; align-items:center; gap:.75rem; }
.inv-nivel input{ flex:1; accent-color: var(--inv-acento); }
.inv-nivel output{ min-width:2.6rem; text-align:center; padding:.2rem .4rem; border-radius:4px; background: var(--inv-fundo); border:1px solid var(--inv-borda); color: var(--text-bright); font-weight:700; font-variant-numeric: tabular-nums; }
.inv-switch{ display:flex; align-items:center; gap:.55rem; cursor:pointer; color: var(--text); font-size:.88rem; margin:0; }
.inv-switch span{ display:inline-flex; align-items:center; gap:.35rem; }

.inv-sim-resumo{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:.9rem; }
.inv-sim-chip{ display:flex; align-items:center; gap:.5rem; padding:.35rem .7rem; border-radius:4px; background: var(--inv-fundo); border:1px solid var(--inv-borda); }
.inv-sim-chip span{ font-size:.72rem; color: var(--text-dim); text-transform:uppercase; letter-spacing:.06em; }
.inv-sim-chip b{ color: var(--text-bright); font-variant-numeric: tabular-nums; }
.inv-sim-aviso{ color: var(--text-dim); font-size:.9rem; }
.inv-moeda{ display:inline-flex; align-items:center; gap:.3rem; }

.inv-sim-lista{ display:grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap:.6rem; }
.inv-sim-item{
  position:relative; overflow:hidden; display:grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap:.8rem; align-items:center; text-align:left;
  padding:.8rem .9rem 1rem; border-radius:6px; border:1px solid var(--inv-borda); background: var(--inv-fundo); color: var(--text);
  transition: border-color .15s, transform .15s;
}
.inv-sim-item:hover{ border-color: var(--tipo, var(--inv-acento)); transform: translateY(-1px); }
.inv-sim-pct{ font-size:1.35rem; font-weight:700; color: var(--tipo, var(--text-bright)); font-variant-numeric: tabular-nums; text-align:center; }
.inv-sim-corpo{ display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.inv-sim-barra{ position:absolute; left:0; right:0; bottom:0; height:3px; background: rgba(255,255,255,.05); }
.inv-sim-barra::after{ content:''; position:absolute; inset:0 auto 0 0; width: var(--p); background: var(--tipo, var(--inv-acento)); }

/* ---------- Tabela de graus ---------- */
.inv-tabela-wrap{ overflow-x:auto; border:1px solid var(--inv-borda); border-radius:6px; background: var(--inv-fundo); }
.inv-tabela{ width:100%; border-collapse:collapse; font-size:.86rem; }
.inv-tabela th{ padding:.6rem .75rem; text-align:left; font-size:.7rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase; color: var(--text-dim); border-bottom:1px solid var(--inv-borda); }
.inv-tabela td{ padding:.6rem .75rem; border-bottom:1px solid rgba(255,255,255,.04); vertical-align:middle; color: var(--text); }
.inv-tabela tr:last-child td{ border-bottom:0; }
.inv-itens{ display:flex; flex-wrap:wrap; gap:.35rem; }
.inv-item{
  display:inline-flex; align-items:center; gap:.35rem; padding:.15rem .5rem .15rem .2rem; border-radius:4px;
  background: rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); color: var(--text); text-decoration:none; font-size:.8rem;
}
a.inv-item:hover{ border-color: var(--inv-acento-linha); color: var(--text-bright); }
.inv-item img{ width:26px; height:26px; object-fit:contain; }
.inv-item b{ color: var(--text-bright); font-variant-numeric: tabular-nums; }

/* ---------- Grupos por região ---------- */
.inv-abas{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:1rem; }
.inv-painel{ display:flex; flex-direction:column; gap:.5rem; }
.inv-linha-faixa{ display:grid; grid-template-columns: 1.9rem repeat(2, minmax(0, 1fr)); gap:.5rem; align-items:stretch; }
.inv-linha-faixa > .inv-faixa{ align-self:center; }
.inv-grupo{
  display:flex; flex-direction:column; gap:.25rem; text-align:left; padding:.75rem .9rem; border-radius:6px;
  border:1px solid var(--inv-borda); border-left:3px solid var(--tipo); background: var(--inv-fundo); color: var(--text);
  transition: background .15s, border-color .15s;
}
.inv-grupo:hover{ background: color-mix(in srgb, var(--tipo) 7%, var(--inv-fundo)); border-color: color-mix(in srgb, var(--tipo) 45%, var(--inv-borda)); }
.inv-grupo--faccao{ --tipo: var(--inv-faccao); } .inv-grupo--pals{ --tipo: var(--inv-pals); } .inv-grupo--policia{ --tipo: var(--inv-policia); }
.inv-grupo-tipo{ font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--tipo); }
.inv-grupo-nome{ color: var(--text-bright); font-weight:600; font-size:.95rem; line-height:1.3; }
.inv-grupo-meta{ display:flex; flex-wrap:wrap; gap:.25rem .8rem; font-size:.76rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.inv-grupo-meta i{ opacity:.7; margin-right:.15rem; }

/* ---------- Destaques ---------- */
.inv-duas{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:1rem; margin-bottom:2.25rem; }
.inv-duas .inv-secao{ margin-bottom:0; }
.inv-destaque{ padding:1.15rem 1.25rem; border-radius:8px; border:1px solid var(--inv-borda); background: var(--inv-fundo); }
.inv-destaque p{ font-size:.9rem; }
.inv-destaque a{ color: var(--inv-acento); }
.inv-destaque--policia{ border-color: rgba(255,204,77,.35); background: linear-gradient(160deg, rgba(255,204,77,.07), transparent 55%), var(--inv-fundo); }
.inv-destaque--policia .inv-titulo i{ color: var(--inv-policia); }
.inv-botao{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; padding:.45rem .9rem; border-radius:4px;
  border:1px solid var(--inv-acento-linha); background: transparent; color: var(--text-bright); font-size:.84rem;
}
.inv-botao:hover{ background: var(--inv-acento-soft); border-color: var(--inv-acento); }
.inv-precos{ display:grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap:.35rem; }
.inv-preco{ display:flex; justify-content:space-between; align-items:center; gap:.5rem; padding:.4rem .6rem; border-radius:4px; background: rgba(255,255,255,.03); font-size:.82rem; }
.inv-preco span{ color: var(--text-dim); }
.inv-preco b{ display:inline-flex; align-items:center; gap:.25rem; color: var(--gold); font-variant-numeric: tabular-nums; }

.inv-fontes ul{ margin:0; padding-left:1.1rem; font-size:.85rem; color: var(--text); display:flex; flex-direction:column; gap:.35rem; max-width:90ch; }
.inv-fontes a{ color: var(--inv-acento); }

/* ---------- Modal ---------- */
.inv-modal{ background: var(--inv-fundo-2); border:1px solid var(--inv-borda); color: var(--text); }
.inv-modal .modal-header{ border-bottom-color: var(--inv-borda); }
.inv-modal .modal-title{ display:flex; align-items:center; gap:.5rem; color: var(--text-bright); }
.inv-modal .modal-title i{ color: var(--inv-acento); }
.inv-modal-tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-bottom:.9rem; }
.inv-tag{ display:inline-flex; align-items:center; gap:.3rem; padding:.2rem .55rem; border-radius:4px; background: rgba(255,255,255,.05); font-size:.76rem; color: var(--text); }
.inv-tag--alerta{ background: rgba(255,204,77,.12); color: var(--inv-policia); }
.inv-modal-resumo{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:.4rem; margin-bottom:1rem; }
.inv-modal-resumo div{ padding:.5rem .65rem; border-radius:4px; background: var(--inv-fundo); border:1px solid var(--inv-borda); }
.inv-modal-resumo span{ display:block; font-size:.66rem; letter-spacing:.07em; text-transform:uppercase; color: var(--text-dim); }
.inv-modal-resumo b{ font-size:1.05rem; color: var(--text-bright); font-variant-numeric: tabular-nums; }
.inv-onda{ margin-bottom:.8rem; border:1px solid var(--inv-borda); border-radius:6px; overflow:hidden; }
.inv-onda-topo{ display:flex; justify-content:space-between; align-items:center; padding:.45rem .75rem; background: linear-gradient(90deg, var(--inv-acento-soft), transparent); }
.inv-onda-topo b{ color: var(--text-bright); letter-spacing:.05em; text-transform:uppercase; font-size:.8rem; }
.inv-onda-topo span{ font-size:.78rem; color: var(--text-dim); }
.inv-ini{ display:grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto; gap:.75rem; align-items:center; padding:.5rem .75rem; border-top:1px solid rgba(255,255,255,.04); }
.inv-ini--otomo{ padding-left:2rem; background: rgba(255,255,255,.015); }
.inv-ini-img{ width:44px; height:44px; object-fit:contain; border-radius:50%; background: rgba(255,255,255,.04); }
.inv-ini-nome{ display:flex; flex-direction:column; min-width:0; }
.inv-ini-nome small{ font-size:.68rem; color: var(--text-dim); }
.inv-ini-nome b{ color: var(--text-bright); font-weight:600; font-size:.9rem; line-height:1.25; }
.inv-ini-nome b a{ color: inherit; text-decoration:none; border-bottom:1px dotted var(--inv-acento-linha); }
.inv-ini-nome > span{ display:flex; align-items:center; gap:.25rem; font-size:.76rem; color: var(--text-dim); }
.inv-elem{ width:18px; height:18px; }
.inv-ini-qtd{ font-weight:700; color: var(--inv-acento); font-variant-numeric: tabular-nums; }
.inv-ini-nv{ font-size:.8rem; color: var(--text); font-variant-numeric: tabular-nums; }
.inv-ini-stats{ display:flex; gap:.6rem; font-size:.78rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.inv-ini-stats i{ margin-right:.15rem; }
.inv-ini-stats .bi-heart-fill{ color:#ff6b81; } .inv-ini-stats .bi-lightning-fill{ color:#ffb648; } .inv-ini-stats .bi-shield-fill{ color:#7fb4ff; }
.inv-modal-rec{ margin-top:1rem; }

@media (max-width: 991.98px){
  .inv-ciclo{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-ciclo li::after{ display:none; }
  .inv-sim-controles{ grid-template-columns: minmax(0, 1fr); }
  .inv-duas{ grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px){
  .inv-ciclo{ grid-template-columns: minmax(0, 1fr); }
  .inv-linha-faixa{ grid-template-columns: 1.9rem minmax(0, 1fr); }
  .inv-linha-faixa .inv-grupo--pals{ grid-column: 2; }
  .inv-modal-resumo{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inv-ini{ grid-template-columns: 40px minmax(0, 1fr) auto; }
  .inv-ini-nv, .inv-ini-stats{ grid-column: 2 / -1; }
}
@media (prefers-reduced-motion: reduce){
  .inv-sim-item, .inv-grupo, .inv-regiao, .inv-aba{ transition:none; }
  .inv-sim-item:hover{ transform:none; }
}