/* Janela de inspeção (docs/specs/player-identity.md §3; ui-gameplay.md §0.1): a ficha PÚBLICA de outro personagem,
   256×280, no molde "paper doll" da Mochila (pedido do dono, 2026-10-01: "o personagem no centro… mais centralizada,
   mais compactada e mais refinada"). Medidas em px de arte. Miolo 240 (256 − 16 de moldura):
     cabeçalho 44  = nome entre fios (14) · [brasão] classe · Nv · [◆] Potencial (12) · título com moldura (12 + 2 de
                     borda que vaza; some sem título, e aí os dois de cima ficam centrados nos 44)
     faixa    188  = 36 (corpo) + 8 + 148 (palco 148×150 + anéis 36, vão 2) + 8 + 36 (arma e joias) = 236 de largura
     rodapé    16  = [emblema] clã · presença · cadeado (o emblema é 16×16, fator inteiro)
   Altura: 16 de moldura + 14 do título + 44 + 4 + 188 + 14 do rodapé (2 + 16 − 4) = 280; em y 50 termina em 330, dentro
   do teto 332 do lobby. Nenhuma caixa rola.
   O palco é o MESMO mecanismo da prévia da mochila (`.equip-preview`): o furo abre e a `lobbyScene` pinta atrás dele o
   chão, a luz e o boneco em 2× (`lobbyScene.js › drawInspectStage`); a moldura do palco é a `panel` (aço com cantos de
   ouro), sem `fill`, e o miolo publicado fica 8 px para dentro dela (`widgets/inspectDoll.js › INSET`).
   A ficha (cabeçalho, palco e vagas) é o `widgets/inspectCard.js`, a montagem única com a ficha do jogador do Ranking:
   as regras do palco e das vagas valem em `.inspect-card`; as do `#win-inspect` são só desta janela (título e rodapé). */

.inspect-layout {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.inspect-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(4 * var(--px));
}

.inspect-status {
  font-size: calc(8 * var(--px));
}

/* ---- cabeçalho: quem é ---------------------------------------------------------------------------------------- */
.inspect-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--px));
  height: calc(44 * var(--px));
  width: 100%;
}

/* O nome numa faixa escura entre dois fios de ouro que somem nas pontas: a gramática do anúncio de Obra-prima/Shining
   (`css/loot.css › .loot-banner`) — a única "placa de honra" que o jogo já tinha, e não uma terceira. */
.inspect-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(200 * var(--px));
  height: calc(14 * var(--px));
  background: linear-gradient(90deg, rgba(10, 8, 14, 0) 0, rgba(10, 8, 14, 0.82) 22%, rgba(10, 8, 14, 0.82) 78%, rgba(10, 8, 14, 0) 100%);
  border-top: var(--px) solid var(--c-gold);
  border-bottom: var(--px) solid var(--c-gold);
  border-image: linear-gradient(90deg, transparent 0, var(--c-gold) 22%, var(--c-gold) 78%, transparent 100%) 1;
}

.inspect-name {
  max-width: calc(180 * var(--px));
  font-size: calc(10 * var(--px));
  line-height: calc(12 * var(--px));
  font-weight: bold;
  color: var(--c-gold);
  text-shadow: var(--px) var(--px) 0 #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* --- name-style --- o respiro do nome estilizado na placa (docs/specs/player-identity.md §4.5; rankings.md §7.4): o nome é a
   própria caixa que corta, rente à letra; padding e margem negativa iguais deixam 2 px ao Brilho e ao Contorno sem mover a letra. */
.inspect-name:is([data-ns-fx], [data-ns-font="italic"]) { padding: 2px; margin: -2px; max-width: calc(180 * var(--px) + 4px); }

/* A linha de quem é: [brasão] Classe · Nv 37 · [◆] Potencial — o ponto médio é decorativo (`aria-hidden`), e o vão
   entre as famílias (3) é o mesmo de dentro do grupo da classe. */
.inspect-line,
.inspect-who {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--px));
  height: calc(12 * var(--px));
  font-size: calc(7 * var(--px));
  color: var(--c-text-dim);
  white-space: nowrap;
}

.inspect-crest {
  flex: none;
  width: calc(12 * var(--px));
  height: calc(12 * var(--px));
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}

