/* Responsive CSS - Media Queries and Mobile Adaptations */

/* === PHONE ORIENTATION HANDLING === */

/* Removed 768px breakpoints - using aspect-ratio based breakpoints only */

/* === WINDOW SIZE TESTING GUIDES === */

/* 4:3 Desktop Ratios */
@media screen and (min-width: 1024px) and (max-width: 1024px) and (min-height: 768px) and (max-height: 768px) {
    body::after {
        content: "4:3 Desktop - 1024x768";
        position: fixed;
        top: 10px;
        right: 10px;
        background: red;
        color: white;
        padding: 5px 10px;
        font-family: monospace;
        z-index: 99999;
        border: 3px solid red;
    }
}

@media screen and (min-width: 1280px) and (max-width: 1280px) and (min-height: 960px) and (max-height: 960px) {
    body::after {
        content: "4:3 Desktop - 1280x960";
        position: fixed;
        top: 10px;
        right: 10px;
        background: blue;
        color: white;
        padding: 5px 10px;
        font-family: monospace;
        z-index: 99999;
        border: 3px solid blue;
    }
}

/* 16:9 Desktop Ratios */
@media screen and (min-width: 1366px) and (max-width: 1366px) and (min-height: 768px) and (max-height: 768px) {
    body::after {
        content: "16:9 Desktop - 1366x768";
        position: fixed;
        top: 10px;
        right: 10px;
        background: green;
        color: white;
        padding: 5px 10px;
        font-family: monospace;
        z-index: 99999;
        border: 3px solid green;
    }
}

@media screen and (min-width: 1920px) and (max-width: 1920px) and (min-height: 1080px) and (max-height: 1080px) {
    body::after {
        content: "16:9 Desktop - 1920x1080";
        position: fixed;
        top: 10px;
        right: 10px;
        background: yellow;
        color: black;
        padding: 5px 10px;
        font-family: monospace;
        z-index: 99999;
        border: 3px solid yellow;
    }
}

/* 9:16 Phone Ratios */
@media screen and (min-width: 390px) and (max-width: 390px) and (min-height: 844px) and (max-height: 844px) {
    body::after {
        content: "9:16 Phone - 390x844";
        position: fixed;
        top: 10px;
        right: 10px;
        background: purple;
        color: white;
        padding: 5px 10px;
        font-family: monospace;
        z-index: 99999;
        border: 3px solid purple;
    }
}

@media screen and (min-width: 360px) and (max-width: 360px) and (min-height: 640px) and (max-height: 640px) {
    body::after {
        content: "9:16 Phone - 360x640";
        position: fixed;
        top: 10px;
        right: 10px;
        background: orange;
        color: white;
        padding: 5px 10px;
        font-family: monospace;
        z-index: 99999;
        border: 3px solid orange;
    }
}

/* 10:16 Phone Ratios */
@media screen and (min-width: 414px) and (max-width: 414px) and (min-height: 896px) and (max-height: 896px) {
    body::after {
        content: "10:16 Phone - 414x896";
        position: fixed;
        top: 10px;
        right: 10px;
        background: hotpink;
        color: white;
        padding: 5px 10px;
        font-family: monospace;
        z-index: 99999;
        border: 3px solid hotpink;
    }
}

@media screen and (min-width: 393px) and (max-width: 393px) and (min-height: 851px) and (max-height: 851px) {
    body::after {
        content: "10:16 Phone - 393x851";
        position: fixed;
        top: 10px;
        right: 10px;
        background: cyan;
        color: black;
        padding: 5px 10px;
        font-family: monospace;
        z-index: 99999;
        border: 3px solid cyan;
    }
}


