/* ---------- Cartões ---------- */
.jg-hub{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin:20px 0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;box-sizing:border-box}
.jg-hub *,.jg-hub *::before,.jg-hub *::after{box-sizing:border-box}
@media (max-width:600px){.jg-hub{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

.jg-hub .jg-card{--fundo:linear-gradient(160deg,#3b6cf0,#1f3a93);--borda:#142a6b;--botao:rgba(255,255,255,.28);
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:6px;
  width:100%;min-width:0;height:auto;margin:0;padding:16px 12px 16px;border:5px solid var(--borda);border-radius:22px;
  background:var(--fundo);color:#fff;text-align:center;cursor:pointer;overflow:hidden;font:inherit;line-height:1.2;
  text-transform:none;letter-spacing:normal;box-shadow:0 6px 0 var(--borda);transition:transform .15s,box-shadow .15s;
  -webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;max-width:320px;justify-self:center}
.jg-hub .jg-card::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(130% 70% at 0% 100%,rgba(255,255,255,.2),transparent 60%),
             radial-gradient(90% 50% at 100% 0%,rgba(255,255,255,.12),transparent 60%)}
.jg-hub .jg-card:hover{transform:translateY(-4px);box-shadow:0 10px 0 var(--borda)}
.jg-hub .jg-card:active{transform:translateY(3px);box-shadow:0 2px 0 var(--borda)}
.jg-hub .jg-card:focus-visible{outline:4px solid #ffc93c;outline-offset:3px}

.jg-hub .jg-ico{position:relative;width:72%;max-width:150px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.14);border:4px solid rgba(0,0,0,.22);box-shadow:inset 0 0 0 4px rgba(255,255,255,.12);margin-bottom:6px}
.jg-hub .jg-ico svg{width:78%;height:78%;display:block}
.jg-hub .jg-card:hover .jg-ico svg{animation:jg-balanco .5s}
@keyframes jg-balanco{30%{transform:rotate(-8deg) scale(1.05)}60%{transform:rotate(6deg)}}

.jg-hub .jg-titulo{position:relative;font-weight:900;font-size:clamp(17px,2.4vw,23px);text-transform:uppercase;letter-spacing:-.3px;
  line-height:1.05;text-shadow:0 2px 0 rgba(0,0,0,.18)}
.jg-hub .jg-texto{position:relative;font-size:clamp(13px,1.6vw,15px);line-height:1.3;opacity:.95;min-height:2.6em}
.jg-hub .jg-botao{position:relative;margin-top:auto;padding:5px 16px;border-radius:10px;background:var(--botao);
  font-weight:900;font-size:16px;text-transform:uppercase;letter-spacing:.3px}

.jg-hub .jg-caca{--fundo:linear-gradient(160deg,#4a7cf7,#1f3a93);--borda:#142a6b}
.jg-hub .jg-monta{--fundo:linear-gradient(160deg,#ff56b8,#c2187a);--borda:#8c0f57}
.jg-hub .jg-mina{--fundo:linear-gradient(160deg,#8a7cf7,#4338ca);--borda:#2e2690}
.jg-hub .jg-memo{--fundo:linear-gradient(160deg,#2fd3b5,#0e7c86);--borda:#0b5560}
.jg-hub .jg-cruz{--fundo:linear-gradient(160deg,#ffa53b,#c2410c);--borda:#8a2e0a}

@media (max-width:600px){
  .jg-hub .jg-card{padding:12px 8px 12px;border-width:4px;border-radius:18px}
  .jg-hub .jg-titulo{font-size:17px}
  .jg-hub .jg-texto{font-size:13px}
  .jg-hub .jg-botao{font-size:14px;padding:4px 12px}
}

/* ---------- Janela do jogo ---------- */
.jg-modal{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(10,8,30,.78);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);opacity:0;transition:opacity .2s;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;box-sizing:border-box}
.jg-modal *{box-sizing:border-box}
.jg-modal[hidden]{display:none}
.jg-modal.jg-aberto{opacity:1}
.jg-modal .jg-janela{display:flex;flex-direction:column;width:min(520px,100%);max-height:100%;border-radius:24px;overflow:hidden;
  background:#16132e;box-shadow:0 20px 60px rgba(0,0,0,.5);transform:translateY(16px) scale(.98);transition:transform .25s}
.jg-modal.jg-aberto .jg-janela{transform:none}
.jg-modal .jg-topo{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 10px 10px 18px;color:#fff}
.jg-modal .jg-topo h2{margin:0;padding:0;border:0;background:none;color:#fff;font:900 18px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.2px}
.jg-modal .jg-fechar{display:grid;place-items:center;width:42px;height:42px;min-width:0;margin:0;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.14);color:#fff;font:400 28px/1 system-ui,sans-serif;cursor:pointer;box-shadow:none}
.jg-modal .jg-fechar:hover{background:rgba(255,255,255,.24)}
.jg-modal .jg-fechar:focus-visible{outline:3px solid #ffc93c;outline-offset:2px}
.jg-modal .jg-area{flex:1 1 auto;min-height:0;overflow:auto;padding:0 12px 14px}
.jg-modal .jg-area .cn-jogo,.jg-modal .jg-area .ml-jogo,.jg-modal .jg-area .mi-jogo,.jg-modal .jg-area .me-jogo{
  margin:0 auto;
  width:min(460px,100%,max(280px,calc((100vh - 120px) * 5 / 7)));
  width:min(460px,100%,max(280px,calc((100dvh - 120px) * 5 / 7)))}
.jg-modal .jg-msg{color:#fff;text-align:center;padding:40px 10px;font-size:16px}

@media (max-width:600px){
  .jg-modal{padding:0;align-items:stretch}
  .jg-modal .jg-janela{width:100%;max-height:none;height:100%;border-radius:0;
    padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
  .jg-modal .jg-area{display:flex;align-items:center;justify-content:center;padding:0 8px 10px}
  .jg-modal .jg-area .cn-jogo,.jg-modal .jg-area .ml-jogo,.jg-modal .jg-area .mi-jogo,.jg-modal .jg-area .me-jogo{
    width:min(460px,100%,max(260px,calc((100vh - 90px) * 5 / 7)));
    width:min(460px,100%,max(260px,calc((100dvh - 90px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px)) * 5 / 7)))}
}
@media (prefers-reduced-motion:reduce){.jg-hub .jg-card,.jg-modal,.jg-modal .jg-janela{transition:none}.jg-hub .jg-ico svg{animation:none!important}}

/* ---------- Jogo aberto na própria página ---------- */
.jg-pagina{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;margin:12px 0 24px}
.jg-pagina .jg-voltar{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;padding:8px 16px;border-radius:999px;
  background:#16132e;color:#fff;font-weight:700;font-size:15px;text-decoration:none;box-shadow:0 3px 0 rgba(0,0,0,.25)}
.jg-pagina .jg-voltar:hover,.jg-pagina .jg-voltar:visited{color:#fff;text-decoration:none;opacity:.9}
.jg-pagina .jg-outros-titulo{margin:28px 0 0;font-weight:900;font-size:20px;text-transform:uppercase;letter-spacing:.2px}
.jg-pagina .jg-outros{margin-top:12px}
@media (min-width:601px){.jg-pagina .jg-outros{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}}

/* Cartões como link: ignora o estilo de links do tema (cor, fonte, sublinhado, borda) */
.jg-hub a.jg-card,.jg-hub a.jg-card:link,.jg-hub a.jg-card:visited,.jg-hub a.jg-card:hover,.jg-hub a.jg-card:active,.jg-hub a.jg-card:focus{
  color:#fff!important;text-decoration:none!important;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;
  font-style:normal!important;border-bottom-width:5px;background-image:var(--fundo)!important;opacity:1!important;filter:none!important}
.jg-hub a.jg-card span,.jg-hub a.jg-card:hover span,.jg-hub a.jg-card:visited span{
  color:#fff!important;text-decoration:none!important;font-family:inherit!important;font-style:normal!important;
  border:0!important;box-shadow:none;background-color:transparent}
.jg-hub a.jg-card .jg-titulo{font-weight:900!important;text-shadow:0 2px 0 rgba(0,0,0,.18)!important}
.jg-hub a.jg-card .jg-texto{font-weight:400!important;text-shadow:none!important}
.jg-hub a.jg-card .jg-botao{font-weight:900!important;background:var(--botao)!important;text-shadow:none!important}
.jg-hub a.jg-card .jg-ico{background:rgba(255,255,255,.14)!important;border:4px solid rgba(0,0,0,.22)!important;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.12)!important}
.jg-hub a.jg-card::after{display:none!important}
.jg-pagina a.jg-voltar,.jg-pagina a.jg-voltar:visited,.jg-pagina a.jg-voltar:hover{color:#fff!important;text-decoration:none!important;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;border:0!important;background:#16132e!important}