/* ==================================================
   LESSON 7 — TOYS / THIS & THAT
   BASED DIRECTLY ON LESSON 5 — COLORS
================================================== */

@import url("lesson-5.css");


/* ==================================================
   BODY
================================================== */

.toys-lesson-body {
    font-family: "Fredoka", sans-serif;
}


/* ==================================================
   INTRO
================================================== */

.toy-intro-icon {
    width: 88px;
    height: 88px;

    margin: 0 auto 16px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            #fff3f5,
            #f5f0ff,
            #eef8ff
        );

    border: 2px solid #e4dfe9;
    border-bottom: 6px solid #d0c6d9;
    border-radius: 28px;

    box-shadow:
        0 10px 24px
        rgba(95, 81, 110, 0.08);

    font-size: 46px;

    animation:
        toyIntroFloat
        2.2s
        ease-in-out
        infinite;
}


@keyframes toyIntroFloat {

    50% {
        transform:
            translateY(-6px)
            rotate(3deg);
    }

}


/* ==================================================
   TOY VOCABULARY PAGE
================================================== */

.toy-vocabulary-page {
    min-height: 760px;

    padding:
        52px
        42px
        55px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #fffdfa,
            #f5f2fa
        );

    border: 2px solid #e7dfe8;
    border-radius: var(--card-radius);

    box-shadow:
        0 20px 55px
        rgba(105, 89, 116, 0.08);

    text-align: center;
}


/* ==================================================
   TOY PAGE HEADING
   SAME VISUAL LOGIC AS COLORS
================================================== */

.toy-page-heading {
    max-width: 700px;

    margin: 0 auto 30px;

    text-align: center;
}


.toy-heading-icon {
    width: 88px;
    height: 88px;

    margin: 0 auto 16px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            #fff7ec,
            #f3eefb
        );

    border: 2px solid #e5dcea;
    border-bottom: 6px solid #d1c5dc;
    border-radius: 27px;

    font-size: 44px;
}


.toy-page-heading h2 {
    margin:
        0
        0
        10px;

    color: #514b59;

    font-size:
        clamp(
            38px,
            5vw,
            52px
        );
}


.toy-page-heading > p:last-child {
    margin: 0;

    color: #817b87;

    font-size: 15px;
    line-height: 1.5;
}


/* ==================================================
   TOY PROGRESS
================================================== */

.toy-progress {
    width: min(620px, 100%);

    margin:
        0
        auto
        18px;

    text-align: left;
}


.toy-progress > span {
    color: #8b8490;

    font-size: 11px;
}


.toy-progress > strong {
    float: right;

    color: #655e6c;

    font-size: 14px;
}


.toy-progress-track {
    width: 100%;
    height: 10px;

    margin-top: 8px;

    overflow: hidden;

    background: #ece7ef;

    border-radius: 999px;
}


.toy-progress-fill {
    width: 0;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #d9c9e5,
            #c7b4da
        );

    border-radius: inherit;

    transition:
        width
        0.35s
        ease;
}


/* ==================================================
   TOY LEARNING CARD
   EXACT CARD VALUES FROM COLOR LEARNING CARD
================================================== */

.toy-card {
    width: min(620px, 100%);

    min-height: 430px;

    margin: 0 auto;

    padding:
        25px
        28px
        28px;

    position: relative;

    background:
        linear-gradient(
            180deg,
            #fffefc,
            #faf7f2
        );

    border: 2px solid #e7dfd7;
    border-bottom: 7px solid #d7cbc0;
    border-radius: 29px;

    box-shadow:
        0 14px 32px
        rgba(95, 78, 62, 0.07);

    text-align: center;
}


/* ==================================================
   TOY CARD POSITION
================================================== */

.toy-card-number {
    position: absolute;

    top: 22px;
    right: 24px;

    color: #8b8490;

    font-size: 12px;
    font-weight: 600;
}


/* ==================================================
   TOY VISUAL
   NO EXTRA YELLOW CIRCLE
================================================== */

.toy-card-emoji {
    margin:
        34px
        auto
        10px;

    font-size: 120px;

    line-height: 1.1;

    animation:
        toyVisualPop
        0.45s
        ease;
}


@keyframes toyVisualPop {

    0% {
        transform:
            scale(0.7);
    }

    70% {
        transform:
            scale(1.12);
    }

    100% {
        transform:
            scale(1);
    }

}


