/* ============================================ */
/* === СТИЛИ КАТЕГОРИИ «АУДИРОВАНИЕ» === */
/* ============================================ */
/* Содержит стили для всех 6 сервисов категории. */
/* Классы имеют префиксы:                         */
/*   aw-  — Аудио-слова (Audio Words)             */
/*   nm-  — Числа и даты (Numbers)                */
/*   dq-  — Диалог с вопросами (Dialogue Q)       */
/*   mc-  — Множественный выбор (Multiple Choice) */
/*   dt-  — Диктант (Dictation)                   */
/*   pd-  — Подкаст (Podcast)                     */
/* ============================================ */

/* ============================================ */
/* === СЕРВИС: АУДИО-СЛОВА (aw-) === */
/* ============================================ */

.aw-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.aw-screen {
    display: none;
    animation: awFadeIn 0.4s ease;
}

.aw-screen.active {
    display: block;
}

@keyframes awFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================ */
/* === СТАРТОВЫЙ ЭКРАН === */
/* ============================================ */
.aw-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.aw-start-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.aw-start-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.aw-start-desc {
    font-size: 1.1rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 32px;
}

.aw-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.aw-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}

.aw-rule:last-child {
    margin-bottom: 0;
}

.aw-rule-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1.3;
}

.aw-start-btn {
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

/* ============================================ */
/* === ВЫБОР УРОВНЯ === */
/* ============================================ */
.aw-levels-header {
    text-align: center;
    margin-bottom: 32px;
}

.aw-levels-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.aw-levels-subtitle {
    font-size: 1.05rem;
    color: var(--light);
}

.aw-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.aw-level-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.aw-level-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.aw-level-card[data-level="easy"]:hover   { border-color: #10B981; }
.aw-level-card[data-level="medium"]:hover { border-color: #F59E0B; }
.aw-level-card[data-level="hard"]:hover   { border-color: #EF4444; }

.aw-level-icon {
    font-size: 3rem;
    margin-bottom: 14px;
    line-height: 1;
}

.aw-level-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.aw-level-count {
    font-size: 0.85rem;
    color: var(--light);
}

/* ============================================ */
/* === ЭКРАН ИГРЫ === */
/* ============================================ */
.aw-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.aw-game-progress {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.aw-game-progress strong {
    color: var(--primary);
}

.aw-game-level {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
}

.aw-game-score {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.aw-game-score strong {
    color: #10B981;
}

.aw-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.aw-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

/* Карточка с аудио */
.aw-audio-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.aw-audio-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.aw-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 40px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

.aw-play-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.4);
}

.aw-play-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.aw-play-btn.playing {
    background: #10B981;
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.3);
}

.aw-play-icon {
    font-size: 1.6rem;
}

.aw-audio-hint {
    font-size: 0.9rem;
    color: var(--light);
    margin-top: 16px;
    font-style: italic;
}

/* Варианты перевода */
.aw-options-label {
    text-align: center;
    font-size: 0.95rem;
    color: var(--light);
    margin-bottom: 16px;
    font-weight: 600;
}

.aw-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.aw-option {
    padding: 20px 20px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: center;
    line-height: 1.4;
}

.aw-option:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.aw-option:disabled {
    cursor: default;
}

.aw-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
}

.aw-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.aw-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: awFadeIn 0.3s ease;
}

.aw-feedback.correct {
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
}

.aw-feedback.wrong {
    background: #FEF2F2;
    border-left: 4px solid #EF4444;
}

.aw-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.aw-feedback.correct .aw-feedback-title {
    color: #166534;
}

.aw-feedback.wrong .aw-feedback-title {
    color: #991B1B;
}

.aw-feedback-text {
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.6;
}

.aw-feedback-text strong {
    color: var(--primary);
    font-weight: 700;
}

.aw-word-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.aw-word-chip {
    display: inline-block;
    background: var(--white);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--light);
    font-weight: 600;
    border: 1px solid #E2E8F0;
}

.aw-next-wrapper {
    margin-top: 20px;
    text-align: center;
}

.aw-next-wrapper .btn {
    min-width: 240px;
}

/* ============================================ */
/* === ЭКРАН РЕЗУЛЬТАТА === */
/* ============================================ */
.aw-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.aw-result-emoji {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.aw-result-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 24px;
}

.aw-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.aw-result-stat {
    text-align: center;
}

.aw-result-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 6px;
}

.aw-result-stat-label {
    font-size: 0.85rem;
    color: var(--light);
    font-weight: 500;
}

.aw-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.aw-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.aw-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.aw-result-actions .btn {
    width: 100%;
    min-width: 0;
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 768px) {
    .aw-start,
    .aw-result-card {
        padding: 36px 24px;
    }

    .aw-start-title,
    .aw-result-title {
        font-size: 1.6rem;
    }

    .aw-levels-title {
        font-size: 1.4rem;
    }

    .aw-levels-grid {
        grid-template-columns: 1fr;
    }

    .aw-audio-card {
        padding: 32px 20px;
    }

    .aw-play-btn {
        padding: 16px 28px;
        font-size: 1rem;
    }

    .aw-play-icon {
        font-size: 1.4rem;
    }

    .aw-options {
        grid-template-columns: 1fr;
    }

    .aw-option {
        padding: 16px 14px;
        font-size: 1rem;
    }

    .aw-result-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .aw-result-actions {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* ============================================ */
/* === СЕРВИС: ЧИСЛА И ДАТЫ (nm-) === */
/* ============================================ */

.nm-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.nm-screen {
    display: none;
    animation: nmFadeIn 0.4s ease;
}

.nm-screen.active {
    display: block;
}

@keyframes nmFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================ */
/* === СТАРТОВЫЙ ЭКРАН === */
/* ============================================ */
.nm-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.nm-start-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.nm-start-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.nm-start-desc {
    font-size: 1.1rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 32px;
}

.nm-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.nm-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}

.nm-rule:last-child {
    margin-bottom: 0;
}

.nm-rule-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1.3;
}

.nm-start-btn {
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

/* ============================================ */
/* === ВЫБОР УРОВНЯ === */
/* ============================================ */
.nm-levels-header {
    text-align: center;
    margin-bottom: 32px;
}

.nm-levels-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.nm-levels-subtitle {
    font-size: 1.05rem;
    color: var(--light);
}

.nm-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.nm-level-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.nm-level-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.nm-level-card[data-level="easy"]:hover   { border-color: #10B981; }
.nm-level-card[data-level="medium"]:hover { border-color: #F59E0B; }
.nm-level-card[data-level="hard"]:hover   { border-color: #EF4444; }

.nm-level-icon {
    font-size: 3rem;
    margin-bottom: 14px;
    line-height: 1;
}

.nm-level-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.nm-level-count {
    font-size: 0.85rem;
    color: var(--light);
}

/* ============================================ */
/* === ЭКРАН ИГРЫ === */
/* ============================================ */
.nm-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.nm-game-progress {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.nm-game-progress strong {
    color: var(--primary);
}

.nm-game-level {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
}

.nm-game-score {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.nm-game-score strong {
    color: #10B981;
}

.nm-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.nm-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

/* Аудио-карточка */
.nm-audio-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.nm-audio-type {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--primary);
    background: rgba(124, 58, 237, 0.12);
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
}

.nm-audio-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.nm-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 40px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

.nm-play-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.4);
}

.nm-play-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.nm-play-btn.playing {
    background: #10B981;
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.3);
}

.nm-play-icon {
    font-size: 1.6rem;
}

.nm-audio-hint {
    font-size: 0.9rem;
    color: var(--light);
    margin-top: 16px;
    font-style: italic;
}

/* Варианты */
.nm-options-label {
    text-align: center;
    font-size: 0.95rem;
    color: var(--light);
    margin-bottom: 16px;
    font-weight: 600;
}

.nm-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.nm-option {
    padding: 22px 20px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: center;
    line-height: 1.4;
    letter-spacing: 0.5px;
}

.nm-option:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.nm-option:disabled {
    cursor: default;
}

.nm-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
}

.nm-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.nm-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: nmFadeIn 0.3s ease;
}

.nm-feedback.correct {
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
}

.nm-feedback.wrong {
    background: #FEF2F2;
    border-left: 4px solid #EF4444;
}

.nm-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.nm-feedback.correct .nm-feedback-title {
    color: #166534;
}

.nm-feedback.wrong .nm-feedback-title {
    color: #991B1B;
}

.nm-feedback-text {
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.6;
}

.nm-feedback-text strong {
    color: var(--primary);
    font-weight: 700;
}

.nm-next-wrapper {
    margin-top: 20px;
    text-align: center;
}

