/* warband.css — a janela do GRUPO GUERREIRO (`js/ui/windows/warband.js`; docs/specs/warband.md §12.3). Medidas em px de arte
   (calc(N * var(--px))). A janela é 592 × 276 em (24, 40): o corpo (`.window-body`) mede 580 × 246, o miolo 576 (2 de respiro de
   cada lado); a faixa de abas leva 18 (14 + 4) e cada aba fica com 576 × 228.
   A ABA GRUPO, integrante: faixa 20 · 2 · [penalidade 16 · 2] · cartões 168 · 2 · rodapé 18 = 228 com a penalidade (210 sem):
   quatro cartões de 140 × 168 com 4 de vão = 572. O ARMAZÉM: estoque 300 · 8 · Registro 268. A LOJA: saldo 14 · 4 · cartões de
   188 × 100 em 3 × 2 com 6 de vão (576 × 206). Nada aqui pulsa: o Grupo vive na cena da arena (o HUD é `warband-hud.css`). */

.wb-layout { display: flex; flex-direction: column; height: 100%; min-height: 0; padding: 0 calc(2 * var(--px)); }
.wb-tabs { flex: none; }
.wb-pane { position: relative; flex: 1 1 auto; min-height: 0; }
.wb-pane[hidden] { display: none; }

/* ---- peças da série -------------------------------------------------------------------------------------------------------- */
.wb-ico { display: inline-block; flex: none; background-repeat: no-repeat; background-size: 100% 100%; image-rendering: pixelated; }
.wb-ico.is-32 { width: calc(32 * var(--px)); height: calc(32 * var(--px)); }
.wb-ico.is-16 { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
.wb-ico.is-12 { width: calc(12 * var(--px)); height: calc(12 * var(--px)); }
.wb-ico.is-9 { width: calc(9 * var(--px)); height: calc(9 * var(--px)); }
.wb-ico.is-8 { width: calc(8 * var(--px)); height: calc(8 * var(--px)); }
.wb-chip { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); white-space: nowrap; }
.wb-word { white-space: nowrap; }
.wb-sep { color: var(--c-text-dim); }
.wb-line { display: flex; align-items: center; gap: calc(3 * var(--px)); min-width: 0; line-height: calc(10 * var(--px)); white-space: nowrap; }
.wb-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* a pista (G4) tem a largura do que ela marca, nunca a da linha inteira */
#ui-root .wb-chip[data-hint].has-more, #ui-root .wb-debuff[data-hint].has-more, #ui-root .wb-col-head[data-hint].has-more, #ui-root .wb-qty[data-hint].has-more { width: fit-content; }

/* selo de ESTADO (G2): moldura de 1 px + palavra curta; a cor nunca vem sozinha (o molde do `.war-seal`) */
.wb-seal {
  flex: none;
  display: inline-flex;
  align-items: center;
  padding: 0 calc(2 * var(--px));
  border: var(--px) solid currentColor;
  color: var(--c-text-dim);
  line-height: calc(9 * var(--px));
  white-space: nowrap;
}
.wb-seal.is-gold { color: var(--c-gold); }
.wb-seal.is-bad { color: var(--c-danger); }
/* a pista no selo não pode ser o `border-bottom` dele (a moldura o come, G4): o pontilhado vai no texto */
#ui-root .wb-seal[data-hint].has-more { border-bottom-style: solid; }
#ui-root .wb-seal[data-hint].has-more > span:last-child { border-bottom: var(--px) dotted currentColor; }

/* o ponto de presença (a peça dos Amigos: disco cheio = conectado, argola = desconectado; nunca só a cor — §8.7) */
.wb-dot { flex: none; width: calc(8 * var(--px)); height: calc(8 * var(--px)); background-image: var(--ui-ico_offline); background-position: center; background-size: contain; background-repeat: no-repeat; image-rendering: pixelated; }
.wb-dot.is-online { background-image: var(--ui-ico_online); }

