/* All desktop scene coordinates use the original 1672 x 941 painting. */
body{background:#06170e}
#game{--scene-width:min(100vw,177.6833157svh);min-height:100svh;display:grid;align-content:center;justify-items:center;overflow:hidden}
#game::before{content:'';position:fixed;inset:0;z-index:-5;background:linear-gradient(#05140bc4,#06170edb),url('../assets/reference-scene.png?v=70ac0c6e3e7e') center/cover;filter:blur(12px);transform:scale(1.04);pointer-events:none}
.reference-stage{position:relative;width:var(--scene-width);aspect-ratio:1672/941;container-type:inline-size;isolation:isolate;overflow:hidden;box-shadow:0 0 80px #0009}
.reference-stage .landscape{background:url('../assets/reference-scene.png?v=70ac0c6e3e7e') center/100% auto no-repeat;inset:0;z-index:-3}
.reference-stage .scene-light{display:none}
.reference-mobile-scenery{display:none}
.reference-skin{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}
.reference-stage .main-scene{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;max-height:none;max-width:none;padding:0;margin:0}
.reference-stage .wheel-area{position:absolute;left:13.098086%;top:7.438895%;width:38.277512%;height:auto;aspect-ratio:1;max-width:none;margin:0}
.reference-stage .wheel-halo{display:none}
.reference-stage .wheel-frame{inset:0;border:0;background:none;box-shadow:none;overflow:hidden}
.reference-stage .wheel-frame::after{inset:0;border-radius:50%;box-shadow:inset 0 0 12px #40200888;background:none}
.reference-stage .wheel-hub{inset:33%;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.reference-stage .paw{width:100%;height:100%;background:none;font-size:0;text-shadow:none}
.reference-hub-art{width:100%;height:100%;display:block}
.reference-stage .pointer{opacity:1;left:44.84375%;top:-9.21875%;width:10.625%;height:11.5625%;background:none;border:0;clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 2px 2px #4d270b88)}
.reference-pointer-art{display:block;width:100%;height:100%}
.reference-stage .wheel-door{background:none;border:0;box-shadow:none}
.reference-stage .wheel-door::before,.reference-stage .door-pattern,.reference-stage .door-lock{display:none}
.reference-door-art{position:absolute;top:0;width:200%;height:100%;display:block;max-width:none}
.wheel-door.left .reference-door-art{left:0}.wheel-door.right .reference-door-art{left:-100%}
.reference-stage .adventure-side{position:absolute;inset:0;width:100%;height:100%;display:block}
.reference-stage .brand{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);left:0;top:0;transform:none}
.reference-stage #host{position:absolute;left:54.425837%;top:36.663124%;bottom:auto;width:17.942584%;height:44.633369%;max-width:none;filter:drop-shadow(7px 9px 6px #03140888)}
.reference-stage .spin-area{position:absolute;left:67.105263%;top:57.385760%;right:auto;bottom:auto;width:21.052632%;text-align:center;transform:translateY(-50%)}
.reference-stage .spin-area p{font-size:1.016747cqw;line-height:1.4;min-height:3.229665cqw;margin:0 0 .657895cqw;padding:.299043cqw;color:#ffefc5;text-shadow:0 2px 3px #001a12,0 0 8px #001a12;background:radial-gradient(ellipse,#08281aca,transparent 74%)}
.reference-stage .spin-button{height:4.30622cqw;font-size:2.15311cqw;gap:1.076555cqw;letter-spacing:.179426cqw;border-radius:.598086cqw;border-width:.179426cqw;box-shadow:0 0 0 3px #754916,0 5px 0 #063718,0 8px 18px #0009,inset 0 0 0 2px #e4ffbe42;background:linear-gradient(#479d31,#177034 48%,#0b5227 52%,#238535)}
.reference-stage .spin-glyph{font-size:2.272727cqw}
.topbar{position:absolute;top:0;right:max(0px,calc((100vw - var(--scene-width))/2));height:44px;width:auto;padding:8px 12px;z-index:30}
.toolbar button{width:30px;height:30px;font-size:18px;background:#0b271dd9;border-color:#e7c67780;box-shadow:0 2px 7px #0006}
.reference-stage .betting-dock{position:absolute;inset:0;width:100%;height:100%;min-height:0;padding:0;border:0;background:none;box-shadow:none;z-index:6;pointer-events:none}
.reference-stage .console-controls{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;margin:0;max-width:none;pointer-events:none}
.reference-stage .console-panel{position:absolute;inset:auto;padding:0;border:0;background:none;box-shadow:none;isolation:isolate;text-align:center;min-width:0;pointer-events:auto}
.reference-stage .balance-meter{left:2.093301%;top:86.503719%;width:15.729665%;height:10.733263%;display:block}
.reference-stage .increment{left:18.241627%;top:86.503719%;width:17.942584%;height:10.733263%;display:block}
.reference-stage .balance-meter>span,.reference-stage .increment>span{position:absolute;top:8%;left:15%;width:70%;height:26%;margin:0;display:grid;place-items:center;z-index:2;background:#19170ede;color:#fadd86;font-size:.777512cqw;letter-spacing:.06em;line-height:1}
.reference-stage .balance-meter strong{position:absolute;left:8%;right:8%;top:39%;height:43%;display:grid;place-items:center;color:#fff0c7;font-size:1.674641cqw;letter-spacing:.02em;line-height:1}
.reference-stage .increment>div{position:absolute;inset:auto 0;top:50%;height:auto;aspect-ratio:300/101;transform:translateY(-50%);padding:0;display:block}
.reference-stage .increment strong{position:absolute;left:25%;top:36%;height:48%;display:grid;place-items:center;font-size:1.614833cqw;min-width:0;width:46.333333%;line-height:1;letter-spacing:.02em}
.reference-stage .increment #minus{left:4%}.reference-stage .increment #plus{left:72.833333%;right:auto}
.reference-stage .increment button{position:absolute;top:24.752475%;height:55.445545%;width:18.666667%;padding:0;line-height:1;border:1px solid #fff3ad;border-radius:50%;font-size:2.272727cqw;color:#321f0d;background:radial-gradient(ellipse at 35% 20%,#fff0aa,#e8b747 45%,#a16a19 72%,#edc66b);box-shadow:0 0 0 2px #694814,inset 0 1px 2px #fffad0}
.reference-stage .categories{position:absolute;inset:0;width:100%;height:100%;display:block;padding:0;margin:0;max-width:none;pointer-events:none}
.reference-stage .bet-category{position:absolute;top:86.609989%;left:var(--ref-x);width:var(--ref-w);height:10.520723%;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:4px;background:none;box-shadow:none;isolation:isolate;pointer-events:auto}
.reference-stage .bet-category:nth-child(1){--ref-x:37.021531%;--ref-w:6.578947%}.reference-stage .bet-category:nth-child(2){--ref-x:44.019139%;--ref-w:6.698565%}.reference-stage .bet-category:nth-child(3){--ref-x:51.076555%;--ref-w:6.638756%}.reference-stage .bet-category:nth-child(4){--ref-x:58.133971%;--ref-w:6.638756%}.reference-stage .bet-category:nth-child(5){--ref-x:65.191388%;--ref-w:6.997608%}.reference-stage .bet-category:nth-child(6){--ref-x:72.547847%;--ref-w:7.595694%}.reference-stage .bet-category:nth-child(7){--ref-x:80.62201%;--ref-w:7.894737%}.reference-stage .bet-category:nth-child(8){--ref-x:88.935407%;--ref-w:7.894737%}
.reference-stage .bet-category::before{display:none}
.reference-stage .reference-number::before{display:none}
.reference-stage .category-number{position:relative;z-index:2;font-size:3.050239cqw;line-height:1;text-shadow:1px 3px 0 #3d2110,0 0 4px #4b321d}
.reference-stage .category-portrait{display:none}
.reference-stage .category-name{position:absolute;left:5%;right:5%;bottom:6%;padding:5% 0 1%;font-size:.777512cqw;line-height:1.25;letter-spacing:0;background:linear-gradient(transparent,#09150bf5 25%);color:#fff0c9;z-index:2}
.reference-stage .stake-badge{position:absolute;top:-1.136364cqw;left:50%;max-width:95%;font-size:.777512cqw;padding:.179426cqw .538278cqw;z-index:4}
.reference-stage .bet-category.landed{box-shadow:0 0 0 3px #fff0b1,0 0 24px 7px #fdc931}
.reference-stage .bet-category:not(:disabled):hover{filter:none;box-shadow:0 0 0 2px #fff0b6,0 0 16px #ffce4170}
.reference-stage .bet-category:not(:disabled):active{transform:translateY(1px)}
.reference-utilities{position:absolute;left:3%;right:3%;top:79.914984%;height:3.613177%;pointer-events:none}
.reference-stage .bet-actions{position:absolute;left:0;top:0;bottom:auto;right:auto;width:29%;height:100%;display:flex;gap:.598086cqw;margin:0;pointer-events:auto}
.reference-stage .bet-actions button{position:relative;inset:auto;width:auto;flex:1;min-width:0;height:100%;padding:0 .4cqw;border:1px solid #c3984f91;border-radius:3px;background:linear-gradient(#211a10df,#0c160eef);box-shadow:inset 0 1px #ffdc7c44,0 2px 3px #0008;color:#fff1c9;font-size:.897129cqw;white-space:nowrap}
.reference-stage .bet-actions button span{font-size:.657895cqw;letter-spacing:.015em;margin-left:3px}
.reference-stage .bet-actions button:disabled{opacity:.6}
.reference-stage .total-meter{position:absolute;right:0;left:auto;top:0;width:25%;height:100%;display:flex;flex-direction:row;justify-content:space-between;align-items:center;gap:12px;padding:0 .7cqw;border:1px solid #c3984f91;border-radius:3px;background:linear-gradient(#211a10df,#0c160eef);box-shadow:inset 0 1px #ffdc7c44,0 2px 3px #0008;pointer-events:auto}
.reference-stage .total-meter>span{position:static;width:auto;height:auto;margin:0;background:none;font-size:.657895cqw;letter-spacing:.04em;white-space:nowrap;color:#fadd86}
.reference-stage .total-meter strong{position:static;font-size:1.196172cqw;line-height:1;color:#ffefc7;letter-spacing:0}
.reference-stage .total-meter small{display:none}
.bonus-mode .reference-stage{display:none}
#game.bonus-mode{display:block;min-height:100svh}
.bonus-mode .topbar{right:0}
.bonus-scene{min-height:100svh}

/* The supplied art provides the fixed footer labels and +/- symbols. */
.reference-stage .increment button{background:none;border:0;box-shadow:none;color:transparent;text-shadow:none}
.reference-stage .increment button:not(:disabled):is(:hover,:focus-visible){filter:none;background:#ffda7022;box-shadow:inset 0 0 0 1px #fff1bcb3,0 0 10px #eac36988}
.reference-stage .increment button:not(:disabled):active{transform:none}
.reference-stage .increment button:focus-visible{outline-offset:1px}
.reference-stage .increment button:disabled::after{content:"";position:absolute;inset:0;border-radius:50%;background:#09170c55;pointer-events:none}

/* Center the live wheel inside the painted opening; keep the pointer fixed. */
@media(min-width:901px){.reference-stage .wheel-frame{transform:translateY(-.239234cqw)}}

/* The supplied video is the full-width scenery crop above the fixed footer. */
.reference-stage .reference-video-layer{position:absolute;top:0;left:0;width:100%;aspect-ratio:1376/656;overflow:hidden;z-index:-2;pointer-events:none}
.reference-video-layer .reference-video{display:none}
.reference-video-layer .reference-video-canvas{position:absolute;left:var(--video-left,0px);top:var(--video-top,0px);width:var(--video-width,100%);height:var(--video-height,100%);display:block;pointer-events:none}

/* Same source coordinates as the video; DOM order places this alpha plate above it. */
.reference-stage > .reference-scene-overlay{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;user-select:none}
.reference-scene-overlay-art{position:absolute;left:var(--overlay-left,0px);top:var(--overlay-top,0px);width:var(--overlay-width,100%);height:var(--overlay-height,100%);max-width:none;display:block;pointer-events:none}
@media(max-width:900px) and (orientation:portrait){.reference-stage > .reference-scene-overlay{height:var(--reference-main-height,740px);z-index:-4}}

/* A narrow light reflection follows the alpha of the supplied white logo mask. */
.logo-shine{position:absolute;display:block;pointer-events:none;overflow:hidden;mix-blend-mode:screen;mask-image:url('../assets/four-legends-logo-white.png');-webkit-mask-image:url('../assets/four-legends-logo-white.png');mask-mode:alpha;mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;mask-position:center;-webkit-mask-position:center;mask-size:100% 100%;-webkit-mask-size:100% 100%}
.logo-shine::before{content:'';position:absolute;inset:0;background:linear-gradient(110deg,transparent 38%,#ffedb31a 44%,#fff5ce80 48%,#fffef2e0 50%,#fff5ce80 52%,#ffedb31a 56%,transparent 62%);opacity:0;transform:translateX(-110%);animation:legend-logo-shine 8s ease-in-out 1.2s infinite;will-change:transform,opacity}
.reference-stage>.logo-shine-desktop{left:55.023923%;top:1.487779%;width:43.421053%;aspect-ratio:726/372;z-index:2}
.logo-shine-mobile{display:none}
.logo-shine-paused .logo-shine::before{animation-play-state:paused}
.reduced-motion .logo-shine{display:none!important}
@keyframes legend-logo-shine{0%{transform:translateX(-110%);opacity:0}3%{opacity:.7}23%{transform:translateX(110%);opacity:.7}26%,100%{transform:translateX(110%);opacity:0}}

/* The animated plate has a slightly wider, higher logo than the still artwork. */
.reference-stage:not(:has(>.reference-scene-overlay)):has(>.reference-video-layer>.reference-video-canvas:not([hidden]))>.logo-shine-desktop{left:55.04784689%;top:1.03081828%;width:43.79186603%;aspect-ratio:732.2/372.5}

/* Floating scenery motes sit above the image/video and behind all live controls. */
.reference-stage > #atmosphere{position:absolute;inset:0 auto auto 0;width:100%;height:84.712008%;z-index:-1;opacity:1;pointer-events:none}
.reduced-motion .reference-stage > #atmosphere{visibility:hidden}

/* Peg contact follows forward travel and the occasional reverse settle. */
.pointer.tick{animation:wheel-pointer-tick var(--wheel-tick-duration,120ms) ease-out}
@keyframes wheel-pointer-tick{0%,100%{transform:rotate(0deg)}30%{transform:rotate(var(--wheel-tick-angle,-12deg))}65%{transform:rotate(calc(var(--wheel-tick-angle,-12deg) * -.18))}}

/* A slow peg release begins at the bend already loaded by wheel travel. */
.pointer.tick.momentum-release{animation-name:wheel-pointer-release}
@keyframes wheel-pointer-release{0%{transform:rotate(var(--wheel-tick-angle,-10deg))}35%{transform:rotate(calc(var(--wheel-tick-angle,-10deg) * -.15))}70%{transform:rotate(calc(var(--wheel-tick-angle,-10deg) * .04))}100%{transform:rotate(0deg)}}

/* One short reflection stays inside the painted tile; stake badges remain clear. */
.reference-stage .bet-category::after{content:"";position:absolute;inset:4%;z-index:3;border-radius:3px;pointer-events:none;background:linear-gradient(110deg,transparent 40%,#ffe6a333 45%,#fffbeaeb 50%,#fff0b84d 55%,transparent 60%);background-size:300% 100%;background-position:100% 0;opacity:0}
.reference-stage .bet-category:not(:disabled):is(:hover,:focus-visible)::after{animation:bet-option-shine 620ms ease-out both}
.reference-stage .bet-category:not(:disabled):focus-visible{box-shadow:0 0 0 2px #fff0b6,0 0 16px #ffce4170;outline-offset:3px}
@keyframes bet-option-shine{0%{background-position:100% 0;opacity:0}18%{opacity:.9}72%{opacity:.6}100%{background-position:0% 0;opacity:0}}
.reduced-motion .reference-stage .bet-category::after{animation:none!important}
@media(prefers-reduced-motion:reduce){.reference-stage .bet-category::after{animation:none!important}}

/* A local clean scene plate lets the actual pointer flex without a painted duplicate. */
.main-pointer-cleanplate{display:none;position:absolute;left:41.5625%;top:-10.9375%;width:17.5%;height:16.5625%;max-width:none;pointer-events:none;user-select:none}
@media(min-width:901px){.main-pointer-cleanplate{display:block}}