/* ============================================================
   book.css —— KET分级绘本（2026-10-07）：读书页 bk- ／ 读懂了吗 qz- ／ 从书页裁的图 bcrop ／ 词卡例句 ls-cex
   只按 375×812 设计；孩子看到的字 ≥14px，书上的句子 ≥24px；点错只变淡、闪金光，不用红色
   ============================================================ */

/* ---------- 从书页上裁的一块（content/book.js cropHTML） ---------- */
.bcrop { display: block; font-style: normal; background-repeat: no-repeat; background-color: #fff; }
.wart.bcrop { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.bcrop.none { display: grid; place-items: center; font-size: 40px; background: #FFF1D6; }

/* ---------- 读书页 ---------- */
.ls-book { padding-bottom: 8px; }
.bk-pic {
  position: relative; width: 100%; aspect-ratio: 1 / 1; border: 3px solid #4A3728; border-radius: 20px; overflow: hidden;
  background: #fff; box-shadow: 0 6px 0 #4A3728; touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.bk-img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.bk-noimg { display: grid; place-items: center; width: 100%; height: 100%; font-size: 96px; background: #FFF8EF; }
.bk-hot { position: absolute; z-index: 1; border: 0; padding: 0; background: transparent; border-radius: 16px; cursor: pointer; }
.bk-hot.on { animation: bkhot .7s ease-out; }
@keyframes bkhot { 0% { box-shadow: 0 0 0 0 rgba(255, 201, 60, .9); background: rgba(255, 201, 60, .3); } 100% { box-shadow: 0 0 0 14px rgba(255, 201, 60, 0); background: transparent; } }
.bk-glow { z-index: 2; transform-origin: 50% 50%; }

.bk-txt {
  margin-top: 18px; padding: 4px 6px; text-align: center; font-family: var(--en); font-weight: 700; color: #4A3728;
  line-height: 1.45; overflow-wrap: anywhere; cursor: pointer;
}
.bk-txt.xl { font-size: 34px; }
.bk-txt.l { font-size: 29px; }
.bk-txt.m { font-size: 24px; line-height: 1.4; }
.bw { display: inline-block; padding: 0 3px; border-radius: 8px; transition: background .12s, color .12s; cursor: pointer; }
.bw.gold { color: #C77A00; }
.bw.on { background: #FFE38A; box-shadow: 0 0 0 2px #FFC93C; }
.bw.tap { animation: bwtap .45s ease-out; }
@keyframes bwtap { 0% { transform: scale(1.18); background: #FFE38A; } 100% { transform: scale(1); } }
/* 我来读：字变淡，下一个该读的词一闪一闪，读过的点亮 */
.bk-txt.self .bw { opacity: .4; }
.bk-txt.self .bw.ok { opacity: 1; background: #FFF1C2; }
.bk-txt.self .bw.nx { opacity: 1; animation: bwnx 1s ease-in-out infinite; }
@keyframes bwnx { 0%, 100% { box-shadow: 0 0 0 2px #FFC93C; } 50% { box-shadow: 0 0 0 4px #FFD95C, 0 0 14px 4px rgba(255, 201, 60, .7); } }
.bw.wig { animation: lswiggle .5s 1; }
.bk-nav { margin-top: 10px; }
.bk-self { width: auto; margin: 0; padding: 10px 14px; font-size: 16px; }
.bk-nav .ls-wpop { flex: 1 1 auto; }
.bk-pn { font-size: 16px; font-weight: 800; color: #8B7A63; }

/* ---------- 词卡下面的例句 ---------- */
.ls-cex {
  margin: 16px 4px 0; padding: 10px 12px; text-align: center; font-family: var(--en); font-size: 24px; font-weight: 700; line-height: 1.35;
  background: #fff; border: 2.5px dashed #E6DCCB; border-radius: 14px; cursor: pointer;
}
.ls-cex b { color: #C77A00; }

/* ---------- 读懂了吗 ---------- */
.qz-q { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0 10px; }
.qz-qt { font-family: var(--en); font-size: 25px; font-weight: 800; line-height: 1.3; text-align: center; }
.qz-qt.zh { font-family: var(--zh); font-size: 22px; }
.qz-spk.sm { margin: 0; flex: none; width: 46px; height: 46px; font-size: 20px; }
.qz-ths { display: flex; justify-content: center; gap: 10px; margin-bottom: 12px; }
.qz-th {
  display: flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 2px solid #E6DCCB; border-radius: 12px;
  background: #fff; font: inherit; font-size: 15px; font-weight: 800; color: #6f6252; cursor: pointer;
}
.qz-thi { width: 40px; height: 40px; border-radius: 8px; overflow: hidden; }
.qz-thi.none { font-size: 22px; }
.qz-th.flash { animation: qzflash .55s ease-in-out 3; }
@keyframes qzflash { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 201, 60, 0); border-color: #E6DCCB; } 50% { box-shadow: 0 0 0 4px #FFC93C, 0 0 18px 6px rgba(255, 201, 60, .8); border-color: #FFC93C; } }

.qz-opts { display: flex; flex-direction: column; align-items: center; gap: 10px; transition: opacity .3s; }
.qz-opts.wait { opacity: .55; pointer-events: none; }
.qz-opts.pic.n4 { display: grid; grid-template-columns: repeat(2, 150px); justify-content: center; }
.qz-o {
  position: relative; width: 150px; height: 150px; flex: none; padding: 0; border: 3px solid #4A3728; border-radius: 16px; overflow: hidden;
  background: #fff; cursor: pointer; transition: opacity .25s;
}
.qz-oi { width: 100%; height: 100%; }
.qz-ol {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 0 4px; text-align: center; background: rgba(255, 255, 255, .9);
  font-family: var(--en); font-size: 20px; font-weight: 800; color: #4A3728; border-top: 2px solid #4A3728;
}
.qz-o.ok::after {
  content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(123, 201, 111, .5);
  color: #fff; font-size: 48px; font-weight: 900;
}
.qz-o.dim { opacity: .35; }
.qz-o.shake { animation: lswiggle .5s 1; }
.qz-n {
  position: absolute; left: 6px; top: 6px; z-index: 1; min-width: 34px; height: 34px; border-radius: 50%; display: none; place-items: center;
  font-style: normal; font-size: 20px; font-weight: 900; color: #4A3728; background: #FFC93C; border: 2px solid #4A3728;
}
.qz-o.ok .qz-n:not(:empty) { display: grid; }
.qz-o.ok:has(.qz-n:not(:empty))::after { content: ""; background: rgba(123, 201, 111, .28); }
.qz-opts.text .qz-o.qz-t {
  width: 100%; height: auto; min-height: 58px; padding: 10px 14px; font-family: var(--en); font-size: 24px; font-weight: 800; color: #4A3728;
  box-shadow: 0 4px 0 #4A3728;
}
.qz-o.qz-t.rd { box-shadow: 0 0 0 4px #FFC93C, 0 4px 0 #4A3728; }
.qz-show { width: 176px; margin: 0 auto 12px; border: 3px solid #4A3728; border-radius: 16px; overflow: hidden; }
.qz-si { width: 100%; }

.qz-find {
  position: relative; width: 100%; aspect-ratio: 1 / 1; border: 3px solid #4A3728; border-radius: 20px; overflow: hidden; background: #fff;
  cursor: pointer; transition: opacity .3s;
}
.qz-find.wait { opacity: .7; pointer-events: none; }
.qz-find img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.qz-ring { position: absolute; border-radius: 50%; pointer-events: none; }
.qz-ring.ok { box-shadow: 0 0 0 4px #7BC96F, 0 0 18px 6px rgba(123, 201, 111, .8); }
.qz-ring.hint { animation: lsbreathe 1.3s ease-in-out infinite; }
.qz-tap { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .7); animation: qztap .6s ease-out forwards; }
@keyframes qztap { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }

/* 点小书弹出那一页 */
.qz-peek { text-align: center; }
.qz-pk { width: 100%; max-width: 300px; aspect-ratio: 1 / 1; margin: 0 auto; border: 3px solid #4A3728; border-radius: 16px; overflow: hidden; background: #fff; }
.qz-pk img { display: block; width: 100%; height: 100%; object-fit: cover; }
.qz-ptx { font-family: var(--en); font-size: 24px; font-weight: 700; line-height: 1.35; margin: 12px 0 14px; }

/* 课页：绘本书名下面的中文小字 */
.lsn-zh { margin: 2px 0 0; text-align: center; font-size: 15px; font-weight: 700; color: #8B7A63; }
/* 重标坐标用（window.__bookDev=true）：热区画虚线框 */
.bk-pic.dev .bk-hot { outline: 2px dashed #9B7BE8; outline-offset: -2px; }