.farm-welcome {
  --scene-width: 1344;
  --scene-height: 768;
  --switch-duration: 350ms;
  --paper-text: #6a3b21;
  --night-ink: #fff1cb;
  position: fixed;
  inset: 0;
  display: grid;
  width: 100vw;
  height: 100vh;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  place-items: center;
  background: #0d161f;
  font-family: "Segoe Print", "Microsoft YaHei UI", sans-serif;
}

.farm-welcome * {
  box-sizing: border-box;
}

.farm-welcome button {
  font: inherit;
}

.farm-welcome .stage {
  position: relative;
  width: calc(var(--scene-width) * 1px);
  height: calc(var(--scene-height) * 1px);
  overflow: hidden;
  background: #cbdde1;
  isolation: isolate;
  transform: scale(var(--stage-scale, 1));
  transform-origin: center;
}

.farm-welcome .scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
  overflow: hidden;
  background: transparent;
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--switch-duration) ease-in-out;
}

.farm-welcome .scene.is-active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

.farm-welcome .scene img {
  user-select: none;
  -webkit-user-drag: none;
}

.farm-welcome .fallback-plate,
.farm-welcome .scene-plate,
.farm-welcome .sprite,
.farm-welcome .title-glyph,
.farm-welcome .star,
.farm-welcome .fire-glow {
  position: absolute;
  display: block;
}

.farm-welcome .fallback-plate,
.farm-welcome .scene-plate {
  inset: 0;
  width: 100%;
  height: 100%;
}

.farm-welcome .fallback-plate {
  display: none;
}

.farm-welcome .stage.motion-failed .fallback-plate {
  display: block;
}

.farm-welcome .stage.motion-failed .scene-plate,
.farm-welcome .stage.motion-failed .sprite,
.farm-welcome .stage.motion-failed .title-glyph,
.farm-welcome .stage.motion-failed .star-field,
.farm-welcome .stage.motion-failed .fire-glow {
  display: none;
}

.farm-welcome .fire-outer {
  transform-origin: 50% 100%;
  mix-blend-mode: screen;
  opacity: 0.48;
  animation: farm-welcome-fire-flicker 0.92s ease-in-out infinite alternate;
}

.farm-welcome .fire-inner {
  transform-origin: 50% 100%;
  mix-blend-mode: screen;
  opacity: 0.42;
  animation: farm-welcome-fire-inner 0.68s ease-in-out -0.2s infinite alternate;
}