/* o vazio que ensina (G5: o painel inteiro vazio mantém um título curto) e o "Carregando…" */
.wb-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--px)); padding: calc(12 * var(--px)) 0; text-align: center; color: var(--c-text-dim); }
.wb-empty > .btn { color: var(--c-text); }

/* =============================================================================================================================
   GRUPO — integrante
   ============================================================================================================================= */
.wb-group { height: 100%; }
.wb-member { display: flex; flex-direction: column; gap: calc(2 * var(--px)); height: 100%; }

/* a faixa de estado, 20: selo · [ampulheta] · [fúria] · [olho] — e as ações à direita */
.wb-strip { display: flex; align-items: center; gap: calc(6 * var(--px)); height: calc(20 * var(--px)); flex: none; min-width: 0; }
.wb-strip > .footer-spacer, .wb-foot > .footer-spacer, .wb-shop-head > .footer-spacer, .wb-pick-row > .footer-spacer { flex: 1 1 auto; min-width: 0; }
.wb-strip > .btn { flex: none; }

/* a penalidade, 16, só com acúmulo: [maldição] ×3 · EXP −30% · Loot −30% · 0:47 */
.wb-debuff { display: flex; align-items: center; gap: calc(3 * var(--px)); height: calc(16 * var(--px)); flex: none; white-space: nowrap; }
.wb-debuff-left { min-width: calc(20 * var(--px)); font-variant-numeric: tabular-nums; }

/* os quatro cartões de 140 × 168 na ordem do número */
.wb-cards { display: grid; grid-template-columns: repeat(4, calc(140 * var(--px))); column-gap: calc(4 * var(--px)); height: calc(168 * var(--px)); flex: none; }
.wb-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
  width: calc(140 * var(--px));
  height: calc(168 * var(--px));
  padding: calc(3 * var(--px));
  border: var(--px) solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  min-width: 0;
}
.wb-card.is-me { border-color: rgba(224, 176, 64, 0.45); }
/* o cartão do integrante é VERTICAL e centrado (o molde do cartão da seleção de personagem): o rosto em cima, o nome inteiro
   na largura do cartão (132), Nv + brasão, [◆] e [alvo], os selos; a ação no pé. Lado a lado o rosto comia 40 do nome e o
   cartão ficava com dois terços vazios (visto na prova do mock, 2026-10-04) */
.wb-card.is-member { align-items: center; text-align: center; }
.wb-card-head { display: flex; flex-direction: column; align-items: center; gap: calc(3 * var(--px)); min-width: 0; max-width: 100%; }
.wb-card-id { display: flex; flex-direction: column; align-items: center; gap: calc(2 * var(--px)); min-width: 0; max-width: 100%; }
.wb-card-nums, .wb-card-marks { justify-content: center; flex-wrap: wrap; row-gap: calc(2 * var(--px)); white-space: normal; }
.wb-card-marks { min-height: calc(11 * var(--px)); }
.wb-card-act { margin-top: auto; align-self: stretch; justify-content: center; }
.wb-card .wb-name { max-width: calc(132 * var(--px)); line-height: calc(10 * var(--px)); }
.wb-more { align-self: center; min-width: calc(32 * var(--px)); }
.wb-build, .wb-watching { display: inline-flex; align-items: center; }

/* o rosto 36 (o `.slot` do retrato) com a PLACA do número em ↖ e o ponto de presença em ↘. A placa é ESCURA com o número em
   ouro (o número em escuro sobre o ouro se perdia no ouro da moldura — a mesma pastilha do selo de tier, `.slot-tier`) */
.wb-face { position: relative; flex: none; width: calc(36 * var(--px)); height: calc(36 * var(--px)); }
.wb-plate {
  position: absolute;
  left: calc(-3 * var(--px));
  top: calc(-3 * var(--px));
  z-index: 1;
  min-width: calc(10 * var(--px));
  height: calc(10 * var(--px));
  padding: 0 calc(2 * var(--px));
  font-size: var(--text-1);
  line-height: calc(10 * var(--px));
  text-align: center;
  color: var(--c-gold);
  background: #0d0a14;
  box-shadow: inset 0 0 0 var(--px) var(--c-gold);
  pointer-events: none;
}
.wb-face > .wb-dot { position: absolute; right: calc(-2 * var(--px)); bottom: calc(-2 * var(--px)); z-index: 1; pointer-events: none; }

