/* Native chrome and device cutouts protect UI only. The scene fills the viewport. */
html,
body {
  background: #0b0f14;
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
#game {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  max-width: none;
}
#game.mobile {
  --safe-left: max(12px, env(safe-area-inset-left, 0px), var(--platform-inset-left, 0px));
  --safe-right: max(12px, env(safe-area-inset-right, 0px), var(--platform-inset-right, 0px));
  --safe-top: max(8px, env(safe-area-inset-top, 0px), var(--platform-inset-top, 0px));
  --safe-bottom: max(10px, env(safe-area-inset-bottom, 0px), var(--platform-inset-bottom, 0px));
}
/* VK's game capsule has no DOM rect/inset of its own. Reserve its left rail
   in landscape and its top strip in portrait, in addition to the cutout. */
@media (orientation: landscape) {
  html[data-platform-chrome="native"] #game.mobile {
    --safe-left: calc(max(env(safe-area-inset-left, 0px), var(--platform-inset-left, 0px)) + 56px);
  }
}
@media (orientation: portrait) {
  html[data-platform-chrome="native"] #game.mobile {
    --safe-top: calc(max(env(safe-area-inset-top, 0px), var(--platform-inset-top, 0px)) + 56px);
  }
}
#game.mobile #dialog {
  left: var(--viewport-left, 0px) !important;
  top: var(--viewport-top, 0px) !important;
  width: var(--viewport-width, 100vw) !important;
  height: var(--viewport-height, 100dvh) !important;
  max-width: none !important;
  max-height: none !important;
  padding: var(--safe-top) var(--safe-right) var(--safe-bottom) var(--safe-left) !important;
}
#game.mobile #dialog .menu-header {
  margin: 0 0 8px !important;
  gap: 8px;
}
#game.mobile #dialog h2 {
  font-size: 28px !important;
  margin: 0 !important;
  line-height: 1.15 !important;
}
#game.mobile #dialog .menu-intro {
  overflow: hidden;
}
#game.mobile #dialog #menu-scroll {
  max-height: none !important;
  padding: 0 !important;
  flex: 1 1 0;
}
#game.mobile #dialog .menu-preferences {
  margin: 0 0 12px;
}
#game.mobile #dialog .home-layout {
  gap: 16px !important;
}
#game.mobile #dialog .home-links .menu-button {
  min-height: 44px !important;
  padding: 8px 0 !important;
  line-height: 1.25;
}
#game.mobile #dialog .primary {
  min-height: 44px;
  padding: 8px 14px !important;
  line-height: 1.3;
}
#game.mobile #dialog .secondary {
  min-height: 44px;
  margin: 0;
  padding: 8px;
}
#game.mobile #dialog .platform-player {
  margin: 0 0 12px;
  overflow-wrap: anywhere;
}
#game.mobile #dialog .settings-grid {
  display: grid;
  gap: 8px 24px;
}
#game.mobile #dialog [data-menu-view="settings"] {
  max-width: none;
}
#game.mobile #dialog [data-menu-view="settings"] .setting-toggle {
  margin: 0 !important;
  min-height: 44px;
  padding: 0 !important;
  gap: 12px;
}
#game.mobile #dialog .setting-toggle b {
  font-size: 14px;
}
#game.mobile #dialog .setting-toggle small {
  font-size: 11px;
  line-height: 1.3;
}
#game.mobile #dialog .setting-range {
  font-size: 12px;
  margin: 4px 0 0 !important;
}
#game.mobile #dialog .volume-slider {
  display: block;
  width: 100%;
  height: 32px;
  margin: 0;
}
#game.mobile #dialog .settings-notes {
  margin-top: 8px;
}
#game.mobile #dialog .settings-notes p {
  font-size: 10px !important;
  line-height: 1.35;
  margin: 4px 0;
}
#game.mobile .mobile-hud,
#game.mobile .contract-hud {
  width: min(
    330px,
    calc(var(--viewport-width, 100vw) - var(--safe-left) - var(--safe-right) - 156px)
  ) !important;
}
#game.mobile .mobile-hud {
  gap: 12px !important;
}
#game.mobile .contract-hud > div:first-child {
  gap: 10px;
  align-items: baseline;
}
#game.mobile #contract-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
#game.mobile #contract-timer {
  flex-shrink: 0;
}
@media (orientation: landscape) {
  #game.mobile #dialog .menu-header {
    min-height: 44px !important;
    padding-right: 162px !important;
  }
  #game.mobile #dialog .menu-intro h2 {
    font-size: clamp(20px, 3.4vw, 28px) !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  #game.mobile #dialog .menu-preferences {
    position: absolute;
    top: var(--safe-top);
    right: var(--safe-right);
    gap: 8px;
    margin: 0;
  }
  #game.mobile #dialog .menu-preferences button {
    padding: 0 6px;
  }
  #game.mobile #master-mute-label {
    display: none;
  }
  #game.mobile #dialog .home-layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  }
  #game.mobile #dialog .home-links {
    margin-top: 4px;
  }
  #game.mobile #dialog .home-story .menu-footnote {
    margin-top: 8px !important;
  }
  #game.mobile #dialog .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
  }
  #game.mobile #dialog .settings-notes {
    max-width: 760px;
  }
}
@media (max-width: 620px) and (orientation: landscape) {
  #game.mobile .mobile-hud {
    gap: 8px !important;
  }
  #game.mobile .mobile-hud > div {
    grid-template-columns: 1fr;
    gap: 3px !important;
  }
  #game.mobile .mobile-hud span {
    font-size: 8px;
    letter-spacing: 0.04em;
  }
  #game.mobile .mobile-hud b {
    font-size: 14px !important;
  }
  #game.mobile .contract-hud {
    top: calc(var(--safe-top) + 60px) !important;
  }
  #game.mobile .contract-hud > div:first-child {
    font-size: 9px;
    letter-spacing: 0.06em;
  }
  #game.mobile .contract-hud b {
    font-size: 12px;
  }
  #game.mobile #dialog .home-layout {
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
    gap: 12px !important;
  }
  #game.mobile #dialog .home-story .menu-tag {
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
  }
  #game.mobile #dialog #menu-subtitle {
    font-size: 12px !important;
  }
  #game.mobile #dialog .settings-grid {
    column-gap: 16px;
  }
}

