/**
 * RESPONSIVE BUBBLE SHOOTER STYLES
 * 
 * AI GUIDANCE: This file controls the responsive layout and visual styling.
 * 
 * KEY SECTIONS FOR AI MODIFICATION:
 * - Reset and Base Styles: Overall page foundation
 * - Body Styles: Background and main layout
 * - Game Container: Centering and responsive behavior
 * - Canvas Styles: Game area appearance and scaling
 * - Typography: Text styling for title and instructions
 * - Responsive Breakpoints: Mobile and tablet adaptations
 * 
 * MODIFY FOR:
 * - Different color schemes (borders, shadows, text colors)
 * - Layout adjustments (flexbox properties, spacing)
 * - Mobile behavior (media queries, touch-friendly sizing)
 * - Visual effects (shadows, borders, transitions)
 * 
 * DO NOT MODIFY:
 * - Core responsive scaling logic (maintained in script.js)
 * - Canvas dimension calculations (controlled by constants.js)
 */

/* Reset and base styles - AI: Foundation styles, usually don't modify */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* AI: Ensures consistent sizing across browsers */
}

/* Body styles - AI: Modify for overall page appearance and layout */
body {
    font-family: Verdana, Arial, sans-serif;
    /* AI: Change font family here or use GAME_CONFIG.FONTS.PRIMARY */

    /* AI: Background will be set dynamically from gameConfig.js */
    /* Default properties for when background images are loaded */
    background-size: cover;
    /* AI: How background image fills screen */
    background-position: center;
    /* AI: Background image positioning */
    background-repeat: no-repeat;
    /* AI: Prevent background tiling */
    background-attachment: fixed;
    /* AI: Background stays fixed during scroll */

    /* AI: Layout and viewport setup */
    min-height: 100vh;
    /* AI: Full viewport height */
    display: flex;
    /* AI: Flexbox for centering */
    flex-direction: column;
    /* AI: Stack elements vertically */
    justify-content: center;
    /* AI: Center vertically */
    align-items: center;
    /* AI: Center horizontally */
    overflow: hidden;
    /* AI: Prevent scrollbars */

    /* AI: Smooth transition when background changes */
    transition: background-image 0.3s ease-in-out;

    /* Night sky stars effect */
    position: relative;
}

/* Night sky stars - AI: Creates animated twinkling stars */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        radial-gradient(2px 2px at 20px 30px, #eee, transparent),
        radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(1px 1px at 90px 40px, #fff, transparent),
        radial-gradient(1px 1px at 130px 80px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 160px 30px, #fff, transparent),
        radial-gradient(1px 1px at 200px 90px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 240px 50px, #eee, transparent),
        radial-gradient(1px 1px at 280px 10px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 320px 70px, #fff, transparent),
        radial-gradient(2px 2px at 360px 40px, rgba(255, 255, 255, 0.8), transparent);
    background-repeat: repeat;
    background-size: 400px 200px;
    animation: twinkle 4s infinite ease-in-out alternate;
    pointer-events: none;
    z-index: 0;
}

/* Twinkling animation for stars */
@keyframes twinkle {
    0% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 0.3;
    }
}

/* Moon in the night sky - AI: Creates a realistic moon with subtle glow */
/* Hidden when background image is loaded */
body::after {
    content: '';
    position: fixed;
    bottom: 15%;
    right: 20%;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle at 20% 30%,
            #d3d3d3 0%,
            #c0c0c0 30%,
            #a8a8a8 50%,
            #808080 70%,
            transparent 75%);
    border-radius: 50%;
    box-shadow:
        inset 20px 0px 30px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(255, 255, 255, 0.2),
        0 0 40px rgba(255, 255, 255, 0.15),
        0 0 60px rgba(255, 255, 255, 0.1);
    animation: moonGlow 8s infinite ease-in-out alternate;
    pointer-events: none;
    z-index: 0;
}

/* Hide stars and moon when background image is loaded */
body.background-image-loaded::before,
body.background-image-loaded::after {
    display: none;
}
    z-index: 0;
}

/* Moon glow animation */
@keyframes moonGlow {
    0% {
        opacity: 0.5;
        box-shadow:
            inset 20px 0px 30px rgba(0, 0, 0, 0.6),
            0 0 20px rgba(255, 255, 255, 0.2),
            0 0 40px rgba(255, 255, 255, 0.15),
            0 0 60px rgba(255, 255, 255, 0.1);
    }

    100% {
        opacity: 0.8;
        box-shadow:
            inset 20px 0px 30px rgba(0, 0, 0, 0.5),
            0 0 30px rgba(255, 255, 255, 0.3),
            0 0 50px rgba(255, 255, 255, 0.2),
            0 0 80px rgba(255, 255, 255, 0.15);
    }
}

/* Game container - AI: Modify for main layout structure */
.game-container {
    display: flex;
    /* AI: Flexbox container */
    flex-direction: column;
    /* AI: Stack title, instructions, canvas vertically */
    align-items: center;
    /* AI: Center all content horizontally */
    justify-content: center;
    /* AI: Center all content vertically */
    width: 100%;
    /* AI: Full width of viewport */
    height: 100vh;
    /* AI: Full height of viewport */
    padding: 10px;
    /* AI: Space from screen edges */
}

/* Canvas styles - AI: Full screen canvas */
#viewport {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw !important;
    /* AI: Use 100vh for iframe compatibility, no safe-area adjustment in iframes */
    height: 100vh !important;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    /* AI: Transparent to show body background */
    display: block;
    /* AI: Block element display */
    z-index: 1;
    /* AI: Ensure canvas is on top */

    /* AI: Prevent browser from applying aspect ratio restrictions */
    aspect-ratio: unset !important;
    max-width: 100vw !important;
    max-height: 100vh !important;

    /* AI: Smooth rendering to match background */
    image-rendering: auto;
    /* AI: Smooth image scaling */
    image-rendering: smooth;
    /* AI: Anti-aliased rendering */

    /* AI: Smooth scaling for different browsers */
    -ms-interpolation-mode: bicubic;

    /* Hardware acceleration for smooth rendering */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

/* Responsive breakpoints - Canvas always full screen */
@media screen and (max-width: 768px) {
    #viewport {
        width: 100vw !important;
        height: 100vh !important;
    }
}

@media screen and (max-width: 480px) {
    #viewport {
        width: 100vw !important;
        height: 100vh !important;
    }
}

/* Landscape orientation on mobile */
@media screen and (max-height: 500px) and (orientation: landscape) {
    #viewport {
        width: 100vw !important;
        height: 100vh !important;
    }
}

/* High DPI displays */
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min-resolution: 192dpi) {
    #viewport {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}


/* Loading indicator */
.loading {
    color: white;
    font-size: 1.1rem;
    text-align: center;
    margin-top: 10px;
}


/* Touch-friendly styles for mobile */
@media (hover: none) and (pointer: coarse) {
    #viewport {
        touch-action: none;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }
}

/* Ensure canvas maintains aspect ratio */
.canvas-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex: 1;
    min-height: 0;
    position: relative;
}