* {
	padding: 0;
	margin: 0;
}
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-color: #f9eddc;
    background-image: url('img/bg.png');
    background-repeat: no-repeat;
    overflow: hidden;
    touch-action: none;
    -ms-touch-action: none;
}

/* 1. LANDSCAPE MODE */
@media (orientation: landscape) {
    html, body {
        /* "cover" scales the image to ensure it completely covers the entire width and height */
        background-size: cover; 
        background-position: center center;
    }
}

/* 2. PORTRAIT MODE */
@media (orientation: portrait) {
    html, body {
        /* "auto 100%" forces the image to take the full height, scaling the width automatically */
        background-size: auto 100%; 
        /* Aligns the scaled image perfectly to the top-left corner */
        background-position: left top; 
    }
}
		canvas {
			touch-action-delay: none;
			touch-action: none;
			-ms-touch-action: none;
		}
		@font-face {
		  font-family: 'robotomono';
		  font-style: normal;
		  font-weight: 400;
		  src: url(font/robotomono.ttf) format('truetype');
		}
		@font-face {
			font-family: 'Baloo 2';
			src: url('font/Baloo2-SemiBold.ttf') format('truetype');
			font-weight: normal;
			font-style: normal;
			font-display: block;
		}
		@font-face {
		  font-family: 'PoetsenOne';
		  font-style: normal;
		  font-weight: 400;
		  src: url(font/PoetsenOne.ttf) format('truetype');
		}
		.sound-icon {
    position: fixed;   /* Locks the image relative to the screen window */
    top: 5px;          /* 5px margin from the top edge */
    right: 5px;        /* 5px margin from the right edge */
    z-index: 1;     /* Forces the image to stay ON TOP of the Phaser canvas */
    
    /* Optional: Set a specific width/height if your raw image is too big */
    width: 32px;       
    height: auto;      
    
    /* Optional: Makes it feel like a button when hovered */
    cursor: pointer;   
}

.hud-panel {
    /* 1. Positioning on the screen */
    position: fixed;
    top: 5px;
    left: 5px;
    z-index: 1; /* Keeps it layered on top of Phaser */

    /* 2. Background Image styling */
    background-image: url('img/backtext.png');
    background-size: 100% 100%; /* Stretches image perfectly to match div bounds */
    background-repeat: no-repeat;
    background-position: center;

    /* 3. Dimensions (Adjust these to match your actual image aspect ratio) */
    width: 160px;
    height: 60px;

    /* 4. Flexbox layout to center text vertically and horizontally */
    display: flex;
    flex-direction: column;    /* Stacks text items vertically */
    justify-content: center;   /* Centers the stack vertically */
    align-items: center;       /* Centers the text horizontally */
}

/* Styling for the text lines */
.hud-text-top {
    font-family: 'Baloo 2', sans-serif;
    font-size: 20px;
    color: #000000;
    font-weight: bold;
    line-height: 1.2; /* Tightens vertical spacing */
     -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10 and Old Edge */
    user-select: none;  
}

.hud-text-bottom {
    font-family: 'Baloo 2', sans-serif;
    font-size: 16px;
    color: #000000; /* Example gold color for the score */
    line-weight: normal;
    line-height: 1.2;
      -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10 and Old Edge */
    user-select: none;  
}

/* 3. The footer container holding the images */
        .bottom-image-container {
                /* 1. Positioning on the screen */
    position: fixed;
    bottom: 2px;
    z-index: 3; /* Keeps it layered on top of Phaser */

            display: flex;
            justify-content: center; /* Centers the pair of images horizontally */
            align-items: center;     /* Aligns them vertically on the same line */
            gap: 20vw;              /* Creates the exact 128px space between them */
            width: 100%;
        }

       /* 1. The wrapper for each image/badge pair */
        .image-wrapper {
            position: relative; /* Acts as the anchor point for the absolute badge */
            display: inline-block; /* Keeps the wrapper tight around the main image */
            width: 128px;
        }

        .main-image {
            max-width: 100%;
            height: auto;
            display: block;
            cursor: pointer;
        }

        /* 2. The 32x32 Badge Styling */
        .badge {
            position: absolute;
            
                top: -30%;
    right: -13%;
            width: 32px;
            height: 32px;
            
            /* Center the text perfectly inside the 32x32 badge */
            display: flex;
            justify-content: center;
            align-items: center;
            
            /* Text & visual styling */
            font-size: 16px;
            font-weight: bold;
            color: black;
            font-family: 'Baloo 2';
            background-image: url('./img/powerups_circle.png'); /* Replace with your badge image path */
            background-size: cover;
            border-radius: 50%; /* Optional: Makes the badge a circle if it's a square image */
        }

        .btn_name{
    font-family: 'Baloo 2';
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    font-size: 0.8vw;
        }




        /* 1. The Dark Full-Screen Layer */
