/* ============================================================
   TIMES TABLE QUEST — cosmic arcade UI
   Theme is driven by CSS custom properties set from JS.
   ============================================================ */

:root {
  /* These get overwritten per-profile theme by app.js */
  --bg-0: var(--brand-navy);
  --bg-1: #141a3a;
  --accent: var(--brand-aqua);
  --accent-2: #72f5f1;
  --accent-ink: var(--brand-ink);
  --glow: rgba(84, 230, 225, 0.55);

  /* Charged care-to-grow state (Starlight gold) */
  --gold: var(--brand-gold);
  --gold-2: #ffb24d;
  --gold-glow: rgba(255, 210, 77, 0.5);
  --flame: #ffb454;
  --flame-2: #ff9d2e;
  /* Spelling quest accent (mirrors the questtile--spell purple) */
  --spell: #b06bff;
  --spell-2: #d99bff;

  --surface: rgba(255, 255, 255, 0.06);
  --surface-2: rgba(255, 255, 255, 0.10);
  --border: rgba(255, 255, 255, 0.12);
  --text: var(--brand-cloud);
  --text-dim: var(--brand-mist);
  --good: var(--brand-success);
  --bad: var(--brand-error);

  --r-lg: 30px;
  --r-md: 20px;
  --r-sm: 14px;
  --r-xs: 6px;   /* micro marks nested inside components: gems, bar units, legend chips */
  --r-pill: 999px;
  /* 4pt spacing grid. The suffix is the number of 4px grid units, so the
     relationship stays visible at every call site (see docs/spacing-system.md). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-11: 44px;
  --space-12: 48px;
  --wash-soft: 8%;
  --wash-med: 14%;
  --wash-strong: 20%;
  --shadow-lift-sm: 0 12px 26px -12px rgba(0, 0, 0, 0.45);
  --shadow-lift-lg: 0 24px 60px -18px rgba(0, 0, 0, 0.7);
  --shadow-inset-ring: inset 0 0 0 1px var(--border);
  --shadow: var(--shadow-lift-lg);

  --fs-1: 0.66rem;
  --fs-2: 0.8rem;
  --fs-3: 0.9rem;
  --fs-4: 1rem;
  --fs-5: 1.2rem;
  --fs-6: 1.5rem;
  --fs-7: 2rem;
  --fs-8: clamp(2.4rem, 12vw, 4rem);

  --font-display: "Fredoka", "Baloo 2", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-body: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;

  /* One Warm Fill SVG per destination; its placement owns the rendered size. */
  --icon-nav: clamp(26px, min(7vw, 5.5vh), 34px);
  --icon-header: clamp(28px, 8vw, 36px);
  --icon-title: clamp(30px, 9vw, 40px);

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
}

body {
  height: auto; min-height: 100dvh; position: relative;
  overflow-x: hidden;
  transition: background 0.6s ease;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
/* Stop iOS double-tap-to-zoom on rapid repeat taps (e.g. typing 44, 77 on the
   keypad). iOS ignores user-scalable=no, so this is the reliable fix. Keeps
   pinch-zoom and scrolling intact. */
button, [data-action] { touch-action: manipulation; }
/* iOS does not consistently paint :active during a tap, especially in an
   installed PWA. JS holds this class briefly through pointer-up so every
   button gives immediate, visible acknowledgement before its action runs. */
button.is-pressed:not(:disabled) {
  transform: translateY(2px) scale(0.97) !important;
  filter: brightness(0.84) saturate(1.05) !important;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.22) !important;
  transition-duration: 0.06s !important;
}
input { font-family: inherit; }
::selection { background: var(--accent); color: var(--accent-ink); }

/* ---------------- Background atmosphere ---------------- */
.space {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  min-height: 100%; pointer-events: none;
  /* Even, full-coverage dark field: a soft glow at the top easing all the way to
     flat bg-0. Ends on the explicit bg-0 colour (NOT `transparent`, which some
     engines interpolate toward transparent-black and leave a faint seam).
     Keep the solid colour and gradient on one document-sized canvas so iOS
     cannot splice differently coloured fixed-viewport compositor tiles midway
     through a long page. */
  background: radial-gradient(135% 105% at 50% -25%, var(--bg-1) 0%, var(--bg-0) 72%);
  background-color: var(--bg-0);
  transition: background 0.6s ease;
}
#confetti {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
}

/* In standalone iOS mode the translucent status/home-indicator areas sit over
   the page. Opaque theme-coloured guards keep scrolled cards and headings from
   becoming visible behind those system controls. They collapse to zero on
   devices without a safe area. */
@media screen {
  body::before, body::after {
    content: ""; position: fixed; left: 0; right: 0; z-index: 39;
    pointer-events: none; background: var(--bg-0);
  }
  body::before { top: 0; height: var(--safe-t); }
  body::after { bottom: 0; height: var(--safe-b); }
}

/* ---------------- App shell / screens ---------------- */
#app {
  position: relative; z-index: 1;
  min-height: 100dvh;
  padding: calc(var(--space-4) + var(--safe-t)) var(--space-4) calc(var(--space-5) + var(--safe-b));
  max-width: 880px; margin: 0 auto;
  display: flex; flex-direction: column;
}
.screen { animation: screen-in 0.5s cubic-bezier(0.2, 0.9, 0.25, 1) both; flex: 1; display: flex; flex-direction: column; }
/* Headerless full-page screens (Me sub-pages, the Pet page) — consistent top
   spacing so their content doesn't sit flush against the safe-area inset. */
.me-sub, .pet-screen { padding-top: 2px; }
.me-sub { padding-bottom: var(--space-7); }
/* Shared Me sub-page scaffold: h2 hugs its intro line; the intro is the one
   sentence-case helper under every sub-page title. */
.me-sub h2 { margin-bottom: 2px; }
.me-sub-intro { color: var(--text-dim); font-weight: 600; font-size: var(--fs-2); line-height: 1.45; margin: 0 0 var(--space-4); }
.me-sub-head-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
/* My Look and Themes use a three-column catalogue below. Keep helper copy within
   the first two columns so the coin balance owns a quiet right-hand column. */
.me-sub-intro--coin-layout { max-width: calc((200% - var(--space-2)) / 3); }
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-2);
  font-weight: 800;
}
.chip--accent { background: var(--accent); border-color: transparent; color: var(--accent-ink); }
.chip--gold { background: color-mix(in srgb, var(--gold) var(--wash-med), var(--surface)); color: var(--gold); }
.chip--gold .uicon { width: 0.95em; }
@keyframes screen-in { from { opacity: 0; transform: translateY(14px) scale(0.99); } to { opacity: 1; transform: none; } }

.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.spacer { flex: 1; }
.center { text-align: center; }

/* ---------------- Typography ---------------- */
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.05; letter-spacing: -0.01em; }
/* The illustrated wordmark is a canonical asset, never rebuilt from HTML text. */
.brand-wordmark { position: relative; display: inline-block; width: min(100%, 280px); }
.brand-wordmark img { position: relative; display: block; width: 100%; height: auto; }
.brand-wordmark--login { width: clamp(240px, 62vw, 560px); max-width: 76vw; }
.brand-wordmark--login::before {
  content: ""; position: absolute; z-index: 0; left: 2%; top: 8%; width: 34%; aspect-ratio: 1;
  border-radius: 50%; background: radial-gradient(circle, rgba(84,230,225,.35), transparent 70%);
  animation: brand-breathe 4.5s ease-in-out infinite; pointer-events: none;
}
.brand-wordmark--compact { width: 120px; }
@keyframes brand-breathe { 50% { transform: scale(1.18); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .brand-wordmark--login::before { animation: none; } }
.tagline { color: var(--text-dim); font-weight: 600; font-size: var(--fs-4); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: var(--fs-2); font-weight: 800; color: var(--accent); }

/* ---------------- Buttons ---------------- */
.btn {
  --b: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-4);
  white-space: nowrap; min-width: 0;
  padding: var(--space-4) var(--space-6); border-radius: var(--r-md);
  background: var(--b); color: var(--text);
  border: 1px solid var(--border);
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:active { transform: translateY(2px) scale(0.985); }
.btn:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.btn--primary {
  background: linear-gradient(180deg, var(--accent-2), var(--accent));
  color: var(--accent-ink); border: none; font-weight: 700;
  box-shadow: 0 14px 30px -10px var(--glow), inset 0 1px 0 rgba(255,255,255,0.4);
}
.btn--primary:hover { filter: brightness(1.05); }
.btn--ghost { background: var(--surface); }
.btn--lg { font-size: var(--fs-5); padding: var(--space-5) var(--space-4); }
.btn .uicon { width: 1.05em; height: 1.05em; flex: none; }
.btn--block { width: 100%; }
.btn--icon { padding: var(--space-3); width: 48px; height: 48px; border-radius: var(--r-sm); font-size: var(--fs-5); }
.btn[disabled] { opacity: 1; pointer-events: none; color: var(--text-dim); filter: saturate(0.45); }
.btn.is-loading[disabled] {
  opacity: 1;
  color: var(--text);
  filter: none;
}
.btn--primary.is-loading[disabled] { color: var(--accent-ink); }
.btn.is-loading::before {
  content: ""; width: 0.9em; height: 0.9em; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::before { animation-duration: 1.4s; } }

/* ---------------- Cards ---------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--space-5);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: var(--shadow);
}
.card--tight { padding: var(--space-4) var(--space-5); border-radius: var(--r-md); }

/* ---------------- Profile select ---------------- */
.hero { text-align: center; padding: 24px 0 8px; }
.hero .rocket { font-size: var(--fs-8); display: inline-block; filter: drop-shadow(0 8px 16px var(--glow)); }
.brand-mascot { width: 48px; height: 48px; max-width: 48px; max-height: 48px; object-fit: contain; display: block; align-self: center; margin-inline: auto; filter: drop-shadow(0 6px 12px var(--glow)); }
.brand-mascot--onboard { width: 76px; height: 76px; max-width: 76px; max-height: 76px; }
@keyframes bob { 50% { transform: translateY(-10px) rotate(-4deg); } }

.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin-top: 8px; }
.profile-card {
  position: relative; text-align: center; padding: 24px 16px;
  border-radius: var(--r-lg); cursor: pointer;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border);
  transition: transform 0.18s cubic-bezier(0.2,0.9,0.3,1.3), box-shadow 0.2s;
  overflow: hidden;
}
.profile-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 0 0 2px var(--ring, transparent); pointer-events: none;
}
.profile-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -20px var(--p-glow, var(--glow)); }
.profile-card .avatar { font-size: var(--fs-8); display: block; margin: 0 auto; filter: drop-shadow(0 6px 12px var(--p-glow, var(--glow))); }
.profile-card img.avatar { width: 82px; height: 82px; object-fit: contain; }
.profile-card .pname { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-5); margin-top: 8px; }
.profile-card .pmeta { color: var(--text-dim); font-size: var(--fs-2); font-weight: 700; margin-top: 2px; }
.profile-card .chip--accent {
  display: inline-block; margin-top: 8px; padding: 4px 12px; border-radius: var(--r-pill);
  font-size: var(--fs-2); font-weight: 800; background: var(--p-accent, var(--accent)); color: var(--accent-ink);
}
.profile-card .edit {
  position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: var(--r-sm);
  background: rgba(0,0,0,0.32); border: 1px solid var(--border);
  display: grid; place-items: center; font-size: var(--fs-5);
  transition: background 0.15s, border-color 0.15s;
  z-index: 3; /* lift above the avatar's drop-shadow stacking context so taps hit the pencil, not the card */
}
.profile-card .edit:hover { background: rgba(0,0,0,0.5); border-color: var(--accent); }
.buildtag { text-align: center; margin-top: 16px; font-size: var(--fs-1); font-weight: 700;
  letter-spacing: 0.06em; color: var(--text-dim); }

/* ---------------- ONZU launcher ---------------- */
.quests { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 8px; }
.quests--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.questtile {
  position: relative; text-align: center; padding: 24px 16px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 8px;
  min-height: 188px; justify-content: center;
  transition: transform 0.16s cubic-bezier(0.2,0.9,0.3,1.3), box-shadow 0.2s, border-color 0.2s;
}
.questtile:hover, .questtile:active { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 24px 46px -22px var(--glow); }
.questtile .qic { font-size: var(--fs-8); filter: drop-shadow(0 6px 12px var(--glow)); }
.questtile .qic-img, .questtile .qic-svg { width: 78px; height: 78px; object-fit: contain; display: block; margin-bottom: 2px; }
.questtile .qic-svg { vertical-align: 0; }
.questtile .qname { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-5); }
.questtile .qsub { color: var(--text-dim); font-size: var(--fs-2); font-weight: 600; }
.questtile .chip--accent { margin-top: 8px; font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2);
  padding: 4px 16px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); }
.questtile--spell { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) var(--wash-med), var(--surface-2)), var(--surface)); }
.questtile--spell:hover { border-color: var(--accent-2); }
.questtile--spell .chip--accent { background: var(--accent-2); color: var(--accent-ink); }
@media (max-width: 700px) {
  .quests, .quests--three { grid-template-columns: 1fr; gap: 12px; }
}

/* ---------------- Today card: the daily ritual ---------------- */
.td-card { padding: 16px 16px 12px; display: flex; flex-direction: column; gap: 12px; }
.td-card.done { background: linear-gradient(180deg, color-mix(in srgb, var(--gold) var(--wash-soft), var(--surface)), var(--surface));
  border-color: color-mix(in srgb, var(--gold) 40%, var(--border)); }
.td-head { display: flex; align-items: center; justify-content: space-between; }
.td-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4); }
.td-card.done .td-title { color: var(--gold); }
.td-streak { display: inline-flex; align-items: baseline; gap: 8px; padding: 4px 12px; border-radius: var(--r-pill);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3); color: var(--flame);
  background: color-mix(in srgb, var(--flame-2) var(--wash-med), var(--surface)); border: 1px solid color-mix(in srgb, var(--flame-2) 38%, var(--border)); }
.td-best { font-size: var(--fs-1); font-weight: 800; color: var(--text-dim); }
/* Flex, not a fixed 3-col grid: two slots (no pet yet) fill the row; three balance evenly. */
.td-slots { display: flex; gap: 8px; }
.td-slots .td-slot { flex: 1 1 0; min-width: 0; }
.td-slot { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 8px 8px; border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.td-slot.done { background: color-mix(in srgb, var(--good) var(--wash-soft), var(--surface));
  border-color: color-mix(in srgb, var(--good) 45%, var(--border)); }
/* Tick = an empty inset socket that fills with a lit, glossy gem when done —
   the same glow/gradient material the rest of the app celebrates with. */
.td-tick { position: absolute; top: 6px; right: 8px; width: 1.35em; height: 1.35em; border-radius: 50%;
  display: grid; place-items: center; font-size: var(--fs-2); font-weight: 900; color: transparent;
  background: radial-gradient(circle at 50% 35%, rgba(0,0,0,.28), rgba(0,0,0,.14)), var(--surface-2);
  box-shadow: inset 0 2px 4px rgba(0,0,0,.4), inset 0 0 0 1px var(--border); }
.td-slot.done .td-tick {
  color: #063018;
  background: linear-gradient(180deg, #8df5b5, var(--good) 55%, #2aa85f);
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--good) 85%, transparent),
              0 1px 3px rgba(0,0,0,.35),
              inset 0 1px 0 rgba(255,255,255,.5);
  animation: pop 0.4s backwards; }
.td-ico-wrap { font-size: var(--fs-5); line-height: 1; }
.td-ico { width: 26px; height: 26px; }
.td-pet-img { width: 30px; height: 30px; object-fit: contain; display: block; }
.td-label { min-height: 2.3em; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: var(--fs-2); line-height: 1.15; color: var(--text-dim);
  max-width: 100%; overflow-wrap: anywhere; text-align: center; }
.td-slot.done .td-label { color: var(--text); }
.td-chain { display: flex; gap: 8px; justify-content: center; }
.td-day { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-2);
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }
.td-day.on { background: color-mix(in srgb, var(--flame-2) var(--wash-strong), var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--flame-2) 50%, var(--border)); }
.td-day.today { box-shadow: inset 0 0 0 2px var(--accent); }
.td-day.on.today { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--flame-2) 80%, #fff); }
@keyframes flamepulse { 50% { transform: scale(1.14) rotate(-4deg); } }

/* Tomorrow hook on results — quiet, moonlit, one line */
.tmrw-hook { margin-top: 4px; }
.chip--tmrw { background: color-mix(in srgb, #8b7cff var(--wash-soft), var(--surface));
  border: 1px solid color-mix(in srgb, #8b7cff 35%, var(--border)); font-size: var(--fs-2); color: var(--text); }
.chip .tmrw-coin { width: 1.05em; height: 1.05em; }
.tmrw-shop-link { max-width: 100%; flex-wrap: wrap; justify-content: center; cursor: pointer; }
.tmrw-shop-action { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--accent-2);
  font-family: var(--font-display); font-weight: 800; white-space: nowrap; }

/* ---------------- Weekly leaderboard ---------------- */
.wk-board { display: flex; flex-direction: column; gap: 8px; }
.wk-title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4); margin-bottom: 2px; }
.wk-title .muted { font-weight: 600; font-size: var(--fs-2); }
.wk-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: var(--r-sm); background: var(--surface); }
.wk-row.me { background: color-mix(in srgb, var(--accent) var(--wash-med), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.wk-rank { font-size: var(--fs-5); min-width: 26px; text-align: center; }
.wk-av { font-size: var(--fs-6); }
img.wk-av { width: 34px; height: 34px; object-fit: contain; }
.wk-name { flex: 1; font-weight: 700; }
.wk-you { font-size: var(--fs-1); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--accent); color: var(--accent-ink); padding: 1px 8px; border-radius: var(--r-pill); margin-left: 8px; }
.wk-xp { font-family: var(--font-display); font-weight: 700; color: var(--accent); }

/* ---------------- Daily challenges ---------------- */
.ch-card { display: flex; flex-direction: column; gap: 12px; }
.ch-title { display: flex; align-items: center; gap: 12px; margin-bottom: 2px;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4); }
.ch-title .muted { font-weight: 600; font-size: var(--fs-2); }
.ch-row { display: flex; align-items: center; gap: 12px; }
.ch-row.done .ch-label { color: var(--text-dim); text-decoration: line-through; }
.ch-ic { font-size: var(--fs-5); }
.ch-mid { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ch-label { font-weight: 700; font-size: var(--fs-3); }
.ch-bar { height: 7px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.ch-bar span { display: block; height: 100%; border-radius: var(--r-pill); background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.4s; }
.ch-row.done .ch-bar span { background: var(--good, #36e0a0); }
.ch-rew { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-2); color: var(--gold); white-space: nowrap; margin-left: 2px; }

/* ---------------- Treasure chest ---------------- */
.chest-wrap { display: flex; justify-content: center; margin: 8px 0; }
.chest {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 28px; border-radius: var(--r-lg); cursor: pointer;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) var(--wash-strong), var(--surface-2)), var(--surface));
  border: 1.5px solid color-mix(in srgb, var(--gold) 45%, var(--border));
  transition: transform 0.14s;
}
.chest:hover, .chest:active { transform: translateY(-3px) scale(1.03); }
.chest-ic { font-size: var(--fs-8); }
.chest-label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-3); color: var(--gold); }
.chest-open { text-align: center; font-size: var(--fs-5); font-family: var(--font-display); font-weight: 700;
  display: flex; flex-direction: column; gap: 2px; padding: 16px; }
