/* =============================================================================
   CLAY — the soft-3D look (owner's choice, 2026-09-30)
   =============================================================================
   Claymorphism: every surface is a soft, puffy lump of modelling clay — big
   radii, a warm outer shadow, a light top-left highlight and a gentle inner
   shade, pastel fills. Layout follows a bento grid: tiles of different sizes,
   one idea per tile. The pictures are Fluent 3D emoji (ui.js art()), which
   are drawn in the same style.

   This layer sits on top of tokens/base/components and only restyles; the
   class names are unchanged. Removing its <link> in index.html brings the
   previous look back in one step.

   Contrast: text always sits on a light clay (light theme) or a dark clay
   (dark theme) surface, never on the shaded edges, so the AA pairs from
   tokens.css still hold.
   ============================================================================= */

:root {
  --clay-page-a: #fff4e8;
  --clay-page-b: #eef8ee;
  --clay-page-c: #e8f1ff;
  --clay-surface: #fffcf7;
  --clay-surface-2: #fff7ee;
  --clay-ink-shadow: 122, 92, 62;     /* rgb of the warm outer shadow */
  --clay-hi: rgba(255, 255, 255, 0.95);

  /* The three depths of clay: a tile, a button, and a pressed button. */
  --clay:
    12px 14px 28px rgba(var(--clay-ink-shadow), 0.16),
    -10px -10px 22px var(--clay-hi),
    inset 4px 4px 8px rgba(255, 255, 255, 0.85),
    inset -5px -6px 12px rgba(var(--clay-ink-shadow), 0.07);
  --clay-sm:
    6px 7px 14px rgba(var(--clay-ink-shadow), 0.18),
    -5px -5px 12px var(--clay-hi),
    inset 3px 3px 5px rgba(255, 255, 255, 0.85),
    inset -3px -4px 7px rgba(var(--clay-ink-shadow), 0.08);
  --clay-pressed:
    inset 5px 5px 10px rgba(var(--clay-ink-shadow), 0.2),
    inset -4px -4px 9px rgba(255, 255, 255, 0.8);

  /* Pastel clays for the four skills, and their deep ink. */
  --clay-speaking: #ffdbe4;  --clay-speaking-ink: #a3284f;
  --clay-listening: #d8ecff; --clay-listening-ink: #1f5f96;
  --clay-reading: #d6f2df;   --clay-reading-ink: #22683f;
  --clay-writing: #fff0c4;   --clay-writing-ink: #8a5a06;
  --clay-lilac: #ebe4ff;     --clay-lilac-ink: #4f3aa3;

  --clay-primary: #3f9b67;
  --clay-primary-deep: #2d7a4f;
  /* The light end of the primary button: white text needs 4.5:1 (WCAG AA);
     --clay-primary (#3f9b67) gave 3.45:1 (launch checklist point 14). */
  --clay-primary-btn: #318455;
  --clay-primary-ink: #ffffff;

  --r-clay: 30px;
  --r-clay-sm: 20px;

  /* A cleaner rounded face than the old comic stack on Windows. */
  --font-display: "Nunito", "Segoe UI Variable Display", "Segoe UI", ui-rounded,
    "SF Pro Rounded", system-ui, sans-serif;
  --font-body: "Nunito", "Segoe UI Variable Text", "Segoe UI", ui-rounded,
    system-ui, -apple-system, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --clay-page-a: #141b18;
    --clay-page-b: #16201b;
    --clay-page-c: #161c27;
    --clay-surface: #222d27;
    --clay-surface-2: #26322b;
    --clay-ink-shadow: 0, 0, 0;
    --clay-hi: rgba(255, 255, 255, 0.04);
    --clay:
      12px 14px 28px rgba(0, 0, 0, 0.45),
      -8px -8px 20px rgba(255, 255, 255, 0.03),
      inset 3px 3px 7px rgba(255, 255, 255, 0.06),
      inset -5px -6px 12px rgba(0, 0, 0, 0.25);
    --clay-sm:
      6px 7px 14px rgba(0, 0, 0, 0.45),
      -4px -4px 10px rgba(255, 255, 255, 0.03),
      inset 2px 2px 5px rgba(255, 255, 255, 0.07),
      inset -3px -4px 7px rgba(0, 0, 0, 0.25);
    --clay-pressed:
      inset 5px 5px 10px rgba(0, 0, 0, 0.45),
      inset -3px -3px 8px rgba(255, 255, 255, 0.05);
    --clay-speaking: #3d2630;  --clay-speaking-ink: #ffb3c7;
    --clay-listening: #1f3346; --clay-listening-ink: #a9d3ff;
    --clay-reading: #1f3a2b;   --clay-reading-ink: #a6e3bd;
    --clay-writing: #3b3120;   --clay-writing-ink: #ffd98a;
    --clay-lilac: #2c2742;     --clay-lilac-ink: #cbbcff;
    --clay-primary: #5dc08a;
    --clay-primary-deep: #3f9b67;
    --clay-primary-btn: var(--clay-primary);
    --clay-primary-ink: #0f2419;
  }
}
:root[data-theme='dark'] {
  --clay-page-a: #141b18;
  --clay-page-b: #16201b;
  --clay-page-c: #161c27;
  --clay-surface: #222d27;
  --clay-surface-2: #26322b;
  --clay-ink-shadow: 0, 0, 0;
  --clay-hi: rgba(255, 255, 255, 0.04);
  --clay:
    12px 14px 28px rgba(0, 0, 0, 0.45),
    -8px -8px 20px rgba(255, 255, 255, 0.03),
    inset 3px 3px 7px rgba(255, 255, 255, 0.06),
    inset -5px -6px 12px rgba(0, 0, 0, 0.25);
  --clay-sm:
    6px 7px 14px rgba(0, 0, 0, 0.45),
    -4px -4px 10px rgba(255, 255, 255, 0.03),
    inset 2px 2px 5px rgba(255, 255, 255, 0.07),
    inset -3px -4px 7px rgba(0, 0, 0, 0.25);
  --clay-pressed:
    inset 5px 5px 10px rgba(0, 0, 0, 0.45),
    inset -3px -3px 8px rgba(255, 255, 255, 0.05);
  --clay-speaking: #3d2630;  --clay-speaking-ink: #ffb3c7;
  --clay-listening: #1f3346; --clay-listening-ink: #a9d3ff;
  --clay-reading: #1f3a2b;   --clay-reading-ink: #a6e3bd;
  --clay-writing: #3b3120;   --clay-writing-ink: #ffd98a;
  --clay-lilac: #2c2742;     --clay-lilac-ink: #cbbcff;
  --clay-primary: #5dc08a;
  --clay-primary-deep: #3f9b67;
  --clay-primary-btn: var(--clay-primary);
  --clay-primary-ink: #0f2419;
}

