/* ============================================ */
/* === СТИЛИ КАТЕГОРИИ «ПЕРВЫЕ ШАГИ» === */
/* ============================================ */
/* Содержит стили для всех 6 сервисов категории. */
/* Классы имеют префиксы:                         */
/*   al-  — Алфавит (Alphabet)                    */
/*   cn-  — Цвета и числа (Colors & Numbers)     */
/*   fw-  — Первые слова (First Words)           */
/*   gr-  — Приветствия (Greetings)               */
/*   tb-  — To Be (am/is/are)                     */
/*   ss-  — Простые предложения (Simple Sent.)    */
/* ============================================ */

/* ============================================ */
/* === СЕРВИС: АЛФАВИТ (al-) === */
/* ============================================ */

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

.al-screen {
    display: none;
    animation: alFadeIn 0.4s ease;
}

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

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

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

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

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

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

.al-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;
}

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

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

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

.al-start-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 620px;
    margin: 0 auto;
}

.al-start-actions .btn {
    min-width: 240px;
}

/* ============================================ */
/* === РЕЖИМ ИЗУЧЕНИЯ: СЕТКА БУКВ === */
/* ============================================ */
.al-learn-header {
    text-align: center;
    margin-bottom: 32px;
}

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

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

.al-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.al-letter-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 18px 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.al-letter-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    background: #FAFAFE;
}

.al-letter-card.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
}

.al-letter-big {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1;
    transition: color 0.2s ease;
}

.al-letter-card.active .al-letter-big {
    color: var(--white);
}

.al-letter-small {
    font-size: 1rem;
    color: var(--light);
    font-weight: 600;
    transition: color 0.2s ease;
}

.al-letter-card.active .al-letter-small {
    color: rgba(255, 255, 255, 0.85);
}

/* ============================================ */
/* === ПАНЕЛЬ ПРОСМОТРА БУКВЫ === */
/* ============================================ */
.al-viewer {
    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);
    min-height: 220px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.al-viewer-placeholder {
    color: var(--light);
    font-size: 1.05rem;
    font-style: italic;
}

.al-viewer-letter {
    font-size: 5rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: 2px;
}

.al-viewer-word {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 6px;
}

.al-viewer-translation {
    font-size: 1.05rem;
    color: var(--light);
    font-style: italic;
    margin-bottom: 20px;
}

.al-viewer-emoji {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 16px;
}

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

.al-play-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.4);
}

.al-play-btn.playing {
    background: #10B981;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}

/* ============================================ */
/* === РЕЖИМ НАЙДИ БУКВУ === */
/* ============================================ */
.al-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

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

.al-quiz-progress strong {
    color: var(--primary);
}

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

.al-quiz-score strong {
    color: #10B981;
}

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

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

/* Карточка с заданием */
.al-quiz-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);
}

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

.al-quiz-play {
    display: inline-flex;
    align-items: 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);
}

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

.al-quiz-play:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

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

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

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

/* Варианты букв */
.al-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

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

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

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

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

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

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

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

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

.al-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.al-feedback.correct .al-feedback-title { color: #166534; }
.al-feedback.wrong .al-feedback-title   { color: #991B1B; }

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

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

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

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

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

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

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

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

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

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

.al-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;
}

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

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

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

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

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

    .al-learn-title {
        font-size: 1.4rem;
    }

    .al-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .al-letter-card {
        padding: 14px 6px;
    }

    .al-letter-big {
        font-size: 1.5rem;
    }

    .al-letter-small {
        font-size: 0.85rem;
    }

    .al-viewer {
        padding: 28px 20px;
        min-height: 180px;
    }

    .al-viewer-letter {
        font-size: 3.5rem;
    }

    .al-viewer-word {
        font-size: 1.2rem;
    }

    .al-viewer-emoji {
        font-size: 2.8rem;
    }

    .al-quiz-card {
        padding: 28px 20px;
    }

    .al-options {
        grid-template-columns: repeat(2, 1fr);
    }

    .al-option {
        padding: 22px 12px;
        font-size: 1.6rem;
    }

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

    .al-start-actions {
        flex-direction: column;
    }

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

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

@media (max-width: 480px) {
    .al-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================ */
/* === СЕРВИС: ЦВЕТА И ЧИСЛА (cn-) === */
/* ============================================ */

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

.cn-screen {
    display: none;
    animation: cnFadeIn 0.4s ease;
}

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

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

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

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

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

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

.cn-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;
}

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

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

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

.cn-start-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 620px;
    margin: 0 auto;
}

.cn-start-actions .btn {
    min-width: 240px;
}

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

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

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

.cn-game-mode {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    background: rgba(124, 58, 237, 0.12);
    color: var(--primary);
}

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

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

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

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

/* Визуальная карточка */
.cn-visual-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    padding: 40px 32px;
    text-align: center;
    margin-bottom: 24px;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

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

/* Круг цвета */
.cn-color-circle {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    margin-bottom: 16px;
    animation: cnPulse 2.5s ease-in-out infinite;
}

@keyframes cnPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

.cn-color-name-ru {
    font-size: 1.15rem;
    color: var(--light);
    font-style: italic;
}

