:root {
  --bg: #fff4e0;
  --bg2: #ffe9c7;
  --card: #ffffff;
  --ink: #2b2140;
  --muted: #7a6f86;
  --line: #f0e2cc;
  --kid: #f59e0b;
  --day: #f59e0b;
  --good: #16a34a;
  --radius: 22px;
  --shadow: 0 4px 0 rgba(90, 60, 20, .08), 0 10px 24px rgba(90, 60, 20, .08);
  --font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-family: var(--font);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
/* the app never zooms as a page (the map has its own pinch): no double-tap zoom, no zoom when a text box is tapped */
html { touch-action: manipulation; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
input, textarea, select { font-size: max(16px, 1em); }
body {
  background: radial-gradient(1200px 500px at 50% -200px, #ffe1a8, transparent), var(--bg);
  min-height: 100vh;
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  font-weight: 600;
  overflow-x: hidden;
}
body.noscroll { overflow: hidden; }
h1, h2, h3 { margin: 0; font-weight: 900; line-height: 1.1; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.05rem; margin: 16px 0 8px; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; }
input { font: inherit; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.center { text-align: center; }
.row { display: flex; gap: 10px; align-items: center; }
.row.wrap { flex-wrap: wrap; }

/* ---------- shell ---------- */
.top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px 6px; max-width: 1100px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 900; font-size: 1.35rem; }
.logo { font-size: 1.6rem; filter: drop-shadow(0 2px 0 #e0a100); }
.today-pill { display: flex; align-items: center; gap: 8px; background: var(--card); padding: 8px 14px; border-radius: 999px; box-shadow: var(--shadow); font-weight: 800; font-size: .95rem; white-space: nowrap; }
.today-pill .dot { width: 12px; height: 12px; border-radius: 50%; }
.tabs { display: flex; gap: 8px; padding: 8px 16px 12px; max-width: 1100px; margin: 0 auto; overflow-x: auto; scrollbar-width: none; position: sticky; top: 0; z-index: 5; background: linear-gradient(var(--bg) 80%, transparent); }
.tab { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; min-height: 58px; border-radius: 18px; background: var(--card); box-shadow: var(--shadow); font-weight: 900; font-size: 1.05rem; position: relative; border: 3px solid transparent; }
.tab.on { border-color: var(--kid); background: color-mix(in srgb, var(--kid) 14%, white); }
.tab-ico { font-size: 1.5rem; }
.tab-av svg { display: block; height: 40px; width: auto; }
.tab-done { position: absolute; top: -6px; right: -4px; background: var(--good); color: #fff; width: 22px; height: 22px; border-radius: 50%; font-size: .8rem; display: grid; place-items: center; }
#view { max-width: 1100px; margin: 0 auto; padding: 0 16px 24px; }
.foot { text-align: center; padding: 10px 0 30px; }
.parent-btn { color: var(--muted); font-size: .85rem; padding: 10px 16px; border-radius: 999px; opacity: .7; }

.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; margin-bottom: 16px; text-align: left; display: block; width: 100%; }
.pill { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--bg2); font-weight: 800; font-size: .9rem; }
.pill.ok { background: #dcfce7; color: #166534; }
.pill.wait { background: #fef3c7; color: #92400e; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--bg2); font-weight: 900; }
.chip.star { background: #fff3c4; color: #8a5a00; }
.chip.hot { background: #ffe1d6; color: #c2410c; animation: glow 1.6s ease-in-out infinite; }
.chip.big { font-size: 1.15rem; }
.bar { height: 14px; border-radius: 999px; background: #f3e6d2; overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #f59e0b, #ef4444, #a855f7); transition: width .6s; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 10px 22px; border-radius: 16px; background: var(--kid); color: #fff; font-weight: 900; font-size: 1.1rem; box-shadow: 0 4px 0 color-mix(in srgb, var(--kid) 70%, black); transition: transform .08s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--kid) 70%, black); }
.btn.ghost { background: var(--bg2); color: var(--ink); box-shadow: 0 4px 0 #e8d3b0; }
.btn.small { min-height: 44px; font-size: .95rem; padding: 8px 14px; }
.btn.huge { min-height: 72px; font-size: 1.5rem; padding: 12px 36px; border-radius: 22px; }
.btn.buy { background: #16a34a; box-shadow: 0 4px 0 #0f6e32; }
.btn.danger { background: #dc2626; box-shadow: 0 4px 0 #991b1b; }

/* ---------- family ---------- */
.banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; background: linear-gradient(135deg, #fff, #fff6e5); }
.banner h1 { font-size: 1.8rem; }
.team { min-width: 240px; flex: 1; max-width: 420px; }
.team-num { font-size: 1.1rem; margin-bottom: 6px; }
.team-num b { font-size: 1.6rem; }
.shouts { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.shout { background: #fff; border-radius: 16px; padding: 10px 14px; box-shadow: var(--shadow); font-weight: 800; animation: pop .4s both; }
.kid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; }
.kid-card { border-top: 8px solid var(--kid); margin: 0; transition: transform .15s; }
.kid-card:active { transform: scale(.98); }
.kc-top { display: flex; gap: 14px; align-items: center; }
.kc-av { background: color-mix(in srgb, var(--kid) 14%, white); border-radius: 18px; padding: 6px 10px; }
.kc-name h2 { font-size: 1.6rem; }
.kc-name .pill { margin-top: 6px; }
.kc-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 14px 0 10px; }
.kc-stats > div { background: #fff8ec; border-radius: 14px; padding: 8px; text-align: center; }
.kc-stats b { display: block; font-size: 1.05rem; white-space: nowrap; }
.kc-stats span { font-size: .78rem; color: var(--muted); }
.kc-stats .hot { background: #ffe7dc; animation: glow 1.6s ease-in-out infinite; }
.week-dots { display: flex; gap: 5px; justify-content: space-between; }
.wd { flex: 1; aspect-ratio: 1; max-width: 40px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; font-size: .85rem; background: color-mix(in srgb, var(--day) 18%, white); color: var(--day); }
.wd.done { background: var(--day); color: #fff; }
.wd.today { outline: 3px solid var(--day); outline-offset: 1px; }
.wd.missed { opacity: .45; }
.kc-sched { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; font-size: .9rem; }
.kc-sched span { background: #f6f1fb; padding: 4px 10px; border-radius: 999px; }
.day-legend { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.day-legend span { padding: 6px 12px; border-radius: 10px; background: var(--day); color: #fff; font-weight: 900; opacity: .75; }
.day-legend span.on { opacity: 1; transform: scale(1.12); box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }

/* ---------- kid page ---------- */
.hero { display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--kid) 18%, white), #fff); }
.hero-av { background: #fff; border-radius: 20px; padding: 6px 12px; box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--kid) 30%, white); }
.hero-av svg { display: block; }
.hero-txt { flex: 1; min-width: 0; }
.hero-txt h1 { font-size: 2.2rem; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.store-btn { flex-direction: column; gap: 0; min-height: 76px; padding: 8px 16px; font-size: 1.7rem; }
.store-btn span { font-size: .9rem; }

.today-card { display: flex; flex-wrap: wrap; gap: 14px; align-items: stretch; border-left: 12px solid var(--day); }
.today-day { display: flex; flex-direction: column; justify-content: center; min-width: 170px; }
.today-day small { font-weight: 900; color: var(--muted); letter-spacing: .1em; }
.today-day b { font-size: 2rem; font-weight: 900; color: var(--day); text-shadow: 0 2px 0 rgba(0, 0, 0, .08); }
.today-sched { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; align-content: center; }
.si { display: flex; align-items: center; gap: 8px; background: #fff8ec; border-radius: 14px; padding: 8px 12px; font-weight: 800; font-size: 1.05rem; }
.si-e { font-size: 1.6rem; }
.si small { color: var(--muted); }

.board-head .pill { white-space: nowrap; }
.board-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.board-wrap { position: relative; border-radius: 18px; overflow: hidden; background: #8ecbff; }
.board-3d { height: min(56vh, 520px); min-height: 300px; position: relative; }
.board-canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
.board-banner { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.board-banner .db { opacity: 0; background: var(--day); color: #fff; padding: 12px 34px; border-radius: 20px; text-align: center; box-shadow: 0 6px 0 rgba(0, 0, 0, .2); }
.board-banner .db small { display: block; font-weight: 800; opacity: .9; }
.board-banner .db b { font-size: 2.4rem; letter-spacing: .04em; }
.board-banner.show .db { animation: banner 2.6s ease both; }
.daystrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 10px; }
.ds { border-radius: 14px; padding: 8px 2px; background: color-mix(in srgb, var(--day) 16%, white); color: color-mix(in srgb, var(--day) 80%, black); display: flex; flex-direction: column; align-items: center; min-height: 60px; font-weight: 900; border: 3px solid transparent; }
.ds b { font-size: .95rem; }
.ds span { font-size: 1.1rem; }
.ds.done { background: var(--day); color: #fff; }
.ds.today { border-color: var(--day); background: #fff; transform: translateY(-3px); box-shadow: 0 4px 0 var(--day); }
.ds.missed { opacity: .5; }

.board-3d.flat { display: grid; place-items: center; background: linear-gradient(#bfe6ff, #b5e39c); }
.flat-path { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; width: 100%; padding: 16px; }
.ft { position: relative; background: var(--day); opacity: .6; color: #fff; border-radius: 12px; padding: 12px 4px; text-align: center; display: flex; flex-direction: column; min-height: 90px; }
.ft:nth-child(even) { margin-top: 50px; }
.ft.done, .ft.today { opacity: 1; }
.ft.done { background: #f5c518; }
.ft-av { position: absolute; top: -56px; left: 50%; transform: translateX(-50%); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.two .card { margin-bottom: 16px; }
.chores { display: grid; gap: 10px; margin-top: 12px; }
.chore { display: flex; align-items: center; gap: 12px; padding: 10px 14px; min-height: 64px; border-radius: 16px; background: #fff8ec; border: 3px solid #f3e3c6; font-weight: 800; font-size: 1.15rem; text-align: left; }
.chore .ce { font-size: 2rem; }
.chore .cl { flex: 1; }
.chore .ck { font-size: 1.6rem; }
.chore.done { background: #dcfce7; border-color: #86efac; }
.chore.done .cl { text-decoration: line-through; text-decoration-thickness: 3px; color: #166534; }
.yay { font-weight: 900; color: var(--good); text-align: center; font-size: 1.2rem; margin: 12px 0 0; }
.quest-card { display: flex; flex-direction: column; gap: 14px; }
.task-dots { display: flex; gap: 8px; flex-wrap: wrap; }
.td { width: 52px; height: 52px; border-radius: 14px; background: #f6f1fb; display: grid; place-items: center; font-size: 1.5rem; }
.td.done { background: #dcfce7; }
.go-btn { min-height: 84px; font-size: 1.7rem; border-radius: 22px; animation: bounce 2s ease-in-out infinite; }
.quest-done { font-size: 1.6rem; font-weight: 900; text-align: center; padding: 14px; background: #dcfce7; border-radius: 16px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 12px 0; }
.stats > div { background: #fff8ec; border-radius: 14px; padding: 10px; text-align: center; }
.stats b { display: block; font-size: 1.6rem; }
.stats span { font-size: .8rem; color: var(--muted); }
.skills { display: grid; gap: 10px; }
.skill { display: grid; grid-template-columns: 170px 1fr 70px; align-items: center; gap: 10px; }
.hist { max-width: 360px; }
.hist-head, .hist-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.hist-head span { text-align: center; font-size: .75rem; color: var(--muted); font-weight: 900; }
.hc { aspect-ratio: 1; border-radius: 6px; background: #f3e6d2; }
.hc.done { background: var(--kid); }
.hc.today { outline: 3px solid var(--kid); }
.hc.future { background: #faf4ea; }
.wonders { padding-left: 18px; margin: 0; }

.float-pts { position: fixed; z-index: 99; transform: translate(-50%, 0); font-weight: 900; font-size: 1.4rem; color: #d97706; pointer-events: none; animation: floatUp 1s ease-out forwards; text-shadow: 0 2px 0 #fff; }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; background: rgba(43, 33, 64, .45); display: grid; place-items: center; padding: 16px; opacity: 0; transition: opacity .2s; overflow-y: auto; }
.overlay.in { opacity: 1; }
.overlay > * { transform: scale(.94); transition: transform .25s; }
.overlay.in > * { transform: none; }

.splash { width: min(760px, 100%); background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); border-top: 16px solid var(--day); padding: 18px 20px 22px; }
.splash-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 16px; }
.splash-week span { text-align: center; padding: 6px 0; border-radius: 10px; font-weight: 900; font-size: .9rem; background: color-mix(in srgb, var(--c) 18%, white); color: var(--c); }
.splash-week span.past { opacity: .5; }
.splash-week span.on { background: var(--c); color: #fff; transform: scale(1.18); box-shadow: 0 4px 0 rgba(0, 0, 0, .15); }
.splash-top { display: flex; align-items: center; gap: 18px; }
.splash-av { animation: bounce 2s ease-in-out infinite; }
.splash-hello { font-size: 1.3rem; font-weight: 900; }
.splash-is { margin-top: 6px; letter-spacing: .15em; font-weight: 900; color: var(--muted); }
.splash-day { font-size: clamp(2.6rem, 9vw, 4.4rem); font-weight: 900; color: var(--day); line-height: 1; text-shadow: 0 4px 0 color-mix(in srgb, var(--day) 30%, white); }
.splash-date { font-size: 1.2rem; font-weight: 800; color: var(--muted); }
.splash-sched { display: grid; gap: 10px; margin: 18px 0; }
.ss { display: flex; align-items: center; gap: 14px; background: color-mix(in srgb, var(--day) 10%, white); border: 3px solid color-mix(in srgb, var(--day) 30%, white); border-radius: 18px; padding: 10px 16px; font-size: 1.35rem; font-weight: 900; animation: pop .4s both; }
.ss:nth-child(2) { animation-delay: .1s; } .ss:nth-child(3) { animation-delay: .2s; } .ss:nth-child(4) { animation-delay: .3s; }
.ss-e { font-size: 2.4rem; }
.ss-t { flex: 1; }
.ss-time { font-size: 1.1rem; background: #fff; border-radius: 999px; padding: 4px 12px; color: var(--muted); }
.splash-btns { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.splash .btn.huge { background: var(--day); box-shadow: 0 5px 0 color-mix(in srgb, var(--day) 65%, black); flex: 1; }

.quest { width: min(820px, 100%); min-height: min(640px, 92vh); background: #fff; border-radius: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); display: flex; flex-direction: column; overflow: hidden; }
.q-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: color-mix(in srgb, var(--kid) 14%, white); }
.q-close { width: 48px; height: 48px; border-radius: 14px; background: #fff; font-size: 1.3rem; font-weight: 900; box-shadow: var(--shadow); flex: none; }
.q-dots { flex: 1; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.q-dots span { width: 40px; height: 40px; border-radius: 12px; background: #fff; display: grid; place-items: center; font-size: 1.2rem; opacity: .6; }
.q-dots span.cur { opacity: 1; outline: 3px solid var(--kid); }
.q-dots span.done { opacity: 1; background: #22c55e; color: #fff; font-weight: 900; }
.q-main { flex: 1; padding: 18px 20px 24px; display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; }
.q-main.shake { animation: shake .35s; }
.q-skill { background: var(--sk); color: #fff; font-weight: 900; padding: 4px 14px; border-radius: 999px; font-size: .9rem; }
.q-prompt { font-size: clamp(1.4rem, 4vw, 2rem); display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; }
.q-say { font-size: 1.6rem; width: 56px; height: 56px; border-radius: 50%; background: #fff3c4; box-shadow: var(--shadow); }
.q-visual { width: 100%; display: flex; justify-content: center; }
.q-answers { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; width: 100%; max-width: 640px; }
.q-answers.text { grid-template-columns: 1fr; max-width: 560px; }
.q-answers.wide { grid-template-columns: 1fr 1fr; }
.ans { min-height: 120px; border-radius: 22px; background: #fff; border: 4px solid #eadcf5; box-shadow: 0 5px 0 #eadcf5; display: grid; place-items: center; padding: 10px; transition: transform .1s; }
.ans:active { transform: translateY(3px); }
.q-answers.text .ans { min-height: 70px; justify-items: start; text-align: left; padding: 12px 18px; }
.ans.nope { opacity: .35; border-color: #fecaca; box-shadow: none; }
.ans.yes { border-color: #22c55e; background: #dcfce7; box-shadow: 0 5px 0 #16a34a; animation: pop .4s; }
.lvl-p .ans { min-height: 150px; }
.big-num { font-size: 4rem; font-weight: 900; color: #2563eb; }
.big-letter { font-size: 4.2rem; font-weight: 900; color: #7c3aed; }
.big-emoji { font-size: 4.4rem; }
.word { font-size: 2.6rem; font-weight: 900; }
.txt { font-size: 1.2rem; font-weight: 800; }
.swatch { width: 96px; height: 96px; border-radius: 50%; border: 4px solid #1f2937; }
.shape { width: 100px; height: 100px; }
.hint-emoji { font-size: 5rem; }
.emoji-group { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: 2.6rem; max-width: 420px; }
.emoji-group.count { font-size: 3rem; }
.emoji-group.small { font-size: 1.8rem; max-width: 220px; }
.emoji-group.boxed { border: 3px dashed #d8c7ec; border-radius: 14px; padding: 6px; font-size: 1.4rem; max-width: 120px; }
.emoji-group .gone { opacity: .25; text-decoration: line-through; filter: grayscale(1); }
.sum-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sum-row b { font-size: 2.4rem; }
.ten-frame { display: grid; grid-template-columns: repeat(5, 34px); gap: 3px; background: #1f2937; padding: 3px; border-radius: 8px; }
.ten-frame span { height: 34px; background: #fff; display: grid; place-items: center; font-size: 1.3rem; border-radius: 3px; }
.groups { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.eq { font-size: 2.2rem; font-weight: 900; margin-top: 8px; }
.vert { font-size: 3rem; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.15; }
.vert hr { border: 0; border-top: 5px solid var(--ink); margin: 4px 0 0; }
.sentence { font-size: 1.4rem; background: #fff8ec; padding: 12px 18px; border-radius: 16px; }
.passage { font-size: 1.25rem; line-height: 1.55; background: #fff8ec; padding: 14px 18px; border-radius: 16px; text-align: left; max-width: 620px; margin: 0; }
.scene { position: relative; width: min(660px, 100%); font-size: clamp(12px, 3.2vw, 22px); aspect-ratio: 16 / 10; border-radius: 22px; overflow: hidden; box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .6), var(--shadow); }
.scene span { position: absolute; transform: translate(-50%, -50%); line-height: 1; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .18)); }
.numpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: min(360px, 100%); margin: 0 auto; }
.np-display { grid-column: 1 / -1; font-size: 2.8rem; font-weight: 900; min-height: 76px; border-radius: 18px; background: #fff8ec; border: 4px solid #f3e3c6; display: grid; place-items: center; }
.np-key { min-height: 68px; border-radius: 16px; background: #f6f1fb; font-size: 1.8rem; font-weight: 900; box-shadow: 0 4px 0 #e2d5f0; }
.np-key.ok { background: #22c55e; color: #fff; box-shadow: 0 4px 0 #15803d; }
.np-key:active { transform: translateY(3px); box-shadow: none; }
.spell { display: flex; gap: 10px; width: min(480px, 100%); margin: 0 auto; }
.spell-in { flex: 1; min-width: 0; font-size: 2rem; font-weight: 900; padding: 10px 16px; border-radius: 16px; border: 4px solid #eadcf5; text-align: center; letter-spacing: .08em; }
.spell-in:focus { outline: none; border-color: var(--kid); }
.q-feedback { min-height: 40px; font-size: 1.2rem; font-weight: 900; }
.try { color: #b45309; }
.praise { color: var(--good); font-size: 1.6rem; animation: pop .4s; display: inline-block; }
.hint { margin-top: 8px; background: #fef9c3; padding: 8px 14px; border-radius: 12px; font-weight: 800; font-size: 1.05rem; }
.fact { background: #ecfdf5; border: 3px solid #a7f3d0; border-radius: 18px; padding: 14px 18px; max-width: 600px; animation: pop .4s; }
.fact p { font-weight: 700; font-size: 1.1rem; margin: 8px 0 12px; }
.wonder { display: block; font-size: 1rem; margin-bottom: 12px; }
.wonder input { width: 100%; margin-top: 6px; padding: 10px 14px; border-radius: 12px; border: 3px solid #a7f3d0; }

.celebrate { position: relative; width: min(560px, 100%); background: #fff; border-radius: 28px; padding: 26px 22px; text-align: center; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.celebrate h1 { font-size: 2.6rem; color: var(--kid); }
.cel-av { display: inline-block; }
.cel-av.dance { animation: dance .6s ease-in-out infinite alternate; }
.cel-sub { font-size: 1.2rem; }
.cel-lines { display: grid; gap: 6px; margin: 14px 0; text-align: left; }
.cel-lines div { display: flex; justify-content: space-between; background: #fff8ec; padding: 8px 14px; border-radius: 12px; font-weight: 800; animation: pop .4s both; }
.cel-lines div:nth-child(2) { animation-delay: .15s; } .cel-lines div:nth-child(3) { animation-delay: .3s; } .cel-lines div:nth-child(4) { animation-delay: .45s; }
.cel-lines b { color: #b45309; }
.cel-streak { font-size: 1.4rem; font-weight: 900; color: #c2410c; margin-bottom: 16px; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px; animation: fall 2.6s linear infinite; }

.store, .parent { width: min(860px, 100%); max-height: 92vh; overflow-y: auto; background: #fff; border-radius: 28px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); padding: 16px 18px 22px; }
.st-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; position: sticky; top: -16px; background: #fff; padding: 8px 0; z-index: 2; }
.st-head h2 { flex: 1; font-size: 1.5rem; }
.st-preview { display: flex; align-items: center; gap: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--kid) 16%, white), #fff8ec); border-radius: 20px; padding: 12px 18px; margin-bottom: 12px; }
.st-av { animation: bounce 2.4s ease-in-out infinite; }
.st-sel { flex: 1; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.st-name { font-size: 1.5rem; font-weight: 900; }
.need { font-weight: 800; color: #b45309; }
.st-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; }
.st-cats button { flex: none; display: flex; flex-direction: column; align-items: center; min-width: 78px; padding: 8px 10px; border-radius: 16px; background: #f6f1fb; font-weight: 800; font-size: .85rem; border: 3px solid transparent; }
.st-cats button span { font-size: 1.7rem; }
.st-cats button.on { border-color: var(--kid); background: #fff; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.st-item { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 6px; border-radius: 18px; background: #fff8ec; border: 3px solid #f3e3c6; min-height: 130px; }
.st-item .st-ic { font-size: 2.6rem; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px; }
.st-item .st-nm { font-weight: 800; font-size: .92rem; text-align: center; }
.st-item .st-pr { font-weight: 900; font-size: .9rem; color: #b45309; }
.st-item.owned .st-pr { color: var(--good); }
.st-item.wearing { background: #dcfce7; border-color: #86efac; }
.st-item.locked { opacity: .55; }
.st-item.sel { border-color: var(--kid); transform: scale(1.04); box-shadow: 0 4px 0 var(--kid); }
.earn { margin-top: 14px; background: #fff8ec; border-radius: 14px; padding: 10px 14px; }
.earn summary { font-weight: 900; cursor: pointer; }

.confirm, .pin-box { width: min(420px, 100%); background: #fff; border-radius: 26px; padding: 22px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.confirm .row { justify-content: center; margin-top: 12px; }
.cf-ic { font-size: 4rem; }
.pin-box.shake { animation: shake .35s; }
.pin-dots { display: flex; justify-content: center; gap: 14px; margin: 14px 0; }
.pin-dots span { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--muted); }
.pin-dots span.on { background: var(--ink); border-color: var(--ink); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pin-pad button { min-height: 60px; border-radius: 14px; background: #f6f1fb; font-size: 1.5rem; font-weight: 900; }

.p-kids { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.p-kids button { padding: 8px 16px; border-radius: 12px; background: #f6f1fb; font-weight: 900; border: 3px solid transparent; }
.p-kids button.on { border-color: var(--kid); background: #fff; }
.p-sec { border-top: 2px solid var(--line); padding: 8px 0 14px; }
.p-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; background: #fffaf2; padding: 8px; border-radius: 12px; }
.p-row input, .p-text, .p-lab input { padding: 10px 12px; border-radius: 10px; border: 2px solid var(--line); background: #fff; min-height: 44px; }
.p-emoji { width: 56px; text-align: center; font-size: 1.3rem; }
.p-text { flex: 1; min-width: 150px; }
.p-lab { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: .95rem; }
.p-check { display: flex; gap: 8px; align-items: center; margin: 10px 0; }
.p-check input { width: 22px; height: 22px; }
.p-del { font-size: 1.2rem; padding: 8px; }
.daychips { display: flex; gap: 4px; }
.daychips button { width: 36px; height: 36px; border-radius: 10px; background: #f1ece5; font-weight: 900; font-size: .85rem; }
.daychips button.on { background: var(--ink); color: #fff; }
code { background: #f6f1fb; padding: 1px 6px; border-radius: 6px; }

/* ---------- guide buddy ---------- */
.buddy { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: 80; display: flex; align-items: flex-end; gap: 8px; pointer-events: none; }
.buddy-btn { pointer-events: auto; width: 92px; height: 100px; display: grid; place-items: center; animation: float 3.2s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(20, 184, 166, .35)); }
.buddy-svg { overflow: visible; }
.buddy .b-glow { animation: pulse 2.6s ease-in-out infinite; transform-origin: 50px 58px; }
.buddy .b-eyes { animation: blink 4.5s infinite; transform-origin: 50px 51px; }
.buddy .b-eyes { transform-origin: 50px 50px; }
.buddy .b-hand.l { animation: handL 3.2s ease-in-out infinite; }
.buddy .b-hand.r { animation: handR 3.2s ease-in-out infinite; }
.buddy .b-sprout { animation: sprout 2.4s ease-in-out infinite; transform-origin: 50px 21px; }
.buddy.talking .b-sprout circle:first-of-type { fill: #a7fff2; }
.buddy .b-mouth { transform-origin: 50px 66px; transition: transform .08s; }
.buddy.talking .b-mouth { animation: talk .22s steps(2) infinite; }
.buddy.talking .b-hand.r { animation: wave .5s ease-in-out infinite alternate; transform-origin: 82px 62px; }
.buddy.wiggle .buddy-btn { animation: wiggle .5s ease, float 3.2s ease-in-out .5s infinite; }
.buddy.party .buddy-btn { animation: flip .9s ease, float 3.2s ease-in-out .9s infinite; }
.buddy-bubble { pointer-events: none; max-width: min(360px, calc(100vw - 170px)); background: #fff; border: 3px solid #2dd4bf; border-radius: 20px 20px 6px 20px; padding: 10px 14px; font-weight: 800; font-size: 1.08rem; line-height: 1.3; box-shadow: 0 8px 24px rgba(15, 118, 110, .2); margin-bottom: 54px; opacity: 0; transform: translateY(10px) scale(.95); transform-origin: bottom right; transition: opacity .2s, transform .2s; }
.buddy.open .buddy-bubble { opacity: 1; transform: none; }
.buddy-name { display: block; font-size: .78rem; color: #0f766e; text-transform: uppercase; letter-spacing: .08em; }
.quest, .store, .parent { padding-bottom: 110px; }
.foot { padding-bottom: 120px; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes pulse { 0%, 100% { transform: scale(.92); opacity: .8; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes talk { 0% { transform: scaleY(.7); } 100% { transform: scaleY(1.9); } }
@keyframes handL { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes handR { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(2px); } }
@keyframes wave { from { transform: translateY(-6px) rotate(-20deg); } to { transform: translateY(-12px) rotate(20deg); } }
@keyframes sprout { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg) scale(1.08); } 75% { transform: rotate(12deg) scale(1.08); } }
@keyframes flip { 0% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-40px) rotate(180deg) scale(1.15); } 100% { transform: translateY(0) rotate(360deg); } }
.p-buddy { display: flex; align-items: center; gap: 12px; }
@media (max-width: 760px) {
  .buddy-btn { width: 72px; height: 80px; }
  .buddy-btn .db { --s: 64px !important; }
  .buddy-bubble { font-size: .95rem; margin-bottom: 44px; padding: 8px 12px; }
  .overlay { padding-bottom: 104px; }
}

.buddy-stack { position: relative; pointer-events: none; }
.buddy-mic { pointer-events: auto; position: absolute; left: -46px; bottom: 6px; width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 3px solid #2dd4bf; font-size: 1.6rem; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(15, 118, 110, .25); z-index: 1; }
.buddy-mic[hidden] { display: none; }
.mic-ring { position: absolute; inset: -6px; border-radius: 50%; border: 4px solid #ef4444; opacity: 0; transform: scale(calc(1 + var(--lvl, 0) * .5)); transition: transform .08s; }
.buddy.listening .buddy-mic { background: #fee2e2; border-color: #ef4444; }
.buddy.listening .mic-ring { opacity: .85; }
.buddy.listening .buddy-btn { animation: none; transform: scale(1.08); }
.buddy.thinking .buddy-btn { animation: think 1s ease-in-out infinite; }
.buddy.thinking .buddy-text::after { content: ''; animation: dots 1.2s steps(4) infinite; }
.buddy-heard { display: block; font-style: italic; font-weight: 700; color: var(--muted); font-size: .9em; }
.buddy-heard:empty { display: none; }
@keyframes think { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-6px); } }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }
.talk-log { max-height: 320px; overflow-y: auto; display: grid; gap: 6px; }
.tl { background: #fffaf2; border-radius: 10px; padding: 8px 10px; font-size: .9rem; }
.tl.flag { background: #fee2e2; border: 2px solid #f87171; }
.tl small { color: var(--muted); }

/* Daddy Bot face */
.db { position: relative; display: inline-block; width: var(--s); height: calc(var(--s) * 1.16); }
.db-glow { position: absolute; left: -12%; right: -12%; bottom: -10%; height: calc(var(--s) * 1.2); border-radius: 50%; background: radial-gradient(circle, rgba(127, 247, 228, .55), rgba(127, 247, 228, 0) 68%); animation: pulse 2.6s ease-in-out infinite; }
.db-antenna { position: absolute; top: 0; left: 50%; width: calc(var(--s) * .2); margin-left: calc(var(--s) * -.1); transform-origin: 50% 100%; animation: sprout 2.4s ease-in-out infinite; }
.db-ring { position: absolute; left: 0; bottom: 0; width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden; border: max(2px, calc(var(--s) * .035)) solid #2dd4bf; box-shadow: 0 0 0 max(1px, calc(var(--s) * .015)) #0f766e, 0 6px 16px rgba(15, 118, 110, .35); background: #182638; }
.db-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.buddy.talking .db-ring { border-color: #5eead4; box-shadow: 0 0 0 2px #0f766e, 0 0 22px rgba(94, 234, 212, .8); }
.buddy.talking .db-bulb { fill: #a7fff2; }
.buddy.listening .db-ring { border-color: #ef4444; }

/* ---------- motion ---------- */
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes dance { from { transform: rotate(-8deg) translateY(0); } to { transform: rotate(8deg) translateY(-10px); } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-10px); } 75% { transform: translateX(10px); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, .0); } 50% { box-shadow: 0 0 0 5px rgba(249, 115, 22, .25); } }
@keyframes floatUp { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -60px); } }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }
@keyframes banner { 0% { opacity: 0; transform: scale(.6); } 15% { opacity: 1; transform: scale(1.08); } 25% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-30px); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .two { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .skill { grid-template-columns: 1fr 70px; }
  .skill .bar { grid-column: 1 / -1; grid-row: 2; }
  .hero-txt h1 { font-size: 1.7rem; }
  .hero-av svg { width: 70px; height: auto; }
  .tab { padding: 8px 10px; font-size: .95rem; }
  .today-pill { font-size: .8rem; }
  .splash-top { flex-direction: column; text-align: center; gap: 6px; }
  .splash-av svg { width: 80px; height: auto; }
  .ss { font-size: 1.1rem; }
  .q-dots span { width: 32px; height: 32px; font-size: 1rem; }
  .big-num, .big-letter { font-size: 3rem; }
  .ans { min-height: 96px; }
  .lvl-p .ans { min-height: 120px; }
  .q-answers { grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); }
  .ds b { font-size: .75rem; }
}
@media (max-width: 420px) {
  .brand span:last-child { display: none; }
  .tab { flex-direction: column; gap: 2px; padding: 6px 4px; font-size: .78rem; min-width: 0; flex: 1 1 0; }
  .tab-av svg { height: 30px; }
  .tab-ico { font-size: 1.3rem; }
}

/* learning plans */
.p-area { width: 100%; min-height: 110px; resize: vertical; font: inherit; }
.p-thumb { position: relative; display: inline-block; }
.p-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; border: 2px solid var(--line); }
.p-thumb button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: #111; color: #fff; font-size: .7rem; }
.p-plan { background: #fffaf2; border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; margin-top: 10px; }
.p-plan.off { opacity: .6; }
.p-plan p { margin: 6px 0; }
.p-kidtasks { margin-top: 8px; }
.p-kidtasks ol { margin: 4px 0 0; padding-left: 20px; font-size: .9rem; }
.p-kidtasks li { margin-bottom: 4px; }
.q-plan { background: #eef2ff; color: #3730a3; border-radius: 999px; padding: 3px 12px; font-size: .85rem; font-weight: 800; }
.plan-visual { font-size: 2.6rem; letter-spacing: .1em; line-height: 1.3; }
.p-who { margin: 8px 0; }
.p-whokid { padding: 10px 16px; border-radius: 14px; background: #f6f1fb; font-weight: 900; border: 3px solid transparent; min-height: 48px; }
.p-whokid small { font-weight: 700; color: var(--muted); }
.p-whokid.on { background: color-mix(in srgb, var(--kid) 16%, white); border-color: var(--kid); }
.p-doc { display: inline-flex; align-items: center; gap: 6px; background: #f6f1fb; border-radius: 10px; padding: 6px 8px 6px 10px; font-size: .9rem; font-weight: 700; max-width: 240px; }
.p-doc button { width: 22px; height: 22px; border-radius: 50%; background: #111; color: #fff; font-size: .7rem; flex: none; }
.p-kidplans { margin: 16px 0 4px; padding-left: 10px; border-left: 6px solid var(--kid); }
.p-kidtasks { margin: 4px 0 0; padding-left: 20px; font-size: .9rem; }

/* ---------- who's playing? ---------- */
.top[hidden], .tabs[hidden] { display: none !important; }
.pick { text-align: center; padding: 10px 0 30px; }
.pick-title { font-size: clamp(2rem, 7vw, 3.2rem); margin: 10px 0 22px; }
.pick-kids { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.pick-kid { background: #fff; border-radius: 28px; box-shadow: var(--shadow); padding: 20px 10px 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 5px solid transparent; border-top: 12px solid var(--kid); transition: transform .12s; }
.pick-kid:active { transform: scale(.96); }
.pick-av { background: color-mix(in srgb, var(--kid) 14%, white); border-radius: 22px; padding: 8px 18px; }
.pick-av svg { display: block; max-width: 100%; height: auto; }
.pick-kid b { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 900; }
.pick-sub { color: var(--muted); font-weight: 800; }
.pick-family { margin-top: 26px; }

/* ---------- kid bar (top) ---------- */
.kidbar { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 20px; padding: 8px 10px; box-shadow: var(--shadow); border-bottom: 4px solid var(--kid); }
.kb-back { padding: 10px 14px; border-radius: 14px; background: var(--bg2); font-weight: 900; min-height: 48px; white-space: nowrap; }
.kb-who { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.kb-who svg { height: 38px; width: auto; flex: none; }
.kb-who b { font-size: 1.3rem; }
.kb-lane { color: var(--muted); font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kb-right { display: flex; align-items: center; gap: 8px; }
.kb-pts { font-size: 1.15rem; }
.kb-store { min-height: 48px; padding: 8px 14px; font-size: 1rem; }

/* ---------- kid home ---------- */
.hub-hello { display: flex; align-items: center; gap: 12px; margin: 6px 0 16px; }
.hub-hello h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
.hub-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hub-tile { border-radius: 28px; padding: 22px 14px; min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: #fff; box-shadow: 0 6px 0 rgba(0, 0, 0, .15), var(--shadow); transition: transform .1s; text-align: center; }
.hub-tile:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.hub-tile .ht-ico { font-size: clamp(3rem, 10vw, 4.4rem); line-height: 1; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .15)); }
.hub-tile b { font-size: clamp(1.3rem, 4vw, 1.8rem); font-weight: 900; }
.hub-tile .ht-sub { font-weight: 800; opacity: .95; font-size: 1rem; }
.t-talk { background: linear-gradient(145deg, #2dd4bf, #0f766e); }
.t-chores { background: linear-gradient(145deg, #fbbf24, #ea580c); }
.t-learn { background: linear-gradient(145deg, #a78bfa, #6d28d9); }
.t-games { background: linear-gradient(145deg, #f472b6, #be185d); }
.t-day { background: linear-gradient(145deg, #60a5fa, #1d4ed8); }

/* ---------- lanes ---------- */
.lane { padding-top: 4px; }
.chores-card.big .chore { min-height: 84px; font-size: 1.4rem; }
.chores-card.big .chore .ce { font-size: 2.6rem; }
.learn-quest .quest-card { margin-bottom: 16px; }
.day-card { border-top: 14px solid var(--day); }
.day-say { width: 100%; background: var(--day); box-shadow: 0 5px 0 color-mix(in srgb, var(--day) 65%, black); }

/* ---------- talk lane ---------- */
body.lane-talk .buddy { display: none; }
.talk-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 6px 0 12px; }
.talk-face { width: min(300px, 70vw); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 8px solid #2dd4bf; box-shadow: 0 0 0 4px #0f766e, 0 0 40px rgba(94, 234, 212, .6); background: #182638; animation: float 3.4s ease-in-out infinite; }
.talk-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
body[data-talk="listening"] .talk-face { border-color: #ef4444; box-shadow: 0 0 0 4px #991b1b, 0 0 40px rgba(239, 68, 68, .5); }
body[data-talk="thinking"] .talk-face { animation: think 1s ease-in-out infinite; }
.talk-status { font-weight: 900; font-size: 1.2rem; text-align: center; min-height: 1.5em; }
.talk-mic { position: relative; width: 104px; height: 104px; border-radius: 50%; background: #fff; border: 5px solid #2dd4bf; font-size: 3rem; box-shadow: 0 6px 0 #0f766e; display: grid; place-items: center; }
.talk-mic:active { transform: translateY(4px); box-shadow: 0 2px 0 #0f766e; }
.talk-mic .mic-ring { transform: scale(calc(1 + var(--lvl, 0) * .6)); }
body[data-talk="listening"] .talk-mic { background: #fee2e2; border-color: #ef4444; }
body[data-talk="listening"] .talk-mic .mic-ring { opacity: .85; }
.talk-ideas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.talk-idea { background: #fff; border-radius: 18px; padding: 12px; font-weight: 800; box-shadow: var(--shadow); display: flex; align-items: center; gap: 8px; text-align: left; min-height: 60px; }
.talk-idea span { font-size: 1.8rem; }
.talk-thread { display: flex; flex-direction: column; gap: 10px; }
.tm { max-width: 88%; padding: 12px 16px; border-radius: 20px; font-weight: 700; font-size: 1.1rem; line-height: 1.35; }
.tm.kid { align-self: flex-end; background: color-mix(in srgb, var(--kid) 18%, white); border-bottom-right-radius: 6px; }
.tm.bot { align-self: flex-start; background: #fff; border: 3px solid #99f6e4; border-bottom-left-radius: 6px; box-shadow: var(--shadow); }
.tm-img { margin: 10px 0 0; }
.tm-img img { width: 100%; max-height: 340px; object-fit: cover; border-radius: 14px; display: block; background: #eee; }
.tm-img figcaption { font-size: .85rem; font-weight: 800; margin-top: 4px; }
.tm-steps { margin: 10px 0 0; padding-left: 26px; display: grid; gap: 6px; }
.tm-steps li { background: #f0fdfa; border-radius: 10px; padding: 6px 10px; }
.talk-type { display: flex; gap: 8px; margin-top: 14px; }
.talk-type input { flex: 1; min-width: 0; padding: 12px 16px; border-radius: 14px; border: 3px solid #99f6e4; font-size: 1.1rem; }

@media (max-width: 760px) {
  .pick-kids { grid-template-columns: 1fr; }
  .pick-kid { flex-direction: row; justify-content: flex-start; gap: 16px; padding: 12px 16px; border-top-width: 5px; border-left: 12px solid var(--kid); }
  .pick-av svg { width: 70px; }
  .pick-kid b { font-size: 1.6rem; }
  .hub-tile { min-height: 150px; }
  .kb-lane, .kb-store span, .kb-back span { display: none; }
  .talk-ideas { grid-template-columns: 1fr; }
}
.tabs .kidbar { flex: 1; }

/* ---------- guided exploring ---------- */
.ex-topics { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 10px; scrollbar-width: none; margin-bottom: 4px; }
.ex-topic { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 88px; padding: 10px 10px 8px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); font-weight: 900; font-size: .9rem; border: 3px solid transparent; }
.ex-topic span { font-size: 2rem; }
.ex-topic.on { border-color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, white); color: color-mix(in srgb, var(--tc) 70%, black); }
.ex-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 8px; font-size: 1.15rem; }
.ex-shuffle { padding: 8px 12px; border-radius: 12px; background: var(--bg2); font-weight: 800; }
.talk-idea { border-left: 6px solid var(--tc, #2dd4bf); }
.tm-follow { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tm-follow small { width: 100%; font-weight: 900; color: #0f766e; }
.tm-follow button { background: #f0fdfa; border: 2px solid #5eead4; border-radius: 999px; padding: 8px 14px; font-weight: 800; font-size: 1rem; text-align: left; }

/* ---------- talk stage: picture front and center, Daddy Bot docked beside it ---------- */
.stage-row { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
.stage-say { display: contents; }
.stage-img { position: relative; margin: 0; width: 100%; border-radius: 26px; overflow: hidden; background: #0f172a; box-shadow: 0 10px 30px rgba(15, 23, 42, .25); animation: pop .35s both; }
.stage-img img { display: block; width: 100%; height: min(58vh, 560px); object-fit: contain; background: radial-gradient(circle at 50% 40%, #1e293b, #0f172a); }
.stage-img figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 10px 150px; color: #fff; font-weight: 900; font-size: 1.05rem; background: linear-gradient(transparent, rgba(0, 0, 0, .6)); text-align: right; }
.stage-close { position: absolute; top: 10px; right: 10px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .92); font-size: 1.2rem; font-weight: 900; box-shadow: var(--shadow); }
.talk-stage.showing { gap: 0; }
.talk-stage.showing .stage-row { flex-direction: row; align-items: flex-start; gap: 12px; margin-top: -64px; padding: 0 10px; position: relative; z-index: 1; }
.talk-stage.showing .stage-say { display: flex; flex-direction: column; flex: 1; min-width: 0; padding-top: 72px; }
.talk-stage.showing .talk-face { width: 128px; flex: none; border-width: 6px; animation: none; }
.talk-stage.showing .talk-status { display: none; }
.talk-stage.showing .talk-mic { width: 84px; height: 84px; font-size: 2.3rem; flex: none; margin-top: 76px; }
.stage-reply { background: #fff; border: 3px solid #99f6e4; border-radius: 20px; border-top-left-radius: 6px; padding: 12px 16px; font-weight: 800; font-size: 1.15rem; line-height: 1.35; box-shadow: var(--shadow); }
@media (max-width: 760px) {
  .stage-img img { height: 46vh; }
  .stage-img figcaption { padding-left: 110px; font-size: .9rem; }
  .talk-stage.showing .stage-row { margin-top: -48px; gap: 8px; padding: 0 4px; }
  .talk-stage.showing .talk-face { width: 92px; }
  .talk-stage.showing .stage-say { padding-top: 54px; }
  .talk-stage.showing .talk-mic { width: 64px; height: 64px; font-size: 1.8rem; margin-top: 56px; }
}
.talk-stage.answered .talk-status { display: none; }
.talk-stage.answered:not(.showing) .stage-reply { max-width: 640px; width: 100%; border-top-left-radius: 20px; }
.sr-asked { font-style: italic; color: var(--muted); font-weight: 800; margin-bottom: 4px; }
.thread-head { font-weight: 900; color: var(--muted); margin: 6px 4px 0; }

.connect-card { margin: 26px auto 0; max-width: 560px; text-align: left; border-top: 8px solid #2dd4bf; }
.connect-card .row input { flex: 1; min-width: 180px; }

/* ---------- volume ---------- */
.top-right { display: flex; align-items: center; gap: 8px; }
.kb-vol { width: 48px; height: 48px; border-radius: 14px; background: var(--bg2); font-size: 1.5rem; display: grid; place-items: center; flex: none; }
.vol-pop { position: fixed; z-index: 95; width: min(340px, calc(100vw - 20px)); background: #fff; border-radius: 22px; padding: 14px 16px 16px; box-shadow: 0 16px 40px rgba(0, 0, 0, .22); border: 3px solid #2dd4bf; animation: pop .2s both; }
.vp-head { display: flex; justify-content: space-between; align-items: center; font-size: 1.15rem; }
.vp-x { width: 40px; height: 40px; border-radius: 12px; background: var(--bg2); font-weight: 900; }
.vol-pop input[type=range] { width: 100%; height: 44px; margin: 10px 0; accent-color: #0d9488; }
.vp-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.vp-presets button { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border-radius: 14px; background: #f0fdfa; font-weight: 800; font-size: .85rem; border: 3px solid transparent; }
.vp-presets button span { font-size: 1.6rem; }
.vp-presets button.on { border-color: #0d9488; background: #ccfbf1; }
.p-lab input[type=range] { width: 100%; accent-color: #0d9488; min-height: 36px; }
@media (max-width: 760px) { .kb-vol { width: 42px; height: 42px; font-size: 1.3rem; } }
.kb-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 420px) {
  .kidbar { gap: 6px; padding: 6px; }
  .kb-who svg { display: none; }
  .kb-back, .kb-store { padding: 8px 10px; min-height: 42px; }
  .kb-pts { padding: 6px 8px; font-size: 1rem; }
}
.pin-forgot { margin-top: 12px; color: var(--muted); font-weight: 800; text-decoration: underline; padding: 8px; }
.pin-reset { display: grid; gap: 8px; margin-top: 12px; text-align: left; }
.pin-reset[hidden] { display: none; }

/* ---------- home: the world map ---------- */
body.map-mode { overflow: hidden; }
body.map-mode .top, body.map-mode .tabs, body.map-mode .foot { display: none !important; }
body.map-mode #view { max-width: none; padding: 0; }
.map-screen { position: fixed; inset: 0; background: #7ec8ff; overflow: hidden; }
.map-stage { position: absolute; inset: 0; }
.map-canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
.map-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.day-plate { position: absolute; left: 0; top: 0; padding: 3px 8px 4px; border-radius: 8px; background: rgba(28, 26, 38, .72); color: #fff6dc; font: 800 clamp(.62rem, 1.1vw, .8rem)/1 var(--font); letter-spacing: .03em; border: 1.5px solid rgba(232, 185, 73, .7); white-space: nowrap; pointer-events: none; will-change: transform; }
.day-plate.done { background: rgba(21, 128, 61, .88); border-color: #4ade80; color: #fff; }
.day-plate.missed { background: rgba(55, 60, 70, .72); border-color: rgba(156, 163, 175, .7); color: #d1d5db; text-decoration: line-through; text-decoration-thickness: 1.5px; }
.day-plate.future { opacity: .8; }
.day-plate.today { background: rgba(58, 47, 16, .85); border-color: #ffd65a; color: #fff; }
.today-tag { position: absolute; left: 0; top: 0; padding: 3px 7px; border-radius: 7px; pointer-events: none; background: #1c160a; color: #ffd65a; font: 900 .62rem/1 var(--font); letter-spacing: .08em; border: 2px solid #ffd65a; animation: tagGlow 1.6s ease-in-out infinite; will-change: transform; }
@keyframes tagGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 214, 90, .0); } 50% { box-shadow: 0 0 14px 4px rgba(255, 214, 90, .7); } }

.map-tl { position: absolute; top: max(12px, env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); display: flex; flex-direction: column; gap: 8px; z-index: 5; }
.map-title { font-weight: 900; font-size: clamp(1.3rem, 3.4vw, 2rem); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .35), 0 0 18px rgba(0, 0, 0, .25); }
.map-players { display: flex; gap: 10px; }
.map-player { display: flex; flex-direction: column; align-items: center; gap: 2px; background: none; }
.mp-av { width: 72px; height: 72px; border-radius: 50%; background: rgba(255, 255, 255, .9); border: 4px solid rgba(255, 255, 255, .95); box-shadow: 0 6px 14px rgba(0, 0, 0, .3); display: grid; place-items: center; overflow: hidden; transition: transform .15s, border-color .15s, opacity .15s; }
.mp-av svg { height: 64px; width: auto; margin-top: 10px; }
.map-player b { color: #fff; font-weight: 900; font-size: .95rem; text-shadow: 0 2px 0 rgba(0, 0, 0, .45); }
.map-players.picked .map-player:not(.on) .mp-av { opacity: .65; transform: scale(.88); }
.map-player.on .mp-av { border-color: var(--kid); box-shadow: 0 0 0 4px #fff, 0 0 22px var(--kid), 0 6px 14px rgba(0, 0, 0, .3); transform: scale(1.08); }
.map-me { display: flex; align-items: center; gap: 8px; }
.map-me[hidden] { display: none; }
.map-me .chip { font-size: 1.1rem; box-shadow: var(--shadow); }
.ma-store { background: linear-gradient(145deg, #4ade80, #15803d); }
.map-tr .kid-only[hidden] { display: none; }

.map-tr { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; max-width: 60vw; z-index: 5; }
.map-theme, .map-tr .today-pill { background: rgba(255, 255, 255, .92); border-radius: 999px; padding: 8px 14px; font-weight: 900; box-shadow: var(--shadow); white-space: nowrap; }
.map-icon, .map-tr .kb-vol { width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .92); font-size: 1.4rem; box-shadow: var(--shadow); display: grid; place-items: center; }

.map-actions { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; gap: 10px; opacity: 0; pointer-events: none; z-index: 6; will-change: transform; }
.map-actions.show { opacity: 1; pointer-events: auto; }
.map-actions.show .ma { animation: popIn .35s both; }
.map-actions.show .ma:nth-child(2) { animation-delay: .06s; } .map-actions.show .ma:nth-child(3) { animation-delay: .12s; } .map-actions.show .ma:nth-child(4) { animation-delay: .18s; } .map-actions.show .ma:nth-child(5) { animation-delay: .24s; }
.ma { display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 10px 18px 10px 12px; border-radius: 20px; color: #fff; font-weight: 900; font-size: 1.2rem; box-shadow: 0 5px 0 rgba(0, 0, 0, .25), 0 10px 22px rgba(0, 0, 0, .25); border: 3px solid rgba(255, 255, 255, .7); text-align: left; }
.ma span { font-size: 1.9rem; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .2)); }
.ma:active { transform: translateY(3px); }
.ma-game { background: linear-gradient(145deg, #a78bfa, #6d28d9); font-size: 1.35rem; padding: 14px 20px 14px 14px; }
.ma-games { background: linear-gradient(145deg, #f472b6, #be185d); }
.ma-talk { background: linear-gradient(145deg, #2dd4bf, #0f766e); }
.ma-chores { background: linear-gradient(145deg, #fbbf24, #ea580c); }
.ma-day { background: linear-gradient(145deg, #60a5fa, #1d4ed8); }
@keyframes popIn { from { opacity: 0; transform: translateX(-20px) scale(.7); } to { opacity: 1; transform: none; } }
.map-actions.left .ma { flex-direction: row-reverse; text-align: right; padding: 10px 12px 10px 18px; }
.tp-short { display: none; }
/* phones held upright: kids across the top, then one row of buttons below them */
@media (max-width: 600px) and (orientation: portrait) {
  .map-tl { right: max(10px, env(safe-area-inset-right)); left: max(10px, env(safe-area-inset-left)); gap: 4px; }
  .map-title { font-size: 1.2rem; }
  .map-players { gap: 4px; justify-content: space-around; overflow-x: auto; scrollbar-width: none; padding: 2px 2px 4px; }
  .map-player { flex: 0 0 auto; min-width: 70px; }
  .mp-av { width: 54px; height: 54px; border-width: 3px; }
  .map-player b { font-size: .85rem; }
  .mp-stars, .mp-lv { font-size: .66rem; padding: 3px 6px; }
  .mp-lv { padding-bottom: 5px; }
  .map-tr { top: calc(max(10px, env(safe-area-inset-top)) + 150px); left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); max-width: none !important; flex-wrap: nowrap; gap: 6px; justify-content: flex-end; }
  .map-tr .today-pill { margin-right: auto; padding: 6px 10px; font-size: .8rem; }
  .map-tr .tp-long { display: none; } .map-tr .tp-short { display: inline; }
  .map-icon, .map-tr .kb-vol { width: 40px; height: 40px; border-radius: 12px; font-size: 1.15rem; flex: none; }
  .map-tr .fs-btn { display: none; }
}
.map-connect { position: absolute; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(560px, calc(100vw - 24px)); margin: 0; z-index: 7; }

@media (max-width: 760px) {
  .mp-av { width: 58px; height: 58px; }
  .mp-av svg { height: 52px; }
  .map-theme { display: none; }
  .map-tr { max-width: 52vw; }
  .map-tr .today-pill { font-size: .8rem; padding: 6px 10px; }
  .ma { min-width: 160px; font-size: 1rem; padding: 8px 14px 8px 10px; }
  .ma span { font-size: 1.5rem; }
  .ma-game { font-size: 1.1rem; }
  .day-plate { padding: 2px 6px; }
}

/* ---------- kid portrait badges + 3D store preview ---------- */
.av-photo { position: relative; display: inline-block; width: var(--s); height: var(--s); flex: none; vertical-align: middle; }
.av-photo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; background: #2b2b2b; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.av-st { position: absolute; font-size: calc(var(--s) * .3); line-height: 1; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35)); pointer-events: none; }
.av-st.hat { top: -10%; right: -4%; }
.av-st.hand { bottom: -4%; right: -8%; }
.av-st.off { bottom: -4%; left: -8%; }
.av-st.fit { top: -6%; left: -6%; font-size: calc(var(--s) * .24); }
.mp-av .av-photo { width: 100%; height: 100%; }
.mp-av .av-photo img { box-shadow: none; }
.mp-av .av-st { display: none; }
.kb-who .av-st { display: none; }
.st-av.st-3d { width: 210px; height: 270px; animation: none; border-radius: 20px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--kid) 22%, white), color-mix(in srgb, var(--kid) 8%, white) 70%); }
.st-3d > div, .st-3d canvas { width: 100%; height: 100%; display: block; }
.st-item { position: relative; }
.st-lvl { position: absolute; top: 4px; left: 4px; font: 800 .62rem/1 var(--font); background: #1f2937; color: #fde68a; padding: 2px 5px; border-radius: 6px; }
.st-lv { white-space: nowrap; display: inline-block; font: 800 .7rem/1 var(--font); background: #1f2937; color: #fde68a; padding: 3px 6px; border-radius: 6px; vertical-align: middle; }
@media (max-width: 560px) { .st-av.st-3d { width: 150px; height: 200px; } }

/* ---------- extra practice (after the daily quest) ---------- */
.practice { margin-top: 14px; padding-top: 12px; border-top: 2px dashed color-mix(in srgb, var(--kid) 30%, #e5e7eb); text-align: center; }
.practice h3 { margin: 0 0 4px; }
.practice-done .row { gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

/* ---------- games ---------- */
.games { display: grid; gap: 16px; }
.games-time { display: grid; gap: 12px; justify-items: center; }
.gt-left { display: grid; justify-items: center; }
.gt-clock { font: 900 2.2rem/1 var(--font); color: var(--kid); }
.gt-buy { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.gt-opt { display: grid; gap: 2px; justify-items: center; min-width: 96px; padding: 10px 14px; border-radius: 16px; background: linear-gradient(145deg, #f472b6, #be185d); color: #fff; font-weight: 900; box-shadow: 0 4px 0 rgba(0, 0, 0, .2); border: 2px solid rgba(255, 255, 255, .7); }
.gt-opt b { font-size: 1.1rem; }
.gt-opt span { font-size: .9rem; opacity: .95; }
.gt-opt.off { filter: grayscale(.8); opacity: .55; }
.gt-note { max-width: 460px; margin: 0; }
.games-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.game-card { position: relative; display: grid; gap: 4px; justify-items: center; padding: 18px 10px 14px; border-radius: 20px; background: #fff; border: 3px solid color-mix(in srgb, var(--gc) 45%, white); box-shadow: 0 4px 0 color-mix(in srgb, var(--gc) 30%, #d1d5db); text-align: center; }
.game-card b { font-size: 1.05rem; }
.gc-emoji { font-size: 2.6rem; line-height: 1; }
.game-card.soon .gc-emoji { filter: grayscale(.35); }
.gc-soon { position: absolute; top: 8px; right: 8px; font: 800 .62rem/1 var(--font); background: #1f2937; color: #fde68a; padding: 3px 6px; border-radius: 6px; }
.game-ov .game-ov-box { position: fixed; inset: 0; display: grid; grid-template-rows: auto 1fr; background: #fff; }
.game-stage { position: relative; overflow: hidden; }

/* ---------- Frank's Big Run ---------- */
.fr-wrap { position: absolute; inset: 0; overflow: hidden; background: #cfeeff; touch-action: none; user-select: none; -webkit-user-select: none; }
.fr-canvas { display: block; touch-action: none; }
.fr-hud { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; justify-content: space-between; font: 900 clamp(1rem, 3vh, 1.5rem)/1 var(--font); color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .45); pointer-events: none; }
.fr-screen { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(20, 40, 60, .25); padding: 16px; }
.fr-card { background: rgba(255, 255, 255, .95); border-radius: 24px; padding: 20px 26px; text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); max-width: 420px; }
.fr-card h2 { margin: 0 0 6px; font-size: 1.7rem; }
.fr-card p { margin: 6px 0; }
.fr-how { display: grid; gap: 6px; margin: 12px 0; font-size: 1.15rem; }
.fr-small { font-size: .9rem; opacity: .75; }
.fr-big { font: 900 3rem/1 var(--font); color: #f59e0b; }
.fr-card .btn { margin-top: 10px; }
.fr-screen[hidden] { display: none; }
body.in-game .buddy { display: none; }

/* ---------- high scores ---------- */
.mp-best { display: block; margin-top: 2px; font: 800 .68rem/1 var(--font); color: #fff; background: rgba(28, 26, 38, .7); padding: 3px 6px; border-radius: 999px; white-space: nowrap; }
.fr-board { list-style: none; margin: 10px auto 4px; padding: 0; display: grid; gap: 4px; max-width: 260px; text-align: left; }
.fr-board li { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 10px; background: color-mix(in srgb, var(--kid) 10%, white); }
.fr-board li.me { outline: 2px solid var(--kid); }
.fr-board em { font-style: normal; font-weight: 900; color: #b45309; }
.hs-card h2 { margin: 0 0 8px; }
.hs-game + .hs-game { margin-top: 12px; }
.hs-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.hs-list li { display: grid; grid-template-columns: 30px 1fr auto auto; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: color-mix(in srgb, var(--kid) 12%, white); border-left: 5px solid var(--kid); }
.hs-medal { font-size: 1.3rem; }
.hs-list b { font-size: 1.15rem; }
.gc-best { font: 800 .75rem/1 var(--font); color: #b45309; margin-top: 2px; }

/* game tiles with a gameplay picture header */
.game-card { padding: 0; overflow: hidden; gap: 0; align-content: start; }
.gc-shot { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg, color-mix(in srgb, var(--gc) 35%, white), color-mix(in srgb, var(--gc) 70%, #1f2937)); border-bottom: 3px solid color-mix(in srgb, var(--gc) 45%, white); }
.gc-shot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gc-shot .gc-emoji { font-size: 3rem; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .25)); }
.game-card.soon .gc-shot { filter: saturate(.6); }
.gc-play { position: absolute; right: 8px; bottom: 8px; font: 900 .8rem/1 var(--font); color: #fff; background: rgba(0, 0, 0, .55); padding: 6px 10px; border-radius: 999px; }
.gc-body { display: grid; gap: 3px; justify-items: center; padding: 10px 10px 12px; }
.games-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }

/* ---------- C10 Cruise ---------- */
.c10-wrap { position: absolute; inset: 0; overflow: hidden; background: #a9d8f5; touch-action: none; user-select: none; -webkit-user-select: none; }
.c10-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.c10-hud { position: absolute; top: 10px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; font: 900 clamp(1rem, 3vh, 1.4rem)/1 var(--font); color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); pointer-events: none; }
.c10-street { background: #1f6f3f; border: 2px solid #fff; border-radius: 6px; padding: 4px 10px; font-size: .9rem; text-shadow: none; }
.c10-street:empty { display: none; }
.c10-banner { position: absolute; top: 18%; left: 0; right: 0; display: grid; place-items: center; pointer-events: none; }
.c10-banner[hidden] { display: none; }
.c10-sign { display: grid; justify-items: center; background: #1f6f3f; color: #fff; border: 4px solid #fff; outline: 3px solid #1f6f3f; border-radius: 10px; padding: 10px 26px; font: 900 clamp(1.6rem, 5vw, 2.6rem)/1.1 var(--font); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.c10-sign small { font-size: .45em; font-weight: 700; opacity: .9; }
.c10-banner.pop .c10-sign { animation: signPop .5s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes signPop { from { transform: scale(.4) translateY(-20px); opacity: 0; } to { transform: none; opacity: 1; } }
.c10-screen { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; }
.c10-screen[hidden] { display: none; }
.c10-screen.low { align-items: end; padding-bottom: 5vh; }
.c10-screen.low .fr-card { background: rgba(255, 255, 255, .9); }
.c10-screen.low { justify-items: end; }
.c10-screen.low .fr-card { max-width: 340px; padding: 14px 18px; }
.c10-screen.low .fr-card h2 { font-size: 1.35rem; }
@media (max-width: 600px) { .c10-screen.low { justify-items: center; } }
/* coming-soon games: greyed out */
.game-card.soon { filter: grayscale(1); opacity: .55; border-color: #d1d5db; box-shadow: 0 4px 0 #d1d5db; cursor: default; }
.game-card.soon .gc-shot { filter: none; }
.game-card.soon .gc-soon { background: #4b5563; color: #fff; }

/* ---------- Picture Guess ---------- */
.pic-wrap { display: grid; place-items: center; }
.q-pic { width: min(420px, 80vw); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); border: 4px solid #fff; background: #eef2f7; }
.q-pic.pic-emoji { display: grid; place-items: center; font-size: 7rem; }
.q-answers.pics { grid-template-columns: repeat(3, 1fr); }
.q-answers.pics .ans { padding: 6px; }
.pic-choice { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; display: block; background: #eef2f7; }
.pic-choice.pic-emoji { display: grid; place-items: center; font-size: 4rem; }
.ans { position: relative; }
.ans-say { position: absolute; top: 4px; right: 6px; font-size: .9rem; opacity: .7; }

/* ---------- Daddy Bot help on a question ---------- */
.q-help { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; margin-top: 14px; }
.qh-label { font-weight: 800; color: #64748b; font-size: .9rem; }
.qh-btn { padding: 8px 14px; border-radius: 999px; background: #ecfeff; border: 2px solid #99f6e4; color: #0f766e; font-weight: 800; font-size: .95rem; }
.qh-btn.on { background: #14b8a6; color: #fff; border-color: #0f766e; }
.q-helpcard { margin: 12px auto 0; max-width: 560px; background: #f0fdfa; border: 2px solid #5eead4; border-radius: 18px; padding: 12px 16px; text-align: left; animation: popIn .3s both; }
.q-helpcard p { margin: 4px 0; font-size: 1.05rem; }
.hc-title { font-weight: 900; color: #0f766e; }
.hc-think { color: #0f766e; font-weight: 700; }
.hc-steps { margin: 8px 0 0; padding-left: 22px; display: grid; gap: 4px; font-weight: 700; }

/* ---------- Rail Rush ---------- */
.rr-rides { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.rr-ride { display: grid; justify-items: center; gap: 2px; padding: 10px 8px; border-radius: 16px; background: #f1f5f9; border: 3px solid #e2e8f0; }
.rr-ride span { font-size: 2.4rem; line-height: 1; }
.rr-ride small { color: #64748b; font-weight: 700; }
.rr-ride.on { background: #e0f2fe; border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14, 165, 233, .25); }

/* UA Drive (free-drive Upper Arlington) */
.ua-wrap { position: absolute; inset: 0; overflow: hidden; background: #a9d8f5; touch-action: none; user-select: none; -webkit-user-select: none; }
.ua-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
.ua-radar { position: absolute; top: 10px; left: 12px; display: grid; justify-items: center; gap: 6px; pointer-events: none; }
.ua-radar canvas { width: clamp(130px, 22vmin, 190px); height: clamp(130px, 22vmin, 190px); border-radius: 50%; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.ua-street { background: #16663a; color: #fff; border: 2px solid #fff; border-radius: 6px; padding: 3px 10px; font: 800 .9rem/1.2 var(--font); white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, .3); }
.ua-street:empty { display: none; }
.ua-score { position: absolute; top: 10px; right: 12px; display: grid; justify-items: end; gap: 4px; font: 900 clamp(1rem, 3vh, 1.4rem)/1 var(--font); color: #fff; text-shadow: 0 2px 4px rgba(0, 0, 0, .5); pointer-events: none; }
.ua-best { font-size: .75em; }
.ua-pad { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); display: flex; gap: 12px; }
.ua-steer { left: 14px; }
.ua-pedals { right: 14px; }
.ua-pad button { width: clamp(64px, 11vmin, 88px); height: clamp(64px, 11vmin, 88px); border-radius: 18px; border: 3px solid rgba(255, 255, 255, .8); background: rgba(17, 24, 39, .45); color: #fff; font-size: clamp(1.6rem, 4vmin, 2.2rem); touch-action: none; -webkit-tap-highlight-color: transparent; backdrop-filter: blur(4px); }
.ua-pad button.on { background: rgba(255, 255, 255, .45); transform: scale(.95); }
.ua-pedals button[data-k="gas"] { background: rgba(22, 163, 74, .6); }
.ua-pedals button[data-k="brake"] { background: rgba(220, 38, 38, .55); }
.ua-credit { position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); font: 600 9px/1.2 var(--font); color: rgba(255, 255, 255, .85); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); pointer-events: none; white-space: nowrap; }

/* Grown-ups: game availability + test */
.p-games { display: grid; gap: 6px; margin-top: 8px; }
.p-game { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: rgba(0, 0, 0, .04); }
.p-game.off .p-gname { opacity: .55; }
.p-gname { flex: 1; min-width: 150px; font-weight: 700; }

/* Map pick: stars + Hero Level under each kid */
.mp-stats { display: flex; flex-direction: column; align-items: center; gap: 3px; margin-top: 3px; }
.mp-stars, .mp-lv { font: 900 .72rem/1 var(--font); color: #fff; background: rgba(28, 26, 38, .72); padding: 4px 8px; border-radius: 999px; white-space: nowrap; }
.mp-stars { color: #fde68a; }
.mp-lv { position: relative; overflow: hidden; padding-bottom: 6px; }
.mp-lv i { position: absolute; left: 6px; right: 6px; bottom: 2px; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.mp-lv i::after { content: ''; position: absolute; inset: 0; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, #facc15, #f97316); }

/* Store: Hero Level strip + gear power on items */
.st-hero { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border-radius: 14px; background: color-mix(in srgb, var(--kid) 12%, white); }
.sh-badge { font-weight: 900; }
.sh-bar { flex: 1; min-width: 90px; height: 10px; border-radius: 999px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.sh-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #facc15, #f97316); transition: width .6s; }
.st-pw { display: block; font: 800 .68rem/1 var(--font); color: #b45309; margin-top: 2px; }

/* LEVEL UP moment */
.lvlup { position: fixed; inset: 0; display: grid; place-items: center; z-index: 9999; pointer-events: none; }
.lvlup > div { display: grid; justify-items: center; gap: 4px; padding: 22px 34px; border-radius: 24px; background: linear-gradient(160deg, #fde68a, #f97316); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .25); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); transform: scale(.3); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.6, .4, 1), opacity .3s; }
.lvlup.go > div { transform: scale(1); opacity: 1; }
.lvlup span { font-size: 4rem; line-height: 1; }
.lvlup b { font: 900 clamp(2rem, 7vw, 3rem)/1 var(--font); letter-spacing: .03em; }
.lvlup small { font: 800 1.1rem/1.2 var(--font); }

/* 🏆 Game leaderboards */
.boards { width: min(900px, 100%); max-height: 90vh; overflow: auto; background: #fff; border-radius: 22px; padding: 16px; }
.boards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.board-card { border-radius: 16px; overflow: hidden; background: color-mix(in srgb, var(--gc) 8%, white); border: 2px solid color-mix(in srgb, var(--gc) 35%, white); }
.bc-head { position: relative; }
.bc-head img { display: block; width: 100%; height: 90px; object-fit: cover; }
.bc-head .bc-emoji { display: grid; place-items: center; height: 60px; font-size: 2rem; }
.bc-head b { position: absolute; left: 8px; bottom: 6px; color: #fff; font-weight: 900; text-shadow: 0 2px 4px rgba(0, 0, 0, .7); }
.bc-list { list-style: none; margin: 0; padding: 8px; display: grid; gap: 4px; }
.bc-list li { display: grid; grid-template-columns: 24px 28px 1fr auto auto; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 10px; background: color-mix(in srgb, var(--kid) 12%, white); }
.bc-list li b { font-size: 1.05rem; }
.bc-av svg { display: block; }

/* 🎓 Learning: School or Life Skills */
.learn-pick { width: min(640px, 100%); background: #fff; border-radius: 24px; padding: 16px; }
.lp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .lp-cards { grid-template-columns: 1fr; } }
.lp-card { display: grid; justify-items: center; gap: 6px; padding: 18px 14px; border-radius: 20px; border: 3px solid transparent; text-align: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .1); transition: transform .15s; }
.lp-card:active { transform: scale(.97); }
.lp-card.school { background: linear-gradient(160deg, #dbeafe, #eff6ff); border-color: #93c5fd; }
.lp-card.life { background: linear-gradient(160deg, #fce7f3, #fff1f2); border-color: #f9a8d4; }
.lp-ic { font-size: 3.2rem; line-height: 1; }
.lp-card b { font: 900 1.5rem/1.1 var(--font); }
.lp-sub { font-size: .9rem; color: #475569; }
.lp-tag { font: 800 .78rem/1 var(--font); padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .85); }
.life-card { border: 2px solid #f9a8d4; background: linear-gradient(160deg, #fff1f2, #fff); }

/* 💛 Life Skills tasks */
.life-scene { font-size: clamp(2.6rem, 9vw, 4rem); text-align: center; letter-spacing: .08em; padding: 6px 0; }
.life-q { text-align: center; font-weight: 800; color: #be185d; margin: 2px 0 0; }
.life-opt { display: flex; align-items: center; gap: 10px; text-align: left; font-weight: 700; line-height: 1.25; }
.life-opt .lo-e { font-size: 1.8rem; flex: none; }
.life-opt.p { flex-direction: column; text-align: center; gap: 4px; }
.life-opt.p .lo-e { font-size: 3rem; }
.listen-box { display: grid; justify-items: center; gap: 8px; padding: 14px; border-radius: 18px; background: #ecfeff; border: 2px dashed #67e8f9; }
.lb-ear { font-size: 3rem; line-height: 1; animation: lbPulse 1.6s ease-in-out infinite; }
@keyframes lbPulse { 50% { transform: scale(1.12); } }
.q-visual:has(.life-scene), .q-visual:has(.listen-box) { display: block; width: 100%; }
.q-visual .life-scene { display: block; width: 100%; font-size: clamp(3rem, 11vw, 4.6rem); }

/* 📈 learning + game stats */
.act-tbl { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: .92rem; }
.act-tbl thead th { font: 800 .72rem/1 var(--font); color: #64748b; text-transform: uppercase; letter-spacing: .04em; text-align: right; padding: 0 8px 2px; }
.act-tbl tbody th { text-align: left; font-weight: 700; padding: 6px 8px; background: color-mix(in srgb, var(--kid) 8%, white); border-radius: 10px 0 0 10px; }
.act-tbl tbody td { text-align: right; font-weight: 900; padding: 6px 8px; background: color-mix(in srgb, var(--kid) 8%, white); }
.act-tbl tbody td:last-child { border-radius: 0 10px 10px 0; }
.act-games { display: grid; gap: 6px; margin-top: 8px; }
.act-game { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--gc) 10%, white); border-left: 4px solid var(--gc); font-size: .88rem; }
.act-game b { flex: 1 1 100%; }
.lp-stats { display: block; margin: 12px auto 0; }

/* Next ▶ floats at the bottom of lessons */
.next-float { position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); transform: translate(-50%, 140%); z-index: 5000; font-size: 1.3rem; padding: 16px 44px; border-radius: 999px; box-shadow: 0 10px 28px rgba(0, 0, 0, .3); transition: transform .3s cubic-bezier(.2, 1.4, .4, 1); }
.next-float.in { transform: translate(-50%, 0); }
.quest .q-main { padding-bottom: 110px; }

/* question bank illustrations: one shared style */
.viz { display: inline-grid; place-items: center; background: #fff; border: 3px solid #e5e7eb; border-radius: 18px; padding: 10px 14px; box-shadow: 0 4px 0 #e5e7eb; }
.v-dice { width: 86px; height: 86px; }
.v-frame { width: min(210px, 42vw); }
.v-line { width: 100%; }
.viz:has(.v-line) { width: min(660px, 100%); }
.v-base { height: 150px; max-width: 100%; }
.v-tally { height: 70px; }
.v-clock { width: 170px; height: 170px; }
.v-coins { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; }
.v-coin { height: auto; }
.v-frac { width: 150px; height: 150px; }
.v-frac.wide { width: 230px; height: 100px; }
.v-ruler { width: min(420px, 100%); }
.v-graph { width: min(380px, 100%); }
.v-len { width: min(300px, 70vw); height: 40px; }
.v-pattern { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.v-pattern span { display: grid; place-items: center; min-width: 58px; height: 58px; padding: 0 8px; font-size: 2rem; font-weight: 900; background: #fff; border: 3px solid #e5e7eb; border-radius: 14px; }
.v-pattern span.q { border-style: dashed; border-color: #a78bfa; color: #7c3aed; background: #f5f3ff; }
.v-story { display: flex; gap: 14px; align-items: center; background: #fff8ec; border: 3px solid #fde2b8; border-radius: 18px; padding: 12px 16px; max-width: 600px; text-align: left; }
.v-story .vs-pic { font-size: 3.2rem; flex: none; }
.v-story p { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.4; }
.v-bar { width: min(420px, 100%); display: grid; gap: 6px; font: 900 1.6rem/1 var(--font); }
.vb-whole, .vb-parts > div { display: grid; place-items: center; height: 58px; border: 3px solid #1f2937; border-radius: 10px; }
.vb-whole { background: #dbeafe; }
.vb-parts { display: flex; gap: 6px; }
.vb-parts > div { background: #fef3c7; min-width: 60px; }
.eq.big { font-size: clamp(2.4rem, 8vw, 3.6rem); font-weight: 900; letter-spacing: .02em; }
.big-num.huge, .big-letter.huge { font-size: clamp(4rem, 14vw, 6rem); }
.word.huge { font-size: clamp(3rem, 11vw, 4.4rem); letter-spacing: .06em; }
.big-emoji { font-size: 3.4rem; line-height: 1; }
.ans small { display: block; font-size: .8rem; font-weight: 700; }
.emoji-group.pairs { display: grid; grid-template-columns: repeat(2, auto); column-gap: 4px; max-width: none; grid-auto-flow: column; grid-template-rows: repeat(2, auto); }
.groups { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.sentence b { color: #7c3aed; }
.q-visual { flex-direction: column; align-items: center; gap: 8px; }
.float-pts.minus { color: #dc2626; }

/* 🎁 Level-up chest */
.lvl-chest { width: min(420px, 100%); display: grid; justify-items: center; gap: 10px; padding: 26px 20px; border-radius: 28px; background: radial-gradient(circle at 50% 30%, #fff7d6, #fde68a 60%, #f59e0b); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); text-align: center; }
.lc-title { font: 900 clamp(2.2rem, 9vw, 3rem)/1 var(--font); color: #fff; text-shadow: 0 3px 0 #b45309, 0 6px 14px rgba(0, 0, 0, .25); letter-spacing: .03em; }
.lc-level { font: 900 1.25rem/1.2 var(--font); color: #7c2d12; }
.lc-box { font-size: 7rem; line-height: 1; background: none; animation: chestWiggle 1.2s ease-in-out infinite; cursor: pointer; }
.lc-box.open { animation: chestOpen .5s ease-out forwards; }
@keyframes chestWiggle { 0%, 100% { transform: rotate(0) } 20% { transform: rotate(-8deg) scale(1.05) } 40% { transform: rotate(8deg) scale(1.05) } 60% { transform: rotate(0) } }
@keyframes chestOpen { to { transform: scale(1.4); opacity: 0; height: 0; } }
.lc-tap { margin: 0; font-weight: 800; color: #7c2d12; }
.lc-prize { display: grid; justify-items: center; gap: 10px; animation: pop .45s; }
.lc-item { display: grid; justify-items: center; gap: 2px; background: #fff; border-radius: 20px; padding: 14px 22px; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.lc-item span { font-size: 4rem; line-height: 1; }
.lc-item b { font-size: 1.3rem; }
.lc-stars { font: 900 2rem/1 var(--font); color: #fff; text-shadow: 0 3px 0 #b45309; }

/* 🦸 Hero card on the progress page */
.hero-card { display: grid; gap: 10px; padding: 12px 14px; margin-bottom: 12px; border-radius: 18px; background: linear-gradient(160deg, #fff7d6, #fff); border: 2px solid #fde68a; }
.hc-top { display: flex; gap: 12px; align-items: center; }
.hc-top > div { flex: 1; display: grid; gap: 4px; }
.hc-ic { font-size: 2.8rem; }
.hc-tracks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
@media (max-width: 480px) { .hc-tracks { grid-template-columns: 1fr; } }
.hc-track { display: grid; gap: 3px; font-weight: 800; font-size: .9rem; }
.time-board { margin-bottom: 14px; padding: 12px; border-radius: 16px; background: linear-gradient(160deg, #eef2ff, #fff); border: 2px solid #c7d2fe; }
.time-board h3 { margin: 0 0 6px; }
.tb-tbl thead th small { font-weight: 700; text-transform: none; letter-spacing: 0; }
.tb-tbl tbody th { white-space: nowrap; }
.tb-tbl tbody td { font-weight: 700; }
.tb-tbl .bc-av svg { vertical-align: middle; }
.boards-sub { margin: 4px 0 8px; }

/* 🔒 Grown-ups: status strip, tabs, overview */
.p-status { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.p-chip { font: 800 .78rem/1 var(--font); padding: 6px 10px; border-radius: 999px; border: 2px solid transparent; }
.p-chip.ok { background: #dcfce7; color: #166534; }
.p-chip.warn { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
.p-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; position: sticky; top: -16px; z-index: 5; background: #fff; padding: 6px 0 8px; margin-bottom: 8px; border-bottom: 2px solid #f1f5f9; }
.p-tabs button { display: grid; justify-items: center; gap: 2px; padding: 8px 4px; border-radius: 14px; font: 800 .8rem/1.1 var(--font); color: #475569; background: #f8fafc; }
.p-tabs button span { font-size: 1.3rem; }
.p-tabs button.on { background: #ede9fe; color: #5b21b6; box-shadow: inset 0 0 0 2px #a78bfa; }
.p-kids { align-items: center; }
.p-overview { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 18px; background: color-mix(in srgb, var(--kid) 10%, white); margin-bottom: 10px; }
.po-stats { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.po-stats div { display: grid; justify-items: center; background: #fff; border-radius: 12px; padding: 6px 4px; }
.po-stats b { font-size: 1rem; }
.po-stats small { font-size: .7rem; color: #64748b; font-weight: 700; }
@media (max-width: 520px) { .po-stats { grid-template-columns: repeat(2, 1fr); } .p-tabs button { font-size: .7rem; } }
.q-test { background: #ede9fe; color: #5b21b6; font-weight: 800; }

/* 👀 question-type gallery */
.peek { width: min(1000px, 100%); max-height: 92vh; overflow: auto; background: #fff; border-radius: 22px; padding: 16px; }
.peek .st-head { gap: 8px; }
.peek-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.peek-card { display: grid; gap: 8px; justify-items: center; text-align: center; padding: 12px; border-radius: 16px; background: #faf7ff; border: 2px solid #eee6fb; }
.peek-sk { font: 800 .7rem/1 var(--font); text-transform: uppercase; letter-spacing: .05em; color: #7c3aed; }
.peek-card .q-answers { max-width: 100%; }
.peek-card .ans { min-height: 60px; cursor: default; }
.peek-card .ans.right { border-color: #22c55e; box-shadow: 0 4px 0 #16a34a; }
.peek-card .big-num { font-size: 2.2rem; }
.peek-card .big-letter { font-size: 2.2rem; }
.peek-card .word { font-size: 1.5rem; }

/* 💡 hint after a wrong answer */
.hint-box { max-width: 560px; margin: 4px auto 0; padding: 12px 16px; border-radius: 18px; background: #fffbeb; border: 3px solid #fcd34d; box-shadow: 0 6px 18px rgba(245, 158, 11, .25); text-align: left; animation: hintIn .45s cubic-bezier(.2, 1.4, .4, 1); }
.hint-box .hb-head { font: 900 1.15rem/1.2 var(--font); color: #92400e; }
.hint-box p { margin: 6px 0 0; font-size: 1.1rem; font-weight: 700; color: #1f2937; line-height: 1.4; }
.hint-box .hb-retry { color: #b45309; font-size: .98rem; }
.hint-box .hb-ans { color: #166534; }
@keyframes hintIn { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* map: "building your world" cover while the detailed models download */
.map-loading { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #fffdf6, #fff3d3 55%, #ffe6a3); transition: opacity .45s; }
.map-loading.gone { opacity: 0; pointer-events: none; }
.ml-box { display: grid; justify-items: center; gap: 16px; color: #3d2f12; font: 800 1.15rem/1.2 var(--font); }
.ml-cub { width: 92px; height: auto; overflow: visible; filter: drop-shadow(0 6px 14px rgba(180, 120, 0, .25)); }
.ml-cub .ml-ears circle { fill: #FFC800; transform-box: fill-box; transform-origin: center; animation: mlEar 1.8s ease-in-out infinite; }
.ml-cub .ml-ears circle + circle { animation-delay: .12s; }
.ml-cub path { fill: none; stroke-width: 102; stroke-linecap: round; }
.ml-cub .ml-trk { stroke: rgba(255, 200, 0, .22); }
.ml-cub .ml-arc { stroke: #FFC800; stroke-dasharray: 100 100; animation: mlDraw 1.8s cubic-bezier(.6, 0, .4, 1) infinite; }
@keyframes mlDraw { 0% { stroke-dashoffset: 100; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -100; } }
@keyframes mlEar { 0%, 100% { transform: scale(.82); } 50% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ml-cub .ml-arc, .ml-cub .ml-ears circle { animation: none; stroke-dashoffset: 0; transform: none; } }

/* Frank's Walk */
.fw-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(239, 68, 68, .15) 30%, rgba(220, 38, 38, .7) 100%); }
.fw-flash.on { animation: fw-flash .6s ease-out; }
@keyframes fw-flash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: 0; } }
.fw-chomp { position: absolute; transform: translate(-50%, -50%) scale(0); pointer-events: none; font: 900 clamp(2rem, 7vh, 3.4rem)/1 var(--font); color: #fff; -webkit-text-stroke: 3px #b91c1c; paint-order: stroke fill; text-shadow: 0 4px 0 #7f1d1d, 0 8px 18px rgba(0, 0, 0, .35); opacity: 0; }
.fw-chomp.on { animation: fw-chomp .9s ease-out; }
@keyframes fw-chomp { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.3) rotate(-12deg); } 25% { transform: translate(-50%, -80%) scale(1.25) rotate(-6deg); } 70% { opacity: 1; transform: translate(-50%, -100%) scale(1) rotate(-4deg); } 100% { opacity: 0; transform: translate(-50%, -130%) scale(.95) rotate(-4deg); } }
.fw-treat { position: absolute; right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 6px; padding: 12px 18px; border-radius: 999px; border: 0; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); font: 900 1.6rem/1 var(--font); color: #92400e; }
.fw-treat b { font-size: 1.1rem; }
.fw-treat:disabled { opacity: .5; }
.fw-treat[hidden] { display: none; }

/* Game controller settings */
.pad-status { margin: 4px 0 8px; }
.pad-live { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pad-live span { min-width: 34px; padding: 6px 8px; border-radius: 10px; background: #f1f5f9; border: 2px solid #e2e8f0; text-align: center; font-weight: 800; transition: background .08s, transform .08s; }
.pad-live span.on { background: #22c55e; border-color: #16a34a; color: #fff; transform: scale(1.1); }
.pad-guide table { border-collapse: collapse; margin: 6px 0; }
.pad-guide td { padding: 3px 12px 3px 0; }

/* Treat Toss */
.tt-pops { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tt-pop { position: absolute; transform: translate(-50%, -50%); font: 900 clamp(1.6rem, 5vh, 2.6rem)/1 var(--font); color: #fff; -webkit-text-stroke: 2px #b45309; paint-order: stroke fill; text-shadow: 0 3px 0 #92400e; animation: tt-pop .9s ease-out forwards; }
.tt-pop.combo { -webkit-text-stroke-color: #c2410c; color: #fde047; }
.tt-pop.bad { color: #bef264; -webkit-text-stroke-color: #3f6212; text-shadow: 0 3px 0 #365314; font-size: clamp(2rem, 7vh, 3.2rem); }
.tt-pop.miss { color: #e5e7eb; -webkit-text-stroke-color: #475569; text-shadow: none; font-size: clamp(1.2rem, 4vh, 1.8rem); }
@keyframes tt-pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.5); } 20% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -160%) scale(1); } }
.tt-combo { font-size: .85em; color: #fde047; }
.tt-skip { position: absolute; right: 16px; bottom: max(18px, env(safe-area-inset-bottom)); padding: 12px 18px; border-radius: 999px; border: 0; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); font: 900 1.2rem/1 var(--font); color: #334155; }
.tt-skip.bad { background: #fef08a; color: #854d0e; animation: tt-wiggle .6s ease-in-out infinite; }
.tt-skip[hidden] { display: none; }
@keyframes tt-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg) scale(1.06); } 75% { transform: rotate(6deg) scale(1.06); } }

/* Frank's Bath */
.fb-step { font-size: .8em; background: rgba(15, 23, 42, .45); padding: 6px 12px; border-radius: 999px; }
.fb-bar { position: absolute; top: 52px; left: 50%; transform: translateX(-50%); width: min(60%, 320px); height: 16px; border-radius: 99px; background: rgba(255, 255, 255, .7); box-shadow: 0 2px 8px rgba(0, 0, 0, .2); overflow: hidden; pointer-events: none; }
.fb-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #38bdf8, #22c55e); border-radius: 99px; transition: width .25s; }
.fb-bar[hidden] { display: none; }
.fb-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.fb-tool { position: absolute; transform: translate(-50%, -60%); font-size: clamp(2.6rem, 8vh, 4rem); pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); left: 50%; top: 45%; }
.fb-tool[hidden] { display: none; }
.fb-drop { position: absolute; width: 6px; height: 12px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #7dd3fc; box-shadow: inset -1px -2px 0 rgba(3, 105, 161, .4); animation: fb-drop .6s ease-in forwards; }
@keyframes fb-drop { to { transform: translateY(90px); opacity: 0; } }
.fb-splat { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .9), rgba(186, 230, 253, .55) 40%, rgba(125, 211, 252, .25) 70%, transparent 72%); animation: fb-splat 2.6s ease-out forwards; }
@keyframes fb-splat { 0% { transform: scale(.2); opacity: 0; } 8% { transform: scale(1.1); opacity: 1; } 70% { opacity: .9; } 100% { transform: scale(1) translateY(30px); opacity: 0; } }
.fb-spark { position: absolute; font-size: 2rem; animation: fb-spark 1.2s ease-out forwards; opacity: 0; }
@keyframes fb-spark { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.2) translateY(-10px); } 100% { opacity: 0; transform: scale(.8) translateY(-60px); } }
.fb-bandanas { position: absolute; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 14px; padding: 12px 16px; background: rgba(255, 255, 255, .9); border-radius: 24px; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); z-index: 2; }
.fb-bandanas[hidden] { display: none; }
.fb-bandanas button { width: 64px; height: 64px; border: 4px solid #fff; border-radius: 18px; background: var(--c); box-shadow: 0 3px 8px rgba(0, 0, 0, .25); display: grid; place-items: center; }
.fb-bandanas button i { width: 40px; height: 30px; background: radial-gradient(circle, var(--d) 3px, transparent 3.5px) 0 0 / 10px 10px, var(--c); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.map-canvas.pixelated { image-rendering: pixelated; image-rendering: crisp-edges; }
.gfx-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.gfx-opt { display: grid; gap: 4px; text-align: left; padding: 12px 14px; border-radius: 14px; background: #f8fafc; border: 3px solid #e2e8f0; }
.gfx-opt small { color: #64748b; }
.gfx-opt.on { background: #ecfdf5; border-color: #22c55e; }
.fs-btn { display: grid; place-items: center; }
.hs-box { text-align: left; }
.hs-box h2, .hs-box .cf-ic { text-align: center; }
.hs-steps { margin: 10px 0; padding-left: 22px; display: grid; gap: 8px; }
.hs-ic { font-size: .9em; }

/* Family accounts: sign up / log in / family setup (js/account.js) */
.acct { position: fixed; inset: 0; z-index: 6000; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: radial-gradient(1200px 600px at 50% -200px, #ffe1a8, transparent), #fff4e0; transition: opacity .3s; }
.acct.gone { opacity: 0; pointer-events: none; }
.acct-card { width: min(460px, 100%); background: #fff; border-radius: 28px; padding: 26px 24px; box-shadow: 0 20px 60px rgba(60, 40, 10, .18); margin: auto; }
.acct.wide .acct-card { width: min(720px, 100%); }
.acct-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 1.3rem; font-weight: 900; }
.acct-logo img { width: 48px; height: 48px; border-radius: 14px; }
.acct h1 { font-size: 1.5rem; line-height: 1.25; margin: 6px 0 10px; }
.acct h2 { margin: 4px 0 12px; }
.acct-actions { display: grid; gap: 10px; margin-top: 16px; }
.acct-form, .acct-body { display: grid; gap: 12px; }
.acct-form label, .acct-body > label, .kid-ed label { display: grid; gap: 6px; font-weight: 800; }
.acct input:not([type=checkbox]), .acct select { padding: 12px 14px; border-radius: 12px; border: 2px solid #e5dccb; background: #fff; font: inherit; font-weight: 700; min-height: 48px; }
.acct-check { display: flex !important; grid-template-columns: none; align-items: center; gap: 10px; font-weight: 700 !important; }
.acct-check input { width: 22px; height: 22px; }
.acct-msg { min-height: 1.2em; margin: 0; font-weight: 800; color: #15803d; }
.acct-msg.bad { color: #b91c1c; }
.acct-links { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 12px; }
.acct-links button { color: #7c6f5e; font-weight: 800; text-decoration: underline; padding: 6px; }
.acct-import { margin-top: 18px; padding-top: 12px; border-top: 2px dashed #eee3d1; }
.acct-import summary { font-weight: 800; color: #7c6f5e; cursor: pointer; }

/* the kid editor: one kid at a time */
.acct.wide .acct-card { width: min(600px, 100%); }
.kid-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kt-label { font-weight: 800; margin-right: 4px; }
.kid-tab { display: flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px; border-radius: 999px; background: #fff; border: 2px solid #eee3d1; font-weight: 800; }
.kid-tab.on { border-color: var(--kid); background: color-mix(in srgb, var(--kid) 14%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--kid) 30%, transparent); }
.kid-tab.add { padding: 10px 16px; border-style: dashed; color: #7c6f5e; }
.kid-face { width: var(--s); height: var(--s); flex: none; border-radius: 50%; display: grid; place-items: center; overflow: hidden; font-size: calc(var(--s) * .58); line-height: 1; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .12); }
.kid-face img { width: 100%; height: 100%; object-fit: cover; }
.kid-ed { display: grid; gap: 14px; padding: 18px; border-radius: 22px; border: 3px solid var(--kid); background: color-mix(in srgb, var(--kid) 5%, #fff); }
.ke-head { display: flex; gap: 16px; align-items: center; }
.ke-head .kid-face { border: 4px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .15); }
.ke-name { flex: 1; }
.ke-seg { display: flex; gap: 6px; padding: 4px; background: #f3ede2; border-radius: 14px; }
.ke-seg button { flex: 1; padding: 10px 8px; border-radius: 11px; font-weight: 800; color: #6b5f50; }
.ke-seg button.on { background: #fff; color: #1e293b; box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.ke-animals { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.ke-animals .an { aspect-ratio: 1; border-radius: 12px; font-size: 26px; background: #fff; border: 2px solid #eee3d1; }
.ke-animals .an.on, .chipb.on { border-color: var(--kid); background: color-mix(in srgb, var(--kid) 18%, #fff); }
.ke-photo { display: grid; gap: 8px; justify-items: start; }
.ke-upload { cursor: pointer; }
.ke-status { color: #7c3aed; font-weight: 800; }
.kid-ed .bad { color: #b91c1c; font-weight: 800; }
.ke-school { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ke-other { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; border-radius: 14px; background: #fffbeb; border: 2px dashed #fcd34d; }
.ke-other p { grid-column: 1 / -1; margin: 0; }
.ke-row { display: grid; gap: 6px; font-weight: 800; }
.ke-row > div { display: flex; flex-wrap: wrap; gap: 6px; }
.ke-row.sub { grid-template-columns: 56px 1fr; align-items: center; font-weight: 700; color: #6b5f50; }
.ke-more { display: grid; gap: 10px; }
.ke-more summary { font-weight: 800; color: #7c6f5e; cursor: pointer; }
.ke-more[open] { gap: 10px; }
.ke-nick { display: flex; gap: 6px; }
.ke-nick input { flex: 1; min-width: 0; }
.kid-ed small { font-weight: 700; color: #7c6f5e; }
.ke-remove { justify-self: start; color: #b91c1c; font-weight: 800; text-decoration: underline; padding: 4px 0; }
@media (max-width: 480px) { .ke-school, .ke-other { grid-template-columns: 1fr; } .ke-animals { grid-template-columns: repeat(4, 1fr); } }
.sw { width: 34px; height: 34px; border-radius: 50%; background: var(--c); border: 3px solid #fff; box-shadow: 0 0 0 2px #e5dccb; }
.sw.on { box-shadow: 0 0 0 3px #1e293b; }
.chipb { padding: 8px 12px; border-radius: 999px; border: 2px solid #eee3d1; background: #fff; font-weight: 800; }
/* a character being made for this kid */
.mp-av { position: relative; }
.mp-av.making::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 3px dashed #c084fc; animation: mp-spin 3s linear infinite; pointer-events: none; }
.mp-making { position: absolute; right: -6px; bottom: -4px; width: 24px; height: 24px; display: grid; place-items: center; font-style: normal; font-size: 15px; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); animation: mp-pulse 1.2s ease-in-out infinite; }
@keyframes mp-spin { to { transform: rotate(360deg); } }
@keyframes mp-pulse { 50% { transform: scale(1.25); } }
.mp-makinglabel { font: 900 .72rem/1 var(--font); color: #fff; background: linear-gradient(90deg, #a855f7, #ec4899, #a855f7); background-size: 200% 100%; padding: 5px 8px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); animation: mp-shimmer 1.6s linear infinite; white-space: nowrap; }
@keyframes mp-shimmer { to { background-position: -200% 0; } }

/* games locked until chores + a lesson are done */
.ma-games.locked { filter: grayscale(.9) brightness(.9); opacity: .7; }
.ma-games.nope { animation: shake .35s; }
.games-locked { text-align: center; display: grid; gap: 12px; justify-items: center; padding: 26px 20px; }
.games-locked h2 { margin: 0; }
.gl-lock { font-size: 3.2rem; }
.gl-list { display: grid; gap: 10px; width: min(420px, 100%); }
.gl-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: #fff7e6; border: 3px solid #fcd34d; font-size: 1.15rem; text-align: left; }
.gl-item span { font-size: 1.6rem; }
.gl-item.done { background: #ecfdf5; border-color: #86efac; color: #166534; }

/* after a wrong answer: answers wait until the hint has been heard */
.q-answers.waiting { opacity: .45; filter: grayscale(.6); transition: opacity .2s; }
.hb-go { position: relative; overflow: hidden; margin-top: 10px; width: 100%; background: #e2e8f0; color: #475569; box-shadow: none; }
.hb-go b { position: relative; }
.hb-go .hb-fill { position: absolute; inset: 0; width: 0; background: #bfdbfe; }
.hb-go.filling .hb-fill { width: 100%; transition: width var(--wait) linear; }
.hb-go.ready { background: #16a34a; color: #fff; box-shadow: 0 4px 0 #0f6e32; animation: popIn .35s; }
.hb-go.ready .hb-fill { display: none; }
.hint-box.nudge { animation: shake .35s; }
.hint-box.done { opacity: .85; }
.q-answers.waiting button, .q-answers.waiting input { pointer-events: none; }

/* family page: way back to the map */
.family { min-height: calc(100dvh - 90px); cursor: pointer; }
.family .kid-card { cursor: pointer; }
.fam-back { margin-bottom: 12px; background: #fff; color: var(--ink, #1f2937); box-shadow: var(--shadow); }

/* Golden Bear Quest */
.bq-canvas { position: absolute; inset: 0; display: block; }
.bq-hud { gap: 10px; }
.bq-hud .bq-mid { background: rgba(0, 0, 0, .28); border-radius: 999px; padding: 5px 12px; font-size: .85em; white-space: nowrap; }
.bq-pad { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: end; padding: 0 max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left)); pointer-events: none; }
.bq-lr { display: flex; gap: clamp(6px, 2vw, 12px); align-items: end; }
.bq-b { pointer-events: auto; width: clamp(52px, min(11vh, 18vw), 92px); height: clamp(52px, min(11vh, 18vw), 92px); border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85); background: rgba(20, 24, 32, .35); color: #fff; font: 900 clamp(1.6rem, 4.5vh, 2.4rem)/1 var(--font); display: grid; place-items: center; touch-action: none; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.bq-b.on { background: rgba(250, 204, 21, .7); transform: scale(.94); }
.bq-jump { width: clamp(64px, min(15vh, 23vw), 120px); height: clamp(64px, min(15vh, 23vw), 120px); background: rgba(202, 138, 4, .55); }
.bq-throw[hidden] { display: none; }
.bq-intro h2 { font-size: 2rem; }
.bq-menu-card { max-width: 560px; }
.bq-worlds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 6px; text-align: left; }
.bq-world { background: #fff7e0; border-radius: 16px; padding: 10px; }
.bq-world > div { display: flex; gap: 6px; margin-top: 6px; }
.bq-lv { flex: 1; min-height: 52px; border-radius: 12px; background: #facc15; color: #422006; font: 900 1.1rem/1 var(--font); box-shadow: 0 3px 0 #a16207; display: grid; place-items: center; gap: 2px; padding: 6px 2px; }
.bq-lv small { font-size: .7rem; }
.bq-lv.done { background: #86efac; box-shadow: 0 3px 0 #15803d; color: #14532d; }
.bq-lv.next { outline: 3px solid #ca8a04; outline-offset: 2px; animation: popIn .4s; }
.bq-lv:disabled { background: #e5e7eb; box-shadow: 0 3px 0 #9ca3af; color: #6b7280; }
.bq-res { display: flex; justify-content: center; gap: 16px; font: 900 1.4rem/1 var(--font); margin: 10px 0; }
@media (max-width: 520px) { .bq-worlds { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .bq-hud { font-size: .9rem; top: 8px; left: 8px; right: 8px; } .bq-hud .bq-mid { display: none; } }

/* the game shop: each kid buys their own games */
.games-h { margin: 18px 4px 8px; display: flex; align-items: center; gap: 8px; font-size: 1.15rem; }
.games-empty { margin: 4px 6px 8px; }
.gc-price, .gc-lock { position: absolute; right: 8px; bottom: 8px; font: 900 .85rem/1 var(--font); padding: 6px 10px; border-radius: 999px; }
.gc-price { background: #facc15; color: #422006; box-shadow: 0 2px 0 #a16207; }
.gc-lock { background: rgba(17, 24, 39, .8); color: #fff; }
.gc-buy { margin-top: 4px; font: 900 .85rem/1 var(--font); color: #fff; background: #16a34a; padding: 7px 12px; border-radius: 999px; box-shadow: 0 3px 0 #0f6e32; }
.gc-buy.short { background: #9ca3af; box-shadow: 0 3px 0 #6b7280; }
.game-card.lvlock { opacity: .7; }
.game-card.lvlock .gc-shot > img { filter: grayscale(.8) blur(1px); }
.gc-shot.pet > img { object-fit: contain; padding: 6px; }

/* Grown-ups: family pet */
.pet-form { display: grid; gap: 10px; }
.pet-form label.small { display: grid; gap: 4px; }
.pet-gap { width: 10px; }
.pet-pick { justify-self: start; cursor: pointer; }
.pet-thumbs, .pet-shots { display: flex; gap: 8px; flex-wrap: wrap; }
.pet-thumbs img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.pet-shots img { height: 84px; max-width: 130px; object-fit: contain; background: #eef6ff; border-radius: 12px; padding: 4px; }
.pet-status { margin: 0; padding: 8px 12px; border-radius: 12px; }
.pet-status.making { background: #fff7e0; }
.pet-status.ok { background: #e7f8ec; }
.pet-status.bad { background: #fde8e8; }

/* 🏆 leaderboard: who's on top */
.lb { max-width: 520px; width: 100%; }
.lb-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 10px; }
.lb-tab { padding: 10px 4px; border-radius: 14px; background: #f1f5f9; font: 900 .95rem/1.1 var(--font); color: #334155; }
.lb-tab.on { background: #facc15; color: #422006; box-shadow: 0 3px 0 #a16207; }
.lb-games { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 6px; }
.lb-games[hidden] { display: none; }
.lb-games .chipb { white-space: nowrap; }
.lb .lb-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: min(60vh, 520px); overflow-y: auto; }
.lb-list li { display: grid; grid-template-columns: 36px 40px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: #f8fafc; }
.lb-list li.lb-top { background: color-mix(in srgb, #facc15 16%, white); }
.lb-list li.lb-top1 { background: color-mix(in srgb, #facc15 32%, white); font-size: 1.08rem; }
.lb-list li.mine { outline: 2px solid var(--kid); }
.lb-rank { font: 900 1.3rem/1 var(--font); text-align: center; color: #64748b; }
.lb-animal { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 1.4rem; background: color-mix(in srgb, var(--c) 25%, white); border: 2px solid var(--c); }
.lb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-val { font: 900 1.05rem/1 var(--font); color: #b45309; white-space: nowrap; text-align: right; }
.lb-val small { font-size: .7rem; color: #92400e; font-weight: 800; }
.lb-val i { display: block; font-style: normal; font-size: .72rem; font-weight: 800; color: #64748b; margin-top: 3px; }
.lb-list li.lb-empty { display: block; text-align: center; color: #64748b; background: none; }

/* first-time setup (account.js screenOnboard): one question per screen */
.ob-prog { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin: 2px 0 0; line-height: 1; }
.ob-prog span { display: grid; gap: 4px; justify-items: center; }
.ob-prog i { display: block; width: 100%; height: 6px; border-radius: 99px; background: #e5e7eb; }
.ob-prog span.done i { background: #86efac; }
.ob-prog span.on i { background: #f59e0b; }
.ob-prog small { font: 800 .62rem/1 var(--font); color: #94a3b8; }
.ob-prog span.on small { color: #b45309; }
.ob-step { margin: 8px 0 10px; font: 800 .75rem/1 var(--font); color: #94a3b8; text-align: center; }
.ob .acct-body { display: grid; gap: 14px; }
.ob .acct-body h2 { margin: 0; }
.ob .acct-body > p { margin: 0; }
.ob label { display: grid; gap: 6px; font-weight: 800; }
.ob label small, .ob-field small { font-weight: 600; color: #64748b; }
.ob-in, .ob select { font-size: 1.1rem; padding: 12px 14px; border-radius: 14px; border: 2px solid #e5e7eb; }
.ob-field { display: grid; gap: 8px; }
.ob-field > span { font-weight: 800; }
.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ob-chips .chipb { padding: 10px 14px; font-size: 1rem; }
.ob-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.ob-right { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.ob-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ob-choice button { display: grid; gap: 4px; padding: 16px 12px; border-radius: 18px; border: 3px solid #e5e7eb; background: #fff; text-align: center; }
.ob-choice button.on { border-color: #f59e0b; background: #fff7e0; }
.ob-choice small { color: #64748b; }
.ob-photo { display: grid; gap: 10px; justify-items: start; }
.ob-photo img { width: 120px; height: 120px; object-fit: cover; border-radius: 20px; }
.ob .acct-check { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; }
.ob-toggle { display: flex !important; grid-template-columns: none; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: #f8fafc; }
.ob-toggle input { width: 22px; height: 22px; margin-top: 2px; flex: none; }
.ob-toggle span { display: grid; gap: 3px; }
.ob-note { padding: 12px 14px; border-radius: 16px; background: #eef6ff; line-height: 1.4; }
.ob-pin { justify-content: center; }
.ob-pad { max-width: 280px; margin: 0 auto; }
.ob-pad > span { visibility: hidden; }
.ob-tour { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ob-tour > div { display: grid; gap: 4px; justify-items: center; text-align: center; padding: 14px 8px; border-radius: 18px; background: #fff7e0; }
.ob-tour span { font-size: 2rem; line-height: 1.1; }
.ob-tour small { color: #64748b; line-height: 1.3; }
.ob-tour.welcome { margin: 10px 0 4px; }
.ob-free { text-align: center; font-weight: 800; color: #475569; margin: 6px 0; }
.ob-list { margin: 0; padding-left: 22px; display: grid; gap: 6px; line-height: 1.4; }
.ob-pick { justify-self: start; cursor: pointer; }
@media (max-width: 520px) { .ob-tour { grid-template-columns: 1fr; } .ob-prog small { display: none; } .ob-choice { grid-template-columns: 1fr; } }

/* ☀️ weather on My Day */
.wx-card { display: grid; gap: 12px; background: linear-gradient(135deg, #e0f2fe, #fef9c3); }
.wx-wait { grid-template-columns: auto 1fr; align-items: center; opacity: .8; }
.wx-top { display: flex; align-items: center; gap: 14px; }
.wx-big { font-size: 4rem; line-height: 1; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .12)); }
.wx-main { display: grid; gap: 2px; }
.wx-now { font: 900 2.6rem/1 var(--font); color: #0f172a; }
.wx-words { font-weight: 900; font-size: 1.15rem; }
.wx-hl { font-weight: 800; color: #475569; }
.wx-tips { display: flex; flex-wrap: wrap; gap: 8px; }
.wx-tip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .8); border-radius: 999px; padding: 7px 12px; font-weight: 800; }
.wx-tip i { font-style: normal; font-size: 1.2rem; }

/* ================= landing page (js/landing.js) ================= */
body.lp-open { overflow: hidden; }
.lp { position: fixed; inset: 0; z-index: 7000; overflow-y: auto; overflow-x: hidden; background: #fffaf0; color: #1e1b2e; font-family: inherit; scroll-behavior: smooth; transition: opacity .35s; -webkit-overflow-scrolling: touch; }
.lp.gone { opacity: 0; pointer-events: none; }
.lp h1, .lp h2, .lp h3 { margin: 0; letter-spacing: -.02em; }
.lp p { margin: 0; line-height: 1.55; color: #4b4763; }
.lp-top { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; padding: 14px clamp(16px, 4vw, 48px); transition: background .25s, box-shadow .25s; }
.lp.scrolled .lp-top { background: rgba(255, 250, 240, .86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(30, 27, 46, .06); }
.lp-logo { display: flex; align-items: center; gap: 10px; font-size: 1.4rem; }
.lp-logo img { width: 36px; height: 36px; border-radius: 10px; }
.lp-top-go { display: flex; gap: 10px; align-items: center; }
.lp-link { background: none; border: 0; font: 800 1rem/1 inherit; color: #1e1b2e; padding: 10px; cursor: pointer; }
.lp-btn { border: 0; cursor: pointer; font: 900 1.1rem/1 inherit; color: #141414; padding: 17px 28px; border-radius: 999px; background: #FFC800; box-shadow: 0 4px 0 #d9a400, 0 10px 26px rgba(255, 184, 0, .35); transition: transform .15s, box-shadow .15s; }
.lp-btn:hover { transform: translateY(-2px); background: #ffd21f; box-shadow: 0 6px 0 #d9a400, 0 14px 32px rgba(255, 184, 0, .42); }
.lp-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #d9a400; }
.lp-btn.small { padding: 11px 18px; font-size: .95rem; box-shadow: 0 3px 0 #d9a400, 0 6px 16px rgba(255, 184, 0, .3); }
.lp-btn.ghost { background: #fff; color: #1e1b2e; box-shadow: 0 0 0 2px #ede4d3; }
.lp-btn.ghost.light { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .35); }
.lp-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.lp-cta.center { justify-content: center; }
.lp-kicker { display: inline-block; font: 900 .78rem/1 inherit; text-transform: uppercase; letter-spacing: .12em; color: #141414; background: #FFC800; padding: 6px 11px; border-radius: 999px; margin-bottom: 14px; }
.lp-fine { margin-top: 14px !important; font-weight: 700; font-size: .92rem; color: #8a849e !important; }

/* hero */
.lp-hero { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 5vw, 60px) clamp(16px, 5vw, 64px) clamp(40px, 7vw, 90px); max-width: 1320px; margin: 0 auto; }
.lp-hero h1 { font-size: clamp(2.3rem, 5.2vw, 4.1rem); line-height: 1.03; color: #1e1b2e; }
.lp-hero h1 em { font-style: normal; color: inherit; background: linear-gradient(transparent 58%, #FFC800 58%, #FFC800 92%, transparent 92%); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lp-hero-text > p { margin-top: 18px; font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 34em; }
.lp-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; z-index: -1; animation: lp-drift 14s ease-in-out infinite alternate; }
.lp-blob.b1 { width: 420px; height: 420px; background: #fde68a; left: -120px; top: -60px; }
.lp-blob.b2 { width: 460px; height: 460px; background: #fbcfe8; right: 5%; top: 10%; animation-delay: -5s; }
.lp-blob.b3 { width: 380px; height: 380px; background: #bae6fd; right: 30%; bottom: -120px; animation-delay: -9s; }
@keyframes lp-drift { to { transform: translate(40px, 30px) scale(1.08); } }
.lp-hero-media { position: relative; }
.lp-tablet { position: relative; border-radius: 28px; padding: 10px; background: #1e1b2e; box-shadow: 0 40px 80px -20px rgba(30, 27, 46, .45), 0 0 0 1px rgba(255, 255, 255, .08) inset; transform: perspective(1400px) rotateY(-6deg) rotateX(2deg); transition: transform .6s; }
.lp-tablet:hover { transform: perspective(1400px) rotateY(0) rotateX(0); }
.lp-tablet video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 20px; background: #cfe8ff; }
.lp-float { position: absolute; font: 900 .95rem/1 inherit; background: #fff; padding: 12px 16px; border-radius: 16px; box-shadow: 0 14px 34px rgba(30, 27, 46, .18); animation: lp-bob 4s ease-in-out infinite; white-space: nowrap; }
.lp-float.f1 { left: -18px; top: 14%; }
.lp-float.f2 { right: -10px; top: 46%; animation-delay: -1.3s; }
.lp-float.f3 { left: 12%; bottom: -18px; animation-delay: -2.6s; }
@keyframes lp-bob { 50% { transform: translateY(-9px); } }

/* strip of promises */
.lp-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; max-width: 1160px; margin: 0 auto 30px; padding: 0 clamp(16px, 4vw, 40px); }
.lp-strip div { display: grid; justify-items: center; gap: 6px; padding: 16px 8px; background: #fff; border-radius: 20px; box-shadow: 0 6px 20px rgba(30, 27, 46, .06); text-align: center; font-weight: 800; font-size: .9rem; }
.lp-strip b { font-size: 1.7rem; }

/* sections */
.lp-sec { max-width: 1160px; margin: 0 auto; padding: clamp(46px, 7vw, 96px) clamp(16px, 4vw, 40px); }
.lp-sec > h2, .lp-copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; }
.lp-sec > h2 { text-align: center; margin-bottom: 42px; }
.lp-copy p { margin-top: 14px; font-size: 1.1rem; }
.lp-copy.center { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 36px); }
.lp-step { position: relative; display: grid; gap: 10px; }
.lp-step h3 { font-size: 1.3rem; margin-top: 10px; }
.lp-num { position: absolute; left: -6px; top: -12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 900 1.2rem/1 inherit; color: #FFC800; background: #141414; box-shadow: 0 8px 20px rgba(20, 20, 20, .3); z-index: 1; }
.lp-phone { margin: 0; border-radius: 34px; padding: 8px; background: #1e1b2e; box-shadow: 0 30px 60px -18px rgba(30, 27, 46, .45); }
.lp-phone img { display: block; width: 100%; aspect-ratio: 390 / 700; object-fit: cover; object-position: top; border-radius: 27px; background: #fff7e0; }
.lp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 70px); align-items: center; }
.lp-stage { position: relative; border-radius: 36px; overflow: hidden; background: #ffe3a3; box-shadow: 0 30px 70px -24px rgba(20, 20, 20, .45); }
.lp-stage video { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.lp-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; font-weight: 800; font-size: 1.05rem; }
.lp-list li { background: #fff; border-radius: 16px; padding: 12px 16px; box-shadow: 0 4px 14px rgba(30, 27, 46, .05); }
.lp-games { text-align: left; }
.lp-wide { position: relative; border-radius: 28px; overflow: hidden; box-shadow: 0 30px 70px -24px rgba(30, 27, 46, .45); }
.lp-wide img { display: block; width: 100%; aspect-ratio: 844 / 390; object-fit: cover; }
.lp .lp-tag { position: absolute; left: 16px; bottom: 16px; background: rgba(30, 27, 46, .78); color: #fff; font-weight: 900; padding: 10px 16px; border-radius: 999px; backdrop-filter: blur(6px); }
.lp-covers { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 16px; }
.lp-covers figure { margin: 0; border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 8px 22px rgba(30, 27, 46, .1); transition: transform .2s; }
.lp-covers figure:hover { transform: translateY(-4px) rotate(-1deg); }
.lp-covers img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.lp-covers figcaption { padding: 8px 10px; font-weight: 900; font-size: .9rem; }
.lp-pet { margin-top: 18px; padding: 16px 20px; border-radius: 20px; background: linear-gradient(135deg, #fef3c7, #fce7f3); font-size: 1.05rem; }
.lp-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.lp .lp-card { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center; background: #fff; border-radius: 30px; padding: 22px; box-shadow: 0 16px 40px rgba(30, 27, 46, .08); }
.lp .lp-card h3 { font-size: 1.4rem; margin-bottom: 8px; }
.lp .lp-card .lp-phone { border-radius: 26px; padding: 6px; }
.lp .lp-card .lp-phone img { border-radius: 21px; }
.lp-parents { background: #141414; border-radius: 40px; color: #fff; max-width: 1160px; }
.lp-parents h2 { color: #fff; }
.lp-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-grid > div { background: rgba(255, 255, 255, .07); border-radius: 22px; padding: 22px; }
.lp-grid b { font-size: 1.8rem; }
.lp-grid h3 { color: #fff; font-size: 1.15rem; margin: 10px 0 6px; }
.lp-grid p { color: #c9c3dd; font-size: .98rem; }
.lp-final { margin: clamp(40px, 7vw, 90px) auto 0; max-width: 1160px; text-align: center; padding: clamp(46px, 7vw, 80px) 24px; border-radius: 40px 40px 0 0; background: radial-gradient(circle at 50% 0%, #3a2f12, #141414 65%); color: #fff; }
.lp-final h2 { color: #FFC800; font-size: clamp(2rem, 4vw, 3rem); }
.lp-final p { color: rgba(255, 255, 255, .9); margin-top: 10px; font-size: 1.15rem; }
.lp-final .lp-btn:not(.ghost) { box-shadow: 0 4px 0 #d9a400, 0 0 34px rgba(255, 200, 0, .35); }
.lp-foot { text-align: center; padding: 22px 16px 34px; color: #8a849e; font-weight: 700; font-size: .9rem; background: #141414; color: rgba(255, 255, 255, .7); max-width: 1160px; margin: 0 auto; }
.lp-in { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.lp-in.seen { opacity: 1; transform: none; }
.lp-steps .lp-in:nth-child(2) { transition-delay: .12s; } .lp-steps .lp-in:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) { .lp-in { opacity: 1; transform: none; } .lp-blob, .lp-float { animation: none; } }
@media (max-width: 900px) {
  .lp-hero, .lp-split, .lp-duo { grid-template-columns: 1fr; }
  .lp-hero-media { order: -1; }
  .lp-tablet { transform: none; }
  .lp-strip { grid-template-columns: repeat(3, 1fr); }
  .lp-covers { grid-template-columns: repeat(3, 1fr); }
  .lp-grid { grid-template-columns: 1fr 1fr; }
  .lp-steps { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; gap: 40px; }
}
@media (max-width: 520px) {
  .lp .lp-card { grid-template-columns: 110px 1fr; gap: 14px; padding: 16px; }
  .lp-grid { grid-template-columns: 1fr; }
  .lp-float { font-size: .8rem; padding: 9px 12px; }
  .lp-float.f1 { left: 4px; } .lp-float.f2 { right: 4px; }
  .lp-top-go { gap: 4px; } .lp-top-go .lp-link { font-size: .88rem; padding: 8px 6px; } .lp-top-go .lp-btn.small { padding-left: 14px; padding-right: 14px; }
  .lp-parents, .lp-final { border-radius: 28px; }
}
/* landing: why parents say yes */
.lp-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-why-card { background: #fff; border-radius: 26px; padding: 24px; box-shadow: 0 14px 36px rgba(30, 27, 46, .07); display: grid; gap: 8px; align-content: start; }
.lp-why-card.wide { grid-column: span 2; }
.lp-why-card.kitchen { grid-column: span 3; order: 10; grid-template-columns: auto 1fr; gap: 18px; align-items: center; background: radial-gradient(circle at 20% 0%, #3a2f12, #141414 70%); }
.lp-why-card.kitchen b { font-size: 3rem; }
.lp-why-card.kitchen h3 { color: #fff; margin-bottom: 6px; }
.lp-why-card.kitchen p { color: #d6d0ea; }
@media (max-width: 900px) { .lp-why-card.kitchen { grid-column: span 2; } }
@media (max-width: 520px) { .lp-why-card.kitchen { grid-column: span 1; grid-template-columns: 1fr; } }
.lp-why-card.wide, .lp-why-card.tint { background: linear-gradient(135deg, #fff7e0, #ffe4f1); }
.lp-why-card b { font-size: 2.1rem; line-height: 1; }
.lp-why-card h3 { font-size: 1.3rem; }
.lp-why-card strong { color: #1e1b2e; }
.lp-why-grid .lp-in:nth-child(2) { transition-delay: .08s; } .lp-why-grid .lp-in:nth-child(3) { transition-delay: .16s; } .lp-why-grid .lp-in:nth-child(4) { transition-delay: .24s; }
@media (max-width: 900px) { .lp-why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .lp-why-grid { grid-template-columns: 1fr; } .lp-why-card.wide { grid-column: span 1; } }
.lp-paid { display: inline-block; vertical-align: middle; font: 900 .68rem/1 var(--font); text-transform: uppercase; letter-spacing: .06em; padding: 4px 8px; border-radius: 999px; background: #1e1b2e; color: #fde68a; }
.lp-grid .lp-paid { background: #fde68a; color: #1e1b2e; }
.photo-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.cam-btn { cursor: pointer; }
.ob .acct-check { display: block !important; line-height: 1.35; }
.ob .acct-check input { margin: 0 8px 0 0; vertical-align: -3px; }

/* leaderboard: slim rows that scroll (drawn inside the list so nothing gets clipped) */
.lb .lb-list { gap: 4px; padding: 3px; max-height: min(58vh, 480px); overscroll-behavior: contain; }
.lb-list li { grid-template-columns: 30px 32px 1fr auto; gap: 10px; padding: 6px 12px 6px 8px; border-radius: 12px; cursor: pointer; transition: transform .12s, background .12s; }
.lb-list li:hover { transform: translateX(2px); background: #f1f5f9; }
.lb-list li.mine { outline: none; box-shadow: inset 0 0 0 2px var(--kid); }
.lb-list li.lb-top1 { font-size: 1rem; }
.lb-list .lb-rank { font-size: 1.05rem; }
.lb-list .avatar { --s: 32px !important; }
.lb-list .avatar .av-st { display: none; }
.lb-list .lb-animal { width: 32px; height: 32px; font-size: 1.1rem; border-width: 2px; }
.lb-list .lb-name { font-size: .98rem; }
.lb-list .lb-val { font-size: .95rem; }
.lb-list li::after { content: '›'; margin-left: -4px; color: #cbd5e1; font-weight: 900; }
.lb-list li { grid-template-columns: 30px 32px 1fr auto 8px; }
.lb-list li.lb-empty::after { content: none; }

/* tap a kid: their gear */
.kc { position: relative; width: min(380px, 100%); background: #fff; border-radius: 26px; padding: 18px 18px 20px; text-align: center; display: grid; gap: 10px; box-shadow: 0 24px 60px rgba(0, 0, 0, .25); }
.kc .q-close { position: absolute; top: 12px; right: 12px; z-index: 2; }
.kc-stage { height: 230px; border-radius: 20px; background: radial-gradient(circle at 50% 40%, #fff, color-mix(in srgb, var(--kid) 22%, white)); display: grid; place-items: center; overflow: hidden; }
.kc-3d { width: 100%; height: 100%; }
.kc-3d canvas { width: 100% !important; height: 100% !important; }
.kc-animal { font-size: 6rem; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .15)); }
.kc h2 { margin: 2px 0 0; }
.kc h3 { margin: 6px 0 0; font-size: 1rem; text-align: left; }
.kc-badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.kc-badges span { background: #f1f5f9; border-radius: 999px; padding: 6px 10px; font-weight: 800; font-size: .88rem; }
.kc-gear { display: flex; flex-wrap: wrap; gap: 6px; }
.kc-item { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 12px; background: color-mix(in srgb, var(--kid) 12%, white); font-weight: 800; font-size: .9rem; }
.kc-item i { font-style: normal; font-size: 1.15rem; }

/* 💌 invites */
.invite-banner { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 16px; border-radius: 18px; margin: 4px 0 8px; background: linear-gradient(135deg, #fdf2f8, #fef3c7); border: 2px solid #fbcfe8; box-shadow: 0 3px 0 #f9a8d4; }
.invite-banner .ib-ic { font-size: 2rem; }
.invite-banner b { display: block; font-size: 1.05rem; }
.invite-banner small { color: #64748b; font-weight: 700; }
.invite-banner.done { opacity: .75; box-shadow: none; }
.invite-box .inv-email { width: 100%; font-size: 1.1rem; padding: 12px 14px; margin: 6px 0 2px; }
.inv-list { display: grid; gap: 6px; margin-top: 10px; text-align: left; font-size: .92rem; }
.inv-list span { background: #f8fafc; border-radius: 10px; padding: 7px 10px; }
.st-invite { background: linear-gradient(135deg, #ec4899, #f59e0b); color: #fff; }
.ob-send { justify-self: start; }

/* Games screen: grouped and filtered */
.games-filter { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px; margin: 10px 0 0; scrollbar-width: none; }
.games-filter::-webkit-scrollbar { display: none; }
.games-filter .chipb { white-space: nowrap; padding: 9px 14px; font-size: .95rem; }
.games-h small { font-size: .8rem; font-weight: 700; }
.gcat { margin: 6px 0 14px; }
.gcat-h { margin: 6px 4px 8px; font-size: 1rem; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.gcat-h small { font-weight: 700; color: #64748b; font-size: .82rem; }

/* leaderboard: pick a game by its picture */
.lb-games { display: flex; gap: 14px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 -2px 8px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.lbg-group { display: grid; gap: 5px; flex: none; }
.lbg-label { font: 900 .72rem/1 var(--font); text-transform: uppercase; letter-spacing: .06em; color: #64748b; padding-left: 2px; }
.lbg-row { display: flex; gap: 8px; }
.lbg { flex: none; width: 112px; display: grid; gap: 3px; padding: 4px 4px 7px; border-radius: 14px; background: #fff; border: 2px solid #e5e7eb; text-align: left; scroll-snap-align: start; transition: transform .12s, border-color .12s; }
.lbg img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; background: color-mix(in srgb, var(--gc) 25%, white); }
.lbg b { font-size: .78rem; line-height: 1.15; padding: 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lbg small { font-size: .7rem; font-weight: 800; color: #b45309; padding: 0 3px; }
.lbg.empty small { color: #94a3b8; }
.lbg.on { border-color: var(--gc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gc) 35%, transparent); transform: translateY(-2px); }
.lb-banner { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 16px; background: #f8fafc; margin-bottom: 8px; }
.lb-banner[hidden] { display: none; }
.lb-banner img { width: 96px; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 10px; }
.lb-banner b { display: block; font-size: 1.05rem; }
.lb-banner span { font-size: .88rem; font-weight: 700; color: #475569; }
.kc-stage { position: relative; height: 270px; }
.kc-badge { position: absolute; left: 10px; top: 10px; font-size: 1.8rem; background: #fff; border-radius: 50%; width: 46px; height: 46px; display: grid; place-items: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
.kc-hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); font: 800 .72rem/1 var(--font); color: #475569; background: rgba(255, 255, 255, .85); padding: 5px 10px; border-radius: 999px; pointer-events: none; white-space: nowrap; }
.st-3d .kid-viewer { touch-action: none; }

/* 🌱 level guide */
.lvg { width: min(560px, 100%); max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 24px; padding: 16px 18px 20px; }
.lvg-now { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: linear-gradient(135deg, #ecfdf5, #fef9c3); }
.lvg-ic { font-size: 2.6rem; }
.lvg-now small { font-weight: 700; color: #475569; }
.lvg-now .sh-bar { margin: 6px 0 4px; }
.lvg-cards { display: grid; gap: 10px; margin-top: 12px; }
.lvg-card { background: #f8fafc; border-radius: 18px; padding: 12px 14px; }
.lvg-card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.lvg-card p { margin: 4px 0; line-height: 1.45; }
.lvg-vs { display: grid; gap: 4px; }
.lvg-vs span { background: #fff; border-radius: 10px; padding: 6px 10px; }
.lvg-earn { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lvg-earn li { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; background: #fff; border-radius: 10px; padding: 6px 10px; font-weight: 700; }
.lvg-earn b { color: #16a34a; white-space: nowrap; }
.lvg-road-h { margin: 16px 0 6px; }
.lvg-road { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lvg-road li { display: grid; grid-template-columns: 38px 1fr; gap: 10px; padding: 8px 0; position: relative; }
.lvg-road li::before { content: ''; position: absolute; left: 18px; top: 38px; bottom: -8px; width: 3px; background: #e5e7eb; }
.lvg-road li:last-child::before { display: none; }
.lvg-dot { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #f1f5f9; font-size: 1.2rem; z-index: 1; }
.lvg-road li.done .lvg-dot { background: #86efac; font-weight: 900; color: #14532d; }
.lvg-road li.here .lvg-dot { background: #facc15; box-shadow: 0 0 0 4px #fef08a; }
.lvg-road li.done::before { background: #86efac; }
.lvg-road b em { font-style: normal; color: #b45309; font-size: .82rem; margin-left: 4px; }
.lvg-road small { display: block; color: #64748b; font-weight: 700; }
.lvg-un { display: block; margin-top: 4px; font-size: .88rem; line-height: 1.5; background: #fff7e0; border-radius: 10px; padding: 6px 10px; }
.lvg-say { width: 100%; margin-top: 12px; }
.hc-how { margin-left: 6px; vertical-align: middle; }
.mp-lv { cursor: pointer; }
.ob-choice.three { grid-template-columns: repeat(3, 1fr); }
.ob-choice button img { width: 100%; max-width: 110px; aspect-ratio: 1; object-fit: cover; border-radius: 50%; justify-self: center; margin-bottom: 4px; }
.ob-cam { display: grid; place-items: center; width: 100%; max-width: 110px; aspect-ratio: 1; border-radius: 50%; background: #f1f5f9; font-size: 2.6rem; justify-self: center; margin-bottom: 4px; }
@media (max-width: 520px) { .ob-choice.three { grid-template-columns: repeat(3, 1fr); gap: 6px; } .ob-choice.three button { padding: 10px 4px; } .ob-choice.three small { display: none; } }
.ke-base { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ke-base button { display: grid; justify-items: center; gap: 4px; padding: 10px; border-radius: 16px; border: 3px solid #e5e7eb; background: #fff; }
.ke-base button.on { border-color: #f59e0b; background: #fff7e0; }
.ke-base img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }

/* ===== arcade games kit (js/games/kit.js) ===== */
.ak { position: absolute; inset: 0; overflow: hidden; background: var(--ak-bg); touch-action: none; user-select: none; -webkit-user-select: none; font-family: var(--font); }
.ak-cv { position: absolute; inset: 0; display: block; touch-action: none; }
.ak-hud { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; pointer-events: none; }
.ak-hud span { background: rgba(15, 23, 42, .55); color: #fff; font: 900 clamp(.85rem, 2.4vh, 1.1rem)/1 var(--font); padding: 7px 12px; border-radius: 999px; white-space: nowrap; }
.ak-tl { position: absolute; top: 10px; left: 10px; pointer-events: none; }
.ak-tr { position: absolute; top: 8px; right: 8px; display: flex; gap: 6px; }
.ak-ib { width: 48px; height: 48px; border-radius: 14px; background: rgba(255, 255, 255, .88); font-size: 1.3rem; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }
.ak-pad { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: end; padding: 0 max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); pointer-events: none; }
.ak-pad[hidden] { display: none; }
.ak-side { display: flex; gap: 10px; align-items: end; }
.ak-tb { pointer-events: auto; min-width: 64px; min-height: 64px; width: clamp(64px, 11vh, 90px); height: clamp(64px, 11vh, 90px); border-radius: 50%; border: 3px solid rgba(255, 255, 255, .85); background: rgba(15, 23, 42, .38); color: #fff; font: 900 clamp(1.3rem, 4vh, 2rem)/1 var(--font); display: grid; place-items: center; touch-action: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.ak-tb.big { width: clamp(84px, 15vh, 118px); height: clamp(84px, 15vh, 118px); background: rgba(245, 158, 11, .55); }
.ak-tb.on { background: rgba(250, 204, 21, .75); transform: scale(.94); }
.ak-screen { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(15, 23, 42, .35); overflow-y: auto; }
.ak-screen[hidden] { display: none; }
.ak-card { background: rgba(255, 255, 255, .97); border-radius: 24px; padding: 20px 22px; text-align: center; box-shadow: 0 16px 50px rgba(0, 0, 0, .3); width: min(460px, 100%); display: grid; gap: 10px; }
.ak-card h2 { margin: 0; font-size: 1.7rem; }
.ak-card p { margin: 0; line-height: 1.45; }
.ak-small { font-size: .9rem; color: #64748b; }
.ak-btn { border: 0; border-radius: 16px; padding: 12px 16px; font: 900 1rem/1 var(--font); background: #f1f5f9; color: #0f172a; cursor: pointer; min-height: 48px; }
.ak-btn.big { background: #FFC800; color: #141414; font-size: 1.25rem; padding: 16px; box-shadow: 0 5px 0 #d9a400; }
.ak-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ak-row .ak-btn { flex: 1; }
.ak-set { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; font-weight: 700; font-size: .92rem; color: #334155; }
.ak-set label { display: flex; gap: 6px; align-items: center; }
.ak-set input { width: 20px; height: 20px; }
.ak-how { display: grid; gap: 6px; text-align: left; background: #f8fafc; border-radius: 14px; padding: 10px 14px; font-size: .95rem; }
.ak-stat { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; font: 900 1.15rem/1.2 var(--font); }
.ak-stat small { display: block; font-size: .72rem; color: #64748b; font-weight: 800; }
.ak-levels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ak-lv { border: 0; border-radius: 12px; min-height: 52px; background: #fde68a; font: 900 1rem/1 var(--font); color: #422006; box-shadow: 0 3px 0 #ca8a04; display: grid; place-items: center; gap: 2px; padding: 4px 2px; cursor: pointer; }
.ak-lv small { font-size: .62rem; }
.ak-lv.done { background: #86efac; box-shadow: 0 3px 0 #16a34a; color: #14532d; }
.ak-lv.skip { background: #e9d5ff; box-shadow: 0 3px 0 #9333ea; color: #581c87; }
.ak-lv:disabled { background: #e5e7eb; box-shadow: 0 3px 0 #9ca3af; color: #9ca3af; cursor: default; }
.ak-toast { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); background: rgba(15, 23, 42, .82); color: #fff; font-weight: 800; padding: 9px 16px; border-radius: 999px; pointer-events: none; }
.ak-credit { font-size: .75rem; color: #94a3b8; }
.ak-card.wide { width: min(620px, 100%); }
.ak-card h3 { margin: 4px 0 0; font-size: 1rem; color: #334155; }
.ak-stars { font-size: 2rem; letter-spacing: 4px; }
.ak-table { border-collapse: collapse; margin: 0 auto; font-size: .95rem; }
.ak-table td, .ak-table th { padding: 3px 10px; text-align: left; }
.ak-table td:last-child, .ak-table th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.ak-table th { border-top: 2px solid #e2e8f0; }
.ak-screen.cc-final { background: transparent; }
.ak-screen.cc-final.wide { place-items: center end; }
.ak-screen.cc-final.tall { place-items: end center; }
.ak-screen.cc-final .ak-card { width: min(380px, 100%); }
.ak-screen.cc-final.wide .ak-card { width: min(380px, 42%); }

/* grown-ups: leaderboard scope choice */
.p-scopes { display: grid; gap: 6px; margin: 8px 0; }
.p-scope { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 12px; background: var(--bg2, #f1f5f9); cursor: pointer; }
.p-scope input { margin-top: 3px; width: 18px; height: 18px; flex: none; }
.p-scope span { display: grid; gap: 2px; }
.p-scope small { color: #64748b; font-size: .82rem; }
.p-scope:has(input:checked) { outline: 2px solid #f59e0b; background: #fffbeb; }

/* ---------- CubSchool logo (assets/brand/cublevel-mark.svg + the wordmark) ---------- */
.cl-logo { font-family: var(--font); font-weight: 800; color: #1e1b2e; letter-spacing: -.02em; }
.cl-logo b, .cl-logo span { font-weight: 600; }
.cl-logo img { width: 1.55em; height: auto; border-radius: 0 !important; box-shadow: none !important; filter: drop-shadow(0 1px 0 rgba(150, 100, 0, .45)); }
.brand.cl-logo { font-size: 1.45rem; }

/* landing: the closing "graduation" scene (black and gold, like the logo) */
.lp-final.lp-grad { padding: 0; overflow: hidden; background: #141414; text-align: center; }
.lp-grad-pic img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: 55% 45%; }
.lp-grad-copy { position: relative; margin-top: clamp(-150px, -12vw, -60px); padding: clamp(70px, 9vw, 120px) 24px clamp(46px, 7vw, 76px); background: linear-gradient(to bottom, rgba(20, 20, 20, 0), #141414 clamp(60px, 9vw, 120px)); }
.lp-grad h2 { color: #fffaf0; font-family: var(--font); font-weight: 800; font-size: clamp(2.1rem, 4.6vw, 3.4rem); line-height: 1.08; }
.lp-grad h2 em { font-style: normal; color: #FFC800; text-shadow: 0 0 22px rgba(255, 200, 0, .35); }
.lp-grad p { color: rgba(255, 250, 240, .82); max-width: 560px; margin: 14px auto 0; font-size: 1.12rem; }
.lp-final.lp-grad .lp-btn:not(.ghost) { background: #FFC800; color: #141414; box-shadow: 0 10px 30px rgba(255, 200, 0, .3); }
@media (max-width: 700px) { .lp-grad-pic img { aspect-ratio: 4 / 3; object-position: 58% 40%; } }
.lp-final.lp-grad + .lp-foot { background: #141414; color: rgba(255, 250, 240, .6); border-top: 1px solid rgba(255, 200, 0, .15); }

.lb-scope { display: inline-block; margin: -4px 0 10px; padding: 5px 12px; border-radius: 999px; background: #fef3c7; color: #92400e; font-weight: 900; font-size: .9rem; }

/* after a game: new best / better than last time / leaderboard climb (slides down over the game's result screen) */
.game-ov-box { position: relative; }
.gs-card { position: absolute; z-index: 50; top: 62px; left: 50%; transform: translate(-50%, -30px); opacity: 0; transition: transform .45s cubic-bezier(.2, .9, .3, 1.3), opacity .3s; width: min(460px, calc(100% - 24px)); background: #141414; color: #fffaf0; border: 2px solid #FFC800; border-radius: 20px; padding: 14px 18px 10px; box-shadow: 0 16px 40px rgba(0, 0, 0, .4), 0 0 24px rgba(255, 200, 0, .25); cursor: pointer; text-align: left; }
.gs-card.on { transform: translate(-50%, 0); opacity: 1; }
.gs-card p { margin: 0 0 8px; font-weight: 800; font-size: 1.05rem; line-height: 1.35; }
.gs-card b { color: #FFC800; }
.gs-card .gs-up { display: inline-block; background: #16a34a; color: #fff; border-radius: 999px; padding: 1px 8px; font-size: .85rem; font-weight: 900; }
.gs-card small { display: block; text-align: right; color: rgba(255, 250, 240, .5); font-size: .72rem; }

/* landing: the pills around the top video pop in time with it */
.lp-float { background: none; padding: 0; box-shadow: none; }
.lp-pill { display: inline-block; font: 900 .95rem/1 inherit; background: #fff; padding: 12px 16px; border-radius: 16px; box-shadow: 0 14px 34px rgba(30, 27, 46, .18); white-space: nowrap; position: relative;
  opacity: 0; transform: scale(.5) translateY(8px); transition: opacity .25s, transform .45s cubic-bezier(.2, 1.4, .4, 1); }
.lp-pill.on { opacity: 1; transform: none; }
.lp-pill b { color: #141414; background: #FFC800; border-radius: 6px; padding: 0 4px; }
.lp-pill.bump { transform: scale(1.12); }
.lp-burst { position: absolute; left: 50%; top: 50%; font-style: normal; font-size: 1rem; pointer-events: none; animation: lp-burst .85s ease-out forwards; }
@keyframes lp-burst { from { transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(.6); opacity: 1; } to { transform: translate(-50%, -50%) rotate(var(--a)) translateY(-52px) scale(1.1); opacity: 0; } }
@media (max-width: 760px) { .lp-pill { font-size: .8rem; padding: 9px 12px; } }

/* landing: try a game */
.lp-try-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; max-width: 900px; margin: 30px auto 0; }
.lp-try-card { position: relative; display: grid; gap: 6px; text-align: left; background: #fff; border-radius: 24px; padding: 12px 12px 18px; box-shadow: 0 18px 40px -16px rgba(30, 27, 46, .35); cursor: pointer; transition: transform .2s; font: inherit; color: inherit; }
.lp-try-card:hover { transform: translateY(-4px); }
.lp-try-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 16px; }
.lp-try-card b { font-size: 1.2rem; margin: 6px 4px 0; }
.lp-try-card small { color: #6b6580; margin: 0 4px 8px; font-size: .95rem; }
.lp-try-card .lp-btn { justify-self: start; margin-left: 4px; }
.lp-try-play { position: absolute; left: 50%; top: 34%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: rgba(20, 20, 20, .72); color: #FFC800; display: grid; place-items: center; font-size: 1.9rem; padding-left: 6px; box-shadow: 0 0 0 4px rgba(255, 200, 0, .6); }
.lp-tryov { position: fixed; inset: 0; z-index: 8000; display: grid; grid-template-rows: auto 1fr; background: #141414; }
.lp-tryov header { display: flex; align-items: center; gap: 12px; padding: 10px max(12px, env(safe-area-inset-left)); padding-top: max(10px, env(safe-area-inset-top)); color: #fffaf0; font-weight: 900; }
.lp-tryov header b { flex: 1; font-size: 1.1rem; }
.lp-try-x { width: 44px; height: 44px; border-radius: 14px; background: rgba(255, 255, 255, .12); color: #fff; font-size: 1.2rem; }
.lp-try-clock { background: #FFC800; color: #141414; border-radius: 999px; padding: 7px 12px; font-size: .9rem; white-space: nowrap; }
.lp-try-stage { position: relative; overflow: hidden; background: #fff; }
.lp-try-end { position: absolute; inset: 0; display: grid; place-content: center; gap: 14px; text-align: center; padding: 24px; background: radial-gradient(circle at 50% 40%, #2d2618, #141414 70%); color: #fffaf0; }
.lp-try-end h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); color: #FFC800; }
.lp-try-end p { max-width: 520px; margin: 0 auto; font-size: 1.1rem; color: rgba(255, 250, 240, .85); }
/* landing: try a lesson + the learning design */
.lp-try-games { margin-top: clamp(40px, 6vw, 70px); }
.lp-try-games h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); }
.lp-quiz { max-width: 820px; margin: 30px auto 0; }
.lq-ages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.lq-age { display: grid; justify-items: center; gap: 2px; padding: 14px 8px; border-radius: 20px; background: #fff; border: 3px solid #eee6d8; font: inherit; color: inherit; cursor: pointer; transition: transform .15s, border-color .15s; }
.lq-age span { font-size: 1.9rem; } .lq-age b { font-size: 1.05rem; } .lq-age small { color: #6b6580; font-weight: 700; }
.lq-age:hover { transform: translateY(-3px); }
.lq-age.on { border-color: #FFC800; background: #fff8dc; box-shadow: 0 6px 0 #f0b400; }
.lq-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; background: #fdf9ff; border-radius: 28px; padding: clamp(16px, 3vw, 30px); box-shadow: 0 18px 40px -16px rgba(30, 27, 46, .3); min-height: 240px; text-align: center; }
.lq-empty { margin: auto; font-size: 1.3rem; font-weight: 900; color: #6b6580; }
.lq-top { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.lq-dots { display: flex; gap: 6px; } .lq-dots i { width: 12px; height: 12px; border-radius: 50%; background: #e7e0ef; }
.lq-dots i.done { background: #22c55e; } .lq-dots i.cur { background: #FFC800; transform: scale(1.25); }
.lq-stars { background: #141414; color: #FFC800; border-radius: 999px; padding: 6px 14px; }
.lq-card .q-answers { margin: 0 auto; }
.lq-card .ans { position: relative; }
.lq-pop { position: absolute; top: 6px; right: 6px; background: #FFC800; color: #141414; font-weight: 900; font-size: .95rem; border-radius: 999px; padding: 3px 9px; animation: lqPop 1.6s ease-out forwards; pointer-events: none; }
@keyframes lqPop { 0% { transform: scale(.3); opacity: 0; } 18% { transform: scale(1.2); opacity: 1; } 30%, 75% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0; } }
.lq-card { gap: 14px; }
.lq-card .q-prompt { font-size: clamp(1.35rem, 5vw, 1.9rem); gap: 8px; }
.lq-card .q-say { width: 42px; height: 42px; font-size: 1.15rem; flex: none; }
.lq-card .q-feedback { width: 100%; min-height: 0; }
.lq-card .q-feedback:empty { display: none; }
.lq-card .fact, .lq-card .hint-box { display: grid; justify-items: center; gap: 8px; width: 100%; max-width: 560px; margin: 0 auto; padding: 14px 16px; box-sizing: border-box; text-align: center; }
.lq-card .fact > b { font-size: 1.15rem; }
.lq-card .fact p, .lq-card .hint-box p { margin: 0; font-size: 1rem; }
.lq-card .fact .lp-btn { width: min(260px, 100%); }
@media (max-width: 560px) {
  .lq-card { padding: 16px 12px; border-radius: 22px; }
  .lq-card .ans { min-height: 88px; border-radius: 18px; }
  .lq-card .q-answers { gap: 10px; }
  .lq-card .q-visual { font-size: .9em; }
  .lq-why { font-size: .85rem; }
}
.lq-why { max-width: 600px; font-size: .92rem; color: #5b5470; background: #f3eefb; border-radius: 14px; padding: 10px 14px; margin: 0; text-align: left; }
.lq-note { font-size: .9rem; color: #6b6580; margin: 8px 0 0; }
.lq-end { display: grid; gap: 10px; justify-items: center; }
.lq-big { font: 900 clamp(2.6rem, 7vw, 4rem)/1 inherit; color: #eab308; }
.lq-end p { max-width: 560px; }
.lp-principles { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 30px; }
.lp-pr { background: #fff; border-radius: 22px; padding: 18px; box-shadow: 0 12px 30px -18px rgba(30, 27, 46, .35); display: grid; gap: 6px; align-content: start; text-align: left; }
.lp-pr > b { font-size: 1.8rem; } .lp-pr h3 { font-size: 1.12rem; margin: 0; } .lp-pr p { margin: 0; color: #4b4560; font-size: .95rem; }
.lp-pr small { display: block; margin-top: 4px; padding-top: 8px; border-top: 2px dashed #eee6d8; color: #141414; font-weight: 800; font-size: .88rem; }
.lp-designov { background: #fffaf0; }
.lp-designov header { background: #141414; }
.lp-dz { overflow-y: auto; padding: clamp(16px, 4vw, 40px); padding-bottom: 60px; max-width: 1040px; width: 100%; margin: 0 auto; color: #1e1b2e; }
.lp-dz > h3 { font-size: 1.5rem; margin: 34px 0 6px; }
.lp-dz-lead { font-size: 1.15rem; max-width: 720px; }
.lp-dz-steps { display: grid; gap: 10px; padding-left: 22px; } .lp-dz-steps li { line-height: 1.45; }
.lp-dz-ages { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 14px; }
.lp-dz-age { background: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 12px 30px -18px rgba(30, 27, 46, .35); }
.lp-dz-age h4 { font-size: 1.15rem; margin: 0; } .lp-dz-age ul { padding-left: 18px; margin: 10px 0 0; display: grid; gap: 6px; font-size: .95rem; }
@media (max-width: 560px) { .lq-age { padding: 10px 4px; } .lq-age span { font-size: 1.5rem; } .lq-age b { font-size: .9rem; } .lq-age small { font-size: .72rem; } }
/* lessons: the card always fits the screen and only its body scrolls, with the question pinned on top so it's never
   scrolled out of sight. Wide, short screens (touchscreen calendars, tablets sideways) put the answers beside it. */
.quest-ov { padding: 10px; }
.quest-ov .quest { max-height: calc(100dvh - 20px); padding-bottom: 0; }
.quest-ov .q-main { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.quest-ov .q-prompt { position: sticky; top: -18px; z-index: 3; align-self: stretch; margin: -18px -20px 0; padding: 16px 20px 10px; background: #fff; box-shadow: 0 10px 12px -12px rgba(0, 0, 0, .35); }
.quest-ov .q-skill + .q-prompt, .quest-ov .q-plan + .q-prompt { margin-top: 0; }
/* the question side and the answers: one column on phones (the groups melt away), side by side on wide screens */
.q-left, .q-right { display: contents; }
.q-main .q-answers { order: 1; } .q-main .q-feedback { order: 2; } .q-main .q-help { order: 3; } .q-main .q-helpcard { order: 4; }
@media (min-width: 880px) and (min-aspect-ratio: 5/4) {
  .quest-ov .quest { width: min(1200px, 100%); }
  .quest-ov .q-main { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 32px; align-items: start; padding-bottom: 100px; }
  .quest-ov .q-left { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; }
  .quest-ov .q-right { display: flex; flex-direction: column; justify-content: center; align-self: stretch; min-width: 0; }
  .quest-ov .q-left > * { max-width: 100%; }
  .quest-ov .q-prompt { position: static; margin: 0; padding: 0; box-shadow: none; }
  .quest-ov .np-key { min-height: 60px; }
  .quest-ov .np-display { min-height: 64px; }
}
/* in-game points + ratings: the cub coin (stars are only for spending) */
.cub-i { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.2em; }
.cub-i.off { opacity: .28; filter: grayscale(1); }
.ak-stars .cub-i { width: 1.25em; height: 1.25em; margin: 0 .08em; }
/* a new high score: the gold CubSchool trophy */
.nb-trophy { display: block; width: 92px; height: auto; margin: 0 auto 6px; filter: drop-shadow(0 0 14px rgba(255, 200, 0, .65)); animation: nbPop .7s cubic-bezier(.2, 1.5, .4, 1) both, nbGlow 1.8s ease-in-out .7s infinite; }
.nb-line { font-weight: 900; font-size: 1.2rem; }
.nb-line .nb-trophy { width: 76px; }
@keyframes nbPop { 0% { transform: scale(.2) rotate(-18deg); opacity: 0; } 70% { transform: scale(1.12) rotate(4deg); opacity: 1; } 100% { transform: none; } }
@keyframes nbGlow { 0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 200, 0, .5)); } 50% { filter: drop-shadow(0 0 22px rgba(255, 200, 0, .95)); } }
.gs-trophy { position: relative; display: grid; justify-items: center; gap: 4px; margin: 2px 0 10px; }
.gs-trophy img { position: relative; width: 104px; height: auto; animation: nbPop .7s cubic-bezier(.2, 1.5, .4, 1) both, nbGlow 1.8s ease-in-out .7s infinite; }
.gs-trophy i { position: absolute; top: -10px; width: 150px; height: 150px; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 200, 0, .28) 0 12deg, transparent 12deg 30deg); -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%); mask: radial-gradient(circle, #000 35%, transparent 70%); animation: nbSpin 6s linear infinite; }
.gs-trophy b { position: relative; font-size: 1.35rem; color: #FFC800; letter-spacing: .02em; }
@keyframes nbSpin { to { transform: rotate(360deg); } }
.gs-card.best { border: 2px solid #FFC800; }
/* the referral page (cubschool.com/invite) */
.referral { max-width: 520px; }
.ref-kids { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
.ref-kid { display: grid; padding: 8px 14px; border-radius: 14px; border: 3px solid #eee6d8; background: #fff; font: inherit; cursor: pointer; }
.ref-kid small { color: #6b6580; font-weight: 700; }
.ref-kid.on { border-color: var(--kid); background: color-mix(in srgb, var(--kid) 12%, white); }
.ref-form { display: grid; gap: 8px; margin: 8px 0; }
.ref-h { margin: 14px 0 4px; font-size: 1rem; }
/* landing: the family pet (photo → drawn in every pose → starring in the games) */
.lp-pet-flow { display: grid; grid-template-columns: 1fr auto 1.25fr auto 1.35fr; align-items: center; gap: 14px; max-width: 1080px; margin: 34px auto 0; }
.lp-pet-flow figure { margin: 0; display: grid; gap: 10px; justify-items: center; }
.lp-pet-flow figcaption { font-weight: 900; font-size: 1rem; color: #141414; background: #fff; border-radius: 999px; padding: 6px 14px; box-shadow: 0 6px 16px -8px rgba(30, 27, 46, .35); }
.pf-photo img { width: 100%; max-width: 260px; aspect-ratio: 1; object-fit: cover; border-radius: 26px; border: 6px solid #fff; box-shadow: 0 18px 40px -16px rgba(30, 27, 46, .45); transform: rotate(-3deg); }
.pf-arrow { justify-self: center; font-size: 2rem; filter: drop-shadow(0 0 8px rgba(255, 200, 0, .7)); animation: pfPulse 1.8s ease-in-out infinite; }
@keyframes pfPulse { 50% { transform: scale(1.25); } }
.pf-poses { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 300px; padding: 14px; background: radial-gradient(circle at 50% 40%, #fff8dc, #ffe9a8); border-radius: 26px; box-shadow: 0 18px 40px -16px rgba(30, 27, 46, .35); }
.pf-poses img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.pf-poses img:nth-child(1) { animation: pfBob .9s ease-in-out infinite; }
@keyframes pfBob { 50% { transform: translateY(-5px); } }
.pf-covers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; max-width: 340px; }
.pf-covers div { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 26px -14px rgba(30, 27, 46, .5); }
.pf-covers img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.pf-covers small { position: absolute; left: 6px; bottom: 6px; background: rgba(20, 20, 20, .78); color: #FFC800; font-weight: 900; font-size: .75rem; border-radius: 999px; padding: 2px 8px; }
.lp-pet-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 900px; margin: 30px auto 0; }
.lp-pet-steps li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 20px; padding: 16px; box-shadow: 0 12px 30px -18px rgba(30, 27, 46, .35); }
.lp-pet-steps b { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #141414; color: #FFC800; font-weight: 900; }
.lp-pet-steps span { display: grid; gap: 2px; color: #5b5470; font-size: .95rem; }
.lp-pet-steps strong { color: #141414; font-size: 1.05rem; }
.lp-small { font-size: .95rem; color: #6b6580; font-weight: 700; margin-top: 16px; }
.lp-small.center { text-align: center; }
@media (max-width: 820px) {
  .lp-pet-flow { grid-template-columns: 1fr; gap: 8px; }
  .pf-arrow { transform: rotate(0); font-size: 1.6rem; }
  .pf-photo img { max-width: 200px; }
  .lp-pet-steps { grid-template-columns: 1fr; }
}
.lp-try-card.tried img { filter: saturate(.55) brightness(.9); }
.lp-try-card.tried .lp-try-play { background: rgba(20, 20, 20, .55); font-size: 1.3rem; }
.lp-try-card.tried .lp-btn { background: #fff; color: #141414; box-shadow: 0 0 0 2px #ede4d3; }
/* a hidden Cub coin found in a game */
.coin-found { position: absolute; z-index: 60; left: 50%; top: 18%; transform: translate(-50%, -20px) scale(.6); opacity: 0; display: grid; justify-items: center; gap: 4px; padding: 16px 26px; border-radius: 24px; background: rgba(20, 20, 20, .88); border: 2px solid #FFC800; box-shadow: 0 0 40px rgba(255, 200, 0, .45); color: #fffaf0; pointer-events: none; transition: transform .45s cubic-bezier(.2, 1.5, .4, 1), opacity .3s; }
.coin-found.on { transform: translate(-50%, 0) scale(1); opacity: 1; }
.coin-found img { width: 86px; height: 86px; animation: coinSpin 1.1s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(255, 200, 0, .8)); }
.coin-found b { font-size: 1.5rem; color: #FFC800; }
.coin-found small { font-weight: 800; opacity: .8; }
@keyframes coinSpin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.15); } }
.score-i { display: inline-block; height: 1.2em; width: auto; vertical-align: -0.25em; }
/* a hidden Cub coin peeking in from an edge of a game: tap it */
.peek-coin { position: absolute; z-index: 40; width: 64px; height: 64px; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .6s cubic-bezier(.2, 1.4, .4, 1); }
.peek-coin img { width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgba(255, 200, 0, .9)); animation: coinSpin 1.2s ease-in-out infinite; }
.peek-coin.left { left: 0; } .peek-coin.right { right: 0; }
.peek-coin.top { top: 60px; } .peek-coin.bottom { bottom: 90px; }
.peek-coin.left { transform: translateX(-70%) rotate(-12deg); } .peek-coin.right { transform: translateX(70%) rotate(12deg); }
.peek-coin.left.in { transform: translateX(12px); } .peek-coin.right.in { transform: translateX(-12px); }
/* Earn Cub Coins: School, Life Skills and Chores side by side */
@media (min-width: 640px) { .lp-cards.three { grid-template-columns: repeat(3, 1fr); } }
.learn-pick:has(.lp-cards.three) { width: min(760px, 100%); }
.lp-card.chores { background: linear-gradient(160deg, #fef3c7, #fffbeb); border-color: #fcd34d; }
.ma .cub-i { width: 1em; height: 1em; vertical-align: -0.1em; }
.lp-cards.three { align-items: stretch; }
.lp-cards.three .lp-card { align-content: start; grid-template-rows: auto auto 1fr auto; }
/* setup: add another kid, right under the one you just filled in */
.ob-addkid { width: 100%; margin: 6px 0 2px; padding: 14px; border-radius: 16px; border: 2px dashed #e8c77a; background: #fffaf0; color: #7a5a00; font: 800 1.05rem/1 inherit; cursor: pointer; }
.ob-addkid:hover { background: #fff3d1; }
/* the floating Next button never covers the fact / "I wonder" box when it scrolls into view */
.quest-ov .fact, .quest-ov .hint-box { scroll-margin-bottom: 120px; }
/* wide screens: Next sits under the answers column, clear of the question side (and of Cub Bot in the corner) */
@media (min-width: 880px) and (min-aspect-ratio: 5/4) {
  body:has(.quest-ov) .next-float { left: calc(50% + min(1200px, 100vw - 20px) * 0.27); }
}
/* waiting for a new family's custom players */
.pw { display: grid; justify-items: center; gap: 10px; text-align: center; padding: 10px 0 4px; }
.pw-art img { width: 96px; height: 96px; animation: coinSpin 1.6s ease-in-out infinite; filter: drop-shadow(0 0 16px rgba(255, 200, 0, .6)); }
.pw h2 { margin: 6px 0 0; }
.pw-lead { font-size: 1.1rem; font-weight: 700; max-width: 420px; margin: 0; }
.pw-bar { width: min(420px, 100%); height: 16px; border-radius: 999px; background: #f1ead9; overflow: hidden; margin-top: 8px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .12); }
.pw-bar i { display: block; height: 100%; width: 2%; border-radius: inherit; background: linear-gradient(90deg, #FFC800, #ffdf5e, #FFC800); background-size: 200% 100%; animation: pwShine 1.6s linear infinite; transition: width .8s ease; }
@keyframes pwShine { to { background-position: -200% 0; } }
.pw-pct { font-weight: 900; color: #8a6a00; margin: 0; }
.pw-list { list-style: none; padding: 0; margin: 4px 0; display: grid; gap: 6px; text-align: left; }
.pw-list li { display: flex; gap: 8px; align-items: center; font-weight: 700; }
.pw-list li.making { color: #5b5470; }
/* Games page: the high-score leaderboards */
.games-h .gl-board { margin-left: auto; background: #141414; color: #FFC800; box-shadow: 0 3px 0 #000; font-weight: 900; }
.lb-games .score-i, .lb-banner .score-i, .lb-list .score-i, .gc-best .score-i { width: auto !important; height: 1.15em !important; aspect-ratio: auto !important; object-fit: contain; border-radius: 0 !important; box-shadow: none !important; display: inline-block; margin: 0; vertical-align: -0.22em; }
.linkb { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }

/* ---------- Grown-ups: a dark rail (sections + the account, with Log out) beside white setting cards ---------- */
.parent.gu { width: min(1080px, 100%); height: min(92vh, 920px); max-height: none; padding: 0; display: grid; grid-template-columns: 272px minmax(0, 1fr); overflow: hidden; position: relative; background: #faf7f1; }
.gu-rail { background: #17151c; color: #f5f0e6; display: flex; flex-direction: column; gap: 16px; padding: 22px 14px 18px; overflow-y: auto; }
.gu-brand { order: 0; } .gu-brand h2 { margin: 0 8px; color: #fff; font-size: 1.35rem; }
.gu-nav { order: 1; display: flex; flex-direction: column; gap: 4px; }
.gu-nav button { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 14px; color: #d9d3c7; background: transparent; }
.gu-nav button:hover { background: rgba(255, 255, 255, .06); }
.gn-i { font-size: 1.35rem; width: 30px; text-align: center; flex-shrink: 0; }
.gn-t b { display: block; font-size: 1rem; color: #fff; }
.gn-t small { display: block; font-size: .74rem; line-height: 1.25; color: #a39d92; font-weight: 600; }
.gu-nav button.on { background: rgba(255, 200, 0, .13); box-shadow: inset 3px 0 0 #FFC800; }
.gu-nav button.on b { color: #FFC800; }
.gu-acct { order: 2; margin-top: auto; border-top: 1px solid rgba(255, 255, 255, .1); padding: 16px 8px 0; display: flex; flex-direction: column; gap: 12px; }
.gu-who { display: flex; flex-direction: column; min-width: 0; }
.gu-fam { color: #fff; font-weight: 900; }
.gu-who small { color: #a39d92; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gu-logout { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 14px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .3); background: transparent; color: #fff; font-weight: 900; font-size: .95rem; }
.gu-logout:hover { border-color: #FFC800; color: #FFC800; }
.gu-main { overflow-y: auto; padding: 26px 30px 120px; min-width: 0; }
.gu-top h2 { margin: 0; font-size: 1.6rem; padding-right: 56px; }
.gu-top p { margin: 4px 0 18px; color: var(--muted); }
.gu-close { position: absolute; top: 14px; right: 14px; z-index: 3; }
.gu .p-sec { background: #fff; border: 1px solid #efe6d6; border-radius: 18px; padding: 18px 20px; margin: 0 0 14px; box-shadow: 0 1px 2px rgba(60, 40, 10, .04); }
.gu .p-sec h3 { margin: 0 0 4px; font-size: 1.1rem; }
.gu-desc { margin: 0 0 12px; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.gu-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid #f3ecdf; }
.gu-rt { min-width: 0; } .gu-rt b { display: block; } .gu-rt small { display: block; color: var(--muted); font-size: .83rem; margin-top: 2px; }
.gu-ctl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.gu-ctl .p-text { width: 190px; }
.gu .gu-ctl .p-text.gu-num { width: 86px; }
.gu-sw { position: relative; display: inline-block; width: 50px; height: 30px; flex-shrink: 0; cursor: pointer; }
.gu-sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.gu-sw span { position: absolute; inset: 0; background: #d9d2c5; border-radius: 999px; transition: background .2s; }
.gu-sw span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .2s; }
.gu-sw input:checked + span { background: #16a34a; }
.gu-sw input:checked + span::after { transform: translateX(20px); }
.gu-sw input:focus-visible + span { outline: 3px solid #FFC800; outline-offset: 2px; }
.gu-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.gu-inline { display: flex; gap: 8px; align-items: center; } .gu-inline .p-text { flex: 1; min-width: 0; }
.gu-more { margin-top: 12px; } .gu-more summary { cursor: pointer; font-weight: 800; color: #5b4f66; padding: 4px 0; }
.gu-warn { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; padding: 10px 14px; border-radius: 12px; font-weight: 700; margin: 0 0 14px; }
.gu-kidpick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.gu-kidpick button { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 14px; background: #fff; border: 2px solid #efe6d6; font-weight: 900; }
.gu-kidpick.big button { padding: 5px 16px 5px 5px; }
.gu-kidpick button.on { border-color: var(--kid); background: color-mix(in srgb, var(--kid) 10%, white); }
.gk-av { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #f6f1fb; }
.gu-hero { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--kid) 14%, white), #fff) !important; }
.gu-hero-main { flex: 1; min-width: 0; } .gu-hero h3 { font-size: 1.4rem !important; }
.gu-stats { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .9rem; color: #5b4f66; } .gu-stats b { color: var(--ink); }
.gu .p-scopes { margin-bottom: 4px; }
@media (max-width: 760px) {
  .parent.gu { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: 92vh; }
  .gu-rail { min-width: 0; }
  .gu-rail { padding: 14px 14px 10px; gap: 10px; overflow: visible; }
  .gu-brand h2 { font-size: 1.2rem; margin: 0 4px; }
  /* the family's name on its own line (under the title, clear of ✕), then the plan and Log out side by side */
  .gu-acct { order: 1; margin: 0; padding: 0 4px; border: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; }
  .gu-acct .gu-upgrade[data-makeitmine] { order: 3; flex: 1 0 100%; padding: 8px 12px; }
  .gu-acct .gu-planbadge { padding: 6px 10px; } .gu-acct .gu-planbadge .pl-seal, .gu-acct .gu-upgrade .ci-cap { transform: scale(.8); margin: -4px; }
  .gu-acct .gu-upgrade small { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
  .gu-who { flex: 1 0 100%; flex-direction: row; align-items: baseline; gap: 8px; }
  .gu-fam, .gu-who small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gu-fam { flex: none; max-width: 65%; } .gu-who small { min-width: 0; }
  .gu-acct .gu-planbadge, .gu-acct .gu-upgrade { flex: 1 1 0; width: auto; min-width: 0; margin: 0; }
  .gu-logout { flex: none; width: auto; padding: 8px 12px; font-size: .88rem; }
  .gu-nav { order: 2; flex-direction: row; overflow-x: auto; scrollbar-width: none; gap: 6px; margin: 0 -14px; padding: 0 14px; }
  .gu-nav button { width: auto; flex: 0 0 auto; padding: 8px 12px; gap: 6px; }
  .gn-i { font-size: 1.1rem; width: auto; } .gn-t small { display: none; } .gn-t b { font-size: .9rem; }
  .gu-nav button.on { box-shadow: inset 0 -3px 0 #FFC800; }
  .gu-main { padding: 16px 14px 120px; }
  .gu-top h2 { font-size: 1.3rem; } .gu-top p { margin-bottom: 12px; }
  .gu-close { top: 8px; right: 8px; width: 40px; height: 40px; min-width: 0; min-height: 0; padding: 0; font-size: 1.1rem; }
  .gu .p-sec { padding: 14px; }
  .gu-row:has(.p-text) { flex-wrap: wrap; } .gu-row:has(.p-text) .gu-ctl { width: 100%; } .gu-ctl .p-text { width: 100%; } .gu-ctl { max-width: 100%; }
  .gu-brand { min-height: 44px; display: flex; align-items: center; }
  .gu-hero { flex-wrap: wrap; }
}

/* ---------- the invite lander (a friend's invite link lands here first) ---------- */
.inv-land { background: radial-gradient(1200px 700px at 50% -240px, #ffe1a8, transparent), #fff4e0; }
.il-card { width: min(560px, 100%); margin: auto; background: #fff; border-radius: 28px; overflow: hidden; box-shadow: 0 24px 70px rgba(60, 40, 10, .2); }
.il-hero { position: relative; aspect-ratio: 2 / 1; background: #141414; }
.il-hero > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.il-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 20, 20, .05) 40%, rgba(20, 20, 20, .55)); }
.il-logo { position: absolute; left: 18px; bottom: 14px; z-index: 1; display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 900; font-size: 1.25rem; text-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.il-logo img { width: 40px; height: 40px; }
.il-body { padding: 24px 26px 26px; display: grid; gap: 12px; }
.il-kicker { margin: 0; font-weight: 900; color: #b7870a; letter-spacing: .02em; }
.il-body h1 { margin: 0; font-size: clamp(1.45rem, 5vw, 1.9rem); line-height: 1.2; color: #141414; }
.il-lead { margin: 0; color: #4b4257; font-size: 1.05rem; line-height: 1.5; }
.il-list { list-style: none; margin: 4px 0; padding: 0; display: grid; gap: 10px; }
.il-list li { display: flex; gap: 12px; align-items: flex-start; }
.il-list li > span { flex: 0 0 38px; height: 38px; border-radius: 12px; background: #fff6d6; display: grid; place-items: center; font-size: 1.25rem; }
.il-list li > span img { width: 24px; height: 24px; }
.il-list b { display: block; } .il-list small { color: var(--muted); font-size: .9rem; }
.il-note { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fef3c7; color: #92400e; font-weight: 700; }
.il-go { width: 100%; background: #FFC800; color: #141414; box-shadow: 0 5px 0 #c99a00; }
.il-fine { margin: 0; text-align: center; color: var(--muted); font-size: .85rem; }
.il-login { justify-self: center; color: #7c6f5e; font-weight: 800; text-decoration: underline; padding: 6px; }
.lb-face { overflow: hidden; background: #fff6d6 !important; }
.lb-face img, .kc-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.kc-badge:has(img) { padding: 0; overflow: hidden; }

/* ---------- homepage v3: section nav, proof bar, the science (articles), make-it-theirs ---------- */
.lp-nav { display: flex; gap: clamp(12px, 2.4vw, 28px); font-weight: 800; }
.lp-nav a { color: #3d3450; text-decoration: none; font-size: .98rem; white-space: nowrap; }
@media (max-width: 1140px) { .lp-nav { gap: 14px; } .lp-nav a { font-size: .9rem; } }
.lp-nav a:hover { color: #141414; text-decoration: underline; text-decoration-color: #FFC800; text-decoration-thickness: 3px; text-underline-offset: 6px; }
a.lp-btn { display: inline-block; text-decoration: none; }
.lp-arts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; }
.lp-art { position: relative; display: grid; gap: 10px; align-content: start; text-align: left; background: #fff; border-radius: 24px; padding: 20px; border: 1px solid #f1e6cf; box-shadow: 0 14px 36px -22px rgba(30, 27, 46, .4); cursor: pointer; font: inherit; color: inherit; transition: transform .18s, box-shadow .18s; overflow: hidden; }
.lp-art::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: var(--ac); }
.lp-art:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(30, 27, 46, .5); }
.la-e { font-size: 1.9rem; } .la-n { position: absolute; right: 18px; top: 16px; font-weight: 900; color: #d8cdb5; font-size: 1.4rem; }
.lp-art b { font-size: 1.12rem; line-height: 1.25; }
.la-stat { color: #6b6178; font-size: .9rem; line-height: 1.4; } .la-stat em { font-style: normal; font-weight: 900; color: var(--ac); font-size: 1.05rem; }
.la-go { font-weight: 900; color: var(--ac); margin-top: auto; }
.lp-make-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lp-make-card { background: #fff; border-radius: 30px; padding: 16px 16px 22px; box-shadow: 0 18px 44px -24px rgba(30, 27, 46, .45); display: grid; gap: 10px; align-content: start; }
.lp-make-card h3 { margin: 6px 6px 0; font-size: 1.3rem; } .lp-make-card p { margin: 0 6px; color: #4b4257; }
.lp-make-card .lp-btn { justify-self: start; margin: 6px; }
.lp-make-card .lp-stage video { aspect-ratio: 16 / 11; }
.lp-pet-mini { display: flex; align-items: center; gap: 10px; background: #ffe9b3; border-radius: 24px; padding: 14px; aspect-ratio: 16 / 11; }
.pm-photo { width: 38%; aspect-ratio: 1; object-fit: cover; border-radius: 18px; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); }
.lp-pet-mini > span { font-size: 1.6rem; }
.pm-poses { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pm-poses img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff8e6; border-radius: 14px; }
.lp .lp-parents .lp-grid { grid-template-columns: repeat(3, 1fr); }
.lp .lp-parents .lp-copy .lp-kicker { background: #FFC800; }
/* the article reader */
.lp-arov main.lp-ar { overflow-y: auto; }
.ar { max-width: 720px; margin: 0 auto; padding: clamp(20px, 5vw, 48px) clamp(18px, 5vw, 32px) 80px; color: #1e1b2e; font-size: 1.08rem; line-height: 1.65; }
.ar-kicker { margin: 0; font-weight: 900; color: var(--ac); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; }
.ar h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.15; margin: 8px 0 8px; color: #141414; }
.ar-dek { margin: 0 0 18px; font-size: 1.2rem; color: #5b5168; }
.ar-stat { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 22px; background: color-mix(in srgb, var(--ac) 10%, white); border: 1px solid color-mix(in srgb, var(--ac) 25%, white); margin: 6px 0 20px; }
.ar-stat b { font-size: clamp(2rem, 6vw, 2.8rem); font-weight: 900; color: var(--ac); white-space: nowrap; line-height: 1; }
.ar-stat span { color: #3d3450; font-weight: 700; line-height: 1.35; }
.ar p { margin: 0 0 14px; }
.ar-chart { margin: 22px 0; padding: 20px; background: #fff; border-radius: 22px; border: 1px solid #efe4cc; box-shadow: 0 10px 28px -20px rgba(30, 27, 46, .35); }
.ar-chart figcaption { font-weight: 900; margin-bottom: 14px; }
.ar-bars { display: grid; gap: 12px; }
.ar-bar { display: grid; grid-template-columns: minmax(110px, 36%) 1fr auto; align-items: center; gap: 12px; font-size: .95rem; }
.ar-bar > span { color: #4b4257; font-weight: 700; line-height: 1.25; }
.ar-bar > b { font-weight: 900; min-width: 3.2em; text-align: right; }
.ar-track { position: relative; height: 26px; border-radius: 10px; background: #f5efe2; }
.ar-track i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 10px; background: var(--ac); transition: width .9s cubic-bezier(.2, .8, .2, 1) var(--d); }
.ar-track i.grow { width: var(--w); }
.ar-bar:last-child .ar-track i { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac) 25%, transparent); }
.ar-tick { position: absolute; top: -4px; bottom: -4px; border-left: 2px dashed #cbbd9f; z-index: 1; }
.ar-tick small { position: absolute; top: -18px; left: 4px; font-size: .7rem; color: #8a7e6a; font-style: normal; font-weight: 800; }
.ar-week { display: grid; grid-template-columns: 120px 1fr; align-items: end; gap: 12px; margin-bottom: 14px; }
.ar-week > span { font-weight: 800; color: #4b4257; font-size: .95rem; align-self: center; }
.ar-week > div { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 90px; align-items: end; }
.ar-week i { position: relative; height: 4%; background: #eadfc6; border-radius: 8px 8px 4px 4px; transition: height .8s cubic-bezier(.2, .8, .2, 1); }
.ar-week i.on { background: var(--ac); } .ar-week i.grow { height: var(--h); }
.ar-week i em { position: absolute; top: -18px; left: 0; right: 0; text-align: center; font-size: .72rem; font-style: normal; font-weight: 900; color: #3d3450; }
.ar-week i small { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: .7rem; color: #8a7e6a; font-weight: 800; }
.ar-week + .ar-week { margin-top: 26px; }
.ar-cap { margin: 24px 0 0 !important; font-size: .85rem; color: #7c6f5e; }
.ar-steps { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ar-steps > div { display: grid; justify-items: center; text-align: center; background: color-mix(in srgb, var(--ac) 8%, white); border-radius: 18px; padding: 14px 16px; min-width: 120px; }
.ar-steps > div span { font-size: 1.8rem; } .ar-steps small { color: #6b6178; }
.ar-steps > i { font-style: normal; font-weight: 900; color: var(--ac); font-size: 1.4rem; }
.ar-cmps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ar-cmp { border-radius: 18px; padding: 14px 16px; } .ar-cmp.l { background: #f5efe2; } .ar-cmp.r { background: color-mix(in srgb, var(--ac) 12%, white); }
.ar-cmp b { display: block; margin-bottom: 6px; } .ar-cmp ul { margin: 0; padding-left: 18px; font-size: .95rem; }
.ar-how { background: #141414; color: #fffaf0; border-radius: 22px; padding: 18px 20px; margin: 22px 0; }
.ar-how b { color: #FFC800; } .ar-how p { margin: 6px 0 0; color: #eee6d6; }
.ar-src { font-size: .9rem; color: #5b5168; } .ar-src summary { cursor: pointer; font-weight: 900; color: #3d3450; }
.ar-src ol { padding-left: 20px; display: grid; gap: 6px; } .ar-src p { font-size: .85rem; color: #7c6f5e; }
.ar-foot { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }
@media (max-width: 900px) {
  .lp-nav { display: none; }
  .lp .lp-parents .lp-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .lp-make-grid { grid-template-columns: 1fr; }
  .lp .lp-parents .lp-grid { grid-template-columns: 1fr; }
  .ar-bar { grid-template-columns: 1fr auto; } .ar-bar > .ar-track { grid-column: 1 / -1; grid-row: 2; }
  .ar-week { grid-template-columns: 1fr; } .ar-cmps { grid-template-columns: 1fr; }
  .ar-stat { flex-direction: column; align-items: flex-start; gap: 8px; }
}
.lp-art-dark { background: #141414; color: #fffaf0; border-color: #141414; }
.lp-art-dark::before { background: #FFC800; } .lp-art-dark .la-stat { color: #cfc6b4; } .lp-art-dark .la-go { color: #FFC800; }
.lp-make-card .lp-stage video { object-position: 50% 12%; }
.lp .lp-sec[id] { scroll-margin-top: 70px; }
@media (max-width: 640px) {
  .lp-arts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 4px 16px 18px; scrollbar-width: none; }
  .lp-arts > .lp-art { scroll-snap-align: center; }
}
@media (max-width: 640px) {
  .lp .lp-steps { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -16px; padding: 4px 16px 16px; scrollbar-width: none; }
  .lp .lp-steps > .lp-step { scroll-snap-align: center; }
}
.lp-step-h { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.lp-step-h .lp-num { position: static; transform: none; flex: 0 0 auto; }
.lp-step-h h3 { margin: 0 !important; font-size: 1.35rem; }

/* ---------- the longer articles: header art, section heads, pictures, more chart kinds, links, tips ---------- */
.ar { max-width: 760px; font-size: 1.12rem; line-height: 1.7; }
.ar-hero { margin: calc(-1 * clamp(20px, 5vw, 48px)) calc(-1 * clamp(18px, 5vw, 32px)) 22px; aspect-ratio: 16 / 8; overflow: hidden; border-radius: 0 0 28px 28px; background: #fff3d3; }
.ar-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 820px) { .ar-hero { margin: 8px 0 26px; border-radius: 28px; box-shadow: 0 24px 50px -30px rgba(60, 40, 10, .5); } }
.ar h2 { font-size: clamp(1.35rem, 3.6vw, 1.7rem); line-height: 1.2; margin: 34px 0 10px; color: #141414; }
.ar a { color: var(--ac); font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.ar a:hover { text-decoration-thickness: 3px; }
.ar-img { margin: 24px 0; }
.ar-img img { width: 100%; display: block; border-radius: 24px; box-shadow: 0 18px 40px -26px rgba(60, 40, 10, .5); }
.ar-img figcaption { margin-top: 8px; text-align: center; font-size: .9rem; color: #7c6f5e; font-weight: 700; }
.ar-img.phone { display: grid; justify-items: center; }
.ar-img.phone img { width: min(300px, 70%); aspect-ratio: 390 / 700; object-fit: cover; object-position: top; border: 8px solid #141414; border-radius: 36px; }
.ar-tips { background: color-mix(in srgb, var(--ac) 8%, white); border: 1px solid color-mix(in srgb, var(--ac) 22%, white); border-radius: 22px; padding: 18px 22px; margin: 24px 0; }
.ar-tips b { color: #141414; font-size: 1.1rem; } .ar-tips ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; }
.ar-legend { display: flex; gap: 16px; flex-wrap: wrap; margin: -4px 0 12px; font-size: .88rem; font-weight: 800; color: #4b4257; }
.ar-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.ar-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px; align-items: end; }
.ar-group > span { display: block; text-align: center; margin-top: 8px; font-weight: 800; font-size: .92rem; color: #4b4257; }
.ar-cols { display: flex; gap: 10px; align-items: flex-end; justify-content: center; height: 170px; border-bottom: 2px solid #eadfc6; }
.ar-col { flex: 0 1 64px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; }
.ar-col b { text-align: center; font-weight: 900; font-size: .95rem; margin-bottom: 4px; }
.ar-col i { display: block; height: 0; border-radius: 10px 10px 0 0; transition: height .9s cubic-bezier(.2, .8, .2, 1) var(--d); }
.ar-col i.grow { height: calc(var(--h) - 26px); }
.ar-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ar-svg .ax { font: 700 13px var(--font); fill: #8a7e6a; }
.ar-svg .lb { font: 800 15px var(--font); }
.ar-phr { display: grid; gap: 8px; }
.ar-phr > div { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #faf6ee; font-size: .98rem; }
.ar-phr s { color: #8a7e6a; text-decoration-color: #d97a7a; } .ar-phr i { font-style: normal; color: var(--ac); font-weight: 900; } .ar-phr b { color: #141414; }
.ar-tbl { display: grid; gap: 8px; }
.ar-tbl > div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #faf6ee; font-size: .98rem; }
.ar-tbl b { color: var(--ac); }
.ar-src { margin-top: 26px; padding-top: 16px; border-top: 1px solid #eadfc6; }
.ar-src > b { font-size: 1.05rem; color: #141414; }
@media (max-width: 640px) {
  .ar { font-size: 1.05rem; }
  .ar-phr > div { grid-template-columns: 1fr; gap: 2px; } .ar-phr i { display: none; }
  .ar-tbl > div { grid-template-columns: 1fr; gap: 2px; }
  .ar-cols { height: 150px; }
}
.lp-cap-note { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 7px 12px; border-radius: 999px; background: #141414; color: #FFC800; font-weight: 900; font-size: .88rem; }

/* ---------- homepage "Try it": one tidy card (age row, then the lesson) ---------- */
.lp .lp-quiz { max-width: 780px; margin: 28px auto 0; background: #fff; border: 1px solid #f1e6cf; border-radius: 28px; padding: 16px; box-shadow: 0 20px 44px -26px rgba(30, 27, 46, .35); }
.lp .lq-ages { gap: 10px; margin-bottom: 14px; }
.lp .lq-age { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; justify-items: start; align-items: center; text-align: left; padding: 10px 14px; border: 2px solid #eee6d8; border-radius: 16px; box-shadow: none; }
.lp .lq-age span { grid-row: 1 / 3; font-size: 1.6rem; }
.lp .lq-age b { font-size: 1rem; } .lp .lq-age small { font-size: .82rem; }
.lp .lq-age:hover { transform: none; border-color: #f3d27a; }
.lp .lq-age.on { border-color: #FFC800; background: #fff8dc; box-shadow: none; }
.lp .lq-card { background: #faf6ee; box-shadow: none; border-radius: 20px; }
.lp .lq-card:has(.lq-empty) { min-height: 0; padding: 20px; background: transparent; border: 2px dashed #eadfc6; }
.lp .lq-empty { font-size: 1rem; color: #8a7e6a; }
.lp .lp-try-games { max-width: 780px; margin: clamp(56px, 8vw, 88px) auto 0; padding-top: clamp(28px, 4vw, 40px); border-top: 1px solid #efe4cc; }
@media (max-width: 640px) {
  .lp .lq-ages { grid-template-columns: 1fr; }
  .lp .lp-quiz { padding: 12px; }
}

/* ---------- "Make it theirs": little game tiles (try in color, more to unlock in grey) ---------- */
.lp-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; margin: 6px 6px 0; }
.lp-tile { position: relative; display: grid; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: center; }
.lp-tile img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; display: block; box-shadow: 0 6px 14px -8px rgba(20, 20, 20, .5); transition: transform .15s; }
.lp-tile:hover img { transform: translateY(-2px); }
.lp-tile small { font-size: .7rem; font-weight: 800; line-height: 1.15; color: #4b4257; }
.lp-tile .lt-play { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: rgba(20, 20, 20, .75); color: #FFC800; font-style: normal; font-size: .8rem; padding-left: 2px; box-shadow: 0 0 0 2px rgba(255, 200, 0, .7); }
.lp-tile.locked img { filter: grayscale(1) brightness(1.05) contrast(.85); opacity: .55; }
.lp-tile.locked small { color: #9b917f; }
.lp-tile.locked .lp-cap { position: absolute; left: 50%; top: 36%; transform: translate(-50%, -50%); width: 34px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); }
.lp-tile.tried .lt-play { background: rgba(20, 20, 20, .5); }
.lp-tiles-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 8px 6px 0 !important; font-size: .78rem; font-weight: 800; color: #7c6f5e; }
.lp-tiles-key span { display: inline-flex; align-items: center; gap: 5px; } .lp-tiles-key .lp-cap { width: 18px; }
.lp-lock-tip { display: flex; gap: 10px; align-items: flex-start; margin: 10px 6px 0 !important; padding: 12px 14px; border-radius: 16px; background: #141414; color: #f5efe2; font-size: .92rem; line-height: 1.4; }
.lp-lock-tip b { color: #FFC800; } .lp-lock-tip .lp-cap { width: 30px; flex: none; }
.lp-lock-tip.pop { animation: popIn .3s both; }
.lp-lock-tip[hidden] { display: none; }
.lp-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lt-pic { position: relative; display: block; }
.lp-tile .lt-play, .lp-tile.locked .lp-cap { top: 50%; }
.lp-tiles { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
@media (min-width: 1000px) { .lp-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.lp-make-card .lp-lock-tip { color: #f5efe2; }
.lp-lock-tip .lp-cap { width: 40px; padding: 5px; background: #fff8dc; border-radius: 50%; }
.lp-tiles { grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); } @media (min-width: 1000px) { .lp-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.lp .lp-step { align-content: start; }
.lp .lp-step > p { margin: 4px 0 0; }

/* ---------- the CubSchool icon set (js/icons.js) ---------- */
.ci { width: 1.25em; height: 1.25em; flex: none; display: inline-block; vertical-align: -0.22em; }
.ci-mark { width: 1.1em; }
.ci-badge { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: #141414; color: #fff; flex: none; box-shadow: 0 6px 14px -8px rgba(20, 20, 20, .6); }
.ci-badge .ci { width: 26px; height: 26px; }
.ci-badge .ci-mark { width: 24px; }
.lp-parents .ci-badge { background: rgba(255, 255, 255, .1); box-shadow: none; margin-bottom: 12px; }
.lp .lq-age span .ci { width: 1.7rem; height: 1.7rem; }
.il-list li > .ci-badge { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 12px; background: #141414; }
.il-list li > .ci-badge .ci { width: 22px; height: 22px; }
.il-kicker .ci, .ar-kicker .ci { width: 1.35em; height: 1.35em; vertical-align: -0.3em; }
.ar-kicker { color: var(--ac); }
.ar-how b .ci-mark { width: 1.1em; height: 1.2em; vertical-align: -0.2em; margin-right: 2px; }
.lp-make-card h3 .ci { color: #141414; margin-right: 2px; }
.lp-cap-note .ci { color: #fff; }
.map-icon .ci, .kb-vol .ci { width: 24px; height: 24px; color: #141414; vertical-align: middle; }
.ma span .ci { width: 30px; height: 30px; color: #fff; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .18)); }
.gn-i .ci { width: 24px; height: 24px; color: #fff; }
.gu-nav button.on .gn-i .ci { color: #FFC800; --ci-accent: rgba(255, 200, 0, .25); }
.gu-top h2 .ci, .gu .p-sec h3 .ci, .pin-box h2 .ci, .gu-brand h2 .ci { color: #141414; margin-right: 4px; }
.gu-brand h2 .ci { color: #fff; }
.parent-btn .ci { width: 1em; height: 1em; }
.vp-head .ci, .p-lab .ci { width: 1.2em; height: 1.2em; }
.ma-lock .ci { width: 18px; height: 18px; color: #fff; vertical-align: -3px; }
.ci-badge { width: 52px; height: 52px; border-radius: 16px; } .ci-badge .ci { width: 32px; height: 32px; } .ci-badge .ci-mark { width: 28px; height: 32px; }
.il-list li > .ci-badge { width: 44px; height: 44px; flex-basis: 44px; } .il-list li > .ci-badge .ci { width: 26px; height: 26px; }
.lp-art-dark .ci-badge { background: #FFC800; color: #141414; --ci-accent: #fff; }

/* ---------- plans & pricing (js/pricing.js): homepage, sign-up, Grown-ups, the upgrade sheet ---------- */
.pl-cards { display: grid; grid-template-columns: 1fr 1.15fr; gap: 18px; max-width: 900px; margin: 0 auto; align-items: stretch; }
.pl-card { position: relative; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid #efe4cc; border-radius: 26px; padding: 24px; box-shadow: 0 18px 44px -28px rgba(30, 27, 46, .45); text-align: left; }
.pl-family { background: #141414; color: #f5efe2; border-color: #141414; box-shadow: 0 26px 60px -24px rgba(20, 20, 20, .6); }
.pl-card.cur { outline: 3px solid #FFC800; outline-offset: 3px; }
.pl-flag { position: absolute; top: -12px; right: 22px; background: #FFC800; color: #141414; font-weight: 900; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; }
.pl-top { display: grid; gap: 2px; }
.pl-top b { font-size: 1.15rem; }
.pl-price { font-size: 2.6rem; font-weight: 900; line-height: 1.05; color: #141414; }
.pl-family .pl-price { color: #FFC800; }
.pl-top small { color: #7c6f5e; font-weight: 700; } .pl-family .pl-top small { color: #bdb6a6; }
.pl-inc { margin: 0; font-weight: 800; color: #FFC800; }
.pl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; flex: 1; }
.pl-list li { display: flex; gap: 12px; align-items: flex-start; }
.pl-list li .ci { width: 24px; height: 24px; flex: none; margin-top: 1px; color: #141414; }
.pl-family .pl-list li .ci { color: #fff; }
.pl-list b { display: block; font-size: .98rem; } .pl-list small { display: block; color: #7c6f5e; font-size: .86rem; line-height: 1.35; }
.pl-family .pl-list small { color: #bdb6a6; }
.pl-go { width: 100%; justify-content: center; }
.pl-family .pl-go { background: #FFC800; color: #141414; box-shadow: 0 5px 0 #c99a00; }
.pl-code { max-width: 900px; margin: 14px auto 0; font-weight: 700; color: #5b4f66; }
.pl-code summary { cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.pl-code-f { display: flex; gap: 8px; margin-top: 10px; } .pl-code-f input { flex: 1; min-width: 0; padding: 10px 12px; border-radius: 12px; border: 2px solid #e5dccb; font: inherit; font-weight: 800; text-transform: uppercase; }
.pl-code-msg { margin: 8px 0 0; font-weight: 800; color: #15803d; min-height: 1.2em; }
.pl-tutor { max-width: 900px; margin: 22px auto 0; background: #fff; border: 1px solid #efe4cc; border-radius: 24px; padding: 22px; text-align: left; box-shadow: 0 14px 36px -26px rgba(30, 27, 46, .4); }
.pl-tutor figcaption { font-weight: 900; font-size: 1.1rem; margin-bottom: 14px; display: flex; gap: 8px; align-items: center; }
.pl-bars { display: grid; gap: 12px; }
.pl-bar { display: grid; grid-template-columns: minmax(150px, 36%) 1fr auto; gap: 12px; align-items: center; font-weight: 700; color: #4b4257; font-size: .95rem; }
.pl-bar > div { height: 26px; background: #f5efe2; border-radius: 10px; overflow: hidden; } .pl-bar i { display: block; height: 100%; width: var(--w); border-radius: 10px; }
.pl-bar b { font-weight: 900; font-size: 1.1rem; color: #141414; min-width: 3.4em; text-align: right; }
.pl-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.pl-facts > div { background: #faf6ee; border-radius: 16px; padding: 12px 14px; } .pl-facts b { display: block; font-size: 1.3rem; font-weight: 900; } .pl-facts small { color: #6b6178; font-weight: 700; }
.pl-note { margin: 14px 0 0; font-size: .85rem; color: #7c6f5e; line-height: 1.5; }
.pl-sheet { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; background: rgba(20, 18, 28, .55); overflow-y: auto; }
.pl-sheet-card { position: relative; width: min(480px, 100%); background: #fff; border-radius: 26px; padding: 26px 24px; display: grid; gap: 12px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.pl-sheet-card h2 { margin: 0; font-size: 1.45rem; line-height: 1.2; } .pl-sheet-card .muted { margin: 0; }
.pl-sheet-card .q-close { position: absolute; top: 12px; right: 12px; }
.pl-kick { margin: 0; font-weight: 900; color: #b7870a; display: flex; gap: 6px; align-items: center; }
.pl-sheet .pl-go { background: #FFC800; color: #141414; }
.pl-msg { margin: 0; color: #b91c1c; font-weight: 800; min-height: 1em; }
.pl-sheet .pl-code { margin: 0; }
.ob-plans { display: grid; gap: 16px; } .ob-plans .pl-cards { grid-template-columns: 1fr; }
@media (min-width: 720px) { .acct.wide .ob-plans .pl-cards { grid-template-columns: 1fr 1.15fr; } }
.ob-paid { display: flex; gap: 10px; align-items: flex-start; }
.ob-frank { display: flex; gap: 14px; align-items: center; background: #faf6ee; border-radius: 18px; padding: 12px; }
.ob-frank img { width: 72px; height: 72px; border-radius: 16px; object-fit: cover; } .ob-frank b { display: block; font-size: 1.1rem; } .ob-frank small { color: #7c6f5e; }
.ob-choice button.locked { opacity: .92; } .ob-choice button.locked small { color: #b7870a; font-weight: 800; }
.ob-choice button.locked small .ci, .ke-upsell .ci { width: 1em; height: 1em; }
.ke-upsell { background: #fff8dc; border-radius: 16px; padding: 14px; display: grid; gap: 10px; } .ke-upsell p { margin: 0; }
.p-scopes.locked { opacity: .55; }
.lp-beta { max-width: 900px; margin: 18px auto 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; font-weight: 800; color: #5b4f66; }
.lp-beta span { display: inline-flex; gap: 6px; align-items: center; }
.lp-beta input { padding: 12px 14px; border-radius: 999px; border: 2px solid #e5dccb; font: inherit; font-weight: 800; text-transform: uppercase; width: 180px; }
@media (max-width: 720px) {
  .pl-cards { grid-template-columns: 1fr; }
  .pl-bar { grid-template-columns: 1fr auto; } .pl-bar > div { grid-column: 1 / -1; grid-row: 2; }
  .pl-facts { grid-template-columns: 1fr; }
}
.lp .pl-inc, .pl-family .pl-inc { color: #FFC800; }

/* ---------- type: Plus Jakarta Sans everywhere (buttons and fields too), headings a touch tighter ---------- */
button, input, select, textarea { font-family: inherit; }
h1, h2, h3, .lp h1, .lp h2 { letter-spacing: -0.02em; }
/* upper-elementary lessons: stacked fractions, a 3D box for volume */
.fr { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1; margin: 0 .12em; font-weight: 900; }
.fr i { font-style: normal; padding: 0 .12em; } .fr i:first-child { border-bottom: 3px solid currentColor; padding-bottom: .08em; } .fr i:last-child { padding-top: .08em; }
.v-box3d { position: relative; width: 170px; height: 120px; margin: 6px auto 14px; background: linear-gradient(135deg, #fde68a, #f59e0b); border: 4px solid #1f2937; border-radius: 6px; box-shadow: 18px -14px 0 -4px #fcd34d, 18px -14px 0 0 #1f2937; }
.v-box3d span { position: absolute; font-weight: 900; font-size: .95rem; color: #1f2937; background: #fff; border-radius: 8px; padding: 1px 6px; }
.v-box3d span:nth-child(1) { left: 50%; bottom: -28px; transform: translateX(-50%); } .v-box3d span:nth-child(2) { right: -46px; top: -16px; } .v-box3d span:nth-child(3) { left: -58px; top: 50%; transform: translateY(-50%); }
.v-rect { width: min(260px, 100%); height: auto; }
.lp .lq-ages { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 640px) { .lp .lq-ages { grid-template-columns: 1fr 1fr; } }
/* answer tiles: text is sized to its own tile, never the screen, so it can't spill out (js/fit.js is the safety net) */
.q-answers > * { min-width: 0; }
.ans { container-type: inline-size; overflow: hidden; }
.ans .word { font-size: min(2.6rem, 34cqi); line-height: 1.05; white-space: nowrap; }
.ans .big-num, .ans .big-letter { font-size: min(4rem, 40cqi); line-height: 1; white-space: nowrap; }
.ans .big-num.huge, .ans .big-letter.huge { font-size: min(6rem, 40cqi); }
.ans .big-emoji { font-size: min(4.4rem, 44cqi); }
.ans .txt { overflow-wrap: break-word; hyphens: auto; max-width: 100%; }
.eq, .word.big, .q-prompt { max-width: 100%; overflow-wrap: break-word; }

/* ---- Custom Courses: the cap mark, the grown-ups card, the wizard, the homepage section ---- */
.ci-cap { width: 1.5em; height: 1.3em; flex: none; display: inline-block; vertical-align: -0.28em; }
.q-plan { display: inline-flex; align-items: center; gap: 6px; background: #fff7d6; color: #3b2f00; }
.q-plan .ci-cap { width: 1.35em; height: 1.2em; }
.cc-card h3 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cc-mark .ci-cap { width: 42px; height: 36px; vertical-align: middle; }
.cc-kinds { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 14px; }
.cc-kinds span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: #f6f1e7; font-weight: 800; font-size: .9rem; }
.cc-new { display: inline-flex; align-items: center; gap: 8px; }
.cc-title { display: inline-flex; align-items: center; gap: 6px; } .cc-title .ci-cap { width: 1.4em; }

.cw-ov { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: 16px; background: rgba(20, 18, 28, .6); overflow-y: auto; animation: cwIn .2s ease; }
.cw-ov.gone { opacity: 0; transition: opacity .25s; }
@keyframes cwIn { from { opacity: 0; } }
.cw { position: relative; width: min(640px, 100%); max-height: calc(100dvh - 32px); overflow-y: auto; background: #fff; border-radius: 28px; padding: 22px clamp(16px, 4vw, 30px) 26px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); display: grid; gap: 14px; align-content: start; }
.cw h2 { margin: 0; font-size: clamp(1.3rem, 4vw, 1.6rem); line-height: 1.2; overflow-wrap: anywhere; }
.cw-head { display: flex; align-items: center; gap: 12px; }
.cw-head > div { flex: 1; display: grid; line-height: 1.15; } .cw-head b { font-size: 1.1rem; } .cw-head small { color: #8a6d00; font-weight: 800; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.cw-mark .ci-cap { width: 52px; height: 45px; display: block; }
.cw-dots { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.cw-dots span { display: grid; gap: 5px; } .cw-dots i { height: 5px; border-radius: 9px; background: #eee6d8; }
.cw-dots small { font-size: .7rem; font-weight: 800; color: #a59a8a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-dots .done i, .cw-dots .on i { background: #FFC800; } .cw-dots .on small { color: #141414; }
.cw-kinds { display: grid; gap: 10px; }
.cw-kind { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; row-gap: 2px; align-items: center; text-align: left; padding: 14px; border-radius: 20px; border: 2px solid #eee3d1; background: #fffdf8; transition: border-color .15s, transform .15s; }
.cw-kind .ci-badge { grid-row: span 2; } .cw-kind b { font-size: 1.1rem; } .cw-kind small { color: #5d5566; line-height: 1.35; }
.cw-kind:hover, .cw-kind.on { border-color: #FFC800; transform: translateY(-1px); }
.cw-lab { display: grid; gap: 6px; font-weight: 800; }
.cw-in { width: 100%; min-width: 0; font: inherit; font-weight: 600; padding: 12px 14px; border-radius: 14px; border: 2px solid #eee3d1; background: #fff; }
.cw-in:focus { outline: none; border-color: #FFC800; }
.cw-area { resize: vertical; min-height: 90px; line-height: 1.4; }
.cw-files { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cw-files .btn { display: inline-flex; align-items: center; gap: 6px; }
.cw-thumb { position: relative; } .cw-thumb img { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; display: block; }
.cw-thumb button, .cw-doc button { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; background: #141414; color: #fff; font-size: .7rem; }
.cw-doc { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px 8px 10px; border-radius: 12px; background: #f6f1e7; font-weight: 700; font-size: .85rem; max-width: 100%; overflow-wrap: anywhere; }
.cw-hint { margin: 0; color: #6b6275; font-size: .9rem; }
.cw-msg { margin: 0; color: #b42318; font-weight: 800; } .cw-msg:empty { display: none; }
.cw-nav { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.cw-nav .btn { display: inline-flex; align-items: center; gap: 8px; }
.cw-build { background: #141414; color: #fff; }
.cw-kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.cw-kid { position: relative; display: grid; gap: 2px; text-align: left; padding: 12px 14px; border-radius: 18px; border: 2px solid #eee3d1; background: #fff; }
.cw-kid b { font-size: 1.05rem; overflow-wrap: anywhere; } .cw-kid small { color: #6b6275; font-weight: 700; }
.cw-kid.on { border-color: var(--kid); background: color-mix(in srgb, var(--kid) 14%, #fff); }
.cw-kid .ci { position: absolute; top: 10px; right: 10px; color: #141414; }
.cw-ranges { display: flex; flex-wrap: wrap; gap: 8px; } .chipb.on { background: #141414; border-color: #141414; color: #fff; }
.cw-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cw-dates .cw-in { width: auto; flex: 1; min-width: 140px; }
.cw-when { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #f6f1e7; font-weight: 700; flex-wrap: wrap; }
.cw-building { display: grid; justify-items: center; text-align: center; gap: 12px; padding: 24px 0 10px; }
.cw-bigmark .ci-cap { width: 120px; height: 105px; display: block; animation: cwBob 1.6s ease-in-out infinite; }
@keyframes cwBob { 50% { transform: translateY(-8px) rotate(-4deg); } }
.cw-line { margin: 0; font-weight: 800; min-height: 1.4em; }
.cw-bar { width: min(320px, 100%); height: 8px; border-radius: 9px; background: #eee6d8; overflow: hidden; }
.cw-bar i { display: block; height: 100%; width: 40%; border-radius: 9px; background: #FFC800; animation: cwBar 1.4s ease-in-out infinite; }
@keyframes cwBar { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.cw-review { display: grid; gap: 12px; }
.cw-kick { margin: 0; display: inline-flex; align-items: center; gap: 6px; color: #067647; font-weight: 900; }
.cw-sum { margin: 0; color: #4b4257; }
.cw-kidrev { border-left: 5px solid var(--kid); background: #fffdf8; border-radius: 16px; padding: 12px 14px; display: grid; gap: 8px; }
.cw-focus { display: flex; flex-wrap: wrap; gap: 6px; } .cw-focus span { padding: 4px 10px; border-radius: 999px; background: #fff3c4; font-size: .82rem; font-weight: 800; }
.cw-samples { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.cw-samples li { overflow-wrap: anywhere; } .cw-samples em { display: block; font-style: normal; font-weight: 800; color: #067647; font-size: .9rem; }
.cw-kidrev small { color: #6b6275; font-weight: 700; }
@media (max-width: 520px) { .cw { border-radius: 22px; } .cw-dots small { display: none; } .cw-nav .btn { flex: 1; justify-content: center; } }

.lp-courses .lp-copy { position: relative; }
.lp-cc-mark { display: block; margin: 0 auto 10px; } .lp-cc-mark .ci-cap { width: 96px; height: 84px; display: block; margin: 0 auto; filter: drop-shadow(0 12px 18px rgba(20, 20, 20, .25)); }
.lp-cc-steps { list-style: none; padding: 0; margin: 0 0 28px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.lp-cc-steps li { position: relative; display: grid; gap: 6px; align-content: start; padding: 18px 18px 18px 58px; border-radius: 22px; background: #fff; box-shadow: 0 14px 34px -24px rgba(30, 27, 46, .45); }
.lp-cc-steps li > span { position: absolute; left: 16px; top: 16px; width: 30px; height: 30px; border-radius: 50%; background: #FFC800; display: grid; place-items: center; font-weight: 900; }
.lp-cc-steps b { display: flex; align-items: center; gap: 6px; font-size: 1.05rem; } .lp-cc-steps small { color: #5d5566; line-height: 1.4; }
.lp-cc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lp-cc-card { background: #fff; border-radius: 26px; padding: 18px; display: grid; gap: 14px; align-content: start; box-shadow: 0 18px 44px -24px rgba(30, 27, 46, .45); }
.lp-cc-card header { display: flex; align-items: center; gap: 12px; } .lp-cc-card header div { display: grid; min-width: 0; }
.lp-cc-card header small { font-weight: 800; color: #8a6d00; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; } .lp-cc-card header b { font-size: 1.08rem; line-height: 1.2; }
.lp-cc-q { background: #faf6ee; border-radius: 18px; padding: 14px; display: grid; gap: 10px; }
.lp-cc-from { justify-self: start; display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 6px; border-radius: 999px; background: #fff3c4; font-weight: 800; font-size: .78rem; }
.lp-cc-from .ci-cap { width: 1.5em; height: 1.3em; }
.lp-cc-q p { margin: 0; font-weight: 800; line-height: 1.35; }
.lp-cc-ans { display: grid; gap: 6px; } .lp-cc-ans span { padding: 8px 12px; border-radius: 12px; background: #fff; border: 2px solid #eee3d1; font-weight: 800; }
.lp-cc-ans span.ok { border-color: #12b76a; background: #ecfdf3; }
.lp-cc-note { margin: 0; color: #5d5566; font-size: .95rem; }
.lp-cc-cta { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: 26px; text-align: center; }
.lp-cc-cta .lp-btn { display: inline-flex; align-items: center; gap: 8px; } .lp-cc-cta span { color: #5d5566; font-weight: 700; }
@media (max-width: 860px) { .lp-cc-steps, .lp-cc-cards { grid-template-columns: 1fr; } }
.lp-courses .lp-copy.center { max-width: 780px; }
.cw-when { flex-wrap: nowrap; align-items: flex-start; } .cw-when .ci { margin-top: 2px; } .cw-topic { margin-top: -6px; padding: 4px 12px; border-radius: 999px; background: #fff3c4; }

/* the cap on everything that's part of the Family plan */
.cap-tag { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; padding: 3px 10px 3px 5px; border-radius: 999px; background: #FFC800; color: #141414; font: 900 .7rem/1 var(--font); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.cap-tag .ci-cap { width: 22px; height: 19px; }
.btn .ci-cap, .lp-btn .ci-cap { width: 1.6em; height: 1.4em; vertical-align: -0.35em; }
.btn .ci-cap path[fill="#141414"], .lp-btn .ci-cap path[fill="#141414"] { fill: currentColor; }
.pl-seal { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #FFC800; margin-bottom: 8px; box-shadow: 0 8px 20px -10px rgba(255, 200, 0, .8); }
.pl-seal .ci-cap { width: 38px; height: 33px; }
.pl-seal.sm { width: 34px; height: 34px; margin: 0; } .pl-seal.sm .ci-cap { width: 24px; height: 21px; }
.cap-in .ci-cap { width: 1.5em; height: 1.3em; vertical-align: -0.3em; }
.ob-upsell .ci-cap, .muted .ci-cap { width: 1.5em; height: 1.3em; }
.pl-list { align-content: start; }

/* Grown-ups: upgrade / make them yours, right under the account */
.gu-upgrade { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 16px; background: #FFC800; color: #141414; text-align: left; box-shadow: 0 10px 22px -14px rgba(180, 130, 0, .9); transition: transform .15s; }
.gu-upgrade:hover { transform: translateY(-1px); }
.gu-upgrade .ci-cap { width: 40px; height: 35px; flex: none; }
.gu-upgrade span { display: grid; gap: 1px; min-width: 0; } .gu-upgrade b { font-size: .95rem; } .gu-upgrade small { font-size: .76rem; font-weight: 700; color: #4a3b00; line-height: 1.25; }

/* just upgraded: make the kids their own */
.up-flow .acct-body { display: grid; gap: 14px; }
.up-flow h2 { margin: 0; }
.up-dots { display: flex; gap: 6px; } .up-dots i { flex: 1; height: 5px; border-radius: 9px; background: #eee6d8; } .up-dots i.done, .up-dots i.on { background: #FFC800; }
.up-hero { display: grid; justify-items: center; text-align: center; gap: 8px; } .up-hero p { margin: 0; }
.pl-seal.big { width: 84px; height: 84px; margin: 0; } .pl-seal.big .ci-cap { width: 58px; height: 50px; }
.up-kids { display: grid; gap: 10px; }
.up-kid { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 18px; background: #fffdf8; border: 2px solid #f1e8d6; border-left: 5px solid var(--kid, #FFC800); }
.up-kid > span:last-child { display: grid; gap: 2px; min-width: 0; } .up-kid b { font-size: 1.05rem; overflow-wrap: anywhere; }
.up-keep { display: inline-flex; align-items: center; gap: 4px; color: #067647; font-weight: 800; font-size: .82rem; }
.up-state { color: #6b6275; font-weight: 700; font-size: .82rem; display: inline-flex; align-items: center; gap: 4px; }
.up-swap { display: flex; align-items: center; justify-content: center; gap: 16px; }
.up-arrow { font-size: 1.8rem; font-weight: 900; color: #c9a100; }
.up-new { border: 3px dashed #e0cf9d; font-size: 2rem; display: inline-grid; place-items: center; }
.up-flow .photo-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.up-flow .acct-actions { display: grid; gap: 8px; }
.up-flow .center { text-align: center; margin: 0; }
.up-keep { align-items: flex-start; } .up-keep .ci { margin-top: 1px; }

/* Resources: our story, featured above the science reads */
.lp-story { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; width: 100%; max-width: 1080px; margin: 0 auto 34px; padding: 0; text-align: left; background: #141414; color: #fff; border-radius: 30px; overflow: hidden; box-shadow: 0 24px 60px -30px rgba(20, 20, 20, .7); transition: transform .2s; }
.lp-story:hover { transform: translateY(-3px); }
.ls-pic img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 260px; }
.ls-txt { display: grid; gap: 12px; align-content: center; padding: clamp(20px, 3.5vw, 40px); }
.ls-kick { display: inline-flex; align-items: center; gap: 6px; color: #FFC800; font-weight: 900; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.ls-txt b { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.12; }
.ls-dek { color: #d8d2c6; line-height: 1.45; }
.ls-pts { display: flex; flex-wrap: wrap; gap: 6px; } .ls-pts span { padding: 5px 10px; border-radius: 999px; background: rgba(255, 200, 0, .14); color: #ffe07a; font-weight: 800; font-size: .8rem; }
.ls-txt .lp-btn { justify-self: start; }
.lp-sci-h { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 18px; font-size: 1.3rem; }
@media (max-width: 760px) { .lp-story { grid-template-columns: 1fr; } .ls-pic img { min-height: 0; aspect-ratio: 16 / 9; } }

/* the magic loop (our story) */
.ar-loop { display: grid; grid-template-columns: minmax(0, 360px) 1fr; gap: 24px; align-items: center; }
.ar-ring { position: relative; width: 100%; aspect-ratio: 1; }
.ar-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.ar-flow { animation: arFlow 1.6s linear infinite; }
@keyframes arFlow { to { stroke-dashoffset: -10; } }
@keyframes arSpin { to { transform: rotate(360deg); } }
.ar-lc { position: absolute; inset: 34%; border-radius: 50%; background: #141414; display: grid; place-items: center; align-content: center; gap: 2px; color: #FFC800; }
.ar-lc .ci-mark { width: 38%; height: auto; position: static; } .ar-lc small { font-weight: 900; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.ar-ln { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)) translateY(-38cqw) rotate(calc(-1 * var(--a))); }
.ar-ring { container-type: inline-size; }
.ar-ln > span { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 3px; width: 24cqw; padding: 6px 4px; border-radius: 16px; background: #fff; box-shadow: 0 8px 20px -12px rgba(30, 27, 46, .5); border: 2px solid #FFC800; }
.ar-ln .ci { width: 7cqw; height: 7cqw; min-width: 20px; min-height: 20px; color: #141414; }
.ar-ln b { font-size: clamp(.7rem, 3.6cqw, .92rem); line-height: 1.1; text-align: center; }
.ar-lk { margin: 0; padding-left: 22px; display: grid; gap: 10px; counter-reset: none; }
.ar-lk li { line-height: 1.4; } .ar-lk b { color: var(--ac, #b7870a); }
@media (max-width: 640px) { .ar-loop { grid-template-columns: 1fr; } .ar-ring { max-width: 340px; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .ar-flow { animation: none; } }

/* homepage footer: brand, links, legal */
.lp-foot { text-align: left; display: grid; grid-template-columns: 1.2fr 2fr; gap: 28px; padding: 40px clamp(16px, 4vw, 40px) 30px; }
.lf-brand { display: grid; gap: 8px; align-content: start; } .lf-brand img { width: 40px; height: 40px; } .lf-brand b { color: #fff; font-size: 1.2rem; } .lf-brand span { font-weight: 600; line-height: 1.5; }
.lf-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.lf-links div { display: grid; gap: 8px; align-content: start; } .lf-links b { color: #FFC800; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
.lf-links a { color: rgba(255, 255, 255, .78); text-decoration: none; font-weight: 700; } .lf-links a:hover { color: #FFC800; }
.lf-legal { grid-column: 1 / -1; margin: 6px 0 0; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .82rem; font-weight: 600; }
@media (max-width: 720px) { .lp-foot { grid-template-columns: 1fr; } .lf-links { grid-template-columns: 1fr 1fr; } }
.acct-check { align-items: flex-start !important; } .acct-check input { flex: none; margin-top: 2px; } .acct-check span { font-size: .9rem; line-height: 1.4; } .acct-check a { color: #8a6400; }

/* ---- Resources & Help page (/resources/) ---- */
.rs-body { background: #fffaf0; overflow: auto; height: auto; }
.rs-body.rs-lock { overflow: hidden; }
.rs-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; padding: 12px clamp(16px, 4vw, 40px); background: rgba(255, 250, 240, .92); backdrop-filter: blur(10px); border-bottom: 1px solid #efe4cc; }
.rs-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #141414; } .rs-logo img { width: 34px; height: 34px; } .rs-logo b { font-size: 1.2rem; }
.rs-nav { flex: 1; display: flex; justify-content: center; gap: 20px; } .rs-nav a { color: #3b3446; text-decoration: none; font-weight: 800; } .rs-nav a:hover { color: #8a6400; }
@media (max-width: 720px) { .rs-nav { display: none; } .rs-top { justify-content: space-between; } }
#rs { max-width: 1160px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px) 40px; }
.rs-kick { display: inline-block; font: 900 .78rem/1 var(--font); text-transform: uppercase; letter-spacing: .12em; color: #141414; background: #FFC800; padding: 6px 11px; border-radius: 999px; margin-bottom: 12px; }
.rs-hero { position: relative; text-align: center; padding: clamp(40px, 7vw, 80px) 0 28px; max-width: 760px; margin: 0 auto; }
.rs-hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.06; margin: 0 0 12px; letter-spacing: -.02em; }
.rs-hero > p { font-size: 1.12rem; color: #4b4257; margin: 0 0 22px; }
.rs-search { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 18px; background: #fff; border: 2px solid #eee3d1; border-radius: 999px; box-shadow: 0 16px 40px -26px rgba(30, 27, 46, .5); }
.rs-search:focus-within { border-color: #FFC800; }
.rs-search .ci { color: #8a6400; } .rs-search input { flex: 1; min-width: 0; border: 0; outline: 0; font: 600 1.05rem var(--font); padding: 12px 0; background: transparent; }
.rs-results { position: absolute; left: 0; right: 0; z-index: 5; margin-top: 8px; background: #fff; border-radius: 22px; box-shadow: 0 24px 60px -24px rgba(30, 27, 46, .5); padding: 8px; text-align: left; display: grid; gap: 2px; }
.rs-results button { display: flex; gap: 12px; align-items: flex-start; text-align: left; padding: 10px 12px; border-radius: 14px; background: none; }
.rs-results button:hover { background: #faf4e6; } .rs-results button .ci { flex: none; margin-top: 3px; color: #8a6400; }
.rs-results span { display: grid; gap: 2px; } .rs-results small { color: #6b6275; } .rs-results p { margin: 8px 12px; }
.rs-inline { background: none; color: #8a6400; font-weight: 800; }
.rs-topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 10px 0 40px; }
.rs-topic { display: grid; gap: 6px; justify-items: start; padding: 16px; border-radius: 22px; background: #fff; border: 1px solid #efe4cc; text-decoration: none; color: #141414; box-shadow: 0 12px 30px -24px rgba(30, 27, 46, .5); transition: transform .15s, border-color .15s; }
.rs-topic:hover { transform: translateY(-2px); border-color: #FFC800; } .rs-topic b { font-size: 1rem; line-height: 1.2; } .rs-topic small { color: #7c6f5e; font-weight: 700; }
.rs-topic.dark { background: #141414; color: #fff; } .rs-topic.dark small { color: #FFC800; } .rs-topic.dark .ci-badge { background: #FFC800; color: #141414; }
.rs-sec { padding: 26px 0; scroll-margin-top: 80px; }
.rs-head { text-align: center; max-width: 680px; margin: 0 auto 24px; } .rs-head h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.1; margin: 0 0 8px; } .rs-head p { color: #4b4257; margin: 0; font-size: 1.05rem; }
.rs-group { max-width: 820px; margin: 0 auto 26px; scroll-margin-top: 80px; }
.rs-group h3 { display: flex; align-items: center; gap: 8px; font-size: 1.2rem; margin: 0 0 10px; }
.rs-q { background: #fff; border: 1px solid #efe4cc; border-radius: 16px; margin-bottom: 8px; transition: box-shadow .2s; scroll-margin-top: 90px; }
.rs-q[open] { box-shadow: 0 14px 30px -24px rgba(30, 27, 46, .5); border-color: #f1d77a; }
.rs-q.flash { box-shadow: 0 0 0 4px #FFC800; }
.rs-q summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 18px; font-weight: 800; position: relative; overflow-wrap: anywhere; }
.rs-q summary::-webkit-details-marker { display: none; }
.rs-q summary::after { content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border-radius: 50%; background: #fff3c4; display: grid; place-items: center; font-weight: 900; color: #8a6400; }
.rs-q[open] summary::after { content: '–'; }
.rs-q > div { padding: 0 18px 14px; color: #3b3446; line-height: 1.55; } .rs-q p { margin: 0 0 8px; overflow-wrap: anywhere; }
.rs-alinks { display: flex; flex-wrap: wrap; gap: 8px 16px; } .rs-alinks a { color: #8a6400; font-weight: 800; text-decoration: none; }
.rs-helpcard { max-width: 820px; margin: 0 auto; background: #141414; color: #fff; border-radius: 30px; padding: clamp(24px, 4vw, 44px); text-align: center; display: grid; gap: 12px; justify-items: center; }
.rs-helpcard h2 { margin: 0; font-size: clamp(1.6rem, 3vw, 2.2rem); } .rs-helpcard > p { margin: 0; color: #d8d2c6; max-width: 560px; }
.rs-cap { display: inline-grid; place-items: center; width: 78px; height: 78px; border-radius: 50%; background: #FFC800; } .rs-cap .ci-cap { width: 54px; height: 47px; }
.rs-helpbtns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; } .rs-helpbtns .lp-btn { display: inline-flex; align-items: center; gap: 8px; }
.rs-helpcard .lp-btn.ghost { color: #fff; border-color: rgba(255, 255, 255, .3); background: transparent; }
.rs-legal a { color: #FFC800; font-weight: 700; } .rs-legal { font-size: .88rem; color: #bdb6a6; }
.rs-foot { text-align: center; padding: 24px 16px 40px; color: #6b6275; font-size: .9rem; border-top: 1px solid #efe4cc; }
.rs-foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin-bottom: 8px; } .rs-foot a { color: #3b3446; font-weight: 700; text-decoration: none; }
.lp-sci-h a { margin-left: 10px; font-size: .9rem; color: #8a6400; text-decoration: none; font-weight: 800; }

/* ---- Cub's helper chat (homepage and Resources) ---- */
.cc-chat { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 9500; display: grid; justify-items: end; gap: 10px; font-family: var(--font); }
.cc-fab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 999px; background: #141414; color: #fff; font-weight: 800; box-shadow: 0 14px 32px -12px rgba(0, 0, 0, .55); transition: transform .15s; }
.cc-fab:hover { transform: translateY(-2px); } .cc-fab .ci-mark { width: 26px; height: 28px; }
.cc-chat.open .cc-fab span { display: none; } .cc-chat.open .cc-fab { padding: 10px 12px; }
.cc-bubble { position: relative; width: min(300px, calc(100vw - 32px)); background: #fff; border-radius: 20px 20px 6px 20px; padding: 14px 16px; box-shadow: 0 20px 50px -20px rgba(30, 27, 46, .55); border: 2px solid #FFC800; animation: ccPop .35s cubic-bezier(.2, 1.4, .4, 1); }
.cc-bubble p { margin: 0 18px 10px 0; line-height: 1.4; }
.cc-bx { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; background: #f3ecdf; font-size: .7rem; }
@keyframes ccPop { from { opacity: 0; transform: translateY(12px) scale(.95); } }
.cc-chips { display: flex; flex-wrap: wrap; gap: 6px; } .cc-chips button { padding: 6px 10px; border-radius: 999px; background: #fff7d6; border: 1px solid #f1d77a; font-weight: 700; font-size: .82rem; color: #3b2f00; }
.cc-chips button:hover { background: #FFC800; }
.cc-panel { width: min(370px, calc(100vw - 32px)); height: min(540px, calc(100dvh - 110px)); background: #fff; border-radius: 24px; box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .45); display: flex; flex-direction: column; overflow: hidden; animation: ccPop .25s ease; }
.cc-panel[hidden], .cc-bubble[hidden] { display: none; }
.cc-panel header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #141414; color: #fff; }
.cc-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #262626; } .cc-av .ci-mark { width: 22px; height: 24px; }
.cc-panel header div { flex: 1; display: grid; line-height: 1.2; } .cc-panel header small { color: #bdb6a6; font-size: .75rem; }
.cc-x { width: 32px; height: 32px; border-radius: 10px; background: #2a2a2a; color: #fff; }
.cc-log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #fffaf0; }
.cc-m { max-width: 88%; } .cc-m p { margin: 0; padding: 10px 13px; border-radius: 16px; line-height: 1.45; font-size: .95rem; overflow-wrap: anywhere; }
.cc-m.cub { align-self: flex-start; } .cc-m.cub p { background: #fff; border: 1px solid #efe4cc; border-bottom-left-radius: 6px; }
.cc-m.me { align-self: flex-end; } .cc-m.me p { background: #FFC800; color: #141414; border-bottom-right-radius: 6px; font-weight: 600; }
.cc-m .cc-chips { margin-top: 8px; }
.cc-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .cc-links a { padding: 6px 10px; border-radius: 10px; background: #141414; color: #FFC800; font-weight: 800; font-size: .82rem; text-decoration: none; }
.cc-m.typing p { display: inline-flex; gap: 4px; } .cc-m.typing i { width: 7px; height: 7px; border-radius: 50%; background: #c9b98f; animation: ccDot 1s infinite; } .cc-m.typing i:nth-child(2) { animation-delay: .15s; } .cc-m.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes ccDot { 50% { transform: translateY(-4px); opacity: .5; } }
.cc-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #efe4cc; background: #fff; }
.cc-form input { flex: 1; min-width: 0; font: 600 16px var(--font); padding: 10px 14px; border-radius: 999px; border: 2px solid #eee3d1; outline: 0; } .cc-form input:focus { border-color: #FFC800; }
.cc-form button { width: 44px; height: 44px; border-radius: 50%; background: #141414; color: #FFC800; display: grid; place-items: center; }
.cc-fine { margin: 0; padding: 0 12px 10px; font-size: .72rem; color: #8a849e; background: #fff; } .cc-fine a { color: #8a6400; }
@media (prefers-reduced-motion: reduce) { .cc-bubble, .cc-panel { animation: none; } }
.rs-results[hidden] { display: none; }
.rs-topics { grid-template-columns: repeat(3, 1fr); } .rs-topic { grid-template-columns: auto 1fr; column-gap: 14px; align-items: center; } .rs-topic .ci-badge { grid-row: span 2; }
@media (max-width: 720px) { .rs-topics { grid-template-columns: 1fr 1fr; } .rs-topic { grid-template-columns: 1fr; } .rs-topic .ci-badge { grid-row: auto; } }

/* Grown-ups → Plan & billing */
.pb-card { display: grid; gap: 14px; }
.pb-card.offer { border: 2px solid #FFC800; }
.pb-top { display: flex; align-items: center; gap: 14px; }
.pb-top > div { display: grid; gap: 2px; min-width: 0; }
.pb-top small { font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; color: #8a6d00; }
.pb-top h3 { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.3rem; }
.pb-top p { margin: 0; color: #5d5566; font-weight: 700; }
.pb-price { font-size: 1.5rem; color: #141414; }
.pb-free { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #f3ecdf; flex: none; } .pb-free .ci { width: 28px; height: 28px; }
.pb-top .pl-seal { flex: none; margin: 0; }
.pb-st { font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .06em; padding: 4px 9px; border-radius: 999px; background: #f3ecdf; color: #5d5566; }
.pb-st.ok { background: #dcfce7; color: #067647; } .pb-st.warn { background: #fef3c7; color: #92400e; } .pb-st.bad { background: #fee2e2; color: #b42318; }
.pb-when { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 14px; background: #faf6ee; font-weight: 700; } .pb-when .ci { flex: none; margin-top: 2px; }
.pb-warn { margin: 0; padding: 10px 14px; border-radius: 12px; background: #fee2e2; color: #b42318; font-weight: 700; }
.pb-acts { display: grid; gap: 6px; justify-items: start; } .pb-acts .btn { display: inline-flex; align-items: center; gap: 8px; } .pb-acts small { color: #6b6275; font-weight: 600; max-width: 520px; }
.pb-acts .btn .ci-cap { width: 1.7em; height: 1.5em; }
.pb-msg { margin: 0; font-weight: 700; color: #b42318; } .pb-msg:empty { display: none; }
.pb-card h4 { margin: 4px 0 0; font-size: .95rem; }
.pb-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px 16px; }
.pb-list li { display: flex; gap: 10px; align-items: flex-start; } .pb-list .ci { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.pb-list b { display: block; font-size: .92rem; } .pb-list small { display: block; color: #6b6275; font-size: .82rem; line-height: 1.35; }
.pb-help a { color: #8a6400; font-weight: 800; }
.gu-planbadge { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px; border-radius: 14px; background: rgba(255, 200, 0, .12); border: 1px solid rgba(255, 200, 0, .35); color: #fff; text-align: left; }
.gu-planbadge:hover, .gu-planbadge.on { background: rgba(255, 200, 0, .22); }
.gu-planbadge .pl-seal { flex: none; }
.gu-planbadge span { display: grid; } .gu-planbadge b { font-size: .92rem; } .gu-planbadge small { color: #FFC800; font-size: .76rem; font-weight: 700; }
/* "The research" sub-heading above the article cards: room to breathe, link on its own line */
.lp-sci-h { flex-direction: column; gap: 6px; margin: 56px 0 28px; font-size: 1.6rem; text-align: center; }
.lp-sci-h a { margin-left: 0; font-size: .95rem; }
/* Games screen, free plan: games that come with the Family plan */
.game-card.famonly .gc-shot > img { filter: grayscale(.55) brightness(.92); }
.gc-fam { position: absolute; right: 8px; top: 8px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #FFC800; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); }
.gc-fam .ci-cap { width: 32px; height: 28px; }
.game-card.famonly .cap-tag { justify-self: start; margin-top: 4px; }
.lp-science h3.lp-sci-h { margin: 56px 0 30px; }
/* game menu cards never run off a short (sideways) phone: they fit the screen and scroll inside */
.fr-card { max-height: calc(100dvh - 24px); overflow-y: auto; }
@media (max-height: 460px) { .fr-screen.low, .fr-over.low { align-items: center; padding-top: 12px; padding-bottom: 12px; } .fr-card { padding: 12px 18px; } .fr-card h2 { font-size: 1.3rem; } .fr-card .fr-how { margin: 4px 0; } }
.lp-beta { flex-wrap: wrap; } .lp-beta-msg { flex-basis: 100%; margin: 4px 0 0; text-align: center; font-weight: 800; font-size: .92rem; } .lp-beta-msg:empty { display: none; }
.lp-beta-msg.bad { color: #b42318; } .lp-beta-msg.ok { color: #067647; }
@media (max-width: 520px) { .cc-fab span { display: none; } .cc-fab { padding: 12px; } }

/* Homepage: school → CubSchool → your kid, as stacked layers */
.ly-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(20px, 4vw, 56px); align-items: center; }
.ly-svg { width: 100%; height: auto; display: block; overflow: visible; }
.ly-halo { opacity: .55; animation: lyGlow 3s ease-in-out infinite; }
@keyframes lyGlow { 50% { opacity: .95; } }
.ly-cub .top { filter: drop-shadow(0 0 10px rgba(255, 200, 0, .5)); }
.ly-spin { transform-box: fill-box; transform-origin: center; animation: lySpin 14s linear infinite; }
@keyframes lySpin { to { transform: rotate(360deg); } }
.ly-spark { fill: #FFC800; stroke: #fff; stroke-width: 1.5; opacity: 0; animation: lySpark 3.6s ease-in infinite; }
@keyframes lySpark { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 80% { opacity: .9; } 100% { opacity: 0; transform: translateY(-300px); } }
.ly-kid { animation: lyBob 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: bottom center; }
@keyframes lyBob { 50% { transform: translateY(-6px); } }
.ly-copy h2 em { font-style: normal; background: linear-gradient(transparent 58%, #FFC800 58%); padding: 0 4px; }
.ly-copy > p { font-size: 1.1rem; color: #4b4257; }
.ly-key { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.ly-key li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: #fff; border: 1px solid #efe4cc; box-shadow: 0 10px 26px -22px rgba(30, 27, 46, .5); }
.ly-key i { flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 5px; transform: rotate(45deg) scaleY(.75); }
.ly-key .k-kid i { background: #f97316; } .ly-key .k-cub i { background: #FFC800; box-shadow: 0 0 12px rgba(255, 200, 0, .8); } .ly-key .k-school i { background: #b9c9dd; }
.ly-key div { display: grid; gap: 2px; } .ly-key b { font-size: 1.05rem; } .ly-key span { color: #5d5566; line-height: 1.45; }
.ly-key .k-cub { border: 2px solid #FFC800; background: #fffbea; }
@media (max-width: 860px) { .ly-grid { grid-template-columns: 1fr; } .ly-art { max-width: 460px; margin: 0 auto; } }
@media (prefers-reduced-motion: reduce) { .ly-halo, .ly-spin, .ly-spark, .ly-kid { animation: none; } .ly-spark { opacity: .8; } }
.ly-copy h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.08; margin: 0 0 12px; }
.ly-tag text { font: 800 19px var(--font); fill: #1c1a22; } .ly-tag.cub text { fill: #FFC800; }
.ly-tag rect { filter: drop-shadow(0 6px 10px rgba(30, 27, 46, .18)); }

/* How it works: the coins kids earn and spend */
.lp-coin { width: 1.15em; height: 1.15em; vertical-align: -0.22em; display: inline-block; }
.lp-step-h { flex-wrap: wrap; }
.lp-earn { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #dcfce7; color: #067647; font: 900 .85rem/1 var(--font); white-space: nowrap; }
.lp-earn.spend { background: #141414; color: #FFC800; }
.lp-step p b { color: #1c1a22; }
@media (prefers-reduced-motion: reduce) { .cl-coin .lp-coin { animation: none; } }
.lp-phone-wrap { position: relative; }
.lp-phone-wrap .lp-earn { position: absolute; top: 18%; right: -10px; margin: 0; padding: 8px 14px; font-size: 1rem; box-shadow: 0 10px 22px -10px rgba(6, 95, 70, .6); border: 2px solid #fff; animation: earnPop 2.8s ease-in-out infinite; }
.lp-phone-wrap .lp-earn.spend { box-shadow: 0 10px 22px -10px rgba(0, 0, 0, .6); }
@keyframes earnPop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .lp-phone-wrap .lp-earn { animation: none; } }
.lp-hero .lp-hero-text h1 { font-size: clamp(2.3rem, 4.4vw, 3.8rem); line-height: 1.04; }
.lp-hero h1 em.nowrap { white-space: nowrap; }

/* the earn → coins → spend strip: three matching panels */
.lp-coinloop { display: grid; grid-template-columns: 1fr auto 0.8fr auto 1fr; align-items: stretch; gap: 12px; max-width: 980px; margin: 34px auto 0; }
.cl-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 18px 16px; border-radius: 24px; text-align: center; }
.cl-panel small { font: 900 .74rem/1 var(--font); text-transform: uppercase; letter-spacing: .12em; margin-bottom: 4px; }
.cl-panel span { display: flex; align-items: center; justify-content: center; gap: 8px; width: min(100%, 240px); padding: 10px 14px; border-radius: 14px; font-weight: 800; font-size: .95rem; }
.cl-earn { background: #ecfdf3; border: 1px solid #bbf7d0; } .cl-earn small { color: #067647; } .cl-earn span { background: #fff; color: #065f46; box-shadow: 0 4px 10px -8px rgba(6, 95, 70, .6); }
.cl-spend { background: #141414; } .cl-spend small { color: #FFC800; } .cl-spend span { background: #262626; color: #fff; } .cl-spend .ci { color: #FFC800; }
.cl-coin { background: #fffbea; border: 2px solid #FFC800; gap: 4px; }
.cl-coin img { width: 64px; height: 64px; margin-bottom: 4px; animation: clSpin 3.2s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(180, 130, 0, .35)); }
.cl-coin b { font-size: 1.1rem; } .cl-coin small { color: #6b6275; font: 700 .82rem/1.2 var(--font); text-transform: none; letter-spacing: 0; margin: 0; }
.cl-arrow { align-self: center; font: 900 1.8rem/1 var(--font); font-style: normal; color: #c9a100; }
@media (max-width: 760px) { .lp-coinloop { grid-template-columns: 1fr; max-width: 360px; gap: 8px; } .cl-arrow { transform: rotate(90deg); justify-self: center; } }
@keyframes clSpin { 50% { transform: rotateY(180deg); } } @media (prefers-reduced-motion: reduce) { .cl-coin img { animation: none; } }

/* ---- Leaderboard, re-imagined: compact tabs, a podium for the top three, a clean list ---- */
.lb2 { width: min(560px, 100%); padding: 18px 18px 14px; background: linear-gradient(180deg, #fff7da 0, #fff 190px); }
.lb2-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.lb2-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 1.5rem; } .lb2-head h2 .ci { color: #b7870a; }
.lb2 .lb-scope { display: inline-block; margin-top: 6px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid #efe4cc; font-size: .8rem; font-weight: 800; color: #6b5a2e; }
.lb-seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: #f3ecdf; margin-bottom: 12px; }
.lb2 .lb-tab { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 4px; border-radius: 12px; background: transparent; color: #5d5566; font: 800 .88rem/1 var(--font); box-shadow: none; }
.lb2 .lb-tab .ci, .lb2 .lb-tab .cub-i { width: 18px; height: 18px; }
.lb2 .lb-tab.on { background: #141414; color: #fff; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .6); } .lb2 .lb-tab.on .ci { color: #FFC800; }
@media (max-width: 400px) { .lb2 .lb-tab span { font-size: .78rem; } .lb2 .lb-tab { flex-direction: column; gap: 3px; } }
.lb2 .lb-games { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px; margin: 0 0 6px; scrollbar-width: none; }
.lb2 .lb-games::-webkit-scrollbar { display: none; }
.lbg2 { flex: none; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: #fff; border: 2px solid #eee3d1; font: 800 .82rem/1 var(--font); color: #3b3446; white-space: nowrap; }
.lbg2 img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.lbg2.on { border-color: #141414; background: #141414; color: #fff; }
.lb-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; margin: 8px 0 12px; }
.lb-podium .lb-empty { grid-column: 1 / -1; text-align: center; color: #6b6275; font-weight: 700; padding: 20px 0; }
.lbp { position: relative; display: grid; justify-items: center; gap: 4px; padding: 0; background: none; text-align: center; min-width: 0; }
.lbp-face { display: grid; place-items: center; border-radius: 50%; padding: 3px; background: #fff; box-shadow: 0 8px 18px -10px rgba(30, 27, 46, .6); border: 3px solid var(--medal, #e5e7eb); }
.lbp-face .lb-animal { width: 60px; height: 60px; font-size: 2rem; } .lbp1 .lbp-face .lb-animal { width: 76px; height: 76px; font-size: 2.6rem; }
.lbp-face .avatar .av-st { display: none; }
.lbp1 { --medal: #FFC800; } .lbp2 { --medal: #c7ccd4; } .lbp3 { --medal: #d9955b; }
.lbp-crown { position: absolute; top: -20px; font-size: 1.5rem; animation: lbCrown 2.4s ease-in-out infinite; z-index: 1; }
@keyframes lbCrown { 50% { transform: translateY(-3px) rotate(-6deg); } }
.lbp-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.lbp-val { font: 900 .88rem/1 var(--font); color: #8a5a00; display: inline-flex; align-items: center; gap: 4px; }
.lbp-step { width: 100%; display: grid; place-items: center; border-radius: 14px 14px 6px 6px; font: 900 1.6rem/1 var(--font); color: #fff; margin-top: 4px; background: var(--medal); text-shadow: 0 2px 0 rgba(0, 0, 0, .15); }
.lbp1 .lbp-step { height: 74px; } .lbp2 .lbp-step { height: 52px; } .lbp3 .lbp-step { height: 38px; }
.lbp1 .lbp-step { color: #5a4000; text-shadow: none; }
.lbp.mine .lbp-name::after { content: ' (you)'; color: #b7870a; }
.lb2 .lb-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.lb2 .lb-list li { display: grid; grid-template-columns: 26px 34px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; background: #faf7f0; box-shadow: none; }
.lb2 .lb-list li::after { content: none; }
.lb2 .lb-list li.mine { background: #fff3c4; box-shadow: inset 0 0 0 2px #FFC800; }
.lb2 .lb-list .lb-rank { font: 900 .95rem/1 var(--font); color: #8a849e; }
.lb2 .lb-list .lb-val { font: 900 .9rem/1 var(--font); color: #5d4a1a; display: inline-flex; align-items: center; gap: 4px; }
.lb-you { font-size: .7rem; font-weight: 900; color: #fff; background: #b7870a; padding: 2px 6px; border-radius: 999px; vertical-align: 1px; }
@media (prefers-reduced-motion: reduce) { .lbp-crown { animation: none; } }

/* ---- Games, re-imagined: slim time bar, a big "play again" card, shelves of games ---- */
.g2 { display: grid; gap: 14px; padding-bottom: 40px; }
.g2-time { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border-radius: 20px; background: #fff; box-shadow: 0 10px 26px -20px rgba(30, 27, 46, .55); border: 1px solid #efe4cc; }
.g2-clock { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.g2-clock-i { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: #141414; color: #FFC800; } .g2-clock-i .ci { width: 24px; height: 24px; }
.g2-clock b { display: block; font: 900 1.45rem/1 var(--font); color: #1c1a22; } .g2-clock small { color: #7c6f5e; font-weight: 700; font-size: .78rem; }
.g2-add { display: flex; gap: 6px; }
.g2-addb { display: grid; justify-items: center; gap: 2px; padding: 6px 10px; border-radius: 12px; background: #fff3c4; border: 2px solid #f1d77a; color: #3b2f00; }
.g2-addb b { font: 900 .9rem/1 var(--font); } .g2-addb span { font: 800 .72rem/1 var(--font); display: inline-flex; align-items: center; gap: 2px; } .g2-addb .cub-i { width: 1em; height: 1em; }
.g2-addb.off { opacity: .45; }
.g2-hs { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 12px; background: #141414; color: #fff; font: 800 .88rem/1 var(--font); } .g2-hs .ci { color: #FFC800; }
@media (max-width: 520px) { .g2-hs span { display: none; } .g2-clock { width: 100%; } .g2-add { flex: 1; } .g2-addb { flex: 1; } }
.g2-note { margin: -6px 4px 0; font-size: .8rem; color: #8a849e; font-weight: 600; }
.g2-hero { position: relative; display: block; width: 100%; aspect-ratio: 16 / 7; min-height: 180px; border-radius: 26px; overflow: hidden; padding: 0; text-align: left; background: var(--gc); box-shadow: 0 18px 40px -22px rgba(30, 27, 46, .7); }
.g2-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g2-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .62) 0, rgba(0, 0, 0, .15) 60%, transparent); }
.g2-hero-txt { position: absolute; left: 20px; bottom: 18px; right: 130px; z-index: 1; display: grid; gap: 4px; color: #fff; }
.g2-hero-txt small { font: 900 .74rem/1 var(--font); text-transform: uppercase; letter-spacing: .12em; color: #FFC800; }
.g2-hero-txt b { font-size: clamp(1.3rem, 4.5vw, 1.9rem); line-height: 1.1; } .g2-hero-txt span { font-weight: 700; font-size: .9rem; opacity: .92; }
.g2-play { position: absolute; right: 18px; bottom: 18px; z-index: 1; padding: 12px 18px; border-radius: 999px; background: #FFC800; color: #141414; font: 900 1.05rem/1 var(--font); box-shadow: 0 6px 0 #b98a00; }
.g2-empty { text-align: center; padding: 24px; border-radius: 20px; background: #fff; font-weight: 700; color: #5d5566; }
.g2-shelf h3 { display: flex; align-items: baseline; gap: 8px; margin: 4px 4px 10px; font-size: 1.1rem; } .g2-shelf h3 small { color: #8a6d00; font-size: .8rem; font-weight: 800; display: inline-flex; align-items: center; gap: 4px; }
.g2-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 180px); gap: 12px; overflow-x: auto; padding: 2px 4px 10px; scroll-snap-type: x proximity; scrollbar-width: none; }
.g2-row::-webkit-scrollbar { display: none; }
.g2-tile { display: grid; gap: 6px; padding: 0; background: none; text-align: left; scroll-snap-align: start; }
.g2-pic { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: color-mix(in srgb, var(--gc) 30%, white); box-shadow: 0 10px 22px -16px rgba(30, 27, 46, .7); transition: transform .15s; }
.g2-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.g2-pic.pet > img { object-fit: contain; padding: 6px; }
.g2-tile:hover .g2-pic, .g2-tile:focus-visible .g2-pic { transform: translateY(-3px); }
.g2-tile b { font-size: .9rem; line-height: 1.2; padding: 0 2px; color: #1c1a22; }
.g2-go { position: absolute; right: 8px; bottom: 8px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #FFC800; color: #141414; font-size: .8rem; box-shadow: 0 3px 0 #b98a00; }
.g2-tag { position: absolute; left: 8px; top: 8px; display: inline-flex; align-items: center; gap: 3px; padding: 4px 8px; border-radius: 999px; font: 900 .75rem/1 var(--font); font-style: normal; background: rgba(20, 20, 20, .78); color: #fff; }
.g2-tag .cub-i { width: 1em; height: 1em; }
.g2-tag.best { background: rgba(255, 255, 255, .92); color: #5d4a1a; }
.g2-tag.price { background: #FFC800; color: #141414; } .g2-tag.price.short { background: #fff3c4; color: #8a6d00; }
.g2-tag.fam { background: #FFC800; padding: 3px 5px; } .g2-tag.fam .ci-cap { width: 26px; height: 22px; }
.g2-tile.k-family .g2-pic > img, .g2-tile.k-lock .g2-pic > img, .g2-tile.k-soon .g2-pic > img { filter: grayscale(.6) brightness(.95); }
.g2-tile.k-soon { opacity: .7; }
.g2 { grid-template-columns: minmax(0, 1fr); } .g2 > * { min-width: 0; } .g2-shelf { min-width: 0; } .g2-row { max-width: 100%; }

/* Grown-ups → Learning → learning recipe */
.rc-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 4px; }
.rc-mode button { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; text-align: left; padding: 12px 14px; border-radius: 16px; border: 2px solid #eee3d1; background: #fff; }
.rc-mode button span { grid-row: span 2; font-size: 1.6rem; } .rc-mode b { font-size: 1rem; } .rc-mode small { color: #6b6275; font-weight: 600; }
.rc-mode button.on { border-color: #141414; background: #141414; color: #fff; } .rc-mode button.on small { color: #FFC800; }
.rc-sec { margin-top: 16px; } .rc-sec h4 { margin: 0 0 8px; font-size: .95rem; } .rc-sec h4 small { color: #8a849e; font-weight: 600; font-size: .8rem; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 2px solid #eee3d1; background: #fff; font-weight: 800; font-size: .9rem; color: #5d5566; }
.rc-chip .ci { width: 16px; height: 16px; } .rc-chip.on { border-color: #16a34a; background: #ecfdf3; color: #065f46; }
.rc-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: #f3ecdf; }
.rc-seg button { display: grid; gap: 2px; padding: 8px 6px; border-radius: 10px; background: transparent; text-align: center; } .rc-seg b { font-size: .9rem; } .rc-seg small { font-size: .74rem; color: #7c6f5e; font-weight: 600; }
.rc-seg button.on { background: #fff; box-shadow: 0 4px 10px -6px rgba(30, 27, 46, .45); } .rc-seg button.on b { color: #8a5a00; }
.rc-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.rc-pack { position: relative; display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 14px; border: 2px solid #eee3d1; background: #fff; }
.rc-pe { font-size: 1.6rem; } .rc-pack span:not(.rc-pe) { display: grid; gap: 1px; min-width: 0; } .rc-pack b { font-size: .92rem; } .rc-pack small { font-size: .76rem; color: #6b6275; line-height: 1.3; }
.rc-pack.on { border-color: #FFC800; background: #fffbea; } .rc-pack i { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: #FFC800; display: grid; place-items: center; } .rc-pack i .ci { width: 14px; height: 14px; }
.rc-sub { margin-top: 12px; display: grid; gap: 8px; } .rc-sub > b { font-size: .88rem; }
.rc-note { margin: 14px 0 0; font-size: .82rem; color: #6b6275; font-weight: 600; }
.q-plan.q-pack { background: #ecfdf3; color: #065f46; }
@media (max-width: 520px) { .rc-mode { grid-template-columns: 1fr; } }
/* the 3D kid standing on the gold layer (the drawing underneath shows until it's ready) */
.ly-art { position: relative; }
.ly-3d { position: absolute; left: 24%; width: 52%; top: -10%; height: 62%; pointer-events: none; z-index: 1; }
.ly-3d canvas { width: 100%; height: 100%; display: block; }
.ly-art.has3d .ly-kid { opacity: 0; transition: opacity .3s; }

/* sign-up: searchable school picker */
.ke-school { display: grid; gap: 8px; margin: 8px 0; } .ke-lab { font-weight: 800; }
.sch-search { position: relative; }
.sch-search input { width: 100%; padding: 12px 14px 12px 40px; border-radius: 14px; border: 2px solid #eee3d1; font: 600 16px var(--font); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a6400' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") 12px 50% / 18px no-repeat; }
.sch-search input:focus { outline: none; border-color: #FFC800; }
.sch-results { display: grid; gap: 4px; margin-top: 6px; max-height: 300px; overflow-y: auto; }
.sch-results:empty { display: none; }
.sch-hit { display: grid; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; background: #fff; border: 1px solid #efe4cc; }
.sch-hit:hover, .sch-hit:focus-visible { border-color: #FFC800; background: #fffbea; } .sch-hit b { font-size: .95rem; } .sch-hit small { color: #6b6275; font-weight: 600; font-size: .8rem; }
.sch-note { margin: 4px 2px; font-size: .88rem; color: #6b6275; font-weight: 600; }
.sch-link { background: none; border: 0; padding: 0; color: #8a6400; font-weight: 800; text-decoration: underline; cursor: pointer; justify-self: start; font-size: .88rem; }
.sch-chosen { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #ecfdf3; border: 2px solid #86efac; }
.sch-chosen > span:nth-child(2) { display: grid; flex: 1; min-width: 0; } .sch-chosen small { color: #3f6b52; font-weight: 700; } .sch-ico { font-size: 1.4rem; }

/* the layers graphic's story: lesson cards with ✓, coins that tally, a game that spends them */
.ly-hud { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.lh-coins { position: absolute; left: 70%; top: 0; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #fff; box-shadow: 0 10px 24px -12px rgba(30, 27, 46, .5); border: 2px solid #FFC800; font: 900 1.05rem/1 var(--font); opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.lh-coins img { width: 26px; height: 26px; } .lh-coins.on { opacity: 1; transform: none; }
.lh-coins.pop { animation: lhPop .45s ease; } .lh-coins.pop.spend b { color: #b42318; }
@keyframes lhPop { 40% { transform: scale(1.18); } }
.lh-card { position: absolute; left: 0; top: 8%; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 16px; background: #fff; box-shadow: 0 14px 30px -16px rgba(30, 27, 46, .55); border: 2px solid #eee3d1; font: 800 .95rem/1.2 var(--font); opacity: 0; transform: translateX(-8px) scale(.96); transition: opacity .25s, transform .25s, border-color .2s; max-width: 46%; }
.lh-card.on { opacity: 1; transform: none; }
.lh-a { min-width: 28px; text-align: center; padding: 3px 8px; border-radius: 8px; background: #f6f1e7; }
.lh-check { font-style: normal; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #16a34a; color: #fff; font-size: .8rem; transform: scale(0); transition: transform .25s cubic-bezier(.2, 1.6, .4, 1); }
.lh-lesson.done { border-color: #86efac; } .lh-lesson.done .lh-check { transform: scale(1); } .lh-lesson.done .lh-a { background: #dcfce7; color: #065f46; }
.lh-game { background: #141414; color: #fff; border-color: #141414; } .lh-game > span:first-child { font-size: 1.4rem; } .lh-game > span:nth-child(2) { display: grid; } .lh-game small { color: #FFC800; font-weight: 700; font-size: .75rem; } .lh-game em { font-style: normal; color: #FFC800; font-weight: 900; margin-left: 4px; }
.lh-fly { position: absolute; width: 26px; height: 26px; margin: 6px 0 0 6px; opacity: 0; filter: drop-shadow(0 4px 6px rgba(180, 130, 0, .5)); }
@media (max-width: 520px) { .lh-card { font-size: .8rem; padding: 8px 10px; max-width: 52%; } .lh-coins { left: 64%; } }
.lh-store { background: #fffbea; color: #1c1a22; border-color: #FFC800; } .lh-store small { color: #8a6400; } .lh-store em { color: #b42318; }
.lh-spark { position: absolute; left: 50%; top: 26%; width: 0; height: 0; opacity: 0; }
.lh-spark.on { opacity: 1; }
.lh-spark i { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #FFC800; box-shadow: 0 0 10px #ffd84d; }
.lh-spark.on i { animation: lhSpark .8s ease-out forwards; }
.lh-spark i:nth-child(1) { --dx: 0; --dy: -70px; } .lh-spark i:nth-child(2) { --dx: 50px; --dy: -50px; } .lh-spark i:nth-child(3) { --dx: 70px; --dy: 0; } .lh-spark i:nth-child(4) { --dx: 50px; --dy: 50px; }
.lh-spark i:nth-child(5) { --dx: 0; --dy: 70px; } .lh-spark i:nth-child(6) { --dx: -50px; --dy: 50px; } .lh-spark i:nth-child(7) { --dx: -70px; --dy: 0; } .lh-spark i:nth-child(8) { --dx: -50px; --dy: -50px; }
@keyframes lhSpark { from { transform: translate(0, 0) scale(.4); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; } }
/* confetti when he buys his new shirt */
.lh-confetti { position: absolute; left: 50%; top: 4%; width: 0; height: 0; opacity: 0; }
.lh-confetti.on { opacity: 1; }
.lh-confetti i { position: absolute; width: 8px; height: 13px; border-radius: 2px; background: var(--c); transform: translate(-50%, 0) rotate(var(--r)); opacity: 0; }
.lh-confetti.on i { animation: lhConfetti 1.8s cubic-bezier(.2, .7, .4, 1) var(--d) forwards; }
@keyframes lhConfetti { 0% { opacity: 1; transform: translate(-50%, 0) rotate(var(--r)) scale(.6); } 25% { opacity: 1; transform: translate(calc(-50% + var(--x) * 3), -60px) rotate(calc(var(--r) + 180deg)) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--x) * 4.2), 190px) rotate(calc(var(--r) + 720deg)) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .lh-confetti.on i { animation: none; opacity: 1; } }
/* beta tester welcome */
.bl-ribbon { position: absolute; right: 14px; top: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: #FFC800; color: #141414; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); }
.bl-ribbon .ci-cap { width: 34px; height: 30px; } .bl-ribbon span { display: grid; line-height: 1.1; } .bl-ribbon b { font-size: .95rem; } .bl-ribbon small { font-size: .72rem; font-weight: 800; }
.bl-code { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 14px; background: #ecfdf3; border: 1px solid #86efac; color: #065f46; font-weight: 700; font-size: .92rem; }
.bl-code b { font-family: ui-monospace, Menlo, monospace; letter-spacing: .04em; }
.beta-land .il-list .ci-cap { width: 52px; height: 45px; flex: none; }
.bl-more { font-weight: 800 !important; color: #8a6400 !important; }
.lp-betabar { position: sticky; top: 64px; z-index: 30; display: flex; align-items: center; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 8px 16px; background: #141414; color: #fff; font-size: .92rem; }
.lp-betabar .ci-cap { width: 34px; height: 30px; background: #FFC800; border-radius: 50%; padding: 3px; } .lp-betabar b { color: #FFC800; }

/* For parents: everything you control, grouped and expandable */
.pc-head { text-align: center; margin: 40px auto 16px; max-width: 640px; } .pc-head h3 { color: #fff; font-size: 1.5rem; margin: 0 0 6px; } .pc-head p { color: rgba(255, 255, 255, .7); margin: 0; }
.pc-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; max-width: 1000px; margin: 0 auto; }
.pc-group { background: #1f1f23; border: 1px solid rgba(255, 255, 255, .08); border-radius: 20px; overflow: hidden; transition: border-color .2s; }
.pc-group[open] { border-color: rgba(255, 200, 0, .45); }
.pc-group summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; color: #fff; }
.pc-group summary::-webkit-details-marker { display: none; }
.pc-group summary .pc-title { display: grid; flex: 1; } .pc-group summary b { font-size: 1.05rem; } .pc-group summary small { color: #FFC800; font-weight: 700; font-size: .8rem; }
.pc-group summary .ci-badge { background: #FFC800; color: #141414; width: 44px; height: 44px; } .pc-group summary .ci-badge .ci { width: 26px; height: 26px; }
.pc-chev { width: 12px; height: 12px; border-right: 3px solid #FFC800; border-bottom: 3px solid #FFC800; transform: rotate(45deg); transition: transform .2s; margin-right: 6px; }
.pc-group[open] .pc-chev { transform: rotate(225deg); }
.pc-group ul { list-style: none; margin: 0; padding: 4px 16px 16px; display: grid; gap: 10px; }
.pc-group li { display: flex; gap: 10px; align-items: flex-start; }
.pc-check { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #16a34a; color: #fff; display: grid; place-items: center; font-size: .75rem; font-weight: 900; margin-top: 1px; }
.pc-group li > span:last-child { display: grid; gap: 2px; } .pc-group li b { color: #fff; font-size: .95rem; } .pc-group li small { color: rgba(255, 255, 255, .68); line-height: 1.4; font-size: .86rem; }
.pc-group .cap-tag { font-size: .62rem; margin-left: 4px; }
@media (max-width: 760px) { .pc-groups { grid-template-columns: 1fr; } }
.pc-group summary .ci-badge { margin-bottom: 0; }
.gu-safety { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: #ecfdf3; border: 1px solid #bbf7d0; margin: 10px 0; }
.gu-safety b { display: flex; align-items: center; gap: 6px; color: #166534; } .gu-safety b .ci { width: 18px; height: 18px; } .gu-safety small { color: #3f3f46; line-height: 1.4; }
.gu-flagged > summary { color: #b91c1c; font-weight: 800; }
.rc-drill { padding: 12px 14px; border-radius: 16px; background: #faf7f0; } .rc-drill > b small { font-weight: 600; color: #8a8292; margin-left: 4px; }
/* Grown-ups → Kids banner: quick −10 / +10 coin buttons */
.gu-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.gu-coinadj { display: flex; gap: 10px; }
.cadj { width: 64px; height: 64px; border-radius: 50%; border: 0; display: grid; place-items: center; align-content: center; gap: 1px; cursor: pointer; font: inherit; line-height: 1; transition: transform .12s, box-shadow .12s; }
.cadj b { font-size: 1.05rem; font-weight: 900; } .cadj img, .cadj svg { width: 16px; height: 16px; }
.cadj.plus { background: radial-gradient(circle at 35% 30%, #ffe27a, #FFC800 60%, #e0a800); color: #3b2a00; box-shadow: 0 4px 0 #b88a00, 0 8px 16px -8px rgba(0,0,0,.35); }
.cadj.minus { background: #fff; color: #5b4f66; border: 2px solid #eadfcd; box-shadow: 0 4px 0 #eadfcd; }
.cadj:hover:not(:disabled) { transform: translateY(-2px); } .cadj:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 #b88a00; }
.cadj.minus:active:not(:disabled) { box-shadow: 0 1px 0 #eadfcd; } .cadj:disabled { opacity: .45; cursor: default; }
@media (max-width: 600px) { .gu-hero-side { flex-direction: row; align-items: center; width: 100%; justify-content: space-between; } .cadj { width: 56px; height: 56px; } }
/* Earn Cub Coins cards: level tops, same height, rows lined up (the generic .chores list rule was pushing Chores down) */
.lp-cards.three .lp-card.chores { margin-top: 0; gap: 6px; }
.lp-cards.three .lp-card { height: 100%; }
.lp-cards.three .lp-ic { height: 3.4rem; display: grid; place-items: center; }
.lp-cards.three .lp-tag { align-self: end; }

/* homepage: the research strip */
.lp-proof-sec { max-width: 1200px; margin: 18px auto 0; padding: 40px clamp(16px, 4vw, 40px) 10px; }
.lp-proof-sec .lp-copy p { max-width: 620px; margin-inline: auto; }
.lp-proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 26px; align-items: stretch; }
.pf-card { position: relative; display: grid; grid-template-rows: auto 84px auto 1fr auto; gap: 10px; text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: #fff; border: 1px solid #f1e6cf; border-radius: 24px; padding: 20px 20px 16px; overflow: hidden;
  box-shadow: 0 18px 40px -26px rgba(30, 27, 46, .45); transition: transform .18s, box-shadow .18s; }
.pf-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 5px; background: var(--c); }
.pf-card::after { content: ''; position: absolute; width: 160px; height: 160px; right: -60px; top: -70px; border-radius: 50%; background: var(--c); opacity: .07; }
.pf-card:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -28px color-mix(in srgb, var(--c) 60%, rgba(30, 27, 46, .5)); }
.pf-tag { justify-self: start; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--c); background: color-mix(in srgb, var(--c) 12%, white); padding: 5px 10px; border-radius: 999px; }
.pf-viz { display: flex; align-items: center; color: var(--c); }
.pf-num { font-size: clamp(2rem, 3.2vw, 2.6rem); font-weight: 900; line-height: 1; letter-spacing: -.03em; color: #141414; }
.pf-num small { font-size: .5em; font-weight: 800; color: #9a90a6; margin: 0 .15em; }
.pf-line { color: #5b5168; font-size: .92rem; line-height: 1.45; }
.pf-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px dashed #efe4cf; padding-top: 10px; }
.pf-foot small { color: #9a90a6; font-size: .74rem; font-weight: 700; } .pf-foot em { font-style: normal; font-weight: 800; font-size: .8rem; color: var(--c); white-space: nowrap; }
.pf-bars { display: grid; gap: 8px; width: 100%; }
.pf-bar { display: grid; grid-template-columns: 66px 1fr 34px; align-items: center; gap: 8px; font-size: .76rem; font-weight: 800; color: #8a8096; }
.pf-bar i { display: block; height: 14px; border-radius: 8px; background: #efe9f5; position: relative; overflow: hidden; }
.pf-bar i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 1%); border-radius: 8px; background: #cfc6da; }
.pf-bar.hi i::after { background: var(--c); } .pf-bar.hi { color: #141414; } .pf-bar em { font-style: normal; text-align: right; }
.pf-curve { width: 100%; max-width: 190px; height: 64px; } .pf-gauge { width: 118px; height: 64px; }
@media (max-width: 1000px) { .lp-proof { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lp-proof { grid-template-columns: 1fr; gap: 12px; } .pf-card { grid-template-rows: auto auto auto auto auto; } .pf-viz { min-height: 56px; } }
.pf-foot { min-height: 46px; align-items: center; } .pf-foot small { max-width: 60%; }
.pf-gwrap { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; width: 140px; row-gap: 2px; }
.pf-gwrap svg { grid-column: 1 / -1; width: 140px; height: 70px; } .pf-gwrap small { font-size: .66rem; font-weight: 800; color: #9a90a6; }
.pf-gwrap small:nth-of-type(2) { color: var(--c); }

/* homepage: the games wall (tilted, slowly drifting columns of game covers) */
.lp-gamewall { position: relative; }
.gw-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(20px, 4vw, 56px); align-items: center; }
.gw-hl { background: linear-gradient(transparent 60%, #FFC800 60%); padding: 0 .1em; }
.gw-points { list-style: none; margin: 18px 0 22px; padding: 0; display: grid; gap: 10px; }
.gw-points li { position: relative; padding-left: 32px; color: #4b4257; font-size: 1rem; }
.gw-points li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: #16a34a; color: #fff; font-size: .75rem; font-weight: 900; display: grid; place-items: center; }
.gw-points b { color: #141414; }
.gw-stage { position: relative; height: 520px; border-radius: 32px; overflow: hidden; background: radial-gradient(120% 90% at 70% 20%, #2b2640, #141414 70%); box-shadow: 0 30px 60px -30px rgba(20, 20, 20, .6); isolation: isolate; }
.gw-stage::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: linear-gradient(180deg, #141414 0%, transparent 16%, transparent 84%, #141414 100%); }
.gw-wall { position: absolute; left: 50%; top: 50%; width: 150%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; transform: translate(-50%, -50%) rotate(-14deg); }
.gw-col { height: 820px; overflow: hidden; }
.gw-track { display: grid; gap: 18px; animation: gw-up 38s linear infinite; }
.gw-col.c1 .gw-track { animation-name: gw-down; animation-duration: 44s; margin-top: -140px; }
.gw-col.c2 .gw-track { animation-duration: 34s; margin-top: -60px; }
@keyframes gw-up { from { transform: translateY(0); } to { transform: translateY(-33.333%); } }
@keyframes gw-down { from { transform: translateY(-33.333%); } to { transform: translateY(0); } }
.gw-tile { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: 18px; overflow: hidden; background: #2a2a2a; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .08); transition: transform .25s; }
.gw-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gw-tile figcaption { position: absolute; left: 10px; bottom: 10px; background: rgba(20, 20, 20, .72); color: #fff; font-weight: 800; font-size: .78rem; padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(6px); }
.gw-stage:hover .gw-track { animation-play-state: paused; }
.gw-badge { position: absolute; z-index: 3; right: 18px; bottom: 18px; background: #FFC800; color: #141414; font-weight: 900; padding: 10px 16px; border-radius: 999px; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .6); }
@media (max-width: 900px) { .gw-grid { grid-template-columns: 1fr; } .gw-stage { height: 400px; order: -1; } .gw-col { height: 640px; } }
@media (max-width: 560px) { .gw-stage { height: 320px; border-radius: 24px; } .gw-wall { width: 190%; gap: 12px; } .gw-track { gap: 12px; } .gw-tile figcaption { font-size: .68rem; } }
@media (prefers-reduced-motion: reduce) { .gw-track { animation: none !important; } }
/* after a right answer: the help row steps aside, and the green box counts down to the next question */
.q-help.gone { display: none; }
.fact { cursor: pointer; }
.fact-go { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: .82rem; font-weight: 800; color: #047857; }
.fact-go i { flex: 1; height: 6px; border-radius: 6px; background: #d1fae5; overflow: hidden; position: relative; }
.fact-go i::after { content: ''; position: absolute; inset: 0; width: 0; background: #10b981; border-radius: 6px; }
.fact-go.run i::after { width: 100%; transition: width var(--wait) linear; }
/* homepage: Cub's chat hides while someone plays a demo game or lesson (it covered the controls on phones) */
body:has(.lp-tryov) .cc-chat, body:has(.quest-ov) .cc-chat { display: none !important; }
/* Life Skills: the scene illustration above the choices */
.life-pic { width: min(500px, 100%, 56vh); margin: 4px auto 6px; }
.life-pic .life-art { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 14px 30px -18px rgba(42, 36, 56, .45); }
@media (max-width: 560px) { .life-pic { width: 100%; } .life-pic .life-art { border-radius: 18px; } }
.q-visual:has(.life-pic) { display: block; width: 100%; }

/* Grown-ups → Progress */
.pg { display: grid; gap: 14px; }
.pg-head { display: flex; justify-content: flex-end; } .pg-seg { max-width: 320px; }
.pg-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pg-kpi { background: #fff; border: 1px solid #efe4cf; border-radius: 16px; padding: 12px 14px; display: grid; gap: 2px; }
.pg-kpi small { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #8a8096; } .pg-kpi b { font-size: 1.45rem; color: #1c1a22; } .pg-kpi span { font-size: .78rem; color: #6b6178; font-weight: 600; }
.pg-kpi.big { background: #fff8d6; border-color: #f1d77a; } .pg-kpi.green { background: #ecfdf3; border-color: #bbf7d0; }
.pg-up { font-style: normal; color: #067647; font-weight: 800; } .pg-down { font-style: normal; color: #b42318; font-weight: 800; }
.pg-card { background: #fff; border: 1px solid #efe4cf; border-radius: 18px; padding: 14px 16px; min-width: 0; }
.pg-card h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: .98rem; } .pg-card h4 .ci { width: 18px; height: 18px; }
.pg-chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding-bottom: 18px; }
.pg-chart.many { gap: 3px; }
.pg-chart span { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; position: relative; background: #faf6ee; border-radius: 8px 8px 4px 4px; }
.pg-chart i { display: block; min-height: 0; } .pg-chart i.l { background: #16a34a; border-radius: 0 0 4px 4px; } .pg-chart i.g { background: #FFC800; border-radius: 6px 6px 0 0; } .pg-chart span > i:last-of-type { border-top-left-radius: 6px; border-top-right-radius: 6px; }
.pg-chart small { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: .72rem; font-weight: 800; color: #8a8096; }
.pg-legend { display: flex; gap: 14px; font-size: .78rem; font-weight: 700; color: #6b6178; } .pg-legend i, .pg-mix i { display: inline-block; } .pg-legend i { width: 10px; height: 10px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
.pg-legend i.l, .pg-mix i.l { background: #16a34a; } .pg-legend i.g, .pg-mix i.g { background: #FFC800; }
.pg-notes ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: #3f3a4a; line-height: 1.45; font-size: .92rem; }
.pg-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 14px; }
.pg-skill, .pg-game { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "n v" "b s"; align-items: center; gap: 4px 12px; margin-bottom: 12px; font-size: .9rem; font-weight: 700; }
.pg-skill > span:first-child, .pg-game > span:first-child { grid-area: n; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-bar { grid-area: b; height: 10px; border-radius: 6px; background: #f1ebe0; overflow: hidden; } .pg-bar i { display: block; height: 100%; border-radius: 6px; background: #FFC800; }
.pg-skill b, .pg-game b { grid-area: v; text-align: right; } .pg-skill small, .pg-game small { grid-area: s; text-align: right; color: #8a8096; font-size: .72rem; }
.pg-coins { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; text-align: center; } .pg-coins b { display: block; font-size: 1.35rem; } .pg-coins small { color: #8a8096; font-weight: 700; font-size: .74rem; }
.pg-fam { display: grid; gap: 8px; } .pg-fam > div { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "n t" "m m" "s s"; gap: 3px 8px; padding: 8px 10px; border-radius: 12px; background: #faf6ee; border-left: 4px solid var(--kid); }
.pg-fam > div.on { background: #fff8d6; } .pg-fam b { grid-area: n; } .pg-fam > div > span:not(.pg-mix) { grid-area: t; font-weight: 800; } .pg-fam small { grid-area: s; color: #8a8096; font-weight: 700; font-size: .74rem; }
.pg-mix { grid-area: m; display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: #eee; } .pg-mix i { height: 100%; }
@media (max-width: 700px) { .pg-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-2 { grid-template-columns: 1fr; } }
/* in a quest, everything Cub says is already on screen (question, hint box, green box, help card), so the speech
   bubble stays hidden and Cub shows a soft pulse while talking instead */
body:has(.quest-ov) .buddy .buddy-bubble { display: none !important; }
body:has(.quest-ov) .buddy .buddy-btn { position: relative; }
body:has(.quest-ov) .buddy.talking .buddy-btn::before, body:has(.quest-ov) .buddy.talking .buddy-btn::after {
  content: ''; position: absolute; inset: 6px 4px 2px; border-radius: 50%; border: 3px solid #5eead4; opacity: 0; animation: cub-talk 1.4s ease-out infinite; pointer-events: none; }
body:has(.quest-ov) .buddy.talking .buddy-btn::after { animation-delay: .7s; }
@keyframes cub-talk { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { body:has(.quest-ov) .buddy.talking .buddy-btn::before { animation: none; opacity: .8; transform: scale(1.05); } body:has(.quest-ov) .buddy.talking .buddy-btn::after { display: none; } }
/* beta tester welcome: a card over the homepage, which shows blurred and dimmed behind it */
.beta-ov { position: fixed; inset: 0; z-index: 7000; display: grid; place-items: center; padding: 24px 16px; overflow-y: auto; background: rgba(24, 18, 38, .55); backdrop-filter: blur(8px) saturate(.9); -webkit-backdrop-filter: blur(8px) saturate(.9); animation: bl-in .3s ease-out; cursor: pointer; transition: opacity .3s; }
.beta-ov.gone { opacity: 0; pointer-events: none; }
.beta-ov .il-card { position: relative; cursor: default; box-shadow: 0 30px 90px -20px rgba(0, 0, 0, .6); animation: bl-card .35s cubic-bezier(.2, 1.2, .4, 1); }
.beta-ov .bl-ribbon { right: auto; left: 14px; }
.bl-x { position: absolute; top: 12px; right: 12px; z-index: 3; width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: #141414; font-size: 1.1rem; font-weight: 900; cursor: pointer; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
.bl-x:hover { background: #fff; transform: scale(1.06); }
body.beta-open { overflow: hidden; }
@keyframes bl-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bl-card { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
/* Grown-ups → Learning: browse every question */
.rc-browse { width: 100%; justify-content: center; margin-top: 12px; gap: 8px; } .rc-browse small { font-weight: 600; color: #8a8096; }
.qb { width: min(880px, 100%); max-height: min(92vh, 900px); background: #fffdf8; border-radius: 26px; display: grid; grid-template-rows: auto auto auto minmax(0, 1fr); overflow: hidden; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .5); }
.qb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 8px; } .qb-head h2 { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 1.35rem; } .qb-head p { margin: 4px 0 0; }
.qb-cats { display: flex; gap: 6px; overflow-x: auto; padding: 4px 20px 10px; scrollbar-width: thin; }
.qb-cats button { flex: none; border: 2px solid #eee3d1; background: #fff; border-radius: 999px; padding: 7px 12px; font: 800 .85rem/1 inherit; color: #4b4257; cursor: pointer; white-space: nowrap; }
.qb-cats button em { font-style: normal; color: #9a90a6; margin-left: 4px; } .qb-cats button.on { background: #141414; border-color: #141414; color: #fff; } .qb-cats button.on em { color: #FFC800; }
.qb-search { margin: 0 20px 10px; width: auto; }
.qb-list { overflow-y: auto; padding: 0 20px 20px; display: grid; gap: 10px; align-content: start; }
.qb-note { margin: 0 0 4px; color: #6b6178; font-size: .88rem; }
.qb-h { margin: 12px 0 2px; font-size: 1rem; }
.qb-q { background: #fff; border: 1px solid #efe4cf; border-radius: 16px; padding: 12px 14px; display: grid; gap: 6px; }
.qb-q[hidden] { display: none; }
.qb-q > b, .qb-q > div > b { font-size: .98rem; color: #1c1a22; }
.qb-art { grid-template-columns: 180px minmax(0, 1fr); gap: 14px; align-items: start; } .qb-art > div:last-child { display: grid; gap: 6px; }
.qb-pic svg { width: 100%; height: auto; display: block; border-radius: 12px; }
.qb-tag { justify-self: start; font-size: .72rem; font-weight: 800; color: #be185d; background: #fce7f3; padding: 2px 8px; border-radius: 999px; }
.qb-vis { margin: 0; color: #5b5168; font-size: .86rem; background: #faf6ee; border-radius: 10px; padding: 6px 10px; }
.qb-ch { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.qb-ch li { display: flex; gap: 8px; align-items: baseline; font-size: .88rem; color: #5b5168; padding: 4px 8px; border-radius: 8px; }
.qb-ch li::before { content: '○'; color: #c9c3cf; font-weight: 900; } .qb-ch li.ok::before { content: none; }
.qb-ch li.ok { background: #ecfdf3; color: #065f46; font-weight: 800; } .qb-ch li em { font-style: normal; font-weight: 600; color: #9a90a6; font-size: .8rem; }
.qb-q small { color: #6b6178; font-size: .8rem; line-height: 1.4; }
@media (max-width: 640px) { .qb-art { grid-template-columns: 1fr; } .qb { border-radius: 20px; } }
/* place-value chart (build the number) */
.pv-chart { display: inline-flex; gap: 6px; margin: 6px auto; }
.pv-chart span { display: grid; place-items: center; gap: 4px; min-width: 64px; padding: 8px 6px 10px; border-radius: 14px; background: #eef4ff; border: 2px solid #c9dafc; }
.pv-chart small { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #4b6cb7; } .pv-chart b { font-size: 1.8rem; font-weight: 900; color: #1c1a22; }
@media (max-width: 480px) { .pv-chart span { min-width: 52px; } .pv-chart b { font-size: 1.4rem; } }
/* beta welcome: the Family plan price, crossed out, and $0.00 */
.bl-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 12px; padding: 12px 16px; border-radius: 16px; background: #fff8d6; border: 1px solid #f1d77a; }
.bl-was { font-size: 1.3rem; font-weight: 800; color: #8a8096; text-decoration: line-through; text-decoration-color: #dc2626; text-decoration-thickness: 3px; }
.bl-now { font-size: 2rem; font-weight: 900; color: #141414; letter-spacing: -.02em; }
.bl-was small, .bl-now small { font-size: .55em; font-weight: 700; color: #6b6178; margin-left: 2px; }
.bl-save { flex-basis: 100%; font-size: .82rem; font-weight: 800; color: #8a6400; }
@media (min-width: 520px) { .bl-save { flex-basis: auto; margin-left: auto; } }
.bl-was small { display: inline-block; text-decoration: none; }

/* sign-up and setup screens: a faint repeating "C" cap texture, a warm glow at the top and soft shade at the edges */
.acct:not(.beta-ov) { background:
  radial-gradient(1200px 600px at 50% -200px, rgba(255, 214, 140, .9), transparent 70%),
  radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(176, 120, 40, .12) 100%),
  url(/assets/brand/cap-pattern.svg?v=3) 0 0 / 340px 340px repeat,
  #fff4e0; }
/* sign-up / setup cards: which plan they're signing up for */
.acct-logo { position: relative; }
.acct-plan { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px; font-size: .8rem; line-height: 1.1; white-space: nowrap; }
.acct-plan b { font-weight: 900; } .acct-plan small { font-weight: 700; opacity: .8; }
.acct-plan.fam { background: #FFC800; color: #141414; } .acct-plan.fam .ci-cap { width: 22px; height: 19px; }
.acct-plan.free { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; padding-left: 12px; }
@media (max-width: 420px) { .acct-plan small { display: none; } }
.ob-sub { margin: 14px 0 2px; font-size: 1.05rem; }

/* social links (LinkedIn, Instagram, TikTok) in every footer */
.social { display: flex; gap: 10px; margin-top: 6px; }
.social a { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: inherit; background: rgba(128, 128, 128, .14); transition: background .15s, color .15s, transform .15s; }
.social a:hover { background: #FFC800; color: #141414; transform: translateY(-1px); }
.social svg { width: 18px; height: 18px; }
.lp-foot .social a { color: #fff; background: rgba(255, 255, 255, .1); }
.lp-foot .social a:hover { background: #FFC800; color: #141414; }
.rs-foot .social { justify-content: center; margin: 4px 0 10px; } .rs-foot .social a { color: #3b3446; }

/* "Start free" from anywhere on the homepage lands on the plans with a gold pulse */
.pl-cards.lp-flash .pl-card { animation: lp-flash 1.4s ease-out 1; }
@keyframes lp-flash { 0% { box-shadow: 0 0 0 0 rgba(255, 200, 0, .9); } 40% { box-shadow: 0 0 0 10px rgba(255, 200, 0, .45); } 100% { box-shadow: 0 0 0 0 rgba(255, 200, 0, 0); } }
/* homepage top bar on the narrowest phones: keep "Log in" and "Start free" on one line */
.lp-top-go button { white-space: nowrap; }
@media (max-width: 360px) { .lp-logo { font-size: 1.12rem; gap: 6px; } .lp-logo img { width: 28px; height: 28px; } .lp-top { padding-left: 12px; padding-right: 12px; } .lp-top-go .lp-btn.small { padding: 9px 12px; font-size: .88rem; } }
/* sign-up: "← Plans" on the first step goes back to the homepage's plans */
.acct-back { display: inline-flex; align-items: center; gap: 4px; margin: -4px 0 8px -6px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: #6b6275; font: 800 .88rem/1 var(--font, inherit); cursor: pointer; }
.acct-back:hover { background: #f3ecdf; color: #1e1b2e; }
/* the hero pill stays on one line (it wraps only on the narrowest phones) */
.lp-kick-hero { white-space: nowrap; letter-spacing: .08em; }
@media (max-width: 520px) { .lp-kick-hero { font-size: .7rem; letter-spacing: .05em; padding: 6px 10px; } }
@media (max-width: 330px) { .lp-kick-hero { white-space: normal; } }