/* Skill clays follow the same data-skill hook as the rest of the app. */
[data-skill='speaking']  { --clay-tint: var(--clay-speaking);  --clay-tint-ink: var(--clay-speaking-ink); }
[data-skill='listening'] { --clay-tint: var(--clay-listening); --clay-tint-ink: var(--clay-listening-ink); }
[data-skill='reading']   { --clay-tint: var(--clay-reading);   --clay-tint-ink: var(--clay-reading-ink); }
[data-skill='writing']   { --clay-tint: var(--clay-writing);   --clay-tint-ink: var(--clay-writing-ink); }

/* --- pictures ----------------------------------------------------------------- */

.art { display: inline-block; line-height: 1; }
.art--3d {
  width: 1.15em;
  height: 1.15em;
  object-fit: contain;
  vertical-align: -0.2em;
  user-select: none;
  -webkit-user-drag: none;
}
/* The drawn characters are cropped tight, so they may take a little more room
   than an emoji picture, which carries its own empty margin. */
.art--drawn { width: 1.35em; height: 1.35em; vertical-align: -0.28em; }

/* --- page ----------------------------------------------------------------------- */

body {
  font-weight: 500;
  background-color: var(--clay-page-a);
  background-image:
    radial-gradient(60% 50% at 8% 0%, var(--clay-page-a) 0%, transparent 70%),
    radial-gradient(55% 45% at 100% 20%, var(--clay-page-c) 0%, transparent 70%),
    radial-gradient(70% 60% at 30% 100%, var(--clay-page-b) 0%, transparent 70%),
    linear-gradient(160deg, var(--clay-page-a), var(--clay-page-b) 55%, var(--clay-page-c));
  background-attachment: fixed;
}
h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; }

/* --- top bar and nav ------------------------------------------------------------ */

.topbar {
  margin: 12px 12px 0;
  top: 12px;
  border: 0;
  border-radius: var(--r-clay);
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
}
.topbar__brand { font-weight: 900; color: var(--clay-primary-deep); }
.topbar__logo { font-size: 1.6rem; }

.mainnav__link { border-radius: var(--r-clay-sm); font-weight: 800; }
.mainnav__link[aria-current='page'] {
  background: var(--clay-reading);
  color: var(--clay-reading-ink);
  box-shadow: var(--clay-pressed);
}
.mainnav__icon { font-size: 1.5rem; }
@media (max-width: 899.98px) {
  .mainnav {
    left: 10px; right: 10px; bottom: 10px;
    border: 0;
    border-radius: var(--r-clay);
    background: var(--clay-surface);
    box-shadow: var(--clay-sm);
  }
  .mainnav__icon { font-size: 1.7rem; }
}

/* --- clay basics: buttons, cards, chips ------------------------------------------ */

.btn {
  border: 0;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
  font-weight: 800;
  transition: transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--clay); }
.btn:active:not(:disabled) { transform: translateY(1px); box-shadow: var(--clay-pressed); }
.btn--primary {
  background: linear-gradient(160deg, var(--clay-primary-btn), var(--clay-primary-deep));
  color: var(--clay-primary-ink);
  box-shadow:
    6px 8px 16px rgba(45, 122, 79, 0.35),
    -5px -5px 12px var(--clay-hi),
    inset 3px 3px 6px rgba(255, 255, 255, 0.35),
    inset -4px -5px 8px rgba(0, 0, 0, 0.15);
}
.btn--ghost { background: transparent; box-shadow: none; }
.btn--ghost:hover:not(:disabled) { background: var(--clay-surface); box-shadow: var(--clay-sm); }
.btn[aria-pressed='true'] { background: var(--clay-reading); color: var(--clay-reading-ink); box-shadow: var(--clay-pressed); }

