:root {
  /* colours taken from the wizard-book mascot */
  --sky: #efe6fb;
  --cream: #fff8ec;
  --paper: #ffffff;
  --ink: #352363;
  --night: #2a1c55;
  --muted: #6e5f99;
  --line: #eadff7;
  --lilac: #c2a6e3;   --lilac-l: #f4ecfb;
  --purple: #7f52aa;  --purple-d: #5e3a8a;
  --coral: #ff7aa2;   --coral-d: #d9507b;
  --sun: #ffd65c;     --sun-d: #c9931a;
  --teal: #2ca0a4;    --teal-d: #1f7f83;
  --pink: #ff8fb3;
  --glow: #feeebe;
  --good: #1f7f83;
  --bad: #d9364f;
  --round: "Fredoka", "Baloo 2", system-ui, sans-serif;
  --body: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: linear-gradient(180deg, var(--sky) 0, #f8f2fd 380px, var(--cream) 760px);
  background-repeat: no-repeat; background-color: var(--cream);
  color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; min-height: 100vh;
}
a { color: var(--purple-d); }
.wrap { width: min(100% - 32px, 1000px); margin: 0 auto; }
h1, h2, h3 { font-family: var(--round); font-weight: 600; line-height: 1.1; letter-spacing: -.01em; }

header.top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0 6px; }
.mark { font-family: var(--round); font-size: 1.6rem; font-weight: 600; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: .55rem; }
.mark .dots { display: inline-flex; gap: 4px; }
.mark .dots i { width: 14px; height: 14px; border-radius: 50%; display: block; box-shadow: 0 3px 0 rgba(0,0,0,.12); }
.mark .dots i:nth-child(1) { background: var(--coral); }
.mark .dots i:nth-child(2) { background: var(--sun); transform: translateY(-4px); }
.mark .dots i:nth-child(3) { background: var(--teal); }
.toplink { color: var(--muted); font-size: .9rem; text-decoration: none; font-weight: 700; }
.toplink:hover { color: var(--ink); }

/* ---- buttons & inputs ---- */
.btn {
  font: 600 1.05rem var(--round); color: #fff; background: var(--purple); border: 0;
  border-radius: 999px; padding: 12px 22px; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 5px 0 var(--purple-d); transition: transform .08s, box-shadow .08s;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--purple-d); }