/* === NARROW WINDOW OPTIMIZATION === */
/* For aspect ratios 0.8 and lower (portrait phones and very tall windows) */
@media screen and (max-aspect-ratio: 0.8) {

    /* Remove portrait rotation warning message */
    body::before {
        display: none !important;
    }

    /* Larger TV sizing for narrow screens (mobile/portrait) */
    .tv-container {
        width: min(100vw, calc(95vh * 1686 / 1621));
        height: calc(min(100vw, calc(95vh * 1686 / 1621)) * 1621 / 1686);
    }

    /* Hide TV shadow on narrow screens - save time, focus on functionality */
    .tv-shadow {
        display: none !important;
    }

    /* Hide volume slider - too small to interact with on narrow screens */
    .volume-control {
        display: none !important;
    }

    /* Extend chain heights proportionally based on window height */
    /* TV Guide chain - extend for tall windows */
    .tv-guide-trigger::after {
        height: calc(7vw + (100vh - 100vw) * 0.1) !important; /* Base 7vw + proportional extension */
    }

    /* Join Club chain - extend for tall windows */
    .join-club-trigger::after {
        height: calc(6vw + (100vh - 100vw) * 0.1) !important; /* Base 6vw + proportional extension */
    }

    /* About chain - extend for tall windows */
    .about-hanging-trigger::after {
        height: calc(3vw + (100vh - 100vw) * 0.08) !important; /* Base 3vw + proportional extension */
    }

    /* Credits chain - extend for tall windows */
    .credits-hanging-trigger::after {
        height: calc(2.5vw + (100vh - 100vw) * 0.08) !important; /* Base 2.5vw + proportional extension */
    }

    /* Free Stuff chain - extend for tall windows */
    .freestuff-hanging-trigger::after {
        height: calc(3.5vw + (100vh - 100vw) * 0.08) !important; /* Base 3.5vw + proportional extension */
    }

    /* Fix nail/chain position drift by using consistent vw units */
    .tv-guide-trigger,
    .join-club-trigger,
    .about-hanging-trigger,
    .credits-hanging-trigger,
    .freestuff-hanging-trigger {
        top: 8vw !important; /* Remove vh component that causes drift */
    }

    /* TV and shadow positioning handled by recalculated position rules above - no transform needed */

    /* Hide volume slider on narrow screens - too tiny to hit */
    .volume-control {
        display: none !important;
    }

    /* Enlarge form overlay for narrow screens - make it readable on mobile */
    .join-club-form-overlay {
        width: min(80vw, calc(75vh * 1016 / 1530)) !important;
        height: calc(min(80vw, calc(75vh * 1016 / 1530)) * 1530 / 1016) !important;
        min-width: 70vw !important;
        min-height: calc(70vw * 1530 / 1016) !important;
        max-width: 85vw !important;
        max-height: calc(85vw * 1530 / 1016) !important;
    }


    /* Enlarge hanging cards to 20vw for narrow screens */
    .join-club-hanging-image,
    .tv-guide-hanging-image,
    .about-hanging-image,
    .credits-hanging-image,
    .freestuff-hanging-image {
        width: 20vw !important;
        height: calc(20vw * 1570/1024) !important;
        max-width: 20vw !important;
        max-height: calc(20vw * 1570/1024) !important;
    }

    /* TV Guide 25% larger when detached (controlled by detached class) */
    .tv-guide-hanging-image.tv-guide-detached {
        width: 25vw !important;
        height: calc(25vw * 1570/1024) !important;
        max-width: 25vw !important;
        max-height: calc(25vw * 1570/1024) !important;
    }

    /* Make all card enlargements same size - consistent with form size */
    .hanging-card-overlay,
    .freestuff-content-overlay {
        width: min(80vw, calc(75vh * 1016 / 1530)) !important;
        height: calc(min(80vw, calc(75vh * 1016 / 1530)) * 1530 / 1016) !important;
        min-width: 70vw !important;
        min-height: calc(70vw * 1530 / 1016) !important;
        max-width: 85vw !important;
        max-height: calc(85vw * 1530 / 1016) !important;
    }

    /* Fix Free Stuff text sizing on narrow screens */
    .freestuff-content-overlay.active .freestuff-content {
        font-size: clamp(2.5vw, 4vw, 5vw) !important;
        line-height: 1.3 !important;
        padding: 4vw !important;
    }

    .freestuff-content-overlay.active .freestuff-content h3 {
        font-size: clamp(4vw, 6vw, 7vw) !important;
        margin-bottom: 2vw !important;
    }

    .freestuff-content-overlay.active .freestuff-content a {
        font-size: clamp(2.2vw, 3.5vw, 4.5vw) !important;
        margin-bottom: 1.5vw !important;
        line-height: 1.4 !important;
    }

    /* TV Guide detached size is controlled by JavaScript inline styles, not CSS */

    /* Bottom menu: already sized at 95vw in base CSS, just adjust vertical position */
    .hanging-bottom-menu {
        bottom: 2vh !important; /* Slightly less margin on narrow screens */
    }

}


