* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

#game-container {
    position: relative;
    width: 360px;
    height: 640px;
    overflow: hidden;
    margin: 0 auto; /* Center on desktop */
}

/* On mobile, make the container fill the screen */
@media only screen and (max-width: 767px) {
    #game-container {
        width: 100vw;
        height: 100vh;
        margin: 0;
    }
}

#menu-wrapper {
    position: absolute;
    top: 10px; /* Match the original top position of #menu-container */
    width: 100%;
    height: auto; /* Let it grow based on content */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Start from the top */
}

canvas {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    transform: translateZ(0);
}

#loading-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;      
    height: 100%;     
    background-color: #000; /* Fallback color */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 30; /* Ensure it appears above game elements */
    transition: opacity 1s ease-out; /* Fade out over 1 second */
}

/*#loading-screen img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}*/

#loading-text {
    position: absolute;
    bottom: 10px;
    right: 10px;
    color: #fff;
    font-family: 'Luckiest Guy', cursive;
    font-size: 18px;
    text-shadow: 1px 1px 2px #000;
}

/* Mobile-specific styles */
@media only screen and (max-width: 767px) {
    html, body {
        width: 100%;
        height: 100%;
        background: #000; /* Fallback to avoid white borders */
    }

    #game-container {
        width: 100%;
        height: 100%;
        margin: 0; /* Remove centering on mobile */
    }

    canvas {
        width: 100%;
        height: 100%;
    }
}

/* Common styling for all UI containers */
#logo-container,
#menu-container,
#scores-container {
    position: absolute;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
    /* Debug Borders - remove when done */
    /* border: 2px dashed red; */
}

/* Player Info Container styling */
#player-info-container {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 0 10px;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Luckiest Guy', cursive;
    text-shadow: 1px 1px 2px #032a0d;
    font-size: 20px;
    color: #fff000;
    -webkit-text-stroke: 0.5px #032a0d;
    z-index: 20;
}

    #player-info-container #player-currency img {
        height: 18px;
        margin-left: 5px;
        margin-top: 5px;
    }

/* Container for coin and its glow */
#coin-glow-container {
    position: relative;
    display: inline-block;
    width: 24px;
    height: 24px;
}

#coin-icon {
    z-index: 2;
}


/* Bounce animation for logo */
@keyframes bounce {
    0%, 100% { transform: translateY(0) translateZ(0); }
    50% { transform: translateY(10px) translateZ(0); }
}

/* Individual container positioning */
#logo-container {
    transform: translateZ(0);
    top: 20px;
    height: 150px;
    background-image: url("assets/menu/logo.png");
    animation: bounce 2s ease-in-out infinite;
    transition: transform 0.1s ease-in-out;
    z-index: 15;
}

    #logo-container:hover {
        animation: none;
        transform: scale(1.05);
    }

    #logo-container.gameplay-hidden {
        animation: none;
    }

/* Make the menu container stack its children vertically */
#menu-container {
    position: relative;
    top: 100px;
    height: 400px;
    width: 100%; /* or set a specific width if needed */
    background-image: url("assets/menu/menu.png");
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Optionally add padding to control spacing */
    padding-top: 20px;
}


@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&display=swap');



#scores-container {
    bottom: 10px;
    height: 150px;
    background-image: url("assets/menu/scores.png");
    letter-spacing: 0.1rem;
    text-shadow: 1px 1px 2px #032a0d;
}

    #logo-container div,
    #menu-container div,
    #scores-container div {
        position: relative;
        z-index: 10;
        color: white;
        font-weight: bold;
    }

#scores-container {
    position: relative;
    margin-top: 80px;
    bottom: 5px;
    height: 150px;
    background-image: url("assets/menu/scores.png");
    border-color: yellow;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px;
    font-family: 'Luckiest Guy', cursive;
    color: white;
}

/* Mobile-specific adjustments */
@media only screen and (max-width: 767px) {
    #game-container {
        width: 100%;
        height: 100%;
        margin: 0;
    }

    #menu-wrapper {
        top: 10px; /* Keep it consistent */
        height: auto; /* Allow it to stretch */
    }

    #menu-container {
        height: 400px; /* Keep fixed height if needed */
    }

    #scores-container {
        margin-top: 100px; /* Ensure some spacing at the bottom on mobile */
    }
}

/* High Score */
.score-header {
    font-size: 15px;
    margin-bottom: 1px;
    text-align: center;
    width: 100%;
}

#high-score {
    font-size: 20px;
    color: #fff000;
    /*-webkit-text-stroke: 0.1px #032a0d;*/
    
}

/* Leaderboard Header */
.leaderboard-header {
    font-size: 12px;
    margin-bottom: 2px;
}

