/* Roulette owns its viewport, including when it is played inside a club iframe. */
body[data-game=roulette]:has(#rouletteRoom){display:block;margin:0;padding:0;height:100dvh;min-height:0;overflow:hidden;background:#101410;color:#f4e8c7}
body[data-game=roulette] [hidden]{display:none!important}
#rouletteRoom{--edge:#9e814b;--gold:#f2d28e;box-sizing:border-box;height:100%;width:100%;max-width:none;margin:0;padding:3px clamp(3px,.6vw,12px) max(3px,env(safe-area-inset-bottom));display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:3px;font:14px/1.2 Arial,sans-serif}
#rouletteRoom *,#rouletteRoom *::after,#rouletteRoom *::before{box-sizing:border-box}
.rq-heading,.rq-dock{border:1px solid var(--edge);border-radius:5px;background:linear-gradient(112deg,#271f13,#0c1c16 65%,#211d14)}
#rouletteRoom .rq-heading{position:static;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:4px 1.5%;min-height:0}
.rq-title{display:flex;align-items:baseline;gap:12px}.rq-title small{font:700 9px/1.25 Arial;letter-spacing:.15em;color:#ddc087}
.rq-title h1{margin:0;font:600 clamp(21px,3.3dvh,38px)/1 Georgia,serif;color:#ffedc1}
#rouletteRoom .rq-links{display:flex;align-items:center;gap:6px;background:transparent;border:0;overflow:visible}
#rouletteRoom .rq-links :is(button,a){display:inline-flex;align-items:center;margin:0;min-height:32px;padding:5px 10px;border:1px solid #987b45;border-radius:5px;background:#211d14;color:#fae7b9;font:600 12px/1.15 Arial;text-decoration:none}
.rq-scene{position:relative;container-type:size;isolation:isolate;overflow:hidden;min-height:0;border-radius:7px;background:#13140c}
.rq-scene::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:solid transparent;border-width:29cqh 0 11cqh;border-image:url('/tabletop/dealer-room.webp') 299 0 342 0 fill}
.rq-rail{position:absolute;z-index:3;top:0;left:8%;right:8%;height:31%;pointer-events:none}
#rouletteRoom .rq-rail :is(.table-company,.company-table){position:absolute;inset:0;display:flex!important;flex-wrap:nowrap;align-items:end;justify-content:space-evenly;width:100%;height:100%;max-width:none;margin:0;padding:0;gap:1%;border:0;outline:0;box-shadow:none;background:none}
#rouletteRoom .rq-rail :is(.table-guest,.company-table>article){position:relative;inset:auto;transform:none;pointer-events:auto;flex:0 1 19%;max-width:240px;width:auto;min-width:0;height:100%;max-height:none;display:flex;flex-direction:column;align-items:center;justify-content:end;padding:0;border:0;border-radius:0;box-shadow:none;background:transparent!important}
#rouletteRoom .rq-rail :is(.table-guest,.company-table>article):is(:first-child,:last-child):not(:only-child){transform:translateY(6%)}
#rouletteRoom .rq-rail .seated-figure,#rouletteRoom .rq-rail .table-guest>:is(img,svg){flex:1 1 0;min-height:0;width:100%;height:auto;max-height:calc(100% - clamp(28px,5.5cqh,48px));margin:0;object-fit:contain;object-position:center bottom;overflow:hidden}
#rouletteRoom .rq-rail .seated-figure :is(img,svg){width:100%;height:100%!important;object-fit:contain;object-position:center bottom}
#rouletteRoom .rq-rail :is(.table-guest>span,.company-table>article>strong){flex:none;max-width:100%;margin:0;padding:1px 6px;background:#101b13eb;border:1px solid #ae914f;border-radius:3px;color:#ffe6a7;font:600 clamp(9px,1.9cqh,18px)/1.12 Georgia,serif;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rouletteRoom .rq-rail .company-table>article>small{font-size:clamp(8px,1.25cqh,12px);background:#102219ee;color:#f4dd99;max-width:100%;margin:1px 0 0;padding:1px 4px;text-align:center}
#rouletteRoom .rq-rail :is(.house-speech,.company-speech){position:absolute;z-index:4;inset:auto auto calc(100% - clamp(23px,4.5cqh,39px)) 50%;transform:translateX(-50%);width:max-content;max-width:min(230px,40vw);margin:0;padding:4px 8px;color:#2c2213;background:#fff1d1;font:600 clamp(10px,1.6cqh,15px)/1.15 Georgia;text-align:center}
#rouletteRoom .rq-rail .company-speech:not([data-talking]){display:none}
#rouletteRoom .rq-rail .company-speech::after{top:auto;bottom:-5px;transform:translateX(-50%) rotate(45deg)}
#rouletteRoom .rq-rail .seated-reaction-button{position:absolute;top:auto;bottom:13%;right:1%;min-height:20px;width:21px;height:21px;padding:0;font-size:11px}
#rouletteRoom #gameBoard{position:absolute;inset:34% 5% 15%;z-index:2;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.65fr);gap:3%;align-items:center;width:auto;height:auto;min-height:0;padding:0;margin:0;pointer-events:none}
.rq-bowl{width:100%;height:100%;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
#rouletteRoom .rq-wheel{display:block;width:100%;height:auto;max-height:83%;overflow:visible;filter:drop-shadow(1px 5px 4px #03180cbc)}
.rq-rotor,.rq-ball{transform-origin:center;transform-box:fill-box}
.rq-ball.in-motion{animation:rq-ball-run 1.8s cubic-bezier(.19,.67,.28,1) both}@keyframes rq-ball-run{from{transform:rotate(1080deg)}to{transform:rotate(0deg)}}
.rq-readout{display:flex;align-items:center;justify-content:center;gap:6px;margin:2px 0 0;padding:3px 10px;border:1px solid #b99351;border-radius:12px;background:#11261def;color:#f2db9c;white-space:nowrap}
.rq-readout small{font-size:10px}.rq-readout strong{font-size:clamp(12px,2.5cqh,21px);color:#fff2c0}
.rq-layout{height:100%;max-height:350px;min-height:0;display:grid;grid-template-rows:minmax(0,3fr) minmax(0,1fr) minmax(0,1fr);gap:2px;padding:2px;border:1px solid #bea573;border-radius:4px;background:#e2cc9733;box-shadow:0 2px 4px #00170c50}
.rq-numbers{display:grid;grid-template-columns:.8fr 6fr 6fr 1.2fr;gap:1px;min-height:0}
.rq-eighteen,.rq-columns,.rq-dozens,.rq-outside{display:grid;min-height:0;gap:1px}
.rq-eighteen{grid-template:repeat(3,minmax(0,1fr))/repeat(6,minmax(0,1fr))}.rq-columns{grid-template-rows:repeat(3,minmax(0,1fr))}
.rq-dozens{grid-template-columns:repeat(3,minmax(0,1fr))}.rq-outside{grid-template-columns:repeat(6,minmax(0,1fr))}
#rouletteRoom #gameBoard button{position:relative;pointer-events:auto;width:100%;height:100%;min-height:0;min-width:0;max-width:none;padding:1px;margin:0;border:1px solid #c4b5878a;border-radius:2px;color:#fff5da;background:linear-gradient(145deg,#19553d,#123d2b);font:700 clamp(12px,min(2.8cqh,1.45cqw),23px)/1.05 Georgia;text-align:center}
#rouletteRoom #gameBoard button.red{background:linear-gradient(135deg,#ab352d,#79251e)}#rouletteRoom #gameBoard button.black{background:linear-gradient(135deg,#27312b,#111d19)}
#rouletteRoom #gameBoard .rq-zero{background:#177449}#rouletteRoom #gameBoard .rq-columns button{font-size:clamp(9px,1.5cqw,15px)}
#rouletteRoom #gameBoard button[aria-pressed=true]{outline:2px solid #fff1aa;outline-offset:-2px;box-shadow:inset 0 0 0 4px #bf9148}
#rouletteRoom #gameBoard button[aria-pressed=true]::after{content:'';display:block;position:absolute;right:2px;top:2px;width:5px;height:5px;background:#ffe29a;border-radius:100%}
#rouletteRoom #gameBoard .rq-winner{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:2px}
.rq-mark{position:absolute;bottom:5%;width:100%;text-align:center;font:600 clamp(10px,1.8cqh,17px)/1 Georgia;letter-spacing:.16em;color:#f4cf86}
#rouletteRoom .rq-dock{padding:6px 1.2%;display:grid;grid-template-columns:minmax(150px,.9fr) minmax(170px,1fr) minmax(280px,1.55fr);gap:8px;align-items:center;min-width:0}
#rouletteRoom #result{min-height:0;margin:0;background:none;box-shadow:none;border:none;color:#fff0c8;text-align:left;padding:3px;font:600 clamp(12px,1.8dvh,17px)/1.12 Georgia}
.rq-money{display:flex;align-items:center;justify-content:space-evenly;gap:7px}.rq-money small,.rq-play label{display:block;color:#e8d2a2;font:600 11px/1.2 Arial}
.rq-money strong{display:block;color:#fff1bf;font:700 clamp(15px,2.7dvh,24px)/1.12 Georgia;font-variant-numeric:tabular-nums}
.rq-play{display:grid;grid-template-columns:minmax(65px,1fr) minmax(47px,.47fr) minmax(80px,.9fr);align-items:end;gap:5px}
#rouletteRoom .rq-play :is(button,input,select){display:block;width:100%;min-width:0;max-width:none;height:40px;min-height:0;margin:2px 0 0;padding:3px 7px;border:1px solid #b49a61;border-radius:5px;background:#111b15;color:#ffefc2;font:600 15px/1 Arial}
#rouletteRoom .rq-play #play{background:linear-gradient(#efd695,#c39950);color:#20190e;font-weight:800}
#rouletteRoom #storageNote:not([hidden]){grid-column:1/-1;margin:0;font-size:10px}
.rq-info{max-width:min(600px,94vw);max-height:88dvh;overflow:auto;padding:16px;background:#1a1c14;color:#f3e6c7;border:1px solid #b08e4f}.rq-info form{text-align:right}
#helpDialog .table-navigation,.rq-info .machine-selector{display:flex!important;flex-wrap:wrap;gap:6px;margin-block:12px}
@media(max-width:650px) and (orientation:portrait){
 #rouletteRoom .rq-heading{padding:3px 5px}.rq-title{display:block}.rq-title small{font-size:7px}.rq-title h1{font-size:22px}
 #rouletteRoom .rq-links{gap:3px}#rouletteRoom .rq-links :is(button,a){font-size:10px;padding:3px 5px;min-height:29px}
 .rq-rail{left:2%;right:2%;height:24%}.rq-scene::before{border-width:23cqh 0 7cqh}
 #rouletteRoom .rq-rail :is(.table-guest,.company-table>article){flex-basis:20%}
 #rouletteRoom .rq-rail :is(.table-guest,.company-table>article):first-child :is(.house-speech,.company-speech){left:0;transform:none;--tail:18%}
 #rouletteRoom .rq-rail :is(.table-guest,.company-table>article):last-child:not(:only-child) :is(.house-speech,.company-speech){left:auto;right:0;transform:none;--tail:82%}
 #rouletteRoom #gameBoard{inset:26% 4% 9%;grid-template: minmax(0,.8fr) minmax(0,2fr)/minmax(0,1fr);gap:3px}
 .rq-bowl{flex-direction:row;justify-content:center;gap:3%}#rouletteRoom .rq-wheel{width:57%;height:100%;max-height:100%}.rq-readout{flex-direction:column;min-width:70px}
 .rq-layout{grid-template-rows:minmax(0,6fr) minmax(0,1fr) minmax(0,1fr);gap:1px;max-height:none}
 .rq-numbers{grid-template:repeat(2,minmax(0,1fr))/minmax(20px,.75fr) minmax(0,6fr) minmax(31px,1fr)}
 .rq-zero{grid-column:1;grid-row:1/3}.rq-eighteen{grid-column:2}.rq-columns{grid-column:3;grid-row:1/3}
 #rouletteRoom #gameBoard button{font-size:clamp(10px,2.6cqh,18px)}#rouletteRoom #gameBoard .rq-columns button{font-size:10px}
 #rouletteRoom .rq-dock{grid-template-columns:1fr;gap:4px;padding:4px 8px}.rq-money{justify-content:space-between}.rq-money>div{display:flex;align-items:baseline;gap:3px}.rq-money small{font-size:9px}.rq-money strong{font-size:15px}
 #rouletteRoom #result{padding:1px 0;font-size:13px}.rq-play label{font-size:10px}#rouletteRoom .rq-play :is(button,input,select){height:35px;font-size:14px}.rq-mark{bottom:2%;font-size:8px}
}
@media(max-height:500px) and (orientation:landscape){
 #rouletteRoom{gap:2px}.rq-title small{display:none}#rouletteRoom .rq-heading{padding:1px 6px}.rq-title h1{font-size:20px}
 #rouletteRoom .rq-links :is(button,a){font-size:10px;min-height:24px;padding:2px 6px}
 #rouletteRoom .rq-dock{grid-template-columns:minmax(0,.9fr) minmax(0,.82fr) minmax(0,1.65fr);gap:4px;padding:2px 5px}
 .rq-money{gap:4px}.rq-money small,.rq-play label{font-size:8px}.rq-money strong{font-size:14px}#rouletteRoom #result{font-size:10px;padding:0}
 #rouletteRoom .rq-play :is(button,input,select){height:28px;font-size:11px;margin:0;padding:2px 4px}
 #rouletteRoom #gameBoard{inset:33% 4% 10%}.rq-mark{bottom:2%;font-size:8px}
 #rouletteRoom .rq-rail :is(.house-speech,.company-speech){font:600 9px/1.05 Georgia;padding:2px 5px;max-width:200px;bottom:calc(100% - 19px)}
 #rouletteRoom .rq-rail .seated-figure,#rouletteRoom .rq-rail .table-guest>:is(img,svg){max-height:calc(100% - 18px)}
 .rq-readout{margin:0;padding:1px 6px}.rq-readout small{font-size:8px}.rq-readout strong{font-size:11px}
 #rouletteRoom #gameBoard button{font-size:clamp(9px,3.8cqh,14px)}
}
@media(prefers-reduced-motion:reduce){.rq-ball.in-motion{animation:none}}

.rq-payout{display:block;margin:5px auto 0;font:600 clamp(9px,1.7cqh,14px)/1.16 Georgia;color:#ffedc3;text-align:center;text-shadow:0 1px 2px #11251b}
@media(max-width:650px) and (orientation:portrait){.rq-bowl{display:grid;grid-template-columns:55% auto;grid-template-rows:minmax(0,1fr) auto;gap:1px 6px}#rouletteRoom .rq-bowl .rq-wheel{width:100%;height:100%}.rq-readout{justify-self:start}.rq-payout{grid-column:1/-1;margin:0;font-size:9px}}
@media(max-height:500px){.rq-payout{font-size:8px;margin:1px 0}}