/* ui-scale.css
   ---------------------------------------------------------
   GLOBAL UI SCALE for 1921px -> 8K/8000px+
   - Base design width: 1920px
   - Keeps 0px -> 1920px responsive layout unchanged
   - Uses zoom-like scaling above 1920px without redesign
   --------------------------------------------------------- */

:root{
  --ui-base: 1920px;
  --ui-scale: 1;
  --ui-scale-max: 5;
}

html,
body{
  margin: 0;
  min-height: 100%;
  overflow-x: hidden;
}

.app{
  transform: scale(var(--ui-scale));
  transform-origin: top left;
  width: calc(100% / var(--ui-scale));
  min-height: calc(100vh / var(--ui-scale));
}

@media (min-width: 1921px){
  :root{
    --ui-scale: clamp(
      1,
      calc(100vw / var(--ui-base)),
      var(--ui-scale-max)
    );
  }
}

:root[data-ui-scale="off"]{
  --ui-scale: 1 !important;
}