* {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
         -webkit-tap-highlight-color: transparent;
         touch-action: manipulation;
     }

     body {
         font-family: 'Exo 2', sans-serif;
         background: linear-gradient(135deg, #1a2a6c 0%, #2a0845 100%);
         overflow: hidden;
         position: relative;
         width: 100vw;
         height: 100vh;
     }

     /* Animated Background Particles */
     .bg-particles {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         pointer-events: none;
         z-index: -1;
     }

     .particle {
         position: absolute;
         background: rgba(255, 255, 255, 0.1);
         border-radius: 50%;
         animation: float 6s ease-in-out infinite;
     }

     @keyframes float {

         0%,
         100% {
             transform: translateY(0px) rotate(0deg);
             opacity: 0.3;
         }

         50% {
             transform: translateY(-20px) rotate(180deg);
             opacity: 0.8;
         }
     }

     /* Preloader */
     #preloader {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: linear-gradient(45deg, #1a1a2e, #16213e, #0f3460);
         display: flex;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         z-index: 1000;
         transition: opacity 0.8s ease, visibility 0.8s ease;
     }

     #preloader.hidden {
         opacity: 0;
         visibility: hidden;
     }

     .loader {
         width: 100px;
         height: 100px;
         border: 4px solid rgba(255, 255, 255, 0.1);
         border-left: 4px solid #4CAF50;
         border-radius: 50%;
         animation: spin 1s linear infinite;
         margin-bottom: 30px;
     }

     @keyframes spin {
         0% {
             transform: rotate(0deg);
         }

         100% {
             transform: rotate(360deg);
         }
     }

     .loader-text {
         color: #4CAF50;
         font-family: 'Orbitron', monospace;
         font-size: 1.2rem;
         font-weight: 600;
         text-transform: uppercase;
         letter-spacing: 2px;
         animation: pulse 2s ease-in-out infinite;
     }

     @keyframes pulse {

         0%,
         100% {
             opacity: 0.6;
         }

         50% {
             opacity: 1;
         }
     }

     /* Game UI Elements */
     #counter {
         position: absolute;
         top: 15px;
         right: 30px;
         background: rgba(0, 0, 0, 0.8);
         backdrop-filter: blur(10px);
         border: 2px solid #4CAF50;
         border-radius: 20px;
         padding: 15px 25px;
         font-family: 'Orbitron', monospace;
         font-size: 1.8rem;
         color: #4CAF50;
         font-weight: 700;
         text-shadow: 0 0 20px #4CAF50;
         box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
         animation: counterGlow 2s ease-in-out infinite alternate;
         z-index: 10;
     }

     #counterg {
         position: absolute;
         top: 30px;
         right: 30px;
         background: rgba(0, 0, 0, 0.8);
         backdrop-filter: blur(10px);
         border: 2px solid #4CAF50;
         border-radius: 20px;
         padding: 15px 25px;
         font-family: 'Orbitron', monospace;
         font-size: 1.8rem;
         color: #4CAF50;
         font-weight: 700;
         text-shadow: 0 0 20px #4CAF50;
         box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
         animation: counterGlow 2s ease-in-out infinite alternate;
         z-index: 10;
     }

     @keyframes counterGlow {
         from {
             box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
         }

         to {
             box-shadow: 0 10px 40px rgba(76, 175, 80, 0.6);
         }
     }

     #counter::before {
         content: "SCORE: ";
         font-size: 0.7em;
         opacity: 0.8;
     }

     #counterg::before {
         content: "SCORE: ";
         font-size: 0.7em;
         opacity: 0.8;
     }

     /* Game Over Screen */
     #end {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(0, 0, 0, 0.9);
         backdrop-filter: blur(20px);
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         visibility: hidden;
         opacity: 0;
         transition: all 0.5s ease;
         z-index: 100;
     }

     #end.visible {
         visibility: visible;
         opacity: 1;
     }

     .game-over-text {
         font-family: 'Orbitron', monospace;
         font-size: 3rem;
         font-weight: 900;
         color: #f44336;
         text-shadow: 0 0 30px #f44336;
         margin-bottom: 20px;
         animation: gameOverPulse 1s ease-in-out;
         text-transform: uppercase;
         letter-spacing: 3px;
     }

     @keyframes gameOverPulse {
         0% {
             transform: scale(0.5);
             opacity: 0;
         }

         50% {
             transform: scale(1.1);
         }

         100% {
             transform: scale(1);
             opacity: 1;
         }
     }

     #retry {
         background: linear-gradient(45deg, #f44336, #ff7961);
         border: none;
         border-radius: 25px;
         padding: 20px 50px;
         font-family: 'Orbitron', monospace;
         font-size: 1.2rem;
         font-weight: 700;
         color: white;
         text-transform: uppercase;
         letter-spacing: 2px;
         cursor: pointer;
         box-shadow: 0 15px 35px rgba(244, 67, 54, 0.4);
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
     }

     #retry::before {
         content: '';
         position: absolute;
         top: 0;
         left: -100%;
         width: 100%;
         height: 100%;
         background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
         transition: left 0.5s ease;
     }

     #retry:hover {
         transform: translateY(-5px);
         box-shadow: 0 20px 40px rgba(244, 67, 54, 0.6);
     }

     #retry:hover::before {
         left: 100%;
     }

     #retry:active {
         transform: translateY(-2px);
     }

     li {
         line-height: 30px;
     }

     /* Modern Control Panel */
     #controlls {
         position: absolute;
         bottom: 30px;
         left: 40%;
         transform: translateX(-50%);
         background: rgba(0, 0, 0, 0.7);
         backdrop-filter: blur(15px);
         border-radius: 25px;
         padding: 20px;
         border: 2px solid rgba(76, 175, 80, 0.5);
         box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
         z-index: 50;
     }

     #controlls>div {
         display: grid;
         grid-template-columns: 60px 60px 60px;
         grid-template-rows: 60px 60px;
         grid-gap: 15px;
         align-items: center;
         justify-items: center;
     }

     .control-btn {
         width: 60px;
         height: 60px;
         background: linear-gradient(145deg, #2c3e50, #34495e);
         border: 2px solid #4CAF50;
         border-radius: 15px;
         cursor: pointer;
         display: flex;
         align-items: center;
         justify-content: center;
         transition: all 0.3s ease;
         position: relative;
         overflow: hidden;
         -webkit-user-select: none;
         -moz-user-select: none;
         -ms-user-select: none;
         user-select: none;
     }

     .control-btn:active {
         transform: translateY(0) scale(0.95);
         background: linear-gradient(145deg, #34495e, #3d566e);
     }

     .control-btn.active {
         transform: translateY(-3px) scale(1.05);
         box-shadow: 0 15px 30px rgba(76, 175, 80, 0.4);
         background: linear-gradient(145deg, #34495e, #3d566e);
     }

     .control-btn svg {
         width: 24px;
         height: 24px;
         fill: #4CAF50;
         filter: drop-shadow(0 0 5px #4CAF50);
         transition: all 0.3s ease;
     }

     .control-btn.active svg {
         filter: drop-shadow(0 0 10px #4CAF50);
         transform: scale(1.1);
     }

     #forward {
         grid-column: 2;
         grid-row: 1;
     }

     #left {
         grid-column: 1;
         grid-row: 2;
     }

     #backward {
         grid-column: 2;
         grid-row: 2;
     }

     #right {
         grid-column: 3;
         grid-row: 2;
     }

     /* Ripple Effect */
     .ripple {
         position: absolute;
         border-radius: 50%;
         background: rgba(76, 175, 80, 0.3);
         transform: scale(0);
         animation: ripple-animation 0.6s linear;
         pointer-events: none;
     }

     @keyframes ripple-animation {
         to {
             transform: scale(4);
             opacity: 0;
         }
     }

     /* Mobile Responsiveness */
     @media (max-width: 768px) {
         #counter {
             top: 20px;
             right: 20px;
             font-size: 1.4rem;
             padding: 12px 20px;
         }

         #controlls {

             left: 25%;
         }

         .game-over-text {
             font-size: 2rem;
         }

         #retry {
             padding: 15px 35px;
             font-size: 1rem;
         }

         .control-btn {
             width: 60px;
             height: 60px;
             -webkit-tap-highlight-color: transparent;
         }

         .control-btn svg {
             width: 24px;
             height: 24px;
         }

         #controlls>div {
             grid-template-columns: 60px 60px 60px;
             grid-template-rows: 60px 60px;
             grid-gap: 15px;
         }

         #controlls {
             bottom: 20px;
             padding: 15px;
         }
     }

     @media (max-width: 480px) {
         .control-btn {
             width: 55px;
             height: 55px;
         }

         #controlls>div {
             grid-template-columns: 55px 55px 55px;
             grid-template-rows: 55px 55px;
             grid-gap: 12px;
         }

         #controlls {
             bottom: 15px;
             padding: 12px;
         }
     }

     /* Smooth entrance animations */
     .fade-in {
         animation: fadeIn 1s ease forwards;
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
             transform: translateY(30px);
         }

         to {
             opacity: 1;
             transform: translateY(0);
         }
     }

     /* Shake animation for game over */
     @keyframes shake {

         0%,
         100% {
             transform: translateX(0);
         }

         25% {
             transform: translateX(-10px);
         }

         75% {
             transform: translateX(10px);
         }
     }

     /* Touch area for mobile swipe */
     #touch-area {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 70%;
         z-index: 5;
         touch-action: pan-x pan-y;
     }

     /* Start Screen */
     #start-screen {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background: rgba(10, 10, 20, 0.95);
         backdrop-filter: blur(10px);
         display: flex;
         align-items: center;
         justify-content: center;
         z-index: 2000;
     }

     .start-box {
         background: rgba(0, 0, 0, 0.8);
         padding: 30px 40px;
         border-radius: 15px;
         border: 2px solid #4CAF50;
         text-align: center;
         color: #fff;
         max-width: 400px;
         animation: fadeIn 0.8s ease;
     }

     .start-box h1 {
         font-family: 'Orbitron', monospace;
         font-size: 2rem;
         color: #4CAF50;
         margin-bottom: 15px;
     }

     .start-box ul {
         text-align: left;
         margin: 10px 0 20px;
         padding-left: 20px;
     }

     #play-btn {
         background: linear-gradient(45deg, #4CAF50, #2e7d32);
         border: none;
         padding: 15px 40px;
         border-radius: 25px;
         color: white;
         font-size: 1.2rem;
         cursor: pointer;
         font-family: 'Orbitron', monospace;
         font-weight: bold;
         transition: transform 0.3s ease, box-shadow 0.3s ease;
     }

     #play-btn:hover {
         transform: translateY(-3px);
         box-shadow: 0 10px 25px rgba(76, 175, 80, 0.5);
     }

     /* Sound Toggle Button */
     #sound-toggle {
         position: relative;
         width: 60px;
         height: 60px;
         background: rgba(0, 0, 0, 0.8);
         backdrop-filter: blur(10px);
         border: 2px solid #4CAF50;
         border-radius: 50%;
         cursor: pointer;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         transition: all 0.3s ease;
         color: #4CAF50;
         box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
         margin: 20px;
     }

     #sound-toggle:hover {
         transform: scale(1.1);
         box-shadow: 0 15px 40px rgba(76, 175, 80, 0.5);
     }

     #sound-toggle:active {
         transform: scale(0.95);
     }

     #sound-toggle.muted {
         border-color: #f44336;
         color: #f44336;
         box-shadow: 0 10px 30px rgba(244, 67, 54, 0.3);
     }

     #sound-toggle.muted:hover {
         box-shadow: 0 15px 40px rgba(244, 67, 54, 0.5);
     }

     /* SVG Icon Styles */
     .sound-icon {
         width: 28px;
         height: 28px;
         transition: all 0.3s ease;
     }

     .sound-off {
         display: none;
     }

     /* Mobile Responsiveness */
     @media (max-width: 768px) {
         #sound-toggle {
             width: 50px;
             height: 50px;
         }

         .sound-icon {
             width: 24px;
             height: 24px;
         }

         .code-section {
             padding: 20px;
             margin: 20px;
         }

         pre {
             font-size: 12px;
         }
     }



/* Touch Area for swipes (mobile) */
#touch-area {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    /* Must be below the start/end screens but above game */
}

/* Sound Toggle Button */
#sound-toggle {
    position: fixed;
   
    right: 0px;
    z-index: 30;
    position: relative;
    width: 60px;
    height: 60px;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    border: 2px solid #4CAF50;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: #4CAF50;
    box-shadow: 0 10px 30px rgba(76, 175, 80, 0.3);
    margin: 20px;
}

#sound-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 15px 40px rgba(76, 175, 80, 0.5);
}

#sound-toggle:active {
    transform: scale(0.95);
}

#sound-toggle .sound-icon {
    width: 30px;
    height: 30px;
}

#sound-toggle.muted {
    border-color: #f44336;
    color: #f44336;
    box-shadow: 0 10px 30px rgba(244, 67, 54, 0.3);
}

#sound-toggle.muted:hover {
    box-shadow: 0 15px 40px rgba(244, 67, 54, 0.5);
}