/*
    ===============Table of Contents===============
    -----------------------------------------------
    0) IMPORTED ASSETS
        A- Fonts
            i- Baskervville
            ii- Press Start 2P
            iii- Nexa Rust
            iv- Chunk Five

    -----------------------------------------------
    1) CORE STYLINGS
        A- html
        B- h1
        C- h2
        D- p

    -----------------------------------------------
    2) TITLE SCREEN
        A- Stage & Title Logo
        B- Usage Agreement & Rights Acknowledgement
            i- legalContainer
            ii- legalBanner
            iii- legalBannerBox
            iv- legaltTextContainer
            v- legalTextSubBox
            vi- byUsingThisP
            vii- acceptTermsButton

    -----------------------------------------------
    3) SETTINGS SCREEN (initial webpage)
        A- Settings Main Stages
            i- settingsStage stage
            ii- zombieAttackLogo img
            iii- settingsHeaderSection box
            iv- settingsHeader h1
            v- settingsInputSubstage box
        B- Difficulty Stage
            i- difficultyStage stage 
            ii- Population Container
            iii- Speed Radio Container
            iv- Powerup Container
        C- Sound Container
        D- Other Buttons
        E- Start Game Button
        F- howToPlayWindow container
    
    -----------------------------------------------
    4) PLAYING SCREEN
        A- Playing Stage
            i- playingStage stage
            ii- firingStage stage
            iii- backgroundGreen img
            iv- playerTank img
            v- freezeImageLayer img

        B- HUD
            i- Wave Display
            ii- Rep Points Display
            iii- Lives Display
            vi- Ammo Display
            v- Freeze Counter Display
            vi- Nuke Counter Display
            vii- audioSettingsButton button
            viii- Playing Sound Container
            ix- Shot Log Button
            x- Sarge Speech Bubble
            xi- Reset Button
            xii- Pause Window
        
        C- Zombies
            i- Walk Cycle Keyframes
            ii- Standard Zombie
            iii- Sprinter Zombie
            iv- Tank Zombie
            v- Animation

        D- Tank Firing
            i- Standard Divot
            ii- High Explosive Divot
            iii- Canister Divot
            iv- Standard Explosion
            v- High Explosive Explosion
            vi- Canister Explosion
    
    -----------------------------------------------
    5) SHOT LOG WINDOW
        A- shotLog stage
        B- shotLogHeader h2
        C- logContainer container
        D- closeShotLogButton
    
    -----------------------------------------------
    6) SHOP SCREEN
        A- shopStage stage
        B- 
        C-
        D-
        E-
    -----------------------------------------------
    7) FINAL SCORE STAGE
        A- finalScoreStage
        B- finalCard
        C- finalTitle
        D- finalRows
        E- finalRow
        F- finalScoreDivider
        G- finalButtons
    =============================================== 










    ===============================================
    -----------------------------------------------
    0) IMPORTED ASSETS
    -----------------------------------------------
    ===============================================

    -----------------------------------------------
    0A- FONTS
    -----------------------------------------------
    */

    @font-face {
        font-family: Baskervville;
        src: url(fonts/Baskervville-VariableFont_wght.ttf);
        font-display: swap;
    }

    @font-face {
        font-family: 'Press Start 2P';
        src: url(fonts/PressStart2P-Regular.ttf);
        font-display: swap;
    }

    @font-face {
        font-family: 'Nexa Rust';
        src: url(fonts/NexaRustSlab-BlackShadow01.otf);
        font-display: swap;
    }

    @font-face {
        font-family: 'ChunkFive';
        src: url(fonts/Chunk\ Five\ Print.otf);
        font-display: swap;
    }

    /*
    ===============================================
    -----------------------------------------------
    1) CORE STYLINGS
    -----------------------------------------------
    ===============================================
    */

    html {

        color: white;
        font-size: 14px;
        line-height:  .7;
        background-color: #222;
        background-image: url("img/settingsAndTitle/webpageBackground.jpg");
        background-repeat: no-repeat;
        background-size: 100%;
    }

    h1 {

        font-size: 30px;
        font-weight: 750;
        font-family: Baskerville, Georgia, serif;
        text-shadow: 3px 3px black;
    }

    h2 {

        color:  #82ffd5;
        font-size: 20px;
        font-weight: bold;
        font-family: 'Press Start 2P', Baskerville, Georgia, serif;
        text-shadow: 2px 2px #222;
    }

    p {
        color: white;
        font-size: 12px;
        font-weight: bold;
        font-family: Helvetica, Arial, sans-serif;
    }

    /*
    ===============================================
    -----------------------------------------------
    2) TITLE SCREEN
    -----------------------------------------------
    ===============================================

    -----------------------------------------------
    2A- STAGE & MAIN LOGO
    -----------------------------------------------
    */

    #titleScreen {

        display: block;
        position: relative;
        text-align: center;
    }

    #titleLogo {

        width: 900px;
        height: 323px;
        position: absolute;
        background-image: url("img/settingsAndTitle/TITLE\ LOGO\ pixel.png");
        left: 25%;
        top: 10%;
    }

    /*
    -----------------------------------------------
    2B- USAGE AGREEMENT & RIGHTS ACKNOWLEDGEMENT
    -----------------------------------------------
    */

    #legalContainer {

        display: block;
        position: relative;
        top: -5px;
    }

    #legalBanner {

        display: block;
        position: relative;
        top: 330px;
    }

    #legalBannerBox {

        width: 449px;
        height: 50px;
        display: block;
        position: relative;
        background-color: #222;
        opacity: 50%;
        top: 385px;
        left: 38%;
        border: #797979;
        border-width: 3px;
    }

    #legalTextContainer {

        position: relative;
        top: 150px;
    }

    #legalTextSubBox {

        width: 850px;
        height: 200px;
        display: inline-block;
        position: relative;
        top: 174px;
        background-color: #222;
        opacity: 50%;
        border-radius: 10px;
        z-index: -1;
    }

    #byUsingThisP {

        position: relative;
        font-size: 16px;
        top: -20px;
    }

    #acceptTermsButton {

        position: relative;
        top: 140px;
        font-size: 20px;
        font-family: 'Press Start 2P', Baskerville, Georgia, serif;

        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    /*
    ===============================================
    -----------------------------------------------
    3) SETTINGS SCREEN
    -----------------------------------------------
    ===============================================

    -----------------------------------------------
    3A- SETTINGS MAIN STAGES
    -----------------------------------------------
    */

    #settingsStage {
        
        /*Hide initial settings display*/
        display: none;

        width: 650px;
        height: 867px;
        position: relative;
        color: aliceblue;
        margin: 0 auto;
        text-align: center;

        border-radius: 15px;
        border-width: 10px;

        padding-left: 5px;
        padding-top: 5px;

        background-size: contain;
        background-image: url("img/settingsAndTitle/settingStageBG.jpg");
        border-image: url("img/settingsAndTitle/settingStageBorderBG.png");

        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    #zombieAttackLogo {

        width: auto;
        height: auto;
        position: absolute;
        top: 0px;
        left: 0px;

        background-image: url("img/settingsAndTitle/zombieAttackSignLogo.png");
    }

    #settingsHeaderSection {

        position: absolute;
        bottom: 415px;
        left: 100px;
        height: 42px;
        width: 150px;
        
        outline: auto;
        outline-width: 2px;
        outline-color: #82ffd5;

        background-color: #073F4E;
    }

    #settingsHeader {

        position: absolute;
        top: -10px;
        left: 15px;
    }

    #settingsInputSubstage {

        width: 634px;
        height: 460px;
        position: absolute;
        top: 400px;
        left: 8px;

        border: grey;
        border-radius: 15px;
        border-width: 1px;
        background-color: #5E5E5E;
        opacity: .2;
    }

    /*
    -----------------------------------------------
    3B- DIFFICULTY STAGE
    -----------------------------------------------

    -----------------------------------------------
    3B-i- Difficulty Main Stage
    */

    #difficultyStage {

        width: 320px;
        position: relative;
        top: 480px;
    }

    /*
    -----------------------------------------------
    3B-ii- Population Container
    */

    #populationContainer {

        position: relative;
    }

    #popSliderLabel {

        color: #DBA818;
        font-size: 18px;
        font-weight: bold;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        text-shadow: 2px 2px black;
    }

    #populationSlider {

        width: 225px;
        height: 25px;
    }

    /*
    -----------------------------------------------
    3B-iii- Speed Radio Container
    */

    #speedContainer {

        position: relative;
        top: 20px;
    }

    #speedContainer input {

        position: absolute;
        opacity: 0;
    }

    .speedLabel {

        position: relative;
        top: 5px;
        font-size: 18px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        font-weight: bold;
        text-shadow: 2px 2px black;
        padding-left: 5px;
        padding-right: 5px;
    }

    .customRadio {

        height: 15px;
        width: 15px;
        background-color: #797979;
        border-radius: 50%;
        display: inline-block;
        transition: background-color 0.2s ease;
    }

    .speedLabel input:checked + .customRadio {

        background-color: #6fddb8;
        box-shadow: 0 0 0 1px white inset;
    }

    .speedLabel:hover input {

        cursor: pointer;
    }

    .speedLabel:hover input:not(:checked) ~ .customRadio {

        background-color: #c4c4c4;
        box-shadow: 0 0 0 1px black inset;
    }

    #speedContainer input:checked ~ #speedRadio {

        background-color: #82ffd5;
    }

    .customRadio:after {

        content: "";
        position: relative;
        display: none;
        top: 5px;
        left: 5px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: white;
    }

    .speedLabel input:checked ~ .customRadio::after {

        display: block;
        cursor: pointer;
    }

    #speedContainer #speedRadio:after {

        position: absolute;
        top: 9px;
        left: 9px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: white;
        outline: black;
        outline-width: 1px;
        
    }

    /*
    -----------------------------------------------
    3B-iv- Powerup Container
    */

    #powerupContainer {

        position: relative;
        top: 50px;
        font-size: 18px;
        font-weight: bold;
        text-shadow: 2px 2px black;
    }

    #livesContainer {

        font-size: 18px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        position: relative;
        top: -5px;
        text-shadow: 2px 2px black;
    }

    #freezeContainer {

        font-size: 18px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        position: relative;
        top: -5px;
        right: 12px;
        text-shadow: 2px 2px black;
    }

    #nukeContainer {

        font-size: 18px;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
        position: relative;
        top: -5px;
        left: -5px;
        text-shadow: 2px 2px black;
    }

    /*
    -----------------------------------------------
    3C- Sound Container
    -----------------------------------------------
    */

    #soundContainer {

        width: 320px;
        position: absolute;
        top: 425px;
        right: 0px;
        text-shadow: 2px 2px black;
        
    }

    #soundLabel {

        font-size: 16px;
        font-weight: bold;
        font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;;
    }

    .master-sound-div {

        position: absolute;
        top: 50px;
        right: 85px;
    }

    .music-sound-div {

        position: absolute;
        top: 80px;
        right: 85px;
    }

    .zombie-sound-div {

        position: absolute;
        top: 110px;
        right: 85px;
    }

    .tank-sound-div {

        position: absolute;
        top: 140px;
        right: 85px;
    }

    .sound-number {

        position: absolute;
        top: -4px;
        right: -45px;
        width: 30px;
    }

    .zombie-test-btn, .tank-test-btn {

        position: absolute;
        right: -70px;
        top: -4px;
        width: 22px;
        height: 22px;
        background-image: url("img/settingsAndTitle/testPlaySymbol.png");
    }

    /*
    -----------------------------------------------
    3D- Other Buttons
    -----------------------------------------------
    */

    #emailButton {

        position: absolute;
        bottom: 215px;
        right: 235px;
    }

    #legalButton {

        position: absolute;
        bottom: 215px;
        right: 140px;
    }

    #patreonButton {

        position: absolute;
        bottom: 215px;
        right: 50px;
    }

    #howToPlayButton {
        position: absolute;
        bottom: 170px;
        right: 73px;
        font-size: 16px;
        font-family: 'Press Start 2P', Baskerville, Georgia, serif;
    }

    #howToPlayOkayButton {
        position: relative;
        bottom: 6px;
    }

    .button {
        background: linear-gradient(180deg, #489178, #39725e);
        border: 3px solid #474747;
        color: #fff;
        font-family: Baskerville, Georgia, serif;;
        font-size: 16px;
        padding: 6px 8px;
        border-radius: 10px;
        text-transform: uppercase;
        cursor: pointer;
        box-shadow: 2px 4px 0 #162c24;
        transition: transform 0.1s, box-shadow 0.1s;
    }

    .button:hover {
        transform: translateY(-2px);
        background: linear-gradient(0deg, #489178, #72ebc0);
    }

    .button:active {
        transform: translateY(2px);
        background: #b9eedb;
    }


    /*
    -----------------------------------------------
    3E- Start/Confirm Button
    -----------------------------------------------
    */

    #startGameButton {

        width: auto;
        height: auto;
        position: absolute;
        bottom: -460px;
        left: 150px;

        color: white;
        font-size: 18px;
        font-family: 'Press Start 2P', Baskerville, Georgia, serif;
        padding: 12px 32px;
        background-color: #489178;
        border: 4px solid #444;
        border-radius: 8px;
        text-shadow: 1px 1px black;
        box-shadow: 0 0 0 3px grey inset, 4px 4px 0 black;
        cursor: pointer;
        transition: all .15s ease-in-out;
        position: relative;
    }

    #startGameButton:hover {

        color: #489178;
        background-color: white;
        box-shadow: 0 0 0 3px grey inset, 1px 1px 0 black;
    }

    #startGameButton:active {

        transform: translateY(5px);
        box-shadow: 0 0 0 3px grey inset, 1px 1px 0 black;
        border: 4px solid #489178;

    }

    #startGameButton:disabled {

        background-color: #444;
        color: white;
        border: 4px solid #489178;
        box-shadow: none;
        cursor: not-allowed;
    }

    /*
    -----------------------------------------------
    3F- How To Play Window
    -----------------------------------------------
    */

    #howToPlayWindow {
        position: absolute;
        display: none;
        inset: 0;
        top: 660px;
        color: #10c985;
        background-color: #14404ddc;
        height: fit-content;
        border-radius: 15px;
        border-style: dashed;
        border-color: #a9e0cf;
        z-index: 10;
    }

    /*
    ===============================================
    -----------------------------------------------
    4) PLAYING SCREEN
    -----------------------------------------------
    ===============================================

    -----------------------------------------------
    4A- PLAYING STAGE
    -----------------------------------------------
    */

    #playingStage {

        display: none;
        width: 500px;
        height: 750px;
        position: absolute;
        left: 35%;

        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    #firingStage {
        display: block;
        width: 500px;
        height: 700px;
        position: absolute;
        z-index: 3;
    }

    #backgroundGreen {

        width: 500px;
        height: 750px;
        position: relative;
        background-image: url("img/playingUtils/background.jpg");
    }

    #playerTank {
        width: 45px;
        height: 27px;
        position: absolute;
        bottom: 7px;
        left: 231px;
        background-image: url("img/playingUtils/tank.png");        
    }

    #freezeImageLayer {
        position: fixed;
        visibility: visible;
        inset: 0;
        position: absolute;
        z-index: 50;
        opacity: 0;
        height: 700px;
        background-image: url("img/playingUtils/freezeBackground.png");
        pointer-events: none;
        transition: opacity .15s ease, visibility 0s linear .15s;
    }

    #freezeImageLayer.visible {
        opacity: .4;
        visibility: visible;
        transition: opacity .15s ease;
    }

    #nukeFlash {
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0;
        background-color: white;
        z-index: 9999;
        width: 500px;
        height: 750px;
    }

    #nukeFlash.active {
        animation: nukeFlash 220ms ease-out 1;
    }

    @keyframes nukeFlash {
        0% { opacity: 0; }
        35% { opacity: 0.45; }
        100% { opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
        #nukeFlash.active {
            animation: none;
            opacity: 0.25;
        }
    }

    .militiaTank {
        position: absolute;
        width: 40px;
        height: 36px;
        background-image: url("img/playingUtils/militiaTank.png");
    }

    #confirmMilitiaTankType {
        display: none;
        position: absolute;
        inset: 0;
        background-color: #222;
        color: white;
        font-family: 'Press Start 2P', Baskerville, Georgia, serif;
        text-shadow: 2px 2px black;
        z-index: 1000;
        text-align: center;
        padding-top: 200px;
    }

    .militiaSoldier {
        position: absolute;
        width: 20px;
        height: 29px;
        background-image: url("img/playingUtils/townMilitia.png");
    }

    .militiaTankCrosshair {
        position: absolute;
        width: 60px;
        height: 60px;
        pointer-events: none;
        z-index: 26;
        background-size: contain;
        background-repeat: no-repeat;
        transform: translate(-50%, -50%);
        opacity: 0.95;

        animation: militiaTankCrosshairPulse 0.35s ease-in-out infinite alternate;
    }

    .militiaTankCrosshairHE {
        background-image: url("./img/playingUtils/militiaTankCrosshairHE.png");
    }

    .militiaTankCrosshairCAN {
        background-image: url("./img/playingUtils/militiaTankCrosshairCAN.png");
    }

    @keyframes militiaTankCrosshairPulse {
        from { transform: translate(-50%, -50%) scale(1); }
        to   { transform: translate(-50%, -50%) scale(1.06); }
    }


    /*
    -----------------------------------------------
    4B- HUD
    -----------------------------------------------
    */

    /*
    -----------------------------------------------
    4B-i- Wave Counter Display
    */

    #waveDisplay {

        position: relative;
        bottom: 22px;
        left: 2px;
        font-size: 28px;
        font-family: 'Nexa Rust', Georgia, serif;
        color: #1fb986;
        text-shadow: 0px 0px 8px #9b9b9b;
        z-index: 5;
    }

    #waveBackground {

        position: relative;
        bottom: 47px;

        background-color: #222;
        height: 28px;
        width: 168px;
        z-index: 4;
        opacity: .95;
        border-radius: 5px;
    }

    /*
    -----------------------------------------------
    4B-ii- Rep Points Display
    */

    #repPointsDisplay {

        position: relative;
        bottom: 68px;
        left: 385px;
        color: #10c985;
        font-size: 26px;
        font-family: ChunkFive, Georgia, serif;

        text-shadow: 0px 0px 8px #9b9b9b;
        z-index: 5;
    }

    .repPointsCoin {

        width: 24px;
        height: 24px;
        background-image: url("img/playingUI/coin.png");
    }

    #playingStage .repPointsCoin {

        position: relative;
        bottom: 92px;
        left: 355px;
        z-index: 6;
    }

    #repPointsBackground {

        display: inline-block;
        position: relative;
        bottom: 118px;
        left: 350px;

        background-color: #222;
        height: 28px;
        width:150px;
        opacity: .95;
        border-radius: 5px;
        
        z-index: 4;
    }

    /*
    -----------------------------------------------
    4B-iii- Lives Display
    */

    #livesDisplay {

        position: relative;
        color: rgb(104, 201, 201);
        font-size: 18px;
        font-family: ChunkFive, Georgia, serif;

        bottom: 112px;
        left: 2px;

        text-shadow: 1px 1px 1px #9b9b9b;
        z-index: 5;
    }

    #livesBackground {

        position: relative;
        bottom: 130px;
        left: 5px;
        height: 22px;
        width: 80px;
        background-color: #222;
        opacity: .95;
        border-radius: 3px;

    }

    /*
    -----------------------------------------------
    4B-iv- Ammo Display
    */

    #ammoDisplay {

        position: relative;
        bottom: 190px;
        left: 30px;
        color: #B5A642;
        font-size: 16px;
        font-family: ChunkFive, Georgia, serif;

        text-shadow: 1px 1px 1px #645d46;
        z-index: 5;
    }

    #ammoImage {

        display: block;
        background-image: url("img/playingUI/ammoCounter.png");
        z-index: 6;
        position: absolute;
        height: 14px;
        width: 26px;
        bottom: 26px;
        left: 2px;
    }

    #ammoBackground {

        display: inline-block;
        position: relative;
        bottom: 205px;
        background-color: #222;
        width: 98px;
        height: 18px;
        opacity: .95;
        border-radius: 3px;

        z-index: 4;
    }

    /*
    -----------------------------------------------
    4B-v- Freeze Counter Display
    */

    #freezeCounter {

        position: relative;
        bottom: 153px;
        left: 24px;
        z-index: 5;
    }

    #freezeCounterImg {

        background-image: url("img/playingUI/freezeCountImg.png");
        position: relative;
        height: 22px;
        width: 20px;
        bottom: -6px;
        left: -22px;
        z-index: 5;
    }

    #freezeCounterNumber {
        position: relative;
        bottom: 15px;
        left: 13px;
        font-family: Baskervville, Georgia, 'Times New Roman', Times, serif;
        font-size: 24px;
    }

    #freezeBackground {

        background-color: #222;
        position: relative;
        width: 50px;
        height: 26px;
        bottom: 187px;
        z-index: 4;
        border-radius: 3px;

        opacity: .95;
    }

    /*
    -----------------------------------------------
    4B-vi- Nuke Counter Display
    */

    #nukeCounter {

        position: relative;
        bottom: 210px;
        left: 85px;
        z-index: 5;
    }

    #nukeCounterImg {

        background-image: url("img/playingUI/nukeCounterImg.png");
        position: relative;
        width: 22px;
        height: 22px;
        bottom: 2px;
        left: -24px;
        z-index: 5;
    }

    #nukeCounterNumber {
        position: relative;
        bottom: 22px;
        left: 8px;
        font-family: Baskervville, Georgia, 'Times New Roman', Times, serif;
        font-size: 24px;
    }

    #nukeBackground {

        background-color: #222;
        position: relative;
        width: 50px;
        height: 26px;
        bottom: 252px;
        left: 58px;
        z-index: 4;
        border-radius: 3px;

        opacity: .95;
    }

    /*
    -----------------------------------------------
    4B-vii- Playing Sound Container
    */

    #audioSettingsButton {

        background-image: url("img/playingUI/soundIcon.png");
        background-color: #464646e1;
        position: absolute;
        bottom: -45px;
        left: 425px;
        width: 30px;
        height: 35px;
        border-radius: 3px;
        border-color: #222;
        z-index: 20;
    }

    #playingSoundHeader{
        position: relative;
        left: 60px;
    }

    #playingSoundContainer {
        display: none;
        width: 320px;
        position: absolute;
        top: 550px;
        right: -335px;
        text-shadow: 2px 2px black;
        z-index: 5;
        
    }

    #soundSettingsCloseButton {
        display: block;
        position: absolute;
        top: 5px;
        right: 5px;
        width: 23px;
        height: 23px;
        
        background-image: url("img/playingUI/soundSettingsCloseIcon.png");
    }

    #playingSoundBackground {
        display: none;
        position: absolute;
        width: 315px;
        height: 170px;
        top: 550px;
        right: -335px;
        background-color: #222;
        opacity: .9;
        border: 3px solid #073F4E;
        border-radius: 8px;
        box-shadow: 0 0 10px #464646e1;
    }

    /*
    -----------------------------------------------
    4B-ix- Shot Log Button
    */

    #shotLogButton {

        background-image: url("img/playingUI/logIcon.png");
        position: absolute;
        bottom: -45px;
        left: 465px;
        width: 28px;
        height: 36px;
        z-index: 20;
    }

    #shotLog {
        display: none;
    }

    /*
    -----------------------------------------------
    4B-x- Sarge Speech Bubble
    */

    #speechBubble {

        display: none;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        background-image: url("img/playingUI/speechBubble.png");
        position: relative;
        width: 175px;
        height: 141px;
        bottom: 320px;
        left: 225px;
    }

    #speechBubbleText {
        position: relative;
        color: #222;
        top: 70px;
        left: 20px;
        font-weight: bold;
        font-size: 15px;
        width: 136px;
        text-align: center;
        line-height: 1;
    }

    /*
    -----------------------------------------------
    4B-xi- Reset Button
    */

    #resetButton {

        font-family: 'Press Start 2P', Baskerville, Georgia, serif;

        position: absolute;
        background-color: darkred;
        bottom: -40px;
        left: 515px;
        width: 100px;
        height: 22px;
        z-index: 10000;
    }

    /*
    -----------------------------------------------
    4B-xii- Pause Window
    */

    #pauseWindow {
        display: none;
        position: absolute;
        z-index: 50;
        inset: 0;
        top: 40%;
        text-align: center;
        background-color: #073F4E;
        height: 75px;
        border-radius: 12px;
        border-style: dashed;
        opacity: .9;
    }

    /*
    -----------------------------------------------
    4C- ZOMBIES
    -----------------------------------------------
    */    

    @keyframes walkCycle {
        from {background-position: 0px;}
        to {background-position: -120px;}
    }

    @keyframes tankWalkCycle {
        from {background-position: 0px;}
        to {background-position: -240px;}
    }

    .zombie {

        width: 20px;
        height: 30px;
        background-image: url("img/playingUtils/zombieSpriteSheet.png");
        background-size: 120px 30px;
        z-index: 10;
    }

    .zombieSprinter {

        width: 20px;
        height: 30px;
        background-image: url("img/playingUtils/zombieSprinterSpriteSheet.png");
        background-size: 120px 30px;
        z-index: 10;    
    }

    .zombieTank {

        width: 40px;
        height: 60px;
        background-image: url("img/playingUtils/zombieTankSpriteSheet.png");
        background-size: 240px 60px;
        z-index: 10;
        
        background-repeat: no-repeat;
        animation: tankWalkCycle .6s steps(6) infinite;
        position: absolute;
    }

    .zombie, .zombieSprinter {
        background-repeat: no-repeat;
        animation: walkCycle 0.6s steps(6) infinite;
        position: absolute;
    }

    .bossLaserCore {
        box-shadow: 0 0 14px rgba(255, 0, 0, 0.6);
    }
    
    .bossLaserChargeShell {
        overflow: hidden;
    }
    
    .bossLaserChargeFill {
        transition: width 0.05s linear;
    }
    
    .bossLaserBeam {
        box-shadow: 0 0 18px rgba(255, 40, 40, 0.85);
    }

    /*
    -----------------------------------------------
    4D- TANK FIRING
    -----------------------------------------------
    */

    .divot {

        width: 10px;
        height: 10px;
        position: absolute;
        background-image: url("./img/playingUtils/divot.png");
    }

    .HEDivot {

        width: 60px;
        height: 60px;
        position: absolute;
        background-image: url("./img/playingUtils/HEdivot.png");
    }

    .canisterDivot {

        width: 100px;
        height: 100px;
        position: absolute;
        background-image: url("./img/playingUtils/canisterDivots.png");
    }

    .explosion, .militiaExplosion {

        width: 15px;
        height: 15px;
        position: absolute;
        background-image: url("./img/playingUtils/explosion.png");
    }

    .HEExplosion {

        width: 60px;
        height: 60px;
        position: absolute;
        background-image: url("./img/playingUtils/highExplosive.png");
    }

    .canisterExplosion {

        width: 100px;
        height: 100px;
        position: absolute;
        background-image: url("./img/playingUtils/canisterExplosion.png");
    }

    .explosion, .divot, .HEDivot, .canisterDivot {

        background-size: cover;
        background-repeat: no-repeat;
    }

    .ammoBox {
        width: 40px;
        height: 31px;
        position: absolute;
        z-index: 20;
        background-size: cover;
        background-repeat: no-repeat;
        pointer-events: none;
        filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
    }

    .ammoBoxHE {
        background-image: url("./img/playingUtils/HEBox.png");
    }

    .ammoBoxCAN {
        background-image: url("./img/playingUtils/canisterBox.png");
    }

    .militiaCrosshair {
        position: absolute;
        width: 25px;
        height: 25px;
        pointer-events: none;
        z-index: 25;

        /* Put your PNG here */
        background-image: url("./img/playingUtils/militiaCrosshair.png");
        background-size: contain;
        background-repeat: no-repeat;

        /* We position by center in JS (left/top = center) */
        transform: translate(-50%, -50%);
        opacity: 0.95;
    }

    .militiaCrosshairAiming {
        animation: militiaCrosshairPulse 0.22s ease-in-out infinite alternate;
    }

    @keyframes militiaCrosshairPulse {
        from { transform: translate(-50%, -50%) scale(1); }
        to   { transform: translate(-50%, -50%) scale(1.08); }
    }

    /*
    ===============================================
    -----------------------------------------------
    5) SHOT LOG WINDOW
    -----------------------------------------------
    ===============================================
    */

    #shotLog {
        display: none;
        position: absolute;
        top: 50px;
        left: 350px;
        width: 280px;
        height: 720px;
        background-color: #222;
        border: 3px solid #073F4E;
        border-radius: 8px;
        font-size: 10px;
        box-shadow: 0 0 10px #464646e1;
    }

    #shotLogHeader {
        color: #10c985;
        border-bottom: 2px solid #a9e0cf;
        padding-bottom: 5px;
        font-family: 'Press Start 2P', Baskerville, Georgia, serif;
        text-align: center;
        font-size: 14px;
    }

    #logContainer {
        padding: 8px;
        height: 623px;
        overflow-y: scroll;
        line-height: 1.4em;
        font-family: Georgia, 'Times New Roman', Times, serif;
        font-size: 12px;
        text-shadow: 2px 2px #2c2c2c; 
    }

    #closeButtonShotLog {
        font-family: 'Press Start 2P', Baskerville, Georgia, serif;
        font-weight: bold;
        width: 100%;
        position: absolute;
        left: 0px;
        bottom: 0px;
        border: none;
        color: black;
        font-size: 24px;
        cursor: pointer;
        padding: 6px;
        background-color: #1fb986;
    }

    #closeShotLogButton:hover {
        background-color: #73b6a0;
    }

    /*
    ===============================================
    -----------------------------------------------
    6) SHOP SCREEN
    -----------------------------------------------
    ===============================================
    */

    #shopStage {

        position: fixed;
        top: 46%;
        left: 50%;
        transform: translate(-57%, -60%);
        z-index: 1000;

        width: 480px;
        max-width: calc(100vw - 40px);

        height: 680px;
        box-sizing: border-box;

        margin: auto;
        padding: 10px;
        background: #073F4E;
        color: #fff;
        border: 2px solid #489178;
        border-radius: 10px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
        display: none;
        align-items: stretch;
        justify-content: flex-start;
        flex-direction: column;

        overflow: hidden;
    }

    #shopHeader{ 
        flex: 0 0 auto;
        width: 100%;
    }

    #shopTitle {
        margin: 0 0 12px 0;
        text-align: center;
        width: 100%;
    }

    #shopScroll {
        flex: 1 1 auto;
        overflow-x: hidden;
        overflow-y: auto;
        min-height: 0;
        padding-right: 8px 0;
    }

    #shopFooter {
        flex: 0 0 auto;
        width: 100%;
        margin-top: auto;
        display: flex;
        justify-content: center;
        padding-top: 8px;
    }

    .shopList {
        display: flex;
        flex-direction: column;
        gap: 1px;
        margin-top: 25px;
        width: 100%;
    }

    #shopItems, #tankUpgrades {
        display: none;
    }

    .shopRow {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 12px;
        align-items: center;
        padding: 15px;
        background: rgba(0, 0, 0, .15);
        border-radius: 8px;
        margin-bottom: 10px;
        width: 425px;
    }

    .shopRowText {
        display: grid;
        grid-template-columns: 1fr auto;
        justify-content: space-between;
        align-items: center;
        column-gap: 12px;
        min-width: 0;
    }

    .shopLabel {
        font-size: 18px;
        font-family: Baskerville, Georgia, serif;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .shopPrice {
        justify-self: end;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        font-size: 18px;
        font-family: Baskerville, Georgia, serif;
        line-height: 1.2;
    }

    .shopButton, .upgradeButton {
        width: 52px;
        height: 52px;
        background: #222;
        border: 1px #10c985;
        border-radius: 8px;
        padding: 0px;
        cursor: pointer;
        transition: 0.2s;
    }

    .shopButton:hover, .upgradeButton:hover {
        background: #444444;
    }

    .shopButton:active, .upgradeButton:active {
        background: #10c985;
    }

    .shopLabel.purchased {
        cursor: default;
        color: #727272;
    }

    #shopStage .repPointsCoin {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: #10c985;
        font-family: ChunkFive, Georgia, serif;
    }

    #confirmationPopup {
        position: fixed;
        inset: 0;
        display: none;
        background: #073F4E, .45;
        backdrop-filter: blur(2px);
        z-index: 1100;
        align-items: center;
        justify-content: center;
    }

    #confirmationPopup{
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      width: min(420px, calc(100% - 24px));
      padding: 12px;

      max-height: 60px;

      background: rgba(0,0,0,.85);
      border-radius: 10px;

      display: none;
      z-index: 3000;
      
      text-align: center;
    }

    .popupButtons{
      display: flex;
      gap: 10px;
      margin-top: 10px;
    }

    .popupCheckbox{
      display: flex;
      gap: 8px;
      align-items: center;
      margin-top: 10px;
      flex-wrap: wrap;
    }

    #confirmMilitiaTankType {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 2000;

        background: rgba(7, 63, 78, 0.45);
        backdrop-filter: blur(2px);

        align-items: center;
        justify-content: center;
    }

    #confirmMilitiaTankType.active {
        display: flex;
    }

    .militiaTankPromptCard {
        width: min(420px, calc(100% - 32px));
        padding: 20px 18px 18px;

        background: linear-gradient(180deg, rgba(18, 27, 31, 0.96), rgba(7, 12, 14, 0.96));
        border: 4px solid #444;
        border-radius: 10px;
        box-shadow:
            0 0 0 3px #10c985 inset,
            5px 5px 0 rgba(0, 0, 0, 0.9);

        color: white;
        text-align: center;
    }

    .militiaTankPromptTitle {
        margin: 0 0 12px 0;
        font-family: 'Press Start 2P', Baskerville, Georgia, serif;
        font-size: 16px;
        line-height: 1.5;
        color: #dffaf1;
        text-shadow: 2px 2px black;
    }

    .militiaTankPromptText {
        margin: 0 0 18px 0;
        font-family: Baskerville, Georgia, serif;
        font-size: 18px;
        line-height: 1.35;
        color: #c8e9df;
        text-shadow: 1px 1px black;
    }

    .militiaTankPromptButtons {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .militiaTankPromptButton {
        min-height: 44px;
        padding: 10px 14px;

        color: white;
        font-size: 16px;
        font-family: 'Press Start 2P', Baskerville, Georgia, serif;
        text-shadow: 1px 1px black;
        text-transform: uppercase;

        border: 4px solid #444;
        border-radius: 8px;
        cursor: pointer;

        box-shadow: 0 0 0 3px rgba(180, 180, 180, 0.35) inset, 4px 4px 0 black;
        transition: all 0.15s ease-in-out;
    }

    .militiaTankPromptButton:hover {
        transform: translateY(-1px);
    }

    .militiaTankPromptButton:active {
        transform: translateY(4px);
        box-shadow: 0 0 0 3px rgba(180, 180, 180, 0.35) inset, 1px 1px 0 black;
    }

    .militiaTankPromptButtonHE {
        background: linear-gradient(180deg, #8b5b2f, #6f3d18);
        border-color: #4f3320;
    }

    .militiaTankPromptButtonHE:hover {
        background: linear-gradient(180deg, #b5773a, #8f4f21);
    }

    .militiaTankPromptButtonCAN {
        background: linear-gradient(180deg, #489178, #39725e);
        border-color: #2a4a3f;
    }

    .militiaTankPromptButtonCAN:hover {
        background: linear-gradient(180deg, #72ebc0, #489178);
    }

    .militiaTankPromptButtonCancel {
        background: linear-gradient(180deg, #555, #3d3d3d);
        border-color: #2a2a2a;
        color: #e6e6e6;
    }

    .militiaTankPromptButtonCancel:hover {
        background: linear-gradient(180deg, #6a6a6a, #4d4d4d);
    }

    #nextWaveButton {
        width: 205px;
        height: 40px;
        bottom: 5px;

        color: white;
        font-size: 18px;
        font-family: 'Press Start 2P', Baskerville, Georgia, serif;
        background-color: #489178;
        border: 4px solid #444;
        border-radius: 8px;
        text-shadow: 1px 1px black;
        box-shadow: 0 0 0 3px grey inset, 4px 4px 0 black;
        cursor: pointer;
        transition: all .15s ease-in-out;
        position: relative;
    }

    #nextWaveButton:hover {
        color: #489178;
        background-color: white;
        box-shadow: 0 0 0 3px grey inset, 1px 1px 0 black;
    }

    #nextWaveButton:active {
        transform: translateY(5px);
        box-shadow: 0 0 0 3px grey inset, 1px 1px 0 black;
        border: 4px solid #489178;
    }

    #shopStage,
    #shopStage * {
        user-select: none;
        -webkit-user-select: none;
    }

    .shopItemLocked {
        filter: grayscale(1);
        opacity: 0.5;
    }

    .shopItemLocked button,
    .upgradeButton:disabled {
        cursor: not-allowed;
        pointer-events: none;
    }

    .shopItemLocked:hover {
        transform: none;
    }

    .shopRequirement {
        justify-self: end;
        color: #a9a9a9;
        font-family: Baskerville, Georgia, serif;
        font-size: 15px;
        font-style: italic;
        line-height: 1.2;
        white-space: nowrap;
    }

    .shopPrice[hidden],
    .shopRequirement[hidden] {
        display: none !important;
    }

    .shopItemLocked .upgradeButton,
    .shopItemLocked .upgradeButton:hover,
    .shopItemLocked .upgradeButton:active {
        background: #222;
        transform: none;
    }

    /*
    ===============================================
    -----------------------------------------------
    7) FINAL SCORE STAGE
    -----------------------------------------------
    ===============================================
    */

    #finalScoreStage.finalStage {
        position: fixed;
        inset: 0;
        display: none;
        background: #073F4E, .45;
        backdrop-filter: blur(2px);
        z-index: 10000;
    }

    #finalScoreStage.show {
        display: block;
    }

    .finalCard {
        display: none;
        position: absolute;
        left: 635px;
        top: 150px;
        background: rgba(16, 18, 24, .96);
        color: #fff;
        width: 480px;
        border-radius: 16px;
        padding: 22px 24px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    }

    .finalTitle {
        margin: 0 0 10px;
        font-size: 18px;
        font-weight: bold;
    }

    .finalRows {
        margin-top: 6px;
    }

    .finalRow {
        display: block;
        padding: 6px 0;
    }

    .finalRow span:first-child {display: inline-block; width: 65%;}
    .finalRow span:last-child {display: inline-block; width: 35%; text-align: right;}

    .finalRow.total {
        font-size: 14px;
        font-weight: bold;
        opacity: 1;
    }

    .finalScoreDivider {
        border: 0;
        border-top: 1px solid rgba(255,255,255,.12);
        margin: 10px 0;
    }

    .finalButtons {
        margin-top: 16px;
        display: flex;
        gap: 10px;
        justify-content: flex-end;
    }

    .finalButtons button {
        padding: 8px 14px;
        border-radius: 10px;
        border: 0;
        cursor: pointer;
    }

    /* =========================================================
       GLOBAL LEADERBOARD
       ========================================================= */
    
    #leaderboardSubmission {
        margin: 18px auto;
        width: min(420px, 90%);
        text-align: center;
    }
    
    #leaderboardSubmission label {
        display: block;
        margin-bottom: 7px;
    
        font-weight: bold;
        letter-spacing: 2px;
    }
    
    #leaderboardNameInput {
        box-sizing: border-box;
    
        width: 100%;
        padding: 10px 12px;
    
        border: 2px solid #76856c;
        background: #111811;
        color: #e6eadf;
    
        font: inherit;
        text-align: center;
        letter-spacing: 2px;
    
        outline: none;
    }
    
    #leaderboardNameInput:focus {
        border-color: #a8ba98;
    }
    
    #submitScoreButton,
    #viewLeaderboardButton {
        margin-top: 10px;
        padding: 10px 18px;
    
        border: 2px solid #7f9275;
        background: #283526;
        color: #f2f2e8;
    
        font: inherit;
        font-weight: bold;
        letter-spacing: 1px;
    
        cursor: pointer;
    }
    
    #submitScoreButton:hover,
    #viewLeaderboardButton:hover {
        background: #394a35;
    }
    
    #submitScoreButton:disabled {
        opacity: 0.45;
        cursor: default;
    }
    
    #leaderboardSubmitStatus {
        min-height: 22px;
        margin-top: 8px;
    
        font-size: 0.9rem;
    }
    
    
    /* Full-screen scoreboard overlay */
    
    #leaderboardOverlay {
        position: fixed;
        inset: 0;
    
        z-index: 10000;
    
        display: none;
        align-items: center;
        justify-content: center;
    
        background: rgba(0, 0, 0, 0.82);
    }
    
    
    /* Main leaderboard window */
    
    #leaderboardPanel {
        box-sizing: border-box;
    
        width: min(760px, 92vw);
        max-height: 85vh;
    
        padding: 22px;
    
        overflow-y: auto;
    
        border: 3px solid #65745d;
        background:
            linear-gradient(
                180deg,
                #20291e,
                #111710
            );
    
        color: #ebeadd;
    }
    
    
    /* Header */
    
    #leaderboardHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
    
        padding-bottom: 12px;
        margin-bottom: 12px;
    
        border-bottom: 2px solid #65745d;
    }
    
    #leaderboardHeader h2 {
        margin: 0;
    
        letter-spacing: 3px;
    }
    
    #closeLeaderboardButton {
        border: none;
        background: transparent;
    
        color: #ebeadd;
    
        font-size: 32px;
        line-height: 1;
    
        cursor: pointer;
    }
    
    
    /* Columns */
    
    #leaderboardColumnHeaders,
    .leaderboardRow {
        display: grid;
    
        grid-template-columns:
            45px
            minmax(110px, 1fr)
            130px
            80px
            80px;
    
        align-items: center;
    
        gap: 8px;
    }
    
    #leaderboardColumnHeaders {
        padding: 8px 10px;
    
        color: #a9b5a1;
    
        font-size: 0.8rem;
        font-weight: bold;
        letter-spacing: 1px;
    }
    
    .leaderboardRow {
        padding: 11px 10px;
    
        border-top: 1px solid rgba(255, 255, 255, 0.08);
    }
    
    .leaderboardRow:nth-child(odd) {
        background: rgba(255, 255, 255, 0.035);
    }
    
    .leaderboardRank {
        font-weight: bold;
    }
    
    .leaderboardName {
        overflow: hidden;
    
        font-weight: bold;
    
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    
    .leaderboardScore {
        font-variant-numeric: tabular-nums;
    }
    
    #leaderboardLoading {
        padding: 28px;
    
        text-align: center;
        letter-spacing: 2px;
    }