/* ============================================================================
   GAME PMES 2026 — Design System "Centro de Comando Tático"
   Parte 2A — base reutilizável do front.
   Estetica: academia militar / HUD tatico. Grafite + ambar-honra + verde-go.
   Tipografia: Oswald (display, caixa-alta) · Barlow (corpo) · JetBrains Mono (dados).
   ============================================================================ */

/* ----------------------------------------------------------------- tokens -- */
:root {
  /* superficies (grafite com leve verde) */
  --base-900: #0a0d0c;   /* fundo da pagina            */
  --base-800: #0f1311;   /* faixas elevadas            */
  --base-700: #141a17;   /* cartoes                    */
  --base-600: #1b2320;   /* hover / campos             */
  --linha:    rgba(232, 234, 230, 0.09);
  --linha-forte: rgba(232, 234, 230, 0.16);

  /* tinta */
  --tinta:    #e9ece8;
  --tinta-2:  #aab4ae;   /* secundaria  */
  --tinta-3:  #6f7b75;   /* terciaria   */

  /* acentos */
  --ambar:    #f4a900;   /* honra / acao primaria      */
  --ambar-2:  #ffc23d;   /* hover                      */
  --ambar-sombra: rgba(244, 169, 0, 0.28);
  --verde:    #41c178;   /* aprovado / online / go     */
  --verde-2:  #6fe0a0;
  --vermelho: #e2574c;   /* bloqueado / erro / perigo  */
  --vermelho-2: #ff7a70;

  /* tipografia */
  --fonte-display: "Oswald", "Arial Narrow", sans-serif;
  --fonte-corpo:   "Barlow", system-ui, sans-serif;
  --fonte-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* medidas */
  --raio:    4px;        /* cantos retos, tatico       */
  --raio-sm: 3px;
  --gap:     clamp(1rem, 2.5vw, 1.6rem);
  --larg-max: 72rem;
  --sombra-fundo: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
}

/* ------------------------------------------------------------------ reset -- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100vh;
  font-family: var(--fonte-corpo);
  font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.05rem);
  line-height: 1.6;
  color: var(--tinta);
  background-color: var(--base-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* atmosfera: grid topografico + brilho tatico + grão sutil */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image:
    linear-gradient(var(--linha) 1px, transparent 1px),
    linear-gradient(90deg, var(--linha) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 35%, transparent 100%);
  opacity: 0.5;
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(60% 50% at 50% -8%, rgba(244, 169, 0, 0.10), transparent 70%),
    radial-gradient(40% 40% at 100% 0%, rgba(65, 193, 120, 0.06), transparent 70%);
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ------------------------------------------------------------- tipografia -- */
h1, h2, h3, .display {
  font-family: var(--fonte-display);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
h1 { font-size: clamp(2.2rem, 1.6rem + 3.4vw, 4.2rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.3rem); }
h3 { font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem); }

p { color: var(--tinta-2); max-width: 62ch; }

/* kicker: rotulo de secao tatico */
.kicker {
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ambar);
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.kicker::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  background: var(--ambar);
}

.mono { font-family: var(--fonte-mono); }
.fraco { color: var(--tinta-3); }
.realce { color: var(--ambar); }

