* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  color: white;
  background:
    radial-gradient(circle at top, #24387b 0%, #111936 35%, #06070f 75%, #03040a 100%);
  overflow-x: hidden;
  position: relative;
}

/* ТУМАННОСТИ */
.space-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.28;
  pointer-events: none;
  z-index: 0;
}

.glow-one {
  width: 340px;
  height: 340px;
  background: rgba(106, 141, 255, 0.8);
  top: 80px;
  left: -40px;
  animation: driftOne 14s ease-in-out infinite;
}

.glow-two {
  width: 420px;
  height: 420px;
  background: rgba(176, 92, 255, 0.45);
  top: 420px;
  right: -120px;
  animation: driftTwo 18s ease-in-out infinite;
}

.glow-three {
  width: 280px;
  height: 280px;
  background: rgba(255, 170, 90, 0.24);
  bottom: 120px;
  left: 18%;
  animation: driftThree 16s ease-in-out infinite;
}

@keyframes driftOne {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(50px, 30px) scale(1.12); }
}

@keyframes driftTwo {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-60px, 20px) scale(1.08); }
}

@keyframes driftThree {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -35px) scale(1.15); }
}

/* ЗВЁЗДЫ */
.stars,
.stars-two,
.stars-three,
.stars-four {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.stars::before,
.stars::after,
.stars-two::before,
.stars-two::after,
.stars-three::before,
.stars-three::after,
.stars-four::before,
.stars-four::after {
  content: "";
  position: absolute;
  inset: 0;
  background-repeat: repeat;
}

.stars::before {
  background-image:
    radial-gradient(2px 2px at 40px 60px, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px at 180px 140px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.5px 1.5px at 320px 80px, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px at 540px 180px, rgba(255,255,255,0.85), transparent),
    radial-gradient(2px 2px at 760px 90px, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.5px 1.5px at 940px 160px, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 1160px 70px, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.5px 1.5px at 1290px 220px, rgba(255,255,255,0.8), transparent);
  animation: twinkle 5s ease-in-out infinite;
}

.stars::after {
  background-image:
    radial-gradient(2px 2px at 90px 240px, rgba(255,215,140,0.95), transparent),
    radial-gradient(1.5px 1.5px at 260px 310px, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 480px 260px, rgba(255,255,255,0.85), transparent),
    radial-gradient(2px 2px at 700px 320px, rgba(255,215,140,0.9), transparent),
    radial-gradient(1.5px 1.5px at 920px 260px, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px at 1120px 300px, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 1240px 360px, rgba(255,215,140,0.8), transparent);
  animation: twinkle 8s ease-in-out infinite reverse;
}

.stars-two::before {
  background-image:
    radial-gradient(1.5px 1.5px at 140px 420px, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px at 380px 520px, rgba(255,255,255,0.9), transparent),
    radial-gradient(1.5px 1.5px at 640px 470px, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px at 850px 560px, rgba(255,215,140,0.85), transparent),
    radial-gradient(1.5px 1.5px at 1080px 460px, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px at 1240px 520px, rgba(255,255,255,0.85), transparent);
  animation: twinkle 6.5s ease-in-out infinite;
}

.stars-two::after {
  background-image:
    radial-gradient(2px 2px at 210px 680px, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.5px 1.5px at 470px 760px, rgba(255,255,255,0.85), transparent),
    radial-gradient(2px 2px at 740px 700px, rgba(255,215,140,0.9), transparent),
    radial-gradient(1.5px 1.5px at 980px 760px, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px at 1180px 690px, rgba(255,255,255,0.95), transparent),
    radial-gradient(1.5px 1.5px at 1310px 790px, rgba(255,215,140,0.85), transparent);
  animation: twinkle 9s ease-in-out infinite reverse;
}

.stars-three::before {
  background-image:
    radial-gradient(3px 3px at 120px 110px, rgba(255,255,255,0.98), transparent),
    radial-gradient(3px 3px at 420px 210px, rgba(255,215,140,0.95), transparent),
    radial-gradient(3px 3px at 790px 130px, rgba(255,255,255,0.98), transparent),
    radial-gradient(3px 3px at 1030px 250px, rgba(255,215,140,0.95), transparent),
    radial-gradient(3px 3px at 1240px 160px, rgba(255,255,255,0.98), transparent);
  animation: shimmer 3.2s ease-in-out infinite;
}

.stars-three::after {
  background-image:
    radial-gradient(3px 3px at 230px 520px, rgba(255,255,255,0.98), transparent),
    radial-gradient(3px 3px at 610px 600px, rgba(255,215,140,0.95), transparent),
    radial-gradient(3px 3px at 980px 540px, rgba(255,255,255,0.98), transparent),
    radial-gradient(3px 3px at 1140px 720px, rgba(255,215,140,0.95), transparent),
    radial-gradient(3px 3px at 1320px 620px, rgba(255,255,255,0.98), transparent);
  animation: shimmer 4.1s ease-in-out infinite reverse;
}

/* НОВЫЙ ДОПОЛНИТЕЛЬНЫЙ СЛОЙ ЗВЁЗД */
.stars-four::before {
  background-image:
    radial-gradient(2px 2px at 50px 50px, rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px at 150px 200px, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px at 300px 120px, rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px at 500px 80px, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px at 700px 220px, rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px at 900px 140px, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px at 1100px 200px, rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px at 1300px 100px, rgba(255,255,255,0.95), transparent),
    radial-gradient(2px 2px at 120px 420px, rgba(255,215,140,0.95), transparent),
    radial-gradient(2px 2px at 420px 520px, rgba(255,255,255,1), transparent),
    radial-gradient(2px 2px at 780px 470px, rgba(255,215,140,0.95), transparent),
    radial-gradient(2px 2px at 1180px 540px, rgba(255,255,255,1), transparent);
  animation: starsFlash 3s infinite ease-in-out;
}

.stars-four::after {
  background-image:
    radial-gradient(4px 4px at 200px 300px, rgba(255,255,255,1), transparent),
    radial-gradient(4px 4px at 600px 400px, rgba(255,215,140,1), transparent),
    radial-gradient(4px 4px at 1000px 250px, rgba(255,255,255,1), transparent),
    radial-gradient(4px 4px at 1200px 450px, rgba(255,215,140,1), transparent),
    radial-gradient(4px 4px at 320px 680px, rgba(255,255,255,1), transparent),
    radial-gradient(4px 4px at 860px 720px, rgba(255,215,140,1), transparent);
  animation: bigStarGlow 4s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% {
    opacity: 0.38;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes shimmer {
  0%, 100% {
    opacity: 0.28;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1.28);
  }
}

@keyframes starsFlash {
  0%, 100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@keyframes bigStarGlow {
  0%, 100% {
    opacity: 0.55;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.35);
  }
}

/* ПАДАЮЩАЯ ЗВЕЗДА */
.shooting-star {
  position: fixed;
  top: 110px;
  left: -160px;
  width: 180px;
  height: 2px;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1), rgba(255,215,140,0));
  transform: rotate(-20deg);
  box-shadow: 0 0 14px rgba(255,255,255,0.85);
  animation: shooting 7s linear infinite;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}

