/* Aqui eu defino os tokens do design system no :root; trocar uma cor aqui muda o portal inteiro. */
:root { /* Aqui eu abro o bloco dos tokens globais. */
  --bg: #07090d; /* Aqui eu defino o fundo principal, quase preto com tom azulado. */
  --bg2: #0b0f15; /* Aqui eu defino o fundo de seções elevadas. */
  --painel: #10151d; /* Aqui eu defino o fundo de cartões e campos. */
  --painel2: #151b25; /* Aqui eu defino o fundo de cartões em destaque ou hover. */
  --borda: #1e2632; /* Aqui eu defino a cor das bordas finas. */
  --borda2: #2a3444; /* Aqui eu defino a cor das bordas ao passar o mouse. */
  --texto: #e8edf5; /* Aqui eu defino o texto principal. */
  --suave: #8793a6; /* Aqui eu defino o texto secundário. */
  --ciano: #38d8ff; /* Aqui eu defino o ciano neon (jogador 1, raio-X, destaque). */
  --magenta: #ff4fd8; /* Aqui eu defino o magenta neon (jogador 2). */
  --ouro: #ffc94a; /* Aqui eu defino o dourado (tamanho real, conquistas). */
  --ok: #4ade80; /* Aqui eu defino o verde de sucesso. */
  --erro: #ff5d6c; /* Aqui eu defino o vermelho de erro e dano. */
  --raio: 14px; /* Aqui eu defino o arredondamento padrão dos cartões. */
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* Aqui eu defino a fonte monoespaçada dos números de engenharia. */
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Aqui eu defino a fonte geométrica nativa de cada sistema. */
} /* Aqui eu fecho o bloco de tokens. */

* { /* Aqui eu seleciono todos os elementos. */
  box-sizing: border-box; /* Aqui eu faço padding e borda entrarem na largura. */
  -webkit-tap-highlight-color: transparent; /* Aqui eu tiro o flash cinza ao tocar no celular. */
} /* Aqui eu fecho o seletor universal. */

html, body { /* Aqui eu seleciono as duas raízes. */
  margin: 0; /* Aqui eu removo as margens padrão. */
  background: var(--bg); /* Aqui eu aplico o fundo escuro. */
  color: var(--texto); /* Aqui eu aplico o texto claro. */
  font-family: var(--sans); /* Aqui eu aplico a fonte do design system. */
  line-height: 1.45; /* Aqui eu dou respiro entre as linhas. */
  -webkit-font-smoothing: antialiased; /* Aqui eu suavizo o texto no Mac e iOS. */
} /* Aqui eu fecho o bloco html/body. */

body { /* Aqui eu estilizo o corpo. */
  min-height: 100vh; /* Aqui eu garanto a altura mínima da tela (fallback). */
  min-height: 100dvh; /* Aqui eu uso a altura dinâmica que respeita a barra do navegador móvel. */
  background-image: radial-gradient(1200px 500px at 50% -10%, rgba(56, 216, 255, 0.07), transparent 60%); /* Aqui eu crio um brilho ciano sutil no topo da página. */
  padding-bottom: env(safe-area-inset-bottom); /* Aqui eu respeito a área segura dos iPhones. */
} /* Aqui eu fecho o bloco do body. */

button, input, select { /* Aqui eu seleciono os controles de formulário. */
  font: inherit; /* Aqui eu faço herdarem a fonte da página. */
  color: inherit; /* Aqui eu faço herdarem a cor do texto. */
} /* Aqui eu fecho o bloco dos controles. */

button { /* Aqui eu estilizo todos os botões. */
  cursor: pointer; /* Aqui eu mostro a mãozinha no desktop. */
} /* Aqui eu fecho o bloco dos botões. */

.ic { /* Aqui eu estilizo os ícones SVG do sprite. */
  width: 18px; /* Aqui eu defino a largura. */
  height: 18px; /* Aqui eu defino a altura. */
  fill: none; /* Aqui eu deixo o interior vazio, pois são ícones de contorno. */
  stroke: currentColor; /* Aqui eu uso a cor do texto como cor do traço. */
  stroke-width: 1.8; /* Aqui eu defino a espessura do traço. */
  stroke-linecap: round; /* Aqui eu arredondo as pontas. */
  stroke-linejoin: round; /* Aqui eu arredondo as quinas. */
  flex: none; /* Aqui eu impeço o ícone de encolher dentro de flexbox. */
} /* Aqui eu fecho o bloco .ic. */

.ic-grande { /* Aqui eu estilizo ícones maiores dos cartões. */
  width: 26px; /* Aqui eu aumento a largura. */
  height: 26px; /* Aqui eu aumento a altura. */
  color: var(--ciano); /* Aqui eu pinto de ciano. */
} /* Aqui eu fecho o bloco .ic-grande. */

.oculto { /* Aqui eu crio o utilitário de esconder elementos. */
  display: none !important; /* Aqui eu escondo com prioridade máxima. */
} /* Aqui eu fecho o bloco .oculto. */

/* ---------- Barra superior ---------- */

.topo { /* Aqui eu estilizo a barra superior fixa. */
  position: sticky; /* Aqui eu a mantenho visível ao rolar. */
  top: 0; /* Aqui eu a encosto no topo. */
  z-index: 50; /* Aqui eu a coloco acima do conteúdo. */
  display: flex; /* Aqui eu uso flexbox. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  gap: 12px; /* Aqui eu espaço os grupos. */
  padding: 10px 16px; /* Aqui eu dou espaço interno. */
  background: rgba(7, 9, 13, 0.82); /* Aqui eu uso um fundo translúcido. */
  backdrop-filter: blur(14px); /* Aqui eu desfoco o que passa por trás, no estilo vidro. */
  -webkit-backdrop-filter: blur(14px); /* Aqui eu repito o prefixo para o Safari. */
  border-bottom: 1px solid var(--borda); /* Aqui eu desenho a linha inferior. */
} /* Aqui eu fecho o bloco .topo. */

.marca { /* Aqui eu estilizo a marca do portal. */
  background: none; /* Aqui eu removo o fundo do botão. */
  border: 0; /* Aqui eu removo a borda. */
  padding: 0; /* Aqui eu removo o espaço interno. */
  font-weight: 800; /* Aqui eu deixo em negrito pesado. */
  font-size: 1.15rem; /* Aqui eu defino o tamanho. */
  letter-spacing: -0.03em; /* Aqui eu aperto as letras. */
} /* Aqui eu fecho o bloco .marca. */

.marca span { /* Aqui eu estilizo o ".com.br" da marca. */
  color: var(--ciano); /* Aqui eu pinto de ciano. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-weight: 500; /* Aqui eu deixo mais leve. */
  font-size: 0.8em; /* Aqui eu diminuo. */
} /* Aqui eu fecho o bloco do span da marca. */

.abas { /* Aqui eu estilizo a navegação. */
  display: flex; /* Aqui eu uso flexbox. */
  gap: 4px; /* Aqui eu espaço as abas. */
  margin-left: 8px; /* Aqui eu afasto da marca. */
} /* Aqui eu fecho o bloco .abas. */

.aba { /* Aqui eu estilizo cada aba. */
  display: inline-flex; /* Aqui eu alinho ícone e texto. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  gap: 6px; /* Aqui eu espaço ícone e texto. */
  padding: 8px 12px; /* Aqui eu dou espaço interno. */
  background: none; /* Aqui eu removo o fundo. */
  border: 1px solid transparent; /* Aqui eu reservo uma borda invisível para não pular no hover. */
  border-radius: 10px; /* Aqui eu arredondo. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  font-size: 0.9rem; /* Aqui eu defino o tamanho. */
  font-weight: 600; /* Aqui eu deixo semi-negrito. */
} /* Aqui eu fecho o bloco .aba. */

.aba:hover { /* Aqui eu estilizo a aba ao passar o mouse. */
  color: var(--texto); /* Aqui eu clareio o texto. */
} /* Aqui eu fecho o bloco do hover da aba. */

.aba.ativa { /* Aqui eu estilizo a aba ativa. */
  color: var(--texto); /* Aqui eu uso o texto claro. */
  background: var(--painel); /* Aqui eu dou fundo de painel. */
  border-color: var(--borda); /* Aqui eu desenho a borda. */
} /* Aqui eu fecho o bloco da aba ativa. */

.status { /* Aqui eu estilizo o grupo de indicadores. */
  display: flex; /* Aqui eu uso flexbox. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  gap: 8px; /* Aqui eu espaço os chips. */
  margin-left: auto; /* Aqui eu empurro o grupo para a direita. */
} /* Aqui eu fecho o bloco .status. */

.chip { /* Aqui eu estilizo os indicadores (ofensiva, patente, som). */
  position: relative; /* Aqui eu permito posicionar a barra de XP dentro. */
  display: inline-flex; /* Aqui eu alinho conteúdo em linha. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  gap: 6px; /* Aqui eu espaço os itens. */
  padding: 7px 11px; /* Aqui eu dou espaço interno. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 999px; /* Aqui eu deixo em formato de pílula. */
  font-size: 0.82rem; /* Aqui eu defino o tamanho. */
  font-weight: 600; /* Aqui eu deixo semi-negrito. */
  overflow: hidden; /* Aqui eu corto o que passar do contorno (barra de XP). */
  white-space: nowrap; /* Aqui eu impeço quebra de linha. */
} /* Aqui eu fecho o bloco .chip. */

#chip-ofensiva .ic { /* Aqui eu estilizo o ícone da ofensiva. */
  color: #ff9d3c; /* Aqui eu pinto de laranja de chama. */
} /* Aqui eu fecho o bloco do ícone da ofensiva. */

#btn-patente .ic { /* Aqui eu estilizo o ícone da patente. */
  color: var(--ouro); /* Aqui eu pinto de dourado. */
} /* Aqui eu fecho o bloco do ícone da patente. */

#txt-patente { /* Aqui eu estilizo o texto da patente. */
  max-width: 150px; /* Aqui eu limito a largura. */
  overflow: hidden; /* Aqui eu corto o excesso. */
  text-overflow: ellipsis; /* Aqui eu mostro reticências se não couber. */
} /* Aqui eu fecho o bloco do texto da patente. */

.chip-icone { /* Aqui eu estilizo o chip só de ícone (som). */
  padding: 8px; /* Aqui eu diminuo o espaço interno. */
} /* Aqui eu fecho o bloco .chip-icone. */

.xp { /* Aqui eu estilizo a trilha da barra de XP embaixo do chip. */
  position: absolute; /* Aqui eu a posiciono dentro do chip. */
  left: 0; /* Aqui eu a encosto na esquerda. */
  right: 0; /* Aqui eu a estico até a direita. */
  bottom: 0; /* Aqui eu a encosto embaixo. */
  height: 3px; /* Aqui eu defino a espessura. */
  background: rgba(255, 255, 255, 0.06); /* Aqui eu desenho a trilha vazia. */
} /* Aqui eu fecho o bloco .xp. */

.xp b { /* Aqui eu estilizo o preenchimento da barra de XP. */
  display: block; /* Aqui eu a trato como bloco. */
  height: 100%; /* Aqui eu ocupo toda a altura da trilha. */
  width: 0; /* Aqui eu começo vazia; o JavaScript define a largura. */
  background: var(--ouro); /* Aqui eu pinto de dourado. */
  transition: width 0.6s ease; /* Aqui eu animo o crescimento. */
} /* Aqui eu fecho o bloco do preenchimento. */

