/* Ações */
.lever-actions{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;}
.lever-actions .btn{width:100%;align-self:center;margin-top: 10px;}

/* Card da Alavanca */
.lever-card{display:flex;flex-direction:column;align-items:center;text-align:center;}

/* Card de Quantidade de Jogadores (Sorteados) */
.lever-player-quantity {grid-column:1/-1;width:100%;margin:5px;}
.lever-player-quantity span{font-size:var(--font-small);color:var(--white);}
.lever-player-quantity strong{font-size:var(--font-medium);color:var(--white);}

/* Texto da quantidade de Jogadores */
.lever-player-quantity>span{color:var(--white);font-size:var(--font-small);font-weight:var(--font-bold);text-align:center;}

/* Máquina da Alavanca
- Largura do braço da alavanca = lever-arm-radius
- Altura do braço da alavanca com roldana = lever-pivot-y */
.lever-machine{margin-bottom:20px;
width:100%;max-width:200px;height:250px;--shaft-width:10px;--knob-size:40px;--lever-pivot-y:150px;--lever-arm-radius:clamp(100px,20vw,100px);
position:relative;margin:5 auto;border-radius:0;background:transparent;border:0;box-sizing:border-box;
overflow:visible;touch-action:none;user-select:none;z-index:5;}

/* Estado Travado */
.lever-machine.is-locked .lever-knob{cursor:default;}

/* Caixa - Tampa Superior */
.lever-box-top{
position:absolute;
left:-10px;right:-10px;top:-20px;height:30px;
border:1px solid var(--border);
border-radius:50% 50% 17px 17px/30px 30px 14px 14px;
background:#353a44;
box-shadow:0 10px 10px rgba(0,0,0,.20),0 0 10px rgba(150, 230, 250, 0.20),inset 0 1px 0 rgba(255,255,255,.20);  
}

/* Caixa - Tampa Inferior*/
.lever-fixed-box{
position:absolute;
left:50%;top:190px;width:min(200px,70%);height:60px;
transform:translateX(-50%);
z-index:1;box-sizing:border-box;
border:1px solid var(--border);
border-radius:15px 15px 30px 30px;
background:#353a44;
box-shadow:0 10px 10px rgba(0,0,0,.20),0 0 10px rgba(150, 230, 250, 0.20),inset 0 1px 0 rgba(255,255,255,.20);  
}

/* Caixa - Interior da Face */
.lever-box-face{
position:absolute;inset:9px;border-radius:10px;
background:linear-gradient(180deg,rgba(255,255,255,.50),transparent);
pointer-events:none;}

/* Faixa de Alerta 
.lever-warning-stripe{position:absolute;left:18px;right:18px;bottom:20px;height:5px;border-radius:999px;background:repeating-linear-gradient(-45deg,var(--yellow) 0 15px,transparent 15px 30px);}
*/

