/* ═══════════════════════════════════════════════════════════
   NikoLearn — Phase 1 design system
   Warm · child-first · parent-trustworthy
   Three aesthetic directions via [data-theme]
   ═══════════════════════════════════════════════════════════ */

/* iOS fix (owner 2026-06-15 iPhone bug): kill double-tap-to-zoom. In fast games rapid taps were read
   as double-taps, which zoomed the page (screen "resized"), swallowed the next taps (felt frozen, words
   didn't speak) and mis-tapped the voice toggle; a reload reset the zoom and it "recovered". manipulation
   keeps pinch-zoom (accessibility) and panning, only the legacy double-tap gesture is disabled. The
   drawing canvas keeps its own more-specific touch-action:none. */
*{touch-action:manipulation}

/* ---- THEME A: Sunlit (warm cream storybook) — default ---- */
:root,
[data-theme="sunlit"]{
  --bg:        oklch(0.965 0.020 78);
  --bg-tint:   oklch(0.945 0.030 70);
  --card:      oklch(0.995 0.010 85);
  --card-2:    oklch(0.975 0.016 80);
  --ink:       oklch(0.330 0.038 52);
  --muted:     oklch(0.520 0.034 58);
  --faint:     oklch(0.640 0.028 62);
  --line:      oklch(0.895 0.022 72);
  --primary:   oklch(0.685 0.158 42);   /* coral-tangerine */
  --primary-d: oklch(0.585 0.150 40);
  --green:     oklch(0.660 0.135 150);
  --green-d:   oklch(0.560 0.130 150);
  --sky:       oklch(0.685 0.120 238);
  --sky-d:     oklch(0.585 0.120 240);
  --sun:       oklch(0.820 0.150 88);    /* shields / reward */
  --sun-d:     oklch(0.720 0.150 80);
  --purple:    oklch(0.620 0.150 300);
  --red:       oklch(0.620 0.170 25);
  --radius:    20px;
  --radius-sm: 13px;
  --shadow:    0 1px 2px oklch(0.40 0.04 55 / .06), 0 8px 22px oklch(0.45 0.05 55 / .10);
  --shadow-lg: 0 2px 6px oklch(0.40 0.04 55 / .08), 0 20px 44px oklch(0.45 0.05 55 / .16);
  --press:     0 4px 0;
}

/* ---- THEME B: Playground (bright, punchy, energetic) ---- */
[data-theme="playground"]{
  --bg:        oklch(0.975 0.012 235);
  --bg-tint:   oklch(0.945 0.030 230);
  --card:      oklch(1 0 0);
  --card-2:    oklch(0.975 0.012 230);
  --ink:       oklch(0.285 0.045 262);
  --muted:     oklch(0.500 0.045 258);
  --faint:     oklch(0.620 0.040 256);
  --line:      oklch(0.905 0.020 250);
  --primary:   oklch(0.640 0.195 26);    /* punchy coral-red */
  --primary-d: oklch(0.550 0.190 25);
  --green:     oklch(0.700 0.165 150);
  --green-d:   oklch(0.590 0.160 150);
  --sky:       oklch(0.655 0.165 245);
  --sky-d:     oklch(0.560 0.165 248);
  --sun:       oklch(0.820 0.165 86);
  --sun-d:     oklch(0.720 0.165 78);
  --purple:    oklch(0.600 0.180 300);
  --red:       oklch(0.610 0.195 25);
  --radius:    24px;
  --radius-sm: 16px;
  --shadow:    0 2px 3px oklch(0.40 0.06 250 / .07), 0 10px 26px oklch(0.45 0.08 250 / .13);
  --shadow-lg: 0 3px 8px oklch(0.40 0.06 250 / .10), 0 24px 50px oklch(0.45 0.10 250 / .20);
  --press:     0 5px 0;
}