/* ==================================================
   TOY WORD
   SAME TYPOGRAPHY AS COLOR WORD
================================================== */

.toy-card h3 {
    margin: 0;

    color: #5c5564;

    font-size:
        clamp(
            38px,
            6vw,
            52px
        );

    font-weight: 700;
}


/* ==================================================
   TOY TRANSLATION
   SAME AS COLOR TRANSLATION
================================================== */

.toy-card > p {
    margin:
        6px
        0
        23px;

    color: #8a8290;

    font-size: 16px;
}


/* ==================================================
   LISTEN BUTTON
   SAME BUTTON FAMILY AS COLORS
================================================== */

.toy-listen-button {
    padding:
        13px
        18px;

    background:
        linear-gradient(
            180deg,
            #f7f3fa,
            #eee9f4
        );

    border: 2px solid #ded6e7;
    border-bottom: 5px solid #c9bed7;
    border-radius: 15px;

    color: #675f73;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;

    cursor: pointer;

    transition:
        transform
        0.18s
        ease,
        box-shadow
        0.18s
        ease;
}


.toy-listen-button:hover {
    transform:
        translateY(-2px);
}


.toy-listen-button:active {
    transform:
        translateY(1px);
}


/* ==================================================
   LISTENED MESSAGE
================================================== */

.toy-listened-message {
    margin:
        12px
        0
        0;

    min-height: 20px;

    color: #817988;

    font-size: 13px;

    opacity: 0;

    transition:
        opacity
        0.2s
        ease;
}


.toy-listened-message.visible {
    opacity: 1;
}


/* ==================================================
   TOY NAVIGATION
================================================== */

.toy-navigation {
    width: min(620px, 100%);

    margin:
        18px
        auto
        14px;

    display: flex;
    justify-content: center;

    gap: 10px;
}


.toy-arrow-button {
    width: 52px;
    min-height: 52px;

    background:
        linear-gradient(
            180deg,
            #f7f3fa,
            #eee9f4
        );

    border: 2px solid #ded6e7;
    border-bottom: 5px solid #c9bed7;
    border-radius: 15px;

    color: #675f73;

    font-family: inherit;
    font-size: 18px;
    font-weight: 600;

    cursor: pointer;
}


.toy-arrow-button:disabled {
    opacity: 0.45;

    cursor: default;
}


/* ==================================================
   THIS / THAT PAGE
================================================== */

.demonstrative-rule-page {
    min-height: 760px;

    padding:
        52px
        42px
        55px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #fffdfa,
            #f5f2fa
        );

    border: 2px solid #e7dfe8;
    border-radius: var(--card-radius);

    box-shadow:
        0 20px 55px
        rgba(105, 89, 116, 0.08);

    text-align: center;
}


/* ==================================================
   RULE HEADING
================================================== */

.rule-page-heading {
    max-width: 700px;

    margin: 0 auto 24px;

    text-align: center;
}


.rule-heading-icon {
    width: 88px;
    height: 88px;

    margin: 0 auto 16px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            #fff7ec,
            #f3eefb
        );

    border: 2px solid #e5dcea;
    border-bottom: 6px solid #d1c5dc;
    border-radius: 27px;

    font-size: 44px;
}


.rule-page-heading h2 {
    margin:
        0
        0
        10px;

    color: #514b59;

    font-size:
        clamp(
            38px,
            5vw,
            52px
        );
}


.rule-page-heading > p:last-child {
    margin: 0;

    color: #817b87;

    font-size: 15px;
    line-height: 1.5;
}


/* ==================================================
   THIS / THAT EXPLANATION BOX
   SAME WARM CARD AS COLORS
================================================== */

.demonstrative-box {
    width: min(620px, 100%);

    margin: 0 auto 28px;

    padding:
        25px
        28px
        28px;

    background:
        linear-gradient(
            180deg,
            #fffefc,
            #faf7f2
        );

    border: 2px solid #e7dfd7;
    border-bottom: 7px solid #d7cbc0;
    border-radius: 29px;

    box-shadow:
        0 14px 32px
        rgba(95, 78, 62, 0.07);

    text-align: left;
}


/* ==================================================
   THIS / THAT BOX TOP
================================================== */

.demonstrative-box-top {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-bottom: 18px;
}


