:root { --navy:#03112f; --pink:#fa2b61; --yellow:#ffd128; --paper:#f8f7f3; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--navy); font-family:Nunito,Arial,sans-serif; background:var(--paper) radial-gradient(#ddd 1px,transparent 1px); background-size:15px 15px; }

.hero { position:relative; min-height:720px; height:min(908px,100vh); overflow:hidden; background:var(--paper) radial-gradient(#dedede 1px,transparent 1px); background-size:15px 15px; }
.hero-bg { display:none; }
.community-top { position:absolute; top:21px; right:48px; display:flex; align-items:center; gap:8px; padding:13px 18px; background:#080808; box-shadow:4px 4px 0 var(--pink); color:#fff; font-size:.78rem; font-weight:900; text-decoration:none; }
.community-top img { width:17px; height:17px; object-fit:contain; }
.hero-copy { position:absolute; top:52%; left:clamp(72px,10vw,190px); max-width:600px; transform:translateY(-33%); }
.title-logo { position:absolute; top:-310px; left:calc(-1 * clamp(32px,10vw,185px)); width:190px; margin:0; }
.ready,.game-type,.tag,dialog h2,.join h2 { font-family:Anton,Impact,sans-serif; letter-spacing:.05em; }
.ready { margin:0; font-size:clamp(4.5rem,8vw,7.4rem); letter-spacing:.02em; line-height:.9; }
.game-type { margin:33px 0 42px; font-size:clamp(1.4rem,2vw,2rem); line-height:1.1; white-space:nowrap; }
.play-store { display:inline-flex; align-items:center; gap:13px; padding:15px 23px; background:#080808; box-shadow:4px 4px 0 var(--pink); color:#fff; font-size:.9rem; font-weight:900; line-height:1; text-decoration:none; }
.play-store img { width:35px; height:35px; object-fit:contain; }
.play-store b { font-size:1.35rem; }
.hero-copy small { display:block; margin-top:16px; font-size:.63rem; font-weight:900; letter-spacing:.18em; }
.hero-character { position:absolute; right:clamp(24px,24vw,340px); bottom:clamp(130px,24vh,100px); height:min(420px,64vh); object-fit:contain; background:transparent; filter:none; }

.trailer { max-width:1100px; margin:auto; padding:70px 20px 105px; }
.tag { width:max-content; margin:0 auto 16px; padding:7px 25px; background:#080808; clip-path:polygon(8% 0,100% 0,92% 100%,0 100%); color:#fff; font-size:1.3rem; }
.video { position:relative; width:100%; padding:0; overflow:hidden; border:4px solid #080808; background:#111; box-shadow:8px 8px 0 var(--pink); cursor:pointer; }
.video img { display:block; width:100%; aspect-ratio:16/8.1; object-fit:cover; opacity:.85; }
.video b { position:absolute; top:50%; left:50%; display:grid; width:76px; height:76px; place-items:center; transform:translate(-50%,-50%); border:3px solid #fff; border-radius:50%; background:#ff164f; color:#fff; font-size:2rem; padding-left:4px; }

.join { position:relative; isolation:isolate; display:grid; min-height:520px; place-items:center; overflow:hidden; background:#152c79; color:#fff; }
/* A poeira fica atrás do título e não afeta a leitura do conteúdo. */
.join::before { position:absolute; z-index:-1; inset:0; background:var(--community-background-image,url('img/community-dust.png')) center/cover no-repeat; content:''; mix-blend-mode:screen; opacity:.48; pointer-events:none; }
.join-text { position:relative; z-index:1; padding:70px 20px; text-align:center; }
.join h2 { margin:0 0 22px; color:var(--yellow); font-size:clamp(3.4rem,7vw,7rem); letter-spacing:.02em; line-height:1.04; }
.join p { max-width:520px; margin:0 auto 23px; font-weight:800; }
.join a { display:inline-flex; align-items:center; gap:9px; padding:13px 18px; background:var(--pink); box-shadow:4px 4px 0 #fff; color:#fff; font-size:.8rem; font-weight:900; text-decoration:none; }
.join a img { width:21px; height:21px; object-fit:contain; }

footer { position:relative; overflow:hidden; padding:56px 20px 30px; background:#020715; color:#fff; text-align:center; }
footer::before { position:absolute; inset:0; background-image:radial-gradient(#fff 1px,transparent 1px); background-size:60px 60px; content:''; opacity:.16; transform:rotate(-13deg) scale(1.4); }
footer > * { position:relative; }
.footer-logo { width:min(240px,68vw); margin-bottom:10px; }
.social { display:flex; justify-content:center; gap:20px; margin:18px 0 28px; }
.social a,.social img { display:block; width:31px; height:31px; object-fit:contain; }
.links { display:flex; justify-content:center; gap:28px; margin-bottom:18px; }
.links a { color:#fff; font-size:.83rem; font-weight:900; text-decoration:none; }
footer small { color:#9ba2b3; font-size:.7rem; font-weight:800; }

dialog { width:min(900px,92vw); border:0; background:#050711; box-shadow:0 30px 80px #000; color:#fff; padding:22px; }
dialog::backdrop { background:#000d; }
dialog h2 { margin:0 0 15px; font-size:1.5rem; }
.close { position:absolute; top:8px; right:12px; width:36px; height:36px; border:0; border-radius:50%; background:var(--pink); color:#fff; cursor:pointer; font-size:1.7rem; }
.trailer-player { aspect-ratio:16/9; background:#111; }
iframe { width:100%; height:100%; border:0; }
.legal { position:fixed; z-index:50; inset:0; display:none; overflow-y:auto; padding:116px 24px 88px; background:#050505; color:#f5f5f5; }
.legal:target { display:block; }
html:has(.legal:target),
body:has(.legal:target) { overflow:hidden; }
.legal-brand { position:fixed; z-index:60; top:12px; left:24px; display:block; width:144px; }
.legal-brand img { display:block; width:100%; height:auto; }
.legal-shell { display:grid; grid-template-columns:minmax(190px,.72fr) minmax(0,1.28fr); gap:clamp(36px,7vw,112px); max-width:1120px; margin:0 auto; align-items:start; }
.legal-intro { position:sticky; top:96px; padding-top:0; }
.legal-back { display:inline-block; margin:0 0 34px; color:#aaa; font-size:.8rem; font-weight:800; text-decoration:none; }
.legal-back:hover { color:#fff; }
.legal-label { width:max-content; margin:0 0 12px; padding:4px 9px; border-radius:20px; background:#4d6b96; color:#ffffff; font-size:.62rem; font-weight:900; letter-spacing:.08em; }
.legal h1 { max-width:300px; margin:0 0 12px; font-family:Anton,Impact,sans-serif; font-size:clamp(2.2rem,4vw,3.2rem); line-height:1.02; }
.legal-summary { max-width:300px; margin:0; color:#aaa; font-size:.8rem; line-height:1.6; }
.legal-sections { display:grid; gap:12px; }
.legal-card { display:grid; grid-template-columns:20px minmax(0,1fr); gap:12px; padding:18px 20px; border:1px solid #1c1c1c; border-radius:14px; background:#141414; }
.legal-number { display:grid; width:20px; height:20px; place-items:center; border-radius:50%; background:#2e7df3; color:#fbfcfc; font-size:.64rem; font-weight:900; }
.legal-card h2 { margin:1px 0 7px; color:#f3f3f3; font-size:.95rem; font-weight:900; line-height:1.3; }
.legal-card p { margin:0; color:#aaa; font-size:.72rem; line-height:1.55; }

@media (min-width:781px) and (max-width:1280px) {
  .legal { padding-top:32px; }
  .legal-brand { display:none; }
  .legal-intro { top:16px; }
}

@media (max-width:780px) {
  .legal { padding:22px 16px 82px; }
  .legal-shell { grid-template-columns:minmax(0,1fr); gap:24px; }
  .legal-intro { position:relative; top:auto; padding-top:0; }
  .legal-brand { display:none; }
  .legal-back { margin-bottom:20px; }
  .legal h1,.legal-summary { max-width:none; }
  .legal-card { padding:16px; }
}

@media (max-width:780px) {
  .hero { height:760px; min-height:auto; }
  .hero-copy { top:190px; left:25px; transform:none; }
  .title-logo { position:static; width:245px; margin:0 0 25px; }
  .ready { font-size:1.5rem; }
  .game-type { margin:7px 0 25px; font-size:1.15rem; white-space:normal; }
  .play-store { gap:10px; padding:9px 18px; font-size:.72rem; }
  .play-store img { width:29px; height:29px; }
  .play-store b { font-size:1.15rem; }
  .hero-character { right:-15px; bottom:0; height:330px; }
  .community-top { top:15px; right:15px; padding:10px 15px; font-size:.63rem; }
  .trailer { padding:54px 16px 78px; }
  .join { min-height:460px; }
  .join h2 { font-size:3.1rem; line-height:1.02; }
}

@media (max-width:430px) {
  .hero { height:720px; }
  .hero-character { right:-5px; height:260px; }
  .video b { width:60px; height:60px; font-size:1.5rem; }
  .links { gap:19px; }
}

/* Fundo amarelo com o padrão de caveiras enviado. */
:root { --paper:#ffd128; }

body,
.hero {
  background-color:#ffd128;
  background-image:url('img/skull-pattern.png');
  background-repeat:repeat;
  background-size:500px 500px;
}

/* Deslocamento continuo de um bloco completo, sem salto ao reiniciar. */
@keyframes skull-background-walk {
  from { background-position:0 0; }
  to { background-position:500px 500px; }
}

body,
.hero,
.brand-hero {
  animation:skull-background-walk 45s linear infinite;
}

@media (prefers-reduced-motion:reduce) {
  body,
  .hero,
  .brand-hero { animation:none; }
}

/* Rodapé em layout institucional, inspirado na referência enviada. */
.site-footer {
  position:relative;
  overflow:hidden;
  padding:48px 20px 62px;
  background:#000;
  color:#fff;
  text-align:left;
}

.site-footer::before { display:none; }

.site-footer::after {
  position:absolute;
  z-index:0;
  top:0;
  right:0;
  left:0;
  height:16px;
  background:#1d1c22 url('img/skull-pattern.png') center / 112px repeat;
  content:'';
  filter:brightness(.25);
  opacity:.9;
}

.footer-inner { position:relative; z-index:1; max-width:1136px; margin:0 auto; }

.footer-toolbar,
.footer-social-row,
.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.footer-toolbar {
  min-height:112px;
  border-bottom:1px solid #2a2a2a;
}

.language-button {
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 13px;
  border:1px solid #d8d8d8;
  border-radius:5px;
  background:transparent;
  color:#fff;
  font:800 .75rem Nunito,Arial,sans-serif;
}

.language-button > span:first-child { font-size:1.3rem; line-height:0; }
.chevron { margin-left:4px; font-size:1rem; }
.country { color:#898989; font-size:.75rem; font-weight:800; }
.country span { color:#a6a6a6; font-size:.65rem; margin-right:7px; }

.footer-social-row { min-height:100px; border-bottom:1px solid #2a2a2a; }
.follow-block p { margin:0 0 10px; font-size:.8rem; font-weight:900; }
.social-icons { display:flex; align-items:center; gap:15px; }
.social-icons a { display:grid; width:26px; height:26px; place-items:center; color:#fff; }
.social-icons svg { width:24px; height:24px; fill:currentColor; }
.social-icons svg rect,.social-icons svg circle { fill:none; stroke:currentColor; stroke-width:2.1; }
.social-icons .cut { fill:#000; stroke:none; }

.store-buttons { display:flex; gap:12px; }
.store-button {
  display:flex;
  align-items:center;
  gap:8px;
  min-width:140px;
  padding:7px 11px;
  border:1px solid #777;
  border-radius:6px;
  color:#fff;
  font-size:.57rem;
  font-weight:800;
  line-height:1.1;
  text-decoration:none;
}

.store-button strong { display:block; margin-top:2px; font-size:1.08rem; letter-spacing:-.04em; }
.store-mark { font-size:1.55rem; line-height:1; }
.play-mark { color:#ffd128; font-size:1.35rem; }

.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:14px 25px;
  padding:27px 0 37px;
}

.footer-links a { color:#fff; font-size:.77rem; font-weight:900; text-decoration:none; }

.footer-bottom { align-items:flex-end; }
.footer-bottom address { color:#9c9c9c; font-size:.76rem; font-style:normal; font-weight:700; line-height:1.6; }
.site-footer .footer-logo { width:86px; margin:0; filter:brightness(0) invert(1); }

@media (max-width:680px) {
  .site-footer { padding:35px 22px 42px; }
  .footer-toolbar { min-height:82px; }
  .footer-social-row { align-items:flex-start; flex-direction:column; gap:25px; padding:27px 0; }
  .store-buttons { width:100%; }
  .store-button { min-width:0; flex:1; }
  .footer-links { gap:14px 20px; padding-bottom:30px; }
}

@media (max-width:430px) {
  .footer-toolbar { align-items:flex-start; flex-direction:column; justify-content:center; gap:14px; }
  .store-buttons { flex-direction:column; }
  .store-button { min-height:50px; }
  .footer-bottom { align-items:flex-start; flex-direction:column; gap:26px; }
}

/* Ajustes finais: ícones reais do rodapé e versão limpa para celular. */
.site-footer::after { display:none; }

.language-icon {
  width:20px;
  height:20px;
  object-fit:contain;
}

.country {
  display:inline-flex;
  align-items:center;
}

.country .pin-icon {
  width:18px;
  height:18px;
  margin-right:7px;
  object-fit:contain;
}

.store-button {
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
}

.store-button img {
  display:block;
  width:auto;
  height:42px;
  object-fit:contain;
}

@media (max-width:780px) {
  .hero {
    min-height:640px;
    height:640px;
  }

  .hero-copy {
    top:88px;
    right:24px;
    left:24px;
    max-width:320px;
  }

  .title-logo {
    width:138px;
    margin:0 0 46px;
  }

  /* Oculta a segunda imagem branca no celular. */
  .hero-character,
  .hero-bg {
    display:none;
  }
}

@media (max-width:680px) {
  .store-buttons {
    flex-direction:column;
    gap:12px;
  }

  .store-button {
    display:flex;
    width:100%;
    min-height:50px;
    align-items:center;
    padding:5px 11px;
    border:1px solid #777;
    border-radius:6px;
  }

  .store-button img { height:40px; }
}

/* Seletor de idioma funcional. */
.language-picker { position:relative; }
.language-button { cursor:pointer; }
.chevron { display:inline-block; transition:transform .18s ease; }
.language-picker.is-open .chevron { transform:rotate(180deg); }

.language-menu {
  position:absolute;
  z-index:10;
  top:calc(100% + 8px);
  left:0;
  display:none;
  min-width:154px;
  overflow:hidden;
  border:1px solid #646464;
  border-radius:7px;
  background:#151515;
  box-shadow:none;
}

.language-picker.is-open .language-menu { display:grid; }

.language-menu button {
  padding:11px 13px;
  border:0;
  border-bottom:1px solid #313131;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font:800 .78rem Nunito,Arial,sans-serif;
  text-align:left;
}

.language-menu button:last-child { border-bottom:0; }
.language-menu button:hover,.language-menu button.is-active { background:var(--pink); }

/* Cabeçalho mobile: logo pequena centralizada e sem a segunda imagem branca. */
@media (max-width:780px) {
  .hero {
    min-height:690px;
    height:690px;
  }

  .title-logo { display:none !important; }

  .hero-character {
    position:absolute;
    z-index:1;
    top:92px;
    right:auto;
    bottom:auto;
    left:50%;
    display:block;
    width:min(170px,44vw);
    height:auto !important;
    max-height:180px;
    transform:translateX(-50%);
    object-fit:contain;
  }

  .hero-copy {
    z-index:2;
    top:294px;
    right:20px;
    left:20px;
    max-width:none;
    text-align:center;
  }

  .play-store { margin:0 auto; }
}

/* Remove as bordas largas que apareciam em volta das lojas no celular. */
@media (max-width:680px) {
  .store-buttons {
    width:auto;
    align-items:flex-start;
  }

  .store-button {
    display:block;
    width:auto;
    min-height:0;
    padding:0;
    border:0;
    border-radius:0;
  }

  .store-button img { display:block; height:40px; }
}

/* Alinha a seta do seletor de idioma ao centro do botão. */
.language-button {
  min-height:42px;
  justify-content:center;
}

.language-button .chevron {
  display:inline-flex;
  width:14px;
  height:14px;
  align-items:center;
  justify-content:center;
  margin-left:2px;
  line-height:1;
}

/* Logo oficial na versão mobile. */
@media (max-width:780px) {
  .hero-character { display:none !important; }

  .hero-copy {
    top:84px;
    text-align:center;
  }

  .title-logo {
    position:static !important;
    display:block !important;
    width:min(210px,62vw);
    margin:0 auto 72px;
  }
}

.trailer-fallback {
  margin:15px 0 0;
  color:#d0d0d0;
  font-size:.82rem;
  font-weight:800;
  text-align:center;
}

.trailer-fallback a { color:var(--yellow); }


/* Alinhamento definitivo do seletor, independente da fonte. */
.language-button { align-items:center; line-height:1.25; }
.language-button #languageCurrent { display:block; line-height:1.25; }
.language-button .chevron {
  display:block;
  flex:0 0 16px;
  width:16px;
  height:16px;
  margin:0 0 0 2px;
  align-self:center;
  transform-origin:center;
}

/* Capa mobile centralizada nos dois eixos. */
@media (max-width:780px) {
  .hero {
    display:flex;
    align-items:center;
    justify-content:center;
    height:auto;
    min-height:690px;
    min-height:max(690px, 100svh);
    padding:100px 20px 60px;
  }
  .hero-copy {
    position:relative;
    inset:auto;
    transform:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    max-width:440px;
    margin:0 auto;
    text-align:center;
  }
  .title-logo {
    position:static !important;
    display:block !important;
    width:min(210px, 62vw);
    height:auto;
    margin:0 auto 48px;
  }
  .hero-copy .ready, .hero-copy .game-type, .hero-copy small {
    width:100%;
    text-align:center;
  }
  .play-store { align-self:center; justify-content:center; margin:0 auto; }
  .hero-character, .hero-bg { display:none !important; }
  .community-top { z-index:3; max-width:calc(100% - 30px); }
}

#trailerModal { max-height:90vh; max-height:90dvh; overflow:auto; }
#trailerModal h2 { padding-right:36px; }
#trailerModal .trailer-player { display:block; width:100%; aspect-ratio:16/9; }
#trailerFrame { display:block; width:100%; height:100%; border:0; }

/* Logo e comunidade na mesma linha, apenas no desktop. */
.hero-topbar { display:contents; }
.hero-actions { display:flex; align-items:center; gap:16px; }
.site-menu-button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; flex:0 0 54px; width:54px; height:54px; padding:10px; border:3px solid #080808; border-radius:2px; background:#242424; box-shadow:3px 4px 0 #080808; cursor:pointer; }
.site-menu-button span { width:30px; height:6px; border:1px solid #080808; border-radius:3px; background:#fff; box-shadow:0 1px 0 #080808; }
.site-menu-button img { width:27px; height:27px; }
.site-menu-button:hover { background:#383838; }
.site-menu-button:focus-visible { outline:3px solid var(--pink); outline-offset:5px; }
.site-menu { position:fixed; inset:16px 16px auto; width:calc(100% - 32px); max-width:none; max-height:calc(100dvh - 32px); margin:0; padding:20px 28px 64px; border:0; border-radius:10px; background:#080808; background-image:linear-gradient(90deg,#080808dd,#1a1a1acc,#080808dd),url('img/skull-pattern.png'); background-size:auto,320px; color:#fff; }
.site-menu::backdrop { background:#0008; }
body:has(.site-menu[open]) { overflow:hidden; }
.site-menu-header { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; }
.site-menu-brand img { display:block; width:190px; max-width:100%; }
.site-menu-actions { display:flex; align-items:center; gap:16px; }
.site-menu-links { display:flex; flex-direction:column; align-items:flex-start; gap:20px; margin:20px 0 30px 20%; }
.site-menu-links a,.site-menu-links button { position:relative; padding:0 0 8px; border:0; background:transparent; color:#fff; text-decoration:none; font:900 clamp(18px,2vw,26px)/1.2 Nunito,Arial,sans-serif; text-align:left; cursor:pointer; }
.site-menu-links [aria-current="page"]::after,.site-menu-links a:hover::after,.site-menu-links button:hover::after,.site-menu-links :focus-visible::after { content:""; position:absolute; left:0; right:0; bottom:0; height:5px; background:var(--pink); transform:rotate(-1deg); }
@media(max-width:600px) {
  .site-menu { inset:8px 8px auto; width:calc(100% - 16px); padding:18px 16px 40px; }
  .site-menu-brand img { width:100px; }
  .site-menu-actions { gap:10px; }
  .site-menu-actions .news-button { font-size:.65rem; }
  .site-menu-links { margin:40px 0 0; }
}
.hero-actions .community-top { position:static; }
.news-button { display:inline-flex; align-items:stretch; padding:0; min-height:48px; border:3px solid #080808; border-radius:2px; background:#242424; color:#fff; box-shadow:3px 4px 0 #080808; cursor:pointer; text-align:left; font:900 .9rem/1 Nunito,Arial,sans-serif; }
.news-button-label { display:flex; flex-direction:column; justify-content:center; padding:8px 12px; }
.news-button-id { display:grid; place-items:center; align-self:stretch; min-width:48px; padding:8px; background:var(--pink); color:#080808; font-family:Anton,Impact,sans-serif; font-size:1.7rem; }
.news-button:hover { background:#383838; }
.news-button:focus-visible { outline:3px solid var(--pink); outline-offset:6px; }
@media (max-width:780px) {
  .hero-actions { position:absolute; z-index:3; top:15px; left:15px; right:15px; justify-content:flex-end; gap:12px; flex-wrap:nowrap; }
  .hero-actions .community-top { max-width:100%; padding:12px 10px; font-size:.6rem; }
  .news-button { min-height:42px; font-size:.7rem; }
  .news-button-label { padding:6px 8px; }
  .news-button-id { min-width:36px; font-size:1.4rem; }
}
.desktop-brand { display:none; }
@media (min-width:781px) {
  .hero-topbar {
    position:absolute;
    z-index:3;
    top:21px;
    left:48px;
    right:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
  }
  .desktop-brand { display:block; flex:0 0 190px; width:190px; }
  .desktop-brand img { display:block; width:100%; height:auto; }
  .hero-topbar .community-top { position:static; flex-shrink:0; }
  .hero-copy .title-logo { display:none; }
}

@media (max-width:1610px) {
  .hero-character { display:none !important; }
}

/* Logo Marcos do rodapé, com as cores originais. */
.site-footer .footer-logo {
  width:90px;
  max-width:100%;
  height:auto;
  margin:0;
  object-fit:contain;
  filter:none;
}


/* O menu precisa ultrapassar o limite do rodapé para exibir as opções. */
.site-footer { overflow: visible; }
.footer-toolbar { position: relative; z-index: 22; }
.footer-inner { z-index: 2; }
.language-picker { position: relative; z-index: 23; }
.language-menu { z-index: 24; }

/* Barra de rolagem preta conforme a referência. */
html {
  scrollbar-color: #000 #ededed;
  scrollbar-width: thin;
}

html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: #ededed; }
html::-webkit-scrollbar-thumb {
  background: #000;
  border: 2px solid #ededed;
  border-radius: 0;
}
html::-webkit-scrollbar-thumb:hover { background: #252525; }

body:has(.legal:target) .site-footer {
  position:fixed;
  z-index:55;
  right:0;
  bottom:0;
  left:0;
  padding:10px 24px;
  border-top:1px solid #252525;
  background:#020715;
  text-align:left;
}

body:has(.legal:target) .site-footer::before,
body:has(.legal:target) .site-footer::after,
body:has(.legal:target) .footer-toolbar,
body:has(.legal:target) .footer-social-row,
body:has(.legal:target) .footer-bottom address { display:none; }

body:has(.legal:target) .site-footer .footer-inner {
  display:flex;
  min-height:44px;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  max-width:1120px;
  margin:0 auto;
}

body:has(.legal:target) .footer-links {
  flex:1;
  min-width:0;
  flex-wrap:nowrap;
  gap:12px 24px;
  overflow-x:auto;
  padding:0;
  margin:0;
  scrollbar-width:none;
}

body:has(.legal:target) .footer-links::-webkit-scrollbar { display:none; }
body:has(.legal:target) .footer-links a { flex:0 0 auto; white-space:nowrap; }
body:has(.legal:target) .footer-bottom { display:block; flex:0 0 auto; }
body:has(.legal:target) .site-footer .footer-logo { display:block; width:90px; max-width:30vw; height:auto; margin:0; }

@media (max-width:780px) {
  body:has(.legal:target) .site-footer { padding:10px 16px; }
  body:has(.legal:target) .site-footer .footer-inner { gap:12px; }
  body:has(.legal:target) .footer-links { gap:12px 18px; }
}

/* Ícone rosa ao lado da descrição do jogo. */
.game-type { display:flex; align-items:flex-start; gap:.3em; }
.game-type-icon { display:block; flex:0 0 auto; width:.8em; height:auto; object-fit:contain; }
.game-type > span { min-width:0; text-align:left; }
@media (max-width:780px) {
  .hero-copy .game-type { justify-content:center; }
}

/* Três raios rosa junto ao título, como na referência. */
.ready { display:flex; align-items:center; gap:.16em; }
.ready-lightning { display:block; flex:0 0 auto; width:auto; height:.85em; object-fit:contain; }
.ready > span { min-width:0; }
@media (max-width:780px) {
  .hero-copy .ready { justify-content:center; }
  .ready-lightning { width:auto; height:.85em; }
}

/* Pop-ups institucionais do rodapé. */
.info-modal { width:min(860px, calc(100vw - 32px)); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); padding:32px 42px; overflow-y:auto; border:0; border-radius:5px; background:#fff; color:#111; box-shadow:0 20px 80px #0008; font-family:Nunito,Arial,sans-serif; }
.info-modal::backdrop { background:#000b; }
.info-modal div { aspect-ratio:auto; background:transparent; }
.info-modal-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:32px; }
.info-modal-header img { display:block; width:130px; height:auto; }
.info-modal-close { display:grid; place-items:center; flex:0 0 36px; width:36px; height:36px; padding:0; border:0; background:transparent; color:#555; font-size:2rem; cursor:pointer; }
.info-modal h2 { margin:0 0 26px; padding:0; color:#111; font-family:Nunito,Arial,sans-serif; font-size:clamp(1.5rem,3vw,2.2rem); font-weight:900; letter-spacing:0; line-height:1.25; }
.info-modal p { margin:16px 0 0; color:#6c6c6c; font-size:1rem; line-height:1.65; }
.cookie-category, .parents-section { margin-bottom:28px; }
.cookie-heading { display:flex; align-items:center; justify-content:space-between; gap:20px; color:#111; font-size:clamp(1.1rem,2vw,1.5rem); font-weight:800; }
.cookie-heading h3, .parents-section h3 { margin:0; font-size:inherit; }
.parents-section h3 { margin-top:28px; font-size:1.2rem; }
.cookie-always { flex-shrink:0; color:#2e7df3; font-size:.95rem; font-weight:700; }
.cookie-switch { appearance:none; -webkit-appearance:none; position:relative; flex:0 0 58px; width:58px; height:32px; margin:0; border:1px solid #a6acb5; border-radius:20px; background:#eee; cursor:pointer; }
.cookie-switch::before { position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#818792; content:''; transition:transform .15s; }
.cookie-switch:checked { border-color:#3565ca; background:#d6e1fc; }
.cookie-switch:checked::before { background:#3565ca; transform:translateX(26px); }
.info-modal-action { display:block; width:100%; margin-top:28px; padding:17px 20px; border:0; border-radius:8px; background:#2e7df3; color:#fff; font:800 1rem Nunito,Arial,sans-serif; cursor:pointer; }
.info-modal-action:hover { background:#2268d2; }
.info-modal button:focus-visible, .cookie-switch:focus-visible { outline:3px solid #03112f; outline-offset:3px; }
body:has(.info-modal[open]) { overflow:hidden; }
@media (max-width:600px) { .info-modal { padding:24px 20px; } .info-modal-header { margin-bottom:24px; } .info-modal-header img { width:110px; } .cookie-heading { gap:12px; } .cookie-always { font-size:.8rem; } }

.hero-download { display:inline-grid; grid-template-columns:minmax(0,1fr); max-width:100%; }
.hero-download .play-store { width:100%; margin:0; justify-content:center; }
.hero-copy .hero-download small { width:0; min-width:100%; margin-top:16px; text-align:center; line-height:1.5; overflow-wrap:break-word; }

.site-menu-links a[data-i18n="about"] { text-transform:uppercase; }

body.brand-page.legal-page { background:#050505; color:#f5f5f5; }
.legal-page .brand-topbar { border-bottom:1px solid #ffffff20; }
.legal-page .legal { position:static; display:block; overflow:visible; padding:48px 24px 64px; }
.legal-page .legal-intro { top:32px; }
.cookie-page-main { padding:40px 16px 64px; }
.cookie-page-panel { margin:0 auto; max-height:none; overflow:visible; }
.store-page-main { max-width:860px; margin:auto; padding:64px 24px; }
.store-page-main p { line-height:1.7; }
.store-page-main a { display:inline-block; margin-top:24px; text-decoration:underline; }
@media(max-width:780px) { .legal-page .legal { padding:32px 16px; }.legal-page .legal-intro { top:auto; } }

.release-modal { width:min(960px,calc(100vw - 32px)); padding:48px 56px; background:#fff; color:#080808; }
.release-modal > .info-modal-close { position:absolute; top:10px; right:14px; }
.release-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:16px; font-size:.95rem; font-weight:800; }
.release-badge { padding:8px 16px; border-radius:30px; background:var(--pink); color:#080808; }
.release-meta time { color:#566074; }
.release-modal h2 { margin:0 0 28px; color:#080808; font-family:Anton,Impact,sans-serif; font-size:clamp(2rem,4vw,3rem); font-weight:400; line-height:1.15; letter-spacing:.015em; }
.release-version { margin:0 0 28px; font-family:Anton,Impact,sans-serif; font-size:1.8rem; font-weight:400; }
.release-article h4 { margin:0 0 20px; font-size:1.15rem; font-weight:900; }
.release-list { margin:0; padding-left:24px; font-size:1.08rem; line-height:1.7; }
.release-list li { padding-left:4px; margin-bottom:18px; }
@media(max-width:600px) { .release-modal { padding:48px 24px 28px; }.release-meta { font-size:.8rem; }.release-list { font-size:1rem; } }

.release-note-body {white-space:pre-wrap;overflow-wrap:anywhere;font-size:1.08rem;line-height:1.8;}