/* ui.css — "Moruna" bright UI kit (see docs/art-bible.md). Opt-in via .mo-* classes; it
   does NOT restyle anything by itself and is independent of theme.css (the old dark kit).
   Look: cream paper panels, plum-ink outline with NOTCHED (pixel-rounded) corners made from
   four offset box-shadows, a chunky bottom ledge, pastel backdrops, rounded system font. */

:root {
  --mo-ink: #2b2140;       /* outline + body text on paper */
  --mo-ink-soft: #5a4b80;  /* secondary text (>=5.2:1 on the darkest meadow, was #6e5f93 = 3.9:1) */
  --mo-paper: #fff6df;     /* panel face */
  --mo-paper-2: #efe3cb;   /* panel shade / inset */
  --mo-sky: #bfe9ff;       /* page backdrop top */
  --mo-meadow: #a4e78f;    /* page backdrop bottom */
  --mo-px: 3px;            /* one UI "pixel" */
  --mo-font: ui-rounded, "SF Pro Rounded", "Nunito", "Baloo 2", "Segoe UI", system-ui, sans-serif;
  /* button accents: face / shade / text */
  /* white label on these faces is >= 4.5:1 (docs/ui-kit.md has the table); the old bright
     faces live on as --mo-go-bright etc. for non-text uses (dots, bars, sprites) */
  --mo-go: #2a8548;  --mo-go-d: #1d5c37;  --mo-go-bright: #4fb865;
  --mo-hot: #bf531b; --mo-hot-d: #8a3a10; --mo-hot-bright: #ff7a3d;
  --mo-sea: #2f6fd0; --mo-sea-d: #214d96; --mo-sea-bright: #4f9aee;
  --mo-gold: #ffd84a; --mo-gold-d: #e0a42a;
  /* type colours (badge face; badge text is ink except spark/stone which use white on a deeper face) */
  --t-ember: #ff7a3d; --t-tide: #4f9aee; --t-sprout: #4fb865; --t-spark: #8e4fb0;
  --t-frost: #6fd0ee; --t-stone: #6e5f93; --t-breeze: #9ad8c2; --t-glow: #f2c94c;

  /* tokens: tap target, spacing scale, minimum text size, display font */
  --mo-tap: 44px;
  --mo-s1: 4px; --mo-s2: 8px; --mo-s3: 12px; --mo-s4: 16px; --mo-s5: 24px; --mo-s6: 32px;
  --mo-fs-min: 12px;
  --mo-focus: #2b2140;
  --mo-font-display: "Galmuri11", "Galmuri", var(--mo-font);
  --mo-safe-t: env(safe-area-inset-top, 0px); --mo-safe-b: env(safe-area-inset-bottom, 0px);
  --mo-safe-l: env(safe-area-inset-left, 0px); --mo-safe-r: env(safe-area-inset-right, 0px);
}

