/* v2.css — a interface v2 (docs/specs/ui-v2.md). Inerte sem `html.ui-v2` (a clássica não muda): toda regra daqui está sob `#ui2`
   (a raiz da v2) ou sob `html.ui-v2` (as peças da clássica que a v2 hospeda ou reestiliza).
   A régua (§2) chega do JS em <html>: `--v2-u` (a unidade de layout, px CSS: 1 no dedo, até 1,4 no mouse, vezes o tamanho escolhido)
   e `--v2-ap` (o pixel de ARTE da v2: um número inteiro de pixels do aparelho, ~4/3 de u). Sob `#ui2` eles viram `--u` e `--ap`.
   Medidas: `calc(N * var(--u))` para layout e toque; `calc(N * var(--ap))` para arte (molduras, ícones). Nunca `transform: scale`. */

html.ui-v2 {
  --u: var(--v2-u, 1px);
  --ap: var(--v2-ap, 1px);
  --v2-text: calc(16 * var(--u));
  --v2-text-small: calc(13 * var(--u));
  --v2-text-title: calc(20 * var(--u));
  --v2-target: calc(46 * var(--u));
  --v2-primary: calc(56 * var(--u));
  --v2-gap: calc(8 * var(--u));
  --v2-gap-danger: calc(16 * var(--u));
  --v2-safe-l: env(safe-area-inset-left, 0px);
  --v2-safe-r: env(safe-area-inset-right, 0px);
  --v2-safe-t: env(safe-area-inset-top, 0px);
  --v2-safe-b: env(safe-area-inset-bottom, 0px);
  --v2-edge: calc(8 * var(--u));
  /* a margem da tela de cada lado: a área segura (o entalhe) ou a borda, a maior (§3) */
  --v2-inset-l: max(var(--v2-safe-l), var(--v2-edge));
  --v2-inset-r: max(var(--v2-safe-r), var(--v2-edge));
  --v2-bg: #15121c;
  --v2-panel: #221f33;
  --v2-line: #3a3450;
}

/* ---- a raiz e as camadas (sem contexto de empilhamento próprio: o z divide o `#stage` com a camada de compatibilidade, §3.3) ---- */
#ui2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--font-ui);
  font-size: var(--v2-text);
  line-height: 1.25;
  color: var(--c-text);
}
#ui2 .v2-screen-layer, #ui2 .v2-sheet-layer, #ui2 .v2-overlay { position: absolute; inset: 0; pointer-events: none; }
#ui2 .v2-screen-layer { z-index: 5; }
#ui2 .v2-sheet-layer { z-index: 70; }
#ui2 .v2-overlay { z-index: 115; }
/* a etiqueta "Pré-Alpha · <versão>" (docs/specs/ui-gameplay.md §0.5) no canto de baixo à direita. Nas telas de compatibilidade o JS
   a põe pela geometria do palco clássico (`widgets/buildTag.js › tagLayout`: escreve `right`, `bottom` e a letra); no lobby e na
   corrida da v2 (`[data-place='dock']`) ela fica na faixa que as docas deixam embaixo — elas param a `--v2-edge` (8u) da área segura
   —, alinhada à coluna da direita, com a letra da exceção ao piso da v2 (§2 do ui-v2.md): 7u, no máximo 8 px. Sem toque */
#ui2 .v2-build-tag {
  position: absolute;
  right: 4px;
  bottom: 0;
  font-size: 8px;
  line-height: 1;
  white-space: pre;
  text-align: right;
  color: var(--c-text);
  opacity: 0.8;
  text-shadow: 0 1px 0 #000, 1px 0 0 #000, 0 -1px 0 #000, -1px 0 0 #000;
  pointer-events: none;
}
#ui2 .v2-build-tag[data-place='dock'] { right: var(--v2-inset-r); bottom: var(--v2-safe-b); font-size: min(calc(7 * var(--u)), 8px); }
#ui2 button, #ui2 [role='button'], #ui2 a, #ui2 input, #ui2 select { pointer-events: auto; }

/* Peças clássicas DENTRO da v2 em escala da v2: o mesmo widget, o `--px` dele vira o pixel de arte da v2. A letra pequena (8 px de
   arte) nunca fica abaixo da secundária da v2 (13, §2): no DPR 3 ela daria 10,7 px CSS = 1,8 mm. */
html.ui-v2 .v2-px {
  --px: var(--ap);
  --text-1: max(var(--v2-text-small), calc(8 * var(--ap)));
  --text-2: calc(16 * var(--ap));
}

/* ---- botões da v2: a peça `.btn` da série (9-slice), na escala da v2, com o alvo mínimo e a letra de 16 ---- */
#ui2 .v2-btn,
html.ui-v2 .v2-sheet .v2-btn {
  --px: var(--ap);
  min-height: var(--v2-target);
  min-width: var(--v2-target);
  padding: 0 calc(12 * var(--u));
  font-size: var(--v2-text);
  line-height: 1.1;
  gap: calc(6 * var(--u));
  justify-content: center;
}
#ui2 .v2-primary { min-height: var(--v2-primary); font-size: calc(18 * var(--u)); }
#ui2 .v2-btn .v2-btn-count {
  font-size: var(--v2-text-small);
  margin-left: calc(2 * var(--u));
}
#ui2 .v2-btn .v2-btn-count:empty { display: none; }
#ui2 .v2-btn.is-full .v2-btn-count { color: var(--c-danger); }
#ui2 .v2-icon-btn { padding: 0; width: var(--v2-target); }

/* ícones da série (16×16 de arte) em 2 pixels de arte da v2 — `--ui-<key>` vem do boot (main.js) */
#ui2 .v2-ico {
  display: inline-block;
  flex: none;
  width: calc(16 * var(--ap));
  height: calc(16 * var(--ap));
  background: center / contain no-repeat;
  image-rendering: pixelated;
}
#ui2 .v2-ico.is-bag { background-image: var(--ui-ico_bag); }
#ui2 .v2-ico.is-storage { background-image: var(--ui-ico_bank16); }
#ui2 .v2-ico.is-menu { background-image: var(--ui-ico_menu); }
#ui2 .v2-ico.is-explore { background-image: var(--ui-ico_play); }
#ui2 .v2-ico.is-dungeon { background-image: var(--ui-ico_dungeon); }
#ui2 .v2-ico.is-island { background-image: var(--ui-ico_island); }
#ui2 .v2-ico.is-collect { background-image: var(--ui-ico_lot_ready); width: calc(20 * var(--ap)); height: calc(22 * var(--ap)); }
#ui2 .v2-ico.is-power { background-image: var(--ui-ico_power); width: calc(9 * var(--ap)); height: calc(9 * var(--ap)); }

/* ---- o LOBBY (§5): a barra de cima e as docas dos polegares ----
   A moldura muda com a faixa das docas (`data-docks` na raiz, `scale.js › dockTier`): `wide` e `col` = colunas nas faixas pretas
   (com rótulo); `slim` = colunas só com o ícone (o iPhone deitado, com o entalhe); `in` = por cima da borda do mundo, só o ícone.
   O ouro e o selo da ilha moram no alto ao centro, sobre o céu da ilha: nunca cobrem um prédio. */
#ui2 .v2-safe-probe {
  position: absolute;
  width: 0;
  height: 0;
  padding: 0 env(safe-area-inset-right, 0px) 0 env(safe-area-inset-left, 0px);
  visibility: hidden;
  pointer-events: none;
}
#ui2 .v2-top {
  position: absolute;
  top: calc(var(--v2-safe-t) + 4 * var(--u));
  left: var(--v2-inset-l);
  right: var(--v2-inset-r);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--v2-gap);
  pointer-events: none;
}
#ui2 .v2-top-left, #ui2 .v2-top-right { display: flex; align-items: center; gap: var(--v2-gap); pointer-events: none; }
#ui2 .v2-top-center {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--v2-gap);
  pointer-events: none;
}
#ui2 .v2-hero {
  position: relative;
  width: calc(48 * var(--u));
  height: calc(48 * var(--u));
  padding: 0;
  border: calc(2 * var(--u)) solid var(--c-gold);
  border-radius: calc(4 * var(--u));
  background: var(--v2-panel);
  cursor: pointer;
}
#ui2 .v2-hero-crest {
  position: absolute;
  inset: calc(6 * var(--u));
  background: center / contain no-repeat;
  image-rendering: pixelated;
}
#ui2 .v2-hero-level {
  position: absolute;
  right: calc(-4 * var(--u));
  bottom: calc(-4 * var(--u));
  min-width: calc(22 * var(--u));
  padding: 0 calc(3 * var(--u));
  background: var(--c-gold);
  color: var(--c-text-dark);
  font-size: var(--v2-text-small);
  font-weight: 700;
  border-radius: calc(3 * var(--u));
  text-align: center;
}
#ui2 .v2-hero-who {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--u));
  padding: calc(4 * var(--u)) calc(10 * var(--u));
  background: rgba(10, 8, 16, 0.72);
  border-radius: calc(4 * var(--u));
}
#ui2 .v2-hero-name { color: var(--c-gold); font-size: var(--v2-text); white-space: nowrap; }
#ui2 .v2-hero-power { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: var(--v2-text-small); color: var(--c-text); }
#ui2 .v2-gold {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  height: var(--v2-target);
  padding: 0 calc(12 * var(--u));
  background: rgba(10, 8, 16, 0.72);
  border-radius: calc(4 * var(--u));
  color: var(--c-gold);
  font-size: var(--v2-text);
}
#ui2 .v2-gold .ico-gold { width: calc(9 * var(--ap)); height: calc(9 * var(--ap)); }
#ui2 .v2-island {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--u));
  height: var(--v2-target);
  padding: 0 calc(10 * var(--u));
  background: rgba(10, 8, 16, 0.72);
  border: calc(2 * var(--u)) solid var(--v2-line);
  border-radius: calc(4 * var(--u));
  color: var(--c-text);
  font: inherit;
  cursor: pointer;
}
#ui2 .v2-island.is-ready { border-color: var(--c-gold); color: var(--c-gold); animation: v2-pulse 1.2s steps(2) infinite; }
#ui2 .v2-island-bar { width: calc(40 * var(--u)); height: calc(6 * var(--u)); background: #000; border-radius: calc(3 * var(--u)); overflow: hidden; }
#ui2 .v2-island-fill { display: block; height: 100%; background: var(--c-ok); }