.demonstrative-word {
    min-width: 92px;
    height: 66px;

    padding:
        0
        12px;

    display: grid;
    place-items: center;

    background: #fff;

    border: 2px solid #e1dbe5;
    border-bottom: 5px solid #cec4d5;
    border-radius: 17px;

    color: #625b6c;

    font-size: 23px;
    font-weight: 700;
}


.demonstrative-box-top span {
    display: block;

    margin-bottom: 2px;

    color: #9a819d;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;
}


.demonstrative-box-top h3 {
    margin: 0;

    color: #5d5665;

    font-size: 22px;
}


/* ==================================================
   RULE TEXT
================================================== */

.demonstrative-main-text {
    margin:
        0
        0
        20px;

    color: #817985;

    font-size: 15px;
    line-height: 1.55;
}


.demonstrative-main-text strong {
    color: #625a68;
}


/* ==================================================
   DISTANCE SCENE
================================================== */

.distance-scene {
    min-height: 130px;

    margin:
        20px
        auto
        10px;

    padding:
        18px
        22px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #fffefc,
            #faf7f2
        );

    border: 2px dashed #d8d0dc;
    border-radius: 23px;
}


.distance-person,
.distance-toy {
    font-size: 60px;
}


.distance-line {
    color: #afa7b5;

    font-size: 24px;

    white-space: nowrap;
}


.short-line {
    width: 80px;
}


.long-line {
    width: 260px;

    text-align: center;
}


/* ==================================================
   DISTANCE LABEL
================================================== */

.distance-label {
    width: fit-content;

    margin:
        0
        auto
        17px;

    padding:
        7px
        13px;

    background:
        linear-gradient(
            180deg,
            #f7f3fa,
            #eee9f4
        );

    border: 2px solid #ded6e7;
    border-radius: 999px;

    color: #675f73;

    font-size: 10px;
    font-weight: 700;
}


/* ==================================================
   THIS / THAT FORMULA
================================================== */

.demonstrative-formula {
    width: fit-content;

    margin:
        0
        auto
        20px;

    padding:
        11px
        15px;

    display: flex;
    align-items: center;

    gap: 9px;

    background:
        linear-gradient(
            135deg,
            #fff7ea,
            #f5effc,
            #eef8ff
        );

    border: 2px solid #e2d8e8;
    border-bottom: 4px solid #cec0d8;
    border-radius: 18px;

    color: #817985;

    font-size: 12px;
}


.demonstrative-formula strong {
    color: #5d5665;

    font-size: 18px;
}


/* ==================================================
   RULE EXAMPLES
================================================== */

.demonstrative-example-area {
    margin-top: 12px;

    padding:
        14px
        16px;

    display: flex;
    align-items: center;

    gap: 14px;

    background: #fff;

    border: 2px solid #e1dbe5;
    border-bottom: 5px solid #cec4d5;
    border-radius: 17px;
}


.example-emoji {
    font-size: 34px;
}


.demonstrative-example-area > div {
    flex: 1;
}


.demonstrative-example-area small {
    display: block;

    margin-bottom: 2px;

    color: #9a819d;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;
}


.demonstrative-example-area strong {
    display: block;

    color: #5d5665;

    font-size: 16px;
}


.speak-rule-button {
    width: 42px;
    height: 42px;

    background:
        linear-gradient(
            180deg,
            #f7f3fa,
            #eee9f4
        );

    border: 2px solid #ded6e7;
    border-bottom: 5px solid #c9bed7;
    border-radius: 13px;

    cursor: pointer;
}


/* ==================================================
   GAMES PAGE
================================================== */

.external-games-page {
    min-height: 760px;

    padding:
        52px
        42px
        55px;

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #fffdfa,
            #f5f2fa
        );

    border: 2px solid #e7dfe8;
    border-radius: var(--card-radius);

    box-shadow:
        0 20px 55px
        rgba(105, 89, 116, 0.08);

    text-align: center;
}


/* ==================================================
   GAMES HEADING
================================================== */

.games-heading {
    max-width: 700px;

    margin: 0 auto 30px;

    text-align: center;
}


.games-heading-icon {
    width: 88px;
    height: 88px;

    margin: 0 auto 16px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            #fff3f5,
            #f5f0ff,
            #eef8ff
        );

    border: 2px solid #e4dfe9;
    border-bottom: 6px solid #d0c6d9;
    border-radius: 28px;

    box-shadow:
        0 10px 24px
        rgba(95, 81, 110, 0.08);

    font-size: 46px;
}


