*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
}


body{

min-height:100vh;

background:
radial-gradient(circle at top,#30005c,#05000d 55%,#000);

color:white;

display:flex;

justify-content:center;

align-items:center;

padding:20px;

overflow-x:hidden;

}



.game-container{

width:100%;

max-width:950px;

text-align:center;

}



h1{

font-size:45px;

background:linear-gradient(
90deg,
cyan,
magenta,
yellow
);

-webkit-background-clip:text;

color:transparent;

margin-bottom:10px;

}



.subtitle{

font-size:18px;

opacity:.8;

margin-bottom:25px;

}



.stats{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

}



.stat{

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.2);

padding:15px;

border-radius:20px;

min-width:120px;

box-shadow:
0 0 20px rgba(0,255,255,.15);

}



.stat h2{

color:cyan;

margin-top:8px;

font-size:28px;

}




.mission-box{

margin:25px 0;

background:rgba(255,255,255,.08);

padding:20px;

border-radius:25px;

}



#message{

margin:10px;

font-size:18px;

}



.timer{

font-size:22px;

font-weight:bold;

color:#ffdd00;

}





#arena{

height:500px;

width:100%;

background:

linear-gradient(
135deg,
rgba(0,255,255,.08),
rgba(255,0,255,.08)
);

border:3px solid cyan;

border-radius:30px;

position:relative;

overflow:hidden;

box-shadow:
0 0 40px rgba(0,255,255,.4);

margin:25px 0;

}




#target{

position:absolute;

width:70px;

height:70px;

border-radius:50%;

display:none;

cursor:pointer;


background:

radial-gradient(
circle,
white 0%,
yellow 20%,
orange 50%,
red 100%
);


box-shadow:

0 0 10px white,
0 0 25px yellow,
0 0 50px red;


animation:pulse 0.7s infinite alternate;


}




@keyframes pulse{

from{

transform:scale(1);

}

to{

transform:scale(1.15);

}

}




.controls{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}



button{

padding:15px 35px;

border:none;

border-radius:50px;

font-size:18px;

font-weight:bold;

cursor:pointer;

background:

linear-gradient(
45deg,
cyan,
magenta
);

color:black;

transition:.3s;

}



button:hover{

transform:scale(1.08);

box-shadow:
0 0 25px cyan;

}




.progress{

height:15px;

background:#222;

border-radius:20px;

margin-top:25px;

overflow:hidden;

}



#levelProgress{

height:100%;

width:0%;

background:

linear-gradient(
90deg,
cyan,
lime
);

transition:.5s;

}





.result-box{

display:none;

background:rgba(255,255,255,.1);

padding:30px;

border-radius:25px;

margin-top:25px;

}




.hit{

animation:hitEffect .3s;

}



@keyframes hitEffect{

0%{

transform:scale(1);

}

50%{

transform:scale(1.5);

opacity:.2;

}

100%{

transform:scale(1);

}

}





@media(max-width:600px){


h1{

font-size:32px;

}


#arena{

height:350px;

}


.stat{

min-width:90px;

padding:10px;

}


.stat h2{

font-size:22px;

}


button{

width:100%;

}


}