/* Mobile Optimizations */
@media (max-width: 768px) {
    .hero-section {
        min-height: 50vh;
        padding: var(--spacing-lg);
    }

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

    .content-section {
        padding: var(--spacing-lg) var(--spacing-md);
    }

    .section-title {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 2rem;
    }

    .hero-play-btn {
        padding: var(--spacing-sm) var(--spacing-lg);
        font-size: 1rem;
    }

    .section-title {
        font-size: 1.2rem;
    }

    .playlist-title,
    .artist-name {
        font-size: 1.5rem;
    }

    .player-title {
        font-size: 1.2rem;
    }
}

/* Touch Optimizations */
@media (hover: none) and (pointer: coarse) {
    .nav-item:hover,
    .profile-menu-item:hover,
    .track-item:hover {
        background: inherit;
    }

    .nav-item:active {
        transform: scale(0.95);
    }

    .track-item:active {
        background: var(--card-bg);
        transform: scale(0.98);
    }

    .profile-menu-item:active {
        background: var(--card-bg);
    }
}

/* Safe Area Insets */
@supports (padding: env(safe-area-inset-bottom)) {
    .app-container {
        padding-bottom: calc(140px + env(safe-area-inset-bottom));
    }

    .bottom-nav {
        bottom: calc(80px + env(safe-area-inset-bottom));
    }

    .mini-player {
        bottom: calc(150px + env(safe-area-inset-bottom));
    }

    .player-content {
        padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom));
    }
}

/* Landscape Mode */
@media (orientation: landscape) and (max-height: 600px) {
    .hero-section {
        min-height: 80vh;
    }

    .player-cover-container {
        padding: var(--spacing-md) 0;
    }

    .player-cover {
        max-width: 300px;
    }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .track-cover,
    .mini-cover,
    .player-cover,
    .release-image {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    :root {
        --primary-bg: #000000;
        --secondary-bg: #121212;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* iPhone X and newer notch support */
@supports (padding: max(0px)) {
    .app-container {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
}

/* Pull to Refresh Prevention */
body {
    overscroll-behavior-y: contain;
}

/* Touch Action Optimization */
.track-item,
.nav-item,
.profile-menu-item,
.release-card {
    touch-action: manipulation;
}

/* Better tap targets for mobile */
@media (max-width: 768px) {
    .nav-item,
    .control-btn,
    .extra-control-btn {
        min-height: 44px;
        min-width: 44px;
    }

    .track-item {
        min-height: 60px;
    }
}

/* Prevent text zoom on iOS */
@media (max-width: 768px) {
    input[type="text"],
    input[type="search"],
    textarea {
        font-size: 16px;
    }
}

/* Smooth scrolling for mobile */
@media (max-width: 768px) {
    .main-content,
    .page {
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
    }
}

/* Loading State */
.loading {
    pointer-events: none;
    opacity: 0.6;
}

/* Skeleton Loader */
.skeleton {
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0.05) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
}

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}