:root {
    --cell-size: 100px;
    --player-a-color: #0d6efd;
    --player-b-color: #dc3545;
}

.game-board {
    width: calc(var(--cell-size) * 3);
    height: calc(var(--cell-size) * 3);
    background-color: white;
    border-radius: 10px;
    overflow: hidden;
}

.cell {
    width: var(--cell-size);
    height: var(--cell-size);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cell:hover {
    background-color: #f8f9fa;
}

.cell.x {
    color: var(--player-a-color);
}

.cell.o {
    color: var(--player-b-color);
}

.cell.winner {
    background-color: #d1e7dd;
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.05); }
}

#status-card {
    transition: all 0.3s ease;
}

.bg-player-a {
    background-color: #cfe2ff;
    color: var(--player-a-color);
}

.bg-player-b {
    background-color: #f8d7da;
    color: var(--player-b-color);
}