/* Layout: full-bleed 3D candy planet as the play stage, a scrolling saga map of ten candy worlds, frosted HUD and sugar-glass sheets. One deliberate candy-sky look. */
:root{
  --sky-hi:#cfeaff; --sky-mid:#86c1ff; --sky-lo:#3b78e2;
  --ink:#1b2a5c; --ink-2:#4b5e98;
  --glass:rgba(255,255,255,.88); --edge:#ffffff; --edge-shadow:#a9c2ec;
  --candy:#ff3d78; --candy-dk:#c8165a; --gold:#ffc52b; --gold-dk:#c58c00; --mint:#22c389; --mint-dk:#128a5e; --hard:#ff5b3a; --super:#8a3cf0;
  --f-fun:'Fredoka','Nunito','Noto Sans Georgian',ui-rounded,'Arial Rounded MT Bold',system-ui,sans-serif;
  --f-text:'Nunito','Noto Sans Georgian',system-ui,sans-serif;
  --wo:3px 0 0 #fff,-3px 0 0 #fff,0 3px 0 #fff,0 -3px 0 #fff,2px 2px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff;
  --io:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),1.5px 1.5px 0 var(--ink),-1.5px 1.5px 0 var(--ink),1.5px -1.5px 0 var(--ink),-1.5px -1.5px 0 var(--ink);
  color-scheme: light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;overflow:hidden;background:radial-gradient(130% 90% at 50% 40%,var(--sky-hi) 0%,var(--sky-mid) 50%,var(--sky-lo) 100%);color:var(--ink);font-family:var(--f-text);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
#stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.layer{position:fixed;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;align-items:center;
  padding-top:calc(env(safe-area-inset-top,0px) + 10px);padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.lia svg,.lia{display:block}