/* Большая цифра */
.cn-number {
    font-size: 8rem;
    font-weight: 900;
    line-height: 1;
    color: var(--primary);
    letter-spacing: -4px;
    margin-bottom: 8px;
}

.cn-number-hint {
    font-size: 1.15rem;
    color: var(--light);
    font-style: italic;
}

/* ============================================ */
/* === ВАРИАНТЫ ОТВЕТА === */
/* ============================================ */
.cn-options-label {
    text-align: center;
    font-size: 0.95rem;
    color: var(--light);
    margin-bottom: 16px;
    font-weight: 600;
}

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

.cn-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;
}

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

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

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

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

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

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

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

.cn-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.cn-feedback.correct .cn-feedback-title { color: #166534; }
.cn-feedback.wrong .cn-feedback-title   { color: #991B1B; }

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

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

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

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

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

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

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

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

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

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

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

.cn-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;
}

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

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

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

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

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

    .cn-visual-card {
        padding: 28px 20px;
        min-height: 220px;
    }

    .cn-color-circle {
        width: 140px;
        height: 140px;
    }

    .cn-number {
        font-size: 6rem;
    }

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

    .cn-option {
        padding: 18px 16px;
        font-size: 1.05rem;
    }

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

    .cn-start-actions {
        flex-direction: column;
    }

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

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

/* ============================================ */
/* === СЕРВИС: ПЕРВЫЕ СЛОВА (fw-) === */
/* ============================================ */

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

.fw-screen {
    display: none;
    animation: fwFadeIn 0.4s ease;
}

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

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

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

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

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

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

.fw-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;
}

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

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

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

.fw-start-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 720px;
    margin: 0 auto;
}

.fw-start-actions .btn {
    min-width: 200px;
}

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

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

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

.fw-game-topic {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 700;
    background: rgba(124, 58, 237, 0.12);
    color: var(--primary);
}

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

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

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

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

/* Карточка с эмодзи */
.fw-visual-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);
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

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

.fw-emoji-big {
    font-size: 8rem;
    line-height: 1;
    margin-bottom: 12px;
    animation: fwEmojiFloat 3s ease-in-out infinite;
}

@keyframes fwEmojiFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.fw-card-hint {
    font-size: 1rem;
    color: var(--light);
    font-style: italic;
}

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

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

.fw-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;
}

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

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

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

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

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

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

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

.fw-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.fw-feedback.correct .fw-feedback-title { color: #166534; }
.fw-feedback.wrong .fw-feedback-title   { color: #991B1B; }

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

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

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

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

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

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

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

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

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

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

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

.fw-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;
}

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

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

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

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

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

    .fw-start-actions {
        flex-direction: column;
    }

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

    .fw-visual-card {
        padding: 28px 20px;
        min-height: 240px;
    }

    .fw-emoji-big {
        font-size: 6rem;
    }

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

    .fw-option {
        padding: 18px 16px;
        font-size: 1.05rem;
    }

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

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

/* ============================================ */
/* === СЕРВИС: ПРИВЕТСТВИЯ И ЗНАКОМСТВО (gr-) === */
/* ============================================ */

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

.gr-screen {
    display: none;
    animation: grFadeIn 0.4s ease;
}

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

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

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

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

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

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

.gr-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;
}

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

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

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

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

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

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

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

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

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

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

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

/* Диалоговая лента */
.gr-dialogue {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 24px;
}

.gr-message {
    display: flex;
    gap: 12px;
    max-width: 85%;
    animation: grFadeIn 0.4s ease;
}

.gr-message-them {
    align-self: flex-start;
}

.gr-message-you {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.gr-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
    background: var(--bg);
}

.gr-message-you .gr-avatar {
    background: rgba(124, 58, 237, 0.15);
}

.gr-bubble {
    background: var(--white);
    padding: 14px 18px;
    border-radius: 16px;
    border-top-left-radius: 4px;
    box-shadow: var(--shadow);
    font-size: 1.05rem;
    color: var(--dark);
    line-height: 1.5;
    max-width: 100%;
}

.gr-message-you .gr-bubble {
    background: var(--primary);
    color: var(--white);
    border-top-left-radius: 16px;
    border-top-right-radius: 4px;
}

.gr-bubble-en {
    font-weight: 700;
    margin-bottom: 4px;
}

.gr-bubble-ru {
    font-size: 0.88rem;
    color: var(--light);
    font-style: italic;
}

.gr-message-you .gr-bubble-ru {
    color: rgba(255, 255, 255, 0.8);
}

/* Вопрос */
.gr-question-card {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: var(--shadow);
}

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

.gr-question-hint {
    font-size: 1.05rem;
    color: var(--dark);
    line-height: 1.5;
}

/* Варианты */
.gr-options {
    display: grid;
    gap: 12px;
    margin-bottom: 16px;
}

.gr-option {
    padding: 18px 24px;
    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: left;
    line-height: 1.5;
}

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

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

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

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

.gr-option-translation {
    display: block;
    font-size: 0.85rem;
    color: var(--light);
    font-style: italic;
    margin-top: 4px;
    font-weight: 500;
}

