/* ────────────────────────────────────────────────────────────
   components.css — profile picker, menu, prompt, answer buttons,
   settings panel and the lock screen.
   ──────────────────────────────────────────────────────────── */

/* ── profile picker ─────────────────────────────────────── */

#profileGrid{
  display:flex; gap:22px; flex-wrap:wrap; justify-content:center;
  width:min(700px,94vw);
}
.profile-card{
  --kid:var(--coral);
  border:none; background:var(--white); border-radius:32px;
  padding:22px 18px 18px; cursor:pointer; font-family:inherit; color:var(--ink);
  box-shadow:0 8px 0 var(--shadow); transition:transform .15s;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  min-width:150px;
}
.profile-card:active{ transform:translateY(4px); box-shadow:0 4px 0 var(--shadow); }
.profile-avatar{
  width:104px; height:104px; border-radius:50%;
  background:var(--kid); display:grid; place-items:center;
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.08);
}
.profile-avatar svg{ width:92px; height:92px; border-radius:50%; }
.profile-name{ font-size:24px; font-weight:bold; }
.profile-meta{ font-size:16px; color:#8B8BA8; }

/* ── the learning hub ───────────────────────────────────────
   The dashboard from the Amani Playful Learning design system.

   The design draws six worlds in one column. This app has up to
   nineteen, so the column becomes a responsive grid — the card
   anatomy is the design's (icon tile, title, chevron), the count is
   ours. A nineteen-card single column is a scroll a four-year-old
   never reaches the bottom of.
   ─────────────────────────────────────────────────────────── */

.dash{
  /* 720 is right for a tablet held in two hands, and it is what this
     app is for. On a laptop it left a narrow strip down the middle
     with the screen empty either side — the app looked like a phone
     someone had photographed. It widens on a real desktop instead,
     and the card grid gains a third column to fill it. */
  width:min(720px,100%); margin-inline:auto;
  display:flex; flex-direction:column; gap:18px;
  padding:4px 16px 24px; overflow-y:auto; flex:1;
  align-self:stretch;
}

/* ── greeting ── */

.greet{ display:flex; align-items:center; gap:14px; padding-top:4px; }
.greet-avatar{
  width:56px; height:56px; border-radius:50%; flex-shrink:0;
  background:var(--grape); display:grid; place-items:center;
  /* the charter's avatar: thick white ring, soft drop shadow */
  border:4px solid var(--white);
  box-shadow:0 4px 12px var(--shadow);
}
.greet-avatar svg{ width:100%; height:100%; border-radius:50%; }
.greet-words{ flex:1; min-width:0; }
.greet-hi{
  font-size:clamp(24px,5.6vw,32px); font-weight:900; line-height:1.15;
  color:var(--ink); letter-spacing:-.01em;
}
.greet-sub{ font-size:15px; color:var(--ink-soft); margin-top:2px; }

.switch-btn{
  border:none; background:var(--white); border-radius:var(--r-pill);
  min-width:var(--tap); height:var(--tap); padding:0 14px;
  font-family:inherit; font-size:19px; color:var(--vibrant-deep);
  cursor:pointer; box-shadow:0 3px 0 var(--shadow); flex-shrink:0;
}
.switch-btn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--shadow); }

/* ── today's goal ── */

.goal-card{
  display:flex; align-items:center; gap:18px;
  background:var(--white); border-radius:var(--r-lg); padding:20px 22px;
  box-shadow:0 2px 0 rgba(2,28,56,.04), 0 10px 26px var(--shadow-cool);
}
.goal-ring{ position:relative; width:76px; height:76px; flex-shrink:0; }
.goal-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.goal-ring circle{ fill:none; stroke-width:5; stroke-linecap:round; }
.goal-track{ stroke:var(--surface-3); }
.goal-fill{
  stroke:var(--sunshine);
  /* 2πr for r=19; the dash offset is set from JS as a fraction of it */
  stroke-dasharray:119.38; stroke-dashoffset:119.38;
  transition:stroke-dashoffset .7s cubic-bezier(.3,.9,.3,1);
}
.goal-pct{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:17px; font-weight:900; color:var(--sunshine-deep);
}
.goal-title{ font-size:18px; font-weight:900; color:var(--ink); }
.goal-meta{ font-size:14px; color:var(--ink-soft); margin-top:3px; }
.goal-card.is-done .goal-fill{ stroke:var(--lime); }
.goal-card.is-done .goal-pct{ color:var(--lime-deep); }

/* ── worlds ── */

.worlds-head{
  font-size:20px; font-weight:900; color:var(--ink);
  margin-top:2px;
}

.menu-grid{
  display:grid; grid-template-columns:1fr; gap:12px;
}
@media (min-width:560px){ .menu-grid{ grid-template-columns:1fr 1fr; } }

/* a laptop, not a tablet */
@media (min-width:1180px){
  .dash{ width:min(1080px,100%); }
  .menu-grid{ grid-template-columns:repeat(3,1fr); }
  .greet-hi{ font-size:34px; }
  .goal-card{ padding:24px 28px; }
}

