/* Scoped replacement for the legacy Busy Book presentation. */
.bb2-game{font-family:'Nunito',sans-serif;height:100dvh;background:#ce934e url('../images/busy-book/desk.webp') center/cover no-repeat;isolation:isolate;transition:opacity .2s,visibility .2s;box-sizing:border-box}.bb2-game *{box-sizing:border-box}.bb2-game :where(button){font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.bb2-game [hidden]{display:none!important}.bb2-game button:focus-visible{outline:3px solid #208fff;outline-offset:3px}.bb2-header{display:flex;align-items:center;gap:20px;height:58px;padding:5px 18px;flex-shrink:0;border:0;border-radius:0;background:repeating-linear-gradient(2deg,#0000 0 13px,#e3994925 14px 15px),linear-gradient(#b57437,#7e421d);box-shadow:0 4px 10px #4b260a55;position:relative;z-index:3}.bb2-header h1{display:flex;align-items:center;gap:8px;margin:0;font-size:34px;line-height:1;font-weight:1000;color:#ffdc72;text-shadow:0 3px 0 #593016;white-space:nowrap;flex:1}.bb2-header h1>span{font-size:37px}.bb2-header h1 em{font-style:normal;color:#fff6e6}.bb2-score{display:flex;align-items:center;gap:9px;position:static;transform:none;padding:6px 17px;white-space:nowrap;background:linear-gradient(#fff8e4,#fff0ce);border:2px solid #ffdc94;outline:1px dashed #d4a76a;outline-offset:-5px;border-radius:23px;color:#895026;font-size:13px;font-weight:1000;box-shadow:0 3px 0 #63311366}.bb2-score>span{font-size:23px}.bb2-score strong{font-size:23px;color:#2d62ee}.bb2-level{color:#ffefd1;font-size:13px;white-space:nowrap;font-weight:900}.bb2-level strong{color:#ffdc54;font-size:17px}.bb2-progress{width:190px;display:flex;flex-direction:column;gap:4px;align-items:center;color:#fff6da;font-size:12px;font-weight:900}.bb2-progress>div{width:100%;height:7px;border:1px solid #dc9647;border-radius:8px;background:#512900;overflow:hidden}.bb2-progress i{display:block;width:0;height:100%;background:linear-gradient(90deg,#ffd247,#ffab20);transition:width .3s}.bb2-header nav{display:flex;gap:8px}.bb2-header nav button{width:38px;height:38px;border:2px solid #e6a065;border-radius:12px;background:linear-gradient(#e78d52,#ba5027);color:white;font-size:27px;font-weight:1000;line-height:1;padding:0;box-shadow:0 3px 0 #61301e}.bb2-play{flex:1;display:flex;flex-direction:column;min-height:0;padding:15px 16px 16px;gap:12px}.bb2-stage{min-height:0;flex:1;display:flex;align-items:center;justify-content:center}.bb2-book{width:min(90%,1150px);height:min(100%,460px);position:relative;display:flex;gap:16px;padding:10px 12px 15px;border:3px solid #9b5424;border-radius:24px;background:linear-gradient(100deg,#a06331,#cf9451 45%,#805020 50%,#c08b4d 55%,#aa6831);box-shadow:0 7px 0 #744019,0 13px 25px #44250966,inset 0 0 0 3px #e5b275;transform:perspective(1400px) rotateX(3deg)}.bb2-page{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;padding:14px 14px 28px;gap:14px;overflow:hidden;border:1px solid #dec6a1;border-radius:19px 6px 6px 18px;background:repeating-linear-gradient(0deg,transparent 0 34px,#75abcb19 35px 36px),linear-gradient(100deg,#fffdf4,#fff9e9 85%,#e1cda766);box-shadow:0 3px 0 #ddc8a4,0 6px 0 #bba480,inset 4px 0 0 #fff;transition:box-shadow .2s}.bb2-right{border-radius:6px 19px 18px 6px;background:repeating-linear-gradient(0deg,transparent 0 34px,#75abcb19 35px 36px),linear-gradient(90deg,#dfc79d66,#fff9e9 15%,#fffdf4);box-shadow:0 3px 0 #ddc8a4,0 6px 0 #bba480,inset -4px 0 0 #fff}.bb2-page-title{display:flex;align-items:center;justify-content:center;gap:9px;max-width:96%;min-height:47px;padding:4px 20px;border:2px solid #64da8b;border-radius:22px;background:linear-gradient(#34c977,#119447);box-shadow:0 4px 0 #0e7839,0 6px 12px #187b3033;color:#fff;text-shadow:0 2px 0 #126c32;line-height:1.1;font-size:23px;font-weight:1000;text-transform:uppercase;letter-spacing:.4px;flex-shrink:0}.bb2-right .bb2-page-title{background:linear-gradient(#ff7559,#e94530);border-color:#ffac8a;box-shadow:0 4px 0 #ae3323,0 6px 12px #ba482833;text-shadow:0 2px 0 #ab3025}.bb2-page-title img{width:37px;height:37px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 2px 1px #0002)}.bb2-slots{width:100%;flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,var(--slot-size,90px));grid-template-rows:repeat(2,var(--slot-size,90px));place-content:center;gap:9px}.bb2-slot{position:relative;border:2px dashed #d8b57e;border-radius:12px;background:repeating-linear-gradient(45deg,#efe0c344 0 2px,#fff7e611 2px 5px);box-shadow:inset 0 0 0 4px #fff9e777}.bb2-slot.filled{border:0;background:none;box-shadow:none}.bb2-sticker{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;width:100%;height:100%;border:2px solid #e9bb6d;border-radius:12px;background:linear-gradient(135deg,#fffef6,#fff1d4);box-shadow:0 3px 0 #cca063,0 4px 6px #9a693a2a;padding:5px;rotate:-2deg}.bb2-slot:nth-child(even) .bb2-sticker{rotate:2deg}.bb2-sticker img{width:100%;height:75%;object-fit:contain;filter:drop-shadow(0 2px 1px #70482033)}.bb2-sticker span{font-size:12px;line-height:1;font-weight:900;color:#74401c;white-space:nowrap}.bb2-spine{position:absolute;left:50%;top:6%;bottom:6%;width:30px;margin-left:-15px;display:flex;flex-direction:column;justify-content:space-around;z-index:2;pointer-events:none}.bb2-spine i{height:12px;border:5px solid #765534;border-radius:50%;box-shadow:0 2px 1px #392106aa,inset 0 2px 1px #3f2e19;position:relative;background:linear-gradient(#f5d595,#634226)}.bb2-spine i:before,.bb2-spine i:after{content:'';position:absolute;top:0;width:8px;height:8px;border-radius:50%;background:#573920;z-index:-1}.bb2-spine i:before{left:-5px}.bb2-spine i:after{right:-5px}.bb2-doodle{position:absolute;bottom:5px;left:15px;font-size:25px;opacity:.7;pointer-events:none}.bb2-right .bb2-doodle{left:auto;right:17px;color:#ffb328}.bb2-page.bb2-drop-over,.bb2-book.has-selection .bb2-page:hover{box-shadow:inset 0 0 0 3px #ffc333,0 4px 0 #cfaa65}.bb2-message{align-self:center;margin:0;flex-shrink:0;max-width:96%;padding:7px 25px;background:linear-gradient(#fff7d7,#ffe4a5);border:2px solid #f6d278;border-radius:25px;color:#663914;font-size:15px;line-height:1.2;font-weight:1000;box-shadow:0 3px 0 #85502644;text-align:center}.bb2-message:before{content:'💡';margin-right:8px}.bb2-message[data-kind=wrong]{background:#fff1e2;border-color:#f7976b}.bb2-message[data-kind=correct]{background:#e8ffce;border-color:#b2d87a}.bb2-tray{height:111px;display:grid;grid-template-columns:repeat(var(--tray-count,12),minmax(0,1fr));align-items:center;gap:8px;flex-shrink:0;padding:9px 12px;background:linear-gradient(#b67632,#8f4a18);border:3px solid #824315;border-radius:18px;box-shadow:0 5px 0 #61340f,inset 0 0 0 2px #e6ae61,inset 0 3px 8px #63380960}.bb2-card{height:85px;min-width:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;border:2px solid #e5b672;border-radius:11px;background:linear-gradient(#fffdf3,#fff1d4);box-shadow:0 4px 0 #d2a35e,0 5px 7px #5b300c44;padding:5px;color:#6e3a18;touch-action:none!important;user-select:none;transition:scale .15s,box-shadow .15s}.bb2-card img{width:100%;height:65%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 1px #66332233)}.bb2-card span{font-size:12px;line-height:1.05;font-weight:1000;pointer-events:none}.bb2-card.selected{scale:1.05;outline:3px solid #ffc528;box-shadow:0 4px 0 #d18721,0 0 15px #ffd165b0}.bb2-card:hover{scale:1.04}.bb2-tray-done{grid-column:1/-1;text-align:center;font-size:22px;font-weight:1000;color:#fff7d7}.bb2-effects{position:fixed;inset:0;pointer-events:none;z-index:5;overflow:hidden}.bb2-drag-ghost,.bb2-flying{position:fixed;display:flex;align-items:center;justify-content:center;flex-direction:column;border:2px solid #ffd16c;border-radius:12px;background:#fff6e1;padding:5px;box-shadow:0 8px 20px #4b261866;pointer-events:none;transform-origin:0 0;z-index:5}.bb2-drag-ghost{rotate:5deg;scale:1.06}.bb2-flying img,.bb2-drag-ghost img{width:100%;height:80%;object-fit:contain}.bb2-drag-ghost span{font-size:12px;font-weight:1000}.bb2-spark{position:fixed;color:#ffca27;font-size:25px;animation:bb2-spark .65s forwards}.bb2-popup{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;background:#4a2b2166;backdrop-filter:blur(5px);padding:10px;overflow:hidden}.bb2-dialog{position:relative;flex-shrink:0;width:560px;max-width:none;padding:22px 27px;background:linear-gradient(135deg,#fffdf1,#fff1d9);border:4px solid #ffdc86;border-radius:26px;box-shadow:0 7px 0 #a3703977,0 20px 50px #4b261855;text-align:center;transform:scale(var(--dialog-scale,1));z-index:1}.bb2-dialog h2{font-size:32px;line-height:1.08;font-weight:1000;color:#653e24;margin:5px 0 10px}.bb2-dialog p{color:#89654a;font-size:17px;line-height:1.25;font-weight:900;margin:10px 0}.bb2-dialog-close{position:absolute;right:9px;top:9px;width:30px;height:30px;border:0;border-radius:50%;background:#eadaaf;color:#9b6a3d;font-size:24px;line-height:1}.bb2-kicker{color:#b18145;font-size:11px;font-weight:1000;letter-spacing:2px}.bb2-guide-mission{background:#f7e8c9;border-radius:15px;padding:7px;font-size:15px;color:#785638;font-weight:1000}.bb2-demo{display:block;width:100%;background:linear-gradient(#d4edca,#fff0c2);border-radius:16px;margin:10px 0}.bb2-demo text{font-family:'Nunito',sans-serif;font-weight:1000;font-size:15px;fill:#715030}.bb2-demo text[font-size="30"]{font-size:30px}.bb2-demo text[font-size="27"]{font-size:27px}.bb2-caption{min-height:42px}.bb2-steps{display:flex;justify-content:center;gap:6px}.bb2-steps button{font-size:12px;font-weight:900;border:0;background:#eee0c5;color:#927354;border-radius:15px;padding:5px 10px}.bb2-steps button.active{background:#d5efaa;color:#407c38}.bb2-actions{display:flex;justify-content:center;gap:12px;margin-top:14px}.bb2-primary,.bb2-secondary{font-size:19px;font-weight:1000;border:2px solid #62dd93;border-radius:17px;background:linear-gradient(#33cf86,#0ba969);color:white;padding:11px 23px;box-shadow:0 5px 0 #078051;white-space:nowrap}.bb2-secondary{color:#967650;background:#fffaf0;border-color:#d9bd91;box-shadow:0 5px 0 #bea079}.bb2-medal{font-size:70px;line-height:1.1}.bb2-stars{font-size:50px;letter-spacing:5px;color:#ffbc25;filter:drop-shadow(0 3px 0 #d5950e)}.bb2-final-score{padding:10px;background:#fff9ed;border:2px solid #ebd7b3;border-radius:16px;font-size:22px;font-weight:1000;color:#744b30;margin-top:12px}.bb2-final-score strong{color:#355eee;margin-left:20px;font-size:32px}.bb2-confetti{position:absolute;top:-15px;width:9px;height:15px;animation:bb2-confetti 2.2s linear infinite;pointer-events:none}.bb2-pop{animation:bb2-pop .4s ease-out}.bb2-shake{animation:bb2-shake .3s}.bb2-turn{animation:bb2-turn .55s ease-out}
@keyframes bb2-pop{40%{scale:1.14}75%{scale:.98}}@keyframes bb2-shake{25%,75%{translate:-5px}50%{translate:5px}}@keyframes bb2-spark{to{translate:var(--dx) var(--dy);scale:.4;opacity:0}}@keyframes bb2-turn{from{opacity:.3;transform:perspective(1400px) rotateY(-12deg)}to{opacity:1;transform:perspective(1400px) rotateY(0)}}@keyframes bb2-confetti{to{transform:translateY(800px) rotate(600deg)}}
@media(max-width:900px),(max-height:500px){.bb2-header{height:34px;padding:2px 9px;gap:10px}.bb2-header h1{font-size:21px;gap:5px}.bb2-header h1>span{font-size:25px}.bb2-score{padding:2px 10px;gap:5px;font-size:10px;border-width:1px}.bb2-score>span{font-size:17px}.bb2-score strong{font-size:16px}.bb2-level{font-size:10px}.bb2-level strong{font-size:13px}.bb2-progress{width:110px;font-size:9px;gap:2px}.bb2-progress>div{height:5px}.bb2-header nav{gap:5px}.bb2-header nav button{width:27px;height:27px;font-size:20px;border-radius:8px;border-width:1px}.bb2-play{padding:7px 10px 9px;gap:6px}.bb2-book{width:90%;padding:6px 8px 9px;gap:13px;border-width:2px;border-radius:16px;box-shadow:0 4px 0 #744019,0 7px 15px #44250955,inset 0 0 0 2px #e5b275}.bb2-page{padding:6px 7px 16px;gap:6px;border-radius:12px 3px 3px 12px}.bb2-right{border-radius:3px 12px 12px 3px}.bb2-page-title{min-height:27px;padding:2px 10px;font-size:14px;gap:5px;border-width:1px;border-radius:14px;letter-spacing:0}.bb2-page-title img{width:23px;height:23px}.bb2-slots{gap:6px}.bb2-slot{border-width:1px;border-radius:7px}.bb2-sticker{padding:3px;border-radius:7px;border-width:1px}.bb2-sticker span{font-size:8px}.bb2-spine{width:22px;margin-left:-11px}.bb2-spine i{border-width:3px;height:9px}.bb2-doodle{font-size:15px;bottom:1px}.bb2-message{font-size:10px;padding:4px 13px;border-width:1px}.bb2-tray{height:76px;width:min(90%,640px);align-self:center;gap:8px;padding:6px 10px;border-width:2px;border-radius:12px}.bb2-card{height:59px;border-radius:8px;padding:3px}.bb2-card img{height:70%}.bb2-card span{font-size:10px}.bb2-tray-done{font-size:15px}}
@media(max-height:330px){.bb2-header{height:30px}.bb2-header h1{font-size:19px}.bb2-progress{width:95px}.bb2-header nav button{width:24px;height:24px}.bb2-play{padding:5px 8px 7px;gap:5px}.bb2-tray{height:57px;width:min(75%,480px);padding:4px 8px}.bb2-card{height:43px;gap:0}.bb2-card span{font-size:9px}.bb2-message{padding:2px 13px;font-size:9px}.bb2-page{padding:4px 6px 12px;gap:5px}.bb2-page-title{min-height:23px;font-size:11px;box-shadow:0 2px 0 #0e7839}.bb2-page-title img{width:19px;height:19px}.bb2-slots{gap:5px}.bb2-sticker span{font-size:7px}.bb2-doodle{font-size:12px}}
@media(orientation:portrait){.bb2-header{height:59px;display:grid;grid-template-columns:1fr auto auto;grid-template-rows:27px 20px;gap:4px 8px;padding:4px 8px}.bb2-header h1{grid-area:1/1/2/3;font-size:21px}.bb2-header nav{grid-area:1/3}.bb2-score{grid-area:2/1;justify-self:start;line-height:1;padding:2px 7px}.bb2-score strong{font-size:14px}.bb2-level{grid-area:2/2}.bb2-progress{grid-area:2/3;width:85px;font-size:8px}.bb2-play{padding:12px 6px 12px;gap:10px}.bb2-book{width:100%;max-height:470px;gap:10px;padding:5px 6px 10px}.bb2-page{padding:8px 5px 25px;gap:12px}.bb2-page-title{font-size:11px;padding:4px 6px;min-height:42px;gap:3px;text-align:center;max-width:100%}.bb2-page-title img{width:22px;height:22px}.bb2-tray{height:168px;grid-template-columns:repeat(2,minmax(0,1fr));width:92%;max-width:380px;gap:9px;padding:8px 12px}.bb2-card{height:70px}.bb2-card span{font-size:11px}.bb2-card img{height:73%}.bb2-message{font-size:11px;padding:5px 11px;min-height:28px}.bb2-doodle{bottom:5px}.bb2-sticker span{font-size:7px}}
@media(prefers-reduced-motion:reduce){.bb2-game *{animation:none!important;transition:none!important}.bb2-confetti,.bb2-spark{display:none}}

.bb2-game{pointer-events:none}.bb2-game.active{pointer-events:auto}
@media(orientation:portrait){.bb2-page-title{height:44px;min-height:44px;max-height:44px;font-size:10px;padding:2px 4px;gap:2px}.bb2-page-title img{width:18px;height:18px}.bb2-page-title span{min-width:0}}

/* Keep tray cards and the grabbed card the same size as the deck empties. */
.bb2-card:hover,.bb2-card.selected{scale:1}.bb2-drag-ghost{rotate:0deg;scale:1;padding:5px;border-radius:11px;border-color:#e5b672;box-shadow:0 8px 20px #4b261866}.bb2-drag-ghost img{height:65%}.bb2-drag-ghost span{font-size:12px;font-weight:1000;color:#6e3a18}
@media(max-width:900px),(max-height:500px){.bb2-drag-ghost{padding:3px;border-radius:8px}.bb2-drag-ghost img{height:70%}.bb2-drag-ghost span{font-size:10px}}
@media(max-height:330px){.bb2-drag-ghost{gap:0}.bb2-drag-ghost span{font-size:9px}}
@media(orientation:portrait){.bb2-drag-ghost img{height:73%}.bb2-drag-ghost span{font-size:11px}}

/* Two wider slots per row on upright phones and taller mobile screens. */
@media(orientation:portrait),(max-width:900px) and (min-height:400px){
 .bb2-slots{grid-template-columns:repeat(2,var(--slot-size));grid-template-rows:repeat(3,var(--slot-size))}
 .bb2-sticker span{font-size:clamp(8px,2.5vw,11px)}
}
@media(orientation:portrait) and (max-height:550px){
 .bb2-play{padding:7px 6px 10px;gap:6px}
 .bb2-tray{height:126px}
 .bb2-card{height:50px}
 .bb2-page{padding:6px 5px 14px;gap:7px}
 .bb2-page-title{height:36px;min-height:36px;max-height:36px}
}