:root{--ink:#2B1A3D;--pink:#FF6FA3;--pink2:#FFB8D2;--mint:#7BE0C3;--sky:#8FC9FF;--lemon:#FFE36E;--lilac:#C9A7FF;--cream:#FFF7EE;--r:28px;--sh:0 6px 0 var(--ink);--sh2:0 10px 30px rgba(43,26,61,.18)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;font-family:Nunito,system-ui,sans-serif;font-weight:600;color:var(--ink);background:var(--cream);overflow-x:hidden;-webkit-tap-highlight-color:transparent}
h1,h2,h3,.logo,.btn,.sticker,.eyebrow,.ticker,.pow,.price{font-family:Fredoka,Nunito,sans-serif}
img{max-width:100%;display:block}
a{color:inherit}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;z-index:99;background:#fff;padding:8px 12px;border-radius:12px}
.muted{color:#6b5a7d}.small{font-size:.85rem}
.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:10px 16px;background:rgba(255,247,238,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:3px solid var(--ink)}
.logo{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:1.3rem;text-decoration:none}.logo b{color:var(--pink)}
.logo-blob{width:30px;height:28px;border-radius:55% 45% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 35% 30%,#fff 0 8%,transparent 9%),radial-gradient(circle at 30% 30%,#FFC2DA,var(--pink) 60%,#E04A82);border:2.5px solid var(--ink);animation:jig 3s ease-in-out infinite}
@keyframes jig{0%,100%{border-radius:55% 45% 50% 50%/60% 60% 40% 40%}50%{border-radius:45% 55% 45% 55%/50% 60% 40% 50%;transform:scale(1.06,.94)}}
.nav{display:none;gap:22px;margin-left:auto;font-weight:800}.nav a{text-decoration:none}.nav a:hover{color:var(--pink)}
.bag-btn{margin-left:auto;font:700 1rem Fredoka,sans-serif;min-height:44px;padding:0 16px;border-radius:999px;border:3px solid var(--ink);background:var(--lemon);box-shadow:0 4px 0 var(--ink);cursor:pointer;color:var(--ink)}
.bag-btn span{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:4px;border-radius:99px;background:var(--ink);color:#fff;font-size:.8rem}
@media(min-width:820px){.nav{display:flex}.bag-btn{margin-left:18px}}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:999px;border:3px solid var(--ink);font-weight:700;font-size:1.05rem;text-decoration:none;cursor:pointer;color:var(--ink);background:#fff;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s}
.btn:active{transform:translateY(5px) scale(1.04,.94);box-shadow:0 1px 0 var(--ink)}
.btn.pink{background:var(--pink);color:#fff}.btn.ghost{background:#fff}
.btn:disabled{background:#e9dff0;color:#8d7ca0;cursor:not-allowed;box-shadow:0 4px 0 #b9a8c9;border-color:#b9a8c9}
/* hero: gradient mesh + kinetic type + 3D css orbit */
.hero{position:relative;display:grid;gap:10px;padding:34px 18px 10px;overflow:hidden;min-height:min(92vh,820px)}
.mesh{position:absolute;inset:-20%;z-index:-1;background:radial-gradient(40% 35% at 20% 25%,var(--pink2),transparent 70%),radial-gradient(35% 35% at 80% 20%,#BFE7FF,transparent 70%),radial-gradient(40% 40% at 70% 80%,#C8F5E6,transparent 70%),radial-gradient(35% 35% at 15% 85%,#FFF0A8,transparent 70%),var(--cream);filter:blur(10px);animation:mesh 16s ease-in-out infinite alternate}
@keyframes mesh{to{transform:rotate(8deg) scale(1.1)}}
.sticker{display:inline-block;margin:0;padding:6px 14px;background:var(--mint);border:3px solid var(--ink);border-radius:14px;transform:rotate(-4deg);box-shadow:0 4px 0 var(--ink);font-weight:700}
.kinetic{font-size:clamp(3.2rem,15vw,7.6rem);line-height:.9;margin:.25em 0 .2em;letter-spacing:-.02em;font-weight:700}
.kinetic span{display:inline-block;animation:bob 2.4s ease-in-out infinite;text-shadow:0 5px 0 rgba(43,26,61,.15)}
.kinetic em{font-style:normal;color:var(--pink);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}
.kinetic span:nth-child(odd){animation-delay:-.4s}.kinetic span:nth-child(3n){animation-delay:-.9s}.kinetic span:nth-child(4n){animation-delay:-1.4s}
@keyframes bob{0%,100%{transform:translateY(0) scale(1)}40%{transform:translateY(-6px) scale(.96,1.06)}60%{transform:translateY(2px) scale(1.06,.93)}}
.lede{font-size:1.12rem;max-width:34ch;line-height:1.5}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.hero-stage{position:relative;height:300px;perspective:900px}
.orbit{position:absolute;left:50%;top:50%;width:132px;height:132px;margin:-66px;border-radius:32px;background:#fff;border:3px solid var(--ink);box-shadow:var(--sh);padding:8px;animation:float 7s ease-in-out infinite;transform-style:preserve-3d}
.orbit img{border-radius:22px}
.o1{transform:translate(-90px,-70px) rotateY(18deg) rotateZ(-8deg);animation-delay:0s}.o2{transform:translate(80px,-80px) rotateY(-20deg) rotateZ(7deg);animation-delay:-2s}
.o3{transform:translate(-70px,80px) rotateX(18deg) rotateZ(6deg);animation-delay:-4s}.o4{transform:translate(95px,70px) rotateX(-14deg) rotateZ(-6deg);animation-delay:-5s}
@keyframes float{50%{translate:0 -14px;rotate:3deg}}
.hero-bubble{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-3deg);background:#fff;border:3px solid var(--ink);border-radius:18px;padding:8px 14px;font-weight:800;white-space:nowrap;box-shadow:0 4px 0 var(--ink);z-index:2}
@media(min-width:900px){.hero{grid-template-columns:1.1fr .9fr;align-items:center;padding:40px 6vw}.hero-stage{height:520px}.orbit{width:190px;height:190px;margin:-95px}.o1{transform:translate(-130px,-120px) rotateY(18deg) rotateZ(-8deg)}.o2{transform:translate(120px,-130px) rotateY(-20deg) rotateZ(7deg)}.o3{transform:translate(-110px,130px) rotateX(18deg) rotateZ(6deg)}.o4{transform:translate(140px,120px) rotateX(-14deg) rotateZ(-6deg)}}
.ticker{overflow:hidden;background:var(--ink);color:var(--lemon);border-block:3px solid var(--ink);transform:rotate(-1.5deg);margin:10px -10px}
.ticker div{display:flex;gap:22px;padding:12px 0;width:max-content;animation:tick 22s linear infinite;font-size:1.4rem;font-weight:700}
.ticker span:nth-child(4n+2){color:var(--pink)}.ticker span:nth-child(4n+3){color:var(--mint)}
@keyframes tick{to{transform:translateX(-50%)}}
/* lab */
.lab,.shelf,.grown{padding:56px 16px;max-width:1200px;margin:0 auto}
.lab-head{max-width:640px}.lab-head h2{font-size:clamp(2.2rem,8vw,3.6rem);margin:.15em 0 .2em;line-height:1}
.eyebrow{margin:0;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--pink);font-size:.85rem}
.lab-grid{display:grid;gap:18px;margin-top:22px}
@media(min-width:900px){.lab-grid{grid-template-columns:1.3fr 1fr;align-items:start}}
.glass{background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,255,255,.35));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:3px solid var(--ink);border-radius:var(--r);box-shadow:var(--sh)}
.tank{position:relative;overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,#FFD6E6,transparent 60%),radial-gradient(80% 60% at 20% 0%,#D9F4FF,transparent 60%),linear-gradient(180deg,#fff,#FFF3F8)}
.tank-top{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:3px solid var(--ink);background:#fff}
.dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--ink);background:var(--pink)}.dot+.dot{background:var(--lemon)}.dot+.dot+.dot{background:var(--mint)}
.tank-name{margin-left:8px;font-family:Fredoka;font-weight:700}
.stage{height:min(62vh,440px);touch-action:none;cursor:grab}.stage:active{cursor:grabbing}.stage canvas{display:block;width:100%!important;height:100%!important}
.hint{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);margin:0;padding:6px 14px;border-radius:99px;background:var(--ink);color:#fff;font-weight:800;font-size:.9rem;pointer-events:none;transition:opacity .4s;white-space:nowrap}
.pow{position:absolute;top:60px;right:16px;font-size:2rem;font-weight:700;color:var(--lemon);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;background:var(--pink);padding:8px 16px;border:3px solid var(--ink);clip-path:polygon(0 18%,14% 0,30% 12%,48% 0,62% 14%,80% 0,100% 20%,90% 42%,100% 62%,86% 80%,96% 100%,70% 90%,50% 100%,32% 88%,10% 100%,12% 76%,0 60%,8% 40%);transform:scale(0) rotate(-12deg);pointer-events:none}
.pow.on{animation:pow .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes pow{0%{transform:scale(0) rotate(-20deg)}30%{transform:scale(1.15) rotate(-8deg)}75%{transform:scale(1) rotate(-6deg);opacity:1}100%{transform:scale(1) rotate(-6deg);opacity:0}}
.fallback{height:min(62vh,440px);display:grid;place-items:center}
.fb-toy{border:0;background:none;padding:0;width:min(70%,300px);cursor:pointer;transition:transform .9s cubic-bezier(.2,1.8,.4,1);touch-action:manipulation}
.fb-toy img{border-radius:40px;filter:drop-shadow(0 18px 18px rgba(43,26,61,.25))}
.fb-toy.down{transform:scale(1.25,.6) translateY(30%);transition:transform .12s}
.panel{display:grid;gap:14px}
.meter-card{padding:20px}.meter-card h3{margin:0;font-size:1.5rem}.meter-card p{margin:.3em 0 0}
.stats{margin:16px 0 0;display:grid;gap:12px}.stats div{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:10px}.stats dt{font-weight:800}.stats dd{margin:0}
.bar{display:block;height:16px;border:3px solid var(--ink);border-radius:99px;background:#fff;overflow:hidden}.bar i{display:block;height:100%;background:repeating-linear-gradient(45deg,var(--pink) 0 10px,#FF8DB7 10px 20px);transition:width .6s cubic-bezier(.3,1.5,.5,1)}
#m-rise{background:repeating-linear-gradient(45deg,var(--sky) 0 10px,#B5DCFF 10px 20px)}
.squishes{display:flex;gap:8px}.squishes b{width:26px;height:26px;border-radius:50%;border:3px solid var(--ink);background:#fff;transition:transform .3s cubic-bezier(.3,2,.5,1)}.squishes b.on{background:var(--mint);transform:scale(1.15)}
.rise-read{min-height:1.5em;font-weight:800;margin-top:14px!important}
.buy{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}.price{font-size:1.8rem;font-weight:700}
.picker{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory}
.pick{flex:0 0 78px;scroll-snap-align:start;border:3px solid var(--ink);border-radius:20px;background:#fff;padding:4px;cursor:pointer;box-shadow:0 4px 0 var(--ink);transition:transform .2s}
.pick[aria-selected="true"]{background:var(--lemon);transform:translateY(-4px) rotate(-3deg)}
.pick img{border-radius:14px}
/* shelf: 3D css tilt clay cards. 12 cards: 2 / 3 / 4 cols, every row full */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:22px}
@media(min-width:700px){.cards{grid-template-columns:repeat(3,1fr);gap:18px}}
@media(min-width:1050px){.cards{grid-template-columns:repeat(4,1fr)}}
.card{perspective:800px}
.card-in{height:100%;display:flex;flex-direction:column;background:#fff;border:3px solid var(--ink);border-radius:24px;box-shadow:var(--sh);padding:10px;transform-style:preserve-3d;transition:transform .25s ease-out}
.card-img{position:relative;border-radius:18px;overflow:hidden;background:var(--bg,#FFE9F1);transform:translateZ(30px)}
.card-img img{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}.card:hover .card-img img{transform:scale(1.08,.94)}
.tag{position:absolute;top:8px;left:8px;padding:3px 9px;border-radius:99px;border:2px solid var(--ink);background:var(--lemon);font:700 .72rem Fredoka}
.holo{background:linear-gradient(110deg,#ffd6f0,#c9f0ff,#e2ffd0,#fff2b8,#ffd6f0);background-size:300% 100%;animation:holo 4s linear infinite}
@keyframes holo{to{background-position:300% 0}}
.card h3{font-size:1.02rem;margin:10px 4px 2px;line-height:1.15}.card p{margin:0 4px;font-size:.85rem;color:#6b5a7d;flex:1}
.card-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;margin:10px 4px 2px}
.card-foot .price{font-size:1.15rem}
.mini{min-height:40px;padding:0 12px;border-radius:99px;border:2.5px solid var(--ink);background:var(--mint);font:700 .9rem Fredoka;cursor:pointer;box-shadow:0 3px 0 var(--ink);color:var(--ink)}
.mini.add{background:var(--pink);color:#fff}
.note{margin-top:16px;color:#6b5a7d;font-size:.9rem}
/* neo-brutal grown-ups block */
.brutal{background:var(--lemon);border:4px solid var(--ink);border-radius:8px;box-shadow:10px 10px 0 var(--ink);padding:26px}
.brutal h2{font-size:clamp(1.8rem,6vw,2.8rem);margin:.2em 0 .6em;line-height:1.05}
.grown-grid{display:grid;gap:14px}@media(min-width:800px){.grown-grid{grid-template-columns:repeat(3,1fr)}}
.grown-grid div{background:#fff;border:3px solid var(--ink);border-radius:8px;padding:16px}.grown-grid p{margin:.4em 0 0}
.foot{background:var(--ink);color:#fff;margin-top:40px;padding:36px 18px 44px;border-top:4px solid var(--pink)}
.foot-in{max-width:1200px;margin:0 auto;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.foot .logo{color:#fff}
.madeby{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:99px;border:2px solid rgba(255,255,255,.35);text-decoration:none;font-size:.9rem;background:rgba(255,255,255,.06)}.madeby b{color:var(--sky)}
.drawer{position:fixed;inset:0;z-index:60}.scrim{position:absolute;inset:0;border:0;background:rgba(43,26,61,.45)}
.drawer-in{position:absolute;right:0;top:0;bottom:0;width:min(400px,92vw);background:var(--cream);border-left:4px solid var(--ink);padding:20px;overflow:auto;animation:slide .35s cubic-bezier(.3,1.4,.5,1)}
@keyframes slide{from{transform:translateX(100%)}}
.drawer-head{display:flex;justify-content:space-between;align-items:center}.drawer-head h2{margin:0}
.x{width:44px;height:44px;border-radius:50%;border:3px solid var(--ink);background:#fff;font-size:1.6rem;cursor:pointer}
#bag-list{list-style:none;padding:0;display:grid;gap:10px}#bag-list li{display:flex;gap:10px;align-items:center;background:#fff;border:3px solid var(--ink);border-radius:16px;padding:8px}
#bag-list img{width:52px;border-radius:10px}#bag-list span{flex:1;font-weight:800}
.total{font:700 1.3rem Fredoka;display:flex;justify-content:space-between}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.fallback[hidden],[hidden]{display:none!important}
section{scroll-margin-top:70px}
@media(max-width:700px){.stage,.fallback{height:52vh;min-height:320px}}
.card-img img,.pick img,.orbit img,.fb-toy img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
/* ===== v2 upgrades ===== */
.snd-btn{margin-left:auto;width:44px;height:44px;border-radius:50%;border:3px solid var(--ink);background:#fff;box-shadow:0 4px 0 var(--ink);font-size:1.1rem;cursor:pointer}
.snd-btn+.bag-btn{margin-left:10px}@media(min-width:820px){.snd-btn{margin-left:18px}}
.bag-btn.bump{animation:bump .6s cubic-bezier(.3,1.8,.5,1)}@keyframes bump{30%{transform:scale(1.35,.75) rotate(-6deg)}60%{transform:scale(.9,1.15)}}
.hero{min-height:auto}
.hero-stage{height:56vh;min-height:360px;border-radius:32px;position:relative;touch-action:pan-y}
.hero-stage canvas{position:absolute;inset:0;width:100%!important;height:100%!important;cursor:pointer}
.hero-stage.gl .orbit{display:none}
.hero-bubble{top:16px;transform:translateX(-50%) rotate(-3deg);animation:wig 2.6s ease-in-out infinite}
@keyframes wig{50%{transform:translateX(-50%) rotate(3deg) scale(1.05)}}
@media(min-width:900px){.hero{min-height:88vh}.hero-stage{height:78vh;max-height:760px}.kinetic{font-size:clamp(5rem,9vw,9rem)}}
.kinetic span{cursor:default;transition:transform .5s cubic-bezier(.3,2,.5,1)}
.kinetic span.sq{animation:none;transform:scale(1.35,.6) translateY(18%)!important;transition:transform .08s}
.kinetic em span{color:var(--pink)}
/* goo transition overlay */
.goo{position:absolute;left:50%;bottom:16%;width:60%;height:70px;transform:translateX(-50%) scale(0);border-radius:50%;filter:blur(2px);pointer-events:none;opacity:.85}
.goo.on{animation:goo .7s ease-in-out}
@keyframes goo{0%{transform:translateX(-50%) scale(0,.2)}40%{transform:translateX(-50%) scale(1.15,.9);border-radius:46% 54% 50% 50%}100%{transform:translateX(-50%) scale(0,.2)}}
/* flying toy into bag */
.fly{position:fixed;z-index:80;width:84px;height:84px;border-radius:24px;border:3px solid var(--ink);background:#fff;padding:4px;pointer-events:none;box-shadow:var(--sh)}
.fly img{border-radius:18px}
/* holographic lucky box */
.card.lucky .card-in{background:linear-gradient(115deg,#ffe0f0,#d6f3ff,#e8ffd8,#fff3c2,#f1ddff,#ffe0f0);background-size:300% 300%;animation:holo 5s linear infinite;position:relative;overflow:hidden}
.card.lucky .card-in::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(var(--ang,115deg),transparent 30%,rgba(255,255,255,.75) 45%,rgba(160,230,255,.35) 52%,rgba(255,170,230,.35) 58%,transparent 70%);mix-blend-mode:overlay;background-size:250% 250%;background-position:var(--gx,50%) var(--gy,50%);transition:background-position .1s}
.card.lucky .card-img{box-shadow:0 0 0 3px #fff inset}
.card.lucky .tag{background:linear-gradient(90deg,#ff8fc6,#8fd8ff,#c6ff8f);}
.price-old{display:none}
/* bag */
.qty{display:flex;align-items:center;gap:6px}.qty button{width:34px;height:34px;border-radius:50%;border:2.5px solid var(--ink);background:#fff;font:700 1.1rem Fredoka;cursor:pointer}
.ship{margin:12px 0}.ship p{margin:0 0 6px;font-weight:800}#ship-bar{background:repeating-linear-gradient(45deg,var(--mint) 0 10px,#A6EDD8 10px 20px);width:0}
.btn.wa{width:100%;background:#25D366;color:#fff}
.btn.wa[aria-disabled="true"]{background:#e9dff0;color:#8d7ca0;box-shadow:0 4px 0 #b9a8c9;border-color:#b9a8c9;pointer-events:none}
.plus1{position:fixed;z-index:81;font:700 1.4rem Fredoka;color:var(--pink);-webkit-text-stroke:1.5px var(--ink);pointer-events:none;animation:plus 1s ease-out forwards}
@keyframes plus{to{transform:translateY(-40px);opacity:0}}
@media(max-width:899px){.kinetic{font-size:clamp(4rem,21vw,7rem)}.hero-stage{height:62vh}}
/* 10 toys + Lucky Box: Lucky spans 2 columns -> every row full at 2, 3 and 4 columns */
.card.lucky{grid-column:span 2}
.card.lucky .card-in{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;align-content:start}
.card.lucky .card-img{grid-row:span 3}
.card.lucky h3{font-size:1.3rem;margin-top:6px}
.card.lucky .card-foot{grid-column:2}
@media(max-width:420px){.card.lucky .card-in{grid-template-columns:1fr}.card.lucky .card-img{grid-row:auto}.card.lucky .card-foot{grid-column:1}}
html{overflow-x:clip}.ticker{margin:10px 0}