/* ============================================================
   Bead Buddies — core theme
   Palette: candy-bright on warm cream, with a night mode.
   ============================================================ */

:root{
  --cream:#FFF6E9;
  --cream-2:#FFEFD8;
  --ink:#2B2140;
  --ink-soft:#6A5F86;
  --card:#FFFFFF;
  --line:#EADFCB;

  --grape:#6C4DF6;
  --grape-d:#4C3BCF;
  --coral:#FF6B6B;
  --mango:#FFB020;
  --mint:#2FD3A5;
  --sky:#39B7FF;
  --bubble:#FF7BC0;

  --good:#22C55E;
  --bad:#FF5A5A;

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

  --shadow:0 10px 0 rgba(43,33,64,.10), 0 18px 40px rgba(43,33,64,.12);
  --shadow-sm:0 5px 0 rgba(43,33,64,.10);
  --font: ui-rounded, "SF Pro Rounded", "Baloo 2", "Nunito", "Segoe UI Variable", "Segoe UI",
          system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(14px, 3.5vw, 28px);
  --maxw: 1080px;
}

@media (prefers-color-scheme: dark){
  :root{
    --cream:#191233;
    --cream-2:#221A44;
    --ink:#F3EEFF;
    --ink-soft:#B0A4D6;
    --card:#241C48;
    --line:#372C63;
    --shadow:0 10px 0 rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.45);
    --shadow-sm:0 5px 0 rgba(0,0,0,.35);
  }
}

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

[hidden]{ display:none !important; }

html,body{ height:100%; }

body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:
    radial-gradient(1100px 620px at 12% -12%, rgba(108,77,246,.16), transparent 60%),
    radial-gradient(900px 520px at 92% 4%, rgba(255,123,192,.16), transparent 60%),
    radial-gradient(800px 500px at 50% 108%, rgba(47,211,165,.16), transparent 60%),
    var(--cream);
  background-attachment: fixed;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

button{ font-family:inherit; color:inherit; }

#app{
  max-width:var(--maxw);
  margin:0 auto;
  padding: max(10px, env(safe-area-inset-top)) var(--pad) calc(28px + env(safe-area-inset-bottom));
  min-height:100%;
}

.muted{ color:var(--ink-soft); }
.center{ text-align:center; }

