/* Materi edukasi sebelum bermain */
.lesson-overlay {
  --lesson-color: #E67E22;
  position: absolute;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: rgba(15, 30, 45, 0.72);
  backdrop-filter: blur(5px);
}
.lesson-overlay.hidden { display: none; }
.lesson-card {
  width: min(720px, 100%);
  max-height: 96%;
  display: flex;
  flex-direction: column;
  background: #FFFDF7;
  border: 5px solid var(--lesson-color);
  border-radius: 28px;
  padding: 16px 20px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  animation: modalPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.lesson-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lesson-heading { font-size: 1.05rem; font-weight: 700; color: var(--lesson-color); min-width: 0; overflow-wrap: anywhere; }
.lesson-close {
  flex: none; font-family: inherit; font-weight: 700; font-size: 0.8rem;
  background: #F2F4F4; color: #566573; border: 2px solid #D5DBDB;
  border-radius: 16px; padding: 5px 12px; cursor: pointer;
}
.lesson-progress { height: 10px; background: #ECF0F1; border-radius: 8px; margin: 10px 0; overflow: hidden; flex: none; }
.lesson-bar { height: 100%; width: 0; background: var(--lesson-color); border-radius: 8px; transition: width 0.3s; }
.lesson-body { display: flex; gap: 16px; align-items: flex-start; overflow-y: auto; min-height: 0; padding: 4px 2px; }
.lesson-icon {
  flex: none; width: 92px; height: 92px; font-size: 3.4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: color-mix(in srgb, var(--lesson-color) 15%, white);
  border: 4px solid var(--lesson-color);
}
.lesson-content { flex: 1; min-width: 0; }
.lesson-title { font-size: 1.5rem; color: #2C3E50; margin-bottom: 6px; overflow-wrap: anywhere; }
.lesson-text { font-size: 1.05rem; line-height: 1.5; color: #34495E; font-weight: 600; overflow-wrap: anywhere; }
.lesson-text ul { margin: 6px 0 6px 20px; }
.lesson-text li { margin: 3px 0; }
.lesson-fact {
  margin-top: 10px; padding: 8px 12px; font-size: 0.95rem; font-weight: 700;
  color: #7D6608; background: #FEF9E7; border-left: 6px solid #F1C40F; border-radius: 12px;
  overflow-wrap: anywhere;
}
.lesson-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; flex: none; }
.lesson-btn {
  font-family: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer;
  background: var(--lesson-color); color: #fff; border: 3px solid var(--lesson-color);
  border-radius: 24px; padding: 10px 24px; margin-left: auto;
}
.lesson-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.lesson-btn-ghost { background: #fff; color: var(--lesson-color); margin-left: 0; }

/* Kuis */
.quiz-q { font-size: 1.2rem; font-weight: 700; color: #2C3E50; margin-bottom: 10px; }
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-option {
  text-align: left; font-family: inherit; font-weight: 700; font-size: 1rem; color: #2C3E50;
  background: #fff; border: 3px solid #D5DBDB; border-radius: 16px; padding: 10px 14px; cursor: pointer;
  overflow-wrap: anywhere;
}
.quiz-option:hover:not(:disabled) { border-color: var(--lesson-color); background: #FFF8EE; }
.quiz-option.correct { background: #D4EDDA; border-color: #27AE60; }
.quiz-option.wrong { background: #FADBD8; border-color: #E74C3C; }
.quiz-feedback { margin-top: 10px; padding: 8px 12px; border-radius: 12px; font-weight: 700; font-size: 0.95rem; }
.quiz-feedback.ok { background: #D4EDDA; color: #145A32; }
.quiz-feedback.no { background: #FDEBD0; color: #7E5109; }

body.high-contrast .lesson-card { background: #000 !important; border-color: #FFE600 !important; }
body.high-contrast .lesson-title, body.high-contrast .lesson-text, body.high-contrast .lesson-heading, body.high-contrast .quiz-q { color: #FFE600 !important; }
body.high-contrast .quiz-option { background: #000; color: #fff; border-color: #FFE600; }

@media (max-width: 560px) {
  .lesson-body { flex-direction: column; align-items: center; text-align: center; }
  .lesson-icon { width: 72px; height: 72px; font-size: 2.6rem; }
}

/* Pembicara: Profesor Bumi */
.lesson-speaker {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 6px;
  font-size: 0.8rem; font-weight: 700; color: #6C3483;
  background: #F4ECF7; border: 2px solid #D2B4DE; border-radius: 14px; padding: 2px 10px;
}

/* Kotak "Jangan lupa dicatat!" */
.lesson-note {
  margin-top: 12px; padding: 8px 12px 10px; border-radius: 14px;
  background: repeating-linear-gradient(#FFFEF2, #FFFEF2 24px, #D6EAF8 25px);
  border: 3px dashed #E74C3C; position: relative;
  animation: notePulse 2.2s ease-in-out infinite;
}
.lesson-note-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.95rem; font-weight: 800; color: #C0392B; text-transform: uppercase; letter-spacing: 0.3px;
}
.lesson-note-head .pencil { display: inline-block; animation: pencilWrite 1s ease-in-out infinite; transform-origin: bottom left; }
.lesson-note ul { margin: 4px 0 0 22px; font-size: 1rem; font-weight: 700; color: #1B4F72; line-height: 25px; }
.lesson-note li { margin: 0; }
@keyframes notePulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.0); } 50% { box-shadow: 0 0 0 5px rgba(231, 76, 60, 0.18); } }
@keyframes pencilWrite { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(14deg) translateX(3px); } }

/* Daftar bagian materi */
.lesson-steps { display: flex; gap: 5px; justify-content: center; margin-top: 8px; flex: none; }
.lesson-step-dot { width: 10px; height: 10px; border-radius: 50%; background: #D5DBDB; }
.lesson-step-dot.done { background: var(--lesson-color); }
.lesson-step-dot.now { background: var(--lesson-color); transform: scale(1.4); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lesson-color) 30%, white); }

/* Peta terkunci pada alur Materi -> Game -> Kuis */
.btn-map { position: relative; }
.btn-map.locked { opacity: 0.55; filter: grayscale(0.6); }
.btn-map .map-lock { font-size: 0.75rem; }
.btn-map.active .map-title { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.15); }
@media (max-width: 860px) {
  .btn-map:not(.active) .map-title { display: none; }
}

body.high-contrast .lesson-note { background: #000 !important; border-color: #FFE600 !important; }
body.high-contrast .lesson-note-head, body.high-contrast .lesson-note ul { color: #FFE600 !important; }