/* --- taskbar --- O MODO FAIXA do app Windows (docs/specs/ui-gameplay-habilidades.md §5.2b; a casca: architecture.md §10.2).
   Quem liga é `ui/stripController.js`: `html.is-strip`, o recorte do palco (`renderer.setCrop`, x 144…480 × y 188…356) e a camada
   `#ui-strip`, filha do `#stage` e FORA do `#ui-root`. Medidas em px de arte (`--px`). */

/* O botão do HUD (`#btn-taskbar`, `widgets/taskbarToggle.js`) e o voltar da faixa (`#btn-strip-back`): 24×24 com o ícone 16×16 no
   miolo — a caixa do `#btn-chat` (chat.css). O travado é o `.btn.is-disabled` da série: a arte não tem estado. */
.btn.taskbar-btn,
.btn.strip-btn {
  position: relative;
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  min-height: 0;
  padding: 0;
}
.taskbar-btn-icon,
.strip-btn-icon { flex: none; }

/* Na faixa some todo o DOM do jogo — HUD, janelas, chat, toasts, dicas, modais e a v2 inteira —, MONTADO: a volta acha tudo igual.
   No palco fica só a cena (`#game`), o `#ui-root` vazio e a `#ui-strip`. A raiz da v2 (`#ui2`, filha do `#stage`) sai pela regra
   geral do palco: folha clássica não cita a v2 (client/tests/ui/v2Fence.test.js). */
html.is-strip #ui-screens,
html.is-strip #ui-overlay,
html.is-strip #ui-root > *,
html.is-strip #stage > :not(#game):not(#ui-root):not(#ui-strip) { display: none !important; }

/* A camada da faixa cobre a janela inteira (a casca pode dar 1–5 DIP a mais que a faixa): apertar fora dos botões arrasta.
   z 900: acima do palco e abaixo da tela de carregamento (`#loading`, z 1000). */
#ui-strip {
  position: fixed;
  inset: 0;
  z-index: 900;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#ui-strip.is-dragging { cursor: grabbing; }
/* A faixa de arte (336 × 168) dentro da janela: `left`/`top`/`width`/`height` vêm do controlador (o layout do renderer). */
#ui-strip > .strip-band { position: absolute; }
/* A vida do herói: a barra do HUD (x 4…100, y 4…14 da faixa = x 148…244, y 192…202 do palco), com o "480 / 480" dentro. */
.strip-band > .strip-hp {
  position: absolute;
  left: calc(4 * var(--px));
  top: calc(4 * var(--px));
  width: calc(96 * var(--px));
  height: calc(10 * var(--px));
}
/* O Auto, só desligado: o interruptor do HUD à direita da vida, alvo de 24. */
.strip-band > .strip-auto {
  position: absolute;
  left: calc(104 * var(--px));
  top: calc(4 * var(--px));
  min-height: calc(24 * var(--px));
}
/* O voltar no canto direito (x 308…332, y 4…28 da faixa). */
.strip-band > .strip-btn {
  position: absolute;
  right: calc(4 * var(--px));
  top: calc(4 * var(--px));
}
/* A QUEDA (auto-advance.md §4.1), só na espera: a frase e o dígito do cartão do HUD (`.hud-fall-text`/`.hud-fall-num`, hud.css) na
   mesma caixa de 168, no meio da faixa e na 2.ª linha (y 32… da faixa: na faixa de 336 a 1.ª é da vida, do Auto e do voltar); o campo
   está vazio na espera. Sem alvo de toque: o arrasto passa por ela. */
.strip-band > .strip-fall {
  position: absolute;
  top: calc(32 * var(--px));
  left: 50%;
  width: calc(168 * var(--px));
  margin-left: calc(-84 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--px));
  padding: calc(2 * var(--px)) calc(4 * var(--px));
  pointer-events: none;
  text-shadow: var(--px) var(--px) 0 #000;
}
/* A CONEXÃO ("Reconectando…", `stripNetSeal`): o selo do HUD (`.hud-net` de hud.css: uma linha, fundo opaco, cor de perigo) no lugar
   da queda, que some enquanto ele está à vista. Sem alvo de toque: o arrasto passa por ele. */
.strip-band > .strip-net {
  position: absolute;
  top: calc(32 * var(--px));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(168 * var(--px));
  padding: calc(1 * var(--px)) calc(3 * var(--px));
  line-height: calc(10 * var(--px));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: #0e0c14;
  box-shadow: 0 0 0 var(--px) #4a4458;
  color: var(--c-danger);
  pointer-events: none;
}

/* A BARRA da corrida (`ctx.strip.dock`: a `.hud-bottom` do HUD — as 5 habilidades, o medidor da ultimate e as poções —, movida para
   a faixa enquanto ela está aberta): a mesma peça, clicável, com as recargas. Encostada embaixo e à DIREITA (só `right`: a largura é a
   do conteúdo): o medidor da ultimate mora à ESQUERDA da barra (ult.css), e assim a fila inteira (322) cabe nos 336 da faixa — x 10…332,
   y 116…164 da faixa (o pé em 352 do palco, logo abaixo do chão e do loot pousado). O selo da build e os balões de detalhe das
   habilidades não aparecem na faixa (o balão sairia pela janela; o nome e a recarga já estão no slot). */
#ui-strip .strip-band > .hud-bottom {
  left: auto;
  right: calc(4 * var(--px));
  bottom: calc(4 * var(--px));
}
#ui-strip .hud-run-seal,
#ui-strip .ability-tip { display: none !important; }

/* O texto só para o leitor de tela (a regra de base.css é do `#ui-root`, e a faixa mora fora dele). */
#ui-strip .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}