/* Final proportional viewport layer: the facility remains a 16:9 design canvas. */
:root {
  --scene-design-width: 1920px;
  --scene-design-height: 1080px;
  --scene-scale: 1;
  --scene-offset-x: 0px;
  --scene-offset-y: 0px;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #030703;
}

body {
  position: fixed;
  inset: 0;
}

.stage {
  width: var(--scene-design-width) !important;
  height: var(--scene-design-height) !important;
  min-width: var(--scene-design-width) !important;
  min-height: var(--scene-design-height) !important;
  max-width: var(--scene-design-width) !important;
  max-height: var(--scene-design-height) !important;
  position: fixed !important;
  left: var(--scene-offset-x) !important;
  top: var(--scene-offset-y) !important;
  transform: scale(var(--scene-scale)) !important;
  transform-origin: top left !important;
  overflow: hidden !important;
}

.yard-art {
  object-fit: cover;
}

/* Modals and the welcome screen live outside the scaled scene. */
body > .window-backdrop {
  width: 100vw !important;
  height: var(--app-height, 100dvh) !important;
  position: fixed !important;
  inset: 0 !important;
}

#splashStatus {
  display: block;
  margin-top: 8px;
  color: #e8f4df;
  font-size: clamp(10px, 1.35vh, 14px);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: center;
  text-shadow: 0 2px 5px #000;
}

#welcome.load-error #splashStatus {
  color: #ffb29d;
}

/* Mobile readability boost. Rem-based labels grow without changing scene scale. */
html.mobile-menu-viewport {
  font-size: 130% !important;
}

html.mobile-menu-viewport .stage,
html.mobile-menu-viewport body > .window-backdrop {
  --mobile-readable-text: 1.3;
}

/* An additional 30% boost for the dense transformer production screens. */
html.mobile-menu-viewport .transformer-window .transformer-title { font-size: 3.64rem !important; }
html.mobile-menu-viewport .transformer-window .transformer-side h3 { font-size: 1.846rem !important; }
html.mobile-menu-viewport .transformer-window .material-row strong,
html.mobile-menu-viewport .transformer-window .output-product strong { font-size: 1.287rem !important; }
html.mobile-menu-viewport .transformer-window .material-row p,
html.mobile-menu-viewport .transformer-window .output-product p { font-size: 1.209rem !important; }
html.mobile-menu-viewport .transformer-window .material-row b,
html.mobile-menu-viewport .transformer-window .output-product b { font-size: 1.664rem !important; }
html.mobile-menu-viewport .transformer-window .machine-green-button { font-size: 1.794rem !important; }
html.mobile-menu-viewport .transformer-window .machine-flow-note { font-size: 0.884rem !important; }
html.mobile-menu-viewport .transformer-window .level-strip { font-size: 1.521rem !important; }
html.mobile-menu-viewport .transformer-window .factory-slot span { font-size: 1.365rem !important; }
html.mobile-menu-viewport .transformer-window .factory-slot small { font-size: 0.962rem !important; }
html.mobile-menu-viewport .transformer-window .center-lower > p { font-size: 1rem !important; }
html.mobile-menu-viewport .transformer-window .machine-stats div { font-size: 0.871rem !important; }
html.mobile-menu-viewport .transformer-window .machine-stats strong { font-size: 1.17rem !important; }
html.mobile-menu-viewport .transformer-window .run-machine { font-size: 1.235rem !important; }
html.mobile-menu-viewport .transformer-window .transformer-footer > p { font-size: 1.079rem !important; }
html.mobile-menu-viewport .transformer-window .recipe-visuals b { font-size: 2.08rem !important; }

/* Profile panel: 50% larger mobile typography without scaling the panel itself. */
html.mobile-menu-viewport .profile-window .panel-kicker { font-size: 0.975rem !important; }
html.mobile-menu-viewport .profile-window .window-titlebar h2 { font-size: 3.42rem !important; }
html.mobile-menu-viewport .profile-window .profile-navigation > span,
html.mobile-menu-viewport .profile-window .profile-navigation > button { font-size: 1.11rem !important; }
html.mobile-menu-viewport .profile-window .profile-membership h3,
html.mobile-menu-viewport .profile-window .profile-controls h3,
html.mobile-menu-viewport .profile-window .profile-statistics h3,
html.mobile-menu-viewport .profile-window .profile-collection h3,
html.mobile-menu-viewport .profile-window .profile-community h3 { font-size: 1.2rem !important; }
html.mobile-menu-viewport .profile-window input,
html.mobile-menu-viewport .profile-window select { font-size: 0.885rem !important; }
html.mobile-menu-viewport .profile-window .profile-account-form button { font-size: 0.93rem !important; }
html.mobile-menu-viewport .profile-window .profile-connected strong { font-size: 0.93rem !important; }
html.mobile-menu-viewport .profile-window .profile-connected span { font-size: 0.825rem !important; }
html.mobile-menu-viewport .profile-window .profile-connected small { font-size: 0.705rem !important; }
html.mobile-menu-viewport .profile-window .profile-controls label { font-size: 0.87rem !important; }
html.mobile-menu-viewport .profile-window .profile-art-slot span { font-size: 0.84rem !important; }
html.mobile-menu-viewport .profile-window .profile-art-slot small { font-size: 0.615rem !important; }
html.mobile-menu-viewport .profile-window .profile-name input { font-size: 1.62rem !important; }
html.mobile-menu-viewport .profile-window .profile-name > span { font-size: 0.93rem !important; }
html.mobile-menu-viewport .profile-window .profile-level-bar > strong { font-size: 1.695rem !important; }
html.mobile-menu-viewport .profile-window .profile-level-bar b { font-size: 0.96rem !important; }
html.mobile-menu-viewport .profile-window .profile-level-bar small { font-size: 0.795rem !important; }
html.mobile-menu-viewport .profile-window .profile-league h3 { font-size: 1.17rem !important; }
html.mobile-menu-viewport .profile-window .profile-league strong { font-size: 0.855rem !important; }
html.mobile-menu-viewport .profile-window .profile-league > span { font-size: 1.05rem !important; }
html.mobile-menu-viewport .profile-window .profile-facts span { font-size: 0.795rem !important; }
html.mobile-menu-viewport .profile-window .profile-facts b { font-size: 0.96rem !important; }
html.mobile-menu-viewport .profile-window .profile-statistics span { font-size: 0.705rem !important; }
html.mobile-menu-viewport .profile-window .profile-statistics strong { font-size: 1.23rem !important; }
html.mobile-menu-viewport .profile-window .profile-collection strong { font-size: 0.66rem !important; }
html.mobile-menu-viewport .profile-window .profile-collection article > span { font-size: 0.75rem !important; }
html.mobile-menu-viewport .profile-window .profile-tab-copy { font-size: 0.87rem !important; }
html.mobile-menu-viewport .profile-window .social-row strong { font-size: 0.78rem !important; }
html.mobile-menu-viewport .profile-window .social-row span { font-size: 0.66rem !important; }
html.mobile-menu-viewport .profile-window .small-action { font-size: 0.69rem !important; }
html.mobile-menu-viewport .profile-window .profile-community form button { font-size: 0.81rem !important; }
html.mobile-menu-viewport .profile-window .profile-inbox p { font-size: 0.72rem !important; }

