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


/* =========================================================
   GRADE 3 — LESSON 21
   CHRISTMAS & NEW YEAR
========================================================= */


/* =========================================================
   1. LESSON PALETTE
========================================================= */

.lesson-body {

    --emerald-900: #205f54;
    --emerald-800: #287665;
    --emerald-700: #328f7b;
    --emerald-600: #3ca68f;
    --emerald-500: #55b8a1;
    --emerald-400: #75cbb7;
    --emerald-300: #9edccc;
    --emerald-200: #c9eee4;
    --emerald-100: #effaf7;

    --holiday-dark: #205f54;
    --holiday-main: #315e56;
    --holiday-soft: #66827c;

    min-height: 100vh;

    margin: 0;

    color: var(--holiday-main);

    background:
        radial-gradient(
            circle at 10% 8%,
            rgba(122, 210, 187, 0.26),
            transparent 25%
        ),
        radial-gradient(
            circle at 90% 12%,
            rgba(140, 210, 220, 0.22),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #f5fcfa 0%,
            #fbfefd 45%,
            #f1faf7 100%
        );

    overflow-x: hidden;

    position: relative;
}


/* =========================================================
   2. BACKGROUND
========================================================= */

.lesson-body .background-shape {

    pointer-events: none;
}


.lesson-body .shape-one {

    background:
        linear-gradient(
            145deg,
            rgba(115, 203, 181, 0.31),
            rgba(207, 242, 233, 0.16)
        );
}


.lesson-body .shape-two {

    background:
        linear-gradient(
            145deg,
            rgba(107, 194, 178, 0.20),
            rgba(194, 236, 227, 0.10)
        );
}


.lesson-body .shape-three {

    background:
        linear-gradient(
            145deg,
            rgba(140, 216, 199, 0.18),
            rgba(227, 247, 241, 0.10)
        );
}


.lesson-body .floating-symbol {

    color: rgba(45, 133, 113, 0.14);

    pointer-events: none;

    user-select: none;
}


/* =========================================================
   3. HEADER
   SAME STRUCTURE AS LESSON 19 / 20
========================================================= */

.lesson-body .lesson-navigation {

    border:
        1px solid
        rgba(65, 157, 136, 0.12);

    box-shadow:
        0 15px 36px
        rgba(33, 104, 90, 0.08);
}


.lesson-body .lesson-logo {

    background:
        linear-gradient(
            135deg,
            #3ca68f,
            #67c8b1
        );

    box-shadow:
        0 8px 18px
        rgba(43, 139, 118, 0.18);
}


.lesson-body .chapter-number {

    color: #328f7b;
}


.lesson-body .chapter-name {

    color: #205f54;
}


.lesson-body .close-lesson-button {

    color: #287665;

    background:
        rgba(218, 244, 237, 0.72);
}


.lesson-body .close-lesson-button:hover {

    color: #205f54;

    background: #caeee4;
}


/* =========================================================
   4. PROGRESS
========================================================= */

.lesson-body .lesson-progress-track {

    background:
        rgba(91, 177, 156, 0.14);
}


.lesson-body .lesson-progress-fill {

    background:
        linear-gradient(
            90deg,
            #3ca68f,
            #72cbb7
        );

    box-shadow:
        0 4px 12px
        rgba(49, 144, 123, 0.20);

    transition:
        width 0.35s ease;
}


.lesson-body .lesson-progress-number {

    color: #287665;
}


/* =========================================================
   5. LESSON SCREENS
========================================================= */

.lesson-screen {

    display: none;
}


.lesson-screen.active-screen {

    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;
}


/* =========================================================
   6. MAIN LESSON PANEL
========================================================= */

.lesson-body .lesson-panel {

    border:
        1px solid
        rgba(67, 157, 137, 0.12);

    box-shadow:
        0 25px 60px
        rgba(36, 103, 89, 0.10);
}


.lesson-body .screen-label {

    color: #328f7b;
}


.lesson-body h1,
.lesson-body h2,
.lesson-body h3 {

    color: #205f54;
}


.lesson-body .screen-introduction {

    color: #66827c;

    line-height: 1.65;
}


.lesson-body .screen-introduction strong {

    color: #287665;
}


/* =========================================================
   7. INTRO SCREEN
========================================================= */

.lesson-body .intro-sun {

    background:
        linear-gradient(
            145deg,
            #d5f2e9,
            #a6dfd0
        );

    box-shadow:
        0 14px 28px
        rgba(51, 139, 120, 0.14);
}


.lesson-body .mission-card {

    border:
        1px solid
        rgba(65, 157, 136, 0.14);

    background:
        linear-gradient(
            145deg,
            #f8fdfb,
            #dcf4ed
        );

    box-shadow:
        0 12px 28px
        rgba(40, 112, 97, 0.08);
}


.lesson-body .mission-icon {

    background:
        linear-gradient(
            145deg,
            #c8ede3,
            #e8f8f3
        );
}


.lesson-body .mission-card strong {

    color: #205f54;
}


.lesson-body .mission-card p {

    color: #66827c;
}


/* =========================================================
   8. MAIN ACTION BUTTON
========================================================= */

.lesson-body .main-action-button {

    border: none;

    background:
        linear-gradient(
            135deg,
            #3ca68f,
            #63c5ad
        );

    color: #ffffff;

    box-shadow:
        0 13px 26px
        rgba(43, 139, 118, 0.22);

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}


.lesson-body .main-action-button:hover {

    transform:
        translateY(-2px);

    box-shadow:
        0 17px 32px
        rgba(43, 139, 118, 0.29);
}


.lesson-body .main-action-button:active {

    transform:
        translateY(0);
}


.lesson-body .main-action-button:disabled {

    opacity: 0.48;

    cursor: not-allowed;

    transform: none;
}


.lesson-body .main-action-button span {

    display: inline-block;

    transition:
        transform 0.2s ease;
}


.lesson-body .main-action-button:hover span {

    transform:
        translateX(3px);
}


.hidden-button {

    display: none !important;
}


/* =========================================================
   9. SPEAK BUTTON
========================================================= */

