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


/* ==================================================
   LESSON 15 — BIG REVIEW I
================================================== */

.big-review-body {

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

    --review-gold-700: #b77a19;
    --review-gold-600: #cf9229;
    --review-gold-500: #e3ad42;
    --review-gold-400: #efc66d;
    --review-gold-300: #f5d994;
    --review-gold-200: #fae9bd;
    --review-gold-100: #fff8e8;

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

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

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

}


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

.big-review-body .lesson-screen {

    display: none;

}


.big-review-body .lesson-screen.active-screen {

    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;

}


/* ==================================================
   UKRAINIAN HELP
================================================== */

.big-review-body .ukrainian-explanation,
.big-review-body .ukrainian-instruction {

    display: block;

    margin-top: 12px;

    color: #6b5e77;

    font-size: 14px;

    font-weight: 600;

    line-height: 1.65;

}


.big-review-body .ukrainian-explanation strong,
.big-review-body .ukrainian-instruction strong {

    color: var(--review-900);

    font-weight: 900;

}


/* ==================================================
   QUEST INTRODUCTION
================================================== */

.quest-introduction {

    max-width: 700px;

    margin: 22px auto 24px;

    padding: 20px 22px;

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

    border-radius: 21px;

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

    color: var(--review-900);

    font-size: 17px;

    font-weight: 800;

    line-height: 1.55;

    text-align: center;

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

}


/* ==================================================
   STAR BOARD
================================================== */

.star-board {

    max-width: 470px;

    margin: 25px auto;

    padding: 15px 20px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 16px;

    border:
        2px solid
        rgba(227, 173, 66, 0.23);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #fffdf7,
            var(--review-gold-100)
        );

    box-shadow:
        0 10px 24px
        rgba(183, 122, 25, 0.08);

}


.quest-star {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 52px;

    height: 52px;

    color: #c9b784;

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

    font-size: 39px;

    line-height: 1;

    transition:
        transform 0.35s ease,
        color 0.35s ease,
        filter 0.35s ease;

}


.quest-star.collected-star {

    color:
        var(--review-gold-500);

    transform:
        scale(1.15);

    filter:
        drop-shadow(
            0 4px 5px
            rgba(207, 146, 41, 0.25)
        );

}


.quest-star.star-pop {

    animation:
        starPop
        0.55s
        ease;

}


@keyframes starPop {

    0% {

        transform:
            scale(0.65)
            rotate(-15deg);

    }

    55% {

        transform:
            scale(1.3)
            rotate(8deg);

    }

    100% {

        transform:
            scale(1.15)
            rotate(0);

    }

}


/* ==================================================
   QUEST PREVIEW
================================================== */

.quest-preview-grid {

    max-width: 840px;

    margin: 27px auto;

    display: grid;

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

    gap: 13px;

}


.quest-preview-card {

    min-height: 115px;

    padding: 17px 18px;

    display: grid;

    grid-template-columns:
        auto
        1fr;

    align-items: center;

    gap: 14px;

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

    border-radius: 20px;

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

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

}


.quest-preview-card > span {

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 16px;

    background:
        var(--review-100);

    font-size: 31px;

}


.quest-preview-card > div {

    display: flex;

    flex-direction: column;

    gap: 3px;

}


.quest-preview-card small {

    color:
        var(--review-600);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.9px;

}


.quest-preview-card strong {

    color:
        var(--review-900);

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

    font-size: 18px;

}


.quest-preview-card p {

    margin: 0;

    color: #786c82;

    font-size: 12px;

    font-weight: 700;

}


.quest-preview-card.final-preview-card {

    grid-column:
        1 / -1;

    max-width: 520px;

    width: 100%;

    justify-self: center;

    border-color:
        rgba(227, 173, 66, 0.28);

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

}


.quest-preview-card.final-preview-card > span {

    background:
        var(--review-gold-100);

}


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

.big-review-body .activity-instruction {

    max-width: 720px;

    margin:
        8px
        auto
        24px;

    color: #61546d;

    font-size: 15px;

    font-weight: 800;

    line-height: 1.6;

    text-align: center;

}


/* ==================================================
   WARM-UP SCANNER
================================================== */

.review-scanner {

    max-width: 720px;

    margin: 0 auto;

    padding: 25px;

    border:
        2px solid
        rgba(111, 82, 158, 0.13);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #faf8fd,
            #e8dff4
        );

    box-shadow:
        0 15px 34px
        rgba(72, 50, 101, 0.08);

}