/* Reference-sized profile typography for high-resolution landscape phones. */
html.mobile-menu-viewport .profile-window .panel-kicker { font-size: 14px !important; }
html.mobile-menu-viewport .profile-window .window-titlebar h2 { font-size: 42px !important; }
html.mobile-menu-viewport .profile-window .profile-navigation > span,
html.mobile-menu-viewport .profile-window .profile-navigation > button {
  font-size: 26px !important;
  line-height: 1.05 !important;
}
html.mobile-menu-viewport .profile-window .profile-membership h3,
html.mobile-menu-viewport .profile-window .profile-controls h3,
html.mobile-menu-viewport .profile-window .profile-statistics h3,
html.mobile-menu-viewport .profile-window .profile-collection h3,
html.mobile-menu-viewport .profile-window .profile-community h3 { font-size: 22px !important; }
html.mobile-menu-viewport .profile-window input,
html.mobile-menu-viewport .profile-window select { font-size: 17px !important; }
html.mobile-menu-viewport .profile-window .profile-account-form button { font-size: 19px !important; }
html.mobile-menu-viewport .profile-window .profile-connected strong { font-size: 18px !important; }
html.mobile-menu-viewport .profile-window .profile-connected span { font-size: 16px !important; }
html.mobile-menu-viewport .profile-window .profile-connected small { font-size: 14px !important; }
html.mobile-menu-viewport .profile-window .profile-controls label { font-size: 17px !important; }
html.mobile-menu-viewport .profile-window .profile-art-slot span { font-size: 17px !important; }
html.mobile-menu-viewport .profile-window .profile-art-slot small { font-size: 13px !important; }
html.mobile-menu-viewport .profile-window .profile-name input { font-size: 36px !important; }
html.mobile-menu-viewport .profile-window .profile-name > span { font-size: 17px !important; }
html.mobile-menu-viewport .profile-window .profile-level-bar > strong { font-size: 36px !important; }
html.mobile-menu-viewport .profile-window .profile-level-bar b { font-size: 20px !important; }
html.mobile-menu-viewport .profile-window .profile-level-bar small { font-size: 17px !important; }
html.mobile-menu-viewport .profile-window .profile-league h3 { font-size: 21px !important; }
html.mobile-menu-viewport .profile-window .profile-league strong { font-size: 18px !important; }
html.mobile-menu-viewport .profile-window .profile-league > span { font-size: 27px !important; }
html.mobile-menu-viewport .profile-window .profile-facts span { font-size: 15px !important; }
html.mobile-menu-viewport .profile-window .profile-facts b { font-size: 21px !important; }
html.mobile-menu-viewport .profile-window .profile-statistics span { font-size: 16px !important; }
html.mobile-menu-viewport .profile-window .profile-statistics strong { font-size: 40px !important; }
html.mobile-menu-viewport .profile-window .profile-collection strong { font-size: 15px !important; }
html.mobile-menu-viewport .profile-window .profile-collection article > span { font-size: 22px !important; }
html.mobile-menu-viewport .profile-window .profile-tab-copy { font-size: 16px !important; }
html.mobile-menu-viewport .profile-window .social-row strong { font-size: 17px !important; }
html.mobile-menu-viewport .profile-window .social-row span { font-size: 14px !important; }
html.mobile-menu-viewport .profile-window .small-action { font-size: 15px !important; }
html.mobile-menu-viewport .profile-window .profile-community form button { font-size: 18px !important; }
html.mobile-menu-viewport .profile-window .profile-inbox p { font-size: 15px !important; }

@media (orientation: portrait) and (max-width: 1180px) {
  .stage {
    width: var(--scene-design-width) !important;
    height: var(--scene-design-height) !important;
    min-width: var(--scene-design-width) !important;
    min-height: var(--scene-design-height) !important;
    left: var(--scene-offset-x) !important;
    top: var(--scene-offset-y) !important;
    transform: scale(var(--scene-scale)) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stage,
  .game-window {
    transition: none !important;
  }
}