.lesson-body .speak-button {

    width: 48px;

    height: 48px;

    padding: 0;

    border:
        1px solid
        rgba(64, 159, 138, 0.14);

    border-radius: 15px;

    background: #ffffff;

    color: #328f7b;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font: inherit;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease;
}


.lesson-body .speak-button:hover {

    background: #e2f6f0;

    color: #205f54;

    transform:
        translateY(-2px);

    box-shadow:
        0 8px 18px
        rgba(38, 105, 91, 0.08);
}


.lesson-body .speak-button.speaking {

    background: #c9eee4;

    color: #205f54;
}


/* =========================================================
   10. CHRISTMAS / NEW YEAR WORD GRID
========================================================= */

.holiday-word-grid {

    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 15px;
}


.holiday-word-card {

    min-height: 235px;

    padding:
        20px 14px;

    border:
        1px solid
        rgba(58, 151, 131, 0.15);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #dff5ef
        );

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.07);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}


.holiday-word-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(58, 151, 131, 0.25);

    box-shadow:
        0 15px 28px
        rgba(38, 105, 91, 0.12);
}


.holiday-word-icon {

    min-height: 67px;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 51px;

    line-height: 1;
}


.holiday-word-card strong {

    color: #205f54;

    font-size: 18px;
}


.holiday-word-card > span {

    margin-top: 6px;

    color: #78918b;

    font-size: 13px;

    line-height: 1.45;
}


.holiday-word-card .speak-button {

    margin-top: 15px;
}


/* =========================================================
   11. IMPORTANT NOTE
========================================================= */

.lesson-body .important-note {

    width: 100%;

    margin-top: 22px;

    padding:
        18px 20px;

    border:
        1px solid
        rgba(61, 157, 136, 0.12);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #f7fcfa,
            #dff5ef
        );

    display: flex;

    align-items: center;

    gap: 15px;

    box-shadow:
        0 8px 20px
        rgba(38, 105, 91, 0.05);
}


.lesson-body .important-note > span {

    flex: 0 0 auto;

    font-size: 28px;
}


.lesson-body .important-note p {

    margin: 0;

    color: #55766f;

    line-height: 1.55;
}


.lesson-body .important-note strong {

    color: #287665;
}


/* =========================================================
   12. GOLDEN TIP
========================================================= */

.lesson-body .golden-tip {

    width: 100%;

    margin-top: 22px;

    padding:
        18px 20px;

    border:
        1px solid
        rgba(61, 157, 136, 0.13);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #f4fbf8,
            #d7f1e9
        );

    display: flex;

    align-items: center;

    gap: 15px;
}


.lesson-body .golden-tip > span {

    flex: 0 0 auto;

    font-size: 28px;
}


.lesson-body .golden-tip p {

    margin: 0;

    color: #55766f;

    line-height: 1.55;
}


.lesson-body .golden-tip strong {

    color: #287665;
}


/* =========================================================
   13. HOLIDAY ACTIONS
========================================================= */

.holiday-action-grid {

    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 15px;
}


.holiday-action-card {

    min-height: 225px;

    padding:
        20px 14px;

    border:
        1px solid
        rgba(58, 151, 131, 0.15);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #fbfefd,
            #e2f6f0
        );

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.07);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

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


.holiday-action-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 28px
        rgba(38, 105, 91, 0.12);
}


.holiday-action-icon {

    min-height: 63px;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 48px;
}


.holiday-action-card strong {

    color: #205f54;

    font-size: 18px;
}


.holiday-action-card > span {

    margin-top: 6px;

    color: #78918b;

    font-size: 13px;
}


.holiday-action-card .speak-button {

    margin-top: 14px;
}


/* =========================================================
   14. HOLIDAY EXAMPLE LIST
========================================================= */

.holiday-example-list {

    width: 100%;

    margin-top: 22px;

    display: grid;

    gap: 11px;
}


.holiday-example-row {

    width: 100%;

    min-height: 78px;

    padding:
        12px 15px;

    border:
        1px solid
        rgba(58, 151, 131, 0.13);

    border-radius: 17px;

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

    display: grid;

    grid-template-columns:
        48px 1fr;

    align-items: center;

    gap: 12px;

    color: #315e56;

    font: inherit;

    text-align: left;

    cursor: pointer;

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


.holiday-example-row:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(58, 151, 131, 0.25);

    background: #ffffff;

    box-shadow:
        0 9px 19px
        rgba(38, 105, 91, 0.07);
}


.holiday-example-row.speaking {

    background: #dff5ef;

    border-color:
        rgba(60, 166, 143, 0.35);
}


.holiday-example-row > span {

    font-size: 30px;

    text-align: center;
}


.holiday-example-row div {

    min-width: 0;
}


.holiday-example-row strong {

    display: block;

    color: #205f54;

    font-size: 14px;

    line-height: 1.4;
}


.holiday-example-row small {

    display: block;

    margin-top: 4px;

    color: #78918b;

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   15. TRADITIONS
========================================================= */

.tradition-grid {

    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 15px;
}


.tradition-card {

    min-height: 280px;

    padding:
        21px 16px;

    border:
        1px solid
        rgba(58, 151, 131, 0.15);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #dff5ef
        );

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.07);

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

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


.tradition-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 28px
        rgba(38, 105, 91, 0.12);
}


.tradition-icon {

    min-height: 65px;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 50px;
}


.tradition-number {

    display: block;

    margin-bottom: 6px;

    color: #55a995;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.11em;
}


.tradition-card h3 {

    margin:
        0 0 8px;

    color: #205f54;

    font-size: 18px;
}


.tradition-card p {

    margin: 0;

    color: #78918b;

    font-size: 13px;

    line-height: 1.5;
}


.tradition-card .speak-button {

    margin-top: auto;

    transform:
        translateY(4px);
}


.tradition-card .speak-button:hover {

    transform:
        translateY(2px);
}


/* =========================================================
   16. NEW YEAR COUNTDOWN
========================================================= */

