@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Patrick+Hand&display=swap');
/* ════════════════════════════════════════════════════════════════════════════
   THE ADVENTURE THEME — one watercolour sketchbook for every kids' screen.
   Loaded by Art World and Piano World alike.
   Shared with Piano World and the journey map: same paper, same painted tapes,
   same wooden signs, same ink. Every decoration is a real watercolour sprite
   cut from the studio artwork; everything that carries live data (counts,
   trail, cards, tapes, pills) is drawn in CSS so it can change.
   ════════════════════════════════════════════════════════════════════════════ */
:root{
  --paper:#FCF4E5; --ink:#14265E; --ink2:#4A5680; --deep:#002058;
  --card:#FEF8EA; --edge:#E7C98A; --grey:#EFEDE8; --greyline:#DAD6CE; --greyink:#9A968E;
  --gold:#F8C858; --sand:#F2E3C6; --sand2:#E7D2AC;
  --t1:#3880C0; --t2:#E06098; --t3:#509858; --t4:#F89030; --t5:#A070C0; --t6:#50A8B0; --t7:#F0B828;
  --hand:'Patrick Hand','Comic Sans MS','Chalkboard SE',cursive;
  --round:'Baloo 2','Arial Rounded MT Bold','Trebuchet MS',sans-serif;
  --kid:#509858;
  /* one brush-stroke silhouette, reused as a mask for every tape and pill */
  --stroke:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M7 17c31-9 67-13 97-11 29 2 59 0 92 6 8 1 8 32 0 34-34 6-64 4-92 6-30 2-66-2-97-11-6-2-6-22 0-24z' fill='%23000'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:var(--hand);
  background:#FCF4E5 url('/kids-adventure/kit/paper.webp') repeat;background-size:256px 256px}
button{font-family:var(--round);cursor:pointer;color:var(--ink)}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px dashed var(--t1);outline-offset:3px}
.app{position:relative;max-width:1080px;margin:0 auto;padding:16px 16px 40px;overflow:hidden;min-height:100vh}

