/* Swaya World — the child's world inside the app.

   Layout: Swaya has her own column beside everything the child does (on a
   landscape iPad), or waits in the corner (portrait iPad, phone). Every
   screen fills the space it has: hub tiles stretch to fill the height, game
   boards grow with the screen, nothing sits in a corner of empty sky.
   Pictures are drawn SVG (art.js, icons.js): no emoji anywhere. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
:root {
    --ink: #1e293b; --ink-soft: #64748b; --navy: #0f2b5c; --accent: #0284c7;
    --shadow: 0 14px 34px rgba(15, 43, 92, .14);
    --lane: clamp(210px, 23vw, 310px);
    --gap: clamp(12px, 1.8vw, 22px);
    --safe-top: env(safe-area-inset-top, 0px);
}
html, body { height: 100%; margin: 0; }
body { font-family: 'Nunito', ui-rounded, system-ui, sans-serif; color: var(--ink); background: #cfeafe; overflow: hidden; }
h1, h2, h3, .display { font-family: 'Baloo 2', ui-rounded, system-ui, sans-serif; margin: 0; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; touch-action: manipulation; padding: 0; }
.icon { width: 1.25em; height: 1.25em; flex: none; }
.art { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- the sky ---------- */
.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
    background: radial-gradient(900px 520px at 82% -8%, rgba(196,181,253,.35), transparent 62%), radial-gradient(700px 420px at 10% 12%, rgba(254,240,138,.28), transparent 60%),
                linear-gradient(180deg, #b6e0fd 0%, #d4eeff 42%, #ecf9ff 72%, #f3fbef 100%); }
.cloud { position: absolute; background: #fff; border-radius: 999px; opacity: .85; filter: drop-shadow(0 10px 16px rgba(56,130,190,.12)); animation: drift linear infinite; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 55%; height: 150%; left: 15%; bottom: 30%; } .cloud::after { width: 40%; height: 120%; right: 12%; bottom: 25%; }
.c1 { width: 170px; height: 46px; top: 12%; animation-duration: 80s; animation-delay: -20s; }
.c2 { width: 120px; height: 34px; top: 34%; animation-duration: 110s; animation-delay: -70s; opacity: .7; }
.c3 { width: 210px; height: 56px; top: 60%; animation-duration: 140s; animation-delay: -40s; opacity: .5; }
@keyframes drift { from { transform: translateX(-260px); } to { transform: translateX(calc(100vw + 60px)); } }
.hills { position: absolute; left: -10%; right: -10%; bottom: -120px; height: 250px; border-radius: 50% 50% 0 0; background: radial-gradient(120% 90% at 30% 0%, #9be3b1 0%, #6cc98a 60%, #5fc27e 100%); opacity: .7; }

/* ---------- the frame: Swaya's column + the content ---------- */
.app { position: fixed; inset: 0; z-index: 2; display: grid; grid-template-columns: var(--lane) minmax(0, 1fr); }
.lane { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: calc(16px + var(--safe-top)) 12px 18px; min-height: 0; }
.bot { width: min(100%, 250px); aspect-ratio: 240 / 344; flex: none; position: relative; z-index: 3; }
.bot svg { width: 100%; height: 100%; overflow: visible; display: block; }
.bot .bt-hit { fill: transparent; cursor: pointer; touch-action: none; pointer-events: auto; }
.bot-bubble { position: relative; width: 100%; background: #fff; border-radius: 26px; padding: 16px 18px; margin-bottom: 18px; box-shadow: var(--shadow);
    font-family: 'Baloo 2', ui-rounded, sans-serif; font-weight: 700; font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.3; color: var(--navy);
    max-height: 46vh; overflow: hidden; opacity: 0; transform: translateY(8px) scale(.97); transition: opacity .25s, transform .25s; }
.bot-bubble::after { content: ''; position: absolute; left: 50%; bottom: -10px; width: 22px; height: 22px; margin-left: -11px; background: #fff; transform: rotate(45deg); border-radius: 4px; }
.bot-bubble.on { opacity: 1; transform: none; }
.bot-bubble.pop.on { animation: bubblePop .35s cubic-bezier(.34,1.56,.64,1); }
@keyframes bubblePop { from { transform: scale(.85); opacity: 0; } }
.lane .tip { font-weight: 900; font-size: .85rem; color: #1f6aa8; opacity: .75; margin-top: 4px; text-align: center; }

.main { display: flex; flex-direction: column; min-width: 0; height: 100vh; height: 100dvh; }
.bar { flex: none; display: flex; align-items: center; gap: 14px; padding: calc(14px + var(--safe-top)) 22px 8px 4px; }
.bar h1 { flex: 1; font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--navy); text-shadow: 0 2px 0 #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.round-btn { width: 60px; height: 60px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; color: var(--navy); flex: none; transition: transform .15s; }
.round-btn .icon { width: 28px; height: 28px; }
.round-btn:active { transform: scale(.92); }
.round-btn.hidden { visibility: hidden; width: 0; margin-right: -14px; }
.stars-pill { display: flex; align-items: center; gap: 8px; background: linear-gradient(180deg, #fff8db, #ffe89a); border: 3px solid #fff; border-radius: 999px; padding: 8px 18px 8px 12px;
    font-family: 'Baloo 2', ui-rounded, sans-serif; font-weight: 800; font-size: 1.35rem; color: #92400e; box-shadow: var(--shadow); flex: none; }
.stars-pill .icon { color: #f59e0b; width: 26px; height: 26px; }
.stars-pill.bump { animation: bump .5s; }
@keyframes bump { 40% { transform: scale(1.22); } }
/* the ear: what Swaya is hearing right now, on every screen (listen.js) */
/* Arabic: right to left, in a rounded Arabic face (Baloo Bhaijaan 2 is
   Baloo 2's Arabic); pictures and books keep their own left-to-right insides. */
html[lang="ar"] body, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] .display, html[lang="ar"] .prompt, html[lang="ar"] .btn, html[lang="ar"] .bot-bubble, html[lang="ar"] .stars-pill, html[lang="ar"] button, html[lang="ar"] input { font-family: 'Baloo Bhaijaan 2', 'Baloo 2', 'Geeza Pro', ui-rounded, system-ui, sans-serif; }
html[dir="rtl"] .bar { padding-inline: 4px 22px; }
html[dir="rtl"] .bar h1 { text-align: right; }
html[dir="rtl"] #screen { padding-inline: 4px 22px; }
html[dir="rtl"] .lang-pill { direction: ltr; }
html[dir="rtl"] .icon:is([data-icon="back"], [data-icon="next"], [data-icon="prev"], [data-icon="left"], [data-icon="right"], [data-icon="skip"], [data-icon="send"]) { transform: scaleX(-1); }
html[dir="rtl"] .pb-wrap, html[dir="rtl"] .pbook, html[dir="rtl"] .book3d, html[dir="rtl"] .scene-art, html[dir="rtl"] .art { direction: ltr; }
/* English or Egyptian Arabic, on every screen */
.lang-pill { display: flex; align-items: center; gap: 2px; background: #fff; border: 3px solid #fff; border-radius: 999px; padding: 2px; box-shadow: var(--shadow); flex: none; }
.lang-pill span { padding: 7px 14px; border-radius: 999px; font-weight: 900; font-size: .95rem; color: var(--ink-soft); transition: background .2s, color .2s; }
.lang-pill span.on { background: var(--navy); color: #fff; }
.ear { display: none; align-items: center; gap: 8px; max-width: 34vw; background: #fff; border-radius: 999px; padding: 7px 16px 7px 10px; box-shadow: var(--shadow); font-weight: 800; font-size: .95rem; color: var(--ink-soft); flex: none; overflow: hidden; }
.ear.on { display: flex; animation: toastIn .25s; }
.ear .dot { width: 12px; height: 12px; border-radius: 50%; background: #22c55e; flex: none; box-shadow: 0 0 0 0 rgba(34,197,94,.55); animation: earPulse 1.1s ease-out infinite; }
.ear.final .dot { animation: none; background: #0ea5e9; }
.ear.final { color: var(--navy); }
.ear .said { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@keyframes earPulse { to { box-shadow: 0 0 0 10px rgba(34,197,94,0); } }
@media (max-width: 760px) { .ear { max-width: 42vw; font-size: .85rem; padding: 5px 12px 5px 8px; } }
#screen { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 6px 22px 22px 4px; }
.view { min-height: 100%; display: flex; flex-direction: column; gap: var(--gap); animation: viewIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes viewIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Portrait and phones: Swaya waits in the corner, her words beside her. */
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
    .app { grid-template-columns: 1fr; }
    .lane { position: fixed; right: 6px; bottom: 6px; width: clamp(110px, 22vw, 170px); padding: 0; z-index: 30; justify-content: flex-end; }
    .lane .tip { display: none; }
    .bot-bubble { position: fixed; right: calc(clamp(110px, 22vw, 170px) + 10px); bottom: 26px; width: auto; max-width: min(62vw, 440px); margin: 0; }
    .bot-bubble::after { left: auto; right: -10px; bottom: 26px; }
    .bar { padding-left: 18px; }
    #screen { padding: 6px 18px calc(clamp(110px, 22vw, 170px) * 1.3) 18px; }
}

/* ---------- tiles that fill the screen ---------- */
.tiles { flex: 1; display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(var(--min, 210px), 1fr)); grid-auto-rows: minmax(var(--row, 170px), 1fr); }
.tile { position: relative; border-radius: 30px; padding: clamp(14px, 2vw, 22px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; min-width: 0;
    background: #fff; box-shadow: 0 10px 0 var(--lip, #dbeafe), 0 18px 30px rgba(15,43,92,.12); transition: transform .15s; overflow: hidden; }
.tile:active { transform: translateY(5px) scale(.98); box-shadow: 0 5px 0 var(--lip, #dbeafe), 0 10px 20px rgba(15,43,92,.12); }
.tile .pic { width: auto; height: clamp(52px, 11vh, 140px); aspect-ratio: 1; flex: none; filter: drop-shadow(0 8px 10px rgba(15,43,92,.14)); transition: transform .3s; }
.tile h3 { font-size: clamp(1.15rem, 1.9vw, 1.6rem); color: var(--navy); line-height: 1.05; }
.tile p { margin: 0; font-weight: 800; font-size: clamp(.85rem, 1.2vw, 1.02rem); color: var(--ink-soft); }
.tile .badge, .gtile .badge { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 5px; font-size: .72rem; font-weight: 900; color: #fff; background: #0ea5e9; padding: 5px 10px 5px 6px; border-radius: 999px; letter-spacing: .03em; }
.tile .badge .icon, .gtile .badge .icon { width: 14px; height: 14px; }
.tile .got, .gtile .got { position: absolute; top: 12px; right: 12px; display: flex; gap: 1px; color: #f59e0b; }
.tile .got .icon, .gtile .got .icon { width: 18px; height: 18px; }
.gtile .got { background: rgba(255,255,255,.92); border-radius: 999px; padding: 3px 7px; box-shadow: 0 4px 10px rgba(15,43,92,.12); }
.gtile .got:empty { display: none; }
.tile.color { color: #fff; background: linear-gradient(150deg, var(--c1), var(--c2)); box-shadow: 0 10px 0 var(--c3), 0 18px 30px rgba(15,43,92,.16); }
.tile.color h3 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2.3rem); text-shadow: 0 2px 0 rgba(0,0,0,.12); }
.tile.color p { color: #fff; opacity: .92; }
.tile.color .pic { height: clamp(56px, 15vh, 170px); }
.tile.color::before { content: ''; position: absolute; width: 60%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.14); left: -18%; top: -26%; }
.tile.color::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.16) 2px, transparent 2.6px); background-size: 24px 24px; pointer-events: none; }
.home-tiles .tile .pic { animation: bob 4.6s ease-in-out infinite; }
.home-tiles .tile:nth-child(2n) .pic { animation-delay: -1.6s; } .home-tiles .tile:nth-child(3n) .pic { animation-delay: -3.1s; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-2deg); } }
.chips { display: flex; flex-wrap: wrap; gap: 10px; flex: none; }
.chip { display: flex; align-items: center; gap: 8px; padding: 8px 18px 8px 8px; border-radius: 999px; background: #fff; font-weight: 900; color: var(--navy); box-shadow: var(--shadow); font-size: 1.05rem; }
.chip .art { width: 38px; height: 38px; }
.chip.on { background: var(--navy); color: #fff; }
.chip small { font-size: .78rem; background: rgba(15,43,92,.08); border-radius: 999px; padding: 2px 8px; margin-left: 2px; }
.chip.on small { background: rgba(255,255,255,.22); }
.chips.scroll { flex-wrap: nowrap; overflow-x: auto; padding: 4px 4px 12px; margin: -4px -4px -8px; scrollbar-width: none; }
.chips.scroll::-webkit-scrollbar { display: none; }
.chips.scroll .chip { flex: none; }

/* the games shelf: every game shows the place it is played in, its picture
   bobbing in it, and its shelf's color on the lip of the card */
.game-tiles { grid-auto-rows: auto; }
.gtile { --lip: #dbeafe; --deep: #93c5fd; position: relative; border-radius: 28px; background: #fff; box-shadow: 0 9px 0 var(--lip), 0 16px 28px rgba(15,43,92,.12); overflow: hidden;
    display: flex; flex-direction: column; text-align: center; min-width: 0; transition: transform .15s, box-shadow .15s; animation: cardIn .45s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay: calc(var(--i, 0) * 25ms); }
.gtile[data-shelf="thinking"] { --lip: #c7d2fe; --deep: #6366f1; } .gtile[data-shelf="numbers"] { --lip: #bfdbfe; --deep: #2563eb; }
.gtile[data-shelf="words"] { --lip: #fde68a; --deep: #d97706; } .gtile[data-shelf="feelings"] { --lip: #fbcfe8; --deep: #db2777; }
.gtile[data-shelf="action"] { --lip: #fed7aa; --deep: #ea580c; } .gtile[data-shelf="music"] { --lip: #ddd6fe; --deep: #7c3aed; }
.gtile[data-shelf="swaya"] { --lip: #a5f3fc; --deep: #0891b2; }
.gtile:active { transform: translateY(5px) scale(.98); box-shadow: 0 4px 0 var(--lip), 0 8px 16px rgba(15,43,92,.12); }
.gtile .thumb { position: relative; height: clamp(118px, 18vh, 184px); overflow: hidden; border-bottom: 3px solid #fff; }
.gtile .thumb .scene-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; transition: transform .35s; }
.gtile .thumb::before { content: ''; position: absolute; left: 50%; bottom: 3%; width: 44%; height: 9%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(15,30,60,.34), rgba(15,30,60,0)); }
.gtile .thumb::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.2), transparent 30%, transparent 70%, rgba(15,43,92,.1)); }
.gtile .thumb .pic { position: absolute; left: 50%; bottom: 6%; height: 76%; aspect-ratio: 1; z-index: 1; filter: drop-shadow(0 10px 8px rgba(15,43,92,.3)); transform: translateX(-50%);
    animation: gtileBob 4.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.37s); transition: transform .25s; }
@keyframes gtileBob { 50% { transform: translateX(-50%) translateY(-5%) rotate(-2deg); } }
.gtile:active .thumb .pic { animation: none; transform: translateX(-50%) scale(1.08) rotate(-4deg); }
.gtile:active .thumb .scene-art { transform: scale(1.06); }
.gtile .meta { position: relative; flex: 1; padding: 10px 46px 14px 12px; background: linear-gradient(180deg, #fff, #f4f9ff); text-align: left; }
.gtile h3 { font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--navy); line-height: 1.05; }
.gtile p { margin: 3px 0 0; font-weight: 800; font-size: clamp(.8rem, 1.1vw, .95rem); color: var(--ink-soft); }
.gtile .play { position: absolute; right: 10px; top: 50%; width: 36px; height: 36px; margin-top: -18px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: var(--deep); box-shadow: 0 4px 0 rgba(0,0,0,.18), 0 6px 12px rgba(15,43,92,.16); }
.gtile .play .icon { width: 18px; height: 18px; margin-left: 2px; }
.gtile .badge { background: var(--deep); }
.lead { margin: 0; font-weight: 800; font-size: clamp(1rem, 1.4vw, 1.2rem); color: var(--ink-soft); flex: none; }

/* Play with Swaya: every game on one page, by shelf */
.hub-hello { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; flex: none; background: linear-gradient(135deg, #22d3ee, #0369a1); border-radius: 30px; padding: 12px 22px; color: #fff; box-shadow: 0 10px 0 #075985, var(--shadow); position: relative; overflow: hidden; }
.hub-hello::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,.16) 2px, transparent 2.6px); background-size: 24px 24px; pointer-events: none; }
.hub-hello > * { position: relative; z-index: 1; }
.hub-hello .who { width: clamp(64px, 11vh, 100px); height: clamp(64px, 11vh, 100px); flex: none; filter: drop-shadow(0 6px 6px rgba(0,0,0,.2)); animation: bob 4.6s ease-in-out infinite; }
.hub-hello .words { flex: 1; min-width: 200px; }
.hub-hello h2 { font-size: clamp(1.5rem, 2.8vw, 2.2rem); line-height: 1.05; text-shadow: 0 2px 0 rgba(0,0,0,.12); }
.hub-hello p { margin: 4px 0 0; font-weight: 800; opacity: .95; }
.hub-shelf { display: flex; flex-direction: column; gap: 12px; flex: none; }
.hub-shelf .tiles { flex: none; }
.shelf-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--navy); text-shadow: 0 2px 0 #fff; }
.shelf-title .art { width: 42px; height: 42px; }
.shelf-title small { font-size: .95rem; background: #fff; border-radius: 999px; padding: 2px 10px; color: var(--ink-soft); box-shadow: 0 4px 10px rgba(15,43,92,.1); }
.shelf-title em { font: 800 .9rem 'Nunito', sans-serif; color: #0369a1; background: #e0f2fe; border-radius: 999px; padding: 4px 12px; text-shadow: none; }

@media (max-width: 760px) {
    .tiles, .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(150px, auto); }
    .tile.color .pic { height: 70px; } .tile .pic { height: 64px; }
}

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 64px; padding: 0 30px; border-radius: 999px;
    background: linear-gradient(180deg, #38bdf8, #0284c7); color: #fff; font-family: 'Baloo 2', ui-rounded, sans-serif; font-weight: 800; font-size: 1.35rem;
    box-shadow: 0 8px 0 #075985, 0 14px 24px rgba(2,132,199,.3); transition: transform .1s, box-shadow .1s; white-space: nowrap; }
.btn .icon { width: 26px; height: 26px; }
.btn:active { transform: translateY(5px); box-shadow: 0 3px 0 #075985, 0 8px 14px rgba(2,132,199,.25); }
.btn.green { background: linear-gradient(180deg, #4ade80, #16a34a); box-shadow: 0 8px 0 #166534, 0 14px 24px rgba(22,163,74,.3); }
.btn.pink { background: linear-gradient(180deg, #f472b6, #db2777); box-shadow: 0 8px 0 #9d174d, 0 14px 24px rgba(219,39,119,.3); }
.btn.white { background: #fff; color: var(--navy); box-shadow: 0 8px 0 #cbd5e1, 0 14px 24px rgba(15,43,92,.12); }
.btn.small { min-height: 54px; font-size: 1.1rem; padding: 0 22px; }
.btn[disabled] { opacity: .4; pointer-events: none; }
.row { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; flex: none; }

/* ---------- boards: games, lessons, practice ---------- */
.board { flex: 1; display: flex; flex-direction: column; align-items: stretch; justify-content: space-evenly; gap: clamp(10px, 2vh, 22px);
    background: rgba(255,255,255,.8); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 34px; padding: clamp(16px, 2.6vh, 28px) clamp(16px, 2.4vw, 30px); box-shadow: var(--shadow); border: 3px solid #fff; min-height: 0; }
.progress { display: flex; gap: 8px; justify-content: center; flex: none; }
.progress-wrap { display: flex; justify-content: center; flex: none; }
.progress { align-items: center; }
.progress span { width: 16px; height: 16px; border-radius: 50%; background: #e2e8f0; transition: all .3s; }
.progress span.done { background: #fbbf24; transform: scale(1.1); }
.progress span.now { background: #38bdf8; box-shadow: 0 0 0 5px rgba(56,189,248,.25); }
.progress b { margin-left: 6px; font: 800 .85rem 'Baloo 2', sans-serif; color: var(--ink-soft); }
.prompt { font-family: 'Baloo 2', ui-rounded, sans-serif; font-weight: 800; font-size: clamp(1.5rem, 3.2vh, 2.3rem); color: var(--navy); text-align: center; line-height: 1.2; flex: none; }
.prompt b { color: #db2777; }
.visual { flex: 1; display: flex; justify-content: center; align-items: center; gap: clamp(8px, 1.4vw, 16px); flex-wrap: wrap; min-height: 0; }
.visual > .art, .visual > .pic { height: clamp(100px, 24vh, 230px); width: auto; aspect-ratio: 1; }
.visual.small { gap: 6px; } .visual.small .art { height: clamp(40px, 7.5vh, 74px); width: auto; aspect-ratio: 1; }
.visual .q { display: inline-grid; place-items: center; height: clamp(46px, 8vh, 80px); aspect-ratio: 1; border-radius: 22px; border: 5px dashed #93c5fd; color: #3b82f6; font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(1.8rem, 4vh, 3rem); }
.visual .math { font-family: 'Baloo 2', ui-rounded, sans-serif; font-weight: 800; color: var(--navy); font-size: clamp(2.4rem, 7vh, 4.8rem); }
.visual .word { font-family: 'Baloo 2', ui-rounded, sans-serif; font-weight: 800; color: var(--navy); font-size: clamp(2rem, 5vh, 3.4rem); }
.choices { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 18px); width: 100%; max-width: 980px; margin: 0 auto; flex: none; }
.choice { min-height: clamp(110px, 21vh, 220px); border-radius: 28px; background: linear-gradient(180deg, #ffffff, #f2f8ff); border: 3px solid #fff; box-shadow: 0 9px 0 #cfe3f7, 0 16px 28px rgba(15,43,92,.13);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: clamp(8px, 1.4vh, 14px); transition: transform .12s, box-shadow .12s, background .2s; position: relative;
    animation: cardIn .45s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes cardIn { from { transform: translateY(26px) scale(.86); opacity: 0; } }
.choice .art { height: clamp(64px, 13vh, 150px); width: auto; aspect-ratio: 1; filter: drop-shadow(0 6px 6px rgba(15,43,92,.14)); }
.choice:active { transform: translateY(6px); box-shadow: 0 3px 0 #dbeafe, 0 8px 14px rgba(15,43,92,.1); }
.choice .label { font-family: 'Baloo 2', ui-rounded, sans-serif; font-weight: 800; font-size: clamp(1.05rem, 2.2vh, 1.45rem); color: var(--navy); line-height: 1; }
.choice .label.num { font-size: clamp(1.8rem, 4.5vh, 3rem); }
.choice.text { font-family: 'Baloo 2', ui-rounded, sans-serif; font-weight: 800; font-size: clamp(2.4rem, 7vh, 4.4rem); color: var(--navy); }
.choice .group { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 90%; }
.choice .group .art { height: clamp(36px, 7vh, 64px); }
.choice.right { background: linear-gradient(180deg, #effdf4, #d3f9e0); box-shadow: 0 9px 0 #86efac, 0 0 0 6px #4ade80; animation: pop .45s; }
.choice.wrong { background: #fee2e2; box-shadow: 0 9px 0 #fecaca; animation: shake .45s; }
.choice.faded { opacity: .35; }
.hint-glow { animation: hintGlow 1s ease-in-out infinite !important; z-index: 2; }
@keyframes hintGlow { 0%, 100% { box-shadow: 0 0 0 5px rgba(250,204,21,.7), 0 0 30px 8px rgba(250,204,21,.5); } 50% { box-shadow: 0 0 0 10px rgba(250,204,21,.3), 0 0 46px 16px rgba(250,204,21,.6); } }
@keyframes pop { 40% { transform: scale(1.1); } }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
.shake { animation: shake .45s; }
.silhouette { filter: brightness(0) opacity(.6); }

/* the end of a game or lesson: stars in front of a turning sunburst */
.result { align-items: center; text-align: center; justify-content: center; position: relative; overflow: hidden; }
.result > * { position: relative; z-index: 1; }
.result .rays { position: absolute; z-index: 0; left: 50%; top: 30%; width: 1000px; height: 1000px; margin: -500px 0 0 -500px; border-radius: 50%; pointer-events: none;
    background: repeating-conic-gradient(from 0deg, rgba(255,200,40,.3) 0deg 9deg, rgba(255,200,40,0) 9deg 18deg);
    -webkit-mask: radial-gradient(closest-side, #000 18%, transparent 72%); mask: radial-gradient(closest-side, #000 18%, transparent 72%); animation: spin 36s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.result .stars3 { display: flex; gap: 12px; justify-content: center; }
.result .stars3 .art { width: clamp(80px, 14vh, 130px); height: auto; animation: starIn .6s cubic-bezier(.34,1.56,.64,1) backwards; }
.result .stars3 .off { filter: grayscale(1) opacity(.3); }
.result .stars3 .art:nth-child(2) { animation-delay: .2s; margin-top: -24px; } .result .stars3 .art:nth-child(3) { animation-delay: .4s; }
@keyframes starIn { from { transform: scale(0) rotate(-90deg); } }
.result h2 { font-size: clamp(2.2rem, 5vh, 3.2rem); color: var(--navy); }
.result p { font-size: 1.3rem; font-weight: 800; color: var(--ink-soft); margin: 0; }

/* celebrations: drawn, never emoji */
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 50; overflow: hidden; }
.burst { position: absolute; width: 26px; height: 26px; animation: burst 1.1s ease-out forwards; }
.burst.sq { width: 12px; height: 18px; border-radius: 3px; }
@keyframes burst { from { transform: translate(0,0) scale(.4) rotate(0); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(var(--r)); opacity: 0; } }
.bot-fx { position: fixed; width: 30px; height: 30px; z-index: 40; pointer-events: none; animation: botFx 1.4s ease-out forwards; background-size: contain; background-repeat: no-repeat; }
.bot-fx.heart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7-4.6-9.5-9C.5 8 3 4 6.5 4c2 0 3.5 1 5.5 3 2-2 3.5-3 5.5-3C21 4 23.5 8 21.5 12 19 16.4 12 21 12 21z' fill='%23ff7eb6'/%3E%3C/svg%3E"); }
.bot-fx.star { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3 6.5 7 .8-5 4.7 1.4 7L12 17.5 5.6 21 7 14l-5-4.7 7-.8z' fill='%23fbbf24'/%3E%3C/svg%3E"); }
@keyframes botFx { 0% { opacity: 0; transform: translate(0,0) scale(.4); } 20% { opacity: 1; transform: translate(calc(var(--dx) * .3), -18px) scale(1.1); } 100% { opacity: 0; transform: translate(var(--dx), -90px) scale(.8); } }
.toast { position: fixed; left: 50%; bottom: 36px; transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 999px; padding: 14px 26px 14px 18px; font-weight: 900; font-size: 1.15rem; color: var(--navy); box-shadow: var(--shadow); animation: toastIn .3s; max-width: 90vw; }
.toast .icon { color: #16a34a; }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 20px); } }

/* ---------- a scene to play in (W.stage) ---------- */
.view.played { position: relative; gap: 0; }
.scene-bg { position: absolute; inset: 0; border-radius: 34px; overflow: hidden; border: 4px solid #fff; box-shadow: var(--shadow); background: #cdebff; }
.scene-bg .scene-art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.game-host { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; min-height: 0; padding: clamp(12px, 2vh, 22px) clamp(12px, 1.8vw, 24px); }
.played .board { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border: 0; padding: 0; border-radius: 0; }
.played .board.result { background: rgba(255,255,255,.94); border: 4px solid #fff; border-radius: 36px; box-shadow: var(--shadow); padding: clamp(22px, 4vh, 44px) clamp(24px, 5vw, 64px); margin: auto; flex: 0 1 auto; width: min(660px, 100%); }
.played .board.lesson { background: rgba(255,255,255,.9); border: 4px solid #fff; border-radius: 34px; box-shadow: var(--shadow); padding: clamp(16px, 2.6vh, 28px) clamp(16px, 2.4vw, 30px); }
.played .prompt { align-self: center; max-width: 100%; background: rgba(255,255,255,.96); padding: .26em 1.1em; border-radius: 999px; box-shadow: 0 8px 22px rgba(15,43,92,.16); animation: promptIn .45s cubic-bezier(.34,1.56,.64,1); }
@keyframes promptIn { from { transform: translateY(-12px) scale(.92); opacity: 0; } }
.played .progress { align-self: center; background: rgba(255,255,255,.92); padding: 7px 12px; border-radius: 999px; box-shadow: 0 6px 16px rgba(15,43,92,.12); }
.played .visual { background: radial-gradient(closest-side, rgba(255,255,255,.85), rgba(255,255,255,.4) 70%, rgba(255,255,255,0)); border-radius: 50%; }
.played .visual > .art { filter: drop-shadow(0 10px 10px rgba(15,43,92,.2)); animation: visualIn .5s cubic-bezier(.34,1.56,.64,1) backwards; }
@keyframes visualIn { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
.played .lead { background: rgba(255,255,255,.9); padding: 4px 16px; border-radius: 999px; align-self: center; }
.played .stage { background: transparent; }
.played .countdown, .played .heard:not(:empty) { align-self: center; background: rgba(255,255,255,.92); border-radius: 999px; padding: 2px 22px; box-shadow: 0 6px 16px rgba(15,43,92,.12); }
.played .row .btn.white { box-shadow: 0 8px 0 #b9cbe0, 0 14px 24px rgba(15,43,92,.18); }
/* every game wears its shelf's color: on the choices' lip, the prompt's edge and the progress */
.view[data-shelf] { --lip: #cfe3f7; --deep: #38bdf8; }
.view[data-shelf="thinking"] { --lip: #c7d2fe; --deep: #6366f1; } .view[data-shelf="numbers"] { --lip: #bfdbfe; --deep: #2563eb; }
.view[data-shelf="words"] { --lip: #fde68a; --deep: #d97706; } .view[data-shelf="feelings"] { --lip: #fbcfe8; --deep: #db2777; }
.view[data-shelf="action"] { --lip: #fed7aa; --deep: #ea580c; } .view[data-shelf="music"] { --lip: #ddd6fe; --deep: #7c3aed; }
.view[data-shelf] .choice { box-shadow: 0 9px 0 var(--lip), 0 16px 28px rgba(15,43,92,.13); min-height: clamp(116px, 22vh, 230px); }
.view[data-shelf] .choice:active { box-shadow: 0 3px 0 var(--lip), 0 8px 14px rgba(15,43,92,.1); }
.view[data-shelf] .prompt { box-shadow: 0 8px 22px rgba(15,43,92,.16), inset 0 -5px 0 var(--lip); }
.view[data-shelf] .prompt b { color: var(--deep); }
.view[data-shelf] .progress span.now { background: var(--deep); box-shadow: 0 0 0 5px color-mix(in srgb, var(--deep) 25%, transparent); }
.view[data-shelf] .scene-bg { border-color: #fff; box-shadow: 0 0 0 5px var(--lip), var(--shadow); }
.view[data-shelf] .btn.green { box-shadow: 0 8px 0 #166534, 0 14px 24px rgba(22,163,74,.3); }

/* ---------- home ---------- */
.home-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; flex: none; }
.home-hello h2 { font-size: clamp(2rem, 4.2vw, 3rem); color: var(--navy); line-height: 1.05; }
/* the day so far, and the last thing to pick up again */
.today { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; background: rgba(255,255,255,.72); border-radius: 999px; padding: 8px 12px 8px 16px; box-shadow: var(--shadow); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.today .stat { display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-weight: 800; font-size: .9rem; opacity: .7; }
.today .stat.some { color: var(--navy); opacity: 1; }
.today .stat .art { width: 30px; height: 30px; }
.today .stat b { font: 800 1.25rem 'Baloo 2', sans-serif; }
.today .stat small { font-size: .78rem; }
.today .cont { margin-left: 4px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tiles .pic-ring.plain { position: relative; width: clamp(96px, 18vh, 150px); aspect-ratio: 1; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--lip)); box-shadow: inset 0 -6px 0 rgba(0,0,0,.06), 0 8px 16px rgba(15,43,92,.1); }
.tiles .pic-ring.plain .pic { position: absolute; inset: 18%; height: auto; width: auto; }
.home-hello p { margin: 4px 0 0; font-weight: 800; font-size: clamp(1rem, 1.6vw, 1.3rem); color: var(--ink-soft); }
.home-tiles { --min: 240px; --row: 150px; }
@media (min-aspect-ratio: 1/1) and (min-width: 761px) { .home-tiles { grid-template-columns: repeat(3, 1fr); } }

/* ---------- onboarding ---------- */
.hello-step { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(16px, 3vh, 30px); text-align: center; }
.hello-step h2 { font-size: clamp(2rem, 5vh, 3.2rem); color: var(--navy); line-height: 1.1; }
.hello-step .name-input { width: min(520px, 90%); min-height: 84px; border-radius: 28px; border: 4px solid #bae6fd; padding: 0 28px; text-align: center;
    font: 800 clamp(1.8rem, 4vh, 2.6rem) 'Baloo 2', ui-rounded, sans-serif; color: var(--navy); background: #fff; box-shadow: var(--shadow); -webkit-user-select: text; user-select: text; outline: none; }
.hello-step .name-input:focus { border-color: #38bdf8; }
.ages { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: min(640px, 100%); }
.ages button { aspect-ratio: 1.15; border-radius: 26px; background: #fff; box-shadow: 0 9px 0 #bae6fd, var(--shadow); font: 800 clamp(2.2rem, 6vh, 3.4rem) 'Baloo 2', sans-serif; color: var(--navy); transition: transform .12s; }
.ages button:active, .ages button.on { transform: translateY(5px); background: #e0f2fe; box-shadow: 0 4px 0 #7dd3fc; }
.genders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; width: min(620px, 100%); }
.genders button { border-radius: 32px; background: #fff; padding: 20px; box-shadow: 0 10px 0 var(--lip), var(--shadow); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.genders button .art { width: clamp(110px, 20vh, 180px); height: auto; }
.genders button h3 { font-size: 1.8rem; color: var(--navy); }

/* ---------- games ---------- */
.stage { flex: 1; position: relative; min-height: 280px; border-radius: 28px; overflow: hidden; background: linear-gradient(180deg, #e0f2fe, #f0f9ff); }
.bubble { position: absolute; width: clamp(80px, 12vh, 112px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
    font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(2rem, 5vh, 2.8rem); color: #0f2b5c;
    background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95), rgba(255,255,255,.35) 42%, rgba(125,211,252,.45) 75%);
    border: 3px solid rgba(255,255,255,.9); box-shadow: inset -6px -8px 16px rgba(56,189,248,.35); animation: rise linear forwards; }
@keyframes rise { from { transform: translateY(0); } to { transform: translateY(-110vh); } }
.bubble.popped { animation: popOut .3s forwards !important; }
@keyframes popOut { to { scale: 1.6; opacity: 0; } }
.bubble.nope { border-color: #f87171; box-shadow: inset -6px -8px 16px rgba(248,113,113,.45); }
.monster-wrap { flex: 1; display: flex; align-items: center; justify-content: center; gap: clamp(20px, 4vw, 60px); flex-wrap: wrap; }
.monster { position: relative; width: clamp(150px, 30vh, 280px); aspect-ratio: 1; }
.monster.chomp { animation: chomp .35s; }
@keyframes chomp { 50% { transform: scale(1.12, .9); } }
.monster .count { position: absolute; bottom: 0; right: -10px; width: 68px; height: 68px; border-radius: 50%; background: #fff; display: grid; place-items: center; font: 800 2.2rem 'Baloo 2', sans-serif; color: var(--navy); box-shadow: var(--shadow); }
.plate { display: grid; grid-template-columns: repeat(4, clamp(66px, 11vh, 100px)); gap: 12px; }
.food { aspect-ratio: 1; border-radius: 24px; background: #fff; box-shadow: var(--shadow); padding: 10px; transition: transform .3s, opacity .3s; }
.food.eaten { transform: scale(0); opacity: 0; }
.sizes { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: clamp(12px, 2vw, 26px); flex-wrap: wrap; }
.sizes button { padding: 10px; border-radius: 26px; background: #fff; box-shadow: var(--shadow); position: relative; }
.sizes button .art { width: auto; }
.sizes button .n { position: absolute; top: -14px; left: -10px; background: #fbbf24; color: #fff; font-weight: 900; border-radius: 50%; width: 38px; height: 38px; display: grid; place-items: center; font-size: 1.2rem; }
.pads { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 2vh, 22px); width: min(62vh, 520px); margin: 0 auto; }
.pad { aspect-ratio: 1; border-radius: 34px; opacity: .5; transition: opacity .12s, transform .12s; box-shadow: inset 0 -10px 0 rgba(0,0,0,.15); }
.pad.lit { opacity: 1; transform: scale(1.05); box-shadow: 0 0 40px currentColor, inset 0 -10px 0 rgba(0,0,0,.15); }
.bins { display: grid; grid-template-columns: repeat(var(--bins, 2), 1fr); gap: var(--gap); flex: none; }
.bin { min-height: clamp(140px, 24vh, 230px); border-radius: 30px; border: 5px dashed var(--c, #93c5fd); background: rgba(255,255,255,.75); padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: transform .12s; }
.bin:active { transform: scale(.97); }
.bin .head { display: flex; align-items: center; gap: 10px; }
.bin .head .art { width: 50px; height: 50px; }
.bin h3 { font-size: 1.5rem; color: var(--navy); }
.bin .got { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; min-height: 44px; }
.bin .got .art { width: 44px; height: 44px; }
.item-card { width: clamp(130px, 24vh, 210px); aspect-ratio: 1; margin: 0 auto; border-radius: 34px; background: #fff; box-shadow: var(--shadow); padding: 18px; animation: pop .4s; }
.tiles-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.slot { width: clamp(70px, 11vh, 100px); height: clamp(80px, 12vh, 110px); border-radius: 20px; border: 4px dashed #93c5fd; display: grid; place-items: center; font: 800 clamp(2.4rem, 6vh, 3.4rem) 'Baloo 2', sans-serif; color: var(--navy); background: #fff; }
.slot.filled { border-style: solid; border-color: #4ade80; background: #dcfce7; animation: pop .35s; }
.letter-tile { width: clamp(70px, 11vh, 100px); aspect-ratio: 1; border-radius: 22px; background: linear-gradient(180deg, #fef3c7, #fde68a); box-shadow: 0 8px 0 #f59e0b; font: 800 clamp(2.4rem, 6vh, 3.4rem) 'Baloo 2', sans-serif; color: #92400e; }
.letter-tile.used { visibility: hidden; }
.xylo { flex: 1; display: flex; gap: clamp(6px, 1vw, 12px); justify-content: center; align-items: center; min-height: 240px; }
.bar-key { width: clamp(52px, 7vw, 84px); border-radius: 20px; color: #fff; font: 800 1.5rem 'Baloo 2', sans-serif; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; box-shadow: inset 0 -8px 0 rgba(0,0,0,.18); transition: transform .08s, filter .1s; }
.bar-key.lit { filter: brightness(1.25); transform: scale(1.06); }
.bar-key.next { animation: nextKey .8s ease-in-out infinite; }
@keyframes nextKey { 50% { transform: translateY(-16px); } }
.maze-row { flex: 1; display: flex; gap: clamp(20px, 4vw, 50px); align-items: center; justify-content: center; flex-wrap: wrap; }
.maze { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 6px; width: min(60vh, 460px, 88vw); }
.maze div { aspect-ratio: 1; border-radius: 16px; background: #fff; padding: 8%; box-shadow: inset 0 -4px 0 #e2e8f0; }
.maze div.wall { background: #bbf7d0; box-shadow: inset 0 -4px 0 #86efac; }
.arrows { display: grid; grid-template-columns: repeat(3, clamp(70px, 10vh, 92px)); grid-template-rows: repeat(2, clamp(70px, 10vh, 92px)); gap: 10px; }
.arrows button { border-radius: 24px; background: #fff; box-shadow: 0 8px 0 #cbd5e1; display: grid; place-items: center; color: var(--navy); }
.arrows button .icon { width: 40px; height: 40px; }
.arrows button:active { transform: translateY(5px); box-shadow: 0 3px 0 #cbd5e1; }
.arrows .up { grid-area: 1 / 2; } .arrows .left { grid-area: 2 / 1; } .arrows .down { grid-area: 2 / 2; } .arrows .right { grid-area: 2 / 3; }
.memo { flex: 1; display: flex; gap: clamp(12px, 2vw, 22px); justify-content: center; align-items: center; flex-wrap: wrap; }
.memo span { width: clamp(100px, 18vh, 160px); aspect-ratio: 1; border-radius: 30px; background: #fff; box-shadow: var(--shadow); padding: 14px; transition: transform .4s; display: grid; place-items: center; }
.memo span.hide { transform: rotateY(90deg); }
.memo .mystery { font: 800 clamp(3rem, 8vh, 5rem) 'Baloo 2', sans-serif; color: #8b5cf6; }

/* ---------- study ---------- */
.course-tiles .tile { padding-top: 12px; }
.course-tiles .pic-ring { position: relative; width: clamp(76px, 14vh, 120px); aspect-ratio: 1; flex: none; }
.course-tiles .pic-ring .ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.course-tiles .pic-ring .pic { position: absolute; inset: 16%; height: auto; width: auto; }
.course-tiles .tile .done { color: var(--c); font-size: .85rem; }
.course-head { display: flex; align-items: center; gap: 18px; flex: none; background: #fff; border-radius: 28px; padding: 14px 22px; box-shadow: 0 8px 0 var(--lip), var(--shadow); }
.course-head .pic { width: clamp(64px, 11vh, 96px); height: clamp(64px, 11vh, 96px); flex: none; }
.course-head h2 { color: var(--navy); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.05; }
.course-head p { margin: 2px 0 8px; font-weight: 800; color: var(--ink-soft); }
.course-head .meter { height: 12px; border-radius: 999px; background: #e2e8f0; overflow: hidden; width: min(100%, 420px); }
.course-head .meter i { display: block; height: 100%; border-radius: 999px; background: var(--c); transition: width .6s; }
.level.next-up { box-shadow: 0 8px 0 var(--c), var(--shadow); }
.level .tag { font: 800 .85rem 'Baloo 2', sans-serif; color: #fff; background: var(--c); border-radius: 999px; padding: 3px 12px; flex: none; }
.lesson { text-align: center; align-items: center; }
.lesson.intro { border-top: 12px solid var(--c, #3b82f6); }
.lesson.intro h2 { font-size: clamp(2rem, 4.5vh, 2.8rem); color: var(--navy); }
.lesson.intro .pic { height: clamp(90px, 20vh, 180px); }
.lesson-top { display: flex; align-items: center; gap: 12px; flex: none; }
.lesson-top .count { font: 800 .95rem 'Baloo 2', sans-serif; color: var(--ink-soft); background: #f1f5f9; border-radius: 999px; padding: 3px 12px; }
.lesson .btn.next.ready { animation: nextReady 1.4s ease-in-out infinite; }
@keyframes nextReady { 50% { transform: translateY(-4px); box-shadow: 0 12px 0 #075985, 0 18px 30px rgba(2,132,199,.35); } }
.lesson .huge.day { font-size: clamp(2.6rem, 8vh, 5rem); }
.lesson .dots.pair { gap: 16px; align-items: center; } .lesson .dots.pair .label { display: block; font: 800 1.1rem 'Baloo 2', sans-serif; color: var(--navy); text-align: center; }
.lesson .dots .art + .label, .visual .label { display: block; }
.dots .eq { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(2rem, 6vh, 3.4rem); color: var(--navy); align-self: center; }
.learned { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; max-width: 640px; }
.learned .t { font: 800 1rem 'Baloo 2', sans-serif; color: var(--ink-soft); margin-right: 4px; }
.learned span:not(.t) { background: #eff6ff; color: var(--navy); border-radius: 999px; padding: 3px 12px; font: 800 .95rem 'Baloo 2', sans-serif; }
/* clocks, places, fractions and sizes in lessons */
.lesson .pic .clock, .visual .clock { height: clamp(120px, 26vh, 240px); width: auto; aspect-ratio: 1; display: block; filter: drop-shadow(0 8px 10px rgba(15,43,92,.18)); }
.lesson .dots .clock { height: clamp(70px, 14vh, 130px); width: auto; }
.choice .clock { height: clamp(64px, 13vh, 150px); width: auto; aspect-ratio: 1; }
.place { position: relative; width: clamp(140px, 26vh, 240px); aspect-ratio: 1; margin: 0 auto; }
.place .ref, .place .thing { position: absolute; display: block; }
.place .ref { left: 18%; bottom: 6%; width: 64%; z-index: 1; }
.place .thing { width: 34%; left: 33%; bottom: 8%; z-index: 2; }
.place.in .thing { bottom: 42%; width: 32%; left: 34%; z-index: 0; }
.place.on .thing { bottom: 66%; width: 30%; left: 35%; }
.place.under .thing { bottom: 0; width: 24%; left: 38%; z-index: 0; }
.place.under .ref { bottom: 18%; }
.place.next .thing { left: 72%; bottom: 6%; width: 28%; }
.place.next .ref { left: 6%; width: 56%; }
.place.behind .thing { bottom: 50%; left: 52%; width: 28%; z-index: 0; }
.place.front .thing { bottom: 0; left: 36%; width: 32%; z-index: 3; }
.place.left .thing { left: 0; bottom: 6%; width: 26%; }
.place.left .ref { left: 34%; width: 60%; }
.place.right .thing { left: 74%; bottom: 6%; width: 26%; }
.place.right .ref { left: 6%; width: 60%; }
.choice .place { width: clamp(70px, 14vh, 150px); }
.frac-wrap { position: relative; display: inline-block; width: clamp(64px, 14vh, 150px); aspect-ratio: 1; }
.frac-wrap .ghost, .frac-wrap .frac { position: absolute; inset: 0; }
.frac-wrap .ghost { opacity: .18; filter: grayscale(1); }
.frac-wrap .frac.half { clip-path: inset(0 50% 0 0); }
.frac-wrap .frac.quarter { clip-path: polygon(50% 50%, 50% 0, 100% 0, 100% 50%); }
.frac-wrap .frac.whole { clip-path: none; }
.frac-wrap .frac.half::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 3px dashed #23304d; }
.lesson .pic .frac-wrap { width: clamp(120px, 26vh, 240px); }
.sized { display: inline-block; width: calc(clamp(90px, 20vh, 200px) * var(--s, 1)); aspect-ratio: 1; align-self: flex-end; }
.choice .sized { width: calc(clamp(60px, 13vh, 150px) * var(--s, 1)); }
.lesson .huge { font-family: 'Baloo 2', ui-rounded, sans-serif; font-weight: 800; font-size: clamp(5rem, 16vh, 10rem); line-height: 1; color: var(--navy); }
.lesson .huge small { font-size: .55em; color: #3b82f6; }
.lesson .pic { height: clamp(100px, 24vh, 230px); aspect-ratio: 1; }
.lesson .caption { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(1.6rem, 4vh, 2.6rem); color: var(--navy); }
.lesson .caption b { color: #db2777; }
.lesson .eq { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(3rem, 9vh, 5.4rem); color: var(--navy); line-height: 1; }
.dots { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 720px; }
.dots .art { width: clamp(40px, 7vh, 64px); height: auto; }
.dots .gone { position: relative; }
.dots .gone .art { filter: grayscale(1) opacity(.3); }
.dots .gone::after { content: ''; position: absolute; inset: 10%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' stroke='%23ef4444' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.groups { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.groups > div { display: flex; gap: 4px; border: 4px dashed #93c5fd; border-radius: 22px; padding: 8px; background: rgba(255,255,255,.7); }
.groups .art { width: clamp(30px, 5.5vh, 50px); height: auto; }
.levels { flex: 1; display: grid; gap: var(--gap); grid-auto-rows: minmax(90px, 1fr); }
.level { display: flex; align-items: center; gap: 18px; background: #fff; border-radius: 26px; padding: 14px 22px; box-shadow: 0 8px 0 var(--lip, #dbeafe), var(--shadow); text-align: left; width: 100%; }
.level .n { width: clamp(56px, 8vh, 76px); aspect-ratio: 1; border-radius: 20px; display: grid; place-items: center; font: 800 1.9rem 'Baloo 2', sans-serif; color: #fff; background: var(--c, #3b82f6); flex: none; }
.level h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); color: var(--navy); }
.level p { margin: 2px 0 0; font-weight: 800; color: var(--ink-soft); }
.level .st { margin-left: auto; display: flex; gap: 2px; color: #f59e0b; }
.level .st .icon { width: 26px; height: 26px; } .level .st .off { color: #e2e8f0; }

/* ---------- speech ---------- */
.mic { width: clamp(110px, 17vh, 150px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: #fff; box-shadow: var(--shadow); position: relative; color: #059669; flex: none; }
.mic .icon { width: 46%; height: 46%; }
.mic.on { background: #dcfce7; }
.mic.on::before, .mic.on::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 4px solid #4ade80; animation: ring 1.6s ease-out infinite; }
.mic.on::after { animation-delay: .8s; }
@keyframes ring { from { transform: scale(.85); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }
.heard { min-height: 36px; text-align: center; font-weight: 900; font-size: clamp(1.1rem, 2.2vh, 1.4rem); color: #047857; flex: none; }
.word-card { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.word-card .pic { height: clamp(110px, 26vh, 240px); aspect-ratio: 1; }
.word-card .word { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(2.4rem, 7vh, 4rem); color: var(--navy); line-height: 1; }
.word-card .word em { font-style: normal; color: #db2777; text-decoration: underline; text-decoration-thickness: 5px; text-underline-offset: 8px; }
.sound-letter { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(2.6rem, 7vh, 4.2rem); color: var(--navy); line-height: 1; }
.sound-pics { display: flex; gap: 6px; justify-content: center; } .sound-pics .art { width: clamp(34px, 5vh, 50px); height: auto; }
.face-ex { flex: 1; display: grid; place-items: center; } .face-ex .art { height: clamp(150px, 34vh, 300px); width: auto; animation: exercise 1.2s ease-in-out infinite; }
@keyframes exercise { 50% { transform: scale(1.08); } }
.countdown { font-family: 'Baloo 2', sans-serif; font-weight: 800; font-size: clamp(2.6rem, 7vh, 4rem); color: #059669; text-align: center; flex: none; }
.balloon-wrap { flex: 1; display: grid; place-items: center; }
.balloon-wrap .art { height: clamp(120px, 26vh, 220px); width: auto; transition: transform 4s ease-in-out; transform-origin: 50% 90%; }
.balloon-wrap.big .art { transform: scale(1.7); }
.talk { flex: 1; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; padding: 6px; min-height: 120px; }
.msg { max-width: 78%; padding: 14px 20px; border-radius: 26px; font-weight: 800; font-size: 1.2rem; line-height: 1.35; box-shadow: 0 6px 14px rgba(15,43,92,.08); animation: pop .3s; }
.msg.me { align-self: flex-end; background: #0ea5e9; color: #fff; border-bottom-right-radius: 8px; }
.msg.them { align-self: flex-start; background: #fff; border-bottom-left-radius: 8px; }
.msg.sticker { background: none; box-shadow: none; padding: 0; width: 110px; }
.typing { align-self: flex-start; background: #fff; border-radius: 22px; padding: 14px 20px; }
.typing span { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #94a3b8; margin: 0 2px; animation: typing 1s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; } .typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 50% { transform: translateY(-6px); } }

/* ---------- library: the coloring book ---------- */
.coloring { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--gap); align-items: center; min-height: 0; }
.coloring svg.page-art, .coloring > canvas { width: 100%; height: 100%; max-height: calc(100dvh - 220px); background: #fff; border-radius: 30px; box-shadow: var(--shadow); touch-action: none; }
.coloring svg [data-fill] { cursor: pointer; transition: fill .15s; }
.coloring.book { align-items: start; }
.coloring.book .sheet { position: relative; width: min(100%, calc(100dvh - 230px)); aspect-ratio: 1; margin: 0 auto; background: #fff; border-radius: 30px; box-shadow: var(--shadow); overflow: hidden; touch-action: none; }
.coloring.book .sheet .page-art { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; border-radius: 0; box-shadow: none; }
.coloring.book .sheet .crayon { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.coloring.book .sheet.mode-crayon .crayon { pointer-events: auto; }
.coloring.book .sheet.mode-sticker .page-art, .coloring.book .sheet.mode-crayon .page-art { pointer-events: none; }
.coloring.book .stickers-layer { position: absolute; inset: 0; pointer-events: none; }
.coloring.book .stickers-layer span { position: absolute; width: 11%; aspect-ratio: 1; transform: translate(-50%, -50%); animation: pop .3s; filter: drop-shadow(0 4px 4px rgba(15,43,92,.2)); }
.coloring.book .tools { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.coloring.book .modes { display: flex; gap: 8px; background: #fff; border-radius: 999px; padding: 6px; box-shadow: var(--shadow); }
.coloring.book .mode { width: 54px; height: 54px; border-radius: 50%; padding: 8px; transition: transform .15s, background .15s; }
.coloring.book .mode.on { background: #e0f2fe; box-shadow: 0 0 0 4px #38bdf8; }
.palette { display: grid; grid-template-columns: repeat(2, 52px); gap: 10px; }
.swatch { width: 52px; height: 52px; border-radius: 50%; border: 5px solid #fff; box-shadow: var(--shadow); display: grid; place-items: center; color: var(--navy); }
.swatch.on { outline: 5px solid var(--navy); }
.coloring.book .stickers { display: grid; grid-template-columns: repeat(2, 52px); gap: 10px; }
.coloring.book .stk { width: 52px; height: 52px; border-radius: 16px; background: #fff; padding: 6px; box-shadow: var(--shadow); }
.coloring.book .stk.on { box-shadow: 0 0 0 4px #38bdf8, var(--shadow); }
.page-thumb { width: 100%; height: 100%; display: block; }
.color-tiles .tile.page { justify-content: flex-start; padding-top: 14px; }
.color-tiles .tile.page .pic { height: auto; width: 68%; aspect-ratio: 1; background: #fff; border-radius: 18px; padding: 6px; box-shadow: inset 0 0 0 2px #e2e8f0; }
.color-tiles .tile.page.started .pic { box-shadow: inset 0 0 0 3px #86efac; }
.color-tiles .tile.page h3 { font-size: clamp(1rem, 1.5vw, 1.25rem); }
.color-tiles .tile.special { background: linear-gradient(150deg, #fef3c7, #fde68a); }
.gallery .tile .pic { height: auto; width: 68%; aspect-ratio: 1; background: #fff; border-radius: 18px; padding: 6px; }
@media (max-aspect-ratio: 1/1) { .coloring { grid-template-columns: 1fr; } .coloring.book .sheet { width: min(100%, 52dvh); } .coloring.book .tools { flex-direction: row; flex-wrap: wrap; justify-content: center; }
    .palette, .coloring.book .stickers { grid-template-columns: repeat(8, 44px); justify-content: center; } .swatch, .coloring.book .stk { width: 44px; height: 44px; } }

/* ---------- chat ---------- */
.chat-wrap { flex: 1; display: grid; grid-template-columns: clamp(220px, 26vw, 300px) minmax(0, 1fr); gap: var(--gap); min-height: 0; }
.contacts { display: flex; flex-direction: column; gap: 10px; overflow-y: auto; min-height: 0; }
.contact { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 22px; background: rgba(255,255,255,.75); text-align: left; }
.contact.on { background: #fff; box-shadow: var(--shadow); }
.contact .av { width: 58px; height: 58px; border-radius: 50%; background: var(--c, #e0f2fe); flex: none; overflow: hidden; display: grid; place-items: center; }
.contact .av .art { width: 92%; height: 92%; margin-top: 12%; }
.contact b { display: block; font-size: 1.15rem; color: var(--navy); }
.contact small { color: var(--ink-soft); font-weight: 700; }
.contact .plus { color: var(--navy); } .contact .plus .icon { width: 28px; height: 28px; }
.shield { display: flex; gap: 10px; align-items: center; background: #ecfdf5; color: #047857; border-radius: 18px; padding: 10px 14px; font-weight: 800; font-size: .95rem; }
.shield .icon { width: 26px; height: 26px; }
.convo { display: flex; flex-direction: column; background: rgba(255,255,255,.6); border-radius: 30px; padding: 14px; min-height: 0; min-width: 0; }
.convo-head { display: flex; align-items: center; gap: 12px; padding: 0 6px 10px; flex: none; }
.convo-head .av { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: var(--c); display: grid; place-items: center; }
.convo-head .av .art { width: 92%; height: 92%; margin-top: 12%; }
.convo-head h2 { color: var(--navy); }
.convo-head .note { margin-left: auto; display: flex; align-items: center; gap: 6px; color: var(--ink-soft); font-weight: 800; }
.composer { display: flex; flex-direction: column; gap: 10px; border-top: 2px solid #e2e8f0; padding-top: 12px; flex: none; }
.quick { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.quick button { flex: none; padding: 12px 16px; border-radius: 999px; background: #fff; font-weight: 800; box-shadow: 0 4px 10px rgba(15,43,92,.08); }
.stickers button { width: 62px; height: 62px; padding: 6px; border-radius: 18px; }
.typebox { display: flex; gap: 10px; }
.typebox input { flex: 1; min-width: 0; min-height: 58px; border-radius: 999px; border: 3px solid #e2e8f0; padding: 0 22px; font: 800 1.15rem 'Nunito', sans-serif; -webkit-user-select: text; user-select: text; }
.modal-bg { position: fixed; inset: 0; background: rgba(15,43,92,.35); z-index: 70; display: grid; place-items: center; animation: toastIn .2s; }
.modal { background: #fff; border-radius: 32px; padding: 28px; width: min(92vw, 440px); text-align: center; box-shadow: 0 30px 60px rgba(0,0,0,.25); }
.modal .art { width: 80px; height: 80px; margin: 0 auto; }
.pin { display: grid; grid-template-columns: repeat(3, 80px); gap: 12px; justify-content: center; margin-top: 16px; }
.pin button { height: 70px; border-radius: 22px; background: #f1f5f9; font: 800 1.8rem 'Baloo 2', sans-serif; display: grid; place-items: center; color: var(--navy); }
.pin button .icon { width: 28px; height: 28px; }
@media (max-aspect-ratio: 1/1), (max-width: 760px) {
    .chat-wrap { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .contacts { flex-direction: row; overflow-x: auto; } .contact small, .shield span { display: none; } .contact { flex: none; }
}