/* Galaxy Universe visual refresh. Loaded after roadmap-polish.css. */
:root{
  --galaxy-cyan:#6ce2ff;
  --galaxy-blue:#6484ff;
  --galaxy-violet:#9a6cff;
  --galaxy-magenta:#ff72d2;
  --galaxy-gold:#ffd86b;
  --galaxy-ink:#07101f;
  --galaxy-glow:0 0 28px color-mix(in srgb,var(--galaxy-violet) 16%,transparent),0 18px 52px rgba(0,0,0,.28);
  --st-cyan:var(--galaxy-cyan);
  --st-purple:var(--galaxy-violet);
  --st-gold:var(--galaxy-gold);
  --st-page:
    radial-gradient(circle at 14% 8%,rgba(154,108,255,.26),transparent 30%),
    radial-gradient(circle at 87% 11%,rgba(108,226,255,.22),transparent 29%),
    radial-gradient(circle at 72% 78%,rgba(255,114,210,.14),transparent 31%),
    radial-gradient(circle at 28% 86%,rgba(100,132,255,.14),transparent 29%),
    linear-gradient(180deg,#070b1a 0%,#0a1124 44%,#090d1b 100%);
}

html[data-theme="light"]{
  --st-page:
    radial-gradient(circle at 14% 8%,rgba(148,113,255,.16),transparent 30%),
    radial-gradient(circle at 87% 10%,rgba(66,182,220,.15),transparent 30%),
    radial-gradient(circle at 72% 82%,rgba(229,101,189,.10),transparent 30%),
    linear-gradient(180deg,#f7f4ff 0%,#eef4ff 48%,#f7f2fb 100%);
}

html[data-visual-theme="nebula"]{
  --st-cyan:#70e9ff;
  --st-purple:#a66cff;
  --st-gold:#ffd76e;
  --st-sage:#8ca8c7;
  --st-panel:linear-gradient(155deg,rgba(27,26,66,.96),rgba(11,18,45,.96));
  --st-panel-soft:linear-gradient(155deg,rgba(34,32,78,.92),rgba(16,24,55,.92));
  --st-page:
    radial-gradient(circle at 12% 7%,rgba(175,83,255,.32),transparent 31%),
    radial-gradient(circle at 88% 10%,rgba(75,220,255,.26),transparent 30%),
    radial-gradient(circle at 72% 72%,rgba(255,82,193,.20),transparent 32%),
    radial-gradient(circle at 31% 88%,rgba(82,110,255,.18),transparent 30%),
    linear-gradient(180deg,#08091a 0%,#0a1026 46%,#090b18 100%);
}
html[data-theme="light"][data-visual-theme="nebula"]{
  --st-cyan:#237fa0;
  --st-purple:#7452b6;
  --st-gold:#a97825;
  --st-panel:linear-gradient(150deg,rgba(255,252,255,.98),rgba(237,238,255,.97));
  --st-panel-soft:linear-gradient(150deg,rgba(250,248,255,.96),rgba(229,232,250,.95));
  --st-page:
    radial-gradient(circle at 12% 5%,rgba(133,91,212,.18),transparent 29%),
    radial-gradient(circle at 88% 8%,rgba(54,151,188,.16),transparent 30%),
    radial-gradient(circle at 72% 86%,rgba(201,79,160,.10),transparent 30%),
    linear-gradient(180deg,#f7f4ff 0%,#edf2fb 54%,#f8f3fb 100%);
}

body{position:relative;isolation:isolate;overflow-x:hidden}
body::before,body::after{
  content:""!important;
  position:fixed!important;
  inset:-12vh -8vw!important;
  pointer-events:none!important;
  z-index:-2!important;
}
body::before{
  background-image:
    radial-gradient(circle,rgba(255,255,255,.8) 0 1px,transparent 1.5px),
    radial-gradient(circle,rgba(108,226,255,.72) 0 1px,transparent 1.4px),
    radial-gradient(circle,rgba(255,216,107,.7) 0 1px,transparent 1.5px)!important;
  background-size:128px 128px,181px 181px,243px 243px!important;
  background-position:12px 18px,66px 42px,94px 116px!important;
  opacity:.26!important;
  animation:galaxy-stars 30s linear infinite alternate;
}
body::after{
  background:
    radial-gradient(ellipse at 18% 22%,rgba(147,83,255,.20),transparent 31%),
    radial-gradient(ellipse at 82% 16%,rgba(67,211,255,.17),transparent 29%),
    radial-gradient(ellipse at 68% 76%,rgba(255,79,191,.12),transparent 31%)!important;
  filter:blur(18px);
  opacity:.8!important;
  animation:galaxy-drift 22s ease-in-out infinite alternate;
}
html[data-theme="light"] body::before{opacity:.15!important;filter:none!important}
html[data-theme="light"] body::after{opacity:.38!important}

.side,.top,.mobile{
  backdrop-filter:blur(22px) saturate(132%);
}
.side{
  background:linear-gradient(180deg,color-mix(in srgb,var(--st-surface) 88%,transparent),color-mix(in srgb,var(--st-bg) 89%,transparent))!important;
  box-shadow:18px 0 56px rgba(3,7,20,.28),inset -1px 0 0 color-mix(in srgb,var(--st-cyan) 8%,transparent)!important;
}
.top{
  background:linear-gradient(90deg,color-mix(in srgb,var(--st-bg) 76%,transparent),color-mix(in srgb,var(--st-purple) 7%,var(--st-bg) 76%,transparent),color-mix(in srgb,var(--st-bg) 76%,transparent))!important;
  box-shadow:0 14px 38px rgba(3,7,20,.18)!important;
}
.mobile{
  background:linear-gradient(180deg,color-mix(in srgb,var(--st-bg) 89%,transparent),color-mix(in srgb,var(--st-purple) 6%,var(--st-bg) 90%,transparent))!important;
}

.brand-home{position:relative;isolation:isolate}
.brand-home::before{
  content:"";
  position:absolute;
  inset:-16px -24px;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle at 28% 50%,color-mix(in srgb,var(--st-cyan) 18%,transparent),transparent 37%),radial-gradient(circle at 72% 44%,color-mix(in srgb,var(--st-purple) 18%,transparent),transparent 39%);
  filter:blur(18px);
  opacity:.82;
}
.brand-home .brand-mark{filter:drop-shadow(0 0 12px color-mix(in srgb,var(--st-cyan) 25%,transparent)) drop-shadow(0 9px 18px color-mix(in srgb,var(--st-purple) 20%,transparent))!important}
.brand-mini-star{filter:drop-shadow(0 0 8px color-mix(in srgb,var(--st-gold) 48%,transparent))}

.home-hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 20%,color-mix(in srgb,var(--st-cyan) 16%,transparent),transparent 26%),
    radial-gradient(circle at 68% 76%,color-mix(in srgb,var(--st-purple) 18%,transparent),transparent 31%),
    linear-gradient(135deg,color-mix(in srgb,var(--st-surface) 94%,transparent),color-mix(in srgb,var(--st-surface-2) 91%,transparent))!important;
  border-color:color-mix(in srgb,var(--st-cyan) 26%,var(--st-border))!important;
  box-shadow:var(--galaxy-glow)!important;
}
.home-hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.035) 48%,transparent 54%);
  transform:translateX(-45%);
  animation:galaxy-sheen 8s ease-in-out infinite;
}
#home .home-app-title{
  background:linear-gradient(95deg,var(--st-text) 0%,#c9f7ff 36%,#d2c0ff 68%,#ffd8f0 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  filter:drop-shadow(0 10px 28px color-mix(in srgb,var(--st-purple) 14%,transparent));
}
#home .home-brand-tagline{color:color-mix(in srgb,var(--st-text-soft) 82%,var(--st-cyan))!important}

