/* Pumpers: sticker-bomb toy box. A full-bleed hero that takes each Pumper's backdrop colour,
   then cream pages of inked stickers, tapes and stacking cards. Layout from the Pumpers design artifact. */
:root{
  --cream:#FFFAEB; --cream-2:#FFF0C7; --paper:#FFFFFF; --ink:#17131F; --ink-2:#4A4458;
  --pink:#FF3D9A; --yellow:#FFC83D; --mint:#2ED3A0; --sky:#5B7CFF;
  --hero:#6e4a99; --band:#6e4a99;
  --f-d:"Unbounded","Arial Black",Impact,system-ui,sans-serif;
  --f-b:"Bricolage Grotesque",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut-l:max(16px,env(safe-area-inset-left,0px)); --gut-r:max(16px,env(safe-area-inset-right,0px));
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;overflow-x:clip;background:var(--cream)}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--f-b);font-size:17px;line-height:1.55;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--band);transition:background .5s}
.wrap{max-width:1240px;margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
h1,h2,h3,p,figure{margin:0}
a{color:inherit}
img{display:block;max-width:100%}
button{font:inherit}
:focus-visible{outline:3px dashed var(--pink);outline-offset:4px}
.d{font-family:var(--f-d);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;line-height:.95}
.inked{-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:3px 5px 0 var(--ink)}
.label{font-family:var(--f-d);font-weight:700;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase}
.tk{font-family:var(--f-d);font-weight:800}

/* buttons + stickers */
.btn{font:800 .82rem/1 var(--f-d);text-transform:uppercase;letter-spacing:.02em;color:var(--ink);background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;padding:1.05em 1.5em;
  box-shadow:0 5px 0 var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:.6em;cursor:pointer;transition:transform .12s,box-shadow .12s;white-space:nowrap}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 0 var(--ink)}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 var(--ink)}
