/* 响应式设计 - 二次元主题 */

/* 平板设备 */
@media screen and (max-width: 1024px) {
    .primary-container {
        max-width: 90%;
        padding: 20px 16px;
    }
    
    .content-layout {
        flex-direction: column;
        gap: 20px;
    }
    
    .main-content,
    .secondary-cards {
        flex: none;
        width: 100%;
    }
    
    .project-cards {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 16px;
    }
    
    .hero-card .avatar {
        width: 100px;
        height: 100px;
    }
    
    .hero-card .name {
        font-size: 1.6rem;
    }
    
    .social-icons {
        gap: 16px;
    }
    
    .social-icon {
        width: 44px;
        height: 44px;
        font-size: 1.3rem;
    }
}

/* 手机设备 */
@media screen and (max-width: 768px) {
    .primary-container {
        max-width: 95%;
        padding: 16px 12px;
        gap: 16px;
    }
    
    .card-item {
        padding: 20px;
        border-radius: 16px;
    }
    
    .hero-card .avatar {
        width: 80px;
        height: 80px;
    }
    
    .hero-card .name {
        font-size: 1.4rem;
    }
    
    .social-icons {
        gap: 12px;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .social-icon {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .main-content h2 {
        font-size: 1.4rem;
    }
    
    .main-content h3 {
        font-size: 1.2rem;
    }
    
    .project-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .project-card {
        padding: 16px;
    }
    
    .secondary-card {
        padding: 16px;
    }
    
    .secondary-card .title {
        font-size: 1.1rem;
    }
    
    .themes {
        flex-direction: column;
        gap: 8px;
    }
    
    .theme-item {
        padding: 12px;
        justify-content: flex-start;
    }
    
    /* 音乐播放器移动端优化 */
    .player-controls {
        gap: 16px;
    }
    
    .control-btn {
        width: 36px;
        height: 36px;
    }
    
    .control-btn.play-pause {
        width: 44px;
        height: 44px;
    }
    
    .song-title {
        font-size: 1rem;
    }
    
    .song-artist {
        font-size: 0.85rem;
    }
    
    /* 动画效果在移动端的调整 */
    .card-item:hover {
        transform: translateY(-4px) scale(1.01);
    }
    
    .hero-card .avatar:hover {
        transform: scale(1.05) rotate(2deg);
    }
    
    .social-icon:hover {
        transform: scale(1.1) rotate(180deg);
    }
    
    .project-card:hover {
        transform: translateY(-4px) scale(1.02);
    }
}

/* 小屏手机设备 */
@media screen and (max-width: 480px) {
    .primary-container {
        max-width: 98%;
        padding: 12px 8px;
        gap: 12px;
    }
    
    .card-item {
        padding: 16px;
        border-radius: 12px;
    }
    
    .hero-card .avatar {
        width: 70px;
        height: 70px;
    }
    
    .hero-card .name {
        font-size: 1.2rem;
        margin: 8px 0 12px 0;
    }
    
    .social-icons {
        gap: 8px;
    }
    
    .social-icon {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
    
    .main-content h2 {
        font-size: 1.2rem;
        margin-bottom: 12px;
    }
    
    .main-content h3 {
        font-size: 1.1rem;
        margin-bottom: 8px;
    }
    
    .main-content p {
        font-size: 0.9rem;
        line-height: 1.6;
    }
    
    .decorative-hr {
        font-size: 1.2rem;
        margin: 16px 0;
    }
    
    .project-card {
        padding: 12px;
    }
    
    .project-title {
        font-size: 1rem;
    }
    
    .project-desc {
        font-size: 0.85rem;
    }
    
    .secondary-card {
        padding: 12px;
    }
    
    .secondary-card .title {
        font-size: 1rem;
        margin-bottom: 12px;
    }
    
    .secondary-card .content p,
    .secondary-card .content a {
        font-size: 0.9rem;
    }
    
    /* 音乐播放器小屏优化 */
    .player-controls {
        gap: 12px;
    }
    
    .control-btn {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    .control-btn.play-pause {
        width: 40px;
        height: 40px;
        font-size: 1.4rem;
    }
    
    .progress-container {
        height: 4px;
    }
    
    .song-title {
        font-size: 0.9rem;
    }
    
    .song-artist {
        font-size: 0.8rem;
    }
    
    /* 主题切换小屏优化 */
    .theme-item {
        padding: 8px;
        font-size: 0.8rem;
    }
    
    .theme-item .color {
        width: 16px;
        height: 16px;
    }
    
    /* 页脚小屏优化 */
    .footer {
        padding: 20px 12px;
        font-size: 0.8rem;
        gap: 6px;
    }
}

/* 超小屏设备 */
@media screen and (max-width: 320px) {
    .primary-container {
        padding: 8px 4px;
        gap: 8px;
    }
    
    .card-item {
        padding: 12px;
    }
    
    .hero-card .avatar {
        width: 60px;
        height: 60px;
    }
    
    .hero-card .name {
        font-size: 1.1rem;
    }
    
    .social-icon {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
    
    .main-content h2 {
        font-size: 1.1rem;
    }
    
    .main-content h3 {
        font-size: 1rem;
    }
    
    .control-btn.play-pause {
        width: 36px;
        height: 36px;
        font-size: 1.2rem;
    }
}

/* 横屏模式优化 */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .primary-container {
        padding: 12px;
    }
    
    .hero-card {
        padding: 16px;
    }
    
    .hero-card .avatar {
        width: 60px;
        height: 60px;
    }
    
    .hero-card .name {
        font-size: 1.2rem;
        margin: 8px 0;
    }
    
    .social-icons {
        margin-top: 12px;
    }
    
    .card-item {
        padding: 16px;
    }
    
    .secondary-card {
        padding: 12px;
    }
}

/* 高分辨率屏幕优化 */
@media screen and (min-width: 1440px) {
    .primary-container {
        max-width: 1200px;
    }
    
    .hero-card .avatar {
        width: 140px;
        height: 140px;
    }
    
    .hero-card .name {
        font-size: 2rem;
    }
    
    .social-icon {
        width: 52px;
        height: 52px;
        font-size: 1.6rem;
    }
    
    .main-content h2 {
        font-size: 1.8rem;
    }
    
    .main-content h3 {
        font-size: 1.4rem;
    }
    
    .project-cards {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 24px;
    }
}

/* 打印样式 */
@media print {
    .background-container,
    #sakura-container,
    .social-icons,
    #music-player,
    #settings {
        display: none !important;
    }
    
    .card-item {
        box-shadow: none;
        border: 1px solid #ccc;
        break-inside: avoid;
    }
    
    .primary-container {
        max-width: 100%;
        padding: 0;
    }
    
    .content-layout {
        flex-direction: column;
    }
    
    .main-content,
    .secondary-cards {
        width: 100%;
    }
}