/* A ORIENTAÇÃO (docs/specs/ui-gameplay-janelas.md §16; docs/ux-casos.md §49): o painel "Como ficar mais forte", o selo e o painel do
   chefe, o próximo passo, a morte, o resumo da volta e a barra da faixa. UM BLOCO POR PEÇA, na ordem das subseções da spec; cada
   fatia da frente escreve só no bloco dela (prefixo `guide-` no painel). Medidas em px de arte: `calc(N * var(--px))`. */

/* ---- 16.2 o painel "Como ficar mais forte" (widgets/strongerPanel.js; o modelo da linha em ui/guideView.js › tipLine) ----
   Embutido: a largura é a do hospedeiro e o painel não tem moldura própria. A LINHA INTEIRA É O BOTÃO (sem `.btn`: o 9-slice comia
   8 px por lado e a linha de 16 não cabia no resumo); a ficha e o ganho não quebram (`nowrap`), o verbo quebra em duas linhas antes
   de qualquer corte (nome próprio inteiro, UX-GRAMATICA §3). A pista é da linha (uma por linha, teto 3) e o pontilhado vai no VERBO,
   não no botão: na linha de largura cheia ele riscava o painel de ponta a ponta (G4, "a pista tem a largura do que ela marca").
   O ALVO DO DEDO em todo hospedeiro (o painel do chefe também): a linha tem 24 de altura (o mínimo do lint do kit) e, com o vão de
   4 entre linhas, um `::after` invisível estica o alvo 2 para cima e 2 para baixo — 28 de linha a linha, encostadas (o molde do
   `.gold-label` de talents.css); nada muda de tamanho na tela. */
#ui-root .guide-panel { display: flex; flex-direction: column; gap: calc(2 * var(--px)); min-width: 0; }
#ui-root .guide-panel.hidden { display: none; }
#ui-root .guide-title { color: var(--c-text-dim); line-height: calc(10 * var(--px)); }
#ui-root .guide-list { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
#ui-root .guide-none { color: var(--c-text-dim); line-height: calc(10 * var(--px)); }
#ui-root .guide-tip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: calc(3 * var(--px));
  row-gap: calc(1 * var(--px));
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: calc(24 * var(--px));
  margin: 0;
  padding: calc(1 * var(--px)) calc(4 * var(--px));
  border: var(--px) solid rgba(244, 240, 230, 0.14);
  background: rgba(0, 0, 0, 0.32);
  color: var(--c-text);
  font: inherit;
  line-height: calc(10 * var(--px));
  text-align: left;
  cursor: pointer;
}
#ui-root .guide-tip::after { content: ''; position: absolute; left: 0; right: 0; top: calc(-3 * var(--px)); bottom: calc(-3 * var(--px)); }
#ui-root .guide-tip:hover, #ui-root .guide-tip:focus-visible { border-color: var(--c-gold); outline: none; }
#ui-root .guide-tip.is-disabled { color: var(--c-text-dim); border-style: dashed; }
#ui-root .guide-tip.is-disabled:hover, #ui-root .guide-tip.is-disabled:focus-visible { border-color: rgba(244, 240, 230, 0.4); }
#ui-root .guide-panel .guide-tip[data-hint].has-more { border-bottom: var(--px) solid rgba(244, 240, 230, 0.14); cursor: pointer; }
#ui-root .guide-panel .guide-tip.is-disabled[data-hint].has-more { border-bottom-style: dashed; }
#ui-root .guide-panel .guide-tip[data-hint].has-more > .guide-verb { border-bottom: var(--px) dotted rgba(244, 240, 230, 0.4); }
#ui-root .guide-ico {
  flex: none;
  width: calc(16 * var(--px));
  height: calc(16 * var(--px));
  background: center / 100% 100% no-repeat;
  image-rendering: pixelated;
}
#ui-root .guide-verb { flex: 0 1 auto; min-width: 0; white-space: normal; }
#ui-root .guide-sep { flex: none; color: var(--c-text-dim); }
#ui-root .guide-gain, #ui-root .guide-chip { flex: none; display: inline-flex; align-items: center; gap: calc(2 * var(--px)); white-space: nowrap; }
#ui-root .guide-power { flex: none; width: calc(9 * var(--px)); height: calc(9 * var(--px)); background: var(--ui-ico_power, none) center / 100% 100% no-repeat; image-rendering: pixelated; }
#ui-root .guide-lock { flex: none; width: calc(8 * var(--px)); height: calc(8 * var(--px)); background: var(--ui-ico_lock, none) center / 100% 100% no-repeat; image-rendering: pixelated; }
#ui-root .guide-chip.is-missing { color: var(--c-danger); }
#ui-root .guide-chip > .work-item-icon { width: calc(12 * var(--px)); height: calc(12 * var(--px)); }

