/* FUGA · Domingueira Clássica
   Camada visual comum. Não altera rotas, lógica, conteúdo nem estados do jogo. */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");

:root{
  --fuga-font:"Montserrat",Arial,sans-serif;
  --fuga-ink:var(--fuga-cor-cidade,#000);
  --fuga-paper:#fff;
  --fuga-line:2px;
  --fuga-radius:18px;
  --fuga-button-size:clamp(.96rem,4vw,1.16rem);
}

html,body,button,input,select,textarea{
  font-family:var(--fuga-font)!important;
}

body{color:var(--fuga-ink)!important;background:var(--fuga-paper)!important;}
h1,h2,h3,p,li{color:inherit;}
h1,h2,.btn,button{font-family:var(--fuga-font)!important;}
h1,h2{font-weight:800!important;letter-spacing:-.035em;}
p,li{font-weight:500;}

/* Superfícies: o cenário continua disponível, a interface torna-se limpa. */
.container,
#paginaBoasVindas .container,
#paginaInstrucoes .container,
#paginaLocalSelecionado #caixaTituloPista,
#paginaFinal #caixaProclamacao,
#paginaFinal .rank-list li,
#paginaFinal .rank-me{
  color:var(--fuga-entrada-cor,var(--fuga-ink))!important;
  background:var(--fuga-paper)!important;
  border:var(--fuga-line) solid var(--fuga-ink)!important;
  border-radius:var(--fuga-radius)!important;
  box-shadow:none!important;
}

/* Comandos: grandes, táteis e independentes da imagem do cenário. */
.btn,button,#googleReviewBtn{
  min-height:44px!important;
  color:var(--fuga-ink)!important;
  background:var(--fuga-paper)!important;
  border:var(--fuga-line) solid var(--fuga-ink)!important;
  border-radius:var(--fuga-radius)!important;
  box-shadow:none!important;
  text-shadow:none!important;
  font-family:var(--fuga-font)!important;
  font-weight:800!important;
  letter-spacing:.01em!important;
  font-size:var(--fuga-button-size)!important;
}
.btn:hover,button:hover,#googleReviewBtn:hover{filter:none!important;background:color-mix(in srgb,var(--fuga-ink) 7%,#fff)!important;}
.btn:active,button:active{transform:translateY(1px)!important;}
.btn:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--fuga-ink)!important;outline-offset:3px!important;}

/* A ajuda é o único comando de tinta cheia. */
#btnAjuda,
#paginaFinal .rank-switch .active{
  color:#fff!important;
  background:var(--fuga-ink)!important;
  border-color:var(--fuga-ink)!important;
}

input,#codigoInput{
  min-height:48px!important;
  color:var(--fuga-ink)!important;
  background:#fff!important;
  border:var(--fuga-line) solid var(--fuga-ink)!important;
  border-radius:12px!important;
  box-shadow:none!important;
  font-family:var(--fuga-font)!important;
}

/* A fotografia e o desafio conservam cores; a moldura passa a ser da cidade. */
#paginaLocalSelecionado #pistaImagem,
#paginaLocais #listaLocais .local-card,
#paginaLocais #listaLocais .locais-postais > *{
  border:var(--fuga-line) solid var(--fuga-ink)!important;
  border-radius:12px!important;
  box-shadow:none!important;
}
#paginaLocalSelecionado #caixaTituloPista #tituloLocalSelecionado{color:var(--fuga-ink)!important;}
#paginaLocalSelecionado #caixaTituloPista #pistaTexto{color:var(--fuga-ink)!important;font-family:var(--fuga-font)!important;font-weight:500!important;}

/* Ranking e diploma como páginas editoriais, sem ornamento pesado. */
#paginaFinal .rank-list li,
#paginaFinal .rank-me{border-width:0 0 var(--fuga-line)!important;border-radius:0!important;}
#diplomaCard{color:var(--fuga-ink)!important;background:#fff!important;border:var(--fuga-line) solid var(--fuga-ink)!important;box-shadow:none!important;}
#diplomaCard *,#paginaFinal .rank-list *{font-family:var(--fuga-font)!important;color:inherit!important;text-shadow:none!important;}

/* O rodapé de navegação não compete com o desafio. */
#paginaLocalSelecionado > .btn-grid:not(#respostaRow) .btn{font-size:clamp(.92rem,3.8vw,1.06rem)!important;}

