/* Star Steps website build: layout layer (2026-09-30).
   1. Every screen size shows one section at a time. Phones keep the bottom
      tab bar; screens wider than 900px get the same tabs as a floating dock,
      instead of one 30-screen scroll with no navigation.
   2. The Path shows one subject at a time (the subject chips select it).
   3. Small labels are at least 11-12px so young readers can read them. */
@media (min-width:901px){
  body .tabbar{display:flex;left:50%;right:auto;bottom:16px;transform:translateX(-50%);
    width:min(640px,calc(100% - 32px));border:3px solid var(--edge);border-radius:22px;
    box-shadow:5px 5px 0 var(--edge);padding-bottom:0;overflow:hidden}
  body .tabbar .tab{min-height:62px;font-size:12.5px}
  body .tabbar .tab .tico{font-size:21px}
  body .tabbar .tab:hover{color:var(--ink)}
  body .wrap{padding-bottom:124px}
  body[data-view="play"] .wrap,body[data-view="done"] .wrap{padding-bottom:150px}
  #viewPath[data-show="today"]    > [data-sec]:not([data-sec~="today"]),
  #viewPath[data-show="path"]     > [data-sec]:not([data-sec~="path"]),
  #viewPath[data-show="practice"] > [data-sec]:not([data-sec~="practice"]),
  #viewPath[data-show="games"]    > [data-sec]:not([data-sec~="games"]),
  #viewPath[data-show="rewards"]  > [data-sec]:not([data-sec~="rewards"]),
  #viewPath[data-show="me"]       > [data-sec]:not([data-sec~="me"]){display:none}
  #viewPath > .section-head:first-of-type{margin-top:4px}
}
/* the game's own rule hides the bar in lessons and on the intro; it stays hidden there */
body[data-view="play"] .tabbar,body[data-view="done"] .tabbar,body[data-view="intro"] .tabbar{display:none !important}
/* one subject at a time on the path */
#pathBody [hidden]{display:none !important}
.jump button[aria-pressed="false"]{opacity:.78}
.jump button[aria-pressed="true"]{opacity:1;outline:3px solid var(--edge);outline-offset:2px}
.ux-next{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:18px 0 6px;
  padding:14px 18px;min-height:56px;border:3px solid var(--edge);border-radius:18px;cursor:pointer;
  font-family:var(--display);font-weight:800;font-size:17px;color:#fff;box-shadow:0 5px 0 var(--edge)}
.ux-next:active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge)}
.ux-next:focus-visible{outline:4px solid var(--sky);outline-offset:3px}
/* readable small labels */
.jn,.dl,.c-t,.ch-s,.ch-p,.me-stats .sl,.wallet .wl{font-size:12px !important}
/* never touch the sky labels: they are SVG text sized in viewBox units */
/* wide screens: Today uses two columns instead of one narrow strip */
@media (min-width:1100px){
  #viewPath.wrap[data-show="today"]{max-width:1060px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:22px;align-items:start}
  #viewPath[data-show="today"] > *{grid-column:1 / -1}
  #viewPath[data-show="today"] > .pip-hero{grid-column:1;grid-row:1}
  #viewPath[data-show="today"] > .cont-btn{grid-column:1;grid-row:2}
  #viewPath[data-show="today"] > .weekcard{grid-column:2;grid-row:1}
  #viewPath[data-show="today"] > .quests{grid-column:2;grid-row:2 / span 2}
}
/* Your sky: a sensible size on wide screens */
@media (min-width:901px){.sky-box{max-width:540px;margin:0 auto}}

/* ══ 2026-09-30 premium pass ══ */
/* phones: the top bar fits on one row (logo mark, hearts, stars, gems, streak, sound) */
@media (max-width:560px){
  body .topbar-in{flex-wrap:nowrap;gap:5px;padding:8px 10px}
  body .brand{flex:none;margin-right:auto}
  body .brand > div:not(.brand-mark){display:none}
  body .brand-mark{width:34px;height:34px}
  body .hearts{padding:4px 7px;gap:1px}
  body .heart .dico{width:12px;height:12px}
  body .topbar .chip{padding:3px 7px;gap:3px}
  body .topbar .chip b{font-size:12.5px}
  body .topbar .chip .dico{width:13px;height:13px}
  body .topbar .iconbtn{width:34px;height:34px}
}
@media (max-width:350px){body .topbar #soundBtn{display:none}body .topbar .chip{padding:3px 5px}body .topbar .chip b{font-size:11.5px}
  body .hearts{padding:4px 5px;gap:0}body .heart .dico{width:10.5px;height:10.5px}body .topbar-in{gap:4px;padding:8px 8px}}