/* as docas: nos cantos de baixo — nas faixas pretas quando há coluna (`wide`, `col`, `slim`), por cima da borda do mundo quando não */
#ui2 .v2-dock {
  position: absolute;
  bottom: calc(var(--v2-safe-b) + var(--v2-edge));
  display: flex;
  flex-direction: column;
  gap: var(--v2-gap);
  pointer-events: none;
}
#ui2 .v2-dock > *, #ui2 .v2-dock-row > * { pointer-events: auto; }
#ui2 .v2-dock-left { left: var(--v2-inset-l); align-items: flex-start; }
#ui2 .v2-dock-right { right: var(--v2-inset-r); align-items: flex-end; }
#ui2 .v2-dock-row { display: flex; gap: var(--v2-gap); pointer-events: none; }
#ui2 .v2-big { min-height: var(--v2-primary); min-width: calc(120 * var(--u)); }
#ui2 .v2-btn-label { white-space: inherit; }
/* o Coletar: com o que recolher vira o botão de OURO (o primário), pulsa e leva o número num selo; sem nada, é o cinza de sempre com
   o ícone apagado — a diferença não é só a cor (N6): o selo some e o ícone fica cinza */
#ui2 .v2-collect.has-ready { animation: v2-pulse 1.2s steps(2) infinite; }
#ui2 .v2-collect:not(.has-ready) .v2-ico.is-collect { filter: grayscale(1) brightness(0.8); }
#ui2 .v2-btn .v2-btn-count.is-badge {
  min-width: calc(22 * var(--u));
  padding: 0 calc(5 * var(--u));
  background: var(--c-text-dark);
  color: var(--c-gold);
  border-radius: calc(10 * var(--u));
  font-size: var(--v2-text-small);
  line-height: calc(20 * var(--u));
  text-align: center;
}
#ui2 .v2-btn .v2-btn-count.is-badge:empty { display: none; }
@keyframes v2-pulse { 50% { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { #ui2 .v2-collect.has-ready, #ui2 .v2-island.is-ready { animation: none; } }
#ui2 .v2-lobby.is-node-map .v2-dock, #ui2 .v2-lobby.is-node-map .v2-top { display: none; }
#ui2.has-sheet .v2-lobby .v2-dock, #ui2.has-sheet .v2-lobby .v2-top { visibility: hidden; }
/* uma janela ainda clássica por cima de uma folha (`windowRouter.js`): o "◀ <a folha de baixo>" no canto do ◀ das folhas, e a moldura
   da tela sai como numa folha (o herói moraria embaixo dele) */
#ui2 .v2-compat-back {
  position: absolute;
  top: calc(var(--v2-safe-t) + 5 * var(--u));
  left: var(--v2-inset-l);
  z-index: 72;
  gap: calc(6 * var(--u));
  max-width: calc(220 * var(--u));
}
#ui2 .v2-compat-back > .v2-btn-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ui2:has(> .v2-compat-back:not(.hidden)) .v2-lobby .v2-dock,
#ui2:has(> .v2-compat-back:not(.hidden)) .v2-lobby .v2-top,
#ui2:has(> .v2-compat-back:not(.hidden)) .v2-run .v2-run-dock,
#ui2:has(> .v2-compat-back:not(.hidden)) .v2-run .v2-run-tr,
#ui2:has(> .v2-compat-back:not(.hidden)) .v2-run .v2-run-tl { visibility: hidden; }
#ui2 .v2-lobby.has-mode-panel .v2-dock { visibility: hidden; }

/* `wide` (coluna ≥ 176): botões com rótulo, dois por linha, na largura da coluna */
#ui2[data-docks='wide'] .v2-lobby .v2-dock { width: var(--v2-col); align-items: stretch; }
#ui2[data-docks='wide'] .v2-lobby .v2-dock-row > * { flex: 1 1 0; min-width: 0; }
#ui2[data-docks='wide'] .v2-lobby .v2-dock .v2-btn { min-width: 0; white-space: normal; text-align: center; }
/* os pares lado a lado (Armazém | Coletar, Masmorra | Nível): metade da coluna não cabe ícone + rótulo em linha — o ícone sobe */
#ui2[data-docks='wide'] .v2-lobby .v2-dock-row > .v2-btn { flex-direction: column; gap: calc(2 * var(--u)); padding: calc(4 * var(--u)) calc(2 * var(--u)); font-size: calc(15 * var(--u)); }
#ui2[data-docks='wide'] .v2-lobby .v2-top-left { max-width: var(--v2-col); }

/* `col` (coluna ≥ 76): um por linha, o ícone sobre o rótulo, letra de 14 */
#ui2[data-docks='col'] .v2-lobby .v2-dock { width: var(--v2-col); align-items: stretch; }
#ui2[data-docks='col'] .v2-lobby .v2-dock-row { flex-direction: column; }
#ui2[data-docks='col'] .v2-lobby .v2-dock .v2-btn {
  flex-direction: column;
  gap: calc(2 * var(--u));
  min-width: 0;
  min-height: calc(52 * var(--u));
  padding: calc(4 * var(--u)) calc(2 * var(--u));
  font-size: calc(14 * var(--u));
  white-space: normal;
  text-align: center;
}
#ui2[data-docks='col'] .v2-lobby .v2-dock .v2-primary { min-height: calc(64 * var(--u)); }
#ui2[data-docks='col'] .v2-lobby .v2-top-left,
#ui2[data-docks='slim'] .v2-lobby .v2-top-left { flex-direction: column; align-items: center; width: var(--v2-col); }
#ui2[data-docks='col'] .v2-lobby .v2-hero-who { align-items: center; max-width: var(--v2-col); padding: calc(2 * var(--u)) calc(4 * var(--u)); }
/* o nome inteiro (UX-GRAMATICA §3: nome próprio nunca cortado): quebra em duas linhas na coluna, em vez das reticências (R-10) */
#ui2[data-docks='col'] .v2-lobby .v2-hero-name { max-width: calc(var(--v2-col) - 8 * var(--u)); white-space: normal; overflow-wrap: anywhere; text-align: center; line-height: 1.1; font-size: var(--v2-text-small); }

/* `slim` e `in`: só o ícone, num quadrado de 52 (o rótulo vai para o `aria-label` e a dica); o número embaixo do ícone ou no selo */
#ui2[data-docks='slim'] .v2-lobby .v2-dock { width: var(--v2-col); align-items: center; }
#ui2[data-docks='slim'] .v2-lobby .v2-dock-row,
#ui2[data-docks='in'] .v2-lobby .v2-dock-row { flex-direction: column; }
#ui2[data-docks='slim'] .v2-lobby .v2-dock .v2-btn,
#ui2[data-docks='in'] .v2-lobby .v2-dock .v2-btn {
  position: relative;
  flex-direction: column;
  gap: 0;
  width: calc(52 * var(--u));
  min-width: 0;
  min-height: calc(52 * var(--u));
  padding: 0;
  font-size: var(--v2-text-small);
}
#ui2[data-docks='slim'] .v2-lobby .v2-dock .v2-btn:not(.v2-keep-label) > .v2-btn-label,
#ui2[data-docks='in'] .v2-lobby .v2-dock .v2-btn:not(.v2-keep-label) > .v2-btn-label { display: none; }
#ui2[data-docks='slim'] .v2-lobby .v2-dock .v2-btn-count.is-badge,
#ui2[data-docks='in'] .v2-lobby .v2-dock .v2-btn-count.is-badge { position: absolute; top: calc(-6 * var(--u)); right: calc(-6 * var(--u)); margin: 0; }
#ui2[data-docks='slim'] .v2-lobby .v2-hero-name { display: none; }
#ui2[data-docks='slim'] .v2-lobby .v2-hero-who { padding: calc(2 * var(--u)); }