.games-heading h2 {
    margin:
        0
        0
        10px;

    color: #514b59;

    font-size:
        clamp(
            38px,
            5vw,
            52px
        );
}


.games-heading p {
    margin: 0;

    color: #817b87;

    font-size: 15px;
    line-height: 1.5;
}


/* ==================================================
   EXTERNAL GAME GRID
================================================== */

.external-games-grid {
    width: min(820px, 100%);

    margin: 0 auto 22px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 22px;
}


/* ==================================================
   EXTERNAL GAME CARDS
================================================== */

.external-game-card {
    position: relative;

    min-height: 300px;

    padding:
        24px
        22px;

    background:
        linear-gradient(
            180deg,
            #fffefc,
            #faf7f2
        );

    border: 2px solid #e7dfd7;
    border-bottom: 6px solid #d6ccc0;
    border-radius: 25px;

    box-shadow:
        0 10px 24px
        rgba(95, 77, 61, 0.06);

    text-align: center;
}


.external-game-number {
    position: absolute;

    top: 16px;
    right: 16px;

    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            180deg,
            #f7f3fa,
            #eee9f4
        );

    border: 2px solid #ded6e7;

    border-radius: 50%;

    color: #675f73;

    font-size: 12px;
    font-weight: 700;
}


.external-game-icon {
    margin:
        10px
        0
        8px;

    font-size: 60px;
}


.external-game-label {
    display: block;

    margin-bottom: 3px;

    color: #987a9b;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1.2px;
}


.external-game-card h3 {
    margin:
        0
        0
        8px;

    color: #5d5664;

    font-size: 23px;
}


.external-game-card p {
    margin:
        0
        0
        18px;

    color: #817a85;

    font-size: 14px;
    line-height: 1.5;
}


.external-game-button {
    display: inline-flex;

    padding:
        13px
        16px;

    background:
        linear-gradient(
            180deg,
            #f7f3fa,
            #eee9f4
        );

    border: 2px solid #ded6e7;
    border-bottom: 5px solid #c9bed7;
    border-radius: 15px;

    color: #675f73;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;

    transition:
        transform
        0.18s
        ease;
}


.external-game-button:hover {
    transform:
        translateY(-2px);
}


/* ==================================================
   EXTERNAL NOTE
================================================== */

.outside-game-note {
    width: min(650px, 100%);

    margin:
        0
        auto
        26px;

    padding:
        13px
        15px;

    background:
        linear-gradient(
            135deg,
            #fff7ea,
            #f5effc,
            #eef8ff
        );

    border: 2px solid #e2d8e8;
    border-bottom: 5px solid #cec0d8;
    border-radius: 17px;

    color: #817985;

    font-size: 12px;
}


/* ==================================================
   PRACTICE NOTE
================================================== */

.practice-important-note {
    width: fit-content;

    margin:
        15px
        auto
        0;

    padding:
        10px
        14px;

    background:
        linear-gradient(
            135deg,
            #fff7ea,
            #f5effc,
            #eef8ff
        );

    border: 2px solid #e2d8e8;

    border-radius: 999px;

    color: #817985;

    font-size: 11px;
}


/* ==================================================
   TASK QUESTION CARD
================================================== */

.distance-question {
    width: min(650px, 100%);

    margin: 0 auto;

    padding:
        24px
        22px;

    background:
        linear-gradient(
            180deg,
            #fffefb,
            #faf7f2
        );

    border: 2px solid #e8e0d7;
    border-bottom: 6px solid #d8cdc0;
    border-radius: 25px;

    text-align: center;
}


/* ==================================================
   TASK DISTANCE SCENE
================================================== */

.task-distance-scene {
    min-height: 145px;

    margin:
        16px
        0;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;

    border: 2px dashed #d8d0dc;
    border-radius: 23px;
}


.task-person,
.task-toy {
    font-size: 60px;
}


.task-gap-near {
    width: 80px;
}


.task-gap-far {
    width: 270px;
}


.task-gap-near,
.task-gap-far {
    color: #afa7b5;

    overflow: hidden;

    white-space: nowrap;
}


/* ==================================================
   TASK CHOICE GRID
================================================== */