/* ---- THEME C: Calm (soft, premium, not babyish) ---- */
[data-theme="calm"]{
  --bg:        oklch(0.960 0.006 250);
  --bg-tint:   oklch(0.935 0.010 250);
  --card:      oklch(0.992 0.004 250);
  --card-2:    oklch(0.972 0.006 250);
  --ink:       oklch(0.305 0.022 262);
  --muted:     oklch(0.520 0.020 258);
  --faint:     oklch(0.640 0.016 256);
  --line:      oklch(0.900 0.010 252);
  --primary:   oklch(0.585 0.105 248);   /* calm confident blue */
  --primary-d: oklch(0.500 0.100 248);
  --green:     oklch(0.620 0.075 162);
  --green-d:   oklch(0.530 0.072 162);
  --sky:       oklch(0.640 0.080 232);
  --sky-d:     oklch(0.550 0.080 234);
  --sun:       oklch(0.790 0.090 84);
  --sun-d:     oklch(0.690 0.092 78);
  --purple:    oklch(0.560 0.090 295);
  --red:       oklch(0.580 0.130 25);
  --radius:    15px;
  --radius-sm: 11px;
  --shadow:    0 1px 2px oklch(0.40 0.02 255 / .05), 0 6px 18px oklch(0.45 0.03 255 / .08);
  --shadow-lg: 0 2px 5px oklch(0.40 0.02 255 / .07), 0 16px 38px oklch(0.45 0.03 255 / .13);
  --press:     0 3px 0;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
svg{width:18px;height:18px;flex:none;vertical-align:middle}
html,body{height:100%}
body{
  font-family:'FiraGO','Noto Sans Georgian',system-ui,sans-serif;
  background:
    radial-gradient(120% 80% at 50% -10%, var(--bg-tint), transparent 60%),
    var(--bg);
  color:var(--ink);
  font-size:17px;line-height:1.45;
  display:flex;align-items:center;justify-content:center;
  min-height:100dvh;padding:0;
  overflow:hidden;
}
.num,.en{font-family:'Fredoka',sans-serif}
.brand .mark{font-family:'FiraGO',sans-serif}

/* ── DEVICE STAGE (responsive: full-bleed phone → floating card on big screens) ── */
.stage{
  width:100%;height:100dvh;display:flex;align-items:center;justify-content:center;
}
.device{
  position:relative;width:100%;max-width:none;height:100dvh;
  background:var(--bg);overflow:hidden;display:flex;flex-direction:column;
}
@media (min-width:720px){
  .stage{
    background:
      radial-gradient(140% 100% at 50% 0%, var(--bg-tint), transparent 55%),
      var(--bg);
    padding:28px;
  }
  .device{
    max-width:430px;height:min(900px,94dvh);
    border-radius:42px;box-shadow:var(--shadow-lg), 0 0 0 10px oklch(0.30 0.02 60 / .82), 0 0 0 12px oklch(0.45 0.03 60 / .30);
  }
}

/* ── APP SCROLL AREA ── */
.app{flex:1;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;
  padding:clamp(16px,4.5vw,22px);padding-bottom:96px;-webkit-overflow-scrolling:touch}
.app::-webkit-scrollbar{width:0}
.screen{flex:1;display:flex;flex-direction:column;animation:rise .32s cubic-bezier(.2,.8,.25,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hidden{display:none!important}

/* ── TYPE ── */
h1,h2,h3{line-height:1.15;letter-spacing:-0.01em}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ── TOP BAR ── */
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:18px;min-height:48px}
.iconbtn{width:46px;height:46px;flex:0 0 auto;border:none;background:var(--card);color:var(--ink);
  border-radius:14px;font-size:1.3rem;cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--shadow);transition:transform .15s}
.iconbtn:active{transform:scale(.92)}
.topbar .who{font-weight:700;font-size:1.05rem;flex:1}
.topbar .who small{display:block;font-weight:500;color:var(--muted);font-size:.78rem}

/* score chips */
.chips{display:flex;gap:8px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:999px;
  font-weight:700;font-size:.92rem;background:var(--card);box-shadow:var(--shadow)}
.chip.shield{color:var(--sun-d)}
.chip.streak{color:var(--primary-d)}
.chip svg{width:18px;height:18px}

/* ── WORDMARK / HOME ── */
.home{justify-content:center;gap:clamp(18px,4vw,26px);text-align:center;padding:8px 0 0}
.brand{display:flex;flex-direction:column;align-items:center;gap:10px}
.brand .mark{font-family:'FiraGO',sans-serif;font-weight:700;font-size:clamp(1.85rem,7.5vw,2.4rem);letter-spacing:-.02em;
  display:flex;align-items:center;gap:10px}
.brand .mark .dot{width:14px;height:14px;border-radius:50%;background:var(--primary);
  box-shadow:0 0 0 5px color-mix(in oklch,var(--primary) 22%,transparent)}
.brand .tag{color:var(--muted);font-size:clamp(.88rem,3.6vw,1rem);font-weight:500;text-wrap:balance;max-width:300px}
.brand .sun-badge{width:64px;height:64px;border-radius:22px;background:linear-gradient(150deg,var(--sun),var(--sun-d));
  display:grid;place-items:center;box-shadow:var(--shadow);margin-bottom:2px}
.brand .sun-badge svg{width:38px;height:38px}

/* ── HERO (landing / login) ── */
.hero-h{font-family:'FiraGO',sans-serif;font-weight:700;line-height:1.14;text-wrap:balance;
  font-size:clamp(1.5rem,6.2vw,2.05rem);max-width:340px;margin:0 auto;
  background:linear-gradient(118deg,var(--primary-d),var(--sun-d) 72%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{color:var(--muted);font-size:clamp(.92rem,3.8vw,1.02rem);max-width:330px;margin:0 auto;
  text-wrap:balance;line-height:1.5}

/* ── LANDING PAGE (real marketing landing: desktop + mobile) ── */
.brand-btn{cursor:pointer}
.brand-btn:active{transform:scale(.98)}
.landing{gap:0;padding:0 0 20px;align-items:stretch;text-align:center}
.lp-hero{display:flex;flex-direction:column;align-items:center;gap:13px;padding:26px 18px 28px;
  background:radial-gradient(120% 95% at 50% -20%, color-mix(in oklch,var(--sun) 32%,var(--card)), transparent 62%)}
.lp-badge{width:88px;height:88px}
.lp-title{font-family:'FiraGO',sans-serif;font-weight:700;font-size:1.45rem;letter-spacing:-.02em}
.lp-headline{font-family:'FiraGO',sans-serif;font-weight:700;line-height:1.12;text-wrap:balance;max-width:15ch;
  font-size:clamp(1.85rem,7vw,2.7rem);
  background:linear-gradient(118deg,var(--primary-d),var(--sun-d) 72%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lp-sub{color:var(--muted);font-size:clamp(.95rem,3.8vw,1.1rem);max-width:44ch;margin:0 auto;line-height:1.55;text-wrap:balance}
.lp-cta{margin-top:8px;font-size:1.12rem;padding:16px 32px}
.lp-cta.wide{display:flex;margin:10px auto 6px;width:calc(100% - 36px);max-width:380px}
.lp-note{display:inline-flex;align-items:center;gap:7px;color:var(--green-d);font-size:.8rem;font-weight:600}
.lp-note svg{width:15px;height:15px}
.lp-section{padding:20px 18px 4px}
.lp-h2{font-family:'FiraGO',sans-serif;font-weight:700;font-size:1.2rem;margin-bottom:14px;text-wrap:balance}
.lp-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:960px;margin:0 auto}
.lp-card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:18px 14px;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center}
.lp-ic{font-size:2.5rem;line-height:1}
.lp-ct{font-weight:700;font-size:1.06rem}
.lp-cs{font-size:.82rem;color:var(--muted);line-height:1.42;text-wrap:balance}
body.on-landing #app{padding:0;padding-bottom:24px}
@media (min-width:720px){
  body.on-landing .stage{padding:0}
  body.on-landing .device{max-width:none;width:100%;height:100dvh;border-radius:0;box-shadow:none}
  .landing .lp-grid{grid-template-columns:repeat(4,1fr)}
  .lp-hero{padding:54px 24px 44px}
  .lp-section{padding:30px 24px 6px}
  .lp-headline{font-size:clamp(2.4rem,4.5vw,3.4rem)}
  .lp-sub{font-size:1.15rem}
}

.profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;width:100%;max-width:380px;margin:0 auto}
.pcard{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  padding:18px 14px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:9px;
  box-shadow:var(--shadow);transition:transform .16s, border-color .16s;position:relative}
.pcard-del{position:absolute;top:8px;right:8px;width:40px;height:40px;border:none;border-radius:11px;
  background:color-mix(in oklch,var(--card-2) 80%,transparent);color:var(--muted);font-size:1rem;cursor:pointer;
  display:grid;place-items:center;opacity:.6;transition:all .14s;z-index:2}
.pcard-del:hover{opacity:1;background:color-mix(in oklch,var(--red) 12%,var(--card));color:var(--red)}
.pcard-del:active{transform:scale(.9)}
.pcard:active{transform:translateY(2px) scale(.985)}
.pcard:hover{border-color:color-mix(in oklch,var(--primary) 55%,var(--line))}
.avatar{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;
  font-family:'Fredoka';font-weight:600;font-size:1.7rem;color:#fff;position:relative}
.avatar.a-niko{background:linear-gradient(150deg,var(--sky),var(--sky-d))}
.avatar.a-sky{background:linear-gradient(150deg,var(--sky),var(--sky-d))}
.avatar.a-primary{background:linear-gradient(150deg,var(--primary),var(--primary-d))}
.avatar.a-green{background:linear-gradient(150deg,var(--green),var(--green-d))}
.avatar.a-sun{background:linear-gradient(150deg,var(--sun),var(--sun-d))}
.avatar.a-purple{background:linear-gradient(150deg,var(--purple),oklch(0.50 0.13 300))}
.avatar.add-av{background:linear-gradient(150deg,var(--sky),var(--sky-d));color:#fff;border:none;font-weight:600}
.pcard.add{flex-direction:row;justify-content:center;gap:11px;background:var(--card);border-style:solid}
.pcard.add .avatar{width:42px;height:42px;border-radius:14px;font-size:1.3rem}
.pcard.add .pname{font-size:.98rem;color:var(--ink)}
.age-row{display:flex;flex-wrap:wrap;gap:8px}
.age-chip{width:46px;height:46px;border-radius:13px;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:1.1rem;font-weight:600;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s}
.age-chip:active{transform:scale(.93)}
.age-chip.on{background:var(--primary);color:#fff;border-color:var(--primary)}
.color-row{display:flex;gap:12px}
.color-dot{width:44px;height:44px;border-radius:50%;border:3px solid transparent;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s}
.color-dot.on{border-color:var(--ink);transform:scale(1.07)}
.color-dot.a-sky{background:var(--sky)}
.color-dot.a-primary{background:var(--primary)}
.color-dot.a-green{background:var(--green)}
.color-dot.a-sun{background:var(--sun)}
.color-dot.a-purple{background:var(--purple)}
.avatar.a-masho{background:linear-gradient(150deg,var(--primary),var(--primary-d))}
.avatar.a-guest{background:linear-gradient(150deg,var(--green),var(--green-d))}
.avatar.a-parent{background:linear-gradient(150deg,var(--purple),oklch(0.50 0.13 300))}
.pcard .pname{font-weight:700;font-size:1.08rem}
.pcard .page{color:var(--muted);font-size:.82rem;margin-top:-4px}
.pcard .pmeta{font-size:.76rem;color:var(--faint);font-weight:600;display:flex;gap:8px;align-items:center}
.pcard.parent{flex-direction:row;justify-content:center;gap:11px;background:var(--card-2)}
.pcard.parent .avatar{width:42px;height:42px;border-radius:14px;font-size:1.1rem}
.pcard.parent .pname{font-size:.98rem}
/* cold-start demo card: the primary, inviting action for a brand-new visitor (play now, no profile) */
.pcard.demo{flex-direction:row;justify-content:center;gap:13px;
  background:linear-gradient(150deg,color-mix(in oklch,var(--green) 14%,var(--card)),var(--card));
  border:2px solid color-mix(in oklch,var(--green) 55%,var(--line))}
.pcard.demo:hover{border-color:var(--green)}
.pcard.demo .avatar{width:48px;height:48px;border-radius:15px;font-size:1.5rem}
/* entry cards (owner 2026-06-25): icon pinned LEFT (icons line up across all 3), text centered */
.pcard.demo,.pcard.add,.pcard.parent{justify-content:flex-start}
.pcard.demo>div:last-child,.pcard.add>div:last-child,.pcard.parent>div:last-child{flex:1;text-align:center}
.pcard.demo .pmeta,.pcard.add .pmeta,.pcard.parent .lockwrap{justify-content:center}
.pcard.demo .pname{font-size:1.12rem;color:var(--green-d)}
.pcard.demo .pmeta{color:var(--muted)}
.lockwrap{display:flex;align-items:center;gap:6px;color:var(--faint);font-size:.74rem;margin-top:2px}
.lockwrap svg{width:13px;height:13px}
.pmeta svg{width:13px;height:13px}
.mic svg{width:34px;height:34px}
.perm-ico svg{width:42px;height:42px;stroke:#fff}
.v-ava svg{width:42px;height:42px}

.trustline{display:inline-flex;align-items:center;gap:7px;margin:6px auto 0;padding:8px 14px;
  border-radius:999px;background:color-mix(in oklch,var(--green) 12%,var(--card));
  color:var(--green-d);font-size:.78rem;font-weight:600;box-shadow:var(--shadow)}
.trustline svg{width:15px;height:15px}

/* ── LEVEL BANNER ── */
.levelcard{background:var(--card);border-radius:var(--radius);padding:15px 17px;box-shadow:var(--shadow);margin-bottom:16px}
.levelcard .lvl-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.rankpill{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.96rem}
.rankpill .rk{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--sun),var(--sun-d));color:#fff;font-size:1rem}
.levelcard .lvl-num{font-size:.78rem;color:var(--muted);font-weight:600}
.bar{height:11px;background:var(--card-2);border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 2px oklch(0 0 0 /.06)}
.bar > i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--sun),var(--primary));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.levelcard .lvl-hint{font-size:.76rem;color:var(--muted);margin-top:8px}

/* ── SUBJECT CARDS ── */
.subj-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;flex:1;align-content:start}
.subj{position:relative;border:1.5px solid var(--line);border-radius:var(--radius);padding:20px 16px;
  cursor:pointer;display:flex;flex-direction:column;gap:8px;min-height:150px;justify-content:flex-end;
  background:var(--card);box-shadow:var(--shadow);overflow:hidden;transition:transform .16s}
.subj:active{transform:translateY(2px) scale(.985)}
/* tap cue (owner 2026-06-13): gentle pulsing ring + a bobbing 👆 so a pre-reader sees the tiles are tappable.
   staggered so they don't all pulse in unison; off for reduced-motion. */
@keyframes tapcue{0%,100%{box-shadow:var(--shadow)}50%{box-shadow:0 0 0 3px color-mix(in oklch,var(--primary) 20%,transparent),var(--shadow)}}
.subj.stack,.subj.play{animation:tapcue 3.4s ease-in-out infinite}
.subj.stack:nth-child(2n){animation-delay:.6s}
.subj.stack:nth-child(3n){animation-delay:1.2s}
.subj .tap-hint{position:absolute;bottom:8px;right:10px;font-size:1.2rem;animation:taphint 2.2s ease-in-out infinite;pointer-events:none;opacity:.9}
@keyframes taphint{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(prefers-reduced-motion:reduce){.subj.stack,.subj.play{animation:none}.subj .tap-hint{animation:none}}
.subj .s-ico{font-size:2.4rem;line-height:1}
.subj .s-name{font-weight:700;font-size:1.12rem}
.subj .s-sub{font-size:.78rem;color:var(--muted)}
.subj .s-badge{position:absolute;top:12px;right:12px;font-size:.72rem;font-weight:700;
  padding:4px 9px;border-radius:999px;background:var(--card-2);color:var(--faint)}
.subj.crown{border-color:color-mix(in oklch,var(--sun) 60%,var(--line));
  background:linear-gradient(160deg,var(--card) 55%,color-mix(in oklch,var(--sun) 18%,var(--card)))}
.subj.crown .s-badge{background:color-mix(in oklch,var(--sun) 22%,var(--card));color:var(--sun-d)}
.subj.eng{border-color:color-mix(in oklch,var(--sky) 45%,var(--line));
  background:linear-gradient(160deg,var(--card) 60%,color-mix(in oklch,var(--sky) 13%,var(--card)))}
.subj.maths{border-color:color-mix(in oklch,var(--purple) 42%,var(--line));
  background:linear-gradient(160deg,var(--card) 60%,color-mix(in oklch,var(--purple) 12%,var(--card)))}
.subj.kids{align-items:center;justify-content:center;text-align:center;min-height:130px}
.subj.kids .s-ico{font-size:3rem}
.subj.kids .s-name{font-family:'Fredoka';font-size:1.5rem}

/* ── MODE GRID ── */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.mode{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:16px 12px;min-height:104px;cursor:pointer;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;
  text-align:center;box-shadow:var(--shadow);transition:transform .15s,border-color .15s}
.mode:active{transform:translateY(2px) scale(.97)}
.mode:hover{border-color:color-mix(in oklch,var(--primary) 50%,var(--line))}
.mode .m-ico{font-size:1.9rem;line-height:1}
.mode .m-name{font-weight:700;font-size:.95rem}
.mode .m-sub{font-size:.71rem;color:var(--muted)}
.mode.wide{grid-column:span 2;flex-direction:row;justify-content:flex-start;text-align:left;gap:13px;padding:16px 18px}
.mode.wide .m-ico{font-size:2.2rem}
.mode.feature{grid-column:span 2;flex-direction:row;justify-content:flex-start;text-align:left;gap:14px;padding:18px;
  border:none;color:#fff;background:linear-gradient(135deg,var(--sun-d),var(--primary))}
.mode.feature .m-sub{color:#fff;opacity:.9}
.mode.feature .m-ico{font-size:2.3rem}
.mode .kids-ico{font-size:3rem}

/* ── GAME ── */
.progress-row{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.progress-row .bar{flex:1}
.q-count{font-size:.82rem;font-weight:700;color:var(--muted);font-family:'Fredoka'}
.game{flex:1;display:flex;flex-direction:column;gap:14px}
.prompt{background:var(--card);border-radius:var(--radius);padding:26px 20px;text-align:center;
  box-shadow:var(--shadow);position:relative}
.prompt .p-emoji{font-size:4.2rem;line-height:1;margin-bottom:8px}
.prompt .p-word{font-size:2rem;font-weight:700}
.prompt .p-word.en{font-family:'Fredoka';font-weight:500}
.prompt .p-sub{color:var(--muted);font-size:.92rem;margin-top:4px}
/* listen button: was only ~34px tall = hard for a small finger to hit (owner bug 2026-06-13). Now a
   comfortable ≥48px finger target with bigger text + icon. */
.speakbtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;margin-top:14px;padding:15px 28px;
  min-height:54px;border:none;border-radius:999px;background:color-mix(in oklch,var(--sky) 15%,var(--card));
  color:var(--sky-d);font-weight:700;font-size:1.08rem;cursor:pointer;font-family:inherit}
.speakbtn svg{width:22px;height:22px}
/* listen mode: large round „tap to hear" button so it reads clearly as the main action (owner 2026-06-13) */
.listen-cta{display:grid;place-items:center;width:64px;height:64px;margin:6px auto 2px;border:none;border-radius:50%;
  background:color-mix(in oklch,var(--sky) 22%,var(--card));color:var(--sky-d);cursor:pointer;
  box-shadow:0 4px 14px color-mix(in oklch,var(--sky) 30%,transparent);transition:transform .12s}
.listen-cta svg{width:30px;height:30px}
.listen-cta:active{transform:scale(.93)}
/* draw a pre/non-reader's eye to the "tap to hear" button on first paint (autoplay is often blocked
   on a cold load, so a child who can't read the English needs an obvious way to get the audio). */
@keyframes listenpulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 color-mix(in oklch,var(--sky) 45%,transparent)}50%{transform:scale(1.06);box-shadow:0 0 0 10px transparent}}
.pulse-hint{animation:listenpulse 1.1s ease-in-out 3}
@media(prefers-reduced-motion:reduce){.pulse-hint{animation:none}}
.speakbtn:active{transform:scale(.95)}
/* speaking self-check: the model answer card revealed after the child says their own answer (2026-06-23) */
.speak-model{margin:14px auto 2px;max-width:340px;padding:14px 16px;border-radius:16px;
  background:color-mix(in oklch,var(--mint,#34d399) 13%,var(--card));border:1.5px dashed color-mix(in oklch,var(--mint,#34d399) 40%,transparent)}
.speak-model .sm-label{font-size:.86rem;color:var(--muted);font-weight:700;margin-bottom:5px}
.speak-model .sm-en{font-size:1.12rem;font-weight:700;color:var(--ink);line-height:1.3}
.speak-model .speakbtn{margin-top:11px;min-height:46px;padding:10px 20px;font-size:.98rem}
/* optional record→playback (hear your own voice). Privacy note always visible in idle state (2026-06-23) */
.srbox{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin:12px auto 0;max-width:340px}
.srbtn{display:inline-flex;align-items:center;gap:7px;min-height:46px;padding:10px 18px;border:none;border-radius:999px;
  background:color-mix(in oklch,var(--sky) 14%,var(--card));color:var(--sky-d);font-weight:700;font-size:.98rem;cursor:pointer;font-family:inherit}
.srbtn:active{transform:scale(.95)}
.srbtn.ghost{background:transparent;border:1.5px solid color-mix(in oklch,var(--sky) 35%,transparent)}
.srbtn.rec{background:color-mix(in oklch,#ef4444 16%,var(--card));color:#b91c1c}
.srdot{width:10px;height:10px;border-radius:50%;background:#ef4444;display:inline-block;animation:srpulse 1s infinite}
@keyframes srpulse{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.srdot{animation:none}}
.sr-priv{flex-basis:100%;text-align:center;font-size:.8rem;color:var(--muted);line-height:1.35;margin-top:2px}
/* ── Kings faithful EXAM (sectioned, real format) — owner 2026-06-24 ── */
.kx-pts{font-size:.72rem;font-weight:700;color:var(--sun-d,#b8860b);background:color-mix(in oklch,var(--sun,#f5c518) 20%,var(--card));border-radius:999px;padding:2px 9px;margin-left:6px;vertical-align:middle}
.kx-big{font-size:4.6rem;font-weight:800;line-height:1;color:var(--ink);margin:4px 0;font-family:'Fredoka',system-ui,sans-serif}
.kx-word{font-size:1.9rem;font-weight:700;letter-spacing:1px}
.kx-word u,.prompt u{text-decoration:none;border-bottom:3px solid color-mix(in oklch,var(--sky) 60%,transparent);padding:0 2px}
.kx-seq{font-size:1.04rem;font-weight:700;letter-spacing:1px;line-height:1.7;word-spacing:5px;color:var(--ink);max-width:330px;margin:4px auto}
.opt.kx-opt{font-size:1.5rem;font-weight:800}
.screen.kx-result{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:0}
.kx-card{background:#fff;border:1.5px solid color-mix(in oklch,var(--line) 80%,transparent);border-radius:24px;padding:28px 22px;max-width:340px;width:92%;text-align:center;box-shadow:0 14px 36px color-mix(in oklch,var(--ink) 16%,transparent)}
.kx-trophy{font-size:3rem;line-height:1}
.kx-title{font-weight:700;font-size:1.05rem;color:var(--ink);margin-top:4px}
.kx-score{font-size:3.4rem;font-weight:800;color:var(--green-d,#1a7a3a);margin:8px 0 0;font-family:'Fredoka',system-ui,sans-serif}
.kx-score span{font-size:1.3rem;color:var(--muted);font-weight:700}
.kx-bonus{font-size:.9rem;color:var(--sun-d,#b8860b);font-weight:700;margin-top:2px}
.kx-msg{font-size:1rem;color:var(--ink);margin:10px 0 16px}
.kx-mq{font-size:1.12rem;font-weight:600;line-height:1.55;color:var(--ink);max-width:330px;margin:6px auto;text-align:center}

.options{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.opt{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:18px 12px;font-size:1.18rem;font-weight:600;cursor:pointer;font-family:inherit;color:var(--ink);
  min-height:74px;display:flex;align-items:center;justify-content:center;gap:7px;text-align:center;
  box-shadow:var(--shadow);transition:transform .12s,border-color .15s,background .15s}
.opt.en{font-family:'Fredoka';font-weight:500}
.opt.emoji{font-size:2.7rem;min-height:92px}
/* YLE yes/no (tick) + story reading — owner 2026-06-22 */
.yn-opts .opt{font-size:1.35rem;min-height:84px;font-weight:700}
.opt.yn-yes{border-color:color-mix(in oklch,var(--green) 45%,var(--line));background:color-mix(in oklch,var(--green) 8%,var(--card))}
.opt.yn-no{border-color:color-mix(in oklch,var(--red) 40%,var(--line));background:color-mix(in oklch,var(--red) 7%,var(--card))}
.story-text{background:var(--card-2);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px;
  font-size:1.18rem;line-height:1.6;color:var(--ink);text-align:left;margin:4px 0 8px}
/* Kings YLE level ladder selector — owner 2026-06-22 */
.klevel-bar{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin:2px 0 12px}
.klevel{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:48px;padding:11px 4px;border:1.5px solid var(--line);
  border-radius:12px;background:var(--card);color:var(--muted);cursor:pointer;font-family:inherit;box-shadow:var(--shadow);transition:all .14s}
.klevel b{font-size:.92rem;font-family:'Fredoka';font-weight:600}
.klevel small{font-size:.7rem}
.klevel:active{transform:scale(.96)}
.klevel.on{background:color-mix(in oklch,var(--primary) 14%,var(--card));border-color:var(--primary);color:var(--primary-d)}
/* post-demo conversion nudge on the guest results screen — owner 2026-06-23 */
.guest-nudge{background:linear-gradient(150deg,color-mix(in oklch,var(--green) 12%,var(--card)),var(--card));
  border:1.5px solid color-mix(in oklch,var(--green) 40%,var(--line));border-radius:14px;padding:12px 16px;
  margin:6px 0 12px;font-size:.96rem;font-weight:600;color:var(--ink);text-align:center;line-height:1.45}
/* Kings Pattern strand — learn-mode RULE reveal on a miss (teaching, not just testing) — owner 2026-06-23 */
.pat-rule{margin-top:14px;background:#fff8ee;border:1.5px solid #ffe2bd;border-radius:14px;padding:11px 15px;
  font-size:.96rem;line-height:1.5;color:#6b5640;animation:pop .34s}
/* Exam-rehearsal Test Room header (timer + progress) — owner 2026-06-23 */
.exam-top{background:color-mix(in oklch,var(--sun) 16%,var(--card));border:1.5px solid color-mix(in oklch,var(--sun) 45%,var(--line));
  border-radius:12px;padding:8px 14px;margin-bottom:12px;font-size:.92rem;font-weight:700;color:var(--ink);text-align:center}
.exam-top #examclock{color:var(--red);font-variant-numeric:tabular-nums}
.opt:active{transform:scale(.96)}
.opt.correct{border-color:var(--green);background:color-mix(in oklch,var(--green) 16%,var(--card));color:var(--green-d);animation:pop .34s}
.opt.wrong{border-color:var(--red);background:color-mix(in oklch,var(--red) 12%,var(--card));animation:shake .34s}
/* v1.232: bake a ✓/✗ glyph into the option itself so right/wrong isn't conveyed by COLOUR alone
   (color-blind-safe + clearer for a pre-reader). Corner badge, doesn't shift the option's layout. */
.opt.correct,.opt.wrong{position:relative}
.opt.correct::after,.opt.wrong::after{position:absolute;top:5px;right:8px;font-size:1rem;font-weight:900;line-height:1}
.opt.correct::after{content:'✓';color:var(--green-d)}
.opt.wrong::after{content:'✗';color:var(--red)}
.opt.dim{opacity:.42;pointer-events:none}
@keyframes pop{0%{transform:scale(1)}45%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* full-width option list (Kings) */
.opt-list{display:flex;flex-direction:column;gap:10px}
/* Kings full-width options were noticeably smaller than the 2-col grid cards (58px / 1.02rem vs 74px /
   1.18rem) — owner 2026-06-13. Bring them up to a comparable, comfortable size. (Global: all .opt-list.) */
.opt-list .opt{min-height:70px;justify-content:flex-start;text-align:left;font-size:1.14rem;padding:16px 20px}

/* spelling */
.spell-input{width:100%;padding:18px;font-size:1.4rem;text-align:center;background:var(--card);
  border:1.5px solid var(--line);border-radius:var(--radius-sm);color:var(--ink);font-family:'Fredoka';
  outline:none;letter-spacing:3px;box-shadow:var(--shadow)}
.spell-input:focus{border-color:var(--sky)}

/* match — two columns: Georgian ↔ English */
.match-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.match-col{display:flex;flex-direction:column;gap:10px}
.match-head{font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--muted);text-align:center;margin-bottom:2px}
.match-head.en{font-family:'Fredoka'}
.mtile{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius-sm);padding:16px 10px;
  text-align:center;font-size:1.05rem;font-weight:600;cursor:pointer;min-height:62px;display:flex;
  align-items:center;justify-content:center;box-shadow:var(--shadow);transition:transform .12s, background .12s}
.mtile.en{font-family:'Fredoka';font-weight:500}
.mtile:active{transform:scale(.96)}
.mtile.sel{border-color:var(--sky-d);background:linear-gradient(150deg,var(--sky),var(--sky-d));color:#fff;box-shadow:var(--shadow-lg);transform:scale(1.03)}
.mtile.done{border-color:var(--green);background:color-mix(in oklch,var(--green) 16%,var(--card));opacity:.45;pointer-events:none}
.mtile.bad{animation:shake .3s;border-color:var(--red)}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:1.05rem;border-radius:var(--radius-sm);padding:15px 26px;
  min-height:56px;transition:transform .12s;box-shadow:var(--shadow)}
.btn:active{transform:translateY(2px)}
.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--press) var(--primary-d),var(--shadow)}
.btn-primary:active{box-shadow:0 0 var(--primary-d),var(--shadow)}
.btn-sun{background:var(--sun-d);color:#fff;box-shadow:var(--press) oklch(0.62 0.15 70),var(--shadow)}
.btn-sky{background:var(--sky);color:#fff;box-shadow:var(--press) var(--sky-d),var(--shadow)}
.btn-ghost{background:var(--card);color:var(--ink)}
.btn-block{width:100%}
.btn-row{display:flex;gap:10px}
.btn-row .btn{flex:1}

/* ── FEEDBACK OVERLAY ── */
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:oklch(0.97 0.02 78 / .80);
  backdrop-filter:blur(3px);z-index:50;animation:fade .2s}
[data-theme="playground"] .overlay{background:oklch(0.97 0.012 235 /.82)}
[data-theme="calm"] .overlay{background:oklch(0.96 0.006 250 /.82)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.fb{text-align:center;animation:rise .3s}
.fb .fb-ico{font-size:4.6rem}
.fb .fb-ico .owl-face{display:inline-block;animation:bob 2.4s ease-in-out infinite}
.fb .fb-txt{font-size:1.5rem;font-weight:700;margin-top:6px}
.fb .fb-sub{color:var(--muted);margin-top:4px}

/* confetti */
.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.confetti i{position:absolute;top:-12px;width:9px;height:13px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(120vh) rotate(540deg);opacity:.2}}

/* ── RESULTS ── */
.results{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}
.results .r-owl{margin-bottom:-6px;line-height:1;animation:bob 2.4s ease-in-out infinite}
.results .r-owl .owl-face{display:inline-block}
.results .r-ring{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;
  font-size:3.4rem;background:conic-gradient(var(--sun) var(--pct,70%),var(--card-2) 0);box-shadow:var(--shadow)}
.results .r-ring i{width:96px;height:96px;border-radius:50%;background:var(--card);display:grid;place-items:center;font-style:normal}
.results h2{font-size:1.45rem}
.stat-row{display:flex;gap:14px}
.stat{background:var(--card);border-radius:var(--radius-sm);padding:12px 16px;box-shadow:var(--shadow);min-width:78px}
.stat .v{font-size:1.7rem;font-weight:700;font-family:'Fredoka'}
.stat .l{font-size:.7rem;color:var(--muted);font-weight:600;margin-top:2px}
.beat{font-size:.86rem;font-weight:700;padding:9px 16px;border-radius:999px}
.beat.up{color:var(--green-d);background:color-mix(in oklch,var(--green) 13%,var(--card))}
.beat.same{color:var(--sky-d);background:color-mix(in oklch,var(--sky) 13%,var(--card))}
.beat.down{color:var(--primary-d);background:color-mix(in oklch,var(--primary) 12%,var(--card))}
.results .actions{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px;margin-top:4px}

/* ── BOTTOM NAV ── */
.bottomnav{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-around;
  align-items:center;padding:9px 8px calc(9px + env(safe-area-inset-bottom));
  background:color-mix(in oklch,var(--card) 88%,transparent);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);z-index:40}
.bottomnav button{background:none;border:none;cursor:pointer;color:var(--faint);font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 14px;
  min-height:44px;border-radius:13px;font-size:.62rem;font-weight:700;transition:color .15s,background .15s}
.bottomnav button svg{width:23px;height:23px}
.bottomnav button.on{color:var(--primary)}
.bottomnav button.on .navdot{opacity:1}
.navdot{width:5px;height:5px;border-radius:50%;background:var(--primary);opacity:0;margin-top:1px}
/* language toggle living inside the footer (owner 2026-06-19) — no longer a floating top-right overlay.
   Pill shape so it reads as a setting, distinct from the 4 nav icons; ≥44px tap target for small fingers. */
.bottomnav .langtgl-foot{background:none;border:1.5px solid var(--line);color:var(--muted);
  font-family:inherit;font-weight:800;font-size:.68rem;letter-spacing:.02em;min-height:44px;min-width:46px;
  padding:6px 12px;border-radius:13px;cursor:pointer;transition:color .15s,border-color .15s,transform .1s}
.bottomnav .langtgl-foot:hover{border-color:color-mix(in oklch,var(--primary) 55%,var(--line));color:var(--ink)}
.bottomnav .langtgl-foot:active{transform:scale(.94) translateY(1px);border-color:color-mix(in oklch,var(--primary) 55%,var(--line))}
/* slim mode (in-game): keep the 44px tap floor, only trim padding/text (do NOT drop min-height) */
.bottomnav.slim .langtgl-foot{font-size:.66rem;padding:4px 10px}

/* ── AI TUTOR ── */
.ai-fab{position:absolute;right:16px;bottom:84px;width:58px;height:58px;border-radius:20px;border:none;
  cursor:pointer;background:linear-gradient(150deg,var(--sky),var(--purple));color:#fff;font-size:1.7rem;
  display:grid;place-items:center;box-shadow:var(--shadow-lg);z-index:45;transition:transform .15s}
.ai-fab:active{transform:scale(.92)}
.ai-fab .ping{position:absolute;inset:0;border-radius:20px;animation:ping 2.6s ease-out infinite;
  box-shadow:0 0 0 0 color-mix(in oklch,var(--sky) 60%,transparent)}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--sky) 55%,transparent)}70%,100%{box-shadow:0 0 0 16px transparent}}

/* idle-help nudge (v1.232): soft, dismissible "need help?" the owl offers when a child sits stuck.
   Sits just above the floating tutor button; never blocks the question; auto-fades if ignored. */
.idle-hint{position:absolute;right:16px;bottom:150px;z-index:46;animation:rise .3s;max-width:210px}
.idle-hint-btn{background:var(--card);border:1.5px solid color-mix(in oklch,var(--sky) 38%,var(--line));
  color:var(--ink);font-family:inherit;font-weight:700;font-size:.9rem;padding:11px 15px;border-radius:16px;
  box-shadow:var(--shadow-lg);cursor:pointer;min-height:48px;line-height:1.2}
.idle-hint-btn:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){.idle-hint{animation:none}}

/* streak chip inside the win feedback (v1.232) */
.fb-streak{margin-top:9px;font-weight:800;font-size:1rem;color:var(--primary-d);
  background:color-mix(in oklch,var(--sun) 24%,var(--card));border-radius:13px;padding:5px 14px;animation:pop .34s}
@media (prefers-reduced-motion:reduce){.fb-streak{animation:none}}

/* ── ხატვა / Draw & Color (v1.234) ── */
.draw-screen{display:flex;flex-direction:column;gap:8px;height:100%;padding:6px 4px}
.dw-top{display:flex;align-items:center;gap:6px}
.dw-tools{display:flex;gap:5px;flex:1;justify-content:center}
.dw-tool{width:44px;height:44px;border:1.5px solid var(--line);background:var(--card);border-radius:12px;font-size:1.25rem;cursor:pointer;padding:0;display:grid;place-items:center}
.dw-tool:active{transform:scale(.94)}
.dw-tool.on{border-color:var(--primary);background:color-mix(in oklch,var(--primary) 14%,var(--card))}
.dw-save{border:1.5px solid var(--line);background:var(--card);border-radius:12px;padding:0 12px;font-weight:700;font-size:.82rem;cursor:pointer;min-height:44px;white-space:nowrap}
.dw-canvas-wrap{flex:1;min-height:230px;background:#fff;border:2px solid var(--line);border-radius:14px;overflow:hidden;touch-action:none}
#dwCanvas{display:block;cursor:crosshair}
.dw-tmpls{display:flex;gap:6px;overflow-x:auto;padding:2px 1px}
.dw-tmpl{flex:0 0 auto;width:46px;height:46px;border:1.5px solid var(--line);background:var(--card);border-radius:12px;font-size:1.45rem;cursor:pointer;padding:0}
.dw-tmpl:active{transform:scale(.92)}
.dw-palette{display:flex;flex-direction:column;gap:7px}
.dw-colors{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.dw-color{width:36px;height:36px;border-radius:50%;border:3px solid transparent;cursor:pointer;box-shadow:var(--shadow);padding:0}
.dw-color.light{border:1.5px solid var(--line)}
.dw-color.on{border-color:var(--ink);transform:scale(1.1)}
.dw-color:active{transform:scale(.92)}
.dw-sizes{display:flex;gap:8px;justify-content:center}
.dw-size{width:48px;height:38px;border:1.5px solid var(--line);background:var(--card);border-radius:11px;cursor:pointer;display:grid;place-items:center;padding:0}
.dw-size.on{border-color:var(--primary);background:color-mix(in oklch,var(--primary) 12%,var(--card))}
.dw-size span{background:var(--ink);border-radius:50%;display:block}
.dw-stamps{display:flex;gap:6px;overflow-x:auto;padding:2px 1px}
.dw-stamp{flex:0 0 auto;width:42px;height:42px;border:1.5px solid var(--line);background:var(--card);border-radius:11px;font-size:1.35rem;cursor:pointer;padding:0}
.dw-stamp.on{border-color:var(--primary);background:color-mix(in oklch,var(--primary) 14%,var(--card));transform:scale(1.05)}
.dw-stamp:active{transform:scale(.92)}
.dw-color.rainbow{background:conic-gradient(#e23b3b,#f2894c,#e8c45f,#3aa66e,#4d97d1,#6b63b5,#d65aa0,#e23b3b)}
.subj.draw .s-ico{filter:saturate(1.1)}

.ai-bubble{background:var(--card);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-lg);
  border:1.5px solid color-mix(in oklch,var(--sky) 30%,var(--line));display:flex;flex-direction:column;animation:rise .3s}
.ai-ava{width:48px;height:48px;flex:0 0 auto;border-radius:15px;background:linear-gradient(150deg,var(--sky),var(--purple));
  display:grid;place-items:center;font-size:1.6rem}
/* brand-owl tutor face (owl-logo.png) — drop the gradient badge so the mascot shows on its own (owner 2026-06-13) */
.owl-face{width:100%;height:100%}
.ai-ava:has(.owl-face),.voice .v-ava:has(.owl-face){background:none;box-shadow:none}
.ai-fab:has(.owl-face){background:var(--card);border:1.5px solid var(--line)}
.ai-fab .owl-face{width:80%;height:80%}
.teach-owl .owl-face{display:block;margin:0 auto}
.ai-bubble .ai-body{flex:1}
.ai-bubble .ai-name{font-size:1rem;font-weight:800;color:var(--sky-d);letter-spacing:.02em}
/* owl help text: bigger + higher contrast + airier line spacing so a 5–7 yo (or a parent reading aloud)
   can actually read it. (owner 2026-06-13: the hint text was too small / hard to read.) */
.ai-bubble .ai-text{font-size:1.2rem;line-height:1.62;color:var(--ink);font-weight:500}
.ai-bubble .ai-text b{color:var(--primary-d);font-weight:800}
.ai-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px}
.ai-chip{border:1.5px solid var(--line);background:var(--card-2);border-radius:999px;padding:9px 15px;
  font-size:.95rem;font-weight:700;cursor:pointer;font-family:inherit;color:var(--ink)}
.ai-chip:active{transform:scale(.95)}
.ai-chip.primary{background:var(--sky);color:#fff;border-color:var(--sky)}

/* ── Comprehension gate (2nd-miss teaching reveal) — big, slow, child-paced ── */
.teach-ov{align-items:center;justify-content:center;padding:24px;background:rgba(20,16,30,.46);z-index:90}
.teach-card{background:var(--card);border-radius:26px;box-shadow:var(--shadow-lg);
  border:2px solid color-mix(in oklch,var(--primary) 30%,var(--line));padding:24px 22px;max-width:340px;width:100%;
  text-align:center;animation:rise .28s}
.teach-owl{font-size:2.7rem;line-height:1;margin-bottom:4px;animation:bob 2.4s ease-in-out infinite}
.teach-eq .eqline{font-size:2.5rem;font-weight:800;color:var(--ink);letter-spacing:1px;
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.teach-eq.small .eqline{font-size:1.7rem}
.te-eq{color:var(--sky-d)}
.te-ans{display:inline-block;min-width:1.2em;color:var(--primary-d)}
.te-ans.solo{color:var(--green-d)}
.te-ans.pop{animation:tepop .55s cubic-bezier(.2,1.5,.45,1)}
.te-emoji{font-size:3.6rem;line-height:1;margin-bottom:4px}
.teach-q{font-size:1.4rem;font-weight:800;color:var(--ink);margin-top:18px;transition:opacity .35s}
.teach-btns{display:flex;gap:12px;justify-content:center;margin-top:14px;transition:opacity .35s}
.teach-yes,.teach-no{border:none;border-radius:16px;padding:14px 22px;font-size:1.15rem;font-weight:800;
  font-family:inherit;cursor:pointer;min-width:96px;min-height:54px}
.teach-yes{background:var(--green);color:#fff}
.teach-no{background:var(--card-2);color:var(--ink);border:2px solid var(--line)}
.teach-yes:active,.teach-no:active{transform:scale(.95)}
.teach-dots{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin:16px 0 4px}
.teach-dots .dg{display:inline-flex;gap:4px;flex-wrap:wrap;max-width:8.5em;justify-content:center}
.td{font-size:1.5rem;line-height:1.1}
.td.g1{color:var(--sky)} .td.g2{color:var(--primary)} .td.x{color:var(--line);text-decoration:line-through}
.te-plus{font-weight:800;color:var(--sky-d);font-size:1.7rem}
.teach-rows{display:flex;flex-direction:column;gap:5px;align-items:center;margin:14px 0 4px}
.teach-count{font-size:1.15rem;color:var(--ink);margin-top:10px}
.teach-count b{color:var(--primary-d);font-size:1.35rem}
.teach-explain{font-size:1.18rem;line-height:1.55;color:var(--ink);margin:16px 6px 4px}
@keyframes tepop{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.25)}100%{transform:scale(1);opacity:1}}
.dots{display:inline-flex;gap:4px;align-items:center}
.dots i{width:7px;height:7px;border-radius:50%;background:var(--sky);animation:bounce 1.2s infinite}
.dots i:nth-child(2){animation-delay:.18s}.dots i:nth-child(3){animation-delay:.36s}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-6px);opacity:1}}

/* ── VOICE MODE ── */
.voice{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;text-align:center;
  padding:10px 0}
.voice .v-ava{width:96px;height:96px;border-radius:32px;background:linear-gradient(150deg,var(--sky),var(--purple));
  display:grid;place-items:center;font-size:3.2rem;box-shadow:var(--shadow-lg);position:relative}
.voice .v-state{font-size:1.18rem;font-weight:700}
.voice .v-hint{color:var(--muted);font-size:.92rem;max-width:280px}
.v-target{background:var(--card);border-radius:var(--radius);padding:18px 26px;box-shadow:var(--shadow);
  font-family:'Fredoka';font-size:2.2rem;font-weight:500}
.v-target small{display:block;font-family:'Noto Sans Georgian';font-size:.86rem;font-weight:600;color:var(--muted)}
.mic{width:86px;height:86px;border-radius:50%;border:none;cursor:pointer;font-size:2rem;color:#fff;
  background:linear-gradient(150deg,var(--primary),var(--primary-d));display:grid;place-items:center;
  box-shadow:var(--shadow-lg);position:relative;transition:transform .15s}
.mic:active{transform:scale(.94)}
.mic.live{background:linear-gradient(150deg,var(--red),oklch(0.52 0.16 25))}
.mic .pulse{position:absolute;inset:0;border-radius:50%}
.mic.live .pulse{animation:micpulse 1.4s ease-out infinite}
@keyframes micpulse{0%{box-shadow:0 0 0 0 color-mix(in oklch,var(--red) 55%,transparent)}100%{box-shadow:0 0 0 26px transparent}}
.wave{display:flex;gap:5px;align-items:center;height:42px}
.wave i{width:5px;border-radius:3px;background:var(--sky);height:30%;animation:eq 1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.1s}.wave i:nth-child(3){animation-delay:.2s}.wave i:nth-child(4){animation-delay:.3s}
.wave i:nth-child(5){animation-delay:.4s}.wave i:nth-child(6){animation-delay:.5s}.wave i:nth-child(7){animation-delay:.2s}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}
.scorering{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--green) var(--sc,80%),var(--card-2) 0);box-shadow:var(--shadow)}
.scorering i{width:68px;height:68px;border-radius:50%;background:var(--card);display:grid;place-items:center;
  font-family:'Fredoka';font-weight:600;font-size:1.4rem;font-style:normal;color:var(--green-d)}

/* ── PARENT GATE ── */
.gate{position:absolute;inset:0;background:oklch(0.30 0.02 60 /.55);backdrop-filter:blur(5px);
  display:grid;place-items:center;z-index:60;padding:24px;animation:fade .2s}
.gate-card{background:var(--card);border-radius:var(--radius);padding:26px 22px;width:100%;max-width:330px;
  box-shadow:var(--shadow-lg);text-align:center;position:relative}
.gate-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:none;background:var(--card-2);
  color:var(--muted);font-size:1.05rem;border-radius:11px;cursor:pointer;display:grid;place-items:center;transition:all .14s}
.gate-x:hover{color:var(--ink);background:color-mix(in oklch,var(--line) 60%,var(--card-2))}
.gate-x:active{transform:scale(.92)}
.gate-card h3{font-size:1.15rem;margin-bottom:6px}
.gate-card p{color:var(--muted);font-size:.86rem;margin-bottom:16px}
.gate-q{font-family:'Fredoka';font-size:1.9rem;font-weight:500;margin-bottom:12px}
.gate-keys{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gate-keys button{padding:14px;border:1.5px solid var(--line);background:var(--card-2);border-radius:13px;
  font-family:'Fredoka';font-size:1.3rem;cursor:pointer;color:var(--ink);min-height:54px}
.gate-keys button:active{transform:scale(.95)}
.gate-display{height:30px;font-family:'Fredoka';font-size:1.6rem;letter-spacing:4px;margin-bottom:10px;color:var(--primary-d)}

/* ── PARENT DASHBOARD ── */
.parent h2{font-size:1.05rem;margin:16px 0 10px}
.kid-head{display:flex;align-items:center;gap:11px;margin:8px 0 12px}
.kid-head .avatar{width:42px;height:42px;border-radius:13px;font-size:1.1rem}
.kid-head .kn{font-weight:700}
.kid-head .kr{font-size:.76rem;color:var(--muted)}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}
.scard{background:var(--card);border-radius:var(--radius-sm);padding:13px 8px;text-align:center;box-shadow:var(--shadow)}
.scard .sv{font-size:1.4rem;font-weight:700;font-family:'Fredoka'}
.scard .sl{font-size:.66rem;color:var(--muted);font-weight:600;margin-top:2px}
.insight{display:flex;gap:11px;background:linear-gradient(135deg,color-mix(in oklch,var(--sky) 13%,var(--card)),var(--card));
  border-radius:var(--radius-sm);padding:14px;box-shadow:var(--shadow);margin-bottom:10px;
  border:1px solid color-mix(in oklch,var(--sky) 22%,var(--line))}
.insight .ii{width:34px;height:34px;flex:0 0 auto;border-radius:11px;background:linear-gradient(150deg,var(--sky),var(--purple));
  display:grid;place-items:center;font-size:1.1rem}
.insight .it{font-size:.88rem;line-height:1.45}
.insight .it b{color:var(--sky-d)}
.tagrow{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.tag{font-size:.74rem;font-weight:600;padding:5px 10px;border-radius:999px}
.tag.weak{color:var(--primary-d);background:color-mix(in oklch,var(--primary) 12%,var(--card))}
.tag.strong{color:var(--green-d);background:color-mix(in oklch,var(--green) 12%,var(--card))}
.divider{height:1px;background:var(--line);margin:16px 0}
.privacy-card{display:flex;gap:12px;background:color-mix(in oklch,var(--green) 9%,var(--card));border-radius:var(--radius-sm);
  padding:15px;border:1px solid color-mix(in oklch,var(--green) 22%,var(--line))}
.privacy-card svg{width:26px;height:26px;flex:0 0 auto;color:var(--green-d)}
.privacy-card .pt{font-size:.84rem;line-height:1.45}
.privacy-card .pt b{color:var(--green-d)}

/* ── BREAK ── */
/* ══ MOVEMENT BREAK v2 — rigged-SVG kids in the Georgian kit (ported from owner's reference) ══
   Scoped under .mv2 so it is fully self-contained (its own warm palette + tokens), vector,
   CSS-only, offline. Flag colors stay literal red/white. */
.breakscreen{position:absolute;inset:0;z-index:70;animation:fade .25s}
.breakscreen.mv2{
  --bg:oklch(0.965 0.020 78);--bg-tint:oklch(0.945 0.030 70);--card:oklch(0.995 0.010 85);
  --ink:oklch(0.330 0.038 52);--muted:oklch(0.520 0.034 58);--faint:oklch(0.640 0.028 62);
  --line:oklch(0.895 0.022 72);--primary:oklch(0.685 0.158 42);--primary-d:oklch(0.585 0.150 40);
  --green:oklch(0.660 0.135 150);--sun:oklch(0.820 0.150 88);
  --bshadow:0 1px 2px oklch(0.40 0.04 55 / .06), 0 8px 22px oklch(0.45 0.05 55 / .10);
  --bshadow-lg:0 2px 6px oklch(0.40 0.04 55 / .08), 0 20px 44px oklch(0.45 0.05 55 / .16);
  display:flex;flex-direction:column;overflow:hidden;color:var(--ink);
  background:linear-gradient(180deg, oklch(0.985 0.018 230) 0%, var(--bg) 42%);
  font-family:'Noto Sans Georgian',system-ui,sans-serif}
.mv2 .num,.mv2 .en{font-family:'Fredoka',sans-serif}
.mv2 .mv-top{display:flex;align-items:center;gap:12px;padding:14px 16px 4px;flex:0 0 auto}
.mv2 .iconbtn{width:44px;height:44px;flex:none;border:none;background:var(--card);color:var(--ink);border-radius:13px;font-size:1.25rem;cursor:pointer;display:grid;place-items:center;box-shadow:var(--bshadow)}
.mv2 .iconbtn:active{transform:scale(.92)}
.mv2 .who{flex:1;font-weight:700;font-size:1.04rem;line-height:1.15}
.mv2 .who small{display:block;font-weight:500;color:var(--muted);font-size:.74rem}
.mv2 .pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);border-radius:999px;padding:8px 13px;font-weight:700;font-size:.9rem;box-shadow:var(--bshadow)}
.mv2 .pill .num{color:var(--primary-d)}
.mv2 .scene{position:relative;flex:1 1 auto;min-height:0;display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.mv2 .room{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 12%, oklch(0.93 0.06 235), transparent 70%);z-index:0}
.mv2 .cloud{position:absolute;border-radius:999px;background:oklch(0.99 0.01 230 / .85);filter:blur(.4px)}
.mv2 .cloud.a{width:78px;height:26px;top:11%;left:13%}.mv2 .cloud.b{width:54px;height:20px;top:20%;right:16%}.mv2 .cloud.c{width:40px;height:15px;top:7%;right:34%}
.mv2 .mat{position:absolute;left:50%;bottom:30px;width:280px;height:128px;transform:translateX(-50%) perspective(360px) rotateX(57deg);transform-origin:center bottom;border-radius:20px;background:repeating-linear-gradient(0deg, oklch(0.78 0.08 158 / .35) 0 1px, transparent 1px 26px),repeating-linear-gradient(90deg, oklch(0.78 0.08 158 / .35) 0 1px, transparent 1px 26px),linear-gradient(180deg, oklch(0.90 0.07 150), oklch(0.84 0.09 150));box-shadow:0 20px 30px oklch(0.45 0.06 150 / .22), inset 0 0 0 3px oklch(0.74 0.10 152 / .5);z-index:1}
.mv2 .chars{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;gap:6px;width:100%;padding-bottom:26px}
.mv2 .char{width:148px;height:auto;max-width:44%}
@media (max-width:380px){.mv2 .char{width:130px}.mv2 .mat{width:250px}}
/* rig: named limb groups pivot at their joint */
.mv2 .seg,.mv2 .seg2{transform-box:fill-box;transform-origin:50% 0%}
.mv2 .eyes{transform-box:fill-box;transform-origin:50% 50%;animation:blink 4.6s ease-in-out infinite}
.mv2 .char.lag .eyes{animation-delay:-2.3s}
.mv2 .char.lag .seg2{animation-delay:-.18s}
@keyframes blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
.mv2 .figure{transform-box:fill-box;transform-origin:50% 74%}
.mv2 .squash{transform-box:fill-box;transform-origin:50% 100%}
.mv2 .shadow{transform-box:fill-box;transform-origin:50% 50%}
.mv2 .figure{animation:idleBob 2.8s ease-in-out infinite}
.mv2 .armL .seg{animation:idleArmL 2.8s ease-in-out infinite}
.mv2 .armR .seg{animation:idleArmR 2.8s ease-in-out infinite}
.mv2 .char.lag .figure,.mv2 .char.lag .armL .seg,.mv2 .char.lag .armR .seg,.mv2 .char.lag .legL .seg,.mv2 .char.lag .legR .seg,.mv2 .char.lag .squash,.mv2 .char.lag .shadow{animation-delay:-.18s}
.mv2 .scene.paused *{animation-play-state:paused!important}
@keyframes idleBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes idleArmL{0%,100%{transform:rotate(11deg)}50%{transform:rotate(15deg)}}
@keyframes idleArmR{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(-15deg)}}
/* 1 SQUAT */
.mv2 .scene[data-move="squat"] .figure{animation:figSquat var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="squat"] .squash{animation:sqSquash var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="squat"] .armL .seg{animation:armLSquat var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="squat"] .armR .seg{animation:armRSquat var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="squat"] .legL .seg{animation:legLSquat var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="squat"] .legR .seg{animation:legRSquat var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="squat"] .legL .seg2{animation:kneeSquatL var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="squat"] .legR .seg2{animation:kneeSquatR var(--dur) ease-in-out infinite}
@keyframes figSquat{0%,100%{transform:translateY(0)}50%{transform:translateY(30px)}}
@keyframes sqSquash{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.9)}}
@keyframes armLSquat{0%,100%{transform:rotate(11deg)}50%{transform:rotate(84deg)}}
@keyframes armRSquat{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(-84deg)}}
@keyframes legLSquat{0%,100%{transform:rotate(0)}50%{transform:rotate(15deg)}}
@keyframes legRSquat{0%,100%{transform:rotate(0)}50%{transform:rotate(-15deg)}}
@keyframes kneeSquatL{0%,100%{transform:rotate(0)}50%{transform:rotate(-26deg)}}
@keyframes kneeSquatR{0%,100%{transform:rotate(0)}50%{transform:rotate(26deg)}}
/* 2 JUMP */
.mv2 .scene[data-move="jump"] .figure{animation:figJump var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="jump"] .squash{animation:sqJump var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="jump"] .armL .seg{animation:armLJump var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="jump"] .armR .seg{animation:armRJump var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="jump"] .legL .seg{animation:legLJump var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="jump"] .legR .seg{animation:legRJump var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="jump"] .shadow{animation:shJump var(--dur) ease-in-out infinite}
@keyframes figJump{0%{transform:translateY(0)}18%{transform:translateY(15px)}42%{transform:translateY(-48px)}62%{transform:translateY(-48px)}82%{transform:translateY(7px)}100%{transform:translateY(0)}}
@keyframes sqJump{0%,100%{transform:scaleY(1)}18%{transform:scaleY(.84)}42%{transform:scaleY(1.09)}82%{transform:scaleY(.92)}}
@keyframes armLJump{0%,100%{transform:rotate(11deg)}18%{transform:rotate(-26deg)}45%{transform:rotate(168deg)}}
@keyframes armRJump{0%,100%{transform:rotate(-11deg)}18%{transform:rotate(26deg)}45%{transform:rotate(-168deg)}}
@keyframes legLJump{0%,100%{transform:rotate(0)}42%{transform:rotate(7deg)}}
@keyframes legRJump{0%,100%{transform:rotate(0)}42%{transform:rotate(-7deg)}}
@keyframes shJump{0%,100%{transform:scale(1);opacity:.5}42%,62%{transform:scale(.6);opacity:.28}}
/* 3 PLANK + 7 BEAR (floor poses) */
.mv2 .scene[data-move="plank"] .char,.mv2 .scene[data-move="bear"] .char{overflow:visible}
.mv2 .scene[data-move="plank"] .chars,.mv2 .scene[data-move="bear"] .chars{gap:46px;padding-bottom:54px}
.mv2 .scene[data-move="plank"] .char.lag,.mv2 .scene[data-move="bear"] .char.lag{transform:translate(6px,-66px) scale(.8)}
.mv2 .scene[data-move="plank"] .figure,.mv2 .scene[data-move="bear"] .figure{transform-origin:50% 60%}
.mv2 .scene[data-move="plank"] .figure{animation:figPlank var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="plank"] .armL .seg{animation:armLPlank var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="plank"] .armR .seg{animation:armRPlank var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="plank"] .legL .seg{animation:legLPlank var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="plank"] .legR .seg{animation:legRPlank var(--dur) ease-in-out infinite}
@keyframes figPlank{0%,100%{transform:translateY(40px) rotate(78deg) scale(.82)}50%{transform:translateY(36px) rotate(79deg) scale(.82)}}
@keyframes armLPlank{0%,100%{transform:rotate(-76deg)}50%{transform:rotate(-78deg)}}
@keyframes armRPlank{0%,100%{transform:rotate(-80deg)}50%{transform:rotate(-82deg)}}
@keyframes legLPlank{0%,100%{transform:rotate(2deg)}50%{transform:rotate(0deg)}}
@keyframes legRPlank{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(-4deg)}}
/* 4 BALANCE */
.mv2 .scene[data-move="balance"] .figure{animation:figBal var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="balance"] .armL .seg{animation:armLBal var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="balance"] .armR .seg{animation:armRBal var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="balance"] .legL .seg{animation:legLBal var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="balance"] .legR .seg{animation:legRBal var(--dur) ease-in-out infinite}
@keyframes figBal{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes armLBal{0%,100%{transform:rotate(66deg)}50%{transform:rotate(74deg)}}
@keyframes armRBal{0%,100%{transform:rotate(-66deg)}50%{transform:rotate(-74deg)}}
@keyframes legLBal{0%,100%{transform:rotate(2deg)}50%{transform:rotate(-2deg)}}
@keyframes legRBal{0%,100%{transform:rotate(-38deg)}50%{transform:rotate(-46deg)}}
/* 5 ARM CIRCLES */
.mv2 .scene[data-move="armcircles"] .armL .seg{animation:armCircleL var(--dur) linear infinite}
.mv2 .scene[data-move="armcircles"] .armR .seg{animation:armCircleR var(--dur) linear infinite}
@keyframes armCircleL{0%{transform:rotate(8deg)}100%{transform:rotate(368deg)}}
@keyframes armCircleR{0%{transform:rotate(-8deg)}100%{transform:rotate(-368deg)}}
/* 6 OVERHEAD */
.mv2 .scene[data-move="overhead"] .figure{animation:figOver var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="overhead"] .armL .seg{animation:armLOver var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="overhead"] .armR .seg{animation:armROver var(--dur) ease-in-out infinite}
@keyframes figOver{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes armLOver{0%,100%{transform:rotate(156deg)}50%{transform:rotate(174deg)}}
@keyframes armROver{0%,100%{transform:rotate(-156deg)}50%{transform:rotate(-174deg)}}
/* 7 BEAR */
.mv2 .scene[data-move="bear"] .figure{animation:figBear var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="bear"] .armL .seg{animation:armLBear var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="bear"] .armR .seg{animation:armRBear var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="bear"] .legL .seg{animation:legLBear var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="bear"] .legR .seg{animation:legRBear var(--dur) ease-in-out infinite}
@keyframes figBear{0%,100%{transform:translateY(34px) rotate(50deg) scale(.86)}50%{transform:translateY(31px) rotate(50deg) scale(.86)}}
@keyframes armLBear{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(-62deg)}}
@keyframes armRBear{0%,100%{transform:rotate(-62deg)}50%{transform:rotate(-40deg)}}
@keyframes legLBear{0%,100%{transform:rotate(-58deg)}50%{transform:rotate(-40deg)}}
@keyframes legRBear{0%,100%{transform:rotate(-40deg)}50%{transform:rotate(-58deg)}}
/* 8 KANGAROO */
.mv2 .scene[data-move="kangaroo"] .figure{animation:figKang var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="kangaroo"] .squash{animation:sqKang var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="kangaroo"] .armL .seg{animation:armLKang var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="kangaroo"] .armR .seg{animation:armRKang var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="kangaroo"] .shadow{animation:shJump var(--dur) ease-in-out infinite}
@keyframes figKang{0%{transform:translateY(0)}30%{transform:translateY(13px)}55%{transform:translateY(-34px)}80%{transform:translateY(5px)}100%{transform:translateY(0)}}
@keyframes sqKang{0%,100%{transform:scaleY(1)}30%{transform:scaleY(.82)}55%{transform:scaleY(1.12)}}
@keyframes armLKang{0%,100%{transform:rotate(133deg)}55%{transform:rotate(150deg)}}
@keyframes armRKang{0%,100%{transform:rotate(-133deg)}55%{transform:rotate(-150deg)}}
/* 9 JACKS */
.mv2 .scene[data-move="jacks"] .figure{animation:figJacks var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="jacks"] .armL .seg{animation:armLJacks var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="jacks"] .armR .seg{animation:armRJacks var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="jacks"] .legL .seg{animation:legLJacks var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="jacks"] .legR .seg{animation:legRJacks var(--dur) ease-in-out infinite}
@keyframes figJacks{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes armLJacks{0%,100%{transform:rotate(14deg)}50%{transform:rotate(166deg)}}
@keyframes armRJacks{0%,100%{transform:rotate(-14deg)}50%{transform:rotate(-166deg)}}
@keyframes legLJacks{0%,100%{transform:rotate(2deg)}50%{transform:rotate(22deg)}}
@keyframes legRJacks{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(-22deg)}}
/* 10 SIDE BENDS */
.mv2 .scene[data-move="sidebend"] .figure{animation:figSide var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="sidebend"] .armL .seg{animation:armLSide var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="sidebend"] .armR .seg{animation:armRSide var(--dur) ease-in-out infinite}
@keyframes figSide{0%,100%{transform:rotate(-11deg)}50%{transform:rotate(11deg)}}
@keyframes armLSide{0%,100%{transform:rotate(40deg)}50%{transform:rotate(156deg)}}
@keyframes armRSide{0%,100%{transform:rotate(-156deg)}50%{transform:rotate(-40deg)}}
/* 11 CLAPS */
.mv2 .scene[data-move="clap"] .armL .seg{animation:armLClap var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="clap"] .armR .seg{animation:armRClap var(--dur) ease-in-out infinite}
@keyframes armLClap{0%,100%{transform:rotate(150deg)}50%{transform:rotate(176deg)}}
@keyframes armRClap{0%,100%{transform:rotate(-150deg)}50%{transform:rotate(-176deg)}}
/* 12 RUN */
.mv2 .scene[data-move="run"] .figure{animation:figRun var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="run"] .armL .seg{animation:armLRun var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="run"] .armR .seg{animation:armRRun var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="run"] .legL .seg{animation:legLRun var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="run"] .legR .seg{animation:legRRun var(--dur) ease-in-out infinite}
@keyframes figRun{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes legLRun{0%,100%{transform:rotate(-32deg)}50%{transform:rotate(28deg)}}
@keyframes legRRun{0%,100%{transform:rotate(28deg)}50%{transform:rotate(-32deg)}}
@keyframes armLRun{0%,100%{transform:rotate(50deg)}50%{transform:rotate(-30deg)}}
@keyframes armRRun{0%,100%{transform:rotate(-50deg)}50%{transform:rotate(30deg)}}
/* 13 AIRPLANE */
.mv2 .scene[data-move="airplane"] .figure{animation:figAir var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="airplane"] .armL .seg{animation:armLAir var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="airplane"] .armR .seg{animation:armRAir var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="airplane"] .legR .seg{animation:legRAir var(--dur) ease-in-out infinite}
@keyframes figAir{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes armLAir{0%,100%{transform:rotate(92deg)}50%{transform:rotate(86deg)}}
@keyframes armRAir{0%,100%{transform:rotate(-92deg)}50%{transform:rotate(-86deg)}}
@keyframes legRAir{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-19deg)}}
/* 14 BOXING */
.mv2 .scene[data-move="punch"] .armL .seg{animation:armLPunch var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="punch"] .armR .seg{animation:armRPunch var(--dur) ease-in-out infinite}
@keyframes armLPunch{0%,50%,100%{transform:rotate(38deg)}25%{transform:rotate(94deg)}}
@keyframes armRPunch{0%,50%,100%{transform:rotate(-38deg)}75%{transform:rotate(-94deg)}}
/* 15 DANCE */
.mv2 .scene[data-move="dance"] .figure{animation:figDance var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="dance"] .armL .seg{animation:armLDance var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="dance"] .armR .seg{animation:armRDance var(--dur) ease-in-out infinite}
@keyframes figDance{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-5px) rotate(5deg)}}
@keyframes armLDance{0%,100%{transform:rotate(120deg)}50%{transform:rotate(150deg)}}
@keyframes armRDance{0%,100%{transform:rotate(-150deg)}50%{transform:rotate(-120deg)}}
/* 16 FROG */
.mv2 .scene[data-move="frog"] .figure{animation:figFrog var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="frog"] .squash{animation:sqFrog var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="frog"] .armL .seg{animation:armLFrog var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="frog"] .armR .seg{animation:armRFrog var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="frog"] .legL .seg{animation:legLFrog var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="frog"] .legR .seg{animation:legRFrog var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="frog"] .shadow{animation:shJump var(--dur) ease-in-out infinite}
@keyframes figFrog{0%,100%{transform:translateY(18px)}45%{transform:translateY(-26px)}70%{transform:translateY(18px)}}
@keyframes sqFrog{0%,100%{transform:scaleY(.88)}45%{transform:scaleY(1.08)}}
@keyframes armLFrog{0%,100%{transform:rotate(42deg)}45%{transform:rotate(150deg)}}
@keyframes armRFrog{0%,100%{transform:rotate(-42deg)}45%{transform:rotate(-150deg)}}
@keyframes legLFrog{0%,100%{transform:rotate(20deg)}45%{transform:rotate(4deg)}}
@keyframes legRFrog{0%,100%{transform:rotate(-20deg)}45%{transform:rotate(-4deg)}}
/* 17 FLAMINGO */
.mv2 .scene[data-move="flamingo"] .figure{animation:figFla var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="flamingo"] .armL .seg{animation:armLFla var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="flamingo"] .armR .seg{animation:armRFla var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="flamingo"] .legR .seg{animation:legRFla var(--dur) ease-in-out infinite}
@keyframes figFla{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes armLFla{0%,100%{transform:rotate(104deg)}50%{transform:rotate(120deg)}}
@keyframes armRFla{0%,100%{transform:rotate(-104deg)}50%{transform:rotate(-120deg)}}
@keyframes legRFla{0%,100%{transform:rotate(-42deg)}50%{transform:rotate(-50deg)}}
/* now playing */
.mv2 .now{flex:0 0 auto;text-align:center;padding:6px 18px 2px}
.mv2 .now .name{font-weight:700;font-size:1.5rem;line-height:1.1}
.mv2 .now .sub{font-family:'Fredoka',sans-serif;font-weight:500;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin-top:3px}
.mv2 .count{display:inline-flex;align-items:baseline;gap:7px;margin-top:9px;background:var(--card);border-radius:999px;padding:7px 16px;box-shadow:var(--bshadow)}
.mv2 .count .big{font-family:'Fredoka',sans-serif;font-weight:700;font-size:1.7rem;color:var(--primary-d);line-height:1}
.mv2 .count .tot{font-family:'Fredoka',sans-serif;font-weight:500;font-size:1rem;color:var(--faint)}
.mv2 .count .lbl{font-size:.8rem;color:var(--muted);font-weight:600}
.mv2 .bar{height:7px;border-radius:99px;background:var(--line);margin:11px auto 0;max-width:280px;overflow:hidden}
.mv2 .bar > i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--sun),var(--primary));transition:width .3s}
/* controls */
.mv2 .controls{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 0 4px}
.mv2 .ctl{width:44px;height:44px;border:none;border-radius:50%;background:var(--card);color:var(--ink);font-size:1.05rem;cursor:pointer;display:grid;place-items:center;box-shadow:var(--bshadow)}
.mv2 .ctl:active{transform:translateY(2px)}
.mv2 .ctl.play{width:51px;height:51px;background:var(--primary);color:#fff;font-size:1.22rem;box-shadow:0 3px 0 var(--primary-d),var(--bshadow)}
.mv2 .ctl.play:active{box-shadow:0 0 0 var(--primary-d),var(--bshadow)}
/* rail */
.mv2 .rail{flex:0 0 auto;display:flex;gap:9px;overflow-x:auto;padding:10px 16px calc(16px + env(safe-area-inset-bottom));scrollbar-width:none}
.mv2 .rail::-webkit-scrollbar{display:none}
.mv2 .chip{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;width:64px;padding:9px 6px;border:2px solid transparent;border-radius:16px;background:var(--card);cursor:pointer;box-shadow:var(--bshadow);transition:transform .12s}
.mv2 .chip:active{transform:scale(.95)}
.mv2 .chip .n{font-family:'Fredoka',sans-serif;font-weight:700;width:24px;height:24px;border-radius:50%;background:var(--bg-tint);color:var(--muted);display:grid;place-items:center;font-size:.85rem}
.mv2 .chip .t{font-size:.66rem;font-weight:600;color:var(--muted);text-align:center;line-height:1.1;height:2.2em;display:flex;align-items:center}
.mv2 .chip.on{border-color:var(--primary);background:linear-gradient(180deg,oklch(0.97 0.05 50),var(--card))}
.mv2 .chip.on .n{background:var(--primary);color:#fff}
.mv2 .chip.on .t{color:var(--ink)}
.mv2 .toast{position:absolute;left:50%;top:16%;transform:translateX(-50%) translateY(-8px);z-index:30;background:var(--green);color:#fff;font-weight:700;padding:10px 20px;border-radius:999px;box-shadow:var(--bshadow-lg);opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;font-size:1.05rem}
.mv2 .toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ── JOINTS: elbows & knees (two-segment limbs), per move ── */
.mv2 .scene[data-move="jump"] .legL .seg2,.mv2 .scene[data-move="jump"] .legR .seg2{animation:kneeJump var(--dur) ease-in-out infinite}
@keyframes kneeJump{0%,100%{transform:rotate(0)}18%{transform:rotate(32deg)}42%{transform:rotate(0)}}
.mv2 .scene[data-move="balance"] .legR .seg2{animation:kneeBal var(--dur) ease-in-out infinite}
@keyframes kneeBal{0%,100%{transform:rotate(72deg)}50%{transform:rotate(80deg)}}
.mv2 .scene[data-move="kangaroo"] .legL .seg2,.mv2 .scene[data-move="kangaroo"] .legR .seg2{animation:kneeKang var(--dur) ease-in-out infinite}
@keyframes kneeKang{0%,100%{transform:rotate(10deg)}55%{transform:rotate(50deg)}}
.mv2 .scene[data-move="run"] .legL .seg2{animation:kneeRunL var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="run"] .legR .seg2{animation:kneeRunR var(--dur) ease-in-out infinite}
@keyframes kneeRunL{0%,100%{transform:rotate(8deg)}50%{transform:rotate(48deg)}}
@keyframes kneeRunR{0%,100%{transform:rotate(48deg)}50%{transform:rotate(8deg)}}
.mv2 .scene[data-move="frog"] .legL .seg2,.mv2 .scene[data-move="frog"] .legR .seg2{animation:kneeFrog var(--dur) ease-in-out infinite}
@keyframes kneeFrog{0%,100%{transform:rotate(42deg)}45%{transform:rotate(6deg)}}
.mv2 .scene[data-move="bear"] .legL .seg2,.mv2 .scene[data-move="bear"] .legR .seg2{animation:kneeBear var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="bear"] .armL .seg2,.mv2 .scene[data-move="bear"] .armR .seg2{animation:elbowBear var(--dur) ease-in-out infinite}
@keyframes kneeBear{0%,100%{transform:rotate(34deg)}50%{transform:rotate(46deg)}}
@keyframes elbowBear{0%,100%{transform:rotate(-12deg)}50%{transform:rotate(-22deg)}}
.mv2 .scene[data-move="punch"] .armL .seg2{animation:elbowPunchL var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="punch"] .armR .seg2{animation:elbowPunchR var(--dur) ease-in-out infinite}
@keyframes elbowPunchL{0%,50%,100%{transform:rotate(72deg)}25%{transform:rotate(2deg)}}
@keyframes elbowPunchR{0%,50%,100%{transform:rotate(-72deg)}75%{transform:rotate(-2deg)}}
.mv2 .scene[data-move="flamingo"] .legR .seg2{animation:kneeFla var(--dur) ease-in-out infinite}
@keyframes kneeFla{0%,100%{transform:rotate(82deg)}50%{transform:rotate(90deg)}}
.mv2 .scene[data-move="dance"] .armL .seg2{animation:elbowDanceL var(--dur) ease-in-out infinite}
.mv2 .scene[data-move="dance"] .armR .seg2{animation:elbowDanceR var(--dur) ease-in-out infinite}
@keyframes elbowDanceL{0%,100%{transform:rotate(30deg)}50%{transform:rotate(60deg)}}
@keyframes elbowDanceR{0%,100%{transform:rotate(-60deg)}50%{transform:rotate(-30deg)}}
@media (prefers-reduced-motion:reduce){.mv2 .scene *{animation:none!important}}
/* A4 a11y: global reduced-motion guard (kills decorative motion app-wide without breaking function) */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}
/* A4 a11y: visible keyboard focus ring (only for keyboard nav, not mouse/touch) */
:focus-visible{outline:3px solid #6B63B5;outline-offset:2px;border-radius:6px}
*:focus:not(:focus-visible){outline:none}

/* ── tutor animal picker (O1) ── */
.tutor-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:4px 2px}
.tutor-pick{font-size:2rem;padding:9px 0 7px;min-height:64px;border-radius:18px;border:2px solid var(--line,#e7ddc9);
  background:var(--card,#fff);cursor:pointer;transition:transform .12s,border-color .12s,background .12s;
  display:flex;flex-direction:column;align-items:center;gap:2px}
.tutor-pick .tp-face{font-size:2rem;line-height:1}
.tutor-pick .tp-name{font-size:.66rem;font-weight:700;color:var(--muted);font-family:inherit}
.tutor-pick.on .tp-name{color:var(--primary-d)}
.tutor-pick:active{transform:scale(.94)}
.tutor-pick.on{border-color:var(--primary);background:color-mix(in oklch,var(--primary) 14%,var(--card,#fff));transform:scale(1.04)}
.tutor-modal{position:relative;background:var(--card,#fff);border-radius:26px;padding:22px 20px 24px;width:min(360px,86vw);
  box-shadow:0 18px 50px rgba(0,0,0,.28);animation:rise .2s}
.tutor-modal-h{font-family:'Fredoka';font-size:1.2rem;font-weight:600;text-align:center;margin-bottom:14px}
.ai-ava.alive{cursor:pointer}

/* ── #1 Georgian reading: syllable→word ── */
.read-stage{display:flex;flex-direction:column;align-items:center;gap:18px;margin-top:8px}
.read-emoji{font-size:5rem;line-height:1}
.read-word{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.read-word .syl{font-family:'Noto Sans Georgian';font-size:2.1rem;font-weight:700;color:var(--ink);
  background:var(--card);border:2px solid var(--line);border-radius:16px;padding:8px 16px;cursor:pointer;
  transition:transform .12s,border-color .12s,background .12s}
.read-word .syl:active{transform:scale(.94)}
.read-word .syl.tapped{border-color:var(--primary);background:color-mix(in oklch,var(--primary) 14%,var(--card))}
/* sound-out sync (readBlend): the syllable currently sounding lights + grows; then the whole word lights = "blend" */
.read-word .syl.saying{border-color:var(--primary);background:color-mix(in oklch,var(--primary) 24%,var(--card));transform:scale(1.14);box-shadow:0 5px 16px color-mix(in oklch,var(--primary) 32%,transparent)}
.read-word.blending .syl{border-color:var(--green);background:color-mix(in oklch,var(--green) 18%,var(--card));color:var(--green-d)}
.read-word .syl-plus{color:var(--muted);font-size:1.4rem;font-weight:700}

/* ── voicing-language toggle (F5) ── */
.vtgl{display:inline-flex;align-items:center;min-height:44px;border:1.5px solid var(--line,#e7ddc9);
  background:var(--card,#fff);color:var(--ink,#3a2a1a);border-radius:999px;padding:0 15px;
  font:700 .82rem/1 inherit;cursor:pointer;white-space:nowrap;opacity:.92}
.vtgl:active{transform:scale(.95)}
.progress-row .vtgl{flex:0 0 auto}

/* ── MIC PERMISSION ── */
.permwrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}
.permwrap .perm-ico{width:88px;height:88px;border-radius:28px;background:linear-gradient(150deg,var(--sky),var(--purple));
  display:grid;place-items:center;font-size:3rem;box-shadow:var(--shadow-lg)}
.permwrap h2{font-size:1.3rem}
.permwrap p{color:var(--muted);font-size:.94rem;max-width:300px}
.perm-points{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px;margin:4px 0}
.perm-point{display:flex;gap:11px;align-items:center;background:var(--card);border-radius:var(--radius-sm);
  padding:13px 15px;box-shadow:var(--shadow);text-align:left;font-size:.86rem}
.perm-point svg{width:20px;height:20px;flex:0 0 auto;color:var(--green-d)}
.consent-note{font-size:.76rem;color:var(--faint);max-width:300px}

/* utility */
.spacer{flex:1}
.center{text-align:center}
.mt{margin-top:14px}
.section-label{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:6px 2px}

/* ── PARENT: delete, engagement, toast ── */
.kid-head{display:flex;align-items:center;gap:12px}
.kid-head .kh-meta{flex:1}
.kh-del{width:44px;height:44px;flex:0 0 auto;border:1.5px solid var(--line);background:var(--card);border-radius:12px;
  cursor:pointer;font-size:1.05rem;display:grid;place-items:center;opacity:.7;transition:all .14s}
.kh-del:hover{opacity:1;border-color:var(--red);background:color-mix(in oklch,var(--red) 8%,var(--card))}
.kh-del:active{transform:scale(.92)}
.engage{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:14px;margin-top:10px;box-shadow:var(--shadow)}
.eng-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px}
.eng-cell{text-align:center}
.eng-v{font-family:'Fredoka';font-weight:600;font-size:1.5rem;line-height:1;color:var(--ink)}
.eng-l{font-size:.66rem;font-weight:700;letter-spacing:.04em;color:var(--faint);text-transform:uppercase;margin-top:4px}
.eng-note{font-size:.9rem;line-height:1.5;color:var(--muted);border-top:1px solid var(--line);padding-top:10px}
.eng-note b{color:var(--ink)}
.rec-push{display:inline-block;margin-top:7px;color:var(--green-d);font-weight:600;font-size:.92rem}
.toast{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);background:var(--ink);color:var(--card);
  padding:13px 20px;border-radius:14px;font-weight:700;font-size:.95rem;box-shadow:var(--shadow-lg);z-index:60;
  animation:rise .3s;max-width:88%;text-align:center}

/* ── onboarding: who is setting this up? ── */
.init-intro{font-size:1.25rem;font-weight:700;text-align:center;margin:20px 0 18px}
.init-grid{display:flex;flex-direction:column;gap:14px;max-width:340px;margin:0 auto;width:100%}
.init-card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:22px 18px;
  cursor:pointer;text-align:center;box-shadow:var(--shadow);font-family:inherit;transition:transform .14s,border-color .14s}
.init-card:active{transform:scale(.97)}
.init-card:hover{border-color:color-mix(in oklch,var(--primary) 50%,var(--line))}
.init-emoji{font-size:3rem;line-height:1}
.init-t{font-size:1.2rem;font-weight:700;margin-top:8px;color:var(--ink)}
.init-s{font-size:.9rem;color:var(--muted);margin-top:3px}
.consent-box{max-width:340px;margin:14px auto 0;width:100%;background:var(--card);border:1.5px solid var(--line);
  border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);text-align:center}
.consent-ico{display:grid;place-items:center;margin:0 auto 10px;width:54px;height:54px;border-radius:16px;
  background:color-mix(in oklch,var(--purple) 14%,var(--card));color:var(--purple)}
.consent-ico svg{width:28px;height:28px}
.consent-h{font-size:1.1rem;font-weight:700;margin-bottom:14px;text-wrap:balance}

/* ── LOGIN ── */
.login-card{display:flex;flex-direction:column;gap:7px;width:100%;max-width:330px;margin:0 auto;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);text-align:left}
.login-lbl{font-size:.74rem;font-weight:700;letter-spacing:.04em;color:var(--faint);margin-top:6px}
.login-in{width:100%;padding:14px 16px;font-size:1.1rem;background:var(--card-2);border:1.5px solid var(--line);
  border-radius:var(--radius-sm);color:var(--ink);outline:none;font-family:inherit}
.login-in.num{letter-spacing:5px;font-family:'Fredoka'}
.login-in:focus{border-color:var(--sky)}
.login-err{min-height:18px;font-size:.82rem;font-weight:700;color:var(--red)}
.login-card .btn{margin-top:10px}
.shake{animation:shake .42s}

/* ── LANGUAGE CHIPS (profile) ── */
.lang-row{display:flex;flex-wrap:wrap;gap:9px}
.lang-chip{padding:11px 18px;border:1.5px solid var(--line);background:var(--card);border-radius:999px;
  font-family:inherit;font-weight:700;font-size:.95rem;color:var(--muted);cursor:pointer;min-height:46px;transition:all .14s}
.lang-chip.on{border-color:var(--sky);background:color-mix(in oklch,var(--sky) 14%,var(--card));color:var(--sky-d)}
.lang-chip.lock{opacity:.85;cursor:default}
.lang-chip:active{transform:scale(.96)}

/* ── ALPHABET ── */
.alpha-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:8px 0}
.alpha-card{background:var(--card);border:1.5px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:26px 22px;width:100%;display:flex;flex-direction:column;align-items:center;
  gap:6px;cursor:pointer;animation:rise .3s}
.alpha-letter{font-family:'Fredoka';font-weight:600;font-size:5.6rem;line-height:1;color:var(--primary-d)}
.alpha-pic{font-size:4.2rem;line-height:1}
.alpha-word{font-size:clamp(1.2rem,5.2vw,1.7rem);font-weight:700;text-align:center;max-width:100%;text-wrap:balance;line-height:1.15}
.alpha-card.en .alpha-word,.opt.letter.en{font-family:'Fredoka';font-weight:500}
.speakbtn.big{font-size:1rem;padding:11px 22px;margin-top:14px}
.alpha-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.abtn{min-width:64px;min-height:56px;border:1.5px solid var(--line);background:var(--card);border-radius:var(--radius-sm);
  font-family:'Fredoka';font-size:1.5rem;font-weight:600;color:var(--ink);cursor:pointer;box-shadow:var(--shadow);transition:transform .12s}
.abtn:active{transform:scale(.95)}
.abtn.off{opacity:.35;pointer-events:none}
.abtn.go{background:var(--primary);color:#fff;font-size:1.05rem;padding:0 20px;box-shadow:var(--press) var(--primary-d),var(--shadow)}
.alpha-dots{font-family:'Fredoka';font-weight:600;color:var(--muted);font-size:1.05rem}
.opt.letter{font-family:'Fredoka';font-weight:600;font-size:2rem;min-height:84px}
.alpha-q .p-sub{margin-top:8px;font-weight:700;color:var(--ink)}
/* spelling reveal (typewriter) + delete-consent modal */
.spell-reveal{font-family:'Fredoka';font-weight:600;font-size:2.2rem;letter-spacing:.06em;min-height:1.5em;
  color:var(--sky-d);margin:10px 0 2px;text-align:center}
.spell-reveal.typing::after{content:'|';animation:caret .7s step-end infinite;color:var(--sky);font-weight:400}
@keyframes caret{50%{opacity:0}}
.del-card{text-align:center}
.del-ico{font-size:2.6rem;margin-bottom:6px}
.del-instr{font-size:.95rem;color:var(--muted);margin:14px 0 8px}
.del-in{text-align:center;font-family:'Fredoka';letter-spacing:1px}
.del-go{background:color-mix(in oklch,var(--red) 18%,var(--card));color:var(--red);border:1.5px solid color-mix(in oklch,var(--red) 30%,var(--line));margin-top:10px;transition:all .15s}
.del-go:disabled{opacity:.5;cursor:not-allowed}
.del-go.armed{background:var(--red);color:#fff;border-color:var(--red);box-shadow:var(--press) oklch(0.45 0.13 25),var(--shadow)}
/* category picker + chip + phrase prompt */
.cat-chip-row{display:flex;justify-content:center;margin-bottom:12px}
.cat-chip{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;min-height:44px;border:1.5px solid var(--line);
  background:var(--card);border-radius:999px;font-family:inherit;font-weight:700;font-size:.95rem;color:var(--muted);
  cursor:pointer;box-shadow:var(--shadow);transition:all .14s}
.cat-chip.on{border-color:var(--sky);background:color-mix(in oklch,var(--sky) 14%,var(--card));color:var(--sky-d)}
.cat-chip .cx{font-size:.78rem;opacity:.8}
.cat-chip:active{transform:scale(.96)}
/* „+N თემა" overflow hint under a capped grid → opens the full picker (owner 2026-06-13) */
.cat-more{display:block;margin:12px auto 0;padding:9px 18px;border:1.5px dashed var(--line);background:none;
  border-radius:999px;font-family:inherit;font-weight:700;font-size:.9rem;color:var(--muted);cursor:pointer}
.cat-more:active{transform:scale(.96)}
.topic-all{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;padding:15px 18px;
  margin-bottom:12px;border:1.5px solid var(--line);background:var(--card);border-radius:var(--radius-sm);
  font-family:inherit;font-weight:700;font-size:1.05rem;color:var(--ink);cursor:pointer;box-shadow:var(--shadow)}
.topic-all.on{border-color:var(--sky);background:color-mix(in oklch,var(--sky) 12%,var(--card))}
.topic-all:active{transform:scale(.98)}
.topic-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.topic-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:16px 10px;border:1.5px solid var(--line);
  background:var(--card);border-radius:var(--radius-sm);cursor:pointer;box-shadow:var(--shadow);font-family:inherit;transition:transform .12s,border-color .12s}
.topic-card:active{transform:scale(.96)}
.topic-card:hover{border-color:color-mix(in oklch,var(--primary) 45%,var(--line))}
.topic-ic{font-size:2.1rem;line-height:1}
.topic-name{font-weight:700;font-size:.98rem;color:var(--ink);text-align:center;text-wrap:balance}
.topic-n{font-size:.72rem;font-weight:700;color:var(--faint)}
.phrase-q{min-height:150px}
.spell-reveal.phrase{font-size:1.5rem;font-weight:600;line-height:1.35;text-wrap:balance;max-width:340px}
.phrase-opts .opt{font-size:1rem;min-height:54px;text-align:center}

/* counting: clear "how many?" prompt */
.count-prompt{display:flex;flex-direction:column;align-items:center;gap:14px;min-height:170px;justify-content:center}
.count-q{font-size:1.5rem;font-weight:700;color:var(--ink)}
.count-objects{font-size:2.6rem;line-height:1.4;letter-spacing:.12em;max-width:300px;text-align:center;word-spacing:.1em}
/* visual-first quiz: word with the first letter shown as a slot */
.alpha-wordgap{display:flex;align-items:center;justify-content:center;gap:2px;font-size:2rem;font-weight:700;margin:6px 0}
.alpha-wordgap.en{font-family:'Fredoka';font-weight:500}
.alpha-wordgap .gap-slot{display:inline-grid;place-items:center;min-width:1.5em;height:1.5em;border-radius:10px;
  background:color-mix(in oklch,var(--primary) 14%,var(--card));border:2px dashed color-mix(in oklch,var(--primary) 45%,var(--line));
  color:var(--primary-d);margin-right:3px;animation:gappulse 1.5s ease-in-out infinite}
@keyframes gappulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.finger-hint{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:8px;font-weight:700;color:var(--muted);font-size:.95rem;animation:fingerbob 1.4s ease-in-out infinite}
@keyframes fingerbob{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
.pulse-tap.tapped,.speakbtn.tapped{animation:taphit .4s ease}
@keyframes taphit{0%{transform:scale(1)}35%{transform:scale(1.12);background:color-mix(in oklch,var(--sky) 22%,var(--card))}100%{transform:scale(1)}}

/* ── subject cards: gentle "pick me" idle motion on the icon (owner request) ── */
@keyframes subjBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(-3deg)}}
.subj .s-ico{animation:subjBob 2.6s ease-in-out infinite;will-change:transform}
.subj:nth-child(2) .s-ico{animation-delay:.3s}
.subj:nth-child(3) .s-ico{animation-delay:.6s}
.subj:nth-child(4) .s-ico{animation-delay:.9s}
.subj:nth-child(5) .s-ico{animation-delay:1.2s}
@media (prefers-reduced-motion:reduce){.subj .s-ico{animation:none}}

/* ── bottom nav: theme emoji + slim variant inside games/tests (owner request) ── */
.navemoji{font-size:21px;line-height:1}
.bottomnav.slim{padding-top:4px;padding-bottom:calc(4px + env(safe-area-inset-bottom))}
.bottomnav.slim button{padding:4px 12px;gap:0}
.bottomnav.slim button svg{width:19px;height:19px}
.bottomnav.slim .navemoji{font-size:18px}
.bottomnav.slim .navdot{display:none}

/* ── parent dashboard: collapsible per-child cards (names by default, tap to expand) ── */
.kidcard{border:1px solid var(--line);border-radius:16px;background:var(--card);margin:0 0 12px;overflow:hidden}
.kid-head-btn{width:100%;display:flex;align-items:center;gap:12px;padding:13px 14px;background:none;border:none;cursor:pointer;font-family:inherit;text-align:left;color:var(--ink)}
.kid-head-btn .avatar{width:42px;height:42px;border-radius:13px;font-size:1.1rem;flex:0 0 auto}
.kid-head-btn .kh-meta{flex:1;min-width:0}
.kid-head-btn .kn{font-weight:700;font-size:1.02rem}
.kid-head-btn .kr{font-size:.8rem;color:var(--muted);margin-top:1px}
.kid-chev{font-size:.9rem;color:var(--muted);transition:transform .2s;flex:0 0 auto}
.kidcard.open .kid-chev{transform:rotate(180deg)}
.kid-body{padding:2px 14px 14px;animation:fade .2s ease}
.kid-body[hidden]{display:none}

/* ── Georgian sentence reading (#1 next step) ── */
.read-sent{font-size:1.8rem;font-weight:700;text-align:center;line-height:1.45;margin:8px 0;color:var(--ink);font-family:'Noto Sans Georgian',system-ui,sans-serif}

/* ── alphabet: same letter shown in several Georgian fonts (recognise across typefaces) ── */
.alpha-variants{display:flex;gap:20px;justify-content:center;align-items:center;margin:2px 0 4px;font-size:1.9rem;font-weight:600;color:var(--muted);opacity:.85}
.alpha-variants span{line-height:1}

/* ── interactive syllable builder (#2 "our მარცვლობანა") ── */
.syl-slots{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin:18px 0 6px}
.syl-slot{min-width:78px;height:68px;display:inline-grid;place-items:center;padding:0 12px;border-radius:16px;font-size:2rem;font-weight:800;color:var(--primary-d);border:2.5px dashed color-mix(in oklch,var(--primary) 42%,var(--line));background:color-mix(in oklch,var(--primary) 8%,var(--card))}
.syl-slot.filled{border-style:solid;background:var(--card);cursor:pointer}
.syl-slot.correct{border-color:var(--green);background:color-mix(in oklch,var(--green) 14%,var(--card));color:var(--green-d)}
.syl-slot.wrong{border-color:var(--red);background:color-mix(in oklch,var(--red) 12%,var(--card))}
.sylhint{margin:10px 0 2px;animation:fingerbob 1.2s ease-in-out infinite}
.syl-bank{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:6px}
.syl-bank .syl{font-size:1.9rem;font-weight:800;padding:14px 24px;border-radius:18px;min-width:72px;background:color-mix(in oklch,var(--sun) 22%,var(--card));border:2px solid color-mix(in oklch,var(--sun) 50%,var(--line));color:var(--ink);box-shadow:0 4px 12px rgba(40,30,20,.12);animation:sylbob 1.7s ease-in-out infinite;cursor:grab}
.syl-bank .syl:nth-child(2){animation-delay:.28s}
.syl-bank .syl:nth-child(3){animation-delay:.56s}
.syl-bank .syl:nth-child(4){animation-delay:.84s}
.syl-bank .syl:active{transform:scale(.92)}
@keyframes sylbob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-6px) rotate(1deg)}}
.syl-bank .syl.used{opacity:.2;pointer-events:none;animation:none;box-shadow:none}

/* ── writing / tracing (trace a letter with the finger over a faint guide) ── */
.trace-stage{position:relative;width:min(80vw,300px);height:min(80vw,300px);margin:12px auto;border-radius:24px;background:var(--card);border:2px solid var(--line);overflow:hidden;box-shadow:0 4px 16px rgba(40,30,20,.06)}
.trace-letter{position:absolute;inset:0;display:grid;place-items:center;font-size:11rem;font-weight:700;line-height:1;color:color-mix(in oklch,var(--primary) 15%,var(--card));font-family:'FiraGO','Noto Sans Georgian',system-ui,sans-serif;user-select:none;pointer-events:none}
.trace-letter.guided{color:color-mix(in oklch,var(--primary) 13%,var(--card))}
.trace-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.trace-tools{display:flex;gap:10px;justify-content:center;align-items:center;margin-top:12px;flex-wrap:wrap}
/* virtual-pen REVEALS the real font letter as it sweeps (✍️ ამოწერა) */
.stroke-guide{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.gd{fill:color-mix(in oklch,var(--primary) 60%,var(--card));fill-opacity:0;stroke:var(--primary,#6B63B5);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round}
.sg-pen{transition:opacity .2s}

/* ── owl close + alive ── */
.ai-bubble{position:relative}
.ai-close{position:absolute;top:10px;right:10px;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);
  background:var(--card-2);color:var(--muted);font-size:1.05rem;font-weight:700;cursor:pointer;line-height:1;
  display:grid;place-items:center;z-index:2}
.ai-close:active{transform:scale(.9)}
.ai-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-right:34px}
.ai-ava.alive{animation:bob 2.4s ease-in-out infinite}
.ai-listen-big{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin:12px 0 4px;
  padding:15px;border:none;border-radius:14px;cursor:pointer;font-family:inherit;font-weight:700;font-size:1.05rem;
  background:linear-gradient(150deg,var(--sky),var(--sky-d));color:#fff;box-shadow:var(--shadow)}
.ai-listen-big svg{width:22px;height:22px}
.ai-listen-big.tapped{animation:taphit .4s ease}
.hint-dots{display:flex;align-items:center;gap:7px;margin-top:10px}
.hint-dot{width:11px;height:11px;border-radius:50%;background:var(--line);display:grid;place-items:center;font-size:.6rem;color:#fff;transition:all .2s}
.hint-dot.on{background:var(--sky);transform:scale(1.25)}
.hint-dot.star{background:var(--sun);color:#fff;width:16px;height:16px;border-radius:50%;font-size:.7rem}
.hint-dot.star.on{background:var(--sun-d)}

/* ── v1.98 card-depth language: stack = opens MORE cards (folder look), play = starts a game (▶) ──
   Layered offset shadows fake the "deck of cards behind" without z-index tricks, so it works
   inside any stacking context. A non-reader reads the depth, not the text. */
.mode{position:relative}
/* freemium-locked Kings mode: visible (transparency) but dimmed + 🔒 badge; tap = upsell (owner 2026-06-23) */
.mode.locked{opacity:.62;filter:saturate(.55)}
.mode.locked .lock-badge{position:absolute;right:8px;top:8px;font-size:.82rem;opacity:.85;pointer-events:none}
.stack{box-shadow:3px 4px 0 -1px var(--card),3.5px 4.5px 0 0 var(--line),7px 9px 0 -2px var(--card),7.5px 9.5px 0 -1px color-mix(in oklch,var(--line) 70%,transparent)}
.stack:active{box-shadow:1px 1.5px 0 -1px var(--card),1.5px 2px 0 0 var(--line)}
.play-badge{position:absolute;right:9px;bottom:9px;width:23px;height:23px;border-radius:50%;
  background:color-mix(in oklch,var(--green,#7bb661) 88%,#fff);color:#fff;display:grid;place-items:center;
  font-size:.58rem;padding-left:2px;box-shadow:0 1px 3px rgba(40,30,20,.22);pointer-events:none}
.subj.kids .play-badge{width:27px;height:27px;font-size:.68rem}
/* ── D5 (v2.01): desktop-only hover reveal — a parent browsing on a computer sees "what's inside"
   each card without tapping. Pointer:fine + hover:hover guards it OFF for kids on touch. The
   summary slides up + the card tilts in 3D (the "rotate" feel) using data-sum via ::after. */
@media (hover:hover) and (pointer:fine){
  .subj{transition:transform .26s ease, box-shadow .26s ease}
  /* a brand-colored summary card that POPS UP higher on hover (owner: rise more, not grey) */
  .subj[data-sum]::after{content:attr(data-sum);position:absolute;left:8px;right:8px;bottom:8px;
    background:var(--primary,#6B63B5);color:#fff;font-size:.82rem;font-weight:600;line-height:1.36;
    padding:11px 12px;border-radius:14px;text-align:center;box-shadow:0 8px 20px rgba(40,30,20,.28);
    opacity:0;transform:translateY(45%) scale(.95);transform-origin:bottom center;
    transition:opacity .2s ease, transform .24s cubic-bezier(.2,.9,.3,1.25);pointer-events:none}
  .subj[data-sum]:hover{transform:translateY(-6px);box-shadow:0 18px 34px rgba(40,30,20,.2)}
  .subj[data-sum]:hover::after{opacity:1;transform:translateY(-6px) scale(1)}
}
@media (prefers-reduced-motion:reduce){
  .subj[data-sum]::after{transition:opacity .15s ease;transform:none}
  .subj[data-sum]:hover{transform:none}
  .subj[data-sum]:hover::after{transform:none}
}
/* ── D1 (v2.03): subject Path (გზა) strip + total-progress meter ── */
.pathcard{background:var(--card,#fff);border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;margin:0 0 12px}
.pathcard .path-top{display:flex;justify-content:space-between;align-items:center;font-size:.92rem;gap:8px}
.path-pct{font-size:.8rem;color:var(--muted);font-weight:700;white-space:nowrap}
.tp-meter .bar{margin-top:8px}
.path-steps{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:10px}
.parrow{color:var(--line);font-weight:700}
.pstep{display:inline-flex;align-items:center;gap:5px;background:color-mix(in oklch,var(--line) 30%,transparent);border-radius:20px;padding:5px 10px;font-size:.78rem}
.pstep .pdot{width:18px;height:18px;border-radius:50%;background:var(--line);color:#fff;display:grid;place-items:center;font-size:.66rem;font-weight:700}
.pstep.done{background:color-mix(in oklch,var(--green,#7bb661) 18%,var(--card))}
.pstep.done .pdot{background:var(--green-d,#3f8f46)}
.pstep.next{background:color-mix(in oklch,var(--primary,#6B63B5) 16%,var(--card));cursor:pointer;font-weight:700}
.pstep.next .pdot{background:var(--primary-d,#564fa0)}
.pstep.next:active{transform:translateY(1px)}
.path-hint{margin-top:9px;font-size:.8rem;color:var(--muted);text-align:center}
.diag-offer{border-color:color-mix(in oklch,var(--primary,#6B63B5) 35%,var(--line))}
/* ── v2.07: parent space readability — the dashboard was tiny + grey + hard to read (owner feedback).
   Scoped to .screen.parent so the kid UI is untouched. Bigger sizes, darker text (ink+opacity, not grey). */
.screen.parent .section-label{font-size:.8rem;color:var(--ink);opacity:.6;letter-spacing:.03em}
.screen.parent .scard .sl{font-size:.76rem;color:var(--ink);opacity:.72;font-weight:600}
.screen.parent .scard .sv{font-size:1.55rem}
.screen.parent .eng-l{font-size:.74rem;color:var(--ink);opacity:.72}
.screen.parent .eng-v{font-size:1.62rem}
.screen.parent .insight .it{font-size:.96rem;line-height:1.5}
.screen.parent .kid-head-btn .kn{font-size:1.14rem}
.screen.parent .kid-head-btn .kr{font-size:.88rem;color:var(--ink);opacity:.74}
.screen.parent .lvl-hint,.screen.parent .eng-note{font-size:.84rem;color:var(--ink);opacity:.72;line-height:1.5}
.screen.parent .privacy-card .pt{font-size:.9rem;line-height:1.5}
/* v1.108: parent settings grouped into tidy cards (was a long flat label+button list) */
.pgroup{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 15px;margin:14px 0 0}
.pgroup-h{font-family:'Fredoka','Noto Sans Georgian',sans-serif;font-weight:600;font-size:1rem;color:var(--ink);margin:0 0 10px}
/* collapsible settings group (rare/admin groups start collapsed, owner 2026-06-23) */
.pgroup.collapsible{padding-bottom:14px}
.pgroup-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;background:none;border:none;
  cursor:pointer;padding:0;margin:0;font-family:inherit;color:inherit;text-align:left}
.pgroup.collapsible .pg-chev{font-size:.9rem;opacity:.55;margin-left:8px}
.pgroup .pg-body[hidden]{display:none}
.pset-lbl{font-size:.84rem;font-weight:700;color:var(--ink);opacity:.78;margin:0 0 7px}
.pset-hint{font-size:.8rem;color:var(--ink);opacity:.66;line-height:1.45;margin:7px 2px 0;text-align:center}
.limit-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
/* container tap: the card "opens" (grows + fades) before its children render */
.unfolding{animation:stackOpen .2s ease forwards}
@keyframes stackOpen{to{transform:scale(1.08);opacity:0}}
/* children pop in with a small stagger — teaches "this card BECAME these cards" */
.mode-grid>.mode,.topic-grid>.topic-card{animation:cardIn .26s ease backwards}
@keyframes cardIn{from{transform:scale(.86);opacity:0}to{transform:scale(1);opacity:1}}
.mode-grid>*:nth-child(2),.topic-grid>*:nth-child(2){animation-delay:.04s}
.mode-grid>*:nth-child(3),.topic-grid>*:nth-child(3){animation-delay:.08s}
.mode-grid>*:nth-child(4),.topic-grid>*:nth-child(4){animation-delay:.12s}
.mode-grid>*:nth-child(5),.topic-grid>*:nth-child(5){animation-delay:.16s}
.mode-grid>*:nth-child(6),.topic-grid>*:nth-child(6){animation-delay:.2s}
.mode-grid>*:nth-child(7),.topic-grid>*:nth-child(7){animation-delay:.24s}
.mode-grid>*:nth-child(8),.topic-grid>*:nth-child(8){animation-delay:.28s}
@media (prefers-reduced-motion:reduce){
  .unfolding,.mode-grid>.mode,.topic-grid>.topic-card{animation:none}
}

/* ── "საუბარი და ფიქრი" / Talk & Think (v1.110) — discussion cards, no scoring ── */
.subj.talk .s-ico{filter:saturate(1.05)}
.screen.talk,.screen.talk-pick{display:flex;flex-direction:column;align-items:center;gap:16px;padding:18px 16px 26px;min-height:100%}
.talk-pick .talk-hero{text-align:center;margin-top:18px}
.talk-hero-ic{font-size:3.4rem;line-height:1}
.talk-pick h2{margin:8px 0 2px;color:var(--ink);font-size:1.5rem}
.talk-lead{color:var(--muted);max-width:300px;margin:0 auto;line-height:1.5}
.talk-back{align-self:flex-start;width:42px;height:42px;font-size:1.1rem}
.talk-decks{display:flex;flex-direction:column;gap:14px;width:100%;max-width:360px;margin-top:6px}
.talk-deck{display:flex;flex-direction:column;align-items:center;gap:4px;padding:22px 16px;border:2px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);cursor:pointer;transition:transform .12s,box-shadow .12s,border-color .12s}
.talk-deck:active{transform:translateY(2px)}
.talk-deck.ka{border-color:color-mix(in oklch,var(--green) 45%,var(--line))}
.talk-deck.en{border-color:color-mix(in oklch,var(--sky) 45%,var(--line))}
.td-flag{font-size:2.4rem;line-height:1}
.td-name{font-weight:700;color:var(--ink);font-size:1.12rem}
.td-sub{color:var(--faint);font-size:.86rem}
/* card */
.talk-top{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:380px}
.talk-count{color:var(--muted);font-weight:600;font-size:.95rem}
.talk-card{width:100%;max-width:380px;background:var(--card);border-radius:26px;box-shadow:var(--shadow-lg);border-top:6px solid var(--tc,var(--primary));padding:22px 20px 18px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;animation:talkin .26s ease both}
@keyframes talkin{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.talk-theme{display:inline-flex;align-items:center;gap:7px;padding:5px 13px;border-radius:999px;background:color-mix(in oklch,var(--tc,var(--primary)) 16%,var(--card));color:var(--tc,var(--primary-d));font-weight:700;font-size:.9rem}
.talk-theme .tt-ic{font-size:1.05rem}
.talk-emoji{font-size:3.4rem;line-height:1.1}
.talk-q{font-size:1.32rem;font-weight:600;color:var(--ink);line-height:1.42}
.talk-subs{font-size:1rem;color:var(--muted);line-height:1.45;background:var(--card-2);border-radius:14px;padding:10px 13px;width:100%}
.talk-subs .ts-lab{font-weight:700;color:var(--faint);display:block;margin-bottom:2px;font-size:.82rem;text-transform:none}
/* v1.187 — end-of-card interaction row (offline creative prompts) */
.talk-do{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center;width:100%;margin-top:2px}
/* v1.189 — owner: differentiate elements by COLOR. „ახლა შენ:" prompt + chips take the theme color (accent),
   the question stays dark ink (max readability). So a regular card has 2 colour zones: dark question + themed prompt. */
.talk-do .td-lab{font-weight:800;color:color-mix(in oklch,var(--tc,var(--primary)) 70%,var(--ink));font-size:.84rem;width:100%}
.talk-do .td-chip{display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:999px;background:color-mix(in oklch,var(--tc,var(--primary)) 14%,var(--card));color:color-mix(in oklch,var(--tc,var(--primary)) 78%,var(--ink));font-size:.92rem;font-weight:700;line-height:1.2}
/* v1.188/1.189 — poem card: serif typeface (reads like a verse) + a warm themed ink, multi-line preserved.
   v1.192 (owner 2026-06-17): align LEFT so verse lines read naturally (not centre-ragged); the block is
   shrink-to-fit and centred in the card, so a short poem still sits in the middle; stanzas (blank lines /
   \n\n in the source) are preserved by white-space:pre-line. */
.talk-q.talk-poem{white-space:pre-line;text-align:left;display:block;width:fit-content;max-width:100%;margin:0 auto;font-family:'Noto Serif Georgian',serif;font-size:1.06rem;font-style:italic;line-height:1.5;color:color-mix(in oklch,var(--tc,var(--green)) 58%,var(--ink))}
/* v1.192: each verse line is its own .pln element so a too-long line wraps with a HANGING INDENT
   (continuation tucks under the line, never a lone dangling word/dash). Empty line = stanza gap. */
.talk-q.talk-poem .pln{display:block;padding-left:1.15em;text-indent:-1.15em;min-height:.6em}
.talk-by{display:inline-flex;align-items:center;gap:8px;margin-top:2px;color:var(--faint);font-size:.92rem}
.talk-by .tb-em{font-size:1.4rem}
.talk-by .tb-logo{width:32px;height:32px;object-fit:contain;vertical-align:middle} /* v1.191 — brand owl mascot on talk cards */
.talk-listen{max-width:200px}
.talk-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:380px;margin-top:2px}
.tnav{flex:0 0 auto;min-width:96px;height:52px;border-radius:99px;border:none;background:var(--primary);color:#fff;font-size:1rem;font-weight:700;padding:0 16px;cursor:pointer;box-shadow:var(--shadow);transition:transform .1s,opacity .15s;white-space:nowrap}
.tnav:active{transform:translateY(2px)}
.tnav:disabled{opacity:.4;cursor:default;background:var(--faint);color:var(--muted)}
.talk-prog{flex:1 1 auto;min-width:0;max-width:160px;height:8px;border-radius:99px;background:var(--line);overflow:hidden}
.talk-prog>i{display:block;height:100%;background:var(--primary);border-radius:99px;transition:width .2s}
.talk-note{color:var(--faint);font-size:.85rem;text-align:center;max-width:300px;line-height:1.4}
@media (prefers-reduced-motion:reduce){ .talk-card{animation:none} }

/* v1.118 — letter↔sound link: emphasise the target letter inside its example word */
.alpha-word .lead{color:var(--primary);font-weight:800;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}