.snake-game-wrapper{
text-align:center;
padding:20px;
}

.snake-ui{
max-width:650px;
margin:auto;
}

.snake-stats{
display:flex;
justify-content:space-between;
margin-bottom:12px;
font-weight:600;
font-size:16px;
}

.game-area{
position:relative;
display:flex;
justify-content:center;
}

#snakeCanvas{
width:100%;
max-width:600px;
aspect-ratio:1/1;
background:#0f0f18;
border-radius:14px;
box-shadow:0 0 20px rgba(124,77,255,0.25);
}

/* overlay screens */

.start-screen,
.game-over,
.pause-screen{

position:absolute;
inset:0;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

background:rgba(0,0,0,0.85);
border-radius:14px;

}

.game-over{
display:none;
}

.pause-screen{
display:none;
}

/* buttons */

.snake-btn{

padding:12px 26px;
font-size:16px;
border-radius:10px;
border:none;
cursor:pointer;
margin:8px;
transition:all .2s ease;

}

.snake-btn.primary{
background:#7c4dff;
color:white;
}

.snake-btn.primary:hover{
background:#6a3dff;
transform:translateY(-1px);
}

.snake-btn.secondary{
background:#1f1f2f;
color:white;
border:1px solid #7c4dff;
}

.snake-btn.secondary:hover{
background:#7c4dff;
}

.game-buttons{
display:flex;
gap:12px;
margin-top:12px;
}

.control-guide{
margin-top:15px;
font-size:14px;
opacity:.85;
}

/* mobile */

@media(max-width:768px){

.snake-ui{
max-width:95%;
}

.snake-stats{
font-size:14px;
}

}