/* ==========================================================================
   Maria Nihongo — design system
   Plain CSS, no build step. Edit colours and spacing in :root below.
   Sections: 1 tokens · 2 reset/base · 3 layout · 4 components · 5 site
             6 dashboard · 7 utilities · 8 responsive
   ========================================================================== */

/* -- 1. Tokens ----------------------------------------------------------- */
:root {
  /* Brand palette: warm cream paper, raspberry-coral for the one thing to
     press, sea-teal for links and calm bits, a golden sun and a leaf green
     for celebrations. Every text/background pair below passes WCAG AA:
     the "deep" shades carry text, the "soft" shades are fills and tints. */
  --paper: #ffffff;          /* page background: white, with pink and blue on it */
  --surface: #ffffff;        /* cards */
  --surface-warm: #fff1f6;   /* pink tint for alternate fills */
  --surface-cool: #edf4ff;   /* blue tint */
  --ink: #332a30;            /* headings and body: warm near-black */
  --soft: #574d55;
  --muted: #6a5f68;
  --faint: #786d76;          /* small hints (AA at 4.5 on white) */
  --line: #f1e4ea;
  --line-strong: #e2cdd8;

  --primary: #2b6cb0;        /* sky blue: links, secondary buttons, calm info */
  --primary-strong: #235a93;
  --primary-mid: #9cc7f0;    /* decorative light blue */
  --primary-soft: #e6f1fc;   /* tint */
  --on-primary: #ffffff;

  --accent: #cf3d66;         /* raspberry pink: the main call to action */
  --accent-strong: #b52f55;
  --accent-mid: #f7a0b8;     /* decorative pink */
  --accent-soft: #ffe7ee;    /* tint */

  --sun: #f2b03d;            /* golden: stars, XP, little celebrations */
  --sun-soft: #fff1d0;
  --leaf: #4f9f69;           /* leaf green: done, growing */
  --leaf-soft: #e3f4e8;

  --success: #2f8a55;
  --success-soft: #e3f4e8;
  --warning: #a86d17;
  --warning-soft: #fff1d6;
  --danger: #c4463f;
  --danger-soft: #fdeae8;

  /* Kept as aliases so older rules keep working */
  --on-accent: #ffffff;

  /* Text in a brand colour (links, labels, numbers). By day the same as the
     colours above, except the green and amber, a shade deeper so small text
     on white and on their soft tints passes AA; at night lighter versions,
     so text stays readable on the dark paper while buttons keep the deeper
     colours under white text. */
  --primary-ink: var(--primary);
  --primary-ink-strong: var(--primary-strong);
  --accent-ink: var(--accent);
  --accent-ink-strong: var(--accent-strong);
  --success-ink: #23704a;
  --warning-ink: #8a5810;
  --danger-ink: var(--danger);
  --leaf-ink: var(--leaf);
  /* Glass: header, tab bar and other see-through panels over the paper. */
  --glass: rgba(255, 255, 255, 0.9);
  --glass-soft: rgba(255, 253, 248, 0.85);
  --hover-tint: rgba(250, 248, 243, 0.8);
  --track: rgba(59, 52, 44, 0.08);            /* empty part of progress bars */
  --switch-off: #a99ca3;

  /* Type: a round, friendly sans for reading, a playful rounded display
     face for titles and the wordmark, and a rounded Japanese face so kana
     look as soft as the rest. */
  /* Japanese is set in the textbook face: イワタ教科書体 when its licensed
     file is in static/fonts/ (see static/fonts/README.md), Klee One (from
     this site, static/css/fonts.css) otherwise. Every stack ends in it, so a kana inside an
     English sentence takes the same face as a word on a game card. */
  --font-textbook: "Iwata Kyokasho", "イワタ教科書体", "イワタ中教科書体", "IwaKyokashoStd",
    "Klee One", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif;
  --font-sans: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, var(--font-textbook);
  --font-display: "Baloo 2", "Nunito", "Arial Rounded MT Bold", var(--font-textbook);
  --font-jp: var(--font-textbook);

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  /* Radii + elevation — softer and rounder than before */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 2px rgba(120, 60, 90, 0.05), 0 12px 30px -14px rgba(120, 60, 90, 0.18);
  --shadow-pop: 0 2px 8px rgba(120, 60, 90, 0.08), 0 20px 46px -14px rgba(120, 60, 90, 0.24);

  --container: 1120px;
  --transition: 150ms ease;
}

/* Night mode (apps/core/theme.py, static/js/theme.js): the same names, night
   colours. A deep plum-black paper, cards a step lighter, near-white text,
   and every brand colour that carries text lightened to stay readable. The
   rest of the night rules are at the end of this file ("Night mode"). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #141016;
  --surface: #1f1a1e;
  --surface-warm: #2a1d24;
  --surface-cool: #19212f;
  --ink: #f4eef2;
  --soft: #ddd3d9;
  --muted: #c4b8bf;
  --faint: #ab9fa7;
  --line: #372c34;
  --line-strong: #4c3e47;

  --primary: #2f6fb4;
  --primary-strong: #285f9b;
  --primary-mid: #4b7fb8;
  --primary-soft: #1a2738;
  --on-primary: #ffffff;

  --accent: #cf3d66;
  --accent-strong: #b52f55;
  --accent-mid: #9b4864;
  --accent-soft: #3a1c28;

  --sun: #f2b03d;
  --sun-soft: #3a2e16;
  --leaf: #5fb57c;
  --leaf-soft: #1a3224;

  --success: #2f8a55;
  --success-soft: #1a3224;
  --warning: #a86d17;
  --warning-soft: #36290f;
  --danger: #c4463f;
  --danger-soft: #3d1d1b;

  --primary-ink: #93c2f5;
  --primary-ink-strong: #b7d7fa;
  --accent-ink: #ff8db0;
  --accent-ink-strong: #ffb1c9;
  --success-ink: #7ed6a0;
  --warning-ink: #f2c06e;
  --danger-ink: #ff9d93;
  --leaf-ink: #8fd3a5;

  --glass: rgba(20, 16, 22, 0.9);
  --glass-soft: rgba(31, 26, 30, 0.9);
  --hover-tint: rgba(255, 255, 255, 0.04);
  --track: rgba(255, 255, 255, 0.13);
  --switch-off: #62555d;

  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.45), 0 12px 30px -14px rgba(0, 0, 0, 0.7);
  --shadow-pop: 0 2px 8px rgba(0, 0, 0, 0.5), 0 20px 46px -14px rgba(0, 0, 0, 0.75);
}

/* -- 2. Reset & base ----------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

/* `hidden` must win. The attribute only sets a default `display: none`, so
   any rule that sets display on the same element (.form-grid, .row, .field--check)
   quietly overrides it — which is how a membership's "How long is the lesson?"
   stayed on screen. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;     /* a tilted frame or a branch poking past the edge must never make the page scroll sideways */
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background-color: var(--paper);
  /* A faint dotted paper, so the page is never a flat slab. */
  background-image: radial-gradient(rgba(207, 61, 102, 0.09) 1px, transparent 1.3px);
  background-size: 22px 22px;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
h3 { font-size: 1.15rem; font-family: var(--font-sans); font-weight: 700; }

p { text-wrap: pretty; }

a { color: var(--primary-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

::selection { background: var(--accent-soft); color: var(--accent-ink-strong); }

.jp { font-family: var(--font-jp); }
/* The games and cards: Japanese in the textbook face even without the .jp class. */
.wordle__tile, .wordle__key, .wordle__tray, .race__prompt, .race__start-kana, .race__reveal,
.fcard__word, .fcard__reading, .sentence__piece, .sentence__solution, .sentence__answer,
.mini-tile, .mini-piece, .mini-race__kana, .mini-kanji, .level__script, .script__sample,
.word-card__japanese, .word-card__reading, .wcard__word, .wcard__reading, .wcard__example-jp,
.wcard-row__word, .book__jp, .hero__kanji, .trail__dot { font-family: var(--font-jp); }
/* Latin bits inside those (romaji under a key) keep their own face. */
.wordle__key-romaji { font-family: var(--font-sans); }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary);
  color: var(--on-primary);
  padding: var(--sp-3) var(--sp-4);
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 100;
}
.skip-link:focus { left: 0; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* -- 3. Layout ----------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}
.container--narrow { max-width: 760px; }
.container--form { max-width: 560px; }

.page { padding-block: var(--sp-7) var(--sp-8); }
.section { padding-block: var(--sp-8); }
/* Tinted bands: pink paper with a blue glow, and a soft wave along the top
   and bottom edges so the page reads as shapes, not stripes. */
.section--tint {
  position: relative;
  background: var(--surface-warm) radial-gradient(55% 90% at 88% 70%, var(--surface-cool) 0%, rgba(237, 244, 255, 0) 70%);
  border-block: 0;
}
.section--tint::before, .section--tint::after {
  content: ""; position: absolute; left: 0; right: 0; height: 26px; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C 150 0, 300 0, 450 13 S 750 26, 900 13 S 1100 0, 1200 8 L 1200 26 Z' fill='%23fff1f6'/%3E%3C/svg%3E") repeat-x center / 1200px 26px;
}
.section--tint::before { top: -25px; }
.section--tint::after { bottom: -25px; transform: scaleY(-1); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.grid { display: grid; gap: var(--sp-5); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: 1.4fr 1fr; }

.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }

/* -- 4. Components ------------------------------------------------------- */

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.7rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-size: 0.95rem;
  font-weight: 700;
  text-align: center;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.14);
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover { background: var(--primary-strong); text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.14); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.btn--accent { background: var(--accent); }
.btn--accent:hover { background: var(--accent-strong); }

.btn--secondary {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: inset 0 -3px 0 rgba(120, 70, 40, 0.08);
}
.btn--secondary:hover { background: var(--surface); border-color: var(--accent-mid); color: var(--accent-ink); }

.btn--ghost { background: transparent; color: var(--soft); box-shadow: none; }
.btn--ghost:hover { background: var(--accent-soft); color: var(--accent-ink); }

.btn--danger { background: var(--danger); }
.btn--danger:hover { background: #9c3633; }

.btn--quiet-danger { background: transparent; color: var(--danger-ink); border-color: transparent; box-shadow: none; }
.btn--quiet-danger:hover { background: var(--danger-soft); color: var(--danger-ink); }

.btn--sm { padding: 0.4rem 0.9rem; font-size: 0.85rem; }
.btn--lg { padding: 0.85rem 1.9rem; font-size: 1.05rem; }
.btn--block { width: 100%; }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card--flat { box-shadow: none; }
.card--tint { background: linear-gradient(160deg, var(--sun-soft) 0%, var(--accent-soft) 100%); border-color: var(--accent-mid); }
.card--hover { transition: box-shadow var(--transition), transform var(--transition); }
.card--hover:hover { box-shadow: var(--shadow-pop); }
.card--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-card); }

.card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) 0;
}
.card__title { font-family: var(--font-sans); font-size: 1rem; font-weight: 600; }
.card__subtitle { color: var(--muted); font-size: 0.875rem; margin-top: 2px; }
.card__body { padding: var(--sp-5); }
.card__footer { padding: 0 var(--sp-5) var(--sp-5); }

/* Badges */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--paper);
  color: var(--soft);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}
.badge--primary { background: var(--primary-soft); color: var(--primary-ink-strong); border-color: rgba(46,74,135,.2); }
.badge--accent { background: var(--accent-soft); color: var(--accent-ink-strong); border-color: rgba(212,99,59,.25); }
.badge--success { background: var(--success-soft); color: var(--success-ink); border-color: rgba(62,123,79,.25); }
.badge--warning { background: var(--warning-soft); color: var(--warning-ink); border-color: rgba(168,114,42,.25); }
.badge--danger { background: var(--danger-soft); color: var(--danger-ink); border-color: rgba(178,63,60,.25); }

/* Alerts / messages */
.alert {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.925rem;
}
.alert + .alert { margin-top: var(--sp-3); }
.alert--success { background: var(--success-soft); border-color: rgba(62,123,79,.3); color: #2f5f3d; }
/* "Forgot your password?": the note for the old website's students, and the tips after sending. */
.auth-note { padding: var(--sp-3) var(--sp-4); background: var(--sun-soft); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
.auth-note p { margin: 0; }
.auth-note p + p { margin-top: 0.2rem; }
.auth-tips { margin-bottom: 0; padding-left: 1.15rem; display: grid; gap: 0.4rem; }
.alert--info { background: var(--primary-soft); border-color: rgba(46,74,135,.25); color: var(--primary-ink-strong); }
.alert--warning { background: var(--warning-soft); border-color: rgba(168,114,42,.3); color: #7d5520; }
.alert--error, .alert--danger { background: var(--danger-soft); border-color: rgba(178,63,60,.3); color: #8e3230; }
.alert__title { font-weight: 600; display: block; margin-bottom: 2px; }

/* Forms */
.field { display: block; }
.field + .field { margin-top: var(--sp-4); }
.field__label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--soft);
  margin-bottom: var(--sp-2);
}
.field__input {
  width: 100%;
  padding: 0.65rem 0.95rem;
  border: 1.5px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  font-size: 0.95rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.field__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.field__input--textarea { min-height: 6rem; resize: vertical; }
/* Boxes that grow as you write (static/js/autogrow.js), up to here; then they scroll. */
.field__input--textarea[data-autogrow] { max-height: min(30rem, 65vh); overflow-y: auto; }
.field__select { appearance: none; background-image: none; padding-right: 2rem; }
.field__checkbox { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }
.field__hint { color: var(--faint); font-size: 0.8rem; margin-top: var(--sp-1); }
.field__error { color: var(--danger-ink); font-size: 0.85rem; margin-top: var(--sp-1); }
.field--check { display: flex; align-items: center; gap: var(--sp-2); }
.field--check .field__label { margin: 0; font-weight: 400; }
.form-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid .field { margin-top: 0; }
.form-grid + .field, .field + .form-grid { margin-top: var(--sp-4); }
.form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.form-actions { margin-top: var(--sp-5); display: flex; gap: var(--sp-3); flex-wrap: wrap; }

/* Tables */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.925rem; }
.table th {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  color: var(--faint);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: rgba(250, 248, 243, 0.8); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Lists */
.list { list-style: none; padding: 0; }
.list > li { padding-block: var(--sp-3); border-bottom: 1px solid var(--line); }
.list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.list > li:first-child { padding-top: 0; }
.list__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; justify-content: space-between; }

/* Stat tiles */
.stat { padding: var(--sp-4) var(--sp-5); }
.stat__label { color: var(--muted); font-size: 0.85rem; }
.stat__value { font-size: 1.75rem; font-weight: 600; font-variant-numeric: tabular-nums; margin-top: 2px; }
.stat__hint { color: var(--faint); font-size: 0.75rem; }

/* Empty states */
.empty { text-align: center; padding: var(--sp-7) var(--sp-5); }
.empty__mark {
  width: 3rem; height: 3rem;
  margin: 0 auto var(--sp-4);
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-family: var(--font-jp);
}
.empty__title { font-weight: 600; }
.empty__body { color: var(--muted); font-size: 0.925rem; max-width: 34ch; margin: var(--sp-2) auto 0; }
.empty__action { margin-top: var(--sp-5); }

/* Dialogs (native <dialog>) */
dialog {
  /* The reset above zeroes every margin — including the `margin: auto` the
     browser uses to centre a modal dialog. Put it back, or every dialog
     sits in the top-left corner. */
  position: fixed;
  inset: 0;
  margin: auto;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  width: min(30rem, calc(100vw - 2rem));
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-pop);
}
dialog::backdrop { background: rgba(38, 34, 29, 0.35); }
dialog h2 { font-size: 1.25rem; }
.dialog__body { color: var(--muted); font-size: 0.925rem; margin-top: var(--sp-2); }
.dialog__actions { display: flex; justify-content: flex-end; gap: var(--sp-3); margin-top: var(--sp-5); }

/* Details / accordion */
.accordion { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.accordion details { border-bottom: 1px solid var(--line); }
.accordion details:last-child { border-bottom: 0; }
.accordion summary {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  align-items: center;
  padding: var(--sp-4) var(--sp-5);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: "+"; color: var(--faint); transition: transform var(--transition); }
.accordion details[open] summary::after { transform: rotate(45deg); }
.accordion details[open] { background: rgba(237, 241, 248, 0.45); }
.accordion__answer { padding: 0 var(--sp-5) var(--sp-4); color: var(--muted); white-space: pre-line; }

/* Choice chips (booking) */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  padding: 0.45rem 1rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--soft);
  font-size: 0.9rem;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.chip:hover { border-color: var(--primary); color: var(--primary-ink); }
.chip[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.day-strip { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); }
.day {
  flex: 0 0 auto;
  min-width: 4.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--soft);
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.day:hover { border-color: var(--primary); color: var(--primary-ink); }
.day[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.day__weekday { font-size: 0.75rem; opacity: 0.8; }
.day__date { font-weight: 600; white-space: nowrap; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.25rem, 1fr)); gap: var(--sp-2); }
.slot {
  padding: 0.55rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--soft);
  font-variant-numeric: tabular-nums;
  transition: border-color var(--transition), background var(--transition), color var(--transition);
}
.slot:hover { border-color: var(--primary); color: var(--primary-ink); }
.slot[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

.step { margin-top: var(--sp-6); }
.step__title { font-size: 0.9rem; font-weight: 600; margin-bottom: var(--sp-3); }
.step__hint { color: var(--faint); font-size: 0.8rem; margin: calc(-1 * var(--sp-2)) 0 var(--sp-3); }

/* Tabs */
.tabs { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.tab {
  padding: 0.35rem 0.95rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--soft);
  font-size: 0.9rem;
}
.tab:hover { border-color: var(--primary); color: var(--primary-ink); text-decoration: none; }
.tab[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* -- 5. Public site ------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 4rem;
}

.logo { display: inline-flex; align-items: center; gap: var(--sp-3); }
.logo:hover { text-decoration: none; }
.logo__mark {
  /* The bunny: Maria's round logo (static/img/logo.webp, made by scripts/make_icons.py). */
  width: 2.75rem; height: 2.75rem; flex: none;
  display: block; border-radius: 50%;
  box-shadow: 0 3px 0 rgba(181, 47, 85, 0.22);
  transition: transform var(--transition);
}
.logo:hover .logo__mark { transform: rotate(-8deg) scale(1.06); }
.logo__text {
  font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.02em;
  color: var(--ink); white-space: nowrap; line-height: 1;
}
.logo__text span { color: var(--accent-ink); }

.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav__link {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  color: var(--soft);
  font-size: 0.925rem;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.nav__link:hover { background: var(--accent-soft); color: var(--accent-ink-strong); text-decoration: none; }
.nav__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink-strong); font-weight: 700; }
.header-actions { display: flex; align-items: center; gap: var(--sp-2); }

.nav-toggle {
  display: none;
  width: 2.5rem; height: 2.5rem;
  border: 0; background: transparent; border-radius: var(--radius-pill);
  padding: 0;
}
.nav-toggle:hover { background: var(--primary-soft); }
.nav-toggle__bar {
  display: block; width: 1.25rem; height: 2px; margin: 4px auto;
  background: var(--ink); border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.mobile-nav { display: none; border-top: 1px solid var(--line); background: var(--surface); }
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav__list { list-style: none; padding: var(--sp-3) 0; margin: 0; }
.mobile-nav__list a {
  display: block; padding: 0.7rem var(--sp-5); color: var(--ink);
}
.mobile-nav__list a:hover { background: var(--primary-soft); color: var(--primary-ink); text-decoration: none; }
.mobile-nav__actions { display: grid; gap: var(--sp-2); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--line); }

/* Hero */
.hero { position: relative; overflow: hidden; }
.hero__inner {
  display: grid;
  gap: var(--sp-7);
  align-items: center;
  grid-template-columns: 1.05fr 0.95fr;
  padding-block: var(--sp-8) var(--sp-9);
}
.hero__kanji {
  position: absolute;
  top: var(--sp-6); right: -0.5rem;
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: 11rem;
  line-height: 1;
  color: rgba(207, 61, 102, 0.07);
  pointer-events: none;
  user-select: none;
}
.hero { background: radial-gradient(60% 70% at 85% 15%, var(--surface-cool) 0%, transparent 60%), radial-gradient(50% 60% at 10% 85%, var(--accent-soft) 0%, transparent 60%); }
.eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--accent-mid);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--accent-ink-strong);
  font-size: 0.875rem; font-weight: 700;
  box-shadow: var(--shadow-card);
}
.eyebrow__dot { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--accent); }
.hero__lead { font-size: 1.125rem; color: var(--muted); margin-top: var(--sp-5); max-width: 34rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.hero__note { color: var(--faint); font-size: 0.875rem; margin-top: var(--sp-4); }

.preview { position: relative; max-width: 24rem; margin-inline: auto; }
.preview__glow {
  position: absolute; inset: -0.75rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--sun-soft), transparent 55%, var(--accent-soft));
}
.preview .card { position: relative; box-shadow: var(--shadow-pop); }
.vocab-row {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3);
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.vocab-row + .vocab-row { margin-top: var(--sp-2); }
.vocab-row__reading { color: var(--faint); font-size: 0.85rem; }
.vocab-row__meaning { color: var(--muted); font-size: 0.875rem; }

.section-heading { max-width: 44rem; }
.section-heading--center { margin-inline: auto; text-align: center; }
.section-heading__eyebrow {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-ink-strong);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}
.section-heading__sub { color: var(--muted); margin-top: var(--sp-4); }

.metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-5); padding-block: var(--sp-6); }
.metric { text-align: center; }
.metric__value { font-family: var(--font-display); font-size: 2.3rem; font-weight: 800; color: var(--accent-ink); letter-spacing: -0.02em; }
.metric__label { color: var(--muted); font-size: 0.875rem; }

.feature__mark {
  width: 2.6rem; height: 2.6rem;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--sun-soft);
  font-size: 1.3rem; line-height: 1;
  margin-bottom: var(--sp-4);
}
.feature__body { color: var(--muted); font-size: 0.925rem; margin-top: var(--sp-2); }

.price { display: flex; align-items: baseline; gap: var(--sp-2); margin-top: var(--sp-4); }
.price__amount { font-family: var(--font-display); font-size: 2.2rem; font-weight: 800; color: var(--accent-ink-strong); letter-spacing: -0.02em; }
.price__unit { color: var(--faint); font-size: 0.875rem; }
.product-card { display: flex; flex-direction: column; height: 100%; position: relative; }
.card--featured { background: linear-gradient(180deg, var(--accent-soft) 0%, var(--surface) 30%); }
.product-card .card__body { display: flex; flex-direction: column; flex: 1; }
.product-card__spacer { margin-top: auto; padding-top: var(--sp-5); }
.product-card__ribbon { position: absolute; top: -0.7rem; left: var(--sp-5); }
.meta-list { list-style: none; padding: 0; margin-top: var(--sp-4); font-size: 0.9rem; }
.meta-list li { display: flex; justify-content: space-between; gap: var(--sp-3); padding-block: 2px; }
.meta-list dt, .meta-list__key { color: var(--muted); }

.steps { list-style: none; padding: 0; counter-reset: step; max-width: 46rem; }
.steps li { display: flex; gap: var(--sp-5); }
.steps li + li { margin-top: var(--sp-5); }
.step__number {
  flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-display);
}
.step__body { color: var(--muted); font-size: 0.925rem; margin-top: var(--sp-1); }

.quote__mark { color: var(--accent-ink); font-family: var(--font-jp); font-size: 1.15rem; }
.quote__text { color: var(--soft); font-size: 0.95rem; font-style: normal; }
.quote__footer { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.avatar {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-ink);
  font-weight: 600;
}
.quote__name { font-size: 0.925rem; font-weight: 500; }
.quote__meta { color: var(--faint); font-size: 0.8rem; }
.stars { color: var(--accent-ink); letter-spacing: 0.1em; font-size: 0.9rem; }
.stars__empty { color: var(--line-strong); }

.portrait { position: relative; max-width: 26rem; margin-inline: auto; }
.portrait__frame {
  position: absolute; inset: -0.75rem;
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  transform: rotate(2deg);
}
.portrait__inner {
  position: relative;
  aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, var(--primary-soft), var(--paper));
  text-align: center;
}
.portrait__jp { font-family: var(--font-display); font-size: 3.5rem; color: rgba(46, 74, 135, 0.55); }
.portrait__caption { color: var(--faint); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; margin-top: var(--sp-3); }

.cta-band { background: var(--primary); color: var(--on-primary); border-top: 1px solid var(--line); }
.cta-band h2 { color: var(--on-primary); }
.cta-band p { color: rgba(255, 255, 255, 0.94); max-width: 40rem; margin-inline: auto; margin-top: var(--sp-4); }
.cta-band__inner { text-align: center; padding-block: var(--sp-8); }
.cta-band__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.btn--on-dark { background: rgba(255,255,255,0.07); color: #fff; border-color: rgba(255,255,255,0.45); }
.btn--on-dark:hover { background: rgba(0,0,0,0.12); border-color: rgba(255,255,255,0.7); }

/* See-through, so Fuji and the pond stay in view behind it at the bottom of a page. */
.site-footer { background: linear-gradient(180deg, rgba(255, 241, 246, 0.72) 0%, rgba(255, 255, 255, 0.4) 45%); border-top: 1px solid var(--line); }
.site-footer__inner { padding-block: var(--sp-7); }
.footer-grid { display: grid; gap: var(--sp-6); grid-template-columns: 1.4fr repeat(3, 1fr); }
.footer-col__title { font-family: var(--font-display); font-size: 1rem; font-weight: 700; margin-bottom: var(--sp-3); }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.footer-col a { color: var(--muted); font-size: 0.9rem; }
.footer-col a:hover { color: var(--primary-ink); }
.site-footer__blurb { color: var(--muted); font-size: 0.9rem; margin-top: var(--sp-4); max-width: 22rem; }
.site-footer__bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--sp-3);
  border-top: 1px solid var(--line);
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  color: var(--faint);
  font-size: 0.78rem;
}

.legal-section + .legal-section { margin-top: var(--sp-6); }
.legal-section p { color: var(--muted); font-size: 0.95rem; margin-top: var(--sp-2); }

/* The legal pages (templates/legal/<language>/<page>.html) */
.legal__updated { margin-top: var(--sp-2); color: var(--muted); font-size: 0.85rem; }
.legal__body { color: var(--soft); line-height: 1.7; }
.legal__body h2 { margin-top: var(--sp-7); font-size: 1.3rem; }
.legal__body h3 { margin-top: var(--sp-5); font-size: 1.05rem; }
.legal__body p, .legal__body ul, .legal__body blockquote, .legal__body .legal-table-wrap { margin-top: var(--sp-3); }
.legal__body ul { padding-left: 1.25rem; }
.legal__body li + li { margin-top: var(--sp-2); }
.legal__body strong { color: var(--ink); }
.legal__body a { text-decoration: underline; text-underline-offset: 2px; }
.legal-lead { font-size: 1.05rem; color: var(--ink); }
.legal-summary {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--accent-mid);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
}
.legal-summary__title { font-weight: 800; color: var(--ink); }
.legal-summary ul { margin-top: var(--sp-2); }
.legal-facts { list-style: none; padding-left: 0 !important; }
.legal-facts li + li { margin-top: var(--sp-1); }
.legal-form {
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--primary-mid);
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  font-size: 0.95rem;
}
.legal-table-wrap { overflow-x: auto; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.legal-table th, .legal-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-table th { color: var(--ink); font-weight: 700; }
.legal__others { padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.legal__others ul { list-style: none; padding: 0; margin-top: var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); font-size: 0.92rem; }

.prose { color: var(--soft); white-space: pre-line; }
.prose--muted { color: var(--muted); }

/* -- 6. Dashboard shell -------------------------------------------------- */
.app { min-height: 100dvh; display: grid; grid-template-columns: 240px 1fr; }
.app__sidebar {
  display: flex; flex-direction: column;
  padding: var(--sp-5) var(--sp-4);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-warm) 100%);
  border-right: 1px solid var(--line);
}
.app__nav { display: grid; gap: 2px; margin-top: var(--sp-6); }
.app__nav-link {
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--soft);
  font-size: 0.925rem;
}
.app__nav-link:hover { background: var(--paper); color: var(--ink); text-decoration: none; }
.app__nav-link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-ink-strong); font-weight: 700; }
.app__sidebar-footer { margin-top: auto; padding-top: var(--sp-5); border-top: 1px solid var(--line); display: grid; gap: var(--sp-3); }
.app__account { color: var(--faint); font-size: 0.75rem; overflow-wrap: anywhere; }
.app__main { min-width: 0; padding: var(--sp-6) var(--sp-6) var(--sp-8); }
.app__topbar { display: none; }

.page-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.page-head h1 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }

.next-lesson__when { font-size: 1.05rem; margin-top: var(--sp-3); }
.next-lesson__zone { color: var(--muted); font-size: 0.875rem; }
.credit-figure { font-size: 2.4rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.credit-figure small { font-size: 0.9rem; font-weight: 400; color: var(--muted); margin-left: var(--sp-2); }

.note-block { background: rgba(237, 241, 248, 0.5); border-radius: var(--radius); padding: var(--sp-4); margin-top: var(--sp-3); }
.note-block__label { color: var(--primary-ink); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.note-block__label--accent { color: var(--accent-ink-strong); }
.note-block p { color: var(--soft); font-size: 0.925rem; margin-top: var(--sp-2); white-space: pre-line; }

.private-note { background: var(--warning-soft); border: 1px dashed rgba(168,114,42,.4); border-radius: var(--radius); padding: var(--sp-4); }

.timeline { list-style: none; padding: 0; }
.timeline li { display: flex; gap: var(--sp-4); padding-block: var(--sp-3); border-bottom: 1px solid var(--line); }
.timeline li:last-child { border-bottom: 0; }
.timeline__when { color: var(--faint); font-size: 0.8rem; flex: 0 0 5.5rem; }
.timeline__text { font-size: 0.9rem; color: var(--soft); }

.filters { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; margin-bottom: var(--sp-4); }
.filters .field { margin-top: 0; }
.search-field { min-width: 16rem; }

.settings-section + .settings-section { margin-top: var(--sp-5); }

/* Staff → a lesson → Changes & charges */
.charge-box { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.charge-box details > summary { display: inline-flex; list-style: none; cursor: pointer; }
.charge-box details > summary::-webkit-details-marker { display: none; }

/* Staff → Settings → Google: the homepage as it shows in search results */
.serp-preview {
  max-width: 38rem;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
}
.serp-preview__site { display: flex; align-items: center; gap: 10px; }
.serp-preview__site img { width: 26px; height: 26px; padding: 4px; border: 1px solid #dadce0; border-radius: 50%; background: #fff; }
.serp-preview__site > span { display: grid; line-height: 1.3; }
.serp-preview__name { font-size: 14px; color: #202124; }
.serp-preview__url { font-size: 12px; color: #4d5156; }
.serp-preview__title { margin-top: 8px; font-size: 20px; line-height: 1.3; color: #1a0dab; overflow-wrap: anywhere; }
.serp-preview__desc { margin-top: 4px; font-size: 14px; line-height: 1.58; color: #4d5156; overflow-wrap: anywhere; }

/* -- 7. Utilities -------------------------------------------------------- */
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.78rem; }
.bold { font-weight: 600; }
.center { text-align: center; }
.right { text-align: right; }
.nums { font-variant-numeric: tabular-nums; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--sp-1); }
.mt-2 { margin-top: var(--sp-2); }
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mt-7 { margin-top: var(--sp-7); }
.mb-3 { margin-bottom: var(--sp-3); }
.mb-4 { margin-bottom: var(--sp-4); }
.mb-5 { margin-bottom: var(--sp-5); }
.flex-1 { flex: 1; }
.hide { display: none !important; }
.reveal { animation: rise-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.reveal--delayed { animation-delay: 120ms; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.spinner {
  display: inline-block;
  width: 0.85rem; height: 0.85rem;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* -- 8. Responsive ------------------------------------------------------- */
@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }
  .app__sidebar { display: none; }
  .app__topbar {
    display: block;
    position: sticky; top: 0; z-index: 40;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .app__topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 3.5rem; }
  .app__topbar-nav { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); }
  .app__topbar-nav a {
    flex: 0 0 auto;
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-pill);
    font-size: 0.875rem;
    color: var(--soft);
  }
  .app__topbar-nav a[aria-current="page"] { background: var(--primary-soft); color: var(--primary-ink); font-weight: 500; }
  .app__main { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
  .grid--sidebar, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero__kanji { display: none; }
}

@media (max-width: 1000px) {
  .nav, .header-actions { display: none; }
  .nav-toggle { display: block; }
}
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; padding-block: var(--sp-6) var(--sp-7); }
  .preview { order: -1; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
}

@media (max-width: 640px) {
  .container { padding-inline: var(--sp-4); }
  .grid--2, .grid--3, .grid--4, .grid--sidebar { grid-template-columns: 1fr; }
  .form-grid, .form-grid--3 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .section { padding-block: var(--sp-7); }
  .card__header, .card__body { padding-inline: var(--sp-4); }
  .slots { grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr)); }
  .slot, .day { min-height: 2.75rem; }  /* comfortable tap targets */
  .btn { padding: 0.7rem 1.3rem; }
  .timeline li { flex-direction: column; gap: var(--sp-1); }
  .timeline__when { flex: none; }
}

@media print {
  .site-header, .site-footer, .app__sidebar, .btn { display: none !important; }
}

/* ==========================================================================
   9. Additions: dropdown nav, credit badge, XP, homework, chat, carousels
   ========================================================================== */

/* -- Header: credits pill + dropdown ------------------------------------- */
.credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-ink-strong);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
}
.credit-pill:hover { text-decoration: none; border-color: var(--accent-mid); }
.credit-pill__count { font-variant-numeric: tabular-nums; }
.credit-pill--empty { background: var(--surface-warm); color: var(--muted); }

.menu { position: relative; }
.menu__button {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 0.5rem 0.85rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--soft);
  font-size: 0.925rem;
}
.menu__button:hover, .menu:hover .menu__button, .menu__button[aria-expanded="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink-strong);
}
.menu__chevron { font-size: 0.7em; transition: transform var(--transition); }
.menu:hover .menu__chevron, .menu__button[aria-expanded="true"] .menu__chevron { transform: rotate(180deg); }

.menu__panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  right: 0;
  min-width: 12.5rem;
  padding: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
  z-index: 60;
}
/* Opens on hover, on keyboard focus, and on click (JS sets aria-expanded). */
.menu:hover .menu__panel,
.menu:focus-within .menu__panel,
.menu__button[aria-expanded="true"] + .menu__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.menu__panel a {
  display: block;
  padding: 0.5rem 0.7rem;
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 0.9rem;
}
.menu__panel a:hover { background: var(--primary-soft); color: var(--primary-ink); text-decoration: none; }
.menu__divider { height: 1px; margin: var(--sp-2) 0; background: var(--line); }

/* -- XP / level card ----------------------------------------------------- */
.level-card {
  background: linear-gradient(135deg, var(--primary-soft), var(--accent-soft) 120%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
}
.level-head { display: flex; align-items: center; gap: var(--sp-4); }
.level-badge {
  position: relative;
  flex: 0 0 auto;
  width: 3.5rem; height: 3.5rem;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 2px solid var(--accent-mid);
  box-shadow: 0 4px 12px -6px rgba(59, 52, 44, 0.25);
  font-size: 1.6rem;
  line-height: 1;
}
.level-badge__number {
  position: absolute; bottom: -0.35rem; right: -0.35rem;
  min-width: 1.5rem; height: 1.5rem;
  display: grid; place-items: center;
  padding: 0 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
}
.level-title { font-size: 1.05rem; font-weight: 700; }
.level-subtitle { color: var(--muted); font-size: 0.85rem; }

.xp-track {
  position: relative;
  height: 0.85rem;
  margin-top: var(--sp-4);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line-strong);
  overflow: hidden;
}
.xp-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--primary-mid), var(--accent-mid));
  width: 0;
  animation: xp-grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.xp-fill::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
  animation: xp-shine 2.6s ease-in-out infinite;
}
@keyframes xp-grow { from { width: 0; } to { width: var(--xp-percent, 0%); } }
@keyframes xp-shine { 0%,100% { transform: translateX(-100%); } 50% { transform: translateX(100%); } }
.xp-legend { display: flex; justify-content: space-between; margin-top: var(--sp-2); font-size: 0.78rem; color: var(--muted); }
.xp-legend strong { color: var(--ink); font-variant-numeric: tabular-nums; }

.level-up {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px dashed var(--accent-mid);
  font-size: 0.9rem;
  animation: pop-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes pop-in { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }

.sparkle { display: inline-block; animation: sparkle 1.8s ease-in-out infinite; }
@keyframes sparkle {
  0%, 100% { transform: scale(1) rotate(0); }
  40% { transform: scale(1.18) rotate(-8deg); }
  70% { transform: scale(0.96) rotate(6deg); }
}

.streak-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-4); }
.streak-chip {
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: 0.78rem;
  color: var(--soft);
}