.new-year-countdown-card {

    width: 100%;

    margin-top: 23px;

    padding:
        22px 20px;

    border:
        1px solid
        rgba(58, 151, 131, 0.14);

    border-radius: 23px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(117, 203, 183, 0.20),
            transparent 50%
        ),
        linear-gradient(
            145deg,
            #fbfefd,
            #dff5ef
        );

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.07);

    text-align: center;
}


.countdown-title {

    display: block;

    color: #328f7b;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.13em;
}


.countdown-numbers {

    width: 100%;

    margin:
        18px 0;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;
}


.countdown-numbers span {

    width: 50px;

    height: 50px;

    border-radius: 16px;

    background: #ffffff;

    color: #205f54;

    box-shadow:
        0 7px 16px
        rgba(38, 105, 91, 0.07);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 19px;

    font-weight: 900;
}


.countdown-speak-button {

    min-height: 47px;

    padding:
        10px 16px;

    border:
        1px solid
        rgba(58, 151, 131, 0.16);

    border-radius: 14px;

    background: #ffffff;

    color: #287665;

    font: inherit;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.countdown-speak-button:hover {

    transform:
        translateY(-2px);

    background: #effaf7;

    box-shadow:
        0 8px 18px
        rgba(38, 105, 91, 0.08);
}


.countdown-speak-button.speaking {

    background: #c9eee4;
}


/* =========================================================
   17. HOLIDAY GREETINGS
========================================================= */

.holiday-greeting-row {

    width: 100%;

    margin-top: 18px;

    display: grid;

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

    gap: 13px;
}


.holiday-greeting-button {

    width: 100%;

    min-height: 66px;

    padding:
        13px 15px;

    border:
        1px solid
        rgba(58, 151, 131, 0.15);

    border-radius: 17px;

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

    color: #205f54;

    box-shadow:
        0 7px 17px
        rgba(38, 105, 91, 0.05);

    font: inherit;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.holiday-greeting-button:hover {

    transform:
        translateY(-3px);

    background: #ffffff;

    box-shadow:
        0 11px 22px
        rgba(38, 105, 91, 0.09);
}


.holiday-greeting-button.speaking {

    background: #c9eee4;
}


/* =========================================================
   18. ACTIVITY PANEL
========================================================= */

.activity-panel {

    position: relative;
}


.activity-progress {

    width: 100%;

    margin:
        22px 0 15px;

    display: flex;

    justify-content: flex-end;
}


.activity-progress span {

    min-width: 68px;

    padding:
        8px 12px;

    border:
        1px solid
        rgba(61, 157, 136, 0.13);

    border-radius: 999px;

    background: #effaf7;

    color: #328f7b;

    font-size: 12px;

    font-weight: 900;

    text-align: center;

    letter-spacing: 0.04em;
}


/* =========================================================
   19. ACTIVITY QUESTION CARDS
========================================================= */

.review-question-card,
.grammar-mix-card {

    width: 100%;

    min-height: 170px;

    padding:
        24px 22px;

    border:
        1px solid
        rgba(58, 151, 131, 0.14);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #e4f6f1
        );

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.06);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.question-emoji,
.grammar-mix-icon {

    min-height: 58px;

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 48px;

    line-height: 1;
}


.review-question-card p,
.grammar-mix-card p {

    max-width: 650px;

    margin: 0;

    color: #205f54;

    font-size: 19px;

    font-weight: 800;

    line-height: 1.55;
}


/* =========================================================
   20. ACTIVITY OPTIONS
========================================================= */

.activity-options {

    width: 100%;

    margin-top: 17px;

    display: grid;

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

    gap: 13px;
}


.activity-option {

    width: 100%;

    min-height: 72px;

    padding:
        15px 17px;

    border:
        1px solid
        rgba(58, 151, 131, 0.16);

    border-radius: 18px;

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

    color: #315e56;

    box-shadow:
        0 7px 17px
        rgba(38, 105, 91, 0.05);

    font: inherit;

    font-size: 15px;

    font-weight: 800;

    line-height: 1.45;

    text-align: center;

    cursor: pointer;

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


.activity-option:hover:not(:disabled) {

    transform:
        translateY(-3px);

    border-color:
        rgba(58, 151, 131, 0.28);

    background: #ffffff;

    box-shadow:
        0 11px 22px
        rgba(38, 105, 91, 0.09);
}


.activity-option:disabled {

    cursor: default;
}


/* =========================================================
   21. ANSWER STATES
========================================================= */

.activity-option.correct,
.activity-option.correct-answer {

    border-color:
        rgba(50, 143, 123, 0.38);

    background:
        linear-gradient(
            145deg,
            #eaf9f4,
            #ccefe5
        );

    color: #205f54;

    box-shadow:
        0 8px 20px
        rgba(49, 144, 123, 0.12);
}


.activity-option.wrong,
.activity-option.wrong-answer {

    border-color:
        rgba(173, 113, 98, 0.25);

    background:
        linear-gradient(
            145deg,
            #fffafa,
            #f5e9e5
        );

    color: #785f59;

    box-shadow:
        0 8px 20px
        rgba(140, 93, 82, 0.08);
}


.activity-option.selected-option {

    border-color:
        rgba(60, 166, 143, 0.34);

    background: #e4f6f1;
}


/* =========================================================
   22. ACTIVITY FEEDBACK
========================================================= */

.activity-feedback {

    width: 100%;

    min-height: 0;

    margin-top: 14px;

    padding: 0;

    border-radius: 16px;

    color: #55766f;

    font-size: 14px;

    font-weight: 700;

    line-height: 1.5;

    text-align: center;

    transition:
        padding 0.2s ease,
        background 0.2s ease;
}


.activity-feedback:not(:empty) {

    min-height: 50px;

    padding:
        14px 16px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.activity-feedback.feedback-correct,
.activity-feedback.correct-feedback {

    border:
        1px solid
        rgba(50, 143, 123, 0.16);

    background: #e6f7f1;

    color: #287665;
}


.activity-feedback.feedback-wrong,
.activity-feedback.wrong-feedback {

    border:
        1px solid
        rgba(173, 113, 98, 0.14);

    background: #f8efec;

    color: #785f59;
}


.activity-panel > .main-action-button {

    margin-top: 20px;
}

/* =========================================================
   23. CHECKPOINT
========================================================= */

.checkpoint-review-grid {

    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 15px;
}


.checkpoint-review-card {

    min-height: 225px;

    padding:
        20px 17px;

    border:
        1px solid
        rgba(58, 151, 131, 0.15);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #dff5ef
        );

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.07);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

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


.checkpoint-review-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 28px
        rgba(38, 105, 91, 0.12);
}


.checkpoint-icon {

    min-height: 58px;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 45px;

    line-height: 1;
}


.checkpoint-review-card strong {

    color: #205f54;

    font-size: 18px;
}


.checkpoint-review-card p {

    max-width: 280px;

    margin:
        8px auto 0;

    color: #78918b;

    font-size: 13px;

    line-height: 1.5;
}


.checkpoint-example {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 35px;

    margin-top: 13px;

    padding:
        7px 11px;

    border-radius: 11px;

    background: #ffffff;

    color: #328f7b;

    font-size: 12px;

    font-weight: 800;

    line-height: 1.4;
}


/* =========================================================
   24. QUICK REMINDER / REVIEW DECISION
========================================================= */

.review-decision-card {

    width: 100%;

    margin-top: 22px;

    padding:
        20px;

    border:
        1px solid
        rgba(58, 151, 131, 0.14);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #f8fdfb,
            #e1f5ef
        );

    box-shadow:
        0 9px 21px
        rgba(38, 105, 91, 0.06);
}


