@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--lime:#d7ff3f;--ink:#111;--paper:#f7f5ef;--pink:#ff72b6;--purple:#b9a7ff;--blue:#65c7ff;--orange:#ff9a3d;--red:#ff7272;--green:#66e6a3;--line:2px solid var(--ink)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}.site-header{height:72px;padding:0 max(24px,calc((100vw - 1240px)/2));background:#0d0d0d;color:#fff;display:flex;align-items:center;gap:34px;position:sticky;top:0;z-index:50}.brand{color:#fff;text-decoration:none;font-family:'Bowlby One SC',sans-serif;line-height:.78;font-size:18px;transform:rotate(-2deg);display:inline-flex;flex-direction:column}.brand b{background:var(--lime);color:#111;padding:5px 8px;border-radius:10px}.site-header nav{display:flex;gap:28px;margin-left:auto}.site-header nav a,.site-footer a{color:inherit;text-decoration:none}.mini-cta,.btn{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;text-decoration:none;color:#111}.mini-cta{background:var(--lime);padding:12px 18px;border-radius:14px}.menu-toggle{display:none}.hero{max-width:1240px;margin:auto;min-height:610px;display:grid;grid-template-columns:1.02fr .98fr;align-items:center;padding:54px 24px}.eyebrow,.pill{display:inline-block;font:800 13px 'Bricolage Grotesque';letter-spacing:.04em;background:var(--lime);border:var(--line);padding:7px 12px;border-radius:999px}.hero h1,.section h2,.final-cta h2{font-family:'Bowlby One SC';letter-spacing:-.035em;margin:18px 0;line-height:.88}.hero h1{font-size:clamp(72px,9vw,132px)}.hero mark{background:var(--lime);padding:0 .12em;border-radius:18px}.hero-copy>p{font:700 clamp(20px,2vw,28px) 'Bricolage Grotesque';max-width:500px}.btn{display:inline-flex;padding:16px 22px;border:var(--line);border-radius:15px;box-shadow:4px 4px 0 #111;transition:.18s transform,.18s box-shadow}.btn:hover{transform:translate(3px,3px);box-shadow:1px 1px 0 #111}.btn-lime{background:var(--lime)}.btn-black{background:#111;color:#fff;box-shadow:4px 4px 0 var(--lime)}.hero-copy small,.feature-copy small{display:block;margin-top:18px}.hero-art{height:480px;position:relative;background:linear-gradient(135deg,#ffd5e8,#c7b5ff 48%,#d7ff3f);border:var(--line);border-radius:42% 58% 46% 54%/50% 38% 62% 50%;overflow:hidden}.cart{font-size:190px;position:absolute;bottom:20px;left:120px;filter:drop-shadow(12px 14px 0 rgba(0,0,0,.12));transform:rotate(-8deg)}.float{position:absolute;font-size:72px;animation:float 3s ease-in-out infinite}.f1{top:45px;left:45px}.f2{top:40px;right:60px;animation-delay:.4s}.f3{bottom:55px;right:45px;animation-delay:.8s}.f4{bottom:35px;left:35px;animation-delay:1.2s}.scribble{position:absolute;right:30px;top:160px;font:700 20px 'Bricolage Grotesque';transform:rotate(8deg)}@keyframes float{50%{transform:translateY(-12px) rotate(4deg)}}.section{max-width:1240px;margin:auto;padding:82px 24px}.section h2{font-size:clamp(44px,6vw,78px)}.section-lead{font:600 19px 'Bricolage Grotesque';margin-top:-8px}.game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}.game-card{min-height:190px;border:var(--line);border-radius:24px;padding:22px;display:grid;grid-template-columns:100px 1fr 38px;align-items:center;color:#111;text-decoration:none;transition:.2s transform,.2s box-shadow}.game-card:hover{transform:translateY(-5px) rotate(-.5deg);box-shadow:7px 7px 0 #111}.game-icon{font-size:70px}.game-card h3{font:800 25px/1 'Bricolage Grotesque';margin:8px 0}.game-card p{margin:0;font-size:13px}.game-card>b{background:#111;color:#fff;border-radius:50%;width:36px;height:36px;display:grid;place-items:center}.status{font-size:10px;font-weight:800}.pink{background:var(--pink)}.purple{background:var(--purple)}.green{background:var(--green)}.orange{background:var(--orange)}.blue{background:var(--blue)}.red{background:var(--red)}.featured-game{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}.phone-wrap{background:var(--purple);border:var(--line);border-radius:28px;min-height:520px;display:grid;place-items:center;overflow:hidden}.phone{width:280px;background:#fff;border:8px solid #111;border-radius:36px;padding:20px;transform:rotate(-7deg);box-shadow:14px 18px 0 rgba(0,0,0,.12)}.phone-top{font:800 16px 'Bricolage Grotesque'}.balance{background:var(--lime);border:2px solid #111;border-radius:999px;padding:8px;text-align:center;font-weight:800;margin:14px 0}.products{display:grid;grid-template-columns:1fr 1fr;gap:10px}.products span{background:var(--paper);border:1.5px solid #111;border-radius:12px;padding:12px;font-size:32px;display:flex;flex-direction:column}.products b{font-size:11px;margin:6px 0}.products i{font:700 10px 'DM Sans';background:#111;color:#fff;padding:4px;border-radius:6px;text-align:center}.feature-copy h2{font-size:clamp(50px,6vw,86px)}.feature-copy p{font-size:20px;line-height:1.55}.how{text-align:center}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}.steps article{background:#fff;border:var(--line);border-radius:24px;padding:28px;position:relative}.steps em{position:absolute;top:16px;left:16px;width:30px;height:30px;background:#111;color:#fff;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:800}.steps span{font-size:54px}.steps h3{font:800 24px 'Bricolage Grotesque';margin-bottom:5px}.results{background:#111;color:#fff;max-width:none;padding-left:max(24px,calc((100vw - 1192px)/2));padding-right:max(24px,calc((100vw - 1192px)/2))}.results h2{color:#fff}.result-demo{display:grid;grid-template-columns:380px 1fr;gap:70px;align-items:center}.result-card{background:var(--paper);color:#111;border-radius:26px;padding:26px;border:3px solid var(--lime);display:flex;flex-direction:column;gap:9px;transform:rotate(-2deg)}.result-card>strong:first-child{background:var(--lime);align-self:flex-start;padding:7px 10px;border-radius:8px}.result-card h3{font:800 42px 'Bricolage Grotesque';margin:0}.result-card>div{display:flex;justify-content:space-between;border-top:2px solid #111;padding-top:14px}.result-copy h3{font:800 38px 'Bricolage Grotesque';margin-bottom:10px}.result-copy p{font-size:19px;max-width:600px}.final-cta{text-align:center;padding:90px 24px;background:var(--lime)}.final-cta p{font-weight:800}.final-cta h2{font-size:clamp(52px,7vw,92px)}.site-footer{background:#0d0d0d;color:#fff;padding:55px max(24px,calc((100vw - 1192px)/2));display:grid;grid-template-columns:1.4fr .7fr .7fr 1.2fr;gap:40px}.site-footer>div{display:flex;flex-direction:column;gap:9px}.site-footer strong{color:var(--lime)}.footer-punch{background:var(--lime);color:#111;padding:22px;border-radius:20px}.footer-punch b{font:800 26px 'Bricolage Grotesque'}.brand--footer{align-self:flex-start;margin-bottom:12px}
@media(max-width:850px){.site-header{height:64px;padding:0 18px}.site-header nav,.mini-cta{display:none}.menu-toggle{display:block;margin-left:auto;background:var(--lime);border:0;border-radius:9px;padding:8px 10px;font-weight:900}.hero{grid-template-columns:1fr;padding:34px 18px;gap:28px;min-height:auto}.hero h1{font-size:clamp(62px,19vw,92px)}.hero-art{height:330px}.cart{font-size:140px;left:25%;}.game-grid{grid-template-columns:1fr}.game-card{grid-template-columns:78px 1fr 38px;min-height:150px}.game-icon{font-size:54px}.featured-game{grid-template-columns:1fr;gap:34px}.phone-wrap{min-height:430px}.steps{grid-template-columns:1fr}.result-demo{grid-template-columns:1fr;gap:35px}.result-card{max-width:390px}.site-footer{grid-template-columns:1fr 1fr}.section{padding:60px 18px}.section h2{font-size:48px}}
@media(max-width:520px){.site-footer{grid-template-columns:1fr}.hero-art{height:285px}.cart{font-size:115px}.float{font-size:48px}.scribble{font-size:15px}.game-card h3{font-size:22px}}
/* v0.2 homepage expansion */
.hero-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.tiny-note{font:700 12px 'Bricolage Grotesque';opacity:.65}.hero-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}.hero-chips span,.share-pills span{border:1.5px solid var(--ink);border-radius:999px;padding:8px 12px;background:#fff;font:700 12px 'Bricolage Grotesque'}.hero-sticker{position:absolute;z-index:3;font:800 14px 'Bricolage Grotesque';border:2px solid #111;padding:8px 12px;border-radius:10px;box-shadow:4px 4px 0 #111}.hs1{left:35px;bottom:42px;background:var(--lime);transform:rotate(-7deg)}.hs2{right:38px;top:38px;background:#fff;transform:rotate(8deg)}.f5{top:100px;left:42%;animation-delay:1.6s}.ticker{overflow:hidden;background:#111;color:var(--lime);border-top:2px solid #111;border-bottom:2px solid #111;white-space:nowrap}.ticker div{width:max-content;padding:14px 0;font:800 15px 'Bricolage Grotesque';letter-spacing:.06em;animation:ticker 24s linear infinite}@keyframes ticker{to{transform:translateX(-50%)}}
.art-note{position:absolute;top:42px;left:32px;font:800 15px 'Bricolage Grotesque';transform:rotate(-8deg)}.phone-wrap{position:relative}.art-arrow{position:absolute;right:36px;bottom:34px;font-size:68px;transform:rotate(-20deg)}.feature-bullets{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0}.feature-bullets span{background:#fff;border:1.5px solid #111;border-radius:999px;padding:8px 11px;font-size:12px;font-weight:700}
.mood{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:end}.mood-copy h2{margin-bottom:18px}.mood-copy p{font-size:18px;max-width:500px}.mood-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.mood-grid a{min-height:250px;border:var(--line);border-radius:26px;padding:22px;text-decoration:none;color:#111;display:flex;flex-direction:column;justify-content:space-between;transition:.2s}.mood-grid a:nth-child(1){background:var(--blue);transform:rotate(-2deg)}.mood-grid a:nth-child(2){background:var(--pink);transform:translateY(-16px) rotate(1deg)}.mood-grid a:nth-child(3){background:var(--lime);transform:rotate(2deg)}.mood-grid a:hover{box-shadow:7px 7px 0 #111;transform:translateY(-8px)}.mood-grid b{font:800 12px 'Bricolage Grotesque';align-self:flex-start;background:#111;color:#fff;padding:6px 9px;border-radius:999px}.mood-grid strong{font:800 27px/1 'Bricolage Grotesque'}.mood-grid span{font-size:13px;font-weight:600}
.coming{border-top:2px solid #111}.coming-head{display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:end}.coming-head p{font-size:19px;line-height:1.5}.coming-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:35px}.coming-strip article{border:var(--line);border-radius:24px;padding:22px;min-height:230px;display:flex;flex-direction:column;transition:.2s}.coming-strip article:hover{transform:translateY(-7px);box-shadow:7px 7px 0 #111}.coming-strip span{font-size:64px}.coming-strip b{font:800 22px 'Bricolage Grotesque';margin-top:auto}.coming-strip small{margin-top:7px;line-height:1.35}.c1{background:var(--purple)}.c2{background:var(--green)}.c3{background:var(--red)}.c4{background:var(--blue)}.share-pills{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 25px}.results .share-pills span{background:#222;border-color:#555;color:#fff}
.manifesto{text-align:center;position:relative}.manifesto-badge{display:inline-block;background:var(--pink);border:2px solid #111;padding:9px 14px;border-radius:10px;box-shadow:4px 4px 0 #111;font:800 13px 'Bricolage Grotesque';transform:rotate(-3deg)}.manifesto h2{max-width:950px;margin:22px auto}.manifesto>p{max-width:760px;margin:0 auto;font-size:21px;line-height:1.55}.manifesto-tags{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:32px}.manifesto-tags span{background:#111;color:#fff;border-radius:999px;padding:10px 15px;font:800 12px 'Bricolage Grotesque'}
.challenge{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center;background:var(--purple);max-width:none;padding-left:max(24px,calc((100vw - 1192px)/2));padding-right:max(24px,calc((100vw - 1192px)/2));border-top:2px solid #111;border-bottom:2px solid #111}.challenge h2{font-size:clamp(50px,6vw,84px)}.challenge p{font-size:19px;line-height:1.55;max-width:580px}.challenge-art{height:390px;position:relative;display:grid;place-items:center}.challenge-art>span{font-size:180px;filter:drop-shadow(10px 12px 0 rgba(0,0,0,.12))}.bubble{position:absolute;background:#fff;border:2px solid #111;border-radius:18px;padding:13px 16px;font:800 15px 'Bricolage Grotesque';box-shadow:5px 5px 0 #111}.b1{top:35px;left:10px;transform:rotate(-5deg)}.b2{right:10px;top:115px;transform:rotate(5deg);background:var(--lime)}.b3{left:25px;bottom:30px;transform:rotate(3deg);background:var(--pink)}.final-cta>span{display:block;font:700 17px 'Bricolage Grotesque';margin:-8px 0 24px}.final-cta .btn{background:#fff}
@media(max-width:850px){.mood,.challenge,.coming-head{grid-template-columns:1fr}.mood-grid{grid-template-columns:1fr}.mood-grid a,.mood-grid a:nth-child(1),.mood-grid a:nth-child(2),.mood-grid a:nth-child(3){min-height:160px;transform:none}.coming-strip{grid-template-columns:1fr 1fr}.challenge-art{height:320px}.ticker div{font-size:13px}.hero-chips{margin-bottom:8px}}
@media(max-width:520px){.coming-strip{grid-template-columns:1fr}.challenge-art>span{font-size:135px}.bubble{font-size:12px}.b1{left:0}.b2{right:0}.b3{left:5px}.hero-sticker{font-size:11px}.mood-grid strong{font-size:24px}}

/* v0.2.1 typography + alignment refinement */
.section{padding-top:74px;padding-bottom:74px}
.section h2{font-size:clamp(38px,4.6vw,64px);line-height:.92;letter-spacing:-.03em;max-width:900px}
.section-lead{max-width:720px;line-height:1.45}
.hero h1{font-size:clamp(66px,7.4vw,112px);line-height:.9}
.hero-copy{max-width:600px}
.feature-copy h2{font-size:clamp(42px,4.7vw,68px);line-height:.92;max-width:620px}
.feature-copy p{font-size:18px;max-width:610px}
.mood-copy h2{font-size:clamp(40px,4.4vw,62px);max-width:500px}
.coming-head h2{font-size:clamp(40px,4.5vw,64px);max-width:650px}
.results h2{font-size:clamp(42px,4.7vw,68px);max-width:820px}
.manifesto h2{font-size:clamp(42px,4.8vw,68px);max-width:800px;line-height:.93}
.manifesto>p{font-size:18px;max-width:700px}
.challenge h2{font-size:clamp(42px,4.8vw,68px);max-width:580px;line-height:.93}
.final-cta{padding:76px 24px}
.final-cta h2{font-size:clamp(44px,5.2vw,72px);line-height:.92;max-width:900px;margin-left:auto;margin-right:auto}
.how h2{margin-left:auto;margin-right:auto}
.coming-head,.mood,.featured-game,.result-demo,.challenge{align-items:center}

@media(max-width:850px){
 .section{padding:54px 18px}
 .section h2{font-size:clamp(38px,10vw,52px);line-height:.94}
 .hero h1{font-size:clamp(58px,16vw,82px)}
 .feature-copy h2,.mood-copy h2,.coming-head h2,.results h2,.manifesto h2,.challenge h2{font-size:clamp(38px,10vw,52px);line-height:.94}
 .final-cta h2{font-size:clamp(40px,11vw,56px)}
}
@media(max-width:520px){
 .section h2,.feature-copy h2,.mood-copy h2,.coming-head h2,.results h2,.manifesto h2,.challenge h2{font-size:40px}
 .hero h1{font-size:60px}
 .final-cta h2{font-size:44px}
}

/* v0.3.0 hero interaction + scale pass */
.hero{min-height:540px;padding-top:42px;padding-bottom:46px;grid-template-columns:.92fr 1.08fr;gap:52px}
.hero-copy{max-width:540px}
.hero h1{font-size:clamp(58px,6.1vw,88px);line-height:.91;margin:15px 0 14px}
.hero-copy>p{font-size:clamp(18px,1.55vw,23px);line-height:1.12;max-width:440px;margin:0 0 22px}
.hero-art{height:410px;border-radius:46% 54% 49% 51%/51% 42% 58% 49%;cursor:pointer;transition:transform .25s ease,border-radius .45s ease,box-shadow .25s ease}
.hero-art:hover{transform:rotate(1deg) scale(1.012);box-shadow:8px 9px 0 rgba(17,17,17,.1)}
.hero-art.is-poked{animation:heroPoke .55s cubic-bezier(.2,.8,.2,1)}
.cart{font-size:150px;left:50%;bottom:24px;transform:translateX(-50%) rotate(-7deg);transition:transform .35s cubic-bezier(.2,.9,.2,1)}
.hero-art.is-poked .cart{transform:translateX(-50%) rotate(7deg) scale(1.1)}
.float{font-size:58px}.scribble{font-size:17px;top:145px}.hero-sticker{font-size:12px}.hs1{bottom:32px}.f5{top:86px}
@keyframes heroPoke{0%,100%{border-radius:46% 54% 49% 51%/51% 42% 58% 49%}35%{border-radius:55% 45% 43% 57%/43% 58% 42% 57%;transform:rotate(-1.5deg) scale(.985)}70%{border-radius:40% 60% 56% 44%/58% 43% 57% 42%;transform:rotate(1deg) scale(1.015)}}

/* buttons feel alive without becoming annoying */
.btn,.mini-cta{position:relative;overflow:hidden;isolation:isolate;will-change:transform}
.btn::after,.mini-cta::after{content:"";position:absolute;inset:-40% auto -40% -45%;width:28%;background:rgba(255,255,255,.55);transform:skewX(-20deg);transition:left .48s ease;z-index:-1}
.btn:hover::after,.mini-cta:hover::after{left:125%}
.hero .btn-lime{animation:ctaNudge 6s ease-in-out infinite}
@keyframes ctaNudge{0%,72%,100%{transform:translate(0,0) rotate(0)}76%{transform:translate(-2px,0) rotate(-1deg)}80%{transform:translate(3px,0) rotate(1deg)}84%{transform:translate(-1px,0) rotate(0)}}
.btn.is-clicked{animation:buttonPop .42s cubic-bezier(.2,.9,.25,1)}
@keyframes buttonPop{0%{transform:scale(1)}35%{transform:scale(.92) rotate(-1deg);box-shadow:1px 1px 0 #111}70%{transform:scale(1.06) rotate(1deg)}100%{transform:scale(1)}}

.hero-chips span{transition:transform .2s ease,background .2s ease;cursor:default}.hero-chips span:hover{transform:translateY(-3px) rotate(-1deg);background:var(--lime)}
.game-card b,.coming-strip article,.mood-grid a,.steps article{transition:transform .2s ease,box-shadow .2s ease}
.game-card:active,.mood-grid a:active,.coming-strip article:active{transform:scale(.98)}
.steps article:hover{transform:translateY(-5px);box-shadow:6px 6px 0 #111}

.click-burst{position:fixed;z-index:9999;pointer-events:none;font:800 13px 'Bricolage Grotesque',sans-serif;background:var(--lime);color:#111;border:2px solid #111;border-radius:999px;padding:7px 10px;box-shadow:3px 3px 0 #111;animation:burstAway .72s ease-out forwards}
@keyframes burstAway{0%{opacity:0;transform:translate(-50%,-20%) scale(.65) rotate(-5deg)}20%{opacity:1}100%{opacity:0;transform:translate(-50%,-135%) scale(1.05) rotate(5deg)}}

@media(max-width:850px){.hero{grid-template-columns:1fr;gap:26px;padding-top:30px}.hero h1{font-size:clamp(52px,14vw,72px)}.hero-art{height:320px}.cart{font-size:120px}.float{font-size:46px}}
@media(max-width:520px){.hero h1{font-size:clamp(48px,15vw,62px)}.hero-copy>p{font-size:18px}.hero-art{height:270px}.cart{font-size:104px}.hero-actions{gap:12px}.hero .btn{padding:14px 17px}.tiny-note{max-width:180px}}
@media(prefers-reduced-motion:reduce){.hero .btn-lime,.float,.ticker div{animation:none!important}.hero-art,.btn,.game-card,.steps article{transition:none!important}}

/* v0.4.0 hero hook + interactive surface pass */
.hero{align-items:start;padding-top:34px;padding-bottom:40px;min-height:500px}
.hero-copy{padding-top:10px}
.hero h1{font-size:clamp(54px,5.55vw,80px);line-height:.9;margin:12px 0 12px;max-width:500px}
.hero h1 mark{display:inline-block}
.hero-copy>p{font-size:clamp(17px,1.35vw,21px);max-width:410px;margin-bottom:18px}
.hero-actions{margin-top:4px}.hero-chips{margin-top:18px}
.hero-hook{min-width:0;padding-top:2px}
.hero-art{font:inherit;color:inherit;width:100%;height:420px;padding:0;display:block;text-align:left;appearance:none;-webkit-appearance:none;position:relative;overflow:hidden;background:radial-gradient(circle at 72% 20%,rgba(215,255,63,.85),transparent 23%),radial-gradient(circle at 20% 78%,rgba(255,114,182,.62),transparent 27%),linear-gradient(135deg,#d8c8ff,#bcaaff 44%,#d7ff3f 125%);border:var(--line);border-radius:43% 57% 49% 51%/51% 39% 61% 49%;cursor:pointer;box-shadow:0 0 0 0 #111;isolation:isolate;transition:border-radius .45s cubic-bezier(.2,.85,.2,1),box-shadow .25s ease,transform .25s ease;transform:perspective(900px) rotateX(var(--hero-rx,0deg)) rotateY(var(--hero-ry,0deg)) translateZ(0)}
.hero-art:focus-visible{outline:4px solid #111;outline-offset:5px}
.hero-art::before{content:"";position:absolute;width:260px;height:260px;border:2px dashed rgba(17,17,17,.24);border-radius:50%;left:50%;top:52%;transform:translate(-50%,-50%);animation:orbitRing 16s linear infinite}
.hero-art::after{content:"";position:absolute;inset:14px;border:1.5px solid rgba(255,255,255,.55);border-radius:inherit;pointer-events:none}
@keyframes orbitRing{to{transform:translate(-50%,-50%) rotate(360deg)}}
.hook-kicker{position:absolute;left:26px;top:24px;z-index:8;background:#fff;border:2px solid #111;border-radius:999px;padding:7px 10px;font:800 11px 'Bricolage Grotesque';transform:rotate(-4deg);box-shadow:3px 3px 0 #111;animation:hookHint 4.8s ease-in-out infinite}
@keyframes hookHint{0%,72%,100%{transform:rotate(-4deg) translate(0,0)}78%{transform:rotate(-6deg) translate(-3px,-2px)}84%{transform:rotate(-2deg) translate(4px,1px)}90%{transform:rotate(-4deg) translate(0,0)}}
.chaos-meter{position:absolute;right:24px;bottom:22px;z-index:8;background:#111;color:#fff;border:2px solid #111;border-radius:999px;padding:8px 12px;font:800 11px 'Bricolage Grotesque';box-shadow:4px 4px 0 var(--lime)}
.chaos-meter b{color:var(--lime);margin-right:4px}.hero-reaction{position:absolute;left:50%;bottom:24px;z-index:8;transform:translateX(-50%) rotate(-2deg);background:#fff;border:2px solid #111;border-radius:12px;padding:7px 10px;font:800 11px 'Bricolage Grotesque';opacity:.95;transition:transform .2s ease,background .2s ease}
.cart-shell{position:absolute;left:50%;top:54%;width:200px;height:190px;transform:translate(-50%,-50%);z-index:5;display:grid;place-items:center}
.cart{position:relative;left:auto;bottom:auto;font-size:146px;line-height:1;transform:rotate(-8deg);filter:drop-shadow(10px 13px 0 rgba(0,0,0,.13));transition:transform .28s cubic-bezier(.15,.9,.2,1)}
.cart-shadow{position:absolute;width:135px;height:24px;border-radius:50%;background:rgba(17,17,17,.13);bottom:9px;left:50%;transform:translateX(-50%)}
.hero-art.is-poked .cart{animation:cartJump .56s cubic-bezier(.15,.9,.2,1)}
@keyframes cartJump{0%,100%{transform:translateY(0) rotate(-8deg)}38%{transform:translateY(-28px) rotate(8deg) scale(1.08)}68%{transform:translateY(4px) rotate(-12deg) scale(.98)}}
.orbit{position:absolute;z-index:4;font-size:48px;filter:drop-shadow(4px 5px 0 rgba(0,0,0,.08));pointer-events:none;transition:transform .15s linear}.orbit-a{left:12%;top:24%;animation:orbitFloatA 4.6s ease-in-out infinite}.orbit-b{right:13%;top:19%;animation:orbitFloatB 5.2s ease-in-out infinite}.orbit-c{right:10%;bottom:22%;animation:orbitFloatA 5.6s ease-in-out infinite reverse}.orbit-d{left:13%;bottom:18%;animation:orbitFloatB 4.8s ease-in-out infinite reverse}.orbit-e{left:43%;top:12%;animation:orbitFloatA 5s ease-in-out infinite}.orbit-f{left:39%;bottom:10%;animation:orbitFloatB 5.5s ease-in-out infinite}
@keyframes orbitFloatA{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(7px,-13px) rotate(7deg)}}
@keyframes orbitFloatB{0%,100%{transform:translate(0,0) rotate(6deg)}50%{transform:translate(-8px,11px) rotate(-8deg)}}
.hero-art .scribble{right:28px;top:126px;font-size:15px;z-index:6}.hero-art .hs1{left:28px;bottom:28px;z-index:7}.hero-art .hs2{right:28px;top:62px;z-index:7}
.hero-hook-help{margin:10px 0 0;text-align:center;font:700 11px 'Bricolage Grotesque';opacity:.58}
.hero-drop{position:absolute;z-index:9;font-size:48px;pointer-events:none;left:var(--drop-x,50%);top:-56px;animation:dropToCart .9s cubic-bezier(.18,.75,.18,1) forwards;filter:drop-shadow(4px 4px 0 rgba(0,0,0,.12))}
@keyframes dropToCart{0%{opacity:0;transform:translate(-50%,0) rotate(-22deg) scale(.7)}16%{opacity:1}72%{opacity:1;transform:translate(calc(-50% + var(--drop-drift,0px)),235px) rotate(18deg) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--drop-drift,0px)),275px) rotate(35deg) scale(.3)}}
.hero-art.is-flash{box-shadow:8px 9px 0 #111}.hero-art.is-flash .hero-reaction{background:var(--lime);transform:translateX(-50%) rotate(2deg) scale(1.06)}

/* interactive cards: subtle invitation, then responsive tilt on hover */
.game-card,.mood-grid a,.coming-strip article{position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform}
.game-card::after,.mood-grid a::after,.coming-strip article::after{content:"";position:absolute;top:-35%;left:-50%;width:24%;height:170%;background:rgba(255,255,255,.38);transform:skewX(-18deg);transition:left .55s ease;pointer-events:none}
.game-card:hover::after,.mood-grid a:hover::after,.coming-strip article:hover::after{left:135%}
.game-card>b{transition:transform .2s cubic-bezier(.2,.85,.2,1),background .2s ease}.game-card:hover>b{transform:translateX(4px) rotate(-8deg) scale(1.1);background:#fff;color:#111;border:2px solid #111}
.game-card.is-attention{animation:cardNudge .64s cubic-bezier(.2,.8,.2,1)}
@keyframes cardNudge{0%,100%{transform:translateY(0) rotate(0)}30%{transform:translateY(-7px) rotate(-1deg)}55%{transform:translateY(1px) rotate(.5deg)}78%{transform:translateY(-3px) rotate(-.3deg)}}
.game-card.is-clicked{animation:cardPress .36s cubic-bezier(.2,.85,.2,1)}
@keyframes cardPress{0%{transform:scale(1)}38%{transform:scale(.965) rotate(-.5deg)}72%{transform:scale(1.025) rotate(.35deg)}100%{transform:scale(1)}}

@media (hover:hover) and (pointer:fine){
 .game-card:hover{transform:perspective(800px) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg)) translateY(-5px);box-shadow:7px 7px 0 #111}
 .hero-art:hover{box-shadow:8px 9px 0 rgba(17,17,17,.11)}
}
@media(max-width:850px){
 .hero{padding-top:26px;grid-template-columns:1fr;gap:24px}.hero-copy{padding-top:0}.hero h1{font-size:clamp(50px,13vw,70px);max-width:430px}.hero-art{height:335px}.cart-shell{top:55%;transform:translate(-50%,-50%) scale(.84)}.orbit{font-size:39px}.hero-art .scribble{top:106px}.hero-hook-help{margin-bottom:4px}
}
@media(max-width:520px){
 .hero h1{font-size:clamp(46px,14.5vw,58px)}.hero-copy>p{font-size:17px}.hero-art{height:292px}.cart-shell{transform:translate(-50%,-50%) scale(.72)}.orbit{font-size:33px}.hook-kicker{left:14px;top:15px;font-size:9px}.chaos-meter{right:12px;bottom:12px;font-size:9px}.hero-reaction{bottom:13px;font-size:9px}.hero-art .hs2{right:15px;top:50px}.hero-art .hs1{left:15px;bottom:18px}.hero-art .scribble{right:15px;top:100px;font-size:12px}.hero-drop{font-size:38px}@keyframes dropToCart{0%{opacity:0;transform:translate(-50%,0) rotate(-22deg) scale(.7)}16%{opacity:1}72%{opacity:1;transform:translate(calc(-50% + var(--drop-drift,0px)),170px) rotate(18deg) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--drop-drift,0px)),205px) rotate(35deg) scale(.3)}}
}
@media(prefers-reduced-motion:reduce){.hero-art::before,.hook-kicker,.orbit,.hero-drop,.game-card.is-attention{animation:none!important}.hero-art{transform:none!important}}