.chest-open .muted { font-size: var(--fs-2); }

/* ---------------- Collectible pet ---------------- */
.pet-card { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 12px; text-align: left; cursor: pointer; width: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) var(--wash-soft), var(--surface-2)), var(--surface));
  transition: transform 0.14s, border-color 0.2s; }
.pet-card:hover, .pet-card:active { transform: translateY(-3px); border-color: var(--accent); }
.pet-mid { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.pet-name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-4); }
.pet-stage { font-size: var(--fs-1); font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em;
  background: var(--accent); color: var(--accent-ink); padding: 2px 8px; border-radius: var(--r-pill); margin-left: 4px; }
.pet-pick-btn { font-size: var(--fs-6); }
.pet-mini-img { width: 1.75em; height: 1.75em; object-fit: contain; display: block; }
.pet-pick-btn .pet-mini-img { margin: -0.15em auto; }

/* The living pet avatar: a glyph that scales continuously with XP, idle-bobs,
   gains stage effects (sparkle → aura → crown), and animates on grow/evolve. */
.pet-av { position: relative; display: inline-grid; place-items: center; line-height: 1; flex-shrink: 0;
  min-width: 1.6em; min-height: 1.4em; }
.pet-av .pet-glyph { display: inline-grid; place-items: center; transform: scale(var(--ps, 1)); transform-origin: center bottom;
  transition: transform 0.6s cubic-bezier(0.2,0.9,0.3,1.3); filter: drop-shadow(0 4px 10px var(--glow));
  animation: petbreathe 3s ease-in-out infinite; }
.pet-img { width: 1em; height: 1em; object-fit: contain; display: block; }
.pet-emoji-fallback--hidden { display: none; }
@keyframes petbreathe { 0%,100% { translate: 0 0; } 50% { translate: 0 -6%; } }
/* stage glow-ups */
.pet-av.pet-s2 .pet-glyph { filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--accent) 60%, transparent)); }
.pet-av.pet-s3 .pet-glyph { filter: drop-shadow(0 0 16px color-mix(in srgb, var(--accent) 75%, transparent)) drop-shadow(0 6px 14px var(--glow)); }
.pet-av.pet-s4 .pet-glyph { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--gold) 80%, transparent)) drop-shadow(0 0 10px var(--accent)); }
.pet-crown { position: absolute; top: -0.55em; left: 50%; transform: translateX(-50%) rotate(-6deg); font-size: 0.5em; z-index: 2; }
.pet-egg-av .pet-glyph { animation: none; filter: none; }
.pet-card.pet-egg .pet-av {
  width: 4.35rem; height: 4.35rem; justify-self: center; border-radius: var(--r-pill);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) var(--wash-med), transparent), transparent 68%);
}
.pet-card.pet-egg .pet-glyph {
  font-size: var(--fs-7);
  filter: drop-shadow(0 0 14px color-mix(in srgb, var(--accent) 38%, transparent)) drop-shadow(0 8px 16px rgba(0,0,0,.25));
}
/* tap-to-poke jump */
/* Higher specificity than .pet-evolve/.pet-pop .pet-glyph so a tap-jump always
   wins, even right after an evolution (those anim classes linger on .pet-av). */
.pet-av .pet-glyph.pet-jump { animation: petjump 0.55s cubic-bezier(0.3,1.4,0.5,1); }
@keyframes petjump { 0% { transform: scale(var(--ps)) translateY(0) rotate(0); } 35% { transform: scale(calc(var(--ps)*1.15)) translateY(-22%) rotate(-8deg); } 70% { transform: scale(var(--ps)) translateY(0) rotate(6deg); } 100% { transform: scale(var(--ps)) rotate(0); } }
/* heart that pops when you tap (say hi to) the pet */
.pet-poke-heart { position: absolute; left: 50%; top: -2px; transform: translateX(-50%); font-size: var(--fs-5); pointer-events: none; z-index: 3; animation: pokeheart 0.75s ease-out forwards; }
@keyframes pokeheart { 0% { opacity: 0; transform: translate(-50%, 0) scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -150%) scale(1.15); } }
/* grow pop (XP gained, no evolution) */
.pet-pop .pet-glyph { animation: petpop 0.8s cubic-bezier(0.2,1.5,0.4,1); }
@keyframes petpop { 0% { transform: scale(calc(var(--ps)*0.82)); } 45% { transform: scale(calc(var(--ps)*1.22)); } 100% { transform: scale(var(--ps)); } }
/* evolution — bursts into the new form */
.pet-evolve { animation: evoflash 0.9s ease-out; }
.pet-evolve .pet-glyph { animation: petevolve 0.95s cubic-bezier(0.2,1.4,0.35,1); }
@keyframes petevolve { 0% { transform: scale(0) rotate(-180deg); opacity: 0; } 55% { transform: scale(calc(var(--ps)*1.35)) rotate(10deg); opacity: 1; } 100% { transform: scale(var(--ps)) rotate(0); } }
@keyframes evoflash { 0% { filter: brightness(3) blur(2px); } 30% { filter: brightness(2); } 100% { filter: none; } }

/* detail modal */
.pet-detail .pet-stage-wrap { font-size: var(--fs-4); min-height: 5.2rem; display: grid; place-items: center; }
.pet-grow { display: flex; align-items: center; gap: 16px; justify-content: center; width: 100%; padding: 12px 16px; border-radius: var(--r-md);
  cursor: pointer; color: inherit; text-align: left;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) var(--wash-med), var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.pet-grow-txt { display: flex; flex-direction: column; font-family: var(--font-display); font-size: var(--fs-3); }
.pet-grow-txt .muted { font-family: var(--font-body); font-size: var(--fs-2); }

/* ============ Starlight pacing card states ============ */
/* Badges shared by charged/gated cards */
.pet-name .badge { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-1); text-transform: uppercase;
  letter-spacing: 0.05em; padding: 2px 8px; border-radius: var(--r-pill); margin-left: 4px;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-dim); }
.pet-name .badge--gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  background: color-mix(in srgb, var(--gold) var(--wash-med), transparent); }
.pet-card.pet--trophy, .pet-hero.pet--trophy { position: relative; border-color: var(--gold-2);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 22%, transparent), var(--shadow-lift-sm); }
.pet-card.pet--trophy::after { content: "🏆"; position: absolute; z-index: 3; top: 8px; right: 9px;
  padding: 3px 8px; border-radius: var(--r-pill); background: linear-gradient(135deg,var(--gold-2),var(--gold));
  color: #251209; font-family: var(--font-display); font-size: var(--fs-1); font-weight: 900; pointer-events: none; }
.pet-screen.pet--trophy .pet-stage-wrap { border-radius: 50%; outline: 3px solid var(--gold-2);
  box-shadow: 0 0 24px var(--gold-glow); width: 8rem; height: 8rem; margin: 0 auto; }

/* ---- CHARGED: bursting with starlight, ready for morning care ---- */
.pet-card.is-charged { position: relative; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) var(--wash-med), var(--surface-2)), var(--surface));
  border-color: color-mix(in srgb, var(--gold) 38%, var(--border)); }
.pet-card.is-charged .pet-av .pet-glyph { filter: drop-shadow(0 0 18px var(--gold-glow)) drop-shadow(0 6px 14px var(--gold-glow)); }
.pet-card.is-charged .pet-moon { position: absolute; top: 12px; right: 14px; font-size: var(--fs-5); }
.pet-card .ch-bar--gold > span { background: linear-gradient(90deg, var(--gold-2), var(--gold));
  box-shadow: 0 0 14px var(--gold-glow); }
.pet-starlight { margin: 4px 0 2px; }
.pet-starlight-big { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: var(--fs-2); }

/* ---- GATED: one plain-language route to the missing quest ---- */
.pet-card .pet-av { justify-self: center; }
.pet-card.is-gated { display: flex; flex-direction: column; align-items: stretch; gap: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--spell) var(--wash-soft), var(--surface-2)), var(--surface)); }
.pet-card.is-gated:hover, .pet-card.is-gated:active { transform: none; border-color: color-mix(in srgb, var(--spell) 40%, var(--border)); }
.pet-card.is-gated .pet-top { display: flex; align-items: center; gap: 16px; text-align: left;
  background: none; border: none; padding: 0; cursor: pointer; width: 100%; color: inherit; }
.pet-gate-copy { color: var(--text); font-size: var(--fs-3); font-weight: 800; }
.pet-card .cta { width: 100%; border: none; cursor: pointer; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-3); padding: 12px; border-radius: var(--r-sm); color: #1c0936;
  background: linear-gradient(180deg, var(--spell-2), var(--spell));
  box-shadow: 0 12px 26px -10px color-mix(in srgb, var(--spell) 60%, transparent); transition: transform 0.14s; }
.pet-card .cta:hover, .pet-card .cta:active { transform: translateY(-2px); }

/* ---- detail-modal state banner (mirrors the card) ---- */
.pet-state-banner { margin: 12px 0 4px; padding: 12px 16px; border-radius: var(--r-md); text-align: left;
  font-size: var(--fs-2); line-height: 1.45; }
.pet-state-banner.is-charged { color: var(--gold);
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold) var(--wash-med), transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent); }
.pet-state-banner.is-gated { display: flex; flex-direction: column; gap: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--spell) var(--wash-soft), var(--surface-2)), var(--surface));
  border: 1px solid color-mix(in srgb, var(--spell) 30%, var(--border)); }
.pet-state-banner .pet-state-txt { font-family: var(--font-display); }

/* growth journey strip */
.pet-journey { display: flex; align-items: flex-end; justify-content: center; gap: 4px; margin: 8px 0 2px; flex-wrap: wrap; }
.pet-jstage { display: flex; flex-direction: column; align-items: center; gap: 2px; opacity: 0.45; filter: grayscale(1); }
.pet-jstage.reached { opacity: 1; filter: none; }
.pet-jstage.cur { transform: scale(1.18); }
.pet-jglyph { font-size: var(--fs-6); line-height: 1; display: grid; place-items: center; min-width: 1.65em; min-height: 1.65em; }
.pet-jmystery { display: grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%;
  border: 2px dashed var(--text-dim); color: var(--text-dim); font-weight: 800; font-size: 1.05em; }
.pet-jlabel { font-size: var(--fs-1); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-dim); }
.pet-jstage.cur .pet-jlabel { color: var(--accent); }
.pet-jarrow { color: var(--text-dim); align-self: center; font-size: var(--fs-2); margin-bottom: 12px; }
.pet-picker .pet-pick-btn.sel { box-shadow: 0 0 0 2px var(--accent); }

/* pet collection / stable */
.pet-count { font-size: var(--fs-1); font-weight: 800; color: var(--text-dim); background: var(--surface-2);
  padding: 1px 8px; border-radius: var(--r-pill); }
.pet-coll { margin: 16px 0 4px; text-align: left; }
.pet-coll-title { font-size: var(--fs-2); font-weight: 700; color: var(--text-dim); margin-bottom: 8px; }
.pet-coll-row { display: flex; gap: 8px; flex-wrap: wrap; }
.pet-coll-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 8px; border-radius: var(--r-sm); background: var(--surface); border: 1.5px solid var(--border);
  min-width: 64px; transition: transform 0.12s, border-color 0.15s; }
.pet-coll-item:hover, .pet-coll-item:active { transform: translateY(-2px); }
.pet-coll-item.active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) var(--wash-med), var(--surface)); }
.pet-coll-item.pet--trophy { border-color: var(--gold-2); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 24%, transparent), 0 5px 16px var(--gold-glow); }
.pet-coll-glyph { font-size: var(--fs-6); line-height: 1; display: grid; place-items: center; min-width: 1.65em; min-height: 1.65em; }
.pet-coll-name { font-size: var(--fs-1); font-weight: 700; max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pet-coll-grad { position: absolute; top: -6px; right: -4px; font-size: var(--fs-2); }

/* ---------------- Parent zone (lock + manage players) ---------------- */
.gu-players { display: flex; flex-direction: column; gap: var(--space-2); }
.gu-player { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: var(--r-sm);
  background: var(--surface); border: 1px solid var(--border); }
.gu-av { font-size: var(--fs-6); }
img.gu-av { width: 34px; height: 34px; object-fit: contain; }
.gu-name { flex: 1; font-weight: 700; }
.gu-player .chip { cursor: pointer; }
.gu-player .gu-del { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); }
.family-overview-heading, .child-detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.family-overview-heading .sub, .child-detail-heading .sub { margin-bottom: 0; }
.family-player-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0; }
/* Slim activity strip at the top of Manage Player: supporting context and the
   single route to the full Progress screen. Same anatomy as a settings-row. */
.guardian-activity-strip { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border); text-align: left;
  font-family: var(--font-body); color: var(--text); cursor: pointer; }
.guardian-activity-strip > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.guardian-activity-strip b { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3); }
.guardian-activity-strip small { color: var(--text-dim); font-size: var(--fs-2); font-weight: 700; }
.guardian-strip-open { display: inline-flex; align-items: center; gap: var(--space-1); flex: none; color: var(--accent); font-weight: 800; font-size: var(--fs-2); }
.guardian-activity-strip:hover, .guardian-activity-strip:focus-visible { border-color: var(--accent); outline: none; }
.family-player-card { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4); text-align: left; color: var(--text); background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); transition: transform .12s ease, border-color .2s ease, background .2s ease; }
.family-player-card:active { transform: translateY(2px) scale(.99); }
.family-player-card:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.family-player-card b, .family-player-card small { display: block; }
.family-player-card b { font-family: var(--font-display); font-size: var(--fs-5); }
.family-player-card small { margin-top: var(--space-1); color: var(--text-dim); font-weight: 650; }
.family-player-card .family-player-activity { color: var(--text); font-weight: 750; }
.family-player-card .family-player-manage { margin-top: var(--space-2); color: var(--accent); font-weight: 800; }
.family-player-card > .family-player-open { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--accent); font-size: var(--fs-2); line-height: 1; font-weight: 800; white-space: nowrap; }
.uicon.u-forward { transform: rotate(180deg); }
.guardian-nav-loading { pointer-events: none; }
.family-player-card.guardian-nav-loading > span:last-child { display: none; }
.me-door.guardian-nav-loading .me-chev { display: none; }
.guardian-nav-loading::after {
  content: ""; width: 1em; height: 1em; flex: none;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: btn-spin .7s linear infinite;
}
.family-player-card--deleted { opacity: .75; }
.empty-family { margin: var(--space-4) 0; padding: var(--space-6); text-align: center; border: 1px dashed var(--border); border-radius: var(--r-md); background: var(--surface); }
.empty-family p { color: var(--text-dim); margin-top: var(--space-2); }
.family-tools { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-4); }
.word-pack-list { display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-4) 0; }
.word-pack-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border);
}
.word-pack-card > div:first-child { min-width: 0; }
.word-pack-card h3 { font-size: var(--fs-4); }
.word-pack-card p, .word-pack-card small { display: block; margin-top: var(--space-1); }
.word-pack-card p { color: var(--text); font-weight: 700; }
.word-pack-card small { color: var(--text-dim); font-size: var(--fs-2); font-weight: 600; }
.word-pack-card-actions { display: flex; flex: none; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); }
.word-pack-editor .field { margin-bottom: var(--space-4); }
.chip--status { display: inline-flex; align-items: center; flex: none; padding: var(--space-2);
  color: var(--text-dim); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-2); font-weight: 800; }