.nm-next-wrapper .btn {
    min-width: 240px;
}

/* ============================================ */
/* === ЭКРАН РЕЗУЛЬТАТА === */
/* ============================================ */
.nm-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.nm-result-emoji {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.nm-result-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 24px;
}

.nm-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.nm-result-stat {
    text-align: center;
}

.nm-result-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 6px;
}

.nm-result-stat-label {
    font-size: 0.85rem;
    color: var(--light);
    font-weight: 500;
}

.nm-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.nm-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.nm-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.nm-result-actions .btn {
    width: 100%;
    min-width: 0;
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 768px) {
    .nm-start,
    .nm-result-card {
        padding: 36px 24px;
    }

    .nm-start-title,
    .nm-result-title {
        font-size: 1.6rem;
    }

    .nm-levels-title {
        font-size: 1.4rem;
    }

    .nm-levels-grid {
        grid-template-columns: 1fr;
    }

    .nm-audio-card {
        padding: 28px 20px;
    }

    .nm-play-btn {
        padding: 16px 28px;
        font-size: 1rem;
    }

    .nm-options {
        grid-template-columns: 1fr;
    }

    .nm-option {
        padding: 18px 14px;
        font-size: 1.05rem;
    }

    .nm-result-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .nm-result-actions {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* ============================================ */
/* === СЕРВИС: ДИАЛОГ С ВОПРОСАМИ (dq-) === */
/* ============================================ */

.dq-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.dq-screen {
    display: none;
    animation: dqFadeIn 0.4s ease;
}

.dq-screen.active {
    display: block;
}

@keyframes dqFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================ */
/* === СТАРТОВЫЙ ЭКРАН === */
/* ============================================ */
.dq-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.dq-start-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.dq-start-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.dq-start-desc {
    font-size: 1.1rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 32px;
}

.dq-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.dq-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}

.dq-rule:last-child {
    margin-bottom: 0;
}

.dq-rule-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1.3;
}

.dq-start-btn {
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

/* ============================================ */
/* === ВЫБОР ДИАЛОГА === */
/* ============================================ */
.dq-list-header {
    text-align: center;
    margin-bottom: 32px;
}

.dq-list-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.dq-list-subtitle {
    font-size: 1.05rem;
    color: var(--light);
}

.dq-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

.dq-dialog-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 24px 28px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    display: flex;
    gap: 24px;
    align-items: center;
}

.dq-dialog-card:hover {
    border-color: var(--primary);
    transform: translateX(4px);
    box-shadow: var(--shadow-hover);
}

.dq-dialog-icon {
    font-size: 2.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.dq-dialog-info {
    flex-grow: 1;
}

.dq-dialog-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.dq-dialog-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.88rem;
    color: var(--light);
}

.dq-dialog-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.dq-dialog-arrow {
    font-size: 1.5rem;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.dq-dialog-card:hover .dq-dialog-arrow {
    transform: translateX(4px);
}

/* ============================================ */
/* === ЭКРАН ДИАЛОГА (прослушивание) === */
/* ============================================ */
.dq-player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.dq-player-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
}

/* Большая кнопка Play */
.dq-player-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.dq-player-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.dq-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 44px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

.dq-play-btn:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.4);
}

.dq-play-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.dq-play-btn.playing {
    background: #10B981;
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.3);
}

.dq-play-icon {
    font-size: 1.7rem;
}

.dq-player-hint {
    font-size: 0.9rem;
    color: var(--light);
    margin-top: 16px;
    font-style: italic;
}

/* Скорости воспроизведения */
.dq-speed-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.dq-speed-btn {
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.dq-speed-btn:hover {
    background: var(--white);
}

.dq-speed-btn.active {
    background: var(--white);
    border-color: var(--primary);
    color: var(--primary);
}

/* Прогресс воспроизведения */
.dq-player-progress {
    margin-top: 24px;
    font-size: 0.95rem;
    color: var(--dark);
    font-weight: 600;
}

.dq-player-progress strong {
    color: var(--primary);
}

/* Кнопки под плеером */
.dq-player-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.dq-player-actions .btn {
    min-width: 200px;
}

/* Транскрипт */
.dq-transcript {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
    margin-bottom: 24px;
    animation: dqFadeIn 0.3s ease;
}

.dq-transcript-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dq-transcript-line {
    margin-bottom: 14px;
    line-height: 1.6;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.dq-transcript-line:last-child {
    margin-bottom: 0;
}

.dq-speaker {
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--white);
    background: var(--primary);
    padding: 3px 10px;
    border-radius: 20px;
    flex-shrink: 0;
    margin-top: 3px;
}

.dq-speaker-b {
    background: var(--secondary);
}

.dq-transcript-text {
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.6;
}

/* ============================================ */
/* === ЭКРАН ВОПРОСА === */
/* ============================================ */
.dq-q-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.dq-q-progress {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.dq-q-progress strong {
    color: var(--primary);
}

.dq-q-score {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.dq-q-score strong {
    color: #10B981;
}

.dq-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.dq-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

.dq-question-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
}

.dq-q-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.dq-q-text {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.4;
}

/* Варианты ответа */
.dq-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.dq-option {
    padding: 18px 24px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 10px;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: left;
    line-height: 1.5;
}

.dq-option:hover:not(:disabled) {
    border-color: var(--primary);
    background: #FAFAFE;
    transform: translateX(4px);
}

.dq-option:disabled {
    cursor: default;
}

.dq-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
    font-weight: 600;
}

.dq-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.dq-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: dqFadeIn 0.3s ease;
}

.dq-feedback.correct {
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
}

.dq-feedback.wrong {
    background: #FEF2F2;
    border-left: 4px solid #EF4444;
}

.dq-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dq-feedback.correct .dq-feedback-title {
    color: #166534;
}

.dq-feedback.wrong .dq-feedback-title {
    color: #991B1B;
}

.dq-feedback-text {
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.6;
}

.dq-next-wrapper {
    margin-top: 20px;
    text-align: center;
}

.dq-next-wrapper .btn {
    min-width: 240px;
}

/* ============================================ */
/* === ЭКРАН РЕЗУЛЬТАТА === */
/* ============================================ */
.dq-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.dq-result-emoji {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.dq-result-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 24px;
}

.dq-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.dq-result-stat {
    text-align: center;
}

.dq-result-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 6px;
}

.dq-result-stat-label {
    font-size: 0.85rem;
    color: var(--light);
    font-weight: 500;
}

.dq-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.dq-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.dq-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.dq-result-actions .btn {
    width: 100%;
    min-width: 0;
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 768px) {
    .dq-start,
    .dq-result-card {
        padding: 36px 24px;
    }

    .dq-start-title,
    .dq-result-title {
        font-size: 1.6rem;
    }

    .dq-list-title {
        font-size: 1.4rem;
    }

    .dq-dialog-card {
        padding: 20px;
        gap: 16px;
    }

    .dq-dialog-icon {
        font-size: 2rem;
    }

    .dq-player-card {
        padding: 32px 20px;
    }

    .dq-play-btn {
        padding: 16px 28px;
        font-size: 1rem;
    }

    .dq-question-card {
        padding: 28px 20px;
    }

    .dq-q-text {
        font-size: 1.15rem;
    }

    .dq-option {
        padding: 16px 18px;
        font-size: 0.98rem;
    }

    .dq-result-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dq-player-actions {
        flex-direction: column;
    }

    .dq-player-actions .btn {
        width: 100%;
    }

    .dq-result-actions {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* ============================================ */
/* === СЕРВИС: ВЫБОР ОТВЕТА НА СЛУХ (mc-) === */
/* ============================================ */

.mc-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.mc-screen {
    display: none;
    animation: mcFadeIn 0.4s ease;
}

.mc-screen.active {
    display: block;
}

@keyframes mcFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================ */
/* === СТАРТОВЫЙ ЭКРАН === */
/* ============================================ */
.mc-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.mc-start-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.mc-start-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.mc-start-desc {
    font-size: 1.1rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 32px;
}

.mc-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.mc-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}

.mc-rule:last-child {
    margin-bottom: 0;
}

.mc-rule-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1.3;
}

