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

   body {
       font-family: 'Arial', sans-serif;
       background: linear-gradient(120deg, #ff6f61, #ffcc33, #50c878, #4e54c8);
       background-size: 300% 300%;
       animation: gradient 8s infinite;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: space-evenly;
       height: 100vh;
       overflow: hidden;
   }

   @keyframes gradient {
       0% { background-position: 0% 50%; }
       50% { background-position: 100% 50%; }
       100% { background-position: 0% 50%; }
   }

   h1 {
       color: white;
       text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
       margin-bottom: 0px;
   }

   canvas {
       border: 4px solid #fff;
       border-radius: 10px;
       background: rgba(0, 0, 0, 0.8);
       box-shadow: 0 8px 20px rgba(0, 0, 0, 0.6);
       max-width: 90%;
   }

   .controls {
       margin-top: 20px;
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 10px;
   }

   .controls button, .controls select {
       padding: 10px 20px;
       font-size: 16px;
       font-weight: bold;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       transition: background-color 0.3s;
   }

   .controls button {
       background-color: #4caf50;
       color: white;
   }

   .controls button:hover {
       background-color: #45a049;
   }

   .controls select {
       background-color: #ffcc33;
       color: black;
   }

   .game-over {
       position: absolute;
       top: 32%;
       left: 50%;
       transform: translate(-50%, -50%);
       color: white;
       font-size: 40px;
       font-weight: bold;
       text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
       text-align: center;
   }

   .direction-buttons {
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: center;
       gap: 40px;
       margin-top: 30px;
   }

   .direction-buttons .middle {
       display: flex;
       flex-direction: column;
       align-items: center;
       gap: 30px;
   }

   .direction-buttons button {
       background-color: #4e54c8;
       color: white;
       font-size: 16px;
       border: none;
       border-radius: 50%;
       width: 70px;
       height: 70px;
       font-weight: bold;
       cursor: pointer;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
   }

   .direction-buttons button:hover {
       background-color: #3c43b2;
   }

   @media (max-width: 600px) {
       canvas {
           width: 90%;
           height: auto;
       }

       .game-over {
           font-size: 30px;
       }

       .controls button, .controls select {
           font-size: 14px;
           padding: 8px 16px;
       }

       .direction-buttons {
           flex-direction: row;
           gap: 40px;
       }

       .direction-buttons button {
           width: 70px;
           height: 70px;
       }
   }

   .copyright {
       margin-top: 20px;
       color: white;
       font-size: 14px;
       text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
   }