/* =====================================================================
   Capi - app stylesheet (mobile-first, no build step)
   Design system: docs/research/02-visual-design.md (own colours, flat UI with
   3D "lips", Nunito, bouncy-but-fast motion).
   Sections:
     0 fonts  1 tokens (light / dark)  2 base  3 shell layout  4 sidebar
     5 top bar + stats  6 tab bar  7 right rail  8 page primitives
     9 buttons  10 bar + ring  11 sheet, toasts, spinner, rows, toggle,
     confetti, avatar, icons  12 week + streak + goal  13 Capi animations
     14 learning path  15 lesson  16 results  17 welcome  18 pages
     19 keyframes  20 reduced motion
   ===================================================================== */

/* ---------- 0. Fonts (self-hosted Nunito variable, OFL) ---------- */
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 1. Tokens: light (default) ---------- */
:root {
  color-scheme: light;
  --font: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --emoji: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* neutrals (contrast on white in comments) */
  --c-bg: #FFFFFF;
  --c-surface: #FFFFFF;
  --c-surface-2: #F4F6F8;      /* hover, raised */
  --c-surface-3: #EBEFF2;
  --c-line: #E3E8EC;           /* borders + neutral lips */
  --c-line-strong: #CDD5DB;
  --c-ink: #2A3136;            /* 13.2 */
  --c-ink-2: #5A6670;          /* 5.9 */
  --c-mute: #8A95A0;           /* 3.0 - icons, large/secondary only */
  --c-disabled-bg: #E8ECEF;
  --c-disabled-ink: #8A95A0;

  /* brand / semantic */
  --c-green: #1DA851;          /* primary CTA, white label 3.1 (bold uppercase) */
  --c-green-dark: #168A42;     /* lip */
  --c-green-light: #DDF6E5;    /* correct background */
  --c-green-line: #8FD9A8;
  --c-green-ink: #0F6B39;      /* on green-light 5.8 */
  --c-on-green: #FFFFFF;

  --c-red: #E5484D;
  --c-red-dark: #BF3036;
  --c-red-light: #FFE4E5;      /* wrong background */
  --c-red-line: #F5A5A8;
  --c-red-ink: #A61E2B;        /* on red-light 6.2 */
  --c-on-red: #FFFFFF;

  --c-blue: #1A8FE3;
  --c-blue-dark: #1272BC;
  --c-blue-light: #E3F1FD;
  --c-blue-line: #5AAAF0;
  --c-blue-ink: #135FB8;       /* on blue-light 5.4 */
  --c-on-blue: #FFFFFF;

  --c-violet: #7C5CFF;
  --c-violet-dark: #5E40E0;
  --c-violet-light: #EEEAFF;
  --c-violet-ink: #5536D6;     /* on violet-light 6.2 */

  --c-orange: #FF8A1F;         /* streak, daily goal */
  --c-orange-dark: #D96A00;
  --c-orange-light: #FFF0E0;
  --c-orange-ink: #C25A00;     /* on white 4.4 */
  --c-on-orange: #3D2100;

  --c-gold: #FFC21A;           /* XP, rewards */
  --c-gold-dark: #E0A100;
  --c-gold-light: #FFF6D6;
  --c-gold-ink: #8A5A00;       /* on gold-light 5.5 */
  --c-on-gold: #4A3200;

  --c-warn-light: #FFF4D6;     /* near-miss (typo, accents) */
  --c-warn-line: #F2CB61;
  --c-warn-ink: #8A5A00;

  --c-flame-off: #D3DAE0;
  --c-flame-off-in: #E8ECEF;

  /* selection (choices, nav) */
  --c-sel-bg: var(--c-blue-light);
  --c-sel-line: var(--c-blue-line);
  --c-sel-ink: var(--c-blue-ink);

  --c-focus: #3D8EF0;
  --c-scrim: rgb(16 22 28 / .5);
  --c-shadow: 0 8px 24px rgb(16 24 32 / .12);
  --c-shadow-float: 0 4px 12px rgb(0 0 0 / .15);

  /* sizes */
  --topbar-h: 56px;
  --tabbar-h: 64px;
  --side-w: 88px;
  --rail-w: 374px;
  --center-max: 600px;
  --lesson-max: 1000px;
  --tap: 44px;

  /* motion */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.55, 0, 1, .45);
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);
  --ease-sheet: cubic-bezier(.2, 1.35, .4, 1);

  /* layers */
  --z-card: 30;
  --z-sticky: 40;
  --z-topbar: 50;
  --z-nav: 60;
  --z-foot: 60;
  --z-modal: 300;
  --z-toast: 400;
  --z-fx: 500;
}

/* ---------- 1b. Tokens: dark (system setting unless data-theme="light") ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg: #111A21; --c-surface: #1A252E; --c-surface-2: #22303A; --c-surface-3: #2A3945;
    --c-line: #34444F; --c-line-strong: #455763;
    --c-ink: #EDF2F6; --c-ink-2: #B4C0C9; --c-mute: #7F8E99;
    --c-disabled-bg: #2A3945; --c-disabled-ink: #6F7E89;
    --c-green: #3DCB6E; --c-green-dark: #27A052; --c-green-light: #15291F; --c-green-line: #2E6B47; --c-green-ink: #5FE394; --c-on-green: #0E1A12;
    --c-red: #F2555B; --c-red-dark: #C23A40; --c-red-light: #2E1A1F; --c-red-line: #7A3440; --c-red-ink: #FF7A86; --c-on-red: #111A21;
    --c-blue: #4C9BFF; --c-blue-dark: #2F78D6; --c-blue-light: #182B3D; --c-blue-line: #3F7FCC; --c-blue-ink: #8CC4FF; --c-on-blue: #0E1A24;
    --c-violet: #8F78FF; --c-violet-dark: #6A52E0; --c-violet-light: #2A2550; --c-violet-ink: #B9ABFF;
    --c-orange: #FF9E40; --c-orange-dark: #D97A1F; --c-orange-light: #33241A; --c-orange-ink: #FFB066; --c-on-orange: #2A1600;
    --c-gold: #FFC93D; --c-gold-dark: #D9A21F; --c-gold-light: #33291A; --c-gold-ink: #FFD166; --c-on-gold: #4A3200;
    --c-warn-light: #2E2614; --c-warn-line: #6B5520; --c-warn-ink: #FFD166;
    --c-flame-off: #3A4954; --c-flame-off-in: #4A5A66;
    --c-focus: #6BB4FF;
    --c-scrim: rgb(0 0 0 / .6);
    --c-shadow: 0 10px 28px rgb(0 0 0 / .5);
    --c-shadow-float: 0 6px 16px rgb(0 0 0 / .45);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: #111A21; --c-surface: #1A252E; --c-surface-2: #22303A; --c-surface-3: #2A3945;
  --c-line: #34444F; --c-line-strong: #455763;
  --c-ink: #EDF2F6; --c-ink-2: #B4C0C9; --c-mute: #7F8E99;
  --c-disabled-bg: #2A3945; --c-disabled-ink: #6F7E89;
  --c-green: #3DCB6E; --c-green-dark: #27A052; --c-green-light: #15291F; --c-green-line: #2E6B47; --c-green-ink: #5FE394; --c-on-green: #0E1A12;
  --c-red: #F2555B; --c-red-dark: #C23A40; --c-red-light: #2E1A1F; --c-red-line: #7A3440; --c-red-ink: #FF7A86; --c-on-red: #111A21;
  --c-blue: #4C9BFF; --c-blue-dark: #2F78D6; --c-blue-light: #182B3D; --c-blue-line: #3F7FCC; --c-blue-ink: #8CC4FF; --c-on-blue: #0E1A24;
  --c-violet: #8F78FF; --c-violet-dark: #6A52E0; --c-violet-light: #2A2550; --c-violet-ink: #B9ABFF;
  --c-orange: #FF9E40; --c-orange-dark: #D97A1F; --c-orange-light: #33241A; --c-orange-ink: #FFB066; --c-on-orange: #2A1600;
  --c-gold: #FFC93D; --c-gold-dark: #D9A21F; --c-gold-light: #33291A; --c-gold-ink: #FFD166; --c-on-gold: #4A3200;
  --c-warn-light: #2E2614; --c-warn-line: #6B5520; --c-warn-ink: #FFD166;
  --c-flame-off: #3A4954; --c-flame-off-in: #4A5A66;
  --c-focus: #6BB4FF;
  --c-scrim: rgb(0 0 0 / .6);
  --c-shadow: 0 10px 28px rgb(0 0 0 / .5);
  --c-shadow-float: 0 6px 16px rgb(0 0 0 / .45);
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--c-bg);
}
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--c-bg);
  color: var(--c-ink);
  font: 600 17px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4 { margin: 0 0 .4em; color: var(--c-ink); font-weight: 800; line-height: 1.25; }
h1 { font-size: 26px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
p { margin: 0 0 .75em; }
a { color: var(--c-blue-ink); text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
svg { flex: none; }
img { max-width: 100%; }
[hidden] { display: none !important; }
::selection { background: var(--c-blue-light); color: var(--c-ink); }
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }
.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- 3. Shell layout ---------- */
/* <1024px: sticky top stats bar + fixed bottom tab bar.
   >=1024px: sidebar | centre column (max 600px) | right rail (~350px). */
