/* =========================================================================
   GEARPOLIS — identidade visual
   Portada de prototype/fraction-foundry-demo.html, que é a spec de gameplay
   e de estética do M1. A arquitetura de skin é a do blueprint §5: o tema é
   uma camada de CSS variables e nada mais. `:root` é Gearpolis ⚙ (o padrão);
   `body[data-theme="cosmos"]` é Astropolis 🪐 e sobrescreve SÓ variáveis.
   Regra de disciplina: se um tema novo precisar mudar mecânica, não é tema.
   ========================================================================= */

:root {
  --bg: #0b1626;
  --panel: #122338;
  --panel2: #0e1c2e;
  --line: #24405e;
  --copper: #c9834a;
  --brass: #e8a34e;
  --amber: #ffb347;
  --cyan: #41d8de;
  --green: #62d992;
  --red: #ff7373;
  --purple: #b07ae0;
  --text: #eaf2fb;
  --dim: #9db4cc;
  --btn1: #ffb347;
  --btn2: #c9834a;
  --btnEdge: #7a4d24;
  --btnText: #241503;
  --glow: rgba(255, 179, 71, .5);
  --halo1: rgba(255, 179, 71, .10);
  --halo2: rgba(65, 216, 222, .10);
  --sky1: #0d1a2d;
  --sky2: #0b1626;
  --sky3: #091220;
}

