body,html{
margin:0;
background:#060b1f;
color:#ffffff;
font-family:sans-serif;
overflow:hidden;
}

.game{
height:100vh;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.hud{
position:absolute;
top:10px;
left:10px;
font-size:18px;
z-index:10;
}

.lanes{
display:flex;
width:100%;
max-width:700px;
height:70vh;
}

.lane{
flex:1;
margin:6px;
background:linear-gradient(180deg,#1a2a6c,#0f1b4d);
border-radius:14px;
position:relative;
overflow:hidden;
}

.note{
position:absolute;
width:80%;
left:10%;
height:22px;
background:#ffffff;
border-radius:12px;
box-shadow:0 0 20px rgba(255,255,255,.8);
}

.hit-zone{
position:absolute;
bottom:20%;
width:80%;
height:14px;
border-radius:10px;
background:#ffffff;
box-shadow:0 0 40px rgba(255,255,255,1);
z-index:5;
transition:0.1s;
}

canvas{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
opacity:.25;
}