:root { --bg:#03020a; --vio:#7c3aed; --lav:#a78bfa; --white:#ede9fe; --bottom-reserve:3.5rem; }
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html, body { width:100%; height:100%; background:var(--bg); color:var(--white); font-family:'Exo 2',sans-serif; overflow:hidden; }

#stars   { position:fixed; inset:0; z-index:0; pointer-events:none; }
#station { position:fixed; z-index:1; cursor:grab; transition: left .7s cubic-bezier(.4,0,.2,1), top .7s cubic-bezier(.4,0,.2,1), width .7s cubic-bezier(.4,0,.2,1), height .7s cubic-bezier(.4,0,.2,1); }
#station.dragging { cursor:grabbing; }
#station { left:0; top:0; width:100%; height:100%; }
#station.mini { left:-6%; top:10%; width:50%; height:80%; }

.neb { position:fixed; border-radius:50%; pointer-events:none; z-index:0; filter:blur(120px); opacity:.10; animation:ndrift 24s ease-in-out infinite alternate; }
.neb-a { width:580px;height:580px;background:#4c1d95;top:-140px;left:-100px; }
.neb-b { width:380px;height:380px;background:#1e3a8a;bottom:0;right:-80px;animation-duration:30s;animation-delay:-14s; }
@keyframes ndrift { to { transform:translate(38px,26px) scale(1.07); } }

#clock { position:fixed;top:22px;right:30px;z-index:30;font-family:'Orbitron',monospace;font-size:clamp(.65rem,1.1vw,.85rem);letter-spacing:.18em;color:var(--lav);text-shadow:0 0 14px rgba(139,92,246,.55);opacity:0;animation:fadeUp .7s 2.4s forwards; }

.top-ui {
  position:fixed; top:0; left:0; right:0; z-index:45;
  display:flex; flex-direction:column; align-items:center;
  padding-top:clamp(.6rem,2.5vh,4rem);
  padding-bottom:clamp(.4rem,1vh,1rem);
  gap:clamp(.4rem,1.2vh,1.5rem);
  pointer-events:none;
  transition: opacity .4s;
}
.top-ui.hidden { opacity:0; pointer-events:none; }

.welcome { text-align:center; opacity:0; animation:fadeUp .9s .4s forwards; }
.welcome .sublabel { display:block;font-family:'Exo 2',sans-serif;font-weight:200;font-size:clamp(.6rem,1.1vw,.78rem);letter-spacing:.55em;text-transform:uppercase;color:var(--lav);opacity:.82;margin-bottom:clamp(.05rem,.4vh,.5rem); }
.welcome h1 { font-family:'Orbitron',monospace;font-weight:900;font-size:clamp(1.2rem,min(4.5vw,5vh),3.4rem);letter-spacing:.05em;background:linear-gradient(130deg,#fff 0%,var(--lav) 50%,var(--vio) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 22px rgba(167,139,250,.45)); }

.btn-row { display:flex;gap:.9rem;flex-wrap:wrap;justify-content:center;pointer-events:all;opacity:0;animation:fadeUp .9s 1s forwards; }
.btn { font-family:'Orbitron',monospace;font-size:clamp(.55rem,.95vw,.7rem);font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--white);text-decoration:none;padding:.7em clamp(.45em,1.6vw,2em);background:rgba(7,4,15,.8);border:1px solid rgba(124,58,237,.38);border-radius:2px;backdrop-filter:blur(10px);transition:border-color .25s,color .25s,box-shadow .25s;position:relative;overflow:hidden;cursor:pointer; }
.btn::after { content:'';position:absolute;top:-100%;left:0;width:100%;height:100%;background:linear-gradient(transparent,rgba(167,139,250,.1),transparent);transition:top .4s; }
.btn:hover { border-color:var(--lav);color:var(--lav);box-shadow:0 0 22px rgba(124,58,237,.45); }
.btn:hover::after { top:100%; }
.btn-hi { border-color:rgba(124,58,237,.7);background:rgba(46,16,101,.45); }
.btn.active { border-color:var(--lav);color:var(--lav);box-shadow:0 0 22px rgba(124,58,237,.65),0 0 6px rgba(167,139,250,.3) inset; }

.overlay {
  position:fixed; inset:0; z-index:40;
  display:flex; align-items:flex-start; justify-content:center;
  padding:var(--top-h,80px) clamp(.8rem,3vw,4rem) var(--bottom-reserve);
  opacity:0; pointer-events:none;
  transition:opacity .45s;
}
.overlay.visible { opacity:1; pointer-events:all; }

.overlay-bg {
  position:absolute; inset:0;
  background:transparent;
}

.overlay-card {
  position:relative; z-index:1;
  width:clamp(300px,60%,780px);
  margin:0 auto;
  max-height:calc(100dvh - var(--top-h,0px) - var(--bottom-reserve));
  display:flex; flex-direction:column; overflow:hidden;
  background:rgba(12,6,28,.82);
  border:1px solid rgba(124,58,237,.3);
  border-radius:8px;
  padding:clamp(1rem,2.5vh,2.4rem) clamp(1rem,2.5vw,2.8rem);
  box-shadow:0 0 60px rgba(100,50,200,.2), inset 0 1px 0 rgba(180,130,255,.08);
  transform:translateY(24px);
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.overlay.visible .overlay-card { transform:translateY(0); }

.overlay-close {
  position:absolute; top:1rem; right:1.2rem;
  background:none; border:none; color:rgba(167,139,250,.6);
  font-size:1.4rem; cursor:pointer; line-height:1;
  transition:color .2s;
}
.overlay-close:hover { color:var(--lav); }

.overlay-title {
  font-family:'Orbitron',monospace; font-weight:700;
  font-size:1.1rem; letter-spacing:.08em;
  color:var(--lav); margin-bottom:1.2rem; flex-shrink:0;
  text-shadow:0 0 14px rgba(167,139,250,.4);
}
.overlay-text {
  font-family:'Exo 2',sans-serif; font-weight:300;
  font-size:.9rem; line-height:1.75;
  color:rgba(237,233,254,.72);
  flex:1; min-height:0; overflow-y:auto;
  padding-right:.5rem;
  scrollbar-width:thin; scrollbar-color:rgba(124,58,237,.45) transparent;
}
.overlay-text::-webkit-scrollbar { width:4px; }
.overlay-text::-webkit-scrollbar-track { background:transparent; }
.overlay-text::-webkit-scrollbar-thumb { background:rgba(124,58,237,.45); border-radius:2px; }
.overlay-text::-webkit-scrollbar-thumb:hover { background:rgba(167,139,250,.7); }
.overlay-text p + p { margin-top:1.1em; }
.overlay-text strong { font-weight:600; color:var(--lav); letter-spacing:.04em; }

#player {
  position:fixed; top:0; left:0; z-index:45;
  opacity:0; animation:fadeUp .6s .6s forwards;
  transition: top .7s cubic-bezier(.4,0,.2,1),
              left .7s cubic-bezier(.4,0,.2,1);
}
#player.compact {
  left:22px; bottom:22px; top:auto; transform:none; z-index:30;
  width:280px; padding:.5rem 1rem;
  background:rgba(7,4,15,.8); border:1px solid rgba(124,58,237,.38);
  border-radius:4px; backdrop-filter:blur(10px);
}
#playerPrompt { display:flex; transition:opacity .3s ease; }
#promptPlay { animation:btnGlow 2.8s ease-in-out infinite; }
@keyframes btnGlow {
  0%,100% { box-shadow:0 0 5px rgba(124,58,237,.12); border-color:rgba(124,58,237,.38); color:var(--white); }
  50%      { box-shadow:0 0 22px rgba(167,139,250,.6),0 0 40px rgba(124,58,237,.22); border-color:var(--lav); color:var(--lav); }
}
#playerMain {
  display:none; flex-direction:column; gap:.55rem;
  opacity:0; transition:opacity .3s ease;
}
.player-name {
  font-family:'Orbitron',monospace; font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--lav); opacity:.8; white-space:nowrap;
}
.player-controls { display:flex; align-items:center; gap:.75rem; }
#playerBtn {
  font-size:.75rem; width:1.8rem; height:1.8rem; flex-shrink:0;
  background:rgba(124,58,237,.25); border:1px solid rgba(124,58,237,.5);
  border-radius:2px; color:var(--lav); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s;
}
#playerBtn:hover { background:rgba(124,58,237,.45); border-color:var(--lav); }
#playerVol {
  -webkit-appearance:none; appearance:none;
  width:100%; height:3px; border-radius:2px;
  background:rgba(124,58,237,.35); outline:none; cursor:pointer;
}
#playerVol::-webkit-slider-thumb {
  -webkit-appearance:none; width:11px; height:11px; border-radius:50%;
  background:var(--lav); cursor:pointer;
  box-shadow:0 0 6px rgba(167,139,250,.6);
}
#playerVol::-moz-range-thumb {
  width:11px; height:11px; border-radius:50%; border:none;
  background:var(--lav); cursor:pointer;
}

body::after { content:'';position:fixed;inset:0;z-index:50;pointer-events:none;background:repeating-linear-gradient(to bottom,transparent 0,transparent 2px,rgba(0,0,0,.028) 2px,rgba(0,0,0,.028) 3px); }
@keyframes fadeUp { from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:translateY(0);} }