/* Guna lesson activity shell */

.duo-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.lesson-viewer.lesson-viewer--duo {
    --lesson-green: #11802b;
    --lesson-green-deep: #0c5c1f;
    --lesson-gold: #e3a008;
    --lesson-gold-deep: #c48906;
    --lesson-red: #c00000;
    --lesson-cream: #fff8ed;
    --lesson-ink: #12261a;
    --lesson-muted: #3d5a45;
    max-width: 580px;
    margin: 0 auto;
    padding: 0;
    background:
        linear-gradient(180deg, rgba(255, 248, 237, 0.96), rgba(238, 246, 240, 0.96));
    border-radius: 22px;
    box-shadow: 0 18px 40px rgba(12, 92, 31, 0.12);
    min-height: min(100vh, 900px);
    display: flex;
    flex-direction: column;
    overflow: visible;
    border: 1px solid rgba(17, 128, 43, 0.16);
    position: relative;
}

.lesson-viewer.lesson-viewer--duo::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    border-radius: 22px 22px 0 0;
    z-index: 6;
    background: repeating-linear-gradient(
        90deg,
        #c00000 0 12px,
        #e3a008 12px 24px,
        #11802b 24px 36px,
        #0973a1 36px 48px
    );
}

.duo-topbar {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 1.1rem 0.65rem;
    position: sticky;
    top: 0;
    z-index: 5;
    background: rgba(255, 248, 237, 0.94);
    backdrop-filter: blur(8px);
    border-radius: 22px 22px 0 0;
}

.duo-close {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    color: #6a8a74;
    font-size: 1.5rem;
    font-weight: 800;
    cursor: pointer;
    line-height: 1;
    border-radius: 10px;
}

.duo-close:hover {
    background: rgba(17, 128, 43, 0.1);
    color: #0c5c1f;
}

.duo-progress-track {
    height: 14px;
    border-radius: 999px;
    background: #e4efe6;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(12, 92, 31, 0.12);
}

.duo-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: linear-gradient(90deg, #e3a008, #11802b);
    transition: width 0.35s ease;
}

.lesson-burba,
.duo-hearts {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 800;
    color: #0c5c1f;
    font-size: 1.05rem;
    min-width: 3.4rem;
    justify-content: flex-end;
    background: none;
    border: 0;
    padding: 0.2rem 0.15rem;
    cursor: pointer;
    font-family: inherit;
}

.lesson-burba:hover,
.lesson-burba:focus-visible {
    transform: scale(1.06);
}

.lesson-burba__icon,
.duo-hearts .duo-heart-icon {
    width: 28px;
    height: 28px;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(9, 115, 161, 0.28));
}

.lesson-burba.is-empty {
    opacity: 0.62;
    filter: grayscale(0.25);
}

.lesson-burba.is-hit {
    animation: burbaHit 0.55s ease;
}

.lesson-viewer--duo .lives-warning-banner {
    margin: 1.15rem 1rem 0;
    border-radius: 12px;
}

@keyframes burbaHit {
    0%, 100% { transform: scale(1) rotate(0); }
    25% { transform: scale(1.18) rotate(-10deg); }
    55% { transform: scale(1.08) rotate(8deg); }
}

.duo-body {
    flex: 1;
    padding: 0.5rem 1.25rem 1rem;
    display: flex;
    flex-direction: column;
    overflow: visible;
}

.duo-prompt-title {
    font-family: 'Baloo 2', sans-serif;
    font-size: 1.45rem;
    font-weight: 800;
    color: #0c5c1f;
    margin: 0.4rem 0 1.25rem;
    letter-spacing: -0.02em;
}

.duo-mascot-row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    position: relative;
    padding-right: 6.5rem;
    min-height: 108px;
    overflow: visible;
}

