/* Custom CSS voor Echt Koreaans E-Learning Platform - Optimized Cards, Typography & Mobile Architecture */

/* ================================================== */
/* 0. Globale Schaal & Typografie Boost              */
/* ================================================== */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

body {
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    font-size: 1rem;
    line-height: 1.6;
    color: #252724;
    background-color: #FBF8F1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    touch-action: manipulation;
}

/* Inzoomen mag (WCAG 1.4.4). iOS Safari zoomt automatisch in op invoervelden kleiner dan 16px;
   daarom op telefoons alle tekstvelden minimaal 16px. */
@media (max-width: 767px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="button"]):not([type="submit"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* Responsieve typografie zonder overkoepelende !important overrides die micro-ui breken */
h1 { font-size: clamp(1.5rem, 4vw, 2.25rem); font-weight: 800; }
h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; }
h3 { font-size: clamp(1.1rem, 2.5vw, 1.35rem); font-weight: 700; }

/* Dynamic Viewport main area padding to prevent bottom nav collision on mobile */
main {
    padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)) !important;
}
@media (min-width: 768px) {
    main {
        padding-bottom: 2.5rem !important;
    }
}

/* ================================================== */
/* 1. Grote Leesbare Hoofdstukteksten                */
/* ================================================== */
#reader-content {
    font-size: 1.15rem;
    line-height: 1.8;
    overflow-wrap: break-word;
    word-break: normal;
    max-width: 100%;
}

#reader-content p {
    font-size: 1.15rem !important;
    line-height: 1.8 !important;
    margin-bottom: 1.1rem !important;
}

#reader-content ul, 
#reader-content ol {
    font-size: 1.15rem !important;
    margin-top: 0.75rem !important;
    margin-bottom: 1.1rem !important;
}

#reader-content li {
    font-size: 1.15rem !important;
    line-height: 1.75 !important;
    margin-bottom: 0.5rem !important;
}

#reader-content h1 { font-size: 2.3rem !important; font-weight: 800 !important; color: #252724 !important; margin-bottom: 1rem !important; }
#reader-content h2 { font-size: 1.75rem !important; font-weight: 800 !important; color: #252724 !important; margin-top: 1.75rem !important; margin-bottom: 0.85rem !important; }
#reader-content h3 { font-size: 1.35rem !important; font-weight: 800 !important; color: #252724 !important; margin-top: 1.85rem !important; margin-bottom: 0.75rem !important; }

/* ================================================== */
/* 2. KOREAANSE WOORD-PILLS (Nieuwe Branding)         */
/* ================================================== */
.korean-word {
    display: inline-block;
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 700;
    font-size: 1.08em; /* Optische correctie: Hangul perfect in balans met Nederlands */
    color: #252724;
    background-color: #FBF8F1;
    padding: 0.15rem 0.42rem;
    border-radius: 0.375rem;
    border-bottom: 2px solid #e2ddd3;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    user-select: none;
    white-space: nowrap; /* Woorden breken nooit meer doormidden */
    word-break: keep-all;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    line-height: inherit;
    touch-action: manipulation;
    vertical-align: baseline;
}

.korean-word:hover,
.korean-word:active {
    background-color: #e2ddd3;
    color: #252724 !important;
    border-bottom-color: #252724;
    box-shadow: 0 2px 8px rgba(37, 39, 36, 0.15);
}

.dark .korean-word {
    background-color: rgba(226, 221, 211, 0.12) !important;
    color: #FBF8F1 !important;
    border-bottom: 2px solid #BDC3C8 !important;
}

.dark .korean-word:hover,
.dark .korean-word:active {
    background-color: #e2ddd3 !important;
    color: #252724 !important;
    border-bottom-color: #FBF8F1 !important;
    box-shadow: 0 0 12px rgba(226, 221, 211, 0.25) !important;
}

/* Toetsenbordfocus (WCAG 2.4.7): duidelijke rand op woorden, denkpauzes en knoppen */
.korean-word:focus-visible,
.spoiler-tag:focus-visible,
#korean-word-popover button:focus-visible {
    outline: 3px solid #F7BB4C;
    outline-offset: 2px;
    border-radius: 0.375rem;
}

/* Reddit Spoiler Maskering voor Koreaanse Woorden */
.spoiler-tag:not(.revealed) .korean-word {
    visibility: hidden; /* ziet er hetzelfde uit (al transparant), maar is niet te focussen en wordt niet voorgelezen */
    background-color: transparent !important;
    color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* Subtiele Audio Puls Animatie */
@keyframes pulseAudio {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(37, 39, 36, 0.4);
        transform: scale(1.02);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(37, 39, 36, 0);
        transform: scale(1);
    }
}

.korean-word.speaking, 
.btn-audio.speaking {
    background-color: #252724 !important;
    color: #FBF8F1 !important;
    border-color: #0369a1 !important;
    pointer-events: none !important;
    animation: pulseAudio 1.2s infinite ease-in-out !important;
}

