* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  background:
    linear-gradient(180deg, #7fc8ff 0%, #9fd8ff 32%, #d7efff 68%, #f5fbff 100%);
  overflow: hidden;
}

body.is-loading #stage,
body.is-loading #logo,
body.is-loading #play-button {
  visibility: hidden;
}

#loading-screen {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background:
    linear-gradient(180deg, #7fc8ff 0%, #9fd8ff 32%, #d7efff 68%, #f5fbff 100%);
  color: #11324a;
  font:
    600 clamp(18px, 2.2vw, 28px) Georgia,
    "Times New Roman",
    serif;
  letter-spacing: 0.04em;
  z-index: 10;
  transition: opacity 320ms ease;
}

#loading-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(82vw, 420px);
}

#loading-card-frame {
  position: relative;
  width: 100%;
  min-height: 220px;
  padding: 26px;
  border: 3px solid rgba(17, 50, 74, 0.7);
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(224, 241, 255, 0.72));
  box-shadow:
    0 20px 44px rgba(17, 50, 74, 0.2),
    inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

#loading-card-frame::before {
  content: "";
  position: absolute;
  inset: 14px;
  border: 2px solid rgba(17, 50, 74, 0.2);
  border-radius: 18px;
}

.loader-castles {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: 164px;
  z-index: 1;
}

.loader-castle {
  width: clamp(84px, 18vw, 124px);
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(17, 50, 74, 0.18));
}

.loader-play-area {
  position: relative;
  width: clamp(96px, 20vw, 132px);
  height: 132px;
  flex: 0 0 auto;
}

.loader-card-stack {
  position: absolute;
  inset: 0;
}

.loader-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(72px, 14vw, 96px);
  height: clamp(96px, 18vw, 124px);
  border-radius: 12px;
  border: 2px solid rgba(17, 50, 74, 0.75);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(232, 243, 255, 0.95));
  box-shadow: 0 12px 24px rgba(17, 50, 74, 0.16);
  transform: translate(-50%, -50%);
}

.loader-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(17, 50, 74, 0.18);
  border-radius: 8px;
}

.loader-card-base {
  z-index: 2;
}

.loader-card-shadow {
  z-index: 1;
  transform: translate(calc(-50% + 6px), calc(-50% + 6px)) rotate(4deg);
  background:
    linear-gradient(180deg, rgba(230, 240, 250, 0.88), rgba(208, 224, 238, 0.88));
}

.loader-card-thrown {
  z-index: 3;
}

.loader-card-thrown-left {
  animation: throw-card-left 1.9s ease-in-out infinite;
}

.loader-card-thrown-right {
  animation: throw-card-right 1.9s ease-in-out infinite;
}

.loader-castle:first-child {
  transform: rotate(-8deg) translateY(4px);
  filter:
    drop-shadow(0 10px 18px rgba(17, 50, 74, 0.18))
    sepia(1)
    saturate(4.4)
    hue-rotate(-26deg)
    brightness(0.95);
}

.loader-castle:last-child {
  transform: rotate(8deg) translateY(-4px);
  filter:
    drop-shadow(0 10px 18px rgba(17, 50, 74, 0.18))
    sepia(1)
    saturate(4.2)
    hue-rotate(158deg)
    brightness(0.95);
}

#loading-copy {
  text-transform: uppercase;
}

#loading-progress {
  font-size: clamp(16px, 2vw, 22px);
  letter-spacing: 0.08em;
}

@keyframes throw-card-left {
  0%,
  14% {
    opacity: 0;
    transform: translate(-150%, -56%) rotate(-22deg) scale(0.9);
  }

  18% {
    opacity: 1;
  }

  44% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-6deg) scale(1);
  }

  52%,
  100% {
    opacity: 0;
    transform: translate(-46%, -48%) rotate(-4deg) scale(1);
  }
}