.stat,.panel,.family,.listitem,.dashboard-card,.party-card,.sprite-info-dialog,.dialog,.achievement-card,.comparison-card,.trade-draft{
  border-color:color-mix(in srgb,var(--st-cyan) 18%,var(--st-border))!important;
  background:
    radial-gradient(circle at 100% 0,color-mix(in srgb,var(--st-purple) 8%,transparent),transparent 32%),
    radial-gradient(circle at 0 100%,color-mix(in srgb,var(--st-cyan) 6%,transparent),transparent 31%),
    var(--st-panel)!important;
  box-shadow:0 16px 44px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.dashboard-card:hover,.panel:hover,.party-card:hover{
  border-color:color-mix(in srgb,var(--st-cyan) 34%,var(--st-border))!important;
  box-shadow:0 20px 52px rgba(0,0,0,.27),0 0 28px color-mix(in srgb,var(--st-purple) 8%,transparent)!important;
}

.dashboard-featured,.dashboard-profile-link,.dashboard-sprite-stage{position:relative}
.dashboard-sprite-stage,.home-hero-art{
  background:
    radial-gradient(circle at 50% 36%,color-mix(in srgb,var(--st-cyan) 18%,transparent),transparent 27%),
    radial-gradient(circle at 40% 70%,color-mix(in srgb,var(--st-purple) 18%,transparent),transparent 32%),
    radial-gradient(circle at 76% 68%,color-mix(in srgb,var(--galaxy-magenta) 10%,transparent),transparent 28%)!important;
}
.dashboard-sprite-stage::before,.home-hero-art::before{
  content:"";
  position:absolute;
  inset:9%;
  border:1px solid color-mix(in srgb,var(--st-cyan) 25%,transparent);
  border-radius:50%;
  box-shadow:0 0 34px color-mix(in srgb,var(--st-purple) 14%,transparent),inset 0 0 28px color-mix(in srgb,var(--st-cyan) 10%,transparent);
  animation:galaxy-orbit 12s linear infinite;
  pointer-events:none;
}

.btn.primary{
  background:linear-gradient(135deg,var(--galaxy-blue),var(--galaxy-violet) 52%,var(--galaxy-cyan))!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.20)!important;
  box-shadow:0 10px 28px color-mix(in srgb,var(--galaxy-violet) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.18)!important;
}
.btn.primary:hover{filter:brightness(1.08) saturate(1.08);box-shadow:0 14px 34px color-mix(in srgb,var(--galaxy-violet) 30%,transparent),0 0 22px color-mix(in srgb,var(--galaxy-cyan) 14%,transparent)!important}
.btn,.pill,.chip,.input,.select,.seg button,.levels button,.quick-action,.text-action{
  background:linear-gradient(145deg,color-mix(in srgb,var(--st-surface-2) 82%,transparent),color-mix(in srgb,var(--st-purple) 4%,var(--st-surface) 84%,transparent))!important;
}
.chip.active,.nav button.active,.mobile button.active{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--st-cyan) 18%,transparent),0 0 22px color-mix(in srgb,var(--st-purple) 9%,transparent)!important;
}

