/* ══════════════════════════════════════════════════════════════
   AEROFIELD — JUPITER OBSERVATORY · CSS
   Warm amber · Rust orange · Gas giant aesthetic
   ══════════════════════════════════════════════════════════════ */

/* ── PAGE ───────────────────────────────────────────────────── */
.jupiter-page{margin:0;padding:0;overflow:hidden;background:#0a0806;color:#e0d8c8;font-family:'Inter',sans-serif;height:100vh;width:100vw;cursor:crosshair}

/* ── LOADING ────────────────────────────────────────────────── */
.jupiter-loading{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:#0a0806;transition:opacity .8s}
.jupiter-loading.hidden{opacity:0;pointer-events:none}
.jupiter-loading-content{text-align:center}
.jupiter-loading-ring{width:64px;height:64px;margin:0 auto 18px;border:3px solid rgba(212,160,64,.15);border-top-color:#d4a040;border-radius:50%;animation:jupiterLoadSpin 1s linear infinite}
.jupiter-loading-text{display:block;font-family:'Rajdhani',sans-serif;font-size:13px;letter-spacing:4px;color:#d4a040}
.jupiter-loading-bar{width:160px;height:2px;margin:14px auto 0;background:rgba(212,160,64,.1);border-radius:1px;overflow:hidden}
.jupiter-loading-bar-fill{width:100%;height:100%;background:#d4a040;animation:jupiterLoadBar 2s ease-in-out}

@keyframes jupiterLoadSpin{to{transform:rotate(360deg)}}
@keyframes jupiterLoadBar{from{transform:translateX(-100%)}to{transform:translateX(0)}}

/* ── VIEWPORT ───────────────────────────────────────────────── */
.jupiter-viewport{position:fixed;inset:0;z-index:0}

/* ── NAVBAR ──────────────────────────────────────────────────── */
.jupiter-navbar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;gap:10px;padding:10px 18px;background:linear-gradient(180deg,rgba(10,8,6,.92),rgba(10,8,6,.4));backdrop-filter:blur(8px);border-bottom:1px solid rgba(212,160,64,.12)}
.jupiter-navbar-brand{display:flex;align-items:center;gap:8px;font-family:'Cinzel',serif;font-size:14px;color:#d4a040;text-decoration:none;letter-spacing:2px;white-space:nowrap}
.jnb-glyph{font-size:18px;color:#ffcc44}
.jupiter-navbar-toggles{display:flex;gap:4px;margin-left:auto}
.jnb-btn{background:rgba(212,160,64,.06);border:1px solid rgba(212,160,64,.15);color:rgba(212,160,64,.55);font-family:'Rajdhani',sans-serif;font-size:11px;letter-spacing:1.5px;padding:5px 12px;border-radius:2px;cursor:pointer;transition:all .25s;text-transform:uppercase}
.jnb-btn:hover{background:rgba(212,160,64,.12);color:#d4a040}
.jnb-btn.active{background:rgba(212,160,64,.18);color:#ffcc44;border-color:rgba(212,160,64,.4);box-shadow:0 0 8px rgba(212,160,64,.15)}
.jnb-btn--reset{margin-left:8px;font-size:14px;padding:4px 10px}

/* ── LEFT SIDEBAR — Atmosphere ──────────────────────────────── */
.jupiter-sidebar{position:fixed;top:56px;z-index:80;width:240px;max-height:calc(100vh - 100px);overflow-y:auto;padding:14px;background:rgba(10,8,6,.88);backdrop-filter:blur(10px);border:1px solid rgba(212,160,64,.1);border-radius:3px;opacity:0;pointer-events:none;transform:translateX(-12px);transition:all .35s}
.jupiter-sidebar--left{left:12px}
.jupiter-sidebar--right{right:12px;transform:translateX(12px)}
.jupiter-sidebar.visible{opacity:1;pointer-events:auto;transform:translateX(0)}

.jal-title,.jml-title{font-family:'Rajdhani',sans-serif;font-size:11px;letter-spacing:3px;color:rgba(212,160,64,.5);margin:0 0 12px;padding-bottom:6px;border-bottom:1px solid rgba(212,160,64,.1)}

.jal-layer{font-size:11px;line-height:1.5;margin-bottom:8px;padding-left:18px;position:relative;color:rgba(224,216,200,.6)}
.jal-swatch{position:absolute;left:0;top:3px;width:10px;height:10px;border-radius:2px}
.jal-layer small{color:rgba(212,160,64,.35);font-size:9px}

.jal-table{width:100%;border-collapse:collapse;margin:12px 0;font-size:10px}
.jal-table caption{font-family:'Rajdhani',sans-serif;font-size:10px;letter-spacing:2px;color:rgba(212,160,64,.4);text-align:left;margin-bottom:4px}
.jal-table td{padding:3px 4px;border-bottom:1px solid rgba(212,160,64,.06);color:rgba(224,216,200,.5)}
.jal-table td:last-child{text-align:right;color:rgba(212,160,64,.6);font-family:'Rajdhani',sans-serif}

.jal-feature{margin-top:10px;padding:8px;background:rgba(212,160,64,.04);border-left:2px solid rgba(212,160,64,.15);border-radius:2px}
.jal-feature-title{font-family:'Rajdhani',sans-serif;font-size:10px;letter-spacing:2px;color:rgba(212,160,64,.5);margin-bottom:4px}
.jal-feature-desc{font-size:10px;line-height:1.5;color:rgba(224,216,200,.45)}

/* ── RIGHT SIDEBAR — Moon Cards ─────────────────────────────── */
.jml-card{margin-bottom:10px;padding:10px;background:rgba(212,160,64,.04);border:1px solid rgba(212,160,64,.08);border-radius:3px;transition:border-color .25s}
.jml-card:hover{border-color:rgba(212,160,64,.2)}
.jml-card-name{font-family:'Cinzel',serif;font-size:13px;color:#d4a040;margin-bottom:4px}
.jml-card-stats{font-family:'Rajdhani',sans-serif;font-size:10px;color:rgba(212,160,64,.4);margin-bottom:6px;letter-spacing:1px}
.jml-card-desc{font-size:10px;line-height:1.5;color:rgba(224,216,200,.45)}

/* ── PANELS ──────────────────────────────────────────────────── */
.jupiter-panel{position:fixed;z-index:90;background:rgba(10,8,6,.92);backdrop-filter:blur(12px);border:1px solid rgba(212,160,64,.1);border-radius:3px;opacity:0;pointer-events:none;transition:all .35s;overflow:hidden}
.jupiter-panel.visible{opacity:1;pointer-events:auto}

/* Structure Panel */
.jsp-struct{top:56px;left:50%;transform:translateX(-50%) translateY(-8px);width:380px;max-height:70vh;overflow-y:auto}
.jsp-struct.visible{transform:translateX(-50%) translateY(0)}
.jsp-header,.jgp-header,.jmp-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(212,160,64,.1)}
.jsp-header h3,.jgp-header h3,.jmp-header h3{font-family:'Cinzel',serif;font-size:13px;color:#d4a040;margin:0;letter-spacing:2px}
.jsp-close{background:none;border:none;color:rgba(212,160,64,.4);font-size:16px;cursor:pointer;padding:4px 8px}
.jsp-close:hover{color:#d4a040}
.jsp-body{padding:14px 16px}
.jsp-layer{margin-bottom:10px;font-size:11px;line-height:1.5;color:rgba(224,216,200,.55);padding-left:16px;position:relative}
.jsp-dot{position:absolute;left:0;top:4px;width:8px;height:8px;border-radius:50%}

/* Geology Panel */
.jgp-panel{top:56px;right:12px;bottom:60px;width:360px;overflow-y:auto;transform:translateX(8px)}
.jgp-panel.visible{transform:translateX(0)}
.jgp-body{padding:12px 14px}
.jgp-feature{margin-bottom:10px;padding:8px 10px;border-left:2px solid rgba(212,160,64,.2);background:rgba(212,160,64,.03);border-radius:2px}
.jgp-feature-name{font-family:'Rajdhani',sans-serif;font-size:11px;letter-spacing:1.5px;color:#d4a040;margin-bottom:4px}
.jgp-feature-desc{font-size:10px;line-height:1.5;color:rgba(224,216,200,.45)}

/* Mythology Panel */
.jmp-panel{top:56px;left:12px;bottom:60px;width:360px;overflow-y:auto;transform:translateX(-8px)}
.jmp-panel.visible{transform:translateX(0)}
.jmp-body{padding:12px 14px}
.jmp-section{margin-bottom:12px;padding:8px 10px;background:rgba(212,160,64,.03);border-radius:3px}
.jmp-section-title{font-family:'Cinzel',serif;font-size:12px;color:#d4a040;margin-bottom:6px;letter-spacing:1px}
.jmp-section-body{font-size:10px;line-height:1.6;color:rgba(224,216,200,.5)}

.jmp-jyotish{margin-bottom:14px;padding:10px;background:rgba(212,160,64,.06);border:1px solid rgba(212,160,64,.12);border-radius:3px}
.jmp-jyotish-title{font-family:'Rajdhani',sans-serif;font-size:11px;letter-spacing:3px;color:#d4a040;text-align:center;margin-bottom:8px}
.jmp-jyotish-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px}
.jmp-jyotish-item{display:flex;justify-content:space-between;font-size:10px;padding:2px 0;border-bottom:1px solid rgba(212,160,64,.06)}
.jmp-jyotish-label{color:rgba(212,160,64,.4)}
.jmp-jyotish-value{color:rgba(224,216,200,.6);text-align:right}

/* ── TELEMETRY HUD ───────────────────────────────────────────── */
.jupiter-telemetry{position:fixed;bottom:50px;left:14px;z-index:70;font-family:'Rajdhani',sans-serif;font-size:10px;letter-spacing:1.5px}
.jt-row{display:flex;gap:8px;margin-bottom:2px}
.jt-label{color:rgba(212,160,64,.3);min-width:42px}
.jt-value{color:rgba(212,160,64,.55)}

/* ── STATS BAR ───────────────────────────────────────────────── */
.jupiter-statsbar{position:fixed;bottom:0;left:0;right:0;z-index:80;display:flex;align-items:center;gap:16px;padding:6px 18px;background:rgba(10,8,6,.9);border-top:1px solid rgba(212,160,64,.1);font-family:'Rajdhani',sans-serif;font-size:10px;letter-spacing:1.5px}
.jsb-item{display:flex;flex-direction:column;gap:1px}
.jsb-label{color:rgba(212,160,64,.3);font-size:8px;letter-spacing:2px}
.jsb-value{color:rgba(212,160,64,.6)}
.jsb-marquee{flex:1;overflow:hidden;position:relative;height:16px;margin-left:12px}
.jsb-marquee-text{position:absolute;white-space:nowrap;color:rgba(212,160,64,.3);font-size:10px;animation:jupiterMarquee 40s linear infinite}
@keyframes jupiterMarquee{from{transform:translateX(100%)}to{transform:translateX(-100%)}}

/* ── SANSKRIT FOOTER ─────────────────────────────────────────── */
.jupiter-sanskrit-footer{position:fixed;bottom:28px;right:14px;z-index:70;text-align:right}
.jsf-mantra{display:block;font-family:'Noto Sans Devanagari',sans-serif;font-size:11px;color:rgba(212,160,64,.25);letter-spacing:1px}
.jsf-deity{display:block;font-family:'Rajdhani',sans-serif;font-size:9px;color:rgba(212,160,64,.15);letter-spacing:2px;margin-top:2px}

/* ── ANIMATIONS ──────────────────────────────────────────────── */
@keyframes jupiterPulse{0%,100%{box-shadow:0 0 12px rgba(212,160,64,.1)}50%{box-shadow:0 0 20px rgba(212,160,64,.2)}}

/* ── SCROLLBAR ───────────────────────────────────────────────── */
.jupiter-sidebar::-webkit-scrollbar,.jupiter-panel::-webkit-scrollbar{width:3px}
.jupiter-sidebar::-webkit-scrollbar-track,.jupiter-panel::-webkit-scrollbar-track{background:transparent}
.jupiter-sidebar::-webkit-scrollbar-thumb,.jupiter-panel::-webkit-scrollbar-thumb{background:rgba(212,160,64,.15);border-radius:2px}

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media(max-width:1200px){
    .jupiter-sidebar{width:210px;padding:10px}
    .jgp-panel,.jmp-panel{width:300px}
}
@media(max-width:900px){
    .jupiter-sidebar{width:180px;font-size:10px}
    .jgp-panel,.jmp-panel{width:260px}
    .jupiter-navbar-toggles{gap:2px}
    .jnb-btn{padding:4px 8px;font-size:10px}
}