.mc-start-btn {
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

/* ============================================ */
/* === ВЫБОР УРОВНЯ === */
/* ============================================ */
.mc-levels-header {
    text-align: center;
    margin-bottom: 32px;
}

.mc-levels-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.mc-levels-subtitle {
    font-size: 1.05rem;
    color: var(--light);
}

.mc-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.mc-level-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.mc-level-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.mc-level-card[data-level="easy"]:hover   { border-color: #10B981; }
.mc-level-card[data-level="medium"]:hover { border-color: #F59E0B; }
.mc-level-card[data-level="hard"]:hover   { border-color: #EF4444; }

.mc-level-icon {
    font-size: 3rem;
    margin-bottom: 14px;
    line-height: 1;
}

.mc-level-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.mc-level-count {
    font-size: 0.85rem;
    color: var(--light);
}

/* ============================================ */
/* === ЭКРАН ИГРЫ === */
/* ============================================ */
.mc-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.mc-game-progress {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.mc-game-progress strong {
    color: var(--primary);
}

.mc-game-level {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
}

.mc-game-score {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.mc-game-score strong {
    color: #10B981;
}

.mc-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.mc-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

/* Аудио-карточка */
.mc-audio-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.mc-audio-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.mc-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 40px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

.mc-play-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.4);
}

.mc-play-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.mc-play-btn.playing {
    background: #10B981;
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.3);
}

.mc-play-icon {
    font-size: 1.7rem;
}

.mc-audio-hint {
    font-size: 0.9rem;
    color: var(--light);
    margin-top: 16px;
    font-style: italic;
}

/* Вопрос прослушан */
.mc-listened {
    display: inline-block;
    margin-top: 16px;
    padding: 6px 16px;
    background: #D1FAE5;
    color: #065F46;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

/* Варианты ответа */
.mc-options-label {
    text-align: center;
    font-size: 0.95rem;
    color: var(--light);
    margin-bottom: 16px;
    font-weight: 600;
}

.mc-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.mc-option {
    padding: 20px 24px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: left;
    line-height: 1.5;
}

.mc-option:hover:not(:disabled) {
    border-color: var(--primary);
    background: #FAFAFE;
    transform: translateX(4px);
}

.mc-option:disabled {
    cursor: default;
}

.mc-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
    font-weight: 600;
}

.mc-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.mc-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: mcFadeIn 0.3s ease;
}

.mc-feedback.correct {
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
}

.mc-feedback.wrong {
    background: #FEF2F2;
    border-left: 4px solid #EF4444;
}

.mc-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.mc-feedback.correct .mc-feedback-title {
    color: #166534;
}

.mc-feedback.wrong .mc-feedback-title {
    color: #991B1B;
}

.mc-feedback-text {
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.6;
}

.mc-feedback-text strong {
    color: var(--primary);
    font-weight: 700;
}

.mc-transcript-inline {
    display: block;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 8px;
    font-size: 0.95rem;
    color: var(--dark);
    font-style: italic;
}

.mc-next-wrapper {
    margin-top: 20px;
    text-align: center;
}

.mc-next-wrapper .btn {
    min-width: 240px;
}

/* ============================================ */
/* === ЭКРАН РЕЗУЛЬТАТА === */
/* ============================================ */
.mc-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.mc-result-emoji {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.mc-result-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 24px;
}

.mc-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.mc-result-stat {
    text-align: center;
}

.mc-result-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 6px;
}

.mc-result-stat-label {
    font-size: 0.85rem;
    color: var(--light);
    font-weight: 500;
}

.mc-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.mc-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.mc-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.mc-result-actions .btn {
    width: 100%;
    min-width: 0;
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 768px) {
    .mc-start,
    .mc-result-card {
        padding: 36px 24px;
    }

    .mc-start-title,
    .mc-result-title {
        font-size: 1.6rem;
    }

    .mc-levels-title {
        font-size: 1.4rem;
    }

    .mc-levels-grid {
        grid-template-columns: 1fr;
    }

    .mc-audio-card {
        padding: 32px 20px;
    }

    .mc-play-btn {
        padding: 16px 28px;
        font-size: 1rem;
    }

    .mc-option {
        padding: 16px 18px;
        font-size: 0.98rem;
    }

    .mc-result-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .mc-result-actions {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* ============================================ */
/* === СЕРВИС: МИНИ-ДИКТАНТ (dt-) === */
/* ============================================ */

.dt-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.dt-screen {
    display: none;
    animation: dtFadeIn 0.4s ease;
}

.dt-screen.active {
    display: block;
}

@keyframes dtFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================ */
/* === СТАРТОВЫЙ ЭКРАН === */
/* ============================================ */
.dt-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.dt-start-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.dt-start-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.dt-start-desc {
    font-size: 1.1rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 32px;
}

.dt-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.dt-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}

.dt-rule:last-child {
    margin-bottom: 0;
}

.dt-rule-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1.3;
}

.dt-start-btn {
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

/* ============================================ */
/* === ВЫБОР УРОВНЯ === */
/* ============================================ */
.dt-levels-header {
    text-align: center;
    margin-bottom: 32px;
}

.dt-levels-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.dt-levels-subtitle {
    font-size: 1.05rem;
    color: var(--light);
}

.dt-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.dt-level-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.dt-level-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.dt-level-card[data-level="easy"]:hover   { border-color: #10B981; }
.dt-level-card[data-level="medium"]:hover { border-color: #F59E0B; }
.dt-level-card[data-level="hard"]:hover   { border-color: #EF4444; }

.dt-level-icon {
    font-size: 3rem;
    margin-bottom: 14px;
    line-height: 1;
}

.dt-level-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.dt-level-count {
    font-size: 0.85rem;
    color: var(--light);
}

/* ============================================ */
/* === ЭКРАН ИГРЫ === */
/* ============================================ */
.dt-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.dt-game-progress {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.dt-game-progress strong {
    color: var(--primary);
}

.dt-game-level {
    font-size: 0.85rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 20px;
}

.dt-game-score {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.dt-game-score strong {
    color: #10B981;
}

.dt-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.dt-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

/* Аудио-карточка */
.dt-audio-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.dt-audio-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.dt-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 44px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

.dt-play-btn:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.4);
}

.dt-play-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.dt-play-btn.playing {
    background: #10B981;
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.3);
}

.dt-play-icon {
    font-size: 1.7rem;
}

.dt-audio-hint {
    font-size: 0.9rem;
    color: var(--light);
    margin-top: 16px;
    font-style: italic;
}

/* Скорости */
.dt-speed-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.dt-speed-btn {
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.dt-speed-btn:hover {
    background: var(--white);
}

.dt-speed-btn.active {
    background: var(--white);
    border-color: var(--primary);
    color: var(--primary);
}

/* Блок ввода */
.dt-input-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px 32px;
    margin-bottom: 24px;
}

.dt-input-label {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dt-input {
    width: 100%;
    padding: 18px 20px;
    border: 2px solid #E2E8F0;
    border-radius: 10px;
    font-size: 1.15rem;
    color: var(--dark);
    font-family: inherit;
    line-height: 1.5;
    transition: all 0.3s ease;
    background: var(--bg);
    resize: vertical;
    min-height: 80px;
}

.dt-input:focus {
    outline: none;
    border-color: var(--primary);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

.dt-input:disabled {
    background: #F8FAFC;
    color: var(--light);
    cursor: not-allowed;
}

.dt-input-hint {
    font-size: 0.85rem;
    color: var(--light);
    margin-top: 10px;
    font-style: italic;
}

/* Действия */
.dt-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.dt-actions .btn {
    min-width: 220px;
}

/* Обратная связь */
.dt-feedback {
    margin-top: 24px;
    padding: 24px 28px;
    border-radius: 10px;
    text-align: left;
    animation: dtFadeIn 0.3s ease;
}

.dt-feedback.correct {
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
}

.dt-feedback.partial {
    background: #FEF3C7;
    border-left: 4px solid #F59E0B;
}

.dt-feedback.wrong {
    background: #FEF2F2;
    border-left: 4px solid #EF4444;
}

.dt-feedback-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dt-feedback.correct .dt-feedback-title { color: #166534; }
.dt-feedback.partial .dt-feedback-title { color: #92400E; }
.dt-feedback.wrong .dt-feedback-title   { color: #991B1B; }

.dt-feedback-section {
    margin-bottom: 14px;
}

.dt-feedback-section:last-child {
    margin-bottom: 0;
}

.dt-feedback-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}

.dt-feedback-text {
    font-size: 1.05rem;
    color: var(--dark);
    line-height: 1.6;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 8px;
}

.dt-feedback-note {
    font-size: 0.95rem;
    color: var(--dark);
    line-height: 1.6;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.dt-word-correct {
    color: #166534;
    font-weight: 600;
}

.dt-word-wrong {
    color: #991B1B;
    text-decoration: line-through;
    font-weight: 600;
}

.dt-word-missing {
    color: #92400E;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-style: dotted;
}

.dt-next-wrapper {
    margin-top: 20px;
    text-align: center;
}

.dt-next-wrapper .btn {
    min-width: 240px;
}

/* ============================================ */
/* === ЭКРАН РЕЗУЛЬТАТА === */
/* ============================================ */
.dt-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.dt-result-emoji {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.dt-result-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 24px;
}

.dt-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.dt-result-stat {
    text-align: center;
}

.dt-result-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 6px;
}

.dt-result-stat-label {
    font-size: 0.85rem;
    color: var(--light);
    font-weight: 500;
}

.dt-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.dt-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.dt-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.dt-result-actions .btn {
    width: 100%;
    min-width: 0;
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 768px) {
    .dt-start,
    .dt-result-card {
        padding: 36px 24px;
    }

    .dt-start-title,
    .dt-result-title {
        font-size: 1.6rem;
    }

    .dt-levels-title {
        font-size: 1.4rem;
    }

    .dt-levels-grid {
        grid-template-columns: 1fr;
    }

    .dt-audio-card {
        padding: 28px 20px;
    }

    .dt-play-btn {
        padding: 16px 28px;
        font-size: 1rem;
    }

    .dt-input-card {
        padding: 20px;
    }

    .dt-input {
        font-size: 1rem;
        padding: 14px 16px;
    }

    .dt-actions {
        flex-direction: column;
    }

    .dt-actions .btn {
        width: 100%;
        min-width: 0;
    }

    .dt-result-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .dt-result-actions {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* ============================================ */
/* === СЕРВИС: ПОДКАСТ С ВОПРОСАМИ (pd-) === */
/* ============================================ */

.pd-wrapper {
    max-width: 900px;
    margin: 0 auto;
}

.pd-screen {
    display: none;
    animation: pdFadeIn 0.4s ease;
}

.pd-screen.active {
    display: block;
}

@keyframes pdFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================ */
/* === СТАРТОВЫЙ ЭКРАН === */
/* ============================================ */
.pd-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.pd-start-icon {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.pd-start-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.2;
}

.pd-start-desc {
    font-size: 1.1rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 32px;
}

.pd-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.pd-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}

.pd-rule:last-child {
    margin-bottom: 0;
}

.pd-rule-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1.3;
}

.pd-start-btn {
    max-width: 400px;
    margin: 0 auto;
    display: block;
}

/* ============================================ */
/* === ВЫБОР ПОДКАСТА === */
/* ============================================ */
.pd-list-header {
    text-align: center;
    margin-bottom: 32px;
}

.pd-list-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
}

.pd-list-subtitle {
    font-size: 1.05rem;
    color: var(--light);
}

.pd-list-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
}

.pd-podcast-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 24px 28px;
    text-align: left;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    display: flex;
    gap: 24px;
    align-items: center;
}

.pd-podcast-card:hover {
    border-color: var(--primary);
    transform: translateX(4px);
    box-shadow: var(--shadow-hover);
}

.pd-podcast-icon {
    font-size: 2.5rem;
    line-height: 1;
    flex-shrink: 0;
}

.pd-podcast-info {
    flex-grow: 1;
}

.pd-podcast-name {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.3;
}

.pd-podcast-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 0.88rem;
    color: var(--light);
}

.pd-podcast-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.pd-podcast-arrow {
    font-size: 1.5rem;
    color: var(--primary);
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.pd-podcast-card:hover .pd-podcast-arrow {
    transform: translateX(4px);
}

/* ============================================ */
/* === ЭКРАН ПРОСЛУШИВАНИЯ === */
/* ============================================ */
.pd-player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pd-player-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
}

.pd-player-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.pd-player-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.pd-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 44px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

.pd-play-btn:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.4);
}

.pd-play-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.pd-play-btn.playing {
    background: #10B981;
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.3);
}

.pd-play-icon {
    font-size: 1.7rem;
}

.pd-player-hint {
    font-size: 0.9rem;
    color: var(--light);
    margin-top: 16px;
    font-style: italic;
}

.pd-speed-controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.pd-speed-btn {
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.7);
    border: 2px solid transparent;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.pd-speed-btn:hover {
    background: var(--white);
}

.pd-speed-btn.active {
    background: var(--white);
    border-color: var(--primary);
    color: var(--primary);
}

.pd-player-progress {
    margin-top: 24px;
    font-size: 0.95rem;
    color: var(--dark);
    font-weight: 600;
}

.pd-player-progress strong {
    color: var(--primary);
}

.pd-player-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.pd-player-actions .btn {
    min-width: 200px;
}

/* Транскрипт */
.pd-transcript {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
    margin-bottom: 24px;
    animation: pdFadeIn 0.3s ease;
}

.pd-transcript-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-transcript-text {
    font-size: 1.02rem;
    color: var(--dark);
    line-height: 1.8;
}

/* ============================================ */
/* === ЭКРАН ВОПРОСА === */
/* ============================================ */
.pd-q-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pd-q-progress {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.pd-q-progress strong {
    color: var(--primary);
}

.pd-q-score {
    font-weight: 600;
    color: var(--light);
    font-size: 0.95rem;
}

.pd-q-score strong {
    color: #10B981;
}

.pd-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.pd-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

.pd-question-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
}

.pd-q-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.pd-q-text {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.4;
}

.pd-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.pd-option {
    padding: 18px 24px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 10px;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: left;
    line-height: 1.5;
}

.pd-option:hover:not(:disabled) {
    border-color: var(--primary);
    background: #FAFAFE;
    transform: translateX(4px);
}

.pd-option:disabled {
    cursor: default;
}

.pd-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
    font-weight: 600;
}

