.top-bar,
.sidebar,
.map-overlay,
#ui-overlay-root {
  max-width: 100vw;
}

html,
body {
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}

.sidebar {
  max-height: 100vh;
}

.sidebar-inner {
  max-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: max(calc(12px * var(--ui-scale)), env(safe-area-inset-bottom));
}

.sidebar-inner::-webkit-scrollbar {
  display: none;
}

.sub-sidebar {
  width: min(
    calc(220px * var(--ui-scale)),
    calc(100vw - var(--sidebar-width) - calc(8px * var(--ui-scale)))
  );
  top: calc(var(--top-bar-height) + calc(8px * var(--ui-scale)));
  max-height: calc(100vh - var(--top-bar-height) - calc(16px * var(--ui-scale)));
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.sub-sidebar::-webkit-scrollbar {
  display: none;
}

.map-overlay .window-panel {
  max-width: calc(100vw - (var(--window-viewport-gutter) * 2));
  max-height: calc(
    100vh - var(--top-bar-height) - var(--window-spawn-top-margin) -
      var(--window-viewport-gutter)
  );
}

.overview-bar {
  left: auto;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  max-width: min(var(--overview-width), calc(100vw - 8px));
  max-height: calc(
    100vh - var(--top-bar-height) - calc(12px * var(--ui-scale))
  );
}

.quick-actions-bar {
  max-width: calc(100vw - 12px);
}

.top-notifications {
  position: fixed;
  left: auto;
  top: calc(var(--top-bar-height));
  right: 0;
  margin-left: 0;
  max-width: calc(100vw - 8px);
  max-height: calc(100vh - var(--top-bar-height) - calc(8px * var(--ui-scale)));
  overflow-y: auto;
  overflow-x: hidden;
}

.top-notifications-list {
  max-height: inherit;
  overflow-y: auto;
  overflow-x: hidden;
}

.top-inner,
.top-left,
.top-right {
  min-width: 0;
}

.top-right {
  max-width: min(62vw, calc(980px * var(--ui-scale)));
}

.stat-list {
  max-width: 100%;
}

.window-menu,
.window-hub-menu,
.theme-menu,
.stat-pop,
.codex-meta-panel,
.settings-search-results,
.province-search-filter-menu,
.empire-role-menu {
  max-width: min(calc(360px * var(--ui-scale)), calc(100vw - 10px));
  max-height: calc(100vh - calc(12px * var(--ui-scale)));
  overflow-y: auto;
  overflow-x: hidden;
}

.loading-card {
  max-width: calc(100vw - calc(24px * var(--ui-scale)));
  max-height: calc(100vh - calc(24px * var(--ui-scale)));
  overflow: auto;
}

@media (min-width: 3440px) and (min-height: 1400px) {
  :root {
    --ui-scale: 1.18;
    --ui-scale-inverse: 0.85;
  }
}

@media (min-width: 2560px) and (min-height: 1400px) and (max-width: 3439px) {
  :root {
    --ui-scale: 1.1;
    --ui-scale-inverse: 0.91;
  }
}

@media (min-width: 1920px) and (min-height: 1080px) and (max-width: 2559px) {
  :root {
    --ui-scale: 1.04;
    --ui-scale-inverse: 0.96;
  }
}

@media (max-width: 1680px) and (max-height: 1050px) {
  :root {
    --ui-scale: 0.98;
    --ui-scale-inverse: 1.02;
  }
}

@media (max-width: 1600px) and (max-height: 900px) {
  :root {
    --ui-scale: 0.95;
    --ui-scale-inverse: 1.05;
    --overview-offset-top-base: 164px;
  }
}

@media (max-width: 1536px) and (max-height: 864px) {
  :root {
    --ui-scale: 0.93;
    --ui-scale-inverse: 1.08;
    --overview-offset-top-base: 156px;
  }

  .top-right {
    padding-right: calc(172px * var(--ui-scale));
  }

  .top-right .nation-block {
    align-items: flex-end;
    text-align: right;
  }

  .top-right .nation-name-row {
    justify-content: flex-end;
  }
}

@media (max-width: 1440px) and (max-height: 900px) {
  :root {
    --ui-scale: 0.91;
    --ui-scale-inverse: 1.10;
    --sidebar-width-base: 228px;
    --overview-offset-top-base: 148px;
  }

  .top-right {
    padding-right: calc(176px * var(--ui-scale));
  }
}

@media (max-width: 1366px) and (max-height: 768px) {
  :root {
    --ui-scale: 0.88;
    --ui-scale-inverse: 1.14;
    --sidebar-width-base: 220px;
    --overview-offset-top-base: 130px;
  }

  .top-right {
    padding-right: calc(170px * var(--ui-scale));
    max-width: min(58vw, calc(860px * var(--ui-scale)));
  }
}

@media (max-width: 1280px) and (max-height: 800px) {
  :root {
    --ui-scale: 0.86;
    --ui-scale-inverse: 1.16;
    --sidebar-width-base: 214px;
    --top-bar-height-base: 82px;
    --overview-offset-top-base: 122px;
  }

  .top-right {
    padding-right: calc(166px * var(--ui-scale));
    max-width: min(55vw, calc(760px * var(--ui-scale)));
  }
}

@media (max-width: 1280px) and (max-height: 720px) {
  :root {
    --ui-scale: 0.83;
    --ui-scale-inverse: 1.20;
    --sidebar-width-base: 206px;
    --top-bar-height-base: 78px;
    --overview-offset-top-base: 112px;
  }

  .top-right {
    padding-right: calc(170px * var(--ui-scale));
    max-width: min(52vw, calc(690px * var(--ui-scale)));
  }
}

@media (max-width: 1170px) and (max-height: 700px) {
  :root {
    --ui-scale: 0.8;
    --ui-scale-inverse: 1.25;
    --sidebar-width-base: 198px;
    --top-bar-height-base: 76px;
    --overview-offset-top-base: 104px;
  }

  .top-right {
    padding-right: calc(184px * var(--ui-scale));
    max-width: min(50vw, calc(620px * var(--ui-scale)));
  }
}

@media (max-width: 1024px) and (max-height: 768px) {
  :root {
    --ui-scale: 0.78;
    --ui-scale-inverse: 1.28;
    --sidebar-width-base: 192px;
    --top-bar-height-base: 74px;
    --overview-offset-top-base: 96px;
  }

  .top-right {
    padding-right: calc(186px * var(--ui-scale));
    max-width: min(48vw, calc(560px * var(--ui-scale)));
  }
}

@media (max-width: 1366px) {
  .quick-actions-title {
    display: none;
  }

  .sidebar-inner {
    gap: calc(12px * var(--ui-scale));
    padding-top: calc(84px * var(--ui-scale));
    padding-left: calc(10px * var(--ui-scale));
    padding-right: calc(10px * var(--ui-scale));
  }

  .sidebar-bottom,
  .nav,
  .theme-dock {
    gap: calc(8px * var(--ui-scale));
  }

  .nav-item,
  .sidebar-lock,
  .theme-trigger {
    min-height: calc(36px * var(--ui-scale));
    height: calc(36px * var(--ui-scale));
    font-size: calc(11px * var(--ui-scale));
    padding: calc(7px * var(--ui-scale)) calc(10px * var(--ui-scale));
    border-radius: calc(12px * var(--ui-scale));
  }

  .nav-item {
    gap: calc(9px * var(--ui-scale));
    padding-left: calc(12px * var(--ui-scale));
  }

  .nav-item-wrap .nav-item {
    padding-right: calc(32px * var(--ui-scale));
  }

  .nav-item img,
  .sidebar-lock img,
  .theme-orb {
    width: calc(17px * var(--ui-scale));
    height: calc(17px * var(--ui-scale));
  }

  .nav-submenu-toggle {
    width: calc(20px * var(--ui-scale));
    height: calc(20px * var(--ui-scale));
    right: calc(8px * var(--ui-scale));
  }

  .nav-submenu-toggle img {
    width: calc(12px * var(--ui-scale));
    height: calc(12px * var(--ui-scale));
  }
}

@media (max-width: 1170px) {
  .sidebar-inner {
    gap: calc(10px * var(--ui-scale));
    padding-top: calc(78px * var(--ui-scale));
  }

  .nav-item,
  .sidebar-lock,
  .theme-trigger {
    min-height: calc(34px * var(--ui-scale));
    height: calc(34px * var(--ui-scale));
    font-size: calc(10.5px * var(--ui-scale));
  }

  .nav-item img,
  .sidebar-lock img,
  .theme-orb {
    width: calc(16px * var(--ui-scale));
    height: calc(16px * var(--ui-scale));
  }
}

@media (max-width: 900px) {
  :root {
    --sidebar-width-base: 220px;
  }

  .quick-actions-bar {
    right: 0;
    bottom: 0;
    gap: calc(6px * var(--ui-scale));
    padding-left: calc(6px * var(--ui-scale));
    padding-right: calc(6px * var(--ui-scale));
  }

  .top-bar {
    height: auto;
    padding-bottom: calc(8px * var(--ui-scale));
  }

  .top-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: calc(12px * var(--ui-scale)) calc(18px * var(--ui-scale))
      calc(14px * var(--ui-scale));
  }

  .top-right {
    width: 100%;
    flex-direction: column;
    align-items: flex-end;
  }

  .top-right .nation-block {
    align-items: flex-end;
    text-align: right;
  }

  .top-right .nation-name-row {
    justify-content: flex-end;
  }

  .stat-list {
    justify-content: flex-start;
  }

  .sidebar-inner {
    padding-top: calc(120px * var(--ui-scale));
  }
}

@media (max-width: 768px) {
  :root {
    --ui-scale: 0.76;
    --ui-scale-inverse: 1.32;
    --sidebar-width-base: 196px;
    --top-bar-height-base: 76px;
  }
}