/* Base styles - resets, layouts, safe areas, GPU acceleration */

/* Mobile-native feel */
html, body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #0f172a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    touch-action: none;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    overscroll-behavior: none;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Prevent text selection on all game elements */
#game-ui, #game-ui *, .ui-overlay, .ui-overlay * {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Allow scrolling inside modal content */
.overflow-y-auto {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Modal containers need to allow touch events for scrolling */
.ui-overlay[style*="pointer-events: auto"] {
    touch-action: auto;
}

/* Scrollable modal content areas */
#shop-list,
#rewards-list,
#story-list,
#challenges-list,
#achievements-list,
#leaderboard-list,
#stats-content {
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* Modal inner containers should allow scrolling */
.ui-overlay > div {
    touch-action: auto;
}

/* Fixed modals (z-50) need to capture all touch events */
.ui-overlay.fixed {
    touch-action: auto !important;
}

/* Ensure modal content can scroll on touch */
.ui-overlay.fixed > div {
    touch-action: pan-y pinch-zoom;
}

/* The flex-1 scrollable areas in modals */
.ui-overlay .flex-1.overflow-y-auto {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
}

/* Z-50 modals (high priority) must allow touch scrolling */
.z-50 {
    touch-action: auto !important;
}

.z-50 * {
    /* Allow scrolling on all modal children unless explicitly blocked */
}

/* Specific scrollable containers in modals */
.z-50 [class*="overflow-y-auto"],
.z-50 [class*="overflow-auto"] {
    touch-action: pan-y !important;
    -webkit-overflow-scrolling: touch !important;
}

/* GPU acceleration for smooth animations */
.ui-overlay, #game-container {
    transform: translateZ(0);
    will-change: transform;
}

/* Safe area for iPhone notch/Dynamic Island */
.safe-area-top {
    padding-top: env(safe-area-inset-top, 16px);
}

.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 16px);
}

.safe-area-left {
    padding-left: env(safe-area-inset-left, 16px);
}

.safe-area-right {
    padding-right: env(safe-area-inset-right, 16px);
}

/* Game container */
#game-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 1;
}

/* UI overlay base */
.ui-overlay {
    position: absolute;
    z-index: 10;
    pointer-events: none;
}

.ui-overlay * {
    pointer-events: auto;
}

/* Selected/active buttons should not change on hover */
#settings-modal button.bg-blue-600 {
    background-color: rgb(37 99 235) !important; /* blue-600 - always stays blue when selected */
}

#settings-modal button.bg-blue-600:hover {
    background-color: rgb(37 99 235) !important; /* no hover change for selected buttons */
}

/* Only non-selected buttons get hover effect */
#settings-modal button.bg-slate-700:hover {
    background-color: rgb(71 85 105); /* slate-600 */
}

/* Press feedback for all buttons */
#settings-modal button:active {
    opacity: 0.8;
    transform: scale(0.97);
}

/* Fix sticky hover on touch devices */
@media (hover: none) {
    button:hover {
        background-color: inherit;
    }

    #settings-modal button.bg-slate-700:hover {
        background-color: rgb(51 65 85); /* slate-700 - no hover change on touch */
    }
}

/* ==========================================
   Portrait Mode Lock - Landscape Overlay
   ========================================== */

/* Hidden by default */
#rotate-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.rotate-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.rotate-icon {
    width: 100px;
    height: 100px;
    animation: rotatePhone 2s ease-in-out infinite;
}

.rotate-icon svg {
    width: 100%;
    height: 100%;
}

#rotate-overlay h2 {
    color: white;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
}

#rotate-overlay p {
    color: #94a3b8;
    font-size: 14px;
    margin: 0;
}

@keyframes rotatePhone {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-30deg);
    }
    75% {
        transform: rotate(30deg);
    }
}

/* Show overlay only on mobile devices in landscape orientation */
@media screen and (max-width: 1023px) and (orientation: landscape) {
    #rotate-overlay {
        display: flex;
    }

    /* Hide everything else when in landscape */
    #game-container,
    #game-ui,
    #loading-screen,
    #start-screen,
    .ui-overlay {
        visibility: hidden;
    }
}

/* Also handle based on aspect ratio for more reliability */
@media screen and (max-width: 1023px) and (min-aspect-ratio: 13/9) {
    #rotate-overlay {
        display: flex;
    }

    #game-container,
    #game-ui,
    #loading-screen,
    #start-screen,
    .ui-overlay {
        visibility: hidden;
    }
}