css/styles.css - master - AlexMLev/stage3-beginners-clean

css/styles.css
1 020 строк21 KB
Alexey Malchikov
final version
07 апр 2026, 15:48
07 апр 2026, 15:482535e5e
: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;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 36px,
      rgba(255, 255, 255, 0.02) 36px 37px
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 36px,
      rgba(255, 255, 255, 0.02) 36px 37px
    );
  opacity: 0.25;
  mix-blend-mode: screen;
}

@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;
  max-height: 900px;
  top: -22vw;
  right: -18vw;
  animation: spin 38s linear infinite;
}

.orbit-two {
  width: 52vw;
  height: 52vw;
  max-width: 680px;
  max-height: 680px;
  bottom: -14vw;
  left: -8vw;
  animation: spinReverse 28s linear infinite;
}

.orbit-three {
  width: 32vw;
  height: 32vw;
  max-width: 420px;
  max-height: 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); }
}

.sputnik,
.planet,
.comet {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 18px rgba(247, 215, 116, 0.35));
}

.planet {
  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;
}

.planet::after {
  content: "";
  position: absolute;
  inset: 44% -18% auto -18%;
  height: 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: rotate(-12deg);
  opacity: 0.8;
}

.comet {
  position: fixed;
  top: 20vh;
  left: -30vw;
  width: 200px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.9),
    rgba(115, 199, 255, 0.6),
    rgba(115, 199, 255, 0)
  );
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.8),
    0 0 40px rgba(115, 199, 255, 0.6);
  transform: rotate(15deg);
  animation: cometFly 6s linear infinite;
  opacity: 0.9;
}

.comet::before {
  content: "";
  position: absolute;
  right: 0;
  top: -4px;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 10px white, 0 0 20px #73c7ff;
}

@keyframes pulsePlanet {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

@keyframes cometFly {
  0% {
    transform: translateX(0) translateY(0) rotate(15deg);
    opacity: 0;
  }
  10% { opacity: 1; }
  80% { opacity: 1; }
  100% {
    transform: translateX(150vw) translateY(30vh) rotate(15deg);
    opacity: 0;
  }
}

.sputnik {
  top: 12vh;
  right: 16vw;
  width: 52px;
  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 {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(247, 215, 116, 0.26);
  border-radius: 28px;
  box-shadow: var(--shadow);
  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(138deg, #00d900b7 0%, #bf1be382 38%, var(--bg-deep) 100%);
  padding: 44px 28px 34px;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: -30% auto auto -10%;
  width: 360px;
  height: 360px;
  background: radial-gradient(circle, rgba(247, 215, 116, 0.18), transparent 70%);
  animation: glowMove 7s ease-in-out infinite;
  z-index: -1;
}

.hero::after {
  content: "";
  position: absolute;
  right: -90px;
  bottom: -90px;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  border: 2px solid rgba(247, 215, 116, 0.16);
  box-shadow: inset 0 0 0 16px rgba(255, 255, 255, 0.02), inset 0 0 0 44px rgba(255, 255, 255, 0.015);
  animation: rotateSeal 14s linear infinite;
  z-index: -1;
}

@keyframes glowMove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(28px, 18px) scale(1.08); }
}

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

.ribbon-section {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.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);
  animation: ribbonBlink 3s ease-in-out infinite;
}

.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);
}

@keyframes ribbonBlink {
  0%, 100% { box-shadow: 0 0 0 rgba(247, 215, 116, 0); }
  50% { box-shadow: 0 0 28px rgba(247, 215, 116, 0.22); }
}

.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;
  text-shadow: 0 5px 20px rgba(0, 0, 0, 0.35);
}

.title .gold {
  color: var(--gold);
  display: inline-block;
  animation: titlePulse 4s ease-in-out infinite;
}

.subtitle {
  max-width: 720px;
  margin: 18px 0 0;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.5;
  color: rgba(255, 245, 214, 0.94);
}

.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);
  animation: badgeLift 6s ease-in-out infinite;
}

.badge:nth-child(2) { animation-delay: 0.8s; }
.badge:nth-child(3) { animation-delay: 1.6s; }

@keyframes badgeLift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes titlePulse {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px) scale(1.01); }
}

