/* ============================================================
   PROBELIKA — KNOWLEDGE GALAXY V2
   ============================================================ */

.pb-galaxy {
  --kg-ink: #071426;
  --kg-deep: #071b31;

  --kg-cyan: #50ddf5;
  --kg-blue: #2d91ef;
  --kg-violet: #8f7cff;
  --kg-coral: #ff7768;
  --kg-orange: #ffad4b;
  --kg-lime: #bce95d;

  --kg-white: #ffffff;
  --kg-muted: #697b91;

  position: relative;
  margin-bottom: 34px;
  overflow: hidden;
  border-radius: 38px;
  background:
    radial-gradient(
      circle at 82% 14%,
      rgba(80,221,245,.22),
      transparent 24rem
    ),
    radial-gradient(
      circle at 14% 92%,
      rgba(143,124,255,.17),
      transparent 24rem
    ),
    radial-gradient(
      circle at 86% 80%,
      rgba(255,119,104,.11),
      transparent 22rem
    ),
    linear-gradient(
      145deg,
      #051426,
      #08223c 55%,
      #0d3048
    );
  color: white;
  box-shadow:
    0 34px 88px
    rgba(3,20,43,.23);
}

.pb-galaxy::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background-image:
    radial-gradient(
      circle,
      rgba(255,255,255,.32) 1px,
      transparent 1.5px
    );

  background-size:
    42px 42px;

  opacity: .20;

  mask-image:
    radial-gradient(
      ellipse at center,
      black,
      transparent 85%
    );
}

.pb-galaxy-inner {
  position: relative;
  z-index: 2;
  padding: 38px;
}


/* HEADER */

.pb-galaxy-top {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  gap: 30px;
  align-items: start;
}

.pb-galaxy-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  color: #9cedff;

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

  text-transform: uppercase;
  letter-spacing: .10em;
}

.pb-galaxy-kicker::before {
  content: "";

  width: 9px;
  height: 9px;

  border-radius: 50%;

  background:
    var(--kg-lime);

  box-shadow:
    0 0 18px
    rgba(188,233,93,.70);
}

.pb-galaxy-title {
  max-width: 760px;

  margin:
    11px 0 11px;

  font-size:
    clamp(
      38px,
      5vw,
      62px
    );

  line-height: 1;

  letter-spacing:
    -.05em;
}

.pb-galaxy-title span {
  color: var(--kg-cyan);
}

.pb-galaxy-lead {
  max-width: 660px;

  margin: 0;

  color:
    rgba(255,255,255,.66);

  font-size: 15px;
  line-height: 1.55;
}


/* MISSION */

.pb-galaxy-mission {
  min-width: 270px;
  max-width: 320px;

  padding: 20px;

  border:
    1px solid
    rgba(255,255,255,.11);

  border-radius: 22px;

  background:
    rgba(255,255,255,.075);

  backdrop-filter:
    blur(14px);
}

.pb-galaxy-mission-label {
  color:
    rgba(255,255,255,.51);

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

  text-transform: uppercase;
  letter-spacing: .08em;
}

.pb-galaxy-mission strong {
  display: block;

  margin-top: 8px;

  font-size: 18px;
  line-height: 1.2;
}

.pb-galaxy-mission a {
  display: inline-flex;

  margin-top: 14px;

  padding:
    10px 13px;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      #79e8ff,
      #b9f5ff
    );

  color: #061426;

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

  text-decoration: none;
}


/* STATS */

.pb-galaxy-stats {
  display: grid;

  grid-template-columns:
    repeat(
      5,
      minmax(0,1fr)
    );

  gap: 10px;

  margin-top: 27px;
}

.pb-galaxy-stat {
  padding: 15px;

  border:
    1px solid
    rgba(255,255,255,.09);

  border-radius: 17px;

  background:
    rgba(255,255,255,.055);
}

.pb-galaxy-stat strong {
  display: block;

  font-size: 25px;

  line-height: 1;
}

.pb-galaxy-stat span {
  display: block;

  margin-top: 5px;

  color:
    rgba(255,255,255,.52);

  font-size: 12px;
}


/* GALAXY CANVAS */

.pb-galaxy-space {
  position: relative;

  min-height: 590px;

  margin-top: 25px;

  overflow: hidden;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 30px;

  background:
    radial-gradient(
      circle at 50% 46%,
      rgba(59,195,235,.11),
      transparent 16rem
    ),
    rgba(1,12,24,.33);
}