.shell { min-height: 100dvh; }
.sidebar, .rail { display: none; }
.main-col { min-width: 0; }
.main {
  width: 100%;
  max-width: var(--center-max);
  margin: 0 auto;
  padding: 16px 16px calc(var(--tabbar-h) + 28px + env(safe-area-inset-bottom));
}
@media (min-width: 1024px) {
  .shell {
    display: grid;
    grid-template-columns: var(--side-w) minmax(0, 1fr) var(--rail-w);
    align-items: start;
  }
  .sidebar { display: flex; position: sticky; top: 0; height: 100dvh; }
  .topbar, .tabbar { display: none; }
  .rail { display: block; position: sticky; top: 0; height: 100dvh; overflow-y: auto; padding: 24px 24px 24px 0; scrollbar-width: thin; }
  .main { padding: 24px 24px 64px; }
  .shell-wide { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .shell-wide .rail { display: none; }
  .shell-wide .main { --center-max: 960px; }
}
@media (min-width: 1280px) { :root { --side-w: 256px; } }

/* ---------- 4. Sidebar ---------- */
.sidebar {
  flex-direction: column;
  gap: 6px;
  padding: 20px 12px;
  background: var(--c-bg);
  border-right: 2px solid var(--c-line);
  overflow-y: auto;
  scrollbar-width: none;
}
.logo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; margin: 0 0 14px; padding: 0 6px;
  border-radius: 14px;
  color: var(--c-green);
  font: 900 28px/1 var(--font);
  letter-spacing: -.01em;
}
.logo span { display: none; }
.side-link {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  min-height: 52px; padding: 6px 10px;
  border: 2px solid transparent; border-radius: 12px;
  color: var(--c-ink-2);
  font: 800 15px/1.1 var(--font); letter-spacing: .05em; text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .15s;
}
.side-link > span:last-child { display: none; }
@media (hover: hover) { .side-link:hover { background: var(--c-surface-2); } }
.side-link:active { transform: scale(.98); }
.side-link.active { background: var(--c-sel-bg); border-color: var(--c-sel-line); color: var(--c-sel-ink); }
.side-ic { display: grid; place-items: center; width: 30px; height: 30px; color: var(--c-mute); }
.side-link.active .side-ic { color: var(--c-sel-ink); }
@media (min-width: 1280px) {
  .sidebar { padding: 20px 16px; }
  .logo, .side-link { justify-content: flex-start; }
  .logo span, .side-link > span:last-child { display: inline; }
}

/* ---------- 5. Top bar + stats ---------- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-topbar);
  padding-top: env(safe-area-inset-top);
  background: var(--c-bg);
  border-bottom: 2px solid var(--c-line);
}
.stats {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  max-width: var(--center-max); height: var(--topbar-h); margin: 0 auto; padding: 0 8px;
}
.stat {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: var(--tap); height: var(--tap); padding: 0 8px;
  border: 0; border-radius: 12px; background: transparent;
  color: var(--c-ink-2);
  font: 800 17px/1 var(--font); font-variant-numeric: tabular-nums;
}
@media (hover: hover) { .stat:hover { background: var(--c-surface-2); } }
.stat:active { transform: scale(.95); }
.stat-streak { color: var(--c-orange-ink); }
.stat-streak.is-off { color: var(--c-mute); }
.stat-oranges { color: var(--c-orange-ink); }
.stat-hearts { color: var(--c-red); }
.flag {
  display: inline-block; flex: none; overflow: hidden; vertical-align: middle;
  border-radius: 7px;
  box-shadow: 0 0 0 2px var(--c-line);
}
.flag svg { display: block; width: 100%; height: 100%; }

/* ---------- 6. Tab bar (phones) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-nav);
  display: flex; align-items: center; justify-content: space-around;
  height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding: 0 max(8px, env(safe-area-inset-left)) env(safe-area-inset-bottom) max(8px, env(safe-area-inset-right));
  background: var(--c-bg);
  border-top: 2px solid var(--c-line);
}
.tab {
  position: relative; display: grid; place-items: center;
  width: 60px; height: 50px;
  border: 2px solid transparent; border-radius: 14px;
  transition: background-color .15s;
}
.tab:active { transform: scale(.94); }
.tab.active { background: var(--c-sel-bg); border-color: var(--c-sel-line); }
.dot {
  position: absolute; top: 5px; right: 9px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--c-red);
  box-shadow: 0 0 0 2px var(--c-bg);
}
.nav-capi { display: grid; place-items: center; width: 34px; height: 34px; }

/* ---------- 7. Right rail (desktop) ---------- */
.rail-inner { display: flex; flex-direction: column; gap: 16px; max-width: 350px; }
.rail-stats .stats { justify-content: space-between; height: auto; max-width: none; padding: 0; }
.rail .card h3 { font-size: 18px; }
.rail-foot { padding: 8px 0 24px; color: var(--c-mute); font: 700 14px/1.6 var(--font); text-align: center; }
.rail-foot a { color: var(--c-mute); }
@media (hover: hover) { .rail-foot a:hover { color: var(--c-ink-2); } }