.lesson-soggy,
.lesson-viewer--duo .duo-mascot-row > img.duo-mascot {
    position: absolute;
    right: 0;
    top: 8px;
    width: 96px;
    height: auto;
    flex-shrink: 0;
    z-index: 3;
    pointer-events: none;
    animation: lessonSoggyFloat 2.8s ease-in-out infinite;
    filter: drop-shadow(0 10px 14px rgba(61, 31, 10, 0.22));
    transform-origin: 50% 80%;
}

.lesson-soggy img {
    width: 100%;
    height: auto;
    display: block;
    pointer-events: none;
}

@keyframes lessonSoggyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.duo-bubble {
    position: relative;
    background: #fffef9;
    border: 2px solid #e3a008;
    border-radius: 16px;
    padding: 0.9rem 1rem;
    color: #12261a;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;
    max-width: 100%;
    flex: 1;
    box-shadow: 0 6px 16px rgba(227, 160, 8, 0.12);
}

.duo-bubble::before {
    content: "";
    position: absolute;
    right: -9px;
    top: 28px;
    width: 16px;
    height: 16px;
    background: #fffef9;
    border-right: 2px solid #e3a008;
    border-bottom: 2px solid #e3a008;
    transform: rotate(-45deg);
}

.duo-answer-bank {
    min-height: 64px;
    border-bottom: 2px dashed rgba(17, 128, 43, 0.22);
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    align-content: flex-start;
    padding: 0.35rem 0 1rem;
    margin-bottom: 1.25rem;
}

.duo-answer-bank:empty::after {
    content: "";
    display: block;
    width: 100%;
    height: 2.5rem;
}

.duo-chips,
.quiz-options.duo-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: center;
    margin-top: auto;
    padding: 0.5rem 0 1rem;
}

.duo-chip,
.quiz-option.duo-chip {
    appearance: none;
    border: 2px solid #d7e6d8;
    background: #fffef9;
    color: #12261a;
    border-radius: 12px;
    padding: 0.7rem 1rem;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    box-shadow: 0 3px 0 #c9dccb;
    transition: transform 0.1s, background 0.15s, border-color 0.15s;
}

.duo-chip:hover,
.quiz-option.duo-chip:hover {
    background: #eef6f0;
    border-color: #11802b;
}

.duo-chip.selected,
.quiz-option.duo-chip.selected {
    border-color: #e3a008;
    background: #fff4d4;
    color: #0c5c1f;
    box-shadow: 0 3px 0 #c48906;
}

.duo-chip.correct,
.quiz-option.duo-chip.correct {
    border-color: #11802b;
    background: #e8f6ec;
    color: #0c5c1f;
    box-shadow: 0 3px 0 #0c5c1f;
}

.duo-chip.incorrect,
.quiz-option.duo-chip.incorrect {
    border-color: #c00000;
    background: #fdecec;
    color: #9a0000;
    box-shadow: 0 3px 0 #c00000;
}

.duo-chip.used {
    visibility: hidden;
}

.duo-footer {
    position: sticky;
    bottom: 0;
    padding: 1rem 1.25rem 1.35rem;
    background: rgba(255, 248, 237, 0.96);
    border-top: 3px solid transparent;
    border-image: repeating-linear-gradient(
        90deg,
        #c00000 0 10px,
        #e3a008 10px 20px,
        #11802b 20px 30px,
        #0973a1 30px 40px
    ) 1;
    margin-top: auto;
    border-radius: 0 0 22px 22px;
}

.duo-check-btn {
    width: 100%;
    border: none;
    border-radius: 14px;
    padding: 0.95rem 1rem;
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    background: #dce8de;
    color: #6a8a74;
    box-shadow: 0 4px 0 #c3d2c5;
    font-family: 'Baloo 2', sans-serif;
}

.duo-check-btn.is-ready {
    background: linear-gradient(180deg, #e3a008, #c48906);
    color: #fff;
    box-shadow: 0 4px 0 #9a6c05;
}

.duo-check-btn.is-ready:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 #9a6c05;
}