.btn.sun { background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 var(--sun-d); }
.btn.coral { background: var(--coral); box-shadow: 0 5px 0 var(--coral-d); }
.btn.teal { background: var(--teal); box-shadow: 0 5px 0 var(--teal-d); }
.btn.ghost { background: var(--paper); color: var(--ink); box-shadow: 0 4px 0 var(--line); border: 2px solid var(--line); }
.btn.small { padding: 7px 14px; font-size: .9rem; }
.btn.danger { background: var(--paper); color: var(--bad); border: 2px solid #ffd0d0; box-shadow: 0 4px 0 #ffd0d0; }
.btn:disabled { opacity: .5; cursor: default; }
input, select, textarea {
  font: 600 1rem var(--body); color: var(--ink); background: var(--paper); border: 3px solid var(--line);
  border-radius: 16px; padding: 11px 14px; min-width: 0;
}
input::placeholder { color: #a9a3c6; font-weight: 600; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--purple); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; }

/* ---- the room ---- */
.hero { text-align: center; padding: 14px 0 0; }
.hero h1 { font-size: clamp(2.2rem, 6.5vw, 3.8rem); margin: .1em 0 .1em; }
.hero h1 .wave { display: inline-block; color: var(--purple); }
.hero .sub { font-family: var(--round); font-size: clamp(1.2rem, 3.2vw, 1.7rem); color: var(--coral-d); margin: 0; font-weight: 500; }

.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 26px auto 6px; max-width: 760px; }
.slot {
  position: relative; background: var(--paper); border-radius: 24px; padding: 18px 12px 16px; text-align: center;
  border: 3px dashed var(--line); min-height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: transform .2s;
}
.slot .num {
  position: absolute; top: -14px; left: 50%; translate: -50% 0; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font: 600 1.1rem var(--round); box-shadow: 0 3px 0 rgba(0,0,0,.12);
}
.slot:nth-child(1) .num { background: var(--coral); }
.slot:nth-child(2) .num { background: var(--sun); color: var(--ink); }
.slot:nth-child(3) .num { background: var(--teal); }
.slot .what { font: 600 clamp(1.05rem, 2.6vw, 1.35rem) var(--round); }
.slot .what.empty { color: #c4bfdc; font-size: 2rem; }
.slot.filled { border-style: solid; animation: pop .45s cubic-bezier(.3,1.6,.5,1); }
.slot.filled:nth-child(1) { border-color: var(--coral); background: #fff1f1; }
.slot.filled:nth-child(2) { border-color: var(--sun); background: #fff8df; }
.slot.filled:nth-child(3) { border-color: var(--teal); background: #e8fbf8; }
@keyframes pop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }
@media (max-width: 560px) { .slots { gap: 10px; } .slot { min-height: 92px; padding: 16px 6px 10px; border-radius: 18px; } }

.mic-zone { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 0 8px; }
.onair {
  position: relative; width: 170px; height: 170px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--purple); color: #fff; box-shadow: 0 9px 0 var(--purple-d), 0 18px 40px rgba(91,62,224,.35);
  transition: transform .12s, background .2s, box-shadow .2s;
}
.onair:active { transform: translateY(6px); box-shadow: 0 3px 0 var(--purple-d); }
.onair svg { width: 64px; height: 64px; display: block; margin: 0 auto; }
.onair .ring { position: absolute; inset: -14px; border-radius: 50%; border: 6px solid var(--sun); opacity: 0; transform: scale(var(--lvl, 1)); transition: transform .08s, opacity .2s; pointer-events: none; }
.onair[data-state="listening"] { background: var(--teal); box-shadow: 0 9px 0 var(--teal-d), 0 18px 40px rgba(46,196,182,.35); }
.onair[data-state="hearing"] { background: var(--teal); box-shadow: 0 9px 0 var(--teal-d), 0 18px 40px rgba(46,196,182,.35); }
.onair[data-state="hearing"] .ring { opacity: 1; }
.onair[data-state="thinking"] { background: var(--sun); color: var(--ink); box-shadow: 0 9px 0 var(--sun-d); }
.onair[data-state="thinking"] .ring { opacity: .7; border-style: dotted; border-color: var(--purple); animation: spin 2.4s linear infinite; }
.onair[data-state="speaking"] { background: var(--coral); box-shadow: 0 9px 0 var(--coral-d), 0 18px 40px rgba(255,107,107,.35); }
.onair[data-state="speaking"] svg { animation: bob .5s ease-in-out infinite alternate; }
@keyframes spin { to { rotate: 360deg; } }
@keyframes bob { to { transform: scale(1.08); } }
.mic-label { font: 600 1.35rem var(--round); margin: 4px 0 0; text-align: center; }
.mic-label small { display: block; font: 600 .9rem var(--body); color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .onair *, .slot { animation: none !important; } }

.bubble {
  position: relative; background: var(--paper); border-radius: 26px; padding: 16px 22px; max-width: 40rem; width: 100%;
  box-shadow: 0 6px 0 var(--line); text-align: center; min-height: 3.4em;
}
.bubble::before { content: ""; position: absolute; top: -12px; left: 50%; translate: -50% 0; border: 12px solid transparent; border-top: 0; border-bottom-color: var(--paper); }
.said { font: 500 clamp(1.15rem, 3vw, 1.5rem) var(--round); margin: 0; min-height: 1.3em; }
.heard { color: var(--muted); margin: 6px 0 0; min-height: 1.4em; font-weight: 700; font-size: .95rem; }
.heard:not(:empty)::before { content: "You said: "; color: #b3add0; font-weight: 600; }
.opts { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; align-items: center; color: var(--muted); font-size: .92rem; font-weight: 700; }
.opts label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; background: var(--paper); padding: 6px 14px; border-radius: 99px; border: 2px solid var(--line); }
.opts input { width: 18px; height: 18px; accent-color: var(--purple); }
.notice { background: #fff1f1; border: 3px solid #ffd0d0; color: var(--ink); border-radius: 18px; padding: 10px 16px; margin: 10px auto; max-width: 40rem; font-weight: 700; }
.notice[hidden] { display: none; }

.typebox { background: var(--paper); border-radius: 28px; padding: 22px; margin: 18px auto 0; max-width: 760px; box-shadow: 0 6px 0 var(--line); }
.typebox h2 { margin: 0 0 4px; font-size: 1.4rem; text-align: center; }
.typebox .hint { text-align: center; color: var(--muted); margin: 0 0 14px; font-weight: 600; }
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.three input:nth-child(1) { border-color: #ffc6c6; } .three input:nth-child(2) { border-color: #ffe39a; } .three input:nth-child(3) { border-color: #a9ece5; }
@media (max-width: 600px) { .three { grid-template-columns: 1fr; } }
.moods { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0; }
.moods label input { position: absolute; opacity: 0; pointer-events: none; }
.moods label span { display: inline-block; padding: 8px 14px; border-radius: 99px; border: 2px solid var(--line); font-weight: 800; font-size: .92rem; cursor: pointer; background: var(--cream); }
.moods label input:checked + span { background: var(--purple); color: #fff; border-color: var(--purple); }
.moods label input:focus-visible + span { outline: 3px solid var(--purple); outline-offset: 2px; }
.typebox .go { display: flex; justify-content: center; }
.chatline { display: flex; gap: 8px; width: min(100%, 30rem); }
.chatline input { flex: 1; }

/* ---- story factory ---- */
.workshop { background: var(--paper); border-radius: 30px; padding: 24px; margin: 28px 0; box-shadow: 0 8px 0 var(--line); }
.workshop[hidden] { display: none; }
.workshop .head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.workshop h2 { margin: 0; font-size: clamp(1.4rem, 3.5vw, 2rem); }
.workshop .pct { font: 600 1.2rem var(--round); color: var(--purple); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.chip { font-weight: 800; font-size: .88rem; border-radius: 999px; padding: 4px 12px; background: var(--cream); border: 2px solid var(--line); }
.chip:nth-child(1) { background: #fff1f1; border-color: #ffc6c6; } .chip:nth-child(2) { background: #fff8df; border-color: #ffe39a; } .chip:nth-child(3) { background: #e8fbf8; border-color: #a9ece5; }
.chip.plain { background: var(--cream) !important; border-color: var(--line) !important; color: var(--muted); }
.stations { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 18px 0 8px; text-align: center; }
.station .ico { width: 60px; height: 60px; margin: 0 auto 6px; border-radius: 50%; display: grid; place-items: center; font-size: 1.8rem; background: var(--cream); border: 3px solid var(--line); transition: all .3s; }
.station .nm { font-weight: 800; font-size: .82rem; color: var(--muted); }
.station.on .ico { border-color: var(--purple); background: #efeaff; animation: bounce .7s ease-in-out infinite alternate; }
.station.on .nm { color: var(--purple-d); }
.station.done .ico { border-color: var(--teal); background: #e8fbf8; }
@keyframes bounce { to { transform: translateY(-6px); } }
@media (max-width: 560px) { .station .ico { width: 46px; height: 46px; font-size: 1.35rem; } .station .nm { font-size: .7rem; } }
.bar { height: 18px; border-radius: 99px; background: var(--cream); overflow: hidden; margin: 12px 0 6px; border: 3px solid var(--line); }
.bar i { display: block; height: 100%; width: 0; transition: width .6s;
  background: repeating-linear-gradient(-45deg, var(--sun) 0 12px, #ffd86b 12px 24px); }
.stage { color: var(--muted); font-size: .92rem; font-weight: 700; }
.log { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 6px; font-size: .92rem; max-height: 14rem; overflow: auto; }
.log li { padding-left: 22px; position: relative; font-weight: 600; }
.log li::before { content: "★"; position: absolute; left: 0; color: var(--sun-d); }
.thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 4px; }
.thumbs img { height: 92px; border-radius: 14px; border: 4px solid #fff; box-shadow: 0 4px 0 var(--line); }
.thumbs img:nth-child(odd) { rotate: -2deg; } .thumbs img:nth-child(even) { rotate: 2deg; }
.ready { margin-top: 18px; display: flex; gap: 10px; justify-content: center; }
.ready .btn { font-size: 1.35rem; padding: 16px 30px; }

/* ---- shelves ---- */
.shelf h2 { font-size: 1.6rem; margin: 34px 0 14px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.tile { background: var(--paper); border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; box-shadow: 0 6px 0 var(--line); transition: transform .15s; }
.tile:hover { transform: translateY(-3px) rotate(-.5deg); }
.tile .pic { aspect-ratio: 3/2; background-size: cover; background-position: center; }
.tile .meta { padding: 10px 14px 14px; }
.tile .t { font: 600 1.15rem var(--round); }
.tile .s { color: var(--muted); font-size: .85rem; font-weight: 700; }
footer { color: #a39dc0; font-size: .82rem; text-align: center; padding: 40px 0 26px; font-weight: 700; }

/* ---- player ---- */
.story-head { text-align: center; margin: 8px 0 18px; }
.story-head h1 { font-size: clamp(2rem, 6vw, 3.4rem); margin: .2em 0 .15em; }
.story-head .chips { justify-content: center; }
.lede { color: var(--muted); font-weight: 600; max-width: 36rem; margin: 0 auto; }
.stagebox { position: relative; border-radius: 30px; overflow: hidden; aspect-ratio: 3/2; background: #fff; border: 10px solid #fff; box-shadow: 0 10px 0 var(--line), 0 24px 50px rgba(43,35,80,.15); }
.stagebox img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; opacity: 0; transition: opacity 1.2s; }
.stagebox img.on { opacity: 1; }
.stagebox .noimg { position: absolute; inset: 0; border-radius: 20px; background: linear-gradient(135deg, #ffe3f1, #dcd3ff 50%, #c9f3ee); }
.scene-name { position: absolute; top: 14px; left: 14px; font: 600 .95rem var(--round); background: var(--sun); color: var(--ink); padding: 5px 14px; border-radius: 99px; box-shadow: 0 3px 0 var(--sun-d); }
.capbubble { position: relative; background: var(--paper); border-radius: 26px; padding: 16px 22px; margin: 22px auto 0; box-shadow: 0 6px 0 var(--line); min-height: 5em; }
.capbubble::before { content: ""; position: absolute; top: -12px; left: 60px; border: 12px solid transparent; border-top: 0; border-bottom-color: var(--paper); }
.cap .who { font: 600 .95rem var(--round); color: var(--coral-d); }
.cap .txt { font: 500 clamp(1.15rem, 3vw, 1.55rem) var(--round); margin-top: 2px; min-height: 1.3em; }
.controls { display: flex; gap: 14px; align-items: center; margin: 20px 0; }
.controls .play { width: 74px; height: 74px; border-radius: 50%; padding: 0; justify-content: center; font-size: 1.7rem; flex: none; }
.scrub { flex: 1; accent-color: var(--purple); height: 8px; }
.time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .9rem; font-weight: 800; }
@media (max-width: 560px) { .controls { flex-wrap: wrap; } .scrub { order: 3; flex-basis: 100%; } .stagebox { border-width: 6px; border-radius: 22px; } }
.cast { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.castcard { background: var(--paper); border-radius: 22px; padding: 16px; box-shadow: 0 6px 0 var(--line); border: 3px solid transparent; transition: transform .2s, border-color .2s; }
.castcard.talking { border-color: var(--purple); transform: translateY(-4px); }
.castcard .face { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font: 600 1.5rem var(--round); color: #fff; margin-bottom: 8px; box-shadow: 0 4px 0 rgba(0,0,0,.12); }
.castcard .n { font: 600 1.25rem var(--round); }
.castcard .r { color: var(--muted); font-size: .88rem; font-weight: 700; }
.castcard .v { font-size: .85rem; margin: 6px 0 10px; color: #534b7d; }
.tag { font-size: .72rem; font-weight: 800; border-radius: 99px; padding: 2px 9px; background: var(--cream); color: var(--muted); }
.script .sc { margin: 22px 0 8px; font: 600 1.25rem var(--round); }
.script p { margin: 6px 0; padding: 10px 14px; border-radius: 18px; cursor: pointer; background: var(--paper); box-shadow: 0 3px 0 var(--line); max-width: 44rem; }
.script p.now { background: #efeaff; box-shadow: 0 3px 0 #d6ccff; }
.script p b { font-family: var(--round); font-weight: 600; margin-right: 8px; }

/* ---- grown-ups area ---- */
.tabs { display: flex; gap: 6px; border-bottom: 3px solid var(--line); margin-bottom: 20px; flex-wrap: wrap; }
.tabs a { padding: 10px 14px; color: var(--muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -3px; font-weight: 800; }
.tabs a.on { color: var(--ink); border-color: var(--purple); }
.panel { background: var(--paper); border-radius: 22px; padding: 18px; box-shadow: 0 6px 0 var(--line); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 9px 8px; border-bottom: 2px solid var(--line); vertical-align: top; }
th { color: var(--muted); font-weight: 800; }
.form-grid { display: grid; gap: 14px; max-width: 640px; }
.form-grid label { display: grid; gap: 6px; font-size: .92rem; color: var(--muted); font-weight: 800; }
.flash { background: #e8fbf8; border: 3px solid #a9ece5; border-radius: 16px; padding: 10px 14px; margin-bottom: 14px; font-weight: 700; }
pre { white-space: pre-wrap; font-size: .8rem; background: var(--cream); padding: 12px; border-radius: 12px; max-height: 18rem; overflow: auto; }
.pill { font-size: .75rem; font-weight: 800; border-radius: 99px; padding: 2px 9px; background: var(--cream); }
.pill.ready { color: var(--good); background: #e8fbf8; }
.pill.failed { color: var(--bad); background: #fff1f1; }
.pill.working { color: var(--sun-d); background: #fff8df; }

/* ---- costs ---- */
.coststrip { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; justify-content: center;
  background: rgba(255,255,255,.75); border: 2px solid var(--line); border-radius: 18px; padding: 8px 14px;
  margin: 4px auto 0; max-width: 760px; color: var(--muted); text-decoration: none; font-size: .88rem; font-weight: 700; }
.coststrip b { color: var(--ink); font: 600 1rem var(--round); }
.coststrip:hover { border-color: var(--purple); }
.coststrip .ci { font-size: 1.1rem; }
@media (max-width: 560px) { .coststrip .hide-s { display: none; } .coststrip { gap: 4px 10px; font-size: .8rem; } }
.wcost { color: var(--teal-d); }
.costparts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; align-items: center; }
.costparts[hidden] { display: none; }
.costparts span { background: var(--cream); border: 2px solid var(--line); border-radius: 99px; padding: 3px 11px; font-size: .82rem; font-weight: 800; }
.costparts small { color: var(--muted); font-weight: 700; }
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.stat { background: var(--paper); border-radius: 18px; padding: 12px 14px; box-shadow: 0 5px 0 var(--line); }
.stat b { display: block; font: 600 1.5rem var(--round); }
.stat span { color: var(--muted); font-size: .85rem; font-weight: 700; }

/* ---- picture book ---- */
.bookwrap { margin: 6px 0 10px; }
.book { position: relative; margin: 0 auto; perspective: 2000px; }
.book.closed { max-width: 430px; }
.book.closed .spread { display: none; }
.book.open .cover { display: none; }
.cover {
  position: relative; display: block; width: 100%; aspect-ratio: 2/3; padding: 0; border: 0; cursor: pointer;
  border-radius: 6px 22px 22px 6px; overflow: hidden; background: var(--purple);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 12px 14px 0 -2px #fff, 12px 14px 0 0 var(--line), 0 30px 60px rgba(43,35,80,.28);
  transform: rotateY(-8deg) rotateX(2deg); transform-origin: left center; transition: transform .35s;
}
.cover:hover { transform: rotateY(-14deg) rotateX(2deg) scale(1.01); }
.cover:focus-visible { outline: 4px solid var(--sun); outline-offset: 6px; }
.cover img, .cover .nocover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nocover { display: block; background: linear-gradient(160deg, #ffd6d6, #ddd3ff 45%, #c4f1ec); }
.cover .spine { position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; width: 26px;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.18) 40%, rgba(0,0,0,.12) 70%, transparent); }
.cover-title { position: absolute; z-index: 2; left: 0; right: 0; top: 0; padding: 26px 26px 60px 40px; text-align: center;
  background: linear-gradient(rgba(25,15,60,.62), rgba(25,15,60,.25) 70%, transparent); color: #fff; }
.cover-title .t { display: block; font: 600 clamp(1.9rem, 6vw, 2.7rem)/1.02 var(--round); letter-spacing: -.01em;
  text-shadow: 0 3px 0 rgba(0,0,0,.35), 0 0 22px rgba(0,0,0,.35); }
.cover-title .starring { display: block; margin-top: 10px; font: 800 .82rem var(--body); letter-spacing: .02em; opacity: .95; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.cover-foot { position: absolute; z-index: 2; left: 30px; right: 0; bottom: 14px; text-align: center; color: #fff;
  font: 800 .72rem var(--body); letter-spacing: .22em; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.open-hint { position: absolute; z-index: 2; bottom: 44px; left: 50%; translate: -40% 0; background: var(--sun); color: var(--ink);
  font: 600 1.05rem var(--round); padding: 8px 18px; border-radius: 99px; box-shadow: 0 4px 0 var(--sun-d); animation: bounce .8s ease-in-out infinite alternate; }

.spread { display: grid; grid-template-columns: 1fr 1fr; background: #fffdf7; border-radius: 18px; padding: 14px;
  box-shadow: 0 10px 0 var(--line), 0 26px 50px rgba(43,35,80,.18); position: relative; animation: openup .45s ease-out; }
@keyframes openup { from { transform: scale(.94); opacity: 0; } }
.spread::after { content: ""; position: absolute; top: 14px; bottom: 14px; left: 50%; width: 40px; translate: -50% 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(43,35,80,.10) 45%, rgba(43,35,80,.16) 50%, rgba(43,35,80,.10) 55%, transparent); }
.page { position: relative; min-height: 330px; }
.page.left { padding-right: 14px; }
.page.right { padding: 22px 26px 22px 34px; display: flex; flex-direction: column; justify-content: center; }
.pic { position: relative; aspect-ratio: 3/2; border-radius: 12px; overflow: hidden; background: #f3eee2; transform-origin: right center; }
.pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.pic img.on { opacity: 1; }
.pic.turn { animation: turn .7s cubic-bezier(.3,.7,.4,1); }
@keyframes turn { from { transform: rotateY(70deg); filter: brightness(.7); } to { transform: none; } }
.pno { display: block; text-align: center; margin-top: 8px; color: #b1aac9; font: 800 .78rem var(--body); letter-spacing: .08em; text-transform: uppercase; }
.page .scene { font: 800 .78rem var(--body); letter-spacing: .14em; text-transform: uppercase; color: #b1aac9; margin-bottom: 14px; }
.page .prev { color: #b1aac9; font-weight: 700; margin: 0 0 12px; font-size: .95rem; min-height: 1.4em; }
.page .who { font: 600 1.05rem var(--round); }
.page .txt { font: 500 clamp(1.25rem, 2.6vw, 1.75rem)/1.3 var(--round); margin: 4px 0 0; }
.theend { text-align: center; }
.theend[hidden] { display: none; }
.theend .fin { font: 600 2.6rem var(--round); color: var(--purple); margin-bottom: 14px; }
@media (max-width: 760px) {
  .spread { grid-template-columns: 1fr; padding: 10px; }
  .spread::after { display: none; }
  .page.left { padding: 0; }
  .page { min-height: 0; }
  .page.right { padding: 16px 8px 8px; }
  .cover { transform: none; }
}
@media (prefers-reduced-motion: reduce) { .pic.turn, .spread, .open-hint { animation: none !important; } }
.minibook { position: relative; aspect-ratio: 2/3 !important; border-radius: 4px 0 0 0; }
.minibook::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 12px; background: linear-gradient(90deg, rgba(0,0,0,.3), transparent); }
.minibook span { position: absolute; left: 0; right: 0; top: 0; padding: 14px 12px 30px 18px; text-align: center; color: #fff;
  font: 600 1.15rem/1.05 var(--round); background: linear-gradient(rgba(25,15,60,.55), transparent); text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

/* story factory icons */
.station .ico { width: 82px; height: 82px; padding: 0; background: #fff; border: 4px solid var(--line); position: relative;
  overflow: visible; opacity: .55; filter: saturate(.55); transition: opacity .3s, filter .3s, border-color .3s, transform .3s; }
.station .ico img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.station.on .ico, .station.done .ico { opacity: 1; filter: none; }
.station.on .ico { border-color: var(--purple); box-shadow: 0 0 0 6px rgba(123,92,255,.18); }
.station.done .ico { border-color: var(--teal); }
.station.done .ico::after { content: "✓"; position: absolute; right: -6px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal); color: #fff; font: 800 .9rem/26px var(--body); text-align: center; box-shadow: 0 2px 0 var(--teal-d); }
@media (max-width: 560px) { .station .ico { width: 54px; height: 54px; border-width: 3px; } .station.done .ico::after { width: 20px; height: 20px; line-height: 20px; font-size: .72rem; right: -6px; } }
.ready[hidden], .workshop [hidden] { display: none !important; }

/* ---- learn to read ---- */
.read-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.read-head h1 { font-size: clamp(1.5rem, 4vw, 2.2rem); margin: 0; }
.read-meta { display: flex; gap: 10px; align-items: center; }
.pageno, .starbank { background: var(--paper); border-radius: 99px; padding: 6px 14px; font-weight: 800; box-shadow: 0 4px 0 var(--line); }
.starbank b { font: 600 1.1rem var(--round); }
.readbook { display: grid; grid-template-columns: 5fr 6fr; gap: 0; background: #fffdf7; border-radius: 22px; padding: 14px;
  box-shadow: 0 10px 0 var(--line), 0 26px 50px rgba(43,35,80,.16); position: relative; }
.readbook::after { content: ""; position: absolute; top: 14px; bottom: 14px; left: calc(5 / 11 * 100%); width: 36px; translate: -50% 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(43,35,80,.10) 45%, rgba(43,35,80,.15) 50%, rgba(43,35,80,.10) 55%, transparent); }
.readbook.turn .rpic { animation: turn .7s cubic-bezier(.3,.7,.4,1); }
.rpage.pic-side { padding-right: 16px; }
.rpic { border-radius: 14px; overflow: hidden; aspect-ratio: 3/2; background: linear-gradient(135deg, #ffe3f1, #dcd3ff 50%, #c9f3ee); transform-origin: right center; }
.rpic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rpage.word-side { padding: 8px 18px 8px 30px; display: flex; flex-direction: column; min-height: 320px; }
.wbar { height: 10px; border-radius: 99px; background: var(--cream); border: 2px solid var(--line); overflow: hidden; margin-bottom: 14px; }
.wbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--teal), #6fe0b0); transition: width .4s; }
.words { flex: 1; max-height: 340px; overflow-y: auto; scroll-behavior: smooth; }
.rline { font: 500 clamp(1.45rem, 3.2vw, 2rem)/1.55 var(--round); margin-bottom: 8px; }
.rwho { display: inline-block; font: 800 .8rem var(--body); letter-spacing: .06em; text-transform: uppercase; margin-right: 8px; vertical-align: middle; }
.w { cursor: pointer; border-radius: 10px; padding: 0 2px; transition: color .25s, background .25s; color: #3d3566; }
.w:hover { background: #f1edff; }
.w.done { color: var(--teal-d); }
.w.cur { background: #fff1a8; box-shadow: 0 0 0 3px #ffd84d; animation: glow 1.4s ease-in-out infinite; }
.w.wrong { background: #ffe1e1; color: var(--coral-d); box-shadow: 0 0 0 3px var(--coral); animation: none; }
.w.shake { animation: shake .45s; }
.punct { color: #3d3566; }
@keyframes glow { 50% { box-shadow: 0 0 0 6px rgba(255,216,77,.45); } }
@keyframes shake { 0%,100% { transform: none; } 20% { transform: translateX(-6px) rotate(-3deg); } 40% { transform: translateX(6px) rotate(3deg); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } }
.coach { margin-top: 12px; padding: 10px 14px; border-radius: 16px; background: var(--cream); font-weight: 800; color: var(--muted); min-height: 2.8em; }
.coach.yay { background: #e8fbf8; color: var(--teal-d); }
.coach.oops { background: #fff1f1; color: var(--coral-d); }
.coach.help { background: #efeaff; color: var(--purple-d); }
.readctl { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 26px 0 8px; flex-wrap: wrap; }
.onair.small { width: 108px; height: 108px; }
.onair.small svg { width: 44px; height: 44px; }
.onair.checking::after { content: ""; position: absolute; top: 6px; right: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--sun); animation: bob .4s infinite alternate; }
.readbtns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.readtip { text-align: center; color: var(--muted); font-weight: 700; font-size: .88rem; }
@media (max-width: 760px) {
  .readbook { grid-template-columns: 1fr; padding: 10px; }
  .readbook::after { display: none; }
  .rpage.pic-side { padding: 0; }
  .rpage.word-side { padding: 14px 6px 6px; min-height: 0; }
  .words { max-height: none; }
}
/* page complete */
.party { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(43,35,80,.35); padding: 16px; }
.party[hidden] { display: none; }
.party canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.party-card { position: relative; background: #fff; border-radius: 32px; padding: 26px 30px 28px; text-align: center; max-width: 420px; width: 100%;
  box-shadow: 0 12px 0 var(--line), 0 30px 80px rgba(43,35,80,.35); animation: partyin .55s cubic-bezier(.3,1.6,.5,1); }
.party-card h2 { font-size: 2rem; margin: 6px 0 6px; color: var(--purple); }
.party-card p { color: var(--muted); font-weight: 700; margin: 0 0 18px; }
.party-stars { display: flex; justify-content: center; gap: 6px; font-size: 3.4rem; line-height: 1; }
.party-stars span { color: #e6e0f5; transform: scale(.3); opacity: 0; animation: starpop .5s cubic-bezier(.3,1.8,.5,1) forwards; }
.party-stars span.got { color: var(--sun); text-shadow: 0 4px 0 var(--sun-d); }
.party-stars span:nth-child(2) { font-size: 4.2rem; translate: 0 -10px; }
.party-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.party-btns [hidden] { display: none; }
@keyframes partyin { from { transform: scale(.6) rotate(-6deg); opacity: 0; } }
@keyframes starpop { to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .w.cur, .w.shake, .party-card, .party-stars span, .readbook.turn .rpic { animation: none !important; }
  .party-stars span { transform: none; opacity: 1; } }
.readlink { margin: 14px auto 0; display: flex; justify-content: center; }

/* ---- the backstage show ---- */
.show { position: fixed; inset: 0; z-index: 60; background: #07060d; color: #fff; display: grid; place-items: center; overflow: hidden;
  animation: lightsdown .6s ease-out; }
.show[hidden] { display: none; }
.show::before { content: ""; position: absolute; inset: -20%; pointer-events: none;
  background: radial-gradient(circle at 50% 42%, rgba(255,214,120,.16), transparent 42%); }
@keyframes lightsdown { from { background: rgba(7,6,13,0); } }
.show-x { position: absolute; top: 16px; right: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2);
  background: transparent; color: rgba(255,255,255,.6); font-size: 1.1rem; cursor: pointer; }
.show-x:hover { color: #fff; border-color: #fff; }
.show-stage { text-align: center; position: relative; }
.show-stage[hidden], .show-reveal[hidden], .show-fail[hidden] { display: none; }
.show-icon { width: min(46vw, 230px); height: min(46vw, 230px); margin: 0 auto; border-radius: 50%;
  animation: flash 1.6s ease-in-out infinite; }
.show-icon img { width: 100%; height: 100%; border-radius: 50%; display: block; }
.show-icon.pop img { animation: iconpop .5s cubic-bezier(.3,1.7,.5,1); }
@keyframes flash { 0%,100% { box-shadow: 0 0 0 0 rgba(255,201,60,.0), 0 0 40px 6px rgba(255,201,60,.25); transform: scale(1); }
  50% { box-shadow: 0 0 0 14px rgba(255,201,60,.18), 0 0 90px 24px rgba(255,201,60,.45); transform: scale(1.05); } }
@keyframes iconpop { from { transform: scale(.4) rotate(-15deg); opacity: .2; } }
.show-label { margin-top: 30px; font: 600 clamp(1.4rem, 4.5vw, 2.2rem) var(--round); letter-spacing: .01em; animation: blink 1.6s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .55; } }
.show-bar { width: min(70vw, 340px); height: 8px; border-radius: 99px; background: rgba(255,255,255,.12); margin: 22px auto 0; overflow: hidden; }
.show-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--sun), var(--coral)); transition: width .8s; }
.show-sub { position: absolute; left: 50%; bottom: max(7vh, 40px); translate: -50% 0; width: min(92vw, 720px); text-align: center;
  font: 500 clamp(1.1rem, 3vw, 1.6rem)/1.35 var(--round); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.show-sub.on { opacity: 1; transform: none; }
.show-sub b { color: var(--sun); font-weight: 600; }
.show-fail { position: absolute; bottom: 22vh; }
.show-reveal { display: grid; place-items: center; }
.reveal-book { position: relative; width: min(64vw, 340px); aspect-ratio: 2/3; border-radius: 6px 20px 20px 6px; overflow: hidden;
  background: linear-gradient(160deg, var(--coral), var(--purple)); animation: zoomin 1.1s cubic-bezier(.2,1.3,.4,1) both, glowflash 1s .9s ease-in-out infinite; }
.reveal-book img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reveal-book img[hidden] { display: none; }
.reveal-book span { position: absolute; left: 0; right: 0; top: 0; padding: 22px 18px 50px; text-align: center; font: 600 clamp(1.5rem, 5vw, 2.2rem)/1.05 var(--round);
  background: linear-gradient(rgba(25,15,60,.65), transparent); text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.reveal-book::before { content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 18px; background: linear-gradient(90deg, rgba(0,0,0,.4), transparent); }
@keyframes zoomin { from { transform: scale(.05) rotate(-28deg); opacity: 0; } 70% { opacity: 1; } }
@keyframes glowflash { 0%,100% { box-shadow: 0 0 40px 10px rgba(255,201,60,.35); } 50% { box-shadow: 0 0 110px 40px rgba(255,201,60,.75), 0 0 0 6px rgba(255,255,255,.6); } }
.book.arrive .spread { animation: openup .6s ease-out; }
@media (prefers-reduced-motion: reduce) { .show-icon, .show-label, .reveal-book { animation: none !important; } }

.voiceswitch { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; }
.voiceswitch b { font: 600 1.15rem var(--round); }

/* ---- full-screen book (design B): picture fills the screen, pages peel ---- */
.coverbtns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 26px 0 6px; }
body.noscroll { overflow: hidden; }
.viewer { position: fixed; inset: 0; z-index: 80; background: var(--night); overflow: hidden; color: var(--ink); }
.viewer[hidden] { display: none; }
.viewer.arrive { animation: vArrive .7s ease-out; }
@keyframes vArrive { from { opacity: 0; transform: scale(1.04); } }
.v-pics, .v-pics img { position: absolute; inset: 0; width: 100%; height: 100%; }
.v-pics img { object-fit: cover; display: block; }
.v-base:not([src]), .v-peel:not([src]) { visibility: hidden; }
.v-peel { visibility: hidden; z-index: 1; }
.v-peel.fwd { visibility: visible; animation: vPeelF 1s cubic-bezier(.55,.05,.35,1) forwards; }
.v-peel.back { visibility: visible; animation: vPeelB 1s cubic-bezier(.55,.05,.35,1) forwards; }
@keyframes vPeelF { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes vPeelB { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.v-fold { position: absolute; top: -5%; bottom: -5%; width: 150px; visibility: hidden; z-index: 2; pointer-events: none; }
.v-fold.fwd { visibility: visible; animation: vFoldF 1s cubic-bezier(.55,.05,.35,1) forwards;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,250,240,.95) 30%, #e9e2cf 62%, rgba(0,0,0,0)); }
.v-fold.back { visibility: visible; animation: vFoldB 1s cubic-bezier(.55,.05,.35,1) forwards;
  background: linear-gradient(270deg, rgba(0,0,0,.35), rgba(255,250,240,.95) 30%, #e9e2cf 62%, rgba(0,0,0,0)); }
@keyframes vFoldF { from { left: 100%; transform: skewX(-4deg); } to { left: -150px; transform: skewX(4deg); } }
@keyframes vFoldB { from { left: -150px; transform: skewX(4deg); } to { left: 100%; transform: skewX(-4deg); } }
.v-top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; display: flex; align-items: center; gap: 18px;
  padding: max(18px, env(safe-area-inset-top)) 24px 44px; background: linear-gradient(rgba(20,14,50,.55), transparent); }
.v-x { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); background: rgba(0,0,0,.15); color: #fff; font-size: 20px; cursor: pointer; }
.v-segs { flex: 1; display: flex; gap: 8px; max-width: 460px; }
.v-seg { flex: 1; height: 10px; border-radius: 99px; border: 0; padding: 0; background: rgba(255,255,255,.35); overflow: hidden; cursor: pointer; }
.v-seg i { display: block; height: 100%; width: 0; background: var(--sun); }
.v-spacer { flex: 1; }
.v-pageno { color: #fff; font-weight: 800; font-size: .95rem; text-shadow: 0 1px 4px rgba(0,0,0,.5); white-space: nowrap; }
.v-play { height: 48px; padding: 0 18px; border-radius: 99px; border: 0; background: #fff; color: var(--ink); font: 800 .95rem var(--body);
  display: flex; gap: 8px; align-items: center; cursor: pointer; flex: none; box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.v-play.on { background: var(--coral); color: #fff; }
.v-side { position: absolute; top: 50%; translate: 0 -50%; z-index: 5; width: 76px; height: 76px; border-radius: 50%; border: 0;
  background: rgba(255,255,255,.82); color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .15s, background .15s; }
.v-side:hover:not(:disabled) { transform: scale(1.06); background: #fff; }
.v-side:disabled { opacity: 0; pointer-events: none; }
.v-side.prev { left: 24px; } .v-side.next { right: 24px; }
.v-card { position: absolute; z-index: 5; left: max(130px, 12vw); right: max(130px, 12vw); bottom: max(4vh, 24px);
  background: #fffaf0; border-radius: 30px; padding: 22px 36px 28px; box-shadow: 0 10px 0 rgba(43,35,80,.25), 0 30px 60px rgba(0,0,0,.3);
  transition: opacity .25s, transform .25s; }
.v-card[hidden] { display: none; }
.v-card.out { opacity: 0; transform: translateY(12px); }
.v-whorow { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; min-height: 30px; }
.v-av { width: 30px; height: 30px; border-radius: 50%; color: #fff; font: 600 15px var(--round); display: grid; place-items: center; }
.v-av:empty { display: none; }
.v-whorow b { font-weight: 800; font-size: .82rem; letter-spacing: .14em; }
.v-card p { margin: 0; font: 500 clamp(1.3rem, 2.8vw, 2.3rem)/1.38 var(--round); }
.v-end { position: absolute; z-index: 6; left: 50%; top: 50%; translate: -50% -50%; width: min(520px, 90vw); background: #fffaf0; border-radius: 34px;
  padding: 34px 28px; text-align: center; box-shadow: 0 10px 0 rgba(43,35,80,.25), 0 30px 60px rgba(0,0,0,.35); animation: partyin .55s cubic-bezier(.3,1.6,.5,1); }
.v-end[hidden] { display: none; }
.v-end .fin { font: 600 clamp(3rem, 9vw, 4.6rem)/1 var(--round); color: var(--purple); }
.v-stars { font-size: 2.6rem; color: var(--sun); letter-spacing: 6px; margin: 10px 0 18px; text-shadow: 0 3px 0 var(--sun-d); }
.v-endbtns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 760px) {
  .v-side { width: 54px; height: 54px; top: auto; bottom: 46%; }
  .v-side.prev { left: 10px; } .v-side.next { right: 10px; }
  .v-card { left: 12px; right: 12px; padding: 16px 20px 20px; border-radius: 22px; }
  .v-top { gap: 10px; padding: 12px 12px 34px; }
  .v-pageno { display: none; }
  .v-play span { display: none; }
  .v-play { width: 48px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .viewer.arrive, .v-end { animation: none; } }

/* =====================================================================
   1.9 — Magic Library look (colours from the wizard-book mascot)
   ===================================================================== */
.mark .star { width: 34px; height: 34px; fill: var(--sun); stroke: var(--purple); stroke-width: 2.5; stroke-linejoin: round; }
.mark.light { color: #fff; }
.mark.light .star { stroke: #fff3c4; }
.sr { position: absolute; left: -9999px; }
body.noscroll { overflow: hidden; }
body.home { background: var(--cream); }
.float { animation: tt-float 3.4s ease-in-out infinite; }
@keyframes tt-float { 50% { transform: translateY(-14px); } }

.sky { position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(180deg, var(--night) 0%, #4b2f86 55%, var(--purple) 100%); }
.sky-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.sky-art .tw { animation: tt-tw 2.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.sky-art .tw.b { animation-delay: -1.4s; }
@keyframes tt-tw { 50% { opacity: .25; transform: scale(.7); } }
.sky-in { position: relative; width: min(100% - 32px, 1180px); margin: 0 auto; padding-top: 18px; }
.sky-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.sky-links { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.sky-links a { padding: 9px 14px; border-radius: 99px; font-weight: 800; text-decoration: none; color: #e9dcff; }
.sky-links a:hover { color: #fff; }
.sky-links a.pill-w { background: #fff; color: var(--ink); }
.sky-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; padding: 30px 0 140px; }
.sky-copy { flex: 1 1 480px; min-width: 0; }
.kicker { display: inline-block; margin: 0 0 14px; padding: 6px 14px; border-radius: 99px; background: rgba(255,255,255,.12);
  font: 800 .85rem var(--body); letter-spacing: .05em; color: var(--sun); }
.sky h1 { margin: 0; font-size: clamp(2.5rem, 6.2vw, 4.7rem); line-height: 1.02; }
.sky h1 span { color: var(--sun); }
.lede { margin: 16px 0 30px; max-width: 30ch; font: 500 clamp(1.1rem, 2.3vw, 1.45rem)/1.4 var(--round); color: #e9dcff; }
.sky-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cta { font: 600 clamp(1.5rem, 3.4vw, 2.2rem) var(--round); color: var(--ink); background: var(--sun); border: 0; cursor: pointer;
  border-radius: 99px; padding: 22px 42px; text-decoration: none; display: inline-flex; align-items: center; gap: 8px;
  box-shadow: 0 9px 0 var(--sun-d); animation: tt-glow 2.4s ease-in-out infinite; transition: transform .15s; }
.cta:hover { transform: translateY(-3px) scale(1.03); }
.cta:active { transform: translateY(6px); box-shadow: 0 3px 0 var(--sun-d); }
.cta:disabled { opacity: .6; cursor: default; animation: none; }
.cta.small { font-size: 1.3rem; padding: 15px 26px; box-shadow: 0 6px 0 var(--sun-d); animation: none; }
@keyframes tt-glow { 0%,100% { box-shadow: 0 9px 0 var(--sun-d), 0 0 0 0 rgba(255,214,92,.55); } 50% { box-shadow: 0 9px 0 var(--sun-d), 0 0 0 20px rgba(255,214,92,0); } }
.cta-2 { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: 600 1.2rem var(--round); color: #fff; background: rgba(44,160,164,.22); border: 3px solid var(--teal);
  border-radius: 99px; padding: 15px 22px; cursor: pointer; }
.cta-2:hover { background: rgba(44,160,164,.4); }
.sky-mascot { flex: 0 1 380px; position: relative; display: flex; justify-content: center; margin: 0 auto; }
.sky-mascot img { position: relative; height: clamp(260px, 38vw, 420px); width: auto; filter: drop-shadow(0 18px 24px rgba(20,10,50,.45)); }
.halo { position: absolute; width: 340px; height: 340px; top: 30px; border-radius: 50%;
  background: radial-gradient(circle, rgba(254,238,190,.75) 0%, rgba(255,214,92,.25) 45%, rgba(255,214,92,0) 70%);
  animation: tt-halo 3.4s ease-in-out infinite; }
@keyframes tt-halo { 50% { transform: scale(1.06); opacity: .8; } }
.speech { position: absolute; top: 0; right: 0; padding: 11px 15px; border-radius: 20px 20px 4px 20px; background: #fff;
  color: var(--purple); font: 600 1.05rem var(--round); box-shadow: 0 6px 0 var(--pink); }
.home .wrap { width: min(100% - 32px, 1180px); }
.home .coststrip { margin-top: -30px; position: relative; z-index: 2; }
.home .notice { position: relative; z-index: 2; }

.sub2 { margin: 0 0 22px; font: 500 1.2rem var(--round); color: var(--purple); }
.magic { margin-top: 10px; position: relative; text-align: center; }
.magic h2 { margin: 0 0 6px; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.helpers { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.helper { padding: 20px 14px; border-radius: 28px; background: #fff; border: 3px solid var(--line); box-shadow: 0 7px 0 #e0d0f2;
  display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .18s; }
.helper:hover { transform: translateY(-6px); }
.helper .hi { width: 90px; height: 90px; border-radius: 26px; background: var(--lilac-l); display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.helper .hi img { width: 70px; height: 70px; object-fit: contain; }
.helper b { font: 600 1.3rem var(--round); }
.helper span { font-weight: 700; font-size: .92rem; color: var(--purple); }
.helper.t { border-color: #cdeeee; box-shadow: 0 7px 0 #b9e3e4; } .helper.t .hi { background: #e2f5f5; } .helper.t span { color: var(--teal-d); }
.helper.k { border-color: #ffd9e6; box-shadow: 0 7px 0 #ffc4d7; } .helper.k .hi { background: #ffeef4; } .helper.k span { color: #c4497a; }
.helper.g { border-color: #fbe9b0; box-shadow: 0 7px 0 #f3d986; } .helper.g .hi { background: #fff6d6; } .helper.g span { color: #9a700a; }

.talk { margin: 30px auto 10px; max-width: 900px; background: #fff; border-radius: 32px; padding: 22px; border: 3px solid var(--line); box-shadow: 0 8px 0 #e0d0f2; position: relative; z-index: 1; }
.talk-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.talk-head img { width: 70px; height: auto; }
.talk-head div { flex: 1 1 240px; }
.talk-head h2 { margin: 0; font-size: 1.7rem; }
.talk-head p { margin: 2px 0 0; color: var(--muted); font-weight: 700; }

.shelf2 { margin-top: 70px; }
.shelf-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.shelf-head h2 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.shelf-head .sub2 { margin: 4px 0 0; }
.shelf-head .count { padding: 7px 15px; border-radius: 99px; background: var(--lilac-l); font-weight: 800; color: var(--purple); }
.shelf-board { padding: 24px 24px 0; border-radius: 30px; background: var(--lilac-l); overflow: hidden; }
.shelf-row { display: flex; gap: 20px; align-items: flex-end; overflow-x: auto; padding: 10px 2px 0; scrollbar-width: thin; }
.shelf-plank { height: 18px; margin: 0 -24px; background: var(--lilac); }
.sbook { flex: none; width: 150px; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 4px; padding-bottom: 12px; transition: transform .18s; }
.sbook:hover { transform: translateY(-8px) rotate(-1.5deg); }
.sb-cover { display: block; width: 150px; aspect-ratio: 2/3; border-radius: 4px 14px 14px 4px; background-color: var(--spine, var(--purple));
  background-size: cover; background-position: center; box-shadow: inset 9px 0 0 rgba(0,0,0,.18), 0 6px 0 rgba(53,35,99,.12); }
.sb-t { font: 600 1.05rem/1.15 var(--round); }
.sb-s { font-size: .78rem; font-weight: 700; color: var(--muted); }
.sbook.new { height: 225px; margin-bottom: 12px; align-self: flex-start; margin-top: 10px; border-radius: 16px; border: 4px dashed var(--lilac); background: transparent;
  color: var(--purple); font: 600 1.25rem var(--round); cursor: pointer; justify-content: center; align-items: center; }

.readband { margin-top: 70px; padding: 34px clamp(20px, 4vw, 46px); border-radius: 36px; background: var(--teal); color: #fff;
  display: flex; flex-wrap: wrap; gap: 28px; align-items: center; }
.rb-copy { flex: 1 1 380px; min-width: 0; }
.rb-copy h2 { margin: 0 0 8px; font-size: clamp(1.8rem, 4vw, 2.5rem); }
.rb-copy p { margin: 0 0 22px; max-width: 34ch; font: 500 1.2rem/1.4 var(--round); color: #e2fbfb; }
.rb-sample { flex: 1 1 320px; min-width: 0; padding: 20px 24px; border-radius: 26px; background: var(--cream); color: var(--ink);
  font: 600 clamp(1.3rem, 2.8vw, 1.8rem)/1.6 var(--round); }
.rb-sample .ok { background: #d6f2d2; border-radius: 8px; padding: 0 4px; }
.rb-sample .now { background: #ffd9e6; border-radius: 8px; padding: 0 4px; box-shadow: 0 0 0 3px var(--pink); }
.home footer { margin-top: 60px; }

/* ---- create-a-story: full-screen steps ---- */
.maker { position: fixed; inset: 0; z-index: 70; background: var(--cream); display: flex; flex-direction: column; overflow-y: auto;
  animation: mk-pop .35s cubic-bezier(.2,1.3,.4,1); }
.maker[hidden] { display: none; }
.maker button { font-family: var(--body); }
.mk-back { white-space: nowrap; }
@keyframes mk-pop { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: none; } }
.mk-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px clamp(12px, 3vw, 24px); position: relative; z-index: 3; }
.mk-back { padding: 10px 16px; border-radius: 99px; border: 3px solid var(--line); background: #fff; font: 600 1.05rem var(--round); color: var(--ink); cursor: pointer; }
.mk-tr { display: flex; gap: 8px; }
.mk-round { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--line); background: #fff; font: 600 1.2rem var(--round); color: var(--ink); cursor: pointer; }
.mk-dots { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; justify-content: center; }
.mk-dots li { min-width: 42px; height: 42px; padding: 0 11px; border-radius: 99px; display: flex; align-items: center; justify-content: center;
  font: 600 .95rem var(--round); background: #fff; color: #b0a6cf; border: 3px solid var(--line); transition: background .2s; }
.mk-dots li.done { background: var(--teal); border-color: var(--teal); color: #fff; }
.mk-dots li.cur { background: var(--purple); border-color: var(--purple); color: #fff; }
.mk-mascot { position: fixed; left: 14px; bottom: 8px; height: 170px; width: auto; pointer-events: none; z-index: 1; }
.mk-say { position: fixed; left: 128px; bottom: 150px; max-width: 220px; padding: 11px 15px; border-radius: 20px 20px 20px 4px; background: #fff;
  border: 3px solid var(--line); font: 600 1rem var(--round); color: var(--purple); z-index: 1; }
.mk-stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 20px 60px; text-align: center; position: relative; z-index: 2; }
@keyframes mk-in { from { opacity: 0; transform: translateX(70px) rotate(2deg); } to { opacity: 1; transform: none; } }
.mk-step { width: 100%; max-width: 1040px; display: flex; flex-direction: column; align-items: center; }
.mk-step[hidden] { display: none; }
.mk-step h2 { margin: 0 0 6px; font-size: clamp(2rem, 5vw, 3.3rem); }
.mk-hint { margin: 0 0 24px; font: 500 1.3rem var(--round); color: var(--muted); }
.mk-num { width: 120px; height: 120px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center;
  font: 600 70px var(--round); box-shadow: 0 8px 0 rgba(53,35,99,.18); margin-bottom: 18px; animation: tt-float 2.6s ease-in-out infinite; }
.mk-form { display: flex; gap: 12px; width: 100%; max-width: 740px; flex-wrap: wrap; justify-content: center; align-items: center; }
.mk-form input { flex: 1 1 320px; min-width: 0; padding: 18px 22px; border-radius: 24px; border: 4px solid var(--purple); background: #fff;
  font: 600 1.7rem var(--round); color: var(--ink); }
.mk-form input:focus { outline: none; box-shadow: 0 0 0 5px rgba(127,82,170,.2); }
.mk-mic { width: 80px; height: 80px; flex: none; border-radius: 50%; border: 0; background: var(--coral); color: #fff; cursor: pointer;
  box-shadow: 0 7px 0 var(--coral-d); display: flex; align-items: center; justify-content: center; }
.mk-mic svg { width: 36px; height: 36px; }
.mk-mic.on { animation: mk-halo 1.2s ease-in-out infinite; }
@keyframes mk-halo { 0%,100% { box-shadow: 0 0 0 0 rgba(255,122,162,.55), 0 7px 0 var(--coral-d); } 50% { box-shadow: 0 0 0 22px rgba(255,122,162,0), 0 7px 0 var(--coral-d); } }
.mk-heard { min-height: 28px; margin-top: 12px; font-weight: 800; color: var(--coral-d); }
.mk-chips, .mk-edit { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.mk-chip { padding: 10px 16px; border-radius: 99px; border: 3px solid var(--line); background: #fff; font: 700 1rem var(--body); color: var(--ink); cursor: pointer; transition: transform .12s; }
.mk-chip:hover { transform: scale(1.06); }
.mk-chip.surprise { background: var(--purple); border-color: var(--purple); color: #fff; }
.mk-next { margin-top: 30px; padding: 17px 46px; border-radius: 99px; border: 0; background: var(--teal); color: #fff; font: 600 1.7rem var(--round);
  box-shadow: 0 7px 0 var(--teal-d); cursor: pointer; }
.mk-next:disabled { opacity: .4; cursor: default; box-shadow: none; }
.mk-kinds { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.mk-kind { padding: 20px 14px; border-radius: 28px; border: 5px solid transparent; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: transform .15s; background: var(--sun); color: var(--ink); box-shadow: 0 7px 0 var(--sun-d); }
.mk-kind:hover { transform: translateY(-4px) rotate(-1deg); }
.mk-kind[aria-pressed="true"] { border-color: var(--ink); }
.mk-kind .ki { font-size: 50px; line-height: 1; }
.mk-kind b { font: 600 1.6rem var(--round); }
.mk-kind small { font-weight: 700; font-size: .92rem; opacity: .85; }
.k-funny { background: var(--pink); color: #3a1530; box-shadow: 0 7px 0 #e0608c; }
.k-bedtime { background: var(--purple); color: #fff; box-shadow: 0 7px 0 var(--purple-d); }
.k-mystery { background: var(--teal); color: #fff; box-shadow: 0 7px 0 var(--teal-d); }
.k-fairy { background: var(--lilac); color: var(--ink); box-shadow: 0 7px 0 #9a7cc0; }
.k-space { background: var(--night); color: #fff; box-shadow: 0 7px 0 #140c30; }
.k-bedtime[aria-pressed="true"], .k-mystery[aria-pressed="true"], .k-space[aria-pressed="true"] { border-color: var(--sun); }
.mk-styles { width: 100%; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.mk-style { padding: 12px; border-radius: 26px; border: 5px solid transparent; background: #fff; cursor: pointer; box-shadow: 0 7px 0 var(--line);
  display: flex; flex-direction: column; align-items: center; transition: transform .15s; }
.mk-style:hover { transform: translateY(-4px) rotate(-1deg); }
.mk-style[aria-pressed="true"] { border-color: var(--purple); }
.mk-style svg { width: 100%; display: block; border-radius: 16px; }
.mk-style b { margin-top: 10px; font: 600 1.35rem var(--round); color: var(--ink); }
.mk-style small { font-weight: 700; font-size: .9rem; color: var(--muted); }
.mk-tags { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin: 14px 0 20px; }
.mk-tag { padding: 15px 22px; border-radius: 22px; color: #fff; font: 600 1.5rem var(--round); box-shadow: 0 6px 0 rgba(53,35,99,.18); transform: rotate(var(--tilt, 0)); text-shadow: 0 2px 0 rgba(0,0,0,.12); }
.mk-tag:nth-child(2) { color: var(--ink); text-shadow: none; }
.mk-go { margin-top: 34px; font-size: clamp(1.8rem, 4.6vw, 2.8rem); padding: 26px 58px; }
.mk-step .mk-hint#mk-gohint { margin-top: 18px; font-size: 1.1rem; }
.mk-back:focus-visible, .mk-round:focus-visible, .mk-chip:focus-visible, .mk-next:focus-visible, .mk-kind:focus-visible, .mk-style:focus-visible,
.mk-mic:focus-visible, .cta:focus-visible, .cta-2:focus-visible, .sbook:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }
@media (max-width: 700px) {
  .mk-mascot { height: 96px; left: 6px; bottom: 4px; opacity: .95; }
  .mk-say { display: none; }
  .mk-dots { gap: 6px; }
  .mk-dots li { min-width: 0; width: 16px; height: 16px; padding: 0; font-size: 0; border-width: 2px; }
  .mk-back { padding: 9px 13px; font-size: .95rem; }
  .mk-round { width: 42px; height: 42px; }
  .mk-kinds, .mk-styles { grid-template-columns: 1fr 1fr; gap: 12px; }
  .mk-kind { padding: 14px 8px; border-radius: 22px; }
  .mk-kind .ki { font-size: 36px; }
  .mk-kind b { font-size: 1.2rem; }
  .mk-kind small { font-size: .78rem; }
  .mk-style { padding: 8px; border-radius: 20px; }
  .mk-style b { font-size: 1.05rem; margin-top: 6px; }
  .mk-style small { font-size: .75rem; }
  .mk-step h2 { font-size: 1.9rem; }
  .mk-hint { font-size: 1.1rem; margin-bottom: 16px; }
  .mk-num { width: 90px; height: 90px; font-size: 52px; }
  .mk-form { flex-wrap: nowrap; }
  .mk-form input { flex: 1 1 0; font-size: 1.3rem; padding: 14px 16px; }
  .mk-mic { width: 64px; height: 64px; }
  .mk-stage { padding-bottom: 110px; }
  .sky-hero { padding-bottom: 110px; }
  .speech { right: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .float, .halo, .cta, .sky-art .tw, .mk-num, .mk-mic.on, .maker { animation: none; }
}
details.edit { display: inline-block; vertical-align: top; }
details.edit summary { list-style: none; cursor: pointer; }
details.edit summary::-webkit-details-marker { display: none; }
.editform { display: grid; gap: 8px; margin-top: 8px; min-width: 260px; white-space: normal; }
.editform label { display: grid; gap: 2px; font-weight: 700; font-size: .85rem; }
.editform input { padding: 8px 10px; border-radius: 10px; border: 2px solid var(--line); font: inherit; }
.sb-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.sb-cover { overflow: hidden; position: relative; }
.sb-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 9px 0 0 rgba(0,0,0,.18); pointer-events: none; }
.whofor { margin: -14px 0 26px; font-weight: 800; color: var(--sun); font-size: 1.05rem; }
.grownups { margin-top: 70px; padding: 30px clamp(18px, 4vw, 40px); border-radius: 32px; background: #fff; border: 3px solid var(--line); box-shadow: 0 8px 0 #e0d0f2; }
.grownups h2 { margin: 0 0 16px; font-size: clamp(1.7rem, 3.6vw, 2.3rem); }
.gu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 26px; }
.gu-grid b { font: 600 1.2rem var(--round); color: var(--purple); }
.gu-grid p { margin: 4px 0 0; color: var(--muted); font-weight: 700; font-size: .95rem; line-height: 1.5; }
.gu-price { margin: 18px 0 0; padding: 12px 16px; border-radius: 16px; background: var(--glow); font-weight: 800; }

/* phone header: one tidy row, mascot up top */
@media (max-width: 700px) {
  .sky-in { padding-top: 12px; }
  .sky-nav { flex-wrap: nowrap; gap: 8px; }
  .sky-nav .mark { font-size: 1.3rem; gap: .4rem; white-space: nowrap; }
  .sky-nav .mark .star { width: 28px; height: 28px; }
  .sky-links { flex-wrap: nowrap; gap: 0; }
  .sky-links a:not(.pill-w) { display: none; }
  .sky-links a.pill-w { padding: 7px 13px; font-size: .9rem; }
  .sky-hero { display: grid; grid-template-columns: 1fr; gap: 0; padding-top: 6px; }
  .sky-mascot { order: -1; flex: none; margin: 0 auto -6px; }
  .sky-mascot img { height: 230px; }
  .halo { width: 230px; height: 230px; top: 6px; }
  .speech { top: 34px; right: 4px; left: auto; max-width: 112px; font-size: .88rem; line-height: 1.2; padding: 8px 10px; border-radius: 16px 16px 16px 4px; }
  .kicker { font-size: .72rem; margin-bottom: 10px; }
  .sky h1 { font-size: 2.35rem; }
  .lede { margin: 12px 0 20px; font-size: 1.1rem; }
  .whofor { margin: -8px 0 20px; font-size: .95rem; }
  .sky-ctas .cta { width: 100%; justify-content: center; }
  .sky-ctas .cta-2 { width: 100%; }
}
@media (max-width: 340px) { .speech { display: none; } }

/* ---- pricing & accounts ---- */
.allow { margin: 14px 0 0; font-weight: 800; color: var(--sun); }
.allow.out { color: #ffc4d7; }
.pricing-band { margin-top: 70px; padding: 30px clamp(18px, 4vw, 40px); border-radius: 32px; background: var(--night); color: #fff; text-align: center; }
.pricing-band h2 { margin: 0 0 18px; font-size: clamp(1.8rem, 4vw, 2.5rem); }
.mini-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; max-width: 760px; margin: 0 auto 22px; }
.mini { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 24px; background: rgba(255,255,255,.08); border: 3px solid rgba(255,255,255,.14); }
.mini.best { border-color: var(--sun); background: rgba(255,214,92,.1); }
.mini b { font: 600 1.3rem var(--round); }
.mini .amt { font: 600 2.4rem var(--round); color: var(--sun); line-height: 1.1; }
.mini .amt small { font-size: 1rem; color: #e9dcff; }
.mini span:last-child { color: #e9dcff; font-weight: 700; }
.price-hero { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 20px 0 26px; }
.price-hero img { width: 90px; height: auto; }
.price-hero h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 3.2rem); }
.price-hero p { margin: 4px 0 0; color: var(--muted); font-weight: 700; max-width: 46ch; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 20px; }
.plancard { position: relative; padding: 26px; border-radius: 30px; background: #fff; border: 3px solid var(--line); box-shadow: 0 8px 0 #e0d0f2; display: flex; flex-direction: column; }
.plancard.best { border-color: var(--purple); box-shadow: 0 8px 0 var(--purple-d); }
.plancard .tag { position: absolute; top: -14px; right: 20px; background: var(--sun); color: var(--ink); font-weight: 800; font-size: .85rem; padding: 5px 12px; border-radius: 99px; }
.plancard h2 { margin: 0; font-size: 1.6rem; }
.plancard .amount { margin: 6px 0 0; font: 600 3rem var(--round); color: var(--purple); line-height: 1.1; }
.plancard .amount small { font-size: 1.1rem; color: var(--muted); }
.plancard .per { margin: 4px 0 14px; font-weight: 800; color: var(--teal-d); }
.plancard ul { margin: 0 0 22px; padding-left: 1.2em; flex: 1; display: grid; gap: 6px; font-weight: 700; color: var(--ink); }
.plancard form { margin: 0; }
.btn.big { font-size: 1.25rem; padding: 15px 26px; }
.fine { margin: 10px 0 0; font-size: .85rem; color: var(--muted); font-weight: 700; }
.faq { margin-top: 44px; max-width: 760px; }
.faq h2 { font-size: 1.6rem; }
.faq details { background: #fff; border: 3px solid var(--line); border-radius: 18px; padding: 12px 16px; margin-bottom: 10px; }
.faq summary { font: 600 1.1rem var(--round); cursor: pointer; }
.faq p { margin: 8px 0 0; color: var(--muted); font-weight: 700; }
.auth { max-width: 460px; margin: 20px auto 0; background: #fff; border: 3px solid var(--line); border-radius: 30px; padding: 26px; box-shadow: 0 8px 0 #e0d0f2; text-align: center; }
.auth img { width: 80px; height: auto; }
.auth h1 { margin: 6px 0 4px; font-size: 2rem; }
.auth .lead { margin: 0 0 14px; color: var(--muted); font-weight: 700; }
.authform { display: grid; gap: 6px; text-align: left; margin-top: 10px; }
.authform label { font-weight: 800; font-size: .95rem; margin-top: 6px; }
.authform input[type=email], .authform input[type=password] { padding: 13px 15px; border-radius: 14px; border: 3px solid var(--line); font: 700 1.05rem var(--body); color: var(--ink); background: #fff; }
.authform input:focus { outline: none; border-color: var(--purple); }
.authform .check { display: flex; gap: 8px; align-items: flex-start; font-weight: 700; margin: 10px 0; }
.authform .btn { justify-content: center; margin-top: 8px; }
.swap { margin: 16px 0 0; font-weight: 700; }
.acct { max-width: 760px; margin: 20px auto 0; }
.acct h1 { margin: 0; font-size: 2.2rem; }
.acct-email { margin: 2px 0 16px; color: var(--muted); font-weight: 800; }
.acct-plan { display: flex; flex-direction: column; gap: 2px; padding: 18px 20px; border-radius: 22px; background: #fff; border: 3px solid var(--line); }
.acct-plan b { font: 600 1.4rem var(--round); color: var(--purple); }
.acct-plan.out { border-color: #ffd0de; }
.acct-plan small { color: var(--muted); font-weight: 700; }
.acct-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 26px; }
.acct-actions form { margin: 0; }
.acct-stories { list-style: none; padding: 0; display: grid; gap: 8px; }
.acct-stories li { background: #fff; border-radius: 14px; padding: 10px 14px; border: 2px solid var(--line); font-weight: 700; }
.acct-stories li span { color: var(--muted); font-size: .85rem; }
.acct-pw { margin-top: 24px; }
.acct-pw summary { cursor: pointer; font-weight: 800; color: var(--purple); }
.mk-pay { margin-top: 24px; padding: 22px; border-radius: 26px; background: #fff; border: 3px solid var(--line); max-width: 560px; }
.mk-pay[hidden] { display: none; }
.mk-pay > p:first-child { margin: 0 0 14px; font: 600 1.3rem var(--round); }
.mk-paybtns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; align-items: center; }
.mk-paybtns[hidden] { display: none; }
.mk-paybtns form { margin: 0; }
.mk-paybtns .mk-chip { text-decoration: none; }
.mk-payfine { margin: 14px 0 0; color: var(--muted); font-weight: 700; font-size: .9rem; }
.toplinks { display: flex; gap: 14px; }
.setup { line-height: 1.7; } .setup code { background: var(--lilac-l); padding: 1px 6px; border-radius: 6px; font-size: .85em; word-break: break-all; }
.mk-go[hidden], .mk-step .mk-hint[hidden] { display: none; }
.home .flash { position: relative; z-index: 2; max-width: 40rem; margin: 10px auto; }

/* ---- fun step changes in the story maker ---- */
.mk-stage { overflow: visible; }
.mk-ghost { position: absolute; margin: 0; pointer-events: none; z-index: 3; }
.mk-fx { position: fixed; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.mk-fx span { position: absolute; transform: translate(-50%, -50%); animation: mk-star .95s cubic-bezier(.15,.8,.3,1) forwards; text-shadow: 0 2px 0 rgba(53,35,99,.15); }
@keyframes mk-star {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(0); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1) rotate(var(--rot)); opacity: 0; }
}
/* out */
.out-poof { animation: o-poof .45s ease-in forwards; }
@keyframes o-poof { 40% { transform: scale(1.08); } 100% { transform: scale(.2) rotate(-12deg); opacity: 0; filter: blur(6px); } }
.out-left { animation: o-left .5s cubic-bezier(.6,-0.3,.7,.4) forwards; }
@keyframes o-left { 100% { transform: translateX(-110vw) rotate(-14deg); } }
.out-right { animation: o-right .5s cubic-bezier(.6,-0.3,.7,.4) forwards; }
@keyframes o-right { 100% { transform: translateX(110vw) rotate(14deg); } }
.out-spin { animation: o-spin .55s ease-in forwards; }
@keyframes o-spin { 100% { transform: rotate(540deg) scale(0); opacity: 0; } }
.out-up { animation: o-up .5s cubic-bezier(.6,-0.4,.7,.4) forwards; }
@keyframes o-up { 100% { transform: translateY(-110vh) rotate(6deg); } }
.out-flip { animation: o-flip .45s ease-in forwards; transform-origin: 50% 50%; }
@keyframes o-flip { 100% { transform: perspective(900px) rotateY(90deg); opacity: .2; } }
.out-shrink { animation: o-shrink .45s ease-in forwards; }
@keyframes o-shrink { 100% { transform: scale(0) translateY(40vh); opacity: 0; } }
/* in */
.in-pop { animation: i-pop .6s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes i-pop { 0% { transform: scale(.3); opacity: 0; } 100% { transform: none; opacity: 1; } }
.in-swoop { animation: i-swoop .7s cubic-bezier(.2,1.25,.35,1) .08s both; }
@keyframes i-swoop { 0% { transform: translateX(110vw) rotate(18deg); } 100% { transform: none; } }
.in-spin { animation: i-spin .75s cubic-bezier(.2,1.3,.4,1) .1s both; }
@keyframes i-spin { 0% { transform: rotate(-400deg) scale(0); opacity: 0; } 100% { transform: none; opacity: 1; } }
.in-drop { animation: i-drop .85s cubic-bezier(.3,1.6,.5,1) .1s both; }
@keyframes i-drop { 0% { transform: translateY(-110vh); } 60% { transform: translateY(18px) scaleY(.94); } 100% { transform: none; } }
.in-flip { animation: i-flip .6s cubic-bezier(.2,1.3,.4,1) .25s both; }
@keyframes i-flip { 0% { transform: perspective(900px) rotateY(-90deg); opacity: .2; } 100% { transform: none; opacity: 1; } }
.in-zoom { animation: i-zoom .8s cubic-bezier(.2,1.5,.4,1) .1s both; }
@keyframes i-zoom { 0% { transform: scale(2.2); opacity: 0; filter: blur(10px); } 100% { transform: none; opacity: 1; filter: none; } }
.in-back { animation: i-back .6s cubic-bezier(.2,1.25,.35,1) .05s both; }
@keyframes i-back { 0% { transform: translateX(-110vw) rotate(-14deg); } 100% { transform: none; } }
.mk-dots li.boing { animation: dot-boing .6s cubic-bezier(.2,1.8,.4,1); }
@keyframes dot-boing { 0% { transform: scale(.4); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .mk-ghost, .mk-fx { display: none; }
  .mk-step[class*="in-"], .mk-dots li.boing { animation: mk-fade .3s ease both; }
}
@keyframes mk-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- going from page to page: a magic swirl (browsers that support it) ---- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out .32s ease-in both; }
::view-transition-new(root) { animation: vt-in .5s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes vt-out { to { opacity: 0; transform: scale(.92) rotate(-2deg); filter: blur(4px); } }
@keyframes vt-in { from { opacity: 0; transform: scale(1.08) rotate(2deg); clip-path: circle(0% at 50% 40%); } to { opacity: 1; transform: none; clip-path: circle(150% at 50% 40%); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* ---- reading caption: no box, just big chunky outlined words over the picture ---- */
.v-card { background: none; box-shadow: none; border-radius: 0; padding: 0 8px; text-align: center; bottom: max(5vh, 28px); }
.v-card::before { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 42vh; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgba(26,16,56,.55), rgba(26,16,56,0)); }
.v-whorow { justify-content: center; margin-bottom: 4px; }
.v-whorow b { font: 600 clamp(1rem, 1.8vw, 1.35rem) var(--round); letter-spacing: .1em;
  -webkit-text-stroke: 5px #1a1038; paint-order: stroke fill; text-shadow: 0 3px 0 #1a1038; }
.v-av { box-shadow: 0 0 0 3px #1a1038; }
.v-card p { color: #fff; font: 600 clamp(1.6rem, 3.6vw, 3rem)/1.3 var(--round); letter-spacing: .01em; text-wrap: balance;
  -webkit-text-stroke: 9px #1a1038; paint-order: stroke fill;
  text-shadow: 0 5px 0 #1a1038, 0 10px 24px rgba(0,0,0,.45); }
@media (max-width: 700px) {
  .v-card { left: 8px; right: 8px; padding: 0 4px; }
  .v-card p { font-size: 1.5rem; -webkit-text-stroke-width: 7px; }
}

/* ---- full screen on phones ---- */
.a2hs { position: fixed; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 120;
  background: #fff; color: var(--ink); border-radius: 18px; padding: 12px 44px 12px 14px; font-weight: 700; font-size: .95rem;
  box-shadow: 0 6px 0 rgba(0,0,0,.2), 0 18px 40px rgba(0,0,0,.35); animation: partyin .45s cubic-bezier(.3,1.6,.5,1); }
.a2hs button { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--lilac-l); color: var(--ink); font-weight: 800; cursor: pointer; }
.viewer, .maker, .show { height: 100dvh; }
.v-top { padding-top: max(14px, env(safe-area-inset-top, 0px)); }
.mk-top { padding-top: max(16px, env(safe-area-inset-top, 0px)); }
.show-x { top: max(16px, calc(env(safe-area-inset-top, 0px) + 6px)); }
.v-card { bottom: max(5vh, calc(28px + env(safe-area-inset-bottom, 0px))); }
.sky-in { padding-top: max(18px, env(safe-area-inset-top, 0px)); }
.acct-child { margin: 16px 0 0; padding: 18px 20px; border-radius: 22px; background: #fff; border: 3px solid var(--line); display: grid; gap: 12px; }
.acct-child label > b { display: block; font: 600 1.3rem var(--round); color: var(--ink); }
.acct-child label > span { color: var(--muted); font-weight: 700; font-size: .95rem; }
.agepick { display: flex; flex-wrap: wrap; gap: 8px; }
.agechip input { position: absolute; opacity: 0; pointer-events: none; }
.agechip span { display: inline-grid; place-items: center; min-width: 48px; height: 48px; padding: 0 12px; border-radius: 99px; border: 3px solid var(--line);
  background: var(--lilac-l); font: 600 1.25rem var(--round); color: var(--purple); cursor: pointer; transition: transform .12s; }
.agechip.any span { font-size: .95rem; }
.agechip input:checked + span { background: var(--purple); border-color: var(--purple); color: #fff; transform: scale(1.08); }
.agechip input:focus-visible + span { outline: 4px solid var(--sun); outline-offset: 2px; }
.namerow { display: flex; gap: 10px; flex-wrap: wrap; }
.namerow input { flex: 1 1 200px; min-width: 0; padding: 12px 14px; border-radius: 14px; border: 3px solid var(--line); font: 700 1.1rem var(--body); color: var(--ink); }
.namerow input:focus { outline: none; border-color: var(--purple); }
/* phone keyboard open in the story maker: everything fits above it */
.maker.typing { height: var(--vvh, 100dvh); bottom: auto; }
.maker.typing .mk-stage { justify-content: flex-start; padding-top: 0; padding-bottom: 16px; }
.maker.typing .mk-num { width: 56px; height: 56px; font-size: 32px; margin-bottom: 6px; animation: none; }
.maker.typing .mk-step h2 { font-size: 1.5rem; }
.maker.typing .mk-hint, .maker.typing .mk-chips, .maker.typing .mk-mascot, .maker.typing .mk-say, .maker.typing .mk-dots { display: none; }
.maker.typing .mk-next { margin-top: 12px; padding: 12px 34px; font-size: 1.35rem; }
.maker.typing .mk-top { padding-top: 8px; padding-bottom: 4px; }

/* ---- the crystal ball: find a story ---- */
body.findpage { background: var(--night); }
.findpage .wrap { display: none; }
.ball-scene { min-height: 100dvh; box-sizing: border-box; padding: max(18px, env(safe-area-inset-top, 0px)) 16px 40px; color: #fff; text-align: center;
  background: linear-gradient(180deg, var(--night), #4b2f86 60%, var(--purple)); overflow: hidden; }
.ball-nav { max-width: 1180px; margin: 0 auto; text-align: left; }
.ball-scene h1 { margin: 18px 0 0; font-size: clamp(2rem, 5vw, 3rem); }
.ball-lede { margin: 6px 0 0; color: #e9dcff; font: 500 1.2rem var(--round); }
.ball-stage { position: relative; width: min(100%, 1100px); margin: 8px auto 0; }
.ball-wrap { width: min(400px, 78vw); margin: 0 auto; }
.ball { width: 100%; display: block; }
.ball-glow { animation: ball-glow 2.4s ease-in-out infinite; }
@keyframes ball-glow { 50% { opacity: .55; } }
.swirl { animation: ball-spin 7s linear infinite; transform-origin: 200px 200px; }
.swirl.fast { animation-duration: 1.1s; }
@keyframes ball-spin { to { transform: rotate(360deg); } }
.ball-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 14px; margin: 18px auto 0; max-width: 760px; justify-items: center; }
.ball-results.around { position: absolute; inset: 0; display: block; margin: 0; max-width: none; pointer-events: none; }
.ball-results.around .ball-book { position: absolute; pointer-events: auto; }
.ball-book { width: 150px; text-decoration: none; color: #fff; text-align: left; animation: ball-fly .65s cubic-bezier(.2,1.4,.4,1) both; transition: transform .15s; }
.ball-book:hover { transform: translateY(-6px) rotate(-2deg); }
@keyframes ball-fly { from { transform: translate(var(--fx, 0), 140px) scale(.2); opacity: 0; } }
.bb-cover { position: relative; display: flex; flex-direction: column; justify-content: space-between; aspect-ratio: 2/3; border-radius: 4px 14px 14px 4px; overflow: hidden;
  background: linear-gradient(160deg, var(--lilac), var(--purple) 55%, #3b2370); padding: 12px 10px 10px 16px; box-sizing: border-box;
  box-shadow: inset 8px 0 0 rgba(0,0,0,.2), 0 10px 24px rgba(0,0,0,.35); }
.bb-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bb-cover img + .bb-title { display: none; }
.bb-title { position: relative; font: 600 1rem/1.1 var(--round); }
.bb-icon { position: relative; font-size: 28px; text-align: right; }
.bb-meta { display: block; margin-top: 6px; font-weight: 800; font-size: .78rem; color: var(--sun); }
.bb-cover img ~ .bb-icon { position: absolute; right: 8px; bottom: 6px; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.ball-ask { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 680px; margin: 22px auto 0; }
.ball-ask input { flex: 1 1 260px; min-width: 0; padding: 15px 22px; border-radius: 99px; border: 3px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1);
  color: #fff; font: 600 1.2rem var(--round); }
.ball-ask input::placeholder { color: #d9c8f5; }
.ball-ask input:focus { outline: none; border-color: var(--sun); }
.ball-mic { width: 58px; height: 58px; flex: none; border-radius: 50%; border: 0; background: var(--coral); color: #fff; cursor: pointer; box-shadow: 0 5px 0 var(--coral-d); display: grid; place-items: center; }
.ball-mic svg { width: 28px; height: 28px; }
.ball-mic.on { animation: mk-halo 1.2s ease-in-out infinite; }
.ball-chips { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.ball-chip { padding: 9px 15px; border-radius: 99px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: #fff; font: 800 .95rem var(--body); cursor: pointer; }
.ball-chip.surprise { background: var(--sun); color: var(--ink); border-color: var(--sun); }
.ball-note { margin: 14px 0 0; color: #ffd9e6; font-weight: 800; min-height: 1.4em; }
.ball-chip:focus-visible, .ball-mic:focus-visible, .ball-book:focus-visible { outline: 4px solid var(--sun); outline-offset: 3px; }
@media (min-width: 900px) { .ball-stage { height: 520px; } }
@media (prefers-reduced-motion: reduce) { .swirl, .ball-glow, .ball-book { animation: none; } }

/* ---- "turn me sideways" on the book ---- */
.v-turn { position: absolute; z-index: 8; left: 50%; top: calc(70px + env(safe-area-inset-top, 0px)); translate: -50% 0; width: min(92vw, 360px);
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 22px; background: #fff; color: var(--ink); text-align: left;
  font-weight: 700; font-size: .95rem; box-shadow: 0 6px 0 rgba(0,0,0,.2), 0 18px 40px rgba(0,0,0,.35); animation: partyin .45s cubic-bezier(.3,1.6,.5,1);
  flex-wrap: wrap; }
.v-turn[hidden] { display: none; }
.v-turn b { display: block; font: 600 1.15rem var(--round); color: var(--purple); }
.v-turn span:nth-child(2) { flex: 1 1 180px; }
.v-turn-phone { color: var(--purple); flex: none; animation: turnphone 2s ease-in-out infinite; display: grid; }
@keyframes turnphone { 0%, 30% { transform: rotate(0); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
.v-turn button { border: 0; background: var(--lilac-l); color: var(--purple); font: 800 .85rem var(--body); padding: 8px 12px; border-radius: 99px; cursor: pointer; margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .v-turn-phone { animation: none; } }

/* ---- phones turned sideways (short, wide screens) ---- */
@media (orientation: landscape) and (max-height: 520px) {
  /* the book */
  .v-top { padding: max(8px, env(safe-area-inset-top, 0px)) max(14px, env(safe-area-inset-right, 0px)) 18px max(14px, env(safe-area-inset-left, 0px)); gap: 10px; }
  .v-x { width: 40px; height: 40px; }
  .v-play { padding: 8px 14px; }
  .v-side { width: 48px; height: 48px; top: 50%; bottom: auto; }
  .v-side.prev { left: max(10px, env(safe-area-inset-left, 0px)); } .v-side.next { right: max(10px, env(safe-area-inset-right, 0px)); }
  .v-card { left: 76px; right: 76px; bottom: max(10px, env(safe-area-inset-bottom, 0px)); }
  .v-card p { font-size: clamp(1.05rem, 3.4vh, 1.5rem); line-height: 1.22; -webkit-text-stroke-width: 6px; }
  .v-whorow { margin-bottom: 0; min-height: 22px; }
  .v-whorow b { font-size: .85rem; -webkit-text-stroke-width: 4px; }
  .v-av { width: 22px; height: 22px; font-size: 12px; }
  .v-card::before { height: 50vh; }
  .v-end { padding: 18px; width: min(460px, 80vw); }
  .v-end .fin { font-size: 2.4rem; }
  .v-stars { font-size: 1.8rem; margin: 4px 0 10px; }
  /* the story maker */
  .mk-top { padding-top: max(6px, env(safe-area-inset-top, 0px)); padding-bottom: 2px; }
  .mk-mascot, .mk-say { display: none; }
  .mk-stage { justify-content: flex-start; padding: 0 max(16px, env(safe-area-inset-right, 0px)) 14px max(16px, env(safe-area-inset-left, 0px)); }
  .mk-num { width: 48px; height: 48px; font-size: 28px; margin-bottom: 4px; }
  .mk-step h2 { font-size: 1.5rem; }
  .mk-hint { font-size: .95rem; margin-bottom: 10px; }
  .mk-form input { font-size: 1.15rem; padding: 10px 14px; }
  .mk-mic { width: 54px; height: 54px; }
  .mk-heard { min-height: 18px; margin-top: 6px; font-size: .9rem; }
  .mk-chip { padding: 7px 12px; font-size: .9rem; }
  .mk-next { margin-top: 12px; padding: 10px 32px; font-size: 1.3rem; }
  .mk-kinds { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .mk-kind { padding: 8px 6px; border-radius: 18px; flex-direction: row; justify-content: center; gap: 8px; }
  .mk-kind .ki { font-size: 28px; } .mk-kind b { font-size: 1.1rem; } .mk-kind small { display: none; }
  .mk-styles { grid-template-columns: repeat(6, 1fr); gap: 8px; }
  .mk-style { padding: 6px; border-radius: 16px; } .mk-style b { font-size: .85rem; margin-top: 4px; } .mk-style small { display: none; }
  .mk-tags { margin: 6px 0 8px; } .mk-tag { font-size: 1.1rem; padding: 10px 14px; }
  .mk-go { margin-top: 14px; padding: 14px 40px; font-size: 1.6rem; }
  /* the backstage show */
  .show-icon { width: min(34vh, 160px); height: min(34vh, 160px); }
  .show-label { font-size: 1.3rem; }
  /* home hero: wizard beside the words */
  .sky-hero { display: flex; flex-wrap: nowrap; padding-bottom: 90px; }
  .sky-mascot { order: 0; flex: 0 0 auto; }
  .sky-mascot img { height: 220px; }
  .halo { width: 220px; height: 220px; }
  .sky-links a:not(.pill-w) { display: inline-block; }
}

/* ---- My books: a tidy grid (no sideways scrolling) ---- */
.mybooks { margin-top: 70px; }
.mybooks .count { padding: 8px 16px; border-radius: 99px; background: var(--lilac-l); font-weight: 800; color: var(--purple); text-decoration: none; }
.bookgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 26px 20px; padding: 24px; border-radius: 30px;
  background: var(--lilac-l); }
.bookgrid.big { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.gbook { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-align: left; font: inherit; }
.gb-cover { position: relative; display: grid; place-items: center; aspect-ratio: 2/3; width: 100%; border-radius: 4px 14px 14px 4px; overflow: hidden;
  background: linear-gradient(160deg, #fff 0%, var(--spine, var(--purple)) 70%); box-shadow: 0 8px 0 rgba(53,35,99,.12), 0 14px 24px rgba(53,35,99,.12);
  transition: transform .18s; }
.gb-cover::after { content: ""; position: absolute; inset: 0; box-shadow: inset 8px 0 0 rgba(0,0,0,.16); pointer-events: none; }
.gbook:hover .gb-cover { transform: translateY(-6px) rotate(-1.5deg); }
.gb-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gb-plain { padding: 14px; font: 600 1.05rem/1.15 var(--round); color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.25); }
.gb-badge { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 18px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.gb-state { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 5px 8px; border-radius: 99px; background: rgba(255,255,255,.92); font: 800 .75rem var(--body); color: var(--purple); text-align: center; }
.gb-state.bad { color: var(--bad); }
.gb-t { font: 600 1.05rem/1.2 var(--round); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.4em; }
.gnew .gb-cover { background: transparent; border: 4px dashed var(--lilac); box-shadow: none; color: var(--purple); font: 600 3rem var(--round); }
.gnew .gb-cover::after { display: none; }
.gbook:focus-visible .gb-cover { outline: 4px solid var(--sun); outline-offset: 3px; }
.mb-empty { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 24px; border-radius: 30px; background: var(--lilac-l); }
.mb-empty img { width: 70px; height: auto; }
.mb-empty b { font: 600 1.4rem var(--round); }
.mb-empty p { margin: 4px 0 12px; color: var(--muted); font-weight: 700; }
.books-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 8px 0 18px; }
.books-head h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 3rem); }
.books-head p { margin: 4px 0 0; max-width: 56ch; color: var(--muted); font-weight: 700; }
.books-note { margin: 0 0 14px; padding: 10px 14px; border-radius: 14px; background: var(--glow); font-weight: 700; }
.gbook-wrap { display: flex; flex-direction: column; gap: 8px; }
.pubform { margin: 0; }
.pubbtn { width: 100%; padding: 8px 10px; border-radius: 99px; border: 3px solid var(--line); background: #fff; color: var(--purple); font: 800 .9rem var(--body); cursor: pointer; }
.pubbtn.on { background: var(--teal); border-color: var(--teal); color: #fff; }
/* ---- back button ---- */
.backrow { margin: 4px 0 6px; }
.backbtn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 99px; background: #fff; border: 3px solid var(--line);
  color: var(--ink); font: 600 1.05rem var(--round); text-decoration: none; box-shadow: 0 4px 0 var(--line); }
.backbtn:hover { border-color: var(--lilac); }
.v-endbtns .btn.ghost { color: var(--ink); }
@media (max-width: 560px) { .bookgrid { grid-template-columns: repeat(2, 1fr); padding: 16px; gap: 20px 14px; } }
/* the story page fits a phone turned sideways: cover on the left, buttons on the right */
.book.closed { max-width: min(430px, calc((100dvh - 200px) * .6667)); min-width: 180px; }
@media (orientation: landscape) and (max-height: 520px) {
  .bookwrap { display: flex; align-items: center; justify-content: center; gap: 28px; }
  .bookwrap .book.closed { margin: 0 0 12px; max-width: calc((100dvh - 150px) * .6667); min-width: 140px; flex: none; width: 100%; }
  .bookwrap .open-hint, .bookwrap .cover-foot { display: none; }
  .bookwrap .cover-title { padding: 14px 12px 30px 22px; }
  .bookwrap .cover-title .t { font-size: 1.15rem; }
  .bookwrap .cover-title .starring { display: none; }
  .bookwrap .coverbtns { flex-direction: column; align-items: stretch; margin: 0; }
  .backrow { margin: 0 0 4px; }
  header.top { padding: 8px 0 2px; }
}
@media (max-width: 480px) {
  header.top { gap: 8px; }
  header.top .mark { font-size: 1.2rem; white-space: nowrap; gap: .35rem; }
  header.top .mark .star { width: 26px; height: 26px; }
  .toplinks { gap: 10px; }
  .toplink { font-size: .8rem; white-space: nowrap; }
}

/* ---- grown-ups PIN ---- */
.pinbox { max-width: 380px; margin: 20px auto 0; background: #fff; border: 3px solid var(--line); border-radius: 30px; padding: 26px 22px; text-align: center; box-shadow: 0 8px 0 #e0d0f2; }
.pin-lock { font-size: 44px; }
.pinbox h1 { margin: 4px 0; font-size: 2rem; }
.pinbox p { color: var(--muted); font-weight: 700; margin: 4px 0 12px; }
.pin-dots { display: flex; gap: 14px; justify-content: center; margin: 14px 0 6px; }
.pin-dots i { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--purple); transition: background .12s; }
.pin-dots i.on { background: var(--purple); }
.pin-dots.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.pin-type { position: absolute; left: -9999px; }
.pin-err { min-height: 1.3em; color: var(--bad) !important; }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 280px; margin: 6px auto 14px; }
.pinpad button { height: 64px; border-radius: 20px; border: 3px solid var(--line); background: var(--lilac-l); font: 600 1.6rem var(--round); color: var(--ink); cursor: pointer; box-shadow: 0 4px 0 var(--line); }
.pinpad button:active { transform: translateY(3px); box-shadow: none; }
.pinpad button:focus-visible { outline: 4px solid var(--sun); outline-offset: 2px; }
.pinacts { margin-top: 4px; }
.lockform { margin: 14px 0 0; }
@media (prefers-reduced-motion: reduce) { .pin-dots.shake { animation: none; } }
/* phones: the speech bubble sits beside the wizard's hat, never over the face */
@media (max-width: 700px) {
  .sky-mascot .speech { top: 0; right: auto; left: calc(100% - 26px); width: 118px; max-width: none; box-sizing: border-box; font-size: .85rem; line-height: 1.2;
    padding: 8px 10px; border-radius: 16px 16px 16px 4px; white-space: normal; }
}
@media (max-width: 340px) { .sky-mascot .speech { display: none; } }

/* ---- books that look like books: the name on the cover, a spine and page edges ---- */
.gb-cover { overflow: visible; border-radius: 3px 10px 10px 3px; isolation: isolate;
  box-shadow: 0 10px 18px rgba(53,35,99,.18), 0 2px 0 rgba(53,35,99,.08); }
.gb-cover img { border-radius: inherit; z-index: 0; }
.gb-cover::before { content: ""; position: absolute; z-index: -1; top: 3%; bottom: 3%; right: -7px; width: 9px; border-radius: 0 4px 4px 0;
  background: repeating-linear-gradient(90deg, #fffdf7 0 2px, #e6dccb 2px 3px); box-shadow: 2px 2px 4px rgba(53,35,99,.15); }
.gb-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: linear-gradient(90deg, rgba(0,0,0,.32) 0, rgba(255,255,255,.22) 5px, rgba(0,0,0,.12) 10px, transparent 16px); box-shadow: none; }
.gb-name { position: absolute; z-index: 1; left: 0; right: 0; top: 0; padding: 12px 10px 30px 18px; text-align: center; border-radius: 3px 10px 0 0;
  background: linear-gradient(rgba(25,15,60,.72), rgba(25,15,60,.35) 65%, transparent); color: #fff;
  font: 600 clamp(.95rem, 2.4vw, 1.15rem)/1.08 var(--round); text-shadow: 0 2px 4px rgba(0,0,0,.45);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gb-kind { position: absolute; z-index: 1; right: 8px; bottom: 6px; font-size: 24px; text-shadow: 0 2px 6px rgba(0,0,0,.4); }
.gb-badge { top: auto; bottom: 8px; left: 14px; right: auto; z-index: 1; }
.gb-state { z-index: 1; left: 16px; }
.gb-plain { display: none; }
.gbook:hover .gb-cover { transform: translateY(-6px) rotate(-2deg); }
.gnew .gb-cover { flex-direction: column; gap: 6px; }
.gnew .gb-cover::before, .gnew .gb-cover::after { display: none; }
.gnew-plus { font: 600 3rem var(--round); line-height: 1; }
.gnew-t { font: 600 1rem var(--round); }
/* crystal ball results use the same book look */
.ball-book .gb-cover { width: 100%; background: linear-gradient(160deg, #fff 0%, var(--spine, var(--purple)) 70%); }
.ball-book .gb-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---- "Book published!" pop-up ---- */
.pubpop { position: fixed; inset: 0; z-index: 130; display: grid; place-items: center; background: rgba(42,28,85,.55); animation: pp-in .25s ease both; padding: 16px; }
.pubpop.bye { animation: pp-out .35s ease forwards; }
.pubpop-card { display: grid; justify-items: center; gap: 6px; text-align: center; max-width: 360px; padding: 26px 24px; border-radius: 30px; background: #fff;
  box-shadow: 0 10px 0 var(--purple-d), 0 30px 60px rgba(0,0,0,.35); animation: partyin .5s cubic-bezier(.3,1.6,.5,1); }
.pubpop-globe { font-size: 64px; animation: pp-spin 2s linear infinite; }
.pubpop-card b { font: 600 1.9rem var(--round); color: var(--purple); }
.pubpop-card span { color: var(--muted); font-weight: 700; }
@keyframes pp-in { from { opacity: 0; } }
@keyframes pp-out { to { opacity: 0; } }
@keyframes pp-spin { to { transform: rotate(360deg); } }
.endpub { width: 100%; display: flex; justify-content: center; margin-top: 6px; }
@media (prefers-reduced-motion: reduce) { .pubpop-globe { animation: none; } }

/* ---- crystal ball fits the screen on phones (no scrolling), upright or sideways ---- */
.ball-scene { height: 100dvh; min-height: 0; display: flex; flex-direction: column; align-items: stretch; }
.ball-scene > * { flex: none; }
.ball-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ball-wrap { width: min(400px, 80vw, 40dvh); transition: width .4s; }
.ball-results:not(.around) { display: flex; gap: 12px; overflow-x: auto; max-width: 100%; padding: 4px 4px 10px; margin: 8px 0 0;
  scroll-snap-type: x mandatory; justify-content: flex-start; }
.ball-results:not(.around) .ball-book { flex: none; width: 112px; scroll-snap-align: start; }
.ball-results:not(.around):has(.ball-book:only-child), .ball-results:not(.around):has(.ball-book:nth-child(2):last-child) { justify-content: center; }
.ball-stage.has-results .ball-wrap { width: min(400px, 60vw, 24dvh); }
@media (min-width: 900px) and (min-height: 700px) { .ball-stage.has-results .ball-wrap { width: min(400px, 40dvh); } }
@media (max-width: 700px) {
  .ball-scene { padding: max(10px, env(safe-area-inset-top, 0px)) 14px max(10px, env(safe-area-inset-bottom, 0px)); }
  .ball-scene h1 { margin-top: 8px; font-size: 1.7rem; }
  .ball-lede { font-size: 1rem; }
  .ball-ask { margin-top: 8px; flex-wrap: nowrap; }
  .ball-ask input { flex: 1 1 0; padding: 12px 16px; font-size: 1.05rem; }
  .ball-ask .cta.small { padding: 12px 16px; font-size: 1.05rem; white-space: nowrap; }
  .ball-mic { width: 50px; height: 50px; }
  .ball-chips { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; margin-top: 10px; padding-bottom: 4px; scrollbar-width: none; }
  .ball-chip { flex: none; padding: 8px 12px; font-size: .85rem; }
  .ball-note { margin-top: 8px; font-size: .9rem; }
}
@media (max-height: 700px) and (orientation: portrait) { .ball-lede { display: none; } }
@media (orientation: landscape) and (max-height: 520px) {
  .ball-scene { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.3fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto auto;
    column-gap: 22px; padding: max(8px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) 8px max(16px, env(safe-area-inset-left, 0px)); text-align: left; }
  .ball-nav { grid-column: 1 / -1; }
  .ball-stage { display: contents; }
  .ball-wrap, .ball-stage.has-results .ball-wrap { grid-column: 1; grid-row: 2 / 7; align-self: center; justify-self: center; width: min(100%, calc((100dvh - 70px) / 1.175)); }
  .ball-scene h1 { grid-column: 2; grid-row: 2; margin: 2px 0 0; font-size: 1.5rem; }
  .ball-lede { display: none; }
  .ball-results:not(.around) { grid-column: 2; grid-row: 3; align-self: center; margin: 4px 0; }
  .ball-results:not(.around) .ball-book { width: min(96px, calc((100dvh - 230px) * .6667)); }
  .ball-ask { grid-column: 2; grid-row: 4; margin: 4px 0 0; justify-content: flex-start; flex-wrap: nowrap; }
  .ball-ask input { flex: 1 1 0; padding: 10px 14px; font-size: 1rem; }
  .ball-ask .cta.small { padding: 10px 14px; font-size: 1rem; white-space: nowrap; }
  .ball-mic { width: 46px; height: 46px; }
  .ball-chips { grid-column: 2; grid-row: 5; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin-top: 6px; scrollbar-width: none; }
  .ball-chip { flex: none; padding: 6px 10px; font-size: .8rem; }
  .ball-note { grid-column: 2; grid-row: 6; margin: 4px 0 0; font-size: .85rem; text-align: left; }
}
@media (max-width: 480px) { .ball-ask .showme-t { display: none; } .ball-ask .cta.small { padding: 12px 16px; } }

/* =====================================================================
   1.14 — Read it myself: full screen. Upright = picture on top, big words, mic at the bottom.
   Sideways = the picture fills the screen and the words sit on it.
   ===================================================================== */
body.readpage { background: var(--cream); }
.readpage .wrap > footer { display: none; }
.reader { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-rows: 42% minmax(0, 1fr) auto; background: var(--cream); overflow: hidden; }
.rd-pic { position: relative; grid-row: 1; background: linear-gradient(160deg, var(--lilac), var(--purple)); overflow: hidden; }
.rd-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rd-pic.turn img { animation: rd-turn .5s ease; }
@keyframes rd-turn { from { opacity: 0; transform: scale(1.06); } }
.rd-top { position: absolute; z-index: 3; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px;
  padding: max(12px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px)); }
.rd-x { width: 42px; height: 42px; flex: none; border-radius: 50%; background: rgba(255,255,255,.92); color: var(--ink); display: grid; place-items: center;
  text-decoration: none; font-size: 18px; font-weight: 800; box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.rd-segs { flex: 1; display: flex; gap: 5px; max-width: 320px; }
.rd-segs i { flex: 1; height: 7px; border-radius: 99px; background: rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.rd-segs i.done { background: var(--sun); }
.rd-segs i.cur { background: linear-gradient(90deg, var(--sun) 50%, rgba(255,255,255,.55) 50%); }
.rd-stars { margin-left: auto; padding: 7px 12px; border-radius: 99px; background: #fff; font-weight: 800; color: var(--ink); box-shadow: 0 3px 8px rgba(0,0,0,.2); }
.rd-text { grid-row: 2; display: flex; flex-direction: column; min-height: 0; padding: 16px 18px 6px; }
.rd-text .wbar { margin-bottom: 10px; }
.reader .words { flex: 1 1 auto; min-height: 0; overflow-y: auto; font: 600 clamp(1.6rem, 7.5vw, 2.3rem)/1.45 var(--round); color: var(--ink); }
.reader .rline { margin-bottom: 4px; }
.reader .w { cursor: pointer; padding: 0 4px; border-radius: 10px; }
.reader .coach { margin-top: 8px; min-height: 0; padding: 8px 12px; font-size: .95rem; text-align: center; }
.rd-ctl { grid-row: 3; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px max(22px, env(safe-area-inset-right, 0px)) max(18px, env(safe-area-inset-bottom, 0px)) max(22px, env(safe-area-inset-left, 0px)); position: relative; }
.rd-round { width: 56px; height: 56px; flex: none; border-radius: 50%; border: 3px solid var(--line); background: #fff; font-size: 22px; color: var(--ink); cursor: pointer; box-shadow: 0 4px 0 var(--line); }
.rd-round:disabled { opacity: .35; }
.reader .rd-mic { width: 96px; height: 96px; position: relative; }
.reader .rd-mic svg { width: 44px; height: 44px; }
.rd-skip { position: absolute; left: 50%; bottom: max(2px, env(safe-area-inset-bottom, 0px)); translate: -50% 0; border: 0; background: none; color: var(--muted);
  font: 700 .72rem var(--body); text-decoration: underline; cursor: pointer; opacity: .7; }
.rd-notice { position: absolute; z-index: 6; left: 12px; right: 12px; top: 60px; margin: 0; }
.wcard { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 6px 8px; margin-top: 8px; padding: 10px 12px; border-radius: 18px;
  background: #fff; border: 3px solid var(--line); animation: partyin .35s cubic-bezier(.3,1.6,.5,1); position: relative; }
.wcard[hidden] { display: none; }
.wcard b { grid-column: 1; font: 600 1.6rem var(--round); color: var(--purple); }
.wcard #wc-means { grid-column: 1 / -1; grid-row: 2; color: var(--muted); font-weight: 700; font-size: .95rem; }
.wc-btn { border: 0; border-radius: 99px; padding: 8px 12px; font: 800 .85rem var(--body); cursor: pointer; }
.wc-btn.hear { background: var(--teal); color: #fff; }
.wc-btn.mean { background: var(--lilac-l); color: var(--purple); margin-right: 26px; }
.wc-x { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 50%; border: 0; background: var(--lilac-l); color: var(--ink); font-weight: 800; cursor: pointer; }

/* sideways (and wide screens): the picture fills the screen, chunky outlined words on it */
@media (orientation: landscape) {
  .reader { display: block; background: var(--night); }
  .rd-pic { position: absolute; inset: 0; }
  .rd-pic::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(transparent, rgba(26,16,56,.65)); }
  .rd-text { position: absolute; z-index: 2; left: max(80px, 8vw); right: max(140px, 14vw); bottom: max(14px, env(safe-area-inset-bottom, 0px)); padding: 0; max-height: 58%; }
  .rd-text .wbar { display: none; }
  .reader .words { text-align: center; color: #fff; font-size: clamp(1.4rem, 4.6vh, 2.6rem); line-height: 1.3; overflow-y: auto; }
  .reader .w, .reader .punct { -webkit-text-stroke: 7px #1a1038; paint-order: stroke fill; text-shadow: 0 4px 0 #1a1038; }
  .reader .w.done { color: #b9f5b0; background: none; }
  .reader .w.cur { color: var(--sun); background: none; box-shadow: none; display: inline-block; transform: scale(1.1) translateY(-2px); animation: none; }
  .reader .w.wrong { color: #ffb3c7; background: none; box-shadow: none; }
  .reader .rwho { color: #fff !important; -webkit-text-stroke: 4px #1a1038; paint-order: stroke fill; }
  .reader .coach { position: fixed; top: max(64px, calc(env(safe-area-inset-top, 0px) + 56px)); left: 50%; translate: -50% 0; margin: 0; max-width: 70vw; background: rgba(255,255,255,.92); }
  .reader .coach:empty { display: none; }
  .wcard { position: fixed; z-index: 7; top: max(64px, calc(env(safe-area-inset-top, 0px) + 56px)); right: max(16px, env(safe-area-inset-right, 0px)); width: min(340px, 44vw); margin: 0; }
  .rd-ctl { position: absolute; z-index: 3; right: max(14px, env(safe-area-inset-right, 0px)); bottom: max(14px, env(safe-area-inset-bottom, 0px)); left: auto; padding: 0;
    flex-direction: column-reverse; align-items: center; gap: 10px; }
  .rd-ctl #prevpg { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); top: 50%; translate: 0 -50%; width: 48px; height: 48px; }
  .reader .rd-mic { width: 82px; height: 82px; border: 4px solid #fff; }
  .rd-round { width: 48px; height: 48px; font-size: 19px; }
  .rd-skip { position: static; translate: none; color: #fff; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .rd-text { left: 70px; right: 120px; max-height: 62%; }
  .reader .coach { font-size: .8rem; padding: 5px 10px; top: max(54px, calc(env(safe-area-inset-top, 0px) + 46px)); }
  .reader .rd-mic { width: 70px; height: 70px; }
  .reader .rd-mic svg { width: 34px; height: 34px; }
  .rd-x { width: 38px; height: 38px; }
}

/* ===================================================== 1.14 Wizard School */
.readband .cta-2 { border-color: #fff; margin-left: 8px; margin-top: 8px; }
body.learnpage { background: var(--cream); }
body.learnpage .wrap > footer { display: none; }
.school { max-width: 860px; margin: 0 auto; padding-bottom: 40px; color: var(--ink); }
.sc-top { background: linear-gradient(180deg, var(--night), var(--purple)); color: #fff; padding: 14px 16px 64px; border-radius: 0 0 36px 36px; }
.sc-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sc-nav .pill-w { text-decoration: none; background: #fff; color: var(--ink); padding: 8px 14px; border-radius: 99px; font: 600 1rem var(--round); }
.sc-stats { display: flex; gap: 6px; }
.sc-stats > span { padding: 6px 12px; border-radius: 99px; background: var(--sun); color: var(--ink); font-weight: 800; }
.sc-hero { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.sc-hero img { height: 110px; width: auto; flex: none; }
.sc-hero h1 { margin: 0; font-size: clamp(2rem, 7vw, 3rem); }
.sc-hero p { margin: 4px 0 0; color: #e9dcff; font-weight: 700; }
.sc-ask { position: relative; margin: -46px 14px 0; background: #fff; border: 3px solid var(--line); border-radius: 26px; box-shadow: 0 8px 0 #e0d0f2; padding: 14px; }
.sc-ask h2 { margin: 0; font-size: 1.3rem; }
.sc-ask > p { margin: 2px 0 10px; color: var(--muted); font-weight: 700; font-size: .95rem; }
#askform { display: flex; gap: 8px; }
#askform input { flex: 1; min-width: 0; padding: 11px 14px; border-radius: 16px; border: 3px solid var(--line); font: 600 1.15rem var(--round); color: var(--ink); }
#askform input:focus { outline: none; border-color: var(--purple); }
.sc-mic { width: 50px; height: 50px; flex: none; border-radius: 50%; border: 0; background: var(--coral); color: #fff; font-size: 1.3rem; cursor: pointer; box-shadow: 0 4px 0 var(--coral-d); }
.sc-mic.on, .ls-mic.on { background: var(--teal); box-shadow: 0 0 0 8px rgba(44,160,164,.3); animation: tt-pulse 1s ease-in-out infinite; }
@keyframes tt-pulse { 50% { box-shadow: 0 0 0 16px rgba(44,160,164,0); } }
.sc-go { flex: none; padding: 0 16px; border-radius: 16px; border: 0; background: var(--sun); color: var(--ink); font: 600 1.05rem var(--round); cursor: pointer; box-shadow: 0 4px 0 var(--sun-d); }
.sc-answer { margin-top: 12px; padding: 14px; border-radius: 20px; background: var(--lilac-l); }
.sc-answer.pop { animation: sc-pop .4s cubic-bezier(.2,1.5,.4,1); }
@keyframes sc-pop { from { transform: scale(.88); opacity: 0; } }
.sa-head { display: flex; align-items: center; gap: 10px; }
.sa-emoji { font-size: 2.8rem; line-height: 1; }
.sa-w { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sa-w b { font: 600 1.7rem var(--round); color: var(--purple); overflow-wrap: anywhere; }
.sa-w span { font-weight: 800; color: var(--teal-d); font-size: .9rem; }
.sa-hear { width: 46px; height: 46px; flex: none; border-radius: 50%; border: 0; background: var(--teal); color: #fff; font-size: 1.15rem; cursor: pointer; }
.sa-means { margin: 10px 0 6px; font: 600 1.15rem/1.35 var(--round); }
.sa-ex { margin: 0; color: var(--muted); font-weight: 700; }
.sa-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.sa-tags span { padding: 5px 10px; border-radius: 99px; background: #fff; font-weight: 800; font-size: .82rem; }
.sc-h { margin: 24px 16px 10px; font-size: 1.45rem; }
.sc-lessons { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; padding: 0 14px; }
.sc-lesson { text-align: left; padding: 14px 12px; border-radius: 22px; border: 0; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-family: var(--body, inherit); color: #fff; transition: transform .15s; }
.sc-lesson:hover { transform: translateY(-4px) rotate(-1deg); }
.sc-lesson:focus-visible, .lc-choice:focus-visible, .tile:focus-visible, .jw:focus-visible { outline: 4px solid var(--sun); outline-offset: 2px; }
.sl-icon { font-size: 2rem; line-height: 1; }
.sc-lesson b { font: 600 1.15rem/1.1 var(--round); }
.sl-what { font-weight: 700; font-size: .85rem; opacity: .9; }
.sl-bar { margin-top: 6px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.35); overflow: hidden; display: block; }
.sl-bar span { display: block; height: 100%; background: #fff; border-radius: 99px; }
.sl-done { font-weight: 800; font-size: .78rem; }
.c-purple { background: var(--purple); box-shadow: 0 6px 0 var(--purple-d); }
.c-teal { background: var(--teal); box-shadow: 0 6px 0 var(--teal-d); }
.c-sun { background: var(--sun); color: var(--ink) !important; box-shadow: 0 6px 0 var(--sun-d); }
.c-sun .sl-bar { background: rgba(53,35,99,.15); } .c-sun .sl-bar span { background: var(--ink); }
.c-pink { background: var(--pink); color: #3a1530 !important; box-shadow: 0 6px 0 var(--coral-d); }
.c-lilac { background: var(--lilac); color: var(--ink) !important; box-shadow: 0 6px 0 #9a7cc0; }
.c-lilac .sl-bar span, .c-pink .sl-bar span { background: var(--ink); }
.c-night { background: var(--ink); box-shadow: 0 6px 0 #1a1038; }
.sc-jar { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px; }
.jw { padding: 8px 13px; border-radius: 99px; background: #fff; border: 2px solid var(--line); font: 600 1rem var(--round); color: var(--ink); cursor: pointer; }
.jw.new { animation: sc-pop .4s cubic-bezier(.2,1.5,.4,1); border-color: var(--sun); }
.jar-empty { margin: 0; color: var(--muted); font-weight: 700; }

/* the lesson player: full screen, one card at a time */
body.in-lesson { overflow: hidden; }
.lesson { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; color: #fff; height: 100dvh; }
.lesson[hidden] { display: none; }
.lesson.c-sun, .lesson.c-lilac, .lesson.c-pink { color: var(--ink); }
.lesson.c-sun { --deep: var(--sun-d); } .lesson.c-teal { --deep: var(--teal-d); } .lesson.c-purple { --deep: var(--purple-d); }
.lesson.c-pink { --deep: var(--coral-d); } .lesson.c-lilac { --deep: #9a7cc0; } .lesson.c-night { --deep: #1a1038; }
.lesson { box-shadow: none; }
.ls-top { display: flex; align-items: center; gap: 10px; padding: max(12px, env(safe-area-inset-top)) 16px 10px; }
.ls-top b { flex: 1; font: 600 1.3rem var(--round); }
.ls-top span { font-weight: 800; }
.ls-x { width: 42px; height: 42px; border-radius: 50%; border: 2px solid currentColor; background: transparent; color: inherit; font-size: 1.2rem; cursor: pointer; opacity: .85; }
.ls-bar { margin: 0 16px; height: 10px; border-radius: 99px; background: rgba(255,255,255,.3); overflow: hidden; }
.ls-bar span { display: block; height: 100%; width: 0; background: var(--sun); border-radius: 99px; transition: width .4s; }
.c-sun .ls-bar span { background: var(--ink); }
.ls-body { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px 16px; text-align: center; }
.ls-card { width: min(100%, 360px); padding: 22px 18px; border-radius: 34px; background: var(--cream); color: var(--ink); box-shadow: 0 10px 0 var(--deep, rgba(0,0,0,.25)); }
.ls-card.in { animation: ls-in .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes ls-in { from { transform: rotate(-8deg) scale(.7); opacity: 0; } }
.ls-card.right { animation: ls-yay .6s cubic-bezier(.2,1.6,.4,1); }
@keyframes ls-yay { 40% { transform: scale(1.08) rotate(2deg); } }
.lc-emoji { font-size: 3rem; line-height: 1.1; }
.lc-emoji:empty { display: none; }
.lc-show { font: 600 4.4rem/1 var(--round); color: var(--purple); overflow-wrap: anywhere; }
.lc-show.long { font-size: 3rem; }
.lc-prompt { margin: 10px 0 0; font: 600 1.25rem/1.3 var(--round); }
.lc-sentence { margin: 10px 0 0; font: 600 1.2rem/1.35 var(--round); color: var(--muted); }
.lc-prompt:empty, .lc-sentence:empty, .lc-choices:empty, .lc-slots:empty, .lc-tiles:empty { display: none; }
.lc-choices { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.lc-choice { padding: 12px; border-radius: 18px; border: 3px solid var(--line); background: #fff; font: 600 1.6rem var(--round); color: var(--ink); cursor: pointer; }
.lc-choice.ok { background: var(--teal); border-color: var(--teal); color: #fff; }
.lc-choice.no { background: #ffe1ea; border-color: var(--coral); opacity: .6; }
.lc-slots { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.lslot { width: 52px; height: 62px; border-radius: 14px; border: 3px dashed var(--lilac); display: grid; place-items: center; font: 600 2.2rem var(--round); color: var(--purple); }
.lslot.filled { border-style: solid; background: #fff; }
.lc-slots.shown .lslot { border-color: var(--teal); color: var(--teal-d); }
.lc-tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.tile { width: 52px; height: 52px; border-radius: 14px; border: 0; background: var(--sun); color: var(--ink); font: 600 1.7rem var(--round); cursor: pointer; box-shadow: 0 4px 0 var(--sun-d); }
.tile:disabled { opacity: .25; box-shadow: none; transform: translateY(4px); }
.tile.undo { background: var(--lilac-l); box-shadow: 0 4px 0 var(--lilac); font-size: 1.3rem; }
.lc-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.lc-hear, .lc-mean { padding: 9px 14px; border-radius: 99px; border: 0; font-weight: 800; font-size: .95rem; cursor: pointer; }
.lc-hear { background: var(--teal); color: #fff; }
.lc-mean { background: var(--lilac-l); color: var(--purple); }
.lc-mean[hidden] { display: none; }
.lc-means { margin: 12px 0 0; font: 600 1.05rem/1.35 var(--round); color: var(--ink); }
.ls-feedback { margin: 16px 0 0; min-height: 1.6em; font: 600 1.2rem var(--round); }
.ls-done h2 { margin: 0; font-size: 2.2rem; }
.ld-party { font-size: 5rem; animation: ls-yay .7s; }
.ld-stars { margin: 10px 0 4px; font-size: 3.2rem; letter-spacing: 6px; }
.ld-stars span { color: rgba(255,255,255,.35); display: inline-block; }
.ld-stars span.got { color: var(--sun); text-shadow: 0 3px 0 var(--sun-d); animation: sc-pop .5s cubic-bezier(.2,1.6,.4,1) both; }
.c-sun .ld-stars span.got { color: var(--ink); text-shadow: none; }
.ls-done p { font-weight: 800; }
.ld-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 16px; }
.ls-foot { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 16px max(20px, env(safe-area-inset-bottom)); }
.ls-foot[hidden] { display: none; }
.ls-wiz { height: 86px; width: auto; }
.ls-mic { width: 96px; height: 96px; flex: none; border-radius: 50%; border: 0; background: var(--coral); color: #fff; font-size: 2.5rem; cursor: pointer; box-shadow: 0 7px 0 var(--coral-d); }
.ls-side { width: 92px; display: flex; flex-direction: column; gap: 8px; font: 600 .95rem var(--round); }
.ls-self { padding: 7px 8px; border-radius: 14px; border: 2px solid currentColor; background: transparent; color: inherit; font-weight: 800; font-size: .8rem; cursor: pointer; opacity: .55; }
.ls-self.show { opacity: 1; }
@media (orientation: landscape) and (max-height: 520px) {
  .ls-body { flex-direction: row; gap: 16px; padding: 6px 16px; }
  .ls-card { padding: 12px 16px; width: min(60%, 420px); }
  .lc-show { font-size: 3rem; } .lc-emoji { font-size: 2rem; }
  .lc-choices { flex-direction: row; } .lc-choice { flex: 1; font-size: 1.2rem; padding: 8px; }
  .lslot { width: 40px; height: 46px; font-size: 1.6rem; } .tile { width: 40px; height: 40px; font-size: 1.3rem; }
  .ls-feedback { position: absolute; bottom: 8px; left: 0; right: 0; margin: 0; }
  .lesson:has(.ls-foot:not([hidden])) .ls-body { padding-right: 130px; }
  .ls-foot { position: absolute; right: 12px; bottom: 12px; flex-direction: column; gap: 6px; padding: 0; }
  .ls-wiz { display: none; } .ls-mic { width: 80px; height: 80px; font-size: 2rem; }
  .ls-side { width: auto; text-align: center; } .ls-side span { display: none; }
  .ls-done .ld-party { font-size: 3rem; } .ld-stars { font-size: 2.2rem; margin: 4px 0; }
}
@media (prefers-reduced-motion: reduce) { .ls-card.in, .ls-card.right, .sc-answer.pop, .jw.new, .ld-party, .ld-stars span.got, .sc-mic.on, .ls-mic.on { animation: none; } }
.ld-btns .cta-2 { color: inherit; border-color: currentColor; background: rgba(255,255,255,.25); }
@media (orientation: landscape) { .reader:has(.wcard:not([hidden])) #coach { visibility: hidden; } }

/* ===================================================== 1.14.1 Wizard School, more fun */
.sc-top { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 80% 0%, #5b3c96 0%, var(--night) 55%, #1a1038 100%); }
.sc-top > *:not(.sc-sky) { position: relative; }
.sc-sky, .ls-sky { position: absolute; inset: 0; pointer-events: none; }
.sc-sky i, .ls-sky i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; transform: scale(var(--s, 1));
  box-shadow: 0 0 6px 1px rgba(255,255,255,.8); animation: tw 2.6s ease-in-out infinite; }
@keyframes tw { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.sc-hero { align-items: flex-end; }
.sc-wiz { border: 0; background: none; padding: 0; cursor: pointer; flex: none; animation: tt-float 3.4s ease-in-out infinite; }
.sc-wiz img { height: 128px; width: auto; display: block; filter: drop-shadow(0 8px 14px rgba(0,0,0,.35)); }
.sc-wiz.boing { animation: boing .6s cubic-bezier(.3,1.8,.5,1); }
@keyframes boing { 30% { transform: scale(1.15, .85) rotate(-6deg); } 60% { transform: scale(.92, 1.1) rotate(5deg); } }
.sc-hello { flex: 1; min-width: 0; padding-bottom: 6px; }
.sc-bubble { position: relative; display: inline-block; margin-bottom: 10px; padding: 9px 13px; border-radius: 18px 18px 18px 4px; background: #fff; color: var(--purple);
  font: 600 1rem/1.25 var(--round); box-shadow: 0 4px 0 rgba(0,0,0,.18); }
.sc-bubble.pop, .ls-say.pop { animation: sc-pop .35s cubic-bezier(.2,1.6,.4,1); }
.sc-hello h1 { margin: 0; font-size: clamp(2.2rem, 8vw, 3.4rem); text-shadow: 0 4px 0 rgba(0,0,0,.25); }
.sc-hello h1 span { color: var(--sun); display: inline-block; animation: wiggle 3s ease-in-out infinite; }
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-5deg); } 90% { transform: rotate(5deg); } 95% { transform: rotate(-3deg); } }
.sc-rank { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 9px 12px; border-radius: 20px; background: rgba(255,255,255,.12); border: 2px solid rgba(255,255,255,.18); }
.rk-hat { font-size: 2rem; width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--sun); box-shadow: 0 4px 0 var(--sun-d); }
.rk-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.rk-mid b { font: 600 1.15rem var(--round); }
.rk-bar { height: 10px; border-radius: 99px; background: rgba(255,255,255,.2); overflow: hidden; }
.rk-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--sun), var(--pink)); transition: width .8s cubic-bezier(.2,1.2,.4,1); }
.rk-mid small { color: #e9dcff; font-weight: 800; font-size: .8rem; }
.sc-top { padding-bottom: 70px; }
.sc-stats > span.bump, .ls-gems.bump, .ls-streak.bump { animation: bump .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes bump { 40% { transform: scale(1.35); } }
.sc-answer.thinking { background: linear-gradient(110deg, var(--lilac-l) 30%, #fff 50%, var(--lilac-l) 70%); background-size: 250% 100%; animation: shimmer 1.1s linear infinite; }
.sc-answer.thinking .sa-emoji { animation: spin 1.4s linear infinite; display: inline-block; }
@keyframes shimmer { to { background-position: -150% 0; } }
.sc-h-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc-h-row h2 { margin: 0; font-size: 1.45rem; }
.sc-surprise { flex: none; padding: 9px 14px; border-radius: 99px; border: 0; background: var(--coral); color: #fff; font: 600 1rem var(--round); cursor: pointer; box-shadow: 0 4px 0 var(--coral-d); }
.sc-surprise:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--coral-d); }
/* spell books */
.sc-lesson { position: relative; border-radius: 8px 22px 22px 8px; padding-left: 20px; overflow: visible; }
.sc-lesson::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 10px; border-radius: 8px 0 0 8px; background: rgba(0,0,0,.18);
  box-shadow: inset -2px 0 0 rgba(255,255,255,.25); }
.sc-lesson::after { content: ""; position: absolute; left: 14px; right: 10px; bottom: 9px; height: 0; border-bottom: 2px dashed rgba(255,255,255,.3); }
.sc-lesson:nth-child(odd) { transform: rotate(-1.2deg); } .sc-lesson:nth-child(even) { transform: rotate(1.2deg); }
.sc-lesson:hover, .sc-lesson.lit { transform: translateY(-6px) rotate(0) scale(1.03); }
.sc-lesson.lit { outline: 5px solid var(--sun); outline-offset: 3px; }
.sc-lesson:active { transform: scale(.96); }
.sl-icon { display: inline-block; transition: transform .2s; }
.sc-lesson:hover .sl-icon { transform: scale(1.25) rotate(-10deg); }
.sl-new { position: absolute; top: -8px; right: -6px; padding: 3px 9px; border-radius: 99px; background: var(--sun); color: var(--ink); font: 600 .75rem var(--round);
  box-shadow: 0 3px 0 var(--sun-d); transform: rotate(8deg); animation: newpulse 1.6s ease-in-out infinite; }
@keyframes newpulse { 50% { transform: rotate(8deg) scale(1.12); } }
/* lesson player */
.lesson { overflow: hidden; }
.lesson > *:not(.ls-sky) { position: relative; }
.lesson .ls-sky i { background: currentColor; opacity: .5; box-shadow: none; }
.ls-top { flex-wrap: nowrap; }
.ls-top b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ls-gems, .ls-streak { flex: none; padding: 5px 10px; border-radius: 99px; background: rgba(255,255,255,.9); color: var(--ink); font-weight: 800; font-size: .95rem; }
.ls-streak { background: var(--coral); color: #fff; }
.ls-streak[hidden] { display: none; }
.ls-card.shake { animation: shake .45s; }
@keyframes shake { 20% { transform: translateX(-12px) rotate(-2deg); } 40% { transform: translateX(10px) rotate(2deg); } 60% { transform: translateX(-7px); } 80% { transform: translateX(4px); } }
.ls-card.right { animation: ls-yay .6s cubic-bezier(.2,1.6,.4,1); box-shadow: 0 10px 0 var(--deep), 0 0 0 6px var(--sun), 0 0 40px 10px rgba(255,214,92,.6); }
.lslot.drop { animation: drop .3s cubic-bezier(.2,1.8,.4,1); }
@keyframes drop { from { transform: translateY(-16px) scale(1.2); } }
.tile:not(:disabled):active { transform: translateY(3px); box-shadow: 0 1px 0 var(--sun-d); }
.lc-choice { transition: transform .12s; } .lc-choice:not(:disabled):active { transform: scale(.95); }
.ls-buddy { display: flex; align-items: flex-end; gap: 4px; }
.ls-wiz.hop { animation: hop .6s cubic-bezier(.3,1.7,.5,1); }
@keyframes hop { 40% { transform: translateY(-22px) rotate(-8deg); } }
.ls-wiz.wobble { animation: wob .6s; }
@keyframes wob { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.ls-say { padding: 7px 11px; border-radius: 14px 14px 14px 4px; background: #fff; color: var(--purple); font: 600 .95rem var(--round); margin-bottom: 52px; white-space: nowrap; box-shadow: 0 3px 0 rgba(0,0,0,.15); }
.ls-foot.nomic { justify-content: flex-start; }
.ls-foot.nomic .ls-mic, .ls-foot.nomic .ls-side { display: none; }
.ls-foot.nomic .ls-wiz { height: 72px; }
.ls-foot.nomic .ls-say { margin-bottom: 40px; }
.ld-wiz { height: 120px; width: auto; animation: dance 1s ease-in-out infinite; }
@keyframes dance { 0%, 100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(8deg) translateY(-14px); } }
.ld-rankup { margin: 10px auto 0; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 99px; background: #fff; color: var(--purple); font-weight: 800;
  animation: sc-pop .5s 1.2s cubic-bezier(.2,1.6,.4,1) both; }
.ld-rankup span { font-size: 1.6rem; }
.ld-rankup[hidden] { display: none; }
/* effects layer */
.fx { position: fixed; inset: 0; pointer-events: none; z-index: 90; overflow: hidden; }
.spark { position: absolute; transform: translate(-50%, -50%); animation: spark .9s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes spark { to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--r)) scale(.3); opacity: 0; } }
.flystar { position: absolute; font-size: 28px; transform: translate(-50%, -50%); animation: fly .65s cubic-bezier(.5,0,.7,.4) forwards; }
@keyframes fly { to { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(.6) rotate(360deg); } }
.confetto { position: absolute; top: -20px; width: 10px; height: 14px; border-radius: 2px; animation: fall linear forwards; }
@keyframes fall { to { transform: translate(var(--sx), 110vh) rotate(720deg); } }
@media (orientation: landscape) and (max-height: 520px) {
  .ls-buddy { display: none; }
  .ls-foot.nomic { display: none; }
  .ld-wiz { height: 70px; }
  .ls-gems, .ls-streak { font-size: .85rem; padding: 3px 8px; }
}
@media (max-width: 360px) { .ls-say { white-space: normal; max-width: 110px; } .sc-wiz img { height: 104px; } }
@media (prefers-reduced-motion: reduce) {
  .sc-sky i, .ls-sky i, .sc-wiz, .sc-hello h1 span, .sl-new, .ld-wiz, .sc-answer.thinking, .ls-card.shake, .ls-wiz.hop, .ls-wiz.wobble { animation: none; }
}
.pubtoast { position: fixed; left: 16px; right: 16px; bottom: 22px; top: auto; height: auto; z-index: 80; width: fit-content; max-width: 30rem; margin: 0 auto; padding: 12px 18px; border-radius: 18px;
  background: var(--ink); color: #fff; font: 600 1rem/1.3 var(--round); box-shadow: 0 8px 24px rgba(0,0,0,.25); text-align: center; }
.pubtoast.show { animation: toastin .35s cubic-bezier(.2,1.5,.4,1); }
@keyframes toastin { from { transform: translateY(30px); opacity: 0; } }
.gb-badge.pop { animation: sc-pop .4s cubic-bezier(.2,1.6,.4,1); }
.pubbtn:disabled { opacity: .6; }

/* ===================================================== 1.15 Wizard School games */
.lesson .ls-done { position: absolute; inset: 60px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; z-index: 3; }
.lesson .ls-done[hidden] { display: none; }
.clue { margin: 10px 16px 0; padding: 12px 14px; border-radius: 26px; background: var(--cream); color: var(--ink); box-shadow: 0 7px 0 var(--deep, rgba(0,0,0,.25)); text-align: center; z-index: 2; }
.clue[hidden] { display: none; }
.clue.in { animation: ls-in .45s cubic-bezier(.2,1.4,.4,1); }
.cl-main { font: 600 1.4rem/1.3 var(--round); }
.cl-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
.cl-prompt { margin: 0; font-weight: 800; color: var(--muted); }
.cl-hear { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--teal); color: #fff; font-size: 1.15rem; cursor: pointer; box-shadow: 0 4px 0 var(--teal-d); }
.cl-hear:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--teal-d); }
.cl-big { display: flex; align-items: center; justify-content: center; gap: 12px; }
.cl-emoji { font-size: 3rem; line-height: 1; }
.cl-word { font: 600 3rem/1 var(--round); color: var(--purple); letter-spacing: .02em; }
.cl-sentence { font: 600 1.5rem/1.5 var(--round); }
.gap { display: inline-block; min-width: 3.2em; margin: 0 4px; padding: 0 8px; border-radius: 12px; border: 3px dashed var(--lilac); color: var(--lilac); }
.gap.filled { border: 3px solid var(--sun); background: #fff3c4; color: var(--purple); animation: sc-pop .4s cubic-bezier(.2,1.6,.4,1); }
.stage { position: relative; flex: 1; min-height: 0; margin: 8px 0 0; overflow: hidden; }
.stage [data-v].glow { box-shadow: 0 0 0 6px var(--sun), 0 0 30px 10px rgba(255,214,92,.8) !important; }
.nope { animation: shake .45s; }
.ghostfly { position: fixed; z-index: 95; margin: 0; transform: none !important; animation: ghost .6s cubic-bezier(.5,0,.6,1) forwards; pointer-events: none; }
@keyframes ghost { to { translate: var(--tx) var(--ty); scale: .5; opacity: .8; } }

/* 🫧 bubbles */
.bub { position: absolute; left: 0; top: 0; width: 86px; height: 86px; border-radius: 50%; border: 0; cursor: pointer; color: var(--ink);
  font: 600 2.6rem/1 var(--round); background: radial-gradient(circle at 32% 28%, #fff 0 12%, rgba(255,255,255,.55) 13% 22%, rgba(194,166,227,.35) 45%, rgba(127,82,170,.45) 100%);
  box-shadow: inset -6px -8px 14px rgba(255,255,255,.35), inset 4px 4px 10px rgba(255,255,255,.5), 0 6px 18px rgba(0,0,0,.18); }
.c-purple .bub { color: #fff; text-shadow: 0 2px 0 var(--purple-d); }
.bub.popped { animation: popped .3s ease-out forwards; }
@keyframes popped { to { scale: 1.6; opacity: 0; } }
/* 🌠 stars */
.starw { position: absolute; left: 0; top: 0; padding: 14px 18px 14px 44px; border-radius: 99px; border: 0; cursor: pointer; font: 600 1.6rem/1 var(--round); color: var(--ink);
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff3c4 30%, var(--sun)); box-shadow: 0 0 22px rgba(255,214,92,.7); }
.starw::before { content: "⭐"; position: absolute; left: 10px; top: 50%; translate: 0 -50%; font-size: 1.5rem; }
.starw.caught { visibility: hidden; }
/* 🧪 potion */
.shelf { position: absolute; left: 0; right: 0; top: 4%; display: flex; justify-content: center; gap: 16px; padding: 0 12px 10px; border-bottom: 12px solid #8a5a2b; }
.bottle { position: relative; width: 92px; display: flex; flex-direction: column; align-items: center; border: 0; background: none; cursor: pointer; padding: 0; transition: transform .15s; }
.bottle:hover { transform: translateY(-6px) rotate(-4deg); }
.b-neck { width: 26px; height: 22px; border-radius: 6px 6px 0 0; background: rgba(255,255,255,.75); border: 3px solid #fff; border-bottom: 0; position: relative; }
.b-neck::before { content: ""; position: absolute; left: -2px; right: -2px; top: -12px; height: 12px; border-radius: 4px; background: #b07a44; }
.b-body { width: 92px; height: 92px; border-radius: 40% 40% 24px 24px; display: grid; place-items: center; border: 4px solid #fff;
  background: linear-gradient(180deg, rgba(255,255,255,.5) 0 30%, var(--liq) 30%); color: #fff; font: 600 1.45rem var(--round); text-shadow: 0 2px 0 rgba(0,0,0,.3); box-shadow: 0 6px 0 rgba(0,0,0,.15); }
.bottle.pour { z-index: 5; animation: pour .65s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes pour { 60% { transform: translate(var(--px), calc(var(--py) - 30px)) rotate(0); } 100% { transform: translate(var(--px), var(--py)) rotate(140deg); opacity: 0; } }
.cauldron { position: absolute; left: 50%; bottom: 6px; width: 210px; height: 150px; translate: -50% 0; --brew: #7cd67c; }
.pot { position: absolute; inset: 22px 0 0; border-radius: 30px 30px 90px 90px; background: radial-gradient(circle at 35% 30%, #4a4a5e, #1a1a26 70%); box-shadow: 0 8px 0 rgba(0,0,0,.25); }
.pot::before, .pot::after { content: ""; position: absolute; bottom: -12px; width: 26px; height: 22px; border-radius: 0 0 10px 10px; background: #1a1a26; }
.pot::before { left: 34px; } .pot::after { right: 34px; }
.brew { position: absolute; left: -8px; right: -8px; top: 10px; height: 34px; border-radius: 50%; background: var(--brew); z-index: 1; box-shadow: inset 0 -6px 0 rgba(0,0,0,.15), 0 0 30px var(--brew); transition: background .3s, box-shadow .3s; }
.brew::before, .brew::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: inherit; filter: brightness(1.25); animation: blub 1.4s ease-in-out infinite; }
.brew::before { left: 30%; top: -6px; } .brew::after { left: 62%; top: -4px; animation-delay: .7s; }
@keyframes blub { 0% { transform: scale(.4); opacity: 1; } 100% { transform: translateY(-26px) scale(1.1); opacity: 0; } }
.cauldron.boom .brew { animation: boom .8s; }
@keyframes boom { 30% { transform: scaleY(2.4) translateY(-10px); } }
.cauldron.pfft .brew { animation: pfft .5s; }
@keyframes pfft { 40% { filter: grayscale(1) brightness(.6); transform: scaleY(.6); } }
/* 🚂 train */
.track { position: absolute; left: 0; right: 0; top: 18%; height: 120px; border-bottom: 8px solid #6b4a2b; background: repeating-linear-gradient(90deg, transparent 0 30px, rgba(107,74,43,.5) 30px 40px) bottom / 100% 14px no-repeat; }
.train { position: absolute; bottom: 14px; left: 50%; display: flex; align-items: flex-end; gap: 6px; translate: -50% 0; animation: trainin 1.1s cubic-bezier(.2,.9,.3,1); }
@keyframes trainin { from { transform: translateX(110vw); } }
.engine { font-size: 4.2rem; line-height: 1; }
.train.chuff .engine { animation: chuff .4s ease-in-out 3; }
@keyframes chuff { 50% { transform: translateY(-6px) rotate(-3deg); } }
.train.away { animation: away 1.2s .4s ease-in forwards; }
@keyframes away { to { transform: translateX(-120vw); } }
.carriage { position: relative; min-width: 64px; height: 64px; padding: 0 10px; border-radius: 12px; border: 0; cursor: pointer; background: #fff; color: var(--ink);
  font: 600 2rem var(--round); box-shadow: 0 5px 0 rgba(0,0,0,.2); margin-bottom: 12px; }
.carriage::before, .carriage::after { content: ""; position: absolute; bottom: -14px; width: 18px; height: 18px; border-radius: 50%; background: #352363; border: 3px solid #c2a6e3; }
.carriage::before { left: 8px; } .carriage::after { right: 8px; }
.carriage.lit { background: var(--sun); animation: sc-pop .35s cubic-bezier(.2,1.6,.4,1); box-shadow: 0 5px 0 var(--sun-d), 0 0 20px rgba(255,214,92,.9); }
.pics { position: absolute; left: 0; right: 0; bottom: 4%; display: flex; justify-content: center; gap: 14px; animation: sc-pop .4s cubic-bezier(.2,1.6,.4,1); }
.pic { position: relative; width: 96px; height: 96px; border-radius: 26px; border: 0; background: #fff; font-size: 3.3rem; cursor: pointer; box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.pic.ok { background: var(--sun); }
.pic-word { position: absolute; left: 50%; bottom: -30px; translate: -50% 0; font: 600 1.3rem var(--round); color: inherit; white-space: nowrap; }
/* 🪄 spell */
.cloud { position: relative; width: 150px; height: 96px; margin: 0 auto; display: grid; place-items: center; border-radius: 60px; background: #fff;
  box-shadow: -40px 10px 0 -14px #fff, 40px 10px 0 -14px #fff, 0 6px 0 rgba(0,0,0,.08); }
.cloud-q { font-size: 2.6rem; animation: tt-float 2s ease-in-out infinite; }
.cloud-pic { position: absolute; font-size: 4rem; opacity: 0; transform: scale(.2); }
.cloud.open { animation: poofc .5s; }
.cloud.open .cloud-q { display: none; }
.cloud.open .cloud-pic { opacity: 1; transform: scale(1); transition: transform .5s cubic-bezier(.2,1.8,.4,1), opacity .2s; animation: dance 1s .5s ease-in-out infinite; }
@keyframes poofc { 40% { transform: scale(1.25); filter: blur(2px); } }
.spellbox { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 0 12px; }
.spellbox .lc-slots, .spellbox .lc-tiles { margin: 0; display: flex; }
.spellbox .lslot { background: rgba(255,255,255,.75); }
/* 🐉 dragon */
.cookie-sky { position: absolute; left: 0; right: 0; top: 0; height: 52%; }
.cookie { position: absolute; left: 0; top: 0; padding: 18px 16px; min-width: 96px; border-radius: 50%; border: 0; cursor: pointer; color: #4a2a10;
  font: 600 1.3rem/1 var(--round); background: radial-gradient(circle at 30% 30%, #f6c784, #d9954b 70%, #b8742f); box-shadow: 0 5px 0 #8a5a2b;
  background-image: radial-gradient(circle at 25% 35%, #5a3416 0 4px, transparent 5px), radial-gradient(circle at 70% 25%, #5a3416 0 4px, transparent 5px),
    radial-gradient(circle at 60% 75%, #5a3416 0 4px, transparent 5px), radial-gradient(circle at 30% 30%, #f6c784, #d9954b 70%, #b8742f); }
.dragon { position: absolute; left: 50%; bottom: 0; translate: -50% 0; display: flex; align-items: flex-end; gap: 4px; }
.dr-body { font-size: 7.5rem; line-height: 1; display: inline-block; transform: scaleX(-1); }
.dr-say { margin-bottom: 90px; padding: 8px 12px; border-radius: 16px 16px 16px 4px; background: #fff; color: var(--ink); font: 600 1.05rem var(--round); white-space: nowrap; }
.dragon.munch .dr-body { animation: munch .6s; }
@keyframes munch { 20%, 60% { transform: scaleX(-1) scale(1.15, .9); } 40%, 80% { transform: scaleX(-1) scale(.95, 1.1); } }
.dragon.yuck .dr-body { animation: yuckd .5s; }
@keyframes yuckd { 25% { transform: scaleX(-1) rotate(-12deg); } 75% { transform: scaleX(-1) rotate(12deg); } }
.g-dragon .ls-foot { display: none; }
@media (orientation: landscape) and (max-height: 520px) {
  .lesson { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; }
  .ls-top, .ls-bar { grid-column: 1 / -1; }
  .clue { grid-column: 1; grid-row: 3; align-self: center; margin: 6px 0 6px 16px; }
  .stage { grid-column: 2; grid-row: 3 / 5; margin: 4px 8px 6px 0; }
  .ls-feedback { grid-column: 1; grid-row: 4; position: static; margin: 0 0 8px 16px; font-size: 1rem; }
  .ls-foot { display: none !important; }
  .cl-word { font-size: 2.2rem; } .cl-emoji { font-size: 2.2rem; } .cl-sentence { font-size: 1.15rem; }
  .bub { width: 70px; height: 70px; font-size: 2rem; }
  .starw { font-size: 1.25rem; padding: 10px 14px 10px 38px; }
  .shelf { top: 0; gap: 10px; } .b-body { width: 74px; height: 70px; font-size: 1.15rem; } .bottle { width: 74px; }
  .cauldron { width: 160px; height: 110px; }
  .track { top: 2%; height: 100px; } .engine { font-size: 3.2rem; } .carriage { min-width: 52px; height: 52px; font-size: 1.6rem; }
  .pic { width: 74px; height: 74px; font-size: 2.6rem; }
  .dr-body { font-size: 5rem; } .dr-say { margin-bottom: 56px; }
  .lesson .ls-done { inset: 50px 0 0; flex-direction: row; flex-wrap: wrap; gap: 0 16px; }
}
@media (prefers-reduced-motion: reduce) { .train, .train.away, .bottle.pour, .brew::before, .brew::after, .cloud-q, .cloud.open .cloud-pic { animation: none; } }
.lesson .ls-feedback { text-align: center; margin: 2px 16px 0; min-height: 1.4em; }

/* ===================================================== 1.15.1 Wizard School games: painted scenes */
.lesson[class*=" g-"] { background: #22164a; color: #fff; }
.scene { position: absolute !important; inset: 0; z-index: 0; pointer-events: none; }
.scene svg { width: 100%; height: 100%; display: block; }
.lesson[class*=" g-"] .ls-sky { display: none; }
.lesson.g-stars .ls-sky, .lesson.g-spell .ls-sky { display: block; }
.lesson.g-stars .ls-sky i, .lesson.g-spell .ls-sky i { background: #fff; opacity: 1; box-shadow: 0 0 6px 1px rgba(255,255,255,.8); }
.weed { transform-box: fill-box; transform-origin: 50% 100%; animation: weed 3.6s ease-in-out infinite; }
.weed.w2 { animation-duration: 4.4s; animation-delay: -1s; }
@keyframes weed { 50% { transform: rotate(7deg); } }
.rays { animation: rays 6s ease-in-out infinite; } @keyframes rays { 50% { opacity: .55; } }
.clouds g { animation: drift 18s linear infinite alternate; } .clouds g + g { animation-duration: 24s; }
@keyframes drift { to { transform: translateX(60px); } }
.ring { transform-box: fill-box; transform-origin: center; animation: spin 40s linear infinite; }
/* top bar */
.lesson[class*=" g-"] .ls-top { color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.35); }
.lesson[class*=" g-"] .ls-x { border: 0; background: rgba(255,255,255,.22); backdrop-filter: blur(6px); color: #fff; opacity: 1; }
.ls-pips { display: flex; gap: 6px; margin: 0 16px; }
.ls-pips i { flex: 1; height: 10px; border-radius: 99px; background: rgba(255,255,255,.3); box-shadow: inset 0 1px 2px rgba(0,0,0,.2); transition: background .3s; }
.ls-pips i.done { background: var(--sun); box-shadow: 0 0 8px rgba(255,214,92,.8); }
.ls-pips i.now { background: #fff; animation: pip 1s ease-in-out infinite; }
@keyframes pip { 50% { opacity: .5; } }
/* the clue card */
.lesson[class*=" g-"] .clue { background: rgba(255,255,255,.95); border: 4px solid #fff; border-radius: 30px; box-shadow: 0 12px 30px rgba(20,10,60,.35); padding: 14px 16px 12px; }
.lesson[class*=" g-"] .cl-word { font-size: 3.4rem; color: var(--purple); text-shadow: 0 3px 0 #e8dcf7; }
.lesson[class*=" g-"] .cl-emoji { font-size: 3.4rem; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); }
.lesson[class*=" g-"] .cl-sentence { font-size: 1.7rem; color: var(--ink); }
.lesson[class*=" g-"] .cl-prompt { color: #7a6aa8; font-size: 1rem; }
.lesson[class*=" g-"] .gap { border-color: #c2a6e3; background: #f6f0fd; color: #b49ad8; }
.cl-hear { width: 48px; height: 48px; font-size: 1.3rem; }
/* feedback + buddy */
.lesson[class*=" g-"] .ls-feedback { z-index: 4; align-self: center; width: auto; max-width: calc(100% - 32px); padding: 0 16px; border-radius: 99px; min-height: 0;
  background: rgba(26,16,56,.55); backdrop-filter: blur(6px); color: #fff; font-size: 1.15rem; line-height: 2.2; }
.lesson[class*=" g-"] .ls-feedback:empty { visibility: hidden; }
.lesson[class*=" g-"] .ls-foot { z-index: 3; padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.lesson[class*=" g-"] .ls-wiz { height: 104px; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
.lesson[class*=" g-"] .ls-say { margin-bottom: 64px; font-size: 1rem; }
/* 🫧 bubbles */
.lesson .bub { width: 112px; height: 112px; color: #fff; font: 600 3.2rem/1 var(--round); text-shadow: 0 3px 0 rgba(23,78,134,.55);
  background: radial-gradient(circle at 50% 55%, rgba(255,255,255,.04) 0 55%, rgba(255,255,255,.28) 68%, rgba(190,245,255,.75) 71%, rgba(255,255,255,0) 72%);
  border: 0; box-shadow: inset -14px -16px 24px rgba(140,230,255,.35), inset 12px 10px 22px rgba(255,170,230,.35), 0 0 0 2px rgba(255,255,255,.55), 0 8px 24px rgba(10,40,90,.25); }
.lesson .bub::after { content: ""; position: absolute; left: 22%; top: 16%; width: 30%; height: 18%; border-radius: 50%; background: rgba(255,255,255,.9); transform: rotate(-30deg); }
.lesson .bub::before { content: ""; position: absolute; right: 20%; bottom: 18%; width: 10%; height: 10%; border-radius: 50%; background: rgba(255,255,255,.7); }
.lesson.c-purple .bub { color: #fff; }
/* 🌠 stars */
.lesson .starw { width: 138px; height: 132px; padding: 18px 0 0; border-radius: 0; background: none; box-shadow: none; color: #5a3a00; font: 600 1.35rem/1 var(--round);
  display: grid; place-items: center; filter: drop-shadow(0 0 14px rgba(255,214,92,.75)) drop-shadow(0 6px 6px rgba(0,0,0,.25)); }
.lesson .starw::before { content: ""; position: absolute; inset: 0; left: 0; top: 0; translate: none; font-size: 0; z-index: -1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 96'%3E%3Cdefs%3E%3CradialGradient id='g' cx='.4' cy='.35' r='.7'%3E%3Cstop offset='0' stop-color='%23fff6c2'/%3E%3Cstop offset='.6' stop-color='%23ffd65c'/%3E%3Cstop offset='1' stop-color='%23f2a81d'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M50 3 L62 34 L96 36 L70 57 L79 91 L50 72 L21 91 L30 57 L4 36 L38 34 Z' fill='url(%23g)' stroke='%23fff3b0' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.lesson .starw::after { content: ""; position: absolute; left: 50%; bottom: 88%; width: 18px; height: 120px; translate: -50% 0; z-index: -2; border-radius: 99px;
  background: linear-gradient(0deg, rgba(255,240,180,.7), rgba(255,240,180,0)); }
/* 🧪 potion */
.lesson .shelf { top: 6px; gap: 14px; padding: 0 10px 0; border: 0; align-items: flex-end; }
.lesson .shelf::after { content: ""; position: absolute; left: 4%; right: 4%; bottom: -16px; height: 16px; border-radius: 6px; background: linear-gradient(#a8743f, #7a4f26); box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.lesson .bottle { width: 100px; z-index: 1; filter: drop-shadow(0 6px 6px rgba(0,0,0,.3)); }
.b-cork { width: 26px; height: 16px; border-radius: 5px 5px 2px 2px; background: linear-gradient(#d39a5a, #a8743f); }
.lesson .b-neck { width: 30px; height: 22px; border-radius: 0; background: rgba(255,255,255,.55); border: 3px solid rgba(255,255,255,.9); border-top: 0; border-bottom: 0; }
.lesson .b-neck::before { display: none; }
.lesson .b-body { position: relative; width: 100px; height: 100px; border-radius: 50%; overflow: hidden; border: 4px solid rgba(255,255,255,.95); box-shadow: none;
  background: rgba(255,255,255,.35); }
.lesson .b-body::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 62%; background: var(--liq); border-radius: 40% 45% 0 0 / 18% 22% 0 0; animation: slosh 2.4s ease-in-out infinite; }
.lesson .b-body::after { content: ""; position: absolute; left: 18%; top: 14%; width: 22%; height: 34%; border-radius: 50%; background: rgba(255,255,255,.7); transform: rotate(20deg); }
@keyframes slosh { 50% { transform: rotate(4deg) translateY(2px); } }
.b-tag { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; padding: 4px 10px; border-radius: 8px; background: #fff3d6; color: #4a2a10; font: 600 1.25rem var(--round);
  box-shadow: 0 2px 0 rgba(0,0,0,.2); white-space: nowrap; transform: rotate(-3deg); }
.lesson .cauldron { width: 250px; height: 250px; bottom: 0; }
.lesson .cauldron svg { width: 100%; height: 100%; overflow: visible; }
.flames { transform-box: fill-box; transform-origin: 50% 100%; animation: flick .5s ease-in-out infinite alternate; }
@keyframes flick { to { transform: scaleY(1.15) scaleX(.95); } }
.bb { animation: bubup 1.6s ease-in infinite; transform-box: fill-box; transform-origin: center; } .b2 { animation-delay: .5s; } .b3 { animation-delay: 1s; }
@keyframes bubup { 0% { transform: translateY(0) scale(.5); opacity: 1; } 100% { transform: translateY(-40px) scale(1.2); opacity: 0; } }
.liquid { transition: fill .3s; filter: drop-shadow(0 0 10px var(--brew)); }
.lesson .cauldron.boom .liquid { animation: boom2 .8s; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes boom2 { 30% { transform: scaleY(3) translateY(-6px); } }
.lesson .cauldron.pfft .liquid { animation: pfft .5s; }
/* 🚂 train */
.lesson .track { top: 26%; height: 150px; border-bottom: 0; background: none; }
.lesson .track::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; background:
  linear-gradient(#8a8aa0, #8a8aa0) 0 2px / 100% 5px no-repeat, repeating-linear-gradient(90deg, #7a5230 0 14px, transparent 14px 34px) 0 6px / 100% 12px no-repeat; }
.lesson .train { bottom: 14px; gap: 4px; }
.lesson .engine { position: relative; width: 150px; height: 140px; display: block; }
.engine svg { width: 100%; height: 100%; display: block; }
.smoke { position: absolute; left: 14px; top: -10px; width: 26px; height: 26px; border-radius: 50%; background: #fff; opacity: 0; animation: smoke 1.8s ease-out infinite; }
.smoke.s2 { animation-delay: .6s; } .smoke.s3 { animation-delay: 1.2s; }
@keyframes smoke { 0% { transform: translate(0, 10px) scale(.5); opacity: .9; } 100% { transform: translate(-30px, -70px) scale(2.2); opacity: 0; } }
.lesson .carriage { min-width: 78px; height: 74px; margin-bottom: 20px; border-radius: 12px 12px 6px 6px; color: var(--ink); font-size: 2.2rem;
  background: linear-gradient(#fff, #fff) 50% 40% / 70% 56% no-repeat, linear-gradient(#ffd65c, #f2b134); box-shadow: 0 5px 0 rgba(0,0,0,.2); }
.lesson .carriage:nth-of-type(2n) { background: linear-gradient(#fff, #fff) 50% 40% / 70% 56% no-repeat, linear-gradient(#ff8fb3, #e8607f); }
.lesson .carriage:nth-of-type(3n) { background: linear-gradient(#fff, #fff) 50% 40% / 70% 56% no-repeat, linear-gradient(#8fd6ff, #2aa6c4); }
.lesson .carriage::before, .lesson .carriage::after { bottom: -18px; width: 24px; height: 24px; background: #352363; border: 4px solid #c2a6e3; }
.lesson .carriage.lit { background: linear-gradient(#fff6c2, #fff6c2) 50% 40% / 70% 56% no-repeat, linear-gradient(#7ee07e, #3fae5a); box-shadow: 0 5px 0 rgba(0,0,0,.2), 0 0 26px rgba(255,255,160,.9); }
.lesson .pics { bottom: 8%; gap: 16px; }
.lesson .pic { width: 108px; height: 108px; border-radius: 30px; font-size: 3.6rem; background: rgba(255,255,255,.96); box-shadow: 0 8px 0 rgba(0,0,0,.15), 0 10px 24px rgba(0,0,0,.15); }
.lesson .pic.ok { background: var(--sun); }
.lesson .pic-word { bottom: -34px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.4); }
/* 🪄 spell */
.lesson.g-spell .cloud { width: 170px; height: 104px; background: #fff; box-shadow: -46px 12px 0 -16px #fff, 46px 12px 0 -16px #fff, 0 0 40px rgba(255,214,92,.45); }
.lesson .spellbox { gap: 26px; }
.lesson .spellbox .lslot { width: 62px; height: 70px; border-radius: 18px; border: 3px solid rgba(255,214,92,.7); background: rgba(255,255,255,.12); color: #fff;
  box-shadow: 0 0 18px rgba(255,214,92,.35), inset 0 0 12px rgba(255,214,92,.25); font-size: 2.4rem; }
.lesson .spellbox .lslot.filled { background: rgba(255,214,92,.25); border-color: var(--sun); text-shadow: 0 0 12px var(--sun); }
.lesson .spellbox .lc-tiles { gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 380px; }
.lesson .spellbox .tile { width: 60px; height: 60px; border-radius: 18px; font-size: 2rem; color: #ffe9a8; text-shadow: 0 0 10px rgba(255,214,92,.9);
  background: radial-gradient(circle at 35% 30%, #8d7bb8, #4e3d7a 70%); box-shadow: 0 6px 0 #2a1c55, inset 0 2px 0 rgba(255,255,255,.3); }
.lesson .spellbox .tile.undo { background: rgba(255,255,255,.18); box-shadow: 0 6px 0 rgba(0,0,0,.25); color: #fff; text-shadow: none; }
.lesson .spellbox .tile:disabled { opacity: .2; }
/* 🐉 dragon */
.lesson .cookie { width: 116px; height: 116px; min-width: 0; padding: 0; display: grid; place-items: center; font-size: 1.25rem; color: #4a2a10;
  border-radius: 48% 52% 50% 46% / 52% 46% 54% 48%; box-shadow: 0 6px 0 #8a5a2b, 0 10px 18px rgba(0,0,0,.25);
  background-image: radial-gradient(circle at 24% 32%, #5a3416 0 5px, transparent 6px), radial-gradient(circle at 72% 24%, #5a3416 0 5px, transparent 6px),
    radial-gradient(circle at 64% 78%, #5a3416 0 5px, transparent 6px), radial-gradient(circle at 30% 74%, #5a3416 0 4px, transparent 5px),
    radial-gradient(circle at 35% 30%, #fbd398, #dd9a4e 65%, #b8742f); }
.lesson .dragon { bottom: 4px; }
.lesson .dr-body { font-size: 10rem; filter: drop-shadow(0 10px 12px rgba(0,0,0,.35)); }
.lesson .dr-say { margin-bottom: 140px; font-size: 1.1rem; box-shadow: 0 4px 0 rgba(0,0,0,.15); }
.lesson.g-dragon .cookie-sky { height: 48%; }
/* done screen sits on the scene */
.lesson[class*=" g-"] .ls-done { background: radial-gradient(circle at 50% 40%, rgba(26,16,56,.55), rgba(26,16,56,.85)); color: #fff; inset: 0; }
@media (orientation: landscape) and (max-height: 520px) {
  .lesson .bub { width: 84px; height: 84px; font-size: 2.4rem; }
  .lesson .starw { width: 110px; height: 104px; font-size: 1.1rem; }
  .lesson .bottle { width: 80px; } .lesson .b-body { width: 80px; height: 80px; } .b-tag { font-size: 1rem; }
  .lesson .cauldron { width: 170px; height: 170px; }
  .lesson .track { top: 4%; } .lesson .engine { width: 110px; height: 100px; } .lesson .carriage { min-width: 60px; height: 58px; font-size: 1.7rem; }
  .lesson .pic { width: 80px; height: 80px; font-size: 2.6rem; }
  .lesson .cookie { width: 92px; height: 92px; font-size: 1.05rem; }
  .lesson .dr-body { font-size: 6rem; } .lesson .dr-say { margin-bottom: 80px; }
  .lesson .spellbox .lslot { width: 46px; height: 52px; font-size: 1.8rem; } .lesson .spellbox .tile { width: 46px; height: 46px; font-size: 1.5rem; }
  .lesson[class*=" g-"] .cl-word, .lesson[class*=" g-"] .cl-emoji { font-size: 2.3rem; } .lesson[class*=" g-"] .cl-sentence { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .weed, .rays, .clouds g, .ring, .flames, .bb, .smoke, .lesson .b-body::before, .ls-pips i.now { animation: none; } }
.lesson .track { top: 34%; }
.lesson .train { transform-origin: 50% 100%; }
@media (orientation: landscape) and (max-height: 520px) { .lesson .track { top: 2%; } }

/* ===================================================== 1.16 painted art (made once by the picture service) */
.scene-img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; display: block; }
@media (orientation: landscape) { .scene-img { object-position: 50% 55%; } }
.lesson.painted .scene::after { content: ""; position: absolute; inset: 0 0 auto; height: 120px; background: linear-gradient(rgba(20,10,50,.45), rgba(20,10,50,0)); }
.lesson.has-star .starw::before { background-image: var(--a-star); }
.lesson.has-star .starw { color: #4a2c00; text-shadow: 0 1px 0 rgba(255,255,255,.7); }
.lesson.has-cookie .cookie { background: var(--a-cookie) center / contain no-repeat; box-shadow: none; border-radius: 0; filter: drop-shadow(0 8px 10px rgba(0,0,0,.3));
  color: #3a1d08; text-shadow: 0 0 4px #fff3d6, 0 0 8px #fff3d6; }
.lesson.has-cloud .cloud { background: var(--a-cloud) center / contain no-repeat; box-shadow: none; width: 220px; height: 140px; }
.lesson .bottle.art { width: 112px; }
.lesson .bottle.art .b-img { width: 112px; height: 112px; object-fit: contain; display: block; }
.lesson .bottle.art .b-tag { bottom: 18px; }
.pot-img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; filter: drop-shadow(0 0 30px rgba(140,255,140,.45)); }
.lesson .cauldron.boom .pot-img { animation: potboom .7s; }
@keyframes potboom { 30% { transform: scale(1.08, .92); } 60% { transform: scale(.96, 1.06); } }
.lesson .cauldron.pfft .pot-img { animation: pfft .5s; }
.lesson .engine.art { width: 170px; height: 114px; }
.eng-img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; display: block; }
.lesson .engine.art .smoke { left: 30px; top: -6px; }
.carriage .snd { position: relative; z-index: 1; }
.lesson.has-wagon .carriage { min-width: 92px; height: 86px; margin-bottom: 0; padding: 0 6px 18px; background: var(--a-wagon) 50% 100% / contain no-repeat !important;
  box-shadow: none !important; filter: hue-rotate(var(--hue, 0deg)) drop-shadow(0 6px 6px rgba(0,0,0,.25)); }
.lesson.has-wagon .carriage::before, .lesson.has-wagon .carriage::after { display: none; }
.lesson.has-wagon .carriage .snd { display: inline-block; min-width: 46px; padding: 2px 8px; border-radius: 10px; background: #fff; font: 600 2rem var(--round); color: var(--ink); }
.lesson.has-wagon .carriage.lit { filter: hue-rotate(var(--hue, 0deg)) drop-shadow(0 0 14px #fff6a0) drop-shadow(0 0 4px #fff6a0); }
.lesson.has-wagon .carriage.lit .snd { background: #fff6a0; }
.lesson .dr-body.art { transform: none; font-size: 0; }
.dr-img { width: 220px; height: 220px; object-fit: contain; display: block; }
.lesson .dragon.munch .dr-body.art { animation: munch2 .6s; }
.lesson .dragon.yuck .dr-body.art { animation: yuck2 .5s; }
@keyframes munch2 { 20%, 60% { transform: scale(1.12, .9); } 40%, 80% { transform: scale(.95, 1.08); } }
@keyframes yuck2 { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
.lesson .dr-body.art + .dr-say { margin-bottom: 170px; }
@media (orientation: landscape) and (max-height: 520px) {
  .dr-img { width: 140px; height: 140px; } .lesson .dr-body.art + .dr-say { margin-bottom: 100px; }
  .lesson .bottle.art, .lesson .bottle.art .b-img { width: 84px; } .lesson .bottle.art .b-img { height: 84px; }
  .lesson .engine.art { width: 120px; height: 80px; } .lesson.has-wagon .carriage { min-width: 70px; height: 66px; } .lesson.has-wagon .carriage .snd { font-size: 1.5rem; }
}
.scene-img { object-position: 50% 55%; }
.lesson.painted.g-stars .ls-sky i { width: 3px; height: 3px; }

/* ===================================================== 1.17 the wizard's poses and costumes */
.sc-wiz img { height: 150px; }
.sl-wiz { position: absolute; right: 6px; bottom: 26px; height: 92px; width: auto; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); pointer-events: none; transition: transform .2s; }
.sc-lesson { min-height: 150px; }
.sc-lesson b, .sc-lesson .sl-what { max-width: calc(100% - 64px); }
.sc-lesson:hover .sl-wiz { transform: translateY(-6px) rotate(6deg) scale(1.08); }
.lesson[class*=" g-"] .ls-wiz { height: 128px; }
.lesson[class*=" g-"] .ls-say { margin-bottom: 84px; }
.ld-wiz { height: 170px; }
@media (orientation: landscape) and (max-height: 520px) { .ld-wiz { height: 110px; } }

/* ===================================================== 1.18 six more games (painted pieces in static/learn/g) */
.cl-listen { display: flex; align-items: center; justify-content: center; gap: 10px; font: 600 1.5rem var(--round); color: var(--ink); }
.cl-ear { font-size: 2.4rem; animation: tt-float 2s ease-in-out infinite; }
.cl-planet { height: 70px; width: auto; filter: drop-shadow(0 4px 6px rgba(0,0,0,.2)); animation: spin 30s linear infinite; }
.stage img { -webkit-user-drag: none; user-select: none; }
@keyframes popin { from { transform: translateY(60%) scale(.8); opacity: 0; } }
/* 🔨 whack */
.molefield { position: absolute; inset: 4px 10px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 4px 6px; }
.mhole { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.mhill { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto; max-height: 60%; object-fit: contain; object-position: 50% 100%; z-index: 2; pointer-events: none; }
.mole { position: absolute; left: 6%; right: 6%; bottom: 22%; z-index: 1; border: 0; background: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center;
  transition: transform .3s cubic-bezier(.3,1.5,.5,1), opacity .3s; animation: popin .35s cubic-bezier(.2,1.6,.4,1); }
.mole-img { width: 100%; max-height: 150px; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); }
.mole-sign { position: absolute; left: 50%; top: 52%; translate: -50% -50%; max-width: 80%; font: 700 1.3rem/1 var(--round); color: var(--ink); white-space: nowrap; }
.mole.down, .mole.duck { transform: translateY(70%); opacity: .2; }
.mole.popin { animation: popin .35s cubic-bezier(.2,1.6,.4,1); }
.mole.bonked { transform: translateY(20%) scale(1.1, .85); }
.mole.bonked .mole-sign { display: none; }
.mallet { position: absolute; z-index: 5; width: 96px; height: auto; pointer-events: none; opacity: 0; transform-origin: 80% 90%; }
.mallet.swing { animation: swing .45s ease-out; }
@keyframes swing { 0% { opacity: 1; transform: rotate(-60deg); } 40% { opacity: 1; transform: rotate(20deg); } 100% { opacity: 0; transform: rotate(10deg); } }
/* 🚀 rocket */
.rock-sky { position: absolute; left: 0; right: 0; top: 0; height: 52%; }
.rock { position: absolute; left: 0; top: 0; width: 92px; height: 92px; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; }
.rock-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 12px rgba(194,166,227,.7)); }
.rock-letter { position: relative; font: 700 2.4rem var(--round); color: #fff; text-shadow: 0 3px 0 #352363, 0 0 10px #352363; }
.rock.used { opacity: 0; pointer-events: none; transition: opacity .3s; }
.rock.glow .rock-img { filter: drop-shadow(0 0 14px #ffd65c) drop-shadow(0 0 6px #ffd65c); }
.launchpad { position: absolute; left: 0; right: 0; bottom: 0; height: 48%; display: flex; align-items: flex-end; justify-content: center; gap: 14px; padding-bottom: 6px; }
.ship { position: relative; height: 100%; display: flex; align-items: flex-end; }
.ship-img { height: 100%; max-height: 230px; width: auto; position: relative; z-index: 1; filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.ship-flame { position: absolute; left: 50%; bottom: -10px; width: 46px; height: 30px; translate: -50% 0; border-radius: 0 0 50% 50%; background: linear-gradient(#ffd65c, #ff7a2a 60%, rgba(255,122,42,0)); opacity: .5; animation: flick .12s ease-in-out infinite alternate; transform-origin: 50% 0; }
.ship.blast { animation: blast 1.2s cubic-bezier(.6,0,.8,.4) forwards; }
.ship.blast .ship-flame { height: 120px; opacity: 1; }
@keyframes blast { 15% { transform: translateY(6px); } 100% { transform: translateY(-120vh); } }
.tanks { display: flex; flex-direction: column-reverse; gap: 6px; margin-bottom: 20px; }
.tank { width: 56px; height: 52px; border-radius: 14px; border: 3px solid rgba(255,214,92,.8); background: rgba(255,255,255,.12); display: grid; place-items: center;
  font: 700 2rem var(--round); color: #fff; box-shadow: 0 0 14px rgba(255,214,92,.35); }
.tank.full { background: var(--sun); color: var(--ink); animation: sc-pop .35s cubic-bezier(.2,1.6,.4,1); }
/* 🎰 silly */
.slotm { position: relative; width: min(78%, 300px); margin: 0 auto; }
.slotm-img { width: 100%; height: auto; display: block; cursor: pointer; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); }
.reels { position: absolute; left: 21%; right: 25%; top: 37%; height: 25%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3%; pointer-events: none; }
.reel { display: grid; place-items: center; overflow: hidden; }
.reel-img { width: 92%; height: 92%; object-fit: contain; }
.reel.word { font: 700 .95rem/1.05 var(--round); color: var(--ink); text-align: center; padding: 0 2px; }
.reels.spinning .reel { filter: blur(1.2px); animation: reelspin .09s linear infinite; }
@keyframes reelspin { 50% { transform: translateY(6px); } }
.lever { position: absolute; right: 2%; top: 22%; width: 18%; height: 44%; border: 0; background: transparent; cursor: pointer; }
.slotm.giggle { animation: giggle .3s ease-in-out 4; }
@keyframes giggle { 50% { transform: rotate(-4deg) scale(1.04); } }
.slotm .lever.pulled + * , .lever.pulled { outline: none; }
.silly-after { margin: 6px 12px 0; text-align: center; }
.silly-sentence { margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px; padding: 10px 12px; border-radius: 22px; background: rgba(255,255,255,.95);
  box-shadow: 0 8px 18px rgba(0,0,0,.25); animation: sc-pop .4s cubic-bezier(.2,1.6,.4,1); }
.sw { border: 0; background: none; padding: 2px 3px; border-radius: 8px; font: 600 1.45rem var(--round); color: var(--ink); cursor: pointer; }
.sw.lit { background: #fff3c4; }
.cl-hear.small { width: 40px; height: 40px; font-size: 1rem; }
.silly-q { margin: 10px 0 6px; font: 600 1.2rem var(--round); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.silly-picks { display: flex; justify-content: center; gap: 10px; }
.spick { width: 98px; padding: 6px 4px 8px; border-radius: 22px; border: 0; background: rgba(255,255,255,.96); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px;
  font: 600 .9rem var(--round); color: var(--ink); box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.spick-img { width: 70px; height: 70px; object-fit: contain; }
.spick.ok { background: var(--sun); }
/* 🏎️ race */
.track2 { position: absolute; inset: 0; overflow: hidden; }
.road-img { position: absolute; left: 50%; bottom: -4%; height: 112%; width: auto; translate: -50% 0; max-width: none; }
.gates { position: absolute; left: 4px; right: 4px; top: 6%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; animation: gatesin 1s cubic-bezier(.2,1.2,.4,1); }
@keyframes gatesin { from { transform: scale(.4) translateY(-30px); opacity: 0; } }
.gate2 { position: relative; border: 0; background: none; padding: 0; cursor: pointer; }
.gate-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 8px rgba(0,0,0,.3)); }
.gate-word { position: absolute; left: 50%; top: 13%; translate: -50% 0; font: 700 1.35rem var(--round); color: var(--ink); text-shadow: 0 0 6px #fff, 0 0 10px #fff; white-space: nowrap; }
.kart { position: absolute; left: 50%; bottom: 4%; width: 46%; max-width: 210px; translate: -50% 0; transition: left .3s cubic-bezier(.3,1.4,.5,1); animation: kb .35s ease-in-out infinite alternate; }
@keyframes kb { to { transform: translateY(-4px); } }
.kart-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 8px rgba(0,0,0,.3)); }
.kart-boost { position: absolute; left: 6%; bottom: 20%; width: 30%; height: 18%; border-radius: 50% 0 0 50%; background: linear-gradient(270deg, #ffd65c, #ff7a2a 60%, rgba(255,122,42,0)); opacity: 0; translate: -80% 0; }
.kart.zoom { animation: zoom 1.1s ease-in forwards; }
.kart.zoom .kart-boost { opacity: 1; }
@keyframes zoom { 30% { transform: translateY(6px); } 100% { transform: translateY(-75%) scale(.55); opacity: .2; } }
.kart.bumped { animation: bumped .4s; } @keyframes bumped { 30% { transform: rotate(-8deg) translateX(-10px); } 70% { transform: rotate(6deg) translateX(8px); } }
.race-pos { position: absolute; right: 10px; bottom: 10px; padding: 8px 14px; border-radius: 99px; background: rgba(26,16,56,.75); color: #fff; font: 700 1.3rem var(--round); }
.race-pos.bump { animation: bump .45s cubic-bezier(.2,1.8,.4,1); }
/* 🥚 hatch */
.nestbox { position: relative; height: 58%; display: flex; align-items: flex-end; justify-content: center; }
.nest-img { position: absolute; bottom: 0; width: min(70%, 280px); height: auto; z-index: 1; }
.eggbox { position: relative; z-index: 2; height: 82%; margin-bottom: 12%; aspect-ratio: 100 / 130; animation: eggwob 2s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes eggwob { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-5deg); } 90% { transform: rotate(5deg); } }
.egg-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 20px rgba(255,255,200,.6)); }
.cracks { position: absolute; inset: 8% 10%; width: 80%; height: 84%; fill: none; stroke: #352363; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.cracks path { opacity: 0; transition: opacity .2s; }
.eggbox[data-crack="1"] .ck1, .eggbox[data-crack="2"] .ck1, .eggbox[data-crack="2"] .ck2, .eggbox[data-crack="3"] path { opacity: 1; }
.eggbox.wobble { animation: shake .45s ease-in-out 2; }
.eggbox.nono { animation: wob .5s; }
.eggbox.hatched .cracks { display: none; }
.eggbox.hatched .egg-img { filter: none; }
.newpet { position: absolute; left: 50%; bottom: 26%; z-index: 3; translate: -50% 0; display: flex; flex-direction: column; align-items: center; animation: petpop .7s cubic-bezier(.2,1.7,.4,1); }
.newpet-img { height: 200px; width: auto; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); }
.newpet b { margin-top: 4px; padding: 6px 14px; border-radius: 99px; background: var(--sun); color: var(--ink); font: 700 1.3rem var(--round); }
@keyframes petpop { from { transform: scale(.2) translateY(80px); opacity: 0; } }
.hatch-dots { display: flex; justify-content: center; gap: 8px; margin: 8px 0; }
.hatch-dots span { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.6); border: 3px solid #fff; }
.hatch-dots span.on { background: var(--sun); box-shadow: 0 0 10px var(--sun); }
.hatch-words { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 0 12px; }
.hword { padding: 14px 18px; border-radius: 22px; border: 4px solid #fff; background: linear-gradient(180deg, #c2a6e3, #7f52aa); color: #fff; cursor: pointer;
  font: 700 1.4rem var(--round); box-shadow: 0 6px 0 #5e3a8a, 0 0 18px rgba(255,255,255,.4); }
/* ⚡ duel */
.arena { position: relative; height: 56%; display: flex; flex-direction: column; align-items: center; }
.boss-name { margin: 2px 0 4px; font: 700 1.1rem var(--round); color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,.5); }
.hpbar { width: 70%; height: 16px; border-radius: 99px; border: 3px solid #fff; background: rgba(0,0,0,.35); overflow: hidden; }
.hpbar span { display: block; height: 100%; background: linear-gradient(90deg, #ff7aa2, #e8475f); transition: width .4s; }
.boss { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; animation: tt-float 2.4s ease-in-out infinite; }
.boss-img { max-height: 100%; max-width: 78%; object-fit: contain; filter: drop-shadow(0 0 24px rgba(127,82,170,.9)); }
.boss.hit .boss-img { animation: bosshit .5s ease-out; }
@keyframes bosshit { 20% { transform: translateX(-16px) rotate(-8deg); filter: brightness(2.2); } 60% { transform: translateX(10px) rotate(5deg); } }
.boss.laugh .boss-img { animation: bosslaugh .5s; } @keyframes bosslaugh { 30% { transform: translateY(-14px) scale(1.06); } 60% { transform: translateY(0) scale(.98); } }
.boss.cheered .boss-img { filter: drop-shadow(0 0 30px rgba(255,214,92,.9)); animation: sc-pop .6s cubic-bezier(.2,1.7,.4,1); }
.spellcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 0 10px; }
.scard { position: relative; border: 0; background: none; padding: 0; cursor: pointer; aspect-ratio: 3 / 4; transition: transform .15s; }
.scard:active { transform: translateY(4px); }
.scard-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,.3)); }
.scard-word { position: relative; font: 700 1.2rem var(--round); color: var(--ink); }
.scard.fizzle { filter: grayscale(1) brightness(.8); }
.orb { position: fixed; z-index: 95; width: 80px; height: 80px; pointer-events: none; animation: orbfly .5s ease-in forwards; }
@keyframes orbfly { to { translate: var(--tx) var(--ty); scale: 1.4; } }
/* my pets on the Wizard School page */
.pet-count { font: 700 1rem var(--round); color: var(--muted); }
.pet-note { margin: -6px 16px 10px; color: var(--muted); font-weight: 700; }
.petgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; padding: 0 14px; }
.pslot { aspect-ratio: 1; border-radius: 18px; background: #fff; border: 2px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.pslot .pet-img { width: 80%; height: 70%; object-fit: contain; }
.pslot span { font: 600 .75rem var(--round); color: var(--ink); }
.pslot.empty { font: 700 1.6rem var(--round); color: var(--lilac); background: var(--lilac-l); border-style: dashed; }
@media (orientation: landscape) and (max-height: 520px) {
  .mole-img { max-height: 90px; } .mole-sign { font-size: 1rem; }
  .rock { width: 70px; height: 70px; } .tank { width: 42px; height: 36px; font-size: 1.4rem; } .ship-img { max-height: 150px; }
  .slotm { width: min(44%, 240px); float: left; } .silly-after { margin-top: 0; }
  .spick { width: 80px; } .spick-img { width: 48px; height: 48px; }
  .newpet-img { height: 130px; } .hword { padding: 10px 14px; font-size: 1.1rem; }
  .arena { height: 52%; } .spellcards { grid-template-columns: repeat(4, minmax(0, 90px)); justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .cl-ear, .cl-planet, .mole, .ship.blast, .eggbox, .boss, .kart, .gates { animation: none; } }
.rock { width: 78px; height: 78px; }
.reels { left: 25%; right: 27%; top: 38%; height: 23%; }
.reel.word { font-size: .85rem; }
@media (orientation: landscape) and (max-height: 520px) { .rock { width: 62px; height: 62px; } .rock-letter { font-size: 1.8rem; } }
/* 1.18.1 moles pop out of the hole, not from behind the hill */
.mhole { align-items: flex-end; }
.mh { position: relative; width: 100%; aspect-ratio: 512 / 374; }
.mh .mhill { position: absolute; left: 0; top: 0; width: 100%; height: 100%; max-height: none; object-fit: contain; pointer-events: none; }
.mh .mhill.back { z-index: 0; }
.mh .mhill.front { z-index: 2; clip-path: inset(68% 0 0 0); }
.mpit { position: absolute; z-index: 1; left: 8%; right: 8%; bottom: 30%; height: 150%; overflow: hidden; pointer-events: none; }
.mpit .mole { pointer-events: auto; position: absolute; left: 10%; right: 10%; bottom: 0; top: auto; display: block; }
.mpit .mole-img { display: block; width: 100%; height: auto; max-height: none; }
.mpit .mole-sign { top: 64%; font-size: 1.15rem; }
.mpit .mole.down, .mpit .mole.duck { transform: translateY(105%); opacity: 1; }
.mpit .mole.bonked { transform: translateY(35%) scale(1.05, .9); }
.molefield { grid-template-rows: repeat(2, minmax(0, 1fr)); align-items: end; }
@media (orientation: landscape) and (max-height: 520px) { .molefield { left: auto; width: min(100%, 420px); right: 6px; } .mpit .mole-sign { font-size: .95rem; } }
.mh .mhill.front { clip-path: inset(60% 0 0 0); }
.mpit { left: 14%; right: 14%; bottom: 38%; }
.mpit .mole { left: 4%; right: 4%; }
.mpit .mole-sign { top: 58%; padding: 4px 8px; border-radius: 10px; background: #fff8ec; border: 3px solid #352363; box-shadow: 0 3px 0 rgba(0,0,0,.2); max-width: 110%; font-size: 1.05rem; }

/* ===================================================== 1.19 pizza, frog, invaders, detective */
/* 🍕 */
.cl-order { display: flex; align-items: center; gap: 8px; text-align: left; }
.cl-monster { height: 92px; width: auto; flex: none; filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); }
.cl-monster.chomp { animation: chomp .25s ease-in-out 4; transform-origin: 50% 80%; }
@keyframes chomp { 50% { transform: scale(1.15, .85); } }
.cl-monster.spit { animation: spitm .5s; } @keyframes spitm { 30% { transform: rotate(-12deg) translateX(-10px); } 70% { transform: rotate(8deg); } }
.order-bubble { flex: 1; display: flex; flex-direction: column; font: 600 1rem var(--round); color: var(--muted); }
.order-bubble b { font: 700 2.3rem/1.05 var(--round); color: #e8475f; letter-spacing: .05em; }
.pizza { position: relative; width: min(74%, 290px); aspect-ratio: 1; margin: 6px auto 0; animation: spin 40s linear infinite; }
.pizza-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0,0,0,.35)); }
.pizza.eaten { animation: eaten .8s ease-in forwards; } @keyframes eaten { to { transform: scale(.2) translateY(-200px); opacity: 0; } }
.pz-slots { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; padding: 22%; }
.pz-slot { position: relative; width: 26%; aspect-ratio: 1; border-radius: 50%; border: 3px dashed rgba(255,255,255,.9); display: grid; place-items: center; }
.pz-slot.on { border: 0; animation: sc-pop .35s cubic-bezier(.2,1.6,.4,1); }
.pz-tray { position: absolute; left: 6px; right: 6px; bottom: 2px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.topping { position: relative; aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; transition: transform .15s; }
.topping:disabled { opacity: .2; transform: scale(.8); }
.topping.glow .top-img { filter: drop-shadow(0 0 12px #ffd65c) drop-shadow(0 0 4px #fff); }
.top-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); }
.top-letter { position: relative; font: 700 1.7rem var(--round); color: var(--ink); text-shadow: 0 0 6px #fff, 0 0 10px #fff; }
.pz-slot .top-letter { font-size: 1.4rem; }
.lesson.g-pizza .ls-foot { display: none; }
/* 🐸 */
.pond { position: absolute; inset: 4px 6px 0; }
.lily { position: absolute; width: 26%; max-width: 120px; aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer; display: grid; place-items: center; animation: lily 3.4s ease-in-out infinite; }
@keyframes lily { 50% { transform: translateY(-5px) rotate(4deg); } }
.lily-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 4px rgba(0,40,60,.3)); }
.lily-sound { position: relative; font: 700 2rem var(--round); color: #fff; text-shadow: 0 2px 0 #1f5f30, 0 0 8px #1f5f30; }
.lily.hopped .lily-img { filter: drop-shadow(0 0 12px #ffd65c); }
.lily.glow .lily-img { filter: drop-shadow(0 0 14px #ffd65c) drop-shadow(0 0 4px #fff); }
.frogger { position: absolute; width: 22%; max-width: 100px; translate: -50% -80%; z-index: 3; pointer-events: none; transition: left .42s cubic-bezier(.3,1.2,.5,1), top .42s cubic-bezier(.3,1.2,.5,1); }
.frog-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 8px 6px rgba(0,0,0,.3)); }
.frogger.hop .frog-img { animation: froghop .42s ease-out; } @keyframes froghop { 50% { transform: translateY(-40px) scale(1.1); } }
.frogger.sunk { opacity: .2; transition: opacity .2s; }
.splash-img { position: absolute; width: 30%; max-width: 130px; translate: -50% -60%; z-index: 4; pointer-events: none; animation: sc-pop .4s cubic-bezier(.2,1.6,.4,1); }
/* 👾 */
.space { position: absolute; inset: 0; }
.fleet { position: absolute; left: 6px; right: 6px; top: 4px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 4px; animation: march 3s ease-in-out infinite alternate; }
@keyframes march { from { transform: translateX(-12px); } to { transform: translateX(12px) translateY(14px); } }
.fleet.cleared { animation: none; }
.invader { position: relative; height: 118px; border: 0; background: none; padding: 0; cursor: pointer; animation: inv 1s ease-in-out infinite alternate; }
.invader:nth-child(even) { animation-delay: -.5s; } @keyframes inv { to { transform: translateY(-6px) rotate(3deg); } }
.inv-img { height: 100%; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 0 10px rgba(194,166,227,.7)); }
.inv-word { position: absolute; left: 50%; top: 56%; translate: -50% -50%; font: 700 1.05rem var(--round); color: var(--ink); white-space: nowrap; }
.invader.dead { pointer-events: none; }
.invader.dead .inv-img, .invader.dead .inv-word { animation: invdie .5s ease-in forwards; } @keyframes invdie { to { transform: scale(.2) rotate(90deg); opacity: 0; } }
.boom-img { position: absolute; left: 50%; top: 50%; width: 110%; translate: -50% -50%; animation: boom2b .6s ease-out forwards; pointer-events: none; }
@keyframes boom2b { from { transform: scale(.3); opacity: 1; } to { transform: scale(1.4) rotate(40deg); opacity: 0; } }
.invader.laugh { animation: inv .12s ease-in-out 4 alternate; }
.invader.glow .inv-img { filter: drop-shadow(0 0 14px #ffd65c) drop-shadow(0 0 4px #fff); }
.gunship { position: absolute; left: 50%; bottom: 4px; width: 22%; max-width: 92px; translate: -50% 0; transform: rotate(var(--aim, 0deg)); transition: transform .15s; }
.gun-img { width: 100%; height: auto; display: block; filter: drop-shadow(0 0 14px rgba(127,82,170,.8)); }
.gunship.hit { animation: shake .4s; }
.shields { position: absolute; left: 8px; bottom: 8px; display: flex; gap: 2px; }
.sh-img { width: 30px; height: 30px; object-fit: contain; transition: opacity .3s, transform .3s; }
.sh-img.lost { opacity: .15; transform: scale(.7); }
.bolt { position: fixed; z-index: 95; width: 36px; height: auto; pointer-events: none; animation: boltfly .28s linear forwards; }
@keyframes boltfly { to { translate: var(--tx) var(--ty); } }
.lesson.g-invaders .ls-foot { display: none; }
/* 🕵️ */
.clue-note { position: relative; text-align: left; padding: 4px 4px 0; }
.clue-note small { font: 800 .75rem var(--body, inherit); letter-spacing: .1em; color: #a8743f; }
.cn-line { margin: 2px 0; font: 600 1.35rem/1.3 var(--round); color: var(--ink); animation: sc-pop .35s cubic-bezier(.2,1.6,.4,1); }
.cn-line:not(:last-child) { color: var(--muted); }
.cn-more { margin-top: 4px; padding: 7px 12px; border-radius: 99px; border: 0; background: var(--ink); color: #fff; font: 600 .95rem var(--round); cursor: pointer; }
.cn-more[hidden] { display: none; }
.lesson.g-detective .clue { background: #fff3d6; border-color: #fff3d6; transform: rotate(-1.2deg); border-radius: 8px; }
.lesson.g-detective .cl-row { display: none; }
.room { position: absolute; inset: 4px 6px 0; }
.thing { position: absolute; width: 28%; max-width: 120px; aspect-ratio: 1; border: 0; background: none; padding: 0; cursor: pointer; animation: tt-float 3s ease-in-out infinite; }
.thing-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,.35)); }
.thing.found { animation: found .7s cubic-bezier(.2,1.7,.4,1); z-index: 3; } @keyframes found { 40% { transform: scale(1.45) rotate(8deg); } }
.thing.dim { opacity: .35; filter: grayscale(.8); }
.thing.glow .thing-img { filter: drop-shadow(0 0 14px #ffd65c) drop-shadow(0 0 4px #fff); }
.glass { position: absolute; left: 70%; top: 70%; width: 70px; height: auto; z-index: 4; pointer-events: none; transition: left .35s ease, top .35s ease; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.solved { position: absolute; left: 50%; top: 40%; z-index: 5; translate: -50% -50%; display: flex; flex-direction: column; align-items: center; animation: petpop .7s cubic-bezier(.2,1.7,.4,1); }
.badge-img { width: 130px; height: auto; filter: drop-shadow(0 0 24px rgba(255,214,92,.9)); }
.solved b { margin-top: 4px; padding: 6px 14px; border-radius: 99px; background: var(--sun); color: var(--ink); font: 700 1.3rem var(--round); }
@media (orientation: landscape) and (max-height: 520px) {
  .cl-monster { height: 60px; } .order-bubble b { font-size: 1.6rem; }
  .pizza { width: min(46%, 200px); margin: 0 auto 0 4%; } .pz-tray { left: 52%; top: 10%; bottom: auto; grid-template-columns: repeat(3, 1fr); }
  .invader { height: 82px; } .inv-word { font-size: .9rem; } .fleet { grid-template-columns: repeat(6, 1fr); }
  .lily { width: 16%; } .frogger { width: 13%; } .thing { width: 15%; } .cn-line { font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) { .pizza, .lily, .fleet, .invader, .thing { animation: none; } }
.inv-word { top: 60%; padding: 3px 8px; border-radius: 9px; background: #fff8ec; border: 3px solid #7f52aa; box-shadow: 0 3px 0 rgba(0,0,0,.25); font-size: 1.1rem; }
.pz-slots { padding: 16%; gap: 2%; }
.pz-slot { width: 30%; }
.pz-slot .top-img { inset: -6%; width: 112%; height: 112%; }
.pz-slot .top-letter { font-size: 2rem; }
.lesson.g-detective .thing { width: 30%; }
@media (orientation: landscape) and (max-height: 520px) { .inv-word { font-size: .85rem; padding: 2px 5px; } .lesson.g-detective .thing { width: 17%; } }

/* ===================================================== 1.20 Trace It + Letter Pairs */
.tboard { position: absolute; inset: 4px 10px 6px; border-radius: 30px; background: rgba(26,16,56,.35); backdrop-filter: blur(2px); box-shadow: inset 0 0 0 4px rgba(255,255,255,.35); overflow: hidden; }
.tcanvas { display: block; touch-action: none; cursor: crosshair; }
.tboard.traced { animation: traced .8s cubic-bezier(.2,1.6,.4,1); box-shadow: inset 0 0 0 5px #ffd65c, 0 0 40px rgba(255,214,92,.7); }
@keyframes traced { 40% { transform: scale(1.04) rotate(-2deg); } }
.tword { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 99px; background: #fff;
  font: 700 1.6rem var(--round); color: var(--purple); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .5s cubic-bezier(.2,1.7,.4,1); pointer-events: none; }
.tword span { font-size: 2rem; }
.tword.shown { opacity: 1; transform: scale(1); }
.lesson.g-trace .cl-word { font-size: 3rem; }
.pairgrid { position: absolute; inset: 6px 12px; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 1fr; gap: 10px; align-content: center; }
.pcard { position: relative; border: 0; background: none; padding: 0; cursor: pointer; perspective: 600px; aspect-ratio: 3 / 4; animation: dealin .4s var(--d) cubic-bezier(.2,1.5,.4,1) both; }
@keyframes dealin { from { transform: translateY(-40px) rotate(-10deg); opacity: 0; } }
.pc-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .4s; }
.pcard.up .pc-inner { transform: rotateY(180deg); }
.pc-back, .pc-front { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pc-back { background: repeating-linear-gradient(45deg, #7f52aa 0 10px, #9a6cc6 10px 20px); border: 4px solid #fff; font-size: 1.8rem; box-shadow: 0 6px 0 rgba(0,0,0,.2); }
.pc-front { transform: rotateY(180deg); background: #fff8ec; border: 4px solid #ffd65c; box-shadow: 0 6px 0 rgba(0,0,0,.2); }
.pc-front b { font: 700 2.6rem/1 var(--round); color: var(--purple); }
.pc-front small { font-size: 1.4rem; }
.pcard.matched .pc-front { border-color: #3fae5a; background: #eaffea; }
.pcard.matched { animation: found .6s cubic-bezier(.2,1.7,.4,1); }
@media (orientation: landscape) and (max-height: 520px) { .pairgrid { grid-template-columns: repeat(8, 1fr); } .pc-front b { font-size: 1.8rem; } }
.tword { flex-direction: row; width: max-content; height: auto; top: auto; white-space: nowrap; }
.tword > * { display: inline-block; height: auto; width: auto; }
.pairgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; align-content: center; }
.pcard { width: 100%; height: auto; min-width: 0; }
@media (orientation: landscape) and (max-height: 520px) { .pairgrid { grid-template-columns: repeat(8, minmax(0, 1fr)); left: 40%; } }
.pairgrid { gap: 12px 8px; }
.pc-front small { font-size: 1.8rem; }
@media (orientation: portrait) { .pairgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); inset: 0 26px; } }
@media (orientation: landscape) and (max-height: 520px) { .pairgrid { grid-template-columns: repeat(4, minmax(0, 92px)); justify-content: center; left: 36%; top: 0; bottom: 0; } }

/* ===================================================== 1.21 letter pictures + sticker book */
.cl-abc { height: 72px; width: auto; filter: drop-shadow(0 4px 4px rgba(0,0,0,.18)); }
.tw-img { height: 44px; width: auto; }
.tword { padding: 6px 18px 6px 8px; }
.pc-back { background: none; border: 0; box-shadow: none; }
.pc-back-img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 5px 0 rgba(0,0,0,.2)); }
.pc-front { gap: 2px; }
.pc-front b { font-size: 2.2rem; }
.pc-abc { width: 64%; height: auto; max-height: 50%; object-fit: contain; }
.sticker-fly { position: fixed; z-index: 96; width: 100px; height: auto; pointer-events: none; animation: stickfly 2.2s cubic-bezier(.5,0,.5,1) forwards; filter: drop-shadow(0 6px 10px rgba(0,0,0,.35)); }
@keyframes stickfly { 0% { transform: scale(.2) rotate(-30deg); } 25% { transform: scale(1.3) rotate(8deg); } 55% { transform: scale(1.1) rotate(-4deg); translate: 0 0; } 100% { transform: scale(.25); translate: var(--tx) var(--ty); opacity: .2; } }
.sticker-shine { position: fixed; z-index: 95; width: 110px; pointer-events: none; animation: popped .9s ease-out forwards; }
.sb-cover { display: flex; align-items: center; gap: 12px; width: calc(100% - 28px); margin: 0 14px; padding: 10px 14px; border-radius: 22px; border: 2px solid var(--line); background: #fff; cursor: pointer; text-align: left; font: 600 1rem var(--round); color: var(--ink); }
.sb-cover img { width: 76px; height: auto; flex: none; transform: rotate(-6deg); filter: drop-shadow(0 4px 4px rgba(0,0,0,.2)); }
.sbook { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 12px; background: rgba(26,16,56,.6); }
.sbook[hidden] { display: none; }
.sb-page { position: relative; width: min(100%, 560px); max-height: calc(100dvh - 24px); overflow: auto; padding: 22px 18px 20px; border-radius: 18px;
  background: url("/static/learn/sticker_page.webp") center / cover, #fff3d6; box-shadow: 0 20px 50px rgba(0,0,0,.4); animation: sc-pop .4s cubic-bezier(.2,1.5,.4,1); }
.sb-page h2 { margin: 0 0 12px; text-align: center; font-size: 1.8rem; color: var(--purple); }
.sb-x { position: absolute; right: 10px; top: 10px; color: var(--ink); border-color: var(--ink); }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 10px; }
.sb-slot { position: relative; aspect-ratio: 1; border-radius: 16px; border: 3px dashed rgba(127,82,170,.35); display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.45); }
.sb-slot img { width: 80%; height: 80%; object-fit: contain; filter: grayscale(1) opacity(.15); }
.sb-slot b { position: absolute; left: 6px; top: 4px; font: 700 .9rem var(--round); color: rgba(53,35,99,.45); }
.sb-slot.got { border: 0; background: none; cursor: pointer; }
.sb-slot.got img { filter: drop-shadow(0 4px 4px rgba(0,0,0,.25)); transform: rotate(var(--r, -4deg)); }
.sb-slot.got:nth-child(odd) img { --r: 5deg; }
.sb-slot.got b { color: var(--purple); }
.sb-slot.found { animation: found .6s cubic-bezier(.2,1.7,.4,1); }
.sb-page { width: min(calc(100vw - 24px), 560px); }
.pc-back { border-radius: 14px; overflow: hidden; box-shadow: 0 5px 0 rgba(0,0,0,.2); }
.pc-back-img { object-fit: cover; filter: none; transform: scale(1.04); }

/* ===================================================== 1.21.1 desktop + tablet: keep games a sensible size */
.sb-cover { aspect-ratio: auto; height: auto; }
@media (min-width: 640px) {
  /* the painted scene fills the screen; the game itself sits in a centred play column */
  .lesson { --playw: min(100%, 620px); }
  .lesson .ls-top, .lesson .ls-pips, .lesson .clue, .lesson .stage, .lesson .ls-feedback, .lesson .ls-foot {
    width: var(--playw); max-width: calc(100% - 32px); margin-left: auto; margin-right: auto; box-sizing: border-box; }
  .lesson .ls-pips { width: calc(var(--playw) - 32px); }
  .lesson .stage { max-height: 760px; }
  .lesson .ls-done { left: 50%; right: auto; width: var(--playw); translate: -50% 0; }
  .lesson .clue { margin-top: 14px; }
}
@media (min-width: 640px) and (min-height: 700px) {
  .lesson .cl-word { font-size: 3.6rem; }
  .lesson .bub { width: 124px; height: 124px; }
}
/* big landscape screens (desktop, tablet sideways): play column a bit wider, clue beside nothing */
@media (min-width: 1000px) and (min-height: 600px) { .lesson { --playw: 680px; } }
.mk-chip.quick { background: var(--sun); border-color: var(--sun-d); color: var(--ink); font-weight: 900; }
.mk-nope { animation: shake .45s; border-color: var(--coral) !important; }
/* 1.22.1 short laptop / small desktop windows: compact clue so the game gets the room */
@media (min-width: 640px) and (max-height: 760px) {
  .lesson .clue { padding: 8px 14px; margin-top: 8px; }
  .lesson .cl-abc { height: 46px; } .lesson .cl-emoji { font-size: 2.2rem; }
  .lesson[class*=" g-"] .cl-word { font-size: 2.2rem; } .lesson[class*=" g-"] .cl-sentence { font-size: 1.25rem; }
  .lesson .cl-row { margin-top: 2px; } .lesson .cl-hear { width: 38px; height: 38px; font-size: 1rem; }
  .lesson[class*=" g-"] .ls-wiz { height: 80px; } .lesson[class*=" g-"] .ls-say { margin-bottom: 46px; }
  .lesson.g-trace .ls-foot, .lesson.g-pairs .ls-foot { display: none; }
}

/* ===================================================== 1.23 ABC Sounds, Sound Hunt, Dot to Dot, brushes */
.brushes { position: absolute; right: 10px; top: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.brush { width: 46px; height: 46px; border-radius: 50%; border: 3px solid rgba(255,255,255,.6); background: rgba(26,16,56,.45); font-size: 1.4rem; cursor: pointer; }
.brush.on { border-color: var(--sun); background: #fff; box-shadow: 0 0 14px rgba(255,214,92,.9); transform: scale(1.1); }
.sb-meter { display: inline-flex; gap: 4px; }
.sb-meter i { width: 14px; height: 14px; border-radius: 50%; background: var(--lilac-l); border: 2px solid var(--lilac); }
.sb-meter i.on { background: var(--sun); border-color: var(--sun-d); animation: sc-pop .3s cubic-bezier(.2,1.6,.4,1); }
.abcboard { position: absolute; inset: 4px 8px auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; max-height: 64%; overflow: auto; }
.abctile { aspect-ratio: 1; border: 0; border-radius: 16px; background: var(--c); color: #fff; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center;
  box-shadow: 0 5px 0 rgba(0,0,0,.2); animation: dealin .35s cubic-bezier(.2,1.5,.4,1) both; text-shadow: 0 2px 0 rgba(0,0,0,.2); }
.abctile b { font: 700 1.5rem/1 var(--round); } .abctile small { font: 700 .95rem/1 var(--round); opacity: .9; }
.abctile.seen { box-shadow: 0 5px 0 rgba(0,0,0,.2), inset 0 0 0 3px #fff; }
.abctile.boing { animation: boing .5s cubic-bezier(.3,1.8,.5,1); }
.abcpop { position: absolute; left: 0; right: 0; bottom: 4px; height: 34%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; pointer-events: none; }
.abcpop-img { height: 76%; width: auto; filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.abcpop b { margin-top: 4px; padding: 4px 14px; border-radius: 99px; background: #fff; color: var(--purple); font: 700 1.3rem var(--round); }
.abcpop.popin2 { animation: petpop .5s cubic-bezier(.2,1.7,.4,1); }
.cl-word.huge { font-size: 4.4rem !important; }
.huntrow { position: absolute; inset: 0 8px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.hunt { flex: 1; max-width: 180px; border: 0; padding: 10px 6px 8px; border-radius: 26px; background: rgba(255,255,255,.95); cursor: pointer; display: flex; flex-direction: column; align-items: center;
  box-shadow: 0 8px 0 rgba(0,0,0,.18); animation: dealin .4s cubic-bezier(.2,1.5,.4,1) both; }
.hunt-img { width: 100%; height: auto; max-height: 150px; object-fit: contain; }
.hunt-word { font: 700 1.2rem var(--round); color: var(--ink); }
.hunt.ok { background: var(--sun); transform: scale(1.08); }
.hunt.glow { box-shadow: 0 0 0 6px var(--sun), 0 0 30px rgba(255,214,92,.9); }
.dotbox { position: absolute; inset: 6px 10px; }
.dotcv { position: absolute; inset: 0; pointer-events: none; }
.dot { position: absolute; width: 62px; height: 62px; translate: -50% -50%; border-radius: 50%; border: 4px solid #fff; background: var(--c); color: #fff; cursor: pointer;
  font: 700 1.9rem var(--round); box-shadow: 0 5px 0 rgba(0,0,0,.25); z-index: 1; animation: dealin .35s cubic-bezier(.2,1.5,.4,1) both; }
.dot.done { background: #fff; color: var(--c); border-color: var(--c); transform: scale(.85); }
.dot.glow { box-shadow: 0 0 0 6px var(--sun), 0 0 26px rgba(255,214,92,.9); }
.dotprize { position: absolute; left: 50%; top: 46%; translate: -50% -50%; z-index: 3; display: flex; flex-direction: column; align-items: center; animation: petpop .7s cubic-bezier(.2,1.7,.4,1); }
.dotprize-img { height: 150px; width: auto; filter: drop-shadow(0 8px 12px rgba(0,0,0,.4)); }
.dotprize b { margin-top: 4px; padding: 6px 14px; border-radius: 99px; background: var(--sun); color: var(--ink); font: 700 1.3rem var(--round); }
@media (orientation: landscape) and (max-height: 520px) {
  .abcboard { grid-template-columns: repeat(13, 1fr); max-height: 56%; } .abctile b { font-size: 1.1rem; } .abctile small { display: none; }
  .hunt-img { max-height: 110px; } .dot { width: 48px; height: 48px; font-size: 1.4rem; } .dotprize-img { height: 100px; }
}
.abcpop { background: none; }
.dotbox { inset: 6px 10px; max-width: 520px; margin: 0 auto; }
.dotprize { top: 50%; }
.dotprize-img { height: 120px; }

/* ===================================================== 1.24 Balloon Party, Star Catch, Peekaboo + new art */
.cl-ear-img { height: 46px; width: auto; animation: tt-float 2s ease-in-out infinite; }
.abctile { position: relative; background: none; box-shadow: none; color: var(--purple); text-shadow: none; }
.tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: hue-rotate(calc(var(--h, 0) * 1deg)) drop-shadow(0 4px 3px rgba(0,0,0,.2)); }
.abctile b, .abctile small { position: relative; }
.abctile.seen .tile-img { filter: drop-shadow(0 0 8px #fff) drop-shadow(0 4px 3px rgba(0,0,0,.2)); }
.dot { background: none; border: 0; box-shadow: none; width: 70px; height: 70px; }
.dot-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 4px 4px rgba(0,0,0,.3)); }
.dot b { position: relative; font: 700 1.7rem var(--round); color: var(--purple); }
.dot.done { transform: scale(.85); } .dot.done .dot-img { filter: drop-shadow(0 0 12px #ffd65c); }
.hunt-pic { position: relative; width: 100%; aspect-ratio: 1; display: grid; place-items: center; }
.hunt-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.hunt-pic .hunt-img { width: 64%; max-height: none; position: relative; }
.brush { padding: 4px; } .brush-img { width: 100%; height: 100%; object-fit: contain; }
/* 🎈 */
.balsky { position: absolute; inset: 0; pointer-events: none; }
.balloon { position: absolute; left: 0; top: 0; width: 96px; height: 130px; border: 0; background: none; padding: 0; cursor: pointer; }
.bal-skin { position: absolute; left: 0; right: 0; top: 0; height: 104px; border-radius: 50% 50% 46% 46% / 55% 55% 45% 45%; background: radial-gradient(circle at 32% 26%, rgba(255,255,255,.75) 0 10%, var(--b) 40%);
  box-shadow: inset -8px -10px 0 rgba(0,0,0,.12), 0 6px 10px rgba(0,0,0,.2); }
.bal-skin::after { content: ""; position: absolute; left: 50%; bottom: -8px; translate: -50% 0; border: 8px solid transparent; border-top-color: var(--b); }
.bal-img { position: absolute; left: 14%; top: 12%; width: 72%; height: 64%; object-fit: contain; }
.bal-string { position: absolute; left: 50%; top: 110px; width: 2px; height: 30px; background: rgba(255,255,255,.8); }
.balloon.popped { animation: popped .3s ease-out forwards; pointer-events: none; }
.balloon.boing { animation: boing .5s; }
.balloon.glow .bal-skin { box-shadow: 0 0 0 5px #fff, 0 0 26px 6px #ffd65c; }
/* 🧺 */
.catchfield { position: absolute; inset: 0; touch-action: none; cursor: pointer; overflow: hidden; }
.fallstar { position: absolute; width: 74px; height: 74px; translate: -50% -50%; display: grid; place-items: center; pointer-events: none; animation: spin 6s linear infinite; }
.fs-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 0 10px rgba(255,214,92,.8)); }
.fallstar b { position: relative; font: 700 1.8rem var(--round); color: var(--purple); }
.basket { position: absolute; bottom: 2%; width: 140px; translate: -50% 0; transition: left .08s linear; pointer-events: none; }
.basket-img { width: 100%; height: auto; display: block; position: relative; z-index: 2; }
.catch-pet { position: absolute; left: 22%; bottom: 40%; width: 56%; z-index: 1; }
.basket-n { position: absolute; left: 50%; bottom: -4px; translate: -50% 0; z-index: 3; padding: 2px 10px; border-radius: 99px; background: var(--sun); color: var(--ink); font: 700 1rem var(--round); white-space: nowrap; }
.basket.bump { animation: bump .4s; } .basket.nope { animation: shake .4s; }
.lesson.g-catch .ls-foot { display: none; }
/* 🚪 */
.doors { position: absolute; inset: 6% 10px 4%; display: flex; align-items: flex-end; justify-content: center; gap: 12px; }
.door { position: relative; flex: 1; max-width: 150px; aspect-ratio: 3 / 5; border: 0; padding: 0; background: none; cursor: pointer; perspective: 600px; }
.door-in { position: absolute; inset: 0; border-radius: 60px 60px 8px 8px; background: radial-gradient(circle at 50% 40%, #fff6c2, #ffd65c 70%); box-shadow: inset 0 0 20px rgba(0,0,0,.25);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; overflow: hidden; }
.door-panel { position: absolute; inset: 0; border-radius: 60px 60px 8px 8px; background: linear-gradient(90deg, rgba(0,0,0,.08), transparent 30%), var(--d); border: 5px solid #fff;
  display: grid; place-items: center; font: 700 3.4rem var(--round); color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.25); transform-origin: 0 50%; transition: transform .6s cubic-bezier(.3,1.2,.5,1);
  box-shadow: 0 8px 0 rgba(0,0,0,.2); }
.door-knob { position: absolute; right: 14%; top: 56%; width: 16px; height: 16px; border-radius: 50%; background: #ffd65c; box-shadow: 0 2px 0 #c9931a; transition: opacity .2s; }
.door.open .door-panel { transform: rotateY(-105deg); } .door.open .door-knob { opacity: 0; }
.door.peek .door-panel { transform: rotateY(-35deg); }
.door-pet { width: 90%; height: auto; margin-bottom: 18%; animation: petpop .6s cubic-bezier(.2,1.7,.4,1); }
.door-pic { position: absolute; top: 8%; width: 40%; height: auto; }
.door-zzz { margin-bottom: 40%; font-size: 2rem; }
.door.glow .door-panel { box-shadow: 0 0 0 6px #ffd65c, 0 0 30px rgba(255,214,92,.9); }
@media (orientation: landscape) and (max-height: 520px) { .balloon { width: 72px; height: 100px; } .bal-skin { height: 80px; } .bal-string { top: 84px; height: 16px; }
  .door { max-width: 100px; } .door-panel { font-size: 2.4rem; } .basket { width: 100px; } }
.fallstar { animation: none; } .fs-img { animation: spin 6s linear infinite; }
@media (max-width: 480px) { .balloon { width: 80px; height: 112px; } .bal-skin { height: 88px; } .bal-string { top: 94px; height: 18px; } }

/* ===================================================== 1.25 Sound Drums, Magic Paint, Pet Picnic */
.drums { position: absolute; inset: 4% 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: center; justify-items: center; }
.drum { position: relative; width: min(100%, 170px); aspect-ratio: 1; border: 0; padding: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 50% 40%, #fff 0 46%, var(--d) 48% 62%, #fff 63% 66%, var(--d) 67%); box-shadow: 0 10px 0 rgba(0,0,0,.25), inset 0 -8px 0 rgba(0,0,0,.15); }
.drum-img { position: absolute; left: 22%; top: 14%; width: 56%; height: 56%; object-fit: contain; }
.drum b { position: absolute; left: 50%; bottom: 13%; translate: -50% 0; font: 700 1.6rem var(--round); color: var(--ink); }
.drum.hit { animation: drumhit .35s ease-out; }
@keyframes drumhit { 30% { transform: scale(.9); box-shadow: 0 4px 0 rgba(0,0,0,.25), 0 0 0 10px #fff, 0 0 40px 14px var(--d); } }
.drums.watch .drum { cursor: default; }
.simon-say { font-weight: 600; }
.paintwrap { position: absolute; inset: 4px 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.pgrid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; width: min(100%, 420px); padding: 8px; border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
.pcell { aspect-ratio: 1; border: 0; border-radius: 6px; background: #f4ecfb; color: var(--muted); font: 700 1rem var(--round); cursor: pointer; padding: 0; transition: background .25s, transform .2s; }
.pcell.hint { background: #fff3c4; color: var(--ink); }
.pcell.painted { transform: scale(1.04); }
.pgrid.done .pcell:not(.painted) { background: #fff; color: transparent; }
.pgrid.done { animation: traced .8s cubic-bezier(.2,1.6,.4,1); }
.pots { display: flex; gap: 10px; }
.ppot { position: relative; width: 64px; height: 64px; border-radius: 12px 12px 22px 22px; border: 4px solid #fff; background: var(--p); cursor: pointer; box-shadow: 0 6px 0 rgba(0,0,0,.2); }
.ppot b { font: 700 1.8rem var(--round); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
.ppot.on { transform: translateY(-8px) scale(1.1); box-shadow: 0 0 0 4px var(--sun), 0 10px 0 rgba(0,0,0,.2); }
.ppot.used { opacity: .4; }
.picnic { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding-bottom: 6px; }
.ppet { position: relative; display: flex; flex-direction: column; align-items: center; margin-top: 4%; }
.ppet-img { height: min(30vh, 220px); width: auto; filter: drop-shadow(0 10px 12px rgba(0,0,0,.3)); }
.ppet-say { margin-top: 6px; padding: 6px 14px; border-radius: 99px; background: #fff; color: var(--ink); font: 700 1.1rem var(--round); }
.ppet.munch .ppet-img { animation: munch2 .6s; } .ppet.yuck .ppet-img { animation: yuck2 .5s; }
.rug { display: flex; gap: 10px; justify-content: center; padding: 14px 12px; border-radius: 26px; background: repeating-linear-gradient(45deg, #ff7aa2 0 18px, #fff 18px 36px); box-shadow: 0 8px 18px rgba(0,0,0,.2); }
.food { width: 100px; border: 0; border-radius: 22px; background: #fff; padding: 8px 4px; cursor: pointer; display: flex; flex-direction: column; align-items: center; font: 700 1rem var(--round); color: var(--ink); box-shadow: 0 6px 0 rgba(0,0,0,.15); }
.food-img { width: 76px; height: 76px; object-fit: contain; }
.food.glow { box-shadow: 0 0 0 5px var(--sun), 0 0 26px rgba(255,214,92,.9); }
.lesson.g-picnic .ls-foot, .lesson.g-paint .ls-foot { display: none; }
@media (orientation: landscape) and (max-height: 520px) { .drums { grid-template-columns: repeat(4, 1fr); } .drum { width: min(100%, 120px); }
  .paintwrap { flex-direction: row; } .pgrid { width: min(62%, 300px); } .pots { flex-direction: column; } .ppet-img { height: 120px; } .food { width: 80px; } .food-img { width: 52px; height: 52px; } }

.lesson.g-paint .cl-word { font-size: 2.4rem !important; }
.ppot .pot-paint { display: none; }

/* ===================================================== 1.26 Word Search + Missing Letter */
.ws-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.ws-word { display: flex; align-items: center; gap: 4px; padding: 4px 10px 4px 4px; border-radius: 99px; border: 3px solid var(--line); background: #fff; cursor: pointer; font: 700 1.05rem var(--round); color: var(--ink); }
.ws-pic { width: 34px; height: 34px; object-fit: contain; }
.ws-word.got { border-color: var(--f); background: var(--f); color: #fff; text-decoration: line-through; text-decoration-thickness: 3px; }
.wsgrid { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: min(calc(100% - 20px), 64vh, 460px); aspect-ratio: 1; display: grid;
  grid-template-columns: repeat(var(--n), 1fr); gap: 4px; padding: 8px; border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 12px 28px rgba(0,0,0,.3); touch-action: none; user-select: none; }
.wscell { display: grid; place-items: center; border-radius: 10px; background: #f4ecfb; font: 700 clamp(1.2rem, 5vw, 2rem) var(--round); color: var(--ink); text-transform: lowercase; cursor: pointer; transition: background .15s, transform .15s; }
.wscell.sel { background: var(--sun); transform: scale(1.06); }
.wscell.found { background: var(--f); color: #fff; }
.wscell.hint { animation: bump .6s; box-shadow: 0 0 0 4px var(--sun); }
.wsgrid.nope { animation: shake .4s; }
.lesson.g-wordsearch .ls-foot { display: none; }
.gapword { position: absolute; left: 0; right: 0; top: 18%; display: flex; justify-content: center; gap: 8px; }
.gl { width: 64px; height: 76px; border-radius: 16px; background: #fff; display: grid; place-items: center; font: 700 2.6rem var(--round); color: var(--purple); box-shadow: 0 6px 0 rgba(0,0,0,.18); }
.gl-gap { border: 4px dashed var(--lilac); color: var(--lilac); background: #fff8ec; }
.gl.filled { border: 4px solid var(--sun); color: var(--purple); animation: sc-pop .4s cubic-bezier(.2,1.6,.4,1); }
.gl.wrong { color: var(--coral); animation: shake .4s; }
.gapopts { position: absolute; left: 0; right: 0; bottom: 14%; display: flex; justify-content: center; gap: 14px; }
.gapopt { width: 78px; height: 78px; border-radius: 50%; border: 4px solid #fff; background: var(--purple); color: #fff; font: 700 2.4rem var(--round); cursor: pointer; box-shadow: 0 6px 0 var(--purple-d); }
.gapopt:nth-child(2) { background: var(--teal); box-shadow: 0 6px 0 var(--teal-d); } .gapopt:nth-child(3) { background: var(--coral); box-shadow: 0 6px 0 var(--coral-d); }
.gapopt.glow { box-shadow: 0 0 0 6px var(--sun), 0 0 26px rgba(255,214,92,.9); }
@media (max-width: 400px) { .gl { width: 54px; height: 66px; font-size: 2.1rem; } }
@media (orientation: landscape) and (max-height: 520px) { .wsgrid { width: min(92%, 300px); } .gapword { top: 8%; } .gapopts { bottom: 8%; } }

/* ===================================================== 1.26.1 the wizard is a big, lively companion in every game */
.lesson .ls-foot, .lesson[class*=" g-"] .ls-foot { display: flex !important; position: absolute !important; left: 0; bottom: 0; z-index: 6; width: auto !important; max-width: none !important;
  margin: 0 !important; padding: 0 0 max(4px, env(safe-area-inset-bottom)) 0 !important; pointer-events: none; align-items: flex-end; }
.lesson .ls-foot[hidden] { display: none !important; }
.lesson .ls-buddy { display: flex !important; align-items: flex-end; gap: 0; }
.lesson .ls-wiz, .lesson[class*=" g-"] .ls-wiz { height: 150px; width: auto; margin-left: -18px; filter: drop-shadow(0 8px 14px rgba(0,0,0,.4)); transform-origin: 50% 100%;
  animation: wizin .7s cubic-bezier(.2,1.6,.4,1) both, wizidle 2.6s 0.7s ease-in-out infinite; }
@keyframes wizin { from { transform: translateX(-120%) rotate(-20deg); } }
@keyframes wizidle { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.lesson .ls-wiz.hop { animation: hop2 .7s cubic-bezier(.3,1.7,.5,1), wizidle 2.6s .7s ease-in-out infinite; }
@keyframes hop2 { 35% { transform: translateY(-46px) rotate(-10deg) scale(1.12); } 70% { transform: translateY(0) scale(.94, 1.06); } }
.lesson .ls-wiz.wobble { animation: wob2 .7s, wizidle 2.6s .7s ease-in-out infinite; }
@keyframes wob2 { 20% { transform: rotate(-14deg); } 45% { transform: rotate(12deg); } 70% { transform: rotate(-6deg); } }
.lesson .ls-say, .lesson[class*=" g-"] .ls-say { margin: 0 0 104px -10px; padding: 9px 14px; border-radius: 18px 18px 18px 4px; font: 700 1.05rem var(--round); max-width: 180px; white-space: normal;
  box-shadow: 0 5px 0 rgba(0,0,0,.15); border: 3px solid var(--sun); }
.lesson .ls-say.pop { animation: saypop .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes saypop { from { transform: scale(.3) translate(-30px, 30px); opacity: 0; } }
.lesson .ls-mic, .lesson .ls-side { display: none !important; }
/* the stage no longer shares its space with the wizard */
.lesson .stage { margin-bottom: 4px; }
/* wide screens: a big wizard beside the play area, never on top of the game */
@media (min-width: 1000px) {
  .lesson .ls-foot, .lesson[class*=" g-"] .ls-foot { left: max(8px, calc(50% - var(--playw, 680px) / 2 - 300px)); bottom: 10px; }
  .lesson .ls-wiz, .lesson[class*=" g-"] .ls-wiz { height: min(42vh, 320px); margin-left: 0; }
  .lesson .ls-say, .lesson[class*=" g-"] .ls-say { margin-bottom: min(28vh, 220px); font-size: 1.3rem; max-width: 230px; }
}
/* sideways phones: smaller, tucked in the corner */
@media (orientation: landscape) and (max-height: 520px) {
  .lesson .ls-foot, .lesson[class*=" g-"] .ls-foot { display: flex !important; left: 0; bottom: 0; }
  .lesson .ls-buddy { display: flex !important; }
  .lesson .ls-wiz, .lesson[class*=" g-"] .ls-wiz { height: 104px; }
  .lesson .ls-say, .lesson[class*=" g-"] .ls-say { display: none; }
  .lesson .ls-feedback { margin-left: 100px !important; }
}
/* small phones: the bubble sits just above the wizard's hat */
@media (max-width: 400px) { .lesson .ls-wiz, .lesson[class*=" g-"] .ls-wiz { height: 128px; } .lesson .ls-say { margin-bottom: 92px; font-size: .95rem; max-width: 150px; } }
.lesson .ls-wiz { display: block !important; }
@media (max-width: 999px) { .lesson .ls-wiz, .lesson[class*=" g-"] .ls-wiz { height: 168px; margin-left: -6px; } .lesson .ls-say, .lesson[class*=" g-"] .ls-say { margin-bottom: 120px; } }
@media (max-width: 400px) { .lesson .ls-wiz, .lesson[class*=" g-"] .ls-wiz { height: 150px; } .lesson .ls-say, .lesson[class*=" g-"] .ls-say { margin-bottom: 108px; } }
@media (orientation: landscape) and (max-height: 520px) { .lesson .ls-wiz, .lesson[class*=" g-"] .ls-wiz { height: 120px; margin-left: 0; } }
.lesson .ls-foot, .lesson[class*=" g-"] .ls-foot { right: auto !important; justify-content: flex-start !important; }
/* phones: keep bottom-row controls clear of the wizard */
@media (max-width: 999px) and (orientation: portrait) {
  .lesson .pz-tray { left: 118px; grid-template-columns: repeat(3, 1fr); bottom: 6px; }
  .lesson .rug { margin-left: 120px; } .lesson .rug .food { width: 72px; } .lesson .rug .food-img { width: 52px; height: 52px; }
  .lesson .gapopts { padding-left: 120px; gap: 8px; } .lesson .gapopt { width: 66px; height: 66px; }
  .lesson .pots { margin-left: 120px; } .lesson .doors { left: 120px; }
  .lesson .lc-tiles, .lesson .spellbox .lc-tiles { padding-left: 0; }
}
@media (orientation: landscape) and (max-height: 520px) { .lesson .ls-foot, .lesson[class*=" g-"] .ls-foot { left: 0 !important; right: auto !important; } }
/* bubble sits above the wizard's hat, so it never covers the game buttons */
.lesson .ls-buddy { flex-direction: column-reverse !important; align-items: flex-start !important; }
.lesson .ls-say, .lesson[class*=" g-"] .ls-say { margin: 0 0 -4px 14px !important; }
@media (max-width: 999px) and (orientation: portrait) { .lesson .doors { left: 104px; gap: 8px; } }
@media (orientation: landscape) and (max-height: 520px) {
  .lesson .ls-wiz, .lesson[class*=" g-"] .ls-wiz { height: 96px; }
  .lesson .clue { align-self: start !important; margin-top: 4px !important; }
}

/* 1.26.2 ideas under the box: dealt in like cards, 🔄 for a new handful */
.mk-chip.more { background: var(--teal, #2ca0a4); border-color: var(--teal, #2ca0a4); color: #fff; }
.mk-chip.deal { animation: mkdeal .35s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes mkdeal { from { opacity: 0; transform: translateY(10px) scale(.7) rotate(-6deg); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mk-chip.deal { animation: none; } }

/* 1.27.0 📦 printed books (Lulu) */
.pr-hero { display: grid; grid-template-columns: minmax(150px, 260px) 1fr; gap: clamp(18px, 4vw, 44px); align-items: center;
  background: linear-gradient(135deg, #fff6e6, #fde8ef); border-radius: 28px; padding: clamp(18px, 4vw, 34px); margin: 8px 0 22px; box-shadow: 0 6px 0 var(--line); }
.pr-hero h1 { margin: 0 0 8px; font-size: clamp(1.8rem, 5vw, 2.6rem); color: var(--purple-d); }
.pr-hero p { margin: 0 0 12px; }
.pr-kicker { font: 600 .95rem var(--round); color: var(--coral-d); margin: 0 0 4px !important; }
.pr-note { background: #fff; border: 2px dashed var(--sun-d); border-radius: 14px; padding: 8px 12px; font-size: .95rem; margin-top: 10px !important; }
.pr-book { position: relative; perspective: 900px; justify-self: center; width: 100%; max-width: 260px; }
.pr-book.small { max-width: 190px; }
.pr-book3d { position: relative; aspect-ratio: 1; border-radius: 6px 14px 14px 6px; overflow: hidden; background: var(--purple);
  transform: rotateY(-18deg) rotateX(4deg); transform-origin: left center; box-shadow: inset 10px 0 14px -6px rgba(0,0,0,.35), 14px 18px 28px rgba(53,35,99,.28);
  animation: prfloat 5s ease-in-out infinite; }
.pr-book3d img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.pr-book3d::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 9%; background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(255,255,255,.12) 60%, transparent); z-index: 2; }
.pr-btitle { position: absolute; left: 12%; right: 6%; top: 7%; z-index: 2; text-align: center; font: 700 clamp(1rem, 3.4vw, 1.45rem)/1.05 var(--round); color: #fff;
  -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.pr-bbadge { position: absolute; right: 7%; bottom: 7%; z-index: 2; background: var(--sun); color: var(--ink); font: 600 .72rem var(--round); padding: 4px 9px; border-radius: 99px; }
.pr-shadow { display: block; height: 16px; margin: 10px 8% 0 14%; border-radius: 50%; background: radial-gradient(rgba(53,35,99,.22), transparent 70%); }
@keyframes prfloat { 50% { transform: rotateY(-12deg) rotateX(2deg) translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .pr-book3d { animation: none; } }
.pr-step { background: var(--paper); border-radius: 24px; padding: clamp(16px, 3.5vw, 26px); margin-bottom: 18px; box-shadow: 0 6px 0 var(--line); }
.pr-step h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.4rem; }
.pr-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--coral); color: #fff; font: 700 1.1rem var(--round); flex: none; }
.pr-step:nth-of-type(2) .pr-num { background: var(--teal); }
.pr-step:nth-of-type(3) .pr-num { background: var(--purple); }
.pr-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.pr-choice, .pr-opt { position: relative; cursor: pointer; }
.pr-choice input, .pr-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pr-card, .pr-ocard { display: flex; flex-direction: column; gap: 3px; height: 100%; border: 3px solid var(--line); border-radius: 20px; padding: 14px 16px; background: #fff; transition: transform .12s, border-color .12s, box-shadow .12s; }
.pr-card b, .pr-ocard b { font: 600 1.2rem var(--round); }
.pr-card small, .pr-ocard small { color: #6b5a8f; }
.pr-icon { font-size: 2rem; line-height: 1; }
.pr-meta { font-weight: 700; }
.pr-choice input:checked + .pr-card, .pr-opt input:checked + .pr-ocard { border-color: var(--purple); box-shadow: 0 5px 0 var(--purple); transform: translateY(-2px); background: #f7f1ff; }
.pr-choice input:focus-visible + .pr-card, .pr-opt input:focus-visible + .pr-ocard { outline: 3px solid var(--sun-d); outline-offset: 2px; }
.pr-row { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 16px; align-items: flex-end; }
.pr-row label, .pr-grid label { display: flex; flex-direction: column; gap: 5px; font-weight: 700; }
.pr-row small, .pr-grid small { font-weight: 600; color: #8a7aa8; }
.pr-owner { flex: 1 1 240px; }
.pr-row input, .pr-grid input, .pr-grid select { font: 600 1rem var(--body); padding: 11px 13px; border: 3px solid var(--line); border-radius: 14px; background: #fff; color: var(--ink); min-width: 0; width: 100%; box-sizing: border-box; }
.pr-row input:focus, .pr-grid input:focus, .pr-grid select:focus { outline: none; border-color: var(--teal); }
.pr-stepper { display: inline-flex; align-items: center; border: 3px solid var(--line); border-radius: 16px; overflow: hidden; background: #fff; }
.pr-stepper button { width: 44px; height: 46px; border: 0; background: #f4eefc; color: var(--purple-d); font: 700 1.4rem var(--round); cursor: pointer; }
.pr-stepper input { width: 56px !important; border: 0 !important; border-radius: 0 !important; text-align: center; -moz-appearance: textfield; }
.pr-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.pr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-bottom: 16px; }
.pr-grid .wide { grid-column: 1 / -1; }
.pr-msg { min-height: 1.4em; margin: 10px 0 0; font-weight: 700; color: var(--teal-d); }
.pr-msg.bad { color: var(--coral-d); }
.pr-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 18px; }
.pr-price { font: 700 1.7rem var(--round); color: var(--purple-d); margin-top: 4px; }
.pr-admin { color: var(--teal-d) !important; font-weight: 700; }
.pr-pay { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pr-free { font-weight: 700; display: flex; gap: 8px; align-items: center; }
.pr-small { font-size: .9rem; color: #6b5a8f; margin: 0; }
.pr-past ul { margin: 6px 0 0; padding-left: 20px; }
.pr-past li { margin: 4px 0; }
.pr-status.bad { background: linear-gradient(135deg, #fff1f1, #fff6e6); }
.pr-track { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; padding: 0; margin: 0 0 22px; counter-reset: s; }
.pr-track li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font: 600 .9rem var(--round); color: #a497bf; }
.pr-track li span { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; border: 3px solid var(--line); font-size: 1.5rem; filter: grayscale(1); opacity: .6; position: relative; z-index: 1; }
.pr-track li::before { content: ""; position: absolute; top: 27px; left: -50%; right: 50%; height: 5px; background: var(--line); }
.pr-track li:first-child::before { display: none; }
.pr-track li.done { color: var(--purple-d); }
.pr-track li.done span { border-color: var(--teal); background: #e9f7f3; filter: none; opacity: 1; }
.pr-track li.done::before, .pr-track li.now::before { background: var(--teal); }
.pr-track li.now { color: var(--coral-d); }
.pr-track li.now span { border-color: var(--coral); filter: none; opacity: 1; animation: prpulse 1.4s ease-in-out infinite; }
@keyframes prpulse { 50% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(255,122,162,.18); } }
.printbtn { text-decoration: none; display: block; text-align: center; margin-top: 6px; box-sizing: border-box; background: var(--sun); border-color: var(--sun-d); color: var(--ink); }
@media (max-width: 640px) {
  .pr-hero { grid-template-columns: 1fr; text-align: center; }
  .pr-hero .btn { margin-inline: auto; }
  .pr-book { max-width: 190px; }
  .pr-grid { grid-template-columns: 1fr; }
  .pr-track li { font-size: .72rem; }
  .pr-track li span { width: 42px; height: 42px; font-size: 1.15rem; }
  .pr-track li::before { top: 21px; }
}
.pr-grid label[hidden], .pr-step[hidden] { display: none !important; }

/* 1.28.0 🔎 the Wizard's Library (replaces the crystal ball) */
body.libpage { background: #fff8ec url(learn/bg_room.webp) center top / cover fixed; }
body.libpage::before { content: ""; position: fixed; inset: 0; background: rgba(255, 248, 236, .82); pointer-events: none; z-index: 0; }
.lib-scene { position: relative; z-index: 1; min-height: 100dvh; box-sizing: border-box; padding: max(16px, env(safe-area-inset-top, 0px)) 16px 32px; color: var(--ink); max-width: 1280px; margin: 0 auto; }
.lib-nav { display: flex; justify-content: space-between; gap: 10px; }
.lib-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 99px; background: #fff; color: var(--ink); font: 800 15px var(--body); text-decoration: none; box-shadow: 0 3px 0 var(--line); }
.lib-layout { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.lib-side { display: flex; flex-direction: column; gap: 14px; }
.lib-host { display: flex; align-items: flex-end; gap: 4px; }
.lib-wiz { width: 130px; height: 150px; object-fit: contain; flex: none; transform-origin: 50% 100%; animation: libbob 3.2s ease-in-out infinite; }
.lib-wiz.hop { animation: libhop .55s cubic-bezier(.3,1.6,.5,1), libbob 3.2s .55s ease-in-out infinite; }
.lib-wiz.looking { animation: liblook 1s ease-in-out infinite; }
@keyframes libbob { 50% { transform: translateY(-5px) rotate(-1.5deg); } }
@keyframes libhop { 0% { transform: scale(.85) translateY(10px); } 60% { transform: scale(1.06) translateY(-8px); } 100% { transform: none; } }
@keyframes liblook { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateX(4px); } }
.lib-bubble { position: relative; flex: 1; background: #fff; border: 3px solid var(--line); border-radius: 22px; padding: 12px 14px; margin-bottom: 36px; }
.lib-bubble::before { content: ""; position: absolute; left: -12px; bottom: 18px; width: 18px; height: 18px; background: #fff; border-left: 3px solid var(--line); border-bottom: 3px solid var(--line); transform: rotate(45deg); }
.lib-bubble h1 { margin: 0; font-size: clamp(1.35rem, 4.6vw, 2rem); color: var(--purple-d); }
.lib-bubble p { margin: 4px 0 0; font-weight: 700; font-size: 15px; min-height: 2.6em; }
.lib-ask { display: flex; gap: 8px; margin-top: -8px; }
.lib-ask input { flex: 1; min-width: 0; height: 56px; box-sizing: border-box; border: 3px solid var(--purple); border-radius: 99px; padding: 0 20px; font: 800 19px var(--body); color: var(--ink); background: #fff; }
.lib-ask input:focus { outline: none; box-shadow: 0 0 0 4px rgba(127, 82, 170, .2); }
.lib-mic, .lib-go { width: 56px; height: 56px; flex: none; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: #fff; }
.lib-mic { background: var(--coral); box-shadow: 0 4px 0 var(--coral-d); }
.lib-mic.on { animation: libpulse 1s ease-in-out infinite; }
@keyframes libpulse { 50% { box-shadow: 0 4px 0 var(--coral-d), 0 0 0 10px rgba(255, 122, 162, .25); } }
.lib-go { background: var(--purple); box-shadow: 0 4px 0 var(--purple-d); }
.lib-mic:active, .lib-go:active { transform: translateY(3px); box-shadow: none; }
.lib-topics { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 -16px; padding-inline: 16px; scrollbar-width: none; }
.lib-topics::-webkit-scrollbar { display: none; }
.lib-topic { flex: none; display: flex; align-items: center; gap: 6px; height: 48px; padding: 0 14px 0 4px; border-radius: 99px; border: 3px solid var(--line); background: #fff; font: 800 15px var(--body); color: var(--ink); cursor: pointer; transition: transform .12s; }
.lib-topic img { width: 38px; height: 38px; object-fit: contain; }
.lib-topic:hover { transform: translateY(-2px); }
.lib-topic.on { border-color: var(--purple); background: #f4eefc; }
.lib-topic.dip { border-color: var(--sun-d); background: #fff6d6; }
.lib-shelfwrap { min-width: 0; }
.lib-found { margin: 4px 0 6px; font-size: 1.25rem; }
/* each row of books sits on a wooden shelf: the shelves are the background, one per 184px row */
.lib-shelves { --row: 184px; display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 12px; padding: 0 12px; min-height: calc(var(--row) * 2);
  background: linear-gradient(to bottom, transparent calc(var(--row) - 22px), #d99a52 calc(var(--row) - 22px), #d99a52 calc(var(--row) - 16px), #b5702f calc(var(--row) - 16px), #a36229 var(--row)) 0 0 / 100% var(--row);
  border-radius: 6px; transition: opacity .3s; }
.lib-shelves.dim { opacity: .45; }
.lib-slot { height: var(--row); display: flex; align-items: flex-end; padding-bottom: 22px; box-sizing: border-box; }
.lib-book { position: relative; display: block; width: 102px; height: 150px; border-radius: 4px 12px 12px 4px; background: var(--c); overflow: hidden; text-decoration: none;
  box-shadow: inset 7px 0 0 rgba(0, 0, 0, .2), 4px 6px 0 rgba(53, 35, 99, .2); transform: rotate(var(--tilt)); animation: libslide .55s cubic-bezier(.3,1.4,.5,1) both; transition: transform .15s; }
.lib-book:hover, .lib-book:focus-visible { transform: translateY(-10px) rotate(0deg); }
.lib-book:focus-visible { outline: 4px solid var(--sun-d); outline-offset: 3px; }
.lib-book img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lib-book::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(42, 28, 85, .55), transparent 45%); }
.lib-title { position: absolute; left: 11px; right: 6px; top: 7px; z-index: 1; font: 600 13px/1.1 var(--round); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lib-badge { position: absolute; left: 10px; bottom: 6px; z-index: 1; background: #fff; border-radius: 99px; padding: 2px 7px; font: 800 11px var(--body); color: var(--ink); }
.lib-play { position: absolute; right: 6px; bottom: 6px; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: var(--sun); color: var(--ink); display: grid; place-items: center; box-shadow: 0 2px 0 var(--sun-d); }
.lib-make { width: 102px; height: 150px; box-sizing: border-box; border: 3px dashed var(--purple); border-radius: 14px; background: rgba(255, 255, 255, .75); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 8px;
  text-align: center; text-decoration: none; color: var(--purple-d); font: 800 13px/1.15 var(--body); animation: libslide .55s .3s cubic-bezier(.3,1.4,.5,1) both; }
@keyframes libslide { from { opacity: 0; transform: translateX(60px) rotate(8deg); } }
.lib-small { font-size: 13px; color: #6b5a8f; margin: 8px 4px 0; }
@media (prefers-reduced-motion: reduce) { .lib-wiz, .lib-wiz.hop, .lib-wiz.looking, .lib-book, .lib-make { animation: none; } }
@media (max-width: 380px) { .lib-shelves { column-gap: 8px; padding: 0 6px; } .lib-book, .lib-make { width: 92px; height: 136px; } .lib-shelves { --row: 170px; } }
/* tablet and desktop: the wizard on the left, the bookshelves on the right */
@media (min-width: 820px) {
  .lib-scene { padding: 22px 28px 32px; }
  .lib-layout { flex-direction: row; align-items: flex-start; gap: 28px; }
  .lib-side { width: 380px; flex: none; position: sticky; top: 20px; }
  .lib-host { flex-direction: column-reverse; align-items: stretch; }
  .lib-bubble { margin-bottom: 0; }
  .lib-bubble::before { left: 50%; bottom: -12px; transform: translateX(-50%) rotate(-45deg); }
  .lib-bubble h1 { font-size: 2rem; }
  .lib-bubble p { font-size: 18px; }
  .lib-wiz { width: 220px; height: 230px; align-self: center; margin-top: 8px; }
  .lib-ask { margin-top: 0; }
  .lib-ask input { height: 62px; font-size: 21px; }
  .lib-mic, .lib-go { width: 62px; height: 62px; }
  .lib-topics { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
  .lib-topic { height: 52px; font-size: 16px; }
  .lib-shelfwrap { flex: 1; padding-top: 6px; }
  .lib-found { font-size: 1.6rem; }
  .lib-shelves { --row: 212px; column-gap: 20px; padding: 0 22px; min-height: calc(var(--row) * 3); }
  .lib-book, .lib-make { width: 120px; height: 172px; }
  .lib-title { font-size: 15px; }
}
@media (min-width: 820px) and (max-height: 640px) { .lib-side { position: static; } .lib-wiz { width: 150px; height: 160px; } }

/* 1.28.1 👀 flip through the printed book */
.pr-open { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; display: block; }
.pr-open:focus-visible { outline: 4px solid var(--sun-d); outline-offset: 6px; border-radius: 12px; }
.pr-book3d { display: block; }
.pr-book3d img.real { object-position: center; }
.pr-tapme { display: block; text-align: center; font: 700 .95rem var(--round); color: var(--purple-d); margin-top: 4px; animation: prtap 2.4s ease-in-out infinite; }
@keyframes prtap { 50% { transform: translateY(-3px); } }
.fb { position: fixed; inset: 0; z-index: 90; background: radial-gradient(circle at 50% 40%, #4a3480, #1e1340 75%); color: #fff; display: flex; flex-direction: column; align-items: center;
  padding: max(10px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)); box-sizing: border-box; --pw: 300px; }
.fb[hidden] { display: none; }
.fb-top { width: 100%; max-width: 1200px; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; }
.fb-title { font: 600 1.15rem var(--round); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fb-x { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 1.3rem; cursor: pointer; }
.fb-stage { flex: 1; width: 100%; display: grid; place-items: center; position: relative; touch-action: pan-y; user-select: none; perspective: 2400px; }
.fb-book { position: relative; width: calc(var(--pw) * 2); height: var(--pw); display: flex; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.4,.1,.2,1); }
.fb-book.closed-front { transform: translateX(calc(var(--pw) * -.5)); }
.fb-book.closed-back { transform: translateX(calc(var(--pw) * .5)); }
.fb-half { position: relative; width: var(--pw); height: var(--pw); }
.fb-page { position: absolute; inset: 0; background: #fff6e6; overflow: hidden; }
.fb-page img { width: 100%; height: 100%; display: block; object-fit: cover; pointer-events: none; }
.fb-half.left .fb-page { border-radius: 6px 0 0 6px; box-shadow: -10px 14px 30px rgba(0,0,0,.35); }
.fb-half.right .fb-page { border-radius: 0 6px 6px 0; box-shadow: 10px 14px 30px rgba(0,0,0,.35); }
.fb-half.left .fb-page::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 14%; background: linear-gradient(90deg, transparent, rgba(0,0,0,.18)); }
.fb-half.right .fb-page::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 14%; background: linear-gradient(270deg, transparent, rgba(0,0,0,.2)); }
.fb-page.fbcover::after { display: none; }
.fb-half.right .fb-page.fbcover { border-radius: 4px 10px 10px 4px; box-shadow: inset 6px 0 0 rgba(0,0,0,.18), 12px 16px 34px rgba(0,0,0,.45); }
.fb-half.left .fb-page.fbcover.fbback { border-radius: 10px 4px 4px 10px; box-shadow: inset -6px 0 0 rgba(0,0,0,.18), -12px 16px 34px rgba(0,0,0,.45); }
/* the page that turns */
.fb-leaf { position: absolute; top: 0; width: var(--pw); height: var(--pw); transform-style: preserve-3d; transition: transform .75s cubic-bezier(.45,.05,.3,1); z-index: 5; }
.fb-leaf.fwd { left: 50%; transform-origin: left center; }
.fb-leaf.fwd.go { transform: rotateY(-180deg); }
.fb-leaf.back { left: 0; transform-origin: right center; }
.fb-leaf.back.go { transform: rotateY(180deg); }
.fb-leaf .face { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fb-leaf .face.backface { transform: rotateY(180deg); }
.fb-leaf.fwd .face.front, .fb-leaf.back .face.backface { border-radius: 0 6px 6px 0; }
.fb-leaf.fwd .face.backface, .fb-leaf.back .face.front { border-radius: 6px 0 0 6px; }
.fb-leaf .face::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 30%); opacity: 0; transition: opacity .75s; }
.fb-leaf.go .face::before { opacity: 1; }
/* one page at a time on phones */
.fb.one .fb-book { width: var(--pw); transform: none !important; }
.fb.one .fb-half.left { display: none; }
.fb.one .fb-half.right .fb-page { border-radius: 6px; }
.fb.one .fb-leaf.fwd { left: 0; }
.fb.one .fb-leaf.back { left: 0; transform-origin: left center; transform: rotateY(-180deg); }
.fb.one .fb-leaf.back .face.front { transform: none; }
.fb.one .fb-leaf.back.in.go { transform: rotateY(0); }
.fb-load { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; font: 600 1.2rem var(--round); text-align: center; padding: 20px; }
.fb-load[hidden] { display: none; }
.fb-spin { width: 46px; height: 46px; border-radius: 50%; border: 5px solid rgba(255,255,255,.25); border-top-color: var(--sun); animation: fbspin .9s linear infinite; }
@keyframes fbspin { to { transform: rotate(360deg); } }
.fb-bar { display: flex; align-items: center; gap: 16px; margin-top: 10px; }
.fb-nav { width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--sun); color: var(--ink); font: 700 2rem/1 var(--round); cursor: pointer; box-shadow: 0 4px 0 var(--sun-d); }
.fb-nav:disabled { opacity: .35; cursor: default; }
.fb-count { min-width: 150px; text-align: center; font: 600 1.05rem var(--round); }
.fb-hint { margin: 6px 0 0; font-size: .85rem; color: #d9cdf5; text-align: center; }
@media (prefers-reduced-motion: reduce) { .fb-leaf, .fb-book { transition: none; } .pr-tapme { animation: none; } }

/* 1.29.0 more story kinds and picture styles */
.k-animals { background: #ffb84a; color: var(--ink); box-shadow: 0 7px 0 #c9831a; }
.k-superhero { background: #e8475f; color: #fff; box-shadow: 0 7px 0 #a82a3e; }
.k-spooky { background: #3b2a5e; color: #fff; box-shadow: 0 7px 0 #1f1438; }
.k-sea { background: #2c8fd1; color: #fff; box-shadow: 0 7px 0 #1b6699; }
.k-dinosaurs { background: #6cbf4a; color: #1d3a12; box-shadow: 0 7px 0 #4a8f2e; }
.k-rhyme { background: #ff8fb3; color: #3a1530; box-shadow: 0 7px 0 #e0608c; }
.k-superhero[aria-pressed="true"], .k-spooky[aria-pressed="true"], .k-sea[aria-pressed="true"] { border-color: var(--sun); }
@media (min-width: 900px) { .mk-kinds { grid-template-columns: repeat(4, 1fr); } .mk-styles { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px) {
  .mk-kinds { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mk-kind { padding: 10px 4px; border-radius: 18px; gap: 2px; }
  .mk-kind .ki { font-size: 30px; } .mk-kind b { font-size: 1rem; line-height: 1.1; text-align: center; } .mk-kind small { display: none; }
  .mk-styles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .mk-style { padding: 6px; border-radius: 16px; } .mk-style b { font-size: .9rem; margin-top: 4px; text-align: center; line-height: 1.1; } .mk-style small { display: none; }
}
@media (min-width: 1100px) { .mk-styles { grid-template-columns: repeat(6, 1fr); } .mk-style small { font-size: .8rem; } .mk-style b { font-size: 1.1rem; } }