/* O modal NOME (docs/specs/player-identity.md §4.2 e §4.5.5; docs/ux-casos.md caso 50): as abas Título e Estilo
   (`ui/widgets/nameModal.js`, `ui/widgets/nameStylePicker.js`). Sem a aba Estilo o modal é o seletor de títulos de antes, com as
   regras dele em `inspect.css` (`.modal:has(> .window-body > .title-picker)`); aqui, as mesmas para o modal com abas.

   A prévia do Estilo usa as classes DAS SUPERFÍCIES (`.chat-line`/`.chat-who` de chat.css, `.rank-row` de rank.css,
   `.inspect-plate`/`.inspect-name` de inspect.css): o que muda aqui é só o que a prévia não é — clicável, com hover. A placa da arena
   (desenhada no canvas pela 5×7) é imitada: o fundo e o ouro da `PLATE_BG`/`PLATE_FOCUS_BG` de `game/view/combatantView.js`. */

/* nasce onde nascem as janelas do lobby (y 46) e termina no topo da barra de modos, como o seletor de títulos */
.modal:has(> .window-body > .name-modal) {
  align-self: start;
  margin-top: calc(46 * var(--px));
  max-height: calc(286 * var(--px));
}
.modal:has(> .window-body > .name-modal) > .window-title {
  position: relative;
  z-index: 1;
  background: var(--c-panel-fill);
}
.modal:has(> .window-body > .name-modal) > .window-body {
  scrollbar-width: auto;
  scrollbar-color: #8a84a8 #12101c;
  padding-right: calc(4 * var(--px));
}

/* a largura do seletor de títulos (280): trocar de aba não muda o modal de tamanho */
.name-modal { width: calc(280 * var(--px)); display: flex; flex-direction: column; }
.name-modal .title-picker { min-width: 0; }
.name-modal-tabs { flex: none; }
.ns-tab-lock {
  display: inline-block;
  width: calc(8 * var(--px));
  height: calc(8 * var(--px));
  margin-right: calc(2 * var(--px));
  background-image: var(--ui-ico_lock);
  background-size: 100% 100%;
  image-rendering: pixelated;
}

/* ---- a aba Estilo ------------------------------------------------------------------------------------------------- */
.ns-panel { display: flex; flex-direction: column; gap: calc(4 * var(--px)); }

/* a prévia: o próprio nome nas quatro superfícies em que outro jogador o vê, uma por linha */
.ns-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(3 * var(--px));
  padding: calc(3 * var(--px));
  border: var(--px) solid rgba(255, 255, 255, 0.18);
}
.ns-seal {
  align-self: flex-start;
  padding: 0 calc(2 * var(--px));
  border: var(--px) solid var(--c-text-dim);
  color: var(--c-text-dim);
  font-size: calc(7 * var(--px));
  line-height: calc(8 * var(--px));
}
.ns-seal.is-saved { border-color: var(--c-gold); color: var(--c-gold); }
.ns-pv-chat {
  align-self: stretch;
  padding: 0 calc(2 * var(--px));
  line-height: calc(10 * var(--px));
  background: var(--c-shade);
}
.ns-pv-chat .chat-who { cursor: default; }
.ns-pv-chat .chat-who:hover { text-decoration: none; }
.ns-pv-rank .rank-row { cursor: default; }
.ns-pv-rank .rank-row:hover { background: none; }
.ns-plate {
  display: inline-block;
  padding: calc(1 * var(--px)) calc(2 * var(--px));
  background: rgba(20, 12, 16, 0.9);
  color: var(--c-gold);
  font-size: calc(7 * var(--px));
  line-height: calc(9 * var(--px));
  letter-spacing: calc(1 * var(--px));
  white-space: nowrap;
}

/* as três fileiras de rádio: o rótulo curto e as opções de 24×24 (a régua do dedo) */
.ns-axis { display: flex; align-items: center; gap: calc(4 * var(--px)); }
.ns-axis-cell { flex: 0 0 calc(28 * var(--px)); }
.ns-axis-label { font-size: calc(7 * var(--px)); }
/* o dedo: o rótulo com a pista (Fonte, Efeito) e o selo Guardado medem 9–10 px de altura; o toque chega por uma área invisível de
   24 (o molde `inset: calc(-8 * var(--px))` de rank.css/bestiary.css; o lint da N1 de 2026-10-06 mediu 21×9 e 40×10) */
.ns-axis-label.has-more,
.ns-seal.has-more { position: relative; }
.ns-axis-label.has-more::after,
.ns-seal.has-more::after { content: ''; position: absolute; inset: calc(-8 * var(--px)); }
.ns-axis-opts { display: flex; gap: calc(2 * var(--px)); }
.ns-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(24 * var(--px));
  height: calc(24 * var(--px));
  padding: 0;
  border: var(--px) solid rgba(255, 255, 255, 0.18);
  background: var(--c-shade);
  color: var(--c-text);
  font: inherit;
  cursor: pointer;
}
/* a opção escolhida: a moldura de ouro (a palavra está no aria-checked e no gesto: nada só pela cor) */
.ns-opt.is-current { border-color: var(--c-gold); box-shadow: inset 0 0 0 var(--px) var(--c-gold); }
.ns-opt.is-disabled { opacity: 0.45; cursor: default; }
.ns-opt:focus-visible { outline: var(--px) solid var(--c-text); outline-offset: var(--px); }
.ns-aa { font-size: calc(10 * var(--px)); line-height: calc(12 * var(--px)); white-space: nowrap; }

/* a recusa do servidor, logo acima do Cancelar · Aplicar: com o modal aberto o toast não aparece (`toast.js` segura a fila) */
.ns-refusal { margin: 0; }

/* ---- a porta do recibo da Loja (`windows/shop.js`): o recibo e o "Estilo do nome" na mesma linha ------------------ */
.shop-vip-receipt { display: flex; align-items: center; flex-wrap: wrap; gap: calc(4 * var(--px)); }