#startScreen {
  background: rgba(1, 2, 4, .48);
  backdrop-filter: blur(4px);
}

.start-card {
  position: relative;
  width: min(88vw, 430px);
  padding: 42px 30px 34px;
  transform: translateY(6vh);
  overflow: hidden;
  border: 1px solid rgba(220, 230, 236, .3);
  border-radius: 30px;
  background:
    linear-gradient(145deg, rgba(35, 43, 50, .9), rgba(5, 8, 11, .96)),
    #07090b;
  box-shadow:
    0 24px 80px rgba(0, 0, 0, .85),
    0 0 0 1px rgba(255, 255, 255, .035) inset,
    0 0 38px rgba(180, 195, 205, .14);
  animation: introCardFloat 5s ease-in-out infinite;
}

.start-card::before {
  position: absolute;
  top: 0;
  left: 12%;
  width: 76%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, #e4ebef, transparent);
  box-shadow: 0 0 18px #dce5eb;
  opacity: .8;
}

.start-card::after {
  position: absolute;
  inset: 10px;
  pointer-events: none;
  content: "";
  border: 1px solid rgba(220, 230, 236, .08);
  border-radius: 23px;
}

@keyframes introCardFloat {
  0%, 100% {
    transform: translateY(6vh);
  }

  50% {
    transform: translateY(calc(6vh - 5px));
  }
}

.crest {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 92px;
  margin: 0 auto 20px;
  border: 1px solid rgba(220, 230, 236, .3);
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, rgba(174, 185, 192, .2), transparent 38%),
    radial-gradient(circle, #171d21 0 48%, #050709 72%);
  box-shadow:
    0 0 0 7px rgba(220, 230, 236, .035),
    0 0 28px rgba(220, 230, 236, .24),
    inset 0 0 22px rgba(255, 255, 255, .12);
  animation: flowerPulse 4s ease-in-out infinite;
}

.crest::before {
  position: absolute;
  inset: 7px;
  content: "";
  border: 1px solid rgba(220, 230, 236, .1);
  border-radius: 50%;
}

.crest-petal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 48px;
  transform-origin: 50% 100%;
  border: 1px solid rgba(215, 224, 229, .3);
  border-radius: 70% 30% 72% 28%;
  background:
    radial-gradient(ellipse at 28% 20%, rgba(240, 245, 247, .4), transparent 22%),
    linear-gradient(135deg, #4a555d 0%, #1b2227 28%, #080b0d 67%, #000 100%);
  box-shadow:
    inset 5px 4px 9px rgba(255, 255, 255, .13),
    inset -8px -12px 14px rgba(0, 0, 0, .95),
    0 0 9px rgba(180, 195, 204, .12);
}

.crest-petal:nth-child(1) {
  transform: translate(-50%, -100%) rotate(0deg);
}

.crest-petal:nth-child(2) {
  transform: translate(-50%, -100%) rotate(60deg);
}

.crest-petal:nth-child(3) {
  transform: translate(-50%, -100%) rotate(120deg);
}

.crest-petal:nth-child(4) {
  transform: translate(-50%, -100%) rotate(180deg);
}

.crest-petal:nth-child(5) {
  transform: translate(-50%, -100%) rotate(240deg);
}

.crest-petal:nth-child(6) {
  transform: translate(-50%, -100%) rotate(300deg);
}

.crest-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(220, 230, 236, .45);
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #f1f4f5 0 8%, #8b979e 18%, #343d43 42%, #050607 76%);
  box-shadow:
    0 0 10px rgba(220, 230, 236, .72),
    inset -4px -5px 7px #000;
}

@keyframes flowerPulse {
  0%, 100% {
    transform: scale(1);
    filter: brightness(.92);
  }

  50% {
    transform: scale(1.035);
    filter: brightness(1.12);
  }
}

.eyebrow {
  position: relative;
  z-index: 1;
  margin: 0 0 18px;
  color: #aeb9c0;
  font-size: 10px;
  letter-spacing: 3px;
}

.start-card h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(34px, 10vw, 60px);
  letter-spacing: 4px;
  text-shadow:
    0 0 5px rgba(255, 255, 255, .9),
    0 0 22px rgba(170, 185, 195, .5);
}

.start-copy {
  position: relative;
  z-index: 1;
  margin: 23px 0 28px;
  color: #9da9b0;
  font-size: 14px;
  letter-spacing: .8px;
}

#startBtn {
  position: relative;
  z-index: 1;
  min-width: 158px;
  padding: 14px 28px;
  border: 1px solid rgba(230, 237, 241, .72) !important;
  border-radius: 999px;
  color: #080a0c !important;
  background: linear-gradient(135deg, #f1f4f5, #8d9aa3) !important;
  box-shadow:
    0 0 0 5px rgba(220, 230, 236, .06),
    0 0 28px rgba(220, 230, 236, .32);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 4px;
  transition: .25s ease;
}

#startBtn::after {
  position: absolute;
  inset: 3px;
  content: "";
  border: 1px solid rgba(0, 0, 0, .18);
  border-radius: inherit;
}

#startBtn:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow:
    0 0 0 7px rgba(220, 230, 236, .08),
    0 0 38px rgba(220, 230, 236, .58);
}

#startBtn:active {
  transform: translateY(0) scale(.98);
}

#startBtn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 5px;
}

@media (max-width: 600px) {
  .start-card {
    padding: 36px 22px 30px;
    border-radius: 25px;
    transform: translateY(3vh);
  }

  .crest {
    width: 82px;
    height: 82px;
  }

  .crest-petal {
    width: 27px;
    height: 43px;
  }

  @keyframes introCardFloat {
    0%, 100% {
      transform: translateY(3vh);
    }

    50% {
      transform: translateY(calc(3vh - 4px));
    }
  }
}