/* ---------- 8. Page primitives ---------- */
.page { display: flex; flex-direction: column; gap: 16px; }
.page-head { display: flex; align-items: center; gap: 8px; min-height: 48px; }
.page-head h1, .page-head h2 { margin: 0; font-size: 24px; }
.back-btn {
  display: inline-grid; place-items: center; flex: none;
  width: var(--tap); height: var(--tap); margin-left: -8px;
  border: 0; border-radius: 12px; background: transparent; color: var(--c-mute);
}
@media (hover: hover) { .back-btn:hover { background: var(--c-surface-2); color: var(--c-ink-2); } }
.section { margin-top: 24px; }
.section:first-child { margin-top: 0; }
.section-title { margin: 0 0 12px; font: 800 20px/1.3 var(--font); }
.center-pad {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  min-height: 50dvh; padding: 32px 16px; text-align: center;
}
.center { text-align: center; }
.muted { color: var(--c-ink-2); }
.link {
  display: inline-flex; align-items: center; min-height: var(--tap);
  color: var(--c-blue-ink);
  font: 800 14px/1 var(--font); letter-spacing: .04em; text-transform: uppercase;
}
@media (hover: hover) { .link:hover { filter: brightness(1.15); } }
.row-gap { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; }
.card {
  padding: 16px;
  background: var(--c-surface);
  border: 2px solid var(--c-line); border-radius: 16px;
}
.card h3 { margin: 0 0 6px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.card-head h3 { margin: 0; }
.card-emoji { margin-right: 8px; font-family: var(--emoji); font-size: 1.15em; line-height: 1; }
.big-reward {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 8px 0 20px;
  color: var(--c-orange-ink);
  font: 900 34px/1 var(--font); font-variant-numeric: tabular-nums;
}
.sheet-pad { padding: 4px 0; }
.sheet-pad h2 { margin-top: 8px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 4px 10px;
  border-radius: 999px;
  background: var(--c-surface-2); color: var(--c-ink-2);
  font: 800 13px/1.2 var(--font); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.pill-done { background: var(--c-green-light); color: var(--c-green-ink); }
.pill-wait { background: var(--c-orange-light); color: var(--c-orange-ink); }

/* ---------- 9. Buttons (3D lip) ---------- */
.btn {
  --_bg: var(--c-green); --_fg: var(--c-on-green); --_lip: var(--c-green-dark);
  --_bd: transparent; --_lipw: 4px;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 20px;
  margin: 0 0 var(--_lipw);                 /* the lip's space is reserved: no jump on press */
  border: 2px solid var(--_bd); border-radius: 16px;
  background: var(--_bg); color: var(--_fg);
  box-shadow: 0 var(--_lipw) 0 var(--_lip);
  font: 800 16px/1.15 var(--font); letter-spacing: .05em; text-transform: uppercase; text-align: center;
  white-space: normal;
  user-select: none; -webkit-user-select: none;
  transition: transform 80ms linear, box-shadow 80ms linear, filter .15s, background-color .15s;
}
@media (hover: hover) { .btn:hover:not(:disabled) { filter: brightness(1.06); } }
.btn:active:not(:disabled) { transform: translateY(var(--_lipw)); box-shadow: 0 0 0 var(--_lip); }
.btn:focus-visible { outline-offset: 3px; border-radius: 16px; }
.btn:disabled, .btn[aria-disabled="true"] {
  --_bg: var(--c-disabled-bg); --_fg: var(--c-disabled-ink); --_bd: transparent;
  box-shadow: none; transform: translateY(var(--_lipw)); filter: none;
}
.btn-primary { /* default green */ }
.btn-secondary { --_bg: var(--c-surface); --_fg: var(--c-blue-ink); --_bd: var(--c-line); --_lip: var(--c-line); --_lipw: 2px; }
@media (hover: hover) { .btn-secondary:hover:not(:disabled) { filter: none; --_bg: var(--c-surface-2); } }
.btn-ghost { --_bg: transparent; --_fg: var(--c-blue-ink); --_lip: transparent; --_lipw: 0px; box-shadow: none; }
@media (hover: hover) { .btn-ghost:hover:not(:disabled) { filter: none; --_bg: var(--c-surface-2); } }
.btn-ghost:active:not(:disabled) { transform: none; opacity: .7; }
.btn-danger { --_bg: var(--c-red); --_fg: var(--c-on-red); --_lip: var(--c-red-dark); }
.btn-blue { --_bg: var(--c-blue); --_fg: var(--c-on-blue); --_lip: var(--c-blue-dark); }
.btn-gold { --_bg: var(--c-gold); --_fg: var(--c-on-gold); --_lip: var(--c-gold-dark); }
.btn-white { --_bg: #FFFFFF; --_fg: var(--u-text, var(--c-green-ink)); --_lip: var(--u-dark, rgb(0 0 0 / .18)); }
.btn-locked { --_bg: var(--c-surface-3); --_fg: var(--c-mute); --_lip: transparent; box-shadow: none; }
.btn-sm { min-height: var(--tap); padding: 0 14px; border-radius: 12px; font-size: 14px; --_lipw: 3px; }
.btn-secondary.btn-sm { --_lipw: 2px; }
.btn-md { /* default */ }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
.btn-block { display: flex; width: 100%; }

/* ---------- 10. Progress bar + ring ---------- */
.bar {
  position: relative; overflow: hidden;
  height: 12px; border-radius: 999px;
  background: var(--c-line);
}
.bar-tall { height: 16px; }
.bar-fill {
  position: relative; height: 100%;
  border-radius: inherit;
  background: var(--bar, var(--c-green));
  transition: width .4s var(--ease-out), background-color .3s;
}
.bar-shine {
  position: absolute; top: 25%; left: 6px; right: 6px;
  height: 30%; min-height: 3px; border-radius: 999px;
  background: #FFFFFF; opacity: .28;
}
.ring { position: relative; display: inline-grid; place-items: center; flex: none; vertical-align: middle; }
.ring > svg { position: absolute; inset: 0; overflow: visible; }
.ring-arc { transition: stroke-dashoffset .6s var(--ease-out); }
.ring-inner { position: relative; display: grid; place-items: center; }
.ring-xp { color: var(--c-ink); font: 900 17px/1 var(--font); font-variant-numeric: tabular-nums; }

/* ---------- 11. Sheet, toasts, spinner, rows, toggle, confetti, avatar, icons ---------- */
.sheet-wrap {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: flex-end; justify-content: center;
  background: var(--c-scrim);
  animation: fade-in .2s ease both;
}
.sheet {
  position: relative; width: 100%; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 26px 20px calc(24px + env(safe-area-inset-bottom));
  background: var(--c-surface); color: var(--c-ink);
  border-radius: 24px 24px 0 0;
  box-shadow: var(--c-shadow);
  animation: sheet-up .32s var(--ease-out) both;
}
.sheet::before {               /* grabber */
  content: ""; display: block; width: 40px; height: 5px;
  margin: -14px auto 16px; border-radius: 3px; background: var(--c-line);
}
@media (min-width: 700px) {
  .sheet-wrap { align-items: center; padding: 24px; }
  .sheet { width: min(440px, 100%); padding: 28px; border-radius: 24px; animation: pop-in .28s var(--ease-pop) both; }
  .sheet::before { display: none; }
}

.toasts {
  position: fixed; z-index: var(--z-toast);
  left: 50%; top: calc(env(safe-area-inset-top) + 12px);
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: max-content; max-width: calc(100vw - 32px);
  pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-radius: 14px;
  background: var(--c-ink); color: var(--c-bg);
  box-shadow: var(--c-shadow);
  font: 700 15px/1.35 var(--font);
  pointer-events: auto;
  animation: toast-in .3s var(--ease-pop) both;
}
.toast-info { background: var(--c-ink); color: var(--c-bg); }
.toast-success { background: var(--c-green); color: var(--c-on-green); }
.toast-error { background: var(--c-red); color: var(--c-on-red); }
@media (min-width: 1024px) { .toasts { top: 20px; } }

.spinner {
  display: inline-block; flex: none;
  border: 4px solid var(--c-line); border-top-color: var(--c-green); border-radius: 50%;
  animation: spin .8s linear infinite;
}

.row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 60px; padding: 12px 4px;
  border: 0; background: transparent; color: var(--c-ink);
  text-align: start;
}
.row + .row { border-top: 2px solid var(--c-line); }
.row-btn { border-radius: 12px; transition: background-color .15s; }
@media (hover: hover) { .row-btn:hover { background: var(--c-surface-2); } }
.row-btn:active { transform: scale(.99); }
.row-icon {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--c-surface-2); color: var(--c-ink-2);
  font-size: 22px;
}
.row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.row-title { font: 800 17px/1.3 var(--font); }
.row-sub { color: var(--c-ink-2); font: 600 15px/1.35 var(--font); }
.row-right { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; color: var(--c-ink-2); font-weight: 700; }

.toggle {
  position: relative; flex: none;
  width: 52px; height: 32px; padding: 0;
  border: 0; border-radius: 999px;
  background: var(--c-line-strong);
  transition: background-color .2s;
}
.toggle::after { content: ""; position: absolute; inset: -6px -2px; }   /* 44px hit area */
.toggle-knob {
  position: absolute; top: 4px; left: 4px;
  width: 24px; height: 24px; border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 2px 0 rgb(0 0 0 / .15);
  transition: transform .22s var(--ease-pop);
}
.toggle.on { background: var(--c-green); }
.toggle.on .toggle-knob { transform: translateX(20px); }
.toggle:focus-visible { border-radius: 999px; }

.confetti {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: var(--z-fx);
}

.avatar {
  position: relative; display: inline-block; flex: none; overflow: hidden; vertical-align: middle;
  border-radius: 50%;
  background: var(--c-surface-2);
  box-shadow: 0 0 0 2px var(--c-line);
}
.avatar > svg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -46%); }

.ic, .ic-flame, .ic-orange, .ic-heart, .ic-freeze, .ic-zap, .ic-chestart, .ic-trophyart {
  display: inline-block; flex: none; vertical-align: middle;
}

/* ---------- 12. Week row, streak card, goal card ---------- */
.week {
  display: flex; justify-content: space-between; gap: 4px;
  margin: 16px 0; padding: 14px 12px;
  border: 2px solid var(--c-line); border-radius: 16px;
}
.wday { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 8px; min-width: 34px; }
.wday-l { color: var(--c-mute); font: 800 14px/1 var(--font); text-transform: uppercase; }
.wday-dot {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--c-surface-3);
}
.wday.is-today .wday-l { color: var(--c-ink); }
.wday.is-done .wday-l { color: var(--c-orange-ink); }
.wday.is-done .wday-dot { background: var(--c-orange-light); box-shadow: inset 0 0 0 2px var(--c-orange); animation: value-pop .4s var(--ease-pop) both; }
.wday.is-frozen .wday-dot { background: var(--c-blue-light); box-shadow: inset 0 0 0 2px var(--c-blue-line); }
.wday.is-today:not(.is-done):not(.is-frozen) .wday-dot { background: var(--c-surface); border: 2px dashed var(--c-orange); animation: today-pulse .6s ease-in-out; }
.wday.is-future .wday-dot { background: transparent; border: 2px solid var(--c-line); }
.week-compact { gap: 2px; margin: 10px 0 0; padding: 0; border: 0; }
.week-compact .wday { gap: 6px; min-width: 28px; }
.week-compact .wday-dot { width: 28px; height: 28px; }
.week-compact .wday-l { font-size: 12px; }

.streak-card { display: flex; flex-direction: column; }
.streak-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 4px 0; }
.streak-head .ic-flame { transform-origin: 50% 100%; animation: flame-idle 1.6s ease-in-out infinite alternate; }
.streak-num { color: var(--c-orange-ink); font: 900 56px/1 var(--font); font-variant-numeric: tabular-nums; }
.streak-lbl { color: var(--c-orange-ink); font: 800 18px/1.2 var(--font); }
.streak-msg { margin: 12px 0 0; color: var(--c-ink-2); font-weight: 700; }
.streak-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font: 700 15px/1.3 var(--font); }
.streak-foot > span { display: inline-flex; align-items: center; gap: 6px; }

.goal-card { display: flex; align-items: center; gap: 16px; }
.goal-card > div { flex: 1; min-width: 0; }
.goal-card h3 { margin: 0 0 2px; }
.goal-card p { margin: 0 0 10px; font-size: 15px; }

/* ---------- 13. Capi (mascot) animations ---------- */
.capi { display: inline-block; flex: none; overflow: visible; vertical-align: middle; }
.capi .capi-body, .capi .capi-eyes, .capi-blink, .capi-orange, .capi-sparkles path { transform-box: fill-box; }
.capi-bob .capi-body { transform-origin: 50% 100%; animation: capi-bob 2.8s ease-in-out infinite; }
.capi-jump { transform-origin: 50% 100%; animation: capi-jump .7s var(--ease-pop) both; }
.capi-shake { transform-origin: 50% 90%; animation: capi-shake .5s ease-in-out; }
.capi-wiggle .capi-body { transform-origin: 50% 100%; animation: capi-wiggle 1.4s ease-in-out infinite; }
.capi-blink { transform-origin: center; animation: capi-blink 4.2s infinite; }
.capi-orange { transform-origin: 50% 100%; animation: capi-orange 3.2s ease-in-out infinite; }
.capi-sparkles path { transform-origin: center; animation: twinkle 1.4s ease-in-out infinite; }
.capi-sparkles path:nth-child(2) { animation-delay: .35s; }
.capi-sparkles path:nth-child(3) { animation-delay: .7s; }
.capi-sparkles path:nth-child(4) { animation-delay: 1.05s; }

