/* Offset Remix: the design system. Tokens, type and building blocks for the children's app (loud) and the parents' app
   (calm, with .rx-calm on the body). Every screen is built from these blocks; anything new is added here first.
   The pattern sheet at /design/system shows each one with when to use it. */

/* ---------- tokens ---------- */
:root {
  --rx-violet: #6c3af2; --rx-violet-deep: #4b22c4; --rx-violet-text: #ddd2ff;
  --rx-lime: #c5ed42; --rx-lime-deep: #8fae22; --rx-on-lime: #171b2b;
  --rx-ink: #171b2b; --rx-ink-text: #ffffff; --rx-ink-muted: #c9cbe0;
  --rx-pink: #ff4d8d;
  --rx-paper: #f5f6f8; --rx-card: #ffffff; --rx-line: #e3e4ea; --rx-text: #171b2b; --rx-muted: #5f5a73; --rx-track: #eceef3;
  --rx-display: "Outfit", system-ui, sans-serif; --rx-body: "DM Sans", system-ui, sans-serif;
  --rx-r-lg: 26px; --rx-r: 20px; --rx-r-sm: 14px;
  --rx-press: 5px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --rx-violet-deep: #3d1ba6; --rx-paper: #0e1120; --rx-card: #181c2e; --rx-line: #2a2f45; --rx-text: #f1f0f7; --rx-muted: #a8a4bb; --rx-track: #2a2f45;
  --rx-ink: #232843; --rx-ink-muted: #b8b6d4;
} }
:root[data-theme="dark"] {
  --rx-violet-deep: #3d1ba6; --rx-paper: #0e1120; --rx-card: #181c2e; --rx-line: #2a2f45; --rx-text: #f1f0f7; --rx-muted: #a8a4bb; --rx-track: #2a2f45;
  --rx-ink: #232843; --rx-ink-muted: #b8b6d4;
}

/* ---------- type ---------- */
.rx-title { font: 900 3rem/0.95 var(--rx-display); letter-spacing: -0.035em; margin: 0; }
.rx-h { font: 900 1.35rem/1.1 var(--rx-display); letter-spacing: -0.02em; margin: 0; }
.rx-h2 { font: 900 1.9rem/1.02 var(--rx-display); letter-spacing: -0.03em; margin: 0; }
.rx-kicker { font: 800 .75rem/1.2 var(--rx-display); letter-spacing: .12em; text-transform: uppercase; }
.rx-body { font: 400 1rem/1.5 var(--rx-body); }
.rx-small { font: 500 .88rem/1.4 var(--rx-body); color: var(--rx-muted); }
/* The marker stroke: once per screen at most, on the words that matter. */
.rx-mark { position: relative; display: inline-block; padding: 0 .34em; margin: 0 .06em; z-index: 0; color: var(--rx-on-lime); }
.rx-mark::before { content: ""; position: absolute; left: 0; right: 0; top: 4%; bottom: -4%; background: var(--rx-lime); transform: rotate(-1.5deg) skewX(-11deg); border-radius: 6px; z-index: -1; }