/* a ilha e a carta do mar saem de baixo da folha (o furo do boneco mostra o canvas, não a ilha) */
html.ui-v2 #screen-lobby.is-under-sheet > #island,
html.ui-v2 #screen-lobby.is-under-sheet > #node-map { visibility: hidden; }

/* ---- as FOLHAS (§6) ---- */
#ui2 .v2-sheet-veil { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); pointer-events: auto; }
/* a folha é opaca e cobre a tela: o véu só aparece pelo FURO do boneco, e o escurecia a 40 % (revisão P1-06) */
#ui2 .v2-sheet-layer:has(> .v2-sheet.has-hole:not(.is-parked)) > .v2-sheet-veil { background: transparent; }
/* a folha ESTACIONADA (a de baixo na pilha, `sheets.js › park`): montada, com a rolagem e o estado, e invisível — o `*` vence o
   `visibility: visible` que alguma peça de dentro escreva; `inert` (no elemento) a tira do toque e do Tab */
#ui2 .v2-sheet.is-parked,
#ui2 .v2-sheet.is-parked * { visibility: hidden !important; }
/* e FORA do palco: a prévia do boneco (Mochila, Inspecionar) publica a caixa dela pela posição na tela (`equipPanel.js › place`), e o
   canvas pintava o boneco no meio da ilha com a Mochila estacionada embaixo de uma clássica (revisão P2-15); deslocada, a caixa sai do
   canvas. `transform` não muda o tamanho: a rolagem e o arranjo ficam */
#ui2 .v2-sheet.is-parked { pointer-events: none; transform: translateX(-300vw); }
#ui2 .v2-sheet {
  position: absolute;
  inset: 0;
  padding: var(--v2-safe-t) var(--v2-safe-r) var(--v2-safe-b) var(--v2-safe-l);
  display: flex;
  flex-direction: column;
  background: var(--v2-bg);
  pointer-events: auto;
  outline: none;
}
#ui2 .v2-sheet.has-hole {
  -webkit-mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  -webkit-mask-size: 100% 100%, var(--hole-w) var(--hole-h);
  -webkit-mask-position: 0 0, var(--hole-x) var(--hole-y);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: xor;
  mask-image: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
  mask-size: 100% 100%, var(--hole-w) var(--hole-h);
  mask-position: 0 0, var(--hole-x) var(--hole-y);
  mask-repeat: no-repeat;
  mask-composite: exclude;
}
#ui2 .v2-sheet-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--v2-gap);
  height: calc(56 * var(--u));
  padding: 0 var(--v2-edge);
  border-bottom: calc(2 * var(--u)) solid var(--v2-line);
}
#ui2 .v2-back { min-width: var(--v2-target); min-height: var(--v2-target); font-size: var(--v2-text-title); padding: 0; }
#ui2 .v2-sheet-title { flex: 1; margin: 0; font-size: var(--v2-text-title); color: var(--c-gold); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui2 .v2-sheet-actions { display: flex; align-items: center; gap: var(--v2-gap); }
#ui2 .v2-sheet-body { flex: 1; min-height: 0; overflow: auto; padding: var(--v2-edge); }
#ui2 .v2-sheet-foot { flex: none; display: flex; justify-content: flex-end; align-items: center; gap: var(--v2-gap); padding: var(--v2-edge); border-top: calc(2 * var(--u)) solid var(--v2-line); }

/* ---- a janela da CLÁSSICA hospedada numa folha (§6; `windowSheet.js`): a escala vem do `--px` posto no `.v2-host` ---- */
/* o corpo do envoltório É o corpo da folha (o mesmo nó: `sheets.js` põe nele o `.v2-sheet-body`), e a borda de 8 da folha é o padding
   dele (`#ui2 .v2-sheet-body`, acima) */
html.ui-v2 .v2-host-body { display: flex; justify-content: center; align-items: flex-start; height: 100%; overflow: auto; }
/* o envoltório na largura do corpo, com a janela centrada nele (`flex-grow`): o `keepInWorld` (`windowSheet.js`) desliza a janela pelo
   `left` relativo até 4 px da borda do CORPO, e o recorte do furo (`hostedWindows.js › holeMask`: a peça inteira = 100% do envoltório)
   apagava, e tirava do toque, o que passasse da caixa dele — no celular deitado a Mochila desliza 18 px: o selo `Skin` virava "Ski",
   com 18 dos 46 px sem toque, e o "15/60" e a vida saíam cortados. A margem negativa (só a janela não fluida) leva o envoltório sobre o
   padding do corpo, até onde o deslize chega; ela cai DENTRO do padding de quem rola, e isso não gera rolagem (docs/specs/ui-v2.md §6) */
html.ui-v2 .v2-host { display: flex; justify-content: center; flex-grow: 1; }
html.ui-v2 .v2-host:not(.is-fluid) { margin-inline: calc(-1 * var(--v2-edge)); }
html.ui-v2 .v2-hosted.window {
  position: relative;
  min-width: 0;
  max-width: none;
  max-height: none;
  height: auto;
  /* o recorte clássico do furo (`windowHoles.js`) é escrito em `var(--px)` resolvido na janela — com o `--px` da folha ele sairia
     ampliado e fora do lugar: a janela hospedada não o usa, e o furo em px CSS vai no envoltório (`hostedWindows.js › dollHole`) */
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
html.ui-v2 .v2-hosted.window > .window-body { overflow: visible; }
/* a janela FLUIDA (`windowSheet › fluid`): a folha inteira, no pixel de arte da v2; o corpo da janela é quem decide o que rola, e a
   folha de estilo da frente (`css/v2/<frente>.css`) refaz o arranjo dentro dela */
html.ui-v2 .v2-host-body.is-fluid { display: block; overflow: hidden; }
html.ui-v2 .v2-host.is-fluid { display: block; height: 100%; }
html.ui-v2 .v2-hosted.window.is-fluid { width: 100% !important; height: 100%; display: flex; flex-direction: column; gap: var(--v2-gap); }
html.ui-v2 .v2-hosted.is-fluid > .window-body { flex: 1; min-height: 0; margin: 0; overflow: auto; }
html.ui-v2 .v2-hosted.is-fluid > .window-footer { flex: none; margin: 0; gap: var(--v2-gap); }
html.ui-v2 .v2-hosted.window.is-fluid.is-side { display: grid; grid-template-columns: minmax(0, 1fr) calc(168 * var(--v2-u)); grid-template-rows: minmax(0, 1fr); align-items: stretch; }
html.ui-v2 .v2-hosted.is-fluid.is-side > .window-footer { height: 100%; overflow-y: auto; }
/* o rodapé na COLUNA do polegar (à direita), quando cabe (`is-side`): botões de 44+ empilhados, letra de 16 */
html.ui-v2 .v2-hosted.is-side { display: grid; grid-template-columns: auto calc(168 * var(--v2-u)); column-gap: calc(8 * var(--v2-u)); align-items: start; width: auto !important; }
html.ui-v2 .v2-hosted.is-side > .window-body { grid-column: 1; grid-row: 1; }
html.ui-v2 .v2-hosted.is-side > .window-footer {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: calc(8 * var(--v2-u));
  margin: 0;
}
html.ui-v2 .v2-hosted .window-footer > .btn,
html.ui-v2 .v2-hosted .window-footer .inventory-footer-row > .btn,
html.ui-v2 .v2-hosted .modal-actions > .btn {
  --px: var(--v2-ap);
  min-height: var(--v2-target);
  font-size: calc(16 * var(--v2-u));
  margin-left: 0;
}
html.ui-v2 .v2-hosted.is-side .inventory-footer-row { display: flex; flex-direction: column; align-items: stretch; gap: calc(8 * var(--v2-u)); }
/* os atalhos das telas do personagem (Atributos, Habilidades, Talentos, Builds, Profissões, Mascote): a largura da coluna, 3 por linha,
   cada um com 48+ de lado */
html.ui-v2 .v2-hosted.is-side .inventory-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(6 * var(--v2-u)); width: 100%; align-self: stretch; }
html.ui-v2 .v2-hosted.is-side .inventory-links > .btn { --px: var(--v2-ap); width: auto; min-height: calc(48 * var(--v2-u)); min-width: 0; }
/* o ouro e o "15/60" dividem a primeira linha da coluna (a coluna inteira cabe na folha do celular deitado) */
html.ui-v2 .v2-hosted.is-side > .inventory-footer { display: grid; grid-template-columns: 1fr auto; align-content: start; }
html.ui-v2 .v2-hosted.is-side > .inventory-footer > * { grid-column: 1 / -1; }
html.ui-v2 .v2-hosted.is-side > .inventory-footer > #inv-gold { grid-column: 1; }
html.ui-v2 .v2-hosted.is-side > .inventory-footer > #inv-count { grid-column: 2; }
/* a "Venda rápida" pergunta antes, mas fica a 16 do vizinho (R-15) */
html.ui-v2 .v2-hosted.is-side > .inventory-footer > #inv-bulk-sell { margin-bottom: var(--v2-gap); }
/* a ficha de números do personagem no fim da coluna (`sheetsLobby.js › inventoryLinksToHead`, R-05): duas colunas da largura dela */
html.ui-v2 .v2-hosted.is-side > .inventory-footer > .equip-sheet {
  grid-column: 1 / -1;
  grid-row: auto;
  align-self: start;
  width: auto;
  grid-template-columns: 1fr 1fr;
  gap: calc(2 * var(--v2-u)) calc(10 * var(--v2-u));
  font-size: var(--v2-text-small);
}
html.ui-v2 .v2-hosted .inventory-footer > .equip-sheet .equip-stat { height: auto; min-height: calc(20 * var(--v2-u)); }
html.ui-v2 .v2-hosted .inventory-footer > .equip-sheet .equip-stat-value { overflow: visible; }
/* --- skins --- o botão-selo `Skin` da ficha (docs/specs/skins.md §10; a porta de Loja › Skins): o ALVO comum (46) no botão, que fica
   sem moldura, e o selo de ouro (moldura + palavra, `windows.css`) no miolo — o selo continua do tamanho da letra e o dedo acerta a
   casa inteira. A pista (o gesto com o nome da skin) pontilha o selo, não o alvo */