/* Parafusos */
.lever-screw{position:absolute;bottom:15px;width:5px;height:5px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f3f5f7,#89929e 40%,#303947);}
.lever-screw-left{left:15px;}
.lever-screw-right{right:15px;}

/* Arco - Desativado*/
.lever-angle-track{top:calc(var(--lever-pivot-y) - var(--lever-arm-radius)); width:calc(var(--lever-arm-radius) * 2); height:var(--lever-arm-radius);transform:translateX(-50%);
left:50%;position:absolute;border-bottom-color:transparent;border:0px dashed rgba(0,185,255,.20);border-radius:100% 100% 0 0;pointer-events:none;z-index:0;box-sizing:border-box;}

/* Arco - Marcadores Sinalizados - Desativado */
.lever-mark{position:absolute;color:var(--blue);font-size:10px;}
.lever-mark-0{left:-24px;bottom:-7px;}
.lever-mark-90{left:50%;top:-18px;transform:translateX(-50%);}
.lever-mark-180{right:-30px;bottom:-7px;}

/* Haste + Bola - Conjunto */
.lever-assembly{position:absolute;left:50%;top:var(--lever-pivot-y);width:var(--lever-arm-radius);height:10px;transform-origin:0 50%;transform:rotate(180deg);z-index:8;pointer-events:none;}

/* Haste */
.lever-shaft{position:absolute;left:0;top:50%;width:100%;height:var(--shaft-width);transform:translateY(-50%);border-radius:999px;background:linear-gradient(90deg,#66717e 0%,#838e9b 12%,#f0f3f7 32%,#fff 44%,#b9c1cb 60%,#7b8592 83%,#4c5664 100%);box-shadow:5px 5px 5px rgba(0,0,0,.50),inset 2px 0 2px rgba(255,255,255,.55);pointer-events:none;}
.lever-knob.is-locked,.lever-knob:disabled{cursor:not-allowed;background:radial-gradient(circle at 30% 25%,#9da5ae 0 10%,#6f7780 31%,#454d56 60%,#252c33 100%);filter:grayscale(1) brightness(.62);box-shadow:0 8px 18px rgba(0,0,0,.60),0 0 8px rgba(100,110,120,.20),inset 0 4px 6px rgba(255,255,255,.10);transform:translate(-50%,-50%) scale(1);}

/* Bola da Alavanca Cinza - Estado Travada */
.lever-knob.is-locked{cursor:default;background:radial-gradient(circle at 30% 25%,#9da5ae 0 10%,#6f7780 31%,#454d56 60%,#252c33 100%);filter:grayscale(1) brightness(.62);box-shadow:0 8px 18px rgba(0,0,0,.60),0 0 8px rgba(100,110,120,.20),inset 0 4px 6px rgba(255,255,255,.10);transform:translate(-50%,-50%) scale(1);}

/* Botão de FORÇA PADRÃO - Estado Travado */
#rouletteDrawGameBtn:disabled,
#rouletteDrawGameBtn.is-locked{
  opacity: .45;
  filter: grayscale(1);
  cursor: not-allowed;
  pointer-events: none;
}



/* Brilho da Haste */
.lever-shaft-highlight{position:absolute;left:8px;top:7px;width:calc(100% - 16px);height:4px;border-radius:999px;background:rgba(255,255,255,.47);}

/* Knob - Bola */
/* HOVER - Somente bola disponível */
.lever-knob:not(.is-locked):not(:disabled):hover{transform:translate(-50%,-50%) scale(1.07);filter:saturate(1.20) brightness(1.20);box-shadow:0 10px 20px rgba(0,0,0,.50),0 0 17px rgba(255,45,50,.90),0 0 20px rgba(255,45,50,.90),inset 0 5px 15px rgba(255,255,255,.30);}
.lever-knob{
position:absolute;left:100%;top:50%;width:var(--knob-size);height:var(--knob-size);border-radius:50%;cursor:grab;transform:translate(-50%,-50%) scale(1);padding:0;
border:2px solid rgba(233, 231, 231, 0.10);
background:radial-gradient(circle at 30% 25%,#ff7d80 0 10%,#ff2d31 30%,#ee2227 60%,#bd1016 100%);
box-shadow:5px 5px 5px rgba(0,0,0,.20),inset 0 5px 5px rgba(230, 230, 230, 0.20);
z-index:13;pointer-events:auto;
transition:transform 150ms ease,box-shadow 150ms ease,filter 150ms ease;}




/* Knob - Bola - Brilho */
.lever-knob-gloss{position:absolute;left:10%;top:10%;width:10%;height:10%;border-radius:50%;background:rgba(255,255,255,.50);filter:blur(1px);pointer-events:none;}

/* Knob - Bola Vermelha - Estado Pressionada */
.lever-knob.is-grabbed{cursor:grabbing;transform:translate(-50%,-50%) scale(1.20);filter:saturate(1.20) brightness(1.20);box-shadow:0 10px 20px rgba(0,0,0,.50),0 0 17px rgba(255,45,50,.90),0 0 20px rgba(255,45,50,.90),inset 0 5px 15px rgba(255,255,255,.30);}

/* Bola Central - Pivô Cinza com Logo*/
.lever-pivot{width:64px;height:64px;position:absolute;left:50%;border-radius:50%;z-index:15;pointer-events:none;top:var(--lever-pivot-y);transform:translate(-50%,-50%);
background:radial-gradient(circle at 30% 30%,#657181,#293341 40%,#0b1118 70%);
box-shadow:0 10px 10px rgba(0,0,0,.50),inset 0 3px 3px rgba(255,255,255,.10);
}

/* Anel do Pivô */
.lever-pivot-ring{position:absolute;inset:7px;border:0;border-radius:50%;box-shadow:0 0 5px var(--gray);}

/* Logo do Pivô */
.lever-pivot-core{position:absolute;inset:18px;display:grid;place-items:center;overflow:hidden;border-radius:50%;
background:radial-gradient(circle at 34% 29%,#eef3f8,#7c8795 47%,#26303b 76%);
box-shadow:0 3px 6px rgba(0,0,0,.52),inset 0 2px 2px rgba(255,255,255,.34);}

/* Imagem do Pivô - Desativada*/
.lever-pivot-core img{width:0px;height:0px;object-fit:contain;}

/* Instrução */
.lever-drag-hint{position:absolute;left:50%;top:20px;transform:translateX(-50%);padding:6px 10px;border:1px solid var(--gray);border-radius:999px;color:var(--gray);background:rgba(5,13,24,.79);font-size:9px;font-weight:900;letter-spacing:.14em;white-space:nowrap;pointer-events:none;transition:opacity 180ms ease,transform 180ms ease;}

/* Estado da Instrução */
.lever-machine.is-grabbing .lever-drag-hint,.lever-machine.is-locked .lever-drag-hint{opacity:0;}

/* Leitura da Alavanca */
.lever-readout{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:90%;margin-top:30px;}

/* Itens da Leitura - Minicards de ÂNGULO, TEMPO e FORÇA */
.lever-readout>div{background:var(--panel);border:1px solid var(--border);display:grid;justify-items:center;min-width:0;padding:8px 6px;box-sizing:border-box;border-radius:12px;}

/* Texto da Leitura */
.lever-readout span{color:var(--white);font-size:var(--font-medium);font-weight:800;}

/* Texto do Resultado - Valor da Leitura */
.lever-readout strong{font-size:var(--font-small);margin-top:5px;font-weight:500;}

/* Responsividade */
@media (max-width:1200px){
.lever-machine{max-width:270px;height:300px;--lever-pivot-y:170px;--lever-arm-radius:100px;}
.lever-fixed-box{top:200px;width:min(100px,50%);height:70px;}
.lever-pivot{width:64px;height:64px;}
.lever-drag-hint{top:10px;}
.lever-readout{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;}
}