.task-choice-grid {
    margin-top: 18px;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 11px;
}


/* ==================================================
   TASK CHOICE BUTTON
   SAME AS COLOR WORD BUTTON
================================================== */

.task-choice-button {
    padding:
        13px
        14px;

    background:
        linear-gradient(
            180deg,
            #f7f3fa,
            #eee9f4
        );

    border: 2px solid #ded6e7;
    border-bottom: 5px solid #c9bed7;
    border-radius: 15px;

    color: #675f73;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;

    cursor: pointer;
}


.task-choice-button.correct {
    background: #eef6e8;
    border-color: #bfd1ae;
}


.task-choice-button.wrong {
    background: #faecec;
    border-color: #ddb1b1;
}


/* ==================================================
   INPUT
   SAME FAMILY AS COLOR TEXT INPUT
================================================== */

.task-input {
    width: min(280px, 100%);

    margin:
        15px
        auto;

    padding:
        12px
        14px;

    display: block;

    background: #fff;

    border: 2px solid #dad2e3;
    border-bottom: 5px solid #c8bdd5;
    border-radius: 15px;

    color: #5f5868;

    font-family: inherit;
    font-size: 20px;
    font-weight: 600;

    text-align: center;

    outline: none;
}


.task-input:focus {
    border-color: #b7a8ca;

    box-shadow:
        0
        0
        0
        5px
        rgba(181, 166, 207, 0.12);
}


/* ==================================================
   FEEDBACK
================================================== */

.task-feedback {
    min-height: 25px;

    margin-top: 12px;

    font-size: 13px;
    font-weight: 600;
}


.correct-feedback {
    color: #719166;
}


.wrong-feedback {
    color: #b06f6f;
}


/* ==================================================
   FIX THE MISTAKE
================================================== */

.mistake-display {
    width: fit-content;

    margin:
        18px
        auto;

    padding:
        13px
        18px;

    background: #faecec;

    border: 2px solid #ddb1b1;
    border-bottom: 5px solid #ca9999;
    border-radius: 15px;

    color: #675f73;

    font-size: 25px;
    font-weight: 600;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 760px) {

    .external-games-grid {
        grid-template-columns: 1fr;
    }


    .task-choice-grid {
        grid-template-columns: 1fr;
    }


    .long-line,
    .task-gap-far {
        width: 150px;
    }

}


@media (max-width: 560px) {

    .toy-vocabulary-page,
    .demonstrative-rule-page,
    .external-games-page {
        padding:
            38px
            14px
            42px;
    }


    .toy-card {
        padding:
            20px
            15px
            24px;
    }


    .toy-card-emoji {
        font-size: 100px;
    }


    .demonstrative-box {
        padding:
            20px
            15px
            24px;
    }


    .demonstrative-box-top {
        align-items: flex-start;
    }


    .demonstrative-word {
        min-width: 75px;

        height: 58px;

        font-size: 19px;
    }


    .distance-person,
    .distance-toy,
    .task-person,
    .task-toy {
        font-size: 45px;
    }


    .long-line,
    .task-gap-far {
        width: 95px;
    }


    .demonstrative-formula {
        flex-wrap: wrap;

        justify-content: center;
    }

}

/* =========================================================
   LESSON 7 — TOY CARDS
   MATCH LESSON 5 / COLORS
   PUT THIS AT THE VERY END OF lesson-7.css
========================================================= */


/* ---------- WHOLE VOCABULARY AREA ---------- */

.toy-vocabulary-page {
    width: 100%;
    min-height: 760px;

    margin: 0;

    padding:
        52px
        42px
        55px;

    position: relative;

    background: transparent;

    border: 0;
    border-radius: 0;

    box-shadow: none;

    overflow: visible;

    text-align: center;
}


/* ---------- HEADING ---------- */

.toy-page-heading {
    width: min(720px, 100%);

    margin:
        0
        auto
        28px;

    text-align: center;
}


.toy-heading-icon {
    display: none;
}


.toy-page-heading h2 {
    margin:
        0
        0
        12px;

    color: #554e5d;

    font-size: 52px;
    font-weight: 700;

    line-height: 1.05;
}


.toy-page-heading > p:last-child {
    margin: 0;

    color: #8a8490;

    font-size: 16px;
    font-weight: 400;
}


/* маленькая линия как в Colors */

