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


/* =========================================================
   GRADE 4 — LESSON 3
   CAN & MAY
========================================================= */


/* =========================================================
   1. LESSON 3 BACKGROUND
========================================================= */

.can-may-body {

    --cm-dark: #4f3b78;
    --cm-main: #7557a6;
    --cm-medium: #8968bb;
    --cm-light: #b49adb;
    --cm-soft: #e5d9f3;
    --cm-pale: #f5f0fa;

    background:
        radial-gradient(
            circle at 9% 9%,
            rgba(176, 146, 216, 0.26),
            transparent 25%
        ),
        radial-gradient(
            circle at 91% 15%,
            rgba(211, 191, 236, 0.25),
            transparent 27%
        ),
        radial-gradient(
            circle at 50% 85%,
            rgba(223, 207, 242, 0.20),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #faf8fd 0%,
            #fefcff 47%,
            #f7f3fb 100%
        );
}


/* =========================================================
   2. INTRO ICON
========================================================= */

.can-may-body .intro-sun {

    background:
        linear-gradient(
            145deg,
            #e8dcf4,
            #cdb7e7
        );

    color: #4f3b78;

    box-shadow:
        0 14px 28px
        rgba(88, 62, 123, 0.14);
}


/* =========================================================
   3. CAN / MAY INTRO COMPARISON
========================================================= */

.can-may-comparison {

    width: 100%;

    margin-top: 28px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        55px
        minmax(0, 1fr);

    align-items: center;

    gap: 15px;
}


.can-may-side {

    min-height: 225px;

    padding:
        24px 18px;

    border:
        1px solid
        rgba(125, 94, 169, 0.14);

    border-radius: 25px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    box-shadow:
        0 10px 24px
        rgba(79, 55, 112, 0.07);
}


.can-may-side > span {

    margin-bottom: 12px;

    font-size: 46px;
}


.can-may-side small {

    margin-bottom: 10px;

    color: #8968bb;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.13em;
}


.can-may-side strong {

    color: #4f3b78;

    font-size: 19px;

    line-height: 1.4;
}


.can-may-side p {

    margin:
        8px 0 0;

    color: #81748f;

    font-size: 13px;

    line-height: 1.5;
}


.can-side {

    background:
        linear-gradient(
            145deg,
            #fffefe,
            #f5f0fa
        );
}


.may-side {

    background:
        linear-gradient(
            145deg,
            #f9f5fd,
            #e9def5
        );

    border-color:
        rgba(125, 94, 169, 0.22);
}


.can-may-arrow {

    color: #8968bb;

    font-size: 31px;

    font-weight: 900;

    text-align: center;
}


/* =========================================================
   4. CAN — ABILITY CARD
========================================================= */

.ability-card {

    width: 100%;

    margin-top: 29px;

    padding:
        25px 22px;

    border:
        1px solid
        rgba(125, 94, 169, 0.14);

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #fefcff,
            #eee5f7
        );

    box-shadow:
        0 11px 25px
        rgba(79, 55, 112, 0.07);
}


.ability-card-top {

    display: flex;

    align-items: center;

    gap: 17px;

    margin-bottom: 22px;
}


.ability-card-icon {

    flex: 0 0 70px;

    width: 70px;

    height: 70px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #dfd1ef,
            #f4eef9
        );

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 35px;
}


.ability-card-text {

    flex: 1;
}


.ability-card-text small {

    display: block;

    margin-bottom: 5px;

    color: #8968bb;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.12em;
}


.ability-card-text strong {

    display: block;

    color: #4f3b78;

    font-size: 20px;
}