html.ui-v2 .v2-hosted .equip-sheet > .equip-skin-seal {
  --px: var(--v2-ap);
  justify-content: flex-end;
  min-width: var(--v2-target);
  min-height: var(--v2-target);
  height: auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--v2-text-small);
}
html.ui-v2 .v2-hosted .equip-sheet > .equip-skin-seal > span {
  padding: calc(2 * var(--v2-u)) calc(6 * var(--v2-u));
  border: calc(1 * var(--v2-u)) solid currentColor;
  background: var(--c-field-bg);
  line-height: 1.25;
}
html.ui-v2 .v2-hosted .equip-sheet > .equip-skin-seal::after { content: none; }   /* o alvo de 24 da clássica (windows.css): aqui o botão já tem 46 */
html.ui-v2 .v2-hosted .equip-sheet > .equip-skin-seal:is(:hover, :focus-visible) { background: none; }
html.ui-v2 .v2-hosted .equip-sheet > .equip-skin-seal:is(:hover, :focus-visible) > span { background: rgba(224, 176, 64, 0.18); }
#ui2 .v2-hosted .equip-sheet > .equip-skin-seal[data-hint].has-more { border-bottom: 0; }
#ui2 .v2-hosted .equip-sheet > .equip-skin-seal[data-hint].has-more > span { border-bottom-style: dotted; }
/* o mesmo selo, sem porta, na ficha do Inspecionar hospedada: na letra mínima da v2 (13; a 7 de arte dava 10,5 no celular) */
html.ui-v2 .v2-hosted .inspect-skin-seal { height: auto; padding: calc(2 * var(--v2-u)) calc(6 * var(--v2-u)); border-width: calc(1 * var(--v2-u)); font-size: var(--v2-text-small); line-height: 1.25; }
#ui2 .v2-hosted .inspect-skin-seal[data-hint].has-more { border-bottom: calc(1 * var(--v2-u)) dotted currentColor; }
/* os selos e o tier das peças na letra mínima da v2 (R-12) */
html.ui-v2 .v2-hosted .slot-tier,
#ui2 .v2-sheet-head-tools .inv-link-badge { font-size: var(--v2-text-small); line-height: 1; }
html.ui-v2 .v2-hosted .gold-label,
html.ui-v2 .v2-hosted .inventory-count { font-size: calc(16 * var(--v2-u)); }
/* os atalhos das telas do personagem, levados ao cabeçalho da folha da Mochila (`sheetsLobby.js › inventoryLinksToHead`) */
#ui2 .v2-sheet-head-tools .inventory-links { display: flex; gap: calc(6 * var(--u)); }
#ui2 .v2-sheet-head-tools #inv-stash-mats { margin-right: calc(8 * var(--u)); padding: 0; }
#ui2 .v2-sheet-head-tools .inventory-links > .btn { position: relative; padding: 0; }
/* as abas de página da Mochila no cabeçalho da folha: o alvo comum */
#ui2 .v2-sheet-head-tools .grid-tab, #ui2 .v2-sheet-head-tools .tab, #ui2 .v2-sheet-head-tools .btn {
  --px: var(--ap);
  min-width: var(--v2-target);
  min-height: var(--v2-target);
  font-size: var(--v2-text);
}
/* as abas e campos das janelas hospedadas (Configurações): alvo e letra da v2 */
html.ui-v2 .v2-hosted .window-tabs > .tab,
html.ui-v2 .v2-hosted .settings-tabs > .tab,
html.ui-v2 .v2-hosted .settings-choice > .tab { --px: var(--v2-ap); height: auto; min-height: var(--v2-target); min-width: var(--v2-target); font-size: calc(16 * var(--v2-u)); }
html.ui-v2 .v2-hosted .settings-choice { flex-wrap: wrap; gap: calc(6 * var(--v2-u)); }
html.ui-v2 .v2-hosted .settings-row > .btn { --px: var(--v2-ap); min-height: var(--v2-target); font-size: calc(16 * var(--v2-u)); }
html.ui-v2 .v2-hosted select,
html.ui-v2 .v2-hosted input[type='range'],
html.ui-v2 .v2-hosted input[type='number'] { min-height: var(--v2-target); font-size: calc(16 * var(--v2-u)); }
html.ui-v2 .v2-hosted input[type='checkbox'] { flex: none; width: calc(28 * var(--v2-u)); height: calc(28 * var(--v2-u)); }
html.ui-v2 .v2-hosted .settings-row { min-height: var(--v2-target); }
html.ui-v2 .v2-hosted .settings-value { flex: 0 0 auto; min-width: calc(56 * var(--v2-u)); white-space: nowrap; font-size: calc(16 * var(--v2-u)); }
html.ui-v2 .v2-hosted .settings-label { font-size: calc(16 * var(--v2-u)); }
/* o painel solto (os seletores de modo) nasce centrado no palco com `transform` em linha: na folha ele é só conteúdo; o título e o ×
   dele saem (a folha já tem o título e o ◀) */
html.ui-v2 .v2-host-panel > .panel { position: relative !important; left: auto !important; top: auto !important; transform: none !important; }
html.ui-v2 .v2-host-panel > .panel > .window-title { display: none; }
/* as ações do painel no rodapé da folha (`panelSheet › footerFrom`): a principal embaixo à direita, sempre à vista */
#ui2 .v2-panel-foot:has(> .modal-actions + *, > * + .modal-actions) { display: flex; align-items: center; gap: var(--v2-gap-danger); }
#ui2 .v2-panel-foot > .modal-actions { display: flex; justify-content: flex-end; gap: var(--v2-gap-danger); margin: 0 0 0 auto; }
#ui2 .v2-panel-foot .btn { --px: var(--ap); min-height: var(--v2-target); padding: 0 calc(12 * var(--u)); font-size: var(--v2-text); }
html.ui-v2 .btn.chat-btn { min-width: var(--v2-target); min-height: var(--v2-target); }
html.ui-v2 .v2-host-panel > .panel .modal-actions > .btn,
html.ui-v2 .v2-host-panel > .panel .btn { --px: var(--v2-ap); min-height: var(--v2-target); font-size: calc(16 * var(--v2-u)); }

/* a linha da v2 nas Configurações (o tamanho da interface) */
#ui2 .v2-settings-row { display: flex; align-items: center; gap: var(--v2-gap); flex-wrap: wrap; padding: 0 0 var(--v2-edge); }
#ui2 .v2-settings-label { font-size: var(--v2-text); color: var(--c-gold); }
#ui2 .v2-seg-group { display: flex; gap: calc(4 * var(--u)); }
#ui2 .v2-seg.is-on { color: var(--c-gold); outline: calc(2 * var(--u)) solid var(--c-gold); outline-offset: calc(-2 * var(--u)); }

