/* Stickers and stars (switched off in js/stars.js for now) */

/* ================= stickers ================= */
/* sticker inks are physical colours, identical in both themes */
:root {
  --s-orange: #ff5a36;
  --s-butter: #ffd166;
  --s-sky: #7cc4ff;
  --s-mint: #7ee0b5;
  --s-pink: #ff9ecb;
  --s-ink: #1b1b1f;
  --s-cream: #fff6e3;
  --s-white: #ffffff;
  --s-bun: #f2a541;
  --s-patty: #6b3a22;
  --s-steel: #c3ccd6;
  --s-steel2: #e4e9ef;
  --s-foam: #c48a5a;
  --s-shadow: rgba(20, 20, 30, .22);
}
.f-o { fill: var(--s-orange); } .f-b { fill: var(--s-butter); } .f-s { fill: var(--s-sky); }
.f-m { fill: var(--s-mint); } .f-p { fill: var(--s-pink); } .f-k { fill: var(--s-ink); }
.f-c { fill: var(--s-cream); } .f-w { fill: var(--s-white); } .f-bun { fill: var(--s-bun); }
.f-br { fill: var(--s-patty); } .f-st { fill: var(--s-steel); } .f-st2 { fill: var(--s-steel2); }
.f-foam { fill: var(--s-foam); }
.s-k { stroke: var(--s-ink); fill: none; } .s-p { stroke: var(--s-pink); fill: none; }
.t-k { fill: var(--s-ink); } .t-c { fill: var(--s-cream); } .t-o { fill: var(--s-orange); }
.stk svg text { font-family: "Geist", "Helvetica Neue", Arial, sans-serif; }

.stickers { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.stk {
  position: absolute; left: 0; top: 0; touch-action: manipulation; outline: none;
  will-change: transform, opacity;
}
.stk.live { pointer-events: auto; cursor: grab; }
.stk.dragging { cursor: grabbing; z-index: 2; }
.stk .art {
  display: block;
  filter: drop-shadow(0 1.5px 1.5px var(--s-shadow)) drop-shadow(0 6px 10px var(--s-shadow));
  transition: transform .25s cubic-bezier(.3, 1.5, .5, 1), filter .25s;
}
.stk .art svg { display: block; width: 100%; height: auto; overflow: visible; }
.stk.live:hover .art, .stk:focus-visible .art { transform: scale(1.06) rotate(-3deg); filter: drop-shadow(0 3px 3px var(--s-shadow)) drop-shadow(0 14px 18px var(--s-shadow)); }
.stk.dragging .art { transform: scale(1.1) rotate(-4deg); filter: drop-shadow(0 6px 6px var(--s-shadow)) drop-shadow(0 22px 26px var(--s-shadow)); }
.stk.slap .art { animation: slap .55s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: var(--delay, 0ms); }
@keyframes slap {
  0% { opacity: 0; transform: scale(1.7) rotate(-12deg); }
  55% { opacity: 1; transform: scale(.93) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* note bubble shown when a sticker is tapped */
.note {
  position: fixed; z-index: 45; left: 0; top: 0; max-width: 230px;
  padding: 8px 12px; border-radius: 12px;
  background: var(--ink); color: var(--bg); font-size: 14px; line-height: 1.35;
  pointer-events: none; opacity: 0; transform: translate(-50%, calc(-100% + 6px));
  transition: opacity .18s, transform .25s cubic-bezier(.3, 1.5, .5, 1);
}
.note.show { opacity: 1; transform: translate(-50%, -100%); }

.star .art, .stk.star.live:hover .art, .stk.star:focus-visible .art, .stk.star.dragging .art { filter: none; }
.stk.star.live:hover .art { transform: scale(1.08) rotate(-8deg); }
.stk.star.dragging .art { transform: scale(1.14) rotate(-10deg); }
.star.twirl .art { animation: twirl .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes twirl { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.3); } 100% { transform: rotate(360deg) scale(1); } }
.stk .art img { display: block; width: 100%; height: auto; pointer-events: none; user-select: none; }
.stk:focus-visible { outline: 2px solid var(--s-orange); outline-offset: 2px; }
@media (max-width: 820px) {
  .note { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stk.slap .art, .star.twirl .art { animation: none; }
}