/* Gespreksregels met zachte herkenning: Man (#252724) & Vrouw (#C96532) */
.dialogue-male {
    border-left: 3px solid #252724 !important;
}
.dialogue-female {
    border-left: 3px solid #C96532 !important;
}

.nav-btn.active {
    background-color: #252724 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 39, 36, 0.25) !important;
}
.dark .nav-btn.active {
    background-color: #252724 !important;
    color: #ffffff !important;
}
.mobile-nav-btn.active {
    color: #252724 !important;
}
.dark .mobile-nav-btn.active {
    color: #e2ddd3 !important;
}

/* ================================================== */
/* 3. Progressieve Evaluatie Blokken & Kaarten        */
/* ================================================== */
.block-container {
    transition: all 0.2s ease-in-out;
    padding: 1.6rem 1.8rem !important;
    border-radius: 1.25rem !important;
    margin: 1.5rem 0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
}

.block-container.status-easy {
    border-left: 6px solid #c6d13b !important;
    background-color: rgba(198, 209, 59, 0.12) !important;
}

.block-container.status-medium {
    border-left: 6px solid #F7BB4C !important;
    background-color: rgba(247, 187, 76, 0.12) !important;
}

.block-container.status-eli5 {
    border-left: 6px solid #BDC3C8 !important;
    background-color: rgba(189, 195, 200, 0.18) !important;
}

.block-feedback-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem !important;
    padding-top: 1.1rem !important;
    border-top: 1px dashed #e2ddd3;
}

/* ================================================== */
/* 4. Grammatica & Cultuur Callout Boxes              */
/* ================================================== */
.note-advanced,
.note-culture {
    padding: 1.5rem 1.75rem;
    border-radius: 0 1rem 1rem 0;
    margin: 1.5rem 0;
    font-size: 1.05rem;
}

.note-advanced {
    border-left: 6px solid #BDC3C8;
    background-color: #f1f3f5;
}

/* ================================================== */
/* UNIFORME HOOFDTITELS VAN ALLE LESBLOKKEN           */
/* (Tekst, Grammatica, Dialoog, Niveau-demo, etc.)    */
/* ================================================== */
#reader-content .note-advanced-title,
#reader-content .note-culture-title,
#reader-content .dialogue-module-container > h3,
#reader-content .dialogue-module-container > h3 *,
#reader-content .level-demo-container > h4,
#reader-content .level-demo-container > h4 *,
#reader-content .block-container:not(.note-advanced):not(.note-culture) h3:first-child,
#reader-content .block-container:not(.note-advanced):not(.note-culture) h2:first-child {
    font-size: 1.45rem !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    letter-spacing: -0.015em !important;
    margin-top: 0 !important;
    margin-bottom: 0.85rem !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
    color: #252724 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.dark #reader-content .note-advanced-title,
.dark #reader-content .note-culture-title,
.dark #reader-content .dialogue-module-container > h3,
.dark #reader-content .dialogue-module-container > h3 *,
.dark #reader-content .level-demo-container > h4,
.dark #reader-content .level-demo-container > h4 *,
.dark #reader-content .block-container:not(.note-advanced):not(.note-culture) h3:first-child,
.dark #reader-content .block-container:not(.note-advanced):not(.note-culture) h2:first-child {
    color: #FBF8F1 !important;
}

.note-culture {
    border-left: 6px solid #F7BB4C;
    background-color: #fef9ee;
}

/* Subkoppen binnen kaders: krachtig, herkenbaar en met royale ademruimte */
#reader-content .note-advanced h3,
#reader-content .note-culture h3,
#reader-content .block-container:not(.note-advanced):not(.note-culture) .text-slate-800 h3:not(:first-child) {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em;
    margin-top: 2.25rem !important;
    margin-bottom: 0.65rem !important;
    color: #252724 !important;
}

.dark #reader-content .note-advanced h3,
.dark #reader-content .note-culture h3,
.dark #reader-content .block-container:not(.note-advanced):not(.note-culture) .text-slate-800 h3:not(:first-child) {
    color: #f8fafc !important;
}

/* Mobiele optimalisatie voor kaders, openingstitels en subkoppen */
@media (max-width: 767px) {
    #reader-content .note-advanced-title,
    #reader-content .note-culture-title,
    #reader-content .dialogue-module-container > h3,
    #reader-content .dialogue-module-container > h3 *,
    #reader-content .level-demo-container > h4,
    #reader-content .level-demo-container > h4 *,
    #reader-content .block-container:not(.note-advanced):not(.note-culture) h3:first-child,
    #reader-content .block-container:not(.note-advanced):not(.note-culture) h2:first-child {
        font-size: 1.3rem !important;
        margin-bottom: 0.75rem !important;
    }
    #reader-content .note-advanced h3,
    #reader-content .note-culture h3,
    #reader-content .block-container:not(.note-advanced):not(.note-culture) .text-slate-800 h3:not(:first-child) {
        font-size: 1.18rem !important;
        margin-top: 1.75rem !important;
        margin-bottom: 0.5rem !important;
    }
}