/* ---------- 14. Learning path ---------- */
.learn { display: flex; flex-direction: column; padding-bottom: 24px; }
.unit { display: flex; flex-direction: column; }
.unit-c0 { --u: #1DA851; --u-dark: #168A42; --u-light: #DDF6E5; --u-ink: #FFFFFF; --u-text: #137A3D; }  /* green  */
.unit-c1 { --u: #7C5CFF; --u-dark: #5E40E0; --u-light: #EEEAFF; --u-ink: #FFFFFF; --u-text: #5536D6; }  /* violet */
.unit-c2 { --u: #1A8FE3; --u-dark: #1272BC; --u-light: #E3F1FD; --u-ink: #FFFFFF; --u-text: #1269B0; }  /* sky    */
.unit-c3 { --u: #E8730C; --u-dark: #BF5A00; --u-light: #FFEEDD; --u-ink: #FFFFFF; --u-text: #B35300; }  /* orange */
.unit-c4 { --u: #E5408C; --u-dark: #BF2A6E; --u-light: #FDE6F1; --u-ink: #FFFFFF; --u-text: #B3245F; }  /* pink   */
.unit-c5 { --u: #0D9E94; --u-dark: #0A7E76; --u-light: #DDF5F3; --u-ink: #FFFFFF; --u-text: #08726B; }  /* teal   */
.unit-c6 { --u: #E5484D; --u-dark: #BF3036; --u-light: #FDE4E5; --u-ink: #FFFFFF; --u-text: #B02A30; }  /* red    */
.unit-c7 { --u: #F5B400; --u-dark: #C98F00; --u-light: #FFF4D1; --u-ink: #4A3200; --u-text: #8A5A00; }  /* gold   */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.unit-c0, .unit-c1, .unit-c2, .unit-c3, .unit-c4, .unit-c5, .unit-c6, .unit-c7) {
    --u-light: color-mix(in srgb, var(--u) 22%, #111A21);
  }
}
:root[data-theme="dark"] :is(.unit-c0, .unit-c1, .unit-c2, .unit-c3, .unit-c4, .unit-c5, .unit-c6, .unit-c7) {
  --u-light: color-mix(in srgb, var(--u) 22%, #111A21);
}

.unit-head {
  position: sticky; top: calc(var(--topbar-h) + env(safe-area-inset-top) + 12px); z-index: var(--z-sticky);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch;
  min-height: 82px; margin-bottom: 4px;
  background: var(--u, var(--c-green)); color: var(--u-ink, #FFFFFF);
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--u-dark, var(--c-green-dark));
}
.unit-head::before {           /* hides nodes scrolling in the gap above the stuck header */
  content: ""; position: absolute; left: -16px; right: -16px; bottom: calc(100% + 0px);
  height: 14px; background: var(--c-bg);
}
.unit-head.is-locked { background: var(--c-surface-2); color: var(--c-ink-2); box-shadow: 0 4px 0 var(--c-line); }
.unit-text { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 14px 16px; }
.unit-kicker { font: 800 13px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; opacity: .85; }
.unit-title { margin: 0; color: inherit; font: 800 19px/1.25 var(--font); overflow-wrap: anywhere; }
.unit-guide {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 60px; padding: 0 16px;
  border: 0; border-left: 2px solid var(--u-dark, var(--c-green-dark)); border-radius: 0 16px 16px 0;
  background: transparent; color: inherit;
  font: 800 14px/1 var(--font); letter-spacing: .05em; text-transform: uppercase;
}
.unit-guide span { display: none; }
@media (hover: hover) { .unit-guide:hover { background: rgb(255 255 255 / .1); } }
.unit-guide:active { background: rgb(0 0 0 / .08); }
.unit-head.is-locked .unit-guide { border-left-color: var(--c-line); }
@media (min-width: 420px) { .unit-guide span { display: inline; } }
@media (min-width: 700px) { .unit-title { font-size: 22px; } .unit-guide { padding: 0 22px; } }
@media (min-width: 1024px) { .unit-head { top: 16px; } }

.path { position: relative; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 36px 0 32px; }
.node-wrap { position: relative; left: var(--x, 0px); display: flex; flex-direction: column; align-items: center; }
.node-wrap.has-bubble { margin-top: 40px; }
.node-wrap:has(.jump-bubble) { margin-top: 32px; }
.node-wrap:has(.node-card) { z-index: var(--z-card); }

.node {
  position: relative; display: block;
  width: 70px; height: 77px; padding: 0;
  border: 0; background: none; color: inherit;
}
.node:focus-visible { outline: none; }
.node:focus-visible .node-face { outline: 3px solid var(--c-focus); outline-offset: 4px; }
.node-face {
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 70px; height: 70px; border-radius: 50%;
  background: var(--u, var(--c-green)); color: var(--u-ink, #FFFFFF);
  box-shadow: 0 7px 0 var(--u-dark, var(--c-green-dark));
  transition: transform 80ms linear, box-shadow 80ms linear;
}
.node-face::before {           /* own touch: soft inner highlight arc */
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  border-top: 4px solid rgb(255 255 255 / .3);
  pointer-events: none;
}
.node-face .ic { position: relative; }
@media (hover: hover) { .node:not(.is-locked):hover .node-face { transform: translateY(2px); box-shadow: 0 5px 0 var(--u-dark, var(--c-green-dark)); } }
.node:not(.is-locked):active .node-face { transform: translateY(7px); box-shadow: 0 0 0 var(--u-dark, var(--c-green-dark)); }
.node.is-locked .node-face { background: var(--c-line); color: var(--c-mute); box-shadow: 0 7px 0 var(--c-line-strong); }
.node.is-locked .node-face::before { display: none; }
.node.is-locked:active .node-face { transform: translateY(3px); box-shadow: 0 4px 0 var(--c-line-strong); }
.node-skill, .node-practice { /* default 3D node look in the unit colour */ }
.node-practice:not(.is-locked) .node-face::after {       /* small dashed halo marks practice nodes */
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px dashed var(--u-light, var(--c-line)); pointer-events: none;
}
.node-review.is-done .node-face { background: var(--c-gold); color: #6B4A00; box-shadow: 0 7px 0 var(--c-gold-dark); }
.node-ring { position: absolute; left: 50%; top: 35px; transform: translate(-50%, -50%); pointer-events: none; }
.node-chest { display: grid; place-items: center; width: 84px; height: 78px; }
.node-chest .ic-chestart { filter: drop-shadow(0 5px 0 rgb(0 0 0 / .14)); transition: transform 80ms linear; }
.node-chest:active .ic-chestart { transform: translateY(4px); }
.node-chest.is-locked .ic-chestart { filter: grayscale(1) opacity(.55); }
.node-chest.is-current .ic-chestart { animation: chest-wiggle 2.4s ease-in-out infinite; }
.node-chest:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.start-bubble, .jump-bubble {
  position: absolute; bottom: calc(100% + 12px); left: 50%; translate: -50% 0; z-index: 2;
  padding: 10px 14px;
  border: 2px solid var(--c-line); border-radius: 14px;
  background: var(--c-surface); color: var(--u-text, var(--c-green-ink));
  font: 800 15px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  animation: bubble-bounce 1s var(--ease-out) infinite alternate;
}
.start-bubble { pointer-events: none; }
.start-bubble::after, .jump-bubble::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 12px; height: 12px; translate: -50% -6px; rotate: 45deg;
  background: inherit;
  border-right: 2px solid var(--c-line); border-bottom: 2px solid var(--c-line);
}
.jump-bubble { min-height: var(--tap); border-color: var(--u, var(--c-line)); background: var(--u-light, var(--c-surface)); font-size: 14px; }
.jump-bubble::after { border-color: var(--u, var(--c-line)); }

.node-card {
  position: absolute; top: calc(100% + 14px); left: calc(50% - var(--x, 0px)); translate: -50% 0;
  z-index: var(--z-card);
  width: min(320px, calc(100vw - 32px)); padding: 16px;
  border-radius: 16px;
  background: var(--u, var(--c-green)); color: var(--u-ink, #FFFFFF);
  box-shadow: var(--c-shadow);
  text-align: start;
  transform-origin: top center;
  animation: card-pop .22s var(--ease-pop) both;
}
.node-card::before {
  content: ""; position: absolute; top: -7px; left: calc(50% + var(--x, 0px));
  width: 16px; height: 16px; translate: -50% 0; rotate: 45deg;
  border-radius: 3px; background: inherit;
}
.node-card h3 { display: flex; align-items: center; gap: 4px; margin: 0 0 4px; color: inherit; font: 800 19px/1.25 var(--font); }
.node-card p { margin: 0 0 14px; font: 700 16px/1.35 var(--font); opacity: .92; }
.node-card.is-locked { background: var(--c-surface-2); color: var(--c-ink-2); border: 2px solid var(--c-line); }
.node-card.is-locked::before { top: -9px; border-left: 2px solid var(--c-line); border-top: 2px solid var(--c-line); }

.path-capi { position: absolute; top: 52%; z-index: 0; pointer-events: none; }
.path-capi.left { left: max(-6px, calc(50% - 215px)); }
.path-capi.right { right: max(-6px, calc(50% - 215px)); }
@media (max-width: 380px) { .path-capi .capi { width: 88px; height: 88px; } }

.unit-divider {
  display: flex; align-items: center; gap: 16px;
  margin: 12px 0 28px;
  color: var(--c-mute);
  font: 800 16px/1.3 var(--font); text-align: center;
}
.unit-divider::before, .unit-divider::after { content: ""; flex: 1; height: 2px; background: var(--c-line); }
.unit-divider span { max-width: 70%; }
.path-end {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 24px 16px 40px; color: var(--c-ink-2); font-weight: 700; text-align: center;
}

/* ---------- 15. Lesson (full screen) ---------- */
.lesson { display: flex; flex-direction: column; min-height: 100dvh; background: var(--c-bg); }
.lesson-top {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: var(--lesson-max); margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 10px;
}
.lesson-top .bar { flex: 1; }
.lesson-close {
  display: inline-grid; place-items: center; flex: none;
  width: var(--tap); height: var(--tap); margin-left: -8px;
  border: 0; border-radius: 12px; background: transparent; color: var(--c-mute);
}
@media (hover: hover) { .lesson-close:hover { background: var(--c-surface-2); color: var(--c-ink-2); } }
.lesson-hearts { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--c-red); font: 800 17px/1 var(--font); }
.lesson-hearts.is-hit .ic-heart { animation: heart-punch .3s var(--ease-pop); }
.combo-flag {
  position: absolute; left: 50%; top: calc(100% - 6px); translate: -50% 0;
  color: var(--c-orange-ink);
  font: 900 13px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  animation: pop-in .3s var(--ease-pop) both;
}
@media (min-width: 700px) { .lesson-top { padding: 36px 40px 16px; gap: 20px; } }
.lesson-body {
  flex: 1; width: 100%; max-width: var(--center-max); margin: 0 auto;
  padding: 16px 16px calc(210px + env(safe-area-inset-bottom));
}
@media (min-width: 700px) { .lesson-body { padding-top: 24px; padding-bottom: 200px; } }

.ex { animation: ex-in .3s var(--ease-out) both; }
.ex-title { margin: 0 0 20px; color: var(--c-ink); font: 800 24px/1.3 var(--font); }
@media (min-width: 700px) { .ex-title { font-size: 26px; } }
.ex-new {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 10px; padding: 5px 10px;
  border-radius: 999px;
  background: var(--c-violet-light); color: var(--c-violet-ink);
  font: 900 13px/1 var(--font); letter-spacing: .08em; text-transform: uppercase;
}
.prompt { display: flex; align-items: flex-end; gap: 12px; margin: 0 0 20px; }
.prompt > .capi { flex: none; }
.bubble {
  position: relative; flex: 0 1 auto; min-width: 0;
  padding: 12px 16px;
  background: var(--c-surface); color: var(--c-ink);
  border: 2px solid var(--c-line); border-radius: 16px;
  font: 600 19px/1.45 var(--font);
}
.bubble::before {               /* tail pointing at Capi */
  content: ""; position: absolute; left: -9px; bottom: 16px;
  width: 16px; height: 16px; transform: rotate(45deg);
  background: var(--c-surface);
  border-left: 2px solid var(--c-line); border-bottom: 2px solid var(--c-line);
}
.speak-btn {
  --_lip: var(--c-blue-dark);
  display: inline-grid; place-items: center; flex: none;
  width: 88px; height: 88px; margin-bottom: 5px;
  border: 0; border-radius: 50%;
  background: var(--c-blue); color: var(--c-on-blue);
  box-shadow: 0 5px 0 var(--_lip);
  transition: transform 80ms linear, box-shadow 80ms linear, filter .15s;
}
@media (hover: hover) { .speak-btn:hover { filter: brightness(1.06); } }
.speak-btn:active { transform: translateY(5px); box-shadow: 0 0 0 var(--_lip); }
.speak-btn .ic { width: 40px; height: 40px; }
.speak-btn.slow { width: 60px; height: 60px; margin-bottom: 4px; box-shadow: 0 4px 0 var(--_lip); }
.speak-btn.slow:active { transform: translateY(4px); box-shadow: 0 0 0 var(--_lip); }
.speak-btn.slow .ic { width: 28px; height: 28px; }
.speak-btn.is-playing { animation: speak-pulse 1s ease-in-out infinite; }
.hint-word { position: relative; padding-bottom: 1px; border-bottom: 2px dotted var(--c-line-strong); cursor: pointer; }
@media (hover: hover) { .hint-word:hover { border-bottom-color: var(--c-blue-line); } }
.hint-pop {
  position: absolute; left: 50%; top: calc(100% + 10px); translate: -50% 0; z-index: 25;
  min-width: 120px; max-width: 260px; padding: 8px 12px;
  background: var(--c-surface); color: var(--c-ink);
  border: 2px solid var(--c-line); border-radius: 14px;
  box-shadow: var(--c-shadow);
  font: 700 16px/1.35 var(--font); text-align: center; white-space: normal;
  transform-origin: top center;
  animation: card-pop .2s var(--ease-pop) both;
}
.hint-pop::before {
  content: ""; position: absolute; left: 50%; top: -8px;
  width: 14px; height: 14px; translate: -50% 0; rotate: 45deg;
  background: var(--c-surface); border-left: 2px solid var(--c-line); border-top: 2px solid var(--c-line);
}

/* card-like buttons: choices, match tiles, options, course cards */
.choice, .match-tile, .opt, .course-card {
  --_line: var(--c-line); --_bg: var(--c-surface); --_fg: var(--c-ink);
  position: relative;
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: 58px; padding: 12px 16px; margin: 0 0 2px;
  background: var(--_bg); color: var(--_fg);
  border: 2px solid var(--_line); border-radius: 14px;
  box-shadow: 0 2px 0 var(--_line);
  font: 700 18px/1.3 var(--font); text-align: start;
  user-select: none; -webkit-user-select: none;
  transition: background-color .15s, border-color .15s, color .15s, transform 80ms linear, box-shadow 80ms linear;
}
@media (hover: hover) {
  .choice:hover:not(:disabled):not(.selected):not(.correct):not(.wrong),
  .match-tile:hover:not(:disabled):not(.sel):not(.done),
  .opt:hover:not(.selected), .course-card:hover:not(.active) { --_bg: var(--c-surface-2); }
}
.choice:active:not(:disabled), .match-tile:active:not(:disabled):not(.done), .opt:active, .course-card:active {
  transform: translateY(2px); box-shadow: 0 0 0 var(--_line);
}
.choice.selected, .match-tile.sel, .opt.selected, .course-card.active { --_line: var(--c-sel-line); --_bg: var(--c-sel-bg); --_fg: var(--c-sel-ink); }
.choice.correct { --_line: var(--c-green-line); --_bg: var(--c-green-light); --_fg: var(--c-green-ink); }
.choice.wrong { --_line: var(--c-red-line); --_bg: var(--c-red-light); --_fg: var(--c-red-ink); animation: shake .3s linear; }
.choice:disabled:not(.selected):not(.correct):not(.wrong) { --_fg: var(--c-mute); }
.choices { display: grid; gap: 12px; margin-top: 8px; }
.choice-num {
  display: grid; place-items: center; flex: none;
  width: 30px; height: 30px;
  border: 2px solid var(--_line); border-radius: 8px;
  color: var(--c-mute); font: 800 14px/1 var(--font);
}
.choice.selected .choice-num { color: var(--c-sel-ink); }
.choice.correct .choice-num { color: var(--c-green-ink); }
.choice.wrong .choice-num { color: var(--c-red-ink); }
.choices-img { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 8px; }
.choice-img { flex-direction: column; justify-content: center; gap: 8px; min-height: 150px; padding: 16px 12px; border-radius: 16px; font-size: 17px; text-align: center; }
.choice-img .choice-num { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; font-size: 13px; }
.choice-img .pic, .choice-img .emoji, .choice-img > :first-child:not(.choice-num) { font-family: var(--emoji); font-size: 56px; line-height: 1.15; }

.answer-line {
  --pitch: 60px;
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 10px 8px;
  min-height: calc(var(--pitch) * 2); margin-top: 8px; padding-top: 6px;
  background: repeating-linear-gradient(to bottom,
    transparent 0 calc(var(--pitch) - 2px), var(--c-line) calc(var(--pitch) - 2px) var(--pitch));
}
.answer-line .tile { animation: tile-in .2s var(--ease-pop) both; }
.bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 8px; min-height: 60px; margin-top: 28px; }
.tile {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 0 14px; margin: 0 0 2px;
  background: var(--c-surface); color: var(--c-ink);
  border: 2px solid var(--c-line); border-radius: 12px;
  box-shadow: 0 2px 0 var(--c-line);
  font: 700 18px/1 var(--font); white-space: nowrap;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform 80ms linear, box-shadow 80ms linear, background-color .15s;
}
@media (hover: hover) { .tile:hover:not(.placeholder):not(.used):not(:disabled) { background: var(--c-surface-2); } }
.tile:active:not(.placeholder):not(.used):not(:disabled) { transform: translateY(2px); box-shadow: 0 0 0 var(--c-line); }
.tile.placeholder, .tile.used {
  background: var(--c-line); border-color: transparent; color: transparent;
  box-shadow: none; transform: translateY(2px); pointer-events: none;
}
.tile.correct { border-color: var(--c-green-line); box-shadow: 0 2px 0 var(--c-green-line); color: var(--c-green-ink); }
.tile.wrong { border-color: var(--c-red-line); box-shadow: 0 2px 0 var(--c-red-line); color: var(--c-red-ink); }
@media (min-width: 700px) { .tile { padding: 0 16px; } }

.match { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; margin-top: 8px; }
.match-col { display: flex; flex-direction: column; gap: 12px; }
.match-tile { justify-content: center; text-align: center; }
.match-tile.ok { pointer-events: none; animation: pair-ok .25s var(--ease-out) forwards, pair-done .8s .3s var(--ease-in) forwards; }
.match-tile.bad { animation: pair-bad 1.2s ease forwards, shake .3s linear; }
.match-tile.done { --_line: var(--c-line); --_bg: var(--c-surface); --_fg: var(--c-line-strong); box-shadow: none; pointer-events: none; }

.type-box {
  display: block; width: 100%; min-height: 150px; padding: 14px 16px;
  background: var(--c-surface-2); color: var(--c-ink);
  border: 2px solid var(--c-line); border-radius: 16px;
  font: 600 18px/1.45 var(--font);
  resize: none; outline: none;
  user-select: text; -webkit-user-select: text;
}
.type-box:focus { background: var(--c-surface); border-color: var(--c-sel-line); }
.type-box::placeholder { color: var(--c-mute); }
.gap-sentence { color: var(--c-ink); font: 600 20px/2.4 var(--font); }
.gap-slot {
  display: inline-flex; align-items: flex-end; justify-content: center;
  min-width: 72px; min-height: 1.6em; margin: 0 4px; padding: 0 6px;
  border-bottom: 2px solid var(--c-line-strong);
  line-height: 1.4; vertical-align: bottom;
}
.gap-slot.is-active, .gap-slot:focus-visible { border-bottom-color: var(--c-sel-line); }
.gap-slot:has(.tile) { border-bottom-color: transparent; }

.lesson-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-foot);
  background: var(--c-bg);
  transition: background-color .15s;
}
.foot-inner {
  display: flex; flex-direction: column; gap: 14px;
  max-width: var(--lesson-max); margin: 0 auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
}
.foot-inner > .btn { width: 100%; }
.lesson-foot.is-correct { --fb: var(--c-green); --fb-ink: var(--c-green-ink); --fb-on: var(--c-on-green); background: var(--c-green-light); }
.lesson-foot.is-wrong { --fb: var(--c-red); --fb-ink: var(--c-red-ink); --fb-on: var(--c-on-red); background: var(--c-red-light); }
.lesson-foot.is-near { --fb: var(--c-gold-dark); --fb-ink: var(--c-warn-ink); --fb-on: var(--c-on-gold); background: var(--c-warn-light); }
@media (max-width: 699px) {
  .lesson-foot.is-correct, .lesson-foot.is-wrong, .lesson-foot.is-near { animation: sheet-up .22s var(--ease-sheet) both; }
  .lesson-foot::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 100vh; background: inherit; }
}
@media (min-width: 700px) {
  .lesson-foot { border-top: 2px solid var(--c-line); }
  .lesson-foot.is-correct { border-top-color: var(--c-green-line); }
  .lesson-foot.is-wrong { border-top-color: var(--c-red-line); }
  .lesson-foot.is-near { border-top-color: var(--c-warn-line); }
  .foot-inner { flex-direction: row; align-items: center; justify-content: space-between; min-height: 140px; padding: 24px 40px; }
  .foot-inner > .btn { width: auto; min-width: 160px; margin-left: auto; font-size: 17px; }
  .foot-inner > .btn:first-child:not(:only-child) { margin-left: 0; }
}
.feedback { display: flex; align-items: flex-start; gap: 12px; min-width: 0; animation: fb-in .22s var(--ease-out) both; }
.fb-icon {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--fb, var(--c-green)); color: var(--fb-on, #FFFFFF);
  animation: icon-pop .4s ease-in-out both;
}
.fb-icon .ic { width: 22px; height: 22px; }
.fb-title { margin: 2px 0 4px; color: var(--fb-ink, var(--c-green-ink)); font: 800 22px/1.2 var(--font); }
.fb-text { margin: 0; color: var(--fb-ink, var(--c-ink)); font: 600 17px/1.45 var(--font); }
.fb-text strong, .fb-text b { font-weight: 800; }
.fb-note { margin: 6px 0 0; color: var(--fb-ink, var(--c-ink-2)); font: 700 15px/1.4 var(--font); opacity: .85; }
@media (min-width: 700px) {
  .feedback { align-items: center; gap: 18px; }
  .fb-icon { width: 72px; height: 72px; background: var(--c-surface); color: var(--fb, var(--c-green)); }
  .fb-icon .ic { width: 36px; height: 36px; }
  .fb-title { font-size: 24px; }
}

/* ---------- 16. Results (lesson complete) ---------- */
.results {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  width: 100%; max-width: var(--center-max); min-height: 100dvh; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 24px) 16px calc(130px + env(safe-area-inset-bottom));
  text-align: center;
}
.res-title { margin: 0; color: var(--c-green-ink); font: 900 32px/1.1 var(--font); animation: pop-in .45s var(--ease-pop) both; }
@media (min-width: 700px) { .res-title { font-size: 38px; } }
.res-cards { display: flex; justify-content: center; gap: 12px; width: 100%; max-width: 460px; }
.res-card {
  --rc: var(--c-gold); --rc-ink: var(--c-gold-ink); --rc-on: var(--c-on-gold);
  flex: 1; min-width: 0; max-width: 150px; padding: 0 2px 2px;
  border-radius: 16px; background: var(--rc);
  animation: card-up .24s var(--ease-out) both;
}
.res-card:nth-child(2), .res-card:nth-child(2) .res-value { animation-delay: .12s; }
.res-card:nth-child(3), .res-card:nth-child(3) .res-value { animation-delay: .24s; }
.res-xp { --rc: var(--c-gold); --rc-ink: var(--c-gold-ink); --rc-on: var(--c-on-gold); }
.res-acc { --rc: var(--c-green); --rc-ink: var(--c-green-ink); --rc-on: var(--c-on-green); }
.res-time { --rc: var(--c-blue); --rc-ink: var(--c-blue-ink); --rc-on: var(--c-on-blue); }
.res-label { display: block; padding: 6px 4px 5px; color: var(--rc-on); font: 900 12px/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.res-value {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 64px; border-radius: 14px;
  background: var(--c-surface); color: var(--rc-ink);
  font: 900 20px/1 var(--font); font-variant-numeric: tabular-nums;
  animation: value-pop .3s var(--ease-pop) both;
}
.streak-big { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.streak-big .ic-flame { transform-origin: 50% 100%; animation: flame-ignite .7s var(--ease-pop) both, flame-idle 1.6s .7s ease-in-out infinite alternate; }
.streak-count { color: var(--c-orange-ink); font: 900 72px/1 var(--font); font-variant-numeric: tabular-nums; animation: pop-in .5s .2s var(--ease-pop) both; }
.goal-big { display: flex; flex-direction: column; align-items: center; gap: 10px; font: 800 18px/1.3 var(--font); }
.quest-done {
  display: flex; align-items: center; gap: 12px;
  width: 100%; max-width: 440px; padding: 12px 16px;
  background: var(--c-green-light); color: var(--c-green-ink);
  border: 2px solid var(--c-green-line); border-radius: 16px;
  font: 800 16px/1.3 var(--font); text-align: start;
  animation: card-up .3s var(--ease-out) both;
}
.ach-card {
  display: flex; align-items: center; gap: 14px;
  width: 100%; max-width: 440px; padding: 14px 16px;
  background: var(--c-gold-light); color: var(--c-gold-ink);
  border: 2px solid var(--c-gold); border-radius: 16px;
  text-align: start;
  animation: pop-in .4s var(--ease-pop) both;
}
.ach-card h3 { margin: 0 0 2px; color: inherit; }
.ach-card p { margin: 0; }
.res-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-foot);
  display: flex; justify-content: center; gap: 12px;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom));
  background: var(--c-bg); border-top: 2px solid var(--c-line);
}
.res-foot .btn { flex: 1; max-width: 420px; }
@media (min-width: 700px) { .res-foot { padding: 28px 40px; } .res-foot .btn { flex: 0 1 260px; } }

/* ---------- 17. Welcome (onboarding) ---------- */
.welcome {
  display: flex; flex-direction: column; gap: 20px;
  width: 100%; max-width: var(--center-max); min-height: 100dvh; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 24px) 16px calc(130px + env(safe-area-inset-bottom));
}
.wel-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 12px; text-align: center; }
.wel-title { margin: 0; font: 900 30px/1.15 var(--font); }
.wel-sub { margin: 0; color: var(--c-ink-2); font: 700 17px/1.45 var(--font); }
@media (min-width: 700px) { .wel-title { font-size: 36px; } }
.opt-list { display: flex; flex-direction: column; gap: 12px; }
.opt { gap: 14px; min-height: 64px; padding: 12px 16px; }
.opt-icon {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 12px;
  font-family: var(--emoji); font-size: 28px; line-height: 1;
}
.opt-title { display: block; font: 800 17px/1.3 var(--font); }
.opt-sub { display: block; color: var(--c-ink-2); font: 600 15px/1.35 var(--font); }
.opt.selected .opt-sub { color: inherit; opacity: .85; }
.goal-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.goal-opts .opt { flex-direction: column; justify-content: center; min-height: 96px; text-align: center; }
@media (min-width: 560px) { .goal-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 18. Pages: stats, shop, quests, achievements, words, settings, social ---------- */
.stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stat-tile {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 14px;
  background: var(--c-surface); border: 2px solid var(--c-line); border-radius: 16px;
}
.stat-tile > div { display: flex; flex-direction: column; min-width: 0; }
.stat-tile strong, .stat-tile b { color: var(--c-ink); font: 900 20px/1.15 var(--font); font-variant-numeric: tabular-nums; }
.stat-tile > div > span, .stat-tile small { color: var(--c-ink-2); font: 700 14px/1.3 var(--font); }

.chart {
  display: flex; align-items: flex-end; gap: 8px;
  height: 140px; padding: 8px 4px 0;
  border-bottom: 2px solid var(--c-line);
}
.chart-bar {
  position: relative; flex: 1;
  height: var(--h, 4px); min-height: 4px;
  border-radius: 8px 8px 3px 3px;
  background: var(--c-green);
  transition: height .5s var(--ease-out);
}
.chart-bar.is-today { background: var(--c-orange); }
.chart-bar.is-empty { background: var(--c-line); }

.course-card { gap: 14px; min-height: 72px; padding: 14px 16px; }
.course-card .flag { flex: none; }
.course-card h3 { margin: 0; color: inherit; font-size: 17px; }
.course-card p { margin: 0; color: var(--c-ink-2); font-size: 15px; }

.shop-item {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  background: var(--c-surface); border: 2px solid var(--c-line); border-radius: 16px;
}
.shop-item h3 { margin: 0 0 2px; font-size: 17px; }
.shop-item p { margin: 0; color: var(--c-ink-2); font-size: 15px; }
.shop-item > .btn { flex: none; margin-left: auto; }

.quest { display: flex; align-items: center; gap: 14px; padding: 12px 0; }
.quest + .quest { border-top: 2px solid var(--c-line); }
.quest-icon {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--c-gold-light);
  font-family: var(--emoji); font-size: 26px;
}
.quest-main { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; }
.quest-title { font: 800 16px/1.3 var(--font); }
.quest-bar { display: flex; align-items: center; gap: 10px; }
.quest-bar .bar { flex: 1; }
.quest-bar span { flex: none; color: var(--c-ink-2); font: 800 13px/1 var(--font); white-space: nowrap; }
.claim {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  min-height: var(--tap); padding: 0 14px; margin-bottom: 3px;
  border: 0; border-radius: 12px;
  background: var(--c-gold); color: var(--c-on-gold);
  box-shadow: 0 3px 0 var(--c-gold-dark);
  font: 800 13px/1 var(--font); letter-spacing: .05em; text-transform: uppercase;
  animation: jelly 1.2s ease-in-out infinite;
}
.claim:active { transform: translateY(3px); box-shadow: none; }

