body {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  min-height: 100vh;
  font-family: sans-serif;
  margin: 0;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 227, 10, 0.25) 0%, transparent 45%),
    radial-gradient(circle at 10% 90%, rgba(0, 0, 0, 0.35) 0%, transparent 55%),
    linear-gradient(180deg, #02111f 0%, #052b3a 40%, #0a4858 70%, #06313f 100%);
  background-attachment: fixed;
}

/* ========== Стартовая страница: выбор класса ========== */
#start-screen {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

#start-screen.hidden {
  display: none;
}

#start-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #026b9e 0%, #02a3da 35%, #0284b8 70%, #014a6b 100%);
}

#start-background::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 50% at 50% 20%, rgba(255, 227, 10, 0.12) 0%, transparent 50%);
  pointer-events: none;
}

#start-content {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: 2.5rem 2rem;
  background: linear-gradient(165deg, #5b3d1b 0%, #573e1d 30%, #3a2415 100%);
  border: 4px solid #885d26;
  border-radius: 16px;
  box-shadow:
    0 0 0 2px #3c2415,
    0 12px 24px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 247, 188, 0.15);
}

#start-content::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(139, 93, 38, 0.5);
  border-radius: 10px;
  pointer-events: none;
}

#start-title {
  margin: 0 0 1.75rem;
  font-size: 1.75rem;
  font-weight: 800;
  color: #ffe30a;
  text-align: center;
  text-shadow:
    0 0 12px rgba(255, 227, 10, 0.4),
    0 2px 4px rgba(0, 0, 0, 0.6);
  letter-spacing: 0.05em;
}

#start-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.class-btn {
  padding: 16px 24px;
  font-size: 1.1rem;
  font-weight: 700;
  color: #3c2415;
  background: linear-gradient(180deg, #ffe30a 0%, #f7bc49 45%, #d4a02a 100%);
  border: 2px solid #885d26;
  border-radius: 10px;
  box-shadow:
    0 4px 0 #8b6914,
    0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: transform 0.1s, box-shadow 0.1s;
}

.class-btn:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 #8b6914,
    0 0 0 1px rgba(255, 255, 255, 0.25) inset;
}

.class-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 #8b6914,
    0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}

/* ========== Основной экран (сундук) ========== */
#chest-wrap {
  max-width: 400px;
  width: 90%;
  gap: 10px;
  flex-direction: column;
  min-height: 100vh;
  display: flex;
  flex-direction: column; /* сундук сверху, ключ ниже */
  justify-content: center;
  align-items: center;
}