.gr-option.correct .gr-option-translation,
.gr-option.wrong .gr-option-translation {
    color: inherit;
    opacity: 0.8;
}

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

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

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

.gr-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.gr-feedback.correct .gr-feedback-title { color: #166534; }
.gr-feedback.wrong .gr-feedback-title   { color: #991B1B; }

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

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

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

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

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

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

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

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

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

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

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

.gr-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;
}

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

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

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

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

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

    .gr-message {
        max-width: 95%;
    }

    .gr-bubble {
        padding: 12px 14px;
        font-size: 1rem;
    }

    .gr-avatar {
        width: 36px;
        height: 36px;
        font-size: 1.3rem;
    }

    .gr-question-card {
        padding: 20px 18px;
    }

    .gr-option {
        padding: 16px 18px;
        font-size: 1rem;
    }

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

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

/* ============================================ */
/* === СЕРВИС: ГЛАГОЛ TO BE (tb-) === */
/* ============================================ */

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

.tb-screen {
    display: none;
    animation: tbFadeIn 0.4s ease;
}

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

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

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

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

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

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

/* Блок с правилом */
.tb-rule-box {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 28px;
    margin-bottom: 32px;
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
    border-left: 4px solid var(--primary);
}

.tb-rule-title {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 16px;
    text-align: center;
}

.tb-rule-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.tb-rule-item {
    background: var(--white);
    border-radius: 10px;
    padding: 16px 12px;
    text-align: center;
    box-shadow: var(--shadow);
}

.tb-rule-pronoun {
    font-size: 1rem;
    font-weight: 600;
    color: var(--light);
    margin-bottom: 6px;
    line-height: 1.3;
}

.tb-rule-verb {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
}

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

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

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

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

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

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

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

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

/* Карточка с предложением */
.tb-task-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 24px;
}

.tb-task-emoji {
    font-size: 3.5rem;
    line-height: 1;
    margin-bottom: 20px;
}

.tb-task-text {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.6;
    margin-bottom: 16px;
}

.tb-gap {
    display: inline-block;
    min-width: 80px;
    padding: 4px 12px;
    margin: 0 4px;
    border-bottom: 3px solid var(--primary);
    color: var(--primary);
    text-align: center;
    font-weight: 800;
    transition: all 0.3s ease;
}

.tb-gap.filled {
    background: rgba(124, 58, 237, 0.1);
    border-radius: 6px;
    border-bottom-color: transparent;
}

.tb-gap.correct {
    background: #F0FDF4;
    color: #166534;
    border-bottom-color: #22C55E;
}

.tb-gap.wrong {
    background: #FEF2F2;
    color: #991B1B;
    border-bottom-color: #EF4444;
}

.tb-task-translation {
    font-size: 1.05rem;
    color: var(--light);
    font-style: italic;
    line-height: 1.5;
}

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

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

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

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

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

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

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

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

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

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

.tb-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.tb-feedback.correct .tb-feedback-title { color: #166534; }
.tb-feedback.wrong .tb-feedback-title   { color: #991B1B; }

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

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

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

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

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

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

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

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

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

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

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

.tb-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;
}

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

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

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

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

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

    .tb-rule-grid {
        grid-template-columns: 1fr;
    }

    .tb-task-card {
        padding: 32px 20px;
    }

    .tb-task-text {
        font-size: 1.25rem;
    }

    .tb-task-emoji {
        font-size: 2.8rem;
    }

    .tb-gap {
        min-width: 60px;
    }

    .tb-options {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .tb-option {
        padding: 20px 8px;
        font-size: 1.15rem;
    }

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

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

/* ============================================ */
/* === СЕРВИС: ПРОСТЫЕ ПРЕДЛОЖЕНИЯ (ss-) === */
/* ============================================ */

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

.ss-screen {
    display: none;
    animation: ssFadeIn 0.4s ease;
}

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

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

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

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

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

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

.ss-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;
}

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

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

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

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

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

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

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

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

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

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

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

/* Карточка с заданием */
.ss-task-card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow-hover);
    padding: 32px;
    text-align: center;
    margin-bottom: 20px;
}

.ss-task-emoji {
    font-size: 3rem;
    line-height: 1;
    margin-bottom: 14px;
}

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

.ss-task-text {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.4;
    font-style: italic;
}

