/* Pagina de cada jogo /game/<id>/ (15/10/2026, estilo CrazyGames, pedido do Antonio). Gerada por tools/gamepages.py.
   Computador: menu em icones a esquerda, o jogo em cima (capa + Jogar; Jogar comeca ali mesmo, sem trocar de pagina),
   a ficha embaixo e a coluna "Jogue tambem" a direita (2 colunas >= 1280 px, 1 coluna 1000-1279 px).
   Celular: capa 16:9 + Jogar; ao jogar, o jogo ocupa a tela (o X do topo volta para a pagina). Mudou -> subir o ?v=. */
.gp{display:flex; align-items:flex-start; min-height:calc(100vh - var(--top-h)); min-height:calc(100dvh - var(--top-h))}

/* menu em icones (abre por cima ao passar o mouse; no celular vira gaveta pelo botao do topo) */
.rail{position:sticky; top:var(--top-h); z-index:42; flex:0 0 64px; height:calc(100vh - var(--top-h)); height:calc(100dvh - var(--top-h))}
.rail-in{position:absolute; top:0; left:0; bottom:0; width:64px; display:flex; flex-direction:column; gap:2px; padding:14px 10px;
  overflow-x:hidden; overflow-y:auto; scrollbar-width:none; background:var(--bg-2); border-right:1px solid var(--line-soft);
  transition:width .16s ease,box-shadow .16s ease}
.rail-in::-webkit-scrollbar{display:none}
.rail .navlink{padding:0 13px}
.rail .navlink .lbl{opacity:0; transition:opacity .12s ease}
@media (hover:hover){
  .rail:hover .rail-in,.rail:focus-within .rail-in{width:232px; box-shadow:16px 0 34px rgba(0,0,0,.6)}
  .rail:hover .navlink .lbl,.rail:focus-within .navlink .lbl{opacity:1}
}
.drawer-bk{display:none}
@media (min-width:861px){
  .rail.open .rail-in{width:232px; box-shadow:16px 0 34px rgba(0,0,0,.6)}
  .rail.open .navlink .lbl{opacity:1}
}

/* coluna do meio */
.gp-main{flex:1 1 auto; min-width:0; padding:16px 20px 0}
.stage{position:relative; overflow:hidden; height:clamp(420px,calc(100vh - var(--top-h) - 84px),1080px); height:clamp(420px,calc(100dvh - var(--top-h) - 84px),1080px); border-radius:var(--radius-lg);
  background:#000; border:1px solid var(--line)}
.stage iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block; background:#000}
.cover{position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; text-align:center; transition:opacity .35s ease}
.cover.off{opacity:0; pointer-events:none; visibility:hidden; transition:opacity .35s ease,visibility 0s .35s}
.cv-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block}
.cover.blur .cv-bg{filter:blur(26px) brightness(.42) saturate(1.1); transform:scale(1.15)}
.cover::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 45%,rgba(30,30,30,0) 30%,rgba(30,30,30,.75) 100%)}
/* arte horizontal (16:9): a arte ja traz o nome do jogo; o Jogar fica embaixo, sobre um degrade */
.cover.wide{align-items:flex-end}
.cover.wide::after{background:linear-gradient(180deg,rgba(30,30,30,0) 50%,rgba(30,30,30,.88) 100%)}
.cover.wide .cv-title,.cover.wide .cv-tag{display:none}
.cover.wide .cv-in{padding-bottom:clamp(18px,5%,52px)}
.cv-in{position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; gap:14px; padding:24px; max-width:640px}
.cv-thumb{width:min(300px,44vw); aspect-ratio:3/2; object-fit:cover; border-radius:16px; border:1px solid rgba(255,255,255,.14); box-shadow:0 18px 44px rgba(0,0,0,.55)}
.cv-thumb.sq{aspect-ratio:1/1; width:min(220px,34vw)}
.cover.wide .cv-thumb{display:none}
.cv-title{font:700 clamp(28px,4vw,46px)/1.05 var(--font-display); letter-spacing:-.02em; color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.6)}
.cv-tag{margin:-4px 0 4px; font:500 15.5px/1.45 var(--font-ui); color:rgba(255,255,255,.85); text-shadow:0 1px 10px rgba(0,0,0,.6)}
.cv-play{height:56px; padding:0 40px; font-size:17px; box-shadow:0 12px 30px rgba(0,0,0,.45)}
.cv-play svg{margin-left:-4px}
.cv-meta{margin:2px 0 0; font:500 13px var(--font-ui); color:rgba(255,255,255,.72)}
.stage .loading{position:absolute; left:50%; top:50%; z-index:1; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%;
  border:3px solid rgba(255,255,255,.18); border-top-color:var(--gold); animation:gpspin .8s linear infinite}