/* ── watercolour decorations, cut from the studio artwork ─────────────────── */
.deco{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.deco i{position:absolute;display:block;background-repeat:no-repeat;background-size:100% 100%;opacity:.96}
@media (max-width:620px){.deco i.sm{display:none}}

/* ── chrome ──────────────────────────────────────────────────────────────── */
.back{position:absolute;left:14px;top:14px;z-index:4;width:52px;height:52px;border:none;border-radius:50%;
  background:#FFFDF6;box-shadow:0 3px 0 #E3D3B0,0 6px 16px #7a5a2a24;font-size:26px;font-weight:800;
  color:var(--t3);display:grid;place-items:center;text-decoration:none;line-height:1;padding-bottom:4px}
header{position:relative;z-index:2;text-align:center;padding:6px 0 0}
.title{display:block;width:min(620px,84%);margin:0 auto;height:auto}
.artist{font-family:var(--round);font-weight:700;font-size:19px;margin:2px 0 0;color:var(--ink2)}
.count{font-family:var(--round);font-weight:800;font-size:clamp(26px,6vw,36px);margin:6px 0 0;color:var(--deep);letter-spacing:-.5px}
.count b{color:var(--t4)}
.togo{font-size:19px;margin:2px 0 0;color:var(--ink2)}
.settings{border:none;background:#FFFDF6;border-radius:30px;padding:6px 16px;font-size:15px;font-weight:700;
  margin-top:10px;box-shadow:0 3px 0 #E3D3B0;min-height:40px}

/* ── the bead trail ──────────────────────────────────────────────────────── */
.trail{position:relative;z-index:2;display:flex;align-items:center;gap:8px;margin:14px 0 6px}
.trail svg{flex:1;height:46px;display:block}
.sign{flex:none;font-family:var(--round);font-weight:800;font-size:14px;color:#FFF6E2;text-shadow:0 1px 0 #00000045;
  background:linear-gradient(#A9793F,#8A5F30);border:2px solid #6F4B24;border-radius:5px;padding:5px 10px;
  box-shadow:0 3px 0 #6F4B2480;transform:rotate(-2deg);white-space:nowrap}
.sign.r{transform:rotate(2deg)}
.trail .peak{flex:none;width:56px;height:52px;background:url('/kids-adventure/kit/peak.webp') center/contain no-repeat}

/* ── kid switcher ────────────────────────────────────────────────────────── */
.kids{position:relative;z-index:3;display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none;justify-content:center;flex-wrap:wrap}
.kid{flex:none;display:flex;align-items:center;gap:6px;border:none;background:#FFFDF6;border-radius:40px;padding:4px 14px 4px 4px;
  font-weight:700;font-size:16px;box-shadow:0 3px 0 #E3D3B0}
.kid[aria-pressed=true]{box-shadow:0 0 0 3px var(--c),0 3px 0 #E3D3B0}
.kid .av{width:32px;height:32px;border-radius:50%;background:var(--c);display:grid;place-items:center}
.kid .av svg{width:24px}
.kid.addk{padding:6px 14px;background:transparent;border:2px dashed #D9C6A0;box-shadow:none;color:#94825F}

/* ── painted pill navigation ─────────────────────────────────────────────── */
.pills{position:relative;z-index:2;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:6px 0 20px}
.pill{position:relative;border:none;background:transparent;padding:11px 22px;font-family:var(--round);font-weight:800;
  font-size:17px;color:var(--deep);isolation:isolate;text-decoration:none;display:inline-block}
.pill::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--c);opacity:.42;
  -webkit-mask:var(--stroke) center/100% 100% no-repeat;mask:var(--stroke) center/100% 100% no-repeat;transition:opacity .2s ease}
.pill:hover::before{opacity:.62}
.pill[aria-selected=true]::before{opacity:1}
.pill[aria-selected=true]{color:#0E1B45}

/* ── the winding sand path ──────────────────────────────────────────────────
   One continuous ribbon drawn behind the rows, measured from the rows
   themselves after layout (see pathSVG) so it snakes through every row and
   turns at the ends exactly as the design does — at any width, any number
   of classes. */
.journey{position:relative}
.sandpath{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:visible}
.row{position:relative;padding:34px 4px 34px}
.cards{position:relative;z-index:2;display:grid;gap:26px;grid-template-columns:repeat(var(--per,2),minmax(0,1fr))}

/* Props standing on the path between cards — the brush, the palette, the
   little triceratops. Same watercolour sprites, dealt out per row. */
.rowdeco{position:absolute;z-index:3;pointer-events:none;background-repeat:no-repeat;background-size:100% 100%;opacity:0;
  filter:drop-shadow(0 3px 4px #8a6a3226)}
.rowstar{position:absolute;z-index:1;pointer-events:none;color:var(--gold);font-size:19px;text-shadow:0 1px 0 #fff8}
@media (max-width:620px){.rowdeco{display:none}}

/* ── a class card ────────────────────────────────────────────────────────── */
.card{position:relative;background:var(--card);border:3px solid var(--edge);border-radius:20px;padding:16px 12px 10px;
  box-shadow:0 7px 16px #8a6a3220,0 2px 0 #ffffffb0 inset;transform:rotate(var(--tilt,0deg))}
.tape{position:absolute;left:2px;top:-18px;min-width:86px;padding:8px 15px 9px;font-family:var(--round);font-weight:800;
  font-size:17px;line-height:1;color:#fff;text-transform:uppercase;letter-spacing:.5px;text-shadow:0 1px 1px #0003;
  transform:rotate(-3deg);z-index:2}
.tape::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--c);
  -webkit-mask:var(--stroke) center/100% 100% no-repeat;mask:var(--stroke) center/100% 100% no-repeat}
.frame{margin-top:6px;aspect-ratio:1/1;background:var(--grey);border:2px solid var(--greyline);border-radius:14px;
  overflow:hidden;position:relative}
.frame>button{width:100%;height:100%;border:none;padding:0;background:none;display:block}
.frame img{width:100%;height:100%;object-fit:cover;display:block}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:3px;height:100%}
.stack img:first-child{grid-row:span 2}
.more{position:absolute;right:7px;bottom:7px;background:#fffffff2;border-radius:20px;padding:1px 9px;
  font-family:var(--round);font-weight:700;font-size:14px}
.frame .add{color:var(--greyink);font-family:var(--hand);font-size:16px;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;background:none;border:none}
.add svg{width:44px;color:#BFBBB4}
.ttl{font-size:16px;margin:8px 4px 0;min-height:1.2em;color:var(--ink2)}
.ttl.none{color:#B9B0A0}
.cardfoot{display:flex;align-items:center;justify-content:space-between;margin-top:6px;padding:0 2px}
.cls{font-family:var(--round);font-weight:800;font-size:21px;color:var(--deep);display:flex;align-items:center;gap:7px}
.cls s{text-decoration:none;color:var(--gold);font-size:21px}
.tools{display:flex;align-items:center;gap:6px}
/* Edit and the heart were 41×21 and 16×24 — well under the ~44px a finger
   needs, and the phone rules below used to shrink them FURTHER to make the
   footer fit. A child taps the heart on their own drawing; it has to be
   hittable, so both get a real 44px box rather than an invisible pad around a
   small one. (A pad was the first attempt and it backfired: two pads side by
   side overlap, and whichever paints last swallows the other one's taps —
   the heart stopped responding at all.) */
.heart,.edit{min-height:44px;touch-action:manipulation;display:inline-flex;
  align-items:center;justify-content:center}
.heart{border:none;background:none;font-size:23px;line-height:1;min-width:44px;padding:0;color:#DFD3BC}
.heart.on{color:var(--t2)}
.edit{border:none;background:#F6EEDD;border-radius:22px;padding:0 14px;font-size:14px;font-weight:700;color:var(--ink2)}
.card.now{border-color:var(--t1);box-shadow:0 0 0 5px #3880c022,0 8px 18px #3880c02e}
.card.now .frame{border-color:#9CC3E8;background:#F2F7FD}
.card.now .add{color:var(--t1)}
.here{position:absolute;right:-10px;top:-24px;z-index:3;font-family:var(--round);font-weight:800;font-size:14px;
  color:var(--deep);padding:7px 13px 8px;transform:rotate(5deg)}
.here::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--t7);
  -webkit-mask:var(--stroke) center/100% 100% no-repeat;mask:var(--stroke) center/100% 100% no-repeat}
.crown{position:absolute;left:-6px;top:-22px;font-size:20px;transform:rotate(-14deg);z-index:3}

/* On a narrow phone the card footer has to hold a star, a class number, Edit
   and a heart in about 150px. The type steps down — but the two buttons drop
   onto their own row instead of being squeezed, because there is no width at
   which "★ Class 1" plus two finger-sized targets fits on one line, and the
   targets are the part that has to win. */
@media (max-width:480px){
  .cls{font-size:17px;gap:5px}.cls s{font-size:17px}
  .cardfoot{flex-wrap:wrap;row-gap:2px;justify-content:center}
  .tools{gap:10px}
  .tape{font-size:15px;min-width:72px;padding:7px 11px 8px}
  .card{padding:14px 9px 8px}
  .ttl{font-size:15px;margin-top:6px}
}

/* ── upcoming classes, the trail ahead ───────────────────────────────────── */
h2{font-family:var(--round);font-weight:800;font-size:26px;margin:34px 0 4px;text-align:center;color:var(--deep);position:relative;z-index:2}
.sub{text-align:center;margin:0 0 16px;font-size:17px;color:var(--ink2);position:relative;z-index:2}
.upcoming{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px}
.pebble{background:#FFFDF6;border:2px dashed #E0CFAB;border-radius:16px;text-align:center;padding:10px 4px;font-size:15px;line-height:1.2;color:var(--ink2)}
.pebble b{display:block;font-family:var(--round);font-size:17px;color:var(--deep)}
.pebble.mile{border:2.5px solid var(--gold);background:#FFF7E2}
.pebble i{display:block;font-style:normal;font-size:20px}
.center{display:flex;justify-content:center;margin:26px 0 8px;position:relative;z-index:2}
.big{border:none;background:var(--t3);color:#fff;font-size:18px;font-weight:800;padding:12px 24px;border-radius:36px;
  box-shadow:0 4px 0 #38703f}
.empty{text-align:center;font-size:19px;padding:30px 10px;color:var(--ink2);position:relative;z-index:2}

/* ── gallery ─────────────────────────────────────────────────────────────── */
.gallery{position:relative;z-index:2;columns:2 170px;column-gap:14px}
.gitem{break-inside:avoid;margin:0 0 14px;background:var(--card);border:3px solid var(--edge);padding:9px 9px 7px;
  border-radius:14px;box-shadow:0 6px 14px #8a6a321f;transform:rotate(var(--tilt));border-color:var(--edge);
  width:100%;text-align:left;font-family:var(--hand);color:var(--ink2)}
.gitem img{width:100%;display:block;border-radius:8px}
.gitem span{display:block;font-size:15px;padding-top:5px}

/* ── ideas ───────────────────────────────────────────────────────────────── */
.ichips{position:relative;z-index:2;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;padding:0 2px 14px}
.ichip{border:none;background:#FFFDF6;border-radius:30px;padding:7px 15px;font-size:15px;font-weight:700;box-shadow:0 3px 0 #E3D3B0}
.ichip[aria-pressed=true]{background:var(--kid);color:#fff;box-shadow:0 3px 0 #00000026}
.today{position:relative;z-index:2;background:var(--card);border:3px solid var(--gold);border-radius:20px;padding:16px;
  box-shadow:0 7px 16px #8a6a3222;margin:0 0 10px}
.today .lbl{position:absolute;left:14px;top:-15px;font-family:var(--round);font-weight:800;font-size:14px;color:var(--deep);padding:6px 13px}
.today .lbl::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--gold);
  -webkit-mask:var(--stroke) center/100% 100% no-repeat;mask:var(--stroke) center/100% 100% no-repeat}
.today h3{font-family:var(--round);font-weight:800;font-size:25px;margin:8px 0 2px;color:var(--deep)}
.today p{margin:0;font-size:17px;color:var(--ink2)}
.today .em{font-size:40px;line-height:1}
.irow{position:relative;z-index:2;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:12px 0 18px}
.ideas{position:relative;z-index:2;display:grid;grid-template-columns:repeat(auto-fill,minmax(152px,1fr));gap:14px}
.idea{background:var(--card);border:3px solid var(--edge);border-radius:18px;padding:12px;text-align:left;
  font-family:var(--hand);font-size:16px;box-shadow:0 6px 14px #8a6a321f;position:relative;display:flex;flex-direction:column;gap:2px;color:var(--ink2)}
.idea .em{font-size:30px;line-height:1.1}
.idea b{font-family:var(--round);font-size:18px;line-height:1.15;color:var(--deep)}
.idea small{opacity:.75;font-size:14px}
.idea .tick{position:absolute;top:8px;right:9px;font-size:18px;color:var(--t3)}
.idea.done{background:#F4FAF1;border-color:var(--t3)}
.isteps{list-style:none;counter-reset:s;padding:0;margin:6px 0 14px}
.isteps li{counter-increment:s;display:flex;gap:10px;align-items:flex-start;font-size:17px;margin:0 0 9px}
.isteps li::before{content:counter(s);flex:none;width:26px;height:26px;border-radius:50%;background:var(--kid);color:#fff;
  font-family:var(--round);font-weight:800;font-size:15px;display:grid;place-items:center}
.ineed{background:#F6EEDD;border-radius:12px;padding:9px 13px;font-size:16px;margin:0 0 12px}

/* ── sheets, lightbox, toast ─────────────────────────────────────────────── */
.md{position:fixed;inset:0;background:#2a3a5cb3;display:flex;align-items:flex-end;justify-content:center;z-index:40}
.sheet{background:var(--paper) url('/kids-adventure/kit/paper.webp') repeat;background-size:256px 256px;width:100%;
  max-width:560px;max-height:92vh;overflow:auto;border-radius:24px 24px 0 0;padding:20px 18px 26px}
@media(min-width:600px){.md{align-items:center}.sheet{border-radius:24px}}
.sheet h3{font-family:var(--round);font-weight:800;font-size:25px;margin:0 0 12px;color:var(--deep)}
.fld{display:block;margin:0 0 14px;font-size:17px}
.fld small{display:block;color:var(--ink2);font-size:14px}
.fld input,.fld select{display:block;width:100%;margin-top:4px;font-family:var(--round);font-size:18px;padding:10px 12px;
  border:2px solid var(--edge);border-radius:12px;background:#FFFDF6;color:var(--ink)}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:17px;margin:0 0 14px}
.chk input{width:22px;height:22px;margin-top:2px}
.sw{display:flex;gap:10px;margin-top:6px}
.sw button{width:36px;height:36px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 2px var(--edge)}
.sw button[aria-pressed=true]{box-shadow:0 0 0 3px var(--ink)}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin:6px 0 14px}
.th{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:var(--grey)}
.th img{width:100%;height:100%;object-fit:cover}
.th button{position:absolute;top:4px;right:4px;width:26px;height:26px;border-radius:50%;border:none;background:#fff;font-weight:800;line-height:1}
.addph{aspect-ratio:1;border:3px dashed #D9C6A0;border-radius:10px;background:transparent;color:#94825F;font-family:var(--hand);font-size:15px}
.acts{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;margin-top:6px}
.acts .grow{display:flex;gap:10px;margin-left:auto}
.ghost{border:none;background:#FFFDF6;border-radius:30px;padding:10px 18px;font-size:16px;font-weight:700;box-shadow:0 3px 0 #E3D3B0}
.danger{border:none;background:none;color:#B3262B;font-size:15px;font-weight:700;text-decoration:underline;padding:10px 0}
.err{color:#B3262B;font-size:15px;min-height:1em;margin:-6px 0 8px}
.lb{position:fixed;inset:0;background:#2a3a5ce6;display:none;z-index:50;flex-direction:column;align-items:center;justify-content:center;padding:18px}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:68vh;border:10px solid #fff;border-bottom-width:40px;border-radius:4px}
.lbcap{color:#fff;font-size:20px;margin-top:10px;text-align:center}
.lbbar{display:flex;gap:10px;margin-top:12px}
.lbbar button{border:none;border-radius:30px;padding:8px 16px;font-size:16px;font-weight:700;background:#fff}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(120px);background:var(--deep);color:#fff;
  padding:11px 20px;border-radius:30px;font-size:18px;transition:transform .35s;z-index:60;white-space:nowrap}
.toast.show{transform:translateX(-50%)}
.confetti{position:fixed;top:-20px;width:10px;height:14px;z-index:70;pointer-events:none;animation:fall 1.6s ease-in forwards}
@keyframes fall{to{transform:translateY(105vh) rotate(540deg);opacity:.2}}

/* ── the closing line, painted underline and all ─────────────────────────── */
.chapter{position:relative;z-index:2;text-align:center;margin:34px 0 0;font-size:19px;color:var(--deep);line-height:1.4}
.chapter::after{content:'';display:block;width:150px;height:7px;margin:12px auto 0;border-radius:6px;
  background:linear-gradient(90deg,var(--t7),var(--t3) 55%,var(--t6));opacity:.75;
  -webkit-mask:var(--stroke) center/100% 100% no-repeat;mask:var(--stroke) center/100% 100% no-repeat}
.mutebar{position:relative;z-index:2;display:flex;justify-content:center;margin:22px 0 0}
.mute{border:none;background:#FFFDF6;border-radius:40px;padding:8px 16px;font-family:var(--round);font-weight:700;
  font-size:14px;color:var(--ink2);box-shadow:0 3px 0 #E3D3B0}
@media (prefers-reduced-motion: reduce){.confetti{display:none}}

/* ── Piano World ───────────────────────────────────────────────────────────
   Same paper, same cards, same tapes. Only the title lettering and the
   playable keys inside each card belong to this world alone. */
.ptitle{font-family:var(--round);font-weight:800;line-height:.9;margin:0;letter-spacing:-1px}
.ptitle .my{display:block;font-size:clamp(20px,4vw,28px);color:var(--deep);letter-spacing:2px}
/* 10.5vw fits "MY JOURNEY" and runs "RECEPTION & KG" and "PIANO ADVENTURE"
   into both edges of a phone: the painted title is one line of rotated
   letters, so a long name cannot wrap out of trouble. Each screen sets
   --chars to its own title length and the size divides down to fit, with
   10.5vw kept as the ceiling so the short titles are unchanged. */
.ptitle .pbig{display:block;font-size:clamp(22px,min(10.5vw, 112vw / var(--chars,10)),74px)}
.ptitle .pbig span{display:inline-block;transform:rotate(var(--r));text-shadow:1px 2px 0 #00000012}
.frame.kb{aspect-ratio:12/7;background:#FFFDF6;border-color:#E7D2AC;display:grid;place-items:center;padding:10px}
.frame.kb svg{width:100%;height:100%;display:block}
.key{cursor:pointer}
.key rect{transition:fill .18s ease,transform .1s ease}
.key:hover .w,.key:focus-visible .w{fill:#FFF8E4}
.key.hit .w{fill:var(--c)}
.key.hit .k{fill:var(--c)}
.lvlname{font-family:var(--round);font-weight:800;font-size:21px;color:var(--deep);margin:10px 4px 0}
.lvlnote{font-size:16px;color:var(--ink2);margin:4px 4px 0;min-height:2.4em}
.play{display:inline-block;margin:4px 2px 0;border:none;font-family:var(--round);font-weight:800;font-size:16px;
  color:#fff;background:var(--t1);border-radius:30px;padding:9px 18px;box-shadow:0 4px 0 #2a5f92;text-decoration:none}
.tick{border:none;background:#F6EEDD;border-radius:30px;padding:9px 14px;font-family:var(--round);font-weight:700;
  font-size:15px;color:var(--ink2);margin-left:6px}
.tick.on{background:var(--t3);color:#fff;box-shadow:0 3px 0 #38703f}
.lvlfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;flex-wrap:wrap}

/* ── the songbook shelf on Piano World ─────────────────────────────────── */
.songshelf{margin-top:6px}
.songface{aspect-ratio:12/6;background:#FFFDF6;border-color:#E7D2AC;display:grid;place-items:center;font-size:54px;line-height:1}
.pbar{height:9px;border-radius:6px;background:#EFE6D2;overflow:hidden;margin:8px 2px 0}
.pbar span{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--t7),var(--t3))}

/* ── the coach, the bubble and the painted buttons ──────────────────────────
   Dyno stands beside a speech bubble on every screen that teaches — the
   piano game and Study Island both — so these live in the shared kit rather
   than in either page. */
/* Dyno and what he says */
.coach{display:flex;align-items:flex-end;gap:12px;margin:0 0 14px;min-height:132px}
.coach .dyno{flex:none;width:112px;height:146px;background:url('/kids-adventure/kit/dino-green.webp') bottom center/contain no-repeat;
  transition:transform .25s ease}
.coach.yes .dyno{animation:nod .5s ease}
.coach.no .dyno{animation:shake .4s ease}
@keyframes nod{40%{transform:translateY(-12px) rotate(-3deg)}}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}
.says{position:relative;flex:1;background:#FFFDF6;border:3px solid var(--edge);border-radius:22px 22px 22px 6px;
  padding:14px 18px;box-shadow:0 6px 14px #8a6a321f;min-height:76px}
.says > b{display:block;font-family:var(--round);font-size:21px;color:var(--deep);line-height:1.15}
.says > b b{font-family:inherit;color:inherit}          /* a sum's own bold stays inline */
.says > span{display:block;font-size:17px;color:var(--ink2);margin-top:3px}

/* buttons under the keys */
.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:16px 0 0}
.gbtn{position:relative;border:none;background:transparent;padding:12px 22px;font-family:var(--round);font-weight:800;
  font-size:17px;color:var(--deep);isolation:isolate;text-decoration:none;display:inline-block}
.gbtn::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--c,var(--t7));opacity:.85;
  -webkit-mask:var(--stroke) center/100% 100% no-repeat;mask:var(--stroke) center/100% 100% no-repeat}
.gbtn:hover::before{opacity:1}
.gbtn[disabled]{opacity:.45}
.stars{font-family:var(--round);font-weight:800;font-size:19px;color:var(--gold);letter-spacing:2px}
.stars i{font-style:normal;color:#DFD3BC}

.win{text-align:center;margin:18px 0 0}
.win b{display:block;font-family:var(--round);font-weight:800;font-size:27px;color:var(--deep)}
.spark2{position:fixed;pointer-events:none;z-index:70;font-size:26px;animation:up 1s ease-out forwards}
@keyframes up{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}25%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-140px) scale(1.3)}}

@media (max-width:560px){
  .coach .dyno{width:78px;height:104px}
  .says > b{font-size:18px}
  .says > span{font-size:16px}
}
@media (prefers-reduced-motion: reduce){
  .coach.yes .dyno,.coach.no .dyno{animation:none}
  .spark2{display:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   GAME FEEL — bursts, floating numbers, streak banners, the star stamp and
   the sticker book. Shared by every screen through kit/juice.js.
   ══════════════════════════════════════════════════════════════════════════ */
.jbit{position:fixed;width:10px;height:12px;pointer-events:none;z-index:80;
  animation:jbit .85s cubic-bezier(.2,.7,.35,1) forwards}
@keyframes jbit{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}
  18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.1) rotate(200deg)}}
.jspark{position:fixed;pointer-events:none;z-index:80;font-size:26px;line-height:1;
  animation:jspark 1s ease-out forwards}
@keyframes jspark{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}25%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx)),-140px) scale(1.3)}}
.jpop{position:fixed;pointer-events:none;z-index:80;font-family:var(--round);font-weight:800;font-size:26px;
  text-shadow:0 2px 0 #fff,0 4px 10px #0002;animation:jpop 1s cubic-bezier(.2,.8,.3,1) forwards}
@keyframes jpop{0%{opacity:0;transform:translate(-50%,0) scale(.6)}
  22%{opacity:1;transform:translate(-50%,-18px) scale(1.15)}100%{opacity:0;transform:translate(-50%,-74px) scale(1)}}
.jbanner{position:fixed;left:50%;bottom:96px;transform:translate(-50%,160%);z-index:85;
  font-family:var(--round);font-weight:800;font-size:19px;color:#fff;background:linear-gradient(135deg,#F2913D,#E0623B);
  padding:10px 22px;border-radius:40px;box-shadow:0 6px 0 #00000026,0 12px 26px #0003;
  transition:transform .35s cubic-bezier(.2,1.5,.4,1),opacity .3s ease;opacity:0;pointer-events:none}
.jbanner.on{transform:translate(-50%,0);opacity:1}
/* the stamp lands on the coach, so the coach has to be its frame */
.coach{position:relative}
.jstamp{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5;pointer-events:none}
.jstamp span{display:block;font-family:var(--round);font-weight:800;font-size:56px;color:var(--gold);
  text-shadow:0 3px 0 #fff,0 6px 0 #E0A93C55;animation:jstamp .5s cubic-bezier(.2,1.8,.4,1) forwards}
.jstamp.still span{animation:none}
@keyframes jstamp{0%{opacity:0;transform:scale(2.6) rotate(-16deg)}60%{opacity:1;transform:scale(.92) rotate(3deg)}
  100%{opacity:1;transform:scale(1) rotate(-3deg)}}

/* every tappable thing squashes a little, which is most of "feels nice" */
.card,.ans,.gbtn,.pill,.part,.lp,.mute,.ghost,.big,.topiccard,.wk,.key{-webkit-tap-highlight-color:transparent}
.ans:active,.gbtn:active,.pill:active,.part:active,.lp:active,.mute:active,.ghost:active,.big:active{transform:scale(.96)}
.topiccard:active,.yearcard:active{transform:scale(.985) rotate(var(--tilt,0deg))}
/* Dyno breathes while he waits */
.coach .dyno{animation:bob 3.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-5px)}}
.coach.yes .dyno{animation:nod .5s ease}
.coach.no .dyno{animation:shake .4s ease}
/* a bead that has just been won lands rather than appears */
.trail svg circle{transition:r .25s ease}

/* ── the sticker book ──────────────────────────────────────────────────────*/
.stickerbook{display:grid;grid-template-columns:repeat(auto-fill,minmax(108px,1fr));gap:14px;
  position:relative;z-index:2;margin:10px 0 0}
.sticker{background:#FFFDF6;border:3px dashed #E0CFAB;border-radius:18px;padding:10px 8px 8px;text-align:center;
  min-height:128px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.sticker.have{border-style:solid;border-color:var(--edge);box-shadow:0 6px 14px #8a6a321f;transform:rotate(-1.2deg)}
.sticker.have:nth-child(even){transform:rotate(1.4deg)}
.sticker img{width:72px;height:72px;object-fit:contain;display:block;filter:drop-shadow(0 3px 4px #8a6a3233)}
.sticker span{font-family:var(--round);font-weight:800;font-size:30px;color:#DCCFB4}
.sticker b{font-family:var(--round);font-weight:700;font-size:13px;color:var(--ink2);line-height:1.15}
.sticker:not(.have) b{color:#C9BCA2}
.stickerwin .sheet{text-align:center}
.stickerbig{margin:6px auto 2px;width:150px;height:150px;display:grid;place-items:center;
  background:radial-gradient(closest-side,#FFF4D6,#fff0);border-radius:50%}
.stickerbig img{width:132px;height:132px;object-fit:contain;animation:jstamp .55s cubic-bezier(.2,1.8,.4,1) forwards}
.stickername{font-family:var(--round);font-weight:800;font-size:23px;color:var(--deep);margin:4px 0 0}
.stickerwhy{font-size:17px;color:var(--ink2);margin:2px 0 14px}
.toolbar{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;position:relative;z-index:3;margin:20px 0 0}
.toolbar button,.toolbar a{border:none;background:#FFFDF6;border-radius:40px;padding:8px 16px;font-family:var(--round);
  font-weight:700;font-size:14px;color:var(--ink2);box-shadow:0 3px 0 #E3D3B0;text-decoration:none}
.toolbar button[aria-pressed=true]{background:var(--t3);color:#fff;box-shadow:0 3px 0 #38703f}

/* ── the star jar ──────────────────────────────────────────────────────────
   The one thing on screen that is always the child's, on every screen: a
   painted glass jar in the corner with the running total of every star they
   have ever earned. The glass fills up as the total climbs through its
   levels, so there is something to watch even before you can read the number,
   and the buddy's face sits inside looking out. Stars from an answer fly
   across the screen into it. */
.starjar{position:fixed;right:12px;bottom:14px;z-index:38;border:none;background:transparent;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:2px;filter:drop-shadow(0 6px 12px #8a6a3240);
  -webkit-tap-highlight-color:transparent;--jar:#F0B828;--fill:0%}
.starjar.left{right:auto;left:12px}
.jarglass{position:relative;width:52px;height:58px;display:grid;place-items:center;overflow:hidden;
  background:#FFFDF6cc;border:3px solid var(--jar);
  border-radius:14px 14px 20px 20px/10px 10px 22px 22px;
  box-shadow:inset 0 3px 0 #fff, inset 0 -6px 10px #8a6a3218}
/* the jar's lid: a painted band across the top */
.jarglass::before{content:'';position:absolute;top:0;left:-3px;right:-3px;height:11px;background:var(--jar);
  border-radius:12px 12px 4px 4px;opacity:.92}
.jarfill{position:absolute;left:0;right:0;bottom:0;height:var(--fill);
  background:linear-gradient(180deg,#FFE79A,var(--jar));opacity:.55;transition:height .5s cubic-bezier(.3,1.4,.5,1)}
/* a waterline, so the fill reads as something poured in */
.jarfill::before{content:'';position:absolute;top:-2px;left:0;right:0;height:4px;background:#fff9;border-radius:50%}
.jarface{position:relative;z-index:2;font-size:24px;line-height:1;font-style:normal;margin-top:6px}
.jarglass img{position:relative;z-index:2;width:34px;height:34px;object-fit:contain;margin-top:5px}
.jarnum{font-family:var(--round);font-weight:800;font-size:14px;color:var(--deep);background:#FFFDF6;
  border:2px solid var(--jar);border-radius:30px;padding:1px 10px;min-width:34px;box-shadow:0 2px 0 #E3D3B0}
.starjar.pulse .jarglass{animation:jarpulse .36s cubic-bezier(.3,1.6,.4,1)}
@keyframes jarpulse{0%{transform:scale(1)}45%{transform:scale(1.16) rotate(-3deg)}100%{transform:scale(1)}}
.starjar:active{transform:scale(.94)}
/* the jar is fixed over the page, so every page keeps a lane clear for it
   rather than letting it sit on top of the last thing a child reads */
body{padding-bottom:96px}
/* ── skip to the content ────────────────────────────────────────────────
   A skip link is for someone tabbing through with a keyboard, and it is
   supposed to be invisible until they reach it. These had no styling at all,
   so "Skip to the main content" sat in plain sight above the Year 2 Quest's
   title — the first thing anyone read on the page. It is off the top of the
   screen now, and drops into view the moment it is focused. */
.skip{position:absolute;left:8px;top:-56px;z-index:200;padding:10px 16px;border-radius:0 0 14px 14px;
  background:var(--deep,#14265E);color:#fff;font-family:var(--round);font-weight:800;font-size:16px;
  text-decoration:none;transition:top .14s}
.skip:focus{top:0;outline:3px solid var(--gold,#F8C858)}

/* ── the buddy, along for the ride ──────────────────────────────────────
   A child picks one favourite character on the map, once, and every island —
   Dino World, Study Island, Piano World, Art World — shows the same face and
   name doing that island's own verb ("is exploring", "is practising",
   "is painting"), so it reads as one companion following the child around
   the whole adventure rather than a decoration that only Dino World has. */
.buddyline{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;
  font-family:var(--hand);font-size:17px;color:var(--ink2)}
.buddyline img{vertical-align:middle}
.buddyline b{color:var(--deep)}

/* a star travelling from the answer to the jar */
.flystar{position:fixed;z-index:39;pointer-events:none;font-size:22px;
  animation:flystar .8s cubic-bezier(.4,.1,.7,1) forwards}
@keyframes flystar{
  0%{transform:translate(-50%,-50%) scale(1.3) rotate(0);opacity:1}
  70%{opacity:1}
  100%{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.35) rotate(260deg);opacity:.2}
}

/* the progress card behind the jar */
.jarcard .sheet{text-align:left}
.jarrow{display:flex;align-items:center;gap:14px;background:#FFFDF6;border:3px solid var(--edge);
  border-radius:18px;padding:12px 14px;margin:0 0 12px}
.jarrow b{display:block;font-family:var(--round);font-weight:800;font-size:26px;color:var(--deep);line-height:1.1}
.jarrow span{font-size:16px;color:var(--ink2)}
.jarstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 16px}
.jarstats div{background:#FFFDF6;border:2px dashed #E0CFAB;border-radius:16px;padding:10px 4px;text-align:center}
.jarstats b{display:block;font-family:var(--round);font-weight:800;font-size:22px;color:var(--deep)}
.jarstats span{font-size:14px;color:var(--ink2)}

/* ── the buddy picker ──────────────────────────────────────────────────────
   Asked once. From then on this character's colour, confetti, noise and words
   are what a child gets when they do well, which is what turns "correct" into
   somebody being pleased with you. */
.sheet.wide{max-width:640px}
.buddies{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:12px;margin:0 0 16px}
.buddy{border:3px solid #E0CFAB;background:#FFFDF6;border-radius:20px;padding:12px 8px 10px;
  display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 4px 0 #E3D3B0;--bc:#F0B828}
.buddy .bface{width:62px;height:62px;display:grid;place-items:center;border-radius:50%;position:relative}
/* a wash of the buddy's own colour behind its face, painted as a tinted
   pseudo-element rather than color-mix() so it renders on older phones too */
.buddy .bface::before{content:'';position:absolute;inset:0;border-radius:50%;background:var(--bc);opacity:.22}
.buddy .bface > *{position:relative;z-index:1}
.buddy b{font-family:var(--round);font-weight:800;font-size:18px;color:var(--deep)}
.buddy i{font-style:normal;font-size:14px;color:var(--ink2);line-height:1.15;text-align:center}
.buddy.on{border-color:var(--bc);box-shadow:0 0 0 4px var(--bc),0 4px 0 #E3D3B0}
.buddy.on .bface::before{opacity:.42}
.buddy:active{transform:scale(.96)}

/* the buddy's own confetti and its speech ribbon */
.jgift{position:fixed;top:-40px;z-index:41;pointer-events:none;animation:jgift 2.6s linear forwards}
@keyframes jgift{
  0%{transform:translateY(0) rotate(0);opacity:1}
  100%{transform:translateY(108vh) rotate(320deg);opacity:.9}
}
.jsay{position:fixed;left:50%;bottom:86px;transform:translate(-50%,20px);z-index:42;pointer-events:none;
  background:#FFFDF6;border:3px solid var(--gold);border-radius:22px;padding:10px 18px;max-width:min(92vw,460px);
  font-family:var(--round);font-weight:700;font-size:18px;color:var(--deep);text-align:center;
  box-shadow:0 10px 22px #8a6a3233;opacity:0;transition:opacity .22s ease,transform .28s cubic-bezier(.3,1.5,.5,1)}
.jsay.on{opacity:1;transform:translate(-50%,0)}
.jsay i{display:block;font-style:normal;font-family:var(--hand);font-weight:400;font-size:16px;color:var(--ink2);margin-top:2px}
.jsay .sface{display:inline-grid;place-items:center;vertical-align:-8px;margin-right:8px}
.jsay .sface img{width:32px;height:32px;object-fit:contain}

/* ── carry on where you left off ───────────────────────────────────────────
   A signpost, never a redirect: a child who comes back tomorrow is offered
   the exact place they stopped, and still chooses to go there. */
.resume{display:flex;align-items:center;gap:12px;text-decoration:none;position:relative;z-index:3;
  background:#FFF7E2;border:3px solid var(--gold);border-radius:22px;padding:10px 14px;margin:0 0 14px;
  box-shadow:0 6px 14px #8a6a321f}
.resume .rface{width:44px;height:44px;display:grid;place-items:center;flex:none}
.resume .rface img{width:42px;height:42px;object-fit:contain}
.resume .rtxt{flex:1;min-width:0}
.resume .rtxt b{display:block;font-family:var(--round);font-weight:800;font-size:18px;color:var(--deep);line-height:1.15}
.resume .rtxt i{font-style:normal;font-size:15px;color:var(--ink2)}
.resume .rgo{font-family:var(--round);font-weight:800;font-size:26px;color:var(--gold);flex:none}
.resume:active{transform:scale(.985)}


.topiccard .ticon{display:block;font-size:44px;line-height:1.1;margin:10px 0 0}

/* ── a question and its answers ────────────────────────────────────────────
   Study Island, Dino World and the year pages all ask a child a question and
   give them buttons to choose from, so the question furniture lives here
   rather than three times over. States carry meaning: `good` and `bad` after
   a tap, `faded` for an option narrowing has taken off the board, and `nudge`
   for the one to tap once narrowing has run out. */
.why{display:block;margin:9px 0 0;font-size:17px;color:#B3262B}
.why.ok{color:#2E7A38}
.answers{position:relative;z-index:2;display:grid;gap:12px;grid-template-columns:1fr 1fr;margin:16px 0 0}
@media (min-width:700px){.answers{grid-template-columns:repeat(4,1fr)}}
.ans{border:3px solid var(--edge);background:var(--card);border-radius:18px;padding:18px 12px;
  font-family:var(--round);font-weight:800;font-size:clamp(19px,4.4vw,24px);color:var(--deep);
  box-shadow:0 6px 14px #8a6a321f;transition:transform .12s ease,background .2s ease}
.ans:hover:not([disabled]){transform:translateY(-3px);background:#FFFDF2}
.ans[disabled]{cursor:default}
.ans.good{background:#EAF7EA;border-color:var(--t3);color:#1F5B28}
.ans.bad{background:#FBE9E9;border-color:#C0554F;color:#8E2B26}
.ans.faded{opacity:.32;filter:grayscale(1)}
/* and, once narrowing runs out, the one to tap.
   The pulse is a glow, never a transform: a tap target that is still growing
   and shrinking is one a small finger has to chase, and the child this is
   helping is the one least able to chase it. */
.ans.nudge{border-color:var(--t3);background:#F2FBF1;animation:nudge 1.2s ease-in-out infinite}
@keyframes nudge{
  0%,100%{box-shadow:0 0 0 3px #50985833}
  50%{box-shadow:0 0 0 9px #5098584d}
}

/* ── today's three ────────────────────────────────────────────────────────
   Something new on the shelf every morning, without a single new question
   having to be written: the topics rotate by the calendar day. */
.todaybox{position:relative;z-index:2;background:var(--card);border:3px solid var(--edge);
  border-radius:22px;padding:26px 16px 16px;margin:22px 0 8px;box-shadow:0 8px 18px #8a6a3222}
.todaybox .tape{position:absolute;top:-14px;left:50%;transform:translateX(-50%) rotate(-1.4deg)}
.todaysub{text-align:center;font-size:17px;color:var(--ink2);margin:2px 0 14px}
.todayrow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:620px){.todayrow{grid-template-columns:1fr}}
.todaycard{border:3px solid var(--c);background:#FFFDF6;border-radius:18px;padding:14px 8px 10px;
  display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 4px 0 #E3D3B0;--c:#F0B828}
.todaycard .tdicon{font-size:34px;line-height:1}
.todaycard b{font-family:var(--round);font-weight:800;font-size:17px;color:var(--deep);text-align:center;line-height:1.15}
.todaycard i{font-style:normal;font-size:15px;color:var(--gold);letter-spacing:2px}
.todaycard.did{background:#F4F8F2;border-style:dashed}
.todaycard.did i{color:var(--t3);letter-spacing:0;font-family:var(--round);font-weight:700}
.todaycard:active{transform:scale(.97)}

@media (prefers-reduced-motion: reduce){
  .jbit,.jspark,.jpop,.jgift,.flystar{display:none}
  .coach .dyno{animation:none}
  .jstamp span{animation:none}
  .starjar.pulse .jarglass{animation:none}
  .jarfill{transition:none}
  .ans.nudge{animation:none}
}