/* playswapsies.com — Swapsies design system (Claude Design "Welcome to Squish Town", Prompt 30).
   Picks: hero 1b "Collector card", shop 3b "Shop window". No trackers, no third-party anything. */
@font-face{font-family:Sniglet;src:url(fonts/sniglet-800.woff) format("woff");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:Lexend;src:url(fonts/lexend-var.woff) format("woff");font-weight:400 600;font-style:normal;font-display:swap}
:root{
  --plum:#59336F;--plum-d:#3F2250;--cream:#FCF2EB;--butter:#FFDB9E;--pink:#FFB8D1;--blue:#B8D6FA;--lilac:#D1C2FF;
  --cap:#735F80;          /* caption text (board #8C7399 darkened for 4.5:1 on cream) */
  --wood:#C4946A;--night:#3F2250;
  --gut:clamp(20px,5vw,80px);
  --stk:0 0 0 2.5px var(--plum),3px 4px 0 2.5px var(--plum);
  --sn:Sniglet,"Arial Rounded MT Bold",system-ui,sans-serif;
  --lx:Lexend,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--plum);font-family:var(--lx);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
@supports (overflow:clip){body{overflow-x:clip}}
img,svg,video{display:block;max-width:100%}
a{color:var(--plum);text-underline-offset:4px}
a:hover{color:var(--plum-d)}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--plum);outline-offset:3px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:#fff;color:var(--plum);padding:10px 16px;border-radius:12px;box-shadow:var(--stk);font-weight:600}
.skip:focus{top:12px}
.wrap{max-width:1120px;margin-inline:auto;padding-inline:var(--gut);box-sizing:content-box}
.sn{font-family:var(--sn);font-weight:800}

