.roulette-wrap{
  width:100%;
  display:grid;
  gap:24px;
}

.roulette-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
}

.roulette-setup,
.roulette-bank{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
}

.roulette-setup label{
  font-weight:900;
  text-transform:uppercase;
}

.roulette-setup select{
  border:3px solid var(--line);
  border-radius:14px;
  background:white;
  color:var(--line);
  box-shadow:4px 4px 0 var(--line);
  padding:10px 14px;
  font-weight:900;
}

.roulette-btn,
.roulette-spin{
  border:3px solid var(--line);
  border-radius:16px;
  background:#ffd32a;
  color:var(--line);
  box-shadow:4px 4px 0 var(--line);
  padding:11px 16px;
  font-weight:900;
  cursor:pointer;
  text-transform:uppercase;
}

.roulette-btn:hover,
.roulette-spin:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--line);
}

.roulette-btn.danger{
  background:#ff4757;
  color:white;
}

.roulette-pill{
  background:white;
  border:3px solid var(--line);
  border-radius:14px;
  box-shadow:4px 4px 0 var(--line);
  padding:10px 14px;
  font-weight:900;
}

.roulette-main{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:28px;
  align-items:start;
}

.roulette-wheel-area{
  display:grid;
  justify-items:center;
  gap:18px;
}

.roulette-wheel{
  width:min(72vw,320px);
  aspect-ratio:1 / 1;
  border-radius:50%;
  border:8px solid var(--line);
  box-shadow:8px 8px 0 var(--line);
  display:grid;
  place-items:center;
  background:
    conic-gradient(
      #ff4757 0deg 10deg,
      #151515 10deg 20deg,
      #ff4757 20deg 30deg,
      #151515 30deg 40deg,
      #ff4757 40deg 50deg,
      #151515 50deg 60deg,
      #2ed573 60deg 70deg,
      #151515 70deg 80deg,
      #ff4757 80deg 90deg,
      #151515 90deg 100deg,
      #ff4757 100deg 110deg,
      #151515 110deg 120deg,
      #ff4757 120deg 130deg,
      #151515 130deg 140deg,
      #ff4757 140deg 150deg,
      #151515 150deg 160deg,
      #ff4757 160deg 170deg,
      #151515 170deg 180deg,
      #ff4757 180deg 190deg,
      #151515 190deg 200deg,
      #ff4757 200deg 210deg,
      #151515 210deg 220deg,
      #ff4757 220deg 230deg,
      #151515 230deg 240deg,
      #ff4757 240deg 250deg,
      #151515 250deg 260deg,
      #ff4757 260deg 270deg,
      #151515 270deg 280deg,
      #ff4757 280deg 290deg,
      #151515 290deg 300deg,
      #ff4757 300deg 310deg,
      #151515 310deg 320deg,
      #ff4757 320deg 330deg,
      #151515 330deg 340deg,
      #ff4757 340deg 350deg,
      #151515 350deg 360deg
    );
  position:relative;
  transition:transform 2.4s cubic-bezier(.15,.82,.2,1);
}

.roulette-wheel::before{
  content:"";
  position:absolute;
  inset:22px;
  background:#fff8e7;
  border:5px solid var(--line);
  border-radius:50%;
}

.roulette-wheel::after{
  content:"▼";
  position:absolute;
  top:-32px;
  left:50%;
  transform:translateX(-50%);
  font-size:34px;
  color:#ff4757;
  text-shadow:
    -2px -2px 0 #111,
    2px -2px 0 #111,
    -2px 2px 0 #111,
    2px 2px 0 #111;
}

.roulette-result{
  position:relative;
  z-index:2;
  width:126px;
  height:126px;
  border-radius:50%;
  border:5px solid var(--line);
  box-shadow:5px 5px 0 var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:3rem;
  font-weight:900;
  background:white;
  color:var(--line);
}

.roulette-result.red{
  background:#ff4757;
  color:white;
}

.roulette-result.black{
  background:#151515;
  color:white;
}

.roulette-result.green{
  background:#2ed573;
  color:#111;
}