body[data-theme="cosmos"] {
  --bg: #070d1c;
  --panel: #10182f;
  --panel2: #0b1226;
  --line: #2a3a63;
  --copper: #7c6ce0;
  --brass: #a78bfa;
  --amber: #ffd166;
  --cyan: #41d8de;
  --text: #eef1ff;
  --dim: #a8b3d6;
  --btn1: #ffd166;
  --btn2: #c9a13a;
  --btnEdge: #7a5f1a;
  --btnText: #1b1403;
  --glow: rgba(255, 209, 102, .5);
  --halo1: rgba(167, 139, 250, .12);
  --halo2: rgba(65, 216, 222, .10);
  --sky1: #0a1226;
  --sky2: #070d1c;
  --sky3: #050916;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

/* `[hidden]` PRECISA deste reset, e o `!important` e obrigatorio.
   O atributo so esconde por uma regra do NAVEGADOR (`[hidden] { display: none }`), e
   qualquer regra de autor ganha dela — inclusive `.btn { display: inline-block }`, oito
   secoes abaixo. Resultado: todo botao do jogo que se escondia por `hidden` continuava na
   tela, clicavel, com 161x44 pixels de area. O chefe do distrito podia ser vencido com UM
   clique, sem cortar nem preencher nada: 3 estrelas e o badge por adivinhar. Nao e
   preferencia de estilo; e a diferenca entre a barreira existir e nao existir. */
[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  background:
    radial-gradient(900px 500px at 12% -10%, var(--halo1), transparent 60%),
    radial-gradient(900px 600px at 105% 110%, var(--halo2), transparent 60%),
    linear-gradient(180deg, var(--sky1) 0%, var(--sky2) 60%, var(--sky3) 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  overflow-x: hidden;
}

/* Engrenagens decorativas de fundo. Ficam escondidas no tema cosmos — o mesmo
   corte que o protótipo faz. */
.bg-gear {
  position: fixed;
  opacity: .06;
  z-index: 0;
  pointer-events: none;
  animation: gearspin 60s linear infinite;
}

.bg-gear.g1 { width: 340px; top: -120px; right: -100px; }
.bg-gear.g2 { width: 260px; bottom: -90px; left: -80px; animation-duration: 45s; animation-direction: reverse; }

body[data-theme="cosmos"] .bg-gear { display: none; }

@keyframes gearspin {
  to { transform: rotate(360deg); }
}

/* Acessibilidade: quem pediu menos movimento não recebe engrenagem girando
   (também vale para a E6, que cobra acessibilidade básica). */
@media (prefers-reduced-motion: reduce) {
  .bg-gear { animation: none; }
}

.layout {
  position: relative;
  z-index: 1;
  max-width: 980px;
  margin: 0 auto;
  padding: 14px 14px 40px;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .04);
}

/* ======= Tarja de ambiente ======= */
/* Aparece em tudo que não é Production. O App Service do M1 é compartilhado com
   um site que já fatura (Caminho B), então saber em que ambiente a tela está não
   é luxo. Nunca visível para uma criança: em produção este bloco nem é renderizado. */
.tarja-ambiente {
  position: relative;
  z-index: 2;
  background: repeating-linear-gradient(135deg, var(--brass), var(--brass) 12px, var(--copper) 12px, var(--copper) 24px);
  color: #241503;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 10px;
}

/* ======= Tela de título ======= */
.title-wrap {
  text-align: center;
  padding: 34px 16px 10px;
}

.logo {
  font-size: clamp(40px, 8vw, 66px);
  font-weight: 900;
  letter-spacing: 3px;
  margin: 0;
  background: linear-gradient(180deg, #ffd28a, var(--brass) 55%, var(--copper));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .2);
}

.logo-sub {
  color: var(--cyan);
  font-weight: 800;
  letter-spacing: 5px;
  font-size: clamp(13px, 2.6vw, 17px);
  margin-top: 4px;
  text-transform: uppercase;
}

.tagline {
  color: var(--dim);
  max-width: 560px;
  margin: 16px auto 8px;
  font-size: 16px;
  font-style: italic;
}

.footer-note {
  color: #5c7896;
  font-size: 12px;
  margin-top: 22px;
}

.lucas-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 26px;
}

.lucas-name {
  color: var(--dim);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 3px;
  margin-top: 6px;
  text-align: center;
}

.bubble {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
  max-width: 420px;
  text-align: left;
  font-size: 16px;
}

.bubble strong {
  color: var(--amber);
}

/* ======= Botões ======= */
.btn {
  /* `font-family: inherit` explícito: `button`, `input`, `select` e `textarea` trazem `font`
     do stylesheet do NAVEGADOR, então não herdam do ancestral como uma `div` herda. Sem esta
     linha o botão cai para a fonte default (Arial, 13.33px) e o resto da regra fica de enfeite. */
  font-family: inherit;
  font-weight: 800;
  font-size: 17px;
  line-height: 1;
  letter-spacing: .4px;
  color: var(--btnText);
  background: linear-gradient(180deg, var(--btn1), var(--btn2));
  border: 0;
  border-radius: 12px;
  padding: 14px 22px;
  cursor: pointer;
  display: inline-block;
  text-decoration: none;
  /* Alvo de toque de 44px é requisito da E6; o padding acima já garante. */
  min-height: 44px;
  box-shadow: 0 4px 0 var(--btnEdge), 0 8px 18px rgba(0, 0, 0, .35);
  transition: transform .08s ease, filter .15s ease;
  user-select: none;
}

.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--btnEdge); }
.btn:disabled { filter: grayscale(.9) brightness(.7); cursor: not-allowed; transform: none; }

/* As duas variantes moravam no `jogo.css` ate 18/08, e a folha do jogo so e carregada pela
   pagina da fase. Toda tela sem bundle que escrevia `class="btn ghost small"` - o Workshop e o
   mapa do distrito - recebia as classes e NENHUMA regra: o botao de voltar saia com o brilho do
   botao principal, e virava o elemento mais chamativo de uma tela de recompensa. Nada quebrava.
   Variante generica de botao pertence a folha de identidade, nao a folha do palco. */
.btn.ghost {
  background: transparent;
  color: var(--dim);
  box-shadow: none;
  border: 1px dashed var(--line);
  font-weight: 600;
}

.btn.small {
  padding: 10px 14px;
  font-size: 14px;
}

/* Foco visível em TUDO que recebe foco — não só nos botões. */
:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
}

a {
  color: var(--cyan);
}

.center {
  text-align: center;
}

/* ======= Barra de conta ======= */
.barra-conta {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 4px;
  font-size: 14px;
  flex-wrap: wrap;
}

.barra-conta .marca {
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--brass);
  text-decoration: none;
  margin-right: auto;
}

.barra-conta-usuario {
  color: var(--dim);
}

.barra-conta-sair {
  display: inline;
  margin: 0;
}

