.jg-ceu {
  position: fixed; inset: 0; z-index: 9990; display: none;
  background: radial-gradient(120% 90% at 50% 0%,
              #1a1817 0%, var(--bg) 62%, #090808 100%);
  color: var(--txt); font-family: var(--fonte);
  overflow-y: auto; overscroll-behavior: contain;
}
.jg-ceu.on { display: flex; flex-direction: column; }





.jg-topo {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 22px; border-bottom: 1px solid var(--line);
  background: rgba(15,14,14,.72); backdrop-filter: blur(6px);
  position: sticky; top: 0; z-index: 3;
}
.jg-nome { font-size: 15px; font-weight: 700; letter-spacing: -.2px; }
.jg-nome span { color: var(--txt-3); font-weight: 500; margin-left: 8px; }





.jg-escada { margin-left: auto; display: flex; align-items: center; gap: 10px;
             min-width: 230px; }
.jg-escada-trilho {
  flex: 1; min-width: 120px; height: 8px; border-radius: 99px;
  background: var(--bg-3); border: 1px solid var(--line); overflow: hidden;
}





.jg-escada-cheio {
  display: block; height: 100%; border-radius: 99px; width: 0;
  background: linear-gradient(90deg, var(--novo), var(--ok));
  transition: width .5s cubic-bezier(.2,.9,.3,1);
}
.jg-escada b { font-size: 12.5px; color: var(--txt-2); white-space: nowrap; }
.jg-fechar {
  border: 1px solid var(--line-2); background: var(--bg-2); color: var(--txt-2);
  border-radius: 9px; padding: 6px 12px; font-size: 12.5px; cursor: pointer;
  font-family: inherit;
}
.jg-fechar:hover { background: var(--bg-3); color: var(--txt); }


.jg-fechar kbd {
  font: inherit; font-size: 10.5px; opacity: .6; margin-left: 7px;
  border: 1px solid currentColor; border-radius: 4px; padding: 0 4px;
}


.jg-palco {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; padding: 26px 18px 34px; gap: 18px;
}






.jg-portas-tit { text-align: center; animation: jgSobe .5s cubic-bezier(.2,.9,.3,1) both; }
.jg-sobre {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--accent-2);
  margin-bottom: 8px;
}
.jg-portas-tit h2 { font-size: 34px; letter-spacing: -.8px; margin: 0;
                    line-height: 1.1; }
@keyframes jgSobe { from { opacity: 0; transform: translateY(18px); } }






.jg-portas {
  display: grid; grid-template-columns: repeat(4, minmax(0, 236px));
  grid-auto-rows: 1fr; gap: 18px; margin-top: 22px;
}
@media (max-width: 1060px) { .jg-portas { grid-template-columns: repeat(2, minmax(0, 260px)); } }
@media (max-width: 560px)  { .jg-portas { grid-template-columns: 1fr; } }




.jg-porta.jg-p-notaveis { --jg-luz: var(--accent-2); }
.jg-porta.jg-p-cego     { --jg-luz: var(--purple); }
.jg-porta.jg-p-safra    { --jg-luz: var(--novo); }
.jg-porta.jg-p-sorteio  { --jg-luz: var(--info); }

.jg-porta {
  --jg-luz: var(--info);
  position: relative; cursor: pointer; color: inherit; font-family: inherit;
  text-align: center; padding: 22px 18px 18px; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  min-height: 318px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 70% at 50% 0%,
      color-mix(in srgb, var(--jg-luz) 22%, transparent), transparent 62%),
    linear-gradient(180deg, #1b1a19, #121111);
  border: 1px solid color-mix(in srgb, var(--jg-luz) 34%, var(--line-2));
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    inset 0 0 0 5px rgba(0,0,0,.35),
    inset 0 0 0 6px color-mix(in srgb, var(--jg-luz) 16%, transparent),
    0 18px 40px rgba(0,0,0,.45);
  transition: transform .22s cubic-bezier(.2,.9,.3,1.25), box-shadow .22s,
              border-color .22s, opacity .22s, filter .22s;
  animation: jgPortaEntra .55s cubic-bezier(.2,.9,.3,1.15) both;
  animation-delay: calc(var(--jg-i, 0) * 75ms + 120ms);
}
@keyframes jgPortaEntra {
  from { opacity: 0; transform: translateY(46px) scale(.94) rotateX(18deg); }
}


.jg-porta::before {
  content: ""; position: absolute; inset: -40% -60%; z-index: -1;
  background: linear-gradient(105deg, transparent 42%,
    rgba(255,255,255,.10) 50%, transparent 58%);
  transform: translateX(-60%); transition: transform .7s ease;
  pointer-events: none;
}
.jg-porta:hover::before, .jg-porta:focus-visible::before { transform: translateX(60%); }


.jg-porta::after {
  content: ""; position: absolute; inset: auto 16px 0 16px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--jg-luz);
  box-shadow: 0 0 14px var(--jg-luz);
  transform: scaleX(0); transition: transform .3s cubic-bezier(.2,.9,.3,1);
}
.jg-porta:hover, .jg-porta:focus-visible {
  transform: translateY(-10px) scale(1.035); outline: none;
  border-color: var(--jg-luz);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 0 5px rgba(0,0,0,.35),
    inset 0 0 0 6px color-mix(in srgb, var(--jg-luz) 38%, transparent),
    0 0 0 1px color-mix(in srgb, var(--jg-luz) 50%, transparent),
    0 26px 60px rgba(0,0,0,.55),
    0 0 46px color-mix(in srgb, var(--jg-luz) 30%, transparent);
}
.jg-porta:hover::after, .jg-porta:focus-visible::after { transform: scaleX(1); }
.jg-porta:active { transform: translateY(-4px) scale(.99); transition-duration: .08s; }


.jg-portas:has(.jg-porta:hover) .jg-porta:not(:hover) {
  opacity: .55; filter: saturate(.6);
}


.jg-porta-tecla {
  position: absolute; top: 12px; left: 12px;
  width: 26px; height: 26px; display: grid; place-items: center;
  font-size: 13px; font-weight: 800; color: var(--txt-2);
  border-radius: 8px; background: rgba(0,0,0,.4);
  border: 1px solid var(--line-2);
  box-shadow: 0 2px 0 rgba(0,0,0,.6);
  font-variant-numeric: tabular-nums;
}
.jg-porta:hover .jg-porta-tecla { color: #111; background: var(--jg-luz);
                                  border-color: var(--jg-luz); }


.jg-emblema {
  width: 92px; height: 92px; margin: 14px 0 6px; border-radius: 50%;
  display: grid; place-items: center; position: relative;
  background:
    radial-gradient(circle at 50% 38%,
      color-mix(in srgb, var(--jg-luz) 38%, #1a1a1a), #0d0d0d 72%);
  border: 2px solid color-mix(in srgb, var(--jg-luz) 70%, transparent);
  box-shadow:
    0 0 0 5px rgba(0,0,0,.45),
    0 0 0 6px color-mix(in srgb, var(--jg-luz) 30%, transparent),
    0 0 30px color-mix(in srgb, var(--jg-luz) 35%, transparent),
    inset 0 -8px 18px rgba(0,0,0,.5);
  transition: transform .35s cubic-bezier(.2,.9,.3,1.4), box-shadow .3s;
}
.jg-emblema svg {
  width: 42px; height: 42px; fill: none; stroke: var(--jg-luz);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--jg-luz) 70%, transparent));
}
.jg-porta:hover .jg-emblema {
  transform: scale(1.1) rotate(-6deg);
  box-shadow:
    0 0 0 5px rgba(0,0,0,.45),
    0 0 0 6px color-mix(in srgb, var(--jg-luz) 60%, transparent),
    0 0 52px color-mix(in srgb, var(--jg-luz) 60%, transparent),
    inset 0 -8px 18px rgba(0,0,0,.5);
}


