:root{
  --navy:#050816; --purple:#a06bff; --pink:#ff5fd0; --cyan:#4fe9ff; --gold:#ffd24a;
  --text:#f3ecff; --muted:#b3a6da; --glass:rgba(24,16,52,.42); --glass2:rgba(30,20,64,.72);
  --border:rgba(180,150,255,.28);
}
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
html,body{ height:100%; overflow:hidden; }
body{ font-family:'Space Grotesk','Baloo 2',system-ui,sans-serif; background:var(--navy); color:var(--text); }
.hidden{ display:none !important; }
b{ font-weight:700; }

/* ── space background ── */
.space{ position:fixed; inset:0; z-index:0; overflow:hidden; background:radial-gradient(1200px 800px at 50% 40%, #0d0a2a 0%, #050816 70%); }
#starfield{ position:absolute; inset:0; }
.nebula{ position:absolute; border-radius:50%; filter:blur(90px); opacity:.4; mix-blend-mode:screen; animation:neb 30s ease-in-out infinite; }
.n1{ width:600px;height:600px; background:#7a3bff; top:-10%; left:-8%; }
.n2{ width:560px;height:560px; background:#ff3ea5; bottom:-12%; right:-6%; animation-delay:-10s; }
.n3{ width:480px;height:480px; background:#2fd6ff; top:44%; left:60%; animation-delay:-18s; }
@keyframes neb{ 0%,100%{ transform:translate(0,0) scale(1) } 50%{ transform:translate(50px,-30px) scale(1.15) } }
.aurora{ position:absolute; top:-20%; left:-20%; right:-20%; height:60%; opacity:.22; mix-blend-mode:screen; pointer-events:none;
  background:linear-gradient(110deg, transparent, rgba(79,233,255,.5), rgba(160,107,255,.5), rgba(255,95,208,.4), transparent);
  filter:blur(50px); animation:aur 16s ease-in-out infinite; }
@keyframes aur{ 0%,100%{ transform:translateX(-6%) skewY(-2deg) } 50%{ transform:translateX(6%) skewY(2deg) } }
.moon{ position:absolute; top:12%; right:10%; width:64px; height:64px; border-radius:50%; cursor:pointer; z-index:2;
  background:radial-gradient(circle at 35% 30%, #fff, #d8d2f0 45%, #9a93c8); box-shadow:0 0 40px 6px rgba(200,200,255,.5); transition:transform .2s; }
.moon:active{ transform:scale(.9); }
#shooting span{ position:absolute; width:2px; height:2px; background:#fff; border-radius:50%;
  box-shadow:0 0 0 1px #fff; opacity:0; }
#shooting span::after{ content:''; position:absolute; top:0; left:0; width:120px; height:1px; transform-origin:left; transform:rotate(210deg);
  background:linear-gradient(90deg,#fff,transparent); }

/* ── globe ── */
#globeViz{ position:fixed; inset:0; z-index:1; }
#globeGlow{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side at 50% 52%, rgba(120,90,255,.16), transparent 62%); }

/* ── loader ── */
#worldLoader{ position:fixed; inset:0; z-index:60; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  background:radial-gradient(800px 500px at 50% 40%, #10082e, #050816); transition:opacity .8s, visibility .8s; }
#worldLoader.gone{ opacity:0; visibility:hidden; }
.wl-uni{ font-size:66px; animation:bob 2.4s ease-in-out infinite; filter:drop-shadow(0 0 26px var(--purple)); }
.wl-title{ font-weight:700; font-size:34px; letter-spacing:3px; text-shadow:0 0 20px var(--purple); }
.wl-sub{ color:var(--muted); font-weight:600; letter-spacing:1px; }
@keyframes bob{ 0%,100%{ transform:translateY(0) rotate(-5deg) } 50%{ transform:translateY(-12px) rotate(6deg) } }

/* ── glass ── */
.glass{ background:var(--glass); backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid var(--border); border-radius:18px; box-shadow:0 8px 30px -10px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08); }
.glass-strong{ background:var(--glass2); backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:1px solid var(--border); border-radius:22px; box-shadow:0 20px 60px -18px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.1); }

/* ── top ── */
.logo{ position:fixed; top:16px; left:16px; z-index:20; padding:10px 16px; font-size:18px; font-weight:600; letter-spacing:.5px; }
.logo b{ background:linear-gradient(90deg,var(--cyan),var(--pink)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.topnav{ position:fixed; top:16px; right:16px; z-index:20; display:flex; gap:8px; align-items:stretch; }
.navstat{ padding:8px 14px; text-align:center; min-width:74px; }
.navstat span{ display:block; font-weight:700; font-size:18px; color:var(--cyan); }
.navstat small{ font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
.navbtn{ padding:8px 14px; color:var(--text); font-family:inherit; font-weight:600; font-size:13px; cursor:pointer; transition:.15s; }
.navbtn:hover{ background:rgba(160,107,255,.25); }
@media(max-width:720px){ .navstat small{ display:none; } .navbtn{ font-size:0; padding:8px 12px; } .navbtn::first-letter{ font-size:16px; } }

/* ── search ── */
.searchwrap{ position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:20; display:flex; align-items:center; gap:8px; padding:9px 14px; width:min(440px,60vw); }
.searchwrap span{ opacity:.7; }
.searchwrap input{ flex:1; background:none; border:none; outline:none; color:var(--text); font-family:inherit; font-size:14px; }
.searchwrap input::placeholder{ color:var(--muted); }
.search-results{ position:absolute; top:52px; left:0; right:0; max-height:260px; overflow-y:auto; display:none; flex-direction:column; }
.search-results.on{ display:flex; }
.sr{ background:var(--glass2); backdrop-filter:blur(20px); border:1px solid var(--border); border-radius:12px; padding:9px 12px; margin-bottom:6px; cursor:pointer; font-size:13px; display:flex; gap:8px; align-items:center; }
.sr:hover{ background:rgba(160,107,255,.3); }
.sr small{ color:var(--muted); margin-left:auto; }
@media(max-width:720px){ .searchwrap{ top:70px; width:92vw; } }

/* ── feed ── */
.feed{ position:fixed; left:16px; top:80px; z-index:15; width:250px; padding:12px; max-height:44vh; }
.panel-h{ font-weight:700; font-size:13px; margin-bottom:8px; color:var(--pink); letter-spacing:.5px; }
.feed-list{ display:flex; flex-direction:column; gap:7px; overflow:hidden; }
.feed-item{ display:flex; gap:8px; align-items:center; font-size:12.5px; padding:7px 9px; background:rgba(160,107,255,.12); border-radius:12px; animation:slidein .5s cubic-bezier(.2,1,.3,1); }
.feed-item .fi-uni{ font-size:16px; } .feed-item b{ color:#fff; } .feed-item .ago{ margin-left:auto; font-size:10px; color:var(--muted); }
@keyframes slidein{ from{ transform:translateX(-30px); opacity:0 } to{ transform:none; opacity:1 } }
@media(max-width:720px){ .feed{ display:none; } }

/* ── stat cards ── */
.statcards{ position:fixed; left:16px; bottom:16px; z-index:15; display:grid; grid-template-columns:1fr 1fr; gap:8px; width:250px; }
.statcard{ padding:11px 12px; display:flex; align-items:center; gap:10px; }
.sc-ic{ font-size:22px; } .statcard b{ display:block; font-size:19px; font-weight:700; } .statcard span{ font-size:10px; color:var(--muted); }
.statcard[data-panel]{ cursor:pointer; transition:transform .12s, background .15s, border-color .15s; }
.statcard[data-panel]:hover{ transform:translateY(-2px); background:rgba(160,107,255,.22); border-color:var(--cyan); }
.statcard[data-panel]::after{ content:'▸'; margin-left:auto; opacity:.5; font-size:12px; align-self:center; }
.list-body{ display:flex; flex-direction:column; gap:6px; }
.list-row{ display:flex; align-items:center; gap:9px; padding:9px 11px; background:rgba(160,107,255,.12); border-radius:12px; cursor:pointer; font-weight:600; font-size:13.5px; transition:background .12s, transform .08s; }
.list-row:hover{ background:rgba(160,107,255,.32); transform:translateX(2px); }
.list-row .av{ font-size:17px; } .list-row small{ margin-left:auto; color:var(--muted); font-size:11px; white-space:nowrap; }
@media(max-width:720px){ .statcards{ width:auto; left:12px; right:12px; bottom:82px; } }

/* ── join fab ── */
.join-fab{ position:fixed; right:18px; bottom:18px; z-index:25; font-family:inherit; font-weight:700; font-size:16px; color:#fff; cursor:pointer;
  border:none; border-radius:40px; padding:15px 26px; background:linear-gradient(135deg,var(--cyan),var(--pink) 55%,var(--purple));
  box-shadow:0 10px 34px -6px var(--pink), 0 0 0 1px rgba(255,255,255,.15) inset; animation:pulse 2.6s ease-in-out infinite; transition:transform .1s; }
.join-fab:hover{ transform:translateY(-2px) scale(1.03); } .join-fab:active{ transform:scale(.96); }
@keyframes pulse{ 0%,100%{ box-shadow:0 10px 30px -8px var(--pink) } 50%{ box-shadow:0 12px 48px -4px var(--purple) } }
.hint{ position:fixed; right:18px; bottom:74px; z-index:15; font-size:11px; color:var(--muted); background:var(--glass); border:1px solid var(--border); border-radius:10px; padding:5px 10px; backdrop-filter:blur(10px); }
@media(max-width:720px){ .hint{ display:none; } }

/* ── unicorn markers ── */
.uni-marker{ position:relative; cursor:pointer; font-size:20px; transform:translate(-50%,-50%); transition:transform .2s; will-change:transform; }
.uni-marker .u{ display:inline-block; animation:floaty 3.4s ease-in-out infinite; filter:drop-shadow(0 0 6px var(--purple)); }
.uni-marker::after{ content:''; position:absolute; left:50%; top:60%; width:26px; height:26px; transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(160,107,255,.55), transparent 70%); z-index:-1; animation:mpulse 2.4s ease-in-out infinite; }
.uni-marker:hover{ transform:translate(-50%,-50%) scale(1.5); z-index:10; }
.uni-name{ position:absolute; top:104%; left:50%; transform:translateX(-50%); white-space:nowrap; cursor:pointer;
  background:rgba(20,12,45,.82); border:1px solid var(--border); border-radius:8px; padding:2px 8px; margin-top:2px;
  font-size:11px; font-weight:700; color:#fff; letter-spacing:.2px; box-shadow:0 3px 10px -4px rgba(0,0,0,.7);
  text-shadow:0 1px 2px rgba(0,0,0,.6); max-width:130px; overflow:hidden; text-overflow:ellipsis; opacity:1; transition:opacity .35s ease, background .15s; }
.uni-marker:hover .uni-name{ background:rgba(160,107,255,.95); }
/* fade names out when zoomed far from the globe */
#globeViz.labels-hidden .uni-name{ opacity:0; pointer-events:none; }
/* but always reveal the hovered marker's name so far-out hover still works */
#globeViz.labels-hidden .uni-marker:hover .uni-name{ opacity:1; }
.uni-marker.wave .u{ animation:wave .6s ease-in-out; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(-4deg) } 50%{ transform:translateY(-5px) rotate(4deg) } }
@keyframes mpulse{ 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(1) } 50%{ opacity:.9; transform:translate(-50%,-50%) scale(1.4) } }
@keyframes wave{ 0%,100%{ transform:rotate(-4deg) } 25%{ transform:rotate(24deg) } 75%{ transform:rotate(-24deg) } }
.uni-tip{ position:absolute; bottom:130%; left:50%; transform:translateX(-50%); white-space:nowrap; background:var(--glass2); backdrop-filter:blur(14px);
  border:1px solid var(--border); border-radius:12px; padding:8px 12px; font-size:12px; opacity:0; pointer-events:none; transition:.18s; box-shadow:0 8px 24px -8px #000; }
.uni-marker:hover .uni-tip{ opacity:1; transform:translateX(-50%) translateY(-4px); }
.uni-tip b{ color:var(--cyan); } .uni-tip .tp{ color:var(--pink); display:block; margin-top:2px; } .uni-tip small{ color:var(--muted); }

/* ── modal ── */
.scrim{ position:fixed; inset:0; z-index:70; background:rgba(4,3,14,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:16px; }
.modal{ width:100%; max-width:420px; padding:26px; position:relative; max-height:92vh; overflow-y:auto; animation:pop .3s cubic-bezier(.2,1.3,.5,1); }
@keyframes pop{ from{ transform:scale(.9); opacity:0 } to{ transform:none; opacity:1 } }
.modal h2{ font-size:22px; margin-bottom:4px; }
.msub{ color:var(--muted); font-size:13px; margin-bottom:14px; }
.modal label{ display:block; font-size:12px; font-weight:700; margin:12px 0 5px; color:var(--muted); }
.modal label i{ font-weight:500; opacity:.7; }
.modal input{ width:100%; background:rgba(10,6,26,.6); border:1px solid var(--border); border-radius:12px; padding:11px 12px; color:var(--text); font-family:inherit; font-size:15px; }
.modal input:focus{ outline:none; border-color:var(--cyan); box-shadow:0 0 0 3px rgba(79,233,255,.15); }
.cwrap{ position:relative; }
.cdrop{ position:absolute; top:48px; left:0; right:0; max-height:200px; overflow-y:auto; background:var(--glass2); backdrop-filter:blur(20px); border:1px solid var(--border); border-radius:12px; z-index:5; display:none; }
.cdrop.on{ display:block; }
.cdrop div{ padding:9px 12px; cursor:pointer; font-size:14px; } .cdrop div:hover{ background:rgba(160,107,255,.3); }
.join-submit{ width:100%; margin-top:18px; font-family:inherit; font-weight:700; font-size:16px; color:#fff; cursor:pointer; border:none; border-radius:14px; padding:14px;
  background:linear-gradient(135deg,var(--cyan),var(--pink),var(--purple)); box-shadow:0 10px 28px -8px var(--pink); transition:transform .1s; }
.join-submit:active{ transform:scale(.97); }
.x{ position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--text); cursor:pointer; font-size:14px; }

/* ── member card ── */
.member-card{ position:fixed; z-index:65; right:18px; bottom:90px; width:280px; padding:20px; text-align:center; animation:pop .3s; }
.mc-uni{ font-size:44px; filter:drop-shadow(0 0 14px var(--purple)); animation:floaty 3s ease-in-out infinite; }
.mc-name{ font-weight:700; font-size:20px; margin-top:4px; }
.mc-country{ color:var(--cyan); font-weight:600; font-size:13px; }
.mc-phrase{ margin:12px 0; font-size:15px; font-style:italic; color:#fff; }
.mc-meta{ font-size:11px; color:var(--muted); }
.mc-x a{ color:var(--pink); text-decoration:none; font-weight:700; font-size:13px; }
@media(max-width:720px){ .member-card{ right:12px; left:12px; width:auto; bottom:150px; } }

/* ── side panels ── */
.side-panel{ position:fixed; z-index:66; right:18px; top:70px; width:300px; max-height:70vh; overflow-y:auto; padding:22px; animation:pop .3s; }
.side-panel h2{ font-size:20px; margin-bottom:12px; }
.side-panel p{ color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:10px; }
.side-panel p.dim{ color:var(--muted); opacity:.7; font-size:12px; }
.lb-list{ display:flex; flex-direction:column; gap:7px; }
.lb-row{ display:flex; align-items:center; gap:10px; padding:9px 11px; background:rgba(160,107,255,.12); border-radius:12px; font-weight:600; }
.lb-row .rk{ font-weight:700; width:26px; color:var(--gold); }
.lb-row .bar{ flex:1; height:6px; background:rgba(255,255,255,.1); border-radius:4px; overflow:hidden; }
.lb-row .bar i{ display:block; height:100%; background:linear-gradient(90deg,var(--cyan),var(--pink)); }
.lb-row .n{ font-size:13px; color:var(--cyan); min-width:20px; text-align:right; }
@media(max-width:720px){ .side-panel{ right:12px; left:12px; width:auto; } }

/* ── beam / effects ── */
#rainbowBeam{ position:fixed; z-index:40; width:8px; top:-40vh; height:0; border-radius:8px; pointer-events:none; opacity:0;
  background:linear-gradient(180deg, transparent, #4fe9ff, #a06bff, #ff5fd0, #ffd24a, #fff); box-shadow:0 0 24px 6px rgba(160,107,255,.7); filter:blur(.3px); }

/* ── toast / badge ── */
.toast{ position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:80; background:var(--glass2); backdrop-filter:blur(16px); border:1px solid var(--border);
  color:#fff; border-radius:14px; padding:11px 18px; font-weight:700; opacity:0; transition:opacity .25s; box-shadow:0 0 30px -8px var(--purple); font-size:14px; text-align:center; max-width:88vw; }
.toast.show{ opacity:1; }
.badge-pop{ position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center; pointer-events:none; }
.badge-pop .bp{ background:var(--glass2); backdrop-filter:blur(20px); border:2px solid var(--gold); border-radius:24px; padding:30px 40px; text-align:center; box-shadow:0 0 60px 6px var(--gold); animation:pop .4s; }
.badge-pop .bp .e{ font-size:60px; } .badge-pop .bp b{ display:block; font-size:22px; margin-top:8px; } .badge-pop .bp span{ color:var(--muted); font-size:13px; }
.rain-uni{ position:fixed; z-index:85; font-size:24px; top:-40px; pointer-events:none; }
@media(prefers-reduced-motion:reduce){ *{ animation-duration:.01ms !important; } }