.ach { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.ach + .ach { border-top: 2px solid var(--c-line); }
.ach h3 { margin: 0 0 2px; font-size: 17px; }
.ach p { margin: 0 0 8px; color: var(--c-ink-2); font-size: 15px; }
.ach-badge {
  display: grid; place-items: center; flex: none;
  width: 64px; height: 64px; margin-bottom: 4px;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--c-gold), var(--c-orange));
  color: #FFFFFF;
  box-shadow: 0 4px 0 var(--c-gold-dark);
  font: 900 22px/1 var(--font);
}
.ach.is-locked .ach-badge, .ach-badge.is-locked { filter: grayscale(1); opacity: .5; }

.word-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 0; }
.word-row + .word-row { border-top: 2px solid var(--c-line); }
.word-row b, .word-row strong { font-weight: 800; }
.str { display: inline-flex; align-items: flex-end; gap: 3px; flex: none; margin-left: auto; }
.str > * { display: block; width: 6px; height: 16px; border-radius: 3px; background: var(--c-line); }
.str > :nth-child(1) { height: 8px; }
.str > :nth-child(2) { height: 11px; }
.str > :nth-child(3) { height: 14px; }
.str > :nth-child(4) { height: 17px; }
.str > .str-on, .str-on { background: var(--c-gold); }

