/* A battle uses the available device width. Menus, chat, and side panes keep
   their own scrolling; only the map consumes multi-touch camera gestures. */
body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas){--battle-map-height:clamp(240px,55dvh,620px)}
body.game-client :is(.expedition-layout,.raid-layout,.pvp-battle-layout)>*,body.game-client :is(.battle-panel,.raid-arena,.pvp-arena){min-width:0}
body.game-client :is(.battle-map,.raid-canvas-wrap,.pvp-canvas-wrap){width:100%;max-width:100%;overflow:hidden}
body.game-client :is(.battle-map,.raid-canvas-wrap,.pvp-canvas-wrap) canvas{width:100%;height:100%;display:block}

@media(max-width:1180px){
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas) #app{padding:12px 14px 20px}
 body.game-client .expedition-layout.game-layout{grid-template-columns:minmax(0,1fr) 225px;gap:12px}
 body.game-client .raid-layout{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:12px}
 body.game-client .raid-layout>div{display:block;min-width:0}
 body.game-client .raid-controls-panel{position:sticky;top:8px;width:auto;margin:0;max-height:calc(100dvh - 190px);overflow:auto;overscroll-behavior:contain;padding:14px}
 body.game-client .pvp-battle-layout{grid-template-columns:minmax(0,1fr) 240px;gap:12px}
 body.game-client .pvp-controls{padding:14px;max-height:calc(100dvh - 190px);overscroll-behavior:contain}
 body.game-client :is(.battle-map,.raid-canvas-wrap,.pvp-canvas-wrap){height:var(--battle-map-height);aspect-ratio:auto}
 body.game-client .raid-controls-panel .raid-move{min-height:94px;padding:9px}
 body.game-client .battle-sidebar .tower-move{min-height:48px}
 body.game-client :is(.raid-boss-hud,.battle-hud){padding:11px 13px;gap:10px}
 body.game-client .raid-boss-hud h2{font-size:18px}
 body.game-client .raid-boss-hud>div{min-width:0}
 body.game-client .raid-boss-health{flex-shrink:0}
 body.game-client .raid-arena-toolbar{padding:10px 12px}
 body.game-client .battle-sidebar{max-height:calc(100dvh - 190px)}
}

/* Portrait tablets and phones give the whole width to the board. The Pokémon
   panes remain directly below it rather than squeezing it into a narrow strip. */
@media(max-width:1000px) and (orientation:portrait),(max-width:650px){
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas){--battle-map-height:clamp(240px,51dvh,620px)}
 body.game-client :is(.expedition-layout.game-layout,.raid-layout,.pvp-battle-layout){display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
 body.game-client :is(.expedition-layout>.battle-sidebar,.raid-controls-panel,.pvp-controls){position:static;max-height:none;min-height:0;overflow:visible;width:100%;margin:0}
 body.game-client .expedition-layout>.battle-sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
 body.game-client .battle-sidebar #tower-details{grid-column:1/-1}
 body.game-client .battle-sidebar .selected-tower{margin-top:0}
 body.game-client .battle-sidebar .tower-move-grid,body.game-client .pvp-moves{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.game-client .battle-sidebar .tower-combat-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
 body.game-client .expedition-layout .party-panel #party-list{max-height:190px}
 body.game-client .pvp-bench{grid-template-columns:repeat(2,minmax(0,1fr))}
 body.game-client .pvp-lobby-layout{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:650px){
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas) #app{padding:10px 8px 16px}
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas) .game-header{align-items:flex-start;gap:8px;flex-wrap:wrap;margin-bottom:12px}
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas) .game-header h1{font-size:22px;letter-spacing:-.6px}
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas) .game-header p{font-size:10px;margin-bottom:0}
 body.game-client .expedition-layout>.battle-sidebar{display:block}
 body.game-client .battle-sidebar .selected-tower{margin-top:12px}
 body.game-client .expedition-layout .party-panel #party-list{display:flex;flex-wrap:wrap;gap:8px 14px;max-height:none}
 body.game-client .battle-toolbar{padding:8px;gap:6px}
 body.game-client .expedition-layout .battle-toolbar>.button{font-size:10px;min-height:38px;padding:8px}
 body.game-client .battle-toolbar small{font-size:10px}
 body.game-client .map-label{left:7px;bottom:7px;font-size:9px;max-width:calc(100% - 14px);padding:6px 8px}
 body.game-client .pvp-arena{padding:8px}
 body.game-client .pvp-versus{grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr);gap:5px}
 body.game-client .pvp-combatant{gap:5px;min-width:0}
 body.game-client .pvp-combatant strong{font-size:11px;overflow-wrap:anywhere}
 body.game-client .pvp-combatant small{font-size:9px}
 body.game-client .pvp-combatant .portrait{width:31px;height:31px}
}

/* Short landscape screens prioritize a bounded map and keep the side pane
   scrollable. The page may scroll vertically to reach roster and move details. */
