/* Reset and Shared styles for both buttons */
#modern-button,
#tired-button {
    position: absolute !important;
    top: 20rem !important;
    transform: translateY(-50%) !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer;
    z-index: 99999;
    width: 150px !important;
    height: 150px !important;
    border-radius: 0 !important; /* Force square corners */
    display: block !important;
    overflow: visible !important;
}

#modern-button *, #tired-button *, 
#modern-button img, #tired-button img,
#modern-button, #tired-button {
    border-radius: 0 !important;
}

/* Specific horizontal positioning for Desktop */
#modern-button {
    left: calc(50% - 580px) !important; 
}

#tired-button {
    left: calc(50% + 430px) !important;
}

/* Image styles - strictly identical and square */
#modern-button img,
#tired-button img {
    width: 150px !important;
    height: 150px !important;
    max-width: none !important;
    max-height: none !important;
    transition: all 0.3s ease;
    object-fit: contain !important;
    border-radius: 0 !important; /* Force square corners on image */
    aspect-ratio: 1 / 1 !important;
    display: block !important;
    border: none !important;
    padding: 0 !important;
}

/* Responsive adjustment for laptops/tablets (1161px to 1300px) */
@media (max-width: 1300px) and (min-width: 1161px) {
    #modern-button,
    #tired-button {
        width: 12vw !important;
        height: 12vw !important;
    }

    #modern-button img,
    #tired-button img {
        width: 12vw !important;
        height: 12vw !important;
    }
    
    #modern-button {
        left: calc(50% - 400px - 14vw) !important;
    }
    
    #tired-button {
        left: calc(50% + 400px + 2vw) !important;
    }
}

/* Mobile/Tablet: Stick to screen edges as semi-circle tabs 
   The user said "mobile view is good now", so we keep the tab shape here
   but ensure the square requirement doesn't break this specific UI choice.
*/
@media (max-width: 1160px) {
    #modern-button,
    #tired-button {
        position: fixed !important;
        top: 50vh !important;
        width: 80px !important;
        height: 80px !important;
    }

    #modern-button img,
    #tired-button img {
        width: 80px !important;
        height: 80px !important;
    }

    #modern-button {
        left: 0 !important;
    }

    #tired-button {
        right: 0 !important;
        left: auto !important;
    }
}