.btn:disabled{background:#e8e1cf;color:var(--ink-2);cursor:not-allowed}
.btn.pink{background:var(--pink);color:#fff}
.btn.pink:disabled{background:#e8e1cf;color:var(--ink-2)}
.btn.yellow{background:var(--yellow)}
.btn.inkb{background:var(--ink);color:#fff;box-shadow:0 5px 0 var(--pink)}
.btn.big{font-size:1rem;padding:1.15em 1.7em}
.btn.busy{animation:wobble .9s ease-in-out infinite}
@keyframes wobble{50%{transform:rotate(-1deg) translateY(2px)}}
.btn svg{width:1.15em;height:1.15em;flex:none}
.tag{display:inline-block;font:900 .8rem/1 var(--f-d);text-transform:uppercase;color:#fff;background:var(--pink);border:2.5px solid var(--ink);border-radius:10px;padding:.5em .8em;box-shadow:3px 3px 0 var(--ink);transform:rotate(-4deg)}
.burst{width:76px;height:76px;flex:none;animation:spin 14s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* nav */
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;padding-block:14px;transition:background .3s,border-color .3s;border-bottom:3px solid transparent;background:var(--hero)}
nav.solid{background:var(--cream);border-bottom-color:var(--ink)}
nav .wrap{display:flex;align-items:center;gap:18px}
.logo{font:900 1.45rem/1 var(--f-d);text-transform:uppercase;color:var(--pink);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:2px 3px 0 var(--ink);text-decoration:none;display:flex;align-items:center;gap:10px;letter-spacing:-.01em}
.logo img{width:42px;height:42px;border-radius:50%;object-fit:cover;object-position:50% 42%;border:2.5px solid var(--ink);box-shadow:2px 3px 0 var(--ink);-webkit-text-stroke:0}
.net{font:800 .62rem/1 var(--f-d);text-transform:uppercase;background:var(--yellow);border:2px solid var(--ink);border-radius:8px;padding:.45em .6em}
.links{display:flex;gap:2px;margin-left:auto;background:var(--paper);border:2.5px solid var(--ink);border-radius:14px;padding:4px;box-shadow:0 4px 0 var(--ink)}
.links a{font:700 .72rem/1 var(--f-d);text-transform:uppercase;text-decoration:none;padding:.85em 1em;border-radius:9px;transition:background .15s}
.links a:hover{background:var(--yellow)}
nav .btn{padding:.95em 1.2em}
@media (max-width:960px){.links{display:none}nav .btn{margin-left:auto}}
@media (max-width:420px){.logo{font-size:1.15rem}.logo img{width:34px;height:34px}nav .btn{padding:.8em .9em;font-size:.72rem}.net{display:none}}

/* hero */
.hero{position:relative;background:var(--hero);transition:background .45s ease;overflow:hidden;border-bottom:3px solid var(--ink);margin-top:-1px}
.title{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;padding-top:clamp(8px,2vw,24px);pointer-events:none}
.title span{display:block;white-space:nowrap;font-size:clamp(3rem,14vw,12rem);line-height:.92}
.title .l1{color:var(--pink)}
.title .l2{color:#fff;margin-top:.04em}
.stage{position:relative;z-index:2;height:clamp(300px,46vw,600px);margin-top:calc(-1 * clamp(40px,7vw,110px))}
.stage img{position:absolute;bottom:0;left:50%;height:100%;width:auto;aspect-ratio:1;max-width:none;transform:translate(-50%,45%) scale(.9);opacity:0;cursor:pointer;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 12%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent),linear-gradient(to bottom,transparent,#000 12%);mask-composite:intersect;
  transition:transform .3s ease-in,opacity .25s}
.stage img.on{transform:translate(-50%,0) scale(1);opacity:1;transition:transform .7s cubic-bezier(.3,1.45,.5,1),opacity .2s}
.stage img.squish{animation:squish .4s cubic-bezier(.3,1.6,.5,1)}
@keyframes squish{0%{scale:1}30%{scale:1.07 .9}60%{scale:.96 1.05}100%{scale:1}}
.hero-foot{position:absolute;z-index:4;left:0;right:0;bottom:26px}
.hero-foot .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}
.note{background:var(--paper);border:2.5px solid var(--ink);border-radius:16px;box-shadow:0 5px 0 var(--ink);padding:14px 16px;max-width:290px;font:800 .78rem/1.35 var(--f-d);text-transform:uppercase}
.note small{display:block;font:500 .9rem/1.35 var(--f-b);text-transform:none;color:var(--ink-2);margin-top:6px}
.who{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.who .nm{background:var(--yellow);border:2.5px solid var(--ink);border-radius:12px;box-shadow:0 5px 0 var(--ink);padding:10px 14px;font:900 .9rem/1 var(--f-d);text-transform:uppercase;display:flex;align-items:center;gap:12px}
.who .nm span{font:700 .7rem/1 var(--f-d);opacity:.65}
.dots{display:flex;gap:6px}
.dots button{all:unset;cursor:pointer;width:14px;height:14px;border-radius:50%;background:var(--paper);border:2.5px solid var(--ink);transition:background .2s,transform .2s}
.dots button[aria-current="true"]{background:var(--pink);transform:scale(1.2)}
.dots button:focus-visible{outline:3px dashed var(--paper);outline-offset:3px}
.badge{position:absolute;z-index:4;right:max(4%,calc(50% - 560px));top:clamp(230px,34vw,420px);width:clamp(96px,11vw,136px);aspect-ratio:1;border-radius:50%;background:var(--paper);border:2.5px solid var(--ink);box-shadow:0 5px 0 var(--ink);display:grid;place-items:center;text-decoration:none}
.badge svg{position:absolute;inset:6%;width:88%;height:88%;animation:spin 12s linear infinite}
.badge img{width:44%;height:44%;border-radius:50%;object-fit:cover;object-position:50% 42%;border:2.5px solid var(--ink)}
@media (max-width:700px){
  .hero-foot{position:static;padding-bottom:0}
  .hero-foot .wrap{flex-direction:column;align-items:stretch}
  .hero{display:flex;flex-direction:column}
  .hero-foot{order:2;margin-top:18px}
  .stage{order:3;margin-top:-6px;height:clamp(280px,92vw,420px)}
  .note{max-width:none}
  .who{flex-direction:row;justify-content:space-between;align-items:center}
  .badge{top:auto;bottom:24px;right:var(--gut-r)}
}

/* marquee bands */
.band{background:var(--cream);border-bottom:3px solid var(--ink);overflow:hidden;padding-block:16px}
.track{display:flex;align-items:center;gap:36px;width:max-content;animation:scroll 30s linear infinite}
.track .w{font:900 clamp(1.6rem,3.4vw,2.6rem)/1 var(--f-d);text-transform:uppercase;white-space:nowrap}
.track .w.o{color:var(--cream);-webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:2px 3px 0 var(--ink)}
@keyframes scroll{to{transform:translateX(-50%)}}
.rev{animation-direction:reverse}

section{padding-block:110px}

/* statement */
.statement{text-align:center}
.statement h2{font-size:clamp(1.9rem,5.4vw,4.6rem);line-height:1.18;max-width:1100px;margin:22px auto 0;text-wrap:balance}
.statement h2 .o{color:var(--cream);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:3px 4px 0 var(--ink)}
.statement h2 .p{color:var(--pink);-webkit-text-stroke:2px var(--ink);paint-order:stroke fill;text-shadow:3px 4px 0 var(--ink)}
.face{display:inline-block;vertical-align:middle;width:1.15em;height:1.15em;border-radius:50%;border:3px solid var(--ink);box-shadow:3px 4px 0 var(--ink);overflow:hidden;margin:-.15em .08em 0;transform:rotate(-6deg);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.face:nth-of-type(even){transform:rotate(7deg)}
.face:hover{transform:rotate(0) scale(1.18)}
.face img{width:100%;height:100%;object-fit:cover;object-position:50% 44%;transform:scale(1.5)}
.statement p{max-width:56ch;margin:34px auto 0;font-size:1.15rem;color:var(--ink-2);font-weight:500}
.squiggle{width:120px;height:110px;margin:10px auto 0;display:block}

/* gallery rows */
.rows{display:flex;flex-direction:column;gap:22px;padding-block:10px 40px;overflow:hidden}
.row{display:flex;gap:22px;width:max-content;animation:scroll 48s linear infinite}
.row.rev{animation-direction:reverse;animation-duration:54s}
.rows:hover .row{animation-play-state:paused}
.g{position:relative;width:clamp(200px,22vw,290px);aspect-ratio:1;border-radius:26px;overflow:hidden;flex:none;transition:transform .3s cubic-bezier(.3,1.5,.5,1)}
.g img{width:100%;height:100%;object-fit:cover}
.g figcaption{position:absolute;left:12px;bottom:12px;background:var(--paper);border:2.5px solid var(--ink);border-radius:10px;box-shadow:0 4px 0 var(--ink);padding:.55em .75em;font:900 .72rem/1 var(--f-d);text-transform:uppercase;opacity:0;transform:translateY(8px);transition:.25s}
.g:hover{transform:translateY(-8px) rotate(-2deg)}
.g:hover figcaption{opacity:1;transform:none}

/* tapes */
.tapes{position:relative;height:clamp(220px,26vw,300px);overflow:hidden;padding:0}
.tape{position:absolute;left:-5%;right:-5%;top:50%;border-block:3px solid var(--ink);padding-block:12px;overflow:hidden}
.tape.a{background:var(--yellow);transform:translateY(-50%) rotate(5deg)}
.tape.b{background:var(--pink);color:#fff;transform:translateY(-50%) rotate(-5deg)}
.tape .track{gap:26px;animation-duration:26s}
.tape .w{font-size:clamp(1.2rem,2.4vw,1.75rem)}
.tape svg{width:34px;height:34px;flex:none}

/* section heads */
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:56px}
.head h2{font-size:clamp(2.8rem,8vw,6.8rem);position:relative}
.head h2 .tag{position:absolute;left:-10px;top:-26px;font-size:.72rem}
.head p{max-width:38ch;color:var(--ink-2);font-weight:500;font-size:1.08rem}

/* stacking trait cards */
.stack{display:flex;flex-direction:column;gap:46px}
.tcard{position:sticky;top:calc(100px + var(--i) * 16px);background:var(--paper);border:3px solid var(--ink);border-radius:30px;box-shadow:0 9px 0 var(--ink);
  display:grid;grid-template-columns:minmax(0,.9fr) 3px minmax(0,1.1fr);gap:48px;align-items:center;padding:clamp(24px,4vw,56px);overflow:hidden;min-height:440px}
.tcard .disc{width:min(320px,100%);aspect-ratio:1;justify-self:center;border-radius:50%;overflow:hidden;border:3px solid var(--ink);box-shadow:0 7px 0 var(--ink)}
.tcard .disc img{width:100%;height:100%;object-fit:cover}
.tcard .rule{align-self:stretch;background:var(--ink);opacity:.18;border-radius:3px}
.pill{display:inline-flex;align-items:center;gap:12px;padding:6px 18px 6px 6px;border-radius:999px;background:var(--pc);font:700 .9rem/1 var(--f-d);text-transform:uppercase}
.pill b{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:#fff;font-weight:800;font-size:.85rem}
.tcard h3{font-size:clamp(2rem,4.4vw,3.6rem);margin:24px 0 16px}
.tcard p{color:var(--ink-2);max-width:40ch;font-size:1.05rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chips span{font-weight:700;font-size:.88rem;padding:.4em .85em;border-radius:999px;border:2px solid var(--ink);background:var(--cream)}
.ribbon{position:absolute;top:44px;right:-62px;width:260px;transform:rotate(45deg);background:var(--mint);border-block:3px solid var(--ink);text-align:center;font:900 .8rem/1 var(--f-d);text-transform:uppercase;padding:10px 0;letter-spacing:.04em}
@media (max-width:820px){
  .tcard{grid-template-columns:minmax(0,1fr);gap:22px;min-height:0;position:relative;top:auto;text-align:left}
  .tcard .rule{display:none}
  .tcard .disc{width:min(220px,70%)}
}
@media (max-height:700px){.tcard{position:relative;top:auto}}

/* pump-o-matic */
.machine{background:var(--paper);border:3px solid var(--ink);border-radius:34px;box-shadow:0 10px 0 var(--ink);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:50px;align-items:center;padding:clamp(20px,3.6vw,46px)}
.bal{position:relative;aspect-ratio:1;max-width:100%;border-radius:26px;border:3px solid var(--ink);overflow:hidden;background:var(--c,#5eb3b0);transition:background .4s;cursor:pointer}
.bal img{width:100%;height:100%;object-fit:cover;transform-origin:50% 78%;transition:transform .25s cubic-bezier(.3,1.7,.5,1)}
.bal .boom{position:absolute;inset:0;display:grid;place-items:center;font:900 clamp(3.4rem,8vw,6rem)/1 var(--f-d);color:var(--yellow);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill;text-shadow:5px 7px 0 var(--ink);opacity:0;pointer-events:none}
.bal .boom.go{animation:boom .8s ease-out}
@keyframes boom{0%{opacity:1;transform:scale(.3) rotate(-14deg)}55%{opacity:1;transform:scale(1.15) rotate(4deg)}100%{opacity:0;transform:scale(1.35)}}
.ctrl h2{font-size:clamp(2.2rem,4.8vw,3.9rem);margin:18px 0 16px}
.ctrl p{color:var(--ink-2);max-width:42ch}
.gauge{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:6px;margin:30px 0 10px}
.gauge i{height:30px;border-radius:8px;border:2.5px solid var(--ink);background:var(--cream);transition:background .1s}
.lvl{display:flex;justify-content:space-between;gap:10px;font:700 .72rem/1.3 var(--f-d);text-transform:uppercase}
.pumprow{display:flex;align-items:center;gap:28px;margin-top:30px;flex-wrap:wrap}
#pumpBtn{all:unset;cursor:pointer;width:140px;height:140px;border-radius:50%;display:grid;place-items:center;font:900 1.35rem/1 var(--f-d);color:#fff;background:var(--pink);border:3px solid var(--ink);box-shadow:0 10px 0 var(--ink);
  -webkit-text-stroke:1.5px var(--ink);paint-order:stroke fill;text-shadow:2px 3px 0 var(--ink);transition:transform .07s,box-shadow .07s;user-select:none;-webkit-user-select:none;touch-action:manipulation;position:relative}
#pumpBtn::after{content:"";position:absolute;top:14%;left:22%;width:30%;height:16%;border-radius:50%;background:rgba(255,255,255,.45);transform:rotate(-24deg)}
#pumpBtn:active,#pumpBtn.press{transform:translateY(9px);box-shadow:0 1px 0 var(--ink)}
#pumpBtn:focus-visible{outline:3px dashed var(--pink);outline-offset:8px}
.score{display:flex;gap:14px}
.score div{border:2.5px solid var(--ink);border-radius:16px;padding:12px 16px;box-shadow:0 5px 0 var(--ink);background:var(--cream);min-width:110px}
.score span{display:block;font:700 .66rem/1 var(--f-d);text-transform:uppercase;color:var(--ink-2)}
.score b{display:block;font:900 2rem/1 var(--f-d);margin-top:8px;font-variant-numeric:tabular-nums}
.hint{margin-top:22px;font-size:.92rem;color:var(--ink-2)}
.hint kbd{font:700 .72rem/1 var(--f-d);padding:.35em .6em;border:2px solid var(--ink);border-radius:7px;background:var(--cream);box-shadow:0 2px 0 var(--ink)}
@media (max-width:860px){.machine{grid-template-columns:minmax(0,1fr);gap:28px}}

/* claim (the artifact's mint block, now live) */
.mint{background:var(--yellow);border:3px solid var(--ink);border-radius:36px;box-shadow:0 12px 0 var(--ink);padding:clamp(26px,5vw,64px);display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:44px;align-items:center;position:relative;overflow:hidden}
.mint h2{font-size:clamp(2.2rem,5.6vw,5rem);line-height:.95}
.mint h2 .p{color:var(--pink)}
.mint h2 .w{color:#fff}
.mint > div > p{font-size:1.1rem;font-weight:500;max-width:40ch;margin-top:22px}
.mint .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px}
.mint .small{margin-top:14px;font-size:.95rem;font-weight:600;color:var(--ink-2)}
.claimbox{margin-top:24px;background:var(--paper);border:2.5px solid var(--ink);border-radius:22px;box-shadow:0 6px 0 var(--ink);padding:18px 20px}
.claimbox .count{display:flex;align-items:baseline;gap:10px}
.claimbox .count b{font:900 clamp(2.2rem,4.4vw,3.2rem)/1 var(--f-d);font-variant-numeric:tabular-nums}
.claimbox .count span{font:700 .78rem/1 var(--f-d);text-transform:uppercase;color:var(--ink-2)}
.meter{height:18px;border:2.5px solid var(--ink);border-radius:99px;overflow:hidden;margin:12px 0 14px;background:var(--cream)}
.meter i{display:block;height:100%;width:0;background:repeating-linear-gradient(-45deg,var(--pink) 0 12px,#ff6fb5 12px 24px);transition:width .8s cubic-bezier(.2,.8,.2,1)}
.price{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.price small{display:block;font:700 .64rem/1.4 var(--f-d);text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.price strong{font:900 clamp(1.5rem,3vw,2.1rem)/1 var(--f-d);font-variant-numeric:tabular-nums}
.price .after{text-align:right;font:700 .9rem/1.2 var(--f-d)}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.stat{background:var(--paper);border:2.5px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 var(--ink);padding:20px}
.stat:nth-child(2){transform:rotate(2deg)}.stat:nth-child(3){transform:rotate(-2deg)}
.stat > span{font:700 .68rem/1 var(--f-d);text-transform:uppercase;color:var(--ink-2)}
.stat b{display:block;font:900 clamp(1.3rem,2.6vw,2.1rem)/1.05 var(--f-d);margin-top:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.mint .burst{position:absolute;right:-18px;top:-18px;width:110px;height:110px}
@media (max-width:860px){.mint{grid-template-columns:minmax(0,1fr)}}

/* your pumpers */
.mygrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px}
.mygrid .g{width:auto}
.mygrid .g figcaption{opacity:1;transform:none}
.empty{color:var(--ink-2);font-weight:700}

/* faq */
.faq-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:50px;align-items:start}
.faq-grid .head{margin:0}
.faq{display:flex;flex-direction:column;gap:16px}
details{background:var(--paper);border:3px solid var(--ink);border-radius:22px;box-shadow:0 6px 0 var(--ink)}
summary{list-style:none;cursor:pointer;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;font:800 clamp(.9rem,1.6vw,1.08rem)/1.3 var(--f-d);text-transform:uppercase}
summary::-webkit-details-marker{display:none}
summary i{flex:none;width:34px;height:34px;border-radius:10px;border:2.5px solid var(--ink);background:var(--yellow);display:grid;place-items:center;font-style:normal;font-weight:900;transition:transform .25s,background .25s}
details[open] summary i{transform:rotate(45deg);background:var(--pink);color:#fff}
details p{padding:0 24px 24px;color:var(--ink-2);max-width:60ch;font-size:1.05rem}
@media (max-width:860px){.faq-grid{grid-template-columns:minmax(0,1fr);gap:20px}}

/* footer */
footer{background:var(--pink);border-top:3px solid var(--ink);padding-block:70px 34px;overflow:hidden;margin-top:30px}
.ftitle{text-align:center;color:#fff;white-space:nowrap;font-size:clamp(3rem,15vw,13rem);line-height:.9}
.faces{display:flex;justify-content:center;margin-top:34px}
.faces img{width:clamp(54px,7vw,84px);aspect-ratio:1;border-radius:50%;object-fit:cover;object-position:50% 42%;border:3px solid var(--ink);box-shadow:0 5px 0 var(--ink);margin-left:-14px;background:var(--paper);transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.faces img:first-child{margin-left:0}
.faces img:hover{transform:translateY(-10px) rotate(-6deg)}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:50px;padding-top:26px;border-top:3px solid var(--ink)}
.foot .label{color:var(--ink)}
.soc{display:flex;gap:10px}
.round{width:50px;height:50px;border-radius:50%;background:var(--paper);border:2.5px solid var(--ink);box-shadow:0 4px 0 var(--ink);display:grid;place-items:center;text-decoration:none;transition:transform .12s,box-shadow .12s;color:var(--ink)}
.round:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--ink)}
.round svg{width:20px;height:20px}
.round.up{background:var(--yellow)}
.round[hidden]{display:none}
.chain{display:flex;gap:22px;flex-wrap:wrap;margin-top:22px;font:700 .72rem/1.4 var(--f-d);text-transform:uppercase;color:var(--ink)}
.chain a{word-break:break-all;text-transform:none;font-family:var(--f-b)}

/* toast + reveal */
.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%,160%);max-width:min(92vw,520px);padding:14px 18px;border-radius:16px;border:2.5px solid var(--ink);background:var(--paper);box-shadow:0 5px 0 var(--ink);
  font:700 .95rem/1.35 var(--f-b);transition:transform .35s cubic-bezier(.2,.8,.2,1);z-index:80}
.toast.show{transform:translate(-50%,0)}
.toast.err{background:#FFD6E8}
.toast a{font-family:var(--f-d);font-size:.8rem;margin-left:4px}
dialog{border:3px solid var(--ink);border-radius:30px;padding:0;box-shadow:0 10px 0 var(--ink);background:var(--paper);max-width:min(92vw,440px)}
dialog::backdrop{background:rgb(23 19 31 / .6)}
.reveal-in{padding:24px;text-align:center}
.reveal-in img{width:100%;border-radius:22px;border:3px solid var(--ink);margin-top:18px;animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.6) rotate(-6deg);opacity:0}}
.reveal-in h2{font-size:1.8rem;margin:18px 0 6px}
.reveal-in .chips{justify-content:center;margin:12px 0 20px}

#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:70}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}