/* ==========================================================================
   AQUA RESCUE - MAIN STYLESHEET
   This file contains all the styling for the game interface, menus, and modals.
   It is fully responsive and optimized for both desktop and mobile devices.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL VARIABLES & FONTS
   -------------------------------------------------------------------------- */
:root {
    /* Color Palette */
    --primary: #05668d;        /* Deep blue - Used for main text and borders */
    --secondary: #028090;      /* Lighter blue - Used for secondary text shadows */
    --accent: #FFD93D;         /* Bright yellow - Used for primary buttons and logo */
    --danger: #FF6B6B;         /* Soft red - Used for destructive actions or warnings */
    --success: #228B22;        /* Forest green - Used for success states (e.g., copied link) */
    --text: #ffffff;           /* White - Used for light text */
    
    /* UI Backgrounds */
    --panel-bg: rgba(255, 255, 255, 0.95); /* Slightly transparent white for modals */
    
    /* Typography */
    --font-title: 'Lilita One', cursive;   /* Chunky, playful font for headings and score */
    --font-text: 'Nunito', sans-serif;     /* Clean, readable font for paragraphs and descriptions */
}

/* --------------------------------------------------------------------------
   2. CORE SETUP & RESET
   -------------------------------------------------------------------------- */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background: #87ceeb; /* Sky blue fallback background */
    overflow: hidden;    /* Prevents scrolling during gameplay */
    touch-action: none;  /* Disables default browser touch actions (like pull-to-refresh) */
    user-select: none;   /* Prevents text selection on UI elements */
    -webkit-user-select: none; /* Safari support for user-select */
}

/* Main container holding the entire game */
.scene { 
    position: relative; 
    width: 100vw; 
    height: 100vh; 
    overflow: hidden; 
}

/* --------------------------------------------------------------------------
   3. CANVAS LAYERS (The Game World)
   -------------------------------------------------------------------------- */
/* General canvas styling to fill the screen */
canvas { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
}

/* Background Canvas: Renders water, waves, and distant objects */
#beachCanvas { 
    z-index: 1; 
}

/* Foreground Canvas: Renders objects that should appear in front of the player */
#fgCanvas { 
    z-index: 15; 
    pointer-events: none; /* Clicks should pass through to the UI */
}

/* --------------------------------------------------------------------------
   4. PLAYER SPRITE (In-Game Character)
   -------------------------------------------------------------------------- */
.pudgy-sprite {
    position: absolute;
    width: clamp(120px, 15vw, 180px); /* Responsive sizing based on viewport width */
    height: auto;
    transform: translate(-50%, -50%); /* Centers the image on its X/Y coordinates */
    pointer-events: none; /* Ensures the player image doesn't block touch events */
    z-index: 10; /* Sandwiched between beachCanvas (1) and fgCanvas (15) */
    filter: drop-shadow(0 18px 18px rgba(0, 70, 100, 0.4)); /* Dynamic shadow for depth */
    transition: transform 0.1s ease-out; /* Smooth rotation during jumps */
}

/* --------------------------------------------------------------------------
   5. TOP CONTROLS (Audio & Fullscreen)
   -------------------------------------------------------------------------- */
.top-controls { 
    position: absolute; 
    top: 20px; 
    right: 20px; 
    z-index: 80; /* High z-index to always be clickable */
    display: flex; 
    gap: 10px; 
}

.icon-btn {
    width: 50px; 
    height: 50px; 
    border-radius: 12px; 
    border: none; 
    background: #fff;
    color: var(--primary); 
    font-size: 1.5rem; 
    font-weight: 900; 
    cursor: pointer;
    box-shadow: 0 6px 0 #ccc, 0 10px 10px rgba(0,0,0,0.1); /* Arcade button 3D effect */
    display: flex; 
    align-items: center; 
    justify-content: center;
    transition: all 0.1s; 
    -webkit-tap-highlight-color: transparent; /* Removes blue tap highlight on mobile */
}

/* Pressed state for top buttons */
.icon-btn:active { 
    transform: translateY(6px); 
    box-shadow: 0 0 0 #ccc; 
}

/* Disabled/Off state for audio buttons */
.icon-btn.disabled { 
    background: #ffcccc; 
    color: #cc0000; 
    box-shadow: 0 6px 0 #cc9999; 
}

