/* Painel */
.roulette-panel{width:100%;min-width:0;}

/* Distribuição cas Colunas em ROLETAS - Segue ordem de exibição na paginação. */
.roulette-mechanisms{display:grid;gap:20px;align-items:start;width:100%;min-width:0;
    grid-template-columns:
    minmax(250px,0.75fr) /* 1ª - ALAVANCA */
    minmax(100px,0.50fr) /* 2ª - TIPO DE DISPUTA */
    minmax(300px,1.20fr); /* 3ª - TIPO DE JOGO */
    }

/* Contêiner */
.roulette-card{min-width:0;width:100%;padding:0;border:0;background:transparent;box-shadow:none;display:flex;flex-direction:column;align-items:center;align-self:start;justify-content:flex-start;box-sizing:border-box;}

/* Textps Títulos */
.roulette-title{width:100%;display:flex;align-items:center;justify-content:center;gap:10px;margin:10px;}
.roulette-title i,.roulette-title span{font-size:var(--font-large);letter-spacing:.08em;text-align:center;color:var(--mutted);}

/* Área de Cobertura */
.wheel-surface,.reel-surface{position:relative;width:100%;max-width:100%;height:450px;margin:0 auto;border-radius:22px;background:transparent;border:0;overflow:hidden;box-sizing:border-box;}

/* Canvas */
.wheel-surface canvas,.reel-surface canvas{display:block;width:100%;height:100%;}

/* Roleta Redonda - Centro */
.roulette-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50px;height:50px;display:grid;place-items:center;text-align:center;border-radius:50%;background:var(--panel);border:2px solid var(--border);box-shadow:0 0 30px rgba(95, 99, 102, 0.50);font-weight:900;font-size:20px;pointer-events:none;}

/* Roleta Vertical - Disputa */
.roulette-reel-card{display:flex;  flex-direction:column;}
.roulette-reel-card .reel-surface{flex:0 0 auto;}
.roulette-reel-card .roulette-result{flex:0 0 auto;  min-height:40px;}

/* Resultado da Roleta - Disputa */
#rouletteBattleResult{margin:20px;font-size:var(--font-medium);font-weight:var(--font-bold);text-align:center;}

/* Resultado da Roleta - Jogo */
#rouletteGameResult{margin:20px;margin-top:20px;font-size:var(--font-medium);font-weight:var(--font-bold);text-align:center;}

/* Ponteiros / Setas */
.roulette-pointer{position:absolute;font-size:40px;top:1px;left:50%;transform:translateX(-50%);z-index:5;color:var(--white);text-shadow:0 0 20px rgba(255,255,255,.55);}
.reel-pointer-left,.reel-pointer-right{position:absolute;font-size:40px;top:50%;transform:translateY(-50%);z-index:5;color:var(--white);text-shadow:0 0 10px rgba(255,255,255,.50);}
.reel-pointer-left{left:-2px;}
.reel-pointer-right{right:-2px;}

/* Linha de Disputa */
.reel-center-line{position:absolute;left:0;right:0;top:33.333%;height:33.333%;border-top:2px solid rgba(255,255,255,.25);border-bottom:2px solid rgba(255,255,255,.25);pointer-events:none;}

/* Seleção de Resultados */

.roulette-result{max-width:400px;margin-bottom:20px;padding:10px;box-sizing:border-box;border-radius:15px;background:var(--panel);border:1px solid var(--border);font-size:var(--font-large);text-align:center;}
.roulette-result-colored{max-width:400px;min-width:100px;display:flex;align-items:center;justify-content:center;gap:10px;padding:10px;box-sizing:border-box;border-radius:12px!important;background:var(--result-bg)!important;color:var(--result-color)!important;border:0;font-size:var(--font-large);}
.roulette-result-colored .roulette-result-emoji{font-size:var(--font-large);}

/* ROLETA - Botão desabilitado */
.roulette-player-dialog-actions button:disabled,.editor-dialog-actions button:disabled{opacity:.35!important;filter:grayscale(1)!important;cursor:not-allowed!important;pointer-events:none!important;transform:none!important;box-shadow:none!important;}

/* Esteira de resultados */
.roulette-result-strip{margin:20px;gap:10px;padding:10px;font-weight:900;font-size:var(--font-small);display:flex;justify-content:space-between;flex-wrap:wrap;box-sizing:border-box;border-radius:12px;background:var(--panel);border:1px solid var(--border);color:var(--white);}
.roulette-result-strip span{font-size: var(--font-small); color:var(--white);}

/* Estado visual durante o giro */
.roulette-spinning{background:var(--panel)!important;color:var(--white)!important;border-color:var(--border)!important;}

/* Botão - Ativar Rodada */
#rouletteRoundToggleBtn{margin:20px;display:inline-flex;width:90%;align-self:center;white-space:nowrap;}

/* Botão - Sortear Jogadores */
#rouletteDrawPlayersBtn{margin:10px;display:inline-flex;width:90%;align-self:center;white-space:nowrap;}

/* Botão - Sorteio Simples / Sorteio Padrão */
#rouletteDrawGameBtn{margin:10px;display:inline-flex;width:90%;align-self:center;white-space:nowrap;}




#rouletteBattleReel canvas{
    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.18) 12%,
            rgba(0,0,0,.50) 28%,
            #000 40%,
            #000 60%,
            rgba(0,0,0,.50) 72%,
            rgba(0,0,0,.18) 88%,
            transparent 50%
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.18) 12%,
            rgba(0,0,0,.50) 28%,
            #000 40%,
            #000 60%,
            rgba(0,0,0,.50) 72%,
            rgba(0,0,0,.18) 88%,
            transparent 100%
        );
}