.card {
  border: 0;
  border-radius: var(--r-clay);
  background: var(--clay-surface);
  box-shadow: var(--clay);
}
.panel { border-radius: var(--r-clay-sm); background: var(--clay-surface-2); box-shadow: var(--clay-pressed); }

.chip {
  border: 0;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
  font-weight: 800;
  padding: 6px 12px;
}
.chip--level, .chip--streak { background: var(--clay-writing); color: var(--clay-writing-ink); }
.chip--grownup { background: var(--clay-reading); color: var(--clay-reading-ink); }

.bar { border: 0; height: 14px; background: var(--clay-surface-2); box-shadow: var(--clay-pressed); }
.bar__fill { box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.45); }

.field input, .field select {
  border: 0;
  border-radius: var(--r-clay-sm);
  background: var(--clay-surface-2);
  box-shadow: var(--clay-pressed);
}

/* --- the garden gate as a bento grid --------------------------------------------- */
/* One tile per idea: who you are, what to do next, today's water, how tall you
   have grown. The tiles are separate lumps of clay, not rows in one card. */

.gate {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  gap: var(--s-5);
}
.gate__who, .gate__next, .gate__water, .growth {
  padding: var(--s-5);
  border: 0;
  border-radius: var(--r-clay);
  background: var(--clay-surface);
  box-shadow: var(--clay);
}
.gate__who { background: var(--clay-lilac); }
.gate__who .gate__hello { color: var(--clay-lilac-ink); }
.gate__next { background: var(--clay-reading); }
.gate__next .gate__label, .gate__next .gate__title { color: var(--clay-reading-ink); }
.gate__water { background: var(--clay-listening); border: 0; }
.gate__water, .gate__water .gate__label, .gate__water p { color: var(--clay-listening-ink); }
@media (min-width: 900px) {
  .gate { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.9fr); align-items: stretch; }
}

.gate__avatar {
  width: 96px; height: 96px;
  font-size: 3.4rem;
  border: 0;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
}
.gate__hello { font-size: var(--t-2xl); }
.gate__label { letter-spacing: 0.08em; font-weight: 900; }

.drops { font-size: 2.3rem; gap: var(--s-3); }
.drop[data-full='false'] { filter: grayscale(1); opacity: 0.35; }

.growth { border-top: 0; padding-top: var(--s-5); }
.growth__art {
  width: 64px; height: 64px;
  font-size: 2.2rem;
  background: var(--clay-surface-2);
  box-shadow: var(--clay-sm);
}
.growth__step[data-state='here'] .growth__art {
  width: 84px; height: 84px;
  font-size: 3rem;
  outline: 0;
  background: var(--clay-writing);
  box-shadow: var(--clay), 0 0 0 5px var(--clay-surface), 0 0 0 9px #f4c542;
}
.growth__step[data-state='grown'] .growth__art { background: var(--clay-reading); }
.growth__step[data-state='later'] .growth__art img { filter: grayscale(1); opacity: 0.45; }

/* --- the beds ---------------------------------------------------------------------- */

.garden { gap: var(--s-6); }
.bed {
  border: 0;
  border-radius: var(--r-clay);
  overflow: visible;
  background: var(--clay-tint, var(--clay-surface));
  box-shadow: var(--clay);
}
.bed__sign {
  background: transparent;
  border-bottom: 0;
  padding: var(--s-4) var(--s-5) var(--s-2);
  color: var(--clay-tint-ink);
}
.bed__name { color: var(--clay-tint-ink); font-size: var(--t-xl); }
.bed__count { color: var(--clay-tint-ink); opacity: 1; font-weight: 700; }
.bed__icon {
  width: 60px; height: 60px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  border-radius: 20px;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
}
.bed__all { border: 0; background: var(--clay-surface); box-shadow: var(--clay-sm); font-weight: 800; }

/* The soil is a pressed-in hollow of the bed, not a separate box. */
.bed__soil {
  margin: var(--s-2) var(--s-4) var(--s-4);
  border-radius: calc(var(--r-clay) - 8px);
  box-shadow: var(--clay-pressed);
  background-image:
    radial-gradient(var(--soil-speck) 1.5px, transparent 1.6px);
  background-size: 18px 18px;
}

.plant { width: 66px; height: 66px; }
.plant::before { box-shadow: inset 0 3px 4px rgba(0, 0, 0, 0.12); }
.plant__art { font-size: 2.2rem; }
.plant[data-stage='seed'] .plant__art { font-size: 1.5rem; }
.plant[data-stage='sprout'] .plant__art { font-size: 1.9rem; }
.plant[data-stage='flower'] .plant__art { font-size: 2.6rem; }
.plant[data-next='true'] {
  outline: 0;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm), 0 0 0 4px var(--clay-tint-ink);
}
.plant__water { font-size: 1.4rem; top: -14px; right: -10px; }
.plant__tag { font-weight: 800; }

/* --- a bed up close, a lesson, the grown-ups corner --------------------------------- */

.plant-card, .watering, .gu-tile, .pot {
  border: 0;
  border-radius: var(--r-clay);
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
}
.plant-card[data-next='true'], .watering[data-state='next'] {
  background: var(--clay-tint);
  box-shadow: var(--clay), 0 0 0 3px var(--clay-tint-ink);
}
.pot { background: var(--clay-tint, var(--clay-surface)); box-shadow: var(--clay); }
.pot__plant { border-radius: calc(var(--r-clay) - 6px); box-shadow: var(--clay-pressed); }
.watering__n { background: var(--clay-surface-2); box-shadow: var(--clay-pressed); }
.watering__art { font-size: 2.2rem; }