/* CENTRAL CORE */

.pb-galaxy-core {
  position: absolute;

  top: 50%;
  left: 50%;

  width: 180px;
  height: 180px;

  transform:
    translate(-50%,-50%);

  border-radius:
    48% 52% 55% 45% /
    46% 48% 52% 54%;

  background:
    radial-gradient(
      circle at 29% 22%,
      rgba(255,255,255,.96),
      transparent 16%
    ),
    radial-gradient(
      circle at 72% 75%,
      rgba(255,173,75,.95),
      transparent 33%
    ),
    linear-gradient(
      145deg,
      #70ecff,
      #20b8e6 42%,
      #1478cd 72%,
      #0a3a68
    );

  box-shadow:
    inset -19px -24px 35px
    rgba(4,20,40,.32),

    inset 14px 14px 25px
    rgba(255,255,255,.20),

    0 0 0 23px
    rgba(80,221,245,.045),

    0 0 80px
    rgba(80,221,245,.23),

    0 32px 55px
    rgba(0,0,0,.30);

  animation:
    pbGalaxyCoreFloat
    5s ease-in-out infinite;
}

.pb-galaxy-core::before,
.pb-galaxy-core::after {
  content: "";

  position: absolute;

  top: 48%;

  width: 21px;
  height: 28px;

  border-radius: 50%;

  background:
    #071426;

  box-shadow:
    inset 0 5px 0
    rgba(255,255,255,.17);
}

.pb-galaxy-core::before {
  left: 48px;
}

.pb-galaxy-core::after {
  right: 48px;
}

.pb-galaxy-smile {
  position: absolute;

  top: 64%;
  left: 50%;

  width: 46px;
  height: 19px;

  transform:
    translateX(-50%);

  border-bottom:
    5px solid
    rgba(7,20,38,.79);

  border-radius:
    0 0 50% 50%;
}

