/* ============================================================
   Kids Kingdom - Subtraction / Multiplication / Division Tools
   Reuses the exact same visual language as addition.css:
   .addition-tool, .addition-pickers, .addition-picker,
   .addition-picker-btn, .addition-picker-value,
   .addition-show-btn, .addition-equation, .addition-group,
   .addition-symbol, .addition-total, .addition-total-number,
   .addition-steps-section and everything inside it.

   This file only adds a FEW new pieces:
   1. Strikethrough style for "taken away" objects (subtraction)
   2. Multiple small groups side-by-side (multiplication)
   3. Split-into-equal-groups layout (division)
   ============================================================ */

/* ================= SUBTRACTION: crossed-out objects ================= */
.obj-removed {
    opacity: 0.25;
    text-decoration: line-through;
    text-decoration-color: #c0392b;
    text-decoration-thickness: 3px;
}

/* ================= MULTIPLICATION: multiple small groups ================= */
.mult-groups-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-bottom: 20px;
}

.mult-mini-group {
    background: #fff;
    border: 2px solid var(--color-bg);
    border-radius: 12px;
    padding: 10px;
    min-width: 70px;
    min-height: 70px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 4px;
}

.mult-mini-group .obj {
    font-size: 1.3rem;
    opacity: 0;
    transform: scale(0.5);
    animation: additionPop 0.35s ease forwards;
}

/* ================= DIVISION: equal split groups ================= */
.div-groups-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

.div-mini-group {
    background: var(--color-bg);
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    padding: 10px;
    min-width: 70px;
    min-height: 70px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 4px;
}

.div-mini-group .obj {
    font-size: 1.3rem;
    opacity: 0;
    transform: scale(0.5);
    animation: additionPop 0.35s ease forwards;
}

.div-mini-group-label {
    width: 100%;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 4px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 767px) {
    .mult-mini-group,
    .div-mini-group {
        min-width: 55px;
        min-height: 55px;
        padding: 6px;
    }

    .mult-mini-group .obj,
    .div-mini-group .obj {
        font-size: 1.05rem;
    }
}