:root{
  --bg:#05070d; --ink:#e8f0ff; --ink2:#9fb2d0; --ink3:#5f739a;
  --line:rgba(120,160,220,.14); --line2:rgba(120,160,220,.28);
  --cyan:#4fd6ff; --jade:#39e6b0; --gold:#ffcf6a; --coral:#ff6b7a;
  --glass:rgba(10,16,28,.55); --glass2:rgba(14,22,38,.7);
  --shadow:0 18px 50px -20px rgba(0,0,0,.8);
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Geist",Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  overflow:hidden; position:fixed; inset:0;
  -webkit-font-smoothing:antialiased; letter-spacing:.01em;
}
canvas#scene{position:fixed; inset:0; width:100vw; height:100vh; display:block; touch-action:none}
.tnum{font-variant-numeric:tabular-nums; font-family:var(--mono)}
.accent{color:var(--cyan)}

/* ---- boot ---- */
#boot{position:fixed; inset:0; display:grid; place-items:center; background:var(--bg);
  z-index:50; transition:opacity .8s ease; gap:0}
#boot.gone{opacity:0; pointer-events:none}
.boot-core{width:54px; height:54px; border-radius:50%;
  border:2px solid rgba(79,214,255,.15); border-top-color:var(--cyan);
  animation:spin 1s linear infinite; box-shadow:0 0 40px rgba(79,214,255,.35)}
.boot-txt{position:absolute; margin-top:100px; color:var(--ink2); font-size:13px;
  font-family:var(--mono); letter-spacing:.08em}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- generic HUD ---- */
.hud{position:fixed; z-index:20; color:var(--ink)}
.card{
  background:var(--glass); backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--line); border-radius:16px; padding:14px 15px;
  box-shadow:var(--shadow); width:270px;
  animation:rise .7s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.card-h{font-size:11px; text-transform:uppercase; letter-spacing:.13em;
  color:var(--ink2); margin-bottom:11px; display:flex; align-items:center; gap:7px; font-weight:600}
.k{display:block; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink3); margin-bottom:2px}
.v{font-size:15px; color:var(--ink); font-weight:500}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:11px 12px}
.dot{width:8px; height:8px; border-radius:50%; background:var(--ink3); display:inline-block}
.dot.live{background:var(--jade); box-shadow:0 0 0 0 rgba(57,230,176,.6); animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(57,230,176,.5)}70%{box-shadow:0 0 0 7px rgba(57,230,176,0)}100%{box-shadow:0 0 0 0 rgba(57,230,176,0)}}

/* ---- top bar ---- */
.top{top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center;
  padding:18px 22px; pointer-events:none;
  background:linear-gradient(180deg,rgba(5,7,13,.75),transparent)}
.brand{display:flex; align-items:center; gap:12px}
.brand .glyph{font-size:26px; color:var(--cyan); text-shadow:0 0 22px rgba(79,214,255,.7); animation:spin 26s linear infinite; display:inline-block}
.brand h1{font-size:21px; font-weight:700; letter-spacing:.32em; margin-left:-.1em}
.brand .sub{font-size:11px; color:var(--ink2); letter-spacing:.14em; text-transform:uppercase}
.clocks{display:flex; gap:24px}
.clocks .k{text-align:right}
.clocks .v{font-size:16px}
.clocks>div{text-align:right}

/* ---- positions ---- */
.left{top:96px; left:22px}
.left2{top:335px; left:22px}
.right{top:96px; right:22px}
.right2{top:300px; right:22px}
.apod{top:auto; bottom:78px; right:22px; width:270px; display:flex; gap:12px;
  text-decoration:none; color:inherit; align-items:center; cursor:pointer; transition:transform .2s, border-color .2s}