/* ================================================== */
/* 5. Custom Extra Drawers                            */
/* ================================================== */
.extra-drawer {
    transition: all 0.25s ease-in-out;
    padding: 1.35rem;
    border-radius: 1rem;
    font-size: 1.05rem;
}

.drawer-medium {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.drawer-eli5 {
    background-color: #eef2ff;
    border: 1px solid #c7d2fe;
    color: #3730a3;
}

/* ================================================== */
/* 6. Header, Sidebar & Topbar Controls               */
/* ================================================== */
header {
    padding-top: max(0.5rem, env(safe-area-inset-top)) !important;
    padding-bottom: 0.65rem !important;
}

/* Subtiele, evenwichtige typografie voor form-controls zonder knopteksten op te blazen */
header select, 
header input[type="range"] {
    font-size: 0.85rem;
}

#logo-btn {
    font-size: 1.05rem !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Garandeer dat Uitloggen op mobiel nooit over de rand valt */
@media (max-width: 639px) {
    #btn-logout {
        display: none !important;
    }
}

.nav-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.35rem;
    border-radius: 0.85rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: #475569;
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.nav-btn:hover {
    background-color: rgba(226, 221, 211, 0.45);
    color: #252724;
    transform: translateX(3px);
}

.nav-btn.active {
    background-color: #252724 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 39, 36, 0.25) !important;
}

.nav-icon {
    font-size: 1.35rem;
}

/* Studietip Widget in sidebar */
#tip-widget {
    padding: 1.1rem !important;
    border-radius: 1rem !important;
}

#tip-widget * {
    font-size: 0.925rem !important;
    line-height: 1.5 !important;
}

#tip-widget .font-bold {
    font-size: 0.95rem !important;
}

#tip-counter {
    font-size: 0.85rem !important;
}

/* ================================================== */
/* 7. Dashboard Kaarten & Statistieken                */
/* ================================================== */
.stat-number, .text-4xl {
    font-size: 2.75rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.stat-label {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
}

.roadmap-card, .chapter-card {
    padding: 1.25rem 1.5rem !important;
    border-radius: 1rem !important;
    transition: all 0.2s ease-in-out !important;
}

.roadmap-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06) !important;
}

/* ================================================== */
/* 8. Hangul SVG Karakters & Schrijfoefening Canvas    */
/* ================================================== */
.stroke-img {
    width: 5.5rem !important;
    height: 5.5rem !important;
    max-width: 100%;
    object-fit: contain;
    margin: 0.25rem auto;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
    transition: transform 0.2s ease, filter 0.2s ease;
}

.stroke-img:hover {
    transform: scale(1.08);
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.15));
}

.hangul-card, .character-card {
    padding: 1rem !important;
    border-radius: 1.15rem !important;
    min-height: 11rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease-in-out !important;
    position: relative;
}

.hangul-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08) !important;
}

/* Highlight voor actieve schrijfkaart */
.hangul-card.active-drawing {
    border-color: #252724 !important;
    box-shadow: 0 10px 25px -5px rgba(37, 39, 36, 0.25) !important;
    transform: scale(1.02) !important;
    z-index: 20;
}
.dark .hangul-card.active-drawing {
    border-color: #BDC3C8 !important;
    box-shadow: 0 10px 25px -5px rgba(189, 195, 200, 0.25) !important;
}

/* Verberg statische previewtekst & afbeeldingen wanneer een kaart actief wordt */
.hangul-card.active-drawing .default-preview {
    display: none !important;
}

/* Score 100% Zoom & Glow Animatie */
@keyframes scorePopFade {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.25);
        opacity: 1;
        filter: drop-shadow(0 0 22px rgba(16, 185, 129, 0.95));
    }
    75% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.1);
        opacity: 0;
    }
}

.score-badge-anim {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: scorePopFade 1.5s ease-out forwards;
    pointer-events: none;
    z-index: 30;
    font-weight: 900;
    white-space: nowrap;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hangul-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #0f172a;
    margin-top: 0.5rem;
}

.hangul-subtext {
    font-size: 0.95rem !important;
    color: #64748b;
    line-height: 1.4;
}

#hangul-container div.rounded-xl,
#hangul-container div.rounded-2xl,
#hangul-container .badge,
#hangul-container span.rounded-full,
#hangul-container span.rounded-lg,
#hangul-container span.rounded-md {
    font-size: 0.95rem !important;
    padding: 0.35rem 0.75rem !important;
}

#hangul-container p,
#hangul-container span,
#hangul-container div {
    font-size: 1rem;
}

#hangul-container .font-mono {
    font-size: 1.05rem !important;
}

/* ================================================== */
/* 9. Dialogen & Flitskaarten                         */
/* ================================================== */
.dialogue-line {
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.1rem 1.35rem;
    border-radius: 1rem;
    margin-bottom: 0.85rem;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    font-size: 1rem;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: keep-all;
}

