/* ═══════════════════════════════════════ */
/* 🧭 RPG HUD 导航栏 — navbar.css        */
/* ═══════════════════════════════════════ */

.map-header {
    position: sticky; top: 0; z-index: 100;
    width: 100%;
}

/* ─── 单层 HUD 面板 ─── */
.navbar-hud {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 24px; overflow: hidden;
    background: linear-gradient(180deg, rgba(22,25,41,0.97) 0%, rgba(12,14,26,0.95) 100%);
    backdrop-filter: blur(16px);
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg, 
        transparent 0%, 
        rgba(251,191,36,0.4) 20%, 
        rgba(34,211,238,0.4) 50%, 
        rgba(139,92,246,0.4) 80%, 
        transparent 100%
    ) 1;
    box-shadow: 
        0 4px 20px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ─── 左侧：品牌 + 进度 ─── */
.hud-left {
    display: flex; align-items: center; gap: 16px;
}
.hud-brand {
    display: flex; align-items: center; gap: 10px;
}
.home-link {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px; font-size: 1rem;
    transition: all 0.2s; text-decoration: none;
}
.home-link:hover { 
    border-color: var(--gold); background: var(--gold-dim); 
    transform: scale(1.08); 
    box-shadow: 0 0 12px rgba(251,191,36,0.2);
}
.brand-icon { font-size: 1.2rem; }
.brand-name { 
    font-size: 1.15rem; font-weight: 800; letter-spacing: 1px; 
    color: var(--text);
    background: linear-gradient(135deg, #fff 30%, var(--gold));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 进度条（HUD内嵌） */
.hud-progress {
    display: flex; align-items: center; gap: 8px;
    padding-left: 16px; border-left: 1px solid rgba(255,255,255,0.06);
}
.progress-bar-wrap {
    width: 80px; height: 5px; background: rgba(255,255,255,0.06);
    border-radius: 99px; overflow: hidden;
}
.progress-bar {
    height: 100%; border-radius: 99px; transition: width 0.6s ease;
    background: linear-gradient(90deg, var(--cyan), var(--purple), var(--pink));
    box-shadow: 0 0 6px rgba(34,211,238,0.3);
}
.progress-label { 
    font-size: 0.7rem; color: var(--text-muted); white-space: nowrap; 
    font-weight: 600; letter-spacing: 0.5px;
}

/* ─── 右侧：道具栏 + 商店 + 主题 ─── */
.hud-right { display: flex; align-items: center; gap: 10px; }

/* 道具栏 */
.item-bar { display: flex; gap: 5px; }
.item-slot {
    display: flex; align-items: center; gap: 3px;
    background: rgba(255,255,255,0.03); 
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px; padding: 4px 10px 4px 7px;
    font-size: 0.8rem; transition: all 0.2s;
}
.item-slot:hover { 
    border-color: rgba(251,191,36,0.4); 
    background: rgba(251,191,36,0.05);
    box-shadow: 0 0 8px rgba(251,191,36,0.1);
}
.item-icon { width: 18px; height: 18px; object-fit: contain; }
.item-count { font-weight: 700; color: var(--gold); min-width: 12px; text-align: center; }

/* 商店按钮 */
.btn-shop-nav {
    display: flex; align-items: center; gap: 4px;
    background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(245,158,11,0.1));
    color: var(--gold); 
    border: 1px solid rgba(251,191,36,0.3);
    border-radius: 8px;
    padding: 5px 12px; font-size: 0.8rem; font-weight: 700;
    cursor: pointer; transition: all 0.2s;
}
.btn-shop-nav:hover { 
    background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(245,158,11,0.15));
    border-color: rgba(251,191,36,0.5);
    box-shadow: 0 0 12px rgba(251,191,36,0.15);
    transform: translateY(-1px); 
}
.btn-label { font-size: 0.78rem; }

