body {
  font-family: sans-serif;
  background:radial-gradient(lightblue,steelblue);
    color: white;
  display: flex;
  justify-content: center;
  
  min-height:100vh;
}
html{
  font-size:16px;
}

canvas { 
  margin:20px;
  border: none;
  box-sizing:border-box;
  box-shadow:0px 0px 6px 2px lightgray ;
  padding:5px;
  margin-right:2px; 
}
#score{     
   font-size:1.4rem;
   padding:13px;
   border:none;
   min-height:2rem; 
   }
.gamecontainer{
  display: flex; 
  justify-content: center;
  align-items: center;
  flex-direction:row;
  
  gap:0px;
}
 
::backdrop {
  background-image: linear-gradient(
    45deg,
    magenta,
    rebeccapurple,
    dodgerblue,
    green
  );
  opacity: 0.75;
}
/*
.controls button{
   font-size:large;
   min-width:100px;
   min-height:80px;
   margin:10px;
   padding:8px;
   border-radius:5px;
   border:none;
   cursor:pointer;
   color:white;
   background:linear-gradient(40deg,steelblue,darkblue);
   box-shadow:0px 0px 4px  2px gray;
}
.controls button:hover{
    font-size:x-large;
    }
.controls button:active{
   box-shadow:none; 
   transform:translateY(4px);
}   
 */

 

 

 
dialog{
   align-items:center;
   border: 10px solid #eee;
   width:40%;
   height:40%;
   border-radius:4px;
   font-size:x-large;
   box-shadow: 4px 4px 8px #eaa inset;
}
 
 

 
 

.controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding:15px;
}
    .btn {
      padding: 10px 20px;
      font-size: 1rem;
      border: none;
      border-radius: 5px;
      background: #007bff;
      color: white;
      cursor: pointer; 
      touch-action:manipulation;
    }

    .btn:hover {
      background: #0056b3;
    }

    /* New mobile bar style */
.mobile-bar {
  display: none; /* Hidden by default */
}

.arrowbtns{
   display:flex;
   flex-direction:column; 
   gap:4px;
}
/* Show only on small screens */
@media (max-width: 768px) {
    .controls{
      flex-direction:column;
       justify-content: center;    
       margin:0px;
      
      font-size:large;
  }
  canvas{
      margin-top:20px;
      margin-bottom:3px;
      margin-left:10px;
  }
  .gamecontainer{ 
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      justify-content:flex-start;
      padding:20px;
            width:100%;     
  }
  #score{
      padding:4px;
  }
  .arrowbtns{
      position:absolute;
      top:0px;
      left:0px;
      display:flex;
      flex-direction:row;
      margin-bottom:15px;
      justify-content: space-around;      
      align-items: center; 
      width:100%;
      margin:3px;
  }
  .btn{
      padding:10px 15px;
  }
}


button {
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  background: #333;
  border: 1px solid #777;
  color: #fff;
}