.dialogue-speaker {
    font-weight: 700;
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.perspective-1000 {
    perspective: 1000px;
}

.flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.flashcard.flipped .flashcard-inner {
    transform: rotateY(180deg);
}

.flashcard-front, 
.flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 1.25rem;
    padding: 2.25rem;
}

.flashcard-back {
    transform: rotateY(180deg);
}

/* De kant die je niet ziet vangt geen tikken op. Safari (WebKit) kijkt bij een tik niet naar
   backface-visibility, waardoor de verborgen achterkant de knoppen op de voorkant afdekte. */
.flashcard:not(.flipped) .flashcard-back,
.flashcard.flipped .flashcard-front {
    pointer-events: none;
}

/* ================================================== */
/* 10. MOBIELE ADAPTIE & BOTTOM NAV STYLING          */
/* ================================================== */
.mobile-nav-btn.active {
    color: #252724 !important;
}
.dark .mobile-nav-btn.active {
    color: #FBF8F1 !important;
}

/* Landscape-modus op mobiel (korte schermhoogte < 500px) */
@media (max-height: 500px) {
    header {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    aside {
        padding: 0.5rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    .nav-btn {
        padding: 0.4rem 0.75rem !important;
        font-size: 0.85rem !important;
    }
    #tip-widget {
        margin-top: 0.75rem !important;
        padding: 0.75rem !important;
    }
}

/* Ruime onder-padding op mobiel zodat de allerlaatste knop/tekst ruim boven de onderbalk blijft */
main {
    padding-bottom: calc(8rem + env(safe-area-inset-bottom, 32px)) !important;
    -webkit-overflow-scrolling: touch;
}
@media (min-width: 768px) {
    main {
        padding-bottom: 3rem !important;
    }
}

/* Strakke links-boven uitlijning voor quiz-opties bij meerregelige tekst (Fix voor mobiel optie B) */
.btn-quiz-option, .btn-q-opt {
    display: flex !important;
    align-items: flex-start !important;
    text-align: left !important;
}

@media (max-width: 767px) {
    #reader-content {
        padding: 0.85rem !important;
    }

    .block-container {
        padding: 1rem 0.85rem !important;
        margin: 1rem 0 !important;
    }

    /* Royale ademruimte binnen paarse en amberkleurige kaders op mobiel */
    .note-advanced,
    .note-culture {
        padding: 1rem 0.85rem !important;
        margin: 0.85rem 0 !important;
    }

    .block-feedback-bar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.6rem !important;
    }

    .block-feedback-bar > div,
    .block-feedback-bar button {
        width: 100% !important;
        justify-content: center !important;
        min-height: 44px;
    }

    .korean-word {
        padding: 0.25rem 0.5rem !important;
        font-size: 1rem !important;
    }
}

/* ================================================== */
/* Dark Mode Comprehensive Theme Overrides            */
/* ================================================== */
.dark body {
    background-color: #020617;
    color: #f8fafc;
}

.dark select option {
    background-color: #0f172a;
    color: #f8fafc;
}

.dark aside {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
}

.dark .nav-btn {
    color: #94a3b8;
}

.dark .nav-btn:hover {
    background-color: #1e293b;
    color: #f8fafc;
}

.dark .nav-btn.active {
    background-color: #252724 !important;
    color: #ffffff !important;
    border: 1px solid #BDC3C8 !important;
}

/* Reader Content Surface */
.dark #reader-content {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
}

.dark #reader-content h1,
.dark #reader-content h2,
.dark #reader-content h3 {
    color: #f8fafc !important;
}

.dark #reader-content p,
.dark #reader-content li {
    color: #cbd5e1 !important;
}

/* Kaarten & Inhoudsblokken */
.dark .block-container,
.dark .roadmap-card,
.dark .hangul-card,
.dark .character-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
}

.dark .block-container.status-easy {
    background-color: rgba(6, 78, 59, 0.3) !important;
    border-left-color: #10b981 !important;
}

.dark .block-container.status-medium {
    background-color: rgba(120, 53, 15, 0.3) !important;
    border-left-color: #f59e0b !important;
}

.dark .block-container.status-eli5 {
    background-color: rgba(49, 46, 129, 0.3) !important;
    border-left-color: #6366f1 !important;
}

/* Koreaanse Woord Pills Dark Mode (Warm Hanji met zilveren rand) */
.dark .korean-word {
    background-color: rgba(226, 221, 211, 0.12) !important;
    color: #FBF8F1 !important;
    border-bottom: 2px solid #BDC3C8 !important;
}

.dark .korean-word:hover,
.dark .korean-word:active {
    background-color: #e2ddd3 !important;
    color: #252724 !important;
    border-bottom-color: #FBF8F1 !important;
    box-shadow: 0 0 12px rgba(226, 221, 211, 0.25) !important;
}

/* Gespreksregels */
.dark .dialogue-line {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}

