/* ═══════════════════════════════════════════════════════════════════
   Sentence Dictation — hear a whole sentence, type it back (D76)
   /games/sentence-dictation

   Hero: midnight → teal → cyan (#083344 → #0e7490 → #22d3ee). Deliberately
   distinct from the two word-level listening games it sits beside on /games —
   Pinyin Dictation's green/blue and Number Dictation's amber — and from Cloze's
   violet, which is the other game built on the same sentence corpus.

   Everything colour-neutral uses Bootstrap's own CSS variables so the page
   follows the site's dark mode without a second palette to keep in step.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Hero ────────────────────────────────────────────────────────── */
.sd-hero {
    background: linear-gradient(135deg, #083344 0%, #0e7490 55%, #22d3ee 100%);
    border-radius: 0.5rem;
}

/* ── Stage ───────────────────────────────────────────────────────── */
.sd-stage {
    position: relative;
    min-height: 22rem;
}

.sd-hud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.sd-hud-item {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    white-space: nowrap;
}

.sd-hud-item small {
    display: block;
    font-weight: 400;
    font-size: 0.7rem;
    color: var(--bs-secondary-color);
}

/* ── The player: one big button, because the clip is the question ──
   Stacked rather than in a row, so the button sits centred over the speed pills. Laid out as a
   row it was pushed off-centre by whatever happened to be in .sd-play-meta beside it — and that
   text changes length mid-round ("heard 2×"), so the button drifted while you were using it. */
.sd-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    padding: 1.25rem 1rem;
    border: 1px dashed var(--bs-border-color);
    border-radius: 0.75rem;
    background: var(--bs-tertiary-bg);
}

.sd-play-btn {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    border: 0;
    font-size: 2rem;
    color: #fff;
    background: linear-gradient(135deg, #0e7490 0%, #22d3ee 100%);
    box-shadow: 0 3px 10px rgba(8, 51, 68, 0.35);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.sd-play-btn:hover:not(:disabled),
.sd-play-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(8, 51, 68, 0.45);
    color: #fff;
}

.sd-play-btn:disabled {
    opacity: 0.65;
}

/* One line is reserved whether or not there is anything to say: this row fills in mid-round
   ("heard 2×"), and without the reservation the speed pills would jump down a line under the
   thumb that is reaching for them. */
.sd-play-meta {
    font-size: 0.85rem;
    line-height: 1.2;
    min-height: 1.2em;
    color: var(--bs-secondary-color);
    text-align: center;
}

/* Playback speed, directly under the play button. Two stacked centred rows rather than one:
   the pills have to be centred on their own, or the button above them is centred over the row's
   text as well and reads as off to one side. */
.sd-speed {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    width: 100%;
}

.sd-speed-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
}