.duo-check-btn.is-continue {
    background: linear-gradient(180deg, #11802b, #0c5c1f);
    color: #fff;
    box-shadow: 0 4px 0 #094a19;
}

.duo-feedback-banner {
    display: none;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    margin-bottom: 0.85rem;
    font-weight: 800;
}

.duo-feedback-banner.show {
    display: block;
}

.duo-feedback-banner.correct {
    background: #e8f6ec;
    color: #0c5c1f;
}

.duo-feedback-banner.incorrect {
    background: #fdecec;
    color: #9a0000;
}

/* Hide classic chrome inside duo mode */
.lesson-viewer--duo .lesson-header,
.lesson-viewer--duo .section-navigation,
.lesson-viewer--duo .navigation-buttons,
.lesson-viewer--duo .activity-progress-bar,
.lesson-viewer--duo .activity-nav,
.lesson-viewer--duo .continue-lesson-btn,
.lesson-viewer--duo-lite .continue-lesson-btn,
.lesson-viewer--duo .retry-quiz-btn,
.lesson-viewer--duo-lite .navigation-buttons,
.lesson-viewer--duo-lite .section-navigation {
    display: none !important;
}

.lesson-viewer--duo .section-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.lesson-viewer--duo .interactive-section,
.lesson-viewer--duo .conversation-section,
.lesson-viewer--duo .pronunciation-section,
.lesson-viewer--duo .flashcard-deck,
.lesson-viewer--duo .memory-game-exercise {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border: none;
}

.lesson-viewer--duo .interactive-section > h3,
.lesson-viewer--duo .interactive-section > p,
.lesson-viewer--duo .conversation-section > h3,
.lesson-viewer--duo .conversation-section > p,
.lesson-viewer--duo .memory-game-exercise > h3,
.lesson-viewer--duo .memory-game-exercise > p,
.lesson-viewer--duo .pronunciation-section > h3,
.lesson-viewer--duo .pronunciation-section > p {
    display: none;
}

.lesson-viewer--duo .quiz-question h4 {
    display: none;
}

.lesson-viewer--duo .quiz-feedback {
    display: none !important;
}

.lesson-viewer--duo .matching-exercise .check-matching-btn,
.lesson-viewer--duo .drag-drop-exercise .check-drag-btn {
    display: none;
}

/* Learning / intro sections keep light duo topbar only */
.lesson-viewer--duo-lite {
    max-width: 720px;
    margin: 0 auto;
    background: #fff8ed;
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(12, 92, 31, 0.1);
    overflow: hidden;
    border: 1px solid rgba(17, 128, 43, 0.14);
}

.lesson-viewer--duo-lite .duo-topbar {
    border-bottom: 1px solid #f0f0f0;
}

.lesson-viewer--duo-lite .section-content {
    padding: 1.25rem 1.5rem 1.75rem;
}

.lesson-viewer--duo-lite .section-navigation {
    display: none;
}

.lesson-viewer--duo-lite .lesson-header {
    display: none;
}

.lesson-section-label {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6a8a74;
    margin-bottom: 0.35rem;
}

.lesson-viewer--duo .quiz-question,
.lesson-viewer--duo .quiz-question:hover {
    background: rgba(255, 254, 249, 0.72);
    box-shadow: none;
    border: 2px solid rgba(17, 128, 43, 0.18);
    border-radius: 18px;
    transform: none;
    padding: 1rem 0.85rem 0.35rem;
    margin-bottom: 0;
    overflow: visible;
}

.lesson-viewer--duo .quiz-option:hover {
    background: #eef6f0;
    color: inherit;
    transform: none;
}

.lesson-viewer--duo .quiz-option:hover::before {
    display: none;
}

/* Fix paged screens visibility */
.interactive-section[data-paged="true"] .lesson-activity-screen.active,
.conversation-section[data-paged="true"] .lesson-activity-screen.active {
    display: block !important;
}

body.dark-mode .lesson-viewer.lesson-viewer--duo,
body.dark-mode .lesson-viewer--duo-lite,
html[data-theme="dark"] .lesson-viewer.lesson-viewer--duo,
html[data-theme="dark"] .lesson-viewer--duo-lite {
    background: #12261a;
    color: #F3FBF5;
}

body.dark-mode .duo-topbar,
body.dark-mode .duo-footer,
html[data-theme="dark"] .duo-topbar,
html[data-theme="dark"] .duo-footer {
    background: #12261a;
    border-color: #163222;
}

body.dark-mode .duo-prompt-title,
html[data-theme="dark"] .duo-prompt-title {
    color: #F3FBF5;
}

body.dark-mode .duo-bubble,
html[data-theme="dark"] .duo-bubble {
    background: #1a3324;
    border-color: #e3a008;
    color: #F3FBF5;
}

body.dark-mode .duo-bubble::before,
html[data-theme="dark"] .duo-bubble::before {
    background: #1a3324;
    border-color: #e3a008;
}

body.dark-mode .duo-chip,
body.dark-mode .quiz-option.duo-chip,
html[data-theme="dark"] .duo-chip,
html[data-theme="dark"] .quiz-option.duo-chip {
    background: #1a3324;
    border-color: #2a4a35;
    color: #F3FBF5;
    box-shadow: 0 2px 0 #2a4a35;
}

body.dark-mode .lesson-burba,
html[data-theme="dark"] .lesson-burba {
    color: #b7f06a;
}


/* Vocabulary modules */
.vocab-modules {
    display: grid;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
}

.vocab-module-card {
    background: #fff;
    border: 2px solid #e8efe6;
    border-radius: 18px;
    padding: 1rem 1.1rem 1.15rem;
    box-shadow: 0 8px 22px rgba(17, 128, 43, 0.06);
}

.vocab-module-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.vocab-module-head h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 800;
    color: #0c5c1f;
}