.pb-galaxy-core-label {
  position: absolute;

  left: 50%;
  bottom: -47px;

  transform:
    translateX(-50%);

  white-space: nowrap;

  color:
    rgba(255,255,255,.62);

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


/* ORBITS */

.pb-galaxy-orbit {
  position: absolute;

  top: 50%;
  left: 50%;

  pointer-events: none;

  border:
    1px solid
    rgba(255,255,255,.07);

  border-radius: 50%;

  transform:
    translate(-50%,-50%)
    rotate(-10deg);
}

.pb-galaxy-orbit-a {
  width: 390px;
  height: 260px;
}

.pb-galaxy-orbit-b {
  width: 620px;
  height: 410px;

  transform:
    translate(-50%,-50%)
    rotate(11deg);
}

.pb-galaxy-orbit-c {
  width: 820px;
  height: 520px;

  transform:
    translate(-50%,-50%)
    rotate(-5deg);
}


/* KNOWLEDGE NODES */

.pb-galaxy-node {
  position: absolute;

  z-index: 4;

  width: 145px;

  padding:
    12px 13px;

  border:
    1px solid
    rgba(255,255,255,.12);

  border-radius: 17px;

  background:
    rgba(255,255,255,.92);

  color:
    var(--kg-ink);

  box-shadow:
    0 17px 38px
    rgba(0,0,0,.19);

  text-decoration: none;

  transition:
    transform .23s ease,
    box-shadow .23s ease;

  backdrop-filter:
    blur(12px);
}

.pb-galaxy-node:hover {
  z-index: 10;

  transform:
    translateY(-6px)
    scale(1.035);

  box-shadow:
    0 27px 48px
    rgba(0,0,0,.27);
}

.pb-galaxy-node-state {
  display: flex;
  align-items: center;
  gap: 6px;

  color:
    var(--kg-muted);

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

  text-transform: uppercase;
  letter-spacing: .05em;
}

.pb-galaxy-dot {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 50%;
}

.pb-galaxy-node strong {
  display: block;

  margin-top: 7px;

  font-size: 12px;
  line-height: 1.25;
}

.pb-galaxy-node small {
  display: block;

  margin-top: 7px;

  color:
    var(--kg-muted);

  font-size: 12px;
}


/* STATES */

.pb-galaxy-node-mastered {
  background:
    linear-gradient(
      145deg,
      #f4ffe2,
      #ffffff
    );
}

.pb-galaxy-node-mastered
.pb-galaxy-dot {
  background:
    var(--kg-lime);

  box-shadow:
    0 0 12px
    rgba(188,233,93,.70);
}

.pb-galaxy-node-learning {
  background:
    linear-gradient(
      145deg,
      #e9faff,
      #ffffff
    );
}

.pb-galaxy-node-learning
.pb-galaxy-dot {
  background:
    var(--kg-cyan);

  box-shadow:
    0 0 12px
    rgba(80,221,245,.65);
}

.pb-galaxy-node-due {
  background:
    linear-gradient(
      145deg,
      #fff0ed,
      #ffffff
    );
}

.pb-galaxy-node-due
.pb-galaxy-dot {
  background:
    var(--kg-coral);

  box-shadow:
    0 0 12px
    rgba(255,119,104,.60);
}

.pb-galaxy-node-new
.pb-galaxy-dot {
  background:
    #c4ced9;
}


/* DESKTOP NODE POSITIONS */

.pb-galaxy-node:nth-of-type(1) {
  left: 8%;
  top: 13%;
}

.pb-galaxy-node:nth-of-type(2) {
  right: 8%;
  top: 12%;
}

.pb-galaxy-node:nth-of-type(3) {
  left: 3%;
  top: 42%;
}

.pb-galaxy-node:nth-of-type(4) {
  right: 3%;
  top: 41%;
}

.pb-galaxy-node:nth-of-type(5) {
  left: 13%;
  bottom: 10%;
}

.pb-galaxy-node:nth-of-type(6) {
  right: 13%;
  bottom: 9%;
}

.pb-galaxy-node:nth-of-type(7) {
  left: 30%;
  top: 5%;
}

.pb-galaxy-node:nth-of-type(8) {
  right: 30%;
  top: 4%;
}

.pb-galaxy-node:nth-of-type(9) {
  left: 29%;
  bottom: 5%;
}

.pb-galaxy-node:nth-of-type(10) {
  right: 29%;
  bottom: 4%;
}


/* LEGEND */

.pb-galaxy-legend {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 14px;
}

.pb-galaxy-legend span {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  padding:
    7px 9px;

  border-radius: 10px;

  background:
    rgba(255,255,255,.07);

  color:
    rgba(255,255,255,.60);

  font-size: 12px;
}

.pb-galaxy-legend i {
  width: 8px;
  height: 8px;

  border-radius: 50%;
}


/* EMPTY */

.pb-galaxy-empty {
  display: grid;
  place-items: center;

  min-height: 270px;

  margin-top: 24px;

  padding: 30px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 25px;

  background:
    rgba(255,255,255,.05);

  text-align: center;
}

.pb-galaxy-empty strong {
  display: block;

  font-size: 25px;
}

.pb-galaxy-empty p {
  max-width: 520px;

  margin:
    8px auto 0;

  color:
    rgba(255,255,255,.60);
}


/* RESPONSIVE */

@media (
  max-width: 1050px
) {

  .pb-galaxy-space {
    display: grid;

    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );

    gap: 10px;

    min-height: auto;

    padding: 20px;
  }

  .pb-galaxy-core,
  .pb-galaxy-orbit {
    display: none;
  }

  .pb-galaxy-node {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    width: auto;
  }

}


@media (
  max-width: 760px
) {

  .pb-galaxy {
    border-radius: 27px;
  }

  .pb-galaxy-inner {
    padding:
      25px 17px;
  }

  .pb-galaxy-top {
    grid-template-columns:
      1fr;
  }

  .pb-galaxy-mission {
    min-width: 0;
    max-width: none;
  }

  .pb-galaxy-stats {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }

  .pb-galaxy-space {
    grid-template-columns:
      1fr;
  }

}


@keyframes pbGalaxyCoreFloat {

  0%,
  100% {
    transform:
      translate(-50%,-50%)
      translateY(0)
      rotate(-3deg);
  }

  50% {
    transform:
      translate(-50%,-50%)
      translateY(-11px)
      rotate(3deg);
  }

}


@media (
  prefers-reduced-motion: reduce
) {

  .pb-galaxy-core {
    animation: none;
  }

  .pb-galaxy-node {
    transition: none;
  }

}