.big-review-body .machine-progress {

    margin-bottom: 16px;

    color:
        var(--review-700);

    font-size: 11px;

    font-weight: 900;

    letter-spacing: 1px;

    text-align: center;

    text-transform: uppercase;

}


.review-scanner .scanner-display {

    min-height: 220px;

    padding: 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 16px;

    border: 4px solid white;

    border-radius: 24px;

    background: white;

    text-align: center;

    box-shadow:
        0 10px 24px
        rgba(72, 50, 101, 0.07);

}


.review-scanner .scanner-icon {

    font-size: 61px;

    line-height: 1;

}


.review-scanner .scanner-display strong {

    max-width: 520px;

    color: var(--ink);

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

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

    line-height: 1.4;

}


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

.big-review-body .scanner-options {

    margin-top: 17px;

    display: grid;

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

    gap: 10px;

}


.big-review-body .scanner-option,
.big-review-body .scanner-options button {

    min-height: 57px;

    padding: 13px 15px;

    cursor: pointer;

    border:
        2px solid
        transparent;

    border-radius: 15px;

    background: white;

    color: #544861;

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

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

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

}


.big-review-body
.scanner-options
button:hover:not(:disabled) {

    transform:
        translateY(-2px);

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

}


/* ==================================================
   QUEST PROGRESS CARD
================================================== */

.quest-progress-card {

    max-width: 560px;

    margin: 21px auto 18px;

    padding: 14px 18px 4px;

    border:
        1px solid
        rgba(227, 173, 66, 0.2);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #fffdf8,
            #fff8e9
        );

    text-align: center;

}


.quest-progress-card > small {

    display: block;

    margin-bottom: -8px;

    color:
        var(--review-gold-700);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 1px;

}


.quest-progress-card .star-board {

    margin:
        10px
        auto
        6px;

    padding: 6px 10px;

    border: 0;

    background: transparent;

    box-shadow: none;

}


/* ==================================================
   PRACTICE MAP — SPECIAL FINAL MISSION
================================================== */

.big-review-body
.final-practice-level {

    border-color:
        rgba(227, 173, 66, 0.23);

}


.big-review-body
.final-practice-level
.practice-level-icon {

    background:
        var(--review-gold-100);

}


.big-review-body
.final-practice-level.active-practice-level {

    border-color:
        var(--review-gold-400);

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

}


/* ==================================================
   COMPLETED LEVEL
================================================== */

.big-review-body
.practice-level.completed-level {

    border-color:
        rgba(77, 157, 104, 0.25);

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

}


.big-review-body
.practice-level.completed-level
.level-status {

    color:
        var(--review-green);

}


.big-review-body
.practice-level.completed-level
.practice-level-icon {

    background:
        var(--review-green-soft);

}


/* ==================================================
   GAME WORKSPACE
================================================== */

.big-review-body .game-workspace {

    max-width: 760px;

    margin:
        18px
        auto
        0;

}


.review-game-card {

    margin:
        18px
        auto;

    padding: 23px;

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

    border-radius: 23px;

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

    text-align: center;

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

}


.review-game-card > span {

    display: block;

    margin-bottom: 11px;

    font-size: 55px;

}


.review-game-card small {

    display: block;

    margin-bottom: 7px;

    color:
        var(--review-600);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.9px;

}


.review-game-card strong {

    display: block;

    color:
        var(--review-900);

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

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

    line-height: 1.4;

}


.review-game-card p {

    margin:
        10px
        0
        0;

    color: #716578;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.6;

}


/* ==================================================
   GAME PROMPT
================================================== */

.big-review-body .game-prompt {

    margin: 18px auto;

    padding: 20px 22px;

    border-radius: 20px;

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

    color:
        var(--review-900);

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

    line-height: 1.4;

    text-align: center;

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

}


/* ==================================================
   GAME CHOICES
================================================== */

.big-review-body .game-choice-grid {

    display: grid;

    gap: 10px;

}


.big-review-body
.game-choice-grid button {

    min-height: 57px;

    padding: 14px 16px;

    cursor: pointer;

    border:
        2px solid
        transparent;

    border-radius: 15px;

    background: white;

    color: #51455e;

    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,
        background 0.2s ease;

}


.big-review-body
.game-choice-grid
button:hover:not(:disabled) {

    transform:
        translateY(-2px);

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

}


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

