/* ===========================================================================
   DODGE / CRITICO / REFLECT - ajuste curado             [28/09/2026]

   POR QUE ESTE ARQUIVO EXISTE
   O dono reclamou que a pagina estava "muito monocromatica". A causa eram
   DUAS camadas de CSS empilhadas:
     1. a rede de seguranca do eclipse.css, que forca TODO texto do miolo pra
        prata (#B6BDCC) com !important;
     2. o gerador automatico de 22/09 (css/eclipse/auto/), que remapeou as 9
        variaveis de cor proprias da pagina antiga para 3 cinzas - ate a cor
        de alerta virou cinza.
   O layout carrega /css/eclipse/p-<subtopic>.css DEPOIS do automatico, entao
   este arquivo ganha. E o lugar certo de devolver cor sem mexer no tema do
   site inteiro.

   A COR TEM FUNCAO, nao e enfeite: cada atributo tem a sua, e ela se repete
   no card, na linha da tabela e na barra. Assim o jogador associa a cor ao
   atributo e para de confundir os tres.
     Dodge   -> azul   (--ec-crystal)  defesa
     Critico -> dourado (--ec-eternal-txt) ataque
     Reflect -> roxo   (--ec-genesis-txt)  contra-ataque
   =========================================================================== */

.bm-dcr{
  --dcr-dodge:var(--ec-crystal,#45A4CD);
  --dcr-crit:var(--ec-eternal-txt,#D4AE7E);
  --dcr-ref:var(--ec-genesis-txt,#C27BF3);
  --dcr-ok:var(--ec-ok,#5FBF8F);
  --dcr-bad:var(--ec-bad,#E8776B);
}

/* ---- hero ---- */
.bm-dcr .bm-dcr-hero h1{
  background:linear-gradient(92deg,var(--dcr-dodge),var(--dcr-crit) 55%,var(--dcr-ref));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--dcr-crit) !important}
.bm-dcr .bm-dcr-fonte{font-size:.86em;opacity:.75;margin-top:6px}

/* ---- os tres cards ---- */
.bm-dcr-tres{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0 4px}
.bm-dcr-card{position:relative;overflow:hidden}
.bm-dcr-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--cor)}
.bm-dcr-card.is-dodge{--cor:var(--dcr-dodge)}
.bm-dcr-card.is-crit{--cor:var(--dcr-crit)}
.bm-dcr-card.is-ref{--cor:var(--dcr-ref)}
.bm-dcr-card h3{color:var(--cor) !important;margin:0}
.bm-dcr-card-top{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bm-dcr-ico{font-size:26px;line-height:1}
.bm-dcr-papel{display:block;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ec-muted,#8C95A8) !important}
.bm-dcr-card b,.bm-dcr-card .bm-dcr-tela{color:var(--cor) !important}
.bm-dcr-obs{margin-top:10px;padding-top:9px;border-top:1px solid var(--ec-line,#272E3E);
  font-size:.88em;opacity:.8}

/* ---- as duas fases da escala ---- */
.bm-dcr-fases{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.bm-dcr-fase{padding:14px;border:1px solid var(--ec-line,#272E3E);border-radius:8px;
  background:var(--ec-panel-2,#161B26)}
.bm-dcr-fase b{display:block;margin:6px 0;font-size:1.25em}
.bm-dcr-fase.is-f1{border-left:3px solid var(--dcr-ok)}
.bm-dcr-fase.is-f1 b{color:var(--dcr-ok) !important}
.bm-dcr-fase.is-f2{border-left:3px solid var(--dcr-bad)}
.bm-dcr-fase.is-f2 b{color:var(--dcr-bad) !important}

.bm-dcr-atencao{border-left:3px solid var(--dcr-bad) !important}
.bm-dcr-atencao b{color:var(--dcr-bad) !important}

/* ---- tabelas com barra ---- */
.bm-dcr-tabela{overflow-x:auto;margin:12px 0}
.bm-dcr-tabela table{width:100%;border-collapse:collapse}
.bm-dcr-tabela th{text-align:left;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ec-muted,#8C95A8) !important;padding:8px 10px}
.bm-dcr-tabela td{padding:8px 10px;border-top:1px solid var(--ec-line,#272E3E)}
.bm-dcr-tabela tr.is-topo td{background:rgba(69,164,205,.10)}
.bm-dcr-tabela tr.is-topo b{color:var(--dcr-dodge) !important}
.bm-dcr-tabela tr.is-dodge b{color:var(--dcr-dodge) !important}
.bm-dcr-tabela tr.is-crit b{color:var(--dcr-crit) !important}
.bm-dcr-tabela tr.is-ref b{color:var(--dcr-ref) !important}
.bm-dcr-barra-td{width:38%;min-width:110px}
.bm-dcr-barra{display:block;height:8px;border-radius:99px;
  background:linear-gradient(90deg,var(--dcr-dodge),var(--dcr-crit))}

/* ---- calculadora ---- */
.bm-dcr-calc-linha{display:grid;grid-template-columns:200px 1fr;gap:16px;align-items:center}
.bm-dcr-calc label{display:block;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ec-muted,#8C95A8) !important}
.bm-dcr-calc input{width:100%;margin-top:6px;padding:10px 12px;border-radius:8px;
  border:1px solid var(--ec-line,#272E3E);background:var(--ec-panel,#10131B);
  color:var(--ec-silver,#E6E9F0);font-size:18px}
.bm-dcr-calc input:focus{outline:none;border-color:var(--dcr-dodge);
  box-shadow:0 0 0 3px rgba(69,164,205,.18)}
.bm-dcr-calc-out{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bm-dcr-calc-out span{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ec-muted,#8C95A8) !important}
.bm-dcr-calc-out b{font-size:1.5em;font-weight:600;color:var(--dcr-dodge) !important}
.bm-dcr-calc-bar{height:10px;margin-top:14px;border-radius:99px;
  background:var(--ec-panel,#10131B);border:1px solid var(--ec-line,#272E3E);overflow:hidden}
.bm-dcr-calc-bar span{display:block;height:100%;width:0;transition:width .25s ease;
  background:linear-gradient(90deg,var(--dcr-dodge),var(--dcr-crit),var(--dcr-ref))}

/* ---- distribuicao ---- */
.bm-dcr-faixas{display:flex;gap:3px;margin-top:12px;height:26px}
.bm-dcr-faixas span{display:flex;align-items:center;justify-content:center;border-radius:5px;
  font-size:11px;font-weight:700;color:#0B0E15 !important}
.bm-dcr-faixas span:nth-child(1){background:rgba(140,149,168,.55)}
.bm-dcr-faixas span:nth-child(2){background:rgba(69,164,205,.65)}
.bm-dcr-faixas span:nth-child(3){background:rgba(212,174,126,.75)}
.bm-dcr-faixas span:nth-child(4){background:rgba(194,123,243,.80)}
.bm-dcr-legenda{margin-top:7px;font-size:11px;opacity:.7}
.bm-dcr-legenda i{font-style:normal}
.bm-dcr-nota{font-size:.88em;opacity:.78;margin-top:10px}

/* ---- links ---- */
.bm-dcr-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* ---- telas pequenas ---- */
@media(max-width:860px){
  .bm-dcr-tres,.bm-dcr-fases,.bm-dcr-calc-linha{grid-template-columns:1fr}
  .bm-dcr-calc-out{grid-template-columns:1fr 1fr}
}