/* EcoQuest. Palette taken from the Sasquatch logo: navy suit, Earth blue, land green, warm fur, peach, with gold for rewards.
   Motion rule: only transform and opacity animate, so everything stays on the graphics card and never re-lays out the page. */
@font-face{font-family:Fredoka;font-weight:500;font-display:swap;src:url(../fonts/fredoka-500.woff2) format("woff2")}
@font-face{font-family:Fredoka;font-weight:600;font-display:swap;src:url(../fonts/fredoka-600.woff2) format("woff2")}
@font-face{font-family:Fredoka;font-weight:700;font-display:swap;src:url(../fonts/fredoka-700.woff2) format("woff2")}
@font-face{font-family:Nunito;font-weight:500;font-display:swap;src:url(../fonts/nunito-500.woff2) format("woff2")}
@font-face{font-family:Nunito;font-weight:600;font-display:swap;src:url(../fonts/nunito-600.woff2) format("woff2")}
@font-face{font-family:Nunito;font-weight:700;font-display:swap;src:url(../fonts/nunito-700.woff2) format("woff2")}
@font-face{font-family:Nunito;font-weight:800;font-display:swap;src:url(../fonts/nunito-800.woff2) format("woff2")}
@font-face{font-family:Nunito;font-weight:900;font-display:swap;src:url(../fonts/nunito-900.woff2) format("woff2")}

:root{
  /* From the logo: navy suit, Earth blue, land green, warm fur, peach skin, plus gold for rewards */
  --navy:#0B2A63;--navy-d:#081E4A;--navy-l:#14418F;--earth:#0A7BDC;--earth-d:#075CAB;--earth-l:#3DA9F5;
  --forest:#14418F;--forest-d:#0B2A63;--forest-dd:#081E4A;--forest-l:#0A7BDC;--leaf:#46BE4F;--lime:#A4DC5E;
  --tea:#CFE8FF;--tea2:#E6F3FF;--tea-b:#8CC4F5;--sage:#A9BAD6;
  --sun:#FFC233;--sun-d:#E0960F;--sun-t:#4A3206;--champ:#FFF3D3;
  --sky:#3DA9F5;--blue:#0A7BDC;--blue-d:#075CAB;--powder:#E3F2FF;
  --cafe:#A8481F;--cafe-d:#7E3414;--latte:#FFC48C;--tan:#FFE9D3;
  --red:#E23D33;--red-d:#B02A22;--red2:#FDE9E7;
  --bg:#F5F9FF;--bg2:#EAF1FB;--surface:#FFFFFF;--text:#0E2350;--text2:#566A8E;--line:#E2E9F5;--line2:#CFDAEC;
  --brand:#14418F;--w-eco:#2C8038;--w-quest:#0B5CAD;
  --g:#35B04A;--g-d:#208A35;--g-br:#46BE4F;
  --u-move:#35B04A;--u-focus:#0A7BDC;--u-env:#C0602E;--u-game:#FFB81F;
  --lock:#E3E8F1;--lock-d:#CBD3E2;--lock-i:#8D98AD;
  --sh1:0 1px 2px rgba(14,35,80,.05),0 2px 8px rgba(14,35,80,.05);
  --sh2:0 1px 2px rgba(14,35,80,.05),0 8px 24px -6px rgba(14,35,80,.12);
  --sh3:0 2px 6px rgba(14,35,80,.07),0 22px 48px -12px rgba(14,35,80,.24);
  --out:cubic-bezier(.22,1,.36,1);--spring:cubic-bezier(.34,1.56,.64,1);--soft:cubic-bezier(.4,0,.2,1);
  --r:20px;--safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
  color-scheme:light;
}
:root[data-theme="dark"]{
  --bg:#081631;--bg2:#0F2145;--surface:#122852;--text:#EEF4FF;--text2:#A5B6D3;--line:#1E3662;--line2:#2D4A7E;
  --brand:#8CC4F5;--forest:#8CC4F5;--w-eco:#A4DC5E;--w-quest:#7CC4F7;
  --g:#35B04A;--g-d:#208A35;--tea:#1A3C70;--tea2:#15315F;--tea-b:#3E74BD;
  --champ:#3A3115;--powder:#123360;--red2:#42211E;--tan:#3D2B1E;
  --lock:#1E3662;--lock-d:#142849;--lock-i:#7D90B1;
  --sh1:0 1px 2px rgba(0,0,0,.3);--sh2:0 8px 24px -8px rgba(0,0,0,.5);--sh3:0 22px 48px -12px rgba(0,0,0,.65);
  color-scheme:dark;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;background:var(--bg);scrollbar-gutter:stable}