@keyframes shooting {
  0% {
    transform: translate(-200px, -100px) rotate(-20deg);
    opacity: 0;
  }
  8% {
    opacity: 1;
  }
  16% {
    transform: translate(1200px, 420px) rotate(-20deg);
    opacity: 0;
  }
  100% {
    transform: translate(1200px, 420px) rotate(-20deg);
    opacity: 0;
  }
}

/* РАКЕТА */
.rocket-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 35px;
  z-index: 3;
  pointer-events: none;
}

.rocket {
  position: absolute;
  left: 40px;
  bottom: 0;
  font-size: 52px;
  filter: drop-shadow(0 0 18px rgba(255, 150, 80, 0.45));
  transition: transform 2.4s ease-in-out, opacity 2.4s ease-in-out;
}

.rocket.fly {
  transform: translate(88vw, -65vh) rotate(-18deg) scale(1.15);
  opacity: 0.2;
}

/* ШАПКА */
.hero {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 18px;
  text-align: center;
}

.hero-content {
  max-width: 920px;
  padding: 42px 24px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 60px rgba(0,0,0,0.35);
}

.hero-label {
  margin: 0 0 12px;
  color: #ffd976;
  letter-spacing: 1px;
  font-size: 15px;
}

.hero h1 {
  margin: 0 0 14px;
  font-size: 60px;
  line-height: 1.06;
  text-shadow:
    0 0 10px rgba(160, 190, 255, 0.35),
    0 0 28px rgba(150, 110, 255, 0.18);
}

.hero-text {
  max-width: 720px;
  margin: 0 auto 28px;
  font-size: 21px;
  line-height: 1.5;
  color: #eef2ff;
}

.hero-buttons,
.game-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* КНОПКИ */
.btn {
  display: inline-block;
  text-decoration: none;
  border: none;
  border-radius: 16px;
  padding: 14px 24px;
  font-size: 17px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.25s ease;
}

.btn-main {
  background: linear-gradient(135deg, #ffb84d, #ff6a3d);
  color: white;
  box-shadow: 0 10px 24px rgba(255, 107, 61, 0.35);
}

.btn-main:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 12px 28px rgba(255, 130, 70, 0.45);
}

.btn-soft {
  background: rgba(255,255,255,0.11);
  color: white;
  border: 1px solid rgba(255,255,255,0.15);
}

.btn-soft:hover {
  transform: translateY(-2px) scale(1.04);
  background: rgba(255,255,255,0.18);
}

.launch-text {
  min-height: 24px;
  margin-top: 18px;
  color: #ffd976;
  font-weight: bold;
}

/* СЕКЦИИ */
.section {
  position: relative;
  z-index: 1;
  padding: 78px 18px;
}

.section h2 {
  margin: 0 0 14px;
  text-align: center;
  font-size: 40px;
  text-shadow: 0 0 18px rgba(120, 170, 255, 0.18);
}

.section-subtext {
  max-width: 760px;
  margin: 0 auto 30px;
  text-align: center;
  color: #dfe6ff;
}

