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

/* Full viewport container */
html, body {
  width: 100vw;
  height: 100vh;
  /*overflow: hidden;*/
  background-color: #f4f4f4;
  font-family: Arial, sans-serif;
    touch-action: manipulation;
  -ms-touch-action: manipulation;

    display: flex;
  justify-content: center;
  align-items: center;

}

/* Main container */
#fullGame {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;
  height: 100vh;
  margin: auto;
  padding: 5px;

  /* justify-content: space-between; /* Evenly distribute content */
  box-sizing: border-box;
}


/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 25%;
  padding: 10px;
  text-align: center; 
  vertical-align: middle;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/* Game Container Wrapper */
/* Game Grid Wrapper with Rounded Borders */
#gameContainerWrapper {
  width: 90vw;
  max-width: 512px; /* Slightly larger than game grid */
  display: flex;
  justify-content: center;
  align-items: center;
  /*margin-bottom: 10px;*/
  background-color: #c0c1ce; /* Optional: Change background if needed */
  border: 1px solid black; /* Visible border */
  border-radius: 20px; /* Rounded corners */
  /*padding: 10px; /* Ensure borders remain visible */
  /* box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.2); /* Optional: Adds a soft shadow */

   margin-top: 0 !important; /* ✅ Remove any space above */
  padding-top: 0 !important; /* Ensure no extra padding */
}

/* Ensure the game grid itself is properly contained */
#game-container {
  /*width: 512px;*/
  width:100%;
  /*height: 512px;*/
  height:auto;
  max-width:512px;
  max-height:512px;

  /*display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 15px; /* Make game grid slightly rounded */
  /* background-color: #000; /* Adjust as needed */
}


/* Ensure canvas remains crisp */
canvas {
  /*image-rendering: pixelated;*/
}


#solve-button:hover {
  background-color: #45a049;
}
/* Responsive adjustments */
@media (max-width: 600px) {
  #game-container {
    width: 90vw;
    height: 90vw; /* Maintain square aspect ratio */
  }
  #directionButtons button {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  #controlsRow, #statsRow {
    flex-wrap: wrap;
    justify-content: center;

    margin: 0; /* Remove default margins */
    padding: 0; /* Remove default padding */
  }
}

/*** Header row ****/
        header {
            display: flex; /* Enable flexbox for header */
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically (if needed) */
            padding: 10px; /* Add some padding to the header */
            flex-wrap: nowrap; /* Key change */
        }

        .header-content {  /* Container for the elements */
            display: flex; /* Enable flexbox for the content */
            align-items: center; /* Vertically align items */
            gap: 10px; /* Space between elements - adjust as needed */
            flex-wrap: nowrap; /* Key change */
        }

        .help, .info {
            background: none; /* remove button background */
            border: none; /* remove button border */
            cursor: pointer; /* make it look like a button*/
            padding: 0; /* remove default button padding */
            flex-wrap: nowrap; /* Key change */
        }

        .title {
            text-align: center; /* Center the title text */
            margin: 0.4rem 0 0.4rem 0; 
            color:white;
            text-align: center;
            background-color: indigo;
            border-radius: 2em;
            flex-wrap: nowrap; /* Key change */
        }

        .title h3 {
            margin: 0; /* remove default h2 margin */
        }

        #mayil-1, #vel-1 {
            vertical-align: middle; /* Align images vertically */
            border-radius: 2em;
            background-color: lightcoral;
        }

/* centering div */
.center-div {display: flex; justify-content: center; align-items: center;}


/* new direction buttons */
/* Direction Buttons Container */
#directionButtons {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px; /* Space between rows */
  margin-top: 10px;
}

/* Each row of buttons */
.direction-row {
  display: flex;
  justify-content: center;
  gap: 5px; /* Space between buttons */
}

/* Direction Buttons: Maintain Size & Styling */
#upButton, #downButton, #leftButton, #rightButton {
  width: 50px;
  height: 50px;
  font-size: 1.5em;
  text-align: center;
  border: 2px solid black;
  background-color: green;
  color:white;
  cursor: pointer;
  border-radius: 10px;
}

/* Add Space Between Left & Right Buttons */
.spacer {
  width: 40px; /* Creates space between left and right buttons */
}

/* Ensure Down Button Appears Below Left & Right */
#downButton {
  display: block;
  margin: auto; /* Center under Left & Right buttons */
}

/* Button Hover Effect */
#upButton:hover, #downButton:hover, #leftButton:hover, #rightButton:hover {
  background-color: greenyellow;
  color:black;
}




/*** Direction Buttons ***/
#btnTable {
  margin: 0 auto;
}
.keyboard-row {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  margin: 0 auto 8px;
  touch-action: manipulation;
    align-items: center;
  float: left;
}
.keyboard-row .dirButton {
  font-family: inherit;
  font-weight: bold;
  border: 0;
  padding: 0;
  margin-top: .3em; 
  margin-right: auto;
  height: 2em;
  border-radius: 1em;
  border: 0.2em solid blueviolet;
  cursor: pointer;
  user-select: none;
  background-color: greenyellow;/*rgb(129, 131, 132);*/
  color: black;/*rgb(215, 218, 220);*/
  flex-grow: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  text-transform: uppercase;
}

.keyboard-row .dirButton .wide-button {
  flex-grow: 1;
  /* font-family: 'Impact', monospace; */
  font-family: "Courier New", Courier, monospace;
  box-sizing: border-box;
  background-color: rgb(0,255,0);
  color: rgb(0,0,0);
}

.dirButton {
  width: 80px;
  height: 40px;
  font-size: 16px;
  margin: 5px;
  cursor: pointer;
}