.settings-section { margin: var(--space-4) 0; padding: var(--space-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.settings-section h3 { margin-bottom: var(--space-3); font-size: var(--fs-4); }
.settings-explainer { margin: calc(-1 * var(--space-1)) 0 var(--space-3); color: var(--text-dim); font-size: var(--fs-2); font-weight: 600; line-height: 1.45; }
.family-access-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); }
.family-access-empty { margin-top: var(--space-3); }
.settings-section > .field:last-child, .settings-section > .settings-row:last-child { margin-bottom: 0; }
.progress-metrics { display: grid; grid-template-columns: repeat(auto-fit,minmax(calc(var(--space-10) * 2),1fr)); gap: var(--space-2); }
@media (max-width: 520px) { .progress-metrics--four { grid-template-columns: repeat(2, 1fr); } }
.progress-metrics > div { padding: var(--space-3) var(--space-2); text-align: center; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); }
.progress-metrics strong, .progress-metrics span { display: block; }
.progress-metrics strong { color: var(--accent); font: 750 var(--fs-6) var(--font-display); }
.progress-metrics span { margin-top: 2px; color: var(--text-dim); font-size: var(--fs-1); font-weight: 750; }
.progress-summary { margin: var(--space-3) 0; color: var(--text-dim); font-size: var(--fs-2); font-weight: 650; }
.progress-calendar { padding: var(--space-3); border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); }
.progress-calendar-head { display: grid; grid-template-columns: var(--space-11) 1fr var(--space-11); align-items: center; gap: var(--space-2); text-align: center; }
.progress-calendar-head .chip { display: grid; place-items: center; min-width: var(--space-11); min-height: var(--space-11); padding: var(--space-2); }
.progress-weekdays, .progress-grid { display: grid; grid-template-columns: repeat(7,1fr); gap: var(--space-1); }
.progress-weekdays { margin: var(--space-3) 0 var(--space-1); color: var(--text-dim); text-align: center; font-size: var(--fs-1); font-weight: 800; }
.progress-day { position: relative; display: grid; place-items: center; min-width: 0; aspect-ratio: 1; padding: 0; color: var(--text-dim); background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); font: 700 var(--fs-2) var(--font-display); }
.progress-day:disabled { color: var(--text-dim); }
.progress-day--played { color: var(--text); background: color-mix(in srgb,var(--accent) var(--wash-soft),var(--surface)); border-color: color-mix(in srgb,var(--accent) 40%,var(--border)); cursor: pointer; }
.progress-day--selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.progress-day--blank { aspect-ratio: 1; }
.progress-dot { position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); }
.progress-day-detail { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border); }
.progress-day-detail > span { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.progress-quest-chip { padding: var(--space-1) var(--space-2); border-radius: var(--r-pill); background: color-mix(in srgb,var(--accent) var(--wash-med),var(--surface)); font-size: var(--fs-1); font-weight: 800; }
.progress-quest-chip--spelling { background: color-mix(in srgb,var(--accent-2) var(--wash-med),var(--surface)); }
.progress-quest-chip--transition { background: color-mix(in srgb,var(--good) var(--wash-med),var(--surface)); }
.progress-empty { margin: var(--space-3) 0 0; color: var(--text-dim); font-size: var(--fs-2); }
.settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-2) 0; }
.settings-row b, .settings-row small { display: block; }
.settings-row small { margin-top: var(--space-1); color: var(--text-dim); font-weight: 600; }
.settings-inline { display: flex; align-items: center; gap: var(--space-2); }
.settings-inline .guardian-year-picker { flex: 1; min-width: 0; }
.settings-inline .year-review-action { flex: none; min-height: calc(var(--space-12) + var(--space-2)); padding: var(--space-3) var(--space-5); font-size: var(--fs-3); border-radius: var(--r-sm); }
.year-rollover { margin-bottom: var(--space-4); padding: var(--space-3); border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) var(--wash-soft), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.year-rollover p { margin: var(--space-1) 0 var(--space-2); color: var(--text-dim); font-size: var(--fs-2); }
.advanced-settings { margin-top: var(--space-4); padding: var(--space-4); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.advanced-settings summary { cursor: pointer; font-family: var(--font-display); font-weight: 650; }
.advanced-settings[open] summary { margin-bottom: var(--space-3); }
.child-more-actions-copy { margin-bottom: var(--space-3); line-height: 1.45; }
.danger-action {
  background: var(--bad);
  color: #27040c;
  border-color: var(--bad);
}
.danger-action.is-loading[disabled] { color: #27040c; }
.account-delete-btn { margin-top: var(--space-4); border-radius: var(--r-md); }
.guardian-signout-btn {
  background: transparent;
  color: var(--bad);
  border: 1.5px solid color-mix(in srgb, var(--bad) 62%, transparent);
}
.guardian-code-choices, .guardian-code-targets { display: flex; flex-direction: column; gap: var(--space-2); }
.guardian-code-choice, .guardian-code-target {
  width: 100%; padding: var(--space-4); text-align: left; color: var(--text);
  background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--r-sm);
  font-family: var(--font-body); transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.guardian-code-choice:active, .guardian-code-target:active { transform: translateY(1px) scale(.995); }
.guardian-code-choice b, .guardian-code-choice span,
.guardian-code-target b, .guardian-code-target span { display: block; }
.guardian-code-choice span, .guardian-code-target span { margin-top: var(--space-1); color: var(--text-dim); font-size: var(--fs-2); font-weight: 600; line-height: 1.4; }
.guardian-code-choice.selected, .guardian-code-target.selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) var(--wash-soft), var(--surface-2));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.guardian-code-choice:focus-visible, .guardian-code-target:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.guardian-code-targets { margin-top: 12px; }
.guardian-code-targets[hidden] { display: none; }
/* Off-screen but focusable-free: keeps a username input in the form for
   password managers without rendering a visible credential field. */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.modal-nav-back { margin: -4px 0 12px; padding: 8px 0; color: var(--text-dim); background: transparent; border: 0; display: inline-flex; align-items: center; gap: 6px;
  font: 700 var(--fs-2) var(--font-display); }
.modal-nav-back.guardian-nav-loading { display: inline-flex; align-items: center; gap: 8px; }
.modal-nav-back:active { transform: translateX(-2px); }
@media (prefers-reduced-motion: reduce) { .guardian-nav-loading::after { animation-duration: 1.4s; } }
/* Me sub-pages (My Look, My Coach, Themes, Sign-In) have no tab bar — this back
   control is the ONLY way out, so it needs a real tap target there. Scoped to
   .me-sub so the compact version inside modals is untouched. */
.me-sub .modal-nav-back { min-height: 44px; padding: 8px 4px; margin: -4px 0 4px -4px; display: inline-flex; align-items: center; }
@media (max-width: 420px) {
  .family-tools { grid-template-columns: 1fr; }
  .child-detail-heading { align-items: center; }
  .settings-inline { align-items: stretch; flex-direction: column; }
  .settings-row { align-items: flex-start; }
}
.pin-input { width: 100%; text-align: center; font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-7); letter-spacing: 0.5em; padding: 16px 0 16px 0.5em; border-radius: var(--r-md);
  background: var(--surface); border: 1.5px solid var(--border); color: var(--text); }
.pin-input:focus { outline: none; border-color: var(--accent); }

/* ---------------- Onboarding (first run / no players) ---------------- */
.onboard { justify-content: flex-start; gap: 8px; }
.account-entry { justify-content: center; gap: clamp(28px, 6dvh, 60px); padding-block: clamp(20px, 4dvh, 48px); }
.brand-lockup { width: 100%; }
.brand-byline { max-width: 34ch; margin: clamp(14px, 2.5dvh, 24px) auto 0; line-height: 1.5; text-wrap: balance; }
.onboard-card { width: min(100%, 420px); max-width: 420px; margin: 20px auto 0; text-align: center; }
.account-entry .onboard-card { margin-top: 0; padding: 0; border: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.account-login-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) 0; }
.account-login-actions .btn { min-width: 0; min-height: 44px; padding-inline: 12px;
  white-space: normal; line-height: 1.15; text-wrap: balance; box-shadow: none; }
.account-login-actions .btn:first-child { flex: 1 1 100%; min-height: 64px; border-radius: var(--r-pill); font-size: 22px; box-shadow: 0 6px 30px rgba(84,230,225,.35); }
.account-login-sep { color: var(--text-dim); font-weight: 700; font-size: var(--fs-3); padding-inline: 2px; }
.account-login-actions .btn:not(:first-child) { padding-block: 8px; background: transparent; border: 0; color: var(--text); font-size: var(--fs-3); text-decoration: underline; text-decoration-color: rgba(234,241,255,.35); text-underline-offset: 8px; }
@media (hover: hover) and (pointer: fine) {
  .account-login-actions .btn:hover:not(:disabled) { transform: translateY(-2px);
    filter: none;
    box-shadow: 0 12px 26px -12px var(--glow), 0 0 0 1px color-mix(in srgb, var(--accent) var(--wash-strong), transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .account-login-actions .btn:hover:not(:disabled) { transform: none; }
}
.account-how-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; margin-top: 0; padding: 8px 12px; color: var(--text-dim);
  width: max-content; max-width: calc(100% - 32px); align-self: center;
  font: 800 var(--fs-3) var(--font-display); text-decoration: none; position: relative; }
.account-how-link::before { content: ""; position: absolute; right: 12px; bottom: 7px; left: 12px;
  height: 1px; background: currentColor; }
.account-how-link:hover { color: var(--text); }
@media (max-width: 359px) {
  .account-entry { gap: 24px; }
  .brand-wordmark--login { width: min(244px, 76vw); }
  .account-login-sep { display: none; }
}
@media (max-height: 620px) {
  .account-entry { gap: 22px; padding-block: 16px; }
  .brand-wordmark--login { width: min(250px, 70vw); }
  .brand-byline { margin-top: 10px; line-height: 1.35; }
  .account-login-actions .btn:first-child { min-height: 56px; }
  .account-how-link { min-height: 36px; padding-block: 4px; }
}

/* ---------------- Spell Quest game ---------------- */
.sp-stage { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 8px 0; }
.sp-prompt { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sp-speak {
  width: 84px; height: 84px; border-radius: var(--r-md); font-size: var(--fs-7);
  background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center;
  transition: transform 0.12s, background 0.2s, border-color 0.2s;
}
.sp-speak:hover, .sp-speak:active { transform: scale(1.05); background: var(--surface); border-color: var(--accent); }
.sp-repeat {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1);
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-3);
  padding: 8px 20px; border-radius: var(--r-pill); color: var(--accent);
  background: color-mix(in srgb, var(--accent) var(--wash-soft), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  transition: transform 0.1s, background 0.15s;
}
.sp-repeat:hover, .sp-repeat:active { transform: translateY(-2px); background: color-mix(in srgb, var(--accent) var(--wash-strong), var(--surface)); }
.sp-instr { color: var(--text-dim); font-weight: 600; font-size: var(--fs-3); }
.sp-fixit { display: flex; flex-direction: column; gap: 12px; }
.sp-fixit-word { color: var(--accent-2); letter-spacing: 0.06em; font-size: 1.15em; }

/* Word Card: one calm teach panel — meaning, example, one pattern clue. */
.sp-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); text-align: left; }
.sp-card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sp-card-pos { font-size: var(--fs-1); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); background: var(--surface-2); border-radius: var(--r-pill); padding: 3px 10px; }
.sp-card-say { padding: 6px 14px; font-size: var(--fs-2); }
.sp-card-def { font-size: var(--fs-4); font-weight: 600; line-height: 1.45; }
.sp-card-eg { font-size: var(--fs-3); color: var(--text-dim); line-height: 1.5; }
.sp-card-eg b { color: var(--accent-2); }
.sp-card-eg .sp-blank { color: var(--accent); font-weight: 800; letter-spacing: 1px; }
.sp-card-tip { font-size: var(--fs-3); font-weight: 600; line-height: 1.45; border-radius: var(--r-sm); padding: 8px 12px; background: var(--surface-2); }
.sp-hintwrap { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.sp-hintwrap .sp-card { align-self: stretch; }
#sp-hint-panel:empty { display: none; }
.sp-hint { padding: 8px 20px; }
.sp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sptile {
  padding: 20px 12px; border-radius: var(--r-md); font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-5); background: var(--surface); border: 1.5px solid var(--border); color: var(--text);
  transition: transform 0.12s, border-color 0.15s, background 0.15s; word-break: break-word;
}
.sptile:active:not(:disabled) { transform: translateY(-3px); border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .sptile:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--accent); }
}
.sptile:disabled { opacity: 0.85; }
.sptile.right { border-color: var(--good, #36e0a0); background: color-mix(in srgb, var(--good, #36e0a0) 24%, var(--surface)); color: #fff; }
.sptile.wrong { border-color: var(--bad, #ff5d73); background: color-mix(in srgb, var(--bad, #ff5d73) 22%, var(--surface)); }

/* typed formats (Fill the Gaps, Sound It Out) */
.sp-word { display: flex; flex-wrap: nowrap; gap: clamp(2px, 1.2vw, 8px); justify-content: center; max-width: 100%; overflow-x: auto; white-space: nowrap; font-family: var(--font-display);
  font-weight: 700; font-size: clamp(1.35rem, 7vw, 2rem); letter-spacing: 0.04em; }
.sp-word .sp-gap { color: var(--accent); }
.sp-inputwrap { display: flex; gap: 8px; align-items: stretch; }
.sp-input { flex: 1; min-width: 0; padding: 16px 20px; border-radius: var(--r-md); font-family: var(--font-display);
  font-weight: 600; font-size: var(--fs-5); text-align: center; background: var(--surface);
  border: 1.5px solid var(--border); color: var(--text); }
.sp-input:focus { outline: none; border-color: var(--accent); }
.sp-check { white-space: nowrap; }

/* cloze (Tricky Twins) */
.sp-sentence { text-align: center; font-size: var(--fs-6); font-weight: 600; line-height: 1.5; padding: 0 8px; }
.sp-sentence .sp-blank { color: var(--accent); font-weight: 800; letter-spacing: 1px; }
.mode--new { position: relative; border-color: color-mix(in srgb, var(--accent) 70%, var(--border)); }
.mode-new-badge { position: absolute; top: 0; right: 14px; transform: translateY(-50%); padding: 3px 9px;
  border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-family: var(--font-display);
  font-size: var(--fs-1); font-weight: 800; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 0 0 3px var(--bg-1), 0 5px 14px color-mix(in srgb, var(--accent) 35%, transparent); }
.mode-new-badge--unavailable { top: 12px; right: 12px; transform: none; background: var(--surface-2); color: var(--text-dim); box-shadow: none; }
.mode.mode--unavailable { position: relative; cursor: not-allowed; opacity: .58; border-style: dashed; }
.mode.mode--unavailable:hover { transform: none; border-color: var(--border); }
.mode.mode--unavailable .ic { filter: grayscale(1); }
.sp-ink-flow { width: min(100%, 720px); margin-inline: auto; display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
.sp-ink-pad { position: relative; height: clamp(150px, 27vh, 210px); overflow: hidden; border: 2px solid var(--border);
  border-radius: var(--r-lg); background: color-mix(in srgb, var(--surface) 94%, white); box-shadow: inset 0 0 0 4px color-mix(in srgb, var(--accent) 7%, transparent); }
.sp-ink-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; cursor: crosshair; touch-action: none; }
.sp-ink-baseline { position: absolute; right: 5%; bottom: 28%; left: 5%; border-bottom: 2px dashed color-mix(in srgb, var(--text-dim) 45%, transparent); }
.sp-ink-tools { display: grid; grid-template-columns: auto auto minmax(150px, 1fr); gap: 8px; }
.sp-ink-model, .sp-ink-detected { color: var(--accent); font-family: var(--font-display); font-weight: 800; letter-spacing: .06em; }
.sp-ink-detected { padding: 18px; border-radius: var(--r-md); background: var(--surface); border: 1.5px solid var(--accent);
  text-align: center; font-size: var(--fs-8); overflow-wrap: anywhere; }
.sp-ink-confirm, .sp-ink-outcome { text-align: center; }
.sp-ink-confirm-actions { margin-top: 4px; }
.sp-ink-summary { display: grid; gap: 6px; }
.sp-ink-summary > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sp-ink-summary p { margin: 0; font-weight: 700; }

@media (max-width: 520px) {
  .sp-ink-tools { grid-template-columns: 1fr 1fr; }
  .sp-ink-tools .btn--primary { grid-column: 1 / -1; }
  .sp-ink-confirm-actions { grid-template-columns: 1fr; }
}

/* scramble (Word Builder) */
.sp-build { display: flex; flex-wrap: nowrap; gap: clamp(2px, 1.2vw, 8px); justify-content: center; max-width: 100%; overflow-x: auto; min-height: 56px; }
.sp-slot { min-width: 38px; height: 50px; display: grid; place-items: center; border-radius: var(--r-sm);
  border: 2px dashed var(--border); font-family: var(--font-display); font-weight: 700; font-size: var(--fs-6); padding: 0 8px; }
.sp-slot.filled { border-style: solid; border-color: var(--accent); background: color-mix(in srgb, var(--accent) var(--wash-med), var(--surface)); }
/* padding-block gives the hover/tap bounce (translateY -3px) room: overflow-x:auto forces
   overflow-y to clip, which would otherwise shave the lifted tile's top border. */
.sp-letters { display: flex; flex-wrap: nowrap; gap: clamp(4px, 1.5vw, 8px); justify-content: center; max-width: 100%; overflow-x: auto; padding: 8px 2px; }
.splet { width: clamp(34px, 11vw, 54px); height: clamp(42px, 12vw, 58px); border-radius: var(--r-sm); font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.15rem, 5vw, 1.6rem); background: var(--surface-2);
  border: 1.5px solid color-mix(in srgb, var(--accent) 36%, var(--border)); color: var(--text);
  box-shadow: 0 5px 12px -8px var(--glow), inset 0 1px 0 rgba(255,255,255,.16);
  transition: transform 0.1s, border-color 0.15s, background .15s, color .15s, opacity .15s; }
.sp-build.sp-len-long { gap: 4px; }
.sp-build.sp-len-long .sp-slot { min-width: 32px; height: 46px; font-size: var(--fs-5); padding: 0 4px; }
.sp-letters.sp-len-long { gap: 4px; }
.sp-letters.sp-len-long .splet { width: 32px; height: 46px; font-size: var(--fs-5); }
.sp-build.sp-len-xl { gap: 2px; }
.sp-build.sp-len-xl .sp-slot { min-width: 24px; height: 40px; font-size: var(--fs-4); padding: 0 2px; }
.sp-letters.sp-len-xl { gap: 2px; }
.sp-letters.sp-len-xl .splet { width: 24px; height: 40px; font-size: var(--fs-4); }
.splet:active:not(:disabled) { transform: translateY(-3px); border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .splet:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--accent); }
}
.splet.is-used:disabled { color: color-mix(in srgb, var(--text-dim) 62%, transparent);
  background: color-mix(in srgb, var(--bg-1) 74%, #000 26%);
  border-color: color-mix(in srgb, var(--text-dim) 18%, transparent);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.34); opacity: .46; filter: none; cursor: default; }

/* ---------------- Spell Quest word map ---------------- */
.spgarden-head { font-family: var(--font-display); font-weight: 800; margin-bottom: 8px; }
.spgems { display: grid; grid-template-columns: repeat(auto-fill, 20px); gap: 4px; max-height: 240px; overflow-y: auto; padding: 4px; }
.spgem { width: 20px; height: 20px; border-radius: var(--r-xs); padding: 0; }
.spgem--tap { cursor: pointer; border: none; transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.2s ease; }
.spgem--tap:hover { transform: scale(1.18); filter: brightness(1.12); box-shadow: 0 4px 12px -2px rgba(0,0,0,0.5); z-index: 1; }
.spgem--tap:active { transform: scale(0.9); }
.spgem--tap:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.spshelf-title { font-weight: 800; font-size: var(--fs-2); margin: 16px 0 8px; color: var(--text-dim); }
.spshelf { display: flex; flex-wrap: wrap; gap: 8px; }
.spshelf .spword { font-size: var(--fs-2); font-weight: 700; padding: 4px 12px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--good) var(--wash-med), var(--surface)); border: 1px solid color-mix(in srgb, var(--good) 50%, transparent); color: var(--text); }
.add-card {
  display: grid; place-items: center; min-height: 180px; gap: 8px;
  border: 2px dashed var(--border); border-radius: var(--r-lg); cursor: pointer; color: var(--text-dim);
  font-family: var(--font-display); font-weight: 600;
}
.add-card:hover { color: var(--text); border-color: var(--accent); }
.add-card .plus { font-size: var(--fs-7); }

