/* Sonic Protocol: mobile-first interaction layer (additive, content unchanged) */
:root{--bnav:68px;--safe-b:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:76px}
body{-webkit-font-smoothing:antialiased}
::selection{background:var(--y)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:12px}

/* scroll progress */
.sp-progress{position:fixed;left:0;top:0;height:4px;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--y2),var(--coral),var(--violet));z-index:60;pointer-events:none}

/* compact header after scroll */
.top{transition:box-shadow .25s,background .25s}
.top.is-scrolled{box-shadow:0 8px 24px -16px rgba(42,36,56,.45);background:rgba(255,246,232,.94)}
.logo i{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}
.logo:active i{transform:rotate(-12deg) scale(.92)}
.nav a{position:relative;transition:background .2s}
.nav a.is-active{background:var(--ink);color:#fff}

/* bottom tab bar (phones) */
.bnav{position:fixed;left:10px;right:10px;bottom:calc(10px + var(--safe-b));z-index:70;display:flex;justify-content:space-around;gap:2px;background:rgba(42,36,56,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:24px;padding:6px;box-shadow:0 14px 34px -10px rgba(42,36,56,.6);transition:transform .35s cubic-bezier(.2,.9,.3,1.2)}
.bnav.is-hidden{transform:translateY(calc(100% + 24px))}
.bnav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border-radius:18px;color:rgba(255,246,232,.72);text-decoration:none;font-weight:600;font-size:11.5px;letter-spacing:.02em;-webkit-tap-highlight-color:transparent;transition:background .2s,color .2s,transform .15s}
.bnav a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.bnav a:active{transform:scale(.92)}
.bnav a.is-active{background:var(--y);color:var(--ink)}
.bnav a.is-active svg{transform:translateY(-1px) scale(1.08)}
@media(min-width:860px){.bnav{display:none}}
@media(max-width:859px){
  body{padding-bottom:calc(var(--bnav) + 24px + var(--safe-b))}
  .top .btn--sm{padding:9px 14px}
  .toast{bottom:calc(var(--bnav) + 26px + var(--safe-b))}
  .lab{bottom:calc(var(--bnav) + 22px + var(--safe-b))}
  .to-top{bottom:calc(var(--bnav) + 26px + var(--safe-b))}
}

/* touch targets & press feedback */
.btn,.tabs button,.filters button,.presets button,.qty button{min-height:44px;touch-action:manipulation}
.filters button{min-height:40px}
.swatches{gap:10px}
.swatches button{width:30px;height:30px;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.swatches button:active{transform:scale(.85)}
.swatches button[aria-pressed=true]{transform:scale(1.12)}
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn .rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.55);transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none;z-index:-1}
.btn--y .rip,.btn:not(.btn--ink) .rip{background:rgba(42,36,56,.14)}
@keyframes rip{to{transform:scale(1);opacity:0}}
.input{font-size:16px;min-height:50px}

/* hero */
.hero h1 .hl{animation:wob 4s ease-in-out infinite}
@keyframes wob{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(1.5deg) translateY(-2px)}}
.stage .card{transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s}
.stage.is-dragging .card{transition:transform .08s linear}
.tap-hint{animation:hintb 2.4s ease-in-out infinite}
@keyframes hintb{0%,100%{transform:translateX(-50%)}50%{transform:translateX(-50%) translateY(-5px)}}
.counter{transition:transform .2s}
.counter:active{transform:translateY(2px)}
@media(max-width:520px){
  .hero{padding-top:18px}
  .hero .ctas{display:grid;grid-template-columns:1fr;gap:10px}
  .hero .ctas .btn{width:100%}
  .counters{gap:6px}
  .counter{padding:9px 9px;border-radius:16px}
  .counter small{font-size:10px}
}

/* sections: tighter on phones */
@media(max-width:620px){
  section{padding:44px 0}
  .sec-h{margin-bottom:22px}
  .sec-h p{font-size:16.5px}
  .panel{padding:16px;border-radius:24px}
}

