@import url("grade-2-lesson-13.css");


/* ==================================================
   LESSON 14 — FREQUENCY
================================================== */

.frequency-lesson-body {

    --frequency-900: #473267;
    --frequency-800: #5d4384;
    --frequency-700: #7354a1;
    --frequency-600: #8a69ba;
    --frequency-500: #a081cf;
    --frequency-400: #bba2df;
    --frequency-300: #d1c1eb;
    --frequency-200: #e6dcf5;
    --frequency-100: #f6f2fb;

    --frequency-blue: #5573c8;
    --frequency-blue-soft: #edf2ff;

    --frequency-green: #4d9d68;
    --frequency-green-soft: #edf9f0;

    --frequency-red: #c5665d;
    --frequency-red-soft: #fff0ee;

    --frequency-gold: #d9a642;
    --frequency-gold-soft: #fff7e5;

}


/* ==================================================
   SCREEN VISIBILITY
================================================== */

.frequency-lesson-body .lesson-screen {

    display: none;

}


.frequency-lesson-body .lesson-screen.active-screen {

    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;

}


/* ==================================================
   UKRAINIAN TEXT
================================================== */

.frequency-lesson-body .ukrainian-explanation,
.frequency-lesson-body .ukrainian-instruction {

    display: block;

    margin-top: 13px;

    color: #655776;

    font-size: 15px;

    font-weight: 600;

    line-height: 1.72;

}


.frequency-lesson-body .ukrainian-explanation strong,
.frequency-lesson-body .ukrainian-instruction strong {

    color: var(--frequency-900);

    font-weight: 900;

}


/* ==================================================
   EXPLANATION CARD
================================================== */

.frequency-explanation-card {

    max-width: 820px;

    margin: 24px auto;

    padding: 24px 26px;

    border:
        1px solid
        rgba(111, 82, 157, 0.12);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f7f3fc
        );

    box-shadow:
        0 10px 24px
        rgba(73, 51, 103, 0.06);

}


.frequency-explanation-card > p:first-child {

    margin-top: 0;

    color: var(--frequency-900);

    font-family:
        "Fredoka",
        sans-serif;

    font-size: 20px;

    font-weight: 700;

    line-height: 1.45;

}


.frequency-explanation-card > p:last-child {

    margin-bottom: 0;

}


/* ==================================================
   FREQUENCY SCALE
================================================== */

.frequency-scale {

    max-width: 760px;

    margin: 28px auto;

    display: grid;

    gap: 10px;

}


.frequency-item {

    min-height: 70px;

    padding: 12px 16px;

    display: grid;

    grid-template-columns:
        90px
        1fr;

    align-items: center;

    gap: 14px;

    border:
        1px solid
        rgba(112, 83, 158, 0.1);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f1fa
        );

    box-shadow:
        0 7px 18px
        rgba(73, 51, 103, 0.05);

}


.frequency-percent {

    min-height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 13px;

    background:
        #e8def5;

    color:
        var(--frequency-800);

    font-size: 14px;

    font-weight: 900;

}


.frequency-word {

    display: flex;

    flex-direction: column;

    gap: 2px;

}


.frequency-word strong {

    color:
        var(--frequency-900);

    font-family:
        "Fredoka",
        sans-serif;

    font-size: 19px;

}


.frequency-word span {

    color: #776a82;

    font-size: 13px;

    font-weight: 700;

}


/* ==================================================
   FREQUENCY EXAMPLES
================================================== */

.frequency-example-grid {

    max-width: 850px;

    margin: 26px auto;

    display: grid;

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

    gap: 13px;

}


.frequency-example-grid article {

    min-height: 118px;

    padding: 17px;

    display: grid;

    grid-template-columns:
        auto
        1fr
        auto;

    align-items: center;

    gap: 13px;

    border:
        1px solid
        rgba(108, 80, 153, 0.11);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f1fa
        );

    box-shadow:
        0 8px 20px
        rgba(73, 51, 103, 0.05);

}


.frequency-example-grid article > span {

    font-size: 39px;

}


.frequency-example-grid article > div {

    display: flex;

    flex-direction: column;

    gap: 4px;

}


.frequency-example-grid strong {

    color: var(--frequency-900);

    font-family:
        "Fredoka",
        sans-serif;

    font-size: 17px;

    line-height: 1.45;

}


.frequency-example-grid small {

    color: #776a82;

    font-size: 13px;

    font-weight: 700;

}