/* ---------------- HUD (home) ---------------- */
.topbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.topbar .who { display: flex; align-items: center; gap: 12px; }
/* Tap your avatar/name to open the profile editor. */
.who-btn { background: none; border: none; color: inherit; cursor: pointer; text-align: left;
  padding: 4px 8px 4px 4px; margin: -4px; border-radius: var(--r-sm); transition: background 0.15s ease; }
.who-btn:hover { background: var(--surface); }
.who-btn:active { transform: scale(0.98); }
.who-btn:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.topbar .av { font-size: var(--fs-7); }
.topbar img.av { width: 46px; height: 46px; object-fit: contain; filter: drop-shadow(0 4px 10px var(--glow)); }
.topbar .nm { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-5); }
.topbar .sub { color: var(--text-dim); font-size: var(--fs-2); font-weight: 700; }

/* ---- Hero home header: the avatar as the player's identity anchor ---- */
.hero { display: flex; align-items: center; gap: 16px; width: 100%; padding: 4px 8px 16px;
  background: none; border: 0; cursor: pointer; text-align: left; color: inherit; }
.hero:active { transform: scale(0.99); }
.hero-disc { position: relative; flex: none; width: 88px; height: 88px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, var(--surface-2), rgba(0,0,0,0.25));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 60%, transparent), 0 10px 28px -8px var(--glow);
  animation: hero-float 3.6s ease-in-out infinite; }
.hero-disc::before { content: ""; position: absolute; inset: -7px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, var(--accent), var(--accent-2), var(--accent)); filter: blur(8px);
  opacity: 0.5; }
.hero-av { width: 82%; height: 82%; object-fit: contain; display: block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.pet-header-disc { overflow: visible; }
.pet-header-disc .pet-header-avatar { max-width: 78%; max-height: 78%; }
/* Emoji avatars are text, not an image: centre and scale them inside the disc. */
.hero-av.avatar-emoji { display: grid; place-items: center; font-size: var(--fs-7); line-height: 1; }
@keyframes hero-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hero-spin { to { transform: rotate(360deg); } }
.hero-meta { display: flex; flex-direction: column; min-width: 0; }
.hero-kicker { font-size: var(--fs-1); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 2px; }
.hero-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-6); line-height: 1.05; }
.hero-sub { color: var(--text-dim); font-weight: 700; font-size: var(--fs-2); margin-top: 8px; }
/* Quest-home header row: hero takes the space, nav controls recede to quiet glyphs. */
.qhead { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.qhead .hero { flex: 1; min-width: 0; padding: 8px 2px 8px; }
.navlink { flex: none; width: 38px; height: 38px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--text-dim); font-size: var(--fs-7); line-height: 1; display: grid; place-items: center;
  border-radius: 50%; transition: opacity 0.15s, transform 0.15s, background 0.15s; }
.navlink:hover, .navlink:focus-visible { opacity: 1; transform: scale(1.08); background: var(--surface); outline: none; }
.navlink:active { transform: scale(0.94); }
.qhead-balance { visibility: hidden; pointer-events: none; }
/* Shop and the balance are one destination: what I can spend and where. */
.shop-balance { flex: none; min-width: 56px; min-height: 72px; padding: var(--space-1); border: 0;
  border-radius: var(--r-md); background: none; color: var(--text); cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1);
  transition: transform .15s, background .15s; }
.shop-balance .chip { padding-inline: var(--space-2); border-color: var(--surface-2); }
.shop-balance:hover, .shop-balance:focus-visible { transform: translateY(-2px);
  background: color-mix(in srgb, var(--accent) var(--wash-soft), transparent); outline: none; }
.shop-balance:active { transform: scale(.96); }
.hero-chips { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.hero-chips .chip, .streak-rung .chip { padding-inline: 8px; border-color: var(--surface-2); }
.chip.fire { color: var(--flame); border-color: color-mix(in srgb, var(--flame) 30%, transparent); }

/* ---- Quest coach: persistent avatar companion that reacts to answers ---- */
.coach { display: flex; align-items: center; gap: 12px; margin: 8px 2px 8px; }
.coach-disc { position: relative; flex: none; width: min(160px, 40vw); aspect-ratio: 1/1; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 50% 38%, var(--surface-2), rgba(0,0,0,0.25));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 55%, transparent), 0 10px 26px -10px var(--glow);
  animation: coach-breathe 3s ease-in-out infinite; }
.coach-av { width: 86%; height: 86%; object-fit: contain; display: block;
  filter: drop-shadow(0 3px 7px rgba(0,0,0,0.4)); }
.coach-disc .coach-av.avatar-emoji { display: grid; place-items: center; width: 86%; height: 86%;
  font-size: var(--fs-8); line-height: 1; }
.coach-disc .coach-pet { max-width: 88%; max-height: 88%; }
@keyframes coach-breathe { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.03); } }
.coach-bubble { position: relative; flex: none; align-self: center;
  background: #fff; color: #10222c; font-weight: 800; font-size: var(--fs-3);
  padding: 12px 16px; border-radius: var(--r-sm) var(--r-sm) var(--r-sm) var(--r-xs); max-width: 46vw;
  box-shadow: 0 6px 16px -6px rgba(0,0,0,0.6); transition: transform 0.2s; }
.coach-bubble::after { content: ""; position: absolute; left: -7px; bottom: 9px;
  border: 8px solid transparent; border-right-color: #fff; border-left: 0; }
.coach.buzz .coach-bubble { transform: scale(1.06); }
.coach.react-correct .coach-disc { animation: coach-bounce 0.5s ease; }
.coach.react-wrong .coach-disc { animation: coach-wobble 0.5s ease; }
.coach.react-cheer .coach-disc { animation: coach-cheer 0.6s ease; }
@keyframes coach-bounce { 0%,100% { transform: translateY(0); } 30% { transform: translateY(-14px) scale(1.08); } }
@keyframes coach-wobble { 0%,100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }
@keyframes coach-cheer { 0%,100% { transform: translateY(0) rotate(0); } 25% { transform: translateY(-12px) rotate(-7deg); } 60% { transform: translateY(-12px) rotate(7deg); } }
@media (prefers-reduced-motion: reduce) { .hero-disc, .hero-disc::before, .coach-disc { animation: none; } }

.statbar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat {
  text-align: center; padding: 12px 4px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
}
.stat .v { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-5); line-height: 1; white-space: nowrap; }
.stat .k { color: var(--text-dim); font-size: var(--fs-1); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; margin-top: 8px; white-space: nowrap; }
.stat .v.coins { color: var(--accent-2); }
.stat .v.streak { color: var(--flame); }

.xpwrap { margin-top: 8px; }
.xpbar { height: 14px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.xpbar > span { display: block; height: 100%; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow: 0 0 16px var(--glow); transition: width 0.8s cubic-bezier(0.2,0.9,0.2,1); }
.xpmeta { display: flex; justify-content: space-between; color: var(--text-dim); font-size: var(--fs-2); font-weight: 800; margin-top: 8px; }

/* ---------------- Mode picker ---------------- */
.section-title { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px; }
.section-title h2 { font-size: var(--fs-5); }
.modes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mode {
  text-align: left; padding: 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 4px; min-height: 96px;
  transition: transform 0.14s, border-color 0.2s, background 0.2s;
}
.mode:hover { transform: translateY(-3px); border-color: var(--accent); }
.mode .ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) var(--wash-soft), var(--surface));
  font-size: var(--fs-6);
  line-height: 1;
}
.mode .ic .uicon { width: 1.25em; height: 1.25em; vertical-align: 0; }
/* Transition wraps its title+subtitle in .mtext. Without a block context the two
   spans run together inline ("Organise & PlanHomework, bags and routines"), so it
   stacks them exactly like the .mode children it stands in for. */
.mtext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mode .mt { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-4); }
.mode .md { color: var(--text-dim); font-size: var(--fs-2); font-weight: 600; line-height: 1.25; }

/* ---------------- Heatmap (struggle map) ---------------- */
.heat-legend { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; color: var(--text-dim); font-size: var(--fs-2); font-weight: 800; }
.heat-legend i { width: 14px; height: 14px; border-radius: var(--r-xs); display: inline-block; vertical-align: -2px; margin-right: 4px; }
.heat-legend .heat-n { display: inline-block; min-width: 18px; text-align: center; margin-left: 2px; padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface); color: var(--text); font-size: var(--fs-2); }
.map-hint { color: var(--text-dim); font-size: var(--fs-2); font-weight: 700; text-align: center; margin-bottom: 8px; }
.times-map-card--expanded { padding-inline: var(--space-4); }
.heatmap { width: 100%; padding-bottom: 4px; }
.heatgrid { display: grid; gap: var(--space-1); width: 100%; min-width: 0; } /* colour-only cells fit any width — no scroll */
.heatcell {
  min-width: 0; padding: 0; aspect-ratio: 1; border-radius: var(--r-xs); display: grid; place-items: center;
  font-size: var(--fs-1); font-weight: 800; color: rgba(255,255,255,0.85);
  background: var(--surface-2);
}
.heatcell.hd { background: transparent; color: var(--text-dim); font-weight: 800; }
.heatcell--inactive { opacity: 0.28; filter: saturate(0); pointer-events: none; }
/* Tappable fact cells — tap one to practise that exact fact. */
.heatcell--tap { cursor: pointer; border: none; transition: transform 0.1s ease, box-shadow 0.2s ease, filter 0.2s ease; }
.heatcell--tap:hover { transform: scale(1.12); filter: brightness(1.12); box-shadow: 0 4px 12px -2px rgba(0,0,0,0.5); z-index: 1; }
.heatcell--tap:active { transform: scale(0.92); }
.heatcell--tap:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
.heat-m0 { background: rgba(255,255,255,0.06); color: var(--text-dim); }
.heat-m1 { background: #ff5470; }   /* struggling */
.heat-m2 { background: var(--flame-2); color: #351405; }
.heat-m3 { background: var(--gold); color: #3a2c00; }
.heat-m4 { background: #9be15d; color: #1e2e00; }
.heat-m5 { background: var(--good); color: #062a12; box-shadow: 0 0 10px color-mix(in srgb, var(--good) 60%, transparent); }

/* ---------------- Badges ---------------- */
.badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
.badge { text-align: center; padding: 12px 8px; border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); }
.badge .bic { display: block; }
.badge.earned .bic { animation: pop 0.4s backwards; }
.uicon.u-badge { width: 2.4rem; height: 2.4rem; }
.badge .bn { font-size: var(--fs-1); font-weight: 800; color: var(--text-dim); margin-top: 4px; line-height: 1.1; }
.badge.earned .bn { color: var(--text); }
.rematch-btn { margin-top: 12px; }
@keyframes pop { 0% { transform: scale(0.4); } 70% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* ---------------- Rewards hub / Trophy Case / Streak Path ---------------- */
.player-page-head {
  margin-bottom: 8px;
}
.player-page-head .hero { cursor: default; }
.player-page-head .hero:active { transform: none; }
.reward-hub { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reward-door { min-width: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px;
  min-height: 96px; padding: 20px; border-radius: var(--r-lg);
  border: 1px solid var(--border); color: var(--text); text-align: left;
  background: var(--surface); backdrop-filter: blur(14px) saturate(1.2); box-shadow: var(--shadow);
  transition: transform .14s ease, border-color .2s ease, background .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .reward-door:not(:disabled):hover { transform: translateY(-3px); border-color: var(--accent); }
}
.reward-door--disabled { filter: grayscale(1); color: var(--text-dim); cursor: default; box-shadow: none; }
.upcoming-control { filter: grayscale(1); color: var(--text-dim); cursor: default; }
.reward-door-ic { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm);
  font-size: var(--fs-6); background: color-mix(in srgb, var(--accent) var(--wash-soft), var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  line-height: 1; }
.reward-door b, .reward-door small { display: block; }
.reward-door b { font-family: var(--font-display); font-size: var(--fs-4); }
.reward-door small { color: var(--text-dim); font-size: var(--fs-2); font-weight: 600; margin-top: 2px; }
.reward-door-count { padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface); font-family: var(--font-display); font-size: var(--fs-3); font-weight: 700; white-space: nowrap; }
.chip.pet-coins, .pet-coin-balance { color: var(--gold-2); }
.pet-coin-balance { padding: 4px 12px; border: 1px solid var(--border);
  border-radius: var(--r-pill); background: var(--surface);
  font-family: var(--font-display); font-size: var(--fs-3); font-weight: 700; white-space: nowrap; }
.trophy-hero-disc { font-size: var(--fs-7); }
.trophy-intro { display: flex; flex-direction: column; gap: 8px; text-align: center; }
.trophy-guardian-jump { display: inline-flex; align-items: center; gap: 2px; margin: -4px 0;
  padding: 4px 1px; border: 0; border-radius: var(--r-sm); background: transparent;
  color: var(--accent); font: inherit; line-height: inherit; vertical-align: baseline;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.trophy-guardian-jump .uicon { width: .82em; height: .82em; }
.trophy-guardian-jump:hover, .trophy-guardian-jump:focus-visible {
  background: color-mix(in srgb, var(--accent) var(--wash-soft), transparent); outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 36%, transparent);
}
#celestial-guardians:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 72%, transparent);
  outline-offset: var(--space-1); border-radius: var(--r-sm); }
#celestial-guardians.is-pointer-jump:focus-visible { outline: none; }
.trophy-group { display: block; }
.trophy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; }
.trophy-badge { min-width: 0; display: flex; flex-direction: column; align-items: center; padding: 12px 8px;
  border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface);
  color: var(--text); text-align: center;
  transition: transform .14s ease, border-color .2s ease, background .2s ease, opacity .2s ease; }
.trophy-badge.locked {
  border-color: color-mix(in srgb, var(--text-dim) 28%, transparent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--text-dim); opacity: .62; box-shadow: none;
}
.trophy-badge.claimable {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) var(--wash-med), var(--surface));
  box-shadow: var(--shadow-inset-ring), var(--shadow-lift-sm);
}
.trophy-badge.claimed {
  border-color: color-mix(in srgb, var(--good) 42%, var(--border));
  background: color-mix(in srgb, var(--good) var(--wash-soft), var(--surface));
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--good) var(--wash-soft), transparent);
}
@media (hover: hover) and (pointer: fine) {
  .trophy-badge:not(.locked):hover { transform: translateY(-2px); }
  .trophy-badge.locked:hover { opacity: .76; }
}
.trophy-badge-art { min-height: 44px; display: grid; place-items: center; }
.trophy-badge-name { font-family: var(--font-display); font-size: var(--fs-4); font-weight: 600; margin-top: 8px; }
.trophy-badge-rule { color: var(--text-dim); font-size: var(--fs-2); font-weight: 600; line-height: 1.25; min-height: 2.5em; margin-top: 4px; }
.trophy-badge-reward { margin-top: 8px; padding: 4px 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--gold-2); font-size: var(--fs-2); font-weight: 800; }
.trophy-badge.locked .trophy-badge-art { filter: grayscale(1); opacity: .42; }
.trophy-badge.locked .trophy-badge-reward {
  border: 1px solid color-mix(in srgb, var(--text-dim) 30%, transparent);
  background: transparent; color: var(--text-dim);
}
.trophy-badge.claimable .trophy-badge-reward {
  background: var(--accent); color: var(--accent-ink);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 30%, transparent);
}
.trophy-badge.claimed .trophy-badge-reward {
  background: color-mix(in srgb, var(--good) var(--wash-med), var(--surface-2));
  color: var(--good);
}
.trophy-pets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.trophy-pet { display: flex; flex-direction: column; align-items: center; padding: 24px 16px; border-radius: var(--r-lg);
  border: 1px solid var(--border); color: var(--text);
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.trophy-pet.owned { border-color: var(--good); }
.trophy-pet.is-unavailable { cursor: pointer; filter: grayscale(.7); opacity: .62; }
.trophy-pet.is-unavailable:focus-visible,
.trophy-pet.is-unavailable:hover { opacity: .82; }
.guardian-choices-locked {
  padding: 8px; border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--surface) 82%, var(--text-dim) 18%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--text-dim) 28%, transparent);
}
.trophy-pet-art, .trophy-hatch-art { font-size: var(--fs-8); filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 55%, transparent)); }
.trophy-pet-art { display: grid; place-items: center; width: 100%; min-height: 150px; }
.guardian-choice-img { display: block; width: min(100%, 150px); aspect-ratio: 1; object-fit: contain; margin: 0 auto; }
.guardian-modal-img { display: block; width: min(56vw, 230px); aspect-ratio: 1; object-fit: contain; margin: 0 auto; }
.trophy-pet-name { font-family: var(--font-display); font-size: var(--fs-4); font-weight: 700; margin-top: 8px; }
.trophy-pet-price { color: var(--gold-2); font-size: var(--fs-2); font-weight: 600; margin-top: 4px; text-align: center; }
.trophy-pet-price .guardian-lock-mark { margin-right: .2em; }
.trophy-note { font-size: var(--fs-2); }
.trophy-price-row { display: flex; justify-content: center; gap: 20px; padding: 8px; margin: 8px 0; border-radius: var(--r-sm); background: var(--surface-2); }
.guardian-locked-message {
  display: grid; gap: 8px; justify-items: center; margin: 16px 0; padding: 18px;
  border: 1px solid color-mix(in srgb, var(--text-dim) 42%, var(--border));
  border-radius: var(--r-md); background: color-mix(in srgb, var(--surface-2) 78%, var(--text-dim) 22%);
  color: var(--text-dim);
}
.guardian-locked-message.is-owned { border-color: color-mix(in srgb, var(--good) 55%, var(--border)); }
.guardian-locked-message p { margin: 0; font-weight: 700; line-height: 1.45; }
.guardian-locked-icon {
  width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--surface); font-size: var(--fs-5);
}
.guardian-chase { color: var(--gold-2); font-family: var(--font-display); font-weight: 800; }
.guardian-wall-open { cursor: pointer; }
.modal:has(.guardian-wall-wrap) { width: min(560px, 100%); }
.guardian-wall { position: relative; width: min(100%, calc((92dvh - 220px) * 939 / 1672)); aspect-ratio: 939 / 1672;
  margin: 0 auto; overflow: hidden; border-radius: var(--r-sm); background: #10173a;
  box-shadow: 0 12px 38px rgba(0,0,0,.5); }
