/* Self-hosted fonts (OFL, see fonts/LICENSE-*). swap: the canvas redraws every frame, so a late font just pops in. */
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/fredoka-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Fredoka'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/fredoka-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/space-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Space Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/space-mono-latin-700-normal.woff2') format('woff2'); }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #121019;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

/* Full-bleed canvas; main.js sets the exact CSS size from visualViewport on every resize. */
#game {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #121019;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  cursor: pointer;
}

/* Hidden probe: its computed padding is the safe-area inset on each side (read by screen.js). */
.safe-probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: env(safe-area-inset-left, 0px);
}

/* Screen-reader only (the aria-live announcer). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}