/* ===== Maloosam's room (hub) + level screens ===== */
.hub,.rmx{position:fixed;inset:0;direction:rtl;display:flex;flex-direction:column;color:#12323a;animation:rdin .3s ease both}
.hub{z-index:40;background:linear-gradient(180deg,#ffe8c2,#ffd9a0 62%,#c98a52 62.2%,#b9773e)}
.hub[hidden]{display:none}
.rmx{z-index:41}
.rmx-top{flex:none;display:flex;align-items:center;gap:12px;padding:10px 14px;padding-top:max(10px,env(safe-area-inset-top,0px));max-width:680px;width:100%;margin:0 auto;position:relative;z-index:2}
.rmx-t{flex:1;text-align:center;display:flex;flex-direction:column;line-height:1.3}
.rmx-t b{font-size:20px;font-weight:900}.rmx-t small{font-size:12px;opacity:.75}
.rmx-body{flex:1;overflow:auto;max-width:680px;width:100%;margin:0 auto;padding:6px 14px 18px}
.hub-room{position:relative;flex:1;display:flex;flex-direction:column;max-width:680px;width:100%;margin:0 auto;padding:0 14px 8px;overflow:auto}
.hub-win{display:none;position:absolute;top:2px;inset-inline-start:22px;width:84px;height:84px;border-radius:18px 18px 8px 8px;border:5px solid #b9773e;background:linear-gradient(180deg,#9fdcff,#dff3ff);box-shadow:inset 0 0 0 3px #fff8;overflow:hidden;opacity:.9}
.hub-sun{position:absolute;top:12px;inset-inline-end:14px;width:26px;height:26px;border-radius:50%;background:radial-gradient(#fff6b0,#ffc83d);box-shadow:0 0 14px #ffe27a}
.hub-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:14px}
.hub-grid .hub-obj{width:calc(33.3% - 8px);min-width:104px}
.hub-obj{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px 10px;border-radius:20px;border:3px solid #e6c78e;border-bottom-width:6px;background:linear-gradient(180deg,#fffdf6,#fff1d6);font:inherit;color:inherit;cursor:pointer;text-align:center;-webkit-tap-highlight-color:transparent}
.hub-obj:nth-child(4),.hub-obj:nth-child(5){grid-column:span 1}
.hub-obj .ho-ico{font-size:46px;line-height:1.1;filter:drop-shadow(0 3px 2px rgba(0,0,0,.18))}
.hub-obj b{font-size:14px;font-weight:900}.hub-obj small{font-size:11px;opacity:.7;line-height:1.3}
.hub-obj em{font-style:normal;font-size:11px;font-weight:800;color:#8a4b08;background:#ffe7bd;border-radius:999px;padding:1px 8px;margin-top:3px}
.hub-obj.lock .ho-ico,.hub-obj.soon .ho-ico{filter:grayscale(1) opacity(.55)}
.hub-obj.lock,.hub-obj.soon{background:#efe7d6;border-color:#d9ccb2}
.hub-obj.now{border-color:#ff9418;box-shadow:0 0 0 3px #ffd7a0}
.hub-obj.pulse{animation:hubpulse 1.6s ease-in-out infinite}
@keyframes hubpulse{50%{transform:translateY(-4px)}}
.ho-bar{width:78%;height:7px;border-radius:99px;background:#eadfc8;overflow:hidden;margin-top:4px}.ho-bar i{display:block;height:100%;background:linear-gradient(90deg,#ffb02e,#ff9418)}
.ho-ok{position:absolute;top:6px;inset-inline-start:8px;width:24px;height:24px;border-radius:50%;background:#2fa36b;color:#fff;display:grid;place-items:center;font-weight:900;font-size:14px}
.hub-floor{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:10px;padding-top:14px}
.hub-cat{position:relative;display:flex;align-items:flex-end;gap:8px}
.hub-bub{max-width:190px;background:#fff;border:2px solid #f0e2c4;border-radius:16px;padding:8px 12px;font-size:13px;font-weight:800;line-height:1.5;box-shadow:0 3px 0 #ead9b4}
.hub-chest{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 14px;border-radius:18px;border:3px solid #8a5a2b;border-bottom-width:6px;background:linear-gradient(180deg,#d9a066,#b9773e);color:#fff;font:inherit;cursor:pointer}
.hub-chest span{font-size:34px}.hub-chest b{font-size:13px;text-shadow:0 1px 0 rgba(0,0,0,.3)}
.hub-chest.lock{filter:grayscale(.7) brightness(.9)}
/* overlays */
.chestv{background:linear-gradient(160deg,#ffe9c7,#ffd29a)}
.chest-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:8px}
.chest-it{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 8px;border-radius:18px;border:3px solid #e6c78e;border-bottom-width:6px;background:#fffaf0;font:inherit;color:inherit;cursor:pointer}
.chest-it b{font-size:16px}.chest-it small{opacity:.7}.chest-it.done{border-color:#2fa36b}
.rmx-st{display:inline-flex;gap:2px}.rmx-st i{font-style:normal;color:#d6cdb8;font-size:16px}.rmx-st i.on{color:#ffb02e}
/* train */
.trainv{background:linear-gradient(180deg,#bfe6ff,#e8f6ff 52%,#c9e9a8 52.2%,#a9d27c)}
.tr-wrap{overflow-x:auto;overflow-y:hidden;margin:16px -14px 0;padding:0 14px 14px;direction:ltr;-webkit-overflow-scrolling:touch}
.tr-track{display:flex;align-items:flex-end;gap:6px;min-width:max-content;padding:40px 6px 18px;position:relative;border-bottom:8px solid #7a5230;background:repeating-linear-gradient(90deg,transparent 0 22px,#7a523033 22px 26px) bottom/100% 8px no-repeat}
.tr-smoke{position:absolute;top:2px;inset-inline-start:46px;z-index:2;display:flex}.tr-smoke i{width:16px;height:16px;border-radius:50%;background:#fff;opacity:0;animation:smoke 2.4s ease-out infinite}.tr-smoke i:nth-child(2){animation-delay:.8s}.tr-smoke i:nth-child(3){animation-delay:1.6s}
@keyframes smoke{0%{opacity:.9;transform:translate(0,10px) scale(.5)}100%{opacity:0;transform:translate(-26px,-40px) scale(1.6)}}
.tr-end{flex:none;width:120px;text-align:center;direction:rtl}.tr-end span{font-size:70px;display:block}.tr-end b{font-size:14px}
.tr-msg{text-align:center;font-weight:800;margin:6px 0 0}
/* magic book */
.bookv{background:linear-gradient(160deg,#3a2a6b,#5a3d94 55%,#7c56b8);color:#fff}
.bookv .rmx-t,.bookv .rmx-t b{color:#fff}.bookv .rd-ic{background:#f4f8f8}
.mb-body{display:flex;flex-direction:column;align-items:center;gap:8px}
.mb-wrap{width:min(88vw,420px);margin-top:14px}
.mb-bk .bk-leaf{transition:transform .75s cubic-bezier(.5,.05,.25,1),opacity .2s .55s}
.mb-bk.nt .bk-leaf{transition:none}
.mb-bk{color:#12323a}
.mb-cover{background:linear-gradient(160deg,#6f4bb8,#4a2f8c);color:#fff;justify-content:center;border-radius:inherit}
.mb-seal{font-size:70px;filter:drop-shadow(0 4px 6px #0006)}.mb-cover h3{font-size:24px;margin:4px 0}.mb-cover small{opacity:.9}.mb-hint{font-size:14px;line-height:1.8;background:#ffffff22;border-radius:14px;padding:8px 12px}
.mb-ch{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px 16px 12px 22px;text-align:center;background:linear-gradient(180deg,#fffaf0,#fff1d6)}
.rmx-fb{font-size:24px;line-height:1}
.mb-ch small{color:#8a4b08;font-weight:800}.mb-ch h3{font-size:24px;margin:2px 0}
.mb-pat{font-size:26px;font-weight:900;color:#ff8a2a;letter-spacing:1px;background:#fff;border:3px dashed #ffd29a;border-radius:16px;padding:6px 14px}
.mb-st{font-size:14px;font-weight:800;margin:4px 0}.mb-ch.lock{filter:grayscale(.6)}
.mb-ch .btn{margin-top:6px}
.mb-s span{transition:background .7s ease,color .7s ease,box-shadow .7s ease}
.mb-s span.ink{color:transparent!important;background:linear-gradient(135deg,#2a1b52,#5b3f97 60%,#2a1b52)!important;box-shadow:inset 0 0 8px #000a;border-radius:10px;text-shadow:none;cursor:help;animation:inkwob 3s ease-in-out infinite}
@keyframes inkwob{50%{box-shadow:inset 0 0 12px #000c,0 0 6px #7c56b888}}
.mb-s span.clr{animation:inkclr 1s ease}
@keyframes inkclr{0%{box-shadow:0 0 0 0 #ffd54f}40%{box-shadow:0 0 18px 8px #ffd54f;background:#fff3b0}100%{box-shadow:0 0 0 0 #ffd54f00}}
.mb-chap{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:420px}
.mb-chap button{width:34px;height:34px;border-radius:50%;border:2px solid #ffffff55;background:#ffffff22;color:#fff;font:inherit;font-weight:800;cursor:pointer}
.mb-chap button.done{background:#2fa36b;border-color:#2fa36b}.mb-chap button.now{background:#ff9418;border-color:#fff}.mb-chap button.rv{font-size:14px}
.mb-toast{min-height:22px;font-weight:800;font-size:14px;text-align:center;opacity:0;transition:opacity .3s;background:#0004;border-radius:99px;padding:3px 14px}.mb-toast.on{opacity:1}
.bookv .bk-nav button{background:#fffaf0}.bookv .bk-nav span{color:#fff}
.mb-end{color:#12323a}

/* ================= the train scene ================= */
.trainv{background:#9fd3ff}
.trainv .rmx-top{position:relative;z-index:6;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0));backdrop-filter:none}
.trs{position:absolute;inset:0;overflow:hidden;z-index:1;touch-action:pan-y}
.trs-sky{position:absolute;inset:0;background:url(../img/sky-wide.webp) center bottom/cover no-repeat}
.trs-clouds img{position:absolute;left:0;height:auto;opacity:.95;pointer-events:none;animation:trc linear infinite;will-change:transform}
@keyframes trc{from{transform:translateX(-30vw)}to{transform:translateX(120vw)}}
.trs-hill{position:absolute;left:-6%;right:-6%;bottom:-2%;height:56%;background:url(../img/hill.webp) center top/100% 100% no-repeat}
.trs-stage{position:absolute;left:0;bottom:15vh;height:520px;transform-origin:0 100%}
.trs-rail{position:absolute;left:0;right:0;bottom:0;height:130px;background:url(../img/train/rail.webp) repeat-x 0 0/auto 130px;filter:drop-shadow(0 4px 3px rgba(0,0,0,.25))}
.trs-train{direction:ltr;--c:45px;position:absolute;left:30px;bottom:0;display:flex;align-items:flex-end;height:100%;will-change:transform}
.tr-msg{position:absolute;left:0;right:0;bottom:3.2vh;z-index:6;text-align:center;font-weight:900;font-size:17px;margin:0;color:#14391f;text-shadow:0 1px 0 rgba(255,255,255,.7)}
.trs-ar{direction:ltr;position:absolute;top:44%;z-index:6;width:54px;height:54px;border-radius:50%;border:0;background:rgba(255,255,255,.9);color:#2b6a8a;font:900 38px/1 system-ui;box-shadow:0 4px 10px rgba(0,0,0,.25);cursor:pointer;padding:0 0 6px}
.trs-ar.l{left:14px}.trs-ar.r{right:14px}.trs-ar[hidden]{display:none}.trs-ar:active{transform:scale(.94)}
/* locomotive: the sprite sheet img/train/loco-sheet.webp (6 frames of 360x400; wheels, rod and smoke are drawn in the frames) */
.tr-eng{position:relative;flex:none;width:430px;height:478px;margin-bottom:calc(var(--c) - 18px)}
.te2{position:absolute;inset:0;background:url(../img/train/loco-sheet.webp) 0 0/2580px 478px no-repeat;animation:te2 .9s steps(6) infinite paused}
@keyframes te2{to{background-position:-2580px 0}}
.mv .te2{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.te2{animation:none}}
/* wagons */
.wg{position:relative;flex:none;width:320px;height:324px;margin-left:-6px;margin-bottom:calc(var(--c) - 11px);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tr-eng+.wg{margin-left:-30px}
.wg.lock{cursor:not-allowed}
.wg-bg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 6px 4px rgba(0,0,0,.22))}
.wg::before{content:"";position:absolute;left:-18px;width:28px;height:10px;bottom:23%;background:#3b3b44;border-radius:5px;z-index:-1}
.wg-t{position:absolute;left:16%;right:17%;top:14.5%;text-align:center;color:#5a2d14}.wg-t.lat{font:900 30px/1.1 'Baloo 2','Fredoka',system-ui,sans-serif;letter-spacing:.5px}.wg-t.fa{font-family:var(--f-fa,'Vazirmatn',system-ui,sans-serif);font-weight:900;font-size:30px;line-height:1.25;letter-spacing:0}
.wg-ps{position:absolute;left:17%;right:18%;top:31%;height:37%;display:flex;justify-content:space-around;align-items:center;gap:2px}
.wg-p{flex:1;height:100%;display:flex;align-items:center;justify-content:center}.wg-p img{max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.18))}.wg-p em{font-style:normal;font-size:52px}
.wg-star{font-size:64px}
.wg-ft{position:absolute;left:18%;right:18%;top:70.5%;display:flex;justify-content:center;font-size:22px}
.wg-ft .rmx-st i{font-size:24px}
.wg-go{background:#fff;color:#c4430d;border-radius:99px;padding:3px 18px;font-weight:900;font-size:16px;animation:hubpulse 1.4s infinite}
.wg-lock{font-size:24px}.wg.lock .wg-bg,.wg.lock .wg-ps{filter:grayscale(.6) brightness(1.02)}.wg.lock{opacity:.93}
.tr-end{flex:none;width:200px;margin-left:30px;margin-bottom:calc(var(--c) - 4px);text-align:center;direction:rtl}.tr-end img{width:110px}.tr-end b{display:block;font-size:20px;color:#14391f}
@media (prefers-reduced-motion:reduce){.trs-clouds img,.te-cat,.tr-smoke i{animation:none}}
/* icons from img/ui (no emoji) */
.rmx-st img{width:20px;height:20px;display:block}.wg-ft .rmx-st img{width:30px;height:30px}
.wg-lock img{width:34px;height:auto;display:block}.wg-star img{width:84px;height:auto;display:block}
.ic{width:1.15em;height:1.15em;vertical-align:-.2em;display:inline-block}
.rd-ic img{max-width:78%;max-height:78%}
.trs-ar img{width:34px;height:auto;display:block}.trs-ar{display:flex;align-items:center;justify-content:center;padding:0}
.ho-ok img{width:18px;height:18px;display:block}.bk-star img{width:64px;height:auto}
.mb-cat img,#mbP img,#mbN img{width:24px;height:auto;display:block}
.tr-end img{width:120px}

/* toy-style smoke puffs from the chimney (CSS, same glossy look as the locomotive) */
.te-sm{position:absolute;left:120px;top:118px;width:0;height:0;pointer-events:none;z-index:3;--dx:70px;--dy:-170px;--T:4.4s}
.mv .te-sm{--dx:170px;--dy:-120px;--T:2.2s}
.pf{position:absolute;left:0;top:0;width:0;height:0;opacity:0;animation:pf var(--T) ease-out infinite}
.pf:nth-child(2){animation-delay:calc(var(--T)/-4)}.pf:nth-child(3){animation-delay:calc(var(--T)/-2)}.pf:nth-child(4){animation-delay:calc(var(--T)/-4*3)}
.pf s{position:absolute;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff 0,#fbfdff 38%,#dbe7f7 78%,#bfd0ea 100%);box-shadow:inset -5px -7px 11px rgba(110,145,200,.32),inset 4px 5px 7px #fff,0 3px 5px rgba(40,70,120,.15)}
.pf s:nth-child(1){left:-27px;top:-30px;width:56px;height:56px}.pf s:nth-child(2){left:-40px;top:-12px;width:44px;height:44px}.pf s:nth-child(3){left:-6px;top:-10px;width:46px;height:46px}
@keyframes pf{0%{opacity:0;transform:translate(0,0) scale(.3)}12%{opacity:1}70%{opacity:.95}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1.6)}}
@media (prefers-reduced-motion:reduce){.pf{animation:none}}
.trs-ar{display:none!important}

/* ---- train header: logo-style title on the right, icons together on the left ---- */
.trainv .rmx-top{max-width:none;width:100%;margin:0;padding:14px 26px;gap:10px;background:none!important;backdrop-filter:none!important;box-shadow:none;align-items:flex-start}
.trainv .rmx-t{order:1;flex:1;align-items:flex-start;text-align:right;line-height:1.1;gap:6px}
.trainv .rd-ic[data-back]{order:2}.trainv .rd-ic[data-fb]{order:3}
.trainv .rmx-t b{position:relative;display:inline-block;font-family:var(--f-fa,'Vazirmatn',system-ui,sans-serif);font-weight:900;font-size:clamp(34px,4.6vw,56px);line-height:1.15;letter-spacing:0;color:transparent;filter:drop-shadow(0 4px 0 rgba(70,35,0,.28))}
.trainv .rmx-t b::before,.trainv .rmx-t b::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none}
.trainv .rmx-t b::before{-webkit-text-stroke:11px #4a2406;paint-order:stroke fill;color:#4a2406}
.trainv .rmx-t b::after{background:linear-gradient(180deg,rgba(255,255,255,.7) 0,rgba(255,255,255,0) 36%),linear-gradient(180deg,#ffe27a 0%,#ffbb2e 42%,#f58a00 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.trainv .rmx-t small{display:inline-block;font-size:clamp(15px,1.7vw,20px);font-weight:800;opacity:1;color:#fff;-webkit-text-stroke:0;text-shadow:0 2px 0 #1b5e9a,0 0 10px rgba(27,94,154,.55);margin-top:6px;letter-spacing:0}
.trainv .rd-ic{width:52px;height:52px;box-shadow:0 4px 10px rgba(0,0,0,.2)}
/* messages */
.tr-msg{left:50%!important;right:auto!important;transform:translateX(-50%);width:max-content;max-width:92vw;padding:7px 22px;border-radius:99px;background:rgba(255,255,255,.9);color:#1d6b35!important;text-shadow:none!important;box-shadow:0 4px 12px rgba(0,0,0,.2);font-size:16px!important}
.tr-toast{position:absolute;left:50%;top:26%;z-index:8;transform:translate(-50%,-14px) scale(.9);display:flex;align-items:center;gap:10px;padding:12px 24px 12px 20px;border-radius:22px;background:#fff;border:4px solid #f58a00;color:#4a2406;font-weight:900;font-size:19px;box-shadow:0 10px 24px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.34,1.56,.64,1);white-space:nowrap;max-width:94vw}
.tr-toast img{width:32px;height:auto}.tr-toast.on{opacity:1;transform:translate(-50%,0) scale(1)}

/* header art + equal icon buttons */
.trainv .rmx-t{gap:2px}
.trh-t{display:block;width:clamp(200px,25vw,380px);height:auto;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.trh-s{display:block;width:clamp(230px,29vw,430px);height:auto;margin-inline-start:6px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.22))}
.rmx-fb{display:contents}
.trainv .rd-ic{width:58px;height:58px;border-radius:18px}
.trainv .rd-ic img{width:38px!important;height:38px!important;max-width:none!important;max-height:none!important;object-fit:contain}

/* bird (same sprite as the intro) */
.trs-bird{position:absolute;left:0;top:0;z-index:2;width:120px;height:120px;pointer-events:none;will-change:transform;transform:translate(-200px,0)}
.trs-bird i{display:block;width:120px;height:120px;background:url(../sprites/bird.webp) 0 0/966px 120px no-repeat;animation:trbird 1.1s steps(8) infinite}
@keyframes trbird{to{background-position:-966px 0}}

/* cat in the cab window (DOM layer so it can blink) */
.te-win{position:absolute;left:289px;top:199px;width:56px;height:64px;overflow:hidden;border-radius:9px;z-index:1;box-shadow:inset 0 9px 12px rgba(0,10,60,.6),inset 0 0 0 2px rgba(20,60,150,.5)}
.te-win::after{content:"";position:absolute;inset:0;border-radius:9px;box-shadow:inset 0 8px 12px rgba(0,10,50,.5);pointer-events:none}
.te-cat{position:absolute;left:50%;bottom:-6px;width:92px;height:auto;transform:translateX(-50%);animation:te-nod 2.6s ease-in-out infinite;max-width:none}
.te-c2{opacity:0}
.te2{z-index:0}.te-sm{z-index:3}
@keyframes te-nod{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(2px)}}
.mv .te-cat{animation-duration:.5s}

/* ---- hub: one cream background, 3x2 grid (5 levels + word box), header like the train screen ---- */
.hub{background:#ffe9c7}
.hub .rmx-top{max-width:1000px;padding:14px 26px;gap:10px;align-items:flex-start}
.hub .rmx-t{order:1;flex:1;align-items:flex-start;text-align:right;gap:2px}
.hub .rd-ic[data-back]{order:2}.hub .rd-ic[data-fb]{order:3}
.hub .rd-ic{width:58px;height:58px;border-radius:18px;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.hub .rd-ic img{width:38px!important;height:38px!important;max-width:none!important;max-height:none!important;object-fit:contain}
.hub .rmx-t b{font-size:clamp(26px,4vw,40px)}.hub .rmx-t small{font-size:15px}
.hub.art .trh-t{width:clamp(170px,22vw,300px)}.hub.art .trh-s{width:clamp(200px,26vw,360px)}
.hub-room{max-width:1000px;padding:8px 26px 24px;justify-content:center}
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,22px);margin-top:6px;width:100%}
.hub-grid .hub-obj{width:auto;min-width:0;padding:clamp(12px,2vw,20px) 8px 14px;gap:4px}
.hub-obj .ho-ico{display:grid;place-items:center;width:clamp(76px,12vw,128px);height:clamp(76px,12vw,128px);font-size:clamp(52px,8vw,88px)}
.hub-obj .ho-ico img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 4px rgba(90,50,0,.25))}
.hub-obj b{font-size:clamp(15px,2vw,20px)}.hub-obj small{font-size:clamp(11px,1.4vw,14px)}
.hub-obj.box{background:linear-gradient(180deg,#fff7e6,#ffe3b3);border-color:#e0b36a}
.hub-obj.box.lock{background:#efe7d6;border-color:#d9ccb2}
.hub-obj.lock .ho-ico img,.hub-obj.soon .ho-ico img{filter:grayscale(1) opacity(.55)}
@media (max-width:420px){.hub .rmx-top,.hub-room{padding-inline:12px}.hub-grid{gap:8px}.hub-obj small{display:none}}
/* no scrolling: the grid fills exactly the space under the header and everything scales with the viewport height */
.hub{overflow:hidden}
.hub-room{overflow:hidden;min-height:0;padding-bottom:max(18px,env(safe-area-inset-bottom,0px));justify-content:flex-start}
.hub-grid{flex:1;min-height:0;margin-top:2px;grid-template-rows:repeat(2,minmax(0,1fr));align-content:stretch}
.hub-grid .hub-obj{justify-content:center;min-height:0;overflow:hidden;padding:6px 8px 10px}
.hub-obj .ho-ico{width:min(12vw,19vh,128px);height:min(12vw,19vh,128px);font-size:min(8vw,12vh,88px)}
.hub-obj b{font-size:clamp(14px,min(2vw,3vh),20px)}
@media (max-height:560px){.hub-obj small,.hub-obj .ho-bar{display:none}}
@media (max-width:420px){.hub-obj .ho-ico{width:min(26vw,16vh);height:min(26vw,16vh)}}
.hub-obj.lock .ho-ico img,.hub-obj.soon .ho-ico img{filter:grayscale(.75) brightness(1.05) opacity(.8) drop-shadow(0 5px 4px rgba(90,50,0,.2))}
/* phones: 2 columns x 3 rows (desktop stays 3 x 2) */
@media (max-width:640px){
  .hub-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(3,minmax(0,1fr))}
  .hub-obj .ho-ico{width:min(34vw,15vh);height:min(34vw,15vh);font-size:min(20vw,9vh)}
  .hub-obj small{display:block}
  .hub.art .trh-t{width:clamp(150px,46vw,230px)}.hub.art .trh-s{width:clamp(170px,56vw,270px)}
}
@media (max-width:640px) and (max-height:620px){.hub-obj small,.hub-obj .ho-bar{display:none}}
@media (min-width:641px){.hub.art .trh-t{width:min(22vw,32vh,300px)}.hub.art .trh-s{width:min(26vw,38vh,360px)}.hub-obj .ho-ico{width:min(12vw,15vh,128px);height:min(12vw,15vh,128px)}}
/* cards never clip or overlap: the picture takes whatever height is left, text keeps its size */
.hub-grid .hub-obj{container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 8px 10px;overflow:hidden}
.hub-grid .hub-obj .ho-ico{flex:1 1 0;min-height:0;width:100%!important;height:auto!important;max-width:150px;font-size:clamp(28px,9cqh,70px)}
.hub-grid .hub-obj .ho-ico img{width:100%;height:100%;object-fit:contain}
.hub-grid .hub-obj>b,.hub-grid .hub-obj>small,.hub-grid .hub-obj>em,.hub-grid .hub-obj>.ho-bar{flex:none}
.hub-grid .hub-obj>b{font-size:clamp(13px,min(2vw,3vh),20px);line-height:1.25}
.hub-grid .hub-obj>em{margin-top:0}
@container (max-height:175px){.hub-obj>small,.hub-obj>.ho-bar{display:none}}
@container (max-height:120px){.hub-obj>em{display:none}}
@media (max-width:640px) and (max-height:620px){.hub-grid .hub-obj>b{font-size:13px}}
.hub-grid .hub-obj .ho-ico{position:relative;display:block;overflow:hidden}
.hub-grid .hub-obj .ho-ico img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.hub-grid .hub-obj .ho-ico i{position:absolute;inset:0;display:grid;place-items:center;font-style:normal}
@media (max-width:640px) and (max-height:720px){.hub.art .trh-t{width:min(46vw,24vh,230px)}.hub.art .trh-s{width:min(56vw,29vh,270px)}.hub .rd-ic{width:50px;height:50px}.hub .rd-ic img{width:32px!important;height:32px!important}.hub .rmx-top{padding-block:8px}}

/* locked: a big lock on the picture instead of a text pill */
.hub-grid .hub-obj .ho-ico .ho-lock{position:absolute;left:50%;top:54%;width:46%;height:auto;max-height:70%;right:auto;bottom:auto;transform:translate(-50%,-50%);object-fit:contain;filter:drop-shadow(0 3px 4px rgba(60,30,0,.4));pointer-events:none}
.hub-grid .hub-obj.lock .ho-ico img.ho-lock,.hub-grid .hub-obj.soon .ho-ico img.ho-lock{filter:drop-shadow(0 3px 4px rgba(60,30,0,.45))}
.hub-grid .hub-obj.lock .ho-ico img.ho-lock,.hub-grid .hub-obj.soon .ho-ico img.ho-lock{filter:sepia(1) saturate(3.2) hue-rotate(-8deg) brightness(1.02) drop-shadow(0 3px 4px rgba(60,30,0,.45))}
.hub-grid .hub-obj.lock .ho-ico,.hub-grid .hub-obj.soon .ho-ico{filter:none}
.hub-grid .hub-obj.lock .ho-ico img.ho-lock,.hub-grid .hub-obj.soon .ho-ico img.ho-lock{filter:drop-shadow(0 3px 4px rgba(60,30,0,.45));opacity:1}

/* ================= magic book (big open storybook, 3D cover + bending page turns) ================= */
.bookv .mb-body{max-width:1260px;padding:0 10px 8px;overflow:hidden;align-items:center;gap:6px}
.bookv .rmx-top{max-width:1260px}
.mb-stage{position:relative;flex:1;min-height:0;width:100%;display:grid;place-items:center;direction:ltr;-webkit-user-select:none;user-select:none;touch-action:pan-y}
.mb-clip{position:relative;width:var(--cw,100%);height:var(--bh,300px);overflow:var(--ov,visible)}
.mb-book{position:relative;width:var(--bw,600px);height:var(--bh,300px);margin-left:var(--ml,0);perspective:2600px}
.mb-under{position:absolute;inset:0}
.mb-open{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;filter:drop-shadow(0 22px 26px rgba(15,0,50,.55));pointer-events:none}
.mb-page{position:absolute;top:3%;width:42.4%;height:91%;overflow:hidden;container-type:size;color:#12323a;direction:rtl;cursor:pointer}
.mb-pL{left:6%}.mb-pR{left:51.6%}
.mb-sh{position:absolute;top:3%;height:91%;width:42.4%;pointer-events:none;opacity:0}
.mb-shL{left:6%;background:linear-gradient(270deg,rgba(60,30,0,.45),rgba(60,30,0,0) 65%)}
.mb-shR{left:51.6%;background:linear-gradient(90deg,rgba(60,30,0,.45),rgba(60,30,0,0) 65%)}
/* pages: everything scales with the page width (cqw) */
.mb-page .mb-leaf{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.4cqh;padding:7cqw 7cqw 8cqw;text-align:center;background:none!important;border:0;border-radius:0}
.mb-pR .mb-leaf{padding-left:11cqw}.mb-pL .mb-leaf{padding-right:11cqw}
.mb-page .bk-art{position:relative;flex:none;width:100%;height:auto;aspect-ratio:1.2;max-height:46cqh;border-radius:5cqw}
.mb-page .bk-e{font-size:20cqw}
.mb-page .bk-s{font-size:clamp(13px,6.2cqw,36px);line-height:1.5;margin:0}
.mb-page .sent span{padding:0 .6cqw;border-radius:2cqw}
.mb-page .bk-read{margin-top:1cqh;padding:1.6cqw 5cqw;font-size:clamp(12px,4.4cqw,22px);gap:2cqw}
.mb-page .bk-read img{width:5.5cqw;height:5.5cqw}
.mb-page .bk-n{position:absolute;bottom:3.5cqw;inset-inline-end:7cqw;font-size:4cqw;color:#a98550}
.mb-page .mb-ch h3,.mb-page h3{font-size:clamp(18px,8cqw,40px);margin:0}
.mb-page .mb-ch small{font-size:clamp(12px,4.6cqw,20px)}
.mb-page .mb-pat{font-size:clamp(18px,8.4cqw,40px);padding:1.6cqw 5cqw;border-width:.8cqw;border-radius:4cqw}
.mb-page .mb-st{font-size:clamp(12px,4.6cqw,20px);margin:0}
.mb-page .mb-st .ic{width:5cqw;height:5cqw;vertical-align:middle}
.mb-page .btn{font-size:clamp(13px,4.8cqw,22px);padding:2cqw 7cqw;margin-top:1cqh}
.mb-page .rmx-st img{width:7cqw;height:7cqw}
.mb-page .bk-star{font-size:18cqw}.mb-page .bk-star img{width:20cqw;height:auto}
.mb-page .mb-end p{font-size:clamp(12px,4.8cqw,20px);margin:0}
.mb-page .mb-ch.lock{filter:grayscale(.5);opacity:.85}
.mb-page .mb-s span.ink{border-radius:2.4cqw}
/* the turning leaf */
.mb-flip{position:absolute;top:3%;left:50%;width:var(--lw,260px);height:var(--ph,330px);transform-style:preserve-3d;pointer-events:none}
.mb-seg{position:absolute;top:0;height:100%;transform-origin:left center;transform-style:preserve-3d}
.mb-face{position:absolute;left:0;top:0;height:100%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#f7ede1}
.mb-fb{transform:rotateY(180deg)}
.mb-face .mb-page{top:0;width:var(--pw);height:var(--ph);cursor:default}
.mb-fs{position:absolute;inset:0;background:#2a1500;opacity:0;pointer-events:none}
/* the cover */
.mb-cover{position:absolute;left:50%;top:0;width:50%;height:100%;transform-origin:left center;transform-style:preserve-3d;will-change:transform}
.mb-cf{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:drop-shadow(0 18px 22px rgba(15,0,50,.5));pointer-events:none}
.mb-cb{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:rotateY(180deg);background:linear-gradient(90deg,#3f2486,#6a43b8 45%,#5a37a6);border-radius:12px 26px 26px 12px;box-shadow:inset 0 0 0 5px rgba(240,190,70,.45)}
.mb-cover.mb-pop{animation:mbpop .9s cubic-bezier(.34,1.56,.64,1) both}
@keyframes mbpop{0%{opacity:0;transform:scale(.7) rotate(-4deg)}100%{opacity:1;transform:none}}
.mb-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.mb-nav{direction:ltr;flex-direction:row;margin:2px 0}
.mb-chap{flex:none}
.mb-single .mb-page .bk-art{max-height:42cqh}
@media (max-width:640px){.mb-chap button{width:28px;height:28px;font-size:13px}.mb-chap{gap:4px}}
@media (prefers-reduced-motion:reduce){.mb-cover.mb-pop{animation:none}}
.mb-chap{flex-wrap:nowrap;gap:4px;max-width:100%;overflow:hidden}
.mb-chap button{flex:none;width:25px;height:25px;font-size:12px;border-width:1.5px}
.mb-chap button.rv img{width:14px;height:14px}
.bookv .rmx-top{padding-block:6px}.bookv .rmx-t b{font-size:17px}.bookv .rmx-t small{font-size:11px}
.bookv .rd-ic{width:44px;height:44px}
.mb-nav{margin:0}.mb-nav button{width:36px;height:36px}

/* ---- lesson drawn inside the book ---- */
.mb-page .mb-lmain.mb-leaf{display:block;padding:0}
.mb-lmain .les{position:static;inset:auto;display:block;background:none;padding:0;overflow:visible;animation:none;z-index:auto;isolation:auto;direction:rtl;color:#12323a}
.mb-lmain .les-sheet.mb-sheet{position:absolute;left:50%;top:50%;width:440px;min-height:0;max-width:none;margin:0;background:none;border-radius:0;box-shadow:none;padding:0;transform:translate(-50%,-50%);transform-origin:center;display:flex;flex-direction:column;text-align:initial}
.mb-sheet .les-top{padding-bottom:10px;border-bottom:0}
.mb-sheet .les-dock{position:static;min-height:60px}
.mb-sheet .les-body{padding:6px 0}
.mb-bub-in{display:none}
.mb-single .mb-bub-in{display:block;margin:0 0 8px;font-size:15px;text-align:center}
.mb-single .mb-bub-in::after{display:none}
.mb-page .mb-lside.mb-leaf{justify-content:flex-start;gap:3.5cqh;padding-top:9cqw;padding-bottom:8cqw}
.mb-lcat{flex:none;min-height:28cqh;display:flex;align-items:flex-end;justify-content:center;width:100%}
.mb-lcat>div{flex:none}
.mb-lside .les-bub{flex:none;width:100%;margin:0;background:#fff;border:.7cqw solid #f1ddb4;border-radius:5cqw;padding:3cqw 4cqw;font-size:clamp(13px,4.7cqw,22px);line-height:1.7;font-weight:800;color:#3d2a12;text-align:center;min-height:14cqh;display:grid;place-items:center}
.mb-lside .les-bub::after{display:none}
.mb-steps{list-style:none;margin:auto 0 0;padding:0;width:100%;display:flex;flex-direction:column;gap:1.8cqh;text-align:right}
.mb-steps li{display:flex;align-items:center;gap:3cqw;font-size:clamp(11px,4.2cqw,19px);font-weight:800;color:#a98550}
.mb-steps li i{flex:none;width:4.4cqw;height:4.4cqw;border-radius:50%;border:.7cqw solid #d9b878;background:#fff6e0}
.mb-steps li.done i{background:#2fa36b;border-color:#2fa36b}
.mb-steps li.now{color:#8a4b08}.mb-steps li.now i{background:#ff9418;border-color:#ff9418;box-shadow:0 0 0 1.1cqw #ffd29a}
.mb-inlesson #mbChap{pointer-events:none;opacity:.4}
/* story art: pictures of the words (no emoji) */
.mb-page .bk-wp{display:flex;align-items:center;justify-content:center;gap:3cqw;padding:3cqw;height:34cqh;aspect-ratio:auto;max-height:none;background:linear-gradient(180deg,#fff7e6,#ffeccb);border:.6cqw solid #f1ddb4}
.mb-page .bk-wp img{position:static;width:auto;height:100%;max-width:31%;object-fit:contain;filter:drop-shadow(0 1cqw 1cqw rgba(90,50,0,.25))}
.mb-page .bk-wp img:nth-child(n+4){display:none}
.mb-page .bk-art.none{display:none}
/* ink: words never touch each other */
.mb-page .mb-s{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.28em .62em}
.mb-page .mb-s span{display:inline-block;padding:.04em .28em}
.mb-page .mb-s span.ink{margin:.05em .1em}
.mb-inkimg .mb-s span.ink{background:none!important;box-shadow:none!important;animation:none;position:relative}
.mb-inkimg .mb-s span.ink::before{content:"";position:absolute;inset:-.3em -.5em;background:var(--ink) center/100% 100% no-repeat;pointer-events:none;filter:drop-shadow(0 .05em .05em rgba(20,0,50,.4))}
.mb-s span.ink:nth-child(3n+1){--ink:url(../img/book/ink1.webp)}
.mb-s span.ink:nth-child(3n+2){--ink:url(../img/book/ink2.webp)}
.mb-s span.ink:nth-child(3n){--ink:url(../img/book/ink3.webp)}
.mb-lcat{min-height:22cqh}
.mb-page .mb-lside.mb-leaf{gap:2.4cqh;padding-top:7cqw}
.mb-lside .les-bub{min-height:11cqh;padding:2.4cqw 4cqw;font-size:clamp(12px,4.4cqw,21px)}
.mb-steps{gap:1.2cqh}.mb-steps li{font-size:clamp(10px,3.9cqw,18px)}

/* ---- round 3 fixes ---- */
/* closed book: nothing but the cover (no purple box behind it) */
.mb-book.mb-closed .mb-under{visibility:hidden}
/* lesson buttons are never cut off */
.mb-lmain .les-sheet.mb-sheet{overflow:visible;padding-bottom:12px}
.mb-sheet .les-dock{padding-bottom:10px;overflow:visible}
/* small listen button under each word box */
.spk{display:inline-grid;place-items:center;width:30px;height:30px;margin-top:4px;border-radius:50%;background:linear-gradient(180deg,#5cc4ee,#2b9bd6);box-shadow:0 3px 0 #1b6f9c,inset 0 2px 0 rgba(255,255,255,.4);pointer-events:none}
.spk img{width:16px;height:16px;display:block;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25))}
.rx:active .spk,.wl-c:active .spk{transform:translateY(2px);box-shadow:0 1px 0 #1b6f9c}
/* header: title on the right, home + feedback together on the left (like the other screens) */
.bookv .rmx-t{order:1;flex:1;align-items:flex-start;text-align:right}
.bookv .rd-ic[data-back]{order:2}.bookv .rd-ic[data-fb]{order:3}
.bookv .rmx-top{justify-content:flex-start;gap:10px}
.bookv .rd-ic img{width:30px!important;height:30px!important;max-width:none!important;max-height:none!important;object-fit:contain}
/* chapter circles: number / star exactly in the middle */
.mb-chap{justify-content:center;width:100%}
.mb-chap button{display:grid;place-items:center;padding:0;line-height:1}
.mb-chap button img{display:block;width:15px;height:15px;margin:0;object-fit:contain}
.mb-book .mb-cover{background:none!important}
.bl-gap{line-height:1;text-align:center;display:inline-grid;place-items:center}
.rime-big{cursor:pointer}

/* ---- sentence pictures (scene if we have it, else the words' pictures) ---- */
.bk-art.sc .bk-w{display:none}
.bk-art .bk-scene{position:static!important;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;filter:none!important}
.mb-page .bk-art.sc{padding:0;height:auto;aspect-ratio:1.2;max-height:46cqh;display:block;overflow:hidden}
.les-art{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:150px;padding:8px;border-radius:20px;background:linear-gradient(180deg,#fff7e6,#ffeccb);border:2px solid #f1ddb4;position:relative;overflow:hidden}
.les-art .bk-w{position:static;width:auto;height:100%;max-width:31%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(90,50,0,.25))}
.les-art .bk-w:nth-child(n+4){display:none}
.les-art.sc{padding:0;height:auto;aspect-ratio:1.5;display:block}
.les-art.none{display:none}
/* ink on a page: say how to wipe it */
.mb-ink{align-self:center;margin-top:1.5cqh}
.mb-inknote{text-align:center;font-size:3.4cqw;font-weight:700;color:#8a6a3b;margin:1cqh 0 0;line-height:1.7}
.mb-inknote.lk{display:flex;align-items:center;justify-content:center;gap:1.5cqw}
.mb-inknote .ic{width:4.5cqw;height:4.5cqw}

/* ---- real-paper page turns (round 6): flat colours only, a gradient or inset line would repeat on every strip and show as stripes ---- */
.mb-book{perspective:5600px;perspective-origin:50% 45%}
.mb-face{background:#f8eedd}
.mb-fs{background:#2d1600}
.bookv.art .rmx-t{gap:2px}.bookv.art .trh-t{width:clamp(130px,18vw,230px)}.bookv.art .trh-s{width:clamp(160px,23vw,300px)}
@media (max-width:640px){.bookv.art .trh-t{width:clamp(120px,40vw,190px)}.bookv.art .trh-s{width:clamp(150px,50vw,240px)}}
.mb-s span.ink:nth-child(3n+3){--ink:url(../img/book/ink3.webp)}
.mb-inkimg .mb-s span.ink::before{inset:-.5em -.8em}
.mb-inkimg .mb-s span.ink{margin:0 .35em}
.bookv.art .trh-t{width:min(18vw,24vh,230px)}.bookv.art .trh-s{width:min(23vw,31vh,300px)}
@media (max-width:640px){.bookv.art .trh-t{width:min(40vw,22vh,190px)}.bookv.art .trh-s{width:min(50vw,28vh,240px)}}
.mb-inkimg .mb-s span.ink::before{inset:-.4em -.65em}
/* ink blots keep their shape: the splashy ends are never stretched, only the middle grows with the word (3-slice) */
.mb-inkimg .mb-s span.ink::before{inset:-.6em -1.05em;box-sizing:border-box;background:none;border:solid transparent;border-width:0 1.5em;border-image-source:var(--ink);border-image-slice:0 19% fill;border-image-width:0 1.5em;border-image-repeat:stretch}
.mb-inkimg .mb-s{line-height:2.1}
.mb-inkimg .mb-s span.ink{margin:0 .65em}
.mb-inkimg .mb-s span.ink::before{inset:-.35em -1.05em}
/* round 9: compact brush-stroke ink */
.mb-inkimg .mb-s{line-height:1.9}
.mb-inkimg .mb-s span.ink{margin:0 .5em}
.mb-inkimg .mb-s span.ink::before{inset:-.15em -.55em;border-width:0 .6em;border-image-slice:0 12% fill;border-image-width:0 .6em}
/* round 10: the inside of the opening cover is paper (the left half of the open-book picture), the turning leaf has the page's rounded outer corners */
.mb-cb{background:url(../img/book/open.webp) 0 0/200% 100% no-repeat!important;border-radius:0!important;box-shadow:none!important}
.mb-last .mb-ff{border-radius:0 2.6% 2.6% 0 / 0 2.2% 2.2% 0}
.mb-last .mb-fb{border-radius:2.6% 0 0 2.6% / 2.2% 0 0 2.2%}
.mb-fs{background:#3a1d00}
/* round 11: whole picture always visible (never cropped); the turning leaf stays inside the book (almost no perspective growth) */
.mb-page .bk-art.sc{aspect-ratio:1;height:46cqh;width:auto;max-width:100%;max-height:none;margin-inline:auto}
.mb-page .bk-art.sc .bk-scene{object-fit:contain!important}
.mb-single .mb-page .bk-art.sc{height:42cqh}
.les-art.sc{aspect-ratio:1;width:200px;height:200px;margin-inline:auto}
.les-art.sc .bk-scene{object-fit:contain!important}
.mb-book{perspective:14000px;perspective-origin:50% 50%}

/* round 12: the leaf is painted with the book's own paper colours (sampled from the open-book picture), so it is identical to the page it lifts from */
.mb-ff{background-image:linear-gradient(90deg,rgb(135,112,76) 0.0%,rgb(233,221,200) 5.9%,rgb(240,231,214) 11.8%,rgb(243,234,220) 17.6%,rgb(245,236,222) 23.5%,rgb(245,236,223) 29.4%,rgb(245,237,223) 35.3%,rgb(244,236,223) 41.2%,rgb(244,236,222) 47.1%,rgb(244,235,222) 52.9%,rgb(244,235,221) 58.8%,rgb(243,235,220) 64.7%,rgb(244,235,220) 70.6%,rgb(243,234,220) 76.5%,rgb(243,234,220) 82.4%,rgb(243,234,220) 88.2%,rgb(243,234,220) 94.1%,rgb(242,234,219) 100.0%);background-repeat:no-repeat}
.mb-fb{background-image:linear-gradient(90deg,rgb(243,234,220) 0.0%,rgb(243,234,219) 5.9%,rgb(243,234,219) 11.8%,rgb(243,234,219) 17.6%,rgb(243,234,220) 23.5%,rgb(243,234,220) 29.4%,rgb(243,234,220) 35.3%,rgb(243,234,220) 41.2%,rgb(243,235,220) 47.1%,rgb(244,235,221) 52.9%,rgb(244,236,222) 58.8%,rgb(244,236,223) 64.7%,rgb(245,236,223) 70.6%,rgb(245,236,223) 76.5%,rgb(244,235,221) 82.4%,rgb(242,233,217) 88.2%,rgb(235,224,204) 94.1%,rgb(161,139,102) 100.0%);background-repeat:no-repeat}
/* round 13: one flat sheet that turns as a whole (no folds); soft shading from the hinge */
.mb-ff .mb-fs{background:linear-gradient(90deg,rgba(40,20,0,.95),rgba(40,20,0,.18) 70%,rgba(40,20,0,.35))}
.mb-fb .mb-fs{background:linear-gradient(270deg,rgba(40,20,0,.95),rgba(40,20,0,.18) 70%,rgba(40,20,0,.35))}
.mb-book{perspective:12000px}
/* round 14: flat 2D page turn (no 3D, nothing can lift from the spine) */
.mb-flip.mb-2d,.mb-flip.mb-2d .mb-seg{transform-style:flat}
.mb-flip.mb-2d .mb-face{backface-visibility:visible;-webkit-backface-visibility:visible}
.mb-flip.mb-2d .mb-seg{box-shadow:0 0 18px rgba(40,20,0,.18)}
.mb-flip.mb-2d .mb-ff .mb-fs{background:linear-gradient(90deg,rgba(40,20,0,.55),rgba(40,20,0,.12) 45%,rgba(255,250,235,.0) 80%,rgba(40,20,0,.25))}
.mb-flip.mb-2d .mb-fb .mb-fs{background:linear-gradient(270deg,rgba(40,20,0,.55),rgba(40,20,0,.12) 45%,rgba(255,250,235,.0) 80%,rgba(40,20,0,.25))}
/* round 15: the turning sheet has no paper of its own — it is drawn on the book's real paper, so it can never stand out from the spine */
.mb-flip.mb-2d .mb-face{background:none!important;border-radius:0!important;box-shadow:none!important}
.mb-flip.mb-2d .mb-seg{box-shadow:none}
.mb-flip.mb-2d .mb-ff .mb-fs{background:linear-gradient(90deg,rgba(60,30,0,.35),rgba(60,30,0,.06) 40%,rgba(60,30,0,0) 75%,rgba(60,30,0,.18))}
.mb-flip.mb-2d .mb-fb .mb-fs{background:linear-gradient(270deg,rgba(60,30,0,.35),rgba(60,30,0,.06) 40%,rgba(60,30,0,0) 75%,rgba(60,30,0,.18))}
.mb-flip.mb-2d .mb-ff .mb-fs{background:linear-gradient(90deg,rgba(60,30,0,.32),rgba(60,30,0,.08) 35%,rgba(60,30,0,0) 85%)}
.mb-flip.mb-2d .mb-fb .mb-fs{background:linear-gradient(90deg,rgba(60,30,0,0) 15%,rgba(60,30,0,.08) 65%,rgba(60,30,0,.32))}
/* the free edge of the turning sheet + the soft shadow it casts on the page beside it (kept inside the page) */
.mb-flip.mb-2d .mb-seg::after{content:"";position:absolute;top:0;bottom:0;right:0;width:calc(3px * var(--ik,1));background:linear-gradient(90deg,rgba(255,252,240,0),rgba(150,120,80,.55));opacity:var(--ed,0);pointer-events:none}
.mb-flip.mb-2d .mb-seg::before{content:"";position:absolute;top:0;bottom:0;left:100%;width:calc(26px * var(--ik,1));max-width:20000px;background:linear-gradient(90deg,rgba(60,30,0,.28),rgba(60,30,0,0));opacity:var(--ed,0);pointer-events:none}
.mb-flip.mb-2d{overflow:visible}
/* round 16: no shadows at all while a page turns */
.mb-flip.mb-2d .mb-fs,.mb-flip.mb-2d .mb-seg::before{display:none!important}
.mb-flip.mb-2d ~ * .mb-sh,#mbShL,#mbShR{display:none!important}
.mb-flip.mb-2d .mb-seg::after{background:linear-gradient(90deg,rgba(255,252,240,0),rgba(170,145,105,.35))}
/* round 17: shadows only away from the spine — shading near the sheet's free edge and a soft shadow it casts on the outer part of the page */
.mb-flip.mb-2d .mb-fs{display:block!important}
.mb-flip.mb-2d .mb-ff .mb-fs{background:linear-gradient(90deg,rgba(60,30,0,0) 45%,rgba(60,30,0,.10) 75%,rgba(60,30,0,.26))!important}
.mb-flip.mb-2d .mb-fb .mb-fs{background:linear-gradient(270deg,rgba(60,30,0,0) 45%,rgba(60,30,0,.10) 75%,rgba(60,30,0,.26))!important}
.mb-flip.mb-2d .mb-seg::before{display:block!important;width:calc(34px * var(--ik,1));background:linear-gradient(90deg,rgba(60,30,0,.30),rgba(60,30,0,.10) 40%,rgba(60,30,0,0));opacity:var(--cs,0)}
.mb-flip.mb-2d .mb-seg::after{background:linear-gradient(90deg,rgba(255,252,240,0),rgba(150,120,80,.5));opacity:var(--cs,0)}

/* ===================== level 3: the sticker album ===================== */
.albv{background:
  radial-gradient(circle at 12% 18%,#fff6 0 5px,transparent 6px),radial-gradient(circle at 84% 12%,#fff5 0 4px,transparent 5px),
  radial-gradient(circle at 92% 70%,#fff5 0 6px,transparent 7px),radial-gradient(circle at 6% 82%,#fff4 0 4px,transparent 5px),
  linear-gradient(160deg,#ffe3ee,#ffd0e2 50%,#f2bddf);color:#3b1630}
.albv .rmx-top{max-width:1260px}
.albv .rmx-t b{color:#b0246a}.albv .rmx-t small{color:#7a3a5c;opacity:1}
.al-body{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:4px 14px 12px;position:relative}
/* the album: a pink padded cover with two cream pages and spiral rings in the middle */
.al-album{--pad:clamp(10px,1.4vw,18px);position:relative;display:flex;flex-direction:row;width:min(1120px,96vw,calc((100vh - 210px) * 1.72));aspect-ratio:1.72/1;
  padding:var(--pad);border-radius:26px;background:linear-gradient(145deg,#ff6fa5,#e8457d 55%,#c92f68);
  box-shadow:0 18px 34px rgba(120,20,70,.32),inset 0 2px 0 #ffffff55,inset 0 -4px 0 #0002}
.al-album::before{content:"";position:absolute;inset:6px;border-radius:21px;border:2px dashed #ffffff7a;pointer-events:none}
.al-pg{position:relative;flex:1;min-width:0;border-radius:12px;overflow:hidden;container-type:size;
  background:radial-gradient(circle,#f3d9c8 1.1px,transparent 1.6px) 0 0/18px 18px,linear-gradient(180deg,#fffdf6,#fff6e6);
  box-shadow:inset 0 0 0 1px #00000010,0 2px 0 #0001}
.al-pR{border-radius:6px 12px 12px 6px;box-shadow:inset 14px 0 18px -14px #8a4a3044}
.al-pL{border-radius:12px 6px 6px 12px;box-shadow:inset -14px 0 18px -14px #8a4a3044}
.al-ring{flex:none;width:clamp(16px,2.2vw,28px);margin:0 -2px;position:relative;z-index:2;
  background:radial-gradient(ellipse 46% 36% at 50% 50%,transparent 52%,#b9bfc9 56%,#eef1f5 66%,#9aa1ad 76%,transparent 80%) 0 0/100% 34px repeat-y}
.al-album.turn .al-pg>*,.al-album.turnb .al-pg>*{animation:alIn .38s cubic-bezier(.2,.8,.3,1) both}
.al-album.turnb .al-pg>*{animation-name:alInB}
@keyframes alIn{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes alInB{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}

/* right page: what this page of the album is about */
.al-info{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.2cqh;padding:8cqh 7cqw 6cqh;text-align:center}
.al-tape{position:absolute;top:4cqh;left:50%;width:34cqw;height:7cqh;transform:translateX(-50%) rotate(-3deg);
  background:repeating-linear-gradient(45deg,#ffd76a 0 10px,#ffe9a6 10px 20px);opacity:.9;box-shadow:0 2px 3px #0001;border-radius:2px}
.al-no{font-weight:900;color:#b0246a;font-size:clamp(13px,4.2cqw,22px);margin-top:4cqh}
.al-info h3{margin:0;font-size:clamp(20px,8.4cqw,46px);font-weight:900;color:#17424a;line-height:1.15;letter-spacing:.5px}
.al-sub{margin:0;font-size:clamp(14px,5cqw,26px);font-weight:900;color:#e0590f;background:#fff;border:2px dashed #ffb27a;border-radius:14px;padding:.3em .9em}
.al-cnt{margin:1cqh 0 0;font-size:clamp(13px,4cqw,20px);font-weight:800;color:#5b3a4d}.al-cnt b{color:#b0246a;font-size:1.25em}
.al-bar{display:block;width:62%;height:clamp(8px,1.8cqh,12px);border-radius:99px;background:#f3dbe6;overflow:hidden}
.al-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#ff7aa8,#e8457d)}
.al-go{margin-top:1.5cqh;font-size:clamp(15px,4.6cqw,22px);padding:.55em 1.4em;border-radius:18px;background:var(--sun,#ffb02e);color:#2b1503;box-shadow:0 5px 0 #b96612;font-weight:900}
.al-go:active{transform:translateY(3px);box-shadow:0 2px 0 #b96612}
.al-lock{display:flex;align-items:center;gap:6px;font-weight:800;color:#7a5a6a;font-size:clamp(13px,4cqw,19px);cursor:pointer}.al-lock img{width:1.6em;height:1.6em}
.al-info .rmx-st img{width:clamp(22px,7cqw,40px);height:auto}
.al-info.lock h3,.al-info.lock .al-sub{filter:grayscale(.7);opacity:.7}

/* left page: the sticker places */
.al-side{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4cqh 4cqw}
.al-hd{margin:0 0 2.5cqh;font-weight:800;color:#7a3a5c;font-size:clamp(12px,3.6cqw,18px)}
.al-grid{--gap:2.4cqw;display:grid;grid-template-columns:repeat(var(--c),1fr);gap:var(--gap);
  --sz:min(calc((92cqw - (var(--c) - 1) * var(--gap)) / var(--c)),calc((80cqh - (var(--r) - 1) * var(--gap)) / var(--r) - 5cqh));justify-content:center}
.al-st{width:var(--sz);display:flex;flex-direction:column;align-items:center;gap:.6cqh;border:0;background:none;padding:0;cursor:pointer;font:inherit}
.al-st b{font-size:clamp(11px,calc(var(--sz) * .17),20px);font-weight:900;color:#b9a2ae;direction:ltr}
.al-card{position:relative;display:grid;place-items:center;width:var(--sz);height:var(--sz);border-radius:18%;border:2.5px dashed #e3b6c9;background:#fff8fb80}
.al-q{font-style:normal;font-weight:900;color:#e7c4d3;font-size:calc(var(--sz) * .4)}
.al-side.lock .al-card{border-color:#dcc9d1}
.al-st.on b{color:#17424a}
.al-st.on .al-card{border:calc(var(--sz) * .055) solid #fff;background:#fff;transform:rotate(var(--t));overflow:hidden;
  box-shadow:0 3px 0 #0000000d,0 6px 12px rgba(120,40,80,.22)}
.al-st.on .al-card img{width:100%;height:100%;object-fit:contain;border-radius:12%}
.al-emo{font-style:normal;font-size:calc(var(--sz) * .55);line-height:1}
.al-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(125deg,transparent 30%,#ffffff8c 42%,transparent 54%);background-size:250% 100%;background-position:120% 0}
.al-st.on:hover .al-shine,.al-st.say .al-shine{animation:alShine .7s ease}
@keyframes alShine{from{background-position:120% 0}to{background-position:-60% 0}}
.al-st.say .al-card{animation:alWig .5s ease}
@keyframes alWig{0%,100%{transform:rotate(var(--t)) scale(1)}35%{transform:rotate(calc(var(--t) * -1)) scale(1.1)}70%{transform:rotate(var(--t)) scale(1.04)}}
/* first time: each sticker flies in and is pressed onto the page */
.al-side.fresh .al-st.on .al-card{animation:alStick .6s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d)}
.al-side.fresh .al-st.on b{animation:alFade .4s ease both;animation-delay:calc(var(--d) + .3s)}
@keyframes alStick{0%{opacity:0;transform:translateY(-30%) rotate(calc(var(--t) * -3)) scale(1.7);box-shadow:0 30px 30px rgba(120,40,80,.25)}
  60%{opacity:1;transform:rotate(var(--t)) scale(.94)}100%{opacity:1;transform:rotate(var(--t)) scale(1)}}
@keyframes alFade{from{opacity:0}to{opacity:1}}
/* review page: one big gold medal */
.al-medal{gap:3cqh}
.al-mslot{position:relative;width:min(46cqw,52cqh);height:min(46cqw,52cqh);border-radius:50%;border:3px dashed #e3b6c9;display:grid;place-items:center;background:#fff8fb80;overflow:hidden}
.al-mslot .al-q{font-size:min(20cqw,22cqh)}
.al-mslot.on{border:0;background:radial-gradient(circle,#fff6d0,#ffe28a 60%,#ffcf4a);box-shadow:0 0 0 8px #fff,0 10px 22px rgba(160,90,0,.3)}
.al-mslot.on img{width:78%;height:auto}
.al-medal.fresh .al-mslot.on{animation:alStick .8s cubic-bezier(.3,1.4,.5,1) both;--t:0deg}
/* chips + nav under the album */
.al-foot{display:flex;flex-direction:column;align-items:center;gap:6px}
.al-chips{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;max-width:520px}
.al-chips button{width:34px;height:34px;border-radius:50%;border:2px solid #ffffffaa;background:#ffffff66;color:#7a3a5c;font:inherit;font-weight:900;cursor:pointer;display:grid;place-items:center;padding:0}
.al-chips button img{width:22px;height:22px}
.al-chips button.done{background:#2fa36b;border-color:#2fa36b;color:#fff}.al-chips button.now{background:#ff9418;border-color:#fff;color:#fff}
.al-chips button.lock{opacity:.6}.al-chips button.cur{outline:3px solid #b0246a;outline-offset:2px}
.albv .bk-nav{margin:0}.albv .bk-nav span{color:#7a3a5c}
.albv .bk-nav button{display:grid;place-items:center;padding:0}.albv .bk-nav button img{width:24px;height:24px}
.al-toast{position:absolute;left:50%;top:6px;transform:translate(-50%,-8px);background:#3b1630e6;color:#fff;font-weight:800;padding:8px 16px;border-radius:14px;opacity:0;pointer-events:none;transition:.25s;z-index:5;white-space:nowrap;max-width:92vw;overflow:hidden;text-overflow:ellipsis}
.al-toast.on{opacity:1;transform:translate(-50%,0)}
/* phones / narrow: one column, the info card on top and the stickers under it */
@media (max-width:760px),(max-aspect-ratio:1/1){
  .al-body{justify-content:flex-start;overflow:auto}
  .al-album{flex-direction:column;width:min(560px,96vw);aspect-ratio:auto;gap:0}
  .al-ring{width:auto;height:clamp(16px,4vw,24px);margin:-2px 0;background:radial-gradient(ellipse 36% 46% at 50% 50%,transparent 52%,#b9bfc9 56%,#eef1f5 66%,#9aa1ad 76%,transparent 80%) 0 0/34px 100% repeat-x}
  .al-pR{flex:none;height:min(48vw,260px);border-radius:12px 12px 6px 6px}
  .al-pL{flex:none;height:min(110vw,560px);border-radius:6px 6px 12px 12px}
}
.al-info h3.long{font-size:clamp(17px,6.2cqw,34px);white-space:nowrap}
/* metal spiral rings over the gutter */
.al-ring{background:none;display:flex;flex-direction:column;justify-content:space-around;align-items:center;padding:2% 0}
.al-ring i{position:relative;display:block;width:clamp(34px,4.6vw,54px);height:clamp(9px,1.1vw,13px);border-radius:99px;
  background:linear-gradient(180deg,#f7f9fb,#c3c9d2 45%,#8d95a2 55%,#e6eaef);box-shadow:0 2px 2px rgba(0,0,0,.25)}
.al-ring i::before,.al-ring i::after{content:"";position:absolute;top:50%;width:clamp(7px,.8vw,10px);height:clamp(7px,.8vw,10px);border-radius:50%;background:#6d4a5a;transform:translateY(-50%);z-index:-1;box-shadow:inset 0 1px 2px #000a}
.al-ring i::before{left:-3px}.al-ring i::after{right:-3px}
.al-toast{top:auto;bottom:86px}
@media (max-width:760px),(max-aspect-ratio:1/1){
  .al-ring{flex-direction:row;padding:0 3%}
  .al-ring i{width:clamp(9px,2.4vw,13px);height:clamp(30px,8vw,46px);background:linear-gradient(90deg,#f7f9fb,#c3c9d2 45%,#8d95a2 55%,#e6eaef)}
  .al-ring i::before{left:50%;top:-3px;transform:translateX(-50%)}.al-ring i::after{left:50%;right:auto;top:auto;bottom:-3px;transform:translateX(-50%)}
  .al-ring i:nth-child(n+9){display:none}
  .al-toast{position:fixed;bottom:20px}
}
@media (max-width:760px),(max-aspect-ratio:1/1){
  .al-pR{height:auto;container-type:inline-size}
  .al-pR .al-info{position:relative;inset:auto;gap:8px;padding:34px 14px 18px}
  .al-pR .al-tape{top:8px;height:18px;width:38%}
  .al-pR .al-no{margin-top:0}
  .al-pR .al-bar{height:9px}
  .al-pR .al-go{margin-top:4px}
  .al-pL{height:min(92vw,460px)}
}
/* album header: title on the right, home + feedback together on the left (same as the magic book) */
.albv .rmx-t{order:1;flex:1;align-items:flex-start;text-align:right}
.albv .rd-ic[data-back]{order:2}.albv .rd-ic[data-fb]{order:3}
.albv .rmx-top{justify-content:flex-start;gap:10px}
.albv .rd-ic img{width:30px!important;height:30px!important;max-width:none!important;max-height:none!important;object-fit:contain}
.albv.art .rmx-t{gap:2px}.albv.art .trh-t{width:min(18vw,24vh,230px)}.albv.art .trh-s{width:min(23vw,31vh,300px)}
@media (max-width:640px){.albv.art .trh-t{width:min(40vw,22vh,190px)}.albv.art .trh-s{width:min(50vw,28vh,240px)}}

/* ===================== level 4: Maloosam's trip (sea map + passport) ===================== */
.tripv{background:linear-gradient(180deg,#bfeaff,#d9f4ff 40%,#ffeccc);color:#123a4a}
.tripv .rmx-top{max-width:1260px;justify-content:flex-start;gap:10px}
.tripv .rmx-t{order:1;flex:1;align-items:flex-start;text-align:right}
.tripv .rmx-t b{color:#0b6aa2}.tripv .rmx-t small{color:#2f5d70;opacity:1}
.tripv .rd-ic[data-back]{order:2}.tripv .rd-ic[data-fb]{order:3}
.tripv .rd-ic img{width:30px!important;height:30px!important;max-width:none!important;max-height:none!important;object-fit:contain}
.tripv.art .rmx-t{gap:2px}.tripv.art .trh-t{width:min(18vw,24vh,230px)}.tripv.art .trh-s{width:min(26vw,31vh,340px)}
.tp-body{flex:1;min-height:0;display:flex;gap:18px;align-items:center;justify-content:center;padding:4px 16px 14px;max-width:1260px;width:100%;margin:0 auto;position:relative}
.tp-mapw{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.tp-map{position:relative;width:min(100%,calc((100vh - 190px) * 1.5));aspect-ratio:1.5/1;border-radius:28px;overflow:hidden;container-type:size;
  border:6px solid #fff;box-shadow:0 14px 30px rgba(10,70,110,.25);
  background:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='60'%3E%3Cpath d='M8 20q6-6 12 0t12 0M52 46q6-6 12 0t12 0' fill='none' stroke='%23ffffff' stroke-opacity='.45' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") 0 0/90px 60px,
   radial-gradient(ellipse at 30% 20%,#9ee6ff,transparent 60%),radial-gradient(ellipse at 80% 85%,#3aa8dc,transparent 55%),linear-gradient(160deg,#7fd6f5,#4fb6e3)}
.tripv.tp-art .tp-map{background:url(../img/trip/map.webp) center/cover no-repeat}
.tp-route{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.tp-route path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.tp-r2{stroke:#fff;stroke-width:4;stroke-dasharray:2 11;opacity:.95}
.tp-r1{stroke:#ff8a1f;stroke-width:5;stroke-dasharray:14 9;filter:drop-shadow(0 1px 0 #fff)}
/* islands */
.tp-stop{--s:min(11.5cqw,19cqh);position:absolute;width:var(--s);height:var(--s);transform:translate(-50%,-50%);border:0;padding:0;background:none;cursor:pointer;font:inherit;z-index:1}
.tp-isl{position:absolute;left:50%;top:58%;width:170%;height:95%;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(ellipse at 50% 42%,#ffe9b0 0 52%,#f2cf82 62%,rgba(255,255,255,.55) 66%,rgba(255,255,255,0) 72%)}
.tp-pin{position:absolute;inset:0;border-radius:50%;background:#fff;border:max(3px,.45cqw) solid #fff;box-shadow:0 5px 0 #0c6c9b33,0 8px 14px rgba(0,60,100,.25);overflow:hidden;display:grid;place-items:center}
.tp-pin img{width:100%;height:100%;object-fit:cover}
.tp-emo{font-style:normal;font-size:calc(var(--s) * .55);line-height:1}
.tp-stop b{position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:clamp(10px,1.7cqw,16px);font-weight:900;color:#123a4a;
  background:#fffbf0;padding:1px 8px;border-radius:99px;box-shadow:0 2px 0 #0001}
.tp-stop.lock .tp-pin{filter:grayscale(.85) brightness(1.05);opacity:.75}.tp-stop.lock b{opacity:.7}
.tp-lock{position:absolute;right:-10%;bottom:-6%;width:42%;height:42%}.tp-lock img{width:100%;height:100%}
.tp-stop.now .tp-pin{border-color:#ffb02e;animation:tpPulse 1.6s ease-in-out infinite}
@keyframes tpPulse{0%,100%{box-shadow:0 0 0 0 #ffb02e88,0 8px 14px rgba(0,60,100,.25)}50%{box-shadow:0 0 0 max(8px,1.3cqw) #ffb02e00,0 8px 14px rgba(0,60,100,.25)}}
.tp-stop.sel .tp-pin{outline:max(3px,.5cqw) solid #0b6aa2;outline-offset:max(2px,.3cqw)}
.tp-stop.lh .tp-pin{background:radial-gradient(circle,#fff8d6,#ffe07a)}.tp-stop.lh .tp-pin img{object-fit:contain;width:76%;height:76%}
/* passport stamp on finished islands */
.tp-stamp{position:absolute;left:-14%;top:-14%;width:48%;height:48%;border-radius:50%;background:#e8455a;border:3px dashed #fff;box-shadow:0 0 0 2px #e8455a,0 3px 6px #0004;display:grid;place-items:center;transform:rotate(-14deg)}
.tp-stamp img{width:62%;height:62%;filter:brightness(0) invert(1)}
.tp-stamp.fresh{animation:tpStamp .55s cubic-bezier(.3,1.5,.5,1) .35s both}
@keyframes tpStamp{0%{opacity:0;transform:scale(2.6) rotate(-40deg)}70%{opacity:1;transform:scale(.88) rotate(-10deg)}100%{transform:scale(1) rotate(-14deg)}}
/* the suitcase that travels */
.tp-mark{position:absolute;width:min(9cqw,15cqh);transform:translate(-50%,-118%);z-index:3;pointer-events:none;transition:none}
.tp-mark img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 5px rgba(0,40,70,.35));animation:tpBob 1.8s ease-in-out infinite}
.tp-mark.go img{animation:tpHop .42s ease-in-out infinite}
@keyframes tpBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8%) rotate(3deg)}}
@keyframes tpHop{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-22%) rotate(6deg)}}
.tp-pass{display:flex;align-items:center;gap:8px;background:#fff;border-radius:99px;padding:5px 14px 5px 8px;box-shadow:0 3px 0 #0b6aa222;font-weight:800;color:#2f5d70}
.tp-pass b{color:#0b6aa2}
.tp-pbook{width:22px;height:28px;border-radius:4px;background:linear-gradient(90deg,#174f8a,#2369b0);box-shadow:inset 3px 0 0 #0f3b6b;position:relative}
.tp-pbook::after{content:"";position:absolute;inset:8px 5px;border-radius:50%;border:2px solid #f2c54b}
/* postcard: the chosen stop */
.tp-card{flex:none;width:min(380px,34vw);max-height:100%;overflow:auto;align-self:center}
.tp-card.in .tp-pc{animation:alIn .35s cubic-bezier(.2,.8,.3,1) both}
.tp-pc{position:relative;background:#fffdf6;border-radius:22px;padding:16px 16px 18px;box-shadow:0 12px 26px rgba(10,70,110,.2);border:3px solid #fff;
  background-image:repeating-linear-gradient(135deg,#e8455a 0 12px,#fff 12px 22px,#2369b0 22px 34px,#fff 34px 44px);background-size:100% 8px;background-repeat:no-repeat;background-position:0 0;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.tp-ph{display:flex;align-items:center;gap:12px;width:100%;margin-top:6px;position:relative}
.tp-pimg{flex:none;width:64px;height:64px;border-radius:16px;overflow:hidden;background:#e9f7ff;display:grid;place-items:center;box-shadow:0 3px 0 #0001}
.tp-pimg img{width:100%;height:100%;object-fit:cover}.tp-pimg .tp-emo{font-size:36px}
.tp-pc.lh .tp-pimg{background:radial-gradient(circle,#fff8d6,#ffe07a)}.tp-pc.lh .tp-pimg img{object-fit:contain;width:80%;height:80%}
.tp-ph div{text-align:right;display:flex;flex-direction:column}
.tp-ph small{font-weight:800;color:#0b6aa2}.tp-ph h3{margin:0;font-size:22px;font-weight:900}
.tp-pst{position:absolute;left:0;top:50%;width:52px;height:52px;margin-top:-26px;border-radius:50%;background:#e8455a;border:3px dashed #fff;box-shadow:0 0 0 2px #e8455a;display:grid;place-items:center;transform:rotate(-14deg)}
.tp-pst img{width:60%;filter:brightness(0) invert(1)}
.tp-pat{margin:2px 0 0;font-size:24px;font-weight:900;color:#123a4a;letter-spacing:.3px}
.tp-sub{margin:0;font-weight:900;color:#e0590f;background:#fff;border:2px dashed #ffb27a;border-radius:12px;padding:.2em .8em}
.tp-svh{margin:4px 0 0;font-size:13px;font-weight:800;color:#2f5d70}
.tp-sv{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px;width:100%;max-height:min(30vh,250px);overflow:auto;padding:4px 2px}
.tp-w{border:0;background:#fff;border-radius:12px;padding:4px 2px 3px;box-shadow:0 2px 0 #0b6aa21f,0 2px 6px #0b6aa214;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center}
.tp-w span{width:48px;height:48px;display:grid;place-items:center;overflow:hidden;border-radius:9px}
.tp-w span img{width:100%;height:100%;object-fit:contain}.tp-w .tp-emo{font-size:30px}
.tp-w b{font-size:12px;font-weight:900;color:#123a4a}
.tp-w:not(.on) span{filter:grayscale(1);opacity:.45}.tp-w:not(.on) b{color:#9bb0ba}
.tp-w.say{animation:alWig .5s ease;--t:0deg}
.tp-go{margin-top:6px}
.tp-pc .rmx-st img{width:30px;height:auto}
.tp-pc.lock .tp-pat,.tp-pc.lock .tp-sub,.tp-pc.lock .tp-pimg{filter:grayscale(.7);opacity:.7}
.tp-toast{top:auto;bottom:16px}
/* tall screens: map on top (islands zig-zag down), postcard under it */
.tripv.tp-tall .tp-body,.tp-body:has(.tp-map){}
@media (max-width:820px),(max-aspect-ratio:1/1){
  .tp-body{flex-direction:column;overflow:auto;justify-content:flex-start;align-items:stretch}
  .tp-mapw{height:auto;flex:none}
  .tp-map{width:100%;aspect-ratio:auto;height:min(150vw,900px)}
  .tp-card{width:100%;max-height:none}
  .tp-stop{--s:min(19cqw,9.5cqh)}
  .tp-stop b{font-size:clamp(11px,3.4cqw,16px)}
  .tp-mark{width:min(15cqw,8cqh)}
  .tp-toast{position:fixed}
  .tripv.art .trh-t{width:min(40vw,22vh,190px)}.tripv.art .trh-s{width:min(56vw,28vh,280px)}
}
.tp-stamp,.tp-pst{background:#fff;border:3px dashed #e8455a;box-shadow:0 0 0 2px #fff,0 3px 6px #0003}
.tp-stamp img,.tp-pst img{filter:none}
@media (max-width:820px),(max-aspect-ratio:1/1){.tp-map{height:min(165vw,980px)}}
/* lock sits inside the island picture, small, at the bottom of the circle */
.tp-pin .tp-lock{position:absolute;left:50%;right:auto;bottom:6%;top:auto;width:34%;height:34%;transform:translateX(-50%);display:grid;place-items:center;
  border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 2px 4px #0002;z-index:1}
.tp-pin .tp-lock img{width:78%;height:78%;object-fit:contain}
@media (max-width:820px),(max-aspect-ratio:1/1){
  .tp-mapw{align-items:center}
  .tp-map{width:min(100%,540px);height:auto;aspect-ratio:.6/1}
  .tp-card{width:min(100%,540px);align-self:center}
  .tp-sv{max-height:none}
}
.tripv.tp-tall.tp-artt .tp-map{background:url(../img/trip/map-tall.webp) center/cover no-repeat}
@media (max-width:820px),(max-aspect-ratio:1/1){.tp-mark{width:min(13cqw,7cqh)}}
/* finished stops get a postage STAMP (تمبر): a small tilted square stamp with a perforated white edge */
.tp-stamp,.tp-pst{border-radius:4px;background:#e8455a;border:3px dotted #fff;box-shadow:0 0 0 3px #e8455a,0 4px 6px #0003;
  background-image:radial-gradient(circle at 50% 50%,#ff6f80,#e8455a 70%)}
.tp-stamp img,.tp-pst img{filter:brightness(0) invert(1);width:58%;height:58%}
.tp-stamp{width:42%;height:42%;left:-10%;top:-10%;transform:rotate(-10deg)}
.tp-pst{width:46px;height:46px;margin-top:-23px;transform:rotate(-10deg)}
@keyframes tpStamp{0%{opacity:0;transform:scale(2.6) rotate(-40deg)}70%{opacity:1;transform:scale(.88) rotate(-6deg)}100%{transform:scale(1) rotate(-10deg)}}
.tp-stamp,.tp-pst{background:#fff;background-image:none;border:3px dotted #e8455a;box-shadow:0 0 0 3px #fff,0 0 0 5px #e8455a33,0 4px 6px #0003}
.tp-stamp img,.tp-pst img{filter:none;width:66%;height:66%}
/* round tags (img/trip/tag-*.webp): the island picture IS the tag; grey until it is earned */
.tp-stop{--s:min(13cqw,21cqh)}
.tp-pin.tg{background:none;border:0;box-shadow:none;overflow:visible;border-radius:50%}
.tp-pin.tg .tp-tag{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 5px 4px rgba(0,50,90,.3))}
.tp-stop.now .tp-pin.tg{animation:none}
.tp-stop.now .tp-pin.tg .tp-tag{animation:tpTagNow 1.6s ease-in-out infinite}
@keyframes tpTagNow{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.tp-stop.now .tp-pin.tg .tp-tag,.tp-stop.lock .tp-pin.tg .tp-tag{filter:grayscale(1) brightness(1.08) contrast(.85) drop-shadow(0 5px 4px rgba(0,50,90,.25))}
.tp-stop.now .tp-pin.tg .tp-tag{filter:grayscale(.55) drop-shadow(0 0 10px #ffd34d) drop-shadow(0 5px 4px rgba(0,50,90,.25))}
.tp-stop.lock .tp-pin.tg{filter:none;opacity:1}
.tp-stop.sel .tp-pin.tg{outline:none}
.tp-stop.sel .tp-pin.tg::after{content:"";position:absolute;inset:-6%;border-radius:50%;border:max(3px,.45cqw) solid #fff;box-shadow:0 0 0 max(2px,.3cqw) #0b6aa2}
.tp-pin.tg .tp-lock{bottom:30%;width:30%;height:30%}
.tp-ok{position:absolute;right:-4%;bottom:-2%;width:34%;height:34%;border-radius:50%;background:#fff;box-shadow:0 2px 5px #0003;display:grid;place-items:center;z-index:2}
.tp-ok img{width:84%;height:84%}
.tp-stop.fresh .tp-pin.tg .tp-tag{animation:tpEarn .9s cubic-bezier(.3,1.5,.5,1) .3s both}
.tp-ok.fresh{animation:tpStamp .5s cubic-bezier(.3,1.5,.5,1) 1s both}
@keyframes tpEarn{0%{filter:grayscale(1) drop-shadow(0 5px 4px rgba(0,50,90,.25));transform:scale(1)}40%{transform:scale(1.35) rotate(-8deg);filter:grayscale(0) brightness(1.3) drop-shadow(0 0 18px #ffe066)}100%{transform:scale(1);filter:drop-shadow(0 5px 4px rgba(0,50,90,.3))}}
.tp-pimg.tg{background:none;box-shadow:none;border-radius:50%;overflow:visible;width:72px;height:72px}
.tp-pimg.tg .tp-tag{width:100%;height:100%;object-fit:contain}
.tp-pc.now .tp-pimg.tg .tp-tag,.tp-pc.lock .tp-pimg.tg .tp-tag{filter:grayscale(1) contrast(.85)}
.tp-pc.lh .tp-pimg.tg{background:none}.tp-pc.lh .tp-pimg.tg img{width:100%;height:100%}
.tp-pst{display:none}
@media (max-width:820px),(max-aspect-ratio:1/1){.tp-stop{--s:min(21cqw,10.5cqh)}}
.tp-stop.lh .tp-pin.tg{background:none}.tp-stop.lh .tp-pin.tg .tp-tag{width:100%;height:100%}
/* same home / feedback buttons on every level screen (like the room and the train) */
.bookv .rd-ic,.albv .rd-ic,.tripv .rd-ic{width:58px;height:58px;border-radius:18px;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.bookv .rd-ic img,.albv .rd-ic img,.tripv .rd-ic img{width:38px!important;height:38px!important}
.bookv .rmx-top,.albv .rmx-top,.tripv .rmx-top{padding-top:max(14px,env(safe-area-inset-top,0px))}
@media (max-width:640px) and (max-height:720px){
  .bookv .rd-ic,.albv .rd-ic,.tripv .rd-ic,.trainv .rd-ic{width:50px;height:50px}
  .bookv .rd-ic img,.albv .rd-ic img,.tripv .rd-ic img,.trainv .rd-ic img{width:32px!important;height:32px!important}
}
/* ONE header for every screen: same place, same title + subtitle size, same buttons */
.hub .rmx-top,.trainv .rmx-top,.bookv .rmx-top,.albv .rmx-top,.tripv .rmx-top{max-width:1260px;width:100%;margin:0 auto;padding:14px 26px;gap:10px;align-items:flex-start}
.hub .trh-t,.rmx .trh-t{width:auto!important;height:clamp(44px,8.2vh,62px)!important;max-width:58vw;object-fit:contain;object-position:right}
.hub .trh-s,.rmx .trh-s{width:auto!important;height:clamp(19px,3.8vh,29px)!important;max-width:72vw;margin-inline-start:0;object-fit:contain;object-position:right}
.hub .rmx-t,.rmx .rmx-t{gap:4px!important}
@media (max-width:640px){
  .hub .rmx-top,.trainv .rmx-top,.bookv .rmx-top,.albv .rmx-top,.tripv .rmx-top{padding:10px 14px}
  .hub .trh-t,.rmx .trh-t{height:clamp(36px,6vh,46px)!important}
  .hub .trh-s,.rmx .trh-s{height:clamp(16px,2.8vh,21px)!important}
  .hub .rd-ic,.rmx .rd-ic{width:50px!important;height:50px!important}
  .hub .rd-ic img,.rmx .rd-ic img{width:32px!important;height:32px!important}
}

/* ===================== level 5: Maloosam's castle (same map screen, castle look) ===================== */
.tp-castle{background:linear-gradient(180deg,#d9ccff,#efe7ff 45%,#fff3dc)}
.tp-castle .rmx-t b{color:#5b2fb0}.tp-castle .rmx-t small{color:#5a4a7a}
.tp-castle .tp-map{border-color:#fff;background:
  radial-gradient(circle at 82% 10%,#fff8d6 0 4%,rgba(255,248,214,.5) 5%,transparent 9%),
  radial-gradient(1px 1px at 12% 8%,#fff 50%,transparent),radial-gradient(1.5px 1.5px at 30% 4%,#fff 50%,transparent),radial-gradient(1px 1px at 55% 9%,#fff 50%,transparent),
  linear-gradient(180deg,transparent 0 8%,#a99bc9 8% 8.6%,transparent 8.6%),
  repeating-linear-gradient(0deg,transparent 0 31px,rgba(70,50,110,.22) 31px 33px),
  repeating-linear-gradient(90deg,transparent 0 58px,rgba(70,50,110,.16) 58px 60px),
  linear-gradient(180deg,#8f7cc4 0 8%,#c9bce6 8%,#b7a7dc 70%,#9f8cc8)}
.tripv.tp-castle.tp-art .tp-map{background:url(../img/castle/map.webp) center/cover no-repeat}
.tripv.tp-castle.tp-tall.tp-artt .tp-map{background:url(../img/castle/map-tall.webp) center/cover no-repeat}
.tp-castle .tp-map::before{content:"";position:absolute;left:0;right:0;top:0;height:5%;pointer-events:none;
  background:repeating-linear-gradient(90deg,#8f7cc4 0 26px,transparent 26px 44px)}
.tripv.tp-castle.tp-art .tp-map::before,.tripv.tp-castle.tp-tall.tp-artt .tp-map::before{display:none}
.tp-castle .tp-isl{top:56%;width:150%;height:112%;border-radius:46% 46% 14% 14%;
  background:radial-gradient(ellipse at 50% 40%,#3e2f6b 0 54%,#6c5a9e 55% 62%,rgba(255,255,255,0) 64%)}
.tp-castle .tp-stop.done .tp-isl{background:radial-gradient(ellipse at 50% 40%,#ffe9a3 0 54%,#c79a3b 55% 62%,rgba(255,220,120,.35) 64%,rgba(255,255,255,0) 72%)}
.tp-castle .tp-stop.now .tp-isl{background:radial-gradient(ellipse at 50% 40%,#fff3c4 0 54%,#e2a93a 55% 62%,rgba(255,220,120,.5) 64%,rgba(255,255,255,0) 74%)}
.tp-castle .tp-stop b{background:#fffaf0;color:#3b2470}
.tp-castle .tp-r2{stroke:#fff8e6}.tp-castle .tp-r1{stroke:#ffb02e}
.tp-castle .tp-pass .tp-pbook{background:linear-gradient(90deg,#5b2fb0,#7d4fd6);box-shadow:inset 3px 0 0 #3d1f7d}
.tp-castle .tp-pc{background-image:repeating-linear-gradient(135deg,#7d4fd6 0 12px,#fff 12px 22px,#ffb02e 22px 34px,#fff 34px 44px)}
.tp-castle .tp-ph small{color:#5b2fb0}

/* ===================== level 5: the castle (one big castle, rooms = windows) ===================== */
.csv .tp-body{align-items:center}
.cs-stage{position:relative;height:min(calc(100vh - 200px),760px);aspect-ratio:4/5;max-width:100%;container-type:size}
.cs-art{position:absolute;inset:0}
.csv.cs-hasart .cs-art{background:url(../img/castle/castle.webp) center bottom/contain no-repeat}
.csv.cs-hasart .cs-art>i{display:none}
/* CSS castle (until the picture exists) */
.cs-art>i{position:absolute;display:block;background:linear-gradient(90deg,#b8a6df,#d8ccf3 40%,#c3b2e8);border:3px solid #6d55a8;border-radius:6px}
.cs-art>i::before{content:"";position:absolute;left:-3px;right:-3px;top:-14px;height:14px;background:repeating-linear-gradient(90deg,#6d55a8 0 3px,#cbbcef 3px 22%,#6d55a8 22% calc(22% + 3px),transparent calc(22% + 3px) 33%);opacity:.95}
.cs-art>i b{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);width:120%;border-left:solid transparent;border-right:solid transparent}
.cs-tw{width:22%;top:22%;bottom:4%}.cs-tw.l{left:4%}.cs-tw.r{right:4%}
.cs-tw b{border-width:0 13cqw 15cqh;border-bottom-color:#e8577c!important;border-left-width:13cqw;border-right-width:13cqw;width:0!important;margin-bottom:12px}
.cs-keep{left:27%;right:27%;top:30%;bottom:20%}.cs-keep b{display:none}
.cs-top{left:37%;right:37%;top:16%;bottom:52%}
.cs-top b{border-width:0 15cqw 17cqh;border-bottom-color:#7d4fd6!important;width:0!important;margin-bottom:12px}
.cs-top s{position:absolute;left:50%;bottom:calc(100% + 17cqh + 10px);width:3px;height:6cqh;background:#6d4a2a}
.cs-wall{left:14%;right:14%;top:56%;bottom:4%}
.cs-wall u{position:absolute;left:38%;right:38%;bottom:-3px;height:46%;border-radius:50% 50% 0 0/40% 40% 0 0;background:linear-gradient(#5a3b23,#3c2615);border:3px solid #6d55a8;border-bottom:0}
.cs-art>i{box-shadow:inset 0 -10px 0 rgba(80,60,130,.12),0 6px 0 rgba(80,60,130,.15)}
.cs-art>i:not(.cs-wall){background-image:repeating-linear-gradient(0deg,transparent 0 22px,rgba(90,70,150,.18) 22px 24px),linear-gradient(90deg,#b8a6df,#d8ccf3 40%,#c3b2e8)}
/* the windows (rooms) */
.cs-win{--w:12.5cqw;position:absolute;width:var(--w);height:calc(var(--w) * 1.3);transform:translate(-50%,-50%);border:0;padding:0;background:none;cursor:pointer;font:inherit;z-index:2}
.cs-win.rv{--w:11cqw}.cs-win.top{--w:13cqw}
.cs-glass{position:absolute;inset:0;border-radius:50% 50% 10% 10%/40% 40% 8% 8%;border:max(4px,1cqw) solid #8a6d4a;background:linear-gradient(#24204a,#3b3270);box-shadow:inset 0 0 0 max(2px,.4cqw) #f2d9a6,0 4px 0 rgba(60,40,20,.35);overflow:hidden;display:grid;place-items:center}
.cs-win.done .cs-glass{background:radial-gradient(circle at 50% 55%,#fff6c9,#ffd36b 70%,#f0a93a);box-shadow:inset 0 0 0 max(2px,.4cqw) #f2d9a6,0 0 18px #ffd36b,0 4px 0 rgba(60,40,20,.35)}
.cs-win.now .cs-glass{background:radial-gradient(circle at 50% 60%,#fff2bf,#ffc85a 75%);animation:csGlow 1.6s ease-in-out infinite}
@keyframes csGlow{0%,100%{box-shadow:inset 0 0 0 max(2px,.4cqw) #f2d9a6,0 0 6px #ffcf5a}50%{box-shadow:inset 0 0 0 max(2px,.4cqw) #f2d9a6,0 0 26px #ffcf5a}}
.cs-in{width:78%;height:auto;max-height:70%;object-fit:contain;display:grid;place-items:center}.cs-in img{width:100%;height:100%;object-fit:contain}
.cs-lk{width:52%;opacity:.9}
.cs-win b{position:absolute;top:calc(100% + 3px);left:50%;transform:translateX(-50%);white-space:nowrap;font-size:clamp(10px,2.4cqw,15px);font-weight:900;color:#3b2470;background:#fffaf0;padding:0 7px;border-radius:99px;box-shadow:0 2px 0 #0001;pointer-events:none}
.cs-win.lock b{opacity:.75}
.cs-win.sel .cs-glass{outline:max(3px,.6cqw) solid #fff;outline-offset:2px}
.cs-win.fresh .cs-glass{animation:csLight 1s ease .4s both}
@keyframes csLight{0%{background:#24204a;transform:scale(1)}50%{transform:scale(1.18);box-shadow:0 0 40px #ffe27a}100%{transform:scale(1)}}
.cs-win.top .cs-glass{border-color:#c79a3b}
/* Maloosam in his window */
.cs-cat{position:absolute;width:12cqw;transform:translate(-50%,-38%);z-index:3;pointer-events:none}
.cs-cat img{position:absolute;left:0;top:0;width:100%;height:auto;transition:opacity .05s}
.cs-cat .c2{opacity:0}
.cs-cat::after{content:"";display:block;padding-top:96%}
.cs-cat.go img{animation:csHop .4s ease-in-out infinite}
@keyframes csHop{50%{transform:translateY(-10%) rotate(5deg)}}
.cs-flag{position:absolute;left:50.6%;top:1%;width:9cqw;height:5cqh;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,#ff8a1f,#ffcf5a);clip-path:polygon(0 0,100% 50%,0 100%);transition:transform .8s cubic-bezier(.3,1.5,.5,1)}
.cs-all .cs-flag{transform:scaleX(1)}
@media (max-width:820px),(max-aspect-ratio:1/1){
  .cs-stage{height:auto;width:min(100%,520px);margin:0 auto}
  .cs-win b{font-size:clamp(9px,2.6cqw,13px)}
}
.cs-art>i b{border:0!important;width:130%!important;height:15cqh;margin-bottom:12px;background:#e8577c;clip-path:polygon(50% 0,100% 100%,0 100%)}
.cs-top b{height:14cqh;background:#7d4fd6}
.cs-top s{bottom:calc(100% + 14cqh + 8px)}
.cs-flag{top:calc(16% - 14cqh - 12px - 5cqh);left:50.3%}
.cs-win{--w:11cqw}.cs-win.rv{--w:9.5cqw}.cs-win.top{--w:11.5cqw}
.cs-cat{width:10.5cqw}
/* --- with the real castle picture: the windows are in the picture, we only add light, locks and Maloosam --- */
.csv.cs-hasart .cs-stage{aspect-ratio:1061/1311}
.csv.cs-hasart .cs-art{background-size:100% 100%}
.csv.cs-hasart .cs-win{width:var(--ww);height:var(--wh);--w:auto}
.csv.cs-hasart .cs-glass{border:0;background:transparent;box-shadow:none;border-radius:50% 50% 12% 12%/42% 42% 10% 10%;overflow:visible}
.csv.cs-hasart .cs-win.round .cs-glass{border-radius:50%}
.csv.cs-hasart .cs-win.done .cs-glass{background:radial-gradient(circle at 50% 60%,#fffbe0,#ffd75e 60%,#f5a623);box-shadow:0 0 14px 3px rgba(255,214,90,.85)}
.csv.cs-hasart .cs-win.now .cs-glass{background:radial-gradient(circle at 50% 60%,#fff2bf,#ffc85a 80%);animation:csGlow2 1.6s ease-in-out infinite}
@keyframes csGlow2{0%,100%{box-shadow:0 0 6px 2px rgba(255,207,90,.6)}50%{box-shadow:0 0 22px 7px rgba(255,207,90,.95)}}
.csv.cs-hasart .cs-in{display:none}
.csv.cs-hasart .cs-lk{position:absolute;left:50%;top:50%;width:150%;max-width:none;transform:translate(-50%,-38%);filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.csv.cs-hasart .cs-win.done::after{content:"";position:absolute;right:-55%;top:-30%;width:90%;aspect-ratio:1;background:url(../img/ui/star-on.webp) center/contain no-repeat;filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}
.csv.cs-hasart .cs-win b{opacity:0;transition:opacity .2s;top:calc(100% + 4px)}
.csv.cs-hasart .cs-win.sel b,.csv.cs-hasart .cs-win:hover b{opacity:1;z-index:5}
.csv.cs-hasart .cs-win.sel .cs-glass{outline:max(3px,.5cqw) solid #fff;outline-offset:3px}
.csv.cs-hasart .cs-win.fresh .cs-glass{animation:csLight2 1s ease .4s both}
@keyframes csLight2{0%{background:transparent}50%{transform:scale(1.3);box-shadow:0 0 40px 12px #ffe27a}100%{transform:scale(1)}}
.csv.cs-hasart .cs-win::before{content:"";position:absolute;inset:-60% -90%}
.csv.cs-hasart .cs-cat{width:8.5cqw;transform:translate(-50%,-70%)}
.csv.cs-hasart .cs-flag{display:none}
.csv.cs-hasart.cs-all .cs-stage::after{content:"";position:absolute;left:46%;top:-2%;width:12%;aspect-ratio:1;background:url(../img/ui/trophy.webp) center/contain no-repeat;animation:tpTagNow 1.6s ease-in-out infinite}
/* Maloosam is inside the castle: only his head shows in the window */
.csv.cs-hasart .cs-cat{width:auto;transform:translate(-50%,-50%);overflow:hidden;border-radius:50% 50% 12% 12%/42% 42% 10% 10%;background:radial-gradient(circle at 50% 70%,#fff2bf,#ffc85a 85%)}
.csv.cs-hasart .cs-cat.round{border-radius:50%}
.csv.cs-hasart .cs-cat::after{display:none}
.csv.cs-hasart .cs-cat img{left:50%;top:auto;bottom:-38%;width:150%;transform:translateX(-50%);transition:opacity .05s,translate .35s ease;animation:none}
.csv.cs-hasart .cs-cat.hide img{translate:0 80%}
.csv.cs-hasart .cs-cat:not(.hide) img{animation:csPeek .45s ease both}
@keyframes csPeek{from{translate:0 80%}to{translate:0 0}}
.tp-pass .cs-key{width:26px;height:26px;object-fit:contain}
.csv.cs-hasart .cs-cat img{width:128%;bottom:-22%}
/* head leaning out of the window: bigger than the window, cut at the window sill */
.csv.cs-hasart .cs-cat{overflow:visible;background:none;border-radius:0;clip-path:inset(-400% -400% 6% -400%)}
.csv.cs-hasart .cs-cat img{width:210%!important;max-width:none;height:auto;bottom:-34%}
.csv.cs-hasart .cs-cat img{bottom:-8%}
.csv.cs-hasart .cs-cat img{bottom:-2%}
/* long sound patterns (e.g. "ark · arn · arm") get smaller so they stay on one line */
.rime-big.l{font-size:clamp(46px,9vw,78px)!important;white-space:nowrap}
.rime-big.xl{font-size:clamp(30px,6vw,52px)!important;white-space:nowrap}
/* lesson buttons never touch the bottom of the card */
.les-sheet .les-dock{padding-bottom:max(16px,env(safe-area-inset-bottom,0px))!important}
.les-sheet .les-dock .btn{margin-bottom:6px}
/* short screens: the lesson shrinks so the button at the bottom is always visible without scrolling */
@media (max-height:820px){
  .rime-big:not(.l):not(.xl){font-size:clamp(48px,10svh,84px)!important}
  .les-sheet .rx-i img,.les-sheet .wl-i img{height:clamp(40px,7svh,64px)}
  .les-sheet .les-cat{padding-block:6px}
  .les-sheet .les-main{gap:8px}
}
@media (max-height:700px){
  .rime-big:not(.l):not(.xl){font-size:clamp(40px,8svh,64px)!important}
  .les-sheet .rx-i img,.les-sheet .wl-i img{height:clamp(34px,6svh,52px)}
  .les-sheet .les-cat img,.les-sheet .les-cat canvas{max-height:70px}
  .les-sheet h2{margin:0;font-size:18px}
}

/* ===================== word box: one wooden chest per category; the lid really opens ===================== */
.chestv{background:linear-gradient(180deg,#ffe9c7,#ffd9a0)}
.chestv .rmx-top{max-width:1260px}
.chestv .rmx-body{max-width:1100px}
.cb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:16px 18px;padding:6px 4px 30px}
.cb{border:0;background:none;padding:0;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;gap:2px;-webkit-tap-highlight-color:transparent}
.cb-box{position:relative;width:100%;max-width:250px;aspect-ratio:1;perspective:800px;transition:transform .2s}
.cb:hover .cb-box{transform:translateY(-4px) rotate(-1deg)}
.cb-box>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 8px rgba(110,60,10,.25))}
.cb-lid{transform-origin:50% 38%;z-index:3}
.cb-glow{position:absolute;left:24%;right:22%;top:40%;height:20%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,240,160,1),rgba(255,200,80,.55) 60%,transparent);opacity:0;z-index:1;filter:blur(3px)}
.cb-pop{position:absolute;left:0;right:0;top:38%;height:22%;display:flex;justify-content:center;gap:3%;z-index:2;pointer-events:none}
.cb-pop span{width:21%;aspect-ratio:1;display:grid;place-items:center;opacity:0;font-size:30px}
.cb-pop img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.25))}
.cb-tag{position:absolute;left:50%;bottom:9%;transform:translateX(-50%) rotate(-2deg);z-index:4;display:flex;align-items:center;gap:6px;max-width:94%;
  background:#fffaf0;border:3px solid var(--c);border-radius:14px;padding:4px 12px 4px 6px;box-shadow:0 4px 0 rgba(0,0,0,.12)}
.cb-ti{width:30px;height:30px;flex:none;display:grid;place-items:center;font-size:22px}.cb-ti img{width:100%;height:100%;object-fit:contain}
.cb-tag b{font-size:clamp(14px,1.6vw,18px);font-weight:900;color:#3b2410;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-n{font-weight:800;color:#8a5a2a;font-size:13px}.cb.done .cb-n{color:#2fa36b}
.cb.opening .cb-box{animation:cbShake .3s ease}
.cb.opening .cb-lid{animation:cbLid .8s cubic-bezier(.3,1.2,.5,1) .3s forwards}
.cb.opening .cb-glow{animation:cbGlow .9s ease .45s forwards}
.cb.opening .cb-pop span{animation:cbPop .6s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(.65s + var(--j) * .12s)}
@keyframes cbShake{25%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}75%{transform:rotate(-2deg)}}
@keyframes cbLid{0%{transform:rotateX(0)}100%{transform:translateY(-16%) rotateX(52deg) rotate(-6deg)}}
@keyframes cbGlow{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.3)}100%{opacity:.85;transform:scale(1.1)}}
@keyframes cbPop{0%{opacity:0;transform:translateY(40%) scale(.4)}100%{opacity:1;transform:translateY(-55%) scale(1)}}
@keyframes cbPop2{0%{opacity:0;transform:translateY(40%) scale(.4)}100%{opacity:1;transform:translateY(-95%) scale(1.1)}}
@media (max-width:640px){
  .cb-grid{grid-template-columns:repeat(2,1fr);gap:8px 10px}
  .cb-tag{padding:3px 8px 3px 4px;gap:4px;border-width:2px}.cb-ti{width:22px;height:22px;font-size:16px}.cb-tag b{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.cb.opening *{animation-duration:.01s!important;animation-delay:0s!important}}
.cb-pop{z-index:4}
.cb.opening .cb-lid{animation:cbLid2 .8s cubic-bezier(.3,1.15,.5,1) .25s both;z-index:1}
@keyframes cbLid2{0%{transform:none}100%{transform:translateY(-30%) rotateX(68deg) scale(.96)}}
.cb.opening .cb-pop span{animation-fill-mode:both;animation-delay:calc(.75s + var(--j) * .14s)}
.cb-pop span:nth-child(2){--up:-95%}
@keyframes cbPop{0%{opacity:0;transform:translateY(40%) scale(.4)}100%{opacity:1;transform:translateY(var(--up,-55%)) scale(1)}}
.cb-box{margin-top:-16%}.cb-n{margin-top:-6%}
.cb-grid{padding-top:30px;row-gap:22px}
@media (max-width:640px){.cb-grid{row-gap:14px;padding-top:24px}}
.chestv .rmx-top{max-width:1260px;width:100%;margin:0 auto;padding:14px 26px;gap:10px;align-items:flex-start;justify-content:flex-start}
.chestv .rmx-t{order:1;flex:1;align-items:flex-start;text-align:right}
.chestv .rd-ic[data-back]{order:2}.chestv .rd-ic[data-fb]{order:3}
.chestv .rd-ic{width:58px;height:58px;border-radius:18px;box-shadow:0 4px 10px rgba(0,0,0,.15)}
.chestv .rd-ic img{width:38px!important;height:38px!important;max-width:none!important;max-height:none!important;object-fit:contain}
.chestv .rmx-t b{font-size:26px;color:#8a3d0a}
@media (max-width:640px){.chestv .rmx-top{padding:10px 14px}.chestv .rd-ic{width:50px;height:50px}.chestv .rd-ic img{width:32px!important;height:32px!important}}
/* closed chest = one perfectly aligned picture; the 2-piece lid is only used while it opens */
.cb-f0{z-index:3}.cb-lid{opacity:0}
.cb-f1,.cb-f2{opacity:0;z-index:3}
.cb.opening .cb-f0{animation:cbOff .01s linear .25s forwards}
.cb.opening .cb-lid{opacity:1}
/* with hinged frames: closed -> half open -> open (lid stays on its back hinge) */
.cb-fr .cb-body,.cb-fr .cb-lid{display:none}
.cb-fr .cb.opening .cb-f0{animation:cbOff .01s linear .3s forwards}
.cb-fr .cb.opening .cb-f1{animation:cbOn .01s linear .3s forwards,cbOff .01s linear .5s forwards}
.cb-fr .cb.opening .cb-f2{animation:cbOn .01s linear .5s forwards}
.cb-fr .cb-f2{z-index:1}.cb-fr .cb-f1{z-index:1}
@keyframes cbOff{to{opacity:0}}
@keyframes cbOn{to{opacity:1}}
/* hinged frames: the chest sits lower in the square (room for the open lid) */
.cb-fr .cb-box{margin-top:-10%}
.cb-fr .cb-tag{bottom:13%}
.cb-fr .cb-pop{top:44%;z-index:2}
.cb-fr .cb-glow{top:46%;left:28%;right:22%;z-index:2}
.cb-fr .cb.opening .cb-f1{animation:cbOn .01s linear .25s forwards,cbOff .01s linear .45s forwards}
.cb-fr .cb.opening .cb-f2{animation:cbOn .01s linear .45s forwards}
.cb-fr .cb.opening .cb-f0{animation:cbOff .01s linear .25s forwards}
.cb-fr .cb.opening .cb-pop span{animation-delay:calc(.6s + var(--j) * .14s)}
.cb-fr .cb.opening .cb-glow{animation-delay:.45s}
.cb-fr .cb-tag{bottom:7%}