.sticker-panel{
  position:fixed;bottom:16px;right:16px;background:var(--panel-strong);
  border:1px solid var(--border);border-radius:16px;padding:12px;box-shadow:var(--shadow-md);
  display:flex;flex-direction:column;gap:8px;z-index:45
}
.sticker-grid{display:grid;grid-template-columns:repeat(6,38px);gap:8px}
.sticker{width:38px;height:38px;display:grid;place-items:center;font-size:24px;border-radius:10px;background:rgba(255,255,255,.06);border:1px solid var(--border)}
.sticker.unlocked{background:rgba(255,255,255,.12)}

.overlay{pointer-events:none;position:fixed;inset:0;display:none;place-items:center;z-index:80;}
.overlay.show{display:grid}
.overlay .badge{
  background:rgba(42, 33, 64,1);
  border:1px solid rgba(255,217,102,.5);color:var(--text);
  border-radius:24px;padding:20px 24px;box-shadow:var(--shadow-lg);text-align:center
}
.overlay .big{font-weight:600;font-size:24px}
.overlay .small{color:var(--muted);margin-top:8px}

/* Overlay badge micro-motion, respects reduced motion */
@media (prefers-reduced-motion: no-preference) {
  .overlay .badge.jiggle {
    animation:
      overlayPop .28s ease-out,
      overlayJiggle .7s ease both .1s;
    will-change: transform;
  }
  @keyframes overlayPop {
    from { transform: translateY(8px) scale(.98); opacity: .9; }
    to   { transform: none; opacity: 1; }
  }
  @keyframes overlayJiggle {
    0%, 100% { transform: rotate(0deg); }
    25%      { transform: rotate(1.2deg); }
    50%      { transform: rotate(-1.1deg); }
    75%      { transform: rotate(.6deg); }
  }
}

/* a light sparkle layer that evaporates */
.sparkle-layer {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 4000; /* above overlay background */
  overflow: hidden;
}
.sparkle-dot {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fffef7 0%, #ffd966 35%, transparent 70%);
  filter: blur(.2px);
  opacity: .9;
  animation: sparkleDrift 1.6s ease-out forwards;
}
@keyframes sparkleDrift {
  0%   { transform: translate(0,0) scale(.7); opacity: 1; filter: brightness(1.6); }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.4); opacity: 0; filter: brightness(1); }
}