/* --- the PIN pad ----------------------------------------------------------------------- */

.pin-key { border: 0; border-radius: var(--r-clay-sm); background: var(--clay-surface); box-shadow: var(--clay-sm); }
.pin-key:active { box-shadow: var(--clay-pressed); }
.pin-dot { border: 0; background: var(--clay-surface-2); box-shadow: var(--clay-pressed); }
.pin-dot[data-full='true'] { background: var(--clay-primary); box-shadow: var(--clay-sm); }

/* --- exercises: options become clay tiles ---------------------------------------------- */

.option {
  border: 0;
  border-radius: var(--r-clay-sm);
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
}
.option[aria-pressed='true'] { background: var(--clay-reading); box-shadow: var(--clay-pressed); }
/* Marking keeps a ring as well as a colour (and the glyph components.css adds). */
.option[data-state='correct'] { background: var(--correct-soft); box-shadow: var(--clay-sm), 0 0 0 4px var(--correct); }
.option[data-state='notyet']  { background: var(--notyet-soft);  box-shadow: var(--clay-sm), 0 0 0 4px var(--notyet); }
.option[data-state='answer']  { box-shadow: var(--clay-sm); outline: 3px dashed var(--correct); outline-offset: 3px; }
.skill-card { border: 0; border-radius: var(--r-clay); background: var(--clay-tint, var(--clay-surface)); box-shadow: var(--clay); color: var(--clay-tint-ink, var(--ink)); }

@media print {
  .topbar, .mainnav { box-shadow: none; }
  body { background: #fff; }
}

/* A chip is one line: "Acorn · Level 0" wrapped its 0 onto a line of its own. */
.chip { white-space: nowrap; }

/* On a phone the top bar keeps the pictures and drops the words, or the theme
   button is pushed off the edge (seen with the Lock chip open). The words stay
   in the aria-labels and titles. */
@media (max-width: 640px) {
  .topbar { gap: 6px; padding: 8px 10px; margin: 8px 8px 0; }
  .chip--grownup, .topbar a.chip[href='#/profiles'] { font-size: 0; gap: 0; padding: 6px 9px; }
  .chip--grownup .art, .topbar a.chip[href='#/profiles'] .art { font-size: 1.05rem; }
  .topbar .btn--icon { min-width: 44px; min-height: 44px; padding: 6px; }
}

/* Uzbek and Russian menu words are longer than English (i18n.js): on a
   laptop-width screen the five tabs pushed the theme button off the bar. With
   a child playing, the brand and the Lock/child chips keep only their
   pictures until the screen is wide enough for everything. */
@media (min-width: 641px) and (max-width: 1299px) {
  .app--nav .topbar__brand span:not([aria-hidden]) {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap;
  }
  .app--nav .chip--grownup, .app--nav .topbar a.chip[href='#/profiles'] { font-size: 0; gap: 0; padding: 6px 9px; }
  .app--nav .chip--grownup .art, .app--nav .topbar a.chip[href='#/profiles'] .art { font-size: 1.05rem; }
}

/* --- the demo: a tile saying why, and locks on the plants -------------------------- */

.demo-tile {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-clay);
  background: var(--clay-writing);
  color: var(--clay-writing-ink);
  box-shadow: var(--clay);
}
.demo-tile > div { flex: 1; min-width: 200px; }
.demo-tile__art { font-size: 2.6rem; line-height: 1; }
.demo-tile__title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: var(--t-lg); }
.demo-tile__why { margin: 0; font-weight: 600; }

/* --- the level test / Final Test tile (garden) ------------------------------------ */

.level-test-tile {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-clay);
  background: var(--clay-listening);
  color: var(--clay-listening-ink);
  box-shadow: var(--clay);
}
.level-test-tile[data-ready='yes'] { background: var(--clay-reading); color: var(--clay-reading-ink); }
.level-test-tile__body { flex: 1; min-width: 200px; display: grid; gap: var(--s-2); }
.level-test-tile__art { font-size: 2.6rem; line-height: 1; }
.level-test-tile__title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: var(--t-lg); }
.level-test-tile__why { margin: 0; font-weight: 600; }

.plant[data-locked='true'] .plant__art { filter: grayscale(0.85); opacity: 0.5; }
.plant__lock { position: absolute; right: -4px; bottom: 2px; font-size: 1.1rem; }

.watering[data-state='locked'] { opacity: 0.62; box-shadow: var(--clay-pressed); cursor: default; }
.watering[data-state='locked']:hover { transform: none; }
.watering[data-state='locked'] .watering__art img { filter: grayscale(0.8); }

.locked-art { font-size: 5rem; line-height: 1; }

/* =============================================================================
   THE EXERCISE SCREEN in clay (2026-10-06)
   =============================================================================
   The screen a child spends most time on. It follows the lesson it came from:
   a heading tile in the skill's clay with the activity's picture, questions on
   clay cards, answers as puffy tiles with 3D pictures, and the verdict as a
   tile of its own. Marking is still a ring + a glyph + a label, never colour
   alone (§7). */

