/* The library's pop-up books (js/books.js): a book lying open on the table,
   pictures that stand up off its pages, pages that turn over the spine with
   the pictures printed on them, real 3D shapes, and 3D books on the shelf. */

/* ---------- the shelf: books standing in 3D ---------- */
.bookshelf { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 16vw, 200px), 1fr)); gap: clamp(22px, 3.4vh, 40px) clamp(12px, 2vw, 24px); padding: 12px 12px 24px; align-content: start; }
.book3d { position: relative; height: clamp(230px, 31vh, 300px); container-type: size; perspective: 900px; perspective-origin: 50% 30%; }
.book3d::after { content: ''; position: absolute; left: -16px; right: -16px; bottom: 0; height: 18px; border-radius: 5px; background: linear-gradient(180deg, #d9a06b, #a86f3d); box-shadow: 0 10px 16px rgba(15,43,92,.2), inset 0 3px 0 rgba(255,255,255,.25); z-index: 0; }
.b3 { --t: 24px; position: relative; z-index: 1; width: 68cqw; height: calc(100cqh - 30px); margin: 4px auto 0; transform-style: preserve-3d; transform: rotateY(24deg) rotateX(3deg); transition: transform .45s cubic-bezier(.34,1.56,.64,1); animation: bookIn .6s cubic-bezier(.34,1.56,.64,1) backwards; }
.book3d:nth-child(2n) .b3 { animation-delay: .06s; } .book3d:nth-child(3n) .b3 { animation-delay: .12s; }
@keyframes bookIn { from { transform: rotateY(70deg) translateY(30px); opacity: 0; } }
.book3d:active .b3 { transform: rotateY(8deg) scale(1.04); }
.b3 > div { position: absolute; }
.b-front { inset: 0; z-index: 2; transform-origin: 0 50%; transform: translateZ(calc(var(--t) / 2)); background: linear-gradient(160deg, var(--c1), var(--c2)); border-radius: 3px 14px 14px 3px;
    display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 12px 10px; color: #fff; text-align: center;
    box-shadow: inset 9px 0 0 rgba(0,0,0,.13), inset 11px 0 0 rgba(255,255,255,.14); -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .55s ease-in; }
.b-front::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(rgba(255,255,255,.14) 2px, transparent 2.6px) 0 0 / 20px 20px; pointer-events: none; }
.b-front .b-art { width: 78%; aspect-ratio: 1; filter: drop-shadow(0 8px 8px rgba(0,0,0,.22)); }
.b-front h3 { font-size: clamp(1rem, 1.6vw, 1.3rem); line-height: 1.05; text-shadow: 0 2px 0 rgba(0,0,0,.15); }
.b-front small { font-weight: 900; font-size: .85rem; display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,.22); border-radius: 999px; padding: 2px 10px 2px 6px; }
.b-front small.new { background: #fff; color: var(--c2); padding: 2px 10px; }
.b-front small .icon { width: 16px; height: 16px; }
.b-inside { inset: 0; transform: translateZ(calc(var(--t) / 2 - 1px)); background: #fffaf0; border-radius: 3px 12px 12px 3px; box-shadow: inset 12px 0 16px rgba(0,0,0,.1); }
.b-back { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--t) / 2)); background: var(--c2); border-radius: 14px 3px 3px 14px; }
.b-spine { top: 0; bottom: 0; left: 50%; width: var(--t); margin-left: calc(var(--t) / -2); transform: rotateY(-90deg) translateZ(34cqw); background: linear-gradient(90deg, var(--c2), var(--c1) 50%, var(--c2)); border-radius: 3px; }
.b-pages { top: 3px; bottom: 3px; left: 50%; width: calc(var(--t) - 4px); margin-left: calc((var(--t) - 4px) / -2); transform: rotateY(90deg) translateZ(calc(34cqw - 3px)); background: repeating-linear-gradient(90deg, #fff 0 2px, #e3e9f1 2px 3px); }
.b-top { left: 2px; right: 3px; top: 50%; height: calc(var(--t) - 4px); margin-top: calc((var(--t) - 4px) / -2); transform: rotateX(90deg) translateZ(calc(50cqh - 17px)); background: repeating-linear-gradient(0deg, #fff 0 2px, #e3e9f1 2px 3px); }
.book3d.opening .b3 { transform: rotateY(0) translateZ(60px); }
.book3d.opening .b-front { transform: translateZ(calc(var(--t) / 2)) rotateY(-155deg); }

/* the library's shelves */
.lib-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: none; }
.lib-head .count { margin-left: auto; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 6px 16px 6px 8px; font: 800 1rem 'Baloo 2', sans-serif; color: var(--navy); box-shadow: var(--shadow); }
.lib-head .count .art { width: 32px; height: 32px; }
.lib-head .count b { color: #db2777; }

/* ---------- the reader ---------- */
.view.reading { gap: 0; }
.pb { flex: 1; display: flex; flex-direction: column; gap: clamp(8px, 1.4vh, 14px); min-height: 0; position: relative; }
.pb-stage { flex: 1; min-height: 0; display: grid; place-items: center; perspective: 1500px; perspective-origin: 50% 20%; touch-action: none; }
.pb-tilt { position: relative; top: 0; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.34,1.56,.64,1); }
.pb-tilt.dragging { transition: none; }
.pb-sway { position: absolute; inset: 0; transform-style: preserve-3d; animation: pbSway 10s ease-in-out infinite; }
.pb-tilt.dragging .pb-sway { animation-play-state: paused; }
@keyframes pbSway { 0%, 100% { transform: rotateY(-4deg); } 50% { transform: rotateY(4deg); } }
.pbook { position: absolute; left: 0; transform-style: preserve-3d; transform: rotateX(var(--T)); }
.pb-probe { position: absolute; visibility: hidden; pointer-events: none; transform-origin: 50% 100%; transform: rotateX(calc(-1 * var(--T))); }
.pb-cover { position: absolute; inset: -12px -16px; border-radius: 16px; background: linear-gradient(135deg, var(--c1), var(--c2)); transform: translateZ(-9px); box-shadow: 0 40px 50px rgba(15,43,92,.3); }
.pb-edge { position: absolute; left: 3px; right: 3px; bottom: 0; height: 9px; transform-origin: 50% 100%; transform: rotateX(90deg); background: repeating-linear-gradient(180deg, #fff 0 2px, #dde4ee 2px 3px); }
.pb-page { position: absolute; top: 0; bottom: 0; width: 50%; background: #fffaf0; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); }
.pb-page.left { left: 0; border-radius: 10px 2px 2px 10px; }
.pb-page.right { right: 0; border-radius: 2px 10px 10px 2px; }
.pb-floor { position: absolute; left: 8px; right: 8px; top: 9%; bottom: 8px; border-radius: 10px; background: radial-gradient(var(--f2, #6cc07c) 16%, transparent 19%) 0 0 / 26px 26px, var(--f1, #7fcf8b); transition: background-color .4s; }
.pb-page .no { position: absolute; bottom: 12px; font: 800 .9rem 'Baloo 2', sans-serif; color: rgba(255,255,255,.9); text-shadow: 0 1px 0 rgba(0,0,0,.2); z-index: 2; }
.pb-page.left .no { left: 16px; } .pb-page.right .no { right: 16px; }
.pb-gutter { position: absolute; left: 50%; top: 0; bottom: 0; width: 44px; margin-left: -22px; transform: translateZ(.4px); pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(0,0,0,.1) 40%, rgba(0,0,0,.2) 50%, rgba(0,0,0,.1) 60%, transparent); }
.pb.single .pb-page.left, .pb.single .pb-gutter { display: none; }
.pb.single .pb-page.right { width: 100%; border-radius: 10px; }

/* the page as printed on the paper: the pictures lying flat, while it turns */
.pb-print { position: absolute; top: 0; left: 0; pointer-events: none; z-index: 1; transition: opacity .3s; }
.pbook.rising .pb-page .pb-print { opacity: 0; }
.pr { position: absolute; }
.art.flip { transform: scaleX(-1); }

/* pictures standing up off the page */
.pb-pops { position: absolute; inset: 0; transform-style: preserve-3d; }
.pb-pops.away .pu, .pb-pops.away .pu-shadow { visibility: hidden; }
.pu { position: absolute; padding: 0; transform-origin: 50% 100%; transform: translateY(var(--dy, 0px)) rotateX(-3deg); transform-style: preserve-3d; transition: transform .42s ease-in var(--dc, 0s); touch-action: manipulation; }
.pbook.open .pu { transform: translateY(0) rotateX(calc(-1 * var(--T))); transition: transform .7s cubic-bezier(.34,1.3,.64,1) var(--d, 0s); }
.pu.backdrop { transform: rotateX(-120deg); pointer-events: none; opacity: 0; transition: transform .5s ease-in, opacity .25s; }
.pbook.open .pu.backdrop { transform: rotateX(calc(-1 * var(--T))); opacity: 1; transition: transform .8s cubic-bezier(.34,1.3,.64,1), opacity .25s .1s; }
.pu-card { width: 100%; height: 100%; position: relative; }
.pu-art { width: 100%; height: 100%; }
.pu-card.on-stand { display: flex; flex-direction: column; align-items: center; }
.pu-card.on-stand .pu-art { height: calc(100% / (1 + var(--lift, 0))); flex: none; }
.pu-card.on-stand::after { content: ''; flex: 1; width: 5px; margin-top: -8%; border-radius: 3px; background: linear-gradient(180deg, #fff, #e3e9f1); }
/* every picture is die-cut paper: a white rim and a soft drop shadow */
.pu:not(.backdrop):not(.shape) .pu-card, .pr .pu-card { filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 8px 6px rgba(15,43,92,.22)); }
/* standing up, they breathe a little, so the page feels alive */
.pbook.open .pu:not(.backdrop):not(.shape) .pu-card { animation: puBreathe 3.6s ease-in-out infinite; transform-origin: 50% 100%; }
.pu.row0 .pu-card { animation-delay: -1.2s; } .pu.row2 .pu-card { animation-delay: -2.4s; }
@keyframes puBreathe { 50% { transform: scale(1.025, .985); } }
.pu.backdrop .pu-card { position: relative; transform-style: preserve-3d; }
.bd-front, .bd-back { position: absolute; inset: 0; border-radius: 22px 22px 6px 6px; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 5px solid #fff; box-shadow: 0 -4px 20px rgba(15,43,92,.16); }
.bd-front .scene-art { width: 100%; height: 100%; display: block; }
.bd-back { transform: rotateY(180deg); background: #fffaf0 radial-gradient(rgba(0,0,0,.05) 2px, transparent 2.6px) 0 0 / 18px 18px; }
.pu-shadow { position: absolute; border-radius: 50%; background: radial-gradient(closest-side, rgba(15,30,60,.32), rgba(15,30,60,0)); opacity: 0; transform: translateZ(.3px); transition: opacity .6s .3s; pointer-events: none; }
.pbook.open .pu-shadow { opacity: 1; }
.pu .badge { position: absolute; top: -4%; right: 6%; min-width: 36px; height: 36px; padding: 0 6px; border-radius: 999px; background: #db2777; color: #fff; font: 800 1.25rem 'Baloo 2', sans-serif; display: none; place-items: center; border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,.2); }
.pu.counted .badge { display: grid; animation: pop .35s; }
/* what a picture says, in its own bubble above its head */
.pu .pu-say { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 8px) scale(.8); opacity: 0; pointer-events: none; white-space: nowrap; max-width: 260px;
    background: #fff; color: var(--navy); border: 3px solid #23304d; border-radius: 18px; padding: 6px 14px; font: 800 clamp(.95rem, 1.9vh, 1.25rem) 'Baloo 2', sans-serif; box-shadow: 0 6px 14px rgba(15,43,92,.2); transition: opacity .2s, transform .25s cubic-bezier(.34,1.56,.64,1); z-index: 5; }
.pu .pu-say::after { content: ''; position: absolute; left: 50%; bottom: -12px; width: 16px; height: 16px; margin-left: -8px; background: #fff; border-right: 3px solid #23304d; border-bottom: 3px solid #23304d; transform: rotate(45deg); border-radius: 2px; }
.pu .pu-say.on { opacity: 1; transform: translate(-50%, 0) scale(1); }
.pu.row0 .pu-say { font-size: clamp(.85rem, 1.6vh, 1.05rem); }

/* how the pictures move */
.pu-art.idle-fly { animation: idleFly 3.2s ease-in-out infinite; }
.pu-art.idle-float { animation: idleFloat 3.6s ease-in-out infinite; }
.pu-art.idle-jump { animation: idleJump 2.6s ease-in-out infinite; }
.pu-art.idle-shake { animation: idleShake 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
.pu-art.idle-roll { animation: idleRoll 3s ease-in-out infinite; }
@keyframes idleFly { 50% { transform: translate(6%, -12%) rotate(5deg); } }
@keyframes idleFloat { 50% { transform: translateY(-8%); } }
@keyframes idleJump { 0%, 60%, 100% { transform: none; } 75% { transform: translateY(-14%) scale(.96, 1.04); } }
@keyframes idleShake { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-4deg); } 86% { transform: rotate(4deg); } 93% { transform: rotate(-2deg); } }
@keyframes idleRoll { 50% { transform: translateX(18%) rotate(40deg); } }
.pbook.open .pu:not(.backdrop):not(.shape) .pu-card.boing { animation: popBoing .65s cubic-bezier(.34,1.56,.64,1); }
@keyframes popBoing { 30% { transform: translateY(-18%) scale(1.1, .92); } 60% { transform: translateY(0) scale(.92, 1.08); } }
.pbook.open .pu.hint .pu-card { animation: popHint .9s ease-in-out infinite !important; }
@keyframes popHint { 50% { transform: translateY(-12%) scale(1.12); filter: drop-shadow(0 0 14px #fde047) drop-shadow(0 0 6px #fde047); } }

/* the page turning: a leaf that carries the old page on its front and the next on its back */
.pb-leaf { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: 0 50%; transform-style: preserve-3d; visibility: hidden; transform: translateZ(1px); pointer-events: none; }
.pb-leaf .face { position: absolute; inset: 0; background: #fffaf0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 2px 10px 10px 2px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.pb-leaf .face.back { transform: rotateY(180deg); border-radius: 10px 2px 2px 10px; }
.pb-leaf .face::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,.14), transparent 22%); }
.pb-leaf .face.back::after { background: linear-gradient(-90deg, rgba(0,0,0,.14), transparent 22%); }
.pb-leaf.fwd { visibility: visible; animation: leafFwd .78s cubic-bezier(.45,.05,.4,1) forwards; }
.pb-leaf.bwd { visibility: visible; animation: leafBwd .78s cubic-bezier(.45,.05,.4,1) forwards; }
@keyframes leafFwd { from { transform: translateZ(1px) rotateY(0); } 50% { transform: translateZ(30px) rotateY(-90deg); } to { transform: translateZ(2px) rotateY(-180deg); } }
@keyframes leafBwd { from { transform: translateZ(2px) rotateY(-180deg); } 50% { transform: translateZ(30px) rotateY(-90deg); } to { transform: translateZ(1px) rotateY(0); } }
.pb.single .pb-leaf { left: 0; width: 100%; }
.pb.single .pb-leaf .face { border-radius: 10px; }

/* the words, and the buttons under the book */
.pb-text { flex: none; align-self: center; width: min(100%, 940px); background: #fffdf5; border: 3px solid #fff; border-radius: 24px; padding: 10px 24px; box-shadow: var(--shadow); text-align: center;
    font: 700 clamp(1.3rem, 3.1vh, 2rem)/1.32 'Baloo 2', ui-rounded, sans-serif; color: var(--navy); }
.pb-text.long { font-size: clamp(1.1rem, 2.5vh, 1.55rem); }
.pb-text .w { border-radius: 8px; padding: 0 2px; transition: background .15s; }
.pb-text .w.on { background: #fde68a; }
.pb-bar { flex: none; display: flex; align-items: center; justify-content: center; gap: clamp(8px, 1.4vw, 16px); flex-wrap: wrap; }
.pb-bar .round-btn:disabled { opacity: .35; pointer-events: none; }
.pb-bar .next { background: linear-gradient(180deg, #4ade80, #16a34a); color: #fff; box-shadow: 0 6px 0 #166534, var(--shadow); }
.pb-task { display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 999px; padding: 5px 18px 5px 6px; box-shadow: var(--shadow); font-weight: 900; font-size: 1.1rem; color: var(--navy); min-height: 58px; transition: background .3s; }
.pb-task:empty { display: none; }
.pb-task .chip-art { width: 46px; height: 46px; display: block; }
.pb-task b { color: #db2777; margin-left: 4px; }
.pb-task.done { background: #dcfce7; color: #166534; }
.pb-task.done::after { content: ''; width: 28px; height: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%2322c55e'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pb-dots { display: flex; gap: 6px; align-items: center; }
.pb-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(15,43,92,.2); transition: all .3s; }
.pb-dots i.on { background: var(--c2); transform: scale(1.35); }

/* the end */
.pb-end { position: absolute; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(255,255,255,.3); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: toastIn .3s; }
.pb-end .card { background: #fff; border-radius: 36px; padding: clamp(22px, 4vh, 40px) clamp(28px, 5vw, 60px); text-align: center; box-shadow: var(--shadow); border: 4px solid #fff; display: flex; flex-direction: column; gap: 10px; align-items: center; max-width: min(92vw, 640px); }
.pb-end .stars3 { display: flex; gap: 8px; } .pb-end .stars3 .art { width: clamp(60px, 10vh, 96px); height: auto; animation: starIn .6s cubic-bezier(.34,1.56,.64,1) backwards; }
.pb-end .stars3 .art:nth-child(2) { animation-delay: .15s; margin-top: -18px; } .pb-end .stars3 .art:nth-child(3) { animation-delay: .3s; }
.pb-end h2 { font-size: clamp(2.4rem, 6vh, 3.6rem); color: var(--navy); }
.pb-end p { margin: 0; font-weight: 800; font-size: 1.2rem; color: var(--ink-soft); }
.pb-end .lesson { display: flex; align-items: center; gap: 10px; text-align: left; background: #f0f9ff; border-radius: 22px; padding: 10px 18px 10px 10px; color: var(--navy); font: 800 clamp(1rem, 2.2vh, 1.2rem)/1.3 'Baloo 2', sans-serif; }
.pb-end .lesson .who { width: 52px; height: 52px; flex: none; }

/* ---------- 3D shapes ---------- */
.pu.shape .pu-card { transform-style: preserve-3d; position: relative; }
.s3 { position: absolute; left: 50%; bottom: 3%; transform-style: preserve-3d; }
.s3 .spin { position: relative; transform-style: preserve-3d; animation: spin3d 10s linear infinite; }
@keyframes spin3d { from { transform: rotateX(-18deg) rotateY(0); } to { transform: rotateX(-18deg) rotateY(360deg); } }
.spin-fast > .s3, .spin-fast .lvl > .s3 { animation: shapeHop .9s cubic-bezier(.34,1.56,.64,1); }
@keyframes shapeHop { 40% { transform: translateY(-22%) rotateY(180deg); } to { transform: rotateY(360deg); } }
.s3 .f { position: absolute; }

.s3.cube { width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2); }
.s3.cube .spin { width: 100%; height: 100%; }
.s3.cube .f { inset: 0; background: var(--c); border: 3px solid #23304d; border-radius: 10px; box-shadow: inset 0 0 0 6px rgba(255,255,255,.22); }
.s3.cube .f::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: rgba(255,255,255,.55); }
.s3.cube .f.tp { filter: brightness(1.2); } .s3.cube .f.rt, .s3.cube .f.lf { filter: brightness(.85); } .s3.cube .f.bt { filter: brightness(.65); }

.s3.cylinder { width: calc(var(--s) * .84); height: var(--h); margin-left: calc(var(--s) * -.42); }
.s3.cylinder .spin { position: absolute; left: 50%; top: 0; width: 0; height: 100%; }
.s3.cylinder .f.strip { top: 0; left: 0; background: var(--c); border-top: 3px solid #23304d; border-bottom: 3px solid #23304d; }
.s3.cylinder .f.strip.band { background: linear-gradient(180deg, var(--c) 0 38%, rgba(255,255,255,.75) 38% 50%, var(--c) 50%); }
.s3.cylinder .f.cap { left: 0; border-radius: 50%; background: var(--c); border: 3px solid #23304d; filter: brightness(1.18); }

.s3.pyramid { width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2); }
.s3.pyramid .spin { width: 100%; height: 100%; }
.s3.pyramid .f.tri { left: 0; width: var(--s); transform-origin: 50% 100%; clip-path: polygon(50% 0, 100% 100%, 0 100%);
    background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(255,255,255,0) 60%), var(--c); }
.s3.pyramid .f.tri::after { content: ''; position: absolute; inset: 0; clip-path: polygon(50% 0, 100% 100%, 97% 100%, 50% 6%, 3% 100%, 0 100%); background: #23304d; }
.s3.pyramid .f.t1, .s3.pyramid .f.t3 { filter: brightness(.84); } .s3.pyramid .f.t2 { filter: brightness(.94); }
.s3.pyramid .f.base { left: 0; width: var(--s); height: var(--s); background: var(--c); filter: brightness(.6); }

.s3.ball { width: var(--s); height: var(--s); margin-left: calc(var(--s) / -2); }
.s3.ball .orb { position: relative; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 3px solid #23304d; }
.s3.ball .stripes { position: absolute; inset: -25%; background: conic-gradient(var(--c) 0 60deg, #fff 60deg 120deg, #ffd23f 120deg 180deg, var(--c) 180deg 240deg, #fff 240deg 300deg, #5cc96b 300deg 360deg); animation: spin 5s linear infinite; }
.s3.ball .orb::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), rgba(255,255,255,0) 30%), radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,.28)); }
.s3-tower { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transform-style: preserve-3d; }
.s3-tower .lvl { position: relative; width: 100%; flex: none; transform-style: preserve-3d; }
.s3-tower .lvl .s3 { bottom: 0; }

@media (max-aspect-ratio: 1/1), (max-width: 760px) {
    .pb-text { font-size: clamp(1.15rem, 2.4vh, 1.6rem); padding: 8px 16px; }
    .pb-task { font-size: 1rem; min-height: 50px; } .pb-task .chip-art { width: 38px; height: 38px; }
    .pu .pu-say { font-size: .9rem; padding: 4px 10px; max-width: 200px; white-space: normal; text-align: center; }
    .pb-end .lesson { font-size: .95rem; }
}