@media(max-width:1180px) and (orientation:landscape){
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas){--battle-map-height:clamp(170px,calc(100dvh - 380px),520px)}
 body.game-client .expedition-layout.game-layout{grid-template-columns:minmax(0,1fr) 210px}
 body.game-client .raid-layout,body.game-client .pvp-battle-layout{grid-template-columns:minmax(0,1fr) 230px}
 body.game-client :is(.battle-sidebar,.raid-controls-panel,.pvp-controls){max-height:calc(var(--battle-map-height) + 105px);min-height:0}
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas) .breadcrumb{margin-bottom:8px}
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas) .game-header{margin-bottom:10px;gap:10px}
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas) .game-header h1{font-size:23px;margin-bottom:5px}
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas) .game-header p{font-size:11px;margin-bottom:0;line-height:1.4}
}
@media(max-height:600px) and (orientation:landscape){
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas){--battle-map-height:clamp(150px,calc(100dvh - 205px),310px)}
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas) #app{padding:6px 8px 12px}
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas) .breadcrumb{display:none}
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas) .game-header{margin-bottom:6px;align-items:center;flex-wrap:nowrap}
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas) .game-header h1{font-size:16px;letter-spacing:-.3px;margin:0}
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas) .game-header p{display:none}
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas) .game-header .inline-row{gap:7px}
 body.game-client:has(#battle-canvas,#raid-canvas,#pvp-canvas) .game-header .button{font-size:9px;padding:5px 8px;min-height:30px}
 body.game-client .expedition-layout.game-layout{grid-template-columns:minmax(0,1fr) 190px;gap:8px}
 body.game-client .raid-layout,body.game-client .pvp-battle-layout{grid-template-columns:minmax(0,1fr) 210px;gap:8px}
 body.game-client :is(.battle-hud,.raid-boss-hud){padding:6px 10px}
 body.game-client .battle-hud small{font-size:7px}
 body.game-client .battle-hud b{font-size:12px}
 body.game-client .raid-boss-hud h2{font-size:15px}
 body.game-client .raid-boss-hud .eyebrow{display:none}
 body.game-client .raid-boss-health strong{font-size:10px;margin-bottom:4px}
 body.game-client .raid-boss-health .health-track{height:6px}
 body.game-client .raid-boss-join-chance{font-size:9px;margin-top:4px}
 body.game-client .battle-toolbar{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;padding:6px;gap:6px}
 body.game-client .expedition-layout .battle-toolbar>.button{min-height:34px;white-space:nowrap;font-size:9px;padding:6px 8px}
 body.game-client .battle-toolbar small{display:none}
 body.game-client .raid-arena-toolbar{padding:6px 9px;gap:7px}
 body.game-client .raid-arena-toolbar>p{font-size:9px}
 body.game-client .raid-scaling{padding:6px 9px;font-size:9px}
 body.game-client .map-label{font-size:8px;line-height:1.4;max-width:90%;padding:4px 6px;left:6px;bottom:6px}
 body.game-client .pvp-versus{margin-bottom:5px}
 body.game-client .pvp-turn-help{font-size:10px;min-height:0;margin:6px 0}
 body.game-client .world-chat-widget .world-chat-log{height:26px}
 body.game-client .world-chat-widget>header{min-height:28px}
 body.game-client .world-chat-widget .world-chat-body{padding:4px 9px 5px}
 body.game-client .world-chat-form{padding-top:4px;margin-top:3px}
 body.game-client .world-chat-widget .world-chat-toggle{padding:4px 0;font-size:10px}
 body.game-client .world-chat-status{display:none}
 body.game-client .world-chat-tabs>button{min-height:28px;padding:4px 8px}
}
@media(max-width:1180px){body.game-client #app{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}}

/* Keep raid preparation alongside the arena on landscape tablets rather than
   allowing the introductory copy to push the board below the chat dock. */
@media(max-width:1180px) and (orientation:landscape){
 body.game-client .raid-search.raid-preparation{padding:8px 12px;margin-bottom:10px}
 body.game-client .raid-preparation .raid-preparation-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center}
 body.game-client .raid-preparation-heading .eyebrow{display:none}
 body.game-client .raid-preparation-heading h2{font-size:16px;line-height:1.2;margin:0 0 3px}
 body.game-client .raid-preparation-heading p{font-size:10px;line-height:1.4;margin:0;max-width:none}
 body.game-client .raid-preparation .countdown{font-size:10px;min-width:0;padding:6px 9px}
 body.game-client .raid-preparation .raid-ready-row{margin-top:7px;padding-top:7px;gap:12px;flex-wrap:nowrap}
 body.game-client .raid-ready-row>strong{font-size:10px}
 body.game-client .raid-ready-row>span{font-size:9px;line-height:1.4;flex:1}
 body.game-client .raid-ready-row>.button{font-size:10px;min-height:32px;min-width:100px;width:auto;padding:6px 10px}
 body.game-client:has(#raid-search:not([hidden])){--battle-map-height:clamp(170px,calc(100dvh - 490px),420px)}
}
@media(max-height:600px) and (orientation:landscape){
 body.game-client .raid-search.raid-preparation{padding:6px 9px;margin-bottom:7px;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,1fr);gap:12px;align-items:center}
 body.game-client .raid-search.raid-preparation[hidden]{display:none}
 body.game-client .raid-preparation-heading h2{font-size:14px;margin:0}
 body.game-client .raid-preparation-heading p{display:none}
 body.game-client .raid-preparation .raid-ready-row{margin:0;padding:0;border:0;gap:7px}
 body.game-client .raid-ready-row>span{font-size:8px}
 body.game-client:has(#raid-search:not([hidden])){--battle-map-height:clamp(150px,calc(100dvh - 255px),260px)}
}