/* --------------------------------------------------------- o modal do jogador */

/*
 * O cabecalho do modal: quem e esta pessoa, num relance.
 *
 * Antes era o SteamID cru numa linha cinza — ele identifica, mas nao RESPONDE nada. O dono
 * abriu este modal atras de contexto, e ficava cacando "esta online?", "cadastrou?", "tem
 * saldo?" nas abas, uma por vez.
 */
.cabeca-jogador {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
  padding: 15px 17px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-g);
  /*
   * Um gradiente rasissimo em vez de cor chapada.
   *
   * O cabecalho e a unica coisa do modal que nao rola, e ele precisa parecer a CAPA do que vem
   * abaixo. Chapado, ele era mais uma faixa entre outras faixas.
   */
  background: linear-gradient(160deg, var(--vidro-alto), var(--elevado) 62%);
  box-shadow: var(--sombra-cartao);
  animation: surgir-acima var(--t-medio) var(--saida) both;
}

/* Monograma: e ele que faz o olho separar uma pessoa da outra quando o dono abre tres modais
 * seguidos atendendo um chamado. O nome sozinho, no mesmo lugar e tamanho, nao marca. */
.cabeca-jogador__mono {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid color-mix(in srgb, var(--roxo) 34%, transparent);
  border-radius: var(--raio-m);
  background:
    radial-gradient(circle at 30% 20%, rgba(168, 85, 247, 0.32), transparent 70%),
    rgba(168, 85, 247, 0.12);
  color: var(--roxo-claro);
  font-family: var(--titulo);
  font-size: 1rem;
  letter-spacing: 0.02em;
}

.cabeca-jogador__corpo { flex: 1; min-width: 0; display: grid; gap: 7px; }

.cabeca-jogador__id {
  margin: 0;
  font-size: 0.74rem;
  color: var(--texto-fraco);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cabeca-jogador__selos { display: flex; flex-wrap: wrap; gap: 5px; }

/* O saldo a direita, com rotulo: um numero solto num cabecalho nao diz do que ele e. */
.cabeca-jogador__saldo { flex: none; display: grid; gap: 2px; justify-items: end; text-align: right; }

.cabeca-jogador__saldo-rotulo {
  font-family: var(--maquina);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.cabeca-jogador__saldo-valor {
  font-size: 1.28rem;
  font-weight: 600;
  /* Ouro: e a unica coisa deste cabecalho que e dinheiro. Ver o token `--ouro`. */
  color: var(--ouro);
  font-variant-numeric: tabular-nums;
}

/*
 * O ponto do "online", e o pulso.
 *
 * Estatico, "online" e "offline" sao duas etiquetas do mesmo tamanho e o olho nao separa uma da
 * outra sem ler. Com o ponto vivo, "ha alguem no servidor agora" se responde de relance — que e
 * a pergunta que faz o dono abrir este modal.
 *
 * E o UNICO pulso da interface, de proposito.
 */
.selo-jogador.ok::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: var(--raio-pilula);
  background: currentColor;
  vertical-align: middle;
  animation: pulso-vivo 2.4s var(--entrada) infinite;
}

/* Em tela estreita o saldo desce para a linha de baixo em vez de espremer o nome. */
@media (max-width: 560px) {
  .cabeca-jogador { flex-wrap: wrap; }
  .cabeca-jogador__saldo { justify-items: start; text-align: left; }
}


.dialogo--largo { max-width: min(760px, calc(100vw - 32px)); }

/*
 * A aba Appearance pede mais largura, e so ela.
 *
 * Com 760px a coluna das cores fica em 260px e as dez regioes viram uma coluna unica — a
 * "fileira" que a reorganizacao existe para acabar. Com 1040 elas cabem em duas colunas ao lado
 * da previa.
 *
 * A transicao suaviza a troca de aba: sem ela o dialogo salta de largura, e o olho perde onde
 * estava na lista de abas logo acima.
 */
.dialogo--largo { transition: max-width var(--t-medio) var(--saida); }

.dialogo--largo:has(.aparencia) {
  max-width: min(1040px, calc(100vw - 32px));
}

/*
 * O editor de skin e a tela mais larga do site, e por um motivo: ele mostra o dino de um lado
 * e dez regioes de cor do outro, e as duas coisas so servem JUNTAS — o dono muda uma cor e
 * julga o conjunto. Em 760px as duas metades nao cabiam, e o navegador resolvia isso do pior
 * jeito possivel: barra de rolagem horizontal dentro de um editor de cores.
 */
.dialogo--editor { max-width: min(1140px, calc(100vw - 40px)); }

/*
 * O dialogo nunca passa da altura da tela: ele rola por DENTRO.
 *
 * Sem isto, um editor mais alto que a janela empurrava os botoes de salvar para fora, e o dono
 * nao tinha como chegar neles — o `<dialog>` nao rola sozinho.
 */
.dialogo-forma { max-height: calc(100vh - 48px); overflow-y: auto; overflow-x: hidden; }

/* As abas do modal agrupam pelo que cada acao EXIGE — mod, RCON, carteira — e
 * nao pelo que elas parecem. Um servidor sem mod perde duas abas e continua
 * podendo expulsar; agrupado assim, o dono entende o porque. */
.abas-modal {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--linha);
  margin: 14px 0 0;
}

