/* Slot controls share the artwork's coordinates. Other games keep their UI. */
.slot-game { position:relative; }
.slot-game .game-stage { aspect-ratio: 1100 / 620; isolation: isolate; }
.slot-game .slot-accessible-status { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); border:0; }
body[data-game="sweet"] .game-heading, body[data-game="olympus"] .game-heading { margin-bottom:12px; }
body[data-game="sweet"] .game-heading p, body[data-game="olympus"] .game-heading p { display:none; }
.slot-controls { position:absolute; inset:0; pointer-events:none; z-index:1; --slot-scale:1; }
.slot-controls-plane { position:absolute; width:1100px; height:620px; transform:scale(var(--slot-scale)); transform-origin:0 0; font-family:Arial,sans-serif; color:white; }
.slot-controls button,.slot-controls input { pointer-events:auto; font:inherit; }
.slot-controls button { cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.slot-controls button:disabled { cursor:default; filter:saturate(.55) brightness(.65); }
.slot-controls button:hover:not(:disabled) { filter:brightness(1.17); }
.slot-controls :focus-visible { outline:3px solid #fff; outline-offset:3px; }
.slot-controls [hidden] { display:none !important; }
.slot-frame { position:absolute; left:8px; width:147px; border:5px solid transparent; border-radius:5px; background:linear-gradient(#2d1027,#170a16) padding-box,linear-gradient(120deg,#fff8c4,#a16b17 15%,#ffe7a0 30%,#926013 48%,#fff1aa 64%,#ab741c 80%,#fff4af) border-box; box-shadow:0 4px 8px #1904139c,inset 0 0 0 1px #f6d679; }
.slot-frame:before,.slot-frame:after { content:"❧"; position:absolute; left:-6px; right:-6px; top:-16px; height:21px; color:#ffd776; font:30px Georgia,serif; text-align:center; line-height:21px; text-shadow:0 1px #744000,0 -1px #fff9d1; pointer-events:none; }
.slot-frame:after { top:auto; bottom:-16px; transform:rotate(180deg); }
.slot-purchase { top:78px; height:97px; padding:6px 2px 3px; text-align:center; color:#87eaff; line-height:1; }
.slot-purchase>span { display:block; font-size:14px; line-height:1.04; white-space:nowrap; font-weight:900; text-shadow:1px 2px #23152d,-1px -1px #fff3; }
.slot-purchase strong,.slot-super strong { display:block; color:#ffe780; font:900 25px/1.15 Arial,sans-serif; margin-top:4px; text-shadow:1px 2px #633209; font-variant-numeric:tabular-nums; }
.slot-purchase small,.slot-super small { display:block; font:700 8px Arial,sans-serif; letter-spacing:.1em; color:#e3c68d; margin-top:2px; }
.slot-bet-card { top:187px; height:167px; background:linear-gradient(115deg,#fff9df,#f7e5b2 65%,#d2b777) padding-box,linear-gradient(120deg,#fff8c4,#a16b17 15%,#ffe7a0 30%,#926013 48%,#fff1aa 64%,#ab741c 80%,#fff4af) border-box; display:flex; align-items:center; flex-direction:column; padding:9px 3px 7px; color:#2c1d47; }
.slot-bet-card>label { font-weight:900; font-size:20px; line-height:1; text-shadow:0 1px white; }
.slot-bet-card #bet { display:block; width:100%; min-width:0; max-width:126px; margin:3px 0 7px; padding:0 3px; height:34px; background:transparent; color:#5f3b08; text-shadow:0 1px #fff; border:0; border-bottom:1px solid #b4925438; border-radius:0; font:900 28px Arial,sans-serif; font-variant-numeric:tabular-nums; text-align:center; appearance:textfield; }
.slot-bet-card #bet::-webkit-inner-spin-button,.slot-bet-card #bet::-webkit-outer-spin-button { appearance:none; margin:0; }
.slot-chance { font-size:14px; line-height:1.05; font-weight:900; text-align:center; text-shadow:0 1px #fff; }
.slot-bet-card #ante { display:flex; align-items:center; gap:3px; height:23px; min-height:23px; margin-top:7px; border:1px solid #8f6e40; border-radius:3px; padding:0 6px 0 0; background:linear-gradient(#93452c,#682e24); box-shadow:0 1px #fff9; color:white; font:900 10px Arial,sans-serif; }
.slot-switch-arrow { background:#37ba17; border-right:1px solid #8f6e40; display:grid; place-items:center; height:21px; min-width:28px; font-size:21px; text-shadow:0 1px #195d11; }
.slot-bet-card #ante[aria-pressed="true"] { background:linear-gradient(#30bd29,#21811b); }
.slot-bottom { position:absolute; top:558px; left:0; width:900px; height:62px; display:flex; align-items:center; gap:20px; padding:0 12px; }
.slot-utilities { display:flex; align-items:center; gap:7px; }
.slot-utilities button { width:27px; height:27px; border:1px solid #fffc; border-radius:50%; display:grid; place-items:center; padding:0; color:#fff; background:#0002; font:bold italic 20px Georgia,serif; }
.slot-utilities button:first-child { width:22px; height:22px; font-size:14px; }
.slot-utilities .icon { width:13px; height:13px; color:white; }
.slot-money { display:flex; gap:24px; min-width:290px; }
.slot-money>div { display:flex; flex-direction:column; gap:3px; }
.slot-money small { color:#ffe396; font:900 11px Arial,sans-serif; }
.slot-money strong { font:900 20px Arial,sans-serif; color:#fff; text-shadow:0 2px #362212; font-variant-numeric:tabular-nums; white-space:nowrap; }
.slot-status { flex:1; min-width:0; text-align:center; display:flex; flex-direction:column; gap:3px; }
.slot-status strong { font-size:22px; color:#ffe398; text-shadow:1px 2px #42200e; white-space:nowrap; }
.slot-status span { font-size:12px; line-height:1.2; letter-spacing:.02em; text-shadow:0 2px #000; }
.slot-spin-controls { position:absolute; left:908px; top:522px; width:186px; height:98px; }
.slot-spin { position:absolute; left:47px; top:0; height:88px; width:88px; padding:4px; border-radius:50%; border:2px solid #fff; background:radial-gradient(ellipse at 40% 20%,#14141460,#0006); color:#fff; box-shadow:0 2px 0 #2c190e55,inset 0 0 0 4px #fff1; }
.slot-spin svg { width:100%; height:100%; filter:drop-shadow(0 1px 1px #0004); }
.slot-spin:not(:disabled):active { transform:scale(.95); }
.slot-stop { display:grid; place-items:center; }
.slot-stop span { width:28px; height:28px; border-radius:3px; background:#fff; box-shadow:0 2px #0005; }
.slot-step { position:absolute; top:36px; width:35px; height:35px; border-radius:50%; border:1.5px solid white; background:#241b1559; color:white; padding:0; line-height:28px; font:30px Arial,sans-serif !important; }
.slot-minus { left:0; }.slot-plus { right:0; }
.slot-autoplay { position:absolute; left:41px; bottom:0; width:101px; height:21px; padding:0 2px; line-height:18px; border:1.5px solid white; border-radius:15px; background:#130e0cd9; font-size:11px !important; font-weight:900 !important; color:white; white-space:nowrap; }
/* Sweet's candy rail has an additional Super Bonus card below its logo. */
[data-game="sweet"] .slot-frame { left:14px; width:141px; border-radius:12px; border-width:3px; background:linear-gradient(#fff4e4,#f4d4c9) padding-box,linear-gradient(#fff9d0,#e9bc6d,#fff5c7) border-box; color:#a93583; box-shadow:0 3px 8px #79147138; }
[data-game="sweet"] .slot-frame:before,[data-game="sweet"] .slot-frame:after { display:none; }
[data-game="sweet"] .slot-purchase { top:148px; height:90px; }
[data-game="sweet"] .slot-purchase>span { font-size:14px; text-shadow:0 1px white; }
[data-game="sweet"] .slot-purchase strong,[data-game="sweet"] .slot-super strong { color:#efbd2b; text-shadow:-1px -1px #a22c7e,1px -1px #a22c7e,-1px 1px #a22c7e,1px 2px #a22c7e; font-size:27px; }
[data-game="sweet"] .slot-purchase small,[data-game="sweet"] .slot-super small { color:#a84687; }
.slot-super { top:245px; height:73px; padding:6px 3px; text-align:center; font-size:12px !important; font-weight:900 !important; }
.slot-super strong { font-size:25px !important; margin-top:2px; }
[data-game="sweet"] .slot-bet-card { top:325px; height:102px; padding:5px 3px; }
[data-game="sweet"] .slot-bet-card>label { font-size:12px; }
[data-game="sweet"] .slot-bet-card #bet { font-size:25px; height:28px; margin:0 0 2px; color:#9e367d; }
[data-game="sweet"] .slot-chance { font-size:9px; }
[data-game="sweet"] .slot-chance br { display:none; }
[data-game="sweet"] .slot-bet-card #ante { margin-top:4px; height:21px; min-height:21px; background:#c3478e; border-color:#ae3277; }
[data-game="sweet"] .slot-switch-arrow { height:19px; }
[data-game="sweet"] .slot-bottom { background:linear-gradient(#2d153959,#170c20b3); }
[data-game="sweet"] .slot-money small { color:#e5acd9; }
[data-game="sweet"] .slot-spin { background:radial-gradient(ellipse at 40% 20%,#7c267a8c,#2e103678); }
.slot-dialog { position:fixed; right:auto; bottom:auto; width:420px; max-width:var(--slot-dialog-width,calc(100vw - 28px)); max-height:var(--slot-dialog-height,calc(100dvh - 24px)); margin:0; padding:19px 12px 12px; border:0; border-radius:7px; background:#000e; color:#fff; box-shadow:0 15px 70px #0008; font-family:Arial,sans-serif; overflow-y:auto; overscroll-behavior:contain; }
.slot-dialog::backdrop { background:#0004; backdrop-filter:none; }
.slot-dialog form { margin:0; }
.slot-dialog-head { min-height:35px; display:flex; align-items:center; justify-content:center; padding:0 24px; position:relative; }
.slot-dialog h2 { margin:0; font:900 15px Arial,sans-serif; color:#f3b725; text-align:center; }
.slot-dialog-head button { position:absolute; top:-12px; right:-1px; width:40px; height:40px; background:transparent; color:#b6b6b6; font:300 46px/1 Arial,sans-serif; padding:0; border:0; cursor:pointer; }
.slot-auto-options { display:flex; justify-content:space-between; gap:11px; padding:39px 10px 29px; }
.slot-auto-options label { display:flex; gap:10px; align-items:center; cursor:pointer; font-size:10px; line-height:1.05; font-weight:900; }
.slot-auto-options input { appearance:none; width:31px; height:31px; flex-shrink:0; border:1px solid #777; border-radius:5px; background:#0005; margin:0; cursor:pointer; }
.slot-auto-options input:checked { background:#00bd6d; border-color:#00bd6d; }
.slot-auto-options input:checked:after { content:'✓'; display:block; color:white; text-align:center; font:900 24px/29px Arial,sans-serif; }
.slot-count-label { display:block; text-align:center; font-weight:900; font-size:14px; margin:0 0 20px; }
.slot-count-slider { display:flex; align-items:center; gap:26px; padding:0 25px; }
.slot-count-slider input { flex:1; min-width:0; height:32px; background:transparent; appearance:none; cursor:pointer; accent-color:#00bf70; }
.slot-count-slider input::-webkit-slider-runnable-track { height:2px; background:#00a466; }
.slot-count-slider input::-webkit-slider-thumb { appearance:none; height:32px; width:30px; border-radius:5px; border:0; margin-top:-15px; background:linear-gradient(90deg,transparent 35%,#fff 35%,#fff 41%,transparent 41%,transparent 49%,#fff 49%,#fff 55%,transparent 55%,transparent 63%,#fff 63%,#fff 69%,transparent 69%) center/16px 10px no-repeat,#00bc6b; box-shadow:0 1px 5px #0005; }
.slot-count-slider input::-moz-range-track { height:2px; background:#00a466; }.slot-count-slider input::-moz-range-thumb { height:30px; width:28px; border:0; border-radius:5px; background:#00bc6b; }
.slot-count-slider output { width:30px; text-align:center; color:white; font-size:20px; font-weight:900; }
.slot-auto-note { text-align:center; font-size:10px; color:#999; margin:22px 0 20px; }
#slot-auto-start { display:block; width:100%; min-height:48px; background:#00b969; border:0; border-radius:4px; padding:10px 6px; font:900 16px Arial,sans-serif; color:#fff; cursor:pointer; }
#slot-auto-start:hover:not(:disabled) { background:#00cd77; }
.slot-dialog button:disabled { opacity:.5; cursor:default; }
.slot-dialog :focus-visible { outline:2px solid white; outline-offset:3px; }
@media(max-width:760px){body[data-game="sweet"] main,body[data-game="olympus"] main{padding:12px 8px 0}.slot-game{border-radius:7px}.slot-dialog{padding-top:15px}.slot-auto-options{padding:30px 4px 25px;gap:7px}.slot-auto-options label{gap:6px;font-size:9px}.slot-dialog h2{font-size:14px}.slot-auto-note{font-size:9px}}
@media(max-height:450px){.slot-dialog{padding-top:8px}.slot-auto-options{padding-top:15px;padding-bottom:15px}.slot-auto-note{margin:10px 0}.slot-count-label{margin-bottom:10px}}

/* Keep real CSS pixel touch targets. Shrinking the desktop plane made the
   autoplay pill ~7px tall on phones, even though it looked visually aligned. */
.slot-compact .slot-controls { position:relative; inset:auto; width:100%; pointer-events:auto; background:linear-gradient(145deg,#251528,#110d15); border-top:1px solid #f0c97955; }
.slot-compact .slot-controls-plane { position:relative; width:100%; height:auto; transform:none; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:10px; padding-bottom:calc(10px + env(safe-area-inset-bottom,0px)); box-sizing:border-box; }
.slot-compact .slot-controls button,.slot-compact .slot-controls input { min-height:44px; touch-action:manipulation; }
.slot-compact .slot-controls .slot-frame { position:relative; inset:auto; width:100%; min-width:0; height:auto; min-height:78px; margin:0; border-width:2px; border-radius:8px; box-sizing:border-box; }
.slot-compact .slot-controls .slot-frame:before,.slot-compact .slot-controls .slot-frame:after { display:none; }
.slot-compact .slot-controls .slot-purchase,.slot-compact .slot-controls .slot-super { grid-row:2; display:flex; align-items:center; justify-content:center; flex-direction:column; padding:8px 4px; gap:2px; }
.slot-compact .slot-controls .slot-purchase { grid-column:1; }
.slot-compact .slot-controls .slot-super { grid-column:2; }
.slot-compact .slot-controls .slot-purchase>span,.slot-compact .slot-controls .slot-super>span { font:900 11px/1.1 Arial,sans-serif; }
.slot-compact .slot-controls .slot-purchase strong,.slot-compact .slot-controls .slot-super strong { font:900 22px/1.1 Arial,sans-serif !important; margin:0; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
.slot-compact .slot-controls .slot-purchase small,.slot-compact .slot-controls .slot-super small { font-size:9px; margin:0; }
.slot-compact .slot-controls .slot-bet-card { grid-column:1 / -1; grid-row:3; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 44px; column-gap:12px; row-gap:3px; padding:7px 10px; align-items:center; }
.slot-compact .slot-controls .slot-bet-card>label { grid-column:1; grid-row:1; font:900 11px Arial,sans-serif; text-align:center; }
.slot-compact .slot-controls .slot-bet-card #bet { grid-column:1; grid-row:2; width:100%; max-width:none; height:44px; min-height:44px; margin:0; padding:4px; font:900 22px Arial,sans-serif; border:1px solid #9a6b4a55; border-radius:5px; background:#ffffff38; box-sizing:border-box; }
.slot-compact .slot-controls .slot-chance { grid-column:2; grid-row:1; font:900 10px/1.05 Arial,sans-serif; text-align:center; }
.slot-compact .slot-controls .slot-chance br { display:none; }
.slot-compact .slot-controls #ante { grid-column:2; grid-row:2; display:flex; justify-content:center; width:100%; min-width:44px; height:44px; min-height:44px; margin:0; padding:0 8px; gap:6px; font-size:12px; }
.slot-compact .slot-controls .slot-switch-arrow { height:auto; min-width:22px; background:transparent; border:0; }
.slot-compact[data-game="olympus"] .slot-controls .slot-purchase { grid-column:1; }
.slot-compact[data-game="olympus"] .slot-controls .slot-bet-card { grid-column:2; grid-row:2; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 44px auto 44px; row-gap:2px; padding:6px; }
.slot-compact[data-game="olympus"] .slot-controls .slot-bet-card>label { grid-row:1; }
.slot-compact[data-game="olympus"] .slot-controls .slot-bet-card #bet { grid-row:2; }
.slot-compact[data-game="olympus"] .slot-controls .slot-chance { grid-column:1; grid-row:3; font-size:9px; }
.slot-compact[data-game="olympus"] .slot-controls #ante { grid-column:1; grid-row:4; }
.slot-compact .slot-bottom { position:static; width:auto; height:auto; grid-column:1 / -1; grid-row:1; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; padding:0; background:none; }
.slot-compact .slot-money { grid-column:1; grid-row:1; min-width:0; gap:18px; }
.slot-compact .slot-money>div { min-width:0; }
.slot-compact .slot-money small { font-size:9px; }
.slot-compact .slot-money strong { max-width:100%; font-size:16px; overflow:hidden; text-overflow:ellipsis; }
.slot-compact .slot-utilities { grid-column:2; grid-row:1; gap:5px; }
.slot-compact .slot-utilities button,.slot-compact .slot-utilities button:first-child { width:44px; height:44px; min-height:44px; flex-shrink:0; font-size:22px; }
.slot-compact .slot-utilities .icon { width:19px; height:19px; }
.slot-compact .slot-status { grid-column:1 / -1; grid-row:2; min-height:16px; flex-direction:row; justify-content:center; flex-wrap:wrap; gap:3px 10px; }
.slot-compact .slot-status strong { max-width:100%; font:900 14px Arial,sans-serif; overflow:hidden; text-overflow:ellipsis; }
.slot-compact .slot-status span { font:700 10px/1.3 Arial,sans-serif; letter-spacing:0; }
.slot-compact .slot-spin-controls { position:static; grid-column:1 / -1; grid-row:4; width:100%; height:72px; display:grid; grid-template-columns:44px minmax(64px,1fr) 44px minmax(88px,1fr); grid-template-areas:'minus spin plus auto'; gap:8px; align-items:center; }
.slot-compact[data-game="olympus"] .slot-spin-controls { grid-row:3; }
.slot-compact .slot-spin { position:relative; inset:auto; grid-area:spin; width:68px; height:68px; min-height:68px; justify-self:center; padding:4px; }
.slot-compact .slot-step { position:static; width:44px; height:44px; min-height:44px; font-size:28px !important; }
.slot-compact .slot-minus { grid-area:minus; }.slot-compact .slot-plus { grid-area:plus; }
.slot-compact .slot-autoplay { position:static; grid-area:auto; width:100%; height:48px; min-height:48px; border-radius:8px; font-size:11px !important; line-height:1.2; padding:5px; }
.slot-compact.slot-wide-controls .slot-controls-plane { grid-template-columns:repeat(3,minmax(0,1fr)); }
.slot-compact.slot-wide-controls .slot-controls .slot-bet-card { grid-column:3; grid-row:2; }
.slot-compact.slot-wide-controls[data-game="olympus"] .slot-controls .slot-bet-card { grid-column:2 / -1; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto 44px; gap:3px 12px; padding:7px 10px; }
.slot-compact.slot-wide-controls[data-game="olympus"] .slot-controls .slot-chance { grid-column:2; grid-row:1; font-size:10px; }
.slot-compact.slot-wide-controls[data-game="olympus"] .slot-controls #ante { grid-column:2; grid-row:2; }
.slot-compact.slot-wide-controls .slot-spin-controls { grid-row:3; max-width:580px; justify-self:center; }
.slot-dialog input,.slot-dialog button,.slot-dialog label { touch-action:manipulation; }
.slot-dialog-head button { width:44px; height:44px; }
.slot-auto-options label { min-height:44px; }
.slot-auto-options input { width:44px; height:44px; }
.slot-auto-options input:checked:after { font-size:29px; line-height:42px; }
.slot-count-slider input { height:44px; }
.slot-count-slider input::-webkit-slider-thumb { width:36px; height:36px; margin-top:-17px; }
.slot-count-slider input::-moz-range-thumb { width:34px; height:34px; }
@media(max-width:420px){.slot-auto-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:18px 4px}.slot-auto-options label{flex-direction:column;justify-content:flex-start;text-align:center;font-size:10px;gap:7px}.slot-dialog h2{font-size:13px;padding-right:5px}.slot-count-slider{padding-inline:12px;gap:16px}}
@media(pointer:coarse),(max-width:900px){body:is([data-game="sweet"],[data-game="olympus"]) .game-toolbar{flex-wrap:wrap;gap:6px}body:is([data-game="sweet"],[data-game="olympus"]) .game-toolbar .button{min-height:44px;flex:1 1 auto;font-size:11px}body:is([data-game="sweet"],[data-game="olympus"]) #rules-dialog .icon-button{width:44px;height:44px}}
@media(min-width:700px) and (max-height:500px){.slot-game.slot-compact{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(280px,1fr);align-items:center;background:#08060a}.slot-compact .slot-controls{border-top:0;border-left:1px solid #f0c97944}.slot-compact .slot-controls-plane{gap:7px;padding:8px}.slot-compact .slot-controls .slot-frame{min-height:66px}.slot-compact .slot-controls .slot-purchase>span{font-size:10px}.slot-compact .slot-spin-controls{height:64px}.slot-compact .slot-spin{width:60px;height:60px;min-height:60px}.slot-compact .slot-status{min-height:13px}.slot-compact .slot-money strong{font-size:14px}body[data-game="sweet"] .game-heading,body[data-game="olympus"] .game-heading{margin-bottom:8px}body[data-game="sweet"] .game-heading h1,body[data-game="olympus"] .game-heading h1{font-size:18px}}