/* --------------------------------------------------------------- a faixa de cor */

.faixa-skin { display: flex; width: 100%; height: 46px; }
.listra-skin { flex: 1 1 0; min-width: 0; }

/* Sem cor nenhuma nao e um bloco vazio: e um aviso de que a skin nao pinta nada.
 * A listrada diz "falta alguma coisa aqui" sem precisar de texto. */
.faixa-skin--vazia {
  background: repeating-linear-gradient(
    135deg,
    var(--preto) 0 7px,
    var(--elevado) 7px 14px
  );
}

/* No editor a faixa e a UNICA leitura do conjunto: dez seletores separados nao
 * dizem como as cores ficam juntas. Por isso ela e mais alta aqui. */
.previa-skin { border: 1px solid var(--linha); border-radius: var(--raio-m); overflow: hidden; }
.previa-skin .faixa-skin { height: 62px; }

/* Ao lado do seletor da loja ela e confirmacao, e nao o assunto da tela. */
.previa-skin--linha { margin-top: 8px; }
.previa-skin--linha .faixa-skin { height: 24px; }
.previa-skin--linha:empty { display: none; }

/* No cartao de morfo a faixa substitui o emoji dos outros presets: um emoji nao
 * diz que cor vai sair dali, e e exatamente isso que o dono esta escolhendo. */
.cartao-morfo { padding: 0; overflow: hidden; gap: 0; }
.cartao-morfo .faixa-skin { height: 40px; margin-bottom: 10px; }
.cartao-morfo .preset-nome,
.cartao-morfo .preset-resumo { padding: 0 14px; }
.cartao-morfo .preset-resumo { padding-bottom: 14px; }

/* ------------------------------------------------------------ o pe do editor */

/* Duplicar, arquivar e apagar ficam no FIM, e nao no cabecalho: o dono chega
 * aqui para mexer na cor, e um botao de apagar ao lado do nome e um clique
 * errado que custa uma pintura inteira. */
.rodape-editor {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--linha);
}

.rodape-editor .perigoso { margin-left: auto; }
.rodape-editor .dica-campo { flex-basis: 100%; margin: 0; }

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

/* O seletor de usos e o numero moram na mesma linha: o numero e um detalhe do
 * modo escolhido, e nao um campo independente. Empilhados, ele leria como uma
 * segunda pergunta — e o dono responderia as duas de forma incoerente. */
.linha-usos { display: flex; gap: 8px; align-items: center; }
.linha-usos select { flex: 1 1 auto; min-width: 0; }
.linha-usos input[type='number'] { flex: 0 0 90px; }

/* ===========================================================================
 * O editor de skin com o dino ao lado
 *
 * Empilhado, o dono pintaria uma regiao e rolaria a pagina para ver o efeito —
 * e a cada uma das dez. Lado a lado, ele ve a cor mudar no bicho no mesmo
 * instante em que solta o seletor, que e a unica forma de julgar um CONJUNTO
 * de cores. Em tela estreita ele empilha, com o dino em cima: la o preview
 * ainda e a primeira coisa que responde "ficou como eu queria?".
 * =========================================================================== */

