:root {
  --coral: #f97068;
  --navy: #0b2027;
  --paper: #eaeae1;
  --blue: #37718e;
  --teal: #49beaa;
  --yellow: #f9dc67;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  margin: 0;
  min-height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 40%, rgba(73, 190, 170, 0.22), transparent 34%),
    linear-gradient(135deg, #06171d 0%, var(--navy) 48%, #081216 100%);
  color: var(--paper);
  font-family:
    "Press Start 2P",
    system-ui,
    sans-serif;
}

.game-shell {
  width: min(100vw, 177.78vh);
  aspect-ratio: 16 / 9;
  padding: clamp(6px, 1vw, 14px);
}

.game-shell:fullscreen,
.game-shell:-webkit-full-screen {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100vh;
  padding: 0;
  background: #02080a;
}

.game-shell:fullscreen canvas,
.game-shell:-webkit-full-screen canvas {
  width: min(100vw, 177.78vh);
  height: min(56.25vw, 100vh);
  border: 0;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  background: var(--navy);
  border: 4px solid #1f3b45;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.45),
    inset 0 0 0 2px rgba(234, 234, 225, 0.08);
  image-rendering: auto;
}