.big-review-body .correct-option,
.big-review-body .correct-choice,
.big-review-body
.scanner-options
button.correct-option,
.big-review-body
.game-choice-grid
button.correct-option,
.big-review-body
.bonus-options
button.correct-option,
.big-review-body
.final-mix-options
button.correct-option {

    border-color:
        #56ad6c !important;

    background:
        #eaf8ed !important;

    color:
        #29673a !important;

}


.big-review-body .wrong-option,
.big-review-body .wrong-choice,
.big-review-body
.scanner-options
button.wrong-option,
.big-review-body
.game-choice-grid
button.wrong-option,
.big-review-body
.bonus-options
button.wrong-option,
.big-review-body
.final-mix-options
button.wrong-option {

    border-color:
        #d67870 !important;

    background:
        #fff0ee !important;

    color:
        #963f38 !important;

}


.big-review-body .feedback-correct {

    color: #317344;

    font-weight: 800;

}


.big-review-body .feedback-wrong {

    color: #9b4941;

    font-weight: 800;

}


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

.big-review-body .word-answer-zone,
.big-review-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: 19px;

}


.big-review-body .word-answer-zone {

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

    background:
        #f7f3fc;

}


.big-review-body
.word-answer-zone:empty::before {

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

    color: #91849e;

    font-size: 13px;

    font-weight: 700;

    text-align: center;

}


.big-review-body .word-bank {

    background:
        #ebe3f6;

}


.big-review-body
.word-answer-zone button,
.big-review-body
.word-bank button {

    padding: 11px 14px;

    cursor: pointer;

    border:
        2px solid
        transparent;

    border-radius: 12px;

    background: white;

    color: #50445d;

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

    box-shadow:
        0 5px 13px
        rgba(72, 50, 101, 0.07);

}


/* ==================================================
   SCHOOL HUNT CARD
================================================== */

.school-hunt-card {

    margin:
        18px
        auto;

    padding: 22px;

    display: grid;

    grid-template-columns:
        auto
        1fr;

    align-items: center;

    gap: 17px;

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

    border-radius: 22px;

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

}


.school-hunt-card > span {

    width: 80px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 20px;

    background:
        var(--review-100);

    font-size: 47px;

}


.school-hunt-card strong {

    color:
        var(--review-900);

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

    font-size:
        clamp(20px, 4vw, 27px);

    line-height: 1.4;

}


/* ==================================================
   FIX SENTENCE
================================================== */

.fix-sentence-card {

    margin:
        18px
        auto;

    padding: 24px;

    border:
        2px solid
        rgba(197, 102, 93, 0.13);

    border-radius: 22px;

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

    text-align: center;

}


.fix-sentence-card > span {

    display: block;

    margin-bottom: 11px;

    font-size: 45px;

}


.fix-sentence-card small {

    display: block;

    margin-bottom: 8px;

    color:
        var(--review-red);

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.9px;

}


.fix-sentence-card strong {

    color:
        #70443f;

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

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

}


/* ==================================================
   QUESTION DOOR
================================================== */

.question-door-card {

    margin:
        18px
        auto;

    padding: 24px;

    border:
        2px solid
        rgba(85, 115, 200, 0.13);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            var(--review-blue-soft)
        );

    text-align: center;

}


.question-door-icon {

    width: 85px;

    height: 85px;

    margin:
        0
        auto
        13px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 24px;

    background: white;

    font-size: 48px;

    box-shadow:
        0 7px 18px
        rgba(85, 115, 200, 0.09);

}


.question-door-card strong {

    color: #3f568f;

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

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

    line-height: 1.4;

}


/* ==================================================
   BONUS PAGE
================================================== */

.bonus-page {

    text-align: center;

}


.bonus-icon {

    width: 90px;

    height: 90px;

    margin:
        0
        auto
        13px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #fff8e8,
            #fae8b7
        );

    font-size: 51px;

    box-shadow:
        0 10px 24px
        rgba(183, 122, 25, 0.1);

}


.bonus-introduction {

    max-width: 540px;

    margin:
        10px
        auto
        23px;

    color: #685c73;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.6;

}


.bonus-challenge {

    max-width: 620px;

    margin: 0 auto;

    padding: 25px;

    border:
        2px solid
        rgba(227, 173, 66, 0.24);

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #fffefb,
            #fff5dc
        );

    box-shadow:
        0 12px 28px
        rgba(183, 122, 25, 0.08);

}


.bonus-challenge > strong {

    display: block;

    margin-bottom: 20px;

    color:
        var(--review-900);

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

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

    line-height: 1.4;

}


.bonus-options {

    display: grid;

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

    gap: 10px;

}


