/* Falcão Games. Folha única do site e da política de privacidade, sem biblioteca externa.
   Fontes locais em fontes/ (Lilita One e Signika, as duas na SIL Open Font License). */

@font-face {
  font-family: "Lilita One";
  src: url("fontes/lilita-one.woff2") format("woff2");
  font-display: block;
}
@font-face {
  font-family: "Signika";
  src: url("fontes/signika.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}

:root {
  /* Cores do Marcha do Reino: o azul do estandarte, o ouro e os contornos do logotipo do jogo. */
  --noite: #0A1B52;
  --noite-funda: #06113A;
  --reino: #1F45C4;
  --ceu: #CFE3FF;
  --ouro: #FFC83D;
  --ouro-claro: #FFE68A;
  --ouro-escuro: #C98410;
  --marrom: #3A2511;
  --contorno: #12376E;
  --portal: #7FE6FF;
  --portal-claro: #BFF3FF;
  --sangue: #E2463A;
  --texto: #EAF1FF;
  --texto-suave: #B5C4EC;
  /* Cores do PelegOT: carvão, brasa e o ouro velho do logotipo dele. */
  --carvao: #150E08;
  --brasa: #FF8A2A;
  --ouro-velho: #E8BC66;
  --pergaminho: #F3E6CF;

  --titulo: "Lilita One", "Arial Black", Impact, sans-serif;
  --corpo: "Signika", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --margem: 16px;
  --contorno-2: 2px 0 0 var(--contorno), -2px 0 0 var(--contorno), 0 2px 0 var(--contorno), 0 -2px 0 var(--contorno),
    1.5px 1.5px 0 var(--contorno), -1.5px 1.5px 0 var(--contorno), 1.5px -1.5px 0 var(--contorno), -1.5px -1.5px 0 var(--contorno);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }

body {
  margin: 0;
  background: var(--noite);
  color: var(--texto);
  font-family: var(--corpo);
  font-size: 1.0625rem;
  line-height: 1.55;
  overflow-x: hidden;
}

img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
a { color: var(--ouro-claro); text-underline-offset: 0.18em; }
a:hover { color: #fff; }
p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--ouro); outline-offset: 3px; border-radius: 6px; }

.oculto { position: absolute; width: 0; height: 0; overflow: hidden; }

.pular {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--ouro); color: var(--marrom); font-weight: 700; text-decoration: none;
}
.pular:focus { top: 12px; }

h1, h2, h3 { font-family: var(--titulo); font-weight: 400; line-height: 1.05; margin: 0; }

/* ---------- Topo ---------- */

.topo {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) var(--margem) 10px;
  background: linear-gradient(rgba(6, 17, 58, 0.55), rgba(6, 17, 58, 0));
  transition: background-color 0.25s, box-shadow 0.25s;
}
.topo.solido {
  background: rgba(10, 27, 82, 0.94);
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.06), 0 10px 30px rgba(0, 0, 0, 0.35);
}
@supports (backdrop-filter: blur(8px)) {
  .topo.solido { background: rgba(10, 27, 82, 0.8); backdrop-filter: blur(10px); }
}

