*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Tahoma, Arial, sans-serif;
}


body{

    min-height:100vh;

    background:
    linear-gradient(135deg,#020617,#1e293b);

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

}




.container{

    width:430px;

    max-width:95%;

    background:rgba(255,255,255,0.08);

    backdrop-filter:blur(12px);

    border-radius:25px;

    padding:30px;

    text-align:center;

    box-shadow:
    0 0 40px rgba(0,0,0,.5);

}





h1{

    color:#38bdf8;

    margin-bottom:15px;

    font-size:32px;

}




#status{

    font-size:22px;

    margin:15px;

    font-weight:bold;

}





/* امتیازات */

.score{

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

    padding:15px;

    border-radius:15px;

    margin-bottom:25px;

}



.score h3{

    color:#facc15;

    margin-bottom:10px;

}



.score p{

    font-size:18px;

    margin:5px;

}



.score span{

    color:#22c55e;

    font-weight:bold;

}






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


#board{

    display:grid;

    grid-template-columns:repeat(3,100px);

    grid-template-rows:repeat(3,100px);

    gap:10px;

    justify-content:center;

}





.cell{

    width:100px;

    height:100px;

    background:#0f172a;

    border:3px solid #38bdf8;

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:55px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

}





.cell:hover{

    background:#334155;

    transform:scale(1.05);

}





/* رنگ بازیکنان */


.cell.x{

    color:#22c55e;

}



.cell.o{

    color:#ef4444;

}






/* افکت خانه های برنده */


.cell.winner{

    animation:
    winnerAnimation .6s infinite alternate;

}



@keyframes winnerAnimation{


from{

    transform:scale(1);

    box-shadow:
    0 0 5px #22c55e;

}



to{

    transform:scale(1.15);

    box-shadow:
    0 0 30px #22c55e;

}


}







button{


    margin-top:25px;

    padding:12px 30px;

    border:none;

    border-radius:15px;

    background:#2563eb;

    color:white;

    font-size:18px;

    cursor:pointer;

    transition:.3s;


}





button:hover{


    background:#1d4ed8;

    transform:scale(1.08);


}






.back{


    display:inline-block;

    margin-top:20px;

    color:#38bdf8;

    text-decoration:none;

    font-size:18px;

}




.back:hover{

    color:#7dd3fc;

}







/* موبایل */


@media(max-width:500px){


.container{

    padding:20px;

}



#board{

    grid-template-columns:repeat(3,80px);

    grid-template-rows:repeat(3,80px);

}



.cell{

    width:80px;

    height:80px;

    font-size:45px;

}


}