/* ---- o MENU (folha): seções em colunas que enchem a largura, linhas de 48 ---- */
#ui2 .v2-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(188 * var(--u)), 1fr)); gap: calc(12 * var(--u)); align-items: start; }
#ui2 .v2-menu-head { margin: 0 0 calc(4 * var(--u)); font-size: var(--v2-text-small); color: var(--c-text-dim); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 400; }
#ui2 .v2-menu-rows { display: flex; flex-direction: column; gap: calc(4 * var(--u)); }
#ui2 .v2-menu-item {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-height: calc(48 * var(--u));
  padding: 0 calc(10 * var(--u));
  background: var(--v2-panel);
  border: calc(1 * var(--u)) solid var(--v2-line);
  border-radius: calc(4 * var(--u));
  color: var(--c-text);
  font: inherit;
  font-size: var(--v2-text);
  text-align: left;
  cursor: pointer;
}
#ui2 .v2-menu-item:focus-visible { outline: calc(2 * var(--u)) solid var(--c-gold); }
#ui2 .v2-menu-item.is-locked { opacity: 0.55; }
#ui2 .v2-menu-ico { flex: none; width: calc(16 * var(--ap)); height: calc(16 * var(--ap)); background: center / contain no-repeat; image-rendering: pixelated; }
#ui2 .v2-menu-label { flex: 1; }
#ui2 .v2-menu-badge { min-width: calc(24 * var(--u)); padding: 0 calc(5 * var(--u)); background: var(--c-gold); color: var(--c-text-dark); border-radius: calc(10 * var(--u)); text-align: center; font-size: var(--v2-text-small); }
#ui2 .v2-menu-key { color: var(--c-text-dim); font-size: var(--v2-text-small); }
#ui2:not(.is-fine) .v2-menu-key { display: none; }
#ui2 .v2-menu-account { color: var(--c-text-dim); font-size: var(--v2-text-small); padding: calc(2 * var(--u)) 0; }

/* ---- o COLETAR (folha, §8) ---- */
#ui2 .v2-collect { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
#ui2 .v2-collect-head { margin: calc(4 * var(--u)) 0 0; font-size: var(--v2-text-small); color: var(--c-text-dim); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 400; }
#ui2 .v2-collect-list { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
#ui2 .v2-collect-row {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--u));
  min-height: calc(56 * var(--u));
  padding: calc(4 * var(--u)) calc(8 * var(--u));
  background: var(--v2-panel);
  border: calc(1 * var(--u)) solid var(--c-gold);
  border-radius: calc(4 * var(--u));
}
#ui2 .v2-collect-row.is-todo { border-color: var(--v2-line); }
#ui2 .v2-collect-ico { flex: none; width: calc(20 * var(--ap)); height: calc(22 * var(--ap)); background: center / contain no-repeat; image-rendering: pixelated; }
#ui2 .v2-collect-label { flex: 1; font-size: var(--v2-text); }
#ui2 .v2-collect-items { display: flex; gap: calc(6 * var(--u)); flex-wrap: wrap; }
#ui2 .v2-collect-item { display: flex; align-items: center; gap: calc(3 * var(--u)); font-size: var(--v2-text-small); }
#ui2 .v2-collect-item-ico { --px: var(--ap); display: inline-block; width: calc(16 * var(--ap)); height: calc(16 * var(--ap)); }
#ui2 .v2-collect-item-ico > * { width: 100%; height: 100%; background-size: contain; }
#ui2 .v2-collect-count { font-size: var(--v2-text); color: var(--c-gold); }
#ui2 .v2-collect-empty { color: var(--c-text-dim); font-size: var(--v2-text); margin: calc(8 * var(--u)) 0; }
/* cor de texto só no botão CINZA: no de ouro (primário) e no vermelho (perigo) o texto é o do próprio botão — ouro sobre ouro some */
#ui2 .btn-secondary.is-gold:not(:hover) { color: var(--c-gold); }

/* ---- o RESUMO (folha) ---- */
#ui2 .v2-summary { display: flex; flex-direction: column; gap: calc(8 * var(--u)); }
#ui2 .v2-sum-reason { font-size: var(--v2-text-title); color: var(--c-text); }
#ui2 .v2-sum-reason.is-death { color: var(--c-danger); }
#ui2 .v2-sum-hint, #ui2 .v2-sum-line { font-size: var(--v2-text); color: var(--c-text-dim); }
#ui2 .v2-sum-line.is-gold { color: var(--c-gold); }
#ui2 .v2-sum-lost { font-size: var(--v2-text); color: var(--c-danger); }
#ui2 .v2-sum-cols { display: flex; gap: calc(16 * var(--u)); align-items: flex-start; flex-wrap: wrap; }
#ui2 .v2-sum-loot { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
#ui2 .v2-sum-best { display: flex; flex-direction: column; }
#ui2 .v2-sum-best-label { font-size: var(--v2-text-small); color: var(--c-text-dim); }
#ui2 .v2-sum-best-name { font-size: var(--v2-text-title); }
#ui2 .v2-sum-grid { display: grid; grid-template-columns: repeat(6, auto); gap: calc(2 * var(--ap)); justify-content: start; align-items: center; }
#ui2 .v2-sum-more { font-size: var(--v2-text); color: var(--c-text-dim); padding: 0 calc(6 * var(--u)); }
#ui2 .v2-sum-stats { display: grid; grid-template-columns: auto auto; gap: calc(4 * var(--u)) calc(16 * var(--u)); margin: 0; font-size: var(--v2-text); }
#ui2 .v2-sum-stats dt { color: var(--c-text-dim); }
#ui2 .v2-sum-stats dd { margin: 0; text-align: right; }
#ui2 .v2-sum-stats dd.is-gold { color: var(--c-gold); }
#ui2 .v2-sum-foot { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: var(--v2-gap-danger); }
#ui2 .v2-sum-foot-left, #ui2 .v2-sum-foot-right { display: flex; gap: var(--v2-gap); }

/* ---- a CORRIDA (§4) ---- */
html.ui-v2 #hud.v2-hosted-hud > .hud-actions,
html.ui-v2 #hud.v2-hosted-hud > .hud-bottom { display: none; }
#ui2 .v2-run-tl { position: absolute; top: calc(var(--v2-safe-t) + 4 * var(--u)); left: calc(var(--v2-safe-l) + var(--v2-edge)); pointer-events: auto; }
#ui2 .v2-run-tl > .hud-top-left { position: static; }
#ui2 .v2-run-tr { position: absolute; top: calc(var(--v2-safe-t) + 4 * var(--u)); right: calc(var(--v2-safe-r) + var(--v2-edge)); display: flex; align-items: flex-start; gap: var(--v2-gap); pointer-events: none; }
#ui2 .v2-run-tr > * { pointer-events: auto; }
#ui2 .v2-run-stats { display: flex; flex-direction: column; align-items: flex-end; gap: calc(4 * var(--u)); }
#ui2 .v2-run-stats > .hud-top-right { position: static; }
#ui2 .v2-run-stats .btn,
#ui2 .v2-run-stats .vip-speed-btn { min-height: var(--v2-target); font-size: var(--v2-text); }
#ui2 .v2-run-dock.v2-dock-left { flex-direction: row; align-items: flex-end; }
#ui2 .v2-run-dock .quick-use { gap: calc(4 * var(--ap)); }
#ui2 .v2-run-dock #btn-bag { min-height: var(--v2-primary); font-size: var(--v2-text); }
#ui2 .v2-run-dock .v2-dock-row > .btn { min-height: var(--v2-target); font-size: var(--v2-text); }
/* as 5 habilidades num leque de 2 linhas (3 em cima, 2 embaixo, encostadas no canto do polegar) */
#ui2 .v2-run-abilities .hud-abilities { display: grid; grid-template-columns: repeat(3, auto); gap: calc(4 * var(--ap)); direction: rtl; }
#ui2 .v2-run-abilities .hud-abilities > * { direction: ltr; }
#ui2 .v2-run-abilities .hud-bar-col { align-items: flex-end; }
/* o Auto de CADA habilidade não mora mais dentro do botão dela (o dedo acertava os dois): vira o selo de canto, sem toque — o
   automático por habilidade fica no toque longo e na janela de Habilidades (§4, §9) */
#ui2 .v2-run-abilities .ability-auto { pointer-events: none; }
#ui2.has-sheet .v2-run .v2-run-dock, #ui2.has-sheet .v2-run .v2-run-tr, #ui2.has-sheet .v2-run .v2-run-tl { visibility: hidden; }
#ui2 .v2-run-menu { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--v2-gap-danger); }
#ui2 .v2-run-menu-main { display: flex; flex-direction: column; gap: var(--v2-gap); min-width: calc(200 * var(--u)); }
#ui2 .v2-run-menu-danger { display: flex; flex-direction: column; }

