/* ---------- 翻开课本 ---------- */
html.tb-lock,html.tb-lock body{overflow:hidden}
.tb-reader{position:fixed;inset:0;z-index:175;--pw:420px;--ph:585px;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.tb-desk{position:absolute;inset:0;opacity:0;transition:opacity .38s ease;
  background:radial-gradient(ellipse 70% 60% at 50% 45%,rgba(92,70,48,.62),rgba(34,26,19,.86));backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.tb-reader.show .tb-desk{opacity:1}
.tb-reader.closing .tb-desk,.tb-reader.picked-out .tb-desk{opacity:0;transition-duration:.42s}

.tb-close{position:absolute;z-index:3;top:calc(14px + env(safe-area-inset-top));right:16px;height:40px;padding:0 16px;border-radius:999px;
  background:rgba(255,255,255,.94);color:#5B4A38;font-size:15px;font-weight:900;box-shadow:0 6px 18px rgba(0,0,0,.2);
  opacity:0;transform:translateY(-6px);transition:opacity .3s .25s,transform .3s .25s,background .15s}
.tb-close span{margin-right:4px}
.tb-close:hover{background:#fff}
.tb-reader.show .tb-close{opacity:1;transform:none}
.tb-reader.closing .tb-close,.tb-reader.picked-out .tb-close{opacity:0;transition-delay:0s}

.tb-stage{position:absolute;inset:0;display:grid;place-items:center;padding:58px 0 78px;pointer-events:none}
.tb-fly{pointer-events:auto;transition:transform .56s cubic-bezier(.2,.8,.2,1),opacity .3s ease;will-change:transform}
.tb-reader.picked-out .tb-fly{transform:scale(.94) translateY(10px);opacity:0}

/* 书本：双页模式左页 + 右页；单页模式只有右页 */
.tb-book{position:relative;height:var(--ph);width:calc(var(--pw) * 2);perspective:calc(var(--pw) * 5);
  transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.tb-book.single{width:var(--pw)}
.tb-book.spread.closed{transform:translateX(calc(var(--pw) * -.5))}

/* 书页底下的厚度和投影 */
.tb-under{position:absolute;top:0;bottom:0;left:0;right:0;border-radius:6px 10px 10px 6px;background:#F3EEE3;
  box-shadow:3px 3px 0 #E6DECF,5px 5px 0 #D9CFBD,0 28px 60px rgba(0,0,0,.42),0 6px 16px rgba(0,0,0,.25);
  transition:left .5s cubic-bezier(.3,.7,.2,1)}
.tb-book.spread .tb-under{box-shadow:3px 3px 0 #E6DECF,5px 5px 0 #D9CFBD,-3px 3px 0 #E6DECF,-5px 5px 0 #D9CFBD,0 28px 60px rgba(0,0,0,.42),0 6px 16px rgba(0,0,0,.25)}
.tb-book.spread.closed .tb-under{left:var(--pw);box-shadow:3px 3px 0 #E6DECF,5px 5px 0 #D9CFBD,0 28px 60px rgba(0,0,0,.42),0 6px 16px rgba(0,0,0,.25)}
.tb-book.spread .tb-under::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 22px);width:44px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(80,60,40,.16) 45%,rgba(80,60,40,.24) 50%,rgba(80,60,40,.16) 55%,transparent)}
.tb-book.spread.closed .tb-under::after{display:none}

.tb-leaf{position:absolute;top:0;left:0;width:var(--pw);height:100%;transform-origin:left center;transform-style:preserve-3d;
  transition:transform .64s cubic-bezier(.45,.05,.25,1),opacity .12s}
.tb-book.spread .tb-leaf{left:var(--pw)}
.tb-leaf.turned{transform:rotateY(-180deg)}
.tb-book.single .tb-leaf.turned{opacity:0;transition:transform .64s cubic-bezier(.45,.05,.25,1),opacity .2s .46s}

.tb-face{position:absolute;inset:0;overflow:hidden;background:#FFFDF8;border-radius:3px 9px 9px 3px;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.tb-face.back{transform:rotateY(180deg);border-radius:9px 3px 3px 9px}
.tb-face img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none;-webkit-user-drag:none}
/* 书脊附近的阴影，让纸页有弧度 */
.tb-face::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg,rgba(60,40,20,.2),rgba(60,40,20,.06) 3.5%,transparent 9%,transparent 94%,rgba(255,255,255,.18))}
.tb-face.back::after{background:linear-gradient(270deg,rgba(60,40,20,.2),rgba(60,40,20,.06) 3.5%,transparent 9%,transparent 94%,rgba(255,255,255,.18))}
.tb-face.cover{border-radius:4px 12px 12px 4px;background:#DCEBCB}
.tb-face.cover::after{background:linear-gradient(90deg,rgba(0,0,0,.22),rgba(255,255,255,.28) 1.6%,rgba(0,0,0,.08) 3%,transparent 6%)}
.tb-shine{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 45%,transparent 60%)}
.tb-face.toc{overflow:visible}
.paper{background:#FBF8F1 radial-gradient(circle at 30% 20%,rgba(255,255,255,.7),transparent 60%)}
.endpaper{display:grid;place-items:center;background:#E7F1DC;
  background-image:radial-gradient(rgba(113,160,92,.22) 1.4px,transparent 1.6px);background-size:18px 18px}
.tb-plate{display:grid;gap:6px;justify-items:center;min-width:52%;padding:16px 22px 18px;border:2px dashed #9CC08A;border-radius:14px;background:#FFFEF9;
  box-shadow:0 4px 10px rgba(80,110,60,.12);transform:rotate(-1.5deg)}
.tb-plate small{color:#6F8F62;font-size:calc(var(--pw) * .032);font-weight:800;letter-spacing:.1em}
.tb-plate b{color:#1F4FA8;font-family:"Kaiti SC","STKaiti","KaiTi","楷体",serif;font-size:calc(var(--pw) * .07);line-height:1.1}

/* 扉页：孩子的名字写在“姓名”一栏 */
.tb-name{position:absolute;z-index:2;left:72%;top:83.2%;width:19.5%;height:3.4%;display:flex;align-items:flex-end;justify-content:center;
  font-family:"Kaiti SC","STKaiti","KaiTi","楷体",serif;font-weight:700;font-size:calc(var(--pw) * var(--ns));line-height:1;color:#1D4FA8;
  white-space:nowrap;transform:rotate(-2deg)}

/* 页角：点一下翻页 */
.tb-corner{position:absolute;z-index:60;right:0;bottom:0;width:calc(var(--pw) * .13);height:calc(var(--pw) * .13);padding:0;border-radius:0 0 9px 0;
  background:none;cursor:pointer}
.tb-corner span{position:absolute;inset:0;border-radius:0 0 9px 0;
  background:linear-gradient(135deg,transparent 50%,#EFE7D6 50%,#FFFDF6 78%);box-shadow:-3px -3px 6px rgba(0,0,0,.12);
  clip-path:polygon(100% 0,100% 100%,0 100%);transform-origin:100% 100%;animation:tbCorner 2.6s ease-in-out infinite}
.tb-corner:hover span{animation:none;transform:scale(1.35)}
.tb-book.closed .tb-corner{display:none}
@keyframes tbCorner{0%,70%,100%{transform:scale(1)}82%{transform:scale(1.32)}}

/* 书签丝带：直接翻到目录 */
.tb-ribbon{position:absolute;z-index:61;top:-22px;right:calc(var(--pw) * .1);width:36px;height:74px;padding:0 0 12px;cursor:pointer;
  background:linear-gradient(90deg,#C8342A,#E2493C 45%,#C23025);clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%);
  box-shadow:0 4px 8px rgba(0,0,0,.25);transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
.tb-ribbon span{display:block;color:#FFF6E8;font-size:14px;font-weight:900;letter-spacing:.2em;writing-mode:vertical-rl;margin:12px auto 0}
.tb-ribbon:hover,.tb-ribbon.on{transform:translateY(8px)}
.tb-book.closed .tb-ribbon{transform:translateY(-6px)}
.tb-reader.closing .tb-ribbon,.tb-reader.closing .tb-corner{opacity:0;transition:opacity .15s}

/* 目录里的章节：悬停像荧光笔划过，点下去用红笔圈出来 */
.tb-toc-link{position:absolute;z-index:3;padding:0;border-radius:6px;background:none;cursor:pointer;outline:none}
.tb-hl{position:absolute;inset:14% -1.5% 6%;border-radius:5px;mix-blend-mode:multiply;pointer-events:none;
  background:linear-gradient(180deg,transparent 36%,rgba(255,221,64,.66) 36%,rgba(255,206,46,.66) 94%,transparent 94%);
  transform:scaleX(0);transform-origin:left center;transition:transform .32s cubic-bezier(.3,.8,.3,1)}
.tb-toc-link::before{content:"👉";position:absolute;right:100%;top:50%;margin-right:2px;font-size:calc(var(--pw) * .042);line-height:1;
  opacity:0;transform:translate(-10px,-50%);transition:opacity .2s,transform .25s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.tb-tip{position:absolute;z-index:6;left:4%;top:calc(100% + 4px);display:grid;gap:2px;padding:8px 13px 9px;border-radius:3px 3px 10px 3px;
  background:#FFF3A8;color:#4B3B18;text-align:left;white-space:nowrap;font-size:max(12px,calc(var(--pw) * .027));line-height:1.35;
  box-shadow:0 8px 16px rgba(60,40,10,.2),inset 0 -2px 0 rgba(200,160,40,.25);
  opacity:0;transform:translateY(-6px) rotate(-1.5deg);transition:opacity .16s,transform .22s cubic-bezier(.3,1.4,.5,1);pointer-events:none}
.tb-toc-link.tip-up .tb-tip{top:auto;bottom:calc(100% + 4px);transform:translateY(6px) rotate(1.2deg)}
.tb-tip b{font-size:1.1em;font-weight:900}
.tb-tip small{color:#7A6530;font-size:.92em;font-weight:800}
.tb-tip em{color:#C0412B;font-style:normal;font-weight:900}
@media (hover:hover){
  .tb-toc-link:hover .tb-hl{transform:scaleX(1)}
  .tb-toc-link:hover::before{opacity:1;transform:translate(0,-50%)}
  .tb-toc-link:hover .tb-tip{opacity:1;transform:rotate(-1.5deg)}
  .tb-toc-link.tip-up:hover .tb-tip{transform:rotate(1.2deg)}
}
.tb-toc-link:focus-visible .tb-hl,.tb-toc-link:active .tb-hl{transform:scaleX(1)}
.tb-toc-link:focus-visible::before{opacity:1;transform:translate(0,-50%)}
.tb-toc-link:focus-visible .tb-tip{opacity:1;transform:rotate(-1.5deg)}
.tb-circle{position:absolute;left:-3%;top:-16%;width:105.5%;height:128%;overflow:visible;pointer-events:none;opacity:0}
.tb-circle path{fill:none;stroke:#E0402C;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.tb-toc-link.picked .tb-circle{opacity:1}
.tb-toc-link.picked .tb-circle path{animation:tbDraw .46s cubic-bezier(.5,.1,.3,1) forwards}
.tb-toc-link.picked .tb-hl{transform:scaleX(1)}
.tb-toc-link.picked .tb-tip,.tb-toc-link.picked::before{opacity:0}
@keyframes tbDraw{to{stroke-dashoffset:0}}

/* 学会了的章节盖一个小红章，学过的打个勾 */
.tb-stamp{position:absolute;right:calc(var(--pw) * -.1);top:50%;width:calc(var(--pw) * .088);height:calc(var(--pw) * .088);margin-top:calc(var(--pw) * -.044);white-space:nowrap;background:rgba(255,255,255,.55);
  display:grid;place-items:center;border:2px solid #D5412E;border-radius:50%;color:#D5412E;font-family:"Kaiti SC","STKaiti","KaiTi","楷体",serif;
  font-size:max(10px,calc(var(--pw) * .024));font-weight:900;letter-spacing:0;transform:rotate(-16deg);opacity:.85;mix-blend-mode:multiply;pointer-events:none}
.tb-tick{position:absolute;right:calc(var(--pw) * -.06);top:50%;transform:translateY(-55%) rotate(8deg);color:#2E62C9;font-size:calc(var(--pw) * .05);
  font-weight:900;line-height:1;pointer-events:none}

/* 底部：翻页按钮和提示 */
.tb-bar{position:absolute;z-index:3;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;width:fit-content;margin:0 auto;
  padding:6px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 8px 22px rgba(0,0,0,.25);
  opacity:0;transform:translateY(10px);transition:opacity .3s .3s,transform .3s .3s}
.tb-reader.show .tb-bar{opacity:1;transform:none}
.tb-reader.closing .tb-bar,.tb-reader.picked-out .tb-bar{opacity:0;transition-delay:0s}
.tb-nav{width:40px;height:40px;flex:none;border-radius:50%;background:#F4EDE2;color:#6B5540;font-size:26px;font-weight:900;line-height:1}
.tb-nav:hover:not(:disabled){background:#EADFCF}
.tb-nav:disabled{opacity:.35;cursor:default}
.tb-hint{min-width:0;color:#5B4A38;font-size:14px;font-weight:900;text-align:center}

@media (max-width:560px){
  .tb-stage{padding:56px 0 70px}
  .tb-close{height:36px;padding:0 13px;font-size:14px}
  .tb-hint{font-size:12.5px}
  .tb-nav{width:36px;height:36px;font-size:23px}
  .tb-ribbon{width:30px;height:62px;top:-18px}
  .tb-ribbon span{font-size:12px}
  .tb-tip{padding:6px 10px 7px}
}
@media (prefers-reduced-motion:reduce){
  .tb-fly,.tb-book,.tb-leaf,.tb-under,.tb-hl,.tb-tip,.tb-desk{transition-duration:.01s!important}
  .tb-corner span{animation:none}
  .tb-toc-link.picked .tb-circle path{animation-duration:.01s}
}

/* ---------- 首页封面：可以点开 ---------- */
button.textbook-cover-wrap{padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit;
  transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
button.textbook-cover-wrap:hover,button.textbook-cover-wrap:focus-visible{transform:rotate(-1deg) translateY(-6px) scale(1.03)}
button.textbook-cover-wrap:focus-visible{outline:3px solid #4D8A57;outline-offset:6px}
.textbook-open-chip{position:absolute;z-index:2;left:50%;bottom:-14px;transform:translateX(-50%);padding:6px 13px;border-radius:999px;white-space:nowrap;
  background:#2F7D4B;color:#fff;font-size:13px;font-weight:900;box-shadow:0 6px 14px rgba(40,90,50,.3);animation:tbChip 2.4s ease-in-out infinite}
@keyframes tbChip{0%,100%{transform:translateX(-50%)}50%{transform:translateX(-50%) translateY(-3px)}}
.textbook-cover-wrap.tb-lifted img,.textbook-cover-wrap.tb-lifted .textbook-open-chip{opacity:0}
.textbook-open-btn{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:10px 18px;border-radius:999px;background:#2F7D4B;color:#fff;
  font-size:15px;font-weight:900;box-shadow:0 5px 0 #235F39;transition:transform .12s}
.textbook-open-btn:hover{transform:translateY(-2px)}
.textbook-open-btn:active{transform:translateY(3px);box-shadow:0 2px 0 #235F39}
.chapter-stop.tb-arrive .chapter-entry{animation:tbArrive 1.4s ease-out}
@keyframes tbArrive{0%{box-shadow:0 0 0 0 rgba(255,196,40,.9)}40%{box-shadow:0 0 0 10px rgba(255,196,40,.45)}100%{box-shadow:0 0 0 0 rgba(255,196,40,0)}}
/* 系统开了“减少动态效果”：没有动画，改成一圈静态描边（JS 过一会儿会拿掉 tb-arrive） */
@media (prefers-reduced-motion:reduce){.chapter-stop.tb-arrive .chapter-entry{outline:4px solid #F5B301;outline-offset:4px}}
@media (max-width:720px){
  .textbook-open-chip{font-size:11px;padding:4px 9px;bottom:-11px}
  .textbook-open-btn{margin-top:10px;padding:8px 14px;font-size:13px}
}
@media (max-width:460px){.textbook-open-btn{display:none}}
@media (max-width:360px){.textbook-open-btn{display:inline-flex}}