/* ---------------- Top bar ---------------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:10px;
  padding:10px 0 8px;
  backdrop-filter: blur(12px);
  background:linear-gradient(to bottom, var(--cream) 62%, transparent);
}
.topbar-id{ display:flex; align-items:center; gap:9px; min-width:0; flex:1; }
.avatar-chip{
  width:42px; height:42px; flex:none;
  display:grid; place-items:center;
  font-size:23px; border-radius:50%;
  background:linear-gradient(160deg,var(--mango),var(--coral));
  box-shadow:var(--shadow-sm);
  cursor:pointer; user-select:none;
  transition: transform .18s cubic-bezier(.3,1.6,.5,1);
}
.avatar-chip:active{ transform:scale(.9) rotate(-8deg); }
.topbar-text{ display:flex; flex-direction:column; line-height:1.15; min-width:0; }
.topbar-text strong{ font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.topbar-text span{ font-size:12px; }
.topbar-stats{ display:flex; align-items:center; gap:6px; }

.stat-pill{
  display:flex; align-items:center; gap:5px;
  padding:6px 11px; border-radius:999px;
  background:var(--card); box-shadow:var(--shadow-sm);
  font-size:14px; font-weight:800;
}

.icon-btn{
  width:40px; height:40px; flex:none;
  border:0; border-radius:50%;
  background:var(--card); box-shadow:var(--shadow-sm);
  font-size:19px; font-weight:800; cursor:pointer;
  display:grid; place-items:center;
  transition:transform .15s;
}
.icon-btn:active{ transform:translateY(3px); box-shadow:none; }
#backBtn{ font-size:30px; line-height:0; padding-bottom:5px; }

.xp-track{
  height:9px; border-radius:99px; overflow:hidden;
  background:rgba(128,110,180,.2); margin:2px 0 16px;
}
.xp-fill{
  height:100%; width:0%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--mint),var(--sky),var(--grape));
  transition:width .7s cubic-bezier(.2,.9,.3,1);
}

/* ---------------- Screens ---------------- */
.screen{ display:none; animation: screenIn .35s cubic-bezier(.2,.9,.3,1); }
.screen.active{ display:block; }
@keyframes screenIn{ from{ opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }

.section-title{
  font-size:clamp(17px,4.4vw,21px);
  margin:26px 0 12px; display:flex; align-items:center; gap:9px;
}

/* ---------------- Hero ---------------- */
.hero{
  position:relative; overflow:hidden;
  border-radius:var(--r-lg);
  padding:clamp(20px,5vw,34px);
  background:linear-gradient(135deg,var(--grape),var(--bubble) 58%,var(--mango));
  color:#fff; box-shadow:var(--shadow);
  display:flex; align-items:center; gap:14px;
}
.hero-blob{
  position:absolute; inset:auto -60px -110px auto;
  width:280px; height:280px; border-radius:50%;
  background:rgba(255,255,255,.16);
}
.hero-text{ position:relative; flex:1; min-width:0; }
.hero h1{
  margin:0 0 6px; font-size:clamp(28px,8vw,46px); line-height:1;
  letter-spacing:-.5px; text-shadow:0 3px 0 rgba(0,0,0,.13);
}
.hero .lede{ margin:0; font-size:clamp(13px,3.4vw,16px); opacity:.95; max-width:34ch; }
.hero-mascot{
  position:relative; font-size:clamp(44px,13vw,84px);
  animation: bobble 3.2s ease-in-out infinite;
}
.wiggle{ display:inline-block; animation: wiggle 3s ease-in-out infinite; }
@keyframes wiggle{ 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
@keyframes bobble{ 0%,100%{transform:translateY(0) rotate(-4deg)} 50%{transform:translateY(-10px) rotate(4deg)} }

.lede{ color:var(--ink-soft); font-size:15px; line-height:1.5; }

/* ---------------- Quick cards ---------------- */
.quick-row{
  display:grid; gap:11px; margin-top:16px;
  grid-template-columns:repeat(3,1fr);
}
.quick-card{
  border:0; cursor:pointer; text-align:left;
  border-radius:var(--r-md); padding:14px 12px;
  background:var(--card); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:2px;
  transition:transform .16s cubic-bezier(.3,1.5,.5,1);
  border-top:5px solid var(--grape);
}
.quick-card:active{ transform:translateY(4px) scale(.98); }
.q-drill{ border-top-color:var(--coral); }
.q-anzan{ border-top-color:var(--mint); }
.q-emoji{ font-size:26px; }
.q-label{ font-weight:900; font-size:15px; }
.q-sub{ font-size:12px; color:var(--ink-soft); }

/* ---------------- Stage list ---------------- */
.stage-list{ display:grid; gap:12px; }
.stage-card{
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:14px;
  width:100%; text-align:left; cursor:pointer;
  border:0; border-radius:var(--r-md);
  padding:15px 16px;
  background:var(--card); box-shadow:var(--shadow-sm);
  transition:transform .16s cubic-bezier(.3,1.5,.5,1);
}
.stage-card:active{ transform:translateY(4px) scale(.99); }
.stage-card.locked{ opacity:.62; filter:saturate(.35); }   /* still tappable: it opens the skip-ahead view */
.stage-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:7px;
  background:var(--sc, var(--grape));
}
.stage-emoji{
  width:54px; height:54px; flex:none; border-radius:18px;
  display:grid; place-items:center; font-size:27px;
  background:color-mix(in srgb, var(--sc,var(--grape)) 18%, transparent);
}
.stage-main{ flex:1; min-width:0; }
.stage-main h3{ margin:0 0 3px; font-size:16px; }
.stage-main p{ margin:0; font-size:12.5px; color:var(--ink-soft); }
.stage-right{ text-align:right; flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:4px; }
.stars{ font-size:14px; letter-spacing:1px; }
.mini-bar{ width:64px; height:7px; border-radius:99px; background:rgba(128,110,180,.22); overflow:hidden; }
.mini-bar i{ display:block; height:100%; background:var(--sc,var(--grape)); border-radius:99px; transition:width .6s; }

/* ---------------- Badges ---------------- */
.badge-shelf{
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(96px,1fr));
}
.badge{
  border-radius:var(--r-sm); padding:12px 8px; text-align:center;
  background:var(--card); box-shadow:var(--shadow-sm);
}
.badge .b-emoji{ font-size:28px; display:block; }
.badge .b-name{ font-size:11px; font-weight:800; margin-top:4px; display:block; }
.badge.locked{ opacity:.4; filter:grayscale(1); }

