/* Portrait remains the existing document layout. */
.settlement-layout-controls { display:contents; }
@media (min-width:640px) and (orientation:landscape) {
 #app.landscape-ui { --landscape-rail:calc(clamp(104px,11vw,148px) + env(safe-area-inset-right,0px)); --nav-height:0px; }
 #app.landscape-ui > .header, #app.landscape-ui > .screens { margin-right:var(--landscape-rail); }
 #app.landscape-ui .screen { padding-bottom:max(16px,var(--safe-bottom)); }
 #app.landscape-ui #bottomDock {
  inset:0 0 0 auto; width:var(--landscape-rail); height:100%;
  display:flex; flex-direction:column; gap:10px; padding:max(8px,var(--safe-top)) max(6px,env(safe-area-inset-right)) max(8px,var(--safe-bottom)) 6px;
  overflow-y:auto; overscroll-behavior:contain; scroll-padding-block:8px; border:0; box-shadow:none; scrollbar-width:thin;
  justify-content:center;
 }
 #app.landscape-ui #bottomNav, #app.landscape-ui #bottomDockAnchor {
  position:static; transform:none; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:14px;
  height:auto; min-height:0; padding:0; background:none; border:0; border-radius:0; box-shadow:none; flex:none;
 }
 #app.landscape-ui #bottomDockAnchor { order:-1; border-bottom:1px solid var(--panel-edge); padding-bottom:10px; }
 #app.landscape-ui #bottomNav :is(.dock-row,.dock-pair) { display:contents; }
 /* The floating dock (v526) stands as one clear column: Earth, big Home, Birds. */
 #app.landscape-ui #bottomNav .dock-row-slim > .nav-item { grid-column:auto; justify-self:center; }
 #app.landscape-ui #bottomDock .nav-item { width:auto; min-width:64px; min-height:0; padding:0; gap:2px; scroll-margin-block:6px; }
 #app.landscape-ui #bottomDock .nav-icon, #app.landscape-ui #bottomDock .nav-icon img { width:40px; height:40px; }
 #app.landscape-ui #bottomDock .nav-home .nav-icon, #app.landscape-ui #bottomDock .nav-home .nav-icon img { width:60px; height:60px; }
 #app.landscape-ui #bottomDock .nav-label { font-size:10px; line-height:1.15; }
 #app.landscape-ui #bottomDock .nav-item:focus-visible { outline-offset:-2px; }
 #app.landscape-ui :is(#screen-village,#screen-town).landscape-settlement {
  display:grid; grid-template-columns:50vw minmax(0,1fr); grid-template-rows:minmax(0,1fr);
  width:100%; max-width:none; margin:0; padding:0; overflow:hidden;
 }
 #app.landscape-ui .landscape-settlement > .settlement-stage {
  grid-column:1; grid-row:1; position:relative; top:auto; margin:0; width:100%; height:100%; min-height:0;
  border:0; border-right:1px solid var(--panel-edge); border-radius:0; box-shadow:none;
 }
 #app.landscape-ui .landscape-settlement > .settlement-layout-controls {
  display:block; grid-column:2; grid-row:1; min-width:0; min-height:0; padding:12px;
  overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable; touch-action:pan-y;
 }
 #app.landscape-ui .landscape-settlement .empire-village-hub { display:block; margin:10px 0; padding:10px; }
 #app.landscape-ui .landscape-settlement :is(#empirePanel,#townHallPanel,#townSub) { margin-inline:0; }
 #app.landscape-ui .landscape-settlement .screen-title { font-size:17px; }
 #app.landscape-ui .landscape-settlement .empire-title-row { flex-wrap:wrap; gap:5px; }
 #app.landscape-ui .landscape-settlement #empirePagesNav .empire-page-tab { flex-direction:column; min-width:0; padding:6px 2px; font-size:10px; }
 #app.landscape-ui .landscape-settlement #empirePagesNav .ept-icon { width:28px; height:26px; }
 #app.landscape-ui .landscape-settlement :is(.province-build-btn,.town-sheet-close,.town-sheet-back,.province-tile) { min-height:44px; }
 #app.landscape-ui .landscape-settlement .settlement-camera-btn { min-width:44px; min-height:44px; }
 /* The transformed screen is this fixed sheet's containing block; its width
    already excludes the rail. Do not subtract that rail a second time. */
 #app.landscape-ui #townSheet { left:calc(50vw + 8px); right:8px; bottom:8px; max-height:calc(100% - 16px); }
 #app.landscape-ui #townSheet .town-sheet-close { min-width:44px; }
}
@media (min-width:640px) and (max-width:1000px) and (orientation:landscape) {
 #app.landscape-ui .landscape-settlement .town-hero { padding:10px; }
 #app.landscape-ui .landscape-settlement .town-hero-top { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
 #app.landscape-ui .landscape-settlement .town-crest { grid-column:1; grid-row:1; width:44px; height:44px; font-size:26px; }
 #app.landscape-ui .landscape-settlement .town-rename { grid-column:2; grid-row:1; min-width:44px; min-height:44px; }
 #app.landscape-ui .landscape-settlement .town-hero-main { grid-column:1/-1; grid-row:2; }
 #app.landscape-ui .landscape-settlement .town-name { font-size:18px; white-space:normal; overflow-wrap:anywhere; }
}
@media (min-width:640px) and (max-height:500px) and (orientation:landscape) {
 #app.landscape-ui #bottomDock { gap:6px; padding-block:max(6px,var(--safe-top)) max(6px,var(--safe-bottom)); }
 #app.landscape-ui :is(#bottomNav,#bottomDockAnchor) { gap:8px; }
 #app.landscape-ui #bottomDockAnchor { padding-bottom:6px; }
 #app.landscape-ui #bottomDock .nav-item { gap:1px; }
 #app.landscape-ui #bottomDock .nav-icon, #app.landscape-ui #bottomDock .nav-icon img { width:36px; height:36px; }
 #app.landscape-ui #bottomDock .nav-home .nav-icon, #app.landscape-ui #bottomDock .nav-home .nav-icon img { width:52px; height:52px; }
}