/* =====================================================================
   Meya's Learning Adventure — design system
   Built for a 5–6 year old on an iPad in Safari.
   Rules of thumb used throughout:
     • nothing tappable is smaller than 88px
     • no screen scrolls during a lesson
     • colour is decoration, never the only signal
   ===================================================================== */

:root{
  /* palette */
  --c-purple:#5b46e5;
  --c-purple-dk:#3f2fc0;
  /* These are deliberately a shade deeper than they "want" to be: every
     one of them carries white text somewhere, and needs to clear 3:1. */
  --c-pink:#e63a6f;
  --c-pink-dk:#b3244f;
  --c-orange:#de5a2e;
  --c-orange-dk:#ab3f1a;
  --c-yellow:#ffd23f;              /* decoration only — never behind text */
  --c-teal:#0e8f80;
  --c-teal-dk:#096b5f;
  --c-blue:#1786c9;
  --c-blue-dk:#0f6699;
  --c-green:#23a047;
  --c-green-dk:#177f37;
  --c-red:#d63a22;

  --ink:#22224a;
  --ink-soft:#5b5b86;
  --card:#ffffff;
  --card-edge:rgba(34,34,74,.10);

  --r-lg:34px;
  --r-md:26px;
  --r-sm:18px;

  --shadow-card:0 10px 0 rgba(34,34,74,.12), 0 18px 34px rgba(34,34,74,.14);
  --shadow-btn:0 8px 0 var(--btn-edge, rgba(0,0,0,.2));

  --pad: clamp(14px, 2.2vw, 28px);
}

*,*::before,*::after{ box-sizing:border-box; }

/* A `display` rule on a class beats the UA stylesheet's [hidden] rule, and
   this app hides things with the attribute all over the place. Make the
   attribute win. */
[hidden]{ display:none !important; }

html,body{
  height:100%;
  margin:0;
  overflow:hidden;                 /* the app manages its own scrolling */
  background:#bfe8ff;
  color:var(--ink);
  font-family:ui-rounded,"SF Pro Rounded","Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  text-rendering:optimizeLegibility;
}

/* Kids drag and long-press everything. Turn off selection + callouts,
   but keep them on the one text field a grown-up uses. */
body{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
  touch-action:manipulation;
  overscroll-behavior:none;
}
input,textarea{ -webkit-user-select:auto; user-select:auto; }

