:root { color-scheme: light; background: #111; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { display: grid; place-items: center; overscroll-behavior: none; }
#game {
  position: relative;
  width: min(100vw, 56.25vh);
  width: min(100vw, 56.25dvh);
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #4ec0ca;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
canvas { display: block; width: 100%; height: 100%; image-rendering: pixelated; outline: none; }
.sprite-button {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.sprite-button:focus-visible { outline: 2px solid white; outline-offset: -5px; }
.sprite-button[hidden] { display: none; }
#play { left: 6.944444%; top: 62.5%; width: 40.277778%; height: 13.671875%; }
#scores { left: 52.777778%; top: 62.5%; width: 40.277778%; height: 13.671875%; }
#pause, #resume { left: 3.472222%; top: 1.953125%; width: 9.027778%; height: 5.46875%; }
#menu { left: 36.111111%; top: 64.453125%; width: 27.777778%; height: 5.46875%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#error { position: absolute; inset: 20% 7% auto; padding: 18px; color: #fff; background: #442725; line-height: 1.6; user-select: text; }