/* SUPER HEROES — cores da tela inicial do jogo (azul noite, ouro do emblema) */
:root{
  --fundo:#0B1630;
  --fundo-fundo:#070E20;
  --card:#12213F;
  --linha:rgba(242,194,48,.22);
  --ouro:#F2C230;
  --laranja:#FF9F1C;
  --verde:#5FE0B0;
  --osso:#F4F1E8;
  --texto:#A9B8D8;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:18px}
body{
  background:var(--fundo);
  color:var(--osso);
  font-family:"Barlow Semi Condensed",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:1.15rem;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{image-rendering:pixelated;max-width:100%;height:auto;display:block}
a{color:var(--ouro);text-decoration:none}
a:hover{text-decoration:underline}
.env{max-width:900px;margin:0 auto;padding:0 20px}
h1,h2,.botao,.tag,.dl b{font-family:"Oxanium",system-ui,sans-serif}

/* ---- topo: noite, dois fachos e a cidade embaixo ---- */
.topo{
  position:relative;
  overflow:hidden;
  text-align:center;
  background:linear-gradient(#050A16,#152649);
  padding:64px 0 120px;
}
.fachos i{
  position:absolute;top:-10%;width:180px;height:130%;
  background:linear-gradient(rgba(244,241,232,.10),rgba(244,241,232,0) 80%);
  clip-path:polygon(35% 0,65% 0,100% 100%,0 100%);
  transform-origin:50% 0;
}
.fachos i:first-child{left:18%;transform:rotate(14deg);animation:facho 9s ease-in-out infinite alternate}
.fachos i:last-child{right:16%;transform:rotate(-18deg);animation:facho2 11s ease-in-out infinite alternate}
@keyframes facho{to{transform:rotate(-6deg)}}
@keyframes facho2{to{transform:rotate(4deg)}}
@media (prefers-reduced-motion:reduce){.fachos i{animation:none!important}}
.topo-conteudo{position:relative;z-index:1}
.emblema{width:132px;margin:0 auto 18px;border-radius:24px;filter:drop-shadow(0 6px 24px rgba(242,194,48,.25))}
h1{
  font-size:clamp(2.4rem,9vw,4.2rem);
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  line-height:1.05;
  text-shadow:0 4px 0 #000;
}
.lema{
  margin-top:8px;
  color:var(--ouro);
  font-family:"Oxanium",sans-serif;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.sub{max-width:560px;margin:16px auto 0;color:var(--texto)}
.acoes{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:28px}
.tag{
  display:inline-block;margin-top:18px;padding:2px 12px;border-radius:99px;
  background:rgba(95,224,176,.12);color:var(--verde);
  font-size:.8rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.skyline{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:110px}

/* ---- botoes ---- */
.botao{
  display:inline-block;
  padding:12px 24px;
  border-radius:10px;
  border:2px solid var(--ouro);
  background:var(--ouro);
  color:#1A1300;
  font-size:1rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
  cursor:pointer;
}
.botao:hover{text-decoration:none;background:#FFD34D}
.botao.vazado{background:transparent;color:var(--ouro)}
.botao.vazado:hover{background:rgba(242,194,48,.12)}
.botao:focus-visible,.dl:focus-visible,.aviso-fechar:focus-visible{outline:3px solid var(--verde);outline-offset:3px}

/* ---- secoes ---- */
section{margin:56px 0}
h2{
  font-size:1rem;
  font-weight:800;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ouro);
  margin-bottom:12px;
}
section p{color:var(--texto)}

/* ---- downloads ---- */
.dl-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:18px}
.dl{
  display:flex;flex-direction:column;gap:2px;
  padding:18px;border-radius:12px;
  background:var(--card);border:1px solid var(--linha);
  color:var(--osso);
}
.dl:hover{text-decoration:none;border-color:var(--ouro)}
.dl b{font-size:1.15rem;letter-spacing:.03em}
.dl span{color:var(--texto);font-size:.95rem}
.dl.sugerido{border-color:var(--ouro);box-shadow:0 0 0 1px var(--ouro) inset}
.dl.sugerido::after{content:"Seu aparelho";margin-top:6px;font-family:"Oxanium",sans-serif;font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ouro)}
.dl-web{background:transparent;border-style:dashed}
.dl-aviso{
  margin-top:14px;padding:12px 16px;border-radius:10px;
  background:rgba(242,194,48,.08);border:1px solid var(--linha);font-size:1rem;
}
.dl-aviso b{color:var(--osso)}
.dl-ajuda{margin-top:16px;color:var(--texto);font-size:1rem}
.dl-ajuda summary{cursor:pointer;color:var(--osso)}
.dl-ajuda ul{margin:10px 0 0 22px}
.dl-ajuda li{margin:6px 0}

/* ---- vitrine ---- */
.vitrine figure{margin:18px 0 34px}
.vitrine img{
  width:100%;border-radius:12px;border:1px solid var(--linha);
  image-rendering:auto;
}
.vitrine figcaption{margin-top:10px;color:var(--texto)}
.vitrine figcaption b{color:var(--osso);margin-right:6px}

.lado-a-lado{display:grid;grid-template-columns:1fr 1fr;gap:32px}

/* ---- rodape ---- */
footer{
  border-top:1px solid rgba(244,241,232,.08);
  margin-top:64px;padding:28px 20px 48px;
  text-align:center;color:var(--texto);font-size:1rem;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
footer img{display:inline-block}

/* ---- aviso da versao de navegador ---- */
dialog.aviso{
  margin:auto;max-width:460px;width:calc(100% - 32px);
  padding:26px;border-radius:14px;
  background:var(--card);color:var(--osso);border:1px solid var(--ouro);
}
dialog.aviso::backdrop{background:rgba(3,6,14,.75)}
dialog.aviso p{color:var(--texto);margin-bottom:20px}
dialog.aviso p b{color:var(--osso)}
.aviso-acoes{display:flex;flex-direction:column;gap:10px}
.aviso-acoes .botao{text-align:center}
.aviso-fechar{
  background:none;border:0;color:var(--texto);font:inherit;cursor:pointer;padding:8px;
}
.aviso-fechar:hover{color:var(--osso)}

@media (max-width:720px){
  .dl-grade{grid-template-columns:1fr 1fr}
  .lado-a-lado{grid-template-columns:1fr;gap:8px}
}
@media (max-width:420px){
  .topo{padding:48px 0 100px}
  .emblema{width:108px}
  .acoes .botao{width:100%}
}