.jg-p-notaveis .jg-emblema { animation: jgRespira 2.4s ease-in-out infinite; }
@keyframes jgRespira {
  50% { box-shadow: 0 0 0 5px rgba(0,0,0,.45),
                    0 0 0 6px color-mix(in srgb, var(--jg-luz) 55%, transparent),
                    0 0 48px color-mix(in srgb, var(--jg-luz) 55%, transparent),
                    inset 0 -8px 18px rgba(0,0,0,.5); }
}

.jg-porta > b {
  display: block; font-size: 18px; font-weight: 800; letter-spacing: -.3px;
  line-height: 1.2; color: var(--txt); text-wrap: balance;
}
.jg-porta:hover > b { color: color-mix(in srgb, var(--jg-luz) 55%, #fff); }
.jg-porta-oq { display: block; font-size: 12.5px; color: var(--txt-2);
               line-height: 1.5; text-wrap: pretty; }
.jg-porta-n {
  margin-top: auto; font-size: 12px; color: var(--txt-3);
  font-variant-numeric: tabular-nums; padding: 5px 12px; border-radius: 99px;
  background: rgba(0,0,0,.35);
  border: 1px solid color-mix(in srgb, var(--jg-luz) 22%, var(--line));
}
.jg-porta-n b { font-size: 12px; color: var(--jg-luz); font-weight: 700; }
.jg-porta-n.jg-so-notaveis { color: var(--jg-luz); font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .jg-porta, .jg-portas-tit, .jg-p-notaveis .jg-emblema { animation: none; }
  .jg-porta::before { display: none; }
}


.jg-mesa {
  position: relative; width: min(672px, calc(100vw - 32px));
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}


.jg-pips { display: flex; gap: 6px; align-items: center; }
.jg-pip {
  width: 9px; height: 9px; border-radius: 50%; background: var(--bg-4);
  border: 1px solid var(--line-2); transition: background .25s, transform .25s;
}
.jg-pip.feito { background: var(--txt-3); border-color: var(--txt-3); }
.jg-pip.guardado { background: var(--ok); border-color: var(--ok); }
.jg-pip.agora { transform: scale(1.5); background: var(--txt);
                border-color: var(--txt); }
.jg-conta { font-size: 12.5px; color: var(--txt-3); margin-left: 8px;
            font-variant-numeric: tabular-nums; }















.jg-lugar { overflow: visible; }



@keyframes jgGuardou {
  to { transform: translate(190px, 210px) scale(.34) rotate(9deg); opacity: 0; }
}
@keyframes jgPassou {
  to { transform: translate(-360px, 30px) rotate(-11deg); opacity: 0; }
}
.jg-lugar .bau-c.jg-saiu-guardar { animation: jgGuardou .42s cubic-bezier(.4,0,.8,.2) forwards; }
.jg-lugar .bau-c.jg-saiu-passar  { animation: jgPassou .34s cubic-bezier(.4,0,.9,.3) forwards; }
@keyframes jgEntrou {
  from { transform: translateY(26px) scale(.96); opacity: 0; }
}
.jg-lugar .bau-c.jg-entrou { animation: jgEntrou .30s cubic-bezier(.2,.9,.3,1); }







.jg-gestos { display: flex; gap: 12px; align-items: center; }
.jg-bt {
  font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border-radius: 11px; padding: 11px 20px; border: 1px solid var(--line-2);
  background: var(--bg-2); color: var(--txt-2);
  transition: transform .12s, background .16s, border-color .16s;
}
.jg-bt:hover { background: var(--bg-3); color: var(--txt); }
.jg-bt:active { transform: translateY(1px); }
.jg-bt kbd {
  font: inherit; font-size: 11px; font-weight: 500; opacity: .6;
  margin-left: 8px; border: 1px solid currentColor; border-radius: 4px;
  padding: 0 4px;
}
.jg-bt.jg-guardar {
  background: var(--ok); border-color: var(--ok); color: #06210f;
}





.jg-bt.jg-guardar kbd {
  opacity: .78; border-color: transparent; background: rgba(0, 0, 0, .13);
}
.jg-bt.jg-guardar:hover { filter: brightness(1.08); }
.jg-bt[disabled] { opacity: .45; cursor: default; transform: none; }






.jg-pilha {
  position: fixed; right: 26px; bottom: 24px; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--bg-2); border: 1px solid var(--line);
}




.jg-pilha-cartas {
  position: relative; width: 34px; height: 44px; border-radius: 5px;
  border: 1px dashed transparent;
}



.jg-pilha-cartas.jg-vazia { border-color: var(--line-2); }
.jg-pilha-c {
  position: absolute; inset: -1px; border-radius: 5px;
  background: var(--bg-4); border: 1px solid var(--line-2);
}
.jg-pilha-c.n-raro     { border-color: var(--info); }
.jg-pilha-c.n-epico    { border-color: var(--purple); }
.jg-pilha-c.n-lendario { border-color: var(--laranja-lendario, var(--accent-2)); }
.jg-pilha-c.n-incomum  { border-color: var(--novo); }
.jg-pilha-txt { font-size: 12.5px; color: var(--txt-2); }
.jg-pilha-txt b { display: block; font-size: 17px; color: var(--txt);
                  font-variant-numeric: tabular-nums; line-height: 1.1; }
.jg-desfazer {
  border: none; background: none; color: var(--txt-3); font-family: inherit;
  font-size: 11.5px; cursor: pointer; text-decoration: underline;
  padding: 0; margin-top: 2px;
}
.jg-desfazer:hover { color: var(--txt); }







.jg-clarao {
  position: fixed; inset: 0; pointer-events: none; z-index: 9991;
  opacity: 0; background:
    radial-gradient(60% 50% at 50% 46%,
      color-mix(in srgb, var(--jg-clarao-cor, var(--info)) 42%, transparent),
      transparent 70%);
}
@keyframes jgClarao {
  0% { opacity: 0; } 18% { opacity: .95; } 100% { opacity: 0; }
}
.jg-clarao.on { animation: jgClarao .72s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .jg-clarao.on { animation: none; }
  .jg-lugar .bau-c.jg-entrou,
  .jg-lugar .bau-c.jg-saiu-guardar,
  .jg-lugar .bau-c.jg-saiu-passar { animation: none; }
}




.tr-faiscas { z-index: 9991; }





.jg-fim { text-align: center; max-width: 620px; }
.jg-fim h2 { font-size: 26px; letter-spacing: -.5px; margin: 0 0 8px; }
.jg-fim-premio { font-size: 15px; color: var(--txt-2); margin: 0 0 18px; }
.jg-fim-premio b { color: var(--ok); }
.jg-fim-graus { display: flex; gap: 8px; justify-content: center;
                flex-wrap: wrap; margin-bottom: 20px; }
.jg-grau {
  font-size: 12px; border-radius: 99px; padding: 3px 11px;
  border: 1px solid var(--line-2); color: var(--txt-2);
}
.jg-grau.n-incomum  { color: var(--novo);   border-color: color-mix(in srgb, var(--novo) 45%, transparent); }
.jg-grau.n-raro     { color: var(--info);   border-color: color-mix(in srgb, var(--info) 45%, transparent); }
.jg-grau.n-epico    { color: var(--purple); border-color: color-mix(in srgb, var(--purple) 45%, transparent); }
.jg-grau.n-lendario { color: var(--laranja-lendario, var(--accent-2));
                      border-color: color-mix(in srgb, var(--accent-2) 45%, transparent); }
.jg-fim-bts { display: flex; gap: 10px; justify-content: center; }





.jg-espera { color: var(--txt-3); font-size: 13.5px; }
.jg-erro {
  max-width: 520px; text-align: center; color: var(--txt-2); font-size: 13.5px;
  border: 1px solid var(--line-2); border-radius: 12px; padding: 18px 20px;
  background: var(--bg-2);
}
.jg-erro b { display: block; color: var(--txt); font-size: 15px;
             margin-bottom: 6px; }






.jg-trilho { display: flex; align-items: center; gap: 14px; min-height: 28px; }
.jg-pip { width: 11px; height: 11px; }
.jg-pip.guardado { box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 70%, transparent);
                   animation: jgPipPula .4s cubic-bezier(.2,.9,.3,1.6); }