/* --------------------------------------------------------------------------
   6. START SCREEN & MENU
   -------------------------------------------------------------------------- */
/* Container blocking interactions with the game while in menu */
.start-screen-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh; 
    z-index: 100; /* Stays above the game canvases */
    pointer-events: none; /* Lets clicks pass through empty spaces */
}

/* Re-enables pointer events for actual UI elements inside the start screen */
.start-screen-container > * { 
    pointer-events: auto; 
}

/* Top Left Best Score Badge */
.best-score-top-left {
    position: absolute; 
    top: 20px; 
    left: 20px; 
    background: var(--accent); 
    color: var(--primary);
    border: 4px solid #fff; 
    border-radius: 15px; 
    padding: 10px 25px;
    font-family: var(--font-title); 
    font-size: 1.8rem; 
    text-transform: uppercase;
    box-shadow: 0 8px 15px rgba(0,0,0,0.2); 
    z-index: 50;
}

/* 3D Game Logo */
.game-logo {
    position: absolute; 
    top: 22vh; 
    left: 50%;
    /* Creates a 3D perspective effect making the left side larger */
    transform: translate(-50%, -50%) perspective(600px) rotateY(25deg) rotateZ(-4deg);
    font-family: var(--font-title); 
    font-size: clamp(3.5rem, 10vw, 10rem);
    color: var(--accent); 
    text-align: center; 
    line-height: 0.9;
    text-shadow: 3px 3px 0 var(--primary), 6px 6px 0 var(--secondary), 10px 10px 25px rgba(0,0,0,0.5);
    width: 100%; 
    z-index: 10;
}

/* Distinct sizing for the two words in the logo */
.logo-top { font-size: 1.1em; display: block; }
.logo-bottom { font-size: 0.8em; display: block; }

/* Large Character on Start Screen */
.start-character {
    position: absolute; 
    left: 50%; 
    top: calc(60vh - 15px); /* Positioned exactly on the water horizon line */
    transform: translate(-50%, -50%); 
    width: clamp(180px, 25vw, 300px);
    z-index: 20; 
    animation: floatStart 3s ease-in-out infinite; /* Floating animation */
    filter: drop-shadow(0 30px 25px rgba(0, 70, 100, 0.5)); 
    pointer-events: none; /* Prevents character from blocking the play button */
}

/* Floating keyframes for start character */
@keyframes floatStart { 
    0%, 100% { transform: translate(-50%, -50%); } 
    50% { transform: translate(-50%, calc(-50% - 15px)); } 
}

/* Play Button Wrapper */
.btn-play-container {
    position: absolute; 
    /* Uses max() to ensure button never falls below 130px from bottom, protecting footer */
    bottom: calc(max(15vh, 130px)); 
    left: 50%;
    transform: translateX(-50%); 
    width: 100%; 
    max-width: 320px;
    z-index: 30; /* Above the character */
    padding: 0 20px; 
    box-sizing: border-box;
}

/* Main Call-to-Action Button with heartbeat pulse */
.btn-play-pulse { 
    animation: pulseBtn 1.5s infinite; 
    width: 100%; 
}

@keyframes pulseBtn { 
    0%, 100% { transform: scale(1); } 
    50% { transform: scale(1.05); } 
}

/* --------------------------------------------------------------------------
   7. FOOTER & SOCIAL MEDIA SHARE
   -------------------------------------------------------------------------- */
.start-footer {
    position: absolute; 
    bottom: 25px; 
    left: 50%; 
    transform: translateX(-50%);
    z-index: 50; 
    text-align: center;
}

.start-footer p, .game-over-share-text {
    font-family: var(--font-title); 
    color: var(--text); 
    margin: 0 0 10px 0;
    font-size: 1.2rem; 
    letter-spacing: 1px; 
    text-shadow: 0 3px 5px rgba(0,0,0,0.5);
}

.social-share { 
    display: flex; 
    justify-content: center; 
    gap: 15px; 
}

.social-btn {
    width: 45px; 
    height: 45px; 
    border-radius: 50%; 
    border: none; 
    cursor: pointer;
    font-weight: bold; 
    color: white; 
    font-size: 1.2rem; 
    box-shadow: 0 5px 0 rgba(0,0,0,0.3);
    transition: transform 0.1s;
}

.social-btn:active { 
    transform: translateY(5px); 
    box-shadow: 0 0 0; 
}

