/* Books: desk + closed book, two-page spread, scratch reveal, slide-to-read overlay, comprehension, library tab */
.bk-layer { position: absolute; inset: 0; z-index: 600; }
.bk-root { position: absolute; inset: 0; overflow: hidden; }
.bk-desk { position: absolute; inset: 0; background: #DAA774 repeating-linear-gradient(90deg, transparent 0 196px, rgba(120, 70, 30, .13) 196px 200px); }
.bk-desk::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 60px, rgba(255, 255, 255, .05) 60px 64px, transparent 64px 130px); }
.bk-props { position: absolute; left: 0; top: 0; pointer-events: none; }
.bk-closed { position: absolute; inset: 0; }
.bk-prompt { position: absolute; left: 0; right: 0; top: 58px; display: flex; justify-content: center; align-items: center; gap: 20px; font-size: 44px; font-weight: 700; color: var(--navy); }
.bk-pagecount { font-size: 28px; font-weight: 700; color: rgba(34, 23, 80, .6); background: rgba(255, 255, 255, .6); padding: 8px 22px; border-radius: 999px; }
.bk-open-btn { position: absolute; left: 560px; top: 150px; width: 480px; height: 610px; }
.bk-closed .hint { color: rgba(34, 23, 80, .62); bottom: 40px; }
.bk-done { position: absolute; right: 54px; top: 380px; width: 140px; height: 136px; z-index: 6; }
.bk-lib-x { position: absolute; left: 44px; top: 38px; width: 90px; height: 90px; display: grid; place-items: center; z-index: 6; }
.bk-lib-x svg { width: 72px; height: 72px; }

