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

 body {
     background: #121212;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     color: #ffffff;
     text-align: center;
     min-height: 100vh;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 /* Score Display */
 #score {
     font-size: 24px;
     margin: 20px 0;
     color: #00f5d4;
     font-weight: 600;
 }

 /* Game Road Container */
 #road {
     width: 90%;
     max-width: 400px;
     height: 600px;
     background: #1e1e1e;
     border: 2px solid #d8d9d9;
     border-radius: 12px;
     position: relative;
     overflow: hidden;
     box-shadow: 0 0 10px rgba(196, 198, 198, 0.5);
 }

 /* Player Car */
 #car {
     width: 80px;
     height: 130px;
     position: absolute;
     top: 420px;
     left: 160px;
     background: url('/assest/CarMain.png') no-repeat center/contain;
     z-index: 2;
     transition: top 0.1s ease, left 0.1s ease;
 }

 /* Obstacles */
 .obstacle {
     width: 80px;
     height: 130px;
     position: absolute;
     top: -130px;
     background-size: contain;
     background-repeat: no-repeat;
     border-radius: 8px;
     z-index: 2;
     /* box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); */
 }

 /* Road Lines */
 .road-line {
     width: 10px;
     height: 60px;
     background: #ffffff;
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     animation: roadMove 1s linear infinite;
     z-index: 1;
     opacity: 0.7;
     border-radius: 2px;
 }

 @keyframes roadMove {
     0% {
         top: -60px;
     }

     100% {
         top: 600px;
     }
 }

 /* Game Over Screen */
 #gameOver {
     position: absolute;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.85);
     color: #ff4e50;
     font-size: 34px;
     font-weight: bold;
     display: none;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     z-index: 3;
     animation: fadeIn 0.5s ease;
     padding: 20px;
 }

 /* Restart Button */
 #restartBtn {
     margin-top: 20px;
     padding: 12px 24px;
     font-size: 17px;
     background: #00f5d4;
     color: #1c1c1c;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     font-weight: 600;
     box-shadow: 0 0 8px rgba(0, 245, 212, 0.5);
     transition: transform 0.2s, background 0.3s;
 }

 #restartBtn:hover {
     background: #00d4aa;
     transform: scale(1.05);
 }

 /* Sound Toggle */
 #soundToggle {
     position: absolute;
     top: 50px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 10;
     margin-top: 4px;
     font-size: 14px;
     background: #2b2b2b;
     color: #fff;
     border: 1px solid #00f5d4;
     padding: 6px 14px;
     border-radius: 6px;
     cursor: pointer;
     box-shadow: 0 0 6px rgba(0, 245, 212, 0.3);
     transition: background 0.3s;
 }



 #controls {
     display: flex;
     justify-content: center;
     gap: 16px;
     margin-top: 20px;
     position: relative;
     z-index: 10;
 }

 .btn {
     padding: 10px 20px;
     font-size: 15px;
     background: #00f5d4;
     color: #111;
     border: none;
     border-radius: 8px;
     cursor: pointer;
     font-weight: 600;
     box-shadow: 0 0 6px rgba(0, 245, 212, 0.5);
     transition: transform 0.2s, background 0.3s;
 }

 .btn:hover {
     transform: scale(1.05);
     background: #00d4aa;
 }

 /* Responsive Design */
/*  @media (max-width: 500px) {

     #car,
     .obstacle {
         width: 60px;
         height: 100px;
     }
 } */

 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: scale(0.95);
     }

     to {
         opacity: 1;
         transform: scale(1);
     }
 }

 #timer {
     position: absolute;
     top: 10px;
     left: 10px;
     font-size: 18px;
     font-weight: bold;
     color: #fff;
 }

 #startBtn {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     padding: 10px 20px;
     font-size: 20px;
     background-color: #4CAF50;
     color: white;
     border: none;
     border-radius: 5px;
     cursor: pointer;
     z-index: 10;
     /* Initial high z-index to make it visible */
 }

 @media (width: 320px) {
     #road {
         width: 90vw;
         /* Adjust the road width to fit small screens */
         height: 500px;
         /* Adjust height for small screens */
     }

     #car {
         width: 50px;
         /* Smaller car width */
         height: 80px;
         /* Smaller car height */
         position: absolute;
         /* Absolute positioning for car */
         bottom: 10px;
         /* Keep the car at the bottom */
         left: 50%;
         top: 80% !important;
         /* Center the car horizontally */
         transform: translateX(-40%);
         /* Exact centering */
         transition: bottom 0.1s ease, left 0.1s ease;
         /* Smooth movement */
     }


     #score,
     #timer {
         font-size: 16px;
         /* Smaller font size for small screens */
     }

     #restartBtn {
         font-size: 14px;
         /* Smaller button font size */
         padding: 8px 16px;
         /* Adjust button padding */
     }

     #soundToggle {
         font-size: 12px;
         /* Smaller font size for the sound button */
         padding: 4px 8px;
         /* Adjust padding */
     }

     .btn {
         font-size: 13px;
         /* Adjust button font size */
         padding: 8px 14px;
         /* Adjust button padding */
     }
 }

 #gameControls {
     text-align: center;
     margin: 10px;
 }

 #gameControls button {
     padding: 8px 20px;
     font-size: 18px;
     margin: 5px;
     border-radius: 8px;
     border: none;
     background-color: #444;
     color: white;
     cursor: pointer;
 }

 #gameControls button:hover {
     background-color: #666;
 }
@media (max-width: 500px) {
     #controls {
         display: none;
     }
 }