:root {
  --bg: #08142d;
  --bg-deep: #030816;
  --red: #d62828;
  --gold: #f7d774;
  --gold-soft: #f1c75a;
  --cream: #fff5d6;
  --white: #f8fbff;
  --blue: #73c7ff;
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  --panel: rgba(9, 24, 48, 0.72);
  --line: rgba(255, 245, 214, 0.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Trebuchet MS", "Arial", sans-serif;
  color: var(--cream);
  background:
    radial-gradient(circle at 20% 20%, rgba(115, 199, 255, 0.15), transparent 30%),
    radial-gradient(circle at 80% 10%, rgba(247, 215, 116, 0.13), transparent 24%),
    radial-gradient(circle at 50% 80%, rgba(214, 40, 40, 0.18), transparent 34%),
    linear-gradient(180deg, var(--bg) 0%, #071020 48%, var(--bg-deep) 100%);
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 25px;
}

/* Звездный фон */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: 
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(247, 215, 116, 0.7) 0 1px, transparent 1.7px),
    radial-gradient(circle, rgba(115, 199, 255, 0.8) 0 1px, transparent 1.6px);
  background-size: 180px 180px, 240px 240px, 320px 320px;
  background-position: 0 0, 60px 90px, 120px 40px;
  opacity: 0.6;
  animation: starsFloat 30s linear infinite;
}

@keyframes starsFloat {
  from { transform: translateY(0); }
  to { transform: translateY(180px); }
}

/* Орбиты */
.orbit, .orbit-two, .orbit-three {
  position: fixed;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}
.orbit { width: 72vw; height: 72vw; max-width: 900px; top: -22vw; right: -18vw; animation: spin 38s linear infinite; }
.orbit-two { width: 52vw; height: 52vw; max-width: 680px; bottom: -14vw; left: -8vw; animation: spinReverse 28s linear infinite; }
.orbit-three { width: 32vw; height: 32vw; max-width: 420px; top: 24vh; left: 6vw; animation: spin 20s linear infinite; }

@keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes spinReverse { from { transform: rotate(360deg); } to { transform: rotate(0); } }

/* Планета и комета */
.planet {
  position: fixed; bottom: 12vh; left: 8vw; width: 120px; height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 30%, #ffeeb2, #f7d774 24%, #ca9d34 55%, #7c5413 100%);
  box-shadow: 0 0 40px rgba(247, 215, 116, 0.25);
  animation: pulsePlanet 5s ease-in-out infinite;
  z-index: 0; pointer-events: none;
}
.comet {
  position: fixed; top: 16vh; left: -20vw; width: 220px; height: 4px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), rgba(115, 199, 255, 0.2));
  transform: rotate(12deg); animation: cometFly 10s linear infinite; opacity: 0.8; z-index: 0; pointer-events: none;
}
@keyframes pulsePlanet { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes cometFly {
  0% { transform: translateX(0) translateY(0) rotate(12deg); opacity: 0; }
  10% { opacity: 1; } 70% { opacity: 1; }
  100% { transform: translateX(140vw) translateY(14vh) rotate(12deg); opacity: 0; }
}

.sputnik {
  position: fixed; top: 12vh; right: 16vw; width: 52px; z-index: 0; pointer-events: none;
  animation: drift 14s ease-in-out infinite;
}
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(16px) rotate(6deg); } }

.wrapper { position: relative; z-index: 1; width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: 28px 0 72px; }

