/* ═══════════════════════════════════════════════════════════════════
   重音节奏游戏 Stress Beat (E7) — /chs/English/StressGame
   主色：靛蓝 #4338ca → #6366f1，和 Preposition Pictures 的青绿、
   Chinglish Fixer 的琥珀区分开。
   ═══════════════════════════════════════════════════════════════════ */

/* ── 等级选择 ─────────────────────────────────────────────────────── */
.sb-level-btn {
    border: 2px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: 0.5rem;
    padding: 0.4rem 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.sb-level-btn:hover {
    border-color: #6366f1;
}

.sb-level-btn.active {
    background: #4338ca;
    border-color: #4338ca;
    color: #fff;
}

/* ── 单词与例句 ───────────────────────────────────────────────────── */
.sb-word {
    font-size: clamp(1.9rem, 7vw, 2.8rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #4338ca;
    line-height: 1.1;
}

.sb-context {
    background: rgba(99, 102, 241, 0.09);
    border-radius: 0.5rem;
    padding: 0.6rem 0.8rem;
}

.sb-context-sentence {
    font-size: 1.05rem;
    font-weight: 600;
}

/* ── 音节按钮 ─────────────────────────────────────────────────────── */
.sb-syllables {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.sb-syl {
    min-width: 4.5rem;
    padding: 0.75rem 1rem;
    font-size: clamp(1.1rem, 4.5vw, 1.5rem);
    font-weight: 700;
    border: 2px solid #c7d2fe;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: 0.6rem;
    cursor: pointer;
    transition: transform 0.1s, background-color 0.15s, border-color 0.15s;
}

.sb-syl:hover:not(:disabled) {
    border-color: #6366f1;
    transform: translateY(-2px);
}

.sb-syl:disabled {
    cursor: default;
}

.sb-syl-correct {
    background: #198754;
    border-color: #198754;
    color: #fff;
    /* 重读音节视觉上也要「更大声」——放大一点，和听到的对应起来。 */
    transform: scale(1.06);
}

.sb-syl-wrong {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
    opacity: 0.85;
}

/* ── 反馈区 ───────────────────────────────────────────────────────── */
.sb-pattern {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.sb-review-word {
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ── 深色模式 ─────────────────────────────────────────────────────── */
[data-bs-theme="dark"] .sb-word { color: #a5b4fc; }
[data-bs-theme="dark"] .sb-context { background: rgba(99, 102, 241, 0.16); }
[data-bs-theme="dark"] .sb-syl { border-color: #4c4f79; }
[data-bs-theme="dark"] .sb-syl:hover:not(:disabled) { border-color: #818cf8; }
[data-bs-theme="dark"] .sb-level-btn.active { background: #6366f1; border-color: #6366f1; }