.soundBtn {
  cursor: pointer;
  /*box-sizing: border-box;*/ 
  margin: auto 2em; 
  background-color: greenyellow;

  font-size: 1em;
  font-weight: bold;

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

.soundBtn:hover {
  background-color: #FF8784;
}

.controlBtn {
 /* width: 4em;
  height: 4em; */
  display:flex;
  font-size: 1.2em;
  font-weight: bold;
  display:flex;
}

#reset-level {
  cursor: pointer;
  /* box-sizing: border-box; */
  margin: auto 2em; 

  background-color: #FF8784;
  /*border: 0.2em solid blueviolet;
  border-radius: 1em;*/
  font-size: 1em;
  font-weight: bold;

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

#solve-button {
  cursor: pointer;
  /* box-sizing: border-box; */
  margin: auto 2em; 

  background-color: green;
  color:white;
  /*border: 0.2em solid blueviolet;
  border-radius: 1em;*/
  font-size: 1em;
  font-weight: bold;

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


#reset-level:hover {
  /* background-color: #6CDB7F; */
  background-color:greenyellow;
}

#reset-level:focus, #solve-button:focus {
  outline: none;
}

/*** */
/*** Modal Section ***/
.grayquit {
  filter: grayscale(100%) opacity(50%) blur(0.3em);
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  /* 
  width: 100%;
  height: 100%;
  */
  overflow: auto;
 /*  background-color: rgb(0, 0, 0); */
 background-color: rgba(0, 0, 0, 0.7);   

}

.modal-content {
  box-sizing: border-box;
   border: 0.3em dashed magenta;
  /* background-color: rgb(88, 18, 19); */
  background-color:rgb(88, 88,88);
  margin: 5% auto;
  padding: 1em;
  width: 80%;
  color: white; /*gainsboro;*/
  font-size: 1.3em;
  max-width: 22em;
  max-height: 28em;
  overflow-y: scroll;
}

.modal-content hr {
  border: .03em solid rgb(255,255,255);
      color: gainsboro;
}

.txtctr {
  text-align:center;
}

.fa-circle-plus{
  color:white;
  font-size:4em;
}

.close {
  opacity:1;
}

.fa-times-circle {
  color:white;
  font-size:2em;
}
/*** ***/
/* Ensure #statsRow matches the game grid width */
#statsRow {
  /*width: 512px;  /* Match gamewrapper grid width */
  width:90vw;
  max-width:512px;
  /*max-width: 100%;  /* Ensure it resizes on smaller screens */
  text-align: center;
  background-color: #fff8dc;
  /*padding: 10px;*/
  border-radius: 15px;
  border: 1px solid black;
  display: flex;
  justify-content: center; /* Center contents */
  align-items: center;
  margin: 0px !important; /* Remove bottom margin */

  /*display: block; /* Important if it's currently something else like inline-block */

}

/* Ensure inner table aligns properly */
#statsRow table {
  width: 100%;
  text-align: center;

    border-collapse: collapse; /* Collapse table borders to prevent double borders causing gaps */
    margin: 0;
}

/* Center the elements inside the row */
#statsRow .column {
  flex: 1; /* Equal column width */
  text-align: center;
  padding: 5px;
}

/* Ensure Stats Row (Steps & Kicks) Labels Match Level Label */
#statsRow label {
  font-size: 1.2em; /* Match Level label size */
  font-weight: bold;
  display: flex;
  align-items: center;
}

/* Ensure values inside Stats Row are also properly aligned */
#statsRow span {
  font-size: 1.2em; /* Match label size */
  font-weight: bold;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  #statsRow {
    width: 90vw; /* Make it responsive */
  }
}
/** **/
/* Controls Row: Same Width as Game Grid */
/* Controls Row: No Extra Space & Everything Stays in One Line */
#controlsRow {
  width: 90vw;
  max-width: 512px;
  display: flex;
  flex-wrap: nowrap; /* Ensure all items stay on one line */
  align-items: center;
  background-color: #fff8dc;
  padding: 10px;
  border-radius: 15px;
  border: 1px solid black;
  margin: 0px !important; /* Remove bottom margin */
}

/* Center Level Input and Buttons */
.level-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1; /* Allow shrinking if needed */
  min-width: 0; /* Prevent extra space */
}

/* Bigger and Aligned Level Label */
.level-controls label {
  font-size: 1.4em;
  font-weight: bold;
  display: flex;
  align-items: center;
  margin-right: 5px; /* Keep it close to input */
}

/* Level Input */
#level-input {
  width: 80px;
  text-align: center;
  font-size: 1.2em;
  height: 36px;
  border: 2px solid black;
  border-radius: 5px;
  margin: 0;
}

/* Increase & Decrease Buttons - No Extra Space */
#increase-level, #decrease-level {
  /*border: 2px solid black;*/
  border:none;
  outline: none;
  /*background: white;*/
  cursor: pointer;
  font-size: 2.4em;
  color: green;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  width: 38px;
  padding: 0;
}

/* Ensure Buttons Stay Close to Input */
#decrease-level {
  margin-right: 0px;
}

#increase-level {
  margin-left: 0px;
}

/* Keep Sound Button on the Same Row */
.sound-container {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0; /* Prevent shrinking */
}

/* Ensure PlaySound Button Aligns Properly */
#playSound {
  cursor: pointer;
  background-color: greenyellow;
  border: 2px solid black;
  padding: 6px 10px;
  font-size: 1.2em;
  font-weight: bold;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.grayit {
  filter: grayscale(100%) opacity(50%) blur(5px);
}

/* Responsive Fix for Mobile */
@media (max-width: 600px) {
  #controlsRow, #statsRow, #gameContainerWrapper {
    width: 95vw;
  }
}