/* Зона сборки */
.ss-build-zone {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border: 2px dashed #C7D2FE;
    border-radius: var(--radius);
    padding: 24px;
    min-height: 90px;
    margin-bottom: 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.ss-build-zone.empty::before {
    content: 'Нажимайте на слова ниже, чтобы собрать предложение';
    color: var(--light);
    font-size: 0.95rem;
    font-style: italic;
    text-align: center;
}

.ss-word {
    display: inline-flex;
    align-items: center;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    user-select: none;
}

/* Слова в зоне сборки */
.ss-build-zone .ss-word {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.ss-build-zone .ss-word:hover {
    background: var(--primary-dark);
}

/* Слова в пуле */
.ss-pool {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 28px;
    min-height: 60px;
}

.ss-pool .ss-word {
    background: var(--white);
    color: var(--dark);
    border-color: #E2E8F0;
    box-shadow: var(--shadow);
}

.ss-pool .ss-word:hover {
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

.ss-pool .ss-word.used {
    opacity: 0.3;
    pointer-events: none;
    transform: none;
}

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

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

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

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

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

.ss-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.ss-feedback.correct .ss-feedback-title { color: #166534; }
.ss-feedback.wrong .ss-feedback-title   { color: #991B1B; }

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

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

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

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

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

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

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

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

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

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

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

.ss-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;
}

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

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

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

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

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

    .ss-task-card {
        padding: 24px 20px;
    }

    .ss-task-emoji {
        font-size: 2.5rem;
    }

    .ss-task-text {
        font-size: 1.1rem;
    }

    .ss-word {
        font-size: 0.95rem;
        padding: 10px 14px;
    }

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

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

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

    .ss-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);
}

/* Популярная секция — лёгкий фон, чтобы отделить от hero */
.popular-section {
    background: linear-gradient(135deg, #F8FAFC 0%, #F0F4FF 100%);
}

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 900px) {
    .services-list-2col {
        grid-template-columns: 1fr;
    }
}

/* ============================================ */
/* === ПОПУЛЯРНЫЕ — 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: 700px) {
    .popular-section .popular-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================ */
/* === СЕРВИС: ФОРМЫ И ФИГУРЫ (sh-) === */
/* ============================================ */

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

.sh-screen {
    display: none;
    animation: shFadeIn 0.4s ease;
}

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

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

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

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

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

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

.sh-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;
}

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

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

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

.sh-start-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 620px;
    margin: 0 auto;
}

.sh-start-actions .btn {
    min-width: 240px;
}

/* ============================================ */
/* === РЕЖИМ ИЗУЧЕНИЯ === */
/* ============================================ */
.sh-learn-header {
    text-align: center;
    margin-bottom: 32px;
}

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

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

.sh-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.sh-shape-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.sh-shape-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    background: #FAFAFE;
}

.sh-shape-card.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
}

.sh-shape-icon {
    width: 48px;
    height: 48px;
    color: var(--primary);
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sh-shape-card.active .sh-shape-icon {
    color: var(--white);
}

.sh-shape-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.sh-shape-name {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
    transition: color 0.2s ease;
}

.sh-shape-card.active .sh-shape-name {
    color: var(--white);
}

/* ============================================ */
/* === ПАНЕЛЬ ПРОСМОТРА === */
/* ============================================ */
.sh-viewer {
    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);
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sh-viewer-placeholder {
    color: var(--light);
    font-size: 1.05rem;
    font-style: italic;
}

.sh-viewer-shape {
    width: 130px;
    height: 130px;
    color: var(--primary);
    margin-bottom: 16px;
    animation: shPulse 2.5s ease-in-out infinite;
}

.sh-viewer-shape svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 8px 16px rgba(124, 58, 237, 0.25));
}

@keyframes shPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

.sh-viewer-word {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.sh-viewer-translation {
    font-size: 1.05rem;
    color: var(--light);
    font-style: italic;
    margin-bottom: 20px;
}

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

.sh-play-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.4);
}

.sh-play-btn.playing {
    background: #10B981;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}

/* ============================================ */
/* === РЕЖИМ ИГРЫ === */
/* ============================================ */
.sh-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

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

.sh-quiz-progress strong {
    color: var(--primary);
}

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

.sh-quiz-score strong {
    color: #10B981;
}

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

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

.sh-quiz-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);
}

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

.sh-quiz-shape {
    width: 140px;
    height: 140px;
    color: var(--primary);
    margin: 0 auto 24px;
    animation: shPulse 2.5s ease-in-out infinite;
}

.sh-quiz-shape svg {
    width: 100%;
    height: 100%;
    display: block;
    filter: drop-shadow(0 10px 20px rgba(124, 58, 237, 0.25));
}

.sh-quiz-play {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

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

.sh-quiz-play:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

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

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

/* Варианты */
.sh-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.sh-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;
}

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

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

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

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

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

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

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

.sh-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.sh-feedback.correct .sh-feedback-title { color: #166534; }
.sh-feedback.wrong .sh-feedback-title   { color: #991B1B; }

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

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

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

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

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

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

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

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

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

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

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

.sh-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;
}

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

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

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

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

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

    .sh-learn-title {
        font-size: 1.4rem;
    }

    .sh-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .sh-shape-card {
        padding: 12px 6px;
    }

    .sh-shape-icon {
        width: 36px;
        height: 36px;
    }

    .sh-shape-name {
        font-size: 0.72rem;
    }

    .sh-viewer {
        padding: 28px 20px;
        min-height: 220px;
    }

    .sh-viewer-shape {
        width: 100px;
        height: 100px;
    }

    .sh-viewer-word {
        font-size: 1.4rem;
    }

    .sh-quiz-card {
        padding: 28px 20px;
    }

    .sh-quiz-shape {
        width: 110px;
        height: 110px;
    }

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

    .sh-option {
        padding: 18px 16px;
        font-size: 1.05rem;
    }

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

    .sh-start-actions {
        flex-direction: column;
    }

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

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

@media (max-width: 480px) {
    .sh-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================ */
/* === КНОПКИ В РЕЖИМЕ ИЗУЧЕНИЯ (al- и sh-) === */
/* ============================================ */
.al-learn-actions,
.sh-learn-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

.al-learn-actions .btn,
.sh-learn-actions .btn {
    min-width: 220px;
}

@media (max-width: 768px) {
    .al-learn-actions,
    .sh-learn-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .al-learn-actions .btn,
    .sh-learn-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

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

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

.bp-screen {
    display: none;
    animation: bpFadeIn 0.4s ease;
}

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

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

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

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

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

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

.bp-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;
}

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

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

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

.bp-start-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 620px;
    margin: 0 auto;
}

.bp-start-actions .btn {
    min-width: 240px;
}

/* ============================================ */
/* === РЕЖИМ ИЗУЧЕНИЯ === */
/* ============================================ */
.bp-learn-header {
    text-align: center;
    margin-bottom: 32px;
}

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

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

.bp-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.bp-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.bp-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    background: #FAFAFE;
}

