#roulette-panel[hidden] { display:none!important; }
.games-hub[data-active-game="roulette"] .game-panel[hidden] { display:none!important; }
#roulette-panel { background:radial-gradient(ellipse at 30% 35%,#8baeff10,transparent 55%),linear-gradient(145deg,#102237,#071421); }
.roulette-heading { display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:14px; }
.roulette-heading h2 { margin:0; color:var(--ink); font-size:28px; letter-spacing:-1px; }
.roulette-eyebrow { margin:0 0 8px; color:var(--muted); font-size:9px; letter-spacing:1.6px; }
.roulette-account { display:grid; gap:5px; min-width:0; text-align:right; }
.roulette-account span { color:var(--muted); font-size:10px; }
.roulette-account strong { color:var(--accent); font-size:23px; font-weight:600; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }
.roulette-intro { margin:0 0 20px; color:var(--muted); font-size:12px; line-height:1.5; }
.roulette-layout { display:grid; gap:22px; min-width:0; }
.roulette-wheel-column { display:flex; flex-direction:column; align-items:center; min-width:0; }
.roulette-stage { position:relative; display:grid; justify-items:center; width:100%; min-width:0; border-radius:20px; background:radial-gradient(circle,#8baeff09,transparent 67%); }
.roulette-wheel { display:block; width:min(100%,360px); height:auto; overflow:visible; }
.roulette-rim { fill:#071421; stroke:#599ac7; stroke-width:4; }
.roulette-inner-ring { fill:none; stroke:#427ba3; stroke-width:2; }
.roulette-pocket { stroke:#e4f0ff37; stroke-width:.6; }
.roulette-pocket-red { fill:#d93959; }
.roulette-pocket-black { fill:#121820; }
.roulette-pocket-green { fill:#30bd70; }
.roulette-pocket-number { fill:var(--ink); font:600 12px var(--body); }
.roulette-hub { fill:#091b2d; stroke:#28506d; stroke-width:1; }
.roulette-hub-ring { fill:none; stroke:#8baeff12; stroke-width:1; }
.roulette-pointer { fill:#e0f5ff; stroke:#75c8f5; stroke-width:1; filter:drop-shadow(0 2px 4px #0008); }
.roulette-wheel-number { fill:var(--ink); font:600 60px var(--body); font-variant-numeric:tabular-nums; }
.roulette-wheel-label { fill:var(--muted); font:400 12px var(--body); }
.roulette-stage[data-result-color="red"] .roulette-wheel-number { fill:#ff7591; }
.roulette-stage[data-result-color="green"] .roulette-wheel-number { fill:#63ff86; }
.roulette-stage.is-win .roulette-hub { stroke:#56e2a0b0; filter:drop-shadow(0 0 14px #56e2a01a); }
.roulette-stage.is-loss .roulette-hub { stroke:#ff456775; }
.roulette-status { min-height:16px; margin:5px 0 17px; color:var(--muted); font-size:10px; letter-spacing:1px; text-align:center; }
.roulette-summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; max-width:360px; padding:14px 16px; border:1px solid var(--line); border-radius:13px; background:#09192a; }
.roulette-summary p { display:grid; gap:7px; min-width:0; margin:0; }
.roulette-summary p:last-child { text-align:right; }
.roulette-summary span { color:var(--muted); font-size:10px; }
.roulette-summary strong { color:var(--ink); font-size:17px; font-weight:600; overflow-wrap:anywhere; }
.roulette-summary p:last-child strong { color:var(--accent); }
.roulette-return-note { display:flex; justify-content:space-between; gap:10px; width:100%; max-width:360px; margin:9px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }
.roulette-return-note strong { color:var(--lavender); font-weight:500; }
.roulette-bet-column { display:grid; gap:15px; min-width:0; }
.roulette-bets { min-width:0; margin:0; padding:0; border:0; }
.roulette-bets legend { margin-bottom:10px; padding:0; color:var(--ink); font-size:12px; font-weight:600; }
.roulette-numbers { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:5px; }
.roulette-number,.roulette-outside button { position:relative; min-width:0; min-height:40px; border:1px solid #6b465559; border-radius:7px; color:#fff5ef; font:500 13px var(--body); cursor:pointer; transition:border-color .15s,box-shadow .15s,background .15s; }
.roulette-number-red { background:#99324b; }
.roulette-number-black { background:#111820; border-color:#354451; }
.roulette-number-green { grid-column:1/-1; min-height:35px; background:#1e6a45; border-color:#45a26999; }
.roulette-outside { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin-top:9px; }
.roulette-outside button { min-height:36px; background:#14283c; border-color:#294760; font-size:11px; }
.roulette-outside button[data-roulette-bet="red"] { background:#763048; border-color:#99425e; }
.roulette-outside button[data-roulette-bet="black"] { background:#071421; }
.roulette-bets button.is-selected { border:2px solid var(--accent); box-shadow:0 0 0 1px #59c9ff2e,0 0 14px #1596ff26; }
.roulette-bets button.is-selected::after { position:absolute; top:3px; right:4px; width:5px; height:5px; border-radius:50%; background:var(--accent); content:""; }
.roulette-number.is-result { color:#fff; box-shadow:inset 0 0 0 2px #ffe9a0; }
.roulette-bets button:hover:not(:disabled) { border-color:var(--lavender); filter:brightness(1.2); }
.roulette-stake-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(105px,.8fr); align-items:end; gap:10px; }
.roulette-wager-label { display:grid; gap:7px; min-width:0; color:var(--muted); font-size:11px; }
.roulette-wager-label input { width:100%; min-width:0; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:9px; background:#071421; color:var(--ink); font:500 16px var(--body); }
.roulette-wager-label input[aria-invalid="true"] { border-color:#ff7994; }
.roulette-stake-shortcuts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
.roulette-stake-shortcuts button { min-width:0; min-height:44px; padding:0 4px; border:1px solid var(--line); border-radius:8px; background:#12263c; color:var(--ink); font:500 12px var(--body); cursor:pointer; }
.roulette-spin { min-width:0; width:100%; min-height:52px; padding:12px 16px; border:0; border-radius:11px; background:linear-gradient(135deg,#83ddff,#59c9ff); color:#03131f; font:600 14px var(--body); cursor:pointer; box-shadow:0 7px 25px #59c9ff1c; }
.roulette-spin:hover:not(:disabled) { background:linear-gradient(135deg,#a1e7ff,#76d4ff); }
.roulette-game button:focus-visible,.roulette-wager-label input:focus-visible { outline:2px solid var(--lavender); outline-offset:3px; }
.roulette-game form button:disabled,.roulette-wager-label input:disabled { opacity:.45; cursor:not-allowed; }
.roulette-result { min-height:22px; margin:16px 0 0; color:var(--muted); font-size:12px; line-height:1.6; overflow-wrap:anywhere; }
.roulette-result.is-win { color:var(--positive); }
.roulette-result.is-error { color:#ffb8c7; }
.roulette-rules { margin:12px 0 0; color:var(--muted); font-size:10px; line-height:1.7; }
@container ncb-games (min-width:780px) {
  .roulette-layout { grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:start; gap:32px; }
  .roulette-wheel-column { justify-content:center; padding-top:15px; }
  .roulette-wheel { max-width:385px; }
  .roulette-number { min-height:42px; }
}
@media(max-width:600px) {
  #roulette-panel { padding:22px 16px; }
  .roulette-layout { gap:19px; }
  .roulette-heading h2 { font-size:25px; }
  .roulette-wheel { width:min(100%,285px); }
  .roulette-number { min-height:39px; }
  .roulette-stake-row { grid-template-columns:minmax(0,1fr) minmax(100px,.75fr); }
}
@media(prefers-reduced-motion:reduce) { .roulette-game button { transition:none; } }