/* Speaking Practice (/games/speaking-practice and /chs/English/Speaking) */

.sp-hero {
    background:
        radial-gradient(circle at top right, rgba(255, 255, 255, 0.18), transparent 38%),
        linear-gradient(135deg, #7c2d92 0%, #b5179e 50%, #d62828 100%);
}

.sp-hero .hero-kicker {
    letter-spacing: 0.14em;
    opacity: 0.82;
}

.sp-hero .hero-copy {
    max-width: 42rem;
    opacity: 0.92;
}

.sp-quiz-card {
    min-height: 30rem;
}

.sp-start-orb {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #b5179e 0%, #7c2d92 100%);
    color: #fff;
    font-size: 2.3rem;
    box-shadow: 0 18px 40px rgba(181, 23, 158, 0.28);
}

.sp-start-copy {
    max-width: 30rem;
}

/* The prompt the learner reads aloud */
.sp-target {
    padding: 1rem 0.5rem;
}

.sp-target-hanzi {
    font-size: 3.4rem;
    line-height: 1.15;
    font-weight: 700;
}

.sp-target-pinyin {
    font-size: 1.6rem;
    font-weight: 600;
    color: #b5179e;
}

[data-bs-theme="dark"] .sp-target-pinyin {
    color: #e879c7;
}

.sp-target-sentence {
    font-size: 1.9rem;
    line-height: 1.35;
    font-weight: 600;
}

.sp-target-meaning {
    font-size: 1.15rem;
}

/* Big round mic button with a pulsing ring while listening */
.sp-mic-btn {
    position: relative;
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    font-size: 2rem;
    border: none;
    color: #fff;
    background: linear-gradient(135deg, #b5179e 0%, #7c2d92 100%);
    box-shadow: 0 10px 26px rgba(124, 45, 146, 0.35);
    transition: transform 0.15s ease;
}

.sp-mic-btn:hover:not(:disabled) { transform: scale(1.04); }
.sp-mic-btn:disabled { opacity: 0.55; }

.sp-mic-btn.listening {
    background: linear-gradient(135deg, #d62828 0%, #b5179e 100%);
    animation: sp-mic-pulse 1.1s ease-in-out infinite;
}

/* Expanding ring behind the mic while it listens */
.sp-mic-btn.listening::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    border: 3px solid rgba(214, 40, 40, 0.55);
    animation: sp-ring 1.1s ease-out infinite;
}

@keyframes sp-mic-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.07); }
}

@keyframes sp-ring {
    0% { transform: scale(0.9); opacity: 0.8; }
    100% { transform: scale(1.5); opacity: 0; }
}

.sp-mic-hint {
    min-height: 1.3rem;
}

/* Per-word grading chips (sentence mode "we heard" line) */
.sp-word {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    margin: 0.1rem 0.15rem;
    border-radius: 6px;
    font-weight: 600;
}

.sp-word-ok { background: rgba(106, 170, 100, 0.25); color: #14532d; }
.sp-word-miss { background: rgba(120, 124, 126, 0.18); color: #6c757d; text-decoration: line-through; }

[data-bs-theme="dark"] .sp-word-ok { color: #86efac; }
[data-bs-theme="dark"] .sp-word-miss { color: #adb5bd; }

/* Metric tiles in the progress sidebar */
.sp-metric {
    border: 1px solid rgba(181, 23, 158, 0.15);
}

.sp-metric-perfect { background: rgba(106, 170, 100, 0.14); }
.sp-metric-close { background: rgba(201, 180, 88, 0.16); }
.sp-metric-wrong { background: rgba(120, 124, 126, 0.14); }
.sp-metric-streak { background: rgba(181, 23, 158, 0.10); }

[data-bs-theme="dark"] .sp-metric {
    border-color: var(--pl-border, #3a4049);
}