.ability-card-text p {

    margin:
        6px 0 0;

    color: #81748f;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   5. CAN FORMULA
========================================================= */

.can-formula {

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(100px, 1fr)
        35px
        85px
        35px
        minmax(110px, 1fr);

    align-items: center;

    gap: 10px;
}


.formula-piece {

    min-height: 82px;

    padding: 13px;

    border-radius: 18px;

    background: #ffffff;

    border:
        1px solid
        rgba(125, 94, 169, 0.13);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    box-shadow:
        0 6px 16px
        rgba(79, 55, 112, 0.05);
}


.formula-piece strong {

    color: #4f3b78;

    font-size: 18px;

    font-weight: 900;
}


.formula-piece small {

    margin-top: 5px;

    color: #81748f;

    font-size: 11px;
}


.formula-can {

    background:
        linear-gradient(
            145deg,
            #dfd1ef,
            #f1e9f8
        );
}


.formula-can strong {

    color: #60478d;
}


.formula-plus {

    color: #8968bb;

    font-size: 23px;

    font-weight: 900;

    text-align: center;
}


/* =========================================================
   6. CAN / CAN'T EXAMPLES
========================================================= */

.can-example-grid {

    width: 100%;

    margin-top: 22px;

    display: grid;

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

    gap: 13px;
}


.can-example-card {

    min-height: 160px;

    padding:
        20px 14px;

    border:
        1px solid
        rgba(125, 94, 169, 0.13);

    border-radius: 21px;

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

    box-shadow:
        0 8px 19px
        rgba(79, 55, 112, 0.055);

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

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


.can-example-card:hover {

    transform:
        translateY(-3px);

    box-shadow:
        0 12px 24px
        rgba(79, 55, 112, 0.10);
}


.can-example-card > span {

    margin-bottom: 10px;

    font-size: 34px;
}


.can-example-card strong {

    color: #4f3b78;

    font-size: 17px;

    line-height: 1.45;
}


.can-example-card p {

    margin:
        7px 0 0;

    color: #81748f;

    font-size: 12px;

    line-height: 1.5;
}


/* =========================================================
   7. IMPORTANT RULE
========================================================= */

.important-rule {

    width: 100%;

    margin-top: 23px;

    padding:
        19px 20px;

    border:
        1px solid
        rgba(125, 94, 169, 0.14);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #fdfbff,
            #eee5f7
        );

    display: flex;

    align-items: center;

    gap: 17px;

    box-shadow:
        0 9px 21px
        rgba(79, 55, 112, 0.06);
}


.important-rule > span {

    flex: 0 0 55px;

    width: 55px;

    height: 55px;

    border-radius: 17px;

    background: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 27px;

    box-shadow:
        0 5px 13px
        rgba(79, 55, 112, 0.05);
}


.important-rule > div {

    flex: 1;
}


.important-rule strong {

    display: block;

    margin-bottom: 5px;

    color: #4f3b78;

    font-size: 17px;
}


.important-rule p {

    margin: 3px 0;

    color: #756b80;

    font-size: 13px;

    line-height: 1.55;
}


.important-rule b {

    color: #60478d;
}


/* =========================================================
   8. WRONG / CORRECT
========================================================= */

.wrong-example-card,
.correct-example-card {

    width: 100%;

    margin-top: 12px;

    padding:
        16px 20px;

    display: flex;

    align-items: center;

    gap: 15px;

    border-radius: 18px;
}


.wrong-example-card {

    border:
        1px solid
        rgba(203, 91, 105, 0.18);

    background: #fff4f5;
}


.correct-example-card {

    border:
        1px solid
        rgba(71, 159, 112, 0.18);

    background: #f1faf5;
}


.wrong-example-card > span,
.correct-example-card > span {

    flex: 0 0 39px;

    width: 39px;

    height: 39px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    font-size: 18px;

    font-weight: 900;
}


.wrong-example-card > span {

    background: #f8dfe2;

    color: #b65360;
}


.correct-example-card > span {

    background: #dcefe4;

    color: #397c58;
}


.wrong-example-card div,
.correct-example-card div {

    display: flex;

    flex-direction: column;
}


.wrong-example-card small,
.correct-example-card small {

    margin-bottom: 2px;

    color: #8a7d91;

    font-size: 10px;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.08em;
}


.wrong-example-card strong {

    color: #a84e5b;

    font-size: 17px;
}


.correct-example-card strong {

    color: #397c58;

    font-size: 17px;
}


/* =========================================================
   9. QUESTIONS WITH CAN
========================================================= */

.question-builder {

    width: 100%;

    margin-top: 28px;

    padding:
        24px 22px;

    border:
        1px solid
        rgba(125, 94, 169, 0.14);

    border-radius: 25px;

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

    box-shadow:
        0 10px 23px
        rgba(79, 55, 112, 0.07);
}


.question-formula {

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 10px;
}


.question-formula span {

    padding:
        10px 14px;

    border-radius: 14px;

    background: #eee5f7;

    color: #7557a6;

    font-size: 13px;

    font-weight: 900;
}


.question-formula b {

    color: #b49adb;

    font-size: 20px;
}


.question-example {

    margin-top: 17px;

    padding:
        16px 18px;

    border-radius: 17px;

    background: #ffffff;

    color: #4f3b78;

    text-align: center;

    font-size: 18px;

    font-weight: 900;

    box-shadow:
        0 6px 16px
        rgba(79, 55, 112, 0.05);
}


/* =========================================================
   10. MAY INTRO
========================================================= */

.may-intro-card {

    width: 100%;

    margin-top: 27px;

    padding:
        25px 24px;

    border:
        1px solid
        rgba(125, 94, 169, 0.16);

    border-radius: 25px;

    background:
        linear-gradient(
            145deg,
            #f6f0fb,
            #e8dcf4
        );

    display: flex;

    align-items: center;

    gap: 22px;

    box-shadow:
        0 10px 25px
        rgba(79, 59, 120, 0.07);
}


.may-intro-icon {

    flex: 0 0 76px;

    width: 76px;

    height: 76px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 23px;

    background:
        linear-gradient(
            145deg,
            #cdb7e7,
            #eadff5
        );

    font-size: 38px;

    box-shadow:
        0 8px 19px
        rgba(79, 59, 120, 0.10);
}


.may-intro-content {

    flex: 1;
}


.may-intro-content small {

    display: block;

    margin-bottom: 7px;

    color: #60478d;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.12em;
}


.may-intro-content h3 {

    margin:
        0 0 7px;

    color: #4f3b78;

    font-size: 21px;

    line-height: 1.25;
}


.may-intro-content p {

    margin:
        4px 0 0;

    color: #756b80;

    font-size: 14px;

    line-height: 1.65;
}


.may-intro-content strong {

    color: #60478d;
}


/* =========================================================
   11. CAN I / MAY I DIFFERENCE
========================================================= */

.permission-grid {

    width: 100%;

    margin-top: 28px;

    display: grid;

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

    gap: 15px;
}


.permission-card {

    min-height: 235px;

    padding:
        25px 18px 22px;

    border:
        1px solid
        rgba(125, 94, 169, 0.14);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #fefcff,
            #eee5f7
        );

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    box-shadow:
        0 10px 23px
        rgba(79, 55, 112, 0.07);

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


.permission-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 29px
        rgba(79, 55, 112, 0.11);
}