.link-botao {
  background: none;
  border: 0;
  color: var(--cyan);
  font: inherit;
  cursor: pointer;
  padding: 10px 4px;
  text-decoration: underline;
}

/* ======= Formulários ======= */
.form-wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 20px 0 40px;
}

.form-title {
  font-size: clamp(26px, 5vw, 34px);
  font-weight: 900;
  letter-spacing: 1px;
  margin: 0 0 8px;
  color: var(--brass);
}

.form-lead {
  color: var(--dim);
  line-height: 1.5;
  margin: 0 0 20px;
}

.form-panel label {
  display: block;
  font-weight: 700;
  font-size: 14px;
  margin: 16px 0 6px;
}

.form-panel input[type="text"],
.form-panel input[type="email"],
.form-panel input[type="password"] {
  width: 100%;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  /* Ver a nota do `.btn`: campo de formulário não herda a fonte do ancestral. */
  font-family: inherit;
  font-size: 16px;
  line-height: 1.2;
  /* Alvo de toque da E6: 19px de conteúdo (16 × 1.2) + 26 de padding + 2 de borda = 47px, com
     folga sobre os 44 do WCAG 2.5.5. Quem confere é o `TodoAlvoDeToqueTemPeloMenos44px`, que
     mede a caixa DESENHADA — e foi ele que pegou esta regra valendo 43px no Linux. */
  padding: 13px 14px;
}

.form-panel input:focus-visible {
  border-color: var(--cyan);
}

.form-panel .btn {
  margin-top: 22px;
  width: 100%;
}

.form-hint {
  color: var(--dim);
  font-size: 12px;
  margin: 6px 0 0;
}

/* `.validation-summary-errors`, e NAO `:not(:empty)`.

   O `asp-validation-summary` renderiza `<ul><li style="display:none"></li></ul>` mesmo quando
   nao ha erro nenhum - entao o `div` NUNCA e `:empty`, e a caixa vermelha aparecia vazia para
   toda pessoa que chegava na tela de login, de registro e nas outras quatro. O tag helper marca
   o estado ele mesmo: `validation-summary-valid` sem erro, `validation-summary-errors` com. E
   essa a classe que descreve o que a caixa quer dizer.

   Achado na captura 27, olhando o que estava na tela e nao devia - que e a pergunta que nenhum
   teste fazia. */
.form-errors.validation-summary-errors {
  background: rgba(255, 115, 115, .12);
  border: 1px solid var(--red);
  border-radius: 10px;
  padding: 12px 14px;
  color: #ffd5d5;
  font-size: 14px;
}

.form-errors ul {
  margin: 0;
  padding-left: 18px;
}

.form-aviso {
  background: rgba(65, 216, 222, .10);
  border: 1px solid var(--cyan);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-size: 14px;
}

.form-alt {
  color: var(--dim);
  font-size: 14px;
  margin-top: 18px;
  text-align: center;
}

.form-remover {
  margin-top: 14px;
  text-align: center;
}

/* O aviso de privacidade da tela de registro: presente sem gritar. Ele fica ANTES do
   "Already have one?" porque a ordem e a da decisao - abrir a conta, e so entao a alternativa
   de quem ja tem uma. */
.form-privacidade {
  color: var(--dim);
  font-size: 14px;
  margin-top: 16px;
  text-align: center;
}

/* =========================================================================
   TEXTO CORRIDO
   A Privacy page e a unica tela do site que e feita de PARAGRAFO, e nao de
   formulario. O `.form-wrap` limita a 520px, que e largura de formulario e
   nao de leitura; e o `.panel` e desenhado para caber cartao, nao prosa.
   ========================================================================= */
.texto-longo {
  max-width: 680px;
}

.texto-corrido {
  text-align: left;
  line-height: 1.65;
  padding: 22px 24px;
}

.texto-corrido h2 {
  font-size: 17px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 26px 0 8px;
}

/* O primeiro titulo nao empurra: ele ja esta colado no topo do painel. */
.texto-corrido h2:first-child {
  margin-top: 0;
}

.texto-corrido p {
  margin: 0 0 12px;
  color: var(--text);
}

