/* ============================================================
   Firefly · Blue Ghost IMU — "Lunar Mission Control" theme
   ============================================================ */
:root{
  --bg:#05070e;
  --bg-2:#0a0d1c;
  --lime:#9aca3c;
  --lime-bright:#b6f24a;
  --gold:#d8b25a;
  /* GeekendZone brand green, sampled from the official logo. Kept distinct
     from --lime so the author mark reads as its own identity. */
  --gz-green:#68a507;
  --gz-green-bright:#8ad30d;
  --text:#eaf6d6;
  --muted:#8a987a;
  --danger:#ff6b6b;
  --blue:#7fb3ff;
  --glass:rgba(14,18,14,.45);
  --glass-2:rgba(20,26,18,.55);
  --glass-border:rgba(154,202,60,.26);
  --glass-glow:0 8px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
  --font-display:'Rajdhani',system-ui,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
  --rail-w:300px;
  --bar-h:54px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:radial-gradient(120% 100% at 50% -10%, #0c1326 0%, var(--bg) 55%, #02030a 100%);
  color:var(--text);
  font-family:var(--font-display);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
b{font-weight:700}

/* ===================== Connect overlay ===================== */
.overlay{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(130% 120% at 50% 0%, #0e1730 0%, #04060e 60%, #010208 100%);
  overflow:hidden;
}
.overlay-stars{position:absolute; inset:0; opacity:.7; pointer-events:none;
  background:
    radial-gradient(1.4px 1.4px at 15% 22%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 32% 12%,#cfe9ff,transparent),
    radial-gradient(1px 1px at 54% 28%,#fff,transparent),
    radial-gradient(1.5px 1.5px at 68% 14%,#bfe,transparent),
    radial-gradient(1px 1px at 82% 30%,#fff,transparent),
    radial-gradient(1.2px 1.2px at 90% 18%,#dff,transparent),
    radial-gradient(1px 1px at 24% 70%,#fff,transparent),
    radial-gradient(1px 1px at 77% 78%,#cfe9ff,transparent);
  animation:twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.45}to{opacity:.8}}

.overlay-card{position:relative; z-index:2; text-align:center; padding:40px 28px; max-width:440px;
  animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
.overlay-logo{width:84px; height:84px; mix-blend-mode:screen;
  filter:drop-shadow(0 0 14px rgba(154,202,60,.65));
  animation:float 4s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.overlay-kicker{margin-top:14px; font-size:13px; letter-spacing:5px; text-transform:uppercase; color:var(--lime); font-weight:600}
.overlay-title{margin-top:6px; font-weight:700; font-size:46px; line-height:.98; letter-spacing:2px; color:var(--text)}
.overlay-title span{display:block; font-size:18px; letter-spacing:8px; color:var(--muted); font-weight:600; margin-top:6px}
.overlay-sub{margin-top:16px; color:#aebd97; font-size:15px; letter-spacing:.5px}
.overlay-note{margin-top:14px; font-family:var(--font-mono); font-size:11px; color:var(--muted)}

.btn{display:inline-flex; align-items:center; gap:9px; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:1.5px; text-transform:uppercase;
  padding:13px 26px; border-radius:10px; border:1px solid var(--glass-border); cursor:pointer;
  background:transparent; color:var(--text); transition:transform .15s, box-shadow .25s, background .25s, border-color .25s}
.btn:hover{transform:translateY(-1px)}
.btn-primary{margin-top:26px; display:flex; width:100%;
  background:linear-gradient(180deg, rgba(154,202,60,.22), rgba(154,202,60,.08));
  border-color:rgba(154,202,60,.55); color:var(--lime-bright);
  box-shadow:0 0 0 rgba(154,202,60,0)}
.btn-primary:hover{box-shadow:0 0 26px rgba(154,202,60,.35); background:linear-gradient(180deg, rgba(154,202,60,.32), rgba(154,202,60,.12))}
.btn-ghost{margin-top:12px; display:flex; width:100%; color:var(--muted); border-color:rgba(255,255,255,.08)}
.btn-ghost:hover{color:var(--text); border-color:var(--glass-border)}
.btn-dot{width:9px; height:9px; border-radius:50%; background:var(--lime-bright); box-shadow:0 0 10px var(--lime-bright)}

/* ===================== App layout ===================== */
.app{position:fixed; inset:0;
  display:grid; grid-template-columns:1fr var(--rail-w); grid-template-rows:var(--bar-h) 1fr;
  grid-template-areas:"bar bar" "view rail"}
.app.revealing .topbar{animation:fade .5s both}
.app.revealing .card{animation:rise .6s both}
.app.revealing .card:nth-child(2){animation-delay:.07s}
.app.revealing .card:nth-child(3){animation-delay:.14s}
.app.revealing .card:nth-child(4){animation-delay:.21s}

/* ===================== Top bar ===================== */
.topbar{grid-area:bar; display:flex; align-items:center; justify-content:space-between; padding:0 16px;
  background:linear-gradient(180deg, rgba(8,11,18,.92), rgba(8,11,18,.45));
  border-bottom:1px solid var(--glass-border); backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px); z-index:20}
.brand{display:flex; align-items:center; gap:11px}
.brand-logo{width:30px; height:30px; mix-blend-mode:screen; filter:drop-shadow(0 0 6px rgba(154,202,60,.5))}
.brand-text{font-weight:600; letter-spacing:3px; font-size:16px; color:#cde0ad}
.brand-text b{color:var(--text)}
.brand-sub{color:var(--lime); letter-spacing:4px}

/* Co-brand: Firefly/Blue Ghost is the theme, GeekendZone is the author. */
.brand-div{width:1px; height:22px; background:var(--glass-border); margin:0 3px}
.cobrand{display:flex; align-items:center; gap:7px; text-decoration:none; border-radius:7px;
  padding:3px 7px 3px 4px; transition:background .18s ease, box-shadow .18s ease}
.cobrand-mark{width:22px; height:22px; filter:drop-shadow(0 0 5px rgba(104,165,7,.55))}
.cobrand-text{font-family:var(--font-display); font-weight:600; font-size:14px;
  letter-spacing:1.6px; color:var(--text); white-space:nowrap}
.cobrand-text b{color:var(--gz-green); font-weight:700}
.cobrand:hover{background:rgba(104,165,7,.12); box-shadow:inset 0 0 0 1px rgba(104,165,7,.35)}
.cobrand:hover .cobrand-text b{color:var(--gz-green-bright)}
.cobrand:focus-visible{outline:2px solid var(--gz-green-bright); outline-offset:2px}

.status{display:flex; align-items:center; gap:9px}
.chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:11px;
  padding:5px 10px; border-radius:7px; background:var(--glass); border:1px solid rgba(255,255,255,.06); color:var(--text)}
.chip-k{color:var(--muted); letter-spacing:1px}
.chip-v{color:var(--lime)}
.chip-live .dot{width:8px; height:8px; border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime); animation:pulse 1.6s ease-in-out infinite}
.chip-live{border-color:rgba(154,202,60,.4)}
.chip-off .dot{background:var(--danger); box-shadow:0 0 8px var(--danger); animation:none}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.45; transform:scale(.8)}}

/* ===================== Viewport ===================== */
.viewport{grid-area:view; position:relative; overflow:hidden;
  border-right:1px solid var(--glass-border)}
.viewport canvas{display:block; position:absolute; inset:0}

.frame-bracket{position:absolute; width:34px; height:34px; border:2px solid rgba(154,202,60,.55);
  pointer-events:none; z-index:5}
.frame-bracket.tl{top:18px; left:18px; border-right:0; border-bottom:0}
.frame-bracket.tr{top:18px; right:18px; border-left:0; border-bottom:0}
.frame-bracket.bl{bottom:18px; left:18px; border-right:0; border-top:0}
.frame-bracket.br{bottom:18px; right:18px; border-left:0; border-top:0}

/* Credit sits over a live 3D render whose luminance swings from near-black sky
   to bright lunar regolith, so it needs its own backing to stay legible. */
.credit{position:absolute; right:62px; bottom:16px; z-index:6; display:inline-flex;
  align-items:center; gap:7px; padding:6px 11px 6px 8px; border-radius:999px;
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.4px;
  color:var(--text); text-decoration:none;
  background:var(--glass); border:1px solid var(--glass-border);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 4px 16px rgba(0,0,0,.4);
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease}
.credit-mark{width:16px; height:16px; filter:drop-shadow(0 0 4px rgba(104,165,7,.6))}
.credit b{color:var(--gz-green-bright); font-weight:700; letter-spacing:.6px}
.credit:hover{border-color:rgba(104,165,7,.55); transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(0,0,0,.5), 0 0 14px rgba(104,165,7,.25)}
.credit:hover b{text-decoration:underline; text-underline-offset:2px}
.credit:focus-visible{outline:2px solid var(--gz-green-bright); outline-offset:2px}

/* ===================== Attitude indicator (ADI) ===================== */
.adi-wrap{position:absolute; left:20px; bottom:20px; z-index:6; display:flex; align-items:flex-end; gap:12px}
.adi{position:relative; width:128px; height:128px; border-radius:50%; overflow:hidden;
  box-shadow:0 0 22px rgba(154,202,60,.22), 0 8px 24px rgba(0,0,0,.5)}
.adi-ball{position:absolute; top:50%; left:50%; width:260%; height:260%;
  transform:translate(-50%,-50%) rotate(var(--roll,0deg)) translateY(var(--pitch,0px)); transform-origin:center}
.adi-sky{position:absolute; top:0; left:0; right:0; height:50%; background:linear-gradient(180deg,#4d83bf,#9fc4e6)}
.adi-gnd{position:absolute; bottom:0; left:0; right:0; height:50%; background:linear-gradient(180deg,#7c5c2a,#3f2f15)}
.adi-line{position:absolute; top:50%; left:0; right:0; height:2px; background:#fff; transform:translateY(-1px); box-shadow:0 0 4px rgba(255,255,255,.5)}
.adi-ladder{position:absolute; top:50%; left:50%; width:42px; height:0; transform:translate(-50%,-50%);
  background:
    linear-gradient(#fff,#fff) center/100% 1px no-repeat;
  box-shadow:0 -28px 0 -13px rgba(255,255,255,.6),0 28px 0 -13px rgba(255,255,255,.6)}
.adi-mask{position:absolute; inset:0; border-radius:50%;
  box-shadow:inset 0 0 22px rgba(0,0,0,.55); pointer-events:none}
.adi-craft{position:absolute; top:50%; left:50%; width:54px; height:2px; transform:translate(-50%,-50%);
  background:var(--lime); box-shadow:0 0 6px var(--lime); border-radius:2px}
.adi-craft::before,.adi-craft::after{content:""; position:absolute; top:0; width:9px; height:2px; background:var(--lime); box-shadow:0 0 6px var(--lime)}
.adi-craft::before{left:-13px} .adi-craft::after{right:-13px; transform:rotate(0)}
.adi-bezel{position:absolute; inset:0; border-radius:50%; border:2px solid rgba(154,202,60,.6); pointer-events:none}
.adi-meta{font-family:var(--font-mono); font-size:11px; line-height:1.8; color:var(--lime)}
.adi-meta .k{color:var(--muted); margin-right:8px}
.adi-meta .v.ok{color:var(--lime-bright)}

/* ===================== Telemetry rail ===================== */
.rail{grid-area:rail; display:flex; flex-direction:column; gap:11px; padding:12px; overflow-y:auto}
.card{background:var(--glass); border:1px solid var(--glass-border); border-radius:12px; padding:12px 13px;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:var(--glass-glow)}
.card-title{font-size:11px; font-weight:600; letter-spacing:2.5px; text-transform:uppercase; color:var(--lime); margin-bottom:10px;
  display:flex; justify-content:space-between; align-items:center}
.card-title .unit{color:var(--muted); font-family:var(--font-mono); font-size:10px; letter-spacing:.5px}

.quat{display:grid; grid-template-columns:1fr 1fr; gap:7px}
.quat-cell{display:flex; justify-content:space-between; align-items:center; padding:6px 9px;
  background:rgba(0,0,0,.3); border-radius:7px; border:1px solid rgba(255,255,255,.04)}
.quat-cell .k{font-weight:700; color:var(--lime); font-size:13px}
.quat-cell .v{font-family:var(--font-mono); font-size:13px; color:var(--text)}

.rpy{display:flex; gap:8px}
.rpy-cell{flex:1; text-align:center; padding:8px 4px; background:rgba(0,0,0,.3); border-radius:8px; border:1px solid rgba(255,255,255,.04)}
.rpy-cell .k{display:block; font-size:9px; letter-spacing:1.5px; color:var(--muted); margin-bottom:3px}
.rpy-cell .v{font-family:var(--font-mono); font-size:16px; color:var(--lime-bright)}

.chart{width:100%; height:76px; display:block; background:rgba(0,0,0,.32); border-radius:8px}
.legend{display:flex; gap:14px; margin-top:7px; font-family:var(--font-mono); font-size:10px}
.legend span{display:flex; align-items:center; gap:5px; color:var(--muted)}
.legend span::before{content:""; width:9px; height:3px; border-radius:2px}
.legend .lx::before{background:var(--danger)} .legend .ly::before{background:var(--lime)} .legend .lz::before{background:var(--blue)}

/* ===================== Animations ===================== */
@keyframes rise{from{opacity:0; transform:translateY(16px)}to{opacity:1; transform:translateY(0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ===================== Low tier (perf) — drop expensive blur ===================== */
.tier-low .card,.tier-low .topbar{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(10,13,12,.86)}
/* No blur on low tier — fall back to a solid tint so the credit stays readable. */
.tier-low .credit{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(10,13,12,.88)}

/* ===================== Responsive (mobile) ===================== */
@media (max-width:820px){
  :root{--bar-h:50px}
  .app{grid-template-columns:1fr; grid-template-rows:var(--bar-h) 1fr auto;
    grid-template-areas:"bar" "view" "rail"}
  .viewport{border-right:0; border-bottom:1px solid var(--glass-border)}
  .rail{flex-direction:row; overflow-x:auto; overflow-y:hidden; padding:10px;
    scroll-snap-type:x mandatory}
  .rail .card{min-width:230px; flex:0 0 auto; scroll-snap-align:start}
  .brand-sub{display:none}
  .cobrand-text{display:none}
  .cobrand{padding:3px 4px}
  .adi{width:104px; height:104px}
  .status .chip:nth-child(4){display:none}
}
@media (max-width:520px){
  .overlay-title{font-size:36px}
  .status .chip-k{display:none}
  .brand-div,.cobrand{display:none}
  .credit{right:14px; bottom:12px; font-size:10.5px; padding:5px 9px 5px 7px}
}