/* ----------------------------------------------------------------- layout -- */
.container {
  width: 100%;
  max-width: var(--larg-max);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 2.5rem);
}
.secao { padding-block: clamp(2.5rem, 6vw, 5rem); }
.pilha   { display: flex; flex-direction: column; gap: var(--gap); }
.pilha-sm { display: flex; flex-direction: column; gap: 0.7rem; }
.linha-flex { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.grade {
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

/* --------------------------------------------------------------- botões ---- */
.btn {
  --cor: var(--ambar);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  padding: 0.72rem 1.4rem;
  font-family: var(--fonte-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--base-900);
  background: var(--cor);
  border: 1px solid var(--cor);
  border-radius: var(--raio);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
  /* canto cortado tatico */
  clip-path: polygon(0 0, calc(100% - 0.6rem) 0, 100% 0.6rem, 100% 100%, 0.6rem 100%, 0 calc(100% - 0.6rem));
}
.btn:hover { background: var(--ambar-2); transform: translateY(-2px); box-shadow: 0 10px 24px -8px var(--ambar-sombra); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn--fantasma {
  color: var(--tinta);
  background: transparent;
  border-color: var(--linha-forte);
  clip-path: none;
}
.btn--fantasma:hover { background: var(--base-600); border-color: var(--tinta-3); box-shadow: none; color: var(--tinta); }

.btn--perigo { --cor: var(--vermelho); color: #fff; }
.btn--perigo:hover { background: var(--vermelho-2); box-shadow: 0 10px 24px -8px rgba(226,87,76,0.35); }

.btn--bloco { width: 100%; }
.btn--sm { padding: 0.5rem 1rem; font-size: 0.82rem; }

/* --------------------------------------------------------------- formulário */
.campo { display: flex; flex-direction: column; gap: 0.4rem; }
.campo > label {
  font-family: var(--fonte-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-2);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 0.74rem 0.9rem;
  background: var(--base-800);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-sm);
  color: var(--tinta);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.campo input::placeholder { color: var(--tinta-3); }
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--ambar);
  background: var(--base-700);
  box-shadow: 0 0 0 3px var(--ambar-sombra);
}
.campo--erro input { border-color: var(--vermelho); }
.campo .dica { font-size: 0.78rem; color: var(--tinta-3); }
.campo .erro-campo { font-size: 0.8rem; color: var(--vermelho-2); min-height: 1rem; }

/* -------------------------------------------- tabela (admin de usuários) --- */
.tabela-rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio-sm); }
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 640px;
}
.tabela thead th {
  text-align: left;
  font-family: var(--fonte-mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-2);
  padding: 0.7rem 0.9rem;
  background: var(--base-800);
  border-bottom: 1px solid var(--linha-forte);
  white-space: nowrap;
}
.tabela tbody td {
  padding: 0.62rem 0.9rem;
  border-bottom: 1px solid var(--linha);
  vertical-align: middle;
}
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela tbody tr:hover { background: var(--base-800); }
.tabela .adm-nome { font-weight: 600; min-width: 160px; }
.tabela .adm-nome__input {
  width: 100%;
  padding: 0.45rem 0.6rem;
  background: var(--base-900);
  border: 1px solid var(--ambar);
  border-radius: var(--raio-sm);
  color: var(--tinta);
  font: inherit;
}
.tabela .adm-nome__input:focus { outline: none; box-shadow: 0 0 0 3px var(--ambar-sombra); }
.tabela td:last-child { white-space: nowrap; text-align: right; }
.tabela td:last-child .btn { margin-left: 0.35rem; }

