/* Starpath Popup (scoped) - based on provided demo */
#starpathPopup{
  --bg: #0e1418;
  --btnGoldTop: #ffe27a;
  --btnGoldMid: #ffd35a;
  --btnGoldBot: #ffb84d;
  --pathGold: #e5b446;
  --shadowGold: #b57d14;
  --lockedGray1: #71808c;
  --lockedGray2: #3b4952;
  --pathLocked: #2b3942;
  --w: 380px;
  --spacing: 104;
  --amp: 132;
  color: #d8e4ea;
}

#starpathPopup *{ box-sizing:border-box; }

#starpathPopup .sp-app{
  width: min(92vw, 520px);
  padding: 18px 14px 22px;
}

#starpathPopup .topbar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  flex-wrap:wrap;
}

#starpathPopup .title{
  font-weight:750;
  letter-spacing:.2px;
  font-size:16px;
  opacity:.95;
}

#starpathPopup .controls{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}

#starpathPopup .chip{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding:8px 10px;
  border-radius:999px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
  font-size:12px;
  opacity:.92;
}
#starpathPopup .dot{
  width:8px;height:8px;border-radius:999px;
  background: var(--btnGoldMid);
  box-shadow: 0 0 16px rgba(255,211,90,.25);
}

#starpathPopup .stage{
  position:relative;
  width: var(--w);
  max-width:100%;
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border-radius:22px;
  padding: 18px 10px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  overflow:hidden;
}

#starpathPopup .viewport{
  position:relative;
  height: 780px;
  overflow:auto;
  border-radius:18px;
  padding: 12px 0 30px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
  background: rgba(0,0,0,.12);
}

#starpathPopup .pathWrap{
  position:relative;
  width:100%;
  min-height:1600px;
  margin:0 auto;
  isolation:isolate;
}

#starpathPopup .terrainLayer{
  position:absolute;
  left:0; right:0;
  border-radius:18px;
  overflow:hidden;
  z-index:0;
  background-size:cover;
  background-position:center;
  filter: saturate(1.05) contrast(1.02);
  pointer-events:none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%, rgba(0,0,0,1) 82%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 18%, rgba(0,0,0,1) 82%, rgba(0,0,0,0) 100%);
  transition: opacity .6s ease;
}

#starpathPopup .terrainOverlay{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 70% at 50% 40%, rgba(0,0,0,.08), rgba(0,0,0,.30) 70%),
    linear-gradient(180deg, rgba(14,20,24,.06), rgba(14,20,24,.18));
  mix-blend-mode: multiply;
  pointer-events:none;
}

#starpathPopup svg#starpathSvg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2;
  overflow:visible;
}

#starpathPopup .seg{
  fill:none;
  stroke: var(--pathLocked);
  stroke-width: 8.5;
  stroke-linecap: round;
  stroke-dasharray: 10 14;
  opacity:.9;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.18));
  transition: stroke .25s ease, opacity .25s ease;
}
#starpathPopup .seg.reached{
  stroke: var(--pathGold);
  opacity:1;
  filter: drop-shadow(0 3px 0 color-mix(in oklab, var(--shadowGold) 92%, black 8%));
}

#starpathPopup .node{
  position:absolute;
  width:64px;
  height:64px;
  border-radius:999px;
  display:grid;
  place-items:center;
  transform: translate(-50%, -50%);
  user-select:none;
  z-index:3;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.06);
}
#starpathPopup .node.small{ width:54px; height:54px; }
#starpathPopup .node.big{ width:74px; height:74px; }

#starpathPopup .nodeBtn{
  width:100%; height:100%;
  border:0;
  background:transparent;
  padding:0;
  border-radius:999px;
  cursor:pointer;
}
#starpathPopup .nodeBtn:disabled{ cursor:default; }

#starpathPopup .node .cap{
  width:100%; height:100%;
  border-radius:999px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background: linear-gradient(180deg, var(--lockedGray1), var(--lockedGray2));
  box-shadow:
    0 4px 0 rgba(0,0,0,.14),
    0 6px 0 rgba(0,0,0,.10),
    inset 0 2px 0 rgba(255,255,255,.18),
    inset 0 -2px 0 rgba(0,0,0,.20);
}

#starpathPopup .node.reached .cap{
  background: linear-gradient(180deg, var(--btnGoldTop), var(--btnGoldMid) 55%, var(--btnGoldBot));
  box-shadow:
    0 5px 0 var(--shadowGold),
    0 8px 0 rgba(0,0,0,.12),
    inset 0 2px 0 rgba(255,255,255,.25),
    inset 0 -2px 0 rgba(0,0,0,.16);
}

#starpathPopup .node.locked{
  filter: grayscale(.62) saturate(.3);
  opacity:.92;
}

#starpathPopup .node.claimed .nodeBtn{
  opacity: .78;
  filter: saturate(.85);
}

#starpathPopup .icon{ width:30px; height:30px; }
#starpathPopup .node.big .icon{ width:36px; height:36px; }

#starpathPopup .section.hidden{ display:none; }

#starpathPopup .decor{
  position:absolute;
  width: 160px;
  opacity:.85;
  z-index:1;
  pointer-events:none;
  filter: drop-shadow(0 14px 24px rgba(0,0,0,.35));
}
#starpathPopup .decor.left{ left: -26px; }
#starpathPopup .decor.right{ right: -26px; transform: scaleX(-1); }
#starpathPopup .decor.big{ width: 190px; }
#starpathPopup .decor.faint{ opacity:.55; }

#starpathPopup .rewardBadge{
  position:absolute;
  bottom:-18px;
  left:50%;
  transform: translateX(-50%);
  padding:6px 10px;
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  color:#0c1418;
  background: linear-gradient(180deg, #e9f8ff, #8fe7ff);
  box-shadow: 0 10px 24px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.5);
  white-space:nowrap;
}
#starpathPopup .rewardBadge.hide{ opacity:0; transform: translateX(-50%) translateY(6px); transition: all .28s ease; }

#starpathPopup .rewardToast{
  position:absolute;
  transform: translate(-50%, -50%);
  padding:8px 12px;
  border-radius:14px;
  font-size:12px;
  background: rgba(0,0,0,.55);
  box-shadow: 0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.08);
  z-index:4;
  animation: spFadeUp .82s ease forwards;
}

@keyframes spFadeUp{
  0%{ opacity:0; transform: translate(-50%, -40%); }
  20%{ opacity:1; }
  100%{ opacity:0; transform: translate(-50%, -70%); }
}

#starpathPopup .node.pop{ animation: spPop .22s ease; }
@keyframes spPop{
  0%{ transform: translate(-50%, -50%) scale(1); }
  50%{ transform: translate(-50%, -50%) scale(1.07); }
  100%{ transform: translate(-50%, -50%) scale(1); }
}

/* Fit popup container */
#starpathOverlay.starpath-overlay{
  background: radial-gradient(1200px 600px at 50% -10%, #1a2a33 0%, var(--bg) 55%);
}
#starpathPopup.starpath-window{
  background: transparent;
  box-shadow: none;
  padding: 0;
}
#starpathPopup .close-btn{ cursor:pointer; }