@keyframes jgPipPula { 40% { transform: scale(1.9); } }
.jg-seq {
  font-size: 12.5px; font-weight: 800; color: var(--accent-2);
  padding: 3px 10px; border-radius: 99px;
  background: color-mix(in srgb, var(--accent-2) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent-2) 40%, transparent);
  opacity: 0; transform: scale(.6);
  transition: opacity .2s, transform .2s;
}
.jg-seq.on { opacity: 1; transform: scale(1);
             animation: jgSeq .45s cubic-bezier(.2,.9,.3,1.8); }
@keyframes jgSeq { 0% { transform: scale(.5); } 60% { transform: scale(1.18); } }

.jg-luz-mesa {
  --jg-mesa-cor: rgba(255,255,255,.4);
  position: absolute; left: 50%; top: 20px; width: 980px; height: 640px;
  transform: translateX(-50%); pointer-events: none; z-index: -1;
  background:
    radial-gradient(38% 34% at 50% 50%,
      color-mix(in srgb, var(--jg-mesa-cor) 20%, transparent), transparent 72%),
    radial-gradient(34% 5% at 50% 86%, rgba(0,0,0,.75), transparent 80%);
  transition: background .5s;
}
.jg-mesa { isolation: isolate; }



.jg-gestos { gap: 16px; margin-top: 4px; }
.jg-gestos .jg-bt {
  font-size: 15px; font-weight: 800; padding: 14px 26px; border-radius: 14px;
  box-shadow: 0 5px 0 #070707, 0 10px 24px rgba(0,0,0,.4);
  transition: transform .08s, box-shadow .08s, background .16s, filter .16s;
}
.jg-gestos .jg-bt:hover { transform: translateY(-2px);
  box-shadow: 0 7px 0 #070707, 0 14px 28px rgba(0,0,0,.45); }
.jg-gestos .jg-bt:active { transform: translateY(5px);
  box-shadow: 0 0 0 #070707, 0 4px 10px rgba(0,0,0,.4); }
.jg-gestos .jg-bt.jg-guardar {
  padding: 14px 34px; font-size: 16px;
  background: linear-gradient(180deg, #45dc86, var(--ok));
  box-shadow: 0 5px 0 #17803f, 0 10px 30px color-mix(in srgb, var(--ok) 35%, transparent);
}
.jg-gestos .jg-bt.jg-guardar:hover {
  box-shadow: 0 7px 0 #17803f, 0 14px 38px color-mix(in srgb, var(--ok) 50%, transparent);
}
.jg-gestos .jg-bt.jg-guardar:active {
  box-shadow: 0 0 0 #17803f, 0 4px 14px color-mix(in srgb, var(--ok) 30%, transparent);
}
.jg-gestos .jg-bt[disabled] { transform: translateY(5px); box-shadow: none; }


.jg-mais {
  position: fixed; z-index: 9992; pointer-events: none;
  font-size: 34px; font-weight: 900; color: var(--ok);
  text-shadow: 0 2px 0 #0b3a1c, 0 0 18px color-mix(in srgb, var(--ok) 70%, transparent);
  transform: translate(-50%, -50%);
  animation: jgMais .85s cubic-bezier(.5,0,.75,.2) forwards;
}
@keyframes jgMais {
  0%   { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  18%  { transform: translate(-50%, -90%) scale(1.25); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(.6);
         opacity: .9; }
}
.jg-pilha.jg-pulo { animation: jgPilhaPula .42s cubic-bezier(.2,.9,.3,1.7) .62s; }
@keyframes jgPilhaPula { 40% { transform: scale(1.14); border-color: var(--ok); } }

@media (prefers-reduced-motion: reduce) {
  .jg-pip.guardado, .jg-seq.on, .jg-pilha.jg-pulo { animation: none; }
}










.jg-ceu::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  box-shadow: inset 0 0 220px 40px #000;
}
.jg-topo, .jg-palco { position: relative; z-index: 1; }
.jg-topo { background: transparent; border-bottom-color: transparent;
           backdrop-filter: none; }
.jg-nome span { opacity: .7; }


.jg-sobre { display: flex; align-items: center; justify-content: center; gap: 12px; }
.jg-sobre::before, .jg-sobre::after {
  content: ""; width: 44px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-2));
}
.jg-sobre::after { transform: scaleX(-1); }
.jg-portas-tit h2 {
  font-size: 44px; letter-spacing: -.02em;
  text-shadow: 0 2px 0 #000, 0 0 34px color-mix(in srgb, var(--accent-2) 22%, transparent);
}


.jg-portas { grid-template-columns: repeat(4, minmax(0, 272px)); gap: 22px;
             margin-top: 30px; position: relative; }
.jg-portas::before {
  content: ""; position: absolute; left: -12%; right: -12%; top: 40%; bottom: -22%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--accent-2) 9%, transparent), transparent 70%);
}
.jg-porta { min-height: 408px; padding: 26px 20px 22px; gap: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--jg-luz) 16%, transparent), transparent 32%),
    radial-gradient(120% 70% at 50% 0%,
      color-mix(in srgb, var(--jg-luz) 20%, transparent), transparent 62%),
    linear-gradient(180deg, #1c1b1a, #111010);
}
.jg-emblema { width: 108px; height: 108px; margin: 22px 0 10px; }
.jg-emblema svg { width: 48px; height: 48px; }
.jg-porta > b { font-size: 20px; }
.jg-porta-oq { font-size: 13px; }



.jg-cantos, .jg-cantos::before, .jg-cantos::after { pointer-events: none; }
.jg-cantos {
  position: absolute; inset: 9px; z-index: 0;
  --c: color-mix(in srgb, var(--jg-luz) 75%, transparent);
  background:
    linear-gradient(var(--c), var(--c)) top left / 16px 2px,
    linear-gradient(var(--c), var(--c)) top left / 2px 16px,
    linear-gradient(var(--c), var(--c)) top right / 16px 2px,
    linear-gradient(var(--c), var(--c)) top right / 2px 16px,
    linear-gradient(var(--c), var(--c)) bottom left / 16px 2px,
    linear-gradient(var(--c), var(--c)) bottom left / 2px 16px,
    linear-gradient(var(--c), var(--c)) bottom right / 16px 2px,
    linear-gradient(var(--c), var(--c)) bottom right / 2px 16px;
  background-repeat: no-repeat; opacity: .55; transition: opacity .2s, inset .25s;
}
.jg-porta.jg-mira .jg-cantos { opacity: 1; inset: 6px; }
.jg-porta > * { position: relative; z-index: 1; }
.jg-porta > .jg-porta-tecla { position: absolute; }


.jg-porta-tecla {
  top: 16px; left: 16px; width: 30px; height: 30px; font-size: 14px;
  border-radius: 8px; border-bottom-width: 3px;
}



.jg-porta-n { margin-top: auto; padding: 0; border: 0; background: none;
              font-size: 12px; color: var(--txt-3); display: flex;
              flex-direction: column; align-items: center; gap: 0; }
.jg-porta-n b { font-size: 28px; font-weight: 800; letter-spacing: -.02em;
                line-height: 1.05; color: var(--jg-luz);
                text-shadow: 0 0 18px color-mix(in srgb, var(--jg-luz) 40%, transparent); }
.jg-porta-n.jg-so-notaveis { font-size: 13px; font-weight: 800;
  letter-spacing: .02em; padding: 7px 14px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--jg-luz) 45%, transparent);
  background: color-mix(in srgb, var(--jg-luz) 10%, transparent); flex-direction: row; }


