/* Main stylesheet */
/* Tailwind CSS directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom styles below */

/* Prevent horizontal overflow and flash during pull-to-refresh */
html {
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
    width: 100%;
}

body {
    overflow-x: hidden;
    max-width: 100vw;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Prevent overscroll bounce on mobile */
body {
    overscroll-behavior-y: contain;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y; /* Only allow vertical panning, prevent horizontal */
}

/* Ensure fixed/absolute positioned elements respect viewport */
[class*="fixed"], [class*="absolute"] {
    max-width: 100vw;
}

/* Specifically constrain top fixed elements to prevent horizontal flash */
#update-banner {
    max-width: calc(100vw - 1rem) !important;
    box-sizing: border-box;
    will-change: transform;
}

#install-btn {
    max-width: calc(100vw - 1rem) !important;
    box-sizing: border-box;
}

/* Prevent container from causing overflow */
.container {
    max-width: 100vw;
    box-sizing: border-box;
}

/* PWA standalone mode specific fixes for pull-to-refresh flash */
@media (display-mode: standalone) {
    /* Lock horizontal scrolling at root level */
    html {
        position: relative;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden !important;
    }
    
    body {
        /* Lock body to viewport width but don't break layout */
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        overflow-x: hidden !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y pinch-zoom; /* Only allow vertical panning, prevent horizontal */
        position: relative;
        margin: 0;
        padding: 0;
        /* Ensure safe area insets don't cause overflow */
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
        box-sizing: border-box;
    }
    
    /* Ensure fixed elements are strictly constrained */
    #update-banner {
        max-width: calc(100vw - 2rem) !important;
        box-sizing: border-box;
    }
    
    #install-btn {
        max-width: calc(100vw - 1rem) !important;
        box-sizing: border-box;
    }
}

/* Volume slider styling */
#volume-slider {
    -webkit-appearance: none;
    appearance: none;
}

#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2563eb;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

#volume-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #2563eb;
    cursor: pointer;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Prevent vertical scrolling/bouncing on game pages (mobile) */
/* Target game pages by checking for game wrapper classes using :has() selector */
html:has(.game-wrapper),
html:has(.game2-wrapper),
html:has(.game3-wrapper),
html:has(.game4-wrapper),
html:has(.game5-wrapper),
html:has(.game6-wrapper) {
    /* Lock vertical scrolling on mobile devices */
    overflow-y: hidden !important;
    height: 100vh;
    overscroll-behavior-y: none !important;
    overscroll-behavior-x: none;
}

body:has(.game-wrapper),
body:has(.game2-wrapper),
body:has(.game3-wrapper),
body:has(.game4-wrapper),
body:has(.game5-wrapper),
body:has(.game6-wrapper) {
    /* Lock vertical scrolling on mobile devices - prevent bounce/overscroll */
    overflow-y: hidden !important;
    height: 100vh;
    max-height: 100vh;
    width: 100%;
    overscroll-behavior-y: none !important;
    overscroll-behavior-x: none;
    touch-action: pan-x pan-y; /* Allow touch but prevent overscroll bounce */
}

/* Fallback for browsers that don't support :has() - target game wrappers directly */
/* Ensure game wrapper itself doesn't cause scrolling beyond viewport */
.game-wrapper,
.game2-wrapper,
.game3-wrapper,
.game4-wrapper,
.game5-wrapper,
.game6-wrapper {
    /* Ensure game wrapper doesn't exceed viewport height */
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Prevent overscroll bounce */
    overscroll-behavior-y: contain;
}