/* Zion Games — base visual do site (marca nova, 15/10/2026, decidida pelo Antonio)
   Usado por: index.html, /game/<id>/ (paginas dos jogos), account.html e as paginas de texto. Mudou aqui ->
   subir o ?v= do zg-ui.css em TODAS elas (tools/gamepages.py gera as dos jogos).
   Paleta do PDF "ziongames-marca-refinada-v7": preto #101214, ouro velho #BC9447, ametista #7855A3 / #B293D3 (no
   escuro), marfim #F4F2EB. Fontes do proprio site (licenca OFL em /fonts/): Outfit nos titulos, Inter no texto,
   Anton so nas frases dos Destaques. Os nomes das variaveis antigas (--gold, --gold-bright, --surface...) continuam,
   porque o zc.js e o zauth.js usam. */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Outfit";font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/outfit-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Anton";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/anton-latin-400-normal.woff2) format("woff2")}

:root{
  --bg:#101214; --bg-2:#0C0D10; --surface:#171A1E; --surface-2:#1D2026; --surface-3:#24282F;
  --line:#2A2E36; --line-soft:#1E2127;
  --ink:#F4F2EB; --ink-2:#C9CCD3; --muted:#9EA2AB; --faint:#6E727B;
  --gold:#BC9447; --gold-bright:#DDBE78; --gold-deep:#8C6A2C; --ink-on-gold:#101214;
  --gold-grad:linear-gradient(135deg,#E2C47E 0%,#C9A257 45%,#A98336 100%);
  --ame:#7855A3; --ame-dk:#B293D3; --ame-tint:rgba(178,147,211,.13); --ame-line:#4A3F60;
  --ok:#4FD18B;
  --radius-sm:10px; --radius:14px; --radius-lg:18px;
  --top-h:64px;
  --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  --font-display:"Outfit","Inter",system-ui,-apple-system,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font:400 15px/1.55 var(--font-ui); letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
img,video{max-width:100%}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:-.015em; line-height:1.15}
:focus-visible{outline:2px solid var(--ame-dk); outline-offset:2px; border-radius:8px}
::placeholder{color:#7C808A}
.sr-only{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important; animation:none!important; scroll-behavior:auto!important}}

/* ---------- topo ---------- */
.topbar{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:16px; height:calc(var(--top-h) + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) 20px 0; background:rgba(16,18,20,.9); border-bottom:1px solid var(--line-soft);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
.topbar .search{flex:1 1 240px; max-width:600px; min-width:140px; margin:0 auto}
.search-pill{position:relative; display:flex; align-items:center; gap:10px; height:44px; padding:0 16px 0 18px; background:var(--surface);
  border:1px solid var(--line); border-radius:999px; transition:border-color .15s}
.search-pill:focus-within{border-color:var(--ame-dk)}
.search input{flex:1 1 auto; min-width:0; height:100%; background:transparent; border:0; outline:0; font:500 14.5px var(--font-ui); color:var(--ink)}
.search input::-webkit-search-cancel-button{filter:invert(.7)}
.search-pill svg{flex:0 0 auto; color:var(--muted)}
.topbar-actions{display:flex; align-items:center; gap:8px; flex:0 0 auto}
.iconbtn{position:relative; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; width:42px; height:42px; padding:0;
  border-radius:12px; background:var(--surface); border:1px solid var(--line); color:var(--ink-2); transition:color .15s,border-color .15s,background .15s}
.iconbtn:hover{color:var(--ink); border-color:var(--ame-line); background:var(--surface-2)}
.dot{position:absolute; top:8px; right:9px; width:8px; height:8px; border-radius:99px; background:var(--gold); border:2px solid var(--surface)}
.btn-gold{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 20px; border:0; border-radius:999px;
  background:var(--gold-grad); color:var(--ink-on-gold); font:700 14.5px var(--font-ui); white-space:nowrap; transition:filter .15s,transform .15s}
.btn-gold:hover{filter:brightness(1.07)}
.btn-gold:active{transform:translateY(1px)}
.btn-ghost{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 18px; border-radius:999px;
  background:transparent; border:1px solid var(--line); color:var(--ink-2); font:600 14px var(--font-ui); white-space:nowrap}
.btn-ghost:hover{color:var(--ink); border-color:var(--ame-line); background:var(--surface)}
.btn-login .ico{display:none}
.btn-gold[hidden],.btn-ghost[hidden],.iconbtn[hidden]{display:none}
@media (max-width:900px){
  .topbar{gap:10px; padding-left:14px; padding-right:14px}
  /* logado o topo ganha moedas, loja e convite: idioma e amigos ficam no menu, a loja abre pelas moedas */
  .topbar #btn-lang,.topbar #btn-friends,.topbar #zcShopBtn{display:none}
  .topbar #zcInvBtn{width:42px; padding:0; justify-content:center}
  .topbar #zcInvBtn .lbl{display:none}
  .btn-login{width:40px; height:40px; padding:0; flex:0 0 40px}
  .btn-login .lbl{display:none}
  .btn-login .ico{display:inline-flex}
}
@media (max-width:600px){
  .topbar.has-search{flex-wrap:wrap; height:auto; row-gap:10px; padding-top:calc(10px + env(safe-area-inset-top,0px)); padding-bottom:10px}
  .topbar.has-search .search{order:5; flex:1 1 100%; max-width:none; margin:0}
  .topbar-actions{margin-left:auto; gap:6px}
  .topbar .iconbtn,.topbar #zcInvBtn{width:38px; height:38px}
  .btn-login{width:38px; height:38px; flex-basis:38px}
  .topbar #zcShopBtn,.topbar #btn-lang,.topbar #btn-friends{display:none}
  .topbar #zcCoins{padding:8px 10px; font-size:12.5px}
}
@media (max-width:350px){.topbar{gap:6px; padding-left:10px; padding-right:10px} .topbar #zcCoins{padding:7px 8px; font-size:12px}}

/* ---------- logo: branco sempre; o colorido passa por cima em diagonal (zg-ui.js) ---------- */
.zlogo{position:relative; display:inline-flex; flex:0 0 auto; line-height:0; --lh:28px}
.zlogo img{display:block; height:var(--lh); width:auto}
.zlogo .zl-c{position:absolute; left:0; top:0; clip-path:polygon(0 0,0 0,0 100%,0 100%)}
.zlogo .zl-g{position:absolute; left:0; bottom:0; width:2px; height:100%; opacity:0; pointer-events:none; transform-origin:0 100%;
  background:linear-gradient(180deg,rgba(243,221,162,0),#F3DDA2 30%,#F3DDA2 70%,rgba(243,221,162,0)); filter:drop-shadow(0 0 4px rgba(226,196,126,.85))}
@media (max-width:900px){.topbar .zlogo{--lh:24px}}
@media (max-width:600px){.topbar .zlogo{--lh:20px}}
@media (max-width:359px){.topbar .zlogo{--lh:17px}}

/* ---------- menu lateral (home e paginas dos jogos) ---------- */
.navlink{display:flex; align-items:center; gap:12px; width:100%; min-height:42px; padding:0 14px; border:0; border-radius:10px; background:transparent;
  color:var(--ink-2); font:600 14.5px var(--font-ui); text-align:left; white-space:nowrap; transition:background .15s,color .15s}
.navlink svg{flex:0 0 18px; opacity:.9}
.navlink:hover{background:var(--surface); color:var(--ink)}
.navlink.active{background:var(--ame-tint); color:var(--ame-dk)}
.nav-sep{height:1px; background:var(--line-soft); margin:12px 10px}
.navlang-cur{margin-left:auto; font:600 12px var(--font-ui); color:var(--muted)}

/* ---------- secoes e cards ---------- */
.sect-head{display:flex; align-items:center; gap:10px; margin:0 0 16px}
.sect-head>svg{flex:0 0 auto; color:var(--gold)}
.sect-head h2{font:700 24px/1.15 var(--font-display); letter-spacing:-.015em; color:var(--ink)}
.viewall{margin-left:auto; background:none; border:0; padding:6px 2px; font:600 13.5px var(--font-ui); color:var(--ame-dk)}
.viewall:hover{color:var(--ink)}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(208px,1fr)); gap:22px 16px}
@media (max-width:1100px){.grid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr))}}
@media (max-width:560px){.grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px}}
.card{display:block; min-width:0; color:var(--ink)}
.card .art{position:relative; display:block; aspect-ratio:3/2; border-radius:var(--radius); overflow:hidden; background:var(--surface);
  border:1px solid var(--line); transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.sq .card .art{aspect-ratio:1/1}
.card .art img{display:block; width:100%; height:100%; object-fit:cover}
.card:hover .art,.card:focus-visible .art{transform:translateY(-3px); border-color:var(--ame-dk); box-shadow:0 14px 30px rgba(0,0,0,.5)}
.card:focus-visible{outline:none}
.card .t{display:block; margin-top:10px; font:600 17px/1.25 var(--font-display); letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:color .15s}
.card:hover .t{color:var(--ame-dk)}
.card .on{display:flex; align-items:center; gap:7px; margin-top:4px; font:600 12px/1.25 var(--font-ui); color:var(--ok)}
.card .on[hidden]{display:none}
.card .on i{flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:var(--ok); animation:zonp 1.6s ease-out infinite}
@keyframes zonp{0%{opacity:1; box-shadow:0 0 0 0 rgba(79,209,139,.6)} 45%{opacity:.4} 70%{box-shadow:0 0 0 6px rgba(79,209,139,0)} 100%{opacity:1; box-shadow:0 0 0 0 rgba(79,209,139,0)}}
.card .d{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:3px; font:400 13px/1.4 var(--font-ui); color:var(--muted)}
.badge{position:absolute; top:10px; right:10px; display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius:99px;
  background:var(--gold-grad); color:var(--ink-on-gold); font:700 11px/1 var(--font-ui); letter-spacing:.06em; text-transform:uppercase}
.badge.multi{left:10px; right:auto; background:#2A2340; color:var(--ame-dk); border:1px solid var(--ame-line)}
.badge.kids{left:10px; right:auto; background:#DCEFFF; color:#2a2050}
@media (max-width:560px){.card .t{font-size:16px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical} .card .d{font-size:12.5px}}
.pool-art{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:radial-gradient(130% 120% at 50% 18%,#0F6B41,#06371F 78%)}
.ball8{width:54px; height:54px; border-radius:99px; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle at 34% 28%,#3A3F4E,#0B0D13 65%); box-shadow:0 8px 18px rgba(0,0,0,.5)}
.ball8 b{width:24px; height:24px; border-radius:99px; background:#F2EFE4; color:#0B0D13; display:flex; align-items:center; justify-content:center; font:800 14px var(--font-ui)}

/* ---------- rodape, avisos, amigos ---------- */
.site-foot{display:flex; flex-direction:column; align-items:center; gap:14px; padding:44px 24px calc(100px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--line-soft); text-align:center}
.site-foot .zlogo{--lh:26px}
.tagline{font:700 11.5px var(--font-ui); letter-spacing:.28em; text-transform:uppercase; color:var(--gold)}
.foot-nav{display:flex; flex-wrap:wrap; justify-content:center; gap:8px 22px; font:600 13.5px var(--font-ui)}
.foot-nav a,.foot-nav button{background:none; border:0; padding:0; color:#AEB2BA; font:inherit}
.foot-nav a:hover,.foot-nav button:hover{color:var(--ame-dk)}
.copyright{font:500 12px var(--font-ui); color:var(--faint)}
.toast{position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom,0px)); z-index:100001; max-width:min(460px,92vw); transform:translateX(-50%) translateY(16px);
  padding:11px 18px; border-radius:12px; background:var(--surface-2); border:1px solid var(--line); color:var(--ink); font:600 13.5px/1.45 var(--font-ui);
  text-align:center; opacity:0; pointer-events:none; transition:opacity .18s ease,transform .18s ease}
.toast.on{opacity:1; transform:translateX(-50%) translateY(0)}
.friends{position:fixed; right:20px; bottom:calc(18px + env(safe-area-inset-bottom,0px)); z-index:50; display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 18px; border:0; border-radius:999px; background:var(--gold-grad); color:var(--ink-on-gold); font:700 13.5px var(--font-ui);
  box-shadow:0 10px 26px rgba(0,0,0,.5)}

/* ---------- aviso de cookies (zg-ui.js): Recusar, Aceitar essenciais, Aceitar tudo ---------- */
.zck{position:fixed; left:16px; right:16px; bottom:calc(16px + env(safe-area-inset-bottom,0px)); z-index:100000; max-width:920px; margin:0 auto;
  display:flex; align-items:center; gap:18px; padding:18px 52px 18px 22px; border-radius:18px; background:#191B20; border:1px solid var(--line);
  box-shadow:0 22px 60px rgba(0,0,0,.65); animation:zckIn .35s cubic-bezier(.2,.9,.3,1)}
@keyframes zckIn{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
.zck p{flex:1 1 auto; margin:0; font:400 13.5px/1.5 var(--font-ui); color:var(--ink-2)}
.zck p b{display:block; margin-bottom:2px; font:700 15px/1.3 var(--font-display); color:var(--ink)}
.zck p a{color:var(--ame-dk); text-decoration:underline; text-underline-offset:2px}
.zck-b{display:flex; gap:8px; flex:0 0 auto}
.zck-b button{height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line); background:transparent; color:var(--ink);
  font:600 13.5px var(--font-ui); white-space:nowrap}
.zck-b button:hover{border-color:var(--ame-line); background:var(--surface-2)}
.zck-b button.all{border:0; background:var(--gold-grad); color:var(--ink-on-gold); font-weight:700}
.zck-x{position:absolute; top:10px; right:10px; width:34px; height:34px; border:0; border-radius:10px; background:none; color:var(--muted); font-size:16px}
.zck-x:hover{color:var(--ink); background:var(--surface-2)}
@media (max-width:820px){
  .zck{flex-direction:column; align-items:stretch; gap:12px; padding:14px 14px 14px 16px; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom,0px))}
  .zck p{padding-right:28px; font-size:12.5px; line-height:1.45}
  .zck p b{font-size:14px}
  .zck-b{display:grid; grid-template-columns:1fr 1fr; gap:8px}
  .zck-b button{height:38px; padding:0 8px; font-size:13px}
  .zck-b button.all{grid-column:1/-1}
}

/* ---------- paginas de texto (sobre, suporte, privacidade, termos, jogo responsavel, conta) ---------- */
.doc{max-width:760px; margin:0 auto; padding:40px 24px 24px}
.doc h1{font:700 clamp(28px,4.4vw,38px)/1.1 var(--font-display); margin:0 0 10px}
.doc h2{font:700 21px/1.25 var(--font-display); margin:30px 0 8px}
.doc p,.doc li{font:400 16px/1.7 var(--font-ui); color:var(--ink-2)}
.doc a{color:var(--ame-dk); text-decoration:underline; text-underline-offset:2px}
.doc .lead{font-size:17.5px; color:var(--ink)}