.aba-modal {
  padding: 9px 14px;
  border: none;
  /* Reserva a espessura da barra ativa: sem isto o texto pula um pixel ao trocar de aba. */
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--texto-fraco);
  font-family: var(--titulo);
  font-size: 0.86rem;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}

.aba-modal:hover { color: var(--texto); }
.aba-modal:focus-visible { outline: 2px solid var(--roxo-claro); outline-offset: -2px; }
.aba-modal.ativa { color: var(--roxo-claro); border-bottom-color: var(--roxo-claro); }

/*
 * O alvo de toque no celular.
 *
 * 9px de padding vertical dava 34px de altura — abaixo dos 40 que a diretriz exige, e as seis
 * abas ficam lado a lado, entao errar o alvo abre a aba errada.
 */
@media (max-width: 560px) {
  .aba-modal { padding: 12px 13px; }
}

/* Altura fixa: sem ela, trocar de aba salta a pagina inteira porque Moderation
 * e tres vezes mais alta que Actions, e o dono perde o lugar onde estava. */
.area-modal { min-height: 280px; padding-top: 4px; }

.aba-conteudo { display: flex; flex-direction: column; gap: 14px; }

/*
 * Cada grupo de acao e um CARTAO, e nao texto solto em sequencia.
 *
 * Empilhados sem limite visual, "Instant effects" e "Set growth" viravam uma parede unica: o
 * dono lia tudo como uma coisa so e o botao de aplicar crescimento parecia pertencer aos botoes
 * de cura logo acima. O contorno diz onde uma acao termina e a outra comeca — que e a unica
 * coisa que importa numa tela em que cada botao vira um comando no servidor de um cliente.
 */
.grupo-acao {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px 17px;
  border: 1px solid var(--linha);
  /* A faixa da esquerda: separa sem gritar, e acende quando o ponteiro chega. */
  border-left: 2px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--elevado);
  transition:
    border-color var(--t-rapido) var(--entrada),
    background var(--t-rapido) var(--entrada);
}

.grupo-acao:hover {
  border-left-color: var(--roxo);
  background: var(--vidro-alto);
}

/* Dentro de um grupo em foco, o titulo acompanha — e o que confirma QUAL bloco esta prestes a
   ser acionado, antes de o dono mirar no botao. */
.grupo-acao:hover .grupo-titulo { color: #fbf9ff; }

/*
 * A troca de aba: o painel novo sobe e aparece.
 *
 * Sem isso a troca e um corte seco, e o dono perde a referencia de onde estava — as seis abas
 * tem alturas muito diferentes. A subida de 6px e o que diz "isto e novo", sem custar espera.
 */
.aba-conteudo > * {
  animation: surgir-acima var(--t-medio) var(--saida) both;
}

.aba-conteudo > :nth-child(2) { animation-delay: 40ms; }
.aba-conteudo > :nth-child(3) { animation-delay: 80ms; }
.aba-conteudo > :nth-child(n + 4) { animation-delay: 110ms; }

.grupo-titulo {
  margin: 0;
  font-family: var(--titulo);
  font-size: 0.92rem;
  color: var(--texto);
}

/* A ajuda cola no titulo que ela explica, e nao no controle que vem depois. */
.grupo-acao > .grupo-titulo + .dica-campo { margin-top: -6px; }

.grupo-acao .campo { display: flex; flex-direction: column; gap: 5px; }

.grupo-acao label {
  font-family: var(--maquina);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-fraco);
}

