.task-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.task-card {
    position: relative;
    border-radius: 28px;
    padding: var(--space-4);
    cursor: pointer;
    color: var(--white);
    text-align: center;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.20), rgba(255,255,255,0.08)),
        radial-gradient(circle at 22% 18%, rgba(255,255,255,0.26), transparent 42%);
    border: 2px solid rgba(255,255,255,0.18);
    box-shadow:
        0 16px 40px rgba(0,0,0,0.25),
        inset 0 0 20px rgba(255,255,255,0.05);
    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease,
        filter 0.22s ease;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.task-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow:
        0 22px 50px rgba(0,0,0,0.35),
        0 0 25px rgba(255,255,255,0.14),
        inset 0 0 24px rgba(255,255,255,0.08);
    filter: brightness(1.04);
}

.task-icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 14px;
    border-radius: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.6rem;
    box-shadow:
        inset 0 2px 10px rgba(255,255,255,0.52),
        0 10px 25px rgba(0,0,0,0.25);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.task-card:hover .task-icon {
    transform: translateY(-2px) scale(1.08);
    filter: brightness(1.05);
}

.task-title {
    position: relative;
    z-index: 1;
    font-size: 1.45rem;
    font-weight: 900;
    margin-bottom: var(--space-1);
    text-shadow: 0 2px 10px rgba(0,0,0,0.25);
}

.task-desc {
    position: relative;
    z-index: 1;
    font-size: 0.98rem;
    color: var(--text-soft);
    line-height: 1.45;
}

.multiply:hover { border-color: rgba(255, 217, 61, 0.8); }
.multiply .task-icon {
    color: #8c5800;
    background: linear-gradient(180deg, #fff3a6, #ffd93d);
    box-shadow: 0 6px 18px rgba(255, 217, 61, 0.42);
}

.divide:hover { border-color: rgba(0, 234, 255, 0.85); }
.divide .task-icon {
    color: #006f88;
    background: linear-gradient(180deg, #c8fcff, #73efff);
    box-shadow: 0 6px 18px rgba(0, 234, 255, 0.42);
}

.weight:hover { border-color: rgba(54, 241, 167, 0.85); }
.weight .task-icon {
    color: #006f54;
    background: linear-gradient(180deg, #d8fff0, #36f1a7);
    box-shadow: 0 6px 18px rgba(54, 241, 167, 0.42);
}

.calc:hover { border-color: rgba(255, 110, 199, 0.85); }
.calc .task-icon {
    color: #7a0f59;
    background: linear-gradient(180deg, #ffd6ef, #ff8fd1);
    box-shadow: 0 6px 18px rgba(255, 110, 199, 0.42);
}

.missing:hover { border-color: rgba(255, 255, 255, 0.75); }
.missing .task-icon {
    color: #5b2b00;
    background: linear-gradient(180deg, #fff3c8, #ffcb66);
    box-shadow: 0 6px 18px rgba(255, 203, 102, 0.42);
}

.sequence:hover { border-color: rgba(255, 214, 102, 0.85); }
.sequence .task-icon {
    color: #5b3a00;
    background: linear-gradient(180deg, #fff3c8, #ffcb66);
    box-shadow: 0 6px 18px rgba(255, 214, 102, 0.42);
}

.story:hover { border-color: rgba(170, 210, 255, 0.85); }
.story .task-icon {
    color: #1c4c7a;
    background: linear-gradient(180deg, #e2f2ff, #9fd3ff);
    box-shadow: 0 6px 18px rgba(170, 210, 255, 0.42);
}

.minta:hover { border-color: rgba(24, 145, 82, 0.9); }
.minta .task-icon {
    color: #55fa5d;
    background: linear-gradient(180deg, #dcfff0, #7cf0bd);
    box-shadow: 0 6px 18px rgba(124, 240, 189, 0.42);
}

.memory:hover { border-color: rgba(173, 255, 212, 0.9); }
.memory .task-icon {
    color: #135c46;
    background: linear-gradient(180deg, #dcfff0, #7cf0bd);
    box-shadow: 0 6px 18px rgba(173, 255, 212, 0.42);
}

.money:hover { border-color: rgba(255, 216, 102, 0.9); }
.money .task-icon {
    color: #6b4a00;
    background: linear-gradient(180deg, #fff5bf, #ffd54a);
    box-shadow: 0 6px 18px rgba(255, 216, 102, 0.42);
}

.table:hover { border-color: rgba(255, 188, 100, 0.9); }
.table .task-icon {
    color: #003b5c;
    background: linear-gradient(180deg, #c8ecff, #7fd0ff);
    box-shadow: 0 6px 18px rgba(127, 208, 255, 0.42);
}

.division-table:hover { border-color: rgba(205, 92, 209, 0.9); }
.division-table .task-icon {
    color: #0b3f68;
    background: linear-gradient(180deg, #dff4ff, #92dfff);
    box-shadow: 0 6px 18px rgba(146, 223, 255, 0.42);
}

.snake:hover { border-color: rgba(0, 255, 180, 0.9); }
.snake .task-icon {
    color: #02ffb7;
    background: linear-gradient(180deg, #d7fff3, #79f0c2);
    box-shadow: 0 6px 18px rgba(0, 255, 180, 0.42);
}

.colors:hover { border-color: rgba(255, 210, 80, 0.9); }
.colors .task-icon {
    color: #6a2d00;
    background: linear-gradient(180deg, #ffe7b8, #ffb84d);
    box-shadow: 0 6px 18px rgba(255, 184, 77, 0.42);
}

.zarojelezes:hover { border-color: rgba(255, 98, 255, 0.75); }
.zarojelezes .task-icon {
    color: #0a0f2a;
    background: linear-gradient(180deg, #cffff1, #883fff);
    box-shadow: 0 6px 18px rgba(24, 248, 192, 0.42);
}

.paddle:hover { border-color: rgba(0, 255, 200, 0.75); }
.paddle .task-icon {
    color: #001a14;
    background: linear-gradient(180deg, #8effe0, #00eaff);
    box-shadow: 0 6px 18px rgba(0, 234, 255, 0.45);
}
.thinking:hover { 
    border-color: #00ff87; 
}

.thinking .task-icon {
    color: #ffffff;
    background: linear-gradient(135deg, #00ff87, #00b84c); 
    box-shadow: 0 8px 20px rgba(0, 255, 135, 0.4); 
}