/* One HUD composition owner. The older scene sheets sit in splat-scene;
   controls here use native hit regions and one independently moving cap. */
#game .console{all:unset;grid-area:console;position:relative;display:grid;grid-template-rows:32px 70px;width:min(1100px,calc(100vw - 16px));justify-self:center;box-sizing:border-box;isolation:isolate;container:bava-controls / inline-size;--spin-size:128px;margin:10px 0 32px;color:var(--bava-ui-ink,#111820);background:var(--bava-bar-surface,transparent);border:0;border-radius:12px;box-shadow:none;text-shadow:0 1px 2px #0009;font-family:Outfit,sans-serif}
#game .console::before,#game .console::after{content:none}
#game .console .data-strip{all:unset;display:flex;justify-content:space-between;align-items:center;margin:0 16px;border-bottom:1px solid rgb(255 255 255 / .12);min-width:0;gap:12px;font:550 10px/1 Outfit,sans-serif;color:var(--bava-ui-muted,#384550)}
#game .console .data-strip>span{all:unset;display:flex;align-items:baseline;gap:8px;white-space:nowrap;min-width:0}
#game .console .data-strip strong{all:unset;display:block;font:650 21px/1 Outfit,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.025em;color:var(--bava-ui-ink,#111820);min-width:0}
#game[data-runtime] .console .data-strip>span:has(:is(#round-count,#paint-count)){display:none}
#game .console .control-deck{all:unset;position:relative;display:block;min-width:0;height:70px}
#game .console .service-controls{display:contents}
#game .console button{all:unset;box-sizing:border-box;position:absolute;top:50%;translate:0 -50%;display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;width:44px;height:44px;color:var(--bava-ui-ink,#111820);font:650 12px/1 Outfit,sans-serif;cursor:pointer;touch-action:manipulation;user-select:none;-webkit-tap-highlight-color:transparent;transition:background-color .12s,color .12s,opacity .12s;border-radius:8px}
#game .console button::before,#game .console button::after{content:none}
#game .console button svg:not(.splat-lettering):not(.spin-mark){width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
#game .console .letter-face{fill:currentColor;stroke:none}
#game .console .letter-shadow{display:none}
#game .console :is(#info,#sound){left:8px}
#game .console #sound{left:52px}
#game .console #features{left:104px;width:92px;gap:6px;color:#10151b;border:1px solid #fffffff0;background:#f5f6f8;text-shadow:none;border-radius:7px;font-size:11px;letter-spacing:.01em}
#game .console #features svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8}
#game .console .amount-controls{all:unset;position:absolute;right:calc(50% + 86px);top:50%;translate:0 -50%;display:grid;grid-template-columns:44px minmax(62px,1fr) 44px;align-items:center;width:174px;height:48px;min-width:0;border-radius:24px;background:rgb(0 0 0 / .24);border:1px solid #ffffff24;box-sizing:border-box}
#game .console .amount-controls::before{content:none}
#game .console .amount-controls button{position:relative;inset:auto;translate:none;border:0;background:none;min-width:0;width:100%;height:46px;border-radius:22px;padding:0;color:var(--bava-ui-ink,#111820)}
#game .console .amount-controls :is(#minus,#plus){padding:8px;color:var(--bava-ui-ink,#111820);font:450 26px/1 Outfit,sans-serif}
#game .console .amount-controls :is(#minus,#plus) .splat-lettering{height:19px;width:20px}
#game .console .amount-controls #amount strong{font:650 23px/1 Outfit,sans-serif;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:inherit}
#game .console .amount-controls #amount small,#game .console .amount-heading{display:none}
#game .console #turbo{left:calc(50% + 108px)}
#game .console #auto{left:calc(50% + 170px)}
#game .console .playback-button{flex-direction:column;gap:3px;height:50px}
#game .console .playback-button small{font:600 9px/1 Outfit,sans-serif;letter-spacing:.02em;color:inherit}
#game .console #turbo svg{fill:currentColor;stroke:none}
#game .console #spin{left:50%;right:auto;top:45%;translate:-50% -50%;width:128px;height:128px;min-width:0;min-height:0;padding:0;background:none;border:0;border-radius:50%;box-shadow:none;z-index:3;isolation:isolate;filter:none;opacity:1;transform:none}
#game .console .spin-face::after{content:none}
#game .console #spin-label{position:absolute;inset:20% 9% 27%;display:grid;place-items:center;color:#071c34;font-size:39px;line-height:1;transform:rotate(-7deg);height:auto;text-shadow:none;z-index:2}
#game .console #spin-label .splat-lettering{width:90%;height:1em;max-width:100%}
#game .console .spin .drip,#game .console .spin .droplet{display:none}
#game .console #spin:disabled{opacity:1;color:#071c34;filter:none}
#game .console button:disabled:not(#spin){opacity:.42;cursor:default}
#game .console button[aria-pressed=true]:not(#sound){background:rgb(255 255 255 / .14);color:var(--bava-ui-ink,#111820);box-shadow:inset 0 -2px #fff}
#game .console button:focus-visible{outline:2px solid #087e89;outline-offset:2px}
#game .console #spin:focus-visible{outline:0;filter:drop-shadow(0 0 3px #fff0c4)}
#game .console .feature-progress{all:unset;display:none}
#game[data-feature-active=true] .console .feature-progress{display:block;position:absolute;left:50%;top:50%;translate:-50% -50%;max-width:58%;text-align:center;font:650 13px/1.25 Outfit,sans-serif;color:var(--bava-ui-ink,#111820)}
#game[data-feature-active=true] .console :is(.amount-controls,#features){display:none}
#game[data-feature-active=true] .console #auto[aria-pressed=true]{left:auto;right:12px}
#game .console #connection-recovery{left:auto;right:calc(50% + 86px);width:174px;background:#ff6956;color:#071c34;font-size:14px}
#game .console #connection-recovery .splat-lettering{height:20px;max-width:90%}
#game .console #replay-cost{display:grid;grid-template-columns:1fr;gap:2px;font-size:8px;line-height:1}
#game .console #replay-total{font-size:18px;line-height:1}
#game .console #replay-base{font-size:8px;line-height:1}
#game .console .jurisdiction-status{font:600 9px/1 Outfit,sans-serif;position:absolute;bottom:-13px;left:8px;right:8px;text-align:center;color:#c3d3df}
#game .console [hidden]{display:none!important}
@media(hover:hover){
 #game .console button:hover:not(:disabled):not(#spin){background:rgb(255 255 255 / .12);color:var(--bava-ui-ink,#111820)}
 #game .console #features:hover:not(:disabled){background:#fff;color:#10151b}
 #game .console #features:active:not(:disabled){background:#cbd2dc;transform:translateY(1px)}
 #game .console #spin:hover:not(:disabled) .spin-face{filter:brightness(1.07)}
}