/* ---- 16.3 o selo e o painel do chefe (F8b-3b) ----
   O SELO mora no marco `#lobby-next` da Faixa A: é o `.hud-seal` da faixa (moldura de 1 + palavra, 10 px de altura; ouro com
   `.is-gold`, perigo com `.is-lock` — `screens.css`), sem regra nova. O PAINEL (`widgets/bossPanel.js`, `#lobby-boss-panel`) é o
   molde do painel da ilha (`.island-next`, `screens.css`): por baixo da ficha da aventura, alinhado à esquerda dela (x 305 do palco
   = 301 da faixa, a partir de y 50), por cima da ilha, na camada dos SELETORES (z 9: abaixo das janelas, que nascem por cima),
   com a moldura de 4 do `.tooltip-frame`. Largura 260: x 305…565, longe da carteira (582) e do painel da ilha (fecham um ao
   outro); a linha da dica quebra o verbo, nunca o ganho nem a ficha (16.2). Sem `nowrap` no painel: só a linha do ◆. */
#ui-root .boss-panel {
  position: absolute;
  top: calc(46 * var(--px));
  left: calc(301 * var(--px));
  z-index: 9;
  box-sizing: border-box;
  width: calc(260 * var(--px));
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(4 * var(--px));
  padding: calc(2 * var(--px)) calc(4 * var(--px)) calc(4 * var(--px));
  pointer-events: auto;
}
#ui-root .boss-panel-head { display: flex; align-items: center; gap: calc(4 * var(--px)); line-height: calc(10 * var(--px)); }
#ui-root .boss-panel-name { min-width: 0; }
#ui-root .boss-panel-close { margin-left: auto; padding: 0 calc(3 * var(--px)); }
#ui-root .boss-panel-vs { display: flex; align-items: center; gap: calc(4 * var(--px)); line-height: calc(10 * var(--px)); white-space: nowrap; }
#ui-root .boss-panel-tips:empty { display: none; }
#ui-root .boss-panel > .boss-panel-go { align-self: flex-end; }

/* ---- 16.4 o próximo passo (F8b-4) ----
   `#lobby-step` (widgets/nextStepChip.js; a geometria é `guideView.js › STEP_RECT`): a placa `hud_plate` (aro de 4, a da Faixa A)
   em x 4 · y 312, 24 de altura, ENCOSTADA no topo da barra do lobby (bottom 24 do palco de 360: a barra começa em y 336) e abaixo da
   base do botão do chat (y 290, chat.css), até 320 de largura. 24 = o alvo mínimo do dedo (o lint do kit acusou os 22 da 1.ª versão;
   a F8b-5 subiu as linhas dela pelo mesmo achado) e o miolo de 16 é o do ícone. O topo em 312 fica abaixo das tábuas da fileira de
   baixo da ilha (y 296…312, medidas no kit): a linha cobre só a ponta da estaca delas, nunca tábua nem lote. UMA linha (`nowrap`): o
   que não cabe sai da direita (a ficha, depois o ganho — `guideView.js › stepFit`, que mede no orçamento de glifo); o nome nunca é
   cortado e a frase inteira segue no gesto. A LINHA INTEIRA É O BOTÃO. z 8: abaixo das janelas (10+) e dos seletores (9) — a janela
   aberta a cobre —, acima da ilha (1); com a barra de um lote aberta (z 2) a linha nem existe (`stepVisible`). A pista (o pontilhado)
   vai no VERBO: o `border-bottom` de base.css no botão inteiro trocaria o aro de baixo da placa. A ENTREGA dos trabalhadores
   (`.work-yields`, work.css: x 4…, y 308…326, z 45) cai em cima da linha: enquanto há pílula, a linha sai de vista (a entrega dura
   4 s). */