/* ---------- shared bits ---------- */
.coin{width:24px;height:24px;flex:none}
.coin.c16{width:16px;height:16px}.coin.c22{width:22px;height:22px}
.place-tag{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 10px;border-radius:10px;background:#fff;box-shadow:var(--stk);font-family:var(--sn);font-weight:800;font-size:15px;transform:rotate(-2deg)}
.tag-dot{width:10px;height:10px;border-radius:50%;box-shadow:0 0 0 2px var(--plum);flex:none}
.dot-blue{background:#B8D6FA}.dot-pink{background:#FFB8D1}.dot-green{background:#8ED99B}.dot-gold{background:#FFC93C}.dot-butter{background:#FFDB9E}
.sec-head{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(24px,3vw,40px)}
.sec-head.center{align-items:center;text-align:center}
h2{font-family:var(--sn);font-weight:800;font-size:clamp(36px,5vw,58px);line-height:1;letter-spacing:-.01em;text-wrap:balance}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.5;max-width:460px;text-wrap:pretty}
.sub{font-size:clamp(16px,1.5vw,19px);color:var(--cap)}

/* rarity colours: --rf frame, --ri ink */
.rb-common,.f-common{--rf:#E4DFEA;--ri:#5A5268}
.rb-rare,.f-rare{--rf:#86CBF3;--ri:#0F5580}
.rb-epic,.f-epic{--rf:#D596F2;--ri:#6A1F8E}
.rb-legendary,.f-legendary{--rf:#FFC93C;--ri:#734A00}
.rb-ic{--s:22px;width:var(--s);height:var(--s);flex:none;background:var(--ri);display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--s)*.07)}
.rb-ic.s20{--s:20px}.rb-ic.s24{--s:24px}.rb-ic.s30{--s:30px}
.rb-ic i{width:max(2.6px,calc(var(--s)*.14));height:max(2.6px,calc(var(--s)*.14));border-radius:50%;background:#fff;flex:none}
.rb-ic.rb-common{border-radius:50%}
.rb-ic.rb-rare{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.rb-ic.rb-epic{clip-path:polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%)}
.rb-ic.rb-legendary{display:inline-grid;grid-template-columns:auto auto;align-content:center;justify-content:center;
  clip-path:polygon(50% 0%,64.2% 15.8%,85.4% 14.6%,84.2% 35.8%,100% 50%,84.2% 64.2%,85.4% 85.4%,64.2% 84.2%,50% 100%,35.8% 84.2%,14.6% 85.4%,15.8% 64.2%,0% 50%,15.8% 35.8%,14.6% 14.6%,35.8% 15.8%)}
.rb-pill{display:inline-flex;align-items:center;gap:9px;height:40px;padding:5px 16px 5px 5px;border-radius:999px;background:var(--rf);color:var(--ri);font-family:var(--sn);font-weight:800;font-size:15px;letter-spacing:.05em;text-transform:uppercase;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--plum)}
.rb-pill.rb-epic{color:#521470}
.rb-inline{display:inline-flex;align-items:center;gap:7px;color:var(--ri);font-family:var(--lx);font-weight:600;font-size:14px;line-height:20px}

/* App Store badge slot (pre-launch placeholder, Apple badge proportions 119.66 x 40) */
.get{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px}
.appstore-slot{display:inline-flex;align-items:center;justify-content:center;flex:none;width:156px;height:52px;border:2px dashed var(--plum);border-radius:10px;background:rgba(255,255,255,.5);text-align:center}
.appstore-slot.appstore-sm{width:120px;height:40px;border-radius:8px}
.slot-note{font-size:10.5px;line-height:1.2;font-weight:600;color:var(--plum)}
.appstore-sm .slot-note{font-size:8.5px}
.appstore img{height:52px;width:auto}.appstore-sm img{height:40px}
.soon-tag{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:#fff;box-shadow:0 0 0 2px var(--plum);font-family:var(--sn);font-weight:800;font-size:14px;color:var(--plum);transform:rotate(-3deg);white-space:nowrap}
.android{font-size:14px;color:var(--plum)}
.on-dark .appstore-slot{border-color:#FCF2EB;background:rgba(255,255,255,.08)}
.on-dark .slot-note{color:#FCF2EB}
.on-dark .android{color:#E6D8F2}

/* phone frame */
.phone{width:clamp(210px,24vw,280px);aspect-ratio:9/19.5;padding:8px;border-radius:40px;background:#241829;box-shadow:0 24px 40px -24px rgba(63,34,80,.6);flex:none}
.screen{position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;background:var(--cream);isolation:isolate}
.island{position:absolute;top:10px;left:34%;width:32%;height:22px;border-radius:11px;background:#241829;z-index:5}
.screen.vid .island{display:none} /* the recorded clips have no status bar; keep the game's top UI visible */
.clip{width:100%;height:100%;object-fit:cover;background:var(--cream)}

/* ---------- header + hero (1b Collector card) ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:16px;padding-bottom:8px;background:var(--butter);max-width:1120px}
.hero,.top-bg{background:var(--butter)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--plum)}
.brand img{width:clamp(48px,4.4vw,60px);height:auto;border-radius:15px}
.brand span{font-family:var(--sn);font-weight:800;font-size:clamp(30px,2.8vw,38px);line-height:1}
.sound-btn{width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:0 0 0 2.5px var(--plum);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;color:var(--plum)}
.sound-btn[hidden]{display:none}
.sound-btn .snd-on{display:none}
.sound-btn[aria-pressed=true] .snd-on{display:inline}.sound-btn[aria-pressed=true] .snd-off{display:none}
.hero{padding-bottom:clamp(48px,7vw,104px);overflow:hidden}
.hero-grid{max-width:1120px;box-sizing:border-box;margin:0 auto;padding:clamp(12px,2vw,24px) var(--gut) 0;display:flex;flex-wrap:wrap;align-items:center;gap:clamp(36px,5vw,72px)}
.hero-copy{flex:1 1 420px;min-width:0;display:flex;flex-direction:column;gap:clamp(18px,2.2vw,28px)}
h1{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(8px,1vw,14px);font-family:var(--sn);font-weight:800;font-size:clamp(50px,7.6vw,94px);line-height:1;letter-spacing:-.015em}
.st{padding:.08em .32em .12em;border-radius:.26em;border:4px solid #fff;box-shadow:0 0 0 2.5px var(--plum),5px 6px 0 2.5px var(--plum)}
.st-pink{background:#FFB8D1;transform:rotate(-3deg)}
.st-white{background:#fff;transform:rotate(1.5deg);margin-left:.4em}
.st-blue{background:#B8D6FA;transform:rotate(-1deg);margin-left:.15em}
.hero-play{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;align-items:center;gap:18px}
.card{position:relative;width:100%;max-width:400px;padding:14px;border-radius:30px;background:#fff;border:3px solid #E4DFEA;box-shadow:0 0 0 4px #fff,0 0 0 6.5px var(--plum),8px 10px 0 6.5px var(--plum);transform:rotate(2deg);display:flex;flex-direction:column;gap:12px}
.card-top,.card-bot{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 4px}
.type-label{font-family:var(--sn);font-weight:800;font-size:15px}
.stage{position:relative;width:100%;aspect-ratio:1/1;border-radius:20px;background:var(--cream)}
.pad{position:absolute;left:14%;right:14%;bottom:6%;height:16%;border-radius:50%;background:var(--butter);box-shadow:inset 0 -7px 0 rgba(160,100,20,.16),0 0 0 2.5px var(--plum)}
.squish-tag{position:absolute;left:6%;top:6%;z-index:2;animation:swFloat 3s ease-in-out infinite;transition:opacity .2s,transform .2s;pointer-events:none}
.squish-tag span{display:block;transform:rotate(-6deg);padding:6px 13px;border-radius:14px;background:#FFB8D1;border:3px solid #fff;box-shadow:var(--stk);font-family:var(--sn);font-weight:800;font-size:18px;white-space:nowrap}
.squish-tag.gone{opacity:0;transform:scale(.8)}
.squishy{position:absolute;left:16%;right:16%;bottom:10%;aspect-ratio:1/1;border:0;background:transparent;padding:0;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;border-radius:24px}
.squishy:focus-visible{outline:3px dashed var(--plum);outline-offset:4px}
.sq-move,.sq-scale{position:absolute;inset:0;display:block;transform-origin:50% 92%;will-change:transform}
.hero-sq{width:100%;height:100%;overflow:visible}
.hero-sq[hidden]{display:none}
.dent-clip{position:absolute;inset:0;pointer-events:none;-webkit-mask-size:120% 120%;mask-size:120% 120%;-webkit-mask-position:50% 50%;mask-position:50% 50%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.dent{position:absolute;left:0;top:0;width:36%;height:24%;margin:-12% 0 0 -18%;border-radius:50%;background:radial-gradient(closest-side,rgba(89,51,111,.5),rgba(89,51,111,0));opacity:0;pointer-events:none}
.fx{position:absolute;inset:0;pointer-events:none;z-index:3}
.fly-coin{position:absolute;left:50%;top:42%;width:30px;height:30px;margin-left:-15px;animation:swBoop .9s cubic-bezier(.2,.8,.3,1) forwards}
.combo{position:absolute;left:50%;top:16%;z-index:4;animation:swCombo 1.5s ease-out forwards}
.combo span{display:block;transform:rotate(-6deg);padding:8px 16px;border-radius:16px;background:var(--butter);border:4px solid #fff;box-shadow:0 0 0 2.5px var(--plum),4px 5px 0 2.5px var(--plum);font-family:var(--sn);font-weight:800;font-size:24px;white-space:nowrap}
.sq-name{font-family:var(--sn);font-weight:800;font-size:26px;line-height:1}
.boops{display:flex;align-items:center;gap:6px;font-family:var(--sn);font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}
.boops .coin{width:26px;height:26px}
.dots{display:flex;align-items:center;justify-content:center;gap:2px;margin:-6px 0 -8px}
.type-dot{width:44px;height:44px;border:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;border-radius:50%}
.type-dot span{width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 2px rgba(89,51,111,.35);transition:width .15s,height .15s}
.type-dot.dot-pink span{background:#FFB8D1}.type-dot.dot-butter span{background:#FFDB9E}.type-dot.dot-blue span{background:#B8D6FA}.type-dot.dot-lilac span{background:#D1C2FF}
.type-dot[aria-pressed=true] span{width:22px;height:22px;box-shadow:0 0 0 2.5px var(--plum),0 0 0 5px #fff}
.box-drop{width:100%;max-width:400px;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:24px;background:#fff;box-shadow:0 0 0 2.5px var(--plum),5px 7px 0 2.5px var(--plum)}
.box-drop[hidden]{display:none}
.box-drop.drop{animation:swDrop .56s cubic-bezier(.3,1.5,.5,1) both}
.box-drop>img{width:76px;height:auto;flex:none}
.box-copy{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.box-title{font-family:var(--sn);font-weight:800;font-size:clamp(17px,4.6vw,20px);line-height:1.15;text-wrap:pretty}
.box-get{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.box-get .soon-tag{height:26px;font-size:12px}
.soon-tag-lg{height:40px;padding:0 16px;font-size:16px}
.soon-tag-sm{height:32px;font-size:13px}
.odds-line{font-size:14px;color:var(--cap);flex-basis:100%}

/* ---------- How it works ---------- */
.how{background:#fff;padding:clamp(56px,8vw,112px) 0}
.how-stage{border-radius:clamp(28px,4vw,48px);background:#F6E9E0;margin:0 calc(-1 * clamp(0px,2vw,24px));padding:clamp(28px,4vw,56px) clamp(16px,4vw,56px) clamp(24px,3vw,40px)}
.how-phones{display:flex;justify-content:center;align-items:center;gap:clamp(16px,3vw,48px)}
.how-phones .p1{transform:rotate(-4deg)}
.how-phones .p2{transform:translateY(-14px)}
.how-phones .p3{transform:rotate(4deg)}
.how-pips{display:none}
.how-steps{display:flex;justify-content:center;gap:clamp(16px,3vw,48px);margin-top:18px}
.how-steps li{width:clamp(210px,24vw,280px);text-align:center}
.step-n{display:none}
.step-t{font-family:var(--sn);font-weight:800;font-size:clamp(19px,1.8vw,22px);line-height:1.2}
.clip-play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;border:0;background:#fff;color:var(--plum);box-shadow:var(--stk);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:6}
.clip-play[hidden]{display:none}
.clip-play.playing{opacity:.0}
.clip-play.playing:focus-visible{opacity:1}

/* album mock (Collection Book, Common page): 390 x 844 design frame scaled to the screen */
.book{position:absolute;inset:0;overflow:hidden;background:var(--cream)}
.book-in{position:absolute;left:0;top:0;width:390px;height:844px;transform-origin:0 0;transform:scale(var(--bs,.6));font-family:var(--lx);color:var(--plum)}
.b-back{position:absolute;top:62px;left:18px;width:52px;height:52px;border:4px solid #fff;border-radius:18px;background:#fff;box-shadow:var(--stk);display:flex;align-items:center;justify-content:center}
.b-found{position:absolute;top:66px;right:18px;height:44px;display:flex;align-items:center;gap:6px;padding:0 16px;border-radius:999px;background:#fff;box-shadow:var(--stk);font-size:15px;font-weight:600}
.b-found b{font-family:var(--sn);font-weight:800;font-size:18px;font-variant-numeric:tabular-nums}
.btab{position:absolute;left:324px;width:54px;height:64px;padding-left:10px;border-radius:0 18px 18px 0;border:2.5px solid var(--plum);display:flex;align-items:center;justify-content:center;z-index:0}
.btab.on{left:318px;width:60px;padding-left:16px;border-left:0;z-index:3}
.btab-common{top:150px;background:#fff}.btab-rare{top:224px;background:#86CBF3}.btab-epic{top:298px;background:#D596F2}
.btab-legendary{top:372px;background:#FFC93C}.btab-secret{top:446px;background:#CDBBF5}.btab-stickers{top:520px;background:#FFDB9E}
.btab .key{width:28px;height:28px;border-radius:50%;background:#4A2D86;display:flex;align-items:center;justify-content:center}
.b-cover{position:absolute;left:20px;top:132px;width:318px;height:578px;border-radius:26px;background:var(--wood);box-shadow:0 0 0 2.5px var(--plum);z-index:1}
.b-page{position:absolute;left:14px;top:126px;width:318px;height:578px;border-radius:24px;background:#fff;box-shadow:0 0 0 2.5px var(--plum);overflow:hidden;z-index:2}
.b-spine{position:absolute;left:0;top:0;bottom:0;width:12px;background:#EFDDD3}
.b-ribbon{position:absolute;top:-2px;right:22px}
.b-head{position:absolute;top:50px;left:24px;right:14px;height:36px;display:flex;align-items:center;gap:8px;white-space:nowrap}
.b-title{font-family:var(--sn);font-weight:800;font-size:24px;line-height:28px}
.b-count{font-family:var(--sn);font-weight:800;font-size:20px;color:#8C7399;font-variant-numeric:tabular-nums}
.b-grid{position:absolute;top:92px;left:12px;right:0;display:grid;grid-template-columns:repeat(3,91px);gap:14px 9px;padding:16px 8px 0 10px;align-items:start}
.btile{position:relative;width:91px;padding:6px;border-radius:20px;background:#fff;border:3px solid #E4DFEA;box-shadow:0 0 0 4px #fff,5px 7px 0 4px rgba(89,51,111,.18);display:flex;flex-direction:column;gap:8px;transform-origin:50% 90%}
.bwell{height:65px;border-radius:13px;background:var(--cream);display:flex;align-items:center;justify-content:center;position:relative}
.bwell img{width:58px;height:58px}
.bname{font-family:var(--sn);font-weight:800;font-size:13px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 2px}
.btile .rb-ic{margin:0 2px 2px}
.btile.sil,.btile.off{background:var(--cream);border:2.5px dashed rgba(140,115,153,.5);box-shadow:none}
.btile.sil .bwell,.btile.off .bwell{background:#fff}
.btile.sil .bname,.btile.off .bname{color:#8C7399}
.btile.off .bwell img{filter:brightness(0) invert(.9) sepia(.25);opacity:.85}
.btile.off .bwell::after{content:"?";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--sn);font-weight:800;font-size:26px;color:#B9A6BC}
.btile.off .rb-ic{visibility:hidden}
.b-nav{position:absolute;left:0;top:722px;width:390px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:0 14px}
.nb{height:74px;border-radius:20px;border:4px solid #fff;background:#fff;box-shadow:0 0 0 2.5px var(--plum),3px 5px 0 2.5px var(--plum);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nb.on{background:var(--butter)}
.nb>span{font-family:var(--sn);font-weight:800;font-size:13px;line-height:1;white-space:nowrap}

/* ---------- Shop (3b Shop window) ---------- */
.shop{position:relative;background:#FFE3EC;padding:0 0 clamp(72px,9.5vw,132px);overflow:hidden}
.post{position:absolute;top:clamp(8px,1vw,14px);bottom:0;width:clamp(14px,1.6vw,22px);background:var(--wood);border:2.5px solid var(--plum);border-bottom:0;border-radius:6px 6px 0 0}
.post-l{left:clamp(4px,1.2vw,14px)}.post-r{right:clamp(4px,1.2vw,14px)}
.sill{position:absolute;left:0;right:0;bottom:0;height:clamp(16px,1.8vw,24px);background:var(--wood);border-top:2.5px solid var(--plum);z-index:1}
.awning{position:relative;z-index:2;padding:clamp(12px,1.6vw,20px) clamp(6px,1.2vw,14px) 0;background:#FFE3EC}
.scallops{display:flex;padding:0 2px}
.scallops span{flex:1;min-width:0;aspect-ratio:32/40;margin-left:-2px;border:2px solid var(--plum);border-radius:0 0 50% 50%/0 0 40% 40%}
.sc-p{background:#FFB8D1}.sc-w{background:#fff}
.rod{position:absolute;left:clamp(4px,.9vw,10px);right:clamp(4px,.9vw,10px);top:clamp(4px,.6vw,8px);height:clamp(14px,1.8vw,22px);border-radius:999px;background:#FFB8D1;border:2.5px solid var(--plum)}
.shop-grid{max-width:1120px;box-sizing:border-box;padding-top:clamp(40px,6vw,80px);display:flex;flex-wrap:wrap;align-items:center;gap:clamp(32px,5vw,80px);position:relative;z-index:2}
.shop-copy{flex:1 1 320px;min-width:0;display:flex;flex-direction:column;gap:18px}
.counter-lab{font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#6E5A7B}
.minis{display:flex;gap:12px;margin-top:-8px}
.mini{width:84px;display:flex;flex-direction:column;align-items:center;gap:6px}
.mini-well{width:84px;height:84px;padding:8px;border-radius:22px;background:#fff;border:3px solid var(--rf)}
.mini-well img{width:100%;height:100%}
.mini-price{display:flex;align-items:center;gap:4px;font-family:var(--sn);font-weight:800;font-size:14px;font-variant-numeric:tabular-nums}
.shop-feat{flex:1 1 320px;min-width:0;display:flex;justify-content:center}
.counter{position:relative;width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center}
.price-tag{position:absolute;right:4%;top:6%;z-index:3;display:flex;flex-direction:column;align-items:center;transform-origin:50% 0;animation:swSwing 3s ease-in-out infinite}
.string{width:2px;height:34px;background:var(--plum)}
.tag-card{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 14px 10px 20px;background:#fff;border-radius:6px 14px 14px 6px;border:2.5px solid var(--plum);clip-path:polygon(0 50%,14px 0,100% 0,100% 100%,14px 100%);margin-left:-8px;position:relative}
.tag-card::before{content:"";position:absolute;left:5px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;box-shadow:0 0 0 2px var(--plum)}
.tp{display:flex;align-items:center;gap:5px;font-family:var(--sn);font-weight:800;font-size:22px;font-variant-numeric:tabular-nums}
.tb{font-size:12px;color:var(--cap)}
.feat-art{width:78%;position:relative;z-index:1}
.feat-art img{width:100%;height:auto}
.shelf-top{width:100%;height:28px;margin-top:-10px;border-radius:14px;background:#fff;box-shadow:0 0 0 2.5px var(--plum),0 10px 0 2.5px var(--plum);position:relative;z-index:0}
.shelf-under{width:88%;height:26px;margin-top:12px;background:var(--wood);border-radius:0 0 12px 12px;box-shadow:0 0 0 2.5px var(--plum)}
.feat-name{margin-top:22px;display:flex;align-items:center;gap:10px;font-family:var(--sn);font-weight:800;font-size:28px}

/* ---------- Swap ---------- */
.swap{background:#E3F5E7;padding:clamp(56px,8vw,112px) 0;overflow:hidden}
.swap-grid{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(40px,6vw,96px)}
.swap-copy{flex:1 1 340px;min-width:0;display:flex;flex-direction:column;gap:18px}
.swap-copy .lede{font-size:clamp(17px,1.6vw,21px)}
.swap-scene{flex:1 1 360px;min-width:0;position:relative;display:flex;justify-content:center;align-items:flex-end;gap:clamp(44px,8vw,96px);padding-top:64px}
.hops{position:absolute;top:30%;left:27%;right:27%;height:0;z-index:3}
.hop{position:absolute;top:0;width:56px;opacity:0}
.hop img{width:56px;height:56px}
.hop-r{animation:swHopR 7s ease-in-out infinite}.hop-l{animation:swHopL 7s ease-in-out infinite}
.swap-ph{position:relative;flex:none;width:clamp(138px,17vw,210px);isolation:isolate}
.buddy{position:absolute;right:-44%;bottom:6%;width:62%;height:auto;z-index:-1;transform:rotate(10deg)}
.buddy-l{right:auto;left:-44%;transform:rotate(-10deg)}
.phone.sm{width:100%;padding:6px;border-radius:32px}
.phone.sm .screen{border-radius:26px}
.phone.sm .island{top:8px;height:17px;border-radius:9px}
.tilt-l .phone{transform:rotate(-3deg)}.tilt-r .phone{transform:rotate(3deg)}
.swap-screen{display:flex;flex-direction:column;align-items:center;gap:6px;padding:36px 10px 0}
.sm-title{font-family:var(--sn);font-weight:800;font-size:15px}
.sm-friend{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--cap);margin-bottom:4px;white-space:nowrap}
.sm-lab{align-self:stretch;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--cap)}
.sm-well{width:100%;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 2px #EADCD4;padding:6px 18%}
.sm-well img{width:100%;height:auto}
.sm-yes{margin-top:4px;height:30px;padding:0 12px;border-radius:15px;background:#9FD8AE;box-shadow:inset 0 0 0 2px var(--plum);display:flex;align-items:center;font-family:var(--sn);font-weight:800;font-size:13px;white-space:nowrap}

/* ---------- Shelf ---------- */
.shelf{background:var(--cream);padding:clamp(56px,8vw,112px) 0}
.shelves{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(36px,4vw,56px) clamp(24px,3vw,40px)}
.shelf-group{display:flex;flex-direction:column;gap:18px}
.shelf-group h3{font-size:inherit;display:flex}
.shelf-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,18px);padding:0 6px 14px}
.stile{position:relative;width:100%;padding:7px;border-radius:22px;background:#fff;border:3px solid var(--rf);box-shadow:0 0 0 4px #fff,5px 7px 0 4px rgba(89,51,111,.18);cursor:pointer;display:flex;flex-direction:column;gap:6px;text-align:left;-webkit-tap-highlight-color:transparent}
.stile.f-rare{box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px var(--rf),0 0 0 4px #fff,5px 7px 0 4px rgba(89,51,111,.18)}
.stile.f-epic{border-width:4px;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px var(--rf),0 0 0 4px #fff,5px 7px 0 4px rgba(89,51,111,.18)}
.stile.f-legendary{border-width:5px;box-shadow:inset 0 0 0 3px #fff,inset 0 0 0 5px var(--rf),inset 0 0 0 8px #fff,inset 0 0 0 10px var(--rf),0 0 0 4px #fff,5px 7px 0 4px rgba(89,51,111,.18)}
.swell{position:relative;display:block;aspect-ratio:1/.92;border-radius:15px;background:var(--cream)}
.f-legendary .swell{background:#FFF6DC}
.sq-tap{position:absolute;inset:8% 10% 4%;display:block;transform-origin:50% 92%}
.f-legendary .sq-tap{inset:5% 4% 3%}
.sq-tap img{width:100%;height:100%;object-fit:contain;object-position:50% 100%}
.sname{font-family:var(--sn);font-weight:800;font-size:clamp(13px,1.3vw,16px);line-height:1.15;padding:0 3px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gem{position:absolute;width:18px;height:18px;background:#fff;display:flex;align-items:center;justify-content:center;z-index:2}
.gem i{width:62%;height:62%;background:var(--ri)}
.f-epic .gem,.f-epic .gem i{clip-path:polygon(25% 6%,75% 6%,100% 50%,75% 94%,25% 94%,0 50%)}
.f-legendary .gem,.f-legendary .gem i,.crown i{clip-path:polygon(50% 0%,64.2% 15.8%,85.4% 14.6%,84.2% 35.8%,100% 50%,84.2% 64.2%,85.4% 85.4%,64.2% 84.2%,50% 100%,35.8% 84.2%,14.6% 85.4%,15.8% 64.2%,0% 50%,15.8% 35.8%,14.6% 14.6%,35.8% 15.8%)}
.gem-tl{top:-7.5px;left:-7.5px}.gem-tr{top:-7.5px;right:-7.5px}.gem-bl{bottom:-7.5px;left:-7.5px}.gem-br{bottom:-7.5px;right:-7.5px}
.crown{position:absolute;top:-14px;left:50%;transform:translateX(-50%);height:24px;width:40px;border-radius:12px;background:var(--rf);box-shadow:0 0 0 3px #fff;display:flex;align-items:center;justify-content:center;z-index:2}
.crown i{width:15px;height:15px;background:var(--ri)}
.plank{display:block;height:14px;border-radius:7px;background:var(--wood);box-shadow:0 0 0 2.5px var(--plum),0 6px 0 2.5px var(--plum)}
.collect{display:flex;flex-direction:column;gap:18px;align-items:flex-start;margin-top:clamp(28px,3.5vw,48px)}
.collect-line{font-family:var(--sn);font-weight:800;font-size:clamp(22px,2.4vw,28px);line-height:1.2;text-wrap:balance}
.follow{max-width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:14px 16px 14px 20px;border-radius:20px;background:#fff;box-shadow:var(--stk)}
.follow p{font-size:15px;line-height:1.4;text-wrap:pretty}
.follow strong{font-weight:600}
.socs{display:flex;gap:6px}
.soc{width:44px;height:44px;border-radius:50%;background:var(--plum);color:var(--cream);display:flex;align-items:center;justify-content:center}
.soc:hover{background:var(--plum-d);color:#fff}

/* ---------- Secret teaser ---------- */
.secret-band{position:relative;background:var(--night);color:#fff;padding:clamp(64px,9vw,120px) 0;overflow:hidden}
.star{position:absolute;background:#CDBBF5;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.star:nth-child(1){left:6%;top:14%;width:10px;height:10px;opacity:.5}.star:nth-child(2){left:18%;top:70%;width:7px;height:7px;opacity:.35}
.star:nth-child(3){left:30%;top:8%;width:6px;height:6px;opacity:.4}.star:nth-child(4){left:88%;top:12%;width:11px;height:11px;opacity:.5}
.star:nth-child(5){left:76%;top:62%;width:7px;height:7px;opacity:.35}.star:nth-child(6){left:94%;top:40%;width:6px;height:6px;opacity:.3}
.star:nth-child(7){left:60%;top:6%;width:8px;height:8px;opacity:.4}.star:nth-child(8){left:10%;top:44%;width:6px;height:6px;opacity:.3}
.star:nth-child(9){left:48%;top:88%;width:7px;height:7px;opacity:.3}
.secret-in{position:relative;display:flex;flex-direction:column;align-items:center;gap:clamp(28px,4vw,48px);text-align:center}
.secret-in .sec-head{margin:0}
.secret-tag{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 14px 0 5px;border-radius:999px;background:#CDBBF5;box-shadow:0 0 0 3px #fff;font-family:var(--sn);font-weight:800;font-size:15px;color:var(--night);transform:rotate(-3deg)}
.secret-tag .k{width:26px;height:26px;border-radius:50%;background:#4A2D86;display:flex;align-items:center;justify-content:center}
.secret-band h2{max-width:760px;font-size:clamp(36px,5.4vw,62px);line-height:1.02;color:#fff}
.secrets{width:100%;max-width:960px;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(30%,120px),1fr));gap:clamp(16px,2.4vw,28px)}
.secret{display:flex;flex-direction:column;align-items:center;gap:10px}
.s-ring{position:relative;width:100%;max-width:140px;aspect-ratio:1/1;border-radius:50%;background:#4E2C62;border:2.5px dashed rgba(205,187,245,.55);padding:14%}
.s-ring img{width:100%;height:100%}
.s-key{position:absolute;right:2%;bottom:2%;width:30px;height:30px;border-radius:50%;background:#CDBBF5;box-shadow:0 0 0 3px var(--night);display:flex;align-items:center;justify-content:center}
.s-q{font-family:var(--sn);font-weight:800;font-size:18px;color:#CDBBF5}
.riddle{transform:rotate(-1.5deg);max-width:440px;padding:18px 24px 20px;border-radius:22px;background:var(--cream);color:var(--plum);border:4px solid #fff;box-shadow:0 0 0 2.5px #1E0F29,5px 7px 0 2.5px #1E0F29;display:flex;flex-direction:column;gap:6px}
.r-n{font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--cap)}
.r-t{font-family:var(--sn);font-weight:800;font-size:clamp(22px,2.4vw,28px);line-height:1.2}

/* ---------- Stories road ---------- */
.stories{background:#FFF1D6;padding:clamp(56px,8vw,112px) 0}
.stories h2{font-size:clamp(34px,4.6vw,54px);line-height:1.04;max-width:680px}
.folk{display:block;flex:none;padding:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 2.5px var(--plum),4px 5px 0 2.5px var(--plum);animation:swFloat 3s ease-in-out infinite}
.folk img{width:108px;height:108px;max-width:none;border-radius:50%}
.stop-1 .folk{animation-delay:-.7s}.stop-2 .folk{animation-delay:-1.4s}.stop-3 .folk{animation-delay:-2.1s}
.stop-txt{display:flex;flex-direction:column;gap:3px}
.folk-name{font-family:var(--sn);font-weight:800;font-size:21px;line-height:1.1}
.folk-story{font-size:14px;line-height:1.35;color:#7A6386}
.tent{position:relative;width:140px;height:120px;flex:none}
.tent span{position:absolute;display:block}
.t-pole{left:47%;top:-22px;width:2.5px;height:28px;background:var(--plum)}
.t-flag{left:calc(47% + 2px);top:-22px;width:25px;height:17px;background:var(--butter);clip-path:polygon(0 0,100% 50%,0 100%)}
.t-roof{left:0;right:0;top:0;height:48%;clip-path:polygon(50% 0,100% 100%,0 100%);background:var(--plum)}
.t-stripes{left:3px;right:3px;top:4px;height:calc(48% - 5px);clip-path:polygon(50% 0,100% 100%,0 100%);background:repeating-linear-gradient(90deg,#FFB8D1 0 14px,#fff 14px 28px)}
.t-body{left:10%;right:10%;top:46%;bottom:0;background:#fff;border-radius:0 0 10px 10px;box-shadow:0 0 0 2.5px var(--plum)}
.t-door{left:38%;right:38%;bottom:0;height:34%;background:var(--plum);border-radius:17px 17px 0 0}
@media (min-width:700px){
  .road{position:relative;height:480px;margin:0 calc(-1 * clamp(0px,3vw,40px))}
  .road-wide{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
  .conn{display:none}
  .stop{position:absolute;width:0;height:0}
  .stop-0{left:6%;top:68.75%}.stop-1{left:27%;top:31.25%}.stop-2{left:50%;top:68.75%}.stop-3{left:73%;top:31.25%}.stop-end{left:93%;top:62.5%}
  .stop-in{position:static}
  .folk{position:absolute;left:-60px;top:-60px}
  .stop-txt{position:absolute;left:-110px;width:220px;top:72px;align-items:center;text-align:center}
  .stop-1 .stop-txt,.stop-3 .stop-txt{top:-138px}
  .stop-end .tent{position:absolute;left:-70px;top:-104px}
  .stop-end .stop-txt{top:26px}
}
@media (max-width:699px){
  .road-wide{display:none}
  .stops{display:flex;flex-direction:column}
  .conn{display:block;width:100%;height:72px;overflow:visible}
  .stop-0 .conn{display:none}
  .stop-in{position:relative;z-index:1;display:flex;align-items:center;gap:14px;padding-left:calc(22% - 51px)}
  .stop-1 .stop-in,.stop-3 .stop-in{flex-direction:row-reverse;padding:0 calc(22% - 51px) 0 0;text-align:right}
  .stop-txt{flex:1;min-width:0}
  .folk{padding:5px;box-shadow:0 0 0 2.5px var(--plum),3px 4px 0 2.5px var(--plum)}
  .folk img{width:92px;height:92px}
  .folk-name{font-size:20px}
  .stop-end .stop-in{flex-direction:column;align-items:center;gap:6px;padding:26px 0 0;text-align:center}
  .stop-end .tent{width:128px;height:110px}
  .stop-end .stop-txt{align-items:center}
}

/* ---------- Parents ---------- */
.parents{background:#fff;padding:clamp(48px,6vw,88px) 0}
.p-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:12px 24px}
.parents h2{font-size:clamp(28px,3.4vw,40px);line-height:1.1}
.p-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;font-size:16px}
.p-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:12px;margin-top:clamp(22px,3vw,32px)}
.p-list li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;background:var(--cream);font-size:16px;font-weight:500;line-height:1.35;text-wrap:pretty}
.p-ic{flex:none;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 2px #EADCD4;display:flex;align-items:center;justify-content:center}

/* ---------- Footer ---------- */
.foot{background:var(--plum);color:var(--cream);padding:clamp(48px,6vw,80px) 0 32px}
.f-top{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:32px}
.f-brand,.f-social{display:flex;flex-direction:column;gap:18px}
.f-social{gap:14px}
.f-logo{display:flex;align-items:center;gap:12px;font-family:var(--sn);font-weight:800;font-size:30px}
.f-logo img{width:52px;height:52px;border-radius:14px;box-shadow:0 0 0 2.5px var(--cream)}
.f-handle{display:flex;align-items:center;gap:10px;font-family:var(--sn);font-weight:800;font-size:20px}
.f-handle .at{font-family:var(--lx);font-weight:600}
.soc-pills{display:flex;flex-wrap:wrap;gap:8px}
.soc-pill{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 16px 0 6px;border-radius:999px;background:#6B4381;color:var(--cream);text-decoration:none;font-size:14px;font-weight:600}
.soc-pill:hover{background:#7A4E92;color:#fff}
.soc-ic{width:32px;height:32px;border-radius:50%;background:var(--cream);color:var(--plum);display:flex;align-items:center;justify-content:center}
.f-bot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 24px;margin-top:36px;padding-top:20px;border-top:1.5px solid rgba(252,242,235,.2);font-size:14px}
.foot a{color:var(--cream)}
.f-made{color:#E6D8F2!important;min-height:44px;display:inline-flex;align-items:center}
.f-links{display:flex;gap:4px 20px;flex-wrap:wrap}
.f-links a{min-height:44px;display:inline-flex;align-items:center}

/* ---------- 404 ---------- */
.nf{background:var(--cream);padding:48px 0 96px}
.nf-in{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.nf h1{font-size:clamp(40px,6vw,64px)}
.nf-art{width:160px;height:160px}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;background:var(--plum);color:#fff;text-decoration:none;font-family:var(--sn);font-weight:800;font-size:18px}
.btn:hover{color:#fff;background:var(--plum-d)}

/* ---------- narrow (< 700px, the board's breakpoint) ---------- */
@media (max-width:699px){
  .how-stage{background:none;border-radius:0;margin:0;padding:0;position:relative}
  .how-phones{position:sticky;top:0;z-index:2;display:grid;justify-items:center;padding:12px 0 20px;background:#fff;gap:14px}
  .how-phones .phone{grid-area:1/1;width:200px;padding:7px;border-radius:36px;transform:none;visibility:hidden;opacity:0;transition:opacity .26s,visibility 0s .26s}
  .how-phones .phone .screen{border-radius:29px}
  .how-phones .phone.on{visibility:visible;opacity:1;transition:opacity .26s}
  .how-phones .island{top:9px;height:20px;border-radius:10px}
  .how-pips{display:flex;gap:8px;grid-area:2/1}
  .how-pips i{display:block;width:8px;height:8px;border-radius:4px;background:#E2CEC4;transition:width .26s}
  .how-pips i.on{width:22px;background:var(--plum)}
  .how-steps{display:block;margin:0}
  .how-steps li{width:auto;min-height:300px;padding:8px 4px 0;text-align:left;opacity:.35;transition:opacity .3s;display:flex;flex-direction:column;gap:8px}
  .how-steps li.on{opacity:1}
  .how-steps li:last-child{min-height:220px}
  .step-n{display:block;font:600 12px ui-monospace,Menlo,monospace;color:var(--cap)}
  .step-t{font-size:28px;line-height:1.1}
  .scallops span:nth-child(n+12){display:none}
}
@media (max-width:480px){
  .sm-well{padding:4px 27%}
  .swap-screen{padding-top:30px;gap:4px}
  .sm-friend{margin-bottom:2px}
}
@media (max-width:360px){
  .swap-scene{gap:28px}
}

/* ---------- motion (board spec) ---------- */
@keyframes swFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes swSwing{0%,100%{transform:rotate(8deg) translateY(0)}50%{transform:rotate(8deg) translateY(-6px)}}
@keyframes swBoop{0%{opacity:0;transform:translate(0,0) scale(.5)}15%{opacity:1;transform:translate(calc(var(--dx) * .3),-30px) scale(1.05)}100%{opacity:0;transform:translate(var(--dx),-170px) scale(.8)}}
@keyframes swCombo{0%{opacity:0;transform:translateX(-50%) scale(.6)}15%{opacity:1;transform:translateX(-50%) scale(1.08)}25%{transform:translateX(-50%) scale(1)}80%{opacity:1;transform:translateX(-50%) scale(1)}100%{opacity:0;transform:translateX(-50%) translateY(-16px)}}
@keyframes swDrop{0%{opacity:0;transform:translateY(-60px) rotate(-4deg)}60%{opacity:1;transform:translateY(6px) rotate(1deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes swHopR{0%{left:0;transform:translate(-50%,0);opacity:0}4%{opacity:1}20%{transform:translate(-50%,-56px)}36%{left:100%;transform:translate(-50%,0);opacity:1}42%{left:100%;opacity:0}100%{left:100%;opacity:0}}
@keyframes swHopL{0%,50%{left:100%;transform:translate(-50%,0);opacity:0}54%{opacity:1}70%{transform:translate(-50%,-56px)}86%{left:0;transform:translate(-50%,0);opacity:1}92%,100%{left:0;opacity:0}}
@keyframes swPop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.js .js-reveal .reveal:not(.in){opacity:0}
.js .reveal.in{opacity:1;animation:swPop .26s cubic-bezier(.3,1.4,.5,1) both;animation-delay:var(--d,0ms)}
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}

@media (prefers-reduced-motion:reduce){
  /* Board spec: static final state; squish still works as a tiny scale (done in JS via WAAPI). */
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1}
  .hop{display:none}
  .price-tag{transform:rotate(8deg)}
  .combo{transform:translateX(-50%)}
}
@media print{.hero-play,.how,.swap-scene,.sound-btn{display:none}}