.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, rgba(247, 215, 116, 0.12) 8deg 16deg,
    rgba(247, 215, 116, 0.95) 16deg 24deg, rgba(247, 215, 116, 0.12) 24deg 32deg,
    rgba(247, 215, 116, 0.95) 32deg 40deg, rgba(247, 215, 116, 0.12) 40deg 48deg,
    rgba(247, 215, 116, 0.95) 48deg 56deg, rgba(247, 215, 116, 0.12) 56deg 64deg,
    rgba(247, 215, 116, 0.95) 64deg 72deg, rgba(247, 215, 116, 0.12) 72deg 80deg,
    rgba(247, 215, 116, 0.95) 80deg 88deg, rgba(247, 215, 116, 0.12) 88deg 96deg,
    rgba(247, 215, 116, 0.95) 96deg 104deg, rgba(247, 215, 116, 0.12) 104deg 112deg,
    rgba(247, 215, 116, 0.95) 112deg 120deg, rgba(247, 215, 116, 0.12) 120deg 128deg,
    rgba(247, 215, 116, 0.95) 128deg 136deg, rgba(247, 215, 116, 0.12) 136deg 144deg,
    rgba(247, 215, 116, 0.95) 144deg 152deg, rgba(247, 215, 116, 0.12) 152deg 160deg,
    rgba(247, 215, 116, 0.95) 160deg 168deg, rgba(247, 215, 116, 0.12) 168deg 176deg,
    rgba(247, 215, 116, 0.95) 176deg 184deg, rgba(247, 215, 116, 0.12) 184deg 192deg,
    rgba(247, 215, 116, 0.95) 192deg 200deg, rgba(247, 215, 116, 0.12) 200deg 208deg,
    rgba(247, 215, 116, 0.95) 208deg 216deg, rgba(247, 215, 116, 0.12) 216deg 224deg,
    rgba(247, 215, 116, 0.95) 224deg 232deg, rgba(247, 215, 116, 0.12) 232deg 240deg,
    rgba(247, 215, 116, 0.95) 240deg 248deg, rgba(247, 215, 116, 0.12) 248deg 256deg,
    rgba(247, 215, 116, 0.95) 256deg 264deg, rgba(247, 215, 116, 0.12) 264deg 272deg,
    rgba(247, 215, 116, 0.95) 272deg 280deg, rgba(247, 215, 116, 0.12) 280deg 288deg,
    rgba(247, 215, 116, 0.95) 288deg 296deg, rgba(247, 215, 116, 0.12) 296deg 304deg,
    rgba(247, 215, 116, 0.95) 304deg 312deg, rgba(247, 215, 116, 0.12) 312deg 320deg,
    rgba(247, 215, 116, 0.95) 320deg 328deg, rgba(247, 215, 116, 0.12) 328deg 336deg,
    rgba(247, 215, 116, 0.95) 336deg 344deg, rgba(247, 215, 116, 0.12) 344deg 352deg,
    rgba(247, 215, 116, 0.95) 352deg 360deg
  );
  filter: blur(1px) drop-shadow(0 0 24px rgba(247, 215, 116, 0.25));
  animation: spin 28s linear infinite;
  opacity: 0.9;
}

.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;
  transform-origin: top center;
}

@keyframes flame {
  from { transform: scaleY(0.9) scaleX(0.92); opacity: 0.85; }
  to { transform: scaleY(1.08) scaleX(1.06); opacity: 1; }
}

.rocket-svg {
  position: relative;
  width: 240px;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.4));
  transform: rotate(-18deg);
}

.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);
  position: relative;
  overflow: hidden;
}

.section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.03), transparent);
  transform: translateX(-100%);
  animation: sheen 7s linear infinite;
  pointer-events: none;
}

@keyframes sheen {
  0% { transform: translateX(-100%); }
  35%, 100% { transform: translateX(140%); }
}

.section-title {
  margin: 0 0 18px;
  font-size: clamp(28px, 4vw, 42px);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gold);
}

.greeting {
  font-size: clamp(18px, 2.1vw, 24px);
  line-height: 1.8;
  max-width: 900px;
  color: rgba(255, 245, 214, 0.96);
  white-space: pre-line;
}

.greeting strong {
  color: var(--gold);
}

.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;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cream);
}

@keyframes tickerMove {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

.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: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  height: 480px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.photo-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.02);
  transition: transform 0.7s ease;
  filter: saturate(0.95) contrast(1.05);
}

.photo-card:hover img {
  transform: scale(1.08);
}

.photo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 16, 32, 0.02), rgba(7, 16, 32, 0.05) 35%, rgba(7, 16, 32, 0.84) 100%);
  z-index: 1;
}

.photo-card::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(247, 215, 116, 0.32);
  border-radius: 18px;
  z-index: 1;
  pointer-events: none;
}

.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);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.photo-label p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: rgba(255, 245, 214, 0.94);
}

