/* =========================================================
   OUR SPACE 4.2 — PROJECT CONSTELLATION DESIGN OVERDRIVE
   Pure visual/interactivity layer. Keeps existing features.
   ========================================================= */
:root{
  --infinity-blue:#49a8ff;
  --infinity-pink:#ff4fb8;
  --infinity-purple:#8d5cff;
  --infinity-gold:#ffd166;
  --infinity-green:#71ffe0;
  --infinity-red:#ff4d6d;
  --infinity-black:#02040d;
  --panel-glow: 0 0 30px rgba(73,168,255,.18), 0 30px 90px rgba(0,0,0,.55);
}
html{background:#02040d;}
body{
  background:
    radial-gradient(circle at 12% 10%, rgba(73,168,255,.20), transparent 24rem),
    radial-gradient(circle at 82% 18%, rgba(255,79,184,.18), transparent 24rem),
    radial-gradient(circle at 48% 88%, rgba(141,92,255,.16), transparent 26rem),
    linear-gradient(180deg,#02040d 0%,#061022 44%,#11071b 100%) !important;
}
body::before{
  content:"";
  position:fixed; inset:-12%; z-index:-10; pointer-events:none;
  background:
    radial-gradient(circle at 18% 24%, rgba(255,255,255,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 68% 28%, rgba(255,255,255,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 72%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 87% 69%, rgba(255,255,255,.30) 0 1px, transparent 2px);
  background-size:160px 160px,220px 220px,190px 190px,280px 280px;
  animation: starSlowDrift 70s linear infinite;
  opacity:.5;
}
@keyframes starSlowDrift{to{transform:translate3d(-80px,70px,0) rotate(.5deg)}}

/* cinematic universe shell */
.constellation-stage{
  position:fixed; inset:0; z-index:-4; pointer-events:none; overflow:hidden;
  perspective:900px;
}
.constellation-stage .planet{
  position:absolute; width:180px; height:180px; border-radius:999px;
  filter: drop-shadow(0 0 45px rgba(73,168,255,.22));
  opacity:.64; transform-style:preserve-3d;
  animation: planetFloat 16s ease-in-out infinite alternate;
}
.planet.home-world{left:-55px; top:18%; background:radial-gradient(circle at 30% 28%,#7fffd4,#2b63ff 42%,#07143d 72%);}
.planet.arcade-world{right:-70px; top:38%; background:radial-gradient(circle at 34% 24%,#ffdf7a,#ff4fb8 40%,#320124 74%); animation-delay:-3s;}
.planet.mix-world{left:18%; bottom:-85px; background:radial-gradient(circle at 34% 24%,#bba2ff,#6938ff 44%,#090026 76%); animation-delay:-6s;}
.planet.arena-world{right:20%; bottom:-105px; background:radial-gradient(circle at 32% 25%,#ffd166,#ff4d6d 46%,#240007 75%); animation-delay:-9s;}
.planet::after{content:""; position:absolute; inset:-10px; border-radius:999px; border:1px solid rgba(255,255,255,.18); transform:rotateX(70deg) rotateZ(-18deg); box-shadow:0 0 22px rgba(255,255,255,.08)}
@keyframes planetFloat{from{transform:translateY(0) rotate(0deg)}to{transform:translateY(-24px) rotate(14deg)}}

.cosmic-ship,.meteor,.mocking-feather,.tiny-droid{
  position:fixed; pointer-events:none; z-index:100; opacity:0;
}
.cosmic-ship{width:68px; height:20px; left:-100px; top:20%; background:linear-gradient(90deg,transparent,#fff,#49a8ff,transparent); clip-path:polygon(0 45%,60% 0,100% 50%,60% 100%,0 55%); filter:drop-shadow(0 0 14px #49a8ff); animation:shipFly 16s linear infinite; animation-delay:4s;}
.cosmic-ship.ship-two{top:62%; animation-duration:23s; animation-delay:11s; filter:drop-shadow(0 0 14px #ff4fb8); transform:scale(.75)}
@keyframes shipFly{0%,70%{opacity:0; transform:translateX(0) translateY(0) scale(.8)}73%{opacity:.8}89%{opacity:.8}100%{opacity:0; transform:translateX(calc(100vw + 180px)) translateY(-90px) scale(1.1)}}
.meteor{width:140px;height:2px;background:linear-gradient(90deg,transparent,#fff,#ffd166);right:-160px;top:15%;transform:rotate(-25deg);filter:drop-shadow(0 0 12px #ffd166);animation:meteorSweep 18s linear infinite;animation-delay:7s;}
@keyframes meteorSweep{0%,78%{opacity:0;transform:translate(0,0) rotate(-25deg)}80%{opacity:.9}100%{opacity:0;transform:translate(-120vw,58vh) rotate(-25deg)}}
.mocking-feather{font-size:2.2rem; top:18%; left:110%; animation:featherFloat 38s ease-in-out infinite; color:rgba(255,209,102,.72); text-shadow:0 0 22px rgba(255,209,102,.65)}
@keyframes featherFloat{0%,55%{opacity:0; transform:translate(0,0) rotate(0deg)}60%{opacity:1}100%{opacity:0; transform:translate(-125vw,65vh) rotate(540deg)}}
.tiny-droid{bottom:92px; left:-80px; width:38px;height:38px;border-radius:50%; background:radial-gradient(circle at 40% 28%,#fff,#49a8ff 35%,#151b35 70%); border:2px solid rgba(255,255,255,.35); animation:droidRoll 42s linear infinite; box-shadow:0 0 20px rgba(73,168,255,.4)}
@keyframes droidRoll{0%,72%{opacity:0; transform:translateX(0) rotate(0)}75%{opacity:1}96%{opacity:1}100%{opacity:0; transform:translateX(calc(100vw + 120px)) rotate(1000deg)}}

/* App becomes cockpit glass */
.topbar,.bottom-nav,.glass,.hero-panel,.daily-card,.play-panel,.memory-grid article,.modal-card{
  border-color:rgba(255,255,255,.22)!important;
  box-shadow:var(--panel-glow), inset 0 1px 0 rgba(255,255,255,.12)!important;
}
.glass,.hero-panel,.daily-card,.play-panel,.command-card,.featured-memory,.continue-watching,.vault,.setting-card,.memory-card,.gallery-card,.achievement-card,.stat-card,.song-card{
  background:
    linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.045)) padding-box,
    linear-gradient(135deg,rgba(73,168,255,.72),rgba(255,79,184,.38),rgba(255,209,102,.45)) border-box!important;
  border:1px solid transparent!important;
  backdrop-filter: blur(24px) saturate(1.35)!important;
}
.hero-panel{position:relative; overflow:hidden; isolation:isolate;}
.hero-panel::before{
  content:""; position:absolute; inset:-2px; z-index:-1;
  background:conic-gradient(from var(--spin,0deg), rgba(73,168,255,.18), rgba(255,79,184,.16), rgba(255,209,102,.12), rgba(113,255,224,.14), rgba(73,168,255,.18));
  filter:blur(12px); animation:borderSpin 12s linear infinite;
}
@keyframes borderSpin{to{--spin:360deg}}
@property --spin{syntax:"<angle>";inherits:false;initial-value:0deg;}

/* Universe Command Deck */
.infinity-console{
  display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; margin:1rem 0;
}
.cosmic-map-card{position:relative; min-height:300px; border-radius:32px; overflow:hidden; padding:1.2rem;}
.cosmic-map-card::before{content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(73,168,255,.10), transparent 42%), repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.08) 0 1px, transparent 1px 38px); animation:radarSpin 22s linear infinite;}
@keyframes radarSpin{to{transform:rotate(360deg)}}
.orbit-button{position:absolute; width:70px; height:70px; border-radius:999px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.26); background:rgba(255,255,255,.08); color:#fff; font-weight:900; box-shadow:0 0 30px rgba(73,168,255,.25); transition:.25s ease;}
.orbit-button:hover,.orbit-button:focus{transform:scale(1.12); box-shadow:0 0 45px rgba(255,79,184,.45)}
.orbit-button:nth-child(1){left:50%;top:8%; transform:translateX(-50%)}
.orbit-button:nth-child(2){left:8%;top:48%}
.orbit-button:nth-child(3){right:8%;top:48%}
.orbit-button:nth-child(4){left:50%;bottom:8%; transform:translateX(-50%)}
.orbit-core{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:110px; height:110px; border-radius:999px; display:grid; place-items:center; font-size:2.2rem; background:radial-gradient(circle,#fff,#49a8ff 34%,#0a0e2d 72%); box-shadow:0 0 60px rgba(73,168,255,.55), inset 0 0 30px rgba(255,255,255,.35);}
.mission-log{border-radius:32px; padding:1.2rem; position:relative; overflow:hidden;}
.mission-log ul{padding-left:1.1rem; margin:.8rem 0 0; color:var(--muted); line-height:1.75;}
.mission-log::after{content:"SYSTEM ONLINE"; position:absolute; right:-2rem; bottom:1rem; transform:rotate(-18deg); font-size:2.3rem; font-weight:1000; opacity:.055; letter-spacing:.08em;}

/* Play cards look like neon arcade cabinets */
.play-panel{position:relative; overflow:hidden; transform-style:preserve-3d;}
.play-panel::before{content:""; position:absolute; inset:0; background:linear-gradient(110deg, transparent 0 30%, rgba(255,255,255,.10) 45%, transparent 60%); transform:translateX(-120%); transition:transform .8s ease; pointer-events:none;}
.play-panel:hover::before{transform:translateX(120%)}
.play-panel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--infinity-blue),var(--infinity-pink),var(--infinity-gold));box-shadow:0 0 20px var(--infinity-pink)}

/* premium buttons */
.pill,.primary,.secondary,.icon-button,.brand,.bottom-nav button{
  position:relative; overflow:hidden;
}
.pill::after,.primary::after,.secondary::after,.icon-button::after,.bottom-nav button::after{
  content:""; position:absolute; inset:-40%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent); transform:translateX(-120%) rotate(20deg); transition:transform .55s ease;}
.pill:hover::after,.primary:hover::after,.secondary:hover::after,.icon-button:hover::after,.bottom-nav button:hover::after{transform:translateX(120%) rotate(20deg)}

/* lightsaber swipe */
.saber-slash{position:fixed; height:4px; width:0; left:50%; top:50%; z-index:9999; transform-origin:left center; border-radius:999px; pointer-events:none; background:#77d8ff; box-shadow:0 0 12px #fff,0 0 28px #49a8ff,0 0 60px #49a8ff; animation:saberSlash .45s ease-out forwards;}
.saber-slash.pink{background:#ff77c7; box-shadow:0 0 12px #fff,0 0 28px #ff4fb8,0 0 70px #ff4fb8}
@keyframes saberSlash{0%{width:0; opacity:0; transform:rotate(var(--angle,22deg)) translateX(-120px)}20%{opacity:1}100%{width:420px; opacity:0; transform:rotate(var(--angle,22deg)) translateX(80px)}}

/* Feature sections themed as worlds */
.screen{position:relative;}
.screen::before{opacity:.7!important; filter:saturate(1.4)}
#play{background:radial-gradient(circle at 50% 0%, rgba(255,79,184,.11), transparent 38%)}
#galaxy{background:radial-gradient(circle at 50% 20%, rgba(73,168,255,.10), transparent 42%)}
#vault{background:radial-gradient(circle at 50% 25%, rgba(255,77,109,.13), transparent 42%)}
#soundtrack{background:radial-gradient(circle at 50% 20%, rgba(141,92,255,.14), transparent 42%)}
#wrapped{background:radial-gradient(circle at 50% 20%, rgba(255,209,102,.13), transparent 42%)}

/* Hyperspace portal overlay */
.portal-flash{position:fixed; inset:0; pointer-events:none; z-index:9998; opacity:0; background:radial-gradient(circle at var(--x,50%) var(--y,50%), rgba(255,255,255,.95), rgba(73,168,255,.45) 9%, rgba(141,92,255,.16) 25%, transparent 55%); animation:portalFlash .65s ease-out forwards;}
@keyframes portalFlash{0%{opacity:0; transform:scale(.65)}35%{opacity:.9}100%{opacity:0; transform:scale(1.7)}}

/* Infinity dock */
.infinity-dock{position:fixed; right:12px; top:50%; transform:translateY(-50%); z-index:40; display:grid; gap:.55rem;}
.infinity-dock button{width:46px;height:46px;border-radius:16px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.09);color:white;box-shadow:0 0 25px rgba(73,168,255,.16);backdrop-filter:blur(16px);}
.infinity-dock button.active{background:linear-gradient(135deg,rgba(73,168,255,.35),rgba(255,79,184,.25));box-shadow:0 0 35px rgba(255,79,184,.28)}
body.theme-saber{--infinity-blue:#7ee7ff;--infinity-pink:#4fa3ff;}
body.theme-arena{--infinity-blue:#ffd166;--infinity-pink:#ff4d6d;}
body.theme-mix{--infinity-blue:#b187ff;--infinity-pink:#ff4fb8;}
body.theme-football{--infinity-blue:#034694;--infinity-pink:#ffffff;}
body.theme-coffee{--infinity-blue:#d7b58a;--infinity-pink:#f5d4a6;}

/* console title effect */
.glitch-title{position:relative; text-shadow:0 0 20px rgba(73,168,255,.4)}
.glitch-title::before,.glitch-title::after{content:attr(data-text);position:absolute;left:0;top:0;opacity:.25;pointer-events:none;}
.glitch-title::before{transform:translate(2px,-1px);color:#49a8ff;clip-path:inset(0 0 55% 0);}
.glitch-title::after{transform:translate(-2px,1px);color:#ff4fb8;clip-path:inset(55% 0 0 0);}

/* cards tilt highlight */
.tilt-active{transition:transform .12s ease, box-shadow .2s ease; transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-2px)!important; box-shadow:0 0 35px rgba(73,168,255,.22),0 35px 100px rgba(0,0,0,.55)!important;}

/* memory galaxy upgrades */
.galaxy-shell{min-height:620px!important; border-radius:38px!important; overflow:hidden;}
.galaxy-shell::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 50%, transparent 42%, rgba(0,0,0,.45) 100%), linear-gradient(90deg,rgba(73,168,255,.05),transparent,rgba(255,79,184,.05));}
.galaxy-hud{border-radius:22px!important; background:rgba(0,0,0,.32)!important; backdrop-filter:blur(16px)!important; box-shadow:0 0 25px rgba(73,168,255,.16)}

/* mobile refinements */
@media(max-width:780px){
  .infinity-console{grid-template-columns:1fr;}
  .cosmic-map-card{min-height:245px;}
  .orbit-button{width:58px;height:58px;font-size:.8rem;}
  .orbit-core{width:88px;height:88px;}
  .infinity-dock{right:8px; top:auto; bottom:94px; transform:none; grid-template-columns:repeat(5,1fr);}
  .infinity-dock button{width:40px;height:40px;border-radius:14px;}
  .planet{opacity:.33!important; transform:scale(.75)}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important;}
}