/* ==================================================
   FREQUENCY FORMULA
================================================== */

.frequency-formula {

    max-width: 760px;

    margin: 27px auto;

    padding: 22px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;

    border:
        2px solid
        rgba(109, 80, 157, 0.12);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #faf8fe,
            #ebe3f7
        );

}


.frequency-formula span,
.frequency-formula strong {

    min-width: 130px;

    padding: 14px 17px;

    border-radius: 15px;

    background: white;

    color: var(--frequency-900);

    font-family:
        "Fredoka",
        sans-serif;

    font-size: 17px;

    font-weight: 700;

    text-align: center;

    box-shadow:
        0 6px 15px
        rgba(73, 51, 103, 0.06);

}


.frequency-formula strong {

    background:
        linear-gradient(
            145deg,
            #e9e1f5,
            #ded1ee
        );

    color:
        var(--frequency-800);

}


.frequency-formula .formula-arrow {

    min-width: auto;

    padding:
        8px
        3px;

    background: transparent;

    box-shadow: none;

    color: var(--frequency-600);

    font-size: 25px;

}


/* ==================================================
   POSITION EXAMPLES
================================================== */

.position-example-grid {

    max-width: 820px;

    margin: 27px auto;

    display: grid;

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

    gap: 14px;

}


.position-example-grid article {

    min-height: 105px;

    padding: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    border:
        1px solid
        rgba(107, 80, 153, 0.11);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4eff9
        );

    text-align: center;

    box-shadow:
        0 8px 20px
        rgba(73, 51, 103, 0.05);

}


.position-example-grid small {

    color: #655970;

    font-size: 16px;

    font-weight: 800;

}


.position-example-grid strong {

    color:
        var(--frequency-900);

    font-size: 16px;

}


.frequency-highlight {

    padding: 7px 10px;

    border-radius: 10px;

    background:
        #e4d8f3;

    color:
        var(--frequency-800) !important;

}


/* ==================================================
   IMPORTANT NOTE
================================================== */

.frequency-lesson-body .important-note {

    max-width: 820px;

    margin: 25px auto;

    padding: 20px 22px;

    display: grid;

    grid-template-columns:
        auto
        1fr;

    align-items: start;

    gap: 15px;

    border:
        2px solid
        rgba(112, 85, 163, 0.12);

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #faf8fe,
            #eee7fa
        );

}


.frequency-lesson-body .important-note > span {

    font-size: 29px;

}


.frequency-lesson-body .important-note p {

    margin: 0;

    color: #5e5270;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.72;

}


.frequency-lesson-body .important-note strong {

    color: var(--frequency-900);

}


/* ==================================================
   TO BE EXAMPLES
================================================== */

.be-frequency-example {

    max-width: 760px;

    margin: 25px auto;

    display: grid;

    gap: 11px;

}


.be-frequency-example > div {

    min-height: 72px;

    padding: 15px 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 7px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4eff9
        );

    box-shadow:
        0 7px 18px
        rgba(73, 51, 103, 0.05);

}


.be-frequency-example span {

    color: #5f5369;

    font-size: 16px;

    font-weight: 800;

}


.be-frequency-example strong {

    font-size: 16px;

}


.be-highlight {

    padding: 7px 10px;

    border-radius: 10px;

    background:
        #edf2ff;

    color:
        var(--frequency-blue) !important;

}


/* ==================================================
   MINI RULE SUMMARY
================================================== */

.mini-rule-summary {

    max-width: 800px;

    margin: 28px auto;

    display: grid;

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

    gap: 14px;

}


.mini-rule-summary > div {

    min-height: 120px;

    padding: 19px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border:
        1px solid
        rgba(108, 80, 153, 0.11);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f1fa
        );

    text-align: center;

}


.mini-rule-summary small {

    color: #81758b;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.8px;

}


.mini-rule-summary strong {

    color:
        var(--frequency-900);

    font-family:
        "Fredoka",
        sans-serif;

    font-size: 18px;

}


/* ==================================================
   ACTIVITY INSTRUCTION
================================================== */

.frequency-lesson-body .activity-instruction {

    max-width: 760px;

    margin:
        8px
        auto
        24px;

    color: #60536e;

    font-weight: 700;

    line-height: 1.65;

    text-align: center;

}


/* ==================================================
   HABIT METER
================================================== */