.toy-page-heading::after {
    content: "";

    display: block;

    width: 76px;
    height: 5px;

    margin:
        20px
        auto
        0;

    background:
        linear-gradient(
            90deg,
            #9675dc 0%,
            #d7a8bb 52%,
            #f1c64d 100%
        );

    border-radius: 999px;
}


/* =========================================================
   PROGRESS — SAME VISUAL STRUCTURE
========================================================= */

.toy-progress {
    width: min(674px, 100%);

    min-height: 102px;

    margin:
        0
        auto
        24px;

    padding:
        17px
        18px;

    display: grid;

    grid-template-columns:
        52px
        1fr;

    grid-template-rows:
        auto
        auto;

    column-gap: 14px;

    align-items: center;

    background:
        rgba(255, 252, 247, 0.78);

    border:
        2px solid
        #e8dfd4;

    border-radius:
        19px;

    box-shadow: none;

    text-align: left;
}


.toy-progress > span {
    grid-column: 1;
    grid-row: 1;

    color: #8b8490;

    font-size: 12px;
    line-height: 1.1;
}


.toy-progress > strong {
    grid-column: 1;
    grid-row: 2;

    float: none;

    color: #6d6575;

    font-size: 13px;
    font-weight: 700;

    line-height: 1;
}


.toy-progress-track {
    grid-column: 2;
    grid-row: 1 / 3;

    width: 100%;
    height: 13px;

    margin: 0;

    align-self: center;

    overflow: hidden;

    background: #ebe6ef;

    border-radius: 999px;
}


.toy-progress-fill {
    width: 0;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #9578db,
            #d6a6bd,
            #efc752
        );

    border-radius: 999px;

    transition:
        width
        0.35s
        ease;
}


/* =========================================================
   MAIN CARD — LIKE LESSON 5
========================================================= */

.toy-card {
    width: min(674px, 100%);

    min-height: 475px;

    margin:
        0
        auto;

    padding:
        28px
        30px
        30px;

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #fffdf9 0%,
            #fffaf3 100%
        );

    border:
        2px solid
        #e7ddd2;

    border-bottom:
        7px solid
        #d8cbbd;

    border-radius:
        29px;

    box-shadow:
        0 14px 32px
        rgba(
            95,
            78,
            62,
            0.07
        );

    text-align: center;
}


/* =========================================================
   "НОВЕ СЛОВО" LABEL
========================================================= */

.toy-new-word-label {
    position: absolute;

    top: 28px;
    left: 30px;

    padding:
        8px
        13px;

    background:
        #f7efc9;

    border-radius:
        12px;

    color:
        #85764c;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        1px;

    line-height: 1;
}


/* =========================================================
   1 / 8 BADGE
========================================================= */

.toy-card-number {
    position: absolute;

    top: 28px;
    right: 30px;

    margin: 0;

    padding:
        8px
        13px;

    background:
        #f2eefb;

    border: 0;

    border-radius:
        13px;

    color:
        #756796;

    font-size:
        12px;

    font-weight:
        700;

    line-height: 1;
}


/* =========================================================
   TOY
========================================================= */

.toy-card-emoji {
    width: auto;
    height: auto;

    margin:
        54px
        auto
        12px;

    padding: 0;

    display: block;

    background: none;

    border: 0;

    border-radius: 0;

    box-shadow: none;

    font-size: 116px;

    line-height: 1;

    animation:
        toyLessonSevenPop
        0.42s
        ease;
}


@keyframes toyLessonSevenPop {

    0% {
        opacity: 0;

        transform:
            scale(0.78);
    }

    70% {
        transform:
            scale(1.08);
    }

    100% {
        opacity: 1;

        transform:
            scale(1);
    }

}


/* =========================================================
   WORD
========================================================= */

.toy-card h3 {
    margin:
        4px
        0
        0;

    color:
        #5d5565;

    font-size:
        52px;

    font-weight:
        700;

    line-height:
        1.05;
}


/* =========================================================
   TRANSLATION
========================================================= */

.toy-card > p {
    margin:
        12px
        0
        23px;

    color:
        #918995;

    font-size:
        16px;

    font-weight:
        400;

    line-height:
        1.3;
}


/* =========================================================
   BLUE LISTEN BUTTON — LIKE COLORS
========================================================= */