.marca {
  font-family: var(--titulo); font-size: 1.375rem; line-height: 1; text-decoration: none;
  color: #fff; text-shadow: var(--contorno-2), 0 3px 0 var(--contorno);
  white-space: nowrap;
}
.marca-games { color: var(--ouro); margin-left: 0.22em; }
.marca:hover { color: #fff; }

.menu { display: none; }

.linguas {
  display: flex; padding: 3px; gap: 2px;
  border-radius: 999px; border: 2px solid rgba(255, 255, 255, 0.28);
  background: rgba(6, 17, 58, 0.6);
}
.linguas button {
  min-width: 40px; min-height: 34px; padding: 4px 8px;
  border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-family: var(--titulo); font-size: 0.95rem; letter-spacing: 0.02em; color: #fff;
}
.linguas button:hover { background: rgba(255, 255, 255, 0.12); }
.linguas button[aria-pressed="true"] { background: var(--ouro); color: var(--marrom); }

/* ---------- Botões de jogo: contorno grosso e borda de baixo que afunda no toque ---------- */

.botao {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 10px 22px;
  border: 3px solid; border-radius: 14px;
  font-family: var(--titulo); font-size: 1.1875rem; line-height: 1.05; text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, filter 0.15s;
}
.botao:hover { filter: brightness(1.08); }
.botao:active { transform: translateY(4px); }

.botao-loja {
  background: linear-gradient(#FFE68A, #FFC83D 48%, #F2A516);
  border-color: var(--marrom); color: var(--marrom);
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.7), 0 5px 0 #7A4A0A, 0 12px 24px rgba(0, 0, 0, 0.35);
  padding-left: 18px;
}
.botao-loja:hover { color: var(--marrom); }
.botao-loja:active { box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.7), 0 1px 0 #7A4A0A, 0 6px 14px rgba(0, 0, 0, 0.35); }
.botao-icone { width: 22px; height: 22px; fill: currentColor; flex: none; }
.botao-loja-texto { display: flex; flex-direction: column; align-items: flex-start; }
.botao-loja-texto small { font-family: var(--corpo); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.02em; line-height: 1.1; }
.botao-loja-texto span { font-size: 1.3rem; }

.selo {
  position: absolute; top: -13px; right: -12px;
  padding: 4px 9px 3px; border: 2px solid #fff; border-radius: 9px;
  background: var(--sangue); color: #fff;
  font-family: var(--titulo); font-size: 0.8125rem; line-height: 1; white-space: nowrap;
  box-shadow: 0 3px 0 #7D1A12;
  transform: rotate(7deg);
}

.botao-portal {
  background: linear-gradient(rgba(127, 230, 255, 0.42), rgba(30, 107, 255, 0.62));
  border-color: var(--portal-claro); color: #fff;
  text-shadow: 0 2px 0 var(--contorno);
  box-shadow: 0 0 0 2px rgba(10, 27, 82, 0.55), 0 0 24px rgba(127, 230, 255, 0.55), inset 0 0 18px rgba(191, 243, 255, 0.5), 0 5px 0 rgba(10, 27, 82, 0.8);
}
.botao-portal:hover { color: #fff; }

.botao-brasa {
  background: linear-gradient(#FFC07A, #FF8A2A 50%, #D9570B);
  border-color: #2A1405; color: #2A1405;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.5), 0 5px 0 #6E2604, 0 12px 26px rgba(0, 0, 0, 0.5);
}
.botao-brasa:hover { color: #2A1405; }

.botao-contorno {
  background: rgba(21, 14, 8, 0.55);
  border-color: rgba(232, 188, 102, 0.75); color: var(--pergaminho);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.65);
}
.botao-contorno:hover { color: #fff; border-color: var(--ouro-velho); }

/* ---------- Abertura ---------- */

.abertura { position: relative; background: var(--noite); padding-bottom: 36px; }

.abertura-palco { position: relative; overflow: hidden; }
.abertura-palco::after {
  /* Clareia o topo para o nome do estúdio e escurece a base para o logotipo. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(6, 17, 58, 0.35), rgba(6, 17, 58, 0) 16%),
    linear-gradient(rgba(10, 27, 82, 0) 62%, rgba(10, 27, 82, 0.75) 84%, var(--noite));
}
.arte { position: relative; aspect-ratio: 680 / 1024; max-height: 82svh; margin: 0 auto; }
.arte img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

.faisca {
  position: absolute; left: var(--x); top: var(--y);
  width: 100px; height: 100px; margin: -50px 0 0 -50px;
  pointer-events: none; opacity: 0; mix-blend-mode: screen;
  background:
    radial-gradient(circle, #fff 0 4px, rgba(191, 243, 255, 0.75) 7px, rgba(127, 230, 255, 0) 26px),
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0 46%, #fff 50%, rgba(255, 255, 255, 0) 54% 100%) center / 100% 3px no-repeat,
    linear-gradient(0deg, rgba(255, 255, 255, 0) 0 46%, #fff 50%, rgba(255, 255, 255, 0) 54% 100%) center / 3px 100% no-repeat;
}
.faisca-espada { --x: 90%; --y: 80.5%; }
.faisca-portao { --x: 60%; --y: 31%; }

.abertura-conteudo {
  position: relative; z-index: 2;
  margin-top: -132px; padding: 0 var(--margem);
  text-align: center;
}
.logo-jogo { margin: 0 auto; width: min(84vw, 400px); }
.logo-svg { width: 100%; height: auto; overflow: visible; font-family: var(--titulo); }
.logo-svg text { paint-order: stroke fill; stroke-linejoin: round; }
.logo-sombra { fill: #040B26; stroke: #040B26; opacity: 0.5; }

.abertura-chamada {
  max-width: 28ch; margin: 10px auto 22px;
  font-size: 1.1875rem; font-weight: 500; line-height: 1.4; color: #fff;
  text-shadow: 0 2px 10px rgba(6, 17, 58, 0.8);
}
.abertura-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 12px; }
.abertura-nota { margin: 16px 0 0; font-size: 0.9375rem; color: var(--texto-suave); }

.vitrine {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  margin: 30px var(--margem) 0;
}
.vitrine-jogo {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: 8px 10px 8px 8px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.06); border: 2px solid rgba(255, 255, 255, 0.12);
  color: #fff; text-decoration: none; line-height: 1.2;
}
.vitrine-jogo:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.vitrine-jogo img { width: 44px; height: 44px; border-radius: 11px; flex: none; }
.vitrine-pelegot { padding-left: 12px; }
.vitrine-pelegot img { width: 96px; height: auto; border-radius: 0; margin: -2px 0 1px -3px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); }
.vitrine-jogo strong { display: block; font-family: var(--titulo); font-weight: 400; font-size: 1rem; }
.vitrine-jogo small { display: block; font-size: 0.8125rem; color: var(--texto-suave); }

/* ---------- O portão de brincar ---------- */

.portao {
  position: relative; overflow: hidden;
  padding: 64px var(--margem) 0;
  color: #0B2266;
  background:
    radial-gradient(60% 40% at 18% 22%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%),
    radial-gradient(50% 30% at 86% 12%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 70%),
    linear-gradient(#3E8FE8, #7EC2FF 46%, #CDEBFF);
}
.portao::before {
  /* Costura com a abertura: o azul da noite desce sobre o céu. */
  content: ""; position: absolute; inset: 0 0 auto; height: 40px;
  background: linear-gradient(var(--noite), rgba(10, 27, 82, 0));
}
.portao::after {
  /* Morros ao fundo, em três verdes, como a beira da estrada do jogo. */
  content: ""; position: absolute; left: -20%; right: -20%; bottom: 0; height: 300px; pointer-events: none;
  background:
    linear-gradient(rgba(10, 27, 82, 0) calc(100% - 90px), rgba(10, 27, 82, 0.55) calc(100% - 30px), var(--noite)),
    radial-gradient(40% 62% at 74% 100%, #5FA53F 0 99.6%, rgba(95, 165, 63, 0) 100%),
    radial-gradient(42% 70% at 22% 100%, #7CBC58 0 99.6%, rgba(124, 188, 88, 0) 100%),
    radial-gradient(70% 52% at 50% 100%, #A3D3EF 0 99.6%, rgba(163, 211, 239, 0) 100%);
}
.portao-texto, .brinquedo { position: relative; z-index: 1; }
.portao-texto { max-width: 34rem; margin: 0 auto 36px; text-align: center; }
.portao h2, .fase h2, .estudio h2 {
  font-size: clamp(2.25rem, 9vw, 3.75rem);
  color: #fff; text-shadow: var(--contorno-2), 0 5px 0 var(--contorno);
  margin-bottom: 14px;
}
.portao-texto p { font-size: 1.125rem; font-weight: 500; }

.brinquedo { max-width: 560px; margin: 0 auto; padding-bottom: 56px; }
.brinquedo-placar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.brinquedo-passo { font-weight: 700; font-size: 1rem; color: #0B2266; }
.tropa {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 16px 4px 8px; border-radius: 999px;
  background: var(--noite); border: 3px solid #fff;
  box-shadow: 0 4px 0 var(--contorno);
}
.tropa-elmo { width: 34px; height: 34px; }
.tropa-numero {
  min-width: 2.2ch; text-align: right;
  font-family: var(--titulo); font-size: 2rem; line-height: 1.1; color: #fff;
  font-variant-numeric: tabular-nums;
}
.tropa.sobe .tropa-numero { animation: sobe 0.5s cubic-bezier(.2, 1.6, .4, 1); color: #9DFFB0; }
.tropa.desce .tropa-numero { animation: desce 0.45s ease-out; color: #FFB3A8; }
@keyframes sobe { 0% { transform: scale(1); } 40% { transform: scale(1.45); } 100% { transform: scale(1); } }
@keyframes desce { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

.arco {
  position: relative;
  padding: 16px 16px 0;
  border: 4px solid #2E261F; border-bottom: 0; border-radius: 22px 22px 0 0;
  background: #8F8576 url("img/pedra.webp") center / 160px;
  background-blend-mode: multiply;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.35), inset 0 -10px 18px rgba(0, 0, 0, 0.25);
}
.arco-ameias {
  position: absolute; left: 14px; right: 14px; bottom: 100%; height: 18px;
  background: #8F8576 url("img/pedra.webp") center / 160px; background-blend-mode: multiply;
  border: 4px solid #2E261F; border-bottom: 0;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 30px, transparent 30px 46px);
  mask: repeating-linear-gradient(90deg, #000 0 30px, transparent 30px 46px);
}
.arco-vaos { position: relative; display: grid; grid-template-columns: 1fr 18px 1fr; height: clamp(180px, 50vw, 240px); }
.arco-castelo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 78% 70%;
  border-radius: 12px 12px 0 0; border: 3px solid #2E261F; border-bottom: 0;
}
.arco-pilar {
  position: relative;
  background: #8F8576 url("img/pedra.webp") center / 160px; background-blend-mode: multiply;
  border-left: 3px solid #2E261F; border-right: 3px solid #2E261F;
  transition: opacity 0.4s 0.3s;
}
.arco-vaos.aberto .arco-pilar { opacity: 0; }

.painel {
  position: relative; display: grid; place-items: center;
  margin: 0; padding: 0; cursor: pointer;
  border: 3px solid rgba(255, 255, 255, 0.9); border-bottom: 0; border-radius: 12px 12px 0 0;
  background: linear-gradient(rgba(150, 236, 255, 0.92), rgba(40, 120, 255, 0.9));
  box-shadow: inset 0 0 26px rgba(255, 255, 255, 0.65), 0 0 28px rgba(127, 230, 255, 0.9);
  transition: filter 0.15s, transform 0.15s;
  overflow: hidden;
}
.painel::before {
  /* Reflexo do vidro. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.5) 0 16%, rgba(255, 255, 255, 0) 16% 27%, rgba(255, 255, 255, 0.2) 27% 33%, rgba(255, 255, 255, 0) 33%);
}
.painel-valor { position: relative; }
.painel.ruim {
  background: linear-gradient(rgba(255, 160, 140, 0.92), rgba(205, 34, 34, 0.9));
  box-shadow: inset 0 0 26px rgba(255, 255, 255, 0.55), 0 0 28px rgba(255, 110, 90, 0.85);
}
.painel:hover { filter: brightness(1.12); }
.painel:active { transform: scale(0.97); }
.painel:disabled { cursor: default; }
.painel-valor {
  font-family: var(--titulo); font-size: clamp(3rem, 15vw, 4.75rem); line-height: 1; color: #fff;
  text-shadow: 3px 0 0 #0A1B52, -3px 0 0 #0A1B52, 0 3px 0 #0A1B52, 0 -3px 0 #0A1B52,
    2.2px 2.2px 0 #0A1B52, -2.2px 2.2px 0 #0A1B52, 2.2px -2.2px 0 #0A1B52, -2.2px -2.2px 0 #0A1B52, 0 6px 0 rgba(10, 27, 82, 0.6);
}
.painel.escolhido { animation: escolhido 0.5s ease-out; }
.painel[data-lado="0"] { transform-origin: 0 50%; }
.painel[data-lado="1"] { transform-origin: 100% 50%; }
.arco-vaos.aberto .painel { pointer-events: none; transition: transform 0.9s cubic-bezier(.3, .7, .2, 1), opacity 0.9s; opacity: 0; }
.arco-vaos.aberto .painel[data-lado="0"] { transform: perspective(700px) rotateY(-82deg); }
.arco-vaos.aberto .painel[data-lado="1"] { transform: perspective(700px) rotateY(82deg); }
.painel.apagado { filter: grayscale(0.7) brightness(0.65); }
@keyframes escolhido { 0% { filter: brightness(2.2); } 100% { filter: brightness(1); } }
.arco-vaos.trocando .painel-valor { animation: entra-valor 0.35s ease-out; }
@keyframes entra-valor { from { transform: translateY(14px) scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }

.exercito {
  display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 2px;
  min-height: 96px; padding: 16px 8px 12px;
  margin: 0 -10px;
  border: 4px solid #2F5E1E; border-radius: 6px 6px 20px 20px;
  background:
    linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0) 30%),
    linear-gradient(#6DB742, #4C8F2C);
  box-shadow: 0 6px 0 #2F5E1E;
}
.exercito svg { width: 26px; height: 26px; }
.exercito svg.novo { animation: novo 0.35s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes novo { from { transform: scale(0); } to { transform: scale(1); } }
.exercito .mais { align-self: center; margin-left: 6px; font-family: var(--titulo); font-size: 1.25rem; color: #fff; text-shadow: 0 2px 0 #2F5E1E; }

.brinquedo-status {
  margin: 22px auto 0; padding: 10px 18px; max-width: 30rem; min-height: 3.4em;
  display: grid; place-items: center; text-align: center;
  border-radius: 14px; background: rgba(10, 27, 82, 0.8);
  font-weight: 600; font-size: 1.0625rem; line-height: 1.4; color: #fff;
}
.brinquedo-recomecar { display: flex; margin: 16px auto 0; }
.brinquedo-recomecar[hidden] { display: none; }

/* ---------- A fase ---------- */

.fase {
  padding: 72px var(--margem) 24px;
  background:
    radial-gradient(80% 50% at 50% 0%, rgba(31, 69, 196, 0.45), rgba(31, 69, 196, 0) 70%),
    var(--noite);
}
.fase-grade { display: grid; gap: 36px; max-width: 1080px; margin: 0 auto; }
.fase-texto { order: -1; max-width: 36rem; }
.fase-texto p { color: var(--texto); }

.fatos { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.fatos li { position: relative; padding-left: 28px; font-weight: 600; }
.fatos li::before {
  content: ""; position: absolute; left: 4px; top: 0.42em;
  width: 11px; height: 11px; transform: rotate(45deg);
  background: var(--ouro); box-shadow: 0 0 0 2px var(--marrom);
}

.celular { margin: 0 auto; width: min(300px, 74vw); }
.celular-tela {
  position: relative; aspect-ratio: 9 / 16;
  border-radius: 34px; overflow: hidden;
  background: #0E1F5E;
  border: 10px solid #0B1236;
  box-shadow: 0 0 0 3px #3550B8, 0 0 0 5px #0B1236, 0 30px 60px rgba(0, 0, 0, 0.55), 0 0 80px rgba(61, 107, 255, 0.35);
}
.celular video { width: 100%; height: 100%; object-fit: cover; }
.celular figcaption { margin-top: 16px; text-align: center; font-size: 0.9375rem; color: var(--texto-suave); }
.video-pausa {
  position: absolute; right: 10px; bottom: 10px;
  width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.7);
  background: rgba(6, 17, 58, 0.65); cursor: pointer;
}
.video-pausa svg { width: 20px; height: 20px; fill: #fff; }
.video-pausa .icone-tocar { display: none; }
.video-pausa.parado .icone-pausa { display: none; }
.video-pausa.parado .icone-tocar { display: inline; }
.video-pausa[hidden] { display: none; }

.capturas {
  list-style: none; margin: 56px calc(-1 * var(--margem)) 0; padding: 6px var(--margem) 18px;
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}
.capturas li { flex: 0 0 min(62vw, 250px); scroll-snap-align: center; }
.capturas figure { margin: 0; }
.capturas img {
  width: 100%; aspect-ratio: 480 / 853; object-fit: cover;
  border-radius: 18px; border: 3px solid rgba(255, 255, 255, 0.16);
  background: #0E1F5E;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.4);
}
.capturas figcaption { margin-top: 10px; text-align: center; font-family: var(--titulo); font-size: 1.0625rem; line-height: 1.15; }

/* ---------- PelegOT ---------- */

.pelegot { position: relative; overflow: hidden; background: var(--carvao); color: var(--pergaminho); }
.pelegot::before, .pelegot::after {
  content: ""; position: absolute; left: 0; right: 0; height: 120px; z-index: 1; pointer-events: none;
}
.pelegot::before { top: 0; background: linear-gradient(var(--noite), rgba(10, 27, 82, 0)); }
.pelegot::after { bottom: 0; background: linear-gradient(rgba(10, 27, 82, 0), var(--noite)); }
.pelegot-fundo { position: absolute; inset: 0 0 auto 0; height: 560px; }
.pelegot-fundo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; }
.pelegot-fundo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(21, 14, 8, 0) 40%, rgba(21, 14, 8, 0.85) 80%, var(--carvao));
}
.pelegot-conteudo { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 300px var(--margem) 96px; text-align: center; }
.pelegot-logo img { width: min(78vw, 380px); margin: 0 auto; filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.85)); }
.pelegot-chamada { max-width: 34rem; margin: 18px auto 0; font-size: 1.125rem; font-weight: 500; }
.pelegot-lema { margin: 34px auto 40px; max-width: 46rem; }
.pelegot-lema p:first-child {
  margin: 0; font-family: var(--titulo); font-size: clamp(2rem, 8.6vw, 3.5rem); line-height: 1.06;
  color: var(--ouro-velho);
  text-shadow: 0 3px 0 #000, 0 0 36px rgba(255, 138, 42, 0.45);
}
.pelegot-lema-traducao { margin: 10px 0 0; color: rgba(243, 230, 207, 0.75); font-style: italic; }
.pelegot-recursos { display: grid; gap: 22px; text-align: left; max-width: 64rem; margin: 0 auto 40px; }
.pelegot-recursos > div { padding-top: 14px; border-top: 2px solid rgba(232, 188, 102, 0.35); }
.pelegot-recursos h3 { font-size: 1.375rem; color: var(--brasa); margin-bottom: 6px; }
.pelegot-recursos p { margin: 0; font-size: 1rem; color: rgba(243, 230, 207, 0.9); }
.pelegot-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.pelegot-nota { margin: 22px auto 0; max-width: 34rem; font-size: 0.9375rem; color: rgba(243, 230, 207, 0.7); }

/* ---------- Estúdio e rodapé ---------- */

.estudio {
  max-width: 40rem; margin: 0 auto; padding: 72px var(--margem) 48px; text-align: center;
}
.estudio h2 { font-size: clamp(2rem, 8vw, 3rem); }
.estudio h2::after { content: ""; display: block; width: 64px; height: 6px; margin: 16px auto 0; border-radius: 3px; background: var(--ouro); box-shadow: 0 3px 0 var(--marrom); }
.estudio p { font-size: 1.125rem; }

.rodape {
  padding: 28px var(--margem) calc(36px + env(safe-area-inset-bottom));
  background: var(--noite-funda); color: var(--texto-suave);
  text-align: center; font-size: 0.9375rem;
}
.rodape p { margin: 0 0 6px; }

/* ---------- Telas largas ---------- */

@media (min-width: 700px) {
  :root { --margem: 32px; }
  .pelegot-recursos { grid-template-columns: 1fr 1fr; gap: 28px 40px; }
}

@media (min-width: 760px) {
  .abertura { height: 100svh; min-height: 640px; max-height: 1100px; padding: 0; }
  .abertura-palco { position: absolute; inset: 0; container-type: size; }
  .abertura-palco::after {
    background:
      linear-gradient(rgba(6, 17, 58, 0.5), rgba(6, 17, 58, 0) 14%),
      linear-gradient(90deg, rgba(6, 17, 58, 0.86), rgba(6, 17, 58, 0.52) 30%, rgba(6, 17, 58, 0) 52%),
      linear-gradient(rgba(10, 27, 82, 0) 70%, rgba(10, 27, 82, 0.7) 92%, var(--noite));
  }
  .arte {
    position: absolute; left: 50%; top: 50%;
    width: max(100cqw, 150cqh); max-height: none; aspect-ratio: 1536 / 1024;
    transform: translate(-50%, -50%);
  }
  .faisca-espada { --x: 58.3%; --y: 81%; }
  .faisca-portao { --x: 16.6%; --y: 24.5%; }

  .abertura-conteudo {
    position: absolute; left: clamp(32px, 5vw, 88px); top: 50%; transform: translateY(-46%);
    width: min(500px, 42vw); margin: 0; padding: 0; text-align: left;
  }
  .logo-jogo { width: 100%; margin: 0 0 0 -2%; }
  .abertura-chamada { margin: 14px 0 26px; max-width: 24ch; font-size: 1.3125rem; }
  .abertura-acoes { justify-content: flex-start; }

  .vitrine {
    position: absolute; right: clamp(24px, 4vw, 64px); bottom: 28px; z-index: 2;
    display: flex; margin: 0;
  }
  .vitrine-jogo { background: rgba(6, 17, 58, 0.72); border-color: rgba(255, 255, 255, 0.22); padding-right: 16px; }
  @supports (backdrop-filter: blur(6px)) {
    .vitrine-jogo { background: rgba(6, 17, 58, 0.55); backdrop-filter: blur(8px); }
  }

  .portao { padding-top: 96px; }

  .fase-grade { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 72px; align-items: center; }
  .fase-texto { order: 0; }
  .celular { width: 320px; }

  .pelegot-fundo { inset: 0; height: auto; }
  .pelegot-fundo img { object-position: center 40%; }
  .pelegot-fundo::after {
    background:
      radial-gradient(48% 60% at 50% 42%, rgba(21, 14, 8, 0.82), rgba(21, 14, 8, 0.25) 75%),
      linear-gradient(rgba(21, 14, 8, 0) 55%, var(--carvao) 92%);
  }
  .pelegot-conteudo { padding-top: 150px; padding-bottom: 96px; }
}

@media (min-width: 960px) {
  .portao {
    display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 64px; align-items: center;
    padding-left: max(40px, calc((100vw - 1120px) / 2)); padding-right: max(40px, calc((100vw - 1120px) / 2));
  }
  .portao-texto { margin: 0 0 56px; text-align: left; }
  .portao::after { height: 230px; }
  .brinquedo { width: 100%; }
  .menu { display: flex; gap: 28px; margin-left: auto; margin-right: 12px; }
  .menu a {
    font-family: var(--titulo); font-size: 1.0625rem; color: #fff; text-decoration: none;
    text-shadow: 0 2px 0 var(--contorno), 0 0 12px rgba(6, 17, 58, 0.6);
  }
  .menu a:hover { color: var(--ouro); }
  .topo { padding-left: 40px; padding-right: 40px; }
  .marca { font-size: 1.625rem; }
}

@media (min-width: 1100px) {
  .capturas {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px;
    max-width: 1240px; margin: 80px auto 0; padding: 0; overflow: visible;
  }
  .capturas li:nth-child(even) { transform: translateY(28px); }
  .pelegot-recursos { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Movimento: a abertura chega de uma vez só, e só para quem não pediu menos movimento ---------- */

@media (prefers-reduced-motion: no-preference) {
  .arte img { animation: arte-entra 1.7s cubic-bezier(.16, .84, .28, 1) both; }
  .logo-linha1 { animation: cai 0.55s 0.3s cubic-bezier(.2, 1.4, .4, 1) both; }
  .logo-linha2 { transform-box: fill-box; transform-origin: 50% 60%; animation: bate 0.5s 0.55s cubic-bezier(.25, 1.3, .4, 1) both; }
  .logo-sombra { animation: aparece 0.3s 0.75s both; }
  .logo-reflexo { animation: reflexo 7s 1.2s ease-in-out infinite; }
  .abertura-palco { animation: tremor 0.35s 0.86s; }
  .abertura-chamada { animation: sobe-texto 0.6s 1s cubic-bezier(.2, .8, .3, 1) both; }
  .abertura-acoes { animation: sobe-texto 0.6s 1.12s cubic-bezier(.2, .8, .3, 1) both; }
  .abertura-nota, .vitrine { animation: aparece 0.6s 1.3s both; }
  .faisca-espada { animation: faisca 5s 1.6s infinite; }
  .faisca-portao { animation: faisca 5s 4.1s infinite; }

  @supports (animation-timeline: scroll()) {
    .abertura-palco .arte { animation: paralaxe linear both; animation-timeline: scroll(root); animation-range: 0 100vh; }
  }
}

@keyframes arte-entra { from { transform: scale(1.14); filter: brightness(0.5) saturate(0.7); } to { transform: none; filter: none; } }
@keyframes cai { from { transform: translateY(-46px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bate { 0% { transform: scale(2.6); opacity: 0; } 55% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes sobe-texto { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tremor { 20% { translate: 4px -3px; } 40% { translate: -4px 2px; } 60% { translate: 2px 2px; } 80% { translate: -1px -1px; } }
@keyframes reflexo { 0% { transform: translateX(0); } 14%, 100% { transform: translateX(240px); } }
@keyframes faisca { 0%, 100% { opacity: 0; transform: scale(0.2) rotate(0deg); } 6% { opacity: 1; transform: scale(1) rotate(45deg); } 14% { opacity: 0; transform: scale(0.3) rotate(90deg); } }
@keyframes paralaxe { to { translate: 0 14%; } }

@media (min-width: 760px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    @keyframes paralaxe-largo { to { translate: 0 10%; } }
    .abertura-palco .arte { animation-name: paralaxe-largo; }
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo-reflexo { display: none; }
  .botao, .painel { transition: none; }
}

/* ---------- Política de privacidade ---------- */

.pagina-texto {
  background:
    radial-gradient(90% 420px at 50% 0%, rgba(31, 69, 196, 0.6), rgba(31, 69, 196, 0) 100%) no-repeat,
    var(--noite);
}
.linguas a {
  display: grid; place-items: center; min-width: 40px; min-height: 34px; padding: 4px 8px;
  border-radius: 999px; text-decoration: none;
  font-family: var(--titulo); font-size: 0.95rem; letter-spacing: 0.02em; color: #fff;
}
.linguas a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.linguas a[aria-current="true"] { background: var(--ouro); color: var(--marrom); }

.politica {
  max-width: 46rem; margin: 0 auto;
  padding: calc(104px + env(safe-area-inset-top)) var(--margem) 48px;
}
.politica .idioma {
  padding: 32px 24px 24px; margin-bottom: 28px;
  border-radius: 20px; background: #F7F3EA; color: #1E2433;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), 0 20px 50px rgba(0, 0, 0, 0.35);
}
.politica .idioma[hidden] { display: none; }
.politica h1 { font-size: clamp(1.75rem, 6vw, 2.25rem); color: var(--noite); margin-bottom: 8px; }
.politica h2 {
  font-size: 1.375rem; color: var(--reino); margin: 30px 0 10px;
  padding-top: 20px; border-top: 2px solid #E3DCCB;
}
.politica a { color: #1C3FB0; }
.politica a:hover { color: var(--noite); }
.politica ul { padding-left: 1.2em; margin: 0 0 1em; }
.politica li { margin-bottom: 6px; }
.politica .atualizada { color: #5A6275; font-size: 0.9375rem; }
.politica :focus-visible { outline-color: var(--reino); }

@media (min-width: 700px) {
  .politica .idioma { padding: 44px 52px 36px; }
}