/* European roulette: one focused table scene and quick, touch-friendly controls. */
.game-page:has(.game-scene-roulette) .page-head{max-width:1180px;margin:18px auto 14px;padding:0 2px 14px;border-bottom:1px solid #29363a}
.game-page:has(.game-scene-roulette) .breadcrumbs{max-width:1180px;margin:0 auto}
.game-page:has(.game-scene-roulette) .page-head h1{font-size:clamp(36px,5vw,58px);letter-spacing:-.055em}
.game-page:has(.game-scene-roulette) .split{max-width:1180px;margin:auto;grid-template-columns:minmax(0,1fr) 260px;align-items:start;gap:14px}
.game-page:has(.game-scene-roulette) .split>section.card{padding:14px;background:linear-gradient(145deg,#131b1c,#0b1012);border-color:#34413a}
.game-scene-roulette{min-height:clamp(340px,43vw,500px)!important;border:1px solid #53634d!important;border-radius:14px!important;background:radial-gradient(ellipse at 50% 48%,#376342 0,#1b4930 43%,#103022 70%,#091510 100%)!important;box-shadow:inset 0 0 70px #0006,inset 0 1px #ffffff15,0 20px 38px #0008!important}
.game-scene-roulette:before{inset:12% 10% 8%!important;border:1px solid #d9b96a55!important;background:radial-gradient(ellipse,#25603d 0 58%,#19452e 59% 72%,#d2ac5a 73% 74%,transparent 75%)!important;box-shadow:inset 0 0 36px #0005,0 24px 30px #0008!important}
.game-scene-roulette .roulette-wheel{width:min(340px,62vw)!important;border:13px solid #c7a253!important;background:repeating-conic-gradient(from -5deg,#a92e36 0deg 9.72deg,#14191a 9.72deg 19.44deg)!important;box-shadow:0 0 0 4px #ead18b,0 0 0 10px #3c3828,0 0 0 14px #b88c42,0 20px 30px #000c,0 42px 45px #0009!important;transform:rotateX(12deg) translateZ(30px)}
.game-scene-roulette .roulette-wheel:before{inset:7%!important;border:4px solid #edd48a!important;box-shadow:inset 0 0 0 8px #1c2b20,inset 0 0 0 12px #d8b55e!important}
.game-scene-roulette .roulette-wheel:after{inset:35%!important;border:9px solid #e2c16e!important;background:radial-gradient(circle at 34% 27%,#fff0bd,#b58b42 48%,#503c20 78%,#17130e)!important;box-shadow:inset 0 0 0 8px #17241a,0 0 0 4px #111,0 9px 14px #000c!important}
.game-scene-roulette .roulette-wheel .wheel-pocket{width:17px;height:23px;border:1px solid #d7b766aa;border-radius:3px;font-size:9px}
.game-scene-roulette .roulette-ball-orbit i{transform:translateY(-130px);width:11px;height:11px;box-shadow:0 0 13px #fff,0 2px 4px #000b}
.game-scene-roulette .game-scene-label{left:16px;bottom:13px;padding:7px 10px;border:1px solid #e2cc8555;border-radius:5px;background:#08140dbb;color:#eadba7;font-size:9px}
.game-page:has(.game-scene-roulette) .split>section.card>form{grid-template-columns:170px minmax(0,1fr);gap:9px 12px;padding:12px;border-color:#303d38;background:linear-gradient(120deg,#11191a,#0a1011)}
.game-page:has(.game-scene-roulette) .roulette-choice-field{grid-column:1/-1}
.game-page:has(.game-scene-roulette) .roulette-choices{display:flex;gap:7px;flex-wrap:wrap}
.game-page:has(.game-scene-roulette) .roulette-choices button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:42px;padding:7px 13px;border:1px solid #3a4742;border-radius:7px;background:#121a19;color:#e5e9e3;font-size:14px;font-weight:750;transition:background .16s,border-color .16s,transform .16s}
.game-page:has(.game-scene-roulette) .roulette-choices button:hover{transform:translateY(-1px);border-color:#c5a756}
.game-page:has(.game-scene-roulette) .roulette-choices button[aria-checked=true]{border-color:#d5b85d;background:linear-gradient(145deg,#2a382a,#18231b);box-shadow:inset 0 0 0 1px #d5b85d55,0 0 18px #b8f54212;color:#fff6d5}
.roulette-chip{width:15px;height:15px;border:2px dashed #f4e5c7;border-radius:50%;box-shadow:inset 0 0 0 2px #0005}
.roulette-chip.red{background:#b72d36}.roulette-chip.black{background:#101416;border-color:#a9b0ac}
.roulette-native-select{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important}
.game-page:has(.game-scene-roulette) .roulette-number-field{grid-column:1/-1;grid-template-columns:120px 120px;align-items:center}
.game-page:has(.game-scene-roulette) #button{grid-column:1/-1;width:100%;min-height:48px;font-size:16px;font-weight:800;letter-spacing:.01em;box-shadow:0 5px 0 #6d9128,0 10px 24px #b8f54218}
.game-page:has(.game-scene-roulette) .quick-bets{display:flex;align-items:center;gap:6px}
.game-page:has(.game-scene-roulette) .quick-bets span{font-size:12px;color:#c4cec6}
.game-page:has(.game-scene-roulette) .quick-bets button{min-height:34px;padding:5px 9px;font-size:12px}
.game-page:has(.game-scene-roulette) .split>aside.card:not(:has(canvas)){display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:16px;border:1px solid #35423a;background:linear-gradient(150deg,#151c19,#0c1110)}
.game-page:has(.game-scene-roulette) .split>aside.card h2{font-size:23px}
.game-page:has(.game-scene-roulette) .split>aside.card dl{display:grid;grid-template-columns:1fr;gap:5px}
.game-page:has(.game-scene-roulette) .split>aside.card dl dt,.game-page:has(.game-scene-roulette) .split>aside.card dl dd{padding:8px 9px;border:0;border-bottom:1px solid #26312c;border-radius:0;background:transparent}
.game-page:has(.game-scene-roulette) .split>aside.card dl dd{text-align:right;color:#d7c17d}
.game-page:has(.game-scene-roulette) .split>aside.card .button{width:100%;justify-content:center}
.game-page:has(.game-scene-roulette) #result{border-color:#596246;background:linear-gradient(145deg,#172219,#0b1110)}
@media(max-width:850px){.game-page:has(.game-scene-roulette) .split{grid-template-columns:1fr}.game-page:has(.game-scene-roulette) .split>aside.card:not(:has(canvas)){display:grid;grid-template-columns:1fr 1fr;align-items:center}.game-page:has(.game-scene-roulette) .split>aside.card .eyebrow,.game-page:has(.game-scene-roulette) .split>aside.card h2,.game-page:has(.game-scene-roulette) .split>aside.card dl,.game-page:has(.game-scene-roulette) .split>aside.card p{grid-column:1/-1}.game-page:has(.game-scene-roulette) .split>aside.card .button{grid-column:1/-1}}
@media(max-width:600px){.game-scene-roulette{min-height:300px!important}.game-scene-roulette .roulette-wheel{width:min(260px,70vw)!important}.game-scene-roulette .roulette-wheel .wheel-pocket{width:13px;height:17px;font-size:7px}.game-scene-roulette .roulette-ball-orbit i{transform:translateY(-101px)}.game-page:has(.game-scene-roulette) .split>section.card>form{grid-template-columns:1fr;gap:8px}.game-page:has(.game-scene-roulette) .roulette-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.game-page:has(.game-scene-roulette) .roulette-choices button{padding:6px 5px;font-size:12px}.game-page:has(.game-scene-roulette) .roulette-choice-field,.game-page:has(.game-scene-roulette) .roulette-number-field,.game-page:has(.game-scene-roulette) #button{grid-column:1}.game-page:has(.game-scene-roulette) .quick-bets{justify-content:flex-start}.game-page:has(.game-scene-roulette) .split>aside.card:not(:has(canvas)){display:flex}}
@media(prefers-reduced-motion:reduce){.game-page:has(.game-scene-roulette) .roulette-choices button{transition:none}}

.game-page:has(.game-scene-roulette) .roulette-number-field[hidden]{display:none!important}

/* A real European pocket wheel and an interactive felt betting layout. */
.game-scene-roulette .roulette-wheel{border:0!important;background:transparent url('/assets/roulette-wheel.svg') center/contain no-repeat!important;box-shadow:0 22px 28px #000c,0 42px 48px #0008!important}
.game-scene-roulette .roulette-wheel:before,.game-scene-roulette .roulette-wheel:after{content:none!important;display:none!important}
.game-scene-roulette .roulette-wheel .wheel-pocket{display:none!important}
.roulette-bet-layout{display:grid;grid-template-columns:52px minmax(0,1fr);gap:7px;align-items:stretch;padding:12px;border:1px solid #b6944d;border-radius:10px;background:linear-gradient(145deg,#163f2b,#0b2418);box-shadow:inset 0 1px #ffffff1a,0 12px 22px #0007}
.roulette-zero,.roulette-number-grid button{min-width:0;min-height:44px;border:1px solid #d3b467;border-radius:5px;color:#fff4d1;font:800 14px/1 ui-monospace,monospace;text-shadow:0 1px 2px #000;box-shadow:inset 0 1px #ffffff26,0 2px 3px #0008;transition:filter .14s,transform .14s,box-shadow .14s}
.roulette-zero{background:linear-gradient(145deg,#26804d,#10502f);font-size:18px}
.roulette-number-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(3,44px);grid-auto-flow:row;gap:4px}.roulette-number-grid button{grid-column:var(--col);grid-row:var(--row)}
.roulette-number-grid button{background:linear-gradient(145deg,#222627,#111516)}
.roulette-number-grid button.red{background:linear-gradient(145deg,#c83d44,#791d26)}
.roulette-number-grid button.black{background:linear-gradient(145deg,#303536,#101314)}
.roulette-number-grid button:hover,.roulette-zero:hover{filter:brightness(1.28);transform:translateY(-1px)}
.roulette-number-grid button.is-selected,.roulette-zero.is-selected{outline:2px solid #fff1ac;outline-offset:1px;box-shadow:0 0 15px #f4d67a88}
.roulette-number-grid button.is-winner,.roulette-zero.is-winner{outline:3px solid #c8fa67;outline-offset:1px;filter:brightness(1.4);box-shadow:0 0 20px #b8f542bb}
.roulette-table-help{margin:-4px 2px 0!important;color:#c1cbbb;font-size:12px}
@media(max-width:600px){.roulette-bet-layout{grid-template-columns:42px minmax(0,1fr);gap:5px;padding:8px}.roulette-number-grid{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,42px)}.roulette-number-grid button{grid-column:auto;grid-row:auto}.roulette-zero,.roulette-number-grid button{font-size:12px}.game-scene-roulette .roulette-wheel{width:min(260px,70vw)!important}}

/* Keep the casino flow in reading order: wheel, table, then bet controls. */
.game-page:has(.game-scene-roulette) .split>section.card>.notice{order:1}
.game-page:has(.game-scene-roulette) .split>section.card>.game-scene{order:2}
.game-page:has(.game-scene-roulette) .split>section.card>.roulette-bet-layout{order:3}
.game-page:has(.game-scene-roulette) .split>section.card>.roulette-table-help{order:4}
.game-page:has(.game-scene-roulette) .split>section.card>form{order:5}
.game-page:has(.game-scene-roulette) .split>section.card>#result{order:6}
.roulette-number-grid button[aria-checked=true],.roulette-zero[aria-checked=true]{outline:2px solid #fff1ac;outline-offset:1px;box-shadow:0 0 15px #f4d67a88}

/* Wheel spin follows the pending server round and settles before its number is shown. */
.game-scene-roulette.is-spinning .roulette-wheel{animation:roulette-wheel-spin 2.9s cubic-bezier(.12,.58,.12,1) both}
.game-scene-roulette.is-spinning .roulette-ball-orbit{animation:none!important}
@keyframes roulette-wheel-spin{0%{transform:rotateX(12deg) translateZ(30px) rotate(0)}74%{transform:rotateX(12deg) translateZ(30px) rotate(1440deg)}100%{transform:rotateX(12deg) translateZ(30px) rotate(1980deg)}}

/* Keep the ball clearly independent from the rotating wheel. */
.game-scene-roulette .roulette-ball-orbit{z-index:6}
.game-scene-roulette .roulette-ball-orbit i{width:15px;height:15px;border:2px solid #fff;background:radial-gradient(circle at 32% 28%,#fff 0 22%,#f7fff8 35%,#b9c6bf 68%,#59635d 100%);transform:translateY(-154px);box-shadow:0 0 0 2px #17231b,0 0 17px 6px #fff,0 3px 7px #000e;will-change:transform}
@media(max-width:600px){.game-scene-roulette .roulette-ball-orbit i{width:13px;height:13px;transform:translateY(-119px)}}
@keyframes roulette-result-land{0%{opacity:0;transform:translateY(12px) scale(.9)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.game-scene-roulette.is-spinning .roulette-wheel,.game-scene-roulette.is-spinning .roulette-ball-orbit,.game-page:has(.game-scene-roulette) #winning{animation:none}}

.game-result-land{animation:game-result-land .38s cubic-bezier(.18,.72,.25,1.1) both}
@keyframes game-result-land{0%{opacity:0;transform:translateY(9px) scale(.985)}100%{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.game-result-land{animation:none}}

/* Itemized single-spin roulette ticket. */
.roulette-ticket-form .roulette-ticket{grid-column:1/-1;margin:0;padding:12px;border:1px solid #39463c;border-radius:9px;background:linear-gradient(145deg,#121a17,#0b100e)}
.roulette-ticket-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.roulette-ticket-head h2{margin:0;font-size:18px}
.roulette-ticket-head button{min-height:34px;padding:5px 10px;font-size:12px}
.roulette-ticket-items{display:grid;gap:6px;margin:10px 0;padding:0;list-style:none}
.ticket-item{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:8px 10px;border:1px solid #2c3931;border-radius:7px;background:#101713}
.ticket-item strong{font-variant-numeric:tabular-nums}
.ticket-remove{min-height:32px;padding:4px 9px;border:1px solid #46534a;border-radius:6px;background:#1a211d;color:#dfe8dc}
.ticket-empty{padding:10px;color:#aebbb0}
.roulette-ticket-total{display:flex;justify-content:space-between;gap:12px;padding-top:10px;border-top:1px solid #354138}
.roulette-ticket-total strong{color:#c8fa67;font-variant-numeric:tabular-nums}
.roulette-ticket-form .roulette-add{grid-column:1/-1;min-height:42px}
.roulette-ticket-form #button:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.roulette-ticket-form #status{grid-column:1/-1}
@media(max-width:600px){.roulette-ticket-form .roulette-ticket{grid-column:1}.ticket-item{gap:7px;padding:7px}.ticket-remove{font-size:12px}}