/* Hero Section */
.hero {
  position: relative; overflow: hidden; border: 1px solid rgba(247, 215, 116, 0.26);
  border-radius: 28px; box-shadow: var(--shadow);
  background: linear-gradient(138deg, rgba(0,217,0,0.7) 0%, rgba(191,27,227,0.5) 38%, var(--bg-deep) 100%);
  padding: 44px 28px 34px; isolation: isolate;
}
.ribbon-section { display: flex; justify-content: space-between; }
.ribbon-left, .ribbon-right {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px;
  border-radius: 999px; border: 1px solid rgba(247, 215, 116, 0.32);
  text-transform: uppercase; letter-spacing: 0.18em; font-size: 12px; font-weight: 700;
  margin-bottom: 18px; backdrop-filter: blur(6px);
}
.ribbon-left { background: linear-gradient(90deg, rgba(247, 215, 116, 0.18), rgba(255, 255, 255, 0.08)); }
.ribbon-right { background: linear-gradient(141deg, #349b43ad, #671f84); }

.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: center; }
.title { margin: 0; font-size: clamp(38px, 6vw, 78px); line-height: 0.96; text-transform: uppercase; letter-spacing: 0.04em; }
.title .gold { color: var(--gold); display: inline-block; }
.subtitle { max-width: 720px; margin: 18px 0 0; font-size: clamp(18px, 2.2vw, 24px); line-height: 1.5; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.badge {
  padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12); font-weight: 700; backdrop-filter: blur(4px);
}

.poster-art { position: relative; min-height: 420px; display: grid; place-items: center; }
.sunburst {
  position: absolute; width: 330px; height: 330px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(247, 215, 116, 0.95) 0deg 8deg, transparent 8deg 16deg, rgba(247, 215, 116, 0.95) 16deg 24deg, transparent 24deg 32deg, rgba(247, 215, 116, 0.95) 32deg 40deg, transparent 40deg 48deg, rgba(247, 215, 116, 0.95) 48deg 56deg, transparent 56deg 64deg, rgba(247, 215, 116, 0.95) 64deg 72deg, transparent 72deg 80deg, rgba(247, 215, 116, 0.95) 80deg 88deg, transparent 88deg 96deg, rgba(247, 215, 116, 0.95) 96deg 104deg, transparent 104deg 112deg, rgba(247, 215, 116, 0.95) 112deg 120deg, transparent 120deg 128deg, rgba(247, 215, 116, 0.95) 128deg 136deg, transparent 136deg 144deg, rgba(247, 215, 116, 0.95) 144deg 152deg, transparent 152deg 160deg, rgba(247, 215, 116, 0.95) 160deg 168deg, transparent 168deg 176deg, rgba(247, 215, 116, 0.95) 176deg 184deg, transparent 184deg 192deg, rgba(247, 215, 116, 0.95) 192deg 200deg, transparent 200deg 208deg, rgba(247, 215, 116, 0.95) 208deg 216deg, transparent 216deg 224deg, rgba(247, 215, 116, 0.95) 224deg 232deg, transparent 232deg 240deg, rgba(247, 215, 116, 0.95) 240deg 248deg, transparent 248deg 256deg, rgba(247, 215, 116, 0.95) 256deg 264deg, transparent 264deg 272deg, rgba(247, 215, 116, 0.95) 272deg 280deg, transparent 280deg 288deg, rgba(247, 215, 116, 0.95) 288deg 296deg, transparent 296deg 304deg, rgba(247, 215, 116, 0.95) 304deg 312deg, transparent 312deg 320deg, rgba(247, 215, 116, 0.95) 320deg 328deg, transparent 328deg 336deg, rgba(247, 215, 116, 0.95) 336deg 344deg, transparent 344deg 352deg, rgba(247, 215, 116, 0.95) 352deg 360deg);
  filter: blur(1px); opacity: 0.9; animation: spin 28s linear infinite;
}
.rocket-wrap { position: relative; width: 280px; height: 360px; display: grid; place-items: center; animation: rocketFloat 4s ease-in-out infinite; }
@keyframes rocketFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.rocket-trail {
  position: absolute; bottom: 6px; width: 46px; height: 120px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 215, 116, 0.85), rgba(214, 40, 40, 0));
  filter: blur(10px); border-radius: 50% 50% 60% 60%; animation: flame 1s ease-in-out infinite alternate;
}
@keyframes flame { from { transform: scaleY(0.9); opacity: 0.85; } to { transform: scaleY(1.1); opacity: 1; } }
.rocket-svg { position: relative; width: 240px; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.4)); transform: rotate(-18deg); }

/* Sections */
.section {
  margin-top: 26px; padding: 28px; border-radius: 28px; background: var(--panel);
  border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(8px);
}
.section-title { margin: 0 0 18px; font-size: clamp(28px, 4vw, 42px); text-transform: uppercase; color: var(--gold); }
.greeting { font-size: clamp(18px, 2.1vw, 24px); line-height: 1.8; max-width: 900px; }
.greeting strong { color: var(--gold); }