.linha-botoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* Vermelho so na borda. Um botao vermelho solido ao lado de um roxo vira a coisa
 * mais chamativa da tela, e banir nao deve ser o que o olho procura primeiro. */
.perigoso {
  padding: 8px 14px;
  border-radius: var(--raio-p);
  border: 1px solid var(--erro);
  background: transparent;
  color: var(--erro);
  font-family: var(--humana);
  font-size: 0.88rem;
  cursor: pointer;
}

.perigoso:hover:not(:disabled) { background: rgba(251, 113, 133, 0.1); }
.perigoso:disabled { opacity: 0.55; cursor: not-allowed; }

/* ===========================================================================
 * A biblioteca de skins
 *
 * O dono nao reconhece uma pintura pelo nome — reconhece pela cor. Por isso a
 * grade e feita de FAIXAS: a listra de cada regiao pintada, encostada na borda
 * de cima do cartao, ocupando a largura inteira. Duas skins de nomes parecidos
 * se separam num relance; duas linhas de texto numa lista, nao.
 *
 * O editor e um dialogo porque dez regioes abertas ao lado de vinte skins
 * seriam uma pagina de rolagem infinita onde nada e reconhecivel.
 * =========================================================================== */

.grade-skins {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 12px;
}

.cartao-skin {
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 0;
  overflow: hidden;
  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-skin:hover { border-color: var(--roxo-claro); background: var(--preto); }
.cartao-skin:focus-visible { outline: 2px solid var(--roxo-claro); outline-offset: 2px; }

/* Arquivada continua legivel: ela ainda entrega para quem ja comprou, e some-la
 * atras de uma opacidade baixa faria o dono achar que a perdeu. */
.cartao-skin--arquivada { opacity: 0.68; }
.cartao-skin--arquivada .faixa-skin { filter: saturate(0.35); }

.cartao-skin-corpo { display: grid; gap: 7px; padding: 12px 14px 14px; }
.cartao-skin-nome { font-size: 0.94rem; font-weight: 600; }
.cartao-skin-selos { display: flex; flex-wrap: wrap; gap: 5px; }

.selo-skin {
  padding: 2px 7px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-pilula);
  font-family: var(--maquina);
  font-size: 0.66rem;
  letter-spacing: 0.04em;
  color: var(--texto-fraco);
}

/* "Esta a venda" e o unico selo que muda uma decisao — e o que faz o dono pensar
 * duas vezes antes de apagar. So ele recebe a cor da marca. */
.selo-skin--venda { color: var(--roxo-claro); border-color: rgba(168, 85, 247, 0.4); }
.selo-skin--fria { opacity: 0.7; }


/* --- A garagem -------------------------------------------------------------
 *
 * Quatro vagas, e cada uma responde primeiro "o que tem aqui?" — que e a unica
 * pergunta com que o dono abre esta aba. As acoes vivem DENTRO da vaga, e nao
 * numa barra no topo: com a barra, escolher a vaga e escolher a acao seriam
 * dois passos separados sobre a mesma decisao.
 */
.garagem-vagas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.garagem-vaga {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 13px 15px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--elevado);
  transition:
    border-color var(--t-rapido) var(--entrada),
    background var(--t-rapido) var(--entrada);
}

/*
 * Cheia e vazia sao TELAS diferentes, e a borda esquerda e o que as separa a distancia.
 *
 * Desenha-las iguais — com botao desabilitado na vazia — daria quatro cartoes cinzas onde o
 * olho procura o que existe. O vazio nao e um erro; e onde se comeca.
 */
.garagem-vaga--cheia {
  border-left: 2px solid var(--roxo);
}

.garagem-vaga--vazia {
  border-style: dashed;
  background: none;
}

.garagem-vaga:hover,
.garagem-vaga:focus-within {
  border-color: var(--roxo);
  background: var(--vidro-alto);
}

.garagem-vaga-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