.inspect-class { color: var(--c-text); }

/* O selo do título: 9-slice por `border-image`, a mesma peça `title_frame_t<i>` do manifesto, esticada sem costura —
   base comum da ficha de inspeção e da do Ranking (`.rank-card-title`); o selo do lobby (`.title-chip`, abaixo) usa a
   mesma arte. Sem título conhecido não há `has-frame` — e sem moldura. */
.inspect-title {
  /* encolhe ao texto: a moldura cerca o TÍTULO, não a coluna inteira */
  align-self: flex-start;
  min-height: calc(12 * var(--px));
  padding: calc(2 * var(--px)) calc(4 * var(--px));
  font-size: calc(7 * var(--px));
  text-align: center;
}

.inspect-title.has-frame {
  border-style: solid;
  border-width: calc(4 * var(--px));
  border-image-repeat: stretch;
  border-image-width: calc(4 * var(--px));
  image-rendering: pixelated;
}

/* Na ficha de inspeção o selo mora CENTRADO sob o nome e cabe em 12 px de altura (o cabeçalho tem 44): a borda da
   arte (4) vaza 2 px para fora da caixa (`outset`) em vez de empurrar o palco para baixo. Sem título, nem selo (G5). */
#win-inspect .inspect-title {
  align-self: center;
  padding: 0 calc(4 * var(--px));
  line-height: calc(8 * var(--px));
}
#win-inspect .inspect-title.has-frame {
  border-width: calc(2 * var(--px));
  border-image-outset: calc(2 * var(--px));
}

/* ---- a faixa: o corpo à esquerda, o palco no centro, a arma e as joias à direita, os anéis embaixo -------------- */
.inspect-band {
  display: flex;
  align-items: flex-start;
  gap: calc(8 * var(--px));
}

.inspect-col {
  display: flex;
  flex-direction: column;
  gap: calc(2 * var(--px));
}

.inspect-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(2 * var(--px));
  width: calc(148 * var(--px));
}

.inspect-rings {
  display: flex;
  gap: calc(2 * var(--px));
}

/* A caixa do boneco de outro personagem (`widgets/inspectDoll.js`) — base comum da ficha de inspeção e da do Ranking
   (`css/rank.css › .rank-card .inspect-doll` dá o tamanho de lá). Furo aberto: o fundo do painel sai da frente para o
   canvas aparecer. */
.inspect-doll {
  flex: 1;
  min-height: calc(96 * var(--px));
  display: flex;
  align-items: center;
  justify-content: center;
}
.inspect-doll.is-see-through {
  background: none;
  border-image-source: none;
}
.inspect-doll-note {
  font-size: calc(7 * var(--px));
}

/* O palco: 148 × 150 externos (4 vagas de 36 + 3 vãos de 2). Com o furo aberto a moldura vira a `panel` — aço com os
   cantos de ouro, a moldura de destaque da UI — só o contorno, e o miolo é o canvas. `.inspect-card` (a ficha de
   `widgets/inspectCard.js`): o MESMO palco no Inspecionar e na ficha do jogador do Ranking (rankings.md §7.6). */
.inspect-card .inspect-stage {
  flex: none;
  width: calc(148 * var(--px));
  height: calc(150 * var(--px));
  min-height: 0;
}
.inspect-card .inspect-stage.is-see-through {
  background: none;
  border-image: var(--ui-panel, url(../assets/ui/windows/panel.png)) 8 / calc(8 * var(--px)) stretch;
}

/* A peça de outro jogador que EU não visto: o véu de 35 % da Mochila tingia meia ficha de vermelho e abafava as molduras
   de qualidade — aqui a informação é a peça dele; o véu fica só como um tom, como no resumo da corrida
   (`css/screens.css › .summary-grid .slot.is-unusable::after`), e o tooltip continua dizendo o requisito em vermelho. */
.inspect-card .slot.is-unusable::after { background: rgba(217, 72, 59, 0.14); }

/* ---- rodapé: força, clã, presença ------------------------------------------------------------------------------ */
.inspect-footer {
  min-height: calc(16 * var(--px));
  gap: calc(6 * var(--px));
  font-size: calc(7 * var(--px));
  white-space: nowrap;
}
.inspect-footer.is-empty > * { visibility: hidden; }