/* ---------- Estrutura geral ---------- */

#app { /* Aqui eu estilizo a área principal. */
  max-width: 980px; /* Aqui eu limito a largura em telas grandes. */
  margin: 0 auto; /* Aqui eu centralizo. */
  padding: 20px 16px 48px; /* Aqui eu dou espaço interno com 16px de gutter lateral. */
} /* Aqui eu fecho o bloco do #app. */

.view { /* Aqui eu estilizo cada tela. */
  display: none; /* Aqui eu escondo todas por padrão. */
} /* Aqui eu fecho o bloco .view. */

.view.ativa { /* Aqui eu mostro a tela ativa. */
  display: block; /* Aqui eu a exibo. */
  animation: entrada 0.28s ease both; /* Aqui eu aplico uma entrada suave. */
} /* Aqui eu fecho o bloco da view ativa. */

@keyframes entrada { /* Aqui eu defino a animação de entrada das telas. */
  from { opacity: 0; transform: translateY(8px); } /* Aqui eu começo transparente e um pouco abaixo. */
  to { opacity: 1; transform: none; } /* Aqui eu termino visível e na posição normal. */
} /* Aqui eu fecho a animação de entrada. */

.etiqueta { /* Aqui eu estilizo as etiquetas pequenas em caixa-alta. */
  margin: 0 0 6px; /* Aqui eu dou um pequeno espaço abaixo. */
  color: var(--ciano); /* Aqui eu pinto de ciano. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: 0.72rem; /* Aqui eu deixo pequena. */
  letter-spacing: 0.14em; /* Aqui eu espaço bastante as letras. */
  text-transform: uppercase; /* Aqui eu escrevo em maiúsculas. */
} /* Aqui eu fecho o bloco .etiqueta. */

.hero { /* Aqui eu estilizo o destaque do hub. */
  padding: 28px 22px; /* Aqui eu dou espaço interno. */
  background: linear-gradient(135deg, rgba(56, 216, 255, 0.1), rgba(255, 79, 216, 0.05) 60%, transparent), var(--painel); /* Aqui eu crio um degradê neon sutil sobre o painel. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 20px; /* Aqui eu arredondo bastante. */
} /* Aqui eu fecho o bloco .hero. */

.hero h1 { /* Aqui eu estilizo o título do jogo. */
  margin: 0; /* Aqui eu removo as margens. */
  font-size: clamp(2.2rem, 7vw, 3.6rem); /* Aqui eu deixo o título fluido entre 2.2rem e 3.6rem. */
  letter-spacing: -0.04em; /* Aqui eu aperto as letras. */
  line-height: 1; /* Aqui eu aperto a altura da linha. */
} /* Aqui eu fecho o bloco do h1. */

.hero h1 em { /* Aqui eu estilizo a palavra "Pro". */
  font-style: normal; /* Aqui eu removo o itálico. */
  color: var(--ciano); /* Aqui eu pinto de ciano. */
  text-shadow: 0 0 24px rgba(56, 216, 255, 0.5); /* Aqui eu crio o brilho neon. */
} /* Aqui eu fecho o bloco do "Pro". */

.lead { /* Aqui eu estilizo o texto de apoio. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  max-width: 56ch; /* Aqui eu limito a largura para leitura confortável. */
  margin: 10px 0 16px; /* Aqui eu dou espaço acima e abaixo. */
} /* Aqui eu fecho o bloco .lead. */

.campo { /* Aqui eu estilizo o campo com ícone (apelido). */
  display: flex; /* Aqui eu uso flexbox. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  gap: 10px; /* Aqui eu espaço o ícone do campo. */
  max-width: 360px; /* Aqui eu limito a largura. */
  padding: 0 14px; /* Aqui eu dou espaço lateral. */
  background: var(--bg); /* Aqui eu uso fundo escuro. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 12px; /* Aqui eu arredondo. */
  color: var(--suave); /* Aqui eu uso a cor suave para o ícone. */
} /* Aqui eu fecho o bloco .campo. */

.campo:focus-within { /* Aqui eu estilizo o campo quando o input interno tem foco. */
  border-color: var(--ciano); /* Aqui eu pinto a borda de ciano. */
} /* Aqui eu fecho o bloco do foco do campo. */

input[type="text"] { /* Aqui eu estilizo os campos de texto. */
  width: 100%; /* Aqui eu uso toda a largura disponível. */
  min-height: 48px; /* Aqui eu garanto uma área de toque confortável. */
  background: transparent; /* Aqui eu deixo o fundo transparente. */
  border: 0; /* Aqui eu removo a borda padrão. */
  outline: 0; /* Aqui eu removo o contorno padrão. */
  font-size: 1rem; /* Aqui eu uso 16px para o iPhone não dar zoom ao focar. */
} /* Aqui eu fecho o bloco dos campos de texto. */

.secao { /* Aqui eu estilizo os títulos de seção. */
  margin: 30px 0 12px; /* Aqui eu dou espaço acima e abaixo. */
  font-size: 1.1rem; /* Aqui eu defino o tamanho. */
  letter-spacing: -0.01em; /* Aqui eu aperto levemente as letras. */
} /* Aqui eu fecho o bloco .secao. */

.modos, .proximos { /* Aqui eu estilizo as grades de modos e de lançamentos. */
  display: grid; /* Aqui eu uso grid. */
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); /* Aqui eu crio colunas automáticas de no mínimo 260px. */
  gap: 12px; /* Aqui eu espaço os cartões. */
} /* Aqui eu fecho o bloco das grades. */

.modo, .em-breve { /* Aqui eu estilizo os cartões de modo e de lançamento. */
  position: relative; /* Aqui eu permito posicionar a tag no canto. */
  display: flex; /* Aqui eu uso flexbox em coluna. */
  flex-direction: column; /* Aqui eu empilho o conteúdo. */
  align-items: flex-start; /* Aqui eu alinho à esquerda. */
  gap: 6px; /* Aqui eu espaço os itens. */
  padding: 18px; /* Aqui eu dou espaço interno. */
  text-align: left; /* Aqui eu alinho o texto à esquerda. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: var(--raio); /* Aqui eu arredondo. */
  transition: transform 0.15s, border-color 0.15s, background 0.15s; /* Aqui eu suavizo o hover. */
} /* Aqui eu fecho o bloco dos cartões. */

.modo:hover { /* Aqui eu estilizo o cartão de modo ao passar o mouse. */
  transform: translateY(-2px); /* Aqui eu o levanto um pouco. */
  border-color: var(--ciano); /* Aqui eu pinto a borda de ciano. */
  background: var(--painel2); /* Aqui eu clareio o fundo. */
} /* Aqui eu fecho o bloco do hover do modo. */

.modo b, .em-breve b { /* Aqui eu estilizo o título dos cartões. */
  font-size: 1.02rem; /* Aqui eu defino o tamanho. */
} /* Aqui eu fecho o bloco do título dos cartões. */

.modo span, .em-breve span { /* Aqui eu estilizo a descrição dos cartões. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  font-size: 0.88rem; /* Aqui eu diminuo um pouco. */
} /* Aqui eu fecho o bloco da descrição. */

.em-breve { /* Aqui eu deixo os lançamentos mais apagados que os modos. */
  opacity: 0.6; /* Aqui eu os apago. */
} /* Aqui eu fecho o bloco .em-breve. */