html.no-scroll,html.no-scroll body{overflow:hidden}
body{margin:0;background:var(--bg);color:var(--text);font:600 16px/1.5 Nunito,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;text-rendering:optimizeLegibility}
h1,h2,h3{font-family:Fredoka,Nunito,sans-serif;font-weight:600;margin:0;line-height:1.14;color:var(--text);letter-spacing:-.005em}
p{margin:0}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;touch-action:manipulation;-webkit-touch-callout:none;user-select:none;-webkit-user-select:none}
img{display:block;max-width:100%;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
img[loading="lazy"]{opacity:0;transition:opacity .3s var(--soft)}img[loading="lazy"].ld{opacity:1}
.ic{flex:none;display:block}.itm{display:block}
:focus{outline:none}:focus-visible{outline:3px solid var(--sky);outline-offset:2px;border-radius:10px}
input,select{font:700 16px Nunito,sans-serif;color:var(--text);background:var(--surface);border:2px solid var(--line);border-radius:15px;padding:13px 16px;width:100%;min-height:52px;transition:border-color .18s var(--soft),box-shadow .18s var(--soft)}
input:focus,select:focus{border-color:var(--earth);box-shadow:0 0 0 4px color-mix(in srgb,var(--earth) 20%,transparent);outline:none}
input::placeholder{color:var(--text2);opacity:.65}
small{font-size:13px;font-weight:700;color:var(--text2)}
.theming *,.theming *::before,.theming *::after{transition:background-color .32s var(--soft),color .32s var(--soft),border-color .32s var(--soft)!important}
.wordmark{display:block;overflow:visible}.w-eco{fill:var(--w-eco)}.w-quest{fill:var(--w-quest)}
.on-dark .w-eco{fill:#B6E86E}.on-dark .w-quest{fill:#8ED2FF}
.logo-badge{flex:none;border-radius:50%}
.logo-bar{display:inline-flex;align-items:center;gap:10px}

@media (hover:hover){::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;border:3px solid var(--bg)}::-webkit-scrollbar-thumb:hover{background:var(--sage)}}

/* Buttons: lip press with a springy release */
.btn{--c:var(--g);--l:var(--g-d);--t:#fff;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:15px;background:var(--c);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 90%,#fff),var(--c));color:var(--t);font:800 15px/1.1 Nunito,sans-serif;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 4px 0 var(--l),0 10px 18px -8px color-mix(in srgb,var(--l) 60%,transparent);margin-bottom:4px;transition:transform .28s var(--spring),box-shadow .28s var(--spring),opacity .2s;white-space:nowrap;text-align:center}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 0 0 var(--l);transition-duration:.05s}
.btn:disabled{--c:var(--lock);--l:var(--lock-d);--t:var(--lock-i);cursor:default;background:var(--c);box-shadow:0 4px 0 var(--l)}
.btn.big{min-height:56px;font-size:16px;padding:0 30px;border-radius:17px}
.btn.small{min-height:40px;padding:0 15px;font-size:13px;border-radius:12px;box-shadow:0 3px 0 var(--l);margin-bottom:3px;gap:6px;letter-spacing:.03em}
.btn.small:active:not(:disabled){transform:translateY(3px)}
.btn.full{width:100%}
.btn.sun{--c:var(--sun);--l:var(--sun-d);--t:var(--sun-t)}
.btn.ghost{--c:var(--surface);--l:var(--line2);--t:var(--navy-l);background:var(--surface);box-shadow:inset 0 0 0 2px var(--line),0 4px 0 var(--line2)}
.btn.ghost.small{box-shadow:inset 0 0 0 2px var(--line),0 3px 0 var(--line2)}
:root[data-theme="dark"] .btn.ghost{--t:#8CC4F5}
.btn.ghost:active:not(:disabled){box-shadow:inset 0 0 0 2px var(--line),0 0 0 var(--line2)}
.btn.ghost:disabled{--t:var(--text2)}
.btn.danger{--c:var(--red);--l:var(--red-d)}
.btn.price{--c:var(--surface);--l:var(--line2);--t:var(--brand);background:var(--surface);box-shadow:inset 0 0 0 2px var(--line),0 3px 0 var(--line2);min-height:44px;padding:0 13px;gap:5px;font-size:15px;letter-spacing:.01em;margin-bottom:3px}
.btn.price:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px var(--line),0 0 0 var(--line2)}
.btn.price.short{--t:var(--text2)}
.btn.ready{animation:pop .5s var(--spring)}
@media (hover:hover){.btn:hover:not(:disabled):not(:active){transform:translateY(-2px)}}
.link{color:var(--blue);font-weight:800;font-size:14px;text-align:left;transition:opacity .15s}:root[data-theme="dark"] .link{color:var(--sky)}
.link:active{opacity:.6}@media (hover:hover){.link:hover{text-decoration:underline}}
.link-up{color:var(--blue);font:800 13px Nunito}:root[data-theme="dark"] .link-up{color:var(--sky)}
.link-up.block{display:block;margin:18px auto 0}
.round-x{width:44px;height:44px;display:grid;place-items:center;border-radius:13px;color:var(--text2);flex:none;transition:background-color .15s,transform .25s var(--spring)}.round-x:active{transform:scale(.88)}
@media (hover:hover){.round-x:hover{background:var(--bg2)}}
.fine{font-size:14px;font-weight:600;color:var(--text2);line-height:1.45}.fine.big{font-size:16px;margin:0 0 12px}.center{text-align:center}
.err{color:var(--red);font-size:15px;font-weight:800;margin-top:8px;animation:shakeX .4s}.err:empty{display:none}
:root[data-theme="dark"] .err{color:#FF9A8F}

/* Bars, cards */
.bar{height:14px;border-radius:99px;background:var(--bg2);overflow:hidden;box-shadow:inset 0 1px 2px rgba(50,60,35,.08)}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(180deg,var(--lime),var(--leaf));transition:width .7s var(--out);position:relative}
.bar i::after{content:"";position:absolute;left:7px;right:7px;top:3px;height:3px;border-radius:9px;background:#fff;opacity:.45}
.bar.small{height:9px}.bar.small i::after{display:none}
.bar-l{display:flex;justify-content:space-between;gap:10px;font-size:13px;font-weight:700;color:var(--text2);margin-top:6px}
.card{background:var(--surface);border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh2)}
.card-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.card-h h3{margin:0}
.card h2{font-size:22px;margin-bottom:6px}.card h3{font-size:19px;margin-bottom:6px}.card p{font-weight:600}
.page-t{font-size:34px;overflow-wrap:anywhere}.page-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.sec-t{font-size:22px;margin:28px 0 12px}
.pills{display:flex;gap:6px;overflow-x:auto;margin:20px 0 8px;padding:5px;border-radius:16px;background:var(--bg2);scrollbar-width:none;width:fit-content;max-width:100%}.pills::-webkit-scrollbar{display:none}
.pill{flex:none;min-height:40px;padding:0 18px;border-radius:12px;font:800 14px Nunito;color:var(--text2);transition:background-color .22s var(--soft),color .22s var(--soft),box-shadow .22s var(--soft),transform .25s var(--spring)}
.pill:active{transform:scale(.95)}.pill.on{background:var(--surface);color:var(--forest);box-shadow:var(--sh1)}
.tag{display:inline-block;padding:5px 12px;border-radius:99px;background:var(--tea2);color:var(--brand);font:800 12px Nunito;letter-spacing:.02em}
.rar{display:inline-block;padding:3px 10px;border-radius:99px;font:800 12px Nunito;color:#fff;background:#2B8A3E}
.rar.r-rare{background:#0A7BDC}.rar.r-legendary{background:#946408}
.rar-t{font-weight:800}.rar-t.r-common{color:#2B8A3E}.rar-t.r-rare{color:#0A6BC2}.rar-t.r-legendary{color:#946408}
:root[data-theme="dark"] .rar-t.r-common{color:#8AD06E}:root[data-theme="dark"] .rar-t.r-rare{color:var(--sky)}:root[data-theme="dark"] .rar-t.r-legendary{color:var(--sun)}
.stars{display:inline-flex;vertical-align:middle;gap:1px}
.inline{display:flex;gap:10px;align-items:flex-start;margin-top:10px}.inline input{flex:1;min-width:0}.inline .btn{flex:none;min-height:52px}
.fld{display:block;margin-top:16px}.fld>span{display:block;font-size:15px;font-weight:800;margin-bottom:6px}.fld small{margin-left:4px;font-weight:600}
.tab-body{animation:rise .34s var(--out) backwards}

/* Shell */
.shell{min-height:100vh;min-height:100dvh;animation:fade .3s var(--soft)}
.side{--step:56px;position:fixed;top:0;bottom:0;left:0;width:248px;padding:20px 14px;border-right:1px solid var(--line);background:var(--bg);display:flex;flex-direction:column;z-index:20}
.side-logo{display:flex;align-items:center;gap:10px;margin:0 8px 22px;transition:transform .25s var(--spring)}.side-logo:active{transform:scale(.97)}
.side nav{position:relative;display:flex;flex-direction:column;gap:4px}
.side-ind{position:absolute;left:0;right:0;top:0;height:52px;border-radius:15px;background:var(--tea2);box-shadow:inset 0 0 0 2px var(--tea-b);transform:translateY(calc(var(--i)*var(--step)));transition:transform .42s var(--out),opacity .2s}.side-ind.off{opacity:0}
.side-i{position:relative;display:flex;align-items:center;gap:14px;height:52px;padding:0 14px;border-radius:15px;font:500 17px Fredoka;color:var(--text2);transition:color .2s var(--soft),background-color .15s,transform .22s var(--spring);text-align:left}
.side-i .ic{transition:transform .35s var(--spring)}
.side-i:active{transform:scale(.97)}.side-i.on{color:var(--forest);font-weight:600}.side-i.on .ic{transform:scale(1.08)}
@media (hover:hover){.side-i:not(.on):hover{background:var(--bg2);color:var(--text)}.side-i:hover .ic{transform:scale(1.1)}}
.main{margin-left:248px;display:flex;justify-content:center;gap:40px;padding:26px 28px 90px;align-items:flex-start}
.col{width:100%;max-width:600px;min-width:0}
.page-in>*{animation:rise .42s var(--out) backwards}.page-in>*:nth-child(2){animation-delay:40ms}.page-in>*:nth-child(3){animation-delay:80ms}.page-in>*:nth-child(4){animation-delay:120ms}.page-in>*:nth-child(5){animation-delay:150ms}.page-in>*:nth-child(n+6){animation-delay:170ms}
.rail{width:330px;flex:none;position:sticky;top:26px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 40px);overflow-y:auto;scrollbar-width:none;padding:2px 2px 8px;margin:-2px}.rail::-webkit-scrollbar{display:none}.rail>*{flex:none}
.topbar,.tabbar{display:none}
.rail-stats{display:flex;justify-content:space-between;gap:4px;background:var(--surface);border-radius:18px;padding:8px 12px;box-shadow:var(--sh2)}
.chip-stat{display:inline-flex;align-items:center;gap:6px;font:600 18px Fredoka;padding:4px 6px;border-radius:12px;font-variant-numeric:tabular-nums}
.chip-stat.bump .ic{animation:bump .6s var(--spring)}
.chip-stat.leaf{color:#1F9D46}.chip-stat.star{color:#9A650B}:root[data-theme="dark"] .chip-stat.star{color:var(--sun)}.chip-stat.lvl{color:var(--brand)}:root[data-theme="dark"] .chip-stat.leaf{color:var(--lime)}
.chip-stat b{font-weight:600}
.rail-sq{padding:0;overflow:hidden;display:flex;align-items:stretch}.rail-sq-art{display:block;width:112px;flex:none;overflow:hidden}.rail-sq-art .sq{height:100%;min-height:128px;transition:transform .4s var(--out)}
@media (hover:hover){.rail-sq-art:hover .sq{transform:scale(1.05)}}
.sq{position:relative;overflow:hidden;display:block}
img.sq-bg,.shop-art img.sq-bg,.gart img.sq-bg,.res-art img.sq-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;padding:0}
.sq-img{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);max-width:92%;object-fit:contain;transform-origin:50% 100%}
.sq.fill{width:100%;aspect-ratio:16/10}
.rail-sq-b{padding:14px;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}.rail-sq-b h3{font-size:20px;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis}.rail-sq-b .bar-l{flex-direction:column;gap:0}
.mini-row{display:flex;align-items:center;gap:10px;padding:3px 6px;border-radius:12px;font-weight:800}.mini-row img{width:32px;height:40px;object-fit:contain}.mini-row b{font:600 15px Fredoka;color:var(--text2)}
.mini-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini-row.me{background:var(--tea2)}
.mini-rank{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font:700 14px Fredoka;color:var(--text2);flex:none}.mini-rank.r1{background:var(--sun);color:var(--sun-t)}.mini-rank.r2{background:#DDE5F2;color:#35466B}.mini-rank.r3{background:#E0B287;color:#4A3512}
.daily{display:flex;align-items:center;gap:12px;margin-bottom:10px}.daily-b{flex:1;min-width:0}.daily-t{display:flex;justify-content:space-between;font-size:14px;margin-bottom:5px}.daily-t span{color:var(--text2)}.daily-t b{font-weight:800}
.rail-promo{display:flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--champ),color-mix(in srgb,var(--sun) 28%,var(--surface)));box-shadow:var(--sh2)}.rail-promo div{flex:1}.rail-promo h3{font-size:18px}.rail-promo img{width:74px;height:100px;object-fit:contain}.rail-promo .btn{margin-top:10px}.rail-promo .fine{color:inherit;opacity:.85}
.rail-foot{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--text2);padding:0 4px 8px}.rail-foot .link{font-size:13px}.rail-foot span{width:100%;font-weight:600}
.tryon-rail{padding:0;overflow:hidden}
.tryon-art .sq.fill{aspect-ratio:1/1}
.tryon-b{padding:14px 18px 18px}.tryon-b h3{font-size:20px;margin-bottom:6px}.tryon-btns{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.tryon-inline{display:none}

/* Home */
.break-card{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:16px;background:linear-gradient(120deg,#081E4A,#0B2A63 40%,#0A7BDC);border-radius:22px;padding:20px 22px;box-shadow:0 5px 0 #06163A,var(--sh2);margin-bottom:24px;color:#fff}
.break-card::after{content:"";position:absolute;right:-60px;top:-90px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(164,220,94,.32),transparent 68%);pointer-events:none}
.break-card>*{position:relative;z-index:1}.break-card h2{color:#fff;font-size:23px}.break-card p{font-weight:600;opacity:.88;font-size:15px}.break-card .btn{flex:none}
.resume,.event{display:flex;align-items:center;gap:14px;width:100%;margin-bottom:16px;text-align:left}.resume span,.event span{flex:1;display:flex;flex-direction:column}.resume b,.event b{font-weight:800}
.resume{background:var(--powder);transition:transform .25s var(--spring)}.resume:active{transform:scale(.98)}
.event{background:var(--champ)}.event small{color:inherit;opacity:.85}
.unit,.q-sec,.flow-c,.opt{--u:#3DBB52;--ul:#208A35;--uk:#fff}
.u-move{--u:#3DBB52;--ul:#208A35;--ub:#2BA144;--ub2:#59CB57;--ubl:#1C7E31;--uk:#fff}
.u-focus{--u:#2B98EE;--ul:#075CAB;--ub:#0A6FCB;--ub2:#2FA3F2;--ubl:#07529A;--uk:#fff}
.u-env{--u:#CC6A36;--ul:#8F421B;--ub:#A8481F;--ub2:#D0763F;--ubl:#7E3414;--uk:#fff}
.u-game{--u:#FFC233;--ul:#DB9208;--ub:#F7B21B;--ub2:#FFD052;--ubl:#C88507;--uk:#533705}
.unit-h{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(120deg,var(--ub),var(--ub2));color:#fff;border-radius:20px;padding:16px 20px;box-shadow:0 4px 0 var(--ubl);margin-top:8px}
.u-game .unit-h,.u-game .unit-h h2{color:var(--sun-t)}
.unit-h h2{color:#fff;font-size:24px}.unit-k{font:800 13px Nunito;opacity:.9}
.unit-left{font:800 12px Nunito;background:rgba(255,255,255,.2);padding:7px 11px;border-radius:99px;flex:none;white-space:nowrap}
.u-game .unit-left{background:rgba(74,53,18,.12)}
.unit-left.dark{background:var(--bg2);color:var(--text2)}
.path{position:relative;margin:18px 0 26px}
.trail{position:absolute;left:50%;top:0;overflow:visible;pointer-events:none}.trail path{stroke:var(--line2);stroke-width:8;stroke-linecap:round;stroke-dasharray:.1 18}
.node-w{position:absolute;left:50%;width:0;display:flex;flex-direction:column;align-items:center;transform:translateX(var(--o))}
.node-w.rv:not(.in) .node,.node-w.rv:not(.in) .node-l,.node-w.rv:not(.in) .start-b{opacity:0}
.node-w.rv.in .node{animation:nodePop .55s var(--spring) backwards}.node-w.rv.in .node-l{animation:rise .4s var(--out) .08s backwards}
.node{width:80px;height:72px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--u);background:radial-gradient(120% 100% at 50% 8%,color-mix(in srgb,var(--u) 76%,#fff),var(--u) 62%);color:var(--uk);box-shadow:0 8px 0 var(--ul),0 14px 18px -8px color-mix(in srgb,var(--ul) 70%,transparent);transition:transform .32s var(--spring),box-shadow .32s var(--spring);position:relative}
.node .node-i{transition:transform .35s var(--spring)}
.node:active{transform:translateY(7px);box-shadow:0 1px 0 var(--ul);transition-duration:.05s}
@media (hover:hover){.node:hover:not(:active){transform:translateY(-3px) scale(1.03)}.node:hover .node-i{transform:scale(1.12)}}
.node.done{background:radial-gradient(120% 100% at 50% 8%,#FFE2A8,var(--sun) 62%);box-shadow:0 8px 0 var(--sun-d);color:var(--sun-t)}.node.done:active{box-shadow:0 1px 0 var(--sun-d)}
.node.rest{background:var(--lock);box-shadow:0 8px 0 var(--lock-d);color:var(--lock-i)}.node.rest:active{box-shadow:0 1px 0 var(--lock-d)}
.node.next::before{content:"";position:absolute;inset:-11px;border-radius:50%;border:5px solid var(--line);border-top-color:var(--u);border-right-color:var(--u);pointer-events:none;animation:spin 3.2s linear infinite}
.node.next::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 color-mix(in srgb,var(--u) 55%,transparent);animation:ping 2.2s var(--out) infinite;pointer-events:none}
.node-l{margin-top:13px;display:flex;flex-direction:column;align-items:center;text-align:center;white-space:nowrap;line-height:1.2;background:var(--bg);padding:2px 9px;border-radius:10px;position:relative}.node-l b{font:800 14px Nunito}.node-l small{font-size:12px;font-weight:600}
.start-b{position:absolute;bottom:calc(100% + 18px);z-index:2;background:var(--surface);color:var(--ub);border-radius:13px;padding:7px 14px;font:800 14px Nunito;letter-spacing:.03em;box-shadow:var(--sh2);animation:bob 1.7s ease-in-out infinite}
.u-game .start-b{color:#8A6212}
.start-b::after{content:"";position:absolute;left:50%;top:100%;width:12px;height:12px;background:var(--surface);transform:translate(-50%,-7px) rotate(45deg);border-radius:0 0 3px 0}
.start-b.side-r{bottom:auto;top:16px;left:calc(100% + 58px);animation-name:bobx}.start-b.side-l{bottom:auto;top:16px;right:calc(100% + 58px);animation-name:bobx}
.start-b.side-r::after{left:0;top:50%;transform:translate(-5px,-50%) rotate(45deg)}.start-b.side-l::after{left:100%;top:50%;transform:translate(-7px,-50%) rotate(45deg)}
.path-sq{position:absolute;top:66px;left:calc(50% + 58px);height:210px;width:auto;max-width:170px;object-fit:contain;object-position:bottom;pointer-events:none;transform-origin:50% 100%}
.path-deco{position:absolute;pointer-events:none;opacity:.9}.path-deco.right{left:calc(50% + 70px)}.path-deco.left{right:calc(50% + 70px)}
.home-more{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.tile{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:18px 8px;border-radius:var(--r);background:var(--surface);box-shadow:var(--sh2);transition:transform .3s var(--spring),box-shadow .3s var(--out)}
.tile .ic{transition:transform .35s var(--spring)}.tile:active{transform:scale(.96)}.tile b{font:600 17px Fredoka}.tile small{font-size:12px;line-height:1.2;font-weight:600}
@media (hover:hover){.tile:hover{transform:translateY(-3px);box-shadow:var(--sh3)}.tile:hover .ic{transform:scale(1.1) rotate(-4deg)}}

/* Quest list and rows */
.q-sec{margin-top:26px}.q-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}.q-head h2{font-size:24px}.q-head p{font-size:14px;font-weight:600;color:var(--text2)}.q-head>div{flex:1;min-width:0}
.q-ic{flex:none}
.rows{display:flex;flex-direction:column;gap:10px}
.row{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;border-radius:18px;background:var(--surface);box-shadow:var(--sh1);text-align:left;transition:transform .28s var(--spring),box-shadow .28s var(--out)}
.col>.row{margin-top:18px}
.row:active{transform:scale(.98)}@media (hover:hover){.row:hover{transform:translateY(-2px);box-shadow:var(--sh2)}.row:hover .row-ch{transform:translateX(3px)}}
.row-node{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--u,#3DBB52);color:var(--uk,#fff);box-shadow:0 3px 0 var(--ul,#208A35)}
.row-node.done{background:var(--sun);box-shadow:0 3px 0 var(--sun-d);color:var(--sun-t)}.row-node.rest{background:var(--lock);box-shadow:0 3px 0 var(--lock-d);color:var(--lock-i)}
.row-node.plain{background:none;box-shadow:none;width:34px;height:34px}
.row-t{flex:1;min-width:0;display:flex;flex-direction:column}.row-t b{font-weight:800;font-size:17px}.row-t small{font-weight:600}
.pts{display:inline-flex;align-items:center;gap:4px;font:600 16px Fredoka;color:var(--sun);flex:none}:root:not([data-theme="dark"]) .pts{color:#9A650B}
.row-ch{color:var(--line2);flex:none;transition:transform .25s var(--out)}

/* Shop */
.shop-rows{display:flex;flex-direction:column;gap:10px}
.shop-row{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:20px;background:var(--surface);box-shadow:var(--sh1);transition:box-shadow .25s var(--out),background-color .25s var(--soft),transform .28s var(--spring)}
.shop-row.sel{box-shadow:inset 0 0 0 2.5px var(--sky),var(--sh2);background:var(--powder)}
.shop-pick{display:flex;align-items:center;gap:14px;flex:1;min-width:0;text-align:left}.shop-pick:active .shop-art{transform:scale(.94)}
.shop-art{width:84px;height:84px;flex:none;border-radius:15px;background:var(--bg2);overflow:hidden;display:grid;place-items:center;position:relative;transition:transform .28s var(--spring)}.shop-art img{width:100%;height:100%;object-fit:contain;padding:4px}.shop-art svg{position:absolute;inset:0;width:100%;height:100%}
.r-rare .shop-art{background:var(--powder)}.r-legendary .shop-art{background:var(--champ)}
.shop-t{display:flex;flex-direction:column;min-width:0}.shop-t b{font:600 18px Fredoka}.shop-t small{line-height:1.25;font-weight:600;font-size:14px}
.owned{display:inline-flex;align-items:center;gap:4px;font:800 13px Nunito;color:#1F9D46;flex:none}:root[data-theme="dark"] .owned{color:var(--lime)}

/* Summon */
.banner{position:relative;display:flex;align-items:stretch;border-radius:24px;overflow:hidden;color:#fff;margin-bottom:18px;min-height:260px;box-shadow:0 6px 0 #06163A,var(--sh2)}
.b-squatch{background:linear-gradient(135deg,#081E4A,#0B2A63 50%,#0A7BDC)}
.b-gear{background:linear-gradient(135deg,#6E2C10,#A8481F 55%,#E08A4A);box-shadow:0 6px 0 #4F1E0A,var(--sh2)}
.ban-glow{position:absolute;left:-40px;bottom:-60px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,#A4DC5E55,transparent 68%);animation:glow 4s ease-in-out infinite}
.ban-art{position:relative;flex:0 0 44%;min-height:240px}.ban-art img{position:absolute;bottom:10px;object-fit:contain;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));transition:transform .5s var(--out)}
.ban-art .s2{height:88%;left:50%;transform:translateX(-50%);z-index:2}.ban-art .s1{height:56%;left:0;z-index:1}.ban-art .s3{height:60%;right:0;z-index:1}
@media (hover:hover){.banner:hover .s2{transform:translateX(-50%) translateY(-6px) scale(1.04)}.banner:hover .s1{transform:translate(-5px,-2px) rotate(-3deg)}.banner:hover .s3{transform:translate(5px,-2px) rotate(3deg)}}
.ban-b{position:relative;flex:1;padding:22px;display:flex;flex-direction:column;gap:8px;justify-content:center;min-width:0}.ban-b h2{color:#fff;font-size:28px}.ban-b>p{font-weight:600;font-size:15px;opacity:.95}
.ban-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}.ban-btns .btn{flex:1 1 130px;padding:0 10px;gap:5px;font-size:14px;letter-spacing:.02em}
.ban-pity{font-size:13px!important;opacity:.85!important}

/* Squatch page */
.cover{background:var(--surface);border-radius:24px;overflow:hidden;padding-bottom:18px;box-shadow:var(--sh2)}
.cover-art{height:280px}.cover-art .sq-img{bottom:4%}
.cover-b{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 20px 0}.cover-b h1{font-size:30px}.cover-b p{font-size:15px;color:var(--text2)}
.cover-d{padding:6px 20px 12px;font-weight:600;color:var(--text2)}.cover>.bar{margin:0 20px}.cover>.bar-l{margin:6px 20px 0}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.tiles.two{grid-template-columns:repeat(2,1fr);margin-bottom:18px}
.stat-t{display:flex;align-items:center;gap:10px;padding:13px;border-radius:18px;min-width:0;background:var(--surface);box-shadow:var(--sh1)}.stat-t>div{display:flex;flex-direction:column;min-width:0}.stat-t b{font:600 20px/1.1 Fredoka}.stat-t small{line-height:1.15;font-size:12px;font-weight:600}
.tick-g{color:#1F9D46}
.evo{display:flex;align-items:center;justify-content:space-between}
.evo-s{display:flex;flex-direction:column;align-items:center;text-align:center;flex:none;width:104px}.evo-art{position:relative;width:96px;height:112px;border-radius:18px;background:var(--bg2);box-shadow:var(--sh1)}.evo-art img{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain}
.evo-s.on .evo-art{background:var(--tea2)}.evo-s.now .evo-art{box-shadow:0 0 0 3px var(--tea-b),var(--sh2)}
.evo-s b{font:600 15px Fredoka;margin-top:6px}.evo-s small{font-size:12px;font-weight:600}
.evo-line{flex:1;height:7px;border-radius:9px;background:var(--line);margin:0 -2px 42px;min-width:10px}
.sil{filter:brightness(0) opacity(.2)}:root[data-theme="dark"] .sil{filter:brightness(0) invert(1) opacity(.14)}
.gridc{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.gcell{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:10px 8px 12px;border-radius:18px;background:var(--surface);box-shadow:var(--sh1);transition:transform .28s var(--spring),box-shadow .25s var(--out),background-color .25s var(--soft)}
button.gcell:active{transform:scale(.96)}@media (hover:hover){button.gcell:hover{transform:translateY(-3px);box-shadow:var(--sh2)}}
.gcell.sel{box-shadow:inset 0 0 0 2.5px var(--tea-b),var(--sh1);background:var(--tea2)}
.gcell b{font:600 15px/1.15 Fredoka;margin-top:4px}.gcell small{font-size:12px;font-weight:600}
.gart{height:112px;width:100%;display:grid;place-items:center;border-radius:12px;overflow:hidden;position:relative}.gart img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.gart.bg svg{position:absolute;inset:0;width:100%;height:100%}
.gcell.locked b{color:var(--text2)}
.ach{display:flex;flex-direction:column;gap:10px}
.ach-row{display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:18px;background:var(--surface);box-shadow:var(--sh1)}.ach-i{width:58px;height:58px;display:grid;place-items:center;border-radius:16px;background:var(--bg2);flex:none}.ach-row:not(.on) .ach-i .ic{filter:grayscale(1);opacity:.5}
.ach-row.on .ach-i{background:var(--champ)}
.ach-b{flex:1;min-width:0}.ach-t{display:flex;justify-content:space-between;gap:8px;margin-bottom:5px}.ach-t b{font:600 17px Fredoka}.ach-t span{font-size:13px;color:var(--text2)}.ach-b small{display:block;margin-top:4px;font-weight:600}
.ach-row.on .bar i{background:linear-gradient(180deg,#FFD88C,var(--sun))}

/* Leagues */
.league-h{display:flex;align-items:center;gap:16px}.league-h p{font-weight:600;color:var(--text2);font-size:15px}
.board{list-style:none;margin:14px 0 18px;padding:0;display:flex;flex-direction:column;gap:3px}
.board li{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:16px;transition:background-color .2s}
.board li.top{background:var(--bg2)}.board li.t1{background:var(--champ)}
.board li.me{background:var(--tea2);box-shadow:inset 0 0 0 2px var(--tea-b)}
.rank{width:38px;flex:none;text-align:center;font:600 18px Fredoka;color:var(--text2)}.medal{display:block;margin:auto}.b-av{width:46px;height:54px;flex:none}.b-av img{width:100%;height:100%;object-fit:contain}
.b-n{flex:1;min-width:0;display:flex;flex-direction:column}.b-n b{font-weight:800;font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.b-n small{font-weight:600}.b-n em{font-style:normal;font-size:11px;background:var(--earth);color:#fff;border-radius:99px;padding:1px 7px;vertical-align:2px;font-weight:800}
.b-p{font:600 18px Fredoka;flex:none}.b-p small{font:700 12px Nunito}

/* Impact, help, settings */
.impact-hero{display:flex;align-items:center;gap:14px;margin-bottom:20px}.impact-hero>div{flex:1;min-width:0}.impact-hero p{font-weight:600;color:var(--text2);margin-top:6px}.impact-hero img{width:190px;flex:none}
.impact-hero.teacher img{width:120px}
.impact-n{margin-top:12px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.impact-n b{font:700 44px/1 Fredoka;color:var(--brand)}.impact-n span{font-size:14px;font-weight:700;color:var(--text2);flex:1 1 150px}
.camp{margin-bottom:14px}.camp h2{margin-top:8px}.camp .bar{margin:12px 0 8px}
.col>.card{margin-top:14px}
.talk{display:flex;gap:14px;align-items:flex-start;background:var(--red2)}
.ticks{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}.ticks li{display:flex;gap:10px;align-items:flex-start;font-weight:600}.ticks .ic{color:#1F9D46;margin-top:3px}
.prose ul{margin-bottom:14px}
.who{display:flex;align-items:center;gap:14px}.who img{width:52px;height:62px;object-fit:contain}.who div{display:flex;flex-direction:column}.who b{font:600 20px Fredoka}
.card.list{padding:4px 18px}
.sw-row,.sel-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 0;border-bottom:1px solid var(--line);cursor:pointer}.card.list>:last-child{border-bottom:0}.sw-row b,.sel-row b{font-weight:800}.sw-row span:first-child{display:flex;flex-direction:column}
.cls .sw-row{border-bottom:0}
.sel-row select{width:auto;min-height:44px;padding:8px 12px;flex:none}
.sw{position:relative;flex:none;width:54px;height:32px}.sw input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;min-height:0;cursor:pointer}.sw i{position:absolute;inset:0;border-radius:99px;background:var(--line2);transition:background-color .25s var(--soft);pointer-events:none}.sw i::after{content:"";position:absolute;left:4px;top:4px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.25);transition:transform .34s var(--spring)}.sw input:checked+i{background:var(--leaf)}.sw input:checked+i::after{transform:translateX(22px)}.sw input:focus-visible+i{outline:3px solid var(--sky);outline-offset:2px}
.set-actions{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.cls h3{margin:16px 0 4px;font-size:17px}.cls-h{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}.cls-h h2{margin:0}
.code-box{display:flex;flex-direction:column;align-items:center;background:var(--tea2);border:2px dashed var(--tea-b);border-radius:14px;padding:4px 14px;flex:none}.code-box b{font:700 20px Fredoka;letter-spacing:.1em;color:var(--brand)}.code-box small{font-size:11px}
.t-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--line);flex-wrap:wrap}.t-row>span:first-child{display:flex;flex-direction:column;min-width:0}.t-row b{font-weight:800}.t-row.sample b{color:var(--text2)}.t-btns{display:flex;gap:8px}

/* Flows */
.flow{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;outline:none;will-change:transform}
.flow.enter{animation:flowIn .46s var(--out) backwards}.flow.swap{animation:fade .24s var(--soft) backwards}
.flow.leaving{animation:flowOut .28s var(--soft) forwards;pointer-events:none}
#root>.flow{position:relative;min-height:100vh;min-height:100dvh;z-index:1;animation:fade .3s var(--soft) backwards}
.flow-h{flex:none;display:flex;align-items:center;gap:14px;max-width:1000px;width:100%;margin:0 auto;padding:calc(14px + var(--safe-t)) 18px 10px}
.flow-bar{flex:1;height:16px}
.flow-b{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;min-height:0}
.flow-c{width:100%;max-width:560px;margin:auto;padding:18px 20px 28px;animation:stepIn .42s var(--out) backwards}
.flow-c.center{text-align:center;display:flex;flex-direction:column;align-items:center}
.flow-f{flex:none;border-top:1px solid var(--line);background:var(--bg);padding:14px 18px calc(14px + var(--safe-b))}
.flow-f-in{max-width:1000px;margin:0 auto;display:flex;justify-content:space-between;gap:12px}.flow-f-in .btn{min-width:160px}
.flow-f-in.one{justify-content:flex-end}
.say{display:flex;align-items:flex-end;gap:14px;margin-bottom:22px}.say-sq{height:130px;width:auto;flex:none;object-fit:contain;transform-origin:50% 100%}
.bubble{position:relative;flex:1;border-radius:20px;padding:16px 18px;font:500 20px/1.28 Fredoka;color:var(--text);background:var(--surface);box-shadow:var(--sh2);margin-bottom:26px;animation:popBubble .5s var(--spring) .08s backwards;transform-origin:0 100%}
.bubble::before{content:"";position:absolute;left:-7px;bottom:22px;width:15px;height:15px;background:var(--surface);transform:rotate(45deg);border-radius:0 0 0 4px}
.opts{display:flex;flex-direction:column;gap:10px}.opts.two{display:grid;grid-template-columns:repeat(2,1fr)}.opts-h{font-size:20px;margin:22px 0 10px}
.opt{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 16px;border-radius:18px;background:var(--surface);box-shadow:var(--sh1);font-weight:800;font-size:17px;text-align:left;transition:transform .28s var(--spring),box-shadow .22s var(--soft),background-color .22s var(--soft);color:var(--text)}
.opt:active{transform:scale(.975)}@media (hover:hover){.opt:hover{transform:translateY(-2px);box-shadow:var(--sh2)}}
.opt.on{background:var(--tea2);box-shadow:inset 0 0 0 2.5px var(--earth),var(--sh1)}.opt.small{min-height:50px;font-size:15px;width:100%;margin-top:8px}
.opt.big .pts{margin-left:auto}
.opt-t{display:flex;flex-direction:column;min-width:0;flex:1}.opt-t small{font-weight:600;font-size:14px;line-height:1.25}
.tick{width:26px;height:26px;border:2px solid var(--line2);border-radius:9px;display:grid;place-items:center;color:transparent;flex:none;transition:background-color .2s var(--soft),border-color .2s var(--soft),transform .3s var(--spring)}.opt.on .tick{background:var(--earth);border-color:var(--earth);color:#fff;transform:scale(1.08)}

/* Auth */
.auth{min-height:100vh;min-height:100dvh;padding:calc(14px + var(--safe-t)) 18px 40px;animation:fade .3s var(--soft)}
.auth-in{max-width:400px;margin:0 auto;display:flex;flex-direction:column;animation:stepIn .42s var(--out) backwards}.auth-mascot{width:124px;align-self:center;margin-bottom:12px;animation:nodePop .6s var(--spring) .05s backwards}.auth-word{align-self:center;margin-bottom:14px}.auth-in h1{font-size:30px;text-align:center;margin-bottom:4px}.auth-in .btn{margin-top:18px}.center-link{align-self:center;margin:14px 0 10px;text-align:center}
.device{margin-top:22px}.device h3{font-size:17px}

/* Quest intro */
.q-hero{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;margin-bottom:18px}
.q-big{width:132px;height:120px;border-radius:50%;color:var(--uk);background:var(--u);background:radial-gradient(120% 100% at 50% 8%,color-mix(in srgb,var(--u) 76%,#fff),var(--u) 62%);display:grid;place-items:center;box-shadow:0 10px 0 var(--ul),0 22px 26px -12px color-mix(in srgb,var(--ul) 70%,transparent);margin-bottom:14px;animation:nodePop .6s var(--spring) backwards}
.q-hero h1{font-size:34px}.q-how{font-weight:600;font-size:17px;color:var(--text2);max-width:440px}.q-how.left{max-width:none;margin:8px 0}
.note{display:flex;gap:12px;align-items:flex-start;text-align:left;padding:14px;border-radius:18px;margin-top:12px;width:100%;background:var(--surface);box-shadow:var(--sh1);animation:rise .4s var(--out) .2s backwards}.note b{font-weight:800}.note p{font-weight:600;font-size:15px;color:var(--text2)}.note .ic{flex:none}
.note.safe{background:var(--tea2)}.note.rest,.note.lvl{background:var(--champ)}.note.badge{background:var(--powder)}
.q-earn{display:flex;justify-content:center;gap:6px 14px;flex-wrap:wrap;margin-top:16px;font-size:13px;color:var(--text2)}.q-earn span{display:inline-flex;align-items:center;gap:5px}.q-earn b{color:var(--text);font:600 17px Fredoka}

/* Timer */
.run-t{font-size:30px;margin-bottom:6px}
.ring{position:relative;width:240px;height:240px;margin:18px 0 6px}.ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ring-bg{fill:var(--surface);stroke:var(--bg2);stroke-width:16}.ring-fg{fill:none;stroke:var(--leaf);stroke-width:16;stroke-linecap:round;transition:stroke-dashoffset .25s linear}
.ring-sq{position:absolute;left:50%;top:50%;height:150px;width:auto;max-width:170px;object-fit:contain;transform:translate(-50%,-50%);transform-origin:50% 100%}
.clock{font:700 56px/1.1 Fredoka;font-variant-numeric:tabular-nums;color:var(--text);margin-bottom:6px}

/* Reward */
.reward-stage{position:relative;display:grid;place-items:center;margin-bottom:6px}
.burst{position:absolute;left:50%;top:50%;width:440px;height:440px;margin:-220px;border-radius:50%;background:repeating-conic-gradient(color-mix(in srgb,var(--sun) 34%,transparent) 0 14deg,transparent 14deg 28deg);-webkit-mask-image:radial-gradient(circle,#000 26%,transparent 68%);mask-image:radial-gradient(circle,#000 26%,transparent 68%);animation:spin 28s linear infinite,fade .6s var(--soft) backwards;pointer-events:none}
.reward-sq{position:relative;height:220px;width:auto;object-fit:contain}
.reward-t{position:relative;font-size:36px;color:var(--brand);margin-bottom:8px;animation:nodePop .55s var(--spring) .22s backwards}
.rw-row{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:100%;margin-top:14px}
.rw{border:3px solid var(--c);border-radius:18px;overflow:hidden;background:var(--c);animation:rewardIn .55s var(--spring) .3s backwards}.rw:nth-child(2){animation-delay:.42s}.rw:nth-child(3){animation-delay:.54s}
.rw.star{--c:var(--sun)}.rw.leaf{--c:var(--leaf)}.rw.xp{--c:var(--earth-l)}
.rw-h{font:800 12px Nunito;letter-spacing:.04em;padding:5px 0 6px;text-align:center}.rw.star .rw-h{color:var(--sun-t)}.rw.leaf .rw-h{color:#123A16}.rw.xp .rw-h{color:#0D2F47}
.rw-b{display:flex;align-items:center;justify-content:center;gap:6px;background:var(--surface);border-radius:13px;padding:14px 4px;font:700 22px Fredoka;font-variant-numeric:tabular-nums}
.rw-xp{width:100%;margin-top:18px;text-align:left;animation:rise .45s var(--out) .6s backwards}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90}

/* Scenes */
.flow.dark{background:radial-gradient(circle at 50% 42%,#14519F,#081E4A 72%);color:#fff}.flow.dark h1{color:#fff}
.flow.dark.scroll{background:#081E4A;overflow-y:auto}
.scene{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:20px;text-align:center;cursor:default}
.rays{position:absolute;left:50%;top:44%;width:1400px;height:1400px;margin:-700px;background:repeating-conic-gradient(rgba(255,231,160,.1) 0 12deg,transparent 12deg 24deg);animation:spin 26s linear infinite;pointer-events:none;border-radius:50%;-webkit-mask-image:radial-gradient(circle,#000 18%,transparent 62%);mask-image:radial-gradient(circle,#000 18%,transparent 62%)}
.scene.summon{cursor:pointer}
.orb{position:relative;width:190px;height:190px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 35%,#fff7dd,#FFC764 45%,#D08C1D 100%);box-shadow:0 0 60px 20px rgba(255,199,100,.5);animation:shake 2.3s var(--soft) both}
.summon.r-rare .orb{background:radial-gradient(circle at 40% 35%,#fff,#5BBDEB 45%,#2878BE);box-shadow:0 0 70px 26px rgba(91,189,235,.6)}
.summon.r-legendary .orb{background:radial-gradient(circle at 40% 35%,#fff,#FFD86B 35%,#E39F2B 70%,#9B5FE0);box-shadow:0 0 110px 44px rgba(255,216,107,.75)}
.tap{position:absolute;bottom:calc(26px + var(--safe-b));font-size:14px;opacity:.75}
.results{justify-content:flex-start;overflow:visible;flex:none;padding:calc(24px + var(--safe-t)) 14px 20px;animation:fade .35s var(--soft) backwards}.results h1{font-size:32px;margin-bottom:18px}
.res-grid{display:grid;gap:12px;width:100%;max-width:640px;margin:0 auto;grid-template-columns:repeat(5,1fr);perspective:900px}.res-grid.n1{grid-template-columns:minmax(0,280px);justify-content:center}
.res{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px 12px;border-radius:18px;background:#fff;color:#0E2350;border:3px solid #C6D3E8;animation:cardIn .6s var(--out) backwards;min-width:0}
.res.r-rare{border-color:var(--sky);box-shadow:0 0 16px rgba(91,189,235,.65)}.res.r-legendary{position:relative;overflow:hidden;border-color:var(--sun);box-shadow:0 0 26px rgba(255,199,100,.9);background:#FFF9EC}
.res.r-legendary::after{content:"";position:absolute;inset:-20%;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);animation:shine 2.6s var(--soft) .8s infinite;pointer-events:none}
.res-art{width:100%;aspect-ratio:1/1.1;display:grid;place-items:center;position:relative;overflow:hidden;border-radius:12px}.res-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:4px}.res.isbg .res-art svg{position:absolute;inset:0;width:100%;height:100%}
.res b{font:600 14px/1.1 Fredoka;margin-top:4px;color:#0E2350}.res small{font-size:11px}.res-note{color:#566A8E;min-height:15px}.res .rar-t.r-common{color:#2B8A3E}.res .rar-t.r-rare{color:#0A6BC2}.res .rar-t.r-legendary{color:#946408}
.res-grid.n1 b{font-size:22px}.res-grid.n1 small{font-size:14px}
.flow-f.dark{background:#081E4A;border-color:#14325F;position:sticky;bottom:0}
.flow.dark .note{color:#fff;background:#12336B;max-width:640px;margin:12px auto 0}.flow.dark .note p{color:#C5D6F0}
.evolve img{position:absolute;left:50%;top:40%;max-height:46vh;max-width:70vw;transform:translate(-50%,-50%);transform-origin:50% 50%}
.evo-a{animation:evoOut 1.9s ease-in forwards}.evo-b{opacity:0;animation:evoIn .9s 1.8s var(--spring) forwards}
.evo-flash{position:absolute;inset:0;background:#fff;opacity:0;animation:flash .7s 1.5s ease-out both;pointer-events:none}
.evo-pre{position:absolute;left:0;right:0;bottom:calc(120px + var(--safe-b));font:500 22px Fredoka;animation:preOut 1.8s ease both}
.reduce .evo-pre{display:none}
.evo-txt{position:absolute;left:0;right:0;bottom:calc(40px + var(--safe-b));padding:0 20px;opacity:0;animation:fadeUp .5s var(--out) 2.4s forwards;display:flex;flex-direction:column;align-items:center;gap:8px}.evo-txt h1{font-size:30px;margin-bottom:10px}

/* Games */
.game-b{align-items:flex-start}.game-c{margin:0 auto;padding-top:4px;max-width:600px}
.g-title{text-align:center;margin-bottom:10px}.g-title h1{font-size:28px}.g-title p{font-weight:600;color:var(--text2);font-size:15px}
.g-hud{display:flex;justify-content:space-between;font-weight:800;font-size:14px;color:var(--text2);margin-bottom:10px}.g-hud b{font:600 19px Fredoka;color:var(--text);margin-left:4px;font-variant-numeric:tabular-nums}
.mem{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;perspective:900px}
.mem-c{aspect-ratio:1/1.12;transition:transform .25s var(--spring)}.mem-c:active{transform:scale(.95)}
.mem-in{position:relative;display:block;width:100%;height:100%;transition:transform .5s var(--out);transform-style:preserve-3d}.mem-c.open .mem-in,.mem-c.done .mem-in{transform:rotateY(180deg)}
.mem-back,.mem-face{position:absolute;inset:0;border-radius:16px;display:grid;place-items:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:var(--sh1)}
.mem-back{background:linear-gradient(135deg,#E6F3FF,#BFE0FF);box-shadow:inset 0 0 0 2px var(--tea-b),var(--sh1)}.mem-face{background:var(--surface);transform:rotateY(180deg)}.mem-face img{position:absolute;inset:6%;width:88%;height:88%;object-fit:contain}
.mem-c.done .mem-face{background:var(--champ);box-shadow:inset 0 0 0 2.5px var(--sun)}.mem-c.done{animation:matched .5s var(--spring)}
.river{position:relative;height:min(58vh,460px);border-radius:22px;overflow:hidden;background:linear-gradient(#5CC1F7,#0A7BDC 70%,#075CAB);box-shadow:var(--sh2)}
.waves{position:absolute;left:-10%;top:0;width:120%;height:100%;pointer-events:none;animation:waves 5s ease-in-out infinite alternate}.waves path{fill:none;stroke:#fff;stroke-opacity:.28;stroke-width:5;stroke-linecap:round}
.float{position:absolute;left:-80px;width:72px;height:72px;display:grid;place-items:center;animation:drift var(--d,4s) linear forwards;z-index:2;border-radius:50%;will-change:transform}
.float-in{display:block;animation:bobFloat 1.5s ease-in-out infinite;transition:transform .15s}.float:active .float-in{transform:scale(.88)}
.float.got,.float.oops{animation-play-state:paused}.float.got .itm,.float.oops .itm{animation:popFade .5s var(--out) forwards}
.plus{position:absolute;left:50%;top:6px;transform:translateX(-50%);font:700 20px Fredoka;color:#fff;text-shadow:0 1px 3px rgba(0,50,80,.5);animation:floatUp .6s var(--out) forwards;pointer-events:none}.plus.minus{color:#FFD2CC}
.sort-it{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 0 18px;animation:nodePop .45s var(--spring) backwards}.sort-it h2{font-size:26px}
.bins{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.bin{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 4px;border-radius:18px;background:var(--surface);box-shadow:var(--sh1);font-weight:800;transition:transform .28s var(--spring),background-color .2s var(--soft),box-shadow .2s var(--soft)}
.bin:active:not(:disabled){transform:scale(.95)}@media (hover:hover){.bin:hover:not(:disabled){transform:translateY(-3px);box-shadow:var(--sh2)}}
.bin:disabled{cursor:default}.bin.right{background:var(--tea2);box-shadow:inset 0 0 0 2.5px var(--leaf);animation:matched .5s var(--spring)}.bin.wrong{background:var(--red2);box-shadow:inset 0 0 0 2.5px var(--red);animation:shakeX .4s}
.fb{position:relative;padding:16px 18px calc(16px + var(--safe-b));animation:slideUp .34s var(--out) both}.fb.good{background:#D5F5D2}.fb.bad{background:var(--red2)}
.fb-in{max-width:1000px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px}.fb-t{display:flex;align-items:center;gap:12px;min-width:0}
.fb-i{width:48px;height:48px;border-radius:50%;background:#fff;display:grid;place-items:center;flex:none;animation:nodePop .45s var(--spring) .08s backwards}.good .fb-i{color:var(--forest)}.bad .fb-i{color:var(--red)}
.fb b{font:600 22px/1.1 Fredoka}.good b{color:#1E5A24}.bad b{color:#9C2C22}.fb p{font-weight:700;font-size:15px}.good p{color:#1E5A24}.bad p{color:#9C2C22}
:root[data-theme="dark"] .good b,:root[data-theme="dark"] .good p{color:#D0F0C0}:root[data-theme="dark"] .bad b,:root[data-theme="dark"] .bad p{color:#FFC0B8}
.fb .btn{flex:none}
.g-breath{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding-top:4vh;animation:rise .4s var(--out) backwards}.g-breath h2{font-size:28px}
.breath-ring{width:220px;height:220px;border-radius:50%;background:var(--tea2);display:grid;place-items:center;animation:breathe 5s ease-in-out infinite}.breath-ring img{height:160px;object-fit:contain}

/* Toast and sheet */
#toast{position:fixed;left:50%;bottom:calc(92px + var(--safe-b));transform:translate(-50%,16px) scale(.96);background:var(--text);color:var(--bg);padding:12px 20px;border-radius:15px;font-weight:800;opacity:0;pointer-events:none;transition:transform .36s var(--spring),opacity .2s var(--soft);z-index:100;max-width:90vw;text-align:center;box-shadow:var(--sh3)}
#toast.show{opacity:1;transform:translate(-50%,0)}
.sheet-bg{position:fixed;inset:0;background:rgba(14,30,20,.46);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:60;animation:fade .24s var(--soft) backwards}
.sheet-bg.leaving{animation:fadeOut .22s var(--soft) forwards;pointer-events:none}
.sheet{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 40px);overflow-y:auto;background:var(--surface);border-radius:26px;padding:24px;z-index:61;animation:popIn .4s var(--spring) backwards;outline:none;box-shadow:var(--sh3)}
.sheet.drag{transition:none;animation:none}.sheet.snap{transition:transform .32s var(--out)}
.sheet.leaving{animation:popOut .2s var(--soft) forwards;pointer-events:none}.sheet.still,.sheet-bg.still{animation:none}
.sheet-x{position:absolute;right:10px;top:10px;z-index:2;background:var(--surface);width:40px;height:40px}
.sheet-t{font-size:26px;margin-bottom:8px;padding-right:36px}.sheet-p{font-weight:600;color:var(--text2)}
.sheet-btns{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}.sheet-btns .btn{flex:1}
.det-art{border-radius:18px;overflow:hidden;margin-bottom:14px}.det-art .sq.fill{aspect-ratio:1/.85}
.det-m{display:flex;align-items:center;gap:10px;margin-bottom:8px;font-size:14px;color:var(--text2)}
.prose h1{margin-bottom:10px;font-size:30px}.data{background:var(--bg2);border-radius:14px;padding:12px;font:600 12px/1.4 ui-monospace,Consolas,monospace;white-space:pre-wrap;word-break:break-word}
.odds-row{padding:12px 14px;border-radius:16px;margin-bottom:8px;background:var(--surface);box-shadow:var(--sh1)}.odds-h{display:flex;justify-content:space-between;margin-bottom:3px}.odds-row p{font-weight:600;font-size:15px;color:var(--text2)}

/* Landing */
.land{background:var(--bg);overflow-x:clip;animation:fade .3s var(--soft)}
.land-h{position:sticky;top:0;z-index:30;padding-top:var(--safe-t);background:var(--bg);background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid transparent;transition:border-color .3s var(--soft),box-shadow .3s var(--soft)}
.scrolled .land-h{border-color:var(--line);box-shadow:0 6px 20px -14px rgba(50,60,35,.3)}
.land-h-in{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:11px 24px}.land-h-b{display:flex;gap:10px}
.hero{position:relative;overflow:hidden;margin-top:calc(-1*(63px + var(--safe-t)));padding-top:calc(63px + var(--safe-t));background:radial-gradient(90% 70% at 72% 30%,#1C8CE6 0%,#0B5CB8 42%,#0B2A63 78%,#081E4A 100%);min-height:min(100vh,860px);display:flex;flex-direction:column}
.hero-sky{position:absolute;inset:0;pointer-events:none}
.hero-sun{position:absolute;right:9%;top:10%;width:210px;height:210px;border-radius:50%;background:radial-gradient(circle,#FFF0B8,#FFC233 58%,#FFC23300 72%);animation:glow 6s ease-in-out infinite;will-change:transform}
.cloud{position:absolute;width:190px;opacity:.28;animation:cloud 34s linear infinite;will-change:transform}.c1{top:15%;left:-210px}.c2{top:7%;left:-210px;width:130px;opacity:.2;animation-duration:52s;animation-delay:-20s}.c3{top:30%;left:-210px;width:110px;opacity:.16;animation-duration:44s;animation-delay:-33s}
.hero-in{position:relative;z-index:3;flex:1;width:100%;max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:30px;padding:30px 24px 110px}
.hero-t{flex:1 1 50%;display:flex;flex-direction:column;gap:20px;align-items:flex-start;min-width:0}
.hero-t h1{font-size:clamp(38px,4.3vw,60px);line-height:1.05;font-weight:700;color:#fff;letter-spacing:-.015em}
.hero-t h1 span{display:block;animation:lineUp .85s var(--out) backwards}.hero-t h1 span:nth-child(2){animation-delay:.1s;color:#B6E86E}.hero-t h1 span:nth-child(3){animation-delay:.2s;color:#8ED2FF}
.hero-p{font-size:clamp(17px,1.5vw,20px);font-weight:600;color:#DCE9FB;max-width:480px;animation:rise .8s var(--out) .32s backwards}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;animation:rise .8s var(--out) .42s backwards}
.hero-art{position:relative;flex:1 1 50%;height:min(62vh,540px);min-height:360px;min-width:0}
.ha{position:absolute;object-fit:contain;bottom:0}
.hm{left:0;right:0;width:100%;height:100%;filter:drop-shadow(0 22px 30px rgba(4,16,48,.5));animation:mascotIn 1s var(--spring) .1s backwards,floaty 6s ease-in-out 1.2s infinite;z-index:4}
.f1{height:50%;left:-6%;bottom:4%;z-index:2;animation:peekIn .9s var(--out) .5s backwards}
.f2{height:42%;right:-6%;bottom:6%;z-index:2;animation:peekIn .9s var(--out) .62s backwards}
.f3{height:24%;left:14%;bottom:-3%;z-index:5;animation:peekIn .9s var(--out) .75s backwards}
.hero-hills{position:absolute;left:0;right:0;bottom:0;height:230px;z-index:1;pointer-events:none}
.hill{position:absolute;left:0;bottom:0;width:100%;will-change:transform}.h3{height:230px}.h2{height:170px}.h1{height:105px}
.h3 path{fill:#A4DC5E}.h2 path{fill:#46BE4F}.h1 path{fill:var(--bg)}
.rv:not(.in){opacity:0;transform:translateY(26px)}.rv.in{opacity:1;transform:none;transition:opacity .75s var(--out) var(--d,0ms),transform .75s var(--out) var(--d,0ms)}
.node-w.rv:not(.in){opacity:1;transform:translateX(var(--o))}.node-w.rv.in{transform:translateX(var(--o));transition:none}
.trust{max-width:1120px;margin:0 auto;padding:10px 24px 12px}.trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.trust li{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:16px;padding:13px 15px;box-shadow:var(--sh1);font-weight:700;font-size:15px;line-height:1.2}
.how{max-width:1120px;margin:0 auto;padding:72px 24px 20px;text-align:center}.how h2{font-size:clamp(34px,4vw,46px);font-weight:700;color:var(--forest);margin-bottom:30px}
.how ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.how-s{background:var(--surface);border-radius:24px;padding:26px;box-shadow:var(--sh2)}.how-s h3{font-size:24px;margin:14px 0 8px}.how-s p{color:var(--text2)}
.how-n{display:grid;place-items:center;width:46px;height:42px;border-radius:50%;background:radial-gradient(120% 100% at 50% 8%,#6FC6FA,#0A7BDC 62%);box-shadow:0 4px 0 #075CAB;color:#fff;font:700 21px Fredoka}
.feat{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:64px;padding:56px 24px}.feat.flip{flex-direction:row-reverse}
.feat-art{flex:1 1 52%;min-width:0;display:flex;justify-content:center;align-items:flex-end;border-radius:36px;padding:34px;min-height:400px}
.p-tea{background:linear-gradient(160deg,#EAF8D5,#BFE88A)}.p-sky{background:linear-gradient(160deg,#DDF0FF,#9FD3FA)}.p-champ{background:linear-gradient(160deg,#FFF3D3,#FFDB7E);align-items:center}.p-tan{background:linear-gradient(160deg,#0B2A63,#0A7BDC);align-items:center}
.feat-t{flex:1 1 48%}.feat-t h2{font-size:clamp(34px,4vw,50px);color:var(--forest);font-weight:700;margin-bottom:14px;letter-spacing:-.01em}.feat-t p{font-size:clamp(17px,1.5vw,20px);font-weight:600;line-height:1.5;color:var(--text2)}
.feat-quests{position:relative;width:360px;height:340px}.feat-quests img{position:absolute;right:0;bottom:0;height:310px;filter:drop-shadow(0 12px 14px rgba(30,60,40,.2))}
.fq{position:absolute;width:84px;height:78px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 7px 0 var(--ul),0 14px 18px -8px rgba(30,60,40,.3);animation:floaty 5s ease-in-out infinite}.fq .ic{width:44px;height:44px}
.fq.n1{left:50px;top:0;--ul:#9AD684}.fq.n2{left:0;top:96px;--ul:#8CC8EC;animation-delay:-1.3s}.fq.n3{left:44px;top:194px;--ul:#C9A27C;animation-delay:-2.6s}.fq.n4{left:122px;top:96px;--ul:#E8BF6F;animation-delay:-3.8s}
.feat-evo{display:flex;align-items:flex-end;justify-content:center;gap:6px;width:100%}.feat-evo img{min-width:0;object-fit:contain;object-position:bottom;transform-origin:50% 100%;filter:drop-shadow(0 12px 14px rgba(20,60,90,.2))}.feat-evo img:nth-child(1){height:150px}.feat-evo img:nth-child(2){height:230px}.feat-evo img:nth-child(3){height:320px}
.feat.in .feat-evo img{animation:growIn .8s var(--spring) backwards}.feat.in .feat-evo img:nth-child(2){animation-delay:.16s}.feat.in .feat-evo img:nth-child(3){animation-delay:.32s}
.feat-board{width:100%;max-width:400px;border-radius:24px;padding:14px;background:var(--surface);box-shadow:var(--sh3)}.fb-row{display:flex;align-items:center;gap:12px;padding:10px;font-size:17px;border-radius:14px}.feat.in .fb-row{animation:rise .6s var(--out) var(--d,0ms) backwards}.fb-row:first-child{background:var(--champ)}.fb-row img{width:44px;height:54px;object-fit:contain}.fb-row b{flex:1;font-weight:800}.fb-row span:last-child{font:600 16px Fredoka;color:var(--text2)}.feat-board .fine{text-align:center;margin-top:6px}
.feat-mascot{width:370px;max-width:100%;filter:drop-shadow(0 18px 20px rgba(60,40,20,.25));animation:floaty 6s ease-in-out infinite}
.feat-safe{position:relative;display:flex;align-items:flex-end;justify-content:center}.feat-safe img{height:320px;filter:drop-shadow(0 12px 14px rgba(30,60,40,.2))}.feat-safe .ic{width:120px;height:120px;margin-right:-10px;animation:floaty 5s ease-in-out infinite}
.land-cta{max-width:1120px;margin:30px auto 70px;padding:0 24px}.cta-in{position:relative;overflow:hidden;display:flex;align-items:flex-end;justify-content:space-between;gap:20px;background:linear-gradient(120deg,#081E4A,#0B2A63 45%,#0A7BDC);border-radius:36px;padding:44px 52px 0;color:#fff;box-shadow:var(--sh3)}
.cta-in>div{padding-bottom:44px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}.cta-in h2{font-size:clamp(32px,4vw,48px);color:#fff;font-weight:700}.cta-in p{font-size:19px;opacity:.9;margin-bottom:8px}.cta-in img{height:270px;flex:none;margin-bottom:-10px}
.land-f{background:#081E4A;color:#E3EDFB;padding:46px 24px calc(34px + var(--safe-b))}.land-f-in{max-width:1072px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px}
.land-f-brand p{margin-top:10px;font-size:15px}.land-f-links{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.land-f-links button{font-weight:800;color:#B6E86E;transition:color .15s}.land-f-links button:hover{color:#fff}
.land-f-note{width:100%;border-top:1px solid rgba(255,255,255,.18);padding-top:16px;font-weight:600;font-size:14px;color:#AFC4E6}

/* Motion */
.idle{animation:breathe 3.6s ease-in-out infinite;will-change:transform}.sq-img.idle{animation:breatheC 3.6s ease-in-out infinite}.ring-sq.idle{animation:breatheR 3.6s ease-in-out infinite}
.bounce{animation:bounce .95s var(--spring) both}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.012)}}
@keyframes breatheC{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.012)}}
@keyframes breatheR{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.012)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes bobx{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@keyframes bobFloat{0%,100%{transform:translateY(-4px) rotate(-4deg)}50%{transform:translateY(4px) rotate(4deg)}}
@keyframes bounce{0%{transform:translateY(40px) scale(.7);opacity:0}100%{transform:none;opacity:1}}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-8deg)}100%{transform:scale(1)}}
@keyframes fade{from{opacity:0}}
@keyframes fadeOut{to{opacity:0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translate3d(var(--dx,0px),12px,0)}}
@keyframes stepIn{from{opacity:0;transform:translate3d(26px,0,0)}}
@keyframes lineUp{from{opacity:0;transform:translate3d(0,34px,0)}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes flowIn{from{opacity:0;transform:translate3d(0,44px,0) scale(.985)}}
@keyframes flowOut{to{opacity:0;transform:translate3d(0,34px,0)}}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.06)}100%{transform:scale(1)}}
@keyframes nodePop{from{opacity:0;transform:scale(.6)}}
@keyframes popBubble{from{opacity:0;transform:scale(.8)}}
@keyframes rewardIn{from{opacity:0;transform:translateY(22px) scale(.82)}}
@keyframes matched{0%{transform:scale(1)}45%{transform:scale(1.07)}100%{transform:scale(1)}}
@keyframes popIn{from{opacity:0;transform:translate(-50%,-47%) scale(.93)}}
@keyframes popOut{to{opacity:0;transform:translate(-50%,-48%) scale(.97)}}
@keyframes sheetUp{from{transform:translateY(100%)}}
@keyframes sheetDown{to{transform:translateY(100%)}}
@keyframes shakeX{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(5px)}75%{transform:translateX(-3px)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{0%{transform:scale(1);opacity:.9;box-shadow:0 0 0 0 color-mix(in srgb,var(--u) 55%,transparent)}100%{transform:scale(1);opacity:0;box-shadow:0 0 0 22px color-mix(in srgb,var(--u) 0%,transparent)}}
@keyframes glow{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes cloud{to{transform:translate3d(calc(100vw + 420px),0,0)}}
@keyframes floaty{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-9px,0)}}
@keyframes mascotIn{from{opacity:0;transform:translate3d(0,50px,0) scale(.86)}}
@keyframes peekIn{from{opacity:0;transform:translate3d(0,40px,0)}}
@keyframes growIn{from{opacity:0;transform:scale(.6)}}
@keyframes shine{0%{transform:translateX(-70%)}60%,100%{transform:translateX(70%)}}
@keyframes waves{to{transform:translate3d(4%,0,0)}}
@keyframes popFade{0%{transform:scale(.7)}40%{transform:scale(1.15);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes floatUp{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,-34px)}}
@keyframes shake{0%{transform:scale(.3);opacity:0}25%{transform:scale(1);opacity:1}45%{transform:rotate(-5deg)}55%{transform:rotate(6deg)}65%{transform:rotate(-8deg)}75%{transform:rotate(9deg)}85%{transform:rotate(-10deg) scale(1.05)}100%{transform:scale(1.5);opacity:1}}
@keyframes cardIn{from{opacity:0;transform:translateY(24px) scale(.82) rotateY(80deg)}}
@keyframes evoOut{0%{transform:translate(-50%,-50%) scale(1)}30%{transform:translate(-50%,-50%) scale(1.04)}55%{transform:translate(-50%,-50%) scale(.98)}75%{transform:translate(-50%,-50%) scale(1.08);filter:brightness(1.8);opacity:1}100%{transform:translate(-50%,-50%) scale(1.2);filter:brightness(4);opacity:0}}
@keyframes evoIn{from{opacity:0;transform:translate(-50%,-50%) scale(.5)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes preOut{0%,70%{opacity:1}100%{opacity:0}}
@keyframes flash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
@keyframes drift{to{transform:translate3d(var(--rw,900px),0,0)}}
.reduce *,.reduce *::before,.reduce *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0ms!important;transition-duration:.01ms!important}
/* The River drift is the game itself, so it keeps moving even with reduced motion */
.reduce .float,.float{animation-duration:var(--d,4s)!important}

/* Tablet: icon-only sidebar */
@media (max-width:1180px){.main{gap:26px;padding-left:20px;padding-right:20px}.rail{width:296px}}
@media (max-width:1023px){
  .side{width:88px;padding:18px 10px;align-items:center;--step:62px}.side-word,.side-i span{display:none}.side-logo{margin:0 0 18px}.side nav{width:60px}.side-ind{height:58px}.side-i{justify-content:center;padding:6px;width:60px;height:58px}
  .rail{display:none}.main{margin-left:88px;padding:0 24px 70px;display:block}.col{margin:0 auto}
  .topbar{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:15;background:var(--bg);background:color-mix(in srgb,var(--bg) 84%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);margin-left:88px;padding:calc(10px + var(--safe-t)) 24px 10px;border-bottom:1px solid transparent;margin-bottom:20px;transition:border-color .25s var(--soft)}
  .scrolled .topbar{border-color:var(--line)}
  .tb-stats{display:flex;align-items:center;gap:6px;width:100%;max-width:600px;margin:0 auto;justify-content:space-between}.tb-home{display:none}.tb-gear{width:44px;height:44px;display:grid;place-items:center;transition:transform .4s var(--spring)}.tb-gear:active{transform:rotate(40deg) scale(.9)}
  .tryon-inline{display:flex;position:sticky;top:76px;z-index:9;padding:0;overflow:hidden;margin:0 0 6px;align-items:stretch;box-shadow:var(--sh3)}.tryon-inline .tryon-art{width:150px;flex:none}.tryon-inline .sq.fill{height:100%;aspect-ratio:auto;min-height:150px}.tryon-inline .tryon-b{flex:1;min-width:0}
}
@media (max-width:900px){
  .hero{min-height:0}.hero-in{flex-direction:column;align-items:stretch;gap:22px;padding:22px 22px 70px}.hero-t{flex:none;align-items:center;text-align:center}.hero-p{margin:0 auto}.hero-btns{justify-content:center}.hero-art{flex:none;width:100%;max-width:520px;height:390px;min-height:0;margin:0 auto}
  .hero-sun{right:-40px;top:8%;width:170px;height:170px}.trust ul{grid-template-columns:repeat(2,1fr)}
  .feat,.feat.flip{flex-direction:column;gap:26px;text-align:center}.feat-t,.feat-art{flex:none;width:100%;max-width:640px}
  .how ol{grid-template-columns:1fr}
}
/* Phone: top stats + bottom tabs */
@media (max-width:767px){
  html{scrollbar-gutter:auto}
  .side{display:none}.main{margin-left:0;padding:0 16px calc(100px + var(--safe-b))}
  .topbar{margin-left:0;padding:calc(8px + var(--safe-t)) 14px 8px;margin-bottom:14px}.tb-home{display:block;transition:transform .25s var(--spring)}.tb-home:active{transform:scale(.92)}.tb-stats{margin:0;width:auto;flex:1;justify-content:flex-end;gap:2px}
  .chip-stat{font-size:17px;padding:4px 5px;gap:4px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);background:color-mix(in srgb,var(--surface) 88%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-top:1px solid var(--line);padding:6px 6px calc(6px + var(--safe-b))}
  .tab-ind{position:absolute;left:6px;top:6px;width:calc((100% - 12px)/var(--n));height:56px;transform:translateX(calc(var(--i)*100%));transition:transform .42s var(--out),opacity .2s;pointer-events:none}.tab-ind.off{opacity:0}
  .tab-ind::before{content:"";position:absolute;inset:0 4px;border-radius:15px;background:var(--tea2);box-shadow:inset 0 0 0 2px var(--tea-b)}
  .tab-i{position:relative;flex:1;min-width:0;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font:700 11px Nunito;color:var(--text2);transition:color .2s var(--soft),transform .22s var(--spring)}
  .tab-i .ic{transition:transform .38s var(--spring)}.tab-i:active{transform:scale(.92)}.tab-i.on{color:var(--forest);font-weight:800}.tab-i.on .ic{transform:translateY(-1px) scale(1.1)}
  .page-t{font-size:29px}
  .tryon-inline{top:60px}.tryon-inline .tryon-art{width:112px}.tryon-inline .sq.fill{min-height:128px}.tryon-inline .tryon-b{padding:10px 12px}.tryon-inline .tryon-b h3{font-size:18px}
  .break-card{padding:16px;gap:10px;border-radius:20px}.break-card h2{font-size:20px}.break-card p{font-size:14px}.break-card .btn{padding:0 12px;font-size:13px;letter-spacing:.02em;min-height:46px}
  .path-sq{height:158px;max-width:108px;left:calc(50% + 56px);top:90px}
  .path-deco .ic{width:72px;height:72px}.path-deco.right{left:calc(50% + 66px)}.path-deco.left{right:calc(50% + 66px)}
  .break-t p{display:none}
  .unit-h{padding:14px 16px}.unit-h h2{font-size:21px}
  /* Landing */
  .hero-sun{right:-44px;top:auto;bottom:230px;width:130px;height:130px}.only-wide{display:none}.land-h-in{padding:10px 16px}.hero-in{padding:16px 18px 60px}.hero-t h1{font-size:clamp(30px,8.6vw,44px)}.hero-art{height:320px}.hero-btns{width:100%;flex-direction:column}.hero-btns .btn{width:100%;white-space:normal}.hero-hills{height:150px}.h3{height:150px}.h2{height:112px}.h1{height:70px}
  .trust{padding:6px 16px}.trust li{font-size:14px;padding:11px 12px}.how{padding:50px 16px 10px}
  .feat,.feat.flip{gap:22px;padding:34px 16px}.feat-art{min-height:0;padding:26px 16px;border-radius:28px}.feat-t p{font-size:17px}
  .feat-quests{width:300px;height:280px}.feat-quests img{height:250px}.fq{width:74px;height:68px}.fq.n3{top:170px}.fq.n2,.fq.n4{top:84px}.fq.n4{left:104px}.feat-evo img:nth-child(1){height:110px}.feat-evo img:nth-child(2){height:170px}.feat-evo img:nth-child(3){height:235px}.feat-mascot{width:280px}.feat-safe img{height:230px}.feat-safe .ic{width:92px;height:92px}
  .land-cta{margin:16px auto 40px;padding:0 16px}.cta-in{flex-direction:column;align-items:center;text-align:center;padding:34px 22px 0;border-radius:28px;gap:0}.cta-in>div{align-items:center;padding-bottom:18px}.cta-in img{height:210px}
  /* Summon */
  .banner{flex-direction:column;min-height:0}.ban-art{flex:none;height:210px;min-height:0}.ban-b{padding:14px 18px 20px}.ban-b h2{font-size:25px}
  .cover-art{height:230px}.tiles{grid-template-columns:repeat(2,1fr)}.evo-s{width:88px}.evo-art{width:82px;height:96px}
  .gridc{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}.gart{height:92px}
  /* Flows */
  .flow.enter{animation:phoneIn .46s var(--out) backwards}.flow.leaving{animation:phoneOut .3s var(--soft) forwards}
  .flow-h{padding-left:8px;padding-right:14px;gap:6px}.flow-f{padding-left:14px;padding-right:14px}.flow-f-in .btn{min-width:0;flex:1}.flow-f-in>span{display:none}
  .say-sq{height:104px}.bubble{font-size:18px;padding:13px 15px}.q-hero h1{font-size:30px}.reward-sq{height:180px}.burst{width:360px;height:360px;margin:-180px}.ring{width:210px;height:210px}.ring-sq{height:128px}.clock{font-size:46px}
  .res-grid{grid-template-columns:repeat(2,1fr)}.res-grid.n10 .res-art{aspect-ratio:1/.9}
  .fb-in{flex-direction:column;align-items:stretch}.fb .btn{width:100%}
  .impact-hero img{width:120px}.impact-n b{font-size:38px}
  .shop-art{width:68px;height:68px}.shop-pick{gap:10px}.shop-t b{font-size:16px}.shop-t small{font-size:13px}.shop-row{padding:8px 10px 8px 8px;gap:6px}
  #toast{bottom:calc(84px + var(--safe-b))}
  .sheet{left:0;right:0;top:auto;bottom:0;width:100%;transform:none;border-radius:26px 26px 0 0;padding-bottom:calc(24px + var(--safe-b));animation:sheetUp .42s var(--out) backwards;max-height:88dvh}
  .sheet.leaving{animation:sheetDown .26s var(--soft) forwards}
  @keyframes phoneIn{from{transform:translate3d(0,100%,0)}}
  @keyframes phoneOut{to{transform:translate3d(0,100%,0)}}
}
@media (max-width:400px){
  .node-w,.node-w.rv:not(.in),.node-w.rv.in{transform:translateX(calc(var(--o)*.86))}.trail{transform:scaleX(.86);transform-origin:0 0}
}
@media (max-width:359px){
  .node-w,.node-w.rv:not(.in),.node-w.rv.in{transform:translateX(calc(var(--o)*.62))}.trail{transform:scaleX(.62)}
  .node-l b{font-size:13px}
  .q-head>div{min-width:190px}
  .impact-hero.teacher img{width:88px}.impact-hero h1{overflow-wrap:anywhere}
  .chip-stat{font-size:15px}.chip-stat .ic{width:20px;height:20px}
  .break-card{flex-direction:column;align-items:stretch}.break-card .btn{width:100%}
  .path-sq{display:none}.home-more{grid-template-columns:1fr 1fr}
  .rw-b{font-size:18px}.bins{gap:6px}.opts.two{grid-template-columns:1fr}.btn{letter-spacing:.02em;padding:0 12px}
  .flow-c{padding-left:14px;padding-right:14px}.tiles{grid-template-columns:1fr 1fr}.evo-s{width:78px}.evo-art{width:72px;height:88px}
  .shop-art{width:56px;height:56px}.btn.price{padding:0 8px;font-size:13px}
  .q-head{flex-wrap:wrap}.hero-art{height:270px}
}

/* Squatch ground shadow */
.sq-shadow{position:absolute;left:50%;bottom:3%;width:62%;height:7%;margin-left:-31%;border-radius:50%;background:radial-gradient(closest-side,rgba(8,30,74,.32),transparent)}

/* Launch intro */
#splash{display:none}
.show-splash #splash{display:flex;position:fixed;inset:0;z-index:200;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(90% 60% at 50% 40%,#1C8CE6,#0B5CB8 45%,#0B2A63 85%);overflow:hidden;color:#fff;text-align:center;cursor:pointer;will-change:clip-path}
#splash.leaving{animation:irisOut .7s cubic-bezier(.7,0,.3,1) forwards;pointer-events:none}
@keyframes irisOut{from{clip-path:circle(120vmax at 50% 42%)}to{clip-path:circle(0 at 50% 42%)}}
.sp-rays{position:absolute;left:50%;top:42%;width:1400px;height:1400px;margin:-700px;border-radius:50%;background:repeating-conic-gradient(rgba(255,255,255,.09) 0 10deg,transparent 10deg 20deg);-webkit-mask-image:radial-gradient(circle,#000 12%,transparent 60%);mask-image:radial-gradient(circle,#000 12%,transparent 60%);animation:fade .8s var(--soft) .1s backwards,spin 26s linear infinite}
.sp-stage{position:relative;width:240px;height:260px}
.sp-mascot{position:absolute;left:20px;bottom:0;width:200px;height:auto;filter:drop-shadow(0 18px 24px rgba(4,16,48,.5));animation:spIn 1s var(--spring) .1s backwards,spFloat 3.4s ease-in-out 1.2s infinite}
.sp-baby{position:absolute;left:-54px;bottom:-14px;width:118px;height:150px;animation:babyRun 1.2s cubic-bezier(.2,.7,.3,1) .55s backwards}
.sp-baby img{position:absolute;left:0;bottom:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;filter:drop-shadow(0 8px 10px rgba(4,16,48,.45))}
.sp-baby .r{animation:babyStep .24s steps(1) .55s 5,hideAt .01s linear 1.75s forwards}.sp-baby .w{opacity:0;animation:showAt .01s linear 1.75s forwards,babyHop .55s var(--spring) 1.76s,poseWiggle .9s ease-in-out 2.3s infinite;transform-origin:50% 100%}
@keyframes babyRun{from{transform:translate3d(-90vw,0,0)}}
@keyframes babyStep{0%{scale:1 1;translate:0 0}50%{scale:1 1;translate:0 -12px}}
@keyframes hideAt{to{opacity:0}}@keyframes showAt{to{opacity:1}}
@keyframes babyHop{0%{translate:0 0}50%{translate:0 -46px}100%{translate:0 0}}
.sp-word{position:relative;margin-top:26px;animation:wordIn .8s var(--spring) .9s backwards}.sp-word .wordmark{margin:auto}@keyframes wordIn{from{opacity:0;transform:translate3d(0,26px,0) scale(.7)}}
.sp-tag{position:relative;margin-top:14px;font:500 21px/1.32 Fredoka;color:#E8F2FF}.sp-tag span{display:block;animation:spUp .6s var(--out) backwards}.sp-tag span:nth-child(1){animation-delay:1.3s}.sp-tag span:nth-child(2){animation-delay:1.65s;color:#B6E86E}.sp-tag span:nth-child(3){animation-delay:2s;color:#8ED2FF}
.sp-leaf{position:absolute;left:50%;top:40%;width:26px;height:26px;opacity:0;animation:spLeaf 1.6s var(--out) .5s forwards;--a:0deg}
.sp-skip{position:absolute;right:18px;bottom:calc(18px + var(--safe-b));color:rgba(255,255,255,.75);font:800 14px Nunito;padding:8px 12px}
#splash.quick .sp-tag,#splash.quick .sp-baby,#splash.quick .sp-skip{display:none}#splash.quick .sp-word{animation-delay:.2s}#splash.quick .sp-mascot{animation:spQuick .6s var(--out) backwards}
@keyframes spIn{0%{transform:scale(1)}18%{transform:scale(.9,.88)}55%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes spQuick{from{transform:scale(.92)}}
@keyframes spFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes spUp{from{opacity:0;transform:translate3d(0,18px,0)}}
@keyframes spLeaf{0%{opacity:0;transform:rotate(var(--a)) translateY(-50px) scale(.5)}20%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(-340px) scale(1.2) rotate(160deg)}}

/* iPhone: swipe intro */
.intro{position:fixed;inset:0;display:flex;flex-direction:column;overflow:hidden;background:#0B2A63;color:#fff;animation:fade .4s var(--soft) backwards}
.intro-bg{position:absolute;inset:0;opacity:0;will-change:opacity}.intro-bg.b0{background:radial-gradient(90% 60% at 50% 34%,#1C8CE6,#0B5CB8 45%,#0B2A63 88%);opacity:1}.intro-bg.b1{background:radial-gradient(90% 60% at 50% 34%,#57C94F,#1F8F3A 48%,#0A3D24 92%)}.intro-bg.b2{background:radial-gradient(90% 60% at 50% 34%,#E9873F,#A8481F 48%,#4A1C0A 92%)}
.intro-track{position:relative;flex:1;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior:contain}.intro-track::-webkit-scrollbar{display:none}
.intro-p{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:calc(20px + var(--safe-t)) 28px 6px;text-align:center;min-width:0}
.intro-art{position:relative;flex:1;min-height:0;width:100%;display:flex;align-items:flex-end;justify-content:center;will-change:transform}.intro-art img{max-height:100%;object-fit:contain;min-width:0;filter:drop-shadow(0 14px 20px rgba(4,16,48,.45))}
.intro-art.one img{width:min(84vw,380px);animation:spIn 1s var(--spring) .15s backwards,floaty 6s ease-in-out 1.2s infinite}
.intro-art.three img:nth-child(1){height:38%}.intro-art.three img:nth-child(2){height:60%}.intro-art.three img:nth-child(3){height:88%}
.intro-art.crew img{height:60%;margin:0 -7%}.intro-art.crew img:nth-child(2){height:76%;z-index:1}
.intro-p h1{color:#fff;font-size:clamp(32px,9.4vw,42px);font-weight:700;margin-top:20px;letter-spacing:-.01em}.intro-p p{font-size:17px;font-weight:600;color:#E3EDFB;max-width:340px;margin-top:8px;min-height:76px}
.intro-foot{position:relative;flex:none;padding:6px 22px calc(18px + var(--safe-b));display:flex;flex-direction:column;align-items:center;gap:12px}
.dots{display:flex;gap:8px;margin-bottom:6px}.dots i{display:block;width:9px;height:9px;border-radius:99px;background:#fff;opacity:.35;transform-origin:50% 50%}
.intro-foot .btn{width:100%;max-width:420px}.intro-link{color:#fff;font-weight:800;font-size:15px;padding:8px 14px;transition:opacity .15s}.intro-link:active{opacity:.6}

/* VE store, about, contact */
.land-nav{display:flex;gap:4px}.land-nav button{padding:8px 12px;border-radius:11px;font:800 14px Nunito;color:var(--text2);transition:background-color .15s,color .15s}.land-nav button:hover{background:var(--bg2);color:var(--text)}
.cart-btn{position:relative;width:44px;height:44px;display:grid;place-items:center;border-radius:13px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line),0 3px 0 var(--line2);transition:transform .25s var(--spring)}.cart-btn:active{transform:translateY(3px);box-shadow:inset 0 0 0 2px var(--line)}
.cart-n{position:absolute;right:-6px;top:-6px;min-width:22px;height:22px;padding:0 6px;border-radius:99px;background:#E23D33;color:#fff;font:800 12px/22px Nunito;text-align:center;animation:nodePop .4s var(--spring)}
.about{max-width:1120px;margin:0 auto;padding:60px 24px 10px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center}.about h2,.store h2,.contact h2{font-size:clamp(34px,4vw,46px);font-weight:700;color:var(--forest);margin-bottom:14px}.about p{font-size:clamp(17px,1.5vw,19px);color:var(--text2);line-height:1.55}
.about-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.about-stats div{background:var(--surface);border-radius:20px;padding:18px;box-shadow:var(--sh2)}.about-stats b{display:block;font:700 30px/1.1 Fredoka;color:var(--earth)}.about-stats span{font-size:14px;color:var(--text2);line-height:1.25;display:block;margin-top:4px}
.store{max-width:1120px;margin:0 auto;padding:60px 24px 20px;scroll-margin-top:70px}.store-sub{color:var(--text2);font-size:18px;margin-bottom:24px;max-width:640px}
.store-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.prod{display:flex;flex-direction:column;background:var(--surface);border-radius:24px;padding:18px;box-shadow:var(--sh2);transition:transform .3s var(--spring),box-shadow .3s var(--out)}@media (hover:hover){.prod:hover{transform:translateY(-4px);box-shadow:var(--sh3)}}
.prod-art{height:170px;border-radius:18px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;margin-bottom:14px;background:linear-gradient(160deg,#DDF0FF,#9FD3FA)}.prod-art img{height:92%;object-fit:contain;margin-bottom:-2px}.prod.a2 .prod-art{background:linear-gradient(160deg,#EAF8D5,#BFE88A)}.prod.a3 .prod-art{background:linear-gradient(160deg,#FFF3D3,#FFDB7E)}
.prod h3{font-size:21px}.prod p{flex:1;color:var(--text2);font-size:15px;margin:6px 0 12px}.prod-b{display:flex;align-items:center;justify-content:space-between;gap:10px}.prod-price{font:700 24px/1 Fredoka;color:var(--text)}.prod-price small{display:block;font:700 12px Nunito;margin-top:3px}
.disclaimer{font-size:14px;font-weight:700;color:var(--text2);margin-top:18px;text-align:center}
.contact{max-width:1120px;margin:0 auto;padding:50px 24px 10px;text-align:center;scroll-margin-top:70px}.contact p{font-size:18px;color:var(--text2)}.contact a{color:var(--earth);font-weight:800}
.cart-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.cart-row>div{flex:1;min-width:0}.cart-row b{font-weight:800;display:block}.qty{display:flex;align-items:center;gap:8px;font:600 18px Fredoka}.qty button{width:34px;height:34px;border-radius:10px;background:var(--bg2);font:700 20px/1 Fredoka;transition:transform .2s var(--spring)}.qty button:active{transform:scale(.88)}
.cart-tot{display:flex;justify-content:space-between;font:700 22px Fredoka;padding:14px 0 4px}
.order-no{font:700 26px Fredoka;color:var(--earth);letter-spacing:.04em;margin:6px 0 10px}
@media (max-width:900px){.about{grid-template-columns:1fr;padding-top:40px}.store-grid{grid-template-columns:1fr 1fr}}
@media (max-width:767px){.land-nav{display:none}.about,.store,.contact{padding-left:16px;padding-right:16px}.store-grid{grid-template-columns:1fr}.prod-art{height:150px}}

/* Scroll gate */
.gate-card{margin-bottom:18px;background:linear-gradient(135deg,var(--powder),var(--surface))}.gate-card h3{font-size:20px}
.b-steps{list-style:none;margin:16px 0 18px;padding:0;display:flex;flex-direction:column;gap:12px}.b-step{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border-radius:18px;padding:12px 14px;box-shadow:var(--sh1);font-weight:600}.b-step .how-n{flex:none;width:36px;height:33px;font-size:17px;box-shadow:0 3px 0 #075CAB}.b-step b{font-weight:800}
.steps{font:600 17px Fredoka;color:var(--earth);margin-bottom:6px}

/* Character speech bubble */
img.pup{cursor:pointer;touch-action:manipulation}
.rail-sq-art img.pup,.tryon-art img.pup{pointer-events:none}
.path-sq.pup{pointer-events:auto}
.pup-say{position:fixed;z-index:120;max-width:240px;background:#fff;color:#0E2350;font:600 16px/1.2 Fredoka;padding:9px 14px;border-radius:15px;box-shadow:var(--sh3);pointer-events:none;animation:popBubble .34s var(--spring)}
.pup-say::after{content:"";position:absolute;left:50%;bottom:-6px;width:13px;height:13px;margin-left:-6px;background:#fff;transform:rotate(45deg);border-radius:0 0 3px 0}
.pup-say.out{opacity:0;transform:translateY(-6px);transition:opacity .22s,transform .22s}

/* Reward flight and finished quest */
.fly-leaf{position:fixed;left:0;top:0;z-index:95;pointer-events:none;will-change:transform,opacity}
.node.justdone{animation:nodeDone .7s var(--spring) .25s backwards}.node.justdone::before{content:"";position:absolute;inset:-6px;border-radius:50%;border:5px solid var(--sun);animation:ringOut .8s var(--out) .3s both;pointer-events:none}
@keyframes nodeDone{0%{transform:scale(1)}35%{transform:scale(.72)}70%{transform:scale(1.14)}100%{transform:scale(1)}}
@keyframes ringOut{from{opacity:1;transform:scale(.8)}to{opacity:0;transform:scale(1.7)}}
/* Floating leaves on the landing page */
.amb{position:absolute;left:0;bottom:12%;opacity:0;animation:ambLeaf 14s linear infinite;will-change:transform,opacity}
.a0{left:6%;animation-delay:0s}.a1{left:18%;animation-delay:-3s;animation-duration:17s}.a2{left:31%;animation-delay:-7s}.a3{left:44%;animation-delay:-11s;animation-duration:19s}.a4{left:57%;animation-delay:-2s;animation-duration:16s}.a5{left:68%;animation-delay:-9s}.a6{left:79%;animation-delay:-5s;animation-duration:18s}.a7{left:90%;animation-delay:-13s}.a8{left:37%;animation-delay:-15s;animation-duration:20s}
@keyframes ambLeaf{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}10%{opacity:.85}50%{transform:translate3d(38px,-46vh,0) rotate(150deg)}90%{opacity:.7}100%{opacity:0;transform:translate3d(-24px,-86vh,0) rotate(320deg)}}

/* Drawn poses */
img.pup.posing{visibility:hidden}
.pose-ov{position:fixed;left:0;top:0;z-index:58;pointer-events:none;will-change:transform}.pose-ov img{display:block;height:100%;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 6px 8px rgba(8,30,74,.14))}
.flow .pose-ov{z-index:60}

/* Trailer */
.trailer{max-width:980px;margin:0 auto;padding:44px 24px 0}.trailer-in{border-radius:26px;overflow:hidden;box-shadow:var(--sh3);background:#081E4A;aspect-ratio:16/9}.trailer video{display:block;width:100%;height:100%;object-fit:cover}
.about,.how,.store,.contact,.trailer{scroll-margin-top:70px}
@media (max-width:767px){.trailer{padding:30px 16px 0}.trailer-in{border-radius:20px}}

/* Memory cards stay hidden even where a browser ignores 3D backfaces */
.mem-face{visibility:hidden;transition:visibility 0s .16s}.mem-back{visibility:visible;transition:visibility 0s .16s}
.mem-c.open .mem-face,.mem-c.done .mem-face{visibility:visible}.mem-c.open .mem-back,.mem-c.done .mem-back{visibility:hidden}
@media (max-width:767px){.tabbar{background:color-mix(in srgb,var(--surface) 97%,transparent)}}

/* Celebration */
.fx-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:90}
.fx-flash{position:fixed;inset:0;z-index:89;pointer-events:none}
.bl{display:inline-block;animation:blDrop .62s var(--spring) backwards;white-space:pre}
@keyframes blDrop{0%{opacity:0;transform:translate3d(0,-46px,0) scale(.6) rotate(-14deg)}70%{opacity:1}100%{transform:none}}
.reward-t{animation:none}.reward-t .bl{color:var(--earth)}.reward-t .bl:nth-child(3n){color:#35B04A}.reward-t .bl:nth-child(3n+1){color:var(--navy-l)}
:root[data-theme="dark"] .reward-t .bl{color:#8ED2FF}:root[data-theme="dark"] .reward-t .bl:nth-child(3n){color:#B6E86E}:root[data-theme="dark"] .reward-t .bl:nth-child(3n+1){color:#fff}
.burst{animation:spin 16s linear infinite,burstIn .7s var(--spring) backwards}@keyframes burstIn{from{opacity:0;scale:.3}}
.reward-sq.bounce{animation:winJump 1s var(--spring) both}@keyframes winJump{0%{opacity:0;transform:translate3d(0,120px,0) scale(.5)}55%{opacity:1;transform:translate3d(0,-26px,0) scale(1.1)}100%{transform:none}}
.rw{animation:tileIn .6s var(--spring) .52s backwards}.rw:nth-child(2){animation-delay:.68s}.rw:nth-child(3){animation-delay:.84s}@keyframes tileIn{from{opacity:0;transform:translate3d(0,44px,0) rotate(-6deg) scale(.7)}}
.rw-xp{animation:rise .5s var(--out) .95s backwards}.big-bar{height:18px}.big-bar i{transition:width 1.1s var(--out);overflow:hidden}.big-bar i::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);animation:barShine 1.5s ease-in-out infinite}@keyframes barShine{from{transform:translateX(-100%)}to{transform:translateX(160%)}}
.win-in{animation:rise .5s var(--out) var(--d,0s) backwards}
.badge-in{animation:badgeIn .6s var(--spring) var(--d,1.5s) backwards}@keyframes badgeIn{from{opacity:0;transform:translate3d(-40px,0,0) scale(.85)}}
.badge-spin{display:block;flex:none;animation:badgeSpin .9s var(--spring) calc(var(--d,1.5s) + .1s) backwards}@keyframes badgeSpin{from{transform:rotateY(540deg) scale(.4)}}
.win-btn{animation:rise .5s var(--out) 1.3s backwards,btnPulse 1.8s ease-in-out 2.2s infinite}@keyframes btnPulse{50%{scale:1.035}}
/* Level up */
.level-scene{gap:6px;justify-content:center}.lvl-k{position:relative;font:700 26px Fredoka;color:#B6E86E;letter-spacing:.06em;text-transform:uppercase;animation:rise .5s var(--out) .1s backwards}
.lvl-n{position:relative;font:700 clamp(110px,26vw,190px)/1 Fredoka;color:#FFC233;text-shadow:0 8px 0 #B97A07,0 18px 40px rgba(0,0,0,.4);animation:lvlZoom .8s var(--spring) .15s backwards}@keyframes lvlZoom{from{opacity:0;transform:scale(3.2) rotate(-12deg)}}
.lvl-sq{position:relative;height:min(30vh,240px);width:auto;animation:winJump 1s var(--spring) .3s both}
.level-scene h1{position:relative;font-size:clamp(24px,5vw,32px);margin:8px 0 14px;padding:0 10px}.level-scene .btn{position:relative;animation:rise .5s var(--out) 1.3s backwards}
/* Evolution */
.evo-glow{position:absolute;left:50%;top:40%;width:60vmin;height:60vmin;margin:-30vmin;border-radius:50%;background:radial-gradient(circle,rgba(255,226,138,.75),transparent 66%);animation:evoGlow 1.9s ease-in both}@keyframes evoGlow{0%{opacity:0;scale:.4}80%{opacity:1;scale:1.3}100%{opacity:.5;scale:1}}
.evo-new{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);height:46vh;display:block}.evolve .evo-new img{position:static;transform:none;height:100%;width:auto;max-height:46vh;opacity:0;animation:evoNew .9s 1.8s var(--spring) forwards}@keyframes evoNew{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.evo-a{animation:evoOut2 1.9s ease-in forwards}@keyframes evoOut2{0%{transform:translate(-50%,-50%) scale(1)}25%{transform:translate(-50%,-50%) scale(1.06)}45%{transform:translate(-50%,-50%) scale(.96)}65%{transform:translate(-50%,-50%) scale(1.12);filter:brightness(1.8)}85%{transform:translate(-50%,-50%) scale(1.02);filter:brightness(3)}100%{transform:translate(-50%,-50%) scale(1.3);filter:brightness(6);opacity:0}}
/* Summon */
.orb-ring{position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px;border-radius:50%;border:4px dashed rgba(255,255,255,.5);animation:spin 5s linear infinite,ringIn 2.3s ease-in both}.orb-ring.two{width:400px;height:400px;margin:-200px;border-style:dotted;animation-direction:reverse;opacity:.6}@keyframes ringIn{0%{scale:1.8;opacity:0}60%{opacity:.8}100%{scale:.35;opacity:1}}
.res{animation:cardFlip .7s var(--out) backwards}@keyframes cardFlip{from{opacity:0;transform:perspective(800px) translateY(30px) rotateY(120deg) scale(.8)}}
.res.r-rare,.res.r-legendary{animation:cardFlip .7s var(--out) backwards,cardGlow 1.8s ease-in-out .8s infinite}@keyframes cardGlow{50%{filter:brightness(1.08)}}
/* Characters: always a little alive, as one clean piece */
img.pup.idle,.ha.pup,.intro-art img.pup{transform-origin:50% 100%}
img.pup.idle{animation:pupSway 2.6s ease-in-out infinite}
.sq-img.pup.idle{animation:breatheC 3.6s ease-in-out infinite,pupSway 2.6s ease-in-out infinite}.ring-sq.pup.idle{animation:breatheR 3.6s ease-in-out infinite,pupBob 1.3s ease-in-out infinite}
.path-sq.pup.idle{animation:pupSway 2.6s ease-in-out infinite,pupBob 1.3s ease-in-out infinite}
@keyframes pupSway{0%,100%{rotate:-2.4deg}50%{rotate:2.4deg}}
@keyframes pupBob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.pose-ov img{width:100%;height:100%;transform:none;transform-origin:50% 100%;animation:poseWiggle .9s ease-in-out infinite}@keyframes poseWiggle{0%,100%{rotate:-2deg}50%{rotate:2deg}}
.node.next .node-i{animation:nodeBeat 1.4s ease-in-out infinite}@keyframes nodeBeat{50%{transform:scale(1.14)}}
.tile .ic,.unit-h::after{will-change:auto}
.unit-h::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);transform:translateX(-100%);animation:headShine 6s ease-in-out infinite;pointer-events:none}@keyframes headShine{0%,70%{transform:translateX(-100%)}100%{transform:translateX(100%)}}

/* Website pages */
.brand-btn{display:block;transition:transform .25s var(--spring)}.brand-btn:active{transform:scale(.97)}
.land-nav button.on{color:var(--earth);background:var(--powder)}
.menu-btn{display:none;width:44px;height:44px;border-radius:13px;flex-direction:column;align-items:center;justify-content:center;gap:5px;background:var(--surface);box-shadow:inset 0 0 0 2px var(--line),0 3px 0 var(--line2)}.menu-btn i{display:block;width:20px;height:2.5px;border-radius:9px;background:var(--navy-l);transition:transform .3s var(--spring),opacity .2s}
.menu-btn[aria-expanded="true"] i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}.menu-btn[aria-expanded="true"] i:nth-child(2){opacity:0}.menu-btn[aria-expanded="true"] i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.land-menu{display:none}
@media (max-width:1040px){.land-nav{display:none}.only-wide{display:none}.menu-btn{display:flex}
  .land-menu{display:grid;grid-template-rows:0fr;overflow:hidden;transition:grid-template-rows .36s var(--out),padding .36s var(--out);padding:0 16px;gap:4px;background:var(--surface)}.land-menu.open{grid-template-rows:1fr;padding:6px 16px 16px;border-top:1px solid var(--line)}
  .land-menu{display:flex;flex-direction:column;max-height:0;transition:max-height .4s var(--out),padding .36s var(--out)}.land-menu.open{max-height:460px}.land-menu>button:not(.btn){min-height:46px;text-align:left;font:600 18px Fredoka;border-radius:12px;padding:0 10px}.land-menu>button:not(.btn):active{background:var(--bg2)}.land-menu .btn{margin-top:8px}}
.site-page{animation:rise .42s var(--out) backwards}
.p-hero{position:relative;overflow:hidden;margin-top:calc(-1*(63px + var(--safe-t)));padding:calc(96px + var(--safe-t)) 0 90px;background:radial-gradient(90% 90% at 75% 20%,#1C8CE6 0%,#0B5CB8 46%,#0B2A63 82%,#081E4A 100%);color:#fff}
.p-hero-in{position:relative;max-width:1120px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;gap:30px}.p-hero-t{flex:1;min-width:0}
.kick{font:800 15px Nunito;letter-spacing:.08em;text-transform:uppercase;color:#B6E86E;margin-bottom:10px;animation:rise .5s var(--out) backwards}
.p-hero h1{color:#fff;font-size:clamp(36px,5vw,62px);font-weight:700;line-height:1.06;letter-spacing:-.01em}
.p-sub{font-size:clamp(17px,1.6vw,21px);color:#DCE9FB;max-width:560px;margin:14px 0 20px;animation:rise .6s var(--out) .35s backwards}
.p-hero-art{flex:0 0 34%;display:flex;justify-content:center;align-items:flex-end;min-height:300px}.ph-sq{height:330px;width:auto;max-width:100%;object-fit:contain;filter:drop-shadow(0 18px 24px rgba(4,16,48,.45));animation:winJump 1s var(--spring) .15s backwards,floaty 5s ease-in-out 1.3s infinite}
.p-curve{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:60px;display:block}.p-curve path{fill:var(--bg)}
.sec{max-width:1120px;margin:0 auto;padding:56px 24px 16px}.sec>h2,.marq-w>h2,.compare>h2{font-size:clamp(32px,4vw,46px);font-weight:700;color:var(--forest);margin-bottom:26px;text-align:center}
.sec.tint{max-width:none;background:linear-gradient(180deg,var(--powder),var(--bg));padding:60px max(24px,calc((100% - 1072px)/2)) 40px;margin-top:40px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.c3-c{background:var(--surface);border-radius:24px;padding:24px;box-shadow:var(--sh2);transition:transform .3s var(--spring),box-shadow .3s var(--out)}@media (hover:hover){.c3-c:hover{transform:translateY(-5px) rotate(-.4deg);box-shadow:var(--sh3)}.c3-c:hover .c3-i{transform:scale(1.12) rotate(-6deg)}}
.c3-i{display:grid;place-items:center;width:62px;height:62px;border-radius:18px;background:var(--powder);margin-bottom:12px;transition:transform .35s var(--spring)}.c3-c h3{font-size:22px;margin-bottom:6px}.c3-c p{color:var(--text2)}
.how-ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;text-align:left}
.two{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center}.ticks.big li{font-size:18px}.big-p{font-size:clamp(19px,2vw,24px);color:var(--text);line-height:1.45}.why-sq{height:320px;width:auto;margin:auto;object-fit:contain}
.camp-show{display:grid;grid-template-columns:1fr 1fr;gap:18px}.store-grid.one{grid-template-columns:minmax(0,420px);justify-content:center}
.sub-c{text-align:center;color:var(--text2);font-size:18px;margin:-14px auto 24px;max-width:640px;padding:0 20px}
.marq-w{padding:64px 0 10px;overflow:hidden}.marq-w>h2{padding:0 20px}.marq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);padding:30px 0 12px}
.marq-t{display:flex;align-items:flex-end;gap:26px;width:max-content;animation:marq 46s linear infinite}@keyframes marq{to{transform:translate3d(-50%,0,0)}}.marq:hover .marq-t{animation-play-state:paused}.m-sq{height:190px;width:auto;flex:none;object-fit:contain;transition:scale .3s var(--spring);transform-origin:50% 100%}.m-sq:nth-child(3n){height:150px}.m-sq:nth-child(4n){height:230px}@media (hover:hover){.m-sq:hover{scale:1.1}}
.compare{max-width:860px;margin:0 auto;padding:60px 24px 24px}.cmp-w{overflow-x:auto;border-radius:24px;box-shadow:var(--sh2);background:var(--surface)}.cmp{width:100%;border-collapse:collapse;text-align:left;font-size:16px}.cmp th,.cmp td{padding:15px 18px;border-bottom:1px solid var(--line)}.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:0}.cmp thead th{font:600 18px Fredoka}.cmp thead th:nth-child(2){color:#fff;background:var(--earth)}.cmp td.yes{background:color-mix(in srgb,var(--earth) 7%,transparent);color:#1F9D46}.cmp td.no{color:var(--text2)}.cmp tbody th{font-weight:800}
.faq{max-width:780px;display:flex;flex-direction:column;gap:12px}.faq-i{background:var(--surface);border-radius:18px;box-shadow:var(--sh1);overflow:hidden;transition:box-shadow .25s var(--out)}.faq-i[open]{box-shadow:var(--sh2)}.faq-i summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:17px 20px;font:600 19px Fredoka;touch-action:manipulation}.faq-i summary::-webkit-details-marker{display:none}
.faq-x{position:relative;width:22px;height:22px;flex:none}.faq-x::before,.faq-x::after{content:"";position:absolute;left:3px;right:3px;top:10px;height:3px;border-radius:9px;background:var(--earth);transition:transform .32s var(--spring)}.faq-x::after{transform:rotate(90deg)}.faq-i[open] .faq-x::after{transform:rotate(0)}
.faq-a{padding:0 20px 18px;color:var(--text2);animation:rise .32s var(--out)}
.land-f-in{align-items:flex-start}.land-f-links b{color:#fff;font:600 17px Fredoka;margin-bottom:4px}.f-slogan{color:#B6E86E;font-weight:800}
.demo-note{font-size:14px}
@media (max-width:900px){.cols3,.how-ol{grid-template-columns:1fr}.two,.camp-show{grid-template-columns:1fr}.p-hero-in{flex-direction:column;align-items:flex-start}.p-hero-art{flex:none;width:100%;min-height:0}.ph-sq{height:230px}.m-sq{height:150px}.m-sq:nth-child(3n){height:120px}.m-sq:nth-child(4n){height:180px}}
@media (max-width:767px){.sec{padding:40px 16px 10px}.sec.tint{padding:44px 16px 24px}.p-hero{padding-bottom:70px}.p-hero-in{padding:0 18px}.compare{padding:44px 16px 14px}.cmp th,.cmp td{padding:12px 10px;font-size:14px}}

.bw{display:inline-block;white-space:nowrap}

/* A character running in place during a Move quest, and asleep during an unplug */
.pose-ov.runner img{animation:runFlip .36s steps(1) infinite,runBob .18s ease-in-out infinite alternate}@keyframes runFlip{0%{scale:1 1}50%{scale:-1 1}}@keyframes runBob{from{translate:0 0}to{translate:0 -9px}}
.pose-ov.sleeper img{animation:sleepBreath 3.4s ease-in-out infinite}@keyframes sleepBreath{50%{scale:1.03}}
.pose-ov span{position:absolute;right:6%;top:6%;font:700 26px Fredoka;color:var(--earth);opacity:0;animation:zzz 3s ease-out infinite}.pose-ov .z2{animation-delay:1s;font-size:21px}.pose-ov .z3{animation-delay:2s;font-size:17px}@keyframes zzz{0%{opacity:0;transform:translate3d(0,10px,0) scale(.6)}20%{opacity:1}100%{opacity:0;transform:translate3d(26px,-56px,0) scale(1.25)}}

.lvl-n{margin-bottom:6px}.lvl-sq{height:min(26vh,210px)}

/* Path Squatch sits beside the next quest */
.path-sq.on-left{left:auto;right:calc(50% + 58px)}
@media (max-width:767px){.path-sq{top:auto}.path-sq.on-left{right:calc(50% + 56px)}}
/* Quest intro and games: your Squatch is there with you */
.q-stage{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:18px;margin-bottom:14px}.q-stage .q-big{margin-bottom:10px}.q-sq{height:150px;width:auto;object-fit:contain;transform-origin:50% 100%}
.g-title{position:relative}.g-buddy{position:absolute;right:-6px;top:-2px;height:74px;width:auto;object-fit:contain;transform-origin:50% 100%}
@media (max-width:420px){.q-sq{height:118px}.g-title h1{padding-right:60px}.g-title p{padding-right:56px}.q-stage .q-big{width:108px;height:98px}}

/* Website product tour */
.tour{max-width:1120px;margin:0 auto;padding:72px 24px 24px}.tour>h2{font-size:clamp(34px,4vw,46px);font-weight:700;color:var(--forest);text-align:center;margin-bottom:12px}
.tour-in{display:grid;grid-template-columns:1fr minmax(0,330px);gap:56px;align-items:center;max-width:960px;margin:0 auto}
.tour-steps{display:flex;flex-direction:column;gap:6px}
.tour-s{position:relative;display:flex;align-items:flex-start;gap:14px;width:100%;padding:14px 16px;border-radius:18px;text-align:left;overflow:hidden;transition:background .3s var(--out),box-shadow .3s var(--out),transform .25s var(--spring)}
.tour-n{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--powder);color:var(--earth);font:600 17px Fredoka;transition:background .3s var(--out),color .3s var(--out),transform .35s var(--spring)}
.tour-tx{display:flex;flex-direction:column;min-width:0}.tour-tx b{font:600 20px/1.25 Fredoka;color:var(--text);margin-top:4px}.tour-tx span{display:grid;grid-template-rows:0fr;color:var(--text2);font-size:16px;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s var(--out),opacity .3s var(--out),margin .4s var(--out)}
.tour-s.on{background:var(--surface);box-shadow:var(--sh2)}.tour-s.on .tour-n{background:var(--earth);color:#fff;transform:scale(1.08)}.tour-s.on .tour-tx span{display:block;max-height:96px;opacity:1;margin-top:3px}
@media (hover:hover){.tour-s:not(.on):hover{background:color-mix(in srgb,var(--earth) 7%,transparent)}}
.tour-bar{position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--earth);transform:scaleX(0);transform-origin:0 50%}
.tour.playing.live .tour-s.on .tour-bar{animation:tourbar 4.8s linear}@keyframes tourbar{to{transform:scaleX(1)}}
.tour-stage{min-width:0;display:flex;flex-direction:column;align-items:center}
.tour-phone{position:relative;width:100%;max-width:310px;padding:11px;border-radius:50px;background:linear-gradient(160deg,#25355C,#0B1430);box-shadow:0 0 0 2px #3A4C78,0 28px 50px -14px rgba(8,30,74,.5),0 10px 20px rgba(8,30,74,.18)}
.tp-island{position:absolute;z-index:2;top:21px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#050A18;pointer-events:none}
.tp-track{display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scrollbar-width:none;border-radius:39px;background:var(--bg);cursor:pointer;aspect-ratio:585/1266;touch-action:pan-x pan-y}
.tp-track::-webkit-scrollbar{display:none}.tp-track:focus-visible{outline:3px solid var(--earth);outline-offset:4px}
.tp-track img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:center;scroll-snap-stop:always;user-select:none;-webkit-user-drag:none}
.tour-cap{display:none}
@media (max-width:860px){.tour{padding:48px 16px 12px}.tour-in{display:flex;flex-direction:column-reverse;gap:6px}
  .tour-phone{max-width:min(276px,72vw)}
  .tour-steps{flex-direction:row;gap:5px;width:100%;max-width:330px;margin:0 auto}
  .tour-s{flex:1;display:block;height:34px;padding:0;background:none!important;box-shadow:none!important;border-radius:0;overflow:visible}.tour-n,.tour-tx{display:none}
  .tour-s::before{content:"";position:absolute;left:0;right:0;top:15px;height:5px;border-radius:9px;background:var(--line2)}.tour-s.done::before,.tour-s.on::before{background:color-mix(in srgb,var(--earth) 32%,var(--line2))}.tour-s.done::before{background:var(--earth)}
  .tour-bar{top:15px;bottom:auto;height:5px;border-radius:9px}
  .tour-cap{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:88px;margin:16px 0 2px;padding:0 6px}.tour-cap b{font:600 21px/1.2 Fredoka;color:var(--text)}.tour-cap span{color:var(--text2);font-size:16px;margin-top:3px;max-width:340px}}
/* Website numbers */
.stats{max-width:1040px;margin:0 auto;padding:44px 24px 8px}.stats ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stats li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:20px 10px;border-radius:22px;background:var(--surface);box-shadow:var(--sh1)}
.stats b{font:600 clamp(38px,5vw,54px)/1 Fredoka;color:var(--earth);font-variant-numeric:tabular-nums}.stats span{color:var(--text2);font-size:16px}
@media (max-width:640px){.stats{padding:26px 16px 4px}.stats ul{grid-template-columns:repeat(2,1fr);gap:10px}.stats span{font-size:15px}}
.tour,.stats{scroll-margin-top:76px}

/* Tap areas: text links stay the same size but are easy to hit */
.link,.link-up,.center-link{position:relative}.link::after,.link-up::after,.center-link::after{content:"";position:absolute;inset:-12px -8px}
.land-f-links{gap:0}.land-f-links button{display:flex;align-items:center;min-height:40px}.land-f-links b{margin-bottom:4px}
@media (max-width:359px){.pills .pill{padding-left:10px;padding-right:10px;font-size:13px}}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.land-nav button.on{color:#0868BC}.cmp thead th:nth-child(2){background:#0868BC}.tour-s.on .tour-n{background:#0868BC}

/* Home finish line, teacher home */
.alldone{display:flex;align-items:center;gap:14px;margin:14px 0 4px;background:linear-gradient(120deg,color-mix(in srgb,var(--gold) 24%,var(--surface)),var(--surface));animation:rise .5s var(--out) backwards}.alldone h2{font-size:21px}.alldone p{color:var(--text2);font-size:15px}.alldone .ic,.alldone svg{flex:none}
.t-share{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:14px}.t-share h2{font-size:21px}.t-code{flex:none;padding:8px 14px;border-radius:12px;border:2px dashed var(--line2);background:var(--bg2);font:700 21px Fredoka;letter-spacing:.06em;color:var(--text)}
.t-top{margin-top:14px;margin-bottom:14px}.t-top h2{font-size:21px}.t-top .board{margin:10px 0 0}.t-pts{margin-left:auto;font-weight:800;white-space:nowrap}

/* Lists slide in one row at a time when a page opens */
.page-in .board li,.page-in .q-sec .row,.page-in .shop-row{animation:rowIn .46s var(--out) 120ms backwards}.page-in .board li:nth-child(n+11),.page-in .q-sec .row:nth-of-type(n+11),.page-in .shop-row:nth-child(n+11){animation-delay:500ms}.page-in .board li:nth-child(2),.page-in .q-sec .row:nth-of-type(2),.page-in .shop-row:nth-child(2){animation-delay:158ms}.page-in .board li:nth-child(3),.page-in .q-sec .row:nth-of-type(3),.page-in .shop-row:nth-child(3){animation-delay:196ms}.page-in .board li:nth-child(4),.page-in .q-sec .row:nth-of-type(4),.page-in .shop-row:nth-child(4){animation-delay:234ms}.page-in .board li:nth-child(5),.page-in .q-sec .row:nth-of-type(5),.page-in .shop-row:nth-child(5){animation-delay:272ms}.page-in .board li:nth-child(6),.page-in .q-sec .row:nth-of-type(6),.page-in .shop-row:nth-child(6){animation-delay:310ms}.page-in .board li:nth-child(7),.page-in .q-sec .row:nth-of-type(7),.page-in .shop-row:nth-child(7){animation-delay:348ms}.page-in .board li:nth-child(8),.page-in .q-sec .row:nth-of-type(8),.page-in .shop-row:nth-child(8){animation-delay:386ms}.page-in .board li:nth-child(9),.page-in .q-sec .row:nth-of-type(9),.page-in .shop-row:nth-child(9){animation-delay:424ms}.page-in .board li:nth-child(10),.page-in .q-sec .row:nth-of-type(10),.page-in .shop-row:nth-child(10){animation-delay:462ms}@keyframes rowIn{from{opacity:0;transform:translate3d(0,16px,0) scale(.985)}}
/* Page slides never make the page wider, even for a moment */
.shell,.auth,#root{overflow-x:clip}