/* ================= PaperPals design system ================= */
:root{
  --bg:#140F2E; --bg2:#1E1745; --bg3:#2A1F5C;
  --ink:#FFFFFF; --ink-2:rgba(255,255,255,.72); --ink-3:rgba(255,255,255,.48);
  --card:rgba(255,255,255,.07); --card-2:rgba(255,255,255,.11);
  --line:rgba(255,255,255,.13);
  --mango:#FFB23F; --coral:#FF6B6B; --mint:#3FE0B0; --sky:#4FC3FF;
  --lilac:#B98BFF; --pink:#FF7ECF; --lemon:#FFE066;
  --r-xl:32px; --r-lg:24px; --r-md:18px; --r-sm:12px;
  --shadow:0 18px 44px -18px rgba(0,0,0,.75);
  /* Rounded-first stack. On iPad/Mac this resolves to SF Pro Rounded, which is
     genuinely playful. Drop a licensed display face into --font-display below
     (Fredoka or Baloo 2 are SIL OFL and free to bundle) to lock the look on
     Android/Windows too — see the @font-face slot at the end of this file. */
  --font: ui-rounded, "SF Pro Rounded", "Fredoka", "Baloo 2", "Quicksand", "Varela Round",
          "Nunito", "Chalkboard SE", "Comic Sans MS", -apple-system, system-ui, sans-serif;
  --font-display: var(--font);
  --safe-t: env(safe-area-inset-top,0px); --safe-b: env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;font-family:var(--font);color:var(--ink);
  background:
    radial-gradient(1100px 700px at 12% -8%, #3B2A7A 0%, transparent 62%),
    radial-gradient(900px 640px at 100% 8%, #6C2E6B 0%, transparent 58%),
    radial-gradient(900px 900px at 50% 118%, #17406B 0%, transparent 60%),
    var(--bg);
  overflow:hidden; overscroll-behavior:none;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button{font-family:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3{margin:0;font-family:var(--font-display);letter-spacing:-.025em;font-weight:850}
/* sticker-style display treatment — chunky, warm, slightly playful */
.home-title,.pack-hero h2,.sticker-summary h2,.party-card h2,.splash-name{
  letter-spacing:-.035em;line-height:1.04;
  text-shadow:0 2px 0 rgba(0,0,0,.16), 0 10px 24px rgba(0,0,0,.28)}
.sec-head h2,.topbar-title,.step-copy h3{letter-spacing:-.028em}
.big-btn span,.pill-btn,.ghost-btn,.pick-btn,.tool,.seg-i,.hero-cta-text strong{
  font-family:var(--font-display);letter-spacing:-.015em}
img{max-width:100%}

/* ---------- splash ---------- */
.splash{position:fixed;inset:0;z-index:200;display:grid;place-content:center;justify-items:center;gap:2px;
  background:radial-gradient(700px 500px at 50% 38%, #3C2C82 0%, #140F2E 70%);
  transition:opacity .5s ease, visibility .5s;
  /* CSS-driven dismissal: never depends on JS running */
  animation:splashOut .5s 1.15s forwards}
@keyframes splashOut{to{opacity:0;visibility:hidden;pointer-events:none}}
.splash.gone{opacity:0;visibility:hidden;pointer-events:none}
.splash-mark{width:104px;height:104px;color:var(--lemon);animation:pop .7s cubic-bezier(.2,1.5,.4,1) both}
.splash-mark svg{width:100%;height:100%}
.splash-name{font-size:40px;font-weight:850;margin-top:14px;display:flex;gap:1px}
.splash-name i{display:inline-block;font-style:normal;animation:bop .9s cubic-bezier(.2,1.5,.4,1) both}
@keyframes bop{0%{transform:translateY(22px) rotate(0);opacity:0}
  60%{transform:translateY(-6px) rotate(var(--r));opacity:1}
  100%{transform:translateY(0) rotate(var(--r));opacity:1}}
.splash-sub{color:var(--ink-3);font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:11px;animation:rise .6s .2s both}
@keyframes pop{from{transform:scale(.5) rotate(-14deg);opacity:0}to{transform:none;opacity:1}}
@keyframes rise{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;display:none;flex-direction:column}
.screen.is-active{display:flex}
.screen.anim-in{animation:slideIn .34s cubic-bezier(.22,.9,.3,1) both}
.screen.anim-back{animation:slideBack .3s cubic-bezier(.22,.9,.3,1) both}
@keyframes slideIn{from{transform:translateX(26px);opacity:0}to{transform:none;opacity:1}}
@keyframes slideBack{from{transform:translateX(-18px);opacity:0}to{transform:none;opacity:1}}
.scroll{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:calc(var(--safe-t) + 14px) 20px calc(var(--safe-b) + 40px)}

/* ---------- topbar ---------- */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.topbar-title{flex:1;text-align:center;font-weight:800;font-size:19px}
.round-btn{width:48px;height:48px;border-radius:50%;background:var(--card);border:1px solid var(--line);
  display:grid;place-content:center;font-size:24px;font-weight:700;backdrop-filter:blur(14px);transition:transform .16s}
.round-btn:active{transform:scale(.9)}
.round-btn.back{padding-bottom:4px}
.round-btn.on{background:linear-gradient(135deg,var(--pink),var(--coral));border-color:transparent}

/* ---------- home ---------- */
.home-head{padding:6px 2px 18px}
.home-head-row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.eyebrow{margin:0 0 4px;color:var(--ink-3);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.home-title{font-size:clamp(30px,8vw,42px);font-weight:850;line-height:1.06}
.home-title em{font-style:normal;background:linear-gradient(96deg,var(--lemon),var(--mango) 40%,var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 6px 16px rgba(255,126,207,.35))}
.avatar-btn svg{width:30px;height:30px}
.avatar-btn{position:relative;width:58px;height:58px;border-radius:20px;font-size:26px;flex:0 0 auto;
  background:linear-gradient(150deg,rgba(255,255,255,.2),rgba(255,255,255,.06));border:1px solid var(--line);
  display:grid;place-content:center;box-shadow:var(--shadow);transition:transform .16s}
.avatar-btn:active{transform:scale(.92)}
.avatar-count{position:absolute;right:-6px;top:-6px;min-width:24px;height:24px;padding:0 6px;border-radius:12px;
  background:linear-gradient(135deg,var(--mango),var(--coral));color:#20122C;font-size:12px;font-weight:850;
  display:grid;place-content:center;border:2px solid #241a4d}

/* ---------- collect-stickers card ---------- */
.collect-card{margin-top:20px;width:100%;text-align:left;padding:16px;border-radius:var(--r-xl);
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(120deg,#7A45FF,#C13BE0 46%,#FF4E86);
  box-shadow:0 22px 44px -22px #C13BE0;transition:transform .18s cubic-bezier(.2,1.4,.4,1)}
.collect-card:active{transform:scale(.975)}
.collect-shine{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.34) 50%,transparent 64%);
  background-size:280% 100%;animation:sheen 3.6s 1s ease-in-out infinite}
.collect-top{display:flex;align-items:center;gap:14px}
.collect-text{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.collect-text strong{font-size:18px;font-weight:850}
.collect-text span{font-size:13px;color:rgba(255,255,255,.86);line-height:1.35;font-weight:650}
.collect-go{font-size:30px;opacity:.75;font-weight:700}
.collect-chips{display:flex;gap:7px;margin-top:13px}
.collect-chip{flex:1;padding:8px 4px;border-radius:13px;background:rgba(0,0,0,.26);text-align:center;
  display:flex;flex-direction:column;gap:1px}
.collect-chip b{font-size:16px;font-weight:850;line-height:1}
.collect-chip i{font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.76)}
.collect-chip.rainbow{background:conic-gradient(from 210deg,#FF6B6B,#FFB23F,#FFE066,#3FE0B0,#4FC3FF,#B98BFF,#FF7ECF,#FF6B6B);
  animation:holo 7s linear infinite}
.collect-chip.rainbow i,.collect-chip.rainbow b{text-shadow:0 1px 3px rgba(0,0,0,.5)}

.streak-card{margin-top:20px;display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:var(--r-lg);
  background:var(--card);border:1px solid var(--line);backdrop-filter:blur(16px)}
.streak-ring{position:relative;width:44px;height:44px;flex:0 0 auto}
.streak-ring svg{width:44px;height:44px;transform:rotate(-90deg)}
.streak-ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.ring-bg{stroke:rgba(255,255,255,.14)}
.ring-fg{stroke:url(#g) ;stroke:var(--mint);stroke-dasharray:113;stroke-dashoffset:113;transition:stroke-dashoffset .8s cubic-bezier(.2,.9,.3,1)}
.streak-ring span{position:absolute;inset:0;display:grid;place-content:center;font-size:13px;font-weight:850}
.streak-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.streak-text strong{font-size:15px}
.streak-text span{font-size:13px;color:var(--ink-3);line-height:1.35}

.hero-cta{width:100%;display:flex;align-items:center;gap:14px;padding:16px;border-radius:var(--r-xl);text-align:left;
  background:linear-gradient(120deg,#FF7A59,#FF4E86 52%,#A24BFF);box-shadow:0 22px 40px -22px #FF4E86;
  transition:transform .18s cubic-bezier(.2,1.4,.4,1)}
.hero-cta:active{transform:scale(.975)}
.hero-cta-art{width:52px;height:52px;flex:0 0 auto;border-radius:16px;background:rgba(255,255,255,.2);display:grid;place-content:center;padding:9px}
.hero-cta-art svg{width:100%;height:100%}
.hero-cta-text{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.hero-cta-text strong{font-size:17px;font-weight:800}
.hero-cta-text span{font-size:13px;color:rgba(255,255,255,.82);line-height:1.3}
.hero-chev{font-size:30px;opacity:.7;font-weight:700}

.sec{margin-top:30px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px;padding:0 2px}
.sec-head h2{font-size:22px;font-weight:850}
.sec-head h2::after{content:"";display:block;width:34px;height:5px;border-radius:3px;margin-top:5px;
  background:linear-gradient(90deg,var(--mango),var(--pink))}
.sec-note{color:var(--ink-3);font-size:13px;font-weight:600}

.pack-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.pack{position:relative;aspect-ratio:1/1.02;border-radius:var(--r-xl);padding:16px;display:flex;flex-direction:column;
  justify-content:flex-end;text-align:left;overflow:hidden;isolation:isolate;box-shadow:var(--shadow);
  transition:transform .18s cubic-bezier(.2,1.4,.4,1)}
.pack:active{transform:scale(.96)}
.pack::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 34%,rgba(10,6,26,.62))}
.pack-emo{position:absolute;top:-6px;right:-8px;font-size:74px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35));opacity:.95;z-index:-1;transform:rotate(8deg)}
.pack h3{font-size:17px;font-weight:850;line-height:1.15}
.pack p{margin:4px 0 0;font-size:12px;color:rgba(255,255,255,.72);font-weight:600}
.pack-bar{margin-top:9px;height:6px;border-radius:3px;background:rgba(0,0,0,.28);overflow:hidden}
.pack-bar i{display:block;height:100%;border-radius:3px;background:#fff;box-shadow:0 0 12px rgba(255,255,255,.7)}

.rail{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail-card{flex:0 0 132px;scroll-snap-align:start;border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);
  padding:10px;text-align:center;transition:transform .16s}
.rail-card:active{transform:scale(.95)}
.rail-thumb{aspect-ratio:1;border-radius:14px;background:#fff;padding:8px;margin-bottom:9px;display:block;overflow:hidden}
.rail-thumb svg{width:100%;height:100%}
.rail-card b{display:block;font-size:12.5px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rail-card span{font-size:11px;color:var(--ink-3);font-weight:600}
.rail-empty{color:var(--ink-3);font-size:14px;padding:18px 4px;line-height:1.5}

.home-foot{margin-top:34px;display:flex;gap:10px;flex-wrap:wrap}
.ghost-btn{flex:1;min-width:150px;padding:15px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);
  font-weight:750;font-size:14px;transition:transform .16s}
.ghost-btn:active{transform:scale(.96)}

/* ---------- pack screen ---------- */
.pack-hero{border-radius:var(--r-xl);padding:22px;margin:6px 0 22px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.pack-hero h2{font-size:26px;font-weight:850}
.pack-hero p{margin:6px 0 0;font-size:14px;color:rgba(255,255,255,.8);max-width:78%;line-height:1.45;font-weight:600}
.pack-hero .pack-emo{font-size:92px;top:-10px;right:-6px;z-index:0;opacity:.9}
.pack-hero > *{position:relative;z-index:1}

.draw-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.draw-card{border-radius:var(--r-lg);background:var(--card);border:1px solid var(--line);padding:11px;text-align:left;
  transition:transform .18s cubic-bezier(.2,1.4,.4,1);position:relative;overflow:hidden}
.draw-card:active{transform:scale(.95)}
.draw-thumb{aspect-ratio:1;border-radius:16px;background:#fff;padding:11px;display:block;margin-bottom:10px;position:relative;overflow:hidden}
.draw-thumb svg{width:100%;height:100%;display:block}
.draw-card b{display:block;font-size:14px;font-weight:800;line-height:1.2}
.draw-meta{display:flex;align-items:center;gap:6px;margin-top:5px}
.stars{font-size:11px;letter-spacing:1px;color:var(--mango)}
.steps-chip{font-size:11px;font-weight:750;color:var(--ink-3)}
.done-tick{position:absolute;top:8px;right:8px;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--mint),#22B98C);display:grid;place-content:center;font-size:14px;color:#06301f;font-weight:900;
  box-shadow:0 6px 14px -4px rgba(0,0,0,.6)}

/* ---------- detail ---------- */
.detail-stage{position:relative;margin:4px 0 18px}
.detail-paper{background:#fff;border-radius:var(--r-xl);padding:20px;aspect-ratio:1;display:block;
  width:min(100%,46vh);margin:0 auto;
  box-shadow:0 26px 50px -24px rgba(0,0,0,.8);overflow:hidden}
.detail-paper svg{width:100%;height:100%;display:block}
.detail-badges{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;justify-content:center}
.badge{padding:7px 13px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:12px;font-weight:750}

.step-strip{display:flex;gap:8px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:none}
.step-strip::-webkit-scrollbar{display:none}
.step-dot{flex:0 0 auto;min-width:46px;height:46px;border-radius:15px;background:var(--card);border:1px solid var(--line);
  display:grid;place-content:center;font-weight:850;font-size:15px;transition:.2s}
.step-dot.on{background:linear-gradient(135deg,var(--lemon),var(--mango));color:#2A1A05;border-color:transparent;transform:scale(1.06)}
.step-copy{padding:2px 2px 16px}
.step-num{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--mango)}
.step-copy h3{font-size:21px;font-weight:850;margin:6px 0 6px}
.step-copy p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.5}

.detail-actions{display:flex;gap:10px;margin-bottom:14px}
.pill-btn{flex:1;padding:15px;border-radius:var(--r-md);font-weight:800;font-size:15px;transition:transform .16s}
.pill-btn:active{transform:scale(.96)}
.pill-btn.ghost{background:var(--card);border:1px solid var(--line)}
.pill-btn.solid{background:linear-gradient(120deg,var(--mint),var(--sky));color:#06283A}
.pill-btn[disabled]{opacity:.35}
.big-btn{width:100%;padding:19px;border-radius:var(--r-lg);background:linear-gradient(120deg,#FFC24A,#FF7A59 60%,#FF4E86);
  color:#2C1200;display:flex;flex-direction:column;gap:3px;align-items:center;box-shadow:0 22px 40px -20px #FF7A59;
  transition:transform .18s cubic-bezier(.2,1.4,.4,1)}
.big-btn:active{transform:scale(.975)}
.big-btn span{font-size:19px;font-weight:850}
.big-btn small{font-size:12.5px;font-weight:700;opacity:.72}
.detail-tip{margin-top:16px;padding:14px 16px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line);
  font-size:13.5px;color:var(--ink-2);line-height:1.5}

/* ---------- photo ---------- */
.photo-drop{margin:6px 0 20px}
.photo-preview{background:#fff;border-radius:var(--r-xl);aspect-ratio:1;display:grid;place-content:center;overflow:hidden;
  box-shadow:0 26px 50px -24px rgba(0,0,0,.8);margin-bottom:14px}
.photo-preview canvas{max-width:100%;max-height:100%;display:block}
.photo-preview.empty{background:linear-gradient(150deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:2px dashed var(--line)}
.photo-preview.empty::after{content:"🖼️";font-size:64px;opacity:.5}
.pick-btn{width:100%;padding:17px;border-radius:var(--r-lg);background:var(--card-2);border:1px solid var(--line);
  font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;gap:10px;transition:transform .16s}
.pick-btn:active{transform:scale(.97)}
.photo-controls{display:flex;flex-direction:column;gap:14px}
.seg{display:flex;gap:5px;padding:5px;border-radius:var(--r-md);background:rgba(0,0,0,.26);border:1px solid var(--line)}
.seg-i{flex:1;padding:12px 8px;border-radius:13px;font-weight:800;font-size:14px;color:var(--ink-3);transition:.2s}
.seg-i.is-on{background:linear-gradient(135deg,var(--lilac),var(--pink));color:#fff}
.slider-row{display:flex;align-items:center;gap:14px;padding:12px 16px;border-radius:var(--r-md);background:var(--card);border:1px solid var(--line)}
.slider-row span{width:92px;font-size:14px;font-weight:750;flex:0 0 auto}
.slider-row b{width:28px;text-align:right;font-size:13px;color:var(--ink-3)}
input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:6px;border-radius:3px;background:rgba(255,255,255,.2);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(140deg,#fff,#DCD4FF);box-shadow:0 4px 12px rgba(0,0,0,.45);border:0}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:0}

/* ---------- gallery ---------- */
.sticker-summary{border-radius:var(--r-xl);padding:22px;margin:6px 0 20px;text-align:center;
  background:linear-gradient(130deg,#7A45FF,#FF4E86);box-shadow:var(--shadow)}
.sticker-summary h2{font-size:38px;font-weight:850}
.sticker-summary p{margin:6px 0 0;font-size:14px;color:rgba(255,255,255,.85);font-weight:650}
.tier-tally{display:flex;justify-content:center;gap:8px;margin-top:14px}
.tier-tally span{flex:1;max-width:110px;padding:8px 6px;border-radius:14px;background:rgba(0,0,0,.22);
  font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  display:flex;flex-direction:column;gap:2px;color:rgba(255,255,255,.82)}
.tier-tally b{font-size:20px;letter-spacing:-.02em}

.sticker-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:13px}
.sticker{aspect-ratio:1;border-radius:22px;position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  background:var(--card);border:1px solid var(--line);padding:20px 6px 18px}
.sticker .s-emo{font-size:40px;line-height:1;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}
.sticker .s-name{font-size:9.5px;font-weight:850;text-transform:uppercase;letter-spacing:.05em;
  text-align:center;line-height:1.2;max-width:100%;overflow:hidden;color:var(--ink-3)}
.sticker .s-rar{position:absolute;top:0;left:0;right:0;padding:4px 0;font-size:8.5px;font-weight:900;
  text-transform:uppercase;letter-spacing:.09em;text-align:center;background:rgba(0,0,0,.30);color:#fff}
.sticker.got{box-shadow:0 12px 26px -12px rgba(0,0,0,.7);animation:pop .5s cubic-bezier(.2,1.5,.4,1) both}
.sticker.got .s-name{color:rgba(30,18,6,.72)}
.sticker.locked{filter:grayscale(1);opacity:.26}
.sticker.locked .s-emo{filter:blur(1.5px)}

/* ---------- sticker finishes ---------- */
.t-paper{background:linear-gradient(150deg,#FFFDF6,#E6DFCF)}
.t-silver{background:linear-gradient(140deg,#FBFDFF 0%,#C2CCD6 24%,#FFFFFF 42%,#96A2AE 60%,#E3EAF0 82%,#AAB6C1 100%)}
.t-gold{background:linear-gradient(140deg,#FFF6C4 0%,#F2C13A 24%,#FFFCEA 42%,#DC9C1C 60%,#FFE58A 82%,#C98A12 100%)}
.t-plat{background:linear-gradient(140deg,#FFFFFF 0%,#DCE7EF 20%,#FFFFFF 38%,#A9BAC8 58%,#F6FAFD 78%,#C3D1DC 100%)}
.t-rainbow{background:conic-gradient(from 210deg,#FF6B6B,#FFB23F,#FFE066,#3FE0B0,#4FC3FF,#B98BFF,#FF7ECF,#FF6B6B)}
.t-rainbow .s-name,.t-rainbow .s-rar{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45)}
.t-rainbow .s-rar{background:rgba(0,0,0,.42)}
.t-gold .s-rar,.t-plat .s-rar{background:rgba(70,42,0,.42)}

/* ---------- glitter ----------
   Two speck layers twinkling out of phase, plus a sheen that sweeps across.
   These sit ABOVE the metallic gradient (z-index 1), with the emoji and
   labels above that (z-index 2) — at z-index -1 the sparkle was painting
   behind the sticker's own background and never showed. */
.sticker .s-emo,.sticker .s-name,.sticker .s-rar{position:relative;z-index:2}
.slot.filled .sticker{display:flex;flex-direction:column;align-items:center;justify-content:center}

.t-gold::after,.t-plat::after,.t-rainbow::after,.t-silver::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27%23fff%27%20fill-opacity%3D%271.0%27%3E%3Cpath%20d%3D%27M19%2013Q20.8%2020.2%2028%2022Q20.8%2023.8%2019%2031Q17.2%2023.8%2010%2022Q17.2%2020.2%2019%2013Z%27%2F%3E%3Cpath%20d%3D%27M72%209Q73.2%2013.8%2078%2015Q73.2%2016.2%2072%2021Q70.8%2016.2%2066%2015Q70.8%2013.8%2072%209Z%27%2F%3E%3Cpath%20d%3D%27M43%2048Q45.0%2056.0%2053%2058Q45.0%2060.0%2043%2068Q41.0%2060.0%2033%2058Q41.0%2056.0%2043%2048Z%27%2F%3E%3Cpath%20d%3D%27M88%2048.5Q89.1%2052.9%2093.5%2054Q89.1%2055.1%2088%2059.5Q86.9%2055.1%2082.5%2054Q86.9%2052.9%2088%2048.5Z%27%2F%3E%3Cpath%20d%3D%27M27%2077.5Q28.3%2082.7%2033.5%2084Q28.3%2085.3%2027%2090.5Q25.7%2085.3%2020.5%2084Q25.7%2082.7%2027%2077.5Z%27%2F%3E%3Cpath%20d%3D%27M60%2035.5Q60.9%2039.1%2064.5%2040Q60.9%2040.9%2060%2044.5Q59.1%2040.9%2055.5%2040Q59.1%2039.1%2060%2035.5Z%27%2F%3E%3Cpath%20d%3D%27M93%2081Q94.0%2085.0%2098%2086Q94.0%2087.0%2093%2091Q92.0%2087.0%2088%2086Q92.0%2085.0%2093%2081Z%27%2F%3E%3Cpath%20d%3D%27M8%2046.5Q9.1%2050.9%2013.5%2052Q9.1%2053.1%208%2057.5Q6.9%2053.1%202.5%2052Q6.9%2050.9%208%2046.5Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size:100% 100%;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.95));
  animation:twinkleA 1.9s ease-in-out infinite}
.t-gold::before,.t-plat::before,.t-rainbow::before,.t-silver::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27%23fff%27%20fill-opacity%3D%271.0%27%3E%3Cpath%20d%3D%27M34%205.5Q35.1%209.9%2039.5%2011Q35.1%2012.1%2034%2016.5Q32.9%2012.1%2028.5%2011Q32.9%209.9%2034%205.5Z%27%2F%3E%3Cpath%20d%3D%27M58%2020.5Q59.7%2027.3%2066.5%2029Q59.7%2030.7%2058%2037.5Q56.3%2030.7%2049.5%2029Q56.3%2027.3%2058%2020.5Z%27%2F%3E%3Cpath%20d%3D%27M13%2061Q14.0%2065.0%2018%2066Q14.0%2067.0%2013%2071Q12.0%2067.0%208%2066Q12.0%2065.0%2013%2061Z%27%2F%3E%3Cpath%20d%3D%27M79%2067Q80.4%2072.6%2086%2074Q80.4%2075.4%2079%2081Q77.6%2075.4%2072%2074Q77.6%2072.6%2079%2067Z%27%2F%3E%3Cpath%20d%3D%27M47%2087.5Q47.9%2091.1%2051.5%2092Q47.9%2092.9%2047%2096.5Q46.1%2092.9%2042.5%2092Q46.1%2091.1%2047%2087.5Z%27%2F%3E%3Cpath%20d%3D%27M70%2049.5Q71.1%2053.9%2075.5%2055Q71.1%2056.1%2070%2060.5Q68.9%2056.1%2064.5%2055Q68.9%2053.9%2070%2049.5Z%27%2F%3E%3Cpath%20d%3D%27M24%2036.5Q25.3%2041.7%2030.5%2043Q25.3%2044.3%2024%2049.5Q22.7%2044.3%2017.5%2043Q22.7%2041.7%2024%2036.5Z%27%2F%3E%3Cpath%20d%3D%27M92%2027.5Q92.9%2031.1%2096.5%2032Q92.9%2032.9%2092%2036.5Q91.1%2032.9%2087.5%2032Q91.1%2031.1%2092%2027.5Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  background-size:100% 100%;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.95));
  animation:twinkleB 2.7s .45s ease-in-out infinite}
@keyframes twinkleA{0%,100%{opacity:.5;transform:scale(.9) rotate(-4deg)}
  50%{opacity:1;transform:scale(1.08) rotate(4deg)}}
@keyframes twinkleB{0%,100%{opacity:1;transform:scale(1.06) rotate(3deg)}
  45%{opacity:.42;transform:scale(.9) rotate(-5deg)}}
.t-silver::after,.t-silver::before{opacity:.8}

/* sweeping sheen across every shiny finish */
.s-shine{position:absolute;inset:0;z-index:1;border-radius:inherit;overflow:hidden;
  pointer-events:none;display:none}
.t-silver .s-shine,.t-gold .s-shine,.t-plat .s-shine,.t-rainbow .s-shine{display:block}
.s-shine::before{content:"";position:absolute;top:-45%;bottom:-45%;left:-60%;width:46%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.98) 45%,rgba(255,255,255,.98) 55%,transparent);
  transform:rotate(17deg);animation:sweep 3.4s ease-in-out infinite}
.t-gold .s-shine::before{animation-duration:2.9s}
.t-rainbow .s-shine::before{animation-duration:4s}
@keyframes sweep{0%{left:-60%}58%,100%{left:132%}}

/* the award medal borrows the same finishes */
/* tier finishes must out-rank .party-medal's own gradient, hence the double class */
.party-medal.t-paper  {background:linear-gradient(150deg,#FFFDF6,#E2DACA)}
.party-medal.t-silver {background:linear-gradient(140deg,#FBFDFF 0%,#C2CCD6 24%,#FFFFFF 42%,#96A2AE 60%,#E3EAF0 82%,#AAB6C1 100%)}
.party-medal.t-gold   {background:linear-gradient(140deg,#FFF6C4 0%,#F2C13A 24%,#FFFCEA 42%,#DC9C1C 60%,#FFE58A 82%,#C98A12 100%)}
.party-medal.t-plat   {background:linear-gradient(140deg,#FFFFFF 0%,#DCE7EF 20%,#FFFFFF 38%,#A9BAC8 58%,#F6FAFD 78%,#C3D1DC 100%)}
.party-medal.t-rainbow{background:conic-gradient(from 210deg,#FF6B6B,#FFB23F,#FFE066,#3FE0B0,#4FC3FF,#B98BFF,#FF7ECF,#FF6B6B);
  animation:zoomAward .9s cubic-bezier(.18,1.5,.34,1) both, holo 7s linear infinite}
.party-medal.t-paper,.party-medal.t-silver,.party-medal.t-gold,
.party-medal.t-plat,.party-medal.t-rainbow{
  overflow:hidden;
  box-shadow:0 24px 54px -16px rgba(0,0,0,.6), inset 0 -10px 22px rgba(0,0,0,.16),
             inset 0 8px 18px rgba(255,255,255,.5)}
.party-medal.t-rainbow .party-sticker,
.party-medal.t-rainbow ~ *{position:relative;z-index:3}
.party-medal.shimmer::before{content:"";position:absolute;inset:0;border-radius:inherit;overflow:hidden;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);
  background-size:260% 100%;animation:sheen 2.4s 1s ease-in-out infinite}
@keyframes sheen{0%{background-position:180% 0}60%,100%{background-position:-80% 0}}

/* ================= TRACE MODE ================= */
.screen.trace{background:#fff;color:#111}
.trace-stage{position:absolute;inset:0;display:grid;place-content:center;overflow:hidden;background:#fff;touch-action:none}
.trace-canvas-wrap{will-change:transform}
.trace-art svg{display:block;width:min(96vw,96vh);height:min(96vw,96vh)}
.trace-art svg .pp{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round}
.trace-art svg .pp-f{fill:#000;stroke:none}

.trace-grid-overlay{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(0,0,0,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.13) 1px,transparent 1px);
  background-size:12.5% 12.5%}

.trace-top{position:absolute;top:calc(var(--safe-t) + 10px);left:12px;right:12px;display:flex;align-items:center;gap:10px;z-index:6}
.tr-btn{width:46px;height:46px;border-radius:50%;background:rgba(20,15,46,.9);color:#fff;display:grid;place-content:center;
  font-size:19px;box-shadow:0 8px 20px -8px rgba(0,0,0,.6);transition:transform .16s}
.tr-btn:active{transform:scale(.9)}
.tr-step-pills{flex:1;display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.tr-pill{min-width:34px;height:30px;padding:0 10px;border-radius:15px;background:rgba(20,15,46,.14);color:#140F2E;
  font-size:13px;font-weight:850;display:grid;place-content:center;transition:.2s}
.tr-pill.on{background:#140F2E;color:#FFE066}
.tr-pill.past{background:rgba(20,15,46,.4);color:#fff}

.trace-hint{position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 108px);text-align:center;pointer-events:none;z-index:5}
.trace-hint b{display:inline-block;max-width:88%;padding:11px 18px;border-radius:999px;background:rgba(20,15,46,.92);color:#fff;
  font-size:14px;font-weight:700;line-height:1.35;box-shadow:0 12px 28px -12px rgba(0,0,0,.7);animation:rise .35s both}

.trace-dock{position:absolute;left:10px;right:10px;bottom:calc(var(--safe-b) + 10px);z-index:7;
  background:rgba(20,15,46,.95);color:#fff;border-radius:26px;backdrop-filter:blur(20px);
  box-shadow:0 -8px 40px -14px rgba(0,0,0,.6);transition:transform .34s cubic-bezier(.22,.9,.3,1)}
.trace-dock.closed{transform:translateY(calc(100% - 52px))}
.dock-handle{height:34px;display:grid;place-content:center;cursor:pointer}
.dock-handle span{width:46px;height:5px;border-radius:3px;background:rgba(255,255,255,.42);display:block}
.dock-body{padding:0 14px 16px;display:flex;flex-direction:column;gap:9px}
.dock-row{display:flex;align-items:center;gap:9px}
.dock-row.wrap{flex-wrap:wrap}
.dock-step{flex:1;text-align:center;font-weight:800;font-size:14px}
.tool{min-width:52px;height:46px;padding:0 14px;border-radius:15px;background:rgba(255,255,255,.11);
  font-weight:800;font-size:14px;display:grid;place-content:center;transition:.16s}
.tool:active{transform:scale(.93)}
.tool.wide{flex:1 1 88px}
.tool.on{background:linear-gradient(135deg,var(--lemon),var(--mango));color:#2A1A05}
.tool.done{background:linear-gradient(135deg,var(--mint),#22B98C);color:#06301f;flex-basis:100%}
.slider-row.light{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.12);padding:9px 14px}
.slider-row.light span{width:46px;font-size:13px}

.lock-veil{position:absolute;inset:0;z-index:20;background:transparent;touch-action:none}
.unlock{position:absolute;bottom:calc(var(--safe-b) + 16px);left:50%;transform:translateX(-50%);
  display:flex;align-items:center;gap:11px;padding:12px 22px 12px 12px;border-radius:999px;
  background:rgba(20,15,46,.93);color:#fff;font-weight:800;font-size:14px;box-shadow:0 12px 30px -12px rgba(0,0,0,.7)}
.unlock-ring{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-content:center;overflow:hidden}
.unlock-ring i{width:0%;height:100%;background:linear-gradient(135deg,var(--lemon),var(--mango));display:block;border-radius:50%;transition:width .1s linear}

/* ---------- sheet ---------- */
.sheet-veil{position:fixed;inset:0;z-index:90;background:rgba(8,5,20,.62);backdrop-filter:blur(6px);display:flex;align-items:flex-end;animation:fade .25s both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{width:100%;max-height:86vh;overflow-y:auto;background:linear-gradient(180deg,#241B52,#191140);
  border-radius:30px 30px 0 0;padding:10px 22px calc(var(--safe-b) + 28px);animation:up .34s cubic-bezier(.22,.9,.3,1) both;
  border-top:1px solid var(--line)}
@keyframes up{from{transform:translateY(100%)}to{transform:none}}
.sheet-grip{width:46px;height:5px;border-radius:3px;background:rgba(255,255,255,.3);margin:0 auto 18px}
.sheet h2{font-size:23px;font-weight:850;margin-bottom:12px}
.sheet h3{font-size:16px;font-weight:800;margin:20px 0 6px}
.sheet p{color:var(--ink-2);font-size:15px;line-height:1.6;margin:0 0 10px}
.sheet ol,.sheet ul{color:var(--ink-2);font-size:15px;line-height:1.65;padding-left:22px;margin:0 0 12px}
.sheet li{margin-bottom:8px}
.sheet li::marker{color:var(--mango);font-weight:800}
.sheet .pill-btn{width:100%;margin-top:12px}
.gate{display:flex;gap:10px;align-items:center;margin:14px 0}
.gate input{flex:1;padding:15px;border-radius:var(--r-md);background:rgba(0,0,0,.3);border:1px solid var(--line);
  color:#fff;font-size:18px;font-family:inherit;font-weight:800;text-align:center}

/* ---------- party ---------- */
.party{position:fixed;inset:0;z-index:120;display:grid;place-content:center;padding:24px;
  background:radial-gradient(600px 500px at 50% 40%,rgba(122,69,255,.5),rgba(8,5,20,.86));backdrop-filter:blur(8px);animation:fade .3s both}
.party-card{text-align:center;max-width:360px;width:100%}

/* --- the awarded sticker: zooms in from nothing, overshoots, settles --- */
.party-medal-wrap{position:relative;width:184px;height:184px;margin:0 auto 20px;display:grid;place-content:center}
.party-medal{position:relative;z-index:2;width:168px;height:168px;border-radius:50%;
  background:linear-gradient(150deg,#FFE9A3,#FFB23F 52%,#FF7A59);
  display:grid;place-content:center;
  box-shadow:0 24px 54px -16px rgba(255,150,60,.75), inset 0 -10px 22px rgba(140,50,0,.22),
             inset 0 8px 18px rgba(255,255,255,.45);
  animation:zoomAward .9s cubic-bezier(.18,1.5,.34,1) both}
.party-sticker{font-size:86px;line-height:1;display:block;
  filter:drop-shadow(0 8px 14px rgba(120,40,0,.35));
  animation:wobble 2.6s 1s ease-in-out infinite}
.party-burst{position:absolute;inset:-32px;z-index:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg, rgba(255,224,102,.42) 0deg 7deg, transparent 7deg 19deg);
  -webkit-mask:radial-gradient(circle, #000 26%, transparent 70%);
          mask:radial-gradient(circle, #000 26%, transparent 70%);
  animation:rayspin 16s linear infinite, fadeIn .6s .25s both}
.party-ring{position:absolute;inset:8px;z-index:1;border-radius:50%;border:3px solid rgba(255,224,102,.9);
  animation:ringOut 1s .32s cubic-bezier(.2,.7,.3,1) both}
.party-ring.two{animation-delay:.56s;border-color:rgba(255,126,207,.8)}
@keyframes zoomAward{
  0%{transform:scale(.04) rotate(-52deg);opacity:0}
  50%{transform:scale(1.24) rotate(9deg);opacity:1}
  72%{transform:scale(.93) rotate(-5deg)}
  86%{transform:scale(1.04) rotate(2deg)}
  100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes ringOut{0%{transform:scale(.44);opacity:.95}100%{transform:scale(1.9);opacity:0}}
@keyframes rayspin{to{transform:rotate(360deg)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes wobble{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

.party-eyebrow{font-size:11.5px!important;font-weight:850;letter-spacing:.18em;text-transform:uppercase;
  color:var(--lemon)!important;margin:0 0 6px!important;animation:rise .5s .5s both}
.party-card h2{font-size:34px;font-weight:850;margin:0 0 8px;animation:rise .5s .56s both}
.party-card p{color:var(--ink-2);font-size:15.5px;margin:0 0 20px;animation:rise .5s .62s both;line-height:1.5}
.party-cta{animation:rise .5s .68s both;margin-bottom:12px}
.party-actions{display:flex;gap:10px;animation:rise .5s .76s both}
.sticker.just-won{box-shadow:0 0 0 3px var(--lemon), 0 14px 30px -10px rgba(255,224,102,.7)}
.confetti{position:fixed;top:-14px;width:11px;height:15px;z-index:119;pointer-events:none;border-radius:2px}

/* ---------- tablet (iPad 9th gen is 810x1080pt portrait / 1080x810 landscape) ---------- */
.detail-cols{display:block}

@media (min-width:760px){
  .scroll{padding-left:max(26px,calc((100vw - 880px)/2));padding-right:max(26px,calc((100vw - 880px)/2))}
  .pack-grid{grid-template-columns:repeat(3,1fr);gap:18px}
  .draw-grid{grid-template-columns:repeat(auto-fill,minmax(176px,1fr));gap:18px}
  .home-title{font-size:44px}
  .sec-head h2{font-size:25px}
  .step-copy h3{font-size:24px}
  .step-copy p{font-size:16.5px}
  .trace-dock{left:50%;transform:translateX(-50%);width:min(660px,94vw)}
  .trace-dock.closed{transform:translateX(-50%) translateY(calc(100% - 52px))}

  /* portrait tablet: one column, but a much bigger picture so the page fills */
  .detail-paper{width:min(100%,54vh)}
}

/* Landscape: picture left, steps and the big button right, so "Start tracing"
   is always on screen without scrolling. */
@media (min-width:760px) and (orientation:landscape){
  .detail-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:32px;align-items:start}
  .detail-paper{width:100%;max-width:min(100%,62vh)}
  .detail-right{display:flex;flex-direction:column;gap:2px}
  .detail-badges{justify-content:flex-start}
}
@media (min-width:1040px){
  .scroll{padding-left:max(26px,calc((100vw - 1000px)/2));padding-right:max(26px,calc((100vw - 1000px)/2))}
  .pack-grid{grid-template-columns:repeat(4,1fr)}
  .detail-cols{gap:40px}
}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---------- illustration line-weight hierarchy ---------- */
.pp{stroke-width:var(--w,4.2)}
.pp .w-xl{stroke-width:calc(var(--w,4.2) * 1.38)}
.pp .w-hi{stroke-width:calc(var(--w,4.2) * 1.16)}
.pp .w-lo{stroke-width:calc(var(--w,4.2) * 0.60)}
.pp .pp-f{fill:#000;stroke:none}
.pp .ghost{opacity:.15}
.stepg{}

/* ---------- drop-in display face (optional, for Android/Windows parity) ----------
   Download Fredoka (SIL OFL) or Baloo 2 (SIL OFL), place the .woff2 in fonts/,
   uncomment this block and set --font-display: "PaperPals Display", var(--font).

@font-face{
  font-family:"PaperPals Display";
  src:url("fonts/display-700.woff2") format("woff2");
  font-weight:600 900; font-display:swap;
}
*/

/* ---------- shown only when scripts are blocked (e.g. Files Quick Look) ---------- */
.nojs{position:fixed;inset:0;z-index:300;display:none;place-content:center;text-align:center;
  padding:36px;background:var(--bg);color:var(--ink)}
.nojs h2{font-size:24px;margin-bottom:12px}
.nojs p{color:var(--ink-2);font-size:16px;line-height:1.6;max-width:34ch;margin:0 auto 10px}
.nojs code{background:rgba(255,255,255,.12);padding:2px 7px;border-radius:6px;font-size:14px}
.errbar{position:fixed;left:12px;right:12px;top:calc(var(--safe-t) + 10px);z-index:400;
  padding:13px 16px;border-radius:16px;background:#8B1A3A;color:#fff;font-size:13px;line-height:1.45;
  box-shadow:var(--shadow);display:none;text-align:center;animation:rise .25s both}

/* ================= STICKER BOOK ================= */
/* A real album: cream paper, a printed slot for every sticker, and the ones
   you've won stuck on top at a slight angle with a white die-cut border. */
.book{position:relative;border-radius:var(--r-xl);overflow:hidden;touch-action:pan-y;
  background:#FBF6EA;
  background-image:radial-gradient(rgba(90,70,30,.07) 1px, transparent 1px);
  background-size:19px 19px;
  box-shadow:0 26px 54px -22px rgba(0,0,0,.8), inset 0 0 0 1px rgba(120,95,45,.18)}
.book-spine{position:absolute;top:0;bottom:0;left:50%;width:34px;transform:translateX(-50%);z-index:3;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(120,95,45,.13) 38%,rgba(120,95,45,.20) 50%,rgba(120,95,45,.13) 62%,transparent)}
.book-track{display:flex;transition:transform .42s cubic-bezier(.22,.9,.3,1);will-change:transform}
.book-track.dragging{transition:none}
.book-page{flex:0 0 100%;padding:18px 16px 14px;display:flex;flex-direction:column;gap:14px;
  color:#2E2718}

.page-head{display:flex;align-items:center;gap:11px;padding-bottom:11px;
  border-bottom:2.5px dashed rgba(120,95,45,.3)}
.page-emo{font-size:27px;line-height:1}
.page-head h3{flex:1;font-size:21px;font-weight:850;color:#2E2718;letter-spacing:-.02em}
.page-prog{font-size:11.5px;font-weight:850;color:#7A6A45;background:rgba(120,95,45,.13);
  padding:6px 12px;border-radius:999px;font-variant-numeric:tabular-nums}
.page-prog.full{background:linear-gradient(135deg,var(--mango),var(--coral));color:#fff}

.page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 11px}
.slot{display:flex;flex-direction:column;align-items:center;gap:7px}
.slot-box{position:relative;width:100%;aspect-ratio:1;border-radius:18px;display:grid;place-items:center}
.slot.empty .slot-box{border:2.5px dashed rgba(120,95,45,.34);background:rgba(120,95,45,.055);
  box-shadow:inset 0 2px 6px rgba(120,95,45,.09)}
.slot-ghost{font-size:34px;opacity:.2;filter:grayscale(1)}
.slot-name{font-size:9.5px;font-weight:850;text-transform:uppercase;letter-spacing:.045em;
  text-align:center;line-height:1.2;color:#6B5C3C}
.slot.empty .slot-name{color:#A99A78}

/* the stuck-on sticker itself */
.slot.filled .sticker{position:absolute;inset:0;padding:0;
  transform:rotate(var(--rot,0deg));
  border:5px solid #fff;border-radius:20px;
  box-shadow:0 9px 18px -6px rgba(60,42,10,.55), 0 2px 4px rgba(60,42,10,.28);
  transition:transform .2s cubic-bezier(.2,1.4,.4,1)}
.slot.filled .sticker:active{transform:rotate(var(--rot,0deg)) scale(1.07)}
.slot.filled .sticker .s-emo{font-size:38px}
.page-no{text-align:center;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:#A2926E;margin-top:auto;padding-top:6px}

.book-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.book-dots{display:flex;gap:7px;flex-wrap:wrap;justify-content:center;max-width:62%}
.book-dot{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.24);transition:.25s;padding:0;border:0}
.book-dot.on{background:linear-gradient(135deg,var(--lemon),var(--mango));transform:scale(1.35)}
.round-btn[disabled]{opacity:.3}
@media (min-width:640px){ .page-grid{grid-template-columns:repeat(5,1fr)} .book-page{padding:22px 20px 16px} }
@media (min-width:900px){ .page-grid{grid-template-columns:repeat(5,1fr);gap:18px 14px} }

/* the big award medal wears the same glitter */
.party-medal.t-gold::after,.party-medal.t-plat::after,.party-medal.t-rainbow::after,
.party-medal.t-silver::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20100%20100%27%3E%3Cg%20fill%3D%27%23fff%27%20fill-opacity%3D%271.0%27%3E%3Cpath%20d%3D%27M19%2013Q20.8%2020.2%2028%2022Q20.8%2023.8%2019%2031Q17.2%2023.8%2010%2022Q17.2%2020.2%2019%2013Z%27%2F%3E%3Cpath%20d%3D%27M72%209Q73.2%2013.8%2078%2015Q73.2%2016.2%2072%2021Q70.8%2016.2%2066%2015Q70.8%2013.8%2072%209Z%27%2F%3E%3Cpath%20d%3D%27M43%2048Q45.0%2056.0%2053%2058Q45.0%2060.0%2043%2068Q41.0%2060.0%2033%2058Q41.0%2056.0%2043%2048Z%27%2F%3E%3Cpath%20d%3D%27M88%2048.5Q89.1%2052.9%2093.5%2054Q89.1%2055.1%2088%2059.5Q86.9%2055.1%2082.5%2054Q86.9%2052.9%2088%2048.5Z%27%2F%3E%3Cpath%20d%3D%27M27%2077.5Q28.3%2082.7%2033.5%2084Q28.3%2085.3%2027%2090.5Q25.7%2085.3%2020.5%2084Q25.7%2082.7%2027%2077.5Z%27%2F%3E%3Cpath%20d%3D%27M60%2035.5Q60.9%2039.1%2064.5%2040Q60.9%2040.9%2060%2044.5Q59.1%2040.9%2055.5%2040Q59.1%2039.1%2060%2035.5Z%27%2F%3E%3Cpath%20d%3D%27M93%2081Q94.0%2085.0%2098%2086Q94.0%2087.0%2093%2091Q92.0%2087.0%2088%2086Q92.0%2085.0%2093%2081Z%27%2F%3E%3Cpath%20d%3D%27M8%2046.5Q9.1%2050.9%2013.5%2052Q9.1%2053.1%208%2057.5Q6.9%2053.1%202.5%2052Q6.9%2050.9%208%2046.5Z%27%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-size:100% 100%;
  filter:drop-shadow(0 0 5px rgba(255,255,255,.95));
  animation:twinkleA 1.9s ease-in-out infinite}
.party-medal .party-sticker{position:relative;z-index:3}