.bp-card.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
}

.bp-emoji-big {
    font-size: 2.2rem;
    line-height: 1;
}

.bp-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
    transition: color 0.2s ease;
}

.bp-card.active .bp-name {
    color: var(--white);
}

/* Панель просмотра */
.bp-viewer {
    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);
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.bp-viewer-placeholder {
    color: var(--light);
    font-size: 1.05rem;
    font-style: italic;
}

.bp-viewer-emoji {
    font-size: 6rem;
    line-height: 1;
    margin-bottom: 16px;
    animation: bpFloat 2.5s ease-in-out infinite;
}

@keyframes bpFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.bp-viewer-word {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.bp-viewer-translation {
    font-size: 1.05rem;
    color: var(--light);
    font-style: italic;
    margin-bottom: 20px;
}

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

.bp-play-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.4);
}

.bp-play-btn.playing {
    background: #10B981;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}

/* Кнопки в режиме изучения */
.bp-learn-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

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

/* ============================================ */
/* === РЕЖИМ ИГРЫ === */
/* ============================================ */
.bp-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

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

.bp-quiz-progress strong {
    color: var(--primary);
}

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

.bp-quiz-score strong {
    color: #10B981;
}

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

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

.bp-quiz-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);
}

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

.bp-quiz-emoji {
    font-size: 6rem;
    line-height: 1;
    margin-bottom: 24px;
    animation: bpFloat 2.5s ease-in-out infinite;
}

.bp-quiz-play {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

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

.bp-quiz-play:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

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

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

/* Варианты */
.bp-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.bp-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;
}

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

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

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

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

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

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

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

.bp-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.bp-feedback.correct .bp-feedback-title { color: #166534; }
.bp-feedback.wrong .bp-feedback-title   { color: #991B1B; }

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

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

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

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

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

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

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

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

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

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

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

.bp-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;
}

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

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

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

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

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

    .bp-learn-title {
        font-size: 1.4rem;
    }

    .bp-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .bp-card {
        padding: 12px 6px;
    }

    .bp-emoji-big {
        font-size: 1.8rem;
    }

    .bp-name {
        font-size: 0.75rem;
    }

    .bp-viewer {
        padding: 28px 20px;
        min-height: 220px;
    }

    .bp-viewer-emoji {
        font-size: 4.5rem;
    }

    .bp-viewer-word {
        font-size: 1.4rem;
    }

    .bp-quiz-card {
        padding: 28px 20px;
    }

    .bp-quiz-emoji {
        font-size: 4.5rem;
    }

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

    .bp-option {
        padding: 18px 16px;
        font-size: 1.05rem;
    }

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

    .bp-start-actions,
    .bp-learn-actions {
        flex-direction: column;
    }

    .bp-start-actions .btn,
    .bp-learn-actions .btn {
        width: 100%;
        min-width: 0;
    }

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

@media (max-width: 480px) {
    .bp-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================ */
/* === СЕРВИС: ПРОФЕССИИ (jb-) === */
/* ============================================ */

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

.jb-screen {
    display: none;
    animation: jbFadeIn 0.4s ease;
}

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

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

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

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

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

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

.jb-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;
}

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

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

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

.jb-start-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 620px;
    margin: 0 auto;
}

.jb-start-actions .btn {
    min-width: 240px;
}

/* ============================================ */
/* === РЕЖИМ ИЗУЧЕНИЯ === */
/* ============================================ */
.jb-learn-header {
    text-align: center;
    margin-bottom: 32px;
}

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

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

.jb-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.jb-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.jb-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    background: #FAFAFE;
}

.jb-card.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
}

.jb-emoji-big {
    font-size: 2.2rem;
    line-height: 1;
}

.jb-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
    transition: color 0.2s ease;
}

.jb-card.active .jb-name {
    color: var(--white);
}

.jb-viewer {
    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);
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.jb-viewer-placeholder {
    color: var(--light);
    font-size: 1.05rem;
    font-style: italic;
}

.jb-viewer-emoji {
    font-size: 6rem;
    line-height: 1;
    margin-bottom: 16px;
    animation: jbFloat 2.5s ease-in-out infinite;
}

