:root {
  color-scheme: dark;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  background: #071524;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100svh;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #173f50, #061221 78%);
}

button { font: inherit; }

.landing {
  position: relative;
  width: min(100vw, 56.25svh);
  height: 100svh;
  min-height: 520px;
  margin: 0 auto;
  overflow: hidden;
  isolation: isolate;
  background: #0b2030;
  box-shadow: 0 0 70px rgba(0, 0, 0, .62);
}

.cover {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 52%, rgba(3, 12, 25, .08) 65%, rgba(3, 10, 20, .48));
}

.action-area {
  position: absolute;
  left: 50%;
  top: 87%;
  width: 100%;
  padding: 0 24px env(safe-area-inset-bottom);
  text-align: center;
  transform: translate(-50%, -50%);
}

.start-button {
  position: relative;
  min-width: min(70vw, 330px);
  padding: 15px 38px 17px;
  border: 3px solid #befb47;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(180deg, #a5f62a 0%, #62d916 48%, #25a914 100%);
  box-shadow:
    0 5px 0 #17640f,
    0 9px 0 rgba(25, 5, 49, .72),
    0 0 22px rgba(143, 255, 47, .68),
    inset 0 3px 0 rgba(255, 255, 255, .55);
  text-shadow: 0 2px 0 #237113, 0 0 6px rgba(13, 47, 23, .6);
  animation: bounce 1.15s ease-in-out infinite;
  -webkit-tap-highlight-color: transparent;
}

.start-button::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(255, 255, 255, .38);
  border-radius: inherit;
  pointer-events: none;
}

.start-button:active {
  animation-play-state: paused;
  transform: translateY(5px) scale(.97);
  box-shadow: 0 2px 0 #17640f, 0 4px 0 rgba(25, 5, 49, .72), 0 0 15px rgba(143, 255, 47, .65);
}

.start-button:disabled {
  cursor: wait;
  filter: saturate(.72);
}

.button-text {
  display: inline-block;
  font-size: clamp(25px, 7vw, 36px);
  font-weight: 900;
  letter-spacing: .14em;
  transform: translateX(.07em);
}

.spark {
  position: absolute;
  top: 50%;
  color: #e9ff8c;
  font-size: 20px;
  transform: translateY(-50%);
  animation: twinkle .7s ease-in-out infinite alternate;
}

.spark-left { left: 16px; }
.spark-right { right: 16px; animation-delay: .35s; }

.tip {
  margin: 18px 0 0;
  color: rgba(237, 255, 244, .9);
  font-size: 13px;
  letter-spacing: .08em;
  text-shadow: 0 1px 5px #05131c, 0 0 10px #05131c;
}

.tip.is-error { color: #fff4a9; }

@keyframes bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-13px) scale(1.035); }
  62% { transform: translateY(-10px) scale(1.02); }
}

@keyframes twinkle {
  from { opacity: .35; transform: translateY(-50%) scale(.72) rotate(-12deg); }
  to { opacity: 1; transform: translateY(-50%) scale(1.18) rotate(12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .start-button, .spark { animation: none; }
}