.permission-card > span {

    width: 70px;

    height: 70px;

    margin-bottom: 15px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #dfd1ef,
            #f4eef9
        );

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 35px;
}


.permission-card strong {

    color: #4f3b78;

    font-size: 18px;
}


.permission-card p {

    margin:
        8px 0 0;

    color: #81748f;

    font-size: 13px;

    line-height: 1.5;
}


.permission-card.may-permission {

    border-color:
        rgba(125, 94, 169, 0.22);

    background:
        linear-gradient(
            145deg,
            #f5effa,
            #e7daf4
        );
}


/* =========================================================
   12. POLITENESS SCALE
========================================================= */

.politeness-scale {

    width: 100%;

    margin-top: 23px;

    padding:
        20px 22px;

    border:
        1px solid
        rgba(125, 94, 169, 0.14);

    border-radius: 22px;

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

    box-shadow:
        0 9px 21px
        rgba(79, 55, 112, 0.06);
}


.politeness-line {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        60px
        minmax(0, 1fr);

    align-items: center;

    gap: 12px;
}


.politeness-option {

    min-height: 80px;

    padding: 13px;

    border-radius: 17px;

    background: #ffffff;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    box-shadow:
        0 5px 14px
        rgba(79, 55, 112, 0.05);
}


.politeness-option strong {

    color: #4f3b78;

    font-size: 16px;
}