@media (max-width:520px){
  :root{--fuga-radius:14px;}
  .container{padding:1rem!important;}
  #paginaLocalSelecionado #caixaTituloPista{padding:.75rem!important;}
}

/* Capa: mantém a fotografia da cidade, mas liberta os dois comandos do traje antigo. */
#paginaNome #idiomaEscolha .btn{
  color:var(--fuga-ink)!important;
  background:#fff!important;
  border:var(--fuga-line) solid var(--fuga-ink)!important;
  border-radius:var(--fuga-radius)!important;
  box-shadow:none!important;
  text-shadow:none!important;
  font-family:var(--fuga-font)!important;
  font-weight:800!important;
  font-size:var(--fuga-button-size)!important;
}
#paginaNome #idiomaEscolha .btn:hover{filter:none!important;transform:none!important;background:color-mix(in srgb,var(--fuga-ink) 7%,#fff)!important;}
#paginaNome #idiomaEscolha .btn:active{transform:translateY(1px)!important;}
#paginaNome #idiomaEscolha .btn .idioma-bandeira{filter:none!important;}

/* A transição após o idioma fala a mesma língua visual dos botões. */
#paginaNome #formNome input,
#paginaNome #formNome input::placeholder{
  font-family:var(--fuga-font)!important;
  font-weight:500!important;
  letter-spacing:0!important;
  color:var(--fuga-ink)!important;
  text-shadow:none!important;
}
#paginaNome #formNome #botaoContinuar{
  font-family:var(--fuga-font)!important;
  font-weight:800!important;
  font-size:var(--fuga-button-size)!important;
  line-height:1!important;
  color:var(--fuga-ink)!important;
  background:#fff!important;
  border:var(--fuga-line) solid var(--fuga-ink)!important;
  border-radius:var(--fuga-radius)!important;
  box-shadow:none!important;
  text-shadow:none!important;
}

/* Idioma e continuar: dois momentos da mesma porta. */
#paginaNome #idiomaEscolha .btn,
#paginaNome #formNome #botaoContinuar{
  width:60%!important;
  max-width:60%!important;
  min-height:52px!important;
  height:clamp(52px,8svh,64px)!important;
  padding:0 clamp(.85rem,3vw,1.2rem)!important;
  border:var(--fuga-line) solid var(--fuga-ink)!important;
  border-radius:var(--fuga-radius)!important;
  background:#fff!important;
  color:var(--fuga-ink)!important;
  font-family:var(--fuga-font)!important;
  font-size:var(--fuga-button-size)!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.01em!important;
  box-shadow:none!important;
  text-shadow:none!important;
}
#paginaNome #formNome #nomeInput,
#paginaNome #formNome #nomeInput::placeholder{
  font-family:var(--fuga-font)!important;
  font-size:clamp(.95rem,3.8vw,1.12rem)!important;
  font-weight:500!important;
  color:var(--fuga-ink)!important;
}

/* Identidade viva da cidade: nunca pertence ao bitmap do cenário. */
#paginaNome .fuga-entrada-marca{
  position:absolute!important;
  z-index:55!important;
  top:6%!important;
  left:8%!important;
  width:84%!important;
  margin:0!important;
  display:grid!important;
  justify-items:center!important;
  gap:.55rem!important;
  pointer-events:none!important;
  color:var(--fuga-ink)!important;
  text-align:center!important;
}
#paginaNome .fuga-entrada-marca #logoEntrada{
  display:block!important;
  width:clamp(124px,36vw,190px)!important;
  max-height:174px!important;
  object-fit:contain!important;
}
#paginaNome .fuga-entrada-marca #tituloEntrada{
  margin:var(--fuga-entrada-titulo-margem,clamp(3rem,12svh,6rem)) 0 0!important;
  color:var(--fuga-ink)!important;
  font-family:var(--fuga-font)!important;
  font-size:var(--fuga-entrada-tamanho,clamp(3.2rem,14vw,5.25rem))!important;
  font-weight:800!important;
  line-height:.9!important;
  letter-spacing:-.06em!important;
  text-shadow:0 1px 0 rgba(255,255,255,.75)!important;
}
#paginaNome .fuga-entrada-marca #tituloEntrada::after{
  content:attr(data-subtitulo);
  display:block;
  margin-top:clamp(1rem,4vw,1.6rem);
  font-size:var(--fuga-entrada-subtamanho,clamp(1rem,4.5vw,1.5rem));
  font-weight:500;
  line-height:1.05;
  letter-spacing:-.02em;
  text-transform:none;
}