*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Segoe UI',sans-serif;
}
body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:
    linear-gradient(
        135deg,
        #0f0f1a,
        #1a1a2e,
        #2a0845
    );
    color:white;
    padding:20px;
}
.container{
    width:100%;
    max-width:700px;
    text-align:center;
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(15px);
    border:1px solid rgba(255,255,255,0.15);
    border-radius:25px;
    padding:30px;
}
h1{
    font-size:3rem;
    margin-bottom:20px;
    background:linear-gradient(
        90deg,
        #00d4ff,
        #ff4ecd
    );
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    -webkit-text-fill-color:transparent;
    background-size:200% 200%;
    animation:gradientMove 4s ease infinite;
}
@keyframes gradientMove{
    0%{
        background-position:0% 50%;
    }
    50%{
        background-position:100% 50%;
    }
    100%{
        background-position:0% 50%;
    }
}
.mode-selection{
    display:flex;
    gap:15px;
    justify-content:center;
    flex-wrap:wrap;
    margin-bottom:20px;
}
.mode-selection button,
.controls button{
    padding:12px 24px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-size:1rem;
    font-weight:600;
    transition:0.3s;
}
#pvp{
    background:#00d4ff;
    color:black;
}
#ai{
    background:#ff4ecd;
    color:white;
}
.controls{
    margin-top:25px;
    display:flex;
    justify-content:center;
    gap:15px;
    flex-wrap:wrap;
}
#restartBtn{
    background:#8b5cf6;
    color:white;
}
#newGameBtn{
    background:#00d4ff;
    color:black;
}
button:hover{
    transform:translateY(-3px);
    box-shadow:
    0 0 10px rgba(255,255,255,0.3),
    0 0 20px rgba(255,255,255,0.2);
}
.scoreboard{
    display:flex;
    justify-content:center;
    gap:20px;
    margin:20px 0;
    flex-wrap:wrap;
}
.score{
    background:rgba(255,255,255,0.08);
    padding:12px 25px;
    border-radius:15px;
    min-width:100px;
}
.score span{
    display:block;
    font-size:1.5rem;
    margin-top:5px;
}
#status{
    margin:20px 0;
    color:#00d4ff;
}
#modeDisplay{
    margin-bottom:20px;
    color:#ff4ecd;
    font-weight:600;
}
.board-wrapper{
    position:relative;
    width:100%;
    max-width:420px;
    margin:auto;
}
.board{
    width:100%;
    max-width:420px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}
.cell{
    aspect-ratio:1;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:3rem;
    font-weight:bold;
    cursor:pointer;
    border-radius:18px;
    background:rgba(255,255,255,0.08);
    transition:0.3s;
}
.cell:hover{
    transform:scale(1.05);
    background:rgba(255,255,255,0.15);
}
.cell.x{
    color:#00d4ff;
}
.cell.o{
    color:#ff4ecd;
}
.winner{
    background:#00ff95 !important;
    color:black !important;
    box-shadow:
    0 0 10px #00ff95,
    0 0 20px #00ff95,
    0 0 40px #00ff95;
    animation:winnerPulse 1s infinite;
}
@keyframes winnerPulse{
    0%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.1);
    }
    100%{
        transform:scale(1);
    }

}
@media(max-width:600px){

    h1{
        font-size:2.2rem;
    }
    .cell{
        font-size:2.3rem;
    }
    .container{
        padding:20px;
    }
}
footer{
    margin-top:25px;
    color:#aaa;
    font-size:0.9rem;
}
button{
    transition:0.3s;
}
.difficulty-selection{
    margin-bottom:20px;
}
.difficulty-selection h3{
    margin-bottom:10px;
    color:#ffffff;
}
.difficulty-selection button{
    padding:10px 18px;
    margin:5px;
    border:none;
    border-radius:10px;
    cursor:pointer;
    font-weight:600;
}
#easy{
    background:#22c55e;
    color:white;
}
#medium{
    background:#f59e0b;
    color:white;
}
#hard{
    background:#ef4444;
    color:white;
}

.selected-difficulty{
    transform:scale(1.08);
    box-shadow:
    0 0 10px white,
    0 0 20px white;
}