/* QUADRO DE MISSÃO — abaixo da placa de capítulo. 28/08/2026, pedido do Zerg.
 *
 * Mesma linguagem da placa (cinza 50%, cantos arredondados, ancorado no PALCO).
 *
 * 🚨 LARGURA IGUAL À DA PLACA, por pedido: as duas usam `width: 24% do palco`,
 * não `max-width`. Com `max-width` cada caixa encolhia conforme o texto e elas
 * nunca ficavam do mesmo tamanho.
 *
 * 🚨 Nasce no `body`, irmã da `.btf` (z-index 42) — filho de contexto mais baixo
 * não sobe acima da faixa, como a placa de capítulo já tinha ensinado.
 */
.mis {
  --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 fica em 18,5% e tem 41px de altura; 1cm de respiro entre as duas
     (≈ 4,7% da altura do palco em 810px) põe esta em 27,5% */
  top: calc(var(--hud16-py, 0px) + var(--hud16-ph, 100dvh) * 0.2635);
  /* 🚨 LARGURA PELO CONTEÚDO, não fixa: o Zerg pediu que a caixa não sobre
     espaço vazio. `max-content` encolhe até o texto; o teto de 15 caracteres
     (abaixo) impede que um nome comprido a faça crescer na horizontal. */
  /* 🚨 MESMA LARGURA NAS DUAS, e sem sobra: o texto é cortado em 15
     caracteres, então 17,5% do palco é exatamente o que o conteúdo
     capado pede. Largura pelo conteúdo deixaria uma menor que a outra;
     largura maior deixaria espaço morto. */
  width: calc(var(--hud16-pw, 100vw) * 0.178);
  max-width: none;
  z-index: 46;

  display: none;
  grid-template-columns: auto auto auto;
  grid-template-areas: 'icone titulo premio'
                       'icone texto  premio'
                       'icone barra  premio';
  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;
  /* Clicável (28/08): o card abre a Afinidade da Deusa. */
  cursor: pointer;
}
html[data-bt-faixa='1'] .mis { display: grid }

.mis__icone  { grid-area: icone; width: calc(30px * var(--bt-un)); height: calc(30px * var(--bt-un)); object-fit: contain }
.mis__titulo { grid-area: titulo; color: #f0b429; font-weight: 500; line-height: 1.15;
               font-size: calc(13px * var(--bt-un)); white-space: nowrap }
/* 🚨 TETO DE 15 CARACTERES com reticências: nome comprido não pode esticar a
   caixa (pedido do Zerg). O texto completo fica no `title`, que o navegador
   mostra ao passar o mouse — assim nada se perde. */
.mis__texto  { grid-area: texto; color: #fff; line-height: 1.15;
               font-size: calc(12px * var(--bt-un)); white-space: nowrap;
               min-width: 0; max-width: 100%; overflow: hidden; text-overflow: clip /* sem "…": o Zerg achou feio; o nome inteiro fica no title */ }

/* barra de progresso, logo abaixo da descrição */
.mis__barra {
  grid-area: barra;
  height: calc(6px * var(--bt-un));
  border-radius: calc(3px * var(--bt-un));
  background: rgba(0, 0, 0, .45);
  overflow: hidden;
  margin-top: calc(2px * var(--bt-un));
}
.mis__barra > i {
  display: block; height: 100%; width: var(--pct, 0%);
  background: linear-gradient(90deg, #f0b429, #ffd76a);
}
.mis__pct {
  grid-area: barra; justify-self: end; align-self: center;
  font-size: calc(9px * var(--bt-un)); color: #fff; font-weight: 700;
  padding-right: calc(4px * var(--bt-un)); text-shadow: 0 1px 2px #000;
}

/* prêmio como BOTÃO de resgate: caixa atrás, clicável quando completo */
.mis__premio {
  grid-area: premio;
  display: flex; align-items: center; gap: calc(4px * var(--bt-un));
  margin-left: calc(8px * var(--bt-un));
  padding: calc(5px * var(--bt-un)) calc(8px * var(--bt-un));
  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;
  color: #ffd76a; font-weight: 500; font-size: calc(13px * var(--bt-un));
  white-space: nowrap;
  /* 🚨 só vira botão de verdade quando a missão fecha: prêmio clicável antes da
     hora convida o jogador a tentar resgatar o que ainda não ganhou */
  cursor: default; opacity: .75;
}
.mis[data-completa='1'] .mis__premio {
  cursor: pointer; opacity: 1;
  background: rgba(240, 180, 41, .22);
  box-shadow: inset 0 0 0 max(1px, calc(1px * var(--bt-un))) #f0b429;
}
.mis[data-completa='1'] .mis__premio:hover { filter: brightness(1.12) }
.mis__premio img { width: calc(16px * var(--bt-un)); height: calc(16px * var(--bt-un)); object-fit: contain }

/* some junto com a placa quando qualquer janela do kit abre — ver placa-fase */
html[data-rpgw] .mis { display: none !important }

/* 18/09, pedido do Zerg (painel Ações admin, "Camadas de interface") —
   `body[data-cenario-missao="off"]` escrito por combate/index.js. Achado
   testando ao vivo: o card de missão que o jogador VÊ (o que fica na coluna
   embaixo do perfil, "Missão: <objetivo>") é ESTA `.mis`, não `.btl-missao`
   (que é um indicador separado, só de encontro de chefe — continua gateado
   também, ver `batalha/chefe-missao.css`, mas sozinho não bastava). */
body[data-cenario-missao='off'] .mis { display: none !important }

/* AUTO-ENCAIXE: o JS escreve `--fs` quando o nome não cabe. O piso é 9px
   (CONTRATO §9-ter) — abaixo disso a letra deixa de ser legível na tela do
   celular, então o corte seco assume. */
.mis__texto { font-size: var(--fs, calc(12px * var(--bt-un))) !important }

/* ── #1362: missão real, prêmio resgatável, bolinha da Deusa ─────────── */
.mis__icone-caixa { grid-area: icone; position: relative; display: inline-grid; place-items: center; }
.mis__icone-caixa .mis__icone { grid-area: auto; }
/* Zerg 22/09 (8º lote #8): bolinha de notificação menor — era 9px. */
.mis__ponto {
  position: absolute;
  top: calc(-2px * var(--bt-un));
  right: calc(-3px * var(--bt-un));
  width: calc(6px * var(--bt-un));
  height: calc(6px * var(--bt-un));
  border-radius: 50%;
  background: #ff3b3b;
  box-shadow: 0 0 0 max(1px, calc(1.5px * var(--bt-un))) #fff, 0 0 6px #ff3b3b;
  animation: mis-pulsa 1.4s ease-in-out infinite;
}
.mis__ponto[hidden] { display: none; }
@keyframes mis-pulsa { 0%, 100% { transform: scale(1) } 50% { transform: scale(1.25) } }
.mis__premio:disabled { cursor: default; }
.mis[data-completa='0'] .mis__premio { filter: grayscale(.6) brightness(.8); }
.mis[data-resgatada='1'] .mis__premio { filter: grayscale(1) brightness(.75); }
.mis__premio--pago { animation: mis-pago .5s ease-out 2; }
@keyframes mis-pago { 50% { transform: scale(1.15); filter: brightness(1.4) } }