* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 100vh;

    font-family: Arial, Helvetica, sans-serif;

    background:
        linear-gradient(180deg,
            #151229,
            #090811);

    color: white;

    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.app {
    width: 100%;
    max-width: 500px;

    margin: 0 auto;

    padding:
        30px 16px 50px;

    text-align: center;

    overflow-x: hidden;
}

h1 {
    margin-bottom: 5px;
    font-size: 30px;
}

.subtitulo {
    margin-top: 5px;
    margin-bottom: 35px;

    color: #c8c5d6;
}

.roleta-area {
    position: relative;

    width: min(100%, 400px);
    aspect-ratio: 1 / 1;

    margin: 0 auto 35px;
}

.moldura-roleta {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    z-index: 1;

    pointer-events: none;
}

.disco-wrap {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 73%;
    height: 73%;

    transform: translate(-50%, -50%);

    border-radius: 50%;
    overflow: hidden;

    z-index: 2;
}

.moldura-roleta {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: contain;

    z-index: 1;

    pointer-events: none;
}

.disco-wrap {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 73%;
    height: 73%;

    transform: translate(-50%, -50%);

    border-radius: 50%;
    overflow: hidden;

    z-index: 2;
}

#roleta {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    transition:
        transform 5s cubic-bezier(0.12,
            0.65,
            0.18,
            1);

    filter:
        drop-shadow(0 8px 14px rgba(0, 0, 0, 0.35));
}

.ponteiro {
    position: absolute;

    z-index: 10;

    left: 50%;
    top: -13px;

    transform: translateX(-50%);

    width: 0;
    height: 0;

    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 38px solid #ffffff;

    filter:
        drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5));
}

#girar {
    width: 100%;
    max-width: 330px;

    border: none;
    border-radius: 14px;

    padding: 17px;

    font-size: 19px;
    font-weight: bold;

    cursor: pointer;

    background: #7c5cff;
    color: white;
}

#girar:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.resultado {
    min-height: 30px;

    margin-top: 25px;

    font-size: 22px;
    font-weight: bold;
}

.aviso-estoque-premiada {
    width: 100%;
    max-width: 340px;

    margin:
        -14px auto 18px;

    padding:
        10px 13px;

    border:
        1px solid rgba(255,
            209,
            102,
            0.22);

    border-radius:
        11px;

    background:
        rgba(255,
            209,
            102,
            0.07);

    color:
        #d8d3e5;

    font-size:
        12px;

    line-height:
        1.45;
}

.aviso {
    margin-top: 30px;

    color: #77748a;

    font-size: 12px;
}

.aviso-comunidade {
    margin: 25px auto 0;
    padding: 18px;

    max-width: 360px;

    border: 1px solid #49445f;
    border-radius: 14px;

    background: #171423;
}

.aviso-comunidade p {
    margin-top: 0;
    line-height: 1.5;
}

.botao-canal,
#verificar-inscricao {
    width: 100%;

    margin-top: 10px;
    padding: 14px;

    border: none;
    border-radius: 10px;

    font-size: 15px;
    font-weight: bold;

    cursor: pointer;
}

.botao-canal {
    background: #229ed9;
    color: white;
}

#verificar-inscricao {
    background: #ffffff;
    color: #171423;
}

#verificar-inscricao:disabled {
    opacity: 0.5;
}

@media (max-height: 720px) {

    .app {
        padding-top: 18px;
        padding-bottom: 18px;
    }

    .subtitulo {
        margin-bottom: 22px;
    }

    .roleta-area {
        width: min(100%,
                350px,
                calc(100dvh - 250px));

        margin-bottom: 22px;
    }

    .aviso {
        margin-top: 18px;
    }
}

/* ========================================
   TELAS
======================================== */

.tela[hidden] {
    display: none !important;
}

.card-jogo[hidden] {
    display: none !important;
}

/* ========================================
   MENU PRINCIPAL
======================================== */

#tela-menu {
    width: 100%;
}

.menu-topo {
    margin-bottom: 26px;
}

.menu-logo {
    display: block;

    width: 78px;
    height: 78px;

    margin: 0 auto 16px;

    object-fit: contain;

    border-radius: 50%;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    -webkit-touch-callout: none;
}

.subtitulo-menu {
    margin:
        0 0 11px;
    color:
        #aaa6b8;
    font-size:
        12px;
    line-height:
        1.3;
}