.menu-card{
  display:flex; align-items:center; gap:15px; text-align:start;
  border:none; border-radius:var(--r-lg); padding:15px 16px;
  min-height:var(--tap); cursor:pointer; font-family:inherit; color:var(--ink);
  background:var(--white);
  /* the chunky card: a 2px coloured edge, and a shadow tinted with the
     card's own colour rather than grey */
  box-shadow:inset 0 0 0 2px var(--edge,var(--surface-3)),
             0 6px 18px var(--glow,var(--shadow));
  transition:transform .15s, box-shadow .15s;
}
.menu-card:active{ transform:translateY(3px) scale(.99); }

/* the icon tile — where the card's colour actually lives */
.menu-tile{
  width:54px; height:54px; border-radius:var(--r-md); flex-shrink:0;
  display:grid; place-items:center; background:var(--tile,var(--surface-2));
}
.menu-tile .ico{ width:34px; height:34px; }

.menu-words{ flex:1; min-width:0; }
.menu-label{ font-size:17px; font-weight:900; line-height:1.2; }
.menu-blurb{
  font-size:13px; color:var(--ink-soft); line-height:1.3; margin-top:2px;
  display:none;                      /* shown only where copy exists */
}
.menu-card.has-blurb .menu-blurb{ display:block; }

.menu-go{
  width:26px; height:26px; flex-shrink:0; opacity:.35;
  display:grid; place-items:center;
}
.menu-go svg{ width:100%; height:100%; }
/* the chevron points the way the language reads, not always right */
[dir="rtl"] .menu-go svg{ transform:scaleX(-1); }

/* Each card carries its colour as three tokens — the tile it sits in,
   the 2px edge, and the shadow it casts. The four names are the ones
   the game catalogue has always used. */
.c-sun  { --tile:#FFF0B8; --edge:rgba(255,204,0,.55);  --glow:var(--shadow-warm); }
.c-coral{ --tile:#FFD9DF; --edge:rgba(255,143,163,.6); --glow:rgba(157,64,83,.18); }
.c-mint { --tile:#D3F7E4; --edge:rgba(126,232,178,.7); --glow:rgba(31,122,79,.16); }
.c-grape{ --tile:#E3DFFF; --edge:rgba(91,76,224,.42);  --glow:var(--shadow-cool); }

/* ── prompt ─────────────────────────────────────────────── */

.prompt{
  background:var(--white); border-radius:24px; padding:14px 24px;
  font-size:clamp(19px,4.2vw,30px); font-weight:bold; text-align:center;
  box-shadow:0 5px 0 rgba(58,58,86,.15); max-width:94vw;
  display:flex; align-items:center; gap:14px; justify-content:center; flex-wrap:wrap;
}
#promptSub{
  display:none; width:100%; font-size:14px; font-weight:normal; color:#8B8BA8;
}
.speak-again{
  border:none; background:var(--sun); border-radius:50%;
  width:64px; height:64px; cursor:pointer; padding:13px;
  box-shadow:0 5px 0 var(--shadow); flex-shrink:0;
  animation:pulse 2s ease-in-out infinite; display:grid; place-items:center;
}
.speak-again svg{ width:100%; height:100%; }
@keyframes pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.09); } }
.speak-again:active{ transform:translateY(3px) scale(1); box-shadow:0 1px 0 var(--shadow); animation:none; }

/* ── stage (the illustration area) ──────────────────────── */

.emoji-stage{
  display:none; align-items:center; justify-content:center;
  background:rgba(255,255,255,.6); border-radius:24px; padding:12px 18px;
  max-width:94vw; max-height:38vh; overflow:hidden;
}
.icon-row{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; align-items:center; max-width:88vw; }
.icon-sum{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.icon-sum .icon-row{ max-width:36vw; }
.sum-op{ font-size:34px; font-weight:bold; }
.sum-text{ font-size:clamp(34px,9vw,60px); font-weight:bold; letter-spacing:2px; }

/* ── answer buttons ─────────────────────────────────────── */

.options{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; width:min(540px,94vw); }
.opt{
  border:none; border-radius:24px; background:var(--white);
  font-family:inherit; font-size:clamp(30px,8vw,50px); font-weight:bold; color:var(--ink);
  padding:18px 6px; cursor:pointer; box-shadow:0 7px 0 var(--shadow);
  transition:transform .12s; line-height:1.1;
}
.opt.word{ font-size:clamp(17px,4.4vw,26px); padding:20px 8px; }
.opt.sentence{ font-size:clamp(15px,3.6vw,21px); padding:16px 10px; line-height:1.35; }
.opt.icon-opt{ padding:12px; display:grid; place-items:center; }
.opt.swatch-opt{ min-height:92px; }
.opt.arabic-opt{ font-family:var(--arabic); font-size:clamp(26px,7vw,42px); }
.opt.arabic-text{ font-family:var(--arabic); }
.opt:active{ transform:translateY(4px); box-shadow:0 3px 0 var(--shadow); }
.opt.correct{ background:var(--mint); animation:pop .5s; }
.opt.wrong{ background:var(--coral); animation:shake .45s; }
@keyframes pop{ 40%{ transform:scale(1.16); } 100%{ transform:scale(1); } }
@keyframes shake{ 20%,60%{ transform:translateX(-8px); } 40%,80%{ transform:translateX(8px); } }

/* ── small action buttons shared by several games ───────── */

.mini-actions{ display:flex; gap:12px; justify-content:center; }
.mini-btn{
  border:none; background:var(--white); border-radius:18px;
  width:58px; height:52px; font-size:24px; cursor:pointer;
  box-shadow:0 4px 0 var(--shadow); font-family:inherit; color:var(--ink);
}
.mini-btn.wide{ width:74px; }
.mini-btn.ok{ background:var(--mint); }
.mini-btn.ok.ready{ animation:pulse 1.6s ease-in-out infinite; }
.mini-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--shadow); }
.mini-btn:disabled{ opacity:.45; }