.farm-welcome .fire-glow {
  width: 360px;
  height: 250px;
  background: radial-gradient(
    circle at 50% 64%,
    rgba(255, 167, 64, 0.32) 0,
    rgba(255, 120, 28, 0.12) 35%,
    rgba(255, 120, 28, 0) 72%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  animation: farm-welcome-fire-glow 1.8s ease-in-out infinite alternate;
}

.farm-welcome .star-field {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.farm-welcome .star {
  width: var(--star-size, 5px);
  height: var(--star-size, 5px);
  background: #fff1b3;
  border-radius: 50%;
  box-shadow:
    0 0 5px 2px rgba(255, 243, 181, 0.7),
    0 0 15px 5px rgba(255, 220, 123, 0.25);
  opacity: 0.65;
  animation: farm-welcome-star-twinkle var(--star-duration, 3.8s) ease-in-out var(--star-delay, 0s)
    infinite alternate;
}

.farm-welcome .title-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.farm-welcome .title-glyph {
  transform-origin: 50% 52%;
  will-change: transform, filter;
}

.farm-welcome .scene[data-scene="day"] .title-glyph {
  filter: drop-shadow(0 2px 0 rgba(103, 56, 27, 0.22));
}

.farm-welcome .scene[data-scene="night"] .title-glyph {
  filter:
    drop-shadow(0 2px 0 rgba(30, 20, 23, 0.42))
    drop-shadow(0 0 7px rgba(255, 231, 178, 0.18));
}

.farm-welcome .scene.is-settling .title-glyph {
  transition: transform 320ms cubic-bezier(0.22, 1.35, 0.36, 1), filter 220ms ease;
}

.farm-welcome .title-switch {
  position: absolute;
  z-index: 12;
  top: 80px;
  left: 205px;
  width: 948px;
  height: 142px;
  padding: 0;
  color: transparent;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
}

.farm-welcome .title-switch:focus-visible {
  border: 2px dashed rgba(255, 240, 205, 0.8);
  border-radius: 24px;
}

.farm-welcome .start-button {
  position: absolute;
  z-index: 14;
  top: 618px;
  left: 548px;
  width: 254px;
  height: 109px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
}

.farm-welcome .start-button__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    transform 220ms cubic-bezier(0.22, 1.3, 0.4, 1),
    filter 220ms ease;
}

.farm-welcome .start-button__glow {
  position: absolute;
  inset: 11px 13px 18px;
  background: rgba(255, 232, 179, 0.38);
  border-radius: 28px;
  box-shadow: 0 12px 28px rgba(79, 53, 29, 0.22);
  opacity: 0;
  transition: opacity 220ms ease;
}

.farm-welcome .start-button:hover .start-button__image {
  filter: brightness(1.06) saturate(1.04);
  transform: translate(var(--start-x, 0), var(--start-y, -5px))
    rotate(var(--start-rotate, 0deg)) scale(1.045);
}

.farm-welcome .start-button:hover .start-button__glow {
  opacity: 1;
  animation: farm-welcome-start-glow 1.25s ease-in-out infinite alternate;
}

.farm-welcome .start-button:active .start-button__image {
  transform: translateY(1px) scale(0.992);
  transition-duration: 80ms;
}

.farm-welcome .start-button:focus-visible {
  border-radius: 32px;
  outline: 2px solid rgba(255, 244, 208, 0.92);
  outline-offset: 6px;
}

.farm-welcome .stage.is-pressing .start-button__image {
  transform: translateY(1px) scale(0.992);
}

@keyframes farm-welcome-start-glow {
  from {
    filter: blur(3px);
    transform: scale(0.96);
  }

  to {
    filter: blur(7px);
    transform: scale(1.08);
  }
}

@keyframes farm-welcome-fire-flicker {
  0% {
    transform: skewX(-0.7deg) scale(0.985, 1.008);
  }

  34% {
    transform: skewX(0.9deg) scale(1.012, 0.985);
  }

  68% {
    transform: skewX(-0.35deg) scale(0.992, 1.025);
  }

  100% {
    transform: skewX(0.55deg) scale(1.018, 0.993);
  }
}

@keyframes farm-welcome-fire-inner {
  0% {
    opacity: 0.82;
    transform: translateY(2px) scale(0.97, 1.035);
  }

  100% {
    opacity: 1;
    transform: translateY(-2px) scale(1.03, 0.975);
  }
}

@keyframes farm-welcome-fire-glow {
  0% {
    opacity: 0.72;
    transform: scale(0.96);
  }

  100% {
    opacity: 1;
    transform: scale(1.035);
  }
}

@keyframes farm-welcome-star-twinkle {
  0% {
    opacity: 0.32;
    transform: scale(0.7);
  }

  55% {
    opacity: 1;
    transform: scale(1.25);
  }

  100% {
    opacity: 0.52;
    transform: scale(0.82);
  }
}

.farm-welcome .scene:not(.is-active) .sprite,
.farm-welcome .scene:not(.is-active) .star,
.farm-welcome .scene:not(.is-active) .title-glyph {
  animation-play-state: paused;
}

body.is-page-hidden .farm-welcome .fire-outer,
body.is-page-hidden .farm-welcome .fire-inner,
body.is-page-hidden .farm-welcome .fire-glow,
body.is-page-hidden .farm-welcome .star {
  animation-play-state: paused;
}

body.is-reduced-motion .farm-welcome .fire-outer,
body.is-reduced-motion .farm-welcome .fire-inner,
body.is-reduced-motion .farm-welcome .fire-glow,
body.is-reduced-motion .farm-welcome .star {
  animation: none;
}

body.is-reduced-motion .farm-welcome .star {
  opacity: 0.62;
}

body.is-reduced-motion .farm-welcome .title-glyph {
  transition: none;
}

body.is-reduced-motion .farm-welcome .start-button__glow {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .farm-welcome .fire-outer,
  .farm-welcome .fire-inner,
  .farm-welcome .fire-glow,
  .farm-welcome .star {
    animation: none;
  }
}