.guardian-wall-bg, .guardian-wall-layer, .guardian-wall-layer img { position: absolute; inset: 0; width: 100%; height: 100%; }
.guardian-wall-bg, .guardian-wall-layer img { display: block; object-fit: cover; }
.guardian-wall-layer { pointer-events: none; }
.guardian-wall-layer.is-locked img {
  filter: grayscale(1) brightness(.06) contrast(1.4) drop-shadow(0 0 2px rgba(0,0,0,.98));
  opacity: .9;
}
.guardian-wall-layer.is-owned img { filter: drop-shadow(0 0 12px rgba(255,220,120,.28)); }
.guardian-wall-layer.is-reveal img { animation: guardian-reveal 1.15s ease-out .35s both; }
@keyframes guardian-reveal {
  from { filter: grayscale(1) brightness(.28); opacity: .35; transform: scale(.96); }
  55% { filter: brightness(1.7) saturate(1.25); opacity: 1; }
  to { filter: drop-shadow(0 0 12px rgba(255,220,120,.28)); opacity: 1; transform: none; }
}
.guardian-wall-label { position: absolute; z-index: 2; left: 50%; width: 42%; padding: 4px 3px; border-radius: var(--r-sm);
  color: #fff4cf; background: rgba(8,13,36,.72); border: 1px solid rgba(255,218,120,.35); text-align: center;
  text-shadow: 0 1px 4px #000; transform: translateX(-50%); }
.guardian-wall-label b, .guardian-wall-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guardian-wall-label b { font-family: var(--font-display); font-size: var(--fs-1); }
.guardian-wall-label small { font-size: var(--fs-1); color: #f8d878; }
.guardian-wall-layer--griffin .guardian-wall-label { bottom: 66%; }
.guardian-wall-layer--moonwolf .guardian-wall-label { bottom: 33%; }
.guardian-wall-layer--leviathan .guardian-wall-label { bottom: 2.5%; }
.guardian-wall.is-complete { box-shadow: 0 0 0 3px var(--gold-2), 0 12px 42px rgba(255,215,106,.4); }
.streak-summary { display: flex; flex-direction: column; gap: 4px; text-align: center; }
.streak-summary b { color: var(--flame); font-family: var(--font-display); font-size: var(--fs-5); }
.streak-style-spark { box-shadow: 0 0 16px rgba(255,145,78,.2); }
.streak-style-gold { border-color: color-mix(in srgb, var(--gold) 64%, var(--border)) !important; box-shadow: 0 0 20px color-mix(in srgb, var(--gold) 28%, transparent); }
.streak-style-century { border-color: color-mix(in srgb, #e7b6ff 68%, var(--border)) !important; box-shadow: 0 0 24px rgba(196,105,255,.32), inset 0 0 16px color-mix(in srgb, var(--gold) var(--wash-soft), transparent); }
.chip.streak-style-spark, .chip.streak-style-gold, .chip.streak-style-century { border-width: 1px; border-style: solid; }
.streak-ladder { display: flex; flex-direction: column; gap: 8px; }
.streak-rung { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 12px; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.streak-rung.earned { border-color: color-mix(in srgb, var(--flame) 58%, var(--border)); box-shadow: inset 0 0 20px color-mix(in srgb, var(--flame) 9%, transparent); }
.streak-rung.next { border-color: color-mix(in srgb, var(--flame) 72%, var(--border)); }
.streak-rung.future { opacity: .68; }
.streak-rung-days { width: 52px; height: 52px; border-radius: 50%; display: grid; place-content: center; text-align: center;
  background: var(--surface-2); color: var(--flame); font-family: var(--font-display); font-size: var(--fs-5); font-weight: 900; }
.streak-rung-days small { display: block; color: var(--text-dim); font-family: var(--font-body); font-size: var(--fs-1); }
.streak-rung-mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.streak-rung-mid b { font-family: var(--font-display); font-size: var(--fs-2); }
.streak-rung-mid > span:not(.streak-rung-bar) { color: var(--text-dim); font-size: var(--fs-1); }
.streak-rung-bar { display: block; height: 5px; margin-top: 4px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.streak-rung-bar i { display: block; height: 100%; background: linear-gradient(90deg,var(--flame-2),var(--gold)); }
.streak-rung-lock { font-size: var(--fs-5); }
.streak-rung-lock .chip { opacity: .6; }
@media (max-width: 560px) {
  .reward-hub { grid-template-columns: 1fr; }
  .trophy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trophy-pets { grid-template-columns: 1fr; }
}

/* ---------------- Game screen ---------------- */
.game { display: flex; flex-direction: column; flex: 1; gap: 16px; }
.game-top { display: flex; align-items: center; gap: 12px; }
.qprogress { flex: 1; height: 10px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; border: 1px solid var(--border); }
.qprogress > span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); transition: width 0.3s; }
.game-streak { font-family: var(--font-display); font-weight: 700; color: var(--flame); min-width: 54px;
  display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.uicon.streak-ico { width: 1.25em; height: 1.25em; }

.timerbar { height: 6px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.timerbar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--good), var(--gold), var(--bad)); transform-origin: left; }

.equation-wrap { flex: 1; display: grid; place-items: center; padding: 8px 0; }
.equation {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-8); line-height: 1; text-align: center;
  letter-spacing: -0.02em; transition: transform 0.18s;
}
.equation .op { color: var(--accent); margin: 0 0.12em; }
.equation .ans {
  display: inline-block; min-width: 1.6em; padding: 0 0.12em;
  border-bottom: 6px solid var(--accent); color: var(--accent-2);
}
.equation .ans.empty { color: var(--text-dim); }
.equation.correct { animation: eq-correct 0.5s ease; }
.equation.wrong { animation: eq-wrong 0.45s ease; }
@keyframes eq-correct { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes eq-wrong { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-12px); } 40% { transform: translateX(12px); } 60% { transform: translateX(-8px); } 80% { transform: translateX(8px); } }

.feedback { min-height: 30px; text-align: center; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-5); }
.feedback.good { color: var(--good); }
.feedback.bad { color: var(--bad); }
.feedback .fly { display: inline-block; animation: pop 0.4s; }
.feedback .fly--green { color: var(--good); text-shadow: 0 0 14px color-mix(in srgb, var(--good) 70%, transparent); animation: pop 0.5s; }
.feedback .onemore { color: var(--good); font-weight: 800; font-size: var(--fs-3); opacity: 0.95; }

/* Shared play-layout contract: rich Math prompts must reserve their rendered
   height so in-flow feedback cannot paint over them. The coach owns any spare
   vertical space and therefore stays attached to the answer controls in both
   Math and spelling (native-keyboard spelling hides it below). */
body[data-screen="game"] .equation-wrap { min-height: min-content; }
body[data-screen="game"] .screen.game > .coach,
body[data-screen="spellgame"] .screen.game > .coach { margin-top: auto; }

/* keypad */
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.key {
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-7);
  padding: 20px 0; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border);
  transition: transform 0.08s, background 0.15s; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.key:active { transform: translateY(3px) scale(0.96); background: var(--surface); }
.key--enter { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: var(--accent-ink); border: none; box-shadow: 0 10px 24px -8px var(--glow); }
.key--del { color: var(--bad); }

/* ---------------- Results ---------------- */
.results-screen { gap: var(--space-4); }
.result-hero { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto;
  align-items: center; column-gap: var(--space-3); padding: var(--space-3) var(--space-1); text-align: left; }
.result-hero .emoji { grid-row: 1 / 3; font-size: var(--fs-8); line-height: 1; text-align: center; }
.result-hero h1 { align-self: end; font-size: var(--fs-7); line-height: 1; margin: 0; }
.result-hero .muted { align-self: start; margin-top: var(--space-1); }
.result-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); }
.results-screen--math .result-grid, .results-screen--spell .result-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.result-moments { display: grid; gap: var(--space-2); }
.result-moment { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-align: center;
  padding: var(--space-2) var(--space-3); border-radius: var(--r-md); background: color-mix(in srgb, var(--accent) var(--wash-soft), var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border)); }
.result-moment b { font-family: var(--font-display); font-size: var(--fs-3); }
.result-moment span { color: var(--text-dim); font-size: var(--fs-2); font-weight: 700; }
.result-moment--shield { border-color: color-mix(in srgb, #7cc8ff 55%, var(--border)); }
.result-moment--best { border-color: color-mix(in srgb, var(--gold) 55%, var(--border)); }
/* Structurally a result moment (same padding, same stack, same size as Day/New
   Best), so it takes the moment radius rather than the containing-panel radius
   it would otherwise inherit from .card. */
.result-levelup { display: flex; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--r-md);
  border-color: color-mix(in srgb, var(--gold) 60%, var(--border)); }
.result-levelup > span:last-child { display: flex; flex-direction: column; }
.result-levelup b { font-family: var(--font-display); color: var(--gold); }
.result-levelup small { color: var(--text-dim); font-weight: 800; }
.rstat { min-width: 0; min-height: 80px; display: grid; align-content: center; text-align: center; padding: var(--space-3) var(--space-1);
  border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.rstat .v { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-6); line-height: 1; white-space: nowrap; }
.rstat .v.coins { display: flex; align-items: center; justify-content: center; gap: var(--space-1); }
.rstat .v.coins .uicon { width: 1.1em; height: 1.1em; vertical-align: 0; }
.rstat .k { color: var(--text-dim); font-size: var(--fs-1); font-weight: 800; text-transform: uppercase; margin-top: var(--space-1); white-space: nowrap; }
.result-rewards { display: grid; gap: var(--space-2); }
.result-reward-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  min-height: 56px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  text-align: left;
}
.result-reward-row > .uicon { width: 32px; height: 32px; vertical-align: 0; }
.result-reward-row > span { display: flex; flex-direction: column; min-width: 0; }
.result-reward-row b { font-family: var(--font-display); }
.result-reward-row small { color: var(--text-dim); font-size: var(--fs-2); font-weight: 800; }
.result-reward-row--pet { width: 100%; cursor: pointer; font-size: inherit; }
.result-reward-row--pet .pet-av { justify-self: center; }
.result-reward-row--coins .chest-wrap { margin: 0; }
.quest-play-now { margin-top: var(--space-1); }
.quest-play-detail { min-height: 72px; flex-direction: column; gap: var(--space-1); }
.quest-play-detail > span { display: inline-flex; align-items: center; gap: var(--space-2); }
.quest-play-detail > small { color: currentColor; font-size: var(--fs-2); font-weight: 400; opacity: .72; }
.quest-featured-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin: var(--space-1) 0 calc(-1 * var(--space-2)); }
.quest-featured-head h2 { font-size: var(--fs-5); }
.quest-featured-head span { color: var(--accent); font-size: var(--fs-2); font-weight: 800; text-align: right; }
.quest-featured .mode { min-height: 144px; border-color: color-mix(in srgb, var(--accent) 36%, var(--border)); }
.quest-featured .mode .md { text-transform: none; }
.quest-all-jump { align-self: center; margin: calc(-1 * var(--space-1)) 0 0; padding: var(--space-2) var(--space-4); color: var(--accent); background: none; border: 0; font-size: var(--fs-2); font-weight: 850; text-decoration: none; border-radius: var(--r-pill); }
.quest-all-jump:hover, .quest-all-jump:focus-visible { background: color-mix(in srgb, var(--accent) var(--wash-soft), transparent); outline: none; }
#math-all-games, #spell-all-games, #transition-all-tracks, #celestial-guardians { scroll-margin-top: calc(var(--safe-t) + var(--space-3)); }
.quest-challenge { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--r-sm); background: var(--surface); border: 1px solid var(--border); font-size: var(--fs-2); }
.quest-challenge b { color: var(--accent-2); white-space: nowrap; }
.quest-challenge.done { justify-content: center; color: var(--good); font-weight: 800; }
.first-data-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; padding: var(--space-6) var(--space-4); }
.first-data-empty b { font-family: var(--font-display); }
.first-data-empty span { color: var(--text-dim); }
.result-rewards .chip, .tmrw-hook .chip { gap: var(--space-2); padding: var(--space-2) var(--space-3); }
.chip--green { background: color-mix(in srgb, var(--good) var(--wash-strong), transparent); border-color: var(--good); color: var(--text); }
.results-screen .chest-wrap { margin: 0; }
.results-screen .chest { min-height: 40px; flex-direction: row; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--r-pill); }
.results-screen .chest-ic { display: inline-flex; font-size: var(--fs-5); line-height: 1; }
.results-screen .chest-label { font-size: var(--fs-2); }
.results-screen .chest-open { min-height: 40px; flex-direction: row; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3);
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid color-mix(in srgb, var(--gold) 45%, var(--border)); font-size: var(--fs-3); }
.results-screen .chest-open .muted { font-size: var(--fs-2); }
.results-screen .pet-grow { min-height: 72px; gap: var(--space-3); padding: var(--space-3); }
.results-screen .result-practice { padding: var(--space-4); }
.results-screen .result-practice .section-title { margin: 0; }
.results-screen .result-practice .section-title h2 { font-size: var(--fs-4); }
.results-screen .result-actions { gap: var(--space-2); }
.results-screen .result-actions .btn { min-height: 56px; padding: var(--space-3) var(--space-2); }
.weak-list { display: flex; flex-direction: column; gap: var(--space-2); }
/* Test Day: an occasion tile on Spell home, and a quiet results variant. */
.sp-testday-tile { display: flex; align-items: center; gap: var(--space-4); text-align: left; padding: var(--space-3) var(--space-4); width: 100%; }
.sp-testday-tile .ic { font-size: var(--fs-7); }
.sp-testday-copy { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.sp-testday-copy b { font-family: var(--font-display); font-size: var(--fs-4); }
.sp-testday-copy span { font-size: var(--fs-2); color: var(--text-dim); }
.sp-testday-go { font-size: var(--fs-6); color: var(--text-dim); }
.spell-home .sp-testday-tile { margin-top: var(--space-1); }
.results-screen--test .result-hero .muted b { color: var(--accent-2); }

/* Grouped learning results: rows say what to DO next, never a red wall. */
.rgroup { display: flex; flex-direction: column; gap: var(--space-2); }
.rgroup + .rgroup { margin-top: var(--space-4); }
.rgroup-h { font-size: var(--fs-2); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.rw { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border-radius: var(--r-sm); background: var(--surface); }
.rw-main { display: flex; align-items: center; gap: var(--space-3); }
.rw-word { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-4); overflow-wrap: anywhere; }
.rw-score { font-size: var(--fs-2); color: var(--text-dim); margin-left: auto; white-space: nowrap; }
.rw-actions { display: flex; gap: var(--space-2); flex-shrink: 0; }
.rw-chip { padding: var(--space-2) var(--space-3); }
.rw-meta { font-size: var(--fs-2); color: var(--text-dim); line-height: 1.45; }

.weak-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--r-sm); background: var(--surface); }
.weak-row .q { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-5); min-width: 84px; }
.weak-row .bar { flex: 1; height: 8px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.weak-row .bar > span { display: block; height: 100%; background: var(--bad); }

/* Normal-height phones trade decorative scale for a complete one-screen recap.
   Every spacing value remains on the 4px grid; Max phones keep the roomier base. */
@media (max-height: 880px) and (orientation: portrait) {
  body[data-screen="results"] #app,
  body[data-screen="spellresults"] #app,
  body[data-screen="transitiongame"]:has(.tr-results) #app { padding: calc(var(--space-2) + var(--safe-t)) var(--space-3) calc(var(--space-2) + var(--safe-b)); }
  .results-screen { gap: var(--space-3); }
  .result-hero { grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-2); padding: var(--space-2) var(--space-1); }
  .result-hero .emoji { font-size: var(--fs-7); }
  .result-hero h1 { font-size: var(--fs-6); }
  .result-grid { gap: var(--space-1); }
  .rstat { min-height: 68px; padding: var(--space-2) var(--space-1); }   /* spacing only: radius is the component's identity */
  .rstat .v { font-size: var(--fs-5); }
  .rstat .k { font-size: var(--fs-1); }
  .result-rewards .chip, .tmrw-hook .chip { gap: var(--space-1); padding: var(--space-2) var(--space-3); font-size: var(--fs-2); }
  .results-screen .chest { min-height: 40px; gap: var(--space-1); padding: var(--space-2) var(--space-3); }
  .results-screen .chest-open { min-height: 40px; gap: var(--space-1); padding: var(--space-2) var(--space-3); }
  .results-screen .pet-grow { min-height: 64px; padding: var(--space-2) var(--space-3); }
  .results-screen .result-practice { padding: var(--space-3); }
  .results-screen .weak-list { gap: var(--space-2); }
  .results-screen .weak-row { gap: var(--space-2); padding: var(--space-2); }
  .results-screen .weak-row .q { font-size: var(--fs-3); min-width: 72px; }
  .results-screen .rematch-btn { min-height: 48px; margin-top: var(--space-2); padding: var(--space-2); }
  .results-screen .result-actions .btn { min-height: 56px; padding: var(--space-2); }
  .results-screen .tmrw-hook { margin-top: 0; }
}

