/* Página de desafio — linguagem Domingueira, limpa e editorial. */
html body #paginaLocalSelecionado{
  position:relative !important;
  /* O desafio conserva o quadro de telemóvel, mesmo num ecrã largo. */
  width:var(--game-safe-width) !important;
  max-width:var(--game-safe-width) !important;
  min-height:100svh !important;
  height:auto !important;
  margin:0 auto !important;
  /* Margens exteriores discretas: dão largura real ao cenário sem o cortar. */
  padding:clamp(.75rem,2.6vw,1.25rem) !important;
  box-sizing:border-box !important;
  overflow-y:auto !important;
  /* Cada cidade fornece assets.fundo: este é o pano comum de todos os seus
     desafios, por trás das caixas e da imagem de pista. */
  background:var(--img-jogo) center center / cover no-repeat !important;
  color:#000 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  display:flex !important;
  flex-direction:column !important;
}

/* O motor antigo declarava esta página como grelha depois da nova folha.
   A classe dupla vence essa regra e devolve espaço elástico à imagem. */
html body #paginaLocalSelecionado.container.page-balance{
  display:flex !important;
  flex-direction:column !important;
  grid-template-columns:none !important;
  grid-template-rows:none !important;
}

/* Respeita o estado inicial do motor: a página só aparece depois de ser
   escolhido um desafio. */
html body #paginaLocalSelecionado.container.page-balance[style*="display:none"],
html body #paginaLocalSelecionado.container.page-balance[style*="display: none"]{
  display:none !important;
}

html body #paginaLocalSelecionado,
html body #paginaLocalSelecionado *{
  font-family:var(--fuga-btn-font,Montserrat,Arial,sans-serif) !important;
  color:#000 !important;
  text-shadow:none !important;
  box-sizing:border-box !important;
}

html body #paginaLocalSelecionado #caixaTituloPista{
  width:100% !important;
  max-width:none !important;
  margin:clamp(.8rem,2svh,1.25rem) 0 .55rem !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  text-align:center !important;
}

html body #paginaLocalSelecionado #caixaTituloPista #tituloLocalSelecionado{
  margin:.35rem 0 .28rem !important;
  font-size:var(--p4-title-fit,clamp(26px,8.1vw,38px)) !important;
  font-family:var(--fuga-btn-font,Montserrat,Arial,sans-serif) !important;
  font-weight:900 !important;
  letter-spacing:-.045em !important;
  line-height:1 !important;
}

html body #paginaLocalSelecionado #caixaTituloPista #pistaTexto{
  margin:1rem 0 0 !important;
  padding:0 !important;
  padding:clamp(.75rem,3vw,1rem) !important;
  background:#fff !important;
  border:2px solid #111 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  font-family:var(--fuga-btn-font,Montserrat,Arial,sans-serif) !important;
  font-size:clamp(.98rem,4vw,1.2rem) !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  color:#111 !important;
  text-align:center !important;
}

/* Uma só voz tipográfica em toda a ação do desafio. */
html body #paginaLocalSelecionado button,
html body #paginaLocalSelecionado button.btn,
html body #paginaLocalSelecionado input{
  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:800 !important;
}

/* PALCO ELÁSTICO — a imagem é o único elemento que cresce. A sua caixa ocupa
   o espaço entre cabeçalho e comandos; `contain` preserva qualquer proporção
   (quadrada, horizontal ou muito vertical), sem corte nem deformação. */
html body #paginaLocalSelecionado #pistaImagem{
  display:block !important;
  flex:1 1 0 !important;
  align-self:stretch !important;
  min-width:0 !important;
  min-height:0 !important;
  width:100% !important;
  height:0 !important;
  max-width:100% !important;
  max-height:none !important;
  margin:.15rem auto !important;
  padding:0 !important;
  box-sizing:border-box !important;
  border:2px solid #000 !important;
  border-radius:18px !important;
  background:#fff !important;
  box-shadow:none !important;
  object-fit:contain !important;
  object-position:center !important;
}

html body #paginaLocalSelecionado #respostaRow{
  flex:0 0 auto !important;
  display:grid !important;
  grid-template-columns:1fr auto !important;
  gap:.35rem .65rem !important;
  align-items:end !important;
  /* O título do código também pertence ao fluxo: nunca se sobrepõe à pista. */
  margin:.35rem 0 .4rem !important;
  padding:0 !important;
}

/* Rodapé estrutural da P4: resposta e navegação são um único bloco normal.
   A sua altura é sempre contabilizada antes de o palco flexível receber a
   altura restante; em ecrãs curtos, o contentor faz scroll sem sobreposição. */
html body #paginaLocalSelecionado #p4Comandos{
  flex:0 0 auto !important;
  display:flex !important;
  flex-direction:column !important;
  min-width:0 !important;
}

html body #paginaLocalSelecionado #respostaRow::before{
  content:"CÓDIGO DE 4 DÍGITOS";
  position:static !important;
  grid-column:1 / -1 !important;
  justify-self:center !important;
  width:max-content !important;
  margin:0 auto .2rem !important;
  padding:.22rem .72rem !important;
  border:2px solid #111 !important;
  border-radius:999px !important;
  background:#fff !important;
  color:#111 !important;
  text-shadow:none !important;
  text-align:center !important;
  font-size:clamp(.9rem,3.9vw,1.15rem) !important;
  font-weight:900 !important;
}

html body #paginaLocalSelecionado #codigoInput{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
  clip-path:inset(50%) !important;
  overflow:hidden !important;
}

html body #paginaLocalSelecionado .codigo-caixas{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:.55rem !important;
  min-width:0 !important;
  align-items:stretch !important;
}