.settings { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; margin: 0 0 14px; }
.field > label, .field > span:first-child { color: var(--c-ink-2); font: 800 15px/1.3 var(--font); }
.input, .select {
  width: 100%; min-height: 52px; padding: 0 14px;
  background: var(--c-surface-2); color: var(--c-ink);
  border: 2px solid var(--c-line); border-radius: 12px;
  font: 700 17px/1.3 var(--font);
  outline: none; -webkit-appearance: none; appearance: none;
  user-select: text; -webkit-user-select: text;
}
.input:focus, .select:focus { background: var(--c-surface); border-color: var(--c-sel-line); }
.input::placeholder { color: var(--c-mute); }
.select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A95A0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
}

.avatar-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 12px; }
.av-opt {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 1; min-height: var(--tap); padding: 6px; margin-bottom: 2px;
  background: var(--c-surface);
  border: 2px solid var(--c-line); border-radius: 18px;
  box-shadow: 0 2px 0 var(--c-line);
  transition: transform 80ms linear, box-shadow 80ms linear;
}
.av-opt:active { transform: translateY(2px); box-shadow: none; }
.av-opt.selected { background: var(--c-sel-bg); border-color: var(--c-sel-line); box-shadow: 0 2px 0 var(--c-sel-line); }
.av-opt.locked { filter: grayscale(.6); opacity: .55; }