.pd-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.pd-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: pdFadeIn 0.3s ease;
}

.pd-feedback.correct {
    background: #F0FDF4;
    border-left: 4px solid #22C55E;
}

.pd-feedback.wrong {
    background: #FEF2F2;
    border-left: 4px solid #EF4444;
}

.pd-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.pd-feedback.correct .pd-feedback-title {
    color: #166534;
}

.pd-feedback.wrong .pd-feedback-title {
    color: #991B1B;
}

.pd-feedback-text {
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.6;
}

.pd-next-wrapper {
    margin-top: 20px;
    text-align: center;
}

.pd-next-wrapper .btn {
    min-width: 240px;
}

/* ============================================ */
/* === ЭКРАН РЕЗУЛЬТАТА === */
/* ============================================ */
.pd-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.pd-result-emoji {
    font-size: 5rem;
    margin-bottom: 20px;
    line-height: 1;
}

.pd-result-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 24px;
}

.pd-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.pd-result-stat {
    text-align: center;
}

.pd-result-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 6px;
}

.pd-result-stat-label {
    font-size: 0.85rem;
    color: var(--light);
    font-weight: 500;
}

.pd-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.pd-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.pd-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.pd-result-actions .btn {
    width: 100%;
    min-width: 0;
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 768px) {
    .pd-start,
    .pd-result-card {
        padding: 36px 24px;
    }

    .pd-start-title,
    .pd-result-title {
        font-size: 1.6rem;
    }

    .pd-list-title {
        font-size: 1.4rem;
    }

    .pd-podcast-card {
        padding: 20px;
        gap: 16px;
    }

    .pd-podcast-icon {
        font-size: 2rem;
    }

    .pd-player-card {
        padding: 32px 20px;
    }

    .pd-play-btn {
        padding: 16px 28px;
        font-size: 1rem;
    }

    .pd-question-card {
        padding: 28px 20px;
    }

    .pd-q-text {
        font-size: 1.15rem;
    }

    .pd-option {
        padding: 16px 18px;
        font-size: 0.98rem;
    }

    .pd-result-stats {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pd-player-actions {
        flex-direction: column;
    }

    .pd-player-actions .btn {
        width: 100%;
    }

    .pd-result-actions {
        grid-template-columns: 1fr;
        max-width: 100%;
    }
}

/* ============================================ */
/* === БЛОК: КОМУ ПОДХОДИТ === */
/* ============================================ */
.audience-block {
    padding: 60px 0;
    background: var(--white);
}

.audience-block-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.audience-card-beginner {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 24px;
    text-align: center;
    transition: all 0.3s ease;
}

.audience-card-beginner:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.audience-card-icon {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 16px;
}

.audience-card-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 10px;
    line-height: 1.3;
}

.audience-card-desc {
    font-size: 0.95rem;
    color: var(--light);
    line-height: 1.6;
}

/* ============================================ */
/* === БЛОК: ПОШАГОВЫЙ ПЛАН === */
/* ============================================ */
.roadmap-section {
    padding: 60px 0;
    background: var(--bg);
}

.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
}

.roadmap-step {
    background: var(--white);
    border-radius: var(--radius);
    padding: 28px 22px;
    text-align: center;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    position: relative;
}

