:root {
  --game-design-width: 750;
  --game-design-height: 1334;
  --safe-top: env(safe-area-inset-top);
  --safe-right: env(safe-area-inset-right);
  --safe-bottom: env(safe-area-inset-bottom);
  --safe-left: env(safe-area-inset-left);
  color-scheme: dark;
  background: #183d31;
}

* {
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  overflow: hidden;
  -ms-touch-action: none;
  touch-action: none;
}

body,
canvas,
div {
  display: block;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  padding: 0;
  border: 0;
  margin: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 38%, rgb(202 222 145 / 62%), transparent 48%),
    #183d31;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/*
 * Landscape browsers get a complete 750:1334 portrait stage fitted by height.
 * The bounded sub-frame is measured by Cocos because exact-fit is disabled in
 * index.ejs. This is the invariant that keeps the direct /game/ URL usable.
 */
#GameDiv {
  position: relative;
  width: min(100vw, calc(100dvh * var(--game-design-width) / var(--game-design-height)));
  height: min(100dvh, calc(100vw * var(--game-design-height) / var(--game-design-width)));
  max-width: 100vw;
  max-height: 100dvh;
  overflow: hidden;
  flex: none;
  background: #c5d897;
  box-shadow: 0 20px 56px rgb(0 0 0 / 34%);
}

#Cocos3dGameContainer,
#GameCanvas {
  width: 100%;
  height: 100%;
}

#GameCanvas {
  background-color: transparent;
}

/*
 * Portrait phones retain the established full-screen behaviour. FIXED_WIDTH
 * may expose extra vertical background on long screens, but never crops UI.
 */
@media (orientation: portrait) {
  #GameDiv {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    box-shadow: none;
  }
}

@supports not (height: 100dvh) {
  body {
    min-height: 100vh;
  }

  #GameDiv {
    width: min(100vw, calc(100vh * var(--game-design-width) / var(--game-design-height)));
    height: min(100vh, calc(100vw * var(--game-design-height) / var(--game-design-width)));
    max-height: 100vh;
  }

  @media (orientation: portrait) {
    #GameDiv {
      width: 100vw;
      height: 100vh;
      max-height: none;
    }
  }
}