/* war.css — a GUERRA DE ILHAS v2 na tela (docs/specs/clas.md §8.11): a janela Guerras (`js/ui/windows/war.js`), o bloco da
   ilha nos dois modos (`js/ui/widgets/warBidPanel.js`: o cartão da janela e a seção Disputa do cartão da ilha da carta), o
   prompt do lance fechado (`js/ui/widgets/warBidPrompt.js`) e a ficha da build de Guerra (`js/ui/widgets/warFighterCard.js`).
   Medidas em px de arte (calc(N * var(--px))). A janela é 592 × 276 em (24, 40): o corpo (`.window-body`) mede 580 × 246; a
   faixa de abas leva 18 (14 + 4) e cada aba fica com 580 × 228. Nada aqui pulsa: o pulso da carta é do próximo passo
   (docs/specs/workers-nodes.md §7.3), e o bloco da ilha mora no cartão dela. */

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

/* ---- botões de lista/célula: sem a moldura do `.btn` (a moldura é a da célula) ---------------------------------------- */
.war-cell, .war-row, .war-hrow-open, .war-isle-open {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  margin: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}

/* ---- peças da série ---------------------------------------------------------------------------------------------------- */
.war-ico { display: inline-block; flex: none; background-repeat: no-repeat; background-size: 100% 100%; image-rendering: pixelated; }
.war-ico.is-16 { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
.war-ico.is-12 { width: calc(12 * var(--px)); height: calc(12 * var(--px)); }
.war-ico.is-9 { width: calc(9 * var(--px)); height: calc(9 * var(--px)); }
.war-ico.is-8 { width: calc(8 * var(--px)); height: calc(8 * var(--px)); }
.war-power { display: inline-flex; align-items: center; gap: var(--px); white-space: nowrap; }
.war-dot { color: var(--c-text-dim); }

/* selo de ESTADO (G2): moldura de 1 px + palavra curta; a cor nunca vem sozinha */
.war-seal {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--px));
  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;
}
.war-seal.is-gold { color: var(--c-gold); }
.war-seal.is-bad { color: var(--c-danger); }
.war-seal.is-ok { color: var(--c-ok); }
/* a pista no selo não pode ser o `border-bottom` dele (a moldura o come, G4): o pontilhado vai no texto */
#ui-root .war-seal[data-hint].has-more { border-bottom-style: solid; }
#ui-root .war-seal[data-hint].has-more > span:last-child { border-bottom: var(--px) dotted currentColor; }

/* ---- vazio com porta (G5, §19.3) ---------------------------------------------------------------------------------------- */
.war-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--px)); height: 100%; text-align: center; color: var(--c-text-dim); }
.war-empty > .btn { color: var(--c-text); }

/* =========================================================================================================================
   ESQUADRÃO — tabuleiro 300 × 182 à esquerda, lista 268 × 182 à direita, rodapé de 22
   ========================================================================================================================= */
.war-squad { display: flex; flex-direction: column; gap: calc(4 * var(--px)); height: 100%; }
.war-squad-top { display: flex; gap: calc(8 * var(--px)); height: calc(182 * var(--px)); flex: none; }