@keyframes jbFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.jb-viewer-word {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.jb-viewer-translation {
    font-size: 1.05rem;
    color: var(--light);
    font-style: italic;
    margin-bottom: 20px;
}

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

.jb-play-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.4);
}

.jb-play-btn.playing {
    background: #10B981;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}

.jb-learn-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

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

/* ============================================ */
/* === РЕЖИМ ИГРЫ === */
/* ============================================ */
.jb-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

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

.jb-quiz-progress strong {
    color: var(--primary);
}

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

.jb-quiz-score strong {
    color: #10B981;
}

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

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

.jb-quiz-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);
}

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

.jb-quiz-emoji {
    font-size: 6rem;
    line-height: 1;
    margin-bottom: 24px;
    animation: jbFloat 2.5s ease-in-out infinite;
}

.jb-quiz-play {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

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

.jb-quiz-play:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

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

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

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

.jb-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;
}

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

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

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

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

.jb-feedback {
    margin-top: 24px;
    padding: 22px 24px;
    border-radius: 10px;
    text-align: left;
    animation: jbFadeIn 0.3s ease;
}

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

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

.jb-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.jb-feedback.correct .jb-feedback-title { color: #166534; }
.jb-feedback.wrong .jb-feedback-title   { color: #991B1B; }

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

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

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

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

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

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

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

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

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

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

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

.jb-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;
}

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

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

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

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

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

    .jb-learn-title {
        font-size: 1.4rem;
    }

    .jb-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .jb-card {
        padding: 12px 6px;
    }

    .jb-emoji-big {
        font-size: 1.8rem;
    }

    .jb-name {
        font-size: 0.75rem;
    }

    .jb-viewer {
        padding: 28px 20px;
        min-height: 220px;
    }

    .jb-viewer-emoji {
        font-size: 4.5rem;
    }

    .jb-viewer-word {
        font-size: 1.4rem;
    }

    .jb-quiz-card {
        padding: 28px 20px;
    }

    .jb-quiz-emoji {
        font-size: 4.5rem;
    }

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

    .jb-option {
        padding: 18px 16px;
        font-size: 1.05rem;
    }

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

    .jb-start-actions,
    .jb-learn-actions {
        flex-direction: column;
    }

    .jb-start-actions .btn,
    .jb-learn-actions .btn {
        width: 100%;
        min-width: 0;
    }

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

@media (max-width: 480px) {
    .jb-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================ */
/* === СЕРВИС: ТРАНСПОРТ (tr-) === */
/* ============================================ */

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

.tr-screen {
    display: none;
    animation: trFadeIn 0.4s ease;
}

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

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

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

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

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

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

.tr-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;
}

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

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

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

.tr-start-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 620px;
    margin: 0 auto;
}

.tr-start-actions .btn {
    min-width: 240px;
}

/* ============================================ */
/* === РЕЖИМ ИЗУЧЕНИЯ === */
/* ============================================ */
.tr-learn-header {
    text-align: center;
    margin-bottom: 32px;
}

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

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

.tr-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.tr-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.tr-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    background: #FAFAFE;
}

.tr-card.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
}

.tr-emoji-big {
    font-size: 2.2rem;
    line-height: 1;
}

.tr-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
    transition: color 0.2s ease;
}

.tr-card.active .tr-name {
    color: var(--white);
}

.tr-viewer {
    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);
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.tr-viewer-placeholder {
    color: var(--light);
    font-size: 1.05rem;
    font-style: italic;
}

.tr-viewer-emoji {
    font-size: 6rem;
    line-height: 1;
    margin-bottom: 16px;
    animation: trFloat 2.5s ease-in-out infinite;
}

@keyframes trFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.tr-viewer-word {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.tr-viewer-translation {
    font-size: 1.05rem;
    color: var(--light);
    font-style: italic;
    margin-bottom: 20px;
}

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

.tr-play-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.4);
}

.tr-play-btn.playing {
    background: #10B981;
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35);
}

.tr-learn-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

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

/* ============================================ */
/* === РЕЖИМ ИГРЫ === */
/* ============================================ */
.tr-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

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

.tr-quiz-progress strong {
    color: var(--primary);
}

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

.tr-quiz-score strong {
    color: #10B981;
}

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

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

.tr-quiz-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);
}

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

.tr-quiz-emoji {
    font-size: 6rem;
    line-height: 1;
    margin-bottom: 24px;
    animation: trFloat 2.5s ease-in-out infinite;
}

.tr-quiz-play {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 10px 24px rgba(124, 58, 237, 0.3);
}

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

.tr-quiz-play:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

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

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

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

.tr-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;
}

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

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

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

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

.tr-feedback {
    margin-top: 24px;
    padding: 22px 24px;
    border-radius: 10px;
    text-align: left;
    animation: trFadeIn 0.3s ease;
}

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

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

