/* Praça dos locais — folha final, independente das regras históricas. */
html body #paginaLocais,
html body #paginaLocais *{
  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:800 !important;
  text-shadow:none !important;
}

/* Regra terminal: nunca deixar a media query de desktop voltar a alargar 4.1. */
html body #paginaLocais.pagina-locais{
  width:var(--game-safe-width)!important;
  max-width:var(--game-safe-width)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  overflow-x:hidden!important;
}
html body #paginaLocais #listaLocais .local-foto img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}

/* A ilustração ocupa toda a sua coluna: sem a almofada herdada à esquerda
   ou em cima, mas sem cortar nem esticar o símbolo. */
html body #paginaLocais #listaLocais .local-foto{
  padding:.08rem!important;
  align-self:stretch!important;
  justify-self:stretch!important;
}
html body #paginaLocais #listaLocais .local-foto img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Reservar margem interna: cada símbolo cabe inteiro, sem tocar na moldura. */
html body #paginaLocais #listaLocais .local-foto{
  display:grid!important;
  place-items:center!important;
  overflow:hidden!important;
  padding:.55rem!important;
}
html body #paginaLocais #listaLocais .local-foto img{
  display:block!important;
  width:86%!important;
  height:86%!important;
  max-width:86%!important;
  max-height:86%!important;
  margin:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
}

/* A mesma folga após o quinto cartão, quer exista um comando, quer dois. */
html body #paginaLocais #listaLocais .locais-page-nav{
  position:static!important;
  display:block!important;
  width:100%!important;
  margin:.9rem 0 0!important;
  transform:none!important;
}
html body #paginaLocais #listaLocais .locais-page-actions{
  position:static!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:.75rem!important;
  width:100%!important;
  margin:.9rem 0 0!important;
  transform:none!important;
}
html body #paginaLocais #listaLocais .locais-page-actions .locais-page-nav{
  width:100%!important;
  margin:0!important;
}

html body #paginaLocais .locais-control-panel .hud{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  width:100% !important;
  min-width:100% !important;
  box-sizing:border-box !important;
  margin:0 0 .45rem !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-family:Arial,sans-serif !important;
  font-size:clamp(1.15rem,5vw,1.5rem) !important;
  font-weight:900 !important;
}

html body #paginaLocais .locais-control-panel .hud .time,
html body #paginaLocais .locais-control-panel .hud .pts{
  display:block !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  color:#000 !important;
  text-shadow:none !important;
  font-family:Arial,sans-serif !important;
  font-size:inherit !important;
  font-weight:900 !important;
  white-space:nowrap !important;
  flex:0 0 auto !important;
  min-width:max-content !important;
  max-width:none !important;
}

html body #paginaLocais .locais-control-panel .hud .time{margin:0 auto 0 0 !important;transform:none !important;}
html body #paginaLocais .locais-control-panel .hud .pts{margin:0 0 0 auto !important;text-align:right !important;}

html body #paginaLocais .hud .hud-icone{
  display:inline-block !important;
  width:1.28em !important;
  height:1.28em !important;
  margin-right:.36em !important;
  vertical-align:-.18em !important;
  color:#000 !important;
}

/* Os cartões também pertencem à mesma família, mesmo quando o motor lhes
   acrescenta regras próprias. */
html body #paginaLocais #listaLocais .local-postal .local-numero,
html body #paginaLocais #listaLocais .local-postal .local-nome{
  font-family:"Montserrat",Arial,sans-serif !important;
  font-weight:800 !important;
  text-shadow:none !important;
}

html body #paginaLocais .locais-control-panel #mapaGeralRow{
  position:static !important;
  width:100% !important;
  margin:0 0 .95rem !important;
  transform:none !important;
}

/* 4.1 usa o mesmo quadro vertical das páginas 1–3, mesmo quando o browser
   está largo. A antiga regra 100% era a origem do "modo ecrã de PC". */
html body #paginaLocais.pagina-locais{
  width:var(--game-safe-width)!important;
  max-width:var(--game-safe-width)!important;
  min-height:100svh!important;
  height:auto!important;
  margin-left:auto!important;
  margin-right:auto!important;
  overflow-x:hidden!important;
}
html body #paginaLocais.pagina-locais[style*="display:none"],
html body #paginaLocais.pagina-locais[style*="display: none"]{display:none!important}