.dark .dialogue-speaker {
    color: #94a3b8 !important;
}

/* Inverteert zwarte SVG karakters naar wit */
.dark .stroke-img {
    filter: invert(0.92) brightness(1.8) drop-shadow(0 2px 5px rgba(255, 255, 255, 0.15)) !important;
}

/* Callout kaders Dark Mode (Hanja-zilver #BDC3C8 en Amber #F7BB4C) */
.dark .note-advanced {
    background-color: rgba(189, 195, 200, 0.1) !important;
    color: #e2e8f0 !important;
    border-left-color: #BDC3C8 !important;
}

.dark .note-advanced-title {
    color: #FBF8F1 !important;
}

.dark .note-culture {
    background-color: rgba(247, 187, 76, 0.1) !important;
    color: #fef08a !important;
    border-left-color: #F7BB4C !important;
}

.dark .note-culture-title {
    color: #F7BB4C !important;
}

/* Extra Drawers */
.dark .drawer-medium {
    background-color: rgba(247, 187, 76, 0.1) !important;
    border-color: rgba(247, 187, 76, 0.3) !important;
    color: #fef08a !important;
}

.dark .drawer-eli5 {
    background-color: rgba(189, 195, 200, 0.1) !important;
    border-color: rgba(189, 195, 200, 0.3) !important;
    color: #e2e8f0 !important;
}

/* Quiz & Woordenboek Extra Styling */
.dark .btn-quiz-option {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

.dark .btn-quiz-option:hover {
    background-color: #334155 !important;
    border-color: #0284c7 !important;
}

.dark .flashcard-front {
    background-color: #0f172a !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
}

.dark .flashcard-back {
    background-color: #020617 !important;
    border-color: #1e293b !important;
    color: #f8fafc !important;
}

/* ================================================== */
/* 11. LEGO-POPOVER & GRAMMATICA BREAKDOWN TOOLTIP    */
/* ================================================== */
#korean-word-popover {
    position: fixed !important;
    z-index: 100 !important;
    max-width: 360px !important;
    width: calc(100vw - 24px) !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 1.25rem !important;
    box-shadow: 0 20px 35px -5px rgba(15, 23, 42, 0.25), 0 0 1px 1px rgba(15, 23, 42, 0.08) !important;
    pointer-events: auto !important;
    opacity: 0;
    overflow: visible !important;
    transform: scale(0.96);
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1), transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

#korean-word-popover.active {
    opacity: 1 !important;
    transform: scale(1) !important;
}

.dark #korean-word-popover {
    background-color: #0f172a !important;
    border-color: #334155 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7), 0 0 1px 1px rgba(255, 255, 255, 0.08) !important;
}

/* Aanwijspijltje (Gesprekswolkje) */
.popover-arrow {
    position: absolute !important;
    width: 14px !important;
    height: 14px !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    transform: rotate(45deg) !important;
    left: var(--arrow-left, 50%) !important;
    margin-left: -7px !important;
    z-index: 10 !important;
}

.dark .popover-arrow {
    background-color: #0f172a !important;
    border-color: #334155 !important;
}

/* Wanneer popover BOVEN het woord staat: pijltje steekt onderaan uit en wijst omlaag */
#korean-word-popover.arrow-bottom .popover-arrow {
    bottom: -8px !important;
    top: auto !important;
    border-top: none !important;
    border-left: none !important;
}

/* Wanneer popover ONDER het woord staat: pijltje steekt bovenaan uit en wijst omhoog */
#korean-word-popover.arrow-top .popover-arrow {
    top: -8px !important;
    bottom: auto !important;
    border-bottom: none !important;
    border-right: none !important;
}

/* Telefoon: woordkaart als vel onderin beeld als hij niet naast het woord past (geen pijltje, wel een sluitknop) */
.popover-sheet-kop {
    display: none;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 40px;
    border-bottom: 1px solid #f1f5f9;
}

.dark .popover-sheet-kop {
    border-bottom-color: #1e293b;
}

.popover-sheet-greep {
    width: 40px;
    height: 5px;
    border-radius: 9999px;
    background-color: #cbd5e1;
}

.dark .popover-sheet-greep {
    background-color: #475569;
}

.btn-popover-sluit {
    position: absolute;
    right: 8px;
    top: 4px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    color: #475569;
    background-color: #f1f5f9;
    cursor: pointer;
}

.dark .btn-popover-sluit {
    color: #cbd5e1;
    background-color: #1e293b;
}

#korean-word-popover.is-mobile-sheet {
    max-width: none !important;
}

#korean-word-popover.is-mobile-sheet .popover-arrow {
    display: none !important;
}

#korean-word-popover.is-mobile-sheet .popover-sheet-kop {
    display: flex;
}

/* Het vel schuift een stukje omhoog in beeld in plaats van te groeien */
#korean-word-popover.is-mobile-sheet:not(.active) {
    transform: translateY(24px) !important;
}

