*{box-sizing:border-box}
:root{--accent:#20d9c5;--accent2:#8b5cf6;--felt:#123f34}
.co-body{margin:0;min-height:100vh;background:#05080e;color:#fff;font-family:Inter,system-ui;overflow-x:hidden}
.co-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-2;background:
radial-gradient(circle at 50% -10%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 32%),
radial-gradient(circle at 10% 65%,color-mix(in srgb,var(--accent2) 14%,transparent),transparent 30%),
linear-gradient(#070b12,#05080e)}
.co-bg span{position:absolute;width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 20px var(--accent);opacity:.18;animation:coFloat 9s linear infinite}
.co-bg span:nth-child(1){left:8%;top:90%}.co-bg span:nth-child(2){left:28%;top:75%;animation-delay:-3s}.co-bg span:nth-child(3){left:55%;top:88%;animation-duration:12s}.co-bg span:nth-child(4){left:76%;top:80%;animation-delay:-6s}.co-bg span:nth-child(5){left:92%;top:68%;animation-duration:10s}
@keyframes coFloat{to{transform:translateY(-95vh) scale(1.8);opacity:0}}
.co-top{height:72px;padding:0 25px;display:flex;align-items:center;justify-content:space-between;background:#0b111be8;border-bottom:1px solid #29364b;backdrop-filter:blur(14px);position:sticky;top:0;z-index:20}
.co-top a{color:#aebcd0;text-decoration:none;font-weight:800}.co-logo{display:flex;align-items:center;justify-content:center;width:58px;height:58px;flex:0 0 auto}.co-logo img{display:block;width:52px;height:52px;object-fit:contain;filter:drop-shadow(0 5px 14px rgba(6,230,200,.16))}
.co-balance{display:flex;align-items:center;gap:7px;min-width:150px;justify-content:flex-end;font-weight:800}.co-balance i{width:7px;height:7px;border-radius:50%;background:#64748b;box-shadow:0 0 10px currentColor}.co-balance i.online{background:#22c55e}.co-balance i.offline{background:#ef4444}
.co-main{width:min(1000px,calc(100% - 28px));margin:32px auto 48px}
.co-head{display:flex;align-items:center;gap:18px;margin-bottom:18px}.co-head-copy{min-width:0}.co-game-icon{font-size:52px;width:82px;height:82px;display:grid;place-items:center;border-radius:24px;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 22%,#101827),color-mix(in srgb,var(--accent2) 18%,#111827));border:1px solid #34445d;box-shadow:inset 0 0 24px #0008,0 0 35px color-mix(in srgb,var(--accent) 16%,transparent);animation:coIcon 3s ease-in-out infinite}
@keyframes coIcon{50%{transform:translateY(-5px) rotate(2deg)}}
.co-head small{color:var(--accent);font-weight:900;letter-spacing:.15em}.co-head h1{font-size:clamp(30px,5vw,48px);margin:3px 0;letter-spacing:-.03em;text-shadow:0 0 26px color-mix(in srgb,var(--accent) 20%,transparent)}.co-head p{color:#91a2ba;margin:0}
.co-table{position:relative;padding:18px;border-radius:34px;background:linear-gradient(145deg,#27344a,#111827 34%,#090e16);border:1px solid #42516a;box-shadow:0 35px 100px #000b,0 0 45px color-mix(in srgb,var(--accent) 14%,transparent);overflow:hidden}
.co-table-lights{position:absolute;inset:4px;border-radius:30px;border:2px dotted color-mix(in srgb,var(--accent) 68%,#fff);opacity:.48;pointer-events:none;animation:coLights 1s steps(2) infinite}
@keyframes coLights{50%{opacity:.8;filter:brightness(1.7)}}
.co-stage{position:relative;min-height:390px;border-radius:28px;background:
radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--felt) 84%,#0b1518),#07100f 72%);
border:1px solid #35504a;box-shadow:inset 0 0 55px #000b;display:grid;grid-template-columns:1fr;place-items:center;align-content:center;text-align:center;padding:28px;overflow:hidden}
.co-stage-ring{position:absolute;width:78%;aspect-ratio:2.1;border-radius:50%;border:2px solid color-mix(in srgb,var(--accent) 35%,#fff);opacity:.22;box-shadow:0 0 55px color-mix(in srgb,var(--accent) 16%,transparent),inset 0 0 55px #0008}
.co-visual-zone{position:relative;z-index:2;min-height:180px;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;perspective:800px}
.co-result{position:relative;z-index:3;margin-top:8px}.co-result-icon{font-size:56px;filter:drop-shadow(0 0 15px color-mix(in srgb,var(--accent) 30%,transparent))}.co-result h2{font-size:30px;margin:8px}.co-result p{color:#a7b5c8;max-width:760px;margin:0 auto;line-height:1.5}
.co-card{width:92px;height:132px;border-radius:14px;background:linear-gradient(145deg,#fff,#e8edf4);color:#111827;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:30px;font-weight:900;box-shadow:0 18px 35px #0008;border:1px solid #fff;animation:dealCard .45s cubic-bezier(.2,.8,.2,1) both}
.co-card.red{color:#dc2626}.co-card:nth-child(2){animation-delay:.08s}.co-card:nth-child(3){animation-delay:.16s}.co-card:nth-child(4){animation-delay:.24s}.co-card:nth-child(5){animation-delay:.32s}
@keyframes dealCard{from{opacity:0;transform:translateY(-70px) rotateY(65deg) scale(.7)}to{opacity:1;transform:none}}
.co-die{width:76px;height:76px;border-radius:17px;background:#f8fafc;color:#111827;display:grid;place-items:center;font-size:38px;font-weight:900;box-shadow:0 16px 30px #0008;animation:rollDie .7s cubic-bezier(.2,.8,.2,1)}
@keyframes rollDie{0%{transform:rotate(0) scale(.6)}60%{transform:rotate(320deg) scale(1.15)}100%{transform:rotate(360deg) scale(1)}}
.co-ball{width:170px;height:170px;border-radius:50%;display:grid;place-items:center;font-size:52px;font-weight:1000;background:conic-gradient(#dc2626 0 12deg,#111827 12deg 24deg,#dc2626 24deg 36deg,#111827 36deg 48deg,#dc2626 48deg 60deg,#111827 60deg 72deg,#dc2626 72deg 84deg,#111827 84deg 96deg,#16a34a 96deg 108deg,#111827 108deg 120deg,#dc2626 120deg 132deg,#111827 132deg 144deg,#dc2626 144deg 156deg,#111827 156deg 168deg,#dc2626 168deg 180deg,#111827 180deg 192deg,#dc2626 192deg 204deg,#111827 204deg 216deg,#dc2626 216deg 228deg,#111827 228deg 240deg,#dc2626 240deg 252deg,#111827 252deg 264deg,#dc2626 264deg 276deg,#111827 276deg 288deg,#dc2626 288deg 300deg,#111827 300deg 312deg,#dc2626 312deg 324deg,#111827 324deg 336deg,#dc2626 336deg 348deg,#111827 348deg 360deg);border:10px solid #d4af37;box-shadow:0 0 35px #d4af3760, inset 0 0 20px #0008;position:relative}
.co-ball::after{content:"";position:absolute;inset:42px;border-radius:50%;background:#0b1119;border:4px solid #f2d57c}
.co-ball span{position:relative;z-index:2;text-shadow:0 2px 6px #000}
.co-ball.spin{animation:wheelSpin 1.2s cubic-bezier(.1,.7,.15,1)}
@keyframes wheelSpin{to{transform:rotate(1080deg)}}
.co-orb{width:140px;height:140px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff8,color-mix(in srgb,var(--accent) 70%,#111827) 26%,#070b12 72%);font-size:46px;box-shadow:0 0 50px color-mix(in srgb,var(--accent) 35%,transparent);animation:orbPulse 1.2s ease-in-out infinite alternate}
@keyframes orbPulse{to{transform:scale(1.08);filter:brightness(1.2)}}
.co-choices{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin:18px 0}.co-choice{border:1px solid #34435b;background:#172131;color:#fff;border-radius:12px;padding:11px 16px;font-weight:800;cursor:pointer;transition:.18s}.co-choice:hover{transform:translateY(-2px);border-color:var(--accent)}.co-choice.active{background:var(--accent);color:#07110f;border-color:var(--accent);box-shadow:0 0 20px color-mix(in srgb,var(--accent) 30%,transparent)}
.co-controls{display:flex;justify-content:center;align-items:center;gap:12px;flex-wrap:wrap}.co-bet-btn{width:46px;height:46px;border:0;border-radius:13px;background:#202c3f;color:#fff;font-size:20px;font-weight:900;cursor:pointer}.co-bet-display{min-width:120px;text-align:center}.co-bet-display span{display:block;color:#8fa0b9;font-size:11px}.co-bet-display strong span{display:inline;color:#fff;font-size:20px}.co-play-btn{min-width:132px;height:72px;border:0;border-radius:50%;background:linear-gradient(145deg,var(--accent),var(--accent2));color:#06100f;font-weight:1000;cursor:pointer;box-shadow:0 0 35px color-mix(in srgb,var(--accent) 35%,transparent);display:flex;flex-direction:column;align-items:center;justify-content:center}.co-play-btn small{font-size:8px;opacity:.7}.co-play-btn:disabled{opacity:.5}
.co-fx-layer{position:absolute;inset:0;pointer-events:none;z-index:6}.co-coin{position:absolute;font-size:26px;animation:coinBurst 1.1s ease-out forwards}@keyframes coinBurst{0%{opacity:0;transform:translate(0,0) scale(.5)}20%{opacity:1}100%{opacity:0;transform:translate(var(--x),var(--y)) rotate(480deg) scale(1.2)}}
.co-stage.playing .co-visual-zone{animation:stageShake .35s ease-in-out infinite alternate}@keyframes stageShake{to{transform:translateY(2px)}}
.co-note{text-align:center;color:#74869f;font-size:12px;margin-top:18px}
@media(max-width:650px){.co-main{margin-top:20px}.co-head h1{font-size:30px}.co-game-icon{width:60px;height:60px;font-size:38px}.co-table{padding:10px}.co-stage{min-height:340px;padding:16px}.co-card{width:68px;height:98px;font-size:23px}.co-ball{width:135px;height:135px}.co-result h2{font-size:24px}.co-balance{min-width:auto;font-size:13px}}

/* Roulette 3D — vraie roue inclinée avec poches, bille et profondeur */
.co-body.roulette-mode .co-stage{min-height:500px;padding-top:18px}
.co-body.roulette-mode .co-visual-zone{min-height:335px;overflow:visible}
.co-body.roulette-mode .co-stage.playing .co-visual-zone{animation:none}
.co-roulette-scene{position:relative;width:min(430px,92vw);height:335px;display:grid;place-items:center;transform-style:preserve-3d}
.co-roulette-shadow{position:absolute;left:50%;top:68%;width:315px;height:105px;transform:translate(-50%,-50%);border-radius:50%;background:#000a;filter:blur(18px);opacity:.85}
.co-roulette-tilt{position:relative;width:320px;height:320px;transform-style:preserve-3d;transform:perspective(900px) rotateX(57deg) rotateZ(-2deg);filter:drop-shadow(0 30px 24px #000a)}
.co-roulette-wheel3d{position:absolute;inset:0;border-radius:50%;transform-style:preserve-3d;transform:translateZ(9px) rotateZ(var(--win-rotation,0deg));background:
  radial-gradient(circle at 50% 50%,transparent 0 42%,#d6b45d 42.8% 45%,transparent 45.8% 65.2%,#e5c976 66% 68.5%,transparent 69%),
  conic-gradient(var(--roulette-segments));
  border:13px solid #8a6428;box-shadow:
  inset 0 0 0 4px #f4da91,
  inset 0 0 0 12px #2b1c0d,
  inset 0 0 30px #000d,
  0 0 0 5px #3f2c14,
  0 16px 0 #201408,
  0 24px 24px #000b;
  transition:transform 1.1s cubic-bezier(.14,.76,.18,1)}
.co-roulette-wheel3d::before{content:"";position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle at 42% 32%,#ffffff2b,transparent 18%),radial-gradient(circle,#2d1808 0 41%,transparent 42%);box-shadow:inset 0 0 25px #000b;transform:translateZ(2px);pointer-events:none}
.co-roulette-wheel3d::after{content:"";position:absolute;inset:5px;border-radius:50%;border:2px solid #f3d88f99;box-shadow:inset 0 0 0 2px #3d2a12,0 0 12px #f6d77b44;transform:translateZ(13px);pointer-events:none}
.co-roulette-wheel3d.spinning{animation:coRouletteWheelSpin 1.05s linear infinite}
@keyframes coRouletteWheelSpin{to{transform:translateZ(9px) rotateZ(360deg)}}
.co-roulette-number-ring{position:absolute;inset:0;border-radius:50%;transform-style:preserve-3d;z-index:4}
.co-roulette-pocket{position:absolute;left:50%;top:50%;width:22px;height:32px;margin:-16px 0 0 -11px;display:grid;place-items:center;border-radius:5px;font-weight:1000;font-size:10px;line-height:1;color:#fff;text-shadow:0 1px 2px #000;box-shadow:inset 0 0 0 1px #ffffff22,0 1px 3px #0007;transform:rotate(var(--a)) translateY(-132px) translateZ(15px);backface-visibility:hidden}
.co-roulette-pocket.red{background:#c51f32}.co-roulette-pocket.black{background:#10151d}.co-roulette-pocket.green{background:#07894f}
.co-roulette-pocket.winner{outline:2px solid #fff0a8;box-shadow:0 0 14px #fff2a0,inset 0 0 0 1px #fff;background:#f3c84b;color:#16100a;text-shadow:none;z-index:8}
.co-roulette-bowl{position:absolute;inset:72px;border-radius:50%;background:radial-gradient(circle at 42% 35%,#784714 0 8%,#c6953a 26%,#6b3d10 53%,#1a0f08 70%,#070707 100%);box-shadow:inset 0 0 24px #000d,0 0 0 6px #bb8b38,0 0 0 9px #3e250c;transform:translateZ(17px);z-index:5}
.co-roulette-cone{position:absolute;inset:111px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff1b0 0 4%,#ddb34e 18%,#8c5c19 57%,#3a210b 100%);box-shadow:inset -12px -16px 20px #0007,0 7px 11px #0008,0 0 0 4px #ecd47a;transform:translateZ(31px);z-index:6}
.co-roulette-spindle{position:absolute;left:50%;top:50%;width:34px;height:34px;border-radius:50%;transform:translate(-50%,-50%) translateZ(48px);background:radial-gradient(circle at 35% 25%,#fff7c0,#d7a63c 34%,#754817 70%);box-shadow:0 6px 10px #0009,0 0 0 2px #f0d17a;z-index:7}
.co-roulette-spindle::before{content:"";position:absolute;left:50%;top:-35px;width:8px;height:48px;border-radius:8px;transform:translateX(-50%);background:linear-gradient(90deg,#7f541b,#f5db89,#80521b);box-shadow:0 4px 8px #0008}
.co-roulette-spindle i{position:absolute;left:50%;top:-44px;width:24px;height:10px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle,#fff2aa,#a87623);box-shadow:0 3px 6px #0009}
.co-roulette-ball-orbit,.co-roulette-ball-landed{position:absolute;inset:10px;border-radius:50%;z-index:10;transform-style:preserve-3d;pointer-events:none}
.co-roulette-ball-orbit.spinning{animation:coRouletteBallOrbit .55s linear infinite reverse}
.co-roulette-ball-orbit.idle{animation:coRouletteBallIdle 4s ease-in-out infinite}
@keyframes coRouletteBallOrbit{to{transform:rotateZ(360deg)}}
@keyframes coRouletteBallIdle{0%,100%{transform:rotateZ(-16deg)}50%{transform:rotateZ(14deg)}}
.co-roulette-ball-orbit i,.co-roulette-ball-landed i{position:absolute;left:50%;top:-2px;width:13px;height:13px;border-radius:50%;transform:translateX(-50%) translateZ(28px);background:radial-gradient(circle at 33% 28%,#fff 0 28%,#d9dbe2 48%,#7c838f 100%);box-shadow:0 2px 4px #000b,0 0 8px #fff9}
.co-roulette-ball-landed{transform:rotateZ(0deg)}
.co-roulette-ball-landed i{top:9px;animation:coBallSettle .75s cubic-bezier(.16,.85,.18,1)}
@keyframes coBallSettle{0%{transform:translateX(-50%) translateY(-42px) translateZ(55px) scale(.8)}60%{transform:translateX(-50%) translateY(6px) translateZ(30px) scale(1.12)}100%{transform:translateX(-50%) translateY(0) translateZ(28px)}}
.co-roulette-landed-label{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:72px;height:72px;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #ffffff33;box-shadow:0 10px 30px #0008,0 0 24px currentColor;font-weight:900}
.co-roulette-landed-label.red{background:linear-gradient(145deg,#d92c43,#7d101f)}.co-roulette-landed-label.black{background:linear-gradient(145deg,#2b3442,#090c12)}.co-roulette-landed-label.green{background:linear-gradient(145deg,#17a66b,#075533)}
.co-roulette-landed-label small{font-size:9px;letter-spacing:.18em;opacity:.72}.co-roulette-landed-label strong{font-size:29px;line-height:1}
.roulette-neon .co-roulette-wheel3d{box-shadow:inset 0 0 0 4px #85fff4,inset 0 0 0 12px #082632,inset 0 0 30px #000d,0 0 0 5px #103c49,0 16px 0 #04181e,0 24px 24px #000b,0 0 42px #19dfd077}
.roulette-neon .co-roulette-cone{background:radial-gradient(circle at 35% 30%,#ecffff,#42dccd 30%,#0d5b63 65%,#06252c)}
.roulette-royale .co-roulette-wheel3d{box-shadow:inset 0 0 0 4px #fff0a3,inset 0 0 0 12px #2b1c0d,inset 0 0 30px #000d,0 0 0 5px #5d4018,0 16px 0 #201408,0 24px 24px #000b,0 0 46px #d4af3755}

@media(max-width:650px){
  .co-body.roulette-mode .co-stage{min-height:430px}
  .co-body.roulette-mode .co-visual-zone{min-height:285px}
  .co-roulette-scene{height:285px;width:100%}
  .co-roulette-tilt{width:270px;height:270px}
  .co-roulette-shadow{width:255px;height:82px}
  .co-roulette-pocket{width:18px;height:28px;margin:-14px 0 0 -9px;font-size:8px;transform:rotate(var(--a)) translateY(-111px) translateZ(13px)}
  .co-roulette-bowl{inset:61px}.co-roulette-cone{inset:95px}
  .co-roulette-landed-label{right:0;top:auto;bottom:0;transform:none;width:58px;height:58px;border-radius:16px}.co-roulette-landed-label strong{font-size:23px}
}