.toy-listen-button {
    min-width: 208px;
    min-height: 58px;

    padding:
        0
        24px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #a9ddf1 0%,
            #86cbe5 100%
        );

    border:
        0;

    border-bottom:
        6px solid
        #67a9c2;

    border-radius:
        18px;

    box-shadow:
        0 7px 15px
        rgba(
            91,
            172,
            203,
            0.14
        );

    color:
        #ffffff;

    font-family:
        inherit;

    font-size:
        17px;

    font-weight:
        700;

    cursor:
        pointer;

    transition:
        transform
        0.15s
        ease,
        filter
        0.15s
        ease;
}


.toy-listen-button:hover {
    transform:
        translateY(-2px);

    filter:
        brightness(1.02);
}


.toy-listen-button:active {
    transform:
        translateY(2px);

    border-bottom-width:
        3px;
}


/* =========================================================
   LISTENED TEXT
========================================================= */

.toy-listened-message {
    min-height: 18px;

    margin-top: 11px;

    color:
        #7f9874;

    font-size:
        12px;

    font-weight:
        600;

    opacity: 0;

    transition:
        opacity
        0.2s
        ease;
}


.toy-listened-message.visible {
    opacity: 1;
}


/* =========================================================
   NAVIGATION
========================================================= */

.toy-navigation {
    width: min(674px, 100%);

    margin:
        18px
        auto
        0;

    display: flex;

    align-items: stretch;

    justify-content: center;

    gap: 12px;
}


/* BACK ARROW */

.toy-arrow-button {
    width: 58px;
    min-width: 58px;

    height: 58px;

    padding: 0;

    background:
        linear-gradient(
            180deg,
            #faf8fd,
            #f2eef7
        );

    border:
        2px solid
        #e5dfea;

    border-bottom:
        5px solid
        #d6cddd;

    border-radius:
        17px;

    color:
        #aaa3af;

    font-family:
        inherit;

    font-size:
        20px;

    cursor:
        pointer;
}


.toy-arrow-button:disabled {
    opacity: 0.55;

    cursor: default;
}


/* =========================================================
   NEXT BUTTON
   SAME GREEN/YELLOW LOOK AS COLORS
========================================================= */

.toy-navigation .main-action-button,
#toyNextButton {
    width: 274px;
    min-height: 58px;

    margin: 0;

    padding:
        0
        22px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #fff4c8 0%,
            #e8efc6 100%
        );

    border:
        0;

    border-bottom:
        6px solid
        #cbd5a8;

    border-radius:
        19px;

    box-shadow:
        0 8px 17px
        rgba(
            155,
            167,
            105,
            0.12
        );

    color:
        #626553;

    font-family:
        inherit;

    font-size:
        19px;

    font-weight:
        700;

    cursor:
        pointer;
}


.toy-navigation .main-action-button:hover,
#toyNextButton:hover {
    transform:
        translateY(-2px);
}


/* =========================================================
   FINISH VOCABULARY BUTTON
========================================================= */

#finishVocabularyButton {
    width: 274px;
    min-height: 58px;

    margin:
        16px
        auto
        0;

    padding:
        0
        22px;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #fff4c8 0%,
            #e8efc6 100%
        );

    border: 0;

    border-bottom:
        6px solid
        #cbd5a8;

    border-radius:
        19px;

    box-shadow:
        0 8px 17px
        rgba(
            155,
            167,
            105,
            0.12
        );

    color:
        #626553;

    font-family:
        inherit;

    font-size:
        18px;

    font-weight:
        700;

    cursor:
        pointer;
}


#finishVocabularyButton:not([hidden]) {
    display: flex;
}


#finishVocabularyButton[hidden] {
    display: none !important;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 720px) {

    .toy-vocabulary-page {
        padding:
            40px
            18px
            45px;
    }


    .toy-progress {
        min-height: 88px;

        padding:
            14px;
    }


    .toy-card {
        min-height: 440px;

        padding:
            24px
            20px
            26px;
    }


    .toy-new-word-label {
        top: 22px;
        left: 20px;
    }


    .toy-card-number {
        top: 22px;
        right: 20px;
    }


    .toy-card-emoji {
        font-size: 100px;
    }


    .toy-card h3 {
        font-size:
            clamp(
                38px,
                10vw,
                52px
            );
    }


    .toy-navigation .main-action-button,
    #toyNextButton {
        flex: 1;
    }

}