/* ---- a FAIXA DE AVISOS (§7): no alto ao centro, nunca nos cantos de baixo ---- */
#ui2 .v2-lane {
  position: absolute;
  top: calc(var(--v2-safe-t) + 60 * var(--u));
  left: 50%;
  width: min(60vw, calc(520 * var(--u)));
  margin-left: calc(min(60vw, calc(520 * var(--u))) / -2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(6 * var(--u));
  pointer-events: none;
}
#ui2 .v2-lane-list { display: flex; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); width: 100%; }
#ui2 .v2-toast {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: calc(6 * var(--u));
  max-width: 100%;
  min-height: var(--v2-target);
  padding: calc(6 * var(--u)) calc(12 * var(--u));
  background: rgba(20, 16, 30, 0.94);
  border: calc(1 * var(--u)) solid var(--v2-line);
  border-radius: calc(6 * var(--u));
  color: var(--c-text);
  font: inherit;
  font-size: var(--v2-text);
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
}
#ui2 .v2-toast.is-error { border-color: var(--c-danger); }
#ui2 .v2-notice { border-color: var(--c-gold); color: var(--c-gold); }
#ui2 .v2-toast-ico { width: calc(16 * var(--ap)); height: calc(16 * var(--ap)); background: center / contain no-repeat; image-rendering: pixelated; }
#ui2 .v2-toast-items { display: flex; flex-wrap: wrap; gap: calc(8 * var(--u)); justify-content: center; width: 100%; }
#ui2 .v2-toast-item { display: flex; align-items: center; gap: calc(4 * var(--u)); font-size: var(--v2-text-small); }
#ui2 .v2-toast-item-ico { --px: var(--ap); display: inline-block; width: calc(16 * var(--ap)); height: calc(16 * var(--ap)); }
#ui2 .v2-toast-item-ico > * { width: 100%; height: 100%; background-size: contain; }
#ui2 .v2-lane .gold-label .ico-gold { width: calc(9 * var(--ap)); height: calc(9 * var(--ap)); }

/* ---- o CARTÃO DA PEÇA (§6.1): metade da tela, do lado oposto à peça ---- */
#ui2 .v2-card-veil { position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, 0.35); pointer-events: auto; }
#ui2 .v2-card {
  position: absolute;
  top: calc(var(--v2-safe-t) + var(--v2-edge));
  bottom: calc(var(--v2-safe-b) + var(--v2-edge));
  width: min(46vw, calc(380 * var(--u)));
  display: flex;
  flex-direction: column;
  pointer-events: none;
}
#ui2 .v2-card[data-side='right'] { right: calc(var(--v2-safe-r) + var(--v2-edge)); }
#ui2 .v2-card[data-side='left'] { left: calc(var(--v2-safe-l) + var(--v2-edge)); }
/* a ficha rola SOZINHA e as ações ficam presas no pé do cartão: com a comparação longa (a peça contra a equipada) o Equipar e o Vender
   caíam abaixo da dobra (medido no servidor real, 2026-10-05) */
#ui2 .v2-card-box {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--v2-gap);
  max-height: 100%;
  overflow: hidden;
  padding: calc(8 * var(--u));
  background: var(--v2-bg);
  border: calc(2 * var(--u)) solid var(--v2-line);
  border-radius: calc(6 * var(--u));
  pointer-events: auto;
}
#ui2 .v2-card:not(.is-pinned) .v2-card-box { pointer-events: none; }
#ui2 .v2-card:not(.is-pinned) .v2-card-close, #ui2 .v2-card:not(.is-pinned) .v2-card-actions, #ui2 .v2-card:not(.is-pinned) .v2-card-danger { display: none; }
#ui2 .v2-card-close { position: absolute; top: calc(4 * var(--u)); right: calc(4 * var(--u)); z-index: 1; min-width: var(--v2-target); min-height: var(--v2-target); padding: 0; }
/* a ficha é o tooltip clássico da v2, preso dentro do cartão, na escala da v2 */
#ui2 .v2-card #v2-item-sheet {
  --px: var(--ap);
  --text-1: calc(8 * var(--ap));
  --text-2: calc(16 * var(--ap));
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  max-width: none !important;
  margin-right: calc(48 * var(--u));
  z-index: auto !important;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  pointer-events: auto;
}
#ui2 .v2-card-actions, #ui2 .v2-card-danger { flex: none; }
#ui2 .v2-card:not(.is-pinned) #v2-item-sheet { pointer-events: none; }
/* FIXADO no celular deitado (a altura é o que falta, a largura sobra): a ficha inteira à esquerda e as ações numa coluna à direita,
   a principal embaixo (o polegar); o Descartar no pé da coluna da ficha, longe do polegar e da principal */
#ui2 .v2-card.is-pinned { width: min(66vw, calc(600 * var(--u))); }
#ui2 .v2-card.is-pinned .v2-card-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) calc(184 * var(--u));
  grid-template-rows: calc(50 * var(--u)) minmax(0, 1fr) auto;
  column-gap: calc(12 * var(--u));
  row-gap: var(--v2-gap);
}
#ui2 .v2-card.is-pinned #v2-item-sheet { grid-column: 1; grid-row: 1 / 3; margin-right: 0; }
#ui2 .v2-card.is-pinned .v2-card-actions {
  grid-column: 2;
  grid-row: 2 / 4;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: stretch;
}
#ui2 .v2-card.is-pinned .v2-card-actions > .btn { white-space: normal; }
#ui2 .v2-card.is-pinned .v2-card-danger { grid-column: 1; grid-row: 3; border-top: 0; padding-top: 0; }
#ui2 .v2-card .is-sell .ico-gold { width: calc(9 * var(--ap)); height: calc(9 * var(--ap)); }
#ui2 .v2-card-actions { display: flex; flex-wrap: wrap; gap: var(--v2-gap); justify-content: flex-end; }
#ui2 .v2-card-danger { display: flex; justify-content: flex-start; padding-top: var(--v2-gap-danger); border-top: calc(1 * var(--u)) solid var(--v2-line); }
#ui2 .v2-card-danger:empty { display: none; }
#ui2 .btn-secondary.is-danger:not(:hover) { color: var(--c-danger); }
#ui2 .btn-secondary.is-danger-soft:not(:hover) { color: var(--c-warn, var(--c-danger)); }

/* ---- o cartão de conexão ---- */
#ui2 .v2-net-card { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0, 0, 0, 0.55); pointer-events: auto; }
#ui2 .v2-net-card.is-boot { background: transparent; pointer-events: none; }
#ui2 .v2-net-panel { display: flex; flex-direction: column; gap: var(--v2-gap); align-items: center; padding: calc(16 * var(--u)); background: var(--v2-bg); border: calc(2 * var(--u)) solid var(--v2-line); border-radius: calc(6 * var(--u)); pointer-events: auto; }
#ui2 .v2-net-row { display: flex; gap: var(--v2-gap-danger); }

/* ---- as peças da clássica que a v2 reestiliza (modais, perguntas, o menu de item, o balão de dica) ---- */
html.ui-v2 .modal-backdrop { position: fixed; inset: 0; }
html.ui-v2 .modal-backdrop .modal {
  --px: var(--v2-ap);
  --text-1: calc(8 * var(--v2-ap));
  --text-2: calc(16 * var(--v2-ap));
  max-width: min(92vw, calc(560 * var(--v2-u)));
  font-size: calc(16 * var(--v2-u));
}
html.ui-v2 .modal-backdrop .modal-actions { gap: calc(16 * var(--v2-u)); }
/* o CAMPO DE TEXTO dos modais (renomear a build, a quantidade, o nome do clã) com o alvo comum e letra de 16 px no mínimo: abaixo de 16 o
   iOS amplia a página ao focar (revisão P1-07; o "Renomear" das Builds abria um campo de 18 px de altura com letra de 1,9 mm) */
html.ui-v2 .modal-backdrop .input,
html.ui-v2 .modal-backdrop input[type='text'],
html.ui-v2 .modal-backdrop input[type='search'],
html.ui-v2 .modal-backdrop input[type='number'],
html.ui-v2 .modal-backdrop textarea {
  min-height: var(--v2-target);
  padding: 0 calc(8 * var(--v2-u));
  font-size: max(16px, calc(16 * var(--v2-u)));
}
/* com o TECLADO virtual aberto (`mount.js` mede o `visualViewport`, §3.2): o modal sobe para a faixa visível, acima do teclado */
html.ui-v2.v2-kb .modal-backdrop { place-items: start center; }
html.ui-v2.v2-kb .modal-backdrop > .modal,
html.ui-v2.v2-kb .modal-backdrop > .panel {
  margin-top: calc(var(--v2-vv-top, 0px) + 8px);
  max-height: calc(var(--v2-vv-h, 100vh) - 16px);
  overflow-y: auto;
}
/* e a FOLHA com um campo (a busca do Bestiário e do Catálogo, o nome novo da Loja) toma a faixa visível: o rodapé da janela (o
   "Confirmar") fica acima do teclado e o corpo rola até o campo (`mount.js`). O teclado deitado do iPhone deixa ~150 px: com o
   foco no CORPO, o cabeçalho sai (o ◀ volta com o teclado fechado); com ele no cabeçalho (a busca), fica (revisão P2-07) */