.inspect-chip {
  display: inline-flex;
  align-items: center;
  gap: calc(2 * var(--px));
  flex: none;
  min-width: 0;
}

.inspect-ico {
  display: inline-block;
  flex: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  image-rendering: pixelated;
}
.inspect-ico.is-power { width: calc(9 * var(--px)); height: calc(9 * var(--px)); background-image: var(--ui-ico_power); }
.inspect-ico.is-lock { width: calc(8 * var(--px)); height: calc(8 * var(--px)); background-image: var(--ui-ico_lock); }

.inspect-power-value { color: var(--c-gold); }

/* Presença (G2 + §8.7): o disco CHEIO de esmeralda × a argola VAZADA de pedra (`art/src/ui/icons_friends.py`) — a MESMA
   peça da lista de amigos (`css/friends.css › .friends-dot`), aqui com regra própria porque a folha de amigos só entra na
   página quando a janela de amigos abre (`windows/friends.js › ensureFriendsCss`), e a ficha abre também pelo chat. */
.inspect-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;
}
.inspect-dot.is-online { background-image: var(--ui-ico_online); }

/* o clã é o único que cede espaço (nome de clã chega a 24 caracteres): reticência, e o nome inteiro no gesto */
.inspect-clan { flex: 0 1 auto; }
.inspect-clan-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Selo do título do PRÓPRIO personagem no cabeçalho do lobby, e o seletor (pacote 11).
   A moldura é a mesma peça `title_frame_t<i>` da janela de inspeção, por `border-image`: uma arte, dois lugares. */

.title-chip {
  background: none;
  border: 0;
  padding: calc(1 * var(--px)) calc(4 * var(--px));
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.title-chip.has-frame {
  border-style: solid;
  border-width: calc(4 * var(--px));
  border-image-repeat: stretch;
  border-image-width: calc(4 * var(--px));
  image-rendering: pixelated;
}

.title-picker {
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--px));
  min-width: calc(280 * var(--px));
}

.title-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: calc(3 * var(--px));
}

.title-list li {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--px));
}

.title-option {
  background: none;
  border: 0;
  padding: calc(1 * var(--px)) calc(4 * var(--px));
  font: inherit;
  color: inherit;
  cursor: pointer;
  flex: 1;
  text-align: left;
}

.title-option.has-frame {
  border-style: solid;
  border-width: calc(4 * var(--px));
  border-image-repeat: stretch;
  border-image-width: calc(4 * var(--px));
  image-rendering: pixelated;
}

.title-option.is-current {
  font-weight: bold;
}

.title-current,
.title-prof {
  font-size: calc(7 * var(--px));
  flex-shrink: 0;
  white-space: nowrap;
}

/* A profissão fica encostada à direita e o "Em uso" logo antes dela: sem isso os dois se grudam na linha atual. */
.title-prof {
  margin-left: auto;
  min-width: calc(56 * var(--px));
  text-align: right;
}

/* "Sem título" é uma OPÇÃO, não um rótulo: a moldura some, mas a caixa do botão fica. */
.title-option {
  border: calc(1 * var(--px)) solid rgba(255, 255, 255, 0.18);
}

/* O modal do seletor de título (avaliação de UX, rodada 2). Com 18 títulos o modal centrado ia de y 9 a 350 e cobria a
   faixa do personagem e a barra de modos; o cabeçalho do grupo ("Alfaiate") passava por baixo do título do modal ao
   rolar, e a rolagem não tinha barra à vista. Agora: nasce em y 46 (onde nascem as janelas do lobby) e termina no topo
   da barra de modos (y 332); título do modal opaco e por cima do corpo; barra de rolagem visível com contraste; recuo à
   direita para o "Em uso" não encostar na moldura nem na barra. */
.modal:has(> .window-body > .title-picker) {
  align-self: start;
  margin-top: calc(46 * var(--px));
  max-height: calc(286 * var(--px));
}
.modal:has(> .window-body > .title-picker) > .window-title {
  position: relative;
  z-index: 1;
  background: #221f33;
}
.modal:has(> .window-body > .title-picker) > .window-body {
  scrollbar-width: auto;
  scrollbar-color: #8a84a8 #12101c;
  padding-right: calc(4 * var(--px));
}