/* Desktop keeps its resizable field; a phone keeps the 9:16 joystick viewport. */
html:not(.desktop-game) {
  --available-width: calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px));
  --available-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  height: 100%;
  background: #101d1a;
  overscroll-behavior: none;
}
html:not(.desktop-game) body {
  height: 100vh;
  min-height: 0;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
}
@supports (height: 100dvh) {
  html:not(.desktop-game) { --available-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  html:not(.desktop-game) body { height: 100dvh; }
}
html:not(.desktop-game) .game-shell {
  flex: none;
  width: min(var(--available-width), calc(var(--available-height) * .5625), 540px);
  height: min(var(--available-height), calc(var(--available-width) * 1.7777778), 960px);
  touch-action: auto;
}
html:not(.desktop-game) .screen {
  touch-action: pan-y;
  -webkit-overflow-scrolling: touch;
}
html:not(.desktop-game) #game-canvas {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}