html.ui-v2.v2-kb #ui2 .v2-sheet:not(.is-parked) {
  top: var(--v2-vv-top, 0px);
  bottom: auto;
  height: var(--v2-vv-h, 100%);
  padding-bottom: 0;
}
html.ui-v2.v2-kb #ui2 .v2-sheet:has(.v2-sheet-body :focus) > .v2-sheet-head { display: none; }
html.ui-v2.v2-kb #ui2 .v2-sheet:has(.v2-sheet-body :focus) > .v2-sheet-body { padding-block: calc(4 * var(--u)); }
html.ui-v2 .modal-backdrop .modal-actions > .btn { min-height: calc(48 * var(--v2-u)); min-width: calc(96 * var(--v2-u)); font-size: calc(16 * var(--v2-u)); }
/* o MENU DA PEÇA (o "Mais…" do cartão e o toque longo): por cima das folhas (z 70) e do cartão (115), centrado na tela e da
   altura dela — no lugar da clássica ele nascia ATRÁS da folha e passava da altura do celular (R-03) */
html.ui-v2 .ctx-menu {
  --px: var(--v2-ap);
  --text-1: max(var(--v2-text-small), calc(8 * var(--v2-ap)));
  position: fixed !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translate(-50%, -50%);
  z-index: 118 !important;
  max-height: calc(100vh - 16px - var(--v2-safe-t) - var(--v2-safe-b));
  max-width: calc(100vw - 32px);
  overflow-y: auto;
  font-size: calc(16 * var(--v2-u));
}
html.ui-v2 .ctx-menu [role='menuitem'] { min-height: var(--v2-target); display: flex; align-items: center; }

/* a PERGUNTA DE QUANTIDADE (`widgets/qtyPrompt.js`: vender uma pilha, usar vários) na régua da v2 (R-04) */
html.ui-v2 .qty-backdrop { position: fixed; inset: 0; }
html.ui-v2 .qty-backdrop .qty-prompt {
  --px: var(--v2-ap);
  --text-1: max(var(--v2-text-small), calc(8 * var(--v2-ap)));
  --text-2: calc(16 * var(--v2-ap));
  max-width: min(92vw, calc(600 * var(--v2-u)));
  font-size: calc(16 * var(--v2-u));
}
html.ui-v2 .qty-prompt .qty-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--v2-gap); }
html.ui-v2 .qty-prompt .btn { min-height: var(--v2-target); min-width: var(--v2-target); font-size: calc(16 * var(--v2-u)); }
html.ui-v2 .qty-prompt .qty-input { min-height: var(--v2-target); width: calc(88 * var(--v2-u)) !important; font-size: calc(16 * var(--v2-u)); }
html.ui-v2 .qty-prompt .modal-actions { gap: var(--v2-gap-danger); }

/* a VENDA RÁPIDA (`widgets/bulkSellPrompt.js`) na régua da v2: o painel inteiro no pixel de arte da v2 (os botões de 48 no painel do
   palco vazavam o rótulo "Vender 1 item por 13 ouro"), as faixas de qualidade — o QUE se vende — com o alvo comum e a caixa de 28
   (antes, faixas de 2,9 mm a 8 px uma da outra: errar "Notável" por "Excelente" vendia as roxas — revisão P1-09) */
html.ui-v2 .bulk-sell-backdrop { position: fixed; inset: 0; }
html.ui-v2 .bulk-sell-backdrop .bulk-sell-prompt {
  --px: var(--v2-ap);
  --text-1: max(var(--v2-text-small), calc(8 * var(--v2-ap)));
  --text-2: calc(16 * var(--v2-ap));
  display: flex;
  flex-direction: column;
  min-width: min(92vw, calc(360 * var(--v2-u)));
  max-width: min(92vw, calc(600 * var(--v2-u)));
  max-height: calc(100vh - 16px - var(--v2-safe-t) - var(--v2-safe-b));
  font-size: calc(16 * var(--v2-u));
}
/* o corpo rola e as ações ficam presas embaixo, sempre à vista (no SE a pergunta inteira passa da altura) */
html.ui-v2 .bulk-sell-prompt > .window-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 0 calc(4 * var(--v2-u)); }
html.ui-v2 .bulk-sell-prompt > .window-title,
html.ui-v2 .bulk-sell-prompt > .modal-actions { flex: none; }
html.ui-v2 .bulk-sell-prompt .bulk-sell-tiers { gap: var(--v2-gap); }
html.ui-v2 .bulk-sell-prompt .bulk-sell-tier { min-height: var(--v2-target); padding: 0 calc(10 * var(--v2-u)); font-size: calc(15 * var(--v2-u)); }
html.ui-v2 .bulk-sell-prompt .bulk-sell-tier[aria-pressed='true'] { outline: calc(2 * var(--v2-u)) solid var(--c-gold); outline-offset: calc(-2 * var(--v2-u)); }
html.ui-v2 .bulk-sell-prompt .bulk-sell-check-row { min-height: var(--v2-target); gap: var(--v2-gap); }
/* o `#ui-root` porque a regra da caixa da clássica é por id (`base.css`) */
html.ui-v2 #ui-root .bulk-sell-prompt input[type='checkbox'] { width: var(--v2-target); height: var(--v2-target); background-size: calc(18 * var(--v2-u)) calc(18 * var(--v2-u)); }
html.ui-v2 .bulk-sell-prompt .modal-actions { gap: var(--v2-gap-danger); flex-wrap: wrap; }
html.ui-v2 .bulk-sell-prompt .modal-actions > .btn { min-height: calc(48 * var(--v2-u)); font-size: calc(16 * var(--v2-u)); white-space: normal; line-height: 1.15; padding: calc(4 * var(--v2-u)) calc(12 * var(--v2-u)); }

/* toda pergunta com AÇÃO PERIGOSA na mesma ordem: o perigo à esquerda, a saída segura à direita (o polegar, o foco). No DOM as da
   clássica e as da v2 vêm na ordem da clássica (a segura antes); a fileira vira aqui (R-08) */
html.ui-v2 .modal-backdrop .modal-actions:has(> .btn-danger) { flex-direction: row-reverse; justify-content: flex-start; }
/* ---- o celular EM PÉ (§3.1): a capa "Gire o celular" cobre tudo (o mundo de 640×360 é paisagem); só com o dedo — a janela estreita
   do PC não é um celular em pé. O desenho do aparelho deita uma vez a cada 2 s (parado com movimento reduzido) ---- */
#ui2 .v2-rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #ui2 .v2-rotate {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 10;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(24 * var(--u));
    padding: calc(24 * var(--u));
    background: var(--v2-bg);
    pointer-events: auto;
    text-align: center;
  }
}
#ui2 .v2-rotate-phone {
  width: calc(36 * var(--u));
  height: calc(64 * var(--u));
  border: calc(3 * var(--ap)) solid var(--c-gold);
  animation: v2-rotate-phone 2s steps(1, end) infinite;
}
#ui2 .v2-rotate-text { margin: 0; max-width: calc(280 * var(--u)); font-size: var(--v2-text-title); line-height: 1.3; color: var(--c-gold); }
@keyframes v2-rotate-phone {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(90deg); }
}
@media (prefers-reduced-motion: reduce) {
  #ui2 .v2-rotate-phone { animation: none; transform: rotate(90deg); }
}

/* ---- as peças de BASE da clássica (`base.css`) que lá só valem sob `#ui-root`: dentro da raiz da v2 (as janelas hospedadas, a camada
   de dicas) elas faltavam — o balão de dica nascia `static` no canto de cima, sem moldura, e a região do leitor de tela (`.sr-only`)
   aparecia escrita na tela; os campos saíam com o desenho do sistema. Mesma peça, na régua da v2 ---- */
