/* --------------------------------------------------------------- a paleta */

/*
 * A paleta das dez regioes.
 *
 * `minmax(140px, 1fr)` com `auto-fit`, e nao `auto-fill`: `auto-fill` cria colunas VAZIAS
 * quando sobra espaco, e numa caixa larga a paleta ficava com dez itens amontoados a esquerda
 * e um vao morto a direita. `auto-fit` colapsa as vazias e distribui o que existe.
 */
.paleta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px 16px;
  min-width: 0;
}

/*
 * Cada item e um alvo de clique inteiro, e nao tres controles soltos.
 *
 * O rotulo tem `for` no checkbox, entao clicar no nome da regiao ja a liga. Dar moldura ao
 * conjunto e o que faz isso parecer clicavel — antes eram um quadrado, uma caixinha e um texto
 * flutuando lado a lado, e o dono mirava so no quadradinho de 13px.
 */
.paleta-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  transition: border-color 120ms ease, background 120ms ease;
}

.paleta-item:hover { border-color: var(--linha); background: var(--elevado); }

/* A regiao LIGADA se destaca: e a resposta a "o que vai ser repintado?" sem contar itens. */
.paleta-item:has(input[type='checkbox']:checked) {
  border-color: rgba(168, 85, 247, 0.32);
  background: rgba(168, 85, 247, 0.07);
}

.paleta-item:has(input[type='checkbox']:focus-visible) {
  outline: 2px solid var(--roxo-claro);
  outline-offset: 1px;
}

/*
 * `width`, `height` e `padding` DESFEITOS aqui — nao so o `flex`.
 *
 * A regra global de `estilos.css` da `width: 100%`, `min-height: 44px` e `padding: 0 12px` a
 * TODO input; ela foi escrita pensando em campo de texto. Numa celula flex, o checkbox virava
 * a linha inteira e empurrava o nome da regiao para largura zero, sob o `overflow: hidden` do
 * label — a paleta ficava sendo uma coluna de quadrados sem nome nenhum, nas DUAS telas que a
 * usam.
 *
 * O `input[type='color']` logo abaixo ja se protegia disso. Este ficou para tras.
 */
.paleta-item input[type='checkbox'] {
  accent-color: var(--roxo-claro);
  flex: none;
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
}

/* O seletor de cor nativo, encaixado no visual do painel. A amostra e o controle:
 * um quadrado grande o bastante para a cor ser julgada antes do clique. */
/* A amostra E o controle: grande o bastante para a cor ser julgada antes do clique. Com 30px
 * de largura, um tom escuro e o preto do fundo eram indistinguiveis. */
.paleta-item input[type='color'] {
  flex: none;
  width: 34px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--linha);
  border-radius: var(--raio-p);
  background: var(--preto);
  cursor: pointer;
}

.paleta-item input[type='color']:disabled { opacity: 0.35; cursor: not-allowed; }

/* Rotulo em caixa normal, e nao no maiusculo dos outros campos: sao dez lado a
 * lado, e maiuscula com espacamento faria a paleta virar um bloco de ruido.
 *
 * Sem escopo de tela: a mesma paleta aparece no produto, no modal do jogador e no
 * editor de skin, e presa a uma delas as outras duas herdariam o maiusculo. */
.paleta-nome {
  font-family: var(--humana);
  font-size: 0.82rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--texto);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===========================================================================
 * Os vitais
 *
 * Layout PROPRIO, e nao o da paleta de cores. Eles emprestavam `.paleta` ate 27/08, e o rotulo
 * saia cortado: a paleta e feita para nome de regiao numa coluna de 140px, e "Stamina (%)" nao
 * cabe. O dono via "STA…" e tinha de adivinhar o que estava marcando.
 *
 * Uma linha por vital, e nao uma grade apertada: sao cinco decisoes independentes, cada uma com
 * um numero ao lado, e o que o olho procura e o NOME.
 * =========================================================================== */

.vitais {
  display: grid;
  /* 260px cabe o maior rotulo inteiro mais o campo. Abaixo disso vira uma coluna so. */
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px 18px;
  min-width: 0;
}

.vital-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 6px 9px;
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  transition: border-color 120ms ease, background 120ms ease;
}

.vital-item:hover { border-color: var(--linha); background: var(--elevado); }

/* O vital LIGADO se destaca: e a resposta a "o que vai ser aplicado?" sem contar caixinhas. */
.vital-item:has(input[type='checkbox']:checked) {
  border-color: rgba(168, 85, 247, 0.32);
  background: rgba(168, 85, 247, 0.07);
}

.vital-item:has(input[type='checkbox']:focus-visible) {
  outline: 2px solid var(--roxo-claro);
  outline-offset: 1px;
}

