/* dungeon.css — modo Masmorra (docs/specs/dungeons.md): a tela de escolha (`ui/windows/dungeonSelect.js`)
   e o painel da incursão (`ui/widgets/bossBar.js`, montado por `ui/screens/explorationHud.js`).
   Medidas em px de arte, sempre calc(N * var(--px)); posição sempre left/top, nunca transform (ui-gameplay.md §0.1).
   Nada aqui toca a Exploração: as regras do HUD estão todas sob `.scene-dungeon`, classe que o HUD só põe quando o
   `mode` do estado inicial da arena é `dungeon`. */

/* ---- a tela de escolha: painel 420 × 258 em (110, 46) ------------------------------------------------------
   Miolo do `.panel` (borda 8): x 118…522, y 54…296. O título entra 4 px na faixa da borda em cima e as duas colunas
   2 px nas laterais — o mesmo truque de windows.css —, o que dá a área útil medida no projeto: x 116…524, y 62…298. */
.dg-panel {
  position: absolute;
  left: calc(110 * var(--px));
  top: calc(46 * var(--px));
  width: calc(420 * var(--px));
  height: calc(258 * var(--px));
  /* camada dos seletores de modo (screens.css): acima das placas de NPC, ABAIXO das janelas (z 10+) — em 20 a Torre
     escondia a janela de Habilidades que o próprio "Ajustar a barra" abre */
  z-index: 9;
  pointer-events: auto;
}
.dg-panel > .window-title {
  height: calc(12 * var(--px));
  margin: calc(-4 * var(--px)) calc(-2 * var(--px)) 0;
  padding: 0 calc(2 * var(--px));
  cursor: default;
}
.dg-cols {
  position: relative;
  display: flex;
  gap: calc(10 * var(--px));
  height: calc(236 * var(--px));
  margin: 0 calc(-2 * var(--px));
}
/* Divisória vertical de 1 px em x 266 (a coluna esquerda acaba em 262), de y 62 a y 282. */
.dg-cols::after {
  content: '';
  position: absolute;
  left: calc(150 * var(--px));
  top: 0;
  width: var(--px);
  height: calc(220 * var(--px));
  background: rgba(244, 240, 230, 0.16);
  pointer-events: none;
}

/* Coluna esquerda: dez linhas de 22 px, x 116…262. */
.dg-list {
  width: calc(146 * var(--px));
  flex: none;
  display: flex;
  flex-direction: column;
}
.dg-row {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
  height: calc(22 * var(--px));
  padding: 0 calc(2 * var(--px));
  background: none;
  border: 0;
  text-align: left;
  color: var(--c-text);
  cursor: pointer;
}
.dg-row:hover, .dg-row:focus { background: rgba(255, 255, 255, 0.12); outline: none; }
.dg-row.is-selected { background: rgba(224, 176, 64, 0.22); color: var(--c-gold); }
.dg-row.is-locked { color: var(--c-text-dim); }
.dg-row-ico {
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  flex: none;
  background: var(--ui-ico_dungeon, none) center / auto no-repeat;
  image-rendering: pixelated;
}
/* Sem arte no manifesto o espaço continua reservado, mas SEM moldura: um quadrado vazio contornado parece imagem
   quebrada, e a linha tem de aparecer só sem ícone (D15). */