.roulette-message{
  min-height:54px;
  text-align:center;
  font-size:1.05rem;
  font-weight:900;
  color:#222;
  background:#fffa85;
  border:3px solid var(--line);
  border-radius:16px;
  box-shadow:4px 4px 0 var(--line);
  padding:12px 14px;
}

.roulette-spin{
  background:#ff4757;
  color:white;
  font-size:1.1rem;
  padding:14px 20px;
}

.roulette-spin:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
}

.roulette-players{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.roulette-player{
  border:4px solid var(--line);
  border-radius:22px;
  box-shadow:6px 6px 0 var(--line);
  padding:18px;
  background:#7ed6df;
  display:grid;
  gap:12px;
}

.roulette-player:nth-child(2){background:#ff9ff3}
.roulette-player:nth-child(3){background:#badc58}
.roulette-player:nth-child(4){background:#fffa85}

.roulette-player h3{
  margin:0;
  font-size:1.4rem;
  text-transform:uppercase;
  font-weight:900;
}

.roulette-row{
  display:grid;
  gap:6px;
}

.roulette-row label{
  font-weight:900;
}

.roulette-row input,
.roulette-row select{
  width:100%;
  border:3px solid var(--line);
  border-radius:12px;
  padding:10px;
  font-weight:900;
  background:white;
}

.roulette-status{
  min-height:40px;
  padding:10px;
  border:3px solid var(--line);
  border-radius:14px;
  background:white;
  font-weight:900;
}

.roulette-status.win{
  background:#2ed573;
}

.roulette-status.lose{
  background:#ff4757;
  color:white;
}

@media(max-width:980px){
  .roulette-main{
    grid-template-columns:1fr;
  }

  .roulette-players{
    grid-template-columns:1fr;
  }

  .roulette-top{
    justify-content:center;
  }
}



/* === ROULETTE V701 : mode connecté restauré === */
.roulette-connected-bar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  margin:16px 0;
}

.roulette-friend-btn,
#rouletteFriendBtn{
  appearance:none;
  border:4px solid #111;
  border-radius:18px;
  background:#111;
  color:#fff;
  box-shadow:5px 5px 0 #111;
  padding:12px 18px;
  font-weight:1000;
  cursor:pointer;
}

.roulette-friend-btn:hover,
#rouletteFriendBtn:hover{
  transform:translateY(-2px);
  background:#222;
}

.roulette-friend-panel{
  display:none;
}

.roulette-friend-panel.open{
  display:grid;
  gap:14px;
  background:#fff;
  border:4px solid #111;
  border-radius:22px;
  box-shadow:7px 7px 0 #111;
  padding:16px;
  margin:12px 0 18px;
}
/* === FIN ROULETTE V701 === */





/* === ROULETTE V706 : roue stylisée premium compacte === */

#rouletteWheel.roulette-stylized-wheel{
  width:min(360px, 86vw);
  aspect-ratio:1 / 1;
  margin:16px auto 22px;
  position:relative;
  border-radius:50%;
  overflow:visible;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}

.rs-wood{
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.35), transparent 17%),
    repeating-linear-gradient(35deg, #7c340e 0 8px, #b75b21 9px 17px, #d98235 18px 25px, #6a2a0a 26px 32px);
  border:5px solid #111;
  box-shadow:
    8px 8px 0 #111,
    inset 0 10px 18px rgba(255,255,255,.25),
    inset 0 -18px 26px rgba(0,0,0,.35);
}

.rs-wood::before{
  content:"";
  position:absolute;
  inset:8%;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.26), transparent 18%),
    radial-gradient(circle at center, #8a3b13 0 56%, #4a1e07 100%);
  box-shadow:
    inset 0 10px 18px rgba(0,0,0,.28),
    inset 0 -10px 18px rgba(255,255,255,.12);
}

.rs-shadow-ring{
  position:absolute;
  inset:16%;
  border-radius:50%;
  background:#111;
  opacity:.16;
  filter:blur(8px);
  z-index:1;
}

