/* --- settings --- Janela de Configurações (js/ui/windows/settings.js). Medidas em px de arte: calc(N * var(--px)).
   Cores só dos tokens de base.css. As abas usam `.tab` (nine-slice.css); os controles nativos ganham só a cor de
   destaque do jogo — nenhuma arte nova. */
.settings-body { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.settings-panes { flex: 1; min-height: 0; }
/* O `.window-body` entra 2 px na faixa da borda: sem recuo o rótulo ficava a 2 px da moldura visível (B25/B26 —
   "Volume geral" encostado na borda esquerda). 4 px de cada lado deixam 6 entre o texto e a moldura. */
.settings-pane { height: 100%; overflow-y: auto; padding: 0 calc(6 * var(--px)) calc(8 * var(--px)) calc(4 * var(--px)); scrollbar-width: thin; scrollbar-color: #575273 #12101c; }
/* Barra de rolagem À VISTA, em pixel-art (o molde de craft.css/clan.css). A aba Teclado tem 22 ações (≈ 1100 px de
   conteúdo) num corpo de 388: sem barra nenhuma, a 10.ª linha aparecia fatiada ao meio e quem procurava a tecla de
   Talentos ou das poções não descobria que a lista continuava. O `padding-bottom` de 8 põe o corte no fim de uma
   linha inteira em vez de no meio dela (avaliação de UX, rodada 2). */
@supports selector(::-webkit-scrollbar) {
  .settings-pane { scrollbar-width: auto; scrollbar-color: auto; }
  .settings-pane::-webkit-scrollbar { width: calc(6 * var(--px)); }
  .settings-pane::-webkit-scrollbar-track { background: #12101c; }
  .settings-pane::-webkit-scrollbar-thumb { background: #575273; border: var(--px) solid #12101c; }
  .settings-pane::-webkit-scrollbar-thumb:hover { background: #8a84a8; }
}
.settings-row { display: flex; align-items: center; gap: calc(6 * var(--px)); min-height: calc(18 * var(--px)); }
.settings-label { flex: 0 0 calc(150 * var(--px)); color: var(--c-text); }
.settings-row.is-check .settings-label { flex: 1 1 auto; }
.settings-range { flex: 1 1 auto; accent-color: var(--c-gold); height: calc(10 * var(--px)); }
.settings-value { flex: 0 0 calc(36 * var(--px)); text-align: right; color: var(--c-text-dim); }
.settings-check { accent-color: var(--c-gold); width: calc(10 * var(--px)); height: calc(10 * var(--px)); margin: 0; }
.settings-key { flex: 0 0 auto; }
.settings-choice { display: flex; flex-wrap: wrap; gap: calc(2 * var(--px)); }
.settings-opt.is-active { color: var(--c-gold); }
.settings-note { padding-left: calc(156 * var(--px)); min-height: calc(12 * var(--px)); }
.settings-footer { display: flex; align-items: center; justify-content: space-between; gap: calc(6 * var(--px)); }
.settings-status { color: var(--c-text-dim); }
.settings-status.is-ok { color: var(--c-ok); }
.settings-status.is-warn { color: var(--c-gold); }
.settings-status.is-error { color: var(--c-danger); }
/* --- /settings --- */
/* --- settings keys --- Aba Teclado: rótulo + duas vagas de 64; cabeçalho de seção como o do ≡ Menu. */
.settings-keys-msg { min-height: calc(12 * var(--px)); margin-bottom: calc(2 * var(--px)); }
.settings-keys-head { margin-top: calc(4 * var(--px)); color: var(--c-gold); }
.settings-keys-row { display: flex; align-items: center; gap: calc(4 * var(--px)); min-height: calc(16 * var(--px)); }
.settings-keys-row .settings-label { flex: 0 0 calc(170 * var(--px)); }
.settings-keys-col { flex: 0 0 calc(64 * var(--px)); text-align: center; }
.settings-keys-slot { flex: 0 0 calc(64 * var(--px)); justify-content: center; min-height: calc(14 * var(--px)); }
.settings-keys-slot.is-empty { color: var(--c-text-dim); }
.settings-keys-slot.is-capturing { color: var(--c-gold); }
.settings-keys-fixed { flex: 0 0 calc(110 * var(--px)); color: var(--c-text); }
/* --- /settings keys --- */

/* O degradê de "a lista continua" é do MECANISMO ÚNICO (`css/scroll-fade.css`, carregada por último): a cópia
   à mão desta folha foi recolhida para lá. */
/* B180: a aba Teclado mostra 388 de 1116 px. O respiro é maior aqui porque o rodapé de Configurações é alto — o
   valor vale para o `padding-bottom` que `css/scroll-fade.css` escreve (o painel carrega a classe `.scroll-fade`). */
.settings-pane { --scroll-fade-pad: calc(10 * var(--px)); }