@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #2d2d2d;
    font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.container{
    display: grid;
    grid-template-columns: 40% 1fr;
    gap: 20px;
}

.top-bar{
    grid-column: 1 / -1;
    text-align: right;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
}
.balance{
    color: gold;
    /* font-size: 20px; */
    padding: 20px;
    /* background-color: black; */
}
  .controls{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 0 10px 10px 10px;
    grid-column: 1; 
    grid-row: 2; 
    
  }
  .my-bet{
    color: gold;
  }
  .display,
  .mine-panel{
    width: 100%;
    background-color: rgb(82, 82, 82);
    padding: 10px;
    border-radius: 5px;
    color: white;
  }
  .mine-panel{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bet-control{
    width: 100%;
    display: grid;
    grid-template-columns: 30% 15% 15% 30%;
    gap: 15px;
    margin: 20px 0;
  }
  .mines-control{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr ;
    gap: 10px;
    margin: 0 auto;
  }
#start{
    margin: 20px 0;
    padding: 20px;
}
  button{
    border: none;
    background-color: rgb(57, 57, 57);
    color: white;
    padding: 10px;
    border-radius: 5px;
  }
  button:hover{
    cursor: pointer;
    background-color: crimson;
  }
.no-hovera:hover {
    background-color: gold !important; 
    color: initial !important; 
}
.no-hoverm:hover {
  background-color: red !important; 
  color: initial !important;
}
  .mine-panel{
    display: flex;
    flex-direction: column;
  }
  .mines{
    font-size: 13px;
    color: gold;
  }
  .grid-container{
    width: 750px;
    height: 750px;
    display: grid;
    grid-template-columns: repeat(5, 1fr); 
    grid-template-rows: repeat(5, 1fr); 
    gap: 10px; 
    grid-column: 2; 
    grid-row: 2; 
  }
  .field {
    background-color: grey; 
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
  }
  .field:hover{
    background-color: cornflowerblue;
    cursor: pointer;
  }
  .active{
    border: 1px solid gold;
    background-color: orange;
  }
  .bomb{
    background-color: red;
    border: 1px solid rgb(132, 0, 0);
  }
  @media (max-width: 1000px){
    .container{
      align-items: center;
      display: grid;
      grid-template-columns: 100%;
      place-items: center;
      
  }
  .top-bar,
  .controls,
  .grid-container{
    width: 100%;
    grid-column: 1 / -1;
  }.top-bar{
    grid-row: 1;
  }
  .controls{
    grid-row: 3;
  }
  .grid-container{
    width: 380px;
    height: 380px;
    grid-row: 2;
  }
  .message{
    font-size: 12px;
    text-align: center;
  }
}