/* portrait.css — retrato de personagem (js/ui/widgets/portrait.js). O rosto NÃO é imagem: é a cabeça do paperdoll
   desenhada no canvas atrás de um furo recortado na janela (máscara, `widgets/windowHoles.js`), como a prévia da mochila. Aqui ficam só a
   moldura, o miolo de 32×32 que vira o furo e o substituto de enquanto a cabeça não está pronta.
   A moldura é o `.slot` de sempre (nine-slice.css: 36×36 com miolo de 32 e `--spx`), para o retrato ficar do mesmo
   tamanho e do mesmo material que um slot de item ao lado. */

.portrait { cursor: default; }

/* Miolo de 32×32 (mesma caixa do `.item-icon` do slot): é ESTE retângulo que o widget mede e publica na ponte, e é
   dele que sai o furo. A tinta é a mesma que a cena pinta atrás da cabeça (lobbyLayout.DOLL_BOX_COLOR): quando o furo
   abre, o que estava aqui é substituído por um retângulo idêntico no canvas — a troca não pisca. */
.portrait > .portrait-hole {
  position: absolute;
  left: calc(-2 * var(--spx));
  top: calc(-2 * var(--spx));
  width: calc(32 * var(--spx));
  height: calc(32 * var(--spx));
  background-color: #15121c;
  pointer-events: none;
}

/* Substituto: inicial do nome no meio do miolo. Vale enquanto a cena não confirma a cabeça (carregando, aparência
   inválida, sem rig, janela fora do lobby). Some quando o retrato fica vivo. */
.portrait > .portrait-fallback {
  position: absolute;
  left: calc(-2 * var(--spx));
  top: calc(-2 * var(--spx));
  width: calc(32 * var(--spx));
  height: calc(32 * var(--spx));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(12 * var(--spx));
  line-height: 1;
  color: var(--c-text-dim);
  text-shadow: 0 var(--px) 0 rgba(0, 0, 0, 0.7);
  pointer-events: none;
}
.portrait.is-live > .portrait-fallback { display: none; }

/* Cor de classe no substituto (1 guerreiro, 2 mago, 3 arqueiro): um retrato ainda cru já diz de quem é a linha.
   Classe desconhecida (0) fica no cinza do painel. */
.portrait[data-class='1'] > .portrait-hole { background-color: #3a1f1f; }
.portrait[data-class='2'] > .portrait-hole { background-color: #1d2340; }
.portrait[data-class='3'] > .portrait-hole { background-color: #1c3324; }

/* --- demonstração (só dev, `?portraits=N`): grade de rostos sobre o palco ------------------------------------ */
.portrait-demo {
  position: absolute;
  z-index: 40;
  padding: calc(6 * var(--px));
  background: #120f1a;
  pointer-events: auto;
}
.portrait-demo-grid {
  display: grid;
  grid-template-columns: repeat(var(--portrait-cols, 6), calc(36 * var(--px)));
  gap: calc(6 * var(--px));
}
.portrait-demo-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--px);
}
.portrait-demo-cell > .portrait-demo-name {
  max-width: calc(36 * var(--px));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--c-text-dim);
}
.portrait-demo-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: calc(4 * var(--px));
  margin-bottom: calc(4 * var(--px));
  color: var(--c-text);
}