#ui2 #ui-hints { z-index: 120; }
#ui2 .hint-bubble {
  position: absolute;
  max-width: min(70vw, calc(420 * var(--u)));
  padding: calc(6 * var(--u)) calc(10 * var(--u));
  border: calc(2 * var(--u)) solid var(--c-gold);
  background: var(--c-field-bg);
  color: var(--c-text);
  font-size: calc(16 * var(--u));
  line-height: 1.3;
  pointer-events: none;
}
#ui2 .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
#ui2 .btn[aria-disabled='true'] { cursor: not-allowed; }
#ui2 [data-hint].has-more:not(.btn) { border-bottom: calc(1 * var(--ap)) dotted rgba(244, 240, 230, 0.4); cursor: help; }
#ui2 .btn[data-hint].has-more { cursor: pointer; }
#ui2 .btn[data-hint].has-more > span:last-child { border-bottom: calc(1 * var(--ap)) dotted rgba(244, 240, 230, 0.4); }
#ui2 select,
#ui2 input[type='number'],
#ui2 input[type='range'],
#ui2 input[type='checkbox'] {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  font: inherit;
  color: var(--c-text);
  image-rendering: pixelated;
}
#ui2 select,
#ui2 input[type='number'] {
  min-height: var(--v2-target);
  padding: 0 calc(8 * var(--u));
  border: calc(2 * var(--ap)) solid transparent;
  border-image: var(--ui-panel_inset, url(../../assets/ui/windows/panel_inset.png)) 2 / calc(2 * var(--ap)) stretch;
  background-color: var(--c-field-bg);
  font-size: var(--v2-text);
}
#ui2 input[type='number']::-webkit-outer-spin-button,
#ui2 input[type='number']::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#ui2 select {
  padding-right: calc(28 * var(--u));
  background-repeat: no-repeat;
  background-image:
    linear-gradient(var(--c-text-dim), var(--c-text-dim)),
    linear-gradient(var(--c-text-dim), var(--c-text-dim)),
    linear-gradient(var(--c-text-dim), var(--c-text-dim)),
    linear-gradient(var(--c-text-dim), var(--c-text-dim));
  background-size: calc(7 * var(--ap)) var(--ap), calc(5 * var(--ap)) var(--ap), calc(3 * var(--ap)) var(--ap), var(--ap) var(--ap);
  background-position:
    right calc(8 * var(--u)) center,
    right calc(8 * var(--u) + var(--ap)) calc(50% + var(--ap)),
    right calc(8 * var(--u) + 2 * var(--ap)) calc(50% + 2 * var(--ap)),
    right calc(8 * var(--u) + 3 * var(--ap)) calc(50% + 3 * var(--ap));
  cursor: pointer;
}
#ui2 select option { background-color: var(--c-field-pop); color: var(--c-text); }
#ui2 select:disabled,
#ui2 input[type='number']:disabled,
#ui2 input[type='checkbox']:disabled,
#ui2 input[type='range']:disabled { color: var(--c-text-dim); opacity: 0.6; cursor: default; }
#ui2 input[type='checkbox'] {
  flex: none;
  width: calc(28 * var(--u));
  height: calc(28 * var(--u));
  margin: 0;
  border: calc(2 * var(--ap)) solid transparent;
  border-image: var(--ui-panel_inset, url(../../assets/ui/windows/panel_inset.png)) 2 / calc(2 * var(--ap)) stretch;
  background-color: var(--c-field-bg);
  cursor: pointer;
}
#ui2 input[type='checkbox']:checked {
  background-image: linear-gradient(var(--c-gold), var(--c-gold));
  background-repeat: no-repeat;
  background-size: calc(12 * var(--u)) calc(12 * var(--u));
  background-position: center;
}
#ui2 input[type='range'] { height: var(--v2-target); background: none; cursor: pointer; }
#ui2 input[type='range']::-webkit-slider-runnable-track {
  height: calc(10 * var(--u));
  border: calc(2 * var(--ap)) solid transparent;
  border-image: var(--ui-panel_inset, url(../../assets/ui/windows/panel_inset.png)) 2 / calc(2 * var(--ap)) stretch;
  background-color: var(--c-field-bg);
}
#ui2 input[type='range']::-moz-range-track {
  height: calc(10 * var(--u));
  border: calc(2 * var(--ap)) solid transparent;
  border-image: var(--ui-panel_inset, url(../../assets/ui/windows/panel_inset.png)) 2 / calc(2 * var(--ap)) stretch;
  background-color: var(--c-field-bg);
}
#ui2 input[type='range']::-moz-range-progress { height: calc(4 * var(--u)); background-color: var(--c-gold); }
#ui2 input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: calc(16 * var(--u));
  height: calc(28 * var(--u));
  margin-top: calc(-11 * var(--u));
  border: calc(1 * var(--ap)) solid var(--c-field-edge);
  border-radius: 0;
  background-color: var(--c-gold);
}
#ui2 input[type='range']::-moz-range-thumb {
  width: calc(16 * var(--u));
  height: calc(28 * var(--u));
  border: calc(1 * var(--ap)) solid var(--c-field-edge);
  border-radius: 0;
  background-color: var(--c-gold);
}
#ui2 select:focus-visible,
#ui2 input[type='number']:focus-visible,
#ui2 input[type='range']:focus-visible,
#ui2 input[type='checkbox']:focus-visible { outline: calc(2 * var(--u)) solid var(--c-gold); outline-offset: 0; }
/* a ficha não ensina tecla a quem não tem teclado (§6.1): o "Shift: detalhes" só com ponteiro fino */
#ui2:not(.is-fine) .v2-card .tooltip-more { display: none; }

/* ---- a faixa de avisos NA CORRIDA: o alto ao centro é do combo e do chefe; ela desce para a esquerda, embaixo do quadro do herói ---- */
#ui2[data-route='v2-run'] .v2-lane {
  top: calc(var(--v2-run-hero-b, calc(var(--v2-safe-t) + 104 * var(--u))) + 8 * var(--u));
  left: var(--v2-inset-l);
  width: min(44vw, calc(360 * var(--u)));
  margin-left: 0;
  align-items: flex-start;
}
#ui2[data-route='v2-run'] .v2-lane-list { align-items: flex-start; }
/* com uma folha aberta, a faixa mora LOGO ABAIXO do cabeçalho dela, ao centro: no cabeçalho ela cobria as ferramentas dele (os atalhos
   da Mochila, as abas Equipamento · Mochila, o "Redistribuir") — e o aviso FIXO de sistema ("Jogo atualizado") as deixava intocáveis
   até recarregar. O cabeçalho (o ◀ e as ações dele) fica sempre alcançável; o aviso cobre, por alguns segundos, o alto do corpo */
#ui2.has-sheet .v2-lane,
#ui2.has-sheet[data-route='v2-run'] .v2-lane {
  top: calc(var(--v2-safe-t) + 62 * var(--u));
  left: 50%;
  width: min(44vw, calc(360 * var(--u)));
  margin-left: calc(min(44vw, calc(360 * var(--u))) / -2);
  align-items: center;
}
#ui2.has-sheet .v2-lane-list { align-items: center; }
/* o aviso FIXO de sistema ("Jogo atualizado: recarregue") espera a folha fechar: preso no alto do corpo ele tapava, até recarregar, a
   1.ª fila da grade da Mochila; recarregar pode esperar o jogador sair da folha (ele volta no lobby e na corrida) */
#ui2.has-sheet .v2-lane > .v2-notice { display: none; }
/* a aba Teclado é do PC (§10): no dedo ela não aparece */
#ui2:not(.is-fine) #settings-tab-keys { display: none; }

/* ---- o CHAT (clássico, §1.1, até a frente "social"): o botão sai do mundo e mora embaixo do ≡, com 44 de toque; o painel abre para
   baixo e para a esquerda, na escala da v2 ---- */
html.ui-v2 .chat {
  --px: var(--v2-ap);
  --text-1: max(var(--v2-text-small), calc(8 * var(--v2-ap)));
  position: fixed;
  left: auto;
  right: var(--v2-inset-r);
  top: calc(var(--v2-safe-t) + 60 * var(--v2-u));
  bottom: auto;
}
html.ui-v2 .btn.chat-btn { width: calc(48 * var(--v2-u)); height: calc(48 * var(--v2-u)); }
html.ui-v2 .chat-panel { left: auto; right: 0; top: calc(100% + 4 * var(--v2-u)); bottom: auto; }
/* no lobby nas faixas `col`/`wide`, o ≡ e o chat dividem a coluna da direita com as docas: nada muda (a coluna é a mesma) */

/* ---- o feed de abates e de loot e o rastreador de missões da corrida (clássicos), na escala e na letra da v2; o feed sobe acima da
   doca das poções. A letra é DECLARADA (o `#hud` herda a computada de 8 px da clássica: só a variável não bastava — R-12) ---- */
html.ui-v2 #hud .loot-feed,
html.ui-v2 #hud .hud-quests {
  --px: var(--v2-ap);
  --text-1: max(var(--v2-text-small), calc(8 * var(--v2-ap)));
  font-size: var(--text-1);
}
html.ui-v2 #hud .loot-feed { bottom: calc(84 * var(--v2-u)); }
/* as teclas (Q, E, 1–5) só com ponteiro fino: o dedo não tem teclado (R-09) */
#ui2:not(.is-fine) .v2-run .ability-key { display: none; }
/* o botão travado da doca leva o cadeado: travado não é só uma cor (N6, R-11) */
#ui2 .v2-dock .v2-btn { position: relative; }
#ui2 .v2-dock .v2-btn[aria-disabled='true']::after {
  content: '';
  position: absolute;
  top: calc(3 * var(--u));
  right: calc(3 * var(--u));
  width: calc(12 * var(--ap));
  height: calc(12 * var(--ap));
  background: var(--ui-ico_lock) center / contain no-repeat;
  image-rendering: pixelated;
}
#ui2 .v2-card-danger { gap: var(--v2-gap-danger); }