.review-decision-card h3 {

    margin:
        0 0 14px;

    text-align: center;

    color: #205f54;

    font-size: 18px;
}


.decision-row {

    width: 100%;

    min-height: 62px;

    padding:
        10px 12px;

    border-bottom:
        1px solid
        rgba(58, 151, 131, 0.10);

    display: grid;

    grid-template-columns:
        36px 1fr auto;

    align-items: center;

    gap: 12px;
}


.decision-row:last-child {

    border-bottom: none;
}


.decision-row > span {

    width: 32px;

    height: 32px;

    border-radius: 10px;

    background:
        linear-gradient(
            145deg,
            #c9eee4,
            #e8f8f3
        );

    color: #287665;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 900;
}


.decision-row p {

    margin: 0;

    color: #66827c;

    font-size: 13px;

    line-height: 1.45;
}


.decision-row strong {

    padding:
        7px 10px;

    border-radius: 10px;

    background: #ffffff;

    color: #287665;

    font-size: 12px;

    white-space: nowrap;
}


/* =========================================================
   25. VIDEO PANEL
========================================================= */

.video-panel {

    position: relative;
}


.video-frame {

    width: 100%;

    margin-top: 24px;

    border:
        1px solid
        rgba(58, 151, 131, 0.14);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #f5fcfa,
            #dff5ef
        );

    box-shadow:
        0 13px 30px
        rgba(38, 105, 91, 0.08);

    overflow: hidden;
}


.video-placeholder {

    width: 100%;

    min-height: 360px;

    padding: 30px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        radial-gradient(
            circle at 50% 35%,
            rgba(117, 203, 183, 0.18),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #f8fdfb,
            #dff5ef
        );
}


.video-play-icon {

    width: 78px;

    height: 78px;

    margin-bottom: 16px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #3ca68f,
            #67c8b1
        );

    color: #ffffff;

    box-shadow:
        0 12px 25px
        rgba(43, 139, 118, 0.22);

    display: flex;

    align-items: center;

    justify-content: center;

    padding-left: 4px;

    font-size: 28px;
}


.video-placeholder strong {

    color: #205f54;

    font-size: 21px;
}


.video-placeholder p {

    margin:
        7px 0 0;

    color: #78918b;

    font-size: 13px;
}


/* =========================================================
   26. VIDEO LISTEN CARDS
========================================================= */

.video-listen-grid {

    width: 100%;

    margin-top: 18px;

    display: grid;

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

    gap: 11px;
}


.video-listen-card {

    min-height: 145px;

    padding:
        16px 10px;

    border:
        1px solid
        rgba(58, 151, 131, 0.13);

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #e6f7f2
        );

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.video-listen-card > span {

    margin-bottom: 8px;

    font-size: 31px;
}


.video-listen-card strong {

    color: #205f54;

    font-size: 12px;
}


.video-listen-card p {

    margin:
        5px 0 0;

    color: #78918b;

    font-size: 12px;

    line-height: 1.4;
}


.video-note {

    width: 100%;

    margin-top: 18px;

    padding:
        16px 18px;

    border:
        1px solid
        rgba(61, 157, 136, 0.12);

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #f7fcfa,
            #e1f5ef
        );

    display: flex;

    align-items: center;

    gap: 14px;
}


.video-note > span {

    flex: 0 0 auto;

    font-size: 27px;
}


.video-note p {

    margin: 0;

    color: #66827c;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   27. EXTERNAL HOLIDAY GAMES
========================================================= */

.external-games-grid {

    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 15px;
}


.external-game-card {

    min-height: 245px;

    padding:
        21px 16px;

    border:
        1px solid
        rgba(58, 151, 131, 0.15);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #dff5ef
        );

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.07);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    color: inherit;

    text-align: center;

    text-decoration: none;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        border-color 0.22s ease;
}


.external-game-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(58, 151, 131, 0.26);

    box-shadow:
        0 15px 28px
        rgba(38, 105, 91, 0.12);
}


.external-game-icon {

    min-height: 65px;

    margin-bottom: 10px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 49px;
}


.external-game-card strong {

    color: #205f54;

    font-size: 17px;
}


.external-game-card p {

    max-width: 220px;

    margin:
        8px auto 13px;

    color: #78918b;

    font-size: 13px;

    line-height: 1.5;
}


.external-game-card > span {

    margin-top: auto;

    color: #328f7b;

    font-size: 12px;

    font-weight: 900;
}


/* =========================================================
   28. HOLIDAY BADGES
========================================================= */

.badge-row {

    width: 100%;

    margin-top: 23px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 9px;
}


