:root {
  --game-width: 100vw;
  --game-height: 100vh;
  --game-left: 0px;
  --game-top: 0px;
  --design-ratio: 0.56221889;
  color-scheme: dark;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  background: #07111f;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 25%, rgba(22, 105, 92, .26), transparent 44%),
    linear-gradient(180deg, #06121d 0%, #02090f 100%);
}

body {
  display: grid;
  place-items: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

.game-shell {
  position: fixed;
  left: var(--game-left);
  top: var(--game-top);
  width: var(--game-width);
  height: var(--game-height);
  display: grid;
  place-items: center;
  padding:
    max(env(safe-area-inset-top), 0px)
    max(env(safe-area-inset-right), 0px)
    max(env(safe-area-inset-bottom), 0px)
    max(env(safe-area-inset-left), 0px);
  overflow: hidden;
}

canvas {
  display: block;
  width: min(100%, calc(100vh * var(--design-ratio)));
  width: min(100%, calc(var(--game-height) * var(--design-ratio)));
  height: min(100%, calc(100vw / var(--design-ratio)));
  height: min(100%, calc(var(--game-width) / var(--design-ratio)));
  aspect-ratio: 750 / 1334;
  flex: none;
  border-radius: 0;
  box-shadow: 0 0 48px rgba(0, 0, 0, .42);
  cursor: crosshair;
}

#bgm {
  position: fixed;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 720px) {
  canvas { box-shadow: none; }
}