/* Page chrome only. Every pixel of the game itself is painted on the canvas. */

:root {
  --page-bg: #ded7fd;
  --page-bg-2: #efeaff;
  --ink: #4a4358;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: radial-gradient(circle at 50% 0%, var(--page-bg-2), var(--page-bg) 70%);
  font-family: "Baloo 2", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  touch-action: none;
}

/* The canvas is pinned to the viewport rather than centred in a grid: a
   centred grid item does not stretch, so `height: 100%` would fall back to the
   canvas's intrinsic aspect ratio and overflow the window by a few pixels. */
#stage {
  position: fixed;
  inset: 0;
}

#game {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* During a run the hammer sprite *is* the cursor, so the OS one is hidden.
   Toggled by Game.setPointerVisible(), never left on for menus. */
#game.hide-cursor {
  cursor: none;
}

/* Shown only when the canvas cannot run (no JS, boot failure). */
.fallback {
  position: fixed;
  inset: auto 0 0 0;
  padding: 1rem 1.25rem;
  text-align: center;
  font-weight: 700;
  background: #ffd7d1;
  color: #8a3a30;
}