.badge-row i {

    width: 42px;

    height: 42px;

    border:
        1px solid
        rgba(58, 151, 131, 0.13);

    border-radius: 50%;

    background: #edf6f3;

    color: #8ba49e;

    display: flex;

    align-items: center;

    justify-content: center;

    font-style: normal;

    font-size: 12px;

    font-weight: 900;

    transition:
        transform 0.25s ease,
        background 0.25s ease,
        color 0.25s ease,
        box-shadow 0.25s ease;
}


.badge-row i.active {

    background:
        linear-gradient(
            145deg,
            #d5f2e9,
            #a6dfd0
        );

    color: #205f54;

    box-shadow:
        0 7px 16px
        rgba(49, 144, 123, 0.12);

    transform:
        scale(1.07);
}


.badge-row i.earned,
.badge-row i.completed {

    background:
        linear-gradient(
            135deg,
            #3ca68f,
            #67c8b1
        );

    color: #ffffff;

    border-color: transparent;

    box-shadow:
        0 7px 16px
        rgba(43, 139, 118, 0.18);
}


/* =========================================================
   29. HOLIDAY ADVENTURE MAP
========================================================= */

.map-panel {

    position: relative;
}


.practice-map {

    width: 100%;

    margin-top: 22px;

    display: grid;

    gap: 12px;
}


.practice-level {

    width: 100%;

    min-height: 92px;

    padding:
        14px 16px;

    border:
        1px solid
        rgba(58, 151, 131, 0.15);

    border-radius: 20px;

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

    box-shadow:
        0 8px 19px
        rgba(38, 105, 91, 0.05);

    display: grid;

    grid-template-columns:
        42px 54px 1fr auto;

    align-items: center;

    gap: 13px;

    color: inherit;

    font: inherit;

    text-align: left;

    cursor: pointer;

    transition:
        transform 0.22s ease,
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease,
        opacity 0.22s ease;
}


.practice-level:hover:not(:disabled) {

    transform:
        translateY(-3px);

    border-color:
        rgba(58, 151, 131, 0.27);

    background: #ffffff;

    box-shadow:
        0 12px 24px
        rgba(38, 105, 91, 0.09);
}


.level-number {

    width: 38px;

    height: 38px;

    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            #c9eee4,
            #e8f8f3
        );

    color: #287665;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 12px;

    font-weight: 900;
}


.level-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 34px;
}


.level-content {

    min-width: 0;

    display: block;
}


.level-content strong {

    display: block;

    color: #205f54;

    font-size: 15px;
}


.level-content small {

    display: block;

    margin-top: 4px;

    color: #78918b;

    font-size: 11px;

    line-height: 1.4;
}


.level-status {

    min-width: 65px;

    padding:
        7px 10px;

    border-radius: 999px;

    background: #effaf7;

    color: #328f7b;

    font-size: 10px;

    font-weight: 900;

    text-align: center;
}


/* =========================================================
   30. MAP STATES
========================================================= */

.practice-level.active {

    border-color:
        rgba(60, 166, 143, 0.32);

    background:
        linear-gradient(
            145deg,
            #f7fdfa,
            #d9f3ec
        );

    box-shadow:
        0 10px 23px
        rgba(49, 144, 123, 0.10);
}


.practice-level.active .level-number {

    background:
        linear-gradient(
            135deg,
            #3ca68f,
            #67c8b1
        );

    color: #ffffff;
}


.practice-level.completed {

    border-color:
        rgba(50, 143, 123, 0.23);

    background:
        linear-gradient(
            145deg,
            #f2fbf8,
            #d7f2ea
        );
}


.practice-level.completed .level-number {

    background:
        linear-gradient(
            135deg,
            #3ca68f,
            #67c8b1
        );

    color: #ffffff;
}


.practice-level.completed .level-status {

    background: #d5f2e9;

    color: #205f54;
}


.practice-level.locked {

    opacity: 0.62;

    cursor: not-allowed;

    box-shadow: none;
}


.practice-level.locked:hover {

    transform: none;
}


.practice-level.locked .level-number {

    background: #edf3f1;

    color: #9bada8;
}


.practice-level.locked .level-status {

    background: #edf3f1;

    color: #91a49f;
}


/* =========================================================
   31. MAP MESSAGE
========================================================= */

.map-message {

    width: 100%;

    min-height: 57px;

    margin-top: 18px;

    padding:
        14px 17px;

    border:
        1px solid
        rgba(61, 157, 136, 0.12);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            #f7fcfa,
            #e3f6f0
        );

    color: #66827c;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 700;

    line-height: 1.5;

    text-align: center;
}


.map-panel > .main-action-button {

    margin-top: 20px;
}


/* =========================================================
   32. GAME WORKSPACE
========================================================= */

.game-workspace-panel {

    position: relative;
}


.game-workspace-header {

    width: 100%;

    margin-top: 4px;

    padding:
        19px 20px;

    border:
        1px solid
        rgba(58, 151, 131, 0.14);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #f8fdfb,
            #dff5ef
        );

    box-shadow:
        0 9px 21px
        rgba(38, 105, 91, 0.06);

    display: flex;

    align-items: center;

    gap: 16px;
}


.game-workspace-icon {

    width: 67px;

    height: 67px;

    min-width: 67px;

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #c9eee4,
            #e8f8f3
        );

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 35px;
}


.game-level-label {

    display: block;

    margin-bottom: 4px;

    color: #328f7b;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.11em;
}


.game-workspace-header h2 {

    margin: 0;

    color: #205f54;

    font-size: 25px;
}


/* =========================================================
   33. GAME PROGRESS
========================================================= */

.game-progress-area {

    width: 100%;

    margin-top: 19px;

    display: grid;

    grid-template-columns:
        1fr auto;

    align-items: center;

    gap: 13px;
}


.game-progress-track {

    width: 100%;

    height: 9px;

    border-radius: 999px;

    background:
        rgba(91, 177, 156, 0.14);

    overflow: hidden;
}


.game-progress-fill {

    width: 0%;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #3ca68f,
            #72cbb7
        );

    box-shadow:
        0 4px 12px
        rgba(49, 144, 123, 0.20);

    transition:
        width 0.35s ease;
}


#gameProgressText {

    min-width: 56px;

    color: #328f7b;

    font-size: 12px;

    font-weight: 900;

    text-align: right;
}


