/* 小星系 / Pocket Galaxy: a star system full screen and the five games listed along the bottom
   (also the way in without WebGL). The view itself (canvas, labels, buttons) is styled in
   shared/galaxy-view.css, shared with the home page hero. */

.gx-body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  margin: 0;
  background:
    radial-gradient(ellipse 60% 45% at 50% 46%, rgba(255, 170, 70, 0.14), transparent 70%),
    radial-gradient(ellipse 40% 30% at 18% 22%, rgba(80, 120, 220, 0.16), transparent 70%),
    radial-gradient(ellipse 35% 28% at 84% 70%, rgba(150, 90, 210, 0.14), transparent 70%),
    #05080d;
  color: #eef1ee;
  overflow: hidden;
}

.gx-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.gx-intro {
  position: absolute;
  top: clamp(14px, 3vh, 32px);
  left: var(--gh-gutter);
  max-width: 30em;
  pointer-events: none;
}

.gx-intro h1 {
  margin: 0;
  font-family: var(--gh-font-display);
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #ffe2a0;
  text-shadow: 0 0 24px rgba(255, 180, 80, 0.35);
}

.gx-intro p {
  margin: 10px 0 0;
  color: #c3ccd4;
  font-size: 0.95rem;
  line-height: 1.6;
}

/* The games along the bottom. */
.gx-list {
  position: absolute;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  width: min(1360px, calc(100% - 2 * var(--gh-gutter)));
  transform: translateX(-50%);
}

.gx-list article {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 2px solid var(--accent);
  border-radius: 12px;
  background: rgba(8, 12, 18, 0.7);
  backdrop-filter: blur(6px);
}

.gx-list h2 {
  margin: 0;
  font-family: var(--gh-font-display);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--accent);
}

.gx-list p {
  display: -webkit-box;
  align-self: start;
  margin: 0;
  overflow: hidden;
  color: #b9c3cc;
  font-size: 0.82rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* Short screens (a laptop at 150%): two lines, so the planets keep their room. */
@media (max-height: 760px) {
  .gx-list p {
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }
}

.gx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.gx-ghost {
  background: transparent;
  color: #eef1ee;
  border-color: rgba(255, 255, 255, 0.25);
}

.gx-note {
  position: absolute;
  top: 40%;
  width: 100%;
  text-align: center;
  color: #c3ccd4;
}


/* No WebGL: the list stands in the middle. */
.gx-stage.is-flat .gx-list {
  top: 50%;
  bottom: auto;
  transform: translate(-50%, -50%);
}


@media (max-width: 1000px) {
  .gx-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Narrow and not tall: names and buttons only (hovering a planet still tells what it is). */
@media (max-width: 1000px) and (max-height: 900px) {
  .gx-list p {
    display: none;
  }
}

@media (max-width: 760px) {
  .gx-intro p {
    font-size: 0.85rem;
  }

  .gx-list {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* An odd number of games in two columns: the last one takes the whole row. */
  .gx-list article:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .gx-list p {
    display: none;
  }
}


.gx-actions .btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 9px;
  color: #eef1ee;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
}

.gx-actions .btn-primary {
  border-color: transparent;
  background: var(--accent);
  color: #141006;
}

.gx-actions .btn:hover,
.gx-actions .btn:focus-visible {
  filter: brightness(1.08);
}

.gx-actions .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* The view buttons sit top right, under the bar. */
.gx-stage .gx-tools {
  top: clamp(14px, 3vh, 32px);
  right: var(--gh-gutter);
}