@import url('/fonts.css');
:root{color-scheme:dark;--bg:#080e12;--panel:#111d23;--line:#2d4149;--gold:#e1c481;--muted:#8ea4ae;--teal:#6fe3c1}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 48% 8%,#19312e 0,#0c191d 34%,#080e12 70%);color:#eef3f1;font-family:Segoe UI,Arial,sans-serif;font-size:14px}button,input{font:inherit}button{cursor:pointer;background:#16242b;color:#e9f1ee;border:1px solid #354b53;border-radius:7px;padding:9px 13px;transition:background .16s,border-color .16s}button:hover{background:#273d44;border-color:var(--gold)}button:disabled{opacity:.45;cursor:not-allowed}button:focus-visible,input:focus-visible{outline:2px solid var(--teal);outline-offset:3px}[hidden]{display:none!important}header{height:78px;padding:10px 30px;display:flex;align-items:center;gap:25px;border-bottom:1px solid #273936;background:#0a1216cc}.brand{display:flex;align-items:center;gap:12px;font-size:22px;letter-spacing:3px;color:var(--gold)}.brand img{height:58px;width:48px;object-fit:contain}.brand small{display:block;font-size:9px;letter-spacing:2px;color:var(--muted);margin-top:5px}.demo{font-size:10px;letter-spacing:1.6px;border:1px solid #36534a;color:var(--teal);border-radius:20px;padding:7px 12px}nav{margin-left:auto;display:flex;gap:8px}main{max-width:1520px;margin:auto;padding:0 28px}.stage{height:375px;display:grid;grid-template-columns:1fr 440px 1fr;gap:22px;align-items:center}.eyebrow{font-size:10px;color:var(--teal);letter-spacing:2px}.intro h1{font-family:Georgia,serif;font-size:38px;line-height:1.15;font-weight:400;letter-spacing:-1px;margin:17px 0}.intro p{font-size:13px;color:var(--muted);line-height:1.8}.table-tag{display:flex;align-items:center;gap:10px;font-size:10px;letter-spacing:1px;color:var(--muted)}.table-tag b{color:#fff;font-size:18px}.table-tag span{border-left:1px solid #3e514f;padding-left:14px;margin-left:4px}.result-banner{margin-top:18px;color:var(--gold);font-size:15px;min-height:20px}.wheel-wrap{height:390px;position:relative;align-self:start;margin-top:-6px;display:grid;place-items:center}canvas{height:390px;width:390px;max-width:100%;object-fit:contain}#wheelResult{position:absolute;font-size:44px;font-weight:800;text-shadow:0 3px 10px #000;background:#091417eb;border:1px solid #d4b76d;border-radius:50%;width:125px;height:125px;display:none;align-items:center;justify-content:center}.right-panel{max-width:350px;justify-self:end;width:100%}.panel-heading{font-size:11px;color:var(--gold);letter-spacing:1.4px;display:flex;justify-content:space-between}.panel-heading span{font-size:8px;color:var(--muted)}.recent{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:12px 0 22px}.recent div{height:39px;border:1px solid #435247;border-radius:5px;background:#11191d;display:grid;place-items:center;font-size:18px;font-weight:700}.recent .red{background:#962b38}.recent .wild{background:#146b4e}.hand{display:flex;gap:6px;margin-top:10px}.hand img{width:calc(20% - 5px);height:77px;object-fit:fill;border-radius:5px;border:1px solid #52605d}.hand-title{margin-top:4px}#handName{font-size:10px;text-align:center;color:var(--muted);height:15px;margin:7px 0 9px}.bonus{width:100%;border-color:#75613c;background:linear-gradient(110deg,#363025,#172224);display:grid;grid-template-columns:1fr auto;text-align:left;padding:11px 13px}.bonus span{font-size:11px;letter-spacing:1px;color:var(--gold)}.bonus b{color:var(--gold);font-size:11px}.bonus small{font-size:10px;grid-column:1/3;color:#adada0;margin-top:4px}.bonus.selected{border-color:#fbe188;box-shadow:0 0 12px #dfc98328}.betting{border:1px solid #33473f;border-radius:13px;background:linear-gradient(130deg,#122421e8,#101b20f7);padding:15px 18px 0;box-shadow:0 15px 60px #0004}.betting-heading{display:flex;justify-content:space-between;align-items:center}.phase{font-size:11px;letter-spacing:1.8px;color:var(--teal)}#countdown{display:inline-grid;place-items:center;border:2px solid var(--teal);border-radius:50%;width:32px;height:32px;font-weight:700;margin:0 10px}#roundHint{font-size:11px;color:var(--muted)}.spot-modes{display:flex;gap:5px}.spot-modes button{font-size:10px;padding:6px 9px}.selected{color:var(--gold);border-color:var(--gold)}.table-scroll{overflow-x:auto}.layout{width:100%;height:270px;position:relative;min-width:800px;margin:6px auto 0}.spot{position:absolute;padding:0;display:grid;place-items:center;transform:translate(-50%,-50%);border:1px solid #678177;border-radius:2px;background:#192a26;color:#f4e7c5;font-family:Georgia,serif;font-size:22px}.spot.straight.red,.spot.suit.red,.spot.red{background:#722b36;color:#ffe4db}.spot.straight.wild{background:#12513e;font-size:17px}.spot.black,.spot.straight.black,.spot.suit.black{background:#101a20}.spot.quarter,.spot.black:not(.straight),.spot.red:not(.straight){font:12px Segoe UI,sans-serif;letter-spacing:1px}.spot.split,.spot.corner{z-index:3;width:16px!important;height:16px!important;border-radius:50%;background:transparent;border:0;font-size:0}.spot.split:hover,.spot.corner:hover,.spot.split:focus-visible,.spot.corner:focus-visible{background:#f3d483;box-shadow:0 0 12px #e7c863}.layout[data-mode=split] .spot.split,.layout[data-mode=corner] .spot.corner{background:#d4c486;border:2px solid #0b1c19}.layout[data-mode=straight] .spot.split,.layout[data-mode=straight] .spot.corner,.layout[data-mode=split] .spot.corner,.layout[data-mode=corner] .spot.split{pointer-events:none;opacity:0}.spot.winner{border:2px solid rgba(255,223,117,.5);box-shadow:inset 0 0 18px #f6c65338}.stake{position:absolute;z-index:5;background:#f2d682;color:#182820;width:27px;height:27px;border:3px dashed #746330;border-radius:50%;display:grid;place-items:center;font:bold 10px Segoe UI;right:-6px;top:-5px;box-shadow:0 2px 4px #0009;pointer-events:none}.split .stake,.corner .stake{right:-6px;top:-5px}.bet-info{font-size:10px;text-align:center;color:var(--muted);height:22px}.controls{border-top:1px solid #31453f;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0}.wallet small,.total small{font-size:9px;color:var(--muted);letter-spacing:1px;display:block}.wallet strong,.total strong{font-size:22px;font-weight:500}.wallet em,.total em{font-size:10px;font-style:normal;color:var(--gold)}.wallet button{font-size:10px;padding:5px 7px;margin-left:9px;color:var(--teal)}.chips{display:flex;gap:9px}.chip{height:46px;width:46px;border-radius:50%;border:4px dashed #e8e7da;background:var(--chip);font-weight:800;padding:0;box-shadow:inset 0 0 0 2px #0005}.chip.selected{outline:2px solid #ffe288;outline-offset:4px;transform:translateY(-3px)}.actions{display:flex;gap:5px}.actions button{font-size:11px;padding:8px 10px}.total{text-align:right;min-width:65px}footer{display:flex;justify-content:space-between;align-items:center;height:44px;font-size:10px;color:var(--muted)}footer button{font-size:10px;border:0;background:transparent}.connection{color:var(--teal)}#toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:20;background:#203a3c;border:1px solid #639087;padding:13px 22px;border-radius:9px;max-width:90%;display:none;box-shadow:0 5px 30px #0008}dialog{color:#edf4f0;background:#111f25;border:1px solid #536e66;border-radius:15px;width:460px;max-width:94%;padding:32px;box-shadow:0 30px 100px #000b}dialog::backdrop{background:#02090bd9;backdrop-filter:blur(6px)}dialog h2{font-family:Georgia,serif;font-size:28px;font-weight:400;color:var(--gold);margin:12px 0}dialog p{font-size:13px;color:var(--muted);line-height:1.6}.close{position:absolute;top:8px;right:9px;background:transparent;border:0;font-size:24px}label{display:block;font-size:12px;margin:18px 0}input{display:block;width:100%;padding:12px;background:#091318;border:1px solid #3d565f;border-radius:6px;color:white;margin-top:7px}.primary{width:100%;background:#e2c581;color:#14201f;border:0;font-weight:700;padding:13px}.primary:hover{background:#f4dca1}.fine{font-size:10px!important}#accountToggle{width:100%;border:0;background:transparent;font-size:12px;margin-top:12px}table{border-collapse:collapse;width:100%;font-size:12px}td,th{text-align:left;padding:8px 5px;border-bottom:1px solid #2d4245}td input{width:100%;min-width:70px;padding:7px;margin:0}#infoBody{line-height:1.8;font-size:13px;color:#bdcdc9}#infoBody ul{padding-left:20px}
@media(min-width:1500px){.stage{height:430px;grid-template-columns:1fr 520px 1fr}.wheel-wrap,canvas{width:450px;height:450px}.layout{height:300px}.hand img{height:90px}.intro h1{font-size:46px}}@media(max-width:1050px){main{padding:0 12px}.stage{grid-template-columns:1fr 340px 1fr;gap:10px;height:335px}canvas,.wheel-wrap{width:330px;height:330px}.intro h1{font-size:27px}.intro p{font-size:11px}.right-panel{max-width:280px}.hand img{height:65px}.brand{font-size:17px}header{padding:10px 16px}.demo{display:none}.controls{flex-wrap:wrap}.actions{order:5;margin:auto}.chips{gap:7px}}@media(max-width:720px){header{height:auto;min-height:72px;gap:10px;flex-wrap:wrap}nav{gap:5px}nav button{font-size:10px;padding:6px}.brand{font-size:16px}.brand img{height:40px;width:33px}main{padding:0 8px}.stage{grid-template-columns:1fr 1fr;height:320px}.intro{display:none}.wheel-wrap,canvas{width:100%;height:300px}.right-panel{padding-right:5px}.panel-heading span{display:none}.recent{gap:3px;margin-bottom:12px}.recent div{font-size:13px;height:28px}.hand img{height:60px}.bonus{padding:8px}.bonus small{font-size:8px}.betting{padding:9px 7px 0}.betting-heading{flex-wrap:wrap;gap:8px}.betting-heading>div:first-child{width:100%}#roundHint{font-size:10px}.layout{height:260px}.controls{gap:15px}.chips{order:3;justify-content:center;width:100%}.wallet{margin-right:auto}.actions{width:100%;justify-content:center}.chip{width:43px;height:43px}.total{margin-left:auto}footer>span:nth-child(2){display:none}}

/* Straight-up wagers sit exactly over the card centre, including both Jokers. */
.spot.straight .stake,.spot.quarter .stake,.spot.red .stake,.spot.black .stake,.spot.suit .stake{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%)}
.spot:disabled{opacity:1;cursor:not-allowed}
#countdown.locked{border-color:#d6aa65;color:#e6c28c}
#wheelResult.lock-announcement{font-size:17px;text-align:center;line-height:1.5;letter-spacing:2px;color:#f2d38b}

/* Each chip fills one half-cell pitch: neighbouring betting targets touch exactly. */
.spot .stake,.bet-preview{width:calc(100cqw / 30);height:calc(100cqw / 30);font-size:clamp(9px,1cqw,16px);border-width:2px;box-shadow:none}
.spot.split .stake,.spot.corner .stake{left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%)}