.sd-speed-note {
    font-size: 0.8rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

/* Pinyin keyboard — the same affordance the translator pages carry. Deliberately neutral
   rather than tinted: the keys and the note under them have to stay legible in both themes,
   and a coloured panel behind muted text is where that goes wrong first. */
.sd-keyboard-card {
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
}

.sd-keys {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.sd-key {
    min-width: 2.1rem;
    height: 2.1rem;
    font-size: 1rem;
    line-height: 1;
    border: 1px solid var(--bs-border-color);
    border-radius: 0.25rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    transition: background-color 0.15s, border-color 0.15s;
}

.sd-key:hover,
.sd-key:focus-visible {
    background: #0e7490;
    border-color: #0e7490;
    color: #fff;
}

.sd-typing-hint {
    margin-top: 0.35rem;
}

/* The sentence, printed only when the clip could not be fetched. */
.sd-fallback {
    margin-top: 0.5rem;
    font-size: 1.35rem;
    line-height: 1.9;
    text-align: center;
}

/* ── Answer box ──────────────────────────────────────────────────── */
.sd-input {
    font-size: 1.25rem;
    line-height: 1.8;
    min-height: 5.5rem;
}

.sd-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

.sd-btn-primary {
    background: linear-gradient(135deg, #0e7490, #22d3ee);
    border: 0;
    color: #fff;
    font-weight: 600;
}

.sd-btn-primary:hover,
.sd-btn-primary:focus-visible {
    background: linear-gradient(135deg, #0c637c, #06b6d4);
    color: #fff;
}

/* Next sentence. Orange rather than the page's teal, and solid rather than an outline: after an
   answer is checked this is the only live control on the board, sitting under a reveal that is
   already full of green and red marking, so it has to be the one thing that reads as a button.
   #c2410c is dark enough to carry white text at 5:1 — a lighter orange looks better and fails. */
.sd-btn-next {
    background: #c2410c;
    border: 0;
    color: #fff;
    font-weight: 600;
}

.sd-btn-next:hover,
.sd-btn-next:focus-visible {
    background: #9a3412;
    color: #fff;
}

/* ── Marking ─────────────────────────────────────────────────────── */
.sd-feedback {
    margin-top: 1rem;
    padding: 0.9rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--bs-border-color);
}

.sd-feedback.sd-perfect {
    border-color: rgba(25, 135, 84, 0.45);
    background: rgba(25, 135, 84, 0.08);
}

.sd-feedback.sd-partial {
    border-color: rgba(255, 193, 7, 0.5);
    background: rgba(255, 193, 7, 0.1);
}

.sd-verdict {
    font-weight: 700;
    margin-bottom: 0.4rem;
}

.sd-marked {
    font-size: 1.35rem;
    line-height: 2;
    word-break: break-word;
}

.sd-atom {
    border-radius: 0.2rem;
    padding: 0 0.12em;
}

.sd-hit {
    color: #157347;
}

.sd-miss {
    color: #b02a37;
    background: rgba(220, 53, 69, 0.14);
    text-decoration: underline;
    text-decoration-style: wavy;
    text-underline-offset: 0.25em;
}

.sd-yours {
    margin-top: 0.35rem;
    font-size: 0.95rem;
    color: var(--bs-secondary-color);
    word-break: break-word;
}

.sd-reveal-line {
    margin-top: 0.6rem;
    font-size: 0.95rem;
}

.sd-reveal-sentence {
    font-size: 1.2rem;
    line-height: 1.9;
}

/* ── Results review ──────────────────────────────────────────────── */
.sd-review-item {
    display: flex;
    gap: 0.6rem;
    align-items: flex-start;
    padding: 0.6rem 0;
    border-top: 1px solid var(--bs-border-color);
}

.sd-review-item:first-of-type {
    border-top: 0;
}

.sd-review-body {
    min-width: 0;
}

.sd-review-marked {
    font-size: 1.1rem;
    line-height: 1.9;
    word-break: break-word;
}

.sd-review-yours,
.sd-review-en {
    font-size: 0.85rem;
    color: var(--bs-secondary-color);
    word-break: break-word;
}

/* ── Overlays ────────────────────────────────────────────────────── */
.sd-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
    padding: 1.75rem 1rem;
}

.sd-big-icon {
    font-size: 2.6rem;
    color: #0e7490;
}

.sd-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.sd-picker-label {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-secondary-color);
    margin-right: 0.25rem;
}

.sd-pick-btn {
    border: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: 999px;
    padding: 0.25rem 0.85rem;
    font-size: 0.9rem;
}

.sd-pick-btn.active {
    background: #0e7490;
    border-color: #0e7490;
    color: #fff;
}

.sd-final-score {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    color: #0e7490;
}

.sd-final-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
}

/* ── Worked examples (the JavaScript-off half of the page) ───────── */
.sd-example-sentence {
    font-size: 1.3rem;
    line-height: 1.9;
}

.sd-chip {
    display: inline-block;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
    background: #0e7490;
}

.sd-chip-medium {
    background: #0891b2;
}

.sd-chip-long {
    background: #155e75;
}

/* ── Dark mode: only where a fixed colour would not survive it ───── */
[data-bs-theme="dark"] .sd-hit {
    color: #4ade80;
}

[data-bs-theme="dark"] .sd-miss {
    color: #fca5a5;
    background: rgba(220, 53, 69, 0.22);
}

[data-bs-theme="dark"] .sd-big-icon,
[data-bs-theme="dark"] .sd-final-score {
    color: #22d3ee;
}

[data-bs-theme="dark"] .sd-pick-btn.active {
    background: #0891b2;
    border-color: #0891b2;
}

[data-bs-theme="dark"] .sd-key:hover,
[data-bs-theme="dark"] .sd-key:focus-visible {
    background: #0891b2;
    border-color: #0891b2;
}