.ex-head {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5);
  border-radius: var(--r-clay);
  background: var(--clay-tint, var(--clay-surface));
  color: var(--clay-tint-ink, var(--ink));
  box-shadow: var(--clay);
}
.ex-head__art {
  flex-shrink: 0;
  width: 92px; height: 92px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 3.2rem;
  border-radius: 26px;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
}
.ex-head__words { min-width: 0; }
.ex-head__skill {
  margin: 0;
  font-weight: 900;
  font-size: var(--t-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ex-head__title { margin: 2px 0 4px; color: inherit; overflow-wrap: anywhere; }
.ex-head__how { margin: 0; font-weight: 700; font-size: var(--t-md); }

/* Question cards: the heading reads in the skill's ink. */
.ex .card[data-question] { padding: var(--s-5); gap: var(--s-4); }
.ex .card[data-question] h3 { color: var(--clay-tint-ink, var(--ink)); font-size: var(--t-lg); }

/* --- answers ---------------------------------------------------------------------- */

.ex .options { gap: var(--s-4); }
.ex .option {
  position: relative;
  min-height: 112px;
  transition: transform var(--dur-fast) var(--ease-bounce), box-shadow var(--dur-fast) var(--ease-out);
}
.ex .options--wide .option { min-height: 64px; }
.ex .option:hover:not(:disabled) { transform: translateY(-3px); box-shadow: var(--clay); }
.ex .option__emoji { font-size: 3.6rem; }
.ex .option__emoji .art--3d { transition: transform var(--dur-fast) var(--ease-bounce); }
.ex .option:hover:not(:disabled) .option__emoji .art--3d { transform: scale(1.08) rotate(-4deg); }
.ex .option[aria-pressed='true'] {
  background: var(--clay-tint, var(--clay-reading));
  color: var(--clay-tint-ink, var(--ink));
  box-shadow: var(--clay-pressed), 0 0 0 4px var(--clay-tint-ink, var(--correct));
  transform: none;
}
/* After CHECK the chosen tile keeps aria-pressed, so the verdict must win over
   the "chosen" look — a wrong pick stayed green until this came after it. */
.ex .option[data-state='correct'] { background: var(--correct-soft); color: var(--ink); box-shadow: var(--clay-sm), 0 0 0 4px var(--correct); }
.ex .option[data-state='notyet']  { background: var(--notyet-soft);  color: var(--ink); box-shadow: var(--clay-sm), 0 0 0 4px var(--notyet); }
.ex .option[data-state='answer']  { background: var(--clay-surface); box-shadow: var(--clay-sm); outline: 3px dashed var(--correct); outline-offset: 3px; }
/* The verdict glyph sits on the tile's corner as a small clay badge, so it
   reads as a stamp and never pushes the picture around. */
.ex .option__mark {
  position: absolute;
  top: -10px; right: -10px;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--clay-surface);   /* light on the deep ring colour, either theme */
  box-shadow: var(--clay-sm);
}
.ex .option[data-state='correct'] .option__mark { background: var(--correct); }
.ex .option[data-state='notyet'] .option__mark  { background: var(--notyet); }
.ex .option:disabled { cursor: default; }
.ex .option:disabled:not([data-state]) { opacity: 0.7; }

/* --- what sits above the questions -------------------------------------------------- */

.ex .passage, .ex .article {
  border: 0;
  border-radius: var(--r-clay);
  background: var(--clay-surface);
  box-shadow: var(--clay);
  padding: var(--s-5) var(--s-6);
}
.ex .passage { border-left: 10px solid var(--clay-tint, var(--clay-reading)); }

.ex .audio {
  border: 0;
  border-radius: var(--r-clay);
  background: var(--clay-listening);
  color: var(--clay-listening-ink);
  box-shadow: var(--clay);
  padding: var(--s-4) var(--s-5);
}
.ex .audio__play, .ex .listen-q__play {
  border: 0;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.ex .audio__play:hover, .ex .listen-q__play:hover { transform: scale(1.05); }
.ex .audio__play:active, .ex .listen-q__play:active { box-shadow: var(--clay-pressed); transform: none; }
.ex .listen-q__play[data-playing='true'] { background: var(--clay-listening); }
.ex .listen-q__n { background: var(--clay-listening); color: var(--clay-listening-ink); box-shadow: var(--clay-sm); }

/* --- gap fill -------------------------------------------------------------------------- */

.ex .blank {
  border: 0;
  border-radius: 14px;
  background: var(--clay-surface-2);
  box-shadow: var(--clay-pressed);
}
.ex .blank[data-filled='true'] { background: var(--clay-tint, var(--clay-reading)); color: var(--clay-tint-ink, var(--ink)); box-shadow: var(--clay-sm); }
.ex .blank[aria-expanded='true'] { box-shadow: var(--clay-sm), 0 0 0 3px var(--clay-tint-ink, var(--primary)); }
.ex .blank[data-state='correct'] { background: var(--correct-soft); box-shadow: var(--clay-sm), 0 0 0 3px var(--correct); }
.ex .blank[data-state='notyet']  { background: var(--notyet-soft);  box-shadow: var(--clay-sm), 0 0 0 3px var(--notyet); }
.ex .blank-choices {
  border: 0;
  border-radius: var(--r-clay-sm);
  background: var(--clay-surface);
  box-shadow: var(--clay);
}
.ex .blank-choices button {
  border: 0;
  border-radius: 14px;
  background: var(--clay-surface-2);
  color: var(--ink);
  box-shadow: var(--clay-sm);
}
.ex .blank-choices button:hover { background: var(--clay-tint, var(--clay-reading)); }

/* --- matching -------------------------------------------------------------------------- */

.ex .match { gap: var(--s-5); }
.ex .match__head { color: var(--clay-tint-ink, var(--ink-soft)); font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; }
.ex .match__item {
  border: 0;
  border-radius: var(--r-clay-sm);
  background: var(--clay-surface);
  color: var(--ink);
  box-shadow: var(--clay-sm);
  min-height: 80px;
}
.ex .match__item .option__emoji { font-size: 3.2rem; }
.ex .match__item[aria-pressed='true'] { background: var(--clay-lilac); color: var(--clay-lilac-ink); box-shadow: var(--clay), 0 0 0 4px var(--clay-lilac-ink); }
.ex .match__item[data-linked='true']  { background: var(--clay-tint, var(--clay-reading)); color: var(--clay-tint-ink, var(--ink)); box-shadow: var(--clay-pressed); transform: none; }
.ex .match__item[data-state='correct'] { background: var(--correct-soft); box-shadow: var(--clay-sm), 0 0 0 4px var(--correct); }
.ex .match__item[data-state='notyet']  { background: var(--notyet-soft);  box-shadow: var(--clay-sm), 0 0 0 4px var(--notyet); }
.ex .match__pairnum { box-shadow: var(--clay-sm); }

/* --- type the word, read aloud, speaking ------------------------------------------------ */

.ex .typing__picture {
  width: 120px; height: 120px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 4.4rem;
  border-radius: 34px;
  background: var(--clay-tint, var(--clay-surface-2));
  box-shadow: var(--clay-sm);
}
.ex .typing__input {
  border: 0;
  border-radius: var(--r-clay-sm);
  background: var(--clay-surface-2);
  box-shadow: var(--clay-pressed);
}
.ex .typing__input[data-state='correct'] { background: var(--correct-soft); box-shadow: var(--clay-pressed), 0 0 0 4px var(--correct); }
.ex .typing__input[data-state='notyet']  { background: var(--notyet-soft);  box-shadow: var(--clay-pressed), 0 0 0 4px var(--notyet); }

.ex .readaloud__rate { border-top: 0; padding: var(--s-3); border-radius: var(--r-clay-sm); background: var(--clay-surface-2); box-shadow: var(--clay-pressed); }
.ex .readaloud__rate .btn[aria-pressed='true'] { background: var(--clay-reading); color: var(--clay-reading-ink); box-shadow: var(--clay-pressed); }
.ex .readaloud[data-state='correct'] { box-shadow: var(--clay), 0 0 0 4px var(--correct); }
.ex .readaloud[data-state='notyet']  { box-shadow: var(--clay), 0 0 0 4px var(--notyet); }

.prompt-art {
  width: 112px; height: 112px;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
  font-size: 4rem;
  line-height: 1;
  border-radius: 32px;
  background: var(--clay-tint, var(--clay-surface-2));
  box-shadow: var(--clay-sm);
}
.ex .mic {
  border: 0;
  background: var(--clay-speaking);
  box-shadow: var(--clay);
}
.ex .mic[data-recording='true'] { box-shadow: var(--clay-pressed), 0 0 0 6px var(--clay-speaking-ink); }

/* --- the verdict and the way onwards ------------------------------------------------------- */

.ex .feedback {
  border: 0;
  border-radius: var(--r-clay);
  padding: var(--s-5);
  gap: var(--s-5);
  box-shadow: var(--clay);
}
.ex .feedback--celebrate { background: var(--clay-reading); color: var(--clay-reading-ink); }
.ex .feedback--encourage { background: var(--clay-writing); color: var(--clay-writing-ink); }
.ex .feedback__title { font-size: var(--t-xl); font-weight: 900; color: inherit; }
.ex .feedback__art {
  width: 84px; height: 84px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 3rem;
  border-radius: 26px;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
}
.ex .feedback .row { margin-top: var(--s-3); }
.ex .feedback .chip { color: var(--ink); }

.ex-progress {
  align-self: center;
  margin: 0;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
  font-weight: 800;
  color: var(--ink-soft);
}
.ex-progress:empty { display: none; }
.ex .btn--primary:disabled { opacity: 0.55; }

.ex-onwards { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.ex-onwards > * { flex: 1 1 180px; }
.ex-onwards > span:empty { display: none; }
/* "Next" is the main way on, so it gets the whole first row. */
.ex-onwards > span:not(:empty) { flex-basis: 100%; }
.ex-onwards .btn { width: 100%; white-space: nowrap; }
.ex-onwards > span .btn { white-space: normal; }

@media (max-width: 600px) {
  .ex-head { padding: var(--s-4); gap: var(--s-4); }
  .ex-head__art { width: 68px; height: 68px; font-size: 2.4rem; border-radius: 20px; }
  .ex .options { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .ex .options--wide { grid-template-columns: 1fr; }
  .ex .option { min-height: 96px; }
  .ex .option__emoji { font-size: 3rem; }
  .ex .card[data-question] { padding: var(--s-4); }
  .ex .passage, .ex .article { padding: var(--s-4); }
  .ex .feedback { flex-direction: column; text-align: center; }
  .ex .feedback .row { justify-content: center; }
}

@media print {
  .ex-head, .ex .feedback, .ex .passage { box-shadow: none; }
}

/* =============================================================================
   THE STICKER BOOK in clay (2026-10-07)
   =============================================================================
   Found stickers are puffy tiles with 3D pictures; the places still to fill
   are pressed-in hollows with a "?", so the book reads as a collection with
   gaps rather than a list. The count sits on the corner as a clay badge, like
   the verdict on an answer tile. */

.stickers { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--s-4); }
.sticker {
  position: relative;
  min-height: 150px;
  justify-content: center;
  gap: var(--s-2);
  padding: var(--s-4) var(--s-3);
  border: 0;
  border-radius: var(--r-clay);
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.sticker:hover { transform: translateY(-3px) rotate(-1.5deg); }
.sticker__art { font-size: 3.6rem; line-height: 1; }
.sticker__name { font-weight: 900; font-size: var(--t-sm); color: var(--ink); }
.sticker__count {
  position: absolute;
  top: -10px; right: -10px;
  min-width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--clay-writing);
  color: var(--clay-writing-ink);
  box-shadow: var(--clay-sm);
  font-weight: 900;
  font-size: var(--t-sm);
}
.sticker--empty { background: var(--clay-surface-2); box-shadow: var(--clay-pressed); }
.sticker--empty:hover { transform: none; }
.sticker--empty .sticker__art { font-size: 2.4rem; font-weight: 900; color: var(--ink-soft); opacity: 0.55; }

/* Numbers as a bento row of small clay tiles, each in a skill's clay. */
.stat-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.stat-tile {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--s-4) var(--s-3);
  border-radius: var(--r-clay);
  background: var(--clay-tint, var(--clay-surface));
  color: var(--clay-tint-ink, var(--ink));
  box-shadow: var(--clay-sm);
  text-align: center;
}
.stat-tile__art { font-size: 2.2rem; line-height: 1; margin-bottom: 4px; }
.stat-tile__n { font-size: var(--t-2xl); font-weight: 900; line-height: 1.1; }
.stat-tile__label { font-weight: 700; font-size: var(--t-sm); }

@media (max-width: 600px) {
  .stickers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .sticker { min-height: 132px; }
  .stat-tiles { gap: var(--s-2); }
  .stat-tile { padding: var(--s-3) var(--s-2); }
  .stat-tile__n { font-size: var(--t-xl); }
  .stat-tile__label { font-size: var(--t-xs); }
}

/* =============================================================================
   THE REST OF THE APP in clay (2026-10-07): Me, videos, grown-ups, sign-in
   =============================================================================
   Every screen opens with the same clay heading tile (ui.js pageHead). The
   child's screens take a skill's clay; the grown-ups' take lilac, so a grown-up
   page is recognisable at a glance as "not for playing". */

[data-tint='lilac'] { --clay-tint: var(--clay-lilac); --clay-tint-ink: var(--clay-lilac-ink); }
[data-tint='plain'] { --clay-tint: var(--clay-surface); --clay-tint-ink: var(--ink); }

.page-head { margin-top: var(--s-2); }
.grownup-page, .me-page { max-width: 760px; margin: 0 auto; width: 100%; }

/* Videos take the whole screen on a computer or tablet (owner, 2026-11-06:
   the 760px column left two empty halves on a wide screen). The page and the
   shared .main both let go of their width caps; the grid adds columns. */
.videos-page { width: 100%; }
.main:has(> .videos-page) { max-width: none; padding-inline: clamp(var(--s-4), 3vw, var(--s-8)); }
.videos-page .videos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: var(--s-5); }
.inline-art { display: inline-flex; font-size: 1.6rem; line-height: 1; }

/* The talking characters: a 3D picture on a little clay pad, words in a bubble. */
.speech__who {
  flex-shrink: 0;
  width: 64px; height: 64px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 2.4rem !important;
  border-radius: 22px;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
}
.speech__words { background: var(--clay-surface); box-shadow: var(--clay-sm); font-weight: 600; }

/* --- Me and the avatar pickers --------------------------------------------------- */

.me-avatar { border: 0; border-radius: 26px; background: var(--clay-surface); box-shadow: var(--clay-sm); }
.avatars { gap: var(--s-3); }
.avatar-btn {
  width: 76px; height: 76px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 2.6rem;
  border: 0;
  border-radius: 24px;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.avatar-btn:hover { transform: translateY(-3px) rotate(-3deg); }
.avatar-btn[aria-pressed='true'] {
  background: var(--clay-reading);
  box-shadow: var(--clay-pressed), 0 0 0 4px var(--clay-reading-ink);
  transform: none;
}

.profile-card { min-height: 170px; justify-content: center; gap: var(--s-2); }
.profile-card__art { font-size: 4rem; line-height: 1; }

/* --- sign-in, policy ----------------------------------------------------------------- */

.auth-hero__art {
  width: 108px; height: 108px;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
  font-size: 4rem;
  border-radius: 32px;
  background: var(--clay-surface);
  box-shadow: var(--clay);
}
.auth-hero h1 { margin: var(--s-2) 0 0; }

/* --- videos ---------------------------------------------------------------------------- */

.video-card { border: 0; border-radius: var(--r-clay); background: var(--clay-surface); box-shadow: var(--clay); }
.video-card__poster {
  border: 0;
  border-radius: var(--r-clay-sm);
  background: var(--clay-listening);
  box-shadow: var(--clay-pressed);
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.video-card__poster:not(.video-card__poster--locked):hover { transform: scale(1.02); }
.video-card__poster--locked { background: var(--clay-surface-2); opacity: 1; }
.video-card__poster--locked .video-card__emoji { filter: grayscale(0.7); opacity: 0.6; }
.video-card__emoji { font-size: 5rem; line-height: 1; }
.video-card__play {
  background: var(--clay-surface);
  color: var(--clay-listening-ink);
  box-shadow: var(--clay-sm);
  font-size: 1.3rem;
}
.video-card__frame iframe, .video-card__frame video { border-radius: var(--r-clay-sm); }

/* --- the gate and the PIN pad ---------------------------------------------------------- */

.gate-lock__art {
  width: 100px; height: 100px;
  display: inline-flex; align-items: center; justify-content: center;
  align-self: center;
  font-size: 3.6rem;
  border-radius: 30px;
  background: var(--clay-lilac);
  box-shadow: var(--clay);
}
.pin-dot { border: 0; background: var(--clay-surface-2); box-shadow: var(--clay-pressed); }
.pin-dot[data-full='true'] { background: var(--clay-lilac-ink); box-shadow: var(--clay-sm); }
.pin-key {
  border: 0;
  border-radius: 20px;
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
  font-weight: 900;
  transition: transform var(--dur-fast) var(--ease-bounce);
}
.pin-key:hover { transform: translateY(-2px); }
.pin-key:active { transform: none; box-shadow: var(--clay-pressed); }

/* --- the grown-ups' corner ------------------------------------------------------------- */

.gu-grid { gap: var(--s-4); }
.gu-tile { min-height: 92px; }
/* Not a link: no lift on hover, and its menu opens above the tiles after it. */
.gu-tile--lang { position: relative; z-index: 3; }
.gu-tile--lang:hover { transform: none; }
.gu-tile--lang .langmenu { margin-top: var(--s-2); align-self: flex-start; }
.gu-tile__icon {
  flex-shrink: 0;
  width: 60px; height: 60px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 2.2rem;
  border-radius: 20px;
  background: var(--clay-lilac);
  box-shadow: var(--clay-sm);
}
.gu-tile__title { font-weight: 900; }
.gu-actions { flex-wrap: wrap; }

/* Consent switches and the calmer-animations box: clay rows, a bigger tick. */
.consent-row { background: var(--clay-surface); box-shadow: var(--clay-sm); padding: var(--s-4); gap: var(--s-3); }
.grownup-page input[type='checkbox'] { accent-color: var(--clay-primary); flex-shrink: 0; }

/* --- the progress report ------------------------------------------------------------- */

.grownup-page .stat {
  border: 0;
  border-radius: var(--r-clay-sm);
  background: var(--clay-surface);
  box-shadow: var(--clay-sm);
}
.grownup-page .stat__n { font-weight: 900; }
.grownup-page .admin-grid > .stat:nth-child(1) { background: var(--clay-reading); color: var(--clay-reading-ink); }
.grownup-page .admin-grid > .stat:nth-child(2) { background: var(--clay-listening); color: var(--clay-listening-ink); }
.grownup-page .admin-grid > .stat:nth-child(3) { background: var(--clay-writing); color: var(--clay-writing-ink); }
.grownup-page .admin-grid > .stat:nth-child(4) { background: var(--clay-speaking); color: var(--clay-speaking-ink); }
.grownup-page .admin-grid > .stat .stat__label { color: inherit; }
.grownup-page .spark__bar { border-radius: 8px 8px 3px 3px; background: var(--clay-primary); }
.grownup-page .spark__bar[data-empty='true'] { background: var(--clay-surface-2); box-shadow: var(--clay-pressed); }
.grownup-page .card .ex-head__art { width: 72px; height: 72px; font-size: 2.6rem; }

@media (max-width: 600px) {
  .avatar-btn { width: 64px; height: 64px; font-size: 2.2rem; border-radius: 20px; }
  .speech__who { width: 52px; height: 52px; font-size: 2rem !important; border-radius: 18px; }
  .gu-tile__icon { width: 52px; height: 52px; font-size: 1.9rem; }
  .profile-card { min-height: 140px; }
}

@media print {
  .speech__who, .speech__words, .page-head { box-shadow: none; }
}
.reward-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.reward-chip { gap: 6px; font-weight: 700; }
.reward-chip .inline-art { font-size: 1.3rem; }

/* Each new screen rises in softly (app.js setScreen). Only opacity and
   transform, so nothing reflows; reduced motion makes it instant. */
.main--in { animation: screen-rise 280ms var(--ease-out) both; }
@keyframes screen-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* A teacher's referral code box: the code reads in capitals, the hint does not. */
.code-input { text-transform: uppercase; letter-spacing: 0.12em; }
.code-input::placeholder { text-transform: none; letter-spacing: normal; }