@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap');

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

 body {
     background: url('bg.jpg') no-repeat center center fixed;
     background-size: cover;
     margin: 0;
     overflow: hidden;
     font-family: 'Orbitron', monospace;
     position: relative;
 }

 /* Animated background stars */
 .stars {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 0;
 }

 .star {
     position: absolute;
     width: 2px;
     height: 2px;
     background: #fff;
     border-radius: 50%;
     animation: twinkle 3s infinite alternate;
 }

 @keyframes twinkle {
     0% {
         opacity: 0.3;
         transform: scale(1);
     }

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

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

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

 .loader-content {
     text-align: center;
     color: #00ff88;
 }

 .loader-title {
     font-size: 3rem;
     font-weight: 900;
     margin-bottom: 2rem;
     text-shadow: 0 0 20px #00ff88;
     animation: glow 2s ease-in-out infinite alternate;
 }

 @keyframes glow {
     from {
         text-shadow: 0 0 20px #00ff88;
     }

     to {
         text-shadow: 0 0 30px #00ff88, 0 0 40px #00ff88;
     }
 }

 .loader-spinner {
     width: 60px;
     height: 60px;
     border: 3px solid rgba(0, 255, 136, 0.3);
     border-top: 3px solid #00ff88;
     border-radius: 50%;
     animation: spin 1s linear infinite;
     margin: 0 auto 1rem;
 }

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

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

 .loader-text {
     font-size: 1.2rem;
     opacity: 0.8;
 }

 /* Game UI */
 svg {
     width: 100%;
     height: 100vh;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1;
 }

 .game-ui {
     position: fixed;
     top: 20px;
     left: 20px;
     color: #00ff88;
     font-family: 'Orbitron', monospace;
     z-index: 10;
     text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
 }

 .score-board {
     background: rgba(0, 0, 0, 0.7);
     padding: 15px 20px;
     border-radius: 10px;
     border: 2px solid rgba(0, 255, 136, 0.3);
     margin-bottom: 15px;
     backdrop-filter: blur(10px);
 }

 .score {
     font-size: 1.5rem;
     font-weight: 700;
     margin-bottom: 5px;
 }

 .arrows-count {
     font-size: 1rem;
     opacity: 0.8;
 }

 .instructions {
     position: fixed;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     color: #00ff88;
     font-family: 'Orbitron', monospace;
     font-size: 1.1rem;
     text-align: center;
     text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
     z-index: 10;
     animation: pulse 2s ease-in-out infinite alternate;
 }

 @keyframes pulse {
     from {
         opacity: 0.6;
     }

     to {
         opacity: 1;
     }
 }

 /* Enhanced target glow effect */
 #target {
     filter: drop-shadow(0 0 15px rgba(244, 83, 28, 0.6));
     animation: targetGlow 3s ease-in-out infinite alternate;
 }

 @keyframes targetGlow {
     from {
         filter: drop-shadow(0 0 15px rgba(244, 83, 28, 0.6));
     }

     to {
         filter: drop-shadow(0 0 25px rgba(244, 83, 28, 0.8));
     }
 }

 /* Enhanced bow styling */
 #bow {
     filter: drop-shadow(0 0 8px rgba(136, 206, 2, 0.4));
 }

 /* Arrow trail effect */
 .arrow-trail {
     opacity: 0;
     stroke: #00ff88;
     stroke-width: 2;
     fill: none;
     filter: blur(1px);
 }

 /* Particle effects */
 .particles {
     position: fixed;
     pointer-events: none;
     z-index: 5;
 }

 .particle {
     position: absolute;
     width: 4px;
     height: 4px;
     background: #00ff88;
     border-radius: 50%;
 }

 .game-over {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.85);
     /* dark overlay */
     display: flex;
     align-items: center;
     justify-content: center;
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.6s ease-in-out, visibility 0.6s;
     z-index: 9999;
 }

 .game-over.show {
     opacity: 1;
     visibility: visible;
 }

 .game-over-content {
     text-align: center;
     color: #fff;
     animation: popIn 0.8s ease forwards;
 }

 .game-over-content h1 {
     font-size: 4rem;
     color: #ff3333;
     text-shadow: 0 0 15px #ff0000, 0 0 30px #ff6666;
     margin: 0 0 20px;
     animation: pulse 1.5s infinite;
 }

 .game-over-content p {
     font-size: 1.5rem;
     color: #f5f5f5;
 }

 /* Animations */
 @keyframes popIn {
     0% {
         transform: scale(0.5);
         opacity: 0;
     }

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

 @keyframes pulse {

     0%,
     100% {
         text-shadow: 0 0 15px #ff0000, 0 0 30px #ff6666;
     }

     50% {
         text-shadow: 0 0 25px #ff3333, 0 0 50px #ff9999;
     }
 }



 /* Wind effect indicator */
 .wind-indicator {
     position: fixed;
     top: 20px;
     right: 20px;
     color: #00ff88;
     font-family: 'Orbitron', monospace;
     background: rgba(0, 0, 0, 0.7);
     padding: 10px 15px;
     border-radius: 8px;
     border: 1px solid rgba(0, 255, 136, 0.3);
     backdrop-filter: blur(10px);
     z-index: 10;
 }

 .wind-arrow {
     display: inline-block;
     transition: transform 0.3s ease;
     margin-left: 10px;
 }

 /* Power meter */
 .power-meter {
     position: fixed;
     left: 20px;
     top: 50%;
     transform: translateY(-50%);
     width: 20px;
     height: 200px;
     background: rgba(0, 0, 0, 0.7);
     border: 2px solid rgba(0, 255, 136, 0.3);
     border-radius: 10px;
     z-index: 10;
     backdrop-filter: blur(10px);
 }

 .power-fill {
     width: 100%;
     height: 0%;
     background: linear-gradient(0deg, #ff4444 0%, #ffaa00 50%, #00ff88 100%);
     border-radius: 8px;
     position: absolute;
     bottom: 0;
     transition: height 0.1s ease;
 }

 /* Success particles */
 @keyframes successParticle {
     0% {
         opacity: 1;
         transform: translate(0, 0) scale(1);
     }

     100% {
         opacity: 0;
         transform: translate(var(--random-x), var(--random-y)) scale(0);
     }
 }