@media (max-height: 760px) and (orientation: portrait) {
  .results-screen { gap: var(--space-2); }
  .result-hero { padding: var(--space-1); }
  .result-hero .emoji { font-size: var(--fs-7); }
  .result-hero h1 { font-size: var(--fs-6); }
  .result-hero .muted { font-size: var(--fs-2); }
  .rstat { min-height: 56px; }
  .rstat .v { font-size: var(--fs-5); }
  .result-rewards .chip, .tmrw-hook .chip { padding: var(--space-1) var(--space-3); }
  .results-screen .chest, .results-screen .chest-open { min-height: 32px; padding: var(--space-1) var(--space-3); }
  .results-screen .pet-grow { min-height: 48px; padding: var(--space-1) var(--space-3); }
  .results-screen .result-practice { padding: var(--space-2); }
  .results-screen .weak-list { gap: var(--space-1); }
  .results-screen .weak-row { padding: var(--space-1) var(--space-2); }
  .results-screen .rematch-btn { min-height: 44px; }
  .results-screen .result-actions .btn { min-height: 48px; }
}

/* ---------------- Modal ---------------- */
.modal-back {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: rgba(4, 6, 18, 0.6); backdrop-filter: blur(6px);
  padding: calc(16px + var(--safe-t)) 20px calc(16px + var(--safe-b));
  animation: fade 0.25s;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: min(440px, 100%); max-height: 92dvh;
  max-height: calc(100dvh - var(--safe-t) - var(--safe-b) - 32px);
  overflow-y: auto;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 24px 24px 20px;
  box-shadow: var(--shadow); animation: modal-in 0.35s cubic-bezier(0.2,0.9,0.25,1.2) both;
}
/* iOS pans the visual viewport when a modal input opens the native keyboard.
   Re-anchor the backdrop to that visible rectangle so a scrolled form can
   never travel underneath the status bar, Dynamic Island or home indicator. */
body.kb-up .modal-back {
  inset: auto 0; top: var(--vvo, 0px); height: var(--vvh, 100dvh);
  padding: calc(8px + var(--safe-t)) 16px calc(8px + var(--safe-b));
  overflow: hidden; animation: none;
}
body.kb-up .modal {
  max-height: 100%; animation: none;
  scroll-padding-top: calc(8px + var(--safe-t));
  scroll-padding-bottom: calc(72px + var(--safe-b));
}
@keyframes modal-in { from { transform: translateY(30px) scale(0.96); opacity: 0; } }
.modal h2 { font-size: var(--fs-6); margin-bottom: 8px; }
.modal .sub { color: var(--text-dim); font-weight: 600; margin-bottom: 16px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 800; font-size: var(--fs-2); color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; }
.field input:not([type="checkbox"]):not([type="radio"]), .field select, .field textarea {
  width: 100%; padding: 16px 16px; border-radius: var(--r-sm); font-size: var(--fs-4); font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 9rem; line-height: 1.45; }
.field select {
  appearance: none;
  padding-inline-end: var(--space-12);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-dim) 50%),
    linear-gradient(135deg, var(--text-dim) 50%, transparent 50%);
  background-position:
    calc(100% - var(--space-5)) 50%,
    calc(100% - var(--space-3)) 50%;
  background-size: var(--space-2) var(--space-2);
  background-repeat: no-repeat;
}

/* Custom dropdown — matches the input style, replaces the native select. */
.dropdown { position: relative; }
.dropdown-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 16px 16px; border-radius: var(--r-sm); font-size: var(--fs-4); font-weight: 700;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text); cursor: pointer; text-align: left;
}
.dropdown-btn[aria-expanded="true"] { border-color: var(--accent); }
.dropdown-val.is-placeholder { color: var(--text-dim); font-weight: 600; }
.dropdown-chev { color: var(--text-dim); font-size: var(--fs-3); transition: transform 0.18s ease; }
.dropdown-btn[aria-expanded="true"] .dropdown-chev { transform: rotate(180deg); }
.dropdown-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 5;
  background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--shadow); padding: 4px; max-height: 240px; overflow-y: auto;
}
.dropdown-opt {
  width: 100%; text-align: left; padding: 12px 16px; border-radius: var(--r-sm); font-size: var(--fs-4); font-weight: 700;
  color: var(--text); cursor: pointer; background: transparent;
}
.dropdown-opt:hover { background: var(--surface-2); }
.dropdown-opt.sel { background: color-mix(in srgb, var(--accent) var(--wash-strong), transparent); color: var(--text); }

.picker { display: flex; flex-wrap: wrap; gap: 8px; }
/* Forced 6-column grid — tiles shrink to always fit six across, even on a narrow
   phone (avoids the 5/5/2 or 5/1 wrapping). Used for compact pickers. */
.grid6 { display: grid !important; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.grid6 .pick, .grid6 .swatch { width: 100%; height: auto; aspect-ratio: 1 / 1; }
/* Fluid 3-across: tiles stretch to share the row evenly, so column gutters
   match the row gap at every width (the fixed-86px + space-between version
   left ~55px column gutters against 6px row gaps on a 390px phone). */
.avatar-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.avatar-grid .pick { width: 100%; height: auto; aspect-ratio: 1 / 1; }
@media (min-width: 520px) { .avatar-grid { gap: 12px; } }
/* Guardian onboarding tiles include a written name as well as the art. They
   must grow to contain that caption; the generic square avatar rule otherwise
   leaves the caption hanging over the next row on narrow iPhones. */
#guardian-player-avatars { align-items: start; row-gap: 10px; }
#guardian-player-avatars .pick {
  aspect-ratio: auto; min-width: 0; min-height: 104px; height: auto;
  padding: 4px 4px 6px; display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
}
#guardian-player-avatars .pick small {
  display: block; width: 100%; margin-top: 2px; padding: 0 2px;
  font-size: var(--fs-2); font-weight: 700; line-height: 1.08;
  overflow-wrap: anywhere; text-align: center;
}
/* Pet creature picker: 3x2, bigger, fully inside the modal (images shrink to fit). */
/* 3 columns (9 pets = a tidy 3x3), but the egg art is maximised: a full-width
   SQUARE well makes each egg fill the whole cell width, with a compact centred
   caption below — the price never overlaps the art. */
.pet-grid3 { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pet-grid3 .pet-pick-btn { width: 100%; aspect-ratio: auto; height: auto; padding: 4px 4px 0; position: relative;
  display: flex; flex-direction: column; align-items: center; }
.pet-grid3 .pet-egg-well { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; }
.pet-grid3 .pet-pick-img { width: 100%; height: 100%; max-width: none; margin: 0; object-fit: contain; }
.pet-pick-btn .pet-tag { display: inline-flex; align-items: center; gap: 2px; line-height: 1;
  font-size: var(--fs-1); font-weight: 800; letter-spacing: 0.02em; padding: 4px 0 8px; white-space: nowrap; }
.pet-pick-btn .pet-tag.is-price { color: var(--gold-2); }
.pet-pick-btn .pet-tag.is-free, .pet-pick-btn .pet-tag.is-owned { color: var(--text-dim); }
.pet-pick-btn .pet-tag .uicon { width: 0.82em; }
.pet-pick-lock .uicon { width: 1em; }
.pet-pick-btn.is-unaffordable { cursor: not-allowed; border-color: color-mix(in srgb, var(--text-dim) 30%, transparent); box-shadow: none; }
/* Match the rest of the shop: only unavailable art recedes, while the lock and
   price remain crisp enough to explain what can be earned later. */
.pet-pick-btn.is-unaffordable .pet-egg-well { filter: grayscale(1) saturate(.12) brightness(.62); opacity: .7; }
/* Brand header on the profiles screen — stacked + centred (NOT the launcher .hero row). */
.brand-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-bottom: 16px; text-align: center; }
/* Sticky action footer — keeps Create/Cancel pinned to the modal bottom at ANY height,
   so they're never cut off no matter how tall the form gets or how short the window is. */
.modal-footer {
  position: sticky; bottom: 0; z-index: 2;
  margin: 0 -24px 0; padding: 12px 24px calc(16px + var(--safe-b));
  background: var(--bg-0); border-top: 1px solid var(--border);
  border-bottom-left-radius: var(--r-lg); border-bottom-right-radius: var(--r-lg);
}
/* A modal WITH a pinned footer drops its own bottom padding, so the footer sits
   flush with the modal edge — otherwise scrolling content peeks through the
   padding band beneath the footer (the "themes scroll past behind it" bug). */
.modal:has(.modal-footer) { padding-bottom: 0; }
/* the scrollable content clears the pinned footer + fades out beneath it */
.modal form, .modal { scroll-padding-bottom: 80px; }
/* Slimmer action buttons in the footer (the full-size .btn padding wasted space). */
.modal-footer .btn { padding-top: 12px; padding-bottom: 12px; }
.pick {
  width: 54px; height: 54px; display: grid; place-items: center; font-size: var(--fs-6);
  border-radius: var(--r-sm); background: var(--surface-2); border: 2px solid transparent;
}
.pick-avatar { width: 50px; height: 50px; object-fit: contain; display: block; }
/* Banded avatar tiles: show the full avatar (no crop) for review. */
.avatar-tile { width: 100%; height: 100%; border-radius: var(--r-sm); background-repeat: no-repeat;
  background-size: contain; background-position: center; display: block; }
/* "My photo" avatars: real photos are opaque rectangles (drawn avatars are
   transparent PNGs), so they always crop to a filled circle/rounded tile. */
.avatar-img--photo { object-fit: cover !important; border-radius: 50%; }
/* The camera sits in the card's art well beside full-bleed avatar art, so it
   scales to the well rather than to the caption under it. */
.uicon.u-photo { width: 2.6em; height: 2.6em; vertical-align: middle; }
.sw-well--av .shop-av--photo { inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.avatar-lock { text-align: center; line-height: 1; }
.avatar-lock-img { width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 6px 14px var(--glow)); }
.pick.sel { border-color: var(--accent); box-shadow: 0 0 0 3px var(--glow); }
.coach-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.coach-choice { position: relative; min-height: 76px; padding: 8px 8px; border-radius: var(--r-sm); display: flex; align-items: center;
  justify-content: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-display); font-size: var(--fs-2); font-weight: 700; }
.coach-choice.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.coach-choice:disabled { color: var(--text-dim); filter: grayscale(.65); cursor: default; }
.coach-choice-art { width: 46px; height: 46px; display: grid; place-items: center; flex: none; font-size: var(--fs-7); }
.coach-choice-avatar { width: 46px; height: 46px; object-fit: contain; border-radius: 50%; }
.coach-choice-art .pet-av { font-size: inherit; }
/* Me › My Coach: full-width row cards (the 2-up grid crammed art + wrapping
   labels into half-width cells on a phone). Scoped to .me-sub so any compact
   picker reuse elsewhere keeps the original grid. */
.me-sub .coach-picker { grid-template-columns: 1fr; }
.me-sub .coach-choice { justify-content: flex-start; text-align: left; min-height: 68px; padding: 8px 16px; gap: 12px; }
.me-sub .coach-choice-art { width: 52px; height: 52px; font-size: var(--fs-7); }
.coach-choice-lb { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.coach-choice-lb b { font-size: var(--fs-3); }
.coach-choice-lb small { color: var(--text-dim); font-size: var(--fs-2); font-weight: 600; }
/* Colour swatches in the create form (free starter themes). */
.theme-pick { background: linear-gradient(135deg, var(--sw), var(--sw2)); }
.theme-pick.sel { border-color: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--sw) 60%, transparent); }
.pick.locked { opacity: 0.5; position: relative; }

.theme-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); width: 100%; }
.swatch {
  border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; background: var(--bg-1);
  display: flex; flex-direction: column; position: relative; padding: 0; color: var(--text);
}
.swatch.sel { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.sw-select-tick { position: absolute; top: 6px; right: 7px; z-index: 3;
  display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%;
  color: var(--accent-ink); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 78%, #fff), var(--accent));
  font-size: var(--fs-2); font-weight: 900;
  box-shadow: 0 0 12px -2px color-mix(in srgb, var(--accent) 80%, transparent),
              0 1px 3px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5); }
.swatch.shop-focus { border-color: var(--accent); animation: shop-focus-pulse .72s ease-in-out 3; }
@keyframes shop-focus-pulse {
  50% { box-shadow: 0 0 0 3px var(--accent), 0 0 22px var(--glow); transform: translateY(-2px); }
}
/* The colour preview — the obvious part — fills the top of the tile. */
.sw-well { aspect-ratio: 1 / 0.82; display: grid; place-items: center;
  background:
    radial-gradient(circle at 24% 18%, color-mix(in srgb, var(--sw2) 72%, transparent), transparent 36%),
    linear-gradient(145deg, var(--sw), var(--swbg) 48%, var(--sw2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2); }
.theme-emoji { font-size: var(--fs-6); line-height: 1; filter: drop-shadow(0 3px 8px rgba(0,0,0,.4)); }
/* Avatar/effect wells: the theme gradient needs --sw vars these tiles don't set,
   and the raw 512px avatar PNG must not dictate the tile's height. */
.sw-well--av { position: relative; background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.sw-well--av .shop-av { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.sw-cap { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 4px 8px; }
.theme-name { font-weight: 800; font-size: var(--fs-1); line-height: 1.05; text-align: center; text-wrap: balance; }
.swatch .cost { font-size: var(--fs-1); font-weight: 800; white-space: nowrap; }
/* Locks remain outside the artwork well so their contrast is not altered by the
   affordability treatment applied to the art itself. */
.sw-lock { position: absolute; top: 6px; right: 7px; font-size: var(--fs-2); z-index: 2;
  display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%;
  background: rgba(6, 10, 20, .58); backdrop-filter: blur(3px); color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.45); }
.swatch .sw-well { position: relative; }
/* Armed = first tap landed; one more tap confirms the purchase (expires in 4s). */
.swatch.armed { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 14px -2px var(--gold-glow); }
.swatch.armed .cost.price { color: var(--gold); animation: flamepulse 0.9s ease-in-out infinite; }
.swatch .cost.price { color: var(--gold-2); }
.swatch .cost.on { color: var(--accent); }
.swatch .cost.use { color: var(--text-dim); }
.swatch .cost .uicon { width: 0.85em; }
.swatch.unaffordable {
  border-color: color-mix(in srgb, var(--text-dim) 30%, transparent);
  background: color-mix(in srgb, var(--bg-1) 88%, transparent);
  color: var(--text); cursor: not-allowed; box-shadow: none;
}
/* Colour communicates availability: an unaffordable item's ART recedes while
   its lock, name, price and exact shortfall stay crisp. The lock is a sibling of
   the filtered well so it never gets greyed with the artwork underneath. */
.swatch.unaffordable .sw-well { filter: grayscale(1) saturate(.12) brightness(.62); box-shadow: none; }
.swatch.unaffordable .theme-name { color: var(--text); }
.shop-shortfall {
  color: var(--text-dim); font-size: var(--fs-1); font-weight: 700;
  line-height: 1.05; white-space: nowrap;
}
.sw-well--effect { background: linear-gradient(180deg, var(--surface-2), var(--surface)); }
.sw-well--effect .theme-emoji { font-size: var(--fs-8); }
@media (max-width: 380px) { .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Shop */
.shop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.shop-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; color: var(--text); }
.shop-head h2 .uicon { color: var(--accent); filter: drop-shadow(0 0 7px var(--glow)); }
.shop-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tab { color: var(--text-dim); font-size: var(--fs-1); font-weight: 800; }
.tab--segment { flex: 1; padding: 8px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-1);
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.tab--segment.sel { background: var(--bg-0); color: var(--text); border-color: var(--accent); }
.uicon.u-shop-tab { width: clamp(14px, 4vw, 17px); height: clamp(14px, 4vw, 17px); vertical-align: middle; }
.shop-tab-body { min-height: 70px; }

.table-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.table-chips .chip {
  min-width: 48px; padding: 8px 12px; border-radius: var(--r-sm); font-family: var(--font-display);
  font-weight: 600; font-size: var(--fs-4); background: var(--surface-2); border: 1px solid var(--border);
  transition: background 0.15s;
}
.table-chips .chip.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }

.toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--border); }
.toggle-row:first-of-type { border-top: none; }
.toggle-row .lbl { font-weight: 700; }
.toggle-row .lbl small { display: block; color: var(--text-dim); font-weight: 600; font-size: var(--fs-2); }
.field .word-pack-assignment {
  display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3);
  margin-bottom: 0; color: var(--text); font-size: var(--fs-3); text-transform: none;
  letter-spacing: normal; cursor: pointer;
}
.word-pack-assignment .word-pack-player { position: absolute; width: 1px; height: 1px; opacity: 0; }
.word-pack-check {
  display: grid; place-items: center; flex: none; width: var(--space-6); height: var(--space-6);
  /* A checkbox needs to remain visibly square; the card-radius tokens would
     turn this 24px control into a circle. */
  color: transparent; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--r-xs);
  transition: color .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.word-pack-check::after { content: "✓"; font: 800 var(--fs-2) var(--font-display); }
.word-pack-player:checked + .word-pack-check {
  color: var(--accent-ink); background: var(--accent); border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 18%, transparent);
}
.word-pack-player:focus-visible + .word-pack-check { outline: 3px solid var(--accent-2); outline-offset: 2px; }
.switch { width: 56px; height: 32px; border-radius: var(--r-pill); background: var(--surface-2); position: relative; transition: background 0.2s; flex: none; border: 1px solid var(--border); }
.switch.on { background: var(--accent); }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 0.2s; box-shadow: 0 2px 6px rgba(0,0,0,0.4); }
.switch.on::after { transform: translateX(24px); }