.politeness-option small {

    margin-top: 5px;

    color: #81748f;

    font-size: 11px;
}


.politeness-arrow {

    color: #8968bb;

    font-size: 25px;

    font-weight: 900;

    text-align: center;
}


/* =========================================================
   13. REMEMBER CARD
========================================================= */

.remember-card {

    width: 100%;

    margin-top: 24px;

    padding:
        20px 22px;

    display: flex;

    align-items: flex-start;

    gap: 17px;

    border:
        1px solid
        rgba(117, 87, 166, 0.16);

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #f5effa,
            #e8dcf4
        );

    box-shadow:
        0 8px 20px
        rgba(79, 59, 120, 0.06);
}


.remember-card > span {

    flex: 0 0 52px;

    width: 52px;

    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 17px;

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

    font-size: 27px;
}


.remember-card > div {

    flex: 1;
}


.remember-card strong {

    display: block;

    margin-bottom: 7px;

    color: #4f3b78;

    font-size: 17px;
}


.remember-card p {

    margin:
        4px 0;

    color: #756b80;

    font-size: 13px;

    line-height: 1.55;
}


.remember-card b {

    color: #60478d;
}


/* =========================================================
   14. ACTIVITY PANELS
========================================================= */

.can-may-body .activity-panel {

    position: relative;
}


.can-may-body .activity-progress {

    background:
        linear-gradient(
            145deg,
            #eee5f7,
            #e5d8f3
        );

    color: #60478d;
}


.can-may-body .activity-question-icon {

    background:
        linear-gradient(
            145deg,
            #dfd1ef,
            #f6f1fa
        );

    color: #4f3b78;
}


/* =========================================================
   15. ACTIVITY OPTIONS
========================================================= */

.can-may-body .activity-option {

    border-color:
        rgba(125, 94, 169, 0.15);

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

    color: #5f4a79;
}


.can-may-body
.activity-option:hover:not(:disabled) {

    border-color:
        rgba(125, 94, 169, 0.32);

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

    transform:
        translateY(-2px);
}


.can-may-body
.activity-option.correct {

    border-color:
        rgba(64, 167, 112, 0.30);

    background: #eaf8f0;

    color: #2f7650;
}


.can-may-body
.activity-option.wrong {

    border-color:
        rgba(205, 92, 105, 0.27);

    background: #fff0f2;

    color: #a94f5b;
}


/* =========================================================
   16. LISTENING
========================================================= */

.listening-illustration {

    width: 105px;

    height: 105px;

    margin:
        27px auto 10px;

    border-radius: 32px;

    background:
        linear-gradient(
            145deg,
            #ded0ee,
            #f6f1fa
        );

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 55px;

    box-shadow:
        0 13px 27px
        rgba(79, 55, 112, 0.09);

    animation:
        listeningFloat
        3s ease-in-out infinite;
}


@keyframes listeningFloat {

    0%,
    100% {

        transform:
            translateY(0);
    }

    50% {

        transform:
            translateY(-5px);
    }
}


/* =========================================================
   17. VIDEO
========================================================= */

.can-may-body .video-frame {

    background:
        linear-gradient(
            145deg,
            #f4eef9,
            #dfd0ef
        );
}


.can-may-body .video-placeholder {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #4f3b78,
            #8968bb
        );
}


.can-may-body
.video-placeholder::before {

    content: "CAN";

    position: absolute;

    top: 18px;

    right: 22px;

    color:
        rgba(255, 255, 255, 0.10);

    font-size: 40px;

    font-weight: 900;

    letter-spacing: 0.08em;

    transform:
        rotate(4deg);
}


.can-may-body
.video-placeholder::after {

    content: "MAY";

    position: absolute;

    bottom: 15px;

    left: 25px;

    color:
        rgba(255, 255, 255, 0.10);

    font-size: 44px;

    font-weight: 900;

    transform:
        rotate(-6deg);
}


/* =========================================================
   18. EXTERNAL GAMES
========================================================= */

.can-may-body .external-game-card {

    position: relative;

    overflow: hidden;
}


