/* GAMES */
.gm-stage{display:flex;justify-content:center;perspective:1500px;margin-top:clamp(50px,6vw,80px)}
.phone{width:clamp(240px,26vw,320px);aspect-ratio:9/19;border-radius:52px;background:#111211;padding:11px;box-shadow:0 0 0 2px #3c3d3c,0 70px 120px -50px rgba(0,0,0,.9),inset 0 0 0 1px #555;transform-style:preserve-3d;transition:transform .3s ease-out;position:relative}
.phone::before{content:"";position:absolute;top:21px;left:50%;width:88px;height:25px;margin-left:-44px;border-radius:20px;background:#000;z-index:3}
.screen{position:relative;width:100%;height:100%;border-radius:42px;overflow:hidden;background:#0d0c1c}
.screen canvas{position:absolute;inset:0;width:100%;height:100%;transition:opacity .7s,transform .9s var(--out)}
.screen canvas.off{opacity:0;transform:scale(1.08);pointer-events:none}
.glare{position:absolute;inset:0;border-radius:42px;background:linear-gradient(115deg,rgba(255,255,255,.14),rgba(255,255,255,0) 40%);pointer-events:none;z-index:2}
html.js .phone-in{opacity:0;transform:translateY(80px) rotateX(18deg);transition:opacity 1.2s var(--out),transform 1.6s var(--out)}
html.js .phone-in.in{opacity:1;transform:none}
.seg-tabs{display:flex;justify-content:center;margin-top:40px}
.segt{display:inline-flex;position:relative;background:rgba(244,241,234,.1);border-radius:999px;padding:4px}
.segt button{position:relative;z-index:1;background:none;border:0;border-radius:999px;padding:.55em 1.4em;font-weight:500;color:#9a9b98;transition:color .4s}
.segt button.on{color:var(--graphite)}
.segt .ind{position:absolute;top:4px;bottom:4px;border-radius:999px;background:var(--ivory);transition:left .5s var(--ease),width .5s var(--ease)}
.g-info{text-align:center;margin-top:30px;min-height:6.5em}
.g-info p{color:#a3a4a0;max-width:44ch;margin:0 auto;font-size:1.1rem}
.g-specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;max-width:760px;margin:44px auto 0;text-align:center}
.g-specs b{display:block;font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;letter-spacing:-.03em}
.g-specs small{color:#8f908d}
.gi{animation:gi .7s var(--out)}
@keyframes gi{from{opacity:0;transform:translateY(12px)}}
@media (max-width:640px){.g-specs{grid-template-columns:1fr}}

/* Fim de jogo: propaganda + "Em breve" */
.gover{position:absolute;inset:0;z-index:1;background:#05040f;display:flex;align-items:center;justify-content:center}
.gover[hidden],.gend[hidden],.gskip[hidden],.gfs[hidden]{display:none}
.gover video{width:100%;height:auto;max-height:100%;object-fit:contain;background:#000}
.gskip,.gfs{position:absolute;right:14px;bottom:18px;z-index:2;font:500 12px inherit;color:#F4EEE2;background:rgba(12,10,28,.62);border:1px solid rgba(244,238,226,.22);border-radius:999px;padding:7px 14px;cursor:pointer;backdrop-filter:blur(6px)}
.gfs{right:auto;left:14px}
.gskip:hover,.gfs:hover{background:rgba(12,10,28,.85)}
.gend{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:24px;background:radial-gradient(120% 80% at 50% 30%,#2a2160,#0d0c1c 70%);color:#F4EEE2;animation:gendIn .8s ease both}
.gend small{font-size:12px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.gend h3{margin:0;font-size:clamp(34px,3.2vw,44px);font-weight:700;letter-spacing:-.03em;line-height:1;color:#FFD27A}
.gend p{margin:0;font-size:13px;opacity:.75}
.gstores{display:flex;flex-direction:column;gap:8px;margin-top:10px;width:100%;max-width:170px}
.gstores span{border:1px solid rgba(244,238,226,.3);border-radius:14px;padding:11px 0;font-size:14px;font-weight:600;background:rgba(244,238,226,.07)}
.gagain{margin-top:12px;font:500 13px inherit;color:#0d0c1c;background:#F4EEE2;border:0;border-radius:999px;padding:9px 20px;cursor:pointer}
@keyframes gendIn{from{opacity:0}to{opacity:1}}

/* Tela cheia: nativa no computador; no celular fica na horizontal (gira o vídeo se o navegador não permitir travar a orientação) */
.gover:fullscreen{background:#000}
.gover:fullscreen video,.gover.gfull video{height:100%}
.gover.gfull{position:fixed;inset:auto;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:99999;background:#000}
.gover.gfull.gturn{width:100vh;width:100dvh;height:100vw;transform-origin:0 0;transform:rotate(90deg) translateY(-100%)}
