/* 点物数数练习 /tool/count-objects */

.co-diff {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    background: var(--calc-soft, #f1f5f9);
    padding: 5px;
    border-radius: 12px;
}
.co-diff button {
    flex: 1;
    padding: 10px 4px;
    border: none;
    border-radius: 9px;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: var(--calc-muted, #64748b);
    cursor: pointer;
    transition: all .2s;
}
.co-diff button.is-active {
    background: #fff;
    color: #059669;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

/* 开始区 */
.co-intro {
    font-size: 15px;
    line-height: 1.9;
    color: var(--calc-text, #334155);
    background: #ecfdf5;
    border: 1px dashed #6ee7b7;
    border-radius: 10px;
    padding: 12px 14px;
    margin: 0 0 14px;
}
.co-intro b { color: #059669; }
.co-best { text-align: center; font-size: 14px; color: #059669; font-weight: 700; margin: 10px 0 0; }

/* 顶部 */
.co-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: var(--calc-muted, #64748b);
    margin-bottom: 8px;
}
.co-top b { color: #059669; font-size: 18px; }

.co-hint {
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: var(--calc-text, #334155);
    margin: 4px 0 10px;
}

/* 场景 */
.co-scene {
    position: relative;
    height: 300px;
    border: 2px dashed #a7f3d0;
    border-radius: 16px;
    background: linear-gradient(180deg, #f0fdf9, #ecfdf5);
    overflow: hidden;
    touch-action: manipulation;
}
.co-item {
    position: absolute;
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    border: none;
    background: transparent;
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: filter .15s;
    -webkit-tap-highlight-color: transparent;
}
.co-item:active { filter: brightness(1.15); }
.co-item.is-counted { cursor: default; filter: saturate(1.2); }
.co-item.is-bounce { animation: coBounce .35s; }
@keyframes coBounce { 0% { scale: 1; } 40% { scale: 1.3; } 100% { scale: 1; } }

.co-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    line-height: 22px;
    border-radius: 999px;
    background: #059669;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    font-style: normal;
    text-align: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(5, 150, 105, .4);
    animation: coBadgeIn .25s;
}
@keyframes coBadgeIn { from { transform: scale(0); } to { transform: scale(1); } }

/* 选项 */
.co-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
}
.co-ask {
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: var(--calc-text, #334155);
    margin: 0 0 2px;
}
.co-opt {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 3px solid #6ee7b7;
    background: #fff;
    font-size: 30px;
    font-weight: 900;
    color: #047857;
    cursor: pointer;
    transition: all .15s;
}
.co-opt:hover { transform: scale(1.08); border-color: #059669; }
.co-opt:disabled { cursor: default; }
.co-opt.is-right { background: #059669; border-color: #059669; color: #fff; animation: cpsPop2 .4s; }
.co-opt.is-wrong { background: #fef2f2; border-color: #f87171; color: #b91c1c; }
@keyframes cpsPop2 { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* 反馈 */
.co-feedback { text-align: center; font-size: 16px; font-weight: 700; min-height: 26px; margin: 12px 0 0; }
.co-ok { color: #16a34a; }
.co-no { color: #d97706; }

/* 结算 */
.co-end-stars { text-align: center; font-size: 46px; letter-spacing: 6px; margin: 10px 0 4px; }
.co-end-score { text-align: center; font-size: 22px; font-weight: 800; color: var(--calc-text, #334155); }
.co-end-comment { text-align: center; font-size: 15px; line-height: 1.8; color: var(--calc-muted, #64748b); margin: 8px 0 16px; }
.co-end-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* 右侧小课堂 */
.co-side-panel { width: 100%; }
.co-panel-title { font-size: 17px; font-weight: 800; color: var(--calc-text, #334155); margin: 0 0 12px; }
.co-concepts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.co-concept {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 12px;
    padding: 9px 12px;
}
.co-c-e { font-size: 26px; flex-shrink: 0; }
.co-concept b { font-size: 15px; color: #047857; }
.co-concept p { font-size: 13px; color: var(--calc-muted, #64748b); margin: 2px 0 0; }
.co-tips {
    background: var(--calc-soft, #f1f5f9);
    border-radius: 12px;
    padding: 12px 14px;
}
.co-tips h4 { font-size: 15px; color: var(--calc-text, #334155); margin: 0 0 8px; }
.co-tips ul { margin: 0; padding-left: 18px; }
.co-tips li { font-size: 13.5px; line-height: 1.9; color: var(--calc-muted, #64748b); }
.co-tips b { color: #059669; }

/* 撒花 */
.co-burst { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 5; }
.co-confetti {
    position: absolute;
    top: -30px;
    animation: coFall 1.5s ease-in forwards;
}
@keyframes coFall {
    to { transform: translateY(420px) rotate(320deg); opacity: 0; }
}

[hidden] { display: none !important; }

.calc-result-body { position: relative; }

@media (max-width: 640px) {
    .co-scene { height: 260px; }
    .co-item { width: 46px; height: 46px; margin: -23px 0 0 -23px; font-size: 34px; }
    .co-opt { width: 66px; height: 66px; font-size: 26px; }
}

/* 深色模式 */
body.dark-mode .co-diff { background: #1e293b; }
body.dark-mode .co-diff button { color: #94a3b8; }
body.dark-mode .co-diff button.is-active { background: #0f172a; color: #34d399; }
body.dark-mode .co-intro { background: #06231a; border-color: #065f46; color: #cbd5e1; }
body.dark-mode .co-intro b,
body.dark-mode .co-best,
body.dark-mode .co-top b { color: #34d399; }
body.dark-mode .co-hint,
body.dark-mode .co-ask { color: #e2e8f0; }
body.dark-mode .co-scene { background: #0b1f18; border-color: #065f46; }
body.dark-mode .co-badge { background: #10b981; }
body.dark-mode .co-opt { background: #1e293b; border-color: #065f46; color: #6ee7b7; }
body.dark-mode .co-opt:hover { border-color: #34d399; }
body.dark-mode .co-opt.is-right { background: #059669; border-color: #059669; color: #fff; }
body.dark-mode .co-opt.is-wrong { background: #2a0a0a; border-color: #f87171; color: #fca5a5; }
body.dark-mode .co-no { color: #fbbf24; }
body.dark-mode .co-end-score,
body.dark-mode .co-panel-title,
body.dark-mode .co-tips h4 { color: #e2e8f0; }
body.dark-mode .co-concept { background: #06231a; border-color: #065f46; }
body.dark-mode .co-concept b { color: #34d399; }
body.dark-mode .co-concept p { color: #94a3b8; }
body.dark-mode .co-tips { background: #1e293b; }
body.dark-mode .co-tips li { color: #94a3b8; }
body.dark-mode .co-tips b { color: #34d399; }