/* Runtime integration; the measured portrait layouts live in remaining-screens.css. */
#device{--safe-top:0px;--safe-bottom:0px;--safe-left:0px;--safe-right:0px}
#loading,#loadfail{z-index:40}
.runtime-state.load:not(.fail) .dizzy{display:none}
#device .runtime-state{--safe-top:inherit;--safe-bottom:inherit;--safe-left:inherit;--safe-right:inherit}
.state-layer{position:absolute;inset:0;pointer-events:none;z-index:12}
.state-layer button,.state-layer .srow{pointer-events:auto}
.phone.net .game-arena,.phone.spec .game-arena{z-index:0}
.phone.net #stick,.phone.net #punch,.phone.net #special,.phone.net .match-pause,
.phone.spec #stick,.phone.spec #punch,.phone.spec #special,.phone.spec .match-pause,
.phone.spec .hstrip{display:none}
.runtime-state.spec .htimer{top:calc(74px + var(--safe-top))!important}
.runtime-state .srow{max-width:280px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.runtime-state .srow button{flex:none}
.runtime-state .sleft{max-width:96px}
.runtime-state .specbar{gap:6px}
.runtime-state .swho b{font-family:var(--f-pixel);font-size:8px;line-height:1.2}
.runtime-state .swho b.long{font-size:7px}
.runtime-state .pcard .cp,.runtime-state .buyname{overflow-wrap:anywhere}
.runtime-state .buyname{max-width:100%}
.runtime-state .bpow span{max-height:58px;overflow-y:auto}
.menu-settings{left:calc(50% + 47px)}
.menu-shop:not(.menu-settings){left:calc(50% - 58px)}
.menu-settings,.menu-shop{min-height:40px;min-width:90px;font-family:var(--f-display);font-size:13px;clip-path:none;border:3px solid var(--ink);box-shadow:inset 0 -5px var(--blue3),inset 0 3px var(--sky),3px 4px 0 var(--ink);padding:7px 10px 10px}
#device[data-stick-side="RIGHT"] #stick{left:auto!important;right:calc(18px + var(--safe-right,0px))!important}
#device[data-stick-side="RIGHT"] #punch{right:auto!important;left:calc(18px + var(--safe-left,0px))!important}
#device[data-stick-side="RIGHT"] #special{right:auto!important;left:calc(38px + var(--safe-left,0px))!important}
#device[data-screen-shake="false"] .brawl-shake .game-arena{animation:none}
#device .phone{--f-body:var(--f-pixel)}
.runtime-state.set .rows{max-height:calc(100% - 330px - var(--safe-top) - var(--safe-bottom));overflow-y:auto}
.runtime-state.set .tog:after{content:"";position:absolute;inset:-8px 0}
@media(max-width:600px){
 .runtime-state .pb-back{top:calc(18px + var(--safe-top))}
 .runtime-state .play-wrap{min-height:50px}
}

/* Secondary actions share the blue treatment across the playable game. */
.phone.queue .play,.phone.pick .play{background:var(--blue2);color:#fff;box-shadow:inset 0 -6px var(--blue3),inset 0 4px var(--sky)}
.phone.queue .play:active,.phone.pick .play:active{box-shadow:inset 0 -2px var(--blue3),inset 0 3px var(--sky)}