.buddy-card {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--c-surface); border: 2px solid var(--c-line); border-radius: 16px;
}
.buddy-card h3 { margin: 0 0 2px; font-size: 17px; }
.buddy-card p { margin: 0; color: var(--c-ink-2); font-size: 15px; }
.buddy-card > :last-child:not(:first-child) { margin-left: auto; }
.lb { display: flex; flex-direction: column; gap: 4px; }
.lb-row { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 12px; border-radius: 14px; }
.lb-rank { flex: none; width: 28px; color: var(--c-ink-2); font: 900 17px/1 var(--font); text-align: center; }
.lb-row:nth-child(1) .lb-rank { color: #D9A21F; }
.lb-row:nth-child(2) .lb-rank { color: #8E9AA6; }
.lb-row:nth-child(3) .lb-rank { color: #C27A43; }
.lb-me { background: var(--c-sel-bg); box-shadow: inset 0 0 0 2px var(--c-sel-line); }
.feed { display: flex; flex-direction: column; }
.feed-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; }
.feed-item + .feed-item { border-top: 2px solid var(--c-line); }
.cheer-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.cheer-btns > button:not(.btn) {
  min-width: var(--tap); min-height: var(--tap); padding: 0 10px; margin-bottom: 2px;
  background: var(--c-surface);
  border: 2px solid var(--c-line); border-radius: 12px;
  box-shadow: 0 2px 0 var(--c-line);
  font-family: var(--font), var(--emoji); font-size: 20px;
}
.cheer-btns > button:not(.btn):active { transform: translateY(2px); box-shadow: none; }
.inbox-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px;
  background: var(--c-surface); border: 2px solid var(--c-line); border-radius: 16px;
}
.inbox-item.is-unread { background: var(--c-sel-bg); border-color: var(--c-sel-line); }
.invite-box {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px 16px;
  background: var(--c-surface-2);
  border: 2px dashed var(--c-line-strong); border-radius: 18px;
  text-align: center;
}
.code {
  display: inline-block; padding: 10px 16px;
  background: var(--c-surface); color: var(--c-ink);
  border: 2px solid var(--c-line); border-radius: 12px;
  font: 900 26px/1 var(--mono); letter-spacing: .18em;
  user-select: all; -webkit-user-select: all;
}

/* ---------- 19. Keyframes ---------- */
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes pop-in { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
@keyframes card-pop { 0% { opacity: 0; transform: scale(.85); } 100% { opacity: 1; transform: scale(1); } }
@keyframes toast-in { 0% { opacity: 0; transform: translateY(-12px) scale(.95); } 100% { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(8px); } 40%, 80% { transform: translateX(-8px); } }
@keyframes icon-pop { 0% { opacity: 0; transform: scale(.7); } 33% { opacity: 1; transform: scale(1.12); } 66% { transform: scale(.94); } 100% { opacity: 1; transform: scale(1); } }
@keyframes fb-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ex-in { 0% { opacity: 0; transform: translateX(120px); } 80% { opacity: 1; transform: translateX(-5px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes tile-in { 0% { transform: scale(.85); } 70% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes pair-ok { to { background-color: var(--c-green-light); border-color: var(--c-green-line); box-shadow: 0 2px 0 var(--c-green-line); color: var(--c-green-ink); } }
@keyframes pair-done {
  0%, 62% { background-color: var(--c-green-light); border-color: var(--c-green-line); color: var(--c-green-ink); }
  100% { background-color: var(--c-surface); border-color: var(--c-line); box-shadow: none; color: var(--c-line-strong); }
}
@keyframes pair-bad {
  0%, 66% { background-color: var(--c-red-light); border-color: var(--c-red-line); box-shadow: 0 2px 0 var(--c-red-line); color: var(--c-red-ink); }
  100% { background-color: var(--c-surface); border-color: var(--c-line); box-shadow: 0 2px 0 var(--c-line); color: var(--c-ink); }
}
@keyframes bubble-bounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }
@keyframes today-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(.8); } }
@keyframes flame-idle { from { transform: scale(1, 1) rotate(-1.5deg); } to { transform: scale(1.03, 1.07) rotate(1.5deg); } }
@keyframes flame-ignite { 0% { transform: scale(.4); filter: saturate(0) brightness(1.4); } 60% { transform: scale(1.18); filter: saturate(1.2); } 100% { transform: scale(1); filter: none; } }
@keyframes card-up { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes value-pop { 0% { transform: scale(0); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes heart-punch { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes jelly { 0%, 70%, 100% { transform: scale(1); } 80% { transform: scale(1.08); } 90% { transform: scale(.97); } }
@keyframes chest-wiggle { 0%, 70%, 100% { transform: rotate(0); } 76% { transform: rotate(-6deg); } 84% { transform: rotate(6deg); } 92% { transform: rotate(-3deg); } }
@keyframes speak-pulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.15); } }
@keyframes capi-bob { 0%, 100% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-2px) scale(1.015, .985); } }
@keyframes capi-jump {
  0% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.06, .94); }
  45% { transform: translateY(-22px) scale(.97, 1.03); } 70% { transform: translateY(0) scale(1.05, .95); } 100% { transform: translateY(0) scale(1, 1); }
}
@keyframes capi-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-7deg); } 40% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 80% { transform: rotate(2deg); } }
@keyframes capi-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
@keyframes capi-blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes capi-orange { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-5deg); } 70% { transform: rotate(5deg); } }
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.6); } }