/* ----------------------------------------------------------------- cartão -- */
.cartao {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02), transparent 40%),
    var(--base-700);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  padding: clamp(1.2rem, 3vw, 1.8rem);
  overflow: hidden;
}
/* barra de destaque no topo */
.cartao::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--ambar), transparent 60%);
  opacity: 0.9;
}
/* ticks de canto */
.cartao::after {
  content: "";
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  width: 0.9rem; height: 0.9rem;
  border-top: 2px solid var(--linha-forte);
  border-right: 2px solid var(--linha-forte);
}
.cartao--verde::before { background: linear-gradient(90deg, var(--verde), transparent 60%); }
.cartao--travado::before { background: repeating-linear-gradient(45deg, var(--vermelho) 0 10px, #1a1413 10px 20px); opacity: 0.8; }
.cartao__titulo { font-family: var(--fonte-display); text-transform: uppercase; letter-spacing: 0.02em; }

/* ----------------------------------------------------------- selos / chips -- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.28rem 0.65rem;
  font-family: var(--fonte-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-2);
  background: var(--base-600);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
}
.selo--ambar  { color: var(--ambar);   border-color: var(--ambar-sombra); background: rgba(244,169,0,0.08); }
.selo--verde  { color: var(--verde-2); border-color: rgba(65,193,120,0.3); background: rgba(65,193,120,0.08); }
.selo--vermelho { color: var(--vermelho-2); border-color: rgba(226,87,76,0.3); background: rgba(226,87,76,0.08); }

/* niveis (patentes) */
.nivel-tag { font-family: var(--fonte-mono); font-size: 0.7rem; letter-spacing: 0.14em; }

/* ----------------------------------------------------------------- avisos -- */
.aviso {
  display: flex;
  gap: 0.7rem;
  padding: 0.85rem 1.1rem;
  border: 1px solid var(--linha-forte);
  border-left-width: 3px;
  border-radius: var(--raio-sm);
  background: var(--base-700);
  font-size: 0.92rem;
  color: var(--tinta-2);
}
.aviso--erro { border-left-color: var(--vermelho); }
.aviso--ok   { border-left-color: var(--verde); }
.aviso--info { border-left-color: var(--ambar); }
.aviso[hidden] { display: none; }

/* status com ponto pulsante */
.status { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--fonte-mono); font-size: 0.85rem; }
.ponto { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--tinta-3); flex: none; }
.ponto--ok { background: var(--verde); box-shadow: 0 0 0 0 rgba(65,193,120,0.6); animation: pulso 2.2s infinite; }
.ponto--erro { background: var(--vermelho); }
@keyframes pulso {
  0%   { box-shadow: 0 0 0 0 rgba(65,193,120,0.55); }
  70%  { box-shadow: 0 0 0 0.5rem rgba(65,193,120,0); }
  100% { box-shadow: 0 0 0 0 rgba(65,193,120,0); }
}

/* --------------------------------------------------------- barra progresso - */
.barra {
  position: relative;
  height: 0.5rem;
  background: var(--base-600);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  overflow: hidden;
}
.barra__preench {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: linear-gradient(90deg, var(--ambar), var(--ambar-2));
  border-radius: 999px;
  transition: width 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.barra--verde .barra__preench { background: linear-gradient(90deg, var(--verde), var(--verde-2)); }
.barra--travada .barra__preench { background: var(--tinta-3); }

/* rótulo de dado numérico (mono) — ex.: "0 / 17 subtemas" */
.dado {
  font-family: var(--fonte-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--tinta-2);
}
.dado b { color: var(--tinta); font-weight: 600; }

/* ---------------------------------------------------------- painel: níveis -- */
/* faixa de patentes (status dos 4 níveis) */
.patentes { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.patente {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.95rem 1rem;
  background: var(--base-700);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--tinta-3);
  border-radius: var(--raio);
}
.patente--atual    { border-left-color: var(--ambar);    background: rgba(244,169,0,0.06); }
.patente--completo { border-left-color: var(--verde); }
.patente--travado  { border-left-color: var(--vermelho); opacity: 0.72; }
.patente__nome { font-family: var(--fonte-display); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.patente__topo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }

/* card de matéria (escolha do jogador) */
.materia__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.materia__corpo { display: flex; flex-direction: column; gap: 0.7rem; margin: 0.9rem 0 1.1rem; }

/* ------------------------------------------------------------------- quiz -- */
.quiz { max-width: 46rem; }
.quiz__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.quiz__topo h2 { margin-top: 0.4rem; }
.quiz__enunciado { color: var(--tinta); font-size: 1.05rem; line-height: 1.55; white-space: pre-line; }

/* opções de resposta (selecionáveis) — reutilizadas na correção (3D) */
.opcoes { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.2rem; }
.opcao {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  padding: 0.85rem 1rem;
  background: var(--base-800);
  color: var(--tinta);
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-sm);
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
button.opcao { cursor: pointer; }
button.opcao:hover { border-color: var(--tinta-3); background: var(--base-600); }
.opcao:focus-visible { outline: 2px solid var(--ambar); outline-offset: 2px; }
.opcao--sel { border-color: var(--ambar); background: rgba(244,169,0,0.08); box-shadow: inset 0 0 0 1px var(--ambar); }
.opcao__letra {
  flex: none;
  width: 1.8rem; height: 1.8rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--fonte-display); font-weight: 600;
  background: var(--base-600); color: var(--tinta-2);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-sm);
}
.opcao--sel .opcao__letra { background: var(--ambar); color: var(--base-900); border-color: var(--ambar); }
.opcao__texto { padding-top: 0.15rem; }

