.elementor-5368 .elementor-element.elementor-element-1fbfdc0{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5368 .elementor-element.elementor-element-166f3ed{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5368 .elementor-element.elementor-element-b29ad50{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5368 .elementor-element.elementor-element-fcf582b{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-5368 .elementor-element.elementor-element-08052b5{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}/* Start custom CSS for text-editor, class: .elementor-element-ef7d966 */<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Quicksand:wght@700&display=swap');

.mastery-quiz-container {
    font-family: 'Quicksand', sans-serif;
    max-width: 700px;
    margin: 30px auto;
    background: #E3F2FD;
    padding: 30px;
    border-radius: 40px;
    border: 8px solid #1E88E5;
}

.story-box {
    background: white;
    padding: 20px;
    border-radius: 25px;
    margin-bottom: 25px;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
}

/* Image Hint Styles */
.hint-image-row {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 10px;
    background: #fdfdfd;
    padding: 10px;
    border-radius: 15px;
}

.hint-img-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

.emoji-hint { font-size: 30px; }
.hint-img-wrapper small { font-size: 10px; color: #1E88E5; font-weight: bold; text-transform: uppercase; margin-top: 5px; }

.mini-divider { border: none; height: 2px; background: #f0f0f0; margin: 20px 0; }

.sentence {
    font-size: 19px;
    color: #333;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.drop-target {
    display: inline-block;
    min-width: 55px;
    height: 35px;
    border: 2px dashed #90CAF9;
    border-radius: 10px;
    background: #fafafa;
    text-align: center;
    line-height: 35px;
    color: #bbb;
    transition: 0.3s;
}

.word-bank-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    background: white;
    padding: 20px;
    border-radius: 20px;
}

.drag-word {
    background: #1E88E5;
    color: white;
    padding: 10px;
    border-radius: 12px;
    cursor: grab;
    font-family: 'Fredoka One', cursive;
    text-align: center;
    font-size: 15px;
    box-shadow: 0 4px 0 #1565C0;
}

.feedback-msg { margin-top: 20px; height: 30px; font-weight: bold; font-size: 18px; text-align: center; }

@media (max-width: 500px) {
    .word-bank-grid { grid-template-columns: repeat(3, 1fr); }
    .emoji-hint { font-size: 22px; }
}
</style>/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-62e8c63 */<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Quicksand:wght@700&display=swap');

.balloon-game-container {
    font-family: 'Quicksand', sans-serif;
    max-width: 600px;
    margin: 20px auto;
    background: #FFF0F5;
    padding: 25px;
    border-radius: 40px;
    border: 8px solid #E91E63;
    overflow: hidden;
    position: relative;
}

.game-stage { position: relative; height: 500px; }

/* Stats Bar */
.game-stats { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.progress-bar-wrap { width: 70%; height: 12px; background: #f8bbd0; border-radius: 10px; overflow: hidden; }
.progress-fill { height: 100%; background: #E91E63; transition: width 0.5s ease; }
#score-text { font-weight: bold; color: #E91E63; }

/* Question Box */
.question-display {
    background: white;
    padding: 15px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    z-index: 10;
    position: relative;
}
.q-hint-emoji { font-size: 40px; }
.sentence-text { font-size: 22px; font-weight: bold; color: #333; margin-top: 5px; }
.blank { color: #E91E63; text-decoration: underline; }

/* Balloon Area */
.balloon-area { position: relative; height: 350px; width: 100%; overflow: hidden; }

.balloon {
    position: absolute;
    bottom: -100px;
    width: 80px;
    height: 100px;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: 'Fredoka One', cursive;
    font-size: 18px;
    cursor: pointer;
    box-shadow: inset -10px -10px 0 rgba(0,0,0,0.1);
    animation: floatUp linear infinite;
}

@keyframes floatUp {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-150px) rotate(5deg); }
    100% { transform: translateY(-450px) rotate(-5deg); }
}

.color-1 { background: #FF5252; }
.color-2 { background: #448AFF; }
.color-3 { background: #FFC107; }

.pop { transform: scale(1.5); opacity: 0; transition: 0.3s; pointer-events: none; }

.shake { animation: shake 0.5s; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-10px); }
    75% { transform: translateX(10px); }
}

/* Results */
.result-screen { text-align: center; padding: 40px 0; }
.medal { font-size: 80px; display: block; animation: bounce 1s infinite; }
.replay-btn {
    background: #E91E63; color: white; border: none; padding: 12px 30px;
    border-radius: 50px; font-family: 'Fredoka One'; cursor: pointer; margin-top: 20px;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}
</style>/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-da88f36 */<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Quicksand:wght@700&display=swap');

.article-challenge-container {
    font-family: 'Quicksand', sans-serif;
    max-width: 600px;
    margin: 20px auto;
    background: #E8EAF6;
    padding: 30px;
    border-radius: 40px;
    border: 6px solid #3F51B5;
}

.step-card {
    background: white;
    padding: 20px;
    border-radius: 25px;
    margin-bottom: 20px;
    text-align: center;
    border: 2px solid #C5CAE9;
    transition: 0.3s;
}

.step-card.disabled {
    opacity: 0.4;
    pointer-events: none;
    filter: grayscale(1);
}

.step-badge {
    background: #3F51B5;
    color: white;
    display: inline-block;
    padding: 5px 15px;
    border-radius: 50px;
    font-size: 12px;
    margin-bottom: 15px;
}

.step-image { font-size: 50px; margin-bottom: 10px; }
.step-context { font-size: 15px; color: #666; margin-bottom: 15px; }

.options-wrap {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.opt-btn {
    background: white;
    border: 2px solid #3F51B5;
    color: #3F51B5;
    padding: 10px 15px;
    border-radius: 15px;
    font-family: 'Quicksand', sans-serif;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.opt-btn:hover { background: #3F51B5; color: white; }

.fb-text { margin-top: 10px; height: 20px; font-weight: bold; }

.final-trophy {
    text-align: center;
    margin-top: 20px;
    animation: popIn 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.final-trophy span { font-size: 50px; display: block; }
.final-trophy p { color: #3F51B5; font-weight: bold; }

@keyframes popIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
</style>/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-6e2a924 */<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Quicksand:wght@700&display=swap');

.articles-assessment-container {
    font-family: 'Quicksand', sans-serif;
    max-width: 550px;
    margin: 20px auto;
    background: #E3F2FD;
    padding: 30px;
    border-radius: 40px;
    border: 6px solid #1E88E5;
}

.progress-container {
    width: 100%; height: 10px; background: #BBDEFB;
    border-radius: 10px; margin-bottom: 25px; overflow: hidden;
}

.progress-fill { height: 100%; background: #1E88E5; transition: width 0.4s ease; }

.assessment-card {
    background: white; padding: 25px; border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05); text-align: center;
}

.assess-emoji { font-size: 60px; margin-bottom: 15px; }

.assess-text-style { font-size: 20px; font-weight: bold; color: #0D47A1; margin-bottom: 5px; }

.angle-hint { font-size: 13px; color: #64B5F6; font-style: italic; margin-bottom: 25px; }

.options-grid { display: flex; gap: 15px; justify-content: center; }

.assess-btn {
    padding: 12px 40px; border: none; border-radius: 15px;
    background: #1E88E5; color: white; font-family: 'Fredoka One', cursive;
    font-size: 18px; cursor: pointer; transition: 0.2s;
    box-shadow: 0 4px 0 #1565C0;
}

.assess-btn:active { transform: translateY(4px); box-shadow: none; }

.assess-feedback { margin-top: 15px; height: 25px; font-weight: bold; }

.finish-wrap span { font-size: 80px; display: block; animation: rotate 2s linear infinite; }
@keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.restart-btn {
    margin-top: 20px; padding: 10px 25px; background: #0D47A1;
    color: white; border: none; border-radius: 50px; cursor: pointer;
}
</style>/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-02cf65e */<style>
@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Quicksand:wght@700&display=swap');

.adventure-map-container {
    font-family: 'Quicksand', sans-serif;
    max-width: 700px;
    margin: 20px auto;
    background: #E0F2F1;
    padding: 25px;
    border-radius: 40px;
    border: 6px solid #009688;
    position: relative;
}

.map-stage {
    height: 300px;
    background: #fff;
    border-radius: 25px;
    position: relative;
    border-bottom: 8px solid #81C784;
    overflow: hidden;
}

.explorer-sprite {
    position: absolute;
    bottom: 20px;
    left: 10%;
    font-size: 50px;
    transition: all 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: 10;
}

.spot {
    position: absolute;
    bottom: 30px;
    font-size: 40px;
    text-align: center;
    line-height: 1;
}
.spot small { font-size: 10px; font-weight: bold; color: #999; }
.home { left: 10%; }
.school { right: 10%; }

.task-card {
    position: absolute;
    top: 20px;
    left: 10%;
    right: 10%;
    background: rgba(255,255,255,0.9);
    padding: 15px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.choice-row { display: flex; gap: 10px; justify-content: center; margin-top: 10px; }
.choice-btn {
    background: #009688; color: white; border: none; padding: 8px 15px;
    border-radius: 50px; cursor: pointer; font-family: 'Fredoka One';
}

.inventory-bar {
    margin-top: 20px; background: #fff; padding: 10px; border-radius: 15px;
    display: flex; align-items: center; gap: 15px; border: 2px solid #009688;
}
.items-list { font-size: 24px; }

/* Animations */
.shake { animation: shake 0.5s; }
@keyframes shake { 0%, 100% {transform:translateX(0);} 25% {transform:translateX(-10px);} 75% {transform:translateX(10px);} }

.jump { animation: jump 0.5s; }
@keyframes jump { 0%, 100% {bottom:20px;} 50% {bottom:60px;} }

.end-screen { text-align: center; padding: 50px 0; }
.end-screen span { font-size: 80px; display: block; }
.replay-btn { background: #FF5722; color: white; border: none; padding: 10px 20px; border-radius: 50px; cursor: pointer; }
</style>/* End custom CSS */