/* ---------- 20. Reduced motion (OS setting or html.no-motion) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .spinner { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }
}
html.no-motion *, html.no-motion *::before, html.no-motion *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}
html.no-motion .spinner { animation-duration: 1.6s !important; animation-iteration-count: infinite !important; }

/* ---------- 30. Add-on: classes used by the lesson, welcome, auth and buddy screens ---------- */
.small { font-size: 14px; }
.stack { display: grid; gap: 12px; }
.dim { opacity: .55; }

/* word hints are buttons: reset them to look like text with a dotted underline */
.hint-text { display: inline; }
.hint-wrap { position: relative; display: inline-block; }
button.hint-word {
  appearance: none; margin: 0; padding: 0 0 1px; background: none; border: 0;
  border-bottom: 2px dotted var(--c-line-strong); color: inherit; font: inherit; cursor: pointer;
}
button.hint-word.open { border-bottom-color: var(--c-blue-line); color: var(--c-blue-ink); }
.hint-pop { display: grid; gap: 2px; }

/* speaker buttons */
.bubble { display: flex; align-items: center; gap: 10px; }
.speak-btn.small { width: 38px; height: 38px; margin: 0; box-shadow: 0 3px 0 var(--_lip); }
.speak-btn.small:active { transform: translateY(3px); box-shadow: 0 0 0 var(--_lip); }
.speak-btn.small .ic { width: 20px; height: 20px; }
.speak-btn.busy { animation: speak-pulse 1s ease-in-out infinite; }
.listen-btns { display: flex; align-items: flex-end; justify-content: center; gap: 18px; margin: 8px 0 24px; }

/* choices */
.choice-text { flex: 1; min-width: 0; }
.choice-label { font: 800 17px/1.25 var(--font); }
.choice-emoji { font-family: var(--emoji); font-size: 56px; line-height: 1.15; }
.choices-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.choices-row .choice { width: auto; min-width: 96px; justify-content: center; }
.gap-slot.filled { color: var(--c-sel-ink); border-bottom-color: var(--c-sel-line); }
.gap-slot.correct { color: var(--c-green-ink); border-bottom-color: var(--c-green-line); }
.gap-slot.wrong { color: var(--c-red-ink); border-bottom-color: var(--c-red-line); }
.gap-translation { margin: 12px 0 20px; font: 600 17px/1.45 var(--font); }
.answer-line.correct .tile { border-color: var(--c-green-line); box-shadow: 0 2px 0 var(--c-green-line); color: var(--c-green-ink); }
.answer-line.wrong .tile { border-color: var(--c-red-line); box-shadow: 0 2px 0 var(--c-red-line); color: var(--c-red-ink); }

/* typing */
.type-wrap { display: grid; gap: 10px; }
.accent-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.accent-key {
  min-width: 42px; height: 42px; padding: 0 10px;
  background: var(--c-surface); color: var(--c-ink);
  border: 2px solid var(--c-line); border-radius: 10px; box-shadow: 0 2px 0 var(--c-line);
  font: 700 18px/1 var(--font);
}
.accent-key:active { transform: translateY(2px); box-shadow: none; }

/* lesson top bar + feedback */
.lesson-progress { position: relative; flex: 1; min-width: 0; }
.lesson-progress .combo-flag { top: calc(100% + 4px); }
.fb-main { flex: 1; min-width: 0; display: grid; gap: 4px; }
.fb-tip { margin-top: 4px; color: var(--c-ink-2); font: 600 15px/1.4 var(--font); }

/* results */
.results-body {
  flex: 1; width: 100%; max-width: var(--center-max); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px 16px; text-align: center;
}
.quest-row { display: flex; align-items: center; gap: 10px; font: 700 17px/1.3 var(--font); }
.buddy-list { display: grid; gap: 10px; width: 100%; max-width: 480px; text-align: start; }

/* welcome */
.wel-top { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: calc(env(safe-area-inset-top) + 8px) 16px 8px; }
.wel-dots { display: flex; justify-content: center; gap: 6px; flex: 1; }
.wel-dot { width: 28px; height: 8px; border-radius: 99px; background: var(--c-line); }
.wel-dot.on { background: var(--c-green); }
.wel-body { flex: 1; width: 100%; max-width: var(--center-max); margin: 0 auto; padding: 8px 16px 24px; display: flex; flex-direction: column; gap: 16px; }
.wel-foot {
  position: sticky; bottom: 0; display: grid; gap: 12px;
  width: 100%; max-width: var(--center-max); margin: 0 auto;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--c-bg);
}
.wel-q { display: flex; align-items: center; gap: 12px; }
.wel-q h2 { margin: 0; font: 800 24px/1.25 var(--font); text-wrap: balance; }
.opt-main { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: 2px; }
.opt-right { color: var(--c-ink-2); font: 800 16px/1 var(--font); }
.opt-emoji { font-family: var(--emoji); font-size: 34px; }

/* sign-in */
.auth-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.auth-hero h1 { margin: 0; font: 900 26px/1.2 var(--font); }
.auth-form { display: flex; flex-direction: column; gap: 4px; }
.auth-form .link { align-self: flex-start; margin: -6px 0 12px; background: none; border: 0; padding: 0; }
.form-error { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--c-red-light); color: var(--c-red-ink); font: 700 15px/1.4 var(--font); }

/* buddies */
.buddy-intro h1 { margin: 8px 0 4px; font: 900 26px/1.2 var(--font); }
.buddy-duo { display: inline-flex; align-items: flex-end; }
.buddy-duo > :last-child { margin-left: -28px; }
.intro-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.intro-list li { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 2px solid var(--c-line); border-radius: 16px; background: var(--c-surface); }
.intro-emoji { font-family: var(--emoji); font-size: 28px; line-height: 1; }
.bell { position: relative; display: inline-grid; place-items: center; width: var(--tap); height: var(--tap); margin-left: auto; color: var(--c-ink-2); border-radius: 12px; }
.bell .dot { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--c-red); color: var(--c-on-red); font: 800 11px/18px var(--font); text-align: center; }
.buddy-av { flex: none; text-decoration: none; }
.buddy-main { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.buddy-name { color: var(--c-ink); font: 800 17px/1.2 var(--font); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buddy-meta { display: flex; align-items: center; gap: 10px; color: var(--c-ink-2); font: 700 14px/1 var(--font); }
.buddy-meta span { display: inline-flex; align-items: center; gap: 3px; }
.buddy-main .pill { align-self: flex-start; }
.buddy-streak { display: flex; flex-direction: column; align-items: center; flex: none; color: var(--c-orange-ink); font: 900 16px/1 var(--font); }
.buddy-card.compact { padding: 8px 10px; gap: 10px; }
.buddy-card > .btn { flex: none; }
.msg-list { display: grid; gap: 10px; margin-top: 8px; }
.msg-opt {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 14px 16px;
  background: var(--c-surface); color: var(--c-ink); text-align: start;
  border: 2px solid var(--c-line); border-radius: 14px; box-shadow: 0 2px 0 var(--c-line);
  font: 700 17px/1.35 var(--font);
}
@media (hover: hover) { .msg-opt:hover:not(:disabled) { background: var(--c-surface-2); } }
.msg-opt:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }
.join-row { display: flex; gap: 8px; margin-top: 14px; }
.join-row .input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .08em; }
.lb-name { flex: 1; min-width: 0; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.seg-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px;
  background: var(--c-surface); color: var(--c-ink-2);
  border: 2px solid var(--c-line); border-radius: 14px; box-shadow: 0 2px 0 var(--c-line);
  font: 700 13px/1.2 var(--font); text-align: center;
}
.seg-btn b { color: var(--c-ink); font-size: 16px; }
.seg-btn.on { background: var(--c-sel-bg); border-color: var(--c-sel-line); color: var(--c-sel-ink); }
.seg-btn.on b { color: var(--c-sel-ink); }
.push-card { display: grid; gap: 8px; }
.goal-row { display: grid; gap: 6px; padding: 10px 0; border-bottom: 2px solid var(--c-line); }
.goal-row:last-child { border-bottom: 0; }
.goal-row-top { display: flex; justify-content: space-between; gap: 8px; font: 700 16px/1.3 var(--font); }
.goal-row .btn { justify-self: start; }
.inbox-item.unread { background: var(--c-sel-bg); border-color: var(--c-sel-line); }

/* accounts: Google button, "or" divider, live username check, add by username */
.auth.page { width: 100%; max-width: 480px; margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 12px) max(16px, env(safe-area-inset-right)) calc(env(safe-area-inset-bottom) + 32px) max(16px, env(safe-area-inset-left)); }
.btn-google { gap: 10px; text-transform: none; letter-spacing: 0; }
.auth-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--c-mute); font: 800 13px/1 var(--font); text-transform: uppercase; letter-spacing: .08em; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 2px; background: var(--c-line); }
.field-hint { color: var(--c-ink-2); font: 700 13px/1.3 var(--font); }
.field-hint.ok { color: var(--c-green-ink); }
.field-hint.bad { color: var(--c-red-ink); }
.add-user { display: grid; gap: 6px; }
.add-user .join-row { margin-top: 0; }
.requests .buddy-card + .buddy-card { margin-top: 8px; }

/* lesson: the "fix your mistakes" screen and the tag on repeated exercises */
.fix-intro { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 32px; text-align: center; }
.ex-mistake { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 5px 10px; border-radius: 999px;
  background: var(--c-orange-light); color: var(--c-orange-ink); font: 900 13px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }