/* ══════════════════════════════════════════════════════════════
   AEROFIELD — VENUS OBSERVATORY · CSS
   Golden-amber Venus theme · Sulfuric clouds · Hellish glow
   ══════════════════════════════════════════════════════════════ */

/* ── Reset & Base ──────────────────────────────────────────── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{
    width:100%;height:100%;overflow:hidden;
    background:#0a0a0f;color:#e0d8c8;
    font-family:'Inter',sans-serif;font-size:13px;
    -webkit-font-smoothing:antialiased;
}

/* ── Background Layers ─────────────────────────────────────── */
.venus-bg-grid{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background-image:
        linear-gradient(rgba(232,192,96,0.03) 1px,transparent 1px),
        linear-gradient(90deg,rgba(232,192,96,0.03) 1px,transparent 1px);
    background-size:60px 60px;
}
.venus-bg-radial{
    position:fixed;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(ellipse at 50% 50%,rgba(232,192,96,0.04) 0%,transparent 70%);
}

/* ── Navbar ────────────────────────────────────────────────── */
.venus-navbar{
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;gap:12px;
    padding:8px 16px;
    background:linear-gradient(180deg,rgba(10,10,15,0.92) 0%,rgba(10,10,15,0.7) 100%);
    border-bottom:1px solid rgba(232,192,96,0.12);
    backdrop-filter:blur(10px);
}
.venus-navbar-logo{
    font-family:'Cinzel',serif;font-weight:700;font-size:15px;
    letter-spacing:4px;
    background:linear-gradient(135deg,#e8c060,#ffdd88);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    margin-right:auto;
}
.venus-navbar-controls{display:flex;gap:4px;}
.venus-navbar-actions{display:flex;gap:4px;margin-left:8px;}
.vnb-btn{
    padding:5px 10px;border:1px solid rgba(232,192,96,0.2);border-radius:3px;
    background:rgba(232,192,96,0.05);color:rgba(224,216,200,0.6);
    font-family:'Rajdhani',sans-serif;font-size:11px;font-weight:600;
    letter-spacing:1px;text-transform:uppercase;cursor:pointer;
    transition:all .25s ease;
}
.vnb-btn:hover{background:rgba(232,192,96,0.12);color:#e0d8c8;border-color:rgba(232,192,96,0.35);}
.vnb-btn.active{background:rgba(232,192,96,0.18);color:#e8c060;border-color:#e8c060;box-shadow:0 0 8px rgba(232,192,96,0.15);}
.vnb-btn--reset{border-color:rgba(255,153,51,0.25);color:rgba(255,153,51,0.6);}
.vnb-btn--reset:hover{color:#ff9933;border-color:#ff9933;}
.vnb-btn--home{text-decoration:none;}

/* ── 3D Viewport ───────────────────────────────────────────── */
.venus-viewport{
    position:fixed;inset:0;z-index:1;
    background:radial-gradient(ellipse at center,#0c0a08 0%,#050408 100%);
}
.venus-viewport canvas{display:block;width:100%;height:100%;}

/* ── Corner Frames ─────────────────────────────────────────── */
.venus-corner{position:fixed;width:28px;height:28px;z-index:90;pointer-events:none;}
.venus-corner--tl{top:48px;left:10px;border-top:1px solid rgba(232,192,96,0.25);border-left:1px solid rgba(232,192,96,0.25);}
.venus-corner--tr{top:48px;right:10px;border-top:1px solid rgba(232,192,96,0.25);border-right:1px solid rgba(232,192,96,0.25);}
.venus-corner--bl{bottom:36px;left:10px;border-bottom:1px solid rgba(232,192,96,0.25);border-left:1px solid rgba(232,192,96,0.25);}
.venus-corner--br{bottom:36px;right:10px;border-bottom:1px solid rgba(232,192,96,0.25);border-right:1px solid rgba(232,192,96,0.25);}

/* ── Atmosphere Legend (Left Sidebar) ──────────────────────── */
.venus-atmos-legend{
    position:fixed;top:56px;left:14px;z-index:80;
    width:200px;max-height:calc(100vh - 120px);overflow-y:auto;
    background:rgba(10,10,15,0.85);border:1px solid rgba(232,192,96,0.1);
    border-radius:4px;padding:10px;
    opacity:0;transform:translateX(-20px);pointer-events:none;
    transition:all .4s ease;
    scrollbar-width:thin;scrollbar-color:rgba(232,192,96,0.2) transparent;
}
.venus-atmos-legend.visible{opacity:1;transform:translateX(0);pointer-events:auto;}
.val-title{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;color:#e8c060;margin-bottom:2px;}
.val-subtitle{font-size:9px;color:rgba(232,192,96,0.4);margin-bottom:8px;letter-spacing:1px;}
.val-layer{display:flex;align-items:flex-start;gap:6px;margin-bottom:6px;}
.val-layer-color{width:8px;height:8px;border-radius:50%;margin-top:3px;flex-shrink:0;}
.val-layer-name{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:11px;color:#e0d8c8;}
.val-layer-range{font-size:9px;color:rgba(224,216,200,0.45);line-height:1.3;}
.val-comp{margin-top:8px;padding-top:6px;border-top:1px solid rgba(232,192,96,0.08);}
.val-comp-title{font-family:'Rajdhani',sans-serif;font-size:9px;letter-spacing:1.5px;color:rgba(232,192,96,0.5);margin-bottom:4px;}
.val-comp-item{display:flex;justify-content:space-between;font-size:10px;color:rgba(224,216,200,0.55);padding:1px 0;}
.val-comp-item span:last-child{color:rgba(232,192,96,0.6);font-family:'Rajdhani',sans-serif;}
.val-features-title{font-family:'Rajdhani',sans-serif;font-size:9px;letter-spacing:1.5px;color:rgba(232,192,96,0.5);margin:8px 0 4px;padding-top:6px;border-top:1px solid rgba(232,192,96,0.08);}
.val-feature{margin-bottom:5px;}
.val-feature-name{font-family:'Rajdhani',sans-serif;font-weight:600;font-size:10px;color:#e8c060;}
.val-feature-desc{font-size:9px;color:rgba(224,216,200,0.4);line-height:1.3;}

/* ── Right Sidebar — Venus Facts ───────────────────────────── */
.venus-fact-legend{
    position:fixed;top:56px;right:14px;z-index:80;
    width:200px;max-height:calc(100vh - 120px);overflow-y:auto;
    background:rgba(10,10,15,0.85);border:1px solid rgba(232,192,96,0.1);
    border-radius:4px;padding:10px;
    opacity:0;transform:translateX(20px);pointer-events:none;
    transition:all .4s ease;
    scrollbar-width:thin;scrollbar-color:rgba(232,192,96,0.2) transparent;
}
.venus-fact-legend.visible{opacity:1;transform:translateX(0);pointer-events:auto;}
.vfl-title{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;color:#e8c060;margin-bottom:2px;}
.vfl-subtitle{font-size:9px;color:rgba(232,192,96,0.4);margin-bottom:8px;letter-spacing:1px;}
.vfl-card{margin-bottom:8px;padding:6px 8px;background:rgba(232,192,96,0.04);border:1px solid rgba(232,192,96,0.06);border-radius:3px;}
.vfl-card-header{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:10px;letter-spacing:1px;color:#e8c060;margin-bottom:3px;}
.vfl-card-body{font-size:9px;color:rgba(224,216,200,0.5);line-height:1.4;}

/* ── Structure Panel ───────────────────────────────────────── */
.venus-structure-panel{
    position:fixed;top:56px;left:50%;z-index:85;
    transform:translateX(-50%) translateY(-20px);
    width:340px;max-height:70vh;overflow-y:auto;
    background:rgba(10,10,15,0.92);border:1px solid rgba(232,192,96,0.15);
    border-radius:5px;padding:14px;
    opacity:0;pointer-events:none;transition:all .4s ease;
    scrollbar-width:thin;scrollbar-color:rgba(232,192,96,0.2) transparent;
}
.venus-structure-panel.visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto;}
.vsp-close{position:absolute;top:8px;right:10px;background:none;border:none;color:rgba(232,192,96,0.5);font-size:14px;cursor:pointer;}
.vsp-close:hover{color:#e8c060;}
.vsp-title{font-family:'Cinzel',serif;font-size:12px;letter-spacing:2px;color:#e8c060;margin-bottom:10px;}
.vsp-layer{margin-bottom:8px;font-size:10px;line-height:1.5;color:rgba(224,216,200,0.55);}
.vsp-layer strong{color:#e0d8c8;font-family:'Rajdhani',sans-serif;font-size:12px;}
.vsp-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px;vertical-align:middle;}

/* ── Geology Panel ─────────────────────────────────────────── */
.venus-geology-panel{
    position:fixed;top:56px;right:14px;z-index:85;
    width:320px;max-height:calc(100vh - 100px);overflow-y:auto;
    background:rgba(10,10,15,0.92);border:1px solid rgba(232,192,96,0.12);
    border-radius:5px;padding:14px;
    opacity:0;transform:translateX(20px);pointer-events:none;transition:all .4s ease;
    scrollbar-width:thin;scrollbar-color:rgba(232,192,96,0.2) transparent;
}
.venus-geology-panel.visible{opacity:1;transform:translateX(0);pointer-events:auto;}
.vgp-close{position:absolute;top:8px;right:10px;background:none;border:none;color:rgba(232,192,96,0.5);font-size:14px;cursor:pointer;}
.vgp-close:hover{color:#e8c060;}
.vgp-title{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;color:#e8c060;margin-bottom:10px;}
.vgp-body{}
.vgp-feature{margin-bottom:8px;padding-left:8px;border-left:2px solid rgba(232,192,96,0.2);}
.vgp-feature-name{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:11px;color:#e8c060;}
.vgp-feature-desc{font-size:9px;color:rgba(224,216,200,0.5);line-height:1.4;}

/* ── Mythology Panel ───────────────────────────────────────── */
.venus-mythology-panel{
    position:fixed;top:56px;left:14px;z-index:85;
    width:320px;max-height:calc(100vh - 100px);overflow-y:auto;
    background:rgba(10,10,15,0.92);border:1px solid rgba(232,192,96,0.12);
    border-radius:5px;padding:14px;
    opacity:0;transform:translateX(-20px);pointer-events:none;transition:all .4s ease;
    scrollbar-width:thin;scrollbar-color:rgba(232,192,96,0.2) transparent;
}
.venus-mythology-panel.visible{opacity:1;transform:translateX(0);pointer-events:auto;}
.vmp-close{position:absolute;top:8px;right:10px;background:none;border:none;color:rgba(232,192,96,0.5);font-size:14px;cursor:pointer;}
.vmp-close:hover{color:#e8c060;}
.vmp-title{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2px;color:#e8c060;margin-bottom:10px;}
.vmp-body{}
.vmp-section{margin-bottom:8px;padding-left:8px;border-left:2px solid rgba(232,192,96,0.15);}
.vmp-section-title{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:11px;color:#ffdd88;margin-bottom:2px;}
.vmp-section-body{font-size:9px;color:rgba(224,216,200,0.5);line-height:1.4;}
.vmp-jyotish{margin-bottom:10px;padding:8px;background:rgba(232,192,96,0.04);border:1px solid rgba(232,192,96,0.08);border-radius:4px;}
.vmp-jyotish-title{font-family:'Rajdhani',sans-serif;font-size:10px;font-weight:700;color:#e8c060;letter-spacing:1.5px;margin-bottom:6px;}
.vmp-jyotish-grid{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;}
.vmp-jyotish-item{display:flex;justify-content:space-between;font-size:9px;}
.vmp-jyotish-label{color:rgba(224,216,200,0.4);}
.vmp-jyotish-value{color:rgba(232,192,96,0.7);font-family:'Rajdhani',sans-serif;text-align:right;}

/* ── Telemetry HUD ─────────────────────────────────────────── */
.venus-telemetry{
    position:fixed;bottom:42px;left:14px;z-index:80;
    display:flex;flex-direction:column;gap:2px;
}
.vt-row{display:flex;gap:6px;font-family:'Rajdhani',sans-serif;font-size:10px;}
.vt-label{color:rgba(232,192,96,0.35);letter-spacing:1px;min-width:36px;}
.vt-value{color:rgba(232,192,96,0.6);}

/* ── Stats Bar ─────────────────────────────────────────────── */
.venus-stats-bar{
    position:fixed;bottom:0;left:0;right:0;z-index:90;
    display:flex;justify-content:center;gap:24px;
    padding:6px 16px;
    background:linear-gradient(0deg,rgba(10,10,15,0.9) 0%,rgba(10,10,15,0.6) 100%);
    border-top:1px solid rgba(232,192,96,0.08);
}
.vsb-item{text-align:center;}
.vsb-val{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:13px;color:#e8c060;display:block;line-height:1;}
.vsb-label{font-size:8px;color:rgba(224,216,200,0.35);letter-spacing:1px;text-transform:uppercase;}

/* ── HUD ───────────────────────────────────────────────────── */
.venus-hud{
    position:fixed;bottom:42px;right:14px;z-index:80;
    font-family:'Rajdhani',sans-serif;font-size:10px;
    color:rgba(232,192,96,0.4);letter-spacing:1px;
}

/* ── Footer Strip ──────────────────────────────────────────── */
.venus-footer-strip{
    position:fixed;bottom:26px;left:0;right:0;z-index:85;
    height:14px;overflow:hidden;
    border-top:1px solid rgba(232,192,96,0.06);
    background:rgba(10,10,15,0.5);
}
.venus-footer-marquee{
    display:flex;gap:40px;white-space:nowrap;
    font-family:'Noto Sans Devanagari','Inter',sans-serif;
    font-size:10px;color:rgba(232,192,96,0.3);
    animation:venusMarquee 50s linear infinite;
}
.venus-footer-marquee span{flex-shrink:0;}

/* ── Loading Overlay ───────────────────────────────────────── */
.venus-loading{
    position:fixed;inset:0;z-index:999;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    background:radial-gradient(ellipse at center,#0e0c08 0%,#050408 100%);
    transition:opacity .8s ease;
}
.venus-loading.hidden{opacity:0;pointer-events:none;}
.venus-load-ring{
    position:absolute;width:120px;height:120px;
    border:1px solid rgba(232,192,96,0.15);border-top-color:#e8c060;
    border-radius:50%;
    animation:venusLoadSpin 2s linear infinite;
}
.venus-load-ring--2{
    width:90px;height:90px;
    border-color:rgba(255,153,51,0.1);border-top-color:#ff9933;
    animation-duration:3s;animation-direction:reverse;
}
.venus-load-globe{
    width:40px;height:40px;border-radius:50%;
    background:radial-gradient(circle at 35% 35%,#ffdd88,#e8c060 50%,#996622 100%);
    box-shadow:0 0 30px rgba(232,192,96,0.3),inset -5px -5px 15px rgba(0,0,0,0.4);
}
.venus-load-text{
    margin-top:24px;font-family:'Cinzel',serif;font-size:14px;
    letter-spacing:6px;color:rgba(232,192,96,0.6);
}
.venus-load-bar{
    margin-top:12px;width:160px;height:2px;
    background:rgba(232,192,96,0.1);border-radius:1px;overflow:hidden;
}
.venus-load-bar-fill{
    height:100%;width:0;background:linear-gradient(90deg,#e8c060,#ff9933);
    border-radius:1px;animation:venusLoadBar 2s ease-out forwards;
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes venusPulse{
    0%,100%{opacity:0.4}50%{opacity:0.8}
}
@keyframes venusMarquee{
    0%{transform:translateX(0)}100%{transform:translateX(-50%)}
}
@keyframes venusLoadSpin{
    0%{transform:rotate(0)}100%{transform:rotate(360deg)}
}
@keyframes venusLoadBar{
    0%{width:0}100%{width:100%}
}
@keyframes venusHeatPulse{
    0%,100%{box-shadow:0 0 20px rgba(232,192,96,0.1)}
    50%{box-shadow:0 0 40px rgba(232,192,96,0.25)}
}

/* ── Responsive ────────────────────────────────────────────── */
@media(max-width:1200px){
    .venus-atmos-legend,.venus-fact-legend{width:170px;}
    .venus-geology-panel,.venus-mythology-panel{width:280px;}
}
@media(max-width:900px){
    .venus-atmos-legend,.venus-fact-legend{display:none;}
    .venus-stats-bar{gap:12px;}
    .vnb-btn{padding:4px 6px;font-size:9px;}
    .venus-geology-panel,.venus-mythology-panel,.venus-structure-panel{width:90vw;left:5vw;right:5vw;transform:none;}
    .venus-structure-panel{left:5vw;transform:translateY(-20px);}
    .venus-structure-panel.visible{transform:translateY(0);}
}