/* Pixel display font: subset of Galmuri (OFL-1.1), see shared/fonts/README.md. Body text stays on system fonts. */
@font-face { font-family: "Galmuri11"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Galmuri11-subset.woff2") format("woff2"); }
@font-face { font-family: "Galmuri11"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("fonts/Galmuri11-Bold-subset.woff2") format("woff2"); }

.mo-sky {   /* page backdrop: sky into meadow, with a faint pixel check */
  background:
    linear-gradient(rgba(255,255,255,.18) 50%, transparent 50%) 0 0 / 12px 12px,
    linear-gradient(var(--mo-sky) 0, #e4f7d8 62%, var(--mo-meadow) 100%);
  font-family: var(--mo-font); color: var(--mo-ink);
}

.mo-pixelated, canvas.mo-sprite, img.mo-sprite { image-rendering: pixelated; image-rendering: crisp-edges; }

/* ---- Panel ---------------------------------------------------------------- */
.mo-panel {
  position: relative; margin: var(--mo-px) var(--mo-px) calc(var(--mo-px) * 2);
  padding: 14px 16px 16px; background: var(--mo-paper); color: var(--mo-ink);
  box-shadow:
    0 calc(var(--mo-px) * -1) 0 0 var(--mo-ink), calc(var(--mo-px) * -1) 0 0 0 var(--mo-ink),
    var(--mo-px) 0 0 0 var(--mo-ink), 0 calc(var(--mo-px) * 2) 0 0 var(--mo-ink),   /* outline + 2px-thick ledge */
    inset 0 var(--mo-px) 0 0 #fff, inset 0 calc(var(--mo-px) * -1) 0 0 var(--mo-paper-2);
}
.mo-panel.blue   { background: #e1f4ff; --mo-paper-2: #bfe3f7; }
.mo-panel.green  { background: #e9fbd9; --mo-paper-2: #c6ecaa; }
.mo-panel.sunny  { background: #fff3b8; --mo-paper-2: #ffe27a; }
.mo-title {   /* panel heading plate */
  display: inline-block; margin: -26px 0 10px -4px; padding: 3px 12px; font-weight: 900; font-size: 14px;
  letter-spacing: .02em; color: #fff; background: var(--mo-sea);
  box-shadow: 0 calc(var(--mo-px) * -1) 0 0 var(--mo-ink), calc(var(--mo-px) * -1) 0 0 0 var(--mo-ink),
    var(--mo-px) 0 0 0 var(--mo-ink), 0 var(--mo-px) 0 0 var(--mo-ink), inset 0 calc(var(--mo-px) * -1) 0 0 var(--mo-sea-d);
  text-shadow: 0 2px 0 var(--mo-sea-d);
}
.mo-h { margin: 0 0 6px; font-weight: 900; font-size: 18px; line-height: 1.15; }
.mo-p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--mo-ink-soft); font-weight: 600; }

/* ---- Button --------------------------------------------------------------- */
.mo-btn {
  font: inherit; font-family: var(--mo-font); font-weight: 900; font-size: 15px; letter-spacing: .02em;
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.28); cursor: pointer; border: 0;
  margin: var(--mo-px) var(--mo-px) calc(var(--mo-px) * 2); padding: 11px 20px; min-height: 44px;
  background: var(--mo-go); position: relative;
  box-shadow:
    0 calc(var(--mo-px) * -1) 0 0 var(--mo-ink), calc(var(--mo-px) * -1) 0 0 0 var(--mo-ink),
    var(--mo-px) 0 0 0 var(--mo-ink), 0 calc(var(--mo-px) * 2) 0 0 var(--mo-ink),
    inset 0 var(--mo-px) 0 0 rgba(255,255,255,.55), inset 0 calc(var(--mo-px) * -2) 0 0 var(--mo-go-d);
  transition: transform .05s;
}
.mo-btn.hot  { background: var(--mo-hot); box-shadow: 0 calc(var(--mo-px) * -1) 0 0 var(--mo-ink), calc(var(--mo-px) * -1) 0 0 0 var(--mo-ink), var(--mo-px) 0 0 0 var(--mo-ink), 0 calc(var(--mo-px) * 2) 0 0 var(--mo-ink), inset 0 var(--mo-px) 0 0 rgba(255,255,255,.55), inset 0 calc(var(--mo-px) * -2) 0 0 var(--mo-hot-d); }
.mo-btn.sea  { background: var(--mo-sea); box-shadow: 0 calc(var(--mo-px) * -1) 0 0 var(--mo-ink), calc(var(--mo-px) * -1) 0 0 0 var(--mo-ink), var(--mo-px) 0 0 0 var(--mo-ink), 0 calc(var(--mo-px) * 2) 0 0 var(--mo-ink), inset 0 var(--mo-px) 0 0 rgba(255,255,255,.55), inset 0 calc(var(--mo-px) * -2) 0 0 var(--mo-sea-d); }
.mo-btn.gold { background: var(--mo-gold); color: var(--mo-ink); text-shadow: 0 1px 0 rgba(255,255,255,.6); box-shadow: 0 calc(var(--mo-px) * -1) 0 0 var(--mo-ink), calc(var(--mo-px) * -1) 0 0 0 var(--mo-ink), var(--mo-px) 0 0 0 var(--mo-ink), 0 calc(var(--mo-px) * 2) 0 0 var(--mo-ink), inset 0 var(--mo-px) 0 0 rgba(255,255,255,.7), inset 0 calc(var(--mo-px) * -2) 0 0 var(--mo-gold-d); }
.mo-btn.ghost { background: var(--mo-paper); color: var(--mo-ink); text-shadow: none; box-shadow: 0 calc(var(--mo-px) * -1) 0 0 var(--mo-ink), calc(var(--mo-px) * -1) 0 0 0 var(--mo-ink), var(--mo-px) 0 0 0 var(--mo-ink), 0 calc(var(--mo-px) * 2) 0 0 var(--mo-ink), inset 0 calc(var(--mo-px) * -2) 0 0 var(--mo-paper-2); }
.mo-btn:active { transform: translateY(var(--mo-px)); }
.mo-btn:focus-visible, .mo-chip:focus-visible { outline: 3px dashed var(--mo-ink); outline-offset: 4px; }
.mo-btn[disabled] { filter: grayscale(.8) brightness(1.1); cursor: not-allowed; }

/* ---- Type badge (pair with a TYPE_ICONS canvas / <img class="mo-sprite"> if wanted) ---- */
.mo-badge {
  display: inline-flex; align-items: center; gap: 5px; margin: 2px; padding: 2px 9px 3px;
  font-weight: 900; font-size: 12px; letter-spacing: .03em; color: var(--mo-ink); line-height: 1.2;
  text-shadow: none; background: var(--t, #888);
  box-shadow: 0 -2px 0 0 var(--mo-ink), -2px 0 0 0 var(--mo-ink), 2px 0 0 0 var(--mo-ink), 0 2px 0 0 var(--mo-ink),
    inset 0 -3px 0 0 rgba(0,0,0,.18), inset 0 2px 0 0 rgba(255,255,255,.4);
}
.mo-badge img, .mo-badge canvas { width: 16px; height: 16px; image-rendering: pixelated; }
.mo-badge[data-type="ember"]  { --t: var(--t-ember); }
.mo-badge[data-type="tide"]   { --t: var(--t-tide); }
.mo-badge[data-type="sprout"] { --t: var(--t-sprout); }
.mo-badge[data-type="spark"]  { --t: var(--t-spark); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.mo-badge[data-type="frost"]  { --t: var(--t-frost); }
.mo-badge[data-type="stone"]  { --t: var(--t-stone); color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); }
.mo-badge[data-type="breeze"] { --t: var(--t-breeze); }
.mo-badge[data-type="unknown"] { --t: #9d92bd; }
.mo-badge[data-type="glow"]   { --t: var(--t-glow); }

.mo-chip {  /* small pill: counts, stars, levels */
  display: inline-block; margin: 2px; padding: 1px 8px 2px; font-weight: 900; font-size: 12px;
  background: #fff; color: var(--mo-ink);
  box-shadow: 0 -2px 0 0 var(--mo-ink), -2px 0 0 0 var(--mo-ink), 2px 0 0 0 var(--mo-ink), 0 2px 0 0 var(--mo-ink);
}

/* ---- Dex card: portrait window + number + name + badges + blurb ------------ */
.mo-dex { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; }
.mo-dex .no { font-weight: 900; font-size: 12px; letter-spacing: .08em; color: var(--mo-ink-soft); }
.mo-dex .portrait {
  grid-row: 1 / span 3; display: grid; place-items: center; width: 108px; height: 108px;
  background: radial-gradient(circle at 50% 70%, #fff 0 20%, transparent 21%) , linear-gradient(#d9f2ff, #bfe7a8);
  box-shadow: 0 -3px 0 0 var(--mo-ink), -3px 0 0 0 var(--mo-ink), 3px 0 0 0 var(--mo-ink), 0 3px 0 0 var(--mo-ink), inset 0 -4px 0 0 rgba(0,0,0,.1);
}
.mo-dex .portrait canvas { image-rendering: pixelated; }
.mo-dex .nm { font-weight: 900; font-size: 20px; line-height: 1.1; }
.mo-dex .nm small { display: block; font-size: 12px; color: var(--mo-ink-soft); font-weight: 800; letter-spacing: .03em; }
.mo-dex .blurb { grid-column: 1 / -1; margin: 4px 0 0; font-size: 13px; line-height: 1.45; font-weight: 600; color: var(--mo-ink-soft); }
.mo-dex.unknown .portrait { position: relative; }
.mo-dex.unknown .portrait canvas { filter: brightness(0) opacity(.3); }   /* not-yet-met silhouette */
.mo-dex.unknown .portrait::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: 56px; color: #fff; text-shadow: 0 3px 0 var(--mo-ink), 0 -3px 0 var(--mo-ink), 3px 0 0 var(--mo-ink), -3px 0 0 var(--mo-ink); }

/* ---- Meter (HP/xp style bar) ---------------------------------------------- */
.mo-bar { height: 14px; background: var(--mo-paper-2); box-shadow: 0 -2px 0 0 var(--mo-ink), -2px 0 0 0 var(--mo-ink), 2px 0 0 0 var(--mo-ink), 0 2px 0 0 var(--mo-ink); }
.mo-bar > i { display: block; height: 100%; width: var(--v, 50%); background: var(--mo-go); box-shadow: inset 0 3px 0 0 rgba(255,255,255,.45), inset 0 -3px 0 0 var(--mo-go-d); }
.mo-bar.hot > i { background: var(--mo-hot); box-shadow: inset 0 3px 0 0 rgba(255,255,255,.45), inset 0 -3px 0 0 var(--mo-hot-d); }

/* ---- Back-to-hub chip (shared/back.js sets the label) ------------------------ */
.mo-back {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  box-sizing: border-box; min-width: 44px; min-height: 44px; padding: 0 11px 0 9px;
  margin: 3px 3px 3px max(3px, env(safe-area-inset-left, 0px));
  font: 900 14px/1 var(--mo-font); color: var(--mo-ink); text-decoration: none; white-space: nowrap; cursor: pointer;
  background: var(--mo-paper); text-shadow: none; -webkit-user-select: none; user-select: none;
  box-shadow: 0 -2px 0 0 var(--mo-ink), -2px 0 0 0 var(--mo-ink), 2px 0 0 0 var(--mo-ink), 0 2px 0 0 var(--mo-ink),
    0 5px 0 0 var(--mo-ink), inset 0 3px 0 0 #fff, inset 0 -3px 0 0 var(--mo-paper-2);
  transition: transform .05s;
}
.mo-back::before {   /* pixel arrow */
  content: ""; width: 14px; height: 14px; flex: none; image-rendering: pixelated;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 7' shape-rendering='crispEdges' fill='%232b2140'%3E%3Cpath d='M3 0h1v1H3zM2 1h2v1H2zM1 2h3v1H1zM0 3h7v1H0zM1 4h3v1H1zM2 5h2v1H2zM3 6h1v1H3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mo-back:active { transform: translateY(3px); }
.mo-back:focus-visible { outline: 3px dashed var(--mo-ink); outline-offset: 4px; }

@media (max-width: 430px) { .mo-back { padding: 0 8px 0 7px; gap: 4px; font-size: 13px; } }

@media (prefers-reduced-motion: reduce) { .mo-btn, .mo-back { transition: none; } }

/* ======================================================================================
   UI kit v2 (additive; see docs/ui-kit.md). Everything below is opt-in via new classes,
   except the :lang(ko) line-breaking rule, the focus ring and the display-font swap.
   ====================================================================================== */

/* ---- Display font (Galmuri subset, falls back to the system rounded stack) --------- */
.mo-btn, .mo-title, .mo-h, .mo-dex .nm, .mo-display { font-family: var(--mo-font-display); }

/* ---- Korean: break at spaces, only split inside a word when it cannot fit ----------- */
:lang(ko) { word-break: keep-all; overflow-wrap: anywhere; }

/* ---- Pixel icons (shared/icons.js) ---------------------------------------------------- */
.mo-ico { display: inline-block; flex: none; vertical-align: middle; image-rendering: pixelated; image-rendering: crisp-edges; }
[data-icon] { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }

/* ---- Focus ring: one style for every control (set --mo-focus: #fff on dark pages) ----- */
.mo-dark { --mo-focus: #fff; }
:where(.mo-sky, .mo-dark, .mo-stage-frame) :where(a, button, [role="button"], [tabindex], input, select, summary, label):focus-visible,
.mo-btn:focus-visible, .mo-back:focus-visible, .mo-chip:focus-visible, .mo-iconbtn:focus-visible, .mo-cta:focus-visible {
  outline: 3px solid var(--mo-focus); outline-offset: 3px;
}

/* ---- Topbar: [back] [title ........] [actions]; no JS needed ---------------------------
   <header class="mo-topbar"><a class="mo-back" href="../">…</a><h1 class="mo-topbar-title">Name</h1>
     <div class="mo-topbar-actions"><button class="mo-iconbtn">…</button></div></header> */
.mo-topbar {
  display: grid; grid-template-columns: minmax(var(--mo-tap), auto) minmax(0, 1fr) auto; align-items: center; gap: var(--mo-s2);
  box-sizing: border-box; width: 100%; min-height: calc(var(--mo-tap) + var(--mo-s3));
  padding: calc(var(--mo-safe-t) + var(--mo-s1)) max(var(--mo-s2), var(--mo-safe-r)) var(--mo-s2) max(var(--mo-s2), var(--mo-safe-l));
  color: var(--mo-ink);
}
.mo-topbar.sticky { position: sticky; top: 0; z-index: 30; }
.mo-topbar > .mo-back { margin-left: 3px; }
.mo-topbar-title {
  margin: 0; min-width: 0; font: 900 16px/1.2 var(--mo-font-display); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mo-topbar.center .mo-topbar-title { text-align: center; }
.mo-topbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--mo-s2); }
@media (max-width: 340px) { .mo-topbar { gap: var(--mo-s1); } .mo-topbar-actions { gap: var(--mo-s1); } }

/* ---- Icon button: 44x44 minimum, paper face, notched outline --------------------------- */
.mo-iconbtn {
  display: inline-flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
  min-width: var(--mo-tap); min-height: var(--mo-tap); padding: 0; margin: 3px; cursor: pointer; border: 0;
  font: 900 14px/1 var(--mo-font-display); color: var(--mo-ink); background: var(--mo-paper); text-decoration: none;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform .05s;
  box-shadow: 0 -2px 0 0 var(--mo-ink), -2px 0 0 0 var(--mo-ink), 2px 0 0 0 var(--mo-ink), 0 2px 0 0 var(--mo-ink),
    0 5px 0 0 var(--mo-ink), inset 0 3px 0 0 #fff, inset 0 -3px 0 0 var(--mo-paper-2);
}
.mo-iconbtn:active { transform: translateY(3px); }
.mo-iconbtn[aria-pressed="true"], .mo-iconbtn.on { background: var(--mo-gold); box-shadow: 0 -2px 0 0 var(--mo-ink), -2px 0 0 0 var(--mo-ink), 2px 0 0 0 var(--mo-ink), 0 2px 0 0 var(--mo-ink), 0 5px 0 0 var(--mo-ink), inset 0 3px 0 0 rgba(255,255,255,.7), inset 0 -3px 0 0 var(--mo-gold-d); }
.mo-iconbtn[disabled] { background: var(--mo-paper-2); color: var(--mo-ink-soft); cursor: not-allowed; }
.mo-iconbtn[disabled] .mo-ico { filter: grayscale(1); }

/* ---- Bottom action sheet: safe-area aware, hide with [hidden] or .is-idle ------------- */
.mo-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--mo-s2);
  padding: var(--mo-s3) max(var(--mo-s3), var(--mo-safe-r)) calc(var(--mo-s3) + var(--mo-safe-b)) max(var(--mo-s3), var(--mo-safe-l));
  background: var(--mo-paper); color: var(--mo-ink); box-shadow: 0 -3px 0 0 var(--mo-ink), inset 0 3px 0 0 #fff;
  transition: transform .18s ease-out, visibility 0s linear 0s;
}
.mo-sheet[hidden] { display: none; }
.mo-sheet.is-idle { transform: translateY(110%); visibility: hidden; pointer-events: none; transition: transform .18s ease-in, visibility 0s linear .18s; }
.mo-sheet > .mo-btn { flex: 1 1 120px; max-width: 220px; }
@media (min-width: 700px) { .mo-sheet { left: 50%; right: auto; width: 560px; transform: translateX(-50%); }
  .mo-sheet.is-idle { transform: translate(-50%, 110%); } }

/* ---- Toast: a fixed lane BELOW the topbar so it never covers the play area ------------
   <div class="mo-toast-zone" aria-live="polite"><div class="mo-toast">Saved!</div></div>
   Override --mo-topbar-h if your topbar is taller than the default. */
:root { --mo-topbar-h: calc(var(--mo-tap) + var(--mo-s3)); }
.mo-toast-zone {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 60; width: max-content; max-width: min(92vw, 420px);
  top: calc(var(--mo-safe-t) + var(--mo-topbar-h) + var(--mo-s1)); display: flex; flex-direction: column; align-items: center; gap: var(--mo-s2); pointer-events: none;
}
.mo-toast {
  box-sizing: border-box; padding: var(--mo-s2) var(--mo-s4); font: 800 14px/1.35 var(--mo-font); color: var(--mo-ink); background: var(--mo-paper); text-align: center;
  box-shadow: 0 -3px 0 0 var(--mo-ink), -3px 0 0 0 var(--mo-ink), 3px 0 0 0 var(--mo-ink), 0 3px 0 0 var(--mo-ink), 0 6px 0 0 var(--mo-ink);
  animation: mo-toast-in .18s ease-out;
}
@keyframes mo-toast-in { from { transform: translateY(-8px); } to { transform: none; } }

/* ---- Locked: lock glyph + dashed border + hatch (never opacity-only) -------------------
   Add to a card/button; put a short reason in the card text ("Reach level 5"). */
.mo-locked {
  position: relative; color: var(--mo-ink-soft); cursor: not-allowed;
  background-image: repeating-linear-gradient(135deg, rgba(43,33,64,.07) 0 6px, transparent 6px 12px);
  outline: 2px dashed var(--mo-ink-soft); outline-offset: -6px;
}
.mo-locked::after {
  content: ""; position: absolute; top: 6px; right: 8px; width: 16px; height: 18px; image-rendering: pixelated;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 9' shape-rendering='crispEdges'%3E%3Cpath fill='%235a4b80' d='M2 0h4v1H2zM1 1h1v3H1zM6 1h1v3H6zM0 4h8v5H0z'/%3E%3Cpath fill='%23fff6df' d='M3 5h2v2H3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Stat chip: icon + value + label ------------------------------------------------------
   <span class="mo-stat"><span data-icon="flame"></span><b>12</b><small>streak</small></span> */
.mo-stat {
  display: inline-flex; align-items: center; gap: var(--mo-s1); margin: 2px; padding: 3px 10px 4px; box-sizing: border-box; min-height: 28px;
  font: 800 12px/1.2 var(--mo-font); color: var(--mo-ink); background: #fff; white-space: nowrap;
  box-shadow: 0 -2px 0 0 var(--mo-ink), -2px 0 0 0 var(--mo-ink), 2px 0 0 0 var(--mo-ink), 0 2px 0 0 var(--mo-ink), inset 0 -3px 0 0 var(--mo-paper-2);
}
.mo-stat b { font: 900 15px/1 var(--mo-font-display); }
.mo-stat small { font-size: var(--mo-fs-min); font-weight: 700; color: var(--mo-ink-soft); }

/* ---- CTA: the one primary action. Use WITH .mo-btn (any colour class) -------------------
   <button class="mo-btn mo-cta is-pulse" style="--p:40%">Start</button>
   --p = progress fill (0-100%); .is-pulse = first-run attention ring; [disabled]/.is-disabled = flat grey, label stays readable. */
.mo-cta { min-height: 56px; padding: 12px 28px; font-size: 18px; line-height: 1.2; background-image: linear-gradient(90deg, rgba(255,255,255,.28) var(--p, 0%), transparent var(--p, 0%)); }
.mo-cta.block { display: block; width: calc(100% - var(--mo-px) * 2); }
.mo-cta.is-pulse { animation: mo-cta-pulse 1.4s ease-in-out infinite; }
@keyframes mo-cta-pulse {
  0%, 100% { transform: none; outline: 3px solid transparent; outline-offset: 3px; }
  50% { transform: scale(1.04); outline: 3px solid var(--mo-gold); outline-offset: 5px; }
}
.mo-cta[disabled], .mo-cta.is-disabled { background-color: var(--mo-paper-2); color: var(--mo-ink-soft); text-shadow: none; filter: none; animation: none; cursor: not-allowed;
  box-shadow: 0 calc(var(--mo-px) * -1) 0 0 var(--mo-ink-soft), calc(var(--mo-px) * -1) 0 0 0 var(--mo-ink-soft), var(--mo-px) 0 0 0 var(--mo-ink-soft), 0 calc(var(--mo-px) * 2) 0 0 var(--mo-ink-soft); }

/* ---- Desktop frame: continue the sky->meadow gradient to the screen edges ----------------
   <html class="mo-sky"> + <body><div class="mo-stage-frame">…the 560px column…</div></body>
   Phones (< 700px) are unchanged: the frame is just a full-width block. */
html.mo-sky { min-height: 100%; background-attachment: fixed; background-color: var(--mo-meadow); }
html.mo-sky > body { background: transparent; }
.mo-stage-frame { box-sizing: border-box; width: 100%; margin: 0 auto; min-height: 100vh; min-height: 100dvh; position: relative; }
@media (min-width: 700px) {
  .mo-stage-frame { max-width: 560px; box-shadow: -3px 0 0 0 var(--mo-ink), 3px 0 0 0 var(--mo-ink), -12px 0 24px -12px rgba(43,33,64,.25), 12px 0 24px -12px rgba(43,33,64,.25); }
}

@media (prefers-reduced-motion: reduce) {
  .mo-iconbtn, .mo-sheet, .mo-toast { transition: none; animation: none; }
  .mo-cta.is-pulse { animation: none; outline: 3px solid var(--mo-gold); outline-offset: 4px; }  /* keep the cue, drop the motion */
}