/* Nunito 800 for the few UI words, Andika 700 for everything children read. Both in fonts/ here: Firefox does not load
   fonts from a parent folder of a file:// page, and the folder can be uploaded on its own. */
@font-face {
  font-family: "Nunito";
  font-weight: 800;
  font-display: swap;
  src: url(fonts/nunito-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-weight: 800;
  font-display: swap;
  src: url(fonts/nunito-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Andika";
  font-weight: 700;
  font-display: block;
  src: url(fonts/andika-700-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Andika";
  font-weight: 700;
  font-display: block;
  src: url(fonts/andika-700-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

* { box-sizing: border-box; margin: 0; }

/* Page colours follow the app's theme (engine.js sets data-theme); the media query covers the first paint.
   Warm rice-paper background, no pure white or black. */
:root {
  --bg: #f9f6f0; --b1: #fbe3da; --b2: #dde9f7; --b3: #e1f1e4; --doodles: 0.85;
}
:root[data-theme="dark"] {
  --bg: #1e1c29; --b1: #352b48; --b2: #232f45; --b3: #243832; --doodles: 0.3;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) { --bg: #1e1c29; --b1: #352b48; --b2: #232f45; --b3: #243832; --doodles: 0.3; }
}

/* Large soft circles behind the page (the canvas is transparent). They stand still: no motion while children work. */
.blobs { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blobs i { position: absolute; border-radius: 50%; }
.blobs i:nth-child(1) { left: -12vmin; top: 4vh; width: 46vmin; height: 46vmin; background: var(--b1); }
.blobs i:nth-child(2) { right: -18vmin; top: 38vh; width: 58vmin; height: 58vmin; background: var(--b2); }
.blobs i:nth-child(3) { left: 14vw; bottom: -26vmin; width: 52vmin; height: 52vmin; background: var(--b3); }
/* Doodles of a sticker book: hearts, stars, little sparkles, pale and still. */
.blobs::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--doodles);
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cpath%20d%3D%27M20%2033C7%2024%204%2015%209.5%2010c4.5-4%209.5-1%2010.5%203%201-4%206-7%2010.5-3%205.5%205%202.5%2014-10.5%2023z%27%20fill%3D%27none%27%20stroke%3D%27%23f4a3b7%27%20stroke-width%3D%273.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cpath%20d%3D%27M20%2033C7%2024%204%2015%209.5%2010c4.5-4%209.5-1%2010.5%203%201-4%206-7%2010.5-3%205.5%205%202.5%2014-10.5%2023z%27%20fill%3D%27none%27%20stroke%3D%27%23f4a3b7%27%20stroke-width%3D%273.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cpath%20d%3D%27M20%2033C7%2024%204%2015%209.5%2010c4.5-4%209.5-1%2010.5%203%201-4%206-7%2010.5-3%205.5%205%202.5%2014-10.5%2023z%27%20fill%3D%27none%27%20stroke%3D%27%23f4a3b7%27%20stroke-width%3D%273.5%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cpath%20d%3D%27M20%205l4.3%209.6%2010.4%201.1-7.8%207%202.2%2010.3L20%2027.8%2010.9%2033l2.2-10.3-7.8-7%2010.4-1.1z%27%20fill%3D%27none%27%20stroke%3D%27%23f3c94f%27%20stroke-width%3D%273.2%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cpath%20d%3D%27M20%205l4.3%209.6%2010.4%201.1-7.8%207%202.2%2010.3L20%2027.8%2010.9%2033l2.2-10.3-7.8-7%2010.4-1.1z%27%20fill%3D%27none%27%20stroke%3D%27%23f3c94f%27%20stroke-width%3D%273.2%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cpath%20d%3D%27M20%205l4.3%209.6%2010.4%201.1-7.8%207%202.2%2010.3L20%2027.8%2010.9%2033l2.2-10.3-7.8-7%2010.4-1.1z%27%20fill%3D%27none%27%20stroke%3D%27%23f3c94f%27%20stroke-width%3D%273.2%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20stroke%3D%27%23f3c94f%27%20stroke-width%3D%273.5%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M8%2014l6%204M20%206v8M32%2014l-6%204%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20stroke%3D%27%239cc0f0%27%20stroke-width%3D%273.5%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M8%2014l6%204M20%206v8M32%2014l-6%204%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20stroke%3D%27%23f3c94f%27%20stroke-width%3D%273.5%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M8%2014l6%204M20%206v8M32%2014l-6%204%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"), url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%2040%27%3E%3Cg%20stroke%3D%27%239cc0f0%27%20stroke-width%3D%273.5%27%20stroke-linecap%3D%27round%27%3E%3Cpath%20d%3D%27M8%2014l6%204M20%206v8M32%2014l-6%204%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-position: 8% 72%, 78% 76%, 24% 12%, 68% 66%, 92% 28%, 4% 38%, 14% 22%, 86% 10%, 34% 88%, 58% 94%;
  background-size: 34px, 28px, 24px, 34px, 28px, 26px, 30px, 30px, 28px, 28px;
}

/* A theme's background picture (main.js sets --skin) instead of the circles; dimmed on the dark theme. */
:root { --veil: linear-gradient(transparent, transparent); }
:root[data-theme="dark"] { --veil: linear-gradient(rgba(30, 28, 41, 0.6), rgba(30, 28, 41, 0.6)); }
body.skinned { background: var(--veil), var(--skin) center / cover no-repeat, var(--bg); }
body.skinned .blobs { display: none; }

html, body { height: 100%; }

body {
  display: flex;
  height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  overflow: hidden;
  background: var(--bg);
  font-family: "Nunito", system-ui, sans-serif;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-width: 0;
  min-height: 0;
}

canvas {
  display: block;
  touch-action: none;
}