/* swipe rails on phones: ladder, tiers, rules, anatomy list */
.rail-dots{display:none}
@media(max-width:759px){
  .ladder,.tiers,.rules{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:12px;margin-inline:-16px;padding:14px 16px 10px;scrollbar-width:none;scroll-padding-inline:16px}
  .ladder::-webkit-scrollbar,.tiers::-webkit-scrollbar,.rules::-webkit-scrollbar{display:none}
  .ladder>*{flex:0 0 46%;scroll-snap-align:start}
  .tiers>*{flex:0 0 72%;scroll-snap-align:center}
  .rules>*{flex:0 0 84%;scroll-snap-align:center}
  .rail-dots{display:flex;justify-content:center;gap:7px;margin-top:6px}
  .rail-dots i{width:8px;height:8px;border-radius:9px;background:rgba(42,36,56,.22);transition:width .3s,background .3s}
  .rail-dots i.on{width:22px;background:var(--ink)}
}

/* claim: steps animate in, active step glow */
.step .n{transition:transform .4s cubic-bezier(.3,1.6,.5,1),background .3s}
.step.lit .n{transform:rotate(-8deg) scale(1.08);background:var(--y2)}
.prompt{max-height:none}

/* deck grid press */
.grid .slot{transition:transform .15s}
.grid .slot:active{transform:scale(.97)}
@media(max-width:420px){.deck-bar{gap:10px}.filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px}.filters::-webkit-scrollbar{display:none}.filters button{flex:0 0 auto}}

/* fusion sheet: drag handle */
.sheet-in:before{content:"";position:absolute;top:8px;left:50%;width:44px;height:5px;border-radius:9px;background:rgba(42,36,56,.25);transform:translateX(-50%)}
@media(min-width:640px){.sheet-in:before{display:none}}
.sheet:not([hidden]) .sheet-in{animation:sheetUp .45s cubic-bezier(.2,.9,.3,1.1)}
@keyframes sheetUp{from{transform:translateY(60%);opacity:.4}to{transform:none;opacity:1}}
.sheet-in{padding-bottom:calc(26px + var(--safe-b))}

/* faq smooth */
.faq details{transition:background .2s,transform .15s}
.faq details[open]{background:var(--paper)}
.faq summary{min-height:28px;align-items:center}
.faq summary:after{transition:transform .3s}
.faq details[open] summary:after{transform:rotate(180deg)}
.faq details p{animation:fadeIn .35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* staggered reveal */
.rv{transition-delay:var(--d,0s)}

/* back to top */
.to-top{position:fixed;right:16px;bottom:22px;z-index:65;width:48px;height:48px;border-radius:50%;border:2.5px solid var(--ink);background:var(--y);box-shadow:0 4px 0 var(--ink);font-size:22px;font-weight:700;display:grid;place-items:center;opacity:0;transform:translateY(16px) scale(.8);pointer-events:none;transition:opacity .25s,transform .3s cubic-bezier(.3,1.6,.5,1)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}
@media(max-width:859px){.to-top{right:14px;width:44px;height:44px}}

/* sound-on chip */
.snd{display:inline-flex;align-items:center;gap:6px}
.snd .eqb{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.snd .eqb i{width:3px;background:currentColor;border-radius:2px;height:4px}
.snd.on .eqb i{animation:eqb .8s ease-in-out infinite}
.snd.on .eqb i:nth-child(2){animation-delay:.15s}.snd.on .eqb i:nth-child(3){animation-delay:.3s}
@keyframes eqb{0%,100%{height:4px}50%{height:14px}}

@media(prefers-reduced-motion:reduce){.bnav,.to-top,.sp-progress{transition:none}}
@media(max-width:759px){.ladder .rv,.tiers .rv,.rules .rv{opacity:1;transform:none}}
/* announcement strip */
.announce{position:relative;z-index:55;display:flex;align-items:center;justify-content:center;gap:8px;padding:7px 14px;padding-top:calc(7px + env(safe-area-inset-top,0px));background:var(--ink);color:var(--cream);font:600 12.5px/1.35 var(--font);text-align:center;letter-spacing:.01em}
.announce b{color:var(--y);font-family:var(--mono);font-weight:700}
.announce-dot{flex:none;width:7px;height:7px;border-radius:50%;background:var(--y);box-shadow:0 0 0 0 rgba(255,216,77,.7);animation:apulse 1.8s ease-out infinite}
@keyframes apulse{to{box-shadow:0 0 0 8px rgba(255,216,77,0)}}
@media(min-width:860px){.announce{font-size:13.5px}}