body{

margin:0;
min-height:100vh;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;

background:linear-gradient(270deg,#020617,#0f172a,#020617,#1e293b);
background-size:800% 800%;
animation:bgMove 15s infinite;

color:white;
font-family:Arial, sans-serif;

}

@keyframes bgMove{

0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}

}



h1{
margin-bottom:20px;
margin-top:20px;
font-size:48px;
}

.game-container{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:20px;
z-index:2;
}

button{
transition:all .2s;
}

button:hover{
transform:translateY(-4px) scale(1.05);
box-shadow:0 10px 25px rgba(0,0,0,.4);
}

button:active{
transform:scale(.95);
}

.mode button{

padding:10px 15px;
margin:5px;
border:none;
background:#3b82f6;
color:white;
border-radius:6px;
cursor:pointer;

}

.scoreboard{

margin-top:15px;
font-size:20px;

}

.board{

display:grid;
grid-template-columns:repeat(3,110px);
gap:15px;
margin-top:10px;
padding:20px;
border-radius:15px;

background:rgba(255,255,255,0.02);
box-shadow:0 0 40px rgba(0,255,255,.2);

}

.box{

height:110px;
font-size:2.5rem;
border:none;
background:#0f172a;
color:#00f5ff;
border-radius:12px;
cursor:pointer;
transition:.3s;
box-shadow:0 0 10px #00f5ff;

.box.x{
color:#00f5ff;
text-shadow:0 0 12px #00f5ff;
}

.box.o{
color:#ff00ff;
text-shadow:0 0 12px #ff00ff;
}

}

.box:hover{

transform:scale(1.1);
box-shadow:0 0 25px #00f5ff;

}

.win{

background:#22c55e !important;
animation:winFlash 0.7s infinite alternate;

}

@keyframes winFlash{

from{
box-shadow:0 0 10px #22c55e;
}

to{
box-shadow:0 0 30px #22c55e;
}

}

.controls button{

padding:10px 20px;
margin:10px;
border:none;
background:#ef4444;
color:white;
border-radius:6px;
cursor:pointer;

}

.resetScore{

width:40px;
height:40px;
border-radius:50%;
border:none;
background:#22c55e;
color:white;
cursor:pointer;

}

.turn{

margin-top:10px;
font-size:18px;

}

#msg{

margin-top:15px;
font-size:22px;

}

footer{

margin-top:20px;
opacity:0.6;

}

.game-title{
font-size:48px;
font-weight:bold;
letter-spacing:3px;
background:linear-gradient(90deg,#00f5ff,#ff00ff,#00f5ff);
background-size:300%;
-webkit-background-clip:text;
color:transparent;
animation:titleGlow 5s infinite linear;
}

@keyframes titleGlow{

0%{background-position:0%}
100%{background-position:300%}

}

.particles{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
background-image:radial-gradient(#00f5ff 1px, transparent 1px);
background-size:40px 40px;
opacity:0.2;
animation:moveParticles 30s linear infinite;
z-index:-1;

}

@keyframes moveParticles{

from{ transform:translateY(0); }
to{ transform:translateY(-500px); }

}

#bgParticles{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:-2;

}

.intro-screen{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:radial-gradient(circle,#020617,#000);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:999;

}

.logo{

font-size:70px;
letter-spacing:6px;
background:linear-gradient(90deg,#00f5ff,#ff00ff,#00f5ff);
background-size:300%;
-webkit-background-clip:text;
color:transparent;
animation:logoGlow 4s infinite linear;

}

.tag{

font-size:24px;
margin-bottom:40px;
opacity:.8;

}

#enterGame{

padding:15px 35px;
font-size:18px;
background:#00f5ff;
border:none;
border-radius:10px;
cursor:pointer;
transition:.3s;

}

#enterGame:hover{

transform:scale(1.1);
box-shadow:0 0 20px #00f5ff;

}

@keyframes logoGlow{

0%{background-position:0%}
100%{background-position:300%}

}