/* 大小多少比较练习 /tool/compare-size */

.cps-mode {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    background: var(--calc-soft, #f1f5f9);
    padding: 5px;
    border-radius: 12px;
}
.cps-mode 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;
}
.cps-mode button.is-active {
    background: #fff;
    color: #d97706;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

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

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

.cps-q {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: var(--calc-text, #334155);
    margin: 4px 0 14px;
}
.cps-q b { color: #d97706; font-size: 24px; }

/* 对比区 */
.cps-arena {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.cps-side {
    flex: 1;
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    border: 3px solid var(--calc-border, #e2e8f0);
    border-radius: 18px;
    background: #fff;
    cursor: pointer;
    transition: all .15s;
}
.cps-side:hover { border-color: #fbbf24; transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .08); }
.cps-side.is-right { border-color: #22c55e; background: #f0fdf4; animation: cpsPop .4s; }
.cps-side.is-wrong { border-color: #f87171; background: #fef2f2; animation: cpsShake .4s; }
@keyframes cpsPop { 0% { transform: scale(1); } 50% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes cpsShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

.cps-vs {
    align-self: center;
    font-size: 18px;
    font-weight: 900;
    color: #f59e0b;
    background: #fffbeb;
    border: 2px solid #fcd34d;
    border-radius: 999px;
    padding: 6px 10px;
}

/* 数量组：数量越多字号越小 */
.cps-group { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; line-height: 1.2; }
.cps-group i { font-style: normal; }
.cps-n1 i, .cps-n2 i { font-size: 56px; }
.cps-n3 i, .cps-n4 i { font-size: 44px; }
.cps-n5 i, .cps-n6 i { font-size: 36px; }
.cps-n7 i, .cps-n8 i { font-size: 30px; }
.cps-n9 i { font-size: 26px; }

/* 大小 / 高矮 */
.cps-big { font-size: 96px; line-height: 1; }
.cps-small { font-size: 40px; line-height: 1; }
.cps-tall { font-size: 96px; line-height: 1; display: inline-block; transform: scaleY(1.15); }
.cps-short { font-size: 40px; line-height: 1; display: inline-block; }

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

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

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

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

[hidden] { display: none !important; }

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

@media (max-width: 640px) {
    .cps-side { min-height: 140px; }
    .cps-big, .cps-tall { font-size: 72px; }
    .cps-small, .cps-short { font-size: 32px; }
    .cps-n1 i, .cps-n2 i { font-size: 42px; }
    .cps-n3 i, .cps-n4 i { font-size: 34px; }
    .cps-n5 i, .cps-n6 i { font-size: 28px; }
    .cps-n7 i, .cps-n8 i { font-size: 24px; }
    .cps-n9 i { font-size: 21px; }
}

/* 深色模式 */
body.dark-mode .cps-mode { background: #1e293b; }
body.dark-mode .cps-mode button { color: #94a3b8; }
body.dark-mode .cps-mode button.is-active { background: #0f172a; color: #fbbf24; }
body.dark-mode .cps-intro { background: #1c1607; border-color: #92600a; color: #cbd5e1; }
body.dark-mode .cps-intro b,
body.dark-mode .cps-best,
body.dark-mode .cps-top b,
body.dark-mode .cps-q b { color: #fbbf24; }
body.dark-mode .cps-q { color: #e2e8f0; }
body.dark-mode .cps-side { background: #1e293b; border-color: #334155; }
body.dark-mode .cps-side:hover { border-color: #f59e0b; }
body.dark-mode .cps-side.is-right { background: #052e16; border-color: #22c55e; }
body.dark-mode .cps-side.is-wrong { background: #2a0a0a; border-color: #f87171; }
body.dark-mode .cps-vs { background: #1c1607; border-color: #92600a; color: #fbbf24; }
body.dark-mode .cps-no { color: #fbbf24; }
body.dark-mode .cps-end-score,
body.dark-mode .cps-panel-title,
body.dark-mode .cps-tips h4 { color: #e2e8f0; }
body.dark-mode .cps-concept { background: #1c1607; border-color: #92600a; }
body.dark-mode .cps-concept b { color: #fbbf24; }
body.dark-mode .cps-concept p { color: #94a3b8; }
body.dark-mode .cps-tips { background: #1e293b; }
body.dark-mode .cps-tips li { color: #94a3b8; }
body.dark-mode .cps-tips b { color: #fbbf24; }