/* Lego Blokjes Strip & Anti-Overlap Grid */
.popover-lego-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
    gap: 0.5rem;
    width: 100%;
}

.popover-lego-block {
    background: #FBF8F1;
    border: 1px solid #e2ddd3;
    border-radius: 0.75rem;
    padding: 0.4rem 0.35rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
    overflow: hidden;
}

.dark .popover-lego-block {
    background: #1e293b;
    border-color: #334155;
}

.popover-lego-tag {
    font-size: 0.65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #5a5e57;
    margin-bottom: 0.25rem;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.2;
}

.dark .popover-lego-tag {
    color: #c6d13b;
}

/* ================================================== */
/* 12. LEGO ZINSBOUW ("BOUW DE ZIN") BLOKKEN          */
/* ================================================== */
.word-order-block,
.btn-word-block,
.word-block-btn,
.word-order-slot,
.word-order-zone button,
button[data-word-block],
button[data-block] {
    font-family: 'Noto Sans KR', sans-serif !important;
    font-size: 1.15rem !important; /* Exact gelijk aan de Koreaanse woorden in de les */
    font-weight: 700 !important;
    line-height: 1.35 !important;
    padding: 0.5rem 1.1rem !important;
    border-radius: 0.85rem !important;
    min-height: 44px !important; /* Royale touch-hoogte voor mobiel en desktop */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    letter-spacing: normal !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease !important;
    user-select: none !important;
    cursor: pointer !important;
}

.word-order-block:hover,
.btn-word-block:hover,
.word-order-zone button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(37, 39, 36, 0.22) !important;
}

.word-order-block:active,
.btn-word-block:active,
.word-order-zone button:active {
    transform: translateY(0) scale(0.97) !important;
}

