/* 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;
}

/*
 * When NOT installed as PWA (e.g. Chrome Android in browser tab): make body the scroll
 * container so the first screen can scroll. Standalone and game pages override below.
 */
@media not (display-mode: standalone) {
    html {
        height: 100%;
    }
    body {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        box-sizing: border-box;
    }
}

/* PWA standalone mode specific fixes for pull-to-refresh flash and viewport sizing */
@media (display-mode: standalone) {
    /* Lock horizontal scrolling at root level and constrain height */
    html {
        position: relative;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden !important;
        /* Use dynamic viewport height to account for system UI in PWA mode */
        height: 100vh; /* Fallback for browsers that don't support dvh */
        height: 100dvh; /* Dynamic viewport height (excludes browser/system UI) - overrides vh if supported */
        max-height: 100vh; /* Fallback for browsers that don't support dvh */
        max-height: 100dvh; /* Prevent exceeding viewport - overrides vh if supported */
    }
    
    body {
        /* Lock body to viewport dimensions 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;
        /* Use dynamic viewport height to account for system UI in PWA mode */
        height: 100vh; /* Fallback for browsers that don't support dvh */
        height: 100dvh; /* Dynamic viewport height (excludes browser/system UI) - overrides vh if supported */
        max-height: 100vh; /* Fallback for browsers that don't support dvh */
        max-height: 100dvh; /* Prevent exceeding viewport - overrides vh if supported */
        /* Ensure safe area insets don't cause overflow */
        padding-left: env(safe-area-inset-left, 0);
        padding-right: env(safe-area-inset-right, 0);
        padding-top: env(safe-area-inset-top, 0);
        padding-bottom: env(safe-area-inset-bottom, 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;
    }
    
    /* Override Tailwind's min-h-screen to use dynamic viewport height in PWA mode */
    .min-h-screen {
        min-height: 100vh; /* Fallback for browsers that don't support dvh */
        min-height: 100dvh; /* Dynamic viewport height (excludes browser/system UI) - overrides vh if supported */
    }
    
    /* Game pages in PWA standalone mode - use actual viewport height from JavaScript */
    html:has(.game-wrapper),
    html:has(.game2-wrapper),
    html:has(.game3-wrapper),
    html:has(.game4-wrapper),
    html:has(.game5-wrapper),
    html:has(.game6-wrapper),
    html:has(.game7-wrapper),
    html:has(.game8-wrapper),
    html:has(.game9-wrapper) {
        /* Use actual viewport height from JavaScript - ensures perfect fit in PWA standalone mode */
        height: var(--actual-vh, 100svh) !important;
        max-height: var(--actual-vh, 100svh) !important;
        overflow: hidden !important;
    }
    
    body:has(.game-wrapper),
    body:has(.game2-wrapper),
    body:has(.game3-wrapper),
    body:has(.game4-wrapper),
    body:has(.game5-wrapper),
    body:has(.game6-wrapper),
    body:has(.game7-wrapper),
    body:has(.game8-wrapper),
    body:has(.game9-wrapper) {
        /* Remove safe area padding on game pages - games should fill the screen */
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        /* Override min-h-screen class to prevent it from making body taller than viewport */
        min-height: 0 !important;
        /* Use actual viewport height from JavaScript - ensures perfect fit in PWA standalone mode */
        height: var(--actual-vh, 100svh) !important;
        max-height: var(--actual-vh, 100svh) !important;
        overflow: hidden !important;
        box-sizing: border-box;
    }
    
    /* Game wrappers in standalone mode - use actual viewport height from JavaScript */
    .game-wrapper,
    .game2-wrapper,
    .game3-wrapper,
    .game4-wrapper,
    .game5-wrapper,
    .game6-wrapper,
    .game7-wrapper,
    .game8-wrapper,
    .game9-wrapper {
        /* Use CSS custom property set by JavaScript with actual viewport height */
        height: var(--actual-vh, 100svh) !important;
        max-height: var(--actual-vh, 100svh) !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),
html:has(.game7-wrapper),
html:has(.game8-wrapper),
html:has(.game9-wrapper) {
    /* Lock vertical scrolling on mobile devices */
    overflow-y: hidden !important;
    height: 100vh; /* Fallback for browsers that don't support dvh */
    height: 100dvh; /* Use dynamic viewport height (excludes browser UI on mobile) - overrides vh if supported */
    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),
body:has(.game7-wrapper),
body:has(.game8-wrapper),
body:has(.game9-wrapper) {
    /* Lock vertical scrolling on mobile devices - prevent bounce/overscroll */
    overflow-y: hidden !important;
    height: 100vh; /* Fallback for browsers that don't support dvh */
    height: 100dvh; /* Use dynamic viewport height (excludes browser UI on mobile) - overrides vh if supported */
    max-height: 100vh; /* Fallback for browsers that don't support dvh */
    max-height: 100dvh; /* Prevent exceeding viewport - overrides vh if supported */
    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,
.game7-wrapper,
.game8-wrapper,
.game9-wrapper {
    /* Ensure game wrapper doesn't exceed viewport height */
    max-height: 100vh; /* Fallback for browsers that don't support dvh */
    max-height: 100dvh; /* Use dynamic viewport height (excludes browser UI on mobile) - overrides vh if supported */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Prevent overscroll bounce */
    overscroll-behavior-y: contain;
}