/* =============================================================================
   kentauros.css - PÁGINA /sistemas/kentauros (BOSS MUNDIAL) - DOM2, 19/10/2026
   -----------------------------------------------------------------------------
   Carregada SÓ nesta página (block headExtra do kentauros.njk). Usa as cores do
   site.css (--cartao, --cartao-borda, --aurora, --aurora-2, --mudo, --texto) e as
   peças do sistemas.css (hn-tabela, hn-resumo, st-aviso). Prefixo kt-.
   Nada aqui muda outra página. Celular: tudo em 1 coluna abaixo de 760 px.
   ============================================================================= */

/* ---- topo: render do Kentauros + apresentação + contagem ---------------- */
.kt-topo { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 24px; align-items: center;
  background: radial-gradient(ellipse at 20% 40%, #ff8a3d22, transparent 60%), var(--cartao);
  border: 1px solid var(--cartao-borda); border-radius: 16px; padding: 18px 22px; margin: 6px 0 18px; }
.kt-topo figure { margin: 0; }
.kt-topo img { display: block; width: 100%; height: auto; border-radius: 12px; background: #0f1218; }
.kt-topo figcaption { font-size: .78rem; color: var(--mudo); margin-top: 6px; text-align: center; }
.kt-frase { font: 600 1.18rem/1.45 Cinzel, serif; color: var(--texto); margin: 0 0 12px; }
.kt-fichas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.kt-fichas li { background: #0b1029; border: 1px solid var(--cartao-borda); border-radius: 10px; padding: 8px 10px; font-size: .82rem; color: var(--mudo); }
.kt-fichas b { display: block; color: var(--texto); font-size: 1.02rem; }

/* ---- contagem regressiva (preenchida pelo /static/js/kentauros.js) ------- */
.kt-relogio { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid #ffc46b55;
  background: linear-gradient(90deg, #ff8a3d1a, #ffc46b0d); }
.kt-relogio-tit { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--mudo); margin: 0; }
.kt-relogio-hora { font: 700 1.05rem Inter, sans-serif; color: var(--texto); margin: 2px 0 6px; }
.kt-relogio-conta { font: 800 1.9rem/1.1 Cinzel, serif; color: var(--aurora-2); font-variant-numeric: tabular-nums; }
.kt-relogio-nota { font-size: .78rem; color: var(--mudo); margin: 6px 0 0; }

/* ---- sumário de âncoras --------------------------------------------------- */
.kt-sumario { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 18px; padding: 0; list-style: none; }
.kt-sumario a { display: inline-block; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--cartao-borda); font-size: .82rem; color: var(--texto); }
.kt-sumario a:hover { border-color: var(--aurora); text-decoration: none; }

/* ---- duas colunas (mapa + texto) ----------------------------------------- */
.kt-duas { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: start; }
.kt-duas figure { margin: 0; }
.kt-duas img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--cartao-borda); }
.kt-duas figcaption { font-size: .78rem; color: var(--mudo); margin-top: 6px; }
.kt-legenda { list-style: none; padding: 0; margin: 6px 0 0; font-size: .8rem; color: var(--mudo); display: grid; gap: 3px; }
.kt-bola { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: -1px; margin-right: 6px; border: 2px solid #140a05; }
.kt-bola.boss { background: #e6aa28; } .kt-bola.portal { background: #5aaaff; } .kt-bola.anel { background: #f5f5f5; }

/* ---- passos/linha do tempo do combate ------------------------------------ */
.kt-tempo { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 8px; }
.kt-tempo li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: baseline;
  background: var(--cartao); border: 1px solid var(--cartao-borda); border-radius: 12px; padding: 10px 14px; color: #d6d4e6; }
.kt-tempo time { font: 700 .95rem Inter, sans-serif; color: var(--aurora-2); }

/* ---- prêmios: cartões por colocação --------------------------------------- */
.kt-podio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; margin: 10px 0; }
.kt-lugar { background: var(--cartao); border: 1px solid var(--cartao-borda); border-radius: 14px; padding: 14px 16px; }
.kt-lugar h3 { margin: 0 0 8px; font: 700 1.05rem Cinzel, serif; display: flex; align-items: center; gap: 8px; }
.kt-lugar.ouro { border-color: #e6c35c88; box-shadow: 0 0 0 1px #e6c35c33 inset; }
.kt-lugar.prata { border-color: #c9d1dd77; } .kt-lugar.bronze { border-color: #cd8a5677; }
.kt-lugar ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .9rem; }
.kt-chance { display: inline-block; min-width: 46px; text-align: center; padding: 0 7px; border-radius: 999px; font: 700 .76rem Inter, sans-serif;
  background: #ffc46b1f; color: var(--aurora-2); margin-left: 4px; }
.kt-chance.certa { background: #6bd38a22; color: #8fe0a6; }

/* ---- ícone grande de arma (3 casas de altura) na tabela de transmutação -- */
.kt-arma { display: inline-flex; align-items: center; gap: 8px; }
.kt-arma img { width: 22px; height: auto; image-rendering: pixelated; background: #0b1029; border-radius: 6px; padding: 2px; }
.kt-seta { color: var(--aurora-2); font-weight: 800; }
.kt-total { font-size: .86rem; color: var(--mudo); }

/* ---- FAQ (details/summary: funciona sem JS) ------------------------------- */
.kt-faq details { background: var(--cartao); border: 1px solid var(--cartao-borda); border-radius: 12px; padding: 0 14px; margin-bottom: 8px; }
.kt-faq summary { cursor: pointer; padding: 11px 0; font-weight: 600; color: var(--texto); }
.kt-faq details[open] summary { color: var(--aurora-2); }
.kt-faq details p { margin: 0 0 12px; color: #d6d4e6; }

.kt-escala { margin: 12px 0 0; }
.kt-escala img { display: block; width: 100%; max-width: 640px; height: auto; border-radius: 12px; border: 1px solid var(--cartao-borda); }
.kt-escala figcaption { font-size: .78rem; color: var(--mudo); margin-top: 6px; }

@media (max-width: 760px) {
  .kt-topo, .kt-duas { grid-template-columns: minmax(0, 1fr); }
  .kt-topo figure { max-width: 300px; margin: 0 auto; }
  .kt-relogio-conta { font-size: 1.6rem; }
  .kt-tempo li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}