body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: linear-gradient(135deg, #e7f1ff 0%, #f8f9fa 100%);
      transition: background 0.3s ease;
      min-height: 100vh;
    }

    .container {
      background: rgba(255,255,255,0.95);
      border-radius: 18px;
      box-shadow: 0 4px 32px rgba(13,110,253,0.10);
      padding: 2rem 1rem;
    }

    .cell {
      border: 2px solid #0d6efd;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2.5rem;
      cursor: pointer;
      transition: background 0.3s, color 0.3s, box-shadow 0.3s;
      background: #fff;
      box-shadow: 0 2px 8px rgba(13,110,253,0.08);
      border-radius: 12px;
      user-select: none;
    }

    .cell.x {
      color: #0d6efd;
      font-weight: bold;
      text-shadow: 0 2px 8px #0d6efd33;
    }
    .cell.o {
      color: #dc3545;
      font-weight: bold;
      text-shadow: 0 2px 8px #dc354533;
    }

    .cell:hover {
      background-color: #e7f1ff;
      box-shadow: 0 4px 16px rgba(13,110,253,0.15);
    }

    .cell.taken {
      cursor: not-allowed;
      opacity: 0.7;
    }

    .cell.winner {
      background-color: #ffc107 !important;
      color: black;
      box-shadow: 0 0 16px #ffc10799;
    }

    #status {
      font-weight: 600;
      font-size: 1.2rem;
      color: #212529;
    }

    #player1,
    #player2 {
      font-weight: bold;
      color: #0d6efd;
      font-size: 1.1rem;
    }

    .modal-content {
      border-radius: 16px;
      box-shadow: 0 4px 24px rgba(13,110,253,0.12);
    }
    .modal-title {
      color: #0d6efd;
    }

    footer {
      border-top: 1px solid #444;
      background: #212529;
      color: #fff;
      letter-spacing: 1px;
    }

    @media (max-width: 768px) {
      .cell {
        height: 80px;
        font-size: 2rem;
      }
      #status {
        font-size: 1.1rem;
      }
    }