@font-face{font-family:Nunito;src:url(../fonts/nunito.woff2) format('woff2');font-weight:700 900;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Nunito;src:url(../fonts/nunito-ext.woff2) format('woff2');font-weight:700 900;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F}
:root{--ink:#4a3b5c;--pink:#ff9fb6;--lilac:#c3a8ff;--sky:#cfe8ff;--r:28px;--shadow:0 6px 0 rgba(74,59,92,.12),0 12px 28px rgba(140,110,200,.18);--tap:clamp(64px,12vmin,96px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html,body{margin:0;height:100%;overflow:hidden;font-family:Nunito,system-ui,sans-serif;font-weight:800;color:var(--ink);touch-action:manipulation;overscroll-behavior:none}
body{background:linear-gradient(180deg,#fdeef6 0%,#eef4ff 55%,#eafaf0 100%)}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
.art{width:100%;height:100%;display:block;overflow:visible}
/* sky */
.sky{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.cl{position:absolute;width:22vmin;height:8vmin;background:#fff;border-radius:99px;opacity:.75;animation:drift 60s linear infinite}
.cl::before,.cl::after{content:"";position:absolute;background:#fff;border-radius:50%}.cl::before{width:9vmin;height:9vmin;left:3vmin;top:-4.5vmin}.cl::after{width:7vmin;height:7vmin;left:10vmin;top:-3vmin}
.cl.a{top:9%;left:-25vmin}.cl.b{top:24%;left:-25vmin;animation-delay:-22s;scale:.7}.cl.c{top:14%;left:-25vmin;animation-delay:-41s;scale:.85}
@keyframes drift{to{transform:translateX(130vw)}}
.hill{position:absolute;bottom:-30vmin;width:90vmax;height:50vmin;border-radius:50%}.h1{left:-30vmax;background:#d8f3dc}.h2{right:-30vmax;background:#e3f6e0;bottom:-34vmin}
#app{position:relative;height:100%;display:flex;flex-direction:column;padding:max(10px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--tap);z-index:2}
.card{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);transition:transform .18s cubic-bezier(.3,1.6,.5,1),box-shadow .18s}
.card:active{transform:translateY(3px) scale(.97);box-shadow:0 2px 0 rgba(74,59,92,.12)}
.rb{width:var(--tap);height:var(--tap);padding:14px;border-radius:50%;flex:none}.rb-sp{width:var(--tap)}
.sun{width:calc(var(--tap)*.9);height:calc(var(--tap)*.9);animation:spin 30s linear infinite}
@keyframes spin{to{rotate:360deg}}
.streak{font-size:22px;min-width:60px}
/* mascot */
.mascot{position:fixed;left:max(8px,env(safe-area-inset-left));bottom:max(4px,env(safe-area-inset-bottom));width:clamp(70px,14vmin,130px);z-index:3;pointer-events:none;transform-origin:bottom center;animation:idle 3s ease-in-out infinite}
.mascot .m-ear{transform-origin:46px 50px;animation:ear 4s ease-in-out infinite}.mascot .m-ear.r{transform-origin:74px 50px;animation-delay:-2s}
@keyframes idle{50%{transform:translateY(-4px) scaleY(1.02)}}@keyframes ear{0%,80%,100%{rotate:0deg}90%{rotate:-12deg}}
.mascot.jump{animation:jump .7s cubic-bezier(.3,1.5,.5,1)}.mascot.think{animation:tilt .6s}
@keyframes jump{0%{transform:scale(1,1)}20%{transform:scale(1.15,.85)}50%{transform:translateY(-40%) scale(.95,1.1) rotate(-6deg)}80%{transform:scale(1.1,.9)}100%{transform:none}}
@keyframes tilt{30%{transform:rotate(-10deg)}70%{transform:rotate(8deg)}}
/* home */
.home{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,34px);min-height:0}
.hero{position:relative;display:flex;align-items:center;justify-content:center}
.hero .mascot{position:absolute;left:auto;right:calc(100% + 8px);bottom:-6px;width:clamp(80px,16vmin,150px)}
.play-today{width:clamp(110px,22vmin,180px);aspect-ratio:1;border-radius:50%;background:linear-gradient(160deg,#ffb3cb,#ff8fb0);box-shadow:0 8px 0 #e57c9c,0 18px 40px rgba(255,120,160,.35);display:grid;place-items:center;animation:breathe 2.4s ease-in-out infinite}
.play-today .tri{font-size:clamp(48px,10vmin,84px);color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.08);margin-left:.12em}.play-today.done{background:linear-gradient(160deg,#ffe9a0,#ffd24d);box-shadow:0 8px 0 #e3b52f}.play-today.done .tri{margin:0}
.play-today:active{transform:translateY(5px);box-shadow:0 3px 0 #e57c9c}.play-today.small{width:clamp(90px,18vmin,140px)}
@keyframes breathe{50%{transform:scale(1.06)}}
.worlds{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2.6vmin,26px);width:min(100%,780px)}
.world{background:var(--c);border-radius:32px;box-shadow:var(--shadow);padding:clamp(10px,2vmin,18px);display:flex;flex-direction:column;align-items:center;gap:8px;animation:popin .5s var(--d) both cubic-bezier(.3,1.5,.5,1);transition:transform .2s}
.world:active{transform:scale(.95)}.world:hover .w-art{transform:rotate(-4deg) scale(1.05)}
.w-art{width:clamp(64px,15vmin,130px);aspect-ratio:1;transition:transform .3s}
.w-bar{width:80%;height:10px;border-radius:9px;background:rgba(255,255,255,.8);overflow:hidden}.w-bar b{display:block;height:100%;background:linear-gradient(90deg,#ffd24d,#ff9fb6)}
@keyframes popin{from{opacity:0;transform:scale(.6) translateY(20px)}}
@media (orientation:landscape) and (max-height:600px){.worlds{grid-template-columns:repeat(6,1fr)}.home{flex-direction:column}}
/* world map */
.w-title{width:var(--tap);height:var(--tap);background:var(--c);border-radius:50%;padding:10px;box-shadow:var(--shadow)}
.map{flex:1;overflow-y:auto;position:relative;width:min(100%,560px);margin:0 auto;padding:10px 0 120px;display:flex;flex-direction:column;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.map .path{position:absolute;left:0;top:10px;width:100%;height:calc(100% - 130px);pointer-events:none}
.map .path path{stroke:#d9c9f5;stroke-width:10}
.lvl{position:relative;width:clamp(96px,22vmin,140px);aspect-ratio:1;border-radius:50%;background:#fff;box-shadow:var(--shadow);margin:clamp(6px,1.2vh,14px) 0;animation:popin .45s var(--d) both;flex:none;display:grid;place-items:center}
.lvl.l{align-self:flex-start;margin-left:14%}.lvl.r{align-self:flex-end;margin-right:14%}
.lvl-art{width:62%;aspect-ratio:1;display:grid;place-items:center;font-size:36px}.lvl.locked{background:#f1ecf8;box-shadow:none;opacity:.7}
.lvl-g{position:absolute;top:-4px;right:-4px;font-size:22px;background:#fff;border-radius:50%;width:38px;height:38px;display:grid;place-items:center;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.lvl.cur{box-shadow:0 0 0 6px var(--c),0 0 0 10px #fff,var(--shadow);animation:popin .45s var(--d) both,breathe 2s 1s ease-in-out infinite}
.stars{position:absolute;bottom:-14px;left:50%;translate:-50% 0;white-space:nowrap;font-size:22px;letter-spacing:-2px}.stars i{font-style:normal;color:#e6dcf3;-webkit-text-stroke:1.5px #fff}.stars i.on{color:#ffc93d}
.stars.big{position:static;translate:none;font-size:clamp(70px,16vmin,130px);letter-spacing:4px}.stars.big i{display:inline-block;animation:starpop .6s both cubic-bezier(.3,1.8,.5,1)}.stars.big i:nth-child(2){animation-delay:.35s}.stars.big i:nth-child(3){animation-delay:.7s}
@keyframes starpop{from{transform:scale(0) rotate(-90deg)}}
/* play */
.prog{flex:1;display:flex;flex-direction:column;gap:6px;max-width:560px}.pbar{height:16px;border-radius:9px;background:#fff;box-shadow:inset 0 2px 4px rgba(0,0,0,.06);overflow:hidden}.pbar b{display:block;height:100%;width:0;background:linear-gradient(90deg,#ffb3cb,#c3a8ff);border-radius:9px;transition:width .5s cubic-bezier(.3,1.3,.5,1)}
.caterpillar{display:flex;gap:5px;justify-content:center}.caterpillar i{width:14px;height:14px;border-radius:50%;background:#fff}.caterpillar i.on{background:#8fdc9b}.caterpillar i.now{background:#ff9fb6;transform:scale(1.3)}
.stage{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(12px,3vh,32px);min-height:0;position:relative;padding-bottom:clamp(40px,8vh,90px)}
.g-top{display:flex;justify-content:center;align-items:center;min-height:0}
.ear{width:clamp(90px,18vmin,150px);aspect-ratio:1;animation:breathe 2s ease-in-out infinite}
.g-choices{display:grid;grid-template-columns:repeat(var(--cols,2),1fr);gap:clamp(12px,3vmin,30px);width:min(100%,calc(var(--cols,2)*clamp(120px,28vmin,240px)))}
.g-choices.n3{--cols:3}.g-choices.n4{--cols:4}
@media (max-aspect-ratio:3/4){.g-choices.n4{--cols:2}.g-choices.n3{--cols:3}}
.choice{aspect-ratio:1;padding:12%;animation:popin .45s var(--d) both cubic-bezier(.3,1.5,.5,1)}
.choice.splat{padding:8%}
.choice.right{background:#e6fbe9;box-shadow:0 0 0 6px #8fdc9b,var(--shadow);animation:yay .6s cubic-bezier(.3,1.6,.5,1)}
.choice.fade{opacity:.35;transform:scale(.9)}
.choice.wrong,.piece.wrong{animation:no .45s}.choice.hint{box-shadow:0 0 0 6px #ffd24d,var(--shadow);animation:breathe 1s infinite}
@keyframes yay{40%{transform:scale(1.15) rotate(-3deg)}}@keyframes no{20%{transform:translateX(-12px) rotate(-4deg)}50%{transform:translateX(10px) rotate(3deg)}80%{transform:translateX(-5px)}}
.sz{display:grid;place-items:center;width:100%;height:100%}.sz.mazas .art{width:42%;height:42%}.sz.didelis .art{width:100%}
/* counting */
.objs{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(4px,1.2vmin,12px);max-width:min(94vw,760px)}
.obj{width:clamp(52px,12vmin,110px);aspect-ratio:1;animation:popin .4s var(--d) both;position:relative;cursor:pointer;transition:transform .2s}
.objs.cm .obj{width:clamp(46px,10vmin,90px)}.objs.cl .obj{width:clamp(36px,7.5vmin,70px)}
.obj.counted{transform:scale(.85);opacity:.6}.obj.counted::after{content:attr(data-n);position:absolute;inset:auto 0 -6px auto;background:#ff8fb0;color:#fff;border-radius:50%;width:28px;height:28px;display:grid;place-items:center;font-size:17px}
/* memory */
.g-mem{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(8px,2vmin,18px);width:min(100%,640px)}
.g-mem.n12{grid-template-columns:repeat(4,1fr)}@media (max-aspect-ratio:3/4){.g-mem.n8{grid-template-columns:repeat(2,1fr);width:min(100%,46vh)}.g-mem.n12{grid-template-columns:repeat(3,1fr);width:min(100%,52vh)}}
@media (min-aspect-ratio:4/3){.g-mem.n12{grid-template-columns:repeat(6,1fr);width:min(100%,900px)}.g-mem.n8{width:min(100%,58vh*1.4)}}
.mem{aspect-ratio:1;perspective:600px;background:none;box-shadow:none;animation:popin .4s var(--d) both}
.mem-in{position:relative;width:100%;height:100%;transition:transform .45s cubic-bezier(.3,1.3,.5,1);transform-style:preserve-3d}
.mem.open .mem-in{transform:rotateY(180deg)}
.mem-back,.mem-face{position:absolute;inset:0;border-radius:var(--r);backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:var(--shadow);display:grid;place-items:center;padding:14%}
.mem-back{background:repeating-linear-gradient(45deg,#e9dcff 0 12px,#f4ecff 12px 24px)}.mem-back .art{width:55%;opacity:.9}
.mem-face{background:#fff;transform:rotateY(180deg)}.mem.done .mem-face{background:#e6fbe9;box-shadow:0 0 0 5px #8fdc9b}
/* sort & feed */
.g-pieces{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(10px,2vmin,20px);max-width:900px}
.piece{width:clamp(76px,16vmin,130px);aspect-ratio:1;padding:10px;touch-action:none;cursor:grab;animation:popin .4s var(--d) both}
.piece.placed{visibility:hidden}.piece.lifted{opacity:.3}.piece.sel{box-shadow:0 0 0 6px #c3a8ff,var(--shadow);transform:scale(1.06)}
.ghost{position:fixed;z-index:50;pointer-events:none;transform:scale(1.12) rotate(-4deg);box-shadow:0 20px 40px rgba(74,59,92,.25)!important}
.g-bins{display:flex;justify-content:center;gap:clamp(14px,4vmin,40px);width:100%}
.bin{position:relative;width:clamp(120px,26vmin,220px);aspect-ratio:1;background:rgba(255,255,255,.65);border-radius:36px;border:4px dashed #d9c9f5;padding:12px;transition:transform .25s}
.g-bins.n3 .bin{width:clamp(100px,24vmin,200px)}.bin.got{transform:scale(1.08)}
.bin-in{position:absolute;inset:auto 6px 6px 6px;display:flex;flex-wrap:wrap;justify-content:center;gap:2px}.mini{width:28%;aspect-ratio:1;animation:popin .3s both}
.feed{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,3vh,30px);width:100%}
.eater{position:relative;width:clamp(140px,30vmin,260px);aspect-ratio:1}.eater.chomp{animation:chomp .4s}
@keyframes chomp{30%{transform:scale(1.12,.9)}60%{transform:scale(.95,1.08)}}
.need{position:absolute;right:-18%;top:-6%;width:44%;aspect-ratio:1;background:#fff;border-radius:50%;box-shadow:var(--shadow);padding:6%}
/* bubbles */
.g-bubbles{justify-content:flex-start}
.bub-goal{display:flex;align-items:center;gap:14px;background:#fff;border-radius:99px;padding:8px 18px;box-shadow:var(--shadow);z-index:2}.bub-goal>.art{width:clamp(56px,10vmin,90px);height:clamp(56px,10vmin,90px)}.bub-count{width:clamp(50px,9vmin,80px);height:clamp(50px,9vmin,80px)}
.bub-field{position:absolute;inset:0;overflow:hidden}
.bubble{position:absolute;bottom:-25vmin;animation:rise linear forwards;touch-action:none}
@keyframes rise{0%{transform:translateY(0) translateX(0)}25%{transform:translateY(-35vh) translateX(3vw)}50%{transform:translateY(-70vh) translateX(-3vw)}75%{transform:translateY(-105vh) translateX(3vw)}100%{transform:translateY(-140vh)}}
.bubble.popped{animation:burst .3s forwards!important}@keyframes burst{to{transform:scale(1.6);opacity:0}}
.bubble.wrong .art{animation:no .4s}
/* say it */
.say{display:flex;flex-direction:column;align-items:center;gap:clamp(12px,3vh,28px)}
.say-pic{width:clamp(180px,40vmin,340px);aspect-ratio:1;padding:10%;animation:popin .5s both}.say-pic.right{box-shadow:0 0 0 6px #c3a8ff,var(--shadow)}
.say-hint{font-size:clamp(36px,7vmin,60px);animation:breathe 1.6s infinite}
.say-btns{display:flex;gap:24px}.sbtn{width:var(--tap);height:var(--tap);font-size:calc(var(--tap)*.45);display:grid;place-items:center}.sbtn.yes{background:#e6fbe9;color:#3c9a52}
/* song */
.song{display:flex;flex-direction:column;align-items:center;gap:12px;width:min(100%,760px);max-height:100%}
.song-art{width:clamp(80px,16vmin,140px);animation:bob 1.2s ease-in-out infinite}@keyframes bob{50%{transform:translateY(-8px) rotate(3deg)}}
.lyrics{display:flex;flex-direction:column;gap:10px;width:100%;overflow:auto;scrollbar-width:none}
.line{display:flex;align-items:center;gap:14px;background:rgba(255,255,255,.6);border-radius:24px;padding:10px 16px;transition:all .3s;opacity:.55}
.line.on{background:#fff;opacity:1;box-shadow:var(--shadow);transform:scale(1.03)}
.line .pic{width:clamp(44px,8vmin,70px);flex:none}.line .txt{font-size:clamp(20px,3.8vmin,34px);line-height:1.25}
.line b{transition:color .2s;font-weight:800}.line b.hl{color:#e0609a}
.notes{font-size:28px;color:#c3a8ff;animation:bob 1s infinite}
/* story */
.story{display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2vh,18px);width:min(100%,900px);height:100%}
.page{position:relative;width:100%;flex:1;min-height:0;max-height:62vh}
.scene{position:absolute;inset:0;border-radius:32px;overflow:hidden;box-shadow:var(--shadow);border:5px solid #fff}
.sp{position:absolute;aspect-ratio:1;cursor:pointer;animation:popin .6s both cubic-bezier(.3,1.5,.5,1)}
.sp.bob{animation:popin .6s both,bob 2s .6s ease-in-out infinite}.sp.hop{animation:popin .6s both,hop 1.2s .6s infinite}.sp.walk{animation:popin .6s both,walk 1.4s .6s ease-in-out infinite}
.sp.fly{animation:fly 2s ease-in-out infinite}.sp.drive{animation:drive 3s ease-out both}.sp.roll{animation:roll 3s ease-out both}.sp.spin .art{animation:spin 12s linear infinite}.sp.twinkle{animation:popin .6s both,tw 1.6s infinite}
.sp.float{animation:bob 2.4s ease-in-out infinite}.sp.sink{animation:sink 5s ease-in forwards}.sp.boing{animation:boing .5s!important}
@keyframes hop{0%,100%{transform:translateY(0)}40%{transform:translateY(-14%) scaleY(1.05)}60%{transform:translateY(0) scaleY(.92)}}
@keyframes walk{50%{transform:translateX(3%) rotate(2deg)}}@keyframes fly{50%{transform:translate(-30%,-20%) rotate(180deg)}}@keyframes drive{from{transform:translateX(-120%)}}
@keyframes roll{from{transform:translateX(-200%) rotate(-540deg)}}@keyframes tw{50%{transform:scale(.85);filter:brightness(1.2)}}@keyframes sink{to{transform:translateY(60%);opacity:.4}}@keyframes boing{30%{transform:scale(1.2,.85)}60%{transform:scale(.9,1.1)}}
.story-ch{position:absolute;left:50%;bottom:4%;translate:-50% 0;width:min(92%,560px);gap:clamp(8px,2vmin,18px)}
.story-ch .choice{padding:10%}
.caption{text-align:center;background:#fff;border-radius:24px;padding:10px 20px;box-shadow:var(--shadow);width:min(100%,760px)}
.caption .lt{font-size:clamp(20px,4vmin,34px);color:#9b5de5}.caption .en{font-size:clamp(14px,2.6vmin,20px);color:#9a91a8;font-weight:700}
.story-nav{display:flex;align-items:center;gap:18px}.nav{width:var(--tap);height:var(--tap);border-radius:50%;font-size:calc(var(--tap)*.4);color:#9b5de5}.nav:disabled{opacity:.3}
.nav.pulse{animation:breathe 1s infinite;background:#ffe3ee}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#e6dcf3}.dots i.on{background:#c3a8ff}
/* results */
.results{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px}
.results .mascot{position:relative;left:auto;bottom:auto;width:clamp(120px,24vmin,200px)}
.unlock{font-size:60px;animation:starpop .6s 1s both}.trophy{width:clamp(140px,30vmin,240px);animation:spin 8s linear infinite}
/* fx */
#fx{position:fixed;inset:0;pointer-events:none;z-index:60;overflow:hidden}
.conf{position:absolute;width:14px;height:10px;border-radius:3px;animation:conf 1.6s cubic-bezier(.2,.7,.4,1) forwards}
@keyframes conf{0%{transform:translate(0,0) rotate(0)}60%{opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 80vh)) rotate(var(--r));opacity:0}}
.hold{position:fixed;left:0;right:0;bottom:0;height:8px;background:#c3a8ff;transform-origin:left;transform:scaleX(0);z-index:90;transition:transform 2s linear}.hold.go{transform:scaleX(1)}
/* parent */
.ph{margin:0;font-size:20px}.parent{flex:1;overflow:auto;background:#fff;border-radius:24px;padding:18px 20px;box-shadow:var(--shadow);font-weight:700;font-size:15px;width:min(100%,960px);margin:0 auto;-webkit-user-select:text;user-select:text}
.parent h3{margin:20px 0 8px;font-size:17px}.pcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}.pcards div{background:#faf5ff;border-radius:16px;padding:12px;text-align:center;font-size:13px}.pcards b{display:block;font-size:28px;color:#9b5de5}
.chart{display:flex;gap:8px;height:120px;align-items:flex-end}.chart div{flex:1;display:flex;flex-direction:column;align-items:center;height:100%;justify-content:flex-end;font-size:12px}.chart i{display:block;width:70%;background:linear-gradient(#c3a8ff,#ff9fb6);border-radius:6px 6px 0 0;min-height:2px}
.parent table{width:100%;border-collapse:collapse}.parent td,.parent th{padding:6px;border-bottom:1px solid #f1e8ff;text-align:left}
.set{margin:8px 0}.set button{border:2px solid #e9dcff;border-radius:12px;padding:8px 12px;margin:3px;background:#faf5ff;font-size:14px}.set button.on{background:#c3a8ff;color:#fff;border-color:#c3a8ff}
.note{color:#8a7f99;font-size:13px}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important}}

.page.has-ch .sp{top:5%!important;width:24%!important;left:38%!important}
.map{background:radial-gradient(circle at 50% 0,var(--c),transparent 70%)}
.lvl::before{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:#e3d6f7;top:-22px;left:50%;box-shadow:0 -14px 0 #e3d6f7}
.lvl[data-l="0"]::before{display:none}
.page{flex:none;width:min(100%,calc(60vh*4/3));aspect-ratio:4/3;max-height:none}
@media (max-aspect-ratio:3/4){.page{width:100%;aspect-ratio:4/5}}
.page.has-ch .sp{top:4%!important;width:22%!important;left:39%!important}
.story-ch{width:min(88%,520px)}
.map{background:none}.lvl.locked .lvl-art{filter:grayscale(1);opacity:.35}

/* language flag buttons */
.flagbtn{flex:none;width:clamp(48px,8vmin,64px);aspect-ratio:3/2;border-radius:10px;background:#fff;padding:3px;box-shadow:0 4px 0 rgba(74,59,92,.14),0 6px 14px rgba(140,110,200,.18);transition:transform .15s cubic-bezier(.3,1.6,.5,1);display:grid;place-items:center}
.flagbtn.big{width:clamp(64px,11vmin,88px);border-radius:12px;padding:4px}
.flagbtn .flag{width:100%;height:100%;display:block}.flagbtn:active{transform:translateY(3px) scale(.95)}
.flagbtn.ping{animation:ping .5s}@keyframes ping{40%{transform:scale(1.15) rotate(-4deg)}}
.caption{display:flex;flex-direction:column;gap:8px;padding:12px 16px;text-align:left}
.cap-row{display:flex;align-items:center;gap:14px}.cap-row .lt{font-size:clamp(22px,4.4vmin,36px);line-height:1.2}.cap-row .en{font-size:clamp(15px,2.8vmin,21px)}
.en-row{padding-left:clamp(10px,2vmin,14px);opacity:.9}
.line{flex-wrap:nowrap}.line .txt{flex:1;display:flex;flex-wrap:wrap;gap:0 .3em;align-items:baseline}.line .txt small{flex-basis:100%;font-size:.6em;color:#9a91a8;font-weight:700}
.line .flags{display:flex;flex-direction:column;align-items:center;gap:6px}.line .flags .flagbtn{width:clamp(40px,6vmin,52px)}.line .flags .flagbtn.big{width:clamp(52px,8vmin,66px)}
.word-cap{display:flex;align-items:center;gap:14px;background:#fff;border-radius:22px;padding:10px 16px;box-shadow:var(--shadow);font-size:clamp(26px,5vmin,40px);color:#9b5de5;animation:popin .4s both}