:root {
    --midnight: #050505;
    --gold: #c5a059;
    --text-main: #e0e0e0;
    --text-dim: #888;
    --border: rgba(197, 160, 89, 0.25);
    --glass: rgba(5, 5, 5, 0.98);
    --header-height: 90px;
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body { 
    background: var(--midnight); 
    color: var(--text-main); 
    font-family: 'Inter', sans-serif; 
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* --- Fixed Header --- */
.estate-header {
    display: flex; 
    justify-content: space-between; /* Updated for logo/nav spacing */
    align-items: center;
    padding: 0 5%; 
    height: var(--header-height);
    background: var(--glass); 
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border); 
    position: fixed; top: 0; width: 100%; z-index: 9999;
}

/* Brand & Logo Logic */
.brand-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}

.brand-icon {
    height: 40px;
    width: auto;
}

.logo { font-size: 1.15rem; font-weight: 900; letter-spacing: -1px; text-decoration: none; color: #fff; line-height: 1; }
.logo span { color: var(--gold); }
.sub-brand { font-size: 0.5rem; letter-spacing: 2px; color: var(--text-dim); text-transform: uppercase; display: block; margin-top: 5px; }

/* --- Navigation & Robust Dropdown --- */
.header-nav { display: flex; align-items: center; gap: 35px; height: 100%; }
.nav-item { color: var(--text-main); font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; text-decoration: none; cursor: pointer; }

.dropdown { position: relative; height: 100%; display: flex; align-items: center; }
.dropdown-content {
    display: none; position: absolute; background: #0d0d0f;
    min-width: 240px; border: 1px solid var(--border); top: 100%; left: 0;
    box-shadow: 0 15px 40px rgba(0,0,0,0.8);
}

.dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content { display: block; }

.dropdown-content a {
    color: var(--text-main); padding: 18px 25px; text-decoration: none;
    display: flex; flex-direction: column; border-bottom: 1px solid #1a1a1c;
}
.dropdown-content a strong { font-size: 0.75rem; color: var(--gold); }
.dropdown-content a span { font-size: 0.55rem; color: var(--text-dim); text-transform: uppercase; margin-top: 4px; }

.contact-btn {
    text-decoration: none; color: var(--gold); border: 1px solid var(--gold);
    padding: 10px 22px; font-size: 0.7rem; font-weight: 800; letter-spacing: 1px; transition: 0.3s;
}
.contact-btn:hover { background: var(--gold); color: var(--midnight); }

/* --- Mobile Navigation & Branding Fix --- */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--gold);
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10001;
}

@media (max-width: 850px) {
    .mobile-toggle { display: block; }
    
    .estate-header { padding: 0 20px; }

    /* Keep sub-brand visible on mobile */
    .sub-brand { 
        display: block !important; 
        font-size: 0.45rem; 
        letter-spacing: 1px;
    }

    .brand-icon { height: 32px; }

    .header-nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 100%;
        height: 100vh;
        background: var(--glass);
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
        z-index: 9998;
        gap: 25px;
    }

    .header-nav.active { right: 0; }

    .nav-item { font-size: 1.4rem; width: 100%; text-align: center; }

    .dropdown { width: 100%; flex-direction: column; height: auto; }
    .dropdown-content {
        position: static;
        display: none;
        width: 100%;
        background: rgba(255, 255, 255, 0.03);
    }
    .dropdown.active .dropdown-content { display: flex; padding: 20px 0; }
}

/* --- Remaining Core Styles (Links, Footer, Changelog) --- */


/* --- Links Page Style --- */
.links-wrapper-full {
    min-height: 100vh;
    width: 100%;
    /* Architectural background with dark overlay for readability */
    background: linear-gradient(rgba(5,5,5,0.8), rgba(5,5,5,0.95)), url('https://cdn.losprado.net/LA-Skyline.jpg') center/cover no-repeat fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(var(--header-height) + 40px) 20px 80px;
}

.links-container { width: 100%; max-width: 500px; }

.links-section-title {
    font-size: 0.6rem; color: var(--gold); letter-spacing: 4px;
    text-transform: uppercase; margin: 40px 0 15px 5px;
    font-weight: 800;
}

