/* Mobile Override Styles - Ensure mobile layout works properly */

@media screen and (max-width: 768px) {
    /* Hide back button on landing screen and when it's active */
    #landing-screen #back-button,
    #landing-screen.active ~ #back-button,
    body:has(#landing-screen.active) #back-button {
        display: none !important;
    }
    
    /* Align back button with KANYE RANKER text */
    #comparison-screen #back-button {
        position: absolute !important;
        top: 20px !important;
        left: 15px !important;
        transform: none !important;
        z-index: 100 !important;
        height: 30px !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Ensure header h1 has proper alignment */
    #comparison-screen .comparison-header h1 {
        position: relative !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
        line-height: 30px !important;
    }
    /* Ensure comparison screen is positioned for absolute back button */
    #comparison-screen {
        position: relative !important;
        min-height: 100vh !important;
        padding-top: 0 !important;
    }
    
    #comparison-screen .container {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Header positioning - reduced top padding since back button is inline */
    #comparison-screen .comparison-header {
        padding: 20px 20px 10px !important;
        margin-bottom: 10px !important;
        margin-top: 0 !important;
        position: relative !important;
    }
    
    #comparison-screen .comparison-header h1 {
        font-size: 24px !important;
        margin-bottom: 5px !important;
        height: 30px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    #comparison-screen .progress-bar {
        margin: 10px auto !important;
        height: 4px !important;
    }
    
    /* Container for both cards */
    #comparison-screen .comparison-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
        height: calc(100vh - 180px) !important;
        padding: 0 15px !important;
        margin: 0 !important;
    }
    
    /* Each song card takes up ~45% of available height */
    #comparison-screen .song-card {
        flex: 1 !important;
        max-height: calc(45vh - 50px) !important;
        min-height: 180px !important;
        display: grid !important;
        grid-template-columns: min(30vw, 120px) 1fr !important;
        grid-template-rows: auto auto auto auto !important;
        grid-column-gap: 15px !important;
        grid-row-gap: 0 !important;
        align-items: center !important;
        padding: 20px !important;
        position: relative !important;
        width: 100% !important;
        border-radius: 16px !important;
        background: white !important;
        border: 2px solid #e0e0e0 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }
    
    /* Dark mode card styling */
    .dark-mode #comparison-screen .song-card {
        background: #2a2a2a !important;
        border-color: #444 !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
    }
    
    /* Album art on the left, spans all rows */
    #comparison-screen .album-art-container {
        grid-column: 1 !important;
        grid-row: 1 / -1 !important;
        width: min(30vw, 120px) !important;
        height: min(30vw, 120px) !important;
        min-width: 80px !important;
        min-height: 80px !important;
        margin: 0 !important;
        border-radius: 12px !important;
        overflow: hidden !important;
        align-self: center !important;
    }
    
    #comparison-screen .album-art {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }
    
    /* Song title - row 1, column 2 */
    #comparison-screen .song-title {
        grid-column: 2 !important;
        grid-row: 1 !important;
        font-size: clamp(16px, 4.5vw, 20px) !important;
        font-weight: 700 !important;
        margin: 0 0 2px 0 !important;
        line-height: 1.1 !important;
        color: #333 !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Album name - row 2, column 2 */
    #comparison-screen .album-name {
        grid-column: 2 !important;
        grid-row: 2 !important;
        font-size: clamp(13px, 3.5vw, 16px) !important;
        font-weight: 500 !important;
        margin: 0 0 1px 0 !important;
        line-height: 1.1 !important;
        opacity: 0.9 !important;
        color: #555 !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Year - row 3, column 2 */
    #comparison-screen .year {
        grid-column: 2 !important;
        grid-row: 3 !important;
        font-size: clamp(11px, 3vw, 14px) !important;
        margin: 0 0 4px 0 !important;
        line-height: 1.1 !important;
        opacity: 0.7 !important;
        color: #666 !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Action buttons - row 4, column 2 */
    #comparison-screen .song-actions {
        grid-column: 2 !important;
        grid-row: 4 !important;
        display: flex !important;
        gap: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    /* Dark mode text colors */
    .dark-mode #comparison-screen .song-title {
        color: #fff !important;
    }
    
    .dark-mode #comparison-screen .album-name {
        color: #ddd !important;
    }
    
    .dark-mode #comparison-screen .year {
        color: #bbb !important;
    }
    
    #comparison-screen .song-actions .btn-small {
        padding: 8px 16px !important;
        font-size: clamp(12px, 3vw, 14px) !important;
        border-radius: 20px !important;
        font-weight: 600 !important;
    }
    
    
    /* Hide elements we don't need */
    #comparison-screen .vs-divider,
    #comparison-screen .btn-choose {
        display: none !important;
    }
    
    /* Also hide choose button if it doesn't have btn-choose class */
    #comparison-screen .song-card > button.btn {
        display: none !important;
    }
    
    /* Footer adjustments */
    #comparison-screen .comparison-footer {
        padding: 10px 15px 20px !important;
        margin-top: 10px !important;
    }
    
    /* Fix comparison count text */
    #comparison-screen .comparison-count {
        font-size: 14px !important;
        margin-bottom: 5px !important;
    }
}

/* Results page mobile fix */
@media screen and (max-width: 480px) {
    .result-actions {
        width: calc(100% - 115px) !important;
        margin-left: 115px !important;
        justify-content: center !important;
        display: flex !important;
        gap: 0.5rem !important;
    }
}

/* Center-align album name in results */
@media screen and (max-width: 768px) {
    #results-screen .album-name,
    .results-list .album-name,
    .result-album {
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Ensure result info is full width for centering */
    .result-info {
        width: 100% !important;
    }
}