/* hardcover book */
.bk-book { position: relative; width: 100%; height: 100%; }
.bk-book::before { content: ''; position: absolute; left: 18px; top: 12px; right: -14px; bottom: -14px; background: #FFFFFF; border-radius: 12px 32px 32px 12px; box-shadow: 0 12px 0 rgba(90, 50, 20, .25); }
.bk-cover { position: absolute; inset: 0; border-radius: 14px 34px 34px 14px; display: flex; flex-direction: column; align-items: center; padding-top: 84px;
  background: linear-gradient(90deg, var(--edge) 0 30px, rgba(255, 255, 255, .22) 30px 34px, var(--cover) 34px); }
.bk-chip { position: absolute; left: 54px; top: 26px; background: #FFD84D; color: var(--navy); font-size: 26px; font-weight: 700; padding: 6px 18px; border-radius: 999px; }
.bk-portrait { width: 300px; height: 300px; border-radius: 50%; overflow: hidden; border: 10px solid #FFFFFF; background: #FFFFFF; margin-left: 20px; }
.bk-portrait svg { width: 100%; height: 100%; display: block; }
.bk-title { color: #FFFFFF; font-family: var(--font-read); font-weight: 700; font-size: 50px; line-height: 1.1; margin: 30px 0 0 20px; padding: 0 40px; text-align: center; }
.bk-book.back .bk-cover { justify-content: center; padding: 0; }
.bk-replay { width: 210px; height: 210px; margin-left: 20px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; box-shadow: 0 8px 0 rgba(0, 0, 0, .15); }
.bk-open-btn:active .bk-book { transform: scale(.98); }

/* two-page spread */
.bk-open { position: absolute; inset: 0; z-index: 5; }
.bk-spread { position: absolute; left: 100px; top: 90px; width: 1400px; height: 740px; border-radius: 34px; background: var(--page);
  box-shadow: 0 16px 0 rgba(90, 50, 20, .28), inset 0 0 0 8px rgba(255, 255, 255, .35); }
.bk-spread::before { content: ''; position: absolute; left: 666px; width: 68px; top: 0; bottom: 0; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .12) 50%, transparent); }
.bk-count { position: absolute; left: 40px; top: 28px; z-index: 2; font-size: 28px; font-weight: 700; color: var(--navy); background: rgba(34, 23, 80, .1); padding: 6px 20px; border-radius: 999px; }
.bk-x { position: absolute; right: 24px; top: 20px; z-index: 3; width: 84px; height: 84px; display: grid; place-items: center; }
.bk-x svg { width: 60px; height: 60px; }
.bk-left { position: absolute; left: 0; top: 0; width: 700px; height: 740px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 44px; padding: 70px 60px 110px; }
.bk-grown { margin: 0; max-width: 560px; text-align: center; font-size: 38px; font-weight: 600; line-height: 1.35; color: rgba(34, 23, 80, .55); }
.bk-card { display: flex; align-items: center; gap: 18px; max-width: 600px; padding: 26px 44px 26px 32px; border-radius: 28px; background: #FFFFFF; box-shadow: 0 6px 0 rgba(34, 23, 80, .1);
  font-family: var(--font-read); font-weight: 700; color: var(--navy); line-height: 1.3; text-align: left; transition: transform .15s; }
.bk-card:active { transform: scale(.97); }
.bk-card.word { padding: 18px 54px 18px 34px; }
.bk-mag { flex: none; display: grid; place-items: center; opacity: .5; }
.bk-mag svg { width: 46px; height: 46px; }
.bk-right { position: absolute; left: 700px; top: 0; width: 700px; height: 740px; display: grid; place-items: center; padding-bottom: 40px; }
.bk-panel { position: relative; width: 600px; height: 450px; border-radius: 30px; overflow: hidden; background: #FFFFFF; box-shadow: 0 6px 0 rgba(34, 23, 80, .1); }
.bk-panel .bk-pic { width: 100%; height: 100%; display: block; }
.bk-scratch { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.bk-scratch-hand { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 6px; pointer-events: none; color: #9C8CE0; font-size: 36px; font-weight: 700;
  animation: bkWiggle 1.8s ease-in-out infinite; transition: opacity .25s; }
.bk-scratch-hand.gone { opacity: 0; }
@keyframes bkWiggle { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-14px) rotate(-4deg); } 75% { transform: translateX(14px) rotate(4deg); } }
.bk-curl { position: absolute; bottom: 0; width: 140px; height: 140px; z-index: 2; }
.bk-curl.next { right: 0; border-bottom-right-radius: 34px; background: linear-gradient(135deg, transparent 50%, var(--page-shade) 50%, #FFFFFF 100%); animation: bkNudge 2.4s ease-in-out infinite; transform-origin: 100% 100%; }
.bk-curl.next.last { background: linear-gradient(135deg, transparent 50%, var(--cover) 50%, var(--cover) 100%); }
.bk-curl.prev { left: 0; border-bottom-left-radius: 34px; background: linear-gradient(225deg, transparent 50%, var(--page-shade) 50%, #FFFFFF 100%); }
@keyframes bkNudge { 0%, 70%, 100% { transform: none; } 80% { transform: scale(1.12); } 90% { transform: scale(.98); } }

/* first-page coach bubbles */
.bk-coach { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.bk-tip { position: absolute; display: flex; align-items: center; gap: 14px; padding: 14px 26px 14px 14px; border-radius: 20px; background: var(--navy); color: #FFFFFF; font-size: 30px; font-weight: 700; box-shadow: 0 8px 0 rgba(0, 0, 0, .15); }
.bk-tip b { width: 46px; height: 46px; border-radius: 50%; background: #FFD84D; color: var(--navy); display: grid; place-items: center; font-size: 28px; }
.bk-tip.c1 { left: 170px; top: 150px; }
.bk-tip.c2 { left: 190px; top: 620px; }
.bk-tip.c3 { left: 930px; top: 150px; }

/* slide-to-read overlay */
.bk-reader { position: absolute; inset: 0; z-index: 20; }
.bkr-lines { position: absolute; left: 110px; right: 250px; top: 150px; bottom: 170px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; gap: 30px 46px; }
.bkr-word { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.bkr-text { font-family: var(--font-read); font-weight: 700; line-height: 1.1; white-space: nowrap; color: var(--muted); transition: color .15s; }
.bkr-text.lit { color: var(--navy); }
.bkr-trackbox { position: relative; height: 64px; margin-bottom: 150px; }
.bkr-lines:not(.single) .bkr-trackbox { height: 40px; margin-bottom: 96px; }
.bkr-lines:not(.single) .track { height: 40px; }
.bkr-lines:not(.single) .knob { top: 36px; margin-left: 46px; }
.bkr-lines:not(.single) .knob svg { width: 120px; height: 108px; }
.bkr-done { position: absolute; right: 54px; top: 380px; width: 140px; height: 136px; z-index: 5; }
.bkr-nav ~ .bkr-done { top: 640px; }
.bk-reader .hint { bottom: 44px; }

/* comprehension */
.bk-quiz { position: absolute; inset: 0; }
.bk-q-card { line-height: 1.6; }
.bk-q-card .bk-ans { color: rgba(34, 23, 80, .45); }
.bk-mini { position: absolute; left: 699px; top: 430px; width: 480px; height: 610px; transform: scale(.42); transform-origin: 0 0; }

/* Books tab (library) */
.bt { position: absolute; left: 0; top: 0; width: 1356px; height: 900px; background: #32256B; overflow: hidden; }
.bt-scroll { position: absolute; left: 0; right: 0; top: 150px; bottom: 0; overflow-y: auto; scrollbar-width: none; padding: 10px 60px 80px; touch-action: pan-y; }
.bt-scroll::-webkit-scrollbar { display: none; }
.bt-tier { display: flex; align-items: center; gap: 16px; margin: 26px 0 18px; color: #FFFFFF; font-size: 34px; font-weight: 700; }
.bt-tier i { width: 28px; height: 28px; border-radius: 8px; }
.bt-tier span { color: rgba(255, 255, 255, .55); font-size: 26px; font-weight: 600; }
.bt-grid { display: grid; grid-template-columns: repeat(5, 230px); gap: 34px 22px; }
.bt-book { position: relative; width: 230px; height: 292px; text-align: left; }
.bt-book .bk-book { position: absolute; left: 0; top: 0; width: 480px; height: 610px; transform: scale(.479); transform-origin: 0 0; }
.bt-book.locked .bk-book { filter: grayscale(.85) brightness(.8); }
.bt-lock { position: absolute; left: 76px; top: 100px; width: 80px; height: 80px; border-radius: 50%; background: rgba(34, 23, 80, .75); display: grid; place-items: center; z-index: 2; }
.bt-lesson { position: absolute; left: 12px; bottom: -34px; color: rgba(255, 255, 255, .7); font-size: 22px; font-weight: 700; }
.bt-toast { position: absolute; left: 50%; bottom: 60px; transform: translateX(-50%); background: #FFFFFF; color: var(--navy); font-size: 30px; font-weight: 700; padding: 18px 34px; border-radius: 20px; box-shadow: 0 8px 0 rgba(0, 0, 0, .2); z-index: 5; }

/* ---------------------------------------------------------------- variety (round 6) */
/* tappable friends and props in a page picture (js/book-fun.mjs) */
.bk-panel .bk-t { cursor: pointer; transform-box: fill-box; transform-origin: 50% 100%; }
.bk-mover { position: absolute; z-index: 6; pointer-events: none; }
.bk-mover img { display: block; object-fit: contain; filter: drop-shadow(0 10px 8px rgba(0, 0, 0, .22)); }
.bk-say { position: absolute; z-index: 12; transform: translate(-50%, -100%); padding: 8px 22px; border-radius: 22px; background: #FFFFFF; color: var(--c, #5031F5);
  font-size: 30px; font-weight: 700; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 0 rgba(34, 23, 80, .12); animation: bkSay .35s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes bkSay { from { transform: translate(-50%, -80%) scale(.4); opacity: 0; } to { transform: translate(-50%, -100%); opacity: 1; } }
/* hidden sparkle to find */
.bk-spark { position: absolute; z-index: 5; width: 60px; height: 60px; padding: 0; display: grid; place-items: center; animation: bkTwinkle 1.7s ease-in-out infinite; }
.bk-spark svg { filter: drop-shadow(0 0 6px rgba(255, 231, 122, .9)); }
.bk-spark.found { animation: none; opacity: 0; transform: scale(1.8); transition: opacity .4s, transform .4s; }
@keyframes bkTwinkle { 0%, 100% { transform: scale(.55) rotate(0deg); opacity: .35; } 50% { transform: scale(1) rotate(45deg); opacity: .95; } }
/* a friend peeking in from the edge of the picture */
.bk-peek { position: absolute; z-index: 4; padding: 0; transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.bk-peek img { display: block; pointer-events: none; }
.bk-peek.left { left: 0; transform: translateX(-80%); animation: bkPeekL 5.2s ease-in-out .3s infinite; }
.bk-peek.right { right: 0; transform: translateX(80%); animation: bkPeekR 5.2s ease-in-out .3s infinite; }
.bk-peek.left img { transform: rotate(10deg); }
.bk-peek.right img { transform: rotate(-10deg); }
@keyframes bkPeekL { 0%, 12%, 88%, 100% { transform: translateX(-80%); } 24%, 70% { transform: translateX(-42%); } 47% { transform: translateX(-38%) rotate(-4deg); } }
@keyframes bkPeekR { 0%, 12%, 88%, 100% { transform: translateX(80%); } 24%, 70% { transform: translateX(42%); } 47% { transform: translateX(38%) rotate(4deg); } }
.bk-peek.found { animation: none; }
.bk-peek.left.found { transform: translateX(-6%); }
.bk-peek.right.found { transform: translateX(6%); }
.bk-peek.found img { transform: none; animation: bkHop .6s ease-out 2; }
.bk-peek.left.bye { transform: translateX(-110%); }
.bk-peek.right.bye { transform: translateX(110%); }
@keyframes bkHop { 0%, 100% { translate: 0 0; } 45% { translate: 0 -34px; } }

/* sticker on a finished book's cover */
.bk-sticker { position: absolute; left: 972px; top: 132px; z-index: 4; pointer-events: none; filter: drop-shadow(0 6px 0 rgba(90, 50, 20, .25)); }
.bk-sticker svg { display: block; }
.bk-sticker b { position: absolute; right: -8px; bottom: -4px; min-width: 46px; height: 46px; padding: 0 10px; border-radius: 23px; background: #5031F5; color: #FFFFFF;
  font-size: 28px; font-weight: 700; display: grid; place-items: center; }

/* end-of-book celebrations (js/book-cele.mjs): over the closed book, never blocks taps */
.bk-cele { position: absolute; inset: 0; z-index: 20; pointer-events: none; overflow: hidden; }
.bk-parader { position: absolute; left: 0; top: 520px; width: 280px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bk-parader img { height: 250px; width: 280px; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 12px 8px rgba(90, 50, 20, .3)); }
.bk-pbub { padding: 6px 20px; border-radius: 20px; background: #FFFFFF; color: #5031F5; font-size: 28px; font-weight: 700; white-space: nowrap; box-shadow: 0 5px 0 rgba(90, 50, 20, .2); }
.bk-badge { position: absolute; left: 560px; top: 170px; width: 480px; display: flex; flex-direction: column; align-items: center; }
.bk-badge-disc { width: 360px; height: 360px; border-radius: 50%; overflow: hidden; background: #FFFFFF; border: 16px solid #FDD782; box-shadow: 0 0 0 8px #FFFFFF, 0 14px 0 8px rgba(90, 50, 20, .25); }
.bk-badge-disc svg { width: 100%; height: 100%; display: block; }
.bk-badge-star { position: absolute; right: 30px; top: -16px; }
.bk-badge-rib { margin-top: -34px; position: relative; max-width: 560px; padding: 12px 36px; border-radius: 18px; background: #F85162; color: #FFFFFF; font-family: var(--font-read);
  font-weight: 700; font-size: 42px; text-align: center; box-shadow: 0 8px 0 #C93445; }
.bk-mile { position: absolute; left: 0; right: 0; top: 150px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.bk-mile-star { position: relative; display: grid; place-items: center; }
.bk-mile-star b { position: absolute; left: 0; right: 0; top: 112px; text-align: center; font-size: 110px; line-height: 1; font-weight: 700; color: var(--navy); }
.bk-mile-text { padding: 16px 44px; border-radius: 28px; background: #FFFFFF; color: var(--navy); font-size: 60px; font-weight: 700; box-shadow: 0 10px 0 rgba(90, 50, 20, .25); }

/* comprehension quiz (js/book-quiz.mjs) */
.bkq-dots { position: absolute; left: 66px; top: 160px; display: flex; gap: 14px; z-index: 2; }
.bkq-dots i { width: 26px; height: 26px; border-radius: 50%; background: rgba(34, 23, 80, .15); transition: background .2s, transform .2s; }
.bkq-dots i.on { background: #5031F5; transform: scale(1.2); }
.bkq-dots i.done { background: #00DB92; }
.bkq-prompt { position: absolute; left: 50%; top: 36px; transform: translateX(-50%); display: flex; align-items: center; gap: 16px; width: max-content; max-width: 1220px; padding: 14px 34px 14px 18px;
  border-radius: 999px; background: #FFFFFF; color: var(--navy); font-size: 34px; font-weight: 700; white-space: nowrap; box-shadow: 0 6px 0 rgba(34, 23, 80, .1); z-index: 2; }
.bkq-spk { width: 62px; height: 62px; border-radius: 50%; background: #EEE9FF; display: grid; place-items: center; flex: none; }
.bkq-spk svg { width: 44px; height: 40px; }
.bkq-body { position: absolute; left: 150px; right: 250px; top: 140px; bottom: 140px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 46px; }
.bkq-row { display: flex; justify-content: center; align-items: flex-start; gap: 44px; }
.bkq-card { width: 280px; height: 280px; border-radius: 36px; background: #FFFFFF; display: grid; place-items: center; box-shadow: 0 8px 0 rgba(34, 23, 80, .12);
  transition: transform .15s, opacity .2s, box-shadow .2s; }
.bkq-card img { width: 230px; height: 230px; object-fit: contain; display: block; pointer-events: none; }
.bkq-card.friend img { width: 240px; height: 250px; object-position: 50% 100%; }
.bkq-card:active { transform: scale(.96); }
.bkq-card.solo { width: 340px; height: 340px; }
.bkq-card.solo img { width: 290px; height: 290px; }
.bkq-card.solo.small { width: 220px; height: 220px; border-radius: 30px; }
.bkq-card.solo.small img { width: 180px; height: 180px; }
.bkq .ok { box-shadow: 0 8px 0 rgba(0, 160, 107, .5), 0 0 0 8px #00DB92; transform: scale(1.05); }
.bkq .no { opacity: .45; }
.bkq .glow { animation: bkqGlow 1s ease-in-out infinite; }
@keyframes bkqGlow { 0%, 100% { box-shadow: 0 8px 0 rgba(34, 23, 80, .12), 0 0 0 0 rgba(255, 216, 77, .9); } 50% { box-shadow: 0 8px 0 rgba(34, 23, 80, .12), 0 0 0 14px rgba(255, 216, 77, .9); } }
.bkq-sentence { max-width: 1120px; padding: 22px 44px; border-radius: 30px; background: #FFFFFF; box-shadow: 0 6px 0 rgba(34, 23, 80, .1); font-family: var(--font-read);
  font-weight: 700; color: var(--navy); line-height: 1.45; text-align: center; }
.bkq-sentence.big { padding: 34px 60px; }
.bkq-w { display: inline-block; }
.bkq-w.tap { font: inherit; color: inherit; padding: 0 .16em; margin: .06em 0; border-radius: .25em; background: #F3F0FF; box-shadow: 0 .06em 0 rgba(34, 23, 80, .12); transition: background .15s, transform .15s; }
.bkq-w.tap.ok { background: #B8F5DE; box-shadow: 0 0 0 .08em #00DB92; transform: scale(1.08); }
.bkq-w.tap.no { background: #FFE0E6; opacity: .6; }
.bkq-sentence.tiles { background: transparent; box-shadow: none; display: flex; gap: 30px; justify-content: center; }
.bkq-sentence.tiles .bkq-w.tap { padding: 14px 40px; border-radius: 26px; background: #FFFFFF; box-shadow: 0 8px 0 rgba(34, 23, 80, .12); }
.bkq-sentence.tiles .bkq-w.tap.ok { background: #B8F5DE; }
.bkq-blank { display: inline-block; min-width: 2.8em; margin: 0 .1em; border-bottom: .09em dashed #9C8CE0; text-align: center; color: #5031F5; }
.bkq-blank b { display: inline-block; min-width: 1em; }
.bkq-blank.filled { border-bottom-style: solid; border-bottom-color: #00DB92; }
.bkq-thumb { position: relative; width: 340px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 14px 18px; border-radius: 30px; background: #FFFFFF;
  box-shadow: 0 8px 0 rgba(34, 23, 80, .12); transition: transform .15s, opacity .2s, box-shadow .2s; }
.bkq-art { width: 312px; height: 234px; border-radius: 20px; overflow: hidden; display: block; pointer-events: none; }
.bkq-art svg { width: 100%; height: 100%; display: block; }
.bkq-cap { font-family: var(--font-read); font-weight: 700; color: var(--navy); line-height: 1.3; text-align: center; pointer-events: none; }
.bkq-num { position: absolute; left: -18px; top: -18px; width: 76px; height: 76px; border-radius: 50%; background: #FFD84D; color: var(--navy); font-size: 46px; font-weight: 700;
  display: grid; place-items: center; box-shadow: 0 5px 0 #F2B233; transform: scale(0); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); z-index: 2; }
.bkq-thumb.ok .bkq-num { transform: scale(1); }
.bkq-thumb.no { opacity: 1; }
.bkq-thumbs { display: flex; gap: 90px; }
.bkq-thumb-btn { width: 190px; height: 190px; border-radius: 50%; background: #FFFFFF; display: grid; place-items: center; box-shadow: 0 8px 0 rgba(34, 23, 80, .12); transition: transform .15s, opacity .2s, box-shadow .2s; }
.bkq-thumb-btn.down svg { transform: rotate(180deg); }
.bkq-thumb-btn:active { transform: scale(.95); }
.bkq-tf-n { display: flex; gap: 12px; margin-bottom: -20px; }
.bkq-tf-n i { width: 18px; height: 18px; border-radius: 50%; background: rgba(34, 23, 80, .15); }
.bkq-tf-n i.on { background: #5031F5; }
.bkq-tf-n i.done { background: #00DB92; }
.bkq-wordcard { padding: 18px 56px; border-radius: 28px; background: #FFFFFF; border: 6px dashed #B7A9E8; font-family: var(--font-read); font-weight: 700; font-size: 84px; color: #5031F5; }
.bkq-end { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.bkq-talk { margin: 0; max-width: 900px; padding: 20px 36px; border-radius: 24px; background: rgba(255, 255, 255, .7); font-size: 34px; font-weight: 600; line-height: 1.35; color: rgba(34, 23, 80, .7); text-align: center; }
.bkq-talk b { color: var(--navy); }
.bkq .bk-mini { left: 40px; top: 676px; transform: scale(.3); }
.bkq-hint.hint { left: 200px; right: auto; bottom: 64px; font-size: 26px; }
.bk-done.ready { animation: bkReady 1.2s ease-in-out infinite; }
@keyframes bkReady { 0%, 100% { transform: none; } 50% { transform: scale(1.1); } }