:root {
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --ui-edge-gutter: 12px;
  --viewport-width: 100vw;
  --viewport-height: 100vh;
  --game-aspect-w: 393;
  --game-aspect-h: 852;
  --game-aspect: 0.4612676;
  --game-gutter: 16px;
  --game-max-width: 430px;
  --game-preview-height: min(
    calc(100vh - var(--game-gutter) * 2),
    calc((100vw - var(--game-gutter) * 2) / var(--game-aspect)),
    calc(var(--game-max-width) / var(--game-aspect))
  );
  --app-height: var(--viewport-height);
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #176f18 url("assets/bg_menu_level10.png") center / cover no-repeat;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif;
  font-weight: 900;
}

html {
  position: fixed;
  inset: 0;
}

.shell {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--viewport-width);
  height: var(--app-height);
  min-height: 100%;
  overflow: hidden;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #176f18 url("assets/bg_menu_level10.png") center / cover no-repeat;
}

@supports (height: 100dvh) {
  :root {
    --viewport-height: 100dvh;
  }
}

#game {
  display: block;
  width: calc(var(--game-preview-height) * var(--game-aspect));
  height: var(--game-preview-height);
  max-width: calc(var(--app-height) * var(--game-aspect));
  max-height: var(--app-height);
  aspect-ratio: var(--game-aspect-w) / var(--game-aspect-h);
  image-rendering: auto;
  background: #176f18 url("assets/bg_menu_level10.png") center / cover no-repeat;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.58);
  contain: layout paint size;
}

@supports (height: 100dvh) {
  :root {
    --game-preview-height: min(
      calc(100dvh - var(--game-gutter) * 2),
      calc((100vw - var(--game-gutter) * 2) / var(--game-aspect)),
      calc(var(--game-max-width) / var(--game-aspect))
    );
  }
}

@media (orientation: portrait) and (min-width: 700px) {
  :root {
    --game-gutter: 24px;
    --game-max-width: 430px;
  }
}

.native-app .shell {
  inset: 0;
  width: var(--viewport-width);
  height: var(--app-height);
}

.native-app #game {
  width: var(--viewport-width);
  height: var(--app-height);
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  box-shadow: none;
}

html.telegram-webapp:not(.browser-preview) .shell {
  height: var(--app-height);
  align-items: stretch;
  justify-content: center;
}

html.telegram-webapp:not(.browser-preview) #game {
  width: 100vw;
  height: var(--app-height);
  max-width: none;
  aspect-ratio: auto;
  box-shadow: none;
}

@media (orientation: portrait) and (max-width: 700px), (orientation: portrait) and (pointer: coarse) {
  html:not(.native-app) .shell {
    height: var(--app-height);
    align-items: stretch;
    justify-content: center;
  }

  html:not(.native-app) #game {
    width: 100vw;
    height: var(--app-height);
    max-width: none;
    max-height: var(--app-height);
    aspect-ratio: auto;
    box-shadow: none;
  }
}

@media (orientation: landscape) {
  :root {
    --landscape-game-height: min(calc(var(--app-height) - 12px), calc(100vw / var(--game-aspect)));
    --landscape-game-width: calc(var(--landscape-game-height) * var(--game-aspect));
  }

  html:not(.native-app) .shell,
  html.telegram-webapp:not(.browser-preview) .shell {
    align-items: center;
    justify-content: center;
  }

  html:not(.native-app) #game,
  html.telegram-webapp:not(.browser-preview) #game {
    width: var(--landscape-game-width);
    height: var(--landscape-game-height);
    max-width: calc(100vw - 12px);
    max-height: calc(var(--app-height) - 12px);
    aspect-ratio: var(--game-aspect-w) / var(--game-aspect-h);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.52);
  }
}

.low-performance #game {
  box-shadow: none;
}