/* ---------- HUD ---------- */
.hud{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:560px}
.hud-card{pointer-events:auto;width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:8px;padding:8px 14px 8px 8px;background:var(--glass);border:2px solid var(--edge);border-radius:26px;box-shadow:0 10px 28px rgba(27,42,92,.18),inset 0 -4px 0 rgba(120,160,235,.22);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.who{display:flex;align-items:center;gap:8px;min-width:0}
.avatar{flex:none;width:50px;height:50px;border-radius:50%;background:radial-gradient(circle at 50% 35%,#e9f5ff,#a9cdfb);overflow:hidden;box-shadow:inset 0 0 0 2.5px #fff,0 3px 0 var(--edge-shadow)}
.avatar svg{width:100%;height:100%}
.avatar.bounce{animation:bump .5s ease-out}
.cap{display:block;font:800 11px/1.15 var(--f-text);letter-spacing:.04em;color:var(--ink-2)}
.num{display:block;font:700 22px/1.05 var(--f-fun);font-variant-numeric:tabular-nums;color:var(--ink)}
.moves{display:grid;place-items:center;align-content:center;width:76px;height:76px;margin-block:-20px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff9cbf,var(--candy) 55%,var(--candy-dk));color:#fff;box-shadow:0 5px 0 #a3104a,0 10px 22px rgba(200,22,90,.35),inset 0 -4px 0 rgba(0,0,0,.12),inset 0 0 0 3px rgba(255,255,255,.55)}
.moves b{font:700 34px/1 var(--f-fun);font-variant-numeric:tabular-nums}
.moves .cap{color:#ffe3ee;font-size:10.5px}
.moves.low{animation:throb .9s ease-in-out infinite}
.scorebox{justify-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:6px;min-width:0}
.scorebox .num,.scorebox .cap{text-align:right}
.starbar{position:relative;width:min(118px,26vw);height:10px;border-radius:6px;background:#dbe6fa;box-shadow:inset 0 1px 2px rgba(27,42,92,.22);margin-right:6px}
.starbar i{position:absolute;inset:0 auto 0 0;width:0;border-radius:6px;background:linear-gradient(90deg,#ffe07a,var(--gold))}
.starbar .tick{position:absolute;top:50%;width:17px;height:17px;transform:translate(-50%,-50%);color:#b9c8e6;filter:drop-shadow(0 1px 0 #fff)}
.starbar .tick.on{color:var(--gold);filter:drop-shadow(0 1px 0 var(--gold-dk))}
.goals{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:6px;padding:4px 12px 4px 5px;border-radius:999px;background:var(--glass);border:2px solid #fff;box-shadow:0 6px 16px rgba(27,42,92,.14);font:700 17px/1 var(--f-fun);font-variant-numeric:tabular-nums;color:var(--ink)}
.chip svg{width:28px;height:28px;flex:none}
.chip svg.ok{width:18px;height:18px;color:var(--mint)}
.chip.done{background:#e8fff4;border-color:#c4f3dc}
.chip.bump{animation:bump .35s ease-out}
.bubble{position:absolute;left:6px;top:calc(100% + 4px);max-width:min(270px,78vw);padding:10px 14px;border-radius:18px 18px 18px 6px;background:#fff;color:var(--ink);font:800 14px/1.35 var(--f-text);box-shadow:0 8px 22px rgba(27,42,92,.22);pointer-events:none;animation:bubbleIn .3s cubic-bezier(.2,1.4,.4,1);z-index:2;text-wrap:balance}
.bubble::before{content:"";position:absolute;left:18px;top:-8px;border:8px solid transparent;border-bottom-color:#fff;border-top:0}

/* ---------- tray ---------- */
.tray{display:flex;justify-content:center;align-items:center;gap:8px;max-width:100%}
.boost{pointer-events:auto;position:relative;flex:none;width:54px;height:54px;border-radius:50%;border:none;background:var(--glass);box-shadow:0 5px 0 var(--edge-shadow),0 10px 20px rgba(27,42,92,.18),inset 0 0 0 2px #fff;display:grid;place-items:center;cursor:pointer;transition:transform .15s,box-shadow .15s;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.boost svg{width:36px;height:36px}
.boost .cnt{position:absolute;top:-5px;right:-5px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--candy);color:#fff;font:700 13px/22px var(--f-fun);box-shadow:0 2px 0 var(--candy-dk),0 0 0 2px #fff}
.boost.empty svg{opacity:.4}
.boost.empty .cnt{background:#9aa9c9;box-shadow:0 0 0 2px #fff}
.boost.on{transform:translateY(-6px) scale(1.07);box-shadow:0 0 0 4px var(--gold),0 11px 0 var(--edge-shadow),0 16px 26px rgba(27,42,92,.25),inset 0 0 0 2px #fff}
.boost:active{transform:translateY(3px)}
.boost.small{width:44px;height:44px;margin-left:2px}
.boost.small svg{width:24px;height:24px}

/* ---------- floating text ---------- */
#fx{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.pop{position:absolute;transform:translate(-50%,-50%);font:700 22px/1 var(--f-fun);color:#fff;text-shadow:var(--io),0 5px 10px rgba(27,42,92,.35);animation:rise .95s ease-out forwards;white-space:nowrap}
.pop.big{font-size:30px;color:#fff6c9}
.banner{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);font:900 clamp(30px,9vw,58px)/1.1 var(--f-text);color:var(--candy);text-align:center;white-space:nowrap;text-shadow:var(--wo),0 7px 0 var(--ink),0 12px 24px rgba(27,42,92,.35);animation:bannerIn 1.25s cubic-bezier(.2,1.4,.4,1) forwards}
.banner.gold{color:var(--gold)}
.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 92px);transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);padding:11px 16px;border-radius:16px;background:rgba(27,42,92,.92);color:#fff;font:800 14px/1.4 var(--f-text);text-align:center;pointer-events:none;animation:toastIn .25s ease-out;text-wrap:balance;z-index:9}
#flash{position:fixed;inset:0;background:#fff;opacity:0;pointer-events:none}
#flash.go{animation:flash .45s ease-out}
#flash.red{background:#ff4b3a}
.confetti{position:fixed;top:-20px;width:10px;height:16px;border-radius:3px;pointer-events:none;animation:fall linear forwards;z-index:9}

/* ---------- map ---------- */
#map{position:fixed;inset:0;display:flex;flex-direction:column;background:#9bd2ff}
.map-bar{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding-top:calc(env(safe-area-inset-top,0px) + 10px);padding-bottom:10px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:linear-gradient(rgba(255,255,255,.92),rgba(255,255,255,.78));box-shadow:0 6px 20px rgba(27,42,92,.12);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.brand{display:flex;align-items:center;gap:10px;min-width:0}
.brand .avatar{width:46px;height:46px}
.title{margin:0;font:900 clamp(20px,5.6vw,28px)/1.05 var(--f-text);color:var(--candy);text-shadow:var(--wo),0 4px 0 var(--ink);text-wrap:balance}
.bar-r{display:flex;gap:8px;align-items:center;flex:none}
.pill{display:flex;align-items:center;gap:5px;padding:6px 10px 6px 7px;border-radius:999px;background:#fff;box-shadow:0 3px 0 var(--edge-shadow);font:700 16px/1 var(--f-fun);font-variant-numeric:tabular-nums}
.pill svg{width:20px;height:20px;color:var(--gold)}
.iconbtn{pointer-events:auto;flex:none;width:44px;height:44px;border-radius:50%;border:none;background:#fff;box-shadow:0 4px 0 var(--edge-shadow),inset 0 0 0 2px #eef4ff;display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.iconbtn svg{width:24px;height:24px}
#mapScroll{flex:1;position:relative;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:contain}
#mapInner{position:relative;width:100%}
.world{position:absolute;left:0;right:0;overflow:hidden}
.world .wpath{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.wbanner{position:absolute;left:50%;transform:translateX(-50%);bottom:26px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 20px 12px;border-radius:22px;background:rgba(255,255,255,.9);box-shadow:0 6px 0 rgba(27,42,92,.12),0 12px 28px rgba(27,42,92,.16);text-align:center;width:max-content;max-width:calc(100% - 32px)}
.wbanner .cap{letter-spacing:.12em}
.wbanner b{font:900 20px/1.15 var(--f-text);color:var(--ink);text-wrap:balance}
.wbanner .rec{display:flex;align-items:center;gap:6px;font:800 12px/1.2 var(--f-text);color:var(--ink-2)}
.wbanner .rec svg{width:18px;height:18px}
.decor{position:absolute;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(27,42,92,.15))}
.node{position:absolute;transform:translate(-50%,-50%);border:none;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer}
.node .coin{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font:700 22px/1 var(--f-fun);color:#fff;background:radial-gradient(circle at 35% 30%,#93d3ff,#2f86ff 60%,#1d5fd6);box-shadow:0 5px 0 #1747a8,inset 0 0 0 3px rgba(255,255,255,.55),0 10px 18px rgba(27,42,92,.25);text-shadow:0 2px 0 rgba(0,0,0,.18)}
.node.hard .coin{box-shadow:0 5px 0 #1747a8,0 0 0 4px var(--hard),inset 0 0 0 3px rgba(255,255,255,.55),0 10px 18px rgba(27,42,92,.25)}
.node.super .coin{box-shadow:0 5px 0 #1747a8,0 0 0 4px var(--super),inset 0 0 0 3px rgba(255,255,255,.55),0 10px 18px rgba(27,42,92,.25)}
.node.current .coin{width:66px;height:66px;font-size:26px;background:radial-gradient(circle at 35% 30%,#ffa3c4,var(--candy) 60%,var(--candy-dk));box-shadow:0 5px 0 #a3104a,0 0 0 5px #fff,0 0 0 10px rgba(255,61,120,.35);animation:throb 1.5s ease-in-out infinite}
.node.next .coin{background:radial-gradient(circle at 35% 30%,#ffffff,#dde7f8 70%,#c4d2ec);color:#7b8db8;text-shadow:none;box-shadow:0 5px 0 #a5b4d3,inset 0 0 0 3px #fff}
.node.next{cursor:default}
.node.boss .coin{width:72px;height:72px}
.node .mini{display:flex;gap:1px}
.node .mini svg{width:14px;height:14px;color:rgba(255,255,255,.75);filter:drop-shadow(0 1px 0 rgba(27,42,92,.35))}
.node .mini svg.on{color:var(--gold)}
.node .tag{font:900 10px/1 var(--f-text);letter-spacing:.06em;padding:3px 6px;border-radius:6px;color:#fff;background:var(--hard)}
.node.super .tag{background:var(--super)}
.node .bk{position:absolute;right:-8px;top:-6px;width:28px;height:28px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 0 var(--edge-shadow)}
.node .bk svg{width:18px;height:18px}
.pin{position:absolute;transform:translate(-50%,-100%);width:60px;height:60px;border-radius:50%;border:4px solid #fff;overflow:hidden;background:radial-gradient(circle at 50% 35%,#e9f5ff,#a9cdfb);box-shadow:0 8px 18px rgba(27,42,92,.3);animation:bob 2.4s ease-in-out infinite;transition:left 1s ease,top 1s ease;pointer-events:none}
.pin svg{width:100%;height:100%}
.fog{position:absolute;left:0;right:0;top:0;pointer-events:none;transition:height 1.4s cubic-bezier(.3,.7,.3,1);background:linear-gradient(to bottom,#f2f6ff 0%,#eef4ff calc(100% - 240px),rgba(238,244,255,.85) calc(100% - 120px),rgba(238,244,255,0) 100%);z-index:2}
.fog .cl{position:absolute;bottom:40px;width:180px;height:90px;border-radius:50%;background:radial-gradient(closest-side,#fff,rgba(255,255,255,.85) 60%,rgba(255,255,255,0));animation:drift 9s ease-in-out infinite alternate}
.fog .msg{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;width:max-content;max-width:calc(100% - 40px);text-align:center;font:800 15px/1.4 var(--f-text);color:var(--ink-2);text-wrap:balance}
.fog .msg svg{width:30px;height:30px;color:#9fb0d6}
.map-foot{position:relative;z-index:4;display:flex;justify-content:center;
  padding-top:10px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 14px);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.55) 40%)}
.map-foot .btn{min-width:min(320px,100%);font-size:19px}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:6;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  padding-block:calc(env(safe-area-inset-top,0px) + 16px) calc(env(safe-area-inset-bottom,0px) + 16px);
  background:rgba(20,34,82,.38);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:fadeIn .2s ease-out}
.sheet{width:min(390px,100%);max-height:100%;overflow:auto;background:linear-gradient(180deg,#ffffff,#edf4ff);border-radius:30px;padding:22px 20px 20px;text-align:center;box-shadow:0 8px 0 #b7cbef,0 24px 60px rgba(20,34,82,.35);border:3px solid #fff;animation:sheetIn .4s cubic-bezier(.2,1.3,.4,1);display:flex;flex-direction:column;gap:13px;align-items:center}
.sheet h2{margin:0;font:900 27px/1.18 var(--f-text);color:var(--candy);text-shadow:var(--wo),0 5px 0 var(--ink);text-wrap:balance}
.sheet p{margin:0;font:700 15px/1.5 var(--f-text);color:var(--ink-2);max-width:34ch;text-wrap:pretty}
.sheet .lead{font:900 12px/1 var(--f-text);letter-spacing:.1em;color:var(--ink-2)}
.portrait{width:96px;height:96px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 35%,#e9f5ff,#a9cdfb);box-shadow:0 0 0 5px #fff,0 8px 0 5px rgba(27,42,92,.08);flex:none}
.portrait svg{width:100%;height:100%}
.say{position:relative;padding:12px 16px;border-radius:18px;background:#fff;box-shadow:0 4px 0 #d3e0f6;font:800 15px/1.45 var(--f-text);color:var(--ink);text-wrap:pretty;max-width:34ch}
.say::before{content:"";position:absolute;left:50%;top:-9px;transform:translateX(-50%);border:9px solid transparent;border-bottom-color:#fff;border-top:0}
.tagline{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.tagline span{font:900 11px/1 var(--f-text);letter-spacing:.06em;padding:5px 8px;border-radius:8px;background:#e3ecfb;color:var(--ink-2)}
.tagline .hard{background:var(--hard);color:#fff}
.tagline .super{background:var(--super);color:#fff}
.goal-big{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.goal-big .gb{display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:18px;background:#fff;box-shadow:0 4px 0 #d3e0f6;font:700 20px/1 var(--f-fun);font-variant-numeric:tabular-nums}
.goal-big .gb small{font:800 13px/1.2 var(--f-text);color:var(--ink-2)}
.goal-big svg{width:36px;height:36px;flex:none}
.btn{pointer-events:auto;font:900 17px/1 var(--f-text);padding:16px 22px;border-radius:18px;border:none;color:#fff;background:linear-gradient(180deg,#ff77a4,var(--candy));box-shadow:0 5px 0 var(--candy-dk),0 10px 20px rgba(200,22,90,.28);cursor:pointer;min-width:150px;text-shadow:0 1px 0 rgba(0,0,0,.15)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--candy-dk)}
.btn.ghost{color:var(--ink);text-shadow:none;background:linear-gradient(180deg,#fff,#e5eeff);box-shadow:0 5px 0 #b3c6ea,0 8px 16px rgba(27,42,92,.12)}
.btn.ghost:active{box-shadow:0 2px 0 #b3c6ea}
.btn.mint{background:linear-gradient(180deg,#52e3ac,var(--mint));box-shadow:0 5px 0 var(--mint-dk),0 10px 20px rgba(18,138,94,.28)}
.btn.mint:active{box-shadow:0 2px 0 var(--mint-dk)}
.btn.sel{box-shadow:0 0 0 3px var(--candy),0 5px 0 #b3c6ea}
.stack{display:flex;flex-direction:column;gap:12px;width:100%}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:100%}
.row .btn{flex:1 1 120px;min-width:0}
.row.langs{flex-wrap:nowrap;gap:8px}
.row.langs .btn{flex:1 1 0;padding:14px 6px;font-size:15px}
.bigstars{display:flex;gap:6px;align-items:flex-end;justify-content:center}
.bigstars svg{width:58px;height:58px;color:#d6e0f1}
.bigstars svg:nth-child(2){width:74px;height:74px;margin-bottom:10px}
.bigstars svg.on{color:var(--gold);animation:starPop .55s cubic-bezier(.2,1.6,.4,1) both;filter:drop-shadow(0 3px 0 var(--gold-dk))}
.final{display:flex;flex-direction:column;align-items:center;gap:2px}
.final b{font:700 34px/1 var(--f-fun);font-variant-numeric:tabular-nums}
.rewards{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.rewards span{display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:14px;background:#fff7d6;font:700 16px/1 var(--f-fun);box-shadow:0 3px 0 #f1dc93}
.rewards svg{width:28px;height:28px}
.howto{display:flex;flex-direction:column;gap:10px;text-align:left;width:100%}
.howto div{display:flex;gap:10px;align-items:flex-start;font:700 14px/1.45 var(--f-text);color:var(--ink-2)}
.howto svg{width:30px;height:30px;flex:none}
.recipes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
.recipe{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border-radius:18px;background:#fff;box-shadow:0 4px 0 #d3e0f6;font:800 13px/1.3 var(--f-text);color:var(--ink);text-align:center;min-width:0}
.recipe svg{width:44px;height:44px}
.recipe.locked{background:#eef2fa;color:#97a6c6}
.recipe.locked svg{opacity:.35}

#loader{position:fixed;inset:0;display:grid;place-items:center;font:800 18px/1.5 var(--f-text);color:#fff;text-shadow:var(--io);text-align:center;z-index:10;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%) scale(.6)}15%{opacity:1;transform:translate(-50%,-60%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-170%) scale(1)}}
@keyframes bannerIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(-8deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(2deg)}30%{transform:translate(-50%,-50%) scale(1) rotate(0)}78%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-80%) scale(.92)}}
@keyframes sheetIn{0%{opacity:0;transform:translateY(30px) scale(.85)}100%{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes throb{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes starPop{0%{opacity:0;transform:scale(.2) rotate(-40deg)}100%{opacity:1;transform:none}}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes bubbleIn{from{opacity:0;transform:translateY(-6px) scale(.9)}to{opacity:1;transform:none}}
@keyframes flash{0%{opacity:.75}100%{opacity:0}}
@keyframes bob{0%,100%{transform:translate(-50%,-100%) translateY(0)}50%{transform:translate(-50%,-100%) translateY(-6px)}}
@keyframes drift{from{transform:translateX(-20px)}to{transform:translateX(20px)}}
@keyframes fall{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(110vh) rotate(720deg)}}
/* ---- map: themed worlds ---- */
#map{background:var(--mapbg,#9bd2ff)}
.world{background:linear-gradient(to top,var(--b0),var(--b1) 55%,var(--b2))}
.world::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.22),transparent 40%),radial-gradient(circle at 80% 70%,rgba(255,255,255,.16),transparent 45%);background-size:100% 900px}
.w-retro::before{background:linear-gradient(rgba(255,255,255,0) 0 92%,rgba(255,106,213,.45) 92% 100%),linear-gradient(90deg,rgba(255,255,255,0) 0 92%,rgba(255,106,213,.35) 92% 100%);background-size:60px 60px}
.w-cosmos::before,.w-spooky::before{background:radial-gradient(1.5px 1.5px at 10% 20%,#fff,transparent),radial-gradient(1px 1px at 40% 60%,#fff,transparent),radial-gradient(2px 2px at 70% 30%,#fff,transparent),radial-gradient(1px 1px at 85% 80%,#fff,transparent),radial-gradient(1.5px 1.5px at 25% 85%,#fff,transparent);background-size:220px 260px}
.w-ocean::before{background:repeating-radial-gradient(circle at 30% 120%,rgba(255,255,255,.08) 0 18px,transparent 18px 46px)}
.w-future::before{background:linear-gradient(115deg,transparent 0 45%,rgba(255,255,255,.35) 50%,transparent 55%);background-size:100% 700px}
.sparkles{position:absolute;inset:0;pointer-events:none}
.sparkles i{position:absolute;width:10px;height:10px;background:radial-gradient(closest-side,#fff,rgba(255,255,255,0));border-radius:50%;animation:twinkle 3.6s ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.95}}
.decor.float{animation:floaty 6s ease-in-out infinite alternate}
@keyframes floaty{from{transform:translateY(-10px) rotate(-4deg)}to{transform:translateY(10px) rotate(4deg)}}
.wpath .ants{animation:ants 2.4s linear infinite}
@keyframes ants{to{stroke-dashoffset:-34}}
.wbanner{bottom:60px}
.wbanner .wnum{position:absolute;top:-22px;left:50%;transform:translateX(-50%);width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:700 22px/1 var(--f-fun);color:#fff;background:radial-gradient(circle at 35% 30%,var(--n0),var(--n1) 60%,var(--n2));box-shadow:0 4px 0 rgba(0,0,0,.18),0 0 0 4px #fff}
.wbanner{padding-top:28px}
/* ---- nodes: theme colours, animated numbers ---- */
.node{animation:nodeIn .55s cubic-bezier(.3,1.6,.5,1) backwards;animation-delay:calc(var(--d,0)*40ms)}
@keyframes nodeIn{from{opacity:0;transform:translate(-50%,-50%) scale(.3)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.node:not(.next) .coin{background:radial-gradient(circle at 35% 30%,var(--n0,#93d3ff),var(--n1,#2f86ff) 60%,var(--n2,#1d5fd6));box-shadow:0 5px 0 color-mix(in srgb,var(--n2,#1747a8) 80%,#000),inset 0 0 0 3px rgba(255,255,255,.55),0 10px 18px rgba(27,42,92,.25)}
.node .num{position:relative;z-index:1;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.22)}
.node:not(.next) .coin{position:relative;overflow:hidden}
.node:not(.next) .coin::after{content:"";position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.65) 48%,transparent 60%);transform:translateX(-120%);animation:shine 3.4s ease-in-out infinite;animation-delay:calc(var(--d,0)*-0.23s)}
@keyframes shine{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.node.done .coin{transform:scale(.94)}
.node.current .coin{animation:throb 1.5s ease-in-out infinite,hop 3s ease-in-out infinite}
.node.current::after{content:"";position:absolute;left:50%;top:33px;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;border:4px solid var(--n0,#ff7eb6);animation:ripple 1.8s ease-out infinite;pointer-events:none}
@keyframes ripple{from{transform:scale(1);opacity:.9}to{transform:scale(1.9);opacity:0}}
@keyframes hop{0%,80%,100%{translate:0 0}88%{translate:0 -8px}94%{translate:0 0}}
.node.current .num{font-size:28px}
/* grand level every 20 */
.node.grand .coin{width:92px;height:92px;font-size:32px;background:radial-gradient(circle at 35% 28%,#fff6c8,#ffcf40 45%,#e08e00);box-shadow:0 6px 0 #a35f00,0 0 0 5px #fff,0 0 0 11px color-mix(in srgb,var(--n1) 60%,transparent),0 14px 26px rgba(27,42,92,.35)}
.node.grand.next .coin{background:radial-gradient(circle at 35% 28%,#fff,#e9dcb8 70%,#cdbb8a)}
.node.grand .num{font-size:34px;color:#7a3b00;text-shadow:0 2px 0 rgba(255,255,255,.6)}
.node.grand .crown{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:46px;height:36px;z-index:2;animation:crownBob 2.2s ease-in-out infinite;filter:drop-shadow(0 3px 2px rgba(0,0,0,.25))}
.node.grand .crown svg{width:100%;height:100%}
@keyframes crownBob{0%,100%{transform:translateX(-50%) rotate(-6deg)}50%{transform:translateX(-50%) translateY(-5px) rotate(6deg)}}
.node.grand .rays{position:absolute;left:50%;top:46px;width:170px;height:170px;margin:-85px 0 0 -85px;border-radius:50%;z-index:-1;pointer-events:none;background:repeating-conic-gradient(from 0deg,rgba(255,236,150,.75) 0 10deg,rgba(255,236,150,0) 10deg 24deg);-webkit-mask:radial-gradient(closest-side,#000 40%,transparent);mask:radial-gradient(closest-side,#000 40%,transparent);animation:spin 14s linear infinite}
.node.grand.next .rays{opacity:.35}
@keyframes spin{to{transform:rotate(360deg)}}
.node .gname{font:900 11px/1 var(--f-text);letter-spacing:.08em;text-transform:uppercase;color:#7a3b00;background:#fff3c4;padding:4px 8px;border-radius:8px;box-shadow:0 2px 0 rgba(122,59,0,.25)}
/* ---- level transition ---- */
#ltr{position:fixed;inset:0;z-index:400;pointer-events:none;display:none}
#ltr.go{display:block}
#ltr .lt-sw{position:absolute;inset:-20%;background:repeating-radial-gradient(circle at 50% 50%,var(--n1) 0 6%,var(--n0) 6% 12%,#fff 12% 13%,var(--n2) 13% 19%,var(--n0) 19% 25%);clip-path:circle(0% at 50% 50%);animation:ltIn 1.6s cubic-bezier(.6,0,.3,1) forwards}
#ltr .lt-sw::after{content:"";position:absolute;inset:0;background:repeating-conic-gradient(from 0deg,rgba(255,255,255,.18) 0 12deg,rgba(255,255,255,0) 12deg 30deg);animation:spin 6s linear infinite}
@keyframes ltIn{0%{clip-path:circle(0% at 50% 50%)}26%{clip-path:circle(75% at 50% 50%)}66%{clip-path:circle(75% at 50% 50%);opacity:1}100%{clip-path:circle(75% at 50% 50%);opacity:0}}
#ltr .lt-txt{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;text-shadow:0 4px 0 rgba(0,0,0,.18);animation:ltTxt 1.6s cubic-bezier(.3,1.5,.5,1) forwards}
#ltr .lt-txt b{font:700 92px/1 var(--f-fun)}
#ltr .lt-cap{font:900 18px/1 var(--f-text);letter-spacing:.14em;text-transform:uppercase;background:rgba(0,0,0,.18);padding:6px 12px;border-radius:999px}
#ltr .lt-w{font:800 16px/1.2 var(--f-text)}
#ltr.grand .lt-cap{background:#ffcf40;color:#7a3b00;text-shadow:none}
#ltr.super .lt-cap{background:var(--super)}
#ltr.hard .lt-cap{background:var(--hard)}
@keyframes ltTxt{0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-12deg)}20%{opacity:0}34%{opacity:1;transform:translate(-50%,-50%) scale(1.12) rotate(3deg)}44%{transform:translate(-50%,-50%) scale(1)}66%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(1.25)}}
 @media (prefers-reduced-motion: reduce){.node,.node .num,.node.current .coin,.node.current::after,.decor.float,.sparkles i,.node.grand .rays,.node.grand .crown,.wpath .ants{animation:none}}
.tagline .grandtag{background:#ffcf40;color:#7a3b00}

.sheet.worldup .wnext{display:flex;flex-direction:column;align-items:center;gap:4px;margin:6px auto 14px;padding:12px 22px;border-radius:20px;background:linear-gradient(135deg,#ffe7f3,#e8f0ff);box-shadow:inset 0 0 0 3px #fff}
.sheet.worldup .wnext b{font:900 22px/1.2 var(--f-text);color:var(--ink)}
/* worlds book + visiting a finished park */
.sheet.worlds .wlist{display:flex;flex-direction:column;gap:10px;width:100%;margin:6px 0 14px}
.wcard{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;background:linear-gradient(120deg,var(--b0),var(--b1) 60%,var(--b2));box-shadow:inset 0 0 0 3px rgba(255,255,255,.7),0 4px 0 rgba(27,42,92,.12);text-align:left}
.wcard .wn{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--n1);font:700 20px/1 var(--f-fun);box-shadow:0 3px 0 rgba(0,0,0,.15)}
.wcard .wt{flex:1;min-width:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.86)}
.wcard .wt b{flex:1 1 100%;font:900 15px/1.2 var(--f-text);color:var(--ink)}
.wcard small{display:flex;align-items:center;gap:4px;padding:3px 8px 3px 4px;border-radius:999px;background:#fff;box-shadow:0 2px 0 #d3e0f6;font:800 12.5px/1.2 var(--f-text);color:var(--ink-2)}
.wcard small b{font:700 15px/1 var(--f-fun);color:var(--ink)}
.wcard small svg{width:20px;height:20px;flex:none;color:var(--gold)}
.wcard small.here{background:none;box-shadow:none;padding:0}
.wcard small.here{color:var(--mint-dk)}
.wcard .btn{min-width:0;padding:8px 14px;font-size:13px;margin-left:auto}
.wcard.lock{filter:grayscale(.75);opacity:.7}
#park.visiting .p-side,#park.visiting #pFoot,#park.visiting .wallet,#park.visiting #pBubble{display:none!important}
#visitBar{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);width:min(400px,calc(100% - 32px));pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 14px 14px;border-radius:22px;background:var(--glass);border:2px solid #fff;box-shadow:0 10px 28px rgba(27,42,92,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center}
#visitBar b{font:900 16px/1.25 var(--f-text);color:var(--ink);text-wrap:balance}
#visitBar .btn{margin-top:4px}

/* ---------- LI Park hub ---------- */
#pMarkers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.p-head{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:640px}
.p-top{display:flex;align-items:center;gap:8px;width:100%}
.pav{position:relative;border:none;padding:0;cursor:pointer;pointer-events:auto;overflow:visible;width:46px;height:46px}
.p-top .iconbtn{width:40px;height:40px}
.p-top .iconbtn svg{width:22px;height:22px}
.pav svg{border-radius:50%}
.plv{position:absolute;right:-6px;bottom:-4px;min-width:22px;height:22px;padding:0 5px;border-radius:11px;background:var(--gold);color:var(--ink);font:700 13px/22px var(--f-fun);text-align:center;box-shadow:0 2px 0 var(--gold-dk),0 0 0 2px #fff}
.wallet{flex:1;display:flex;gap:4px;justify-content:center;min-width:0}
.wpill{pointer-events:auto;position:relative;display:flex;align-items:center;gap:1px;height:36px;padding:0 3px 0 2px;border:none;border-radius:999px;background:rgba(18,30,74,.6);color:#fff;font:700 15px/1 var(--f-fun);font-variant-numeric:tabular-nums;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3),0 4px 12px rgba(18,30,74,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;min-width:0}
.wpill svg{width:29px;height:29px;flex:none}
.wpill.star{padding-right:8px;cursor:default}
.wpill.star svg{color:var(--gold);width:24px;height:24px;margin-left:4px;filter:drop-shadow(0 1px 0 var(--gold-dk))}
.wpill b{min-width:2ch;text-align:center;padding:0 2px;white-space:nowrap}
.wpill .plus{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;background:linear-gradient(#5be8b3,var(--mint));box-shadow:0 2px 0 var(--mint-dk);font:900 17px/1 var(--f-text)}
.wpill.bump,.rewards span.bump{animation:bump .35s ease-out}
.p-info{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.p-info span{display:flex;align-items:center;gap:4px;padding:4px 10px 4px 5px;border-radius:999px;background:rgba(255,255,255,.88);box-shadow:0 3px 10px rgba(27,42,92,.14);font:700 14px/1 var(--f-fun);color:var(--ink);font-variant-numeric:tabular-nums}
.p-info svg{width:20px;height:20px;flex:none}
.p-info .pbst{background:linear-gradient(#fff3b0,#ffd54a)}
.pb{max-width:min(300px,82vw)}
.p-side{position:absolute;z-index:1;display:flex;flex-direction:column;gap:20px}
.p-side.r{right:max(12px,env(safe-area-inset-right,0px));top:calc(env(safe-area-inset-top,0px) + 112px)}
.p-side.l{left:max(12px,env(safe-area-inset-left,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 128px)}
.sbtn{pointer-events:auto;position:relative;width:54px;height:54px;border:none;border-radius:18px;background:linear-gradient(#ffffff,#e4eeff);box-shadow:0 4px 0 #a9bde6,0 8px 16px rgba(27,42,92,.2);display:grid;place-items:center;cursor:pointer;padding:0;color:var(--ink)}
.sbtn svg{width:36px;height:36px}
.sbtn>span,.fbtn>span{position:absolute;left:50%;top:calc(100% + 3px);transform:translateX(-50%);font:900 10.5px/1.1 var(--f-text);color:#fff;text-shadow:var(--io);white-space:nowrap;pointer-events:none}
.sbtn:active,.fbtn:active{transform:translateY(3px)}
.sbtn.on{background:linear-gradient(#fff6c2,#ffd54a);box-shadow:0 4px 0 #d9a300,0 8px 16px rgba(27,42,92,.2)}
.sbtn.dim{opacity:.6}
.dot{position:absolute;right:-5px;top:-5px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--candy);box-shadow:0 0 0 2px #fff;font:900 11px/18px var(--f-text);color:#fff;font-style:normal;text-align:center;animation:throb 1.2s ease-in-out infinite}
.pulse{animation:throb 1.1s ease-in-out infinite}
.p-foot{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:center;gap:16px;width:100%;max-width:520px;padding-bottom:16px}
.fbtn{pointer-events:auto;position:relative;flex:none;width:66px;height:66px;border:none;border-radius:22px;background:linear-gradient(#ffffff,#dfeaff);box-shadow:0 5px 0 #a3b8e3,0 10px 20px rgba(27,42,92,.22);display:grid;place-items:center;cursor:pointer;padding:0}
.fbtn svg{width:46px;height:46px}
.fbtn .new{position:absolute;top:-9px;right:-12px;padding:3px 6px;border-radius:8px;background:var(--candy);color:#fff;font:900 10px/1 var(--f-text);font-style:normal;box-shadow:0 0 0 2px #fff;animation:throb 1.2s infinite}
.btn.play{flex:1;max-width:210px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 16px 13px;border-radius:24px;background:linear-gradient(180deg,#86ef7f,#2fbf4f);box-shadow:0 6px 0 #1f8a37,0 12px 24px rgba(31,138,55,.35),inset 0 2px 0 rgba(255,255,255,.5)}
.btn.play:active{box-shadow:0 2px 0 #1f8a37}
.btn.play small{font:900 13px/1 var(--f-text);opacity:.95}
.btn.play b{font:700 30px/1 var(--f-fun)}
.p-bar{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 14px);width:min(420px,calc(100% - 32px));pointer-events:auto;display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px;border-radius:24px;background:var(--glass);box-shadow:0 10px 28px rgba(27,42,92,.25);border:2px solid #fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:barIn .3s cubic-bezier(.2,1.3,.4,1)}
.p-bar p{margin:0;font:800 13.5px/1.35 var(--f-text);color:var(--ink-2);text-align:center;text-wrap:balance}
.p-bar p b{color:var(--ink)}
.p-bar .row{gap:14px;align-items:center}
.rbtn{width:58px;height:58px;border-radius:50%;border:none;display:grid;place-items:center;cursor:pointer;background:linear-gradient(#fff,#e2ecff);box-shadow:0 4px 0 #a9bde6;color:var(--ink);flex:none}
.rbtn svg{width:28px;height:28px}
.rbtn.ok{background:linear-gradient(#5be8b3,var(--mint));box-shadow:0 4px 0 var(--mint-dk);color:#fff}
.rbtn.x{background:linear-gradient(#ff9a9a,#ff5b5b);box-shadow:0 4px 0 #c63a3a;color:#fff}
.rbtn[disabled]{opacity:.4;cursor:default}
.seg{display:flex;padding:4px;border-radius:16px;background:#e2ebfb;gap:4px}
.seg button{border:none;padding:11px 14px;border-radius:12px;background:none;font:900 14px/1 var(--f-text);color:var(--ink-2);cursor:pointer}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 0 #b3c6ea}
.isheet{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 14px);width:min(420px,calc(100% - 32px));pointer-events:auto;padding:12px 14px 14px;border-radius:24px;background:linear-gradient(#fff,#eef4ff);box-shadow:0 8px 0 #b7cbef,0 18px 40px rgba(20,34,82,.3);border:3px solid #fff;display:flex;flex-direction:column;gap:10px;animation:barIn .3s cubic-bezier(.2,1.3,.4,1)}
.ihead{display:flex;align-items:center;gap:10px}
.ihead img{width:58px;height:58px;border-radius:14px;background:radial-gradient(circle at 50% 40%,#f2f8ff,#d4e5fb);flex:none;object-fit:contain}
.ihead .nm{flex:1;min-width:0}
.ihead b{display:block;font:900 17px/1.2 var(--f-text);color:var(--ink)}
.lvst{display:flex;gap:2px;margin-top:4px}
.lvst svg{width:17px;height:17px;color:#cfd9ec}
.lvst svg.on{color:var(--gold);filter:drop-shadow(0 1px 0 var(--gold-dk))}
.xbtn{width:38px;height:38px;border-radius:50%;border:none;background:#e5edfb;display:grid;place-items:center;cursor:pointer;flex:none;color:var(--ink-2);padding:0}
.xbtn svg{width:18px;height:18px}
.istats{display:flex;gap:8px;flex-wrap:wrap}
.istats span{display:flex;align-items:center;gap:5px;padding:6px 10px 6px 6px;border-radius:12px;background:#fff;box-shadow:0 2px 0 #d3e0f6;font:700 14px/1 var(--f-fun);color:var(--ink)}
.istats svg{width:20px;height:20px}
.ibank{position:relative;height:26px;border-radius:13px;background:#dfe8f8;overflow:hidden}
.ibank i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#ffe07a,var(--gold));transition:width .4s}
.ibank span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 13px/1 var(--f-fun);color:var(--ink)}
.iwarn{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:12px;background:#fff1ec;color:#c2401f;font:800 13px/1.35 var(--f-text)}
.iwarn svg{width:22px;height:22px;flex:none}
.iok{display:flex;gap:6px;align-items:center;color:var(--mint-dk);font:800 13px/1.3 var(--f-text)}
.iok svg{width:18px;height:18px;color:var(--mint)}
.iacts{display:grid;gap:8px}
.abtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 3px;border:none;border-radius:14px;background:linear-gradient(#fff,#e4edff);box-shadow:0 3px 0 #b3c6ea;cursor:pointer;font:800 11.5px/1.15 var(--f-text);color:var(--ink);min-width:0;text-align:center}
.abtn>svg{width:26px;height:26px}
.abtn small{display:flex;align-items:center;gap:2px;font:700 12.5px/1 var(--f-fun)}
.abtn small svg{width:15px;height:15px}
.abtn.gold{background:linear-gradient(#fff4c2,#ffd54a);box-shadow:0 3px 0 #d9a300}
.abtn.arm{background:linear-gradient(#ffd0d0,#ff8f8f);box-shadow:0 3px 0 #c63a3a}
.abtn[disabled]{opacity:.5;cursor:default}
.mk{position:absolute;left:0;top:0;will-change:transform}
.mk>*{position:absolute;left:0;top:0;transform:translate(-50%,-100%)}
.mk.click>*{pointer-events:auto;cursor:pointer}
.mcoin{display:flex;align-items:center;gap:3px;padding:3px 10px 3px 3px;border-radius:999px;border:none;background:#fff;box-shadow:0 3px 0 #e0b84a,0 6px 12px rgba(27,42,92,.25);font:700 14px/1 var(--f-fun);color:#7a4b00;animation:mkbob 1.6s ease-in-out infinite;white-space:nowrap}
.mcoin svg{width:26px;height:26px}
.mcoin.full{background:linear-gradient(#fff6c8,#ffd64d);animation:mkbob .8s ease-in-out infinite}
.far .mcoin{padding:3px}
.far .mcoin b{display:none}
.far .mcoin svg{width:24px;height:24px}
.mwarn{width:32px;height:32px;border-radius:50%;border:none;background:#ff5b3a;color:#fff;display:grid;place-items:center;font:900 20px/1 var(--f-text);box-shadow:0 0 0 3px #fff,0 6px 12px rgba(27,42,92,.3);animation:mkbob 1.2s ease-in-out infinite;padding:0}
.zsign{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px 14px;border-radius:18px;border:none;background:linear-gradient(#fff,#e9f1ff);box-shadow:0 5px 0 #a9bde6,0 12px 26px rgba(27,42,92,.3);font:900 14px/1.15 var(--f-text);color:var(--ink);width:max-content;max-width:180px;text-align:center;animation:mkbob 2s ease-in-out infinite}
.zsign svg{width:26px;height:26px;color:#8da0c8}
.zsign .zp{display:flex;gap:4px}
.zsign .zp i{width:18px;height:6px;border-radius:3px;background:#d4def0}
.zsign .zp i.on{background:var(--mint)}
.zsign.ready{box-shadow:0 5px 0 var(--mint-dk),0 0 0 4px var(--mint),0 12px 26px rgba(27,42,92,.3)}
.zsign.ready svg{color:var(--mint-dk)}
.mwish{display:flex;align-items:center;gap:5px;padding:5px 10px 5px 5px;border-radius:14px 14px 14px 4px;background:#fff;box-shadow:0 4px 12px rgba(27,42,92,.25);font:800 12px/1.2 var(--f-text);color:var(--ink);white-space:nowrap;animation:wishIn 3.2s ease-out forwards}
.mwish svg{width:22px;height:22px;flex:none}
.flyc{position:fixed;left:0;top:0;width:30px;height:30px;margin:-15px 0 0 -15px;pointer-events:none;z-index:9;will-change:transform}
@keyframes mkbob{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,calc(-100% - 6px))}}
@keyframes wishIn{0%{opacity:0;transform:translate(-50%,-80%) scale(.6)}10%{opacity:1;transform:translate(-50%,-100%) scale(1)}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-125%)}}

/* ---------- big sheets: build & shop ---------- */
.sheet.big{width:min(560px,100%);padding:0;gap:0;text-align:left;align-items:stretch}
.shead{position:sticky;top:0;z-index:2;display:flex;flex-direction:column;gap:10px;padding:16px 16px 10px;background:linear-gradient(#ffffff,#f2f7ff);border-bottom:2px solid #e2ebfa}
.shead .ttl{display:flex;align-items:center;gap:10px}
.shead h2{font-size:24px;flex:1;min-width:0}
.wmini{display:flex;gap:6px;flex:none}
.wmini span{display:flex;align-items:center;gap:3px;padding:4px 9px 4px 4px;border-radius:999px;background:#eef3fc;font:700 14px/1 var(--f-fun);color:var(--ink)}
.wmini svg{width:22px;height:22px}
.tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;margin:0 -16px;padding-left:16px;padding-right:16px}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;border:none;padding:10px 14px;border-radius:12px;background:#e5edfb;color:var(--ink-2);font:900 13px/1 var(--f-text);cursor:pointer}
.tab.on{background:var(--candy);color:#fff;box-shadow:0 3px 0 var(--candy-dk)}
.sbody{padding:14px 16px 18px;display:flex;flex-direction:column;gap:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:10px}
.bcard{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 8px 10px;border:none;border-radius:18px;background:#fff;box-shadow:0 4px 0 #d3e0f6;cursor:pointer;text-align:center;min-width:0;color:var(--ink)}
.bcard img{width:100%;aspect-ratio:1;border-radius:12px;background:radial-gradient(circle at 50% 40%,#f4f9ff,#d4e5fb);object-fit:contain}
.bcard b{font:900 13.5px/1.2 var(--f-text);text-wrap:balance}
.bmeta{display:flex;gap:7px;justify-content:center;flex-wrap:wrap;font:700 12px/1 var(--f-fun);color:var(--ink-2)}
.bmeta span{display:flex;align-items:center;gap:2px}
.bmeta svg{width:15px;height:15px}
.price{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;margin-top:auto;padding:9px 6px;border-radius:12px;background:linear-gradient(#5be8b3,var(--mint));box-shadow:0 3px 0 var(--mint-dk);color:#fff;font:700 16px/1 var(--f-fun);text-shadow:0 1px 0 rgba(0,0,0,.15)}
.price svg{width:21px;height:21px;flex:none}
.bcard.poor .price{background:linear-gradient(#ffb4b4,#ff7a7a);box-shadow:0 3px 0 #c84a4a}
.bcard.locked{background:#eef2fa;cursor:default}
.bcard.locked img{filter:grayscale(1) brightness(1.08);opacity:.5}
.bcard.locked .price{background:#cdd6e8;box-shadow:0 3px 0 #a9b5cc;color:var(--ink-2);text-shadow:none;font:900 11.5px/1.2 var(--f-text)}
.bcard.locked .price svg{width:16px;height:16px;color:var(--ink-2)}
.ptag{position:absolute;top:12px;left:12px;width:30px;height:30px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 2px 6px rgba(27,42,92,.2)}
.ptag svg{width:22px;height:22px}
.scard{display:flex;align-items:center;gap:12px;padding:12px;border-radius:20px;background:#fff;box-shadow:0 4px 0 #d3e0f6}
.scard .ic{width:60px;height:60px;flex:none;display:grid;place-items:center;border-radius:16px;background:radial-gradient(circle at 50% 40%,#fff8db,#ffe39a)}
.scard .ic svg{width:44px;height:44px}
.scard .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.scard .tx b{font:900 15px/1.2 var(--f-text);color:var(--ink)}
.scard .tx small{font:800 12px/1.3 var(--f-text);color:var(--ink-2)}
.scard .amt{display:flex;align-items:center;gap:3px;font:700 17px/1 var(--f-fun);color:var(--ink)}
.scard .amt svg{width:20px;height:20px}
.buyb{flex:none;min-width:92px;display:flex;align-items:center;justify-content:center;gap:5px;padding:12px;border:none;border-radius:14px;font:900 14px/1 var(--f-text);color:#fff;cursor:pointer;background:linear-gradient(#5be8b3,var(--mint));box-shadow:0 4px 0 var(--mint-dk);text-shadow:0 1px 0 rgba(0,0,0,.15);white-space:nowrap}
.buyb:active{transform:translateY(2px);box-shadow:0 2px 0 var(--mint-dk)}
.buyb svg{width:20px;height:20px;flex:none}
.buyb.violet{background:linear-gradient(#b48cff,#7d4dff);box-shadow:0 4px 0 #5530c2}
.buyb.cash{background:linear-gradient(#86ef7f,#2fbf4f);box-shadow:0 4px 0 #1f8a37;font:700 17px/1 var(--f-fun)}
.buyb.gem{background:linear-gradient(#ff9ad1,#ff4fa3);box-shadow:0 4px 0 #c42f7a;font:700 16px/1 var(--f-fun)}
.buyb.poor{filter:saturate(.35) brightness(1.05)}
.buyb[disabled]{background:#cdd6e8;box-shadow:0 4px 0 #a9b5cc;color:var(--ink-2);text-shadow:none;cursor:default;font:700 14px/1 var(--f-fun)}
.buyb .xn{font:700 13px/1 var(--f-fun);opacity:.9;margin-right:2px}
.offer{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;padding:16px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#ff6fa8,#8a5cff);box-shadow:0 5px 0 #5a2fb8}
.offer.b2{background:linear-gradient(135deg,#29c6ff,#2f6bff);box-shadow:0 5px 0 #1d46b8}
.offer.b3{background:linear-gradient(135deg,#ffb347,#ff6a3d);box-shadow:0 5px 0 #c4441f}
.offer h3{margin:0;font:900 20px/1.15 var(--f-text);text-shadow:0 2px 0 rgba(0,0,0,.18)}
.offer small{font:800 12.5px/1.35 var(--f-text);opacity:.95;max-width:40ch}
.offer .items{display:flex;gap:8px;flex-wrap:wrap}
.offer .items span{display:flex;align-items:center;gap:4px;padding:6px 10px 6px 6px;border-radius:12px;background:rgba(255,255,255,.22);font:700 16px/1 var(--f-fun)}
.offer .items svg{width:26px;height:26px}
.offer .buyb{align-self:flex-end;min-width:130px}
.offer .shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);transform:translateX(-100%);animation:shine 3.4s ease-in-out infinite;pointer-events:none}
.piggy{display:flex;align-items:center;gap:10px}
.piggy>svg{width:52px;height:52px;flex:none}
.piggy .pbar{flex:1;height:14px;border-radius:7px;background:rgba(255,255,255,.3);overflow:hidden}
.piggy .pbar i{display:block;height:100%;background:linear-gradient(90deg,#fff6b0,#ffd23f)}
.piggy b{display:flex;align-items:center;gap:3px;font:700 15px/1 var(--f-fun)}
.piggy b svg{width:20px;height:20px}
.bkcard{display:flex;flex-direction:column;gap:10px;padding:12px;border-radius:20px;background:#fff;box-shadow:0 4px 0 #d3e0f6}
.bkh{display:flex;align-items:center;gap:10px}
.bkh>svg{width:46px;height:46px;flex:none}
.bkh b{display:block;font:900 15px/1.2 var(--f-text)}
.bkh small{font:800 12px/1.2 var(--f-text);color:var(--ink-2)}
.bkb{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bkb .buyb{min-width:0;padding:10px 4px;font:700 14px/1 var(--f-fun);gap:3px}
.bkb .buyb svg{width:17px;height:17px}
.pack{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:18px 10px 12px;border-radius:20px;background:#fff;box-shadow:0 4px 0 #d3e0f6;text-align:center}
.pack b{font:700 22px/1 var(--f-fun);color:var(--ink)}
.pack .buyb{width:100%;min-width:0}
.pic{position:relative;width:76px;height:62px}
.pic svg{position:absolute;width:46px;height:46px;left:15px;top:8px;filter:drop-shadow(0 3px 3px rgba(27,42,92,.2))}
.pic .c2{left:2px;top:14px}.pic .c3{left:30px;top:16px}.pic .c4{left:16px;top:0}
.ribbon{position:absolute;top:-9px;left:50%;transform:translateX(-50%);padding:4px 8px;border-radius:8px;font:900 9.5px/1 var(--f-text);color:#fff;background:var(--candy);white-space:nowrap;box-shadow:0 2px 0 var(--candy-dk);letter-spacing:.03em}
.ribbon.best{background:#7d4dff;box-shadow:0 2px 0 #5530c2}
.rwd{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.rwd span{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:78px;padding:12px 10px;border-radius:18px;background:#fff;box-shadow:0 4px 0 #d3e0f6;font:700 18px/1 var(--f-fun);animation:starPop .5s cubic-bezier(.2,1.6,.4,1) both}
.rwd span:nth-child(2){animation-delay:.08s}.rwd span:nth-child(3){animation-delay:.16s}.rwd span:nth-child(4){animation-delay:.24s}
.rwd svg{width:42px;height:42px}
svg.gold{color:var(--gold)}
.needp{display:flex;align-items:center;justify-content:center;gap:6px}
.needp svg{width:26px;height:26px}
.chestbox{width:130px;height:130px;animation:chestShake 1.1s ease-in-out infinite}
.chestbox svg{width:100%;height:100%}
.chestbox.open{animation:chestOpen .7s cubic-bezier(.2,1.6,.4,1) forwards}
.boffer{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 50% 35%,#fff,#dbe8ff);box-shadow:0 0 0 5px #fff,0 8px 0 5px rgba(27,42,92,.08)}
.boffer svg{width:70px;height:70px}
p.small{font-size:13px}
.btn.violet{background:linear-gradient(180deg,#b48cff,#7d4dff);box-shadow:0 5px 0 #5530c2,0 10px 20px rgba(85,48,194,.28)}
.btn.violet:active{box-shadow:0 2px 0 #5530c2}
.btn.gemb{background:linear-gradient(180deg,#ff9ad1,#ff4fa3);box-shadow:0 5px 0 #c42f7a,0 10px 20px rgba(196,47,122,.25)}
.btn svg.bi{width:22px;height:22px;vertical-align:-5px;margin:0 6px 0 0}
.rewards svg.gold{color:var(--gold)}
.tasks{display:flex;flex-direction:column;gap:10px;width:100%}
.task{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:18px;background:#fff;box-shadow:0 4px 0 #d3e0f6;text-align:left}
.task>svg{width:42px;height:42px;flex:none}
.task .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.task .tx b{font:900 15px/1.2 var(--f-text);color:var(--ink)}
.cost{display:flex;gap:10px;font:700 16px/1 var(--f-fun);color:var(--ink)}
.cost span{display:flex;align-items:center;gap:3px}
.cost svg{width:20px;height:20px}
.cost .star svg{color:var(--gold)}
.cost .no{color:#e0452a}
.task.done{background:#e9fff5}
.task.done .tx b{color:var(--mint-dk)}
.task.lock{opacity:.55}
.task .btn{min-width:0;padding:12px 14px;font-size:14px;flex:none}
.task svg.ok{width:30px;height:30px;color:var(--mint)}
.task svg.lk{width:24px;height:24px;color:#9fb0d6}
.have{display:inline-flex;align-items:center;gap:3px;font:700 16px/1 var(--f-fun);color:var(--ink);margin-left:4px}
.have svg{width:18px;height:18px;color:var(--gold)}
.wheel-wrap{position:relative;width:min(280px,72vw);aspect-ratio:1;margin:8px auto}
.wheel{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 8px #ffd34d,0 0 0 12px #c58c00,0 14px 30px rgba(27,42,92,.35),inset 0 0 0 3px rgba(255,255,255,.6);transition:transform 4.3s cubic-bezier(.12,.7,.08,1);overflow:hidden}
.wl{position:absolute;inset:0}
.wlab{position:absolute;left:50%;top:7%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;font:700 15px/1 var(--f-fun);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.wlab svg{width:34px;height:34px;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.wpin{position:absolute;left:50%;top:-16px;transform:translateX(-50%);width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:30px solid var(--candy);filter:drop-shadow(0 3px 0 var(--candy-dk));z-index:2}
.whub{position:absolute;left:50%;top:50%;width:60px;height:60px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff7c2,#ffc52b 60%,#c58c00);box-shadow:0 4px 0 #9b6a00,0 0 0 4px #fff;display:grid;place-items:center}
.whub svg{width:40px;height:40px}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes barIn{0%{opacity:0;transform:translate(-50%,30px) scale(.9)}100%{opacity:1;transform:translate(-50%,0)}}
@keyframes bob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes shine{0%,55%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes chestShake{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-6deg)}85%{transform:rotate(6deg)}92%{transform:rotate(-3deg)}}
@keyframes chestOpen{0%{transform:scale(1)}40%{transform:scale(1.25) rotate(-4deg)}100%{transform:scale(1.1);filter:drop-shadow(0 0 24px #ffd34d)}}

/* ---------- v4: lives, events, LINA Pass ---------- */
.p-side.lt{left:max(12px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 112px)}
.sbtn.ev{background:linear-gradient(#fff3d6,#ffd08a);box-shadow:0 4px 0 #d99a3a,0 8px 16px rgba(27,42,92,.2);animation:evGlow 2.4s ease-in-out infinite}
.sbtn.ev.halloween{background:linear-gradient(#f3eaff,#c9a8ff);box-shadow:0 4px 0 #8f63d6,0 8px 16px rgba(27,42,92,.2)}
.sbtn.ev.winter{background:linear-gradient(#f6fcff,#bfe3ff);box-shadow:0 4px 0 #7fb0de,0 8px 16px rgba(27,42,92,.2)}
.sbtn.ev.spring{background:linear-gradient(#fff4f8,#ffc7dc);box-shadow:0 4px 0 #e08aac,0 8px 16px rgba(27,42,92,.2)}
.sbtn.ev.summer{background:linear-gradient(#f0fffb,#a8f0e0);box-shadow:0 4px 0 #46b89e,0 8px 16px rgba(27,42,92,.2)}
@keyframes evGlow{0%,100%{filter:none}50%{filter:brightness(1.08) drop-shadow(0 0 8px rgba(255,214,90,.9))}}
.tokb{position:absolute;right:-9px;top:-8px;min-width:22px;height:20px;padding:0 5px;border-radius:10px;background:var(--gold);color:var(--ink);box-shadow:0 2px 0 var(--gold-dk),0 0 0 2px #fff;font:700 12px/20px var(--f-fun);font-style:normal;text-align:center}
.pday{pointer-events:auto;cursor:pointer;background:linear-gradient(#fff,#ffeec2)!important}
.playw{position:relative;flex:1;max-width:210px;min-width:0;display:flex}
.playw .btn.play{max-width:none;width:100%}
.plives{position:absolute;left:50%;top:-25px;transform:translateX(-50%);z-index:1;display:flex;align-items:center;gap:1px;height:31px;padding:0 10px 0 3px;border:none;border-radius:999px;background:#fff;box-shadow:0 3px 0 #f0b3c8,0 6px 14px rgba(27,42,92,.22);font:700 16px/1 var(--f-fun);color:var(--ink);cursor:pointer;pointer-events:auto;white-space:nowrap;font-variant-numeric:tabular-nums}
.plives svg{width:27px;height:27px;flex:none}
.plives b{min-width:1.1ch;text-align:center}
.plives small{margin-left:6px;font:700 12.5px/1 var(--f-fun);color:var(--ink-2)}
.plives.inf{background:linear-gradient(#fff,#ffe1ec)}
.plives.zero b{color:var(--candy)}
.mplay{position:relative;display:flex;justify-content:center;width:min(320px,100%)}
.mplay .btn{width:100%}
.lifenote{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink-2)}
.lifenote svg{width:18px;height:18px;flex:none}
.lives-m{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.hearts{display:flex;gap:4px;justify-content:center}
.hearts svg{width:46px;height:46px;filter:drop-shadow(0 3px 0 rgba(200,22,90,.22))}
.hearts svg.on{animation:starPop .45s cubic-bezier(.2,1.6,.4,1) both}
.hearts svg.on:nth-child(2){animation-delay:.05s}.hearts svg.on:nth-child(3){animation-delay:.1s}.hearts svg.on:nth-child(4){animation-delay:.15s}.hearts svg.on:nth-child(5){animation-delay:.2s}
.hearts svg.off{filter:grayscale(1);opacity:.28}
.hearts svg.hinf{width:78px;height:78px}
.sheet .lnext{display:flex;gap:8px;align-items:baseline;justify-content:center;margin:0}
.lnext b{font:700 24px/1 var(--f-fun);color:var(--ink);font-variant-numeric:tabular-nums}
.btn.gemb{background:linear-gradient(180deg,#ff9ad1,#ff4fa3);box-shadow:0 5px 0 #c42f7a,0 10px 20px rgba(196,47,122,.25)}
.btn.gemb:active{box-shadow:0 2px 0 #c42f7a}
.btn[disabled]{opacity:.55;cursor:default}
.tab .tdot{display:inline-grid;place-items:center;min-width:17px;height:17px;margin-left:5px;padding:0 4px;border-radius:9px;background:var(--candy);color:#fff;font:900 10.5px/1 var(--f-text);font-style:normal;vertical-align:1px}
.evbody{gap:12px}
.evban{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;padding:16px;border-radius:22px;color:#fff;background:linear-gradient(135deg,#ff7eb6,#8a5cff);box-shadow:0 5px 0 rgba(40,30,110,.35);flex:none}
.evban::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 88% 18%,rgba(255,255,255,.38),transparent 38%),radial-gradient(circle at 8% 115%,rgba(255,255,255,.28),transparent 45%),repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 14px,transparent 14px 28px);pointer-events:none}
.evban .evico{position:relative;z-index:1;width:64px;height:64px;flex:none;display:grid;place-items:center;border-radius:20px;background:rgba(255,255,255,.26);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.evban .evico svg{width:50px;height:50px;filter:drop-shadow(0 3px 0 rgba(0,0,0,.15))}
.evban>div{position:relative;z-index:1;min-width:0}
.evban b{display:block;font:900 20px/1.15 var(--f-text);text-shadow:0 2px 0 rgba(0,0,0,.2);text-wrap:balance}
.evban small{display:block;margin-top:5px;font:800 12.5px/1.35 var(--f-text);opacity:.96;text-wrap:pretty}
.evban.daily{background:linear-gradient(135deg,#ffb04a,#ff5f8f)}
.evban.quests{background:linear-gradient(135deg,#3ad1a0,#1e8fd6)}
.evban.pass{background:linear-gradient(135deg,#ffcf4a,#ff7a3a 55%,#d6409f)}
.evban.none{background:linear-gradient(135deg,#9fb4dc,#6c86c4)}
.ev-halloween{background:linear-gradient(135deg,#ff9a3c,#9a4fd8 62%,#4b3aa8)}
.ev-winter{background:linear-gradient(135deg,#9adbff,#4a8ff0 60%,#3a5fd0)}
.ev-spring{background:linear-gradient(135deg,#ffb3d1,#ff7eb6 52%,#6cc95c)}
.ev-summer{background:linear-gradient(135deg,#ffd84a,#ffa63a 45%,#22b8c0)}
.evh{margin:6px 0 0;font:900 15px/1.2 var(--f-text);color:var(--ink)}
.sheet p.evp{margin:0 auto;font-size:13px;text-align:center}
.login7{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.lday{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 4px;border-radius:16px;background:#fff;box-shadow:0 3px 0 #d3e0f6;min-width:0;text-align:center}
.lday small{font:900 11px/1 var(--f-text);color:var(--ink-2)}
.lday .lri{display:flex;justify-content:center;align-items:center;height:42px}
.lday .lri svg{width:38px;height:38px;flex:none}
.lday .lri svg+svg{margin-left:-15px}
.lday>b{font:700 14px/1.1 var(--f-fun);color:var(--ink);min-height:15px}
.lday.big{grid-column:span 2;background:linear-gradient(#fff7da,#ffe08a);box-shadow:0 3px 0 #e2b23a}
.lday.big .lri svg{width:54px;height:54px}
.lday.big>b{font-size:13px}
.lday.today{background:linear-gradient(#fff,#ddfff0);box-shadow:0 0 0 3px var(--mint),0 4px 0 var(--mint-dk)}
.lday.big.today{background:linear-gradient(#fff7da,#ffe08a)}
.lday.done{opacity:.5}
.lday.next{filter:saturate(.85)}
.lday .buyb{min-width:0;width:100%;padding:8px 4px;font-size:12.5px}
.lchk{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--mint);color:#fff;flex:none;box-shadow:0 2px 0 var(--mint-dk)}
.lchk svg{width:17px;height:17px}
.lday .lchk{position:absolute;top:-6px;right:-6px;width:24px;height:24px}
.lday .lchk svg{width:14px;height:14px}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.wday{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 1px;border-radius:12px;background:#fff;box-shadow:0 2px 0 #d3e0f6;min-width:0}
.wday small{font:900 10px/1 var(--f-text);color:var(--ink-2);white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:clip}
.wday svg{width:26px;height:26px}
.wday b{font:700 11.5px/1 var(--f-fun);color:var(--ink);white-space:nowrap}
.wday.on{background:linear-gradient(#fff3c4,#ffd54a);box-shadow:0 2px 0 #d9a300}
.scard.dayb .ic{background:radial-gradient(circle at 50% 40%,#fff,#ffe39a)}
.qcard{display:flex;align-items:center;gap:10px;padding:12px;border-radius:20px;background:#fff;box-shadow:0 4px 0 #d3e0f6}
.qcard .ic{width:48px;height:48px;flex:none;display:grid;place-items:center;border-radius:14px;background:#eef4ff}
.qcard .ic svg{width:34px;height:34px}
.qcard .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.qcard .tx>b{font:900 14px/1.25 var(--f-text);color:var(--ink);text-wrap:balance}
.qcard .buyb{min-width:72px;padding:11px 8px}
.qcard.done{box-shadow:0 0 0 3px var(--mint),0 4px 0 var(--mint-dk)}
.qcard.got{opacity:.6}
.qbar,.pbar2{position:relative;height:18px;border-radius:9px;background:#e5edfb;overflow:hidden;box-shadow:inset 0 2px 0 rgba(27,42,92,.06)}
.qbar i,.pbar2 i{position:absolute;left:0;top:0;bottom:0;border-radius:9px;background:linear-gradient(#7ff0c4,var(--mint));transition:width .5s}
.qbar em,.pbar2 em{position:absolute;inset:0;display:grid;place-items:center;font:700 11.5px/1 var(--f-fun);font-style:normal;color:var(--ink)}
.qr{display:flex;gap:5px;flex-wrap:wrap}
.rchip{display:inline-flex;align-items:center;gap:2px;padding:3px 7px 3px 3px;border-radius:999px;background:#f1f5fd;font:700 12.5px/1 var(--f-fun);color:var(--ink);white-space:nowrap}
.rchip svg{width:21px;height:21px;flex:none}
.rchip.bset svg{width:18px;height:18px}
.rchip.bset svg+svg{margin-left:-8px}
.rchip.dec{padding:2px}
.rchip img{width:40px;height:40px;object-fit:contain;border-radius:10px;background:radial-gradient(circle at 50% 40%,#f2f8ff,#d4e5fb)}
.qbonus{display:flex;align-items:center;gap:12px;padding:12px;border-radius:20px;background:linear-gradient(#fff6d8,#ffe7a6);box-shadow:0 4px 0 #e2b23a}
.qbonus .ic svg{width:52px;height:52px}
.qbonus .tx{flex:1;min-width:0}
.qbonus .tx b{display:block;font:900 14px/1.25 var(--f-text);color:var(--ink);text-wrap:balance}
.qdots{display:flex;gap:6px;margin-top:7px}
.qdots i{width:14px;height:14px;border-radius:50%;background:rgba(122,75,0,.18)}
.qdots i.on{background:var(--mint);box-shadow:0 0 0 2px #fff}
.buyb.sm{min-width:64px;padding:9px 8px;font-size:12.5px}
.buyb svg.bl{width:17px;height:17px;color:var(--ink-2)}
.pprog{display:flex;align-items:center;gap:10px}
.pprog .ptl{font:900 15px/1 var(--f-text);color:var(--ink);white-space:nowrap}
.pprog .pbar2{flex:1;height:22px;border-radius:11px}
.pbar2 i{background:linear-gradient(#ffe27a,#ffb13a)}
.pbar2.ev i{background:linear-gradient(#ffd07a,#ff8a3a)}
.btn.premb{align-self:center}
.premon{align-self:center;display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;background:linear-gradient(#fff4c2,#ffd54a);font:900 13px/1 var(--f-text);color:#7a4b00;box-shadow:0 3px 0 #d9a300}
.premon svg{width:22px;height:22px}
.ptrack{position:relative;display:flex;flex-direction:column;gap:8px}
.ptrack::before{content:'';position:absolute;left:50%;top:26px;bottom:20px;width:6px;margin-left:-3px;border-radius:3px;background:#dfe7f6}
.phdr{display:grid;grid-template-columns:1fr 40px 1fr;gap:8px;font:900 12px/1 var(--f-text);color:var(--ink-2);text-align:center}
.phdr span:last-child{color:#b07800}
.prow{position:relative;display:grid;grid-template-columns:1fr 40px 1fr;gap:8px;align-items:stretch}
.ptier{position:relative;z-index:1;display:grid;place-items:center;align-self:center;width:36px;height:36px;margin:auto;border-radius:50%;background:#dfe7f6;color:var(--ink-2);font:700 15px/1 var(--f-fun);box-shadow:0 0 0 3px #fff}
.prow.on .ptier{background:linear-gradient(#ffe27a,#ffb13a);color:#7a4b00}
.prow.cur .ptier{background:#fff;color:var(--ink);box-shadow:0 0 0 3px var(--gold)}
.pcell{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;min-height:58px;padding:8px 6px;border-radius:16px;background:#fff;box-shadow:0 3px 0 #d3e0f6;min-width:0}
.pcell.prem{background:linear-gradient(#fff9e6,#ffeec0);box-shadow:0 3px 0 #e8c56a}
.pcell.can{box-shadow:0 0 0 3px var(--mint),0 3px 0 var(--mint-dk)}
.pcell.lock{filter:saturate(.55);opacity:.72}
.pcell.got{opacity:.5}
.pcell .rchip{background:rgba(241,245,253,.9)}
.pcell .lchk{width:24px;height:24px}
.pcell .lchk svg{width:14px;height:14px}
.plock{display:grid;place-items:center;color:#b49a5a}
.plock svg{width:18px;height:18px}
.evtok{display:flex;align-items:center;justify-content:center;gap:10px}
.evtok .big svg{width:56px;height:56px;filter:drop-shadow(0 3px 0 rgba(27,42,92,.15))}
.evtok b{display:block;font:700 40px/1 var(--f-fun);color:var(--ink)}
.evtok small{display:block;font:800 12.5px/1.2 var(--f-text);color:var(--ink-2)}
.emiles{display:flex;flex-direction:column;gap:8px}
.emile{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:18px;background:#fff;box-shadow:0 3px 0 #d3e0f6}
.emile .need{display:flex;align-items:center;gap:3px;min-width:66px;font:700 17px/1 var(--f-fun);color:var(--ink)}
.emile .need svg{width:28px;height:28px}
.emile .er{flex:1;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.emile .er small{font:900 12px/1.2 var(--f-text);color:var(--ink-2)}
.emile.on{box-shadow:0 0 0 3px var(--mint),0 3px 0 var(--mint-dk)}
.emile.got{opacity:.55}
.evrow{justify-content:center;gap:10px}
.evrow .btn{min-width:0;flex:1;max-width:180px}
.ecal{display:flex;flex-direction:column;gap:8px}
.ecrow{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:18px;color:#fff;opacity:.75}
.ecrow.on{opacity:1;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--gold)}
.ecrow .evico{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:14px;background:rgba(255,255,255,.28)}
.ecrow .evico svg{width:34px;height:34px}
.ecrow .tx{flex:1;min-width:0}
.ecrow b{display:block;font:900 14.5px/1.2 var(--f-text);text-shadow:0 1px 0 rgba(0,0,0,.18)}
.ecrow small{display:block;margin-top:3px;font:800 12px/1.3 var(--f-text);opacity:.95}
.ecrow em{flex:none;padding:5px 8px;border-radius:8px;background:#fff;color:var(--ink);font:900 11px/1 var(--f-text);font-style:normal}
.rwd span.rdec{font:900 13px/1.2 var(--f-text);max-width:140px;text-align:center}
.rwd span.rdec img{width:72px;height:72px;object-fit:contain}
@media (max-width:380px){ .login7{gap:6px} .lday .lri svg{width:32px;height:32px} .qcard .buyb{min-width:62px} .emile .need{min-width:56px} }
.plogo{display:block;width:min(260px,70%);height:auto;margin:-6px auto 2px;filter:drop-shadow(0 6px 10px rgba(27,42,92,.25))}
.portrait svg,.avatar svg,.pav svg{overflow:hidden}
.ihead img{object-fit:contain}

.p-cam{position:absolute;z-index:1;right:max(14px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 136px);display:flex;flex-direction:column;gap:10px}
.cbtn{pointer-events:auto;width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.9);box-shadow:0 3px 0 #a9bde6,0 6px 12px rgba(27,42,92,.18);display:grid;place-items:center;color:#3b4a7a;cursor:pointer;padding:0}
.cbtn svg{width:24px;height:24px}
.cbtn:active{transform:translateY(2px)}

/* ---------- tours board ---------- */
#tours{position:fixed;inset:0;z-index:5;overflow:hidden;opacity:0;transition:opacity .3s ease;color:#fff;font-family:var(--f-text);white-space:normal;text-shadow:none;text-align:left}
#tours.in{opacity:1}
#tours.out{opacity:0}
#tours.go .tr-wrap{transform:scale(1.06);opacity:0;transition:transform .38s ease,opacity .38s ease}
.tr-sky{position:absolute;inset:0;background:radial-gradient(120% 70% at 50% 0%,#5b3fd8 0%,#2a1f7a 45%,#120c38 100%)}
.tr-sky::before,.tr-sky::after{content:"";position:absolute;inset:0;background-image:radial-gradient(2px 2px at 12% 18%,#fff,transparent),radial-gradient(1.5px 1.5px at 72% 12%,#fff,transparent),radial-gradient(2px 2px at 38% 32%,#ffe9a8,transparent),radial-gradient(1.5px 1.5px at 88% 40%,#fff,transparent),radial-gradient(1.6px 1.6px at 22% 62%,#fff,transparent),radial-gradient(2px 2px at 60% 72%,#ffd6f0,transparent),radial-gradient(1.4px 1.4px at 92% 86%,#fff,transparent),radial-gradient(1.8px 1.8px at 8% 90%,#fff,transparent);animation:trTw 4s ease-in-out infinite alternate}
.tr-sky::after{background-position:30px 40px;animation-delay:-2s;opacity:.7}
@keyframes trTw{from{opacity:.35}to{opacity:1}}
.tr-wrap{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:calc(env(safe-area-inset-top,0px) + 14px) max(16px,env(safe-area-inset-right,0px)) calc(env(safe-area-inset-bottom,0px) + 28px) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;align-items:center;gap:14px}
.tr-head{width:min(560px,100%);display:flex;align-items:center;gap:12px;position:relative}
.tr-head img{width:84px;height:auto;flex:none;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}
.tr-head h1{margin:0;font:900 30px/1.05 var(--f-fun);text-shadow:0 3px 0 rgba(0,0,0,.25);letter-spacing:.3px}
.tr-head p{margin:4px 0 0;font:800 14px/1.35 var(--f-text);color:#ffe9a8}
.tr-x{position:absolute;right:0;top:0;width:42px;height:42px;border-radius:14px;border:none;background:rgba(255,255,255,.16);color:#fff;font:900 20px/1 var(--f-text);cursor:pointer;box-shadow:inset 0 0 0 2px rgba(255,255,255,.3)}
.tr-hero{width:min(560px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:14px 12px 18px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05));box-shadow:inset 0 0 0 2px rgba(255,255,255,.16),0 18px 40px rgba(0,0,0,.3)}
.tr-name{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:-4px}
.tr-name .cap{font:900 12px/1 var(--f-text);text-transform:uppercase;letter-spacing:1.4px;color:#ffd34d}
.tr-name b{font:900 26px/1.1 var(--f-fun);text-shadow:0 3px 0 rgba(0,0,0,.25);text-align:center}
.tr-prog{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tr-prog>div{min-width:0;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 6px;padding:9px 10px;border-radius:16px;background:rgba(0,0,0,.22)}
.tr-prog span{min-width:0;display:flex;align-items:center;gap:5px;font:800 12px/1.2 var(--f-text);color:#dfe6ff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-prog svg{width:20px;height:20px;flex:none}
.tr-prog b{font:900 16px/1 var(--f-text)}
.tr-bar{grid-column:1/-1;height:8px;border-radius:5px;background:rgba(255,255,255,.18);overflow:hidden;display:block}
.tr-bar i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#ffd34d,#ff7aa8)}
.tr-rule{margin:0;font:700 13px/1.4 var(--f-text);color:#d6dcff;text-align:center;max-width:420px}
.tr-play{width:min(320px,100%);font-size:20px}
.tr-h3{width:min(560px,100%);margin:10px 0 0;font:900 20px/1.2 var(--f-fun);display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tr-h3 small{font:800 12px/1 var(--f-text);color:#ffe9a8;padding:5px 9px;border-radius:999px;background:rgba(255,211,77,.18)}
.tr-grid{width:min(560px,100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px;padding-bottom:10px}
/* billboard: lit frame with marquee bulbs, on two legs */
.bb{position:relative;width:100%;padding:7px;border-radius:14px;background:linear-gradient(180deg,#fff7ec,#e7dcf8);box-shadow:0 0 0 3px var(--ac,#ff5b8d),0 10px 24px rgba(0,0,0,.35)}
.bb.big{padding:10px;border-radius:18px;box-shadow:0 0 0 4px var(--ac,#ff5b8d),0 0 40px color-mix(in srgb,var(--ac,#ff5b8d) 55%,transparent),0 18px 36px rgba(0,0,0,.4)}
.bb-face{position:relative;border-radius:9px;overflow:hidden;aspect-ratio:1376/768;background:#2a2060}
.bb-face img{display:block;width:100%;height:100%;object-fit:cover}
.bb-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%);transform:translateX(-120%);animation:bbShine 5.5s ease-in-out infinite}
@keyframes bbShine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.bb-bulbs{position:absolute;left:4px;right:4px;height:8px;display:flex;justify-content:space-between;pointer-events:none}
.bb-bulbs.t{top:-1px}.bb-bulbs.b{bottom:-1px}
.bb.big .bb-bulbs{left:6px;right:6px;height:10px}
.bb-bulbs i{width:6px;height:6px;border-radius:50%;background:#fff3a6;box-shadow:0 0 6px 2px rgba(255,220,120,.85);animation:bulb 1.2s linear infinite;animation-delay:calc(var(--i)*-0.1s)}
.bb.big .bb-bulbs i{width:8px;height:8px}
@keyframes bulb{0%,100%{opacity:1}50%{opacity:.35}}
.bb-legs{position:absolute;left:0;right:0;bottom:-16px;height:16px;display:flex;justify-content:space-between;padding:0 24%;pointer-events:none}
.bb-legs span{width:7px;height:100%;border-radius:0 0 3px 3px;background:linear-gradient(90deg,#6a7392,#a6aec8,#6a7392)}
.bb.big .bb-legs{bottom:-20px;height:20px}.bb.big .bb-legs span{width:10px}
.tr-hero .bb{margin-bottom:14px}
.tcard{position:relative;display:flex;flex-direction:column;gap:22px;padding:0;border:none;background:none;color:#fff;cursor:pointer;text-align:left;transform:rotate(var(--tilt));transition:transform .2s ease;font-family:var(--f-text)}
.tcard:active{transform:rotate(var(--tilt)) scale(.97)}
.tcard .tc-num{position:absolute;left:-6px;top:-8px;z-index:2;min-width:28px;height:28px;padding:0 6px;border-radius:14px;background:#ffd34d;color:#5a3a00;font:900 15px/28px var(--f-text);text-align:center;box-shadow:0 3px 0 #c58c00}
.tc-txt{display:flex;flex-direction:column;gap:2px;padding:0 4px}
.tc-txt b{font:900 15px/1.2 var(--f-fun);text-shadow:0 2px 0 rgba(0,0,0,.3)}
.tc-txt small{display:flex;align-items:center;gap:4px;font:800 12px/1.3 var(--f-text);color:#d6dcff}
.tc-txt small svg{width:15px;height:15px;flex:none}
.tc-txt .here{color:#7dffb8}
.tcard.cur .bb{box-shadow:0 0 0 3px #7dffb8,0 0 26px rgba(125,255,184,.55),0 10px 24px rgba(0,0,0,.35)}
.tcard.lock .bb-face img{filter:grayscale(.85) brightness(.55) blur(1px)}
.tcard.lock .bb-bulbs i{animation:none;background:#6a6f88;box-shadow:none}
.tcard.lock .bb{background:linear-gradient(180deg,#b9bdd0,#8e93ab);box-shadow:0 0 0 3px #6a6f88,0 10px 24px rgba(0,0,0,.35)}
.tc-lock{position:absolute;left:50%;top:28%;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:rgba(20,16,50,.72);box-shadow:0 0 0 3px rgba(255,255,255,.55)}
.tc-lock svg{width:30px;height:30px}
.tcard.shake{animation:tShake .45s ease}
@keyframes tShake{0%,100%{transform:rotate(var(--tilt))}20%{transform:rotate(var(--tilt)) translateX(-7px)}40%{transform:rotate(var(--tilt)) translateX(7px)}60%{transform:rotate(var(--tilt)) translateX(-5px)}80%{transform:rotate(var(--tilt)) translateX(4px)}}
/* the billboards pop up one after another */
#tours .tr-hero,#tours .tcard,#tours .tr-head,#tours .tr-h3{animation:bbPop .55s cubic-bezier(.2,1.35,.4,1) both;animation-delay:var(--d,0s)}
#tours .tr-head{--d:0s}#tours .tr-hero{--d:.08s}#tours .tr-h3{--d:.25s}
#tours.first .tr-hero{--d:.25s;animation-name:bbRise;animation-duration:.9s}
@keyframes bbPop{0%{opacity:0;transform:translateY(46px) scale(.7) rotate(calc(var(--tilt,0deg) - 6deg))}100%{opacity:1;transform:translateY(0) scale(1) rotate(var(--tilt,0deg))}}
@keyframes bbRise{0%{opacity:0;transform:translateY(120px) scale(.6)}60%{opacity:1;transform:translateY(-10px) scale(1.03)}100%{transform:none}}
@media (min-width:760px){ .tr-grid{grid-template-columns:repeat(3,minmax(0,1fr));width:min(820px,100%)} .tr-h3{width:min(820px,100%)} }
@media (prefers-reduced-motion: reduce){ #tours .tr-hero,#tours .tcard,#tours .tr-head,#tours .tr-h3{animation:none} .bb-shine,.bb-bulbs i{animation:none} }
.tourbtn svg{width:38px;height:38px}
/* tour welcome / done sheets */
.tw-bb{position:relative;width:100%;border-radius:18px;overflow:hidden;box-shadow:0 0 0 4px #fff,0 0 0 7px #ff5b8d,0 12px 24px rgba(27,42,92,.3);aspect-ratio:1376/768}
.tw-bb img{width:100%;height:100%;object-fit:cover;display:block}
.tw-bb.sm{width:86%}
.tw-tag{position:absolute;left:10px;top:10px;padding:5px 10px;border-radius:999px;background:#ffd34d;color:#5a3a00;font:900 12px/1 var(--f-text);box-shadow:0 3px 0 #c58c00}
.sheet.tourwel,.sheet.tourdone{width:min(430px,100%)}
/* ---------- tutorial ---------- */
#tut{position:fixed;inset:0;z-index:7;pointer-events:auto;white-space:normal;text-shadow:none;text-align:left;font-family:var(--f-text)}
#tut.out{opacity:0;transition:opacity .3s}
.tut-hole{position:absolute;border-radius:22px;box-shadow:0 0 0 200vmax rgba(12,18,52,.62);transition:left .38s cubic-bezier(.3,1.2,.4,1),top .38s cubic-bezier(.3,1.2,.4,1),width .38s,height .38s,border-radius .38s;pointer-events:none}
.tut-hole::after{content:"";position:absolute;inset:-6px;border-radius:inherit;border:3px solid #ffd34d;animation:tutRing 1.3s ease-out infinite}
@keyframes tutRing{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.18)}}
.tut-hand{position:absolute;width:46px;height:46px;pointer-events:none;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M17 22V8a3.5 3.5 0 0 1 7 0v11l1-.2V15a3.5 3.5 0 0 1 7 0v5l.6-.1a3.4 3.4 0 0 1 6.4 1.6v9c0 8-5 14-12.5 14C19 44 15 40 11.5 34l-4-7a3.3 3.3 0 0 1 5.6-3.4Z' fill='%23fff' stroke='%231b2a5c' stroke-width='2.6' stroke-linejoin='round'/%3E%3C/svg%3E");animation:tutTap 1.1s ease-in-out infinite;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
@keyframes tutTap{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-4px,-8px) scale(.92)}}
.tut-card{position:absolute;left:50%;transform:translateX(-50%);width:min(380px,calc(100% - 32px));display:flex;gap:12px;align-items:flex-start;padding:14px 14px 12px;border-radius:24px;background:linear-gradient(180deg,#fff,#edf4ff);color:var(--ink);box-shadow:0 6px 0 #b7cbef,0 20px 50px rgba(10,16,50,.45);border:3px solid #fff}
.tut-card.tpop{animation:tutPop .35s cubic-bezier(.2,1.4,.4,1)}
@keyframes tutPop{0%{opacity:0;transform:translateX(-50%) scale(.85)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
.tut-av{flex:none;width:58px;height:58px;border-radius:50%;background:linear-gradient(#ffe2ef,#ffc2da);overflow:hidden;box-shadow:0 0 0 3px #fff,0 3px 0 3px #ffb0cd}
.tut-av svg{width:100%;height:100%}
.tut-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:9px}
.tut-txt{margin:0;font:700 15px/1.45 var(--f-text)}
.tut-txt b{color:var(--candy-dk)}
.tut-dots{display:flex;gap:5px}
.tut-dots i{width:7px;height:7px;border-radius:50%;background:#cfd9ef}
.tut-dots i.was{background:#9fb4e0}.tut-dots i.on{background:var(--candy);width:18px;border-radius:4px}
.tut-row{display:flex;align-items:center;gap:10px}
.tut-skip{border:none;background:none;color:#6a7aa6;font:800 14px/1 var(--f-text);padding:10px 4px;cursor:pointer}
.tut-row .btn{flex:1;min-width:0;padding:12px 14px;font-size:16px}
/* ---- park clock / weather chip ---- */
.p-info .psky{pointer-events:auto;cursor:pointer;background:linear-gradient(#fff,#e9f4ff)!important}
.p-info .psky.night{background:linear-gradient(#3a4a8a,#22305e)!important;color:#fff}
.skyrow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:12px 0 4px}
.skyrow.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.skb{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 4px 8px;border-radius:16px;border:2px solid #e3ebf8;background:#f6f9ff;font:800 13px/1.1 var(--f-text);color:var(--ink);cursor:pointer;min-width:0}
.skb svg{width:34px;height:34px}
.skb span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skb.on{border-color:#ff7aa8;background:linear-gradient(#fff,#ffe6f0);box-shadow:0 4px 12px rgba(255,90,140,.22)}
/* ---- ride camera ---- */
.ihead .rcbtn{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px 0 8px;border-radius:999px;border:none;background:linear-gradient(#ff8ab0,#ff5b8d);color:#fff;font:800 14px/1 var(--f-text);cursor:pointer;flex:none;box-shadow:0 4px 12px rgba(255,80,130,.35)}
.ihead .rcbtn svg{width:24px;height:24px;filter:brightness(0) invert(1)}
body.rcam #park .p-head,body.rcam #park .p-side,body.rcam #park .p-foot,body.rcam #park .p-cam,body.rcam #pMarkers,body.rcam #isheet,body.rcam #pBar,body.rcam #pBubble,body.rcam .tourbtn{display:none!important}
#rcamBar{position:fixed;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);z-index:4;display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;border-radius:999px;background:rgba(20,26,52,.62);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.25);max-width:calc(100vw - 32px)}
#rcamBar .rc-x{display:flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 10px;border-radius:999px;border:none;background:#fff;color:#2a2f4a;font:900 14px/1 var(--f-text);cursor:pointer;flex:none}
#rcamBar .rc-x svg{width:18px;height:18px}
#rcamBar .rc-t{display:flex;flex-direction:column;min-width:0}
#rcamBar .rc-t b{font:900 15px/1.15 var(--f-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#rcamBar .rc-t small{font:600 12px/1.2 var(--f-text);opacity:.8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:420px){ .ihead .rcbtn span{display:none} .ihead .rcbtn{padding:0 8px} }
/* ---- rainbow after the rain ---- */
#pRainbow{position:absolute;left:0;right:0;top:0;height:62vh;pointer-events:none;z-index:0;mix-blend-mode:screen;transition:opacity 1.2s;
  background:radial-gradient(120% 115% at 50% 108%,transparent 60%,rgba(255,70,80,.85) 62%,rgba(255,160,50,.85) 64.2%,rgba(255,236,80,.85) 66.4%,rgba(90,220,110,.85) 68.6%,rgba(70,150,255,.85) 70.8%,rgba(150,90,255,.8) 73%,transparent 75.5%);
  -webkit-mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%);mask-image:linear-gradient(#000 0%,#000 55%,transparent 100%)}

[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* PlayJazzy shows the game in a frame smaller than the phone (334 x 594 on a 390 x 844 phone, 304 x 540 on a 360 x 800),
   and the park's top bar cut four-digit numbers even at 390 px: up to 420 px wide the wallet pills drop their small "+"
   (the whole pill still opens the shop) so five characters fit, the info pills keep to one row, the tours board keeps its
   words whole, the shop's and the events' tabs are 44 px high, and on short frames the side buttons clear the camera
   buttons; larger screens are exactly as the authors made them */
/* the LINA Pass with no premium on sale and none owned shows its free line only (53_lives_music_events.js) */
.ptrack.free .phdr,.ptrack.free .prow{grid-template-columns:1fr 40px} .ptrack.free::before{left:auto;right:17px;margin-left:0}
@media (max-width:420px){ .tab{display:inline-flex;align-items:center;min-height:44px;padding-top:0;padding-bottom:0} .p-top{gap:5px} .wallet{gap:3px} .wpill{font-size:14px;padding:0 8px 0 2px} .wpill svg{width:25px;height:25px} .wpill.star svg{width:21px;height:21px;margin-left:3px} .wpill.star{padding-right:8px} .wpill .plus{display:none} }
@media (max-width:360px){ .pav{width:40px;height:40px} .p-top .iconbtn{width:36px;height:36px} .wpill{font-size:13px;padding:0 6px 0 2px} .wpill svg{width:22px;height:22px} .wpill.star svg{width:19px;height:19px} .wpill.star{padding-right:6px} .p-info{gap:3px} .p-info span{padding:3px 6px 3px 3px;font-size:12px;gap:3px} .p-info svg{width:16px;height:16px} .tr-prog>div{padding:8px;gap:4px} .tr-prog span{font-size:11px;gap:4px} .tr-prog svg{width:17px;height:17px} .tr-prog b{font-size:15px} }
@media (max-width:320px){ .p-top{gap:3px} .pav{width:36px;height:36px} .p-top .iconbtn{width:34px;height:34px} .wallet{gap:2px} .wpill{font-size:12px;height:34px;padding:0 5px 0 1px} .wpill svg{width:20px;height:20px} .wpill.star svg{width:17px;height:17px;margin-left:2px} .wpill.star{padding-right:5px} .tr-prog{gap:6px} .tr-prog>div{padding:7px 6px} .tr-prog span{font-size:10.5px;gap:3px} .tr-prog svg{width:15px;height:15px} .tr-prog b{font-size:14px} .p-info{gap:3px} .p-info span{padding:3px 6px 3px 3px;font-size:12px;gap:3px} .p-info svg{width:16px;height:16px} }
@media (max-height:640px){ .p-side{gap:17px} .sbtn{width:44px;height:44px;border-radius:15px} .sbtn svg{width:29px;height:29px} }
@media (max-height:580px){ .p-cam{flex-direction:row} .p-side{gap:16px} .sbtn{width:40px;height:40px;border-radius:14px} .sbtn svg{width:26px;height:26px} }