/* Roleta */
/* ---------- Roulette ---------- */
.rl-stage{flex-direction:column;gap:20px;overflow:hidden}
.rl-top{display:flex;flex-direction:column;align-items:center;gap:14px}
.wheel-wrap{--wheel:260px;width:var(--wheel);height:var(--wheel);position:relative}
.wheel{width:100%;height:100%;transition:transform 4s cubic-bezier(.15,.6,.25,1)}
.wheel svg{width:100%;height:100%;display:block;filter:drop-shadow(0 10px 24px rgba(0,0,0,.5))}
.ball-layer{position:absolute;inset:0;pointer-events:none;transition:transform 4s cubic-bezier(.2,.55,.3,1)}
.ball{
  position:absolute;left:50%;top:50%;width:11px;height:11px;margin:-5.5px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#fff,#c9d3df 70%,#8a97a8);box-shadow:0 1px 3px rgba(0,0,0,.6);
  transform:translateY(calc(var(--wheel) * -.475));transition:transform .7s cubic-bezier(.5,0,.7,1.4);
}
.ball.drop{transform:translateY(calc(var(--wheel) * -.325))}
.wheel-center{
  position:absolute;left:50%;top:50%;width:34%;height:34%;transform:translate(-50%,-50%);border-radius:50%;
  background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;
  box-shadow:inset 0 0 0 4px var(--bg-dark);transition:background .3s;
}
.wheel-center.red{background:#fe2247}.wheel-center.black{background:#2f4553}.wheel-center.green{background:#419e3f}
.rl-history{display:flex;gap:6px;min-height:30px;flex-wrap:wrap;justify-content:center}
.rl-history span{width:30px;height:30px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;animation:pop .3s ease}
.rl-history span:first-child{box-shadow:0 0 0 2px #fff}
.rl-history .red{background:#fe2247}.rl-history .black{background:#2f4553}.rl-history .green{background:#419e3f}
.table-scroll{width:100%;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
.rtable{display:grid;grid-template-columns:repeat(14,minmax(34px,1fr));grid-template-rows:repeat(3,44px) 40px 40px;gap:4px;min-width:540px;max-width:760px;margin:0 auto}
.rcell{
  grid-column:var(--c) / span var(--cs);grid-row:var(--r) / span var(--rs);
  border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:700;position:relative;
  background:var(--tile);box-shadow:0 3px 0 rgba(0,0,0,.25);transition:filter .12s,opacity .15s,transform .1s;font-size:13px;
}
.rcell:hover{filter:brightness(1.18)}
.rcell:active{transform:translateY(1px)}
.rcell.red{background:#fe2247}.rcell.black{background:#2f4553}.rcell.green{background:#419e3f}
.rcell.out{background:transparent;border:2px solid var(--tile);box-shadow:none;font-size:12px}
.rcell .diamond{width:16px;height:16px;transform:rotate(45deg);border-radius:2px}
.rtable.hovering .rcell.num:not(.cover){opacity:.35}
.rcell.hit{animation:hit .7s ease 3;z-index:1}
@keyframes hit{0%,100%{box-shadow:0 0 0 0 #fff}50%{box-shadow:0 0 0 4px #fff;filter:brightness(1.3)}}
.chips{display:flex;gap:6px;flex-wrap:wrap;background:var(--bg-dark);padding:8px;border-radius:4px}
.chip,.rchip{
  border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;
  border:3px dashed rgba(255,255,255,.75);box-shadow:0 2px 0 rgba(0,0,0,.35);font-variant-numeric:tabular-nums;
}
.chip{width:38px;height:38px;font-size:11px;transition:transform .1s}
.chip:hover{transform:translateY(-2px)}
.chip.on{outline:3px solid #fff;outline-offset:1px;transform:translateY(-2px)}
.rchip{position:absolute;width:26px;height:26px;font-size:9px;border-width:2px;pointer-events:none;animation:pop .25s cubic-bezier(.34,1.7,.5,1);z-index:2}