/* Player interface. Artwork and recorded game outcomes are independent of this layer. */
.app[data-ui=modern]{--control-height:102px;--safe-top:env(safe-area-inset-top,0px);--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px);--ui-bg:#111820;--ui-text:#f6f7f8;--ui-muted:#aab4c0;--ui-gold:#f4cd73;--ui-aqua:#78d9d2;--control-accent:var(--ui-aqua)}
.app[data-ui=modern] .control-area{position:fixed;left:50%;top:auto;bottom:max(16px,env(safe-area-inset-bottom));width:min(1060px,calc(100vw - 40px));height:78px;padding:0;border:0;border-radius:0;transform:translateX(-50%);background:none;backdrop-filter:none;z-index:5}
.app[data-ui=modern] .hud{position:relative;display:grid;grid-template-columns:76px 80px minmax(112px,1fr) minmax(110px,1fr) 138px 146px;grid-template-rows:1fr;gap:14px;align-items:center;width:100%;height:76px;margin:0;padding:0 18px 0 9px;border:1px solid #ffffff19;border-radius:10px;background:#101820f2;box-shadow:0 6px 28px #04121c35;backdrop-filter:blur(14px)}
.app[data-ui=modern] .hud::before{content:none}
.app[data-ui=modern] .hud .balance,.app[data-ui=modern] .hud .win{position:static;display:flex;grid-row:1;width:auto;height:52px;padding:0;border:0;gap:4px;justify-content:center;text-align:left}
.app[data-ui=modern] .hud .balance{grid-column:3}.app[data-ui=modern] .hud .win{grid-column:4}
.app[data-ui=modern] .hud .meter>span,.app[data-ui=modern] .hud .bet-select>span{height:auto;color:#b2bdc8;font-size:9px;line-height:14px;letter-spacing:.055em;font-weight:600}
.app[data-ui=modern] .hud .meter strong,.app[data-ui=modern] .hud .bet-select strong{font-size:22px;line-height:26px;font-weight:700;letter-spacing:-.025em;color:#fff;font-variant-numeric:tabular-nums}
.app[data-ui=modern] .hud .bet-select{position:static;grid-column:1;grid-row:1/3;display:flex;align-items:flex-start;justify-content:center;gap:2px;height:54px;min-height:0;padding:0 12px;background:none}
.app[data-ui=modern] .hud #bet-up{grid-column:2;grid-row:1}.app[data-ui=modern] .hud #bet-down{grid-column:2;grid-row:2}
.app[data-ui=modern] .spin-controls{position:static;grid-column:6;grid-row:1;display:flex;align-items:center;gap:10px}
.app[data-ui=modern] .hud .spin{width:92px;height:92px;flex:none;border:2px solid #f7f6ef;border-radius:50%;background:#1b222b;box-shadow:inset 0 0 0 6px #10171e;transform:none;color:#fff}
.app[data-ui=modern] .hud .spin::before{display:none}.app[data-ui=modern] .hud .spin svg{width:59px;height:59px;stroke-width:4}
.app[data-ui=modern] .hud .spin:hover:enabled{background:#28353e;box-shadow:inset 0 0 0 6px #121b24;transform:scale(1.035);border-color:#fff}
.app[data-ui=modern] .hud .spin:active:enabled{transform:scale(.97)}

.bonus-menu{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;width:72px;height:72px;border:2px solid #17232c;border-radius:50%;background:#f4cd73;color:#16212b;box-shadow:0 0 0 2px #f4cd73;font-weight:850;font-size:12px;line-height:12px;letter-spacing:.025em}
.bonus-menu svg{width:18px;height:18px;stroke-width:2}.bonus-menu:hover:enabled{background:#ffdf8c;box-shadow:0 0 0 2px #ffdf8c}.bonus-menu:active:enabled{transform:scale(.97)}
.ui-free-label{position:fixed;top:max(13px,env(safe-area-inset-top));left:16px;color:#effbffab;font-size:9px;font-weight:700;letter-spacing:.12em;text-shadow:0 1px 3px #04121c70;pointer-events:none;z-index:2}

@media(max-width:940px) and (min-width:641px){
 .app[data-ui=modern] .hud{grid-template-columns:66px 38px minmax(95px,1fr) minmax(83px,1fr) 112px 124px;gap:9px;padding-right:12px}.app[data-ui=modern] #quick-turbo{display:none}.app[data-ui=modern] .hud .meter strong,.app[data-ui=modern] .hud .bet-select strong{font-size:19px}.app[data-ui=modern] .hud .spin{width:78px;height:78px}.app[data-ui=modern] .hud .spin svg{width:51px;height:51px}.bonus-menu{width:60px;height:60px;font-size:10px}.bonus-menu svg{width:15px;height:15px}.app[data-ui=modern] .spin-controls{gap:6px}
}

@media(max-width:640px){
 
 .app[data-ui=modern]{--control-height:145px}.app[data-ui=modern] .control-area{bottom:max(12px,env(safe-area-inset-bottom));width:calc(100vw - 24px);height:126px}
 .app[data-ui=modern] .hud{display:grid;grid-template-columns:60px 34px minmax(0,1fr) 106px;grid-template-rows:41px 74px;gap:0 7px;padding:0 10px 7px;height:126px;border-radius:10px}
 .app[data-ui=modern] .hud .balance{grid-column:1/4;grid-row:1}.app[data-ui=modern] .hud .win{grid-column:4;grid-row:1;text-align:right}.app[data-ui=modern] .hud .meter{height:38px;gap:0;padding-top:5px}.app[data-ui=modern] .hud .meter strong{font-size:17px;line-height:22px}.app[data-ui=modern] .hud .meter>span{font-size:7px;line-height:11px}
 .app[data-ui=modern] .bonus-menu{grid-column:1;grid-row:2;width:52px;height:52px;font-size:9px;line-height:10px;justify-self:start;gap:0}.bonus-menu svg{width:14px;height:14px}.app[data-ui=modern] #quick-turbo{display:none}.app[data-ui=modern] .hud .bet-select{grid-column:1;grid-row:1;height:48px;align-items:center;padding:0;gap:1px}.app[data-ui=modern] .hud .bet-select strong{font-size:17px}.app[data-ui=modern] .hud .bet-select>span{font-size:8px}
 .app[data-ui=modern] .spin-controls{grid-column:4;grid-row:2;gap:5px;justify-content:flex-end}.app[data-ui=modern] .hud .spin{width:70px;height:70px}.app[data-ui=modern] .hud .spin svg{width:45px;height:45px}
 
}
@media(max-height:600px) and (min-width:641px){
 .app[data-ui=modern]{--control-height:86px}.app[data-ui=modern] .control-area{bottom:12px;height:60px}.app[data-ui=modern] .hud{height:60px}.app[data-ui=modern] .hud .spin{width:74px;height:74px}.app[data-ui=modern] .hud .spin svg{width:48px;height:48px}.bonus-menu{width:58px;height:58px;font-size:10px;line-height:11px}.bonus-menu svg{width:14px;height:14px}
}