/* Mobile is a complete viewport, with one live wheel and one control panel. */ @media (max-width:1100px), (max-width:1400px) and (max-height:600px), (max-width:1400px) and (pointer:coarse){ html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none} #game.mobile-layout{--mobile-dock-height:calc(clamp(310px,42dvh,358px) + env(safe-area-inset-bottom));position:relative;display:block;width:100%;height:var(--mobile-viewport-height,100dvh);min-height:0;max-height:100dvh;overflow:hidden;padding:0;container-type:size} #game.mobile-layout::before{display:none} #game.mobile-layout:not(.landscape-main)>.reference-stage{position:absolute;inset:0;transform:none;width:100%;height:100%;min-height:0;max-width:none;max-height:none;aspect-ratio:auto;margin:0;overflow:hidden;background:#10251c url('../assets/mobile-temple-console.webp') center/100% 100%;box-shadow:none;container-type:size} #game.mobile-layout:not(.landscape-main) .reference-stage>.landscape,#game.mobile-layout:not(.landscape-main) .reference-mobile-scenery,#game.mobile-layout:not(.landscape-main) .reference-video-layer,#game.mobile-layout:not(.landscape-main) .reference-scene-overlay,#game.mobile-layout:not(.landscape-main) .logo-shine-desktop,#game.mobile-layout:not(.landscape-main) .hanging-sign-logo,#game.mobile-layout:not(.landscape-main) .scene-depth{display:none} #game.mobile-layout:not(.landscape-main) .reference-stage>.scene-light{inset:0;z-index:-1;background:linear-gradient(#071f1814 45%,#0820187a 64%,transparent)} #game.mobile-layout:not(.landscape-main) .reference-stage>#atmosphere{height:calc(100% - var(--mobile-dock-height));z-index:0} #game.mobile-layout>.topbar{position:absolute;inset:calc(5px + env(safe-area-inset-top)) calc(7px + env(safe-area-inset-right)) auto auto;display:flex;width:auto;height:36px;margin:0;padding:0;background:none;z-index:40} #game.mobile-layout .toolbar{gap:5px;align-items:center} #game.mobile-layout .toolbar>button{width:30px;height:30px;min-width:30px;padding:0;background:#092c22e8;border:1px solid #c9a863a8;color:#ffdf98;font-size:17px;box-shadow:0 2px 7px #061b11b3} #game.mobile-layout .toolbar .dev-mode-status{display:none} #game.mobile-layout .toolbar #auto-stop{position:fixed;left:8px;top:8px;width:auto;min-width:0;max-width:130px;height:29px;padding:0 8px;font-size:8px;gap:5px;background:#661c19} #game.mobile-layout .toolbar #auto-stop small{font-size:7px} #game.mobile-layout:not(.landscape-main) .reference-stage #main-scene{position:absolute;inset:0 0 var(--mobile-dock-height);display:block;width:100%;height:auto;min-height:0;max-height:none;max-width:none;margin:0;padding:0;overflow:hidden} #game.mobile-layout .adventure-side{display:contents} #game.mobile-layout:not(.landscape-main) .reference-stage .brand{position:absolute;inset:calc(1px + env(safe-area-inset-top)) auto auto 8px;width:calc(100% - 115px);height:clamp(56px,10dvh,90px);max-height:none;display:block;margin:0;transform:none;clip-path:none;z-index:8;filter:drop-shadow(0 3px 3px #092415)} #game.mobile-layout:not(.landscape-main) .brand h1,#game.mobile-layout:not(.landscape-main) .brand-logo{width:100%;height:100%;margin:0;object-fit:contain;object-position:center} #game.mobile-layout:not(.landscape-main) .logo-shine-mobile{display:none} #game.mobile-layout:not(.landscape-main) .mobile-wheel-window{position:absolute;inset:calc(clamp(56px,10dvh,90px) + env(safe-area-inset-top)) 0 0;overflow:hidden;container-type:size;isolation:isolate} #game.mobile-layout:not(.landscape-main) .reference-stage .wheel-area{position:absolute;left:50%;top:12px;right:auto;bottom:auto;width:min(132cqw,136cqh);height:auto;max-width:none;aspect-ratio:1;margin:0;transform:translateX(-50%)} #game.mobile-layout:not(.landscape-main) .reference-stage .wheel-halo{display:block;position:absolute;inset:1%;background:#b2811e;box-shadow:0 0 25px #ffd36b69} #game.mobile-layout:not(.landscape-main) .reference-stage .wheel-frame{position:absolute;inset:3%;width:auto;height:auto;overflow:hidden;transform:none;border:5px solid #b7832d;border-radius:50%;background:#49300a;box-shadow:0 0 0 2px #ffe8a0,0 0 0 5px #714916,0 8px 22px #000b} #game.mobile-layout:not(.landscape-main) .reference-stage #wheel{position:relative;inset:auto;width:100%;height:100%;border-radius:50%;display:block} #game.mobile-layout:not(.landscape-main) .reference-stage .wheel-hub{position:absolute;inset:31%;width:auto;height:auto} #game.mobile-layout:not(.landscape-main) .reference-stage .pointer{position:absolute;top:-4%;left:44.84375%;width:10.625%;height:11.5625%;display:block;opacity:1;background:none;border:0;clip-path:polygon(0 0,100% 0,50% 100%);z-index:8} #game.mobile-layout .reference-pointer-art{width:100%;height:100%} #game.mobile-layout:not(.landscape-main) .main-pointer-cleanplate,#game.mobile-layout:not(.landscape-main) #host{display:none!important} #game.mobile-layout:not(.landscape-main) .reference-stage>.monkey-host{height:calc(100% - var(--mobile-dock-height));z-index:9} #game.mobile-layout:not(.landscape-main) .reference-stage #betting-dock{position:absolute;inset:auto env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);width:auto;height:calc(var(--mobile-dock-height) - env(safe-area-inset-bottom));min-height:0;max-height:none;padding:10px 10px 8px;margin:0;overflow:visible;border:0;background:linear-gradient(#170f08e8,#17150ee8),url('../assets/mobile-temple-console.webp') center bottom/100% auto;box-shadow:0 -2px 0 #e2b65a,0 -5px 0 #553513,0 -12px 28px #07160b9c;z-index:15} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls{position:relative;inset:auto;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:40px minmax(100px,1fr) 38px 40px 50px;gap:6px;width:100%;height:100%;max-width:640px;min-height:0;padding:0;margin:0 auto;align-items:stretch} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities,#game.mobile-layout:not(.landscape-main) .reference-stage .hanging-sign,#game.mobile-layout:not(.landscape-main) .hanging-sign-sway,#game.mobile-layout:not(.landscape-main) .reference-stage .hanging-sign .spin-area,#game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .session-actions{display:contents;position:static;inset:auto;transform:none;animation:none;contain:none} #game.mobile-layout:not(.landscape-main) .brick-console-art,#game.mobile-layout:not(.landscape-main) .hanging-sign-art,#game.mobile-layout:not(.landscape-main) .console-frame-art,#game.mobile-layout:not(.landscape-main) .console-beam-art,#game.mobile-layout:not(.landscape-main) .console-center-art,#game.mobile-layout:not(.landscape-main) .console-edge-art{display:none} #game.mobile-layout:not(.landscape-main) .reference-stage #round-message{position:absolute;left:50%;bottom:calc(100% + 5px);width:90%;height:1px;overflow:hidden;clip-path:inset(50%);padding:0;margin:0;font-size:10px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .console-panel{min-width:0;min-height:0;margin:0;padding:0;aspect-ratio:auto;isolation:auto} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .balance-meter{position:relative;inset:auto;grid-column:1/3;grid-row:1;display:flex;width:auto;height:auto;align-items:center;justify-content:center;flex-direction:column;gap:2px;min-height:0;background:#101b13;border:1px solid #a5843c;border-radius:4px;box-shadow:inset 0 0 9px #0008} #game.mobile-layout:not(.landscape-main) .balance-meter>.reference-skin,#game.mobile-layout:not(.landscape-main) .increment>.reference-skin{display:none} #game.mobile-layout:not(.landscape-main) .balance-meter::before{content:'BALANCE';color:#e4c37e;font-size:8px;letter-spacing:.07em;line-height:1} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .balance-meter strong{position:static;display:block;width:100%;height:auto;margin:0;padding:0;inset:auto;font:400 clamp(14px,3.8vw,20px)/1.1 var(--game-font);text-align:center;text-shadow:0 1px 3px #000;color:#fff0c0;overflow:hidden;text-overflow:ellipsis} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .total-meter{display:contents;position:static;border:0;transform:none} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .console-readout{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;grid-row:1;padding:0 3px;border:1px solid #977438;border-radius:4px;background:#101b13;box-shadow:inset 0 0 9px #0008} #game.mobile-layout:not(.landscape-main) .last-win-readout{grid-column:3/5} #game.mobile-layout:not(.landscape-main) .total-bet-readout{grid-column:5/7} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .console-readout>span{position:static;inset:auto;display:block;width:auto;height:auto;padding:0;margin:0;color:#d8b974;font:400 8px/1 var(--game-font);background:none;letter-spacing:.02em;white-space:nowrap} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .total-meter .console-readout strong{position:static;inset:auto;width:100%;height:auto;padding:0;margin:0;text-align:center;font:400 clamp(12px,min(3.8vw,calc(105px / var(--console-amount-length,4))),18px)/1.1 var(--game-font);color:#ffefbb} #game.mobile-layout:not(.landscape-main) #available{display:none} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .categories{position:relative;inset:auto;display:grid;grid-column:1/-1;grid-row:2;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:6px;width:auto;height:auto;margin:0;padding:0;min-height:0;min-width:0;max-width:none} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .bet-category{position:relative;inset:auto;display:block;width:100%;height:100%;min-width:0;min-height:0;max-width:none;aspect-ratio:auto;margin:0;padding:0;border:0;border-radius:4px;background:linear-gradient(#1a1a0e,#090e09);box-shadow:0 2px 4px #0009;overflow:visible} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .reference-skin{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .balance-meter>.reference-skin,#game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment>.reference-skin{display:none} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .stake-badge{top:2px;left:50%;bottom:auto;max-width:95%;height:auto;min-height:0;transform:translateX(-50%);padding:1px 5px;border:1px solid #e2c576;border-radius:3px;background:linear-gradient(#fff0b3,#dba552);box-shadow:0 1px 3px #000c;color:#3c260a;font:400 clamp(8px,2.4vw,11px)/1.2 var(--game-font);z-index:6} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .bet-actions{position:relative;inset:auto;display:grid;grid-column:1/-1;grid-row:3;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;transform:none;width:auto;height:auto;min-height:0;margin:0;padding:0} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .bet-actions button{display:flex;gap:4px;width:100%;height:100%;min-height:0;min-width:0;margin:0;padding:0 2px;border:1px solid #96773c;border-radius:4px;background:linear-gradient(#3d3320,#1b2014);box-shadow:inset 0 1px #fbdc8b25;font:400 12px/1 var(--game-font);color:#efdaad} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .bet-actions button span{font:400 9px/1 var(--game-font);margin:0;letter-spacing:0} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment{position:relative;inset:auto;grid-column:1/-1;grid-row:4;width:auto;height:auto;display:flex;align-items:center;justify-content:center;gap:12px;min-height:0;aspect-ratio:auto;background:#101b13;border:1px solid #977438;border-radius:5px} #game.mobile-layout:not(.landscape-main) .increment::before{content:'BET AMOUNT';color:#dfc07c;font:400 8px/1 var(--game-font);letter-spacing:.04em} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment>div{position:relative;inset:auto;display:grid;grid-template-columns:32px minmax(50px,80px) 32px;align-items:center;gap:6px;width:auto;height:100%;aspect-ratio:auto;transform:none} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment strong{position:static;display:block;inset:auto;width:auto;height:auto;min-width:0;margin:0;padding:0;text-align:center;font:400 16px/1 var(--game-font);color:#fff1ca} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment button{position:relative;inset:auto;width:30px;height:30px;min-width:0;min-height:0;padding:0;display:grid;place-items:center;border:1px solid #ffe5a0;border-radius:50%;background:radial-gradient(ellipse at 35% 20%,#fff0aa,#e8b747 45%,#a16a19 72%,#edc66b);box-shadow:0 1px 3px #000b;color:#2c1c07} #game.mobile-layout:not(.landscape-main) .reference-stage .increment #minus::before{content:'−';font:26px/1 Arial,sans-serif;text-shadow:0 1px #ffe69a} #game.mobile-layout:not(.landscape-main) .reference-stage .increment #plus::before{content:'+';font:26px/1 Arial,sans-serif;text-shadow:0 1px #ffe69a} #game.mobile-layout:not(.landscape-main) .reference-stage .hanging-sign #spin{position:relative;inset:auto;grid-row:5;grid-column:3/5;width:100%;height:100%;min-height:0;display:flex;align-items:center;justify-content:center;gap:5px;margin:0;padding:0 2px;transform:none;border:0;border-radius:6px;background:transparent;box-shadow:none;color:#fff2bf;font:400 clamp(19px,5.5vw,26px)/1 var(--game-font);letter-spacing:.03em} #game.mobile-layout:not(.landscape-main) .spin-button-art{inset:0;width:100%;height:100%;object-fit:fill} #game.mobile-layout:not(.landscape-main) .spin-glyph{font:24px/1 Arial,sans-serif} #game.mobile-layout:not(.landscape-main) .reference-stage .session-actions button{position:relative;inset:auto;grid-row:5;width:100%;height:100%;min-width:0;min-height:0;padding:0 4px;border:1px solid #d3ae5d;border-radius:6px;color:#ffe9aa;font:400 clamp(8px,2.35vw,11px)/1.15 var(--game-font);box-shadow:inset 0 0 0 2px #ead29b20,0 2px 4px #0008;letter-spacing:.015em} #game.mobile-layout:not(.landscape-main) .reference-stage #autoplay-button{grid-column:1/3;background:linear-gradient(#8e3425,#4e1b17)} #game.mobile-layout:not(.landscape-main) .reference-stage #history-button{grid-column:5/7;background:linear-gradient(#205176,#102b4a)} #game.mobile-layout.bonus-mode>.reference-stage{display:none} #game.mobile-layout.bonus-mode>#bonus-scene{position:absolute;inset:0;width:100%;height:100%;min-width:0;min-height:0;max-width:none;max-height:none;overflow:hidden;padding:0;margin:0;container-type:size;isolation:isolate;box-shadow:none} #game.mobile-layout>#transition{position:absolute;inset:0;transform:none;width:100%;height:100%;min-height:0;max-width:none;max-height:none} #game.mobile-layout .snake-door-surface{height:100%;width:100%} #game.mobile-layout .snake-chain-sign{max-height:80%} #game.mobile-layout #toast{max-width:calc(100% - 28px);bottom:calc(12px + env(safe-area-inset-bottom));padding:9px 12px;font-size:11px;text-align:center} .autoplay-dialog{max-height:calc(100dvh - 20px)} #game.mobile-layout #info-dialog{max-height:calc(100dvh - 20px);width:min(720px,calc(100vw - 16px));max-width:calc(100vw - 16px);margin:auto} #game.mobile-layout #info-dialog>.dialog-heading{padding:12px 14px 9px} #game.mobile-layout #info-body{padding:0 14px 16px;font-size:12px} #game.mobile-layout .dialog-heading h2{font-size:18px} #game.mobile-layout #info-body h3{font-size:18px} #game.mobile-layout #info-body table{font-size:10px} #game.mobile-layout #info-body td,#game.mobile-layout #info-body th{padding:6px 4px} .history-dialog{max-height:calc(100dvh - 12px)} .dev-tools{max-height:calc(100dvh - 70px);overflow:auto} } @media (max-width:1100px) and (orientation:landscape), (max-width:1400px) and (max-height:600px) and (orientation:landscape), (max-width:1400px) and (pointer:coarse) and (orientation:landscape){ #game.mobile-layout{--mobile-dock-height:0px;--mobile-console-width:52%} #game.mobile-layout:not(.landscape-main)>.reference-stage{background-size:100% auto;background-position:center 45%} #game.mobile-layout:not(.landscape-main) .reference-stage #main-scene{inset:0 var(--mobile-console-width) 0 0;width:auto;overflow:hidden} #game.mobile-layout:not(.landscape-main) .reference-stage .brand{left:8px;top:4px;width:calc(100% - 16px);height:42px} #game.mobile-layout:not(.landscape-main) .mobile-wheel-window{inset:47px 0 0;overflow:visible} #game.mobile-layout:not(.landscape-main) .reference-stage .wheel-area{top:7px;width:min(101cqw,140cqh)} #game.mobile-layout:not(.landscape-main) .reference-stage #betting-dock{inset:0 env(safe-area-inset-right) env(safe-area-inset-bottom) auto;width:calc(var(--mobile-console-width) - env(safe-area-inset-right));height:auto;padding:41px 9px 7px;border-left:2px solid #b99247;box-shadow:-3px 0 0 #352710,-7px 0 20px #0008;background:linear-gradient(#171207ea,#151910ef),url('../assets/mobile-temple-console.webp') center bottom/100% auto} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls{grid-template-rows:30px minmax(68px,1fr) 29px 32px 39px;gap:5px;max-width:640px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment button{width:28px;height:28px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment strong{font-size:14px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .balance-meter strong{font-size:12px} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .console-readout>span,#game.mobile-layout:not(.landscape-main) .balance-meter::before{font-size:7px} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .total-meter .console-readout strong{font-size:12px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .stake-badge{font-size:8px;top:1px} #game.mobile-layout:not(.landscape-main) .reference-stage .hanging-sign #spin{font-size:20px;gap:4px} #game.mobile-layout:not(.landscape-main) .reference-stage .session-actions button{font-size:9px} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .bet-actions button span{font-size:8px} #game.mobile-layout:not(.landscape-main) .reference-stage>#atmosphere,#game.mobile-layout:not(.landscape-main) .reference-stage>.monkey-host{width:calc(100% - var(--mobile-console-width));height:100%} #game.mobile-layout .toolbar>button{width:28px;height:28px;min-width:28px} .autoplay-heading{padding:10px 16px}.autoplay-heading h2{font-size:18px}.autoplay-heading p{display:none}.autoplay-content{padding:10px 16px}.autoplay-wager{padding:6px}.autoplay-wager strong{font-size:24px;margin:4px}.autoplay-allocation{margin:6px 0}.autoplay-allocation span{padding:3px 5px}#autoplay-description{font-size:9px;line-height:1.4;margin-bottom:8px}.autoplay-counts button{padding:8px 2px}.autoplay-counts strong{font-size:20px}.autoplay-note{margin:8px 0 0;font-size:7px} } @media (max-width:1100px), (max-width:1400px) and (max-height:600px), (max-width:1400px) and (pointer:coarse){ #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .balance-meter,#game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .console-readout,#game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .bet-actions button,#game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment,#game.mobile-layout:not(.landscape-main) .reference-stage .session-actions button{border:7px solid transparent;border-image:url('../assets/mobile-gold-frame.webp') 22% / 12px / 0 stretch;background-clip:padding-box} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .console-readout{padding:0 2px;gap:1px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .balance-meter{gap:1px} #game.mobile-layout:not(.landscape-main) .reference-stage .session-actions button{border-image-width:15px;font-size:clamp(8px,2.2vw,11px)} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment button{width:32px;height:32px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment>div{height:calc(100% + 12px)} } @media(max-width:360px) and (orientation:portrait){#game.mobile-layout:not(.landscape-main) .reference-stage .console-controls{gap:5px;grid-template-rows:38px minmax(96px,1fr) 36px 38px 48px}} @media (max-width:1100px) and (orientation:landscape), (max-width:1400px) and (max-height:600px) and (orientation:landscape), (max-width:1400px) and (pointer:coarse) and (orientation:landscape){ #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .balance-meter,#game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .console-readout,#game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .bet-actions button,#game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment{border-width:4px;border-image-width:10px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment button{width:28px;height:28px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment>div{height:calc(100% + 6px)} } @media (max-width:1100px), (max-width:1400px) and (max-height:600px), (max-width:1400px) and (pointer:coarse){ #game.mobile-layout>#transition.snake-cinematic{position:absolute;inset:0;transform:none;width:100%;height:100%} #game.mobile-layout .snake-cinematic-door.left,#game.mobile-layout .snake-cinematic-door.right{width:50%} #game.mobile-layout .snake-cinematic-door.left .snake-cinematic-door-art,#game.mobile-layout .snake-cinematic-door.right .snake-cinematic-door-art{width:max(100vw,177.6833157dvh);height:auto;top:50%;transform:translate(var(--door-source-shift,-50%),-50%)} #game.mobile-layout .snake-cinematic-door.left .snake-cinematic-door-art{left:100%;right:auto} #game.mobile-layout .snake-cinematic-door.right .snake-cinematic-door-art{left:0;right:auto} #game.mobile-layout .snake-chain-sign{width:min(100%,620px);max-height:none} } @media (max-width:1100px) and (orientation:landscape), (max-width:1400px) and (max-height:600px) and (orientation:landscape), (max-width:1400px) and (pointer:coarse) and (orientation:landscape){ #game.mobile-layout .snake-chain-sign{width:min(66vw,104dvh);top:-33dvh} #game.mobile-layout .snake-chain-copy{left:14%;right:14%;top:55%;height:32%;gap:3px} #game.mobile-layout .snake-chain-title,#game.mobile-layout .snake-chain-discovery .snake-chain-title{height:17px} #game.mobile-layout .snake-chain-lead,#game.mobile-layout .snake-chain-detail{font-size:10px;line-height:1.25} #game.mobile-layout .snake-chain-emblems{display:none} #game.mobile-layout .snake-chain-discovery .snake-chain-emblems{display:flex;height:24px;gap:18px} #game.mobile-layout .snake-chain-discovery .snake-chain-snake,#game.mobile-layout .snake-chain-discovery .snake-chain-net{height:22px;width:22px} #game.mobile-layout .snake-chain-discovery .snake-chain-golden{height:25px;width:25px} #game.mobile-layout .snake-chain-winnings.has-stake-return{gap:2px} #game.mobile-layout .has-stake-return .snake-finale-title{height:22px} #game.mobile-layout .has-stake-return .snake-finale-amount{height:28px} #game.mobile-layout .snake-finale-multiplier{height:11px} #game.mobile-layout .snake-finale-stake-return{font-size:8px;line-height:1.2} } @media (min-width:901px){.reference-stage .reference-utilities .session-actions{min-height:28px}.reference-stage .session-actions button{min-height:28px}} @media (min-width:901px) and (max-width:1100px) and (orientation:landscape) and (min-height:601px){ #game.mobile-layout:not(.landscape-main) .reference-stage #betting-dock{display:flex;align-items:center;padding-top:48px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls{height:min(100%,510px);grid-template-rows:46px minmax(120px,1fr) 44px 44px 56px;gap:8px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .balance-meter strong,#game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .total-meter .console-readout strong{font-size:17px} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .console-readout>span,#game.mobile-layout:not(.landscape-main) .balance-meter::before{font-size:9px} #game.mobile-layout:not(.landscape-main) .reference-stage .session-actions button{font-size:12px} #game.mobile-layout:not(.landscape-main) .reference-stage .hanging-sign #spin{font-size:28px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment button{width:36px;height:36px} #game.mobile-layout:not(.landscape-main) .reference-stage .wheel-area{top:max(7px,calc((100cqh - 101cqw)/2))} #game.mobile-layout:not(.landscape-main) .reference-stage .brand{top:15px;height:72px} } /* Preserve all betting actions when landscape browser chrome leaves a very short viewport. */ @media (max-width:1400px) and (max-height:300px) and (orientation:landscape){ #game.mobile-layout:not(.landscape-main) .reference-stage #betting-dock{padding-top:34px;padding-bottom:2px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls{grid-template-rows:28px minmax(56px,1fr) 28px 28px 32px;gap:3px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment button{width:28px;height:28px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment strong,#game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .balance-meter strong,#game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .total-meter .console-readout strong{font-size:11px} #game.mobile-layout:not(.landscape-main) .reference-stage .hanging-sign #spin{font-size:17px} #game.mobile-layout:not(.landscape-main) .reference-stage .session-actions button{border-width:4px;border-image-width:10px;font-size:8px} } /* Short portrait phones reserve more room for the live wheel. */ @media (max-width:1100px) and (max-height:650px) and (orientation:portrait){ #game.mobile-layout{--mobile-dock-height:calc(272px + env(safe-area-inset-bottom))} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls{grid-template-rows:38px minmax(84px,1fr) 30px 34px 44px;gap:5px} #game.mobile-layout:not(.landscape-main) .reference-stage .session-actions button{font-size:8px;border-image-width:12px} } /* The logo caps the pointer; Spin owns the console's lower edge. */ @media (max-width:1100px), (max-width:1400px) and (max-height:600px), (max-width:1400px) and (pointer:coarse){ #game.mobile-layout{--mobile-crown-height:clamp(90px,12dvh,116px)} #game.mobile-layout:not(.landscape-main) .reference-stage .brand{inset:auto;left:50%;top:var(--mobile-logo-top,4px);width:86%;height:var(--mobile-crown-height);transform:translateX(-50%);z-index:10;pointer-events:none} #game.mobile-layout:not(.landscape-main) .mobile-wheel-window{top:calc(var(--mobile-crown-height) * .75 + env(safe-area-inset-top))} #game.mobile-layout:not(.landscape-main) .reference-stage .hanging-sign #spin{grid-column:1/-1;font-size:clamp(30px,8vw,42px);gap:10px;padding:0 24px;border-radius:12px} #game.mobile-layout:not(.landscape-main) .spin-glyph{font-size:1.1em} #game.mobile-layout:not(.landscape-main) .reference-stage .session-actions button{position:absolute;top:-35px;bottom:auto;width:31%;max-width:150px;height:33px;grid-area:auto;margin:0;z-index:20;border-width:5px;border-image-width:12px;font-size:clamp(9px,2.5vw,12px);box-shadow:0 3px 5px #0008} #game.mobile-layout:not(.landscape-main) .reference-stage #autoplay-button{left:0;right:auto;grid-area:auto} #game.mobile-layout:not(.landscape-main) .reference-stage #history-button{left:auto;right:0;grid-area:auto} } @media(max-width:1100px) and (orientation:portrait){ #game.mobile-layout{--mobile-dock-height:calc(clamp(324px,44dvh,378px) + env(safe-area-inset-bottom))} #game.mobile-layout:not(.landscape-main) .reference-stage #betting-dock{padding-top:18px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls{grid-template-rows:40px minmax(96px,1fr) 34px 36px 68px;gap:5px} } @media(max-width:1100px) and (max-height:650px) and (orientation:portrait){ #game.mobile-layout{--mobile-dock-height:calc(300px + env(safe-area-inset-bottom))} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls{grid-template-rows:38px minmax(84px,1fr) 30px 34px 62px;gap:4px} } @media(max-width:1100px) and (max-height:520px) and (orientation:portrait){ #game.mobile-layout{--mobile-dock-height:calc(280px + env(safe-area-inset-bottom));--mobile-crown-height:80px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls{grid-template-rows:38px minmax(64px,1fr) 28px 32px 58px;gap:4px} } @media (max-width:1100px) and (orientation:landscape), (max-width:1400px) and (max-height:600px) and (orientation:landscape), (max-width:1400px) and (pointer:coarse) and (orientation:landscape){ #game.mobile-layout{--mobile-crown-height:clamp(54px,18dvh,100px)} #game.mobile-layout:not(.landscape-main) .reference-stage #betting-dock{padding-top:72px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls{grid-template-rows:30px minmax(62px,1fr) 28px 30px 46px;gap:4px} #game.mobile-layout:not(.landscape-main) .reference-stage .session-actions button{top:-33px;height:29px;font-size:9px;width:34%} #game.mobile-layout:not(.landscape-main) .reference-stage .hanging-sign #spin{font-size:30px} } @media (min-width:901px) and (max-width:1100px) and (orientation:landscape) and (min-height:601px){ #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls{grid-template-rows:46px minmax(120px,1fr) 44px 44px 72px;gap:8px} #game.mobile-layout:not(.landscape-main) .reference-stage .session-actions button{top:-39px;height:35px;font-size:12px} #game.mobile-layout:not(.landscape-main) .reference-stage .hanging-sign #spin{font-size:38px} } @media (max-width:1400px) and (max-height:300px) and (orientation:landscape){ #game.mobile-layout:not(.landscape-main) .reference-stage #betting-dock{padding-top:32px;padding-bottom:2px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls{grid-template-rows:28px minmax(62px,1fr) 28px 28px 40px;gap:1px} #game.mobile-layout:not(.landscape-main) .reference-stage .session-actions button{top:-31px;width:30%;height:28px;font-size:8px} #game.mobile-layout:not(.landscape-main) .reference-stage .hanging-sign #spin{font-size:26px} #game.mobile-layout:not(.bonus-mode)>.topbar{right:calc(52% + 4px);top:4px} #game.mobile-layout:not(.bonus-mode) .toolbar>button{width:28px;height:28px;min-width:28px;font-size:14px} } /* Compact three-piece bet selector and final alignment on the console lip. */ @media (max-width:1100px), (max-width:1400px) and (max-height:600px), (max-width:1400px) and (pointer:coarse){ #game.mobile-layout:not(.landscape-main) .reference-stage .brand{left:calc(50% - 4px);top:calc(var(--mobile-logo-top,4px) + 1px)} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment{--bet-step-size:32px;justify-self:center;display:block;width:min(100%,220px);height:100%;padding:0;gap:0;border:0;border-image:none;border-radius:0;background:none;box-shadow:none;overflow:visible} #game.mobile-layout:not(.landscape-main) .increment::before{position:absolute;left:calc(var(--bet-step-size) + 6px);right:calc(var(--bet-step-size) + 6px);top:5px;width:auto;height:8px;z-index:3;font:400 7px/1 var(--game-font);letter-spacing:.055em;text-align:center;pointer-events:none} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment>div{position:relative;inset:auto;display:grid;grid-template-columns:var(--bet-step-size) minmax(0,1fr) var(--bet-step-size);grid-template-rows:minmax(0,1fr);align-items:center;gap:6px;width:100%;height:100%;aspect-ratio:auto;transform:none} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment strong{position:relative;inset:auto;display:flex;align-items:flex-end;justify-content:center;width:100%;height:100%;min-width:0;padding:10px 5px 1px;border:3px solid transparent;border-image:url('../assets/mobile-gold-frame.webp') 22% / 9px / 0 stretch;border-radius:3px;background:radial-gradient(ellipse at 50% 0,#234631,#091b13 80%);background-clip:padding-box;font:400 15px/1 var(--game-font);letter-spacing:.025em;color:#fff0c0;box-shadow:0 2px 4px #0006} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment button{position:relative;inset:auto;display:grid;place-items:center;width:var(--bet-step-size);height:var(--bet-step-size);padding:0;border:1px solid #f7d986;border-radius:4px;background:linear-gradient(150deg,#f6d77c,#d59c33 48%,#946218 51%,#d6a744);color:#2d1e0b;box-shadow:inset 0 0 0 2px #70430f7a,inset 0 3px 3px #fff1b56b,0 2px 3px #0007;overflow:hidden} #game.mobile-layout:not(.landscape-main) .reference-stage .increment #minus::before,#game.mobile-layout:not(.landscape-main) .reference-stage .increment #plus::before{font:26px/1 Arial,sans-serif;text-shadow:0 1px #ffedb2} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment button:not(:disabled):is(:hover,:focus-visible){background:linear-gradient(150deg,#ffe9a0,#ebba50 48%,#ad7722 51%,#edbe62);box-shadow:inset 0 0 0 2px #9c6a21,0 0 9px #efc6645e;filter:brightness(1.06)} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment button:disabled::after{border-radius:3px} } @media(max-width:1100px) and (orientation:portrait){ #game.mobile-layout:not(.landscape-main) .reference-stage .session-actions button{top:-53px} } @media(max-width:1100px) and (max-height:520px) and (orientation:portrait){ #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment{--bet-step-size:30px} #game.mobile-layout:not(.landscape-main) .increment::before{top:4px;font-size:6px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment strong{font-size:13px;padding-top:9px;padding-bottom:0} } @media (max-width:1100px) and (orientation:landscape), (max-width:1400px) and (max-height:600px) and (orientation:landscape), (max-width:1400px) and (pointer:coarse) and (orientation:landscape){ #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment{--bet-step-size:28px;width:min(100%,206px)} #game.mobile-layout:not(.landscape-main) .increment::before{top:4px;font-size:6px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment strong{font-size:12px;padding-top:8px;padding-bottom:2px} } @media (min-width:901px) and (max-width:1100px) and (orientation:landscape) and (min-height:601px){ #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment{--bet-step-size:40px;width:250px} #game.mobile-layout:not(.landscape-main) .increment::before{top:7px;font-size:8px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment strong{font-size:18px;padding-top:12px;padding-bottom:4px} } /* Let the navigation frames rest flush against the console's outer sides. */ @media(max-width:1100px) and (orientation:portrait){ #game.mobile-layout:not(.landscape-main) .reference-stage #autoplay-button{left:calc((100% - 100cqw) / 2)} #game.mobile-layout:not(.landscape-main) .reference-stage #history-button{right:calc((100% - 100cqw) / 2)} } @media (max-width:1100px) and (orientation:landscape), (max-width:1400px) and (max-height:600px) and (orientation:landscape), (max-width:1400px) and (pointer:coarse) and (orientation:landscape){ #game.mobile-layout:not(.landscape-main) .reference-stage #autoplay-button{left:calc((100% - (52cqw - env(safe-area-inset-right))) / 2 - 1px)} #game.mobile-layout:not(.landscape-main) .reference-stage #history-button{right:calc((100% - (52cqw - env(safe-area-inset-right))) / 2 + 1px)} } /* All three wallet readouts share one type scale, fitted to the longest amount. */ @media (max-width:1100px), (max-width:1400px) and (max-height:600px), (max-width:1400px) and (pointer:coarse){ #game.mobile-layout:not(.landscape-main) .console-controls{--mobile-readout-max-size:16px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .balance-meter,#game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .console-readout{padding:0 3px;gap:2px} #game.mobile-layout:not(.landscape-main) .balance-meter::before,#game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .console-readout>span{font:400 8px/1 var(--game-font);letter-spacing:.04em;color:#dfc280;text-shadow:0 1px 2px #07170e;white-space:nowrap} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .balance-meter strong,#game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .total-meter .console-readout strong{display:block;width:100%;height:auto;margin:0;padding:0;font:400 var(--mobile-readout-size,16px)/1 var(--game-font);letter-spacing:0;text-align:center;color:#fff0c0;text-shadow:0 1px 3px #000;white-space:nowrap;overflow:visible;text-overflow:clip} } @media (max-width:1100px) and (orientation:landscape), (max-width:1400px) and (max-height:600px) and (orientation:landscape), (max-width:1400px) and (pointer:coarse) and (orientation:landscape){ #game.mobile-layout:not(.landscape-main) .console-controls{--mobile-readout-max-size:12px} #game.mobile-layout:not(.landscape-main) .balance-meter::before,#game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .console-readout>span{font-size:7px} } @media (min-width:901px) and (max-width:1100px) and (orientation:landscape) and (min-height:601px){ #game.mobile-layout:not(.landscape-main) .console-controls{--mobile-readout-max-size:17px} #game.mobile-layout:not(.landscape-main) .balance-meter::before,#game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .console-readout>span{font-size:9px} } /* Tablets use the available space for readable controls, rather than enlarging the wheel alone. */ @media (min-width:700px) and (max-width:1400px) and (min-height:650px){ #game.mobile-layout{--mobile-crown-height:clamp(150px,14dvh,192px)} #game.mobile-layout>.topbar{top:calc(12px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));height:44px} #game.mobile-layout .toolbar{gap:9px} #game.mobile-layout .toolbar>button{width:44px;height:44px;min-width:44px;font-size:24px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls{--mobile-readout-max-size:26px;max-width:100%;gap:clamp(8px,.8dvh,12px);grid-template-rows:clamp(54px,4.8dvh,68px) minmax(0,1fr) clamp(44px,3.8dvh,54px) clamp(48px,4.2dvh,60px) clamp(76px,7dvh,98px)} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .balance-meter,#game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .console-readout{gap:5px;border-width:7px;border-image-width:16px} #game.mobile-layout:not(.landscape-main) .balance-meter::before,#game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .console-readout>span{font-size:clamp(10px,1.15vw,13px)} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .categories{gap:clamp(10px,1.3vw,16px)} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .stake-badge{font-size:clamp(12px,1.45vw,16px);padding:2px 8px;top:3px} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .bet-actions{gap:10px} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .bet-actions button{border-image-width:16px;font-size:19px;gap:7px} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .bet-actions button span{font-size:clamp(12px,1.3vw,16px)} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment{--bet-step-size:48px;width:clamp(300px,38vw,410px)} #game.mobile-layout:not(.landscape-main) .increment::before{top:7px;height:12px;font-size:10px;left:calc(var(--bet-step-size) + 14px);right:calc(var(--bet-step-size) + 14px)} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment>div{gap:12px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment strong{font-size:23px;padding:19px 8px 5px;border-image-width:12px} #game.mobile-layout:not(.landscape-main) .reference-stage .increment #minus::before,#game.mobile-layout:not(.landscape-main) .reference-stage .increment #plus::before{font-size:34px} #game.mobile-layout:not(.landscape-main) .reference-stage .hanging-sign #spin{font-size:clamp(40px,4.8vw,56px);gap:16px} #game.mobile-layout:not(.landscape-main) .reference-stage .session-actions button{top:-70px;height:46px;width:24%;max-width:220px;font-size:clamp(12px,1.4vw,16px);border-image-width:17px} } @media (min-width:700px) and (max-width:1100px) and (min-height:650px) and (orientation:portrait){ #game.mobile-layout{--mobile-dock-height:calc(clamp(474px,46dvh,640px) + env(safe-area-inset-bottom))} #game.mobile-layout:not(.landscape-main) .reference-stage #betting-dock{padding:24px clamp(18px,3vw,34px) 14px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls{height:100%} #game.mobile-layout:not(.landscape-main) .reference-stage .wheel-area{top:16px;width:min(92cqw,132cqh)} } @media (min-width:700px) and (max-width:1400px) and (min-height:650px) and (orientation:landscape){ #game.mobile-layout:not(.landscape-main) .reference-stage #betting-dock{display:flex;align-items:center;padding:92px 20px 28px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls{height:min(100%,640px)} #game.mobile-layout:not(.landscape-main) .reference-stage .wheel-area{width:min(92cqw,94cqh);top:max(22px,calc((100cqh - min(92cqw,94cqh))/2))} #game.mobile-layout:not(.landscape-main) .reference-stage .session-actions button{top:-60px;width:32%;height:46px} #game.mobile-layout:not(.landscape-main) .reference-stage .console-controls .increment{width:min(88%,360px)} #game.mobile-layout:not(.landscape-main) .reference-stage .reference-utilities .bet-actions button span{font-size:clamp(11px,1.1vw,15px)} } /* A single safe rectangle protects every bonus; child scenes use local zero insets. */ @media (max-width:1100px), (max-width:1400px) and (max-height:600px), (max-width:1400px) and (pointer:coarse){ #game.mobile-layout.bonus-mode>#bonus-scene:is(.snake-bonus-host,.gorilla-trail-host,.peacock-choice-host,.peacock-race-host,.tiger-bonus-host){ --bonus-safe-area-top:0px;--bonus-safe-area-right:0px;--bonus-safe-area-bottom:0px;--bonus-safe-area-left:0px; inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);width:auto;height:auto;min-height:0 } html:has(#game.mobile-layout) dialog:is(#info-dialog,.autoplay-dialog,.history-dialog){ position:fixed;inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);margin:auto; max-width:calc(100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 16px); max-height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px) } } /* Keep the native range track while making its full touch surface usable. */ @media (max-width:1100px), (max-width:1400px) and (max-height:600px), (max-width:1400px) and (pointer:coarse){ html:has(#game.mobile-layout) #info-dialog .setting input[type=range]{height:44px;min-height:44px;margin-block:0} } /* Portrait's two primary actions form one row; History joins the round utility controls. */ @media (orientation:portrait){ #game.mobile-layout:not(.landscape-main) .mobile-spin-actions{position:relative;display:grid;grid-column:1/-1;grid-row:5;grid-template-columns:auto minmax(0,1fr);gap:7px;align-items:stretch;min-width:0;min-height:0;height:100%;container-type:size} #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #spin{grid-area:auto;inset:auto;min-width:0;width:100%;height:100%;padding:0 14px;gap:9px;font-size:clamp(28px,8vw,42px)} #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button{position:relative;inset:auto;grid-area:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;aspect-ratio:1;width:auto;height:100%;min-width:0;max-width:none;margin:0;padding:9px 5px 8px;border:0;border-radius:10px;background:transparent url('../assets/mobile-autoplay-button.webp') center/100% 100% no-repeat;box-shadow:none;color:#fff0c0;text-shadow:0 1px 2px #092719;font:400 8px/1 var(--game-font);letter-spacing:0;cursor:pointer;overflow:hidden} #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button>.autoplay-icon{display:block;width:27px;height:27px;stroke-width:2.5} #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button .autoplay-play{fill:currentColor;stroke-width:1.2} #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button>span{display:block;font:inherit;font-size:0;line-height:1;transform:translateY(1px)} #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button:disabled{filter:saturate(.5) brightness(.76);color:#dfd6b6;cursor:default} #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button:not(:disabled):hover{filter:brightness(1.1) saturate(1.05)} #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button.is-active{color:#fff5d3;box-shadow:0 0 12px #ffb13555} #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button:focus-visible{outline:2px solid #fff0b1;outline-offset:3px} #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button:not(:disabled):active{transform:translateY(1px)} } @media (orientation:portrait) and (min-width:700px){ #game.mobile-layout:not(.landscape-main) .mobile-spin-actions{gap:12px} #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #spin{font-size:clamp(40px,4.8vw,56px)} #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button{font-size:11px;border-radius:13px} #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button>.autoplay-icon{width:36px;height:36px} } @media (orientation:portrait){ #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button>span::after{content:'AUTO';font-size:8px;line-height:1} #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button.is-active>span::after{content:'STOP'} } @media (orientation:portrait) and (min-width:700px){ #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button>span::after{font-size:11px} } .autoplay-stop{display:none} #autoplay-button.is-active .autoplay-play{display:none} #autoplay-button.is-active .autoplay-stop{display:block;fill:currentColor;stroke:none} /* The compact AUTO and wide SPIN share the same clean gold bevel and face light. */ @media (orientation:portrait){ #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button{ background:none;overflow:visible;isolation:isolate;container-type:size; text-shadow:0 2px 2px #000,0 0 5px #0009; } #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button::before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; border:1px solid transparent;border-image-source:var(--mobile-action-frame);border-image-slice:128;border-image-width:calc(100cqh / 4);border-image-repeat:stretch; border-radius:calc(100cqh * .12); background:linear-gradient(180deg,#ffffff26 0%,#ffffff08 38%,#00000012 51%,transparent 80%),radial-gradient(ellipse at 42% 0%,#72baff33,transparent 72%),linear-gradient(145deg,#1257a0,#081f4d); box-shadow:0 2px 3px #0007,inset 0 -3px 8px #0003; } #game.mobile-layout:not(.landscape-main) .reference-stage .mobile-spin-actions #autoplay-button>.autoplay-icon{ filter:drop-shadow(0 2px 2px #000) drop-shadow(0 0 5px #0009); } }