/* a vaga livre: a porta do líder, o convite pendente ou a silhueta (G5: sem ação, sem marca) */
.wb-card.is-free { border-style: dashed; border-color: rgba(255, 255, 255, 0.16); background: rgba(0, 0, 0, 0.12); }
.wb-slot-num { position: absolute; left: calc(3 * var(--px)); top: calc(2 * var(--px)); color: var(--c-text-dim); line-height: calc(9 * var(--px)); }
.wb-card.is-door { align-items: center; justify-content: center; }
.wb-card.is-door > .btn { flex: none; }
.wb-plus { margin-right: calc(2 * var(--px)); }
.wb-card-note { line-height: calc(10 * var(--px)); }
.wb-card.is-pending { align-items: center; justify-content: center; text-align: center; }
.wb-card.is-pending > .wb-name { max-width: calc(132 * var(--px)); }
.wb-card.is-pending > .btn { margin-top: calc(6 * var(--px)); }
.wb-silhouette {
  margin: auto;
  width: calc(36 * var(--px));
  height: calc(36 * var(--px));
  border: var(--px) dashed rgba(255, 255, 255, 0.12);
  border-radius: 50% 50% 0 0;
}

/* o rodapé da semana (18) e o "Desfazer grupo" do líder */
.wb-foot { display: flex; align-items: center; gap: calc(4 * var(--px)); height: calc(18 * var(--px)); flex: none; min-width: 0; white-space: nowrap; }
.wb-foot > .btn { flex: none; }

/* =============================================================================================================================
   GRUPO — sem grupo: a apresentação com o Criar e os convites recebidos (linhas de 40: o rosto 36)
   ============================================================================================================================= */