#chest {
  .cls-1 {
    fill: #573e1d;
  }

  .cls-2 {
    fill: #3c2415;
  }

  .cls-3 {
    fill: #f7bc49;
  }

  .cls-4 {
    fill: #885d26;
  }

  .cls-5 {
    fill: #3a2415;
  }

  .cls-6 {
    fill: #f9ed24;
  }

  .cls-7 {
    clip-path: url(#clip-path);
  }

  .cls-8 {
    clip-path: url(#clip-path-2);
  }

  .cls-9 {
    clip-path: url(#clip-path-3);
  }

  .cls-10 {
    fill: #ffe30a;
  }

  .cls-11 {
    clip-path: url(#clip-path-4);
  }

  .cls-12,
  .cls-17 {
    fill: none;
    stroke: #3c2415;
    stroke-miterlimit: 10;
  }

  .cls-12 {
    stroke-width: 22.6px;
  }

  .cls-13 {
    clip-path: url(#clip-path-5);
  }

  .cls-14 {
    fill: #fed00d;
  }

  .cls-15 {
    clip-path: url(#clip-path-6);
  }

  .cls-16 {
    fill: #5b3d1b;
  }

  .cls-17 {
    stroke-width: 23.52px;
  }

  .cls-18 {
    clip-path: url(#clip-path-7);
  }

  .cls-19,
  .cls-24,
  .cls-25,
  .cls-26 {
    fill: #fff;
  }

  .cls-19 {
    opacity: 0.34;
  }

  .cls-20 {
    clip-path: url(#clip-path-8);
  }

  .cls-21 {
    clip-path: url(#clip-path-9);
  }

  .cls-22 {
    clip-path: url(#clip-path-10);
  }

  .cls-23 {
    fill: #f9ed32;
  }

  .cls-24 {
    opacity: 0.65;
  }

  .cls-25 {
    opacity: 0.86;
  }
  .cls-1 {
    fill: #573e1d;
  }

  .cls-2 {
    fill: #3c2415;
  }

  .cls-3 {
    fill: #f7bc49;
  }

  .cls-4 {
    fill: #885d26;
  }

  .cls-5 {
    fill: #3a2415;
  }

  .cls-6 {
    fill: #f9ed24;
  }

  .cls-7 {
    clip-path: url(#clip-path);
  }

  .cls-8 {
    clip-path: url(#clip-path-2);
  }

  .cls-9 {
    clip-path: url(#clip-path-3);
  }

  .cls-10 {
    fill: #ffe30a;
  }

  .cls-11 {
    clip-path: url(#clip-path-4);
  }

  .cls-12,
  .cls-17 {
    fill: none;
    stroke: #3c2415;
    stroke-miterlimit: 10;
  }

  .cls-12 {
    stroke-width: 22.6px;
  }

  .cls-13 {
    clip-path: url(#clip-path-5);
  }

  .cls-14 {
    fill: #fed00d;
  }

  .cls-15 {
    clip-path: url(#clip-path-6);
  }

  .cls-16 {
    fill: #5b3d1b;
  }

  .cls-17 {
    stroke-width: 23.52px;
  }

  .cls-18 {
    clip-path: url(#clip-path-7);
  }

  .cls-19,
  .cls-24,
  .cls-25,
  .cls-26 {
    fill: #fff;
  }

  .cls-19 {
    opacity: 0.34;
  }

  .cls-20 {
    clip-path: url(#clip-path-8);
  }

  .cls-21 {
    clip-path: url(#clip-path-9);
  }

  .cls-22 {
    clip-path: url(#clip-path-10);
  }

  .cls-23 {
    fill: #f9ed32;
  }

  .cls-24 {
    opacity: 0.65;
  }

  .cls-25 {
    opacity: 0.86;
  }
}

#chest-sparkles,
#chest-lock,
#chest-top,
#chest-bottom {
  transform-origin: 250px 200px;
}

#chest {
  &.shake-chest {
    #chest-lock {
      animation: shakeChestTop 1.2s infinite ease;
    }

    #chest-bottom {
      animation: shakeChestBottom 1.2s infinite ease;
    }

    #chest-top {
      animation: shakeChestTop 1.2s infinite ease;
    }

    #chest-sparkles {
      animation: shakeChestTop 1.2s infinite ease;
    }
  }

  &.open-chest {
    #chest-lock {
      animation: openLock 3s ease forwards;
    }

    #chest-top {
      animation: openChestTop 3s ease forwards;
    }

    #chest-sparkles {
      opacity: 0;
      transition: 0.6s ease;
    }
  }
}

#chest-sparkles {
  #sparkle_mid {
    opacity: 0;
    animation: fadeIn 2s infinite alternate;
  }

  #sparkle_left {
    opacity: 0;
    animation: fadeIn 2s infinite alternate 0.75s;
  }

  #sparkle_right {
    opacity: 0;
    animation: fadeIn 2s infinite alternate 1.5s;
  }
}

#open-chest {
  background: #d8127d;
  color: #fff101;
  padding: 15px 40px;
  font-weight: 700;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  user-select: none;
  cursor: pointer;
}

#reset-chest {
  color: #fff101;
  font-weight: 500;
  margin-top: 20px;
  cursor: pointer;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes shakeChestBottom {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  15% {
    transform: translateY(-5px) rotate(-2deg);
  }
  25% {
    transform: translateY(-10px) rotate(0deg);
  }
  60% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes shakeChestTop {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  15% {
    transform: translateY(-10px) rotate(2deg);
  }
  25% {
    transform: translateY(-20px) rotate(-2deg);
  }
  35% {
    transform: translateY(-20px) rotate(2deg);
  }
  60% {
    transform: translateY(0) rotate(0deg);
  }
}

@keyframes openLock {
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  8% {
    transform: rotate(4deg) scale(1);
    opacity: 1;
  }
  17% {
    transform: rotate(-6deg) scale(1);
    opacity: 1;
  }
  24% {
    transform: rotate(5deg) scale(1);
    opacity: 1;
  }
  30% {
    transform: rotate(-8deg) scale(1);
    opacity: 1;
  }
  45% {
    transform: rotate(-8deg) scale(2);
    opacity: 0;
  }
  100% {
    transform: rotate(0deg) scale(2);
    opacity: 0;
  }
}

@keyframes openChestTop {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  35% {
    transform: translateY(0);
    opacity: 1;
  }
  45% {
    transform: translateY(-8%);
    opacity: 1;
  }
  75% {
    transform: translateY(-20%);
    opacity: 0;
  }
  100% {
    transform: translateY(-20%);
    opacity: 0;
  }
}

/* утилита скрытия */
.hidden {
  display: none !important;
}

/* блок кнопок */
#controls {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

#open-chest,
#reset-chest {
  background: #d8127d;
  color: #fff101;
  padding: 12px 32px;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  font-size: 14px;
  box-shadow: 0 4px 0 #a00d5f;
  transition:
    transform 0.1s,
    box-shadow 0.1s;
}

#open-chest:hover,
#reset-chest:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 0 #a00d5f;
}

#open-chest:active,
#reset-chest:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #a00d5f;
}

#open-chest:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* сообщение о неверном коде */
#wrong-code-msg {
  color: #c0392b;
  font-weight: 700;
  font-size: 1.1rem;
  margin: 12px 0 0;
  text-align: center;
  text-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
}

#wrong-code-msg:not(.hidden) {
  animation: wrongCodeShake 0.4s ease;
}

@keyframes wrongCodeShake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}

