:root{--bg:#f2faff;--bg-2:#e7f4ff;--surface:#fff;--surface-2:#f6fbff;--ink:#22334f;--ink-soft:#515e75;--muted:#768193;--border:#dce2e9;--border-2:#c8d2de;--primary:#2279dc;--primary-ink:#004590;--primary-soft:#deedff;--secondary:#f8962d;--secondary-soft:#ffebd4;--green:#37bb62;--green-soft:#d0f7d6;--coral:#f75c61;--coral-soft:#ffe8e6;--purple:#9867e1;--purple-soft:#f1eaff;--yellow:#f7cd3a;--pink:#ed76b3;--teal:#00b4bb;--success:var(--green);--warning:#f5ae39;--danger:var(--coral);--r-sm:10px;--r:16px;--r-lg:24px;--r-xl:32px;--r-pill:999px;--shadow-sm:0 2px 6px #38486314;--shadow:0 8px 24px #3448681a;--shadow-lg:0 18px 50px #2d477229;--press:0 5px 0;--font-display:"Baloo 2", "Nunito", system-ui, sans-serif;--font-body:"Nunito", system-ui, -apple-system, sans-serif;--maxw:1240px;--nav-h:72px}@supports (color:lab(0% 0 0)){:root{--bg:lab(97.6984% -1.95372 -3.95325);--bg-2:lab(95.3643% -2.67723 -6.86263);--surface:lab(100% 0 0);--surface-2:lab(98.2536% -.878662 -2.85904);--ink:lab(20.7825% .0362694 -19.5765);--ink-soft:lab(39.5012% -1.1646 -14.5421);--muted:lab(53.4835% -1.19191 -11.0275);--border:lab(89.5351% -.959933 -4.39445);--border-2:lab(83.7152% -1.53947 -7.29235);--primary:lab(50.0477% 2.68856 -58.429);--primary-ink:lab(28.8555% 9.12361 -54.6686);--primary-soft:lab(92.9378% -2.84371 -14.4731);--secondary:lab(71.557% 32.2224 66.5953);--secondary-soft:lab(94.1955% 6.32608 18.4657);--green:lab(67.3285% -51.4615 34.0825);--green-soft:lab(93.8347% -17.7932 11.3956);--coral:lab(60.9233% 60.4956 30.9885);--coral-soft:lab(93.735% 15.3724 8.32428);--purple:lab(53.1674% 39.3575 -55.7366);--purple-soft:lab(93.7429% 7.16129 -12.932);--yellow:lab(84.2152% 5.18373 73.1501);--pink:lab(65.3692% 51.4389 -9.92352);--teal:lab(66.3586% -37.5367 -15.4041);--warning:lab(76.6715% 19.8199 66.5811);--shadow-sm:0 2px 6px lab(30.1382% -.768676 -17.9743/.08);--shadow:0 8px 24px lab(30.0574% -.413626 -21.4485/.1);--shadow-lg:0 18px 50px lab(29.8642% .843376 -28.3386/.16)}}*,:before,:after{box-sizing:border-box}*{margin:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-body);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility;font-size:clamp(15px,.6vw + 13px,17px);font-weight:600;line-height:1.55;overflow-x:hidden}img,svg{max-width:100%;display:block}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none}a{color:inherit;text-decoration:none}ul{padding:0;list-style:none}h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.01em;color:var(--ink);font-weight:800;line-height:1.08}h1,h2,h3,h4,p,span,strong,b,a,li,button{overflow-wrap:break-word}:where(.grid,.stack,.row,.card,.chip,.stat-chip,.prof-chip,.navlinks,.tabbar)>*{min-width:0}h1{font-size:clamp(2rem,4.5vw,3.6rem)}h2{font-size:clamp(1.5rem,3vw,2.5rem)}h3{font-size:clamp(1.15rem,1.6vw,1.5rem)}.text-balance{text-wrap:balance}.text-pretty{text-wrap:pretty}.wrap{width:min(100% - 2.4rem, var(--maxw));margin-inline:auto}.section{padding:clamp(3rem,7vw,6rem) 0}.stack{flex-direction:column;gap:1rem;display:flex}.row{align-items:center;gap:.75rem;display:flex}.row.wrap-row{flex-wrap:wrap}.between{justify-content:space-between}.center{justify-content:center}.grid{gap:clamp(1rem,2vw,1.5rem);display:grid}.muted{color:var(--muted);font-weight:600}.eyebrow{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;color:var(--primary);align-items:center;gap:.4rem;font-size:.8rem;font-weight:800;display:inline-flex}.btn{font-family:var(--font-display);border-radius:var(--r-pill);background:var(--surface);min-height:48px;color:var(--ink);box-shadow:var(--press) var(--border-2);-webkit-user-select:none;user-select:none;white-space:nowrap;text-align:center;justify-content:center;align-items:center;gap:.5rem;max-width:100%;padding:.85rem 1.5rem;font-size:1rem;font-weight:800;transition:transform 80ms,box-shadow 80ms,filter .15s;display:inline-flex}.btn:active{box-shadow:0 1px 0 var(--border-2);transform:translateY(4px)}.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--press) var(--primary-ink)}.btn-primary:active{box-shadow:0 1px 0 var(--primary-ink)}.btn-secondary{background:var(--secondary);color:#5b2c00;color:lab(23.9418% 27.6526 49.8242);box-shadow:var(--press) #d36c00}@supports (color:lab(0% 0 0)){.btn-secondary{box-shadow:var(--press) lab(57.368% 37.8878 66.3443)}}.btn-secondary:active{box-shadow:0 1px #d36c00;box-shadow:0 1px lab(57.368% 37.8878 66.3443)}.btn-green{background:var(--green);color:#fff;box-shadow:var(--press) #008c3f}@supports (color:lab(0% 0 0)){.btn-green{box-shadow:var(--press) lab(50.9377% -48.7556 32.6841)}}.btn-green:active{box-shadow:0 1px #008c3f;box-shadow:0 1px lab(50.9377% -48.7556 32.6841)}.btn-ghost{box-shadow:none;border:2px solid var(--border-2);background:0 0}.btn-ghost:active{transform:translateY(2px)}.btn-lg{min-height:58px;padding:1.05rem 2rem;font-size:1.15rem}.btn-block{width:100%}.btn:disabled{opacity:.5;cursor:not-allowed}.card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:clamp(1.1rem,2vw,1.6rem)}.card-pad-lg{padding:clamp(1.4rem,3vw,2.2rem)}.card-hover{transition:transform .15s,box-shadow .15s,border-color .15s}.card-hover:hover{box-shadow:var(--shadow);border-color:var(--border-2);transform:translateY(-4px)}.pill{font-family:var(--font-display);border-radius:var(--r-pill);background:var(--primary-soft);color:var(--primary-ink);align-items:center;gap:.4rem;padding:.35rem .8rem;font-size:.85rem;font-weight:800;display:inline-flex}.pill-green{background:var(--green-soft);color:#006829;color:lab(37.9176% -42.8445 28.9641)}.pill-coral{background:var(--coral-soft);color:#af2934;color:lab(40.2265% 54.2769 28.9103)}.pill-purple{background:var(--purple-soft);color:#6d41a9;color:lab(37.1076% 36.1291 -49.4012)}.pill-orange{background:var(--secondary-soft);color:#8b4b00;color:lab(39.0589% 28.6096 63.3781)}.chip{border-radius:var(--r-pill);border:2px solid var(--border-2);background:var(--surface);align-items:center;gap:.4rem;padding:.5rem .9rem;font-size:.9rem;font-weight:700;display:inline-flex}.bar{border-radius:var(--r-pill);background:var(--bg-2);border:1px solid var(--border);height:14px;overflow:hidden}.bar>i{border-radius:var(--r-pill);background:linear-gradient(90deg, var(--green), #7cd06a);height:100%;transition:width .6s cubic-bezier(.2,.9,.3,1);display:block}@supports (color:lab(0% 0 0)){.bar>i{background:linear-gradient(90deg, var(--green), lab(76.3439% -41.0818 42.0345))}}.bar.blue>i{background:linear-gradient(90deg, var(--primary), #4ba3f7)}@supports (color:lab(0% 0 0)){.bar.blue>i{background:linear-gradient(90deg, var(--primary), lab(64.5654% -6.44964 -50.653))}}.bar.orange>i{background:linear-gradient(90deg, var(--secondary), var(--yellow))}.level-widget{border-radius:var(--r-lg);background:radial-gradient(circle at 100% 0%, color-mix(in oklch, var(--yellow) 34%, transparent), transparent 38%), linear-gradient(135deg, var(--surface), var(--primary-soft));border:2px solid color-mix(in oklch, var(--primary) 22%, white);box-shadow:var(--shadow-sm);grid-template-columns:auto 1fr;align-items:center;gap:.9rem;padding:.95rem;display:grid}.level-widget.level-hero{padding:clamp(1rem,2vw,1.3rem)}.level-mark{color:#fff;background:linear-gradient(155deg, var(--primary), var(--purple));width:76px;height:76px;box-shadow:0 7px 0 color-mix(in oklch, var(--primary-ink) 70%, black);border-radius:26px;align-content:center;place-items:center;display:grid;transform:rotate(-2deg)}.level-num{font-family:var(--font-display);font-size:2rem;font-weight:900;line-height:.9}.level-caption{font-family:var(--font-display);letter-spacing:.12em;font-size:.62rem;font-weight:900}.level-main{gap:.55rem;min-width:0;display:grid}.level-main b{font-family:var(--font-display);font-size:1.05rem;font-weight:900}.level-main small{color:var(--muted);margin-top:.1rem;font-weight:800;display:block}.xp-track{border-radius:var(--r-pill);background:color-mix(in oklch, var(--surface) 70%, var(--primary-soft));border:1.5px solid color-mix(in oklch, var(--primary) 24%, white);height:16px;overflow:hidden}.xp-track>i{border-radius:inherit;background:linear-gradient(90deg, var(--secondary), var(--yellow), var(--green));height:100%;transition:width .55s cubic-bezier(.2,.9,.3,1);display:block}.level-meta{color:var(--ink-soft);font-family:var(--font-display);justify-content:space-between;gap:.6rem;font-size:.82rem;font-weight:900;display:flex}.reward-pop{z-index:160;opacity:0;pointer-events:none;min-width:min(360px,100vw - 1.5rem);transition:all .25s;position:fixed;top:16px;left:50%;transform:translate(-50%)translateY(-12px)}.reward-pop.show{opacity:1;transform:translate(-50%)translateY(0)}.reward-pop .level-widget{box-shadow:var(--shadow-lg)}.ring{--p:0;--size:92px;--tw:10px;width:var(--size);height:var(--size);background:conic-gradient(var(--green) calc(var(--p) * 1%), var(--bg-2) 0);border-radius:50%;flex:none;place-items:center;display:grid}.ring:before{content:"";position:absolute}.ring>span{width:calc(var(--size) - var(--tw) * 2);height:calc(var(--size) - var(--tw) * 2);background:var(--surface);font-family:var(--font-display);border-radius:50%;place-items:center;font-size:1.3rem;font-weight:800;display:grid}.appbar{z-index:40;height:var(--nav-h);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1.5px solid var(--border);background:#ffffffd9;background:lab(100% 0 0/.85);position:sticky;top:0}.appbar .wrap{justify-content:space-between;align-items:center;height:100%;display:flex}.brand{font-family:var(--font-display);align-items:center;gap:.55rem;font-size:1.25rem;font-weight:800;display:inline-flex}.brand .logo{width:38px;height:38px}.navlinks{align-items:center;gap:.3rem;display:flex}.navlinks a{border-radius:var(--r-pill);color:var(--ink-soft);padding:.5rem .85rem;font-weight:700;transition:background .15s,color .15s}.navlinks a:hover,.navlinks a.active{background:var(--primary-soft);color:var(--primary-ink)}.stat-chip{font-family:var(--font-display);border-radius:var(--r-pill);background:var(--surface-2);border:1.5px solid var(--border);align-items:center;gap:.35rem;padding:.4rem .7rem;font-weight:800;display:inline-flex}.tabbar{z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1.5px solid var(--border);padding:.4rem .4rem calc(.4rem + env(safe-area-inset-bottom));background:#fffffff2;background:lab(100% 0 0/.95);grid-auto-columns:1fr;grid-auto-flow:column;display:none;position:fixed;bottom:0;left:0;right:0}.tabbar a{border-radius:var(--r);color:var(--muted);font-size:.7rem;font-weight:800;font-family:var(--font-display);justify-items:center;gap:2px;padding:.4rem 0;display:grid}.tabbar a.active{color:var(--primary)}.tabbar svg{width:26px;height:26px}.mascot{width:100%;height:auto}.speech{background:var(--surface);border:2px solid var(--border-2);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:.9rem 1.1rem;font-weight:700;position:relative}.speech:after{content:"";background:var(--surface);border-right:2px solid var(--border-2);border-bottom:2px solid var(--border-2);width:18px;height:18px;position:absolute;bottom:-11px;left:28px;transform:rotate(45deg)}.speech.left:after{left:auto;right:28px}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-9px)}}.float{animation:3.4s ease-in-out infinite bob}.blob{filter:blur(2px);opacity:.55;z-index:0;pointer-events:none;border-radius:50%;position:absolute}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:1180px){.grid-4{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:820px){.grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width:560px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}.only-mobile{display:none}@media (max-width:860px){.navlinks{display:none}.tabbar{display:grid}body.has-tabbar{padding-bottom:78px}.hide-mobile{display:none!important}.only-mobile{display:revert}}@media (max-width:620px){.wrap{width:min(100% - 1rem, var(--maxw))}.section{padding:clamp(2rem,8vw,3.2rem) 0}.row.wrap-row{gap:.5rem}.btn{white-space:normal;padding-inline:1rem;line-height:1.12}.btn-lg{min-height:54px;padding-inline:1.15rem}.chip,.stat-chip{font-size:.82rem}.appbar .wrap{gap:.5rem}.appbar .btn{white-space:nowrap;min-height:40px;padding:.45rem .7rem;font-size:.82rem}.brand{gap:.4rem;font-size:1.05rem}.brand .logo{width:34px;height:34px}.prof-chip{gap:.38rem;padding:.22rem .42rem .22rem .25rem}.prof-chip-name{text-overflow:ellipsis;white-space:nowrap;max-width:96px;font-size:.86rem;overflow:hidden}.prof-chip-name small{display:none}.prof-menu{width:min(320px,100vw - 1rem);right:0}.tabbar{padding-inline:.25rem}.tabbar a{padding-inline:.1rem;font-size:.64rem;overflow:hidden}.tabbar svg{width:24px;height:24px}.level-widget{text-align:center;grid-template-columns:1fr;justify-items:center}.level-mark{border-radius:22px;width:68px;height:68px}.level-meta{width:100%}}@media (max-width:430px){.appbar .stat-chip{display:none}.appbar .btn{text-overflow:ellipsis;max-width:132px;overflow:hidden}.brand{font-size:.98rem}.prof-chip-name{max-width:74px}}.confetti{pointer-events:none;z-index:999;position:fixed;inset:0;overflow:hidden}.confetti i{border-radius:2px;width:10px;height:14px;animation:linear forwards fall;position:absolute;top:-20px}@keyframes fall{to{opacity:.9;transform:translateY(105vh)rotate(720deg)}}.ic{vertical-align:middle;color:inherit;justify-content:center;align-items:center;line-height:0;display:inline-flex}.ic .ic-svg{display:block}.icon-tile{--c:var(--primary);width:56px;height:56px;color:var(--c);background:color-mix(in oklch, var(--c) 16%, white);border-radius:18px;flex:none;place-items:center;display:inline-grid}.icon-tile.tile-sm{border-radius:14px;width:44px;height:44px}.icon-tile.tile-lg{border-radius:22px;width:68px;height:68px}.icon-tile.solid{color:#fff;background:var(--c)}.stat-chip .ic{color:var(--secondary)}.bo-avatar{border-radius:50%;display:block}.av-ring{background:conic-gradient(var(--primary), var(--secondary), var(--green), var(--primary));border-radius:50%;flex:none;padding:3px;display:inline-grid}.av-ring>*{border:3px solid var(--surface);border-radius:50%}[data-profile-switch]{position:relative}.prof-chip{border-radius:var(--r-pill);background:var(--surface-2);border:1.5px solid var(--border);align-items:center;gap:.5rem;padding:.3rem .6rem .3rem .35rem;display:inline-flex}.prof-chip-av{box-shadow:0 0 0 2px var(--border-2);border-radius:50%;flex:none;display:inline-grid}.prof-chip-name{font-family:var(--font-display);text-align:left;font-size:.95rem;font-weight:800;line-height:1}.prof-chip-name small{color:var(--muted);margin-top:2px;font-size:.7rem;font-weight:700;display:block}.prof-chip .ic{color:var(--muted)}.prof-menu{z-index:60;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);width:280px;box-shadow:var(--shadow-lg);padding:.5rem;position:absolute;top:calc(100% + .5rem);right:0}.prof-menu-h{font-family:var(--font-display);color:var(--muted);text-transform:uppercase;letter-spacing:.06em;padding:.4rem .6rem;font-size:.8rem;font-weight:800}.prof-row{text-align:left;border-radius:var(--r);align-items:center;gap:.7rem;width:100%;padding:.55rem .6rem;display:flex}.prof-row:hover{background:var(--surface-2)}.prof-row.on{background:var(--primary-soft)}.prof-row small{color:var(--muted);font-size:.75rem;font-weight:700;display:block}.prof-row b{font-family:var(--font-display)}.prof-row>span:nth-child(2){flex:1}.prof-manage{border-top:1.5px solid var(--border);border-radius:0 0 var(--r) var(--r);color:var(--primary-ink);margin-top:.3rem;font-weight:800}.prof-manage .ic{color:var(--primary)}:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:6px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.05ms!important;animation-duration:.001ms!important}}.art{line-height:0;display:inline-flex}.art-svg{display:block;overflow:visible}.coin{aspect-ratio:1;background:radial-gradient(circle at 50% 32%, #fff 0 18%, transparent 19%), conic-gradient(from 210deg, var(--c1,#ffd84d), var(--c2,#f0a93b), var(--c1,#ffd84d));width:84px;box-shadow:0 6px 0 color-mix(in oklch, var(--c2,#f0a93b) 70%, #7a4a12), 0 10px 18px #00000029;border-radius:50%;flex:none;place-items:center;display:grid;position:relative}.coin:before{content:"";background:var(--surface);border-radius:50%;position:absolute;inset:9px;box-shadow:inset 0 2px 5px #00000014}.coin:after{content:"";opacity:.7;filter:blur(.5px);background:#fff;border-radius:50%;width:18px;height:10px;position:absolute;top:14px;left:20px;transform:rotate(-25deg)}.coin .art{z-index:1;position:relative}.coin.locked{background:var(--bg-2);box-shadow:0 5px 0 var(--border-2);filter:grayscale(.4)}.coin.locked:before{background:var(--surface-2)}.coin.locked .art{opacity:.45}.badge-cell{text-align:center;flex-direction:column;align-items:center;gap:.55rem;display:flex}.badge-cell b{font-family:var(--font-display);font-size:.9rem}.badge-cell small{color:var(--muted);font-size:.74rem;font-weight:700}.coin.pop{animation:.6s cubic-bezier(.2,1.5,.4,1) coinPop}@keyframes coinPop{0%{transform:scale(.4)rotate(-12deg)}60%{transform:scale(1.12)rotate(4deg)}to{transform:scale(1)}}@keyframes wiggle{0%,to{transform:translate(0)rotate(0)}20%{transform:translate(-4px)rotate(-3deg)}40%{transform:translate(4px)rotate(3deg)}60%{transform:translate(-3px)rotate(-2deg)}80%{transform:translate(3px)rotate(2deg)}}.wiggle{animation:.45s wiggle}.pop-overlay{z-index:80;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#3848638c;background:lab(30.1382% -.768676 -17.9743/.55);place-items:center;padding:1.5rem;display:grid;position:fixed;inset:0}.pop-overlay[hidden]{display:none}.pop-card{background:var(--surface);border-radius:var(--r-xl);text-align:center;width:100%;max-width:380px;box-shadow:var(--shadow-lg);padding:clamp(1.6rem,4vw,2.6rem);animation:.5s cubic-bezier(.2,1.4,.4,1) popIn}@keyframes popIn{0%{opacity:0;transform:scale(.7)translateY(20px)}to{opacity:1;transform:scale(1)translateY(0)}}.burst{animation:1s ease-in-out infinite alternate burst}@keyframes burst{0%{transform:scale(1)rotate(-3deg)}to{transform:scale(1.06)rotate(3deg)}}@media (prefers-reduced-motion:reduce){.wiggle,.coin.pop,.burst,.float{animation:none!important}}.coin .lock-pin{background:var(--surface);width:24px;height:24px;color:var(--muted);box-shadow:var(--shadow-sm);z-index:2;border-radius:50%;place-items:center;display:grid;position:absolute;bottom:2px;right:2px}