.bonus-options button {

    min-height: 58px;

    padding: 13px;

    cursor: pointer;

    border:
        2px solid
        transparent;

    border-radius: 15px;

    background: white;

    color: #5a4d64;

    font:
        900
        16px
        "Manrope",
        sans-serif;

    box-shadow:
        0 6px 15px
        rgba(112, 77, 21, 0.07);

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

}


.bonus-options
button:hover:not(:disabled) {

    transform:
        translateY(-2px);

    border-color:
        var(--review-gold-400);

}


/* ==================================================
   FINAL MIX
================================================== */

.final-mix-card {

    max-width: 720px;

    margin: 0 auto;

    padding: 25px;

    border:
        2px solid
        rgba(227, 173, 66, 0.2);

    border-radius: 28px;

    background:
        linear-gradient(
            145deg,
            #fffdf8,
            #f4ebfa
        );

    box-shadow:
        0 15px 34px
        rgba(73, 51, 103, 0.08);

}


.final-mix-display {

    min-height: 220px;

    padding: 24px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 15px;

    border: 4px solid white;

    border-radius: 24px;

    background: white;

    text-align: center;

    box-shadow:
        0 9px 22px
        rgba(72, 50, 101, 0.06);

}


.final-mix-icon {

    font-size: 58px;

    line-height: 1;

}


.final-mix-display strong {

    max-width: 520px;

    color:
        var(--review-900);

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

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

    line-height: 1.4;

}


.final-mix-options {

    margin-top: 17px;

    display: grid;

    gap: 10px;

}


.final-mix-options button {

    min-height: 57px;

    padding: 14px 16px;

    cursor: pointer;

    border:
        2px solid
        transparent;

    border-radius: 15px;

    background: white;

    color: #51455e;

    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;

}


.final-mix-options
button:hover:not(:disabled) {

    transform:
        translateY(-2px);

    border-color:
        var(--review-gold-400);

}


/* ==================================================
   COMPLETED STAR BOARD
================================================== */

.completed-star-board {

    max-width: 500px;

    margin: 23px auto 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

}


.completed-star-board span {

    color:
        var(--review-gold-500);

    font-size:
        clamp(35px, 7vw, 51px);

    line-height: 1;

    filter:
        drop-shadow(
            0 4px 4px
            rgba(207, 146, 41, 0.18)
        );

}


/* ==================================================
   REVIEW TOPICS
================================================== */

.review-topic-grid {

    max-width: 850px;

    margin: 27px auto;

    display: grid;

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

    gap: 11px;

}


.review-topic-grid article {

    min-height: 100px;

    padding: 15px 17px;

    display: grid;

    grid-template-columns:
        auto
        1fr;

    grid-template-rows:
        auto
        auto;

    align-items: center;

    column-gap: 13px;

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

    border-radius: 19px;

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

}


.review-topic-grid article > span {

    grid-row:
        1 / 3;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 15px;

    background:
        var(--review-100);

    font-size: 29px;

}


.review-topic-grid strong {

    align-self: end;

    color:
        var(--review-900);

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

    font-size: 17px;

}


.review-topic-grid small {

    align-self: start;

    color: #796d83;

    font-size: 11px;

    font-weight: 700;

    line-height: 1.4;

}


/* ==================================================
   RESULTS
================================================== */

.results-page {

    text-align: center;

}


.results-icon {

    width: 88px;

    height: 88px;

    margin:
        0
        auto
        13px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            #f7f2fc,
            #e5daf3
        );

    font-size: 49px;

}


.results-message {

    margin:
        7px
        auto
        23px;

    color: #716579;

    font-size: 14px;

    font-weight: 700;

}


.review-results-grid {

    max-width: 700px;

    margin: 25px auto;

    display: grid;

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

    gap: 12px;

}


.review-results-grid article {

    min-height: 150px;

    padding: 17px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 5px;

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

    border-radius: 21px;

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

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

}


.review-results-grid article > span {

    font-size: 33px;

}


.review-results-grid strong {

    color:
        var(--review-900);

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

    font-size: 25px;

}


.review-results-grid small {

    color: #7b7084;

    font-size: 11px;

    font-weight: 800;

}


/* ==================================================
   RESULT MESSAGE
================================================== */

.result-message-card {

    max-width: 620px;

    margin:
        24px
        auto;

    padding: 20px 22px;

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

    border-radius: 20px;

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

}


.result-message-card strong {

    display: block;

    margin-bottom: 5px;

    color:
        var(--review-900);

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

    font-size: 20px;

}