.em-breve .ic-grande { /* Aqui eu pinto o ícone dos lançamentos de cinza. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
} /* Aqui eu fecho o bloco do ícone dos lançamentos. */

.tag { /* Aqui eu estilizo as etiquetas dos cartões (Solo, Tempo real, Em breve). */
  position: absolute; /* Aqui eu a posiciono no canto. */
  top: 14px; /* Aqui eu a afasto do topo. */
  right: 14px; /* Aqui eu a afasto da direita. */
  padding: 2px 8px; /* Aqui eu dou espaço interno. */
  border: 1px solid var(--borda2); /* Aqui eu desenho a borda. */
  border-radius: 999px; /* Aqui eu deixo em pílula. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: 0.66rem; /* Aqui eu deixo bem pequena. */
  font-style: normal; /* Aqui eu removo o itálico padrão do <i>. */
  letter-spacing: 0.08em; /* Aqui eu espaço as letras. */
  text-transform: uppercase; /* Aqui eu escrevo em maiúsculas. */
} /* Aqui eu fecho o bloco .tag. */

.tag-rt { /* Aqui eu destaco a etiqueta de tempo real. */
  color: var(--magenta); /* Aqui eu pinto de magenta. */
  border-color: rgba(255, 79, 216, 0.4); /* Aqui eu pinto a borda de magenta translúcido. */
} /* Aqui eu fecho o bloco .tag-rt. */

/* ---------- Botões ---------- */

.botao { /* Aqui eu estilizo o botão padrão. */
  display: inline-flex; /* Aqui eu alinho ícone e texto. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  justify-content: center; /* Aqui eu centralizo na horizontal. */
  gap: 8px; /* Aqui eu espaço ícone e texto. */
  min-height: 48px; /* Aqui eu garanto uma área de toque confortável. */
  padding: 12px 18px; /* Aqui eu dou espaço interno. */
  border: 1px solid var(--borda2); /* Aqui eu desenho a borda. */
  border-radius: 12px; /* Aqui eu arredondo. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  font-weight: 700; /* Aqui eu deixo em negrito. */
  transition: transform 0.1s, opacity 0.15s, border-color 0.15s; /* Aqui eu suavizo as interações. */
} /* Aqui eu fecho o bloco .botao. */

.botao:hover:not(:disabled) { /* Aqui eu estilizo o botão ao passar o mouse. */
  border-color: var(--ciano); /* Aqui eu pinto a borda de ciano. */
} /* Aqui eu fecho o bloco do hover do botão. */

.botao:active:not(:disabled) { /* Aqui eu estilizo o botão no instante do toque. */
  transform: scale(0.97); /* Aqui eu o encolho um pouco. */
} /* Aqui eu fecho o bloco do toque. */

.botao:disabled { /* Aqui eu estilizo o botão desabilitado. */
  opacity: 0.4; /* Aqui eu o apago. */
  cursor: not-allowed; /* Aqui eu mostro o cursor de proibido. */
} /* Aqui eu fecho o bloco do desabilitado. */

.botao.primario { /* Aqui eu estilizo o botão de ação principal. */
  background: var(--ciano); /* Aqui eu pinto de ciano. */
  border-color: var(--ciano); /* Aqui eu pinto a borda de ciano. */
  color: #04141a; /* Aqui eu uso texto escuro para contraste. */
  box-shadow: 0 0 22px rgba(56, 216, 255, 0.28); /* Aqui eu crio o brilho neon. */
} /* Aqui eu fecho o bloco .primario. */

.botao.secundario { /* Aqui eu estilizo o botão secundário. */
  background: var(--painel2); /* Aqui eu clareio o fundo. */
} /* Aqui eu fecho o bloco .secundario. */

.botao.fantasma { /* Aqui eu estilizo o botão discreto. */
  background: transparent; /* Aqui eu deixo o fundo transparente. */
  border-color: transparent; /* Aqui eu escondo a borda. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
} /* Aqui eu fecho o bloco .fantasma. */

.botao.grande { /* Aqui eu estilizo a variação grande. */
  width: 100%; /* Aqui eu ocupo toda a largura. */
  min-height: 56px; /* Aqui eu aumento a altura. */
  font-size: 1.05rem; /* Aqui eu aumento o texto. */
} /* Aqui eu fecho o bloco .grande. */

.icone-btn { /* Aqui eu estilizo os botões quadrados de ícone. */
  display: inline-flex; /* Aqui eu alinho o conteúdo. */
  flex-direction: column; /* Aqui eu empilho ícone e legenda pequena. */
  align-items: center; /* Aqui eu centralizo na horizontal. */
  justify-content: center; /* Aqui eu centralizo na vertical. */
  width: 48px; /* Aqui eu defino a largura de toque. */
  height: 48px; /* Aqui eu defino a altura de toque. */
  flex: none; /* Aqui eu impeço de encolher. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border: 1px solid var(--borda2); /* Aqui eu desenho a borda. */
  border-radius: 12px; /* Aqui eu arredondo. */
} /* Aqui eu fecho o bloco .icone-btn. */

.icone-btn small { /* Aqui eu estilizo a legenda pequena do botão de ícone. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: 0.62rem; /* Aqui eu deixo minúscula. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  line-height: 1; /* Aqui eu aperto a altura da linha. */
} /* Aqui eu fecho o bloco da legenda. */

.icone-btn:active { /* Aqui eu estilizo o botão de ícone no toque. */
  background: var(--painel2); /* Aqui eu clareio o fundo. */
  border-color: var(--ciano); /* Aqui eu pinto a borda de ciano. */
} /* Aqui eu fecho o bloco do toque. */

.cartao { /* Aqui eu estilizo cartões genéricos. */
  display: flex; /* Aqui eu uso flexbox em coluna. */
  flex-direction: column; /* Aqui eu empilho. */
  gap: 12px; /* Aqui eu espaço os itens. */
  padding: 20px; /* Aqui eu dou espaço interno. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 18px; /* Aqui eu arredondo. */
  margin-bottom: 14px; /* Aqui eu dou espaço abaixo. */
} /* Aqui eu fecho o bloco .cartao. */

.divisor { /* Aqui eu estilizo o separador com texto. */
  display: flex; /* Aqui eu uso flexbox. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  gap: 12px; /* Aqui eu espaço o texto das linhas. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  font-size: 0.82rem; /* Aqui eu deixo pequeno. */
} /* Aqui eu fecho o bloco .divisor. */

.divisor::before, .divisor::after { /* Aqui eu desenho as linhas dos dois lados. */
  content: ""; /* Aqui eu crio pseudo-elementos vazios. */
  flex: 1; /* Aqui eu os estico. */
  height: 1px; /* Aqui eu deixo fininhos. */
  background: var(--borda); /* Aqui eu uso a cor da borda. */
} /* Aqui eu fecho o bloco das linhas. */

.linha-codigo { /* Aqui eu estilizo a linha do código da sala. */
  display: flex; /* Aqui eu uso flexbox. */
  gap: 10px; /* Aqui eu espaço o campo e o botão. */
} /* Aqui eu fecho o bloco .linha-codigo. */

#input-codigo { /* Aqui eu estilizo o campo do código. */
  text-align: center; /* Aqui eu centralizo o texto. */
  text-transform: uppercase; /* Aqui eu mostro em maiúsculas. */
  letter-spacing: 0.4em; /* Aqui eu espaço bastante as letras. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-weight: 800; /* Aqui eu deixo pesado. */
  background: var(--bg); /* Aqui eu uso fundo escuro. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 12px; /* Aqui eu arredondo. */
} /* Aqui eu fecho o bloco do campo de código. */

.erro { /* Aqui eu estilizo mensagens de erro. */
  min-height: 1.4em; /* Aqui eu reservo a altura de uma linha para o layout não pular. */
  margin: 0; /* Aqui eu removo as margens. */
  color: var(--erro); /* Aqui eu pinto de vermelho. */
  font-size: 0.9rem; /* Aqui eu deixo um pouco menor. */
} /* Aqui eu fecho o bloco .erro. */

.dica { /* Aqui eu estilizo textos de ajuda. */
  margin: 0; /* Aqui eu removo as margens. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  font-size: 0.85rem; /* Aqui eu deixo pequeno. */
  text-align: center; /* Aqui eu centralizo. */
} /* Aqui eu fecho o bloco .dica. */

/* ---------- Sala multiplayer ---------- */

.codigo-grande { /* Aqui eu estilizo o código da sala exibido no lobby. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: clamp(2.6rem, 14vw, 4rem); /* Aqui eu deixo o código enorme e fluido. */
  font-weight: 800; /* Aqui eu deixo pesado. */
  letter-spacing: 0.3em; /* Aqui eu espaço as letras. */
  padding-left: 0.3em; /* Aqui eu compenso o espaçamento para centralizar visualmente. */
  text-align: center; /* Aqui eu centralizo. */
  color: var(--ciano); /* Aqui eu pinto de ciano. */
  text-shadow: 0 0 28px rgba(56, 216, 255, 0.45); /* Aqui eu crio o brilho neon. */
} /* Aqui eu fecho o bloco .codigo-grande. */

.sala-compartilhar { /* Aqui eu estilizo o bloco de QR e link. */
  display: flex; /* Aqui eu uso flexbox. */
  gap: 16px; /* Aqui eu espaço o QR e o link. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  flex-wrap: wrap; /* Aqui eu permito quebrar linha em telas estreitas. */
  justify-content: center; /* Aqui eu centralizo. */
} /* Aqui eu fecho o bloco do compartilhamento. */

.qr { /* Aqui eu estilizo a moldura branca do QR Code. */
  width: 148px; /* Aqui eu defino a largura. */
  height: 148px; /* Aqui eu defino a altura. */
  padding: 8px; /* Aqui eu dou a "zona de silêncio" branca ao redor. */
  background: #fff; /* Aqui eu uso fundo branco para a câmera ler. */
  border-radius: 12px; /* Aqui eu arredondo. */
} /* Aqui eu fecho o bloco .qr. */

.qr svg { /* Aqui eu estilizo o SVG do QR. */
  width: 100%; /* Aqui eu ocupo toda a largura. */
  height: 100%; /* Aqui eu ocupo toda a altura. */
  display: block; /* Aqui eu o trato como bloco. */
} /* Aqui eu fecho o bloco do SVG do QR. */

.sala-links { /* Aqui eu estilizo a coluna do link. */
  display: flex; /* Aqui eu uso flexbox em coluna. */
  flex-direction: column; /* Aqui eu empilho. */
  gap: 8px; /* Aqui eu espaço os itens. */
  min-width: 0; /* Aqui eu permito encolher. */
  flex: 1 1 200px; /* Aqui eu deixo a coluna flexível. */
} /* Aqui eu fecho o bloco .sala-links. */

.sala-links code { /* Aqui eu estilizo o link exibido. */
  display: block; /* Aqui eu o trato como bloco. */
  padding: 10px 12px; /* Aqui eu dou espaço interno. */
  background: var(--bg); /* Aqui eu uso fundo escuro. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 10px; /* Aqui eu arredondo. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: 0.78rem; /* Aqui eu deixo pequeno. */
  word-break: break-all; /* Aqui eu quebro o link em qualquer ponto para não estourar a tela. */
} /* Aqui eu fecho o bloco do link. */

.jogadores { /* Aqui eu estilizo a lista de jogadores da sala. */
  list-style: none; /* Aqui eu removo as bolinhas. */
  margin: 0; /* Aqui eu removo as margens. */
  padding: 0; /* Aqui eu removo o recuo. */
  display: flex; /* Aqui eu uso flexbox em coluna. */
  flex-direction: column; /* Aqui eu empilho. */
  gap: 8px; /* Aqui eu espaço os itens. */
} /* Aqui eu fecho o bloco .jogadores. */

.jogadores li { /* Aqui eu estilizo cada jogador. */
  display: flex; /* Aqui eu uso flexbox. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  gap: 10px; /* Aqui eu espaço os itens. */
  padding: 12px 14px; /* Aqui eu dou espaço interno. */
  background: var(--bg); /* Aqui eu uso fundo escuro. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 12px; /* Aqui eu arredondo. */
} /* Aqui eu fecho o bloco dos jogadores. */

.jogadores li i { /* Aqui eu estilizo a bolinha de cor do jogador. */
  width: 10px; /* Aqui eu defino a largura. */
  height: 10px; /* Aqui eu defino a altura. */
  border-radius: 50%; /* Aqui eu deixo redonda. */
  background: var(--ciano); /* Aqui eu pinto de ciano por padrão. */
  box-shadow: 0 0 10px currentColor; /* Aqui eu crio um brilho. */
} /* Aqui eu fecho o bloco da bolinha. */

.jogadores li.p2 i { /* Aqui eu pinto a bolinha do segundo jogador. */
  background: var(--magenta); /* Aqui eu uso magenta. */
} /* Aqui eu fecho o bloco do jogador 2. */

.jogadores li small { /* Aqui eu estilizo a etiqueta do jogador (anfitrião, você). */
  margin-left: auto; /* Aqui eu empurro para a direita. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
} /* Aqui eu fecho o bloco da etiqueta. */

/* ---------- HUD e arena ---------- */

.hud { /* Aqui eu estilizo a barra de informações da partida. */
  display: flex; /* Aqui eu uso flexbox. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  gap: 12px; /* Aqui eu espaço os itens. */
  margin-bottom: 12px; /* Aqui eu dou espaço abaixo. */
} /* Aqui eu fecho o bloco .hud. */

.hud-info { /* Aqui eu estilizo o texto do HUD. */
  display: flex; /* Aqui eu uso flexbox em coluna. */
  flex-direction: column; /* Aqui eu empilho modo e rodada. */
  min-width: 0; /* Aqui eu permito encolher. */
} /* Aqui eu fecho o bloco .hud-info. */

.hud-info b { /* Aqui eu estilizo o nome do modo. */
  font-size: 0.95rem; /* Aqui eu defino o tamanho. */
} /* Aqui eu fecho o bloco do nome do modo. */

.hud-info span { /* Aqui eu estilizo a rodada. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: 0.78rem; /* Aqui eu deixo pequeno. */
} /* Aqui eu fecho o bloco da rodada. */

.hud-modo { /* Aqui eu estilizo a área dinâmica do HUD (HP, tempo, placar). */
  display: flex; /* Aqui eu uso flexbox. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  gap: 10px; /* Aqui eu espaço os itens. */
  margin-left: auto; /* Aqui eu empurro para a direita. */
  min-width: 0; /* Aqui eu permito encolher. */
} /* Aqui eu fecho o bloco .hud-modo. */

.barra-hp { /* Aqui eu estilizo a barra de energia espacial (HP). */
  position: relative; /* Aqui eu permito posicionar o texto dentro. */
  width: clamp(110px, 30vw, 220px); /* Aqui eu defino uma largura fluida. */
  height: 22px; /* Aqui eu defino a altura. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border: 1px solid var(--borda2); /* Aqui eu desenho a borda. */
  border-radius: 999px; /* Aqui eu deixo em pílula. */
  overflow: hidden; /* Aqui eu corto o preenchimento no contorno. */
} /* Aqui eu fecho o bloco .barra-hp. */

.barra-hp b { /* Aqui eu estilizo o preenchimento do HP. */
  position: absolute; /* Aqui eu o posiciono dentro da barra. */
  inset: 0 auto 0 0; /* Aqui eu o encosto à esquerda, ocupando a altura toda. */
  width: 100%; /* Aqui eu começo cheio; o JavaScript ajusta. */
  background: linear-gradient(90deg, #1fb6ff, var(--ciano)); /* Aqui eu crio o degradê de energia. */
  box-shadow: 0 0 16px rgba(56, 216, 255, 0.6); /* Aqui eu crio o brilho neon. */
  transition: width 0.5s ease, background 0.3s; /* Aqui eu animo as mudanças. */
} /* Aqui eu fecho o bloco do preenchimento. */

.barra-hp.critico b { /* Aqui eu estilizo o HP crítico (abaixo de 30). */
  background: linear-gradient(90deg, #ff2d55, var(--erro)); /* Aqui eu pinto de vermelho. */
  box-shadow: 0 0 16px rgba(255, 93, 108, 0.7); /* Aqui eu crio o brilho vermelho. */
} /* Aqui eu fecho o bloco do HP crítico. */

.barra-hp span { /* Aqui eu estilizo o número dentro da barra. */
  position: absolute; /* Aqui eu o posiciono dentro da barra. */
  inset: 0; /* Aqui eu ocupo a barra toda. */
  display: grid; /* Aqui eu uso grid para centralizar. */
  place-items: center; /* Aqui eu centralizo o texto. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: 0.72rem; /* Aqui eu deixo pequeno. */
  font-weight: 700; /* Aqui eu deixo em negrito. */
  text-shadow: 0 1px 3px #000; /* Aqui eu crio uma sombra para ler sobre a barra. */
} /* Aqui eu fecho o bloco do número do HP. */

.pilula { /* Aqui eu estilizo pílulas de informação do HUD (combo, tempo, pontos). */
  padding: 5px 10px; /* Aqui eu dou espaço interno. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border: 1px solid var(--borda2); /* Aqui eu desenho a borda. */
  border-radius: 999px; /* Aqui eu deixo em pílula. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: 0.8rem; /* Aqui eu deixo pequeno. */
  font-weight: 700; /* Aqui eu deixo em negrito. */
  white-space: nowrap; /* Aqui eu impeço quebra de linha. */
} /* Aqui eu fecho o bloco .pilula. */

.pilula.ouro { /* Aqui eu pinto a pílula de dourado (combo). */
  color: var(--ouro); /* Aqui eu uso dourado. */
  border-color: rgba(255, 201, 74, 0.5); /* Aqui eu pinto a borda de dourado translúcido. */
} /* Aqui eu fecho o bloco da pílula dourada. */

.pilula.ciano { color: var(--ciano); border-color: rgba(56, 216, 255, 0.45); } /* Aqui eu pinto a pílula do jogador 1 de ciano. */
.pilula.magenta { color: var(--magenta); border-color: rgba(255, 79, 216, 0.45); } /* Aqui eu pinto a pílula do jogador 2 de magenta. */
.pilula.urgente { color: var(--erro); border-color: var(--erro); animation: pulso 0.6s infinite alternate; } /* Aqui eu faço a pílula de tempo piscar quando falta pouco. */

@keyframes pulso { /* Aqui eu defino a animação de pulso. */
  from { box-shadow: 0 0 0 rgba(255, 93, 108, 0); } /* Aqui eu começo sem brilho. */
  to { box-shadow: 0 0 14px rgba(255, 93, 108, 0.7); } /* Aqui eu termino com brilho vermelho. */
} /* Aqui eu fecho a animação de pulso. */

.arena { /* Aqui eu estilizo a arena de escala. */
  position: relative; /* Aqui eu permito posicionar as camadas dentro. */
  height: clamp(300px, 50vh, 540px); /* Aqui eu defino a altura fluida (fallback). */
  height: clamp(300px, 50dvh, 540px); /* Aqui eu uso a altura dinâmica do celular. */
  overflow: hidden; /* Aqui eu corto o que sair da arena. */
  background: radial-gradient(900px 380px at 50% 100%, rgba(56, 216, 255, 0.06), transparent 70%), #080b10; /* Aqui eu crio um brilho suave no chão sobre fundo escuro. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 18px; /* Aqui eu arredondo. */
  touch-action: none; /* Aqui eu impeço a página de rolar enquanto o dedo arrasta o objeto. */
  user-select: none; /* Aqui eu impeço de selecionar texto ao arrastar. */
  -webkit-user-select: none; /* Aqui eu repito o prefixo para o Safari. */
} /* Aqui eu fecho o bloco .arena. */

.arena.arrastavel { /* Aqui eu estilizo a arena quando o jogador pode arrastar. */
  cursor: ns-resize; /* Aqui eu mostro o cursor de redimensionar na vertical. */
} /* Aqui eu fecho o bloco da arena arrastável. */

#arena-canvas { /* Aqui eu estilizo o canvas da arena. */
  position: absolute; /* Aqui eu o posiciono sobre toda a arena. */
  inset: 0; /* Aqui eu ocupo a arena inteira. */
  width: 100%; /* Aqui eu defino a largura. */
  height: 100%; /* Aqui eu defino a altura. */
} /* Aqui eu fecho o bloco do canvas. */

.arena-objs, .arena-tags { /* Aqui eu estilizo as camadas de objetos e de avisos. */
  position: absolute; /* Aqui eu as posiciono sobre a arena. */
  inset: 0; /* Aqui eu ocupo a arena inteira. */
  pointer-events: none; /* Aqui eu deixo os toques passarem para a arena (arrasto). */
} /* Aqui eu fecho o bloco das camadas. */

.obj { /* Aqui eu estilizo cada ilustração de objeto na arena. */
  position: absolute; /* Aqui eu a posiciono livremente. */
  left: 0; /* Aqui eu fixo a origem à esquerda. */
  top: 0; /* Aqui eu fixo a origem no topo. */
  will-change: transform, width, height; /* Aqui eu aviso o navegador que isto muda a cada quadro. */
  transition: opacity 0.4s ease; /* Aqui eu suavizo o surgimento e o sumiço. */
} /* Aqui eu fecho o bloco .obj. */

.obj svg { /* Aqui eu estilizo o SVG dentro do objeto. */
  display: block; /* Aqui eu o trato como bloco. */
  width: 100%; /* Aqui eu ocupo a largura do contêiner. */
  height: 100%; /* Aqui eu ocupo a altura do contêiner. */
  overflow: visible; /* Aqui eu deixo contornos passarem da caixa. */
} /* Aqui eu fecho o bloco do SVG. */

.obj.cheio svg { /* Aqui eu estilizo o objeto totalmente iluminado (referência e revelado). */
  filter: drop-shadow(0 0 7px rgba(56, 216, 255, 0.3)); /* Aqui eu crio o brilho de contorno neon. */
} /* Aqui eu fecho o bloco do objeto cheio. */

.obj.xray svg { /* Aqui eu estilizo o modo Raio-X / Blueprint misterioso. */
  filter: drop-shadow(0 0 6px rgba(56, 216, 255, 0.7)); /* Aqui eu crio o brilho ciano forte. */
  animation: respira 2.4s ease-in-out infinite alternate; /* Aqui eu faço o blueprint "respirar". */
} /* Aqui eu fecho o bloco do raio-X. */

@keyframes respira { /* Aqui eu defino a animação de respiração do raio-X. */
  from { opacity: 0.78; } /* Aqui eu começo mais apagado. */
  to { opacity: 1; } /* Aqui eu termino totalmente visível. */
} /* Aqui eu fecho a animação de respiração. */

.obj.xray svg *, .obj.fant svg * { /* Aqui eu redesenho todas as partes do SVG como linhas de contorno. */
  fill: rgba(56, 216, 255, 0.07); /* Aqui eu uso um preenchimento ciano quase transparente. */
  stroke: var(--ciano); /* Aqui eu desenho o contorno em ciano. */
  stroke-width: 1.1px; /* Aqui eu defino a espessura do contorno. */
  vector-effect: non-scaling-stroke; /* Aqui eu mantenho a espessura constante em qualquer zoom. */
} /* Aqui eu fecho o bloco do contorno. */

.obj.xray svg [fill="none"], .obj.fant svg [fill="none"] { /* Aqui eu respeito as partes que originalmente não tinham preenchimento. */
  fill: none; /* Aqui eu mantenho sem preenchimento. */
} /* Aqui eu fecho o bloco do sem preenchimento. */

.obj.fant svg { /* Aqui eu estilizo as silhuetas fantasma (palpites e tamanho real na revelação). */
  filter: drop-shadow(0 0 8px currentColor); /* Aqui eu uso a cor do texto para o brilho. */
} /* Aqui eu fecho o bloco da silhueta fantasma. */

.obj.fant svg * { /* Aqui eu estilizo as partes da silhueta fantasma. */
  stroke-dasharray: 7 4; /* Aqui eu tracejo o contorno. */
  stroke-width: 1.8px; /* Aqui eu engrosso o contorno. */
} /* Aqui eu fecho o bloco das partes fantasma. */

.obj.ouro { color: var(--ouro); } /* Aqui eu defino a cor de brilho do tamanho real (ouro). */
.obj.ouro svg * { fill: rgba(255, 201, 74, 0.1); stroke: var(--ouro); } /* Aqui eu pinto o tamanho real de ouro. */
.obj.ciano { color: var(--ciano); } /* Aqui eu defino a cor de brilho do jogador 1. */
.obj.ciano svg * { fill: rgba(56, 216, 255, 0.1); stroke: var(--ciano); } /* Aqui eu pinto o palpite do jogador 1 de ciano. */
.obj.magenta { color: var(--magenta); } /* Aqui eu defino a cor de brilho do jogador 2. */
.obj.magenta svg * { fill: rgba(255, 79, 216, 0.1); stroke: var(--magenta); } /* Aqui eu pinto o palpite do jogador 2 de magenta. */
.obj.fant svg [fill="none"] { fill: none; } /* Aqui eu mantenho sem preenchimento as partes que não tinham. */

.obj.humano svg { /* Aqui eu estilizo o humano de 1,75 m para escala. */
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.45)); /* Aqui eu crio um brilho branco discreto. */
  opacity: 0.78; /* Aqui eu deixo o humano um pouco translúcido, para eu ainda enxergar o objeto que fica atrás dele. */
} /* Aqui eu fecho o bloco do humano. */

.arena-tags .tag-flutuante { /* Aqui eu estilizo os avisos flutuantes na arena. */
  position: absolute; /* Aqui eu os posiciono livremente. */
  left: 50%; /* Aqui eu os levo ao meio horizontal. */
  top: 14px; /* Aqui eu os afasto do topo. */
  transform: translateX(-50%); /* Aqui eu os centralizo. */
  padding: 7px 14px; /* Aqui eu dou espaço interno. */
  background: rgba(8, 11, 16, 0.85); /* Aqui eu uso fundo escuro translúcido. */
  border: 1px solid var(--magenta); /* Aqui eu desenho a borda magenta. */
  border-radius: 999px; /* Aqui eu deixo em pílula. */
  color: var(--magenta); /* Aqui eu pinto o texto de magenta. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: 0.78rem; /* Aqui eu deixo pequeno. */
  white-space: nowrap; /* Aqui eu impeço quebra de linha. */
  animation: entrada 0.2s ease both; /* Aqui eu aplico a entrada suave. */
} /* Aqui eu fecho o bloco do aviso flutuante. */

.arena-tags .ping-badge { /* Aqui eu estilizo o badge animado dos pings do casal. */
  position: absolute; /* Aqui eu o posiciono livremente. */
  left: 50%; /* Aqui eu o levo ao meio horizontal. */
  top: 38%; /* Aqui eu o coloco um pouco acima do centro. */
  transform: translate(-50%, -50%); /* Aqui eu o centralizo. */
  display: flex; /* Aqui eu alinho ícone e texto. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  gap: 10px; /* Aqui eu espaço ícone e texto. */
  padding: 12px 20px; /* Aqui eu dou espaço interno. */
  background: rgba(8, 11, 16, 0.9); /* Aqui eu uso fundo escuro. */
  border: 1px solid var(--ciano); /* Aqui eu desenho a borda ciano. */
  border-radius: 14px; /* Aqui eu arredondo. */
  color: var(--ciano); /* Aqui eu pinto o texto de ciano. */
  font-weight: 800; /* Aqui eu deixo pesado. */
  box-shadow: 0 0 26px rgba(56, 216, 255, 0.35); /* Aqui eu crio o brilho neon. */
  animation: badge 1.6s ease both; /* Aqui eu aplico a animação de aparecer e subir. */
} /* Aqui eu fecho o bloco do badge de ping. */

@keyframes badge { /* Aqui eu defino a animação do badge de ping. */
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.8); } /* Aqui eu começo invisível, pequeno e abaixo. */
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } /* Aqui eu apareço com um leve exagero. */
  80% { opacity: 1; transform: translate(-50%, -56%) scale(1); } /* Aqui eu fico visível subindo devagar. */
  100% { opacity: 0; transform: translate(-50%, -70%) scale(1); } /* Aqui eu sumo subindo. */
} /* Aqui eu fecho a animação do badge. */

