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


/* =========================================================
   GRADE 3 — LESSON 19
   PLACES IN TOWN
========================================================= */


/* =========================================================
   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;

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

    min-height: 100vh;

    margin: 0;

    color: var(--town-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
========================================================= */

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

.lesson-body .lesson-progress-number {
    color: #287665;
}


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

.lesson-screen {
    display: none;
}

.lesson-screen.active-screen {
    display: block !important;

    opacity: 1 !important;

    visibility: visible !important;
}


/* =========================================================
   6. 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
========================================================= */

.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 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. TOWN VOCABULARY
========================================================= */

.town-vocabulary-grid {
    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 15px;
}

.town-word-card {
    min-height: 205px;

    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;

    color: #315e56;

    font: inherit;

    cursor: pointer;

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

.town-word-card:hover {
    transform:
        translateY(-4px);

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

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

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

.town-word-card.speaking {
    border-color:
        rgba(60, 166, 143, 0.40);

    background: #d9f3ec;

    transform:
        translateY(-3px);
}

.town-word-icon {
    min-height: 62px;

    margin-bottom: 11px;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 48px;

    line-height: 1;
}

.town-word-card strong {
    color: #205f54;

    font-size: 19px;
}

.town-word-card small {
    margin-top: 7px;

    color: #78918b;

    font-size: 12px;
}


/* =========================================================
   10. 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;
}


/* =========================================================
   11. 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 {
    font-size: 28px;
}

.lesson-body .golden-tip p {
    margin: 0;

    color: #55766f;

    line-height: 1.55;
}

.lesson-body .golden-tip strong {
    color: #287665;
}


/* =========================================================
   12. TOWN ACTION LIST
========================================================= */

.town-action-list {
    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 14px;
}

.town-action-row {
    min-height: 118px;

    padding:
        17px 19px;

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

    border-radius: 21px;

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

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

    display: grid;

    grid-template-columns:
        65px 1fr;

    align-items: center;

    gap: 16px;

    color: #315e56;

    font: inherit;

    text-align: left;

    cursor: pointer;

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

.town-action-row:hover {
    transform:
        translateY(-3px);

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

    background: #ffffff;

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

.town-action-row.speaking {
    border-color:
        rgba(60, 166, 143, 0.40);

    background: #dff5ef;
}

.town-action-row > span {
    font-size: 39px;

    text-align: center;
}

.town-action-row strong {
    color: #205f54;

    font-size: 17px;
}

.town-action-row p {
    margin:
        5px 0 0;

    color: #66827c;

    font-size: 13px;

    line-height: 1.45;
}


/* =========================================================
   13. TOWN PATTERNS
========================================================= */

.town-pattern-grid {
    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 15px;
}

.town-pattern-card {
    min-height: 270px;

    padding:
        21px 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;
}

.town-pattern-card:hover {
    transform:
        translateY(-4px);

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

.pattern-number {
    width: 43px;

    height: 43px;

    margin-bottom: 11px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            #3ca68f,
            #69c9b3
        );

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 900;

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

.town-pattern-card small {
    color: #55a995;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.12em;
}

.town-pattern-card > strong {
    margin-top: 12px;

    color: #205f54;

    font-size: 18px;

    line-height: 1.4;
}

.town-pattern-card > p {
    margin:
        8px 0 15px;

    color: #78918b;

    font-size: 13px;
}


/* =========================================================
   14. SPEAK BUTTON
========================================================= */

.lesson-body .speak-button {
    margin-top: auto;

    padding:
        9px 13px;

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

    border-radius: 12px;

    background: white;

    color: #328f7b;

    font: inherit;

    font-size: 12px;

    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        color 0.2s ease;
}

.lesson-body .speak-button:hover {
    background: #e2f6f0;

    color: #205f54;

    transform:
        translateY(-2px);
}

.lesson-body .speak-button.speaking {
    background: #c9eee4;

    color: #205f54;
}


/* =========================================================
   15. MINI TOWN
========================================================= */

.mini-town-grid {
    width: 100%;

    margin-top: 25px;

    padding: 22px;

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

    border-radius: 27px;

    background:
        linear-gradient(
            145deg,
            rgba(248, 253, 251, 0.95),
            rgba(219, 243, 236, 0.92)
        );

    display: grid;

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

    gap: 14px;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.72),
        0 12px 28px
        rgba(38, 105, 91, 0.06);
}

.mini-town-place {
    min-height: 155px;

    padding:
        16px 11px;

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

    border-radius: 20px;

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

    color: #315e56;

    font: inherit;

    cursor: pointer;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

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

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

.mini-town-place:hover {
    transform:
        translateY(-4px);

    background: #ffffff;

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

.mini-town-place.speaking {
    background: #d7f2ea;
}

.mini-town-place > span {
    margin-bottom: 10px;

    font-size: 42px;
}

.mini-town-place strong {
    color: #205f54;

    font-size: 15px;
}


/* =========================================================
   16. ACTIVITY PANEL
========================================================= */

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

.activity-progress {
    width: 100%;

    margin:
        18px 0 17px;

    display: flex;

    justify-content: center;
}

.activity-progress span {
    padding:
        8px 14px;

    border-radius: 999px;

    background: #e1f5ef;

    color: #287665;

    font-size: 12px;

    font-weight: 900;

    letter-spacing: 0.06em;
}


/* =========================================================
   17. QUESTION CARDS
========================================================= */

.town-question-card,
.detective-question-card {
    width: 100%;

    min-height: 200px;

    padding:
        25px 20px;

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

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #fbfefd,
            #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;
}

.town-question-icon {
    margin-bottom: 14px;

    font-size: 53px;

    line-height: 1.2;
}

.detective-symbol {
    width: 65px;

    height: 65px;

    margin-bottom: 15px;

    border-radius: 20px;

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

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 31px;
}

.town-question-card p,
.detective-question-card p {
    max-width: 650px;

    margin: 0;

    color: #315e56;

    font-size: 19px;

    font-weight: 700;

    line-height: 1.5;
}


/* =========================================================
   18. ACTIVITY OPTIONS
========================================================= */

.activity-options {
    width: 100%;

    margin-top: 18px;

    display: grid;

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

    gap: 13px;
}

.activity-options button,
.activity-option,
.option-button {
    width: 100%;

    min-height: 62px;

    padding:
        14px 16px;

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

    border-radius: 17px;

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

    color: #315e56;

    font: inherit;

    font-weight: 700;

    cursor: pointer;

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

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

.activity-options button:hover:not(:disabled),
.activity-option:hover:not(:disabled),
.option-button:hover:not(:disabled) {
    transform:
        translateY(-2px);

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

    background: #ffffff;

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

.activity-options button:disabled,
.activity-option:disabled,
.option-button:disabled {
    cursor: default;
}


/* =========================================================
   19. ANSWER STATES
========================================================= */

.activity-options button.correct,
.activity-option.correct,
.option-button.correct,
.correct-option,
.correct-answer {
    border-color:
        rgba(54, 156, 132, 0.38) !important;

    background:
        linear-gradient(
            145deg,
            #eefbf7,
            #cdeee5
        ) !important;

    color: #205f54 !important;

    box-shadow:
        0 8px 20px
        rgba(46, 139, 118, 0.10);
}

.activity-options button.wrong,
.activity-option.wrong,
.option-button.wrong,
.wrong-option,
.wrong-answer {
    border-color:
        rgba(209, 104, 104, 0.28) !important;

    background:
        linear-gradient(
            145deg,
            #fffafa,
            #f9e5e5
        ) !important;

    color: #934b4b !important;
}

.activity-options button.selected,
.activity-option.selected,
.option-button.selected,
.selected-option {
    border-color: #75cbb7;

    background: #e2f6f0;

    color: #205f54;
}


/* =========================================================
   20. FEEDBACK
========================================================= */

.activity-feedback {
    min-height: 28px;

    margin-top: 15px;

    color: #55766f;

    font-size: 14px;

    font-weight: 700;

    text-align: center;
}

.activity-feedback.correct,
.activity-feedback.success,
.activity-feedback.correct-feedback,
.feedback-correct {
    color: #287665;
}

.activity-feedback.wrong,
.activity-feedback.error,
.activity-feedback.wrong-feedback,
.feedback-wrong {
    color: #a34f4f;
}


/* =========================================================
   21. CHECKPOINT TOWN
========================================================= */

.checkpoint-town-grid {
    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 14px;
}

.checkpoint-town-card {
    min-height: 190px;

    padding:
        18px 13px;

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

    border-radius: 22px;

    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.2s ease,
        box-shadow 0.2s ease;
}

.checkpoint-town-card:hover {
    transform:
        translateY(-4px);

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

.checkpoint-town-card > span {
    margin-bottom: 10px;

    font-size: 40px;
}

.checkpoint-town-card strong {
    color: #205f54;

    font-size: 17px;
}

.checkpoint-town-card p {
    margin:
        8px 0 0;

    color: #66827c;

    font-size: 12px;
}


/* =========================================================
   22. MEMORY RULE
========================================================= */

.town-memory-rule {
    width: 100%;

    margin-top: 22px;

    padding:
        19px 21px;

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

    border-radius: 21px;

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

    display: flex;

    align-items: center;

    gap: 17px;
}

.town-memory-rule > span {
    flex: 0 0 auto;

    font-size: 32px;
}

.town-memory-rule strong {
    color: #205f54;
}

.town-memory-rule p {
    margin:
        5px 0 0;

    color: #66827c;

    line-height: 1.55;
}

.town-memory-rule b {
    color: #287665;
}


/* =========================================================
   23. VIDEO
========================================================= */

.video-lesson-card {
    width: 100%;

    margin-top: 25px;

    padding: 9px;

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

    border-radius: 25px;

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

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

.video-placeholder {
    min-height: 310px;

    padding: 25px;

    border-radius: 19px;

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

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}

.video-play-icon {
    width: 74px;

    height: 74px;

    margin-bottom: 17px;

    border-radius: 50%;

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

    color: white;

    display: flex;

    align-items: center;

    justify-content: center;

    padding-left: 4px;

    font-size: 26px;

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

.video-placeholder strong {
    color: #205f54;

    font-size: 21px;
}

.video-placeholder > span {
    margin-top: 7px;

    color: #66827c;
}

.video-tip-card {
    width: 100%;

    margin-top: 17px;

    padding:
        17px 19px;

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

    border-radius: 19px;

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

    display: flex;

    align-items: center;

    gap: 14px;
}

.video-tip-card > span {
    font-size: 26px;
}

.video-tip-card p {
    margin: 0;

    color: #66827c;

    line-height: 1.5;
}

.video-tip-card strong {
    color: #287665;
}


/* =========================================================
   24. EXTERNAL GAMES
========================================================= */

.external-games-grid {
    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 15px;
}

.external-game-card {
    min-height: 145px;

    padding:
        19px 18px;

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

    border-radius: 22px;

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

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

    display: grid;

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

    align-items: center;

    gap: 14px;

    text-decoration: none;

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

.external-game-card:hover {
    transform:
        translateY(-4px);

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

.external-game-icon {
    width: 53px;

    height: 53px;

    border-radius: 17px;

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

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 27px;
}

.game-type {
    display: block;

    margin-bottom: 5px;

    color: #55a995;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.12em;
}

.external-game-card strong {
    color: #205f54;

    font-size: 16px;
}

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

    color: #66827c;

    font-size: 13px;
}

.external-arrow {
    color: #3ca68f;

    font-size: 23px;

    font-weight: 900;
}


/* =========================================================
   25. BADGES
========================================================= */

.badge-row {
    width: 100%;

    margin:
        24px 0 21px;

    display: flex;

    justify-content: center;

    gap: 11px;
}

.badge-row i {
    width: 44px;

    height: 44px;

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

    border-radius: 50%;

    background: #edf9f6;

    color: #78aa9e;

    display: flex;

    align-items: center;

    justify-content: center;

    font-style: normal;

    font-weight: 900;

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

.badge-row i.completed,
.badge-row i.earned,
.badge-row i.active-badge {
    background:
        linear-gradient(
            135deg,
            #3ca68f,
            #69c9b3
        );

    color: #ffffff;

    transform:
        translateY(-2px);

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


/* =========================================================
   26. TOWN ADVENTURE MAP
========================================================= */

.practice-map {
    width: 100%;

    display: grid;

    gap: 12px;
}

.practice-level {
    width: 100%;

    min-height: 94px;

    padding:
        14px 17px;

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

    border-radius: 20px;

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

    display: grid;

    grid-template-columns:
        40px 55px 1fr auto;

    align-items: center;

    gap: 13px;

    color: #315e56;

    font: inherit;

    text-align: left;

    cursor: pointer;

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

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

.practice-level:hover:not(:disabled) {
    transform:
        translateY(-2px);

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

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

.level-number {
    width: 36px;

    height: 36px;

    border-radius: 50%;

    background: #d7f2ea;

    color: #287665;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 13px;

    font-weight: 900;
}

.level-icon {
    font-size: 30px;

    text-align: center;
}

.level-copy {
    display: flex;

    flex-direction: column;

    gap: 4px;
}

.level-copy strong {
    color: #205f54;
}

.level-copy small {
    color: #7b938e;
}

.level-status {
    padding:
        7px 10px;

    border-radius: 999px;

    background: #dff5ef;

    color: #328f7b;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.08em;
}

.active-practice-level {
    border-color:
        rgba(60, 166, 143, 0.28);

    background:
        linear-gradient(
            145deg,
            #f9fdfc,
            #d5f1e9
        );
}

.locked-level {
    opacity: 0.52;

    cursor: not-allowed;
}

.locked-level .level-status {
    background: #edf2f1;

    color: #899a96;
}

.practice-level.completed-level,
.practice-level.level-complete {
    border-color:
        rgba(60, 166, 143, 0.26);

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

.practice-level.completed-level .level-status,
.practice-level.level-complete .level-status {
    background: #c9eee4;

    color: #205f54;
}

.map-message {
    margin:
        19px 0 0;

    color: #66827c;

    text-align: center;

    font-weight: 700;
}


/* =========================================================
   27. GAME WORKSPACE
========================================================= */

.game-workspace-panel {
    position: relative;
}

.game-back-button {
    margin-bottom: 21px;

    padding:
        9px 13px;

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

    border-radius: 12px;

    background: #edf9f6;

    color: #287665;

    font: inherit;

    font-size: 13px;

    font-weight: 800;

    cursor: pointer;

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

.game-back-button:hover {
    background: #dff5ef;

    transform:
        translateX(-2px);
}

.game-heading {
    text-align: center;
}

.game-label {
    display: inline-flex;

    padding:
        7px 12px;

    border-radius: 999px;

    background: #dff5ef;

    color: #328f7b;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.12em;
}

.game-heading h2 {
    margin:
        12px 0 6px;
}

.game-heading p {
    margin: 0;

    color: #66827c;
}

.game-status-bar {
    width: 100%;

    margin-top: 21px;

    padding:
        13px 16px;

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

    border-radius: 16px;

    background: #f3fbf8;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    color: #66827c;

    font-size: 13px;
}

.game-status-bar strong {
    color: #287665;
}

.game-workspace {
    width: 100%;

    min-height: 270px;

    margin-top: 17px;

    padding: 22px;

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

    border-radius: 23px;

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

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


/* =========================================================
   28. DYNAMIC MAP GAME
========================================================= */

.game-workspace button {
    font: inherit;
}

.game-question,
.map-game-question,
.workspace-question {
    margin:
        0 0 18px;

    color: #205f54;

    font-size: 20px;

    font-weight: 800;

    line-height: 1.45;

    text-align: center;
}

.game-icons,
.workspace-icons,
.game-question-icon {
    margin-bottom: 16px;

    font-size: 48px;

    line-height: 1.2;

    text-align: center;
}

.game-options,
.workspace-options {
    width: 100%;

    display: grid;

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

    gap: 12px;
}

.game-options button,
.workspace-options button,
.game-option {
    width: 100%;

    min-height: 60px;

    padding:
        13px 15px;

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

    border-radius: 16px;

    background: #ffffff;

    color: #315e56;

    font: inherit;

    font-weight: 700;

    cursor: pointer;

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

.game-options button:hover:not(:disabled),
.workspace-options button:hover:not(:disabled),
.game-option:hover:not(:disabled) {
    transform:
        translateY(-2px);

    background: #f5fcfa;

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

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

.game-option.correct,
.game-options button.correct,
.workspace-options button.correct {
    background: #d9f3ec;

    border-color: #75cbb7;

    color: #205f54;
}

.game-option.wrong,
.game-options button.wrong,
.workspace-options button.wrong {
    background: #f9e6e6;

    border-color: #e5b4b4;

    color: #954e4e;
}


/* =========================================================
   29. FINAL TOWN VOCABULARY
========================================================= */

.final-town-grid {
    width: 100%;

    margin-top: 25px;

    display: grid;

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

    gap: 12px;
}

.final-town-card {
    min-height: 145px;

    padding:
        16px 10px;

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

    border-radius: 20px;

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

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

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

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

.final-town-card:hover {
    transform:
        translateY(-3px);

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

.final-town-card > span {
    margin-bottom: 9px;

    font-size: 36px;
}

.final-town-card strong {
    color: #205f54;

    font-size: 14px;
}


/* =========================================================
   30. FINAL RULE
========================================================= */

.final-rule-card {
    width: 100%;

    margin-top: 22px;

    padding:
        19px 21px;

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

    border-radius: 21px;

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

    display: flex;

    align-items: center;

    gap: 17px;
}

.final-rule-card > span {
    font-size: 32px;
}

.final-rule-card strong {
    color: #205f54;
}

.final-rule-card p {
    margin:
        5px 0 0;

    color: #66827c;

    line-height: 1.55;
}

.final-rule-card b {
    color: #287665;
}


/* =========================================================
   31. FINISH
========================================================= */

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

.finish-trophy {
    width: 100px;

    height: 100px;

    margin:
        0 auto 20px;

    border-radius: 31px;

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

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 51px;

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

.finish-message {
    max-width: 560px;

    margin:
        15px auto 0;

    color: #66827c;

    line-height: 1.65;
}

.final-result-grid {
    width: 100%;

    max-width: 520px;

    margin:
        25px auto 0;

    display: grid;

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

    gap: 15px;
}

.final-result-card {
    min-height: 150px;

    padding: 19px;

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

    border-radius: 22px;

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

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

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

.final-result-card > span {
    margin-bottom: 7px;

    font-size: 31px;
}

.final-result-card > strong {
    color: #205f54;

    font-size: 30px;
}

.final-result-card small {
    margin-top: 4px;

    color: #78918b;
}

.finish-achievement {
    width: 100%;

    max-width: 520px;

    margin:
        18px auto 0;

    padding:
        18px 20px;

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

    border-radius: 21px;

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

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;
}

.finish-achievement > span {
    font-size: 32px;
}

.finish-achievement > div {
    display: flex;

    flex-direction: column;

    align-items: flex-start;

    gap: 3px;
}

.finish-achievement small {
    color: #55a995;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.12em;
}

.finish-achievement strong {
    color: #287665;
}

.lesson-home-button {
    width: fit-content;

    margin:
        25px auto 0;

    text-decoration: none;
}


/* =========================================================
   32. ACHIEVEMENT TOAST
========================================================= */

.achievement-toast {
    position: fixed;

    right: 24px;

    bottom: 24px;

    z-index: 1000;

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

    padding:
        16px 18px;

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

    border-radius: 21px;

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

    box-shadow:
        0 20px 50px
        rgba(36, 103, 89, 0.17);

    display: flex;

    align-items: center;

    gap: 14px;

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(20px);

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

    backdrop-filter:
        blur(15px);
}

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

    visibility: visible;

    transform:
        translateY(0);
}

.achievement-toast-icon {
    width: 52px;

    height: 52px;

    flex:
        0 0 52px;

    border-radius: 17px;

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

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 27px;
}

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

.achievement-toast > div:last-child > span {
    color: #55a995;

    font-size: 9px;

    font-weight: 900;

    letter-spacing: 0.12em;
}

.achievement-toast strong {
    display: block;

    margin-top: 3px;

    color: #205f54;
}

.achievement-toast p {
    margin:
        3px 0 0;

    color: #78918b;

    font-size: 12px;
}


/* =========================================================
   33. EFFECT LAYERS
========================================================= */

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

    inset: 0;

    z-index: 999;

    pointer-events: none;

    overflow: hidden;
}

.sparkle,
.confetti-piece {
    position: absolute;

    pointer-events: none;
}


/* =========================================================
   34. SPEAKING STATE
========================================================= */

[data-speak] {
    position: relative;
}

[data-speak].speaking {
    border-color:
        rgba(60, 166, 143, 0.34) !important;

    box-shadow:
        0 0 0 4px
        rgba(60, 166, 143, 0.07),
        0 12px 26px
        rgba(38, 105, 91, 0.09);
}


/* =========================================================
   35. FOCUS
========================================================= */

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

    outline-offset: 3px;
}


/* =========================================================
   36. SCREEN ANIMATION
========================================================= */

@keyframes lessonSoftAppear {

    from {
        opacity: 0;

        transform:
            translateY(10px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}

.lesson-screen.active-screen .lesson-panel {
    animation:
        lessonSoftAppear
        0.32s ease both;
}


/* =========================================================
   37. TROPHY
========================================================= */

@keyframes trophyFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-2deg);
    }

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

}

.finish-trophy {
    animation:
        trophyFloat
        3.2s ease-in-out infinite;
}


/* =========================================================
   38. TABLET
========================================================= */

@media (max-width: 1000px) {

    .mini-town-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .final-town-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   39. SMALL TABLET
========================================================= */

@media (max-width: 850px) {

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

    .town-action-list {
        grid-template-columns: 1fr;
    }

    .town-pattern-grid {
        grid-template-columns: 1fr;
    }

    .town-pattern-card {
        min-height: 230px;
    }

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

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

    .final-town-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


/* =========================================================
   40. MOBILE
========================================================= */

@media (max-width: 680px) {

    .town-vocabulary-grid,
    .activity-options,
    .external-games-grid,
    .final-result-grid,
    .game-options,
    .workspace-options {
        grid-template-columns: 1fr;
    }


    .town-action-row {
        grid-template-columns:
            55px 1fr;
    }


    .mini-town-grid {
        padding: 15px;

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

        gap: 10px;
    }


    .mini-town-place {
        min-height: 135px;
    }


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


    .practice-level {
        grid-template-columns:
            36px 43px 1fr;
    }


    .practice-level .level-status {
        grid-column: 3;

        width: fit-content;
    }


    .external-game-card {
        grid-template-columns:
            48px 1fr;
    }


    .external-arrow {
        display: none;
    }


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


    .game-status-bar {
        align-items: flex-start;

        flex-direction: column;
    }


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


    .town-memory-rule,
    .final-rule-card,
    .important-note,
    .golden-tip,
    .video-tip-card {
        align-items: flex-start;
    }


    .achievement-toast {
        right: 16px;

        bottom: 16px;
    }

}


/* =========================================================
   41. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .mini-town-grid {
        grid-template-columns: 1fr;
    }


    .checkpoint-town-grid {
        grid-template-columns: 1fr;
    }


    .final-town-grid {
        grid-template-columns: 1fr;
    }


    .town-word-icon {
        font-size: 44px;
    }


    .town-question-icon {
        font-size: 45px;
    }


    .badge-row {
        gap: 7px;
    }


    .badge-row i {
        width: 38px;

        height: 38px;
    }


    .practice-level {
        padding:
            13px 12px;

        gap: 9px;
    }


    .level-copy strong {
        font-size: 13px;
    }


    .level-copy small {
        font-size: 10px;
    }


    .finish-achievement {
        align-items: flex-start;

        text-align: left;
    }

}


/* =========================================================
   42. REDUCED MOTION
========================================================= */

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

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

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}