.overlay {
    cursor: pointer;
  font-family: 'Baloo 2';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7); /* Black with 0.7 opacity */
  
  /* Centers the modal-content perfectly on the screen */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5; /* Ensures it sits on top of the rest of the website */
}

/* 2. The Content Box Container */
.modal-content {
  position: relative; /* Gives a reference point for absolute positioning inside it */
  width: 360px;  /* Customize your width */
  height: 250px; /* Customize your height */
  max-width: 100vw;
  overflow: hidden;
  border-radius: 8px;
}

/* 3. The Main Image inside the Content Box */
.content-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the box nicely without stretching */
  display: block;
      position: absolute;
    top: 0;
    left: 0;
}

/* 4. The Front Layer (Text + Small Image) */
.front-content {
  position: relative;

  width: 100%;
  height: 100%;
  
  /* Centers the text and small image vertically and horizontally */
  display: flex;
  flex-direction: column;
  align-items: center;
    color: black;
    text-align: center;

 
}
.Poptext{
    position: absolute;
}
/* 5. Small Image Styling */
.small-img {
  width:198px;
  height: auto;
}
#ResultPopup,#winLevel,#winLevelReward,#loseLevel{
    display: none;
}










/* The main wrapper that creates the 100px gap between the two pairs */
.horizontal-container {
    position: absolute;
    top: 48%;
  display: flex;
  flex-direction: row;       /* Aligns the two pairs horizontally */
  justify-content: center;   /* CRITICAL: Centers the content horizontally on the screen */
  align-items: center;       /* Centers the content vertically */
  gap: 15px;                /* Pushes the two pairs 100px apart */
  
  width: 100%;               /* Takes up the full width to allow true horizontal centering */
  box-sizing: border-box;
}




/* 1. Define the looping zoom animation */
@keyframes pulse {
  0% {
    transform: scale(1); /* Normal size */
  }
  50% {
    transform: scale(1.15); /* Zoomed in by 15% */
  }
  100% {
    transform: scale(1); /* Back to normal size */
  }
}

/* Keeps the image and text aligned nicely within their own little groups */
.item-pair {
  
  display: flex;
  flex-direction: row;       
  align-items: center;       
  gap: 10px;   
  
 /* Optional: Ensure the items inside align nicely horizontally */
  display: inline-flex;
  align-items: center; 
  gap: 8px; /* Spacing between image and text */

  /* The Animation shorthand: name | duration | timing-function | iteration-count */
  animation: pulse 2s ease-in-out infinite;
}

/* Optional styling just to make the text look nice */
.item-pair span {
  font-family: 'Baloo 2';
  font-size: 16px;
  color: #333;
}





@media (orientation: portrait) {
    .hud-panel {
        left: 50%; /* Moves the left edge of the div to the exact center of the screen */
        transform: translateX(-50%); /* Shifts the div back left by half its own width */
    }
    
      .btn_name{
        font-size: 2.5vw;
      }

      .bottom-image-container {
    bottom: 32px;
      }
    
}
/* This will apply ONLY to screens that are 1920px wide OR WIDER 
   AND 1080px tall OR TALLER */
@media screen and (min-width: 1900px) {
    .image-wrapper {
        width: 192px;
    }
     .badge {
    top: -23%;
    right: -8%;
    width: 48px;
    height: 48px;
      font-size: 20px;
     } 
}
.non-selectable {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10 and Old Edge */
    user-select: none;   
    cursor: pointer;      /* Standard syntax (Chrome, Firefox, Opera, Edge) */
}