/* Ticker */
.ticker {
  margin-top: 22px; border: 1px solid rgba(247, 215, 116, 0.28); background: rgba(214, 40, 40, 0.16);
  border-radius: 999px; overflow: hidden; position: relative;
}
.ticker-track {
  display: flex; gap: 32px; white-space: nowrap; padding: 12px 0; min-width: max-content;
  animation: tickerMove 24s linear infinite; font-weight: 800; text-transform: uppercase; color: var(--cream);
}
@keyframes tickerMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Gallery */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.photo-card {
  position: relative; overflow: hidden; border-radius: 24px; border: 1px solid rgba(247, 215, 116, 0.28);
  background: rgba(255,255,255,0.05); height: 480px; transition: transform 0.4s ease;
}
.photo-card:hover { transform: translateY(-6px); }
.photo-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s ease; }
.photo-card:hover img { transform: scale(1.08); }
.photo-label { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 2; }
.photo-label h3 { margin: 0 0 8px; font-size: 28px; color: var(--gold); }

/* Game */
.game-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 24px; align-items: start; }
.game-panel, .game-info {
  border-radius: 24px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.05);
  padding: 20px; backdrop-filter: blur(6px);
}
.controls { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
button {
  appearance: none; border: 0; cursor: pointer; padding: 12px 18px; border-radius: 14px;
  font-weight: 800; color: #210a0a; background: linear-gradient(180deg, var(--gold), var(--gold-soft));
  transition: transform 0.16s ease;
}
button:hover { transform: translateY(-2px); }
button.secondary { color: var(--cream); background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.12); }
.stats { display: flex; gap: 12px; margin-top: 10px; }
.stat { padding: 12px 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1); }
.stat span { display: block; font-size: 12px; opacity: 0.7; }
.stat strong { font-size: 24px; color: var(--gold); }

/* Puzzle Board */
.puzzle-board {
  --size: min(76vw, 520px);
  width: var(--size); height: var(--size); margin: 0 auto;
  display: grid;
  /* ВАЖНО: Сетка 4x4 */
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 8px; padding: 10px;
  background: rgba(5, 12, 24, 0.8); border-radius: 22px; border: 1px solid rgba(247, 215, 116, 0.25);
}
.tile {
  position: relative; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  /* Путь к картинке пазла */
  background-image: url('../shared/pictures/space-puzzle.jpeg');
  background-size: 400% 400%; /* Для сетки 4x4 */
  cursor: pointer;
}
.tile:hover { transform: scale(1.02); }
.tile.empty { background: rgba(255, 255, 255, 0.04); border-style: dashed; cursor: default; }
.tile.empty::after {
  content: "✦"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: rgba(247, 215, 116, 0.55); font-size: 22px;
}
.preview {
  margin-top: 18px; width: min(240px, 100%); aspect-ratio: 1; border-radius: 20px;
  border: 1px solid rgba(247, 215, 116, 0.25);
  background-image: url('../shared/pictures/space-puzzle.jpeg');
  background-size: cover; background-position: center;
}

/* Modal */
.success {
  position: fixed; inset: 0; display: none; place-items: center; background: rgba(3, 8, 22, 0.72);
  backdrop-filter: blur(8px); z-index: 10; padding: 20px;
}
.success.show { display: grid; animation: fadeIn 0.35s ease; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.success-card {
  width: min(92vw, 560px); border-radius: 28px; padding: 30px; text-align: center;
  border: 1px solid rgba(247, 215, 116, 0.32); background: linear-gradient(156deg, #00d900 0%, #861be3af 81%);
}
.success-card h3 { margin: 0 0 12px; font-size: clamp(28px, 5vw, 44px); color: var(--gold); text-transform: uppercase; }
.footer { margin-top: 26px; text-align: center; opacity: 0.82; font-size: 14px; text-transform: uppercase; }

/* Responsive */
@media (max-width: 980px) {
  .hero-grid, .gallery, .game-grid { grid-template-columns: 1fr; }
  .poster-art { min-height: 360px; }
}
@media (max-width: 850px) {
  .ribbon-section { flex-direction: column; }
  .ribbon-left, .ribbon-right { justify-content: center; text-align: center; }
}
@media (max-width: 430px) {
  .controls { flex-direction: column; width: 100%; }
  #shuffleBtn, #solveBtn, .stat { width: 100%; text-align: center; }
  .stats { flex-direction: column; width: 100%; }
}