body {
  background: #f2f2f2;
  font-family: 'Segoe UI', sans-serif;
}

/* Glass + Neumorphism */
.game-card {
  width: 330px;
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(12px);
  border-radius: 20px;
  box-shadow: 0 15px 40px rgba(0,0,0,.2);
}

/* Board */
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.cell {
  aspect-ratio: 1 / 1;
  font-size: 2.5rem;
  font-weight: 700;
  border-radius: 16px;
  border: none;
  background: #e0e0e0;
  box-shadow: 0px 0px 10px #bebebe,
              0px 0px 10px #ffffff;
  cursor: pointer;
}

.cell.X { color: #fff; }
.cell.O { color: rgb(255,179,0); }

/* .cell.win {
  animation: glow 0.6s infinite alternate;
} */

@keyframes glow {
  from {
    box-shadow:
      0 0 5px #2ecc71,
      0 0 10px #2ecc71;
  }
  to {
    box-shadow:
      0 0 12px #27ae60,
      0 0 25px #27ae60;
  }
}

.cell.win {
  animation: glow 0.7s infinite alternate;
  border-color: #28a745;
}


/* Dark mode */
body.dark {
  background: #111;
  color: #fff;
}

body.dark .game-card {
  background: rgba(34,34,34,.8);
}

body.dark .cell {
  background: #333;
  box-shadow: inset 3px 3px 10px #111,
              inset -3px -3px 10px #444;
}

/* Responsive */
@media (max-width: 576px) {
  .game-card { width: 95%; }
  .cell { font-size: 2rem; }

}

html, body {
  height: 100%;
  /* margin: 0; */
  overflow: hidden; /* removes vertical scroll */
}

.app-wrapper {
  min-height: 100dvh; /* modern mobile-safe viewport */
}

#winLine {
  position: absolute;
  width: 300px;
  height: 300px;
  pointer-events: none;
}

#winLine line {
  stroke: #28a745;
  stroke-width: 6;
  stroke-linecap: round;
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: drawLine 0.4s forwards;
}

@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}

.dark .btn {
    color: #fff;
}