#rouletteBattleReel.reel-final canvas{
    -webkit-mask-image:linear-gradient(
        to bottom,
        transparent 0%,
        transparent 33.333%,
        #000 33.333%,
        #000 66.667%,
        transparent 66.667%,
        transparent 100%
    );

    mask-image:linear-gradient(
        to bottom,
        transparent 0%,
        transparent 33.333%,
        #000 33.333%,
        #000 66.667%,
        transparent 66.667%,
        transparent 100%
    );
}


/* Botão - Sorteio Padrão - Brilho */
.btn-lever{margin:10px;max-width:90%;background:var(--red); border-radius: 12px; gap:5px; padding:12px; border:none; font-size: var(--font-medium); font-weight:var(--font-bold); backdrop-filter:blur(20px); box-shadow:var(--shadow);  transition:.25s; cursor:pointer; display:flex; align-items:center; justify-content:center;cursor:pointer; transition:.2s ease;}
.btn-lever:hover{transform:translateY(-1px);transform: scale(1.03);filter:saturate(1.20) brightness(1.20);box-shadow:0 10px 10px rgba(0,0,0,.50),0 0 10px rgba(255,45,50,.90),0 0 20px rgba(255,45,50,.90),inset 0 5px 15px rgba(255,255,255,.30);}
.btn-lever:disabled,
.btn-lever.is-locked{

    background:var(--panel) !important;
    color:var(--muted) !important;

    opacity:.40 !important;

    filter:grayscale(1) !important;

    cursor:not-allowed !important;

    pointer-events:none;

    transform:none !important;

    box-shadow:none !important;

    border-color:var(--border) !important;
}

.btn-lever:disabled:hover,
.btn-lever.is-locked:hover{

    background:var(--panel) !important;
    color:var(--muted) !important;

    filter:grayscale(1) !important;

    transform:none !important;

    box-shadow:none !important;
}


/* Botão - Sorteio JOGADORES - Brilho */
.btn-players{margin:10px;max-width:180px;background:#4867f0; border-radius: 12px; gap:5px; padding:12px; border:none; font-size: var(--font-medium); font-weight:var(--font-bold); backdrop-filter:blur(20px); box-shadow:var(--shadow);  transition:.25s; cursor:pointer; display:flex; align-items:center; justify-content:center;cursor:pointer; transition:.2s ease;}
.btn-players:hover{transform:translateY(-1px);transform: scale(1.03);filter:saturate(1.20) brightness(1.20);box-shadow:0 10px 10px rgba(0,0,0,.50),0 0 10px rgba(63, 66, 245, 0.9),0 0 20px rgba(45, 59, 255, 0.9),inset 0 5px 15px rgba(255,255,255,.20);}

/* Botão - Ativar e Desativar RODADA / BUZZER - Brilho */
.btn-gameplay{margin:10px;max-width:80%;background:#50545f; border-radius: 12px; gap:5px; padding:12px; border:none; font-size: var(--font-medium); font-weight:var(--font-bold); backdrop-filter:blur(20px); box-shadow:var(--shadow); transition:.25s; cursor:pointer; display:flex; align-items:center; justify-content:center;cursor:pointer; transition:.2s ease;}
.btn-gameplay:hover{transform:translateY(-1px);transform: scale(1.03);filter:saturate(1.20) brightness(1.20);box-shadow:0 10px 10px rgba(15, 16, 32, 0.5),0 0 10px rgba(52, 52, 65, 0.9),0 0 20px rgba(43, 50, 66, 0.9),inset 0 5px 15px rgba(255,255,255,.20);}

/* Container do jogador sorteado */
.roulette-player-roller{margin:10px;gap:10px;width:100%;display:flex;grid-column:1/-1;align-items:center;justify-content:center;box-sizing:border-box;color:var(--white);}

/* Container do jogador sorteado dentro da caixa de diálogo */
.roulette-player-dialog-actions{display:flex;flex-direction:row;margin:10px;width:90%;align-items:center;justify-content:center;flex-wrap:nowrap;}

/* Container do jogador - Ocultado */
.roulette-player-roller.hidden{display:none!important;}

/* Botões anterior e próximo - Sorteio de Jogador */
.player-roll-arrow{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--border);border-radius:10px;background:var(--blue);color:var(--white);font-size:var(--font-medium);cursor:pointer;}

/* Área central do jogador */
.roulette-player-roller>div{display:grid;justify-items:center;gap:3px;min-width:0;text-align:center;}

/* Exibir o jogador sorteado */
.roulette-player-roller small{color:var(--blue);font-size:10px;font-weight:var(--font-bold);letter-spacing:.08em;}

/* Nome do jogador sorteado */
.roulette-player-roller strong{color:var(--white);font-size:var(--font-small);font-weight:var(--font-bold);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}

/* Referências */
.roulette-reference{display:block;width:min(100%,440px);height:180px;object-fit:cover;object-position:center;border-radius:16px;border:1px solid var(--border);opacity:.9;}

/* Responsividade */
@media (max-width:1200px){
.roulette-card{width:100%;}
.roulette-mechanisms{grid-template-columns:1fr;gap:15px;}
.roulette-pointer{top:0px;}
.reel-pointer-left,.reel-pointer-right{font-size:var(--font-large);color:var(--white);}
.reel-pointer-left{left:5px;}
.reel-pointer-right{right:5px;}
.roulette-title{margin-bottom:12px;justify-content:center;text-align:center;}
.wheel-surface,.reel-surface{height:320px;}
}