/* ========================================
   GRADE DOS JOGOS
======================================== */
.grade-jogos {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
}

/* ========================================
   CARD DOS JOGOS
======================================== */
.card-jogo {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 10px;
    border:
        1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    background:
        linear-gradient(135deg,
            #221d3b,
            #151225);
    color: white;
    text-align: center;
    cursor: pointer;
    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.22);
    transition:
        transform 0.18s ease,
        border-color 0.18s ease;
}

button.card-jogo:active {
    transform: scale(0.97);
}


/* ========================================
   ÍCONE
======================================== */

.card-jogo-icone {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 15px;
    background:
        rgba(124, 92, 255, 0.16);
    font-size: 28px;
}

.icone-menu-img {
    width: 34px;
    height: 34px;
    object-fit: contain;
    display: block;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

/* ========================================
   CONTEÚDO
======================================== */

.card-jogo-conteudo {
    width: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 6px;
}

.card-jogo-conteudo strong {
    font-size: 16px;

    line-height: 1.15;
}

.card-jogo-conteudo span {
    color: #b9b5c9;

    font-size: 12px;

    line-height: 1.3;
}

.card-jogo-conteudo small {
    color: #8c78ff;

    font-size: 10px;

    font-weight: bold;

    line-height: 1.25;

    letter-spacing: 0.3px;
}


/* ========================================
   BLOQUEADOS
======================================== */

.card-bloqueado {
    opacity: 0.42;

    cursor: default;
}

.card-bloqueado .card-jogo-conteudo small {
    color: #8e899d;
}

/* ========================================
   ESPAÇOS FUTUROS
======================================== */

.card-vazio {
    opacity: 0.22;

    cursor: default;

    box-shadow: none;
}

/* ========================================
   VOLTAR AO MENU
======================================== */

.voltar-menu {
    display: block;

    margin:
        0 0 18px;

    padding:
        8px 12px;

    border: none;

    border-radius: 9px;

    background:
        rgba(255, 255, 255, 0.08);

    color: #c9c6d5;

    font-size: 12px;

    font-weight: bold;

    cursor: pointer;
}

#tela-pontos .voltar-menu {
    margin-bottom: 8px;
}

/* ========================================
   COMO GANHAR
======================================== */

#tela-como-ganhar {
    width: 100%;
}

.como-ganhar-titulo {
    margin:
        12px 0 22px;

    font-size:
        28px;
}

.como-ganhar-box {
    width:
        100%;

    max-width:
        370px;

    margin:
        0 auto;

    padding:
        18px;

    border:
        1px solid rgba(255,
            255,
            255,
            0.09);

    border-radius:
        16px;

    background:
        linear-gradient(135deg,
            #211d35,
            #151222);

    text-align:
        left;
}

.como-ganhar-box p {
    margin:
        0;

    padding:
        13px 0;

    color:
        #dedbe8;

    font-size:
        14px;

    line-height:
        1.55;

    border-bottom:
        1px solid rgba(255,
            255,
            255,
            0.07);
}

.como-ganhar-box p:first-child {
    padding-top:
        0;
}

.como-ganhar-box p:last-child {
    padding-bottom:
        0;

    border-bottom:
        none;
}

.link-telegram {
    color: #256bd3;
    font-weight: bold;
    text-decoration: none;
}

/* ========================================
   RANKING
======================================== */

#tela-ranking {
    width: 100%;
}

.ranking-titulo {
    margin:
        4px 0 3px;
}

.ranking-subtitulo {
    margin:
        0 0 22px;

    color:
        #aaa6b8;

    font-size:
        14px;
}

.ranking-abas {
    width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4,
            minmax(0, 1fr));

    gap: 8px;

    margin:
        0 0 18px;
}