.jg-porta.jg-mira {
  transform: translateY(-12px) scale(1.04); border-color: var(--jg-luz);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    inset 0 0 0 5px rgba(0,0,0,.35),
    inset 0 0 0 6px color-mix(in srgb, var(--jg-luz) 40%, transparent),
    0 0 0 2px color-mix(in srgb, var(--jg-luz) 70%, transparent),
    0 30px 70px rgba(0,0,0,.6),
    0 0 60px color-mix(in srgb, var(--jg-luz) 35%, transparent);
}
.jg-porta.jg-mira::after { transform: scaleX(1); }
.jg-porta.jg-mira .jg-porta-tecla { color: #111; background: var(--jg-luz);
                                    border-color: var(--jg-luz); }
.jg-porta.jg-mira .jg-emblema {
  transform: scale(1.1) rotate(-6deg);
  box-shadow:
    0 0 0 5px rgba(0,0,0,.45),
    0 0 0 6px color-mix(in srgb, var(--jg-luz) 60%, transparent),
    0 0 56px color-mix(in srgb, var(--jg-luz) 60%, transparent),
    inset 0 -8px 18px rgba(0,0,0,.5);
}
.jg-porta.jg-mira > b { color: color-mix(in srgb, var(--jg-luz) 45%, #fff); }
.jg-portas:has(.jg-porta:hover) .jg-porta:not(:hover) { opacity: 1; filter: none; }
.jg-portas:has(.jg-mira) .jg-porta:not(.jg-mira) { opacity: .62; filter: saturate(.55); }

.jg-dica { margin: 18px 0 0; font-size: 12px; color: var(--txt-3); }
.jg-dica kbd { font: inherit; font-size: 11px; border: 1px solid var(--line-2);
  border-bottom-width: 2px; border-radius: 5px; padding: 0 5px; margin-right: 3px;
  color: var(--txt-2); }

@media (max-width: 1220px) { .jg-portas { grid-template-columns: repeat(2, minmax(0, 272px)); } }
@media (max-width: 600px)  { .jg-portas { grid-template-columns: 1fr; } .jg-porta { min-height: 0; } }




.jg-mesa {
  width: auto; display: grid; justify-items: center; align-items: center;
  grid-template-columns: 170px auto 170px; column-gap: 34px; row-gap: 18px;
  grid-template-areas: "trilho trilho trilho" "monte lugar pilha" "gestos gestos gestos";
  padding: 34px 40px 36px;
}
.jg-trilho { grid-area: trilho; }
.jg-lugar  { grid-area: lugar; }
.jg-gestos { grid-area: gestos; }
.jg-monte  { grid-area: monte; }
.jg-mesa > .jg-pilha { grid-area: pilha; }

.jg-feltro {
  position: absolute; inset: 0; z-index: -2; border-radius: 28px;
  background:
    radial-gradient(60% 55% at 50% 48%, #262019, #151311 62%, #0e0d0c),
    #111;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.06),
    inset 0 -10px 30px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.04),
    0 0 0 8px #0b0a0a,
    0 0 0 9px rgba(255,176,32,.12),
    0 40px 90px rgba(0,0,0,.7);
}

.jg-feltro::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}
.jg-luz-mesa { top: 50%; width: 100%; height: 100%; left: 50%;
               transform: translate(-50%, -50%); }



.jg-lugar { animation: jgFlutua 3.4s ease-in-out infinite; }
@keyframes jgFlutua { 50% { transform: translateY(-5px); } }
.jg-lugar .bau-c { box-shadow: 0 30px 60px rgba(0,0,0,.7), 0 8px 16px rgba(0,0,0,.5); }



.jg-monte { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.jg-monte-cartas, .jg-pilha-cartas {
  position: relative; width: 104px; height: 140px; border-radius: 10px;
}
.jg-monte-cartas.jg-vazia, .jg-pilha-cartas.jg-vazia {
  border: 2px dashed rgba(255,255,255,.12);
}
.jg-costas {
  position: absolute; inset: 0; border-radius: 10px;
  transform: translate(calc(var(--k) * -2px), calc(var(--k) * -3px));
  background:
    repeating-linear-gradient(45deg, rgba(255,176,32,.10) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(255,176,32,.10) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #2a221a, #15110d);
  border: 1px solid rgba(255,176,32,.35);
  box-shadow: inset 0 0 0 4px #15110d, inset 0 0 0 5px rgba(255,176,32,.25),
              0 6px 14px rgba(0,0,0,.55);
}
.jg-monte-txt, .jg-pilha-txt {
  display: flex; flex-direction: column; align-items: center;
  font-size: 12px; color: var(--txt-3); text-transform: uppercase;
  letter-spacing: .08em; font-weight: 700;
}
.jg-monte-txt b, .jg-mesa .jg-pilha-txt b {
  font-size: 34px; color: var(--txt); letter-spacing: -.02em; line-height: 1;
  text-transform: none; font-variant-numeric: tabular-nums;
}


.jg-mesa > .jg-pilha {
  position: static; background: none; border: 0; padding: 0;
  flex-direction: column; gap: 14px;
}
.jg-mesa .jg-pilha-c {
  inset: 0; border-radius: 10px; transform-origin: 50% 90%;
  background: linear-gradient(170deg, #203326, #111a14);
  border: 2px solid var(--ok);
  box-shadow: 0 6px 16px rgba(0,0,0,.55), 0 0 18px color-mix(in srgb, var(--ok) 25%, transparent);
}
.jg-mesa .jg-pilha-txt b { color: var(--ok); }
.jg-mesa .jg-desfazer { text-transform: none; letter-spacing: 0; font-weight: 500; margin-top: 6px; }


.jg-pips { gap: 5px; }
.jg-pip { width: 30px; height: 7px; border-radius: 4px; }
.jg-pip.agora { transform: scaleY(1.6); background: var(--txt); }
.jg-pip.guardado { animation-name: jgSegPula; }
@keyframes jgSegPula { 40% { transform: scaleY(2.4); } }



@keyframes jgGuardou {
  to { transform: translate(var(--vx, 430px), var(--vy, 10px)) scale(.22) rotate(12deg); opacity: 0; }
}
@keyframes jgPassou {
  to { transform: translate(-260px, 300px) rotate(-16deg); opacity: 0; }
}

@media (max-width: 1060px) {
  .jg-mesa { grid-template-columns: auto; grid-template-areas: "trilho" "lugar" "gestos";
             padding: 20px 12px; }
  .jg-monte { display: none; }
  .jg-mesa > .jg-pilha { position: fixed; right: 16px; bottom: 16px; }
  .jg-mesa .jg-pilha-cartas { width: 52px; height: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .jg-lugar { animation: none; }
}
.jg-porta > .jg-cantos { position: absolute; z-index: 0; }


.jg-porta { animation-fill-mode: backwards; }




.jg-mesa .jg-pilha-c { display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 10px 8px; overflow: hidden; }
.jg-mesa .jg-pilha-c.n-raro     { border-color: var(--info); }
.jg-mesa .jg-pilha-c.n-epico    { border-color: var(--purple); }
.jg-mesa .jg-pilha-c.n-lendario { border-color: var(--accent-2); }
.jg-pilha-c img, .jg-pilha-c i, .jg-fim-c img, .jg-fim-c i {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  border: 2px solid rgba(255,255,255,.18); flex: none;
  display: grid; place-items: center; font-style: normal; font-weight: 800;
  font-size: 20px; background: #2a2f2b; color: var(--txt);
}
.jg-pilha-c em, .jg-fim-c em {
  font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--txt);
  text-align: center; line-height: 1.25; max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; text-transform: none; letter-spacing: 0;
}


.jg-fim { max-width: 1100px; display: flex; flex-direction: column; align-items: center; }
.jg-fim-n { display: flex; flex-direction: column; align-items: center; margin: 6px 0 22px; }
.jg-fim-n b {
  font-size: 96px; font-weight: 900; line-height: .95; letter-spacing: -.04em;
  color: var(--ok); font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 0 #0b3a1c, 0 0 40px color-mix(in srgb, var(--ok) 45%, transparent);
}
.jg-fim-n b.jg-tique { animation: jgTique .16s ease-out; }
@keyframes jgTique { 50% { transform: scale(1.12); } }
.jg-fim-n span { font-size: 15px; font-weight: 700; color: var(--txt-2); margin-top: 6px; }
.jg-fim-cartas { display: flex; justify-content: center; margin: 0 0 22px; padding: 10px 0 18px; }
.jg-fim-c {
  width: 112px; height: 150px; margin: 0 -8px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 12px 10px;
  background: linear-gradient(170deg, #203326, #111a14);
  border: 2px solid var(--ok);
  box-shadow: 0 14px 30px rgba(0,0,0,.6), 0 0 22px color-mix(in srgb, var(--ok) 22%, transparent);
  transform: rotate(var(--r)) translateY(calc(var(--k) * 0px));
  animation: jgFimCarta .5s cubic-bezier(.2,.9,.3,1.35) backwards;
  animation-delay: calc(var(--k) * 90ms + 250ms);
  transition: transform .2s cubic-bezier(.2,.9,.3,1.4);
}
.jg-fim-c:hover { transform: rotate(0deg) translateY(-14px) scale(1.06); z-index: 2; }
@keyframes jgFimCarta {
  from { opacity: 0; transform: translateY(60px) rotate(calc(var(--r) * 4)) scale(.7); }
}
.jg-fim-c.n-raro     { border-color: var(--info);     background: linear-gradient(170deg, #1a2638, #0f141c); }
.jg-fim-c.n-epico    { border-color: var(--purple);   background: linear-gradient(170deg, #271d38, #13101c); }
.jg-fim-c.n-lendario { border-color: var(--accent-2); background: linear-gradient(170deg, #372a14, #1a140b);
                       box-shadow: 0 14px 30px rgba(0,0,0,.6), 0 0 30px color-mix(in srgb, var(--accent-2) 40%, transparent); }
.jg-fim-premio { font-size: 15px; }
.jg-fim-premio b { color: var(--txt); }
.jg-fim-graus .jg-grau { font-weight: 700; }
.jg-fim .jg-fim-bts .jg-bt { font-size: 15px; font-weight: 800; padding: 13px 24px; border-radius: 14px;
  box-shadow: 0 5px 0 #070707; }
.jg-fim .jg-fim-bts .jg-bt.jg-guardar { background: linear-gradient(180deg, #45dc86, var(--ok));
  box-shadow: 0 5px 0 #17803f, 0 10px 30px color-mix(in srgb, var(--ok) 35%, transparent); }
.jg-fim .jg-fim-bts .jg-bt:active { transform: translateY(5px); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .jg-fim-c, .jg-fim-n b.jg-tique { animation: none; } }






.jg-portas:has(.jg-mira) .jg-porta:not(.jg-mira) { opacity: 1; filter: none; }
@property --jg-cena { syntax: "<color>"; inherits: true; initial-value: #ffb020; }
.jg-ceu { transition: --jg-cena .4s ease; }
.jg-ceu:has(.jg-p-notaveis.jg-mira) { --jg-cena: var(--accent-2); }
.jg-ceu:has(.jg-p-cego.jg-mira)     { --jg-cena: var(--purple); }
.jg-ceu:has(.jg-p-safra.jg-mira)    { --jg-cena: var(--novo); }
.jg-ceu:has(.jg-p-sorteio.jg-mira)  { --jg-cena: var(--info); }
.jg-portas::before {
  left: -30%; right: -30%; top: -30%; bottom: -40%;
  background: radial-gradient(50% 50% at 50% 55%,
    color-mix(in srgb, var(--jg-cena) 16%, transparent), transparent 70%);
}
.jg-porta { min-height: 0; border-width: 2px;
  border-color: color-mix(in srgb, var(--jg-luz) 55%, transparent); }
.jg-emblema { width: 124px; height: 124px; margin: 18px 0 8px; }
.jg-emblema svg { width: 66px; height: 66px; stroke-width: 1.4; }
.jg-porta-oq { font-size: 14px; color: #c9c9c9; }
.jg-porta-n { margin-top: auto; padding-top: 8px; }
.jg-porta-n b { font-size: 40px; }
.jg-porta-tecla { color: #111; background: color-mix(in srgb, var(--jg-luz) 80%, #000);
  border-color: var(--jg-luz); }



.jg-feltro {
  inset: -120px -260px; border-radius: 0; box-shadow: none;
  background: radial-gradient(46% 50% at 50% 52%, #231d15, rgba(15,13,11,.6) 55%, transparent 80%);
}
.jg-feltro::after { border-radius: 0;
  -webkit-mask-image: radial-gradient(46% 50% at 50% 52%, #000, transparent 80%);
          mask-image: radial-gradient(46% 50% at 50% 52%, #000, transparent 80%); }
.jg-luz-mesa { background:
    radial-gradient(34% 30% at 50% 50%,
      color-mix(in srgb, var(--jg-mesa-cor) 18%, transparent), transparent 72%),
    radial-gradient(30% 6% at 50% 80%, rgba(255,176,32,.12), transparent 80%); }
@keyframes jgFlutua {
  0%, 100% { transform: rotate(-1.2deg); }
  50% { transform: rotate(-1.2deg) translateY(-6px); }
}
.jg-lugar { transform: rotate(-1.2deg); }
.jg-monte, .jg-mesa > .jg-pilha { align-self: center; margin-top: 40px; }
.jg-monte-cartas, .jg-pilha-cartas { width: 140px; height: 188px; border-radius: 12px; }
.jg-costas, .jg-mesa .jg-pilha-c { border-radius: 12px; }
.jg-monte-txt b, .jg-mesa .jg-pilha-txt b { font-size: 50px; font-weight: 900; }
.jg-pilha-c img, .jg-pilha-c i { width: 62px; height: 62px; font-size: 24px; }
.jg-mesa .jg-pilha-c em { font-size: 13px; }
.jg-pilha-cartas.jg-vazia::after, .jg-monte-cartas.jg-vazia::after {
  content: attr(data-vazio); position: absolute; inset: 0; display: grid;
  place-items: center; text-align: center; padding: 12px; font-size: 12px;
  color: var(--txt-3); text-transform: none; letter-spacing: 0; font-weight: 600;
}
.jg-mesa .jg-desfazer {
  text-decoration: none; border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: 8px; padding: 4px 10px; color: var(--txt-2); font-size: 12px;
}
.jg-mesa .jg-desfazer:hover { color: var(--txt); border-color: var(--txt-3); }


.jg-ceu:has(.jg-mesa) .jg-escada { visibility: hidden; }
.jg-pip.agora { background: var(--accent-2); border-color: var(--accent-2);
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent-2) 60%, transparent); }
.jg-gestos .jg-bt:not(.jg-guardar) { color: #d0d0d0; }
.jg-gestos .jg-bt { min-height: 58px; }



.jg-recusa {
  position: fixed; left: 50%; bottom: 120px; z-index: 9993;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 18px 40px rgba(0,0,0,.6);
  transition: opacity .2s, transform .25s cubic-bezier(.2,.9,.3,1.3);
}
.jg-recusa.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }






.jg-ceu { overflow-x: clip; }


.jg-palco { overflow-x: clip; }



.jg-feltro { inset: -30px -260px; }




.jg-portas:has(.jg-mira) .jg-porta:not(.jg-mira) { filter: saturate(.7) brightness(.8); }
.jg-porta.jg-mira { transform: translateY(-14px) scale(1.07); }
.jg-porta.jg-mira::before { transform: translateX(60%); }
.jg-emblema { width: 100px; height: 100px; margin: 16px 0 6px; }
.jg-emblema svg { width: 52px; height: 52px; }
.jg-porta > b { font-size: 22px; }
.jg-porta-n.jg-so-notaveis {
  padding: 0; border: 0; background: none; flex-direction: column;
  font-size: 12px; font-weight: 500; color: var(--txt-3); letter-spacing: 0;
}
.jg-porta-n.jg-so-notaveis b { font-size: 21px; line-height: 1.35; }
.jg-dica { font-size: 13px; margin-top: 26px; }
.jg-dica kbd { font-size: 12px; }




.jg-trilho {
  padding: 9px 16px; border-radius: 99px; background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 20px rgba(0,0,0,.4);
}
.jg-monte, .jg-mesa > .jg-pilha { align-self: start; margin-top: 64px; }
.jg-feltro { background: radial-gradient(46% 50% at 50% 52%, #2b241a, rgba(18,15,12,.7) 55%, transparent 80%); }


.jg-gestos .jg-bt:not(.jg-guardar) {
  background: linear-gradient(180deg, #2a2827, #1d1c1b); color: #e6e6e6;
  border-color: rgba(255,255,255,.14);
}


.jg-fim .jg-sobre { font-size: 14px; letter-spacing: .2em; }
.jg-fim-cartas { margin: 14px 0 -26px; padding: 0; position: relative; z-index: 2; }
.jg-fim-c {
  width: 150px; height: 200px; margin: 0 -4px;
  transform: translateY(var(--y)) rotate(var(--r));
}
.jg-fim-c img, .jg-fim-c i { width: 70px; height: 70px; font-size: 28px; }
.jg-fim-c em { font-size: 14px; }
.jg-fim-c:hover { transform: translateY(-18px) rotate(0) scale(1.06); }
.jg-fim-painel {
  width: min(560px, calc(100vw - 32px)); padding: 44px 34px 26px; border-radius: 20px;
  background: linear-gradient(180deg, #1d1b19, #131211);
  border: 2px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 6px 0 #070707,
              0 40px 90px rgba(0,0,0,.65),
              0 0 80px color-mix(in srgb, var(--ok) 10%, transparent);
  position: relative;
}
.jg-fim-conta { list-style: none; margin: 0 0 16px; padding: 0 0 14px;
                border-bottom: 2px dotted rgba(255,255,255,.12); }
.jg-fim-conta li { display: flex; justify-content: space-between; align-items: center;
  font-size: 16px; color: var(--txt-2); padding: 7px 2px;
  animation: jgSobe .4s cubic-bezier(.2,.9,.3,1) backwards; }
.jg-fim-conta li:nth-child(1) { animation-delay: .15s; }
.jg-fim-conta li:nth-child(2) { animation-delay: .3s; }
.jg-fim-conta li:nth-child(3) { animation-delay: .45s; }
.jg-fim-conta li:nth-child(4) { animation-delay: .6s; }
.jg-fim-conta li:nth-child(5) { animation-delay: .75s; }
.jg-fim-conta li b { font-size: 20px; color: var(--txt); font-variant-numeric: tabular-nums; }
.jg-fim-conta li.jg-l-guard b { color: var(--ok); }
.jg-fim-conta li span { display: flex; align-items: center; gap: 9px; }
.jg-l-grau i { width: 10px; height: 10px; border-radius: 50%; background: var(--txt-3); }
.jg-l-grau.n-incomum i  { background: var(--novo); }
.jg-l-grau.n-raro i     { background: var(--info); }
.jg-l-grau.n-epico i    { background: var(--purple); }
.jg-l-grau.n-lendario i { background: var(--accent-2); }
.jg-fim-painel .jg-fim-n { margin: 4px 0 0; }
.jg-fim-painel .jg-fim-n b { font-size: 88px; }
.jg-fim-painel .jg-fim-n span { font-size: 14px; }
.jg-fim-painel .jg-fim-premio { margin: 10px 0 0; }
.jg-fim-bts { margin-top: 26px; align-items: center; gap: 14px; }
.jg-fim .jg-fim-bts .jg-bt.jg-bt-grande { font-size: 18px; padding: 18px 44px; border-radius: 16px; }
.jg-fim .jg-fim-bts .jg-bt.jg-bt-texto {
  background: none; border-color: transparent; box-shadow: none; color: var(--txt-2);
  font-weight: 700; padding: 12px 14px;
}
.jg-fim .jg-fim-bts .jg-bt.jg-bt-texto:hover { color: var(--txt); text-decoration: underline; }
.jg-ceu:has(.jg-fim) .jg-escada { opacity: .5; }
@media (prefers-reduced-motion: reduce) { .jg-fim-conta li { animation: none; } }




.jg-portas:has(.jg-mira) .jg-porta:not(.jg-mira) {
  filter: saturate(.45) brightness(.72); transform: scale(.97);
}
.jg-portas:has(.jg-mira) .jg-porta:not(.jg-mira) .jg-porta-n b {
  color: #a8a8a8; text-shadow: none; font-size: 32px;
}
.jg-porta.jg-mira {
  transform: translateY(-16px) scale(1.08);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 0 0 26px color-mix(in srgb, var(--jg-luz) 22%, transparent),
    inset 0 0 0 6px color-mix(in srgb, var(--jg-luz) 40%, transparent),
    0 0 0 2px color-mix(in srgb, var(--jg-luz) 70%, transparent),
    0 34px 70px rgba(0,0,0,.6),
    0 0 70px color-mix(in srgb, var(--jg-luz) 38%, transparent);
}

.jg-portas::after {
  content: ""; position: absolute; left: 6%; right: 6%; bottom: -46px; height: 70px;
  z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--jg-cena) 26%, transparent), transparent 72%);
  filter: blur(6px);
}
.jg-ceu:has(.jg-portas) .jg-escada { opacity: .45; }





@keyframes jgFlutua {
  0%, 100% { transform: rotate(-.5deg); }
  50% { transform: rotate(-.5deg) translateY(-5px); }
}
.jg-lugar { transform: rotate(-.5deg); }
.jg-lugar .bau-c {
  box-shadow: 0 40px 60px -20px rgba(0,0,0,.85), 0 30px 60px rgba(0,0,0,.55),
              0 8px 16px rgba(0,0,0,.5);
}
.jg-conta {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}


.jg-trilho { position: relative; }
.jg-seq { position: absolute; left: calc(100% + 12px); top: 50%;
          margin-top: -13px; white-space: nowrap; }
.jg-seq:not(.on) { transform: scale(.6); }
.jg-pilha-cartas.jg-vazia, .jg-monte-cartas.jg-vazia {
  border: 0; background: linear-gradient(180deg, #0c0c0c, #141312);
  box-shadow: inset 0 10px 22px rgba(0,0,0,.8), inset 0 1px 0 color-mix(in srgb, var(--novo) 45%, transparent),
              0 1px 0 rgba(255,255,255,.05);
}
.jg-monte-cartas, .jg-pilha-cartas { width: 150px; height: 200px; }



.jg-fim h2.jg-fim-tit { font-size: 44px; font-weight: 800; letter-spacing: -.02em; margin: 6px 0 4px;
  text-shadow: 0 2px 0 #000; }
.jg-fim-tit b { color: var(--ok); font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 #0b3a1c, 0 0 30px color-mix(in srgb, var(--ok) 45%, transparent);
  display: inline-block; min-width: .6em; }
.jg-fim-tit b.jg-tique { animation: jgTique .16s ease-out; }
.jg-fim-cartas { margin: 18px 0 24px; position: relative; z-index: 1; }
.jg-fim-cartas::before {
  content: ""; position: absolute; inset: -40px -120px; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 55%, color-mix(in srgb, var(--ok) 16%, transparent), transparent 70%);
}
.jg-fim-c { box-shadow: 0 22px 40px rgba(0,0,0,.7), 0 0 22px color-mix(in srgb, var(--ok) 22%, transparent); }
.jg-fim-c em { font-size: 12.5px; padding: 0 4px; }
.jg-fim-painel { padding: 26px 34px 22px; }
.jg-fim-conta { margin-bottom: 12px; }
.jg-fim-conta li { font-size: 18px; }
.jg-fim-painel .jg-fim-premio { margin: 4px 0 0; font-size: 14px; color: var(--txt-2); }
.jg-fim .jg-fim-bts .jg-bt.jg-bt-segundo {
  font-size: 18px; padding: 18px 30px; border-radius: 16px;
  background: linear-gradient(180deg, #2a2827, #1d1c1b); color: #e6e6e6;
  border: 1px solid rgba(255,255,255,.16); box-shadow: 0 5px 0 #070707;
}







.jg-portas:has(.jg-mira) .jg-porta:not(.jg-mira) > b { color: #a9adb0; }
.jg-emblema svg { width: 62px; height: 62px; }
.jg-porta { min-height: 420px; }
.jg-porta.jg-mira {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 0 26px color-mix(in srgb, var(--jg-luz) 22%, transparent),
    inset 0 0 0 6px color-mix(in srgb, var(--jg-luz) 40%, transparent),
    0 0 0 2px color-mix(in srgb, var(--jg-luz) 70%, transparent),
    0 34px 70px rgba(0,0,0,.6),
    0 0 70px color-mix(in srgb, var(--jg-luz) 38%, transparent);
}




.jg-trilho { --seq: 0; }
.jg-pip.agora {
  box-shadow: 0 0 calc(10px + var(--seq) * 5px)
              calc(var(--seq) * 1px) color-mix(in srgb, var(--accent-2) 70%, transparent);
}
.jg-monte-txt b { font-size: 34px; color: #b9b9b9; }
.jg-mesa .jg-desfazer { border: 0; padding: 2px 0; text-decoration: underline;
  text-underline-offset: 3px; color: var(--txt-3); }




.jg-fim-c { width: 196px; height: 256px; }
.jg-fim-c img, .jg-fim-c i { width: 92px; height: 92px; font-size: 34px; }
.jg-fim-c em { font-size: 15px; }
.jg-fim-cartas::before {
  

  inset: -80px -160px;
  background:
    radial-gradient(50% 50% at 50% 55%, color-mix(in srgb, var(--ok) 18%, transparent), transparent 70%);
}
.jg-fim-cartas { margin-bottom: 14px; }
.jg-fim-painel { padding-top: 30px; }
.jg-fim h2.jg-fim-tit b { font-size: 1.4em; vertical-align: -.08em; }
.jg-fim-conta li:not(.jg-l-guard) { color: var(--txt-3); }
.jg-fim-conta li:not(.jg-l-guard) b { color: var(--txt-2); }
.jg-fim-conta li.jg-l-guard {
  margin: 6px -14px 0; padding: 10px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--ok) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  color: var(--txt); font-weight: 700;
}
.jg-fim-conta li span { flex: 1; }
.jg-fim-conta li span::after {
  content: ""; flex: 1; margin: 0 12px; border-bottom: 2px dotted rgba(255,255,255,.1);
  transform: translateY(4px);
}
.jg-fim .jg-fim-bts .jg-bt.jg-bt-segundo { font-size: 15px; padding: 13px 22px; }
.jg-fim .jg-fim-bts .jg-bt.jg-bt-grande {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 0 #17803f,
              0 12px 34px color-mix(in srgb, var(--ok) 38%, transparent);
}




@media (max-height: 820px) {
  .jg-fim-c { width: 150px; height: 196px; }
  .jg-fim-c img, .jg-fim-c i { width: 66px; height: 66px; font-size: 26px; }
  .jg-fim h2.jg-fim-tit { font-size: 36px; }
  .jg-porta { min-height: 360px; }
  .jg-portas-tit h2 { font-size: 36px; }
}








.jg-ceu { scrollbar-width: thin; scrollbar-color: #2a2a2a transparent; }


.jg-portas::after {
  background: radial-gradient(50% 50% at 50% 50%,
    color-mix(in srgb, var(--jg-cena) 36%, transparent), transparent 72%);
}



.jg-monte-txt, .jg-mesa .jg-pilha-txt {
  padding: 8px 18px 10px; border-radius: 12px; min-width: 120px;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 4px 0 #070707;
}
.jg-monte-txt { border-top: 3px solid color-mix(in srgb, var(--accent-2) 55%, transparent); }
.jg-mesa .jg-pilha-txt { border-top: 3px solid color-mix(in srgb, var(--ok) 60%, transparent); }
.jg-monte-txt b, .jg-mesa .jg-pilha-txt b { font-size: 46px; }
.jg-monte-txt b { color: #e8e8e8; }
.jg-mesa .jg-desfazer { margin-top: 4px; }

.jg-seq { font-size: 15px; padding: 4px 13px; margin-top: -16px; }
.jg-gestos .jg-bt:not(.jg-guardar) { border: 2px solid #555; min-width: 150px; }



.jg-fim-c { transform: translateY(calc(var(--y) * 2.3 - 8px)) rotate(var(--r)); }
.jg-fim-c small {
  font-size: 11.5px; color: var(--txt-3); text-align: center; line-height: 1.3;
  max-width: 100%; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.jg-fim-c small:empty { display: none; }
.jg-fim-cartas { margin-bottom: -22px; z-index: 3; }
.jg-fim-painel { padding-top: 38px; }
.jg-fim-bts { flex-direction: column; gap: 6px; }
.jg-fim .jg-fim-bts .jg-bt.jg-bt-texto { font-size: 14px; padding: 6px 10px; }





.jg-feltro {
  inset: 70px -40px 90px; border-radius: 50% / 46%;
  background:
    radial-gradient(70% 70% at 50% 40%, #2a241b, #1a1612 60%, #110f0d);
  box-shadow:
    inset 0 2px 0 rgba(255,176,32,.14),
    inset 0 -18px 40px rgba(0,0,0,.65),
    0 0 0 3px #0b0a09,
    0 0 0 4px rgba(255,176,32,.16),
    0 50px 90px rgba(0,0,0,.75);
}
.jg-feltro::after { border-radius: inherit; opacity: .09;
  -webkit-mask-image: none; mask-image: none; }
.jg-luz-mesa { z-index: -1; }


.jg-monte, .jg-mesa > .jg-pilha { gap: 0; }
.jg-monte-txt, .jg-mesa .jg-pilha-txt {
  width: 150px; margin-top: -14px; position: relative; z-index: 2; box-sizing: border-box;
}
.jg-monte-txt b, .jg-mesa .jg-pilha-txt b { font-size: 52px; }



.jg-seq { font-size: 17px; padding: 5px 14px; margin-top: -18px; box-shadow: 0 0 18px color-mix(in srgb, var(--accent-2) 40%, transparent); }


.jg-gestos { width: 620px; display: grid; grid-template-columns: 1fr 2fr; gap: 14px; }
.jg-gestos .jg-bt { min-height: 64px; min-width: 0; }
.jg-gestos .jg-bt kbd { font-size: 13px; }



.jg-fim-cartas::before {
  background: radial-gradient(420px 300px at 50% 55%,
    color-mix(in srgb, var(--novo) 25%, transparent), transparent 72%);
}
.jg-fim h2.jg-fim-tit { margin-bottom: 24px; }
.jg-fim-cartas { margin: 0 0 -16px; }
.jg-fim-painel { padding-top: 34px; }
.jg-fim-conta li:not(.jg-l-guard) { font-size: 14px; opacity: .6; }
.jg-fim-conta li.jg-l-guard { font-size: 22px; }
.jg-fim-conta li.jg-l-guard b { font-size: 28px; }
.jg-fim .jg-fim-bts { margin-top: 24px; gap: 10px; }
.jg-fim .jg-fim-bts .jg-bt.jg-bt-grande { width: min(560px, calc(100vw - 32px)); min-height: 68px; }
.jg-fim .jg-fim-bts .jg-bt.jg-bt-texto {
  border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 9px 20px;
}


.jg-porta-n b { font-size: 26px; font-weight: 700; }
.jg-portas:has(.jg-mira) .jg-porta:not(.jg-mira) .jg-porta-n b {
  font-size: 24px; color: color-mix(in srgb, var(--jg-luz) 60%, #777);
}







.jg-porta.jg-p-novos { --jg-luz: var(--accent); }
.jg-porta.jg-p-recem { --jg-luz: var(--ok); }
.jg-ceu:has(.jg-p-novos.jg-mira) { --jg-cena: var(--accent); }
.jg-ceu:has(.jg-p-recem.jg-mira) { --jg-cena: var(--ok); }
.jg-portas:has(> .jg-porta:nth-child(5)) {
  grid-template-columns: repeat(3, minmax(0, 300px)); gap: 18px 22px; margin-top: 22px;
}
.jg-portas:has(> .jg-porta:nth-child(5)) .jg-porta {
  min-height: 0; padding: 18px 20px 16px; gap: 8px;
}
.jg-portas:has(> .jg-porta:nth-child(5)) .jg-emblema {
  width: 76px; height: 76px; margin: 6px 0 2px;
}
.jg-portas:has(> .jg-porta:nth-child(5)) .jg-emblema svg { width: 44px; height: 44px; }
.jg-portas:has(> .jg-porta:nth-child(5)) .jg-porta > b { font-size: 19px; }
.jg-portas:has(> .jg-porta:nth-child(5)) .jg-porta-oq { font-size: 13px; }
.jg-portas:has(> .jg-porta:nth-child(5)) .jg-porta-n b { font-size: 26px; }
.jg-portas:has(> .jg-porta:nth-child(5)) .jg-porta.jg-mira { transform: translateY(-8px) scale(1.04); }
.jg-portas:has(> .jg-porta:nth-child(5)) ~ .jg-dica { margin-top: 16px; }
@media (max-width: 1000px) {
  .jg-portas:has(> .jg-porta:nth-child(5)) { grid-template-columns: repeat(2, minmax(0, 300px)); }
}
@media (max-width: 600px) {
  .jg-portas:has(> .jg-porta:nth-child(5)) { grid-template-columns: 1fr; }
}

.jg-p-novos .jg-emblema { animation: jgRespira 2.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .jg-p-novos .jg-emblema { animation: none; } }






.jg-nivel { display: flex; flex-direction: column; align-items: center; width: 100%; }
.jg-nivel + .jg-nivel { margin-top: 26px; }
.jg-nivel-tit {
  margin: 18px 0 0; font-size: 15px; font-weight: 800; letter-spacing: .02em;
  color: var(--txt); display: flex; align-items: baseline; gap: 10px;
}
.jg-nivel-tit span { font-size: 12.5px; font-weight: 500; color: var(--txt-3); letter-spacing: 0; }
.jg-nivel-reco .jg-nivel-tit::before, .jg-nivel-explorar .jg-nivel-tit::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; align-self: center;
}
.jg-nivel-reco .jg-nivel-tit::before { background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); }
.jg-nivel-explorar .jg-nivel-tit::before { background: var(--txt-3); }
.jg-nivel-reco .jg-portas { grid-template-columns: repeat(3, minmax(0, 300px)); margin-top: 16px; }
.jg-nivel-reco .jg-porta { min-height: 0; padding: 20px 20px 16px; gap: 8px; }
.jg-nivel-reco .jg-emblema { width: 84px; height: 84px; margin: 8px 0 2px; }
.jg-nivel-reco .jg-emblema svg { width: 46px; height: 46px; }
.jg-nivel-reco .jg-porta > b { font-size: 20px; }
.jg-nivel-reco .jg-porta-oq { font-size: 13px; }


.jg-porta.jg-p-reco { --jg-luz: var(--accent-2); }
.jg-ceu:has(.jg-p-reco.jg-mira) { --jg-cena: var(--accent-2); }
.jg-porta.jg-p-notaveis { --jg-luz: var(--info); }
.jg-porta.jg-p-sorteio  { --jg-luz: var(--purple); }
.jg-porta.jg-p-cego     { --jg-luz: #8a8f98; }
.jg-ceu:has(.jg-p-notaveis.jg-mira) { --jg-cena: var(--info); }
.jg-ceu:has(.jg-p-sorteio.jg-mira)  { --jg-cena: var(--purple); }
.jg-ceu:has(.jg-p-cego.jg-mira)     { --jg-cena: #8a8f98; }
.jg-p-notaveis .jg-emblema { animation: none; }
.jg-p-reco .jg-emblema { animation: jgRespira 2.4s ease-in-out infinite; }


.jg-portas.jg-portas-mini {
  grid-template-columns: repeat(4, minmax(0, 230px)); gap: 12px; margin-top: 12px;
}
.jg-portas-mini::before, .jg-portas-mini::after { display: none; }
.jg-porta.jg-mini {
  min-height: 0; padding: 12px 14px; gap: 2px 12px; text-align: left;
  display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto auto;
  align-items: center; border-radius: 14px;
}
.jg-porta.jg-mini .jg-cantos { display: none; }
.jg-porta.jg-mini .jg-porta-tecla { top: 8px; left: auto; right: 8px; width: 22px; height: 22px; font-size: 12px; }
.jg-porta.jg-mini .jg-emblema {
  grid-row: 1 / span 3; width: 44px; height: 44px; margin: 0;
  box-shadow: 0 0 0 3px rgba(0,0,0,.4), 0 0 14px color-mix(in srgb, var(--jg-luz) 30%, transparent);
}
.jg-porta.jg-mini .jg-emblema svg { width: 24px; height: 24px; }
.jg-porta.jg-mini > b { font-size: 14px; padding-right: 26px; }
.jg-porta.jg-mini .jg-porta-oq {
  font-size: 11.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.jg-porta.jg-mini .jg-porta-n { margin-top: 2px; flex-direction: row; gap: 5px; align-items: baseline; }
.jg-porta.jg-mini .jg-porta-n b,
.jg-portas:has(.jg-mira) .jg-porta.jg-mini:not(.jg-mira) .jg-porta-n b { font-size: 15px; }
.jg-porta.jg-mini .jg-porta-n.jg-so-notaveis b { font-size: 12px; }
.jg-porta.jg-mini.jg-mira { transform: translateY(-4px) scale(1.03); }
.jg-porta.jg-mini.jg-mira .jg-emblema { transform: none; }
@media (max-width: 1000px) {
  .jg-nivel-reco .jg-portas { grid-template-columns: repeat(2, minmax(0, 300px)); }
  .jg-portas.jg-portas-mini { grid-template-columns: repeat(2, minmax(0, 260px)); }
}
@media (max-width: 600px) {
  .jg-nivel-reco .jg-portas, .jg-portas.jg-portas-mini { grid-template-columns: 1fr; }
}


.jg-lugar { position: relative; }
.jg-aposta-tag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); z-index: 3;
  white-space: nowrap; font-size: 12.5px; font-weight: 800; letter-spacing: .02em;
  color: #1a1200; background: var(--accent-2); padding: 5px 14px; border-radius: 99px;
  box-shadow: 0 4px 0 #8a5a00, 0 8px 22px color-mix(in srgb, var(--accent-2) 45%, transparent);
}




.jg-nivel-reco .jg-portas { margin-top: 30px; }
.jg-nivel-tit { position: relative; z-index: 2; margin-top: 10px; }
.jg-nivel + .jg-nivel { margin-top: 14px; }
.jg-portas-tit h2 { font-size: 38px; }
.jg-dica { margin-top: 14px; }
.jg-nivel-reco .jg-porta { padding: 18px 20px 14px; }
.jg-nivel-reco .jg-emblema { width: 78px; height: 78px; margin: 4px 0 0; }