html body #paginaLocalSelecionado .codigo-digito{
  width:100% !important;
  min-width:0 !important;
  /* Os quatro dígitos obedecem à largura que a linha realmente tem.
     Assim continuam quadrados em qualquer altura de ecrã; o palco
     flexível da imagem é que absorve a diferença vertical. */
  aspect-ratio:1 / 1 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:.2rem !important;
  background:#fff !important;
  border:2px solid #000 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  text-align:center !important;
  font-size:clamp(1.4rem,7vw,2rem) !important;
  font-weight:900 !important;
  letter-spacing:.28em !important;
}
html body #paginaLocalSelecionado .codigo-digito.error{
  border-color:#d32f2f !important;
  background:#ffe8e8 !important;
}

html body #paginaLocalSelecionado #btnAjuda{
  /* A ajuda mantém-se compacta: a pista recebe primeiro o espaço útil. */
  min-width:clamp(74px,18vw,98px) !important;
  height:clamp(58px,10svh,72px) !important;
  margin:0 !important;
  padding:.35rem .3rem !important;
  background:#000 !important;
  border:2px solid #000 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  gap:.16rem !important;
  background:#000 !important;
  border:2px solid #fff !important;
  box-shadow:0 0 0 1px #111 !important;
}
html body #paginaLocalSelecionado #btnAjuda,
html body #paginaLocalSelecionado #btnAjuda *{color:#fff !important;font-weight:900 !important;}
html body #paginaLocalSelecionado #btnAjuda .ajuda-label-main,
html body #paginaLocalSelecionado #btnAjuda .ajuda-label-cost{
  display:block !important;
  width:100% !important;
  margin:0 !important;
  padding:0 !important;
  text-align:center !important;
  line-height:1.05 !important;
}
html body #paginaLocalSelecionado #btnAjuda.is-locked{opacity:1 !important;}

html body #paginaLocalSelecionado #p4Comandos > .btn-grid:not(#respostaRow){
  flex:0 0 auto !important;
  display:flex !important;
  justify-content:space-between !important;
  flex-wrap:nowrap !important;
  gap:1rem !important;
  margin:1.05rem 0 0 !important;
}
html body #paginaLocalSelecionado > .btn-grid:not(#respostaRow) .btn.btn-dark,
html body #paginaLocalSelecionado > .btn-grid:not(#respostaRow) .btn.btn-blue{
  flex:1 1 50% !important;
  min-width:0 !important;
  padding:.35rem 0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-size:clamp(1rem,4.8vw,1.35rem) !important;
  font-weight:900 !important;
}

/* Voltar e Mapa são comandos de rodapé, não botões medievais coloridos. */
html body #paginaLocalSelecionado.page-balance #p4Comandos > .btn-grid:not(#respostaRow) .btn.btn-dark,
html body #paginaLocalSelecionado.page-balance #p4Comandos > .btn-grid:not(#respostaRow) #linkTrajetoBtn.btn.btn-blue{
  min-height:clamp(46px,7svh,58px) !important;
  padding:.35rem .65rem !important;
  background:#fff !important;
  border:2px solid #000 !important;
  border-radius:8px !important;
  box-shadow:none !important;
  color:#000 !important;
  text-shadow:none !important;
  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:900 !important;
}
html body #paginaLocalSelecionado.page-balance #p4Comandos > .btn-grid:not(#respostaRow) .btn.btn-dark *,
html body #paginaLocalSelecionado.page-balance #p4Comandos > .btn-grid:not(#respostaRow) #linkTrajetoBtn.btn.btn-blue *{
  color:#000 !important;
  font-family:"Montserrat",Arial,sans-serif !important;
}

html body #paginaLocalSelecionado #btnAjuda,
html body #paginaLocalSelecionado #btnAjuda *{
  font-family:"Montserrat",Arial,sans-serif !important;
  text-shadow:none !important;
}

/* Na página de jogo, nada compete com o desafio: os parceiros podem surgir
   em momentos próprios do percurso, não junto da resposta. */
html body #paginaLocalSelecionado #cubeAds{display:none !important;}

/* Ecrã de jogo em telefone: a pista continua completa, mas deixa de empurrar
   o código e os comandos para fora da primeira dobra. Isto aproxima a página
   de desafio do comportamento fechado das páginas 1--3, sem recortar a arte. */
/* Alguns telemóveis e pré-visualizações usam uma viewport CSS mais larga que
   700 px. O quadro FUGA ainda é estreito; por isso a regra alcança toda a
   gama de ecrã vertical, sem afetar o layout largo de computador. */
@media (max-width:1000px){
  html body #paginaLocalSelecionado{padding:clamp(.55rem,2vw,.85rem) !important;}
  html body #paginaLocalSelecionado #caixaTituloPista{margin:.4rem 0 .3rem !important;}
  html body #paginaLocalSelecionado #caixaTituloPista #tituloLocalSelecionado{
    margin:.2rem 0 !important;
    font-size:var(--p4-title-fit,clamp(26px,8.1vw,38px)) !important;
  }
  html body #paginaLocalSelecionado #caixaTituloPista #pistaTexto{
    margin:.5rem 0 0 !important;
    padding:.55rem .7rem !important;
    font-size:clamp(1.05rem,4.3vw,1.3rem) !important;
  }
  html body #paginaLocalSelecionado #respostaRow{margin:.3rem 0 .35rem !important;}
  html body #paginaLocalSelecionado #p4Comandos > .btn-grid:not(#respostaRow){margin:.65rem 0 0 !important;}
}

/* A navegação encosta ao bloco de código: não desperdiça o rodapé do palco. */
html body #paginaLocalSelecionado #p4Comandos > .btn-grid:not(#respostaRow){
  margin-top:clamp(.45rem, 1svh, .65rem) !important;
}