/* ---------- the violet header: the top of every main screen ---------- */
.rx-head { background: var(--rx-violet); color: #fff; padding: 28px 24px 0; position: relative; overflow: hidden; isolation: isolate; }
.rx-head::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(circle at calc(100% + 6px) 112px, rgba(197,237,66,.22) 0 68px, transparent 69px), radial-gradient(circle at 6% 78%, rgba(255,255,255,.07) 0 96px, transparent 97px); }
.rx-head .rx-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rx-head .rx-kicker { color: var(--rx-violet-text); }
.rx-head > .rx-kicker { margin: 32px 0 0; }
.rx-head .rx-title { margin: 12px 0 10px; color: inherit; }
.rx-head.short > .rx-title:nth-child(2) { margin-top: 30px; }
.rx-head p { color: var(--rx-violet-text); margin: 0; }
.rx-head .rx-char { width: 180px; margin: 4px 0 0 auto; color: #fff; }
.rx-head.short { padding-bottom: 34px; }
.rx-wm { display: block; height: 30px; width: auto; overflow: visible; }

/* ---------- chips: pocket money and the streak ---------- */
.rx-chips { display: flex; gap: 6px; }
.rx-chip { display: inline-flex; align-items: center; gap: 4px; font: 800 .95rem var(--rx-display); padding: 7px 12px; border-radius: 999px; border: 0; }
.rx-chip.coin { background: var(--rx-lime); color: var(--rx-on-lime); box-shadow: 0 3px 0 var(--rx-lime-deep); }
.rx-chip.streak { background: rgba(255,255,255,.16); color: #fff; }
.rx-calm .rx-chip.streak, .rx-chip.streak.on-paper { background: var(--rx-card); color: #e8590c; box-shadow: 0 0 0 2px var(--rx-line); }

/* ---------- buttons: one main action per screen ---------- */
.rx-btn { display: block; width: 100%; appearance: none; border: 0; border-bottom: var(--rx-press) solid var(--rx-lime-deep); background: var(--rx-lime); color: var(--rx-on-lime);
  font: 900 1.2rem var(--rx-display); letter-spacing: -0.01em; padding: 15px 18px; border-radius: 18px; min-height: 58px; cursor: pointer; text-align: center; -webkit-tap-highlight-color: transparent; }
.rx-btn:active { transform: translateY(3px); border-bottom-width: 2px; margin-bottom: 3px; }
.rx-btn.second { background: var(--rx-card); color: var(--rx-text); border: 2px solid var(--rx-line); border-bottom-width: var(--rx-press); font-weight: 800; font-size: 1.05rem; }
.rx-btn.inline { display: inline-block; width: auto; padding: 11px 18px; min-height: 48px; font-size: 1rem; }
.rx-link { appearance: none; background: none; border: 0; padding: 8px 0; font: 700 1rem var(--rx-display); color: var(--rx-violet); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
:root[data-theme="dark"] .rx-link { color: #a98bff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rx-link { color: #a98bff; } }

/* ---------- the action card: the one thing to do now ---------- */
.rx-action { background: var(--rx-ink); color: var(--rx-ink-text); border-radius: var(--rx-r-lg); padding: 26px 24px 24px; position: relative; }
.rx-action .rx-kicker { color: var(--rx-lime); }
.rx-action .rx-h2 { margin: 18px 0 14px; color: inherit; line-height: 1.12; }
.rx-action p { margin: 0 0 24px; color: var(--rx-ink-muted); line-height: 1.5; }
.rx-action > .rx-kicker { margin: 0; min-height: 1.2em; }
.rx-action > .rx-sticker + .rx-kicker { margin-top: 6px; }
.rx-action .rx-mark { color: var(--rx-on-lime); }

/* ---------- stickers: urgency only (a test or quiz soon) ---------- */
.rx-sticker { display: inline-block; background: var(--rx-pink); color: #fff; font: 800 .78rem var(--rx-display); padding: 6px 10px; border-radius: 8px; transform: rotate(5deg); white-space: nowrap; }
.rx-action > .rx-sticker { position: absolute; right: 18px; top: -14px; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.rx-sticker.white { background: #fff; color: #171b2b; transform: rotate(-3deg); }
.rx-calm .rx-sticker { transform: none; }

/* ---------- countdown cards: what's coming up ---------- */
.rx-row { display: flex; gap: 12px; overflow-x: auto; margin: 0 -16px; padding: 0 16px 4px; scrollbar-width: none; scroll-snap-type: x mandatory; }
.rx-row::-webkit-scrollbar { display: none; }
.rx-count { flex: 0 0 172px; scroll-snap-align: start; background: var(--rx-card); border: 2px solid var(--rx-line); border-bottom-width: var(--rx-press); border-radius: var(--rx-r); padding: 18px 16px 16px; color: var(--rx-text); }
.rx-count .n { font: 900 2.6rem/1 var(--rx-display); letter-spacing: -0.04em; }
.rx-count .n small { font-size: 1rem; letter-spacing: 0; margin-left: 4px; color: var(--rx-muted); }
.rx-count .rx-kicker { margin-top: 8px; display: block; }
.rx-count .t { font-size: .92rem; line-height: 1.3; margin-top: 2px; }
.rx-count { position: relative; display: flex; flex-direction: column; }
.rx-count .rx-go { margin-top: auto; padding-top: 14px; white-space: nowrap; font: 800 .9rem var(--rx-display); color: var(--rx-violet); }
.rx-count.near .n { color: var(--rx-violet); }
.rx-count > .rx-sticker { position: absolute; right: 12px; top: 12px; }
:root[data-theme="dark"] .rx-count .rx-go, :root[data-theme="dark"] .rx-count.near .n { color: #a98bff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .rx-count .rx-go, :root:not([data-theme="light"]) .rx-count.near .n { color: #a98bff; } }

/* ---------- subjects and topics ---------- */
.rx-subject { background: var(--rx-card); border-radius: 24px; border: 2px solid var(--rx-line); overflow: hidden; }
.rx-subject .head { padding: 14px 18px; font: 900 1.15rem var(--rx-display); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.rx-topic { width: 100%; appearance: none; background: none; border: 0; border-top: 2px solid var(--rx-line); padding: 16px 18px; display: flex; gap: 12px; align-items: center; color: var(--rx-text); text-align: left; cursor: pointer; }
.rx-subject .head + .rx-topic { border-top: 0; }
.rx-topic .nm { flex: 1; font: 700 1rem/1.25 var(--rx-display); }
.rx-meter { width: 70px; height: 12px; border-radius: 99px; background: var(--rx-track); overflow: hidden; flex: none; }
.rx-meter i { display: block; height: 100%; background: var(--rx-violet); border-radius: 99px; }
.rx-meter.wide { width: 100%; }
.rx-pct { font: 800 .85rem var(--rx-display); width: 38px; text-align: right; flex: none; }

/* ---------- the week strip ---------- */
.rx-panel { background: var(--rx-card); border: 2px solid var(--rx-line); border-radius: var(--rx-r); padding: 16px 14px; color: var(--rx-text); }
.rx-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.rx-week div { text-align: center; font: 700 .75rem var(--rx-display); color: var(--rx-muted); }
.rx-week b { display: grid; place-items: center; margin: 4px auto 0; width: 34px; height: 34px; border-radius: 50%; font-size: .8rem; border: 2px dashed var(--rx-line); }
.rx-week .done b { background: var(--rx-violet); border: 0; color: #fff; }
.rx-week .today b { border: 3px solid var(--rx-violet); color: var(--rx-violet); }

/* ---------- the tab bar ---------- */
.rx-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 8px 8px calc(10px + env(safe-area-inset-bottom)); background: var(--rx-card); border-top: 2px solid var(--rx-line); }
.rx-tabs button, .rx-tabs span { appearance: none; border: 0; background: none; text-align: center; font: 700 .9rem var(--rx-display); padding: 12px 2px; border-radius: 14px; color: var(--rx-muted); min-height: 48px; }
.rx-tabs [aria-current="page"], .rx-tabs .on { background: var(--rx-violet); color: #fff; }

/* ---------- calm mode: the parents' app ---------- */
.rx-calm .rx-head { background: var(--rx-paper); color: var(--rx-text); }
.rx-calm .rx-head::before { display: none; }
.rx-calm .rx-head .rx-kicker, .rx-calm .rx-head p { color: var(--rx-muted); }
.rx-calm .rx-title { font-size: 2.1rem; font-weight: 800; color: var(--rx-text); }
.rx-calm .rx-h2 { font-size: 1.5rem; font-weight: 800; }
.rx-calm .rx-action { background: var(--rx-card); color: var(--rx-text); border: 2px solid var(--rx-line); }
.rx-calm .rx-action .rx-kicker { color: var(--rx-violet); }
.rx-calm .rx-action p { color: var(--rx-muted); }
.rx-calm .rx-action .rx-h2 { color: var(--rx-text); }

@media (prefers-reduced-motion: reduce) { .rx-btn:active { transform: none; } }

/* ---------- in the children's app (app.html): Today and Topics are Remix screens ---------- */
body.rx-page .wrap > header.top { display: none; }
body.rx-page .wrap { padding-top: 0 !important; padding-inline: 20px; }
body.rx-page #view.stack { gap: 32px; }
body.rx-page .rx-row { margin: 0 -20px; padding: 0 20px 4px; scroll-padding-left: 20px; }
#view > .rx-head { margin: 0 -20px; padding-top: calc(28px + env(safe-area-inset-top)); }
@media (min-width: 721px) { #view > .rx-head { border-radius: 0 0 28px 28px; } }
.rx-section { display: flex; flex-direction: column; gap: 14px; }
.rx-links { display: flex; flex-wrap: wrap; gap: 0 18px; margin-top: 8px; }
.rx-action .rx-link { color: var(--rx-lime); }
.rx-calm .rx-action .rx-link { color: var(--rx-violet); }
button.rx-count { text-align: left; font: inherit; cursor: pointer; display: flex; flex-direction: column; -webkit-tap-highlight-color: transparent; }
.rx-topic .nm .sub { display: block; font-family: var(--rx-body); font-weight: 500; margin-top: 3px; }
/* The character lives in the header on Today: ground line in white, its violet arc lightened so it shows on violet. */
.rx-head .stagewrap { position: relative; margin-top: 22px; min-height: 130px; }
.rx-head .buddy { --ink: #ffffff; --violet: #a98bff; max-width: 210px; margin: 0 0 0 auto; }
.rx-head .speech { left: 0; right: auto; top: 4px; max-width: 50%; padding: 10px 14px; background: #fff; color: #171b2b; border: 0; border-radius: 16px 16px 4px 16px; font-weight: 600; }
/* The week strip, in the system's colours */
.rx-panel .week .day b { border: 2px dashed var(--rx-line); background: transparent; color: var(--rx-muted); }
.rx-panel .week .day.done b { background: var(--rx-violet); border: 0; color: #fff; }
.rx-panel .week .day.now b { border: 3px solid var(--rx-violet); color: var(--rx-violet); }
.rx-panel .week .day.now.done b { color: #fff; box-shadow: 0 0 0 3px var(--rx-paper), 0 0 0 5px var(--rx-violet); }
/* The tab bar, everywhere: the current place is violet */
.tabs button[aria-current="page"] { background: var(--rx-violet) !important; color: #fff !important; }

/* ---------- inner screens: a topic, a test ---------- */
.rx-back { appearance: none; border: 0; background: rgba(255,255,255,.16); color: #fff; font: 800 .95rem var(--rx-display); padding: 9px 14px; border-radius: 999px; min-height: 40px; cursor: pointer; }
.rx-calm .rx-back { background: var(--rx-card); color: var(--rx-text); box-shadow: 0 0 0 2px var(--rx-line); }
.rx-title.sm { font-size: 2.05rem; line-height: 1.02; }
.rx-head.inner > .rx-kicker { margin-top: 26px; }
.rx-head.inner .rx-sticker { margin-top: 4px; align-self: flex-start; }
.rx-ready { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; color: var(--rx-violet-text); font: 600 .9rem var(--rx-body); }
.rx-head .rx-meter { background: rgba(255,255,255,.22); height: 10px; }
.rx-head .rx-meter i { background: var(--rx-lime); }
/* Learn, Cards, Quiz, Ask: one chunky segmented control */
.rx-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--rx-card); border: 2px solid var(--rx-line); border-radius: 18px; padding: 5px; }
.rx-seg button { appearance: none; border: 0; background: none; border-radius: 13px; min-height: 46px; font: 800 1rem var(--rx-display); color: var(--rx-muted); cursor: pointer; }
.rx-seg button[aria-pressed="true"] { background: var(--rx-violet); color: #fff; }
.rx-panel.prose p { margin: 0 0 10px; line-height: 1.55; } .rx-panel.prose p:last-child { margin-bottom: 0; }
.rx-panel .linklist { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 8px; }
a.rx-link { display: inline-block; }
/* The older blocks inside a Remix screen (lesson, cards, quiz, chat) take the system's look until each is rebuilt */
body.rx-page .panel { background: var(--rx-card); border: 2px solid var(--rx-line); border-radius: var(--rx-r); padding: 20px; }
body.rx-page .panel h2 { font: 900 1.25rem var(--rx-display); letter-spacing: -0.02em; }
body.rx-page .btn:not(.quiet):not(.ghost) { border-radius: 16px; border: 0; border-bottom: 4px solid var(--rx-lime-deep); font-family: var(--rx-display); font-weight: 900; }
body.rx-page .btn.quiet { border-radius: 16px; border: 2px solid var(--rx-line); border-bottom-width: 4px; font-family: var(--rx-display); font-weight: 800; background: var(--rx-card); }
body.rx-page .btn.ghost { font-family: var(--rx-display); font-weight: 800; color: var(--rx-violet); }
/* The two-shade progress bar: light for learning, solid for secure */
.rx-meter.two { position: relative; }
.rx-meter.two i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; }
.rx-meter.two i.lrn { background: color-mix(in srgb, var(--rx-violet) 32%, transparent); }
.rx-meter.two i.sec { background: var(--rx-violet); }
.rx-head .rx-meter.two i.lrn { background: rgba(197,237,66,.45); }
.rx-head .rx-meter.two i.sec { background: var(--rx-lime); }

/* ---------- the rest of the children's app ---------- */
/* The bite runs full screen: no header, just the bar */
body.rx-play #view > .bitebar { margin-top: calc(14px + env(safe-area-inset-top)); }
.bitebar .closebtn { width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--rx-line); border-bottom-width: 4px; background: var(--rx-card); color: var(--rx-text); font: 900 1.1rem var(--rx-display); }
.bitebar .progress { height: 14px; background: var(--rx-track); }
.bitebar .progress i { background: var(--rx-violet); }
/* The finish: three tiles */
.rx-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rx-tile { background: var(--rx-card); border: 2px solid var(--rx-line); border-bottom-width: 5px; border-radius: 18px; padding: 14px 10px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.rx-tile b { font: 900 1.6rem/1 var(--rx-display); color: var(--rx-text); letter-spacing: -0.02em; }
.rx-tile span { font: 600 .8rem/1.2 var(--rx-body); color: var(--rx-muted); }
/* Coming up: one list of rows, each a button to its page */
.rx-task { width: 100%; appearance: none; background: none; border: 0; border-top: 2px solid var(--rx-line); padding: 14px 16px; display: flex; gap: 14px; align-items: center; color: var(--rx-text); text-align: left; cursor: pointer; }
.rx-tasks .rx-task:first-child { border-top: 0; }
.rx-task .nm { flex: 1; font: 700 1rem/1.25 var(--rx-display); }
.rx-task .nm .sub { display: flex; align-items: center; gap: 6px; font-family: var(--rx-body); font-weight: 500; margin-top: 4px; }
.rx-task .dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.rx-task .chev { font: 900 1.4rem var(--rx-display); color: var(--rx-muted); }
.rx-task .rx-sticker { flex: none; }
.rx-date { flex: none; width: 50px; text-align: center; border-radius: 14px; padding: 6px 0; background: var(--rx-track); color: var(--rx-text); display: flex; flex-direction: column; }
.rx-date small { font: 800 .7rem var(--rx-display); text-transform: uppercase; letter-spacing: .08em; color: var(--rx-muted); }
.rx-date b { font: 900 1.35rem/1.1 var(--rx-display); }
.rx-date.soon { background: var(--rx-violet); color: #fff; } .rx-date.soon small { color: var(--rx-violet-text); }
/* Coach */
.rx-coachchar { width: 130px; margin: 6px 0 0 auto; }
.rx-coachchar .buddy { --ink: #fff; --violet: #a98bff; max-width: 120px; }
.rx-head { position: relative; }
.rx-field { display: flex; flex-direction: column; gap: 8px; }
.rx-field select { font: 700 1rem var(--rx-display); color: var(--rx-text); background: var(--rx-card); border: 2px solid var(--rx-line); border-bottom-width: 4px; border-radius: 16px; padding: 12px 14px; min-height: 52px; }
body.rx-page .composer textarea { border: 2px solid var(--rx-line); border-radius: 16px; background: var(--rx-card); color: var(--rx-text); }
body.rx-page .msg { border-radius: 18px; }
body.rx-page .msg.coach { background: var(--rx-card); border: 2px solid var(--rx-line); }
body.rx-page .msg.you { background: var(--rx-violet); color: #fff; }
/* The PIN screen */
body.rx-page .pinpanel { max-width: none; margin: 0; background: var(--rx-card); border: 2px solid var(--rx-line); border-radius: var(--rx-r-lg); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
body.rx-page .pinpanel .rx-kicker { color: var(--rx-muted); }
body.rx-page .pinbox { border: 2px solid var(--rx-line); border-bottom-width: 4px; border-radius: 18px; background: var(--rx-paper); color: var(--rx-text); font: 900 2rem var(--rx-display); letter-spacing: .4em; padding: 14px; min-height: 64px; }
body.rx-page .pinbox:focus { outline: 3px solid var(--rx-violet); outline-offset: 2px; }
.rx-head.short:has(.rx-coachchar) { padding-bottom: 0; }
.rx-head > .rx-bar + .rx-title { margin-top: 30px; }
/* Safari colours the area behind its address bar (and the bounce above the page) from the page's background colour, so on
   screens with the violet header the page's colour is violet (a gradient alone has no colour, and Safari fell back to paper),
   with paper painted over the lower half for the bounce at the bottom. */
@media (max-width: 720px) {
  html:has(body.rx-page:not(.rx-play)) { background: var(--rx-violet) linear-gradient(to bottom, var(--rx-violet) 0 50%, var(--rx-paper) 50% 100%) fixed; }
  body.rx-page:not(.rx-play) { background: transparent; }
  body.rx-page:not(.rx-play) .wrap { background: var(--rx-paper); min-height: 100vh; }
}
/* Topics: the collapsed earlier topics, and term headings */
button.rx-earlier { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; cursor: pointer; font: inherit; color: var(--rx-text); border-bottom-width: 5px; }
button.rx-earlier b { display: block; font: 800 1.05rem var(--rx-display); }
button.rx-earlier .sub { display: block; margin-top: 3px; }
button.rx-earlier .chev { font: 900 1.2rem var(--rx-display); color: var(--rx-violet); }
.rx-term { color: var(--rx-violet); margin: 0; }

/* ======================================================================================================
   Calm skin: the parents' app, joining, privacy and admin (body class "rx-skin rx-calm").
   The same blocks, quieter: paper header with the wordmark, smaller titles, chunky cards and buttons.
   ====================================================================================================== */
body.rx-skin { background: var(--rx-paper); color: var(--rx-text); }
body.rx-skin .wrap { padding-inline: 20px; }
body.rx-skin header.top { padding-top: calc(10px + env(safe-area-inset-top)); }
body.rx-skin .brand .wordmark { height: 32px; width: auto; }
body.rx-skin h1 { font: 800 2.1rem/1.05 var(--rx-display); letter-spacing: -0.02em; }
body.rx-skin h2 { font: 900 1.3rem/1.15 var(--rx-display); letter-spacing: -0.015em; }
body.rx-skin h3 { font: 800 1.08rem/1.2 var(--rx-display); }
body.rx-skin .label { font: 800 .75rem var(--rx-display); letter-spacing: .12em; color: var(--rx-violet); }
body.rx-skin .panel { background: var(--rx-card); border: 2px solid var(--rx-line); border-radius: var(--rx-r); padding: 20px; box-shadow: none; }
body.rx-skin .btn:not(.quiet):not(.ghost) { border-radius: 16px; border: 0; border-bottom: 4px solid var(--rx-lime-deep); font-family: var(--rx-display); font-weight: 900; }
body.rx-skin .btn.quiet { border-radius: 16px; border: 2px solid var(--rx-line); border-bottom-width: 4px; background: var(--rx-card); color: var(--rx-text); font-family: var(--rx-display); font-weight: 800; }
body.rx-skin .btn.ghost { font-family: var(--rx-display); font-weight: 800; color: var(--rx-violet); }
body.rx-skin .btn:not(:disabled):active { transform: translateY(2px); }
body.rx-skin input[type=text], body.rx-skin input[type=email], body.rx-skin input[type=password], body.rx-skin input[type=number], body.rx-skin select, body.rx-skin textarea, body.rx-skin .pinbox {
  border: 2px solid var(--rx-line); border-bottom-width: 4px; border-radius: 14px; background: var(--rx-card); color: var(--rx-text); font: 600 1rem var(--rx-body); padding: 12px 14px; min-height: 50px; }
body.rx-skin input:focus, body.rx-skin select:focus, body.rx-skin textarea:focus { outline: 3px solid var(--rx-violet); outline-offset: 1px; }
body.rx-skin .note { border-radius: 14px; }
body.rx-skin .kids button { background: var(--rx-card) !important; border: 2px solid var(--rx-line) !important; border-bottom-width: 4px !important; font-family: var(--rx-display); font-weight: 800; }
body.rx-skin .tiles .tile { background: var(--rx-card); border: 2px solid var(--rx-line); border-bottom-width: 5px; border-radius: 18px; padding: 14px; }
body.rx-skin .tvalue { font: 900 1.5rem var(--rx-display); letter-spacing: -0.02em; }
body.rx-skin .meter i { background: var(--rx-violet); }
body.rx-skin .testcard { border: 2px solid var(--rx-line); border-radius: 18px; background: var(--rx-card); }
body.rx-skin .pinpanel { max-width: 420px; border-radius: var(--rx-r-lg); padding: 24px; }
body.rx-skin .pinpanel .buddy { max-width: 180px; }

/* ======================================================================================================
   The welcome page in full Remix (body class "guide rx-guide").
   ====================================================================================================== */
body.rx-guide { background: var(--rx-paper); }
body.rx-guide .wrap { padding-inline: 20px; }
body.rx-guide .lede { font-size: 1.15rem; line-height: 1.55; color: var(--rx-text); }
body.rx-guide h2 { font: 900 2rem/1.02 var(--rx-display); letter-spacing: -0.03em; margin: 0 0 16px; }
body.rx-guide h3 { font: 900 1.2rem var(--rx-display); letter-spacing: -0.015em; }
body.rx-guide .perks { gap: 14px; }
body.rx-guide .perks article { background: var(--rx-card); border: 2px solid var(--rx-line); border-bottom-width: 5px; border-radius: 22px; padding: 18px; }
body.rx-guide .perks h3 { font-size: 1.1rem; }
body.rx-guide .ico { width: 42px; height: 42px; border-radius: 14px; font: 900 1.05rem var(--rx-display); background: var(--rx-violet); color: #fff; }
body.rx-guide .setup { background: var(--rx-card); border: 2px solid var(--rx-line); border-radius: 26px; padding: 26px 22px; }
body.rx-guide .who { background: var(--rx-violet); color: #fff; font: 800 .7rem var(--rx-display); letter-spacing: .1em; border-radius: 999px; padding: 5px 10px; }
body.rx-guide .howto.big li { margin: 6px 0; }
body.rx-guide .howto.big li::marker { font-weight: 900; color: var(--rx-violet); }
body.rx-guide .keepsync { background: var(--rx-violet-soft, #eeeafe); border: 0; border-radius: 20px; padding: 18px 20px; }
:root[data-theme="dark"] body.rx-guide .keepsync { background: #2a2350; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.rx-guide .keepsync { background: #2a2350; } }
body.rx-guide .homescreen > div { border-radius: 18px; padding: 16px; }
body.rx-guide .soon a { background: var(--rx-ink); border-radius: 26px; padding: 26px 24px; }
body.rx-guide .soon .soonkick { background: var(--rx-lime); color: var(--rx-ink); }
body.rx-guide .soon b { font-size: 1.9rem; letter-spacing: -0.03em; }
body.rx-skin .phead h1 { font-size: clamp(1.4rem, 7.8vw, 2.1rem); white-space: nowrap; }

/* The child report in the parents' app: each section a clear block, rows as small cards. */
body.rx-skin .panel.report { gap: 0; padding: 22px 18px; }
body.rx-skin .report > .sechead { margin-bottom: 16px; }
body.rx-skin .report > .tiles { margin-bottom: 18px; }
body.rx-skin .report > .stack { gap: 12px; border-top: 2px dashed var(--rx-line); padding-top: 22px; margin-top: 24px; }
body.rx-skin .report > .stack > h3 { font: 900 1.2rem/1.15 var(--rx-display); letter-spacing: -0.015em; margin: 0; }
body.rx-skin .report .chart { margin-top: 4px; }
/* Homework: a date chip, then the task. */
body.rx-skin .duelist { gap: 8px; }
body.rx-skin .duelist li { grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; background: var(--rx-paper); border-radius: 14px; padding: 12px 14px; line-height: 1.4; }
body.rx-skin .duewhen { font: 800 .82rem var(--rx-display); color: var(--rx-violet); background: var(--rx-card); border: 2px solid var(--rx-line); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
body.rx-skin .duewhen.hot { color: #fff; background: var(--rx-pink); border-color: var(--rx-pink); }
/* Tests: chunky card, title, when, a thicker bar, and the source note set apart. */
body.rx-skin .testcards { gap: 12px; }
body.rx-skin .testcard { gap: 10px; padding: 16px 16px 14px; border-bottom-width: 5px; }
body.rx-skin .testhead b { font: 800 1.08rem/1.25 var(--rx-display); }
body.rx-skin .testcard .meter.wide { height: 12px; border-radius: 999px; margin-top: 4px; }
body.rx-skin .testcard .meter.wide i { border-radius: 999px; }
body.rx-skin .testcard .srcnote { border-top: 1px solid var(--rx-line); padding-top: 10px; margin-top: 2px; font-size: .84rem; }
body.rx-skin .status { font: 800 .82rem var(--rx-display); background: var(--rx-paper); border-radius: 999px; padding: 4px 10px 4px 4px; }
/* Topics to help with: subject, topic, and why, as small cards. */
body.rx-skin ul.spots { gap: 8px; }
body.rx-skin ul.spots li { display: flex; flex-direction: column; gap: 3px; background: var(--rx-paper); border-radius: 14px; padding: 12px 14px; }
body.rx-skin ul.spots .rx-kicker { color: var(--rx-violet); font-size: .7rem; }
body.rx-skin ul.spots b { font: 800 1rem/1.3 var(--rx-display); }
/* Coach conversations: rows as cards. */
body.rx-skin .report .list { display: flex; flex-direction: column; gap: 8px; border: 0; background: none; }
body.rx-skin .report .chatrow { background: var(--rx-paper); border: 0; border-radius: 14px; padding: 12px 14px; }
body.rx-skin .report .ititle { font: 800 1rem/1.3 var(--rx-display); }
body.rx-skin .report ul.duelist, body.rx-skin .report ul.spots { margin: 0; padding: 0; }
body.rx-skin .testhead { flex-direction: column-reverse; align-items: flex-start; gap: 8px; }
/* Pocket money: weeks as a ledger; tap a week to see what earned it. */
body.rx-skin .weeks { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
body.rx-skin .payweek { background: var(--rx-paper); border-radius: 14px; padding: 4px 12px 4px 4px; }
body.rx-skin .wr-line { display: flex; align-items: center; gap: 10px; min-height: 48px; }
body.rx-skin .wr-tap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; appearance: none; background: none; border: 0; padding: 10px; font: inherit; color: var(--rx-text); text-align: left; cursor: pointer; }
body.rx-skin .wr-tap:disabled { cursor: default; }
body.rx-skin .wr-label { flex: 1; min-width: 0; font-size: .95rem; }
body.rx-skin .wr-tap b { font: 900 1.05rem var(--rx-display); }
body.rx-skin .wr-tap .chev { color: var(--rx-violet); font-size: .8rem; width: 12px; }
body.rx-skin .wr-paid { font: 800 .82rem var(--rx-display); color: #2f7d4f; white-space: nowrap; }
body.rx-skin .payweek .payrates { margin: 0 0 10px; padding: 0 10px 0 14px; }
body.rx-skin .payweek .payrates { padding: 0 6px 0 10px; font-size: .88rem; }
body.rx-skin .wr-tap .chev { font-size: 1rem; }

/* Admin: each family card in clear blocks, like the parents' report. */
body.rx-skin .panel.fam { display: flex; flex-direction: column; gap: 0; padding: 22px 18px; }
body.rx-skin .fam > .sechead { margin-bottom: 16px; }
body.rx-skin .fam > .note { margin-top: 14px; }
body.rx-skin .fam > .activity, body.rx-skin .fam > .integrity, body.rx-skin .fam > .claude, body.rx-skin .fam > .settings {
  display: flex; flex-direction: column; gap: 12px; border-top: 2px dashed var(--rx-line); padding-top: 22px; margin-top: 24px; }
body.rx-skin .fam h3 { font: 900 1.2rem/1.15 var(--rx-display); letter-spacing: -0.015em; margin: 0; }
body.rx-skin .fam p.small { margin: 0; line-height: 1.5; }
body.rx-skin .people { display: flex; flex-direction: column; gap: 10px; }
body.rx-skin .person { background: var(--rx-paper); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }
body.rx-skin .phead2 { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
body.rx-skin .phead2 b { font: 900 1.05rem var(--rx-display); }
body.rx-skin .pstats { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
body.rx-skin .pstat { background: var(--rx-card); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.rx-skin .pstat .plabel { font: 700 .72rem var(--rx-body); color: var(--rx-muted); }
body.rx-skin .pstat b { font: 900 1.15rem var(--rx-display); }
body.rx-skin .pstat.warn b { color: var(--rx-pink); }
body.rx-skin .ledger { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
body.rx-skin .ledger li { display: flex; justify-content: space-between; gap: 10px; background: var(--rx-paper); border-radius: 14px; padding: 12px 14px; }
body.rx-skin .ledger b { font: 900 1.05rem var(--rx-display); }
body.rx-skin .kinds { display: flex; flex-wrap: wrap; gap: 6px; }
body.rx-skin .kind { font-size: .85rem; border: 2px solid var(--rx-line); border-radius: 999px; padding: 4px 10px; }
body.rx-skin .fam .settings .actions { align-items: center; gap: 8px; }
body.rx-skin .pstats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.rx-skin .btn.quiet.danger { color: #d6336c; }

/* ---------- Label it: the map game (public/js/play.js) ---------- */
.lg { display: flex; flex-direction: column; gap: 10px; }
.lg-hud { display: flex; align-items: center; gap: 8px; font: 700 .9rem var(--rx-display); }
.lg-chip { padding: 4px 10px; border-radius: 999px; background: var(--rx-card); border: 1px solid var(--rx-line); white-space: nowrap; color: var(--rx-text); }
.lg-chip[hidden] { display: none; }
.lg-combo { background: #ffedd5; color: #b45309; border-color: #fdba74; }
.lg-bar { flex: 1; height: 12px; border-radius: 6px; background: var(--rx-track); overflow: hidden; }
.lg-bar b { display: block; height: 100%; width: 0; background: var(--rx-lime); border-radius: 6px; transition: width .35s cubic-bezier(.2,.9,.3,1.3); }
.lg-card, .lg-preview { background: #171b2b; border-radius: var(--rx-r); overflow: hidden; position: relative; touch-action: manipulation; }
.lg-loading { color: #c9cbe0; padding: 60px 18px; text-align: center; font-size: .95rem; }
svg.lg-map { display: block; width: 100%; height: auto; }
.lg-sea { fill: #20263d; } .lg-grat { fill: none; stroke: #2c3352; stroke-width: 1.2; }
.lg-land { fill: #5b4bb5; } .lg-edge { stroke: #8f7fe0; stroke-width: 1.4; stroke-linejoin: round; } .lg-context { fill: #2e2a52; }
.lg-dot { fill: rgba(197,237,66,.25); stroke: var(--rx-lime); stroke-width: 3; stroke-dasharray: 6 5; }
.lg-target { cursor: pointer; outline: none; }
.lg-target:focus-visible .lg-ring { stroke-width: 7; }
.lg-ring { fill: rgba(197,237,66,.12); stroke: var(--rx-lime); stroke-width: 4; stroke-dasharray: 7 6; transform-box: fill-box; transform-origin: center; animation: lg-breathe 1.8s ease-in-out infinite; }
.lg-hint .lg-ring { stroke-width: 7; stroke-dasharray: none; animation: lg-hint .6s ease-in-out infinite; }
.lg-flash .lg-ring { stroke: var(--rx-pink); fill: rgba(255,77,141,.35); animation: none; }
.lg-done .lg-ring { fill: var(--rx-lime); stroke: #fff; stroke-dasharray: none; stroke-width: 3; animation: lg-land .45s ease-out; }
.lg-lbl { font-family: var(--rx-display); font-weight: 800; fill: #fff; paint-order: stroke; stroke: #171b2b; stroke-width: 6px; stroke-linejoin: round; opacity: 0; transition: opacity .3s; pointer-events: none; }
.lg-done .lg-lbl { opacity: 1; }
@keyframes lg-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.18); } }
@keyframes lg-hint { 0%,100% { transform: scale(1); } 50% { transform: scale(1.45); } }
@keyframes lg-land { 0% { transform: scale(2.2); } 60% { transform: scale(.85); } 100% { transform: scale(1); } }
.lg-fact { min-height: 2.9em; margin: 0 2px; font-size: .95rem; line-height: 1.4; color: var(--rx-muted); }
.lg-fact b { color: var(--rx-text); }
.lg-fact.lg-new { animation: lg-rise .35s ease-out; }
@keyframes lg-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* The names stay pinned to the bottom of the screen, like a hand of cards, so they and the map are both in view. */
.lg-hand { position: sticky; bottom: 0; z-index: 5; background: var(--rx-paper); margin: 0 -16px; padding: 10px 16px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--rx-line); box-shadow: 0 -8px 16px -12px rgba(0,0,0,.25); }
.lg-tray { display: flex; flex-wrap: wrap; gap: 7px; }
.lg-tray:empty { display: none; }
.lg-tag { appearance: none; border: 2px solid var(--rx-line); border-bottom-width: 5px; background: var(--rx-card); color: var(--rx-text); border-radius: 13px; padding: 8px 12px 6px; font: 700 .95rem var(--rx-display); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; min-height: 44px; transition: transform .1s, border-color .15s, background .15s; }
.lg-tag:active { transform: translateY(3px); border-bottom-width: 2px; margin-top: 3px; }
.lg-tag.lg-sel { border-color: var(--rx-violet); background: #eeeafe; color: #171b2b; transform: translateY(-3px); }
.lg-tag.lg-shake { animation: lg-shake .4s; border-color: var(--rx-pink); color: #d6336c; }
.lg-tag.lg-ghost { opacity: .35; }
.lg-tag.lg-dragging { position: fixed; z-index: 30; pointer-events: none; transform: scale(1.08) rotate(-3deg); box-shadow: 0 12px 28px rgba(0,0,0,.25); }
@keyframes lg-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
.lg-howto { font-size: .78rem; color: var(--rx-muted); margin: 6px 2px 0; }
.lg-float { position: fixed; z-index: 25; font: 800 1.2rem var(--rx-display); color: var(--rx-lime-deep); pointer-events: none; animation: lg-up .9s ease-out forwards; }
@keyframes lg-up { from { opacity: 1; transform: translateY(0) scale(.9); } to { opacity: 0; transform: translateY(-46px) scale(1.15); } }
.lg-toast { position: fixed; left: 50%; top: 18%; transform: translate(-50%, 0) scale(.6); opacity: 0; z-index: 26; font: 900 1.9rem var(--rx-display); color: #fff; background: var(--rx-violet); border-bottom: 5px solid var(--rx-violet-deep); padding: 10px 22px; border-radius: 18px; pointer-events: none; transition: transform .25s cubic-bezier(.2,.9,.3,1.4), opacity .25s; }
.lg-toast.lg-on { transform: translate(-50%, 0) scale(1); opacity: 1; }
.lg-end { background: var(--rx-card); border: 2px solid var(--rx-line); border-bottom-width: 6px; border-radius: var(--rx-r); padding: 18px 18px 16px; text-align: center; }
.lg-end h2 { font: 800 1.5rem var(--rx-display); margin: 4px 0; color: var(--rx-text); }
.lg-end p { margin: 2px 0 14px; color: var(--rx-muted); font-size: .92rem; }
.lg-stars { font-size: 2.6rem; letter-spacing: 6px; line-height: 1; }
.lg-stars span { display: inline-block; color: var(--rx-line); }
.lg-stars span.lg-on { color: #f5b301; animation: lg-pop .4s cubic-bezier(.2,.9,.3,1.6); }
@keyframes lg-pop { 0% { transform: scale(.3); } 100% { transform: scale(1); } }
.lg-end .rx-btn { width: 100%; }
@media (prefers-reduced-motion: reduce) { .lg-ring, .lg-done .lg-ring, .lg-tag, .lg-float, .lg-stars span, .lg-toast, .lg-fact.lg-new { animation: none !important; transition: none !important; } }
/* The Learn tab's game card: the map with its spots, then one button. */
.panel.game { display: flex; flex-direction: column; gap: 12px; }
.panel.game .gamehead { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.panel.game .gamehead h2 { margin: 0; }
.panel.game .gstars { color: #f5b301; letter-spacing: 2px; white-space: nowrap; }
.panel.game .gstars .off { color: var(--rx-line); }
.bitebar .gtitle { flex: 1; min-width: 0; }
.bitebar .gtitle .rx-kicker { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bitebar .gtitle .rx-h2 { font-size: 1.45rem; }
body.rx-skin .panel.fam .settings .actions + .actions { margin-top: 8px; }
body.rx-game .tabs { display: none !important; }
body.rx-game .wrap { padding-bottom: 0 !important; }
body.rx-game #foot { display: none; }
#view > .gtitle .rx-kicker { margin: 0 0 4px; }
#view > .gtitle .rx-h2 { font-size: 1.6rem; }
/* The map always fits above the names: a tall map (the British Isles) shrinks rather than slide under them. */
.lg-card { display: flex; justify-content: center; }
.lg-card svg.lg-map { width: auto; max-width: 100%; max-height: calc(100svh - 360px); }
/* The note above the names: the fact for the place just placed (lime edge), or a miss or hint (pink edge). */
.lg-note { margin: 0 0 10px; padding: 10px 12px; border-radius: var(--rx-r-sm); background: var(--rx-card); border: 2px solid var(--rx-line); border-left: 6px solid var(--rx-lime-deep); font-size: .95rem; line-height: 1.35; color: var(--rx-text); display: flex; flex-direction: column; gap: 2px; }
.lg-note[hidden] { display: none; }
.lg-note b { font: 800 1rem var(--rx-display); }
.lg-note.lg-miss { border-left-color: var(--rx-pink); }
.lg-note.lg-pop { animation: lg-noteup .3s cubic-bezier(.2,.9,.3,1.3); }
@keyframes lg-noteup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.lg-end > p:has(> b) { margin: 14px 0 6px; text-align: left; color: var(--rx-text); font: 800 .95rem var(--rx-display); }
.lg-recap { list-style: none; margin: 0 0 16px; padding: 0; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.lg-recap li { padding: 8px 0 0; border-top: 1px dashed var(--rx-line); display: flex; flex-direction: column; gap: 2px; font-size: .92rem; line-height: 1.35; color: var(--rx-muted); }
.lg-recap li b { color: var(--rx-text); font: 800 .98rem var(--rx-display); }
@media (prefers-reduced-motion: reduce) { .lg-note.lg-pop { animation: none; } }
.lg-toast { white-space: nowrap; }
.lg-tray[hidden], .lg-howto[hidden] { display: none; }
.lg-note.lg-intro { border-left-color: var(--rx-violet); font-size: 1.02rem; gap: 12px; padding: 14px; }
.lg-note .lg-start { width: 100%; }

/* ---------- Order it: the sequence fills in from the top, one step at a time (public/js/play.js) ---------- */
.lg-card.og-card { background: var(--rx-card); border: 2px solid var(--rx-line); border-bottom-width: 6px; display: block; padding: 12px 14px; }
.og-end { font: 800 .72rem var(--rx-display); letter-spacing: .08em; text-transform: uppercase; color: var(--rx-violet); margin: 2px 0 6px 2px; }
.og-end:last-child { margin: 6px 0 2px 2px; }
.og-line { position: relative; display: flex; flex-direction: column; gap: 8px; }
.og-line::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 4px; border-radius: 2px; background: var(--rx-track); }
.og-slot { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; }
.og-num { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 800 1rem var(--rx-display); background: var(--rx-paper); color: var(--rx-muted); border: 2px dashed var(--rx-line); z-index: 1; }
.og-text { flex: 1; min-width: 0; min-height: 40px; border-radius: 12px; border: 2px dashed var(--rx-line); padding: 8px 12px; font: 700 .95rem/1.25 var(--rx-display); color: var(--rx-text); display: flex; align-items: center; }
.og-next .og-num { border: 3px solid var(--rx-violet); color: var(--rx-violet); background: #eeeafe; animation: lg-breathe 1.8s ease-in-out infinite; }
.og-next .og-text { border-color: var(--rx-violet); background: #f6f3ff; }
.og-done .og-num { background: var(--rx-lime); border: 3px solid var(--rx-lime-deep); color: var(--rx-on-lime); animation: lg-land .45s ease-out; }
.og-done .og-text { border-style: solid; border-color: var(--rx-lime-deep); background: #f5fbe3; color: #171b2b; animation: lg-rise .3s ease-out; }
.og-flash .og-text { border-color: var(--rx-pink); background: #ffe8f0; }
:root[data-theme="dark"] .og-next .og-text, :root[data-theme="dark"] .og-done .og-text { color: #171b2b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .og-next .og-text, :root:not([data-theme="light"]) .og-done .og-text { color: #171b2b; } }
.lg-tray.og-tray { flex-direction: column; flex-wrap: nowrap; }
.lg-tag.og-tag { width: 100%; text-align: left; cursor: pointer; touch-action: manipulation; line-height: 1.25; padding: 10px 14px 8px; }
.lg-tag.og-hint { border-color: var(--rx-violet); animation: og-pulse .7s ease-in-out infinite; }
@keyframes og-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }
.lg-recap:is(ol) { list-style: none; counter-reset: og; }
.lg-recap:is(ol) li { counter-increment: og; padding-left: 34px; position: relative; }
.lg-recap:is(ol) li::before { content: counter(og); position: absolute; left: 0; top: 8px; width: 24px; height: 24px; border-radius: 50%; background: var(--rx-lime); color: var(--rx-on-lime); font: 800 .8rem/24px var(--rx-display); text-align: center; }
/* The Learn card's still picture of a sequence: its empty steps. */
.lg-preview.og-preview { background: var(--rx-paper); border: 2px solid var(--rx-line); padding: 10px 12px; }
.og-preview .og-slot { min-height: 30px; } .og-preview .og-num { width: 28px; height: 28px; font-size: .8rem; } .og-preview .og-text { min-height: 26px; padding: 0; }
.og-preview .og-line::before { left: 12px; top: 14px; bottom: 14px; }
@media (prefers-reduced-motion: reduce) { .og-next .og-num, .og-done .og-num, .og-done .og-text, .lg-tag.og-hint { animation: none !important; } }
.og-slot[hidden], .og-more[hidden], .og-end[hidden] { display: none; }
.og-more { margin: 8px 0 2px 52px; font-size: .85rem; color: var(--rx-muted); }
.lg-card.og-card { padding: 12px 14px 14px; }
/* The Learn card's picture of a sequence: a strip of numbered steps from one end to the other. */
.lg-preview.og-preview { display: flex; align-items: center; gap: 10px; padding: 16px 14px; }
.og-preview .og-end { margin: 0; flex: none; }
.og-dots { flex: 1; display: flex; justify-content: space-between; position: relative; }
.og-dots::before { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: var(--rx-track); }
.og-dot { position: relative; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--rx-card); border: 2px dashed var(--rx-violet); color: var(--rx-violet); font: 800 .8rem var(--rx-display); }
.lg-preview.og-preview { gap: 8px; padding: 14px 12px; }
.og-preview .og-end { font-size: .66rem; letter-spacing: .06em; }
.og-dots { min-width: 0; gap: 4px; }
.og-dot { width: 24px; height: 24px; font-size: .72rem; flex: none; }
.lg-preview.og-preview { flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 16px 16px; }
.og-ends { display: flex; justify-content: space-between; }
.og-ends .og-end, .og-ends .og-end:last-child { margin: 0; }

/* Order it, one card at a time: the timeline with a gap to tap between every two events, and the one event in hand. */
.og2-line { position: relative; display: flex; flex-direction: column; gap: 4px; margin: 4px 0; }
.og2-line::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px; background: var(--rx-track); }
.og2-item { position: relative; display: flex; align-items: center; gap: 12px; font: 700 .95rem/1.25 var(--rx-display); color: var(--rx-text); }
.og2-dot { flex: none; width: 25px; height: 25px; border-radius: 50%; background: var(--rx-lime); border: 3px solid var(--rx-lime-deep); z-index: 1; }
.og2-item > span { flex: 1; padding: 8px 12px; border-radius: 12px; background: #f5fbe3; border: 2px solid var(--rx-lime-deep); color: #171b2b; }
.og2-new > span { animation: lg-land .45s ease-out; }
.og2-moved > span { border-color: var(--rx-pink); background: #ffe8f0; animation: lg-rise .4s ease-out; }
.og2-moved .og2-dot { background: var(--rx-pink); border-color: #d6336c; }
.og2-gap { appearance: none; position: relative; margin-left: 37px; height: 30px; border: 2px dashed var(--rx-violet); border-radius: 10px; background: #f6f3ff; color: var(--rx-violet); font: 800 .78rem var(--rx-display); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.og2-gap:disabled { height: 6px; border: 0; background: none; cursor: default; }
.og2-gap:disabled span { display: none; }
.og2-gap:not(:disabled):active { background: #e5dcff; }
.og2-ask { font: 800 .78rem var(--rx-display); letter-spacing: .08em; text-transform: uppercase; color: var(--rx-violet); margin: 0 2px 6px; }
.og2-cardnow { padding: 14px 16px; border-radius: var(--rx-r-sm); background: var(--rx-card); border: 2px solid var(--rx-violet); border-bottom-width: 6px; font: 800 1.1rem/1.3 var(--rx-display); color: var(--rx-text); animation: lg-noteup .3s cubic-bezier(.2,.9,.3,1.3); }
.lg-tray.og-tray { display: block; }
@media (prefers-reduced-motion: reduce) { .og2-new > span, .og2-moved > span, .og2-cardnow { animation: none !important; } }

/* Slimmer timeline: thin gaps marked +, and the fact for the event just placed under it. */
.og2-line { gap: 3px; }
.og2-gap { height: 24px; font-size: 1.05rem; letter-spacing: 0; border-width: 2px; border-radius: 8px; }
.og2-gap:disabled { height: 3px; }
.og2-item > span { padding: 6px 10px; font-size: .92rem; display: flex; flex-direction: column; gap: 3px; }
.og2-item > span small { font: 500 .85rem/1.35 var(--rx-body); color: #3d4053; }
.og2-moved > span small { color: #a3204f; }
.og2-new > span small { color: #4d5f12; }
/* During a game the parent-view note steps aside, so the board starts near the top. */
body.rx-game .note.viewer { display: none; }
/* Dragging the card in hand onto the timeline. */
.og2-cardnow { touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.og2-dragging { position: fixed !important; z-index: 30; pointer-events: none; transform: rotate(-2deg) scale(1.03); box-shadow: 0 14px 30px rgba(0,0,0,.25); animation: none; }
.og2-gap.og2-over { height: 40px; background: var(--rx-violet); color: #fff; border-style: solid; }
.og2-gap { transition: height .12s, background .12s; }
.og2-cardnow.lg-ghost { opacity: .35; }
.og2-dragging { padding: 9px 12px; font-size: .95rem; opacity: .96; border-bottom-width: 4px; }

/* ---------- Build it: the atom builder (public/js/play.js) ---------- */
.lg-card.bd-card { display: block; padding: 12px 12px 14px; color: #fff; }
.bd-badge { display: flex; align-items: center; gap: 12px; }
.bd-badge > span { font: 800 1.05rem var(--rx-display); color: #ddd2ff; }
.bd-nota { display: inline-flex; align-items: center; gap: 2px; background: #fff; color: #171b2b; border-radius: 12px; padding: 4px 10px 4px 8px; font-family: var(--rx-display); }
.bd-nota > span { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1; font-weight: 800; font-size: .85rem; }
.bd-nota > span sup, .bd-nota > span sub { vertical-align: baseline; font-size: inherit; }
.bd-nota > b { font: 900 1.9rem/1 var(--rx-display); }
.bd-nota > sup { font: 800 .95rem var(--rx-display); align-self: flex-start; margin-top: 2px; }
svg.bd-atom { display: block; width: 100%; max-height: calc(100svh - 470px); min-height: 230px; margin: 4px auto 0; touch-action: manipulation; }
.bd-ring { fill: none; stroke: #3a3f5c; stroke-width: 3; transition: stroke .2s, stroke-width .2s; }
.bd-ring.bd-tap { stroke: #8f7fe0; stroke-dasharray: 8 7; stroke-width: 4; cursor: pointer; }
.bd-ring.bd-full { stroke: var(--rx-lime-deep); stroke-dasharray: none; }
.bd-ring.bd-no { stroke: var(--rx-pink); stroke-width: 7; stroke-dasharray: none; }
.bd-p { fill: var(--rx-pink); stroke: #171b2b; stroke-width: 1.5; }
.bd-n { fill: #c9cbe0; stroke: #171b2b; stroke-width: 1.5; }
.bd-e { fill: var(--rx-lime); stroke: #171b2b; stroke-width: 2; }
.bd-sym { font: 900 30px var(--rx-display); fill: #fff; }
.bd-pop { transform-box: fill-box; transform-origin: center; animation: bd-pop .4s cubic-bezier(.2,.9,.3,1.5) both; }
@keyframes bd-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
/* Built: the shells turn, each at its own pace. */
.bd-alive .bd-shell { transform-origin: 0 0; animation: bd-spin 9s linear infinite; }
.bd-alive .bd-s1 { animation-duration: 13s; animation-direction: reverse; } .bd-alive .bd-s2 { animation-duration: 17s; } .bd-alive .bd-s3 { animation-duration: 21s; animation-direction: reverse; }
@keyframes bd-spin { to { transform: rotate(360deg); } }
.bd-counts { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; font-size: .88rem; color: #c9cbe0; }
.bd-count b { color: #fff; font: 800 1rem var(--rx-display); margin-right: 2px; }
.bd-count i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.bd-cp i { background: var(--rx-pink); } .bd-cn i { background: #c9cbe0; } .bd-ce i { background: var(--rx-lime); }
.bd-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bd-opt { appearance: none; min-height: 54px; border: 2px solid var(--rx-line); border-bottom-width: 5px; border-radius: 14px; background: var(--rx-card); color: var(--rx-text); font: 900 1.5rem var(--rx-display); cursor: pointer; }
.bd-opt:active { transform: translateY(3px); border-bottom-width: 2px; }
.bd-opt:disabled { opacity: .35; }
.bd-opt.bd-right { opacity: 1; background: var(--rx-lime); border-color: var(--rx-lime-deep); color: var(--rx-on-lime); }
.bd-opt.lg-shake { border-color: var(--rx-pink); color: #d6336c; }
.bd-hint { font-size: .88rem; color: var(--rx-muted); margin: 0 2px; }
.lg-howto:empty { display: none; }
.lg-preview.bd-preview { display: grid; place-items: center; padding: 10px; }
.bd-preview svg.bd-atom { width: 150px; min-height: 0; max-height: none; }
@media (prefers-reduced-motion: reduce) { .bd-alive .bd-shell, .bd-pop { animation: none !important; } }
/* Build it: the question above, the four numbers in one row; particles that fly into place. */
.lg-tray.bd-tray { display: block; }
.bd-opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bd-opt { min-height: 50px; font-size: 1.35rem; }
svg.bd-atom { max-height: calc(100svh - 540px); min-height: 190px; }
.bd-fly { position: fixed; z-index: 28; border-radius: 50%; pointer-events: none; transition: transform .42s cubic-bezier(.3,.7,.3,1); border: 1.5px solid #171b2b; }
.bd-fly-p { background: var(--rx-pink); } .bd-fly-n { background: #c9cbe0; } .bd-fly-e { background: var(--rx-lime); border-width: 2px; }
/* A bigger atom: more of the height, and a tighter key under it. */
svg.bd-atom { max-height: calc(100svh - 400px); min-height: 240px; margin-top: 0; }
.lg-card.bd-card { padding: 10px 10px 10px; }
.bd-counts { gap: 12px; margin-top: 2px; font-size: .8rem; flex-wrap: nowrap; }
.bd-count b { font-size: .92rem; }
.bd-count i { width: 8px; height: 8px; margin-right: 4px; }
/* On a phone the map game runs edge to edge, so the map is as big as it can be. */
@media (max-width: 560px) { .lg-card:not(.og-card):not(.bd-card) { margin: 0 -16px; border-radius: 0; } body.try .lg-card:not(.og-card):not(.bd-card) { margin: 0 -20px; } }
.ledger.visits li > span { display: flex; flex-direction: column; gap: 2px; }
.ledger.visits .vcount { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.ledger.visits .vcount b { font-size: 1.3rem; }
/* A map that is taller than the phone is wide, swiped sideways. */
.lg-card.lg-pan { display: block; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lg-card.lg-pan::-webkit-scrollbar { display: none; }
.lg-card.lg-pan svg.lg-map { max-width: none; max-height: none; }
.lg-swipe { position: sticky; left: 50%; bottom: 10px; display: inline-block; transform: translateX(-50%); margin-top: -40px; float: left; background: rgba(23,27,43,.85); color: #fff; font: 700 .8rem var(--rx-display); padding: 6px 12px; border-radius: 999px; pointer-events: none; transition: opacity .4s; white-space: nowrap; }
.lg-swipe.lg-gone { opacity: 0; }
.lg-swipe { position: relative; float: none; left: auto; bottom: auto; transform: none; align-self: center; margin: -50px 0 14px; z-index: 2; }
.lg-swipe { margin: -66px 0 26px; z-index: 6; }
/* The game is at least a screen tall, so on Start the page can always scroll the progress bar to the top. */
.lg { min-height: calc(100svh - 16px); }

/* The parents' note, as a small pill at the top of the violet header (kid.js puts it there). */
.rx-head > .rx-viewer { display: inline-block; margin: 0 0 18px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font: 600 .82rem var(--rx-body, inherit); }
.rx-head > .rx-viewer b { font-weight: 800; }

/* ---------- Sort it: the groups as coloured bins on the dark game board, side by side (two) or two by two (three or four);
   the card in hand is dealt like a playing card ---------- */
.so-c0 { --c: #8f6bff; --on: #fff; } .so-c1 { --c: #c5ed42; --on: #171b2b; } .so-c2 { --c: #ff5c93; --on: #fff; } .so-c3 { --c: #ffa53d; --on: #171b2b; }
.lg-card.so-card { background: #171b2b; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 1fr; align-content: stretch; gap: 10px; padding: 12px; overflow: visible;
  background-image: radial-gradient(circle at 15% 0%, rgba(143,107,255,.35), transparent 55%), radial-gradient(circle at 100% 100%, rgba(197,237,66,.16), transparent 50%); }
.so-n3 .so-bin:last-child { grid-column: 1 / -1; }
.so-bin { appearance: none; position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 6px; min-height: 150px; padding: 8px 8px 10px; border-radius: 16px;
  background: rgba(255,255,255,.07); border: 2.5px solid var(--c); text-align: left; font: inherit; color: #fff; cursor: pointer; transition: transform .14s, box-shadow .14s, background .14s; }
.so-bin:disabled { cursor: default; }
.so-bin:not(:disabled):active, .so-bin.so-over { transform: scale(1.04); background: color-mix(in srgb, var(--c) 22%, transparent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c) 35%, transparent), 0 10px 24px rgba(0,0,0,.35); }
.so-bin.lg-shake { animation: lg-shake .4s; }
.so-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 7px 8px 7px 10px; border-radius: 10px; background: var(--c); color: var(--on); font: 800 .95rem/1.1 var(--rx-display); }
.so-head b { flex: none; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 12px; display: grid; place-items: center; background: rgba(0,0,0,.18); font: 900 .8rem var(--rx-display); }
.so-drop { flex: 1; display: grid; place-items: center; margin-top: 2px; border: 2px dashed color-mix(in srgb, var(--c) 55%, transparent); border-radius: 10px; color: color-mix(in srgb, var(--c) 80%, #fff); font: 800 .72rem var(--rx-display); letter-spacing: .1em; text-transform: uppercase; opacity: .8; }
.so-items { display: flex; flex-direction: column; gap: 5px; }
.so-item { padding: 6px 8px; border-radius: 9px; background: #fff; border-left: 5px solid var(--c); font: 700 .82rem/1.2 var(--rx-display); color: #171b2b; }
.so-item.so-new { animation: so-land .45s cubic-bezier(.2,.9,.3,1.4); }
.so-item.so-moved { background: #ffe8f0; border-left-color: var(--rx-pink); outline: 2px solid var(--rx-pink); animation: so-land .45s cubic-bezier(.2,.9,.3,1.4); }
@keyframes so-land { 0% { opacity: 0; transform: translateY(-14px) scale(1.15) rotate(-3deg); } 100% { opacity: 1; transform: none; } }
.og2-cardnow.so-deal { position: relative; text-align: center; font-size: 1.25rem; padding: 20px 16px; border-color: var(--rx-violet); box-shadow: 0 8px 0 -2px #e4dcff, 0 16px 0 -4px #d2c6ff; transform: rotate(-1.5deg); animation: so-deal .4s cubic-bezier(.2,.9,.3,1.3); }
@keyframes so-deal { 0% { opacity: 0; transform: translateY(40px) rotate(6deg) scale(.9); } 100% { opacity: 1; transform: rotate(-1.5deg); } }
.so-preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 12px; background: #171b2b; }
.so-preview .so-bin { min-height: 0; padding: 6px; gap: 8px; cursor: default; }
.so-preview .so-head { font-size: .8rem; padding: 5px 8px; }
.so-dots { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 2px 2px; }
.so-dot { width: 14px; height: 14px; border-radius: 4px; background: color-mix(in srgb, var(--c) 30%, transparent); border: 2px solid var(--c); }
@media (prefers-reduced-motion: reduce) { .so-item, .so-bin, .og2-cardnow.so-deal { animation: none !important; transition: none; } }