.ranking-aba {
    width: 100%;

    padding:
        11px 8px;

    border:
        1px solid rgba(255,
            255,
            255,
            0.10);

    border-radius:
        11px;

    background:
        rgba(255,
            255,
            255,
            0.045);

    color:
        #aaa6b8;

    font-size:
        13px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

.ranking-aba.ativa {
    border-color:
        rgba(255,
            209,
            102,
            0.55);

    background:
        rgba(255,
            209,
            102,
            0.12);

    color:
        #ffd166;
}

.ranking-aba:active {
    transform:
        scale(0.97);
}

.minha-posicao-ranking {
    width: 100%;

    margin:
        0 auto 18px;

    padding:
        14px 16px;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items:
        center;

    gap:
        12px;

    border:
        1px solid rgba(255,
            209,
            102,
            0.38);

    border-radius:
        14px;

    background:
        rgba(255,
            209,
            102,
            0.10);

    text-align:
        left;
}

.minha-posicao-ranking .ranking-posicao {
    color:
        #ffd166;

    font-size:
        20px;

    font-weight:
        bold;
}

.minha-posicao-ranking .ranking-pontos {
    color:
        #ffd166;
}

.ranking-lista {
    width: 100%;

    display: flex;

    flex-direction: column;

    gap: 8px;
}

.ranking-linha {
    width: 100%;

    min-width: 0;

    padding:
        12px 14px;

    display: grid;

    grid-template-columns:
        46px minmax(0, 1fr) auto;

    align-items:
        center;

    gap:
        10px;

    border:
        1px solid rgba(255,
            255,
            255,
            0.08);

    border-radius:
        13px;

    background:
        linear-gradient(135deg,
            #211d35,
            #151222);

    text-align:
        left;
}

.ranking-linha.ranking-eu {
    border-color:
        rgba(124,
            92,
            255,
            0.65);

    background:
        rgba(124,
            92,
            255,
            0.14);
}

.ranking-linha.ranking-ganhador-media,
.ranking-linha.ranking-ganhador-baus,
.ranking-linha.ranking-ganhador-pontos {
    border-color:
        rgba(255,
            209,
            102,
            0.72);

    background:
        linear-gradient(135deg,
            rgba(255, 209, 102, 0.18),
            rgba(255, 209, 102, 0.07));

    box-shadow:
        0 0 16px rgba(255, 209, 102, 0.10);
}

.ranking-linha.ranking-ganhador-media .ranking-posicao,
.ranking-linha.ranking-ganhador-baus .ranking-posicao,
.ranking-linha.ranking-ganhador-pontos .ranking-posicao {
    color:
        #ffd166;
}

.ranking-linha.ranking-ganhador-media .ranking-pontos,
.ranking-linha.ranking-ganhador-baus .ranking-pontos,
.ranking-linha.ranking-ganhador-pontos .ranking-pontos {
    color:
        #ffd166;
}

.ranking-posicao {
    text-align:
        center;

    font-size:
        16px;

    font-weight:
        bold;
}

.ranking-nome {
    min-width: 0;

    overflow: hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    font-size:
        14px;
}

.ranking-pontos {
    white-space:
        nowrap;

    color:
        #cffff0;

    font-size:
        14px;

    font-weight:
        bold;
}

.ranking-carregando,
.ranking-vazio {
    margin:
        25px 0;

    color:
        #aaa6b8;

    font-size:
        14px;
}

.ranking-posicao-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 64px;
}

.ranking-movimento {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
}

/* ========================================
   ROLETA DE PONTOS
======================================== */

#tela-pontos {
    width: 100%;
}

.subtitulo-pontos {
    margin:
        3px 0 10px;

    color: #a9d9ca;

    font-size: 14px;
}

.placar-pontos {
    width: 100%;
    max-width: 330px;

    margin:
        0 auto 32px;

    padding:
        11px 18px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    border:
        1px solid rgba(137, 229, 198, 0.30);

    border-radius: 14px;

    background:
        rgba(68, 171, 137, 0.12);
}

.placar-pontos span {
    color: #a9d9ca;

    font-size: 11px;

    font-weight: bold;
}

.placar-pontos strong {
    color: #cffff0;

    font-size: 24px;
}

.roleta-pontos-area {
    position: relative;

    width:
        min(100%,
            320px);

    aspect-ratio: 1 / 1;

    margin:
        0 auto 30px;

    padding: 1px;

    border:
        7px solid #19d600;

    border-radius: 50%;

    background: #effff9;

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.25);
}

#roleta-pontos {
    display: block;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    transition:
        transform 5s cubic-bezier(0.12,
            0.65,
            0.18,
            1);
}

.ponteiro-pontos {
    position: absolute;
    z-index: 10;
    left: 50%;
    top: -19px;
    transform:
        translateX(-50%);
    width: 0;
    height: 0;
    border-left:
        18px solid transparent;
    border-right:
        18px solid transparent;
    border-top:
        39px solid #ffffff;
}