.tr-feedback-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.tr-feedback.correct .tr-feedback-title { color: #166534; }
.tr-feedback.wrong .tr-feedback-title   { color: #991B1B; }

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

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

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

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

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

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

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

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

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

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

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

.tr-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;
}

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

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

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

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

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

    .tr-learn-title {
        font-size: 1.4rem;
    }

    .tr-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .tr-card {
        padding: 12px 6px;
    }

    .tr-emoji-big {
        font-size: 1.8rem;
    }

    .tr-name {
        font-size: 0.75rem;
    }

    .tr-viewer {
        padding: 28px 20px;
        min-height: 220px;
    }

    .tr-viewer-emoji {
        font-size: 4.5rem;
    }

    .tr-viewer-word {
        font-size: 1.4rem;
    }

    .tr-quiz-card {
        padding: 28px 20px;
    }

    .tr-quiz-emoji {
        font-size: 4.5rem;
    }

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

    .tr-option {
        padding: 18px 16px;
        font-size: 1.05rem;
    }

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

    .tr-start-actions,
    .tr-learn-actions {
        flex-direction: column;
    }

    .tr-start-actions .btn,
    .tr-learn-actions .btn {
        width: 100%;
        min-width: 0;
    }

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

@media (max-width: 480px) {
    .tr-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================ */
/* === СЕРВИС: МНОЖЕСТВЕННОЕ ЧИСЛО (pl-) === */
/* ============================================ */

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

.pl-screen {
    display: none;
    animation: plFadeIn 0.4s ease;
}

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

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

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

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

.pl-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;
}

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

.pl-rule:last-child { margin-bottom: 0; }
.pl-rule-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1.3; }

.pl-start-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 620px;
    margin: 0 auto;
}

.pl-start-actions .btn { min-width: 240px; }

/* ============================================ */
/* === РЕЖИМ ИЗУЧЕНИЯ === */
/* ============================================ */
.pl-learn-header { text-align: center; margin-bottom: 32px; }
.pl-learn-title { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.pl-learn-subtitle { font-size: 1.05rem; color: var(--light); }

.pl-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 32px;
}

.pl-rule-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 20px 10px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.pl-rule-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    background: #FAFAFE;
}

.pl-rule-card.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
}

.pl-rule-icon { font-size: 1.8rem; line-height: 1; }
.pl-rule-num { font-size: 0.72rem; font-weight: 600; color: var(--light); text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.2s ease; }
.pl-rule-card.active .pl-rule-num { color: rgba(255, 255, 255, 0.75); }
.pl-rule-short { font-size: 1.15rem; font-weight: 800; color: var(--dark); line-height: 1.2; transition: color 0.2s ease; }
.pl-rule-card.active .pl-rule-short { color: var(--white); }

/* Панель просмотра правила */
.pl-viewer {
    background: linear-gradient(135deg, #E0E7FF 0%, #F5F3FF 100%);
    border-radius: var(--radius);
    padding: 32px 32px 28px;
    text-align: center;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
    min-height: 240px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pl-viewer-placeholder { color: var(--light); font-size: 1.05rem; font-style: italic; }

.pl-viewer-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
    width: 100%;
    justify-content: center;
}

.pl-viewer-icon { font-size: 3rem; line-height: 1; }

.pl-viewer-titles { text-align: left; }

.pl-viewer-num {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.pl-viewer-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.2;
}

.pl-viewer-desc {
    font-size: 1rem;
    color: var(--dark);
    line-height: 1.6;
    margin-bottom: 24px;
    max-width: 600px;
}

.pl-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    width: 100%;
    margin-bottom: 20px;
}

.pl-example {
    background: var(--white);
    border-radius: 10px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.05rem;
    box-shadow: var(--shadow);
}

.pl-example-sing { color: var(--light); font-weight: 600; }
.pl-example-arrow { color: var(--primary); font-weight: 800; }
.pl-example-plur { color: var(--primary); font-weight: 800; }

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

.pl-play-btn:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(124, 58, 237, 0.4);
}