.rs-pocket-ring{
  position:absolute;
  inset:15%;
  border-radius:50%;
  background:
    conic-gradient(
      #067845 0deg 9.72deg,
      #d82f24 9.72deg 19.44deg,
      #141414 19.44deg 29.16deg,
      #d82f24 29.16deg 38.88deg,
      #141414 38.88deg 48.6deg,
      #d82f24 48.6deg 58.32deg,
      #141414 58.32deg 68.04deg,
      #d82f24 68.04deg 77.76deg,
      #141414 77.76deg 87.48deg,
      #d82f24 87.48deg 97.2deg,
      #141414 97.2deg 106.92deg,
      #d82f24 106.92deg 116.64deg,
      #141414 116.64deg 126.36deg,
      #d82f24 126.36deg 136.08deg,
      #141414 136.08deg 145.8deg,
      #d82f24 145.8deg 155.52deg,
      #141414 155.52deg 165.24deg,
      #d82f24 165.24deg 174.96deg,
      #141414 174.96deg 184.68deg,
      #d82f24 184.68deg 194.4deg,
      #141414 194.4deg 204.12deg,
      #d82f24 204.12deg 213.84deg,
      #141414 213.84deg 223.56deg,
      #d82f24 223.56deg 233.28deg,
      #141414 233.28deg 243deg,
      #d82f24 243deg 252.72deg,
      #141414 252.72deg 262.44deg,
      #d82f24 262.44deg 272.16deg,
      #141414 272.16deg 281.88deg,
      #d82f24 281.88deg 291.6deg,
      #141414 291.6deg 301.32deg,
      #d82f24 301.32deg 311.04deg,
      #141414 311.04deg 320.76deg,
      #d82f24 320.76deg 330.48deg,
      #141414 330.48deg 340.2deg,
      #d82f24 340.2deg 349.92deg,
      #141414 349.92deg 360deg
    );
  border:4px solid #111;
  box-shadow:
    0 0 0 4px #d3a64a,
    inset 0 0 0 30px rgba(0,0,0,.10),
    inset 0 0 16px rgba(0,0,0,.55);
  z-index:2;
}

