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

body{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(180deg,#87CEEB,#e6f9ff);
  text-align:center;
}

.background{
  position:fixed;
  width:100%;
  height:100%;
  z-index:-1;
  overflow:hidden;
}

.cloud{
  position:absolute;
  width:220px;
  height:70px;
  background:white;
  border-radius:50px;
  opacity:.85;
  animation:fly linear infinite;
}

.cloud::before,
.cloud::after{
  content:"";
  position:absolute;
  background:white;
  border-radius:50%;
}

.cloud::before{
  width:100px;
  height:80px;
  top:-40px;
  left:30px;
}

.cloud::after{
  width:120px;
  height:90px;
  top:-50px;
  right:30px;
}

.cloud:nth-child(1){top:10%;animation-duration:40s;}
.cloud:nth-child(2){top:30%;animation-duration:55s;}
.cloud:nth-child(3){top:60%;animation-duration:45s;}
.cloud:nth-child(4){top:80%;animation-duration:60s;}

@keyframes fly{
  from{transform:translateX(-300px);}
  to{transform:translateX(120vw);}
}

.game-container{
  width:90%;
  max-width:420px;
  padding:25px;
  border-radius:20px;
  backdrop-filter:blur(15px);
  background:rgba(255,255,255,0.25);
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

h1{
  font-size:clamp(2rem,5vw,3rem);
  margin-bottom:10px;
}

#status{
  margin-bottom:20px;
  color:#222;
}

.board{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  width:100%;
  aspect-ratio:1/1;
}

.cell{
  background:linear-gradient(145deg,#ffffff,#cdefff);
  border-radius:15px;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:clamp(2rem,8vw,3rem);
  cursor:pointer;
  transition:.3s;
  box-shadow:0 6px 15px rgba(0,0,0,.2);
}

.cell:hover{
  transform:scale(1.08) rotate(2deg);
}

.cell.X{color:#ff4d6d;}
.cell.O{color:#0077ff;}

button{
  margin-top:20px;
  padding:12px 20px;
  font-size:clamp(14px,3vw,18px);
  border:none;
  border-radius:12px;
  background:linear-gradient(45deg,#ff7eb3,#65d6ff);
  color:white;
  cursor:pointer;
  transition:.3s;
}

button:hover{
  transform:scale(1.1);
}

@media(max-width:480px){
  .board{gap:8px;}
}