/*
  Spell Beasts design system: a mid-century picture book, printed on a risograph.
  Flat chalky inks on paper. Shape comes from outline and flat fill; depth comes
  from a hard offset underside, never a blurred shadow. The page is always paper.

  Layout: one centred column (max 1040px) of paper sheets; the session screen is
  a single-task stage with the word at the top and the keyboard in a well below.
*/

:root {
  /* paper & ink */
  --paper: #F7F0E4;
  --paper-light: #FFFAF1;
  --paper-deep: #EBE0CC;
  --paper-shade: #DDCFB5;
  --rule: #D6C9B2;
  --ink: #2A2633;
  --ink-soft: #5D5869;
  --ink-faint: #8E8798;

  /* roles */
  --yolk: #F4B942;
  --yolk-deep: #D99A1E;
  --yolk-deeper: #A87510;    /* the underside of a yolk button sitting on yolk */
  --yolk-light: #FBE3A6;
  --leaf: #2B7550;
  --leaf-deep: #1E5A3C;
  --leaf-light: #BFE3C6;
  --think: #F08CB4;          /* "pink for think": highlighter behind tricky letters */
  --think-ink: #B8356E;      /* the gentle "look again" colour. There is no red. */
  --think-light: #FBDDE9;
  --pond: #1F6F8B;
  --pond-deep: #155269;
  --pond-light: #CFE6EC;
  --dusk: #3B3357;           /* end-of-session sky */

  /* button hovers: each ink a shade lighter */
  --yolk-hover: #F6C35A;
  --leaf-hover: #33845C;
  --pond-hover: #237C9A;
  --think-hover: #FCE6EF;

  /* the twig the session's eggs sit on */
  --twig: #8A6A4B;
  --twig-deep: #6B4F36;

  /* keyboard focus ring; dark panels (dusk) set it to a light ink */
  --focus: var(--pond);

  /* creature inks */
  --robin: #E25D3C;
  --marmalade: #F28C28;
  --leafy: #58A36B;
  --lagoon: #3C9AA6;
  --cornflower: #5B7FD1;
  --plum: #8C5BA6;
  --bubblegum: #F39BC0;

  /* type */
  --font-word: 'Andika', 'Andika New Basic', 'Sassoon Primary', 'Century Gothic', 'Trebuchet MS', system-ui, sans-serif;
  --font-ui: var(--font-word);
  --font-display: 'Fraunces', 'Cooper Black', 'Cooper Std', Georgia, 'Times New Roman', serif;
  --display-axes: "SOFT" 100, "WONK" 1, "opsz" 144;

  --text-xs: 0.875rem;
  --text-sm: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.6rem, 4.5vw, 2.1rem);
  --text-2xl: clamp(2rem, 6vw, 2.9rem);
  --text-3xl: clamp(2.4rem, 8vw, 3.6rem);
  --word-size: clamp(2.6rem, 10.5vw, 5.5rem);
  --letter-space: 0.04em;
  --line: 1.5;

  /* shape */
  --r-sm: 10px;
  --r: 14px;
  --r-lg: 20px;
  --r-xl: 28px;
  --stroke: 2px;
  --stroke-thin: 1.5px;
  --lift: 4px;

  /* motion */
  --out: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --in: cubic-bezier(.55, 0, 1, .45);
  --t-micro: 140ms;
  --t-move: 280ms;

  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --maxw: 1040px;

  color-scheme: light;
}

/* Page tints for children who read more comfortably on coloured paper */
:root[data-tint="cream"] { --paper: #FBF3D9; --paper-light: #FFFBEA; --paper-deep: #F0E3BC; }
:root[data-tint="blue"] { --paper: #E6EEF4; --paper-light: #F4F8FB; --paper-deep: #D3DFE8; --paper-shade: #C3D1DD; --rule: #BBCAD6; }
:root[data-tint="green"] { --paper: #E8F1E2; --paper-light: #F5FAF2; --paper-deep: #D5E4CC; --paper-shade: #C4D7B9; --rule: #BCCFB1; }
:root[data-tint="rose"] { --paper: #F7E8E8; --paper-light: #FCF5F4; --paper-deep: #EDD5D4; --paper-shade: #E0C2C1; --rule: #D9BFBE; }

/* Easier reading: more space between letters and lines */
:root[data-font="readable"] {
  --letter-space: 0.1em;
  --line: 1.75;
  --text-sm: 1.0625rem;
  --text-md: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  height: 100%;
  /* keep whatever focus or a link scrolls to clear of the sticky top bar (72px) */
  scroll-padding-top: calc(84px + env(safe-area-inset-top, 0px));
  scroll-padding-bottom: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--text-md);
  line-height: var(--line);
  letter-spacing: calc(var(--letter-space) * 0.4);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}

/* Riso paper grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.07;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.14 0 0 0 0 0.2 0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-variation-settings: var(--display-axes);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--text-2xl); }
h2 { font-size: var(--text-xl); }
h3 { font-size: var(--text-lg); font-weight: 700; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--pond); text-underline-offset: 3px; text-decoration-thickness: 2px; }
button { font: inherit; color: inherit; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
h1:focus, h2:focus, [tabindex="-1"]:focus { outline: none; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- app frame ---------- */

#app {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}
/* Screens slide in sideways: clip that at the app's edges, so a phone never widens the
   page (and pans its sticky bars off-screen). clip, unlike hidden, makes no scroll box,
   so sticky headers keep working. Older browsers fall back to body's overflow-x. */
@supports (overflow: clip) {
  #app { overflow-x: clip; }
}

.screen {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-left: var(--gutter);
  padding-right: var(--gutter-r);
  padding-block: 0 calc(28px + env(safe-area-inset-bottom, 0px));
}

.screen-entering { animation: screen-in var(--t-move) var(--out) both; }
.screen-leaving {
  position: absolute;
  inset: 0 0 auto 0;
  pointer-events: none;
  animation: screen-out 220ms var(--in) both;
}
@keyframes screen-in { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes screen-out { to { transform: translateX(-20px); opacity: 0; } }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}
.stack { display: flex; flex-direction: column; gap: var(--gap, 16px); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gap, 12px); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { text-align: center; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--text-sm); }
.tiny { font-size: var(--text-xs); }
.nowrap { white-space: nowrap; }
.tabnum { font-variant-numeric: tabular-nums; }

.screen-error {
  margin: 20vh auto 0;
  max-width: 28rem;
  display: grid;
  gap: 16px;
  text-align: center;
  justify-items: center;
}

/* ---------- motion preferences ---------- */
:root[data-motion="reduced"] *, :root[data-motion="reduced"] *::before, :root[data-motion="reduced"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
}
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) *, :root:not([data-motion="full"]) *::before, :root:not([data-motion="full"]) *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ---------- print ---------- */
@media print {
  body { background: #fff; }
  body::after { display: none; }
  .no-print, .topbar, .keyboard { display: none !important; }
}

/* ---------- boot (before the first screen mounts) ---------- */
.boot {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  color: var(--ink-soft);
  font-weight: 700;
}
.boot svg { transform-origin: 50% 92%; animation: boot-wobble 1.6s ease-in-out infinite; }
@keyframes boot-wobble { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-6deg); } 80% { transform: rotate(5deg); } 90% { transform: rotate(-2deg); } }