.roadmap-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.roadmap-step-num {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    background: var(--primary);
    color: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

.roadmap-step-icon {
    font-size: 2.2rem;
    line-height: 1;
    margin: 10px 0 14px;
}

.roadmap-step-title {
    font-size: 1rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

.roadmap-step-desc {
    font-size: 0.85rem;
    color: var(--light);
    line-height: 1.5;
}

/* ============================================ */
/* === БЛОК: СОВЕТЫ === */
/* ============================================ */
.tips-section {
    padding: 60px 0;
    background: var(--white);
}

.tips-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.tip-card {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.04) 0%, rgba(6, 182, 212, 0.04) 100%);
    border-radius: var(--radius);
    padding: 24px 26px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
    border-left: 4px solid var(--primary);
    transition: all 0.3s ease;
}

.tip-card:hover {
    transform: translateX(4px);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.08) 0%, rgba(6, 182, 212, 0.08) 100%);
}

.tip-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.tip-content { flex-grow: 1; }

.tip-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

.tip-text {
    font-size: 0.95rem;
    color: var(--light);
    line-height: 1.6;
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 1024px) {
    .roadmap-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 20px;
    }
}

@media (max-width: 900px) {
    .audience-block-grid { grid-template-columns: 1fr; }
    .tips-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .roadmap-grid { grid-template-columns: 1fr; }
    .audience-block,
    .roadmap-section,
    .tips-section { padding: 40px 0; }
    .tip-card { padding: 20px; }
}

/* ============================================ */
/* === КАРТОЧКИ СЕРВИСОВ В 2 КОЛОНКИ === */
/* ============================================ */
.services-list-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.services-list-2col .service-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 24px;
    align-items: flex-start;
}

.services-list-2col .service-card-icon {
    font-size: 2.6rem;
    margin-bottom: 14px;
    line-height: 1;
}

.services-list-2col .service-card-content {
    flex-grow: 1;
    width: 100%;
}

.services-list-2col .service-card-title {
    font-size: 1.15rem;
    margin-bottom: 8px;
    line-height: 1.3;
}

.services-list-2col .service-card-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 14px;
}

.services-list-2col .service-card-features {
    margin-bottom: 16px;
    gap: 8px;
}

.services-list-2col .service-card-feature {
    font-size: 0.8rem;
}

.services-list-2col .service-card-action {
    width: 100%;
    margin-top: auto;
    padding-top: 12px;
}

.services-list-2col .service-card-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px 20px;
    font-size: 0.95rem;
    border-radius: 10px;
}

/* ============================================ */
/* === КНОПКА В КАРТОЧКАХ ПОПУЛЯРНОГО === */
/* ============================================ */
.popular-card-btn {
    display: block;
    margin-top: 12px;
    padding: 10px 16px;
    background: var(--primary);
    color: var(--white);
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
}

.popular-card:hover .popular-card-btn {
    background: var(--primary-dark);
    transform: translateY(-1px);
}

.popular-section {
    background: linear-gradient(135deg, #F8FAFC 0%, #F0F4FF 100%);
}

/* ============================================ */
/* === ПОПУЛЯРНЫЕ — 3 КАРТОЧКИ В РЯД === */
/* ============================================ */
.popular-section .popular-grid {
    grid-template-columns: repeat(3, 1fr);
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 1024px) {
    .popular-section .popular-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .services-list-2col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .popular-section .popular-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================ */
/* === СЕРВИС: ЗВУКИ И БУКВЫ (sg-) === */
/* ============================================ */

.sg-wrapper { max-width: 900px; margin: 0 auto; }

.sg-screen { display: none; animation: sgFadeIn 0.4s ease; }
.sg-screen.active { display: block; }

@keyframes sgFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* СТАРТ */
.sg-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.sg-start-icon { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.sg-start-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; line-height: 1.2; }
.sg-start-desc { font-size: 1.1rem; color: var(--light); line-height: 1.6; max-width: 620px; margin: 0 auto 32px; }

.sg-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.sg-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}
.sg-rule:last-child { margin-bottom: 0; }
.sg-rule-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.3; }

.sg-start-btn { max-width: 400px; margin: 0 auto; display: block; }