@keyframes gpspin{to{transform:rotate(360deg)}}

/* barra embaixo do jogo */
.gbar{display:flex; align-items:center; gap:12px; min-height:52px; padding:10px 4px 0}
.gbar img{width:44px; height:30px; border-radius:7px; object-fit:cover; border:1px solid var(--line)}
.gbar h1{font:700 19px/1.15 var(--font-display); letter-spacing:-.012em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.gbar .gb-t{min-width:0; flex:1 1 auto}
.gbar .on{display:flex; align-items:center; gap:7px; margin-top:2px; font:600 12px var(--font-ui); color:var(--ok)}
.gbar .on[hidden]{display:none}
.gbar .on i{width:8px; height:8px; border-radius:50%; background:var(--ok)}
.gbar .btn-ghost{height:38px; padding:0 14px; font-size:13.5px}

/* ficha do jogo */
.ginfo{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; margin:22px 0 0; padding:26px 4px 8px; border-top:1px solid var(--line-soft)}
.crumbs{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:6px; margin:-8px 0 -6px; font:500 13px var(--font-ui); color:var(--muted)}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--ame-dk)}
.gi-text h2{font:700 26px/1.15 var(--font-display); margin:0 0 12px}
.gi-text h3{font:700 18px/1.25 var(--font-display); margin:26px 0 10px}
.gi-text p{margin:0 0 12px; font:400 16px/1.7 var(--font-ui); color:var(--ink-2)}
.gi-text ol,.gi-text ul{margin:0; padding:0 0 0 22px}
.gi-text li{margin:0 0 8px; font:400 15.5px/1.6 var(--font-ui); color:var(--ink-2)}
.gi-text li::marker{color:var(--gold); font-weight:700}
.gi-text .feats{list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px}
.gi-text .feats li{display:flex; gap:10px; align-items:flex-start; margin:0; padding:12px 14px; border-radius:12px; background:var(--surface); border:1px solid var(--line-soft)}
.gi-text .feats li::before{content:""; flex:0 0 14px; height:9px; margin-top:7px; background:url(/img/marca/zion-simbolo.svg?v=2) center/contain no-repeat}
.gi-facts{align-self:start; position:sticky; top:calc(var(--top-h) + 16px); padding:18px 18px 16px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--line)}
.gi-facts h2{font:700 17px/1.2 var(--font-display); margin:0 0 10px}
.gi-facts dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:9px 14px}
.gi-facts dl>div{display:contents}
.gi-facts dl>div[hidden]{display:none}
.gi-facts dt{font:500 13px/1.45 var(--font-ui); color:var(--muted)}
.gi-facts dd{margin:0; font:600 13.5px/1.45 var(--font-ui); color:var(--ink); text-align:right}
.gi-facts .chips{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0; padding:14px 0 0; border-top:1px solid var(--line-soft)}
.chip{display:inline-flex; align-items:center; height:30px; padding:0 12px; border-radius:99px; border:1px solid var(--line); font:600 12.5px var(--font-ui); color:var(--ink-2)}
.chip:hover{border-color:var(--ame-line); color:var(--ame-dk)}
.gi-facts .note{margin:12px 0 0; font:400 12.5px/1.5 var(--font-ui); color:var(--muted)}
.more{margin:30px 0 0; padding:0 4px}
@media (min-width:1000px){.more{display:none}}

/* "Jogue tambem" (coluna liquida a direita) */
.pnext{position:sticky; top:var(--top-h); flex:0 0 340px; min-width:0; height:calc(100vh - var(--top-h)); height:calc(100dvh - var(--top-h)); display:flex; flex-direction:column;
  background:var(--bg-2); border-left:1px solid var(--line-soft)}