.editor-skin {
  display: grid;
  grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

/*
 * `minmax(0, 1fr)`, e nao `1fr`.
 *
 * `1fr` significa `minmax(auto, 1fr)`, e `auto` nunca encolhe abaixo do conteudo minimo dos
 * filhos. A paleta tem dez itens com nome de regiao dentro; qualquer um deles empurrava a
 * coluna para alem do dialogo, e o resultado era barra de rolagem HORIZONTAL num editor de
 * cores. `minmax(0, ...)` autoriza a coluna a encolher, e ai o que quebra e o texto.
 */
.editor-skin-forma { display: grid; gap: 16px; min-width: 0; }
.editor-skin-visor { display: grid; gap: 10px; min-width: 0; position: sticky; top: 0; }

/*
 * O `.campo` global de `cartao.css` e um grid de DUAS colunas — rotulo a esquerda, controle a
 * direita. Ele serve a formularios de linha unica, e a loja (`.item-forma`) e o modal de
 * jogador (`.grupo-acao`) ja o desfazem cada um no seu escopo.
 *
 * O editor de skin nao estava em nenhum dos dois. Herdando as duas colunas, o rotulo comia
 * metade da largura e a paleta de dez regioes recebia o resto: ela caia para UMA coluna de
 * quadrados, com o nome de cada regiao cortado a zero. Era o defeito que a tela mostrava.
 */
.editor-skin-forma .campo {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

.editor-skin-forma .campo > label {
  font-family: var(--maquina);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

/* Abaixo disto o dino e os controles nao cabem lado a lado sem espremer os dois. */
@media (max-width: 860px) {
  .editor-skin { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .editor-skin-visor { position: static; }
}

.visor-dino {
  position: relative;
  height: 300px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  overflow: hidden;
  /* Fundo mais claro que o cartao: o dino tem regioes escuras — melanico e um deles —
   * e sobre o preto do painel a silhueta some. */
  background: radial-gradient(120% 90% at 50% 15%, #241a33 0%, var(--preto) 70%);
}

.visor-tela {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  touch-action: none;
}

.visor-tela:active { cursor: grabbing; }

/*
 * Os botoes de zoom, por cima do modelo.
 *
 * No celular a pinca era a unica forma de aproximar — e nem estava ligada. Num visor de 300px
 * de altura numa tela de 390, conferir o tom das marcas exigia aproximar o rosto do aparelho.
 *
 * Podem ficar por cima sem roubar o giro porque o OrbitControls escuta o CANVAS, e nao esta
 * area: um toque num botao irmao nunca chega ate ele.
 */
.visor-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.visor-zoom-botao {
  /* 44px e o alvo de toque minimo; abaixo disso o dedo erra e gira o modelo sem querer. */
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  line-height: 1;
  border-radius: var(--raio-m);
  /* Translucido com desfoque: o dino continua legivel por baixo, e o botao nao vira uma
     placa opaca tapando justamente a regiao que o dono foi conferir. */
  background: color-mix(in srgb, var(--elevado) 78%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--linha);
  color: var(--texto);
  cursor: pointer;
}

.visor-zoom-botao:hover:not(:disabled) {
  border-color: var(--roxo);
  background: color-mix(in srgb, var(--elevado) 92%, transparent);
}

.visor-zoom-botao:disabled {
  opacity: 0.4;
  cursor: default;
}

@media (max-width: 600px) {
  /* Deitados no rodape do visor: numa tela estreita a coluna vertical come a silhueta. */
  .visor-zoom {
    flex-direction: row;
    left: 10px;
    right: 10px;
    justify-content: flex-end;
  }
}

/* Estado por cima da cena, e nao no lugar dela: trocar de especie mantem o que
 * ja estava desenhado embaixo enquanto o proximo modelo baixa, em vez de piscar
 * um retangulo vazio. */
.visor-estado {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  text-align: center;
  background: rgba(11, 7, 16, 0.72);
  color: var(--texto-fraco);
  font-size: 0.82rem;
  line-height: 1.5;
}

.visor-aviso { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  /* O giro automatico ja e desligado no codigo; isto cobre o caso de o navegador
   * mudar a preferencia com a tela aberta. */
  .visor-dino { scroll-behavior: auto; }
}

/* O aviso de lista velha. Ambar: nao e erro — e um dado que o dono nao deve ler
 * como se fosse de agora. Vermelho o ensinaria a ignorar avisos de verdade. */
.aviso-lista {
  margin: 0 0 10px;
  padding: 8px 11px;
  border: 1px solid rgba(251, 191, 36, 0.3);
  border-radius: var(--raio-p);
  background: rgba(251, 191, 36, 0.06);
  color: var(--atencao);
  font-size: 0.78rem;
  line-height: 1.45;
}

/* O item que tem o defeito, clicavel dentro do proprio aviso.
 *
 * O servidor sempre mandou `onde` em cada problema — a tela e que ignorava, e cinco avisos
 * identicos empilhados nao diziam a qual dos quarenta produtos cada um pertencia. */
.ir-ao-problema {
  margin-left: 8px;
  padding: 1px 8px;
  border: 1px solid currentColor;
  border-radius: var(--raio-pilula);
  background: none;
  color: inherit;
  font-family: inherit;
  font-size: 0.76rem;
  cursor: pointer;
  opacity: 0.85;
}

.ir-ao-problema:hover { opacity: 1; }
.ir-ao-problema:focus-visible { outline: 2px solid var(--roxo-claro); outline-offset: 2px; }

/* A confirmacao de uma acao que nao volta. Estreita de proposito: uma pergunta
 * de uma frase numa caixa larga parece um formulario, e o olho procura o campo. */
.dialogo--confirmar { max-width: min(420px, calc(100vw - 32px)); }
.dialogo--confirmar .linha-botoes { margin-top: 4px; }


/* ===========================================================================
 * A aba Appearance: previa e cores lado a lado
 *
 * Ver `abaDeAparencia` em `jogadores.js`. A regra que importa: mudar a cor e ver o resultado
 * tem de acontecer sem rolagem, senao a previa nao serve para nada.
 * =========================================================================== */

.aparencia {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-items: start;
}

@media (min-width: 760px) {
  /* A previa primeiro, e mais estreita: o que se AJUSTA precisa de mais largura que o que se
     olha, e dez nomes de regiao nao cabem em 240px. */
  .aparencia { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); }
}

.aparencia-previa {
  position: sticky;
  top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.aparencia-cores { min-width: 0; }

/* Os dois botoes que agem sobre a previa, empilhados abaixo dela. */
/* Lado a lado agora que a fileira ocupa a largura toda; empilhados abaixo de 520px. */
.aparencia-ler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px;
}

/*
 * A paleta dentro da aba: duas colunas de regiao, e nao dez linhas.
 *
 * `160px` cabe o maior nome ("Display (males)") sem cortar. Abaixo disso vira uma coluna, que e
 * o certo no celular.
 */
/*
 * O `.campo` da paleta volta a ser UMA coluna.
 *
 * `.campo` e uma grade de duas — rotulo a esquerda, controle a direita — porque foi desenhada
 * para "Name: [input]". A paleta caia numa dessas metades, entao mesmo com o modal em 1040px ela
 * recebia ~200px e as dez regioes ficavam empilhadas.
 */
.aparencia-cores .campo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}

.aparencia-cores .paleta {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

/* O visor ocupa a largura da coluna e mantem proporcao — sem isso ele nasce com 0 de altura
   dentro de um flex e o dino nao aparece. */
.aparencia-previa .area-visor {
  /*
   * Quadrado, e nao retrato.
   *
   * Um dino de The Isle e mais comprido que alto — em 4/5 sobrava ceu em cima e em baixo, e a
   * coluna crescia cem pixels alem da das cores sem mostrar mais nada do modelo.
   */
  aspect-ratio: 1 / 1;
  min-height: 260px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--preto);
  overflow: hidden;
  /* Centraliza o recado do estado vazio; o `canvas` do visor ignora isto porque ocupa tudo. */
  display: grid;
  place-items: center;
}

/* O recado do estado vazio: fraco, centrado, com respiro nas laterais. */
.visor-vazio {
  margin: 0;
  padding: 0 22px;
  max-width: 30ch;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--texto-tenue);
}

/*
 * Os numeros crus ficam RECOLHIDOS.
 *
 * Eles provaram valor — distinguem "a cor nunca foi escrita" de "foi escrita e nao renderizou" —
 * mas sao dez linhas de float que ninguem le por prazer. Agora que a leitura preenche os
 * seletores, eles sao a segunda pergunta, e nao a primeira.
 */
.medida-do-jogo { margin-top: 4px; }

.medida-do-jogo > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 2px;
  color: var(--texto-tenue);
  font-family: var(--maquina);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
}

.medida-do-jogo > summary::-webkit-details-marker { display: none; }
.medida-do-jogo > summary:hover { color: var(--texto); }
.medida-do-jogo[open] > summary { color: var(--roxo-claro); }