/* Keep the three-row game and its controls together within the available screen. */
body[data-room] .topbar{min-height:36px;padding:0 10px;margin:0 auto;gap:8px}
body[data-room] .topbar .version-button,body[data-room] .utility-menu>summary{min-height:36px;padding:6px 0;font-size:11px}
body[data-room] .topbar .brand,body[data-room] .topbar .brand>span,body[data-room] .topbar .brand>span:last-child{font-size:11px;letter-spacing:.15em}
body[data-room] main{padding-bottom:6px}
body[data-room] #game-view .stage-header .game-heading,body[data-room].candidate .stage-header .game-heading,body[data-room].cinema-mode #game-view .stage-header .game-heading{height:auto;min-height:0;padding:0 0 4px}
body[data-room] #game-title,body[data-room].candidate .game-heading h1{font-size:clamp(28px,4.6svh,44px);line-height:1.05}
body[data-room] #game-title span,body[data-room].candidate .game-heading h1 span{font-size:10px;line-height:1.3;margin-top:3px}
body[data-room] .room-switch{margin:0 auto 4px;padding:2px;gap:2px}
body[data-room] .room-switch button{min-height:34px;padding:5px 16px;font-size:11px}
body[data-room] .game-content,body[data-room].cinema-mode .game-content{padding:0}
body[data-room] .reel-area,body[data-room].cinema-mode .reel-area{padding-top:0;padding-bottom:0}
body[data-room] .reels{--row-min:56;--row-max:128;--row:clamp(56px,calc((100svh - 445px) / 3),128px)}
body[data-room] .reels .symbol,body[data-room] .reels .strip-cell{padding-bottom:18px}
body[data-room] .reels .symbol .symbol-art,body[data-room] .reels .strip-cell .symbol-art{width:min(calc(var(--row) - 20px),100%)}
body[data-room] .reels .symbol.center small{font-size:10px;min-height:17px;padding:1px 0;line-height:1.4}
body[data-room] .reel-line-note{font-size:9px;line-height:12px;margin:1px 0 0}
body[data-room] .result{min-height:43px;margin:3px 0 5px;padding:2px 0;gap:1px}
body[data-room] #result-title,body[data-room] .result.win #result-title{font-size:20px;line-height:1.2}
body[data-room] #result-kicker{font-size:10px;line-height:1.3}
body[data-room] #result-detail{font-size:11px;line-height:1.3}
body[data-room] #result-title::before,body[data-room] #result-title::after{width:24px;margin:0 12px}
body[data-room] .controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(100px,.9fr);grid-template-areas:'balance stake bets spin';gap:8px 16px;padding:9px 16px;border-radius:14px}
body[data-room] .controls::before{border-radius:11px}
body[data-room] .controls>.metric{padding-right:12px;justify-content:center}
body[data-room] .controls>.stake-control,body[data-room] .controls>.bet-options{align-self:center}
body[data-room] .controls .metric>span,body[data-room] .controls .stake-control label{font-size:11px;line-height:1.4;letter-spacing:.04em}
body[data-room] .controls .metric strong{font-size:28px;line-height:1.15;padding:2px 0}
body[data-room] .controls .metric .metric-note{font-size:9px;line-height:1.3;letter-spacing:.04em}
body[data-room] .stake-heading{min-height:16px}
body[data-room] .stake-input-wrap{margin-top:2px;padding:0 8px;gap:4px}
body[data-room] .stake-input-wrap input{height:38px;font-size:26px}
body[data-room] .stake-input-wrap>span{font-size:11px}
body[data-room] .bet-chips{gap:5px}
body[data-room] .bet-chips button{min-height:40px;padding:4px 2px;font-size:17px}
body[data-room] .controls>.spin{min-height:62px;padding:10px 8px;font-size:18px;letter-spacing:.12em}
body[data-room] .payout-shelf{margin:4px auto 0;padding:0;max-width:540px}
body[data-room] .payout-shelf .legend-item{grid-template-rows:22px auto auto;gap:0;padding:0 4px}
body[data-room] .payout-shelf .legend-item .symbol-art{width:22px;height:22px}
body[data-room] .payout-shelf .legend-item>span:not(.symbol-art){font-size:10px;line-height:1.3}
body[data-room] .payout-shelf .legend-item b{font-size:12px;line-height:1.3}
body[data-room] .console-bottom,body[data-room] .payout-shelf+.console-bottom{padding:1px 0 0;gap:0 18px}
body[data-room] .game-options>summary,body[data-room] .session-drawer>summary,body[data-room] .console-bottom>.text-btn{min-height:34px;padding:3px 2px;font-size:14px;gap:4px}
body[data-room] .game-options>summary::after,body[data-room] .session-drawer>summary::after{font-size:15px;margin-left:3px}
body[data-room] .console-bottom .arena-footer{min-height:18px;margin:0;padding:0;font-size:10px;line-height:1.5;letter-spacing:.04em}
body[data-room].cinema-mode main{padding-top:4px}
@media(max-width:650px){
 body[data-room] .topbar{width:100%;min-height:36px;padding:0 12px}
 body[data-room] .topbar .brand,body[data-room] .topbar .brand>span,body[data-room] .topbar .brand>span:last-child{font-size:10px;letter-spacing:.09em}
 body[data-room] main{padding:0 8px max(4px,env(safe-area-inset-bottom))}
 body[data-room] #game-title,body[data-room].candidate .game-heading h1{font-size:clamp(27px,4.7svh,36px)}
 body[data-room] #game-title span,body[data-room].candidate .game-heading h1 span{font-size:9px;margin-top:2px}
 body[data-room] .room-switch button{min-height:36px;padding:5px 15px}
 body[data-room] .reels{--row-max:112;--row:clamp(56px,calc((100svh - 415px) / 3),112px)}
 body[data-room] .reel-area,body[data-room].cinema-mode .reel-area{padding-left:2px;padding-right:2px}
 body[data-room] .result{min-height:40px;margin:2px 0 4px}
 body[data-room] #result-title,body[data-room] .result.win #result-title{font-size:18px}
 body[data-room] #result-title::before,body[data-room] #result-title::after{width:15px;margin:0 8px}
 body[data-room] .controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(66px,.75fr);grid-template-areas:'balance stake spin' 'bets bets spin';gap:5px 8px;padding:8px;border-radius:12px}
 body[data-room] .controls::before{border-radius:9px}
 body[data-room] .controls>.metric{padding-right:6px}
 body[data-room] .controls .metric strong{font-size:clamp(21px,6vw,28px)}
 body[data-room] .controls .metric>span,body[data-room] .controls .stake-control label{font-size:10px}
 body[data-room] .controls .metric .metric-note{font-size:8px}
 body[data-room] .stake-input-wrap{padding:0 5px}
 body[data-room] .stake-input-wrap input{height:36px;font-size:clamp(21px,6vw,28px)}
 body[data-room] .bet-chips button{min-height:36px;font-size:17px}
 body[data-room] .controls>.spin{align-self:stretch;min-height:82px;padding:8px 4px;font-size:16px;letter-spacing:.07em}
 body[data-room] .payout-shelf{margin-top:3px}
 body[data-room] .payout-shelf .legend-item{padding:0 2px;grid-template-rows:18px auto auto}
 body[data-room] .payout-shelf .legend-item .symbol-art{width:18px;height:18px}
 body[data-room] .payout-shelf .legend-item>span:not(.symbol-art){font-size:9px}
 body[data-room] .payout-shelf .legend-item b{font-size:11px}
 body[data-room] .console-bottom,body[data-room] .payout-shelf+.console-bottom{gap:0 8px}
 body[data-room] .game-options>summary,body[data-room] .session-drawer>summary,body[data-room] .console-bottom>.text-btn{min-height:34px;padding:3px 1px;font-size:12px;gap:2px}
 body[data-room] .console-bottom .arena-footer{font-size:9px}
}