/* === PAGE 3: Panel + subtle aurora glows (ReactBits-ish) === */
#skinsSection{
  position: relative;
  margin: 0 auto;
  max-width: 1280px;
  padding: 56px 18px 80px;
  border-radius: 24px;
  background:
    radial-gradient(120% 100% at 50% -10%, rgba(10,10,16,.92) 0%, rgba(8,8,14,.96) 55%, #07070f 100%);
  box-shadow:
    0 20px 60px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 0 0 1px rgba(255,255,255,.05);
  overflow: clip;
  isolation: isolate;
}

/* Subtle corner color wash (reduced opacity so page isn't flooded) */
#skinsSection .skins-cosmic{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(60% 70% at 6% -10%, rgba(102, 201, 106, .25), rgba(102,201,106,0) 60%),
    radial-gradient(50% 65% at 50% -15%, rgba(134, 124, 229, .22), rgba(134,124,229,0) 68%),
    radial-gradient(60% 70% at 96% -10%, rgba(215, 60, 120, .24), rgba(215,60,120,0) 60%);
  filter: blur(18px) saturate(1.02);
}

/* Starfield above glows but below content */
#skinsSection .skins-stars{ position:absolute; inset:0; z-index:2; pointer-events:none; display:block; }

/* Content */
#skinsSection .skins-inner{ position:relative; z-index:3; max-width:1100px; margin:0 auto; }




/* === OVERRIDE: Page 3 background to blend with Page 2 (full-width, no card edges) === */
#skinsSection{
  position: relative;
  margin: 0;
  max-width: none;
  padding: 120px 20px 160px;
  border-radius: 0;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg,#070c15 0%,#0a1627 12%,#0b1f35 26%,#0b2a44 42%,#0b3552 58%,#0c3e5f 74%,#0d476b 100%);
  box-shadow: none;
  overflow: hidden;
  isolation: isolate;
}

/* Soft aurora layer, aligned with icy-section feel */
#skinsSection::before,
#skinsSection::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.65;
  background:
    radial-gradient(55% 40% at 18% 8%, rgba(160,210,255,0.18), transparent 65%),
    radial-gradient(55% 36% at 82% 18%, rgba(185,155,255,0.16), transparent 68%);
  filter: saturate(105%) contrast(102%);
}
#skinsSection::after{
  opacity: 0.45;
  filter: blur(4px);
}

/* Let the original .skins-section gradient still exist underneath,
   but keep stars/aurora subtle so scroll transition is smooth */
#skinsSection .skins-cosmic{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:0.65;
  filter:saturate(105%) contrast(102%);
}
#skinsSection .skins-stars{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  display:block;
  opacity:0.7;
  mix-blend-mode:screen;
}

/* Inner content sits above overlays */
#skinsSection .skins-inner{
  position:relative;
  z-index:2;
}

/* Keep cards with a bit of glow but no extreme separation from background */
#skinsSection .skin-card{
  border-radius:16px;
  border:1px solid rgba(140,200,250,.35);
  box-shadow:0 10px 34px rgba(3,8,18,.70);
  background:
    radial-gradient(130% 150% at 0% 0%, rgba(120,210,255,.12), transparent 55%),
    radial-gradient(130% 150% at 100% 0%, rgba(192,139,255,.12), transparent 55%),
    linear-gradient(185deg, rgba(7,10,24,.97), rgba(4,7,18,.99));
}
#skinsSection .skin-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    conic-gradient(from 200deg,
      transparent,
      rgba(126,210,255,.35),
      transparent 35%,
      rgba(192,139,255,.38),
      transparent 75%,
      rgba(126,210,255,.28),
      transparent);
  opacity:0;
  mix-blend-mode:screen;
  filter:blur(18px);
  transition:opacity .25s ease;
}
#skinsSection .skin-card:hover::before{
  opacity:0.7;
}

/* Sidebar tuned to same dark panels used on Page 2 */
#skinsSection .skins-sidebar{
  background: linear-gradient(180deg, rgba(8,16,36,.98), rgba(4,7,22,.99));
  border-radius: 18px;
  border: 1px solid rgba(130, 195, 245, .45);
  box-shadow: 0 18px 52px rgba(0,0,0,.80);
}

/* Shared aurora sweep animation if not already defined */
@keyframes nxAuroraSweep{
  0%{ transform: translate3d(-4%, -2%, 0) rotate(0deg); }
  50%{ transform: translate3d(3%, 2%, 0) rotate(1.5deg); }
  100%{ transform: translate3d(-4%, -2%, 0) rotate(0deg); }
}