/* ВЫБОР УРОВНЯ */
.sg-levels-header { text-align: center; margin-bottom: 32px; }
.sg-levels-title { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.sg-levels-subtitle { font-size: 1.05rem; color: var(--light); }

.sg-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.sg-level-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.sg-level-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.sg-level-card[data-level="easy"]:hover   { border-color: #10B981; }
.sg-level-card[data-level="medium"]:hover { border-color: #F59E0B; }
.sg-level-card[data-level="hard"]:hover   { border-color: #EF4444; }

.sg-level-icon { font-size: 3rem; margin-bottom: 14px; line-height: 1; }
.sg-level-name { font-size: 1.15rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; line-height: 1.3; }
.sg-level-count { font-size: 0.85rem; color: var(--light); }

/* ИГРА */
.sg-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.sg-game-progress { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.sg-game-progress strong { color: var(--primary); }
.sg-game-level { font-size: 0.85rem; font-weight: 700; padding: 6px 14px; border-radius: 20px; }
.sg-game-score { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.sg-game-score strong { color: #10B981; }

.sg-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.sg-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

/* Аудио-карточка */
.sg-audio-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.sg-audio-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.sg-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 40px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

.sg-play-btn:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.4);
}

.sg-play-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.sg-play-btn.playing { background: #10B981; box-shadow: 0 10px 24px rgba(16, 185, 129, 0.3); }
.sg-play-icon { font-size: 1.7rem; }

.sg-audio-hint {
    font-size: 0.9rem;
    color: var(--light);
    margin-top: 16px;
    font-style: italic;
}

.sg-listened {
    display: inline-block;
    margin-top: 16px;
    padding: 6px 16px;
    background: #D1FAE5;
    color: #065F46;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

/* Вопрос */
.sg-question-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 28px;
    text-align: center;
    margin-bottom: 20px;
}

.sg-question-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.5;
}

/* Опции */
.sg-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.sg-option {
    padding: 22px 12px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: center;
    line-height: 1;
    letter-spacing: 0.5px;
}

.sg-option:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.sg-option:disabled { cursor: default; }

.sg-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
}

.sg-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.sg-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: sgFadeIn 0.3s ease;
}

.sg-feedback.correct { background: #F0FDF4; border-left: 4px solid #22C55E; }
.sg-feedback.wrong { background: #FEF2F2; border-left: 4px solid #EF4444; }

.sg-feedback-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.sg-feedback.correct .sg-feedback-title { color: #166534; }
.sg-feedback.wrong .sg-feedback-title { color: #991B1B; }

.sg-feedback-text { font-size: 1rem; color: var(--dark); line-height: 1.6; }
.sg-feedback-text strong { color: var(--primary); font-weight: 700; }
.sg-feedback-text em { color: var(--light); font-style: italic; }

.sg-transcript-inline {
    display: block;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--dark);
    font-weight: 600;
}

.sg-next-wrapper { margin-top: 20px; text-align: center; }
.sg-next-wrapper .btn { min-width: 240px; }

/* РЕЗУЛЬТАТ */
.sg-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.sg-result-emoji { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.sg-result-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 24px; }

.sg-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.sg-result-stat { text-align: center; }
.sg-result-stat-value { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 6px; }
.sg-result-stat-label { font-size: 0.85rem; color: var(--light); font-weight: 500; }

.sg-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.sg-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.sg-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.sg-result-actions .btn { width: 100%; min-width: 0; }

/* АДАПТИВ */
@media (max-width: 768px) {
    .sg-start,
    .sg-result-card { padding: 36px 24px; }
    .sg-start-title,
    .sg-result-title { font-size: 1.6rem; }
    .sg-levels-title { font-size: 1.4rem; }
    .sg-levels-grid { grid-template-columns: 1fr; }

    .sg-audio-card { padding: 32px 20px; }
    .sg-play-btn { padding: 16px 28px; font-size: 1rem; }
    .sg-play-icon { font-size: 1.4rem; }

    .sg-options { grid-template-columns: repeat(2, 1fr); }
    .sg-option { padding: 18px 12px; font-size: 1.1rem; }

    .sg-result-stats { grid-template-columns: 1fr; gap: 12px; }
    .sg-result-actions { grid-template-columns: 1fr; max-width: 100%; }
}

/* ============================================ */
/* === СЕРВИС: ЦВЕТА И ФОРМЫ (cs-) === */
/* ============================================ */

.cs-wrapper { max-width: 900px; margin: 0 auto; }

.cs-screen { display: none; animation: csFadeIn 0.4s ease; }
.cs-screen.active { display: block; }

@keyframes csFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* СТАРТ */
.cs-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.cs-start-icon { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.cs-start-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; line-height: 1.2; }
.cs-start-desc { font-size: 1.1rem; color: var(--light); line-height: 1.6; max-width: 620px; margin: 0 auto 32px; }

.cs-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.cs-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}
.cs-rule:last-child { margin-bottom: 0; }
.cs-rule-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.3; }

.cs-start-btn { max-width: 400px; margin: 0 auto; display: block; }

/* ВЫБОР УРОВНЯ */
.cs-levels-header { text-align: center; margin-bottom: 32px; }
.cs-levels-title { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.cs-levels-subtitle { font-size: 1.05rem; color: var(--light); }

.cs-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.cs-level-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.cs-level-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.cs-level-card[data-level="easy"]:hover   { border-color: #10B981; }
.cs-level-card[data-level="medium"]:hover { border-color: #F59E0B; }
.cs-level-card[data-level="hard"]:hover   { border-color: #EF4444; }

.cs-level-icon { font-size: 3rem; margin-bottom: 14px; line-height: 1; }
.cs-level-name { font-size: 1.15rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; line-height: 1.3; }
.cs-level-count { font-size: 0.85rem; color: var(--light); }

/* ИГРА */
.cs-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.cs-game-progress { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.cs-game-progress strong { color: var(--primary); }
.cs-game-level { font-size: 0.85rem; font-weight: 700; padding: 6px 14px; border-radius: 20px; }
.cs-game-score { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.cs-game-score strong { color: #10B981; }

.cs-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.cs-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

/* Аудио-карточка */
.cs-audio-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.cs-audio-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.cs-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 40px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

.cs-play-btn:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.4);
}

.cs-play-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.cs-play-btn.playing { background: #10B981; box-shadow: 0 10px 24px rgba(16, 185, 129, 0.3); }
.cs-play-icon { font-size: 1.7rem; }

.cs-audio-hint {
    font-size: 0.9rem;
    color: var(--light);
    margin-top: 16px;
    font-style: italic;
}

.cs-listened {
    display: inline-block;
    margin-top: 16px;
    padding: 6px 16px;
    background: #D1FAE5;
    color: #065F46;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

/* Вопрос */
.cs-question-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 28px;
    text-align: center;
    margin-bottom: 20px;
}

.cs-question-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.5;
}

/* Опции — 2×2, чтобы длинные влезали */
.cs-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.cs-option {
    padding: 20px 16px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: center;
    line-height: 1.3;
}

.cs-option:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.cs-option:disabled { cursor: default; }

.cs-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
}

.cs-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.cs-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: csFadeIn 0.3s ease;
}

.cs-feedback.correct { background: #F0FDF4; border-left: 4px solid #22C55E; }
.cs-feedback.wrong { background: #FEF2F2; border-left: 4px solid #EF4444; }

.cs-feedback-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.cs-feedback.correct .cs-feedback-title { color: #166534; }
.cs-feedback.wrong .cs-feedback-title { color: #991B1B; }

.cs-feedback-text { font-size: 1rem; color: var(--dark); line-height: 1.6; }
.cs-feedback-text strong { color: var(--primary); font-weight: 700; }

.cs-transcript-inline {
    display: block;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--dark);
    font-weight: 600;
}

.cs-next-wrapper { margin-top: 20px; text-align: center; }
.cs-next-wrapper .btn { min-width: 240px; }

/* РЕЗУЛЬТАТ */
.cs-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.cs-result-emoji { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.cs-result-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 24px; }

.cs-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.cs-result-stat { text-align: center; }
.cs-result-stat-value { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 6px; }
.cs-result-stat-label { font-size: 0.85rem; color: var(--light); font-weight: 500; }

.cs-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.cs-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.cs-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.cs-result-actions .btn { width: 100%; min-width: 0; }

/* АДАПТИВ */
@media (max-width: 768px) {
    .cs-start,
    .cs-result-card { padding: 36px 24px; }
    .cs-start-title,
    .cs-result-title { font-size: 1.6rem; }
    .cs-levels-title { font-size: 1.4rem; }
    .cs-levels-grid { grid-template-columns: 1fr; }

    .cs-audio-card { padding: 32px 20px; }
    .cs-play-btn { padding: 16px 28px; font-size: 1rem; }
    .cs-play-icon { font-size: 1.4rem; }

    .cs-options { grid-template-columns: 1fr; }
    .cs-option { padding: 16px 14px; font-size: 1rem; }

    .cs-result-stats { grid-template-columns: 1fr; gap: 12px; }
    .cs-result-actions { grid-template-columns: 1fr; max-width: 100%; }
}

/* ============================================ */
/* === СЕРВИС: ПОГОДА НА СЛУХ (wt-) === */
/* ============================================ */

.wt-wrapper { max-width: 900px; margin: 0 auto; }

.wt-screen { display: none; animation: wtFadeIn 0.4s ease; }
.wt-screen.active { display: block; }

@keyframes wtFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* СТАРТ */
.wt-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.wt-start-icon { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.wt-start-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; line-height: 1.2; }
.wt-start-desc { font-size: 1.1rem; color: var(--light); line-height: 1.6; max-width: 620px; margin: 0 auto 32px; }

.wt-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.wt-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}
.wt-rule:last-child { margin-bottom: 0; }
.wt-rule-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.3; }

.wt-start-btn { max-width: 400px; margin: 0 auto; display: block; }

/* ВЫБОР УРОВНЯ */
.wt-levels-header { text-align: center; margin-bottom: 32px; }
.wt-levels-title { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.wt-levels-subtitle { font-size: 1.05rem; color: var(--light); }

.wt-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.wt-level-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.wt-level-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.wt-level-card[data-level="easy"]:hover   { border-color: #10B981; }
.wt-level-card[data-level="medium"]:hover { border-color: #F59E0B; }
.wt-level-card[data-level="hard"]:hover   { border-color: #EF4444; }

.wt-level-icon { font-size: 3rem; margin-bottom: 14px; line-height: 1; }
.wt-level-name { font-size: 1.15rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; line-height: 1.3; }
.wt-level-count { font-size: 0.85rem; color: var(--light); }

/* ИГРА */
.wt-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.wt-game-progress { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.wt-game-progress strong { color: var(--primary); }
.wt-game-level { font-size: 0.85rem; font-weight: 700; padding: 6px 14px; border-radius: 20px; }
.wt-game-score { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.wt-game-score strong { color: #10B981; }

.wt-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.wt-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

/* Аудио-карточка */
.wt-audio-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.wt-audio-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.wt-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 40px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

.wt-play-btn:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.4);
}

.wt-play-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.wt-play-btn.playing { background: #10B981; box-shadow: 0 10px 24px rgba(16, 185, 129, 0.3); }
.wt-play-icon { font-size: 1.7rem; }

.wt-audio-hint {
    font-size: 0.9rem;
    color: var(--light);
    margin-top: 16px;
    font-style: italic;
}

.wt-listened {
    display: inline-block;
    margin-top: 16px;
    padding: 6px 16px;
    background: #D1FAE5;
    color: #065F46;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

/* Вопрос */
.wt-question-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 28px;
    text-align: center;
    margin-bottom: 20px;
}

.wt-question-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.5;
}

/* Опции */
.wt-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.wt-option {
    padding: 20px 16px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: center;
    line-height: 1.4;
}

.wt-option:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.wt-option:disabled { cursor: default; }

.wt-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
}

.wt-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.wt-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: wtFadeIn 0.3s ease;
}

.wt-feedback.correct { background: #F0FDF4; border-left: 4px solid #22C55E; }
.wt-feedback.wrong { background: #FEF2F2; border-left: 4px solid #EF4444; }

.wt-feedback-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.wt-feedback.correct .wt-feedback-title { color: #166534; }
.wt-feedback.wrong .wt-feedback-title { color: #991B1B; }

.wt-feedback-text { font-size: 1rem; color: var(--dark); line-height: 1.6; }
.wt-feedback-text strong { color: var(--primary); font-weight: 700; }
.wt-feedback-text em { color: var(--light); font-style: italic; }

.wt-transcript-inline {
    display: block;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--dark);
    font-weight: 600;
}

.wt-next-wrapper { margin-top: 20px; text-align: center; }
.wt-next-wrapper .btn { min-width: 240px; }

/* РЕЗУЛЬТАТ */
.wt-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.wt-result-emoji { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.wt-result-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 24px; }

.wt-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.wt-result-stat { text-align: center; }
.wt-result-stat-value { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 6px; }
.wt-result-stat-label { font-size: 0.85rem; color: var(--light); font-weight: 500; }

.wt-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.wt-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.wt-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.wt-result-actions .btn { width: 100%; min-width: 0; }

/* АДАПТИВ */
@media (max-width: 768px) {
    .wt-start,
    .wt-result-card { padding: 36px 24px; }
    .wt-start-title,
    .wt-result-title { font-size: 1.6rem; }
    .wt-levels-title { font-size: 1.4rem; }
    .wt-levels-grid { grid-template-columns: 1fr; }

    .wt-audio-card { padding: 32px 20px; }
    .wt-play-btn { padding: 16px 28px; font-size: 1rem; }
    .wt-play-icon { font-size: 1.4rem; }

    .wt-options { grid-template-columns: 1fr; }
    .wt-option { padding: 16px 14px; font-size: 1rem; }

    .wt-result-stats { grid-template-columns: 1fr; gap: 12px; }
    .wt-result-actions { grid-template-columns: 1fr; max-width: 100%; }
}

/* ============================================ */
/* === СЕРВИС: НАПРАВЛЕНИЯ (dr-) === */
/* ============================================ */

.dr-wrapper { max-width: 900px; margin: 0 auto; }

.dr-screen { display: none; animation: drFadeIn 0.4s ease; }
.dr-screen.active { display: block; }

@keyframes drFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* СТАРТ */
.dr-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.dr-start-icon { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.dr-start-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; line-height: 1.2; }
.dr-start-desc { font-size: 1.1rem; color: var(--light); line-height: 1.6; max-width: 620px; margin: 0 auto 32px; }

.dr-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.dr-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}
.dr-rule:last-child { margin-bottom: 0; }
.dr-rule-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.3; }

.dr-start-btn { max-width: 400px; margin: 0 auto; display: block; }

/* ВЫБОР УРОВНЯ */
.dr-levels-header { text-align: center; margin-bottom: 32px; }
.dr-levels-title { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.dr-levels-subtitle { font-size: 1.05rem; color: var(--light); }

.dr-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.dr-level-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.dr-level-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.dr-level-card[data-level="easy"]:hover   { border-color: #10B981; }
.dr-level-card[data-level="medium"]:hover { border-color: #F59E0B; }
.dr-level-card[data-level="hard"]:hover   { border-color: #EF4444; }

.dr-level-icon { font-size: 3rem; margin-bottom: 14px; line-height: 1; }
.dr-level-name { font-size: 1.15rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; line-height: 1.3; }
.dr-level-count { font-size: 0.85rem; color: var(--light); }

/* ИГРА */
.dr-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.dr-game-progress { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.dr-game-progress strong { color: var(--primary); }
.dr-game-level { font-size: 0.85rem; font-weight: 700; padding: 6px 14px; border-radius: 20px; }
.dr-game-score { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.dr-game-score strong { color: #10B981; }

.dr-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.dr-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

.dr-audio-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.dr-audio-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.dr-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 40px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

.dr-play-btn:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.4);
}

.dr-play-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.dr-play-btn.playing { background: #10B981; box-shadow: 0 10px 24px rgba(16, 185, 129, 0.3); }
.dr-play-icon { font-size: 1.7rem; }

.dr-audio-hint {
    font-size: 0.9rem;
    color: var(--light);
    margin-top: 16px;
    font-style: italic;
}

.dr-listened {
    display: inline-block;
    margin-top: 16px;
    padding: 6px 16px;
    background: #D1FAE5;
    color: #065F46;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.dr-question-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 28px;
    text-align: center;
    margin-bottom: 20px;
}

.dr-question-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.5;
}

/* Опции — вертикальный список, т.к. длинные варианты */
.dr-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.dr-option {
    padding: 18px 22px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: left;
    line-height: 1.5;
}

.dr-option:hover:not(:disabled) {
    border-color: var(--primary);
    background: #FAFAFE;
    transform: translateX(4px);
}

.dr-option:disabled { cursor: default; }

.dr-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
    font-weight: 600;
}

.dr-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.dr-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: drFadeIn 0.3s ease;
}

.dr-feedback.correct { background: #F0FDF4; border-left: 4px solid #22C55E; }
.dr-feedback.wrong { background: #FEF2F2; border-left: 4px solid #EF4444; }

.dr-feedback-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.dr-feedback.correct .dr-feedback-title { color: #166534; }
.dr-feedback.wrong .dr-feedback-title { color: #991B1B; }

.dr-feedback-text { font-size: 1rem; color: var(--dark); line-height: 1.6; }
.dr-feedback-text strong { color: var(--primary); font-weight: 700; }
.dr-feedback-text em { color: var(--light); font-style: italic; }

.dr-transcript-inline {
    display: block;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--dark);
    font-weight: 600;
}

.dr-next-wrapper { margin-top: 20px; text-align: center; }
.dr-next-wrapper .btn { min-width: 240px; }

/* РЕЗУЛЬТАТ */
.dr-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.dr-result-emoji { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.dr-result-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 24px; }

.dr-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.dr-result-stat { text-align: center; }
.dr-result-stat-value { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 6px; }
.dr-result-stat-label { font-size: 0.85rem; color: var(--light); font-weight: 500; }

.dr-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.dr-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.dr-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.dr-result-actions .btn { width: 100%; min-width: 0; }

/* АДАПТИВ */
@media (max-width: 768px) {
    .dr-start,
    .dr-result-card { padding: 36px 24px; }
    .dr-start-title,
    .dr-result-title { font-size: 1.6rem; }
    .dr-levels-title { font-size: 1.4rem; }
    .dr-levels-grid { grid-template-columns: 1fr; }

    .dr-audio-card { padding: 32px 20px; }
    .dr-play-btn { padding: 16px 28px; font-size: 1rem; }
    .dr-play-icon { font-size: 1.4rem; }

    .dr-option { padding: 16px 18px; font-size: 0.98rem; }

    .dr-result-stats { grid-template-columns: 1fr; gap: 12px; }
    .dr-result-actions { grid-template-columns: 1fr; max-width: 100%; }
}

/* ============================================ */
/* === СЕРВИС: ОТРЫВКИ ИЗ ФИЛЬМОВ (mv-) === */
/* ============================================ */

.mv-wrapper { max-width: 900px; margin: 0 auto; }

.mv-screen { display: none; animation: mvFadeIn 0.4s ease; }
.mv-screen.active { display: block; }

@keyframes mvFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* СТАРТ */
.mv-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.mv-start-icon { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.mv-start-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; line-height: 1.2; }
.mv-start-desc { font-size: 1.1rem; color: var(--light); line-height: 1.6; max-width: 620px; margin: 0 auto 32px; }

.mv-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.mv-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}
.mv-rule:last-child { margin-bottom: 0; }
.mv-rule-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.3; }

.mv-start-btn { max-width: 400px; margin: 0 auto; display: block; }

/* ВЫБОР УРОВНЯ */
.mv-levels-header { text-align: center; margin-bottom: 32px; }
.mv-levels-title { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.mv-levels-subtitle { font-size: 1.05rem; color: var(--light); }

.mv-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.mv-level-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.mv-level-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.mv-level-card[data-level="easy"]:hover   { border-color: #10B981; }
.mv-level-card[data-level="medium"]:hover { border-color: #F59E0B; }
.mv-level-card[data-level="hard"]:hover   { border-color: #EF4444; }

.mv-level-icon { font-size: 3rem; margin-bottom: 14px; line-height: 1; }
.mv-level-name { font-size: 1.15rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; line-height: 1.3; }
.mv-level-count { font-size: 0.85rem; color: var(--light); }

/* ИГРА */
.mv-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.mv-game-progress { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.mv-game-progress strong { color: var(--primary); }
.mv-game-level { font-size: 0.85rem; font-weight: 700; padding: 6px 14px; border-radius: 20px; }
.mv-game-score { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.mv-game-score strong { color: #10B981; }

.mv-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.mv-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

.mv-audio-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.mv-audio-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.mv-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 40px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

.mv-play-btn:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.4);
}

.mv-play-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.mv-play-btn.playing { background: #10B981; box-shadow: 0 10px 24px rgba(16, 185, 129, 0.3); }
.mv-play-icon { font-size: 1.7rem; }

.mv-audio-hint {
    font-size: 0.9rem;
    color: var(--light);
    margin-top: 16px;
    font-style: italic;
}

.mv-listened {
    display: inline-block;
    margin-top: 16px;
    padding: 6px 16px;
    background: #D1FAE5;
    color: #065F46;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.mv-question-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 28px;
    text-align: center;
    margin-bottom: 20px;
}

.mv-question-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.5;
}

/* Опции */
.mv-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.mv-option {
    padding: 18px 20px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: center;
    line-height: 1.4;
}

.mv-option:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow);
}

.mv-option:disabled { cursor: default; }

.mv-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
    font-weight: 600;
}

.mv-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.mv-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: mvFadeIn 0.3s ease;
}

.mv-feedback.correct { background: #F0FDF4; border-left: 4px solid #22C55E; }
.mv-feedback.wrong { background: #FEF2F2; border-left: 4px solid #EF4444; }

.mv-feedback-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.mv-feedback.correct .mv-feedback-title { color: #166534; }
.mv-feedback.wrong .mv-feedback-title { color: #991B1B; }

.mv-feedback-text { font-size: 1rem; color: var(--dark); line-height: 1.6; }
.mv-feedback-text strong { color: var(--primary); font-weight: 700; }

.mv-transcript-inline {
    display: block;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 8px;
    font-size: 1rem;
    color: var(--dark);
    font-weight: 600;
    font-style: italic;
}

.mv-next-wrapper { margin-top: 20px; text-align: center; }
.mv-next-wrapper .btn { min-width: 240px; }

/* РЕЗУЛЬТАТ */
.mv-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.mv-result-emoji { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.mv-result-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 24px; }

.mv-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.mv-result-stat { text-align: center; }
.mv-result-stat-value { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 6px; }
.mv-result-stat-label { font-size: 0.85rem; color: var(--light); font-weight: 500; }

.mv-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.mv-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.mv-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.mv-result-actions .btn { width: 100%; min-width: 0; }

/* АДАПТИВ */
@media (max-width: 768px) {
    .mv-start,
    .mv-result-card { padding: 36px 24px; }
    .mv-start-title,
    .mv-result-title { font-size: 1.6rem; }
    .mv-levels-title { font-size: 1.4rem; }
    .mv-levels-grid { grid-template-columns: 1fr; }

    .mv-audio-card { padding: 32px 20px; }
    .mv-play-btn { padding: 16px 28px; font-size: 1rem; }
    .mv-play-icon { font-size: 1.4rem; }

    .mv-options { grid-template-columns: 1fr; }
    .mv-option { padding: 16px 18px; font-size: 0.98rem; }

    .mv-result-stats { grid-template-columns: 1fr; gap: 12px; }
    .mv-result-actions { grid-template-columns: 1fr; max-width: 100%; }
}

/* ============================================ */
/* === СЕРВИС: ОБЪЯВЛЕНИЯ В АЭРОПОРТУ (an-) === */
/* ============================================ */

.an-wrapper { max-width: 900px; margin: 0 auto; }

.an-screen { display: none; animation: anFadeIn 0.4s ease; }
.an-screen.active { display: block; }

@keyframes anFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* СТАРТ */
.an-start {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.an-start-icon { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.an-start-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 16px; line-height: 1.2; }
.an-start-desc { font-size: 1.1rem; color: var(--light); line-height: 1.6; max-width: 620px; margin: 0 auto 32px; }

.an-rules {
    background: var(--bg);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    text-align: left;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
}

.an-rule {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 1.05rem;
    color: var(--dark);
    margin-bottom: 16px;
    line-height: 1.5;
}
.an-rule:last-child { margin-bottom: 0; }
.an-rule-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.3; }

.an-start-btn { max-width: 400px; margin: 0 auto; display: block; }

/* ВЫБОР УРОВНЯ */
.an-levels-header { text-align: center; margin-bottom: 32px; }
.an-levels-title { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.an-levels-subtitle { font-size: 1.05rem; color: var(--light); }

.an-levels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.an-level-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: var(--radius);
    padding: 32px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
}

.an-level-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
}

.an-level-card[data-level="easy"]:hover   { border-color: #10B981; }
.an-level-card[data-level="medium"]:hover { border-color: #F59E0B; }
.an-level-card[data-level="hard"]:hover   { border-color: #EF4444; }

.an-level-icon { font-size: 3rem; margin-bottom: 14px; line-height: 1; }
.an-level-name { font-size: 1.15rem; font-weight: 700; color: var(--dark); margin-bottom: 6px; line-height: 1.3; }
.an-level-count { font-size: 0.85rem; color: var(--light); }

/* ИГРА */
.an-game-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.an-game-progress { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.an-game-progress strong { color: var(--primary); }
.an-game-level { font-size: 0.85rem; font-weight: 700; padding: 6px 14px; border-radius: 20px; }
.an-game-score { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.an-game-score strong { color: #10B981; }

.an-progress-bar {
    height: 6px;
    background: #E2E8F0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 32px;
}

.an-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--primary-dark));
    transition: width 0.4s ease;
}

.an-audio-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.an-audio-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.an-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 20px 40px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 14px;
    font-size: 1.15rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

.an-play-btn:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.4);
}

.an-play-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.an-play-btn.playing { background: #10B981; box-shadow: 0 10px 24px rgba(16, 185, 129, 0.3); }
.an-play-icon { font-size: 1.7rem; }

.an-audio-hint {
    font-size: 0.9rem;
    color: var(--light);
    margin-top: 16px;
    font-style: italic;
}

.an-listened {
    display: inline-block;
    margin-top: 16px;
    padding: 6px 16px;
    background: #D1FAE5;
    color: #065F46;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
}

.an-question-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 28px;
    text-align: center;
    margin-bottom: 20px;
}

.an-question-label {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.5;
}

/* Опции — вертикальный список для длинных объявлений */
.an-options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.an-option {
    padding: 18px 22px;
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    font-size: 1.02rem;
    font-weight: 500;
    color: var(--dark);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: inherit;
    text-align: left;
    line-height: 1.5;
}

.an-option:hover:not(:disabled) {
    border-color: var(--primary);
    background: #FAFAFE;
    transform: translateX(4px);
}

.an-option:disabled { cursor: default; }

.an-option.correct {
    background: #F0FDF4;
    border-color: #22C55E;
    color: #166534;
    font-weight: 600;
}

.an-option.wrong {
    background: #FEF2F2;
    border-color: #EF4444;
    color: #991B1B;
}

/* Обратная связь */
.an-feedback {
    margin-top: 24px;
    padding: 24px;
    border-radius: 10px;
    text-align: left;
    animation: anFadeIn 0.3s ease;
}

.an-feedback.correct { background: #F0FDF4; border-left: 4px solid #22C55E; }
.an-feedback.wrong { background: #FEF2F2; border-left: 4px solid #EF4444; }

.an-feedback-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.an-feedback.correct .an-feedback-title { color: #166534; }
.an-feedback.wrong .an-feedback-title { color: #991B1B; }

.an-feedback-text { font-size: 1rem; color: var(--dark); line-height: 1.6; }
.an-feedback-text strong { color: var(--primary); font-weight: 700; }

.an-transcript-inline {
    display: block;
    margin-top: 10px;
    padding: 12px 16px;
    background: rgba(124, 58, 237, 0.08);
    border-radius: 8px;
    font-size: 0.98rem;
    color: var(--dark);
    font-weight: 600;
    font-style: italic;
    line-height: 1.5;
}

.an-next-wrapper { margin-top: 20px; text-align: center; }
.an-next-wrapper .btn { min-width: 240px; }

/* РЕЗУЛЬТАТ */
.an-result-card {
    background: var(--white);
    padding: 56px 40px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    text-align: center;
}

.an-result-emoji { font-size: 5rem; margin-bottom: 20px; line-height: 1; }
.an-result-title { font-size: 2rem; font-weight: 800; color: var(--dark); margin-bottom: 24px; }

.an-result-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--bg);
    border-radius: var(--radius);
}

.an-result-stat { text-align: center; }
.an-result-stat-value { font-size: 2rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 6px; }
.an-result-stat-label { font-size: 0.85rem; color: var(--light); font-weight: 500; }

.an-result-record {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    padding: 8px 20px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 24px;
}

.an-result-message {
    font-size: 1.05rem;
    color: var(--light);
    line-height: 1.6;
    max-width: 560px;
    margin: 0 auto 32px;
}

.an-result-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    max-width: 520px;
    margin: 0 auto;
}

.an-result-actions .btn { width: 100%; min-width: 0; }

/* АДАПТИВ */
@media (max-width: 768px) {
    .an-start,
    .an-result-card { padding: 36px 24px; }
    .an-start-title,
    .an-result-title { font-size: 1.6rem; }
    .an-levels-title { font-size: 1.4rem; }
    .an-levels-grid { grid-template-columns: 1fr; }

    .an-audio-card { padding: 32px 20px; }
    .an-play-btn { padding: 16px 28px; font-size: 1rem; }
    .an-play-icon { font-size: 1.4rem; }

    .an-option { padding: 16px 18px; font-size: 0.98rem; }

    .an-result-stats { grid-template-columns: 1fr; gap: 12px; }
    .an-result-actions { grid-template-columns: 1fr; max-width: 100%; }
}