/* correção comentada (3D) — estados certo/errado + análise por alternativa */
.opcao__corpo { display: flex; flex-direction: column; gap: 0.3rem; flex: 1; min-width: 0; }
.opcao__analise { font-size: 0.83rem; color: var(--tinta-3); line-height: 1.45; }
.opcao__tag {
  display: inline-block; margin-left: 0.45rem; padding: 0.05rem 0.45rem;
  font-family: var(--fonte-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--linha-forte); border-radius: 999px; color: var(--tinta-2); vertical-align: middle;
}
.opcao__tag--ok { color: var(--verde-2); border-color: rgba(65,193,120,0.4); }
.opcao--correta { border-color: var(--verde); background: rgba(65,193,120,0.08); }
.opcao--correta .opcao__letra { background: var(--verde); color: var(--base-900); border-color: var(--verde); }
.opcao--errada { border-color: var(--vermelho); background: rgba(226,87,76,0.08); }
.opcao--errada .opcao__letra { background: var(--vermelho); color: #fff; border-color: var(--vermelho); }
.corr__topo { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.cartao--erro::before { background: linear-gradient(90deg, var(--vermelho), transparent 60%); }

/* barra de navegação da rodada */
.quiz__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }

/* tela de resultado (simples — 3C; enriquecida na 3D) */
.quiz__resultado { text-align: center; }
.quiz__nota { font-family: var(--fonte-display); font-weight: 700; line-height: 1; font-size: clamp(3rem, 2rem + 6vw, 5rem); }
.quiz__nota--ok { color: var(--verde); }
.quiz__nota--nao { color: var(--vermelho); }

/* ------------------------------------------------------- certificados (4) -- */
.cert-nivel { }
.cert-nivel__topo { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.cert-nivel__nome { font-family: var(--fonte-display); text-transform: uppercase; letter-spacing: 0.03em; font-weight: 600; font-size: 1.15rem; }
.cert-grade { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.cert {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: rgba(65,193,120,0.06);
  border: 1px solid rgba(65,193,120,0.28);
  border-left: 3px solid var(--verde);
  border-radius: var(--raio);
}
.cert__medalha {
  flex: none;
  width: 2.2rem; height: 2.2rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  color: var(--base-900); background: var(--verde);
  border-radius: 50%;
}
.cert__corpo { min-width: 0; }
.cert__titulo { font-weight: 600; color: var(--tinta); display: block; }
.cert--vazio {
  padding: 1rem 1.1rem;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio);
  color: var(--tinta-3);
  font-size: 0.9rem;
}

/* -------------------------------------------------------------- shell/nav -- */
.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(10, 13, 12, 0.82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linha);
}
.topo__interno {
  max-width: var(--larg-max);
  margin-inline: auto;
  padding: 0.7rem clamp(1.1rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 0.75rem;
}
.marca { display: inline-flex; align-items: center; gap: 0.65rem; min-width: 0; flex: 0 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--fonte-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.marca > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.marca__emblema { width: 2rem; height: 2rem; flex: none; }
.marca small { display: block; font-family: var(--fonte-mono); font-size: 0.6rem; letter-spacing: 0.24em; color: var(--tinta-3); font-weight: 500; }
.nav { flex: 0 0 auto; display: flex; align-items: center; gap: 0.4rem; }
.nav__link {
  padding: 0.45rem 0.8rem;
  font-family: var(--fonte-mono);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-2);
  border-radius: var(--raio-sm);
  transition: color 0.15s, background 0.15s;
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--ambar); background: var(--base-700); }
.nav__usuario { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--fonte-mono); font-size: 0.8rem; color: var(--tinta-2); }

