@font-face{font-family:'Baloo 2';src:url(/fonts/baloo2.woff2) format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:Noori;src:url(/fonts/noori.woff2) format('woff2');font-display:swap}
@font-face{font-family:'Noto Sans Devanagari';src:url(/fonts/devanagari.woff2) format('woff2');font-weight:100 900;font-display:swap}
:root{--u:min(1vw,4.8px);--ink:#3a2a5a}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overscroll-behavior:none}
body{font-family:'Baloo 2','Noto Sans Devanagari',Noori,sans-serif;color:var(--ink);background:#8fd3ff url(/img/bg.webp) center bottom/cover fixed;user-select:none;-webkit-user-select:none;touch-action:manipulation;overflow:hidden}
#app{position:relative;max-width:480px;margin:0 auto;height:100%;overflow-y:auto;overflow-x:hidden;padding-bottom:calc(var(--u)*40)}
.ur,[lang=ur]{font-family:Noori,'Baloo 2',sans-serif;direction:rtl;line-height:1.7}
.hi,[lang=hi]{font-family:'Noto Sans Devanagari','Baloo 2',sans-serif}
html[lang=ur] body{font-family:Noori,'Baloo 2',sans-serif}html[lang=hi] body{font-family:'Noto Sans Devanagari','Baloo 2',sans-serif}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.top{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--u)*4) calc(var(--u)*4) 0;gap:8px}
.pill{background:linear-gradient(#fff,#ffe9c7);border-radius:999px;padding:calc(var(--u)*1.6) calc(var(--u)*3.2);font-size:calc(var(--u)*4.2);font-weight:800;box-shadow:0 calc(var(--u)*1) 0 #e0a64a,0 calc(var(--u)*1.6) calc(var(--u)*3) #0003;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;gap:4px;white-space:nowrap}
.pill:active,.card:active,.btn:active,.ch:active{transform:translateY(3px) scale(.97)}
.title{text-align:center;font-size:calc(var(--u)*8.6);font-weight:800;color:#fff;-webkit-text-stroke:calc(var(--u)*.6) #7b3fe4;paint-order:stroke fill;text-shadow:0 calc(var(--u)*.9) 0 #4b1fa8,0 calc(var(--u)*1.6) calc(var(--u)*2.4) #0005;margin-top:calc(var(--u)*2.4);line-height:1.25}
.logo{text-align:center;margin-top:calc(var(--u)*2);line-height:1;font-weight:800}
.logo .a{font-size:calc(var(--u)*12);color:#ff5a5f;-webkit-text-stroke:calc(var(--u)*.8) #fff;paint-order:stroke fill;text-shadow:0 calc(var(--u)*1.1) 0 #c22d3a,0 calc(var(--u)*2) calc(var(--u)*3) #0005}
.logo .b{font-size:calc(var(--u)*10);color:#2bb6ff;-webkit-text-stroke:calc(var(--u)*.8) #fff;paint-order:stroke fill;text-shadow:0 calc(var(--u)*1.1) 0 #1673b8,0 calc(var(--u)*2) calc(var(--u)*3) #0005}
.card{border-radius:calc(var(--u)*5);box-shadow:inset 0 calc(var(--u)*-1.6) 0 #0002,inset 0 calc(var(--u)*1.3) 0 #fff6,0 calc(var(--u)*1.8) calc(var(--u)*2.8) #0004;color:#fff;font-weight:800;text-align:center;transition:transform .15s}
.panel{background:#fffbe9;color:var(--ink);margin:calc(var(--u)*3) calc(var(--u)*5);padding:calc(var(--u)*3.5);border-radius:calc(var(--u)*5);box-shadow:inset 0 calc(var(--u)*-1.4) 0 #0001,0 calc(var(--u)*1.8) calc(var(--u)*2.8) #0004;text-align:center;font-weight:800}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*3.6);margin:calc(var(--u)*4) calc(var(--u)*4.6)}
.sec{height:calc(var(--u)*25);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(var(--u)*4.6);line-height:1.2;padding:4px}
.sec .e{font-size:calc(var(--u)*10);line-height:1.2;filter:drop-shadow(0 4px 4px #0003)}
.btn{border-radius:999px;padding:calc(var(--u)*2.6) calc(var(--u)*3);font-size:calc(var(--u)*5);font-weight:800;color:#fff;text-align:center;box-shadow:inset 0 calc(var(--u)*-1.3) 0 #0003,inset 0 calc(var(--u)*.9) 0 #fff5,0 calc(var(--u)*1.3) calc(var(--u)*2.2) #0004;min-height:52px;transition:transform .12s}
.tabs{display:flex;gap:calc(var(--u)*2);margin:calc(var(--u)*3) calc(var(--u)*4);flex-wrap:wrap;justify-content:center}
.tabs .btn{flex:1 1 28%;font-size:calc(var(--u)*4.2);padding:calc(var(--u)*2) calc(var(--u)*1.5);background:#fff;color:#7a3fe0}
.tabs .btn.on{background:linear-gradient(#b77dff,#7a3fe0);color:#fff}
.lv{display:flex;gap:6px;justify-content:center;margin:calc(var(--u)*1) 0}
.lv button{width:44px;height:44px;border-radius:50%;background:#fff;font-weight:800;font-size:18px;box-shadow:0 3px 0 #e0a64a}
.lv button.on{background:linear-gradient(#ffe14a,#f2a900);color:#fff}.lv button:disabled{opacity:.45}
.g-pink{background:linear-gradient(#ff6b8b,#e8335f)}.g-orange{background:linear-gradient(#ffb43d,#f07c00)}.g-green{background:linear-gradient(#6fd36a,#2e9e3a)}.g-blue{background:linear-gradient(#4fc3ff,#1c7fe0)}.g-purple{background:linear-gradient(#b77dff,#7a3fe0)}.g-gold{background:linear-gradient(#ffd84a,#f2a900)}.g-grey{background:#c9c3d6}
.mascot{position:fixed;bottom:0;right:max(0px,calc(50vw - 240px));width:calc(var(--u)*26);pointer-events:none;z-index:20;transition:right .3s}
.mascot img{width:100%;display:block;filter:drop-shadow(0 calc(var(--u)*1.8) calc(var(--u)*1.8) #0004);transform-origin:50% 100%}
.mascot.left{right:auto;left:max(0px,calc(50vw - 240px))}
.mascot.home{width:calc(var(--u)*40);bottom:auto;top:calc(var(--u)*38);left:max(-8px,calc(50vw - 248px));right:auto;z-index:2}
.mascot.hide{display:none}
.bubble{position:absolute;bottom:calc(var(--u)*30);right:calc(var(--u)*18);width:max-content;max-width:calc(var(--u)*62);background:#fff;border-radius:calc(var(--u)*4.5);padding:calc(var(--u)*2.2) calc(var(--u)*3.2);font-size:calc(var(--u)*4.2);font-weight:800;box-shadow:0 calc(var(--u)*1.1) calc(var(--u)*2.3) #0003;opacity:0;transform:scale(.6);transform-origin:100% 100%;transition:.25s cubic-bezier(.3,1.6,.5,1);line-height:1.35}
.bubble.show{opacity:1;transform:none}.mascot.left .bubble{right:auto;left:calc(var(--u)*24);transform-origin:0 100%}
.mascot.home .bubble{bottom:auto;top:calc(var(--u)*6);left:calc(var(--u)*38);right:auto;max-width:calc(var(--u)*56);transform-origin:0 50%}
.bubble.ok{color:#2e9e3a}.bubble.no{color:#e86a2c}
.hop img{animation:hop .7s cubic-bezier(.3,1.5,.5,1)}@keyframes hop{0%{transform:scale(1)}30%{transform:translateY(-22%) scale(1.08,.95) rotate(-6deg)}60%{transform:translateY(0) scale(1.05,.95)}80%{transform:translateY(-6%) rotate(4deg)}100%{transform:none}}
.tilt img{animation:tilt .8s ease}@keyframes tilt{0%,100%{transform:none}25%{transform:rotate(-7deg)}50%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
.idle img{animation:idle 3s ease-in-out infinite}@keyframes idle{50%{transform:translateY(-2%) rotate(1.5deg)}}
.shake{animation:shake .4s}@keyframes shake{25%{transform:translateX(-8px)}50%{transform:translateX(8px)}75%{transform:translateX(-4px)}}
.pop{animation:pop .45s cubic-bezier(.3,1.7,.5,1)}@keyframes pop{0%{transform:scale(.6)}100%{transform:scale(1)}}
.choices{display:flex;gap:calc(var(--u)*3);margin:calc(var(--u)*2) calc(var(--u)*5);flex-wrap:wrap;justify-content:center}
.ch{flex:1 1 26%;min-width:calc(var(--u)*24);height:calc(var(--u)*24);font-size:calc(var(--u)*14);display:flex;align-items:center;justify-content:center;line-height:1}
.ch.sm{font-size:calc(var(--u)*11)}.ch.good{outline:calc(var(--u)*1.1) solid #fff;transform:scale(1.06)}.ch.bad{opacity:.5}
.big{font-size:calc(var(--u)*30);line-height:1.15}
.bigL{display:flex;justify-content:center;gap:calc(var(--u)*3);margin-top:calc(var(--u)*3)}
.bigL .card{width:calc(var(--u)*24);height:calc(var(--u)*26);font-size:calc(var(--u)*19);line-height:calc(var(--u)*26)}
.bigL .card.cur{transform:scale(1.12);outline:calc(var(--u)*.9) solid #fff}
.sub{font-size:calc(var(--u)*3.8);opacity:.85}
.items{font-size:calc(var(--u)*10);line-height:1.25;letter-spacing:2px;margin:calc(var(--u)*1.5) 0;word-break:break-all}
.items span{display:inline-block;transition:transform .2s}.items span.ct{transform:scale(1.25);filter:drop-shadow(0 0 6px #ffd60a)}
.eq{font-size:calc(var(--u)*13);color:#ff5a5f;text-shadow:0 calc(var(--u)*.9) 0 #c22d3a33}
.ani{height:calc(var(--u)*40);position:relative;display:flex;flex-direction:column;justify-content:center;font-size:calc(var(--u)*5.4);line-height:1.15}
.ani .e{font-size:calc(var(--u)*17);line-height:1.15}.ani .n{font-size:calc(var(--u)*3.6)}
.ani .s{position:absolute;top:calc(var(--u)*1.6);right:calc(var(--u)*2);background:#fff;color:var(--ink);border-radius:99px;padding:0 calc(var(--u)*1.6);font-size:calc(var(--u)*3)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*2.6);margin:calc(var(--u)*2) calc(var(--u)*5)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u)*2.4);margin:calc(var(--u)*2) calc(var(--u)*5)}
.mem{aspect-ratio:3/4;font-size:calc(var(--u)*11);display:flex;align-items:center;justify-content:center;perspective:400px;transition:transform .3s}
.mem.back{background:linear-gradient(#ffb43d,#f07c00)}.mem.face{background:#fffbe9;animation:flip .3s}.mem.done{opacity:.75}
@keyframes flip{0%{transform:rotateY(90deg)}100%{transform:none}}
.stage{position:relative;margin:0 calc(var(--u)*3);height:calc(var(--u)*92);touch-action:none}
.shp{position:absolute;width:calc(var(--u)*26);height:calc(var(--u)*26);touch-action:none;transition:transform .2s}
.shp.drag{transition:none;z-index:5;filter:drop-shadow(0 12px 10px #0005)}
.shp svg{width:100%;height:100%;overflow:visible}
.dots{display:flex;gap:calc(var(--u)*2.4);justify-content:center;flex-wrap:wrap;margin:calc(var(--u)*2) calc(var(--u)*4)}
.dot{width:calc(var(--u)*17);height:calc(var(--u)*17);border-radius:50%;box-shadow:0 calc(var(--u)*1) calc(var(--u)*1.7) #0004,inset -6px -8px 0 #0002,inset 6px 6px 0 #fff6}
.lbl{text-align:center;font-size:calc(var(--u)*5);font-weight:800;color:#fff;text-shadow:0 3px 6px #0008;margin-top:6px}
.pz{display:grid;gap:3px;margin:calc(var(--u)*2) auto;width:calc(var(--u)*84);height:calc(var(--u)*84);background:#fff;padding:3px;border-radius:calc(var(--u)*4);box-shadow:0 10px 20px #0004}
.pz div{background-image:url(/img/puzzle1.webp);border-radius:6px;transition:outline .1s}.pz div.sel{outline:4px solid #ff5a5f;z-index:2}
canvas.tr{display:block;margin:0 auto;background:#fffbe9;border-radius:calc(var(--u)*5);box-shadow:0 10px 20px #0004;touch-action:none;width:calc(var(--u)*84);height:calc(var(--u)*84)}
.row{display:flex;gap:calc(var(--u)*3);margin:calc(var(--u)*3) calc(var(--u)*5)}.row .btn{flex:1}
.foot{position:fixed;bottom:calc(var(--u)*3);left:0;right:0;max-width:480px;margin:0 auto;display:flex;justify-content:space-between;padding:0 calc(var(--u)*4.6);z-index:3}
.foot .pill{font-size:calc(var(--u)*3.4)}
.bar{background:#eee;border-radius:99px;height:calc(var(--u)*4.4);overflow:hidden;margin-top:6px}.bar div{height:100%;border-radius:99px;background:linear-gradient(#ffe14a,#f2a900);transition:width .6s}
.badge{height:calc(var(--u)*26);display:flex;flex-direction:column;justify-content:center;font-size:calc(var(--u)*3.6)}.badge .e{font-size:calc(var(--u)*12);line-height:1.2}
#fx{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden}
.conf{position:absolute;top:-20px;font-size:26px;animation:fall 1.6s ease-in forwards}@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}
.starfly{position:absolute;font-size:40px;animation:sf .9s ease-in forwards}@keyframes sf{0%{transform:scale(.4)}40%{transform:scale(1.5)}100%{transform:translate(var(--dx),var(--dy)) scale(.5);opacity:.3}}
#modal:empty{display:none}#modal{position:fixed;inset:0;background:#0006;z-index:50;display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding:calc(var(--u)*5) 0}
.sheet{background:#fff;border-radius:calc(var(--u)*5);padding:calc(var(--u)*4);width:min(92vw,440px);font-weight:700;box-shadow:0 20px 40px #0005}
.sheet h2{font-size:calc(var(--u)*6);margin-bottom:6px}.sheet .rowp{font-size:calc(var(--u)*3.9);margin-top:calc(var(--u)*2.4)}
.prow{display:flex;justify-content:space-between}.pbar{background:#eee;border-radius:99px;height:calc(var(--u)*3.4)}.pbar div{height:100%;border-radius:99px}
.stats{display:flex;gap:8px;margin-top:14px}.stats div{flex:1;background:#f4efff;border-radius:16px;padding:10px 4px;text-align:center;font-size:calc(var(--u)*3.4)}.stats b{display:block;font-size:calc(var(--u)*5.4)}
.opt{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.opt button{background:#f1ecfb;border-radius:99px;padding:8px 14px;min-height:44px;font-weight:800}.opt button.on{background:#7a3fe0;color:#fff}
.lnk{color:#7a3fe0;text-decoration:underline;font-weight:800}
.langs{display:flex;gap:4px}.langs button{padding:calc(var(--u)*1.2) calc(var(--u)*2.4);font-size:calc(var(--u)*4)}.langs button.on{background:linear-gradient(#b77dff,#7a3fe0);color:#fff;box-shadow:0 calc(var(--u)*1) 0 #4b1fa8}
html[lang=ur] .sec div:last-child,html[lang=ur] .tabs .btn,html[lang=ur] .bubble,html[lang=ur] .panel,html[lang=ur] .pill,html[lang=ur] .lbl,html[lang=ur] .btn{font-size:1.18em}
html[lang=ur] .title{font-size:calc(var(--u)*9.5);line-height:1.6}
html[lang=ur] .sec div:last-child{font-size:calc(var(--u)*5.6);line-height:1.5}
html[lang=ur] .tabs .btn{font-size:calc(var(--u)*5)}html[lang=ur] .bubble{font-size:calc(var(--u)*5)}
html[lang=ur] .panel button,html[lang=ur] .panel>div:first-child{font-size:calc(var(--u)*7)!important}
.ur{font-size:1.25em}.langs .ur{font-size:calc(var(--u)*5)}.sheet .ur,.sheet [lang=ur]{font-size:1.2em}
html[lang=ur] .sheet{font-size:1.15em}

/* mascot strip: never over controls */
body:has(.mascot:not(.home):not(.hide)) #app{height:calc(100% - var(--u)*25);padding-bottom:calc(var(--u)*4)}
.mascot:not(.home){width:auto}.mascot:not(.home) img{height:calc(var(--u)*24);width:auto}

canvas.tr{width:min(calc(var(--u)*84),calc(100dvh - var(--u)*128),calc(100vh - var(--u)*128));height:auto;aspect-ratio:1}
/* polish animations */
@media (prefers-reduced-motion:no-preference){
#game .card,#game .ch,.grid2>.card,.grid4>.card,.sec{animation:enter .5s cubic-bezier(.25,1.5,.5,1) backwards}
#game .ch:nth-child(2),.grid2>.card:nth-child(2),.sec:nth-child(2){animation-delay:.06s}
#game .ch:nth-child(3),.grid2>.card:nth-child(3),.sec:nth-child(3){animation-delay:.12s}
#game .ch:nth-child(4),.grid2>.card:nth-child(4),.sec:nth-child(4){animation-delay:.18s}
#game .ch:nth-child(5),.grid2>.card:nth-child(5),.sec:nth-child(5){animation-delay:.24s}
.sec:nth-child(6){animation-delay:.3s}.sec:nth-child(7){animation-delay:.36s}
@keyframes enter{0%{opacity:0;transform:translateY(calc(var(--u)*6)) scale(.85)}100%{opacity:1;transform:none}}
.ch.good{animation:goodp .9s ease both!important;box-shadow:0 0 0 calc(var(--u)*1.2) #fff,0 0 calc(var(--u)*8) calc(var(--u)*2) #ffe066}
@keyframes goodp{0%{transform:scale(1)}30%{transform:scale(1.16) rotate(-3deg)}55%{transform:scale(.98) rotate(2deg)}100%{transform:scale(1.06)}}
.bubble.show{animation:bub .45s cubic-bezier(.3,1.6,.5,1)}@keyframes bub{0%{transform:scale(.5);opacity:0}100%{transform:none;opacity:1}}
.idle img{animation:idle2 3.2s ease-in-out infinite}@keyframes idle2{0%,100%{transform:none}25%{transform:translateY(-2%) scale(1.01,.99)}50%{transform:translateY(-3%) rotate(1.5deg)}75%{transform:translateY(-1%) rotate(-1deg)}}
.starfly{filter:drop-shadow(0 0 8px #ffd60a)}
.pill,.btn,.card,.ch{transition:transform .12s ease,filter .12s}.pill:active,.btn:active,.card:active,.ch:active{filter:brightness(1.08)}
}
.mascot.home{width:auto}.mascot.home img{height:calc(var(--u)*46);width:auto}

#rp{min-height:48px}[data-l]{min-width:44px;min-height:44px}
.ur{unicode-bidi:isolate}.hi{unicode-bidi:isolate}
@media (max-height:720px){.tabs{margin:calc(var(--u)*2) calc(var(--u)*3);gap:calc(var(--u)*1.5)}.tabs .btn{flex:1 1 20%;padding:calc(var(--u)*1.6) calc(var(--u)*1);font-size:calc(var(--u)*3.8)}
 html[lang=ur] .tabs .btn{font-size:calc(var(--u)*4.4)}.top{padding-top:calc(var(--u)*2.5)}.lv{margin:0}.lv button{width:40px;height:40px;font-size:16px}}
.foot{position:static;margin:calc(var(--u)*3) auto 0}