:root {
  --brand-orange: #ff7a00;
  --main-bg: #ff5e00;
  --headfoot-bg: #8c1003;
  --head-link: #fead5d;
  --head-brown: #900f02;
}

    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      background-color: var(--main-bg);
      font-family:system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
      color: white;
		line-height: 1.4;
    }

	/* --- Play page: sticky footer + maximize game height --- */
	.page {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	/* Middle section (game + store buttons) grows to fill leftover height */
	.main {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		min-height: 0; /* IMPORTANT: allows game area to shrink/grow */
	}

	/* Game block takes remaining height above store buttons */
	#allContent {
		flex: 1 1 auto;
		min-height: 0;
	}


	/* Make the max-width wrapper fill the flex height */
	#allContent { display: flex; flex-direction: column; }
	.game-shell { flex: 1 1 auto; height: 100%; min-height: 0; display: flex; flex-direction: column; }

	/* Game fills available space */
	#gameContent { flex: 1 1 auto; min-height: 0; height: auto; }


    .responsive-cover-image {
      width: 100%; /* Ensures the container takes the full width of the viewport */
      max-width: 1000px; /* Sets the maximum width of the container */
      padding: 0 20px; /* Adds padding to the left and right to prevent the image from touching the edges */
      box-sizing: border-box; /* Ensures the padding is included in the width calculation */
      display: block; /* Ensures the div behaves like a block element with no unnecessary spacing */
      margin: 0 auto; /* Centers the container horizontally */
      overflow: hidden; /* Prevents any overflow (useful if you decide to use object-fit later) */
  }
  
  .responsive-inner-image {
      width: 100%; /* Makes the image stretch to cover the width of the container */
      height: auto; /* Automatically adjusts the height to maintain the image's aspect ratio */
      display: block; /* Removes any default spacing/margins added by the browser */
  }
  

    /*
    .responsive-cover-image {
      background-image: url('../images/background.webp');
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 40vh; 
      max-height: 500px; 
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .responsive-inner-image {
      max-height: 100%;
      max-width: 100%;
      height: auto;
      width: auto;
    }*/

    /* ----------------------- Header bar --------------------------- */

    .header-bar {
      background-color: var(--headfoot-bg);
      padding: 16px 20px;
      display: flex;
	  justify-content: space-between;
    }
    .header-link-container {
     display: flex;
    }

    .header-bar a {
      color: #fff;
      text-decoration: none;
      margin-left: 10px;
      margin-right: 10px;
      font-size: 1em;
      transition: color 0.3s;
      text-align: right;
	  font-weight: bold;
    }

    .header-bar a:first-child {
      color:  var(--head-link);
    }
    .currency-div {
     
      font-size: 14px;
    }
	
	.currency-dropdown {
    padding: 2px;
    border: none;
    border-radius: 6px;
    background-color: #ecf0f1;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-size: 12px;
	font-family: 'Apple Color Emoji', 'Noto Color Emoji', 'Segoe UI Emoji', sans-serif;
}

	.currency-dropdown:hover {
		background-color: #bdc3c7;
	}


    /* ----------------------- Footer bar --------------------------- */

    .footer-bar {
      background-color:  var(--headfoot-bg);
      padding: 12px 20px;
      padding-bottom: 25px;
      display: flex;
	  justify-content: space-between;
    }
    .footer-link-container {
     display: flex;
    }

    .footer-bar a {
      color: var(--head-link);
      text-decoration: none;
      font-size: 1em;
      margin-left: 20px;
    }

    .copyright {
      padding: 6px 0;
	  padding-top:10px; 
	  color:var(--head-brown);
      font-size: 0.8em;
	  text-align: center;
    }


    /* ----------------------- Promo section --------------------------- */

    .promo-section {
      text-align: center;
      color: white;
      margin-top:20px;
    }

    .promo-section img {
      max-width: 100%;
      height: auto;    
      margin: 6px;  
    }

    .store-section {
        text-align: center;
    	margin-top:20px;
    } 

    #store-section img{
        width: 191px; 
   	 	height: auto;
    } 
	

    .store-icons img{
        width: 150px; 
   	 	height: auto;
    } 
	
	.video-container {
        position:relative;
        padding-bottom:56.25%;
        padding-top:30px;
        height:0;
        overflow:hidden;
    }

    .video-container iframe {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
    /* ----------------------- splash main section --------------------------- */
	.app-section {
      text-align: center;
      padding: 20px;
    }

    .app-section img {
      display: block;
      margin: 10px auto;
      max-width: 100%;
    }

	.screenshot-container {
		position: relative;
		width: 100%;
		max-width: 600px;
		margin: auto;
		text-align: center;
		aspect-ratio: 16 / 9;
	}

	.screenshot {
		position: absolute;
		width: 100%;
		transition: opacity 1s ease-in-out;
		opacity: 0;
	}

	.screenshot.active {
		opacity: 1;
	}

    .features {
      display: flex;
      flex-direction: row;
	  flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 20px;
      margin-top: 20px;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
    }

    .features img {
      max-width: 230px;
      height: auto;
	  margin-top: 40px;
    }

    .features-list {
      text-align: left;
      max-width: 5000px;
    }

    .features-list h3 {
      color: var(--head-brown); /* Yellow color for the Features title */
      font-size: 1.8em;
      margin-bottom:10px;
    }

    .features-list ul {
      /* list-style: none; */
      padding-left: 18px;
    }

    .features-list ul li {
      margin: 10px 0;
    }

	
	
    /* ----------------------- login section --------------------------- */

    .login-container {
        text-align: center;
    }
	
	.login-container h2 {
        text-align: center;
		font-size: 1.5em;
		margin: 36px auto;
		margin-bottom: 24px;
    }
	
	.form-inputs-container {
        margin: 36px auto;
    }
	.login-container a {
        color: #FFD700;
        text-decoration: none;
    }
    .login-button {
        background-color: #FFA500;
        border: none;
        padding: 15px 30px;
        border-radius: 5px;
        cursor: pointer;
        margin-top: 20px;
    }
    .login-button img {
        vertical-align: middle;
        margin-right: 10px;
    }
    
    .error-head {
        color:#ff4d4d;
    }
    
    .toggle-password {
        text-align: right;
        margin-top: 0px;
        padding-top: 0px;
        margin-right: 80px;
    }
    .toggle-password a {
        color: gray;
		font-size: 0.9em;
        text-decoration: none;
    }
    .signup-text {
        color: gray;
		font-size: 0.9em;
        margin: 10px 80px;
    }

    /* ----------------------- Under game section on play  --------------------------- */

    .undergame {
    	text-align: center;
      	padding: 12px 0;
    }
	
	
    /* ----------------------- Play page loadin nn%  --------------------------- */
	.preloader{
		position: relative;
		top: -70px;
		text-align: center;
		color: #ffffff;
		font-size: 30px;
	}
    
    /* -------------------- Resizing for smaller mobile screens -------------------------------- */
    
    /*
    @media (max-width: 1200px) {
      .responsive-cover-image {
        height: 40vh;
      }
      h2 {
        font-size: 140%; 
      }
    }

    @media (max-width: 992px) {
      .responsive-cover-image {
        height: 30vh;
      }
      h2 {
        font-size: 130%; 
      }
    }

    @media (max-width: 768px) {
      .responsive-cover-image {
        height: 30vh;
      }
      h2 {
        font-size: 120%; 
      }
    }

    @media (max-width: 576px) {
      .responsive-cover-image {
        height: 30vh;
      }
      h2 {
        font-size: 110%; 
      }
    }*/