.link-card {
    display: flex; align-items: center; gap: 20px;
    padding: 20px 25px; background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border); text-decoration: none; color: var(--text-main);
    margin-bottom: 10px; transition: 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}

.link-card:hover {
    border-color: var(--gold); transform: translateX(5px);
    background: rgba(197, 160, 89, 0.08);
}

.link-card i { color: var(--gold); font-size: 1.1rem; width: 25px; text-align: center; }
.link-text strong { display: block; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; }
.link-text span { font-size: 0.6rem; color: var(--text-dim); text-transform: uppercase; }


.estate-footer {
    padding: 60px 5%; text-align: center;
    background: var(--midnight); border-top: 1px solid var(--border); margin-top: auto;
}
.estate-footer p { font-size: 0.6rem; letter-spacing: 2px; color: #444; }

/* --- Global Footer --- */
.estate-footer {
    padding: 60px 5%; text-align: center;
    background: var(--midnight); border-top: 1px solid var(--border); margin-top: auto;
}
.footer-links { margin-bottom: 20px; }
.footer-links a { color: var(--gold); text-decoration: none; font-size: 0.7rem; font-weight: 800; margin: 0 15px; }
.estate-footer p { font-size: 0.6rem; letter-spacing: 2px; color: #444; }

@media (max-width: 768px) {
    .sub-brand { display: none; }
    .header-nav { gap: 15px; }
    .dropdown-content { left: auto; right: 0; }
}


/* --- Changelog & Timeline --- */
:root {
    --timeline-line: rgba(197, 160, 89, 0.2);
    --tag-new: #00ff88;
    --tag-update: #00ccff;
    --tag-patch: #ffcc00;
    --tag-sys: #ae81ff;
}

.changelog-wrapper {
    padding: calc(var(--header-height) + 60px) 5% 100px;
    max-width: 900px;
    margin: 0 auto;
    position: relative;
}

.changelog-wrapper::before {
    content: '';
    position: absolute;
    left: 5.5%;
    top: calc(var(--header-height) + 100px);
    bottom: 100px;
    width: 1px;
    background: var(--timeline-line);
}

.timeline-section {
    position: relative;
    margin-bottom: 80px;
    padding-left: 60px;
}

.timeline-dot {
    position: absolute;
    left: -4px;
    top: 5px;
    width: 9px;
    height: 9px;
    background: var(--gold);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--gold);
    z-index: 2;
}

.pending .timeline-dot { background: #444; box-shadow: none; }

.date-label {
    font-size: 0.65rem;
    font-weight: 900;
    color: var(--gold);
    letter-spacing: 2px;
    margin-bottom: 15px;
    display: block;
    text-transform: uppercase;
}

.pending .date-label { color: var(--text-dim); }

.update-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    padding: 30px;
    backdrop-filter: blur(10px);
}

.pending .update-card {
    opacity: 0.5;
    border-color: rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.01);
}

.update-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding-bottom: 10px;
}

.update-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: #fff;
}

.version-tag {
    background: var(--gold);
    color: var(--midnight);
    font-size: 0.6rem;
    font-weight: 900;
    padding: 2px 8px;
    border-radius: 2px;
}

.type-tag {
    font-size: 0.5rem;
    font-weight: 900;
    padding: 1px 6px;
    border: 1px solid transparent;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-right: 10px;
    display: inline-block;
    min-width: 65px;
    text-align: center;
}

.tag-new { color: var(--tag-new); border-color: rgba(0, 255, 136, 0.2); }
.tag-update { color: var(--tag-update); border-color: rgba(0, 204, 255, 0.2); }
.tag-patch { color: var(--tag-patch); border-color: rgba(255, 204, 0, 0.2); }
.tag-sys { color: var(--tag-sys); border-color: rgba(174, 129, 255, 0.2); }

.update-content { list-style: none; }

.update-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 12px;
    font-size: 0.8rem;
    line-height: 1.6;
    color: var(--text-main);
}

.update-item i {
    color: var(--gold);
    font-size: 0.6rem;
    margin: 5px 12px 0 0;
}

@media (max-width: 600px) {
    .changelog-wrapper::before { left: 20px; }
    .timeline-section { padding-left: 40px; }
    .update-header { flex-direction: column; align-items: flex-start; gap: 10px; }
}