.arena-tags .bionico { /* Aqui eu estilizo o texto do evento OLHO BIÔNICO. */
  position: absolute; /* Aqui eu o posiciono livremente. */
  left: 50%; /* Aqui eu o levo ao meio horizontal. */
  top: 30%; /* Aqui eu o coloco na parte alta. */
  transform: translate(-50%, -50%); /* Aqui eu o centralizo. */
  color: var(--ouro); /* Aqui eu pinto de dourado. */
  font-size: clamp(1.6rem, 7vw, 2.8rem); /* Aqui eu deixo o texto enorme e fluido. */
  font-weight: 900; /* Aqui eu deixo pesadíssimo. */
  letter-spacing: 0.08em; /* Aqui eu espaço as letras. */
  text-shadow: 0 0 30px rgba(255, 201, 74, 0.9); /* Aqui eu crio o brilho dourado. */
  white-space: nowrap; /* Aqui eu impeço quebra de linha. */
  animation: badge 2.4s ease both; /* Aqui eu reaproveito a animação do badge. */
} /* Aqui eu fecho o bloco do OLHO BIÔNICO. */

.arena-tags .aviso-centro { /* Aqui eu estilizo avisos centrais da arena (ex.: aguardando adversário). */
  position: absolute; /* Aqui eu o posiciono livremente. */
  inset: auto 0 14px 0; /* Aqui eu o coloco na parte baixa, esticado na horizontal. */
  text-align: center; /* Aqui eu centralizo o texto. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: 0.8rem; /* Aqui eu deixo pequeno. */
} /* Aqui eu fecho o bloco do aviso central. */

