:root {
  color-scheme: dark;
  font-family: "Noto Sans SC", system-ui, sans-serif;
  background: #102a25;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

body {
  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);
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 32%, rgba(73, 130, 111, .22), transparent 46%),
    #102a25;
}

body:has(#game-shell[data-mode="bubbles"]) { align-items: start; }
#game-shell[data-mode="bubbles"] {
  width: min(100%, calc((100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * 502 / 870), 502px);
  aspect-ratio: 502 / 870;
  overflow: hidden;
}
#game-shell[data-mode="bubbles"] canvas { height: auto; aspect-ratio: 502 / 1080; }

#game-shell {
  width: min(100vw, calc(100vh * 502 / 1080), 502px);
  aspect-ratio: 502 / 1080;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
}