/* =========================================================
   34. GAME QUESTION
========================================================= */

.game-question-card {

    width: 100%;

    min-height: 175px;

    margin-top: 20px;

    padding:
        24px 22px;

    border:
        1px solid
        rgba(58, 151, 131, 0.14);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #e4f6f1
        );

    box-shadow:
        0 10px 23px
        rgba(38, 105, 91, 0.06);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


.game-question-icon {

    min-height: 58px;

    margin-bottom: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 48px;

    line-height: 1;
}


.game-question {

    max-width: 650px;

    margin: 0;

    color: #205f54;

    font-size: 19px;

    font-weight: 800;

    line-height: 1.55;
}


/* =========================================================
   35. GAME OPTIONS
========================================================= */

.game-options {

    width: 100%;

    margin-top: 17px;

    display: grid;

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

    gap: 13px;
}


.game-option {

    width: 100%;

    min-height: 72px;

    padding:
        15px 17px;

    border:
        1px solid
        rgba(58, 151, 131, 0.16);

    border-radius: 18px;

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

    color: #315e56;

    box-shadow:
        0 7px 17px
        rgba(38, 105, 91, 0.05);

    font: inherit;

    font-size: 15px;

    font-weight: 800;

    line-height: 1.45;

    text-align: center;

    cursor: pointer;

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


.game-option:hover:not(:disabled) {

    transform:
        translateY(-3px);

    border-color:
        rgba(58, 151, 131, 0.28);

    background: #ffffff;

    box-shadow:
        0 11px 22px
        rgba(38, 105, 91, 0.09);
}


.game-option:disabled {

    cursor: default;
}


.game-option.correct,
.game-option.correct-answer {

    border-color:
        rgba(50, 143, 123, 0.38);

    background:
        linear-gradient(
            145deg,
            #eaf9f4,
            #ccefe5
        );

    color: #205f54;

    box-shadow:
        0 8px 20px
        rgba(49, 144, 123, 0.12);
}


.game-option.wrong,
.game-option.wrong-answer {

    border-color:
        rgba(173, 113, 98, 0.25);

    background:
        linear-gradient(
            145deg,
            #fffafa,
            #f5e9e5
        );

    color: #785f59;

    box-shadow:
        0 8px 20px
        rgba(140, 93, 82, 0.08);
}


.game-option.selected-option {

    border-color:
        rgba(60, 166, 143, 0.34);

    background: #e4f6f1;
}


#gameFeedback {

    margin-top: 14px;
}


#gameNextButton {

    margin-top: 20px;
}

/* =========================================================
   36. FINAL CHECK
========================================================= */

#finalProgress {
    min-width: 68px;
}

#finalQuestionIcon {
    transition:
        transform 0.22s ease,
        opacity 0.22s ease;
}

#finalQuestion {
    transition:
        opacity 0.22s ease;
}

#finalOptions {
    width: 100%;
}

#finalFeedback {
    margin-top: 14px;
}

#finalContinue {
    margin-top: 20px;
}


/* =========================================================
   37. FINISH SCREEN
========================================================= */

.finish-panel {
    text-align: center;
}

.finish-celebration {
    width: 104px;
    height: 104px;

    margin:
        0 auto 17px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #d5f2e9,
            #a6dfd0
        );

    box-shadow:
        0 14px 28px
        rgba(51, 139, 120, 0.14);

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

    font-size: 52px;

    animation:
        holidayFloat 2.8s
        ease-in-out infinite;
}


/* =========================================================
   38. FINISH ACHIEVEMENT
========================================================= */

.finish-achievement {
    width: 100%;

    margin-top: 25px;

    padding:
        21px 22px;

    border:
        1px solid
        rgba(58, 151, 131, 0.15);

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #f8fdfb,
            #d7f2ea
        );

    box-shadow:
        0 11px 25px
        rgba(38, 105, 91, 0.08);

    display: flex;
    align-items: center;

    gap: 17px;

    text-align: left;
}

.finish-badge {
    width: 76px;
    height: 76px;

    min-width: 76px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #c9eee4,
            #e8f8f3
        );

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

    font-size: 40px;

    box-shadow:
        inset 0 0 0 1px
        rgba(58, 151, 131, 0.08);
}

.finish-achievement > div:last-child {
    min-width: 0;
}

.finish-achievement span {
    display: block;

    margin-bottom: 4px;

    color: #55a995;

    font-size: 10px;
    font-weight: 900;

    letter-spacing: 0.11em;
}

.finish-achievement strong {
    display: block;

    color: #205f54;

    font-size: 21px;
}

.finish-achievement p {
    margin:
        6px 0 0;

    color: #66827c;

    font-size: 13px;

    line-height: 1.45;
}


/* =========================================================
   39. FINISH SUMMARY
========================================================= */

.finish-summary {
    width: 100%;

    margin-top: 20px;

    display: grid;

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

    gap: 12px;
}

.finish-summary-card {
    min-height: 145px;

    padding:
        16px 10px;

    border:
        1px solid
        rgba(58, 151, 131, 0.14);

    border-radius: 19px;

    background:
        linear-gradient(
            145deg,
            #fcfefd,
            #e4f6f1
        );

    display: flex;
    flex-direction: column;

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

    text-align: center;

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

.finish-summary-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 10px 22px
        rgba(38, 105, 91, 0.08);
}

.finish-summary-card > span {
    margin-bottom: 8px;

    font-size: 31px;
}

.finish-summary-card strong {
    color: #205f54;

    font-size: 13px;
}

.finish-summary-card small {
    margin-top: 5px;

    color: #78918b;

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================================
   40. FINAL RESULT
========================================================= */

.finish-result {
    width: 100%;

    margin-top: 20px;

    padding:
        18px 20px;

    border:
        1px solid
        rgba(61, 157, 136, 0.13);

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #f4fbf8,
            #d7f1e9
        );

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;
}

