:root {
  --bg: #f6f8ff;
  --surface: #ffffff;
  --surface-soft: #edf2ff;

  --text: #17213b;
  --muted: #66718c;

  --blue: #5267e8;
  --blue-dark: #3548bf;
  --cyan: #50cbe8;
  --yellow: #ffd868;
  --green: #77d7a0;
  --pink: #ff8fa9;

  --line: rgba(53, 72, 191, 0.11);

  --radius-xl: 40px;
  --radius-lg: 30px;
  --radius-md: 20px;

  --shadow:
    0 22px 70px rgba(60, 72, 130, 0.12),
    0 4px 16px rgba(60, 72, 130, 0.06);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;

  color: var(--text);
  background:
    radial-gradient(circle at 8% 2%, rgba(80, 203, 232, 0.13), transparent 28rem),
    radial-gradient(circle at 94% 22%, rgba(255, 216, 104, 0.17), transparent 27rem),
    var(--bg);

  font-family:
    Inter,
    ui-rounded,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

.page-shell {
  width: min(100% - 28px, 1220px);
  margin: 0 auto;
}


/* HEADER */

.site-header {
  min-height: 104px;
  display: flex;
  align-items: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  border-radius: 18px;
}

.brand-mark {
  width: 50px;
  height: 50px;

  position: relative;
  display: grid;
  place-items: center;

  flex: 0 0 auto;

  color: white;
  background: linear-gradient(145deg, #6276f2, #3c50cc);
  border-radius: 50%;

  box-shadow:
    0 9px 24px rgba(71, 89, 208, 0.25),
    inset 0 1px rgba(255, 255, 255, 0.35);
}

.brand-core {
  position: relative;
  z-index: 2;

  font-size: 21px;
  line-height: 1;
  font-weight: 950;
}

.brand-orbit {
  position: absolute;
  width: 62px;
  height: 21px;

  border: 2px solid rgba(80, 203, 232, 0.9);
  border-radius: 50%;

  transform: rotate(-18deg);
}

.brand-orbit::after {
  content: "";
  width: 7px;
  height: 7px;

  position: absolute;
  top: -4px;
  right: 9px;

  background: var(--yellow);
  border-radius: 50%;
}

.brand-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.brand-text strong {
  font-size: 18px;
  line-height: 1.1;
  font-weight: 900;
}

.brand-text small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}


/* HERO */

.hero {
  min-height: 525px;
  padding: 62px clamp(28px, 6vw, 78px);

  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.92fr);
  align-items: center;
  gap: 40px;

  color: white;

  background:
    radial-gradient(circle at 78% 35%, rgba(80, 203, 232, 0.16), transparent 17rem),
    linear-gradient(135deg, #1e294c 0%, #283767 54%, #3f54c8 100%);

  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}

.hero::before {
  content: "";
  width: 420px;
  height: 420px;

  position: absolute;
  top: -270px;
  left: 28%;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.hero::after {
  content: "";
  width: 250px;
  height: 250px;

  position: absolute;
  bottom: -190px;
  left: 8%;

  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
}

.hero-copy {
  position: relative;
  z-index: 3;
}

.eyebrow {
  margin: 0 0 14px;

  color: var(--blue);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.hero .eyebrow {
  color: #91e7f8;
}

.hero h1 {
  max-width: 680px;
  margin: 0;

  font-size: clamp(48px, 6.4vw, 84px);
  line-height: 0.97;
  letter-spacing: -0.055em;
  font-weight: 950;
}

.hero h1 span {
  display: block;
  color: var(--yellow);
}

.hero-text {
  max-width: 585px;
  margin: 25px 0 0;

  color: rgba(244, 247, 255, 0.78);
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.55;
  font-weight: 550;
}

.hero-action {
  min-height: 56px;
  margin-top: 32px;
  padding: 0 21px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  color: #17213b;
  background: white;

  border-radius: 18px;

  font-size: 15px;
  font-weight: 850;

  box-shadow: 0 13px 30px rgba(7, 12, 32, 0.2);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.hero-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 17px 38px rgba(7, 12, 32, 0.26);
}


/* PLANET */

.planet-scene {
  min-height: 330px;
  position: relative;

  display: grid;
  place-items: center;
}

.planet {
  width: clamp(230px, 26vw, 325px);
  aspect-ratio: 1;

  position: relative;
  display: grid;
  place-items: center;

  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.43), transparent 9%),
    radial-gradient(circle at 58% 66%, rgba(255, 216, 104, 0.52), transparent 7%),
    radial-gradient(circle at 66% 30%, rgba(119, 215, 160, 0.65), transparent 17%),
    linear-gradient(145deg, #65d8ee, #5a72e7 62%, #4557c3);

  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;

  box-shadow:
    inset -32px -34px 55px rgba(29, 33, 94, 0.24),
    inset 20px 18px 40px rgba(255, 255, 255, 0.13),
    0 35px 80px rgba(8, 13, 45, 0.34);
}

.planet::before {
  content: "";

  width: 135%;
  height: 30%;

  position: absolute;

  border: 8px solid rgba(255, 216, 104, 0.85);
  border-left-color: rgba(255, 216, 104, 0.3);
  border-radius: 50%;

  transform: rotate(-14deg);
}

.planet::after {
  content: "";

  width: 77%;
  height: 77%;

  position: absolute;

  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
}

.planet-symbol {
  position: relative;
  z-index: 2;

  color: white;

  font-size: clamp(28px, 4vw, 43px);
  letter-spacing: -0.04em;
  font-weight: 950;

  text-shadow: 0 8px 25px rgba(25, 29, 87, 0.24);
}

.satellite {
  position: absolute;
  z-index: 3;
}

.satellite-one {
  top: 12%;
  left: 7%;

  color: var(--yellow);
  font-size: 25px;
}

.satellite-two {
  right: 3%;
  bottom: 20%;

  color: var(--pink);
  font-size: 17px;
}

.satellite-three {
  right: 12%;
  top: 5%;

  color: #8ef0ff;
  font-size: 15px;
}


/* LIBRARY */

.library {
  padding: 94px 2px 34px;
  scroll-margin-top: 24px;
}

.section-heading {
  margin-bottom: 28px;

  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
}

.section-heading h2 {
  margin: 0;

  font-size: clamp(34px, 5vw, 54px);
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 950;
}

.library-note {
  max-width: 320px;
  margin: 0;

  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.game-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}


/* GAME CARD */

.game-card {
  min-height: 365px;

  display: grid;
  grid-template-columns: minmax(220px, 0.88fr) minmax(0, 1.12fr);

  overflow: hidden;

  background: var(--surface);

  border: 1px solid var(--line);
  border-radius: var(--radius-lg);

  box-shadow: var(--shadow);
}

.game-cover {
  min-height: 365px;

  position: relative;
  overflow: hidden;

  display: flex;
  align-items: flex-end;

  padding: 28px;

  color: white;

  background:
    radial-gradient(circle at 20% 14%, rgba(117, 228, 255, 0.22), transparent 11rem),
    linear-gradient(150deg, #172642, #24375d 58%, #182947);
}

.game-cover::after {
  content: "";

  position: absolute;
  inset: auto -20% -38% 18%;

  height: 67%;

  background: rgba(6, 11, 26, 0.28);
  border-radius: 50%;
  filter: blur(2px);
}

.game-cover-grid {
  position: absolute;
  inset: 0;
}

.object {
  width: 76px;
  height: 76px;

  position: absolute;

  display: grid;
  place-items: center;

  background: linear-gradient(145deg, #ffffff, #dce6f4);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 22px;

  box-shadow: 0 14px 25px rgba(0, 0, 0, 0.27);
}

.object-circle {
  top: 17%;
  left: 15%;
}

.object-circle::after {
  content: "";
  width: 34px;
  height: 34px;

  background: var(--cyan);
  border-radius: 50%;
}

.object-square {
  top: 9%;
  right: 14%;

  transform: rotate(8deg);
}

.object-square::after {
  content: "";
  width: 35px;
  height: 35px;

  background: var(--pink);
  border-radius: 8px;
}

.object-star {
  top: 43%;
  right: 16%;

  color: #f6c948;
  font-size: 43px;

  transform: rotate(-7deg);
}

.object-diamond {
  top: 48%;
  left: 20%;

  transform: rotate(8deg);
}

.object-diamond::after {
  content: "";
  width: 33px;
  height: 33px;

  background: var(--green);
  border-radius: 6px;

  transform: rotate(45deg);
}

.game-cover-title {
  position: relative;
  z-index: 3;

  display: flex;
  flex-direction: column;

  text-shadow: 0 8px 23px rgba(0, 0, 0, 0.28);
}

.game-cover-title span {
  color: #a9b8d7;
  font-size: 15px;
  font-weight: 850;
}

.game-cover-title strong {
  font-size: clamp(29px, 3vw, 40px);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 950;
}

.game-info {
  padding: 31px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.game-topline {
  width: 100%;
  margin-bottom: 17px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.game-type,
.game-ready {
  font-size: 11px;
  line-height: 1;
  font-weight: 850;
}

.game-type {
  padding: 7px 10px;

  color: var(--blue-dark);
  background: var(--surface-soft);

  border-radius: 99px;
}

.game-ready {
  color: #4a9c6a;
}

.game-info h3 {
  margin: 0;

  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 950;
}

.game-info p {
  margin: 15px 0 18px;

  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.game-tags {
  margin-bottom: 24px;

  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.game-tags span {
  padding: 7px 10px;

  color: #56617b;
  background: #f4f6fb;

  border-radius: 10px;

  font-size: 11px;
  font-weight: 750;
}

.play-button {
  width: 100%;
  min-height: 54px;
  margin-top: auto;
  padding: 0 10px 0 19px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  color: white;
  background: linear-gradient(135deg, var(--blue), var(--blue-dark));

  border-radius: 16px;

  font-size: 15px;
  font-weight: 900;

  box-shadow: 0 11px 23px rgba(63, 82, 196, 0.2);

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease;
}

.play-arrow {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  background: rgba(255, 255, 255, 0.13);

  border-radius: 11px;

  font-size: 20px;
}

.play-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(63, 82, 196, 0.28);
}


/* FOOTER */

.site-footer {
  min-height: 135px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  color: var(--muted);

  font-size: 13px;
}

.site-footer strong {
  color: var(--text);
  font-size: 15px;
}


/* RESPONSIVE */

@media (max-width: 900px) {
  .hero {
    min-height: 0;
    grid-template-columns: 1fr;
    padding: 46px 34px 34px;
  }

  .hero-copy {
    max-width: 680px;
  }

  .planet-scene {
    min-height: 275px;
  }

  .planet {
    width: min(68vw, 285px);
  }

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

@media (max-width: 650px) {
  .page-shell {
    width: min(100% - 20px, 1220px);
  }

  .site-header {
    min-height: 88px;
  }

  .brand-mark {
    width: 44px;
    height: 44px;
  }

  .brand-orbit {
    width: 55px;
  }

  .brand-text strong {
    font-size: 16px;
  }

  .brand-text small {
    font-size: 11px;
  }

  .hero {
    padding: 38px 24px 27px;
    border-radius: 30px;
  }

  .hero h1 {
    font-size: clamp(43px, 14vw, 64px);
  }

  .hero-text {
    margin-top: 20px;
    font-size: 16px;
  }

  .hero-action {
    width: 100%;
    margin-top: 25px;
  }

  .planet-scene {
    min-height: 235px;
  }

  .planet {
    width: min(64vw, 240px);
  }

  .library {
    padding-top: 68px;
  }

  .section-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

  .library-note {
    max-width: none;
  }

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

  .game-cover {
    min-height: 300px;
  }

  .game-info {
    padding: 25px 22px 22px;
  }

  .site-footer {
    min-height: 110px;
  }
}

@media (max-width: 390px) {
  .brand-text small {
    display: none;
  }

  .hero {
    padding-left: 20px;
    padding-right: 20px;
  }

  .game-cover {
    min-height: 275px;
    padding: 22px;
  }

  .object {
    width: 66px;
    height: 66px;
  }

  .game-topline {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition: none !important;
  }
}


/* =========================================================
   PLANET U047 — HOME v0.2
   Additions for the first real catalogue skeleton
   ========================================================= */


/* HEADER NAV */

.site-header {
  justify-content: space-between;
  gap: 28px;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link {
  padding: 10px 14px;

  color: var(--muted);
  border-radius: 12px;

  font-size: 13px;
  font-weight: 800;

  transition:
    color 0.18s ease,
    background 0.18s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--blue-dark);
  background: rgba(82, 103, 232, 0.08);
}


/* HERO v0.2 — slightly more compact on desktop */

@media (min-width: 901px) {
  .hero {
    min-height: 465px;
    padding-top: 48px;
    padding-bottom: 48px;
  }

  .planet-scene {
    min-height: 300px;
  }
}


/* CATALOG CONTROLS */

.catalog-tools {
  margin-bottom: 22px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.category-scroll {
  min-width: 0;

  display: flex;
  align-items: center;
  gap: 8px;

  overflow-x: auto;
  overscroll-behavior-inline: contain;

  scrollbar-width: none;
}

.category-scroll::-webkit-scrollbar {
  display: none;
}

.category-chip,
.filter-button,
.filter-options button {
  appearance: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

.category-chip {
  min-height: 42px;
  padding: 0 15px;

  flex: 0 0 auto;

  color: #68738c;
  background: #fff;

  border: 1px solid var(--line);
  border-radius: 14px;

  font-size: 12px;
  font-weight: 850;

  transition:
    transform 0.16s ease,
    color 0.16s ease,
    background 0.16s ease,
    border-color 0.16s ease;
}

.category-chip:hover {
  transform: translateY(-1px);
}

.category-chip.active {
  color: #fff;
  background: var(--text);
  border-color: var(--text);
}

.filter-button {
  min-height: 42px;
  padding: 0 15px;

  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: var(--blue-dark);
  background: var(--surface-soft);

  border-radius: 14px;

  font-size: 12px;
  font-weight: 900;
}

.filter-icon {
  font-size: 17px;
  line-height: 1;
}


/* FILTER PANEL */

.filter-panel {
  margin: -4px 0 24px;
  padding: 22px;

  background:
    linear-gradient(135deg, rgba(237, 242, 255, 0.88), rgba(255, 255, 255, 0.96));

  border: 1px solid var(--line);
  border-radius: 24px;
}

.filter-panel[hidden] {
  display: none;
}

.filter-panel-head {
  margin-bottom: 20px;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.filter-panel-head > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.filter-panel-head strong {
  font-size: 17px;
  font-weight: 950;
}

.filter-panel-head span {
  color: var(--muted);
  font-size: 12px;
}

.filter-close {
  width: 36px;
  height: 36px;

  display: grid;
  place-items: center;

  appearance: none;
  cursor: pointer;

  color: var(--muted);
  background: #fff;

  border: 1px solid var(--line);
  border-radius: 11px;

  font-size: 22px;
  line-height: 1;
}

.filter-groups {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.filter-group {
  padding: 15px;

  background: rgba(255, 255, 255, 0.74);
  border-radius: 17px;
}

.filter-label {
  display: block;
  margin-bottom: 10px;

  color: #49546e;
  font-size: 11px;
  font-weight: 900;
}

.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-options button {
  min-height: 31px;
  padding: 0 9px;

  color: #68738c;
  background: #f3f5fa;

  border-radius: 9px;

  font-size: 10px;
  font-weight: 800;
}

.filter-options button.selected {
  color: #fff;
  background: var(--blue);
}

.filter-demo-note {
  margin: 16px 0 0;

  color: #7a849a;
  font-size: 11px;
  line-height: 1.5;
}


/* v0.2 GRID */

.game-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}

.game-card-featured {
  grid-column: 1 / -1;
}


/* PREVIEW CARDS */

.preview-card {
  min-height: 340px;

  display: grid;
  grid-template-columns: minmax(170px, 0.8fr) minmax(0, 1.2fr);

  overflow: hidden;

  background: #fff;

  border: 1px solid var(--line);
  border-radius: var(--radius-lg);

  box-shadow:
    0 15px 45px rgba(60, 72, 130, 0.08),
    0 3px 10px rgba(60, 72, 130, 0.04);
}

.preview-art {
  min-height: 340px;

  position: relative;
  overflow: hidden;

  display: grid;
  place-items: center;
}

.preview-violet .preview-art {
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.3), transparent 20%),
    linear-gradient(145deg, #776be9, #4656c7);
}

.preview-green .preview-art {
  background:
    radial-gradient(circle at 75% 20%, rgba(255,255,255,.28), transparent 18%),
    linear-gradient(145deg, #55cda0, #279e91);
}

.preview-yellow .preview-art {
  background:
    radial-gradient(circle at 25% 25%, rgba(255,255,255,.42), transparent 18%),
    linear-gradient(145deg, #ffd56d, #f4a85c);
}

.preview-art > strong {
  position: relative;
  z-index: 3;

  color: rgba(255,255,255,.96);
  font-size: 66px;
  font-weight: 950;

  text-shadow: 0 10px 30px rgba(34, 35, 90, 0.18);
}

.preview-shape {
  position: absolute;
  background: rgba(255,255,255,.22);
}

.shape-one {
  width: 95px;
  height: 95px;
  top: 10%;
  left: -20px;

  border-radius: 28px;
  transform: rotate(18deg);
}

.shape-two {
  width: 62px;
  height: 62px;
  right: 12%;
  bottom: 14%;

  border-radius: 50%;
}

.shape-three {
  width: 36px;
  height: 36px;
  top: 19%;
  right: 15%;

  border: 7px solid rgba(255,255,255,.4);
  background: transparent;
  border-radius: 50%;
}

.preview-art-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.preview-art-numbers span {
  width: 58px;
  height: 70px;

  display: grid;
  place-items: center;

  color: #218476;
  background: rgba(255,255,255,.88);

  border-radius: 18px;

  font-size: 29px;
  font-weight: 950;

  box-shadow: 0 14px 25px rgba(20, 91, 83, 0.14);
}

.preview-art-numbers span:nth-child(2) {
  transform: translateY(22px) rotate(6deg);
}

.preview-art-numbers span:nth-child(3) {
  transform: translateY(-16px) rotate(-7deg);
}

.preview-art-creative strong {
  color: rgba(255,255,255,.95);
}

.creative-line {
  width: 125px;
  height: 16px;

  position: absolute;

  background: rgba(255,255,255,.72);
  border-radius: 99px;
}

.line-one {
  transform: translate(-18px, -35px) rotate(-25deg);
}

.line-two {
  transform: translate(20px, 40px) rotate(22deg);
}

.creative-dot {
  position: absolute;
  border-radius: 50%;
}

.dot-one {
  width: 34px;
  height: 34px;

  top: 17%;
  right: 18%;

  background: #ff8fa9;
}

.dot-two {
  width: 24px;
  height: 24px;

  left: 16%;
  bottom: 17%;

  background: #6577e9;
}

.preview-info {
  padding: 26px;

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.preview-status {
  margin-bottom: 12px;
  padding: 6px 9px;

  color: #7b849a;
  background: #f3f5f9;

  border-radius: 9px;

  font-size: 9px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.preview-info h3 {
  margin: 0;

  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 950;
}

.preview-info p {
  margin: 13px 0 18px;

  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}


/* COMING / UPDATE SECTION */

.coming-section {
  min-height: 355px;
  margin-top: 85px;
  padding: 48px clamp(28px, 5vw, 58px);

  position: relative;
  overflow: hidden;

  display: grid;
  grid-template-columns: 1fr 310px;
  align-items: center;
  gap: 40px;

  color: white;

  background:
    radial-gradient(circle at 85% 30%, rgba(80, 203, 232, .15), transparent 18rem),
    linear-gradient(135deg, #1e294c, #2c3d75);

  border-radius: var(--radius-xl);
}

.coming-copy {
  position: relative;
  z-index: 2;
}

.coming-copy .eyebrow {
  color: #91e7f8;
}

.coming-copy h2 {
  margin: 0;

  font-size: clamp(35px, 4.5vw, 57px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-weight: 950;
}

.coming-copy > p:last-child {
  max-width: 600px;
  margin: 20px 0 0;

  color: rgba(244,247,255,.7);
  font-size: 14px;
  line-height: 1.65;
}

.coming-orbit {
  width: 245px;
  height: 245px;

  position: relative;

  display: grid;
  place-items: center;

  justify-self: center;

  border: 1px solid rgba(255,255,255,.13);
  border-radius: 50%;
}

.coming-orbit::before {
  content: "";

  width: 145%;
  height: 42%;

  position: absolute;

  border: 2px solid rgba(255,216,104,.5);
  border-radius: 50%;

  transform: rotate(-17deg);
}

.mini-planet {
  width: 120px;
  height: 120px;

  display: grid;
  place-items: center;

  color: white;
  background: linear-gradient(145deg, #62d5e9, #5368dd);

  border-radius: 50%;

  font-size: 34px;
  font-weight: 950;

  box-shadow: 0 22px 45px rgba(5,10,35,.28);
}

.orbit-dot {
  position: absolute;
  border-radius: 50%;
}

.dot-a {
  width: 13px;
  height: 13px;

  top: 20px;
  left: 25px;

  background: var(--yellow);
}

.dot-b {
  width: 9px;
  height: 9px;

  right: 15px;
  bottom: 54px;

  background: var(--pink);
}

.dot-c {
  width: 7px;
  height: 7px;

  right: 44px;
  top: 25px;

  background: var(--cyan);
}


/* FOOTER v0.2 */

.site-footer {
  min-height: 160px;

  border-top: 1px solid var(--line);
  margin-top: 80px;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.footer-brand strong {
  color: var(--text);
  font-size: 15px;
  font-weight: 950;
}

.footer-brand span,
.footer-growing {
  color: var(--muted);
  font-size: 11px;
}

.footer-links {
  display: flex;
  gap: 18px;
}

.footer-links a {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.footer-links a:hover {
  color: var(--blue);
}


/* v0.2 RESPONSIVE */

@media (max-width: 900px) {
  .filter-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .preview-card {
    grid-template-columns: minmax(170px, .75fr) minmax(0, 1.25fr);
  }

  .coming-section {
    grid-template-columns: 1fr;
  }

  .coming-orbit {
    width: 210px;
    height: 210px;
  }
}

@media (max-width: 650px) {
  .site-header {
    min-height: 84px;
  }

  .main-nav {
    gap: 2px;
  }

  .nav-link {
    padding: 9px 8px;
    font-size: 11px;
  }

  .nav-link:nth-child(2) {
    display: none;
  }

  .catalog-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .category-scroll {
    width: calc(100vw - 20px);
    margin-left: 0;
    padding-right: 14px;
  }

  .filter-button {
    align-self: flex-start;
  }

  .filter-panel {
    padding: 17px;
  }

  .filter-groups {
    grid-template-columns: 1fr;
  }

  .game-card-featured {
    grid-column: auto;
  }

  .preview-card {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .preview-art {
    min-height: 220px;
  }

  .preview-info {
    padding: 22px;
  }

  .coming-section {
    min-height: 0;
    margin-top: 65px;
    padding: 38px 24px 30px;

    border-radius: 30px;
  }

  .coming-orbit {
    width: 180px;
    height: 180px;
  }

  .mini-planet {
    width: 95px;
    height: 95px;
  }

  .site-footer {
    min-height: 180px;
    padding: 32px 0;

    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
  }
}

@media (max-width: 390px) {
  .nav-link {
    display: none;
  }
}


/* =========================================================
   v0.2.1 — FIX NARROW CATALOG CARDS
   На узких экранах каталог всегда идёт одной колонкой.
   ========================================================= */

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

  .game-card,
  .preview-card {
    width: 100%;
    min-width: 0;
  }

  .game-card-featured {
    grid-column: auto;
  }

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

  .game-cover {
    min-height: 300px;
  }

  .preview-card {
    grid-template-columns: 1fr;
  }

  .preview-art {
    min-height: 240px;
  }

  .game-info,
  .preview-info {
    min-width: 0;
  }
}


/* =========================================================
   v0.2.2 — HERO COPY + TIGHTER CATALOG GAP
   ========================================================= */

.library {
  padding-top: 52px;
}

@media (max-width: 650px) {
  .library {
    padding-top: 44px;
  }
}


/* =========================================================
   v0.2.3 — COPY + PLANET GLOW + QUIET STARS
   ========================================================= */

/* Ю047 становится частью самой планеты */

.planet-symbol {
  color: #fff4c7;

  text-shadow:
    0 0 8px rgba(255, 241, 181, 0.32),
    0 0 22px rgba(255, 216, 104, 0.18),
    0 8px 25px rgba(25, 29, 87, 0.25);

  letter-spacing: -0.025em;
}


/* Медленное мерцание звёзд */

@keyframes planet-star-twinkle {
  0%,
  100% {
    opacity: 0.42;
    transform: scale(0.82);
    filter: brightness(0.9);
  }

  48% {
    opacity: 1;
    transform: scale(1.08);
    filter: brightness(1.25);
  }

  62% {
    opacity: 0.76;
    transform: scale(0.96);
    filter: brightness(1.05);
  }
}

.satellite-one {
  animation: planet-star-twinkle 5.8s ease-in-out infinite;
}

.satellite-three {
  animation: planet-star-twinkle 7.4s ease-in-out 1.7s infinite;
}


/* Добавляем ещё несколько очень тихих звёзд без нового HTML */

.planet-scene::before,
.planet-scene::after {
  content: "✦";

  position: absolute;
  z-index: 2;

  pointer-events: none;

  animation: planet-star-twinkle 8.6s ease-in-out infinite;
}

.planet-scene::before {
  top: 22%;
  right: 1%;

  color: #fff2ae;
  font-size: 11px;

  animation-delay: 2.8s;
}

.planet-scene::after {
  left: 3%;
  bottom: 16%;

  color: #9eefff;
  font-size: 8px;

  animation-delay: 4.1s;
}


/* После удаления абзаца блок будущего становится чище */

.coming-copy h2 {
  max-width: 720px;
}

@media (prefers-reduced-motion: reduce) {
  .satellite-one,
  .satellite-three,
  .planet-scene::before,
  .planet-scene::after {
    animation: none;
    opacity: 0.8;
  }
}

/* Планета Ю047 · Энергокубы: первая настоящая карточка игры */
.energy-card .energy-cover {
  isolation: isolate;
  background: radial-gradient(circle at 72% 32%, #218fcc66, transparent 40%),
              linear-gradient(145deg,#081a38,#193978 58%,#0b1c3c);
}
.energy-card .energy-cover::before {
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(#c4eaff 1px,transparent 1px);
  background-size:39px 43px;opacity:.20;
}
.energy-card .game-cover-title {text-shadow:0 3px 13px #000a;}
.energy-card .game-cover-title span {color:#95e8ff;}
.energy-card .game-ready {color:#248553;}
.energy-cubes-art {position:absolute;inset:0;pointer-events:none;}
.energy-art-cube {
  position:absolute;width:clamp(56px,7vw,86px);aspect-ratio:1;display:grid;place-items:center;
  color:#fff;font-size:clamp(20px,2.4vw,29px);font-weight:950;
  border:1px solid #ffffff86;border-radius:17px;
  box-shadow:inset 0 3px 4px #ffffff3b,0 11px 25px #0007,0 0 18px #27bfff30;
}
.energy-art-cube.cube-a {top:11%;left:14%;background:linear-gradient(145deg,#218cd8,#174b96);transform:rotate(-12deg)}
.energy-art-cube.cube-b {top:13%;left:39%;background:linear-gradient(145deg,#16bdb2,#136a84);transform:rotate(10deg)}
.energy-art-cube.cube-c {top:39%;left:28%;background:linear-gradient(145deg,#2fba8a,#147c79);transform:rotate(-4deg)}
.energy-art-cube.cube-d {top:41%;left:63%;background:linear-gradient(145deg,#a3ba38,#5b811c);transform:rotate(12deg)}
.energy-art-cube.cube-e {top:5%;left:73%;background:linear-gradient(145deg,#e8ac47,#ba6832);transform:rotate(17deg)}
.energy-art-bolt {position:absolute;top:21%;left:51%;font-size:clamp(38px,6vw,70px);filter:drop-shadow(0 0 16px #66d5ff);transform:rotate(-12deg)}
.energy-card .game-cover-title {max-width:100%;}
.energy-card .play-button:focus-visible {outline:3px solid #8edaff;outline-offset:3px;}
@media (max-width: 760px) {
  .energy-card .energy-cover {min-height:260px;}
  .energy-art-cube {width:67px;}
  .energy-art-bolt {font-size:48px;}
  .energy-card .game-info {padding:24px 22px;}
}
@media (max-width: 390px) {
  .energy-card .energy-cover {min-height:235px;}
  .energy-art-cube {width:58px;border-radius:13px;font-size:20px;}
}

/* Ю047 · Accessible, fully clickable featured game card. */
.energy-card { color: inherit; text-decoration: none; cursor: pointer; transition: box-shadow .18s ease; }
.energy-card:visited { color: inherit; }
.energy-card:focus-visible { outline: 3px solid #5368e9; outline-offset: 5px; }
.energy-card:hover { box-shadow: 0 18px 50px rgba(56, 83, 160, .20); }
.energy-card:hover .play-button, .energy-card:focus-visible .play-button { transform: translateY(-2px); box-shadow: 0 15px 30px rgba(63, 82, 196, .28); }
@media (prefers-reduced-motion: reduce) { .energy-card, .energy-card .play-button { transition: none; } }