.habit-meter {

    max-width: 760px;

    margin: 0 auto;

    padding: 25px;

    border:
        2px solid
        rgba(110, 81, 157, 0.14);

    border-radius: 30px;

    background:
        linear-gradient(
            145deg,
            #f9f6fd,
            #e5daf4
        );

    box-shadow:
        0 17px 36px
        rgba(74, 51, 104, 0.09);

}


.frequency-lesson-body .machine-progress {

    margin-bottom: 16px;

    color:
        var(--frequency-800);

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 1px;

    text-align: center;

    text-transform: uppercase;

}


.habit-meter-layout {

    display: grid;

    grid-template-columns:
        230px
        1fr;

    align-items: stretch;

    gap: 17px;

}


/* ==================================================
   METER
================================================== */

.frequency-meter {

    display: grid;

    gap: 7px;

}


.meter-level {

    min-height: 58px;

    padding: 10px 13px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 8px;

    border:
        2px solid
        transparent;

    border-radius: 15px;

    background:
        rgba(255, 255, 255, 0.83);

    color: #62556f;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;

}


.meter-level strong {

    color:
        var(--frequency-900);

    font-family:
        "Fredoka",
        sans-serif;

    font-size: 15px;

}


.meter-level span {

    color: #80738c;

    font-size: 12px;

    font-weight: 900;

}


.meter-level.active-meter-level {

    transform: translateX(5px);

    border-color:
        var(--frequency-500);

    background: white;

    box-shadow:
        0 7px 18px
        rgba(73, 51, 103, 0.1);

}


/* ==================================================
   HABIT DISPLAY
================================================== */

.habit-meter .scanner-display {

    min-height: 318px;

    padding: 24px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 17px;

    border: 4px solid white;

    border-radius: 25px;

    background: white;

    box-shadow:
        0 13px 28px
        rgba(71, 49, 102, 0.09);

    text-align: center;

}


.habit-meter .scanner-icon {

    font-size: 65px;

    line-height: 1;

}


.habit-meter .scanner-display strong {

    max-width: 430px;

    color: var(--ink);

    font-family:
        "Fredoka",
        sans-serif;

    font-size:
        clamp(22px, 4vw, 30px);

    line-height: 1.4;

}


/* ==================================================
   SCANNER OPTIONS
================================================== */

.frequency-lesson-body .scanner-options {

    margin-top: 18px;

    display: grid;

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

    gap: 10px;

}


.frequency-lesson-body .scanner-option,
.frequency-lesson-body .scanner-options button {

    min-height: 58px;

    padding: 14px;

    cursor: pointer;

    border:
        2px solid
        transparent;

    border-radius: 16px;

    background: white;

    color: #544861;

    font:
        800
        15px
        "Manrope",
        sans-serif;

    box-shadow:
        0 7px 17px
        rgba(72, 50, 101, 0.07);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        background 0.2s ease;

}


.frequency-lesson-body
.scanner-options
button:hover:not(:disabled) {

    transform: translateY(-2px);

    border-color:
        var(--frequency-400);

}


/* ==================================================
   CORRECT / WRONG
================================================== */

.frequency-lesson-body .correct-option,
.frequency-lesson-body .correct-choice,
.frequency-lesson-body
.scanner-options
button.correct-option,
.frequency-lesson-body
.game-choice-grid
button.correct-option {

    border-color:
        #56ad6c !important;

    background:
        #eaf8ed !important;

    color:
        #29673a !important;

}


.frequency-lesson-body .wrong-option,
.frequency-lesson-body .wrong-choice,
.frequency-lesson-body
.scanner-options
button.wrong-option,
.frequency-lesson-body
.game-choice-grid
button.wrong-option {

    border-color:
        #d67870 !important;

    background:
        #fff0ee !important;

    color:
        #963f38 !important;

}


.frequency-lesson-body .feedback-correct {

    color: #317344;

    font-weight: 800;

}


.frequency-lesson-body .feedback-wrong {

    color: #9b4941;

    font-weight: 800;

}


/* ==================================================
   VIDEO
================================================== */

.frequency-lesson-body .video-intro {

    max-width: 650px;

    margin:
        6px
        auto
        24px;

    color: #655970;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.6;

    text-align: center;

}


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

.frequency-lesson-body .game-prompt {

    margin: 18px auto;

    padding: 21px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f1fa
        );

    color:
        var(--frequency-900);

    font:
        700
        clamp(20px, 4vw, 28px)
        "Fredoka",
        sans-serif;

    line-height: 1.4;

    text-align: center;

    box-shadow:
        0 8px 20px
        rgba(73, 51, 103, 0.05);

}