.finish-result span {
    color: #66827c;

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

.finish-result strong {
    color: #205f54;

    font-size: 17px;
}


/* =========================================================
   41. FINISH HOLIDAY GREETINGS
========================================================= */

.finish-greetings {
    width: 100%;

    margin-top: 18px;

    display: grid;

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

    gap: 13px;
}

.finish-greeting-card {
    width: 100%;

    min-height: 135px;

    padding:
        17px 14px;

    border:
        1px solid
        rgba(58, 151, 131, 0.15);

    border-radius: 20px;

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

    color: #205f54;

    box-shadow:
        0 8px 19px
        rgba(38, 105, 91, 0.06);

    display: flex;
    flex-direction: column;

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

    font: inherit;

    text-align: center;

    cursor: pointer;

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease,
        background 0.22s ease,
        border-color 0.22s ease;
}

.finish-greeting-card:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(58, 151, 131, 0.27);

    background: #ffffff;

    box-shadow:
        0 12px 24px
        rgba(38, 105, 91, 0.10);
}

.finish-greeting-card.speaking {
    background: #c9eee4;

    border-color:
        rgba(60, 166, 143, 0.30);
}

.finish-greeting-card > span {
    margin-bottom: 7px;

    font-size: 34px;
}

.finish-greeting-card strong {
    color: #205f54;

    font-size: 15px;
}

.finish-greeting-card small {
    margin-top: 6px;

    color: #55a995;

    font-size: 11px;

    font-weight: 800;
}


/* =========================================================
   42. FINISH ACTIONS
========================================================= */

.finish-actions {
    width: 100%;

    margin-top: 22px;

    display: grid;

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

    gap: 13px;
}

.secondary-action-button {
    width: 100%;

    min-height: 52px;

    padding:
        12px 17px;

    border:
        1px solid
        rgba(58, 151, 131, 0.18);

    border-radius: 16px;

    background: #ffffff;

    color: #287665;

    font: inherit;
    font-weight: 800;

    cursor: pointer;

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

.secondary-action-button:hover {
    transform:
        translateY(-2px);

    border-color:
        rgba(58, 151, 131, 0.27);

    background: #effaf7;

    box-shadow:
        0 9px 20px
        rgba(38, 105, 91, 0.08);
}

.finish-home-button {
    width: 100%;

    min-height: 52px;

    display: flex;

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

    gap: 8px;

    text-decoration: none;
}


/* =========================================================
   43. ACHIEVEMENT TOAST
========================================================= */

.achievement-toast {
    position: fixed;

    right: 24px;
    bottom: 24px;

    z-index: 1000;

    width:
        min(
            350px,
            calc(100vw - 32px)
        );

    padding:
        15px 17px;

    border:
        1px solid
        rgba(58, 151, 131, 0.17);

    border-radius: 20px;

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

    box-shadow:
        0 18px 45px
        rgba(33, 104, 90, 0.16);

    display: flex;

    align-items: center;

    gap: 13px;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(20px)
        scale(0.97);

    transition:
        opacity 0.28s ease,
        visibility 0.28s ease,
        transform 0.28s ease;

    backdrop-filter:
        blur(10px);
}

.achievement-toast.show,
.achievement-toast.visible {
    opacity: 1;

    visibility: visible;

    transform:
        translateY(0)
        scale(1);
}

.achievement-toast-icon {
    width: 50px;
    height: 50px;

    min-width: 50px;

    border-radius: 15px;

    background:
        linear-gradient(
            145deg,
            #c9eee4,
            #e8f8f3
        );

    display: flex;

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

    font-size: 27px;
}

.achievement-toast-text {
    min-width: 0;
}

.achievement-toast-text span {
    display: block;

    margin-bottom: 3px;

    color: #55a995;

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

    letter-spacing: 0.11em;
}

.achievement-toast-text strong {
    display: block;

    color: #205f54;

    font-size: 15px;

    line-height: 1.35;
}


/* =========================================================
   44. SPARKLE / CONFETTI LAYERS
========================================================= */

.sparkle-layer,
.confetti-layer {
    position: fixed;

    inset: 0;

    z-index: 999;

    overflow: hidden;

    pointer-events: none;
}

.sparkle,
.lesson-sparkle {
    position: absolute;

    width: 9px;
    height: 9px;

    border-radius: 50%;

    background: #75cbb7;

    box-shadow:
        0 0 12px
        rgba(85, 184, 161, 0.40);

    animation:
        holidaySparklePop
        0.85s ease-out forwards;
}

.lesson-sparkle:nth-child(3n + 1),
.sparkle:nth-child(3n + 1) {
    background: #3ca68f;
}

.lesson-sparkle:nth-child(3n + 2),
.sparkle:nth-child(3n + 2) {
    background: #9edccc;
}

.lesson-sparkle:nth-child(3n + 3),
.sparkle:nth-child(3n + 3) {
    background: #c9eee4;
}

.confetti-piece {
    position: absolute;

    top: -20px;

    width: 10px;
    height: 16px;

    border-radius: 3px;

    background: #75cbb7;

    animation:
        holidayConfettiFall
        2.8s linear forwards;
}

.confetti-piece:nth-child(4n + 1) {
    background: #3ca68f;
}

.confetti-piece:nth-child(4n + 2) {
    background: #9edccc;
}

.confetti-piece:nth-child(4n + 3) {
    background: #c9eee4;
}

.confetti-piece:nth-child(4n + 4) {
    background: #55b8a1;
}


/* =========================================================
   45. GENERAL INTERACTIVE STATES
========================================================= */

.lesson-body button:focus-visible,
.lesson-body a:focus-visible {
    outline:
        3px solid
        rgba(60, 166, 143, 0.28);

    outline-offset: 3px;
}

.lesson-body button {
    -webkit-tap-highlight-color:
        transparent;
}

.lesson-body button:disabled {
    user-select: none;
}


/* =========================================================
   46. SCREEN ENTRANCE
========================================================= */

.lesson-screen.active-screen .lesson-panel {
    animation:
        holidayScreenEntrance
        0.38s ease both;
}


/* =========================================================
   47. ANIMATIONS
========================================================= */

@keyframes holidayFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-7px);
    }

}


