.sumplete-grid {
    display: grid;
    user-select: none;
    touch-action: none;
    margin: 0 auto;
}

.sumplete-cell {
    border: 1px solid #444;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    transition: background-color 0.15s, box-shadow 0.15s;
}

/* Number cell - neutral state */
.number-cell {
    background: #2a2d3a;
    cursor: pointer;
    color: #e2e8f0;
    font-size: 1.4em;
}

.number-cell:hover {
    background: #353848;
}

/* Deleted state */
.number-cell.deleted {
    background: #3b1c1c;
    color: #666;
}

.number-cell.deleted::after {
    content: '\00D7';
    position: absolute;
    font-size: 2.6em;
    color: #ef4444;
    font-weight: bold;
    line-height: 1;
}

/* Kept state */
.number-cell.kept {
    background: #1c3b2a;
    color: #e2e8f0;
    box-shadow: inset 0 0 0 3px #22c55e;
    border-radius: 4px;
}

/* Target sum cells */
.target-cell {
    background: #1a1a2e;
    color: #94a3b8;
    font-size: 1.2em;
    cursor: default;
}

.target-cell.satisfied {
    color: #22c55e;
    background: #0f2918;
}

/* Corner cell */
.corner-cell {
    background: #111118;
    border-color: #333;
}

/* Responsive cell sizing */
.sumplete-grid.size-3 {
    --cell-size: clamp(48px, 12vw, 72px);
}

.sumplete-grid.size-4 {
    --cell-size: clamp(44px, 10vw, 68px);
}

.sumplete-grid.size-5 {
    --cell-size: clamp(40px, 8vw, 64px);
}

.sumplete-grid.size-6 {
    --cell-size: clamp(34px, 6vw, 56px);
}

.sumplete-grid.size-7 {
    --cell-size: clamp(28px, 5vw, 48px);
}

/* Size selector buttons */
.size-btn {
    background: #374151;
    color: #e5e7eb;
    border: 1px solid #4b5563;
}

.size-btn:hover {
    background: #4b5563;
}

.size-btn.active {
    background: #4f46e5;
    border-color: #6366f1;
    color: #fff;
}

/* Win animation */
.number-cell.win-flash {
    animation: win-pulse 0.6s ease-in-out 3;
}

@keyframes win-pulse {
    0%, 100% { box-shadow: inset 0 0 0 3px #22c55e; }
    50% { box-shadow: inset 0 0 0 3px #86efac, 0 0 12px rgba(34, 197, 94, 0.4); }
}