/* The Pick & Mix Wall */
.pm-hero{position:relative;padding:58px 0 34px;text-align:center;background:radial-gradient(ellipse at 50% 0,rgba(255,95,162,.28),transparent 62%),var(--maroon-deep);overflow:hidden}
.pm-hero .kick{margin:0;font:700 13px var(--label);letter-spacing:.3em;text-transform:uppercase;color:var(--butter)}
.pm-hero h1{margin:10px 0 0;font:400 clamp(44px,7.4vw,96px)/.95 "Shrikhand","Limelight",cursive;color:#fff;text-shadow:4px 4px 0 var(--red),8px 8px 0 var(--shadow);letter-spacing:.01em}
.pm-hero .lede{max-width:58ch;margin:18px auto 0;font-size:clamp(16px,1.5vw,19px);color:var(--muted);text-wrap:balance}
.pm-hero .lede b{color:var(--popcorn)}
.pm-presets{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:26px auto 0;max-width:900px}
.pm-presets button{cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:2.5px solid var(--popcorn);background:var(--popcorn);color:var(--maroon-ink);border-radius:30px;padding:10px 18px 8px;box-shadow:3px 3px 0 var(--shadow);transition:transform .12s}
.pm-presets button:hover{transform:translate(-2px,-2px) rotate(-1deg)}
.pm-presets b{font:700 14px var(--label);letter-spacing:.1em;text-transform:uppercase}
.pm-presets small{font:500 12px var(--body);opacity:.7}
.pm-presets .lab{align-self:center;font:700 12px var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-right:4px}
html[data-world="candy"] .pm-hero{background:radial-gradient(ellipse at 50% 0,#fff,transparent 62%),#FFD9EA}
html[data-world="candy"] .pm-hero h1{color:#FF3D8B;text-shadow:4px 4px 0 #3A1152}
html[data-world="candy"] .pm-presets button{background:#fff;border-color:#3A1152;box-shadow:3px 3px 0 #3A1152}

.pm{padding:28px 0 90px}
.pm-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:34px;align-items:start}
.pm-tools{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px}
.pm-filters{display:flex;gap:7px;flex-wrap:wrap}
.pm-filters button{cursor:pointer;border:2px solid var(--line);background:none;color:var(--popcorn);border-radius:20px;padding:8px 14px 6px;font:700 12px var(--label);letter-spacing:.12em;text-transform:uppercase}
.pm-filters button[aria-pressed=true]{background:var(--popcorn);color:var(--maroon-ink);border-color:var(--popcorn)}
html[data-world="candy"] .pm-filters button[aria-pressed=true]{background:#FF3D8B;border-color:#FF3D8B;color:#fff}
.pm-search{flex:1;min-width:180px;font:500 15px var(--body);padding:11px 16px;border-radius:24px;border:2px solid var(--line);background:rgba(255,255,255,.06);color:var(--popcorn)}
.pm-search::placeholder{color:var(--muted)}
.pm-count{font:700 12px var(--label);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* jars */
.pm-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:22px 16px}
.pm-jar{position:relative}
.pm-scoop{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;align-items:center;width:100%;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
.pm-scoop:focus-visible .glass{outline:3px solid var(--butter);outline-offset:3px}
.pm-scoop .lid{width:64%;height:14px;border-radius:5px 5px 2px 2px;background:var(--lid);border:2.5px solid var(--shadow);border-bottom:0;box-shadow:inset 0 -4px 0 rgba(0,0,0,.18)}
.pm-scoop .glass{position:relative;width:100%;aspect-ratio:1/1.05;border-radius:22px 22px 30px 30px;background:linear-gradient(105deg,rgba(255,255,255,.98),rgba(255,255,255,.86));border:3px solid rgba(255,255,255,.9);box-shadow:inset 8px 0 0 rgba(255,255,255,.7),inset -10px -8px 18px rgba(0,0,0,.08),4px 5px 0 var(--shadow);overflow:hidden;display:grid;place-items:center;transition:transform .12s}
.pm-scoop .glass::after{content:"";position:absolute;left:10%;top:8%;width:14%;height:62%;border-radius:20px;background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,0));pointer-events:none}
.pm-scoop .glass img{width:92%;height:92%;object-fit:contain}
.pm-scoop:active .glass{transform:scale(.95) rotate(-2deg)}
.pm-scoop .label{margin-top:-14px;position:relative;z-index:1;max-width:96%;background:var(--popcorn);color:var(--maroon-ink);border:2px solid var(--shadow);border-radius:6px;padding:5px 8px 4px;font:700 11.5px/1.2 var(--body);text-align:center;transform:rotate(-1.5deg);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pm-scoop .oz{position:absolute;top:8px;right:-4px;z-index:2;min-width:44px;padding:5px 8px 3px;border-radius:14px;background:var(--red);color:#fff;font:700 12px var(--label);letter-spacing:.04em;border:2px solid var(--shadow);transform:scale(0) rotate(8deg);transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.pm-jar.has .oz{transform:scale(1) rotate(8deg)}
.pm-jar.has .glass{border-color:var(--butter)}
.pm-about{position:absolute;top:18px;left:-4px;z-index:2;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--maroon-ink);color:var(--popcorn);font:700 12px/1 Georgia,serif;font-style:italic;text-decoration:none;border:1.5px solid var(--line);opacity:.0;transition:opacity .15s}
.pm-jar:hover .pm-about,.pm-about:focus{opacity:1}
@media (hover:none){.pm-about{opacity:.8}}
.pm-none{color:var(--muted);text-align:center;padding:40px 0}

/* the bag side */
.pm-side{position:sticky;top:calc(var(--hh,90px) + 14px);background:var(--maroon-ink);border:3px solid var(--butter);border-radius:20px;box-shadow:7px 7px 0 var(--shadow);padding:18px 18px 16px;display:flex;flex-direction:column;gap:12px;max-height:calc(100dvh - var(--hh,90px) - 28px);overflow:auto}
html[data-world="candy"] .pm-side{background:#fff;border-color:#3A1152;box-shadow:7px 7px 0 #3A1152}
.pm-side h2{margin:0;font:700 14px var(--label);letter-spacing:.2em;text-transform:uppercase;color:var(--butter)}
html[data-world="candy"] .pm-side h2{color:#FF3D8B}
.pm-name{font:700 18px var(--body);padding:10px 12px;border-radius:10px;border:2px dashed var(--line);background:transparent;color:var(--popcorn);width:100%}
.pm-name::placeholder{color:var(--muted);font-weight:500}
.pm-stage{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
/* a clear candy bag with a twist tie */
.pm-bagart{position:relative;height:190px}
.pm-bagart .tie{position:absolute;left:50%;top:0;width:46px;height:16px;transform:translateX(-50%);background:var(--red);border-radius:8px;border:2px solid var(--shadow);z-index:2}
.pm-bagart .tie::before,.pm-bagart .tie::after{content:"";position:absolute;top:-10px;width:22px;height:14px;border:2px solid rgba(255,255,255,.65);border-radius:50% 50% 0 0;border-bottom:0}
.pm-bagart .tie::before{left:-6px;transform:rotate(-20deg)}.pm-bagart .tie::after{right:-6px;transform:rotate(20deg)}
.pm-bagart .body{position:absolute;left:6%;right:6%;top:12px;bottom:0;border-radius:24% 24% 16px 16px/10% 10% 16px 16px;background:linear-gradient(100deg,rgba(255,255,255,.26),rgba(255,255,255,.08) 40%,rgba(255,255,255,.2));border:2.5px solid rgba(255,255,255,.55);overflow:hidden;box-shadow:inset 6px 0 0 rgba(255,255,255,.18)}
html[data-world="candy"] .pm-bagart .body{background:linear-gradient(100deg,rgba(58,17,82,.08),rgba(58,17,82,.02) 40%,rgba(58,17,82,.06));border-color:rgba(58,17,82,.35)}
.pm-fill{position:absolute;inset:0}
.pm-fill .pc{position:absolute;width:22%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:#fff;border:1.5px solid rgba(0,0,0,.18);animation:pmDrop .45s cubic-bezier(.3,1.4,.5,1) both}
.pc img{width:100%;height:100%;object-fit:cover;transform:scale(1.9)}
@keyframes pmDrop{from{transform:translateY(-120px)}}
@media (prefers-reduced-motion:reduce){.pm-fill .pc{animation:none}}
.pm-bagart.empty .body::after{content:"scoop me";position:absolute;inset:0;display:grid;place-items:center;font:400 22px "Shrikhand",cursive;color:var(--muted);transform:rotate(-8deg)}
/* the scale */
.pm-scale{text-align:center}
.pm-scale svg{width:100%;max-width:170px;display:block;margin:0 auto}
.pm-needle{transform-origin:85px 88px;transition:transform .35s cubic-bezier(.3,1.5,.5,1)}
.pm-read{margin-top:4px}
.pm-read b{display:block;font:700 26px var(--label);letter-spacing:.02em}
.pm-read span{font:700 18px var(--label);color:var(--butter)}
html[data-world="candy"] .pm-read span{color:#FF3D8B}
.pm-hint{margin:0;font-size:14px;color:var(--muted);text-align:center;min-height:2.6em}
.pm-picks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pm-picks li{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;font:600 14px/1.25 var(--body)}
.pm-picks .pc{display:block;width:36px;height:36px;border-radius:50%;overflow:hidden;background:#fff}
.pm-picks .none{display:block;color:var(--muted);text-align:center;font-weight:500;padding:6px}
.pm-picks .nb-step output{min-width:44px;font-size:13px}
.pm-picks .nb-step button{width:28px;height:28px}
.pm-actions{display:grid;gap:8px}
.pm-actions .nb-go{cursor:pointer;width:100%}
.pm-actions .nb-go:disabled{opacity:.45;cursor:not-allowed}
.pm-clear{background:none;border:0;color:var(--muted);font:700 12px var(--label);letter-spacing:.14em;text-transform:uppercase;text-decoration:underline;cursor:pointer}
.pm-others{margin:0;font-size:13px;color:var(--muted);text-align:center}
.pm-how{list-style:none;margin:4px 0 0;padding:12px 0 0;border-top:1.5px dashed var(--line);display:grid;gap:6px;font-size:13px;color:var(--muted)}
.pm-how li::before{content:"\2605  ";color:var(--butter)}
.pm-sheetx{display:none}
.pm-mini{display:none}
.pm-fly{position:fixed;z-index:99;width:32px;height:32px;border-radius:50%;object-fit:cover;background:#fff;pointer-events:none;box-shadow:0 0 0 2px var(--shadow)}

@media (max-width:900px){
  .pm-grid{grid-template-columns:1fr}
  .pm-side{position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;border-radius:20px 20px 0 0;border-width:3px 0 0;max-height:82dvh;transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.8,.2,1);padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .pm-side.open{transform:none}
  .pm-sheetx{display:block;position:absolute;top:12px;right:14px;background:none;border:1.5px solid var(--line);color:var(--popcorn);border-radius:8px;padding:7px 10px 5px;font:700 11px var(--label);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
  .pm-mini{display:flex;position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:35;align-items:center;gap:12px;padding:10px 14px;border-radius:16px;border:2.5px solid var(--butter);background:var(--maroon-ink);color:var(--popcorn);box-shadow:4px 4px 0 var(--shadow);cursor:pointer;font:700 14px var(--label);letter-spacing:.08em;text-transform:uppercase}
  html[data-world="candy"] .pm-mini{background:#fff;border-color:#3A1152}
  .pm-mini svg{width:30px;height:30px;flex:none}
  .pm-mini .w{flex:1;text-align:left}
  .pm-mini .go{background:var(--red);color:#fff;border-radius:10px;padding:9px 12px 7px;font-size:12px}
  .pm-wall{grid-template-columns:repeat(3,1fr);gap:18px 10px}
  .pm{padding-bottom:170px}
  .pm-presets{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;margin-inline:-16px;padding:4px 16px 8px;scrollbar-width:none}
  .pm-presets::-webkit-scrollbar{display:none}
  .pm-presets button{flex:none}
  .pm-presets .lab{display:none}
}
@media (max-width:420px){.pm-scoop .label{font-size:10.5px}.pm-wall{gap:16px 8px}}