.dg-row-ico.is-empty { background: none; }
.dg-row-name {
  width: calc(100 * var(--px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dg-row-progress {
  width: calc(20 * var(--px));
  margin-left: auto;
  text-align: right;
}
/* Cadeado 8 × 8. Era desenhado em CSS "enquanto `ui/ico_lock` não existe no manifesto" (06-plano-de-arte) — e essa
   premissa caducou: `ico_lock` existe e é o cadeado de `abilities.css`, `craft.css`, `professions.css`, `work.css` e
   da ficha do Catálogo. Duas ideias iguais com dois desenhos é justamente o que a folha de contato do enxugamento
   pega (docs/UX-GRAMATICA.md §1: a série manda). A Masmorra passa a usar a MESMA peça; o `var(…, none)` mantém a
   guarda dos outros arquivos para o caso de a peça faltar no manifesto. */
.dg-row-lock, .dg-tier-lock {
  position: relative;
  width: calc(8 * var(--px));
  height: calc(8 * var(--px));
  margin-left: auto;
  background: var(--ui-ico_lock, none) center / calc(8 * var(--px)) calc(8 * var(--px)) no-repeat;
}

/* Coluna direita: x 272…524 (252 de largura). Tudo posicionado nas faixas medidas no projeto (§2). */
.dg-side {
  position: relative;
  width: calc(252 * var(--px));
  flex: none;
}
.dg-side > * { position: absolute; left: 0; right: 0; }
/* --- chefe-na-tela --- A coluna direita virou RETRATO + ficha curta. Faixas medidas (a coluna tem 236 px de altura,
   os mesmos de `.dg-cols`):
     0…12   nome da masmorra (a descrição de sabor e o melhor tempo da masmorra viraram dica — `.has-more`)
     14…142 o chefe, 128 × 128, à esquerda; a ficha de 120 px à direita dele
     146…196 os dez graus · 200 a divisória · 204…214 a nota do cadeado OU a linha da cadeia (nunca as duas)
     216…236 o interruptor "Continuar sozinho" + o botão "Entrar"
   A caixa do chefe é 128 e não 96 porque as grades dos chefes são 64, 96 e 128: só em 128 todas cabem em 1:1. */
.dg-name   { top: 0;                      height: calc(12 * var(--px)); font-size: var(--text-2); line-height: calc(12 * var(--px)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dg-boss   { top: calc(14 * var(--px));   left: 0; right: auto; width: calc(128 * var(--px)); height: calc(128 * var(--px)); display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 var(--px) rgba(244, 240, 230, 0.16); }
.dg-boss-art { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* Legenda do retrato: o NOME do chefe sobre uma tarja, sem o rótulo "Chefe:" — a moldura já diz o que é aquilo. */
.dg-boss-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(11 * var(--px));
  line-height: calc(11 * var(--px));
  text-align: center;
  background: rgba(0, 0, 0, 0.72);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Fita de risco: mesma régua da Exploração, agora SOBRE o chefe (antes dividia a linha do botão com ele). */
.dg-risk {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  /* DUAS linhas no máximo, e não `nowrap`: a fita tem a largura do retrato (128 px de arte) e
     "Arriscado · Falta defesa/sustentação" tem 36 caracteres para 26 que cabem — em uma linha ela era cortada no
     meio da palavra ("… leve poções Fal"), que é pior do que não mostrar. Com duas linhas ela ocupa 20 px do topo
     do retrato, onde quase nenhum chefe tem pixel, e o motivo (a parte que salva a corrida) fica legível. */
  min-height: calc(10 * var(--px));
  max-height: calc(20 * var(--px));
  line-height: calc(10 * var(--px));
  padding: 0 calc(2 * var(--px));
  background: rgba(0, 0, 0, 0.72);
  overflow: hidden;
}
.dg-risk:empty { display: none; }

/* A ficha: 120 px à direita do retrato, uma linha por fato. */
.dg-facts  { top: calc(14 * var(--px));   left: calc(132 * var(--px)); right: 0; height: calc(128 * var(--px)); display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.dg-fact   { height: calc(10 * var(--px)); line-height: calc(10 * var(--px)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dg-fact-power { display: flex; align-items: center; gap: calc(2 * var(--px)); }
.dg-fact-ico { width: calc(8 * var(--px)); height: calc(8 * var(--px)); flex: none; background: var(--ui-ico_power, none) center / contain no-repeat; image-rendering: pixelated; }
.dg-fact-v { overflow: hidden; text-overflow: ellipsis; }

/* Pips das salas: "Salas: 6" + "Monstros: 36" (25 caracteres de rótulo) viraram seis marcas contáveis de relance.
   A última é a sala do CHEFE e por isso é dourada — a corrida acaba nela. */
.dg-pips   { height: calc(10 * var(--px)); display: flex; align-items: center; gap: calc(2 * var(--px)); overflow: hidden; }
.dg-pip    { width: calc(6 * var(--px)); height: calc(6 * var(--px)); flex: none; background: var(--c-text-dim); }
.dg-pip.is-boss { background: var(--c-gold); }

/* Medidores: rótulo de uma palavra, barra de 1,0 (Exploração) a 3,0 e o número cravado. */
.dg-meter  { display: flex; align-items: center; gap: calc(3 * var(--px)); }
/* 32 e não 26: a fonte em uso é monoespaçada (4,8 px de arte por caractere) e "Ataque" precisa de 29 — em 26 o
   rótulo encostava na barra e perdia a última letra. */
.dg-meter-label { width: calc(32 * var(--px)); flex: none; overflow: hidden; }
.dg-meter-track { position: relative; flex: 1; height: calc(4 * var(--px)); background: rgba(0, 0, 0, 0.6); box-shadow: inset 0 0 0 var(--px) rgba(244, 240, 230, 0.28); }
.dg-meter-fill  { display: block; height: 100%; background: var(--c-gold); }
.dg-meter-v { width: calc(24 * var(--px)); flex: none; text-align: right; }

.dg-tiers  { top: calc(146 * var(--px));  height: calc(50 * var(--px)); display: grid; grid-template-columns: repeat(5, calc(28 * var(--px))); gap: calc(2 * var(--px)); }
.dg-rule   { top: calc(200 * var(--px));  height: var(--px); background: rgba(244, 240, 230, 0.16); }
/* C5 (análise crítica de 2026-09-22): o motivo do "Entrar" cinza dividia a faixa de 252 COM o botão de 120 px, e
   "Abre na Exploração 65" passava por baixo dele — o jogador lia metade da única frase que explica o bloqueio.
   A nota tem FAIXA SÓ SUA, acima do botão, e continua tendo depois do rework do chefe. */
.dg-lock-note { top: calc(204 * var(--px)); height: calc(10 * var(--px)); line-height: calc(10 * var(--px)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; }
/* --- masmorra-continuar --- (docs/specs/dungeons.md §12.10) A LINHA DA CADEIA do "Continuar sozinho" mora na MESMA faixa da
   nota do cadeado: grau trancado não tem cadeia, então as duas nunca aparecem juntas. Uma linha de 252 px (52 caracteres na
   fonte monoespaçada): a mais longa, "Segue do grau 9 ao 10. Para jogar só o 9, desligue.", tem 51. Encostada à direita e da
   LARGURA DO TEXTO (`left: auto`): a pista `.has-more` de uma linha de largura cheia riscaria a coluna de ponta a ponta
   (docs/UX-GRAMATICA.md §G4). */
.dg-side > .dg-auto-line { top: calc(204 * var(--px)); left: auto; right: 0; max-width: 100%; height: calc(10 * var(--px)); line-height: calc(10 * var(--px)); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; }
.dg-actions{ top: calc(216 * var(--px));  height: calc(20 * var(--px)); display: flex; align-items: center; justify-content: flex-end; gap: calc(6 * var(--px)); }
/* A linha do botão: [Continuar sozinho ⊂toggle⊃] [Entrar], à direita, em UMA linha — 117,6 do interruptor (17 caracteres +
   a peça de 16 + moldura e respiro) + 6 de vão + 120 do "Entrar" = 243,6 dos 252. As marcas que moravam aqui saíram: o
   conferido "limpo" repetia a grade, a de "missões pausadas" subiu para a ficha e o melhor tempo foi para o gesto do nome. */
.dg-actions > .btn { flex: none; }
.dg-actions > .btn:not(.aa-switch-btn) { width: calc(120 * var(--px)); justify-content: center; }
/* "Missões pausadas" na ficha do grau, só quando houver: as duas barras de pausa + a palavra. Duas BORDAS e não dois
   `clip-path`: `clip-path` aceita uma forma só, e a segunda seria silenciosamente ignorada. */
.dg-fact-paused { display: flex; align-items: center; gap: calc(3 * var(--px)); }
.dg-mark   { width: calc(8 * var(--px)); height: calc(8 * var(--px)); flex: none; }
.dg-mark.is-paused { background: none; box-sizing: border-box; border-left: calc(3 * var(--px)) solid var(--c-text-dim); border-right: calc(3 * var(--px)) solid var(--c-text-dim); }

/* Os dez botões de nível, 28 × 24, três estados distinguíveis em 1× (§2): limpo (moldura dourada + conferido),
   aberto (moldura normal), bloqueado (cinza + cadeado, não clicável). */
.dg-tier {
  position: relative;
  width: calc(28 * var(--px));
  height: calc(24 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(0, 0, 0, 0.35);
  border: var(--px) solid var(--c-text-dim);
  color: var(--c-text);
  cursor: pointer;
}
/* B143: o grau trancado é `aria-disabled` (e não `:disabled`) para continuar no Tab com o motivo alcançável —
   então é o `[aria-disabled]` que tira o realce de clicável. */
.dg-tier:hover:not(:disabled):not([aria-disabled='true']) { background: rgba(255, 255, 255, 0.14); }
.dg-tier.is-cleared { border-color: var(--c-gold); color: var(--c-gold); }
/* Bloqueado: o NÚMERO continua legível (o jogador precisa saber QUAL nível está trancado) e o cadeado vai para o
   canto, como selo — desenhado por cima do número ele apagava justamente a informação que a tela devia dar. */
.dg-tier.is-locked { border-color: #4a4640; color: #7c766e; cursor: default; }
.dg-tier.is-current { outline: var(--px) solid var(--c-gold); outline-offset: var(--px); }
.dg-tier-n { line-height: 1; }
/* Marca de conferido 6 × 6 no canto inferior direito. */
.dg-tier-check {
  position: absolute;
  right: var(--px);
  bottom: var(--px);
  width: calc(6 * var(--px));
  height: calc(6 * var(--px));
  background: var(--c-gold);
  clip-path: polygon(0 55%, 22% 33%, 40% 55%, 78% 0, 100% 22%, 40% 100%);
}
.dg-tier > .dg-tier-lock { position: absolute; right: var(--px); bottom: var(--px); margin: 0; }

/* ---- o painel da incursão (§3) — só em masmorra, só na faixa livre x 144…536 / y 4…38 ---------------------- */
.hud-boss, .hud-objective {
  position: absolute;
  left: 50%;
  width: calc(240 * var(--px));
  margin-left: calc(-120 * var(--px));
  pointer-events: none;
  text-shadow: var(--px) var(--px) 0 #000;
}
/* --- chefe-na-tela --- A barra do chefe ganhou o ROSTO dele à esquerda. Ela pôde crescer para os 34 px INTEIROS
   da faixa livre (y 4…38) porque, com o chefe vivo, o bloco de objetivo sai da tela: "Sala 6 de 6 · chefe" dizia
   em 19 caracteres o que a barra do chefe já diz (`explorationHud.js`). O bloco cresceu de 240 para 268 e continua
   centrado dentro dos x 144…536 da faixa livre: 268 centrado = x 202…470. */
.hud-boss { top: calc(4 * var(--px)); height: calc(34 * var(--px)); width: calc(268 * var(--px)); margin-left: calc(-134 * var(--px)); display: flex; align-items: center; gap: calc(4 * var(--px)); }
.hud-boss-face { width: calc(32 * var(--px)); height: calc(32 * var(--px)); flex: none; display: flex; align-items: center; justify-content: center; overflow: hidden; background: rgba(0, 0, 0, 0.45); }
.hud-boss-body { flex: 1; min-width: 0; }
.hud-boss-line {
  display: flex;
  justify-content: space-between;
  gap: calc(4 * var(--px));
  height: calc(10 * var(--px));
  line-height: calc(10 * var(--px));
  white-space: nowrap;
  overflow: hidden;
}
.hud-boss-name { overflow: hidden; text-overflow: ellipsis; }
.hud-boss-pct { flex: none; }

.hud-objective { top: calc(24 * var(--px)); height: calc(15 * var(--px)); }
.hud-objective-text {
  height: calc(10 * var(--px));
  line-height: calc(10 * var(--px));
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
.hud-objective-bar {
  margin-top: var(--px);
  height: calc(4 * var(--px));
  background: rgba(0, 0, 0, 0.6);
  box-shadow: inset 0 0 0 var(--px) rgba(244, 240, 230, 0.28);
}
.hud-objective-fill {
  height: 100%;
  width: var(--value, 0%);
  background: var(--c-gold);
  transition: width 0.15s linear;
}

/* O combo (y 40) encostaria na barra de progresso: em masmorra ele desce (§3.3). Era y 52, mas o rastreador de missões
   mora em y 41…59 aqui (quests.css) e a 2.ª missão ("Mil cortes 0/2.000") passava por cima de "×N COMBO": y 64. */
.scene-dungeon .hud-combo { top: calc(64 * var(--px)); }

/* --- masmorra-continuar --- (docs/specs/dungeons.md §12.10) A PILHA DE CARTÕES DE LOOT desce na masmorra. O painel de cima à
   direita (z 12) ganhou a linha do "Continuar sozinho" — o interruptor de 24 e o selo de 10 — e chega a y 86 com "Maior golpe"
   à vista (medido no navegador em 2026-10-02); o primeiro cartão nascia em y 84 (loot.css), com a borda de cima POR BAIXO da
   moldura do painel. 86 + 6 de respiro = 92. Só a pilha: o banner de loot nasce no meio do topo, longe do painel. */
.scene-dungeon .loot-toasts { top: calc(92 * var(--px)); }

/* Ícone do botão `⛏ Masmorra` da barra do lobby: a regra base de `.lobby-btn-icon` é de screens.css (01-navegacao
   §4.5) e aqui só entra a arte. `ico_dungeon` (16×16, `art/src/ui/icons_dungeon.py`) entrou com o 06-plano-de-arte;
   sem ele no manifesto o botão continua aparecendo sem ícone (D15), como já acontece com `ico_clan`. */
.lobby-btn-icon.is-dungeon { background-image: var(--ui-ico_dungeon); }

/* Linha "Nível X destravado" do resumo, entre o subtítulo e as duas colunas — e, da cadeia do "Continuar sozinho", a linha
   do motivo da parada (`#summary-auto-stop`, em perigo: a frase inteira com o conselho, que quebra em duas se precisar). */
.summary-unlocked, .summary-auto-stop, .summary-chain-lost { margin-bottom: calc(4 * var(--px)); }