#ui-root .lobby-step {
  position: absolute;
  left: calc(4 * var(--px));
  bottom: calc(24 * var(--px));
  z-index: 8;
  box-sizing: border-box;
  max-width: calc(320 * var(--px));
  height: calc(24 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  margin: 0;
  padding: 0 calc(2 * var(--px));
  border: calc(4 * var(--px)) solid transparent;
  border-image: var(--ui-hud_plate, url(../assets/ui/hud/hud_plate.png)) 4 fill / calc(4 * var(--px)) stretch;
  image-rendering: pixelated;
  background: none;
  color: var(--c-text);
  font: inherit;
  line-height: calc(10 * var(--px));
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
}
#ui-root .lobby-step.hidden, #ui-root .screen-lobby.is-node-map > .lobby-step { display: none; }
#ui-root #lobby-step[data-hint].has-more { border-bottom: calc(4 * var(--px)) solid transparent; cursor: pointer; }
#ui-root #lobby-step.has-more .guide-verb { border-bottom: var(--px) dotted rgba(244, 240, 230, 0.4); }
#ui-root .lobby-step:hover, #ui-root .lobby-step:focus-visible { border-image-source: var(--ui-hud_plate_gold, url(../assets/ui/hud/hud_plate_gold.png)); outline: none; }
#ui-root .lobby-step.is-disabled { color: var(--c-text-dim); }
#ui-root .lobby-step-text { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
#ui-root .lobby-step-text > .guide-sep { margin: 0 calc(3 * var(--px)); }
#ui-root .lobby-step-text > .guide-verb { flex: none; white-space: nowrap; }
#ui-root:has(.work-yields > .work-yield-pill) #lobby-step { visibility: hidden; }

/* ---- 16.5 a morte (F8b-5) ----
   (1) A QUEDA (`screens/explorationHud.js › createFallTips`, `#hud-fall-tips`): o painel na moldura do HUD (`.panel.hud-panel`) LOGO
   ABAIXO do cartão da queda (`.hud-fall-card`, hud.css: y 58…94) e do cartão da subida (`.hud-auto-advance`, y 58…102), no mesmo eixo
   do meio: y 104. Largura 232 (x 204…436): os cartões de loot moram à direita (x 486…636, `loot.css › .loot-toasts`) e o banner do
   loot, no meio, fica POR CIMA (z 49 > 40) — o painel nunca tapa a faixa dos avisos. O × no canto do título (a linha do título cresce
   para a altura do botão). Janela aberta na corrida = o painel sai de vista, como o cartão (`visibility`, hud.css). */
#ui-root .guide-fall {
  position: absolute;
  top: calc(104 * var(--px));
  left: 50%;
  width: calc(232 * var(--px));
  margin-left: calc(-116 * var(--px));
  z-index: 40;
}
#ui-root .guide-fall.hidden { display: none; }
#ui-root .guide-fall-body { position: relative; }
#ui-root .guide-fall-close { position: absolute; top: 0; right: 0; padding: 0 calc(3 * var(--px)); }
#ui-root .guide-fall .guide-title { display: flex; align-items: center; min-height: calc(16 * var(--px)); padding-right: calc(20 * var(--px)); }
#hud:has(> .window) .guide-fall { visibility: hidden; }
/* (2) O RESUMO COM MORTE (`screens/lobby.js › summaryDeathTips`, `#summary-guide`): embutido no corpo do resumo, logo abaixo do título
   e da dica de nível; só o respiro entre ele e o que vem depois. */
#ui-root #summary-guide { margin: calc(2 * var(--px)) 0 calc(4 * var(--px)); }
/* (3) Nos dois a linha tem o alvo de toque do 16.2 (24 + o `::after` no vão; o lint do kit: 20 era pequeno no celular deitado) e só
   age 400 ms depois de aparecer ou de trocar (`explorationHud.js › DEATH_TIPS_ARM_MS`, `strongerPanel.js › TIP_ARM_MS`). */

/* ---- 16.6 o resumo da volta (F8b-6) ----
   O cartão (`widgets/awaySummary.js`, `#away-summary`) é o modal no VÉU DO RESUMO DA CORRIDA (`.summary-backdrop`, z 44, screens.css:
   entre a faixa do personagem, que acaba em y 44, e a barra do lobby, y 336); mais estreito que o resumo: 320 de largura,
   centrado ((640 − 320) / 2 = 160; com 280 a ficha `≈ [moeda] 346` da dica do Lapidar caía para a 2.ª linha no celular deitado).
   O título leva o tempo fora depois do ponto médio (`· 3h10`), colado à esquerda (o título das janelas é `space-between`). Uma
   linha por fato, só os não nulos; o material é uma fileira de fichas `[ícone] +N` (o vão entre fichas maior que o de dentro,
   UX G1), cada ficha com o menu de item. O painel "Como ficar mais forte" vem depois das linhas. */
