/* ============================================================
   Learn & Earn — design system
   Rubik for text, Secular One for display, SVG icons only.
   ============================================================ */
@import url('fonts.css');

#welcomeScreen{position:relative;z-index:10;display:grid;place-items:center;min-height:100svh;padding:32px 24px;box-sizing:border-box;background:radial-gradient(ellipse at 80% 10%,#e3eccf 0%,transparent 55%),radial-gradient(ellipse at 0% 90%,#e6ece2 0%,transparent 55%),#f6f5ee;text-align:center;color:#244c40}
.welcome-content{max-width:440px;width:100%}.welcome-logo{display:block;margin:0 auto 28px;width:144px;height:144px;filter:drop-shadow(0 14px 24px #234c4220)}
.welcome-kicker{font-size:12px;letter-spacing:3px;font-weight:700;color:#677d68;margin:0 0 12px}#welcomeScreen h1{font-size:clamp(36px,8vw,52px);margin:0;line-height:1.2;letter-spacing:-1px}#welcomeScreen h1 span{color:#617b37}.welcome-tagline{font-size:18px;line-height:1.5;color:#65796c;margin:18px 0 42px}#welcomeStatus{font-size:14px;color:#64766a}.welcome-loader{display:flex;justify-content:center;gap:7px;margin-bottom:14px}.welcome-loader i{width:7px;height:7px;border-radius:50%;background:#648650;animation:welcomePulse 1.4s ease-in-out infinite}.welcome-loader i:nth-child(2){animation-delay:.18s}.welcome-loader i:nth-child(3){animation-delay:.36s}@keyframes welcomePulse{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-5px)}}@media(prefers-reduced-motion:reduce){.welcome-loader i{animation:none;opacity:.7}}

:root{
  /* brand */
  --violet:#6d28d9; --violet-600:#7c3aed; --violet-300:#c4b5fd; --violet-50:#f5f3ff;
  --pink:#db2777;   --blue:#0284c7;  --teal:#0d9488;  --green:#16a34a;
  --amber:#d97706;  --red:#dc2626;   --slate:#64748b;
  /* surfaces */
  --ink:#1e1b4b; --ink-2:#4b4b72; --ink-3:#7c7ba1;
  --bg:#f4f2ff; --bg-2:#ffffff;
  --card:#ffffff; --card-edge:rgba(109,40,217,.10);
  --field:#f6f4ff;
  /* elevation */
  --sh-1:0 1px 2px rgba(30,27,75,.06), 0 2px 8px rgba(109,40,217,.06);
  --sh-2:0 2px 4px rgba(30,27,75,.06), 0 8px 24px rgba(109,40,217,.10);
  --sh-3:0 8px 40px rgba(76,29,149,.18);
  --press:0 3px 0 rgba(30,27,75,.14);
  /* geometry */
  --r-s:12px; --r-m:16px; --r-l:22px; --r-xl:28px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --maxw:1040px;
}
/* themes recolour the brand, not the structure */
body[data-theme="ocean"]{ --violet:#0369a1; --violet-600:#0284c7; --violet-300:#7dd3fc; --violet-50:#f0f9ff; --pink:#0891b2; --bg:#eff9ff; }
body[data-theme="forest"]{ --violet:#15803d; --violet-600:#16a34a; --violet-300:#86efac; --violet-50:#f0fdf4; --pink:#65a30d; --bg:#f1fdf4; }
body[data-theme="sunset"]{ --violet:#be123c; --violet-600:#e11d48; --violet-300:#fda4af; --violet-50:#fff1f2; --pink:#ea580c; --bg:#fff5f2; }
body[data-theme="space"]{
  --violet:#a78bfa; --violet-600:#c4b5fd; --violet-300:#4c1d95; --violet-50:#1e1b4b;
  --pink:#f472b6; --ink:#f5f3ff; --ink-2:#c7d2fe; --ink-3:#8b8bb8;
  --bg:#13102b; --bg-2:#1b1740; --card:#241f4d; --field:#2c2657; --card-edge:rgba(167,139,250,.18);
  --sh-2:0 2px 4px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.4);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html,body{height:100%; margin:0; overscroll-behavior:none}
body{
  font-family:'Rubik','Segoe UI',system-ui,sans-serif;
  font-feature-settings:'tnum' 1;
  color:var(--ink); background:var(--bg); overflow:hidden; user-select:none;
  -webkit-font-smoothing:antialiased;
}
/* soft light behind everything */
.bg{position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.bg::before,.bg::after{
  content:''; position:absolute; border-radius:50%; filter:blur(70px); opacity:.5;
}
.bg::before{ width:60vw; height:60vw; background:var(--violet-300); top:-20vw; inset-inline-start:-15vw; }
.bg::after{ width:55vw; height:55vw; background:#fbcfe8; bottom:-20vw; inset-inline-end:-15vw; opacity:.42; }
body[data-theme="space"] .bg::before{opacity:.25} body[data-theme="space"] .bg::after{opacity:.2}
#fx{position:fixed; inset:0; z-index:80; pointer-events:none}

#app{position:relative; z-index:2; height:100%; display:flex; flex-direction:column; max-width:var(--maxw); margin:0 auto; width:100%}

/* svg icon defaults */
.ic{display:block; flex:none}
.art{display:block; flex:none}
.iconbox{display:inline-flex; align-items:center; justify-content:center}

/* ============================ top bar ============================ */
.topbar{display:flex; align-items:center; gap:8px; padding:10px 14px 6px}
.statstrip{display:flex; align-items:center; gap:4px; background:var(--card); border:1px solid var(--card-edge);
  border-radius:999px; padding:4px 6px; box-shadow:var(--sh-1); overflow:hidden}
.stat-i{display:flex; align-items:center; gap:4px; padding:3px 8px; border-radius:999px; font-weight:700; font-size:14px; white-space:nowrap}
.stat-i .ic{width:16px; height:16px}
.stat-i.lvl{color:var(--violet)} .stat-i.stat-coins{color:var(--amber)}
.stat-i.cash{color:var(--green)} .stat-i.fire{color:#ea580c}
.stat-i + .stat-i{border-inline-start:1px solid var(--card-edge)}
.who{display:flex; align-items:center; gap:7px; background:var(--card); border:1px solid var(--card-edge);
  border-radius:999px; padding:3px 12px 3px 3px; box-shadow:var(--sh-1); font-weight:700; font-size:15px; cursor:pointer}
body:not(.rtl) .who{padding:3px 12px 3px 3px} body.rtl .who{padding:3px 3px 3px 12px}
.who .art{width:30px; height:30px; background:var(--violet-50); border-radius:50%}
.spacer{flex:1}
.iconbtn{border:1px solid var(--card-edge); background:var(--card); width:38px; height:38px; border-radius:12px; cursor:pointer;
  color:var(--ink-2); box-shadow:var(--sh-1); display:grid; place-items:center; transition:transform .12s, color .12s, background .12s}
.iconbtn:active{transform:scale(.93)}
.iconbtn.on{background:var(--violet); color:#fff; border-color:transparent}
.iconbtn.off{color:#b9b7d0}
.iconbtn.lang{width:auto; padding:0 12px; font-family:inherit; font-weight:700; font-size:14px; letter-spacing:.5px}

/* ============================ screens ============================ */
#screens{flex:1; min-height:0; position:relative}
.screen{position:absolute; inset:0; display:none; flex-direction:column}
.screen.on{display:flex; animation:fadeUp .28s cubic-bezier(.2,.9,.3,1)}
@keyframes fadeUp{from{opacity:0; transform:translateY(8px)}to{opacity:1;transform:none}}
.scroll{overflow-y:auto; overflow-x:hidden; padding:4px 16px 28px; -webkit-overflow-scrolling:touch; height:100%}
.center-col{display:flex; flex-direction:column; align-items:center; text-align:center}

h1.logo{font-family:'Secular One',Rubik,sans-serif; font-weight:400; margin:10px 0 2px;
  font-size:clamp(30px,6.6vw,46px); letter-spacing:-.5px; text-align:center; color:var(--ink)}
h1.logo em{font-style:normal; color:var(--violet)}
h1.logo.sm{font-size:clamp(24px,5vw,32px)}
.sub{margin:0 0 14px; font-size:16px; color:var(--ink-3); font-weight:500; text-align:center}
.h2{font-family:'Secular One',Rubik,sans-serif; font-weight:400; font-size:23px; margin:12px 0 10px; text-align:center}
.h3{font-size:15px; margin:22px 0 10px; color:var(--ink-3); font-weight:600; letter-spacing:.4px;
  display:flex; align-items:center; gap:7px; text-transform:uppercase}
.h3 .ic{width:17px; height:17px}
.card{background:var(--card); border:1px solid var(--card-edge); border-radius:var(--r-l); box-shadow:var(--sh-1);
  padding:16px; margin-bottom:12px}

/* ============================ controls ============================ */
.btn{border:0; cursor:pointer; font-family:inherit; font-weight:600; color:#fff; font-size:17px;
  padding:12px 22px; border-radius:14px; background:var(--violet); box-shadow:var(--press);
  transition:transform .1s, box-shadow .1s, filter .15s; margin:4px;
  display:inline-flex; align-items:center; justify-content:center; gap:8px}
.btn:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(30,27,75,.14)}
.btn:hover{filter:brightness(1.06)}
.btn .ic{width:19px; height:19px}
.btn.green{background:var(--green)} .btn.pink{background:var(--pink)} .btn.blue{background:var(--blue)}
.btn.red{background:var(--red)} .btn.amber{background:var(--amber)}
.btn.grey{background:var(--field); color:var(--ink-2); box-shadow:0 2px 0 rgba(30,27,75,.08)}
.btn.ghost{background:transparent; color:var(--violet); box-shadow:none; border:2px solid var(--violet-300)}
.btn.big{font-size:19px; padding:15px 30px; border-radius:16px}
.btn.sm{font-size:14px; padding:8px 14px; border-radius:11px}
.btn.block{width:100%}
.btn[disabled]{opacity:.4; pointer-events:none}
.center{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:12px}

.txt{font-family:inherit; font-size:17px; font-weight:500; padding:12px 14px; border-radius:13px;
  border:2px solid var(--card-edge); width:100%; max-width:340px; background:var(--field); color:var(--ink); text-align:center;
  outline:none; transition:border-color .15s}
.txt:focus{border-color:var(--violet)}
textarea.txt{text-align:start; min-height:130px; border-radius:15px; line-height:1.6}
select.txt{text-align:start}
.rowlbl{font-weight:600; margin:14px 0 6px; color:var(--ink-3); font-size:14px}
.chips{display:flex; gap:7px; flex-wrap:wrap; justify-content:center}
.chip{border:2px solid transparent; background:var(--field); color:var(--ink-2); font-family:inherit; font-weight:600;
  font-size:15px; padding:9px 15px; border-radius:11px; cursor:pointer; transition:all .15s;
  display:inline-flex; align-items:center; gap:6px}
.chip:active{transform:scale(.96)}
.chip.on{border-color:var(--violet); background:var(--card); color:var(--violet); box-shadow:var(--sh-1)}
.chip.av{padding:5px; border-radius:14px}
.chip.av .art{width:46px; height:46px}

/* ============================ language gate ============================ */
.langpick{display:grid; gap:14px; width:100%; max-width:420px; margin-top:22px}
.langcard{background:var(--card); border:2px solid var(--card-edge); border-radius:var(--r-xl); padding:22px;
  display:flex; align-items:center; gap:16px; cursor:pointer; box-shadow:var(--sh-1); transition:all .18s; text-align:start}
.langcard:hover{border-color:var(--violet); transform:translateY(-2px); box-shadow:var(--sh-2)}
.langcard .big{font-family:'Secular One',Rubik,sans-serif; font-size:28px; line-height:1.1}
.langcard .small{font-size:14px; color:var(--ink-3); font-weight:500}
.langcard .ic{width:34px; height:34px; color:var(--violet)}
.langcard.he{direction:rtl} .langcard.en{direction:ltr}

/* ============================ avatar ============================ */
.avatar{width:84px; height:84px; border-radius:26px; position:relative; flex:none; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--violet-50),#fff); border:1px solid var(--card-edge); box-shadow:var(--sh-1)}
.avatar .art{width:78%; height:78%}
.avatar.sm{width:54px; height:54px; border-radius:17px}
.avatar.lg{width:112px; height:112px; border-radius:34px}
.avatar.happy{animation:bounce .5s ease 2}
.avatar.sad{animation:shake .45s ease}
@keyframes bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-12px) scale(1.04)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px) rotate(-3deg)}75%{transform:translateX(7px) rotate(3deg)}}
.buddyRow{display:flex; align-items:center; gap:10px; margin:6px 0 10px}
.speech{background:var(--card); border:1px solid var(--card-edge); border-radius:16px; padding:11px 15px; font-size:15.5px;
  font-weight:500; flex:1; box-shadow:var(--sh-1); min-height:44px; display:flex; align-items:center; gap:8px; color:var(--ink-2)}
.speech b{color:var(--ink); font-weight:700}

/* ============================ profiles ============================ */
.profiles{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:14px}
.profcard{background:var(--card); border:2px solid var(--card-edge); border-radius:var(--r-l); padding:14px 16px 12px;
  box-shadow:var(--sh-1); cursor:pointer; text-align:center; min-width:112px; position:relative; transition:all .16s}
.profcard:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
.profcard.on{border-color:var(--violet)}
.profcard .art{width:54px; height:54px; margin:0 auto 4px}
.profcard .nm{font-weight:700; font-size:15px}
.profcard .gr{font-size:12px; color:var(--ink-3); font-weight:500}
.profcard .del{position:absolute; top:-7px; inset-inline-end:-7px; background:var(--card); color:var(--red); border:1px solid var(--card-edge);
  width:24px; height:24px; border-radius:50%; cursor:pointer; display:grid; place-items:center; box-shadow:var(--sh-1)}
.profcard .del .ic{width:13px; height:13px}
.newprof{max-width:430px; width:100%; text-align:center}
.newprof h3{margin:0 0 4px; font-size:19px; font-weight:700}

/* ============================ home ============================ */
.hero{display:flex; align-items:center; gap:14px; background:linear-gradient(135deg,var(--violet),var(--violet-600));
  border:0; color:#fff; padding:18px; border-radius:var(--r-xl); box-shadow:var(--sh-2)}
.hero .avatar{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.25)}
.herotext{flex:1; min-width:0}
.herotext h2{margin:0 0 2px; font-size:21px; font-family:'Secular One',Rubik,sans-serif; font-weight:400}
.herotext .lvlline{font-size:13px; opacity:.85; margin-bottom:8px; font-weight:500}
.xpbar{height:9px; background:rgba(255,255,255,.25); border-radius:999px; overflow:hidden}
.xpbar i{display:block; height:100%; background:#fff; border-radius:999px; width:0; transition:width .7s cubic-bezier(.2,.9,.3,1)}
.chipsrow{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.chipsrow span{background:rgba(255,255,255,.18); border-radius:8px; padding:4px 9px; font-size:12.5px; font-weight:600;
  display:inline-flex; align-items:center; gap:5px}
.chipsrow span .ic{width:14px; height:14px}

.missions{display:grid; gap:8px}
.mission{background:var(--card); border:1px solid var(--card-edge); border-radius:var(--r-m); padding:11px 13px;
  box-shadow:var(--sh-1); display:flex; align-items:center; gap:12px}
.mission .mic{width:38px; height:38px; border-radius:11px; background:var(--violet-50); color:var(--violet);
  display:grid; place-items:center; flex:none}
.mission .mic .ic{width:20px; height:20px}
.mission .mtext{flex:1; min-width:0}
.mission .mtitle{font-weight:600; font-size:14.5px; line-height:1.3}
.mbar{height:7px; background:var(--field); border-radius:999px; overflow:hidden; margin-top:7px}
.mbar i{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg,var(--violet),var(--pink)); transition:width .5s}
.mission .mrew{font-weight:700; font-size:13.5px; color:var(--amber); white-space:nowrap; display:flex; align-items:center; gap:4px}
.mission .mrew .ic{width:15px; height:15px}
.mission.done{border-color:var(--green)}
.mission.claimed{opacity:.55}

.subjects{display:grid; grid-template-columns:repeat(auto-fill,minmax(152px,1fr)); gap:10px}
.subj{background:var(--card); border:1px solid var(--card-edge); border-radius:var(--r-l); padding:16px 12px;
  box-shadow:var(--sh-1); text-align:center; cursor:pointer; transition:all .16s; position:relative; overflow:hidden}
.subj:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.subj .sic{width:46px; height:46px; border-radius:14px; display:grid; place-items:center; margin:0 auto 8px; color:#fff}
.subj .sic .ic{width:25px; height:25px}
.subj .nm{font-weight:700; font-size:16px}
.subj .ds{font-size:12px; color:var(--ink-3); font-weight:500; margin-top:2px}
.subj .ring{height:5px; background:var(--field); border-radius:999px; margin-top:9px; overflow:hidden}
.subj .ring i{display:block; height:100%; border-radius:999px; background:var(--green)}

.modes{display:grid; grid-template-columns:repeat(auto-fill,minmax(152px,1fr)); gap:10px}
.mode{background:var(--card); border:1px solid var(--card-edge); border-radius:var(--r-l); padding:14px 12px;
  box-shadow:var(--sh-1); cursor:pointer; text-align:center; transition:all .16s; position:relative}
.mode:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.mode .mic{width:40px; height:40px; border-radius:13px; display:grid; place-items:center; margin:0 auto 7px; color:#fff}
.mode .mic .ic{width:22px; height:22px}
.mode .nm{font-weight:700; font-size:15.5px}
.mode .ds{font-size:11.5px; color:var(--ink-3); font-weight:500; line-height:1.35; margin-top:2px}
.mode .badge2{position:absolute; top:9px; inset-inline-end:9px; background:var(--red); color:#fff; border-radius:999px;
  min-width:20px; height:20px; padding:0 6px; font-size:11px; font-weight:700; display:grid; place-items:center}

/* ============================ skills ============================ */
.skills{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:10px}
.skill{background:var(--card); border:1px solid var(--card-edge); border-radius:var(--r-l); padding:14px 12px;
  box-shadow:var(--sh-1); cursor:pointer; text-align:center; transition:all .16s}
.skill:hover{transform:translateY(-3px); box-shadow:var(--sh-2)}
.skill .sic{width:40px; height:40px; border-radius:12px; background:var(--violet-50); color:var(--violet);
  display:grid; place-items:center; margin:0 auto 8px}
.skill .sic .ic{width:22px; height:22px}
.skill .nm{font-weight:600; font-size:14.5px; line-height:1.3; min-height:2.6em; display:flex; align-items:center; justify-content:center}
.skill .mast{height:5px; background:var(--field); border-radius:999px; overflow:hidden; margin-top:8px}
.skill .mast i{display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--green))}
.skill .lv{font-size:11.5px; color:var(--ink-3); font-weight:600; margin-top:5px}
.skill.wide{grid-column:1/-1}

/* ============================ game ============================ */
#scGame{overflow-y:auto}
.gamehead{display:flex; align-items:center; gap:10px; padding:6px 16px 4px}
.progress{flex:1; height:8px; background:var(--field); border-radius:999px; overflow:hidden}
.progress i{display:block; height:100%; width:0; border-radius:999px;
  background:linear-gradient(90deg,var(--violet),var(--pink)); transition:width .45s cubic-bezier(.2,.9,.3,1)}
.meter{display:flex; align-items:center; gap:4px; font-weight:700; font-size:14px; color:var(--ink-2)}
.meter .ic{width:17px; height:17px}
.meter .ic.hp{color:var(--red)} .meter .ic.hp.off{color:var(--field)}
#scGame .buddyRow, #scGame .qcard, #scGame .answers, #scGame .keypad, #scGame .writebox, #bossBox{margin-inline:16px}

#bossBox{text-align:center; margin-bottom:6px}
#bossBox .art{width:96px; height:96px; margin:0 auto}
#bossBox .art.hurt{animation:shake .4s}
.hpbar{height:10px; background:var(--field); border-radius:999px; overflow:hidden; box-shadow:inset 0 1px 3px rgba(0,0,0,.08); margin-top:4px}
.hpbar i{display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--red),var(--amber)); transition:width .45s}

.qcard{background:var(--card); border:1px solid var(--card-edge); border-radius:var(--r-xl); padding:18px 14px;
  box-shadow:var(--sh-2); text-align:center; margin-bottom:12px}
.qtext{font-size:clamp(17px,3.5vw,21px); font-weight:600; display:flex; align-items:center; justify-content:center;
  gap:9px; flex-wrap:wrap; line-height:1.45; color:var(--ink)}
.qtext .say{border:1px solid var(--card-edge); background:var(--violet-50); color:var(--violet); border-radius:10px;
  width:34px; height:34px; cursor:pointer; display:grid; place-items:center; flex:none}
.qtext .say .ic{width:18px; height:18px}
.qmath{font-size:clamp(30px,7.2vw,48px); font-weight:700; letter-spacing:1px; color:var(--violet); line-height:1.2;
  direction:ltr; unicode-bidi:isolate; margin-top:6px; font-variant-numeric:tabular-nums}
.qmath sup{font-size:.55em}

.objrow{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; max-width:520px; margin:10px auto 0}
.objrow .obj{animation:popin .36s backwards cubic-bezier(.2,1.5,.4,1); line-height:0}
.objrow .obj.gone{opacity:.28; filter:grayscale(1)}
@keyframes popin{from{opacity:0; transform:scale(.3)}to{opacity:1;transform:none}}
.group{display:flex; align-items:center; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:8px}
.grp{display:flex; flex-wrap:wrap; gap:4px; justify-content:center; background:var(--field); border-radius:14px;
  padding:9px; max-width:46vw}
.grp.wide{max-width:96%}
.grp .art{width:34px; height:34px}
.plus{font-size:26px; font-weight:700; color:var(--pink)}
.grouprows{display:flex; flex-direction:column; gap:5px; align-items:center}
.countnum{position:relative; display:inline-block; line-height:0}
.countnum b{position:absolute; bottom:-4px; inset-inline-end:-4px; font-size:11px; background:var(--violet); color:#fff;
  border-radius:50%; width:18px; height:18px; display:grid; place-items:center; animation:popin .3s backwards; line-height:1}
.bigword{display:flex; flex-direction:column; align-items:center; gap:8px}
.bigword .art{width:96px; height:96px}
.bigword span{font-size:30px; font-weight:700; color:var(--violet); letter-spacing:.5px}
.bigword .he{font-size:19px; color:var(--ink-3); font-weight:500}
.bigletter{font-size:88px; font-weight:700; color:var(--violet); line-height:1.15}
.bigletter.trace{color:var(--violet-300)}
.spellgap{display:flex;gap:8px;unicode-bidi:isolate;font-size:30px;font-weight:700;color:var(--violet)}
.spellgap>span{letter-spacing:0;min-width:22px;text-align:center}.spellgap>.missing{background:#edf3e3;border-radius:6px;color:#50743b}
.passage{background:var(--field); border-radius:14px; padding:14px; font-size:16.5px; font-weight:500;
  line-height:1.75; text-align:start; color:var(--ink-2)}
.passage.ltr{direction:ltr; text-align:left}
.pattern{display:flex; gap:7px; justify-content:center; align-items:center; flex-wrap:wrap; margin-top:8px}
.pattern .sw{width:38px; height:38px; border-radius:11px}
.pattern .qm{width:38px; height:38px; border-radius:11px; border:2.5px dashed var(--violet-300); color:var(--violet);
  display:grid; place-items:center; font-weight:700; font-size:20px}
.shaperow{display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:8px}
.shaperow figure{margin:0}
.shaperow figcaption{font-weight:600; font-size:13px; color:var(--ink-3); margin-top:2px}
.pricetag{display:inline-flex; align-items:center; gap:10px; background:var(--field); border-radius:14px; padding:10px 16px;
  font-size:22px; font-weight:700; margin-top:8px}
.pricetag b{color:var(--red)}

/* answers */
.answers{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; padding-bottom:16px}
.answers.one{grid-template-columns:1fr}
.ans{border:1px solid var(--card-edge); cursor:pointer; font-family:inherit; font-weight:700;
  font-size:clamp(20px,5vw,30px); color:var(--ink); background:var(--card); border-radius:16px; padding:16px 8px;
  box-shadow:var(--press); transition:transform .1s, box-shadow .1s, background .2s, color .2s;
  position:relative; min-height:64px; display:flex; align-items:center; justify-content:center}
.ans.txt2{font-size:clamp(15px,3.5vw,19px); font-weight:600; line-height:1.35}
.ans:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(30,27,75,.14)}
.ans .k{position:absolute; top:5px; inset-inline-start:9px; font-size:10.5px; color:var(--ink-3); font-weight:600; opacity:.6}
.ans.good{background:var(--green); color:#fff; border-color:transparent; animation:bounce .5s}
.ans.bad{background:var(--red); color:#fff; border-color:transparent; animation:shake .4s}
.ans.gone{opacity:.3; pointer-events:none; transform:scale(.95)}

/* keypad */
.keypad{padding-bottom:16px}
.kpdisplay{background:var(--card); border:1px solid var(--card-edge); border-radius:16px; box-shadow:var(--sh-1);
  font-size:34px; font-weight:700; text-align:center; padding:12px; margin-bottom:10px; color:var(--violet);
  min-height:62px; direction:ltr; display:flex; align-items:center; justify-content:center; gap:8px}
.kpdisplay i{font-size:18px; color:var(--ink-3); font-style:normal; font-weight:600}
.kpgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.kpgrid button{border:1px solid var(--card-edge); background:var(--card); border-radius:14px; font-family:inherit;
  font-weight:600; font-size:23px; padding:14px 0; box-shadow:var(--press); cursor:pointer; color:var(--ink);
  display:grid; place-items:center}
.kpgrid button:active{transform:translateY(2px); box-shadow:0 1px 0 rgba(30,27,75,.14)}
.kpgrid button.ok{background:var(--green); color:#fff; border-color:transparent}
.kpgrid button.del{background:var(--field); color:var(--amber)}
.kpgrid button .ic{width:22px; height:22px}
.kpgrid.pin{max-width:270px; margin:0 auto}

/* handwriting */
.writebox{padding-bottom:16px}
.padrow{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:10px}
.padwrap{position:relative}
.padwrap canvas{background:var(--card); border-radius:16px; box-shadow:var(--sh-1); touch-action:none; display:block;
  width:92px; height:116px; border:2px dashed var(--violet-300)}
.padwrap.big canvas{width:min(76vw,320px); height:210px}
.padwrap.ok canvas{border-color:var(--green); border-style:solid}
.padwrap.no canvas{border-color:var(--red); border-style:solid}
.padwrap .mark{position:absolute; top:-9px; inset-inline-end:-9px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; color:#fff}
.padwrap .mark .ic{width:14px; height:14px}
.padwrap.ok .mark{background:var(--green)} .padwrap.no .mark{background:var(--red)}
.writebtns{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.writeres{text-align:center; font-size:16px; font-weight:600; margin-top:10px; min-height:26px; color:var(--ink-2)}
.writeres .read{background:var(--field); border-radius:9px; padding:3px 10px; color:var(--violet); font-weight:700}

/* ============================ lesson visuals ============================ */
.numline{display:flex; gap:3px; justify-content:center; flex-wrap:wrap; margin:12px 0 6px; direction:ltr}
.numline b{width:31px; height:36px; border-radius:10px; background:var(--field); display:grid; place-items:center;
  font-size:15px; color:var(--ink-3); font-weight:600; transition:all .3s}
.numline.neg b{width:25px; font-size:12.5px}
.numline b.start{background:var(--blue); color:#fff}
.numline b.hop{background:var(--amber); color:#fff}
.numline b.end{background:var(--green); color:#fff; transform:scale(1.1)}
.numline b.hop,.numline b.end{animation:hopin .34s backwards cubic-bezier(.2,1.6,.4,1)}
@keyframes hopin{from{transform:scale(.4); opacity:0}to{transform:scale(1); opacity:1}}
.hops{font-size:19px; font-weight:700; direction:ltr; color:var(--ink-2); letter-spacing:1px}
.bigeq{font-size:clamp(22px,5.2vw,32px); font-weight:700; color:var(--violet); margin:10px 0;
  direction:ltr; unicode-bidi:isolate; font-variant-numeric:tabular-nums}
.hi,b.hi{background:#fef3c7; border-radius:6px; padding:0 5px; color:var(--ink)}
.tip{background:#fffbeb; border:1px solid #fde68a; border-radius:13px; padding:11px 14px; font-size:14.5px;
  font-weight:600; color:#92400e; margin-top:12px; display:inline-flex; align-items:center; gap:8px; text-align:start}
.tip .ic{width:18px; height:18px; flex:none; color:var(--amber)}
body[data-theme="space"] .tip{background:#3b2f0b; border-color:#78350f; color:#fde68a}
.stepdots{display:flex; gap:6px; justify-content:center; margin:4px 0 10px}
.stepdots i{width:22px; height:5px; border-radius:999px; background:var(--field); transition:all .3s}
.stepdots i.on{background:var(--violet); width:30px} .stepdots i.done{background:var(--green)}
.banner{background:var(--violet-50); color:var(--violet); font-weight:600; border-radius:999px; padding:5px 14px;
  font-size:13px; margin-bottom:8px; display:inline-flex; align-items:center; gap:6px}
.banner .ic{width:15px; height:15px}
.banner.try{background:#fff7ed; color:var(--amber)}

.b10{display:flex; gap:5px; align-items:flex-end; justify-content:center; flex-wrap:wrap; margin:10px 0}
.b10 .rod{width:11px; height:54px; border-radius:3px; display:block; background:var(--violet)}
.b10 .ones{display:flex; gap:3px; flex-wrap:wrap; max-width:66px}
.b10 .cube{width:11px; height:11px; border-radius:2px; display:block; background:var(--violet)}
.colcalc{display:inline-block; font-size:27px; font-weight:700; direction:ltr; margin:8px 0;
  font-variant-numeric:tabular-nums; font-family:'Rubik',monospace}
.colcalc .row{display:flex; justify-content:flex-end; align-items:center}
.colcalc .row b{width:25px; text-align:center}
.colcalc .row u{width:25px; text-decoration:none; color:var(--pink)}
.colcalc .row.carry b{font-size:14px; color:var(--red); height:17px}
.colcalc .row.res{color:var(--green)}
.colcalc .row b.hi{background:#fef3c7; border-radius:5px}
.colcalc .bar{border-top:3px solid var(--ink); margin:3px 0}
.frac{display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; font-size:.72em; margin:0 5px}
.frac i{display:block; width:100%; min-width:24px; height:3px; background:currentColor; border-radius:2px; margin:2px 0}
.fracbar{display:flex; gap:2px; justify-content:center; margin:8px 0}
.fracbar i{width:24px; height:32px; border:2.5px solid var(--violet); border-radius:4px; display:block}
.fracrow{display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap}
.pie{margin:4px}
.percentbar{height:26px; background:var(--field); border-radius:999px; position:relative; overflow:hidden; max-width:300px; margin:10px auto}
.percentbar i{display:block; height:100%; background:linear-gradient(90deg,var(--violet),var(--pink))}
.percentbar b{position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-size:14px; text-shadow:0 1px 2px rgba(0,0,0,.3)}
.tenframe{display:grid; grid-template-columns:repeat(5,1fr); gap:3px; width:max-content; margin:10px auto;
  background:var(--violet); padding:3px; border-radius:8px}
.tenframe i{width:24px; height:24px; background:var(--card); border-radius:4px; display:block}
.tenframe i.on{background:var(--pink)}
.coins{display:flex; gap:8px; justify-content:center; flex-wrap:wrap; align-items:center; margin-top:8px}
.coin{display:flex; flex-direction:column; align-items:center}
.coin .art{width:52px; height:52px}
.coin .art.bill{width:76px; height:44px}
.areagrid{margin:10px auto; display:block}
.box3d{display:grid; place-items:center; margin:8px 0}
.box3d .ic{width:76px; height:76px; color:var(--violet)}

/* ============================ overlays ============================ */
.overlay{position:fixed; inset:0; background:rgba(30,27,75,.45); backdrop-filter:blur(4px); z-index:70;
  display:none; align-items:center; justify-content:center; padding:16px}
.overlay.on{display:flex; animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{background:var(--card); border-radius:var(--r-xl); padding:22px; max-width:540px; width:100%; box-shadow:var(--sh-3);
  text-align:center; animation:sheetIn .3s cubic-bezier(.2,.9,.3,1); max-height:92vh; overflow:auto}
@keyframes sheetIn{from{opacity:0; transform:translateY(20px) scale(.97)}to{opacity:1;transform:none}}
.sheet h2{margin:6px 0 4px; font-size:22px; font-family:'Secular One',Rubik,sans-serif; font-weight:400}
.sheet p{font-size:15.5px; font-weight:500; color:var(--ink-3); margin:8px 0; line-height:1.6}
.sheet .avatar{margin:0 auto 8px}
.pindots{display:flex; gap:11px; justify-content:center; margin:14px 0}
.pindots i{width:14px; height:14px; border-radius:50%; background:var(--field); border:2px solid var(--card-edge); transition:all .2s}
.pindots i.on{background:var(--violet); border-color:var(--violet); transform:scale(1.15)}

/* ============================ result ============================ */
.resultArt{display:grid; place-items:center; margin:8px 0}
.resultArt .art{width:110px; height:110px; animation:bounce 1.4s infinite}
.rewardStars{display:flex; gap:10px; justify-content:center; margin:10px 0}
.rewardStars .ic{width:40px; height:40px; color:var(--field)}
.rewardStars .ic.on{color:var(--amber); fill:var(--amber); animation:hopin .5s backwards}
.badges{display:flex; flex-wrap:wrap; gap:9px; justify-content:center}
.badge{background:var(--card); border:1px solid var(--card-edge); border-radius:14px; padding:11px 14px;
  box-shadow:var(--sh-1); font-weight:700; font-size:14px; min-width:86px}
.badge .bi{color:var(--violet); display:grid; place-items:center; margin-bottom:4px}
.badge .bi .ic{width:21px; height:21px}
.badge small{display:block; font-weight:500; color:var(--ink-3); font-size:11.5px; margin-top:1px}

/* ============================ shop ============================ */
.shoprow{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:10px; margin-bottom:6px}
.item{background:var(--card); border:2px solid var(--card-edge); border-radius:var(--r-m); padding:12px 6px 9px;
  text-align:center; box-shadow:var(--sh-1); cursor:pointer; transition:all .16s; position:relative}
.item:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
.item .art{width:52px; height:52px; margin:0 auto}
.item .sw{width:52px; height:52px; border-radius:14px; margin:0 auto}
.item .pr{font-weight:700; font-size:12.5px; color:var(--amber); margin-top:6px;
  display:flex; align-items:center; justify-content:center; gap:4px}
.item .pr .ic{width:14px; height:14px}
.item.owned{border-color:var(--green)} .item.owned .pr{color:var(--green)}
.item.on{border-color:var(--violet)} .item.on .pr{color:var(--violet)}
.item.cant{opacity:.45}

/* ============================ wallet / parent ============================ */
.balcard{background:linear-gradient(135deg,var(--green),#0d9488); color:#fff; border:0}
.bigbal{font-size:42px; font-weight:700; text-align:center; font-family:'Secular One',Rubik,sans-serif; font-weight:400; letter-spacing:-1px}
.balcard p{color:rgba(255,255,255,.85)}
.balcard .chipsrow span{background:rgba(255,255,255,.18)}
.goalbar{height:22px; background:var(--field); border-radius:999px; overflow:hidden; position:relative; margin:10px 0}
.goalbar i{display:block; height:100%; background:linear-gradient(90deg,var(--violet),var(--blue))}
.goalbar b{position:absolute; inset:0; display:grid; place-items:center; font-size:12.5px; color:var(--ink)}
.ledger{width:100%; border-collapse:collapse; font-size:14px; font-weight:500}
.ledger td{padding:9px 5px; border-bottom:1px solid var(--card-edge); color:var(--ink-2)}
.ledger .amt{font-weight:700; white-space:nowrap}
.ledger .paid{color:var(--green)} .ledger .rejected{color:var(--red); text-decoration:line-through}
.ledger .ic{width:16px; height:16px; color:var(--ink-3)}
.tabs2{display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; background:var(--field);
  padding:5px; border-radius:14px}
.tabs2 button{border:0; background:transparent; font-family:inherit; font-weight:600; font-size:13.5px; padding:9px 13px;
  border-radius:10px; cursor:pointer; color:var(--ink-3); display:inline-flex; align-items:center; gap:6px; transition:all .15s}
.tabs2 button .ic{width:16px; height:16px}
.tabs2 button.on{background:var(--card); color:var(--violet); box-shadow:var(--sh-1)}
.statgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:9px; margin-bottom:14px}
.stat{background:var(--card); border:1px solid var(--card-edge); border-radius:var(--r-m); padding:13px 10px;
  text-align:center; box-shadow:var(--sh-1)}
.stat b{display:block; font-size:25px; color:var(--violet); font-weight:700; line-height:1.2}
.stat i{font-style:normal; font-size:11.5px; color:var(--ink-3); font-weight:600}
.skillrow{display:flex; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--card-edge)}
.skillrow:last-child{border:0}
.skillrow .sic{width:30px; height:30px; border-radius:9px; background:var(--violet-50); color:var(--violet);
  display:grid; place-items:center; flex:none}
.skillrow .sic .ic{width:17px; height:17px}
.skillrow .nm{flex:1; font-weight:600; font-size:14px}
.skillrow .mini{width:70px; height:6px; background:var(--field); border-radius:999px; overflow:hidden}
.skillrow .mini i{display:block; height:100%; background:linear-gradient(90deg,var(--blue),var(--green))}
.skillrow .pc{font-size:12px; font-weight:700; color:var(--ink-3); width:36px; text-align:end}
.req{display:flex; align-items:center; gap:10px; background:var(--field); border-radius:14px; padding:11px 13px; margin-bottom:8px}
.req .amt{font-size:19px; font-weight:700; color:var(--green); flex:1}
.req .when{font-size:12.5px; color:var(--ink-3); font-weight:500}
.listcard{background:var(--card); border:1px solid var(--card-edge); border-radius:var(--r-m); padding:13px;
  margin-bottom:9px; box-shadow:var(--sh-1); text-align:start}
.listcard h4{margin:0 0 5px; font-size:16px; font-weight:700; display:flex; align-items:center; gap:7px}
.listcard h4 small{font-weight:500; color:var(--ink-3); font-size:12px}
.listcard .ws{font-size:13px; color:var(--ink-3); font-weight:500; line-height:1.7}
.bars{display:flex; gap:6px; align-items:flex-end; height:96px; margin:14px 0 22px}
.bars div{flex:1; background:linear-gradient(180deg,var(--violet),var(--violet-600)); border-radius:6px 6px 3px 3px;
  position:relative; min-height:3px; transition:height .5s}
.bars div span{position:absolute; bottom:-19px; inset-inline-start:0; width:100%; text-align:center; font-size:10.5px;
  font-weight:600; color:var(--ink-3)}
.bars div em{position:absolute; top:-17px; inset-inline-start:0; width:100%; text-align:center; font-size:10.5px;
  font-weight:700; color:var(--violet); font-style:normal}

/* ============================ bottom nav ============================ */
#tabs{display:flex; background:var(--card); border-top:1px solid var(--card-edge); padding:6px 6px calc(6px + var(--safe-b));
  gap:4px; box-shadow:0 -4px 20px rgba(76,29,149,.06)}
#tabs .tab{flex:1; border:0; background:none; font-family:inherit; cursor:pointer; padding:7px 2px; border-radius:12px;
  color:var(--ink-3); display:flex; flex-direction:column; align-items:center; gap:3px; transition:all .16s}
#tabs .tab .ic{width:21px; height:21px}
#tabs .tab i{font-style:normal; font-size:10.5px; font-weight:600}
#tabs .tab.on{color:var(--violet); background:var(--violet-50)}

/* ============================ toast ============================ */
.toast{position:fixed; inset-inline:0; top:14%; margin:auto; z-index:90; opacity:0; width:max-content; max-width:88%;
  background:var(--ink); color:#fff; font-weight:600; font-size:16px; padding:12px 20px; border-radius:14px;
  box-shadow:var(--sh-3); pointer-events:none; text-align:center; display:flex; align-items:center; gap:9px}
.toast .ic{width:19px; height:19px; color:var(--amber)}
.toast.show{animation:toast 2.2s cubic-bezier(.2,.9,.3,1) forwards}
@keyframes toast{0%{opacity:0; transform:translateY(-14px) scale(.94)}12%{opacity:1; transform:none}
  80%{opacity:1; transform:none}100%{opacity:0; transform:translateY(-14px)}}

@media (max-width:430px){
  .avatar{width:64px; height:64px; border-radius:20px}
  .avatar.lg{width:92px; height:92px}
  .bigletter{font-size:74px}
  .statstrip{padding:3px 4px} .stat-i{font-size:12.5px; padding:3px 6px}
  .stat-i .ic{width:14px; height:14px}
  .h2{font-size:20px}
  .padwrap canvas{width:76px; height:98px}
  .topbar{gap:6px; padding:8px 12px 4px}
  .iconbtn{width:34px; height:34px}
  .iconbtn .ic{width:19px; height:19px}
}
@media (min-width:760px){
  .answers{grid-template-columns:repeat(4,1fr)}
  .kpgrid{max-width:420px; margin:0 auto}
  .scroll{padding-inline:24px}
}
/* Adventure edition: illustrated worlds, clear hierarchy, generous touch targets. */
.adventure-banner{position:relative;display:flex;align-items:center;overflow:hidden;background:#173f38;color:#fff;border-radius:28px;padding:30px;margin:10px 0 28px;min-height:285px;isolation:isolate}
.adventure-banner::after{content:'';position:absolute;width:340px;height:340px;border-radius:50%;background:#24554a;inset-inline-end:-80px;top:-50px;z-index:-1}
.adventure-copy{flex:1;z-index:1}.eyebrow{font-size:11px;font-weight:700;letter-spacing:1.8px;opacity:.78}.adventure-copy h1{font-family:'Secular One',sans-serif;font-weight:400;font-size:clamp(29px,5vw,44px);line-height:1.18;margin:15px 0}.adventure-copy h1 em{font-style:normal;color:#d5ed9a}.adventure-copy p{font-size:14px;line-height:1.8;max-width:300px;color:#e1eee7}.journey-cta{background:#d5ed9a;color:#163c34;box-shadow:0 4px 0 #91b35e;min-height:48px}.journey-caption{display:block;font-size:11px;margin-top:14px;color:#c7dcd3}.adventure-art{position:relative;width:190px;height:200px;display:grid;place-items:center;flex-shrink:0}.adventure-art>svg{z-index:2;filter:drop-shadow(0 14px 12px #08292055);transform:rotate(-7deg)}.orbit{position:absolute;border:1px solid #88b39555;border-radius:50%;width:190px;height:190px;transform:rotate(-25deg)}.orbit-two{width:155px;height:235px;transform:rotate(35deg)}.floating-star{position:absolute;top:-3px;right:8px;color:#e2bb6c;transform:rotate(15deg)}.art-ground{position:absolute;bottom:12px;width:135px;height:20px;background:#102f2866;border-radius:50%}.journey-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0}.journey-heading h2{font-size:21px;margin:0}.journey-heading>span{display:flex;align-items:center;gap:6px;color:var(--amber);font-weight:700;font-size:13px}.worlds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.world{--world:#286b55;background:var(--card);border:1px solid var(--card-edge);border-radius:23px;padding:20px;overflow:hidden}.world-1{--world:#147ca0}.world-2{--world:#b46b32}.world-3{--world:#735aba}.world-4{--world:#566296;grid-column:1/-1}.world-heading{display:flex;align-items:center;gap:12px}.world-emblem{width:50px;height:50px;border-radius:16px;background:var(--world);color:white;display:grid;place-items:center}.world-heading .eyebrow{color:var(--world);font-size:9px}.world-heading h3{font-size:17px;margin:5px 0}.world-count{margin-inline-start:auto;font-size:12px;color:var(--ink-2)}.stage-path{position:relative;display:flex;justify-content:space-between;gap:7px;margin:24px 0 8px}.stage-path::before{content:'';position:absolute;top:23px;height:3px;background:var(--card-edge);left:15px;right:15px}.stage{position:relative;border:0;background:transparent;font:inherit;cursor:pointer;padding:0;min-width:40px;color:var(--world)}.stage>span{display:grid;place-items:center;width:44px;height:44px;background:var(--field);border:2px solid var(--card-edge);border-radius:50%;font-weight:800;margin:auto}.stage.current>span{background:var(--world);color:#fff;box-shadow:0 0 0 5px var(--field)}.stage.complete>span{background:var(--world);color:white}.stage:disabled{opacity:.5;cursor:default}.stage small{display:block;font-size:10px;min-height:18px;margin-top:9px}.world-note{font-size:11px;color:var(--ink-2);margin:12px 0 0}.family-card{padding:28px;line-height:1.8}.family-card .btn{margin:6px}.family-card details{font-size:13px;margin-top:22px}.hero{background:transparent;box-shadow:none;border:none;padding:12px 2px}.hero .avatar{width:62px;height:62px}.herotext h2{font-size:20px}button:focus-visible{outline:3px solid var(--blue);outline-offset:5px}#toast{pointer-events:none}
@media(max-width:600px){.worlds{grid-template-columns:1fr}.world-4{grid-column:auto}.adventure-banner{padding:24px 20px;min-height:290px}.adventure-art{width:100px;transform:scale(.8);margin-inline-end:-20px}.adventure-copy p{max-width:230px}.adventure-copy h1{font-size:32px}.adventure-art>svg{width:120px}.orbit{width:145px;height:145px}.orbit-two{width:120px;height:190px}.stage>span{width:46px;height:46px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}#fx{display:none}}
body:not([data-theme]),body[data-theme="candy"],body[data-theme=""]{--bg:#f7f6ef;--violet:#24594b;--violet-600:#34745f;--violet-300:#d9e4d0;--violet-50:#eff4e9;--ink:#223d35;--ink-2:#596d61;--ink-3:#6f7d72;--field:#f3f5ed;--card-edge:#e3e8dc}
body[data-theme="candy"] .bg::after{background:#e8dfc5;opacity:.3}.stage small{display:flex;align-items:center;justify-content:center;gap:2px}.world-0{background:linear-gradient(160deg,var(--card),#eaf3e6)}body[data-theme="space"] .world-0{background:var(--card)}
.hero{color:var(--ink)}.hero .xpbar{background:var(--card-edge)}.hero .xpbar i{background:var(--violet)}.hero .chipsrow span{background:var(--card);color:var(--ink-2)}
/* Character collection: cheerful illustrated portraits and a try-before-unlock shop. */
.collection-hero{display:flex;align-items:center;gap:12px;padding:24px;border-radius:26px;background:#243f58;color:#fff;overflow:hidden;position:relative}.collection-hero>div:first-child{flex:1;min-width:0}.collection-hero h2{font-family:'Secular One',sans-serif;font-weight:400;font-size:30px;line-height:1.2;margin:12px 0}.collection-hero p{font-size:13px;line-height:1.7;color:#e1eaf3}.collection-wallet{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:14px;background:#fff3d1;color:#7d4c19;font-size:20px;font-weight:800}.collection-wallet span{font-size:11px;font-weight:500}.crew-portrait{position:relative;flex-shrink:0;align-self:flex-end}.crew-portrait::before{content:'';position:absolute;inset:25% -8% 0;border-radius:50%;background:#ffffff16}.crew-portrait svg{position:relative;transform:rotate(-7deg);filter:drop-shadow(0 7px 4px #10283f33)}.collection-heading{display:flex;justify-content:space-between;margin:22px 4px 4px;font-size:15px;font-weight:700}.collection-heading b{direction:ltr}.collection-note{font-size:12px;line-height:1.6;color:var(--ink-2);margin:6px 4px 24px}.collection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:28px}.collection-card{position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0;border:2px solid var(--card-edge);border-radius:23px;padding:12px;background:var(--card);color:var(--ink);font:inherit;cursor:pointer;text-align:center;transition:transform .18s,box-shadow .18s}.collection-card:hover{transform:translateY(-4px);box-shadow:var(--sh-2)}.collection-card.selected{border-color:var(--violet);box-shadow:0 0 0 2px var(--field)}.collection-tag{display:flex;align-items:center;justify-content:center;gap:4px;min-height:22px;font-size:10px;font-weight:600;color:var(--ink-2)}.collection-tag .ic{width:14px;height:14px}.collection-stage{display:grid;place-items:center;position:relative;isolation:isolate;margin:8px 0 10px;min-height:140px}.collection-stage::before{content:'';position:absolute;inset:16px 0 0;border-radius:45% 45% 20px 20px;background:var(--character-bg);z-index:-1}.collection-stage .character{width:135px;height:145px;filter:drop-shadow(0 5px 1px #33445510)}.collection-card strong{font-size:20px;font-family:'Secular One',sans-serif;font-weight:400}.collection-description{font-size:11px;line-height:1.5;min-height:34px;padding:4px 0;color:var(--ink-2)}.collection-price{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:10px;padding:9px;border-radius:12px;background:var(--field);color:var(--ink);font-weight:700;font-size:13px}.collection-price .ic{color:var(--amber);width:18px;height:18px}.collection-card.selected .collection-price{background:var(--violet);color:#fff}.gear-grid .collection-stage{min-height:115px}.gear-grid .collection-stage .character{width:110px;height:120px}.theme-preview{display:grid;place-items:center;width:95px;height:95px;border-radius:27px;background:linear-gradient(145deg,var(--theme-a),var(--theme-b));color:white;box-shadow:inset 0 0 0 6px #ffffff33}.character-preview{text-align:center}.preview-stage{display:grid;place-items:center;background:var(--character-bg);border-radius:28px;margin-bottom:20px;padding:12px}.preview-stage .character{height:210px;width:210px}.character-preview h2{font-family:'Secular One',sans-serif;font-size:32px;margin:10px 0}.character-preview p{line-height:1.5}.character-preview .btn{margin-top:10px}.character-preview small{display:block;color:var(--ink-2);margin-top:18px}.preview-balance{display:flex;align-items:center;gap:6px;justify-content:center}.collection-progress{height:9px;background:var(--field);border-radius:9px;overflow:hidden}.collection-progress i{height:100%;display:block;background:var(--violet);border-radius:9px}.character-preview button:disabled{opacity:.55;cursor:default}.chip.av{display:flex;flex-direction:column;gap:4px;padding:8px 16px}.chip.av>span{font-size:12px}.adventure-art>.character{width:175px;height:200px;transform:rotate(-6deg)}.avatar .character{width:100%;height:100%}
@media(max-width:700px){.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.collection-hero{padding:20px 16px}.collection-hero h2{font-size:25px}.crew-portrait{width:100px}.crew-portrait svg{width:115px;height:155px;max-width:none}.collection-wallet{padding:8px 10px}.collection-wallet span{font-size:10px}.collection-stage .character{width:120px;height:140px}.collection-description{min-height:40px}.collection-card{padding:10px}.adventure-art>.character{width:150px;height:180px}}
/* Phone HUD: give scores their own row instead of squeezing them between controls. */
.stat-label{display:none}
.stat-value{font-variant-numeric:tabular-nums}
#whoName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#pinpad{padding:max(12px,env(safe-area-inset-top)) 12px max(12px,env(safe-area-inset-bottom))}
#pinpad .sheet{max-width:380px;padding:24px;max-height:calc(100dvh - 24px)}
#pinpad .sheet>*{flex-shrink:0}
#pinGrid{width:100%;max-width:320px;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;direction:ltr}
#pinGrid button{min-width:0;min-height:64px;padding:12px 0;font-size:28px;line-height:1.2;border-radius:17px;touch-action:manipulation}
#pinGrid button[data-k="DEL"]{background:var(--field);color:var(--ink-2)}
#pinDots{direction:ltr;gap:15px;margin:20px 0 24px}
#pinDots i{width:17px;height:17px}
#pinCancel{min-height:48px;width:100%;max-width:320px}
@media(max-width:700px){
  .topbar{flex-wrap:wrap;flex-shrink:0;gap:8px;padding:max(8px,env(safe-area-inset-top)) 12px 8px}
  .topbar .who{flex:1;min-width:0;min-height:44px;overflow:hidden}
  .topbar .spacer{display:none}
  .topbar .iconbtn{flex:0 0 44px;width:44px;height:44px;padding:0}
  .topbar .statstrip{order:10;flex:0 0 100%;width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:7px 0;border-radius:17px;overflow:visible;box-shadow:none}
  .statstrip .stat-i{display:grid;grid-template-columns:auto auto;justify-content:center;align-content:center;gap:3px 4px;min-width:0;padding:2px 3px;border-radius:0;font-size:17px}
  .statstrip .stat-i .ic{width:14px;height:14px}
  .statstrip .stat-label{display:block;font-size:10px;font-weight:500;white-space:nowrap;color:var(--ink-2)}
  .statstrip .stat-value{grid-column:1/-1;text-align:center;line-height:1.3}
  #pinpad .sheet{padding:22px 20px}
}
@media(max-width:350px){
  .topbar{gap:6px;padding-inline:10px}
  .statstrip .stat-label{font-size:9px}
  .statstrip .stat-i{font-size:16px}
  #pinpad .sheet{padding:20px 16px}
  #pinGrid{gap:10px}
}
@media(max-height:520px){
  #pinpad .sheet{padding:16px 20px}
  #pinDots{margin:12px 0 16px}
  #pinGrid button{min-height:48px;padding:8px 0;font-size:24px}
}
.voice-answer{flex-shrink:0;margin:10px 16px 16px;padding:14px;border:1px solid var(--card-edge);border-radius:18px;background:var(--card)}
.voice-answer-button{width:100%;min-height:50px;background:var(--violet-50);color:var(--violet)}
.voice-answer-button[aria-pressed="true"]{background:#b83245;color:white}
.voice-answer p{font-size:13px;line-height:1.6;margin:8px 0;color:var(--ink-2)}
#voiceAnswerConfirm{display:grid;gap:10px;margin-top:12px}
#voiceAnswerConfirm label{font-size:13px}
#voiceAnswerText{min-height:48px;font-size:20px;text-align:center}
#voiceAnswerSend{min-height:48px}
/* Keep voice answering in view before the question and above the number pad. */
#app{height:100dvh}
#scGame>.voice-answer{position:sticky;top:0;z-index:4;margin-top:4px;margin-bottom:12px;box-shadow:var(--sh-1)}
#scGame>.qcard,#scGame>.keypad,#scGame>.answers,#scGame>.buddyRow{flex-shrink:0}
#scGame{padding-bottom:max(20px,env(safe-area-inset-bottom))}
.teach-pacing{margin:18px 0;padding:14px;border-radius:16px;background:var(--field)}
#teachPaceLabel{font-size:13px;font-weight:700}
#teachPace{justify-content:center;gap:8px;margin-top:10px}
#teachPace button{min-height:44px;min-width:76px;font-size:13px}
#teachPace button[aria-pressed="true"]{background:var(--violet);color:white;border-color:var(--violet)}
#teachPaceNote{font-size:12px;color:var(--ink-2);line-height:1.6}
#teachRepeat,#teachOk{min-height:48px}
.question-help{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:18px}
.question-help:empty{display:none}
.switch-subject{min-height:44px;padding:8px 12px;font-size:13px;white-space:nowrap;flex-shrink:0}
.gamehead{position:sticky;top:0;z-index:6;flex-shrink:0;background:var(--bg);min-height:54px}
#scGame>.voice-answer{position:static}
.subject-switch-list{display:grid;gap:12px;margin-top:20px}
.subject-switch-list .btn{min-height:52px}
.world-practice{width:100%;min-height:48px;margin-top:16px;font-size:14px}
#scGame>.answers.crossword-panel{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px;background:var(--card);border-radius:24px;box-sizing:border-box}
.crossword-clues{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.crossword-clues button{display:flex;flex-direction:column;min-width:110px;min-height:105px;font-size:14px}
.crossword-grid{display:grid;gap:8px;width:min(100%,300px)}
.settings-save{padding:18px;border-radius:18px;background:#eaf1df;border:1px solid #d3dfc3;margin-bottom:18px}.settings-save p{margin:6px 0;font-size:14px;line-height:1.6}.settings-save #childSettingsStatus{font-weight:700}.settings-save button{margin:8px 0}
.crossword-scroll{max-width:100%;width:100%;overflow-x:auto;padding:5px;box-sizing:border-box}.crossword-scroll .crossword-grid{margin-inline:auto}.crossword-cell{position:relative}.crossword-cell small{position:absolute;top:2px;inset-inline-start:4px;font-size:10px;line-height:1;font-weight:500}.crossword-level{font-size:14px;margin:0;text-align:center}.crossword-clues button{flex:1;max-width:280px;white-space:normal;text-align:center;gap:8px}.crossword-clues span{line-height:1.5}
.crossword-cell{aspect-ratio:1;border:2px solid var(--card-edge);border-radius:12px;background:var(--field);color:var(--ink);font-family:inherit;font-weight:700;font-size:30px;min-height:48px;cursor:pointer}
.crossword-cell.active{border-color:var(--violet);outline:3px solid var(--violet-50)}
.crossword-cell.filled{background:var(--violet);color:white}
.letter-guide{opacity:.45;font-size:30px}
.crossword-letters{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.crossword-letters button{min-width:52px;min-height:52px;font-size:26px}
#crosswordFeedback{font-size:14px;line-height:1.7;text-align:center;margin:0}
/* Keep tools together above the question; expand only when there is voice feedback. */
.question-tools{display:flex;flex-wrap:wrap;direction:ltr;justify-content:flex-start;align-items:center;gap:8px;margin-bottom:10px}
.question-tools .question-help{display:flex;flex:0 0 auto;margin:0;gap:8px;direction:rtl}
.question-tools .help-button{flex:none;min-width:64px;min-height:44px;padding:8px;gap:6px;font-size:13px}
.question-tools .help-button>span{margin:0;gap:3px}
.question-tools .btn{margin:0}
.question-tools #voiceAnswerBox{display:contents}
.question-tools #btnAnswerVoice{width:44px;height:44px;min-height:44px;padding:8px;flex:none;box-sizing:border-box;line-height:1}
.question-tools #voiceAnswerStatus{flex:0 0 100%;order:5;text-align:start;direction:inherit;margin:0;font-size:13px;line-height:1.5}
.question-tools #voiceAnswerStatus:empty{display:none}
.question-tools #voiceAnswerConfirm{flex:0 0 100%;order:6;margin:0}
.question-tools:has(.question-help:empty):has(#voiceAnswerBox[hidden]){display:none}
.write-letters{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:0 0 8px}
.write-letters .chip{min-width:44px;min-height:44px}
@media(max-width:700px){
  .playing .topbar{gap:5px;padding-block:6px}
  .playing .statstrip .stat-label{display:none}
  .playing .statstrip .stat-value{grid-column:auto;font-size:16px}
  .playing .topbar .statstrip{padding:5px 0}
  #scGame .gamehead{min-height:46px;padding-block:2px;gap:6px}
  #scGame>.buddyRow{margin-block:3px 6px;gap:6px}
  #scGame>.buddyRow .avatar{width:30px;height:30px;border-radius:10px}
  #scGame>.buddyRow .speech{padding:6px 10px;font-size:14px;min-height:30px}
  #scGame>.qcard{padding:10px 12px;margin-bottom:8px}
  #scGame .qtext{font-size:18px;gap:6px}
  #scGame #qVisual>.art{max-height:85px;width:auto}
  #scGame .qmath{font-size:34px}
  #scGame .padrow{width:100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;gap:12px;padding:3px 0 12px;margin-bottom:6px}
  #scGame .padwrap{flex:0 0 100%;scroll-snap-align:center;min-width:0}
  #scGame .padwrap canvas,#scGame .padwrap.big canvas{width:100%;height:220px;box-sizing:border-box}
  #scGame .writebtns{flex-wrap:nowrap;gap:8px}
  #scGame .writebtns .btn{min-height:44px;padding:9px 12px}
}
.help-button{min-height:48px;padding:10px 14px;background:var(--violet-50);color:var(--violet);font-size:14px;box-shadow:none;border:1px solid var(--card-edge);flex:1 1 160px}
.help-button>span{display:inline-flex;align-items:center;gap:4px;margin-inline-start:auto;font-size:12px;white-space:nowrap}
.help-purchase .btn{min-height:48px;width:100%;margin-top:12px}
#questionHint{text-align:start;line-height:1.7}
.qtext .say{width:44px;height:44px}
@media(min-width:701px){
  #scGame>.voice-answer{position:static}
  #scGame>.qcard,#scGame>.answers,#scGame>.buddyRow,#scGame>.voice-answer,#scGame>.writebox{width:calc(100% - 48px);max-width:720px;margin-inline:auto;box-sizing:border-box}
  #scGame>.keypad{width:calc(100% - 48px);max-width:480px;margin-inline:auto}
  #scGame .kpgrid{max-width:none;gap:10px}
  #scGame .kpgrid button{min-height:54px}
  #scGame>.qcard{padding:26px 24px}
  #scGame>.answers{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  #scGame .ans{min-height:72px}
  .topbar .iconbtn{min-width:44px;min-height:44px}
}
/* Landscape tablets: give the question and answers their own balanced panels. */
@media(min-width:900px) and (orientation:landscape){
  #scGame.choice-layout.on{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);grid-template-rows:auto auto auto minmax(260px,auto);grid-template-areas:"progress progress" "buddy buddy" "voice voice" "question answers";align-content:start;align-items:stretch;gap:14px 22px;padding:12px 28px 28px}
  #scGame.choice-layout>.gamehead{grid-area:progress;padding:0}
  #scGame.choice-layout>.buddyRow{grid-area:buddy;margin:0;width:100%;max-width:none}
  #scGame.choice-layout>.voice-answer{grid-area:voice;margin:0;width:100%;max-width:none;display:grid;grid-template-columns:minmax(180px,1fr) 1.5fr;align-items:center;gap:8px 18px;padding:12px 16px}
  #scGame.choice-layout #voiceAnswerConfirm{grid-column:1/-1}
  #scGame.choice-layout>.qcard{grid-area:question;margin:0;width:100%;max-width:none;display:flex;flex-direction:column;justify-content:center;padding:28px 22px;border-top:5px solid var(--violet)}
  #scGame.choice-layout .qtext{font-size:23px;line-height:1.5}
  #scGame.choice-layout .qmath{font-size:54px;margin-block:18px}
  #scGame.choice-layout>.answers{grid-area:answers;margin:0;width:100%;max-width:none;align-self:stretch;grid-auto-rows:minmax(100px,1fr)}
  #scGame.choice-layout .ans{font-size:32px;border-radius:24px;min-width:0;overflow-wrap:anywhere}
  #scGame.choice-layout .ans.txt2{font-size:21px}
  #scGame.choice-layout>.answers.one{grid-template-columns:1fr}
}
.comparison-pair{display:flex;align-items:center;justify-content:center;gap:clamp(18px,5vw,40px);direction:ltr;width:100%}.comparison-pair>bdi{display:block;direction:ltr;unicode-bidi:isolate;min-width:72px;padding:12px 14px;border:2px solid #d6e3d5;border-radius:18px;background:#f1f6ec}.comparison-divider{font-size:26px;color:#a7b7a8;font-weight:400}.child-profile{max-width:660px;margin:auto}.child-profile>.card{padding:24px;margin-top:16px;text-align:center}.child-profile .avatar{margin:auto}.child-progress-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.child-progress-grid>div{background:#eef4e9;border-radius:16px;padding:18px 10px;display:flex;flex-direction:column;gap:6px}.child-progress-grid strong{font-size:28px}.child-progress-grid span{font-size:15px}
.world-languages{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0}.world-languages>span{font-size:13px;flex-basis:100%}.world-languages .chip{display:flex;align-items:center;gap:6px;min-height:44px}.world-languages [aria-pressed=true]{background:#e3efda;border-color:#347855}.language-flag{width:26px;height:19px;border:1px solid #d1daca;border-radius:4px}.question-tools{gap:10px}.question-tools #btnAnswerVoice{display:inline-flex;align-items:center;justify-content:center;overflow:hidden;width:46px;min-width:46px;height:46px}.question-tools #btnAnswerVoice svg{flex:none;width:22px;height:22px}.question-tools .help-button{min-height:46px;min-width:68px}.question-tools #voiceAnswerStatus{font-size:12px}
.study-dialog{width:min(680px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border:0;border-radius:24px;padding:24px;background:#fafcf6;color:var(--ink);overflow:auto}.study-dialog::backdrop{background:#173c3699;backdrop-filter:blur(5px)}.study-close{float:inline-end}.study-dialog label{display:block;margin:12px 0}.study-dialog .txt{width:100%;box-sizing:border-box}.study-dialog .card{padding:12px;margin:12px 0}.text-answer{display:block}.text-answer form{display:grid;gap:12px}.text-answer input{min-height:56px;font-size:24px;width:100%}
.stage-path{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 0}.stage-path::before{display:none}.question-tools{flex-wrap:wrap}.question-tools #drawAnswer{width:46px;height:46px;min-width:46px}
#appUpdateNotice{position:fixed;z-index:10000;inset-inline:12px;bottom:max(12px,env(safe-area-inset-bottom));max-width:520px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#252347;color:white;padding:12px 16px;border:1px solid #ffffff40;border-radius:18px;box-shadow:0 8px 30px #0004;font-size:15px}#appUpdateNotice .btn{font-size:14px;min-height:44px;white-space:nowrap}
.question-topic{display:block;font-size:13px;font-weight:500;color:#626983;margin-bottom:8px}
#app:has(#scGame.crossword-layout.on) .topbar{display:none}
#scGame.crossword-layout{background:radial-gradient(ellipse at 12% 70%,#397d8c80,transparent 52%),linear-gradient(155deg,#182f58,#165963 70%,#267c75);padding:0 0 max(6px,env(safe-area-inset-bottom));overflow:hidden;color:#fff}
#scGame.crossword-layout>.buddyRow,#scGame.crossword-layout>.qcard{display:none}
#scGame.crossword-layout>.gamehead{position:static;background:transparent;min-height:44px;padding:6px 14px;color:white}
#scGame.crossword-layout>.gamehead .btn{background:#ffffff18;color:white;border-color:#ffffff25;box-shadow:none;min-height:36px;font-size:13px;padding:7px 10px}
#scGame.crossword-layout>.answers.word-orbit{flex:1;min-height:0;width:100%;max-width:560px;margin:0 auto;padding:6px 18px;gap:8px;border:0;border-radius:0;box-shadow:none;background:transparent;display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box}
.orbit-heading{display:flex;justify-content:space-between;width:100%;font-size:12px;letter-spacing:.05em;color:#d0e6e8}.orbit-heading b{background:#ffffff17;border-radius:20px;padding:3px 12px;color:#cef199}
.orbit-board.crossword-grid{display:flex;flex-direction:column;justify-content:center;gap:12px;flex:1;min-height:88px;max-height:200px;width:100%;padding:12px 0;box-sizing:border-box}
.orbit-word{display:flex;align-items:center;justify-content:center;gap:4px;background:none;border:0;color:#d2e6ed;width:100%;padding:0;cursor:pointer}.orbit-word small{font-size:12px;width:12px;flex-shrink:0}.orbit-tile{width:clamp(20px,7.5vw,42px);height:clamp(30px,9vw,44px);display:grid;place-items:center;border-radius:9px;background:#ffffff15;border:1px solid #ffffff35;font-size:clamp(16px,5vw,27px);font-weight:700;box-shadow:0 3px 0 #061c3425}.orbit-word.active .orbit-tile{background:#edf8ff;color:#23415d;border-color:#fff}.orbit-tile i{font-style:normal;opacity:.32}.orbit-word .orbit-tile.filled{background:#c4efaa;border-color:#c4efaa;color:#244633}.orbit-word.solved{opacity:.85}
.orbit-clue{display:flex;gap:12px;align-items:center;justify-content:center;width:100%;padding:9px 14px;min-height:58px;border:1px solid #ffffff30;border-radius:16px;background:#0c273d40;color:white;cursor:pointer;font-family:inherit}.orbit-clue small{display:block;color:#bcdadf;font-size:11px;margin-bottom:3px}.orbit-clue b{font-size:14px;line-height:1.3}.orbit-clue svg{flex-shrink:0}
#orbitPreview{height:28px;min-height:28px;display:grid;place-items:center;font-size:20px;font-weight:600;color:#d9f8bc;letter-spacing:.06em}
.orbit-wheel{position:relative;aspect-ratio:1;flex-shrink:1;min-height:170px;width:min(280px,36dvh);max-height:280px;border-radius:50%;background:radial-gradient(circle,#f9fcf1,#dcedef);box-shadow:0 0 0 9px #ffffff09,0 14px 30px #06213055;touch-action:none;user-select:none}
.orbit-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:#58b6a4}.orbit-letter{position:absolute;transform:translate(-50%,-50%);width:clamp(38px,6dvh,48px);height:clamp(38px,6dvh,48px);display:grid;place-items:center;border-radius:50%;border:0;background:#244c70;color:white;font-family:inherit;font-size:clamp(22px,4dvh,28px);font-weight:700;box-shadow:0 3px 0 #183047;touch-action:none;cursor:pointer}.orbit-letter.selected{background:#57b59c;color:#102d2d;box-shadow:0 3px 0 #368771}.orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#80a69f;pointer-events:none}.orbit-actions{display:flex;gap:10px;justify-content:center;margin-top:7px;flex-shrink:0}.orbit-actions .btn{min-height:40px;min-width:42px;padding:8px 12px;background:#ffffff19;border:1px solid #ffffff30;box-shadow:none;color:#fff}.orbit-actions #orbitSubmit{background:#c4efaa;color:#244633}.word-orbit #crosswordFeedback{font-size:11px;line-height:1.3;min-height:28px;max-width:340px;color:#c3dfe1;margin:0;text-align:center}
@media(max-height:650px){#scGame.crossword-layout>.answers.word-orbit{gap:4px}.orbit-board.crossword-grid{padding:4px 0;min-height:70px;gap:6px}.orbit-tile{height:30px}.orbit-clue{min-height:44px;padding:5px 10px}.orbit-wheel{width:185px;min-height:155px}.orbit-letter{width:36px;height:36px;font-size:22px}.orbit-actions{margin-top:3px}.word-orbit #crosswordFeedback{font-size:10px}}
@media(orientation:landscape) and (max-height:650px){#scGame.crossword-layout>.answers.word-orbit{max-width:900px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:24px 1fr 40px 44px;gap:6px 24px}.orbit-heading{grid-column:1/-1}.orbit-board.crossword-grid{grid-column:1;grid-row:2}.orbit-clue{grid-column:1;grid-row:3}.orbit-wheel{grid-column:2;grid-row:2/4;width:min(240px,58dvh);justify-self:center}.orbit-actions{grid-column:2;grid-row:4}#orbitPreview{grid-column:1;grid-row:4}.word-orbit #crosswordFeedback{display:none}}
.orbit-word .orbit-tile{flex:1;min-width:0;max-width:42px}
.word-orbit .orbit-actions{max-width:100%;gap:7px}.word-orbit .orbit-actions .btn{font-size:14px;padding:8px;min-width:38px}

#parentReturn{flex-shrink:0;min-height:44px;width:100%;border:0;border-bottom:1px solid #b8d5ca;background:#e3f2eb;color:#174c3d;font:inherit;font-weight:700;cursor:pointer;padding:8px 16px}
#parentReturn[hidden]{display:none}
#parentReturn:focus-visible{outline:3px solid #24594b;outline-offset:-3px}

/* Purchased ocean background: visible scenery, with quiet, readable question cards. */
body[data-theme="ocean"]{--bg:#c6f0f4;--ink:#123e55;--ink-2:#365c70;--ink-3:#527080;--field:#e6f5fa;--card-edge:#afd8e7}
body[data-theme="ocean"] .bg{background:radial-gradient(ellipse at 20% 0%,#ffffffb0,transparent 45%),linear-gradient(180deg,#c5f6f5 0%,#91dce9 48%,#3b9fc4 100%)}
body[data-theme="ocean"] .bg::before{inset:0;width:100%;height:100%;border-radius:0;filter:none;opacity:1;background:radial-gradient(circle at 7% 25%,transparent 9px,#ffffff80 10px,transparent 12px),radial-gradient(circle at 92% 42%,transparent 17px,#ffffff80 18px,transparent 20px),radial-gradient(circle at 15% 73%,transparent 14px,#ffffff70 15px,transparent 17px),radial-gradient(circle at 83% 85%,transparent 7px,#ffffff90 8px,transparent 10px),linear-gradient(110deg,transparent 25%,#ffffff30 26%,transparent 42%)}
body[data-theme="ocean"] .bg::after{inset:auto -20% -8%;width:140%;height:35%;border-radius:50% 60% 0 0;filter:none;opacity:1;background:#086d9b38;box-shadow:0 -24px 0 #ddffff30,0 -48px 0 #ffffff18;transform:rotate(-7deg)}
body[data-theme="ocean"] .adventure-banner{background:linear-gradient(130deg,#124568,#087f97)}
body[data-theme="ocean"] .collection-hero{background:linear-gradient(130deg,#124568,#087f97)}
body[data-theme="ocean"] #scGame.crossword-layout{background:linear-gradient(155deg,#124568dc,#087f97dc)}

body[data-theme="ocean"] .adventure-banner::after{background:#1c91ab}

#qVisual .bigword>.art{width:clamp(116px,32vw,156px);height:clamp(116px,32vw,156px);padding:8px;background:#f5faf9;border:1px solid #d8e7e3;border-radius:22px;flex-shrink:0}
@media(max-height:650px){#qVisual .bigword>.art{width:104px;height:104px}}