/* 主题切换 */
.theme-toggle {
    background: rgba(255,255,255,0.03); 
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px; cursor: pointer; font-size: 1rem;
    padding: 4px 8px; color: var(--text-sub); transition: all 0.2s;
}
.theme-toggle:hover { 
    background: rgba(255,255,255,0.08); 
    border-color: rgba(255,255,255,0.15);
}

/* ─── 亮色主题 ─── */
[data-theme="light"] .navbar-hud {
    background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(245,248,255,0.92) 100%);
    border-image: linear-gradient(90deg, 
        transparent 0%, 
        rgba(245,158,11,0.3) 20%, 
        rgba(59,130,246,0.3) 50%, 
        rgba(139,92,246,0.3) 80%, 
        transparent 100%
    ) 1;
    box-shadow: 0 4px 20px rgba(100,140,220,0.12), inset 0 1px 0 rgba(255,255,255,0.8);
}
[data-theme="light"] .brand-name { 
    background: linear-gradient(135deg, #1e293b 30%, #92400e);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="light"] .home-link { 
    background: rgba(240,245,255,0.8); border-color: rgba(180,200,240,0.3); 
}
[data-theme="light"] .home-link:hover { 
    border-color: var(--gold); background: rgba(245,158,11,0.08); 
}
[data-theme="light"] .hud-progress { border-left-color: rgba(180,200,240,0.3); }
[data-theme="light"] .progress-bar-wrap { background: rgba(100,140,220,0.1); }
[data-theme="light"] .item-slot { 
    background: rgba(240,245,255,0.8); border-color: rgba(180,200,240,0.3); 
}
[data-theme="light"] .item-slot:hover { 
    border-color: rgba(245,158,11,0.4); background: rgba(245,158,11,0.05); 
}
[data-theme="light"] .btn-shop-nav { 
    background: linear-gradient(135deg, rgba(245,158,11,0.1), rgba(245,158,11,0.05));
    border-color: rgba(245,158,11,0.3); color: #92400e;
}
[data-theme="light"] .btn-shop-nav:hover {
    background: linear-gradient(135deg, rgba(245,158,11,0.15), rgba(245,158,11,0.08));
    border-color: rgba(245,158,11,0.5);
}
[data-theme="light"] .theme-toggle { 
    border-color: rgba(100,140,220,0.2); color: #5a6a7e; 
    background: rgba(240,245,255,0.6);
}

/* ─── 响应式 ─── */
@media (max-width: 640px) {
    .navbar-hud { padding: 8px 10px; gap: 8px; }
    .hud-left { gap: 8px; }
    .hud-brand { gap: 6px; }
    .hud-progress { display: none; }
    .home-link { width: 28px; height: 28px; font-size: 0.85rem; border-radius: 6px; }
    .brand-icon { font-size: 1rem; }
    .brand-name { font-size: 0.9rem; letter-spacing: 0.5px; }
    .hud-right { gap: 6px; }
    .item-bar { gap: 3px; }
    .item-slot { padding: 3px 6px 3px 4px; font-size: 0.72rem; }
    .item-icon { width: 15px; height: 15px; }
    .item-count { min-width: 10px; }
    .btn-label { display: none; }
    .btn-shop-nav { padding: 4px 8px; font-size: 0.75rem; border-radius: 6px; }
    .theme-toggle { padding: 3px 6px; font-size: 0.9rem; border-radius: 6px; }
}
@media (max-width: 360px) {
    .navbar-hud { padding: 6px 8px; }
    .brand-name { font-size: 0.82rem; }
    .brand-icon { display: none; }
    .item-slot { padding: 2px 5px 2px 3px; }
}
@media (min-width: 641px) and (max-width: 768px) {
    .progress-bar-wrap { width: 60px; }
}
@media (min-width: 1024px) {
    .navbar-hud { padding: 12px 32px; }
    .progress-bar-wrap { width: 100px; }
    .brand-name { font-size: 1.25rem; }
}