/* Portrait has two action bands in one compact console. Every control remains
   44px; the primary cap has independent clearance from values and bet size. */
#game[data-layout=portrait] .console{grid-template-rows:34px 136px;width:calc(100vw - 12px);max-width:550px;margin:4px 0 34px}
#game[data-layout=portrait] .console .data-strip{margin:0 10px;align-items:center;font-size:10px;gap:10px}
#game[data-layout=portrait] .console .data-strip>span{display:flex;flex-direction:row;align-items:baseline;gap:5px;max-width:52%}
#game[data-layout=portrait] .console .data-strip strong{font-size:19px;height:auto;line-height:1;width:auto;text-align:inherit}
#game[data-layout=portrait] .console .data-strip>span:has(#win-value){margin-left:auto}
#game[data-layout=portrait] .console .control-deck{height:136px}
#game[data-layout=portrait] .console .amount-controls{top:23px;left:auto;right:8px;translate:0 -50%;width:min(216px,calc(100% - 114px));height:46px}
#game[data-layout=portrait] .console #features{left:8px;top:23px;width:104px}
#game[data-layout=portrait] .console :is(#info,#sound,#turbo,#auto){top:106px}
#game[data-layout=portrait] .console #info{left:5px}
#game[data-layout=portrait] .console #sound{left:53px}
#game[data-layout=portrait] .console #turbo{left:auto;right:53px}
#game[data-layout=portrait] .console #auto{left:auto;right:5px}
#game[data-layout=portrait] .console #spin{top:106px;width:120px;height:120px}
#game[data-layout=portrait] .console #spin-label{font-size:35px}
#game[data-layout=portrait] .console #connection-recovery{top:23px;right:8px;width:160px}
#game[data-layout=portrait][data-feature-active=true] .console{grid-template-rows:34px 60px}
#game[data-layout=portrait][data-feature-active=true] .console .control-deck{height:60px}
#game[data-layout=portrait][data-feature-active=true] .console :is(#info,#sound,#auto,.feature-progress){top:30px}
#game[data-layout=portrait][data-feature-active=true] .console .feature-progress{left:auto;right:8px;translate:0 -50%;width:calc(100% - 116px);max-width:none;font-size:12px}
#game[data-layout=portrait] .status{min-height:0;height:0;padding:0;overflow:hidden}
#game[data-layout=portrait][data-connection-phase=uncertain] .status{height:auto;min-height:24px;padding:2px 8px;font-size:11px;text-align:center}
@media(max-width:350px){
 #game[data-layout=portrait] .console .data-strip{font-size:9px;margin:0 8px}
 #game[data-layout=portrait] .console .data-strip strong{font-size:17px}
 #game[data-layout=portrait] .console .amount-controls{width:calc(100% - 114px)}
 #game[data-layout=portrait] .console #features{width:94px}
 #game[data-layout=portrait] .console #spin{width:104px;height:104px}
}
/* Mini-player keeps real 44px service/amount targets; secondary functions live
   in its existing menu. The cap is centred between the two balanced wings. */