.rs-pocket-ring::before{
  content:"";
  position:absolute;
  inset:22%;
  border-radius:50%;
  background:
    repeating-conic-gradient(from 0deg, #d9b368 0 4deg, #5d3d12 4deg 7deg, #b88a34 7deg 9.72deg);
  border:3px solid #6d4410;
  box-shadow:inset 0 0 18px rgba(0,0,0,.45);
}

.rs-pocket-ring::after{
  content:"";
  position:absolute;
  inset:39%;
  border-radius:50%;
  background:linear-gradient(135deg, #ffedb0, #b47920 48%, #f7cf71);
  border:4px solid #111;
  box-shadow:
    inset 0 7px 14px rgba(255,255,255,.30),
    inset 0 -9px 16px rgba(0,0,0,.25);
}

.rs-pocket{
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:92%;
  transform:translate(-50%, -50%) rotate(var(--a));
  transform-origin:center center;
  z-index:5;
  pointer-events:none;
}

.rs-pocket b{
  position:absolute;
  top:3px;
  left:50%;
  transform:translateX(-50%) rotate(90deg);
  color:#fff;
  font-size:.62rem;
  font-weight:1000;
  line-height:1;
  text-shadow:1px 1px 0 #000;
}

.rs-metal-ring{
  position:absolute;
  inset:29%;
  border-radius:50%;
  z-index:4;
  pointer-events:none;
}

.rs-metal-ring i{
  position:absolute;
  left:50%;
  top:50%;
  width:2px;
  height:35%;
  transform:translate(-50%, -100%) rotate(calc(var(--i) * 9.72deg));
  transform-origin:center bottom;
  background:linear-gradient(180deg, #f5d57c, #7a5219);
  box-shadow:1px 0 0 rgba(0,0,0,.25);
}

.rs-center{
  position:absolute;
  inset:38%;
  border-radius:50%;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.55), transparent 22%),
    linear-gradient(135deg, #ffedab, #b97b1e 52%, #f5cf72);
  border:4px solid #111;
  box-shadow:
    inset 0 6px 14px rgba(255,255,255,.32),
    inset 0 -10px 18px rgba(0,0,0,.26);
  z-index:6;
}

.rs-arm{
  position:absolute;
  left:50%;
  top:50%;
  width:10px;
  height:48%;
  transform-origin:center bottom;
  background:linear-gradient(90deg, #88520c, #ffd36c, #8b570f);
  border:1px solid #5a3509;
  border-radius:999px;
  box-shadow:1px 1px 0 rgba(0,0,0,.25);
}

.rs-arm::before{
  content:"";
  position:absolute;
  left:50%;
  top:-7px;
  width:16px;
  height:16px;
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff1a3, #9b6416);
  border:1px solid #5a3509;
}

.rs-a1{ transform:translate(-50%, -100%) rotate(45deg); }
.rs-a2{ transform:translate(-50%, -100%) rotate(135deg); }
.rs-a3{ transform:translate(-50%, -100%) rotate(225deg); }
.rs-a4{ transform:translate(-50%, -100%) rotate(315deg); }

.rs-knob{
  position:absolute;
  inset:33%;
  border-radius:50%;
  background:radial-gradient(circle at 35% 28%, #fff1a5, #b7761f 56%, #6c3f0c);
  border:3px solid #111;
  box-shadow:0 3px 0 rgba(0,0,0,.30);
  z-index:7;
}

.rs-ball{
  position:absolute;
  left:50%;
  top:50%;
  width:12px;
  height:12px;
  margin:-6px;
  border-radius:50%;
  background:radial-gradient(circle at 30% 25%, #fff, #e4e4e4 55%, #888);
  box-shadow:2px 2px 0 rgba(0,0,0,.38), 0 0 9px rgba(255,255,255,.8);
  transform:rotate(35deg) translateY(-125px);
  transform-origin:center center;
  z-index:8;
}

#rouletteWheel.roulette-stylized-wheel.spinning .rs-wood{
  animation:rouletteStylizedSpin .8s linear infinite;
}

@keyframes rouletteStylizedSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

@media(max-width:520px){
  #rouletteWheel.roulette-stylized-wheel{
    width:min(300px, 88vw);
  }

  .rs-pocket{
    width:18px;
  }

  .rs-pocket b{
    font-size:.48rem;
  }

  .rs-ball{
    width:9px;
    height:9px;
    margin:-4.5px;
    transform:rotate(35deg) translateY(-104px);
  }
}

/* === FIN ROULETTE V706 === */

/* === ROULETTE V707 : numéros mieux placés + rotation tirage === */

/* Suppression complète de la bille blanche */
.rs-ball,
#rouletteBall{
  display:none !important;
}

/* Les numéros sont placés dans les cases, pas hors de l’anneau */
.rs-pocket{
  width:28px !important;
  height:88% !important;
}

.rs-pocket b{
  top:7px !important;
  left:50% !important;
  width:24px !important;
  height:18px !important;
  display:grid !important;
  place-items:center !important;
  transform:translateX(-50%) rotate(90deg) !important;
  font-size:.68rem !important;
  font-weight:1000 !important;
  color:#fff !important;
  line-height:1 !important;
  text-shadow:
    1px 1px 0 #000,
    0 0 4px rgba(0,0,0,.55) !important;
}

/* Séparations plus nettes pour donner une vraie impression de cases */
.rs-pocket-ring{
  box-shadow:
    0 0 0 4px #d3a64a,
    inset 0 0 0 28px rgba(0,0,0,.08),
    inset 0 0 16px rgba(0,0,0,.55) !important;
}

.rs-pocket-ring::before{
  inset:22% !important;
}

/* Rotation continue tant que le numéro n’est pas affiché */
#rouletteWheel.roulette-stylized-wheel.spinning .rs-wood{
  animation:rouletteSpinV707 .42s linear infinite !important;
}

@keyframes rouletteSpinV707{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

/* Légère intensité pendant le tirage */
#rouletteWheel.roulette-stylized-wheel.spinning{
  filter:saturate(1.12) contrast(1.04);
}

/* Responsive */
@media(max-width:520px){
  .rs-pocket{
    width:21px !important;
  }

  .rs-pocket b{
    top:5px !important;
    width:18px !important;
    height:14px !important;
    font-size:.48rem !important;
  }
}

/* === FIN ROULETTE V707 === */