.cell {
    background: #f8fafc;
    border-radius: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 900;
    transition: all 0.2s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.dark .cell {
    background: #1e293b;
}

.cell:hover {
    background: #f1f5f9;
}
.dark .cell:hover {
    background: #334155;
}

.cell.x {
    color: #0ea5e9; /* skyblue-500 */
}

.cell.o {
    color: #f59e0b; /* amber-500 */
}

.cell.winner {
    background: #ecfdf5; /* emerald-50 */
}
.dark .cell.winner {
    background: #064e3b;
}

/* Animations */
@keyframes popIn {
    0% { transform: scale(0.5); opacity: 0; }
    70% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

.mark-animation {
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}