/* ГАЛЕРЕЯ */
.gallery {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.gallery-card {
  overflow: hidden;
  border-radius: 24px;
  background: rgba(255,255,255,0.09);
  box-shadow: 0 16px 36px rgba(0,0,0,0.32);
  transition: 0.3s ease;
  border: 2px solid transparent;
  backdrop-filter: blur(10px);
}

.gallery-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.36),
    0 0 22px rgba(120, 160, 255, 0.18);
}

.gallery-card.active {
  border-color: #ffca67;
  box-shadow:
    0 0 0 2px rgba(255, 202, 103, 0.28),
    0 18px 42px rgba(0,0,0,0.36),
    0 0 26px rgba(255, 206, 120, 0.16);
}

.gallery-card img {
  width: 100%;
  height: 260px;
  object-fit: cover;
  display: block;
}

.gallery-info {
  padding: 18px;
}

.gallery-info h3 {
  margin: 0 0 8px;
  font-size: 24px;
}

.gallery-info p {
  margin: 0;
  color: #dbe3ff;
  line-height: 1.45;
}

/* ПАЗЛ */
.game-box {
  max-width: 1120px;
  margin: 0 auto;
  padding: 34px 22px;
  text-align: center;
  border-radius: 28px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 20px 46px rgba(0,0,0,0.34),
    0 0 30px rgba(110, 140, 255, 0.12);
  backdrop-filter: blur(10px);
}

.game-text {
  color: #e8edff;
  margin: 0 0 20px;
}

.accent {
  color: #ffd976;
  font-weight: bold;
}

.game-panel {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 18px 0 22px;
}

.game-stat {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 10px 18px;
  color: #ffffff;
  font-weight: bold;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  min-width: 140px;
}

.puzzle-layout {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.sample-card {
  width: 280px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 24px;
  padding: 18px;
  box-shadow:
    0 14px 30px rgba(0,0,0,0.24),
    0 0 24px rgba(130, 170, 255, 0.12);
}

.sample-card h3 {
  margin: 0 0 14px;
  color: #ffd976;
  font-size: 24px;
}

.sample-card p {
  margin: 14px 0 0;
  color: #dfe6ff;
  line-height: 1.4;
}

.sample-image {
  width: 100%;
  border-radius: 18px;
  display: block;
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
}

.puzzle-side {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.puzzle {
  width: 328px;
  height: 328px;
  margin: 0 auto 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 4px;
  background: rgba(255,255,255,0.08);
  padding: 4px;
  border-radius: 22px;
  box-shadow:
    inset 0 0 18px rgba(255,255,255,0.06),
    0 0 32px rgba(130, 170, 255, 0.2);
}

.tile {
  border-radius: 14px;
  cursor: pointer;
  background-size: 328px 328px;
  background-repeat: no-repeat;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.tile:hover {
  transform: scale(1.03);
  box-shadow: 0 10px 20px rgba(0,0,0,0.28);
}

.empty {
  background: rgba(255,255,255,0.06) !important;
  box-shadow: none;
  cursor: default;
}

.status {
  min-height: 24px;
  margin-top: 10px;
  color: #ffd976;
  font-weight: bold;
}

.footer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 24px 16px 36px;
  color: #d7defd;
}

@media (max-width: 700px) {
  .hero h1 {
    font-size: 40px;
  }

  .hero-text {
    font-size: 18px;
  }

  .section h2 {
    font-size: 30px;
  }

  .sample-card {
    width: 260px;
  }

  .puzzle {
    width: 280px;
    height: 280px;
  }

  .tile {
    background-size: 280px 280px;
  }

  .rocket {
    font-size: 42px;
  }

  .game-stat {
    min-width: 120px;
  }

  .shooting-star {
    width: 130px;
  }
}
/* ПОЗДРАВЛЕНИЕ */
.greeting-card {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px;
  text-align: center;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow:
    0 18px 42px rgba(0,0,0,0.28),
    0 0 24px rgba(120, 170, 255, 0.12);
  backdrop-filter: blur(10px);
}

.greeting-top {
  margin: 0 0 10px;
  color: #ffd976;
  font-weight: bold;
  letter-spacing: 1px;
}

.greeting-card h2 {
  margin: 0 0 14px;
}

.greeting-text {
  margin: 0;
  color: #e7ecff;
  line-height: 1.7;
  font-size: 18px;
}

/* КАРТОЧКИ САЙТА */
.cards {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.site-card {
  text-align: center;
  padding: 28px 22px;
  border-radius: 24px;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 16px 36px rgba(0,0,0,0.28),
    0 0 18px rgba(120, 160, 255, 0.10);
  transition: 0.3s ease;
  backdrop-filter: blur(10px);
}

.site-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 40px rgba(0,0,0,0.34),
    0 0 24px rgba(140, 180, 255, 0.16);
}

.card-icon {
  font-size: 42px;
  margin-bottom: 14px;
}

.site-card h3 {
  margin: 0 0 10px;
  font-size: 24px;
}

.site-card p {
  margin: 0;
  color: #dbe3ff;
  line-height: 1.5;
}