:root {
  --ink: #f3eefc;
  --ink-quiet: #a79fc4;
  --backdrop: #100c1c;
  --backdrop-deep: #07050e;
  --accent: #ffd166;
  --good: #7ee0b8;
  --bad: #ff6b6b;
  --panel: rgba(20, 15, 34, 0.94);
  --radius: 14px;
  --font-display: "Fredoka", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1200px 700px at 50% -10%, #241a3d 0%, transparent 65%),
    var(--backdrop-deep);
  color: var(--ink);
  font-family: var(--font-body);
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

/* Column layout: bar, then the house, then the log. Nothing overlaps the canvas. */
.page {
  width: 100%;
  max-width: 1040px;
  display: flex;
  flex-direction: column;
}

/*
 * The stage is as wide as the level's map allows, not as wide as the page.
 *
 * The canvas is backed by exactly `grid.width * TILE` device pixels, so letting a
 * twelve-tile tutorial map fill a 1040px column upscales its hand-drawn 32-unit artwork
 * nearly threefold and makes it soft. `main.ts` sets `data-size` from the grid when a run
 * starts — never on the menus, where the panel wants the whole width.
 */
.stage[data-size="s"] { max-width: 560px; }
.stage[data-size="m"] { max-width: 800px; }

/* A sized stage hugs its canvas. The floor below exists so the *menus* have a box to sit
   in — they run with no `data-size` at all — but during a run it is just empty backdrop
   under the house, and a map shorter than it floats in the middle of a band of it. */
.stage[data-size] { min-height: 0; }

.stage {
  position: relative;
  margin-inline: auto;
  min-height: 360px;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--backdrop);
  box-shadow:
    0 40px 80px -30px rgba(0, 0, 0, 0.9),
    0 0 0 1px rgba(255, 255, 255, 0.07);
}

.stage__canvas {
  display: block;
  width: 100%;
  height: auto;
  /* The player's hands are the cursor, so the system arrow would be a second one. */
  cursor: none;
  touch-action: none;
}