/* Science Adventures — Grade 3. A storybook look: warm paper pages, the class's colors. */
:root {
  --paper: #fffaf0; --page: #fff; --ink: #24304a; --soft: #5d6a85; --line: #e8dcc4;
  --blue: #2f6fdb; --green: #2e9b5f; --gold: #f5b82e; --red: #d9534f; --purple: #7b5cd6;
  --cover: #1f4f9c; --cover2: #2f6fdb;
  --radius: 18px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 500 18px/1.55 Nunito, system-ui, sans-serif; }
#app { min-height: 100vh; outline: none; }
h1, h2, h3, .baloo { font-family: 'Baloo 2', Nunito, sans-serif; line-height: 1.15; }
button { font: inherit; cursor: pointer; }
a { color: var(--blue); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 16px 16px 64px; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 12px 22px; font-weight: 800; background: var(--blue); color: #fff; text-decoration: none; }
.btn.ghost { background: #fff; color: var(--ink); border: 2px solid var(--line); }
.btn.gold { background: var(--gold); color: #3a2600; }
.btn:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.top .back { text-decoration: none; font-weight: 800; }
.top .spacer { flex: 1; }
.tag { display: inline-block; font-weight: 800; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--soft); }

/* ---------- cover ---------- */
.cover-scene { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(ellipse at top, #fdf3da, #f3e2bd); perspective: 1600px; }
.book { position: relative; width: min(440px, 88vw); aspect-ratio: 3 / 4; transform-style: preserve-3d; }
.book .pages { position: absolute; inset: 8px 0 8px 14px; background: repeating-linear-gradient(#fff 0 6px, #f1ead9 6px 7px); border-radius: 6px 14px 14px 6px; box-shadow: 0 18px 40px #6b4c1a55; }
.book .lid { position: absolute; inset: 0; border-radius: 8px 18px 18px 8px; background: linear-gradient(135deg, var(--cover2), var(--cover)); color: #fff; padding: 9% 8%; display: flex; flex-direction: column; align-items: center; text-align: center; transform-origin: left center; transition: transform 1s cubic-bezier(.6, .05, .3, 1); box-shadow: inset 14px 0 0 #0002, 0 18px 40px #1b2f5e66; }
.book.open .lid { transform: rotateY(-160deg); }
.lid .series { font: 800 clamp(1rem, 4vw, 1.25rem) 'Baloo 2'; color: #ffe08a; margin: 0; letter-spacing: .02em; }
.lid h1 { font-size: clamp(2.2rem, 10vw, 3.3rem); margin: .1em 0 0; text-shadow: 0 3px 0 #0003; }
.lid .grade { margin-top: 6px; background: var(--gold); color: #3a2600; font: 800 1.2rem 'Baloo 2'; padding: 4px 22px; border-radius: 999px; }
.lid .class { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin: auto 0 0; }
.lid .class img { width: clamp(38px, 11vw, 54px); height: clamp(38px, 11vw, 54px); border-radius: 50%; background: #fff; border: 3px solid #fff; }
.lid .class img.teacher { border-color: var(--gold); }
.lid .open-btn { margin-top: 16px; }

/* ---------- contents ---------- */
.contents h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); margin: 0; }
.contents .lead { color: var(--soft); margin: 4px 0 18px; }
.path-group { margin: 22px 0 6px; }
.path-group h2 { font-size: 1.4rem; margin: 0; }
.path-group p { margin: 0; color: var(--soft); font-size: .95rem; }
.units { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 10px; }
.unit { background: var(--page); border: 2px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: 0 3px 0 var(--line); }
.unit h3 { margin: 0 0 8px; font-size: 1.2rem; }
.unit h3 small { display: block; font: 800 .75rem Nunito; color: var(--soft); text-transform: uppercase; letter-spacing: .05em; }
.unit ol { list-style: none; margin: 0; padding: 0; }
.unit li a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.unit li a:hover { background: #f6f0e2; }
.unit .num { font-weight: 800; color: var(--blue); min-width: 2.4em; }
.unit .ttl { flex: 1; }
.stamps { display: inline-flex; gap: 2px; font-size: .9rem; }
.stamps span { opacity: .22; filter: grayscale(1); }
.stamps span.on { opacity: 1; filter: none; }
.boss { margin-top: 8px; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 2px dashed var(--gold); text-decoration: none; color: var(--ink); font-weight: 800; }
.boss.locked { border-color: var(--line); color: var(--soft); }
.boss .why { font-weight: 600; font-size: .85rem; color: var(--soft); }

/* ---------- lesson ---------- */
.lesson-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; margin: 4px 0 14px; }
.lesson-head h1 { margin: 0; font-size: clamp(1.7rem, 6vw, 2.5rem); }
.bigq { display: flex; gap: 12px; align-items: flex-start; background: #eef5ff; border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.bigq img { width: 52px; height: 52px; border-radius: 50%; background: #fff; flex: none; }
.bigq b { display: block; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--blue); }
.bigq p { margin: 0; font-weight: 800; font-size: 1.15rem; }
.words { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; }
.words .w { border: 2px solid var(--purple); background: #fff; color: var(--purple); border-radius: 999px; padding: 4px 14px; font-weight: 800; }
.words .w[aria-expanded="true"] { background: var(--purple); color: #fff; }
.word-def { flex-basis: 100%; background: #f3efff; border-radius: 12px; padding: 8px 12px; margin: 0; }

.comic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: panel; }
.panel { background: var(--page); border: 3px solid var(--ink); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; }
.panel .art { position: relative; aspect-ratio: 4 / 3; background: linear-gradient(160deg, #e9f3ff, #fff6dc); display: grid; place-items: center; }
.panel .art img.who { width: 46%; max-width: 150px; border-radius: 50%; background: #fff; box-shadow: 0 4px 0 #0001; }
.panel .art .n { position: absolute; left: 8px; top: 6px; font: 800 .8rem Nunito; color: var(--soft); }
.panel .art .todo { position: absolute; right: 8px; bottom: 6px; font-size: .7rem; color: var(--soft); background: #fff9; padding: 1px 6px; border-radius: 6px; }
.bubble { position: relative; margin: 10px; padding: 10px 12px; background: #fff; border: 2px solid var(--ink); border-radius: 16px; }
.bubble::before { content: ''; position: absolute; top: -12px; left: 26px; border: 10px solid transparent; border-bottom-color: var(--ink); border-top: 0; }
.bubble::after { content: ''; position: absolute; top: -8px; left: 28px; border: 8px solid transparent; border-bottom-color: #fff; border-top: 0; }
.bubble .who { display: block; font: 800 .78rem Nunito; color: var(--blue); text-transform: uppercase; letter-spacing: .04em; }
.bubble .who.teacher { color: var(--green); }
.bubble p { margin: 0; font-weight: 700; }
.editor-note { margin: 0 10px 10px; padding: 8px 10px; background: #fff3cd; border-radius: 8px; font-size: .82rem; color: #6b5300; }
.read-done { text-align: center; margin: 18px 0 8px; }

.section { background: var(--page); border: 2px solid var(--line); border-radius: var(--radius); padding: 16px; margin-top: 22px; }
.section > h2 { margin: 0 0 4px; font-size: 1.6rem; }
.section > .sub { margin: 0 0 12px; color: var(--soft); }
.q { border-top: 2px dashed var(--line); padding: 14px 0 6px; }
.q:first-of-type { border-top: 0; }
.q .stem { font-weight: 800; margin: 0 0 8px; }
.opts { display: grid; gap: 6px; }
.opt { display: flex; gap: 10px; align-items: flex-start; text-align: left; width: 100%; background: #fff; border: 2px solid var(--line); border-radius: 12px; padding: 8px 12px; }
.opt .L { font-weight: 800; color: var(--blue); min-width: 1.2em; }
.opt[aria-pressed="true"] { border-color: var(--blue); background: #eef5ff; }
.opt.right { border-color: var(--green); background: #e9f8ef; }
.opt.wrong { border-color: var(--red); background: #fdeceb; }
.opt:disabled { cursor: default; color: inherit; }
.feedback { margin: 8px 0 0; padding: 8px 12px; border-radius: 12px; font-weight: 700; }
.feedback.good { background: #e9f8ef; }
.feedback.notyet { background: #fff4dc; }
.feedback .mark { font-weight: 800; }
.qbar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }

.task-text p { margin: 0 0 8px; }
.task-frame { white-space: pre-wrap; background: #f8f5ec; border-radius: 12px; padding: 10px 12px; font-weight: 700; }
textarea { width: 100%; min-height: 140px; border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px; font: inherit; background: #fffdf7; resize: vertical; }
.check { display: flex; gap: 10px; align-items: center; margin-top: 10px; font-weight: 700; }
.check input { width: 22px; height: 22px; }
.note { color: var(--soft); font-size: .9rem; }

details.guide { margin-top: 22px; background: #f4f7fb; border: 2px solid #d5deea; border-radius: var(--radius); padding: 12px 16px; }
details.guide summary { font: 800 1.15rem 'Baloo 2'; cursor: pointer; }
details.guide h3 { margin: 14px 0 4px; font-size: 1.05rem; }
details.guide dl { margin: 0; }
details.guide dt { font-weight: 800; margin-top: 6px; }
details.guide dd { margin: 0 0 4px; }
.next { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; flex-wrap: wrap; }

/* ---------- challenge ---------- */
.challenge .scenario { background: #fffbea; border: 2px solid var(--gold); border-radius: var(--radius); padding: 14px; font-weight: 700; }
.reveal { margin-top: 12px; background: #eef5ff; border-radius: 12px; padding: 10px 14px; }
.reveal h3 { margin: 6px 0 2px; font-size: 1rem; }
.reveal p { margin: 0 0 6px; }
.toast { position: fixed; left: 50%; top: calc(12px + env(safe-area-inset-top)); max-width: calc(100% - 32px); text-align: center; transform: translateX(-50%); background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 999px; font-weight: 800; z-index: 50; }

/* phones: one panel per row, read top to bottom */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .comic { grid-template-columns: 1fr; }
  .panel .art { aspect-ratio: 16 / 9; }
  .panel .art img.who { width: 30%; }
}
@media (min-width: 761px) and (max-width: 980px) { .comic { grid-template-columns: repeat(2, 1fr); } }
@media (prefers-reduced-motion: reduce) { .book .lid { transition: none; } }
@media print {
  .top, .next, .read-done, .qbar, details.guide, .btn { display: none !important; }
  body { background: #fff; }
  .section, .panel { break-inside: avoid; }
}

/* jumping into the book */
.jump-btn { margin: 0 0 8px; padding: 8px 16px; font-size: .95rem; }
.jump { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; align-content: center; gap: 18px; background: radial-gradient(circle, #fffaf0 0%, #2f6fdb 70%); color: #fff; font: 800 1.4rem 'Baloo 2'; text-align: center; padding: 16px; animation: jump-in 1.8s ease-in forwards; }
.jump p { margin: 0; text-shadow: 0 2px 6px #0006; }
.swirl { width: 180px; height: 180px; border-radius: 50%; background: repeating-conic-gradient(#fff 0 12deg, #ffe08a 12deg 24deg, #9cc3ff 24deg 36deg); animation: spin 1.8s linear infinite; box-shadow: 0 0 40px #fff; }
@keyframes spin { to { transform: rotate(1turn) scale(1.6); } }
@keyframes jump-in { 0% { opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 1; background: #fffaf0; } }
/* the new student's name */
.ovl { position: fixed; inset: 0; z-index: 70; background: #1b2a4a99; display: grid; place-items: center; padding: 16px; }
.ovl-card { background: #fff; border-radius: 22px; padding: 22px; max-width: 420px; width: 100%; text-align: center; display: grid; gap: 10px; justify-items: center; }
.ovl-card h2 { margin: 0; font-size: 1.6rem; }
.ovl-card p { margin: 0; }
.ovl-face { width: 84px; height: 84px; border-radius: 50%; }
.ovl-card input { width: 100%; font: inherit; padding: 10px 14px; border: 2px solid var(--line); border-radius: 12px; text-align: center; }
/* the teacher's test paper */
.paper { background: repeating-linear-gradient(#fff 0 33px, #e6eefb 33px 34px); border-color: #c9d6ee; box-shadow: 0 6px 0 #c9d6ee; }
.paper-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; border-bottom: 3px double #c9d6ee; padding-bottom: 6px; margin-bottom: 8px; }
.paper-head h2 { margin: 0; font-size: 1.45rem; }
.paper-head p { margin: 0; }
.paper .scenario { margin: 10px 0; }
@media (prefers-reduced-motion: reduce) { .jump, .swirl { animation: none; } }
/* the teacher's verdict on a test */
.teacher-says { position: relative; display: flex; gap: 14px; align-items: flex-start; margin-top: 14px; padding: 14px; border-radius: 16px; border: 3px solid; }
.teacher-says img { width: 76px; height: 76px; border-radius: 50%; background: #fff; flex: none; }
.teacher-says p { margin: 4px 0 0; font-weight: 800; font-size: 1.1rem; }
.teacher-says .score { font: 800 1.5rem 'Baloo 2'; }
.teacher-says.happy { background: #e9f8ef; border-color: var(--green); }
.teacher-says.cross { background: #fdeceb; border-color: var(--red); }
.teacher-says.cross img { animation: cross .45s ease-in-out 3; filter: saturate(1.2) hue-rotate(-12deg); }
.teacher-says .steam { position: absolute; left: 62px; top: 4px; font-size: 1.6rem; animation: cross .45s ease-in-out 3; }
@keyframes cross { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-5px) rotate(-4deg); } 75% { transform: translateX(5px) rotate(4deg); } }
.opt[aria-checked="true"] { border-color: var(--blue); background: #eef5ff; }
@media (prefers-reduced-motion: reduce) { .teacher-says.cross img, .teacher-says .steam { animation: none; } }
/* Ms. Parker's expressions (cut-out art, not round faces) */
.bigq img.ms { width: 84px; height: 84px; border-radius: 0; background: none; }
.paper-head { align-items: center; }
.paper-head img.ms { width: 64px; height: 64px; }
.paper-head h2 { flex: 1; }
.ovl-face { width: 120px; height: 120px; border-radius: 0; }
.teacher-says img { width: 110px; height: 110px; border-radius: 0; background: none; }
.teacher-says.cross img { filter: none; }
/* the classroom at the top of every lesson: the Big Question is written on the empty whiteboard */
.class-scene { position: relative; aspect-ratio: 3 / 2; max-height: 70vh; margin: 0 auto 14px; border-radius: var(--radius); overflow: hidden; background: var(--room, url(assets/classroom.webp)) center / cover; container-type: inline-size; box-shadow: 0 4px 0 var(--line); }
.class-scene .board { position: absolute; left: 35.5%; top: 7.5%; width: 38.5%; height: 33%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0 2cqw; }
.class-scene .board span { font: 800 2.1cqw Nunito; color: var(--blue); text-transform: uppercase; letter-spacing: .05em; }
.class-scene .board p { margin: .4cqw 0 0; font: 800 3.1cqw/1.2 'Baloo 2'; color: var(--ink); }
.class-scene .ms-stand { position: absolute; left: 3%; bottom: -3%; height: 58%; }
.class-scene .say { position: absolute; left: 32%; bottom: 8%; max-width: 40%; margin: 0; background: #fff; border: 3px solid var(--ink); border-radius: 2.4cqw; padding: 1.4cqw 2cqw; font: 800 2.6cqw/1.25 Nunito; }
.class-scene .say b { display: block; font-size: 1.7cqw; color: var(--green); text-transform: uppercase; letter-spacing: .04em; }
.class-scene .say::before { content: ''; position: absolute; left: -2.4cqw; bottom: 2cqw; border: 1.2cqw solid transparent; border-right: 2.4cqw solid var(--ink); border-left: 0; }
/* phones: the whiteboard words would be too small, so the question sits under the picture */
@media (max-width: 600px) {
  .class-scene .board p { font-size: 4cqw; }
  .class-scene .board span { font-size: 2.8cqw; }
  .class-scene .say { font-size: 3.6cqw; max-width: 50%; }
  .class-scene .say b { font-size: 2.6cqw; }
}
/* finished panel art */
.panel .art { aspect-ratio: 3 / 2; }
.panel .art img.pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel .art .n { z-index: 1; background: #fffd; padding: 0 6px; border-radius: 6px; }
@media (max-width: 760px) { .panel .art { aspect-ratio: 3 / 2; } }
.panel { margin: 0; }  /* <figure> has wide default side margins that shrank every panel */
.panel .art .n { left: auto; right: 8px; top: auto; bottom: 6px; }
.panel .art .todo { right: auto; left: 8px; }
/* the textbook cover: the picture fills the cover; the title sits in its calm top area */
.book { width: min(400px, 82vw); aspect-ratio: 2 / 3; }
.book .lid { padding: 0; background: #fffdf7 var(--cover, url(assets/cover.webp)) center / cover; color: var(--ink); justify-content: space-between; }
.cover-title { padding: 9% 8% 0 14%; text-align: left; align-self: stretch; }
.cover-title .series { color: #1f4f9c; font-size: clamp(.9rem, 3.6vw, 1.1rem); text-transform: uppercase; letter-spacing: .08em; }
.cover-title h1 { color: #0f2f63; text-shadow: none; font-size: clamp(2rem, 9vw, 3rem); margin: .05em 0 .15em; }
.cover-title .grade { background: #8cc63f; color: #fff; }
.cover-foot { align-self: stretch; display: flex; justify-content: center; padding: 0 0 5.5% 5%; }
.cover-foot .open-btn { margin: 0; }
/* the title fits the cover's calm top band at any size */
.book .lid { container-type: inline-size; }
.cover-title { padding: 7cqw 6cqw 0 13cqw; }
.cover-title .series { font-size: 3.4cqw; display: flex; align-items: center; gap: 2.5cqw; }
.cover-title h1 { font-size: 10.6cqw; white-space: nowrap; margin: .08em 0 0; }
.cover-title .grade { font-size: 3.6cqw; padding: .5cqw 3cqw; margin: 0; }
.cover-foot .open-btn { font-size: 4.4cqw; padding: 2.6cqw 6cqw; }

/* ---------- home: the classroom with the book on the desk ---------- */
.home-scene { min-height: 100vh; display: grid; place-items: center; align-content: center; gap: 10px; padding: 12px; background: #f3e2bd; }
.home-room { position: relative; width: min(100%, calc((100vh - 70px) * 1.5)); aspect-ratio: 3 / 2; border-radius: 18px; overflow: hidden; background: var(--room, url(assets/classroom.webp)) center / cover; container-type: inline-size; box-shadow: 0 10px 30px #6b4c1a44; perspective: 1400px; }
.home-room .board { position: absolute; left: 35.5%; top: 7.5%; width: 38.5%; height: 33%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.home-room .board span { font: 800 2.4cqw Nunito; color: var(--blue); text-transform: uppercase; letter-spacing: .06em; }
.home-room .board p { margin: 0; font: 800 5cqw/1.1 'Baloo 2'; color: var(--ink); }
.home-room .board small { margin-top: .8cqw; font: 700 1.8cqw Nunito; color: var(--soft); }
.home-room .ms-stand { position: absolute; left: 8%; bottom: 17%; height: 48%; }
/* the front desk the book lies on */
.home-room .desk { position: absolute; left: -2%; right: -2%; bottom: 0; height: 22%; background: linear-gradient(#d9a066, #b97a3d 55%, #9a6330); border-top: .6cqw solid #e8b77f; box-shadow: 0 -1cqw 2cqw #0003; }
.home-book { position: absolute; right: 18%; bottom: 9%; width: 20%; aspect-ratio: 2 / 3; padding: 0; border: 0; background: none; cursor: pointer; transform: rotate(-4deg); transform-style: preserve-3d; transition: transform .25s; }
.home-book:hover, .home-book:focus-visible { transform: rotate(-4deg) translateY(-1.5cqw) scale(1.04); }
.hb-pages { position: absolute; inset: 1.5% 0 1.5% 4%; background: repeating-linear-gradient(90deg, #fff 0 2px, #eee4cf 2px 3px); border-radius: 0 .8cqw .8cqw 0; box-shadow: 1cqw 1.4cqw 1.6cqw #0005; }
.hb-cover { position: absolute; inset: 0; border-radius: .4cqw .9cqw .9cqw .4cqw; background: #fffdf7 var(--cover, url(assets/cover.webp)) center / cover; transform-origin: left center; transition: transform .9s cubic-bezier(.6, .05, .3, 1); display: block; text-align: left; box-shadow: inset 1.1cqw 0 0 #0b2a5a; }
.home-book.open .hb-cover { transform: rotateY(-150deg); }
.hb-title { position: absolute; left: 14%; top: 6%; font: 800 3.6cqw/1 'Baloo 2'; color: #0f2f63; letter-spacing: .02em; }
.hb-grade { position: absolute; left: 14%; top: 15%; font: 800 2.6cqw/1 'Baloo 2'; color: #fff; background: #8cc63f; padding: .3cqw 1.4cqw; border-radius: 999px; }
.hb-grade sup { font-size: .6em; }
.home-tip { margin: 0; font-weight: 800; color: #6b4c1a; text-align: center; }
@media (prefers-reduced-motion: reduce) { .hb-cover { transition: none; } }
.home-go { display: none; }
@media (max-width: 700px) { .home-go { display: inline-flex; font-size: 1.15rem; } .home-tip { display: none; } }

/* ---------- the book's table of contents: an open two-page spread ---------- */
.toc-scene { min-height: 100vh; background: radial-gradient(ellipse at top, #fdf3da, #ecd6a8); padding: 14px 14px 40px; }
.toc-scene .top { max-width: 1240px; margin: 0 auto 10px; }
.spread { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; background: #fffdf8; border-radius: 10px; box-shadow: 0 18px 40px #6b4c1a55, 0 0 0 6px #0f2f63; position: relative; }
.spread::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 46px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #0000001a 45%, #00000026 50%, #0000001a 55%, transparent); pointer-events: none; }
.spread.single { grid-template-columns: 1fr; max-width: 820px; }
.spread.single::after { display: none; }
.page { padding: 26px 34px 30px; }
.page.left { padding-right: 44px; }
.page.right { padding-left: 44px; }
.book-name { margin: 0; font: 800 .8rem Nunito; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.page h1 { margin: 2px 0 6px; font-size: clamp(2rem, 5vw, 2.8rem); color: #0f2f63; }
.toc-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 12px; font-size: .82rem; color: var(--soft); font-weight: 700; }
.toc-unit { position: relative; margin: 0 0 14px; }
.toc-u { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 6px 8px; margin: 0; background: none; border: 0; border-bottom: 3px solid #0f2f63; text-align: left; color: #0f2f63; text-decoration: none; cursor: pointer; border-radius: 8px 8px 0 0; }
.toc-u:hover { background: #eef3fb; }
.toc-u .u-num { font: 800 .85rem Nunito; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); white-space: nowrap; }
.toc-u .u-name { flex: 1; font: 800 1.2rem/1.2 'Baloo 2'; }
.toc-u .u-go { font-size: 1rem; }
.u-tag { position: absolute; right: 36px; top: -9px; font: 800 .66rem Nunito; text-transform: uppercase; letter-spacing: .05em; padding: 1px 8px; border-radius: 999px; background: #e9f8ef; color: var(--green); }
.u-tag[data-t="Start Here"] { background: #fff3cd; color: #8a5a00; }
.u-tag[data-t="Explore More"] { background: #f1ecff; color: var(--purple); }
.toc-unit ol { list-style: none; margin: 4px 0 0; padding: 0; }
.toc-unit li a { display: flex; align-items: baseline; gap: 10px; padding: 3px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; }
.toc-unit li a:hover { background: #f6f0e2; }
.l-id { font-weight: 800; color: var(--blue); min-width: 2.3em; }
.l-t { font-weight: 700; }
.dots { flex: 1; border-bottom: 2px dotted #c9b98f; transform: translateY(-4px); min-width: 12px; }
.l-test .l-t { color: #8a5a00; font-weight: 800; }
.toc-end { margin-top: 18px; }
.gloss { columns: 2 280px; column-gap: 34px; }
.gloss dt { font: 800 1.05rem 'Baloo 2'; color: #0f2f63; margin-top: 8px; break-after: avoid; }
.gloss dd { margin: 0; break-inside: avoid; }
@media (max-width: 860px) {
  .spread { grid-template-columns: 1fr; }
  .spread::after { display: none; }
  .page.left, .page.right, .page { padding: 18px 16px; }
  .page.right { border-top: 2px dashed var(--line); }
  .u-tag { right: 8px; }
}
/* home v2: the painted classroom; the front book is the button */
.home-room { background: var(--home, url(assets/home-class.webp)) center / cover; transform-origin: 58.5% 85%; transition: transform .95s cubic-bezier(.5, 0, .3, 1), filter .95s; }
.home-room.zoom { transform: scale(3.2); filter: brightness(1.15); }
.home-book-spot { position: absolute; left: 42.5%; top: 70.5%; width: 32%; height: 29.5%; border: 0; padding: 0; background: none; cursor: pointer; border-radius: 1.2cqw; transform: rotate(-9deg); box-shadow: 0 0 0 .5cqw #ffd43b00; animation: book-glow 1.6s ease-in-out infinite alternate; }
.home-book-spot:hover, .home-book-spot:focus-visible { animation: none; box-shadow: 0 0 0 .6cqw #ffd43b, 0 0 3cqw .8cqw #ffd43bcc; outline: none; }
@keyframes book-glow { from { box-shadow: 0 0 0 .3cqw #ffd43b55, 0 0 1cqw #ffd43b44; } to { box-shadow: 0 0 0 .5cqw #ffd43bcc, 0 0 3cqw .6cqw #ffd43b99; } }
.home-room .board, .home-room .ms-stand, .home-room .desk, .home-book { display: none; }
@media (prefers-reduced-motion: reduce) { .home-room { transition: none; } .home-book-spot { animation: none; box-shadow: 0 0 0 .5cqw #ffd43b; } }
.book-hit { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.book-hit polygon { fill: #ffd43b00; stroke: #ffd43b; stroke-width: 7; stroke-linejoin: round; pointer-events: all; cursor: pointer; animation: book-pulse 1.4s ease-in-out infinite alternate; filter: drop-shadow(0 0 10px #ffd43b); }
.book-hit polygon:hover { fill: #ffd43b22; animation: none; }
@keyframes book-pulse { from { stroke-opacity: .25; } to { stroke-opacity: 1; } }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.home-room:focus-within .book-hit polygon { stroke-width: 10; animation: none; }
@media (prefers-reduced-motion: reduce) { .book-hit polygon { animation: none; } }

/* ---------- the book's first page: welcome + how to play ---------- */
.intro h1 { font-size: clamp(1.8rem, 4.2vw, 2.5rem); }
.intro h2 { margin: 0 0 8px; font-size: clamp(1.7rem, 4vw, 2.3rem); color: #0f2f63; }
.intro-hello { display: flex; gap: 12px; align-items: center; background: #eef5ff; border-radius: 16px; padding: 10px 14px; margin: 10px 0 12px; }
.intro-hello img { width: 96px; height: 96px; flex: none; }
.intro-hello p { margin: 0; font-weight: 700; }
.intro-class { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 12px 0 4px; }
.intro-class figure { margin: 0; text-align: center; }
.intro-class img { width: 100%; max-width: 64px; aspect-ratio: 1; border-radius: 50%; background: #fff; border: 2px solid var(--line); }
.intro-class figcaption { font: 800 .78rem Nunito; color: var(--soft); }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rules li { display: flex; gap: 12px; align-items: flex-start; padding: 8px 10px; border-radius: 14px; background: #faf6ec; }
.rules .ri { font-size: 1.6rem; line-height: 1; width: 1.6em; text-align: center; flex: none; padding-top: 2px; }
.rules b { font: 800 1.08rem 'Baloo 2'; color: #0f2f63; }
.rules p { margin: 0; font-size: .95rem; }
.stamp-line { margin: 14px 0 6px; font-weight: 800; }
.stamp-line span { margin-left: 4px; font-size: 1.2rem; }
.turn { text-align: right; margin: 14px 0 0; }
/* the book really glows: a warm light pulses over it, a bright rim, sparkles, and a bouncing "Tap me!" */
.book-hit polygon { animation: none; filter: none; }
.book-hit .glow { fill: #fff3a0; fill-opacity: 0; stroke: #ffe066; stroke-width: 12; pointer-events: none; animation: book-shine 1.3s ease-in-out infinite alternate; filter: drop-shadow(0 0 12px #ffd43b) drop-shadow(0 0 28px #ffb700); }
@keyframes book-shine { from { fill-opacity: 0; stroke-opacity: .55; stroke-width: 8; } to { fill-opacity: .35; stroke-opacity: 1; stroke-width: 16; } }
.book-hit .hit { fill: transparent; stroke: none; pointer-events: all; cursor: pointer; }
.book-hit .hit:hover ~ * { }
.book-hit .sparkles path { fill: #fff8c4; stroke: #ffc61a; stroke-width: 3; transform-box: fill-box; transform-origin: center; animation: twinkle 1.1s ease-in-out infinite; filter: drop-shadow(0 0 8px #ffd43b); }
.book-hit .sparkles path:nth-child(2) { animation-delay: .3s; } .book-hit .sparkles path:nth-child(3) { animation-delay: .6s; }
.book-hit .sparkles path:nth-child(4) { animation-delay: .15s; } .book-hit .sparkles path:nth-child(5) { animation-delay: .8s; }
@keyframes twinkle { 0%, 100% { transform: scale(.3) rotate(0); opacity: .2; } 50% { transform: scale(1.15) rotate(25deg); opacity: 1; } }
.tap-me { position: absolute; left: 66%; top: 58%; transform: translateX(-50%); background: #ffd43b; color: #3a2600; font: 800 2.1cqw 'Baloo 2'; padding: .5cqw 1.6cqw; border-radius: 999px; border: .35cqw solid #fff; box-shadow: 0 .6cqw 1.5cqw #0004; pointer-events: none; animation: tap-bounce .8s ease-in-out infinite alternate; white-space: nowrap; }
@keyframes tap-bounce { to { transform: translateX(-50%) translateY(-1.4cqw); } }
.home-room.zoom .tap-me, .home-room.zoom .sparkles { display: none; }
@media (prefers-reduced-motion: reduce) { .book-hit .glow, .book-hit .sparkles path, .tap-me { animation: none; } .book-hit .glow { fill-opacity: .25; } }
/* stronger glow: wide soft halos around the rim + a warm light that pulses over the book */
.book-hit .halo { fill: none; stroke: #ffd43b; stroke-linejoin: round; pointer-events: none; animation: halo 1.3s ease-in-out infinite alternate; }
.book-hit .h3 { stroke-width: 70; stroke-opacity: .18; }
.book-hit .h2 { stroke-width: 36; stroke-opacity: .35; }
@keyframes halo { from { opacity: .35; } to { opacity: 1; } }
.book-hit .glow { stroke: #fff6bf; }
.book-light { position: absolute; left: 41%; top: 66%; width: 36%; height: 36%; border-radius: 50%; background: radial-gradient(closest-side, #fff6c2ee, #ffd43b88 45%, #ffd43b00 100%); mix-blend-mode: screen; pointer-events: none; animation: light-pulse 1.3s ease-in-out infinite alternate; }
@keyframes light-pulse { from { opacity: .15; transform: scale(.9); } to { opacity: .75; transform: scale(1.06); } }
.home-room.zoom .book-light, .home-room.zoom .halo { display: none; }
@media (prefers-reduced-motion: reduce) { .book-hit .halo, .book-light { animation: none; } .book-light { opacity: .45; } }
/* the owner's champagne-gold halo (black background → "screen" blend leaves only the light) */
.book-halo { position: absolute; left: 58.3%; top: 85.5%; width: 48%; aspect-ratio: 3 / 2; background: url(assets/halo.webp) center / contain no-repeat; mix-blend-mode: screen; pointer-events: none; transform: translate(-50%, -50%) rotate(15deg) scaleY(.82); animation: halo-breathe 1.6s ease-in-out infinite alternate; }
@keyframes halo-breathe { from { opacity: .55; transform: translate(-50%, -50%) rotate(15deg) scale(.95, .78); } to { opacity: 1; transform: translate(-50%, -50%) rotate(15deg) scale(1.04, .86); } }
.book-hit .h3, .book-hit .h2 { display: none; }
.home-room.zoom .book-halo { display: none; }
@media (prefers-reduced-motion: reduce) { .book-halo { animation: none; } }
/* keep the book itself crisp: only the ring and its sparkles show, the middle of the halo is cut out */
.book-halo { width: 60%; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, transparent 38%, #000 52%); mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, transparent 38%, #000 52%); }
.book-light { display: none; }
@keyframes book-shine { from { fill-opacity: 0; stroke-opacity: .5; stroke-width: 7; } to { fill-opacity: .14; stroke-opacity: 1; stroke-width: 12; } }
/* spotlight: the classroom dims a little around the book, so the book is the bright, glowing thing to tap */
.spotlight { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 21% 19% at 58.5% 85%, #fff4c400 0%, #fff4c400 55%, #1a1433aa 100%); animation: spot 1.6s ease-in-out infinite alternate; }
@keyframes spot { from { opacity: .55; } to { opacity: 1; } }
.book-halo { left: 58.5%; top: 83%; width: 52%; }
.home-room.zoom .spotlight { opacity: 0; transition: opacity .4s; animation: none; }
@media (prefers-reduced-motion: reduce) { .spotlight { animation: none; opacity: .8; } }
/* no straight frame: the book's outline glow is gone; the halo fades out on every side, and its middle stays clear */
.book-hit .glow { display: none; }
.book-halo { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, transparent 30%, #000 48%, #000 66%, transparent 98%); mask-image: radial-gradient(ellipse 50% 50% at 50% 52%, transparent 30%, #000 48%, #000 66%, transparent 98%); width: 58%; }
.book-halo { display: none; }  /* owner: no halo — the spotlight and sparkles are enough */

/* ---------- the classroom goes dark and Ms. Parker introduces the book ---------- */
.home-room { transition: transform .95s cubic-bezier(.5, 0, .3, 1), filter .6s; }
.home-room.dim { filter: brightness(.35) saturate(.8); }
.home-room.dim .spotlight, .home-room.dim .sparkles, .home-room.dim .tap-me { display: none; }
.dark-room, .toc-scene { background: linear-gradient(#120e2ccc, #120e2cd9), var(--home, url(assets/home-class.webp)) center / cover fixed; }
.dark-room { position: fixed; inset: 0; }
.toc-scene .top .back, .toc-scene .top .tag { color: #fff; }
.toc-scene .top { gap: 18px; }
.ms-guide { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 16px; animation: g-in .35s ease-out; }
@keyframes g-in { from { opacity: 0; transform: translateY(12px); } }
.g-card { display: flex; align-items: flex-end; gap: 0; width: min(820px, 100%); }
.g-ms { width: clamp(130px, 26vw, 240px); flex: none; filter: drop-shadow(0 10px 20px #0008); margin-right: -14px; position: relative; z-index: 1; }
.g-ms.cross { animation: cross .45s ease-in-out 3; }
.g-bubble { position: relative; flex: 1; background: #fffdf8; border-radius: 22px; padding: 18px 20px 14px; box-shadow: 0 16px 40px #0007; border: 4px solid #ffd43b; margin-bottom: 18px; }
.g-bubble::before { content: ''; position: absolute; left: -22px; bottom: 34px; border: 14px solid transparent; border-right: 22px solid #ffd43b; border-left: 0; }
.g-icon { font-size: 2rem; line-height: 1; }
.g-bubble h2 { margin: 4px 0 6px; font-size: clamp(1.4rem, 3.4vw, 2rem); color: #0f2f63; }
.g-bubble p { margin: 0; font-size: 1.12rem; font-weight: 700; }
.g-class { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin-top: 10px; }
.g-class figure { margin: 0; text-align: center; }
.g-class img { width: 100%; max-width: 58px; aspect-ratio: 1; border-radius: 50%; background: #fff; border: 2px solid var(--line); }
.g-class figcaption { font: 800 .72rem Nunito; color: var(--soft); }
.g-nav { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.g-dots { flex: 1; display: flex; gap: 5px; }
.g-dots i { width: 9px; height: 9px; border-radius: 50%; background: #d9cfb8; }
.g-dots i.on { background: var(--blue); }
@media (max-width: 640px) {
  .g-card { flex-direction: column; align-items: center; }
  .g-ms { margin: 0 0 -10px; width: 130px; }
  .g-bubble { margin: 0; }
  .g-bubble::before { left: 50%; bottom: auto; top: -22px; transform: translateX(-50%); border: 14px solid transparent; border-bottom: 22px solid #ffd43b; border-top: 0; }
}
@media (prefers-reduced-motion: reduce) { .ms-guide, .g-ms.cross { animation: none; } }
@media (max-width: 640px) { .g-nav { flex-wrap: wrap; } .g-dots { flex-basis: 100%; justify-content: center; margin-bottom: 4px; } .g-nav .btn { flex: 1; justify-content: center; } }
.g-sound { border: 2px solid var(--line); background: #fff; border-radius: 50%; width: 42px; height: 42px; font-size: 1.15rem; flex: none; }
.selfcheck { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; gap: 6px; }
.selfcheck label { display: flex; gap: 10px; align-items: flex-start; font-weight: 700; cursor: pointer; }
.selfcheck input { width: 22px; height: 22px; flex: none; margin-top: 2px; }
#workout .teacher-says { margin-top: 14px; }

/* 導讀: reading aloud */
.readbar { position: sticky; bottom: 14px; z-index: 30; display: flex; margin: 0 0 12px auto; width: fit-content; box-shadow: 0 6px 16px #0003; }
.reading { outline: 5px solid #ffd43b; outline-offset: 3px; box-shadow: 0 0 0 10px #ffd43b44; transition: outline-color .2s; }
.panel { cursor: pointer; }
.ear { border: 2px solid var(--line); background: #fff; border-radius: 50%; width: 34px; height: 34px; margin-right: 8px; font-size: .95rem; vertical-align: middle; flex: none; }
.ear:hover { border-color: var(--blue); }
.scenario .ear { float: left; margin: 0 10px 4px 0; }

/* the comic comes to life: each panel slides in when Ms. Parker reaches it, then its speech bubble pops out */
.comic.stage .panel { opacity: 0; transform: translateX(60px) scale(.92); }
.comic.stage .panel .bubble { opacity: 0; transform: scale(.4); transform-origin: 30px 0; }
.comic.stage .panel.in { animation: panel-in .55s cubic-bezier(.2, 1.3, .4, 1) forwards; }
.comic.stage .panel.in .bubble { animation: bubble-pop .4s cubic-bezier(.2, 1.6, .4, 1) .35s forwards; }
.comic.stage .panel.in .art img.pic, .comic.stage .panel.in .art img.who { animation: art-zoom 1.1s ease-out; }
@keyframes panel-in { to { opacity: 1; transform: none; } }
@keyframes bubble-pop { to { opacity: 1; transform: none; } }
@keyframes art-zoom { from { transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) { .comic.stage .panel, .comic.stage .panel .bubble { opacity: 1; transform: none; animation: none !important; } }

/* ---------- the comic, one panel at a time ---------- */
.player { background: #1d2a4a; border-radius: var(--radius); padding: 16px; margin-bottom: 14px; }
.pl-stage { min-height: 300px; display: grid; place-items: center; }
.pl-stage .panel { width: min(100%, 760px); cursor: default; border-width: 4px; animation: panel-in .55s cubic-bezier(.2, 1.3, .4, 1) both; }
.pl-stage .panel .bubble { animation: bubble-pop .4s cubic-bezier(.2, 1.6, .4, 1) .35s both; transform-origin: 30px 0; }
.pl-stage .panel .art img.pic, .pl-stage .panel .art img.who { animation: art-zoom 1.4s ease-out; }
.pl-stage .panel .bubble p { font-size: 1.3rem; }
.pl-stage .panel .bubble .who { font-size: .9rem; }
.pl-stage .panel .art .n { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateX(80px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes bubble-pop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.pl-wait { text-align: center; color: #fff; font-weight: 800; }
.pl-wait img { width: 160px; }
.pl-wait p { margin: 6px 0 0; font-size: 1.2rem; }
.pl-bar { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.pl-count { flex: 1; color: #cfe0ff; font-weight: 800; }
.replay { text-align: right; margin: 10px 0 0; }
#overview .panel { cursor: default; }
@media (prefers-reduced-motion: reduce) { .pl-stage .panel, .pl-stage .panel .bubble, .pl-stage .panel .art img { animation: none !important; } }
/* jumping into the book: the owner's gold-and-blue portal spins open, pulls you in, and flashes white */
.jump { background: #070818; animation: jump-flash 2.6s ease-in forwards; }
.jump p { position: relative; z-index: 1; }
.portal { position: absolute; left: 50%; top: 50%; width: min(150vw, 1500px); aspect-ratio: 3 / 2; background: url(assets/portal.webp) center / contain no-repeat; mix-blend-mode: screen; transform: translate(-50%, -50%) rotate(0) scale(.2); animation: portal-spin 2.6s cubic-bezier(.5, 0, .7, 1) forwards; }
@keyframes portal-spin { 0% { transform: translate(-50%, -50%) rotate(0) scale(.15); opacity: 0; } 20% { opacity: 1; } 70% { transform: translate(-50%, -50%) rotate(-540deg) scale(1); } 100% { transform: translate(-50%, -50%) rotate(-900deg) scale(3.2); opacity: 1; } }
@keyframes jump-flash { 0%, 80% { background-color: #070818; } 100% { background-color: #fffaf0; } }
.jump .swirl { display: none; }
@media (prefers-reduced-motion: reduce) { .portal { animation: none; transform: translate(-50%, -50%) scale(.8); } .jump { animation: none; } }
.portal { -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 74%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 74%); }
.jump p { font-size: clamp(1.4rem, 4vw, 2.2rem); text-shadow: 0 2px 12px #000c, 0 0 4px #000; }
/* the portal as a true circle, about half the screen, spinning in place; at the end it rushes toward you */
.portal { width: min(55vmin, 560px); aspect-ratio: 1; background: url(assets/portal-round.webp) center / cover no-repeat; border-radius: 50%; -webkit-mask-image: none; mask-image: none; animation: portal-round 2.6s linear forwards; }
@keyframes portal-round {
  0% { transform: translate(-50%, -50%) rotate(0) scale(.2); opacity: 0; }
  15% { transform: translate(-50%, -50%) rotate(-120deg) scale(1); opacity: 1; }
  75% { transform: translate(-50%, -50%) rotate(-720deg) scale(1); }
  100% { transform: translate(-50%, -50%) rotate(-1080deg) scale(4.5); opacity: 1; }
}
.portal { width: min(72vmin, 720px); }
/* ---------- motion comic: the panel fills the stage, the camera drifts, the line slides up ---------- */
.pl-stage .film { position: relative; width: min(100%, 1000px); aspect-ratio: 3 / 2; overflow: hidden; border-radius: 14px; background: #000; box-shadow: 0 14px 34px #0007; }
.mshot { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; }
.mshot.on { opacity: 1; }
.mshot img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
.mshot .dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.mshot .glow { position: absolute; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff6c8aa 0%, #fff3b000 70%); mix-blend-mode: screen; opacity: 0; pointer-events: none; transform: translate(-50%, -50%); }
.mcap { position: absolute; left: 50%; bottom: 4%; width: min(90%, 760px); background: #fffdf6f2; border: 3px solid var(--ink); border-radius: 20px; padding: 10px 20px 12px; box-shadow: 0 6px 0 #24304a33; opacity: 0; transform: translate(-50%, 14px); animation: mcap-in .5s ease .9s forwards; }
.mcap b { display: block; font: 800 .9rem 'Baloo 2', sans-serif; color: var(--blue); letter-spacing: .02em; }
.mcap b.teacher { color: var(--green); }
.mcap span { font-size: clamp(15px, 2.2vw, 23px); font-weight: 800; line-height: 1.35; }
@keyframes mcap-in { to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 560px) { .mcap { padding: 6px 12px 8px; border-width: 2px; } }
@media (prefers-reduced-motion: reduce) { .mcap { animation: none; opacity: 1; transform: translate(-50%, 0); } }
.pl-bar .btn { padding: 9px 16px; }
.pl-stage .film { cursor: pointer; }
#overview .panel { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
#overview .panel:hover { transform: translateY(-3px); box-shadow: 0 8px 0 #24304a22; }
#overview .panel .art::after { content: '▶'; position: absolute; right: 10px; top: 8px; width: 34px; height: 34px; border-radius: 50%; background: #fffe; color: var(--ink); display: grid; place-items: center; font-size: 15px; box-shadow: 0 2px 6px #0003; }
/* opening title of the class on the big screen */
.mshot.opening { display: grid; place-items: center; overflow: hidden; }
.op-bg { position: absolute; inset: 0; background: center / cover no-repeat; animation: op-zoom 14s ease-out both; will-change: transform; }
.mshot.opening::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #1d2a4a55, #1d2a4acc); }
.op-card { position: relative; z-index: 2; display: flex; align-items: center; gap: 4%; width: 86%; background: #fffdf6f2; border: 3px solid var(--ink); border-radius: 22px; padding: 2.5% 4%; box-shadow: 0 8px 0 #0003; animation: bubble-pop .6s cubic-bezier(.2, 1.4, .4, 1) .2s both; }
.op-card img { width: 26%; flex: none; }
.op-card span { font: 800 clamp(11px, 1.6vw, 15px) Nunito; color: var(--soft); text-transform: uppercase; letter-spacing: .08em; }
.op-card h2 { margin: 2px 0 6px; font: 800 clamp(20px, 4vw, 40px) 'Baloo 2', sans-serif; color: var(--blue); }
.op-card p { margin: 0; font-weight: 800; font-size: clamp(13px, 2vw, 20px); }
@keyframes op-zoom { from { transform: scale(1); } to { transform: scale(1.12); } }  /* transform, not background-size: no shaking in Safari */
@media (prefers-reduced-motion: reduce) { .op-bg, .op-card { animation: none; } }
/* ---------- Who's reading? / bookshelf ---------- */
.readers h1, .shelf h1 { text-align: center; margin: 6px 0 18px; font-size: clamp(1.8rem, 5vw, 2.6rem); }
.r-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.r-card { width: 200px; background: #fff; border: 3px solid var(--ink); border-radius: 20px; padding: 16px 12px; display: grid; justify-items: center; gap: 6px; font: inherit; color: var(--ink); cursor: pointer; box-shadow: 0 6px 0 #24304a22; transition: transform .15s; }
.r-card:hover, .r-card:focus-visible { transform: translateY(-4px); }
.r-card img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; background: #e9f3ff; }
.r-card b { font: 800 1.3rem 'Baloo 2', sans-serif; }
.r-card span { font-size: .85rem; color: var(--soft); font-weight: 700; }
.r-add { border-style: dashed; background: #fffdf6; }
.r-add .plus { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; background: #fff3cf; font-size: 3rem !important; color: #b07a00 !important; }
.acct { text-align: center; margin-top: 22px; color: var(--soft); }
.linkish { border: 0; background: none; color: var(--blue); font: inherit; font-weight: 800; cursor: pointer; text-decoration: underline; padding: 0; }
.r-new { max-width: 520px; }
.r-faces { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; width: 100%; }
.r-faces button { border: 3px solid transparent; border-radius: 50%; padding: 0; background: #e9f3ff; cursor: pointer; aspect-ratio: 1; overflow: hidden; }
.r-faces button.on { border-color: var(--gold); box-shadow: 0 0 0 3px #f5b82e55; }
.r-faces img { width: 100%; height: 100%; object-fit: cover; display: block; }
.r-chip { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 3px 12px 3px 3px; font-weight: 800; }
.r-chip img { width: 32px; height: 32px; border-radius: 50%; }
.pa .sub { color: var(--soft); font-size: .92rem; }
.pa-tabs { display: flex; gap: 6px; }
.pa-tabs button { font: inherit; font-weight: 800; border: 2px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 16px; cursor: pointer; }
.pa-tabs button.on { background: var(--blue); border-color: var(--blue); color: #fff; }
.pa-form { display: grid; gap: 8px; width: 100%; }
.pa-form input { width: 100%; font: inherit; padding: 10px 14px; border: 2px solid var(--line); border-radius: 12px; }
.pa-msg { min-height: 1.3em; font-size: .9rem; color: var(--green); }
.pa-msg.bad { color: var(--red); }
.sh-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: start; }
.sh-book { background: #fff; border-radius: 20px; padding: 14px; text-align: center; box-shadow: 0 6px 0 var(--line); display: grid; gap: 8px; justify-items: center; }
.sh-book h2 { margin: 0; }
.sh-book p { margin: 0; }
.sh-cover { position: relative; width: min(200px, 100%); aspect-ratio: 2 / 3; border-radius: 6px 14px 14px 6px; overflow: visible; box-shadow: inset 10px 0 0 #0002, 0 10px 22px #1b2f5e44; display: grid; place-content: center; color: #fff; }
.sh-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.sh-cover.g4 { background: linear-gradient(135deg, #2e9b5f, #1f6e43); }
.sh-cover.g5 { background: linear-gradient(135deg, #7b5cd6, #4f3aa0); }
.sh-g { font: 800 1.8rem 'Baloo 2', sans-serif; }
.sh-t { font-weight: 800; opacity: .85; }
.ribbon { position: absolute; top: -6px; right: 22%; width: 26px; height: 64px; background: #d9534f; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); box-shadow: 0 2px 4px #0003; }
.sh-book.soon .sh-cover { filter: grayscale(.55) brightness(.9); }
.sh-book.soon .sh-mark { color: var(--soft); font-weight: 800; }
.sh-stamps { color: var(--soft); font-size: .9rem; font-weight: 700; }
@media (max-width: 720px) { .sh-row { grid-template-columns: 1fr; } .sh-cover { width: 150px; } .r-faces { grid-template-columns: repeat(4, 1fr); } }
.sh-book .g-nav { flex-wrap: wrap; justify-content: center; } .sh-book .g-nav .btn { white-space: nowrap; padding: 10px 16px; }
.sh-room { font: 800 .85rem Nunito, sans-serif; color: var(--soft); background: #f3ecdc; border-radius: 999px; padding: 3px 12px; margin-top: -4px; }
.help { font-size: .85rem; color: var(--soft); text-align: center; margin: 10px 0 0; } .help a { color: var(--blue, #2f6fdb); font-weight: 800; }
.del-form .del-list { text-align: left; margin: 6px 0 10px; padding-left: 20px; } .del-form input { width: 100%; } .btn.warn { background: #c92a2a; color: #fff; }

/* grades and plans */
.r-grades { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.r-grades button { font: 800 1rem Nunito, sans-serif; padding: 10px 18px; border-radius: 999px; border: 3px solid #cfdcf0; background: #fff; color: var(--ink, #24304a); cursor: pointer; }
.r-grades button.on { border-color: var(--gold, #f5b82e); background: #fff4d6; box-shadow: 0 0 0 3px #f5b82e55; }
.r-note { margin: 2px 0 0; font-size: .85rem; color: var(--soft, #5d6a85); }
.r-card .r-grade { color: #2f6fdb; font-weight: 800; }
.sh-mine { font-size: .8rem; background: #fff4d6; border: 2px solid #f5b82e; border-radius: 999px; padding: 1px 8px; vertical-align: middle; }
.sh-lock { margin: 4px 0; font-weight: 800; font-size: .9rem; }
.toc-unit.locked .toc-u { opacity: .62; }
.toc-free { margin: 6px 0 10px; padding: 8px 12px; border-radius: 12px; background: #fff4d6; border: 2px dashed #f5b82e; font-weight: 800; }
.unlock .plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 18px 0; }
.unlock .plan { background: #fff; border: 3px solid #cfdcf0; border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.unlock .plan h2 { margin: 0; }
.unlock .plan .price { font-size: 2rem; font-weight: 800; margin: 0; }
.unlock .plan .price small { font-size: 1rem; color: var(--soft, #5d6a85); }
.unlock .plan ul { margin: 4px 0 10px; padding-left: 20px; }
.unlock .plan .btn { margin-top: auto; }

/* ---------- 2026-10-20 polish ---------- */
/* the whole comic stays hidden while the class plays it one panel at a time */
.comic[hidden] { display: none; }
/* phones held upright: the classroom fills most of the screen, the book stays in view */
@media (max-width: 700px) and (orientation: portrait) {
  .home-scene { padding: 0; align-content: start; gap: 14px; min-height: 100svh; }
  .home-room { width: 100vw; height: 66svh; aspect-ratio: auto; border-radius: 0 0 22px 22px; }
  .home-go { font-size: 1.3rem; padding: 14px 28px; }
}
/* bookshelf: bigger covers on a wide screen */
@media (min-width: 900px) { .sh-cover { width: min(240px, 100%); } }
/* contents: a small progress bar under every unit */
.u-prog { position: relative; height: 16px; margin: 6px 8px 2px; border-radius: 999px; background: #e7edf7; overflow: hidden; }
.u-prog i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #f5b82e, #ffd76a); border-radius: inherit; }
.u-prog span { position: relative; display: block; text-align: center; font: 800 .7rem/16px Nunito, sans-serif; color: #0f2f63; }
.toc-grad { margin: 6px 0 12px; padding: 10px 14px; border-radius: 14px; background: #e9f8ef; border: 2px solid #2e9b5f; font-weight: 800; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
/* the certificate */
.cert-ovl .cert { background: #fffdf4; border: 10px double #c9a227; border-radius: 18px; padding: 28px 32px; max-width: 640px; width: 100%; text-align: center; color: #24304a; box-shadow: 0 20px 50px #0007; }
.cert-cap { font-size: 3rem; } .cert h2 { font: 800 clamp(1.6rem, 5vw, 2.4rem) 'Baloo 2', sans-serif; margin: 4px 0 10px; }
.cert-small { margin: 0; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a6d14; font-size: .85rem; }
.cert-name { font: 800 clamp(1.8rem, 6vw, 2.8rem) 'Baloo 2', sans-serif; color: #2f6fdb; border-bottom: 3px solid #c9a227; display: inline-block; padding: 0 24px; margin: 6px 0; }
.cert-sign { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; text-align: left; }
.cert-sign img { height: 70px; } .cert-sign span { display: block; font-size: .85rem; color: #5d6a85; }
@media print { body > *:not(.cert-ovl) { display: none !important; } .cert-ovl { position: static; background: none; } .cert-ovl .no-print { display: none; } .cert { box-shadow: none; } }

.loading-book { min-height: 60vh; display: grid; place-items: center; font: 800 1.3rem 'Baloo 2', sans-serif; color: var(--soft, #5d6a85); }
.unlock .manage { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .unlock .manage small { color: var(--soft, #5d6a85); }

/* one frame for the class: comic or test paper */
.pl-stage { position: relative; }
.endcard { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: #0d1530cc; border-radius: 14px; padding: 12px; }
.ec-box { background: #fffdf6; border: 3px solid var(--ink, #24304a); border-radius: 22px; padding: 16px 20px; max-width: 520px; text-align: center; }
.ec-box img { height: 90px; } .ec-box h3 { margin: 4px 0; font: 800 1.5rem 'Baloo 2', sans-serif; } .ec-box p { margin: 0 0 10px; }
.ec-box .g-nav { justify-content: center; flex-wrap: wrap; gap: 8px; }
#pltest { margin-left: auto; }
.testbar { position: sticky; bottom: 10px; z-index: 30; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 10px auto; padding: 10px 14px; max-width: 520px; border-radius: 999px; background: #1d2a4aee; color: #fff; font-weight: 800; box-shadow: 0 8px 20px #0005; }
.openbook { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; background: #eef4ff; border: 2px dashed #9db8e8; font-weight: 700; }
@media (max-width: 600px) { #pltest { margin-left: 0; width: 100%; } .ec-box img { height: 64px; } .ec-box h3 { font-size: 1.25rem; } .endcard { position: absolute; align-items: end; } }
@media (max-width: 600px) { .endcard { position: static; background: none; padding: 10px 0 0; } }
/* fixes: hidden really hides the test bar; the end card sits right under the picture, compact, always in view */
.testbar[hidden], .openbook[hidden] { display: none !important; }
.endcard, .endcard { position: static !important; inset: auto; background: none !important; padding: 12px 0 0 !important; display: block; }
.ec-box { margin: 0 auto; padding: 12px 16px; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; text-align: left; max-width: 640px; }
.ec-box img { height: 64px !important; grid-row: span 2; }
.ec-box h3 { margin: 0; font-size: 1.3rem; } .ec-box p { margin: 0; font-size: .95rem; }
.ec-box .g-nav { grid-column: 1 / -1; justify-content: center; margin-top: 8px; }
.ec-box [data-e="test"] { font-size: 1.15rem; padding: 12px 22px; animation: next-glow 1.4s ease-in-out infinite alternate; }
@keyframes next-glow { from { box-shadow: 0 0 0 0 #f5b82e88; } to { box-shadow: 0 0 0 8px #f5b82e00; } }

#hintbox .reveal { margin-top: 10px; } #hintbox ol, #hintbox ul { margin: 6px 0 0; padding-left: 22px; } #hintbox li { margin: 4px 0; }

/* step-by-step class activity */
.guided { display: grid; gap: 12px; margin: 8px 0 14px; }
.g-step { background: #fff; border: 2px solid #dbe5f5; border-radius: 16px; padding: 12px 14px; }
.g-step h3 { margin: 0 0 8px; font: 800 1.05rem 'Baloo 2', sans-serif; color: #24304a; }
.g-table { border-collapse: collapse; width: 100%; max-width: 480px; font-weight: 700; }
.g-table th, .g-table td { border: 2px solid #c9d6ee; padding: 8px 10px; text-align: center; }
.g-table th { background: #eef4ff; font-size: .9rem; }
.g-line { margin: 6px 0; font-weight: 800; font-size: 1.05rem; }
.g-num { width: 84px; font: 800 1.05rem Nunito, sans-serif; padding: 6px 8px; border: 2px solid #9db8e8; border-radius: 10px; text-align: center; }
.g-sel { font: 800 1rem Nunito, sans-serif; padding: 6px 8px; border: 2px solid #9db8e8; border-radius: 10px; }
.g-opts { display: grid; gap: 6px; }
.g-opt { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border: 2px solid #e3eaf6; border-radius: 12px; cursor: pointer; font-weight: 700; }
.g-opt input { margin-top: 4px; width: 20px; height: 20px; flex: none; }
.g-opt:has(input:checked) { border-color: #f5b82e; background: #fff8e6; }
.g-sentence { font-weight: 800; font-size: 1.05rem; line-height: 2.4; margin: 0; }
.g-mark { font-weight: 800; margin-left: 6px; }
.challenge-x { margin-top: 10px; border: 2px dashed #c9d6ee; border-radius: 16px; padding: 10px 14px; }
.challenge-x summary { cursor: pointer; font-weight: 800; }

/* contents: finished lessons turn green like a bookmark; the current lesson has a ribbon */
.toc-unit li.done a { background: #e6f6ea; }
.toc-unit li.done .l-t { color: #1f7a3a; }
.toc-unit li.done .l-id::after { content: ' ✓'; color: #1f7a3a; }
.toc-unit li.started a { background: #fff6dd; }
.toc-unit li.here a { box-shadow: inset 4px 0 0 #d9534f; }
.toc-unit li.here .l-t::before { content: '🔖 '; }
.toc-key::after { content: '  ·  green = finished  ·  🔖 = where you stopped'; font-weight: 700; color: #1f7a3a; }
.words { margin: 10px 0 0; }

/* a wrong item glows so the child finds it (with the 🔁 words, not color alone) */
.g-wrong { outline: 3px solid #f59f00; outline-offset: 3px; border-radius: 14px; animation: g-pulse 1s ease-in-out 3; }
@keyframes g-pulse { 50% { outline-color: #ffd43b; transform: scale(1.01); } }
@media (prefers-reduced-motion: reduce) { .g-wrong { animation: none; } }

/* number boxes with big − / + buttons */
.g-stepper { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.g-stepper .g-num { width: 64px; }
.g-inc, .g-dec { width: 40px; height: 40px; border-radius: 12px; border: 2px solid #9db8e8; background: #eef4ff; font: 800 1.4rem/1 Nunito, sans-serif; color: #24304a; cursor: pointer; touch-action: manipulation; }
.g-inc:active, .g-dec:active { transform: scale(.94); background: #dbe8ff; }

/* fixes 2026-10-20: the shelf cover picture fills the whole book (it collapsed inside the centred grid) */
.sh-cover img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the bouncing "Tap me!" opens the book too */
.tap-me { pointer-events: auto; cursor: pointer; }
/* a class opened straight from a link waits for one tap (browsers keep the voice silent until then) */
.tapstart { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; background: #0d1530aa; border: 0; border-radius: 14px; cursor: pointer; color: #fff; font: 800 clamp(20px, 4vw, 34px) 'Baloo 2', sans-serif; }
.tapstart span { background: var(--gold, #f5b82e); color: #3a2600; padding: 14px 28px; border-radius: 999px; box-shadow: 0 8px 20px #0006; animation: tap-bob .8s ease-in-out infinite alternate; }
/* its own bounce: tap-bounce also slides left by half (it centers .tap-me), which pushed this button off-center */
@keyframes tap-bob { to { transform: translateY(-6px); } }
.unlock .plan:only-child { width: 100%; max-width: 420px; justify-self: center; }
/* unit teaser: on mouse-over in the Contents (a first tap on touch screens), and "coming up next" after a Unit Test */
.u-peek { position: absolute; left: 8px; top: 42px; z-index: 30; width: min(300px, calc(100% - 16px)); background: #fff; border: 3px solid #0f2f63; border-radius: 16px; box-shadow: 0 10px 28px rgba(15, 47, 99, .28); overflow: hidden; visibility: hidden; opacity: 0; transition: opacity .15s, visibility 0s .3s; }
.toc-u:hover ~ .u-peek, .u-peek:hover, .toc-unit.peek .u-peek { visibility: visible; opacity: 1; transition-delay: 0s; }
.u-peek img, .next-unit img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.u-peek .pk-txt { padding: 10px 12px 12px; }
.pk-q { margin: 0 0 10px; font: 700 1rem/1.35 Nunito; color: var(--ink); }
.u-peek .btn { width: 100%; }
.next-unit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: center; margin: 18px 0 8px; padding: 14px; background: #fffaf0; border: 3px solid #f1c14b; border-radius: 20px; }
.next-unit .nu-k { margin: 0; font: 800 .8rem Nunito; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); }
.next-unit h3 { margin: 2px 0 8px; font: 800 1.35rem/1.2 'Baloo 2'; }
.next-unit img { border-radius: 14px; }
@media (max-width: 640px) { .next-unit { grid-template-columns: 1fr; } }
/* parent test report */
.report .rp-kids { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.report .rp-name small { font-weight: 600; color: #5a6680; font-size: .9rem; }
.report .rp-book { margin: 22px 0 6px; font: 800 1.3rem 'Baloo 2'; }
.rp-unit { background: #fff; border: 3px solid #cfdcf0; border-left-width: 10px; border-radius: 16px; padding: 12px 16px; margin: 12px 0; }
.rp-unit.review { border-left-color: #f0a030; }
.rp-unit.good { border-left-color: #3fa66b; }
.rp-unit h3 { margin: 0 0 4px; font: 800 1.15rem 'Baloo 2'; }
.rp-sum { margin: 0 0 8px; color: #4a5470; }
.rp-lesson { border-top: 1px solid #e3e9f3; padding: 6px 0; }
.rp-lesson summary { cursor: pointer; font-weight: 800; padding: 4px 0; }
.rp-lesson .l-id { color: var(--blue); margin-right: 4px; }
.rp-tag { font-weight: 600; font-size: .85rem; color: #5a6680; margin-left: 6px; }
.rp-try { margin: 6px 0 6px 10px; padding: 6px 10px; border-radius: 10px; background: #f6f9fd; }
.rp-try.fail { background: #fff6ea; }
.rp-try p { margin: 2px 0; }
.rp-miss { margin: 6px 0 2px; padding-left: 18px; }
.rp-miss li { margin: 0 0 8px; }
.rp-q { font-weight: 700; }
.rp-why { color: #4a5470; font-size: .95rem; }
@media print { .no-print, .top, .help { display: none !important; } .rp-unit { break-inside: avoid; } body { background: #fff; } }
/* Practice My Mistakes */
.practice { margin-top: 14px; }
.practice h3 { font: 800 1.25rem 'Baloo 2'; margin: 10px 0; }
.pr-start { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pr-start span { color: #4a5470; }
.rp-prac { margin: 6px 0 6px 10px; padding: 6px 10px; border-radius: 10px; background: #eef7f0; }

/* 2026-10-21 review fixes */
.r-grades button:disabled { opacity: .45; cursor: not-allowed; }
.op-skip { display: inline-block; margin-top: 6px; font-size: .85rem; color: var(--ink); opacity: .75; animation: skip-pulse 1.6s ease-in-out infinite; }
@keyframes skip-pulse { 50% { opacity: .35; } }
.u-badge { font-size: .95em; }
.pr-n { font-size: .8em; opacity: .7; }
.pr-dots { display: flex; gap: 6px; margin: 4px 0 10px; }
.pr-dots i { width: 12px; height: 12px; border-radius: 50%; background: #dfe6f3; }
.pr-dots i.ok { background: var(--green); }
.pr-dots i.no { background: #f0b4ae; }
.pr-dots i.cur { background: var(--ink); animation: skip-pulse 1s ease-in-out infinite; }
.pr-yay .mark { display: inline-block; animation: bp-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
.badge-pop .ovl-card { position: relative; overflow: hidden; text-align: center; }
.bp-medal { position: relative; display: inline-block; font-size: 5.5rem; line-height: 1; animation: bp-pop .7s cubic-bezier(.2, 1.6, .4, 1) both; }
.bp-medal span { position: absolute; left: 50%; top: 62%; transform: translate(-50%, -50%); font: 800 1.5rem 'Baloo 2'; color: #fff; text-shadow: 0 2px 0 #0005; }
.bp-confetti i { position: absolute; top: -10%; font-style: normal; font-size: 1.4rem; animation: bp-fall 2.4s ease-in both; pointer-events: none; }
@keyframes bp-pop { from { transform: scale(0) rotate(-25deg); opacity: 0; } }
@keyframes bp-fall { to { transform: translateY(520px) rotate(300deg); opacity: 0; } }
@media (max-width: 560px) {
  .teacher-says { flex-direction: column; align-items: center; text-align: center; }
  .teacher-says img { width: 84px; height: 84px; }
  .teacher-says .qbar { justify-content: center; }
  .teacher-says .steam { left: calc(50% + 20px); }
  .paper-head { flex-direction: column; align-items: flex-start; }
  .paper-head h2 { font-size: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) { .op-skip, .pr-dots i.cur, .bp-medal, .bp-confetti i, .pr-yay .mark { animation: none; } }
.u-ngss { margin: 2px 8px 4px; font: 700 .72rem Nunito; letter-spacing: .02em; color: #5b6b86; }
.u-ngss span { font-weight: 600; color: #8090a8; }
/* weekly plan (#/plan) */
.plan .pw-tips { margin: 6px 0 16px; padding-left: 1.2em; color: #3d4a63; }
.pw-weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.pw-week { padding: 10px 12px; border: 2px solid #dfe6f3; border-radius: 14px; background: #fff; }
.pw-week h3 { margin: 0 0 6px; font: 800 1rem 'Baloo 2'; color: #0f2f63; }
.pw-week.here { border-color: var(--gold, #f5b82e); box-shadow: 0 0 0 3px #f5b82e55; }
.pw-week.done { background: #f1faf4; border-color: #bfe5cc; }
.pw-week ul { list-style: none; margin: 0; padding: 0; }
.pw-week li { margin: 4px 0; font-size: .95rem; }
.pw-week li a { color: inherit; text-decoration: none; }
.pw-week li.done a { color: #5b7a66; }
.pw-week .pw-ic { display: inline-block; width: 1.5em; }
.pw-unit { margin: 6px 0 2px; font: 800 .72rem Nunito; text-transform: uppercase; letter-spacing: .06em; color: var(--blue, #2f6fd6); }
@media print { .pw-weeks { grid-template-columns: repeat(3, 1fr); gap: 6px; } .pw-week { break-inside: avoid; padding: 6px 8px; } .pw-week li { font-size: .8rem; } }
/* first screen + grade picker (owner, 2026-10-21) */
.member-btn { position: fixed; top: calc(10px + env(safe-area-inset-top)); right: 12px; z-index: 40; padding: 8px 14px; border-radius: 999px; border: 2px solid #fff; background: #0f2f63e6; color: #fff; font: 800 .9rem Nunito, sans-serif; cursor: pointer; box-shadow: 0 3px 10px #0005; }
.member-btn:hover { background: #1b4a94; }
.welcome-scene { min-height: 100vh; display: grid; place-items: center; padding: 70px 16px 30px; background: linear-gradient(#0b1f45aa, #0b1f45dd), url(assets/classroom.webp) center / cover no-repeat; }
.wl-card { max-width: 560px; text-align: center; background: #fffdf6; border: 4px solid var(--ink, #0f2f63); border-radius: 28px; padding: 26px 22px 22px; box-shadow: 0 10px 0 #0004; position: relative; }
.wl-teacher { width: 120px; margin: -80px auto 4px; display: block; filter: drop-shadow(0 6px 8px #0004); }
.wl-card h1 { margin: 0 0 6px; font: 800 clamp(1.8rem, 6vw, 2.6rem) 'Baloo 2', sans-serif; color: #0f2f63; }
.wl-sub { margin: 0 0 18px; font-size: 1.05rem; color: #3d4a63; }
.wl-btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.wl-btns .btn.big { font-size: 1.35rem; padding: 14px 34px; }
.wl-free { margin: 16px 0 0; font-weight: 800; color: #2a7a3b; }
.grade-pick { padding-top: 60px; text-align: center; }
.gp-books { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 220px)); gap: 18px; justify-content: center; margin-top: 18px; }
.gp-book { display: grid; gap: 4px; justify-items: center; padding: 12px; border-radius: 18px; background: #fff; border: 3px solid #dfe6f3; text-decoration: none; color: #0f2f63; box-shadow: 0 6px 0 #0001; transition: transform .15s; }
.gp-book:hover { transform: translateY(-4px) rotate(-1deg); border-color: var(--gold, #f5b82e); }
.gp-book img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; box-shadow: 0 4px 10px #0003; }
.gp-book b { font: 800 1.3rem 'Baloo 2', sans-serif; }
.gp-book span { font-weight: 700; color: #5b6b86; }
.gp-book.soon { opacity: .5; cursor: default; }
.home-scene .member-btn { position: fixed; }
.r-grades[hidden] { display: none !important; }
/* Grades 4–5: the book's title is page text on the white band of the cover (the art has no words) */
.book-hit .book-title { font: 800 30px 'Baloo 2', sans-serif; fill: #0f3d91; pointer-events: none; letter-spacing: .5px; }

/* the HTE Learning brand logo (owner, 2026-10-21): corner badge on the welcome, grade and classroom screens */
.hte-badge { position: fixed; top: calc(8px + env(safe-area-inset-top)); left: 12px; z-index: 40; width: clamp(46px, 6vw, 66px); height: auto; filter: drop-shadow(0 2px 4px #0006); pointer-events: none; }
.wl-logo { display: block; width: 120px; margin: -76px auto 6px; filter: drop-shadow(0 6px 8px #0004); }
/* HTE Learning Center front gate (welcome screen) */
.gate-scene { min-height: 100vh; display: grid; place-items: center; align-content: center; padding: 60px 10px 10px; background: #bfe3ff; }
.gate-art { position: relative; width: min(100%, calc((100vh - 90px) * 1.5)); aspect-ratio: 3 / 2; border-radius: 22px; overflow: hidden; box-shadow: 0 10px 30px #0004; }
.gate-art svg { display: block; width: 100%; height: 100%; }
.gate-name { font: 800 72px 'Baloo 2', sans-serif; fill: #0f3d91; stroke: #fff8; stroke-width: 2px; paint-order: stroke; }
.gate-go { position: absolute; left: 50%; bottom: 4%; transform: translateX(-50%); width: min(92%, 520px); text-align: center; background: #fffdf6e8; border: 3px solid #0f2f63; border-radius: 22px; padding: 12px 14px 10px; box-shadow: 0 6px 0 #0003; }
.gate-ask { margin: 0 0 8px; font: 800 1.25rem 'Baloo 2', sans-serif; color: #0f2f63; }
.gate-go .wl-free { margin-top: 8px; font-size: .9rem; }
.gate-note { margin: 8px 0 0; font-size: .75rem; color: #3d5a80; text-align: center; }
@media (max-width: 600px) {
  .gate-art { aspect-ratio: auto; height: auto; overflow: visible; box-shadow: none; }
  .gate-art svg { border-radius: 16px; box-shadow: 0 6px 18px #0004; height: auto; }
  .gate-go { position: static; transform: none; margin: 12px auto 0; }
}
/* the hallway (grade picker) */
.hall-scene { min-height: 100vh; padding: 60px 10px 24px; text-align: center; background: #f7efe1; }
.hall-scene .top { max-width: 1100px; margin: 0 auto 6px; text-align: left; }
.hall-art { max-width: 1100px; margin: 0 auto; }
.hall-art svg { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 10px 28px #0003; }
.hall-sign { font-family: 'Baloo 2', sans-serif; font-weight: 800; fill: #5a3410; dominant-baseline: middle; }
.hall-door { fill: transparent; stroke: transparent; stroke-width: 6; cursor: pointer; transition: fill .2s, stroke .2s; }
.hall-art a:hover .hall-door, .hall-art a:focus .hall-door { fill: #fff4; stroke: #ffd43b; }
.hall-art a .hall-door { animation: door-glow 2.2s ease-in-out infinite; }
@keyframes door-glow { 50% { stroke: #ffd43bcc; } }
.hall-door.shut { cursor: default; }
.hall-q { margin: 14px 0 8px; font: 800 clamp(1.4rem, 4vw, 2rem) 'Baloo 2', sans-serif; color: #0f2f63; }
/* one door per row, all the same width (owner, 2026-10-23) */
.hall-btns { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.hall-btns > * { width: min(260px, 100%); text-align: center; justify-content: center; }
.hall-btns .soon { opacity: .55; cursor: default; }
@media (prefers-reduced-motion: reduce) { .hall-art a .hall-door { animation: none; } }
.hall-art a .hall-door.other { animation: none; }

.gate-name { font-size: 60px !important; } /* follows the arched sign (textPath) */
/* Grade 5: the comic stops on a question card; a short reading closes the comic */
.predict-card { display: flex; gap: 14px; align-items: center; height: 100%; padding: 4% 5%; background: linear-gradient(135deg, #fff8e1, #e8f4ff); border-radius: 14px; text-align: left; }
.predict-card > img { width: 22%; max-width: 140px; flex: none; }
.predict-card h3 { margin: 6px 0 10px; font: 800 clamp(1.05rem, 2.6vw, 1.5rem) 'Baloo 2', sans-serif; color: #0f2f63; }
.pr-choices { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.pr-choices .btn { text-align: left; white-space: normal; }
.pr-after { margin: 8px 0 0; font-weight: 800; color: #2a7a3b; min-height: 1.2em; }
.mshot.asking { display: grid; place-items: stretch; background: #fffdf6; }
.panel.predict .predict-card { aspect-ratio: 3 / 2; height: auto; padding: 4%; }
.panel.predict .predict-card h3 { font-size: 1rem; }
.panel.predict .pr-choices { grid-template-columns: 1fr; gap: 4px; }
.panel.predict .pr-choices .btn { padding: 4px 8px; font-size: .8rem; }
.short-read { grid-column: 1 / -1; margin-top: 6px; padding: 14px 18px; border-radius: 16px; background: #eef8ff; border: 3px solid #b9dcf7; }
.short-read h3 { margin: 0 0 6px; font: 800 1.15rem 'Baloo 2', sans-serif; color: #0f2f63; }
.short-read p { margin: 0; line-height: 1.55; }
@media (max-width: 600px) { .predict-card { flex-direction: column; text-align: center; } .predict-card > img { width: 70px; } }
.mshot.asking .predict-card > img { position: static; inset: auto; width: 22%; max-width: 150px; height: auto; object-fit: contain; transform: none; }
.mshot.asking .predict-card { position: absolute; inset: 0; }
.l-ext { font-style: normal; font-size: .78em; color: #7a869a; font-weight: 700; } .gate-note a { color: inherit; }
/* report: unit skill bars */
.rp-bars { margin: 8px 0 18px; padding: 12px 14px; border: 2px solid #dfe6f3; border-radius: 14px; background: #fff; }
.rb-head { margin: 0 0 8px; font-weight: 800; color: #0f2f63; } .rb-head small { font-weight: 600; color: #6b7a93; }
.rp-bar { display: grid; grid-template-columns: minmax(150px, 34%) 1fr 48px; align-items: center; gap: 10px; padding: 4px 0; color: inherit; text-decoration: none; }
.rb-name { font-size: .88rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-track { height: 14px; border-radius: 999px; background: #eef1f6; overflow: hidden; }
.rb-track i { display: block; height: 100%; border-radius: 999px; }
.rp-bar.good .rb-track i { background: #2f9e44; } .rp-bar.mid .rb-track i { background: #f2b705; } .rp-bar.low .rb-track i { background: #e03131; }
.rp-bar.none { opacity: .55; }
.rb-pct { font-weight: 800; text-align: right; }
@media (max-width: 560px) { .rp-bar { grid-template-columns: 1fr 44px; } .rb-name { grid-column: 1 / -1; } }
@media print { .rp-bars { break-inside: avoid; } .rp-bar .rb-track i { -webkit-print-color-adjust: exact; print-color-adjust: exact; } }
/* a handed-back test: the child's right answer green, a wrong one red (even though it is also the chosen one) */
.opt.right[aria-checked="true"] { border-color: var(--green); background: #e9f8ef; }
.opt.wrong[aria-checked="true"] { border-color: var(--red); background: #fdeceb; }
/* "Class is over" card: wider, and the three buttons on one row (owner, 2026-10-22) */
.ec-box { max-width: 900px; }
.ec-box .g-nav { flex-wrap: nowrap; }
.ec-box .g-nav .btn { white-space: nowrap; }
@media (max-width: 760px) { .ec-box .g-nav { flex-wrap: wrap; } }
/* leaving: an animation (the pop-in animation would otherwise keep the card showing) */
.op-card.gone { animation: op-out .5s ease-in forwards; pointer-events: none; }
@keyframes op-out { to { opacity: 0; transform: translateY(-14px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .op-card.gone { animation: none; opacity: 0; } }
/* the way back to the classroom, on top of every page inside the school */
.top .class-link { background: #fff6dd; border: 2px solid #f0c95a; border-radius: 999px; padding: 3px 12px; color: #5b3d00; }
.toc-scene .top .class-link { color: #5b3d00; }
/* comic player: the picture in its own frame; on phones the line goes UNDER the picture so it never covers it */
.mpic { position: absolute; inset: 0; overflow: hidden; }
@media (max-width: 600px) {
  .pl-stage .film { aspect-ratio: 1 / 1; background: #1d2440; }
  .mpic { bottom: auto; height: 66.67%; }
  .mcap { bottom: 2.5%; width: 94%; }
  .mcap span { font-size: 15px; }
}
.pl-short { display: none; }
/* phones (owner, 2026-10-23): buttons in two short rows, a bigger picture with the line right under it,
   and "Words to know" on its own line with the words below */
@media (max-width: 600px) {
  .player { padding: 6px; }
  .pl-stage .film { aspect-ratio: 1 / 1.16; }
  .mpic { height: 72.4%; }
  .mcap { top: 74%; bottom: auto; padding: 7px 14px 9px; }
  .mcap b { font-size: .95rem; }
  .mcap span { font-size: 18px; line-height: 1.3; }
  .pl-bar { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 8px; }
  .pl-bar .btn { padding: 8px 6px; font-size: .9rem; white-space: nowrap; min-width: 0; }
  .pl-count { grid-column: span 2; font-size: .85rem; min-width: 0; }
  #plback, #plpause { grid-column: span 2; }
  #plskip, #pltest { grid-column: span 3; }
  .pl-long { display: none; } .pl-short { display: inline; }
  .words { gap: 8px; }
  .words .tag { flex-basis: 100%; }
}
.u-prog.big { height: 22px; margin: 6px 0 10px; }
.u-prog.big span { font-size: .8rem; line-height: 22px; }
/* the way to buy, on every page (owner, 2026-10-22) */
.unlock-link { display: inline-block; background: linear-gradient(#ffe066, #f2b632); color: #3b2300; border: 2px solid #b27b00; border-radius: 999px; padding: 4px 14px; font: 800 .95rem Nunito, sans-serif; text-decoration: none; white-space: nowrap; box-shadow: 0 3px 0 #b27b0055; }
.unlock-link.in-top { margin-left: auto; }
.unlock-link.float { position: fixed; left: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 60; }
@media print { .unlock-link { display: none; } }
/* Unit Test sentence starters */
.starters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.starters span { font-weight: 800; color: var(--soft); font-size: .9rem; }
.starters .chip { border: 2px solid #c9b6ff; background: #f6f1ff; color: #4b2fa8; border-radius: 999px; padding: 4px 12px; font: 700 .9rem Nunito, sans-serif; cursor: pointer; }
/* ways out of a classroom (owner, 2026-10-22) */
.home-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 12px 0 70px; }
.home-nav a { background: #fff; border: 2px solid #d9c7a0; border-radius: 999px; padding: 6px 14px; font-weight: 800; color: #1d2a4a; text-decoration: none; }
.hall-price { max-width: 760px; margin: 6px auto 0; background: #fff6dd; border: 2px solid #f0c95a; border-radius: 14px; padding: 8px 14px; font-weight: 700; color: #3b2300; }
.hall-price a { color: #8a5a00; font-weight: 800; }
/* choosing a classroom: no yellow outlines on the doors, only a soft light on hover (owner, 2026-10-22) */
.hall-art a .hall-door, .hall-art a:hover .hall-door, .hall-art a:focus .hall-door { stroke: transparent !important; animation: none !important; }
.hall-art a:hover .hall-door, .hall-art a:focus .hall-door { fill: #fff3; }
.hall-art a:focus { outline: none; }

/* background music switch (2026-10-23): a small round button in the bottom-right corner of every page */
.music-btn { position: fixed; right: calc(12px + env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #f0c95a; background: #fff6dd; font-size: 1.2rem; box-shadow: 0 2px 6px #0003; cursor: pointer; }
.music-btn.off { opacity: .7; border-color: #ccc; background: #f3f3f3; }
@media print { .music-btn { display: none; } }

/* pop-up cards taller than the phone screen scroll, and keep clear of Safari's bottom bar (owner, 2026-10-23:
   the Start reading button was hidden on the new-reader card) */
.ovl { overflow-y: auto; display: flex; flex-direction: column; align-items: center; padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
.ovl > * { margin-block: auto; flex: none; }
@media (max-width: 600px) {
  .r-new { padding: 16px; gap: 8px; }
  .r-new .ovl-face { width: 64px; height: 64px; }
  .r-new h2 { font-size: 1.35rem; }
  .r-new .r-faces { grid-template-columns: repeat(6, 1fr); gap: 5px; }
}

/* grown-ups' area: parent guide + answer key (2026-10-24) */
.grownups h1, .answer-key h1 { font: 800 clamp(1.7rem, 5vw, 2.3rem) 'Baloo 2', sans-serif; margin: 8px 0 2px; }
.grownups .sub, .answer-key .sub { color: var(--soft); margin: 0 0 12px; }
.top #gplock { margin-right: 8px; }
.gp-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 10px 0 18px; }
.gp-nav .btn { justify-content: center; text-align: center; text-decoration: none; }
.gp-sec { background: #fff; border: 3px solid #cfdcf0; border-radius: 18px; padding: 14px 18px; margin: 14px 0; }
.gp-sec h2 { font: 800 1.5rem 'Baloo 2', sans-serif; margin: 0 0 6px; }
.gp-sec h3 { font: 800 1.15rem 'Baloo 2', sans-serif; margin: 16px 0 4px; color: #0f2f63; }
.gp-sec h4 { margin: 12px 0 4px; }
.gp-sec p, .gp-sec li { font-size: 1rem; }
.gp-steps li, .gp-help li { margin: 6px 0; }
.gp-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.gp-table { border-collapse: collapse; width: 100%; font-size: .92rem; margin: 6px 0; }
.gp-table th, .gp-table td { border: 1px solid #d9e2f0; padding: 6px 8px; text-align: left; vertical-align: top; }
.gp-table th { background: #eef4fc; }
.gp-ngss td:first-child { min-width: 160px; }
.k-free { background: #fff6dc; border: 2px dashed var(--gold, #f2b33d); border-radius: 12px; padding: 10px 14px; }
.k-jump { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.k-jump a { padding: 4px 10px; border-radius: 999px; background: #eef4fc; color: var(--ink); text-decoration: none; font-weight: 800; font-size: .9rem; }
.k-unit { background: #fff; border: 3px solid #cfdcf0; border-radius: 18px; padding: 10px 16px; margin: 14px 0; }
.k-unit > summary { cursor: pointer; list-style-position: outside; }
.k-unit > summary h2 { display: inline; font: 800 1.35rem 'Baloo 2', sans-serif; }
.k-ngss { display: block; color: var(--soft); font-size: .85rem; margin: 2px 0 4px; }
.k-lesson { border-top: 2px solid #e6edf7; padding: 10px 0 6px; font-size: .98rem; }
.k-lesson h3 { font: 800 1.15rem 'Baloo 2', sans-serif; margin: 4px 0; }
.k-lesson h4 { margin: 10px 0 4px; font-size: 1rem; }
.k-lesson h5 { margin: 10px 0 2px; font-size: .9rem; text-transform: uppercase; letter-spacing: .03em; color: #0f2f63; }
.k-lesson p { margin: 4px 0; }
.k-quiz > li { margin: 0 0 10px; }
.k-q { font-weight: 800; }
.k-opts { margin: 2px 0; padding-left: 24px; }
.k-opts li.ok { background: #e9f8ef; border-radius: 6px; }
.k-ans { background: #f5f8fd; border-radius: 8px; padding: 6px 10px; }
.k-task { color: #33405c; }
.k-steps li { margin: 4px 0; }
.k-test { background: #fffaf0; border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
@media (max-width: 600px) { .gp-sec, .k-unit { padding: 10px 12px; } .gp-nav { grid-template-columns: 1fr; } }
@media print {
  .grownups .gp-sec, .k-unit { border: 0; padding: 0; break-inside: auto; }
  .k-lesson { break-inside: avoid; }
  .k-opts li.ok { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .gp-nav, .k-jump, .k-free a { display: none !important; }
  .grownups, .answer-key { font-size: 12pt; }
}
/* 2026-10-25: a short hint that the class activity opens after the test */
.next-hint { margin: 8px 0 0; padding: 8px 14px; border-radius: 12px; background: #fff6d6; border: 2px dashed #e0b84a; color: #5b3d00; font-weight: 800; }
.next-hint[hidden] { display: none; }
/* 2026-10-25: on computers the comic picture shrinks to fit the screen height, so the buttons under it stay in view (1280×720) */
@media (min-width: 601px) {
  .pl-stage .film { width: min(100%, 1000px, calc((100vh - 120px) * 1.5)); width: min(100%, 1000px, calc((100svh - 120px) * 1.5)); }
}