.legendas { /* Aqui eu estilizo a faixa de legendas. */
  display: grid; /* Aqui eu uso grid. */
  grid-template-columns: 1fr 1fr; /* Aqui eu crio duas colunas iguais. */
  gap: 8px; /* Aqui eu espaço as colunas. */
  margin: 10px 0; /* Aqui eu dou espaço acima e abaixo. */
} /* Aqui eu fecho o bloco .legendas. */

.leg { /* Aqui eu estilizo cada legenda. */
  display: flex; /* Aqui eu uso flexbox em coluna. */
  flex-direction: column; /* Aqui eu empilho rótulo e valor. */
  min-width: 0; /* Aqui eu permito encolher. */
  padding: 10px 12px; /* Aqui eu dou espaço interno. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 12px; /* Aqui eu arredondo. */
} /* Aqui eu fecho o bloco .leg. */

.leg small { /* Aqui eu estilizo o rótulo da legenda. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: 0.66rem; /* Aqui eu deixo minúsculo. */
  letter-spacing: 0.1em; /* Aqui eu espaço as letras. */
  text-transform: uppercase; /* Aqui eu escrevo em maiúsculas. */
} /* Aqui eu fecho o bloco do rótulo. */

.leg b { /* Aqui eu estilizo o valor da legenda. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada para os números de engenharia. */
  font-size: 0.86rem; /* Aqui eu defino o tamanho. */
  overflow-wrap: anywhere; /* Aqui eu deixo o texto quebrar em duas linhas em vez de ser cortado com reticências. */
} /* Aqui eu fecho o bloco do valor. */

/* ---------- Controles ---------- */

.controles { /* Aqui eu estilizo as áreas de controle. */
  display: flex; /* Aqui eu uso flexbox em coluna. */
  flex-direction: column; /* Aqui eu empilho. */
  gap: 12px; /* Aqui eu espaço os itens. */
} /* Aqui eu fecho o bloco .controles. */

.ajuste { /* Aqui eu estilizo a linha do slider e dos botões de 1%. */
  display: flex; /* Aqui eu uso flexbox. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  gap: 10px; /* Aqui eu espaço os itens. */
} /* Aqui eu fecho o bloco .ajuste. */

input[type="range"] { /* Aqui eu estilizo o slider. */
  -webkit-appearance: none; /* Aqui eu removo o visual padrão do Chrome e Safari. */
  appearance: none; /* Aqui eu removo o visual padrão dos demais. */
  flex: 1; /* Aqui eu o estico entre os botões. */
  height: 48px; /* Aqui eu faço uma área de toque alta. */
  background: transparent; /* Aqui eu deixo o fundo transparente. */
  margin: 0; /* Aqui eu removo as margens. */
  touch-action: pan-y; /* Aqui eu deixo o dedo mover o slider sem a página rolar de lado. */
} /* Aqui eu fecho o bloco do slider. */

input[type="range"]::-webkit-slider-runnable-track { /* Aqui eu estilizo a trilha (Chrome e Safari). */
  height: 6px; /* Aqui eu defino a espessura. */
  background: linear-gradient(90deg, var(--borda2), var(--ciano)); /* Aqui eu crio um degradê que sugere crescimento. */
  border-radius: 3px; /* Aqui eu arredondo as pontas. */
} /* Aqui eu fecho o bloco da trilha webkit. */

input[type="range"]::-moz-range-track { /* Aqui eu estilizo a trilha (Firefox). */
  height: 6px; /* Aqui eu defino a espessura. */
  background: linear-gradient(90deg, var(--borda2), var(--ciano)); /* Aqui eu crio o mesmo degradê. */
  border-radius: 3px; /* Aqui eu arredondo as pontas. */
} /* Aqui eu fecho o bloco da trilha Firefox. */

input[type="range"]::-webkit-slider-thumb { /* Aqui eu estilizo a bolinha (Chrome e Safari). */
  -webkit-appearance: none; /* Aqui eu removo o visual padrão. */
  width: 30px; /* Aqui eu defino a largura. */
  height: 30px; /* Aqui eu defino a altura. */
  margin-top: -12px; /* Aqui eu a centralizo sobre a trilha de 6px. */
  border-radius: 50%; /* Aqui eu a deixo redonda. */
  background: #fff; /* Aqui eu a pinto de branco. */
  border: 3px solid var(--ciano); /* Aqui eu desenho o anel ciano. */
  box-shadow: 0 0 16px rgba(56, 216, 255, 0.7); /* Aqui eu crio o brilho neon. */
} /* Aqui eu fecho o bloco da bolinha webkit. */

input[type="range"]::-moz-range-thumb { /* Aqui eu estilizo a bolinha (Firefox). */
  width: 24px; /* Aqui eu defino a largura (o Firefox soma a borda). */
  height: 24px; /* Aqui eu defino a altura. */
  border-radius: 50%; /* Aqui eu a deixo redonda. */
  background: #fff; /* Aqui eu a pinto de branco. */
  border: 3px solid var(--ciano); /* Aqui eu desenho o anel ciano. */
  box-shadow: 0 0 16px rgba(56, 216, 255, 0.7); /* Aqui eu crio o brilho neon. */
} /* Aqui eu fecho o bloco da bolinha Firefox. */

input[type="range"]:disabled { /* Aqui eu estilizo o slider travado. */
  opacity: 0.35; /* Aqui eu o apago. */
} /* Aqui eu fecho o bloco do slider travado. */

.pings { /* Aqui eu estilizo a linha de pings do casal. */
  display: grid; /* Aqui eu uso grid. */
  grid-template-columns: repeat(2, 1fr); /* Aqui eu crio duas colunas no celular. */
  gap: 8px; /* Aqui eu espaço os botões. */
} /* Aqui eu fecho o bloco .pings. */

.ping { /* Aqui eu estilizo cada botão de ping. */
  display: inline-flex; /* Aqui eu alinho ícone e texto. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  justify-content: center; /* Aqui eu centralizo na horizontal. */
  gap: 8px; /* Aqui eu espaço ícone e texto. */
  min-height: 44px; /* Aqui eu garanto a área de toque. */
  padding: 8px 10px; /* Aqui eu dou espaço interno. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border: 1px solid var(--borda2); /* Aqui eu desenho a borda. */
  border-radius: 12px; /* Aqui eu arredondo. */
  font-size: 0.82rem; /* Aqui eu deixo pequeno. */
  font-weight: 700; /* Aqui eu deixo em negrito. */
} /* Aqui eu fecho o bloco .ping. */

.ping .ic { color: var(--ciano); } /* Aqui eu pinto o ícone do ping de ciano. */
.ping:active { background: var(--painel2); border-color: var(--ciano); } /* Aqui eu destaco o ping no toque. */

.lab-linha { /* Aqui eu estilizo as linhas dos controles do laboratório. */
  display: flex; /* Aqui eu uso flexbox. */
  gap: 10px; /* Aqui eu espaço os itens. */
  flex-wrap: wrap; /* Aqui eu permito quebrar linha. */
} /* Aqui eu fecho o bloco .lab-linha. */