.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);
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.game-info p {
  margin: 0 0 14px;
  line-height: 1.7;
  font-size: 17px;
  color: rgba(255, 245, 214, 0.94);
}

.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;
  letter-spacing: 0.03em;
  color: #210a0a;
  background: linear-gradient(180deg, var(--gold), var(--gold-soft));
  box-shadow: 0 10px 20px rgba(247, 215, 116, 0.2);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.2s ease;
}

button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 24px rgba(247, 215, 116, 0.28);
  filter: brightness(1.03);
}

button.secondary {
  color: var(--cream);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.06));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: none;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.stat {
  min-width: 120px;
  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;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.7;
  margin-bottom: 6px;
}

.stat strong {
  font-size: 24px;
  color: var(--gold);
}

.puzzle-board {
  --size: min(76vw, 520px);
  width: var(--size);
  height: var(--size);
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  background: rgba(5, 12, 24, 0.8);
  border-radius: 22px;
  border: 1px solid rgba(247, 215, 116, 0.25);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03), 0 14px 35px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.puzzle-board::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.07), transparent 30%);
  pointer-events: none;
}

.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: 300% 300%;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.24);
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.25s ease;
  cursor: pointer;
  isolation: isolate;
}

.tile:hover {
  transform: scale(1.02);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34);
}

.tile::after {
  content: attr(data-num);
  position: absolute;
  left: 8px;
  top: 8px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(7, 16, 32, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--cream);
  font-weight: 800;
  font-size: 13px;
  z-index: 1;
  backdrop-filter: blur(4px);
}

.tile.empty {
  background: rgba(255, 255, 255, 0.04);
  border-style: dashed;
  cursor: default;
  box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.18);
}

.tile.empty::after {
  content: "✦";
  background: transparent;
  border: 0;
  color: rgba(247, 215, 116, 0.55);
  font-size: 22px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
}

.hint {
  margin-top: 14px;
  font-size: 14px;
  opacity: 0.8;
  text-align: center;
}

.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;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  overflow: hidden;
  position: relative;
}

.preview::after {
  content: "Образец";
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 8px 10px;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(7, 16, 32, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.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%);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  position: relative;
  overflow: hidden;
}

.success-card::before,
.success-card::after {
  content: "★";
  position: absolute;
  font-size: 28px;
  color: rgba(247, 215, 116, 0.85);
  animation: burst 1.8s ease-in-out infinite;
}

.success-card::before {
  top: 18px;
  left: 18px;
}

.success-card::after {
  bottom: 18px;
  right: 22px;
  animation-delay: 0.6s;
}

@keyframes burst {
  0%, 100% { transform: scale(1) rotate(0); opacity: 0.7; }
  50% { transform: scale(1.3) rotate(18deg); opacity: 1; }
}

.success-card h3 {
  margin: 0 0 12px;
  font-size: clamp(28px, 5vw, 44px);
  color: var(--gold);
  text-transform: uppercase;
}

.success-card p {
  margin: 0 0 22px;
  line-height: 1.7;
  font-size: 18px;
  color: rgba(255, 245, 214, 0.96);
}

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .gallery {
    grid-template-columns: 1fr;
  }

  .game-grid {
    grid-template-columns: 1fr;
  }

  .poster-art {
    min-height: 320px;
  }

  .rocket-svg {
    width: 200px;
  }

  .puzzle-board {
    --size: min(88vw, 520px);
  }
}/* ===== FOOTER ===== */
.footer {
  margin-top: 26px;
  text-align: center;
  opacity: 0.82;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ===== FINAL ADAPTIVE ===== */
@media (max-width: 980px) {
  .hero-grid,
  .gallery,
  .game-grid {
    grid-template-columns: 1fr;
  }

  .poster-art {
    min-height: 360px;
  }

  .photo-card {
    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: 640px) {
  .wrapper {
    width: min(100% - 18px, 1180px);
  }

  .hero,
  .section {
    padding: 20px;
    border-radius: 22px;
  }

  .title {
    line-height: 1.02;
  }

  .rocket-wrap {
    width: 240px;
    height: 300px;
  }

  .sunburst {
    width: 260px;
    height: 260px;
  }

  .puzzle-board {
    gap: 6px;
    padding: 8px;
  }

  .tile {
    border-radius: 12px;
  }

  .photo-label h3 {
    font-size: 24px;
  }
}

@media (max-width: 430px) {
  .controls {
    flex-direction: column;
    width: 100%;
  }

  #shuffleBtn,
  #solveBtn,
  .stat {
    width: 100%;
    text-align: center;
  }

  .stats {
    align-items: center;
    flex-direction: column;
    width: 100%;
  }
}