
:root{color-scheme:dark;--felt:#07583a;--felt2:#0a704a;--gold:#e8c467;--cream:#fff6dd;--ink:#07130e;--red:#d73545;--black:#141820;--blue:#2390ff;--orange:#ff8a2b}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#06110d;color:var(--cream);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{display:flex;flex-direction:column}.topbar{flex:0 0 auto;display:flex;justify-content:space-between;gap:12px;align-items:center;padding:7px 12px;background:linear-gradient(90deg,#11181b,#18221e);border-bottom:1px solid rgba(232,196,103,.35);font-size:12px}.topbar strong{color:#ffd75e}.topbar button{border:1px solid rgba(255,255,255,.25);background:#25352e;color:#fff;padding:6px 10px;border-radius:8px;font-weight:700;cursor:pointer}.topbar button:hover{background:#345044}.viewport{flex:1 1 auto;min-height:0;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 30%,#12613f 0,#062b1e 55%,#030b08 100%)}.stage{position:relative;width:1180px;height:680px;transform-origin:center center}.sourcebar{flex:0 0 auto;text-align:center;padding:5px 8px;background:#050b08;color:#9fb1a8;font-size:10px}.sourcebar a{color:#79d9ff}
#container{position:absolute;inset:0;width:1180px;height:680px;background:linear-gradient(145deg,#0d6846,#06422e);border:8px solid #492f17;border-radius:28px;box-shadow:inset 0 0 0 3px #b89350,inset 0 0 50px rgba(0,0,0,.55),0 18px 60px rgba(0,0,0,.55);overflow:hidden;user-select:none}
#container::before{content:"CLASSIC EUROPEAN ROULETTE";position:absolute;top:17px;left:420px;right:25px;text-align:center;color:var(--gold);font-size:24px;font-weight:900;letter-spacing:.14em;text-shadow:0 2px 2px #000;z-index:4}
.wheel{position:absolute;left:35px;top:76px;width:350px;height:350px;border-radius:50%;background:repeating-conic-gradient(from -4.865deg,#14834e 0 9.73deg,#c52535 9.73deg 19.46deg,#11151b 19.46deg 29.19deg);border:14px solid #ae7d31;box-shadow:inset 0 0 0 8px #f1d77d,inset 0 0 0 16px #543617,inset 0 0 45px #000,0 12px 30px rgba(0,0,0,.45);transform-origin:center center;z-index:2}.outerRim{position:absolute;inset:-5px;border:4px solid #f9e7a0;border-radius:50%;pointer-events:none}.pocketsRim{position:absolute;inset:46px;border:8px solid #b98737;border-radius:50%;box-shadow:0 0 0 3px #3b2814,inset 0 0 18px #000}.pockets{position:absolute;inset:72px;border:3px solid #e7c768;border-radius:50%;background:radial-gradient(circle,#72501f 0 18%,#d5b55c 19% 25%,#15130f 26% 100%)}.cone{position:absolute;inset:112px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff6b0 0 4%,#d7b44f 9%,#8b5b20 55%,#3a250d 100%);box-shadow:inset -10px -14px 22px rgba(0,0,0,.55)}.turret{position:absolute;left:50%;top:50%;width:50px;height:50px;margin:-25px;border-radius:50%;background:radial-gradient(circle at 36% 28%,#fff7b7,#d7ac42 35%,#704514 76%,#2b1908);border:3px solid #f3d77b;z-index:5}.turretHandle{position:absolute;left:50%;top:50%;width:12px;height:86px;margin-left:-6px;margin-top:-43px;border-radius:8px;background:linear-gradient(90deg,#714414,#f0cf70,#714414);z-index:6}.thendOne,.thendTwo{position:absolute;left:-7px;width:26px;height:12px;border-radius:8px;background:linear-gradient(#f2d477,#81501a);border:1px solid #3d240b}.thendOne{top:-3px}.thendTwo{bottom:-3px}
.ballTrack{position:absolute;inset:24px;border:3px solid rgba(255,255,255,.75);border-radius:50%;z-index:7;transform-origin:center}.ball{position:absolute;left:50%;top:-7px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#d9d9d9 45%,#777 100%);box-shadow:0 2px 5px #000}
.sect{position:absolute;left:50%;top:50%;width:24px;height:162px;margin-left:-12px;transform-origin:50% 0;z-index:4;pointer-events:none}.sect span{position:absolute;left:0;bottom:2px;width:24px;text-align:center;font:700 11px/18px ui-monospace,monospace;color:#fff;text-shadow:0 1px 2px #000;transform:rotate(180deg)}.sect.green span{color:#eaffdd}.block{display:none}
#betting_board{position:absolute;left:420px;top:64px;width:725px;height:585px;padding:8px 12px 12px;background:rgba(0,28,18,.38);border:2px solid rgba(232,196,103,.72);border-radius:16px;box-shadow:inset 0 0 28px rgba(0,0,0,.35);z-index:3}.winning_lines{display:none}.bbtop,.bo3_board,.oto_board{display:grid;gap:4px;margin:5px 0}.bbtop{grid-template-columns:1fr 1fr}.bo3_board{grid-template-columns:repeat(3,1fr)}.oto_board{grid-template-columns:repeat(4,1fr)}.bbtoptwo,.bo3_block,.oto_block{position:relative;display:grid;place-items:center;min-height:38px;border:1px solid rgba(255,255,255,.72);border-radius:5px;background:rgba(7,88,58,.85);font-weight:800;letter-spacing:.03em;cursor:pointer}.bbtoptwo:hover,.bo3_block:hover,.oto_block:hover,.number_block:hover,.tt1_block:hover,.number_0:hover{filter:brightness(1.25);box-shadow:inset 0 0 0 2px #ffe787}.number_board{display:grid;grid-template-columns:54px repeat(12,48px) 60px;grid-template-rows:repeat(3,69px);gap:2px;margin:5px 0}.number_0{grid-row:1/4;position:relative;display:grid;place-items:center;background:#078348;border:1px solid #fff;border-radius:5px;cursor:pointer}.number_block,.tt1_block{position:relative;display:grid;place-items:center;border:1px solid rgba(255,255,255,.85);border-radius:4px;font-weight:900;font-size:17px;cursor:pointer}.number_block.blackNum,.oto_block.blackNum{background:var(--black)}.number_block.redNum,.oto_block.redNum{background:var(--red)}.tt1_block{background:#116b49;font-size:12px}.nbn{pointer-events:none}.chipDeck{display:flex;gap:12px;align-items:center;margin-top:8px}.cdChip,.chip{display:grid;place-items:center;border-radius:50%;font-weight:900;text-shadow:0 1px 1px #000;box-shadow:inset 0 0 0 3px rgba(255,255,255,.45),0 2px 5px rgba(0,0,0,.6)}.cdChip{position:relative;width:52px;height:52px;cursor:pointer;border:3px dashed rgba(255,255,255,.8)}.cdChipActive{outline:4px solid #ffe45b;outline-offset:2px}.cdChip.red,.chip.red{background:#c82436}.cdChip.blue,.chip.blue{background:#176fd3}.cdChip.orange,.chip.orange{background:#e77718}.cdChip.gold,.chip.gold{background:#9d7620}.cdChip.clearBet{border-radius:10px;width:75px;background:#36443e;border-style:solid;font-size:11px;text-transform:uppercase}.chip{position:absolute;right:2px;bottom:2px;width:24px;height:24px;font-size:9px;z-index:10}.bankContainer{position:absolute;right:14px;bottom:55px;display:flex;gap:8px}.bank,.bet{min-width:125px;padding:10px 12px 10px 40px;border:1px solid var(--gold);border-radius:8px;background:#111a16;font-size:18px;font-weight:900;position:relative}.bank::before{content:"BANK";position:absolute;left:8px;top:13px;font-size:10px;color:#9fb1a8}.bet::before{content:"BET";position:absolute;left:8px;top:13px;font-size:10px;color:#9fb1a8}.pnBlock{position:absolute;left:12px;right:12px;bottom:10px;height:38px;border:1px solid rgba(255,255,255,.25);border-radius:8px;background:#07130e;padding:5px;overflow:hidden}#pnContent{display:flex;gap:5px;overflow-x:auto;height:100%;scrollbar-width:none}#pnContent span{flex:0 0 28px;height:26px;display:grid;place-items:center;border-radius:4px;font-weight:900}.pnRed{background:var(--red)}.pnBlack{background:var(--black)}.pnGreen{background:#078348}.spinBtn{position:absolute;left:94px;top:485px;width:230px;height:70px;display:grid;place-items:center;border:3px solid #fff2a0;border-radius:18px;background:linear-gradient(#ffd75f,#d68d16);color:#201202;text-transform:uppercase;font-size:30px;font-weight:1000;letter-spacing:.12em;cursor:pointer;z-index:20;box-shadow:0 8px 0 #6b3f0d,0 12px 25px rgba(0,0,0,.55)}.spinBtn:hover{filter:brightness(1.12);transform:translateY(-1px)}#notification{position:absolute;left:50%;top:50%;z-index:100;transform:translate(-50%,-50%);min-width:290px;padding:22px;border:3px solid #ffe47a;border-radius:18px;background:rgba(9,13,11,.96);text-align:center;box-shadow:0 18px 60px #000;transition:opacity .8s}.nSpan{display:block;font-size:30px;font-weight:900}.nBtn{margin-top:14px;padding:10px;border-radius:8px;background:#e7bd52;color:#171009;font-weight:900;cursor:pointer}.nsnumber{font-size:42px;margin-right:8px}.nsWin{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.nsWinBlock{font-size:13px;padding:8px;background:#203029;border-radius:6px}
@keyframes wheelRotate{from{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes ballRotate{from{transform:rotate(0)}to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion:reduce){.wheel,.ballTrack{animation-duration:.01ms!important;animation-iteration-count:1!important}}
#sect1{transform:rotate(0.000000deg)}
#sect2{transform:rotate(9.729730deg)}
#sect3{transform:rotate(19.459459deg)}
#sect4{transform:rotate(29.189189deg)}
#sect5{transform:rotate(38.918919deg)}
#sect6{transform:rotate(48.648649deg)}
#sect7{transform:rotate(58.378378deg)}
#sect8{transform:rotate(68.108108deg)}
#sect9{transform:rotate(77.837838deg)}
#sect10{transform:rotate(87.567568deg)}
#sect11{transform:rotate(97.297297deg)}
#sect12{transform:rotate(107.027027deg)}
#sect13{transform:rotate(116.756757deg)}
#sect14{transform:rotate(126.486486deg)}
#sect15{transform:rotate(136.216216deg)}
#sect16{transform:rotate(145.945946deg)}
#sect17{transform:rotate(155.675676deg)}
#sect18{transform:rotate(165.405405deg)}
#sect19{transform:rotate(175.135135deg)}
#sect20{transform:rotate(184.864865deg)}
#sect21{transform:rotate(194.594595deg)}
#sect22{transform:rotate(204.324324deg)}
#sect23{transform:rotate(214.054054deg)}
#sect24{transform:rotate(223.783784deg)}
#sect25{transform:rotate(233.513514deg)}
#sect26{transform:rotate(243.243243deg)}
#sect27{transform:rotate(252.972973deg)}
#sect28{transform:rotate(262.702703deg)}
#sect29{transform:rotate(272.432432deg)}
#sect30{transform:rotate(282.162162deg)}
#sect31{transform:rotate(291.891892deg)}
#sect32{transform:rotate(301.621622deg)}
#sect33{transform:rotate(311.351351deg)}
#sect34{transform:rotate(321.081081deg)}
#sect35{transform:rotate(330.810811deg)}
#sect36{transform:rotate(340.540541deg)}
#sect37{transform:rotate(350.270270deg)}
/* Portrait reflow added by David's Games so touch targets remain usable. */
#container.mobile-layout{width:760px;height:1050px}
#container.mobile-layout::before{left:0;right:0;top:16px}
#container.mobile-layout .wheel{left:205px;top:60px}
#container.mobile-layout #betting_board{left:18px;top:445px}
#container.mobile-layout .spinBtn{left:265px;top:365px;height:62px}
