/* RAID ALIEN — mesma estrutura do site do Tower Feint, cores do jogo
   (amarelo do título, verde-água do JOGAR, fundo da tela inicial) */
:root{
  --amarelo:#FFD23F;
  --verde:#4FE3C1;
  --fundo:#14141B;
  --fundo-claro:#1F1F2A;
  --osso:#EEF0F5;
  --texto:#A6ABBD;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:19px}
body{
  background:var(--fundo);
  color:var(--osso);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:1.2rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--verde);text-decoration:none}
a:hover{text-decoration:underline}
.env{max-width:880px;margin:0 auto;padding:0 24px}

/* ---- topo ---- */
header{padding:64px 0 48px;text-align:center}
.icone{width:96px;height:96px}
h1{
  margin-top:10px;
  font-size:3.4rem;
  line-height:1.1;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--amarelo);
}
.lema{margin-top:14px;color:var(--texto)}
.lema b{color:var(--verde);font-weight:600}

.risco{
  height:3px;
  background:linear-gradient(90deg,transparent,var(--verde) 30%,var(--amarelo) 70%,transparent);
  opacity:.5;
  margin:0 0 48px;
}

/* ---- card do jogo ---- */
.jogo{
  background:var(--fundo-claro);
  border:1px solid rgba(79,227,193,.2);
  border-radius:14px;
  overflow:hidden;
}
.capa{display:block;width:100%;height:auto;border-bottom:1px solid rgba(79,227,193,.14)}
.jogo-txt{padding:24px 28px 28px;text-align:center}
.jogo p{color:var(--texto);font-size:1.05rem;max-width:640px;margin:0 auto}
.tag{
  display:inline-block;
  margin-bottom:12px;
  padding:2px 12px;
  border-radius:99px;
  background:rgba(255,210,63,.14);
  color:var(--amarelo);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.botao{
  display:inline-block;
  margin:22px 0 0;
  padding:15px 40px;
  border-radius:10px;
  background:var(--verde);
  color:var(--fundo);
  font-size:1.05rem;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
}
.botao:hover{background:#74ecd0;text-decoration:none}

/* ---- seções ---- */
section{margin:56px 0}
h3{
  font-size:1.05rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--amarelo);
  margin-bottom:16px;
}

/* ---- downloads ---- */
.dl-grade{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.dl{
  position:relative;
  overflow:hidden;
  display:flex;flex-direction:column;gap:4px;
  background:var(--fundo-claro);
  border:1px solid rgba(79,227,193,.2);
  border-radius:12px;
  padding:18px 14px;
  text-align:center;
  transition:border-color .15s,transform .1s;
}
.dl:hover{border-color:var(--verde);text-decoration:none}
.dl:active{transform:scale(.97)}
.dl b{color:var(--osso);font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase}
.dl span{color:var(--texto);font-size:.9rem;line-height:1.35}
.dl-web{border-style:dashed}
.dl .barra{position:absolute;left:0;bottom:0;height:4px;width:0;background:var(--verde);transition:width .2s}
.dl.baixando{border-color:var(--verde);cursor:progress}
.dl-aviso{margin:14px 0 0;padding:12px 14px;border-left:3px solid var(--verde);background:rgba(255,255,255,.04);color:var(--texto);font-size:.95rem}
.dl-aviso b{color:var(--osso)}
.dl-ajuda{margin-top:16px;color:var(--texto);font-size:.95rem}
.dl-ajuda summary{cursor:pointer;color:var(--verde)}
.dl-ajuda ul{margin:10px 0 0 22px}
.dl-ajuda li{margin:6px 0}
.dl-ajuda b{color:var(--osso)}

/* ---- vitrine ---- */
.vitrine{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vitrine h3{grid-column:1/-1;margin-bottom:0}
.vitrine figure{
  background:var(--fundo-claro);
  border:1px solid rgba(79,227,193,.2);
  border-radius:14px;
  overflow:hidden;
}
.vitrine img{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#0b0b10}
.vitrine figcaption{padding:12px 16px 16px;color:var(--texto);font-size:1rem;line-height:1.45}
.vitrine figcaption b{display:block;color:var(--osso);font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase}

/* ---- rodapé ---- */
footer{
  border-top:1px solid rgba(238,240,245,.08);
  margin-top:72px;
  padding:32px 0 56px;
  text-align:center;
  color:var(--texto);
  font-size:1rem;
}
footer img{width:24px;height:24px;vertical-align:middle;margin-right:8px}
footer nav{margin-top:10px}
footer nav a{margin:0 10px}

/* ---- aviso antes do /jogar ---- */
dialog.aviso{
  margin:auto;
  max-width:min(440px,calc(100vw - 32px));width:100%;
  background:var(--fundo-claro);color:var(--osso);
  border:1px solid var(--verde);border-radius:12px;padding:24px 22px;
}
dialog.aviso::backdrop{background:rgba(6,6,10,.8)}
dialog.aviso h3{margin:0 0 10px}
dialog.aviso p{margin:0 0 18px;color:var(--texto);line-height:1.5}
dialog.aviso p b{color:var(--osso)}
.aviso-acoes{display:flex;flex-direction:column;gap:10px}
.aviso-acoes .botao{margin:0}
.botao-2{background:transparent;color:var(--verde);border:1px solid var(--verde)}
.botao-2:hover{background:rgba(79,227,193,.1)}
.aviso-fechar{background:none;border:0;color:var(--texto);font:inherit;font-size:.9rem;cursor:pointer;padding:6px 0}
.aviso-fechar:hover{color:var(--osso)}

@media(max-width:700px){
  .dl-grade{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  html{font-size:17px}
  header{padding:40px 0 32px}
  h1{font-size:2.6rem}
  .jogo-txt{padding:20px}
  .botao{display:block}
  .vitrine{grid-template-columns:1fr;gap:18px}
}