.vocab-module-head span {
    font-size: 0.8rem;
    font-weight: 700;
    color: #89a08d;
}

.vocab-module-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.vocab-cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 2px solid #e5e5e5;
    background: #fff;
    border-radius: 999px;
    padding: 0.55rem 0.9rem;
    font-weight: 700;
    cursor: pointer;
    color: #4b4b4b;
    transition: 0.15s ease;
}

.vocab-cat-btn .vocab-cat-count {
    background: #f0f0f0;
    border-radius: 999px;
    padding: 0.1rem 0.45rem;
    font-size: 0.75rem;
    color: #777;
}

.vocab-cat-btn.active {
    border-color: #11802b;
    background: #e8f6ec;
    color: #0c5c1f;
    box-shadow: 0 3px 0 #0c5c1f;
}

.vocab-cat-btn:hover {
    border-color: #b7e88a;
}

.vocab-active-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: linear-gradient(90deg, rgba(88, 204, 2, 0.12), rgba(28, 176, 246, 0.1));
    border: 1px solid rgba(88, 204, 2, 0.25);
    font-weight: 800;
    color: #0c5c1f;
}

body.dark-mode .vocab-module-card,
html[data-theme="dark"] .vocab-module-card {
    background: #12261a;
    border-color: #163222;
}

body.dark-mode .vocab-module-head h3,
body.dark-mode .vocab-active-banner,
html[data-theme="dark"] .vocab-module-head h3,
html[data-theme="dark"] .vocab-active-banner {
    color: #b7f06a;
}

body.dark-mode .vocab-cat-btn,
html[data-theme="dark"] .vocab-cat-btn {
    background: #1a3324;
    border-color: #2a4a35;
    color: #F3FBF5;
}

body.dark-mode .vocab-cat-btn.active,
html[data-theme="dark"] .vocab-cat-btn.active {
    background: rgba(88, 204, 2, 0.2);
    border-color: #58cc02;
    color: #b7f06a;
}

@media (max-width: 640px) {
    .lesson-soggy,
    .lesson-viewer--duo .duo-mascot-row > img.duo-mascot {
        width: 78px;
    }

    .duo-mascot-row {
        padding-right: 5.25rem;
        min-height: 92px;
    }

    .duo-prompt-title {
        font-size: 1.25rem;
    }
}