/* Landscape is a focused board with one left rail for pieces or a mobile panel. */
body[data-screen=mobile][data-landscape=true]{
 --landscape-rail:clamp(272px,38vw,360px);--landscape-footer:88px;
 padding:0;display:block;
}
body[data-screen=mobile][data-landscape=true].normal-online{--landscape-footer:52px}
body[data-screen=mobile][data-landscape=true]>.playground{
 position:absolute;inset:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
 display:grid!important;grid-template-columns:var(--landscape-rail) minmax(0,1fr);grid-template-rows:minmax(0,1fr) var(--landscape-footer);
 width:auto;height:auto;min-height:0;padding:0;gap:0;
}
body[data-screen=mobile][data-landscape=true]:is(.lab-page,.comparing)>.playground,
body[data-screen=mobile][data-landscape=true]:is([data-setup-open],#setup-page:not([hidden]))>.playground{display:none!important}
body[data-screen=mobile][data-landscape=true]>.playground>.board-section{position:relative;inset:auto;grid-column:2;grid-row:1/-1;min-width:0;min-height:0;width:auto;height:auto;margin:0}
body[data-screen=mobile][data-landscape=true] .board-wrap{height:100%;border-radius:0}
body[data-screen=mobile][data-landscape=true]>.playground>:is(.game-panel,.panel-rail-right){display:none!important}
body[data-screen=mobile][data-landscape=true]>:is(header,.workspace-bar,.mobile-nav){display:none!important}

/* Desktop icons retain mobile tab behavior; their order starts with Overlays. */
body[data-screen=mobile][data-landscape=true] .board-section>.board-toolbar{position:absolute;inset:6px 8px auto auto;min-width:0;min-height:36px;height:36px;width:auto;max-width:calc(100% - 16px);margin:0;padding:0;z-index:110;flex-wrap:nowrap;gap:0;background:transparent}
body[data-screen=mobile][data-landscape=true] .board-toolbar>.turn{display:none}
body[data-screen=mobile][data-landscape=true] .board-tools{--tool-size:36px;display:flex;flex-wrap:nowrap;gap:4px;width:auto;margin:0;justify-content:flex-end;align-items:center}
body[data-screen=mobile][data-landscape=true] .board-tools>.panel-controls{display:contents}
body[data-screen=mobile][data-landscape=true] .board-tools>:is(button,.overlay-anchor),
body[data-screen=mobile][data-landscape=true] .board-tools>.panel-controls>button{width:36px;min-width:36px;max-width:36px;height:36px;min-height:36px;flex:0 0 36px;padding:6px}
body[data-screen=mobile][data-landscape=true] .board-tools :is(#room-toggle,#board-chat-toggle){width:36px;min-width:36px;flex:0 0 36px;padding:6px}
body[data-screen=mobile][data-landscape=true] .board-tools .control-picker>summary{width:36px;min-width:36px;height:36px;min-height:36px;padding:6px}
body[data-screen=mobile][data-landscape=true] .board-tools>.overlay-anchor{padding:0}
body[data-screen=mobile][data-landscape=true] .board-tools svg{width:22px;height:22px}
body[data-screen=mobile][data-landscape=true] .board-tools .drawer-tab>span{display:flex}
body[data-screen=mobile][data-landscape=true] .board-tools :is(.drawer-tab>small,.board-focus-button){display:none!important}

/* SVGs fill a definite grid cell; their intrinsic aspect ratio cannot enlarge a tray. */
body[data-screen=mobile][data-landscape=true]>.playground>#banks.reserve-dock{position:relative;inset:auto;grid-column:1;grid-row:1;align-self:stretch;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;width:auto;height:auto;min-height:0;max-height:none;margin:4px 5px 4px;padding:1px;overflow:hidden;z-index:90;align-items:stretch}
body[data-screen=mobile][data-landscape=true] #banks>.bank-side{display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:minmax(0,1fr);flex:1 1 0;min-height:0;height:auto;box-sizing:border-box;align-items:stretch}
body[data-screen=mobile][data-landscape=true] #banks>.bank-side.empty-reserve{grid-template-columns:minmax(0,1fr);flex:0 0 28px;height:28px;max-height:28px;align-self:stretch}
body[data-screen=mobile][data-landscape=true] #banks .player-card{height:auto;min-height:0;padding:0;justify-content:center}
body[data-screen=mobile][data-landscape=true] #banks .reserve-controller{width:20px;min-width:0;min-height:0;padding:0}
body[data-screen=mobile][data-landscape=true] #banks .reserve-controller:after{width:16px;height:19px}
body[data-screen=mobile][data-landscape=true] #banks>.bank-side.empty-reserve :is(.player-card,.reserve-controller){width:100%;min-width:0;justify-content:flex-start;text-align:left;padding:0 4px}
body[data-screen=mobile][data-landscape=true] #banks .tray{position:relative;min-width:0;min-height:0;height:auto;padding:0;overflow:hidden}
body[data-screen=mobile][data-landscape=true] #banks .tray>svg{position:absolute;inset:0;width:100%;height:100%;max-height:none;overflow:hidden}

/* The shared mobile transport stays beneath the left panel. */
body[data-screen=mobile][data-landscape=true]>.playground>.board-footer{grid-column:1;grid-row:2}

/* Panels replace the reserves and keep their close buttons within reach. */
body[data-screen=mobile][data-landscape=true]>.playground>:is(.panel-rail.drawer-open,#strategy-panel.game-widget:not([hidden]),#history-popover:not([hidden])){position:relative!important;inset:auto!important;grid-column:1;grid-row:1;width:auto!important;height:auto!important;min-height:0!important;max-height:none!important;margin:4px 5px 0!important;padding:0;align-self:stretch;overflow:hidden;z-index:105;border-radius:12px 12px 0 0;border:1px solid var(--line);border-bottom:0;background:var(--panel);box-sizing:border-box}
body[data-screen=mobile][data-landscape=true]>.playground .panel-rail>.drawer-content{display:flex;flex-direction:column;height:100%;min-height:0;overflow:auto;gap:0}
body[data-screen=mobile][data-landscape=true]>.playground .panel-rail .game-widget{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:100%;max-height:none;flex:none;padding:6px!important;overflow:visible;border:0;border-radius:0;box-shadow:none}
body[data-screen=mobile][data-landscape=true]>.playground .panel-rail-left :is(#room-dialog,#board-chat-dialog).game-window[open]{position:relative;inset:auto!important;width:100%!important;height:100%!important;max-height:none;min-height:0;margin:0;flex:1 0 100%;border:0;border-radius:0}
body[data-screen=mobile][data-landscape=true]>.playground #strategy-panel .position-panel{height:auto;min-height:100%;overflow:visible}
body[data-screen=mobile][data-landscape=true]>.playground>#strategy-panel{padding:6px;overflow:auto}
body[data-screen=mobile][data-landscape=true] #strategy-panel .visual-metrics{gap:4px}
body[data-screen=mobile][data-landscape=true] #strategy-panel .visual-metrics>button{height:auto;min-height:86px}
body[data-screen=mobile][data-landscape=true] #history-popover:not([hidden]){display:flex;flex-direction:column;padding:6px!important}
body[data-screen=mobile][data-landscape=true] #history-popover #history-list{height:auto;min-height:0;max-height:none;flex:1;overflow:auto}
body[data-screen=mobile][data-landscape=true] :is(#room-dialog,#board-chat-dialog)>header{min-height:30px;padding:3px 7px}
body[data-screen=mobile][data-landscape=true] :is(#room-dialog,#board-chat-dialog)>header h2{font-size:13px}
body[data-screen=mobile][data-landscape=true] #board-chat-dialog #chat-messages{min-height:0;max-height:none;padding:6px;gap:6px}
body[data-screen=mobile][data-landscape=true] #board-chat-dialog .chat-message{font-size:12px;padding:6px 28px 6px 8px}
body[data-screen=mobile][data-landscape=true] #board-chat-dialog .chat-message.own{padding-right:8px}
body[data-screen=mobile][data-landscape=true] #board-chat-dialog #chat-form{padding:5px;gap:4px}
body[data-screen=mobile][data-landscape=true] #board-chat-dialog #chat-text{min-height:32px;height:32px;padding:5px}
body[data-screen=mobile][data-landscape=true] #board-chat-dialog #chat-send{height:32px;min-height:32px}
body[data-screen=mobile][data-landscape=true] #board-chat-dialog .chat-delivery-status{margin:0;padding:2px 6px;font-size:10px}
body[data-screen=mobile][data-landscape=true] #board-chat-dialog .chat-delivery-status:empty{display:none}
body[data-screen=mobile][data-landscape=true] #board-chat-toast{left:calc(env(safe-area-inset-left,0px) + var(--landscape-rail) + 10px);right:10px;bottom:10px!important;width:auto;max-width:280px;margin-left:auto}
body[data-screen=mobile][data-landscape=true] #mobile-game-result:not([hidden]){position:absolute;left:calc(var(--landscape-rail) + 8px);top:4px;z-index:30;background:var(--panel);border-radius:6px;padding:3px 7px;font-size:12px}

body[data-screen=mobile][data-landscape=true] :is(#strategy-panel,#graph-panel,.analysis-panel) .panel-header{position:sticky;top:0;z-index:5;min-height:38px;height:38px;margin:0 0 6px;padding:0 0 4px;background:var(--panel);gap:3px;overflow:visible}
body[data-screen=mobile][data-landscape=true] :is(#strategy-panel,#graph-panel,.analysis-panel) .panel-header h2{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-screen=mobile][data-landscape=true] :is(#strategy-panel,#graph-panel,.analysis-panel) .panel-header button{width:30px;min-width:30px;height:34px;min-height:34px;flex:0 0 30px;padding:4px}
body[data-screen=mobile][data-landscape=true] :is(#strategy-panel,#graph-panel,.analysis-panel) .panel-header .panel-close{display:grid;place-items:center;color:var(--ink);border:1px solid var(--line);background:var(--bg);border-radius:7px;font-size:23px}

/* A shared edge makes the open panel an extension of the move toolbar. */
body[data-screen=mobile][data-landscape=true]:is(.drawer-left-open,.social-panel-open,[data-history-open=true])>.playground>.board-footer,
body[data-screen=mobile][data-landscape=true].normal-online:is([data-strategy-open],#strategy-panel:not([hidden]))>.playground>.board-footer{border-radius:0 0 12px 12px;margin-top:0}

/* A larger thumb target sits comfortably inside the safe playing area. */
body[data-screen=mobile][data-landscape=true] .board-section>.camera-launcher{width:68px;height:68px;right:24px;bottom:24px}
body[data-screen=mobile][data-landscape=true] .camera-launcher .camera-pad,
body[data-screen=mobile][data-landscape=true] .camera-launcher #camera-joystick{width:68px;height:68px;min-height:68px}
body[data-screen=mobile][data-landscape=true] #experiment-bar{max-width:calc(100% - 116px)}

/* The staggered reserve rows get their own area beside the player hexagons. */
body[data-screen=mobile][data-landscape=true] #banks>.bank-side:not(.empty-reserve){grid-template-columns:44px minmax(0,1fr)}
body.compact-controls[data-screen=mobile][data-landscape=true] #banks>.bank-side:has(#black-reserve):not(.empty-reserve){min-height:92px}
body[data-screen=mobile][data-landscape=true] #banks .bank-side:not(.empty-reserve) .reserve-controller{width:44px;min-width:0;min-height:44px;font-size:0}
body[data-screen=mobile][data-landscape=true] #banks .bank-side:not(.empty-reserve) .reserve-controller:after{width:24px;height:26px}
body[data-screen=mobile][data-landscape=true] #banks .bank-side:not(.empty-reserve) .reserve-controller[data-player-avatar=true]:after{width:32px;height:36px}