/* ==========================
   RESET
========================== */

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

body{

    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:flex-start;

    overflow-y:auto;

    padding:30px 0;

    background:linear-gradient(135deg,#2b0a3d,#1a0b2e,#12081d);

    color:white;

}

/* ==========================
   BACKGROUND
========================== */

.background{

    position:fixed;

    inset:0;

    z-index:-1;

}

.circle{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    animation:float 8s infinite ease-in-out;

}

.c1{

    width:300px;

    height:300px;

    background:#ff4fa3;

    top:-80px;

    left:-50px;

}

.c2{

    width:260px;

    height:260px;

    background:#ff7ecb;

    bottom:-70px;

    right:-50px;

}

.c3{

    width:220px;

    height:220px;

    background:#ffb6e6;

    top:45%;

    left:45%;

}

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-25px);

}

100%{

transform:translateY(0);

}

}

/* ==========================
   CONTAINER
========================== */

.container{

    width:470px;

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

    backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.12);

    border-radius:28px;

    padding:25px;

    text-align:center;

    box-shadow:0 20px 60px rgba(255,0,150,.25);

}

h1{

    color:#ff7ecb;

    margin-bottom:25px;

    text-shadow:0 0 20px rgba(255,126,203,.5);

}

/* ==========================
   MODE BUTTONS
========================== */

.mode{

    display:flex;

    gap:10px;

    margin-bottom:25px;

}

.mode button{

    flex:1;

    padding:12px;

    border:none;

    border-radius:12px;

    background:#ffffff15;

    color:white;

    cursor:pointer;

    transition:.3s;

}

.mode button:hover{

    background:#ff4fa3;

}

.mode .active{

    background:#ff4fa3;

}

/* ==========================
   SCOREBOARD
========================== */

.scoreboard{

    display:flex;

    justify-content:space-between;

    margin-bottom:25px;

}

.score{

    width:110px;

    padding:15px;

    border-radius:15px;

    background:#ffffff10;

}

.score h2{

    color:#ff7ecb;

    margin-top:8px;

}
/* ==========================
   STATUS
========================== */

#status{

    margin-bottom:20px;

    color:#ffd6ec;

    font-size:22px;

    font-weight:600;

}

/* ==========================
   BOARD
========================== */

.board{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:8px;

    margin:15px 0;

}

.cell{

    width:95px;

    height:95px;

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

    border-radius:18px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:55px;

    font-weight:bold;

    cursor:pointer;

    transition:.3s;

    user-select:none;

}

.cell:hover{

    background:#ff4fa340;

    transform:scale(1.05);

    box-shadow:0 0 20px rgba(255,79,163,.5);

}

.cell.x{

    color:#ff9ad5;

}

.cell.o{

    color:#ffd6ec;

}

.cell.win{

    background:#ff4fa3;

    color:white;

    box-shadow:0 0 30px #ff4fa3;

}

/* ==========================
   BUTTONS
========================== */

.buttons{

    display:flex;

    gap:15px;

}

.buttons button{

    flex:1;

    padding:14px;

    border:none;

    border-radius:14px;

    background:linear-gradient(135deg,#ff4fa3,#ff7ecb);

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.buttons button:hover{

    transform:translateY(-4px);

    box-shadow:0 0 25px rgba(255,79,163,.5);

}

/* ==========================
   MOBILE
========================== */
/* Difficulty */

.difficulty{

margin:20px 0;

text-align:left;

}

.difficulty label{

display:block;

margin-bottom:8px;

color:#ffd6ec;

font-weight:600;

}

.difficulty select{

width:100%;

padding:12px;

border:none;

border-radius:12px;

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

color:white;

font-size:16px;

outline:none;

cursor:pointer;

}

.difficulty option{

background:#2b0a3d;

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

.container{

    width:95%;

    padding:20px;

}

.cell{

    width:90px;

    height:90px;

    font-size:45px;

}

.score{

    width:90px;

}

.mode{

    flex-direction:column;

}

.buttons{

    flex-direction:column;

}

}