.cell {
    width: 30px;
    height: 30px;
    background-color: #cbd5e1; /* slate-300 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-family: monospace;
    font-size: 1.2rem;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    border-top: 2px solid #f1f5f9;
    border-left: 2px solid #f1f5f9;
    border-bottom: 2px solid #94a3b8;
    border-right: 2px solid #94a3b8;
}

.dark .cell {
    background-color: #475569; /* slate-600 */
    border-top: 2px solid #64748b;
    border-left: 2px solid #64748b;
    border-bottom: 2px solid #1e293b;
    border-right: 2px solid #1e293b;
}

.cell.revealed {
    background-color: #e2e8f0; /* slate-200 */
    border: 1px solid #cbd5e1;
}

.dark .cell.revealed {
    background-color: #334155; /* slate-700 */
    border: 1px solid #475569;
}

.cell.mine {
    background-color: #fca5a5; /* red-300 */
}
.cell.flagged {
    color: #e11d48; /* rose-600 */
}

/* Numbers */
.num-1 { color: #2563eb; } /* blue */
.num-2 { color: #16a34a; } /* green */
.num-3 { color: #dc2626; } /* red */
.num-4 { color: #7c3aed; } /* violet */
.num-5 { color: #db2777; } /* pink */
.num-6 { color: #0891b2; } /* cyan */
.num-7 { color: #0f172a; } /* slate */
.num-8 { color: #9ca3af; } /* gray */

.dark .num-1 { color: #60a5fa; }
.dark .num-2 { color: #4ade80; }
.dark .num-3 { color: #f87171; }
.dark .num-4 { color: #a78bfa; }