/* the name box lives in You once the child has a name */
body.ss-named .pip-hero .namebar{display:none}
/* readable step labels */
.node-label small{font-size:12px}
/* wide screens: one width for every tab and the top bar, and desktop layouts for Path, Games and You */
@media (min-width:1100px){
  body .topbar-in{max-width:1060px}
  body #viewPath.wrap{max-width:1060px}
  /* Games, Practice, Rewards: three cards per row */
  #viewPath[data-show="games"] .tools,#viewPath[data-show="practice"] .tools,#viewPath[data-show="rewards"] .tools{grid-template-columns:repeat(3,1fr)}
  /* You: two balanced columns */
  #viewPath[data-show="me"]{column-count:2;column-gap:22px}
  #viewPath[data-show="me"] > *{break-inside:avoid;display:block}
  #viewPath[data-show="me"] > .section-head{column-span:all;display:flex}
  #viewPath[data-show="me"] > .me-card{display:flex}
  #viewPath[data-show="me"] > .me-stats,#viewPath[data-show="me"] > .tools{display:grid}
}
/* stat tiles: only the tile has a box, not the number and label inside it */
.me-stats div div{padding:0;border:0;background:none;border-radius:0}

/* ══ 2026-09-30 v15: the Path, one compact course bar on top (like the first design) ══
   Chapter switch, then all grades in one row, then the subjects as one scrolling row
   that stays under the top bar, then the path itself in the middle. No side lists. */
#chapters.chapters{gap:8px;margin-bottom:10px}
#chapters .chapter{display:grid;grid-template-columns:auto auto;justify-content:center;align-items:baseline;
  column-gap:8px;row-gap:0;padding:8px 10px;min-height:48px;text-align:center}
#chapters .chapter .ch-n{grid-column:1;grid-row:1;font-size:15px}
#chapters .chapter .ch-p{grid-column:2;grid-row:1}
#chapters .chapter .ch-s{grid-column:1 / -1;grid-row:2}
#courses.courses{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;overflow:visible;
  margin-bottom:12px;padding:2px 0 4px}
#courses .course{min-width:0;padding:8px 4px 7px;min-height:48px;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
#courses .course .c-n{font-size:21px}
#courses .course .c-t{text-wrap:balance;line-height:1.25;margin-top:3px}
#jump.jump{margin-bottom:10px}
#jump.jump button{min-height:44px}
/* up to small laptops: grade numbers only, with the chosen grade's ages written under the row */
@media (max-width:1099px){
  #courses.courses{position:relative;padding-bottom:26px;margin-bottom:6px}
  #courses .course,#courses .course:hover,#courses .course[aria-pressed="true"]{transform:none}
  #courses .course{min-height:46px;padding:6px 2px}
  #courses .course .c-n{font-size:19px}
  #courses .course .c-t{display:none}
  #courses .course[aria-pressed="true"] .c-t{display:block;position:absolute;left:0;right:0;bottom:2px;
    color:var(--muted) !important;opacity:1 !important;font-size:12.5px !important;margin:0}
}
/* every screen: the subjects are one row that scrolls sideways and stays under the top bar
   while the path scrolls (20+ subjects in a grid would be a wall of buttons) */
#jump.jump{position:sticky;top:var(--tbh,56px);z-index:5;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
  scroll-behavior:smooth;transition:background-color .2s}
