/* Three desktop interface sizes. Canvas scenery keeps its original size. */
:root{--desktop-ui-scale:.5;--colony-ui-side:140px;--colony-ui-head:70px;--colony-ui-extra:162px}
:root[data-ui-size=medium]{--desktop-ui-scale:.75;--colony-ui-side:210px;--colony-ui-head:102px;--colony-ui-extra:232px}
:root[data-ui-size=large]{--desktop-ui-scale:1;--colony-ui-side:280px;--colony-ui-head:134px;--colony-ui-extra:302px}
#graphicsDialog .ui-size-settings{padding:12px;margin-bottom:16px;border:1px solid #477c82;border-radius:10px;background:#102f3a}
.ui-size-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:9px}
.ui-size-heading small,.ui-size-mobile-note{color:#a9c6d0;font-size:11px}
.ui-size-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
#graphicsDialog .ui-size-choices button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:0;min-height:72px;padding:8px 4px;overflow-wrap:anywhere;line-height:1.3}
.ui-size-choices b{font-size:14px}.ui-size-choices span{font-size:12px;color:#a6e5d9}.ui-size-choices small{font-size:10px;min-height:13px}
.ui-size-mobile-note{display:block;margin-top:7px}.ui-size-status{display:block;font-size:11px;color:#9cf4d3}.ui-size-status:not(:empty){margin-top:6px}
@media(min-width:1201px) and (pointer:fine){
 .hud,.desktop-player-actions,#game>.righttools,#game>#networkStatus,#game>#performanceStatus,
 .minimap,#questVisibilityControls,#questTracker,#rebirthSkillDock,#worldBossStatus,
 .bottomhud,.townbar,#socialDock,#messages,.nearby-loot,#targetPanel,#healingTarget,#game>.hint,
 dialog:not(#colonyDialog[data-colony-tab=base]),body>#gameTooltip{zoom:var(--desktop-ui-scale)}
 /* Keep long translated labels inside the menu cards. */
 .hud .topnav>button{overflow:hidden;overflow-wrap:anywhere;line-height:1.15;padding:3px 2px;height:clamp(72px,4.5vw,86px)}
 .hud .topnav>button .interface-icon,.hud .topnav>#soundBtn::before{margin-bottom:3px}
 /* Account uses details/summary, but occupies the same card as adjacent buttons. */
 .hud .topnav>#accountMenu{width:clamp(48px,3.8vw,76px);max-width:65px;min-width:0;align-self:stretch}
 .hud .topnav>#accountMenu>summary{width:100%;min-width:0;min-height:0;height:clamp(72px,4.5vw,86px);padding:3px 2px;font-size:clamp(9px,.73vw,13px);line-height:1.15;overflow:hidden;overflow-wrap:anywhere;text-align:center}
 #game:has(.rebirth-tray:not([hidden])) #worldBossStatus{left:calc(50% + 180px);right:auto;bottom:128px;transform:none;max-width:170px}
 body #game>#performanceStatus{top:auto!important;bottom:var(--auto-telemetry-bottom,90px)!important;right:var(--auto-telemetry-right,12px)!important;margin:0!important;pointer-events:none}
 /* Base controls shrink; the requested large city remains the main view. */
 #colonyDialog[data-colony-tab=base]{width:min(1560px,98vw,calc((98dvh - var(--colony-ui-head))*1.2676 + var(--colony-ui-extra)));zoom:1}
 #colonyDialog[data-colony-tab=base] .colony-topbar,
 #colonyDialog[data-colony-tab=base] .colony-notice,
 #colonyDialog[data-colony-tab=base] .colony-toolbar,
 #colonyDialog[data-colony-tab=base] .colony-map-caption,
 #colonyDialog[data-colony-tab=base] .colony-side,
 #colonyDialog[data-colony-tab=base] .colony-shell>footer,
 #colonyDialog[data-colony-tab=base]>#gameTooltip{zoom:var(--desktop-ui-scale)}
 #colonyDialog[data-colony-tab=base] .colony-layout{grid-template-columns:minmax(0,1fr) var(--colony-ui-side);gap:4px}
 #colonyDialog[data-colony-tab=base] .colony-content{padding:3px 4px}
}