#game:not(.reduced-effects) .adaptive-effects-note {
  display: none;
}
#game .adaptive-effects-note {
  color: var(--ice);
}

#game .graphics-selects select {
  min-height: 44px;
  min-width: 0;
  width: 100%;
  padding: 6px 4px;
  background: #17232d;
  color: var(--ink);
  border: 1px solid var(--line);
  font: inherit;
}
#game .snowfall-setting:has(input:not(:checked)) .adaptive-effects-note {
  display: none;
}

#game .audio-credits summary {
  cursor: pointer;
  padding: 6px 0;
  font-size: 11px;
  color: var(--dim);
}
@media (orientation: landscape) {
  #game.mobile #dialog [data-menu-view="settings"]:not([hidden]) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 24px;
  }
  #game.mobile #dialog .settings-grid {
    display: contents;
  }
  #game.mobile #dialog .settings-notes {
    margin: 0;
    min-width: 0;
  }
}

#game .graphics-setting {
  gap: 8px;
}
#game .graphics-selects {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 76px;
  gap: 6px;
  min-width: 0;
  flex: 1;
  max-width: 280px;
}

/* One viewport rectangle for the scene, top-layer dialogs and banner clearance. */
html[data-phase],
html[data-phase] body {
  margin: 0;
  overflow: hidden;
  min-width: 0;
}
#game #world {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
#game #menu-background {
  position: absolute;
  inset: 0;
}
#game #dialog {
  left: var(--viewport-left, 0px) !important;
  top: var(--viewport-top, 0px) !important;
  width: var(--viewport-width, 100vw) !important;
  height: var(--viewport-height, 100dvh) !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important;
}
#game:not(.mobile) #dialog.modal-view #menu-window {
  left: calc(var(--viewport-left, 0px) + var(--viewport-width, 100vw) / 2);
  top: calc(var(--viewport-top, 0px) + var(--viewport-height, 100dvh) / 2);
  width: min(800px, calc(var(--viewport-width, 100vw) - 48px));
  max-height: min(640px, calc(var(--viewport-height, 100dvh) - 32px));
}
#game #orientation-gate {
  top: calc(var(--viewport-top, 0px) + var(--viewport-height, 100dvh) / 2);
  left: calc(var(--viewport-left, 0px) + var(--viewport-width, 100vw) / 2);
  right: auto;
  bottom: auto;
  margin: 0;
  transform: translate(-50%, -50%);
  max-height: calc(var(--viewport-height, 100dvh) - 24px);
}
#game #menu-scroll,
#game .window-body,
#game .garage-content,
#game .contract-cards,
#game #loading-error,
#game #orientation-gate,
.platform-auth {
  scrollbar-gutter: stable;
}
@supports not (scrollbar-gutter: stable) {
  #game #menu-scroll,
  #game .window-body,
  #game .garage-content,
  #game #loading-error,
  #game #orientation-gate,
  .platform-auth {
    overflow-y: scroll;
  }
}