.frequency-game-card {

    margin: 18px auto;

    padding: 22px;

    border:
        2px solid
        rgba(109, 80, 156, 0.12);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f1ebf8
        );

    text-align: center;

}


.frequency-game-card > span {

    display: block;

    margin-bottom: 11px;

    font-size: 55px;

}


.frequency-game-card small {

    display: block;

    margin-bottom: 7px;

    color: #85798f;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.8px;

}


.frequency-game-card strong {

    display: block;

    color:
        var(--frequency-900);

    font-family:
        "Fredoka",
        sans-serif;

    font-size:
        clamp(21px, 4vw, 28px);

    line-height: 1.4;

}


/* ==================================================
   GAME CHOICE GRID
================================================== */

.frequency-lesson-body .game-choice-grid {

    display: grid;

    gap: 11px;

}


.frequency-lesson-body
.game-choice-grid button {

    min-height: 56px;

    padding: 14px 16px;

    cursor: pointer;

    border:
        2px solid
        transparent;

    border-radius: 14px;

    background: white;

    color: #52465f;

    font:
        800
        15px
        "Manrope",
        sans-serif;

    box-shadow:
        0 6px 15px
        rgba(73, 51, 103, 0.07);

    transition:
        transform 0.2s ease,
        border-color 0.2s ease;

}


.frequency-lesson-body
.game-choice-grid
button:hover:not(:disabled) {

    transform: translateY(-2px);

    border-color:
        var(--frequency-400);

}


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

.frequency-lesson-body .word-answer-zone,
.frequency-lesson-body .word-bank {

    min-height: 82px;

    margin: 14px 0;

    padding: 16px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;

    border-radius: 20px;

}


.frequency-lesson-body .word-answer-zone {

    border:
        2px dashed
        var(--frequency-500);

    background:
        #f7f3fc;

}


.frequency-lesson-body
.word-answer-zone:empty::before {

    content:
        "Натискай на слова, щоб скласти речення";

    color: #91849e;

    font-size: 13px;

    font-weight: 700;

    text-align: center;

}


.frequency-lesson-body .word-bank {

    background:
        #ebe3f6;

}


.frequency-lesson-body
.word-answer-zone button,
.frequency-lesson-body
.word-bank button {

    padding: 12px 15px;

    cursor: pointer;

    border:
        2px solid
        transparent;

    border-radius: 13px;

    background: white;

    color: #50445d;

    font:
        800
        15px
        "Manrope",
        sans-serif;

    box-shadow:
        0 6px 14px
        rgba(72, 50, 101, 0.07);

}


/* ==================================================
   READING CARD
================================================== */

.frequency-reading-card {

    margin: 18px auto;

    padding: 22px;

    border:
        1px solid
        rgba(107, 81, 151, 0.12);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4effa
        );

}


.frequency-reading-card h3 {

    margin:
        0
        0
        14px;

    color:
        var(--frequency-900);

    font-family:
        "Fredoka",
        sans-serif;

    font-size: 22px;

    text-align: center;

}


.frequency-reading-card p {

    margin: 0;

    color: #54495f;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.75;

}


/* ==================================================
   REVIEW LIST
================================================== */

.frequency-review-list {

    max-width: 760px;

    margin: 26px auto;

    display: grid;

    gap: 9px;

}


.frequency-review-list article {

    min-height: 66px;

    padding: 12px 16px;

    display: grid;

    grid-template-columns:
        1fr
        90px
        120px;

    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(107, 80, 153, 0.1);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5f1fa
        );

}


.frequency-review-list strong {

    color:
        var(--frequency-900);

    font-family:
        "Fredoka",
        sans-serif;

    font-size: 18px;

}


.frequency-review-list span {

    color:
        var(--frequency-700);

    font-size: 14px;

    font-weight: 900;

    text-align: center;

}


.frequency-review-list small {

    color: #75697f;

    font-size: 13px;

    font-weight: 700;

    text-align: right;

}


/* ==================================================
   REVIEW RULES
================================================== */

.review-rule-grid {

    max-width: 800px;

    margin: 27px auto;

    display: grid;

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

    gap: 14px;

}