.pl-play-btn.playing { background: #10B981; box-shadow: 0 8px 20px rgba(16, 185, 129, 0.35); }

.pl-learn-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

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

/* ============================================ */
/* === РЕЖИМ ИГРЫ === */
/* ============================================ */
.pl-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pl-quiz-progress { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.pl-quiz-progress strong { color: var(--primary); }
.pl-quiz-score { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.pl-quiz-score strong { color: #10B981; }

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

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

.pl-quiz-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);
}

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

.pl-quiz-word {
    font-size: 3rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -1px;
}

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

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

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

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

.pl-option {
    padding: 22px 20px;
    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.4;
}

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

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

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

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

.pl-feedback {
    margin-top: 24px;
    padding: 22px 24px;
    border-radius: 10px;
    text-align: left;
    animation: plFadeIn 0.3s ease;
}

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

.pl-feedback-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; }
.pl-feedback.correct .pl-feedback-title { color: #166534; }
.pl-feedback.wrong .pl-feedback-title { color: #991B1B; }

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

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

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

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

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

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

.pl-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;
}

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

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

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

/* ============================================ */
/* === АДАПТИВ === */
/* ============================================ */
@media (max-width: 768px) {
    .pl-start,
    .pl-result-card { padding: 36px 24px; }
    .pl-start-title,
    .pl-result-title { font-size: 1.6rem; }
    .pl-learn-title { font-size: 1.4rem; }

    .pl-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .pl-rule-card { padding: 14px 6px; }
    .pl-rule-icon { font-size: 1.5rem; }
    .pl-rule-short { font-size: 0.95rem; }
    .pl-rule-num { font-size: 0.65rem; }

    .pl-viewer { padding: 24px 20px; }
    .pl-viewer-header { gap: 12px; }
    .pl-viewer-icon { font-size: 2.2rem; }
    .pl-viewer-title { font-size: 1.15rem; }
    .pl-examples { grid-template-columns: 1fr; }
    .pl-example { font-size: 0.95rem; padding: 10px 12px; }

    .pl-quiz-card { padding: 28px 20px; }
    .pl-quiz-word { font-size: 2.2rem; }

    .pl-options { grid-template-columns: 1fr; }
    .pl-option { padding: 18px 16px; font-size: 1.1rem; }

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

    .pl-start-actions,
    .pl-learn-actions { flex-direction: column; }
    .pl-start-actions .btn,
    .pl-learn-actions .btn { width: 100%; min-width: 0; }
    .pl-result-actions { grid-template-columns: 1fr; max-width: 100%; }
}

@media (max-width: 480px) {
    .pl-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================ */
/* === СЕРВИС: ЧИСЛА 20–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-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 620px;
    margin: 0 auto;
}

.nm-start-actions .btn { min-width: 240px; }

/* ============================================ */
/* === РЕЖИМ ИЗУЧЕНИЯ === */
/* ============================================ */
.nm-learn-header { text-align: center; margin-bottom: 32px; }
.nm-learn-title { font-size: 1.8rem; font-weight: 800; color: var(--dark); margin-bottom: 8px; }
.nm-learn-subtitle { font-size: 1.05rem; color: var(--light); }

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

.nm-card {
    background: var(--white);
    border: 2px solid #E2E8F0;
    border-radius: 12px;
    padding: 18px 8px;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: inherit;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.nm-card:hover {
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: var(--shadow-hover);
    background: #FAFAFE;
}

.nm-card.active {
    background: var(--primary);
    color: var(--white);
    border-color: var(--primary);
    transform: translateY(-4px);
    box-shadow: 0 10px 20px rgba(124, 58, 237, 0.3);
}

.nm-digit-big {
    font-size: 2rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
    transition: color 0.2s ease;
}

.nm-card.active .nm-digit-big { color: var(--white); }

.nm-name {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
    transition: color 0.2s ease;
}

.nm-card.active .nm-name { color: var(--white); }

/* Панель просмотра */
.nm-viewer {
    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);
    min-height: 260px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.nm-viewer-placeholder { color: var(--light); font-size: 1.05rem; font-style: italic; }

.nm-viewer-digit {
    font-size: 6rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
    letter-spacing: -3px;
    margin-bottom: 16px;
    animation: nmPop 2.5s ease-in-out infinite;
}

@keyframes nmPop {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

.nm-viewer-word {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}

.nm-viewer-translation {
    font-size: 1.05rem;
    color: var(--light);
    font-style: italic;
    margin-bottom: 20px;
}

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

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

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

.nm-learn-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
}

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

/* ============================================ */
/* === РЕЖИМ ИГРЫ === */
/* ============================================ */
.nm-quiz-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.nm-quiz-progress { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.nm-quiz-progress strong { color: var(--primary); }
.nm-quiz-score { font-weight: 600; color: var(--light); font-size: 0.95rem; }
.nm-quiz-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-quiz-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-quiz-label {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.nm-quiz-digit {
    font-size: 6.5rem;
    font-weight: 900;
    color: var(--primary);
    line-height: 1;
    letter-spacing: -4px;
    margin-bottom: 24px;
    animation: nmPop 2.5s ease-in-out infinite;
}

.nm-quiz-play {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 32px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 12px;
    font-size: 1.05rem;
    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-quiz-play:hover:not(:disabled) {
    background: var(--primary-dark);
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(124, 58, 237, 0.4);
}

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

.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;
}

.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: 22px 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: 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-learn-title { font-size: 1.4rem; }

    .nm-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .nm-card { padding: 14px 6px; }
    .nm-digit-big { font-size: 1.6rem; }
    .nm-name { font-size: 0.75rem; }

    .nm-viewer { padding: 28px 20px; min-height: 220px; }
    .nm-viewer-digit { font-size: 4.5rem; }
    .nm-viewer-word { font-size: 1.4rem; }

    .nm-quiz-card { padding: 28px 20px; }
    .nm-quiz-digit { font-size: 5rem; }

    .nm-options { grid-template-columns: 1fr; }
    .nm-option { padding: 18px 16px; font-size: 1.05rem; }

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

    .nm-start-actions,
    .nm-learn-actions { flex-direction: column; }
    .nm-start-actions .btn,
    .nm-learn-actions .btn { width: 100%; min-width: 0; }
    .nm-result-actions { grid-template-columns: 1fr; max-width: 100%; }
}

@media (max-width: 480px) {
    .nm-grid { grid-template-columns: repeat(2, 1fr); }
}