/* Mesma isencao da paleta, e pelo mesmo motivo: a regra global de input daria largura total. */
.vital-item input[type='checkbox'] {
  accent-color: var(--roxo-claro);
  flex: none;
  width: 16px;
  height: 16px;
  min-height: 16px;
  padding: 0;
}

/*
 * O buraco que cortava o rotulo.
 *
 * `estilos.css` da `width: 100%` a todo input, pensando em campo de texto. Numa celula flex o
 * numero virava a linha inteira e o nome ia para largura zero. `checkbox` e `color` ja se
 * protegiam disso na paleta; `number` ficou para tras — e o sintoma foi "HE…" no lugar de
 * "Health (%)".
 */
.vital-item input[type='number'] {
  flex: none;
  width: 5.5rem;
  min-height: 36px;
  padding: 0 10px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.vital-item input[type='number']:disabled { opacity: 0.4; cursor: not-allowed; }

/*
 * O nome ocupa o que sobra e NAO e cortado.
 *
 * `min-width: 0` no flex mais `overflow-wrap` em vez de `text-overflow`: se um dia um rotulo
 * nao couber, ele quebra em duas linhas — que continua legivel — em vez de virar reticencias,
 * que nao dizem nada sobre qual vital e aquele.
 */
.vital-nome {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--humana);
  font-size: 0.84rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--texto);
  cursor: pointer;
  overflow-wrap: anywhere;
}

/* ===========================================================================
 * A escolha do que criar
 *
 * A tela em branco era o pior momento do editor: nome, preco, acao e argumentos
 * de uma vez, olhando para campos vazios. Aqui o dono escolhe o que vender e
 * recebe tudo preenchido menos o preco.
 * =========================================================================== */

.dialogo {
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  background: var(--vidro);
  color: var(--texto);
  padding: 0;
  max-width: min(680px, calc(100vw - 32px));
  width: 100%;
}

/* O fundo escurece o que ficou atras sem apagar: o dono continua vendo a loja
 * dele por baixo da escolha, e isso mantem o contexto do que esta montando. */
.dialogo::backdrop { background: rgba(11, 7, 16, 0.72); }

.dialogo-forma { display: flex; flex-direction: column; gap: 14px; padding: 22px 24px 24px; }

.grade-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}

.cartao-preset {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--elevado);
  color: var(--texto);
  font-family: var(--humana);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.cartao-preset:hover { border-color: var(--roxo-claro); background: var(--preto); }
.cartao-preset:focus-visible { outline: 2px solid var(--roxo-claro); outline-offset: 2px; }

.preset-emoji { font-size: 1.4rem; line-height: 1; }
.preset-nome { font-size: 0.94rem; font-weight: 600; }
.preset-resumo { color: var(--texto-fraco); font-size: 0.78rem; line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
  .cartao-preset { transition: none; }
}

/* ===========================================================================
 * A aba Players
 *
 * Duas listas lado a lado, e nao uma com filtro: "quem eu alcanco agora" e
 * "quem faz parte deste servidor" sao perguntas diferentes, e o dono alterna
 * entre elas o tempo todo. Em coluna unica ele rolaria de uma ate a outra.
 * =========================================================================== */

.colunas-jogadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  align-items: start;
}

/* A linha inteira e o botao: um alvo de clique de largura total erra menos que
 * um icone no canto, e o dono usa isto no celular tambem. */
.linha-jogador {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-bottom: 1px solid var(--linha);
  background: transparent;
  color: var(--texto);
  font-family: var(--humana);
  text-align: left;
  cursor: pointer;
}

.linha-jogador:last-child { border-bottom: none; }
.linha-jogador:hover { background: var(--elevado); }
.linha-jogador:focus-visible { outline: 2px solid var(--roxo-claro); outline-offset: -2px; }

.jogador-identidade { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jogador-nome { font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.jogador-id {
  font-size: 0.72rem;
  color: var(--texto-fraco);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* O selo diz a coisa que a OUTRA lista nao diz: na de online, se a pessoa
 * cadastrou; na de cadastrados, se ela esta jogando agora. */
.selo-jogador {
  font-family: var(--maquina);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--raio-pilula);
  border: 1px solid var(--linha);
  color: var(--texto-fraco);
  white-space: nowrap;
}

.selo-jogador.ok { color: var(--ok); border-color: rgba(52, 211, 153, 0.4); }

.jogador-saldo {
  font-size: 0.85rem;
  color: var(--texto);
  /* Tabular: sem ele a coluna de saldo fica serrilhada e o olho perde a comparacao. */
  font-variant-numeric: tabular-nums;
}