*{
    box-sizing:border-box;
    font-family:tahoma, sans-serif;
}

body{
    margin:0;
    overflow:hidden;
    background:#111827;
}


.game{

    width:100%;
    height:100vh;
    position:relative;
    overflow:hidden;

    background:
    linear-gradient(
        #38bdf8,
        #2563eb 45%,
        #0f172a
    );

}



/* خورشید */

.game::before{

content:"☀️";

position:absolute;

top:70px;
left:40px;

font-size:80px;

opacity:.8;

}



/* ساختمان های شهر */


.game::after{

content:"🏢 🏬 🏙️ 🏢";

position:absolute;

bottom:35%;

width:100%;

text-align:center;

font-size:70px;

opacity:.5;

}




/* HUD */


.hud{

position:absolute;

top:20px;

right:15px;
left:15px;

display:flex;

justify-content:space-between;

z-index:20;

}



.hud-box{

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

backdrop-filter:blur(10px);

color:white;

padding:10px 18px;

border-radius:25px;

font-size:18px;

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

}




/* مرحله */


.stage{

position:absolute;

top:90px;

width:100%;

text-align:center;

color:white;

font-size:20px;

z-index:10;

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

}




/* مسیر */


.road{

position:absolute;

bottom:0;

height:35%;

width:100%;

background:

linear-gradient(
90deg,
#374151,
#4b5563,
#374151
);

border-top:5px solid #facc15;

}



/* خطوط مسیر */


.lane{

position:absolute;

height:100%;

width:33%;

border-left:2px dashed #ffffff55;

}


.lane1{

right:0;

}


.lane2{

right:33%;

}


.lane3{

right:66%;

}



/* شخصیت */


.player{

position:absolute;

bottom:35%;

right:50%;

font-size:65px;

z-index:15;

transition:.25s;

animation:run .5s infinite alternate;

}



@keyframes run{

from{

transform:translateY(0);

}

to{

transform:translateY(-8px);

}

}



/* سکه ها */


.coin{

position:absolute;

font-size:40px;

z-index:12;

animation:coinMove 2s infinite;

}



.coin1{

right:30%;

bottom:55%;

}


.coin2{

right:70%;

bottom:60%;

}



@keyframes coinMove{

50%{

transform:translateY(-15px) rotateY(180deg);

}

}



/* مانع */


.obstacle{

position:absolute;

right:50%;

bottom:38%;

font-size:45px;

z-index:14;

}




/* کنترل ها */


.controls{

position:absolute;

bottom:25px;

width:100%;

display:flex;

justify-content:center;

gap:25px;

z-index:30;

}



.controls button{

width:75px;

height:75px;

border-radius:50%;

border:none;

font-size:30px;

background:

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

color:white;

backdrop-filter:blur(10px);

box-shadow:

0 5px 20px #0005;

}



.controls button:active{

transform:scale(.9);

}




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


.result{

display:none;

position:absolute;

top:35%;

right:10%;

left:10%;

background:white;

border-radius:25px;

padding:30px;

text-align:center;

z-index:50;

box-shadow:0 10px 40px #0007;

}



.result h2{

font-size:50px;

}



.result button{

background:#2563eb;

color:white;

border:none;

padding:12px 35px;

border-radius:25px;

font-size:18px;

}