/* One responsive mascot surface shared by Home, Your Spotters, and Alerts. */
.spotter-mascot-slot {
  position: relative;
  display: block;
  width: clamp(95px, 13vw, 143px);
  aspect-ratio: 1;
  margin: 0 auto 4px;
  contain: layout paint style;
  isolation: isolate;
  user-select: none;
  -webkit-user-select: none;
}
.spotter-mascot-slot > img,
.spotter-mascot-slot > canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.spotter-mascot-slot > img {
  object-fit: contain;
  opacity: 1;
}
.spotter-mascot-slot > canvas {
  visibility: hidden;
  touch-action: pan-y;
}
.spotter-mascot-slot[data-rendering="animated"] > img { opacity: 0; }
.spotter-mascot-slot[data-rendering="pending"] > img { visibility: hidden; opacity: 0; }
.spotter-mascot-slot[data-rendering="animated"] > canvas { visibility: visible; }
.spotter-mascot-slot[data-rendering="static"] > canvas { visibility: hidden; }
body.spotter-mascot-ready .so-home-mascot { display: none !important; }
.spotter-mascot-wildlife {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  visibility: hidden;
  z-index: 1;
}
.spotter-mascot-slot[data-rendering="animated"] > .spotter-mascot-wildlife { visibility: visible; }

body[data-so-route="spotters"] #dashboard > .shell > .spotter-mascot-slot,
body[data-so-route="alerts"] #soAlertsPage .spotter-mascot-slot {
  margin-bottom: 2px;
}

@media (max-width: 650px) {
  .spotter-mascot-slot {
    width: clamp(92px, 27.5vw, 112px);
    margin-bottom: 0;
  }
  body[data-spotter-home] .hero h1 { margin-top: 4px !important; }
  body[data-so-route="spotters"] #dashboard,
  body[data-so-route="alerts"] #soAlertsPage { padding-top: 26px !important; }
}

@media (max-width: 360px) {
  .spotter-mascot-slot { width: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  .spotter-mascot-slot > img { transition: none; }
}