.footer-note{ margin:32px 0 10px; text-align:center; }
.text-btn{
  background:none; border:0; cursor:pointer;
  color:var(--ink-soft); font-size:13px; font-weight:700;
  text-decoration:underline; text-underline-offset:3px; padding:8px;
}

/* ---------------- Buttons ---------------- */
.btn{
  border:0; cursor:pointer; font-weight:900;
  font-size:clamp(15px,3.6vw,17px);
  padding:14px 22px; border-radius:var(--r-md);
  box-shadow:var(--shadow-sm);
  transition:transform .14s cubic-bezier(.3,1.5,.5,1), filter .2s;
  min-height:52px;
}
.btn:active{ transform:translateY(4px); box-shadow:none; }
.btn:disabled{ opacity:.45; cursor:default; transform:none; }
.btn-primary{ background:linear-gradient(160deg,var(--grape),var(--grape-d)); color:#fff; }
.btn-ghost{ background:var(--card); color:var(--ink); }
.btn-happy{ background:linear-gradient(160deg,var(--mint),#17A97F); color:#fff; }
.btn-wide{ width:100%; }

/* the Illustrate button starts asking to be pressed once a child is stuck */
.btn.nudge{
  animation: nudge 1.5s ease-in-out infinite;
  box-shadow:0 5px 0 rgba(43,33,64,.10), 0 0 0 0 rgba(255,176,32,.55);
}
@keyframes nudge{
  0%,100%{ transform:translateY(0);   box-shadow:0 5px 0 rgba(43,33,64,.10), 0 0 0 0 rgba(255,176,32,.6); }
  50%    { transform:translateY(-3px); box-shadow:0 8px 0 rgba(43,33,64,.10), 0 0 0 12px rgba(255,176,32,0); }
}

/* ---------------- Stage detail ---------------- */
.stage-head{
  border-radius:var(--r-lg); padding:22px;
  color:#fff; box-shadow:var(--shadow); margin-bottom:18px;
  background:linear-gradient(135deg, var(--sc,var(--grape)), color-mix(in srgb, var(--sc,var(--grape)) 55%, #000 12%));
}
.stage-head h2{ margin:0 0 6px; font-size:clamp(21px,5.6vw,28px); }
.stage-head p{ margin:0; opacity:.95; font-size:14px; line-height:1.5; }
.stage-head .head-emoji{ font-size:40px; display:block; margin-bottom:6px; }

.lesson-list{ display:grid; gap:10px; }
.lesson-row{
  display:flex; align-items:center; gap:12px; width:100%;
  border:0; cursor:pointer; text-align:left;
  padding:14px 15px; border-radius:var(--r-md);
  background:var(--card); box-shadow:var(--shadow-sm);
  transition:transform .16s;
}
.lesson-row:active{ transform:translateY(3px); }
.lesson-num{
  width:38px; height:38px; flex:none; border-radius:12px;
  display:grid; place-items:center; font-weight:900;
  background:color-mix(in srgb, var(--sc,var(--grape)) 16%, transparent);
  color:var(--sc,var(--grape));
}
.lesson-row.done .lesson-num{ background:var(--good); color:#fff; }
.lesson-row b{ display:block; font-size:15px; }
.lesson-row small{ color:var(--ink-soft); font-size:12.5px; }

.test-card{
  margin-top:20px; border-radius:var(--r-lg); padding:20px;
  background:var(--card); box-shadow:var(--shadow); text-align:center;
}
.test-card h3{ margin:0 0 6px; font-size:19px; }
.test-card p{ margin:0 0 14px; color:var(--ink-soft); font-size:13.5px; }
.test-meta{ display:flex; justify-content:center; gap:16px; margin-bottom:14px; flex-wrap:wrap; }
.test-meta div{ font-size:12px; color:var(--ink-soft); }
.test-meta b{ display:block; font-size:17px; color:var(--ink); }

/* ---------------- Lesson ---------------- */
.lesson-top{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.dots{ display:flex; gap:6px; }
.dots i{ width:26px; height:7px; border-radius:99px; background:rgba(128,110,180,.25); }
.dots i.on{ background:var(--grape); }
.dots i.done{ background:var(--good); }
.equation{
  font-size:clamp(30px,9vw,48px); font-weight:900; letter-spacing:1px;
  padding:6px 22px; border-radius:var(--r-md);
  background:var(--card); box-shadow:var(--shadow-sm);
}
.equation .op{ color:var(--coral); }
.equation .res{ color:var(--mint); }

.coach{ display:flex; gap:11px; align-items:flex-start; margin:16px 0 8px; }
.coach-face{
  font-size:34px; flex:none; width:56px; height:56px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--card); box-shadow:var(--shadow-sm);
}
.coach-face.talk{ animation: nod .5s ease-in-out 2; }
@keyframes nod{ 0%,100%{transform:rotate(0)} 30%{transform:rotate(-9deg) scale(1.06)} 70%{transform:rotate(9deg) scale(1.06)} }
.bubble{
  position:relative; flex:1;
  background:var(--card); box-shadow:var(--shadow-sm);
  border-radius:var(--r-md); padding:13px 16px;
}
.bubble::before{
  content:""; position:absolute; left:-8px; top:18px;
  border:9px solid transparent; border-right-color:var(--card); border-left:0;
}
.bubble p{ margin:0; font-size:clamp(14px,3.6vw,16px); line-height:1.45; font-weight:600; }
.finger-hints{ display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
.finger-hints:empty{ display:none; }
.finger-tag{
  font-size:12px; font-weight:800; padding:5px 10px; border-radius:99px;
  background:color-mix(in srgb,var(--mango) 25%, transparent);
}
.finger-tag.idx{ background:color-mix(in srgb,var(--sky) 25%, transparent); }
.finger-tag.rule{ background:color-mix(in srgb,var(--grape) 20%, transparent); }

.lesson-status{ text-align:center; font-weight:800; min-height:26px; margin:6px 0; font-size:15px; }
.lesson-status.good{ color:var(--good); }
.lesson-status.bad{ color:var(--bad); }

.lesson-controls{ display:flex; gap:10px; justify-content:center; margin-top:14px; flex-wrap:wrap; }
.lesson-controls .btn{ flex:1 1 150px; max-width:260px; }

/* ---------------- Practice ---------------- */
.practice-hud{
  display:flex; align-items:center; gap:12px; justify-content:space-between;
  background:var(--card); box-shadow:var(--shadow-sm);
  border-radius:var(--r-md); padding:11px 15px; margin-bottom:14px;
}
.hud-item{ display:flex; flex-direction:column; line-height:1.2; }
.hud-label{ font-size:10.5px; color:var(--ink-soft); text-transform:uppercase; letter-spacing:.7px; font-weight:800; }
.hud-item b{ font-size:16px; }
.hud-timer{ flex:1; display:flex; align-items:center; gap:9px; max-width:260px; }
.timer-bar{ flex:1; height:11px; border-radius:99px; background:rgba(128,110,180,.2); overflow:hidden; }
.timer-fill{ height:100%; width:100%; border-radius:99px; background:linear-gradient(90deg,var(--mint),var(--mango)); }
.timer-fill.warn{ background:linear-gradient(90deg,var(--mango),var(--coral)); }
.hud-timer b{ font-variant-numeric:tabular-nums; font-size:14px; min-width:48px; text-align:right; }

.problem-card{
  border-radius:var(--r-lg); padding:clamp(18px,5vw,30px) 18px;
  background:var(--card); box-shadow:var(--shadow);
  text-align:center; margin-bottom:14px;
  transition:background .18s;
}
.problem-card.ok{ background:color-mix(in srgb,var(--good) 22%, var(--card)); }
.problem-card.no{ background:color-mix(in srgb,var(--bad) 22%, var(--card)); }
.problem-text{
  font-size:clamp(30px,10vw,54px); font-weight:900; letter-spacing:1px;
  font-variant-numeric:tabular-nums; line-height:1.15;
}
.problem-text .op{ color:var(--coral); padding:0 6px; }
.problem-text.stack{ font-size:clamp(22px,7vw,36px); }
.problem-text.prompt{ font-size:clamp(17px,4.6vw,24px); font-weight:800; }
.flash-host{ font-size:clamp(46px,17vw,96px); font-weight:900; min-height:1.2em; }
.flash-host.pulse{ animation: flashPop .18s ease-out; }
@keyframes flashPop{ from{ transform:scale(.6); opacity:0 } to{ transform:scale(1); opacity:1 } }

.answer-area{ display:flex; flex-direction:column; align-items:center; gap:12px; }
.answer-box{
  width:100%; max-width:420px; text-align:center;
  font-size:clamp(28px,8vw,40px); font-weight:900;
  font-variant-numeric:tabular-nums;
  padding:10px 16px; border-radius:var(--r-md);
  background:var(--card); box-shadow:var(--shadow-sm);
  border:3px dashed color-mix(in srgb,var(--grape) 40%, transparent);
  min-height:62px;
}
.keypad{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:9px; width:100%; max-width:420px;
}
.key{
  border:0; cursor:pointer; font-weight:900;
  font-size:clamp(20px,6vw,26px);
  padding:0; height:clamp(52px,13vw,66px);
  border-radius:var(--r-md);
  background:var(--card); box-shadow:var(--shadow-sm);
  transition:transform .1s;
}
.key:active{ transform:translateY(4px); box-shadow:none; }
.key.wide{ grid-column:span 1; }
.key-go{ background:linear-gradient(160deg,var(--mint),#17A97F); color:#fff; }
.key-del{ background:color-mix(in srgb,var(--coral) 22%, var(--card)); }

.practice-foot{ display:flex; justify-content:space-between; margin-top:14px; }

/* ---------------- Results ---------------- */
.results-hero{
  border-radius:var(--r-lg); padding:26px 20px; text-align:center;
  color:#fff; box-shadow:var(--shadow); margin-bottom:16px;
  background:linear-gradient(135deg,var(--grape),var(--bubble));
}
.results-hero h2{ margin:0 0 4px; font-size:clamp(24px,7vw,34px); }
.results-hero p{ margin:0; opacity:.94; }
.big-stars{ font-size:clamp(38px,12vw,58px); letter-spacing:6px; margin:8px 0 4px; }
.big-stars i{ display:inline-block; font-style:normal; animation: starPop .5s cubic-bezier(.2,1.8,.4,1) backwards; }

.score-grid{
  display:grid; gap:11px; margin-bottom:16px;
  grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
}
.score-tile{
  border-radius:var(--r-md); padding:15px; text-align:center;
  background:var(--card); box-shadow:var(--shadow-sm);
}
.score-tile b{ display:block; font-size:clamp(22px,6vw,30px); line-height:1.1; }
.score-tile span{ font-size:11.5px; color:var(--ink-soft); font-weight:800; text-transform:uppercase; letter-spacing:.5px; }
.score-tile.hero-tile b{ color:var(--grape); }

.chart-card{
  border-radius:var(--r-md); padding:16px; margin-bottom:16px;
  background:var(--card); box-shadow:var(--shadow-sm);
}
.chart-card h3{ margin:0 0 4px; font-size:15px; }
.chart-card .sub{ margin:0 0 14px; font-size:12px; color:var(--ink-soft); }
.bars{ display:flex; align-items:flex-end; gap:5px; height:120px; }
.bars .bar{
  flex:1; border-radius:7px 7px 3px 3px; min-height:6px;
  background:var(--mint); position:relative;
  animation: growBar .5s cubic-bezier(.2,1,.3,1) backwards;
}
.bars .bar.miss{ background:var(--coral); }
.bars .bar span{
  position:absolute; bottom:-17px; left:0; right:0; text-align:center;
  font-size:9px; color:var(--ink-soft);
}
.bars-wrap{ padding-bottom:20px; }
@keyframes growBar{ from{ height:0 } }
@keyframes starPop{ from{ transform:scale(0) rotate(-40deg); opacity:0 } }

.review-list{ display:grid; gap:7px; }
.review-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 13px; border-radius:var(--r-sm);
  background:var(--card); box-shadow:var(--shadow-sm); font-size:14px;
}
.review-item .mark{ font-size:17px; }
.review-item .eq{ font-weight:800; flex:1; font-variant-numeric:tabular-nums; }
.review-item .t{ color:var(--ink-soft); font-size:12px; font-variant-numeric:tabular-nums; }
.review-item .yours{ color:var(--bad); font-weight:800; }

/* ---------------- Free play ---------------- */
.play-readout{ text-align:center; margin:14px 0; }
.big-number{
  font-size:clamp(38px,12vw,64px); font-weight:900;
  font-variant-numeric:tabular-nums; letter-spacing:2px;
  color:var(--grape);
}
.tip-card{
  margin-top:22px; border-radius:var(--r-md); padding:16px 18px;
  background:var(--card); box-shadow:var(--shadow-sm); font-size:14px;
}
.tip-card ul{ margin:8px 0 0; padding-left:20px; line-height:1.7; }

/* ---------------- Toast + confetti ---------------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%,140%);
  background:var(--ink); color:var(--cream);
  padding:13px 22px; border-radius:99px; font-weight:800; font-size:14.5px;
  box-shadow:0 12px 30px rgba(0,0,0,.3); z-index:90;
  transition:transform .45s cubic-bezier(.2,1.6,.4,1);
  max-width:min(90vw,420px); text-align:center;
}
.toast.show{ transform:translate(-50%,0); }

#confetti{
  position:fixed; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:80;
}

/* ---------------- Responsive ---------------- */
@media (max-width:480px){
  .quick-row{ grid-template-columns:repeat(3,1fr); }
  .quick-card{ padding:11px 9px; }
  .q-label{ font-size:13px; }
  .q-sub{ display:none; }
  .stat-pill{ padding:6px 9px; font-size:13px; }
  .lesson-controls .btn{ flex:1 1 100%; max-width:none; }
}

/* Wide screens: put lesson coach beside the board */
@media (min-width:900px){
  .lesson-screen.active{
    display:grid; gap:18px 26px;
    grid-template-columns: 1fr 1.15fr;
    grid-template-areas:
      "top    board"
      "coach  board"
      "status board"
      "ctrl   board";
    align-items:start;
  }
  .lesson-top{ grid-area:top; align-items:flex-start; }
  .coach{ grid-area:coach; margin-top:0; }
  .abacus-host{ grid-area:board; }
  .lesson-status{ grid-area:status; text-align:left; }
  .lesson-controls{ grid-area:ctrl; justify-content:flex-start; }

  .practice-screen.active{
    display:grid; gap:16px 26px;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "hud   hud"
      "prob  ans"
      "board ans"
      "foot  foot";
    align-items:start;
  }
  .practice-hud{ grid-area:hud; margin-bottom:0; }
  .problem-card{ grid-area:prob; margin-bottom:0; }
  .practice-screen .abacus-host{ grid-area:board; }
  .answer-area{ grid-area:ans; }
  .practice-foot{ grid-area:foot; }
}

/* Short landscape phones: shrink the chrome so the board still fits */
@media (max-height:520px) and (orientation:landscape){
  .hero{ padding:14px; }
  .coach{ margin:8px 0 4px; }
  .coach-face{ width:44px; height:44px; font-size:26px; }
  .equation{ font-size:26px; padding:4px 14px; }
  .btn{ min-height:44px; padding:10px 16px; }
  .key{ height:44px; }
  .section-title{ margin:14px 0 8px; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ============================================================
   Concept lessons — friends of 5 and friends of 10
   ============================================================ */
.concept-panel{
  background:var(--card); box-shadow:var(--shadow);
  border-radius:var(--r-lg); padding:clamp(16px,4vw,26px);
  margin:6px 0 4px; text-align:center;
}
.concept-panel h3{
  margin:0 0 4px; font-size:clamp(17px,4.6vw,22px);
}
.concept-panel .cp-sub{
  margin:0 0 18px; font-size:13.5px; color:var(--ink-soft);
}

/* the frame of dots: 5 for little friends, 10 for big friends */
.frame-grid{
  display:grid; gap:8px; justify-content:center; margin:0 auto 14px;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  max-width:min(100%, 340px);
}
.frame-cell{
  aspect-ratio:1; border-radius:50%;
  background:rgba(128,110,180,.14);
  border:3px solid transparent;
  display:grid; place-items:center;
  font-weight:900; font-size:clamp(13px,4vw,18px); color:#fff;
  transition: background .38s cubic-bezier(.2,1.5,.4,1), transform .38s cubic-bezier(.2,1.5,.4,1);
}
.frame-cell.a{ background:#E4572E; transform:scale(1.06); }
.frame-cell.b{ background:#2FA8A0; transform:scale(1.06); }

.concept-eq{
  font-size:clamp(24px,7.5vw,38px); font-weight:900; letter-spacing:1px;
  margin:4px 0 6px; font-variant-numeric:tabular-nums;
}
.concept-eq .ca{ color:#E4572E; }
.concept-eq .cb{ color:#2FA8A0; }
.concept-eq .ct{ color:var(--grape); }
.concept-caption{
  min-height:2.6em; font-size:clamp(14px,3.8vw,16px); font-weight:700;
  line-height:1.4; margin:0 0 14px;
}

.pair-chips{ display:flex; flex-wrap:wrap; gap:7px; justify-content:center; }
.pair-chip{
  font-size:13.5px; font-weight:800; padding:7px 13px; border-radius:999px;
  background:rgba(128,110,180,.13); color:var(--ink-soft);
  transition:background .3s, color .3s, transform .3s;
}
.pair-chip.on{
  background:linear-gradient(160deg,var(--mango),var(--coral));
  color:#fff; transform:scale(1.08);
}

/* the slow-motion toggle sits with the lesson controls */
.slow-toggle{
  background:var(--card); box-shadow:var(--shadow-sm); border:0; cursor:pointer;
  font-weight:800; font-size:13px; padding:9px 15px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px;
}
.slow-toggle.on{ background:linear-gradient(160deg,var(--mint),#17A97F); color:#fff; }
.lesson-extra{ display:flex; justify-content:center; gap:8px; margin-top:10px; flex-wrap:wrap; }

/* ============================================================
   Sign-in gate and the account strip
   ============================================================ */
.auth-screen{ display:none; }
.auth-screen.active{ display:flex; align-items:center; justify-content:center; min-height:70vh; }

.auth-card{
  width:100%; max-width:420px; text-align:center;
  background:var(--card); box-shadow:var(--shadow);
  border-radius:var(--r-lg); padding:clamp(22px,6vw,34px);
}
.auth-mascot{ font-size:clamp(40px,12vw,62px); animation: bobble 3.2s ease-in-out infinite; }
.auth-card h1{ margin:6px 0 6px; font-size:clamp(22px,6vw,29px); }
.auth-card .lede{ margin:0 0 18px; }

.auth-tabs{
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
  background:rgba(128,110,180,.14); border-radius:999px; padding:4px; margin-bottom:18px;
}
.auth-tab{
  border:0; cursor:pointer; background:transparent; color:var(--ink-soft);
  font-weight:800; font-size:14px; padding:10px 8px; border-radius:999px;
  transition:background .22s, color .22s;
}
.auth-tab.on{ background:var(--card); color:var(--ink); box-shadow:var(--shadow-sm); }

.field{ display:block; text-align:left; margin-bottom:12px; }
.field span{
  display:block; font-size:12px; font-weight:800; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.6px; margin-bottom:5px;
}
.field input{
  width:100%; font:inherit; font-size:16px;   /* 16px stops iOS zooming on focus */
  padding:13px 15px; border-radius:var(--r-md);
  border:2px solid var(--line); background:var(--cream-2); color:var(--ink);
  transition:border-color .2s, background .2s;
}
.field input:focus{ outline:none; border-color:var(--grape); background:var(--card); }

.auth-msg{ min-height:1.3em; margin:2px 0 12px; font-size:13.5px; font-weight:700; }
.auth-msg.bad{ color:var(--bad); }
.auth-msg.good{ color:var(--good); }
.auth-fine{ margin:4px 0 0; font-size:11.5px; color:var(--ink-soft); }

.account-row{ margin-top:26px; }
.acct{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--card); box-shadow:var(--shadow-sm);
  border-radius:var(--r-md); padding:13px 16px;
}
.acct-dot{
  width:10px; height:10px; border-radius:50%; flex:none;
  background:var(--ink-soft); opacity:.45;
}
.acct-dot.on{ background:var(--good); opacity:1; box-shadow:0 0 0 4px color-mix(in srgb,var(--good) 22%, transparent); }
.acct-text{ flex:1; min-width:140px; font-size:13.5px; text-align:left; color:var(--ink-soft); }
.acct-text b{ color:var(--ink); }
.acct .btn{ min-height:42px; padding:10px 16px; font-size:14px; }

/* ============================================================
   Home: sign-in nudge and the guide links
   ============================================================ */
.auth-card h2{ margin:6px 0 6px; font-size:clamp(22px,6vw,29px); }

.save-nudge{
  display:flex; align-items:center; gap:10px; margin-top:14px;
  padding:10px 10px 10px 14px; border-radius:var(--r-md);
  background:linear-gradient(120deg, color-mix(in srgb,var(--mint) 22%, var(--card)), var(--card));
  box-shadow:var(--shadow-sm);
}
.sn-icon{ font-size:22px; }
.sn-text{ flex:1; font-size:13.5px; line-height:1.35; }
.sn-go{
  border:0; cursor:pointer; font-weight:800; font-size:13.5px; color:#fff;
  padding:9px 14px; border-radius:999px; background:linear-gradient(160deg,var(--grape),var(--grape-d));
}
.sn-x{ border:0; background:none; cursor:pointer; font-size:20px; line-height:1; color:var(--ink-soft); padding:4px 6px; }

.learn-hub{ margin-top:8px; }
.learn-hub .lede{ margin:-4px 0 12px; font-size:14px; }
.guide-links{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
.guide-link{
  display:flex; flex-direction:column; gap:3px; text-decoration:none; color:inherit;
  padding:13px 15px; border-radius:var(--r-md); background:var(--card); box-shadow:var(--shadow-sm);
  border-left:5px solid var(--grape); transition:transform .16s;
}
.guide-link:active{ transform:translateY(3px); }
.guide-link b{ font-size:15px; }
.guide-link span{ font-size:12.5px; color:var(--ink-soft); line-height:1.4; }
.hub-more{ margin:14px 0 0; font-size:14px; font-weight:700; }
.hub-more a{ color:var(--grape); }

/* ============================================================
   Locked stages: skip-ahead panel, previewed lessons, unlock result
   ============================================================ */
.stage-head.locked{ filter:saturate(.55); }
.lock-chip{
  display:inline-block; margin-top:12px; padding:5px 12px; border-radius:999px;
  background:rgba(255,255,255,.26); font-weight:800; font-size:13px;
}
.skip-card{ margin:0 0 20px; border:2px dashed color-mix(in srgb,var(--grape) 45%, transparent); }
.skip-card .btn + .btn{ margin-top:10px; }
.inside-title{
  margin:4px 0 10px; font-size:13px; font-weight:900; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.7px;
}
.lesson-row.locked{ opacity:.55; filter:saturate(.4); cursor:not-allowed; }
.lesson-row.locked .lesson-num{ background:rgba(128,110,180,.18); color:var(--ink-soft); font-size:16px; }
.unlock-banner{
  margin:0 0 16px; padding:16px 18px; border-radius:var(--r-md); text-align:center;
  background:var(--card); box-shadow:var(--shadow-sm); font-size:15px; line-height:1.45;
}
.unlock-banner.win{ background:linear-gradient(135deg,var(--mint),#17A97F); color:#fff; font-size:17px; }
.unlock-banner b{ font-weight:900; }

.skip-signin{ margin:0 0 12px; font-size:13px; font-weight:700; color:var(--ink-soft); }

/* answering on the board */
.bead-hint{ margin:0; text-align:center; font-size:13.5px; font-weight:700; color:var(--ink-soft); }

/* The coach's tips are written in paragraphs; keep the line breaks. */
#coachText{ white-space:pre-line; }

/* Tips and concept lessons have no abacus, so on wide screens they read as
   one centred column instead of leaving the board's half of the grid empty. */
@media (min-width:900px){
  .lesson-screen.no-board.active{ display:block; max-width:760px; margin:0 auto; }
  .lesson-screen.no-board .lesson-top{ align-items:center; }
  .lesson-screen.no-board .coach{ margin-top:16px; }
  .lesson-screen.no-board .lesson-status{ text-align:center; }
  .lesson-screen.no-board .lesson-controls{ justify-content:center; }
}