html body #paginaLocais .locais-control-panel #mapaGeralRow #mapaGeralBtn.btn.btn-blue{
  position:static !important;
  width:100% !important;
  min-height:50px !important;
  margin:0 !important;
  padding:.55rem .8rem !important;
  border:2px solid #000 !important;
  border-radius:8px !important;
  background:#fff !important;
  color:#000 !important;
  box-shadow:none !important;
  text-shadow:none !important;
  font-family:Arial,sans-serif !important;
  font-size:clamp(1.05rem,4.5vw,1.3rem) !important;
  font-weight:900 !important;
}

/* Correção exclusiva de ecrã largo. No telemóvel conserva-se a composição
   que já foi aprovada; só o desktop precisa de fugir à grelha histórica. */
@media (min-width:768px){
html body #paginaLocais.pagina-locais{
  position:relative !important;
  display:block !important;
  width:min(100%, 760px) !important;
  max-width:760px !important;
  min-height:100svh !important;
  height:auto !important;
  margin:0 auto !important;
  padding:clamp(.9rem, 3vw, 1.4rem) !important;
  overflow:visible !important;
  background:#fff !important;
  box-sizing:border-box !important;
}

html body #paginaLocais.pagina-locais[style*="display:none"],
html body #paginaLocais.pagina-locais[style*="display: none"]{
  display:none !important;
}

html body #paginaLocais .locais-control-panel,
html body #paginaLocais #listaLocais{
  width:100% !important;
  max-width:none !important;
}

html body #paginaLocais #listaLocais{
  display:block !important;
}

html body #paginaLocais #listaLocais .locais-page-nav{
  position:static !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:50px !important;
  margin:0 !important;
  transform:none !important;
}

/* Ilustrações são símbolos completos, não fotografias para cortar. */
html body #paginaLocais #listaLocais .local-foto{
  display:grid !important;
  place-items:center !important;
  padding:.5rem !important;
}

html body #paginaLocais #listaLocais .local-foto img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}
}

/* Camada final, posterior à media query de desktop. */
html body #paginaLocais.pagina-locais{
  width:var(--game-safe-width)!important;
  max-width:var(--game-safe-width)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  overflow-x:hidden!important;
}
html body #paginaLocais #listaLocais .local-foto img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}

/* O avanço isolado 6–10 é um comando principal: ocupa a largura útil toda.
   Os dois comandos da página seguinte conservam a divisão a meio. */
html body #paginaLocais #listaLocais > .locais-page-nav{
  width:100%!important;
  margin:.9rem 0 0!important;
}

/* Botão autónomo da página 4.1 — não herda a meia-medida da dupla 1–5/Fim. */
html body #paginaLocais #listaLocais > button.locais-page-nav:not(.locais-page-back):not(.locais-page-end){
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-width:100%!important;
  margin:.9rem 0 0!important;
  padding:.55rem .8rem!important;
}

/* Nomes dos desafios com a presença dos restantes títulos da experiência. */
html body #paginaLocais #listaLocais .local-postal .local-numero{
  font-size:clamp(1.1rem,4vw,1.35rem)!important;
  line-height:1.05!important;
}
html body #paginaLocais #listaLocais .local-postal .local-nome{
  font-size:clamp(1.28rem,4.6vw,1.6rem)!important;
  line-height:1.05!important;
}

/* Enquadramento terminal: a imagem ocupa mesmo toda a coluna à esquerda. */
html body #paginaLocais #listaLocais .local-postal .local-foto{
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  display:grid!important;
  overflow:hidden!important;
  /* Margem idêntica em cima, baixo e lados: ilustrações altas não parecem
     perder a base, mantendo a coluna esquerda inteira como moldura. */
  padding:7px!important;
  margin:0!important;
  box-sizing:border-box!important;
  place-items:center!important;
  background:#FFFFFF!important;
  border-radius:10px 0 0 10px!important;
}
html body #paginaLocais #listaLocais .local-postal .local-foto img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:0!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Desafio concluído: só a moldura verde reforçada comunica o estado.
   Não há bola/check solto sobre o cenário. */