@keyframes throw-card-right {
  0%,
  46% {
    opacity: 0;
    transform: translate(56%, -44%) rotate(20deg) scale(0.9);
  }

  50% {
    opacity: 1;
  }

  78% {
    opacity: 1;
    transform: translate(-50%, -50%) rotate(7deg) scale(1);
  }

  86%,
  100% {
    opacity: 0;
    transform: translate(-54%, -52%) rotate(5deg) scale(1);
  }
}

body:not(.is-loading) #loading-screen {
  opacity: 0;
  pointer-events: none;
}

#stage {
  position: fixed;
  inset: 0;
  background: transparent;
  overflow: visible;
  will-change: transform;
}

#trees {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

#castle-scene {
  position: absolute;
  left: 50%;
  bottom: 46.5vh;
  width: 100vw;
  height: 220vh;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

#grass {
  position: absolute;
  top: 47vh;
  left: -10vw;
  width: 120vw;
  height: 52vh;
  object-fit: cover;
  object-position: top center;
  transform-origin: 50% 0%;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  z-index: -2;
}

#castle-tower {
  position: absolute;
  left: clamp(-260px, -16vw, -96px);
  bottom: 106vh;
  height: clamp(140vh, 170vh, 210vh);
  width: auto;
  object-fit: contain;
  object-position: bottom left;
  transform-origin: 50% 100%;
  clip-path: inset(100% 0 -8% 0);
  pointer-events: none;
  user-select: none;
  will-change: transform, clip-path;
  z-index: -1;
}

#castle-distance {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: 80% 20%;
  transform: scale(1.2);
  transform-origin: 80% 20%;
  pointer-events: none;
  user-select: none;
  z-index: -2;
}

#castle-walls {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center bottom;
  transform: translateX(-50%);
  transform-origin: 50% 100%;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  z-index: 0;
}

#trail {
  position: absolute;
  top: 47vh;
  left: 50%;
  height: 52vh;
  width: auto;
  transform: translateX(-50%);
  transform-origin: 50% 0%;
  pointer-events: none;
  user-select: none;
  will-change: transform;
  z-index: 1;
}

.tree {
  position: absolute;
  top: 50%;
  left: 50%;
  height: 70vh;
  width: auto;
  pointer-events: none;
  will-change: transform;
}

#logo {
  position: fixed;
  top: 14vh;
  right: 6vw;
  transform: scale(0.96);
  max-width: 34vw;
  max-height: 28vh;
  width: auto;
  height: auto;
  opacity: 0;
  transition:
    opacity 1.4s ease-in-out,
    transform 1.6s ease-out;
  user-select: none;
  pointer-events: none;
  z-index: 4;
}

#logo.visible {
  opacity: 1;
  transform: scale(1);
}

#play-button.menu-button {
  position: fixed;
  top: calc(14vh + min(28vh, 220px));
  right: 6vw;
  width: min(280px, 34vw);
  height: 160px;
  opacity: 0;
  transform: translateY(12px) scale(1.06);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  user-select: none;
  pointer-events: none;
  z-index: 4;
}

#play-button.menu-button i {
  font-size: 2.2rem;
  margin-top: 10px;
}

#play-button.visible {
  opacity: 1;
  transform: translateY(0) scale(1.06);
  pointer-events: auto;
}

@media (max-width: 768px) {
  #castle-tower {
    left: clamp(-460px, -40vw, -240px);
  }

  #play-button.menu-button {
    top: calc(14vh + min(24vh, 168px));
    right: 50%;
    width: min(280px, 72vw);
    height: 144px;
    transform: translate(50%, 12px) scale(1.06);
  }

  #play-button.visible {
    transform: translate(50%, 0) scale(1.06);
  }

  #play-button.menu-button:active {
    transform: translate(50%, 2px) scale(1.06);
  }

  #loading-card-frame {
    min-height: 190px;
    padding: 20px;
    border-radius: 22px;
  }

  .loader-castles {
    min-height: 138px;
    gap: 12px;
  }
}