.can-may-body
.external-game-card::after {

    content: "";

    position: absolute;

    width: 80px;

    height: 80px;

    right: -35px;

    bottom: -35px;

    border-radius: 50%;

    background:
        rgba(137, 104, 187, 0.07);
}


.can-may-body
.external-game-icon {

    background:
        linear-gradient(
            145deg,
            #dac9ec,
            #f4eef9
        );
}


/* =========================================================
   19. CAN & MAY ADVENTURE MAP
========================================================= */

.can-may-body .adventure-map {

    position: relative;
}


.can-may-body
.adventure-map::before {

    content: "";

    position: absolute;

    top: 45px;

    bottom: 45px;

    left: 45px;

    width: 3px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #d4c1e9,
            #eee5f7
        );

    z-index: 0;
}


.can-may-body .map-level {

    position: relative;

    z-index: 1;
}


.can-may-body
.map-level.unlocked {

    border-color:
        rgba(137, 104, 187, 0.30);

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


.can-may-body
.map-level.completed {

    border-color:
        rgba(70, 158, 108, 0.22);

    background:
        linear-gradient(
            145deg,
            #f4fbf7,
            #e7f5ed
        );
}


.can-may-body .level-icon {

    background:
        linear-gradient(
            145deg,
            #dfd1ef,
            #f5f0fa
        );

    box-shadow:
        0 6px 15px
        rgba(79, 55, 112, 0.06);
}


/* =========================================================
   20. MAP GAME
========================================================= */

.can-may-body
.map-game-level-label {

    background:
        linear-gradient(
            145deg,
            #eee5f7,
            #e3d6f1
        );

    color: #60478d;
}


/* =========================================================
   21. FINAL REVIEW
========================================================= */

.can-may-final-grid {

    width: 100%;

    margin-top: 28px;

    display: grid;

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

    gap: 15px;
}


.can-may-final-card {

    min-height: 225px;

    padding:
        22px 16px;

    border:
        1px solid
        rgba(125, 94, 169, 0.14);

    border-radius: 24px;

    background:
        linear-gradient(
            145deg,
            #fefcff,
            #eee5f7
        );

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    box-shadow:
        0 10px 23px
        rgba(79, 55, 112, 0.07);

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


.can-may-final-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        0 15px 29px
        rgba(79, 55, 112, 0.11);
}


.can-may-final-card > span {

    width: 70px;

    height: 70px;

    margin-bottom: 15px;

    border-radius: 22px;

    background:
        linear-gradient(
            145deg,
            #dfd1ef,
            #f5f0fa
        );

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 36px;
}


.can-may-final-card strong {

    color: #4f3b78;

    font-size: 18px;
}


.can-may-final-card p {

    margin:
        8px 0 0;

    color: #81748f;

    font-size: 13px;

    line-height: 1.5;
}


/* =========================================================
   22. FINAL EXAMPLE
========================================================= */

.final-example-card {

    width: 100%;

    margin-top: 20px;

    padding:
        22px 20px;

    border:
        1px solid
        rgba(125, 94, 169, 0.14);

    border-radius: 23px;

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

    display: grid;

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

    align-items: center;

    gap: 12px;

    box-shadow:
        0 9px 21px
        rgba(79, 55, 112, 0.06);
}


.final-example-card > span {

    padding:
        7px 10px;

    border-radius: 10px;

    background: #e8ddf4;

    color: #7557a6;

    font-size: 10px;

    font-weight: 900;

    letter-spacing: 0.08em;
}


.final-example-card > strong {

    color: #4f3b78;

    font-size: 15px;

    line-height: 1.4;
}


.final-example-card > b {

    color: #8968bb;

    font-size: 23px;

    text-align: center;
}


/* =========================================================
   23. COMPLETION
========================================================= */

.can-may-body
.completion-trophy {

    background:
        linear-gradient(
            145deg,
            #ddcdef,
            #f7f2fb
        );

    animation:
        trophyArrival
        0.65s ease both;
}


@keyframes trophyArrival {

    0% {

        transform:
            scale(0.6)
            rotate(-10deg);

        opacity: 0;
    }

    70% {

        transform:
            scale(1.08)
            rotate(3deg);

        opacity: 1;
    }

    100% {

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


.can-may-body
.achievement-card {

    background:
        linear-gradient(
            145deg,
            #fdfbff,
            #e8dcf4
        );
}


.can-may-body
.achievement-icon {

    background:
        linear-gradient(
            145deg,
            #d8c5eb,
            #f4eef9
        );
}


/* =========================================================
   24. LESSON ANIMATION
========================================================= */

@keyframes canMayAppear {

    0% {

        transform:
            translateY(8px)
            scale(0.98);

        opacity: 0;
    }

    100% {

        transform:
            translateY(0)
            scale(1);

        opacity: 1;
    }
}


.can-may-body
.lesson-screen.active-screen
.lesson-panel {

    animation:
        canMayAppear
        0.32s ease both;
}


/* =========================================================
   25. SPEAK BUTTONS
========================================================= */

.can-may-body .speak-button {

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


.can-may-body
.speak-button:hover {

    transform:
        scale(1.06);
}


.can-may-body
.speak-button.speaking {

    animation:
        canMaySpeakPulse
        0.8s ease-in-out infinite;
}


@keyframes canMaySpeakPulse {

    0%,
    100% {

        transform:
            scale(1);
    }

    50% {

        transform:
            scale(1.08);
    }
}


/* =========================================================
   26. RESPONSIVE — TABLET
========================================================= */

@media (max-width: 900px) {

    .can-formula {

        grid-template-columns:
            1fr 30px 80px;

        grid-template-areas:
            "subject plus1 can"
            "plus2 plus2 plus2"
            "verb verb verb";
    }


    .can-example-grid {

        grid-template-columns:
            1fr;
    }


    .can-example-card {

        min-height: 150px;
    }


    .permission-grid {

        grid-template-columns:
            1fr;
    }


    .permission-card {

        min-height: 190px;
    }


    .can-may-final-grid {

        grid-template-columns:
            1fr;
    }


    .can-may-final-card {

        min-height: 190px;
    }


    .final-example-card {

        grid-template-columns:
            auto 1fr;

        text-align: left;
    }


    .final-example-card > b {

        grid-column:
            1 / -1;

        transform:
            rotate(90deg);
    }
}


/* =========================================================
   27. RESPONSIVE — MOBILE
========================================================= */

@media (max-width: 650px) {

    .can-may-comparison {

        grid-template-columns:
            1fr;

        gap: 10px;
    }


    .can-may-arrow {

        transform:
            rotate(90deg);

        font-size: 27px;
    }


    .can-may-side {

        min-height: 190px;
    }


    .ability-card {

        padding:
            19px 15px;
    }


    .ability-card-top {

        flex-direction: column;

        text-align: center;
    }


    .may-intro-card {

        flex-direction: column;

        text-align: center;
    }


    .politeness-line {

        grid-template-columns:
            1fr;
    }


    .politeness-arrow {

        transform:
            rotate(90deg);
    }


    .important-rule {

        align-items: flex-start;
    }


    .question-formula {

        flex-direction: column;
    }


    .question-formula b {

        transform:
            rotate(90deg);
    }


    .listening-illustration {

        width: 90px;

        height: 90px;

        font-size: 47px;
    }


    .can-may-body
    .adventure-map::before {

        left: 37px;
    }
}


/* =========================================================
   28. VERY SMALL SCREENS
========================================================= */

@media (max-width: 420px) {

    .can-formula {

        display: flex;

        flex-direction: column;
    }


    .formula-piece {

        width: 100%;

        min-height: 80px;
    }


    .formula-plus {

        transform:
            rotate(90deg);
    }


    .permission-card {

        min-height: 180px;
    }


    .can-may-final-card {

        min-height: 180px;
    }


    .final-example-card {

        grid-template-columns:
            1fr;

        text-align: center;
    }


    .final-example-card > b {

        grid-column: auto;

        transform:
            rotate(90deg);
    }


    .remember-card {

        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    .important-rule {

        flex-direction: column;

        align-items: center;

        text-align: center;
    }


    .can-may-body
    .adventure-map::before {

        display: none;
    }
}