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

body{

overflow:hidden;

font-family:
Segoe UI,sans-serif;

background:
linear-gradient(
180deg,
#67e8f9 0%,
#4ade80 45%,
#166534 100%
);

}

canvas{

display:block;

}

/* HUD */

#hud{

position:fixed;

top:15px;
left:15px;

z-index:10;

padding:18px;

border-radius:20px;

color:white;

background:
rgba(0,0,0,.35);

backdrop-filter:
blur(20px);

}

/* Evolution */

#evolution{

position:fixed;

top:15px;
right:15px;

z-index:10;

padding:18px;

border-radius:20px;

color:white;

background:
rgba(0,0,0,.35);

backdrop-filter:
blur(20px);

}

/* Pause */

#pauseButton{

position:fixed;

left:15px;
top:170px;

z-index:11;

border:none;

padding:12px 18px;

border-radius:15px;

cursor:pointer;

color:white;

background:
linear-gradient(
135deg,
#2563eb,
#7c3aed
);

}

/* Start */

#startScreen{

position:fixed;

inset:0;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

z-index:9999;

color:white;

background:
linear-gradient(
180deg,
#38bdf8,
#22c55e
);

}

#startScreen h1{

font-size:4rem;

margin-bottom:20px;

}

/* Buttons */

button{

border:none;

padding:15px 25px;

border-radius:15px;

cursor:pointer;

font-weight:bold;

color:white;

background:
linear-gradient(
135deg,
#16a34a,
#22c55e
);

}

/* Game Over */

#gameOver{

display:none;

position:fixed;

inset:0;

z-index:999;

color:white;

background:
rgba(0,0,0,.9);

flex-direction:column;

align-items:center;

justify-content:center;

}

/* Mobile */

#controls{

position:fixed;

bottom:15px;

left:50%;

transform:
translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

gap:10px;

z-index:20;

}

.middle{

display:flex;

gap:10px;

}

#controls button{

width:70px;
height:70px;

font-size:25px;

}

@media(
min-width:900px
){

#controls{

opacity:.4;

}

}