/* ==========================================================================
   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;

  /* 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
     Google Fonts 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;
}

/* -- 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); 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-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); }

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

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

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

.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-strong); border-color: rgba(46,74,135,.2); }
.badge--accent { background: var(--accent-soft); color: var(--accent-strong); border-color: rgba(212,99,59,.25); }
.badge--success { background: var(--success-soft); color: var(--success); border-color: rgba(62,123,79,.25); }
.badge--warning { background: var(--warning-soft); color: var(--warning); border-color: rgba(168,114,42,.25); }
.badge--danger { background: var(--danger-soft); color: var(--danger); 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; }
.alert--info { background: var(--primary-soft); border-color: rgba(46,74,135,.25); color: var(--primary-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; }
.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); 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--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);
  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); }
.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); }
.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); }
.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); 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); }

.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-strong); text-decoration: none; }
.nav__link[aria-current="page"] { background: var(--accent-soft); color: var(--accent-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); 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-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-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); 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-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); 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);
  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); 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.82); 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.12); color: #fff; border-color: rgba(255,255,255,0.3); }
.btn--on-dark:hover { background: rgba(255,255,255,0.22); }

.site-footer { background: linear-gradient(180deg, var(--surface-warm) 0%, var(--surface) 40%); 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); }
.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-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); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.note-block__label--accent { color: var(--accent-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); 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-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-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); 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-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: 8rem; resize: vertical; }
.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;
}

/* -- Carousels (Instagram / YouTube) ------------------------------------- */
.carousel { position: relative; }
.carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(15rem, 1fr);
  gap: var(--sp-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: var(--sp-3);
  scrollbar-width: thin;
}
.carousel__track > * { scroll-snap-align: start; }
.carousel__nav { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-bottom: var(--sp-3); }
.carousel__btn {
  width: 2.25rem; height: 2.25rem;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--soft);
}
.carousel__btn:hover { border-color: var(--primary); color: var(--primary); }

.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-strong); }
.social-icon--yt { background: var(--danger-soft); color: var(--danger); }
.social-icon--kofi { background: var(--primary-soft); color: var(--primary); }

.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);
}
.follow-btn--instagram .follow-btn__icon { background: var(--accent-soft); color: var(--accent-strong); }
.follow-btn--youtube .follow-btn__icon { background: var(--danger-soft); color: var(--danger); }
.follow-btn--tiktok .follow-btn__icon { background: var(--ink); color: #fff; }
.follow-btn--spotify .follow-btn__icon { background: var(--success-soft); color: var(--success); }
@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); }
.money-tile__delta--down { color: var(--danger); }

.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); }
.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); 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); 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__chip {
  display: block;
  padding: 2px 5px;
  border-radius: 6px;
  background: var(--primary-soft);
  color: var(--primary-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); text-decoration: line-through; }
.cal__chip--primary { background: var(--accent-soft); color: var(--accent-strong); }
.cal__chip--warning { background: var(--warning-soft); color: var(--warning); }

.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; }

/* 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-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-strong); border-left-color: var(--accent); }
.grid-cal__event--danger { background: var(--danger-soft); color: var(--danger); border-left-color: var(--danger); }
.grid-cal__event--warning { background: var(--warning-soft); color: var(--warning); 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); 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-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); 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); }

/* -- 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); 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-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; }

/* -- 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); }
.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); 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); 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-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__add { color: var(--faint); font-size: 0.85rem; }
.weekly-plan__add:hover { color: var(--primary-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);
  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); }
.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);
  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-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-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; }
@media (max-width: 1080px) and (min-width: 861px) {
  /* Between tablet and laptop the row gets tight, so the softest thing goes. */
  .header-actions .btn--ghost { display: none; }
}

/* ==========================================================================
   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: #fff; 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-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); }
.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);
  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); }

@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);
  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: absolute;          /* anchored to the top of the page: it scrolls away with it */
  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; }
.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; }
.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; }
}
@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);
  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);
  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); 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);
  margin-bottom: var(--sp-3);
}
.script--kanji .script__sample { color: var(--accent); }
.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);
  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); 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); }
.race__card.is-wrong .race__flash { color: var(--danger); }
.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;
  border: 1.5px solid var(--line-strong);
  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: var(--surface-warm); }
.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); 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); 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); 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); 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); }
.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; }
@media (max-width: 1240px) { .header-actions .level-pill__bar { display: none; } }
@media (max-width: 1180px) { .header-actions .btn--ghost { display: none; } }
.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); }
.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); 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); 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); }
.tutorial__levels span:nth-child(2) { color: var(--warning); }
.tutorial__levels span:nth-child(3) { color: var(--accent); }
.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); }
@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); }
.builder__stage { color: var(--accent); 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; }
.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); 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);
  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);
  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); }

/* 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);
  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); 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); 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); }
.fcard.is-dealt { animation: fcard-deal 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes fcard-deal { 0% { transform: translateY(20px) rotateX(40deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
.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); }
.fcard.is-wrong .fcard__reveal { color: var(--danger); }
.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); 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); }
.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); 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); 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); }
.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; }
@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); 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);
  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); }
.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-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); }

/* -- Today: four rings ---------------------------------------------------------- */
.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); }
.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-3); } .ring__dot { width: 2.4rem; height: 2.4rem; } }

/* -- 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); }
.bank__stat--tricky strong { color: var(--accent); }

/* -- 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); }
.drill__verdict.is-wrong { color: var(--danger); }
.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); 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); 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); font-weight: 600; }
.tutorial__pips { display: flex; gap: 0.3rem; align-items: center; font-size: 1.2rem; color: var(--success); }
.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); }
.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);
  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); }
.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); 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; }
.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); 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); 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); 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); 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); }

/* -- 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); }
.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); }
.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-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-strong); font-weight: 700; }
.cal__chip--blocked { background: var(--accent-soft); color: var(--accent-strong); font-size: 0.66rem; }
.cal__note { font-size: 0.64rem; color: var(--primary); 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-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); }
.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); }
.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); 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-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-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); 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-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-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-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); 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);
}