.RouletteGame { --table-finish: radial-gradient(ellipse at 50% 0, #21513d, #10372b 85%); }
.roulette-heading { margin: 8px 0 26px; }
.roulette-heading > p:last-child { font-size: 14px; color: #aebcac; margin-top: 13px; }
.roulette-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(360px, 1fr); gap: 28px; align-items: start; }
.roulette-stage { min-width: 0; position: relative; overflow: hidden; border: 1px solid #c4a46a30; border-radius: 12px; background: var(--table-finish); box-shadow: 0 15px 45px #0003; }
.roulette-stage-label { position: absolute; z-index: 1; top: 22px; left: 25px; font-size: 9px; letter-spacing: .2em; color: #dfcb9b; pointer-events: none; }
.roulette-scene { width: 100%; aspect-ratio: 1.13; display: grid; place-items: center; }
.roulette-scene canvas { display: block; width: 100%; height: 100%; grid-area: 1 / 1; touch-action: pan-y; }
.wheel-fallback { grid-area: 1 / 1; display: grid; place-items: center; width: 70%; aspect-ratio: 1; border: 17px ridge #997243; border-radius: 50%; color: #e7c989; font: 50px Georgia, serif; background: repeating-conic-gradient(#971e1e 0 9.73deg, #161c18 9.73deg 19.46deg); box-shadow: inset 0 0 0 65px #0005, 0 20px 40px #0009; }
.wheel-fallback[hidden] { display: none; }
.roulette-result { min-height: 48px; padding: 0 22px; margin: 0; color: #ead7a7; text-align: center; font: 19px/1.5 Georgia, serif; }
.roulette-history { display: flex; justify-content: center; gap: 6px; padding: 13px 16px 24px; min-height: 60px; flex-wrap: wrap; }
.roulette-history span { display: grid; place-items: center; min-width: 30px; height: 30px; border-radius: 50%; border: 1px solid #d3bd803b; font: bold 12px system-ui, sans-serif; color: #fff; }
.RouletteForm { padding: 25px !important; margin: 0 !important; border-radius: 12px; border: 1px solid #9d8b5e65 !important; background: var(--table-finish) !important; box-shadow: inset 0 0 0 5px #061c1433, 0 15px 40px #0003; }
.RouletteForm fieldset { border: 0; min-width: 0; padding: 0; margin: 0; }
.RouletteForm legend { padding: 0; margin-bottom: 20px; color: #dcca9d; font-size: 10px; font-weight: 600; letter-spacing: .21em; }
.roulette-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 24px; justify-content: center; }
.RouletteForm button { cursor: pointer; font-family: system-ui, sans-serif; }
.RouletteForm button:disabled { cursor: wait; opacity: .55; }
.casino-chip { flex-shrink: 0; width: 48px; height: 48px; padding: 0; border: 5px dashed #f6eee3; border-radius: 50%; box-shadow: 0 3px 0 #000a, 0 7px 12px #0007, inset 0 0 0 2px #ffffff5c; color: #fff; background: #183b6c; font-size: 12px; font-weight: bold; transition: transform .2s; }
.casino-chip[aria-pressed=true] { outline: 2px solid #ffe19c; outline-offset: 5px; transform: translateY(-4px); }
.chip-1 { background: #c8bca0; color: #282a24; border-color: #ddd4bc; }
.chip-10 { background: #b93b34; }
.chip-25 { background: #19734e; }
.chip-100 { background: #242a28; }
.chip-500 { background: #704799; }
.roulette-board { display: grid; grid-template-columns: repeat(6, minmax(44px, 1fr)); gap: 1px; padding: 1px; border: 1px solid #d2c7959c; border-radius: 5px; overflow: hidden; background: #d2c79570; }
.roulette-board button { padding: 0; min-height: 44px; border: none; border-radius: 0; position: relative; color: #fff6dc; font: 17px Georgia, serif; }
.roulette-board button:first-child { grid-column: 1 / -1; background: #196746; }
.red { background: #a82c30; }
.black { background: #19251f; }
.green { background: #1c6b46; }
.roulette-board button:not(:first-child) { grid-row: auto; }
.bet-number:hover, .bet-outside:hover { filter: brightness(1.3); }
.roulette-outside { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.roulette-outside button { min-height: 42px; position: relative; border: 1px solid #d2c79588; border-radius: 3px; background: #123e30; color: #eee1be; font-size: 11px; padding: 5px 2px; }
.roulette-outside button.red { background: #9b2930; }
.roulette-outside button.black { background: #17231d; }
[data-bet][data-stake]::after { content: attr(data-stake); position: absolute; bottom: 1px; right: 1px; min-width: 19px; min-height: 19px; border: 2px dashed #f5deb4; background: #224b80; color: #fff; border-radius: 50%; font: bold 9px/16px system-ui, sans-serif; box-shadow: 0 2px 3px #0009; }
.roulette-advanced { color: #c7c9ad; margin: 16px 0; font-size: 12px; }
.roulette-advanced summary { cursor: pointer; padding: 5px 0; }
.roulette-advanced label { display: block; margin: 10px 0 6px; }
.roulette-advanced select { box-sizing: border-box; min-width: 0; max-width: 100%; width: 100%; font-size: 16px; background: #11291f; border: 1px solid #9f9965; color: #f0e4c5; padding: 10px; border-radius: 4px; }
.roulette-advanced button { margin-top: 8px; border: 1px solid #9e9f72; background: transparent; color: #f0e4c5; padding: 8px 12px; border-radius: 3px; }
.roulette-slip { list-style: none; margin: 12px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px; max-height: 115px; overflow: auto; }
.roulette-slip button { border: 1px solid #aabd9050; color: #e7e8ce; background: #ffffff07; border-radius: 12px; padding: 4px 9px; font-size: 11px; }
.roulette-total { color: #e4d3a4; font-size: 13px; white-space: nowrap; }
.roulette-clear { min-height: 44px; padding: 10px 14px; border: 1px solid #c4a46a; border-radius: 6px; background: linear-gradient(#315440, #163729); color: #f1dfb5; font: 600 13px system-ui, sans-serif; box-shadow: 0 2px 4px #0005; cursor: pointer; }
.roulette-clear:hover { background: #365c45; }
.roulette-clear:disabled { opacity: .5; cursor: default; }
.RouletteForm .roulette-spin { width: 100%; min-height: 52px; border: 1px solid #eed79c; border-radius: 5px; background: linear-gradient(175deg, #efd5a0, #c3a063); box-shadow: 0 3px 0 #68532c, 0 8px 17px #0005; color: #282618; font-weight: 800; letter-spacing: .15em; font-size: 12px; }
.roulette-limit { display: block; color: #9fb49e; text-align: center; margin-top: 15px; font-size: 10px; }
.roulette-rules { padding: 20px 0; margin-top: 16px; color: #b9c2b5; font-size: 13px; line-height: 1.7; }
.roulette-rules summary { cursor: pointer; color: #d6c59e; }
.roulette-play-controls { padding-bottom: 12px; background: var(--table-finish); border-radius: 5px; }
.roulette-slip:empty { display: none; }
@media (min-width: 961px) {
    .roulette-stage { position: sticky; top: calc(var(--nav-height) + 12px); }
    .roulette-scene { aspect-ratio: auto; height: min(42vh, 440px); }
    .roulette-history { padding: 8px 12px 12px; min-height: 48px; }
    .CasinoPage .RouletteForm { overflow: visible; }
    .roulette-play-controls { position: sticky; top: var(--nav-height); z-index: 3; }
}
@media (min-width: 961px) and (max-height: 850px) {
    .CasinoPage .RouletteGame { padding-top: 4px; }
    .RouletteGame .casino-header { padding: 8px 0; }
    .RouletteGame .casino-status { margin: 4px 0; }
    .roulette-heading { margin: 4px 0 12px; }
    .roulette-heading .casino-eyebrow, .roulette-heading > p:last-child { display: none; }
    .roulette-heading .casino-title { font-size: 30px; margin: 4px 0; }
    .roulette-layout { gap: 18px; grid-template-columns: minmax(0, 1fr) minmax(430px, 1.15fr); }
    .RouletteForm { padding: 14px !important; }
    .RouletteForm legend { margin-bottom: 4px; }
    .roulette-chips { margin: 10px 0; }
    .roulette-board { grid-template-columns: repeat(9, minmax(44px, 1fr)); }
    .roulette-outside { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .roulette-advanced { margin: 4px 0; }
    .roulette-limit { margin-top: 4px; }
}
@media (max-width: 960px) { .roulette-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; } .roulette-scene { aspect-ratio: 1.5; max-height: 440px; } }
@media (max-width: 520px) { .RouletteForm { min-width: 0; padding: 18px 12px !important; } .roulette-chips { gap: 10px; } .casino-chip { width: 44px; height: 44px; } .roulette-board { grid-template-columns: repeat(3, minmax(44px, 1fr)); } .roulette-result { font-size: 17px; } .roulette-stage-label { top: 12px; left: 14px; } }
@media (max-width: 520px) {
    .roulette-chips .roulette-clear { order: 0; flex-basis: 100%; }
    .roulette-chips .roulette-total { order: 1; flex-basis: 100%; text-align: center; padding-bottom: 8px; }
    .roulette-chips .casino-chip { order: 2; }
}
@media (prefers-reduced-motion: reduce) { .casino-chip { transition: none; } }