/* level-up celebration card */
.levelup { text-align: center; padding-top: 24px; }
.levelup .big { font-size: var(--fs-8); animation: pop 0.5s; overflow: visible; }
/* Fixed size so the 160px art downscales (crisp), not upscaled by .big's font-size. */
.levelup .big .uicon { width: 92px; height: 92px; }
/* Quiet icons on bright primary buttons: dark silhouette to match the dark label. */
/* Only QUIET icons go dark on bright buttons (for contrast). Colourful rich/mode
   icons — coin, pet-feed — keep their colour. */
/* Quiet icons are currentColor silhouettes, so on a primary button they simply
   inherit --accent-ink. (This used to force brightness(0) to rescue cream line
   art that couldn't survive a bright background.) */
.btn:disabled { opacity: 1; pointer-events: none; color: var(--text-dim); filter: saturate(0.45); }
.feed-lbl { display: inline-flex; align-items: center; gap: 8px; }
.levelup h2 { font-size: var(--fs-7); margin: 8px 0; }
.levelup .lvlnum { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-8); color: var(--accent-2); }

/* ---------------- Toast ---------------- */
.toast {
  /* Anchored at the top so badge/level/challenge announcements never cover the
     keypad during timed rounds (it slides down into view). */
  position: fixed; left: 50%; top: calc(16px + var(--safe-t)); bottom: auto; transform: translate(-50%, -24px);
  z-index: 80; background: var(--bg-1); border: 1px solid var(--accent); color: var(--text);
  padding: 16px 24px; border-radius: var(--r-pill); font-weight: 800; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; max-width: 90vw; text-align: center; white-space: pre-line;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
/* During play the question owns the centre — dock celebration toasts in the top-right
   corner, compact, so they never sit over the equation/word (iPad landscape especially). */
body[data-screen="game"] .toast, body[data-screen="spellgame"] .toast {
  left: auto; right: 12px; top: calc(10px + var(--safe-t)); transform: translate(0, -24px);
  padding: 8px 16px; font-size: var(--fs-2); max-width: min(44vw, 320px);
}
body[data-screen="game"] .toast.show, body[data-screen="spellgame"] .toast.show { transform: translate(0, 0); }
.toast.has-ic { display: inline-flex; align-items: center; gap: 8px; }
.toast .toast-ic { display: inline-flex; flex: none; }
.toast .toast-egg-img { width: 2em; height: 2em; object-fit: contain; display: block; }

/* ---------------- Utility ---------------- */
.muted { color: var(--text-dim); }
.hidden { display: none !important; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }

/* ---------------- Responsive ---------------- */
@media (min-width: 760px) {
  .modes { grid-template-columns: repeat(2, 1fr); }
  .keypad { max-width: 460px; margin: 0 auto; width: 100%; }
}
/* ---------------- Landscape (iPad & phones on their side) ----------------
   Height is the scarce dimension: use the width instead of stacking a long
   scroll. Modals widen and their grids densify; the game screens compress so
   the whole play area fits one viewport. */
@media (orientation: landscape) and (max-height: 920px) {
  .modal { width: min(820px, 94%); }
  .modal:has(.guardian-wall-wrap) { width: min(900px, 96vw); max-height: 94dvh; }
  .guardian-wall-wrap { display: grid; grid-template-columns: minmax(180px, auto) minmax(220px, 1fr);
    grid-template-areas: "wall title" "wall copy" "wall action"; align-items: center; column-gap: 20px; }
  .guardian-wall-wrap > h2 { grid-area: title; }
  .guardian-wall-wrap > .sub { grid-area: copy; }
  .guardian-wall-wrap > .guardian-wall { grid-area: wall; width: auto; height: min(86dvh, 520px); max-width: 48vw; }
  .guardian-wall-wrap > .btn { grid-area: action; }
  .theme-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  /* Megas poster: ONE composed painting cut into 3x4 tiles — the stacking must
     never change or the picture falls apart. In landscape the whole poster
     scales down by height and the text/button sit BESIDE it (using the width).
     .modal prefix: the base rules are declared later and would win otherwise. */
  .modal .lg-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 24px; align-items: center; }
  .modal .lg-wrap .lg-poster { grid-column: 1; grid-row: 1 / 5; grid-template-columns: repeat(3, 1fr);
    height: min(66vh, 560px); aspect-ratio: 939 / 1672; width: auto; }
  .modal .lg-wrap h2 { grid-column: 2; grid-row: 1; align-self: end; }
  .modal .lg-wrap .sub { grid-column: 2; grid-row: 2; align-self: start; }
  .modal .lg-wrap .muted { grid-column: 2; grid-row: 3; }
  .modal .lg-wrap .btn { grid-column: 2; grid-row: 4; align-self: start; }
  .avatar-grid, .picker { justify-content: flex-start; }
  /* play screens: smaller hero elements, tighter rhythm */
  .game { gap: 8px; }
  .equation { font-size: clamp(2.4rem, 10vh, 4.2rem); }
  .coach { margin: 2px 2px 4px; }
  .coach-disc { width: min(96px, 20vh); }
  .key { padding: 8px 0; font-size: var(--fs-6); }
  .keypad { gap: 8px; }
  .sp-stage { gap: 8px; padding: 4px 0; }
  .sp-speak { width: 60px; height: 60px; font-size: var(--fs-6); }
  .feedback { min-height: 1.3em; }
}
/* Play screens track the VISUAL viewport (--vvh set from visualViewport in JS):
   when the iOS keyboard is up, the app column shrinks to the space actually
   visible instead of hiding the word/input behind the keyboard. */
body[data-screen="game"] #app, body[data-screen="spellgame"] #app {
  min-height: var(--vvh, 100dvh);
}
/* Keyboard up while spelling: GLUE the play screen to the visual viewport
   (fixed at --vvo/--vvh, tracking iOS's pan) and BOTTOM-ALIGN the content so
   the word, input and Check sit connected to the top of the keyboard — instead
   of Safari scroll-jumping the word off-screen and leaving dead bottom space. */
body.kb-up[data-screen="spellgame"] .coach { display: none; }
body.kb-up[data-screen="spellgame"] .screen.game {
  position: fixed; left: 0; right: 0; top: var(--vvo, 0px); height: var(--vvh, 100dvh);
  max-width: 880px; margin: 0 auto; padding: calc(8px + var(--safe-t)) 16px calc(8px + var(--safe-b));
  overflow: hidden; animation: none; z-index: 5; background: var(--bg-0);
}
body.kb-up[data-screen="spellgame"] .sp-stage { justify-content: flex-end; gap: 8px; padding: 0; }
body.kb-up[data-screen="spellgame"] .sp-speak { width: 48px; height: 48px; font-size: var(--fs-5); }
body.kb-up[data-screen="spellgame"] .sp-prompt { gap: 8px; }
body.kb-up[data-screen="spellgame"] .feedback { min-height: 1.2em; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.05ms !important; }
}

/* Custom UI icon: sized like the text it sits in so it drops in where an emoji
   glyph was. Larger contexts add a size class. (.ifx base lives in icon-fx.css) */
.uicon { width: 1.4em; height: 1.4em; vertical-align: -0.32em; flex: none; }
.uicon svg, .uicon img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* Emoji-glyph icons (e.g. fire) size by font, not box — they win over custom art. */
.uicon--emoji { width: auto !important; height: auto !important; font-size: 1.15em; line-height: 1; display: inline-block; vertical-align: -0.14em; }
.uicon.badge-locked { filter: grayscale(1) opacity(0.5); }
/* Emoji-rendered badges (spelling set) match the SVG badge footprint per context. */
.badge-emoji.u-badge { font-size: var(--fs-7); line-height: 2.4rem; }
.badge-emoji.u-hero { font-size: var(--fs-8); }
.uicon.u-lg { width: 1.5em; height: 1.5em; }
.uicon.u-xl { width: 2em; height: 2em; vertical-align: -0.4em; }
.uicon.u-hero { width: 2.6em; height: 2.6em; }
.uicon.u-nav { width: 22px; height: 22px; vertical-align: middle; }
/* Inline state marks (a locked reward, swatch or rung) sit in running text, so
   they track the local font-size the way the emoji they replaced did. */
.uicon.u-state { width: 1em; height: 1em; vertical-align: -0.12em; }
.uicon.u-tab { width: var(--icon-nav); height: var(--icon-nav); vertical-align: middle; }
.uicon.u-shop { width: var(--icon-header); height: var(--icon-header); vertical-align: middle; }
.uicon.u-shop-title { width: var(--icon-title); height: var(--icon-title); vertical-align: middle; }
.uicon.u-mode { width: 30px; height: 30px; vertical-align: middle; }


/* Pet hero — identity + growth + daily care in one card, the home centrepiece */
.pet-hero{padding: 16px;display:flex;flex-direction:column;gap: 16px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,var(--surface)),var(--surface))}
/* the identity row keeps .pet-card (avatar|text grid + hooks); the hero owns the wash, so
   strip the inner button's own chrome and background */
.pet-hero-top{border:0;background:none;padding: 0;color:inherit;font:inherit}
.pet-hero .pet-sub{font-size: var(--fs-2)}
/* the evolve bar was 7px — match the 12px care meters so the hero reads as one set */
.pet-hero .ch-bar{height:12px;box-shadow:inset 0 0 0 1px var(--border)}
.pet-hero .ch-bar > span{box-shadow:0 0 10px -2px var(--glow)}
/* Pet effects: pure CSS/code shop cosmetics, layered around the existing glyph.
   Particles orbit or drift OUTSIDE the face; auras glow behind. Zero art assets. */
