@font-face{font-family:'VFDeva';src:url(fonts/deva-bold.woff2) format('woff2');font-weight:100 1000;unicode-range:U+0900-097F,U+200C-200D,U+25CC,U+A8E0-A8FF;font-display:swap}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#2a1d3a;font-family:'VFDeva',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#fff;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
canvas#c{display:block;touch-action:none;position:fixed;inset:0}
.hide{display:none!important}
.ov{position:fixed;inset:0;z-index:5;display:flex;align-items:center;justify-content:center}
.dim{background:rgba(30,15,45,.6);animation:fadein .25s}
@keyframes fadein{from{opacity:0}}
.pop{animation:popin .35s cubic-bezier(.2,1.6,.4,1)}
@keyframes popin{from{transform:scale(.7);opacity:0}}
.panel{width:min(90vw,370px);max-height:92vh;overflow:auto;background:#fff8ec;color:#3a2340;border-radius:24px;padding:22px 20px 18px;text-align:center;box-shadow:0 14px 44px rgba(0,0,0,.4);border:4px solid #ffd23f}
.panel.wide{width:min(94vw,420px)}
.panel h2{margin:4px 0 12px;font-size:28px;font-weight:900;color:#e8245f;letter-spacing:.5px}
.btn{display:block;width:100%;border:0;border-radius:16px;padding:14px;font-size:20px;font-weight:900;color:#fff;background:linear-gradient(#ff4f7e,#e8245f);box-shadow:0 5px 0 #a3123d;letter-spacing:1px;cursor:pointer;margin:8px 0;font-family:inherit}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #a3123d}
.btn.big{font-size:25px;padding:16px}
.btn.alt{background:linear-gradient(#ffcf4d,#f2a20c);box-shadow:0 5px 0 #b06d00;color:#4a2a00;font-size:16px}
.btn.alt:active{box-shadow:0 2px 0 #b06d00}
.btn:focus-visible,.chip:focus-visible,.node:focus-visible{outline:3px solid #6bf0ff;outline-offset:2px}
.row{display:flex;gap:10px}.row .btn{flex:1}
.link{background:none;border:0;color:#9b6b7a;font-size:14px;text-decoration:underline;margin-top:6px;cursor:pointer;font-family:inherit}
.chip{background:rgba(40,20,55,.7);color:#fff;border:2px solid rgba(255,255,255,.35);border-radius:14px;padding:7px 12px;font-weight:800;font-size:15px;font-family:inherit;cursor:pointer}

/* title */
#title{flex-direction:column;justify-content:space-between;padding:7vh 20px 4vh;background:linear-gradient(rgba(42,29,58,0) 45%,rgba(42,29,58,.6))}
.logo{text-align:center;animation:float 3.2s ease-in-out infinite;position:relative}
@keyframes float{50%{transform:translateY(-8px) rotate(-1deg)}}
.lk{font-size:50px;display:inline-block;animation:spin 6s linear infinite;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
@keyframes spin{to{transform:rotate(360deg)}}
.logo h1{margin:0;font-size:min(17vw,76px);line-height:.92;font-weight:1000;letter-spacing:2px;color:#fff;-webkit-text-stroke:3px #3a2340;paint-order:stroke fill;text-shadow:0 6px 0 #3a2340,0 10px 20px rgba(0,0,0,.35)}
.logo h1 span:first-child{color:#ffd23f}.logo h1 span:last-child{color:#ff4f7e}
.sub{font-size:min(6vw,24px);font-weight:900;white-space:nowrap;margin-top:8px;color:#fff;-webkit-text-stroke:1px #3a2340;paint-order:stroke fill;text-shadow:0 3px 0 #e8245f}
.ribbon{display:inline-block;margin-top:10px;background:#e8245f;color:#ffe14d;font-weight:1000;letter-spacing:1px;font-size:18px;padding:4px 16px 6px;border-radius:10px;transform:rotate(-3deg);box-shadow:0 4px 0 #a3123d}
#tMeera{width:170px;height:190px;display:block;margin:0 auto}
.tstats{display:flex;gap:10px;justify-content:center;margin-bottom:10px}.tstats span{background:rgba(40,20,55,.65);padding:6px 12px;border-radius:12px;font-weight:800}
.tbtns{width:min(86vw,340px)}
.ver{font-size:12px;opacity:.85;margin:6px 0 0;text-align:center;text-shadow:0 1px 2px #000}
#pauseBtn{position:fixed;z-index:4;top:8px;right:8px;width:44px;height:40px;border:0;border-radius:14px;background:rgba(58,35,64,.85);color:#fff;font-weight:900;font-size:16px;letter-spacing:-1px;cursor:pointer}
/* story */
#story{background:#2a1d3a;display:block}
#sc{position:absolute;inset:0;width:100%;height:100%}
#stCard{position:absolute;top:8vh;left:0;right:0;text-align:center;opacity:0;pointer-events:none;z-index:2}
#stCard.go{animation:card 2.6s ease forwards}
@keyframes card{0%{opacity:0;transform:scale(1.3)}15%,70%{opacity:1;transform:scale(1)}100%{opacity:0}}
#stCard b{display:block;font-size:40px;font-weight:1000;color:#ffd23f;-webkit-text-stroke:2px #3a2340;paint-order:stroke fill;letter-spacing:3px}
#stCard span{font-size:20px;font-weight:900;text-shadow:0 2px 4px #000}
#skipBtn{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;z-index:3}
#stBox{position:absolute;left:12px;right:12px;bottom:max(16px,env(safe-area-inset-bottom));min-height:20vh;background:#fff8ec;color:#3a2340;border-radius:22px;padding:28px 18px 26px;border:4px solid #ffd23f;box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:2}
#stName{position:absolute;top:-18px;left:18px;color:#fff;font-weight:900;padding:5px 16px;border-radius:12px;font-size:16px;border:3px solid #fff8ec;background:#e8245f}
#stName.nB{background:#c8202f}#stName.nK{background:#2e8bff}#stName.nR{background:#7a1030}#stName.nT{background:#ff8a1f}#stName.nH{background:#2fa35a}#stName.nL{background:#b05bff}
#stText{margin:0;font-size:min(5vw,21px);line-height:1.35;font-weight:700}
.tapc{position:absolute;right:16px;bottom:8px;font-size:13px;color:#b07a8a;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
#celebrate{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;padding:20px 20px 6vh;background:linear-gradient(rgba(42,29,58,0) 40%,rgba(42,29,58,.8))}
.cel1{font-size:min(11vw,48px);font-weight:1000;color:#ffd23f;-webkit-text-stroke:2px #3a2340;paint-order:stroke fill;animation:popin .6s cubic-bezier(.2,1.6,.4,1)}
.cel2{font-size:min(6vw,26px);font-weight:900;color:#fff;text-shadow:0 3px 0 #e8245f;margin-top:6px}
.credits{margin:16px 0 12px;font-weight:900;font-size:22px}.credits small{display:block;font-weight:600;font-size:14px;margin-top:6px;opacity:.9}
/* map */
#map{display:block;background:#2a1d3a}
.mtop{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;gap:8px;align-items:center;padding:max(10px,env(safe-area-inset-top)) 10px 10px;background:linear-gradient(#2a1d3a,rgba(42,29,58,.85) 70%,rgba(42,29,58,0))}
.mtop b{flex:1;text-align:center;font-size:18px;font-weight:1000;letter-spacing:2px;color:#ffd23f}
#mapScroll{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
#mapInner{position:relative;width:100%}
#mapBg{position:absolute;left:0;top:0;width:100%}
.zone{position:absolute;left:0;right:0;text-align:center;pointer-events:none}
.zone .zt{display:inline-block;margin-top:10px;background:rgba(40,20,55,.75);border:2px solid #ffd23f;border-radius:14px;padding:6px 14px;font-weight:1000;letter-spacing:1px;pointer-events:auto}
.zone .zt small{display:block;font-size:12px;color:#ffd23f;letter-spacing:2px}
.zone .zr{display:inline-block;margin-left:6px;font-size:12px;padding:4px 8px;vertical-align:middle;pointer-events:auto}
.node{position:absolute;width:62px;height:62px;margin:-31px 0 0 -31px;border-radius:50%;border:4px solid #fff;background:radial-gradient(circle at 35% 30%,#ff7aa0,#e8245f);color:#fff;font-weight:1000;font-size:22px;display:flex;align-items:center;justify-content:center;flex-direction:column;box-shadow:0 5px 0 rgba(0,0,0,.35);cursor:pointer;font-family:inherit;padding:0}
.node.boss{width:76px;height:76px;margin:-38px 0 0 -38px;background:radial-gradient(circle at 35% 30%,#ffe066,#f29a0c);color:#4a2a00;font-size:26px}
.node.lock{background:#5a4a68;border-color:#8a7a98;color:#b8a8c8}
.node.done{border-color:#ffd23f}
.node .st{position:absolute;bottom:-17px;font-size:13px;letter-spacing:-1px;color:#555;text-shadow:none;white-space:nowrap}
.node .st i{font-style:normal;color:#5a4a68}.node .st i.on{color:#ffd23f;text-shadow:0 1px 0 #7a4a00}
.node.cur{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.12);box-shadow:0 0 0 8px rgba(255,210,63,.35),0 5px 0 rgba(0,0,0,.35)}}
#mMeera{position:absolute;width:64px;height:72px;margin:-44px 0 0 -100px;pointer-events:none;animation:float 1.4s ease-in-out infinite}
#spinBtn{position:fixed;z-index:4;right:12px;bottom:max(14px,env(safe-area-inset-bottom));width:74px;height:74px;border-radius:50%;border:4px solid #fff;background:conic-gradient(#ff2d6f 0 60deg,#ffd23f 0 120deg,#2ec4ff 0 180deg,#5bdc5b 0 240deg,#ff8a1f 0 300deg,#b05bff 0);color:#fff;font-weight:1000;font-size:12px;box-shadow:0 5px 0 rgba(0,0,0,.35);cursor:pointer;text-shadow:0 1px 2px #000;font-family:inherit}
#spinBtn.used{filter:grayscale(.8);opacity:.75}
#spinBtn.ready{animation:pulse 1.2s infinite}
/* level card */
.cchap{font-weight:900;color:#b05bff;letter-spacing:2px;font-size:13px}
.cgames{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:8px 0}
.cgames span{background:#3a2340;color:#fff;border-radius:12px;padding:6px 10px;font-weight:800;font-size:13px}
.cgoal{font-size:18px;font-weight:900;margin:6px 0}
.srules{list-style:none;padding:0;margin:8px 0 6px;font-size:14px;font-weight:700;color:#7a5a6a}
.srules li{margin:2px 0}.srules b{color:#f2a20c}
#cRival{width:110px;height:110px;display:block;margin:-6px auto -4px}
/* result */
.rtitle{font-size:34px;font-weight:1000;color:#e8245f;margin:0}
.rtitle.win{color:#ff8a1f;-webkit-text-stroke:1px #3a2340}
.rsub{font-weight:800;color:#7a5a6a;margin-bottom:6px}
.rstars{font-size:46px;letter-spacing:6px;margin:4px 0}
.rstars i{font-style:normal;color:#d9cbd9;display:inline-block;transition:transform .3s}
.rstars i.on{color:#ffd23f;text-shadow:0 3px 0 #c98a00;animation:starpop .45s cubic-bezier(.2,1.8,.4,1)}
@keyframes starpop{from{transform:scale(0) rotate(-90deg)}}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0}
.stats div{background:#f6e7d2;border-radius:12px;padding:8px 4px;font-size:12px;font-weight:700;color:#7a5a6a}
.stats b{display:block;font-size:22px;color:#3a2340}
.gsc{font-size:13px;font-weight:700;color:#7a5a6a;margin:2px 0 6px}
.tip{font-size:14px;color:#7a5a6a;margin:6px 0}
/* shop */
.shead{display:flex;align-items:center;justify-content:space-between}
.shead h2{margin:0}.shead .chip{background:#3a2340}
#sPreview{width:120px;height:130px;display:block;margin:4px auto}
.tabs{display:flex;gap:6px;margin:6px 0 10px}
.tab{flex:1;border:0;border-radius:12px;padding:9px 2px;font-weight:900;font-size:13px;background:#ecdcc8;color:#7a5a6a;font-family:inherit;cursor:pointer}
.tab.on{background:#e8245f;color:#fff}
.item{display:flex;align-items:center;gap:10px;background:#f6e7d2;border-radius:14px;padding:8px 10px;margin:6px 0;text-align:left}
.item .ic{font-size:26px;width:36px;text-align:center}
.item .nm{flex:1;font-weight:900}.item .nm small{display:block;font-weight:600;color:#9b7b8a;font-size:12px}
.item button{border:0;border-radius:12px;padding:9px 12px;font-weight:900;font-family:inherit;min-width:86px;cursor:pointer;background:#ffcf4d;color:#4a2a00;box-shadow:0 3px 0 #b06d00}
.item button.eq{background:#5bdc5b;color:#0d3d14;box-shadow:0 3px 0 #2a8a3a}
.item button.no{background:#d9cbd9;color:#8a7a98;box-shadow:none}
/* wheel */
#wheelCv{width:260px;height:260px;display:block;margin:6px auto}
#wheelRes{font-size:22px;font-weight:1000;color:#e8245f;min-height:30px}
/* settings */
.toggles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 12px}
.tog{border:0;border-radius:14px;padding:12px 6px;font-weight:900;font-family:inherit;font-size:15px;background:#5bdc5b;color:#0d3d14;cursor:pointer}
.tog.off{background:#d9cbd9;color:#8a7a98}
.small{font-size:13px;color:#7a5a6a;text-align:left;line-height:1.4}
#fade{position:fixed;inset:0;background:#2a1d3a;z-index:9;opacity:0;pointer-events:none;transition:opacity .25s}
#fade.on{opacity:1}
#toast{position:fixed;left:50%;top:18%;transform:translateX(-50%);z-index:8;background:#3a2340;color:#ffd23f;font-weight:900;padding:10px 18px;border-radius:14px;border:3px solid #ffd23f;opacity:0;transition:opacity .3s;pointer-events:none;white-space:nowrap}
#toast.on{opacity:1}