.family{
  position:relative;
  overflow:hidden;
}
.family::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg,transparent 0 43%,rgba(255,255,255,.025) 49%,transparent 55%);
  transform:translateX(-50%);
  transition:transform .65s ease;
}
.family:hover::after{transform:translateX(50%)}
.family.complete{box-shadow:0 0 0 1px color-mix(in srgb,var(--st-gold) 18%,transparent),0 18px 46px rgba(0,0,0,.24),0 0 30px color-mix(in srgb,var(--st-gold) 13%,transparent)!important}

.variant{isolation:isolate}
.variant.sprite-level-3{box-shadow:0 0 18px rgba(99,165,255,.17),inset 0 1px 0 rgba(255,255,255,.11)!important}
.variant.sprite-level-4{box-shadow:0 0 22px rgba(199,116,255,.20),inset 0 1px 0 rgba(255,255,255,.12)!important}
.variant.sprite-level-5{box-shadow:0 0 26px rgba(255,224,107,.22),inset 0 1px 0 rgba(255,255,255,.14)!important}
.variant.sprite-mastered{box-shadow:0 0 30px rgba(255,76,95,.24),0 0 52px rgba(154,108,255,.12),inset 0 1px 0 rgba(255,255,255,.13)!important}

.dialog,.sprite-info-dialog,.activity-drawer{
  backdrop-filter:blur(24px) saturate(128%);
  box-shadow:0 28px 82px rgba(0,0,0,.46),0 0 36px color-mix(in srgb,var(--st-purple) 10%,transparent)!important;
}
.modal,.sprite-info-overlay,.activity-overlay{backdrop-filter:blur(12px)}

.visual-theme-options{grid-template-columns:repeat(4,minmax(0,1fr))}
.visual-theme-option[data-visual-theme="nebula"] .visual-theme-swatch{
  background:radial-gradient(circle at 24% 25%,#70e9ff,transparent 31%),radial-gradient(circle at 70% 28%,#a66cff,transparent 36%),radial-gradient(circle at 62% 74%,#ff72d2,transparent 35%),#111735;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 0 18px rgba(166,108,255,.18);
}

@keyframes galaxy-stars{from{transform:translate3d(0,0,0)}to{transform:translate3d(24px,-18px,0)}}
@keyframes galaxy-drift{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.04) translate3d(-1.5%,1%,0)}}
@keyframes galaxy-sheen{0%,62%,100%{transform:translateX(-55%);opacity:0}72%{opacity:1}88%{transform:translateX(55%);opacity:0}}
@keyframes galaxy-orbit{to{transform:rotate(360deg)}}

@media(max-width:980px){.visual-theme-options{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  body::before{opacity:.16!important;background-size:150px 150px,210px 210px,285px 285px!important}
  body::after{filter:blur(28px);opacity:.58!important}
  .home-hero::after{display:none}
  .visual-theme-options{grid-template-columns:1fr}
  .stat,.panel,.family,.dashboard-card,.party-card{box-shadow:0 12px 34px rgba(0,0,0,.20)!important}
  .dashboard-sprite-stage::before,.home-hero-art::before{animation-duration:18s}
}
@media(max-width:430px){
  body::before{opacity:.11!important}
  body::after{opacity:.42!important}
  .home-hero{background:linear-gradient(145deg,color-mix(in srgb,var(--st-surface) 95%,transparent),color-mix(in srgb,var(--st-surface-2) 93%,transparent))!important}
}
@media(prefers-reduced-motion:reduce){
  body::before,body::after,.home-hero::after,.dashboard-sprite-stage::before,.home-hero-art::before{animation:none!important}
  .family::after{display:none}
}