/* A single action row: career totals, camera, pause. */
#game header {
  pointer-events: none;
}
#game header button {
  pointer-events: auto;
}
#game .top-actions {
  display: flex !important;
  align-items: center;
  gap: 8px;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  max-width: 100%;
}
#game .top-actions .career-hud {
  position: static !important;
  inset: auto !important;
  transform: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 44px !important;
  white-space: nowrap;
  min-width: 0;
  gap: 6px !important;
}
#game .top-actions .career-caption,
#game .top-actions #help {
  display: none !important;
}
#game .top-actions .career-hud > b {
  max-width: 8ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
#game .top-actions .icon-btn {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  min-height: 44px;
}
#game:not(.mobile) header {
  top: 24px !important;
  left: 24px !important;
  right: 24px !important;
}
#game:not(.mobile) .mission {
  max-width: calc(var(--viewport-width, 100vw) - var(--actions-width, 260px) - 84px);
}
#game.mobile header {
  top: var(--safe-top) !important;
  left: var(--safe-left) !important;
  right: var(--safe-right) !important;
  height: 44px !important;
}
#game.mobile .mobile-hud,
#game.mobile .contract-hud {
  width: min(
    330px,
    calc(
      var(--viewport-width) - var(--safe-left) - var(--safe-right) - var(--actions-width, 260px) -
        12px
    )
  ) !important;
}
#game.mobile.narrow-viewport .mobile-hud {
  gap: 5px !important;
}
#game.mobile.narrow-viewport .career-rank {
  font-size: 0 !important;
  padding-right: 4px;
}
#game.mobile.narrow-viewport .career-rank b {
  font-size: 12px;
}
#game.mobile.narrow-viewport .career-hud {
  font-size: 11px;
  gap: 4px !important;
}
#game.mobile.narrow-viewport .mobile-hud > div {
  grid-template-columns: 1fr;
}
#game.mobile.narrow-viewport .mobile-hud span {
  font-size: 8px;
  letter-spacing: 0;
}
#game.mobile.narrow-viewport .mobile-hud b {
  font-size: 13px !important;
}

/* Garage totals belong to its active title bar, never the scrolling body. */
#game #garage-summary[hidden] {
  display: none !important;
}
#game #dialog #garage-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0;
  flex: 0 1 330px;
  min-width: 0;
}
#game #dialog #garage-summary .career-summary {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  padding: 0 !important;
  white-space: nowrap;
  font-size: 11px;
}
#game #dialog #garage-summary .career-summary b {
  font-size: 16px;
}
#game #dialog #garage-summary .garage-currency {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
#game #dialog #garage-summary .garage-currency small {
  display: none;
}
#game #dialog #garage-summary .tiny-icon {
  color: var(--ice);
}
#game #dialog #garage-summary .garage-xp {
  display: block !important;
  flex: 1;
  width: auto;
  max-width: none;
  min-width: 54px;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
}
#game #dialog #career-next {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}
#game #dialog #garage-summary .track {
  height: 2px;
  margin: 4px 0 0;
}
#game #dialog #garage-summary .rank-medal {
  padding-right: 6px;
}
#game #dialog[data-view="career"] .menu-intro {
  flex: 1 1 160px;
}
#game:not(.mobile) #dialog.modal-view #menu-window .window-bar {
  height: auto;
  min-height: 44px;
  gap: 16px;
  padding: 4px 8px 4px 16px;
}
#game #menu-window .window-close {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}
#game:not(.mobile) #dialog.modal-view #menu-window-title {
  min-width: 0;
}
#game:not(.mobile) #dialog.modal-view #garage-summary {
  margin-left: auto !important;
}
#game.mobile #dialog #garage-summary {
  flex-basis: 210px;
  gap: 8px;
}
#game.mobile #dialog #garage-summary .career-summary {
  font-size: 9px;
  gap: 6px;
}
#game.mobile #dialog #garage-summary .career-summary b {
  font-size: 14px;
}
#game.mobile #dialog #garage-summary .garage-xp {
  font-size: 9px;
}
#game.mobile.narrow-viewport #dialog[data-view="career"] .menu-header {
  flex-wrap: wrap;
}
#game.mobile.narrow-viewport #dialog #garage-summary {
  order: 5;
  flex: 1 0 100%;
  min-height: 26px;
}
#game.mobile #dialog[data-view="career"] #menu-scroll,
#game:not(.mobile) #dialog[data-view="career"] #menu-window .window-body {
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
  scrollbar-gutter: auto;
}
#game #dialog .garage-layout {
  min-height: 0;
  flex: 1;
}
#game #dialog .garage-content {
  min-height: 0;
  overflow: auto;
}
#game #dialog .garage-tabs {
  flex-shrink: 0;
  margin-top: 0 !important;
}
#game #dialog .garage-tabs button {
  min-height: 44px;
}
#game #dialog .garage-footer {
  flex-shrink: 0;
}
#game #dialog .garage-footer .primary {
  width: auto !important;
  min-width: 0;
  flex: 1;
}
#game.short-viewport #dialog .garage-layout {
  overflow: auto;
  scrollbar-gutter: stable;
}
#game.short-viewport #dialog .garage-content {
  flex: 0 0 auto;
  overflow: visible;
  scrollbar-gutter: auto;
}
@supports not (scrollbar-gutter: stable) {
  #game.short-viewport #dialog .garage-layout {
    overflow-y: scroll;
  }
}