/* Scrollable Leaderboard */
.leaderboard {
    width: 60%;
    height: 120px;
    overflow-y: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 2px;
    background: rgba(0, 0, 0, 0);
}

    .leaderboard::-webkit-scrollbar {
        display: none;
        width: 6px;
    }

    .leaderboard::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.5);
        border-radius: 3px;
    }

/* Leaderboard Entry */
.leaderboard-entry {
    display: flex;
    justify-content: space-between;
    padding: 2px;
    font-size: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* ===== New Styles for Character Selector in the Menu ===== */
#character-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 10px;
    position: absolute;
    overflow: visible;
}

.arrow {
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
}

#right-arrow {
    left: -20px;
}

#left-arrow {
    left: 20px;
}

    .arrow:hover {
        transform: scale(1.2);
    }

    .arrow:active {
        transform: scale(0.95);
    }

#character-display {
    width: 200px;
    height: auto;
    margin: 0 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.character-display.teaser img {
    filter: brightness(0) invert(1);
}

#character-display:hover {
    transform: scale(1.1);
}

#character-display:active {
    transform: scale(0.98);
}

.character-display.locked::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: grayscale(1);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

.character-display.locked::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: grayscale(1);
    z-index: 2;
}

.character-display.locked img {
    filter: grayscale(100%);
    opacity: 0.7;
}

@keyframes character-bounce {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(8px); /* Adjust bounce height */
    }
}

    #character-display img {
        max-width: 100%;
        max-height: 100%;
        animation: character-bounce 2.5s ease-in-out infinite; /* Slightly slower */
    }


#play-button {
    margin-top: 20px; /* Space from the character selector */
    width: 200px; /* Adjust to your sprite's dimensions */
    height: 60px; /* Adjust to your sprite's dimensions */
    background: url("assets/menu/play_button_sprite.png") no-repeat center;
    background-size: contain; /* Ensures the sprite scales correctly */
    border: none;
    font-family: 'Luckiest Guy', cursive;
    font-size: 24px;
    color: #fff; /* Choose a contrasting color */
    cursor: pointer;
    text-shadow: 1px 1px 2px #032a0d; /* Optional: add some text shadow */
    outline: none;
}

    /* Optional: change background position on hover/active if your sprite contains different states */
    #play-button:hover {
        transform: scale(1.1);
    }

    #play-button:active {
        transform: scale(0.95);
    }

    #play-button.purchase-mode {
        background: url("assets/menu/play_button_sprite.png") no-repeat center;
        background-size: contain;
        font-size: 24px;
    }

        #play-button.purchase-mode .price {
            color: #fff000;
            text-shadow: 1px 1px 2px #032a0d;
        }

        #play-button.purchase-mode .coin-icon {
            width: 20px;
            height: 20px;
            filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.5));
        }

#back-button {
    position: absolute;
    left: 10px;
    top: 40px; /* adjust this value to be right under the player name */
    margin-top: 0; /* remove the previous margin */
    /* The rest of the properties remain unchanged */
    width: 40px;
    height: 40px;
    background: url("assets/menu/back_button_sprite.png") no-repeat center;
    background-size: contain;
    border: none;
    font-family: 'Luckiest Guy', cursive;
    font-size: 24px;
    color: #fff;
    /*text-shadow: 1px 1px 2px #032a0d;*/
    cursor: pointer;
    outline: none;
    display: none; /* Hide by default */
}

#back-button:hover {
    transform: scale(1.1);
}

#back-button:active {
    transform: scale(0.95);
}

#music-button {
    position: absolute;
    right: 10px;
    top: 40px; /* adjust this value to be right under the player name */
    margin-top: 0; /* remove the previous margin */
    /* The rest of the properties remain unchanged */
    width: 40px;
    height: 40px;
    background: url("assets/menu/music_off_sprite.png") no-repeat center;
    background-size: contain;
    border: none;
    font-family: 'Luckiest Guy', cursive;
    font-size: 24px;
    color: #fff;
    /*text-shadow: 1px 1px 2px #032a0d;*/
    cursor: pointer;
    outline: none;
    display: none; /* Hide by default */
}

#music-button.music-on {
    background-image: url("assets/menu/music_on_sprite.png");
}
#music-button.music-off {
    background-image: url("assets/menu/music_off_sprite.png");
}

#music-button:hover {
    transform: scale(1.1);
}

#music-button:active {
    transform: scale(0.95);
}

#pause-button {
    position: absolute;
    right: 60px;  /* adjust offset to be next to music button */
    top: 40px;
    width: 40px;
    height: 40px;
    background: url('assets/menu/pause_sprite.png') no-repeat center;
    background-size: contain;
    border: none;
    cursor: pointer;
    outline: none;
    transition: transform 0.1s ease-in-out;
}

#pause-button:hover {
    transform: scale(1.1);
}