#game[data-layout=compact]{grid-template-rows:minmax(0,1fr) 90px}
#game[data-layout=compact] .console{width:calc(100vw - 10px);grid-template-rows:22px 52px;margin:0 0 14px}
#game[data-layout=compact] .console .data-strip{margin:0 8px;font-size:8px}
#game[data-layout=compact] .console .data-strip strong{font-size:15px}
#game[data-layout=compact] .console .control-deck{height:52px}
#game[data-layout=compact] .console .amount-controls{left:2px;right:auto;width:148px;height:44px;grid-template-columns:44px minmax(44px,1fr) 44px}
#game[data-layout=compact] .console .amount-controls #amount strong{font-size:18px}
#game[data-layout=compact] .console .amount-controls button{height:42px}
#game[data-layout=compact] .console #spin{width:76px;height:76px;top:50%}
#game[data-layout=compact] .console #spin-label{font-size:24px}
#game[data-layout=compact] .console #info{left:auto;right:2px}
#game[data-layout=compact] .console #features{left:auto;right:50px;width:96px;height:44px;font-size:10px}
#game[data-layout=compact] .console #sound{left:auto;right:2px}
#game[data-layout=compact][data-feature-active=true] .console .feature-progress{left:4px;translate:0 -50%;max-width:calc(100% - 104px);text-align:left;font-size:11px}
#game[data-layout=compact] .console #connection-recovery{left:2px;right:auto;width:132px}
@media(max-height:470px) and (min-width:641px){
 #game[data-layout=landscape] .console{--spin-size:104px;grid-template-rows:26px 58px;margin:2px 0 24px}
 #game[data-layout=landscape] .console .control-deck{height:58px}
 #game[data-layout=landscape] .console #spin{width:104px;height:104px}
 #game[data-layout=landscape] .console #spin-label{font-size:32px}
 #game[data-layout=landscape] .console .amount-controls{right:calc(50% + 65px);width:144px}
 #game[data-layout=landscape] .console #features{width:78px;font-size:10px}
 #game[data-layout=landscape] .console #turbo{left:calc(50% + 80px)}
 #game[data-layout=landscape] .console #auto{left:calc(50% + 134px)}
}
@media(prefers-reduced-motion:reduce){#game .console *{animation:none!important;transition:none!important}}
#game.reduced-motion .console *{animation:none!important;transition:none!important}

/* Width of the console, rather than height alone, owns the dense desktop set. */
@container bava-controls (max-width:960px){
 #game[data-layout=landscape] .console .amount-controls{right:calc(50% + var(--spin-size)/2 + 14px);width:150px;grid-template-columns:44px minmax(44px,1fr) 44px}
 #game[data-layout=landscape] .console #features{left:104px;width:52px;height:50px;gap:3px;flex-direction:column;border:0}
 #game[data-layout=landscape] .console #features>span{display:block;font-size:8px;letter-spacing:-.02em}
 #game[data-layout=landscape] .console #features svg{width:21px;height:21px}
}
@container bava-controls (max-width:730px){
 #game[data-layout=landscape] .console #spin{width:104px;height:104px}
 #game[data-layout=landscape] .console .amount-controls{right:calc(50% + 66px)}
}
/* Keep the shared bonus purchase entry visible. Menu/sound yield first;
   amount, central Spin and bonus access retain independent native targets. */
@container bava-controls (max-width:800px){
 #game[data-layout=landscape] .console #features{left:8px;width:92px;height:44px;flex-direction:row;gap:6px;border:1px solid #fffffff0}
 #game[data-layout=landscape] .console #features>span{font-size:10px;letter-spacing:.01em}
 #game[data-layout=landscape] .console #features svg{width:19px;height:19px}
 #game[data-layout=landscape] .console #info{left:auto;right:8px}
}
@container bava-controls (max-width:730px){
 #game[data-layout=landscape] .console #features{width:78px;gap:4px}
 #game[data-layout=landscape] .console #features>span{font-size:9px}
 #game[data-layout=landscape] .console #features svg{width:16px;height:16px}
 #game[data-layout=landscape] .console .amount-controls{width:136px}
}

@media(max-height:600px){
 #game[data-layout=portrait]:not([data-feature-active=true]) .console{grid-template-rows:34px 124px;margin-bottom:28px}
 #game[data-layout=portrait]:not([data-feature-active=true]) .console .control-deck{height:124px}
 #game[data-layout=portrait]:not([data-feature-active=true]) .console :is(#info,#sound,#turbo,#auto,#spin){top:96px}
}

/* Selected proposal 1: retain the current skin and native controls. Portrait
   places bonus/amount above the centred primary with balanced utility wings.
   Desktop keeps the primary centred, with services at the far right. Bonus
   playback and the mini-player retain their separate legal control layouts. */
#game[data-layout=portrait]:not([data-feature-active=true]) .console .amount-controls{width:calc(100% - 132px)}
#game[data-layout=portrait]:not([data-feature-active=true]) .console #info{left:8px}
#game[data-layout=portrait]:not([data-feature-active=true]) .console #sound{left:56px}
#game[data-layout=portrait]:not([data-feature-active=true]) .console #turbo{right:56px}
#game[data-layout=portrait]:not([data-feature-active=true]) .console #auto{right:8px}
#game[data-layout=portrait]:not([data-feature-active=true]) .console :is(#info,#sound,#turbo,#auto,#spin){top:110px}
#game[data-layout=landscape]:not([data-feature-active=true]) .console #features{left:8px}
#game[data-layout=landscape]:not([data-feature-active=true]) .console #info{left:auto;right:60px}
#game[data-layout=landscape]:not([data-feature-active=true]) .console #sound{left:auto;right:8px}
@container bava-controls (max-width:800px){
 #game[data-layout=landscape]:not([data-feature-active=true]) .console #info{right:8px}
}
@media(max-height:600px){
 #game[data-layout=portrait]:not([data-feature-active=true]) .console :is(#info,#sound,#turbo,#auto,#spin){top:100px}
}