#ui-root .modal-backdrop.summary-backdrop.away-backdrop > .modal { left: calc(160 * var(--px)); width: calc(320 * var(--px)); }
#ui-root .away-backdrop .window-title { justify-content: flex-start; cursor: default; }
#ui-root .away-time { color: var(--c-text-dim); white-space: nowrap; }
#ui-root .away-body { display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
#ui-root .away-rows { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
#ui-root .away-row { display: flex; flex-wrap: wrap; align-items: center; column-gap: calc(6 * var(--px)); row-gap: calc(2 * var(--px)); min-height: calc(16 * var(--px)); line-height: calc(10 * var(--px)); }
#ui-root .away-chip { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); min-height: calc(24 * var(--px)); white-space: nowrap; touch-action: auto; }
#ui-root .away-chip:focus-visible { outline: var(--px) solid var(--c-gold); }
#ui-root .away-more { color: var(--c-text-dim); white-space: nowrap; }
/* O cartão NASCE DE REPENTE, como a queda e o resumo de morte (16.5): a ficha do material com o alvo de toque de 24 (o lint do kit:
   16 era pequeno no celular deitado); a linha da dica já tem o do 16.2. */

/* ---- 16.7 a barra da faixa e o baú (F8b-7b, F8b-9) ----
   A TIRA (`widgets/bandBar.js`, o modelo `guideView.js › bandBarModel`): a EXP da faixa inteira em OURO sobre a calha escura,
   `--band-pct` do modelo. Sem rótulo (a frase vai no gesto e no aria, G7); sem pista própria (o teto da Faixa A).
   (1) LOBBY (`#lobby-band-strip`): DENTRO da caixa da barra de EXP da ficha do herói (`.bar`, `position: relative`, borda 3 inclusa
   nos 14), logo abaixo da caixa de fora (`100% + 3`: o bloco absoluto se conta da caixa de padding) — os 2 px livres entre o pé da
   linha 2 (y 38 da placa) e o aro de baixo (y 40), `lobbyHud.js › HUD_BAND_STRIP` — e na largura da CALHA (o preenchimento da barra
   sai 1 px da caixa de conteúdo de cada lado, nine-slice.css › `.bar-fill`).
   (2) CORRIDA (`#hud-band-strip`): um bloco de 3 logo abaixo da barra de EXP no `.hud-bars` (o painel de cima à esquerda cresce 3),
   recuado 2 de cada lado para casar com a calha da barra (moldura 3, calha a 2 de dentro). */
#ui-root .band-strip { position: relative; box-sizing: border-box; background: rgba(0, 0, 0, 0.55); pointer-events: none; }
#ui-root .band-strip.hidden { display: none; }
#ui-root .band-strip-fill { position: absolute; top: 0; bottom: 0; left: 0; width: var(--band-pct, 0%); background: var(--c-gold); transition: width 0.15s linear; }
#ui-root .band-strip.is-lobby { position: absolute; top: calc(100% + 3 * var(--px)); left: calc(-1 * var(--px)); right: calc(-1 * var(--px)); height: calc(2 * var(--px)); }
#ui-root .band-strip.is-run { height: calc(3 * var(--px)); margin: 0 calc(2 * var(--px)); pointer-events: auto; }
/* (3) A FICHA DO BAÚ (F8b-9; `bandBar.js › chestChip`, só na corrida, com `bandChest` no dado e do 1.º baú da faixa em diante):
   `[ico_band_chest] 21/50` encostada do lado de FORA do painel de cima à esquerda, à direita da barra de EXP e da tira — x 142 (o
   painel acaba em 140; a tira, em 132: `100% + 10`), y 41…57 (16 de altura, centrada no bloco barra de EXP + tira, y 43…56). Dentro
   do painel um ícone de 16 não cabe sem crescê-lo 7 por cima da pilha de avisos da corrida (`--toast-top` 74, hud.css). Ali fora a
   faixa é livre: o cartão da subida e o da queda começam em y 58, o rastreador de missões da masmorra e da Torre em x 200, a pilha
   de avisos em y 74. O fundo escuro é o do rastreador de missões (o texto fino sumia no céu claro). Desenho (`aria-hidden`): a frase
   da tira diz o mesmo por extenso (G7); o toque nela sobe para o gesto da tira. */
#ui-root .band-chest {
  position: absolute;
  left: calc(100% + 10 * var(--px));
  top: calc(-12 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(2 * var(--px));
  height: calc(16 * var(--px));
  padding-right: calc(3 * var(--px));
  background: rgba(10, 8, 14, 0.6);
  color: var(--c-text);
  line-height: calc(16 * var(--px));
  white-space: nowrap;
  text-shadow: var(--px) var(--px) 0 #000;
}
#ui-root .band-chest.hidden { display: none; }
#ui-root .band-chest-ico { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
#ui-root .band-chest-word { padding-left: calc(3 * var(--px)); color: var(--c-gold); }