/* оверлей победы */
#win-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

#win-overlay.show {
  pointer-events: auto;
}

#win-background {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    #1a0a2e 0%,
    #2d1b4e 30%,
    #4a2c6a 60%,
    #6b3fa0 100%
  );
  opacity: 0;
  animation: winBgFade 1.2s ease forwards;
}

#win-overlay.show #win-background {
  opacity: 1;
}

#win-message {
  position: relative;
  z-index: 2;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 800;
  color: #ffe066;
  text-shadow:
    0 0 20px rgba(255, 224, 102, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.5);
  letter-spacing: 0.1em;
  margin: 0;
  opacity: 0;
  animation: winTextPop 0.6s ease 0.4s forwards;
}

@keyframes winBgFade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes winTextPop {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ключ: контейнер с анимациями */
#key-wrapper {
  position: relative;
  display: inline-block;
  transform-origin: 50% 50%;
  transition: transform 0.6s ease;
}

/* полёт к сундуку */
#key-wrapper.key-fly {
  transform: translateY(-180px);
}

/* переворот на 90° по Z — ключ «прямоугольником» */
#key-wrapper.key-rotate-z {
  transform: translateY(-180px) rotateZ(90deg);
}

/* проворот в замке */
#key-wrapper.key-spin {
  transform: translateY(-180px) rotateZ(450deg);
}

/* возврат ключа на место */
#key-wrapper.key-back {
  transform: translateY(0) rotateZ(0);
  transition-duration: 0.7s;
}

/* ключ — в одном стиле с сундуком */
.key-icon {
  display: block;
}

/* поле ввода на стержне ключа (6 цифр), не на ручке */
#key-input {
  position: absolute;
  left: 200px;
  top: 138px;
  width: 90px;
  height: 24px;
  padding: 2px 6px;
  border-radius: 4px;
  border: 2px solid #222;
  background: #fff;
  color: #222;
  font-size: 15px;
  letter-spacing: 2px;
  text-align: center;
  box-sizing: border-box;
}