html body #paginaLocais #listaLocais .local-postal .local-status{display:none!important;}
html body #paginaLocais #listaLocais .local.local-postal.visitado{
  border-color:#1F7A3A!important;
  border-width:4px!important;
  box-shadow:inset 0 0 0 2px #1F7A3A!important;
}

/* Em telefones compactos, o avanço 6–10 fica inteiro no primeiro ecrã.
   Recuperamos apenas espaços de transição; os cartões mantêm a sua escala. */
@media (max-width:500px){
  html body #paginaLocais.pagina-locais{padding:.65rem!important;}
  html body #paginaLocais .hud{margin-bottom:.3rem!important;}
  html body #paginaLocais #mapaGeralRow{margin-bottom:.75rem!important;}
  html body #paginaLocais #listaLocais::before{margin-bottom:.5rem!important;}
  html body #paginaLocais #listaLocais > button.locais-page-nav:not(.locais-page-back):not(.locais-page-end){
    height:64px!important;
    min-height:64px!important;
    margin-top:.5rem!important;
  }
}

/* 4.1/4.2 seguem a métrica de ecrã das páginas iniciais. Em alturas curtas,
   reduzimos somente a cadência vertical e os cartões, para o comando seguinte
   continuar alcançável sem uma zona escondida abaixo da dobra. */
@media (max-width:500px) and (max-height:850px){
  html body #paginaLocais.pagina-locais{padding:.5rem!important;}
  html body #paginaLocais .locais-control-panel .hud{margin-bottom:.2rem!important;}
  html body #paginaLocais .locais-control-panel #mapaGeralRow{margin-bottom:.45rem!important;}
  html body #paginaLocais .locais-control-panel #mapaGeralRow #mapaGeralBtn.btn.btn-blue{
    min-height:44px!important;
    padding:.35rem .6rem!important;
  }
  html body #paginaLocais #listaLocais::before{margin-bottom:.35rem!important;}
  html body #paginaLocais #listaLocais .local-postal{min-height:0!important;}
  html body #paginaLocais #listaLocais .local-postal .local-numero{font-size:clamp(1rem,3.8vw,1.2rem)!important;}
  html body #paginaLocais #listaLocais .local-postal .local-nome{font-size:clamp(1.1rem,4.2vw,1.4rem)!important;}
  html body #paginaLocais #listaLocais > button.locais-page-nav:not(.locais-page-back):not(.locais-page-end){
    height:56px!important;
    min-height:56px!important;
    margin-top:.4rem!important;
  }
}

/* Métrica dos Desafios para a praça: HUD e navegação têm altura própria;
   os cinco postais recebem exatamente o espaço intermédio disponível. */
@media (max-width:767px){
  html body #paginaLocais.pagina-locais{
    display:flex!important;
    flex-direction:column!important;
    height:100dvh!important;
    min-height:100dvh!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
  }
  html body #paginaLocais .locais-control-panel{
    flex:0 0 auto!important;
  }
  html body #paginaLocais #listaLocais{
    display:flex!important;
    flex:1 1 0!important;
    flex-direction:column!important;
    min-height:0!important;
  }
  html body #paginaLocais #listaLocais::before{
    flex:0 0 auto!important;
  }
  html body #paginaLocais #listaLocais .locais-postais{
    position:static!important;
    flex:1 1 0!important;
    min-height:0!important;
    width:100%!important;
    height:auto!important;
    grid-template-rows:repeat(5,minmax(0,1fr))!important;
    margin:0!important;
  }
  html body #paginaLocais #listaLocais > .locais-page-nav,
  html body #paginaLocais #listaLocais > .locais-page-actions{
    position:static!important;
    flex:0 0 auto!important;
  }
}

/* Uma só métrica para a navegação das páginas 4.1 e 4.2. A altura adapta-se
   à geometria disponível e é partilhada pelo avanço único e pela dupla final. */
html body #paginaLocais{
  --locais-nav-h:clamp(56px,7svh,76px);
}
html body #paginaLocais #listaLocais > .locais-page-nav,
html body #paginaLocais #listaLocais > .locais-page-actions,
html body #paginaLocais #listaLocais > .locais-page-actions .locais-page-nav{
  height:var(--locais-nav-h)!important;
  min-height:var(--locais-nav-h)!important;
  max-height:var(--locais-nav-h)!important;
}