@keyframes holidayScreenEntrance {

    0% {
        opacity: 0;

        transform:
            translateY(10px);
    }

    100% {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes holidaySparklePop {

    0% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0);
    }

    35% {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1.25);
    }

    100% {
        opacity: 0;

        transform:
            translate(-50%, -50%)
            scale(0.4);
    }

}


@keyframes holidayConfettiFall {

    0% {
        opacity: 1;

        transform:
            translateY(-10px)
            rotate(0deg);
    }

    100% {
        opacity: 0;

        transform:
            translateY(110vh)
            rotate(620deg);
    }

}


/* =========================================================
   48. TABLET
========================================================= */

@media (max-width: 900px) {

    .holiday-word-grid,
    .holiday-action-grid,
    .tradition-grid,
    .external-games-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .video-listen-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .finish-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .video-placeholder {
        min-height: 290px;
    }

}


/* =========================================================
   49. MOBILE
========================================================= */

@media (max-width: 700px) {

    .holiday-word-grid,
    .holiday-action-grid,
    .tradition-grid,
    .external-games-grid,
    .checkpoint-review-grid {
        grid-template-columns: 1fr;
    }


    .holiday-word-card,
    .holiday-action-card {
        min-height: 205px;
    }


    .tradition-card {
        min-height: 240px;
    }


    .external-game-card {
        min-height: 215px;
    }


    .holiday-greeting-row,
    .finish-greetings {
        grid-template-columns: 1fr;
    }


    .holiday-example-row {
        grid-template-columns:
            48px 1fr;

        padding: 13px;
    }


    .countdown-numbers span {
        width: 44px;
        height: 44px;

        border-radius: 14px;

        font-size: 17px;
    }


    .activity-options,
    .game-options {
        grid-template-columns: 1fr;
    }


    .review-question-card,
    .grammar-mix-card,
    .game-question-card {
        min-height: 150px;

        padding:
            20px 16px;
    }


    .review-question-card p,
    .grammar-mix-card p,
    .game-question {
        font-size: 17px;
    }


    .decision-row {
        grid-template-columns:
            32px 1fr;

        gap: 10px;
    }


    .decision-row strong {
        grid-column: 2;

        justify-self: start;

        white-space: normal;
    }


    .video-placeholder {
        min-height: 235px;
    }


    .video-play-icon {
        width: 65px;
        height: 65px;

        font-size: 23px;
    }


    .video-listen-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .practice-level {
        grid-template-columns:
            38px 44px 1fr;

        padding: 13px;
    }


    .level-number {
        width: 34px;
        height: 34px;
    }


    .level-icon {
        font-size: 29px;
    }


    .level-status {
        grid-column:
            2 / 4;

        justify-self: start;

        min-width: 0;

        margin-top: 2px;
    }


    .game-workspace-header {
        padding: 16px;

        gap: 13px;
    }


    .game-workspace-icon {
        width: 58px;
        height: 58px;

        min-width: 58px;

        font-size: 31px;
    }


    .game-workspace-header h2 {
        font-size: 21px;
    }


    .finish-achievement {
        padding:
            18px 16px;
    }


    .finish-badge {
        width: 64px;
        height: 64px;

        min-width: 64px;

        font-size: 34px;
    }


    .finish-summary {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }


    .finish-summary-card {
        min-height: 130px;
    }


    .finish-actions {
        grid-template-columns: 1fr;
    }


    .finish-result {
        flex-direction: column;

        justify-content: center;

        gap: 5px;

        text-align: center;
    }


    .achievement-toast {
        right: 16px;
        bottom: 16px;
    }

}


/* =========================================================
   50. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .lesson-body .important-note,
    .lesson-body .golden-tip,
    .video-note {
        align-items: flex-start;

        padding: 15px;
    }


    .holiday-word-grid,
    .holiday-action-grid,
    .tradition-grid,
    .external-games-grid {
        gap: 11px;
    }


    .holiday-word-card,
    .holiday-action-card {
        padding:
            18px 13px;
    }


    .holiday-word-icon,
    .holiday-action-icon {
        font-size: 44px;
    }


    .holiday-example-row {
        grid-template-columns:
            40px 1fr;

        gap: 10px;
    }


    .holiday-example-row > span {
        font-size: 27px;
    }


    .new-year-countdown-card {
        padding:
            19px 13px;
    }


    .countdown-numbers {
        gap: 7px;
    }


    .countdown-numbers span {
        width: 39px;
        height: 39px;

        border-radius: 12px;

        font-size: 15px;
    }


    .activity-option,
    .game-option {
        min-height: 64px;

        padding: 13px;

        font-size: 14px;
    }


    .video-listen-grid {
        grid-template-columns: 1fr;
    }


    .video-listen-card {
        min-height: 115px;
    }


    .practice-level {
        grid-template-columns:
            34px 1fr;

        gap: 10px;
    }


    .practice-level .level-icon {
        display: none;
    }


    .level-status {
        grid-column: 2;
    }


    .game-progress-area {
        grid-template-columns: 1fr;
    }


    #gameProgressText {
        text-align: center;
    }


    .game-workspace-header {
        align-items: flex-start;
    }


    .finish-achievement {
        flex-direction: column;

        text-align: center;
    }


    .finish-summary {
        grid-template-columns: 1fr;
    }


    .finish-summary-card {
        min-height: 115px;
    }


    .finish-greeting-card {
        min-height: 120px;
    }


    .badge-row {
        gap: 7px;
    }


    .badge-row i {
        width: 35px;
        height: 35px;
    }


    .achievement-toast {
        width:
            calc(100vw - 24px);

        right: 12px;
        bottom: 12px;
    }

}


/* =========================================================
   51. VERY SMALL SCREENS
========================================================= */

@media (max-width: 360px) {

    .countdown-numbers span {
        width: 35px;
        height: 35px;

        font-size: 14px;
    }


    .game-workspace-icon {
        width: 52px;
        height: 52px;

        min-width: 52px;

        border-radius: 16px;

        font-size: 27px;
    }


    .game-workspace-header h2 {
        font-size: 18px;
    }


    .finish-celebration {
        width: 88px;
        height: 88px;

        font-size: 44px;
    }

}


/* =========================================================
   52. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}