/* ================================================================================================
   JOGOS DA TELA DESLOGADA

   84,7% do publico e celular (Android 68,5% + iOS 16,2%), entao TUDO aqui nasce pensado para a
   tela pequena e cresce depois. O breakpoint e 767px, o mesmo que o mobile.css do portal ja usa -
   nao inventei outro.

   POR QUE NAO USO aspect-ratio
     Ele resolveria a roda em uma linha, mas so existe no Safari 15+. Com 16% de iOS, aparelho
     velho ficaria com a roleta achatada. O truque do padding-bottom: 100% funciona em tudo e
     custa a mesma coisa.

   ANIMACAO SO POR transform E opacity
     Sao as duas propriedades que a GPU resolve sozinha. Animar width, top ou margin obriga o
     navegador a recalcular o layout a cada quadro - no Android de entrada isso trava.
   ================================================================================================ */

:root {
    --jg-ouro:    #f5c243;
    --jg-ouro-2:  #e0a021;
    --jg-escuro:  #10141c;
    --jg-carta:   #1b2230;
    --jg-borda:   rgba(255, 255, 255, .14);
    --jg-verde:   #2fbf71;
    --jg-texto:   #f2f4f8;
}

/* ---- O CONVITE na home ---------------------------------------------------------------------- */
.jg-convite {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, var(--jg-escuro), #1d2739);
    border: 1px solid var(--jg-borda);
    border-radius: 14px;
    padding: 1rem 1.1rem;
    margin: 0 0 1rem;
    color: var(--jg-texto);
}

.jg-convite-icone { font-size: 2rem; line-height: 1; }
.jg-convite-txt   { flex: 1 1 auto; min-width: 0; }
.jg-convite-txt h3 { margin: 0 0 .15rem; font-size: clamp(.95rem, 3.6vw, 1.15rem); font-weight: 700; }
.jg-convite-txt p  { margin: 0; font-size: clamp(.75rem, 3vw, .9rem); opacity: .8; }

.jg-btn {
    background: linear-gradient(180deg, var(--jg-ouro), var(--jg-ouro-2));
    color: #221a04;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
    padding: .7rem 1.4rem;
    /* 44px e o minimo que o dedo acerta sem erro. */
    min-height: 44px;
    cursor: pointer;
    white-space: nowrap;
}

.jg-btn:disabled { opacity: .45; cursor: default; }

.jg-btn-vazado {
    background: transparent;
    color: var(--jg-texto);
    border: 1px solid var(--jg-borda);
}

@media (max-width: 767px) {
    .jg-convite { flex-wrap: wrap; }
    .jg-convite .jg-btn { width: 100%; }
}

/* ---- O MODAL ---------------------------------------------------------------------------------
   No celular ocupa a tela inteira; no desktop vira caixa centrada. E a mesma marcacao. */
.jg-fundo {
    position: fixed;
    inset: 0;
    background: rgba(4, 6, 10, .82);
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    overflow-y: auto;
}

.jg-caixa {
    background: var(--jg-escuro);
    border: 1px solid var(--jg-borda);
    border-radius: 18px;
    width: 100%;
    max-width: 440px;
    padding: 1.25rem;
    color: var(--jg-texto);
    text-align: center;
    position: relative;
}