.dark .word-order-block,
.dark .btn-word-block,
.dark .word-order-zone button {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

/* =========================================================================
   Laadscherm (backlog U16, rustige versie): Goeri staat stil, drie puntjes lichten zacht op.
   De inhoud verschijnt pas na een fractie, zodat je bij snel laden alleen de rustige achtergrond ziet.
   Staat hier (in de head geladen) zodat het vanaf het eerste moment klopt; markup in index.php en app.js (initLoader).
   ========================================================================= */
.ek-loader { display: flex; flex-direction: column; align-items: center; gap: 16px; user-select: none; animation: ekLoaderIn 0.4s ease 0.35s both; }
.ek-loader-goeri {
    width: 72px; height: 72px; padding: 10px; border-radius: 22px;
    background: #ffffff; border: 1px solid #e2ddd3; box-shadow: 0 1px 3px rgba(37, 39, 36, 0.06);
}
.dark .ek-loader-goeri { background: #0f172a; border-color: #1e293b; }
.ek-loader-goeri img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; display: block; }
.ek-loader-punten { display: flex; gap: 6px; }
.ek-loader-punten i { display: block; width: 6px; height: 6px; border-radius: 50%; animation: ekLoaderPuls 1.8s ease-in-out infinite; }
.ek-loader-punten i:nth-child(1) { background: #c6d13b; }
.ek-loader-punten i:nth-child(2) { background: #F7BB4C; animation-delay: 0.25s; }
.ek-loader-punten i:nth-child(3) { background: #C96532; animation-delay: 0.5s; }
@keyframes ekLoaderIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes ekLoaderPuls { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }
@media (prefers-reduced-motion: reduce) {
    .ek-loader { animation: none; }
    .ek-loader-punten i { animation: none; opacity: 0.6; }
}

/* =========================================================================
   Dashboard (backlog U16, rustige versie)
   ========================================================================= */
/* Het woord om te proberen bij gasten (knop, bewust geen .korean-word) en de eigen eenvoudige kaart eronder */
.ek-proefwoord {
    font-size: 1.6rem; font-weight: 700; line-height: 1.3; color: #252724; cursor: pointer; flex: none;
    padding: 0.4rem 1.1rem; border-radius: 16px; background-color: #FBF8F1;
    border: 2px solid #c6d13b; border-bottom-width: 4px;
    transition: background-color 0.15s ease, transform 0.15s ease;
}
.ek-proefwoord:hover { background-color: #f4f6dc; }
.ek-proefwoord:active { transform: translateY(1px); }
.ek-proefwoord:focus-visible { outline: 3px solid #F7BB4C; outline-offset: 2px; }
.ek-proefwoord[aria-expanded="true"] { background-color: #f4f6dc; }
.dark .ek-proefwoord { color: #f8fafc; background-color: rgba(198, 209, 59, 0.1); }
.dark .ek-proefwoord:hover, .dark .ek-proefwoord[aria-expanded="true"] { background-color: rgba(198, 209, 59, 0.2); }

.ek-proefkaart {
    --pijl-links: 3.5rem;
    position: relative; margin-top: 18px; padding: 16px;
    background: #FBF8F1; border: 1px solid #e2ddd3; border-radius: 20px; text-align: left;
    animation: ekProefOpen 0.25s ease-out both;
}
.ek-proefkaart::before {
    content: ''; position: absolute; top: -8px; left: var(--pijl-links); width: 14px; height: 14px; margin-left: -7px;
    background: #FBF8F1; border-top: 1px solid #e2ddd3; border-left: 1px solid #e2ddd3; transform: rotate(45deg);
}
.dark .ek-proefkaart, .dark .ek-proefkaart::before { background: #1e293b; border-color: #334155; }
@keyframes ekProefOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ek-proefkaart { animation: none; } }
/* Op een smal scherm zakken de knoppen onder het woord (flex-wrap), zodat de uitspraak op één regel blijft */
.ek-proef-kop { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 12px; }
.ek-proef-woord { font-size: 1.35rem; font-weight: 700; line-height: 1.2; color: #252724; }
.ek-proef-fonetiek { font-family: ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: 12px; color: #7a7d74; margin-top: 3px; white-space: nowrap; }
.ek-proef-knoppen { display: flex; gap: 6px; flex: none; }
.ek-proef-knop {
    height: 32px; min-width: 32px; padding: 0 8px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: #ffffff; border: 1px solid #e2ddd3; color: #252724; cursor: pointer; font-size: 12px; font-weight: 700;
    transition: border-color 0.15s ease;
}
.ek-proef-knop:hover { border-color: #252724; }
.ek-proef-knop:focus-visible, .ek-proef-link:focus-visible { outline: 3px solid #F7BB4C; outline-offset: 2px; }
.ek-proef-betekenis { margin-top: 10px; font-weight: 700; font-size: 0.95rem; color: #252724; }
.ek-proef-blokken { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 8px; }
.ek-proef-blok {
    --blok-kleur: #c6d13b;
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; text-align: center;
    background: #ffffff; border: 1px solid #e2ddd3; border-top: 3px solid var(--blok-kleur); border-radius: 12px; min-width: 0;
}
.ek-proef-deel { font-size: 1.05rem; font-weight: 700; color: #252724; }
.ek-proef-uitleg { font-size: 11px; line-height: 1.35; color: #5f625b; overflow-wrap: anywhere; hyphens: auto; }
.ek-proef-slot { margin-top: 12px; font-size: 12px; color: #5f625b; line-height: 1.5; }
.ek-proef-link { font-weight: 700; color: #252724; text-decoration: underline; cursor: pointer; white-space: nowrap; }
.ek-proef-melding { font-size: 12px; color: #7a7d74; }
.dark .ek-proef-woord, .dark .ek-proef-betekenis, .dark .ek-proef-deel, .dark .ek-proef-link { color: #f8fafc; }
.dark .ek-proef-fonetiek, .dark .ek-proef-melding { color: #94a3b8; }
.dark .ek-proef-uitleg, .dark .ek-proef-slot { color: #cbd5e1; }
.dark .ek-proef-knop { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.dark .ek-proef-knop:hover { border-color: #94a3b8; }
.dark .ek-proef-blok { background: #0f172a; border-color: #334155; border-top-color: var(--blok-kleur); }

/* Alle lessen in groepjes (<details>): rustige lijst zonder kaartjes */
.ek-groep > summary {
    list-style: none; display: flex; align-items: center; gap: 12px;
    padding: 14px 4px; cursor: pointer; border-radius: 12px;
}
.ek-groep > summary::-webkit-details-marker { display: none; }
.ek-groep > summary:focus-visible { outline: 3px solid #F7BB4C; outline-offset: 2px; }
.ek-groep-pijl { width: 16px; flex: none; color: #9a9d94; transition: transform 0.2s ease; }
.ek-groep[open] .ek-groep-pijl { transform: rotate(90deg); }
.ek-groep-naam { display: block; font-weight: 700; font-size: 0.9rem; color: #252724; line-height: 1.3; }
.ek-groep-sub { display: block; font-size: 11px; color: #7a7d74; margin-top: 2px; }
.dark .ek-groep-naam { color: #f1f5f9; }
.dark .ek-groep-sub { color: #94a3b8; }
.ek-pil { flex: none; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.ek-pil-gratis { background: rgba(198, 209, 59, 0.28); color: #555b11; }
.ek-pil-klaar { background: #252724; color: #ffffff; }
.dark .ek-pil-gratis { background: rgba(198, 209, 59, 0.2); color: #d6df6a; }
.dark .ek-pil-klaar { background: #f1f5f9; color: #252724; }
/* Slotje bij een groep die alleen met een abonnement open is (uitleg in #dashboard-roadmap-toegang) */
.ek-groep-slot {
    flex: none; width: 26px; height: 26px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
    background: #f3efe6; color: #6b6e66;
}
.dark .ek-groep-slot { background: #1e293b; color: #94a3b8; }
.ek-groep-lessen { display: grid; gap: 2px; padding: 0 0 14px 28px; }
.ek-les {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    padding: 8px 10px; border-radius: 12px; font-size: 13px; color: #3f423c; cursor: pointer;
    background: transparent; border: 2px solid transparent; transition: background-color 0.15s ease;
}
.ek-les:hover { background-color: #FBF8F1; }
.ek-les:focus-visible { outline: 3px solid #F7BB4C; outline-offset: 1px; }
.ek-les.is-nu { background-color: #FBF8F1; border-color: #252724; font-weight: 700; color: #252724; }
.dark .ek-les { color: #cbd5e1; }
.dark .ek-les:hover { background-color: rgba(30, 41, 59, 0.7); }
.dark .ek-les.is-nu { background-color: rgba(30, 41, 59, 0.7); border-color: #94a3b8; color: #f8fafc; }
.ek-les-nr {
    min-width: 28px; height: 28px; padding: 0 6px; flex: none; border-radius: 9px; display: grid; place-items: center;
    font-size: 11px; font-weight: 800; background: #f3efe6; color: #5f625b;
}
.ek-les.is-af .ek-les-nr { background: #c6d13b; color: #252724; }
.ek-les.is-nu .ek-les-nr { background: #252724; color: #ffffff; }
.dark .ek-les-nr { background: #1e293b; color: #94a3b8; }
.dark .ek-les.is-nu .ek-les-nr { background: #f1f5f9; color: #252724; }
.ek-les-titel { flex: 1; min-width: 0; line-height: 1.35; }
.ek-les-tag { flex: none; font-size: 10px; font-weight: 800; color: #C96532; white-space: nowrap; }
.ek-les-status { flex: none; font-size: 11px; color: #7a7d74; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.dark .ek-les-status { color: #94a3b8; }
@media (max-width: 480px) {
    .ek-groep-lessen { padding-left: 4px; }
    .ek-les-tag { display: none; }
}

/* Contrast (backlog X4): kleine tekst in text-slate-400 haalde 2,56:1 op wit; nu minstens 4,5:1 (WCAG 2.2 AA) */
html:not(.dark) .text-slate-400 { color: #64748b; }
html.dark .dark\:text-slate-500 { color: #94a3b8; }

/* Laadindicatie (backlog U29): rustig skelet in een les of scherm dat nog laadt (App.toonLaden), en bij een woord een
   klein draaiend rondje in de hoek van het woord terwijl de uitleg onderweg is (Reader.toonWoordLaden) */
.ek-laden { display: flex; flex-direction: column; gap: 14px; padding: 4px 0; animation: ekLadenIn 0.2s ease-out; }
@keyframes ekLadenIn { from { opacity: 0; } to { opacity: 1; } }
.ek-laden-tekst { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 13px; font-weight: 600; color: #5f625b; }
.dark .ek-laden-tekst { color: #94a3b8; }
.ek-laden-traag { margin: 6px 0 0; font-size: 12px; color: #5f625b; }
.dark .ek-laden-traag { color: #94a3b8; }
#reader-content .ek-laden-tekst { font-size: 14px; }
#reader-content .ek-laden-traag { font-size: 13px; }
.ek-laden-draai {
    width: 16px; height: 16px; flex: none; border-radius: 9999px;
    border: 2px solid #e2ddd3; border-top-color: #C96532; animation: ekDraai 0.8s linear infinite;
}
.dark .ek-laden-draai { border-color: #334155; border-top-color: #F7BB4C; }
@keyframes ekDraai { to { transform: rotate(360deg); } }
.ek-skelet {
    height: 14px; border-radius: 7px;
    background: linear-gradient(90deg, #f3efe6 25%, #faf7f0 50%, #f3efe6 75%);
    background-size: 200% 100%; animation: ekGlans 1.4s ease-in-out infinite;
}
.ek-skelet-kop { height: 26px; width: 55%; border-radius: 9px; margin-bottom: 6px; }
.dark .ek-skelet { background: linear-gradient(90deg, #1e293b 25%, #273449 50%, #1e293b 75%); background-size: 200% 100%; }
@keyframes ekGlans { from { background-position: 100% 0; } to { background-position: -100% 0; } }

.korean-word.woord-laadt { position: relative; animation: ekWoordPuls 1.2s ease-in-out infinite; }
@keyframes ekWoordPuls { 0%, 100% { background-color: #FBF8F1; } 50% { background-color: #F7BB4C55; } }
.korean-word.woord-laadt::after {
    content: ''; position: absolute; top: -7px; right: -7px; width: 15px; height: 15px; border-radius: 9999px;
    background: #FBF8F1; border: 2px solid #e2ddd3; border-top-color: #C96532; animation: ekDraai 0.8s linear infinite;
}
.dark .korean-word.woord-laadt::after { background: #0f172a; border-color: #334155; border-top-color: #F7BB4C; }

@media (prefers-reduced-motion: reduce) {
    .ek-laden { animation: none; }
    .ek-skelet, .korean-word.woord-laadt { animation: none; }
    .ek-laden-draai, .korean-word.woord-laadt::after { animation-duration: 2.4s; }
}