/* O nome da vaga e etiqueta, e nao titulo: quem manda na hierarquia e a especie. */
.garagem-vaga-nome {
  font-family: var(--maquina);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

.garagem-vaga-quando {
  font-size: 11px;
  color: var(--texto-tenue);
  font-variant-numeric: tabular-nums;
}

/* A especie e o que o dono procura, entao ela e a maior coisa do cartao. */
.garagem-vaga-dino {
  margin: 0;
  font-size: 14px;
  color: var(--texto);
}

.garagem-vaga--vazia .garagem-vaga-dino {
  color: var(--texto-tenue);
  font-style: italic;
}

.garagem-vaga-acoes {
  display: flex;
  gap: 6px;
}

.garagem-vaga-acoes button {
  flex: 1 1 0;
  min-height: 38px;
  padding: 0 12px;
  font-size: 13px;
}

.garagem-vaga--vazia button {
  min-height: 38px;
  font-size: 13px;
}

/*
 * As duas notas sao MENORES que o resto, e isso e deliberado.
 *
 * Elas explicam consequencia — guardar manda o jogador para a selecao, resgatar troca — e
 * consequencia se le uma vez por cartao. Do mesmo tamanho do corpo, competiriam com a especie,
 * que e o que o olho procura primeiro.
 */
.garagem-troca,
.garagem-aviso {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
}

/* O aviso de que guardar MATA fica em ambar: ele e a unica coisa desta tela que o dono nao
   pode descobrir depois. */
.garagem-aviso {
  color: var(--atencao);
  opacity: 0.85;
}

@media (max-width: 560px) {
  .garagem-vagas { grid-template-columns: 1fr; }
}

/*
 * A ZONA PERIGOSA da biblioteca: limpar a cor aplicada de todo mundo.
 *
 * Ela nao edita a biblioteca — manda o servidor esquecer o que ja foi pintado —, e por isso fica
 * separada em vez de virar mais um botao ao lado de "Save library". A borda na cor de falha e o
 * quanto ela chama: um bloco vermelho solido ao lado da grade de skins seria a coisa mais
 * chamativa de uma pagina onde o trabalho normal e outro.
 */
.zona-perigo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--erro) 40%, var(--linha));
  border-radius: 12px;
  background: color-mix(in srgb, var(--erro) 5%, transparent);
}

.zona-perigo strong { color: var(--erro); font-size: 14px; }
.zona-perigo .dica-campo { margin: 4px 0 0; }
/* O botao nao encolhe: o texto ao lado dele e longo e comeria a largura toda. */
.zona-perigo .perigoso { flex: 0 0 auto; margin-left: auto; }

@media (max-width: 640px) {
  .zona-perigo { flex-direction: column; align-items: stretch; }
  .zona-perigo .perigoso { margin-left: 0; }
}

/* -------------------------------------------------------------- o placar de caca */

/*
 * Uma grade de cinco colunas, e nao uma tabela.
 *
 * A tabela HTML traria semantica melhor, mas as celulas dela nao se reorganizam num celular sem
 * um "display: grid" por cima — e ai a semantica ja foi embora. A grade da o alinhamento com uma
 * regra so, e "tabular-nums" faz os numeros ficarem em coluna mesmo com larguras diferentes.
 *
 * "minmax(0, 1fr)" no nome, e nao "1fr": sem o minimo zero um nome comprido empurra os numeros
 * para fora do cartao em vez de ser cortado.
 */
.placar-corpo {
  display: grid;
  gap: 1px;
}

.placar-linha {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) 3.2rem 3.2rem 3.6rem;
  align-items: center;
  gap: 0.6rem;
  padding: 0.42rem 0.1rem;
  border-top: 1px solid var(--linha);
}

.placar-linha:first-child { border-top: none; }

.placar-posicao {
  font-size: 0.9rem;
  text-align: center;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

/* Nome comprido e CORTADO, e nao quebrado: uma linha de duas alturas desalinha a coluna toda. */
.placar-nome {
  font-size: 0.86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.placar-numero {
  font-size: 0.86rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* As mortes ficam mais fracas: a coluna que a pessoa veio ver e a de abates. */
.placar-numero--fraco { color: var(--texto-fraco); }

.placar-kd { color: var(--roxo-claro); }

.placar-vazio {
  margin: 0;
  padding: 0.6rem 0;
  font-size: 0.84rem;
  color: var(--texto-fraco);
}

@media (max-width: 34rem) {
  /* Sem a coluna de mortes o K/D continua contando a mesma historia, e o nome ganha o espaco. */
  .placar-linha { grid-template-columns: 2rem minmax(0, 1fr) 3rem 3.4rem; }
  .placar-numero--fraco { display: none; }
}