/* ==========================================================================
   LIPY HUB — seção JOGAR (jogos da Lipy Games no navegador)
   Estrutura dos portais de jogos (mosaico de quadrados; jogo grande + "jogue também" ao lado + texto embaixo),
   com a cara do Hub: vidro, aurora, Unbounded/Geist e a cor de cada jogo em --a1/--a2.
   ========================================================================== */

/* ---------- mosaico (página principal) ---------- */
.arc__topo { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 30px; margin-bottom: 22px; }
.arc__topo h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); margin-top: 12px; }
.arc__topo > p { max-width: 420px; color: var(--txt-2); }
.mos { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); grid-auto-flow: dense; gap: 14px; }
.tl {
  position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 20px; isolation: isolate;
  background: linear-gradient(145deg, var(--c1, var(--a1)), var(--c2, var(--a2)));
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 18px 34px -20px rgba(0, 0, 0, .9);
  transition: transform .45s var(--ease-spring), box-shadow .3s;
}
.tl img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out); }
.tl::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(2, 4, 10, .88)); opacity: 0; transition: opacity .3s; }
.tl__nome { position: absolute; left: 12px; right: 12px; bottom: 10px; z-index: 1; font-weight: 700; font-size: 14px; line-height: 1.2; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .4s var(--ease-out); text-shadow: 0 2px 8px #000; }
.tl:hover, .tl:focus-visible { transform: translateY(-4px) scale(1.03); box-shadow: 0 0 0 2px var(--c1, var(--a1)), 0 22px 44px -18px color-mix(in srgb, var(--c1, var(--a1)) 60%, #000); }
.tl:hover img { transform: scale(1.06); }
.tl:hover::after, .tl:focus-visible::after, .tl:hover .tl__nome, .tl:focus-visible .tl__nome { opacity: 1; transform: none; }
.tl__selo { position: absolute; left: 8px; top: 8px; z-index: 1; display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; color: #02040a; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.tl__selo .ic { font-size: 11px; fill: currentColor; stroke: none; }
.tl__selo--ok { background: linear-gradient(115deg, #b6ffd6, var(--green)); }
.tl__selo--breve { color: var(--txt); background: rgba(5, 7, 15, .7); box-shadow: inset 0 0 0 1px var(--line-2); }
.tl--g { grid-column: span 2; grid-row: span 2; border-radius: 26px; }
.tl--g .tl__nome { font-family: var(--f-display); font-size: clamp(16px, 2vw, 22px); left: 18px; bottom: 16px; opacity: 1; transform: none; }
.tl--g::after { opacity: 1; }
.tl--g .tl__selo { left: 14px; top: 14px; font-size: 12.5px; padding: 5px 12px; }

.arc__seo-caixa { padding: clamp(22px, 3.5vw, 40px); display: grid; gap: 14px; max-width: 900px; }
.arc__seo-caixa h2 { font-family: var(--f-display); font-size: clamp(1.4rem, 2.6vw, 2rem); letter-spacing: -.03em; line-height: 1.1; }
.arc__seo-caixa h3 { font-family: var(--f-display); font-size: 1.1rem; margin-top: 10px; }
.arc__seo-caixa p { color: var(--txt-2); }

/* ---------- página do jogo ---------- */
.jg { padding-top: clamp(16px, 2.5vw, 28px); }
.jg__grid { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 18px; align-items: start; }
.jg__palco { border-radius: 24px; overflow: hidden; box-shadow: 0 0 0 1px var(--line-2), 0 30px 60px -30px #000; background: var(--ink-0); }
.jg__tela { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; isolation: isolate; }
.jg__capa { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px) brightness(.42) saturate(1.2); transform: scale(1.12); }
.jg__abre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; }
.jg__abre img { width: clamp(76px, 11vw, 120px); border-radius: 26%; box-shadow: 0 20px 40px -14px #000, 0 0 0 1px rgba(255, 255, 255, .2), 0 0 50px -8px var(--a1); }
.jg__abre-nome { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.3rem, 3vw, 2.2rem); letter-spacing: -.03em; line-height: 1; text-shadow: 0 4px 20px #000; }
.jg__abre small { color: var(--txt-2); font-size: 13px; }
.jg__jogar { height: 58px; padding: 0 34px; font-size: 18px; }
.jg__jogar .ic { fill: currentColor; stroke: none; font-size: 20px; }
.jg__aviso { color: var(--txt-2); }
.jg__breve { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--txt-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.jg__tela iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.jg__tela.is-jogando .jg__abre, .jg__tela.is-jogando .jg__capa { display: none; }
.jg__sair { display: none; }
/* celular: o jogo ocupa a tela toda (com o botão de sair por cima) */
.jg__tela.is-cheia { position: fixed; inset: 0; z-index: 900; aspect-ratio: auto; width: 100vw; height: 100dvh; }
.jg__tela.is-cheia .jg__sair { display: inline-flex; position: absolute; z-index: 2; left: max(10px, env(safe-area-inset-left)); top: max(10px, env(safe-area-inset-top)); align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(2, 4, 10, .6); box-shadow: inset 0 0 0 1px var(--line-2); }
.jg__barra { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border-top: 1px solid var(--line); }
.jg__barra > img { width: 38px; height: 38px; border-radius: 11px; }
.jg__barra > span:first-of-type { display: grid; line-height: 1.2; min-width: 0; }
.jg__barra b { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jg__barra small { font-size: 12px; color: var(--txt-3); }
.jg__acoes { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; }
.jg__loja { height: 38px; font-size: 13.5px; padding: 0 14px; }
.jg__bt { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line-2); transition: background .2s; }
.jg__bt:hover { background: rgba(255, 255, 255, .12); }
.jg__bt .ic { font-size: 20px; }
.jg__lado h2 { font-family: var(--f-display); font-size: 1.05rem; letter-spacing: -.02em; margin-bottom: 12px; }
.jg__mais { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.jg__mais .tl__nome { font-size: 12.5px; }

.jg__info { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 18px; align-items: start; margin-top: 18px; padding-bottom: clamp(30px, 5vw, 60px); }
.jg__texto { padding: clamp(20px, 3.4vw, 38px); display: grid; gap: 14px; }
.jg__texto h1 { font-size: clamp(1.9rem, 4vw, 3rem); }
.jg__genero { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--a1); margin-top: -4px; }
.jg__texto p { color: var(--txt-2); }
.jg__texto h2 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.15rem, 2vw, 1.45rem); letter-spacing: -.025em; margin-top: 14px; }
.jg__texto ol, .jg__texto ul { display: grid; gap: 8px; color: var(--txt-2); }
.jg__texto ol { counter-reset: p; }
.jg__texto ol li { counter-increment: p; position: relative; padding-inline-start: 38px; }
.jg__texto ol li::before { content: counter(p); position: absolute; inset-inline-start: 0; top: 1px; width: 26px; height: 26px; border-radius: 9px; display: grid; place-items: center; font-family: var(--f-mono); font-size: 13px; font-weight: 600; color: var(--a1); background: color-mix(in srgb, var(--a1) 13%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a1) 35%, transparent); }
.jg__texto ul li { position: relative; padding-inline-start: 20px; }
.jg__texto ul li::before { content: ""; position: absolute; inset-inline-start: 4px; top: .7em; width: 6px; height: 6px; border-radius: 50%; background: var(--a1); }
.jg__controles li { color: var(--txt); }
.faq { border-radius: 14px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 14px 18px; font-weight: 600; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: inline-end; color: var(--a1); font-weight: 400; }
.faq[open] summary::after { content: "–"; }
.faq p { padding: 0 18px 16px; color: var(--txt-2); }
.jg__ficha { display: grid; gap: 14px; }
.jg__ficha dl { padding: 8px 18px; display: grid; }
.jg__ficha dl > div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.jg__ficha dl > div:last-child { border: 0; }
.jg__ficha dt { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-3); }
.jg__ficha dd { margin: 0; font-weight: 600; font-size: 15px; }
.jg__ficha dd a { color: var(--a1); }
.jg__telas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.jg__telas img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 0 0 1px var(--line-2); }

@media (max-width: 980px) {
  .jg__grid, .jg__info { grid-template-columns: minmax(0, 1fr); }
  .jg__mais { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .jg__telas { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .mos { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .tl { border-radius: 16px; }
  .tl--g { grid-column: span 3; grid-row: span 2; aspect-ratio: 16 / 10; }
  .jg__tela { aspect-ratio: 4 / 3; }
  .jg__telas { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .tl, .tl img, .tl__nome { transition: none; } }
.jg__video { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 16px; background: #000; box-shadow: 0 0 0 1px var(--line-2); }

/* ---------- "Continue no celular" (convite depois da 3ª fase) e QR code ---------- */
.jg__cta { position: absolute; z-index: 3; left: max(12px, env(safe-area-inset-left)); bottom: max(12px, env(safe-area-inset-bottom)); width: min(460px, calc(100% - 130px)); display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px; border-radius: 18px; background: rgba(5, 7, 15, .86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 0 0 1px var(--line-2), 0 18px 40px -12px #000; animation: ctaEntra .5s var(--ease-spring); }
.jg__cta.is-saindo { opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s; }
.jg__cta > img { width: 44px; height: 44px; border-radius: 12px; flex: none; }
.jg__cta > span { display: grid; min-width: 0; line-height: 1.25; flex: 1; }
.jg__cta b { font-size: 14.5px; }
.jg__cta small { font-size: 12.5px; color: var(--txt-2); }
.jg__cta .bt { height: 40px; padding: 0 16px; font-size: 14px; flex: none; }
.jg__cta-x { width: 30px; height: 30px; border-radius: 9px; color: var(--txt-2); flex: none; }
.jg__cta-x:hover { background: rgba(255, 255, 255, .08); }
@keyframes ctaEntra { from { opacity: 0; transform: translateY(24px); } }
.jg__loja .ic { font-size: 17px; }
.jg__qr { border: 0; padding: 26px; border-radius: 24px; max-width: 340px; color: var(--txt); background: var(--ink-2); box-shadow: 0 0 0 1px var(--line-2), 0 40px 80px -20px #000; text-align: center; }
.jg__qr::backdrop { background: rgba(2, 4, 10, .7); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.jg__qr img { width: 220px; height: 220px; margin: 0 auto 16px; border-radius: 16px; background: #fff; padding: 8px; }
.jg__qr p { font-size: 14.5px; color: var(--txt-2); margin-bottom: 10px; }
.jg__qr-ios { color: var(--amber) !important; }
.jg__qr-bts { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
@media (max-width: 600px) {
  .jg__loja { display: inline-flex; width: 40px; padding: 0; }
  .jg__loja span { display: none; }
  .jg__cta small { display: none; }
}
.jg__h1-sub { display: block; margin-top: 10px; font-family: var(--f-text); font-weight: 600; font-size: clamp(1rem, 1.6vw, 1.25rem); letter-spacing: 0; line-height: 1.3; color: var(--txt-2); }