/* ===========================
   GEN Z TIC TAC TOE CSS
   PART 1
=========================== */

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

body{
background:linear-gradient(135deg,#0f172a,#1e293b,#111827);
color:#fff;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
padding:20px;
}

.container{
width:100%;
max-width:520px;
text-align:center;
background:#1f2937;
padding:25px;
border-radius:20px;
box-shadow:0 0 30px rgba(0,255,255,.25);
}

h1{
font-size:34px;
margin-bottom:20px;
color:#00e5ff;
text-shadow:0 0 15px #00e5ff;
}

.mode-box,
.difficulty{
margin-bottom:20px;
}

.hidden{
display:none;
}

.mode-btn,
.level,
#restartBtn,
#resetBtn,
#playAgain{
width:100%;
padding:14px;
margin:8px 0;
border:none;
border-radius:12px;
font-size:18px;
font-weight:bold;
cursor:pointer;
background:#00bcd4;
color:#fff;
transition:.3s;
}

.mode-btn:hover,
.level:hover,
#restartBtn:hover,
#resetBtn:hover,
#playAgain:hover{
transform:scale(1.05);
background:#00e5ff;
}

.scoreboard{
display:flex;
justify-content:space-between;
margin:20px 0;
gap:10px;
}

.scoreboard div{
flex:1;
background:#111827;
padding:15px;
border-radius:15px;
box-shadow:0 0 10px rgba(0,255,255,.25);
}

.scoreboard h3{
font-size:22px;
margin-bottom:8px;
color:#00e5ff;
}

.scoreboard p{
font-size:26px;
font-weight:bold;
}

.status{
font-size:22px;
font-weight:bold;
margin:20px 0;
color:#4ade80;
min-height:30px;
}

.board{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:12px;
margin:20px auto;
max-width:360px;
}

.cell{
aspect-ratio:1/1;
background:#0f172a;
border:3px solid #00e5ff;
border-radius:16px;
display:flex;
justify-content:center;
align-items:center;
font-size:64px;
font-weight:bold;
cursor:pointer;
transition:.3s;
box-shadow:0 0 15px rgba(0,229,255,.25);
}

.cell:hover{
background:#172554;
transform:scale(1.05);
}

.cell.x{
color:#22c55e;
text-shadow:0 0 15px #22c55e;
}

.cell.o{
color:#f43f5e;
text-shadow:0 0 15px #f43f5e;
}

.buttons{
display:flex;
gap:12px;
margin-top:20px;
}

.buttons button{
flex:1;
}

.popup{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
background:#111827;
padding:30px;
border-radius:20px;
text-align:center;
box-shadow:0 0 30px rgba(0,255,255,.5);
z-index:1000;
width:90%;
max-width:350px;
}

.popup h2{
color:#00e5ff;
margin-bottom:10px;
}

.popup p{
font-size:22px;
margin-bottom:20px;
}

#confetti{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
overflow:hidden;
z-index:999;
}
/* ===========================
   GEN Z TIC TAC TOE CSS
   PART 2
=========================== */

@keyframes popupShow{
0%{
transform:translate(-50%,-50%) scale(.5);
opacity:0;
}
100%{
transform:translate(-50%,-50%) scale(1);
opacity:1;
}
}

.popup{
animation:popupShow .4s ease;
}

@keyframes glow{
0%{
box-shadow:0 0 10px #00e5ff;
}
50%{
box-shadow:0 0 30px #00e5ff;
}
100%{
box-shadow:0 0 10px #00e5ff;
}
}

.cell.win{
animation:glow .8s infinite;
background:#14532d;
}

@keyframes bounce{
0%{transform:scale(1);}
50%{transform:scale(1.12);}
100%{transform:scale(1);}
}

.mode-btn:active,
.level:active,
#restartBtn:active,
#resetBtn:active,
#playAgain:active{
animation:bounce .25s;
}

.confetti-piece{
position:absolute;
width:10px;
height:20px;
border-radius:4px;
animation:fall 3s linear forwards;
}

@keyframes fall{

0%{
transform:translateY(-100vh) rotate(0deg);
opacity:1;
}

100%{
transform:translateY(100vh) rotate(720deg);
opacity:0;
}

}

.status.win{
color:#22c55e;
font-size:26px;
animation:glow 1s infinite;
}

.status.draw{
color:#facc15;
}

button{
outline:none;
}

button:disabled{
opacity:.5;
cursor:not-allowed;
}

@media(max-width:600px){

.container{
padding:18px;
}

h1{
font-size:28px;
}

.board{
max-width:300px;
gap:10px;
}

.cell{
font-size:50px;
border-radius:12px;
}

.scoreboard h3{
font-size:18px;
}

.scoreboard p{
font-size:22px;
}

.status{
font-size:18px;
}

.mode-btn,
.level,
#restartBtn,
#resetBtn,
#playAgain{
font-size:16px;
padding:12px;
}

.popup{
padding:20px;
}

.popup h2{
font-size:24px;
}

.popup p{
font-size:18px;
}

}

@media(min-width:900px){

.container{
max-width:650px;
}

.board{
max-width:420px;
}

.cell{
font-size:72px;
}

}

::-webkit-scrollbar{
width:8px;
}

::-webkit-scrollbar-thumb{
background:#00e5ff;
border-radius:10px;
}

::-webkit-scrollbar-track{
background:#111827;
}