.review-rule-grid article {

    min-height: 155px;

    padding: 20px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 8px;

    border:
        1px solid
        rgba(108, 80, 153, 0.11);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3eef9
        );

    text-align: center;

    box-shadow:
        0 8px 20px
        rgba(73, 51, 103, 0.05);

}


.review-rule-grid small {

    color: #83778d;

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 0.8px;

}


.review-rule-grid strong {

    color:
        var(--frequency-900);

    font-family:
        "Fredoka",
        sans-serif;

    font-size: 18px;

}


.review-rule-grid p {

    margin: 0;

    color: #74677f;

    font-size: 13px;

    font-weight: 700;

}


/* ==================================================
   FINISH
================================================== */

.frequency-lesson-body .finish-page {

    text-align: center;

}


.frequency-lesson-body .finish-message {

    max-width: 560px;

    margin:
        10px
        auto
        22px;

    color: #685c74;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.65;

}


/* ==================================================
   SPEAK BUTTON
================================================== */

.frequency-lesson-body
.speak-button.speaking {

    transform: scale(1.08);

}


/* ==================================================
   HIDDEN
================================================== */

.frequency-lesson-body .hidden-button {

    display: none !important;

}


/* ==================================================
   CLEAN SPACING
================================================== */

.frequency-explanation-card
+
.frequency-scale {

    margin-top: 29px;

}


.frequency-scale
+
.frequency-example-grid {

    margin-top: 27px;

}


.frequency-explanation-card
+
.frequency-formula {

    margin-top: 29px;

}


.frequency-formula
+
.position-example-grid {

    margin-top: 27px;

}


.position-example-grid
+
.important-note {

    margin-top: 26px;

}


/* ==================================================
   RESPONSIVE — 900px
================================================== */

@media (max-width: 900px) {

    .habit-meter-layout {

        grid-template-columns:
            200px
            1fr;

    }

}


/* ==================================================
   RESPONSIVE — 760px
================================================== */

@media (max-width: 760px) {

    .frequency-example-grid {

        grid-template-columns: 1fr;

    }


    .position-example-grid {

        grid-template-columns: 1fr;

    }


    .mini-rule-summary {

        grid-template-columns: 1fr;

    }


    .frequency-formula {

        flex-direction: column;

    }


    .frequency-formula span,
    .frequency-formula strong {

        width: 100%;

    }


    .frequency-formula
    .formula-arrow {

        width: auto;

        transform: rotate(90deg);

    }


    .habit-meter-layout {

        grid-template-columns: 1fr;

    }


    .frequency-meter {

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

        gap: 5px;

    }


    .meter-level {

        min-height: 80px;

        padding: 8px 5px;

        flex-direction: column;

        justify-content: center;

        text-align: center;

    }


    .meter-level strong {

        font-size: 12px;

    }


    .meter-level span {

        font-size: 10px;

    }


    .meter-level.active-meter-level {

        transform: translateY(-4px);

    }


    .habit-meter .scanner-display {

        min-height: 220px;

    }


    .review-rule-grid {

        grid-template-columns: 1fr;

    }


    .frequency-lesson-body
    .important-note {

        grid-template-columns: 1fr;

    }


    .frequency-lesson-body
    .important-note > span {

        text-align: center;

    }

}


/* ==================================================
   RESPONSIVE — 540px
================================================== */

@media (max-width: 540px) {

    .frequency-explanation-card {

        padding: 18px;

    }


    .frequency-explanation-card
    > p:first-child {

        font-size: 18px;

    }


    .frequency-lesson-body
    .ukrainian-explanation,
    .frequency-lesson-body
    .ukrainian-instruction {

        font-size: 14px;

        line-height: 1.67;

    }


    .frequency-item {

        grid-template-columns:
            76px
            1fr;

    }


    .frequency-percent {

        font-size: 13px;

    }


    .frequency-example-grid article {

        grid-template-columns:
            auto
            1fr;

    }


    .frequency-example-grid
    .speak-button {

        grid-column:
            1 / -1;

        justify-self: center;

    }


    .habit-meter {

        padding: 17px;

    }


    .frequency-meter {

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

    }


    .meter-level:last-child {

        grid-column:
            1 / -1;

    }


    .frequency-lesson-body
    .scanner-options {

        grid-template-columns: 1fr;

    }


    .frequency-review-list article {

        grid-template-columns:
            1fr
            65px;

    }


    .frequency-review-list small {

        grid-column:
            1 / -1;

        text-align: left;

    }

}