.pet-fx { position: relative; }
.pet-fx--sparkle::after, .pet-fx--sparkle::before { content: "✨"; position: absolute; font-size: .32em; opacity: .9; }
.pet-fx--sparkle::after { top: 6%; right: 2%; } .pet-fx--sparkle::before { bottom: 10%; left: 0%; animation-delay: -1.7s; }
.pet-fx--hearts::after { content: "💗"; position: absolute; top: 10%; right: 8%; font-size: .3em; }
.pet-fx--bubbles::after, .pet-fx--bubbles::before { content: "🫧"; position: absolute; font-size: .26em; opacity: .85; }
.pet-fx--bubbles::before { left: 4%; bottom: 4%; animation-delay: -1.8s; } .pet-fx--bubbles::after { right: 6%; bottom: 8%; }
.pet-fx--stars::after { content: "🌟"; position: absolute; inset: -8%; font-size: .3em; display: flex; align-items: flex-start; justify-content: center; opacity: .8; }
.pet-fx--aura { filter: drop-shadow(0 0 18px rgba(255, 210, 100, .55)); }
.pet-fx--rainbow { filter: drop-shadow(0 0 18px rgba(160,140,255,.6)); }
@keyframes fxOrbit { 0%, 100% { transform: translateY(0); opacity: .7; } 50% { transform: translateY(-6px); opacity: 1; } }
@keyframes fxDriftUp { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }
@keyframes fxRotateRing { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes fxHueRotate { 0%, 100% { filter: drop-shadow(0 0 18px rgba(255,80,80,.6)); } 33% { filter: drop-shadow(0 0 18px rgba(80,255,140,.6)); } 66% { filter: drop-shadow(0 0 18px rgba(100,140,255,.6)); } }
@media (prefers-reduced-motion: reduce) {
  .pet-fx--sparkle::after, .pet-fx--sparkle::before, .pet-fx--hearts::after,
  .pet-fx--bubbles::after, .pet-fx--bubbles::before, .pet-fx--stars::after { animation: none; }
  .pet-fx--rainbow { animation: none; filter: drop-shadow(0 0 18px rgba(160,140,255,.6)); }
}

/* Mood: bonus-only visuals. Happy bobs; sleepy floats a zzz. The art itself is
   NEVER dimmed, desaturated or drooped — sleepy is the ceiling (per care spec). */
.pet-hero--happy .pet-img { animation: happyBob 3.2s ease-in-out infinite; }
@keyframes happyBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.pet-hero--sleepy .pet-glyph { position: relative; }
.pet-hero--sleepy .pet-glyph::after { content: "💤"; position: absolute; top: -4px; right: -8px; font-size: var(--fs-4); animation: sleepFloat 2.6s ease-in-out infinite; }
@keyframes sleepFloat { 0%, 100% { transform: translateY(0); opacity: 0.85; } 50% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pet-hero--happy .pet-img, .pet-hero--sleepy .pet-glyph::after { animation: none; } }
.pet-care{display:flex;flex-direction:column;gap: 8px;padding-top: 12px;border-top:1px solid var(--border)}
.care-copy{font-family:var(--font-display);font-weight:700;color:var(--text);font-size: var(--fs-3);text-align:center}
/* Each need is a column: its bar sits right above its button so they group contextually */
.care-grid{display:grid;grid-template-columns:1fr 1fr;gap: 8px}
.care-cell{display:flex;flex-direction:column;gap: 8px}
.care-row{display:grid;grid-template-columns:auto 1fr;align-items:center;gap: 8px;padding: 0 2px}
.care-ico{font-size: var(--fs-4);width:1.3rem;text-align:center;line-height:1;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
/* Meters match the evolve bar exactly: themed --surface-2 track + accent gradient fill */
.care-meter{height:12px;border-radius: var(--r-pill);background:var(--surface-2);overflow:hidden;box-shadow:inset 0 0 0 1px var(--border)}
.care-fill{display:block;height:100%;border-radius: var(--r-pill);background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 10px -2px var(--glow);transition:width .5s cubic-bezier(.4,0,.2,1)}
.care-meter.is-low .care-fill{filter:saturate(1.15)}
/* Toned-down button so the bar+button pair feels balanced (the bar carries the accent pop) */
.care-btn{width:100%;padding: 12px 16px;font-weight:700;color:var(--text);
  background:color-mix(in srgb,var(--accent) var(--wash-strong),var(--surface-2));
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);box-shadow:none}
.care-btn:hover{filter:brightness(1.08)}
@keyframes fxFed{0%{transform:scale(1)}40%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes fxPlay{0%{transform:rotate(0)}30%{transform:rotate(-2deg)}70%{transform:rotate(2deg)}100%{transform:rotate(0)}}
@keyframes fxWilt{0%{opacity:.72;filter:saturate(.7)}100%{opacity:1;filter:saturate(1)}}
.chip--care{background:color-mix(in srgb, var(--accent) var(--wash-med), transparent);border-color:color-mix(in srgb, var(--accent) 42%, transparent);color:var(--text)}
.pet-care-card.fx-fed{animation:fxFed .6s ease}.pet-care-card.fx-play{animation:fxPlay .6s ease}.pet-care-card.fx-wilt{animation:fxWilt .6s ease}

/* ---- Megas Squad: one painted movie-poster scene sliced into 3x4 tiles.
   Earned tiles show in full colour; the rest sit greyscale + faded so the poster
   visibly builds. Tile seams disappear as neighbours light up. ---- */
.modal:has(.lg-wrap) { width: min(560px, 100%); }
.lg-poster { position: relative; display: grid; grid-template-columns: repeat(3, 1fr);
  /* The painting is 939x1672 (3x4 tiles of 313x418). Lock the frame to that
     ratio with uniform rows so every slice sits exactly on its cell, and size
     the whole poster from the AVAILABLE HEIGHT (viewport minus header, caption
     and button, ~240px) so the modal never needs scrolling to reach the
     buttons — the portrait-iPad bug. Width still caps at the modal width. */
  aspect-ratio: 939 / 1672; grid-template-rows: repeat(4, 1fr);
  width: min(100%, calc((92vh - 240px) * 939 / 1672));
  width: min(100%, calc((92dvh - 240px) * 939 / 1672));
  margin: 0 auto;
  background: #10173a; border-radius: var(--r-sm); overflow: hidden;
  box-shadow: 0 10px 34px rgba(0, 0, 0, .45); }
.lg-cell { position: relative; overflow: hidden; }
.lg-tile { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Fallback cell for a future species with no poster tile yet: its Mega render. */
.lg-pet { display: block; width: 88%; margin: 6% auto; }
.lg-name { position: absolute; bottom: 5%; left: 50%; transform: translateX(-50%); z-index: 2;
  font-size: var(--fs-1); font-weight: 800; color: rgba(255, 233, 176, .85); background: rgba(14, 18, 44, .32);
  padding: 2px 8px; border-radius: var(--r-pill); border: 1px solid rgba(255, 214, 100, .2);
  text-shadow: 0 1px 4px rgba(0, 0, 0, .5);
  max-width: 88%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lg-cell.locked .lg-tile, .lg-cell.locked .lg-pet {
  filter: grayscale(1) brightness(.34) contrast(.78); opacity: .55;
  transition: filter .6s, opacity .6s; }
/* Joining ceremony: a fresh tile flares to full colour and settles. */
.lg-cell.lit.reveal .lg-tile, .lg-cell.lit.reveal .lg-pet {
  animation: lg-settle 1s ease-out .5s both; }
@keyframes lg-settle {
  from { filter: grayscale(1) brightness(.52); }
  55%  { filter: grayscale(0) brightness(1.8) saturate(1.3); }
  to   { filter: none; } }
.lg-poster.complete { box-shadow: 0 0 0 3px var(--gold-2), 0 10px 40px rgba(255, 215, 106, .35); }
.lg-count { opacity: .8; font-weight: 700; margin-left: 4px; }

/* --- Math quest expansion: choice tiles, place value, fractions --- */
.keypad.hidden, .mq-tiles.hidden { display: none; }
.mq-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px 16px 20px; max-width: 480px; margin: 0 auto; width: 100%; }
.mq-tile {
  font-family: var(--font-display); font-size: var(--fs-5); font-weight: 600;
  padding: 20px 8px; border-radius: var(--r-sm); color: var(--text);
  border: 2px solid var(--border); background: var(--surface);
  cursor: pointer; transition: transform 0.08s, border-color 0.15s, background 0.15s;
}
.mq-tile:active { transform: scale(.96); }
.mq-tile--right { border-color: var(--good, #2ce0c8); background: rgba(44, 224, 200, .18); }
.mq-tile--picked { border-color: #ff6fb3; background: rgba(255, 111, 179, .16); }
.equation.equation--prompt {
  font-size: var(--fs-5); font-family: inherit; font-weight: 600; letter-spacing: 0;
  display: flex; flex-direction: column; align-items: center; gap: 8px; line-height: 1.35;
}
.mq-instr { font-size: var(--fs-5); font-weight: 700; opacity: .92; }
.equation .mq-instr { font-family: var(--font-body, inherit); font-size: clamp(1.05rem, 4.5vw, 1.35rem); font-weight: 700; letter-spacing: 0; line-height: 1.3; margin-bottom: 8px; }
.equation .pv-ans { font-size: clamp(2rem, 9vw, 3rem); margin-top: 8px; }
.pv-cells { display: flex; gap: 8px; justify-content: center; margin: 8px 0 2px; }
.pv-cell {
  display: flex; flex-direction: column; align-items: center; min-width: 44px;
  padding: 8px 8px 4px; border-radius: var(--r-sm); background: var(--surface);
  border: 2px solid transparent;
}
.pv-cell b { font-size: clamp(1.4rem, 6vw, 2rem); line-height: 1; letter-spacing: 0; }
.pv-cell i { font-style: normal; font-size: var(--fs-1); opacity: .55; margin-top: 4px; letter-spacing: .04em; font-family: var(--font-body, inherit); }
.pv-hot { border-color: var(--gold); background: color-mix(in srgb, var(--gold) var(--wash-med), transparent); box-shadow: 0 0 14px color-mix(in srgb, var(--gold) 55%, transparent); }
.pv-expand { font-size: clamp(1.3rem, 5.5vw, 1.8rem); font-weight: 700; margin: 8px 0; letter-spacing: 0; }
.frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 8px; line-height: 1.05; }
.frac b { font-size: var(--fs-5); }
.frac i { width: 26px; height: 3px; border-radius: var(--r-pill); background: currentColor; opacity: .85; margin: 4px 0; }
.fracbar { display: grid; gap: 4px; width: min(240px, 70%); height: 18px; margin: 8px auto 2px; }
.fracbar span { border-radius: var(--r-xs); background: var(--surface-2); border: 1px solid var(--border); }
.fracbar span.on { background: var(--accent-2); border-color: var(--accent-2); opacity: .85; }
.frac-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; align-items: center; justify-items: center; margin-top: 8px; width: 100%; }
.frac-duo .fracbar { width: 90%; margin: 0; }

/* --- NAPLAN expansion: data charts, chance bags, measure shapes, grammar tiles --- */
.dd-chart { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 10px; margin: 4px auto 0; width: min(520px, calc(100vw - 32px)); text-align: left; }
.dd-title { font-family: var(--font-body, inherit); font-size: var(--fs-4); font-weight: 800; opacity: .8; letter-spacing: .02em; margin-bottom: 4px; text-align: center; }
.dd-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.dd-label { flex: none; font-family: var(--font-body, inherit); font-size: var(--fs-3); font-weight: 700; letter-spacing: 0; width: 94px; text-align: right; }
.dd-bar { display: flex; gap: 3px; flex-wrap: nowrap; min-width: 0; }
.dd-bar i { flex: none; width: 20px; height: 20px; border-radius: var(--r-xs); background: var(--accent-2); opacity: .85; }
.dd-bar[data-count="10"] i { width: 19px; height: 19px; }
.dd-bar[data-count="11"] i { width: 17px; height: 17px; }
.dd-bar[data-count="12"] i { width: 15.5px; height: 15.5px; }
.dd-row:nth-child(odd) .dd-bar i { background: var(--accent); }
/* Data charts need more horizontal detail, not a taller page. Stop the generic
   equation flex spacer growing, then reclaim height from the coach and keypad
   while keeping every number key comfortably above the 44px touch minimum.
   The coach owns the flexible top margin so it stays attached to the keypad;
   putting that margin on the keypad strands the coach beside the chart. */
body[data-screen="game"][data-question-skill="data"] .game { gap: 8px; }
body[data-screen="game"][data-question-skill="data"] #app {
  height: var(--vvh, 100dvh); min-height: 0; overflow: hidden;
}
body[data-screen="game"][data-question-skill="data"] .screen.game { min-height: 0; overflow: hidden; }
body[data-screen="game"][data-question-skill="data"] .equation-wrap { flex: 0 0 auto; padding: 0; }
body[data-screen="game"][data-question-skill="data"] .equation { width: 100%; }
body[data-screen="game"][data-question-skill="data"] .feedback { min-height: 20px; }
body[data-screen="game"][data-question-skill="data"] .coach { margin: auto 2px 0; }
body[data-screen="game"][data-question-skill="data"] .coach-disc { width: min(104px, 27vw); }
body[data-screen="game"][data-question-skill="data"] .coach-bubble { max-width: 58vw; padding: 8px 12px; font-size: var(--fs-2); }
body[data-screen="game"][data-question-skill="data"] .keypad { gap: 6px; margin-top: 0; }
body[data-screen="game"][data-question-skill="data"] .key { min-height: 56px; padding: 8px 0; font-size: var(--fs-6); }
/* On portrait phones every Math skill shares the same four-row custom keypad.
   Richer prompts (especially Measurement, Place Value and Fractions) otherwise
   make the document taller than the iPhone viewport and hide Delete/Check.
   Keep the whole play surface inside the visual viewport and spend height on
   the question, while retaining 56px keypad targets. Data Detective keeps its
   more specific chart rules above. */
@media (max-width: 600px) and (orientation: portrait) {
  body[data-screen="game"] #app {
    height: var(--vvh, 100dvh); min-height: 0; overflow: hidden;
  }
  body[data-screen="game"] .screen.game { min-height: 0; overflow: hidden; }
  body[data-screen="game"] .game { gap: 8px; }
  body[data-screen="game"] .equation-wrap { min-height: min-content; padding-block: 0; }
  body[data-screen="game"] .feedback { min-height: 20px; }
  body[data-screen="game"] .coach { margin: auto 2px 0; }
  body[data-screen="game"] .coach-disc { width: min(104px, 27vw); }
  body[data-screen="game"] .coach-bubble { max-width: 58vw; padding: 8px 12px; font-size: var(--fs-2); }
  body[data-screen="game"] .keypad { gap: 6px; margin-top: 0; }
  body[data-screen="game"] .key { min-height: 56px; padding: 8px 0; font-size: var(--fs-6); }
  body[data-screen="game"][data-question-skill="missing"] .equation {
    font-size: var(--fs-8); white-space: nowrap;
  }
}
@media (max-width: 360px) {
  .dd-chart { padding-inline: 6px; }
  .dd-label { width: 82px; font-size: var(--fs-2); }
  .dd-row { gap: 5px; }
  .dd-bar { gap: 2px; }
  .dd-bar i { width: 16px; height: 16px; }
  .dd-bar[data-count="11"] i { width: 15px; height: 15px; }
  .dd-bar[data-count="12"] i { width: 14px; height: 14px; }
}
/* Chance Lab marble bag — mq- namespace; .ch-* belongs to the Bonus Challenges card */
.mq-bag { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px 16px; margin: 8px auto 2px; width: min(400px, 90%); }
.mq-bagrow { font-size: var(--fs-6); letter-spacing: 6px; line-height: 1.5; text-align: center; }
.mq-rectwrap { position: relative; display: inline-block; margin: 12px auto 4px; padding: 0 40px 24px 0; }
.mq-rect { display: block; border: 3px solid var(--accent); border-radius: var(--r-xs); background: color-mix(in srgb, var(--accent-2) var(--wash-soft), transparent); }
.mq-rect-w { position: absolute; left: 0; right: 40px; bottom: 0; text-align: center; font-family: var(--font-body, inherit); font-size: var(--fs-3); font-weight: 800; letter-spacing: 0; }
.mq-rect-h { position: absolute; right: 0; top: 0; bottom: 26px; display: flex; align-items: center; font-family: var(--font-body, inherit); font-size: var(--fs-3); font-weight: 800; letter-spacing: 0; }
.sp-tiles--sent { grid-template-columns: 1fr; }
.sp-tiles--sent .sptile { font-size: var(--fs-3); text-align: left; line-height: 1.4; padding: 12px 16px; }

/* --- Transition Quest (Year 6 premium) --- */
.questtile--transition { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-2) var(--wash-med), transparent), color-mix(in srgb, var(--gold) var(--wash-soft), transparent)); }
.questtile--trlocked .qic-svg { filter: grayscale(1); }
.questtile--trlocked { opacity: .72; filter: saturate(.55); }
.tr-intro { display: flex; flex-direction: column; gap: 4px; }
.tr-stage { display: flex; flex-direction: column; gap: 16px; padding: 12px 16px; max-width: 560px; margin: 0 auto; width: 100%; flex: 1; justify-content: center; }
.tr-stage .mq-instr { font-size: var(--fs-5); text-align: center; }
.tr-tiles { display: grid; gap: 8px; }
.tr-tiles .sptile { text-align: left; line-height: 1.35; font-size: var(--fs-3); padding: 12px 16px; }
.tr-tiles--order .sptile.sel { opacity: .8; outline: 2px solid var(--accent-2); }
.tr-picknum { display: inline-grid; place-items: center; min-width: 22px; height: 22px; border-radius: var(--r-pill); margin-right: 8px; background: var(--surface-2); color: var(--accent-2); font-weight: 800; font-size: var(--fs-2); }
.tr-why { display: inline-block; font-size: var(--fs-3); line-height: 1.4; }
.tr-table { overflow: auto; border-radius: var(--r-sm); border: 1px solid var(--border); }
.tr-table table { width: 100%; border-collapse: collapse; }
.tr-table th, .tr-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); text-align: left; font-size: var(--fs-3); }
.tr-game .feedback { min-height: 44px; }
/* A cloze miss must teach, not just glow red (kid interview, Jul 2026). */
.sp-why { display: inline-block; font-size: var(--fs-3); line-height: 1.45; max-width: 34em; }

/* --- Launcher simplification (Jul 2026): mission first, meta recedes --- */
.ch-card > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.ch-card > summary::-webkit-details-marker { display: none; }
.ch-card:not([open]) { height: calc(var(--space-12) + var(--space-2) + 2px); padding-block: 0; overflow: hidden; } /* 56px grid-aligned summary + two 1px borders */
.ch-card:not([open]) > summary { min-height: 56px; }
.ch-sum { margin-left: auto; font-size: var(--fs-2); font-weight: 700; }
.ch-caret { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; margin-left: var(--space-1); color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-pill); transition: transform .18s; }
.ch-caret .uicon { width: 18px; height: 18px; }
.ch-card[open] .ch-caret { transform: rotate(180deg); }
.ch-card[open] > summary { margin-bottom: 8px; }
.pet-care--done { padding-top: 8px; padding-bottom: 8px; }
.care-done-line { color: var(--good); font-weight: 800; font-size: var(--fs-2); white-space: nowrap; }
/* One-time player setup card: QR stays private and the same card prints cleanly. */
.handoff-qr {
  display: flex;
  justify-content: center;
  margin: 16px 0;
}
.handoff-qr img {
  width: min(240px, 70vw);
  height: auto;
  padding: 8px;
  border-radius: var(--r-md);
  background: #fff;
}
.player-handoff-card input[readonly] { font-weight: 800; letter-spacing: .04em; }
.handoff-regenerate-link {
  display: block;
  margin: 12px auto 4px;
  padding: 8px;
  color: var(--text-dim);
  font-size: var(--fs-2);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.handoff-regenerate-link:hover,
.handoff-regenerate-link:focus-visible { color: var(--text); }
.onboarding-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}
.onboarding-brand .brand-mascot { margin: 0; }
.onboarding-brand--mascot { margin-bottom: 12px; }
.player-username-parts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto 64px;
  align-items: center;
  gap: 6px;
}
.player-username-parts > span { color: var(--text-dim); font-weight: 900; }
.field .player-username-parts select { min-width: 0; padding: 13px 8px; font-size: var(--fs-3); }
.player-username-number {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 49px;
  padding: 0 8px;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) var(--wash-med), var(--surface-2));
  color: var(--text);
  font-size: var(--fs-4);
  cursor: pointer;
}
.player-username-number b { font-size: var(--fs-4); }
.player-username-number span { color: var(--accent); font-size: var(--fs-5); }
.player-username-number:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 2px;
}
.player-username-number:disabled { color: var(--text-dim); filter: saturate(.45); }
.player-username-result {
  margin: 10px 0 6px;
  padding: 10px 12px;
  text-align: center;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--accent) var(--wash-soft), var(--surface));
}
.player-username-result small {
  display: block;
  color: var(--text-dim);
  font-size: var(--fs-2);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.player-username-result strong {
  display: block;
  margin-top: 2px;
  color: var(--accent);
  font-size: var(--fs-5);
  letter-spacing: .02em;
  overflow-wrap: anywhere;
}
.player-username-parts > select,
.player-username-parts > button { transform-origin: center bottom; }
#player-username-picker.is-settling .player-username-parts > :nth-child(1) { animation: username-slot-settle .34s ease-out both; }
#player-username-picker.is-settling .player-username-parts > :nth-child(3) { animation: username-slot-settle .34s ease-out .08s both; }
#player-username-picker.is-settling .player-username-parts > :nth-child(5) { animation: username-slot-settle .34s ease-out .16s both; }
.player-username-result.is-landed,
#player-username-picker.is-landed .player-username-result {
  box-shadow: var(--shadow-inset-ring), 0 0 18px -5px var(--glow);
}
@keyframes username-slot-settle {
  from { opacity: .55; transform: translateY(-8px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  #player-username-picker.is-settling .player-username-parts > * { animation: none; }
  #player-username-picker.is-landed .player-username-result { background: color-mix(in srgb, var(--accent) var(--wash-med), var(--surface)); }
}
@media (max-width: 350px) {
  .player-username-parts {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto 56px;
    gap: 3px;
  }
  .field .player-username-parts select { padding-inline: 5px; font-size: var(--fs-2); }
  .player-username-number { padding-inline: 5px; }
}
@media print {
  body > * { display: none !important; }
  .modal-back { display: block !important; position: static !important; background: #fff !important; }
  .modal-back > .modal {
    display: block !important;
    max-width: 640px !important;
    margin: 0 auto !important;
    background: #fff !important;
    box-shadow: none !important;
    color: #111 !important;
  }
  .player-handoff-card button { display: none !important; }
  .player-handoff-card input { background: #fff !important; border: 2px solid #111 !important; color: #111 !important; }
  .player-handoff-card .sub { color: #333 !important; }
}

/* Pinned Home/Rewards/Me tab bar (Task 1) */
.tabbar { position: fixed; inset: auto 0 0 0; z-index: 40; display: flex;
  padding: 8px 8px calc(8px + var(--safe-b)); border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-0) 80%, transparent); backdrop-filter: blur(10px); }
.tab--nav { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: none; border: 0; font-family: var(--font-body); }
.tab--nav.on { color: var(--accent); }
.tab--nav.on .uicon { filter: drop-shadow(0 0 8px var(--glow)); }
body.has-tabbar #app { padding-bottom: calc(76px + var(--safe-b)); }
@media (orientation: landscape) and (max-height: 560px) {
  .tabbar { --icon-nav: 24px; padding-top: 4px; padding-bottom: calc(4px + var(--safe-b)); }
  body.has-tabbar #app { padding-bottom: calc(68px + var(--safe-b)); }
}

/* ---------------- Me screen ---------------- */
.me-page { display: flex; flex-direction: column; min-height: 100%; }
.me-top { padding: 4px 0 2px; }
.me-id { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 8px 0 20px; }
.me-name { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-6); margin-top: 0; }
.me-signin-name { color: var(--text-dim); font-weight: 800; font-size: var(--fs-2); overflow-wrap: anywhere; }
.me-year { color: var(--accent-ink); font-weight: 700; font-size: var(--fs-2); }
.me-page-head .hero { min-width: 0; }
.me-edit-name { background: color-mix(in srgb, var(--accent) var(--wash-soft), transparent);
  border: 1px solid var(--border); border-radius: var(--r-pill);
  padding: 8px 16px; min-height: 44px; display: inline-flex; align-items: center; font-family: var(--font-body); font-weight: 800; font-size: var(--fs-2); color: var(--text-dim); }
.me-page-head .me-edit-name { flex: none; }
.me-doors { display: flex; flex-direction: column; gap: 8px; }
.me-door { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 96px;
  text-align: left; transition: transform .14s ease, border-color .2s ease; }
@media (hover: hover) and (pointer: fine) {
  .me-door:hover { transform: translateY(-3px); border-color: var(--accent); }
}
.me-door-ic { flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: color-mix(in srgb, var(--accent) var(--wash-soft), var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border)); }
.me-door-ic .uicon { width: 20px; height: 20px; }
/* Avatar/pet art inside a door icon slot: contain it, or a full-size sprite
   escapes the row and covers the doors below it (incl. Sign Out). */
.me-door-ic .me-door-av, .me-door-ic .avatar-img, .me-door-ic .avatar-emoji,
.me-door-ic .pet-av { width: 100%; height: 100%; object-fit: contain;
  display: grid; place-items: center; font-size: var(--fs-6); }
.me-door-lb { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.me-door-lb b { font-family: var(--font-display); font-size: var(--fs-4); font-weight: 600; }
.me-door-lb span { color: var(--text-dim); font-size: var(--fs-2); font-weight: 600; }
.me-chev { color: var(--accent); font-size: var(--fs-5); flex: none; }
.me-logout { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.me-logout-btn { background: none; border: 1.5px solid color-mix(in srgb, var(--bad) 55%, transparent); color: var(--bad); }
.me-guardian-note { color: var(--text-dim); font-size: var(--fs-2); text-align: center; }
@media (max-width: 430px) {
  .me-page-head .me-edit-name { padding-inline: 12px; }
  .reward-door { grid-template-columns: auto minmax(0, 1fr); }
  .reward-door-count { grid-column: 2; justify-self: start; }
  .trophy-page-head .hero-sub { display: none; }
  .trophy-page-head .hero { gap: 10px; }
}

/* Pet cosmetics belong with the pet they affect, not only behind the Shop modal. */
.pet-effects { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border); text-align: left; }
.pet-effects h3 { margin: 0 0 4px; font-size: var(--fs-4); }
.pet-effects > .muted { margin: 0 0 8px; font-size: var(--fs-2); }