/* LYFP Universe: isolated observatory panel for the October 2026 demo. */
.universe-section {
  --lu-ink: #f1f6ff;
  --lu-muted: #adbed2;
  --lu-blue: #9ad9ff;
  --lu-surface: #070e1b;
  color: var(--lu-ink);
  scroll-margin-top: 96px;
}

/* The introduction uses the site's shared centered serif section heading. */

.universe-section .lu-panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  min-height: 430px;
  border: 1px solid #34495f;
  border-radius: 24px;
  background: var(--lu-surface);
  box-shadow: 0 22px 55px #0003, inset 0 1px 0 #d9eaff0a;
}

.universe-section .lu-panel::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  border: 1px solid transparent;
  border-top-color: #c5e9ff26;
  border-radius: inherit;
  pointer-events: none;
}

.universe-section .lu-art {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.universe-section .lu-art picture,
.universe-section .lu-art img {
  display: block;
  width: 100%;
  height: 100%;
}

.universe-section .lu-art img {
  object-fit: cover;
  object-position: 76% center;
}

.universe-section .lu-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #070e1bf2 0%, #070e1be6 24%, #070e1bc4 43%, #070e1b35 66%, #070e1b0a 100%),
    linear-gradient(0deg, #070e1b96, transparent 45%);
}

.universe-section .lu-starlight {
  position: absolute;
  z-index: 1;
  inset: 0;
  opacity: .55;
  background: radial-gradient(circle at 79% 22%, #f6fbff 0 1px, transparent 2px),
    radial-gradient(circle at 68% 74%, #a8d8ff 0 1px, transparent 2px),
    radial-gradient(ellipse at 76% 45%, #83c7ff24 0, transparent 37%);
  animation: lu-observatory-breathe 7s ease-in-out infinite;
  pointer-events: none;
}

.universe-section .lu-starlight::after {
  content: "";
  position: absolute;
  top: 23%;
  right: 14%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d8f2ff;
  box-shadow: 0 0 16px 4px #a4daff75;
  transform: scale(.25);
  opacity: .2;
  animation: lu-observatory-twinkle 5.2s 1.4s ease-in-out infinite;
}

.universe-section .lu-content {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 64%;
  max-width: 720px;
  padding: 30px 36px 32px;
}

.universe-section .lu-brand {
  display: flex;
  align-items: center;
  gap: 17px;
  margin: 0;
}

.universe-section .lu-brand > div {
  min-width: 0;
}

.universe-section .lu-logo {
  position: relative;
  display: block;
  flex: 0 0 64px;
  width: 64px;
  height: 72px;
  overflow: hidden;
  border: 1px solid #67819b80;
  border-radius: 12px;
  background: #09111f;
  box-shadow: 0 0 24px #8acbff13;
}

.universe-section .lu-logo img {
  position: absolute;
  top: -10.6%;
  left: -17.3%;
  display: block;
  width: 134.5%;
  max-width: none;
  height: auto;
}

.universe-section .lu-kicker {
  display: block;
  margin: 0 0 4px;
  color: #a6d1ee;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.universe-section .lu-brand h3 {
  margin: 0;
  color: #f5f8ff;
  font-size: clamp(26px, 2.65vw, 32px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.045em;
}

.universe-section .lu-handle {
  display: block;
  margin: 6px 0 0;
  color: #a3b4c8;
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: .025em;
}

.universe-section .lu-headline {
  margin: 22px 0 0;
  color: #f3f7ff;
  font-size: clamp(31px, 3.15vw, 40px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.055em;
  text-wrap: balance;
}

.universe-section .lu-headline > span {
  display: block;
}

.universe-section .lu-headline > span + span {
  color: #a7c3e1;
}

.universe-section .lu-description {
  max-width: 440px;
  margin: 14px 0 0;
  color: #b8c8d9;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.65;
  text-wrap: pretty;
}

.universe-section .lu-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 17px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.universe-section .lu-topics li {
  position: relative;
  margin: 0;
  color: #a7bdd3;
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: .04em;
}

.universe-section .lu-topics li + li::before {
  content: "";
  position: absolute;
  top: 7px;
  left: -10px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #81a8c7;
}

.universe-section .lu-actions {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 24px 0 0;
}

.universe-section .lu-button {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 0;
  gap: 11px;
  min-width: 0;
  min-height: 60px;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid #789ab763;
  border-radius: 11px;
  background: #111f30d9;
  color: #eff8ff;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.universe-section .lu-youtube {
  border-color: #bedbf280;
  background: linear-gradient(110deg, #d7e9f4, #a8c9e2);
  color: #0b2032;
  box-shadow: 0 5px 19px #0002;
}

.universe-section .lu-button > svg {
  display: block;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  color: currentColor;
  fill: currentColor;
}

.universe-section .lu-button > span:not(.lu-arrow) {
  display: block;
  min-width: 0;
}

.universe-section .lu-button strong {
  display: block;
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
}

.universe-section .lu-button small {
  display: block;
  margin-top: 3px;
  color: #a7bdd0;
  font-size: 10px;
  line-height: 1.3;
}

.universe-section .lu-youtube small {
  color: #36536a;
}

.universe-section .lu-arrow {
  flex: 0 0 auto;
  margin-left: auto;
  color: currentColor;
  font-size: 19px;
  line-height: 1;
  transition: transform 180ms ease;
}

.universe-section .lu-button:focus-visible {
  outline: 3px solid #9bdbff;
  outline-offset: 4px;
}

.universe-section .lu-button:active {
  transform: translateY(1px);
}

.universe-section .lu-art-caption {
  position: absolute;
  z-index: 1;
  right: 27px;
  bottom: 26px;
  color: #d6e9fa9c;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .2em;
  text-transform: uppercase;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .universe-section .lu-button:hover {
    transform: translateY(-2px);
    border-color: #b6dfff;
    background-color: #1c334a;
  }

  .universe-section .lu-youtube:hover {
    background: #e4f4ff;
  }

  .universe-section .lu-button:hover .lu-arrow {
    transform: translateX(3px);
  }
}

@media (min-width: 1500px) {
  .universe-section .lu-content {
    padding: 34px 40px 36px;
  }
}

@media (max-width: 980px) and (min-width: 681px) {
  .universe-section .lu-content {
    width: 72%;
    padding: 28px;
  }

  .universe-section .lu-description {
    max-width: 390px;
  }

  .universe-section .lu-art img {
    object-position: 72% center;
  }

  .universe-section .lu-actions {
    max-width: 460px;
  }

  .universe-section .lu-button {
    gap: 8px;
    padding-inline: 11px;
  }

  .universe-section .lu-button strong {
    font-size: 11px;
  }

  .universe-section .lu-button > svg {
    flex-basis: 21px;
    width: 21px;
    height: 21px;
  }
}

@media (max-width: 680px) {
  .universe-section .lu-panel {
    min-height: 0;
    border-radius: 20px;
  }

  .universe-section .lu-art {
    height: 235px;
    bottom: auto;
  }

  .universe-section .lu-art img {
    object-fit: cover;
    object-position: 82% 45%;
  }

  .universe-section .lu-art::after {
    background: linear-gradient(90deg, #070e1be6 0%, #070e1b9e 35%, #070e1b14 72%),
      linear-gradient(0deg, #070e1b 0%, #070e1b66 30%, transparent 70%);
  }

  .universe-section .lu-content {
    width: 100%;
    max-width: none;
    padding: 24px;
  }

  .universe-section .lu-brand {
    gap: 13px;
    min-height: 61px;
  }

  .universe-section .lu-logo {
    flex-basis: 54px;
    width: 54px;
    height: 61px;
    border-radius: 10px;
  }

  .universe-section .lu-kicker {
    font-size: 8px;
    letter-spacing: .17em;
  }

  .universe-section .lu-brand h3 {
    font-size: clamp(24px, 6.7vw, 29px);
  }

  .universe-section .lu-handle {
    margin-top: 5px;
    font-size: 10px;
  }

  .universe-section .lu-headline {
    margin-top: 66px;
    font-size: clamp(29px, 7.7vw, 35px);
    line-height: 1.12;
    letter-spacing: -.05em;
  }

  .universe-section .lu-description {
    max-width: 100%;
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.65;
  }

  .universe-section .lu-topics {
    gap: 5px 15px;
    margin-top: 16px;
  }

  .universe-section .lu-topics li {
    font-size: 9px;
  }

  .universe-section .lu-topics li + li::before {
    left: -9px;
    top: 6px;
  }

  .universe-section .lu-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 20px;
  }

  .universe-section .lu-button {
    gap: 12px;
    min-height: 57px;
    padding: 10px 15px;
  }

  .universe-section .lu-button strong {
    font-size: 13px;
  }

  .universe-section .lu-button small {
    font-size: 10px;
  }

  .universe-section .lu-art-caption {
    top: 127px;
    right: 23px;
    bottom: auto;
    font-size: 8px;
    letter-spacing: .16em;
  }
}

@media (max-width: 359px) {
  .universe-section .lu-content {
    padding: 21px 18px;
  }

  .universe-section .lu-brand {
    gap: 10px;
  }

  .universe-section .lu-logo {
    flex-basis: 48px;
    width: 48px;
    height: 54px;
  }

  .universe-section .lu-brand h3 {
    font-size: 23px;
  }

  .universe-section .lu-headline {
    margin-top: 60px;
    font-size: 28px;
  }

  .universe-section .lu-topics {
    column-gap: 13px;
  }

  .universe-section .lu-topics li {
    letter-spacing: 0;
  }

  .universe-section .lu-topics li + li::before {
    left: -8px;
  }
}

@keyframes lu-observatory-breathe {
  0%, 100% { opacity: .36; }
  50% { opacity: .72; }
}

@keyframes lu-observatory-twinkle {
  0%, 72%, 100% { opacity: .14; transform: scale(.25); }
  84% { opacity: .65; transform: scale(.46); }
}

@media (prefers-reduced-motion: reduce) {
  .universe-section .lu-starlight,
  .universe-section .lu-starlight::after {
    animation: none;
    opacity: .4;
  }

  .universe-section .lu-button,
  .universe-section .lu-arrow {
    transition: none;
  }

  .universe-section .lu-button:hover,
  .universe-section .lu-button:active,
  .universe-section .lu-button:hover .lu-arrow {
    transform: none;
  }
}

/* The two rebranded destinations moved to Universe; keep the remaining row balanced. */
#gamer-panel[data-gb-channels="2"] .gb-channels {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}