/* Mobile HUD and sheets share the same safe-area origin, including Android WebView. */
.national-world {
  --ov-hud-top: max(12px, env(safe-area-inset-top, 0px));
  --ov-row-top: calc(var(--ov-hud-top) + 58px);
  --ov-sheet-top: var(--ov-row-top);
  --ov-sheet-bottom: max(14px, env(safe-area-inset-bottom, 0px));
  --ov-sheet-left: max(12px, env(safe-area-inset-left, 0px));
  --ov-sheet-right: max(12px, env(safe-area-inset-right, 0px));
}
.national-world:has(.oe-test-banner) {
  --ov-row-top: calc(var(--ov-hud-top) + 80px);
}
.national-world .quiet-hud { top: var(--ov-hud-top); }
:is(.national-world, .national-world:has(.oe-test-banner)) :is(.oe-launcher, .oe-navigation) { top: var(--ov-row-top); }
.national-world .oe-test-banner { top: calc(var(--ov-hud-top) + 50px); }
.national-world .oe-starter { top: calc(var(--ov-row-top) + 48px); }
:is(.national-world, .national-world:has(.oe-test-banner)) .oe-driving { top: calc(var(--ov-row-top) + 54px); }

/* Cancel the old translated, centred discovery card before applying bounded sheets. */
.national-world.calm-world .map-sheet {
  inset: var(--ov-sheet-top) var(--ov-sheet-right) var(--ov-sheet-bottom) var(--ov-sheet-left);
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: calc(100% - var(--ov-sheet-top) - var(--ov-sheet-bottom));
  margin: 0;
  padding: 18px;
  box-sizing: border-box;
  transform: none;
  translate: none;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scroll-padding-block: 18px;
  -webkit-overflow-scrolling: touch;
}
.national-world.calm-world .compact-discovery {
  bottom: auto;
  max-width: 420px;
  margin-inline: auto;
  padding: 23px 20px 18px;
}
.national-world.calm-world .compact-discovery > h2 { padding-inline: 24px; }
.national-world.calm-world .map-sheet > * { min-width: 0; }
.national-world.calm-world .map-sheet :is(p, h2, strong) { overflow-wrap: anywhere; }
.national-world.calm-world .compact-discovery .discovery-art { flex-shrink: 0; }

/* The menu and route HUD yield their space while an item, bag or mission is open. */
.national-world:has(.map-sheet, .social-drawer, .oe-dialog[open], .og-dialog[open])
  :is(.oe-launcher, .oe-navigation, .oe-starter, .oe-driving, .oe-test-banner) { display: none; }

/* Story, route and settings dialogs keep all their content inside the usable viewport. */
dialog:is(.oe-dialog, .og-dialog, .account-dialog, .game-help, .settings-dialog, .overlap-language-dialog)[open] {
  box-sizing: border-box;
  top: max(12px, env(safe-area-inset-top, 0px));
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  max-height: calc(100dvh - max(12px, env(safe-area-inset-top, 0px)) - max(12px, env(safe-area-inset-bottom, 0px)));
  overflow-y: auto;
  overscroll-behavior-y: contain;
}
dialog:is(.oe-dialog, .og-dialog)[open] > article {
  max-height: none;
  overflow-y: visible;
}

@media (min-width: 700px) {
  .national-world.calm-world .map-sheet:not(.compact-discovery) {
    left: auto;
    width: min(440px, calc(100% - var(--ov-sheet-left) - var(--ov-sheet-right)));
  }
}
@media (max-height: 500px) {
  .national-world.calm-world .compact-discovery { padding: 16px; }
  .national-world.calm-world .compact-discovery .discovery-art {
    height: 68px;
    margin: 0 auto 8px;
  }
  .national-world.calm-world .compact-discovery > h2 { margin-block: 8px; font-size: 21px; }
}