/*
 * EVOLARYN V0.9.32.174 RC3 – central desktop viewport scaling
 *
 * The game keeps the stable 2560 x 1312 master viewport from the approved
 * desktop setup. Browser chrome and the Windows taskbar are still respected via
 * the ACTUAL browser viewport height. In addition, short 1920-class desktop
 * viewports receive a slight horizontal stretch so the small left/right gutters
 * disappear while the current overall image remains visually the same.
 */
:root {
  color-scheme: dark;
  --viewport-scale-x: 1;
  --viewport-scale-y: 1;
  --scaled-width: 2560px;
  --scaled-height: 1312px;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(9, 49, 55, .34), transparent 52%),
    #020809;
}

body {
  min-width: 0;
  min-height: 0;
}

#viewport-stage {
  position: fixed;
  inset: 0;
  width: 100dvw;
  height: 100dvh;
  max-width: 100%;
  max-height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}

#viewport-frame {
  position: relative;
  width: var(--scaled-width);
  height: var(--scaled-height);
  overflow: visible;
}

#game-viewport {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 2560px;
  height: 1312px;
  border: 0;
  margin: 0;
  padding: 0;
  background: #020809;
  transform: scale(var(--viewport-scale-x), var(--viewport-scale-y));
  transform-origin: top left;
}

/* The hint is deliberately owned by the outer shell so it is available while
   the game iframe is loading. Desktop and landscape layouts never see it. */
#mobile-orientation-hint {
  display: none;
}

@media (orientation: portrait) and (max-width: 640px) and (max-height: 1100px) {
  html[data-viewport-mode="mobile"] #viewport-stage {
    visibility: hidden;
  }

  html[data-viewport-mode="mobile"] #mobile-orientation-hint {
    position: fixed;
    inset: 0;
    z-index: 10;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 10px;
    padding: max(28px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
      max(28px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
    color: #eaffff;
    text-align: center;
    background:
      radial-gradient(circle at 50% 42%, rgba(38, 170, 184, .25), transparent 42%),
      linear-gradient(160deg, #07151b, #020708 72%);
  }

  html[data-viewport-mode="mobile"] #mobile-orientation-hint span {
    font: 800 clamp(58px, 19vw, 92px)/1 system-ui, sans-serif;
    color: #7cebf1;
    filter: drop-shadow(0 0 18px rgba(93, 226, 234, .38));
  }

  html[data-viewport-mode="mobile"] #mobile-orientation-hint strong {
    font: 800 clamp(22px, 7vw, 34px)/1.1 system-ui, sans-serif;
  }

  html[data-viewport-mode="mobile"] #mobile-orientation-hint p {
    margin: 0;
    color: #a9cbd1;
    font: 500 clamp(14px, 4.5vw, 18px)/1.4 system-ui, sans-serif;
  }
}