/* -- Cute checkbox (homework) -------------------------------------------- */
.done-toggle { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.done-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.done-toggle__box {
  width: 1.6rem; height: 1.6rem;
  display: grid; place-items: center;
  border-radius: 9px;
  border: 2px solid var(--line-strong);
  background: var(--surface);
  color: transparent;
  font-size: 0.95rem;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.done-toggle:hover .done-toggle__box { border-color: var(--accent-mid); }
.done-toggle input:focus-visible + .done-toggle__box { outline: 2px solid var(--primary); outline-offset: 2px; }
.done-toggle input:checked + .done-toggle__box {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ink-strong);
  animation: check-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes check-pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }
.done-toggle__label { font-size: 0.9rem; color: var(--soft); }

.homework-card { border-left: 4px solid var(--primary-mid); }
.homework-card--done { border-left-color: var(--success); opacity: 0.82; }
.homework-card--overdue { border-left-color: var(--danger); }
.homework-title { font-weight: 700; }
.homework-card--done .homework-title { text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* -- Live chat ----------------------------------------------------------- */
.chat {
  display: flex;
  flex-direction: column;
  height: min(68vh, 34rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.chat__stream {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: linear-gradient(var(--surface), var(--paper));
}
.bubble { max-width: 78%; padding: 0.6rem 0.9rem; border-radius: var(--radius); font-size: 0.925rem; }
.bubble--them { align-self: flex-start; background: var(--primary-soft); color: var(--ink); border-bottom-left-radius: 6px; }
.bubble--me { align-self: flex-end; background: var(--accent-soft); color: var(--ink); border-bottom-right-radius: 6px; }
.bubble__meta { display: block; margin-top: 0.25rem; font-size: 0.7rem; color: var(--faint); }
.bubble__body { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat__form { display: flex; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--line); background: var(--surface); }
.chat__form textarea { flex: 1; min-height: 2.6rem; max-height: 14rem; resize: vertical; overflow-y: auto; }
.chat__status { padding: 0 var(--sp-4) var(--sp-2); font-size: 0.75rem; color: var(--faint); }
.chat-day { align-self: center; font-size: 0.72rem; color: var(--faint); background: var(--surface-warm); padding: 0.15rem 0.7rem; border-radius: var(--radius-pill); }

.inbox-item { display: flex; gap: var(--sp-3); align-items: center; }
.inbox-item__dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }
.unread-count {
  display: inline-grid; place-items: center;
  min-width: 1.2rem; height: 1.2rem; padding: 0 0.3rem;
  border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
  font-size: 0.7rem; font-weight: 700;
}

/* -- Homepage reels: Instagram pictures and YouTube videos ---------------- */
/* templates/site/home.html, static/js/reel.js. Their own names: the word
   game's level carousel (.carousel) is a different thing and once squeezed
   these into a narrow strip in the middle. */
.reel { margin-top: var(--sp-7); }
.reel__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3) var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.reel__title { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.reel__title .social-icon { width: 2.6rem; height: 2.6rem; border-radius: var(--radius); flex: none; }
.reel__name { margin: 0; font-size: 1.2rem; line-height: 1.2; }
.reel__sub { margin: 0.15rem 0 0; font-size: 0.85rem; color: var(--muted); }
.reel__tools { display: flex; align-items: center; gap: var(--sp-3); }
.reel__follow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  min-height: 2.5rem; padding: 0.35rem 1.05rem;
  border-radius: var(--radius-pill);
  font-size: 0.9rem; font-weight: 700; line-height: 1;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.reel__follow:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-pop); }
.reel__follow--yt { background: #c8151f; color: #fff; }
.reel__follow--yt:hover { background: #ad121b; }
.reel__follow--ig { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); }
.reel__follow--ig:hover { border-color: var(--accent-mid); color: var(--accent-ink); }
.reel__nav { display: flex; gap: var(--sp-2); }
.reel__nav[hidden] { display: none; }
.reel__btn {
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--surface); color: var(--ink);
  font-size: 1.35rem; line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition), opacity var(--transition);
}
.reel__btn:hover:not(:disabled) { border-color: var(--accent-mid); color: var(--accent-ink); }
.reel__btn:disabled { opacity: 0.35; cursor: default; }
.reel__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Three videos (four pictures) in view on a computer; the rest a swipe away. */
.reel__track {
  list-style: none; margin: 0;
  padding: var(--sp-2) 2px var(--sp-5);
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--sp-5)) / 3);
  gap: var(--sp-5);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
}
.reel__track::-webkit-scrollbar { display: none; }
.reel__item { min-width: 0; scroll-snap-align: start; }
.reel--pictures .reel__track { grid-auto-columns: calc((100% - 3 * var(--sp-4)) / 4); gap: var(--sp-4); }
/* Just a few: no scrolling, side by side in the middle. */
.reel--few .reel__track {
  grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 22rem));
  justify-content: center;
  overflow: visible;
}
.reel--pictures.reel--few .reel__track { grid-template-columns: repeat(auto-fit, minmax(10rem, 15rem)); }

/* A video card: the thumbnail at 16:9 (YouTube's picture is 4:3 with black
   bands, which this crops away), a play button, the title and the day. */
.vtile {
  display: flex; flex-direction: column; height: 100%;
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface); color: var(--ink);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.vtile:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--line-strong); text-decoration: none; }
.vtile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.vtile__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #1b1418; }
.vtile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.vtile:hover .vtile__media img { transform: scale(1.04); }
.vtile__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(20, 12, 18, 0.16)); }
.vtile__play {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: 3.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: 0.85rem;
  background: rgba(20, 16, 22, 0.72); color: #fff;
  transform: translate(-50%, -50%);
  transition: background 0.2s ease, transform 0.2s ease;
}
.vtile__play svg { width: 1.35rem; height: 1.35rem; }
.vtile:hover .vtile__play, .vtile:focus-visible .vtile__play { background: #c8151f; transform: translate(-50%, -50%) scale(1.08); }
.vtile__new {
  position: absolute; top: 0.65rem; left: 0.65rem; z-index: 1;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
}
.vtile__body { display: grid; gap: 0.35rem; padding: var(--sp-3) var(--sp-4) var(--sp-4); }
.vtile__title {
  font-weight: 700; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vtile__meta { font-size: 0.8rem; color: var(--muted); }

/* A picture: square, the caption on a shade at the bottom. */
.ptile {
  position: relative; display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-warm);
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ptile:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.ptile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.ptile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s ease; }
.ptile:hover img { transform: scale(1.05); }
.ptile__caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--sp-6) var(--sp-3) var(--sp-3);
  background: linear-gradient(180deg, transparent, rgba(16, 10, 14, 0.78));
  color: #fff; font-size: 0.82rem; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ptile:hover .ptile__caption, .ptile:focus-visible .ptile__caption { opacity: 1; transform: none; }
@media (hover: none) { .ptile__caption { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .reel__track { grid-auto-columns: calc((100% - var(--sp-4)) / 2.15); gap: var(--sp-4); }
  .reel--pictures .reel__track { grid-auto-columns: calc((100% - 2 * var(--sp-3)) / 3.2); gap: var(--sp-3); }
}
@media (max-width: 560px) {
  .reel__track { grid-auto-columns: 84%; }
  .reel--pictures .reel__track { grid-auto-columns: 62%; }
  .reel--few .reel__track { grid-template-columns: minmax(0, 1fr); }
  .reel--pictures.reel--few .reel__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reel__tools { width: 100%; justify-content: space-between; }
}
@media (prefers-reduced-motion: reduce) {
  .reel__track { scroll-behavior: auto; }
  .vtile, .vtile__media img, .vtile__play, .ptile, .ptile img { transition: none; }
  .vtile:hover, .ptile:hover { transform: none; }
  .vtile:hover .vtile__media img, .ptile:hover img { transform: none; }
}

.social-tile {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
}
.social-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); text-decoration: none; }
.social-tile__media { aspect-ratio: 1 / 1; background: var(--surface-warm); position: relative; }
.social-tile__media img { width: 100%; height: 100%; object-fit: cover; }
.social-tile__media--video { aspect-ratio: 16 / 9; }
.social-tile__play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(59, 52, 44, 0.18);
  color: #fff;
  font-size: 2rem;
}
.social-tile__body { padding: var(--sp-3) var(--sp-4); }
.social-tile__caption { font-size: 0.85rem; color: var(--soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.social-tile__meta { font-size: 0.72rem; color: var(--faint); margin-top: var(--sp-1); }

.social-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.social-head__title { display: flex; align-items: center; gap: var(--sp-3); font-weight: 700; }
.social-icon {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  font-size: 1.1rem;
}
.social-icon--ig { background: var(--accent-soft); color: var(--accent-ink-strong); }
.social-icon--yt { background: var(--danger-soft); color: var(--danger-ink); }
.social-icon--kofi { background: var(--primary-soft); color: var(--primary-ink); }

.kofi-panel {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: var(--sp-5);
  border: 1px dashed var(--primary-mid);
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--primary-soft), var(--surface));
}

/* Maria's links on the homepage: one friendly, easy-to-tap button each */
.follow-row {
  list-style: none;
  margin: var(--sp-6) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}
.follow-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.9rem;
  padding: 0.4rem 1.15rem 0.4rem 0.45rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.follow-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); border-color: var(--accent-mid); text-decoration: none; }
.follow-btn__icon {
  width: 2.05rem; height: 2.05rem;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 1rem;
  background: var(--primary-soft); color: var(--primary-ink);
}
.follow-btn--instagram .follow-btn__icon { background: var(--accent-soft); color: var(--accent-ink-strong); }
.follow-btn--youtube .follow-btn__icon { background: var(--danger-soft); color: var(--danger-ink); }
.follow-btn--tiktok .follow-btn__icon { background: var(--ink); color: var(--surface); }
.follow-btn--spotify .follow-btn__icon { background: var(--success-soft); color: var(--success-ink); }
@media (prefers-reduced-motion: reduce) { .follow-btn:hover { transform: none; } }

/* Staff only: what would fill the social section out */
.social-staff-hint { font-size: 0.85rem; line-height: 1.8; color: var(--muted); text-align: center; }
.social-staff-hint .badge { margin-right: var(--sp-2); }

/* -- Income analytics ---------------------------------------------------- */
.money-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.money-tile { padding: var(--sp-4) var(--sp-5); }
.money-tile__label { color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
.money-tile__value { font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.money-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .money-grid, .money-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.money-tile__hint { color: var(--faint); font-size: 0.75rem; margin-top: 2px; }
.money-tile__delta { font-size: 0.78rem; }
.money-tile__delta--up { color: var(--success-ink); }
.money-tile__delta--down { color: var(--danger-ink); }

.bars { display: flex; align-items: flex-end; gap: var(--sp-2); height: 9rem; margin-top: var(--sp-5); }
.bars__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: var(--sp-2); height: 100%; }
.bars__bar {
  width: 100%;
  min-height: 3px;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(var(--primary-mid), var(--primary));
  transition: height var(--transition);
}
.bars__bar--accent { background: linear-gradient(var(--accent-mid), var(--accent)); }
.bars__label { font-size: 0.68rem; color: var(--faint); white-space: nowrap; }

/* -- Language switcher --------------------------------------------------- */
.lang-switch { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-pill); overflow: hidden; }
.lang-switch button {
  padding: 0.3rem 0.7rem;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
}
.lang-switch button:hover { background: var(--primary-soft); color: var(--primary-ink); }
.lang-switch button[aria-current="true"] { background: var(--primary); color: #fff; }

@media (max-width: 860px) {
  .money-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .money-grid { grid-template-columns: 1fr; }
  .kofi-panel { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .chat { height: 70vh; }
  .bubble { max-width: 88%; }
}

/* -- Dashboard quick actions (top right) --------------------------------- */
.app__actionbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  flex-wrap: wrap;
}
.app__quick-actions { display: flex; align-items: center; gap: var(--sp-2); }
.app__quick-actions .btn { white-space: nowrap; flex-shrink: 0; }

@media (max-width: 1024px) {
  /* The mobile top bar already carries these, so don't repeat them. */
  .app__actionbar { display: none; }
}
@media (max-width: 520px) {
  /* On a phone there's room for the logo and Log out; the logo already
     leads to the website. */
  .app__quick-actions .lang-switch,
  .app__quick-actions .app__to-site { display: none; }
}

/* -- Social section: prompt shown to staff when it's still empty --------- */
.social-empty {
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--sp-6);
  text-align: center;
}
.social-empty__icons { font-size: 1.6rem; letter-spacing: .35rem; }

/* -- Website text editor -------------------------------------------------- */
.text-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: start; }
.text-row__source { padding-top: var(--sp-1); border-left: 3px solid var(--line-strong); padding-left: var(--sp-4); }
.text-row__target textarea { font-size: 0.9rem; }
@media (max-width: 860px) {
  .text-row { grid-template-columns: 1fr; gap: var(--sp-3); }
  .text-row__source { border-left: 0; border-bottom: 1px solid var(--line); padding-left: 0; padding-bottom: var(--sp-2); }
}

/* -- Month calendar ------------------------------------------------------- */
.cal { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.cal__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--surface-warm);
}
.cal__title { font-weight: 700; font-size: 1rem; }
.cal__nav {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: var(--radius-pill);
  color: var(--soft); font-size: 1.2rem; line-height: 1;
}
.cal__nav:hover { background: var(--primary-soft); color: var(--primary-ink); text-decoration: none; }

.cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal__grid--names { border-bottom: 1px solid var(--line); background: var(--surface); }
.cal__weekday {
  padding: var(--sp-2) 0; text-align: center;
  font-size: 0.7rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--faint);
}

.cal__day {
  position: relative;
  min-height: 3rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: var(--sp-2) 4px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9rem;
}
.cal__day:nth-child(7n) { border-right: 0; }
.cal__day--outside { color: var(--line-strong); background: rgba(0,0,0,.012); }
.cal__day--today .cal__date {
  background: var(--ink); color: var(--surface);
  border-radius: var(--radius-pill); padding: 1px 7px;
}
.cal__date { font-variant-numeric: tabular-nums; }

/* Days a student can book */
.cal__day--open { color: var(--primary-ink); font-weight: 600; background: var(--primary-soft); }
.cal__day--open:hover { background: var(--primary); color: var(--on-primary); text-decoration: none; }
.cal__day--open:hover .cal__dot { background: var(--on-primary); }
.cal__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.cal__day--chosen { background: var(--primary); color: var(--on-primary); }
.cal__day--chosen .cal__dot { background: var(--on-primary); }

/* Maria's overview: little lesson chips inside each day */
.cal__day--staff { min-height: 5.5rem; align-items: stretch; justify-content: flex-start; gap: 3px; }
.cal__day--staff .cal__date { align-self: flex-end; font-size: 0.78rem; color: var(--faint); }
.cal__day--staff.cal__day--today .cal__date { color: var(--surface); }
.cal__chip {
  display: block;
  padding: 2px 5px;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary-ink-strong);
  font-size: 0.68rem;
  line-height: 1.35;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal__chip:hover { background: var(--primary); color: #fff; text-decoration: none; }
.cal__chip-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.cal__chip--danger { background: var(--danger-soft); color: var(--danger-ink); text-decoration: line-through; }
.cal__chip--primary { background: var(--accent-soft); color: var(--accent-ink-strong); }
.cal__chip--warning { background: var(--warning-soft); color: var(--warning-ink); }

.cal-legend { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: var(--sp-3); font-size: 0.78rem; color: var(--muted); }
.cal-legend span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.cal-legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.cal-legend .swatch--confirmed { background: var(--primary-soft); border-left: 3px solid var(--primary); }
.cal-legend .swatch--completed { background: var(--accent-soft); border-left: 3px solid var(--accent); }
.cal-legend .swatch--confirmed-flat { background: var(--primary-soft); }
.cal-legend .swatch--completed-flat { background: var(--accent-soft); }
.cal-legend .swatch--cancelled { background: var(--danger-soft); }
.cal-legend .swatch--hours { background: rgba(122, 168, 202, 0.18); }
.cal-legend .swatch--blocked { background: repeating-linear-gradient(45deg, rgba(168, 67, 63, 0.25), rgba(168, 67, 63, 0.25) 3px, transparent 3px, transparent 6px); }
.cal-legend .swatch--busy { background: rgba(125, 135, 148, 0.3); border-left: 3px solid #7d8794; }

/* Credit batches */
.lot-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface);
}
.lot-row + .lot-row { margin-top: var(--sp-2); }
.lot-row--urgent { border-color: var(--warning); background: var(--warning-soft); }
.lot-count { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .cal__day { min-height: 2.6rem; font-size: 0.82rem; }
  .cal__day--staff { min-height: 4.25rem; }
  .cal__chip { font-size: 0.6rem; }
}

/* -- Day / week calendar, drawn to scale ---------------------------------- */
.grid-cal {
  --minute: 1.15px;                    /* one minute of the day, in pixels */
  --grid-height: calc(var(--grid-span) * var(--minute));
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: var(--sp-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--sp-3);
  overflow-x: auto;
}
.grid-cal__times { position: relative; height: calc(var(--grid-height) + 2.5rem); }
.grid-cal__hour {
  position: absolute;
  right: var(--sp-2);
  top: calc(2.5rem + (var(--at) * 60 - var(--grid-start)) * var(--minute) - 0.5em);
  font-size: 0.7rem;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.grid-cal__days { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(6.5rem, 1fr); gap: 2px; }
.grid-cal__day { min-width: 0; }
.grid-cal__dayhead {
  height: 2.5rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--line);
}
.grid-cal__dayname { font-size: 0.68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); }
.grid-cal__daynum { font-weight: 700; font-size: 0.95rem; }
.grid-cal__day--today .grid-cal__daynum {
  background: var(--ink); color: var(--surface);
  border-radius: var(--radius-pill); padding: 0 .45rem;
}

.grid-cal__canvas {
  position: relative;
  height: var(--grid-height);
  background: repeating-linear-gradient(
    to bottom,
    transparent, transparent calc(30 * var(--minute)),
    rgba(0,0,0,.02) calc(30 * var(--minute)), rgba(0,0,0,.02) calc(60 * var(--minute))
  );
  border-left: 1px solid var(--line);
}
.grid-cal__line {
  position: absolute; left: 0; right: 0;
  top: calc((var(--at) * 60 - var(--grid-start)) * var(--minute));
  border-top: 1px solid var(--line);
}
.grid-cal__band {
  position: absolute; left: 0; right: 0;
  top: calc((var(--from) - var(--grid-start)) * var(--minute));
  height: calc((var(--to) - var(--from)) * var(--minute));
  background: rgba(122, 168, 202, 0.10);   /* the hours she teaches */
}
.grid-cal__blocked {
  position: absolute; left: 0; right: 0;
  top: calc((var(--from) - var(--grid-start)) * var(--minute));
  height: calc((var(--to) - var(--from)) * var(--minute));
  background: repeating-linear-gradient(
    45deg, rgba(168,67,63,.10), rgba(168,67,63,.10) 6px,
    transparent 6px, transparent 12px
  );
}

/* A lesson occupies exactly as much space as it takes in real life. */
.grid-cal__event {
  position: absolute;
  top: calc((var(--from) - var(--grid-start)) * var(--minute));
  height: calc(var(--len) * var(--minute) - 2px);
  left: calc(var(--col) / var(--cols) * 100% + 2px);
  width: calc(100% / var(--cols) - 4px);
  padding: 3px 5px;
  border-radius: 7px;
  border-left: 3px solid var(--primary);
  background: var(--primary-soft);
  color: var(--primary-ink-strong);
  font-size: 0.7rem;
  line-height: 1.25;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.grid-cal__event:hover { text-decoration: none; box-shadow: var(--shadow-card); z-index: 2; }
.grid-cal__event--primary { background: var(--accent-soft); color: var(--accent-ink-strong); border-left-color: var(--accent); }
.grid-cal__event--danger { background: var(--danger-soft); color: var(--danger-ink); border-left-color: var(--danger); }
.grid-cal__event--warning { background: var(--warning-soft); color: var(--warning-ink); border-left-color: var(--warning); }
.grid-cal__event-time { font-weight: 700; font-variant-numeric: tabular-nums; }
.grid-cal__event-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grid-cal__event-meta { opacity: .75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.view-switch { display: inline-flex; gap: 2px; padding: 3px; background: var(--surface-warm); border-radius: var(--radius-pill); }
.view-switch a {
  padding: .3rem .9rem; border-radius: var(--radius-pill);
  font-size: .85rem; color: var(--soft);
}
.view-switch a:hover { color: var(--primary-ink); text-decoration: none; }
.view-switch a[aria-current="page"] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-card); }

@media (max-width: 860px) {
  .grid-cal { --minute: 0.95px; grid-template-columns: 2.75rem 1fr; }
  .grid-cal__days { grid-auto-columns: minmax(5rem, 1fr); }
}

/* ==========================================================================
   10. Phones and tablets
   Written after everything else so these rules win. The aims: nothing under
   the thumb is hard to hit, nothing scrolls sideways by accident, and iOS
   never zooms when a field is tapped.
   ========================================================================== */

:root {
  /* Room for the iPhone home indicator and notch. Zero everywhere else. */
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --tab-height: 4rem;
}

@media (max-width: 1024px) {
  html { -webkit-text-size-adjust: 100%; }
  body { overscroll-behavior-y: contain; }

  /* Long words and links must never widen the page. */
  body, p, li, td, dd, .bubble__body, .quote__text { overflow-wrap: anywhere; }

  /* iOS zooms in whenever a focused field is under 16px. This stops it. */
  .field__input,
  input[type="text"], input[type="email"], input[type="password"],
  input[type="number"], input[type="search"], input[type="url"],
  input[type="date"], input[type="time"], select, textarea {
    font-size: 16px;
  }

  /* Comfortable thumb targets. */
  .btn { min-height: 44px; padding-block: 0.7rem; }
  .btn--sm { min-height: 38px; }
  .nav__link, .app__nav-link, .menu__panel a, .mobile-nav__list a { min-height: 44px; display: flex; align-items: center; }
  .tab, .chip, .slot, .day { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

  /* Stop the grey flash on tap, which makes everything feel cheap. */
  a, button, summary, .chip, .slot, .day, .cal__day { -webkit-tap-highlight-color: rgba(61,108,146,.12); }

  .site-header { padding-top: var(--safe-top); }
}

/* -- Bottom bar: the main way around on a phone -------------------------- */
.tabbar { display: none; }

@media (max-width: 1024px) {
  .tabbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 60;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 2px;
    padding: 0.35rem 0.4rem calc(0.35rem + var(--safe-bottom));
    background: rgba(255, 253, 248, 0.96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
  }
  .tabbar__item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px;
    min-height: 3.25rem;
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 0.65rem;
    text-align: center;
    position: relative;
  }
  .tabbar__item:hover { text-decoration: none; }
  .tabbar__item[aria-current="page"] { color: var(--accent-ink-strong); background: var(--accent-soft); font-weight: 700; }
  .tabbar__icon { font-size: 1.15rem; line-height: 1; }
  .tabbar__badge {
    position: absolute; top: 0.3rem; right: 50%; transform: translateX(1.1rem);
    min-width: 1.05rem; height: 1.05rem; padding: 0 0.25rem;
    display: grid; place-items: center;
    border-radius: var(--radius-pill);
    background: var(--accent); color: #fff;
    font-size: 0.6rem; font-weight: 700;
  }

  /* Keep content clear of the bar. */
  .app__main { padding-bottom: calc(var(--tab-height) + var(--safe-bottom) + var(--sp-6)); }
  /* The horizontal scroller is replaced by the bar. */
  .app__topbar-nav { display: none; }
}

/* -- Tables become cards -------------------------------------------------- */
@media (max-width: 760px) {
  .table-wrap { overflow: visible; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table thead { display: none; }
  .table tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-3);
  }
  .table tr:hover { background: var(--surface); }
  .table td {
    border: 0;
    padding: 0.3rem 0;
    display: flex;
    justify-content: space-between;
    gap: var(--sp-4);
    text-align: right;
  }
  /* The column heading comes along as a label. */
  .table td::before {
    content: attr(data-label);
    color: var(--faint);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-align: left;
    flex: 0 0 auto;
  }
  .table td:first-child {
    display: block;
    text-align: left;
    padding-bottom: var(--sp-2);
    margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--line);
  }
  .table td:first-child::before { display: none; }
  .table td.num { text-align: right; }
  .table td:empty { display: none; }
}

/* -- Calendars on a small screen ------------------------------------------ */
@media (max-width: 760px) {
  /* Month grid: bigger squares, easier to hit. */
  .cal__day { min-height: 44px; }
  .cal__day--staff { min-height: 3.75rem; }

  /* Week view scrolls sideways, with the hours pinned in place. */
  .grid-cal { --minute: 1.05px; scroll-snap-type: x proximity; }
  .grid-cal__times {
    position: sticky; left: 0; z-index: 3;
    background: var(--surface);
    box-shadow: 2px 0 0 var(--line);
  }
  .grid-cal__days { grid-auto-columns: minmax(7.5rem, 1fr); }
  .grid-cal__day { scroll-snap-align: start; }
  .grid-cal__dayhead { position: sticky; top: 0; background: var(--surface); z-index: 2; }
  .view-switch { width: 100%; justify-content: center; }
  .view-switch a { flex: 1; text-align: center; min-height: 40px; display: flex; align-items: center; justify-content: center; }
}

/* -- Booking: keep the confirm button within reach ------------------------ */
@media (max-width: 760px) {
  .sticky-confirm {
    position: sticky;
    bottom: calc(var(--tab-height) + var(--safe-bottom));
    z-index: 20;
    margin-inline: calc(-1 * var(--sp-4));
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -8px 24px -12px rgba(59, 52, 44, .25);
  }
  .sticky-confirm .list__row { flex-direction: column; align-items: stretch; gap: var(--sp-3); }
  .sticky-confirm .btn { width: 100%; }
  .slots { grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr)); }
}

/* -- Chat fills the screen properly --------------------------------------- */
@media (max-width: 1024px) {
  .chat {
    height: calc(100dvh - var(--tab-height) - var(--safe-bottom) - 11rem);
    min-height: 20rem;
  }
  .chat__form { padding-bottom: calc(var(--sp-3)); }
}

/* -- Odds and ends -------------------------------------------------------- */
@media (max-width: 640px) {
  .page-head { gap: var(--sp-2); }
  .page-head .btn { width: 100%; }
  .card__header { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .money-tile__value, .stat__value { font-size: 1.5rem; }
  .lot-row { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .lot-row .btn { width: 100%; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters .btn { width: 100%; }
  .form-actions .btn { width: 100%; }
  .dialog__actions { flex-direction: column-reverse; }
  .dialog__actions .btn { width: 100%; }
  dialog { margin-bottom: calc(var(--safe-bottom) + var(--sp-4)); }
  .hero__actions .btn, .cta-band__actions .btn { width: 100%; }
  .credit-pill { padding: 0.4rem 0.7rem; }
}

/* When added to the home screen there's no browser chrome to scroll away. */
@media (display-mode: standalone) {
  .site-header { position: sticky; top: 0; }
  body { padding-top: var(--safe-top); }
}

/* Hints that only make sense on a touchscreen. */
.hide-on-desktop { display: none; }
@media (max-width: 760px) { .hide-on-desktop { display: block; } }

/* ==========================================================================
   11. The word game, badges and celebrations
   Its own section, with its own phone rules, so the board can be tuned
   without disturbing anything else.
   ========================================================================== */

/* -- Small shared helpers ------------------------------------------------ */
.is-hidden { display: none !important; }
.rule { border: 0; border-top: 1px solid var(--line); margin-block: var(--sp-5); }
.row--wrap { flex-wrap: wrap; }
.list__row--stack { align-items: flex-start; }
.form-grid--2 { display: grid; gap: var(--sp-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .form-grid--2 { grid-template-columns: 1fr; } }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}
.stat-row .stat {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  padding: var(--sp-4) var(--sp-3);
}
.stat-row .stat__value { display: block; font-size: 1.4rem; }
.stat-row .stat__label { display: block; font-size: 0.75rem; }
@media (max-width: 640px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.level-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  border: 1px solid var(--line-strong);
  font-size: 0.82rem;
  font-weight: 500;
}

/* -- Level carousel -------------------------------------------------------
   The scrolling is CSS, not JavaScript: scroll-snap gives a phone the right
   feel for free, and the whole thing still works if the script never loads.
   -------------------------------------------------------------------------- */
.games-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-6);
}
.games-head__title { font-size: clamp(1.5rem, 4vw, 2rem); margin: 0; }
.games-head__jp { color: var(--faint); font-size: 0.5em; margin-left: 0.4rem; }
.games-head__sub { color: var(--muted); margin: var(--sp-2) 0 0; }
.games-head__meta { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.games-head__stat { color: var(--muted); font-size: 0.85rem; }
.games-foot { margin-top: var(--sp-6); text-align: center; }

.carousel { position: relative; }
.carousel__track {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  /* Room either side so the first and last cards can reach the middle. */
  padding: var(--sp-4) max(var(--sp-4), calc(50% - 11rem));
  margin-inline: calc(var(--sp-4) * -1);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-lg); }
.carousel__track.is-dragging { scroll-behavior: auto; cursor: grabbing; }
.carousel__track.is-dragging .level { cursor: grabbing; }

/* -- One level ------------------------------------------------------------ */
.level {
  flex: 0 0 19rem;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  /* Cards not in the middle sit back a little. */
  opacity: 0.62;
  transform: scale(0.94);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.level.is-current {
  opacity: 1;
  transform: scale(1);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-pop);
}

.level__top { display: flex; align-items: center; justify-content: space-between; }
.level__ring {
  width: 3.1rem;
  height: 3.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--ink);
}
/* Easy levels warm and green, hard ones cool and deep — the gradient across
   the carousel is itself a difficulty scale. */