.lab-linha label { /* Aqui eu estilizo os rótulos dos seletores. */
  flex: 1 1 200px; /* Aqui eu deixo flexível com base de 200px. */
  display: flex; /* Aqui eu uso flexbox em coluna. */
  flex-direction: column; /* Aqui eu empilho rótulo e seletor. */
  gap: 4px; /* Aqui eu espaço o rótulo do seletor. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: 0.72rem; /* Aqui eu deixo pequeno. */
  text-transform: uppercase; /* Aqui eu escrevo em maiúsculas. */
} /* Aqui eu fecho o bloco dos rótulos. */

.lab-linha .botao { /* Aqui eu estilizo os botões do laboratório. */
  flex: 1 1 140px; /* Aqui eu os deixo flexíveis. */
} /* Aqui eu fecho o bloco dos botões do laboratório. */

.lab-linha label { min-width: 0; } /* Aqui eu permito que o rótulo encolha para o seletor não estourar a largura da tela. */

select { /* Aqui eu estilizo os seletores. */
  width: 100%; /* Aqui eu limito o seletor à largura do rótulo. */
  min-width: 0; /* Aqui eu permito encolher abaixo da largura do texto mais longo. */
  text-overflow: ellipsis; /* Aqui eu mostro reticências se o texto da opção não couber. */
  min-height: 48px; /* Aqui eu garanto a área de toque. */
  padding: 0 12px; /* Aqui eu dou espaço lateral. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border: 1px solid var(--borda2); /* Aqui eu desenho a borda. */
  border-radius: 12px; /* Aqui eu arredondo. */
  font-size: 1rem; /* Aqui eu uso 16px para o iPhone não dar zoom. */
  text-transform: none; /* Aqui eu mantenho o texto normal dentro do seletor. */
} /* Aqui eu fecho o bloco dos seletores. */

/* ---------- Revelação ---------- */

.revelacao { /* Aqui eu estilizo o painel de revelação (escondido por padrão). */
  display: none; /* Aqui eu o escondo. */
  flex-direction: column; /* Aqui eu empilho o conteúdo quando visível. */
  gap: 12px; /* Aqui eu espaço os itens. */
  padding: 16px; /* Aqui eu dou espaço interno. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 18px; /* Aqui eu arredondo. */
} /* Aqui eu fecho o bloco .revelacao. */

.revelacao.visivel { /* Aqui eu mostro o painel quando ele recebe a classe "visivel". */
  display: flex; /* Aqui eu o exibo. */
  animation: entrada 0.3s ease both; /* Aqui eu aplico a entrada suave. */
} /* Aqui eu fecho o bloco do painel visível. */

.rev-topo { /* Aqui eu estilizo o topo do painel. */
  display: flex; /* Aqui eu uso flexbox. */
  gap: 14px; /* Aqui eu espaço os itens. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  flex-wrap: wrap; /* Aqui eu permito quebrar linha. */
} /* Aqui eu fecho o bloco .rev-topo. */

.rev-pontos { /* Aqui eu estilizo o bloco dos pontos ganhos. */
  display: flex; /* Aqui eu uso flexbox em coluna. */
  flex-direction: column; /* Aqui eu empilho número e frase. */
} /* Aqui eu fecho o bloco .rev-pontos. */

.rev-pontos b { /* Aqui eu estilizo o número de pontos. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: 2.4rem; /* Aqui eu deixo grande. */
  line-height: 1; /* Aqui eu aperto a altura da linha. */
  color: var(--ouro); /* Aqui eu pinto de dourado. */
  text-shadow: 0 0 22px rgba(255, 201, 74, 0.4); /* Aqui eu crio o brilho dourado. */
} /* Aqui eu fecho o bloco do número de pontos. */

.rev-pontos small { /* Aqui eu estilizo a frase sob os pontos. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  font-size: 0.82rem; /* Aqui eu deixo pequeno. */
} /* Aqui eu fecho o bloco da frase. */

.rev-dados { /* Aqui eu estilizo a lista de dados numéricos. */
  display: grid; /* Aqui eu uso grid. */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* Aqui eu crio três colunas iguais que podem encolher. */
  gap: 8px; /* Aqui eu espaço as colunas. */
  flex: 1 1 260px; /* Aqui eu a deixo flexível. */
  margin: 0; /* Aqui eu removo as margens. */
} /* Aqui eu fecho o bloco .rev-dados. */

.rev-dados div { /* Aqui eu estilizo cada célula de dado. */
  padding: 8px 10px; /* Aqui eu dou espaço interno. */
  background: var(--bg); /* Aqui eu uso fundo escuro. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 10px; /* Aqui eu arredondo. */
  text-align: center; /* Aqui eu centralizo. */
} /* Aqui eu fecho o bloco das células. */

.rev-dados dt { /* Aqui eu estilizo o nome do dado. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: 0.64rem; /* Aqui eu deixo minúsculo. */
  text-transform: uppercase; /* Aqui eu escrevo em maiúsculas. */
  letter-spacing: 0.1em; /* Aqui eu espaço as letras. */
} /* Aqui eu fecho o bloco do nome do dado. */

.rev-dados dd { /* Aqui eu estilizo o valor do dado. */
  margin: 2px 0 0; /* Aqui eu removo o recuo padrão. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-weight: 700; /* Aqui eu deixo em negrito. */
  font-size: 0.9rem; /* Aqui eu defino o tamanho. */
} /* Aqui eu fecho o bloco do valor do dado. */

.selo-colecao { /* Aqui eu estilizo o aviso de card desbloqueado. */
  margin: 0; /* Aqui eu removo as margens. */
  padding: 8px 12px; /* Aqui eu dou espaço interno. */
  background: linear-gradient(90deg, rgba(255, 201, 74, 0.18), transparent); /* Aqui eu crio um degradê dourado. */
  border-left: 3px solid var(--ouro); /* Aqui eu desenho a barra dourada à esquerda. */
  border-radius: 6px; /* Aqui eu arredondo. */
  color: var(--ouro); /* Aqui eu pinto de dourado. */
  font-weight: 700; /* Aqui eu deixo em negrito. */
  font-size: 0.88rem; /* Aqui eu deixo um pouco menor. */
} /* Aqui eu fecho o bloco do selo. */

.selo-colecao:empty { /* Aqui eu escondo o selo quando está vazio. */
  display: none; /* Aqui eu o escondo. */
} /* Aqui eu fecho o bloco do selo vazio. */

.rev-corpo { /* Aqui eu estilizo o corpo da revelação (foto e curiosidade). */
  display: flex; /* Aqui eu uso flexbox. */
  gap: 14px; /* Aqui eu espaço os itens. */
  align-items: flex-start; /* Aqui eu alinho ao topo. */
  flex-wrap: wrap; /* Aqui eu permito quebrar linha em telas estreitas. */
} /* Aqui eu fecho o bloco .rev-corpo. */

.curiosidade { /* Aqui eu estilizo o texto da curiosidade. */
  flex: 1 1 220px; /* Aqui eu o deixo flexível. */
  margin: 0; /* Aqui eu removo as margens. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  font-size: 0.92rem; /* Aqui eu defino o tamanho. */
} /* Aqui eu fecho o bloco .curiosidade. */

.rev-botoes { /* Aqui eu estilizo a linha de botões da revelação. */
  display: flex; /* Aqui eu uso flexbox. */
  gap: 10px; /* Aqui eu espaço os botões. */
  flex-wrap: wrap; /* Aqui eu permito quebrar linha. */
} /* Aqui eu fecho o bloco .rev-botoes. */

.rev-botoes .botao { /* Aqui eu estilizo os botões da revelação. */
  flex: 1 1 160px; /* Aqui eu os deixo flexíveis. */
} /* Aqui eu fecho o bloco dos botões da revelação. */

/* ---------- Card fotográfico real ---------- */

.card-foto { /* Aqui eu estilizo o Card Fotográfico Real. */
  position: relative; /* Aqui eu permito posicionar os cantos técnicos. */
  width: 210px; /* Aqui eu defino a largura. */
  max-width: 100%; /* Aqui eu impeço de passar da tela. */
  margin: 0; /* Aqui eu removo as margens padrão do figure. */
  padding: 6px; /* Aqui eu dou espaço para a moldura técnica. */
  background: var(--bg); /* Aqui eu uso fundo escuro. */
  border: 1px solid var(--borda2); /* Aqui eu desenho a borda técnica. */
  border-radius: 10px; /* Aqui eu arredondo. */
} /* Aqui eu fecho o bloco .card-foto. */

.card-foto::before, .card-foto::after { /* Aqui eu desenho marcas de canto estilo prancha técnica. */
  content: ""; /* Aqui eu crio pseudo-elementos vazios. */
  position: absolute; /* Aqui eu os posiciono nos cantos. */
  width: 12px; /* Aqui eu defino a largura. */
  height: 12px; /* Aqui eu defino a altura. */
  border: 2px solid var(--ciano); /* Aqui eu desenho a borda ciano. */
} /* Aqui eu fecho o bloco das marcas de canto. */

.card-foto::before { /* Aqui eu desenho a marca do canto superior esquerdo. */
  top: -2px; /* Aqui eu a posiciono acima. */
  left: -2px; /* Aqui eu a posiciono à esquerda. */
  border-right: 0; /* Aqui eu removo o lado direito. */
  border-bottom: 0; /* Aqui eu removo o lado de baixo. */
} /* Aqui eu fecho o bloco do canto superior. */

.card-foto::after { /* Aqui eu desenho a marca do canto inferior direito. */
  bottom: -2px; /* Aqui eu a posiciono abaixo. */
  right: -2px; /* Aqui eu a posiciono à direita. */
  border-left: 0; /* Aqui eu removo o lado esquerdo. */
  border-top: 0; /* Aqui eu removo o lado de cima. */
} /* Aqui eu fecho o bloco do canto inferior. */

.card-foto-moldura { /* Aqui eu estilizo a moldura da foto. */
  display: grid; /* Aqui eu uso grid para centralizar. */
  place-items: center; /* Aqui eu centralizo a imagem. */
  aspect-ratio: 4 / 3; /* Aqui eu fixo a proporção para o card não pular quando a foto chega. */
  overflow: hidden; /* Aqui eu corto o excesso da foto. */
  background: #0a0d12; /* Aqui eu uso um fundo escuro. */
  border-radius: 6px; /* Aqui eu arredondo. */
} /* Aqui eu fecho o bloco da moldura. */

.card-foto-moldura img { /* Aqui eu estilizo a foto real. */
  width: 100%; /* Aqui eu ocupo a largura da moldura. */
  height: 100%; /* Aqui eu ocupo a altura da moldura. */
  object-fit: cover; /* Aqui eu preencho a moldura cortando o excesso. */
} /* Aqui eu fecho o bloco da foto. */

.card-foto-reserva { /* Aqui eu estilizo a silhueta de reserva enquanto a foto carrega. */
  width: 70%; /* Aqui eu limito a largura. */
  height: 70%; /* Aqui eu limito a altura. */
  display: grid; /* Aqui eu uso grid para centralizar. */
  place-items: center; /* Aqui eu centralizo o SVG. */
} /* Aqui eu fecho o bloco da reserva. */

.card-foto-reserva svg { /* Aqui eu estilizo o SVG da reserva. */
  max-width: 100%; /* Aqui eu limito a largura. */
  max-height: 100%; /* Aqui eu limito a altura. */
} /* Aqui eu fecho o bloco do SVG da reserva. */