/* === INTERMEDIATE WINDOW OPTIMIZATION === */
/* For aspect ratios 0.8 to 1.27 */
@media screen and (min-aspect-ratio: 0.8) and (max-aspect-ratio: 1.27) {

    /* TV scales to 50vw */
    .tv-container {
        width: min(50vw, calc(95vh * 1686 / 1621)) !important;
        height: calc(min(50vw, calc(95vh * 1686 / 1621)) * 1621 / 1686) !important;
    }

    /* Fix hanging cards at 4vh from top */
    .about-hanging-trigger,
    .credits-hanging-trigger,
    .freestuff-hanging-trigger,
    .join-club-trigger,
    .tv-guide-trigger {
        top: 4vh !important;
    }
}

/* === WIDE SCREEN OPTIMIZATION === */
/* For aspect ratios 1.45 and higher */
@media screen and (min-aspect-ratio: 145/100) {


    /* TV gradually smaller on wide screens - smooth scaling */
    .tv-container {
        width: min(clamp(40vw, 45vw, 48vw), calc(95vh * 1686 / 1621));
        height: calc(min(clamp(40vw, 45vw, 48vw), calc(95vh * 1686 / 1621)) * 1621 / 1686);
    }

    .tv-shadow {
        left: calc(50% + (0 / 1686 - 0.5) * min(clamp(40vw, 45vw, 48vw), calc(95vh * 1686 / 1621)));
        top: calc(50% + (0 / 1621 - 0.5) * calc(min(clamp(40vw, 45vw, 48vw), calc(95vh * 1686 / 1621)) * 1621 / 1686));
        width: calc(3136 / 1686 * min(clamp(40vw, 45vw, 48vw), calc(95vh * 1686 / 1621)));
        height: calc(3136 / 1686 * min(clamp(40vw, 45vw, 48vw), calc(95vh * 1686 / 1621)) / 1.9346375077);
    }

    .volume-control {
        left: calc(50% + (141 / 1686 - 0.5) * min(clamp(40vw, 45vw, 48vw), calc(95vh * 1686 / 1621)));
        top: calc(50% + (1397 / 1621 - 0.5) * calc(min(clamp(40vw, 45vw, 48vw), calc(95vh * 1686 / 1621)) * 1621 / 1686));
        width: calc(8 / 1686 * min(clamp(40vw, 45vw, 48vw), calc(95vh * 1686 / 1621)));
        height: calc(160 / 1621 * calc(min(clamp(40vw, 45vw, 48vw), calc(95vh * 1686 / 1621)) * 1621 / 1686));
    }

    /* Allow clicks to pass through TV elements to reach hanging cards */
    .tv-shadow {
        pointer-events: none !important;
    }

    /* Hanging cards smaller on wide screens - but not when detached */
    .freestuff-hanging-image,
    .about-hanging-image,
    .credits-hanging-image,
    .join-club-hanging-image,
    .tv-guide-hanging-image:not(.tv-guide-trigger.detached .tv-guide-hanging-image) {
        width: 7vw !important;
        height: calc(7vw * 1570/1024) !important;
        max-width: 7vw !important;
        max-height: calc(7vw * 1570/1024) !important;
    }

    /* Ensure hanging cards remain clickable */
    .freestuff-hanging-image,
    .about-hanging-image,
    .credits-hanging-image,
    .join-club-hanging-image,
    .tv-guide-hanging-image {
        pointer-events: all !important;
    }

    /* TV GUIDE DETACHED SIZING IS CONTROLLED BY JAVASCRIPT - DO NOT ADD CSS HERE */

    /* Join Club - leftmost position */
    .join-club-trigger {
        left: 10vw !important;
    }

    /* About - left side */
    .about-hanging-trigger {
        left: 20vw !important;
    }

    /* Credits - right side */
    .credits-hanging-trigger {
        left: 70vw !important;
    }

    /* Free Stuff - far right */
    .freestuff-hanging-trigger {
        left: 80vw !important;
    }

    /* TV Guide - rightmost position */
    .tv-guide-trigger {
        left: 90vw !important;
    }

}