/* 🏛️ ATLAS-CIV-CLICKER | VIEW: BRANDING & HUD (v7.9.12) */
/* @ui-render @branding @hud @mobile-nav @v3.8-premium */

.branding-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 2rem;
}

/* .logo-text Stile konsolidiert in branding.css (v7.9.15) */

.logo-subtitle {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--text-secondary);
    opacity: 0.6;
}

/* Mobile Navigation (v1.8.0) */
.mobile-nav-container {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(15px);
    border-top: 1px solid rgba(255,255,255,0.08);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    padding: 8px 0;
    z-index: 9998;
}

.nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.nav-btn.active {
    color: var(--color-gold);
}

.nav-btn .material-symbols-outlined {
    font-size: 1.5rem;
}

/* Mobile Branding Fixes */
@media (max-width: 768px) {
    .branding-area {
        margin-top: 5px !important;
        margin-bottom: 1.5rem !important;
        padding-top: 5px !important;
    }
    .logo-text { font-size: 1.4rem !important; }
    .logo-subtitle { font-size: 0.7rem !important; }
}