#girar-pontos {
    width: 100%;
    max-width: 330px;
    padding: 17px;
    border: none;
    border-radius: 14px;
    background:
        linear-gradient(135deg,
            #ff7b54,
            #ff4d6d);
    color: white;
    font-size: 18px;
    font-weight: bold;
}

#girar-pontos:disabled {
    opacity: 0.55;
}

.resultado-pontos {
    min-height: 30px;
    margin-top: 22px;
    color: #cffff0;
    font-size: 21px;
    font-weight: bold;
}

/* ========================================
   HISTÓRICO DOS JOGOS
======================================== */

.historico-jogo {
    width: 100%;
    max-width: 360px;

    margin:
        28px auto 0;

    padding:
        14px;

    border:
        1px solid rgba(255,
            255,
            255,
            0.08);

    border-radius:
        14px;

    background:
        rgba(255,
            255,
            255,
            0.035);

    text-align: left;
}

.historico-jogo-titulo {
    display: block;

    margin-bottom:
        12px;

    color:
        #ffffff;

    font-size:
        14px;

    text-align:
        center;
}

.historico-jogo-lista {
    display: flex;

    flex-direction: column;

    gap: 7px;
}

.historico-jogo-linha {
    width: 100%;

    min-width: 0;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) auto;

    align-items:
        center;

    gap:
        10px;

    padding:
        9px 10px;

    border-radius:
        9px;

    background:
        rgba(255,
            255,
            255,
            0.045);
}

.historico-jogo-nome {
    min-width: 0;

    overflow: hidden;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

    color:
        #dedbe8;

    font-size:
        13px;
}

.historico-jogo-resultado {
    white-space:
        nowrap;
    color:
        #cffff0;
    font-size:
        13px;
    font-weight:
        bold;
}

.historico-vazio {
    padding:
        8px 0;
    color:
        #8e899d;
    font-size:
        12px;
    text-align:
        center;
}

.ranking-nome-clicavel {
    cursor: pointer;
    color: #f4da8d;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
}

.ranking-nome-clicavel::after {
    content: " ›";
    font-size: 18px;
    font-weight: 900;
    color: #f4da8d;
}

.ranking-nome-clicavel:active {
    opacity: 0.6;
}

.ranking-premios-diamantes {
    width: 100%;

    margin:
        0 auto 18px;

    padding:
        11px 14px;

    display: flex;
    flex-direction: column;

    align-items: center;

    gap: 4px;

    border:
        1px solid rgba(255,
            209,
            102,
            0.38);

    border-radius:
        14px;

    background:
        rgba(255,
            209,
            102,
            0.08);
}

.ranking-premios-diamantes strong {
    color:
        #ffd166;

    font-size:
        13px;
}

.ranking-premios-diamantes small {
    color:
        #aaa6b8;

    font-size:
        11px;
}

.ranking-premios-diamantes[hidden],
.ranking-premios[hidden] {
    display:
        none !important;
}

/* ========================================
   REGRAS DA MÉDIA ATIVA
======================================== */

.ranking-regras-media-area {
    width: 100%;

    margin:
        -8px auto 16px;
}


.ranking-regras-media-botao {
    width: 100%;

    padding:
        11px 14px;

    border:
        1px solid rgba(124, 92, 255, 0.35);

    border-radius:
        11px;

    background:
        rgba(124, 92, 255, 0.10);

    color:
        #d9d2ff;

    font-size:
        13px;

    font-weight:
        800;

    cursor:
        pointer;
}


.ranking-regras-media-botao:active {
    transform:
        scale(0.98);
}


.ranking-regras-media-conteudo {
    margin-top:
        9px;

    padding:
        15px;

    border:
        1px solid rgba(255, 255, 255, 0.08);

    border-radius:
        13px;

    background:
        rgba(255, 255, 255, 0.045);

    color:
        #c8c5d6;

    text-align:
        left;

    font-size:
        12px;

    line-height:
        1.5;
}


.ranking-regras-media-conteudo strong {
    display:
        block;

    margin-bottom:
        10px;

    color:
        #ffffff;

    font-size:
        14px;
}

.ranking-regras-media-conteudo p {
    margin:
        8px 0;
}

#tela-modos .card-jogo {
    aspect-ratio: auto;
    min-height: 205px;
}