/* ==========================================================================
   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: 70px;
    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: 60px;
    }
    #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;
    }
}