/* =========================================================================
   RODAPE
   Uma linha so, e de proposito: a Privacy page e o unico link que o
   responsavel precisa achar de qualquer tela. Rodape que cresce vira menu, e
   menu no rodape de um site de crianca e lugar onde ninguem olha.
   ========================================================================= */
.rodape {
  margin-top: 28px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
}

.rodape a {
  color: var(--dim);
  font-size: 14px;
}

/* Atalho de ambiente: só existe fora de produção, e a tarja diagonal deixa isso óbvio. */
.atalho-ambiente {
  margin: 18px 0;
  border-color: var(--brass);
  font-size: 14px;
  line-height: 1.6;
}

/* ======= Perfis ======= */
.perfis {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: 18px;
}

.perfil-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  text-align: center;
  min-width: 150px;
}

.perfil-botao {
  display: block;
  background: none;
  border: 0;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  width: 100%;
}

.perfil-nome {
  display: block;
  font-weight: 800;
  margin-top: 8px;
}

.perfil-tema {
  display: block;
  color: var(--dim);
  font-size: 12px;
  margin-top: 2px;
}

.perfil-editar {
  display: inline-block;
  font-size: 13px;
  margin-top: 10px;
  padding: 8px;
}

.escolha {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin: 20px 0 0;
  padding: 12px;
}

.escolha legend {
  font-weight: 700;
  font-size: 14px;
  padding: 0 6px;
}

.escolha-grade {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.escolha-item {
  border: 2px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* O seletor de robo: o corpo em cima, o nome embaixo. O radio fica, e fica visivel — e ele que
   diz a quem so ouve a tela qual robo esta marcado. */
.escolha-bot {
  flex-direction: column;
  gap: 4px;
}

.escolha-bot-nome {
  font-weight: 800;
  font-size: 12px;
  letter-spacing: 1px;
}

/* A arte e quadrada e tem alfa: `contain` so protege do dia em que o CSS mudar um dos lados. */
.avatar-bot {
  object-fit: contain;
}

.escolha-item:has(input:checked) {
  border-color: var(--btn1);
  box-shadow: 0 0 12px var(--glow);
}

.escolha-tema span {
  display: flex;
  flex-direction: column;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 1px;
}

.escolha-tema small {
  color: var(--dim);
  font-weight: 400;
  letter-spacing: 0;
}

/* =========================================================================
   O MAPA DO DISTRITO — /play/{distrito}
   E a primeira tela depois de escolher o perfil, entao o estado vazio e
   conteudo e nao caso de borda: uma tela de zeros que parece quebrada e a
   pior primeira impressao possivel de um jogo. Por isso o cartao trancado
   continua desenhado por inteiro, com nome e estrelas vazias — a crianca
   ve o que vem pela frente, nao um buraco.
   ========================================================================= */

.mapa {
  max-width: 780px;
  margin: 0 auto;
}

.mapa-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.mapa-titulo {
  margin: 0;
  font-size: clamp(26px, 5vw, 38px);
  letter-spacing: 1px;
  color: var(--amber);
  text-shadow: 0 0 18px var(--glow);
}

.mapa-progresso {
  margin: 6px 0 0;
  color: var(--dim);
  font-size: 15px;
}

.mapa-progresso strong {
  color: var(--text);
  font-size: 18px;
}

.mapa-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 4px;
}

.badge-gremlin {
  border: 2px solid var(--purple);
  background: rgba(176, 122, 224, .12);
  color: var(--text);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px;
  font-weight: 700;
}

.mapa-rota {
  margin-top: 26px;
}

.mapa-rota-nome {
  margin: 0 0 12px;
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--cyan);
}

.mapa-maquinas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.maquina-alvo {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 2px solid var(--line);
  border-radius: 16px;
  background: var(--panel);
  color: var(--text);
  text-decoration: none;
  /* Alvo de 44px do checklist de acessibilidade da E6 — o cartao inteiro e clicavel,
     e nao so o nome. Dedo de crianca em telefone nao acerta um link de texto. */
  min-height: 64px;
}

a.maquina-alvo:hover {
  border-color: var(--brass);
  transform: translateY(-2px);
}