/* três colunas de 96, da esquerda para a direita Retaguarda · Centro · Vanguarda (o inimigo à direita) */
.war-board { display: grid; grid-template-columns: repeat(3, calc(96 * var(--px))); column-gap: calc(6 * var(--px)); width: calc(300 * var(--px)); height: calc(182 * var(--px)); flex: none; }
.war-col { display: flex; flex-direction: column; min-width: 0; }
.war-col-head {
  display: flex;
  align-items: center;
  gap: calc(2 * var(--px));
  height: calc(22 * var(--px));
  flex: none;
  padding: 0 calc(2 * var(--px));
  color: var(--c-gold);
  border-bottom: var(--px) solid rgba(224, 176, 64, 0.35);
}
.war-col-word { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-col-head > .war-col-word[data-hint].has-more { width: fit-content; }
.war-col-foe { margin-left: auto; color: var(--c-text-dim); }

/* célula 96 × 32: linha 1 = o NOME com os 92 px; linha 2 = brasão + «Nv 40 · ◆ 24.100» */
.war-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--px);
  width: calc(96 * var(--px));
  height: calc(32 * var(--px));
  flex: none;
  padding: 0 calc(2 * var(--px));
  border-bottom: var(--px) solid rgba(255, 255, 255, 0.06);
}
.war-cell:hover, .war-cell:focus-visible { background: rgba(255, 255, 255, 0.06); }
.war-cell:focus-visible { outline: var(--px) solid #fff5a8; outline-offset: calc(-1 * var(--px)); }
.war-cell.is-selected { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); background: rgba(224, 176, 64, 0.1); }
.war-cell-name { display: block; max-width: calc(92 * var(--px)); line-height: calc(10 * var(--px)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-cell-line { display: flex; align-items: center; gap: calc(2 * var(--px)); line-height: calc(10 * var(--px)); color: var(--c-text-dim); white-space: nowrap; overflow: hidden; }
/* o fantasma «+»: só no fim da coluna que ainda cabe, com cargo, sem trava e sem o esquadrão cheio (G5) */
.war-ghost { align-items: center; color: var(--c-text-dim); border: var(--px) dashed rgba(255, 255, 255, 0.18); }
.war-ghost > span { font-size: calc(10 * var(--px)); line-height: 1; }
.war-ghost.is-armed { color: var(--c-gold); border-color: var(--c-gold); }

/* a lista 268 × 182 (rola: `.war-list` está em css/scroll-fade.css) */
.war-list { display: flex; flex-direction: column; width: calc(268 * var(--px)); height: calc(182 * var(--px)); flex: none; overflow-y: auto; overflow-x: hidden; }
.war-row { display: flex; align-items: center; gap: calc(2 * var(--px)); width: 100%; height: calc(18 * var(--px)); flex: none; padding: 0 calc(2 * var(--px)); touch-action: auto; }
.war-row:hover, .war-row:focus-visible { background: rgba(255, 255, 255, 0.06); }
.war-row:focus-visible { outline: var(--px) solid #fff5a8; outline-offset: calc(-1 * var(--px)); }
.war-row.is-in { background: rgba(224, 176, 64, 0.07); }
.war-row.is-selected { outline: var(--px) solid var(--c-gold); outline-offset: calc(-1 * var(--px)); }
.war-row-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-row-lvl { flex: none; width: calc(30 * var(--px)); text-align: right; color: var(--c-text-dim); white-space: nowrap; }
.war-row-power { flex: none; width: calc(46 * var(--px)); justify-content: flex-end; }
.war-row-slot { flex: none; width: calc(16 * var(--px)); height: calc(16 * var(--px)); }
/* a prancheta da build de Guerra: própria = a peça; incompleta = a peça com o aro de perigo (o normal não se pinta, G5) */
.war-build.is-incomplete { box-shadow: inset 0 0 0 var(--px) var(--c-danger); }

/* rodapé de 22: as pintas com «7/10», o ◆ somado, o selo, [Sugerir] e [Salvar] — ou a barra da célula escolhida */
.war-foot { display: flex; align-items: center; gap: calc(6 * var(--px)); height: calc(22 * var(--px)); flex: none; min-width: 0; }
.war-foot > .btn { flex: none; }
/* o vão elástico do rodapé (`ui/dom.js › footerSpacer`): os botões vão para a direita (a regra de windows.css só vale no `.window-footer`) */
.war-foot > .footer-spacer { flex: 1 1 auto; min-width: 0; }
.war-count { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); white-space: nowrap; }
.war-pips { display: inline-flex; gap: var(--px); }
.war-pip { width: calc(4 * var(--px)); height: calc(7 * var(--px)); background: #4a4257; }
.war-pip.is-on { background: var(--c-gold); }
.war-auto { color: var(--c-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#ui-root .war-auto[data-hint].has-more { width: fit-content; }
.war-receipt { color: var(--c-gold); white-space: nowrap; }
.war-cellbar-who { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); min-width: 0; max-width: calc(150 * var(--px)); }
.war-cellbar-who > bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-foot .war-arrow { min-width: calc(18 * var(--px)); justify-content: center; }

/* =========================================================================================================================
   FOLHAS sobre a aba (a ficha da build de Guerra, a da ilha, a da guerra do histórico): cobrem a aba inteira
   ========================================================================================================================= */
.war-sheet { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; gap: calc(4 * var(--px)); background: var(--c-panel-fill); }
.war-sheet-head { display: flex; align-items: center; gap: calc(4 * var(--px)); min-height: calc(18 * var(--px)); flex: none; min-width: 0; }
.war-sheet-title { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); min-width: 0; color: var(--c-gold); white-space: nowrap; overflow: hidden; }
.war-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.war-sec { display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.war-sec-head { color: var(--c-gold); line-height: calc(10 * var(--px)); }
.war-line { display: flex; align-items: center; flex-wrap: wrap; gap: calc(3 * var(--px)); min-width: 0; line-height: calc(10 * var(--px)); }
.war-line > bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- a ficha da build de Guerra (warFighterCard.js): 12 peças em 2 × 6, a barra de 5, talentos e atributos ------------- */
.war-card { display: flex; gap: calc(8 * var(--px)); min-height: 0; }
.war-card-main { display: flex; flex-direction: column; gap: calc(4 * var(--px)); flex: none; }
.war-card-who { display: flex; align-items: center; gap: calc(3 * var(--px)); min-width: 0; line-height: calc(12 * var(--px)); }
.war-card-who > bdi { min-width: 0; max-width: calc(110 * var(--px)); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-card-gear { display: grid; grid-template-columns: repeat(6, calc(36 * var(--px))); gap: calc(2 * var(--px)); }
/* a posição que CAI na peça vestida (§8.3): o aro de perigo POR CIMA da moldura de qualidade — o `outline` da própria vaga
   ficava sob a `.slot-frame` (absoluta, pintada depois) e sumia (prova de 2026-10-03). E ele não pode depender da moldura: a
   linha de 1 px vermelha sumia contra o laranja/ouro das q4/q5 de uma build de guerra (revisão de 2026-10-03, amostrado na
   captura) — 2 px de perigo entre dois fios escuros (contraste com QUALQUER qualidade) e a peça vestida um degrau apagada
   (ela luta, mas não é da build de Guerra) */
.war-card-gear > .slot.is-falls::before {
  content: '';
  position: absolute;
  inset: calc(-4 * var(--spx));
  border: calc(2 * var(--spx)) solid var(--c-danger);
  box-shadow: 0 0 0 var(--px) var(--c-bg), inset 0 0 0 var(--px) var(--c-bg);
  z-index: 1;
  pointer-events: none;
}
.war-card-gear > .slot.is-falls .item-icon { filter: saturate(0.35) brightness(0.8); }
/* a peça de OUTRO jogador que eu não visto: só o tom do véu, como no Inspecionar (`inspect.css`) — o véu de 35 % da Mochila
   tingia a ficha inteira de vermelho e abafava as molduras; o tooltip continua dizendo o requisito */
.war-card-gear > .slot.is-unusable::after { background: rgba(217, 72, 59, 0.14); }
.war-card-bar { display: flex; gap: calc(2 * var(--px)); }
.war-bar-cell {
  position: relative;
  flex: none;
  width: calc(36 * var(--px));
  height: calc(36 * var(--px));
  border: calc(4 * var(--px)) solid transparent;
  border-image: url(../assets/ui/slots/slot_empty.png) 4 fill / calc(4 * var(--px)) stretch;
  image-rendering: pixelated;
}
.war-bar-ico { position: absolute; left: calc(-2 * var(--px)); top: calc(-2 * var(--px)); width: calc(32 * var(--px)); height: calc(32 * var(--px)); background-repeat: no-repeat; background-size: 100% 100%; image-rendering: pixelated; }
.war-bar-rank { position: absolute; right: calc(-3 * var(--px)); bottom: calc(-4 * var(--px)); line-height: calc(8 * var(--px)); color: #fff; text-shadow: var(--px) var(--px) 0 #000; }
.war-bar-auto { position: absolute; right: calc(-2 * var(--px)); top: calc(-2 * var(--px)); width: calc(8 * var(--px)); height: calc(8 * var(--px)); background: var(--ui-ico_auto, none) center / 100% 100% no-repeat; image-rendering: pixelated; }
.war-card-chips { display: flex; align-items: center; flex-wrap: wrap; gap: calc(6 * var(--px)); }
.war-chip { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); white-space: nowrap; }
.war-card-aside { display: flex; flex-direction: column; gap: calc(3 * var(--px)); flex: none; width: calc(120 * var(--px)); }
.war-card-aside > .btn { width: 100%; justify-content: flex-start; }

/* =========================================================================================================================
   ILHAS — 2 × 2 cartões de 284 × 106; cada um é o bloco da ilha em modo card
   ========================================================================================================================= */
.war-isles { display: grid; grid-template-columns: repeat(2, calc(284 * var(--px))); grid-auto-rows: calc(106 * var(--px)); gap: calc(4 * var(--px)) calc(8 * var(--px)); }
.war-isle-card { position: relative; width: calc(284 * var(--px)); height: calc(106 * var(--px)); padding: calc(3 * var(--px)) calc(4 * var(--px)); border: var(--px) solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.22); overflow: hidden; cursor: pointer; }
.war-isle-card:hover { border-color: rgba(224, 176, 64, 0.45); }

/* o BLOCO DA ILHA (warBidPanel.js): quatro linhas — quem/quando, o dono (ou o guardião), o prêmio, o lance */
.war-isle { display: flex; flex-direction: column; gap: calc(2 * var(--px)); min-width: 0; }
.war-isle-line { display: flex; align-items: center; gap: calc(3 * var(--px)); min-height: calc(16 * var(--px)); min-width: 0; white-space: nowrap; }
.war-isle-line > .btn { flex: none; }
.war-isle-line > .btn:last-child { margin-left: auto; }
.war-isle-open { display: flex; align-items: center; gap: calc(3 * var(--px)); min-width: 0; flex: 1 1 auto; }
.war-isle-open:focus-visible { outline: var(--px) solid #fff5a8; outline-offset: var(--px); }
.war-isle-name { color: var(--c-gold); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-isle-when { color: var(--c-text-dim); white-space: nowrap; }
.war-isle-who { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); min-width: 0; }
.war-isle-who > bdi { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.war-isle-boss { position: relative; flex: none; width: calc(32 * var(--px)); height: calc(32 * var(--px)); overflow: hidden; }
.war-isle-prize { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); color: var(--c-ok); white-space: nowrap; }
#ui-root .war-isle-prize[data-hint].has-more { width: fit-content; }
.war-isle-minis { display: inline-flex; gap: calc(2 * var(--px)); }
.war-isle-minis > .bankmat-ico { cursor: pointer; }
.war-isle-bid { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); min-width: 0; white-space: nowrap; }
#ui-root .war-isle-bidders[data-hint].has-more { width: fit-content; }
/* modo panel (a seção Disputa do cartão da ilha, 260 de largura): a mesma peça, sem rolagem própria, 64–110 de altura */
.war-isle.is-panel { width: 100%; max-height: calc(110 * var(--px)); overflow: hidden; }
.war-isle-title { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); color: var(--c-gold); }
/* --- guerra (costura-carta) --- no cartão da ilha a linha 1 é o cabeçalho de seção do cartão (`.work-section` de work.css:
   régua embaixo, as pontas afastadas): o selo da fase e a data andam JUNTOS na ponta direita */
.war-isle-head-end { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); min-width: 0; }

/* ---- a folha da ilha: Produz com os nomes, o confronto, os horários, os lances e as últimas guerras -------------------- */
.war-prod { display: flex; flex-wrap: wrap; gap: calc(3 * var(--px)) calc(8 * var(--px)); }
.war-prod-item { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); }
.war-vs { display: flex; align-items: center; gap: calc(6 * var(--px)); flex-wrap: wrap; }
.war-side { display: inline-flex; align-items: center; gap: calc(3 * var(--px)); min-width: 0; }
.war-bids { display: flex; flex-direction: column; gap: var(--px); }
.war-bid-row { display: flex; align-items: center; gap: calc(3 * var(--px)); line-height: calc(12 * var(--px)); }
.war-bid-rank { width: calc(14 * var(--px)); text-align: right; color: var(--c-text-dim); }

/* =========================================================================================================================
   HISTÓRICO — uma linha de 20 por guerra; a folha com os dois lados em colunas
   ========================================================================================================================= */
.war-hist { display: flex; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.war-hrow { display: flex; align-items: center; gap: calc(4 * var(--px)); height: calc(20 * var(--px)); flex: none; padding: 0 calc(2 * var(--px)); border-bottom: var(--px) solid rgba(255, 255, 255, 0.05); }
.war-hrow-open { display: flex; align-items: center; gap: calc(4 * var(--px)); flex: 1 1 auto; min-width: 0; height: 100%; white-space: nowrap; }
.war-hrow-open:hover, .war-hrow-open:focus-visible { background: rgba(255, 255, 255, 0.06); }
.war-hrow-open:focus-visible { outline: var(--px) solid #fff5a8; outline-offset: calc(-1 * var(--px)); }
.war-hrow-date { flex: none; width: calc(30 * var(--px)); color: var(--c-text-dim); }
.war-hrow-isle { flex: none; width: calc(118 * var(--px)); overflow: hidden; text-overflow: ellipsis; }
.war-hrow-foe { display: inline-flex; align-items: center; gap: calc(2 * var(--px)); min-width: 0; overflow: hidden; }
.war-hrow-power { margin-left: auto; color: var(--c-text-dim); }
.war-hrow > .btn { flex: none; }
.war-more { align-self: center; margin-top: calc(4 * var(--px)); }
.war-cols { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--px)); }
.war-col-side { display: flex; flex-direction: column; gap: var(--px); min-width: 0; }
.war-frow { display: flex; align-items: center; gap: calc(2 * var(--px)); height: calc(16 * var(--px)); min-width: 0; white-space: nowrap; }
.war-frow > bdi { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.war-frow.is-fell { color: var(--c-text-dim); }
.war-frow-num { flex: none; width: calc(30 * var(--px)); text-align: right; }

/* =========================================================================================================================
   O PROMPT DO LANCE FECHADO (warBidPrompt.js) — modal 300 de largura no centro do palco
   ========================================================================================================================= */
.war-bid { min-width: calc(260 * var(--px)); max-width: calc(300 * var(--px)); }
.war-bid .window-body { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }
.war-bid-facts { display: flex; align-items: center; flex-wrap: wrap; gap: calc(6 * var(--px)); }
/* a linha do prêmio no prompt: «[ico_worker] +15%» e os mini-slots do rendimento comum, com o vão da linha do cartão */
.war-bid-prize { display: flex; align-items: center; gap: calc(4 * var(--px)); }
.war-bid-rule { color: var(--c-text-dim); }
.war-bid-from { color: var(--c-gold); }
.war-bid-problem { color: var(--c-danger); }
.war-bid .modal-actions .gold-label { color: inherit; }