/* ── settings panel ─────────────────────────────────────── */

#settings{
  position:fixed; inset:0; z-index:30; display:none;
  align-items:center; justify-content:center;
  background:rgba(58,58,86,.45); direction:ltr;
}
#settings.show{ display:flex; }
.panel{
  background:var(--white); border-radius:24px; padding:22px;
  width:min(460px,93vw); max-height:88vh; overflow-y:auto;
  box-shadow:0 10px 40px rgba(0,0,0,.25);
}
.panel h2{ font-size:20px; margin-bottom:12px; }
.panel h2 small{ font-size:13px; color:#999; font-weight:normal; }

.set-sep{ border-top:2px dashed #E0E0EE; margin:18px 0 12px; }
.set-head b{ font-size:16px; }
.set-head p{ font-size:12px; color:#777; margin:4px 0 9px; line-height:1.45; }

.kid-row{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.kid-avatar{
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  flex-shrink:0; display:grid; place-items:center; padding:2px;
  box-shadow:0 3px 0 rgba(58,58,86,.18);
}
.kid-avatar svg{ width:100%; height:100%; border-radius:50%; }
.kid-name{
  flex:1; min-width:0; font-family:inherit; font-size:15px; padding:9px 10px;
  border:2px solid #E0E0EE; border-radius:12px; background:#FAFAFF; color:var(--ink);
}
.kid-age{
  font-family:inherit; font-size:14px; padding:9px 6px; width:84px;
  border:2px solid #E0E0EE; border-radius:12px; background:#FAFAFF; color:var(--ink);
}
.kid-stars{ font-size:14px; color:#C9A227; min-width:48px; text-align:right; }

.voice-row{ display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.voice-row .vflag{ width:30px; flex-shrink:0; }
.voice-row .vflag svg{ width:30px; height:22px; border-radius:5px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); display:block; }
.voice-row select{
  flex:1; min-width:0; font-family:inherit; font-size:14px; padding:9px 8px;
  border:2px solid #E0E0EE; border-radius:12px; background:#FAFAFF; color:var(--ink);
}
/* the Android app has nothing to choose: it names the voice instead */
.native-voice{
  flex:1; min-width:0; font-size:14px; padding:9px 8px;
  border:2px solid #E0E0EE; border-radius:12px; background:#FAFAFF; color:var(--ink);
}
.voice-test{
  border:none; background:var(--sun); border-radius:12px; width:44px; height:40px;
  font-size:16px; cursor:pointer; flex-shrink:0; font-family:inherit;
  box-shadow:0 3px 0 rgba(58,58,86,.2); color:var(--ink);
}
.voice-test.auto{ width:auto; padding:0 12px; font-size:14px; }
.voice-test:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(58,58,86,.2); }
.voice-test:disabled{ opacity:.5; }

.wide-select,.wide-input{
  width:100%; font-family:inherit; font-size:14px; padding:10px;
  border:2px solid #E0E0EE; border-radius:12px; background:#FAFAFF;
  color:var(--ink); margin-bottom:8px;
}
.btn-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.no-voice-note{ font-size:12px; color:#C1272D; margin:-4px 0 10px 38px; }
.pack-prog{ font-size:12px; color:#555; margin-top:8px; }
.prem-status{ font-size:12px; margin-top:8px; }
.prem-status[data-state="on"]{ color:#0A8A4A; }
.prem-status[data-state="off"]{ color:#999; }
.prem-status[data-state="err"]{ color:#C1272D; }

.panel .close{
  width:100%; border:none; background:var(--mint); border-radius:14px; padding:12px;
  font-family:inherit; font-size:17px; font-weight:bold; color:var(--ink);
  cursor:pointer; box-shadow:0 4px 0 var(--shadow); margin-top:16px;
}
.panel .close:active{ transform:translateY(2px); box-shadow:0 2px 0 var(--shadow); }

/* ── lock screen ────────────────────────────────────────── */

#lockScreen{
  position:fixed; inset:0; z-index:50; display:none;
  align-items:center; justify-content:center;
  background:linear-gradient(180deg,#2B2B4A,#3A3A66); direction:ltr;
}
#lockScreen.show{ display:flex; }
.lock-inner{ text-align:center; color:#fff; padding:20px; max-width:92vw; }
.lock-moon{ width:min(38vw,160px); margin:0 auto; animation:floaty 3s ease-in-out infinite; }
.lock-moon svg{ width:100%; height:auto; }
@keyframes floaty{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-14px); } }
.lock-msg{ font-size:clamp(19px,4.6vw,28px); font-weight:bold; margin:16px 0 24px; line-height:1.4; }
#parentBtn{
  border:none; background:rgba(255,255,255,.15); color:#fff; border-radius:16px;
  padding:12px 22px; font-family:inherit; font-size:15px; cursor:pointer;
}
#gate{ margin-top:18px; display:none; gap:8px; justify-content:center; align-items:center; }
#gateQ{ font-size:22px; }
#gateA{ width:90px; font-size:22px; text-align:center; padding:8px;
  border-radius:12px; border:none; font-family:inherit; }
#gateOk{
  border:none; background:var(--sun); border-radius:12px; padding:9px 18px;
  font-size:18px; font-family:inherit; font-weight:bold; cursor:pointer; color:var(--ink);
}

/* ── motion ──────────────────────────────────────────────────
   Entrances are staggered with a per-card --i index set in JS.
   Everything here collapses to nothing under prefers-reduced-motion,
   which the block at the end of base.css also enforces.
   ─────────────────────────────────────────────────────────── */

@keyframes riseIn{
  from{ opacity:0; transform:translateY(16px) scale(.94); }
  to  { opacity:1; transform:none; }
}
@keyframes popIn{
  0%  { opacity:0; transform:scale(.6) rotate(-6deg); }
  60% { opacity:1; transform:scale(1.06) rotate(2deg); }
  100%{ opacity:1; transform:none; }
}
@keyframes breathe{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-5px); }
}
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to  { opacity:1; transform:none; }
}

/* the portal: profile cards drop in one after another */
.profile-card{
  animation:popIn .5s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay:calc(var(--i, 0) * 110ms);
}
.profile-card .profile-avatar{ animation:breathe 3.4s ease-in-out infinite; }
.profile-card:nth-child(even) .profile-avatar{ animation-delay:-1.7s; }
.profile-card:hover{ transform:translateY(-3px); }
#pickerTitle{ animation:fadeUp .45s ease both; }

/* the menu: cards cascade in */
.menu-card{
  animation:riseIn .38s ease backwards;
  animation-delay:calc(var(--i, 0) * 45ms);
}
.menu-card:hover{ transform:translateY(-2px); }

/* a round arriving */
.screen.show .prompt{ animation:fadeUp .3s ease both; }
.emoji-stage{ animation:popIn .42s cubic-bezier(.34,1.56,.64,1) both; }
.options .opt{
  animation:riseIn .3s ease backwards;
  animation-delay:calc(var(--i, 0) * 55ms);
}

/* screen changes */
.screen.show{ animation:fadeUp .28s ease both; }

/* the star count reacts when it goes up */
@keyframes starBump{ 40%{ transform:scale(1.35) rotate(-8deg); } 100%{ transform:none; } }
.chip.bump .ico{ animation:starBump .5s ease; }

@media (prefers-reduced-motion:reduce){
  .profile-card,.menu-card,.options .opt,.screen.show,
  .emoji-stage,.screen.show .prompt,#pickerTitle{ animation:none !important; }
  .profile-card .profile-avatar{ animation:none !important; }
  .profile-card:hover,.menu-card:hover{ transform:none; }
}

/* ── parent PIN ─────────────────────────────────────────── */
.pin-backdrop{
  position:fixed; inset:0; z-index:60; display:flex;
  align-items:center; justify-content:center;
  background:rgba(58,58,86,.55); direction:ltr;
}
.pin-panel{
  background:var(--white); border-radius:24px; padding:22px;
  width:min(320px,90vw); box-shadow:0 12px 40px rgba(0,0,0,.3); text-align:center;
}
.pin-panel.shake{ animation:shake .45s; }
.pin-title{ font-size:18px; font-weight:bold; margin-bottom:14px; }
.pin-help{ font-size:12px; color:#777; line-height:1.5; margin-bottom:12px; text-align:left; }
.pin-dots{ display:flex; gap:14px; justify-content:center; margin-bottom:8px; }
.pin-dot{
  width:15px; height:15px; border-radius:50%;
  background:#E4E4F0; box-shadow:inset 0 0 0 2px #D0D0E4;
}
.pin-dot.on{ background:var(--sun); box-shadow:inset 0 0 0 2px rgba(58,58,86,.25); }
.pin-msg{ font-size:12px; color:#C1272D; min-height:17px; margin-bottom:8px; }
.pin-pad{ display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }
.pin-key{
  border:none; background:#F3F3FA; border-radius:14px; padding:14px 0;
  font-family:inherit; font-size:21px; font-weight:bold; color:var(--ink);
  cursor:pointer; box-shadow:0 3px 0 rgba(58,58,86,.14);
}
.pin-key:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(58,58,86,.14); }
.pin-key.soft{ background:#E8E8F4; font-size:17px; }
.pin-forgot{
  border:none; background:none; color:#7A7A96; font-family:inherit;
  font-size:13px; margin-top:12px; cursor:pointer; text-decoration:underline;
}
.pin-input{
  width:100%; font-family:inherit; font-size:17px; letter-spacing:2px;
  text-align:center; padding:11px; border:2px solid #E0E0EE;
  border-radius:12px; background:#FAFAFF; margin-bottom:8px; text-transform:uppercase;
}
.pin-go{
  width:100%; border:none; background:var(--mint); border-radius:14px; padding:12px;
  font-family:inherit; font-size:16px; font-weight:bold; color:var(--ink); cursor:pointer;
  box-shadow:0 4px 0 var(--shadow);
}
.recovery-code{ font-size:12px; color:#555; line-height:1.6; margin-top:8px; }
.recovery-code code{
  font-size:16px; font-weight:bold; letter-spacing:2px;
  background:#FFF6D6; padding:3px 8px; border-radius:8px; color:var(--ink);
}
.recovery-code span{ color:#888; }

/* ── children & review ──────────────────────────────────── */
.kid-del{
  border:none; background:#F3F3FA; color:#C1272D; border-radius:10px;
  width:30px; height:30px; font-size:14px; cursor:pointer; flex-shrink:0;
}
.kid-del:hover{ background:#FFE3E6; }
.kid-school{ display:flex; gap:8px; margin:-4px 0 12px 54px; }
.kid-sys,.kid-year{
  font-family:inherit; font-size:13px; padding:7px 8px; flex:1; min-width:0;
  border:2px solid #E0E0EE; border-radius:10px; background:#FAFAFF; color:var(--ink);
}
.digest-out{
  width:100%; height:190px; margin-top:10px; font-size:11px; line-height:1.5;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  border:2px solid #E0E0EE; border-radius:12px; background:#FAFAFF;
  padding:10px; color:var(--ink); resize:vertical;
}

/* ── answer countdown ───────────────────────────────────── */
.answer-timer{
  display:none; width:min(520px,92vw); height:9px; border-radius:999px;
  background:rgba(255,255,255,.55); overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(58,58,86,.12);
}
.answer-timer-fill{
  height:100%; width:100%; border-radius:999px; background:var(--mint);
  transition:background .3s;
}
.answer-timer.low .answer-timer-fill{ background:var(--coral); }

/* the option being read aloud, so a child can follow along */
.opt.reading{
  background:#FFF6D6;
  box-shadow:0 7px 0 var(--shadow), 0 0 0 3px var(--sun) inset;
}
/* hearing an option must not mean choosing it */
.opt{ position:relative; }
.opt-ear{
  position:absolute; top:4px; inset-inline-end:6px;
  width:26px; height:26px; padding:4px; border-radius:50%;
  cursor:pointer; opacity:.45; background:rgba(58,58,86,.06);
  display:grid; place-items:center; transition:opacity .15s, background .15s;
}
.opt-ear svg{ width:100%; height:100%; display:block; }
.opt-ear:hover{ opacity:1; background:rgba(255,255,255,.9); }
.opt-ear:active{ transform:scale(.9); }
/* the one being read aloud shows its speaker clearly */
.opt.reading .opt-ear{ opacity:1; background:rgba(255,255,255,.9); }
@media (prefers-reduced-motion:reduce){ .answer-timer-fill{ transition:none; } }

/* action buttons carry SVG icons, not emoji, so they size predictably */
.mini-btn svg, .q-btn svg, .pz-back svg{
  width:26px; height:26px; display:block; margin:auto;
}
.mini-btn.wide svg{ width:28px; height:28px; }

/* ── first-run setup wizard ──────────────────────────────── */

#wizard{
  position:fixed; inset:0; z-index:40; display:none;
  align-items:center; justify-content:center;
  background:rgba(58,58,86,.55); direction:ltr;
}
#wizard.show{ display:flex; }

.wiz-steps{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.wiz-dot{
  font-size:11px; padding:4px 9px; border-radius:999px;
  background:#F0F0F6; color:#8A8AA0;
}
.wiz-dot.past{ background:#DFF7EA; color:#3AA76D; }
.wiz-dot.on{ background:var(--sun); color:var(--ink); font-weight:bold; }

.wiz-kid{
  border:2px solid #E0E0EE; border-radius:16px;
  padding:12px; margin-bottom:12px; background:#FAFAFF;
}
.wiz-row{
  display:flex; align-items:center; gap:10px; margin-bottom:9px;
}
.wiz-row > span{ width:74px; flex-shrink:0; font-size:13px; color:#666; }
.wiz-row input, .wiz-row select{
  flex:1; min-width:0; font-family:inherit; font-size:15px; padding:9px 10px;
  border:2px solid #E0E0EE; border-radius:12px; background:var(--white); color:var(--ink);
}
.wiz-choice{ display:flex; gap:6px; flex:1; }
.wiz-choice button{
  flex:1; font-family:inherit; font-size:14px; padding:9px 6px; cursor:pointer;
  border:2px solid #E0E0EE; border-radius:12px; background:var(--white); color:var(--ink);
}
.wiz-choice button.on{ background:var(--sun); border-color:var(--sun); font-weight:bold; }

.wiz-langs{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:10px 0 4px; }
.wiz-lang{
  display:flex; align-items:center; gap:8px; cursor:pointer;
  font-family:inherit; font-size:13px; text-align:left; padding:8px 9px;
  border:2px solid #E0E0EE; border-radius:12px; background:var(--white); color:var(--ink);
}
.wiz-lang.on{ background:#DFF7EA; border-color:#3AA76D; font-weight:bold; }
.wiz-lang::after{ content:"○"; margin-left:auto; color:#C9C9DD; font-size:15px; }
.wiz-lang.on::after{ content:"✓"; color:#3AA76D; }
.wiz-lang .fl{ width:24px; flex-shrink:0; display:block; }
.wiz-lang .fl svg{ width:24px; height:17px; border-radius:4px; display:block;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12); }

.wiz-note{ font-size:12px; color:#777; line-height:1.45; margin:8px 0 0; }
.wiz-add, .wiz-remove{
  font-family:inherit; font-size:14px; padding:9px 12px; cursor:pointer;
  border:none; border-radius:12px; background:var(--sun); color:var(--ink);
  box-shadow:0 3px 0 rgba(58,58,86,.2);
}
.wiz-remove{ background:#FFE3E8; color:#B03047; box-shadow:none; font-size:12px; margin-top:4px; }

.wiz-nav{ display:flex; gap:8px; margin-top:16px; align-items:center; }
.wiz-nav button{
  font-family:inherit; font-size:15px; padding:11px 14px; cursor:pointer;
  border:none; border-radius:14px; background:#F0F0F6; color:var(--ink);
}
.wiz-nav #wizardSkip{ margin-left:auto; font-size:13px; color:#8A8AA0; background:none; }
.wiz-nav .primary{
  background:var(--sun); font-weight:bold; box-shadow:0 3px 0 rgba(58,58,86,.2);
}

/* ── difficulty, on the menu screen ──────────────────────── */

/* On the hub it is a row of its own, aligned with the worlds heading
   above it rather than centred — centred, it read as a title. */
.level-pick{
  display:flex; align-items:center; justify-content:flex-start;
  gap:4px; margin:-8px 0 0; flex-wrap:wrap;
}
.level-label{
  font-size:14px; color:var(--ink-soft); margin-inline-end:6px;
  background:var(--white); padding:6px 13px; border-radius:var(--r-pill);
  box-shadow:0 2px 0 var(--shadow);
}
.level-star{
  border:none; background:none; cursor:pointer; padding:2px;
  width:34px; height:34px; line-height:0;
  transition:transform .12s ease;
}
.level-star svg{ width:30px; height:30px; display:block; }
.level-star:active{ transform:scale(.86); }
.level-star.on:hover{ transform:scale(1.12); }

/* ── the update banner ───────────────────────────────────── */

#updateBar{
  position:fixed; left:50%; bottom:18px; transform:translate(-50%, 140%);
  z-index:45; display:flex; align-items:center; gap:9px;
  background:var(--white); color:var(--ink);
  padding:10px 14px; border-radius:999px; direction:ltr;
  box-shadow:0 8px 26px rgba(58,58,86,.28);
  font-size:14px; max-width:94vw; transition:transform .35s ease;
}
#updateBar.show{ transform:translate(-50%, 0); }
/* the countdown is the point of the line — it must not be the first
   thing an ellipsis eats */
#updateBar .up-text{ white-space:nowrap; flex-shrink:0; }
#updateBar button{
  border:none; border-radius:999px; font-family:inherit; font-size:13px;
  padding:8px 13px; cursor:pointer; flex-shrink:0;
}
#updateBar .up-now{ background:var(--sun); color:var(--ink); font-weight:bold; }
#updateBar .up-later{ background:#F0F0F6; color:#7A7A96; }
.wiz-warn{ color:#B03047; font-weight:600; }

/* ── the repair loop ─────────────────────────────────────────
   A wrong answer used to flash red and vanish into the next
   question. Now the round stays put until the child has actually
   touched the right answer, and these are the two states that
   carry that: a choice that has been used up, and the one being
   pointed at after two misses.
   ──────────────────────────────────────────────────────────── */

.opt.spent{
  opacity:.32; filter:grayscale(.7);
  transform:scale(.96); box-shadow:none;
  pointer-events:none;               /* a spent choice is not tappable */
  transition:opacity .3s ease, transform .3s ease, filter .3s ease;
}

/* Not "you were wrong" — "here it is, put your finger on it." The
   pulse is an invitation, so it is slow and it does not stop. */
.opt.reveal{
  box-shadow:0 0 0 4px var(--sunshine), 0 7px 0 var(--shadow);
  animation:beckon 1.5s ease-in-out infinite;
}
@keyframes beckon{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.045); }
}

@media (prefers-reduced-motion:reduce){
  .opt.reveal{ animation:none; }
  .opt.spent{ transition:none; }
}

/* ── together ────────────────────────────────────────────────
   The pair card on the picker, and the strip that says whose turn
   it is. The strip has to be readable from the other side of a
   tablet being held by somebody else, so it is big and it names
   both children.
   ──────────────────────────────────────────────────────────── */

.together-card{ --kid:var(--vibrant); }
.together-pair{ display:flex; justify-content:center; margin-bottom:2px; }
.together-av{
  width:74px; height:74px; margin-inline-end:-22px;
  border:4px solid var(--white);
}
.together-av:last-child{ margin-inline-end:0; }
.together-av svg{ width:66px; height:66px; }

#turnBar{
  display:none; align-items:center; gap:12px;
  align-self:center; margin:2px auto 8px;
  padding:8px 20px 8px 8px; border-radius:var(--r-pill);
  background:var(--white);
  box-shadow:inset 0 0 0 3px var(--kid,var(--vibrant)), 0 5px 16px var(--shadow);
  max-width:min(560px,94vw);
}
.turn-avatar{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:var(--kid,var(--vibrant)); display:grid; place-items:center;
  border:3px solid var(--white);
}
.turn-avatar svg{ width:100%; height:100%; border-radius:50%; }
.turn-words{ display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.turn-words b{ font-size:17px; font-weight:900; }
.turn-words small{ font-size:12.5px; color:var(--ink-soft); }

@media (max-width:520px){
  .turn-words b{ font-size:15px; }
  .turn-words small{ font-size:11.5px; }
}

/* ── the end of a lesson ─────────────────────────────────────
   The screen a child sees when a world is finished. It has to feel
   like an arrival, not a scoreboard — so the number is small, what
   they learned is the loud part, and both ways onward are equally
   easy to reach.
   ──────────────────────────────────────────────────────────── */

.done-card{
  background:var(--white); border-radius:var(--r-lg);
  padding:30px 30px 24px; width:min(430px,92vw);
  box-shadow:0 2px 0 rgba(2,28,56,.04), 0 16px 40px var(--shadow-cool);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center;
}
.done-ring{ position:relative; width:104px; height:104px; }
.done-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.done-ring circle{ fill:none; stroke-width:6; stroke-linecap:round; }
.done-track{ stroke:var(--surface-3); }
.done-fill{
  stroke:var(--sunshine); stroke-dasharray:119.38; stroke-dashoffset:119.38;
  transition:stroke-dashoffset .9s cubic-bezier(.3,.9,.3,1);
}
.done-ring.is-full .done-fill{ stroke:var(--lime); }
.done-score{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:25px; font-weight:900; color:var(--sunshine-deep);
  font-variant-numeric:tabular-nums;
}
.done-ring.is-full .done-score{ color:var(--lime-deep); }

.done-title{ font-size:clamp(23px,5.5vw,30px); font-weight:900; line-height:1.15; }
.done-sub{ font-size:15px; color:var(--ink-soft); margin-top:-4px; }

.done-learned, .done-practise{
  font-size:15.5px; font-weight:700; padding:9px 16px;
  border-radius:var(--r-pill); display:none;
}
.done-learned{ background:rgba(164,222,2,.22); color:var(--lime-deep); }
.done-practise{ background:var(--surface-2); color:var(--ink-soft); font-weight:500; }

.done-actions{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:8px; width:100%; }
.done-btn{
  flex:1 1 8rem; min-height:var(--tap);
  border:none; border-radius:var(--r-pill); padding:14px 20px;
  font-family:inherit; font-size:17px; font-weight:900; cursor:pointer;
  background:var(--white); color:var(--vibrant-deep);
  box-shadow:inset 0 0 0 3px var(--surface-4), 0 4px 0 var(--shadow);
}
.done-btn.primary{ background:var(--sunshine); color:var(--sunshine-deep); box-shadow:0 4px 0 var(--shadow-warm); }
.done-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--shadow); }

/* ── how a world is going ────────────────────────────────────
   A small mark on the card, filling as the shaky list empties.
   Deliberately not a score and not a number — a four-year-old
   should read it as "this one is going well", nothing more.
   ──────────────────────────────────────────────────────────── */

.menu-mastery{
  width:11px; height:11px; border-radius:50%; flex-shrink:0;
  margin-inline-start:2px;
  background:var(--surface-4);
  box-shadow:inset 0 0 0 2px var(--edge,var(--surface-3));
}
.menu-mastery.solid{
  background:var(--lime);
  box-shadow:0 0 0 3px rgba(164,222,2,.28);
}

/* the way back to everything else */
.more-card{ --tile:var(--surface-2); --edge:var(--rule,rgba(2,28,56,.10)); --glow:var(--shadow); }
.more-card .menu-label{ color:var(--ink-soft); }

/* ── the garden ──────────────────────────────────────────────
   Somewhere the stars go. Everything in it was earned and nothing
   in it can be lost, so it is calm: no scores, no timers, no
   empty slots showing what is missing.
   ──────────────────────────────────────────────────────────── */

#garden{ gap:16px; justify-content:flex-start; padding-top:14px; }
.garden-head{ text-align:center; }
.garden-title{ font-size:clamp(24px,5.5vw,32px); font-weight:900; color:var(--ink); }
.garden-sub{ font-size:15px; color:var(--ink-soft); margin-top:3px; }

.garden-plot{
  position:relative; width:min(560px,94vw); aspect-ratio:5/4;
  border-radius:var(--r-lg); overflow:hidden;
  background:
    radial-gradient(120% 80% at 50% 8%, #EAF4FF 0%, #DCEEFF 42%, transparent 70%),
    linear-gradient(180deg, #DCEEFF 0%, #CFEBD5 46%, #BEE3C4 100%);
  box-shadow:inset 0 0 0 3px var(--surface-4), 0 10px 28px var(--shadow);
}
.garden-piece{
  position:absolute; width:54px; height:54px;
  transform:translate(-50%,-50%);
  display:grid; place-items:center;
  filter:drop-shadow(0 3px 4px rgba(2,28,56,.18));
  animation:grow .5s cubic-bezier(.25,1.4,.4,1) backwards;
  animation-delay:calc(var(--i) * 55ms);
}
.garden-piece svg{ width:100%; height:100%; }
@keyframes grow{
  from{ opacity:0; transform:translate(-50%,-30%) scale(.4); }
  to  { opacity:1; transform:translate(-50%,-50%) scale(1); }
}
/* the one that just arrived keeps breathing, so it is findable */
.garden-piece.fresh{ animation:grow .5s cubic-bezier(.25,1.4,.4,1) backwards, sway 3s ease-in-out .6s infinite; }
@keyframes sway{ 0%,100%{ transform:translate(-50%,-50%) scale(1); } 50%{ transform:translate(-50%,-54%) scale(1.06); } }

#garden .done-btn{ flex:0 0 auto; min-width:11rem; }

@media (prefers-reduced-motion:reduce){
  .garden-piece, .garden-piece.fresh{ animation:none; }
}

/* the making task — offered above the two ways onward, because it is
   the thing worth doing rather than the thing to move past */
.done-btn.draw{
  width:100%; background:var(--vibrant); color:#fff;
  box-shadow:0 4px 0 var(--vibrant-deep);
}
.done-btn.draw:active{ box-shadow:0 1px 0 var(--vibrant-deep); }

/* ── choosing a voice (Android) ──────────────────────────────
   A robotic voice is nearly always a small built-in one, and the
   real fix is downloading a better one — so that button leads,
   and the per-language choice sits under it.
   ──────────────────────────────────────────────────────────── */

.voice-install{
  display:block; width:100%; margin:2px 0 12px;
  min-height:var(--tap); padding:12px 18px;
  border:none; border-radius:var(--r-pill);
  font-family:inherit; font-size:15.5px; font-weight:700; cursor:pointer;
  background:var(--vibrant); color:#fff;
  box-shadow:0 4px 0 var(--vibrant-deep);
}
.voice-install:active{ transform:translateY(3px); box-shadow:0 1px 0 var(--vibrant-deep); }
.voice-install:disabled{
  background:var(--surface-2); color:var(--ink-soft);
  box-shadow:none; transform:none; font-size:13.5px; font-weight:500;
}

.voice-select{
  flex:1; min-width:0; min-height:var(--tap);
  border-radius:var(--r); padding:8px 12px;
  font-family:inherit; font-size:14.5px; color:var(--ink);
  background:var(--white);
  border:2px solid var(--surface-4);
}
.voice-select:focus-visible{ outline:3px solid var(--vibrant); outline-offset:2px; }

/* ── the sum that stands in for a missing PIN ────────────────
   Same panel as the PIN prompt on purpose: it should read as the
   same door, not a second one. Two-digit by two-digit — past
   mental arithmetic at nine, and a moment's work for an adult.
   ──────────────────────────────────────────────────────────── */

.pin-sum{
  font-size:clamp(26px,7vw,34px); font-weight:900; color:var(--ink);
  text-align:center; margin:6px 0 12px; font-variant-numeric:tabular-nums;
}
.pin-sum-input{
  width:100%; min-height:var(--tap); text-align:center;
  font-family:inherit; font-size:26px; font-weight:900; color:var(--ink);
  border:3px solid var(--surface-4); border-radius:var(--r);
  background:var(--white); padding:8px 12px;
  font-variant-numeric:tabular-nums;
}
.pin-sum-input:focus-visible{ outline:3px solid var(--vibrant); outline-offset:2px; }
.pin-sum-row{ display:flex; gap:10px; margin-top:12px; }
.pin-sum-row .pin-key{ flex:1; }

/* the standing hint is guidance; only a wrong answer is red */
.pin-msg.hint{ color:var(--ink-soft); }