/* BARRA DE RANKING — a terceira da coluna. 28/08/2026, pedido do Zerg.
 *
 * 🚨 MESMA LINGUAGEM da placa de capítulo e do quadro de missão, de propósito:
 * cinza a 50%, mesmos cantos, mesma largura (17,8% do palco) e ancorada no
 * PALCO pelas variáveis `--hud16-*`. Inventar um desenho próprio deixaria três
 * caixas empilhadas com três aparências.
 *
 * 🚨 Nasce no `body`, irmã da `.btf` (z-index 42) — filha de contexto mais
 * baixo não sobe acima da faixa. Foi a lição da placa de capítulo.
 */
.rkb {
  --bt-un: var(--hud16-un, var(--rpg-un, 1));
  position: fixed;
  left: calc(var(--hud16-px, 0px) + var(--hud16-pw, 100vw) * 0.018);
  /* A placa está em 18,5% e a missão em 26,35% — 7,85% de passo entre elas.
     Mantenho o mesmo passo para as três ficarem igualmente espaçadas. */
  top: calc(var(--hud16-py, 0px) + var(--hud16-ph, 100dvh) * 0.342);
  width: calc(var(--hud16-pw, 100vw) * 0.178);
  z-index: 46;

  /* 🚨 `none` por padrão e `grid` só com a faixa no ar — a mesma porteira da
     missão. Sem ela a caixa fica boiando na tela de login e sobre o painel de
     qualquer aba aberta, que foi o defeito que a placa de capítulo teve hoje. */
  display: none;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: 'icone titulo vortex'
                       'icone texto  vortex';
  align-items: center;
  gap: calc(1px * var(--bt-un)) calc(9px * var(--bt-un));
  padding: calc(4px * var(--bt-un)) calc(9px * var(--bt-un));
  box-sizing: border-box;

  background: rgba(120, 124, 132, .5);
  border-radius: calc(10px * var(--bt-un));
  box-shadow: inset 0 0 0 max(1px, calc(1px * var(--bt-un))) rgba(0, 0, 0, .35);
  font-family: 'Baloo 2', system-ui, sans-serif;
}
html[data-bt-faixa='1'] .rkb { display: grid }
/* some junto com as outras duas quando uma janela do kit abre */
html[data-rpgw] .rkb { display: none !important }

.rkb__icone {
  grid-area: icone;
  width: calc(30px * var(--bt-un));
  height: calc(30px * var(--bt-un));
  object-fit: contain;
}

/* Linha de cima: a palavra e, EM AMARELO, a colocação — foi o pedido. */
.rkb__titulo {
  grid-area: titulo;
  color: #fff;
  font-weight: 500;
  line-height: 1.15;
  font-size: calc(13px * var(--bt-un));
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.rkb__pos { color: #f0b429; font-weight: 700 }

/* Linha de baixo: a última derrota. */
.rkb__texto {
  grid-area: texto;
  color: #fff;
  line-height: 1.15;
  font-size: calc(12px * var(--bt-un));
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
}
.rkb__fase { color: #ffd76a; font-weight: 700 }

/* O botão do vórtice, no mesmo lugar em que a missão põe o prêmio. */
.rkb__vortex {
  grid-area: vortex;
  display: grid;
  place-items: center;
  margin-left: calc(8px * var(--bt-un));
  padding: calc(4px * var(--bt-un));
  border: 0;
  border-radius: calc(8px * var(--bt-un));
  background: rgba(0, 0, 0, .38);
  box-shadow: inset 0 0 0 max(1px, calc(1px * var(--bt-un))) #ffffff2e;
  cursor: pointer;
}
.rkb__vortex img {
  width: calc(22px * var(--bt-un));
  height: calc(22px * var(--bt-un));
  object-fit: contain;
}
.rkb__vortex:not(:disabled):hover { filter: brightness(1.15) }
.rkb__vortex:not(:disabled):active { scale: .95 }
/* Apagado quando não há morte para onde voltar — o teleporte nem existe. */
.rkb__vortex:disabled { cursor: default; opacity: .45 }

/* ── a caixinha de Sim/Não ──────────────────────────────────────────── */

.rkb-dlg { border: 0; padding: 0; background: none; color: inherit }
.rkb-dlg::backdrop { background: rgba(2, 6, 14, .62) }

.rkb-dlg__caixa {
  display: grid;
  justify-items: center;
  gap: 10px;
  max-width: min(92vw, 420px);
  padding: 18px 20px 16px;
  border-radius: 14px;
  background: linear-gradient(180deg, #1b2130, #141924);
  box-shadow: inset 0 0 0 1px #ffffff24, 0 12px 40px #000a;
  font-family: 'Baloo 2', system-ui, sans-serif;
  text-align: center;
}
.rkb-dlg__icone { width: 54px; height: 54px; object-fit: contain }
.rkb-dlg .dialog__title { margin: 0; color: #ffd76a; font-size: 18px; font-weight: 700 }
.rkb-dlg__fala { margin: 0; color: #e8ecf5; font-size: 14px; line-height: 1.4 }
.rkb-dlg__fala b { color: #ffd76a }

.rkb-dlg__opcoes { display: flex; gap: 10px; margin-top: 4px; flex-wrap: wrap; justify-content: center }
.rkb-dlg__op {
  padding: 9px 16px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  box-shadow: inset 0 0 0 1px #ffffff2e;
  color: #e8ecf5;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.rkb-dlg__op:hover { filter: brightness(1.15) }
.rkb-dlg__op--forte {
  background: linear-gradient(180deg, #ffd979, #e0a52e);
  box-shadow: inset 0 0 0 1px #00000059;
  color: #1b1205;
  font-weight: 700;
}
.rkb-dlg__op:disabled { opacity: .6; cursor: default }

/* ── o recado de recusa ─────────────────────────────────────────────── */

/* 🚨 A recusa do servidor PRECISA aparecer. "Você já foi além da sua última
   morte" engolido vira "cliquei e não aconteceu nada", que é o formato de um
   bug reportado. */
#rkb-aviso {
  position: fixed;
  left: 50%;
  bottom: 12%;
  translate: -50% 0;
  z-index: 2147483000;
  max-width: min(90vw, 420px);
  padding: 10px 16px;
  border-radius: 10px;
  background: rgba(20, 12, 12, .95);
  box-shadow: inset 0 0 0 1px #ff9a9a4d, 0 8px 24px #0009;
  color: #ffdede;
  font: 500 14px/1.35 'Baloo 2', system-ui, sans-serif;
  text-align: center;
}

/* AUTO-ENCAIXE: o JS escreve `--fs` quando a linha não cabe na largura da
   caixa. Piso de 9px (CONTRATO §9-ter) — abaixo disso o corte seco assume.
   Sem isto o "37" de "Última derrota Fase 37" era cortado fora. */
.rkb__titulo { font-size: var(--fs, calc(13px * var(--bt-un))) !important }
.rkb__texto  { font-size: var(--fs, calc(12px * var(--bt-un))) !important }

/* A barra inteira virou botão para o Ranking (28/08/2026). O vórtice dentro
   dela continua com destino próprio — ver o `stopPropagation` no index.js. */
.rkb { cursor: pointer }
.rkb:hover { filter: brightness(1.1) }

/* 18/09, pedido do Zerg (painel Ações admin, "Camadas de interface") —
   `body[data-cenario-ranking="off"]` escrito por combate/index.js. `!important`
   pra vencer o `display:grid` de `html[data-bt-faixa='1'] .rkb` acima. */
body[data-cenario-ranking='off'] .rkb {
  display: none !important;
}