.balls{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:1rem;align-items:center;justify-content:center;}
.ball{width:16px;height:16px;border-radius:50%;background-color:var(--bs-primary);}
.ball.second{background-color:var(--bs-warning);}
.ball.subtract{background-color:var(--bs-danger);}
#numberLine{flex-wrap:wrap;gap:4px;}
.num{display:inline-block;min-width:32px;text-align:center;border:1px solid #ced4da;border-radius:4px;padding:2px 4px;}
.num.highlight{background-color:var(--bs-warning-bg-subtle,#fff3cd);}
.feedback-anim-correct { animation: popscale 0.7s; }
.feedback-anim-incorrect { animation: shake 0.5s; }
.feedback-anim-warning { animation: vibrate 0.7s; }
@keyframes popscale {
    0%{transform:scale(1);}
    40%{transform:scale(1.4);}
    60%{transform:scale(0.9);}
    100%{transform:scale(1);}
}
@keyframes shake {
    0% { transform: translateX(0);}
    20% { transform: translateX(-10px);}
    40% { transform: translateX(10px);}
    60% { transform: translateX(-7px);}
    80% { transform: translateX(7px);}
    100% { transform: translateX(0);}
}
@keyframes vibrate {
    0%{transform:translateX(0);}
    15%{transform:translateX(-2px);}
    30%{transform:translateX(2px);}
    45%{transform:translateX(-2px);}
    60%{transform:translateX(2px);}
    75%{transform:translateX(-2px);}
    90%{transform:translateX(2px);}
    100%{transform:translateX(0);}
}
.bi-check-circle { color: #2ecc40; font-size: 2.8rem; vertical-align: middle; }
.bi-x-circle { color: #e74c3c; font-size: 2.8rem; vertical-align: middle; }
.bi-exclamation-circle { color: #f1c40f; font-size: 2.6rem; vertical-align: middle; }
.praise-text { display: block; font-size: 1.5rem; color: #2ecc40; margin-top: 8px; font-weight: bold; letter-spacing: 1px; }
.solution-text { display: block; font-size: 1.3rem; color: #e74c3c; margin-top: 4px; }
.op-checkbox label, .table-checkbox label { margin-right: 18px; font-weight: 500; font-size:1.17rem;}
#timerBox {
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 1rem;
    font-weight: bold;
    color: #333;
    letter-spacing: 1px;
}
#logTable th, #logTable td {
    text-align: center;
    vertical-align: middle;
}
#logTable td.right {
    color: #198754;
    font-weight: bold;
}
#logTable td.wrong {
    color: #dc3545;
    font-weight: bold;
}
.hidden { display: none; }
#commutativeProblem {
    font-size: 0.9rem;
    color: #555;
    margin-top: -0.5rem;
    margin-bottom: 0.8rem;
    min-height: 1.2em;
}
.control-button-group button { margin: 0 5px; } /* Pro tlačítka Select/Deselect All */