@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap');

body {
    font-family: 'Montserrat', sans-serif;
    color: #555; /* A soft dark grey matches your design better than pure black */
}
body{
    background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
    margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Ensures centering works vertically */
}
/* Ensures padding and border are included within the height specified */
* {
  box-sizing: border-box; 
  font-size: clamp(1rem, 2.5vw, 1rem);
}
.container{
    display: flex;
    flex-direction: column;
     width: min(95vw, 500px);
     height: min(650px, 80vh);
    border: 1px solid #ccc;
    /* aspect-ratio: 1/1; */
    box-sizing: border-box; /* Crucial: includes padding in the width calculation */
    flex-wrap: wrap;
    aspect-ratio: 1 / 1; /* Apply the square constraint ONLY to the grid area */

    /* Styling for visibility */
  
  /* opacity: .2; */
  border-radius: 8px;
  box-shadow:  10px 5px 50px #ccc;

}
.container:hover{
    box-shadow:  10px 5px 50px #3f87a6;

}
.header{
    display: flex;
    flex: 0 0 auto; /* Header only takes the space it needs */
   /* border: 2px solid white; */
    color: #777;
   text-align: center;
   font-family: sans-serif;
  /* font-size: 1.5rem; */

  justify-content: center;
  
  
}
.marker,.players{
   box-shadow:  5px 5px 10px #ccc;
   border-left: 2px solid #ccc1;
   margin-top: 5px;
   height: 15%;
   width: 40%;
   padding: 20px 0;
   margin-inline: 10px;
   border-radius: 10px;
   
   
}
.selected, .players:hover{
    /* border-bottom: 2px solid #ccc1;
    border-right: 2px solid #ccc1; */
    box-shadow: inset 5px 5px 15px #777;
}
.active-button{
height: 11%;
display: flex;
justify-content: center;
align-items: center; /* Centers the marker vertically */
    overflow: hidden;    /* Keeps everything inside the 11% height */
}
.marker{
    width: 20%;
    height: auto; /* Let the content or padding define the height */
   
    margin-inline: 10px;
    align-content: center;
    text-align: center;
    padding: 5px;
   
}
.game-square{
    display: flex;
    /* border: 2px solid black; */
    flex-grow: 1; /* This tells the grid to fill all available space */
    flex-wrap: wrap; /* Allows squares to move to the next line */
    align-content: stretch; /* Ensures rows fill the vertical space */
    margin-top: 10px;
}
.footer{
    border: 2px solid black;
    background-color: aqua;
    text-align: center;
}
.squares{
    border: 1px solid #777;
    width: 33.33%;
    height: 33.33%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
}
/* 3n: This tells CSS to look at the elements in groups of 3 (the width of your row). */
/* +1: This targets the first element in every one of those groups. */
.squares:nth-child(3n+1) {
    border-left: none;
}
.squares:nth-child(3n+3) {
    border-right: none;
    
}
/* Selects 1, 2, and 3 */
.squares:nth-child(-n+3) {
    border-top: none;
}
/* Selects 7, 8, and 9 */
.squares:nth-child(n+7) {
    border-bottom: none;
}
.reset{
     background-color:#f69d3c;
}

.modal-hidden{
    /* Hidden by default */
  display: none; 
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, #fde7ce, #f69d3c);
  padding: 20px;
  border-radius: 15px;

  text-align: center;

  box-shadow:  5px 5px 2px #3f87a6;
   border-left: 2px solid #ccc1;
   margin-top: 5px;
   height: 15%;
   width: 40%;
   padding: 20px 0;
   margin-inline: 10px;
   border-radius: 10px;
}
button{
    background: #ffffff80;
    border-radius: 5px;
    font-weight: 600;
    box-shadow:  5px 5px 10px #3f87a6;
}
.greet{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid;
     box-shadow:  5px 5px 2px #3f87a6;
     background: #ccc;
   margin-top: 5px;
   height: 15%;
   width: 40%;
   padding: 20px 0;
   margin-inline: 10px;
   border-radius: 10px;
   text-align: center;
}