/* ==================== 全局响应式样式 ====================
   作用：移动端导航 / 触摸目标 / 字号 / 网格适配
   断点：1024 / 768 / 480
   ========================================================= */

/* ====== 触摸目标（避免误触） ====== */
@media (max-width: 1024px) {
    .nav-link { padding: 10px 12px; font-size: 16px; }
    .navbar-center { gap: 22px; }
    .logo-text { font-size: 32px; letter-spacing: 3px; }
}

@media (max-width: 900px) {
    .navbar {
        flex-wrap: wrap;
        padding: 12px 16px;
    }

    /* 汉堡按钮：默认显示，桌面隐藏 */
    .nav-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border: 1px solid var(--color-gold);
        border-radius: 4px;
        background: transparent;
        color: var(--color-gold);
        font-size: 22px;
        cursor: pointer;
        margin-left: auto;
    }

    .navbar-center {
        display: none;
        width: 100%;
        order: 3;
        flex-direction: column;
        gap: 4px;
        margin: 12px 0 0;
        padding-top: 12px;
        border-top: 1px solid rgba(212, 175, 55, 0.25);
    }

    .navbar-center.open { display: flex; }

    .navbar-center .nav-link {
        width: 100%;
        text-align: center;
        padding: 12px;
        font-size: 16px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* 移动端搜索框：占满整行 */
    .nav-search {
        width: 100%;
        margin-top: 8px;
        margin-left: 0;
    }
    .nav-search input[type="text"] {
        width: 100%;
    }
    .nav-search input[type="text"]:focus {
        width: 100%;
    }

    /* 移动端下拉菜单改为静态展开 */
    .dropdown-content {
        position: static;
        display: block;
        background: rgba(0, 0, 0, 0.3);
        border: none;
        box-shadow: none;
        animation: none;
        margin-top: 4px;
    }

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

    .dropdown-content a {
        text-align: center;
        padding: 8px;
        font-size: 14px;
    }

    .logo-text { font-size: 28px; letter-spacing: 2px; }
    .logo-img { width: 48px; height: 48px; }
}

@media (min-width: 901px) {
    .nav-toggle { display: none; }
    .navbar-center { display: flex !important; }
}

@media (max-width: 768px) {
    html { font-size: 15px; }

    /* 通用容器内边距 */
    .content { padding: 0 12px; }

    /* 音乐播放器：避免遮挡内容 */
    .music-player { left: 12px; bottom: 12px; }
    .player-panel { width: calc(100vw - 24px); max-width: 320px; }

    /* 滚动行为：横向溢出处理 */
    body { overflow-x: hidden; }
}

@media (max-width: 480px) {
    html { font-size: 14px; }
    .footer { padding: 18px 12px; }
    .navbar-left { gap: 8px; }
    .logo-text { font-size: 22px; }
}

/* ====== iOS 安全区 ====== */
@supports (padding: max(0px)) {
    .music-player {
        left: max(12px, env(safe-area-inset-left));
        bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* ====== 减少动画偏好 ====== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}