/* only once it is stuck under the top bar does it get a frosted background */
#jump.jump.ux-stuck{background:color-mix(in srgb,var(--paper) 90%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 12px -10px rgba(34,26,61,.35)}
#jump.jump::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){#jump.jump{scroll-behavior:auto}}
#viewPath{--wpad:16px}
@media (max-width:560px){#viewPath{--wpad:13px}}
@media (max-width:900px){
  #jump.jump{margin:0 calc(-1 * var(--wpad,16px)) 10px;padding:8px var(--wpad,16px) 10px;
    background:color-mix(in srgb,var(--paper) 90%,transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent);
            mask-image:linear-gradient(90deg,transparent 0,#000 14px,#000 calc(100% - 22px),transparent)}
}
/* wide screens: title and chapter switch share a row, every subject is visible at once,
   and the path sits in the middle at a comfortable width */
@media (min-width:1100px){
  #viewPath[data-show="path"]{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:24px;align-items:center}
  #viewPath[data-show="path"] > *{grid-column:1 / -1}
  #viewPath[data-show="path"] > .section-head[data-sec~="path"]{grid-column:1;grid-row:1;margin:4px 0 10px;display:block}
  #viewPath[data-show="path"] > .section-head[data-sec~="path"] .note{display:block;margin-top:2px}
  #viewPath[data-show="path"] > #chapters{grid-column:2;grid-row:1;margin:4px 0 10px;max-width:560px;justify-self:end;width:100%}
  #chapters .chapter{grid-template-columns:auto auto auto}
  #chapters .chapter .ch-s{grid-column:2;grid-row:1}
  #chapters .chapter .ch-p{grid-column:3}
  #jump.jump{gap:8px;padding:8px 2px 10px;margin-bottom:8px;border-radius:0 0 18px 18px}
  #chapters .chapter .ch-s,#chapters .chapter .ch-n{white-space:nowrap}
  #viewPath[data-show="path"] > #chapters{max-width:640px}
  #pathBody{width:100%;max-width:760px;justify-self:center}
}

/* ══ 2026-09-30 v15: 3D cartoon emoji in lessons and games (fe.js) ══
   The emoji character stays in the page for reading and answers; it is pushed out of
   its box and the 3D picture is drawn in its place. */
.fe{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.22em;margin:0 .02em;
  background:var(--fe) center/contain no-repeat;overflow:hidden;white-space:nowrap;
  text-indent:200%;letter-spacing:0;line-height:1.2em;color:transparent}
/* the big picture in a lesson: bigger, pops in one by one, then floats gently */
.art .fe{width:1.45em;height:1.45em;margin:0 .06em;vertical-align:-.3em;
  filter:drop-shadow(0 .07em 0 rgba(34,26,61,.16));
  animation:fe-pop .55s cubic-bezier(.34,1.56,.64,1) backwards,fe-float 3.2s ease-in-out infinite;
  animation-delay:calc(var(--i,0) * 70ms),calc(.6s + var(--i,0) * 190ms)}
/* the lesson's own tile boxes must not box every emoji a second time */
.art.tiles .fe{display:inline-block;min-width:0;padding:0;border:0;border-radius:0;
  background:var(--fe) center/contain no-repeat;animation:fe-pop .55s cubic-bezier(.34,1.56,.64,1) backwards}
/* the lesson picture gets a little stage of its own, with a soft floor; one to four things are drawn big */
.stage .art:not(.tiles):not(:empty){position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.12em;min-height:2.4em;padding:.35em .5em .45em;margin:14px auto;max-width:560px;border-radius:28px;
  background:
    radial-gradient(60% 22% at 50% 92%,rgba(34,26,61,.10),transparent 70%),
    radial-gradient(90% 80% at 50% 20%,var(--sun-soft,#FFF4CC),transparent 75%),
    linear-gradient(180deg,var(--grape-soft,#EFE8FF),var(--card));
  border:3px solid color-mix(in srgb,var(--edge) 14%,transparent)}
.art:has(.fe):not(.tiles):not(:has(.fe:nth-of-type(5))) .fe{width:1.9em;height:1.9em}
/* one thing on its own: the star of the card, bouncing like a cartoon */
.art:has(.fe):not(.tiles):not(:has(.fe:nth-of-type(2))) .fe{width:2.6em;height:2.6em;transform-origin:50% 100%;
  animation:fe-pop .6s cubic-bezier(.34,1.56,.64,1) backwards,fe-boing 2.6s ease-in-out .6s infinite}
@keyframes fe-boing{0%,100%{transform:translateY(0) scale(1,1)}12%{transform:translateY(0) scale(1.08,.9)}
  32%{transform:translateY(-.16em) scale(.95,1.06)}52%{transform:translateY(0) scale(1.04,.96)}66%{transform:scale(1)}}
.stage .art:not(.tiles):not(:empty)::before,.stage .art:not(.tiles):not(:empty)::after{content:"";position:absolute;width:.22em;height:.22em;
  border-radius:50%;background:var(--sun,#FFC93C);opacity:.7;animation:fe-twinkle 2.4s ease-in-out infinite}
.stage .art:not(.tiles):not(:empty)::before{top:.35em;left:12%}
.stage .art:not(.tiles):not(:empty)::after{top:.6em;right:13%;width:.16em;height:.16em;background:var(--sky,#5CC8FF);animation-delay:1.1s}
@keyframes fe-twinkle{0%,100%{transform:scale(.6);opacity:.35}50%{transform:scale(1.25);opacity:.9}}
@keyframes fe-pop{from{opacity:0;transform:translateY(.3em) scale(.4) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes fe-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-.07em) rotate(2deg)}}
/* answers and questions: a little bigger than the words, a wiggle when pointed at */
.opt .fe,.qtext .fe{width:1.35em;height:1.35em;vertical-align:-.3em}
.opt:hover:not(:disabled) .fe{animation:fe-wiggle .5s ease-in-out}
.opt.right .fe{animation:fe-yes .6s cubic-bezier(.34,1.8,.5,1)}
@keyframes fe-wiggle{25%{transform:rotate(-10deg) scale(1.08)}75%{transform:rotate(8deg) scale(1.08)}}
@keyframes fe-yes{40%{transform:scale(1.35) rotate(-8deg)}}
@media (prefers-reduced-motion:reduce){.fe,.art .fe,.art.tiles .fe,.art::before,.art::after{animation:none !important}}
body.quiet .art .fe{animation:fe-pop .55s cubic-bezier(.34,1.56,.64,1) backwards}
/* mouse screens: arrow buttons at both ends of the subject row (ux.js adds them) */
#jump .ux-arr{position:sticky;z-index:2;flex:none;display:grid;place-items:center;width:44px;height:44px;min-height:44px;
  padding:0;align-self:center;border:3px solid var(--edge);border-radius:50%;background:var(--card);color:var(--ink);
  cursor:pointer;font:800 24px/1 system-ui,sans-serif;box-shadow:0 0 0 6px color-mix(in srgb,var(--paper) 92%,transparent),var(--shadow-sm);
  transition:opacity .15s,transform .12s}
#jump .ux-arr.l{left:0;margin-right:-52px}
#jump .ux-arr.r{right:0;margin-left:-52px}
#jump .ux-arr:hover{transform:scale(1.08)}
#jump .ux-arr.off{opacity:0;pointer-events:none;visibility:hidden}
#jump .ux-arr:focus-visible{outline:4px solid var(--sky);outline-offset:2px}

/* ══ v16: a warm open (used in the last 30 minutes) shows the launch screen still, for the instant
   the app takes to draw, and fades it out quickly; no animation replay ══ */
html.ss-warm .splash *{animation-duration:0s !important;animation-delay:0s !important;transition:none !important}
html.ss-warm .splash.out{animation-duration:.18s !important}

/* ══ v17: read aloud (voice.js) ══ */
#stage.stage{position:relative}
#stage > .kicker{padding-right:54px}
.rd-btn{position:absolute;top:12px;right:12px;z-index:3;width:46px;height:46px;display:grid;place-items:center;padding:0;
  border:3px solid var(--edge);border-radius:50%;background:var(--grape-soft);color:var(--pick,#5B2FD6);cursor:pointer;
  box-shadow:0 3px 0 var(--edge);transition:transform .12s}
.rd-btn svg{width:24px;height:24px}
.rd-btn:hover{transform:scale(1.06)}
.rd-btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--edge)}
.rd-btn:focus-visible{outline:4px solid var(--sky);outline-offset:2px}
.rd-btn.on{background:var(--pick,#5B2FD6);color:#fff;animation:rd-pulse 1.1s ease-in-out infinite}
@keyframes rd-pulse{0%,100%{box-shadow:0 3px 0 var(--edge),0 0 0 0 rgba(109,59,232,.45)}50%{box-shadow:0 3px 0 var(--edge),0 0 0 9px rgba(109,59,232,0)}}
@media (prefers-reduced-motion:reduce){.rd-btn.on{animation:none}}

/* ══ v17: levels, achievements, Rewards page (rewards.js) ══ */
.rw{display:block}
.rw-level{display:flex;align-items:center;gap:16px;padding:16px 18px;margin-bottom:12px;border:3px solid var(--edge);border-radius:24px;
  background:linear-gradient(135deg,var(--grape-soft),var(--card) 70%);box-shadow:var(--shadow-sm);position:relative;overflow:hidden}
.rw-badge{position:relative;flex:none;width:92px;height:92px;display:grid;place-items:center;animation:rw-bob 3.4s ease-in-out infinite}
.rw-badge svg{position:absolute;inset:0;width:100%;height:100%;fill:#FFC93C;stroke:var(--edge);stroke-width:4;stroke-linejoin:round;
  filter:drop-shadow(0 4px 0 rgba(34,26,61,.25))}
.rw-badge b{position:relative;font-family:var(--display);font-weight:800;font-size:30px;color:var(--edge);margin-top:6px}
@keyframes rw-bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-4px) rotate(3deg)}}
.rw-lvtext{flex:1;min-width:0}
.rw-lvtext small{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rw-lvtext h3{font-family:var(--display);font-size:24px;line-height:1.1;margin:0}
.rw-rank{font-size:13.5px;font-weight:700;color:var(--muted);margin:3px 0 9px}
.rw-bar,.rw-pbar,.lv-bar{height:14px;border:3px solid var(--edge);border-radius:999px;background:var(--paper2);overflow:hidden}
.rw-bar i,.rw-pbar i,.lv-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#FFB020,#FFD55A);
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);transition:width 1.1s cubic-bezier(.3,1.3,.5,1)}
.rw-left{font-size:13px;font-weight:800;margin-top:6px}
.rw-wallet{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:18px}
.rw-tile{display:flex;align-items:center;gap:10px;padding:12px;border:3px solid var(--edge);border-radius:18px;background:var(--card);box-shadow:var(--shadow-sm)}
.rw-tile > div{display:flex;flex-direction:column;min-width:0}
.rw-tile b{font-family:var(--display);font-size:21px;line-height:1.05}
.rw-tile > div span{font-size:12.5px;font-weight:800;color:var(--muted)}
.rw-ico,.rw-aico{flex:none;width:38px;height:38px;display:grid;place-items:center}
.rw-ico svg,.rw-aico svg{width:100%;height:100%}
.rw-h{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:4px 0 10px}
.rw-h h3{font-family:var(--display);font-size:20px;margin:0}
.rw-h span{font-size:13px;font-weight:800;color:var(--muted)}
.rw-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rw-ach{display:flex;align-items:flex-start;gap:10px;padding:12px;border:3px solid var(--edge);border-radius:18px;background:var(--card);
  box-shadow:var(--shadow-sm);animation:rw-in .4s cubic-bezier(.34,1.56,.64,1) backwards;animation-delay:calc(min(var(--i),12) * 35ms)}
.rw-ach:not(.got) .rw-aico{filter:grayscale(1);opacity:.55}
.rw-ach.near{border-color:var(--pick,#5B2FD6);background:linear-gradient(180deg,var(--grape-soft),var(--card))}
.rw-ach.got{background:linear-gradient(180deg,var(--sun-soft),var(--card))}
.rw-ach.got .rw-aico{animation:rw-shine 3s ease-in-out infinite}
.rw-atx{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.rw-atx b{font-family:var(--display);font-size:15px;line-height:1.15}
.rw-atx > span{font-size:12.5px;font-weight:700;color:var(--muted);line-height:1.25}
.rw-atx small{font-size:12px;font-weight:800;color:var(--muted)}
.rw-atx .rw-pbar{height:10px;border-width:2px;margin-top:5px}
.rw-done{color:var(--mint-deep,#0E8A5F) !important}
@keyframes rw-in{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
@keyframes rw-shine{0%,100%{transform:rotate(0) scale(1)}50%{transform:rotate(-8deg) scale(1.08)}}
@media (min-width:700px){.rw-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1100px){.rw-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.rw-badge{width:110px;height:110px}.rw-badge b{font-size:36px}}
@media (max-width:420px){.rw-wallet{gap:7px}.rw-tile{flex-direction:column;align-items:flex-start;gap:4px;padding:10px}.rw-ico{width:30px;height:30px}
  .rw-level{gap:12px;padding:14px}.rw-badge{width:76px;height:76px}.rw-badge b{font-size:25px}}
/* lesson done: the level bar */
.lv-done{margin:16px auto 4px;max-width:420px;text-align:left}
.lv-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.lv-chip{font-family:var(--display);font-weight:800;font-size:15px;padding:3px 11px;border:3px solid var(--edge);border-radius:999px;background:#FFC93C;color:var(--edge)}
.lv-txt{font-size:13px;font-weight:800;color:var(--muted)}
/* level up */
.lv-up{position:fixed;inset:0;z-index:9000;display:grid;place-items:center;padding:20px;background:rgba(20,14,48,.55);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:lv-fade .25s ease-out}
.lv-up.out{animation:lv-fade .25s ease-in reverse forwards}
.lv-card{position:relative;width:min(360px,100%);padding:26px 22px 20px;text-align:center;border:3px solid var(--edge);border-radius:28px;
  background:var(--card);box-shadow:0 8px 0 var(--edge);animation:lv-pop .55s cubic-bezier(.34,1.56,.64,1)}
.lv-burst{position:absolute;left:50%;top:62px;width:260px;height:260px;margin-left:-130px;margin-top:-130px;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(255,201,60,.35) 0 10deg,transparent 10deg 20deg);animation:lv-spin 9s linear infinite;pointer-events:none}
.lv-num{position:relative;width:96px;height:96px;margin:0 auto 10px;display:grid;place-items:center;align-content:center;border:4px solid var(--edge);
  border-radius:50%;background:#FFC93C;box-shadow:0 5px 0 var(--edge)}
.lv-num small{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--edge)}
.lv-num b{font-family:var(--display);font-size:40px;line-height:1;color:var(--edge)}
.lv-card h3{position:relative;font-family:var(--display);font-size:28px;margin:4px 0}
.lv-card p{position:relative;font-weight:700;color:var(--muted);margin:0 0 16px}
.lv-ok{position:relative;width:100%;min-height:52px;border:3px solid var(--edge);border-radius:16px;background:var(--pick,#5B2FD6);color:#fff;
  font-family:var(--display);font-weight:800;font-size:17px;box-shadow:0 5px 0 var(--edge);cursor:pointer}
.lv-ok:active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge)}
@keyframes lv-fade{from{opacity:0}to{opacity:1}}
@keyframes lv-pop{from{opacity:0;transform:scale(.6) translateY(30px)}to{opacity:1;transform:none}}
@keyframes lv-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rw-badge,.rw-ach,.rw-ach.got .rw-aico,.lv-burst,.lv-card,.lv-up{animation:none !important}}
.rw-ach[hidden]{display:none}
.rw-more{display:block;width:100%;margin:12px 0 4px;min-height:50px;border:3px solid var(--edge);border-radius:16px;background:var(--card);
  color:var(--ink);font-family:var(--display);font-weight:800;font-size:16px;box-shadow:0 4px 0 var(--edge);cursor:pointer}
.rw-more:active{transform:translateY(3px);box-shadow:0 1px 0 var(--edge)}
/* Today: level strip in the hero card */
.lv-strip{grid-column:1 / -1;display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:6px 10px;
  border:3px solid var(--edge);border-radius:16px;background:var(--paper2);color:var(--ink);cursor:pointer;text-align:left}
.lv-strip .lv-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.lv-strip .lv-bar{height:11px;border-width:2px}
.lv-strip small{font-size:12px;font-weight:800;color:var(--muted)}
.lv-strip:hover{border-color:var(--pick,#5B2FD6)}
@media (max-width:560px){ .pip-hero .ring{grid-column:1;justify-self:center} .lv-strip{grid-column:2} }

/* ══ v17: one cartoon chess set (chess.js) ══ */
.sq .pcw{display:grid;place-items:center;width:88%;height:88%;text-shadow:none}
.pc{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 0 rgba(34,26,61,.35))}
.pc g > *{stroke:#221A3D;stroke-width:4.5;stroke-linejoin:round;stroke-linecap:round}
.pc.pw g > *{fill:url(#pcW)}
.pc.pb g > *{fill:url(#pcB)}
.pc g > .d{fill:none !important;stroke-width:3.5}
.pc.pb g > .d{stroke:#B9A8F0}
.pc g > .e{fill:#221A3D !important;stroke:none}
.pc.pb g > .e{fill:#F4EEDC !important}
.pc .sh{fill:#fff;opacity:.55;stroke:none;pointer-events:none}
.pc.pb .sh{opacity:.22}
.sq:hover .pcw{transform:translateY(-2px)}
.sq .pcw{transition:transform .15s}
.sq.sel .pcw{animation:pc-hop .7s cubic-bezier(.3,1.6,.5,1) infinite alternate}
.sq.tosq .pcw{animation:pc-land .38s cubic-bezier(.2,1.6,.4,1)}
.board.pc-in .pcw{animation:pc-drop .5s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--n,0) * 22ms)}
@keyframes pc-hop{from{transform:translateY(0) scale(1,1)}to{transform:translateY(-12%) scale(1.04,.98)}}
@keyframes pc-land{0%{transform:translateY(-30%) scale(.8)}60%{transform:translateY(0) scale(1.1,.9)}100%{transform:none}}
@keyframes pc-drop{from{opacity:0;transform:translateY(-60%) scale(.6)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.sq.sel .pcw,.sq.tosq .pcw,.board.pc-in .pcw{animation:none}}

/* ══ v17: Your sky (sky.js) ══ */
.sky-box.sky2{padding:12px 6px 10px;background:
  radial-gradient(120% 70% at 50% 0%,#4a3585 0%,#2a1d52 45%,#150f2c 100%)}
.sky-box.sky2 .sky-dust{position:absolute;inset:0;pointer-events:none;opacity:.8;
  background-image:radial-gradient(1.5px 1.5px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 27% 62%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 44% 30%,#fff,transparent),radial-gradient(1px 1px at 63% 12%,#fff,transparent),
  radial-gradient(1.4px 1.4px at 78% 48%,#fff,transparent),radial-gradient(1px 1px at 90% 80%,#fff,transparent),
  radial-gradient(1.2px 1.2px at 8% 88%,#fff,transparent),radial-gradient(1px 1px at 55% 90%,#fff,transparent);
  animation:sky-dust 6s ease-in-out infinite alternate}
@keyframes sky-dust{from{opacity:.45}to{opacity:.9}}
.sky-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 2px}
@media (min-width:520px){.sky-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.sky-star{position:relative;display:grid;grid-template-rows:46px auto;justify-items:center;align-items:center;gap:2px;min-height:74px;padding:6px 2px 4px;
  background:none;border:0;border-radius:14px;color:#fff;cursor:pointer}
.sky-star:hover{background:rgba(255,255,255,.07)}
.sky-star:focus-visible{outline:3px solid #FFC64D;outline-offset:1px}
.sky-box .sky-star svg{position:relative;width:calc(42px * var(--s));height:calc(38px * var(--s));overflow:visible;transition:transform .2s}
.sky-star svg path{stroke-linejoin:round;stroke-width:5}
.sky-star.hi svg path{fill:#FFC64D;stroke:#FFE7A3;filter:drop-shadow(0 0 6px rgba(255,198,77,.9))}
.sky-star.mid svg path{fill:#B9A0FF;stroke:#DCCFFF;filter:drop-shadow(0 0 4px rgba(185,160,255,.7))}
.sky-star.low svg path{fill:#8B7FA8;stroke:#B3A8CC}
.sky-star.off svg path{fill:none;stroke:#8B7FA8;stroke-dasharray:7 6}
.sky-star.hi svg,.sky-star.mid svg{animation:sky-tw 2.6s ease-in-out infinite;animation-delay:var(--d)}
@keyframes sky-tw{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.12) rotate(8deg)}}
.sky-star:hover svg{transform:scale(1.15) rotate(-6deg)}
.ss-glow{position:absolute;top:7px;left:50%;width:46px;height:46px;margin-left:-23px;border-radius:50%;pointer-events:none;opacity:0}
.sky-star.hi .ss-glow{opacity:1;background:radial-gradient(circle,rgba(255,198,77,.35),transparent 65%)}
.ss-name{font-family:var(--body);font-size:12px;font-weight:800;line-height:1.15;letter-spacing:-.2px;hyphens:auto;overflow-wrap:anywhere;text-align:center;color:#F4F0FF;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:100%}
.sky-star.off .ss-name,.sky-star.low .ss-name{color:#B3A8CC}
.sky-legend{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 14px;margin-top:8px;padding-top:8px;
  border-top:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:800;color:#DCD4F7}
.sky-legend span{display:inline-flex;align-items:center;gap:5px}
.sky-legend .k{width:11px;height:11px;border-radius:50%;display:inline-block}
.sky-legend .k.hi{background:#FFC64D;box-shadow:0 0 6px #FFC64D}.sky-legend .k.mid{background:#B9A0FF}
.sky-legend .k.low{background:#8B7FA8}.sky-legend .k.off{border:2px dashed #8B7FA8}
@media (prefers-reduced-motion:reduce){.sky-box.sky2 .sky-dust,.sky-star svg{animation:none !important}}

/* ══ v17: strategy games polish ══ */
/* score lines ("Moves 0 · Fewest possible 15") had no style, so the two parts ran together */
.fc-stat{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin:2px 0 10px}
.fc-stat > span{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border:3px solid var(--edge);border-radius:999px;
  background:var(--paper2);font-size:13.5px;font-weight:800;color:var(--muted)}
.fc-stat > span b{font-family:var(--display);font-size:16px;color:var(--ink)}
/* Memory Match: a real card back, and a 3D flip */
#sheetHost .mcard{perspective:600px;background:
  radial-gradient(circle at 50% 45%,rgba(255,255,255,.28) 0 18%,transparent 19%),
  repeating-linear-gradient(45deg,rgba(255,255,255,.10) 0 8px,transparent 8px 16px),
  linear-gradient(160deg,#7B4DF2,#5324C9)}
#sheetHost .mcard::after{content:"\2605";position:absolute;font-size:26px;color:#FFD55A;text-shadow:0 2px 0 var(--edge);pointer-events:none;transition:opacity .15s}
#sheetHost .mcard{position:relative}
#sheetHost .mcard.up,#sheetHost .mcard.done{background:var(--card);animation:mc-flip .38s cubic-bezier(.3,1.4,.5,1)}
#sheetHost .mcard.up::after,#sheetHost .mcard.done::after{opacity:0}
#sheetHost .mcard.done{background:linear-gradient(180deg,var(--mint-soft),var(--card));opacity:.8}
@keyframes mc-flip{0%{transform:rotateY(90deg) scale(.96)}100%{transform:rotateY(0)}}
/* Pattern Recall: glowing, bouncing tiles */
#sheetHost .rcell{background:linear-gradient(180deg,var(--card),var(--paper2))}
#sheetHost .rcell.lit{background:radial-gradient(circle at 50% 40%,#FFF2B8,#FFC64D 60%,#F2A900);
  box-shadow:0 4px 0 var(--edge),0 0 22px rgba(255,198,77,.85);animation:rc-lit .36s cubic-bezier(.3,1.6,.5,1)}
#sheetHost .rcell.bad{animation:gShake .32s}
@keyframes rc-lit{0%{transform:scale(.9)}60%{transform:scale(1.12)}100%{transform:scale(1.06)}}
/* number and letter tiles: glossy, with a press */
#sheetHost .tile,#sheetHost .aslot span,#sheetHost .scell:not(.fixed){background-image:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0) 55%)}
#sheetHost .tile[aria-pressed="true"]{background:linear-gradient(180deg,#8C63FF,var(--pick));transform:translateY(-3px);box-shadow:0 7px 0 var(--edge)}
#sheetHost .tile:hover:not(.gone){transform:translateY(-2px)}
/* Tower of Hanoi: a wooden pole, glossy discs that lift */
#sheetHost .peg{position:relative;background:linear-gradient(180deg,var(--paper2),var(--card))}
#sheetHost .peg::before{content:"";position:absolute;left:50%;top:14px;bottom:0;width:9px;margin-left:-4.5px;border:2.5px solid var(--edge);
  border-bottom:0;border-radius:6px 6px 0 0;background:linear-gradient(90deg,#D9A873,#A87645)}
#sheetHost .disc{position:relative;z-index:1;height:22px;border-radius:11px;box-shadow:0 3px 0 rgba(34,26,61,.35);
  background-image:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 50%,rgba(0,0,0,.12)) !important}
#sheetHost .peg[aria-pressed="true"] .disc:last-child{transform:translateY(-14px);transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
@media (prefers-reduced-motion:reduce){#sheetHost .mcard.up,#sheetHost .mcard.done,#sheetHost .rcell.lit{animation:none}}

/* ══ v17: nothing a child reads is smaller than 12px ══ */
#tabbar .tab span{font-size:12px}
#pathBody .node-label small{font-size:12px}
#pathBody .diff{font-size:12px !important;letter-spacing:.02em}
#pathBody .node-tag{font-size:12px !important;letter-spacing:.04em}
#viewPath .tool .ts{font-size:12.5px}
#viewPath .q-head span,#viewPath .ct em{font-size:12.5px}
#goalRingBox .rn small{font-size:12px}

/* first visit: the welcome screen has no top bar or tabs, from the very first paint */
html.ss-new .topbar,html.ss-new .tabbar{display:none !important}
/* lesson done: one box per number, not a box inside a box; readable labels */
#viewDone .tally > div > div{min-width:0;padding:0;border:0;background:none;box-shadow:none;border-radius:0}
#viewDone .tally .tl{font-size:12px;margin-top:4px}
/* first visit: the welcome screen is plain HTML, so it is on screen from the first paint
   instead of waiting for the game script */
html.ss-new #viewIntro.hide{display:flex !important}
html.ss-new #viewPath{display:none !important}
#viewIntro .intro-dots{min-height:12px}
#rankLabel.brand-sub{font-size:12px}
/* first visit: Pip's welcome screen is the greeting, so the launch screen is skipped (one hello, not two).
   Until the game script is ready its buttons wait, softly dimmed. */
html.ss-new #splash{display:none !important}
html.ss-new:not(.ss-ready) #viewIntro .intro-go,html.ss-new:not(.ss-ready) #viewIntro .intro-skip{opacity:.55;pointer-events:none}

/* ══ v20: path rounds (rounds.js) ══ */
.rnd{display:flex;align-items:center;gap:14px;padding:12px 14px;margin:0 auto 16px;max-width:760px;border:3px solid var(--edge);
  border-radius:20px;background:linear-gradient(135deg,color-mix(in srgb,var(--m1) 55%,var(--card)),var(--card) 75%);box-shadow:var(--shadow-sm)}
.rnd-medal{flex:none;width:58px;height:58px;display:grid;place-items:center;border:3px solid var(--edge);border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,var(--m1) 45%,var(--m2));box-shadow:0 4px 0 var(--edge);animation:rw-bob 3.4s ease-in-out infinite}
.rnd-medal b{font-family:var(--display);font-weight:800;font-size:25px;color:var(--edge)}
.rnd-tx{flex:1;min-width:0}
.rnd-tx small{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rnd-tx h3{font-family:var(--display);font-size:19px;margin:0 0 6px;line-height:1.1}
.rnd-bar{height:12px;border:2.5px solid var(--edge);border-radius:999px;background:var(--paper2);overflow:hidden}
.rnd-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--m2),var(--m1));transition:width 1s cubic-bezier(.3,1.3,.5,1)}
.rnd-tx p{font-size:12.5px;font-weight:700;color:var(--muted);margin:6px 0 0;line-height:1.35}
@media (prefers-reduced-motion:reduce){.rnd-medal{animation:none}}

/* Books (v23): tab link + Today card */
#tabbar .tab-books{text-decoration:none}
#tabbar .tab-books .tico svg{width:21px;height:21px;display:block}
.book-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;margin:-2px 0 14px;padding:13px 17px;background:var(--card,#fff);color:var(--ink);
  border:3px solid var(--edge);border-radius:var(--r);box-shadow:var(--shadow);text-decoration:none}
.book-card:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--edge)}
.bc-ico{flex:none;width:44px;height:44px;display:grid;place-items:center;background:#EFEAFF;border-radius:12px}
.bc-ico svg{width:30px;height:30px}
.bc-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.bc-txt b{font-size:16px}.bc-txt span{font-size:13px;color:var(--muted)}
.bc-go{font-weight:900;font-size:20px;color:var(--muted)}
html.ss-store .book-card{display:flex}

/* Nova AI card on Today (v31) */
.nova-card{background:linear-gradient(160deg,#131a44,#0E1018 70%);color:#EDE9F5;border-color:#131a44}
.nova-card .bc-txt span{color:#A29EB5}.nova-card .bc-go{color:#8fb8ff}
.nc-ico{background:rgba(143,184,255,.12)}
.nc-orb{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0%,#cfe4ff 30%,#4b6fd6 70%,#141a3a 100%);box-shadow:0 0 14px rgba(143,184,255,.9)}
html.ss-store .nova-card{display:flex}