a.maquina-alvo:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 3px;
}

.maquina-icone {
  font-size: 30px;
  line-height: 1;
  flex: none;
}

.maquina-corpo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
}

.maquina-nome {
  font-weight: 800;
  font-size: 17px;
}

.maquina-chefe {
  border: 1px solid var(--purple);
  color: var(--purple);
  border-radius: 999px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.maquina-estrelas {
  margin-left: auto;
  letter-spacing: 2px;
  font-size: 18px;
}

.estrela {
  color: var(--line);
}

.estrela-cheia {
  color: var(--amber);
  text-shadow: 0 0 10px var(--glow);
}

.maquina-estado {
  width: 100%;
  color: var(--dim);
  font-size: 13px;
}

/* A proxima maquina e a unica com destaque. Sem ela, a crianca que voltou depois de
   dois dias precisa procurar onde parou. */
.maquina-proxima .maquina-alvo {
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--halo1), 0 0 22px var(--glow);
}

.maquina-trancada .maquina-alvo {
  opacity: .5;
  cursor: not-allowed;
}

@media (prefers-reduced-motion: no-preference) {
  a.maquina-alvo {
    transition: border-color .15s ease, transform .15s ease;
  }
}

/* Quem esta jogando. Fica FORA da linha de fala: o rotulo ao lado do balao pertence a quem
   fala, e o mapa nasceu com o nome da crianca ali embaixo de um texto em primeira pessoa do
   L.U.C.A.S. — na tela, ela dava boas-vindas a si mesma. */
.engenheira {
  display: flex;
  align-items: center;
  gap: 8px;
}

.engenheira .avatar-bot {
  width: 40px;
  height: 40px;
}

.engenheira-grande {
  justify-content: center;
  margin-top: 18px;
}

.engenheira-grande .avatar-bot {
  width: 160px;
  height: 160px;
}

.engenheira-nome {
  color: var(--dim);
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 2px;
}

.mapa-topo-acoes {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* O alternador de cidade no cabecalho do mapa (leva C8). O estado e o `aria-pressed`, e o CSS so o
   desenha: a borda cheia marca a cidade no ar, para a tela e o leitor de tela dizerem o mesmo. */
.alternador-tema {
  display: flex;
  gap: 6px;
  margin: 0;
}

.alternador-tema .btn[aria-pressed="true"] {
  border-style: solid;
  border-color: var(--amber);
  color: var(--text);
}

/* A porta (leva C8): o que o adulto precisa saber antes de abrir a oficina, e os dois botoes. */
.entrada-adulto {
  max-width: 560px;
  margin: 22px auto 0;
  color: var(--dim);
  line-height: 1.5;
}

.entrada-adulto p {
  margin: 4px 0;
}

.entrada-botoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
}

/* =========================================================================
   AREA DE TOQUE DOS LINKS DE NAVEGACAO
   Medido no E2E da E6: `GEARPOLIS`, `Sign in`, `Open a workshop` e
   `Lost your key?` tinham 19 px de altura. Sao links de NAVEGACAO, e nao
   links dentro de uma frase - a excecao do WCAG 2.5.8 para texto corrido
   nao vale para eles, e o publico e crianca com dedo em tablet.
   O texto continua do mesmo tamanho; o que cresce e a AREA, por padding.
   ========================================================================= */

/* O rodape e o aviso de privacidade da tela de registro entram nesta lista pelo mesmo motivo
   que os de cima, e ha um a mais: o `TodoAlvoDeToqueTemPeloMenos44px` mede TODO `a:visible` das
   tres telas que ele visita, e `/Account/Register` e uma delas. Link novo fora desta regra nao
   e "estilo faltando" - e a suite vermelha. */
.rodape a,
.form-privacidade a,
.barra-conta a,
.barra-conta .marca,
.form-alt a,
.perfil-editar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  /* Largura tambem: `Sign in` media 41 px porque o rotulo e curto, e a recomendacao e sobre a
     AREA e nao so a altura. O padding cresce a area sem tocar no tamanho do texto. */
  min-width: 44px;
  padding-inline: 6px;
}