/* ------------------------------------------------------------ autenticação - */
/* layout centrado das telas de login/cadastro */
.auth {
  min-height: calc(100vh - 4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.1rem, 4vw, 2.5rem);
}
.auth__caixa { width: 100%; max-width: 26rem; }
.auth__cabec { text-align: center; margin-bottom: 1.6rem; }
.auth__cabec h1 { font-size: clamp(1.8rem, 1.4rem + 2vw, 2.4rem); }
.auth__cabec p { color: var(--tinta-2); margin-inline: auto; }
.auth .cartao { padding: clamp(1.4rem, 4vw, 2.2rem); }
.auth form { display: flex; flex-direction: column; gap: 1.05rem; }
.auth__rodape {
  text-align: center;
  margin-top: 1.3rem;
  font-family: var(--fonte-mono);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--tinta-3);
}
.auth__rodape a { color: var(--ambar); }
.auth__rodape a:hover { color: var(--ambar-2); text-decoration: underline; }

/* campo de senha com botão de mostrar/ocultar */
.entrada-senha { position: relative; display: block; }
.entrada-senha input { padding-right: 3rem; }
.olho {
  position: absolute;
  right: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--raio-sm);
  color: var(--tinta-3);
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.olho:hover { color: var(--ambar); background: var(--base-600); }
.olho:focus-visible { outline: 2px solid var(--ambar); outline-offset: 1px; }
.olho svg { width: 1.15rem; height: 1.15rem; }

/* spinner no botão durante envio */
.btn[aria-busy="true"] { pointer-events: none; opacity: 0.7; }
.giro {
  width: 1rem; height: 1rem; flex: none;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: gira 0.7s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }

/* -------------------------------------------------------------- rodapé ----- */
.rodape { border-top: 1px solid var(--linha); color: var(--tinta-3); font-family: var(--fonte-mono); font-size: 0.78rem; letter-spacing: 0.08em; }

/* --------------------------------------------------------- reveal animação -- */
.revela { opacity: 0; transform: translateY(14px); animation: revelaSobe 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
@keyframes revelaSobe { to { opacity: 1; transform: none; } }
.d1 { animation-delay: 0.05s; }
.d2 { animation-delay: 0.15s; }
.d3 { animation-delay: 0.25s; }
.d4 { animation-delay: 0.35s; }
.d5 { animation-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto; }
  .revela { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------- perfil ---- */
/* Parte 5: ficha do recruta, cartões de estatística e histórico de rodadas. */
.ficha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
  flex-wrap: wrap;
}
.ficha__id { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.ficha__avatar {
  flex: none;
  width: 3.4rem; height: 3.4rem;
  display: grid; place-items: center;
  font-family: var(--fonte-display);
  font-size: 1.6rem; font-weight: 600;
  color: var(--ambar);
  background: rgba(244, 169, 0, 0.08);
  border: 1px solid var(--ambar-sombra);
  border-radius: var(--raio);
}

/* cartões de estatística (visão geral) */
.stat { display: flex; flex-direction: column; gap: 0.15rem; }
.stat__rotulo {
  font-family: var(--fonte-mono);
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tinta-3);
}
.stat__valor {
  font-family: var(--fonte-display);
  font-size: clamp(2rem, 6vw, 2.6rem);
  font-weight: 600; line-height: 1.05;
  color: var(--ambar);
}
.stat__valor--md { font-size: clamp(1.6rem, 5vw, 2rem); }
.stat__valor--texto { font-size: clamp(1.3rem, 4vw, 1.7rem); text-transform: uppercase; letter-spacing: 0.02em; }
.stat__un { font-size: 0.55em; color: var(--tinta-3); margin-left: 0.1em; }

/* histórico de rodadas */
.hist-lista { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; }
.hist {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--base-700);
  border: 1px solid var(--linha);
  border-left: 3px solid var(--tinta-3);
  border-radius: var(--raio);
}
.hist--ok  { border-left-color: var(--verde); }
.hist--nao { border-left-color: var(--vermelho); }
.hist__info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; }
.hist__titulo { font-family: var(--fonte-display); text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.98rem; }
.hist__nota { display: flex; flex-direction: column; align-items: flex-end; gap: 0.1rem; flex: none; }
.hist__pct { font-family: var(--fonte-display); font-size: 1.3rem; font-weight: 600; color: var(--tinta); }
.hist--ok .hist__pct  { color: var(--verde-2); }
.hist--nao .hist__pct { color: var(--vermelho-2); }