@media (max-width: 767px) {
    .jg-fundo { padding: 0; }
    .jg-caixa {
        max-width: none;
        min-height: 100%;
        border-radius: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.jg-fechar {
    position: absolute;
    top: .5rem; right: .6rem;
    background: none; border: 0;
    color: var(--jg-texto);
    font-size: 1.6rem; line-height: 1;
    min-width: 44px; min-height: 44px;
    cursor: pointer; opacity: .7;
}

.jg-titulo  { margin: .2rem 0 .1rem; font-size: clamp(1.05rem, 4.4vw, 1.35rem); font-weight: 800; }
.jg-premio  { margin: 0 0 1rem; font-size: clamp(.8rem, 3.2vw, .95rem); opacity: .85; }
.jg-premio strong { color: var(--jg-ouro); }
.jg-aviso   { margin: .8rem 0 0; font-size: clamp(.78rem, 3vw, .9rem); opacity: .85; }
.jg-erro    { color: #ff8a8a; }

.jg-resultado-ganhou { color: var(--jg-verde); font-weight: 800;
                       font-size: clamp(1rem, 4vw, 1.2rem); }
.jg-resultado-perdeu { opacity: .85; }

/* ================================================================================================
   ROLETA
   ================================================================================================ */
.jg-roda-area {
    position: relative;
    width: min(88vw, 340px);
    margin: 0 auto;
}

/* O padding-bottom cria a altura igual a largura - o circulo perfeito sem aspect-ratio. */
.jg-roda-area::before { content: ""; display: block; padding-bottom: 100%; }

.jg-roda {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 6px solid var(--jg-ouro);
    box-shadow: 0 0 0 3px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.5);
    /* A curva desacelera no fim - e a desaceleracao que prende o olho. */
    transition: transform 4.2s cubic-bezier(.12, .74, .16, 1);
    transform: rotate(0deg);
}

.jg-roda-rotulo {
    position: absolute;
    left: 50%; top: 50%;
    transform-origin: 0 0;
    font-size: clamp(.5rem, 2.4vw, .72rem);
    font-weight: 800;
    color: #10141c;
    white-space: nowrap;
    pointer-events: none;
}

.jg-ponteiro {
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 12px solid transparent;
    border-right: 12px solid transparent;
    border-top: 20px solid var(--jg-ouro);
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
    z-index: 2;
}

.jg-eixo {
    position: absolute;
    top: 50%; left: 50%;
    width: 18%; height: 18%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--jg-ouro);
    box-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* ================================================================================================
   BAUS e CARTA VIRADA - o mesmo grid, arte diferente
   ================================================================================================ */
.jg-grade {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .6rem;
    margin: .5rem 0 0;
}

@media (max-width: 600px) { .jg-grade { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 380px) { .jg-grade { grid-template-columns: repeat(2, 1fr); } }

.jg-peca {
    background: var(--jg-carta);
    border: 1px solid var(--jg-borda);
    border-radius: 12px;
    min-height: 84px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    font-size: clamp(1.5rem, 6vw, 2rem);
    cursor: pointer;
    transition: transform .18s ease, opacity .3s ease, border-color .3s ease;
}

.jg-peca:active   { transform: scale(.95); }
.jg-peca.apagada  { opacity: .28; }
.jg-peca.premiada { border-color: var(--jg-ouro); transform: scale(1.06); }
.jg-peca small    { font-size: .62rem; font-weight: 700; opacity: .9; }

/* Carta virada: o giro em 3D com as duas faces. */
.jg-carta-3d { perspective: 700px; }
.jg-carta-int {
    position: relative;
    width: 100%; min-height: 96px;
    transform-style: preserve-3d;
    transition: transform .6s ease;
}
.jg-carta-int.virada { transform: rotateY(180deg); }
.jg-carta-face {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 12px;
    border: 1px solid var(--jg-borda);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}
.jg-carta-frente { background: linear-gradient(140deg, #24314a, #161d2b); font-size: 1.6rem; }
.jg-carta-verso  { background: var(--jg-carta); transform: rotateY(180deg);
                   font-size: clamp(1rem, 4.5vw, 1.3rem); font-weight: 800; }

/* ================================================================================================
   CACA-NIQUEL - os rolos NUNCA quebram linha; o simbolo encolhe
   ================================================================================================ */
.jg-rolos {
    display: flex;
    flex-wrap: nowrap;
    gap: .5rem;
    justify-content: center;
    margin: .5rem 0 0;
}

.jg-rolo {
    flex: 1 1 0;
    min-width: 0;
    height: clamp(88px, 26vw, 130px);
    background: var(--jg-carta);
    border: 1px solid var(--jg-borda);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.jg-rolo-fita {
    position: absolute;
    left: 0; right: 0; top: 0;
    display: flex;
    flex-direction: column;
    transition: transform 1.1s cubic-bezier(.18, .7, .2, 1);
}

.jg-rolo-item {
    height: clamp(88px, 26vw, 130px);
    display: flex; align-items: center; justify-content: center;
    font-size: clamp(1.4rem, 6vw, 2.1rem);
    font-weight: 800;
}

/* ================================================================================================
   RASPADINHA
   ================================================================================================ */
.jg-raspa-area {
    position: relative;
    width: min(88vw, 320px);
    height: clamp(120px, 38vw, 170px);
    margin: .5rem auto 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--jg-borda);
    background: var(--jg-carta);
}

.jg-raspa-premio {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .3rem;
    font-size: clamp(1.5rem, 7vw, 2.2rem);
    font-weight: 800;
}

.jg-raspa-simbolos { display: flex; gap: .8rem; }

/* touch-action: none e OBRIGATORIO. Sem ele o dedo raspa E a pagina rola junto - no celular
   a raspadinha fica impossivel de usar. */
.jg-raspa-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    touch-action: none;
    cursor: grab;
}

/* ================================================================================================
   Quem pediu menos movimento, recebe menos movimento.
   ================================================================================================ */
@media (prefers-reduced-motion: reduce) {
    .jg-roda, .jg-rolo-fita, .jg-carta-int, .jg-peca { transition-duration: .01ms !important; }
}