/* Share the layout's coordinate space, keeping the announcement over Red/Black. */
.table-surface{min-width:800px;width:100%}
.bet-announcement{height:44px;display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px}
.bet-announcement .phase{font-size:16px;font-weight:700;letter-spacing:2px}
.bet-announcement .phase.locked{color:#e6c28c}
.bet-announcement #countdown{margin:0}
/* Mark the winning straight-up position as well as its surrounding winning splits/corners. */
.spot.straight.winner::after,.spot.split.winner::after,.spot.corner.winner::after{content:"";position:absolute;left:50%;top:50%;width:calc(100cqw / 30);height:calc(100cqw / 30);box-sizing:border-box;transform:translate(-50%,-50%);border:2px solid rgba(255,223,117,.5);border-radius:50%;background:transparent;pointer-events:none;z-index:4}
.spot.split.winner,.spot.corner.winner{border:0;box-shadow:none}

/* One shared header row, with the announcement centred over Red and Black. */
.betting-heading{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;min-height:44px}
.betting-heading>div:first-child{width:auto;min-width:0}
.betting-heading #roundHint{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.betting-heading .bet-announcement{margin:0;white-space:nowrap}
.betting-heading .spot-modes{justify-self:end;flex-wrap:nowrap}

/* One history row beneath the wheel, aligned with the complete betting layout. */
.recent-strip{width:100%;margin:0 0 10px;padding-bottom:10px;border-bottom:1px solid #31453f}
.recent-strip .recent{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px;margin:9px 0 0}
.recent-strip .recent div{height:38px;font-size:19px}
.recent-strip .recent div:first-child{border-color:var(--gold)}
.recent-strip .panel-heading span{display:inline}

/* Equal horizontal/vertical cell pitch keeps card faces square at every width. */
.layout{height:auto;aspect-ratio:75 / 26;container-type:inline-size}

/* Full-height results rail is independent of the scalable game surface. */
:root{--rail-width:clamp(82px,7vw,126px)}
#gameContent{margin-right:var(--rail-width)}
.recent-rail{position:fixed;right:0;top:0;bottom:0;width:var(--rail-width);padding:8px 6px;background:#101c22;border-left:1px solid #4a594e;display:flex;flex-direction:column;z-index:8}
.rail-title{text-align:center;color:var(--gold);font-size:12px;letter-spacing:1px;line-height:1.3;flex:none;padding:3px 0 8px}
.rail-title small{display:block;color:var(--muted);font-size:7px;letter-spacing:.7px;margin-top:4px}
.recent-rail .recent{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(12,minmax(0,1fr));gap:4px;margin:0;flex:1;min-height:0}
.recent-rail .recent div{height:auto;min-height:0;font-size:clamp(17px,2.3vh,28px);border-radius:4px}
.recent-rail .recent div:first-child{border:2px solid var(--gold)}
html.fit-screen,html.fit-screen body{width:100%;height:100%;overflow:hidden}
.fit-screen #gameContent{position:absolute;width:1600px;max-width:none;margin:0;left:var(--fit-left,0px);top:var(--fit-top,0px);transform:scale(var(--fit-scale,1));transform-origin:top left}
.fit-screen header{height:62px;min-height:0;flex-wrap:nowrap;padding:6px 22px;gap:20px}
.fit-screen header .brand{font-size:22px}.fit-screen .brand img{height:48px;width:42px}
.fit-screen header .demo{display:inline}.fit-screen nav{flex-wrap:nowrap}.fit-screen nav button{font-size:13px;padding:8px 11px}
.fit-screen main{max-width:none;padding:0 20px}
.fit-screen .stage{height:250px;grid-template-columns:1fr 370px 1fr;gap:24px}
.fit-screen .intro{display:block}.fit-screen .intro h1{font-size:32px;margin:10px 0}.fit-screen .intro p{font-size:12px;margin:8px 0}
.fit-screen .wheel-wrap,.fit-screen canvas{width:265px;height:265px}.fit-screen .wheel-wrap{justify-self:center;margin-top:-6px}
.fit-screen .right-panel{max-width:350px;padding:0}.fit-screen .hand img{height:72px}.fit-screen .panel-heading span{display:inline}
.fit-screen .betting{padding:10px 16px 0}.fit-screen .table-scroll{overflow:visible}.fit-screen .table-surface{min-width:0}
.fit-screen .layout{min-width:0;width:100%;height:auto;aspect-ratio:75 / 26}
.fit-screen .betting-heading{flex-wrap:nowrap}.fit-screen .betting-heading>div:first-child{width:auto}
.fit-screen .controls{flex-wrap:nowrap;padding:9px 0;gap:12px}
.fit-screen .controls>*{order:0;width:auto;margin:0}.fit-screen .chips{gap:9px}.fit-screen .chip{width:44px;height:44px}
.fit-screen .actions{width:auto}.fit-screen footer{height:30px}.fit-screen footer>span:nth-child(2){display:inline}
dialog{max-height:90vh;overflow:auto}

/* Larger card ranks and suit symbols, proportional to the square cells. */
.spot.straight,.spot.suit{font-size:clamp(24px,2.5cqw,42px);font-weight:700}
.spot.straight.wild{font-size:clamp(23px,2.3cqw,38px)}

/* Selected wager preview uses the exact placed-chip diameter and target centre. */
.bet-preview{display:none;right:auto;bottom:auto;transform:translate(-50%,-50%);z-index:10;pointer-events:none}
.spot.split:hover,.spot.corner:hover,.spot.split:focus-visible,.spot.corner:focus-visible{background:transparent;box-shadow:none}

/* Denomination colour matches the chip selector for previews and placed stacks. */
.stake.chip-colored{background:var(--chip);color:var(--chip-ink,#fff);border-color:#e8e7da}
.chip{color:var(--chip-ink,#fff)}

/* Override the outside-colour label rule for the four large suit symbols. */
.spot.suit.red,.spot.suit.black{font-family:"Segoe UI Symbol","Segoe UI",sans-serif;font-size:clamp(32px,3.5cqw,56px);font-weight:700;line-height:1}

/* Readable outside-bet labels in both windowed and full-screen layouts. */
.spot.quarter,.spot.red:not(.straight):not(.suit),.spot.black:not(.straight):not(.suit){font-size:clamp(16px,1.5cqw,24px);font-weight:700;line-height:1.2}

/* Preserve the artwork's portrait ratio instead of stretching to fixed heights. */
.hand img,.fit-screen .hand img{height:auto;aspect-ratio:537 / 750;object-fit:contain;align-self:flex-start}

/* Edge-to-edge statistics beside the independently scaled table. */
:root{--temperature-width:clamp(90px,8vw,144px)}
#gameContent{margin-left:var(--temperature-width)}
.fit-screen #gameContent{margin:0}
.temperature-rail{position:fixed;left:0;top:0;bottom:0;width:var(--temperature-width);padding:8px 6px;background:#101c22;border-right:1px solid #4a594e;display:flex;flex-direction:column;gap:8px;z-index:8}
.temperature-group{flex:1;min-height:0;display:flex;flex-direction:column}
.temperature-group h2{margin:0;padding:8px 2px;text-align:center;font-size:clamp(10px,1vw,14px);letter-spacing:.6px;border-radius:4px;background:#7b2935;color:#fff}
.temperature-group.cold h2{background:#24557c}
.temperature-list{flex:1;min-height:0;display:grid;grid-template-rows:repeat(4,minmax(0,1fr))}
.temperature-card{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.stat-ball{width:min(72%,7.6vh);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;flex-shrink:0;font-size:clamp(16px,2.4vh,28px);font-weight:800;line-height:1;color:#fffdf1;background:radial-gradient(circle at 30% 23%,#d8e1e5 0%,#64727c 15%,#1c2931 44%,#030709 78%,#29383e 100%);border:1px solid #56636a}
.stat-ball.red{background:radial-gradient(circle at 30% 23%,#ffe0dd 0%,#f16a70 15%,#ce192b 44%,#580612 78%,#a82737 100%);border-color:#a85058}
.stat-ball.wild{background:radial-gradient(circle at 30% 23%,#d5ffea 0%,#65dca5 15%,#06985b 44%,#003f2d 78%,#1b7756 100%);border-color:#388c6b}
.stat-ball.empty{color:#95a1aa}
.temperature-card small{font-size:clamp(9px,1.1vh,12px);color:#b8c6cd;line-height:1}
#temperatureWindow{flex:none;text-align:center;font-size:8px;color:#b8c6cd;padding:3px 0}

.recent-rail .recent>div{position:relative}
.recent-position{position:absolute;top:3px;right:3px;width:clamp(22px,2.6vh,29px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:#ffdf42;color:#23200c;border:1px solid #fff1a0;font:800 clamp(9px,1.05vh,12px)/1 "Segoe UI",sans-serif;pointer-events:none}

/* Animated fire and frost stay behind the readable card balls. */
.temperature-group{position:relative;isolation:isolate;overflow:hidden;border-radius:6px;border:1px solid #704130;background:#190d0a}
.temperature-group::before,.temperature-group::after{content:"";position:absolute;inset:-15%;z-index:-1;pointer-events:none}
.temperature-group.hot::before{background:radial-gradient(ellipse at 12% 92%,#ffcf57 0%,#ff6a12 8%,transparent 30%),radial-gradient(ellipse at 88% 70%,#ffb12c 0%,#d93908 12%,transparent 32%),radial-gradient(ellipse at 18% 35%,#ef4b0b 0%,transparent 28%),radial-gradient(ellipse at 65% 110%,#ffd35b 0%,#f14d08 22%,transparent 54%);filter:blur(7px);opacity:.7;transform-origin:bottom;animation:card-fire-glow 3.4s ease-in-out infinite alternate}
.temperature-group.hot::after{background-image:radial-gradient(circle,#ffdd8b 0 1px,transparent 2px),radial-gradient(ellipse,#ff8b29 0 1px,transparent 3px);background-size:37px 87px,61px 129px;background-position:8px 0,25px 40px;opacity:.6;animation:card-embers 6s linear infinite}
.temperature-group.cold{border-color:#366b86;background:#0b2334}
.temperature-group.cold::before{background:repeating-conic-gradient(from 25deg at 0% 68%,transparent 0deg 19deg,#90e5ff50 20deg 24deg,transparent 25deg 49deg),repeating-conic-gradient(from 190deg at 100% 30%,transparent 0deg 24deg,#d6f7ff40 25deg 30deg,transparent 31deg 57deg),radial-gradient(ellipse at 50% 85%,#4dc5eb88,transparent 65%);animation:card-frost-glow 5s ease-in-out infinite alternate}
.temperature-group.cold::after{background-image:radial-gradient(circle,#e7fbff 0 1px,transparent 2px),radial-gradient(circle,#a5e8ff 0 1.5px,transparent 2.5px);background-size:43px 79px,71px 137px;background-position:0 0,21px 33px;opacity:.55;animation:card-snow 12s linear infinite}
.temperature-group h2{background:#6f201de8;border-bottom:1px solid #ff9a494d;text-shadow:0 1px 3px #000}
.temperature-group.cold h2{background:#174b6be8;border-bottom-color:#9cecff66}
.temperature-card small{background:#091219c9;padding:2px 6px;border-radius:8px;color:#e9f5fb;text-shadow:0 1px 2px #000}
@keyframes card-fire-glow{from{transform:translateY(3%) scaleX(.94);opacity:.5}to{transform:translateY(-4%) scaleX(1.12);opacity:.85}}
@keyframes card-embers{to{background-position:19px -174px,11px -218px}}
@keyframes card-frost-glow{from{opacity:.45;transform:scale(1)}to{opacity:.9;transform:scale(1.06)}}
@keyframes card-snow{to{background-position:15px 158px,6px 307px}}
@media(prefers-reduced-motion:reduce){.temperature-group::before,.temperature-group::after{animation:none}}

/* Detailed flame tongues and blue crystal facets replace the diffuse washes. */
.temperature-group.hot{background:#210604;border-color:#bf481c}
.temperature-group.hot::before{inset:-3px;background:url('/assets/hot-fire.svg') center / 100% 100% no-repeat;filter:none;opacity:1;animation:fire-art-breathe 2.8s ease-in-out infinite alternate}
.temperature-group.cold{background:#003e9e;border-color:#168eff}
.temperature-group.cold::before{inset:-3px;background:url('/assets/cold-ice.svg') center / 100% 100% no-repeat;opacity:1;animation:ice-art-shimmer 5s ease-in-out infinite alternate}
.temperature-group.hot h2{background:linear-gradient(100deg,#7a1706,#b93b0b,#7a1706);border-bottom-color:#ffad47}
.temperature-group.cold h2{background:linear-gradient(100deg,#0047ae,#0879d9,#0047ae);border-bottom-color:#64dfff}
@keyframes fire-art-breathe{from{transform:scale(1);filter:brightness(.9)}to{transform:scale(1.05,1.025);filter:brightness(1.22)}}
@keyframes ice-art-shimmer{from{filter:brightness(.9) saturate(1.2)}to{filter:brightness(1.2) saturate(1.4)}}
@media(prefers-reduced-motion:reduce){.temperature-group.hot::before,.temperature-group.cold::before{animation:none}}

/* Photographic material atlas: fire on the left half, blue ice on the right. */
.temperature-group.hot::before,.temperature-group.cold::before{background-image:url('/assets/fire-ice-realistic.png');background-size:200% 100%;background-repeat:no-repeat;inset:0}
.temperature-group.hot::before{background-position:left center;animation:real-fire-flicker 4s ease-in-out infinite alternate}
.temperature-group.cold::before{background-position:right center;animation:real-ice-shimmer 7s ease-in-out infinite alternate}
.temperature-group.hot::after{opacity:.32}
.temperature-group.cold::after{opacity:.25}
.temperature-group.hot h2{background:#491409e8}
.temperature-group.cold h2{background:#00386fe8}
@keyframes real-fire-flicker{0%{filter:brightness(.88);transform:scale(1)}45%{filter:brightness(1.1)}100%{filter:brightness(1);transform:scale(1.035)}}
@keyframes real-ice-shimmer{from{filter:brightness(.85);transform:scale(1)}to{filter:brightness(1.12);transform:scale(1.025)}}
@media(prefers-reduced-motion:reduce){.temperature-group.hot::before,.temperature-group.cold::before{animation:none}}

/* Equal side columns keep the chip selector on the table's true centre. */
/* Transform only: keep fullscreen measurements stable throughout the spin. */
.wheel-column{display:grid;justify-items:center;align-self:start;min-width:0}
footer .footer-round{display:flex;align-items:center;justify-content:center;gap:15px;font-size:11px;letter-spacing:.4px}
footer .footer-round strong{color:var(--gold);font-size:12px}
.fit-screen footer .footer-round{display:flex}
.wheel-column .wheel-wrap{margin-top:0}
.fit-screen .stage{height:285px}
.table-statistics{min-width:0;max-width:430px;padding:12px 0;transition:opacity .9s ease}
.quarter-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.suit-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;margin-top:8px}
.suit-heading{margin-top:17px}
.quarter-jokers{display:block;text-align:right;color:#5ee3ad;font-size:9px;margin-top:5px}
.right-panel,.fit-screen .right-panel{width:100%;max-width:440px;justify-self:end}
.right-panel .hand{gap:7px}
.right-panel .hand img{width:calc((100% - 28px)/5);height:auto;aspect-ratio:537 / 750}
.right-panel #handName{height:auto;min-height:15px;margin:8px 0 11px}
.auto-bonus{display:flex;align-items:center;gap:8px;margin-top:6px;color:#e7dcb7;font-size:12px;cursor:pointer;line-height:18px}
.auto-bonus input{appearance:auto;accent-color:#e3bd65;width:16px;height:16px;margin:0;padding:0;flex:none;cursor:pointer}
.right-panel:has(.auto-bonus) #handName{margin:5px 0 6px}
#bonus.bonus{display:flex;align-items:center;gap:12px;width:100%;padding:7px 14px;text-align:left;border:1px solid #ffe29a;border-radius:10px;background:linear-gradient(135deg,#f8d57f,#c88f30);color:#211908;box-shadow:inset 0 1px 0 #fff3c9,0 3px 12px #0003;transition:filter .2s,transform .2s}
#bonus .bonus-chip{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:50%;border:3px dashed #fff3c9;background:#7b4c15;color:#fff;font-size:21px;font-weight:800;letter-spacing:0}
#bonus .bonus-copy{display:flex;flex:1;min-width:0;flex-direction:column;gap:2px}
#bonus .bonus-label{font-size:10px;font-weight:700;letter-spacing:1px;color:#4e350f}
#bonus b{font-size:18px;font-weight:800;color:#211908;float:none}
#bonus small{font-size:11px;color:#4e350f;margin:0}
#bonus .bonus-arrow{font-size:27px;color:#4e350f}
#bonus:hover:enabled{filter:brightness(1.12);transform:translateY(-1px)}
#bonus.selected{background:linear-gradient(135deg,#137852,#0b4836);border-color:#62e5ac;opacity:1}
#bonus.selected .bonus-label,#bonus.selected b,#bonus.selected small,#bonus.selected .bonus-arrow{color:#e6fff2}
#bonus.selected .bonus-chip{background:#0a4532;border-color:#a0f6c8}
#bonus:disabled:not(.selected){opacity:.6;cursor:default}
@media(max-width:1050px){html:not(.fit-screen) #bonus b{font-size:14px}html:not(.fit-screen) #bonus{padding:9px;gap:7px}html:not(.fit-screen) #bonus .bonus-chip{flex-basis:34px;height:34px;font-size:18px}}
.stat-tile{background:linear-gradient(145deg,#25353f,#101a20);border:1px solid #45565e;border-radius:6px;text-align:center;padding:10px 3px}
.stat-tile small{display:block;font-size:9px;color:#d6c595;white-space:nowrap}
.stat-tile strong{display:block;margin-top:7px;font-size:19px;color:#f5f7f6}
.suit-stats .stat-tile small{font-size:24px;line-height:24px;color:#eaf1f5}
.suit-stats .red-suit small{color:#ff5964}
.suit-stats .joker small{font-size:11px;color:#5ee3ad}
.spin-focus .table-statistics{opacity:.3}
@media(max-width:1050px){.stat-tile strong{font-size:14px}.stat-tile small{font-size:7px}}
@media(max-width:720px){html:not(.fit-screen) .table-statistics{display:none}}
.stage .wheel-wrap{z-index:3;transform-origin:50% 0;transition:transform 1.2s cubic-bezier(.22,.65,.24,1)}
.betting{transform-origin:50% 100%;transition:transform 1.2s cubic-bezier(.22,.65,.24,1),opacity 1s ease;will-change:transform}
.stage .intro,.stage .right-panel{transition:opacity .9s ease}
.spin-focus .stage .wheel-wrap{transform:scale(1.5)}
.spin-focus.fit-screen .stage .wheel-wrap{transform:scale(1.9)}
.spin-focus .betting{transform:scale(.62);opacity:.45;pointer-events:none}
.spin-focus .stage .intro,.spin-focus .stage .right-panel{opacity:.25;pointer-events:none}
#wheelResult.winner-ball{width:68%;height:auto;aspect-ratio:1;max-width:280px;border:1px solid #6c7882;background:radial-gradient(circle at 30% 23%,#ecf3f6 0%,#8a969f 9%,#34414d 24%,#111c23 50%,#010305 78%,#24323d 100%);color:#fffdf2;font-size:clamp(44px,4vw,84px);line-height:1;text-shadow:0 2px 3px #0008;animation:winner-ball-arrive 1.2s cubic-bezier(.18,.8,.3,1) both,winner-ball-breathe 2.6s ease-in-out 1.2s infinite;pointer-events:none}
#wheelResult.winner-ball.red{border-color:#ee6b76;background:radial-gradient(circle at 30% 23%,#fff3e8 0%,#ffadb1 9%,#f53946 24%,#c90921 50%,#5d0010 78%,#ba2536 100%)}
#wheelResult.winner-ball.wild{border-color:#54d69c;background:radial-gradient(circle at 30% 23%,#eefff3 0%,#9af7ca 9%,#20c985 24%,#008a50 50%,#003322 78%,#177b53 100%)}
@keyframes winner-ball-arrive{0%{opacity:0;transform:scale(.35) rotate(-12deg)}65%{opacity:1;transform:scale(1.08) rotate(2deg)}100%{opacity:1;transform:scale(1) rotate(0)}}
@keyframes winner-ball-breathe{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.035);filter:brightness(1.12)}}
@media(prefers-reduced-motion:reduce){.stage .wheel-wrap,.betting,.stage .intro,.stage .right-panel{transition:none}#wheelResult.winner-ball{animation:none}}
:root{--card-red-gloss:linear-gradient(155deg,#ffffff30 0%,#ffffff08 30%,transparent 48%),linear-gradient(180deg,#ff343d 0%,#e91625 46%,#c80918 51%,#a60513 100%);--card-black-gloss:linear-gradient(155deg,#ffffff25 0%,#ffffff04 34%,transparent 49%),linear-gradient(180deg,#30373e 0%,#12171c 46%,#06090c 51%,#010304 100%)}
.spot.straight.red,.spot.suit.red,.spot.red,.recent-rail .recent .red{background:var(--card-red-gloss);color:#fff8ef;border-color:#ff6770}
.spot.straight.black,.spot.suit.black,.spot.black,.recent-rail .recent .black{background:var(--card-black-gloss);color:#fff8ef;border-color:#626c76}
.spot.straight.red,.spot.suit.red,.spot.red,.spot.straight.black,.spot.suit.black,.spot.black,.recent-rail .recent .red,.recent-rail .recent .black{box-shadow:inset 0 1px 0 #ffffff55,inset 0 -2px 3px #00000035;text-shadow:0 1px 2px #00000055}
.spot.red.winner,.spot.black.winner{border-color:rgba(255,223,117,.5);box-shadow:inset 0 0 18px #f6c65338,0 0 5px #ffdf752b}
.recent-rail .recent div:first-child{border-color:var(--gold)}
.spot.straight.wild,.recent-rail .recent .wild{background:linear-gradient(155deg,#ffffff30 0%,#ffffff08 30%,transparent 48%),linear-gradient(180deg,#16bd79 0%,#07995c 46%,#057a49 51%,#034e31 100%);color:#fff8ef;border-color:#48d49b;box-shadow:inset 0 1px 0 #ffffff55,inset 0 -2px 3px #00000035;text-shadow:0 1px 2px #00000055}
.spot.straight.wild.winner{border-color:rgba(255,223,117,.5);box-shadow:inset 0 0 18px #f6c65338,0 0 5px #ffdf752b}
.recent-rail .recent .wild:first-child{border-color:var(--gold)}
.controls,.fit-screen .controls{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:16px}
.controls>.wallet{justify-self:start;margin:0;min-width:0}
.controls>.chips{width:auto;order:0;justify-self:center}
.controls>.controls-end{display:flex;align-items:center;justify-content:flex-end;gap:18px;min-width:0}
.controls-end .actions{order:0;margin:0;width:auto;gap:8px}
.controls-end .total{margin:0;min-width:65px}
.controls-end .actions button{min-height:44px;min-width:78px;padding:10px 13px;font-size:16px;font-weight:700;white-space:nowrap;color:#fff;border:1px solid #ffffff40;border-radius:7px;transition:filter .15s}
.actions [data-action="undo"]{background:#2169a4}
.actions [data-action="clear"]{background:#ad3540}
.actions [data-action="repeat"]{background:#26734f}
.actions [data-action="double"]{background:#7546a7}
.controls-end .actions button:hover:enabled{filter:brightness(1.2)}
.controls-end .actions button:disabled{opacity:.5}
@media(max-width:1250px){html:not(.fit-screen) .controls{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}html:not(.fit-screen) .controls-end{grid-column:1 / -1;justify-content:center;flex-wrap:wrap}html:not(.fit-screen) .controls>.chips{grid-column:2}html:not(.fit-screen) .controls-end .actions{flex-wrap:wrap;justify-content:center}}
/* Royal-blue stage with satin light and gold atmosphere. */
#manualKeypadControl{font-size:12px;color:#f0d693;white-space:nowrap}
#manualKeypadControl input{width:16px;height:16px;padding:0;margin:0 5px 0 0;vertical-align:middle;accent-color:#e1bd64}
#infoDialog{width:640px;max-height:86vh;padding:24px 28px;background:linear-gradient(145deg,#183f67,#0c2445);border:1px solid #c9b47c;border-radius:18px;box-shadow:0 15px 45px #00102b66;scrollbar-color:#557493 #102a4a;animation:info-popup-in .2s ease-out}
#infoDialog::backdrop{background:transparent;backdrop-filter:none}
#infoDialog h2{margin:0 40px 16px 0;font-family:"Segoe UI",sans-serif;font-size:27px;font-weight:700;color:#f5dc9e}
#infoDialog .close{top:12px;right:12px;width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid #67829b;border-radius:50%;background:#0b2444;color:#fff}
#infoBody{font-size:14px;line-height:1.6;color:#e0eaf3}
#infoBody p{font-size:13px;color:#cfdeeb;margin:11px 0}
#infoBody h3{font-size:15px;color:#f1d391;margin:20px 0 9px}
.rules-summary{display:flex;flex-wrap:wrap;gap:7px}
.rules-summary span{font-size:10px;letter-spacing:.8px;font-weight:700;border:1px solid #6389a8;border-radius:20px;padding:5px 9px;background:#214b70;color:#bdedff}
#infoBody table{border-collapse:separate;border-spacing:0;width:100%;overflow:hidden;border:1px solid #52728d;border-radius:10px;font-size:13px}
#infoBody th{background:#244e73;color:#f1d99f;padding:10px 12px;font-size:11px;text-transform:uppercase;letter-spacing:.5px}
#infoBody td{padding:9px 12px;border-bottom:1px solid #4c678344;color:#edf4fa}
#infoBody tbody tr:nth-child(even){background:#ffffff06}
#infoBody tr:last-child td{border-bottom:0}
#infoBody td:nth-child(2){color:#ffe3a2;font-weight:700}
@keyframes info-popup-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#infoDialog{animation:none}}
body{isolation:isolate;background:radial-gradient(ellipse at 50% 22%,#175b87 0%,#133b76 30%,#102a58 60%,#08162f 100%);background-attachment:fixed}
body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1}
body::before{background:linear-gradient(118deg,transparent 12%,#39d4e513 27%,transparent 39%),linear-gradient(67deg,transparent 38%,#598dff1a 53%,transparent 69%),repeating-linear-gradient(112deg,#ffffff02 0px,transparent 2px,transparent 7px);background-size:160% 130%;animation:royal-satin 24s ease-in-out infinite alternate}
body::after{background-image:radial-gradient(circle,#ffe0a0aa 0 .8px,transparent 1.8px),radial-gradient(circle,#d7b66d66 0 1px,transparent 2px);background-size:293px 271px,431px 367px;background-position:35px 20px,180px 150px;opacity:.2;animation:royal-dust 38s linear infinite;transition:opacity 1.2s}
.spin-focus body::after{opacity:.42}
header{background:linear-gradient(105deg,#0b2044ed,#123962ed,#0a1f40ed);border-bottom-color:#bca46866}
.betting{background:linear-gradient(145deg,#153c61ed,#0c2448ed);border-color:#6b9ab766;box-shadow:inset 0 1px 0 #badff01c,0 12px 32px #030e2526}
.stat-tile{background:linear-gradient(145deg,#244f75,#112d50);border-color:#6494ae66}
.stage .wheel-wrap{isolation:isolate}
.wheel-wrap::before,.wheel-wrap::after{content:"";position:absolute;inset:-20%;border-radius:50%;z-index:-1;pointer-events:none}
.wheel-wrap::before{background:radial-gradient(circle,#61f1ff55 0%,#21bbdf44 35%,#3182dd22 55%,transparent 72%);opacity:.55;transform:scale(.95);transition:opacity 1.2s,transform 1.2s}
.spin-focus .wheel-wrap::before{opacity:1;transform:scale(1.2)}
.wheel-wrap::after{opacity:0;background:radial-gradient(circle,transparent 30%,#ffdf8766 43%,#eebd3922 56%,transparent 72%)}
.result-focus .wheel-wrap::after{animation:royal-win-burst 1.8s ease-out both}
.spin-focus .betting{opacity:.82}
.spin-focus .table-statistics,.spin-focus .stage .right-panel{opacity:.72}
@keyframes royal-satin{from{background-position:0% 0%}to{background-position:100% 40%}}
@keyframes royal-dust{to{background-position:70px -251px,210px -217px}}
@keyframes royal-win-burst{0%{opacity:0;transform:scale(.6)}20%{opacity:1}100%{opacity:0;transform:scale(1.5)}}
@media(prefers-reduced-motion:reduce){body::before,body::after,.result-focus .wheel-wrap::after{animation:none}.wheel-wrap::before{transition:none}}
/* A non-interactive payout preview never intercepts chip placement. */
#potentialWin{position:fixed;z-index:60;pointer-events:none;width:max-content;max-width:calc(100vw - 16px);padding:12px 16px;border:1px solid #e8c878;border-radius:10px;background:linear-gradient(135deg,#1b466e,#0c2343);box-shadow:0 8px 24px #0007;color:#fff;text-align:center}
#potentialWin[hidden]{display:none}
#potentialWin strong{display:block;font-size:10px;letter-spacing:.8px;color:#f1d391}
#potentialWin b{display:block;font-size:27px;line-height:1.3;margin:3px 0;color:#fff1b9}
#potentialWin small{display:block;font-size:11px;color:#d4e7f5}
#potentialWin{display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:7px;box-shadow:0 4px 12px #0005}
#potentialWin strong{font-size:12px;letter-spacing:0;font-weight:500;text-transform:none;color:#e7edf5}
#potentialWin b{font-size:16px;line-height:1.2;margin:0}
#potentialWin small{display:none}
/* Distinct quarter accents and card-colour suit statistics. */
.quarter-stats .stat-tile{border-top:3px solid var(--stat-accent);background:linear-gradient(145deg,var(--stat-tint),#102744);box-shadow:inset 0 1px 0 #ffffff18}
.quarter-stats .stat-tile:nth-child(1),#layout .spot.quarter[data-quarter="1"]{--stat-accent:#43d9c0;--stat-tint:#175e60}
.quarter-stats .stat-tile:nth-child(2),#layout .spot.quarter[data-quarter="2"]{--stat-accent:#e8b85a;--stat-tint:#65502c}
.quarter-stats .stat-tile:nth-child(3),#layout .spot.quarter[data-quarter="3"]{--stat-accent:#bc98ff;--stat-tint:#4e397c}
.quarter-stats .stat-tile:nth-child(4),#layout .spot.quarter[data-quarter="4"]{--stat-accent:#58baff;--stat-tint:#215881}
.quarter-stats .stat-tile small{color:#f3eee2}
.suit-stats .stat-tile{background:var(--card-black-gloss);border-color:#657482;box-shadow:inset 0 1px 0 #ffffff30}
.suit-stats .stat-tile.red-suit{background:linear-gradient(145deg,#b93950,#741b32 55%,#3e172a);border-color:#da6476}
.suit-stats .red-suit small{color:#ffd8df}
.suit-stats .stat-tile.joker{background:linear-gradient(145deg,#18835d,#0c553f 55%,#09392f);border-color:#4fbd90}
.suit-stats .joker small{color:#b9ffe0}
/* Crisp casino-chip rims, consistent between the hover preview and placed bets. */
.spot .stake.chip-colored,.stake.bet-preview{border:3px dashed #fff0da;background:radial-gradient(circle at 35% 20%,#ffffff20,transparent 58%),var(--chip);box-shadow:inset 0 0 0 2px #0003,inset 0 0 0 3px #ffffff40;font-family:"Segoe UI",Arial,sans-serif;font-weight:800;line-height:1;letter-spacing:-.5px;text-shadow:none;font-variant-numeric:tabular-nums}
/* Dragged stack follows the pointer without intercepting drop targets. */
.spot{touch-action:none}
.spot:has(.stake){cursor:grab}
.spot.chip-drag-source{cursor:grabbing}
.chip-drag-source .stake{opacity:0}
.spot.chip-drop-target{outline:3px solid #ffe59a;outline-offset:2px;z-index:12}
.stake.drag-chip{position:fixed;z-index:100;right:auto;bottom:auto;transform:translate(-50%,-50%);pointer-events:none;border:3px dashed #fff0da;background:var(--chip);color:var(--chip-ink,#fff);box-shadow:0 5px 14px #0006,inset 0 0 0 2px #ffffff40;font-weight:800;line-height:1}

/* Fill the blue stage vertically; compensate for the canvas artwork's clear rim. */
.stage{--wheel-stage-size:375px}
.wheel-column{height:100%;align-self:stretch;align-items:center}
.stage .wheel-column .wheel-wrap{width:var(--wheel-stage-size);height:var(--wheel-stage-size);align-self:center;margin:0}
.stage .wheel-wrap canvas{width:100%;height:100%;max-width:none;transform:scale(1.075)}
@media(min-width:1500px){.stage{--wheel-stage-size:430px}}
@media(max-width:1050px){.stage{--wheel-stage-size:335px}}
@media(max-width:720px){.stage{--wheel-stage-size:320px}}
.fit-screen .stage{--wheel-stage-size:285px}
.spin-focus.fit-screen .stage .wheel-wrap{transform:scale(1.75)}

/* The whole visible chip/target circle accepts bets, not just its centre. */
.spot.split,.spot.corner{width:calc(100cqw / 30)!important;height:calc(100cqw / 30)!important;border-radius:50%}

/* Separate account figures, with the chip selector still centred on the table. */
.account-summary{width:100%;max-width:385px;min-width:0}
.account-summary-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.account-summary-heading small{font-size:9px;letter-spacing:1px;color:#a9c2d5}
.account-summary-heading button{padding:2px 7px;font-size:10px;color:var(--teal)}
.account-frames{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.account-frame{min-width:0;padding:7px 10px;border:1px solid #5287b3;border-radius:7px;background:linear-gradient(140deg,#224c75,#102e50);text-align:left}
.account-frame small{display:block;font-size:9px;letter-spacing:.8px;color:#d7e5ee;white-space:nowrap}
.account-frame strong{display:block;margin-top:3px;font-size:22px;font-weight:750;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums}
.account-frame em{font-size:9px;font-style:normal;color:#e8cf87}
.bet-frame{border-color:#b68b48;background:linear-gradient(140deg,#51432b,#2b2d39)}
.win-frame{border-color:#3d9c82;background:linear-gradient(140deg,#1c584e,#13343b)}
.win-frame strong{color:#9cf3d1}
.fit-screen .controls>.account-summary{width:100%;max-width:385px}
@media(max-width:1250px){html:not(.fit-screen) .account-frame{padding:6px}html:not(.fit-screen) .account-frame strong{font-size:18px}}

/* Roulette-style dolly stays on the winning card throughout the result phase. */
/* Foreshortened overhead view: the round foot is centred on the card label. */
.winning-dolly{position:absolute;z-index:14;width:2.8cqw;height:2.8cqw;min-width:26px;min-height:26px;transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(1px 2px 2px #0007)}
.winning-dolly::after{content:"";position:absolute;z-index:1;left:2%;right:2%;top:12%;bottom:8%;border:2px solid #ffe6a4;border-radius:50%;background:radial-gradient(ellipse at 42% 34%,#fffbd330 35%,#e3bb6970 59%,#8e5a1c 74%,#ffdf91 88%,#936225 100%);box-shadow:inset 0 1px 2px #fff9,0 2px 0 #65451e}
.winning-dolly::before{content:"";position:absolute;z-index:2;left:25%;right:25%;top:4%;bottom:28%;border:1px solid #ffe9b5;border-radius:50%;background:radial-gradient(ellipse at 34% 25%,#fffce3 0%,#f9dda0 19%,#c3984d 49%,#795022 76%,#eac578 100%);box-shadow:1px 3px 3px #50361877}
.winning-dolly span{position:absolute;z-index:3;top:13%;left:34%;width:21%;height:17%;background:#fffce9b3;border-radius:50%;transform:rotate(-25deg)}
.bet-announcement{position:relative}
/* Celebrate outside the betting grid so neither the panel nor sparks hide chips. */
.betting{position:relative}
.payout-popup{position:absolute;z-index:16;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:60px;display:grid;place-items:center;border:2px solid #f5d47c;border-radius:18px 6px 18px 6px;background:radial-gradient(ellipse at 50% 0%,#7042a0 0%,#30265d 45%,#101c3b 100%);box-shadow:0 6px 20px #080e2a70,inset 0 0 16px #e7b95722;pointer-events:none;isolation:isolate;animation:payout-arrive .35s ease-out}
.payout-copy{position:relative;z-index:2;text-align:center;display:grid;gap:2px;text-shadow:0 2px 5px #080d28}
.payout-copy>span{font-size:12px;font-weight:800;color:#fff0ba;letter-spacing:3px}
.payout-copy strong{font-size:34px;line-height:1.1;color:#ffdf79;font-weight:850;font-variant-numeric:tabular-nums}
.payout-copy small{font-size:8px;letter-spacing:2px;color:#dfdaf2}
.win-fireworks{position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:0}
.win-burst{position:absolute;left:16%;top:48%;width:0;height:0}
.win-burst.burst-1{left:84%;top:45%}.win-burst.burst-2{left:50%;top:50%}
.win-burst>i{position:absolute;width:5px;height:5px;border-radius:50%;background:#fff7ce;box-shadow:0 0 4px #fff,0 0 10px #ffd969,0 0 16px #ffae35;animation:payout-sparks 1.15s ease-out infinite;animation-delay:.05s}
.burst-1>i{animation-delay:.45s;background:#b9f8ff;box-shadow:0 0 4px #fff,0 0 10px #79dfff,0 0 16px #32bfff}
.burst-2>i{animation-delay:.8s;background:#f4bfff;box-shadow:0 0 4px #fff,0 0 10px #f49aff,0 0 16px #d890ff}
@keyframes payout-sparks{0%{opacity:0;transform:translate(0,0) scale(.3)}8%{opacity:1}55%{opacity:1;transform:translate(calc(var(--dx) * 1.2),calc(var(--dy) * .6)) scale(1)}100%{opacity:0;transform:translate(calc(var(--dx) * 1.65),calc(var(--dy) * .75)) scale(.4)}}
@keyframes payout-arrive{from{opacity:0;transform:translate(-50%,-50%) scale(.88)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){.payout-popup,.win-burst>i{animation:none}.win-burst>i{opacity:.6;transform:translate(var(--dx),var(--dy))}}

/* Match all three action buttons to the three account frames opposite them. */
.account-frame{height:56px}
.controls>.controls-end{align-self:end;width:100%}
.controls-end .actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:385px;max-width:100%;gap:7px}
.controls-end .actions button{width:100%;height:56px;min-width:0;min-height:56px;padding:7px;font-size:16px;border-radius:7px}

/* A fixed celebration slot below the wheel, clear of every betting position. */
.bet-announcement{width:480px;max-width:100%;height:68px}
.payout-copy{grid-template-columns:auto auto;column-gap:22px;align-items:center}
.payout-copy>span{font-size:14px;letter-spacing:2px}
.payout-copy strong{grid-column:2;grid-row:1 / 3;font-size:38px}
.payout-copy small{grid-column:1;grid-row:2}
.payout-active .bet-announcement>.phase,.payout-active .bet-announcement>#countdown{visibility:hidden}

/* Decorative wallpaper under the existing blue lighting and game panels. */
.casino-wallpaper{position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 22%,#175b8726 0%,#133b7633 30%,#102a5840 60%,#08162f59 100%),url('/assets/casino-wallpaper.png') center/100% 100% no-repeat;opacity:.64;transition:opacity 1.2s ease}
.spin-focus .casino-wallpaper{opacity:1}
@media(prefers-reduced-motion:reduce){.casino-wallpaper{transition:none}}

/* Racetrack shares the layout footprint, so fullscreen sizing stays unchanged. */
.racetrack{position:relative;width:100%;aspect-ratio:75/26;container-type:inline-size;background:radial-gradient(ellipse at center,#19416a80,transparent 70%)}
#raceSvg{display:block;width:100%;height:100%;overflow:visible}
.race-pocket{cursor:pointer;outline:none}.race-pocket path{fill:#101c28;stroke:#d3b971;stroke-width:1.5;transition:fill .15s,stroke .15s}
.race-pocket.red path{fill:#c91630}.race-pocket.wild path{fill:#087a50}
.race-face{fill:#fff5dc;font-size:24px;font-weight:800;pointer-events:none}
.race-preview path{stroke:#75ecff;stroke-width:4;filter:drop-shadow(0 0 4px #55d9ff)}
.race-anchor path,.race-pocket:focus-visible path{fill:#d4aa49;stroke:#fff1a2;stroke-width:4}.race-anchor .race-face{fill:#211a09}
.race-winner path{stroke:#ffe480;stroke-width:5}.race-pocket[aria-disabled=true]{cursor:default}
.race-stake{pointer-events:none}.race-stake circle{stroke:#fff1d5;stroke-width:3;stroke-dasharray:6 4}.race-stake text{font:bold 17px 'Segoe UI';fill:#fff}
.race-controls{position:absolute;left:19%;right:19%;top:24%;bottom:24%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:.65cqw;text-align:center;pointer-events:none}
.race-controls>small:first-child{color:#e5ca84;font-size:1.4cqw;letter-spacing:3px}.race-stepper{display:flex;gap:2cqw;align-items:center;pointer-events:auto}.race-stepper button{width:4cqw;height:4cqw;border-radius:50%;padding:0;font-size:2.8cqw;line-height:1;border-color:#c5ad72;background:linear-gradient(#286194,#0e2c53)}.race-stepper strong{font-size:3.7cqw;line-height:1;min-width:4cqw;color:#ffe2a0}
.race-controls>span{font-size:.8cqw;color:#a9c5db}.race-controls>b{font-size:1.6cqw;color:#ffe1a2}.race-controls p{margin:0;min-height:1em;font-size:1.1cqw;color:#fff;max-width:100%}.race-controls>small:last-child{font-size:.85cqw;color:#9ae9e1}.race-controls .race-warning{color:#ffb6a5!important}
#racetrackToggle{border-color:#bfaa71}#racetrackToggle.selected{background:#215d8d;color:#ffe9a7;box-shadow:inset 0 0 0 1px #e4c680}

/* Large miniature-track switch with its name inside the oval. */
#racetrackToggle,#racetrackToggle.selected{flex:0 0 174px;width:174px;height:57px;padding:0 18px;border:0;border-radius:30px;background:transparent url('/assets/racetrack-button.svg') center/100% 100% no-repeat;color:#fff0b3;font-size:16px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;box-shadow:0 3px 9px #00112c66;transition:filter .18s,box-shadow .18s}
#racetrackToggle:hover{filter:brightness(1.2);box-shadow:0 0 15px #efcb7c55}
#racetrackToggle.selected{box-shadow:0 0 0 2px #7cdeef,0 0 15px #48bbdf66}
#racetrackToggle:focus-visible{outline:3px solid #8deeff;outline-offset:4px}
.betting-heading .spot-modes{align-items:center}

/* View navigation stays interactive while wager controls remain locked. */
.spin-focus .betting .spot-modes{pointer-events:auto}

#racetrackToggle.selected{background-image:url('/assets/layout-button.svg');border-radius:7px}

.race-sector{pointer-events:none}.race-quarter-label{font:bold 22px 'Segoe UI';letter-spacing:2px;pointer-events:none}
#layout .spot.straight,#layout .spot.suit,#layout .spot.quarter,#layout .spot.red,#layout .spot.black{border-color:#d3b971}
#layout .spot.winner{border-color:rgba(255,223,117,.5)}

.race-controls{left:33%;right:33%;background:linear-gradient(135deg,#102e4ce8,#102846e8);border:1px solid #d3b97199;border-radius:14px;padding:8px}
.race-controls>small:first-child{font-size:1.15cqw;letter-spacing:1.5px}.race-controls>b{font-size:1.35cqw}.race-controls p{font-size:.85cqw}

#raceSelection .race-card-red{color:#ff5866} #raceSelection .race-card-black{color:#fff} #raceSelection .race-card-wild{color:#43dfa0}
.race-sector.race-quarter-bet{pointer-events:auto;cursor:pointer}.race-quarter-bet:hover,.race-quarter-bet:focus-visible{filter:brightness(1.18);outline:none}

#pokerCelebration{position:absolute;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);width: min(420px,95vw);min-height:180px;padding:35px 22px;display:flex;flex-direction:column;justify-content:center;gap:18px;text-align:center;border:2px solid #f5ce64;border-radius:18px;background:linear-gradient(135deg,#183b65f5,#07172cf5);box-shadow:0 0 35px #ffd15b77;color:#ffe495;pointer-events:none;overflow:visible}
#pokerCelebration strong{font-size:27px;position:relative;text-shadow:0 2px 7px #000}#pokerCelebration b{font-size:18px;position:relative;color:#fff1be}.poker-effects{position:absolute;inset:0;overflow:hidden;border-radius:16px}.poker-coin{position:absolute;left:var(--x);top:-28px;width:23px;height:23px;border-radius:50%;border:3px double #fff1ad;background:linear-gradient(120deg,#fff4b0,#e5a521,#ffe894);color:#9c6400;font-style:normal;line-height:17px;animation:pokerCoin 1.8s var(--delay) linear infinite}.poker-burst{position:absolute}.poker-burst i{position:absolute;width:6px;height:6px;background:#fff1a2;border-radius:50%;box-shadow:0 0 9px 3px #ffc42e;animation:pokerSpark 1.5s var(--delay) ease-out infinite}
@keyframes pokerCoin{from{transform:translateY(0) rotateY(0)}to{transform:translateY(250px) rotateY(540deg)}}@keyframes pokerSpark{0%{opacity:0;transform:rotate(var(--angle)) translateX(0)}15%{opacity:1}100%{opacity:0;transform:rotate(var(--angle)) translateX(85px)}}
@media(prefers-reduced-motion:reduce){.poker-coin,.poker-burst i{animation:none}.poker-coin{top:12px}}

/* Page-centred scoreboard-style Poker celebration, after the layout payout. */
#pokerCelebration{position:fixed;z-index:1000;width:min(620px,82vw,80vh);height:min(620px,82vw,80vh);min-height:0;padding:7%;gap:26px;background:linear-gradient(135deg,#342c1bf7,#0c121bfa);border:2px solid #e7c677;border-radius:24px;box-shadow:0 0 65px #e7c67766,0 24px 80px #0008;animation:pokerEntrance .45s ease-out;padding:30px}
#pokerCelebration small{position:relative;color:#ddbe76;font-size:clamp(14px,1.6vw,23px);font-weight:800}#pokerCelebration strong{font-size:clamp(26px,3.4vw,52px);line-height:1.15;color:#fff2cc}#pokerCelebration b{padding:18px 12px;border-radius:12px;background:linear-gradient(110deg,#f7df9f,#c69b48,#fff1bb);color:#171b20;font-size:clamp(22px,2.6vw,40px)}#pokerCelebration .poker-coin{width:30px;height:30px;line-height:24px;animation-name:pokerCoinLarge}#pokerCelebration .poker-burst i{width:8px;height:8px;box-shadow:0 0 12px 4px #ffc42e}
@keyframes pokerCoinLarge{from{transform:translateY(0) rotateY(0)}to{transform:translateY(680px) rotateY(720deg)}}@keyframes pokerEntrance{from{opacity:0;transform:translate(-50%,-50%) scale(.82)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@media(prefers-reduced-motion:reduce){#pokerCelebration{animation:none}}

#layout .spot.quarter{background:linear-gradient(145deg,var(--stat-tint),#102744);box-shadow:inset 0 3px 0 var(--stat-accent),inset 0 4px 0 #ffffff18}