/* A small invitation anchored in the room; only its face receives pointer input. */
.birthday-sign-layer {
  position: fixed;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}
.birthday-sign {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(230px, 16vw, 280px);
  max-width: calc(100vw - 32px);
  transform-origin: 0 0;
  pointer-events: none;
}
.birthday-sign-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 18px;
  border: 2px solid white;
  border-radius: 30px;
  background: #fffaf3f5;
  box-shadow: 0 8px 32px #16360d30;
  color: #224800;
  text-align: center;
  pointer-events: auto;
  transform:
    translate(-50%, var(--sign-anchor-y, -50%))
    translate3d(var(--sign-x, 0px), var(--sign-y, 0px), 0)
    perspective(700px)
    rotateX(var(--sign-rx, 0deg))
    rotateY(var(--sign-ry, 0deg));
  transition: transform 180ms ease-out;
}
.birthday-sign-room {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: #617338;
  font-size: 11px;
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: 0.5px;
}
/* Informational signs let the visitor drag the panorama through the whole card. */
.tour-sign-info .birthday-sign-face {
  pointer-events: none;
  user-select: none;
}
.crazy-slide-sign .birthday-sign-room,
.ninja-sign .birthday-sign-room {
  font-size: 14px;
}
.crazy-slide-sign .birthday-sign-room .icon {
  color: var(--orange);
}
.tour-sign-note {
  margin: 0;
  color: #27841c;
  font-size: 16px;
  font-weight: 800;
  line-height: 1.3;
}
.birthday-sign-room .icon {
  width: 23px;
  height: 23px;
}
.birthday-sign h2 {
  margin: 0;
  color: #27841c;
  font-size: clamp(20px, 1.25vw, 22px);
  font-weight: 900;
  line-height: 1.2;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.birthday-sign-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 48px;
  margin-top: 2px;
  padding: 11px 12px;
  border-radius: 999px;
  background: #80b91a;
  color: #173e0d;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.25;
  text-decoration: none;
}
.birthday-sign-book .icon {
  width: 21px;
  height: 21px;
}
.birthday-sign-book:hover {
  background: #92c832;
}
.birthday-sign-book:focus-visible {
  outline: 3px solid #246947;
  outline-offset: 4px;
}
@media (max-width: 600px) {
  /* Hang below the high railing so the mobile map leaves the message readable. */
  .tour-sign-high {
    --sign-anchor-y: 0%;
  }
  .birthday-sign {
    width: 240px;
  }
  .birthday-sign-face {
    padding: 16px;
  }
  .birthday-sign h2 {
    font-size: 20px;
  }
}
@media (max-width: 360px) {
  .autodrome-sign {
    --sign-anchor-y: calc(-50% + 40px);
  }
  .tour-sign-high {
    --sign-anchor-y: 80px;
  }
  .tour-sign-high::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 82px;
    transform: translateX(-50%);
    background: linear-gradient(#fff9, #fffaf3);
    pointer-events: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .birthday-sign-face {
    transition: none;
  }
}