/* Non-interactive stickers: reserve space for headings, never cover controls. */
.mascot-scene { position: relative; }
.mascot-sticker {
  display: block;
  width: 190px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  flex-shrink: 0;
  filter: drop-shadow(0 9px 15px #00a9e91a);
}
.mascot-sticker > img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}
.mascot-scene > .mascot-sticker {
  opacity: 1;
  z-index: 1;
  inset-inline-start: auto;
  letter-spacing: normal;
  line-height: normal;
}
.mascot-scene--heading,
.mascot-scene--compact {
  padding-inline-end: 220px;
  min-height: 180px;
}
.mascot-scene--heading > .mascot-sticker,
.mascot-scene--compact > .mascot-sticker {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%) rotate(5deg);
}
.mascot-scene--corner > .mascot-sticker {
  position: absolute;
  inset-inline-end: 8px;
  bottom: 0;
  width: 180px;
  transform: rotate(-8deg);
}
.mascot-scene--tail > .mascot-sticker {
  position: relative;
  margin: 24px 0 0 auto;
  width: 190px;
}
.mascot-scene--tail > .price-mascot { display: none; }
.mascot-scene--compact { padding-inline-end: 130px; min-height: 128px; }
.mascot-scene--compact > .mascot-sticker { width: 112px; }

@media (max-width: 850px) {
  .mascot-scene--heading { padding-inline-end: 160px; min-height: 150px; }
  .mascot-scene--heading > .mascot-sticker { width: 140px; }
}
@media (max-width: 600px) {
  .mascot-scene--heading,
  .mascot-scene--compact { padding-inline-end: 110px; min-height: 120px; }
  .mascot-scene--heading > .mascot-sticker,
  .mascot-scene--compact > .mascot-sticker { width: 96px; inset-inline-end: 0; }
  .mascot-scene--corner > .mascot-sticker { width: 112px; bottom: 12px; }
  .mascot-scene--tail > .mascot-sticker { width: 130px; margin-top: 18px; }
}