*{
    box-sizing:border-box;
    user-select:none;
}

body{

    margin:0;
    overflow:hidden;
    background:#000;

    font-family:tahoma, sans-serif;

}



.game-container{

    width:100vw;
    height:100vh;

    position:relative;

    overflow:hidden;

}



/* صفحه بازی */

#gameCanvas{

    width:100%;
    height:100%;

    display:block;

    background:

    linear-gradient(
        #38bdf8,
        #0f172a
    );

}



/* اطلاعات بالا */

.hud{

    position:absolute;

    top:20px;
    right:15px;
    left:15px;

    display:flex;

    justify-content:space-between;

    z-index:10;

}



.hud-item{

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

    backdrop-filter:blur(12px);

    color:white;

    padding:10px 18px;

    border-radius:25px;

    font-size:18px;

    box-shadow:
    0 5px 20px #0005;

}



/* عنوان مرحله */

.stage-title{

    position:absolute;

    top:90px;

    width:100%;

    text-align:center;

    color:white;

    font-size:22px;

    text-shadow:
    0 3px 10px #000;

    z-index:10;

}



/* کنترل ها */

.controls{

    position:absolute;

    bottom:30px;

    width:100%;

    display:flex;

    justify-content:center;

    gap:25px;

    z-index:20;

}



.controls button{

    width:75px;

    height:75px;

    border-radius:50%;

    border:none;

    background:

    rgba(255,255,255,.25);

    color:white;

    font-size:30px;

    backdrop-filter:blur(10px);

    box-shadow:

    0 5px 20px #0006;

}



.controls button:active{

    transform:scale(.9);

}



/* پیام مرحله */

.message{

    position:absolute;

    top:45%;

    left:10%;
    right:10%;

    background:white;

    padding:30px;

    border-radius:25px;

    text-align:center;

    font-size:24px;

    display:none;

    z-index:50;

}