.card-foto-reserva.xray svg * { /* Aqui eu desenho a reserva em modo blueprint. */
  fill: rgba(56, 216, 255, 0.07); /* Aqui eu uso preenchimento ciano leve. */
  stroke: var(--ciano); /* Aqui eu uso contorno ciano. */
  stroke-width: 1px; /* Aqui eu defino a espessura. */
  vector-effect: non-scaling-stroke; /* Aqui eu mantenho a espessura constante. */
} /* Aqui eu fecho o bloco da reserva em blueprint. */

.card-foto-reserva.xray svg [fill="none"] { fill: none; } /* Aqui eu respeito as partes sem preenchimento. */

.card-foto figcaption { /* Aqui eu estilizo a legenda do card. */
  display: flex; /* Aqui eu uso flexbox em coluna. */
  flex-direction: column; /* Aqui eu empilho as linhas. */
  gap: 1px; /* Aqui eu espaço as linhas. */
  padding: 8px 4px 2px; /* Aqui eu dou espaço interno. */
} /* Aqui eu fecho o bloco da legenda do card. */

.card-foto figcaption strong { font-size: 0.9rem; } /* Aqui eu defino o tamanho do nome no card. */
.card-foto figcaption span { color: var(--ciano); font-family: var(--mono); font-size: 0.78rem; } /* Aqui eu estilizo a medida no card. */
.card-foto figcaption small { color: var(--suave); font-size: 0.64rem; } /* Aqui eu estilizo o crédito no card. */

.card-foto.ouro { /* Aqui eu estilizo o Card Dourado da coleção desbloqueada. */
  border-color: var(--ouro); /* Aqui eu pinto a borda de dourado. */
  background: linear-gradient(160deg, rgba(255, 201, 74, 0.14), var(--bg) 55%); /* Aqui eu crio um degradê dourado. */
  box-shadow: 0 0 24px rgba(255, 201, 74, 0.15); /* Aqui eu crio um brilho dourado. */
} /* Aqui eu fecho o bloco do card dourado. */

.card-foto.ouro::before, .card-foto.ouro::after { border-color: var(--ouro); } /* Aqui eu pinto os cantos do card dourado de dourado. */
.card-foto.ouro figcaption span { color: var(--ouro); } /* Aqui eu pinto a medida do card dourado de dourado. */

/* ---------- Resultado final ---------- */

.fim-titulo { /* Aqui eu estilizo o título do resultado. */
  margin: 0; /* Aqui eu removo as margens. */
  font-size: clamp(1.6rem, 6vw, 2.4rem); /* Aqui eu deixo o título fluido. */
  letter-spacing: -0.03em; /* Aqui eu aperto as letras. */
} /* Aqui eu fecho o bloco .fim-titulo. */

.fim-destaque { /* Aqui eu estilizo o número principal do resultado. */
  display: flex; /* Aqui eu uso flexbox em coluna. */
  flex-direction: column; /* Aqui eu empilho número e rótulo. */
  align-items: center; /* Aqui eu centralizo. */
  margin: 18px 0; /* Aqui eu dou espaço acima e abaixo. */
  padding: 22px; /* Aqui eu dou espaço interno. */
  background: radial-gradient(400px 160px at 50% 0, rgba(56, 216, 255, 0.14), transparent), var(--painel); /* Aqui eu crio um brilho ciano no topo. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 20px; /* Aqui eu arredondo. */
} /* Aqui eu fecho o bloco .fim-destaque. */

.fim-destaque b { /* Aqui eu estilizo o número grande. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: clamp(3rem, 16vw, 5rem); /* Aqui eu deixo o número gigante e fluido. */
  line-height: 1; /* Aqui eu aperto a altura da linha. */
  color: var(--ciano); /* Aqui eu pinto de ciano. */
  text-shadow: 0 0 32px rgba(56, 216, 255, 0.5); /* Aqui eu crio o brilho neon. */
} /* Aqui eu fecho o bloco do número grande. */

.fim-destaque small { /* Aqui eu estilizo o rótulo do número grande. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  letter-spacing: 0.14em; /* Aqui eu espaço as letras. */
  text-transform: uppercase; /* Aqui eu escrevo em maiúsculas. */
  font-size: 0.74rem; /* Aqui eu deixo pequeno. */
} /* Aqui eu fecho o bloco do rótulo. */

.fim-metricas { /* Aqui eu estilizo as métricas secundárias. */
  display: grid; /* Aqui eu uso grid. */
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); /* Aqui eu crio colunas automáticas. */
  gap: 8px; /* Aqui eu espaço as colunas. */
} /* Aqui eu fecho o bloco .fim-metricas. */

.fim-metricas div { /* Aqui eu estilizo cada métrica. */
  padding: 12px; /* Aqui eu dou espaço interno. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 12px; /* Aqui eu arredondo. */
} /* Aqui eu fecho o bloco das métricas. */

.fim-metricas small { /* Aqui eu estilizo o rótulo da métrica. */
  display: block; /* Aqui eu o trato como bloco. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: 0.64rem; /* Aqui eu deixo minúsculo. */
  text-transform: uppercase; /* Aqui eu escrevo em maiúsculas. */
  letter-spacing: 0.1em; /* Aqui eu espaço as letras. */
} /* Aqui eu fecho o bloco do rótulo da métrica. */

.fim-metricas b { /* Aqui eu estilizo o valor da métrica. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: 1.1rem; /* Aqui eu defino o tamanho. */
} /* Aqui eu fecho o bloco do valor da métrica. */

.fim-lista { /* Aqui eu estilizo a lista de barras de precisão. */
  list-style: none; /* Aqui eu removo as bolinhas. */
  margin: 14px 0; /* Aqui eu dou espaço acima e abaixo. */
  padding: 0; /* Aqui eu removo o recuo. */
  display: flex; /* Aqui eu uso flexbox em coluna. */
  flex-direction: column; /* Aqui eu empilho. */
  gap: 6px; /* Aqui eu espaço os itens. */
} /* Aqui eu fecho o bloco .fim-lista. */

.fim-lista li { /* Aqui eu estilizo cada linha de barra. */
  display: grid; /* Aqui eu uso grid. */
  grid-template-columns: 22px 1fr 52px; /* Aqui eu crio colunas: número, barra e porcentagem. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  gap: 10px; /* Aqui eu espaço as colunas. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-size: 0.82rem; /* Aqui eu deixo pequeno. */
} /* Aqui eu fecho o bloco das linhas de barra. */

.fim-lista .trilha { /* Aqui eu estilizo a trilha da barra. */
  height: 10px; /* Aqui eu defino a espessura. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border-radius: 5px; /* Aqui eu arredondo. */
  overflow: hidden; /* Aqui eu corto o preenchimento. */
} /* Aqui eu fecho o bloco da trilha. */

.fim-lista .trilha i { /* Aqui eu estilizo o preenchimento da barra. */
  display: block; /* Aqui eu o trato como bloco. */
  height: 100%; /* Aqui eu ocupo a altura da trilha. */
  background: linear-gradient(90deg, var(--ciano), var(--ok)); /* Aqui eu crio o degradê de precisão. */
  border-radius: 5px; /* Aqui eu arredondo. */
} /* Aqui eu fecho o bloco do preenchimento. */

.fim-botoes { /* Aqui eu estilizo a linha de botões finais. */
  display: flex; /* Aqui eu uso flexbox. */
  gap: 10px; /* Aqui eu espaço os botões. */
  flex-wrap: wrap; /* Aqui eu permito quebrar linha. */
} /* Aqui eu fecho o bloco .fim-botoes. */

.fim-botoes .botao { /* Aqui eu estilizo cada botão final. */
  flex: 1 1 180px; /* Aqui eu os deixo flexíveis. */
} /* Aqui eu fecho o bloco dos botões finais. */

/* ---------- Coleção ---------- */

.barra-progresso { /* Aqui eu estilizo a barra de progresso da coleção. */
  height: 8px; /* Aqui eu defino a espessura. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border-radius: 4px; /* Aqui eu arredondo. */
  overflow: hidden; /* Aqui eu corto o preenchimento. */
  margin-bottom: 18px; /* Aqui eu dou espaço abaixo. */
} /* Aqui eu fecho o bloco .barra-progresso. */