.result-message-card p {

    margin: 0;

    color: #70647a;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.55;

}


.result-message-card.excellent-result {

    border-color:
        rgba(227, 173, 66, 0.25);

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

}


.result-message-card.good-result {

    border-color:
        rgba(77, 157, 104, 0.2);

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

}


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

.big-review-body .finish-page {

    text-align: center;

}


.big-review-body .finish-message {

    max-width: 570px;

    margin:
        10px
        auto
        20px;

    color: #685c74;

    font-size: 15px;

    font-weight: 700;

    line-height: 1.65;

}


.finish-star-row {

    margin:
        15px
        auto
        24px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

}


.finish-star-row span {

    color:
        var(--review-gold-500);

    font-size:
        clamp(31px, 6vw, 43px);

    line-height: 1;

    filter:
        drop-shadow(
            0 3px 4px
            rgba(207, 146, 41, 0.2)
        );

}


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

.big-review-body .hidden-button {

    display: none !important;

}


/* ==================================================
   BUTTON SPACING
================================================== */

.quest-preview-grid
+
.main-action-button,
.review-scanner
+
.main-action-button,
.practice-map
+
.main-action-button,
.bonus-challenge
+
.main-action-button,
.final-mix-card
+
.main-action-button,
.review-topic-grid
+
.main-action-button,
.result-message-card
+
.main-action-button {

    margin-top: 27px;

}


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

@media (max-width: 900px) {

    .quest-preview-grid,
    .review-topic-grid {

        max-width: 760px;

    }

}


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

@media (max-width: 760px) {

    .quest-preview-grid {

        grid-template-columns: 1fr;

    }


    .quest-preview-card.final-preview-card {

        grid-column: auto;

        max-width: none;

    }


    .review-topic-grid {

        grid-template-columns: 1fr;

    }


    .review-results-grid {

        grid-template-columns: 1fr;

        max-width: 430px;

    }


    .review-results-grid article {

        min-height: 110px;

        display: grid;

        grid-template-columns:
            auto
            1fr;

        grid-template-rows:
            auto
            auto;

        column-gap: 13px;

    }


    .review-results-grid article > span {

        grid-row:
            1 / 3;

    }


    .review-results-grid strong,
    .review-results-grid small {

        text-align: left;

    }

}


/* ==================================================
   RESPONSIVE — 620
================================================== */

@media (max-width: 620px) {

    .star-board {

        gap: 7px;

        padding:
            12px
            10px;

    }


    .quest-star {

        width: 43px;

        height: 43px;

        font-size: 33px;

    }


    .review-scanner,
    .final-mix-card,
    .bonus-challenge {

        padding: 18px;

    }


    .bonus-options {

        grid-template-columns: 1fr;

    }


    .completed-star-board {

        gap: 7px;

    }

}


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

@media (max-width: 540px) {

    .quest-introduction {

        padding: 17px;

        font-size: 15px;

    }


    .quest-preview-card {

        min-height: 100px;

        padding: 14px;

    }


    .quest-preview-card > span {

        width: 48px;

        height: 48px;

        font-size: 27px;

    }


    .big-review-body
    .scanner-options {

        grid-template-columns: 1fr;

    }


    .review-scanner
    .scanner-display,
    .final-mix-display {

        min-height: 190px;

        padding: 19px;

    }


    .review-scanner
    .scanner-icon,
    .final-mix-icon {

        font-size: 51px;

    }


    .school-hunt-card {

        grid-template-columns: 1fr;

        justify-items: center;

        text-align: center;

    }


    .school-hunt-card > span {

        width: 68px;

        height: 68px;

        font-size: 40px;

    }


    .review-topic-grid article {

        min-height: 90px;

        padding: 13px;

    }


    .finish-star-row {

        gap: 5px;

    }

}


/* ==================================================
   RESPONSIVE — 400
================================================== */

@media (max-width: 400px) {

    .star-board {

        gap: 2px;

    }


    .quest-star {

        width: 38px;

        height: 38px;

        font-size: 29px;

    }


    .quest-preview-card {

        grid-template-columns:
            44px
            1fr;

        gap: 10px;

    }


    .quest-preview-card > span {

        width: 44px;

        height: 44px;

        font-size: 24px;

    }


    .review-topic-grid article {

        grid-template-columns:
            45px
            1fr;

        column-gap: 10px;

    }


    .review-topic-grid
    article > span {

        width: 45px;

        height: 45px;

        font-size: 25px;

    }

}