/* Moldura do site: topo com o menu principal e rodapé com o mapa do site.
   O HTML sai de tools/moldura.mjs. Este arquivo vale para todas as páginas
   internas, inclusive o guia do jogo, que tem visual próprio e não usa
   pagina.css. O topo é o mesmo da página inicial: escuro e translúcido, como
   os painéis do jogo, com o botão verde de jogar. As cores têm valor padrão e
   podem ser trocadas pela página (--mold-fundo, --mold-tinta, --mold-linha,
   --mold-verde). */
.mold-topo, .mold-topo *, .mold-rodape, .mold-rodape * { box-sizing: border-box; }
.mold-env { width: min(1180px, 100%); margin: 0 auto; padding: 10px 20px; }

/* ---- topo ---- */
html { scroll-padding-top: 84px; }
.mold-topo {
  position: sticky; top: 0; z-index: 20; color: #fff;
  background: var(--mold-fundo, linear-gradient(180deg, #0b1621f5, #101d29eb));
  border-bottom: 1px solid var(--mold-linha, #ffffff1f);
  box-shadow: 0 10px 30px -18px #0b1621cc;
  backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2);
  font-family: Nunito, system-ui, sans-serif; line-height: 1.3;
}
/* O topo é um pouco mais largo que o conteúdo, como o da home, para o menu caber numa linha. */
.mold-topo .mold-env { width: min(1280px, 100%); display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.mold-marca { flex: none; display: block; line-height: 0; }
.mold-marca { border-radius: 12px; }
.mold-marca img { width: 44px; height: 44px; display: block; filter: drop-shadow(0 3px 6px #0007); }
.mold-marca:focus-visible { outline: 3px solid #ffd76a; outline-offset: 3px; }
.mold-menu { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 2px 4px; }
/* Os links como os do topo da home; o da página atual ganha um risco verde embaixo. */
.mold-menu a {
  white-space: nowrap; text-decoration: none; font-weight: 800; font-size: 15px;
  color: var(--mold-tinta, #dce8f4); padding: 8px; border-radius: 12px;
}
.mold-menu a:hover { background: #ffffff1a; color: #fff; }
.mold-menu a:focus-visible { background: #ffffff1a; color: #fff; outline: 2px solid #ffd76a; outline-offset: -2px; }
.mold-menu a[aria-current] { color: #fff; background: #ffffff12; box-shadow: inset 0 -3px 0 var(--mold-verde, #8fe06a); }
.mold-jogar {
  flex: none; margin-left: auto; white-space: nowrap; text-decoration: none; font-weight: 800; font-size: 15px;
  background: linear-gradient(#7fd255, #3f8f3a); color: #fff; padding: 9px 18px; border-radius: 14px;
  text-shadow: 0 1px 0 #245c2288; box-shadow: 0 4px 0 #245c22, 0 10px 22px -8px #245c22aa;
  transition: transform .14s ease, filter .14s ease;
}
.mold-jogar:hover { filter: brightness(1.08); transform: translateY(-1px); }
.mold-jogar:focus-visible { outline: 3px solid #ffd76a; outline-offset: 3px; }
/* Com o seletor de idioma (história completa): ele fica junto do botão de jogar. */
.mold-topo .idiomas-hc { flex: none; margin-left: auto; }
.mold-topo .idiomas-hc + .mold-jogar { margin-left: 0; }
.mold-jogar:active { transform: translateY(3px); box-shadow: 0 1px 0 #245c22; }
/* O seletor PT/EN/ES da história completa, claro sobre o topo escuro. */
.mold-topo .idiomas-hc a {
  font-size: 13px; font-weight: 800; text-decoration: none; color: #dce8f4;
  border: 1.5px solid #ffffff40; background: #ffffff14; border-radius: 999px; padding: 3px 10px;
}
.mold-topo .idiomas-hc a:hover { background: #ffffff26; color: #fff; }
.mold-topo .idiomas-hc a[aria-current="true"] { border-color: #8fe06a; background: #8fe06a26; color: #c6f7ad; }

/* Telas médias e pequenas: o menu desce para uma segunda linha e rola de lado
   dentro dele mesmo, sem criar rolagem lateral na página. */
@media (max-width: 1060px) {
  html { scroll-padding-top: 116px; }
  .mold-menu {
    order: 3; flex: 1 1 100%; justify-content: flex-start; gap: 2px 4px;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin: 0 -20px; padding: 0 20px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 28px), transparent);
  }
  .mold-menu::-webkit-scrollbar { display: none; }
  .mold-menu::after { content: ''; flex: 0 0 8px; }
  .mold-menu a { font-size: 14px; padding: 6px 9px; }
}
/* Com o seletor de idioma o topo precisa de mais espaço: duas linhas até 1240 px. */
@media (min-width: 1061px) and (max-width: 1240px) {
  html:has(.mold-com-idiomas) { scroll-padding-top: 120px; }
  .mold-com-idiomas .mold-menu {
    order: 3; flex: 1 1 100%; justify-content: flex-start; gap: 2px 8px; overflow-x: auto; scrollbar-width: none;
    margin: 0 -20px; padding: 0 20px;
  }
}
/* Celular: os seis links aparecem todos, quebrando em linhas (sem rolar de lado). */
@media (max-width: 760px) {
  html { scroll-padding-top: 0; }
  .mold-topo { position: relative; }
  .mold-topo .mold-env { padding: 8px 16px 6px; gap: 4px 12px; }
  .mold-menu {
    margin: 0; padding: 0 0 2px; flex-wrap: wrap; justify-content: center; gap: 2px 4px;
    overflow: visible; -webkit-mask-image: none; mask-image: none;
  }
  .mold-menu::after { content: none; }
  .mold-menu a { font-size: 14px; padding: 5px 9px; }
  .mold-marca img { width: 40px; height: 40px; }
  .mold-jogar { font-size: 14px; padding: 8px 14px; }
}
@media (max-width: 480px) {
  .mold-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 6px; }
  .mold-menu a { text-align: center; white-space: normal; }
}
@media (max-width: 360px) {
  .mold-topo .mold-env { gap: 4px 8px; }
  .mold-jogar { font-size: 13px; padding: 8px 10px; }
  .mold-topo .idiomas-hc { gap: 4px; }
  .mold-topo .idiomas-hc a { padding: 2px 7px; }
}

/* ---- rodapé ---- */
.mold-rodape {
  background: #0c1825; color: #cfe0f2; margin-top: 20px;
  font-family: Nunito, system-ui, sans-serif; line-height: 1.5; font-size: 15px;
}
.mold-rodape .mold-env { padding: 34px 20px 24px; }
.mold-mapa { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 24px 28px; }
.mold-grupo-titulo {
  margin: 0 0 10px; font-family: 'Baloo 2', Nunito, sans-serif; font-weight: 800; font-size: 17px; color: #fff;
}
.mold-rodape .mold-grupo-titulo a { color: inherit; }
.mold-grupo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.mold-rodape a { color: #9fd8a0; font-weight: 700; text-decoration: none; }
.mold-rodape a:hover, .mold-rodape a:focus-visible { text-decoration: underline; }
.mold-rodape a[aria-current] { color: #fff; }
.mold-fim {
  margin: 28px 0 0; padding-top: 18px; border-top: 1px solid #ffffff1a;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 16px;
  font-size: 14px; color: #9fb3c8; text-align: center;
}
.mold-marca-rodape { display: inline-flex; align-items: center; gap: 8px; color: #fff !important; font-family: 'Baloo 2', Nunito, sans-serif; font-size: 16px; }
.mold-marca-rodape img { width: 32px; height: 32px; }
@media (max-width: 480px) {
  .mold-mapa { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .mold-fim { flex-direction: column; }
}