.wb-none { display: flex; flex-direction: column; gap: calc(6 * var(--px)); height: 100%; }
.wb-none-head { display: flex; align-items: center; gap: calc(8 * var(--px)); min-height: calc(24 * var(--px)); flex: none; }
.wb-intro { flex: 1 1 auto; min-width: 0; }
.wb-none-head > .btn { flex: none; }
.wb-invites { display: flex; flex-direction: column; gap: calc(2 * var(--px)); flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.wb-invite { display: flex; align-items: center; gap: calc(6 * var(--px)); min-height: calc(40 * var(--px)); flex: none; padding: calc(2 * var(--px)); border-bottom: var(--px) solid rgba(255, 255, 255, 0.06); }
.wb-invite-text { display: flex; flex-direction: column; gap: calc(3 * var(--px)); flex: 1 1 auto; min-width: 0; }
.wb-invite > .btn { flex: none; }

/* =============================================================================================================================
   A FOLHA "Convidar amigo" — cobre a aba Grupo inteira
   ============================================================================================================================= */
.wb-sheet { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: calc(4 * var(--px)); background: var(--c-panel-fill); }
.wb-sheet-head { display: flex; align-items: center; gap: calc(6 * var(--px)); min-height: calc(18 * var(--px)); flex: none; }
.wb-sheet-title { color: var(--c-gold); white-space: nowrap; }
.wb-pick-list { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.wb-pick-row { display: flex; align-items: center; gap: calc(4 * var(--px)); min-height: calc(22 * var(--px)); flex: none; padding: 0 calc(2 * var(--px)); border-bottom: var(--px) solid rgba(255, 255, 255, 0.05); white-space: nowrap; }
.wb-pick-row > .wb-name { max-width: calc(160 * var(--px)); }
/* o convidado que não é amigo (sem o ponto de presença e o brasão): o nome alinha com os outros (8 + 4 + 12 + 4) */
.wb-pick-row.is-stranger > .wb-name { margin-left: calc(28 * var(--px)); }
.wb-pick-row > .btn { flex: none; }

/* =============================================================================================================================
   ARMAZÉM — o estoque (300) e o Registro (268)
   ============================================================================================================================= */
.wb-chest { display: flex; gap: calc(8 * var(--px)); height: 100%; }
.wb-stock { display: flex; flex-direction: column; width: calc(300 * var(--px)); flex: none; height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.wb-stock-row { display: flex; align-items: center; gap: calc(4 * var(--px)); height: calc(22 * var(--px)); flex: none; padding: 0 calc(2 * var(--px)); border-bottom: var(--px) solid rgba(255, 255, 255, 0.05); touch-action: auto; }
.wb-stock-row:focus-visible { outline: var(--px) solid #fff5a8; outline-offset: calc(-1 * var(--px)); }
.wb-stock-row > .wb-name { flex: 1 1 auto; }
.wb-stock-row > .btn { flex: none; }
.wb-qty { flex: none; text-align: right; font-variant-numeric: tabular-nums; }
.wb-item-ico { cursor: pointer; }
.wb-log-col { display: flex; flex-direction: column; gap: calc(2 * var(--px)); flex: 1 1 auto; min-width: 0; height: 100%; }
.wb-col-head { flex: none; color: var(--c-gold); line-height: calc(12 * var(--px)); }
.wb-log { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.wb-log-row { display: flex; align-items: center; flex-wrap: wrap; gap: calc(3 * var(--px)); min-height: calc(18 * var(--px)); flex: none; padding: var(--px) calc(2 * var(--px)); border-bottom: var(--px) solid rgba(255, 255, 255, 0.05); touch-action: auto; }
.wb-log-when { flex: none; font-variant-numeric: tabular-nums; }
.wb-log-name { flex: none; color: var(--c-gold); }
.wb-log-item { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); }
.wb-log > .btn { align-self: center; margin-top: calc(4 * var(--px)); flex: none; }

/* =============================================================================================================================
   LOJA — o saldo no alto e os cartões de 188 × 100 em 3 × 2
   ============================================================================================================================= */
.wb-shop { display: flex; flex-direction: column; gap: calc(4 * var(--px)); height: 100%; }
.wb-shop-head { display: flex; align-items: center; height: calc(14 * var(--px)); flex: none; }
.wb-balance { color: var(--c-gold); }
.wb-offers { display: grid; grid-template-columns: repeat(3, calc(188 * var(--px))); grid-auto-rows: calc(100 * var(--px)); gap: calc(6 * var(--px)); }
.wb-offer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: calc(3 * var(--px));
  width: calc(188 * var(--px));
  height: calc(100 * var(--px));
  padding: calc(4 * var(--px));
  border: var(--px) solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.22);
  touch-action: auto;
}
.wb-offer-top { display: flex; gap: calc(6 * var(--px)); min-width: 0; }
.wb-offer-pic { position: relative; flex: none; width: calc(32 * var(--px)); height: calc(32 * var(--px)); }
.wb-offer-pic > .work-item-icon { width: calc(32 * var(--px)); height: calc(32 * var(--px)); }
/* o ×N DENTRO do ícone, no canto ↘ — o da pilha da mochila (`.slot-qty`): fora dele o número invadia a coluna do texto */
.wb-offer-qty { position: absolute; right: 0; bottom: 0; line-height: 1; color: var(--c-text); text-shadow: var(--px) var(--px) 0 #000, calc(-1 * var(--px)) 0 0 #000, 0 calc(-1 * var(--px)) 0 #000; white-space: nowrap; }
.wb-offer-gold { color: var(--c-gold); line-height: calc(10 * var(--px)); }
.wb-offer-text { display: flex; flex-direction: column; gap: calc(3 * var(--px)); min-width: 0; }
.wb-offer-name { color: var(--c-gold); line-height: calc(10 * var(--px)); }
.wb-offer-lim, .wb-offer-renew { line-height: calc(10 * var(--px)); white-space: nowrap; }
.wb-offer > .btn { align-self: stretch; justify-content: center; }
.wb-price { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); margin-left: calc(3 * var(--px)); }