.level--5 .level__ring { background: #e8f2e8; }
.level--4 .level__ring { background: #e9f0f7; }
.level--3 .level__ring { background: #f9f1e4; }
.level--2 .level__ring { background: #f8ebe9; }
.level--1 .level__ring { background: #efe7f2; }

.level__difficulty { display: flex; gap: 4px; }
.level__difficulty i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-strong);
}
.level--5 .level__difficulty i { background: #7aa87a; }
.level--4 .level__difficulty i { background: #7a9dc4; }
.level--3 .level__difficulty i { background: #d0a460; }
.level--2 .level__difficulty i { background: #c98079; }
.level--1 .level__difficulty i { background: #9b7fae; }

.level__name { font-size: 1.15rem; margin: 0; }
.level__script {
  font-family: var(--font-jp);
  font-size: 2rem;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.level__blurb { color: var(--muted); font-size: 0.88rem; margin: 0; min-height: 2.6em; }
.level__meta { color: var(--faint); font-size: 0.78rem; margin: 0; }
.level__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: auto; padding-top: var(--sp-3); }
.level__done { color: var(--success-ink); font-size: 0.85rem; font-weight: 600; align-self: center; }

/* -- Arrows and dots ------------------------------------------------------ */
.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: transform 0.15s ease, opacity 0.2s ease, background 0.15s ease;
}
.carousel__arrow--back { left: calc(var(--sp-4) * -1); }
.carousel__arrow--next { right: calc(var(--sp-4) * -1); }
.carousel__arrow:hover:not(:disabled) { background: var(--surface-warm); transform: translateY(-50%) scale(1.08); }
.carousel__arrow:disabled { opacity: 0; pointer-events: none; }
.carousel__arrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.carousel__dots { display: flex; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4); }
.carousel__dot {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
/* A big tap target with a small dot inside it. */
.carousel__dot::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  transform: translate(-50%, -50%);
  transition: width 0.25s ease, background 0.25s ease;
}
.carousel__dot.is-on::before { width: 22px; border-radius: var(--radius-pill); background: var(--accent); }
.carousel__dot:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; border-radius: 50%; }

@media (max-width: 720px) {
  .carousel__arrow { display: none; }
  .level { flex-basis: 15.5rem; }
  .carousel__track { padding-inline: max(var(--sp-4), calc(50% - 7.75rem)); }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__track { scroll-behavior: auto; }
  .level { transition: none; opacity: 1; transform: none; }
}

/* -- The board ----------------------------------------------------------- */
.wordle { max-width: 30rem; margin-inline: auto; }
.wordle__board {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: center;
  margin-bottom: var(--sp-4);
}
.wordle__row { display: flex; gap: 0.4rem; }
.wordle__tile {
  width: 3.2rem;
  height: 3.2rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 1.5rem;
  font-weight: 500;
  font-family: var(--font-jp);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.wordle__tile.is-filled { border-color: var(--line-strong); transform: scale(1.04); }
.wordle__tile.is-right { background: var(--success); border-color: var(--success); color: #fff; }
.wordle__tile.is-close { background: var(--warning); border-color: var(--warning); color: #fff; }
.wordle__tile.is-wrong { background: var(--line); border-color: var(--line); color: var(--muted); }

/* Tiles turn over one after another, like the paper original. */
.wordle__tile.is-right, .wordle__tile.is-close, .wordle__tile.is-wrong {
  animation: tile-flip 0.35s ease both;
  animation-delay: var(--flip-delay, 0ms);
}
@keyframes tile-flip {
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}
.wordle__row.is-wrong { animation: row-shake 0.4s ease; }
@keyframes row-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.wordle__message {
  text-align: center;
  min-height: 1.4rem;
  font-size: 0.88rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.wordle__message.is-visible { opacity: 1; }
.wordle__message.is-warn { color: var(--danger-ink); }

/* -- Keyboard and tray --------------------------------------------------- */
.wordle__input { margin-top: var(--sp-4); }
.wordle__keyboard--kana {
  display: flex;
  flex-direction: row-reverse;   /* あ column on the right, as on a kana keyboard */
  justify-content: center;
  gap: 0.25rem;
  overflow-x: auto;
  padding-bottom: var(--sp-2);
}
.wordle__kana-col { display: flex; flex-direction: column; gap: 0.25rem; }

/* Switching between the plain and voiced kana boards. */
.wordle__board-switch {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.wordle__board-tab {
  min-height: 2.4rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wordle__board-tab.is-on {
  background: var(--primary-soft);
  border-color: var(--line-strong);
  color: var(--ink);
  font-weight: 600;
}
.wordle__board-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.wordle__tray {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
}
.wordle__tray-hint { text-align: center; color: var(--muted); font-size: 0.82rem; margin-bottom: var(--sp-3); }
.wordle__key {
  min-width: 2.1rem;
  min-height: 2.1rem;
  padding: 0.2rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.08s ease;
}
.wordle__key:active { transform: scale(0.94); }
.wordle__key--gap { visibility: hidden; }
.wordle__key--kanji { min-width: 2.8rem; min-height: 2.8rem; font-size: 1.25rem; }
.wordle__key.is-right { background: var(--success); border-color: var(--success); color: #fff; }
.wordle__key.is-close { background: var(--warning); border-color: var(--warning); color: #fff; }
.wordle__key.is-wrong { background: var(--line); color: var(--faint); }
.wordle__key:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wordle__controls {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  align-items: center;
  margin-top: var(--sp-4);
  flex-wrap: wrap;
}
.wordle__hint { text-align: center; margin-top: var(--sp-3); font-size: 1.1rem; }
.wordle__giveup { text-align: center; margin-top: var(--sp-5); }
.wordle.is-busy { opacity: 0.7; pointer-events: none; }

/* -- Result -------------------------------------------------------------- */
.wordle__result {
  text-align: center;
  background: var(--primary-soft);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  padding: var(--sp-5);
  margin-block: var(--sp-4);
}
.wordle__result.is-arriving { animation: pop-in 0.32s ease both; }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.wordle__verdict { font-weight: 600; font-size: 1.05rem; margin: 0 0 var(--sp-3); }
.wordle__answer { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.wordle__answer-word { font-size: 2rem; font-weight: 500; }
.wordle__answer-reading { color: var(--muted); font-size: 0.95rem; }
.wordle__answer-meaning { color: var(--soft); font-size: 0.9rem; }
.wordle__xp { color: var(--success-ink); font-weight: 600; margin-top: var(--sp-3); }
.wordle__result-actions { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-4); flex-wrap: wrap; }

/* -- Badges -------------------------------------------------------------- */
.badge-shelf {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: var(--sp-3);
}
.badge-tile {
  text-align: center;
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
}
.badge-tile__face { font-size: 1.6rem; line-height: 1.2; }
.badge-tile__name { font-size: 0.72rem; color: var(--soft); margin-top: 2px; }
.badge-tile--locked { opacity: 0.42; }
.badge-tile--locked .badge-tile__face { filter: grayscale(1); }

/* -- Celebrations -------------------------------------------------------- */
.celebration {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  border: 1px solid var(--line-strong);
  margin-bottom: var(--sp-3);
  animation: pop-in 0.35s ease both;
}
.celebration__face { font-size: 1.6rem; line-height: 1; }
.celebration__title { font-weight: 600; margin: 0; font-size: 0.95rem; }
.celebration__body { color: var(--muted); font-size: 0.85rem; margin: 2px 0 0; }

/* -- On a phone ---------------------------------------------------------- */
@media (max-width: 560px) {
  .wordle__tile { width: 2.7rem; height: 2.7rem; font-size: 1.25rem; }
  /* Ten columns is what fits across a phone, so the keys are narrow — but
     they stay a full 44px tall, which is what makes them easy to hit. */
  .wordle__key { min-width: 1.9rem; min-height: 2.75rem; font-size: 0.95rem; }
  .wordle__key--kanji { min-width: 3rem; min-height: 3rem; }
  .wordle__keyboard--kana { justify-content: flex-start; }
  .wordle__controls .btn { flex: 1 1 30%; }
  .game-levels { grid-template-columns: 1fr; }
  .badge-shelf { grid-template-columns: repeat(auto-fill, minmax(4.2rem, 1fr)); }
}

/* Respect a preference for less movement. */
@media (prefers-reduced-motion: reduce) {
  .wordle__tile, .wordle__row.is-wrong, .wordle__result.is-arriving, .celebration,
  .game-level { animation: none !important; transition: none !important; }
}

/* The one-product booking line: says what's being booked when there's no
   choice to make. */
.booking-lesson {
  margin: 0 0 var(--sp-5);
  color: var(--soft);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}


/* ==========================================================================
   12. The member hub: weekly word, sentence challenge, book of the week
   ========================================================================== */

.hub__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-bottom: var(--sp-5);
}
.hub__greeting { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0; }
.hub__greeting-jp { color: var(--faint); font-size: 0.55em; margin-left: 0.5rem; }
.hub__level { color: var(--muted); font-size: 0.95rem; margin: var(--sp-2) 0 0; display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }

/* -- The four numbers that matter today ---------------------------------- */
.hub__strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}
.hub__strip-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hub__strip-label { color: var(--faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.hub__strip-item strong { font-size: 1.05rem; }
@media (max-width: 720px) {
  .hub__strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* -- Word of the week ---------------------------------------------------- */
.word-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--sp-7);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(110% 80% at 0% 100%, var(--primary-soft) 0%, transparent 55%),
    var(--surface);
  border: 1px solid var(--line-strong);
}
/* A quiet seigaiha-style wave, drawn rather than imported. */
.word-card::after {
  content: "";
  position: absolute;
  inset: auto -10% -40% auto;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  border: 1.5rem solid var(--surface-warm);
  opacity: 0.35;
  pointer-events: none;
}
.word-card__ribbon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: var(--sp-5) 0 0 var(--sp-5);
  padding: 0.3rem 0.85rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.word-card__inner { position: relative; z-index: 1; padding: var(--sp-4) var(--sp-5) var(--sp-6); }
.word-card__japanese {
  font-family: var(--font-jp);
  font-size: clamp(2.4rem, 9vw, 4rem);
  line-height: 1.15;
  margin: var(--sp-3) 0 0;
  letter-spacing: 0.02em;
}
.word-card__reading { font-family: var(--font-jp); color: var(--muted); font-size: 1.1rem; margin: 2px 0 0; }
.word-card__romaji { color: var(--primary-ink-strong); font-size: 1rem; font-style: italic; margin: 2px 0 0; }
.word-card__meaning { font-size: 1.25rem; font-weight: 600; margin: var(--sp-3) 0 0; }
.word-card__note { color: var(--muted); margin: var(--sp-3) 0 0; max-width: 44rem; }
.word-card__example {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--accent-mid);
  background: var(--surface);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.word-card__example p { margin: 0; }
.word-card__example .jp { font-family: var(--font-jp); font-size: 1.05rem; }
/* The same sentence in hiragana and in romaji, for kanji not learnt yet. */
.word-card__example p.word-card__example-kana { font-size: 0.95rem; color: var(--muted); margin-top: 2px; }
.word-card__example p.word-card__example-romaji { font-size: 0.92rem; color: var(--primary-ink-strong); font-style: italic; margin-top: 2px; }
.word-card__example p.word-card__example-meaning { margin-top: 0.45rem; }

/* -- Sentence challenge --------------------------------------------------- */
.sentence { margin-bottom: var(--sp-7); }
.sentence__board { margin-bottom: var(--sp-4); }
.sentence__answer {
  min-height: 4.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  padding: var(--sp-3);
  border: 2px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  transition: border-color var(--transition), background var(--transition);
}
.sentence__answer.is-empty { background: var(--surface-warm); }
.sentence__answer.is-solved { border-style: solid; border-color: var(--success); background: var(--success-soft); }
.sentence__answer.is-wrong { animation: row-shake 0.4s ease; border-color: var(--danger); }
.sentence__placeholder { text-align: center; color: var(--faint); font-size: 0.85rem; margin: var(--sp-2) 0 0; }

.sentence__bank {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding: var(--sp-3);
  border-radius: var(--radius-lg);
  background: var(--surface-warm);
}
.sentence__piece {
  font-family: var(--font-jp);
  font-size: 1.15rem;
  min-height: 2.9rem;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 2px 0 var(--line-strong);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  touch-action: none;      /* so dragging doesn't scroll the page */
  user-select: none;
}
.sentence__piece:active { transform: translateY(2px); box-shadow: none; }
.sentence__piece:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sentence__piece.is-dragging { opacity: 0.6; transform: scale(1.06); box-shadow: var(--shadow-pop); }
.sentence__piece.is-locked {
  cursor: default;
  box-shadow: none;
  border-color: transparent;
  background: transparent;
  font-size: 1.35rem;
  padding-inline: 0;
}
.sentence__message { min-height: 1.4rem; font-size: 0.88rem; color: var(--muted); text-align: center; margin: var(--sp-3) 0 0; }
.sentence__message.is-warn { color: var(--danger-ink); }
.sentence__actions { display: flex; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-3); flex-wrap: wrap; }
.sentence__hint { text-align: center; color: var(--muted); margin-top: var(--sp-3); }
.sentence.is-busy { opacity: 0.7; pointer-events: none; }
.sentence__result {
  margin-top: var(--sp-4);
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--success-soft);
  border: 1px solid var(--success);
  text-align: center;
  animation: pop-in 0.32s ease both;
}
.sentence__verdict { font-weight: 600; color: var(--success-ink); margin: 0; }
.sentence__solution { font-family: var(--font-jp); font-size: 1.4rem; margin: var(--sp-3) 0 0; }
.sentence__translation { color: var(--soft); margin: 2px 0 0; }
.sentence__note { color: var(--muted); font-size: 0.9rem; margin: var(--sp-3) auto 0; max-width: 38rem; }
.sentence__xp { color: var(--success-ink); font-weight: 600; margin: var(--sp-3) 0 0; }

/* -- The two or three places to go next ----------------------------------- */
.hub__doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
}
.door {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
@media (hover: hover) {
  .door:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: var(--line-strong); }
}
.door__icon { font-size: 1.75rem; line-height: 1; margin-bottom: var(--sp-2); }
.door__title { font-weight: 600; font-size: 1.05rem; }
.door__sub { color: var(--muted); font-size: 0.85rem; }
.door--game { background: linear-gradient(160deg, var(--primary-soft) 0%, var(--surface) 55%); }
.door--homework { background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface) 55%); }
.door--lessons { background: linear-gradient(160deg, var(--surface-warm) 0%, var(--surface) 55%); }

/* -- Book of the week ------------------------------------------------------
   The cover drifts gently, the way a book floats on a shelf, with its shadow
   breathing in time. Stopped for anyone who prefers less movement.
   -------------------------------------------------------------------------- */
.book {
  display: grid;
  grid-template-columns: minmax(9rem, 14rem) 1fr;
  gap: var(--sp-7);
  align-items: center;
  padding: var(--sp-7) var(--sp-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  margin-bottom: var(--sp-7);
  background:
    radial-gradient(90% 120% at 0% 0%, var(--surface-warm) 0%, transparent 55%),
    var(--surface);
}

.book__shelf {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-block: var(--sp-3);
}
.book__cover {
  width: 100%;
  height: auto;
  display: block;
  /* A spine on the left, so it reads as a book rather than a picture. */
  border-radius: 3px 8px 8px 3px;
  box-shadow:
    -3px 0 0 rgba(59, 52, 44, 0.06),
    -6px 0 0 rgba(59, 52, 44, 0.04),
    0 14px 30px -12px rgba(59, 52, 44, 0.4);
  animation: book-float 5.5s ease-in-out infinite;
}
.book__cover--blank {
  aspect-ratio: 2 / 3;
  display: grid;
  place-items: center;
  font-size: 3.5rem;
  color: var(--faint);
  background: var(--surface-warm);
}
.book__shadow {
  display: block;
  width: 70%;
  height: 0.7rem;
  margin-top: var(--sp-4);
  border-radius: 50%;
  background: rgba(59, 52, 44, 0.16);
  filter: blur(6px);
  animation: book-shadow 5.5s ease-in-out infinite;
}
@keyframes book-float {
  0%, 100% { transform: translateY(0) rotate(-0.6deg); }
  50%      { transform: translateY(-11px) rotate(0.6deg); }
}
@keyframes book-shadow {
  0%, 100% { transform: scaleX(1); opacity: 0.5; }
  50%      { transform: scaleX(0.86); opacity: 0.28; }
}

.book__label {
  color: var(--faint);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 var(--sp-2);
}
.book__title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  line-height: 1.2;
  margin: 0;
}
.book__jp { font-family: var(--font-jp); color: var(--muted); font-size: 1.05rem; margin: var(--sp-2) 0 0; }
.book__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.9rem;
  margin: var(--sp-3) 0 0;
}
.book__level {
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--primary-soft);
  color: var(--primary-ink-strong);
  font-size: 0.75rem;
  font-weight: 600;
}
.book__why { color: var(--soft); margin: var(--sp-4) 0 var(--sp-5); max-width: 38rem; line-height: 1.65; }
.book__buy { align-self: flex-start; }

@media (max-width: 640px) {
  .book {
    grid-template-columns: 1fr;
    gap: var(--sp-5);
    justify-items: center;
    text-align: center;
    padding: var(--sp-6) var(--sp-5);
  }
  .book__shelf { max-width: 11rem; }
  .book__meta, .book__why { justify-content: center; margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .book__cover, .book__shadow { animation: none; }
}

.section-heading--tight { margin-bottom: var(--sp-4); }
.hub__badges { margin-bottom: var(--sp-7); }

@media (prefers-reduced-motion: reduce) {
  .door, .sentence__piece, .sentence__answer, .sentence__result { transition: none !important; animation: none !important; }
}

/* The sentence pieces, previewed live while Maria types them. */
.piece-preview { margin-top: var(--sp-3); }
.piece-preview__label { color: var(--faint); font-size: 0.75rem; margin: 0 0 var(--sp-2); }
.piece-preview__empty { color: var(--faint); font-size: 0.8rem; margin: 0; }
.piece-preview__row { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.piece-preview__piece {
  font-family: var(--font-jp);
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-sm);
  background: var(--surface-warm);
  border: 1px solid var(--line-strong);
  font-size: 1rem;
}

/* The weekly planner table: this week stands out. */
.weekly-plan .is-this-week { background: var(--primary-soft); }
.weekly-plan .is-this-week th { color: var(--muted); }
.weekly-plan__add { color: var(--faint); font-size: 0.85rem; }
.weekly-plan__add:hover { color: var(--primary-ink-strong); }

/* ==========================================================================
   13. The welcome page — an account, but nothing bought yet
   ========================================================================== */

.welcome__head { text-align: center; max-width: 40rem; margin: 0 auto var(--sp-7); }
.welcome__eyebrow {
  color: var(--success-ink);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 var(--sp-3);
}
.welcome__title {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  line-height: 1.15;
  margin: 0;
}
.welcome__jp { color: var(--faint); font-size: 0.42em; margin-left: 0.5rem; }
.welcome__lead { color: var(--muted); font-size: 1.05rem; margin: var(--sp-4) 0 0; }

/* -- The one decision, side by side --------------------------------------- */
.welcome__paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: var(--sp-5);
  margin-bottom: var(--sp-8);
  align-items: stretch;
}
.path {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.path--featured {
  border-color: var(--accent-mid);
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-soft) 0%, transparent 60%),
    var(--surface);
  box-shadow: var(--shadow-pop);
}
.path__tag {
  color: var(--faint);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0;
}
.path--featured .path__tag { color: var(--accent-ink); }
.path__title { font-size: 1.35rem; margin: 0; }
.path__price { font-size: 2rem; font-weight: 600; margin: 0; font-family: var(--font-display); }
.path__price span { font-size: 0.9rem; font-weight: 400; color: var(--muted); font-family: var(--font-sans); }
.path__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.path__list li { color: var(--soft); font-size: 0.93rem; padding-left: 1.4rem; position: relative; }
.path__list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success-ink);
  font-weight: 600;
}
.path__note { color: var(--muted); font-size: 0.85rem; margin: 0; }
.path form, .path > .btn { margin-top: auto; padding-top: var(--sp-3); }
.path .btn { width: 100%; }

/* -- A real piece of the member content ----------------------------------- */
.welcome__taste {
  text-align: center;
  padding: var(--sp-7) var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px dashed var(--line-strong);
  background: var(--surface-warm);
  margin-bottom: var(--sp-8);
}
.welcome__taste-label {
  color: var(--faint);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 var(--sp-4);
}
.welcome__taste-word {
  font-family: var(--font-jp);
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  line-height: 1.2;
  margin: 0;
}
.welcome__taste-romaji { color: var(--primary-ink-strong); font-style: italic; margin: 2px 0 0; }
.welcome__taste-meaning { font-size: 1.1rem; font-weight: 600; margin: var(--sp-2) 0 0; }
.welcome__taste-more { margin: var(--sp-4) 0 0; }

/* -- Three steps ----------------------------------------------------------- */
.welcome__steps { margin-bottom: var(--sp-7); }
.steps { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-4); }
.steps__item { display: flex; gap: var(--sp-4); align-items: flex-start; }
.steps__number {
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-ink-strong);
  font-weight: 600;
  font-size: 0.9rem;
}
.steps__title { font-weight: 600; margin: 0; }
.steps__body { color: var(--muted); font-size: 0.9rem; margin: 2px 0 0; }
@media (min-width: 780px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.welcome__nudge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--primary-soft);
  margin-bottom: var(--sp-6);
}
.welcome__nudge p { margin: 0; }
.welcome__help { text-align: center; }

/* -- Header: the actions sit together without crowding --------------------- */
.header-actions { gap: var(--sp-2); }
.header-actions .btn { white-space: nowrap; }

/* ==========================================================================
   14. Maria's photos — the hero wave, the About portrait, the staff slots
   ========================================================================== */

/* -- Home: Maria waving beside the headline ------------------------------- */
.hero__maria {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  min-height: 22rem;
  /* She stands on the hero's bottom edge: the column reaches down through the
     section's bottom padding, so a cut-out that ends at the waist ends exactly
     where the section does. The words next to her sit where they always did. */
  align-self: end;
  margin-bottom: calc(-1 * var(--sp-9));
  padding-top: 4.5rem;             /* headroom for the note, so it never sits on her face */
}
/* The photo gets a box the full width of the column and a fixed height, and
   is fitted inside it (object-fit) without ever being stretched: a wide
   photo touches the sides, a tall one the top, and both stand on the
   bottom edge. (height + max-width on an <img> would squash it: CSS keeps
   a set height when max-width caps the width.) */
.hero__maria-img {
  position: relative;
  z-index: 1;
  display: block;
  flex: none;
  width: 110%;                          /* a touch wider than the column: she may spill into the gap */
  max-width: none;
  margin-inline: -5%;
  height: clamp(22rem, 36vw, 32rem);   /* big, but her head stays level with the headline */
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 28px rgba(59, 52, 44, 0.18));
  animation: maria-wave 6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
/* The pink circle behind her, like a paper moon. */
.hero__maria-glow {
  position: absolute;
  left: 50%; bottom: 6%;
  width: min(30rem, 92%); aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 42%, #fbe0ea 0%, #f8cfdf 55%, #f5c0d4 100%);
  box-shadow: inset 0 -20px 40px rgba(255, 255, 255, 0.5);
  z-index: 0;
}
/* The scene behind her: sky, Fuji, blossom at her feet. */
.hero__scene {
  position: absolute;
  left: 50%; bottom: 0;
  width: 130%; height: auto;
  transform: translateX(-50%);
  z-index: 0;
  opacity: 0.95;
  pointer-events: none;
}
/* The shrine stands beside her, out in the page margin, only where there is
   a margin to stand in (the same width the sakura branches wait for). */
.hero__shrine {
  display: none;
  position: absolute;
  right: -11rem; bottom: 0;
  width: 12.5rem; height: auto;
  z-index: 0;
  opacity: 0.95;
  pointer-events: none;
  overflow: visible;
}
@media (min-width: 1360px) { .hero__shrine { display: block; } }
/* Under the shrine: the koi go round slowly (a path of keyframes along the
   pond's ellipse, nose forward), their tails wag, the water ripples, the
   lanterns glow, the shimenawa tassels sway. */
.shrine__koi { transform-box: view-box; transform-origin: 0 0; }
.shrine__koi--a { animation: shrine-koi-a 42s linear infinite; }
.shrine__koi--b { animation: shrine-koi-b 56s linear infinite; }
.shrine__tail { transform-box: fill-box; transform-origin: 100% 50%; animation: sc-tail 0.9s ease-in-out infinite alternate; }
.shrine__koi--b .shrine__tail { animation-duration: 1.1s; }
.shrine__ripple { transform-box: fill-box; transform-origin: 50% 50%; animation: sc-ripple 7s ease-out infinite; opacity: 0; }
.shrine__ripple--b { animation-delay: -3.5s; }
.shrine__glow { animation: shrine-glow 3s ease-in-out infinite alternate; }
@keyframes shrine-glow { from { opacity: 0.55; } to { opacity: 1; } }
.shrine__tassels { transform-box: fill-box; transform-origin: 50% 0; animation: deco-sway 4s ease-in-out infinite alternate; }
@keyframes shrine-koi-a {
  0.00% { transform: translate(176.0px, 348.0px) rotate(90.0deg); }
  4.17% { transform: translate(173.8px, 354.7px) rotate(124.2deg); }
  8.33% { transform: translate(167.2px, 361.0px) rotate(145.7deg); }
  12.50% { transform: translate(156.7px, 366.4px) rotate(158.5deg); }
  16.67% { transform: translate(143.0px, 370.5px) rotate(167.2deg); }
  20.83% { transform: translate(127.1px, 373.1px) rotate(174.0deg); }
  25.00% { transform: translate(110.0px, 374.0px) rotate(180.0deg); }
  29.17% { transform: translate(92.9px, 373.1px) rotate(-174.0deg); }
  33.33% { transform: translate(77.0px, 370.5px) rotate(-167.2deg); }
  37.50% { transform: translate(63.3px, 366.4px) rotate(-158.5deg); }
  41.67% { transform: translate(52.8px, 361.0px) rotate(-145.7deg); }
  45.83% { transform: translate(46.2px, 354.7px) rotate(-124.2deg); }
  50.00% { transform: translate(44.0px, 348.0px) rotate(-90.0deg); }
  54.17% { transform: translate(46.2px, 341.3px) rotate(-55.8deg); }
  58.33% { transform: translate(52.8px, 335.0px) rotate(-34.3deg); }
  62.50% { transform: translate(63.3px, 329.6px) rotate(-21.5deg); }
  66.67% { transform: translate(77.0px, 325.5px) rotate(-12.8deg); }
  70.83% { transform: translate(92.9px, 322.9px) rotate(-6.0deg); }
  75.00% { transform: translate(110.0px, 322.0px) rotate(-0.0deg); }
  79.17% { transform: translate(127.1px, 322.9px) rotate(6.0deg); }
  83.33% { transform: translate(143.0px, 325.5px) rotate(12.8deg); }
  87.50% { transform: translate(156.7px, 329.6px) rotate(21.5deg); }
  91.67% { transform: translate(167.2px, 335.0px) rotate(34.3deg); }
  95.83% { transform: translate(173.8px, 341.3px) rotate(55.8deg); }
  100.00% { transform: translate(176.0px, 348.0px) rotate(90.0deg); }
}
@keyframes shrine-koi-b {
  0.00% { transform: translate(72.8px, 337.4px) rotate(151.7deg); }
  4.17% { transform: translate(67.1px, 341.5px) rotate(134.5deg); }
  8.33% { transform: translate(64.3px, 346.1px) rotate(105.0deg); }
  12.50% { transform: translate(64.6px, 350.8px) rotate(68.0deg); }
  16.67% { transform: translate(68.0px, 355.3px) rotate(41.3deg); }
  20.83% { transform: translate(74.3px, 359.3px) rotate(25.8deg); }
  25.00% { transform: translate(83.0px, 362.6px) rotate(15.9deg); }
  29.17% { transform: translate(93.5px, 364.8px) rotate(8.5deg); }
  33.33% { transform: translate(105.2px, 365.9px) rotate(2.4deg); }
  37.50% { transform: translate(117.2px, 365.8px) rotate(-3.5deg); }
  41.67% { transform: translate(128.7px, 364.4px) rotate(-9.9deg); }
  45.83% { transform: translate(138.9px, 362.0px) rotate(-17.6deg); }
  50.00% { transform: translate(147.2px, 358.6px) rotate(-28.3deg); }
  54.17% { transform: translate(152.9px, 354.5px) rotate(-45.5deg); }
  58.33% { transform: translate(155.7px, 349.9px) rotate(-75.0deg); }
  62.50% { transform: translate(155.4px, 345.2px) rotate(-112.0deg); }
  66.67% { transform: translate(152.0px, 340.7px) rotate(-138.7deg); }
  70.83% { transform: translate(145.7px, 336.7px) rotate(-154.2deg); }
  75.00% { transform: translate(137.0px, 333.4px) rotate(-164.1deg); }
  79.17% { transform: translate(126.5px, 331.2px) rotate(-171.5deg); }
  83.33% { transform: translate(114.8px, 330.1px) rotate(-177.6deg); }
  87.50% { transform: translate(102.8px, 330.2px) rotate(176.5deg); }
  91.67% { transform: translate(91.3px, 331.6px) rotate(170.1deg); }
  95.83% { transform: translate(81.1px, 334.0px) rotate(162.4deg); }
  100.00% { transform: translate(72.8px, 337.4px) rotate(151.7deg); }
}

.hero__scene-blossom { animation: scene-breathe 7s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes scene-breathe { from { transform: scale(1); } to { transform: scale(1.03); } }
@keyframes maria-wave {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-0.8deg); }
}
/* A little speech bubble, like a sticky note. */
/* The note sits to the left of her head, above the headroom line, its tail
   (the sharp corner) at the bottom right, pointing at her. */
.hero__maria-note {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-lg) var(--radius-lg) 4px var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-card);
  font-size: 0.85rem;
  color: var(--soft);
  max-width: 13rem;
  transform: rotate(-2deg);
}
.hero__maria-note .jp { font-family: var(--font-jp); font-size: 1.05rem; color: var(--ink); }
/* The drawn stand-in, and the staff-only button that replaces it. */
.hero__maria-img--drawn { width: auto; height: auto; margin-inline: 0; max-width: 100%; max-height: 24rem; overflow: visible; }
.drawn__wave { transform-box: fill-box; transform-origin: 20% 95%; animation: drawn-wave 2.2s ease-in-out infinite; }
@keyframes drawn-wave {
  0%, 100% { transform: rotate(0deg); }
  30%      { transform: rotate(-12deg); }
  60%      { transform: rotate(6deg); }
}
.hero__maria-upload {
  position: absolute; bottom: 4%; left: 50%; transform: translateX(-50%);
  z-index: 3; white-space: nowrap;
  padding: 0.45rem 0.9rem; border-radius: 999px;
  background: var(--ink); color: var(--surface); font-size: 0.8rem; font-weight: 700;
  box-shadow: var(--shadow-pop);
}
.hero__maria-upload:hover { text-decoration: none; background: var(--accent); }
@media (prefers-reduced-motion: reduce) { .drawn__wave { animation: none; } }
@media (max-width: 860px) {
  .hero__maria { min-height: 16rem; margin-bottom: calc(-1 * var(--sp-7)); }
  .hero__maria { padding-top: 4rem; }
  .hero__maria-img { width: 104%; margin-inline: -2%; height: 21rem; }
  .hero__maria-img--drawn { width: auto; margin-inline: 0; height: auto; max-height: 17rem; }
  .hero__maria-glow { width: 19rem; bottom: 2%; }
  .hero__scene { width: 150%; }
  .hero__maria-upload { position: static; transform: none; margin-top: var(--sp-3); white-space: normal; text-align: center; }
  .hero__maria-note { position: absolute; top: 0; left: 0; max-width: 11rem; font-size: 0.78rem; }
}
@media (prefers-reduced-motion: reduce) { .hero__maria-img, .hero__scene-blossom, .shrine__koi, .shrine__tail, .shrine__ripple, .shrine__glow, .shrine__tassels { animation: none !important; } .shrine__ripple { display: none; } }

/* -- About: the portrait, and a couple of snapshots ------------------------ */
.portrait__photo {
  position: relative;          /* above the tilted frame behind it, like the placeholder */
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  object-fit: cover;
  aspect-ratio: 4 / 5;
  box-shadow: var(--shadow-card);
}
.snapshots {
  display: flex;
  gap: var(--sp-4);
  justify-content: center;
  margin-top: var(--sp-6);
  padding-inline: var(--sp-3);
}
.snapshot {
  flex: 0 1 46%;
  padding: 0.5rem 0.5rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  border-radius: 4px;
  transition: transform 0.25s ease;
}
.snapshot img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.snapshot--tilt-left { transform: rotate(-3deg); }
.snapshot--tilt-right { transform: rotate(2.5deg); margin-top: var(--sp-4); }
@media (hover: hover) { .snapshot:hover { transform: rotate(0) scale(1.03); } }

/* -- Member hub: a small wave beside the greeting -------------------------- */
.hub__wave { flex: none; width: 5.5rem; }
.hub__wave-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 10px rgba(59, 52, 44, 0.15)); }
.hub__head { align-items: center; }

/* -- Staff: the slots ------------------------------------------------------ */
.photo-slots { display: grid; gap: var(--sp-4); }
.photo-slot {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
}
.photo-slot__preview {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  background: var(--surface-warm);
  display: grid;
  place-items: center;
  overflow: hidden;
}
/* Cut-outs preview on a checkerboard so the transparency is visible. */
.photo-slot--cutout .photo-slot__preview {
  background-color: #f3eee4;
  background-image:
    linear-gradient(45deg, #e6dfd2 25%, transparent 25%),
    linear-gradient(-45deg, #e6dfd2 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #e6dfd2 75%),
    linear-gradient(-45deg, transparent 75%, #e6dfd2 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.photo-slot__preview img { width: 100%; height: 100%; object-fit: contain; }
.photo-slot__empty { font-size: 2.2rem; opacity: 0.5; }
.photo-slot__title { font-weight: 600; margin: 0; }
.photo-slot__hint { color: var(--muted); font-size: 0.88rem; margin: var(--sp-1) 0 var(--sp-3); }
.photo-slot__form { display: flex; flex-direction: column; gap: var(--sp-2); }
.photo-slot__form .field { margin: 0; }
@media (max-width: 600px) {
  .photo-slot { grid-template-columns: 1fr; }
  .photo-slot__preview { max-width: 11rem; }
}


/* The note on a membership's form pointing at the trial product. */
.trial-note {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
}
.trial-note__title { margin: 0; font-size: 0.9rem; }
.trial-note__body { margin: var(--sp-2) 0 0; font-size: 0.85rem; color: var(--muted); }

/* ==========================================================================
   15. What students get — the perks preview, drawn in CSS
   ========================================================================== */

.perks__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.perk {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--surface);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) {
  .perk:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); border-color: var(--line-strong); }
}
.perk__title { font-size: 1.05rem; margin: var(--sp-4) 0 0; }
.perk__body { color: var(--muted); font-size: 0.9rem; margin: var(--sp-2) 0 0; line-height: 1.55; }
.perks__foot { text-align: center; color: var(--muted); margin-top: var(--sp-6); }

/* The little stage each illustration sits on. */
.perk__art {
  position: relative;
  height: 8.5rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--surface-warm);
}
.perk__art--game     { background: linear-gradient(160deg, #eaf3ea 0%, var(--surface-warm) 70%); }
.perk__art--sentence { background: linear-gradient(160deg, var(--primary-soft) 0%, var(--surface-warm) 70%); }
.perk__art--word     { background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface-warm) 70%); flex-direction: column; gap: 2px; }
.perk__art--book     { background: linear-gradient(160deg, #f7f0e6 0%, var(--surface-warm) 70%); flex-direction: column; }
.perk__art--homework { background: linear-gradient(160deg, #f8ebe9 0%, var(--surface-warm) 70%); flex-direction: column; gap: 0.5rem; align-items: flex-start; padding-left: 22%; }
.perk__art--streak   { background: linear-gradient(160deg, #fff1e3 0%, var(--surface-warm) 70%); flex-direction: column; gap: 0.35rem; }

/* 1 · a slice of the game board, the bottom row lighting up */
.mini-board { display: grid; grid-template-columns: repeat(3, 2rem); gap: 0.3rem; }
.mini-tile {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 6px;
  font-family: var(--font-jp);
  font-size: 0.95rem;
  background: var(--surface);
  border: 1.5px solid var(--line);
}
.mini-tile.is-right { background: var(--success); border-color: var(--success); color: #fff; }
.mini-tile.is-close { background: var(--warning); border-color: var(--warning); color: #fff; }
.mini-tile.is-wrong { background: var(--line); border-color: var(--line); color: var(--muted); }
.mini-board .mini-tile:nth-child(n+7) { animation: tile-flip 0.5s ease both; }
.mini-board .mini-tile:nth-child(7) { animation-delay: 0.2s; }
.mini-board .mini-tile:nth-child(8) { animation-delay: 0.35s; }
.mini-board .mini-tile:nth-child(9) { animation-delay: 0.5s; }

/* 2 · three pieces, the middle one being dragged into place */
.mini-pieces { display: flex; gap: 0.35rem; align-items: center; }
.mini-piece {
  font-family: var(--font-jp);
  font-size: 0.85rem;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: 0 2px 0 var(--line-strong);
}
.mini-piece--lift {
  transform: translateY(-9px) rotate(-3deg);
  box-shadow: 0 8px 14px -6px rgba(59, 52, 44, 0.35);
  border-color: var(--primary-mid);
  animation: piece-settle 2.6s ease-in-out infinite;
}
@keyframes piece-settle {
  0%, 100% { transform: translateY(-9px) rotate(-3deg); }
  50%      { transform: translateY(-2px) rotate(0deg); }
}
.mini-hand { position: absolute; right: 18%; bottom: 14%; font-size: 1.3rem; animation: hand-tap 2.6s ease-in-out infinite; }
@keyframes hand-tap {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-6px, -8px); }
}

/* 3 · the word, big */
.mini-kanji { font-family: var(--font-jp); font-size: 2.4rem; line-height: 1.1; color: var(--ink); }
.mini-romaji { font-style: italic; color: var(--primary-ink-strong); font-size: 0.9rem; }

/* 4 · a small book, floating */
.mini-book {
  position: relative;
  width: 3.6rem; height: 4.8rem;
  border-radius: 3px 8px 8px 3px;
  background: linear-gradient(135deg, var(--accent-mid) 0%, var(--accent) 100%);
  box-shadow: 0 12px 20px -10px rgba(59, 52, 44, 0.45);
  display: grid; place-items: center;
  animation: book-float 5s ease-in-out infinite;
}
.mini-book__spine { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: rgba(0,0,0,0.12); border-radius: 3px 0 0 3px; }
.mini-book__title { color: #fff; font-size: 1.4rem; }
.mini-book__shadow {
  width: 3rem; height: 0.5rem; margin-top: 0.8rem;
  border-radius: 50%; background: rgba(59, 52, 44, 0.18); filter: blur(4px);
  animation: book-shadow 5s ease-in-out infinite;
}

/* 5 · a homework list, two done */
.mini-check { display: flex; align-items: center; gap: 0.5rem; }
.mini-check__box {
  width: 1.3rem; height: 1.3rem;
  border-radius: 6px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  display: grid; place-items: center;
  font-size: 0.8rem; color: #fff;
}
.mini-check__box.is-done { background: var(--success); border-color: var(--success); }
.mini-check__line { height: 0.5rem; border-radius: 4px; background: var(--line-strong); }
.mini-check:nth-child(1) .mini-check__line { width: 62%; }

/* 6 · a flame, a multiplier, three badges */
.mini-flame { font-size: 2rem; line-height: 1; animation: flame-flicker 1.8s ease-in-out infinite; }
@keyframes flame-flicker {
  0%, 100% { transform: scale(1) rotate(-2deg); }
  50%      { transform: scale(1.08) rotate(2deg); }
}
.mini-multiplier { font-weight: 700; font-size: 0.9rem; color: var(--accent-ink); }
.mini-badges { display: flex; gap: 0.3rem; }
.mini-badges i {
  width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  font-style: normal; font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
  .mini-board .mini-tile, .mini-piece--lift, .mini-hand, .mini-book, .mini-book__shadow, .mini-flame {
    animation: none !important;
  }
}

/* ==========================================================================
   16. Cute touches — small, quiet, everywhere the same
   Stickers that tilt, a highlighter under the one phrase that matters, a
   little press on buttons. Nothing that moves for its own sake.
   ========================================================================== */
::selection { background: var(--accent-soft); color: var(--ink); }

/* -- Pricing cards --------------------------------------------------------- */
.product-card__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
}
.product-card__blurb { color: var(--muted); font-size: 0.9rem; margin-top: var(--sp-2); }
.product-card__facts { color: var(--faint); font-size: 0.875rem; margin-top: var(--sp-1); }
.ticks, .product-card__perks {
  list-style: none; padding: 0; margin: var(--sp-3) 0 0;
  display: grid; gap: 0.5rem;
  font-size: 0.875rem; color: var(--soft);
}
.ticks li, .product-card__perks li { display: flex; align-items: center; gap: 0.5rem; }
.ticks li::before, .product-card__perks li::before {
  content: "✓";
  flex: 0 0 auto;
  width: 1.2rem; height: 1.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.7rem; font-weight: 700;
}
.product-card__done { display: flex; justify-content: center; }
.ticks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .ticks--2 { grid-template-columns: 1fr; } }
.product-card__ribbon { transform: rotate(-2deg); }
.card--hover:hover { transform: translateY(-3px); }

/* -- A highlighter under the phrase that matters --------------------------- */
.hl {
  background: linear-gradient(transparent 62%, var(--sun-soft) 62%);
  border-radius: 3px;
  padding: 0 0.12em;
  position: relative; white-space: nowrap;
}
.hl::after {
  content: ""; position: absolute; left: 0.1em; right: 0.1em; bottom: -0.12em; height: 0.35em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M2 8 C 15 2, 30 11, 45 6 S 75 3, 98 7' fill='none' stroke='%23f2b03d' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  pointer-events: none;
}

/* -- Section labels get the same dot as the hero's ------------------------- */
.section-heading__eyebrow::before { content: none; }

/* -- Feature marks and step numbers become stickers ------------------------ */
.feature__mark {
  border-radius: 12px;
  transform: rotate(-5deg);
  transition: transform var(--transition), background var(--transition), color var(--transition);
}
.card--hover:hover .feature__mark { transform: rotate(0deg) scale(1.08); background: var(--accent-soft); }
.step__number { border-radius: 14px; transform: rotate(-6deg); font-weight: 600; }
.steps li:nth-child(even) .step__number { transform: rotate(5deg); }

/* -- Buttons: a little press ---------------------------------------------- */
.btn {
  transition: background var(--transition), border-color var(--transition), color var(--transition),
              transform var(--transition), box-shadow var(--transition);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.98); }
.btn--accent:hover { box-shadow: 0 10px 22px -12px var(--accent); }

/* -- Empty states: a soft dashed ring around the mark ----------------------- */
.empty__mark { position: relative; width: 3.5rem; height: 3.5rem; font-size: 1.6rem; background: var(--sun-soft); }
.empty__mark::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1.5px dashed var(--line-strong);
}

/* -- Footer sign-off in the brand's rose ----------------------------------- */
.site-footer__bottom .jp { color: var(--accent-ink); }

@media (prefers-reduced-motion: reduce) {
  .feature__mark, .step__number, .btn { transition: none; }
  .card--hover:hover, .btn:hover { transform: none; }
}

/* -- The welcome page's trial card ----------------------------------------- */
.welcome__trial {
  display: flex; align-items: center; gap: var(--sp-4);
  max-width: 44rem; margin: 0 auto var(--sp-7);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--accent-mid);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.welcome__trial-mark {
  flex: 0 0 auto;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--accent-soft); color: var(--accent-ink);
  transform: rotate(-6deg);
}
.welcome__trial-text { flex: 1; min-width: 0; }
.welcome__trial-title { font-weight: 600; }
.welcome__trial .btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .welcome__trial { flex-wrap: wrap; }
  .welcome__trial .btn { width: 100%; }
}

/* -- What's included: the headline line, and the line that's honestly not --- */
.ticks li.is-strong, .product-card__perks li.is-strong { color: var(--ink); font-weight: 600; }
.ticks li.is-out, .product-card__perks li.is-out { color: var(--faint); }
.ticks li.is-out::before, .product-card__perks li.is-out::before {
  content: "–";
  background: var(--surface-warm);
  color: var(--faint);
}
.ticks--facts { max-width: 34rem; }

/* ==========================================================================
   17. Sakura — a branch in each top corner, petals drifting down
   Faint, blended, never in the way. See partials/sakura.html.
   ========================================================================== */
.sakura, .sakura * { pointer-events: none; }
.sakura__defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Branches live in the page margins, so they only appear once there are
   margins to live in. Width follows the margin, plus a little reach-in. */
.sakura__branch {
  display: none;
  position: fixed;             /* stays in the margin while the page scrolls */
  top: 0;
  z-index: -1;                 /* behind the page, like the petals: a card at the edge covers it */
  width: clamp(120px, calc((100vw - var(--container)) / 2 + 24px), 300px);
  height: auto;
  opacity: 0.55;
  transform-box: border-box;
  transform-origin: 50% 0;     /* flip and sway about the top centre, so the box stays put */
  animation: sk-branch 9s ease-in-out infinite alternate;
}
.sakura__branch--left { left: 0; --flip: 1; }
.sakura__branch--right { right: 0; --flip: -1; }
@keyframes sk-branch {
  from { transform: scaleX(var(--flip, 1)) rotate(-0.7deg); }
  to   { transform: scaleX(var(--flip, 1)) rotate(0.7deg); }
}
@media (min-width: 1360px) {
  .sakura__branch { display: block; }
}
body { position: relative; }

/* -- The scenery: Fuji at the bottom right, a pond at the bottom left ------ */
.scenery { position: fixed; z-index: -1; height: auto; pointer-events: none; }
/* Always at the foot of the window: the footer is see-through, so they stay
   in view at the bottom of a page too. */
.scenery__fuji { right: -2vw; bottom: -4px; width: clamp(240px, 34vw, 560px); opacity: 0.5; }
.scenery__pond { left: 1.5vw; bottom: 1.5vh; width: clamp(170px, 19vw, 300px); opacity: 0.65; }
/* Beside the dashboard's sidebar (Messages). */
@media (min-width: 1025px) { body:has(.app__sidebar) .scenery__pond { left: calc(240px + 2vw); } }
.scenery__cloud { animation: sc-drift var(--cloud-d, 95s) linear infinite; }
.scenery__cloud--a { --cloud-d: 95s; animation-delay: -30s; }
.scenery__cloud--b { --cloud-d: 130s; animation-delay: -80s; }
@keyframes sc-drift { from { transform: translateX(-80px); } to { transform: translateX(680px); } }
.scenery__canopy { transform-box: fill-box; transform-origin: 50% 100%; animation: sc-sway 6s ease-in-out infinite alternate; }
@keyframes sc-sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
/* The koi ride an ellipse: the orbit group spins about the pond's centre,
   squashed to the pond's shape, and each fish sits off-centre on it, nose
   along the direction of travel. */
.scenery__orbit { transform-box: view-box; transform-origin: 0 0; animation: sc-orbit 48s linear infinite; }
@keyframes sc-orbit {
  from { transform: translate(150px, 120px) rotate(0deg); }
  to   { transform: translate(150px, 120px) rotate(360deg); }
}
.scenery__orbit--b { animation: sc-orbit-b 64s linear infinite; }
@keyframes sc-orbit-b {
  from { transform: translate(150px, 120px) rotate(360deg); }
  to   { transform: translate(150px, 120px) rotate(0deg); }
}
.scenery__koi { transform-box: view-box; transform-origin: 0 0; animation: sc-wiggle 1.6s ease-in-out infinite alternate; }
@keyframes sc-wiggle { from { transform: translate(60px, 0) rotate(90deg) scale(1.45) skewY(-3deg); } to { transform: translate(60px, 0) rotate(90deg) scale(1.45) skewY(3deg); } }
.scenery__orbit--b .scenery__koi { animation: sc-wiggle-b 1.9s ease-in-out infinite alternate; }
@keyframes sc-wiggle-b { from { transform: translate(-40px, 0) rotate(90deg) scale(1.15) skewY(-3deg); } to { transform: translate(-40px, 0) rotate(90deg) scale(1.15) skewY(3deg); } }
.scenery__tail { transform-box: fill-box; transform-origin: 100% 50%; animation: sc-tail 0.9s ease-in-out infinite alternate; }
@keyframes sc-tail { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.scenery__ripple { transform-box: fill-box; transform-origin: 50% 50%; animation: sc-ripple 7s ease-out infinite; opacity: 0; }
.scenery__ripple--b { animation-delay: -3.5s; }
@keyframes sc-ripple { 0% { transform: scale(0.4); opacity: 0.7; } 100% { transform: scale(2.6); opacity: 0; } }
@media (max-width: 900px) {
  .scenery__pond { display: none; }
  .scenery__fuji { width: 240px; opacity: 0.35; right: -30px; }
}
@media (prefers-reduced-motion: reduce) {
  .sakura__branch, .scenery__cloud, .scenery__canopy, .scenery__orbit, .scenery__koi, .scenery__tail, .scenery__ripple { animation: none !important; }
  .scenery__ripple { display: none; }
  /* Standing still, the koi stay in the pond. */
  .scenery__orbit { transform: translate(150px, 120px) rotate(35deg); }
  .scenery__orbit--b { transform: translate(150px, 120px) rotate(215deg); }
  .scenery__koi { transform: translate(60px, 0) rotate(90deg) scale(1.45); }
  .scenery__orbit--b .scenery__koi { transform: translate(-40px, 0) rotate(90deg) scale(1.15); }
}
@media print { .scenery { display: none; } }

/* Petals: the outer element falls, the inner one sways and turns. They fall
   behind the page (z-index -1, like the scenery): visible on the bare paper,
   hidden behind any card, game board or box, never across a line of text. */
.sakura__petals {
  position: fixed; inset: 0;
  z-index: -1;
  overflow: hidden;
}
.sakura__petals i {
  position: absolute;
  top: -6vh;
  left: var(--x, 50%);
  width: 12px; height: 12px;
  animation: sk-fall var(--d, 18s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
.sakura__petals i::before {
  content: "";
  display: block;
  width: 100%; height: 100%;
  background: var(--accent-mid);
  border-radius: 12px 3px 12px 3px;
  opacity: 0.5;
  mix-blend-mode: multiply;
  animation: sk-sway calc(var(--d, 18s) / 4) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
@keyframes sk-fall {
  from { transform: translateY(0); }
  to   { transform: translateY(112vh); }
}
@keyframes sk-sway {
  from { transform: translateX(-14px) rotate(-30deg) scale(var(--s, 1)); }
  to   { transform: translateX(14px) rotate(210deg) scale(var(--s, 1)); }
}

/* Fewer on a phone; none for anyone who asked for less motion; none on paper. */
@media (max-width: 767px) {
  .sakura__petals i:nth-child(n + 7) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sakura__petals { display: none; }
}
@media print {
  .sakura { display: none; }
}

/* -- Perks: the typing-race tile and the chat bubbles ---------------------- */
.perk__art--game { display: flex; align-items: center; justify-content: center; gap: 0.9rem; }
.mini-race {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 0.5rem 0.7rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  transform: rotate(4deg);
}
.mini-race__kana { font-size: 1.25rem; font-weight: 600; }
.mini-race__typed {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem; color: var(--primary-ink);
  display: inline-flex; align-items: center;
}
.mini-race__typed i {
  display: inline-block; width: 1.5px; height: 0.9em; margin-left: 1px;
  background: var(--primary);
  animation: race-caret 1s steps(2, start) infinite;
}
@keyframes race-caret { to { visibility: hidden; } }

.perk__art--chat {
  display: flex; flex-direction: column; justify-content: center; gap: 0.5rem;
  padding: 0.9rem 1rem;
  background: linear-gradient(160deg, var(--surface-warm) 0%, var(--accent-soft) 100%);
}
.mini-bubble {
  max-width: 82%;
  padding: 0.4rem 0.7rem;
  border-radius: 14px;
  font-size: 0.78rem; line-height: 1.3;
  box-shadow: var(--shadow-card);
}
.mini-bubble--them { align-self: flex-start; background: var(--surface); border-bottom-left-radius: 4px; }
.mini-bubble--maria { align-self: flex-end; background: var(--primary); color: #fff; border-bottom-right-radius: 4px; }

/* ==========================================================================
   18. The arcade and the typing race
   ========================================================================== */

/* -- Arcade: one card per game, the whole card a link ---------------------- */
.arcade { display: grid; gap: var(--sp-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.arcade__card {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  color: inherit;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.arcade__card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--line-strong); }
.arcade__card:focus-visible { outline: 3px solid var(--primary-mid); outline-offset: 2px; }
.arcade__sticker {
  position: absolute; top: var(--sp-4); right: var(--sp-4); z-index: 1;
  width: 2.4rem; height: 2.4rem;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--surface); color: var(--primary-ink);
  box-shadow: var(--shadow-card);
  transform: rotate(-6deg);
  transition: transform var(--transition);
}
.arcade__card:hover .arcade__sticker { transform: rotate(4deg) scale(1.06); }
.arcade__art {
  position: relative;
  height: 10.5rem;
  display: flex; align-items: center; justify-content: center; gap: 0.9rem;
  overflow: hidden;
}
.arcade__card--word .arcade__art { background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface-warm) 80%); }
.arcade__card--race .arcade__art { background: linear-gradient(160deg, var(--primary-soft) 0%, var(--surface-warm) 80%); flex-direction: column; gap: 0.7rem; }
.arcade__card--sentence .arcade__art { background: linear-gradient(160deg, var(--surface-warm) 0%, var(--primary-soft) 100%); }
.arcade__card--quest .arcade__art { background: linear-gradient(160deg, #e9f5e6 0%, #d5ebd0 100%); }
.arcade__body { padding: var(--sp-5) var(--sp-5) var(--sp-3); flex: 1; }
.arcade__title { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; }
.arcade__jp { color: var(--faint); font-size: 0.7em; margin-left: 0.35rem; }
.arcade__blurb { color: var(--muted); font-size: 0.925rem; margin-top: var(--sp-2); }
.arcade__stat { margin-top: var(--sp-3); font-size: 0.85rem; color: var(--soft); font-weight: 600; }
.arcade__cta {
  display: block;
  padding: var(--sp-3) var(--sp-5) var(--sp-5);
  color: var(--primary-ink); font-weight: 600;
  transition: transform var(--transition);
}
.arcade__card:hover .arcade__cta { transform: translateX(4px); }
.mini-race--big { transform: rotate(-3deg) scale(1.25); }
.mini-timer { width: 60%; height: 6px; border-radius: 6px; background: rgba(59, 52, 44, 0.1); overflow: hidden; }
.mini-timer span { display: block; height: 100%; width: 60%; border-radius: 6px; background: var(--primary-mid); animation: mini-timer 3.4s linear infinite; }
@keyframes mini-timer { from { width: 100%; } to { width: 0%; } }
@media (max-width: 900px) { .arcade { grid-template-columns: 1fr; } .arcade__art { height: 8.5rem; } }

/* -- Script picker ---------------------------------------------------------- */
.scripts { display: grid; gap: var(--sp-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.script {
  display: flex; flex-direction: column;
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.script__sample {
  font-size: 2.6rem; line-height: 1;
  color: var(--primary-ink);
  margin-bottom: var(--sp-3);
}
.script--kanji .script__sample { color: var(--accent-ink); }
.script__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
.script__blurb { color: var(--muted); font-size: 0.9rem; margin-top: var(--sp-2); }
.script__stages {
  list-style: none; padding: 0; margin: var(--sp-4) 0 0;
  display: grid; gap: 0.3rem;
  font-size: 0.8rem; color: var(--soft);
  counter-reset: stage;
}
.script__stages li { display: flex; align-items: center; gap: 0.5rem; }
.script__stages li::before {
  counter-increment: stage; content: counter(stage);
  width: 1.3rem; height: 1.3rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--primary-soft); color: var(--primary-ink);
  font-size: 0.7rem; font-weight: 700;
}
.script__meta { margin-top: var(--sp-4); font-size: 0.85rem; color: var(--muted); }
.script .btn { margin-top: var(--sp-4); }
@media (max-width: 900px) { .scripts { grid-template-columns: 1fr; } }

/* -- The race itself -------------------------------------------------------- */
.race { max-width: 34rem; margin-inline: auto; position: relative; }
.race__nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.race__mode { font-weight: 600; }
.race__top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.race__lives { display: inline-flex; gap: 0.3rem; }
.race__life {
  width: 0.9rem; height: 0.9rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent-mid);
  transition: transform var(--transition), background var(--transition);
}
.race__life.is-lost { background: var(--line); box-shadow: inset 0 0 0 2px var(--line-strong); transform: scale(0.85); }
.race__score strong { font-size: 1.3rem; }
.race__stage { font-size: 0.8rem; color: var(--primary-ink); font-weight: 600; text-align: right; }
.race__timer { height: 8px; border-radius: 8px; background: rgba(59, 52, 44, 0.08); overflow: hidden; }
.race__timer-bar { display: block; height: 100%; width: 100%; border-radius: 8px; background: var(--primary-mid); }
.race__timer-bar.is-low { background: var(--accent); }
.race__card {
  position: relative;
  margin-top: var(--sp-4);
  padding: var(--sp-6) var(--sp-5);
  min-height: 11rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: background var(--transition), border-color var(--transition);
}
.race__card.is-right { background: var(--success-soft); border-color: var(--success); }
.race__card.is-wrong { background: var(--danger-soft); border-color: var(--danger); }
.race__prompt { font-size: 3.4rem; line-height: 1.15; font-weight: 500; letter-spacing: 0.04em; }
.race__prompt.is-long { font-size: 2.4rem; }
.race__reveal { color: var(--soft); font-size: 0.95rem; min-height: 1.4em; }
.race__flash { position: absolute; top: var(--sp-3); right: var(--sp-4); font-weight: 700; font-size: 0.9rem; }
.race__card.is-right .race__flash { color: var(--success-ink); }
.race__card.is-wrong .race__flash { color: var(--danger-ink); }
.race__form { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.race__input {
  flex: 1; min-width: 0;
  padding: 0.8rem 1rem;
  font-size: 1.15rem;                    /* ≥16px so phones don't zoom */
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.04em;
  /* Neutral grey-blue, not the site's pink: in a game, pink reads as "wrong". */
  border: 1.5px solid #cdd6e1;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
}
.race__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); }
.race__input:disabled { background: #f3f5f8; color: var(--soft); }   /* waiting for the next word: grey, not pink */
.race__hint { text-align: center; margin-top: var(--sp-2); }
.race__actions { display: flex; justify-content: center; margin-top: var(--sp-4); }
.race__start {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: var(--sp-5);
  background: rgba(249, 245, 238, 0.96);
  border-radius: var(--radius-lg);
  text-align: center;
  z-index: 2;
}
.race__start-kana { font-size: 3rem; color: var(--primary-ink); animation: race-bob 3s ease-in-out infinite; }
.race__start-text { color: var(--muted); max-width: 22rem; }
@keyframes race-bob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-6px) rotate(3deg); } }
.race__end {
  margin-top: var(--sp-5);
  padding: var(--sp-6) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  text-align: center;
}
.race__end-eyebrow { color: var(--accent-ink); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.race__end-score strong { font-family: var(--font-display); font-size: 3rem; line-height: 1; }
.race__end-line { margin-top: var(--sp-2); color: var(--muted); display: flex; justify-content: center; gap: var(--sp-3); flex-wrap: wrap; }
.race__end-xp { color: var(--success-ink); font-weight: 700; }
.race__misses { margin-top: var(--sp-5); text-align: left; }
.race__misses-title { font-weight: 600; font-size: 0.9rem; margin-bottom: var(--sp-2); }
.race__misses ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.race__misses li { display: flex; align-items: baseline; gap: var(--sp-3); padding: 0.4rem 0.7rem; background: var(--paper); border-radius: var(--radius-sm); font-size: 0.9rem; }
.race__miss-word { font-size: 1.15rem; font-weight: 600; min-width: 4rem; }
.race__miss-how { color: var(--muted); }
.race__end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-5); }
@media (max-width: 480px) {
  .race__prompt { font-size: 2.6rem; }
  .race__prompt.is-long { font-size: 1.9rem; }
  .race__form { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .race__start-kana, .mini-timer span { animation: none; }
}

/* -- Sentence builder -------------------------------------------------------- */
.builder { max-width: 40rem; margin-inline: auto; }
.builder__prompt {
  margin: var(--sp-4) 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--primary-soft);
  border-radius: var(--radius-lg);
  text-align: center;
}
.builder__label { color: var(--primary-ink); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.builder__english { font-size: 1.25rem; font-weight: 600; margin-top: 0.25rem; }
.builder__streak { margin-left: 0.4rem; font-weight: 700; color: var(--accent-ink); }
.builder__next { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-5); }
.script__progress { margin-top: var(--sp-4); display: grid; gap: 0.3rem; }
.script__bar { display: block; height: 8px; border-radius: 8px; background: rgba(59, 52, 44, 0.08); overflow: hidden; }
.script__bar i { display: block; height: 100%; border-radius: 8px; background: var(--primary-mid); }

/* -- The level pill in the header ------------------------------------------- */
.level-pill {
  display: inline-flex; align-items: center; gap: 0.4rem; flex: none;
  white-space: nowrap;
  padding: 0.25rem 0.65rem 0.25rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.8rem; font-weight: 700;
  transition: transform var(--transition), box-shadow var(--transition);
}
.level-pill:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-card); }
.level-pill__emoji { font-size: 1rem; line-height: 1; }
.level-pill__bar {
  display: inline-block; width: 3rem; height: 6px;
  border-radius: 6px; background: rgba(59, 52, 44, 0.1); overflow: hidden;
}
.level-pill__bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--primary-mid), var(--accent-mid)); }
.level-pill--wide { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: var(--sp-2); }
.level-pill--wide .level-pill__bar { width: 5rem; }
.site-header__inner { gap: var(--sp-3); }
.nav { flex: none; }
.header-actions { flex: none; }