/* Brand colors for social buttons */
.btn-fb { background: #1877F2; } 
.btn-tw { background: #000000; } 
.btn-ig { background: #E4405F; }

/* --------------------------------------------------------------------------
   8. IN-GAME UI
   -------------------------------------------------------------------------- */
.game-ui {
    position: absolute; 
    top: 20px; 
    left: 24px; 
    z-index: 20;
    font-family: var(--font-title); 
    color: var(--text);
    text-shadow: 0 4px 0 var(--primary), 0 0 10px rgba(0,0,0,0.5); 
    display: none; /* Hidden until game starts */
}

.score-board { 
    font-size: 2.5rem; 
    letter-spacing: 2px; 
}

/* --------------------------------------------------------------------------
   9. MODALS (Popups for Game Over, Tutorial, etc.)
   -------------------------------------------------------------------------- */
.game-modal {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%);
    background: var(--panel-bg); 
    backdrop-filter: blur(10px); /* Frosted glass effect */
    padding: 35px;
    border-radius: 25px; 
    text-align: center; 
    font-family: var(--font-text);
    color: var(--primary); 
    box-shadow: inset 0 -10px 0 rgba(0,0,0,0.1), 0 20px 50px rgba(0,0,0,0.5);
    z-index: 9000; /* Extremely high to stay above game elements */
    display: none; 
    border: 6px solid #fff; 
    width: 90%; 
    max-width: 400px;
    animation: popIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Bouncy entrance */
}

@keyframes popIn { 
    0% { transform: translate(-50%, -50%) scale(0.5); opacity: 0; } 
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 
}

.game-modal h2 { 
    font-family: var(--font-title); 
    font-size: 2.8rem; 
    margin: 0 0 15px 0; 
    text-transform: uppercase; 
    text-shadow: 0 3px 0 rgba(0,0,0,0.1); 
}

.modal-description {
    font-weight: bold; 
    margin-bottom: 15px;
}

/* Stats box used in Game Over screen */
.stats-box { 
    background: #f4f4f4; 
    border-radius: 15px; 
    padding: 15px; 
    margin-bottom: 25px; 
    box-shadow: inset 0 4px 0 rgba(0,0,0,0.05); 
}

.stats-box div { 
    font-family: var(--font-title); 
    font-size: 1.8rem; 
    color: #ff9f1c; 
    text-shadow: 0 2px 0 rgba(0,0,0,0.1); 
}

.best-score-display {
    font-size: 1.2rem; 
    color: #666; 
    margin-top: 5px;
}

/* --------------------------------------------------------------------------
   10. GENERIC BUTTON STYLES
   -------------------------------------------------------------------------- */
.btn-game {
    font-family: var(--font-title); 
    background: var(--accent); 
    color: #b35a00;
    border: none; 
    padding: 15px; 
    font-size: 1.6rem; 
    border-radius: 15px;
    cursor: pointer; 
    text-transform: uppercase; 
    box-shadow: 0 8px 0 #cc8f00, 0 15px 20px rgba(0,0,0,0.2);
    transition: all 0.1s; 
    width: 100%; 
    margin-bottom: 10px; 
    -webkit-tap-highlight-color: transparent;
}

.btn-game:active { 
    transform: translateY(8px); 
    box-shadow: 0 0px 0 #cc8f00, 0 5px 10px rgba(0,0,0,0.2); 
}

/* Secondary Button (Blue variant) */
.btn-secondary { 
    background: var(--primary); 
    color: #fff; 
    box-shadow: 0 8px 0 #024866, 0 15px 20px rgba(0,0,0,0.2); 
}

.btn-secondary:active { 
    box-shadow: 0 0px 0 #024866, 0 5px 10px rgba(0,0,0,0.2); 
}

/* Button Layouts within Modals */
.game-over-buttons {
    display: flex; 
    gap: 10px;
}

.game-over-buttons .btn-game {
    font-size: 1.4rem;
}

.game-over-share-text {
    margin-top: 15px; 
    font-size: 1.1rem; 
    font-family: var(--font-title); 
    color: var(--primary);
}

.social-share-margin {
    margin-top: 5px;
}

/* --------------------------------------------------------------------------
   11. TUTORIAL GRID STYLES
   -------------------------------------------------------------------------- */
.tutorial-grid { 
    display: grid; 
    grid-template-columns: 1fr; 
    gap: 12px; 
    margin-bottom: 25px; 
}

.tut-item { 
    background: #fff; 
    border-radius: 15px; 
    padding: 10px; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
    text-align: left; 
}

.tut-icon { 
    width: 50px; 
    height: 50px; 
    background: #e0f7fa; 
    border-radius: 10px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-size: 2rem; 
    animation: floatTut 2s infinite ease-in-out; 
}

.ramp-icon {
    background: #A0522D; 
    height: 20px; 
    border-radius: 5px; 
    margin-top: 15px;
}

@keyframes floatTut { 
    0%, 100% { transform: translateY(0); } 
    50% { transform: translateY(-5px); } 
}

.tut-text h3 { font-family: var(--font-title); margin: 0; font-size: 1.2rem; color: #000; }
.tut-text p { font-family: var(--font-text); margin: 0; font-size: 0.9rem; font-weight: bold; color: #666; }

.tutorial-footer-text {
    font-size: 0.95rem; 
    color: #666; 
    font-weight: bold; 
    margin-bottom: 15px;
}

/* --------------------------------------------------------------------------
   12. INPUT GROUPS (Instagram Copy Link)
   -------------------------------------------------------------------------- */
.modal-input-group { 
    display: flex; 
    gap: 10px; 
    margin-bottom: 15px; 
    width: 100%; 
}

.modal-input { 
    flex: 1; 
    padding: 12px; 
    border-radius: 10px; 
    border: 2px solid #ccc; 
    font-family: var(--font-text); 
    font-size: 1rem; 
    color: #333; 
    box-sizing: border-box; 
    margin-bottom: 0;
}

.btn-copy { 
    width: auto; 
    margin-bottom: 0; 
    font-size: 1.2rem; 
    padding: 0 20px; 
}

/* --------------------------------------------------------------------------
   13. MOBILE TOUCH CONTROLS
   -------------------------------------------------------------------------- */
.mobile-controls { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100vw; 
    height: 100vh;
    z-index: 9999; 
    display: none; /* Only displayed on touch devices during gameplay */
    pointer-events: none; /* Invisible layer */
}

.control-btn { 
    position: absolute; 
    bottom: 30px;
    width: 80px; 
    height: 80px; 
    border-radius: 50%; 
    background: rgba(255, 255, 255, 0.25); 
    backdrop-filter: blur(5px); 
    border: 4px solid rgba(255,255,255,0.7); 
    font-size: 35px; 
    color: #fff; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    cursor: pointer; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); 
    pointer-events: auto; /* Only the buttons capture touch events */
    -webkit-tap-highlight-color: transparent; 
    user-select: none;
}

.control-btn:active { 
    background: rgba(255, 255, 255, 0.6); 
    transform: scale(0.95); 
}

/* Specific placement for Up/Down buttons */
#btnUp { left: 30px; } 
#btnDown { right: 30px; }

/* --------------------------------------------------------------------------
   14. RESPONSIVE DESIGN (Media Queries)
   -------------------------------------------------------------------------- */
/* Target tablets and mobile phones */
@media (max-width: 1024px) {
    /* Scale down top controls */
    .top-controls .icon-btn { width: 42px; height: 42px; font-size: 1.2rem; }
    
    /* Adjust in-game score size */
    .score-board { font-size: 1.8rem; }
    
    /* Adjust top-left best score badge */
    .best-score-top-left { font-size: 1.2rem; padding: 8px 15px; }
    
    /* Adjust and lower mobile controls for better ergonomics */
    .control-btn { width: 70px; height: 70px; font-size: 30px; bottom: 20px; }
    #btnUp { left: 20px; } 
    #btnDown { right: 20px; }
    
    /* Move social share to bottom-left on mobile */
    .start-footer { 
        left: 20px; 
        bottom: 20px; 
        transform: none; 
        text-align: left; 
    }
    
    .start-footer p { font-size: 1rem; }
    .social-share { justify-content: flex-start; gap: 10px; }
    .social-btn { width: 40px; height: 40px; font-size: 1rem; }
    
    /* Ensure the play button doesn't hit the bottom edge on short screens */
    .btn-play-container { bottom: calc(max(10vh, 100px)); }
    
    /* Stack the input and button on the Instagram Modal */
    .modal-input-group { flex-direction: column; } 
    .btn-copy { width: 100%; padding: 15px; }
}