/* -------------------------------------------------------------- ranking ---- */
/* Parte 6: filtros (chips) + placar do leaderboard. */
.filtros { display: flex; flex-direction: column; gap: 0.6rem; }
.filtro { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  font-family: var(--fonte-mono);
  font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.06em;
  padding: 0.4rem 0.8rem;
  color: var(--tinta-2);
  background: var(--base-700);
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.chip:hover { color: var(--tinta); border-color: var(--tinta-3); }
.chip--ativo {
  color: var(--base-900);
  background: var(--ambar);
  border-color: var(--ambar);
}

.rank-lista { list-style: none; display: flex; flex-direction: column; gap: 0.45rem; counter-reset: rank; }
.rank {
  display: flex; align-items: center; gap: 0.9rem;
  padding: 0.7rem 1rem;
  background: var(--base-700);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
}
.rank--podio { border-color: var(--ambar-sombra); }
.rank--eu { background: rgba(244, 169, 0, 0.07); border-color: var(--ambar-sombra); }
.rank--solto { margin-top: 0.2rem; }
.rank__pos {
  flex: none;
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  font-family: var(--fonte-display); font-weight: 600; font-size: 1rem;
  color: var(--tinta-2);
  background: var(--base-600);
  border: 1px solid var(--linha-forte);
  border-radius: 50%;
}
.rank__pos--ouro   { color: #1a1205; background: var(--ambar);    border-color: var(--ambar); }
.rank__pos--prata  { color: #11140f; background: #c9d1cc;          border-color: #c9d1cc; }
.rank__pos--bronze { color: #1a1205; background: #c8863f;          border-color: #c8863f; }
.rank__nome {
  flex: 1; min-width: 0;
  font-family: var(--fonte-display); text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 0.98rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rank__cert { flex: none; }
.rank__pts {
  flex: none;
  font-family: var(--fonte-display); font-weight: 600; font-size: 1.25rem;
  color: var(--ambar);
}
.rank--eu .rank__pts { color: var(--ambar-2); }
.eu-fora { /* faixa da posição do próprio usuário quando fora do top */ }

/* ----------------------------------------------------------- responsivo --- */
@media (max-width: 640px) {
  .rank { gap: 0.6rem; padding: 0.6rem 0.7rem; }
  .rank__nome { font-size: 0.88rem; }
  .hist { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .hist__nota { flex-direction: row; align-items: baseline; gap: 0.5rem; }
  .nav { gap: 0.3rem; }
  .nav__link { padding: 0.4rem 0.55rem; }
  .marca { font-size: 0.85rem; }
  .marca__emblema { width: 1.7rem; height: 1.7rem; }
  .marca small { display: none; }
  .topo__interno { padding-inline: 1rem; gap: 0.6rem; }
  .topo .btn--sm { padding: 0.42rem 0.72rem; font-size: 0.72rem; }
  .esconde-mobile { display: none !important; }
}