body { margin:0; font-family: Arial; }

.wrapper {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

h1 { margin-bottom:15px; }

.mode-select {
  display:flex;
  gap:10px;
  margin-bottom:15px;
}

.mode-select button {
  padding:8px 15px;
  border-radius:10px;
  border:none;
  background:#1e293b;
  color:white;
  cursor:pointer;
  transition:0.3s;
}

.mode-select button.active {
  background:#2563eb;
}

#status {
  margin-bottom:15px;
  font-weight:bold;
  font-size:16px;
}

.board {
  display:grid;
  grid-template-columns:repeat(3,90px);
  gap:10px;
  padding:15px;
  border-radius:20px;
  background:rgba(15,23,42,0.8);
  box-shadow:0 0 30px rgba(59,130,246,0.3);
}

.cell {
  width:90px;
  height:90px;
  background:#0f172a;
  border-radius:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  cursor:pointer;
  transition:0.3s;
}

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

.cell.win {
  background:#22c55e;
  box-shadow:0 0 20px #22c55e;
}

.restart {
  margin-top:15px;
  padding:8px 20px;
  background:#2563eb;
  border:none;
  border-radius:10px;
  cursor:pointer;
  transition:0.3s;
}

.restart:hover {
  background:#1d4ed8;
}

.back {
  margin-top:15px;
  color:#3b82f6;
  text-decoration:none;
}

.back:hover { text-decoration:underline; }

/* Floating animation */
@keyframes float1 {0%,100%{transform:translate(0,0)}50%{transform:translate(80px,60px)}}
@keyframes float2 {0%,100%{transform:translate(0,0)}50%{transform:translate(-100px,40px)}}
@keyframes float3 {0%,100%{transform:translate(0,0)}50%{transform:translate(60px,-80px)}}

.animate-float1 { animation: float1 18s ease-in-out infinite; }
.animate-float2 { animation: float2 22s ease-in-out infinite; }
.animate-float3 { animation: float3 26s ease-in-out infinite; }

.mode-select button.active {
  background: #2563eb;
  box-shadow: 0 0 15px #2563eb;
}