.pn-h{flex:0 0 auto; margin:0; padding:16px 16px 10px; font:700 12px var(--font-ui); letter-spacing:.1em; text-transform:uppercase; color:var(--gold-bright)}
.pn-list{flex:1; min-height:0; overflow-y:auto; padding:2px 16px 16px; display:grid; grid-template-columns:1fr 1fr; gap:14px 10px; align-content:start;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent}
.pn{display:block; min-width:0; border-radius:10px; color:var(--ink-2)}
.pn img{display:block; width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:var(--surface);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.pn:hover img,.pn:focus-visible img{border-color:var(--ame-dk); transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.5)}
.pn:focus-visible{outline:none}
.pn-t{display:block; margin-top:6px; font:600 12.5px/1.25 var(--font-ui); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pn:hover .pn-t{color:var(--ame-dk)}
.pn-all{grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:6px; height:42px; margin-top:4px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2); font:600 13px var(--font-ui)}
.pn-all:hover{color:var(--ink); border-color:var(--ame-line)}
@media (max-width:1279.98px){.pnext{flex-basis:208px} .pn-list{grid-template-columns:1fr; padding:2px 14px 14px} .pn-h{padding:16px 14px 10px}}
@media (max-width:999.98px){.pnext{display:none}}
@media (max-width:1180px){.ginfo{grid-template-columns:1fr} .gi-facts{position:static}}

/* tela estreita: sem trilho; o menu vira gaveta; capa 16:9; jogando, o jogo ocupa a tela */
.gexit{display:none}
@media (max-width:860px){
  .rail{position:fixed; top:0; bottom:0; left:0; z-index:60; height:auto; width:0; flex:none}
  .rail-in{width:276px; max-width:86vw; padding-top:calc(16px + env(safe-area-inset-top,0px)); transform:translateX(-104%); visibility:hidden;
    transition:transform .2s ease,visibility 0s .2s; border-right:1px solid var(--line)}
  .rail .navlink .lbl{opacity:1}
  .rail.open .rail-in{transform:none; visibility:visible; transition:transform .2s ease; box-shadow:16px 0 34px rgba(0,0,0,.6)}
  .drawer-bk{display:block; position:fixed; inset:0; z-index:59; border:0; padding:0; background:rgba(0,0,0,.6); opacity:0; pointer-events:none; transition:opacity .2s ease}
  .drawer-bk.on{opacity:1; pointer-events:auto}
  .gp-main{padding:12px 14px 0}
  .stage{height:auto; aspect-ratio:16/10; border-radius:16px}
  @supports not (aspect-ratio:1/1){.stage{height:calc((100vw - 28px) * .625)}}
  .cv-in{gap:10px; padding:16px}
  .cv-thumb{width:min(180px,38vw)}
  .cv-thumb.sq{width:min(130px,28vw)}
  .cv-tag{display:none}
  .cv-play{height:50px; padding:0 34px; font-size:16px}
  .ginfo{margin-top:14px; padding-top:20px}
  body.playing{overflow:hidden}
  body.playing .stage{position:fixed; left:0; right:0; bottom:0; top:calc(var(--top-h) + env(safe-area-inset-top,0px)); z-index:45; height:auto; aspect-ratio:auto;
    border-radius:0; border:0}
  body.playing .gexit{display:inline-flex}
  body.playing .topbar .search{display:none}
  body.playing .topbar.has-search{flex-wrap:nowrap; height:calc(var(--top-h) + env(safe-area-inset-top,0px)); padding-bottom:0}
  body.playing .friends,body.playing .zck{display:none}
  body.playing .topbar-actions>:not(.gexit){display:none}   /* jogando: no topo so o menu, o logo e o X (cabe em 320 px) */
}
/* celular deitado com mais de 860 px (iPhone Plus/Pro Max, Pixel): mesmo "tela do jogo" do celular */
@media (pointer:coarse) and (max-height:500px) and (min-width:861px){
  .stage{height:calc(100vh - var(--top-h) - 24px); height:calc(100dvh - var(--top-h) - 24px); min-height:240px}
  body.playing{overflow:hidden}
  body.playing .stage{position:fixed; left:0; right:0; bottom:0; top:0; z-index:45; height:auto; border-radius:0; border:0}
  body.playing .friends,body.playing .zck{display:none}
}
@media (max-width:600px){
  .cv-title{font-size:26px}
  .cv-meta{display:none}
  .gbar h1{font-size:17px}
}
@media (orientation:landscape) and (max-height:500px){
  body.playing .topbar{display:none}
  body.playing .stage{top:0; left:env(safe-area-inset-left,0px); right:env(safe-area-inset-right,0px); bottom:env(safe-area-inset-bottom,0px)}
  body.playing .gexit-float{display:flex}
}
.gexit-float{display:none; position:fixed; top:calc(8px + env(safe-area-inset-top,0px)); left:calc(8px + env(safe-area-inset-left,0px)); z-index:46;
  width:36px; height:36px; align-items:center; justify-content:center; border-radius:10px; border:0; background:rgba(30,30,30,.7); color:#fff}
.stage:fullscreen{border-radius:0; border:0}