/* Native select arrows must not consume the selected text's width. */
#game .graphics-selects {
  grid-template-columns: minmax(74px, 1fr) max-content;
  max-width: 320px;
}
#game .graphics-selects select {
  appearance: none;
  padding: 6px 24px 6px 8px;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 12px) 50%,
    calc(100% - 8px) 50%;
  background-size: 4px 4px;
  background-repeat: no-repeat;
}
#game #target-fps {
  width: calc(6ch + 34px);
  min-width: calc(6ch + 34px);
}

/* Small landscape windows, including a regular platform banner. */
#game.mobile.short-viewport[data-orientation="landscape"] #dialog .home-layout {
  position: relative;
}
#game.mobile.short-viewport[data-orientation="landscape"] #dialog .home-story {
  display: block !important;
}
#game.mobile.short-viewport[data-orientation="landscape"] #dialog .home-actions {
  /* A filled animation transform would anchor #new-game to this column. */
  animation: none !important;
  transform: none !important;
}
#game.mobile.short-viewport[data-orientation="landscape"] #dialog .home-links {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 8px !important;
}
#game.mobile.short-viewport[data-orientation="landscape"] #dialog .home-links .menu-button {
  font-size: 11px !important;
}
#game.mobile.short-viewport[data-orientation="landscape"] #menu-subtitle,
#game.mobile.short-viewport[data-orientation="landscape"] .home-story .menu-tag {
  display: none !important;
}
#game.mobile.short-viewport[data-orientation="landscape"] #new-game {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 30%;
  font-size: 10px !important;
}
#game.mobile.short-viewport .touch-caption {
  display: none;
}
#game.mobile.short-viewport .touch-bucket {
  grid-template-columns: 46px 46px !important;
  grid-template-rows: 46px 46px !important;
  gap: 2px !important;
}
#game.mobile.short-viewport .touch-bucket button {
  width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
}
#game.mobile.short-viewport .drive-controls,
#game.mobile.short-viewport #joystick {
  width: 92px !important;
  height: 92px !important;
}
#game.mobile.short-viewport #joystick-knob {
  width: 36px !important;
  height: 36px !important;
}
#game.mobile.short-viewport .mobile-guidance {
  max-width: calc(100% - 230px);
  font-size: 10px !important;
}
#game.mobile.short-viewport #dialog .vehicle-stage {
  min-height: 0 !important;
  padding: 0 !important;
}
#game.mobile.short-viewport #dialog .garage-loader {
  max-height: 100px;
}
#game.mobile.short-viewport #dialog .vehicle-info h3 {
  font-size: 18px !important;
}
#game:not(.mobile) .location {
  bottom: calc(
    100dvh - var(--viewport-top, 0px) - var(--viewport-height, 100dvh) + 68px
  ) !important;
}