.apod:hover{transform:translateY(-2px); border-color:var(--line2)}
.apod-thumb{width:62px; height:62px; border-radius:11px; flex:none; background:#0c1220 center/cover no-repeat; border:1px solid var(--line)}
.apod-body{min-width:0}
.apod-title{font-size:13px; line-height:1.35; color:var(--ink); margin-top:5px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}

/* ISS */
.over{margin-top:12px}
.mini{margin-top:13px; width:100%; background:rgba(79,214,255,.1); color:var(--cyan);
  border:1px solid rgba(79,214,255,.35); border-radius:9px; padding:8px; font-size:12px;
  font-family:var(--mono); letter-spacing:.05em; cursor:pointer; transition:.18s; text-transform:uppercase}
.mini:hover{background:rgba(79,214,255,.2)}
.mini.active{background:var(--cyan); color:#04121c; border-color:var(--cyan)}

/* pass */
.pass-big{font-size:20px; color:var(--jade); margin-bottom:12px; text-shadow:0 0 24px rgba(57,230,176,.35)}
.pass-note{margin-top:11px; font-size:11px; color:var(--ink3); line-height:1.4}

/* launch */
.launch-name{font-size:16px; font-weight:600; line-height:1.3; margin-bottom:6px}
.launch-meta{font-size:11.5px; color:var(--ink2); line-height:1.5; margin-bottom:13px}
.countdown{font-size:19px; color:var(--gold); letter-spacing:.06em; text-shadow:0 0 22px rgba(255,207,106,.28)}

/* weather */
.kp-wrap{display:flex; align-items:center; gap:14px}
.kp-gauge{flex:1; height:9px; border-radius:6px; background:rgba(120,160,220,.13); overflow:hidden;
  border:1px solid var(--line)}
.kp-fill{height:100%; width:0%; border-radius:6px;
  background:linear-gradient(90deg,var(--jade),var(--gold) 60%,var(--coral));
  transition:width .8s cubic-bezier(.2,.8,.2,1)}
.kp-read{text-align:right}
.kp-read .v{font-size:22px; color:var(--ink)}
.aurora{margin-top:13px; font-size:12px; color:var(--ink2)}
.aurora b{color:var(--jade)}

/* controls */
.controls{bottom:20px; left:22px; display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.toggle{background:var(--glass); border:1px solid var(--line); color:var(--ink2);
  border-radius:20px; padding:8px 14px; font-size:12px; cursor:pointer; backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px); transition:.18s; font-family:var(--sans)}
.toggle:hover{border-color:var(--line2); color:var(--ink)}
.toggle.on{color:var(--cyan); border-color:rgba(79,214,255,.4); background:rgba(79,214,255,.08)}
.people{font-size:12px; color:var(--ink3); margin-left:6px}
.people b{color:var(--ink)}

.hint{bottom:22px; left:50%; transform:translateX(-50%); font-size:11px; color:var(--ink3);
  font-family:var(--mono); letter-spacing:.06em; pointer-events:none; opacity:.8;
  transition:opacity .6s}
.hint.gone{opacity:0}

/* sat-label i canvas-lager (skapas i JS) */
.sat-label{position:fixed; z-index:15; transform:translate(-50%,-140%); pointer-events:none;
  font-family:var(--mono); font-size:11px; color:var(--cyan); white-space:nowrap;
  text-shadow:0 0 12px rgba(0,0,0,.9); letter-spacing:.04em}
.sat-label::after{content:""; position:absolute; left:50%; top:100%; width:1px; height:14px;
  background:linear-gradient(var(--cyan),transparent); transform:translateX(-50%)}

/* ---- responsivt (mobil kommer i pass 2, men grunden finns) ---- */
@media (max-width:900px){
  .card{width:min(46vw,270px)}
  .left2{top:auto}
}
@media (max-width:680px){
  .top{padding:12px 14px}
  .brand h1{font-size:18px}
  .clocks{gap:14px}
  .card{width:calc(50vw - 20px); padding:11px 12px}
  .left{top:78px; left:12px} .right{top:78px; right:12px}
  .left2,.right2{display:none}
  .apod{bottom:70px; right:12px; width:calc(100vw - 24px)}
  .v{font-size:13px} .grid2{gap:8px}
  .hint{display:none}
  .controls{bottom:14px; left:12px; gap:6px}
  .toggle{padding:7px 11px; font-size:11px}
}