/* Cute layer: sticker buttons, squishy presses, pop bursts. Keeps the brand palette. */
:root{--pop:cubic-bezier(.34,1.56,.64,1);--sticker:#3A2216;--pink:#FFB8C6}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--sticker:#F7EFDF}}
:root[data-theme="dark"]{--sticker:#F7EFDF}
button,.btn,.opt,.card,.tile,.nav a,.cart-btn,.stepper button{-webkit-tap-highlight-color:transparent}
/* chunky sticker buttons */
.btn{border:2.5px solid var(--sticker)!important;box-shadow:0 4px 0 var(--sticker);transition:transform .25s var(--pop),box-shadow .15s}
.btn.ghost{background:var(--surface)}
.btn:not(:disabled):hover{transform:translateY(-2px) rotate(-1deg);box-shadow:0 6px 0 var(--sticker)}
.btn:not(:disabled):active{transform:translateY(4px) scale(.96,.9);box-shadow:0 0 0 var(--sticker);transition-duration:.08s}
.btn:disabled{box-shadow:none}
/* option cards pop and wiggle */
.opt{border-radius:24px;transition:transform .3s var(--pop),border-color .15s,background .15s,box-shadow .15s}
.opt:hover{transform:translateY(-3px) rotate(-.8deg)}
.opt:active{transform:scale(.92,.88) rotate(1deg)!important}
.opt.on{box-shadow:0 4px 0 var(--green);animation:cuteOn .45s var(--pop)}
.opt .tick{animation:cuteTick .4s var(--pop)}
@keyframes cuteOn{0%{transform:scale(.88,1.08)}55%{transform:scale(1.07,.94)}100%{transform:none}}
@keyframes cuteTick{from{transform:scale(0) rotate(-90deg)}to{transform:none}}
/* cards and tiles */
.card{border-radius:32px;border:2.5px solid var(--sticker);box-shadow:0 5px 0 var(--sticker);transition:transform .3s var(--pop),box-shadow .2s}
.card:hover{transform:translateY(-5px) rotate(-.6deg);box-shadow:0 10px 0 var(--sticker)}
.card:active{transform:scale(.97)}
.card-img canvas{transition:transform .4s var(--pop)}
.card:hover .card-img canvas{transform:scale(1.06) rotate(3deg)}
.tile{border:2.5px solid var(--sticker);transition:transform .3s var(--pop)}
.tile:hover{transform:translateY(-4px) rotate(2deg)}
.tile:active{transform:scale(.9)}
.tile:nth-child(3n) img{background:#FFE3EA}.tile:nth-child(3n+1) img{background:#FFF1BF}.tile:nth-child(3n+2) img{background:#DFF3D8}
.nav a,.cart-btn,.stepper button,.x{transition:transform .25s var(--pop)}
.nav a:active,.cart-btn:active,.stepper button:active,.x:active{transform:scale(.88)}
.cart-btn{border:2.5px solid var(--sticker);box-shadow:0 3px 0 var(--sticker)}
.badge{border:2px solid var(--sticker)}
.badge.pulse{animation:cuteBadge .6s var(--pop)}
@keyframes cuteBadge{0%{transform:scale(1)}30%{transform:scale(1.7) rotate(-15deg)}60%{transform:scale(.9) rotate(8deg)}100%{transform:none}}
.toast{border:2.5px solid var(--sticker);box-shadow:0 4px 0 var(--sticker);background:var(--mango);color:var(--on-mango);transition:opacity .2s,transform .35s var(--pop)}
.toast.show{transform:translate(-50%,0) rotate(-1deg)}
.panel{animation:cuteSheet .45s var(--pop)}
@keyframes cuteSheet{from{transform:translateY(60px) scale(.96);opacity:0}}
.ci{border:2.5px solid var(--sticker);border-radius:24px;animation:cuteIn .4s var(--pop)}
@keyframes cuteIn{from{transform:scale(.85);opacity:0}}
.hero-art canvas,.stage canvas{animation:cuteFloat 4s ease-in-out infinite}
@keyframes cuteFloat{50%{transform:translateY(-6px) rotate(.8deg)}}
/* burst particles */
.cute-fx{position:fixed;left:0;top:0;z-index:100;pointer-events:none;font-size:20px;line-height:1;will-change:transform,opacity}
.cute-fly{position:fixed;z-index:100;pointer-events:none;width:46px;height:46px;border-radius:50%;background:var(--mango);border:2.5px solid var(--sticker);display:grid;place-items:center;font-size:24px}
@media (prefers-reduced-motion:reduce){
  .btn,.opt,.card,.tile,.panel,.ci,.card-img canvas,.hero-art canvas,.stage canvas,.opt.on,.opt .tick,.badge.pulse{animation:none!important;transition:none!important}
  .cute-fx,.cute-fly{display:none}
}