/* Scope to this game's panel or a roulette dialog carrying data-game="roulette". */
[data-game="roulette"] .roulette-wheel{display:block;width:min(100%,218px);height:190px;margin:0 auto;overflow:visible;filter:drop-shadow(0 3px 6px #0004)}
[data-game="roulette"] .roulette-rim{fill:#71533c;stroke:#c7a56d;stroke-width:2}
[data-game="roulette"] .roulette-rim-inner{fill:#2b292c;stroke:#e4cba0;stroke-width:1}
[data-game="roulette"] .roulette-pocket path{stroke:#d4ba83;stroke-width:.55}
[data-game="roulette"] .roulette-pocket--red path{fill:#a33d50}
[data-game="roulette"] .roulette-pocket--black path{fill:#252b3e}
[data-game="roulette"] .roulette-pocket--green path{fill:#246d5e}
[data-game="roulette"] .roulette-pocket text{fill:#fff7e9;font-size:10.6px;font-weight:800;font-family:ui-sans-serif,system-ui,sans-serif;pointer-events:none}
[data-game="roulette"] .roulette-pocket.is-selected path{stroke:#fff3b6;stroke-width:2.2}
[data-game="roulette"] .roulette-felt{fill:#153f3a;stroke:#b69b67;stroke-width:1.5}
[data-game="roulette"] .roulette-center-ring{fill:none;stroke:#bcaa7544;stroke-width:1;stroke-dasharray:2 6}
[data-game="roulette"] .roulette-spindle{fill:#b8a06d;stroke:#e0c793;stroke-width:1}
[data-game="roulette"] .roulette-spindle-cap{fill:#dfc28a;stroke:#6b543c;stroke-width:2}
[data-game="roulette"] .roulette-wheel-caption{fill:#d8caa9;font-size:8px;font-weight:700;letter-spacing:1.5px}
[data-game="roulette"] .roulette-pointer{fill:#ffedaf;stroke:#8e774a;stroke-width:1}
[data-game="roulette"] .roulette-wheel.is-spinning .roulette-rotor{transform-origin:128px 128px;animation:roulette-turn 850ms cubic-bezier(.12,.7,.2,1) both}
[data-game="roulette"] .roulette-result{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 14px;min-height:48px;text-align:center}
[data-game="roulette"] .roulette-result-number{display:grid;place-items:center;min-width:56px;min-height:48px;padding:4px 12px;border-radius:12px;border:1px solid #d9bc7c;background:#253c3b;font-size:30px;font-weight:850;color:#fff3cf}
[data-game="roulette"] .roulette-result-detail{font-size:12px;color:#cdd4df;line-height:1.5}
[data-game="roulette"] .roulette-picker-dialog,[data-game="roulette"].roulette-picker-dialog{max-width:510px;width:calc(100% - 24px);max-height:calc(100dvh - 28px);padding:20px;border-radius:20px;background:#1c2238;color:#f2f5ff;border:1px solid #59617e;overflow-y:auto;overscroll-behavior:contain}
[data-game="roulette"] .roulette-picker-dialog::backdrop,[data-game="roulette"].roulette-picker-dialog::backdrop{background:#090d1cbf;backdrop-filter:blur(3px)}
[data-game="roulette"] .roulette-picker{width:100%}
[data-game="roulette"] .roulette-picker-hint{font-size:12px;line-height:1.6;color:#c3cbde;margin:0 0 14px}
[data-game="roulette"] .roulette-outside-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-bottom:12px}
[data-game="roulette"] .roulette-number-grid{display:grid;grid-template-columns:repeat(6,minmax(48px,1fr));gap:6px}
[data-game="roulette"] .roulette-choice{min-width:48px;min-height:48px;border-radius:9px;border:1px solid #737d98;background:#30394f;color:#fff7ea;padding:7px 4px;font:750 16px/1.2 ui-sans-serif,system-ui,sans-serif;cursor:pointer;touch-action:manipulation}
[data-game="roulette"] .roulette-choice--red{background:#88394b;border-color:#d58798}
[data-game="roulette"] .roulette-choice--black{background:#222a3c;border-color:#8490aa}
[data-game="roulette"] .roulette-choice--green{background:#215b50;border-color:#73b8a5}
[data-game="roulette"] .roulette-choice:focus-visible{outline:3px solid #f6dfa1;outline-offset:2px}
[data-game="roulette"] .roulette-choice[aria-pressed="true"]{box-shadow:inset 0 0 0 3px #fff0a7;border-color:#fff0a7}
[data-game="roulette"] .roulette-choice:disabled{opacity:.45;cursor:default}
@keyframes roulette-turn{from{transform:rotate(0deg)}to{transform:rotate(var(--target-angle))}}
@media(max-width:390px){[data-game="roulette"] .roulette-number-grid{grid-template-columns:repeat(5,minmax(48px,1fr))}[data-game="roulette"] .roulette-picker-dialog,[data-game="roulette"].roulette-picker-dialog{padding:14px}}
@media(max-width:310px){[data-game="roulette"] .roulette-number-grid{grid-template-columns:repeat(4,minmax(48px,1fr))}}
@media(prefers-reduced-motion:reduce){[data-game="roulette"] .roulette-wheel.is-spinning .roulette-rotor{animation:none}}

[data-game="roulette"] #rouletteChoiceControls{grid-area:choice;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:0 8px}
[data-game="roulette"] #rouletteChoiceLabel{font-size:13px;font-weight:700;color:#eee2bf}
[data-game="roulette"] #rouletteChoose{min-height:48px;white-space:nowrap}
/* Preserve the same result/action station before and after every spin. */
body[data-game-open="true"] #gameView[data-game="roulette"] .casino-table{grid-template-areas:"notice" "wallet" "board" "result" "choice" "controls" "message" "returns";grid-template-columns:minmax(0,1fr);background:linear-gradient(145deg,#192f2b,#17282a);border-color:#968056}
body[data-game-open="true"] #gameView[data-game="roulette"] #gameDisplay{height:190px;min-height:190px;max-height:190px;display:block;padding:0;overflow:visible}
#gameView[data-game="roulette"] #roundResult{display:flex;flex-direction:column;justify-content:center;border:1px solid #887d65;background:#253336}
#gameView[data-game="roulette"] #roundResult[data-outcome="win"]{border-color:#e6ce85;background:radial-gradient(ellipse at top,#60552870,transparent 80%),#1b3c31;color:#ffebad;box-shadow:inset 0 0 0 2px #e4c57922}
#gameView[data-game="roulette"] #roundResult[data-outcome="loss"]{background:#2b2d34;color:#e7e6eb}
#gameView[data-game="roulette"] .roulette-result-detail strong{font-size:19px;color:#fff4d4}
#gameView[data-game="roulette"] #roundResult .result-net{font-size:29px;font-weight:850;margin:2px 0}
.roulette-picker-dialog{margin:auto}
@media(min-width:900px){#homeView .arcade-games{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* Basket draft controls: the dialog remains open while placing multiple chips. */
[data-game="roulette"] .roulette-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:58px}
[data-game="roulette"] .roulette-choice-label{line-height:1.1}
[data-game="roulette"] .roulette-amount{display:block;max-width:100%;font-size:10px;line-height:1.25;font-weight:650;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;color:#f5e6bd}
[data-game="roulette"] .roulette-choice[aria-pressed="false"] .roulette-amount{opacity:.6}
[data-game="roulette"] .roulette-chip-controls{position:sticky;top:-14px;z-index:2;padding:10px 0;background:#1c2238;border-bottom:1px solid #59617e;margin-bottom:10px}
[data-game="roulette"] #rouletteChips{display:flex;gap:7px;flex-wrap:wrap;margin:8px 0}
[data-game="roulette"] #rouletteChips button{min-width:48px;min-height:48px;padding:8px 11px;border-radius:24px;border:1px solid #8199aa;background:#25374b;color:#e7f5ff;font-size:13px;font-weight:750;touch-action:manipulation}
[data-game="roulette"] #rouletteChips button[aria-pressed="true"]{background:#b0e6d5;color:#1b3c37;border-color:#d4fff0}
[data-game="roulette"] .roulette-custom-chip{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
[data-game="roulette"] #rouletteCustomChip{min-width:0;max-width:180px;flex:1;min-height:48px;padding:9px 12px;border-radius:9px;border:1px solid #697a94;background:#111c2f;color:#fff;font-size:16px;font-variant-numeric:tabular-nums}
[data-game="roulette"] #rouletteSetChip,[data-game="roulette"] #rouletteUndo,[data-game="roulette"] #rouletteClear{min-height:48px;padding:8px 12px;border-radius:10px;border:1px solid #697a94;background:#303a50;color:#f4f6ff;font-size:12px;touch-action:manipulation}
[data-game="roulette"] #rouletteDraftSummary{font-size:12px;line-height:1.6;color:#e2efd9;padding:9px 0;min-height:36px;font-variant-numeric:tabular-nums}
[data-game="roulette"] .roulette-draft-actions{display:flex;gap:8px;flex-wrap:wrap}
[data-game="roulette"] #rouletteChips button:focus-visible,[data-game="roulette"] #rouletteCustomChip:focus-visible,[data-game="roulette"] #rouletteSetChip:focus-visible,[data-game="roulette"] #rouletteUndo:focus-visible,[data-game="roulette"] #rouletteClear:focus-visible{outline:3px solid #f6dfa1;outline-offset:2px}

[data-game="roulette"] .roulette-ball{fill:#fffdf1;stroke:#574d41;stroke-width:1.2;filter:drop-shadow(0 1px 1px #0008)}
[data-game="roulette"] .roulette-ball-orbit{transform-origin:128px 128px}
[data-game="roulette"] .roulette-wheel.is-spinning .roulette-ball-orbit{animation:roulette-ball-turn 850ms cubic-bezier(.12,.7,.2,1) both}
@keyframes roulette-ball-turn{from{transform:rotate(0deg)}to{transform:rotate(1440deg)}}
[data-game="roulette"] .roulette-mini{width:100%;max-width:440px;margin:0 auto;display:grid;gap:3px;font-variant-numeric:tabular-nums}
[data-game="roulette"] .roulette-mini-numbers{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:2px}
[data-game="roulette"] .roulette-mini-outside{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}
[data-game="roulette"] .roulette-mini-cell{min-width:0;height:23px;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #48566d;border-radius:3px;background:#273449;color:#fff6e6;font-size:9px;line-height:1.05;position:relative}
[data-game="roulette"] .roulette-mini-cell small{max-width:100%;font-size:6px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e5d6b2}
[data-game="roulette"] .roulette-mini-cell.roulette-choice--red{background:#753444}
[data-game="roulette"] .roulette-mini-cell.roulette-choice--black{background:#202b3d}
[data-game="roulette"] .roulette-mini-cell.roulette-choice--green{background:#215b50}
[data-game="roulette"] .roulette-mini-cell.has-chips{border-color:#a8cdbd}
[data-game="roulette"] .roulette-mini-cell.possible-win{border-color:#f4d986;background:#635c35}
[data-game="roulette"] .roulette-mini-cell.placed-win{border:2px solid #fcf0a7;background:#436d4d;color:#fff;box-shadow:0 0 4px #f7e6a54d;font-weight:900}
@media(prefers-reduced-motion:reduce){[data-game="roulette"] .roulette-wheel.is-spinning .roulette-ball-orbit{animation:none}}
#rouletteMiniButton{display:none}
body[data-game-open="true"] #gameView[data-game="roulette"] .casino-table{grid-template-areas:"notice" "wallet" "board" "result" "mini" "choice" "controls" "message" "returns"}
#gameView[data-game="roulette"] #rouletteMiniButton{display:block;grid-area:mini;width:100%;padding:4px 6px;min-width:0;border:1px solid #8f8062;border-radius:7px;background:#10382f;color:#ede8d9;text-align:center;cursor:pointer}
#gameView[data-game="roulette"] #rouletteMiniButton:disabled{opacity:1;cursor:default}
#rouletteMiniCaption{display:block;font-size:10px;min-height:14px;margin-bottom:2px}
#gameView[data-game="roulette"] #betLabel,#gameView[data-game="roulette"] #bet,#gameView[data-game="roulette"] #betQuick{display:none}
body[data-game-open="true"] #gameView[data-game="roulette"] #betArea{height:92px;min-height:92px;grid-template-columns:1fr;grid-template-rows:28px 48px;gap:4px;padding:4px}
#gameView[data-game="roulette"] #stakeInfo{grid-row:1;grid-column:1;min-height:24px}
#gameView[data-game="roulette"] #playCasino{grid-row:2;grid-column:1;font-size:13px}
body[data-game-open="true"] #gameView[data-game="roulette"] #gameDisplay{height:168px;min-height:168px;max-height:168px}
#gameView[data-game="roulette"] .roulette-wheel{height:168px}
body[data-game-open="true"] #gameView[data-game="roulette"] #roundResult{height:100px;min-height:100px;max-height:100px}
#gameView:not([data-game="roulette"]) #rouletteMiniButton{display:none!important}
[data-game="roulette"] #rouletteMiniButton{display:block;width:100%;min-height:48px;padding:5px 6px;border:1px solid #5a756b;border-radius:10px;background:#17362f;color:#f3eddb;touch-action:manipulation}
[data-game="roulette"] #rouletteMiniCaption{display:block;font-size:10px;line-height:1.4;text-align:left;margin-bottom:3px}
#homeView .card-art{display:flex;align-items:center;justify-content:center;overflow:hidden;line-height:1}
#homeView .home-game-icon{display:block;width:120px;height:72px;max-width:100%;flex:none}
[data-game="roulette"] #rouletteLastBets{margin:8px 0;font-size:12px}
[data-game="roulette"] #rouletteLastBets summary{min-height:48px;display:flex;align-items:center;cursor:pointer}
/* Read-only occupied cells show a small cream chip; full amount remains in aria-label. */
[data-game="roulette"] .roulette-mini-cell.has-chips small{display:inline-flex;align-items:center;justify-content:center;min-width:11px;min-height:10px;max-width:calc(100% - 2px);padding:0 2px;border-radius:99px;border:1px solid #b89d69;background:#f3e5bc;color:#3e372b;font-size:6px;font-weight:850;line-height:9px;box-sizing:border-box}
/* Inline placement replaces the wheel, never a tiny boundary hitbox or modal. */
body[data-game-open="true"] #gameView[data-game="roulette"][data-placing="true"] .casino-table{grid-template-areas:"notice" "wallet" "board";grid-template-columns:minmax(0,1fr)}
#gameView[data-game="roulette"][data-placing="true"] #gameDisplay,#gameView[data-game="roulette"][data-placing="true"] #roundResult,#gameView[data-game="roulette"][data-placing="true"] #rouletteMiniButton,#gameView[data-game="roulette"][data-placing="true"] #rouletteChoiceControls,#gameView[data-game="roulette"][data-placing="true"] #betArea,#gameView[data-game="roulette"][data-placing="true"] #gameMessage{display:none!important}
#gameView[data-game="roulette"] .roulette-placement-panel{grid-area:board;position:relative;inset:auto;width:100%;max-width:none;margin:0;padding:8px;border-radius:8px;max-height:none;height:calc(100dvh - 155px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:300px;overflow:auto;overscroll-behavior:contain}
#gameView[data-game="roulette"] .roulette-placement-panel>.help-heading{position:sticky;top:-8px;background:#1c2238;z-index:4;padding-bottom:5px;margin-bottom:0}
#gameView[data-game="roulette"] .roulette-placement-panel h2{font-size:17px}
#gameView[data-game="roulette"] .roulette-placement-panel .roulette-chip-controls{top:45px;padding:5px 0}
#gameView[data-game="roulette"] .roulette-chip-controls>p:first-child,#gameView[data-game="roulette"] .roulette-chip-controls>p:last-child{font-size:10px;line-height:1.3}
#gameView[data-game="roulette"] .roulette-bet-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:5px 0}
#gameView[data-game="roulette"] .roulette-bet-modes button{padding:5px;font-size:11px;min-height:48px}
#gameView[data-game="roulette"] .roulette-bet-modes button[aria-pressed="true"]{border-color:#f0d88c;background:#645537;color:#fff5d8}
#gameView[data-game="roulette"] #rouletteCoveragePreview{font-size:11px;min-height:30px;line-height:1.3;color:#ffedba}
#gameView[data-game="roulette"] .roulette-custom-details summary{min-height:32px;font-size:11px;cursor:pointer}
#gameView[data-game="roulette"] .roulette-placement-panel #rouletteDraftSummary{padding:4px 0;min-height:25px;font-size:11px}
#gameView[data-game="roulette"] .roulette-placement-panel #rouletteChips{margin:4px 0;gap:5px}
#gameView[data-game="roulette"] .roulette-placement-panel #rouletteChips button{flex:1;min-width:40px;padding:5px;min-height:48px}
@media(max-height:700px){#gameView[data-game="roulette"] .roulette-placement-panel .roulette-chip-controls{position:static}#gameView[data-game="roulette"] .roulette-placement-panel>.help-heading{position:sticky}}
/* Real 3-column numbered table and accessible inside-choice assistance. */
[data-game="roulette"] .roulette-zero-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-bottom:6px}
[data-game="roulette"] .roulette-number-grid.roulette-table-grid{display:grid;grid-template-columns:repeat(3,minmax(48px,1fr));gap:6px;margin-bottom:12px}
[data-game="roulette"] .roulette-focus-range{font-size:12px;line-height:1.5;color:#ded4ff;padding:8px 10px;background:#2b3048;border:1px solid #565b7b;border-radius:8px;margin:0 0 10px;overflow-wrap:anywhere}
[data-game="roulette"] .roulette-inside-explainer{font-size:12px;color:#d1d9e9;line-height:1.6;margin:0 0 10px}
[data-game="roulette"] .roulette-inside-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
[data-game="roulette"] .roulette-inside-choice{min-height:78px;background:#253b3d;border-color:#6f9d8f;gap:7px}
[data-game="roulette"] .roulette-inside-choice .roulette-choice-label{font-size:12px;line-height:1.2;overflow-wrap:anywhere}
[data-game="roulette"] .roulette-covered-digits{display:flex;justify-content:center;gap:3px;flex-wrap:wrap}
[data-game="roulette"] .roulette-digit{display:inline-flex;align-items:center;justify-content:center;min-width:23px;min-height:23px;padding:2px;border:1px solid #c6be9e;border-radius:4px;color:#fff8e9;font-size:11px;line-height:1}
[data-game="roulette"] .roulette-digit.roulette-choice--red{background:#88394b}
[data-game="roulette"] .roulette-digit.roulette-choice--black{background:#222a3c}
[data-game="roulette"] .roulette-choice.is-focus{outline:3px solid #e3c0ff;outline-offset:1px}
[data-game="roulette"] .roulette-choice.is-covered{box-shadow:inset 0 0 0 3px #c6abff}
[data-game="roulette"] .roulette-inside-marker{font-style:normal;font-size:8px;color:#dcc5ff;margin-left:1px;line-height:1}
[data-game="roulette"] .roulette-mini-cell.inside-covered{border-bottom-color:#ccb1f1}
[data-game="roulette"] .roulette-mini-inside-summary{display:flex;gap:3px;flex-wrap:wrap;max-height:47px;overflow-y:auto;text-align:left}
[data-game="roulette"] .roulette-mini-inside-bet{font-size:8px;line-height:1.35;border:1px solid #7f739b;padding:2px 4px;border-radius:5px;background:#302d46;color:#e6ddfa}
[data-game="roulette"] .roulette-mini-inside-bet.placed-win{background:#426547;border-color:#f1dda1;color:#fff3c9;font-weight:750}
#gameView[data-game="roulette"] .roulette-custom-details summary{min-height:48px;display:flex;align-items:center}
/* Keep only the short title row sticky: chip settings must never cover focused bets. */
#gameView[data-game="roulette"] .roulette-placement-panel .roulette-chip-controls{position:static;top:auto;z-index:auto}
#gameView[data-game="roulette"] .roulette-placement-panel{scroll-padding-top:64px;scroll-padding-bottom:12px}
#gameView[data-game="roulette"] .roulette-placement-panel .roulette-choice{scroll-margin-top:64px;scroll-margin-bottom:12px}
/* Real spatial placement: shared borders and intersections are the tap targets. */
#gameView[data-game="roulette"] .roulette-spatial-board{position:relative;display:block;width:100%;margin:6px 0 10px;touch-action:pan-y pinch-zoom;isolation:isolate;border:0;gap:0}
#gameView[data-game="roulette"] .roulette-spatial-cell{height:50px;min-height:50px;min-width:0;margin:0;padding:0;border:1px solid #dfd1ab;border-radius:0;background:#263445;color:#fff7e5;font-size:19px;font-weight:800;touch-action:pan-y pinch-zoom}
#gameView[data-game="roulette"] .roulette-spatial-cell.roulette-choice--red{background:#943b4c}
#gameView[data-game="roulette"] .roulette-spatial-cell.roulette-choice--black{background:#23303d}
#gameView[data-game="roulette"] .roulette-spatial-cell.preview-covered,#gameView[data-game="roulette"] .roulette-spatial-cell.is-covered{box-shadow:inset 0 0 0 4px #f6df91;background:#5e7049}
#gameView[data-game="roulette"] .roulette-spatial-cell:focus-visible{outline:3px solid #a3f0e4;outline-offset:-5px;z-index:2}
#gameView[data-game="roulette"] .roulette-spatial-chips{position:absolute;inset:0;pointer-events:none;z-index:3}
#gameView[data-game="roulette"] .roulette-spatial-chip{position:absolute;transform:translate(-50%,-50%);width:28px;height:28px;border:2px dashed #fff4bf;border-radius:50%;display:grid;place-items:center;background:#d1a449;color:#192b32;font-size:9px;font-weight:900;line-height:1;box-shadow:0 2px 3px #0005;pointer-events:none;overflow:hidden;text-overflow:ellipsis}
#gameView[data-game="roulette"] .roulette-accessible-selection{margin-top:12px;font-size:12px}
#gameView[data-game="roulette"] .roulette-accessible-selection>summary{min-height:48px;display:flex;align-items:center;cursor:pointer}
#gameView[data-game="roulette"] #rouletteDirectZero .roulette-choice{background:#27604e}
/* One fixed wheel/result region: enlarge the wheel without shifting controls on settlement. */
body[data-game-open="true"] #gameView[data-game="roulette"]:not([data-placing="true"]) .casino-table{grid-template-areas:"notice" "wallet" "board" "mini" "choice" "controls" "message" "returns"}
body[data-game-open="true"] #gameView[data-game="roulette"] #gameDisplay{height:272px;min-height:272px;max-height:272px;align-self:start}
#gameView[data-game="roulette"] .roulette-wheel{height:204px;width:204px;max-width:100%;margin:0 auto}
body[data-game-open="true"] #gameView[data-game="roulette"] #roundResult{grid-area:board;align-self:end;z-index:1;height:64px;min-height:64px;max-height:64px;padding:3px;gap:0}
body[data-game-open="true"] #gameView[data-game="roulette"] #roundResult .dice-result-title{font-size:12px;line-height:14px}
body[data-game-open="true"] #gameView[data-game="roulette"] #roundResult .dice-result-net{font-size:24px;line-height:26px;margin:0}
body[data-game-open="true"] #gameView[data-game="roulette"] #roundResult .roulette-result-detail{font-size:10px;line-height:14px;white-space:nowrap}
#gameView[data-game="roulette"] #roundResult .roulette-result-detail strong{font-size:12px}