.mascot-pin {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 9998;
}

.mascot-pin__button {
  display: block;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}

.mascot-pin__button img {
  display: block;
  /* vmax (not vw) so the on-screen size stays the same across orientation - vw shrinks in
     portrait since the viewport is narrower there, even at the same percentage. */
  width: 15vmax;
  height: auto;
}

.mascot-pin__bubble {
  position: absolute;
  left: 50px;
  bottom: calc(100% + 25px);
  max-width: 240px;
  background: #161a1d;
  color: #f5f3f4;
  border: 1px solid #660708;
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.4;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}