.welcome-gate {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: none;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  overflow: hidden;
  color: #35a3bb;
  background: #f8f8f5;
  isolation: isolate;
  outline: none;
  transition: opacity 280ms ease;
}
.welcome-pending .welcome-gate,
.welcome-gate.is-leaving { display: grid; }
.welcome-gate[hidden] { display: none; }
.welcome-gate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("./assets/source-layers/user-paper-texture-fast.webp?v=20261010-phone-start-v1") center top / cover no-repeat;
  transform: scale(1.12);
  transform-origin: center top;
}
.welcome-pending .sound-control { visibility: hidden; }
.welcome-gate__meeting {
  position: relative;
  width: clamp(160px, 21vw, 232px);
  margin-top: 56px;
}
.welcome-pending:not(.welcome-ready) .welcome-gate__meeting { visibility: hidden; }
.welcome-gate button {
  display: block;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.welcome-gate button:focus-visible { outline: 2px dashed currentColor; outline-offset: 8px; border-radius: 12px; }
.welcome-gate__mascot {
  width: 100%;
  aspect-ratio: 386 / 462;
  transform: rotate(-2deg);
  transform-origin: 50% 90%;
}
.welcome-gate__mascot img { display: block; width: 100%; height: auto; aspect-ratio: 386 / 462; user-select: none; }
.welcome-gate__greeting {
  position: absolute;
  width: 172px;
  height: 90px;
  right: -76px;
  bottom: calc(100% - 8px);
  transform: rotate(5deg);
}
.welcome-gate__greeting svg { width: 100%; height: 100%; overflow: visible; }
.welcome-gate__greeting path { fill: none; stroke: currentColor; stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; }
.welcome-gate__greeting .welcome-gate__bubble { fill: rgb(255 255 255 / 22%); }
.welcome-gate__greeting span {
  position: absolute;
  inset: 6px 0 12px;
  display: none;
  place-items: center;
  font: 400 29px/1 "WorryBin Welcome Xingchen", "WorryBin Xingchen", "Sea Glass Hand", cursive;
  white-space: nowrap;
  transform: translateY(3px);
}
.welcome-font-fallback .welcome-gate__greeting span {
  font-family: "Kaiti SC", "STKaiti", "KaiTi", serif;
}
.welcome-new .welcome-gate__copy--new,
.welcome-returning .welcome-gate__copy--returning { display: grid; }
.welcome-gate.is-greeting .welcome-gate__mascot { animation: welcomeNod 480ms cubic-bezier(.18, .78, .24, 1) both; }
.welcome-gate.is-leaving { opacity: 0; }
@keyframes welcomeNod {
  0% { transform: rotate(-2deg) translateY(0); }
  42% { transform: rotate(3deg) translateY(5px) scaleY(.96); }
  100% { transform: rotate(-1deg) translateY(-2px); }
}
@media (max-width: 480px) {
  .welcome-gate__meeting { width: 172px; }
  .welcome-gate__greeting { width: 150px; height: 79px; right: -46px; }
  .welcome-gate__greeting span { font-size: 26px; bottom: 14px; transform: translateY(2px); }
}
@media (max-height: 460px) {
  .welcome-gate__meeting { width: 126px; margin-top: 24px; }
  .welcome-gate__greeting { width: 140px; height: 74px; right: -100px; bottom: calc(100% - 55px); }
  .welcome-gate__greeting span { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .welcome-gate { transition: none; }
  .welcome-gate.is-greeting .welcome-gate__mascot { animation: none; }
}