/* Real hit areas, independent of visual scaling. Side rails reserve their full width. */
#play{--pad-cell:44px;--pad-size:calc(3 * var(--pad-cell) + 4px);--rail:clamp(140px,14vw,180px)}
body[data-large-controls=true] #play{--pad-cell:48px;--rail:clamp(152px,15vw,192px)}
#play #dpad{grid-template:repeat(3,var(--pad-cell))/repeat(3,var(--pad-cell))}
#play #dpad button{min-height:var(--pad-cell);width:var(--pad-cell);height:var(--pad-cell)}
#play .movement{left:var(--edge-left)}
body[data-large-controls=true] #play .movement,body[data-large-controls=true] #play .action-controls{transform:none}
body[data-large-controls=true] #play .bomb{width:144px;height:120px}
body[data-large-controls=true] #play .shield{width:144px;height:64px}
body[data-large-controls=true] #play .action-controls{right:var(--edge-right)}
body[data-large-controls=true] #play #joystick{width:148px;height:148px}
#loading{padding:24px;text-align:center;overflow:auto;min-height:100dvh}
#loading>span{max-width:430px;line-height:1.6}
.loading-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:520px}
.loading-actions button{min-height:48px;font-size:15px}
@media(max-height:550px) and (orientation:landscape){
 #play .hud .circle{width:44px;height:44px;min-width:44px}
 #play .hud{gap:8px;padding:0 4px}
 #play .game-status{top:104px;font-size:12px;line-height:1.35;gap:4px;max-height:calc(100dvh - 116px - var(--pad-size) - var(--edge-bottom));overflow:auto}
 #play .lesson{top:100px;max-height:calc(100dvh - 112px - var(--pad-size) - var(--edge-bottom));padding:8px;gap:5px}
 #play .lesson b{font-size:10px;line-height:1.3}
 #play .lesson span{font-size:12px;line-height:1.3;margin-top:3px}
 #play .lesson button{min-height:32px;font-size:11px}
 #play .movement{left:var(--edge-left)}
 #play .loadout{font-size:9px;letter-spacing:.3px}#play .loadout b{font-size:15px}
 #play .shield{height:48px}#play .shield b{font-size:12px}
 body[data-large-controls=true] #play .bomb{width:128px;height:100px}
 body[data-large-controls=true] #play .shield{width:128px;height:54px}
 body[data-large-controls=true] #play .action-controls{right:calc(var(--edge-right) + 8px)}
 #play .online-status{font-size:10px}#play #series-score>span{font-size:10px}
}
@media(max-height:350px) and (orientation:landscape){
 #play:has(.lesson:not(.hidden)) .location{display:none}
 #play .lesson{top:60px;max-height:calc(100dvh - 68px - var(--pad-size) - var(--edge-bottom));padding:6px;gap:3px}
 #play .game-status{top:100px;max-height:calc(100dvh - 108px - var(--pad-size) - var(--edge-bottom))}
 #play:has(#online-status:not(.hidden)) #objective{display:none}
 #play .online-status{top:122px;gap:3px;line-height:1.1}
 #play #series-score>span{padding:1px;font-size:10px;line-height:1.1}
 #loading{gap:10px;padding:12px}#loading img{width:48px}.loading-actions{gap:10px}
}