/* Heimdall Studio v0.14
   Dark screenshot corner blending fix.

   Problem:
   the phone screen container has a very light background (#f7f6f8).
   Around rounded corners, browser anti-aliasing can blend that light
   background into the dark screenshot, creating a tiny white halo.

   Fix:
   - give dark screenshots a dark screen background
   - slightly overscan screenshot images by 2px
   - preserve clipping on the real rounded screen container
   - apply to Home, Software product mockup and gallery mockups
*/

/* Keep the screen itself responsible for the rounded clipping. */
.device-screen,
.gallery-device-screen {
    position: relative;
    overflow: hidden !important;
    isolation: isolate;
}

/* Tiny overscan removes any subpixel seam between image and rounded clip. */
.device-screen > img,
.gallery-device-screen > img {
    display: block !important;
    width: calc(100% + 4px) !important;
    max-width: none !important;
    margin-left: -2px !important;
    margin-right: -2px !important;
    transform: translateY(-1px);
    transform-origin: top center;
}

/*
   Current v013 assets:
   odd-numbered files are the dark variants.
   The gallery theme switch uses filenames containing "-dark".
*/
.device-screen:has(> img[src*="odobuddy-01.jpg"]),
.device-screen:has(> img[src*="odobuddy-03.jpg"]),
.device-screen:has(> img[src*="odobuddy-05.jpg"]),
.device-screen:has(> img[src*="odobuddy-07.jpg"]),
.device-screen:has(> img[src*="-dark."]),
.gallery-device-screen:has(> img[src*="odobuddy-01.jpg"]),
.gallery-device-screen:has(> img[src*="odobuddy-03.jpg"]),
.gallery-device-screen:has(> img[src*="odobuddy-05.jpg"]),
.gallery-device-screen:has(> img[src*="odobuddy-07.jpg"]),
.gallery-device-screen:has(> img[src*="-dark."]) {
    background: rgb(28, 25, 32) !important;
}

/* Light screenshots retain their light anti-aliasing background. */
.device-screen:has(> img[src*="odobuddy-02.jpg"]),
.device-screen:has(> img[src*="odobuddy-04.jpg"]),
.device-screen:has(> img[src*="odobuddy-06.jpg"]),
.device-screen:has(> img[src*="odobuddy-08.jpg"]),
.device-screen:has(> img[src*="-light."]),
.gallery-device-screen:has(> img[src*="odobuddy-02.jpg"]),
.gallery-device-screen:has(> img[src*="odobuddy-04.jpg"]),
.gallery-device-screen:has(> img[src*="odobuddy-06.jpg"]),
.gallery-device-screen:has(> img[src*="odobuddy-08.jpg"]),
.gallery-device-screen:has(> img[src*="-light."]) {
    background: rgb(250, 246, 250) !important;
}

/*
   Slightly tighten the inner radius so it follows the black bezel more
   naturally. Existing dimensions/phone placement are otherwise untouched.
*/
.device-screen {
    border-radius: 29px !important;
}

.gallery-device-screen {
    border-radius: 21px 21px 0 0 !important;
}