button{ font:inherit; color:inherit; cursor:pointer; border:0; background:none; }

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ================= background scenery ================= */
.sky{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(#a8e4ff 0%, #cdefff 42%, #eafaff 100%);
}
.cloud{
  position:absolute; background:#fff; border-radius:100px; opacity:.85;
  filter:blur(.2px);
}
.cloud::before,.cloud::after{
  content:""; position:absolute; background:#fff; border-radius:50%;
}
.c1{ width:170px;height:54px; top:8%;  left:-10%; animation:drift 90s linear infinite; }
.c1::before{ width:80px;height:80px; top:-38px; left:26px; }
.c1::after{ width:56px;height:56px; top:-24px; left:92px; }
.c2{ width:120px;height:40px; top:22%; left:-25%; animation:drift 130s linear infinite; animation-delay:-30s; }
.c2::before{ width:60px;height:60px; top:-28px; left:18px; }
.c3{ width:210px;height:62px; top:4%;  left:-45%; animation:drift 165s linear infinite; animation-delay:-80s; }
.c3::before{ width:96px;height:96px; top:-46px; left:40px; }
@keyframes drift{ to{ transform:translateX(175vw); } }

.hill{ position:absolute; bottom:0; border-radius:50% 50% 0 0 / 100% 100% 0 0; }
.h1{ left:-14%; width:78%; height:20vh; background:#8fd96b; opacity:.9; }
.h2{ right:-16%; width:82%; height:14vh; background:#6cc94d; opacity:.9; }

/* ================= screens ================= */
#app{ position:relative; z-index:1; height:100%; }

.screen{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  padding:max(var(--pad), env(safe-area-inset-top)) max(var(--pad), env(safe-area-inset-right))
          max(var(--pad), env(safe-area-inset-bottom)) max(var(--pad), env(safe-area-inset-left));
  animation:screen-in .28s ease both;
}
.screen[hidden]{ display:none; }
@keyframes screen-in{ from{ opacity:0; transform:translateY(14px) scale(.99); } }

/* ================= home ================= */
.home-head{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-bottom:clamp(10px,2vh,22px); flex:0 0 auto;
}
.home-greet h1{
  margin:0; font-size:clamp(30px,5.2vw,54px); line-height:1.05; letter-spacing:-.5px;
  color:#243a6b; text-shadow:0 2px 0 rgba(255,255,255,.7);
}
.home-greet p{ margin:4px 0 0; font-size:clamp(15px,2vw,22px); font-weight:700; color:#2b4a5c; }

.star-purse{
  display:flex; align-items:center; gap:8px;
  background:#fff; border-radius:999px; padding:10px 20px 10px 14px;
  box-shadow:var(--shadow-card); min-height:60px;
}
.star-purse__icon{ font-size:28px; }
.star-purse__count{ font-size:26px; font-weight:900; color:var(--c-orange-dk); }
.star-purse:active{ transform:translateY(2px); }

.subject-grid{
  flex:1 1 auto; min-height:0;
  display:grid; gap:clamp(12px,2vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(240px,340px));
  justify-content:center;
  align-content:center;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:4px;
}

.home-foot{ flex:0 0 auto; display:flex; justify-content:center; padding-top:10px; }

/* Subjects that don't exist yet: visible as a roadmap, but small enough
   that they never compete with the one she can actually play. */
.soon-strip{
  flex:0 0 auto;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  padding:14px 4px 4px;
}
.soon-chip{
  display:flex; align-items:center; gap:8px;
  min-height:52px; padding:8px 18px; border-radius:999px;
  background:rgba(255,255,255,.6); color:#4a5878;
  font-size:15px; font-weight:800;
  box-shadow:0 3px 0 rgba(34,34,74,.08);
}
.soon-chip__emoji{ font-size:22px; filter:grayscale(.45); }
.soon-chip__soon{ font-size:12px; font-weight:700; opacity:.7; }
.soon-chip:active{ transform:translateY(2px); box-shadow:none; }

/* big colourful tile — used for subjects and lessons */
.tile{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-align:center;
  min-height:clamp(140px,22vh,220px); padding:18px;
  border-radius:var(--r-lg);
  background:var(--tile,var(--c-purple)); color:#fff;
  box-shadow:0 9px 0 var(--tile-dk,var(--c-purple-dk)), 0 16px 30px rgba(34,34,74,.2);
  transition:transform .1s ease, box-shadow .1s ease;
}
.tile:active{ transform:translateY(6px); box-shadow:0 3px 0 var(--tile-dk,var(--c-purple-dk)), 0 8px 16px rgba(34,34,74,.2); }
.tile__emoji{ font-size:clamp(38px,6vw,60px); line-height:1; filter:drop-shadow(0 3px 0 rgba(0,0,0,.15)); }
.tile__emoji--glyph{ font-weight:900; letter-spacing:-2px; filter:none; text-shadow:0 4px 0 rgba(0,0,0,.16); }
.tile__label{ font-size:clamp(20px,2.6vw,28px); font-weight:900; letter-spacing:-.2px; }
.tile__note{ font-size:clamp(14px,1.7vw,19px); font-weight:800; }
.tile__stars{ display:flex; gap:4px; font-size:clamp(18px,2vw,24px); line-height:1; }
.tile__stars span{ color:rgba(255,255,255,.38); }
.tile__stars span.on{ color:var(--c-yellow); text-shadow:0 2px 0 rgba(0,0,0,.15); }

.tile--soon{ background:#c9d3e4; box-shadow:0 9px 0 #a9b6cc, 0 16px 30px rgba(34,34,74,.14); color:#4a5878; }
.tile--soon .tile__emoji{ filter:grayscale(.35) opacity(.8); }

/* ================= top bars ================= */
.bar{
  flex:0 0 auto; display:flex; align-items:center; gap:14px;
  margin-bottom:clamp(10px,2vh,20px);
}
.bar h2{
  margin:0; font-size:clamp(22px,3.4vw,36px); color:#243a6b;
  text-shadow:0 2px 0 rgba(255,255,255,.7);
}
.bar__spacer{ width:72px; flex:0 0 auto; }

.back-btn,.speak-btn{
  flex:0 0 auto;
  width:72px; height:72px; border-radius:50%;
  display:grid; place-items:center; font-size:34px; font-weight:900;
  background:#fff; color:var(--c-purple);
  box-shadow:0 6px 0 rgba(34,34,74,.16), 0 10px 20px rgba(34,34,74,.14);
}
.back-btn:active,.speak-btn:active{ transform:translateY(4px); box-shadow:0 2px 0 rgba(34,34,74,.16); }
.speak-btn{ margin-left:auto; }

/* ================= lesson + level grids ================= */
.lesson-grid,.level-grid{
  flex:1 1 auto; min-height:0;
  display:grid; gap:clamp(12px,2vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  align-content:center;
  overflow-y:auto; -webkit-overflow-scrolling:touch; padding:4px;
}
.level-grid{ grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }

/* ================= quiz ================= */
.bar--quiz{ margin-bottom:clamp(6px,1.4vh,14px); }
.progress{ flex:1 1 auto; display:flex; justify-content:center; }
.progress__dots{ display:flex; gap:7px; flex-wrap:wrap; justify-content:center; }
.dot{
  width:16px; height:16px; border-radius:50%;
  background:rgba(36,58,107,.22); box-shadow:inset 0 2px 0 rgba(255,255,255,.35);
  transition:transform .2s ease, background .2s ease;
}
.dot.done{ background:var(--c-green); box-shadow:0 2px 0 var(--c-green-dk); }
.dot.miss{ background:var(--c-orange); box-shadow:0 2px 0 var(--c-orange-dk); }
.dot.now{ background:var(--c-purple); transform:scale(1.5); box-shadow:0 0 0 4px rgba(255,255,255,.65); }

/* Three fixed bands: prompt at the top, answers always in the same place
   at the bottom, and the picture taking whatever is left in between.
   Buttons that don't move between questions matter a lot at this age. */
.quiz-body{
  flex:1 1 auto; min-height:0;
  display:grid; grid-template-rows:auto minmax(0,1fr) auto;
  justify-items:center; align-items:center;
  gap:clamp(8px,1.8vh,20px);
  padding-bottom:clamp(4px,2vh,24px);
}

.q-prompt{
  margin:0; align-self:start; text-align:center; font-weight:900; line-height:1.15;
  font-size:clamp(22px,3.6vw,40px);
  color:#fff; background:var(--c-purple);
  padding:clamp(8px,1.4vh,16px) clamp(20px,3vw,40px);
  border-radius:999px;
  box-shadow:0 6px 0 var(--c-purple-dk), 0 12px 24px rgba(34,34,74,.18);
  max-width:min(96vw,900px);
}
.q-prompt:empty{ display:none; }

/* the "stage" holds whatever the question shows: objects to count,
   a sum, a number line with a gap … */
.q-stage{
  min-height:0; width:100%;
  display:flex; align-items:center; justify-content:center;
}

.card-stage{
  background:rgba(255,255,255,.95);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-card);
  padding:clamp(12px,2.2vh,26px) clamp(16px,3vw,34px);
  max-width:min(100%,900px);
}

/* countable objects */
.objects{
  display:flex; flex-wrap:wrap; gap:clamp(6px,1.2vw,14px);
  justify-content:center; align-items:center; max-width:min(100%,760px);
}
.obj{
  font-size:clamp(30px,min(6.2vw,8vh),76px); line-height:1;
  filter:drop-shadow(0 3px 2px rgba(0,0,0,.18));
  animation:pop-in .3s cubic-bezier(.34,1.56,.64,1) both;
}
.obj.tapped{ transform:scale(1.16); filter:drop-shadow(0 0 10px var(--c-yellow)); }
.obj.gone{ opacity:.22; filter:grayscale(1); transform:scale(.82) rotate(-8deg); }
@keyframes pop-in{ from{ opacity:0; transform:scale(.3); } }

/* a sum, laid out big:  🍎🍎🍎  +  🍎🍎  = ? */
.sum{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(8px,1.6vw,20px); flex-wrap:wrap;
}
.sum__group{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
  max-width:clamp(120px,26vw,300px);
}
.sum__sign{
  font-size:clamp(30px,5vw,58px); font-weight:900; color:var(--c-purple);
  padding:0 4px;
}
.sum__num{ font-size:clamp(40px,min(8vw,10vh),104px); font-weight:900; color:var(--ink); }
.sum__q{
  font-size:clamp(40px,7vw,86px); font-weight:900; color:var(--c-pink);
  animation:nudge 1.6s ease-in-out infinite;
}
@keyframes nudge{ 50%{ transform:translateY(-6px); } }

/* number line with a missing box */
.numline{ display:flex; gap:clamp(6px,1.2vw,14px); align-items:center; flex-wrap:wrap; justify-content:center; }
.numline__cell{
  min-width:clamp(52px,min(9vw,11vh),112px); padding:clamp(8px,1.8vh,20px) 8px;
  border-radius:var(--r-sm); background:#fff; box-shadow:0 5px 0 rgba(34,34,74,.12);
  font-size:clamp(26px,min(5vw,6.5vh),64px); font-weight:900; text-align:center;
}
.numline__cell.gap{
  background:repeating-linear-gradient(45deg,#ffe9f0,#ffe9f0 10px,#ffd6e3 10px,#ffd6e3 20px);
  color:var(--c-pink-dk); box-shadow:0 5px 0 #f3b9cd;
  animation:nudge 1.6s ease-in-out infinite;
}

/* the big number shown for "which is more" etc. */
.pair{ display:flex; gap:clamp(14px,3vw,40px); align-items:center; justify-content:center; }

/* ---- answer buttons ---- */
.q-options{
  width:100%; align-self:end;
  display:flex; flex-wrap:wrap; gap:clamp(10px,1.8vw,20px);
  justify-content:center; align-items:stretch;
}
.opt{
  --btn-edge:rgba(34,34,74,.22);
  flex:0 1 auto;
  min-width:clamp(96px,13vw,170px); min-height:clamp(88px,13vh,156px);
  padding:10px 18px; border-radius:var(--r-md);
  background:#fff; color:var(--ink);
  font-size:clamp(34px,min(6vw,7vh),74px); font-weight:900; line-height:1;
  display:grid; place-items:center;
  box-shadow:0 8px 0 var(--btn-edge), 0 14px 26px rgba(34,34,74,.16);
  transition:transform .09s ease, box-shadow .09s ease, background .18s ease;
}
.opt:active{ transform:translateY(5px); box-shadow:0 3px 0 var(--btn-edge); }
.opt.word{ font-size:clamp(20px,3vw,34px); }
.opt[disabled]{ opacity:1; }

.opt.right{
  background:var(--c-green); color:#fff; --btn-edge:var(--c-green-dk);
  animation:right-pop .42s cubic-bezier(.34,1.56,.64,1);
}
@keyframes right-pop{ 40%{ transform:scale(1.12) translateY(-4px); } }
.opt.wrong{
  background:#ffd9d3; color:var(--c-red); --btn-edge:#f0a99c;
  animation:shake .34s ease;
}
@keyframes shake{ 20%{transform:translateX(-9px)} 45%{transform:translateX(8px)} 70%{transform:translateX(-5px)} }
.opt.hint{ animation:glow 1s ease-in-out infinite; }
@keyframes glow{ 50%{ box-shadow:0 8px 0 var(--btn-edge), 0 0 0 8px rgba(255,210,63,.75); } }

/* ---- feedback overlay ---- */
.feedback{
  position:absolute; inset:0; z-index:5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; pointer-events:none;
}
.feedback[hidden]{ display:none; }
.feedback__face{ font-size:clamp(80px,16vw,180px); animation:pop-in .35s cubic-bezier(.34,1.56,.64,1) both; }
.feedback__text{
  font-size:clamp(28px,5vw,56px); font-weight:900; color:#fff;
  padding:10px 30px; border-radius:999px; background:var(--c-green);
  box-shadow:0 8px 0 var(--c-green-dk);
  animation:pop-in .35s .05s cubic-bezier(.34,1.56,.64,1) both;
}
.feedback.sad .feedback__text{ background:var(--c-orange); box-shadow:0 8px 0 var(--c-orange-dk); }

/* ================= well done ================= */
#screen-done{ align-items:center; justify-content:center; }
.done-card{
  background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow-card);
  padding:clamp(22px,4vh,44px) clamp(24px,5vw,60px);
  text-align:center; max-width:min(94vw,620px);
  animation:pop-in .4s cubic-bezier(.34,1.56,.64,1) both;
}
.done-badge{ font-size:clamp(64px,12vw,120px); line-height:1; }
.done-card h2{ margin:6px 0 0; font-size:clamp(28px,5vw,48px); color:var(--c-purple); }
.done-score{ margin:6px 0 0; font-size:clamp(18px,2.6vw,26px); font-weight:800; color:var(--ink-soft); }
.done-stars{ font-size:clamp(30px,5.4vw,52px); margin:12px 0 6px; letter-spacing:4px; min-height:1.2em; }
.done-stars span{ display:inline-block; animation:pop-in .4s cubic-bezier(.34,1.56,.64,1) both; }
.done-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:14px; }

.big-btn{
  min-height:80px; min-width:200px; padding:0 30px;
  border-radius:var(--r-md); font-size:clamp(20px,2.8vw,28px); font-weight:900; color:#fff;
  background:var(--c-purple); box-shadow:0 8px 0 var(--c-purple-dk);
  transition:transform .09s ease, box-shadow .09s ease;
}
.big-btn:active{ transform:translateY(5px); box-shadow:0 3px 0 var(--c-purple-dk); }
.big-btn--go{ background:var(--c-green); box-shadow:0 8px 0 var(--c-green-dk); }
.big-btn--go:active{ box-shadow:0 3px 0 var(--c-green-dk); }
.big-btn--alt{ background:var(--c-blue); box-shadow:0 8px 0 var(--c-blue-dk); }
.big-btn--alt:active{ box-shadow:0 3px 0 var(--c-blue-dk); }

/* ================= grown-ups ================= */
.grown-body{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  display:flex; flex-direction:column; gap:16px; padding:4px 4px 30px;
  max-width:760px; width:100%; margin:0 auto;
}
.panel{
  background:#fff; border-radius:var(--r-md); padding:20px 22px;
  box-shadow:0 6px 0 rgba(34,34,74,.08), 0 12px 24px rgba(34,34,74,.1);
}
.panel h3{ margin:0 0 6px; font-size:20px; color:var(--c-purple); }
.muted{ color:var(--ink-soft); font-size:15px; margin:0 0 12px; line-height:1.45; }
.muted.small{ font-size:13px; text-align:center; }

.text-input{
  width:100%; min-height:56px; padding:0 16px; font-size:20px; font-weight:700;
  border-radius:var(--r-sm); border:3px solid #e4e6f2; background:#fafbff; color:var(--ink);
}
.text-input:focus{ outline:none; border-color:var(--c-purple); }

.switch{ display:flex; align-items:center; gap:14px; min-height:56px; }
.switch input{ position:absolute; opacity:0; width:0; height:0; }
.switch__track{
  position:relative; width:66px; height:38px; border-radius:999px; background:#d7dbea;
  transition:background .2s ease; flex:0 0 auto;
}
.switch__knob{
  position:absolute; top:4px; left:4px; width:30px; height:30px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); transition:transform .2s ease;
}
.switch input:checked + .switch__track{ background:var(--c-green); }
.switch input:checked + .switch__track .switch__knob{ transform:translateX(28px); }
.switch input:focus-visible + .switch__track{ outline:3px solid var(--c-purple); outline-offset:3px; }
.switch__label{ font-size:17px; font-weight:700; }

/* ---- voice picker ---- */
.voice-list{
  display:flex; flex-direction:column; gap:8px;
  max-height:270px; overflow-y:auto; -webkit-overflow-scrolling:touch;
  margin-bottom:18px; padding:2px;
}
.voice-opt{
  display:flex; align-items:center; gap:12px; text-align:left;
  min-height:60px; padding:10px 16px; border-radius:var(--r-sm);
  background:#fafbff; border:3px solid #e4e6f2;
  transition:border-color .15s ease, background .15s ease;
}
.voice-opt:active{ transform:translateY(2px); }
.voice-opt.on{ border-color:var(--c-purple); background:#f3f1ff; }
.voice-opt__tick{
  flex:0 0 26px; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; font-size:15px; font-weight:900;
  background:#e4e6f2; color:transparent;
}
.voice-opt.on .voice-opt__tick{ background:var(--c-purple); color:#fff; }
.voice-opt__name{ flex:1 1 auto; font-size:17px; font-weight:800; }
.voice-opt__meta{ flex:0 0 auto; font-size:13px; font-weight:700; color:var(--ink-soft); }
.voice-opt__badge{
  flex:0 0 auto; font-size:11px; font-weight:900; letter-spacing:.4px;
  text-transform:uppercase; padding:4px 9px; border-radius:999px;
  background:var(--c-green); color:#fff;
}
.voice-empty{ font-size:15px; color:var(--ink-soft); padding:8px 2px; }

.slider-row{ display:flex; align-items:center; gap:14px; min-height:56px; }
.slider-row__label{ flex:0 0 62px; font-size:16px; font-weight:800; }
.slider-row__val{ flex:0 0 86px; text-align:right; font-size:15px; font-weight:800; color:var(--ink-soft); }
.slider{
  flex:1 1 auto; -webkit-appearance:none; appearance:none;
  height:44px; background:transparent; cursor:pointer;
}
.slider::-webkit-slider-runnable-track{
  height:12px; border-radius:999px; background:#e4e6f2;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:40px; height:40px; margin-top:-14px; border-radius:50%;
  background:var(--c-purple); box-shadow:0 3px 8px rgba(34,34,74,.3);
}
.slider::-moz-range-track{ height:12px; border-radius:999px; background:#e4e6f2; }
.slider::-moz-range-thumb{
  width:40px; height:40px; border:0; border-radius:50%;
  background:var(--c-purple); box-shadow:0 3px 8px rgba(34,34,74,.3);
}

.voice-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:14px; }

.tip-list{ margin:0 0 12px; padding-left:22px; color:var(--ink-soft); font-size:15px; line-height:1.6; }
.tip-list li{ margin-bottom:6px; }
.tip-list b{ color:var(--ink); }

/* ---- sync status ---- */
.sync-row{ display:flex; align-items:center; gap:10px; min-height:44px; margin-bottom:4px; }
.sync-dot{
  width:14px; height:14px; border-radius:50%; flex:0 0 auto;
  background:#c9d3e4; box-shadow:0 0 0 4px rgba(201,211,228,.35);
}
.sync-dot.ok{ background:var(--c-green); box-shadow:0 0 0 4px rgba(35,160,71,.2); }
.sync-dot.busy{ background:var(--c-blue); box-shadow:0 0 0 4px rgba(23,134,201,.2); }
.sync-dot.warn{ background:var(--c-orange); box-shadow:0 0 0 4px rgba(222,90,46,.2); }
.sync-dot.bad{ background:var(--c-red); box-shadow:0 0 0 4px rgba(214,58,34,.2); }
.sync-state{ font-size:16px; font-weight:800; }

.stats{ display:flex; flex-direction:column; gap:10px; margin-bottom:16px; }
.stat{ display:flex; align-items:center; gap:12px; }
.stat__name{ flex:1 1 auto; font-size:15px; font-weight:700; }
.stat__bar{ flex:0 0 130px; height:14px; border-radius:999px; background:#e8eaf4; overflow:hidden; }
.stat__fill{ height:100%; border-radius:999px; background:var(--c-green); }
.stat__fill.low{ background:var(--c-orange); }
.stat__pct{ flex:0 0 54px; text-align:right; font-size:15px; font-weight:800; color:var(--ink-soft); }
.stats .muted{ margin:0; }

.ghost-btn{
  min-height:56px; padding:0 24px; border-radius:999px; font-size:16px; font-weight:800;
  background:rgba(255,255,255,.9); color:var(--c-purple); box-shadow:0 4px 0 rgba(34,34,74,.12);
}
.ghost-btn:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(34,34,74,.12); }
.ghost-btn--danger{ color:var(--c-red); }

/* ================= confetti ================= */
.confetti{ position:fixed; inset:0; z-index:50; pointer-events:none; overflow:hidden; }
.confetti i{
  position:absolute; top:-24px; width:13px; height:19px; border-radius:3px;
  animation:fall linear forwards;
}
@keyframes fall{
  to{ transform:translateY(112vh) rotate(760deg); opacity:.85; }
}

/* ================= respect reduced motion ================= */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .cloud{ display:none; }
}

/* ================= short/landscape phones & small iPads ================= */
@media (max-height:560px){
  :root{ --pad:10px; --r-lg:24px; --r-md:18px; }
  .back-btn,.speak-btn{ width:60px; height:60px; font-size:28px; }
  .opt{ min-height:76px; }
  .subject-grid,.lesson-grid,.level-grid{ grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
  .tile{ min-height:118px; }
}