.barra-progresso b { /* Aqui eu estilizo o preenchimento da barra de progresso. */
  display: block; /* Aqui eu o trato como bloco. */
  height: 100%; /* Aqui eu ocupo a altura da trilha. */
  width: 0; /* Aqui eu começo vazio; o JavaScript define a largura. */
  background: linear-gradient(90deg, var(--ouro), #ffe9a8); /* Aqui eu crio o degradê dourado. */
  transition: width 0.6s ease; /* Aqui eu animo o crescimento. */
} /* Aqui eu fecho o bloco do preenchimento. */

.colecao { /* Aqui eu estilizo a grade da coleção. */
  display: grid; /* Aqui eu uso grid. */
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* Aqui eu crio colunas automáticas de no mínimo 140px. */
  gap: 10px; /* Aqui eu espaço os cartões. */
} /* Aqui eu fecho o bloco .colecao. */

.item-colecao { /* Aqui eu estilizo cada item da coleção. */
  display: flex; /* Aqui eu uso flexbox em coluna. */
  flex-direction: column; /* Aqui eu empilho. */
  align-items: center; /* Aqui eu centralizo. */
  gap: 6px; /* Aqui eu espaço os itens. */
  padding: 10px; /* Aqui eu dou espaço interno. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 12px; /* Aqui eu arredondo. */
  text-align: center; /* Aqui eu centralizo o texto. */
} /* Aqui eu fecho o bloco .item-colecao. */

.item-colecao .arte { /* Aqui eu estilizo a área da ilustração do item. */
  display: grid; /* Aqui eu uso grid para centralizar. */
  place-items: end center; /* Aqui eu alinho a ilustração pela base. */
  width: 100%; /* Aqui eu uso toda a largura. */
  height: 84px; /* Aqui eu defino a altura. */
} /* Aqui eu fecho o bloco da arte. */

.item-colecao .arte svg { /* Aqui eu estilizo o SVG da arte. */
  max-width: 100%; /* Aqui eu limito a largura. */
  max-height: 100%; /* Aqui eu limito a altura. */
  overflow: visible; /* Aqui eu deixo contornos passarem. */
} /* Aqui eu fecho o bloco do SVG da arte. */

.item-colecao b { font-size: 0.8rem; } /* Aqui eu defino o tamanho do nome do item. */
.item-colecao small { color: var(--suave); font-family: var(--mono); font-size: 0.68rem; } /* Aqui eu estilizo a legenda do item. */

.item-colecao.bloqueado .arte svg * { /* Aqui eu pinto a silhueta bloqueada de escuro. */
  fill: #0a0d12; /* Aqui eu uso um preenchimento quase preto. */
  stroke: #1d2735; /* Aqui eu uso um contorno discreto. */
} /* Aqui eu fecho o bloco da silhueta bloqueada. */

.item-colecao.bloqueado .arte svg [fill="none"] { fill: none; } /* Aqui eu respeito as partes sem preenchimento. */
.item-colecao.bloqueado b { color: var(--suave); } /* Aqui eu apago o nome do item bloqueado. */

.item-colecao.dourado { /* Aqui eu estilizo o item desbloqueado (Card Dourado). */
  border-color: var(--ouro); /* Aqui eu pinto a borda de dourado. */
  background: linear-gradient(160deg, rgba(255, 201, 74, 0.14), var(--painel) 60%); /* Aqui eu crio o degradê dourado. */
  cursor: pointer; /* Aqui eu mostro a mãozinha, pois o item é clicável. */
} /* Aqui eu fecho o bloco do item dourado. */

.item-colecao.dourado small { color: var(--ouro); } /* Aqui eu pinto a legenda do item dourado. */

/* ---------- Ranking ---------- */

.seletor { /* Aqui eu estilizo o seletor de rankings. */
  display: flex; /* Aqui eu uso flexbox. */
  gap: 6px; /* Aqui eu espaço os botões. */
  flex-wrap: wrap; /* Aqui eu permito quebrar linha. */
  margin-bottom: 14px; /* Aqui eu dou espaço abaixo. */
} /* Aqui eu fecho o bloco .seletor. */

.sel { /* Aqui eu estilizo cada botão do seletor. */
  padding: 9px 14px; /* Aqui eu dou espaço interno. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 999px; /* Aqui eu deixo em pílula. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
  font-weight: 700; /* Aqui eu deixo em negrito. */
  font-size: 0.85rem; /* Aqui eu deixo pequeno. */
} /* Aqui eu fecho o bloco .sel. */

.sel.ativo { /* Aqui eu estilizo o botão ativo. */
  color: #04141a; /* Aqui eu uso texto escuro. */
  background: var(--ciano); /* Aqui eu pinto de ciano. */
  border-color: var(--ciano); /* Aqui eu pinto a borda de ciano. */
} /* Aqui eu fecho o bloco do botão ativo. */

.ranking { /* Aqui eu estilizo a lista do ranking. */
  list-style: none; /* Aqui eu removo a numeração padrão. */
  margin: 0; /* Aqui eu removo as margens. */
  padding: 0; /* Aqui eu removo o recuo. */
  display: flex; /* Aqui eu uso flexbox em coluna. */
  flex-direction: column; /* Aqui eu empilho. */
  gap: 6px; /* Aqui eu espaço os itens. */
  counter-reset: pos; /* Aqui eu reinicio o contador de posições. */
} /* Aqui eu fecho o bloco .ranking. */

.ranking li { /* Aqui eu estilizo cada linha do ranking. */
  counter-increment: pos; /* Aqui eu incremento o contador. */
  display: grid; /* Aqui eu uso grid. */
  grid-template-columns: 34px 1fr auto; /* Aqui eu crio colunas: posição, jogador e pontos. */
  align-items: center; /* Aqui eu centralizo na vertical. */
  gap: 10px; /* Aqui eu espaço as colunas. */
  padding: 12px 14px; /* Aqui eu dou espaço interno. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 12px; /* Aqui eu arredondo. */
} /* Aqui eu fecho o bloco das linhas do ranking. */

.ranking li::before { /* Aqui eu escrevo a posição usando o contador. */
  content: counter(pos); /* Aqui eu mostro o número da posição. */
  font-family: var(--mono); /* Aqui eu uso a fonte monoespaçada. */
  font-weight: 800; /* Aqui eu deixo pesado. */
  color: var(--suave); /* Aqui eu uso a cor suave. */
} /* Aqui eu fecho o bloco da posição. */

.ranking li:nth-child(1)::before { color: var(--ouro); } /* Aqui eu pinto o 1º lugar de dourado. */
.ranking li:nth-child(2)::before { color: #cfd8e3; } /* Aqui eu pinto o 2º lugar de prata. */
.ranking li:nth-child(3)::before { color: #d9985a; } /* Aqui eu pinto o 3º lugar de bronze. */
.ranking li small { display: block; color: var(--suave); font-size: 0.74rem; } /* Aqui eu estilizo a linha de detalhes do jogador. */
.ranking li b.pts { font-family: var(--mono); color: var(--ciano); } /* Aqui eu estilizo os pontos. */

/* ---------- Modal e toast ---------- */

.modal { /* Aqui eu estilizo o fundo do modal. */
  position: fixed; /* Aqui eu o fixo sobre a tela. */
  inset: 0; /* Aqui eu cubro a tela inteira. */
  z-index: 100; /* Aqui eu o coloco acima de tudo. */
  display: grid; /* Aqui eu uso grid para centralizar. */
  place-items: center; /* Aqui eu centralizo a caixa. */
  padding: 16px; /* Aqui eu deixo uma folga nas bordas. */
  background: rgba(3, 5, 8, 0.78); /* Aqui eu escureço o fundo. */
  backdrop-filter: blur(6px); /* Aqui eu desfoco o que está atrás. */
} /* Aqui eu fecho o bloco .modal. */

.modal[hidden] { /* Aqui eu escondo o modal quando tem o atributo hidden. */
  display: none; /* Aqui eu o escondo (o display:grid acima venceria o atributo sem esta regra). */
} /* Aqui eu fecho o bloco do modal escondido. */

.modal-caixa { /* Aqui eu estilizo a caixa do modal. */
  position: relative; /* Aqui eu permito posicionar o botão de fechar. */
  width: min(420px, 100%); /* Aqui eu limito a largura. */
  max-height: 90vh; /* Aqui eu limito a altura. */
  overflow: auto; /* Aqui eu permito rolar se o conteúdo for grande. */
  padding: 22px; /* Aqui eu dou espaço interno. */
  background: var(--painel); /* Aqui eu uso fundo de painel. */
  border: 1px solid var(--borda2); /* Aqui eu desenho a borda. */
  border-radius: 20px; /* Aqui eu arredondo. */
} /* Aqui eu fecho o bloco .modal-caixa. */

.modal-fechar { /* Aqui eu estilizo o botão de fechar do modal. */
  position: absolute; /* Aqui eu o posiciono no canto. */
  top: 10px; /* Aqui eu o afasto do topo. */
  right: 10px; /* Aqui eu o afasto da direita. */
  width: 40px; /* Aqui eu defino a largura. */
  height: 40px; /* Aqui eu defino a altura. */
} /* Aqui eu fecho o bloco do botão de fechar. */

.modal-caixa h3 { margin: 0 0 8px; font-size: 1.2rem; } /* Aqui eu estilizo o título do modal. */
.modal-caixa p { color: var(--suave); } /* Aqui eu estilizo os parágrafos do modal. */
.modal-caixa .card-foto { margin: 12px auto; width: 260px; } /* Aqui eu centralizo o card dentro do modal. */

.patentes { /* Aqui eu estilizo a lista de patentes no modal. */
  list-style: none; /* Aqui eu removo as bolinhas. */
  margin: 12px 0 0; /* Aqui eu dou espaço acima. */
  padding: 0; /* Aqui eu removo o recuo. */
  display: flex; /* Aqui eu uso flexbox em coluna. */
  flex-direction: column; /* Aqui eu empilho. */
  gap: 6px; /* Aqui eu espaço os itens. */
} /* Aqui eu fecho o bloco .patentes. */

.patentes li { /* Aqui eu estilizo cada patente. */
  display: flex; /* Aqui eu uso flexbox. */
  justify-content: space-between; /* Aqui eu separo nome e XP. */
  padding: 10px 12px; /* Aqui eu dou espaço interno. */
  background: var(--bg); /* Aqui eu uso fundo escuro. */
  border: 1px solid var(--borda); /* Aqui eu desenho a borda. */
  border-radius: 10px; /* Aqui eu arredondo. */
  font-size: 0.88rem; /* Aqui eu deixo um pouco menor. */
} /* Aqui eu fecho o bloco das patentes. */

.patentes li.atual { border-color: var(--ouro); color: var(--ouro); } /* Aqui eu destaco a patente atual. */
.patentes li small { color: var(--suave); font-family: var(--mono); } /* Aqui eu estilizo o XP necessário. */

.toast { /* Aqui eu estilizo o aviso rápido. */
  position: fixed; /* Aqui eu o fixo sobre a tela. */
  left: 50%; /* Aqui eu o levo ao meio horizontal. */
  bottom: calc(24px + env(safe-area-inset-bottom)); /* Aqui eu o coloco embaixo, acima da área segura. */
  transform: translate(-50%, 20px); /* Aqui eu o centralizo e o escondo um pouco abaixo. */
  z-index: 120; /* Aqui eu o coloco acima do modal. */
  max-width: calc(100% - 32px); /* Aqui eu limito a largura à tela. */
  padding: 12px 18px; /* Aqui eu dou espaço interno. */
  background: var(--painel2); /* Aqui eu uso fundo de painel. */
  border: 1px solid var(--ciano); /* Aqui eu desenho a borda ciano. */
  border-radius: 12px; /* Aqui eu arredondo. */
  font-size: 0.9rem; /* Aqui eu defino o tamanho. */
  opacity: 0; /* Aqui eu o escondo. */
  pointer-events: none; /* Aqui eu deixo os toques passarem. */
  transition: opacity 0.2s, transform 0.2s; /* Aqui eu animo a entrada e a saída. */
} /* Aqui eu fecho o bloco .toast. */

.toast.visivel { /* Aqui eu mostro o toast. */
  opacity: 1; /* Aqui eu o deixo visível. */
  transform: translate(-50%, 0); /* Aqui eu o levo à posição final. */
} /* Aqui eu fecho o bloco do toast visível. */

/* ---------- Responsivo ---------- */

@media (max-width: 640px) { /* Aqui eu abro as regras para celulares. */
  .aba span { display: none; } /* Aqui eu escondo o texto das abas, mantendo só os ícones. */
  .aba { padding: 9px; } /* Aqui eu reduzo o espaço das abas. */
  #txt-patente { display: none; } /* Aqui eu escondo o nome da patente no celular (ficam a estrela e a barra de XP) para a barra não estourar a largura. */
  .status { gap: 6px; min-width: 0; } /* Aqui eu aperto o espaço entre os indicadores. */
  .chip { padding: 7px 9px; } /* Aqui eu reduzo o espaço interno dos indicadores. */
  .topo { gap: 8px; padding: 8px 12px; } /* Aqui eu aperto a barra superior. */
  .marca span { display: none; } /* Aqui eu escondo o ".com.br" para sobrar espaço. */
  .hero { padding: 22px 16px; } /* Aqui eu reduzo o espaço do destaque. */
  .rev-dados { flex-basis: 100%; } /* Aqui eu faço os dados ocuparem a linha toda. */
  .card-foto { width: 100%; } /* Aqui eu faço o card ocupar a largura toda. */
} /* Aqui eu fecho as regras de celular. */

@media (min-width: 720px) { /* Aqui eu abro as regras para telas maiores. */
  .pings { grid-template-columns: repeat(4, 1fr); } /* Aqui eu mostro os 4 pings em uma só linha. */
} /* Aqui eu fecho as regras de tela grande. */

@media (prefers-reduced-motion: reduce) { /* Aqui eu respeito quem pediu menos animação no sistema. */
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } /* Aqui eu praticamente desligo todas as animações. */
} /* Aqui eu fecho a regra de movimento reduzido. */