@layer splat-scene {
/* Layout review15October: board first; live amount group optically centred. */
.portrait-painted-frame{display:none;position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.game .mode-strip{height:24px;margin-bottom:0;font-size:9px}
.game .status{min-height:18px;font-size:10px;padding:0 5px 3px}
.game[data-layout=landscape]{grid-template-areas:'board presenter' 'console console' 'foot foot';padding:6px 0;align-content:center}
.game[data-layout=landscape] .masthead{position:absolute;left:var(--board-width);right:0;top:10px;min-height:0;height:62px;z-index:9;pointer-events:none}
.game[data-layout=landscape] .wordmark{width:150px;height:62px;left:50%;max-width:90%;transform:translateX(-50%);bottom:auto;top:0}
.game[data-layout=landscape] .masthead .preview-tag{left:50%;right:auto;bottom:-6px;transform:translateX(-50%)}
.game[data-layout=landscape] .presenter .hero-float{width:112%;left:-4%;right:auto;top:57%;height:auto}
.game[data-layout=landscape] .board-frame{margin-bottom:0}
.game[data-layout=landscape] .console{width:min(980px,calc(100vw - 14px));max-width:calc(100vw - 14px);justify-self:center}
.game[data-layout=landscape] .console .control-deck{position:relative;grid-template-columns:minmax(0,1fr) 44px 44px 84px;grid-template-rows:84px;padding:3px 12px 7px;gap:7px}
.game[data-layout=landscape] .console .service-controls{grid-column:1;grid-row:1}
.game[data-layout=landscape] .console .amount-controls{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:200px;max-width:200px;height:52px;grid-template-columns:44px minmax(0,1fr) 44px}
.game[data-layout=landscape] .console #turbo{grid-column:2;grid-row:1}
.game[data-layout=landscape] .console #auto{grid-column:3;grid-row:1}
.game[data-layout=landscape] .console .spin{grid-column:4;grid-row:1;width:84px;height:84px}
.game .console .amount-controls,.game .console .feature-progress{grid-area:auto}
.console .spin .spin-mark{inset:5%;width:90%;height:90%;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;transition:translate .12s}
.game .console #spin-label{inset:0;height:auto;font-size:29px;line-height:1}
.game .console #spin-label .splat-lettering{width:76%;height:1em}
.game[data-layout=landscape] .console #spin-label{font-size:29px}
.console .spin-face::after{content:'';position:absolute;left:29%;top:9%;width:21%;height:3%;background:#fff0cc;border-radius:50%;opacity:.4;pointer-events:none}
.console .spin:has([data-art-text=STOP]) #spin-label{inset:0;height:auto;font-size:20px}
.console .spin:has([data-art-text=STOP]) #spin-label .splat-lettering{width:65%}
@media(hover:hover){.console .spin:hover:not(:disabled) .spin-face{filter:brightness(1.1)}}
.game[data-layout=portrait] .board-frame{aspect-ratio:1402/1274}
.game[data-layout=portrait]:not(.life-bonus) .board-frame{background:none}
.game[data-layout=portrait]:not(.life-bonus) .portrait-painted-frame{display:block}
.game[data-layout=portrait] .board{top:9.8587%;bottom:10.3046%;row-gap:.935%}
/* The regular painting has transparent outer gutters. Register the bonus
   skin to its visible rim, rather than painting to the whole source canvas. */
.game.life-bonus .board-frame{background:none;box-shadow:none;overflow:visible}
.game.life-bonus .board-frame::before{content:'';position:absolute;inset:6.2% 2%;border-radius:14px;background:#21192e url('assets/life-matrix-v1-delivery.webp') center/cover;box-shadow:inset 0 0 0 3px #d8a451,0 0 0 3px #100f24,0 5px 0 #080e2266;pointer-events:none}
.game[data-layout=portrait] .console .data-strip{min-height:28px;padding-top:4px;padding-bottom:3px}
.game[data-layout=portrait] .console .control-deck{position:relative;grid-template-columns:minmax(0,1fr) 44px 44px;grid-template-rows:44px 76px;padding:3px 7px 7px;gap:4px}
.game[data-layout=portrait] .console .service-controls{grid-column:1;grid-row:1;gap:3px}
.game[data-layout=portrait] .console .feature-button{min-width:76px;padding:5px 7px;font-size:10px}
.game[data-layout=portrait] .console #turbo{grid-column:2;grid-row:1;height:44px}
.game[data-layout=portrait] .console #auto{grid-column:3;grid-row:1;height:44px}
.game[data-layout=portrait] .console .amount-controls{position:absolute;left:50%;bottom:15px;transform:translateX(-50%);width:164px;max-width:164px;height:50px;grid-template-columns:44px minmax(0,1fr) 44px}
.game[data-layout=portrait] .console .spin{position:absolute;right:7px;bottom:7px;width:76px;height:76px;grid-area:auto}
.game[data-layout=portrait] .console #spin-label{font-size:26px}
.game[data-layout=portrait][data-feature-active=true] .console .control-deck{grid-template-columns:88px minmax(0,1fr) 44px;grid-template-rows:44px 76px}
.game[data-layout=portrait][data-feature-active=true] .console .service-controls{grid-column:1;grid-row:1;gap:0}
.game[data-layout=portrait][data-feature-active=true] .console .feature-progress{grid-column:2;grid-row:1;font-size:10px}
.game[data-layout=portrait][data-feature-active=true] .console #turbo{grid-column:3;grid-row:1}
.game[data-layout=portrait][data-feature-active=true] .console::before{bottom:87px}
.game[data-layout=portrait][data-feature-active=true]:has(#auto[aria-pressed=true]) .console .control-deck{grid-template-columns:88px minmax(0,1fr) 44px 44px}
.game[data-layout=portrait][data-feature-active=true]:has(#auto[aria-pressed=true]) .console #auto{grid-column:4;grid-row:1}
.game[data-layout=landscape][data-feature-active=true] .console .feature-progress{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:240px;max-width:40%;text-align:center;font-size:11px}
.game[data-layout=compact] .console .amount-controls{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);width:148px;max-width:148px;height:44px;grid-template-columns:44px minmax(0,1fr) 44px}
.game[data-layout=compact] .console #turbo{position:absolute;left:5px;bottom:5px;width:44px;grid-area:auto}
.game[data-layout=compact] .console #auto{position:absolute;left:51px;bottom:5px;width:44px;grid-area:auto}
.game[data-layout=compact][data-feature-active=true] .console #turbo{position:relative;left:auto;bottom:auto;grid-column:3;grid-row:1}
.game[data-layout=compact][data-feature-active=true] .console #auto{position:relative;left:auto;bottom:auto;grid-column:4;grid-row:1}
.game[data-layout=compact] .console #spin-label{font-size:10px}
.game[data-layout=compact] .mode-strip{height:20px;padding-bottom:0}
.game[data-layout=compact] .status{display:none}
.game[data-layout=compact] .console #spin-label{font-size:15px}
@media(max-width:330px){.game[data-layout=portrait] .console .amount-controls{width:148px;max-width:148px}.game[data-layout=portrait] .console .spin{width:60px;height:60px;bottom:11px}.game[data-layout=portrait] .console .control-deck{padding-left:5px;padding-right:5px}.game[data-layout=portrait] .console .feature-button{min-width:68px;font-size:9px}.game[data-layout=portrait] .console .data-strip strong{font-size:18px}}
@media(max-height:470px) and (min-width:641px){.game[data-layout=landscape] .console{width:min(760px,calc(100vw - 14px))}.game[data-layout=landscape] .console .control-deck{grid-template-rows:64px;grid-template-columns:minmax(0,1fr) 44px 44px 64px;gap:4px;padding:2px 8px 5px}.game[data-layout=landscape] .console .spin{width:64px;height:64px}.game[data-layout=landscape] .console .amount-controls{width:180px;max-width:180px}.game[data-layout=landscape] .presenter .hero-float{width:108%;left:-2%}.game[data-layout=landscape] .masthead{height:46px;top:0}.game[data-layout=landscape] .wordmark{height:46px;width:120px}.game[data-layout=landscape] .preview-note{display:none}}
@media(prefers-reduced-motion:reduce){.console .spin .spin-mark{transition:none}}

/* Vadim's central Spin direction: primary action owns the lower centre.
   Portrait retains the centred amount group directly above it. */
.game:not([data-feature-active=true]) .console .service-controls{display:contents}
.game[data-layout=landscape]:not([data-feature-active=true]) .console #info,
.game[data-layout=landscape]:not([data-feature-active=true]) .console #sound{position:absolute;top:50%;translate:0 -50%;grid-area:auto}
.game[data-layout=landscape]:not([data-feature-active=true]) .console #info{left:12px}
.game[data-layout=landscape]:not([data-feature-active=true]) .console #sound{left:56px}
.game[data-layout=landscape]:not([data-feature-active=true]) .console .amount-controls{left:29.5%;width:156px;max-width:156px}
.game[data-layout=landscape]:not([data-feature-active=true]) .console #turbo,
.game[data-layout=landscape]:not([data-feature-active=true]) .console #auto{position:absolute;top:50%;translate:-50% -50%;width:44px;grid-area:auto}
.game[data-layout=landscape]:not([data-feature-active=true]) .console #turbo{left:68%}
.game[data-layout=landscape]:not([data-feature-active=true]) .console #auto{left:76%}
.game[data-layout=landscape]:not([data-feature-active=true]) .console #features{position:absolute;right:12px;top:50%;translate:0 -50%;width:76px;min-width:76px;padding:4px;font-size:10px;grid-area:auto}
.game[data-layout=landscape]:not([data-feature-active=true]) .console .spin{position:absolute;left:50%;top:50%;right:auto;bottom:auto;translate:-50% -50%;grid-area:auto}
@media(min-width:950px){.game[data-layout=landscape]:not([data-feature-active=true]) .console .amount-controls{width:180px;max-width:180px}.game[data-layout=landscape]:not([data-feature-active=true]) .console #features{width:98px;font-size:12px}}
.game[data-layout=portrait]:not([data-feature-active=true]) .console #info,
.game[data-layout=portrait]:not([data-feature-active=true]) .console #sound{position:absolute;top:3px;translate:none;grid-area:auto}
.game[data-layout=portrait]:not([data-feature-active=true]) .console #info{left:7px}
.game[data-layout=portrait]:not([data-feature-active=true]) .console #sound{left:51px}
.game[data-layout=portrait]:not([data-feature-active=true]) .console .amount-controls{top:3px;bottom:auto;height:44px}
.game[data-layout=portrait]:not([data-feature-active=true]) .console #amount{height:44px;min-height:44px}
.game[data-layout=portrait]:not([data-feature-active=true]) .console #turbo,
.game[data-layout=portrait]:not([data-feature-active=true]) .console #auto{position:absolute;top:3px;left:auto;bottom:auto;translate:none;width:44px;grid-area:auto}
.game[data-layout=portrait]:not([data-feature-active=true]) .console #turbo{right:55px}
.game[data-layout=portrait]:not([data-feature-active=true]) .console #auto{right:7px}
.game[data-layout=portrait]:not([data-feature-active=true]) .console #features{position:absolute;right:7px;bottom:14px;top:auto;width:98px;height:44px;translate:none;grid-area:auto}
.game[data-layout=portrait]:not([data-feature-active=true]) .console .spin{left:50%;right:auto;translate:-50% 0;bottom:7px}
@media(max-width:330px){
 .game[data-layout=portrait]:not([data-feature-active=true]) .console #info{left:4px}
 .game[data-layout=portrait]:not([data-feature-active=true]) .console #sound{left:48px}
 .game[data-layout=portrait]:not([data-feature-active=true]) .console .amount-controls{width:132px;max-width:132px}
 .game[data-layout=portrait]:not([data-feature-active=true]) .console #turbo{right:48px}
 .game[data-layout=portrait]:not([data-feature-active=true]) .console #auto{right:4px}
 .game[data-layout=portrait]:not([data-feature-active=true]) .console #features{width:76px;min-width:76px;right:4px}
 .game[data-layout=portrait]:not([data-feature-active=true]) .console .spin{bottom:15px}
}
.game[data-layout=compact]:not([data-feature-active=true]) .console #info,
.game[data-layout=compact]:not([data-feature-active=true]) .console #sound{position:absolute;top:3px;grid-area:auto}
.game[data-layout=compact]:not([data-feature-active=true]) .console #info{left:5px}
.game[data-layout=compact]:not([data-feature-active=true]) .console #sound{left:49px}
.game[data-layout=compact]:not([data-feature-active=true]) .console .amount-controls{top:3px;bottom:auto;width:132px;max-width:132px;gap:0;grid-template-columns:44px minmax(44px,1fr) 44px}
.game[data-layout=compact]:not([data-feature-active=true]) .console #turbo{top:3px;bottom:auto;left:auto;right:49px}
.game[data-layout=compact]:not([data-feature-active=true]) .console #auto{top:3px;bottom:auto;left:auto;right:5px}
.game[data-layout=compact]:not([data-feature-active=true]) .console #features{position:absolute;bottom:5px;right:5px;grid-area:auto}
.game[data-layout=compact]:not([data-feature-active=true]) .console .spin{position:absolute;bottom:5px;left:50%;translate:-50% 0;grid-area:auto}
.game[data-layout=compact]:not([data-feature-active=true]) .console .data-strip{top:auto;bottom:3px;left:5px;right:auto;width:160px}

/* A single live amount, centred between its minus/plus controls. Desktop
   shares the primary action's centreline using the data strip's middle slot. */
.game .console .amount-controls #amount{display:grid;place-items:center;gap:0;padding:0 4px;height:44px;min-height:44px}
.game .console .amount-controls #amount strong{display:grid;place-items:center;height:100%;width:100%;min-width:0;line-height:1}
.game .console .amount-controls #amount strong .splat-lettering{margin:0 auto;max-height:100%}
.game[data-layout=landscape] .console .data-strip{min-height:46px}
.game[data-layout=landscape]:not([data-feature-active=true]) .console .data-strip{display:grid;grid-template-columns:minmax(0,1fr) 180px minmax(0,1fr);gap:12px}
.game[data-layout=landscape]:not([data-feature-active=true]) .console .data-strip>span{max-width:100%;min-width:0}
.game[data-layout=landscape]:not([data-feature-active=true]) .console .data-strip>span:first-child{grid-column:1}
.game[data-layout=landscape]:not([data-feature-active=true]) .console .data-strip>span:last-child{grid-column:3;justify-self:end}
.game[data-layout=landscape]:not([data-feature-active=true]) .console .amount-controls{left:50%;top:-23px;height:44px}

/* Quiet drawn bursts share alley-delivery.webp's cover crop and are clipped behind its
   skyline. One ambient burst about every11–13s; never a reward cue. */
.game[data-layout]{z-index:2}
.distant-fireworks{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:hidden}
.distant-firework-ray{fill:none;stroke:var(--sky-ink);stroke-width:2.2;stroke-linecap:round}
.distant-firework-dot{fill:var(--sky-ink)}
.distant-firework-trail{fill:none;stroke:var(--sky-ink);stroke-width:1.4;stroke-linecap:round;stroke-dasharray:9 70}
body:has(dialog[open],.splat-win,.life-transition:not([hidden])) .distant-fireworks{visibility:hidden}
@media(prefers-reduced-motion:reduce){.distant-fireworks{display:none}}
body:has(.game.reduced-motion) .distant-fireworks{display:none}

/* One low painted console. Secondary phone controls live in the existing
   information/settings menu; the actual controls retain their handlers. */
#game .console{height:84px;min-height:84px;margin-top:3px}
#game .console::before{inset:0;border-image-width:12px}
#game .console .data-strip{position:absolute;left:12px;right:12px;top:4px;bottom:auto;width:auto;height:22px;min-height:22px;margin:0;padding:0;display:flex;gap:8px;border:0;font-size:8px}
#game .console .data-strip>span{max-width:44%;min-width:0;grid-column:auto}
#game .console .data-strip>span:last-child{margin-left:auto}
#game .console .data-strip strong{font-size:19px}
#game .console .control-deck{position:relative;display:block;width:100%;height:84px;min-height:84px;margin:0;padding:0}
#game .console .service-controls{display:contents}
#game .console #info,#game .console #sound{position:absolute;left:12px;right:auto;top:auto;bottom:4px;translate:none;width:44px;height:44px;grid-area:auto}
#game .console #sound{left:56px}
#game .console .amount-controls{position:absolute;left:29.5%;top:50%;bottom:auto;translate:none;transform:translate(-50%,-50%);width:180px;max-width:180px;height:44px;gap:0;grid-template-columns:44px minmax(44px,1fr) 44px}
#game .console #amount{height:44px;min-height:44px}
#game .console .spin{position:absolute;left:50%;right:auto;top:50%;bottom:auto;translate:-50% -50%;transform:none;width:72px;height:72px;margin:0;grid-area:auto;padding:0}
#game .console #turbo,#game .console #auto{position:absolute;left:68%;right:auto;top:50%;bottom:auto;translate:-50% -50%;width:44px;height:44px;grid-area:auto}
#game .console #auto{left:76%}
#game .console #features{position:absolute;left:auto;right:12px;top:auto;bottom:4px;translate:none;width:90px;min-width:76px;height:44px;font-size:10px;grid-area:auto}
#game .console .feature-progress{display:none}
#game[data-feature-active=true] .console :is(.amount-controls,.spin,#features){display:none}
#game[data-feature-active=true] .console .feature-progress{display:block;position:absolute;left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);width:50%;max-width:50%;text-align:center;font-size:10px}
#game[data-feature-active=true] .console #turbo{left:auto;right:12px;translate:0 -50%}
#game .console .spin[hidden]{display:none}
#game .console #turbo[hidden]{display:none}
#game[data-controls-menu=true] .console .amount-controls{width:156px;max-width:156px}
@media(max-width:949px){#game[data-layout=landscape] .console .amount-controls{width:156px;max-width:156px}}
#menu-controls[hidden]{display:none}
#menu-controls:not([hidden]){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0;padding-bottom:14px;border-bottom:1px solid #54637a}
#menu-controls>button{position:relative;display:flex;align-items:center;justify-content:center;gap:5px;width:100%;min-width:0;min-height:48px;height:auto;padding:8px 4px;background:#17364b;border:1px solid #51818c;border-radius:9px;color:#fff0cc;font-size:11px;box-shadow:none;translate:none;transform:none}
#menu-controls>button svg{width:22px;height:22px;flex-shrink:0}
#menu-controls>button small{font-size:10px}
#menu-controls>button[hidden]{display:none}
#menu-controls #turbo[aria-pressed=true]{background:#087e89;color:#fff0cc}
body:has(#game[data-feature-active=true]) #menu-controls #features,body:has(#game[data-feature-active=true]) #menu-controls #auto:not([aria-pressed=true]){display:none}
#game[data-controls-menu=true]:has(#auto[aria-pressed=true]) .console #sound{visibility:hidden}
#game[data-controls-menu=true] .console #auto{left:56px;top:auto;bottom:4px;translate:none}
@media(max-height:470px) and (min-width:641px){#game .console,#game .console .control-deck{height:76px;min-height:76px}#game .console .spin{width:64px;height:64px}}
#game[data-layout=portrait] .console,#game[data-layout=portrait] .console .control-deck,
#game[data-layout=compact] .console,#game[data-layout=compact] .console .control-deck{height:90px;min-height:90px}
#game[data-layout=portrait] .console .data-strip,#game[data-layout=compact] .console .data-strip{left:8px;right:8px;top:3px;height:21px;min-height:21px}
#game[data-layout=portrait] .console .data-strip strong{font-size:18px}
#game[data-layout=compact] .console .data-strip strong{font-size:13px}
#game:is([data-layout=portrait],[data-layout=compact]) .console .amount-controls{left:3px;top:auto;bottom:10px;transform:none;width:148px;max-width:148px}
#game:is([data-layout=portrait],[data-layout=compact]) .console .spin{left:50%;top:auto;bottom:4px;translate:-50% 0;width:64px;height:64px}
#game:is([data-layout=portrait],[data-layout=compact]) .console #info{left:auto;right:51px;bottom:10px}
#game:is([data-layout=portrait],[data-layout=compact]) .console #sound{left:auto;right:7px;bottom:10px}
#game:is([data-layout=portrait],[data-layout=compact]) .console #auto{left:auto;right:7px;top:auto;bottom:10px;translate:none}
#game:is([data-layout=portrait],[data-layout=compact])[data-feature-active=true] .console .feature-progress{left:8px;top:auto;bottom:10px;transform:none;width:calc(100% - 112px);max-width:none;height:44px;display:grid;place-items:center}
@media(max-width:350px){#game[data-layout=portrait] .console .amount-controls{left:0;width:132px;max-width:132px}#game[data-layout=portrait] .console .spin{width:48px;height:48px;bottom:8px}#game[data-layout=portrait] .console #info{right:48px}#game[data-layout=portrait] .console #sound,#game[data-layout=portrait] .console #auto{right:4px}}
/* One painted cap, with its lettering in the same moving layer. There is no
   socket or separate rim. Native hit geometry and click ownership stay fixed. */
#game .console .spin::before{content:none}
#game .console .spin-visual{position:absolute;inset:0;pointer-events:none;translate:0 0;scale:1;transform-origin:50% 80%;transition:translate 65ms cubic-bezier(.2,.8,.2,1),scale 65ms,filter 90ms}
#game .console .spin-face{inset:0;background:none center/contain no-repeat;clip-path:none;translate:0 0;scale:1;filter:none;transform:none;animation:none}
#game .console .spin-face::after{content:none}
#game .console .spin-mark{inset:8%;width:84%;height:84%;translate:0 -4px;fill:var(--hud-paper);stroke:none;transition:translate 65ms cubic-bezier(.2,.8,.2,1),opacity 90ms}
#game .console #spin-label{inset:0 4% 10%;font-size:25px;translate:0 -2px;transition:none}
#game .console #spin-label .splat-lettering{width:76%;height:1em}
#game .console .spin:active:not(:disabled) .spin-visual,#game .console .spin.spin-contact .spin-visual{translate:0 3px;scale:.98 .95;filter:brightness(.97)}
#game .console .spin:disabled{opacity:.86;filter:saturate(.94)}
 #game .console .spin.spin-rebound .spin-visual{animation:spin-painted-cap-return 180ms cubic-bezier(.2,.8,.25,1) both}
@keyframes spin-painted-cap-return{0%{translate:0 3px;scale:.98 .95}65%{translate:0 -1px;scale:1.005 1.01}100%{translate:0 0;scale:1}}
@media(hover:hover){#game .console .spin:hover:not(:disabled) .spin-face{filter:brightness(1.04)}}
@media(prefers-reduced-motion:reduce){#game .console .spin :is(.spin-visual,.spin-face,.spin-mark,#spin-label){transition:none;animation:none}}
#game.reduced-motion .console .spin :is(.spin-visual,.spin-face,.spin-mark,#spin-label){transition:none;animation:none}

/* One centreline and a deliberate oversized primary cap. The data captions
   occupy a separate shallow strip; native targets never follow cap travel. */
#game .console{margin-bottom:10px}
#game .console .data-strip{top:2px;height:17px;min-height:17px;flex-flow:row nowrap;align-items:center;justify-content:space-between}
#game .console .data-strip strong{font-size:16px}
#game .console :is(#info,#sound,#features){top:52%;bottom:auto;translate:0 -50%}
/* Keep class and ID groups separate: an ID inside:is would otherwise raise
   the wager selector's specificity and silently defeat its narrow layout. */
#game .console :is(.amount-controls,.spin){top:52%;bottom:auto}
#game .console :is(#turbo,#auto){top:52%;bottom:auto}
#game .console .spin{width:96px;height:96px}
#game .console #spin-label{font-size:30px}
#game[data-controls-menu=true] .console #auto{top:52%;bottom:auto;translate:0 -50%}
#game:is([data-layout=portrait],[data-layout=compact]) .console .amount-controls{left:3px;top:52%;bottom:auto;transform:translateY(-50%);width:132px;max-width:132px}
#game:is([data-layout=portrait],[data-layout=compact]) .console .spin{top:52%;bottom:auto;translate:-50% -50%;width:96px;height:96px}
#game:is([data-layout=portrait],[data-layout=compact]) .console :is(#info,#sound,#auto){top:52%;bottom:auto;translate:0 -50%}
#game:is([data-layout=portrait],[data-layout=compact]) .console .data-strip{top:2px;height:20px;min-height:20px}
/* Portrait uses the existing feature row for its full44px wager controls,
   leaving one balanced service / central Spin / speed row in the low console. */
#game[data-layout=portrait] .console .spin{left:50%;width:96px;height:96px}
#game[data-layout=portrait] .console .amount-controls{left:auto;right:5px;top:-25px;bottom:auto;transform:translateY(-50%)}
#game[data-layout=portrait]:not([data-feature-active=true]) .console #info{left:8px;right:auto}
#game[data-layout=portrait]:not([data-feature-active=true]) .console #sound{left:52px;right:auto}
#game[data-layout=portrait]:not([data-feature-active=true]) .console #turbo{left:auto;right:52px;translate:0 -50%}
#game[data-layout=portrait]:not([data-feature-active=true]) .console #auto{left:auto;right:8px;translate:0 -50%}
@media(max-height:470px) and (min-width:641px){#game .console .spin{width:88px;height:88px}}
/* 400x225 has a full-width action strip, but cannot reserve a 96px cap. */
#game[data-layout=compact] .console .spin{width:76px;height:76px}

/* Bottom anchored composition leaves more sky while preserving Matrix size. */
body{background-position:center top}
#game[data-layout=portrait],#game[data-layout=landscape]{align-content:end;padding-bottom:max(8px,env(safe-area-inset-bottom))}
#game .preview-note:empty{display:none}
#game[data-layout=portrait] .presenter .hero-float{width:min(100%,46vw,calc(var(--head) + 72px));right:5px}
#game[data-layout=landscape] .presenter .hero-float{width:118%;left:-7%;top:57%}
/* One visible Features tab uses the status row, clear of Spin and amounts. */
#game[data-layout=portrait] .status{min-height:44px;display:flex;align-items:center;justify-content:flex-end;text-align:right;padding:2px 6px 2px 112px;font-size:9px}
#game[data-layout=portrait][data-feature-active=true] .status{padding-left:6px;justify-content:center;text-align:center}
#game[data-layout=portrait] .console #features{left:5px;right:auto;top:-25px;bottom:auto;translate:0 -50%;width:100px;min-width:100px;height:44px;font-size:12px}
body:has(#game[data-layout=portrait]) #menu-controls:not([hidden]){grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:350px){#game[data-layout=portrait] .console #features{width:96px;min-width:96px;font-size:11px}#game[data-layout=portrait] .status{padding-left:106px}}
/* Live Win and board labels carry ordinary results; keep the feature/wager
   row clear. Full connection errors take priority over disabled paid inputs. */
#game[data-layout=portrait]:not([data-feature-active=true]) .status{opacity:0;pointer-events:none}
#game[data-layout=portrait][data-connection-phase=uncertain] .status{opacity:1;padding:2px 148px 2px 6px;font-size:11px;line-height:1.3;text-align:left;justify-content:flex-start}
#game[data-connection-phase=uncertain] .console :is(.amount-controls,#features){visibility:hidden}
/* Recovery replaces the locked wager slot; it never adds a row or moves the
   Matrix. Its complete44px face remains reachable at the compact sizes too. */
#game .console #connection-recovery{position:absolute;left:29.5%;right:auto;top:52%;bottom:auto;transform:translate(-50%,-50%);width:156px;height:44px;min-height:44px;display:grid;place-items:center;padding:6px 10px;background:#ff6653;border:2px solid #ffe4a0;box-shadow:0 2px 0 #0b1934;z-index:4}
#game .console #connection-recovery[hidden]{display:none}
#game .console #connection-recovery .splat-lettering{width:100%;height:22px}
#game[data-layout=portrait] .console #connection-recovery{left:auto;right:5px;top:-25px;transform:translateY(-50%);width:132px}
#game[data-layout=compact] .console #connection-recovery{left:3px;right:auto;top:44px;transform:translateY(-50%);width:132px}
.connection-detail{font-size:14px;line-height:1.5;overflow-wrap:anywhere}
@media(max-height:470px) and (min-width:641px){#game[data-layout=landscape]{padding-bottom:4px}#game[data-layout=landscape] .presenter .hero-float{width:112%;left:-4%}}
/* Tall desktop frames already contain transparent headroom above their painted
   rim. Put mode/count there: a separate flow row pushed them above the viewport
   in the bottom-anchored cabinet. Matrix, presenter and console stay fixed. */
@media(min-height:471px){
 #game[data-layout=landscape] .mode-strip{position:absolute;top:0;left:0;right:0;height:clamp(24px,calc(var(--board-width) * .05),38px);margin:0;padding:0 6px}
 #game[data-layout=landscape] .mode-strip #round-label.bonus-counter{--counter-height:clamp(20px,calc(var(--board-width) * .042),30px)}
}
/* Compact bonus mode is already readable in the service strip. Keep its
   single remaining-spin group centred above the tiny Matrix, without trying
   to squeeze the mode name into the nineteen-pixel side column. */
#game[data-layout=compact] .mode-strip:has(.bonus-counter) #mode-label{display:none}
#game[data-layout=compact] .mode-strip #round-label.bonus-counter{grid-column:2}
/* Compact has one44px action line and a shallow data line. Remove the old
   two-row reservation so the four symbol rows reclaim actual height. */
#game[data-layout=compact]{grid-template-rows:minmax(0,1fr) 76px}
#game[data-layout=compact] .mode-strip{height:25px}
#game[data-layout=compact] .console,#game[data-layout=compact] .console .control-deck{height:76px;min-height:76px;margin:0}
#game[data-layout=compact] .console :is(#info,#sound,#auto,#turbo,#features){top:44px;bottom:auto;translate:0 -50%}
#game[data-layout=compact] .console .amount-controls{top:44px;bottom:auto}
#game[data-layout=compact] .console .spin{top:44px;bottom:auto;width:64px;height:64px;translate:-50% -50%}
#game[data-layout=compact] .console .feature-progress{top:44px}
/* Upcoming-play Stop remains a separate reachable action. Its temporary slot
   replaces the already-locked amount group; Sound stays available on the right. */
#game[data-layout=compact]:has(#auto[aria-pressed=true]) .console .amount-controls{visibility:hidden}
#game[data-layout=compact]:has(#auto[aria-pressed=true]) .console #sound{visibility:visible}
#game[data-layout=compact]:has(#auto[aria-pressed=true]) .console #auto{left:56px;right:auto;top:44px;translate:0 -50%}
#game[data-layout=compact][data-feature-active=true]:has(#auto[aria-pressed=true]) .console .feature-progress{left:140px;width:150px;max-width:150px;transform:translateY(-50%)}
/* Explicit local inspection stays usable in an embedded225px viewport too. */
.motion-review{max-height:calc(100dvh - 16px);overflow-y:auto}
/* The raised Spin cap crosses the data line. Reserve its complete width in
   narrow base/recovery layouts instead of letting a long token run behind it.
   Stack each caption above its value; neither the amount nor token is elided. */
#game:is([data-layout=portrait],[data-layout=compact]):not([data-feature-active=true]) .console .data-strip:has(:is(#balance-value,#replay-cost)){
 display:grid;grid-template-columns:minmax(0,1fr) 108px minmax(0,1fr);gap:0;height:22px;min-height:22px;align-items:start;
}
#game[data-layout=compact]:not([data-feature-active=true]) .console .data-strip:has(:is(#balance-value,#replay-cost)){grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr)}
#game:is([data-layout=portrait],[data-layout=compact]):not([data-feature-active=true]) .console .data-strip>span:has(:is(#balance-value,#win-value)){
 display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;grid-column:1;width:100%;max-width:none;margin:0;gap:0;font-size:7px;line-height:7px;
}
#game:is([data-layout=portrait],[data-layout=compact]):not([data-feature-active=true]) .console .data-strip>span:has(#win-value){grid-column:3;align-items:flex-end}
#game:is([data-layout=portrait],[data-layout=compact]):not([data-feature-active=true]) .console .data-strip :is(#balance-value,#win-value){width:100%;max-width:100%;height:14px;font-size:14px;line-height:14px;text-align:left}
#game:is([data-layout=portrait],[data-layout=compact]):not([data-feature-active=true]) .console .data-strip #win-value{text-align:right}
#game:is([data-layout=portrait],[data-layout=compact]):not([data-feature-active=true]) .console .data-strip #win-value .splat-lettering{margin-left:auto}

/* Replay has a full historical cost and its basis, without a mutable selector.
   Give the SVG a real column; an intrinsic auto-width flex item collapsed to0.
   Reserve the same centre-cap gap as the live wallet. */
#game .console .data-strip:has(#replay-cost){height:28px;min-height:28px;align-items:flex-start}
#game .console #replay-cost{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:7px 14px 7px;align-items:start;justify-items:start;width:clamp(96px,28vw,180px);max-width:44%;min-width:0;gap:0;font-size:7px;line-height:7px;white-space:nowrap}
#game .console #replay-cost .replay-cost-caption{font-size:7px;line-height:7px}
#game .console #replay-total{display:block;width:100%;max-width:100%;min-width:0;height:14px;font-size:14px;line-height:14px;text-align:left}
#game .console #replay-total .splat-lettering{width:auto;max-width:100%;height:14px;margin:0}
#game .console #replay-base{font-size:7px;line-height:7px;letter-spacing:0}
#game:is([data-layout=portrait],[data-layout=compact]):not([data-feature-active=true]) .console .data-strip:has(#replay-cost){height:28px;min-height:28px}
#game:is([data-layout=portrait],[data-layout=compact]):not([data-feature-active=true]) .console #replay-cost{grid-column:1;width:100%;max-width:none;margin:0}
/* The shortest console needs3px more upper clearance for the third cost line.
   All remaining replay controls keep one centreline and their original hits. */
#game[data-layout=compact]:has(#replay-cost):not([data-feature-active=true]) .console :is(#info,#sound,#turbo,#spin){top:56%;bottom:auto}
/* Readable wallet glyphs within the existing90px console. A lower common
   button centreline gives captions and amounts their own band. */
#game[data-layout=portrait][data-runtime] .console .data-strip:has(#balance-value){height:31px;min-height:31px;align-items:flex-start}
#game[data-layout=portrait][data-runtime] .console .data-strip>span:has(:is(#balance-value,#win-value)){display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;font-size:9px;line-height:9px}
#game[data-layout=portrait][data-runtime] .console .data-strip>span:has(#win-value){align-items:flex-end}
#game[data-layout=portrait][data-runtime] .console .data-strip :is(#balance-value,#win-value){width:100%;height:22px;font-size:22px;line-height:22px}
#game[data-layout=portrait][data-runtime] .console .data-strip :is(#balance-value,#win-value) .splat-lettering{height:22px;max-width:100%;width:auto}
#game[data-layout=portrait][data-runtime] .console :is(#info,#sound,#turbo,#auto,#spin,.feature-progress){top:60%;bottom:auto}
#game[data-layout=compact]:not([data-feature-active=true]) .console .data-strip>span:has(:is(#balance-value,#win-value)){font-size:8px;line-height:8px}
#game[data-layout=compact]:not([data-feature-active=true]) .console .data-strip :is(#balance-value,#win-value){height:16px;font-size:16px;line-height:16px}

/* New illustrated cap: the visible painted mass is substantially larger than
   the retired SVG disc. Keep its real target clear of the full wager/feature
   row and viewport edge; the thin console itself does not grow. */
#game .console .spin .spin-mark{display:none}
/* The finishing phase stays visibly alive without a second word treatment.
   Rotate only the hand-drawn arrows; the one-piece cap and hit target stay put. */
#game .console .spin[data-motion=working] #spin-label{opacity:0}
#game .console .spin[data-motion=working] .spin-mark{display:block;inset:15% 20% 25%;width:60%;height:60%;translate:none;fill:#11172d;stroke:none;opacity:1;transform-origin:center;animation:spin-working-arrows 1.2s linear infinite}
@keyframes spin-working-arrows{from{rotate:0deg}to{rotate:360deg}}
@media(prefers-reduced-motion:reduce){#game .console .spin[data-motion=working] .spin-mark{animation:none}}
#game.reduced-motion .console .spin[data-motion=working] .spin-mark{animation:none}
#game[data-layout=landscape] .console .spin{width:clamp(104px,21.34dvh,144px);height:clamp(104px,21.34dvh,144px);top:calc(52% - 15px)}
#game[data-layout=landscape] .console #spin-label{font-size:44px}
#game[data-layout=portrait] .console .spin{width:120px;height:120px;top:calc(60% - 8px)}
#game[data-layout=portrait][data-runtime] .console #spin{top:calc(60% - 8px)}
#game[data-layout=portrait] .console #spin-label{font-size:38px}
#game[data-layout=portrait] .console :is(.amount-controls,#features){top:-37px}
#game[data-layout=portrait]:not([data-feature-active=true]) .console .data-strip:has(:is(#balance-value,#replay-cost)){grid-template-columns:minmax(0,1fr) 128px minmax(0,1fr)}
#game[data-layout=compact] .console .spin{width:80px;height:80px;top:36px}
#game[data-layout=compact]:has(#replay-cost):not([data-feature-active=true]) .console #spin{top:36px}
#game[data-layout=compact] .console #spin-label{font-size:24px}
#game[data-layout=compact] .presenter .hero-float{width:min(70%,calc(100dvh - 116px),210px);height:auto;aspect-ratio:1;left:50%;right:auto;top:50%;transform:translate(-50%,-50%)}
#game[data-layout=compact]:not([data-feature-active=true]) .console .data-strip:has(:is(#balance-value,#replay-cost)){grid-template-columns:minmax(0,1fr) 88px minmax(0,1fr)}

}