/* -- Leaderboard ---------------------------------------------------------------- */
.leaderboard { margin-top: var(--sp-7); }
.leaderboard__head { margin-bottom: var(--sp-4); }
.leaderboard__title { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; }
.leaderboard__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.leaderboard__row {
  display: grid; grid-template-columns: 2.2rem 1.6rem 1fr auto auto; align-items: center; gap: var(--sp-3);
  padding: 0.55rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.925rem;
}
.leaderboard__row.is-top { background: linear-gradient(90deg, var(--accent-soft), var(--surface) 60%); }
.leaderboard__row.is-you { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.leaderboard__rank { font-weight: 700; text-align: center; }
.leaderboard__emoji { font-size: 1.1rem; text-align: center; }
.leaderboard__name { font-weight: 700; letter-spacing: 0.06em; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.leaderboard__you { margin-left: 0.3rem; padding: 0.05rem 0.45rem; border-radius: var(--radius-pill); background: var(--primary); color: #fff; font-size: 0.7rem; font-family: var(--font-sans); letter-spacing: 0; }
.leaderboard__level { color: var(--muted); font-size: 0.85rem; }
.leaderboard__xp { font-weight: 700; color: var(--primary-ink); }
.leaderboard__mine { margin-top: var(--sp-3); font-weight: 600; }
@media (max-width: 640px) {
  .leaderboard__row { grid-template-columns: 2rem 1.4rem 1fr auto; }
  .leaderboard__level { display: none; }
}

/* -- How to play --------------------------------------------------------------- */
.tutorial { width: min(26rem, calc(100vw - 2rem)); text-align: center; }
.tutorial__eyebrow { color: var(--accent-ink); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.tutorial__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-top: 0.25rem; }
.tutorial__step { animation: rise-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.tutorial__art {
  height: 7.5rem; margin: var(--sp-4) 0;
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--primary-soft), var(--surface-warm));
}
.tutorial__step-title { font-size: 1.05rem; font-weight: 700; }
.tutorial__step-body { color: var(--muted); font-size: 0.925rem; margin-top: 0.35rem; }
.tutorial__swatches, .tutorial__grow, .tutorial__romaji, .tutorial__levels { display: flex; align-items: center; gap: 0.6rem; }
.tutorial__grow .jp, .tutorial__romaji .jp { font-size: 1.3rem; font-weight: 600; }
.tutorial__grow span:not(.jp) { color: var(--faint); }
.tutorial__romaji span:not(.jp) { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--primary-ink); font-size: 0.85rem; }
.tutorial__hint { display: flex; align-items: center; gap: 0.6rem; }
.tutorial__hint .jp { font-size: 1.6rem; font-weight: 600; letter-spacing: 0.1em; }
.tutorial__bubble { padding: 0.3rem 0.7rem; border-radius: 14px 14px 14px 4px; background: var(--surface); box-shadow: var(--shadow-card); font-size: 0.85rem; font-weight: 600; }
.tutorial__prompt { font-size: 1.05rem; font-weight: 600; padding: 0 1rem; }
.tutorial__check { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.tutorial__levels span { padding: 0.35rem 0.8rem; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--shadow-card); font-size: 0.85rem; font-weight: 700; }
.tutorial__levels span:nth-child(1) { color: var(--success-ink); }
.tutorial__levels span:nth-child(2) { color: var(--warning-ink); }
.tutorial__levels span:nth-child(3) { color: var(--accent-ink); }
.tutorial__hearts { display: flex; gap: 0.5rem; }
.tutorial__dots { display: flex; justify-content: center; gap: 0.4rem; margin-top: var(--sp-3); }
.tutorial__dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--line-strong); transition: transform var(--transition), background var(--transition); }
.tutorial__dots i.is-on { background: var(--accent); transform: scale(1.3); }
.tutorial__actions { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.mini-timer--wide { width: 80%; height: 10px; }

/* ==========================================================================
   19. Juice — the game feel
   Brighter tiles, chunky buttons, cute hearts, confetti, floating XP.
   ========================================================================== */
:root {
  --game-right: #4fae72;
  --game-right-deep: #3d8f5b;
  --game-close: #e6b23a;
  --game-close-deep: #c4941f;
  --game-wrong: #c9c2b6;
  --game-wrong-deep: #aea698;
}

/* -- Tiles and keys: brighter, with a little depth ---------------------------- */
.wordle__tile { border-radius: 14px; border-width: 2px; box-shadow: inset 0 -3px 0 rgba(59, 52, 44, 0.06); }
.wordle__tile.is-right { background: var(--game-right); border-color: var(--game-right); box-shadow: inset 0 -4px 0 var(--game-right-deep); color: #fff; }
.wordle__tile.is-close { background: var(--game-close); border-color: var(--game-close); box-shadow: inset 0 -4px 0 var(--game-close-deep); color: #fff; }
.wordle__tile.is-wrong { background: var(--game-wrong); border-color: var(--game-wrong); box-shadow: inset 0 -4px 0 var(--game-wrong-deep); color: #fff; }
.wordle__key.is-right { background: var(--game-right); border-color: var(--game-right); }
.wordle__key.is-close { background: var(--game-close); border-color: var(--game-close); }
.wordle__key.is-wrong { background: var(--game-wrong); border-color: var(--game-wrong); color: #fff; }
.mini-tile.is-right { background: var(--game-right); border-color: var(--game-right); }
.mini-tile.is-close { background: var(--game-close); border-color: var(--game-close); }
.mini-tile.is-wrong { background: var(--game-wrong); border-color: var(--game-wrong); color: #fff; }
.wordle__tile.is-dancing { animation: tile-dance 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tile-dance {
  0% { transform: translateY(0); }
  35% { transform: translateY(-14px) scale(1.08); }
  70% { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

/* -- Chunky game buttons: a bottom edge that presses in --------------------- */
.wordle .btn--primary, .race .btn--primary, .race .btn--accent, .sentence .btn--primary,
.builder .btn--accent, .tutorial .btn--accent, .script .btn--primary {
  border-bottom: 4px solid rgba(0, 0, 0, 0.22);
  transform: none;
}
.wordle .btn--primary:hover, .race .btn--primary:hover, .race .btn--accent:hover, .sentence .btn--primary:hover,
.builder .btn--accent:hover, .tutorial .btn--accent:hover, .script .btn--primary:hover { transform: translateY(-1px); }
.wordle .btn--primary:active, .race .btn--primary:active, .race .btn--accent:active, .sentence .btn--primary:active,
.builder .btn--accent:active, .tutorial .btn--accent:active, .script .btn--primary:active {
  border-bottom-width: 1px; transform: translateY(3px);
}

/* -- Hearts ----------------------------------------------------------------------- */
.heart {
  position: relative;
  display: inline-block;
  width: 22px; height: 20px;
  transform-origin: center;
  animation: heart-beat 1.8s ease-in-out infinite;
}
.heart::before, .heart::after {
  content: "";
  position: absolute; top: 0; left: 11px;
  width: 11px; height: 18px;
  background: linear-gradient(160deg, #ff9fbf, var(--accent));
  border-radius: 11px 11px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.08);
}
.heart::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; }
.heart:nth-child(2) { animation-delay: 0.2s; }
.heart:nth-child(3) { animation-delay: 0.4s; }
@keyframes heart-beat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.12); }
  28% { transform: scale(1); }
  42% { transform: scale(1.08); }
  56% { transform: scale(1); }
}
.heart.is-lost { animation: none; transform: scale(0.85); opacity: 0.45; }
.heart.is-lost::before, .heart.is-lost::after { background: var(--game-wrong); box-shadow: none; }
.heart.is-breaking { animation: heart-break 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes heart-break {
  0% { transform: scale(1); opacity: 1; }
  25% { transform: scale(1.4) rotate(-8deg); opacity: 1; }
  55% { transform: scale(0.9) rotate(10deg) translateY(6px); opacity: 0.8; }
  100% { transform: scale(0.85) translateY(0); opacity: 0.45; }
}
.race__life { width: 22px; height: 20px; border-radius: 0; background: none; box-shadow: none; }
.race__life.is-lost { background: none; box-shadow: none; }
.race__combo {
  margin-left: 0.5rem;
  padding: 0.1rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
  font-size: 0.8rem; font-weight: 800;
}

/* -- Shake, pop, float, confetti ---------------------------------------------- */
.is-shaking { animation: juice-shake 0.4s ease; }
@keyframes juice-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); }
  40%, 60% { transform: translateX(6px); }
}
.is-popping { animation: juice-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes juice-pop { 0% { transform: scale(1); } 40% { transform: scale(1.22); } 100% { transform: scale(1); } }
.float-text {
  position: fixed; z-index: 90;
  transform: translate(-50%, -50%);
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-pop);
  font-weight: 800; font-size: 1.05rem;
  pointer-events: none;
  animation: float-up 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.float-text--xp { color: var(--success-ink); }
@keyframes float-up {
  0% { opacity: 0; transform: translate(-50%, -30%) scale(0.7); }
  20% { opacity: 1; transform: translate(-50%, -60%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -160%) scale(1); }
}
.confetti { position: fixed; inset: 0; z-index: 89; pointer-events: none; overflow: hidden; }
.confetti i {
  position: absolute; width: 9px; height: 9px;
  border-radius: 2px;
  animation: confetti-fly 1.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes confetti-fly {
  0% { transform: translate(0, 0) rotate(0deg) scale(0.6); opacity: 1; }
  60% { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 160px)) rotate(var(--rot)) scale(1); opacity: 0; }
}
.sound-toggle {
  width: 2rem; height: 2rem;
  border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface);
  font-size: 0.95rem; line-height: 1;
  cursor: pointer;
}
.sound-toggle:hover { background: var(--primary-soft); }
.race__card.is-right { transform: scale(1.02); }
.race__card { transition: background var(--transition), border-color var(--transition), transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.sentence__piece { box-shadow: inset 0 -3px 0 rgba(59, 52, 44, 0.08); }

@media (prefers-reduced-motion: reduce) {
  .heart, .heart.is-breaking, .wordle__tile.is-dancing, .is-shaking, .is-popping, .float-text, .confetti i { animation: none !important; }
}

/* -- Script cards as links: hover, and the button pinned to the bottom ------ */
.script--link { color: inherit; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.script--link:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-pop); border-color: var(--line-strong); }
.script--link:focus-visible { outline: 3px solid var(--primary-mid); outline-offset: 2px; }
.script .btn { margin-top: auto; }
.script__progress, .script__meta, .script__stages { margin-top: var(--sp-3); }
.script__meta { margin-bottom: var(--sp-4); min-height: 1.3em; }
.script__sample--long { font-size: 1.35rem; line-height: 1.35; }
.script--hiragana .script__sample, .script--kana .script__sample { color: var(--primary-ink); }
.builder__stage { color: var(--accent-ink); font-weight: 600; font-size: 0.85rem; }

/* -- Word game levels: a card tinted from green (easiest) to red (hardest) ---- */
.level--5 { background: linear-gradient(180deg, #edf7ee 0%, var(--surface) 55%); border-color: #cfe6d1; }
.level--4 { background: linear-gradient(180deg, #f1f7e9 0%, var(--surface) 55%); border-color: #d9e6c8; }
.level--3 { background: linear-gradient(180deg, #fbf3e0 0%, var(--surface) 55%); border-color: #efdcb0; }
.level--2 { background: linear-gradient(180deg, #fdebdd 0%, var(--surface) 55%); border-color: #f2cdb4; }
.level--1 { background: linear-gradient(180deg, #fbe3e1 0%, var(--surface) 55%); border-color: #efbcb8; }
.level--5 .level__ring { background: #4fae72; color: #fff; }
.level--4 .level__ring { background: #8dbb4a; color: #fff; }
.level--3 .level__ring { background: #e6b23a; color: #fff; }
.level--2 .level__ring { background: #e8813f; color: #fff; }
.level--1 .level__ring { background: #d9534f; color: #fff; }
.level--5 .level__difficulty i { background: #4fae72; }
.level--4 .level__difficulty i { background: #8dbb4a; }
.level--3 .level__difficulty i { background: #e6b23a; }
.level--2 .level__difficulty i { background: #e8813f; }
.level--1 .level__difficulty i { background: #d9534f; }
.level__top { display: flex; align-items: center; gap: var(--sp-3); }
.level__tag {
  margin-right: auto;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(59, 52, 44, 0.08);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--soft);
}

/* -- Staff: the video list --------------------------------------------------- */
.video-admin { display: grid; gap: var(--sp-3); }
.video-admin__row {
  display: grid; grid-template-columns: 120px 1fr auto; gap: var(--sp-4); align-items: center;
  padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
}
.video-admin__row.is-muted { opacity: 0.6; }
.video-admin__thumb { width: 120px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); background: var(--surface-warm); }
.video-admin__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: flex-end; }
@media (max-width: 720px) {
  .video-admin__row { grid-template-columns: 1fr; }
  .video-admin__thumb { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .video-admin__actions { justify-content: flex-start; }
}

/* ==========================================================================
   20. Videos — one on the stage, the rest a click away
   ========================================================================== */
.videos__head { max-width: 40rem; margin-bottom: var(--sp-6); }
.videos__title { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 2.6rem); font-weight: 700; margin-top: var(--sp-3); }
.videos__jp { color: var(--faint); font-size: 0.42em; margin-left: 0.5rem; }
.videos__sub { color: var(--muted); font-size: 1.05rem; margin: var(--sp-3) 0 var(--sp-4); }

/* -- The stage --------------------------------------------------------------- */
.stage {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--sp-5);
  align-items: start;
  padding: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  margin-bottom: var(--sp-6);
}
.stage.is-switching { animation: stage-switch 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes stage-switch { 0% { transform: scale(0.985); } 100% { transform: scale(1); } }
.stage__player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #1c1917; }
.stage__player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Before play: the picture (from this site) and a play button that says where the video comes from. */
.stage__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.stage__consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-3); padding: var(--sp-4); text-align: center; background: linear-gradient(180deg, rgba(28, 25, 23, 0.15), rgba(28, 25, 23, 0.7)); color: #fff; }
.stage__consent[hidden], .stage__poster[hidden] { display: none; }
.stage__play { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.75rem 1.4rem; border: 0; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 800; font-size: 1.05rem; cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25); }
.stage__play:hover { transform: translateY(-1px); }
.stage__play-icon { color: var(--accent-ink); }
.stage__consent-text { max-width: 30rem; font-size: 0.8rem; line-height: 1.45; margin: 0; }
.stage__consent-text a { color: #fff; text-decoration: underline; }
.stage__remember { display: inline-flex; gap: 0.45em; align-items: center; font-size: 0.78rem; cursor: pointer; }
.stage__forget { background: none; border: 0; padding: 0; color: var(--muted); text-decoration: underline; cursor: pointer; align-self: flex-start; }
@media (max-width: 520px) { .stage__consent-text { font-size: 0.72rem; } .stage__play { padding: 0.6rem 1.1rem; font-size: 0.95rem; } }
.stage__unmute {
  position: absolute; left: 50%; bottom: 14%; transform: translateX(-50%);
  padding: 0.5rem 1rem;
  border: 0; border-radius: var(--radius-pill);
  background: rgba(255, 253, 248, 0.94);
  color: var(--ink);
  font-weight: 700; font-size: 0.9rem;
  box-shadow: var(--shadow-pop);
  cursor: pointer;
  animation: unmute-bob 2.2s ease-in-out infinite;
}
.stage__unmute:hover { background: #fff; }
@keyframes unmute-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
.stage__info { padding: var(--sp-2) var(--sp-2) var(--sp-2) 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.stage__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.25; }
.stage__desc { font-size: 0.95rem; }
.stage__link { color: var(--primary-ink); font-weight: 600; }
.chip--level {
  align-self: flex-start;
  padding: 0.2rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-ink);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}

/* -- Filters ----------------------------------------------------------------- */
.videos__filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.chip--filter {
  padding: 0.4rem 0.95rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--soft);
  font-size: 0.875rem; font-weight: 600;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
}
.chip--filter:hover { transform: translateY(-1px); border-color: var(--primary-mid); }
.chip--filter.is-on, .chip--filter[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

/* -- The grid ---------------------------------------------------------------- */
.videos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.vcard {
  display: flex; flex-direction: column; gap: 0.5rem;
  padding: 0; border: 0; background: none; text-align: left; color: inherit; font: inherit;
  cursor: pointer;
  border-radius: var(--radius-lg);
  transition: transform var(--transition);
}
.vcard:hover { transform: translateY(-4px); }
.vcard:focus-visible { outline: 3px solid var(--primary-mid); outline-offset: 4px; }
.vcard__thumb {
  position: relative; display: block;
  aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface-warm);
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--transition);
}
.vcard:hover .vcard__thumb { box-shadow: var(--shadow-pop); }
.vcard__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.vcard:hover .vcard__thumb img { transform: scale(1.05); }
.vcard__play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.9);
  width: 3.2rem; height: 3.2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.92); color: var(--accent-ink);
  font-size: 1.1rem; padding-left: 3px;
  box-shadow: var(--shadow-pop);
  opacity: 0.9;
  transition: transform var(--transition), opacity var(--transition);
}
.vcard:hover .vcard__play { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
.vcard__now {
  position: absolute; left: 0.6rem; top: 0.6rem;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--accent); color: #fff;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  display: none;
}
.vcard.is-playing .vcard__now { display: inline-block; }
.vcard.is-playing .vcard__thumb { box-shadow: 0 0 0 3px var(--accent), var(--shadow-card); }
.vcard.is-playing .vcard__play { display: none; }
.vcard__title { font-weight: 600; line-height: 1.3; }
.vcard__meta { color: var(--faint); font-size: 0.8rem; }
.videos__none { margin-top: var(--sp-4); }
@media (max-width: 900px) {
  .stage { grid-template-columns: 1fr; }
  .videos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .videos__grid { grid-template-columns: 1fr; gap: var(--sp-4); }
  .stage { padding: var(--sp-3); }
}
@media (prefers-reduced-motion: reduce) {
  .stage__unmute, .stage.is-switching { animation: none; }
  .vcard:hover .vcard__thumb img { transform: none; }
}

/* ==========================================================================
   21. Badges and achievements
   ========================================================================== */
.badge-svg { display: inline-block; vertical-align: middle; overflow: visible; filter: drop-shadow(0 4px 8px rgba(59, 52, 44, 0.18)); transition: transform var(--transition); }
.badge-svg.is-locked { filter: grayscale(1) drop-shadow(none); opacity: 0.35; }
.badge-svg--legendary .badge-svg__ray { transform-origin: 60px 58px; animation: badge-rays 12s linear infinite; }
.badge-svg--legendary .badge-svg__spark { animation: badge-spark 2.4s ease-in-out infinite; transform-origin: center; }
.badge-svg--legendary .badge-svg__spark--late { animation-delay: 1.2s; }
.badge-svg.is-locked .badge-svg__ray, .badge-svg.is-locked .badge-svg__spark { animation: none; }
@keyframes badge-rays { to { transform: rotate(360deg); } }
@keyframes badge-spark { 0%, 100% { opacity: 0.2; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.15); } }

/* Trophy shelf */
.trophies { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: var(--sp-4); }
.trophy { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; padding: var(--sp-4) var(--sp-3); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: transform var(--transition), box-shadow var(--transition); }
.trophy:hover { transform: translateY(-4px); box-shadow: var(--shadow-pop); }
.trophy:hover .badge-svg:not(.is-locked) { transform: rotate(-6deg) scale(1.08); }
.trophy--legendary { background: linear-gradient(160deg, #fff7e6, var(--surface) 70%); border-color: #f2c94c; }
.trophy__name { font-weight: 700; font-size: 0.85rem; line-height: 1.2; }
.trophy__meta { color: var(--faint); font-size: 0.72rem; }
.trophy--locked .trophy__name { color: var(--faint); }
/* Earned or not, at a glance: earned ones are filled, bordered in green and
   marked; the rest are faded and dashed. */
.trophy { position: relative; }
.trophy--earned {
  background: linear-gradient(170deg, var(--success-soft), var(--surface) 75%);
  border: 2px solid var(--success);
  box-shadow: 0 8px 20px -14px var(--success);
}
.trophy--earned .trophy__meta { color: var(--success-ink); font-weight: 700; }
.trophy--earned.trophy--legendary { background: linear-gradient(160deg, #fff3cf, var(--surface) 70%); border-color: #e0a800; }
.trophy__ribbon {
  position: absolute; top: -0.6rem; left: 50%; transform: translateX(-50%);
  padding: 0.1rem 0.55rem; border-radius: var(--radius-pill);
  background: var(--success); color: #fff; font-size: 0.68rem; font-weight: 800; white-space: nowrap;
}
.trophy--earned.trophy--legendary .trophy__ribbon { background: #c99400; }
.trophy--locked { background: transparent; border: 1.5px dashed var(--line-strong); opacity: 0.72; }
.trophy--locked:hover { opacity: 1; }

/* Achievement cards */
.achievements { display: grid; gap: var(--sp-4); }
.ach {
  display: grid; grid-template-columns: 3rem 1fr auto; gap: var(--sp-4); align-items: center;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.ach--done { background: linear-gradient(90deg, var(--success-soft), var(--surface) 55%); border-color: #cfe6d1; }
.ach__glyph {
  width: 3rem; height: 3rem; display: grid; place-items: center;
  border-radius: 14px; background: var(--primary-soft); color: var(--primary-ink);
  font-size: 1.5rem; line-height: 1;
  transform: rotate(-6deg);
}
.ach--done .ach__glyph { background: var(--success); color: #fff; }
.ach__title { font-weight: 700; }
.ach__blurb { color: var(--muted); font-size: 0.85rem; }
.ach__bar { position: relative; height: 10px; border-radius: 10px; background: rgba(59, 52, 44, 0.08); overflow: hidden; margin-top: 0.5rem; }
.ach__bar i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--primary-mid), var(--accent-mid)); transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); }
.ach--done .ach__bar i { background: var(--success); }
.ach__count { margin-top: 0.3rem; font-size: 0.8rem; color: var(--soft); font-weight: 600; }
.ach__tiers { display: flex; gap: 0.35rem; align-items: center; flex-wrap: wrap; justify-content: flex-end; max-width: 14rem; }
.ach__tier {
  min-width: 2rem; height: 2rem; padding: 0 0.45rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--paper); border: 1px solid var(--line-strong);
  font-size: 0.72rem; font-weight: 700; color: var(--faint);
}
.ach__tier.is-done { background: var(--success); border-color: var(--success); color: #fff; }
.ach__tier.is-current { border-color: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 3px var(--accent-soft); }
.ach__tier .badge-svg { width: 1.6rem; height: auto; filter: none; }
@media (max-width: 640px) {
  .ach { grid-template-columns: 2.6rem 1fr; }
  .ach__tiers { grid-column: 1 / -1; justify-content: flex-start; max-width: none; }
}

/* Tracked progress on the home page */
.tracked { display: grid; gap: var(--sp-3); }
.tracked__row { display: grid; grid-template-columns: 2.2rem 1fr auto; gap: var(--sp-3); align-items: center; }
.tracked__glyph { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: 10px; background: var(--primary-soft); font-size: 1.15rem; line-height: 1; transform: rotate(-6deg); }
.tracked__title { font-weight: 600; font-size: 0.9rem; }
.tracked__bar { height: 8px; border-radius: 8px; background: rgba(59, 52, 44, 0.08); overflow: hidden; margin-top: 0.3rem; }
.tracked__bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--primary-mid), var(--accent-mid)); }
.tracked__count { font-size: 0.8rem; font-weight: 700; color: var(--soft); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .badge-svg--legendary .badge-svg__ray, .badge-svg--legendary .badge-svg__spark { animation: none; } }

/* ==========================================================================
   22. The flashcard quest — the arena
   ========================================================================== */
.arena {
  max-width: 40rem; margin-inline: auto;
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  transition: background 0.6s ease;
  position: relative; overflow: hidden;
}
.arena--grove    { background: linear-gradient(180deg, #e9f5e6 0%, #d5ebd0 60%, #c2dcbd 100%); }
.arena--fields   { background: linear-gradient(180deg, #fbf3d4 0%, #f2e4a8 60%, #d9d28a 100%); }
.arena--mountain { background: linear-gradient(180deg, #e7edf5 0%, #cfd9e6 60%, #aeb9c9 100%); }
.arena--castle   { background: linear-gradient(180deg, #f2e6ea 0%, #e0cbd3 60%, #b9a0ad 100%); }
.arena--shrine   { background: linear-gradient(180deg, #e8e0f2 0%, #cdbfe0 60%, #9f8dbb 100%); }
.arena--peak     { background: linear-gradient(180deg, #2c3550 0%, #4a4f7a 55%, #7a6a8f 100%); color: #f4f1ea; }
.arena--peak .fcard, .arena--peak .loot { color: var(--ink); }

/* the trail: six stages, a line between the dots, names that fit */
.trail {
  list-style: none; margin: 0 0 var(--sp-4); padding: 0.6rem 0.4rem 0.4rem;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.2rem;
  position: relative;
  background: rgba(255, 255, 255, 0.55);
  border-radius: var(--radius);
}
.trail::before {
  content: ""; position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 1.45rem;
  height: 2px; border-radius: 2px; background: rgba(59, 52, 44, 0.12);
}
.trail__stage {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  min-width: 0; text-align: center; font-size: 0.62rem; line-height: 1.15; color: inherit; opacity: 0.75;
}
.trail__dot {
  position: relative;
  width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
  border-radius: 50%; background: #fff; color: var(--ink);
  font-weight: 800; font-size: 0.8rem; border: 2px solid rgba(59, 52, 44, 0.15);
  transition: transform var(--transition), background var(--transition);
}
.trail__stage.is-cleared { opacity: 0.9; }
.trail__stage.is-cleared .trail__dot { background: var(--success); border-color: var(--success); color: #fff; }
.trail__stage.is-current { opacity: 1; font-weight: 700; }
.trail__stage.is-current .trail__dot { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(173, 72, 108, 0.22); animation: path-pulse 1.6s ease-in-out infinite; }
.trail__stage.has-loot .trail__dot::after { content: "🎁"; position: absolute; top: -0.55rem; right: -0.7rem; font-size: 0.65rem; line-height: 1; }
.trail__stage.has-loot.is-cleared .trail__dot::after { content: ""; }
@keyframes path-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.trail__name { max-width: 100%; overflow-wrap: anywhere; padding: 0 0.1rem; }
.arena--peak .trail { background: rgba(255, 255, 255, 0.12); }
.arena--peak .trail::before { background: rgba(255, 255, 255, 0.25); }
@media (max-width: 480px) { .trail__name { font-size: 0.55rem; } .trail { padding-inline: 0.15rem; } }

/* the field */
.battlefield { position: relative; min-height: 15rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: var(--sp-3); }
.battlefield::before { content: ""; position: absolute; left: 8%; right: 8%; bottom: 3.2rem; height: 1.6rem; border-radius: 50%; background: rgba(59, 52, 44, 0.08); filter: blur(4px); }
.battlefield.is-flash { animation: field-flash 0.4s ease; }
@keyframes field-flash { 0% { filter: brightness(1); } 30% { filter: brightness(1.6); } 100% { filter: brightness(1); } }
.battlefield__stage { position: absolute; top: 0; left: 0; z-index: 1; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.8; }
.monster { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.sprite { width: 9rem; height: 9rem; animation: sprite-idle 2.6s ease-in-out infinite; transform-origin: 50% 100%; filter: drop-shadow(0 6px 8px rgba(59, 52, 44, 0.2)); }
.monster.is-boss .sprite { width: 12rem; height: 12rem; }
.monster.is-boss .sprite[viewBox="0 0 160 120"] { width: 16rem; }
.sprite--mini { width: 4.5rem; height: 4.5rem; animation: sprite-idle 2.6s ease-in-out infinite; }
.sprite--wide { width: 7rem; }
@keyframes sprite-idle { 0%, 100% { transform: translateY(0) scaleX(1); } 50% { transform: translateY(-6px) scaleX(1.02); } }
.monster.is-hit .sprite { animation: sprite-hit 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes sprite-hit {
  0% { transform: translateX(0); filter: brightness(1); }
  20% { transform: translateX(-10px) rotate(-6deg); filter: brightness(2) saturate(0.2); }
  45% { transform: translateX(8px) rotate(4deg); }
  70% { transform: translateX(-4px); }
  100% { transform: translateX(0); filter: brightness(1); }
}
.monster.is-attacking .sprite { animation: sprite-attack 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes sprite-attack { 0% { transform: translateY(0) scale(1); } 35% { transform: translateY(18px) scale(1.15); } 100% { transform: translateY(0) scale(1); } }
.monster.is-defeated .sprite { animation: sprite-poof 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes sprite-poof { 0% { transform: scale(1) rotate(0); opacity: 1; } 40% { transform: scale(1.2) rotate(8deg); opacity: 1; } 100% { transform: scale(0) rotate(30deg) translateY(-40px); opacity: 0; } }
.monster.is-entering .sprite { animation: sprite-enter 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes sprite-enter { 0% { transform: translateX(120px) scale(0.6); opacity: 0; } 60% { transform: translateX(-8px) scale(1.05); opacity: 1; } 100% { transform: translateX(0) scale(1); } }
.monster.is-entering-boss .sprite { animation: sprite-enter-boss 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes sprite-enter-boss { 0% { transform: translateY(-120px) scale(1.6); opacity: 0; } 55% { transform: translateY(6px) scale(1.05); opacity: 1; } 75% { transform: translateY(-4px) scale(1); } 100% { transform: translateY(0); } }
.monster__tag { position: absolute; top: 0; right: -0.5rem; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; transform: rotate(8deg); }
.monster__hp { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem; align-items: center; min-width: 14rem; padding: 0.3rem 0.7rem; background: rgba(255, 253, 248, 0.85); border-radius: var(--radius-pill); color: var(--ink); font-size: 0.8rem; font-weight: 700; }
.monster__bar { display: block; height: 8px; border-radius: 8px; background: rgba(59, 52, 44, 0.12); overflow: hidden; }
.monster__bar i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, #4fae72, #e6b23a 60%, #d9534f); background-size: 14rem 100%; transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.dmg { position: absolute; top: 20%; left: 60%; font-weight: 900; font-size: 1.4rem; color: #fff; text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); animation: dmg-float 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; pointer-events: none; }
.dmg--crit { color: #ffd166; font-size: 1.8rem; }
@keyframes dmg-float { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 20% { transform: translate(6px, -10px) scale(1.2); opacity: 1; } 100% { transform: translate(16px, -60px) scale(1); opacity: 0; } }
.you { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); margin-top: var(--sp-3); }
.you__streak { font-weight: 800; color: var(--accent-ink); padding: 0.1rem 0.5rem; border-radius: var(--radius-pill); background: rgba(255, 253, 248, 0.8); }
.arena--peak .you__kills { color: rgba(244, 241, 234, 0.8); }

/* the card */
.fcard-wrap { margin-top: var(--sp-4); }
.fcard {
  position: relative;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  text-align: center;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
.fcard::before { content: ""; position: absolute; left: 1rem; right: 1rem; top: -6px; height: 6px; border-radius: 6px 6px 0 0; background: var(--line); }
/* A new card fades gently in: no flip or jolt, which would read as "wrong". */
.fcard.is-dealt { animation: fcard-deal 0.3s ease-out; }
@keyframes fcard-deal { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }
.fcard.is-right { background: var(--success-soft); border-color: var(--success); }
.fcard.is-wrong { background: var(--danger-soft); border-color: var(--danger); }
.fcard__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.fcard__word { font-size: 3rem; line-height: 1.15; font-weight: 500; margin-top: 0.3rem; }
.fcard__reading { color: var(--muted); font-size: 1rem; min-height: 1.4em; }
.fcard__reveal { margin-top: 0.4rem; font-weight: 700; min-height: 1.4em; }
.fcard.is-right .fcard__reveal { color: var(--success-ink); }
.fcard.is-wrong .fcard__reveal { color: var(--danger-ink); }
.fcard__form { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.fcard__form .btn { white-space: nowrap; }
@media (max-width: 480px) { .fcard__word { font-size: 2.2rem; } .fcard__form { flex-direction: column; } }

/* loot */
.loot { margin-top: var(--sp-4); padding: var(--sp-6) var(--sp-5); background: var(--surface); border: 1px solid #f2c94c; border-radius: var(--radius-lg); box-shadow: var(--shadow-pop); text-align: center; }
.loot__eyebrow { color: var(--accent-ink); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.loot__title { font-family: var(--font-display); font-size: 1.6rem; font-weight: 700; margin-top: 0.2rem; }
.loot__chest { position: relative; width: 6rem; height: 4.6rem; margin: var(--sp-4) auto var(--sp-3); }
.loot__box { position: absolute; left: 0; right: 0; bottom: 0; height: 2.8rem; border-radius: 6px 6px 10px 10px; background: linear-gradient(180deg, #b5763f, #7a4626); border: 3px solid #5c3418; }
.loot__box::after { content: ""; position: absolute; left: 50%; top: 0.5rem; width: 0.9rem; height: 1rem; transform: translateX(-50%); background: #f2c94c; border-radius: 3px; border: 2px solid #8a6a1c; }
.loot__lid { position: absolute; left: -0.2rem; right: -0.2rem; top: 0.6rem; height: 1.8rem; border-radius: 10px 10px 4px 4px; background: linear-gradient(180deg, #c8884c, #8f5a2c); border: 3px solid #5c3418; transform-origin: 10% 100%; transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); z-index: 2; }
.loot__glow { position: absolute; left: 50%; top: 0.8rem; width: 4rem; height: 2rem; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(#fff6c2, rgba(255, 246, 194, 0)); opacity: 0; transition: opacity 0.6s ease; }
.loot.is-open .loot__lid { transform: rotate(-70deg) translateY(-6px); }
.loot.is-open .loot__glow { opacity: 1; animation: loot-glow 1.4s ease-in-out infinite; }
@keyframes loot-glow { 0%, 100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.25); } }
.loot__xp { font-size: 1.6rem; font-weight: 900; color: var(--success-ink); }
.loot__badge { margin: var(--sp-3) auto; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.loot__badge .badge-svg { animation: badge-drop 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes badge-drop { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.15) rotate(6deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.loot__badge-name { font-weight: 800; }
.loot--end { border-color: var(--accent); background: linear-gradient(160deg, #fff7e6, var(--surface) 60%); }
.loot form { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-4); }

/* tutorial bits */
.tutorial__quest { display: flex; align-items: center; gap: 0.6rem; }
.tutorial__vs { font-size: 1.2rem; }
.tutorial__stages { display: flex; gap: 0.5rem; }
.tutorial__stages i { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--surface); border: 2px solid var(--line-strong); display: inline-block; }
.tutorial__stages i.is-loot { border-color: #f2c94c; background: #fff2b8; }
.tutorial__stages i.is-boss { border-color: var(--danger); background: var(--danger-soft); transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
  .sprite, .sprite--mini, .trail__stage.is-current .trail__dot, .loot.is-open .loot__glow, .loot__badge .badge-svg { animation: none !important; }
}

/* -- Quest: timer, hint, ladder, death ------------------------------------------ */
.fcard__timer { margin-bottom: 0.6rem; }
.fcard__rung { margin-left: 0.5rem; padding: 0.05rem 0.5rem; border-radius: var(--radius-pill); background: var(--primary-soft); color: var(--primary-ink); font-size: 0.7rem; letter-spacing: 0; text-transform: none; }
.fcard__hint { margin-top: 0.4rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.12em; color: var(--primary-ink); font-weight: 700; }
.fcard__tools { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-2); }
.you__life { padding: 0.05rem 0.5rem; border-radius: var(--radius-pill); background: rgba(255, 253, 248, 0.7); }
.loot--death { border-color: var(--danger); background: linear-gradient(160deg, var(--danger-soft), var(--surface) 60%); }
.misses { margin-top: var(--sp-4); text-align: left; }
.misses__title { font-weight: 700; font-size: 0.9rem; margin-bottom: var(--sp-2); }
.misses ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.misses li { display: flex; align-items: baseline; gap: var(--sp-3); padding: 0.4rem 0.7rem; background: var(--paper); border-radius: var(--radius-sm); font-size: 0.9rem; }
.misses__word { font-size: 1.15rem; font-weight: 600; min-width: 4rem; }
.misses__how { color: var(--muted); }
.arena--peak .you__life, .arena--peak .fcard__rung { color: var(--ink); }

/* -- The member home page, in order -------------------------------------------- */
.hub > section { margin-top: var(--sp-7); }
.hub__today .section-heading, .hub__tracked .section-heading, .hub__week .section-heading, .hub__badges .section-heading { margin-bottom: var(--sp-4); }
.today { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.today__tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card); color: inherit;
  transition: transform var(--transition), box-shadow var(--transition);
}
.today__tile:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.today__tile:nth-child(1) { background: linear-gradient(160deg, var(--sun-soft), var(--surface) 70%); }
.today__tile:nth-child(2) { background: linear-gradient(160deg, var(--leaf-soft), var(--surface) 70%); }
.today__tile:nth-child(3) { background: linear-gradient(160deg, var(--accent-soft), var(--surface) 70%); }
.today__tile:nth-child(4) { background: linear-gradient(160deg, var(--primary-soft), var(--surface) 70%); }
.today__tile.is-done { background: linear-gradient(160deg, var(--success-soft), var(--surface) 70%); border-color: #cfe6d1; }
.today__icon { font-size: 1.9rem; line-height: 1; height: 2.4rem; display: flex; align-items: center; }
.sprite--tile { width: 2.6rem; height: 2.6rem; animation: sprite-idle 2.6s ease-in-out infinite; filter: none; }
.today__title { font-weight: 700; }
.today__state { font-size: 0.8rem; color: var(--muted); font-weight: 600; }
.today__tile.is-done .today__state { color: var(--success-ink); }
.hub__today-more { margin-top: var(--sp-3); text-align: right; }
.week { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
.week__word { margin: 0; }
.week__sentence { padding: var(--sp-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.week__label { font-weight: 700; margin-bottom: 0.2rem; }
.week__book { grid-column: 1 / -1; margin: 0; }
.hub__badges .trophies { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
@media (max-width: 900px) { .today { grid-template-columns: repeat(2, minmax(0, 1fr)); } .week { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .today { grid-template-columns: 1fr 1fr; gap: var(--sp-2); } .today__tile { padding: var(--sp-3); } }

/* -- One header for every game --------------------------------------------------- */
.game-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); max-width: 40rem; margin-inline: auto; }
.game-head__back { white-space: nowrap; }
.game-head__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; text-align: center; flex: 1; min-width: 0; }
.game-head__jp { color: var(--faint); font-size: 0.7em; margin-left: 0.3rem; }
.game-head__tools { display: inline-flex; align-items: center; gap: 0.4rem; }
.game-sub { max-width: 40rem; margin: 0 auto var(--sp-4); text-align: center; }
.race { max-width: 40rem; }
.race__best { margin-left: auto; }
@media (max-width: 480px) { .game-head__meta { display: none; } .game-head__title { font-size: 1.05rem; } }

/* ==========================================================================
   23. Soul — Mame the companion, listening, the word card, today's rings,
       the word bank and the review drill
   ========================================================================== */

/* -- Mame ------------------------------------------------------------------- */
.buddy {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  margin: var(--sp-3) auto var(--sp-4);
  max-width: 36rem;
  min-height: 2.75rem;
}
.buddy__avatar {
  flex: none;
  width: 2.75rem; height: 2.75rem;
  padding: 0; border: 0; background: none; cursor: pointer;
  border-radius: 50%;
  transition: transform var(--transition);
}
.buddy__avatar:hover { transform: translateY(-2px) rotate(-3deg); }
.buddy__avatar:focus-visible { outline: 3px solid var(--primary-mid); outline-offset: 3px; }
.buddy__bubble {
  position: relative;
  padding: 0.5rem 0.9rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px 14px 14px 4px;
  box-shadow: var(--shadow-card);
  font-size: 0.875rem; color: var(--soft);
  max-width: 34rem;
}
.buddy__say { margin: 0; line-height: 1.45; }
.buddy__say.is-new { animation: buddy-say 0.32s ease-out; }
/* Over a game, the tip row keeps one height whatever Mame says (a short
   "Nice!" or a two-line tip), so the game under it never jumps up and down:
   room for 2 lines on wide screens, 3 on phones, longer text is clamped. */
.buddy--small {
  --buddy-lines: 2;
  height: calc(var(--buddy-lines) * 1.45 * 0.875rem + 1rem + 2px);
  min-height: 0;
}
.buddy--small .buddy__say {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--buddy-lines);
  line-clamp: var(--buddy-lines);
  overflow: hidden;
}
@media (max-width: 640px) { .buddy--small { --buddy-lines: 3; } }
@media (max-width: 380px) { .buddy--small .buddy__bubble { font-size: 0.8125rem; } }
@keyframes buddy-say { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.buddy__more {
  margin-top: 0.25rem; padding: 0; border: 0; background: none;
  color: var(--primary-ink); font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer;
}
.buddy__more:hover { text-decoration: underline; }
.buddy--big { margin: 0; max-width: none; justify-content: flex-start; align-items: flex-end; gap: var(--sp-4); }
.buddy--big .buddy__avatar { width: 5.25rem; height: 5.25rem; }
.buddy--big .buddy__bubble { font-size: 0.925rem; border-radius: 16px 16px 16px 4px; }
.games-head--arcade { align-items: flex-end; }
@media (max-width: 720px) {
  .games-head--arcade { flex-direction: column; align-items: stretch; }
  .buddy--big { margin-top: var(--sp-3); }
  .buddy--big .buddy__avatar { width: 3.75rem; height: 3.75rem; }
}

.mame { width: 100%; height: 100%; overflow: visible; display: block; }
.mame__shadow { fill: rgba(59, 52, 44, 0.09); }
.mame__body { transform-origin: 32px 58px; animation: mame-breathe 3.6s ease-in-out infinite; }
.mame__skin { fill: #fbf1e6; stroke: #e6cdb9; stroke-width: 1.6; }
.mame__leaf { fill: #8fbf8a; }
.mame__leaf--small { fill: #a9d3a3; }
.mame__eye { fill: var(--ink); }
.mame__glint { fill: #fff; }
.mame__cheek { fill: var(--accent-mid); opacity: 0.55; }
.mame__mouth, .mame__mouth-sad, .mame__eyes-happy path, .mame__eyes-sad path, .mame__eyes-sleepy path { fill: none; stroke: var(--ink); stroke-width: 1.7; stroke-linecap: round; }
.mame__mouth-open { fill: #d9788f; }
.mame__tear { fill: var(--primary-mid); }
.mame__zz text { fill: var(--primary-mid); font: 700 8px var(--font-sans); }
.mame__sparkle path { fill: #f3c94f; }
.mame__eyes { transform-origin: 32px 38.5px; transition: transform 0.12s; }
.mame.is-blinking .mame__eyes { transform: scaleY(0.12); }
.mame__eyes-happy, .mame__eyes-sad, .mame__eyes-sleepy, .mame__mouth-open, .mame__mouth-sad, .mame__tear, .mame__zz, .mame__sparkle { opacity: 0; transition: opacity 0.15s; }
/* happy */
.mame--happy .mame__eyes, .mame--happy .mame__mouth { opacity: 0; }
.mame--happy .mame__eyes-happy, .mame--happy .mame__mouth-open, .mame--happy .mame__sparkle { opacity: 1; }
.mame--happy .mame__body { animation: mame-bounce 0.55s ease-out 2; }
.mame--happy .mame__sparkle { animation: mame-twinkle 0.9s ease-in-out infinite; }
/* sad */
.mame--sad .mame__eyes, .mame--sad .mame__mouth { opacity: 0; }
.mame--sad .mame__eyes-sad, .mame--sad .mame__mouth-sad, .mame--sad .mame__tear { opacity: 1; }
.mame--sad .mame__body { animation: mame-droop 0.6s ease-out forwards; }
.mame--sad .mame__leaf { transform-origin: 32px 13px; transform: rotate(18deg); transition: transform 0.4s; }
/* think */
.mame--think .mame__eyes { transform: translate(1.5px, -1.5px); }
.mame--think .mame__body { animation: mame-tilt 0.8s ease-in-out infinite alternate; }
/* sleepy */
.mame--sleepy .mame__eyes, .mame--sleepy .mame__mouth { opacity: 0; }
.mame--sleepy .mame__eyes-sleepy, .mame--sleepy .mame__zz { opacity: 1; }
.mame--sleepy .mame__body { animation: mame-breathe 5.5s ease-in-out infinite; }
.mame--sleepy .mame__zz { animation: mame-zz 2.4s ease-in-out infinite; }
@keyframes mame-breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.025, 0.975); } }
@keyframes mame-bounce { 0% { transform: translateY(0) scale(1, 1); } 35% { transform: translateY(-7px) scale(0.95, 1.08); } 70% { transform: translateY(0) scale(1.06, 0.94); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes mame-droop { to { transform: translateY(2px) scale(1.06, 0.92); } }
@keyframes mame-tilt { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
@keyframes mame-twinkle { 0%, 100% { transform: scale(0.8); opacity: 0.7; } 50% { transform: scale(1.15); opacity: 1; } }
@keyframes mame-zz { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(4px, -8px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .mame__body, .mame--happy .mame__body, .mame--sad .mame__body, .mame--think .mame__body, .mame--sleepy .mame__body, .mame__sparkle, .mame__zz { animation: none !important; }
}

/* -- Listening --------------------------------------------------------------- */
.speak-btn, .voice-toggle { display: none; }
html.has-ja-voice .speak-btn, html.has-ja-voice .voice-toggle:not([hidden]) { display: inline-flex; }
.speak-btn {
  align-items: center; justify-content: center; gap: 0.3rem;
  width: 1.9rem; height: 1.9rem;
  padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--surface); color: var(--primary-ink);
  font-size: 0.9rem; line-height: 1; cursor: pointer;
  vertical-align: middle;
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.speak-btn:hover { border-color: var(--primary-mid); background: var(--primary-soft); transform: scale(1.06); }
.speak-btn:focus-visible { outline: 3px solid var(--primary-mid); outline-offset: 2px; }
.speak-btn.is-saying { animation: speak-pulse 0.7s ease-out; }
.speak-btn--inline { width: auto; height: auto; padding: 0.3rem 0.7rem; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 600; }
@keyframes speak-pulse { 0% { box-shadow: 0 0 0 0 rgba(61, 108, 146, 0.35); } 100% { box-shadow: 0 0 0 10px rgba(61, 108, 146, 0); } }
.voice-toggle.is-on { background: var(--primary-soft); border-color: var(--primary-mid); }

/* -- The word card ------------------------------------------------------------ */
.wcard {
  margin: var(--sp-3) auto 0;
  padding: var(--sp-4) var(--sp-5);
  max-width: 26rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  text-align: center;
}
.wcard.is-arriving { animation: wcard-in 0.4s ease-out; }
@keyframes wcard-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
.wcard__word { display: flex; align-items: center; justify-content: center; gap: 0.5rem; font-size: 2.2rem; line-height: 1.2; font-weight: 500; color: var(--ink); }
.wcard__reading { display: flex; justify-content: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.15rem; color: var(--soft); font-size: 1rem; }
.wcard__romaji { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.04em; color: var(--primary-ink); }
.wcard__meaning { margin-top: 0.4rem; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.wcard__example { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--line-strong); }
.wcard__example-label { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-weight: 700; }
.wcard__example-jp { margin-top: 0.3rem; font-size: 1.15rem; line-height: 1.5; color: var(--ink); }
.wcard__example-kana { font-size: 0.95rem; line-height: 1.5; color: var(--muted); }
.wcard__example-romaji { font-size: 0.78rem; color: var(--faint); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.wcard__example-en { margin-top: 0.15rem; color: var(--soft); font-size: 0.9rem; }
.wcard__example .speak-btn--inline { margin-top: 0.5rem; }
.wcard--compact { padding: var(--sp-3) var(--sp-4); }
.wcard-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.wcard-row { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.7rem; background: var(--surface-warm); border-radius: var(--radius-sm); }
.wcard-row__word { font-size: 1.15rem; font-weight: 500; }
.wcard-row__how { flex: 1; min-width: 0; font-size: 0.85rem; color: var(--soft); }

/* -- Romaji under the kana keys ------------------------------------------------ */
.wordle__key { position: relative; }
.wordle__key-romaji {
  display: none;
  position: absolute; left: 0; right: 0; bottom: 2px;
  font-size: 0.5rem; line-height: 1; font-weight: 700; letter-spacing: 0.02em;
  color: var(--faint); text-transform: lowercase;
  pointer-events: none;
}
.wordle.show-romaji .wordle__key-romaji { display: block; }
.wordle.show-romaji .wordle__key:not(.wordle__key--gap) { padding-bottom: 0.7rem; }
.wordle__romaji-switch[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary-mid); color: var(--primary-ink); }

/* -- Today: a ring a game --------------------------------------------------------- */
.today-set {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
}
.today-set__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.today-set__sub { margin-top: 0.15rem; }
.rings { list-style: none; padding: 0; margin: 0; display: flex; gap: var(--sp-4); align-items: flex-start; }
.ring { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; color: var(--soft); text-decoration: none; }
.ring:hover { text-decoration: none; }
.ring__dot {
  width: 2.8rem; height: 2.8rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2.5px dashed var(--line-strong);
  background: var(--surface-warm);
  font-size: 1.05rem; color: var(--faint);
  transition: transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
}
.ring:hover .ring__dot { transform: translateY(-2px) scale(1.05); border-color: var(--primary-mid); }
.ring.is-done .ring__dot, .rings__house.is-done .ring__dot { border-style: solid; border-color: var(--success); background: var(--success-soft); color: var(--success-ink); }
.ring.is-done .ring__dot::after { content: "✓"; position: absolute; font-size: 0.6rem; margin: 1.9rem 0 0 1.9rem; background: var(--success); color: #fff; border-radius: 50%; width: 1rem; height: 1rem; display: grid; place-items: center; }
.ring__label { font-size: 0.72rem; font-weight: 600; }
.rings__house { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; color: var(--soft); padding-left: var(--sp-3); border-left: 1px solid var(--line); }
.rings__house .ring__dot { font-size: 0.8rem; font-weight: 700; }
.rings__house.is-done .ring__dot { animation: ring-star 0.8s ease-out; font-size: 1.2rem; }
@keyframes ring-star { 0% { transform: scale(0.6) rotate(-20deg); } 60% { transform: scale(1.15) rotate(8deg); } 100% { transform: none; } }
@media (max-width: 600px) { .rings { gap: var(--sp-2); flex-wrap: wrap; } .ring__dot { width: 2.3rem; height: 2.3rem; font-size: 0.95rem; } .ring.is-done .ring__dot::after { margin: 1.6rem 0 0 1.6rem; } }

/* -- The word bank -------------------------------------------------------------- */
.bank {
  margin: var(--sp-4) 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: linear-gradient(160deg, var(--surface-warm) 0%, var(--surface) 70%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}
.bank__title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; }
.bank__jp { color: var(--faint); font-size: 0.7em; margin-left: 0.35rem; }
.bank__line { display: flex; gap: var(--sp-4); flex-wrap: wrap; margin-top: 0.3rem; font-size: 0.9rem; color: var(--soft); }
.bank__stat strong { font-size: 1.25rem; color: var(--ink); margin-right: 0.2rem; }
.bank__stat--mastered strong { color: var(--success-ink); }
.bank__stat--tricky strong { color: var(--accent-ink); }

/* -- The review drill ------------------------------------------------------------ */
.drill { max-width: 34rem; margin-inline: auto; }
.drill__dots { list-style: none; padding: 0; margin: var(--sp-3) 0 var(--sp-2); display: flex; gap: 0.4rem; justify-content: center; }
.drill__dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--line-strong); transition: transform var(--transition), background var(--transition); }
.drill__dot.is-current { background: var(--primary-mid); transform: scale(1.35); }
.drill__dot.is-right { background: var(--success); }
.drill__dot.is-wrong { background: var(--accent); }
.drill__card { min-height: 9rem; }
.drill__reveal { margin-top: var(--sp-3); text-align: center; }
.drill__verdict { font-weight: 700; font-size: 1.05rem; }
.drill__verdict.is-right { color: var(--success-ink); }
.drill__verdict.is-wrong { color: var(--danger-ink); }
.drill__streak { margin-top: var(--sp-3); font-size: 0.85rem; color: var(--soft); letter-spacing: 0.08em; }
.drill__reveal.is-mastered .drill__streak { color: var(--success-ink); font-weight: 700; letter-spacing: normal; }
.drill__next { margin-top: var(--sp-3); display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.drill__end-line { color: var(--soft); }
.drill__empty-actions { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-4); }
.arcade__learn { margin-top: var(--sp-2); color: var(--primary-ink); font-weight: 600; }
.sentence__piece.is-placed { box-shadow: inset 0 0 0 2px var(--success); }
.tutorial__pile { display: flex; gap: 0.4rem; }
.tutorial__pile .jp { padding: 0.3rem 0.6rem; background: var(--accent-soft); border-radius: var(--radius-sm); color: var(--accent-ink); font-weight: 600; }
.tutorial__pips { display: flex; gap: 0.3rem; align-items: center; font-size: 1.2rem; color: var(--success-ink); }
.tutorial__pips em { font-style: normal; color: #e6b23a; margin-left: 0.3rem; }

/* ==========================================================================
   24. How it works — the journey, told with the real numbers
   ========================================================================== */
.hiw__hero { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-7); align-items: center; }
.hiw__title { font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.12; }
.hiw__sub { margin-top: var(--sp-4); color: var(--muted); font-size: 1.05rem; max-width: 36rem; }
.hiw__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.hiw__fact {
  padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 0.2rem;
}
.hiw__fact strong { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--primary-ink); }
.hiw__fact span { font-size: 0.85rem; color: var(--muted); }
.hiw__section { margin-top: var(--sp-8); }
.hiw__h2 { font-size: 1.6rem; margin-bottom: var(--sp-5); }
.journey { list-style: none; padding: 0; margin: 0; position: relative; max-width: 44rem; }
.journey::before { content: ""; position: absolute; left: 1.35rem; top: 1.5rem; bottom: 1.5rem; width: 2px; background: var(--line-strong); }
.journey__step { position: relative; display: flex; gap: var(--sp-5); padding: 0 0 var(--sp-6) 0; }
.journey__step:last-child { padding-bottom: 0; }
.journey__number {
  position: relative; z-index: 1; flex: none;
  width: 2.7rem; height: 2.7rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--surface); border: 2px solid var(--primary-mid);
  font-family: var(--font-display); font-size: 1.2rem; color: var(--primary-ink);
  box-shadow: 0 0 0 5px var(--paper);
}
.journey__body { padding-top: 0.35rem; }
.journey__title { font-size: 1.15rem; font-weight: 700; font-family: var(--font-sans); margin-bottom: 0.35rem; }
.journey__body p { color: var(--soft); }
.journey__aside { margin-top: 0.4rem; font-size: 0.875rem; color: var(--faint); padding-left: 0.8rem; border-left: 2px solid var(--accent-mid); }
/* -- The walkthrough: eight steps, each with a little screen ---------------- */
.hiw__lead { margin: calc(-1 * var(--sp-3)) 0 var(--sp-6); color: var(--muted); max-width: 40rem; }
.walk { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-5); }
.walk__step {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-6); align-items: center;
  padding: var(--sp-5) var(--sp-6);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.walk__step:nth-child(even) .walk__text { order: 2; }
.walk__text { position: relative; padding-left: 3.4rem; }
.walk__number {
  position: absolute; left: 0; top: -0.1rem;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem;
  box-shadow: 0 3px 0 var(--accent-strong);
}
.walk__title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; margin-bottom: 0.4rem; }
.walk__text p { color: var(--soft); }
.walk__then { margin-top: 0.6rem; font-size: 0.92rem; color: var(--muted); padding-left: 0.8rem; border-left: 3px solid var(--accent-mid); }
.walk__link { display: inline-block; margin-top: 0.8rem; font-weight: 700; }
.walk__shot { display: grid; justify-items: center; }

/* The little screens: drawn with the site's own colours, never a real page. */
.shot {
  width: 100%; max-width: 19rem;
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 0.9rem 1rem; font-size: 0.78rem; color: var(--soft);
  box-shadow: inset 0 1px 0 #fff, 0 10px 24px -16px rgba(120, 70, 40, 0.35);
}
.shot__title { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; color: var(--ink); margin-bottom: 0.6rem; }
.shot__field { display: grid; gap: 0.15rem; margin-bottom: 0.45rem; }
.shot__field span { font-size: 0.66rem; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: 0.05em; }
.shot__field i { font-style: normal; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; padding: 0.3rem 0.5rem; color: var(--ink); }
.shot__field--half i { width: 55%; }
.shot__btn {
  margin-top: 0.5rem; text-align: center; background: var(--accent); color: #fff; font-weight: 700;
  border-radius: 999px; padding: 0.42rem 0.8rem; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
}
.shot__btn--dark { background: var(--ink); color: var(--surface); }
.shot__btn--sm { display: inline-block; margin: 0; padding: 0.3rem 0.7rem; font-size: 0.74rem; }
.shot__ghost { display: inline-block; border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.74rem; background: var(--surface); color: var(--ink); font-weight: 600; }
.shot__actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.7rem; }
.shot__row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; color: var(--ink); }
.shot__row b { font-family: var(--font-display); }
.shot__lock { margin-top: 0.5rem; text-align: center; font-size: 0.68rem; color: var(--faint); }
.shot--cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; }
.shot__card { background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; padding: 0.6rem 0.4rem; text-align: center; display: grid; gap: 0.1rem; }
.shot__card b { color: var(--ink); font-size: 0.74rem; }
.shot__card span { font-size: 0.66rem; color: var(--faint); }
.shot__card em { font-style: normal; font-family: var(--font-display); font-weight: 800; color: var(--primary-ink); font-size: 0.95rem; }
.shot__card--pick { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.shot__month { font-family: var(--font-display); font-weight: 700; color: var(--ink); margin-bottom: 0.4rem; text-transform: capitalize; }  /* "octubre" as a heading: the Spanish stays lower case for dates in a sentence */
.shot__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.2rem; text-align: center; }
.shot__grid i { font-style: normal; font-size: 0.6rem; color: var(--faint); font-weight: 700; }
.shot__grid b, .shot__grid s { display: grid; place-items: center; aspect-ratio: 1; border-radius: 8px; font-weight: 600; color: var(--faint); text-decoration: none; }
.shot__grid b.has { background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); }
.shot__grid b.pick { background: var(--accent); border-color: var(--accent); color: #fff; }
.shot__slots { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.6rem; }
.shot__slots span { border: 1px solid var(--line-strong); background: var(--surface); border-radius: 999px; padding: 0.2rem 0.55rem; font-weight: 600; color: var(--ink); }
.shot__slots .pick { background: var(--primary); border-color: var(--primary); color: #fff; }
.shot__note { margin-top: 0.45rem; font-size: 0.68rem; color: var(--faint); }
.shot__badge { font-family: var(--font-sans); font-size: 0.66rem; font-weight: 700; background: var(--success-soft); color: var(--success-ink); border-radius: 999px; padding: 0.15rem 0.5rem; }
.shot__big { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--ink); }
.shot__sub { color: var(--muted); }
.shot__count { margin-top: 0.3rem; font-size: 0.7rem; color: var(--primary-ink); font-weight: 700; }
.shot--call { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; padding-bottom: 2.2rem; }
.shot__tile { aspect-ratio: 4 / 3; border-radius: 12px; background: var(--primary-soft); display: grid; place-items: center; align-content: center; gap: 0.2rem; }
.shot__tile--maria { background: var(--accent-soft); }
.shot__tile span { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); font-weight: 800; }
.shot__tile em { font-style: normal; font-size: 0.66rem; color: var(--muted); }
.shot__bubble { position: absolute; left: 50%; bottom: 0.6rem; transform: translateX(-50%); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0.25rem 0.7rem; font-size: 0.9rem; color: var(--ink); white-space: nowrap; }
.shot__word { display: grid; grid-template-columns: auto auto 1fr; gap: 0.5rem; align-items: baseline; padding: 0.3rem 0; border-top: 1px dashed var(--line-strong); }
.shot__word b { font-size: 1rem; color: var(--ink); font-weight: 600; }
.shot__word span { font-size: 0.7rem; color: var(--muted); }
.shot__word em { font-style: normal; text-align: right; color: var(--soft); }
.shot__task { margin-top: 0.5rem; background: var(--sun-soft); border-radius: 10px; padding: 0.35rem 0.6rem; color: var(--ink); }
.shot__bar { height: 0.55rem; border-radius: 999px; background: var(--line); overflow: hidden; }
.shot__bar i { display: block; height: 100%; background: var(--leaf); border-radius: 999px; }

@media (max-width: 767px) {
  .walk__step { grid-template-columns: 1fr; gap: var(--sp-4); padding: var(--sp-4); }
  .walk__step:nth-child(even) .walk__text { order: 0; }
  .walk__shot { order: 2; }
  .walk__text { padding-left: 3rem; }
}

.hiw__three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
.hiw__phase {
  padding: var(--sp-5); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card);
  color: var(--soft);
}
.hiw__phase--during { background: linear-gradient(160deg, var(--accent-soft) 0%, var(--surface) 80%); border-color: var(--accent-mid); }
.hiw__phase-when { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-ink); font-weight: 700; margin-bottom: 0.5rem; }
.hiw__know { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-6); }
.hiw__know-item h3 { font-size: 1rem; font-family: var(--font-sans); font-weight: 700; margin-bottom: 0.3rem; }
.hiw__know-item p { color: var(--soft); font-size: 0.95rem; }
.hiw__cta-title { font-size: 1.3rem; font-family: var(--font-display); font-weight: 700; }
.hiw .perks { margin-top: var(--sp-8); padding-block: 0; }
.hiw .perks .container { padding-inline: 0; max-width: none; }
@media (max-width: 860px) {
  .hiw__hero { grid-template-columns: 1fr; gap: var(--sp-5); }
  .hiw__three { grid-template-columns: 1fr; }
  .hiw__know { grid-template-columns: 1fr; }
}

/* -- Words of the day: one pip per word on the level card ------------------- */
.level__today { display: flex; align-items: center; gap: 0.3rem; margin-top: var(--sp-3); }
.level__pip { width: 0.7rem; height: 0.7rem; border-radius: 50%; border: 2px solid var(--line-strong); background: transparent; }
.level__pip.is-won { background: var(--game-right, var(--success)); border-color: var(--game-right, var(--success)); }
.level__pip.is-lost { background: var(--game-wrong, var(--line-strong)); border-color: var(--game-wrong, var(--line-strong)); }
.level__pip.is-open { border-color: var(--primary); background: var(--primary-soft); }
.level__today .small { margin-left: 0.3rem; }
.wordle__all-done { font-size: 0.85rem; color: var(--success-ink); font-weight: 600; align-self: center; }

/* -- Keys ruled out: crossed through, so the eye skips them ------------------- */
.wordle__key.is-wrong {
  background: var(--surface-warm); border-color: var(--line); color: var(--faint);
  opacity: 0.55; text-decoration: none;
}
.wordle__key.is-wrong::before {
  content: ""; position: absolute; left: 18%; right: 18%; top: 50%;
  height: 2px; background: var(--faint); transform: rotate(-35deg); border-radius: 2px;
  pointer-events: none;
}
.wordle__key.is-wrong .wordle__key-romaji { color: var(--faint); }
/* Tapped anyway: it can't go in, and says so (static/js/wordle.js). */
.wordle__key.is-wrong { cursor: not-allowed; }
.wordle__key.is-refused { animation: key-refuse 0.32s ease; }
@keyframes key-refuse {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-2px); }
}
@media (prefers-reduced-motion: reduce) { .wordle__key.is-refused { animation: none; } }

/* -- Book of the week: stars and thumbs ------------------------------------- */
.book__stars { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.35rem; }
.book__stars-row { display: inline-flex; gap: 0.1rem; }
.book__star { font-style: normal; font-size: 1rem; color: var(--line-strong); }
.book__star.is-lit { color: #e6b23a; text-shadow: 0 1px 0 rgba(59, 52, 44, 0.12); }
.book__foot { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-top: var(--sp-3); }
.votes { display: inline-flex; gap: 0.35rem; }
.votes__btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--soft);
  font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer;
  transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition);
}
.votes__btn:hover { transform: translateY(-1px); border-color: var(--primary-mid); }
.votes__btn.is-on { background: var(--primary-soft); border-color: var(--primary-mid); color: var(--primary-ink); }
.votes__btn:focus-visible { outline: 3px solid var(--primary-mid); outline-offset: 2px; }

/* -- Just paid: the banner on the booking page ------------------------------ */
.purchased { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; }
.purchased__later { flex: none; }
.booking-lesson { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.booking-lesson__switch { margin-left: auto; }

/* ==========================================================================
   22. Life in the background: the sky, the little drawings, scroll reveals
   ========================================================================== */

/* -- The sky: clouds drift, sparrows pass (behind the page, like petals) --- */
.sky { position: fixed; z-index: -1; pointer-events: none; height: auto; }
.sky__cloud { top: 9vh; left: -16vw; width: clamp(120px, 12vw, 200px); animation: sky-drift var(--sky-d, 160s) linear infinite; will-change: transform; }
.sky__cloud--a { --sky-d: 170s; animation-delay: -40s; }
.sky__cloud--b { --sky-d: 230s; top: 17vh; width: clamp(90px, 9vw, 150px); animation-delay: -150s; opacity: 0.8; }
@keyframes sky-drift { from { transform: translateX(0); } to { transform: translateX(120vw); } }
.sky__birds { top: 12vh; left: 0; width: 104px; opacity: 0; animation: sky-cross 64s linear infinite; animation-delay: 9s; }
@keyframes sky-cross {
  0%     { opacity: 0; transform: translate(-12vw, 4vh); }
  2%     { opacity: 0.85; }
  33%    { opacity: 0.85; transform: translate(112vw, -6vh); }
  33.1%, 100% { opacity: 0; transform: translate(-12vw, 4vh); }
}
.sky__wing { transform-box: fill-box; animation: sky-flap 0.55s ease-in-out infinite alternate; }
.sky__wing--l { transform-origin: 100% 100%; }
.sky__wing--r { transform-origin: 0 100%; animation-direction: alternate-reverse; }
@keyframes sky-flap { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
.sky__bird--2 .sky__wing { animation-delay: -0.2s; }
@media (max-width: 900px) { .sky__cloud--b { display: none; } }
@media (prefers-reduced-motion: reduce) { .sky { animation: none !important; } .sky__birds { display: none; } .sky__wing { animation: none; } }
@media print { .sky { display: none; } }

/* -- The little drawings: one per section, in a corner, behind the words --
   The section isolates its stacking, so a drawing at z-index -1 sits above
   the section's own background and below everything written in it. */
.section, .cta-band, .page { position: relative; isolation: isolate; }
.deco {
  position: absolute; z-index: -1; pointer-events: none; user-select: none;
  width: var(--deco-w, 6rem); opacity: 0.9;
}
.deco > svg { display: block; width: 100%; height: auto; overflow: visible; }
.deco--s { --deco-w: 4rem; }
.deco--m { --deco-w: 6rem; }
.deco--l { --deco-w: 9rem; }
.deco--top-left { top: var(--sp-5); left: var(--sp-4); }
.deco--top-right { top: var(--sp-5); right: var(--sp-4); }
.deco--bottom-left { bottom: var(--sp-5); left: var(--sp-4); }
.deco--bottom-right { bottom: var(--sp-5); right: var(--sp-4); }
.deco--mid-left { top: 50%; left: var(--sp-4); transform: translateY(-50%); }
.deco--mid-right { top: 50%; right: var(--sp-4); transform: translateY(-50%); }
/* Beside a narrow page, out in the margin; only where there is a margin. */
.deco--outside-left { top: 30%; left: calc(-1 * var(--deco-w, 6rem) - 2.5rem); display: none; }
.deco--outside-right { top: 30%; right: calc(-1 * var(--deco-w, 6rem) - 2.5rem); display: none; }
@media (min-width: 1200px) { .deco--outside-left, .deco--outside-right { display: block; } }
.deco--lantern.deco--top-left, .deco--lantern.deco--top-right { top: 0; }
.deco--bamboo { bottom: 0; top: auto; opacity: 0.55; }

/* Each drawing has one slow movement. */
.deco__swing { transform-box: view-box; transform-origin: 50% 0; animation: deco-swing 5s ease-in-out infinite alternate; }
@keyframes deco-swing { from { transform: rotate(-4deg); } to { transform: rotate(4deg); } }
.deco__glide { animation: deco-glide 7s ease-in-out infinite alternate; }
@keyframes deco-glide { from { transform: translate(0, 0) rotate(-2deg); } to { transform: translate(6px, -10px) rotate(3deg); } }
.deco__wisp { animation: deco-steam 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.deco__wisp--2 { animation-delay: -1.6s; }
@keyframes deco-steam { 0% { opacity: 0; transform: translateY(6px) scaleY(0.8); } 30% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-14px) scaleY(1.15); } }
.deco__shimmer { animation: deco-shimmer 4s ease-in-out infinite alternate; }
@keyframes deco-shimmer { from { opacity: 0.15; transform: translateX(0); } to { opacity: 0.35; transform: translateX(6px); } }
.deco__paw { transform-box: fill-box; transform-origin: 20% 90%; animation: deco-paw 1.6s ease-in-out infinite alternate; }
@keyframes deco-paw { from { transform: rotate(0deg); } to { transform: rotate(-16deg); } }
.deco__wobble { transform-box: fill-box; transform-origin: 50% 100%; animation: deco-wobble 6s ease-in-out infinite alternate; }
@keyframes deco-wobble { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.deco__sway { animation: deco-sway 6s ease-in-out infinite alternate; }
@keyframes deco-sway { from { transform: rotate(-1.5deg); } to { transform: rotate(1.5deg); } }
.deco--fan .deco__swing { animation-duration: 7s; }

@media (max-width: 900px) {
  .deco { display: none; }
  .deco--keep { display: block; --deco-w: 3.5rem; opacity: 0.7; }
}
@media (prefers-reduced-motion: reduce) {
  .deco__swing, .deco__glide, .deco__wisp, .deco__shimmer, .deco__paw, .deco__wobble, .deco__sway { animation: none !important; }
}
@media print { .deco { display: none; } }

/* -- Scroll reveals: added by reveal.js, so nothing is hidden without it --- */
.rv { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.rv--in { opacity: 1; transform: none; }

/* ==========================================================================
   23. Colour and soul on the landing page: tiles, blobs, sparkles, Mame
   ========================================================================== */

/* -- Feature cards: a pastel tile each (pink, blue, sun), a blob in the corner */
.card--feature { position: relative; overflow: hidden; isolation: isolate; }
.card--feature::before {
  content: ""; position: absolute; top: -3rem; right: -3rem; width: 8.5rem; height: 8.5rem;
  border-radius: 50%; background: var(--tile, var(--accent-soft)); opacity: 0.7; z-index: -1;
  transition: transform var(--transition);
}
.card--feature:hover::before { transform: scale(1.15); }
.card--feature .feature__mark { background: var(--tile, var(--accent-soft)); }
.features > .card:nth-child(3n + 1) { --tile: var(--accent-soft); }
.features > .card:nth-child(3n + 2) { --tile: var(--surface-cool); }
.features > .card:nth-child(3n + 3) { --tile: var(--sun-soft); }
.features > .card:nth-child(even) .feature__mark { transform: rotate(4deg); }

/* -- Soft blobs behind a section: one pink, one blue, big and faint --------- */
.section--blobs { overflow: hidden; }
.section--blobs::before, .section--blobs::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, var(--blob) 0%, var(--blob) 35%, transparent 70%);
  opacity: 0.7;
}
.section--blobs::before { width: 40rem; height: 40rem; left: -16rem; top: -10rem; --blob: var(--accent-soft); }
.section--blobs::after { width: 34rem; height: 34rem; right: -14rem; bottom: -12rem; --blob: var(--surface-cool); }
.section--blobs-flip::before { left: auto; right: -16rem; --blob: var(--surface-cool); }
.section--blobs-flip::after { right: auto; left: -14rem; --blob: var(--accent-soft); }

/* -- Sparkles by the headline: three little stars that twinkle ------------- */
.hero__copy { position: relative; }
.sparkle {
  position: absolute; width: 14px; height: 14px; pointer-events: none;
  background: var(--spark, var(--sun));
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: sparkle 2.8s ease-in-out infinite;
}
.sparkle--1 { top: 2.4rem; left: 20rem; --spark: var(--sun); }
.sparkle--2 { top: 5.6rem; left: 24rem; width: 9px; height: 9px; --spark: var(--accent-mid); animation-delay: -0.9s; }
.sparkle--3 { top: 8rem; left: -1.6rem; width: 11px; height: 11px; --spark: var(--primary-mid); animation-delay: -1.8s; }
@keyframes sparkle { 0%, 100% { opacity: 0.2; transform: scale(0.6) rotate(0deg); } 50% { opacity: 1; transform: scale(1.1) rotate(20deg); } }
@media (max-width: 860px) { .sparkle { display: none; } }

/* -- Mame waving from the corner of the students section ------------------ */
.perks { position: relative; isolation: isolate; }
.mascot-sprite { position: absolute; pointer-events: none; z-index: 0; }
.mascot-sprite--mame { top: 0; right: var(--sp-4); width: 5.5rem; }
.mascot-sprite--mame .mame { width: 100%; height: auto; }
.mascot-sprite__bubble {
  position: absolute; right: 100%; top: 0.4rem; margin-right: 0.5rem;
  display: flex; flex-direction: column; gap: 1px; align-items: flex-end;
  padding: 0.4rem 0.7rem; border-radius: var(--radius) var(--radius) 4px var(--radius);
  background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-card);
  font-size: 0.72rem; color: var(--soft); white-space: nowrap;
  animation: sprite-bob 3.6s ease-in-out infinite;
}
.mascot-sprite__bubble .jp { font-family: var(--font-jp); font-size: 0.95rem; color: var(--ink); }
@keyframes sprite-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (max-width: 900px) { .mascot-sprite--mame { display: none; } }

/* -- The pricing cards: a faint sketch of Japan in each corner ------------- */
.product-card { isolation: isolate; }
.product-card__title { padding-right: 3.4rem; }
.deco--card { top: 0.9rem; right: 0.9rem; --deco-w: 3.4rem; opacity: 0.55; display: block; }
/* The torii is drawn in whatever colour its place asks for: rose on a card, white on the dark band. */
.deco--torii { color: var(--accent-ink); }
.deco--torii .deco__torii { opacity: 0.35; }
.cta-band .deco--torii { color: #fff; }
.cta-band .deco--torii .deco__torii { opacity: 0.18; }
.card--featured .deco--card { opacity: 0.7; }
@media (max-width: 900px) { .deco--card.deco--keep { --deco-w: 3rem; opacity: 0.5; } }

/* -- The numbers band: a small emoji over each figure ---------------------- */
.metric::before {
  content: "🎓"; display: block; font-size: 1.4rem; margin-bottom: 0.2rem;
  animation: metric-bob 4s ease-in-out infinite;
}
.metric:nth-child(2)::before { content: "🌏"; animation-delay: -1s; }
.metric:nth-child(3)::before { content: "💬"; animation-delay: -2s; }
.metric:nth-child(4)::before { content: "⭐"; animation-delay: -3s; }
@keyframes metric-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* -- The blossom sprig blooms, Fuji's sun glows ---------------------------- */
.deco__bloom { transform-box: fill-box; transform-origin: 50% 50%; animation: deco-bloom 5s ease-in-out infinite alternate; }
@keyframes deco-bloom { from { transform: scale(0.94); } to { transform: scale(1.06); } }
.deco__sun { animation: deco-glow 4s ease-in-out infinite alternate; }
@keyframes deco-glow { from { opacity: 0.6; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .sparkle, .mascot-sprite__bubble, .metric::before, .deco__bloom, .deco__sun, .card--feature::before { animation: none !important; }
}

/* -- Blocked time: the month you click, beside the form it fills ----------- */
.block-picker { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(16rem, 0.9fr); gap: var(--sp-6); align-items: start; }
.block-picker__form { display: grid; gap: var(--sp-3); padding: var(--sp-4); background: var(--surface-warm); border-radius: var(--radius); }
.block-picker__form .field { margin: 0; }
.block-picker__chosen { color: var(--accent-ink-strong); }
.block-picker__presets { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.block-picker__times[hidden], .block-picker__presets[hidden] { display: none; }
.cal--blocks .cal__day--pick {
  min-height: 4.6rem; align-items: stretch; justify-content: flex-start; gap: 2px;
  border: 1px solid transparent; background: var(--surface); cursor: pointer; font: inherit; color: inherit;
  transition: background var(--transition), border-color var(--transition);
}
.cal--blocks .cal__day--pick:hover { border-color: var(--primary-mid); background: var(--primary-soft); }
.cal--blocks .cal__day--pick .cal__date { align-self: flex-end; font-size: 0.78rem; color: var(--faint); }
.cal--blocks .cal__day--past { opacity: 0.55; }
.cal--blocks .cal__day--outside { opacity: 0.35; }
.cal--blocks .cal__day--blocked { background: var(--accent-soft); }
.cal--blocks .cal__day--chosen { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.cal--blocks .cal__day--chosen .cal__date { color: var(--accent-ink-strong); font-weight: 700; }
.cal--blocks .cal__day--today .cal__date { color: var(--surface); }
.cal__chip--blocked { background: var(--accent-soft); color: var(--accent-ink-strong); font-size: 0.66rem; }
.cal__note { font-size: 0.64rem; color: var(--primary-ink); font-weight: 700; }
@media (max-width: 900px) {
  .block-picker { grid-template-columns: 1fr; }
  .cal--blocks .cal__day--pick { min-height: 3.2rem; }
  .cal--blocks .cal__chip { display: none; }
  .cal--blocks .cal__day--blocked::after { content: "✕"; font-size: 0.6rem; color: var(--accent-ink-strong); }
}

/* -- The lesson bell: a small pop-up when a lesson is about to start ------- */
.bell {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4); z-index: 90;
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--sp-3);
  max-width: min(26rem, calc(100vw - 2rem));
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface); border: 1px solid var(--accent-mid); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop);
  transform: translateY(1rem); opacity: 0; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.bell--in { transform: none; opacity: 1; }
.bell__ring { font-size: 1.5rem; animation: bell-ring 1.2s ease-in-out 3; transform-origin: 50% 0; }
@keyframes bell-ring { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(18deg); } 40% { transform: rotate(-14deg); } 60% { transform: rotate(10deg); } 80% { transform: rotate(-6deg); } }
.bell__title { font-weight: 700; font-size: 0.95rem; }
.bell__text { font-size: 0.85rem; color: var(--muted); }
.bell__close { background: none; border: 0; font-size: 1.3rem; line-height: 1; color: var(--faint); padding: 0.2rem 0.4rem; border-radius: 50%; }
.bell__close:hover { background: var(--surface-warm); color: var(--ink); }
@media (max-width: 640px) {
  .bell { left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); grid-template-columns: auto 1fr auto; }
  .bell__actions { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .bell { transition: none; } .bell__ring { animation: none; } }

/* -- The daily streak: a flame that grows, seven dots, omamori charms ------ */
.streak {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(60% 120% at 0% 50%, rgba(255, 170, 90, 0.22), transparent 70%),
    linear-gradient(135deg, #fff7ee, var(--surface-warm));
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.streak--out { background: linear-gradient(135deg, #f7f4f5, var(--surface)); }
.streak--risk { border-color: #f4b06a; }
.streak--done { border-color: #f5a8bd; }
.streak--blaze, .streak--legend {
  background:
    radial-gradient(60% 120% at 0% 50%, rgba(255, 140, 70, 0.32), transparent 70%),
    linear-gradient(135deg, #fff1e4, #ffe4ec);
}
.streak__flame { width: 7.6rem; height: 8.8rem; flex: none; display: grid; place-items: end center; }
.streak__flame .flame { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; }
.streak--spark .streak__flame .flame { transform: scale(0.8); }
.streak--small .streak__flame .flame { transform: scale(0.86); }
.streak--blaze .streak__flame .flame { transform: scale(1.06); }
.streak--legend .streak__flame .flame { transform: scale(1.12); }
.flame__outer, .flame__inner, .flame__core { transform-origin: 50% 100%; }
.flame__outer { animation: flame-lick 1.1s ease-in-out infinite alternate; }
.flame__inner { animation: flame-lick 0.9s ease-in-out infinite alternate-reverse; }
.flame__core { animation: flame-lick 0.7s ease-in-out infinite alternate; }
.flame__sparks circle { animation: spark-rise 1.8s ease-out infinite; opacity: 0; }
.flame__sparks circle:nth-child(2) { animation-delay: 0.6s; }
.flame__sparks circle:nth-child(3) { animation-delay: 1.1s; }
.flame__glow { animation: flame-glow 1.4s ease-in-out infinite alternate; }
@keyframes flame-lick { from { transform: scaleY(1) scaleX(1) skewX(-1.5deg); } to { transform: scaleY(1.06) scaleX(0.96) skewX(1.5deg); } }
@keyframes spark-rise { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }
@keyframes flame-glow { from { opacity: 0.6; } to { opacity: 1; } }
.streak--out .flame__outer path { fill: url(#fl-out); }
.streak--out .flame__inner, .streak--out .flame__core, .streak--out .flame__face, .streak--out .flame__sparks, .streak--out .flame__glow { display: none; }
.streak--out .flame__outer { animation: none; opacity: 0.55; }
.streak--spark .flame__face { display: none; }
.streak--risk .streak__flame .flame { animation: flame-worry 1.6s ease-in-out infinite; }
@keyframes flame-worry { 0%, 100% { filter: none; } 50% { filter: saturate(0.6) brightness(1.05); } }

.streak__eyebrow { margin: 0 0 0.1rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); }
.streak__eyebrow .jp { margin-left: 0.4rem; letter-spacing: 0; text-transform: none; color: var(--muted); font-weight: 600; }
.streak__count { display: flex; align-items: baseline; gap: 0.45rem; margin: 0; line-height: 1; }
.streak__days { font-family: var(--font-display); font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.streak__unit { font-size: 1.05rem; font-weight: 700; color: var(--muted); }
.streak__line { margin: 0.3rem 0 0.9rem; color: var(--muted); }
.streak__week { list-style: none; display: flex; gap: 0.45rem; padding: 0; margin: 0 0 0.9rem; }
.streak__dot {
  width: 2.35rem; display: grid; justify-items: center; gap: 0.2rem;
  font-size: 0.7rem; font-weight: 800; color: var(--muted);
}
.streak__dot-mark {
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center; font-size: 1rem;
  background: var(--surface); border: 2px dashed var(--line-strong);
  transition: transform var(--transition);
}
.streak__dot.is-done .streak__dot-mark { background: linear-gradient(180deg, #ffd166, #ff8a3d); border: 2px solid #ff8a3d; box-shadow: 0 3px 0 rgba(232, 69, 95, 0.25); animation: check-pop 0.4s ease both; }
.streak__dot.is-protected .streak__dot-mark { background: var(--surface-cool); border: 2px solid var(--primary-mid); }
.streak__dot.is-today .streak__dot-label { color: var(--accent-ink); }
.streak__dot.is-today:not(.is-done) .streak__dot-mark { border-color: var(--accent); animation: today-pulse 1.6s ease-in-out infinite; }
@keyframes today-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(207, 61, 102, 0.35); } 50% { box-shadow: 0 0 0 6px rgba(207, 61, 102, 0); } }
.streak__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; }
.streak__goal { display: grid; gap: 0.3rem; min-width: 11rem; }
.streak__goal-text { font-size: 0.82rem; font-weight: 700; color: var(--muted); }
.streak__goal-bar { display: block; height: 8px; border-radius: 999px; background: rgba(51, 42, 48, 0.08); overflow: hidden; }
.streak__goal-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffb347, var(--accent)); animation: xp-grow 0.9s ease-out both; --xp-percent: 100%; }
.streak__omamori { display: inline-flex; align-items: center; gap: 0.25rem; }
.streak__charm { font-size: 1.1rem; filter: grayscale(1); opacity: 0.35; }
.streak__charm.is-held { filter: none; opacity: 1; animation: check-pop 0.5s ease both; }
.streak__cta { display: grid; justify-items: center; gap: 0.5rem; }
.streak__done { width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; font-weight: 900; color: #fff; background: linear-gradient(180deg, #ff9f43, var(--accent)); box-shadow: 0 4px 0 rgba(181, 47, 85, 0.3); animation: check-pop 0.5s ease both; }
@media (max-width: 720px) {
  .streak { grid-template-columns: auto 1fr; padding: var(--sp-4); gap: var(--sp-4); }
  .streak__flame { width: 4.6rem; height: 5.4rem; }
  .streak__cta { grid-column: 1 / -1; grid-auto-flow: column; justify-content: start; }
  .streak__week { gap: 0.3rem; }
  .streak__dot { width: 1.9rem; }
  .streak__dot-mark { width: 1.7rem; height: 1.7rem; font-size: 0.8rem; }
}

/* the flame pill in the header */
.streak-pill {
  display: inline-flex; align-items: center; gap: 0.25rem; flex: none;
  padding: 0.25rem 0.6rem 0.25rem 0.45rem;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink);
  font-size: 0.8rem; font-weight: 800; white-space: nowrap;
  transition: transform var(--transition), box-shadow var(--transition);
}
.streak-pill:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-card); }
.streak-pill__flame { font-size: 1rem; line-height: 1; }
.streak-pill--out .streak-pill__flame { filter: grayscale(1); opacity: 0.5; }
.streak-pill--risk { border-color: #f4b06a; background: #fff6ea; }
.streak-pill--risk .streak-pill__flame { animation: pill-flicker 1.2s ease-in-out infinite; }
.streak-pill--done { border-color: #f5a8bd; background: linear-gradient(180deg, #fff, #ffeef3); }
.streak-pill--blaze, .streak-pill--legend { border-color: #ff8a3d; background: linear-gradient(180deg, #fff6ea, #ffe4ec); }
.streak-pill.is-bumped { animation: check-pop 0.6s ease both; }
@keyframes pill-flicker { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* the cheer: a short full-screen moment when a day is newly counted */
.cheer {
  position: fixed; inset: 0; z-index: 1200;
  display: grid; place-items: center; padding: var(--sp-4);
  background: rgba(51, 42, 48, 0.42);
  animation: pop-in 0.25s ease both;
  cursor: pointer;
}
.cheer.is-leaving { opacity: 0; transition: opacity 0.35s ease; }
.cheer__card {
  width: min(22rem, 100%); text-align: center;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #fff9f0, #fff);
  box-shadow: 0 30px 60px rgba(51, 42, 48, 0.3);
  animation: cheer-rise 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}
.cheer--milestone .cheer__card { background: linear-gradient(180deg, #fff3e0, #ffe6ee); box-shadow: 0 30px 60px rgba(207, 61, 102, 0.35); }
@keyframes cheer-rise { from { transform: translateY(24px) scale(0.92); opacity: 0; } to { transform: none; opacity: 1; } }
.cheer__flame { width: 7rem; height: 8rem; margin: 0 auto; }
.cheer__flame .flame { width: 100%; height: 100%; overflow: visible; transform-origin: 50% 100%; animation: cheer-grow 0.9s cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
.cheer__outer, .cheer__inner, .cheer__core { transform-origin: 50% 100%; }
.cheer__outer { animation: flame-lick 0.9s ease-in-out infinite alternate; }
.cheer__inner { animation: flame-lick 0.7s ease-in-out infinite alternate-reverse; }
@keyframes cheer-grow { from { transform: scale(0.3); } to { transform: scale(1); } }
.cheer__count { margin: 0.4rem 0 0; line-height: 1; }
.cheer__days { font-family: var(--font-display); font-size: 3.4rem; font-weight: 900; letter-spacing: -0.02em; color: var(--ink); }
.cheer__unit { font-weight: 800; color: var(--accent-ink); font-size: 1.05rem; }
.cheer__line { margin: 0.6rem 0 0; font-weight: 700; color: var(--ink); }
.cheer__extra { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--primary-ink-strong); font-weight: 700; }
.cheer__next { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--muted); }
.cheer--still *, .cheer--still { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .flame__outer, .flame__inner, .flame__core, .flame__sparks circle, .flame__glow, .streak__flame .flame,
  .streak__dot-mark, .streak-pill__flame, .cheer, .cheer__card, .cheer__flame .flame { animation: none !important; }
  .flame__sparks circle { opacity: 0.6; }
}

/* -- Maintenance mode: the admins' banner, and the "back very soon" page --- */
.maint-bar {
  position: relative; z-index: 50;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.5rem 1rem;
  padding: 0.55rem var(--sp-4);
  background: var(--warning-soft); border-bottom: 1px solid var(--warning);
  color: var(--ink); font-size: 0.88rem; text-align: center;
}
.maint-bar__text { margin: 0; }
.maint-bar__form { margin: 0; }
.maint-bar__link { font-weight: 700; }

.closed {
  min-height: 100vh; min-height: 100dvh;
  display: grid; place-items: center;
  padding: var(--sp-6) var(--sp-4);
}
.closed__card {
  width: min(34rem, 100%); text-align: center;
  padding: var(--sp-7) var(--sp-6) var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.closed__sign { display: grid; justify-items: center; margin-bottom: var(--sp-4); }
.closed__cord {
  width: 7rem; height: 2.2rem;
  border: 2px solid var(--line-strong); border-bottom: none;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.closed__board {
  margin-top: -0.2rem;
  padding: 0.55rem 1.3rem 0.65rem;
  border-radius: var(--radius);
  background: var(--accent); color: var(--on-accent);
  font-size: clamp(2rem, 6vw, 2.6rem); line-height: 1; letter-spacing: 0.12em;
  box-shadow: 0 6px 0 var(--accent-strong), var(--shadow-card);
  transform-origin: 50% -2.2rem;
  animation: sign-sway 4.5s ease-in-out infinite;
}
@keyframes sign-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.closed__reading { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--muted); }
.closed__title { margin: var(--sp-4) 0 0; font-family: var(--font-display); font-size: clamp(1.8rem, 5vw, 2.4rem); }
.closed__lead { margin: 0.6rem auto 0; max-width: 28rem; color: var(--soft); }
.closed__note {
  margin: var(--sp-4) auto 0; max-width: 28rem;
  padding: 0.7rem 1rem; border-radius: var(--radius);
  background: var(--surface-warm); font-weight: 600;
}
.closed__until { margin: var(--sp-3) 0 0; font-weight: 700; color: var(--primary-ink-strong); }
.closed__social { margin: var(--sp-5) 0 0; font-size: 0.9rem; color: var(--muted); }
.closed__social a { margin-left: 0.5rem; font-weight: 700; }
.closed__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem;
  margin-top: var(--sp-6); padding-top: var(--sp-4); border-top: 1px solid var(--line);
}
.closed__staff { font-size: 0.82rem; color: var(--muted); }
.closed__signed-in { margin: var(--sp-5) 0 0; font-size: 0.85rem; color: var(--muted); }
.closed__signed-in button {
  margin-left: 0.35rem; padding: 0; border: 0; background: none;
  font: inherit; font-weight: 700; color: var(--primary-ink); text-decoration: underline; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .closed__board { animation: none; } }

/* -- Lessons from the old website: the one-time welcome --------------------- */
/* templates/partials/carried_over_welcome.html: a modal that opens by itself,
   once, when a student's lessons from the old website arrive. */
.welcome-over {
  width: min(27rem, calc(100vw - 2rem));
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  text-align: center;
  border: none;
  background: linear-gradient(180deg, var(--surface-warm) 0, var(--surface) 11rem);
  box-shadow: 0 30px 70px -20px rgba(120, 60, 90, 0.45);
}
.welcome-over[open] { animation: welcome-arrive 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
/* It opens with the title focused, not the first button (static/js/welcome-over.js):
   screen readers start at the news, and no focus ring greets the student. */
.welcome-over__title:focus { outline: none; }
.welcome-over::backdrop { background: rgba(51, 42, 48, 0.45); backdrop-filter: blur(3px); }
@keyframes welcome-arrive {
  from { opacity: 0; transform: translateY(14px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.welcome-over > :not(.welcome-over__petals) { position: relative; z-index: 1; }

/* A few petals drifting down the sides, fading out before the buttons. */
.welcome-over__petals {
  position: absolute; inset: 0;
  overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 85%);
          mask-image: linear-gradient(to bottom, #000 55%, transparent 85%);
}
.welcome-over__petals i {
  position: absolute; top: -1.5rem; left: var(--x, 50%);
  width: 11px; height: 11px;
  animation: welcome-fall var(--d, 8s) linear var(--delay, 0s) infinite;
}
.welcome-over__petals i::before {
  content: ""; display: block; width: 100%; height: 100%;
  background: var(--accent-mid); opacity: 0.6;
  border-radius: 12px 3px 12px 3px;
  animation: sk-sway calc(var(--d, 8s) / 3) ease-in-out var(--delay, 0s) infinite alternate;
}
.welcome-over__petals i:nth-child(1) { --x: 5%;  --d: 7.5s; --delay: -1s; }
.welcome-over__petals i:nth-child(2) { --x: 13%; --d: 9s;   --delay: -5s; --s: 0.75; }
.welcome-over__petals i:nth-child(3) { --x: 24%; --d: 8.5s; --delay: -3s; --s: 0.6; }
.welcome-over__petals i:nth-child(4) { --x: 74%; --d: 10s;  --delay: -7s; --s: 0.6; }
.welcome-over__petals i:nth-child(5) { --x: 86%; --d: 7s;   --delay: -2s; }
.welcome-over__petals i:nth-child(6) { --x: 94%; --d: 9.5s; --delay: -6s; --s: 0.8; }
@keyframes welcome-fall { from { transform: translateY(0); } to { transform: translateY(40rem); } }

/* The bunny hops three times to say hello, then sits still. */
.welcome-over__bunny {
  display: block; margin: 0 auto;
  width: 96px; height: 96px; border-radius: 50%;
  box-shadow: 0 12px 26px -12px rgba(207, 61, 102, 0.6);
  transform-origin: 50% 100%;
  animation: welcome-hop 1.1s cubic-bezier(0.3, 0, 0.3, 1) 0.45s 3;
}
@keyframes welcome-hop {
  0%, 100% { transform: translateY(0) scale(1, 1); }
  15%      { transform: translateY(0) scale(1.07, 0.93); }
  45%      { transform: translateY(-16px) scale(0.96, 1.05); }
  75%      { transform: translateY(0) scale(1.05, 0.95); }
}
.welcome-over__eyebrow {
  margin: var(--sp-4) 0 0;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink-strong);
}
.welcome-over__title {
  margin: 0.35rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.45rem, 5vw, 1.75rem); line-height: 1.2;
}

/* The number is the news: big, pink, with two little sparkles. */
.welcome-over__count {
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  margin: var(--sp-4) 0 0;
  padding: 0.4rem 1.4rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--accent-soft);
  color: var(--accent-ink-strong);
  box-shadow: inset 0 0 0 2px rgba(207, 61, 102, 0.12);
}
.welcome-over__count::before,
.welcome-over__count::after {
  content: "\2726"; content: "\2726" / "";
  position: absolute;
  color: var(--sun); line-height: 1;
  animation: sparkle 1.8s ease-in-out infinite;
}
.welcome-over__count::before { top: -0.5rem; left: -0.25rem; font-size: 1rem; }
.welcome-over__count::after  { bottom: -0.35rem; right: -0.4rem; font-size: 0.75rem; animation-delay: 0.6s; }
.welcome-over__number {
  display: inline-block;
  font-family: var(--font-display); font-weight: 800;
  font-size: 2.9rem; line-height: 1;
  animation: check-pop 0.55s cubic-bezier(0.3, 1.4, 0.5, 1) 0.35s both;
}
.welcome-over__unit { font-weight: 800; }
.welcome-over__body { margin: var(--sp-4) auto 0; max-width: 24rem; color: var(--soft); font-size: 0.95rem; }

.welcome-over__booked {
  margin: var(--sp-4) 0 0; padding: 0.8rem 1rem;
  border-radius: var(--radius); background: var(--surface-cool);
  text-align: left; font-size: 0.88rem;
}
.welcome-over__booked p { margin: 0; }
.welcome-over__booked ul { margin: 0.45rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.25rem; }
.welcome-over__booked li { display: flex; align-items: center; gap: 0.5rem; font-weight: 700; color: var(--primary-ink-strong); }
.welcome-over__booked li::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--primary-mid); }
.welcome-over__booked .welcome-over__hint { margin-top: 0.5rem; color: var(--muted); font-size: 0.82rem; }
.welcome-over__small { margin: var(--sp-3) 0 0; font-size: 0.82rem; color: var(--muted); }
.welcome-over__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.welcome-over__actions form { margin: 0; }

@media (max-width: 480px) {
  .welcome-over { padding: var(--sp-5) var(--sp-4) var(--sp-4); }
  .welcome-over__actions { flex-direction: column; }
  .welcome-over__actions .btn, .welcome-over__actions form { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-over__petals { display: none; }
  .welcome-over[open], .welcome-over__bunny, .welcome-over__number,
  .welcome-over__count::before, .welcome-over__count::after { animation: none; }
}

/* -- "Check your inbox": a new account waiting for its email to be confirmed -- */
.verify { text-align: center; }
.verify__envelope {
  position: relative;
  width: 76px; height: 54px; margin: var(--sp-2) auto var(--sp-5);
  border-radius: 12px;
  background: var(--accent-soft);
  box-shadow: inset 0 0 0 2px var(--accent-mid);
  animation: verify-bob 3s ease-in-out infinite;
}
.verify__envelope::before {        /* the flap */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 34px;
  background: linear-gradient(to bottom right, transparent 49%, var(--accent-mid) 50%, transparent 53%),
              linear-gradient(to bottom left, transparent 49%, var(--accent-mid) 50%, transparent 53%);
  background-size: 50% 100%; background-repeat: no-repeat; background-position: left, right;
}
.verify__heart {
  position: absolute; left: 50%; top: 58%;
  width: 16px; height: 16px; margin-left: -8px;
  background: var(--accent); transform: rotate(45deg);
  border-radius: 3px 0 0 0;
}
.verify__heart::before, .verify__heart::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: var(--accent);
}
.verify__heart::before { left: -8px; top: 0; }
.verify__heart::after { left: 0; top: -8px; }
@keyframes verify-bob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-5px) rotate(2deg); } }
.verify__title { font-size: 1.5rem; }
.verify__lead { margin-top: var(--sp-2); color: var(--soft); }
.verify__waiting {
  padding: var(--sp-3) var(--sp-4); border-radius: var(--radius);
  background: var(--primary-soft); color: var(--ink); font-weight: 600; line-height: 1.5;
}
.verify__wrong button {
  padding: 0; border: 0; background: none; font: inherit; font-weight: 700;
  color: var(--primary-ink); text-decoration: underline; cursor: pointer;
}
@media (prefers-reduced-motion: reduce) { .verify__envelope { animation: none; } }

/* -- Duo lessons: one lesson, two students (apps/lessons/duo.py) ----------- */
.product-card__duo { align-self: flex-start; margin-bottom: var(--sp-2); }
.duo-section { margin-top: var(--sp-8); scroll-margin-top: 6rem; }
.duo-partner {
  margin-bottom: var(--sp-4); padding: var(--sp-4);
  border-radius: var(--radius); background: var(--surface-cool);
}

/* -- Feedback: students tell us what to fix (apps/core/feedback.py) ------- */
.app__nav-link--quiet { margin-top: var(--sp-3); font-size: 0.875rem; color: var(--soft); }
.feedback-cta .card__body { gap: var(--sp-3); flex-wrap: wrap; }
.feedback-shot {
  display: block; max-width: 100%; max-height: 24rem; width: auto;
  border: 1px solid var(--line); border-radius: var(--radius);
}

/* -- The header level, live (static/js/level-pill.js) -------------------- */
.level-pill.is-levelling { animation: level-pop 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes level-pop {
  0% { transform: scale(1); }
  30% { transform: scale(1.18); box-shadow: 0 0 0 6px var(--accent-soft); }
  100% { transform: scale(1); box-shadow: none; }
}
.level-up-note {
  position: fixed; left: 50%; top: 5.25rem; z-index: 80;
  transform: translateX(-50%);
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-pop);
  font-weight: 700; color: var(--ink);
  animation: level-note-in 0.35s ease-out;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.level-up-note.is-leaving { opacity: 0; transform: translate(-50%, -8px); }
@keyframes level-note-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .level-pill.is-levelling, .level-up-note { animation: none; }
}

/* -- The review page's word bank: mastered, and still to master ---------- */
.wordbank__columns { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); align-items: start; }
.wordbank__group summary { cursor: pointer; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) 0; }
.wordbank__group summary .badge { line-height: 1.4; min-width: 1.9rem; justify-content: center; }
.wordbank__list { list-style: none; margin: var(--sp-2) 0 0; padding: 0; max-height: 22rem; overflow-y: auto; display: grid; gap: 0.3rem; }
.wordbank__word { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; padding: 0.35rem 0.6rem; border-radius: 10px; background: var(--surface-cool); }
.wordbank__word.is-tricky { background: #fff4e0; }
.wordbank__word.is-mastered { background: var(--success-soft); }
.wordbank__tag { margin-left: auto; font-size: 0.7rem; font-weight: 800; color: #9a5b00; text-transform: uppercase; letter-spacing: 0.05em; }
.wordbank__pips { margin-left: auto; color: var(--primary-ink); letter-spacing: 0.1em; font-size: 0.75rem; }

/* -- The chat bubble: Maria one tap away on every page (chat-widget.js) --- */
.chatw { position: fixed; right: var(--sp-4); bottom: calc(var(--sp-4) + var(--safe-bottom, 0px)); z-index: 70; }
.chatw__launch {
  position: relative;
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--primary); color: #fff; font-size: 1.5rem;
  box-shadow: 0 12px 28px -12px rgba(43, 108, 176, 0.75);
  transition: transform var(--transition), box-shadow var(--transition);
}
.chatw__launch:hover { transform: translateY(-2px) scale(1.04); }
.chatw__launch:focus-visible { outline: 3px solid var(--primary-mid); outline-offset: 3px; }
.chatw.is-open .chatw__launch { transform: scale(0.92); }
.chatw__badge {
  position: absolute; top: -0.2rem; right: -0.2rem;
  min-width: 1.35rem; height: 1.35rem; padding: 0 0.3rem;
  display: grid; place-items: center;
  border-radius: var(--radius-pill); background: var(--accent); color: #fff;
  font-size: 0.72rem; font-weight: 800; border: 2px solid #fff;
}
.chatw__badge[hidden] { display: none; }
.chatw__panel {
  position: absolute; right: 0; bottom: calc(100% + 0.75rem);
  width: min(23rem, calc(100vw - 2rem)); height: min(32rem, calc(100vh - 8rem));
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-pop); overflow: hidden;
  animation: chatw-in 0.22s ease-out;
}
.chatw__panel[hidden] { display: none; }
@keyframes chatw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.chatw__head {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3); background: var(--surface-cool); border-bottom: 1px solid var(--line);
}
.chatw__avatar { width: 2.25rem; height: 2.25rem; border-radius: 50%; }
.chatw__who { flex: 1; min-width: 0; }
.chatw__title { font-weight: 800; line-height: 1.2; }
.chatw__sub { font-size: 0.75rem; color: var(--muted); }
.chatw__iconbtn {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  border: 0; background: transparent; color: var(--soft); font-size: 1.15rem; line-height: 1; cursor: pointer; text-decoration: none;
}
.chatw__iconbtn:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.chatw__stream { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3); }
.chatw__empty { margin: auto; text-align: center; color: var(--muted); font-size: 0.875rem; }
.chatw__status { min-height: 0; padding: 0 var(--sp-3); font-size: 0.75rem; color: var(--danger-ink); }
.chatw__form { display: flex; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--line); align-items: flex-end; }
.chatw__form textarea {
  flex: 1; resize: none; min-height: 2.5rem; max-height: 9rem; overflow-y: auto;
  padding: 0.55rem 0.8rem; border: 1.5px solid #cdd6e1; border-radius: 14px; font: inherit; font-size: 0.95rem;
  line-height: 1.45;
}
/* The bigger box (static/js/chat-widget.js): a larger panel, and room to read the message over. */
.chatw__grow {
  flex: none; align-self: flex-end;
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 50%;
  background: var(--surface); color: var(--soft);
  font-size: 1rem; line-height: 1; cursor: pointer;
  transition: color var(--transition), border-color var(--transition), background var(--transition);
}
.chatw__grow:hover, .chatw__grow[aria-pressed="true"] { color: var(--primary-ink); border-color: var(--primary-mid); background: var(--primary-soft); }
.chatw__grow:focus-visible { outline: 2px solid var(--primary-mid); outline-offset: 2px; }
.chatw__keys { margin: 0; padding: 0 var(--sp-3) 0; font-size: 0.7rem; color: var(--faint); text-align: right; }
.chatw.is-big .chatw__panel { width: min(34rem, calc(100vw - 2rem)); height: min(46rem, calc(100vh - 7rem)); }
.chatw.is-big .chatw__form textarea { min-height: 9rem; max-height: min(24rem, 50vh); }
.chatw__form textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
@media (max-width: 1024px) {
  /* In the dashboard the tab bar has Chat already; elsewhere the bubble sits
     just above the phone's home bar. */
  body:has(.tabbar) .chatw { display: none; }
}
@media (max-width: 720px) {
  .chatw { right: var(--sp-3); bottom: calc(var(--sp-3) + var(--safe-bottom, 0px)); }
  .chatw__launch { width: 3rem; height: 3rem; font-size: 1.3rem; }
  /* During a game the answer box and buttons need the space. */
  body:has(.game-head) .chatw:not(.is-open) { display: none; }
  .chatw__panel { position: fixed; left: var(--sp-3); right: var(--sp-3); bottom: calc(4.25rem + var(--safe-bottom, 0px)); width: auto; height: min(30rem, calc(100vh - 7rem)); }
  .chatw.is-big .chatw__panel { width: auto; height: calc(100vh - 6rem - var(--safe-bottom, 0px)); height: calc(100dvh - 6rem - var(--safe-bottom, 0px)); }
  /* On a phone the bigger box takes the whole width, the buttons go under it. */
  .chatw.is-big .chatw__form { flex-wrap: wrap; }
  .chatw.is-big .chatw__form textarea { flex-basis: 100%; max-height: 45vh; }
  .chatw.is-big .chatw__grow { margin-left: auto; align-self: center; }
  .chatw__keys { display: none; }
}
@media (prefers-reduced-motion: reduce) { .chatw__panel { animation: none; } .chatw__launch { transition: none; } }

/* -- Messages: the chat in the middle, with the homepage's scenery around -- */
.chat-page { max-width: 48rem; margin-inline: auto; }
.chat-page__head { flex-direction: column; align-items: center; text-align: center; gap: var(--sp-1); }
.chat-page .chat { box-shadow: var(--shadow-pop); height: min(72vh, 40rem); background: rgba(255, 255, 255, 0.92); }

/* -- Profile: the cards two by two on wide screens ------------------------ */
.profile-page { max-width: 72rem; }
.profile-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); align-items: start; }
.profile-grid .card { margin-top: 0; }

/* -- The header fits itself (static/js/header-fit.js) ------------------------
   One row that never overlaps: a little wider than the page, nothing in it
   squeezed, and when it would not fit the least important things give way,
   one step at a time. Phones and tablets use the menu (max-width: 1000px). */
.site-header__inner { max-width: 1240px; }
.site-header__inner > * { flex-shrink: 0; }
.site-header.is-tight .level-pill__bar { display: none; }
.site-header.is-tight .nav { gap: 0; }
.site-header.is-tight .nav__link { padding-inline: 0.6rem; }
.site-header.is-tight .header-actions { gap: 0.35rem; }
.site-header.is-tighter .header-actions .btn--ghost { display: none; }
.site-header.is-navless .nav { display: none; }
.site-header.is-navless .nav-toggle { display: block; }
.site-header.is-navless .header-actions { margin-left: auto; }
.site-header.is-navless .mobile-nav__actions { display: none; }
.site-header.is-compact .header-actions { display: none; }
.site-header.is-compact .mobile-nav__actions { display: grid; }

/* -- Availability: extra hours for one day ------------------------------------ */
.extra-form__row { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
.extra-form__row .field { margin-top: 0; }
.cal__chip--extra { background: var(--success-soft); color: #1f6b43; font-size: 0.66rem; }
/* Times wrap inside the day rather than spilling into the next one. */
.cal--blocks .cal__day--pick { min-width: 0; }
.cal--blocks .cal__chip { white-space: normal; overflow-wrap: anywhere; text-overflow: clip; line-height: 1.25; }

/* -- Sign-in & security (accounts/security*.html) ------------------------------ */
.security-page { max-width: 46rem; }
.security-page--narrow { max-width: 34rem; }
.security-mark { font-size: 2rem; line-height: 1; margin-bottom: var(--sp-3); }
.code-input { font-size: 1.35rem; letter-spacing: 0.35em; font-variant-numeric: tabular-nums; text-align: center; }
.setup-steps { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: grid; gap: var(--sp-4); }
.setup-steps .card { margin: 0; }
.qr-box { width: min(15rem, 100%); aspect-ratio: 1; padding: var(--sp-2); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); }
.qr-box svg { display: block; width: 100%; height: 100%; }
.secret-key { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.05rem; letter-spacing: 0.08em; overflow-wrap: anywhere; padding: var(--sp-2) var(--sp-3); background: var(--surface-cool); border-radius: var(--radius-sm, 8px); }
.recovery-codes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2) var(--sp-5); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.1rem; letter-spacing: 0.05em; }
.security-confirm { max-width: 24rem; }
.security-mark svg { display: block; }
/* "Add to my authenticator app" only where tapping it can open one. */
.only-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .only-touch { display: block; } }
@media print {
  .no-print, .app__sidebar, .app__topbar, .tabbar, .chatw { display: none !important; }
  .recovery-card { box-shadow: none; border: 1px solid #000; }
}

/* Staff → Security */
.security-page--staff { max-width: 62rem; }
.security-grid { align-items: start; }
.security-grid .card { margin: 0; }
.kv-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.kv-list li { display: flex; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-2); border-bottom: 1px dashed var(--line); }
.kv-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.kv-list li > strong { text-align: right; }
.text-danger { color: var(--danger-ink); }
@media (max-width: 760px) { .security-grid { grid-template-columns: 1fr; } }

/* Sign-up: the box only form-filling scripts see (apps/accounts/signup_guard.py). */
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Buying: the facts right before paying, and the 14-day box (templates/site/lesson_detail.html). */
.buy-summary { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm, 10px); background: var(--surface-cool, #f4f6f9); }
.buy-summary__title { font-weight: 700; font-size: 0.9rem; margin: 0 0 0.35rem; }
.buy-summary__list { margin: 0; padding-left: 1.1rem; font-size: 0.86rem; color: var(--soft, #4b4540); display: grid; gap: 0.25rem; }
.buy-consent { margin-top: var(--sp-4); align-items: flex-start; }
.buy-consent input[type="checkbox"] { flex: none; width: 1.15rem; height: 1.15rem; margin: 0.15rem 0 0; }
.buy-consent .field__label { font-weight: 500; font-size: 0.88rem; line-height: 1.45; }

/* The short "about your data" note under forms (templates/partials/privacy_notice.html). */
.privacy-notice { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm, 10px); background: var(--surface-cool, #f4f6f9); font-size: 0.76rem; color: var(--muted); line-height: 1.5; }
.privacy-notice__title { font-weight: 700; color: var(--soft, #4b4540); margin: 0 0 0.25rem; font-size: 0.78rem; }
.privacy-notice__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.privacy-notice a { color: var(--primary-ink); }

/* The withdrawal form (templates/site/withdraw.html). */
.withdraw-choices { border: 0; padding: 0; margin: 0 0 var(--sp-4); }
.withdraw-choice { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--radius-sm, 10px); margin-top: var(--sp-2); cursor: pointer; }
.withdraw-choice span { display: flex; flex-direction: column; gap: 0.1rem; }
.withdraw-choice input { margin-top: 0.25rem; }
.footer-withdraw { font-weight: 700; }
.withdraw-card { border-color: var(--line-strong); }

/* "How to play" open during a timed word: the clock stops and the word hides
   until it closes (static/js/quest.js, race.js; apps/games/pausing.py). */
.fcard.is-paused [data-word],
.fcard.is-paused [data-reading],
.race__card.is-paused [data-prompt] {
  filter: blur(12px);
  opacity: 0.55;
  transition: filter 0.15s ease, opacity 0.15s ease;
}

/* ==========================================================================
   The word game, clear and fair (static/js/wordle.js)
   ========================================================================== */

/* Colours that read: white on the green and grey, dark on the yellow. */
:root {
  --tile-right: #3f9a60;
  --tile-right-deep: #2e7a4a;
  --tile-close: #e3ab2c;
  --tile-close-deep: #b9851a;
  --tile-close-ink: #3a2905;
  --tile-wrong: #847b70;
  --tile-wrong-deep: #6a6259;
}
.wordle__tile.is-right, .mini-tile.is-right { background: var(--tile-right); border-color: var(--tile-right); box-shadow: inset 0 -4px 0 var(--tile-right-deep); color: #fff; }
.wordle__tile.is-close, .mini-tile.is-close { background: var(--tile-close); border-color: var(--tile-close); box-shadow: inset 0 -4px 0 var(--tile-close-deep); color: var(--tile-close-ink); }
.wordle__tile.is-wrong, .mini-tile.is-wrong { background: var(--tile-wrong); border-color: var(--tile-wrong); box-shadow: inset 0 -4px 0 var(--tile-wrong-deep); color: #fff; }
.wordle__key.is-right { background: var(--tile-right); border-color: var(--tile-right); color: #fff; }
.wordle__key.is-close { background: var(--tile-close); border-color: var(--tile-close); color: var(--tile-close-ink); }

/* Tiles sized to fit (the page sets --tile on a phone). */
.wordle__board .wordle__tile {
  width: var(--tile, 3.2rem);
  height: var(--tile, 3.2rem);
  font-size: calc(var(--tile, 3.2rem) * 0.46);
}
/* Romaji still being typed on a computer keyboard: shown small in its tile. */
.wordle__tile.is-pending { font-family: var(--font-sans); font-size: calc(var(--tile, 3.2rem) * 0.3); color: var(--muted); border-style: dashed; }

/* Only the row just checked turns over, tile after tile, and each tile takes
   its colour halfway through the turn. Rows from before stay still. */
.wordle__tile.is-right, .wordle__tile.is-close, .wordle__tile.is-wrong { animation: none; }
.wordle__row.is-revealing .wordle__tile { animation: 0.45s ease both; animation-delay: var(--flip-delay, 0ms); }
.wordle__row.is-revealing .wordle__tile.is-right { animation-name: tile-turn-right; }
.wordle__row.is-revealing .wordle__tile.is-close { animation-name: tile-turn-close; }
.wordle__row.is-revealing .wordle__tile.is-wrong { animation-name: tile-turn-wrong; }
.wordle__row .wordle__tile.is-dancing { animation: tile-dance 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tile-turn-right {
  0%, 49.9% { background: var(--surface); border-color: var(--line-strong); color: var(--ink); box-shadow: none; }
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(90deg); background: var(--tile-right); border-color: var(--tile-right); color: #fff; }
  100% { transform: rotateX(0deg); background: var(--tile-right); border-color: var(--tile-right); color: #fff; box-shadow: inset 0 -4px 0 var(--tile-right-deep); }
}
@keyframes tile-turn-close {
  0%, 49.9% { background: var(--surface); border-color: var(--line-strong); color: var(--ink); box-shadow: none; }
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(90deg); background: var(--tile-close); border-color: var(--tile-close); color: var(--tile-close-ink); }
  100% { transform: rotateX(0deg); background: var(--tile-close); border-color: var(--tile-close); color: var(--tile-close-ink); box-shadow: inset 0 -4px 0 var(--tile-close-deep); }
}
@keyframes tile-turn-wrong {
  0%, 49.9% { background: var(--surface); border-color: var(--line-strong); color: var(--ink); box-shadow: none; }
  0% { transform: rotateX(0deg); }
  50% { transform: rotateX(90deg); background: var(--tile-wrong); border-color: var(--tile-wrong); color: #fff; }
  100% { transform: rotateX(0deg); background: var(--tile-wrong); border-color: var(--tile-wrong); color: #fff; box-shadow: inset 0 -4px 0 var(--tile-wrong-deep); }
}

/* What the colours mean, in words. */
.wordle__legend {
  list-style: none; margin: 0 auto var(--sp-2); padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 0.9rem;
  font-size: 0.78rem; color: var(--muted);
}
.wordle__legend li { display: inline-flex; align-items: center; gap: 0.35rem; }
.wordle__legend .mini-tile { width: 1.35rem; height: 1.35rem; font-size: 0.7rem; border-radius: 5px; box-shadow: none; }

/* The keyboard stays at the bottom of the screen while the board scrolls,
   as a phone's own keyboard does. */
.wordle__input:not(.is-hidden) {
  position: sticky;
  bottom: 0;
  z-index: 6;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--line);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  padding-bottom: max(var(--sp-2), env(safe-area-inset-bottom));
}
.wordle__input .wordle__controls { margin-top: var(--sp-2); }
/* Typing on a computer: said once, where only a computer shows it. */
.wordle__typing { text-align: center; margin: var(--sp-2) 0 0; display: none; }
@media (hover: hover) and (pointer: fine) { .wordle__typing { display: block; } }

@media (max-width: 560px) {
  .wordle__key { min-height: 2.5rem; }
  .wordle__board-switch { margin-bottom: var(--sp-1); }
  /* One row of buttons: Check takes the room, the rest are as small as they can be. */
  .wordle__controls { flex-wrap: nowrap; gap: var(--sp-2); }
  .wordle__controls .btn { flex: 0 1 auto; padding-inline: 0.7rem; }
  .wordle__controls [data-action="submit"] { flex: 1 1 auto; }
  .wordle__controls [data-action="hint"] .muted { display: none; }
}

/* A wide screen: the keyboard beside the board, so both fit without scrolling. */
@media (min-width: 900px) {
  .wordle {
    display: grid;
    max-width: 60rem;
    grid-template-columns: max-content minmax(24rem, 30rem);
    justify-content: center;
    align-items: start;
    column-gap: var(--sp-7, 3rem);
  }
  .wordle > * { grid-column: 1; }
  .wordle > .wordle__input:not(.is-hidden) {
    grid-column: 2;
    grid-row: 1 / span 4;
    position: static;
    margin-top: 0;
    padding: 0;
    border-top: 0;
    background: none;
    backdrop-filter: none;
  }
  .wordle > .wordle__giveup { grid-column: 2; }
  .wordle > .wordle__result { grid-column: 1 / -1; }
  /* Finished: one column again, the board over the answer. */
  .wordle.is-over { max-width: 30rem; grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .wordle.is-over > * { grid-column: 1; }
  .wordle.is-over > .wordle__result { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wordle__row.is-revealing .wordle__tile { animation: none !important; }
}

/* -- Busy in Google Calendar (Preply lessons...) on Maria's calendar ---------- */
.grid-cal__busy {
  position: absolute; left: 2px; right: 2px;
  top: calc((var(--from) - var(--grid-start)) * var(--minute));
  height: calc((var(--to) - var(--from)) * var(--minute) - 2px);
  border-radius: 6px;
  border-left: 3px solid #7d8794;
  background: repeating-linear-gradient(
    135deg, rgba(125,135,148,.16), rgba(125,135,148,.16) 5px,
    rgba(125,135,148,.08) 5px, rgba(125,135,148,.08) 10px
  );
  color: #4c5561;
  font-size: 0.66rem;
  line-height: 1.2;
  padding: 2px 4px;
  overflow: hidden;
}
.grid-cal__busy-label { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; }
.cal__chip--busy { background: rgba(125,135,148,.14); color: #4c5561; border-left: 2px solid #7d8794; cursor: default; }
.cal__chip--busy:hover { background: rgba(125,135,148,.2); color: #4c5561; }

/* -- Staff → Calendar → Google Calendar & Preply ------------------------------ */
.calendar-link { max-width: 52rem; }
.calendar-link__status { display: flex; gap: var(--sp-3); align-items: flex-start; }
.calendar-link__dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; flex: none; background: #9aa3ad; }
.calendar-link__dot--ok { background: var(--success, #2f8f5b); }
.calendar-link__dot--problem { background: var(--danger, #a8433f); }
.calendar-link__steps { counter-reset: step; list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.calendar-link__steps > li { counter-increment: step; position: relative; padding-left: 2.2rem; }
.calendar-link__steps > li::before {
  content: counter(step); position: absolute; left: 0; top: 0;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--primary-soft); color: var(--primary-ink); font-weight: 700; font-size: 0.85rem;
}
.calendar-link__robot { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 0.85rem; overflow-wrap: anywhere; }
.calendar-link__busy { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 0.9rem; }
.calendar-link__busy li { display: flex; gap: var(--sp-3); }
.calendar-link__busy time { font-variant-numeric: tabular-nums; color: var(--muted); min-width: 11rem; }
.calendar-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); }
.calendar-pill i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #9aa3ad; }
.calendar-pill--ok i { background: var(--success, #2f8f5b); }
.calendar-pill--problem i { background: var(--danger, #a8433f); }

/* -- The timer switch (race, quest): off, take as long as you like ------------ */
.clock-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  flex-wrap: wrap; margin: var(--sp-3) 0 var(--sp-2);
}
.clock-switch {
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 2.5rem; padding: 0.35rem 0.85rem 0.35rem 0.7rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink);
  font: inherit; font-size: 0.9rem; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.clock-switch:hover { border-color: var(--primary); }
.clock-switch:focus-visible { outline: 3px solid var(--focus, var(--primary)); outline-offset: 2px; }
.clock-switch:disabled { opacity: 0.7; cursor: progress; }
.clock-switch__icon { font-size: 1.05rem; }
.clock-switch__track {
  position: relative; display: inline-block; width: 2.4rem; height: 1.35rem;
  border-radius: 999px; background: var(--switch-off, #a99ca3);
  transition: background var(--transition);
}
.clock-switch__thumb {
  position: absolute; top: 0.15rem; left: 0.15rem; width: 1.05rem; height: 1.05rem;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s ease;
}
.clock-switch[aria-checked="true"] .clock-switch__track { background: var(--primary); }
.clock-switch[aria-checked="true"] .clock-switch__thumb { transform: translateX(1.05rem); }
.clock-switch__state { min-width: 1.8em; text-align: left; }
.clock-row__note { flex: 1 1 14rem; text-align: right; }
.race__timer.is-off { visibility: hidden; }
@media (max-width: 560px) {
  .clock-row__note { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .clock-switch__thumb, .clock-switch__track { transition: none; }
}
.race__start-relaxed { display: block; margin-top: 0.4rem; font-weight: 700; color: var(--success-ink, #2f8a55); }
.race__end-relaxed { margin: 0.2rem 0 0.4rem; }

/* ==========================================================================
   Rate your classes (apps/core/class_reviews.py): the window that opens once
   the second lesson is over, the star input, and Dashboard → Your review.
   ========================================================================== */
:root { --star-on: #f2b03d; --star-off: #9d9097; }
:root[data-theme="dark"] { --star-off: #7a6d75; }

.rate {
  width: min(30rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border: none;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--surface-warm) 0, var(--surface) 10rem);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 30px 70px -20px rgba(120, 60, 90, 0.45);
}
.rate[open] { animation: welcome-arrive 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
.rate::backdrop { background: rgba(51, 42, 48, 0.45); backdrop-filter: blur(3px); }
:root[data-theme="dark"] .rate::backdrop { background: rgba(0, 0, 0, 0.6); }
.rate__title:focus { outline: none; }
.rate__bunny {
  display: block; margin: 0 auto;
  width: 72px; height: 72px; border-radius: 50%;
  box-shadow: 0 10px 22px -10px rgba(207, 61, 102, 0.6);
}
.rate__eyebrow {
  margin: var(--sp-3) 0 0;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink-strong);
}
.rate__title {
  margin: 0.3rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 5vw, 1.6rem); line-height: 1.2;
}
.rate__actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-top: var(--sp-5); }
.rate__actions .btn { min-width: 8rem; }
.rate__never {
  display: block; margin: var(--sp-3) auto 0; padding: 0.3rem 0.6rem;
  border: 0; background: none;
  font: inherit; font-size: 0.8rem; color: var(--muted);
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.rate__never:hover { color: var(--ink); }

/* Five stars: real radio buttons under the hood. */
.star-input { margin: var(--sp-4) 0 0; padding: 0; border: 0; min-width: 0; }
.star-input__legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.star-input__row { display: inline-flex; gap: 0.1rem; }
.star-input__radio { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.star-input__star {
  display: grid; place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  font-size: 2.3rem; line-height: 1;
  color: var(--star-off);
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}
.star-input__star:hover { transform: scale(1.12); }
.star-input__star.is-lit,
.star-input__radio:checked + .star-input__star { color: var(--star-on); text-shadow: 0 2px 0 rgba(180, 120, 20, 0.25); }
.star-input__radio:focus-visible + .star-input__star { outline: 2px solid var(--accent); outline-offset: 1px; }
.star-input__word { margin: 0.2rem 0 0; min-height: 1.5em; font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.star-input.is-chosen .star-input__word { color: var(--ink); }
.star-input .field__error { margin-top: 0.25rem; }
@media (prefers-reduced-motion: reduce) { .star-input__star { transition: none; } .star-input__star:hover { transform: none; } }

.rate-field { margin-top: var(--sp-4); text-align: left; }
.rate-check {
  display: flex; align-items: flex-start; gap: 0.6rem;
  margin-top: var(--sp-4);
  text-align: left; font-size: 0.9rem; color: var(--soft);
  cursor: pointer;
}
.rate-check input { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.2rem; accent-color: var(--accent); }
.rate-note { margin: 0.45rem 0 0; text-align: left; font-size: 0.78rem; color: var(--muted); }

/* Dashboard → Your review */
.review-card .star-input { text-align: center; }
.review-card__stars { margin: 0; font-size: 1.9rem; letter-spacing: 0.08em; line-height: 1; color: var(--star-off); }
.review-card__stars .is-lit { color: var(--star-on); }
.review-card__text {
  margin: var(--sp-4) 0 0; padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--accent-mid);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface-warm);
  color: var(--soft);
}
.review-card__facts { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: 0.35rem; }

/* Staff → Reviews */
.staff-review { padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.staff-review:last-child { border-bottom: 0; }
.staff-review__head { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.staff-review__stars { font-size: 1.25rem; }
.staff-review__actions { flex-wrap: wrap; gap: var(--sp-2); }
.staff-review-history > summary { cursor: pointer; list-style: none; }
.staff-review-history > summary::-webkit-details-marker { display: none; }
.staff-review-history > summary .card__title::after { content: " ▾"; color: var(--muted); }
.staff-review-history[open] > summary .card__title::after { content: " ▴"; }

/* -- Feedback: the screenshot chosen, and the ones sent (dashboard/feedback.html) -- */
.shot-preview {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-3); padding: var(--sp-3);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface-warm);
}
.shot-preview[hidden] { display: none; }
.shot-preview__img {
  flex: none; width: 9rem; max-height: 7rem; object-fit: contain;
  border-radius: var(--radius-sm); background: var(--surface);
  box-shadow: var(--shadow-card);
}
.shot-preview__info { display: grid; gap: 0.2rem; justify-items: start; min-width: 0; }
.shot-preview__name { margin: 0; overflow-wrap: anywhere; }
.sent-feedback { display: flex; align-items: flex-start; gap: var(--sp-3); flex: 1; min-width: 0; }
.sent-feedback__shot { flex: none; display: block; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); }
.sent-feedback__shot img { display: block; width: 72px; height: 54px; object-fit: cover; object-position: top; }
.sent-feedback__shot:hover { border-color: var(--accent-mid); }
@media (max-width: 560px) {
  .shot-preview { flex-direction: column; align-items: flex-start; }
  .shot-preview__img { width: 100%; max-height: 12rem; }
}

/* ==========================================================================
   The picture quiz (apps/games/pictures.py, static/js/pictures.js)
   ========================================================================== */

/* -- Stickers: a Fluent Emoji picture with a white die-cut edge -------------- */
.sticker {
  --edge: 1.5px;
  display: block;
  overflow: visible;
  filter:
    drop-shadow(var(--edge) 0 0 #fff) drop-shadow(calc(-1 * var(--edge)) 0 0 #fff)
    drop-shadow(0 var(--edge) 0 #fff) drop-shadow(0 calc(-1 * var(--edge)) 0 #fff)
    drop-shadow(0 4px 6px rgba(120, 60, 90, 0.22));
}
.sticker--tiny { width: 2.2rem; height: 2.2rem; --edge: 1px; }
.sticker--peek { width: 2.6rem; height: 2.6rem; --edge: 1px; }
.sticker--card { width: 3.4rem; height: 3.4rem; }
.sticker--album { width: 4.2rem; height: 4.2rem; }
.sticker--big { width: min(11rem, 42vw); height: min(11rem, 42vw); --edge: 3px; }
/* Not found yet: a soft shadow of the shape, nothing more. */
.sticker.is-missing { filter: brightness(0) opacity(0.1); }
:root[data-theme="dark"] .sticker.is-missing { filter: brightness(0) invert(1) opacity(0.12); }

/* -- Modes ------------------------------------------------------------------ */
.pic-mode__sample { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.pic-mode__word { display: grid; line-height: 1.1; }
.pic-mode__word .jp { font-size: 2rem; color: var(--primary-ink); }
.pic-mode--hard .pic-mode__word .jp { color: var(--accent-ink); }
.pic-mode__word small { color: var(--muted); font-size: 0.8rem; letter-spacing: 0.03em; }
.pic-mode__dots { display: inline-flex; gap: 0.2rem; margin-left: 0.4rem; vertical-align: middle; }
.pic-mode__dots i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--line-strong); }
.pic-mode__dots i.is-on { background: var(--sun); }
.pic-mode:hover .sticker { animation: sticker-wiggle 0.6s ease; }

/* -- The album, a peek on the quiz's page ------------------------------------- */
.album-peek {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-5);
  margin-top: var(--sp-6); padding: var(--sp-5);
  background: linear-gradient(135deg, var(--sun-soft), var(--surface-warm));
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.album-peek__title { font-family: var(--font-display); font-size: 1.25rem; margin: 0; }
.album-peek__jp { color: var(--faint); font-size: 0.7em; margin-left: 0.3rem; }
.album-peek__bar { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-2); max-width: 22rem; }
.album-peek__bar .script__bar { flex: 1; }
.album-peek__row { display: flex; align-items: center; }
.album-peek__row .sticker { margin-left: -0.5rem; transform: rotate(calc((var(--i, 0) - 2) * 4deg)); }
.album-peek__row .sticker:first-child { margin-left: 0; }
@media (max-width: 760px) {
  .album-peek { grid-template-columns: 1fr; }
  .album-peek__row { flex-wrap: wrap; }
}

/* -- A run ------------------------------------------------------------------------ */
.picq { max-width: 36rem; margin-inline: auto; position: relative; }
.picq__top { flex-wrap: wrap; }
.picq__album {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.2rem 0.6rem; border-radius: var(--radius-pill);
  background: var(--sun-soft); color: var(--ink); font-size: 0.85rem; text-decoration: none;
}
.picq__album:hover { text-decoration: none; background: var(--sun); color: #3b2a07; }
.picq__stage {
  position: relative;
  margin-top: var(--sp-4);
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-3);
  background:
    radial-gradient(circle at 50% 42%, var(--surface) 0 38%, transparent 39%),
    radial-gradient(circle at 50% 42%, var(--primary-soft), var(--surface-warm) 75%);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  text-align: center;
  transition: border-color var(--transition), background var(--transition);
}
.picq__stage.is-right { border-color: var(--success); }
.picq__stage.is-wrong { border-color: var(--danger); }
.picq__stage.is-paused .picq__frame, .picq__grid.is-paused { visibility: hidden; }
.picq__frame { display: grid; place-items: center; min-height: min(11rem, 42vw); animation: picq-float 3.2s ease-in-out infinite; }
.picq__frame.is-arriving .sticker { animation: picq-arrive 0.5s cubic-bezier(0.22, 1.4, 0.36, 1); }
.picq__frame.is-happy .sticker { animation: picq-happy 0.6s cubic-bezier(0.22, 1.4, 0.36, 1); }
.picq__frame.is-sad .sticker { animation: picq-sad 0.7s ease; }
.picq__flash { top: var(--sp-3); right: var(--sp-4); }
.picq__stage.is-right .picq__flash { color: var(--success-ink); }
.picq__stage.is-wrong .picq__flash { color: var(--danger-ink); }
.picq__reveal { display: grid; gap: 0.1rem; min-height: 4.4rem; align-content: center; }
.picq__reveal.is-empty { visibility: hidden; }
.picq__reveal.is-arriving { animation: pop-in 0.3s ease-out; }
.picq__reveal-word { font-size: 1.9rem; line-height: 1.1; font-weight: 600; }
.picq__reveal-how { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.2rem 0.6rem; color: var(--soft); font-size: 0.95rem; }
.picq__reveal-meaning { font-weight: 700; color: var(--ink); }

/* The four answers: two by two, big enough for a thumb. */
.picq__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.picq__opt {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  min-height: 5.2rem; padding: var(--sp-3) var(--sp-2);
  background: var(--surface);
  border: 2px solid var(--line-strong);
  border-bottom-width: 5px;
  border-radius: var(--radius);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  transition: transform 120ms ease, border-color var(--transition), background var(--transition), opacity var(--transition);
  -webkit-tap-highlight-color: transparent;
}
.picq__grid.is-dealt .picq__opt { animation: picq-deal 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--i, 0) * 45ms); }
.picq__opt:hover:not(:disabled) { border-color: var(--primary-mid); background: var(--primary-soft); transform: translateY(-2px); }
.picq__opt:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; margin-top: 3px; }
.picq__opt:focus-visible { outline: 3px solid var(--primary-mid); outline-offset: 2px; }
.picq__opt:disabled { cursor: default; }
.picq__label { font-size: 1.7rem; line-height: 1.15; font-weight: 600; }
.picq__opt.is-long .picq__label { font-size: 1.3rem; }
.picq__romaji { font-size: 0.85rem; color: var(--muted); letter-spacing: 0.03em; }
.picq__key {
  position: absolute; top: 0.4rem; left: 0.55rem;
  font-size: 0.7rem; font-weight: 700; color: var(--faint);
}
@media (hover: none) { .picq__key, .picq__keys { display: none; } }
.picq__opt.is-picked { border-color: var(--primary); }
.picq__grid.is-answered .picq__opt { opacity: 0.55; }
.picq__grid.is-answered .picq__opt.is-right,
.picq__grid.is-answered .picq__opt.is-wrong { opacity: 1; }
.picq__opt.is-right { background: var(--success-soft); border-color: var(--success); color: var(--success-ink); animation: juice-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.picq__opt.is-right .picq__romaji { color: var(--success-ink); }
.picq__opt.is-wrong { background: var(--danger-soft); border-color: var(--danger); color: var(--danger-ink); }
.picq__opt.is-removed { opacity: 0.2; visibility: visible; transform: scale(0.94); pointer-events: none; }

.picq__start {
  position: static; inset: auto;
  margin-top: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  min-height: 18rem;
}
:root[data-theme="dark"] .picq__start { background: var(--surface); }
.picq__start-art { position: relative; animation: race-bob 3s ease-in-out infinite; }
.picq__start-art .sticker { width: 5.5rem; height: 5.5rem; --edge: 2px; }
.picq__start-q {
  position: absolute; top: -0.4rem; right: -0.8rem;
  width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent); color: #fff; font-weight: 800;
  box-shadow: 0 4px 10px -4px rgba(207, 61, 102, 0.8);
}

.picq__end-new { margin-top: var(--sp-2); font-weight: 700; color: var(--warning-ink); }
.picq__misses { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.picq__miss { display: flex; align-items: center; gap: var(--sp-3); padding: 0.4rem 0.7rem; background: var(--paper); border-radius: var(--radius-sm); font-size: 0.9rem; }
.picq__miss .sticker { flex: none; }
.picq__miss-word { font-size: 1.15rem; font-weight: 600; }
.picq__miss-how { flex: 1; color: var(--muted); }

@keyframes picq-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes picq-arrive { 0% { transform: scale(0.4) rotate(-12deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes picq-happy { 0% { transform: none; } 35% { transform: translateY(-14px) scale(1.08) rotate(-6deg); } 70% { transform: translateY(0) scale(0.97) rotate(4deg); } 100% { transform: none; } }
@keyframes picq-sad { 0%, 100% { transform: none; } 30% { transform: rotate(-10deg) translateX(-4px); } 60% { transform: rotate(8deg) translateX(4px); } }
@keyframes picq-deal { from { opacity: 0; transform: translateY(10px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes sticker-wiggle { 0%, 100% { transform: none; } 30% { transform: rotate(-8deg) scale(1.06); } 65% { transform: rotate(6deg) scale(1.04); } }
@media (max-width: 560px) {
  /* The picture and all four answers on one screen: no Mame, no note by the switch. */
  .picq .buddy, .picq .clock-row__note { display: none; }
  .picq__top { margin-bottom: var(--sp-2); }
  .picq__stage { margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-3) var(--sp-2); gap: var(--sp-1); }
  .sticker--big { width: min(8.5rem, 36vw); height: min(8.5rem, 36vw); }
  .picq__frame { min-height: min(8.5rem, 36vw); }
  .picq__reveal { min-height: 3.6rem; }
  .picq__grid { gap: var(--sp-2); margin-top: var(--sp-3); }
  .picq__label { font-size: 1.4rem; }
  .picq__opt.is-long .picq__label { font-size: 1.1rem; }
  .picq__opt { min-height: 4.2rem; padding: var(--sp-2); }
  .picq__reveal-word { font-size: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .picq__frame, .picq__frame .sticker, .picq__grid.is-dealt .picq__opt, .picq__opt.is-right,
  .picq__start-art, .pic-mode:hover .sticker, .picq__reveal.is-arriving { animation: none !important; }
}

/* -- The album ------------------------------------------------------------------- */
.album-head { align-items: flex-end; }
.album-head__bar { max-width: 26rem; }
.album-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-4) 0 var(--sp-5); }
.album-tabs__tab {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.35rem 0.8rem; border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); font-size: 0.85rem; font-weight: 600; text-decoration: none;
}
.album-tabs__tab:hover { text-decoration: none; background: var(--primary-soft); }
.album-tabs__tab.is-complete { background: var(--sun-soft); border-color: var(--sun); }
.album-tabs__n { color: var(--muted); font-weight: 700; font-size: 0.75rem; }
.album-page {
  margin-bottom: var(--sp-6); padding: var(--sp-5);
  background: var(--surface);
  background-image: radial-gradient(var(--line) 1px, transparent 1px);
  background-size: 18px 18px;
  border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  scroll-margin-top: 6rem;
}
.album-page.is-complete { border-color: var(--sun); box-shadow: 0 0 0 3px var(--sun-soft), var(--shadow-card); }
.album-page__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.album-page__title { font-family: var(--font-display); font-size: 1.3rem; margin: 0; }
.album-page__jp { color: var(--faint); font-size: 0.7em; margin-left: 0.3rem; }
.album-page__count { font-weight: 700; color: var(--muted); font-size: 0.9rem; }
.album-page.is-complete .album-page__count { color: var(--warning-ink); }
.album-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); gap: var(--sp-3); }
.album-sticker {
  position: relative;
  width: 100%; height: 100%; min-height: 9.5rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: var(--sp-3) var(--sp-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  font: inherit; color: var(--ink); text-align: center; cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
}
button.album-sticker:hover { transform: translateY(-3px) rotate(-1.5deg); box-shadow: var(--shadow-card); }
button.album-sticker:hover .sticker { animation: sticker-wiggle 0.6s ease; }
.album-sticker.is-missing { cursor: default; background: transparent; border-style: dashed; }
.album-sticker__word { font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.album-sticker.is-missing .album-sticker__word { color: var(--faint); }
.album-sticker__how { font-size: 0.75rem; color: var(--muted); }
.album-sticker__meaning { font-size: 0.8rem; font-weight: 600; color: var(--soft); }
.album-sticker__times { position: absolute; top: 0.35rem; right: 0.45rem; font-size: 0.7rem; font-weight: 800; color: var(--warning-ink); }
@media (max-width: 480px) {
  .album-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
  .sticker--album { width: 3.2rem; height: 3.2rem; }
  .album-sticker { min-height: 8rem; padding: var(--sp-2) 0.25rem; }
  .album-sticker__word { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  button.album-sticker:hover, button.album-sticker:hover .sticker { transform: none; animation: none; }
}

/* ==========================================================================
   The writing dojo (apps/games/writing.py, static/js/writing.js)
   ========================================================================== */

/* -- The front page and the charts ---------------------------------------------- */
.dojo-script { gap: 0; }
.dojo-script__link { display: flex; align-items: center; gap: var(--sp-4); color: inherit; text-decoration: none; }
.dojo-script__link:hover { text-decoration: none; }
.dojo-script__paper {
  position: relative; flex: none;
  width: 4.6rem; height: 4.6rem;
  display: grid; place-items: center;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(var(--dojo-guide, #f0c9d4), var(--dojo-guide, #f0c9d4)) center / 1px 100% no-repeat,
    linear-gradient(var(--dojo-guide, #f0c9d4), var(--dojo-guide, #f0c9d4)) center / 100% 1px no-repeat,
    var(--dojo-paper, #fffaf3);
  border: 2px solid var(--accent-mid);
  box-shadow: inset 0 0 0 3px var(--dojo-paper, #fffaf3), 0 6px 14px -8px rgba(120, 60, 90, 0.4);
  transform: rotate(-3deg);
  transition: transform var(--transition);
}
.dojo-script__paper .jp { font-size: 2.6rem; line-height: 1; color: var(--ink); }
.dojo-script:hover .dojo-script__paper { transform: rotate(2deg) scale(1.04); }
.dojo-script__next { font-size: 1.15rem; color: var(--accent-ink); }
.dojo-script__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: auto; }
.dojo-script__actions .btn { margin-top: 0; }

.wchart-key { display: inline-flex; align-items: center; gap: 0.3rem; margin-left: var(--sp-3); font-size: 0.8rem; white-space: nowrap; }
.wchart-stars { display: inline-flex; gap: 0.18rem; }
.wchart-stars i { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--line-strong); }
.wchart-stars.is-1 i:nth-child(-n+1),
.wchart-stars.is-2 i:nth-child(-n+2),
.wchart-stars.is-3 i { background: var(--sun); box-shadow: 0 0 0 1px rgba(168, 109, 23, 0.25); }
.wchart { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.wchart__group { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
.wchart--kanji .wchart__group { grid-template-columns: 1fr; }
.wchart__name { margin: 0; font-size: 1.15rem; color: var(--faint); text-align: center; }
.wchart--kanji .wchart__name { text-align: left; font-family: var(--font-display); font-size: 1.1rem; color: var(--soft); }
.wchart__cells { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); }
.wchart--kanji .wchart__cells { grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); }
.wchart--hiragana, .wchart--katakana { max-width: 44rem; }
.wchart__col-1 { grid-column: 1; }
.wchart__col-2 { grid-column: 2; }
.wchart__col-3 { grid-column: 3; }
.wchart__col-4 { grid-column: 4; }
.wchart__col-5 { grid-column: 5; }
.wchart__cell {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: var(--sp-2) var(--sp-1);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  color: var(--ink); text-decoration: none;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.wchart__cell:hover { text-decoration: none; transform: translateY(-2px); border-color: var(--primary-mid); box-shadow: var(--shadow-card); }
.wchart__cell:focus-visible { outline: 3px solid var(--primary-mid); outline-offset: 2px; }
.wchart__char { font-size: 1.9rem; line-height: 1.1; }
.wchart__sub { font-size: 0.72rem; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wchart__cell.is-1 { border-color: var(--primary-mid); }
.wchart__cell.is-2 { border-color: var(--primary); background: var(--primary-soft); }
.wchart__cell.is-3 { border-color: var(--sun); background: var(--sun-soft); }
.wchart__cell.is-rare { opacity: 0.75; }
@media (max-width: 560px) {
  .wchart__group { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--sp-2); }
  .wchart__char { font-size: 1.5rem; }
  .wchart__cells { gap: 0.35rem; }
  .wchart-key { display: flex; margin: 0.2rem 0 0; }
}

/* -- A round ------------------------------------------------------------------------ */
.dojo { max-width: 62rem; margin-inline: auto; }
.dojo__round { list-style: none; padding: 0; margin: var(--sp-3) 0 var(--sp-4); display: flex; justify-content: center; gap: var(--sp-2); }
.dojo__dot {
  width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--surface); border: 2px solid var(--line-strong);
  font-size: 1.05rem; color: var(--muted);
  transition: transform var(--transition), border-color var(--transition), background var(--transition);
}
.dojo__dot.is-current { border-color: var(--accent); color: var(--ink); transform: scale(1.12); }
.dojo__dot.is-done { background: var(--leaf-soft); border-color: var(--leaf); color: var(--leaf-ink); }
.dojo__dot.is-done:not(.is-passed) { background: var(--warning-soft); border-color: var(--warning); color: var(--warning-ink); }

.dojo__main {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem);
  grid-template-areas: "info paper" "more paper";
  grid-template-rows: auto 1fr;
  column-gap: var(--sp-5); align-items: start;
}
.dojo__info, .dojo__more {
  padding: var(--sp-5);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-card);
}
.dojo__info { grid-area: info; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 0; }
.dojo__more { grid-area: more; border-radius: 0 0 var(--radius-lg) var(--radius-lg); border-top: 0; padding-top: 0; }
.dojo__paper { grid-area: paper; }
.dojo__step {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin: 0 0 var(--sp-3); padding: 0.2rem 0.75rem; border-radius: var(--radius-pill);
  font-size: 0.8rem; font-weight: 700;
  background: var(--primary-soft); color: var(--primary-ink);
}
.dojo__step--glance { background: var(--sun-soft); color: var(--warning-ink); }
.dojo__step--memory { background: var(--accent-soft); color: var(--accent-ink); }
.dojo__glyph { display: flex; align-items: center; gap: var(--sp-3); }
.dojo__char { font-size: 4.6rem; line-height: 1; }
.dojo__char.is-hidden {
  width: 5rem; height: 5rem; display: grid; place-items: center;
  font-family: var(--font-display); font-size: 2.6rem; color: var(--faint);
  border: 2px dashed var(--line-strong); border-radius: var(--radius);
}
.dojo__sound { margin: var(--sp-3) 0 0; font-size: 1.05rem; color: var(--soft); }
.dojo__sound strong { font-size: 1.6rem; color: var(--ink); letter-spacing: 0.03em; }
.dojo__ask { font-weight: 700; color: var(--accent-ink); }
.dojo__meaning { margin: var(--sp-3) 0 0; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
.dojo__readings { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.dojo__reading {
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  padding: 0.25rem 0.7rem; border-radius: var(--radius-pill);
  background: var(--surface-cool); border: 1px solid var(--line); font-size: 1rem;
}
.dojo__reading--on { background: var(--surface-warm); }
.dojo__reading em { font-style: normal; color: var(--faint); }
.dojo__reading-romaji { font-size: 0.8rem; color: var(--muted); }
.dojo__note { margin: 0; }
.dojo__examples { margin-top: var(--sp-3); border-top: 1px dashed var(--line-strong); padding-top: var(--sp-3); }
.dojo__examples-title { margin: 0 0 var(--sp-2); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.dojo__examples-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.dojo__examples-list li { display: flex; align-items: center; gap: var(--sp-3); }
.dojo__ex-word { font-size: 1.2rem; font-weight: 600; min-width: 3.5rem; }
.dojo__ex-how { flex: 1; color: var(--muted); font-size: 0.88rem; }

/* The writing box: practice paper with the 田 guide, the grey model, the ink. */
.dojo__paper { display: flex; flex-direction: column; align-items: center; }
.dojo__box {
  --dojo-paper: #fffaf3;
  --dojo-guide: #efc6d2;
  --dojo-model: #e8dfe4;
  --dojo-next: #cdbcc6;
  --dojo-ink: #241f29;
  --dojo-wet: #4a4152;
  --dojo-miss: #d1453f;
  --dojo-shown: #c4b3bd;
  position: relative;
  width: 100%; max-width: 27rem; aspect-ratio: 1;
  border-radius: var(--radius);
  background: var(--dojo-paper);
  border: 3px solid var(--accent-mid);
  box-shadow: inset 0 0 0 4px var(--dojo-paper), inset 0 0 0 5px var(--dojo-guide), var(--shadow-card);
  user-select: none; -webkit-user-select: none;
  touch-action: none;
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.dojo__box.is-passed { border-color: var(--leaf); }
.dojo__box > svg, .dojo__ink { position: absolute; inset: 0; width: 100%; height: 100%; }
.dojo__ink { touch-action: none; cursor: crosshair; z-index: 2; }
.dojo__box.is-done .dojo__ink { cursor: default; }
.dojo__guide { fill: none; stroke: var(--dojo-guide); stroke-width: 0.5; }
.dojo__guide line { stroke-dasharray: 2 2; }
.dojo__guide rect { stroke: none; }
.dojo__model { z-index: 1; transition: opacity 0.6s ease; }
.dojo__model.is-hidden { opacity: 0; }
.dojo__model-stroke { fill: none; stroke: var(--dojo-model); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--transition); }
.dojo__model-stroke.is-next { stroke: var(--dojo-next); animation: dojo-next 1.6s ease-in-out infinite; }
.dojo__num circle { fill: var(--dojo-paper); stroke: var(--dojo-next); stroke-width: 0.6; }
.dojo__num text { font-family: var(--font-sans); font-size: 4.2px; font-weight: 800; fill: var(--muted); }
.dojo__num.is-next circle { fill: var(--accent); stroke: var(--accent); }
.dojo__num.is-next text { fill: #fff; }
.dojo__num.is-done { opacity: 0; }
.dojo__fx { z-index: 3; pointer-events: none; }
.dojo__anim-stroke { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.dojo__anim.is-hint .dojo__anim-stroke { stroke: var(--primary); }
.dojo__anim { transition: opacity 0.45s ease; }
.dojo__anim.is-fading { opacity: 0; }
.dojo__burst circle { fill: var(--sun); }
.dojo__stamp {
  position: absolute; top: 0.6rem; right: 0.6rem; z-index: 4;
  width: 34%; aspect-ratio: 1;
  display: grid; place-items: center;
  pointer-events: none;
  animation: dojo-stamp 0.45s cubic-bezier(0.22, 1.4, 0.36, 1) both;
}
.dojo__stamp-text {
  position: relative;
  padding: 0.25rem 0.5rem;
  font-size: clamp(0.85rem, 3.4vw, 1.15rem); font-weight: 700; line-height: 1.1; text-align: center;
  color: #d33a3f;
  border: 3px solid #d33a3f; border-radius: 50%;
  aspect-ratio: 1; display: grid; place-items: center;
  width: 100%;
  background: rgba(255, 255, 255, 0.55);
  transform: rotate(-12deg);
}
.dojo__stamp--hanamaru .dojo__stamp-text { border: 0; background: none; width: auto; aspect-ratio: auto; position: absolute; bottom: -0.2rem; font-size: clamp(0.8rem, 3vw, 1rem); transform: rotate(-6deg); }
.dojo__stamp--good .dojo__stamp-text { color: var(--primary-ink); border-color: var(--primary-ink); }
.dojo__stamp--again .dojo__stamp-text { color: var(--muted); border-color: var(--line-strong); border-style: dashed; }
.hanamaru { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-8deg); }
.hanamaru path, .hanamaru ellipse {
  fill: none; stroke: #e0393e; stroke-width: 3.4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: hanamaru-draw 0.6s ease forwards;
}
.hanamaru ellipse { animation-duration: 0.22s; }
.hanamaru--mini { display: inline-block; width: 2.6rem; height: 2.6rem; border: 3px solid #e0393e; border-radius: 50%; box-shadow: 0 0 0 4px rgba(224, 57, 62, 0.15); }
.dojo__say { min-height: 1.5em; margin: var(--sp-3) 0 var(--sp-2); font-weight: 700; text-align: center; color: var(--muted); }
.dojo__say.is-right { color: var(--success-ink); }
.dojo__say.is-wrong { color: var(--danger-ink); }
.dojo__say.is-shown { color: var(--warning-ink); }
.dojo__tools { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); }

/* One character done */
.dojo__result {
  max-width: 34rem; margin: var(--sp-5) auto 0; padding: var(--sp-5);
  display: grid; justify-items: center; gap: var(--sp-2);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  text-align: center;
  animation: pop-in 0.3s ease-out;
}
.dojo__result--hanamaru { border-color: #e0393e; box-shadow: 0 0 0 4px rgba(224, 57, 62, 0.12), var(--shadow-pop); }
.dojo__result--great { border-color: var(--sun); }
.dojo__accuracy { margin: 0; font-family: var(--font-display); line-height: 1; }
.dojo__accuracy strong { font-size: 3.4rem; }
.dojo__accuracy span { font-size: 1.6rem; color: var(--muted); }
.dojo__accuracy-label { margin: 0; color: var(--faint); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; }
.dojo__grade { margin: 0; font-size: 1.15rem; font-weight: 700; }
.dojo__grade .jp { color: #d33a3f; font-size: 1.3rem; margin-right: 0.3rem; }
.dojo__result--good .dojo__grade .jp { color: var(--primary-ink); }
.dojo__result--again .dojo__grade .jp { color: var(--muted); }
.dojo__stars { display: flex; gap: 0.5rem; margin: 0; }
.dojo__stars i {
  width: 2rem; height: 2rem;
  background: var(--line-strong);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.dojo__stars i.is-on { background: var(--sun); }
.dojo__stars i.is-new { animation: dojo-star 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) both; animation-delay: 0.35s; }
.dojo__result-line { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin: 0; color: var(--soft); }
.dojo__result-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-2); }
.dojo__end { max-width: 34rem; margin-inline: auto; }
.dojo__end-list { list-style: none; padding: 0; margin: var(--sp-4) 0 0; display: grid; gap: 0.35rem; text-align: left; }
.dojo__end-item { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: var(--sp-3); padding: 0.4rem 0.8rem; background: var(--paper); border-radius: var(--radius-sm); }
.dojo__end-char { font-size: 1.6rem; }
.dojo__end-stars { color: var(--sun); letter-spacing: 0.1em; }
.dojo__end-acc { font-weight: 700; }
.dojo__end-item:not(.is-passed) .dojo__end-acc { color: var(--warning-ink); }

@keyframes dojo-next { 0%, 100% { stroke: var(--dojo-next); } 50% { stroke: var(--accent-mid); } }
@keyframes dojo-stamp { from { opacity: 0; transform: scale(1.8) rotate(10deg); } to { opacity: 1; transform: none; } }
@keyframes dojo-star { 0% { transform: scale(0) rotate(-40deg); } 70% { transform: scale(1.3) rotate(8deg); } 100% { transform: none; } }
@keyframes hanamaru-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 860px) {
  /* On a phone: the character, then the box straight under it, then the rest. */
  .dojo__main { grid-template-columns: 1fr; grid-template-areas: "info" "paper" "more"; grid-template-rows: auto; row-gap: var(--sp-3); }
  .dojo__info { padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-lg); border-bottom: 1px solid var(--line); }
  .dojo__more { padding: var(--sp-4); border-radius: var(--radius-lg); border-top: 1px solid var(--line); }
  .dojo .buddy { display: none; }
  .dojo__round { margin: var(--sp-2) 0 var(--sp-3); }
  .dojo__step { margin-bottom: var(--sp-2); }
  .dojo__char { font-size: 3.4rem; }
  .dojo__char.is-hidden { width: 3.6rem; height: 3.6rem; font-size: 2rem; }
  .dojo__meaning { font-size: 1.25rem; }
  .dojo__examples-list li { gap: var(--sp-2); }
}
@media (max-width: 480px) {
  .dojo__dot { width: 2rem; height: 2rem; font-size: 0.95rem; }
  .dojo__info { display: grid; grid-template-columns: auto 1fr; column-gap: var(--sp-3); align-items: center; }
  .dojo__step, .dojo__readings { grid-column: 1 / -1; }
  .dojo__sound, .dojo__meaning { margin-top: 0; }
  .dojo__readings { margin-top: var(--sp-2); }
  .dojo__say { margin: var(--sp-2) 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dojo__model-stroke.is-next, .dojo__stamp, .dojo__stars i.is-new, .hanamaru path, .hanamaru ellipse, .dojo__result { animation: none !important; }
  .hanamaru path, .hanamaru ellipse { stroke-dashoffset: 0; }
  .dojo-script:hover .dojo-script__paper { transform: rotate(-3deg); }
}
:root[data-theme="dark"] .dojo__box,
:root[data-theme="dark"] .dojo-script__paper {
  --dojo-paper: #221c21;
  --dojo-guide: #5a3f4c;
  --dojo-model: #3d3339;
  --dojo-next: #6a5862;
  --dojo-ink: #f6efe9;
  --dojo-wet: #d8ccd3;
  --dojo-miss: #ff8b80;
  --dojo-shown: #6f6068;
}
:root[data-theme="dark"] .dojo__stamp-text { background: rgba(34, 28, 33, 0.6); color: #ff7a7f; border-color: #ff7a7f; }
:root[data-theme="dark"] .hanamaru path, :root[data-theme="dark"] .hanamaru ellipse { stroke: #ff6b70; }

/* -- The arcade's cards for the two new games ------------------------------------------ */
.mini-pic { display: flex; align-items: center; gap: var(--sp-3); transform: rotate(-3deg); }
.mini-pic__sticker { width: 3.6rem; height: 3.6rem; --edge: 2px; animation: picq-float 3.2s ease-in-out infinite; }
.mini-pic__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; font-size: 0.85rem; }
.mini-pic__grid i { font-style: normal; padding: 0.1rem 0.45rem; border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--surface); text-align: center; }
.mini-pic__grid i.is-right { border-color: var(--success); background: var(--success-soft); color: var(--success-ink); }
.mini-dojo {
  position: relative; width: 4.6rem; height: 4.6rem; display: grid; place-items: center;
  border: 2px solid var(--accent-mid); border-radius: var(--radius-sm);
  background:
    linear-gradient(var(--accent-soft), var(--accent-soft)) center / 1px 100% no-repeat,
    linear-gradient(var(--accent-soft), var(--accent-soft)) center / 100% 1px no-repeat,
    var(--surface);
  transform: rotate(-4deg);
}
.mini-dojo .jp { font-size: 3rem; line-height: 1; }
.mini-dojo__n { position: absolute; top: 1.1rem; left: 0.7rem; width: 1rem; height: 1rem; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 0.6rem; font-weight: 800; background: var(--accent); color: #fff; }
.arcade__card:hover .mini-dojo { transform: rotate(2deg) scale(1.05); transition: transform var(--transition); }
@media (prefers-reduced-motion: reduce) { .mini-pic__sticker { animation: none; } }

/* -- How to play: the two new games' little pictures -------------------------------- */
.tutorial__pic { display: flex; align-items: center; gap: var(--sp-4); }
.tutorial__pic .sticker { width: 3.4rem; height: 3.4rem; }
.tutorial__pic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; }
.tutorial__pic-grid i { font-style: normal; padding: 0.15rem 0.6rem; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); }
.tutorial__pic-grid i.is-right { border-color: var(--success); background: var(--success-soft); color: var(--success-ink); }
.tutorial__album { display: flex; gap: var(--sp-2); }
.tutorial__album .sticker { width: 3rem; height: 3rem; }
.tutorial__brush {
  position: relative; width: 5.2rem; height: 5.2rem;
  display: grid; place-items: center;
  border: 2px solid var(--accent-mid); border-radius: var(--radius-sm);
  background:
    linear-gradient(var(--accent-soft), var(--accent-soft)) center / 1px 100% no-repeat,
    linear-gradient(var(--accent-soft), var(--accent-soft)) center / 100% 1px no-repeat,
    var(--surface);
}
.tutorial__brush > .jp { font-size: 3.4rem; line-height: 1; color: var(--ink); }
.tutorial__brush-n {
  position: absolute; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: 0.65rem; font-weight: 800;
  background: var(--accent); color: #fff;
}
.tutorial__brush-n--1 { top: 1.5rem; left: 0.9rem; }
.tutorial__brush-n--2 { top: 0.6rem; left: 2.2rem; }
.tutorial__brush-n--3 { top: 2.2rem; left: 3.3rem; }
.tutorial__brush--trace > .jp:first-child { color: var(--line-strong); }
.tutorial__brush-ink { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3.4rem; line-height: 1; color: var(--ink); clip-path: inset(0 45% 0 0); }
.tutorial__brush--memory .tutorial__brush-ask { font-family: var(--font-display); font-weight: 800; color: var(--accent-ink); font-size: 1.1rem; }
.tutorial__score { display: flex; align-items: center; gap: var(--sp-3); font-family: var(--font-display); font-size: 2rem; }

/* ==========================================================================
   Night mode: the rules that need more than the night colours above
   (:root[data-theme="dark"]). Mostly light tints written as fixed colours,
   which become their dark counterparts here. Kept together, in the order
   the parts appear above.
   ========================================================================== */
:root.theme-switching *, :root.theme-switching *::before, :root.theme-switching *::after { transition: none !important; }

/* The theme button (partials/theme_toggle.html) */
.theme-toggle {
  display: inline-grid; place-items: center; grid-auto-flow: column; gap: 0.4rem;
  min-width: 2.25rem; height: 2.25rem; padding: 0 0.55rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--soft);
  font: inherit; font-size: 0.85rem; font-weight: 700; line-height: 1;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.theme-toggle:hover { background: var(--primary-soft); color: var(--primary-ink); }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; color: var(--sun); }
.theme-toggle--labelled { padding: 0 0.85rem; }
.mobile-nav__actions .theme-toggle { justify-self: center; }
.auth-foot { display: flex; align-items: center; justify-content: center; gap: var(--sp-4); flex-wrap: wrap; }

:root[data-theme="dark"] body {
  background-image: radial-gradient(rgba(255, 141, 176, 0.07) 1px, transparent 1.3px);
}

/* Layout and base components */
:root[data-theme="dark"] .section--tint {
  background: var(--surface-warm) radial-gradient(55% 90% at 88% 70%, var(--surface-cool) 0%, rgba(25, 33, 47, 0) 70%);
}
:root[data-theme="dark"] .section--tint::before, :root[data-theme="dark"] .section--tint::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 26' preserveAspectRatio='none'%3E%3Cpath d='M0 26 C 150 0, 300 0, 450 13 S 750 26, 900 13 S 1100 0, 1200 8 L 1200 26 Z' fill='%232a1d24'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .btn--secondary { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35); }
:root[data-theme="dark"] .alert--success { color: var(--success-ink); border-color: rgba(126, 214, 160, 0.3); }
:root[data-theme="dark"] .alert--info { color: var(--primary-ink); border-color: rgba(147, 194, 245, 0.3); }
:root[data-theme="dark"] .alert--warning { color: var(--warning-ink); border-color: rgba(242, 192, 110, 0.3); }
:root[data-theme="dark"] .alert--error, :root[data-theme="dark"] .alert--danger { color: var(--danger-ink); border-color: rgba(255, 157, 147, 0.3); }
:root[data-theme="dark"] .badge--primary { border-color: rgba(147, 194, 245, 0.3); }
:root[data-theme="dark"] .badge--accent { border-color: rgba(255, 141, 176, 0.3); }
:root[data-theme="dark"] .badge--success { border-color: rgba(126, 214, 160, 0.3); }
:root[data-theme="dark"] .badge--warning { border-color: rgba(242, 192, 110, 0.3); }
:root[data-theme="dark"] .badge--danger { border-color: rgba(255, 157, 147, 0.3); }
:root[data-theme="dark"] .table tbody tr:hover { background: var(--hover-tint); }
:root[data-theme="dark"] dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
:root[data-theme="dark"] .accordion details[open] { background: rgba(255, 255, 255, 0.035); }
:root[data-theme="dark"] .site-header { background: var(--glass); }
:root[data-theme="dark"] .cta-band { background: #22497a; border-top-color: #2c5a92; }
:root[data-theme="dark"] .portrait__jp { color: rgba(147, 194, 245, 0.55); }
:root[data-theme="dark"] .site-footer { background: linear-gradient(180deg, rgba(42, 29, 36, 0.75) 0%, rgba(20, 16, 22, 0.4) 45%); }
:root[data-theme="dark"] .note-block { background: rgba(255, 255, 255, 0.04); }
:root[data-theme="dark"] .xp-track { background: var(--track); }
:root[data-theme="dark"] .cal__day--outside { background: rgba(255, 255, 255, 0.025); }
:root[data-theme="dark"] .grid-cal__canvas {
  background: repeating-linear-gradient(
    to bottom,
    transparent, transparent calc(30 * var(--minute)),
    rgba(255, 255, 255, 0.03) calc(30 * var(--minute)), rgba(255, 255, 255, 0.03) calc(60 * var(--minute))
  );
}
:root[data-theme="dark"] .grid-cal__band { background: rgba(122, 168, 202, 0.12); }
:root[data-theme="dark"] .grid-cal__blocked {
  background: repeating-linear-gradient(45deg, rgba(255, 157, 147, 0.14), rgba(255, 157, 147, 0.14) 6px, transparent 6px, transparent 12px);
}
:root[data-theme="dark"] .tabbar { background: var(--glass); }
:root[data-theme="dark"] .grid-cal__busy {
  color: #d5dbe2; border-left-color: #8f9aa7;
  background: repeating-linear-gradient(135deg, rgba(160, 172, 186, 0.18), rgba(160, 172, 186, 0.18) 5px, rgba(160, 172, 186, 0.09) 5px, rgba(160, 172, 186, 0.09) 10px);
}
:root[data-theme="dark"] .cal__chip--busy, :root[data-theme="dark"] .cal__chip--busy:hover { color: #d5dbe2; background: rgba(160, 172, 186, 0.16); border-left-color: #8f9aa7; }
:root[data-theme="dark"] .cal__chip--extra { color: var(--success-ink); }
:root[data-theme="dark"] .cal-legend .swatch--hours { background: rgba(122, 168, 202, 0.24); }
:root[data-theme="dark"] .cal-legend .swatch--blocked { background: repeating-linear-gradient(45deg, rgba(255, 157, 147, 0.32), rgba(255, 157, 147, 0.32) 3px, transparent 3px, transparent 6px); }
:root[data-theme="dark"] .cal-legend .swatch--busy { background: rgba(160, 172, 186, 0.26); border-left-color: #8f9aa7; }

/* The home page and the site's pictures */
:root[data-theme="dark"] .hero__maria-glow {
  background: radial-gradient(circle at 50% 42%, #4a2536 0%, #3a1c2a 55%, #2d1622 100%);
  box-shadow: inset 0 -20px 40px rgba(255, 255, 255, 0.05);
}
:root[data-theme="dark"] .perk__art--game { background: linear-gradient(160deg, #1d3324 0%, var(--surface-warm) 70%); }
:root[data-theme="dark"] .perk__art--book { background: linear-gradient(160deg, #33291b 0%, var(--surface-warm) 70%); }
:root[data-theme="dark"] .perk__art--homework { background: linear-gradient(160deg, #3a2322 0%, var(--surface-warm) 70%); }
:root[data-theme="dark"] .perk__art--streak { background: linear-gradient(160deg, #3a2716 0%, var(--surface-warm) 70%); }
:root[data-theme="dark"] .photo-slot--cutout .photo-slot__preview { background-color: #2a2428; }
/* The scene behind Maria (partials/hero_scene.html): a dusk sky, Fuji in
   shadow, the blossom a deeper pink, and the ground fading into the night
   page instead of into white. */
:root[data-theme="dark"] .hs-sky-1 { stop-color: #3d1f2e; }
:root[data-theme="dark"] .hs-sky-2 { stop-color: #2c1823; }
:root[data-theme="dark"] .hs-sun { fill: #4a2536; }
:root[data-theme="dark"] .hs-fuji-1 { stop-color: #3a2b36; }
:root[data-theme="dark"] .hs-fuji-2 { stop-color: #2a2029; }
:root[data-theme="dark"] .hs-snow { fill: #d9cdd5; }
:root[data-theme="dark"] .hs-bloom { fill: #b8607f; }
:root[data-theme="dark"] .hs-bloom-deep { fill: #9c4b6b; }
:root[data-theme="dark"] .hs-bloom-light { fill: #e3a3bb; }
:root[data-theme="dark"] .hs-fade { stop-color: var(--paper); }
:root[data-theme="dark"] .hs-pond-1 { stop-color: #1f2c40; }
:root[data-theme="dark"] .hs-pond-2 { stop-color: #192438; }
:root[data-theme="dark"] .hs-pond-edge { stroke: #2f4562; }
:root[data-theme="dark"] .hs-wall { fill: #e4d6de; }
:root[data-theme="dark"] .hs-stone, :root[data-theme="dark"] .hs-lantern path, :root[data-theme="dark"] .hs-lantern rect:not(.shrine__glow) { fill: #5c4a55; }
:root[data-theme="dark"] .hs-stone-deep { fill: #4e3e48; }

/* Games */
:root[data-theme="dark"] .arcade__card--quest .arcade__art { background: linear-gradient(160deg, #1d3324 0%, #17281c 100%); }
:root[data-theme="dark"] .mini-timer,
:root[data-theme="dark"] .race__timer,
:root[data-theme="dark"] .script__bar,
:root[data-theme="dark"] .level-pill__bar,
:root[data-theme="dark"] .ach__bar,
:root[data-theme="dark"] .tracked__bar,
:root[data-theme="dark"] .monster__bar,
:root[data-theme="dark"] .streak__goal-bar { background: var(--track); }
:root[data-theme="dark"] .race__input { border-color: var(--line-strong); }
:root[data-theme="dark"] .race__input:disabled { background: #2a242a; }
:root[data-theme="dark"] .race__start { background: rgba(31, 26, 30, 0.96); }
:root[data-theme="dark"] .level--5 { background: linear-gradient(180deg, #17301f 0%, var(--surface) 55%); border-color: #2b5a3a; }
:root[data-theme="dark"] .level--4 { background: linear-gradient(180deg, #24301a 0%, var(--surface) 55%); border-color: #44582b; }
:root[data-theme="dark"] .level--3 { background: linear-gradient(180deg, #33291a 0%, var(--surface) 55%); border-color: #5e4a22; }
:root[data-theme="dark"] .level--2 { background: linear-gradient(180deg, #3a2618 0%, var(--surface) 55%); border-color: #67402a; }
:root[data-theme="dark"] .level--1 { background: linear-gradient(180deg, #3d1f1e 0%, var(--surface) 55%); border-color: #6c3532; }
:root[data-theme="dark"] .level__tag { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.12); }
:root[data-theme="dark"] .stage__unmute { background: rgba(31, 26, 30, 0.94); color: var(--ink); }
:root[data-theme="dark"] .stage__unmute:hover { background: var(--surface); }
:root[data-theme="dark"] .trophy--legendary { background: linear-gradient(160deg, #33291b, var(--surface) 70%); }
:root[data-theme="dark"] .trophy--earned.trophy--legendary { background: linear-gradient(160deg, #3d3017, var(--surface) 70%); }
:root[data-theme="dark"] .ach--done, :root[data-theme="dark"] .today__tile.is-done { border-color: #2b5a3a; }
/* The quest at night: each place in its evening colours. */
:root[data-theme="dark"] .arena--grove    { background: linear-gradient(180deg, #14241a 0%, #1b3022 60%, #22392a 100%); }
:root[data-theme="dark"] .arena--fields   { background: linear-gradient(180deg, #262213 0%, #312a15 60%, #3b3318 100%); }
:root[data-theme="dark"] .arena--mountain { background: linear-gradient(180deg, #161d28 0%, #1d2533 60%, #262f3f 100%); }
:root[data-theme="dark"] .arena--castle   { background: linear-gradient(180deg, #241a20 0%, #2e2129 60%, #382832 100%); }
:root[data-theme="dark"] .arena--shrine   { background: linear-gradient(180deg, #1e1a2a 0%, #262036 60%, #2f2742 100%); }
:root[data-theme="dark"] .arena--peak     { background: linear-gradient(180deg, #121624 0%, #1d2238 55%, #2b2640 100%); }
:root[data-theme="dark"] .trail { background: rgba(0, 0, 0, 0.28); }
:root[data-theme="dark"] .trail::before { background: rgba(255, 255, 255, 0.16); }
:root[data-theme="dark"] .trail__dot { background: var(--surface); border-color: rgba(255, 255, 255, 0.22); }
:root[data-theme="dark"] .battlefield::before { background: rgba(0, 0, 0, 0.3); }
:root[data-theme="dark"] .monster__hp,
:root[data-theme="dark"] .you__streak,
:root[data-theme="dark"] .you__life { background: var(--glass-soft); }
:root[data-theme="dark"] .loot--end { background: linear-gradient(160deg, #33291b, var(--surface) 60%); }
:root[data-theme="dark"] .tutorial__stages i.is-loot { background: #4a3b12; }
:root[data-theme="dark"] .wordle__input:not(.is-hidden) { background: rgba(20, 16, 22, 0.96); }
:root[data-theme="dark"] .wordbank__word.is-tricky { background: var(--warning-soft); }
:root[data-theme="dark"] .wordbank__tag { color: var(--warning-ink); }

/* Streaks and celebrations */
:root[data-theme="dark"] .streak {
  background:
    radial-gradient(60% 120% at 0% 50%, rgba(255, 150, 70, 0.16), transparent 70%),
    linear-gradient(135deg, #2b1f1a, var(--surface-warm));
}
:root[data-theme="dark"] .streak--out { background: linear-gradient(135deg, #241f22, var(--surface)); }
:root[data-theme="dark"] .streak--blaze, :root[data-theme="dark"] .streak--legend {
  background:
    radial-gradient(60% 120% at 0% 50%, rgba(255, 140, 70, 0.24), transparent 70%),
    linear-gradient(135deg, #33201a, #351c27);
}
:root[data-theme="dark"] .streak-pill--risk { background: #33261a; }
:root[data-theme="dark"] .streak-pill--done { background: linear-gradient(180deg, var(--surface), #3a1c28); }
:root[data-theme="dark"] .streak-pill--blaze, :root[data-theme="dark"] .streak-pill--legend { background: linear-gradient(180deg, #33261a, #3a1c28); }
:root[data-theme="dark"] .cheer__card { background: linear-gradient(180deg, #2a221d, var(--surface)); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.55); }
:root[data-theme="dark"] .cheer--milestone .cheer__card { background: linear-gradient(180deg, #33261a, #3a1c28); }
:root[data-theme="dark"] .welcome-over::backdrop { background: rgba(0, 0, 0, 0.6); }

/* Messages */
:root[data-theme="dark"] .chatw__badge { border-color: var(--paper); }
:root[data-theme="dark"] .chatw__form textarea { border-color: var(--line-strong); }
:root[data-theme="dark"] .chat-page .chat { background: rgba(31, 26, 30, 0.94); }

/* What stays light on purpose at night: the QR code to scan (a phone
   camera wants dark on light), and Google's own look in the preview of
   the home page in search results. */
:root[data-theme="dark"] .qr-box { background: #fff; }

/* The pictures in the background at night (partials/sakura.html): Fuji in
   shadow with a pale cap, grey night clouds, dark water, the birds drawn in
   a light line, the branches and petals quieter. The opacity goes on each
   picture, never on the .sakura wrapper: on the wrapper it would lift the
   whole set (z-index -1, behind the page) above the cards. */
:root[data-theme="dark"] .sakura__branch { opacity: 0.38; }
:root[data-theme="dark"] .sakura__petals i::before { background: #c46a8a; mix-blend-mode: normal; opacity: 0.32; }
:root[data-theme="dark"] .scenery__fuji { opacity: 0.75; }
:root[data-theme="dark"] .scenery__pond { opacity: 0.7; }
:root[data-theme="dark"] .sc-mount { fill: #2b3546; }
:root[data-theme="dark"] .sc-shade { fill: #1d2433; }
:root[data-theme="dark"] .sc-snow { fill: #b9c1cd; }
:root[data-theme="dark"] .sc-cloud { fill: #3b3442; }
:root[data-theme="dark"] .sc-water { fill: #1a2637; }
:root[data-theme="dark"] .sc-water-edge { stroke: #2a3d55; }
:root[data-theme="dark"] .sc-bird { stroke: #a99ca3; }
:root[data-theme="dark"] .scenery__canopy { fill: #9c5470; }
:root[data-theme="dark"] .deco { opacity: 0.8; }