/* 移动端适配样式 */

/* 小屏幕适配 (手机) */
@media (max-width: 768px) {
    /* 导航栏 */
    .navbar {
        padding: 0.75rem 1rem;
    }

    .nav-container {
        padding: 0;
        flex-direction: row;
        justify-content: flex-start;
    }

    .nav-links {
        gap: 0.25rem;
        padding: 0.25rem;
        justify-content: flex-start;
        flex-wrap: nowrap;
        width: auto;
        display: inline-flex;
    }

    .nav-link {
        font-size: 0.8125rem;
        padding: 0.375rem 0.625rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .nav-right {
        width: auto;
        justify-content: flex-end;
        margin-left: auto;
    }

    .video-toggle-btn {
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }

    .video-toggle-btn span {
        display: none;
    }

    .video-toggle-btn svg {
        width: 1rem;
        height: 1rem;
    }

    /* Hero 区域 */
    .hero-section {
        min-height: 100vh;
        padding: 2rem 1rem;
    }

    /* 视频背景自适应 - 确保完整显示 */
    .video-container {
        position: fixed;
        inset: 0;
    }

    .background-video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: none;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-subtitle {
        font-size: 0.875rem;
    }

    .hero-nav-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .hero-nav-btn {
        padding: 1rem;
    }

    .btn-label {
        font-size: 0.9375rem;
    }

    /* 页面标题 */
    .page-header {
        padding: 2rem 1rem;
    }

    .page-title {
        font-size: 1.75rem;
    }

    .page-intro {
        font-size: 0.875rem;
    }

    .page-signature {
        width: 70px;
        height: 70px;
        right: 0.5rem;
    }

    /* 签名loading */
    .signature-logo {
        width: 200px;
        height: 200px;
    }

    .loading-text {
        font-size: 1.125rem;
    }

    /* 内容区域 */
    .section-container {
        padding: 2rem 1rem;
    }

    .section-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    /* 音乐控制 */
    .music-controls {
        flex-direction: column;
        gap: 0.75rem;
    }

    .search-box {
        width: 100%;
    }

    .filter-tags {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 0.5rem;
    }

    .filter-tag {
        white-space: nowrap;
        padding: 0.625rem 1rem;
        font-size: 0.8125rem;
    }

    .submit-btn {
        width: 100%;
    }

    /* 歌曲表格 */
    .song-row {
        grid-template-columns: 35px 1fr 55px 35px;
        gap: 0.5rem;
        padding: 0.75rem 0.5rem;
        font-size: 0.875rem;
    }

    .song-title {
        font-size: 0.875rem;
    }

    .song-artist {
        font-size: 0.75rem;
    }

    .song-duration {
        font-size: 0.8125rem;
    }

    .song-link svg {
        width: 16px;
        height: 16px;
    }

    /* 游戏网格 */
    .games-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    /* 皮套瀑布流 - 改为2列 */
    .costumes-masonry {
        column-count: 2;
        column-gap: 1rem;
    }

    .costume-card {
        margin-bottom: 1rem;
    }

    .costume-card-title {
        font-size: 1rem;
    }

    .costume-card-date {
        font-size: 0.75rem;
    }

    .costume-card-tags .tag {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* 画廊网格 */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    /* 关系网 */
    .relations-network {
        min-height: 400px;
        padding: 1rem;
    }

    .node-label {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    /* 电竞历程 */
    .esports-timeline {
        padding: 1.5rem 1rem;
    }

    .timeline-item {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.75rem;
    }

    .timeline-year {
        font-size: 1rem;
    }

    .timeline-content h3 {
        font-size: 1rem;
    }

    .timeline-content p {
        font-size: 0.875rem;
    }

    /* 个人简介 */
    .profile-stats {
        flex-direction: column;
        gap: 1rem;
    }

    .info-box {
        padding: 1.5rem;
    }

    .info-label {
        font-size: 0.8125rem;
    }

    .info-value {
        font-size: 1.125rem;
    }

    /* 页脚 */
    .footer {
        padding: 2rem 1rem;
    }

    .footer-container {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .footer-links {
        gap: 1rem;
        justify-content: center;
    }

    .footer-links a {
        font-size: 0.875rem;
    }
}

/* 极小屏幕适配 (< 480px) */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-nav-grid {
        grid-template-columns: 1fr;
    }

    .games-grid {
        grid-template-columns: 1fr;
    }

    .costumes-masonry {
        column-count: 1;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .song-row {
        grid-template-columns: 30px 1fr 50px 30px;
        padding: 0.625rem 0.375rem;
    }

    .page-signature {
        width: 60px;
        height: 60px;
    }

    .nav-link {
        font-size: 0.75rem;
        padding: 0.375rem 0.375rem;
    }
}

/* 横屏适配 */
@media (max-width: 768px) and (orientation: landscape) {
    .hero-section {
        min-height: auto;
        padding: 1.5rem 1rem;
    }

    .hero-nav-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .signature-logo {
        width: 150px;
        height: 150px;
    }
}