/* ==========================================================
   CekDulu — gaya tampilan
   Urutan: token → dasar → komponen umum → beranda → pelajaran → mode soal → materi → Ronde Kilat → rapor.
   Gaya lain: css/world.css (peta), css/phone.css (HP simulasi), css/coach.css (Coach Wall, streak, soal suara),
   css/dialog.css (dialog dan Pengaturan).
   ========================================================== */

:root {
  color-scheme: light;
  /* PALET RESMI: hanya 5 warna ini yang boleh dipakai di seluruh website.
     Jangan menambah warna lain tanpa persetujuan ketua. */
  --seashell: #FFF4EB;
  --wheat: #F6E0B6;
  --powder: #A6BCC9;
  --french: #3E4B8E;
  --violet: #3D1534;
  /* Pengecualian yang disetujui ketua: abu-abu gelap khusus mode gelap (bukan ungu). */
  --charcoal: #1C1C1E;
  --graphite: #2C2C2E;
  --slate: #48484A;
  /* Warna tambahan yang diminta ketua (8 Nov 2026): status jawaban (hijau benar, kuning hampir, merah salah)
     dan api streak (oranye, biru, pink). Tulisan di atas warna-warna ini memakai --on-status (gelap). */
  --green: #58C341;
  --green-deep: #3E9A2C;
  --yellow: #FFC53D;
  --yellow-deep: #D99A00;
  --red: #F05252;
  --red-deep: #C53030;
  --fire-orange: #FF8A1F;
  --fire-blue: #3FA9F5;
  --fire-pink: #FF4FA0;
  --on-status: #1C1C1E;

  /* Huruf bulat dan tebal ala game belajar. Disimpan di fonts/ (lisensi OFL), tanpa CDN.
     Nunito untuk teks, Fredoka untuk judul, logo, dan tombol. */
  --font: "Nunito", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Fredoka", var(--font);
  --topbar-h: 70px; /* tinggi bar atas beranda; banner dunia menempel tepat di bawahnya */
}

/* Peran warna, mode terang (bawaan). HP simulasi selalu memakai peran terang,
   karena isinya meniru aplikasi sungguhan. */
:root, .phone {
  --brand: var(--french);
  --brand-dark: var(--violet);
  --brand-soft: var(--wheat);
  --on-brand: var(--seashell);
  --teal: var(--violet);
  --teal-dark: var(--french);
  --ink: var(--violet);
  --muted: var(--french);
  --line: var(--powder);
  --surface: var(--wheat);
  --bg: var(--seashell);
  --warn: var(--wheat);
  --link: var(--french);
  --focus: var(--violet);
  --pick: var(--french); /* pilihan yang sedang dipilih, sebelum dinilai */
  --pick-soft: var(--powder);
  --progress-shine: var(--powder);
  /* Status jawaban: *-ink = teks berwarna, *-soft = latar lembut. */
  --good: var(--green);
  --good-deep: var(--green-deep);
  --good-ink: #2F7A20;
  --good-soft: #E3F7DA;
  --close: var(--yellow);
  --close-deep: var(--yellow-deep);
  --close-ink: #7A4F00;
  --close-soft: #FFF3CC;
  --bad: var(--red);
  --bad-deep: var(--red-deep);
  --bad-ink: #B42323;
  --bad-soft: #FDE4E4;
  --title-gold: #9A5B00;
  /* Api streak: isi api, inti api, dan angka (versi gelap supaya terbaca di latar terang). */
  --fire-orange-core: #FFD666;
  --fire-orange-ink: #A84C00;
  --fire-blue-core: #BDE3FF;
  --fire-blue-ink: #1565B0;
  --fire-pink-core: #FFC2DD;
  --fire-pink-ink: #B8155E;
}

/* Mode gelap: latar abu-abu gelap, aksen dari palet. Diaktifkan js/settings.js lewat data-theme. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: var(--wheat);
  --brand-dark: var(--french);
  --brand-soft: var(--french);
  --on-brand: var(--charcoal);
  --teal: var(--powder);
  --teal-dark: var(--french);
  --ink: var(--seashell);
  --muted: var(--powder);
  --line: var(--slate);
  --surface: var(--graphite);
  --bg: var(--charcoal);
  --pick: var(--wheat);
  --pick-soft: var(--graphite);
  --progress-shine: var(--seashell);
  --warn: var(--wheat);
  --link: var(--powder);
  --focus: var(--wheat);
  --good-ink: #7FDB6A;
  --good-soft: #1E3320;
  --close-ink: #FFD666;
  --close-soft: #3A3017;
  --bad-ink: #FF8A8A;
  --bad-soft: #3A1F1F;
  --title-gold: var(--yellow);
  --fire-orange-ink: var(--fire-orange);
  --fire-blue-ink: var(--fire-blue);
  --fire-pink-ink: var(--fire-pink);
}

@font-face {
  font-family: "Nunito";
  src: url("../fonts/nunito-latin.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fredoka";
  src: url("../fonts/fredoka-latin.woff2") format("woff2");
  font-weight: 500 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Dasar ---------- */

* { box-sizing: border-box; }
::selection { color: var(--violet); background: var(--wheat); }
html { accent-color: var(--brand); -webkit-tap-highlight-color: transparent; } /* iPhone: tanpa kilatan abu saat diketuk */
button, a, label { touch-action: manipulation; } /* iPhone: ketukan cepat tidak memperbesar halaman */

body {
  margin: 0;
  font-family: var(--font);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.02em; text-wrap: balance; }
.brand, .node-badge, .stat-value { font-family: var(--font-display); }
p { text-wrap: pretty; }
svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Komponen umum ---------- */

.btn {
  display: inline-block;
  width: 100%;
  padding: 15px 24px;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--on-brand);
  background: var(--brand);
  border: 0;
  border-radius: 16px;
  box-shadow: 0 4px 0 var(--brand-dark);
  cursor: pointer;
  transition: transform .08s;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: none; }
.btn:disabled { color: var(--ink); background: var(--line); box-shadow: 0 4px 0 var(--line); cursor: not-allowed; }
.btn-good { color: var(--on-status); background: var(--good); box-shadow: 0 4px 0 var(--good-deep); }
.btn-partial { color: var(--on-status); background: var(--close); box-shadow: 0 4px 0 var(--close-deep); }
.btn-bad { color: var(--on-status); background: var(--bad); box-shadow: 0 4px 0 var(--bad-deep); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--topbar-h);
  padding: 12px 16px;
  background: var(--bg);
  border-bottom: 2px solid var(--line);
}
.brand { display: inline-flex; align-items: center; min-height: 44px; font-size: 23px; font-weight: 800; letter-spacing: -.04em; color: var(--brand); text-decoration: none; }
.back-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--muted); text-decoration: none; }
@media (hover: hover) { .back-link:hover { color: var(--ink); } }
.topbar #streak { margin-left: auto; }
.xp-chip { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: var(--brand); }
.xp-chip .icon svg { width: 22px; height: 22px; }

.page { max-width: 560px; margin: 0 auto; padding: 16px 16px 32px; }

.coach { display: flex; align-items: flex-end; gap: 12px; }
.coach-wrap { position: relative; flex: none; display: block; }
.coach-bubble {
  position: relative;
  flex: 1;
  padding: 10px 14px;
  font-weight: 600;
  line-height: 1.4;
  background: var(--bg);
  border: 2px solid var(--line);
  border-radius: 16px;
  animation: rise .25s ease-out;
}
.coach-bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  bottom: 18px;
  width: 14px;
  height: 14px;
  background: var(--bg);
  border-left: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
  transform: rotate(45deg);
}

.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.stat { --stat: var(--brand); --stat-on: var(--on-brand); --stat-ink: var(--ink); display: flex; flex-direction: column; overflow: hidden; background: var(--stat); border: 3px solid var(--stat); border-radius: 18px; text-align: center; }
.stat-gold { --stat: var(--yellow); --stat-on: var(--on-status); --stat-ink: var(--title-gold); }
.stat-green { --stat: var(--green); --stat-on: var(--on-status); --stat-ink: var(--good-ink); }
.stat-blue { --stat: var(--fire-blue); --stat-on: var(--on-status); --stat-ink: var(--fire-blue-ink); }
.stat-orange { --stat: var(--fire-orange); --stat-on: var(--on-status); --stat-ink: var(--fire-orange-ink); }
.stat-label {
  display: grid;
  place-items: center;
  min-height: 2.9em; /* label dua baris dan satu baris sama tinggi */
  padding: 4px 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  color: var(--stat-on);
}
@media (max-width: 359px) {
  .stat-label { padding-inline: 2px; font-size: 11px; letter-spacing: 0; } /* "PELAJARAN" tidak patah di layar 320px */
}
.stat-value { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 6px; font-size: 22px; font-weight: 800; line-height: 1.2; color: var(--stat-ink); background: var(--bg); border-radius: 14px; overflow-wrap: anywhere; }
.stat-value .icon { flex: none; color: var(--stat); }
.stat-value .icon svg { width: 26px; height: 26px; }

.note { margin-top: 14px; font-size: 15px; color: var(--muted); }

/* Ikon 5 Pertanyaan Sebelum Klik: satu bentuk yang sama di semua halaman */
.q-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; color: var(--ink); background: var(--brand-soft); border-radius: 12px; }
.q-icon svg { width: 22px; height: 22px; }

/* ---------- Beranda (index.html) ---------- */
/* Peta level ada di css/world.css. Dunia di jalur (#units) selebar layar. */
.home { padding: 0 0 32px; }
.home .unit:first-child { margin-top: 0; }
.link-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0; font: inherit; font-weight: 700; color: var(--link); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; cursor: pointer; }

/* ---------- Pelajaran (simulator.html) ----------
   Satu soal = satu layar: halaman tidak pernah digulir. HP simulasi dan pertanyaan tetap di tempat;
   hanya daftar jawaban yang boleh digulir kalau tidak muat. HP diperkecil oleh fitPhone() di engine.js
   hanya kalau ruangnya kurang. Di HP urutannya: progres, HP, soal, tombol. */

.lesson-page { display: flex; flex-direction: column; height: 100vh; height: 100dvh; }

.lesson-top { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; max-width: 980px; margin: 0 auto; padding: 14px 16px; }
.icon-btn { flex: none; display: grid; place-items: center; width: 44px; height: 44px; color: var(--muted); border-radius: 10px; }
@media (hover: hover) { .icon-btn:hover { background: var(--surface); } }
.icon-btn svg { width: 26px; height: 26px; }
.progress { flex: 1; height: 18px; overflow: hidden; background: var(--line); border-radius: 99px; }
.progress span { position: relative; display: block; width: 0; height: 100%; background: var(--brand); border-radius: 99px; transition: width .4s ease; }
.progress span::after { content: ""; position: absolute; top: 4px; left: 8px; right: 8px; height: 4px; background: var(--progress-shine); border-radius: 99px; } /* kilau seperti bar game */

.lesson-main {
  flex: 1;
  min-height: 0;
  overflow-y: auto; /* cadangan untuk layar yang sangat pendek */
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* boleh menyempit di bawah lebar minimum isinya (layar 320px) */
  grid-template-rows: minmax(160px, 1fr) auto;
  grid-template-areas: "phone" "task";
  gap: 10px;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 16px 10px;
}
.lesson-main.is-done { display: block; }
.phone-col { grid-area: phone; display: flex; flex-direction: column; min-height: 0; }
#phone-slot { position: relative; flex: 1; min-height: 0; overflow: hidden; }
#phone-slot .phone { position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%) scale(var(--fit, 1)); }
.task-slot { grid-area: task; display: flex; flex-direction: column; min-height: 0; }
.task-slot > * { flex: none; }
/* Hanya daftar jawaban (dan kartu materi yang panjang) yang digulir. Padding kecil supaya garis fokus
   dan getaran pilihan tidak terpotong di tepi. Ujung bawah dipudarkan selama masih ada pilihan di bawahnya. */
.task-slot > .options, .task-slot > .learn-card { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.task-slot > .options .option:focus-visible { outline-offset: 0; } /* muat di padding 4px daftar yang digulir */
.task-slot > .options { grid-auto-rows: max-content; align-content: start; margin: -4px; padding: 4px; } /* baris tidak pernah lebih pendek dari isinya */
.task-slot > .options.has-more {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
}
/* Soal baru masuk dari kanan. backwards, bukan both: transform yang tertinggal membuat konfeti terkurung di kartu. */
.task-slot > *, .quick-play { animation: slide-in .3s ease-out backwards; }
.task-slot > .done { animation-name: fade-in; } /* layar selesai materi: tanpa transform, konfeti langsung selayar */
.task-slot:empty { display: none; }

/* Ukuran teks (Pengaturan > Tampilan, data-text dari js/settings.js): soal, jawaban, kartu Ronde Kilat, dan lembar
   hasil diperbesar dengan zoom, jadi huruf, ikon, dan jaraknya ikut membesar seimbang. Isi HP simulasi: css/phone.css. */
:root { --text-zoom: 1; }
:root[data-text="large"] { --text-zoom: 1.15; }
:root[data-text="xlarge"] { --text-zoom: 1.3; }
.task-slot, .quick-play, .feedback-body { zoom: var(--text-zoom); }

.context {
  max-width: 340px;
  margin: 0 auto 12px;
  padding: 10px 12px;
  font-size: 16px;
  color: var(--muted);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: 12px;
}

/* Soal: Coach Wall + gelembung pertanyaan, seperti karakter Duolingo */
.task-head { align-items: center; margin-bottom: 4px; }
.task-head .coach-btn { width: 72px; height: 72px; animation: pop .35s ease-out; }
.task-head .coach-bubble { font-weight: 800; }
.task-title { font-size: 23px; line-height: 1.25; }
.task-title:focus { outline: none; } /* fokus dari kode, bukan dari Tab */
.task-sub { margin: 4px 0 12px; color: var(--muted); }
/* Soal pilih banyak: penanda kecil di samping petunjuk, selain kotak centang di setiap pilihan. */
.multi-hint { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 0 9px 0 5px; font-size: 13px; font-weight: 800; line-height: 1.35; color: var(--ink); vertical-align: 1px; white-space: nowrap; background: var(--surface); border: 2px solid var(--line); border-radius: 99px; }
.multi-hint .icon svg { width: 14px; height: 14px; }

.options { display: grid; gap: 10px; }
.option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  color: inherit;
  text-align: left;
  background: var(--bg);
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: 14px;
  cursor: pointer;
}
.option:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; } /* ditekan seperti tombol Duolingo */
.option:disabled { cursor: default; }
.option-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.option .q-icon { width: 36px; height: 36px; border-radius: 10px; }
.option .q-icon svg { width: 20px; height: 20px; }
.option-text strong { display: block; font-size: 17px; line-height: 1.3; }
.option-text small { display: block; margin-top: 2px; font-size: 15px; line-height: 1.35; color: var(--muted); }
.option-note { display: block; margin-top: 8px; padding-top: 8px; font-size: 16px; line-height: 1.4; border-top: 2px solid var(--line); }

/* Tanda bahaya: kotak ikon 2 kolom (3 di layar lebar) supaya keenamnya muat tanpa gulir. */
.options-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.options-chips .option { flex-direction: column; justify-content: center; gap: 8px; min-height: 104px; padding: 12px 8px; text-align: center; }
.options-chips .option-text { flex: none; text-wrap: balance; }
.options-chips .option[aria-pressed="true"] .q-icon { color: var(--on-brand); background: var(--brand); }
/* Setelah dinilai: satu kolom supaya penjelasan terbaca; pilihan yang tidak relevan disembunyikan. */
.options.is-graded { grid-template-columns: minmax(0, 1fr); }
.options.is-graded .option { flex-direction: row; align-items: flex-start; min-height: 0; padding: 12px 14px; text-align: left; }
.options.is-graded .option-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.options.is-graded .option:not(.is-found, .is-missed, .is-extra, .is-correct, .is-wrong, .is-answer, .is-retry) { display: none; }
@media (min-width: 560px) {
  .options-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.option-check, .option-radio { flex: none; display: grid; place-items: center; width: 24px; height: 24px; background: var(--bg); border: 2px solid var(--brand); }
.option-check { border-radius: 7px; }
.option-radio { border-radius: 50%; }
.option[aria-pressed="true"] { background: var(--pick-soft); border-color: var(--pick); }
.option[aria-pressed="true"] .option-check,
.option[aria-pressed="true"] .option-radio { background: var(--pick); border-color: var(--pick); }
.option[aria-pressed="true"] .option-check::after {
  content: "";
  width: 6px;
  height: 11px;
  border: solid var(--on-brand);
  border-width: 0 3px 3px 0;
  transform: translateY(-1px) rotate(45deg);
}
.option[aria-pressed="true"] .option-radio::after { content: ""; width: 8px; height: 8px; background: var(--on-brand); border-radius: 50%; }

/* Setelah dinilai: hijau = benar, merah = salah pilih, kuning putus-putus = terlewat atau sempat salah,
   hijau putus-putus = jawaban yang seharusnya dipilih. Label teks tetap ada, jadi tidak bergantung pada warna. */
.option.is-found, .option.is-correct { color: var(--ink); background: var(--good-soft); border-color: var(--good); box-shadow: none; }
.option.is-extra, .option.is-wrong { color: var(--ink); background: var(--bad-soft); border-color: var(--bad); box-shadow: none; }
.option.is-missed, .option.is-retry { color: var(--ink); background: var(--close-soft); border-color: var(--close-deep); border-style: dashed; box-shadow: none; }
.option.is-answer { color: var(--ink); background: var(--bg); border-color: var(--good); border-style: dashed; box-shadow: none; }
.option.is-found .option-check, .option.is-correct .option-radio { background: var(--good); border-color: var(--good); }
.option.is-extra .option-check, .option.is-wrong .option-radio { background: var(--bad); border-color: var(--bad); }
.option.is-found .option-check::after, .option.is-extra .option-check::after { border-color: var(--on-status); }
.option.is-correct .option-radio::after, .option.is-wrong .option-radio::after { background: var(--on-status); }
/* Label status (elemen .option-status dari js/kit.js, jadi ikut dibacakan pembaca layar) */
.option-status { flex: none; align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.option.is-found .option-status, .option.is-correct .option-status, .option.is-answer .option-status { color: var(--good-ink); }
.option.is-missed .option-status, .option.is-retry .option-status { color: var(--close-ink); }
.option.is-extra .option-status, .option.is-wrong .option-status { color: var(--bad-ink); }

/* Setelah dinilai: soal sudah dijawab, jadi judulnya diganti penjelasan yang dipadatkan
   supaya penjelasan dan HP simulasi muat satu layar. */
.lesson-main.is-graded .task-head, .lesson-main.is-graded .task-sub { display: none; }
.lesson-main.is-text.is-graded .task-head { display: flex; } /* materi: pertanyaan tetap terlihat saat dinilai */
.options.is-graded .option { padding: 8px 12px; }
.options.is-graded .q-icon { display: none; }
.options.is-graded .option-note { margin-top: 2px; padding-top: 0; font-size: 15px; line-height: 1.35; border-top: 0; }

/* Lembar bawah dibatasi supaya pilihan dan sorotan di HP tidak tertutup. */
.lesson-footer { position: sticky; bottom: 0; z-index: 5; max-height: 45vh; max-height: 45dvh; overflow-y: auto; background: var(--bg); border-top: 2px solid var(--line); }
.lesson-footer.is-good { --tone: var(--good); --tone-ink: var(--good-ink); background: var(--good-soft); border-top-color: var(--good); }
.lesson-footer.is-partial { --tone: var(--close); --tone-ink: var(--close-ink); background: var(--close-soft); border-top-color: var(--close); }
.lesson-footer.is-bad { --tone: var(--bad); --tone-ink: var(--bad-ink); background: var(--bad-soft); border-top-color: var(--bad); }
.footer-inner { display: grid; gap: 14px; max-width: 980px; margin: 0 auto; padding: 16px; }

.feedback { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px; animation: rise .25s ease-out; }
/* Kosong: disembunyikan secara visual saja, supaya wilayah aria-live tetap ada dan hasil berikutnya dibacakan. */
.feedback:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.feedback > .mascot { width: 104px; height: 104px; animation: coach-in .45s cubic-bezier(.3, 0, .3, 1.35) both; }
@keyframes coach-in { from { opacity: 0; transform: translateY(30px) scale(.6); } }
.feedback h2 { display: flex; align-items: center; gap: 8px; font-size: 22px; line-height: 1.25; }
.feedback h2 .icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; color: var(--on-status); background: var(--tone); border-radius: 50%; }
.feedback h2 .icon svg { width: 20px; height: 20px; }
.feedback h2, .feedback-cheer { color: var(--tone-ink); }
.feedback-body > p:not(.feedback-cheer) { margin-top: 4px; font-size: 17px; line-height: 1.4; }

.done { max-width: 600px; margin: 0 auto; padding: 16px 0 8px; text-align: center; }
/* Coach Wall besar di atas "panggung" bulat, seperti layar selesai di game. */
.done-hero { position: relative; isolation: isolate; display: grid; place-items: center; width: 210px; height: 200px; margin: 0 auto 6px; }
.done-hero::before { content: ""; position: absolute; inset: 14px 6px 0; z-index: -1; background: var(--surface); border-radius: 50%; }
.done-hero::after { content: ""; position: absolute; bottom: 4px; width: 130px; height: 14px; background: var(--line); border-radius: 50%; }
.done-hero .mascot { position: relative; z-index: 1; width: 180px; height: 180px; animation: coach-in .5s cubic-bezier(.3, 0, .3, 1.35) both; }
.done h1 { margin-bottom: 20px; font-size: 34px; line-height: 1.15; color: var(--title-gold); }
.done > p { margin-bottom: 20px; color: var(--muted); }
.takeaway { margin-top: 18px; padding: 14px 16px; text-align: left; background: var(--surface); border: 2px solid var(--line); border-radius: 14px; }
.takeaway strong { display: block; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }

@media (min-width: 860px) {
  .lesson-top, .lesson-main, .footer-inner { max-width: 1180px; }
  /* Kolom HP selebar HP aslinya (360px) kalau muat. HP mengikuti tinggi layar, bukan diperkecil mengikuti
     rasio iPhone, supaya huruf pesannya tetap ukuran asli (lihat css/phone.css). */
  .lesson-main {
    grid-template-columns: clamp(300px, calc(30vw * var(--text-zoom)), calc(392px * var(--text-zoom))) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "phone task";
    gap: 16px 48px;
    padding: 12px 24px 16px;
  }
  /* Kolom soal mengisi tinggi layar: Coach Wall besar di samping gelembung, pilihan dan huruf membesar. */
  /* safe center: kalau isinya lebih tinggi dari layar, bagian atas tidak terpotong. */
  .task-slot { display: flex; flex-direction: column; justify-content: safe center; align-self: stretch; width: 100%; max-width: 720px; min-height: 0; margin: 0 auto; }
  /* Materi tanpa HP: Coach Wall sedikit lebih kecil supaya kartu, penelepon, dan pilihan muat satu layar. */
  .lesson-main.is-text .task-head .coach-btn { width: 92px; height: 92px; }
  .lesson-main.is-text .option { min-height: 58px; padding: 12px 18px; }
  .task-head { gap: 16px; }
  .task-head .coach-btn { width: 120px; height: 120px; }
  .task-title { font-size: 26px; }
  .task-head .coach-bubble { padding: 14px 18px; }
  .task-sub { margin: 10px 0 16px; font-size: 18px; }
  .options { gap: 12px; }
  .option { min-height: 68px; padding: 14px 18px; }
  .option-text strong { font-size: 19px; }
  /* Soal dengan 6 pilihan: tinggi baris sesuai isi (minimal 52px), lalu melebar mengisi sisa layar. */
  .options-find:not(.is-graded), .options-chips:not(.is-graded) { flex: 1 1 auto; max-height: 620px; }
  .options-find .option, .options-chips .option { min-height: 52px; padding: 10px 18px; }
  .options-find .option-text strong, .options-chips .option-text strong { font-size: 19px; }
  .footer-inner { padding: 18px 24px; }
  /* Layar selesai: "Kembali ke beranda" di kiri, "Lanjut" di kanan, di bawah isi yang di tengah. */
  .lesson-footer.is-done .footer-inner { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); max-width: 640px; }
  .lesson-footer.is-done .btn { grid-column: auto; width: 100%; }
}
/* Laptop dengan layar pendek (mis. 1366x768 dengan zoom 125%): bar atas, bawah, dan kotak situasi dipadatkan
   supaya HP simulasi dapat ruang setinggi mungkin. */
@media (min-width: 860px) and (max-height: 760px) {
  .lesson-top { padding-block: 6px; }
  .lesson-main { padding-top: 4px; }
  .footer-inner { padding-block: 10px; }
  .context { margin-bottom: 8px; padding: 6px 12px; font-size: 15px; }
}
/* HP besar yang dimiringkan (mis. 932x430) memakai tata letak laptop: Coach Wall dan judul soal dikecilkan
   supaya daftar jawaban tetap kebagian ruang. */
@media (min-width: 860px) and (max-height: 500px) {
  .task-head .coach-btn, .lesson-main.is-text .task-head .coach-btn { width: 60px; height: 60px; }
  .task-title { font-size: 20px; }
  .task-head .coach-bubble { padding: 8px 14px; }
  .task-sub { margin: 4px 0 8px; font-size: 15px; }
  .options { gap: 8px; }
  .option, .lesson-main.is-text .option, .options-find .option, .options-chips .option { min-height: 48px; padding: 8px 14px; }
  .option-text strong, .options-find .option-text strong, .options-chips .option-text strong { font-size: 16px; }
}

/* ---------- Mode soal: Pasangkan, Tebak link, Susun pesan ---------- */

/* Pasangkan: dua kolom, bagian pesan di kiri, pertanyaan di kanan */
.options-match { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.match-item { min-height: 60px; padding: 8px 10px; }
.match-part .option-text { font-size: 15px; font-style: italic; line-height: 1.3; }
.match-question .option-text strong { font-size: 15px; }
.match-item .q-icon { width: 30px; height: 30px; border-radius: 8px; }
.match-item .q-icon svg { width: 18px; height: 18px; }
.match-item[aria-pressed="true"] { background: var(--bg); border-color: var(--pick); box-shadow: inset 0 0 0 1px var(--pick); }
.match-item.is-matched { color: var(--ink); background: var(--good-soft); border-color: var(--good); border-style: solid; opacity: 1; animation: boing .35s ease-out; }
.match-item.is-shaking { background: var(--bad-soft); border-color: var(--bad); animation: shake .4s ease-in-out; }

/* Tebak link: alamat ditulis rapat seperti di kolom alamat browser */
.options-url .option-text strong { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 16px; letter-spacing: -.01em; overflow-wrap: anywhere; }

/* Susun pesan: garis jawaban di atas, kepingan kata di bawah */
.options-reply { gap: 14px; }
.reply-line {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  min-height: 104px;
  padding: 8px 0;
  background: repeating-linear-gradient(to bottom, transparent 0 46px, var(--line) 46px 48px);
}
.reply-line.is-correct .tile { background: var(--good-soft); border-color: var(--good); }
.reply-line.is-wrong .tile { background: var(--bad-soft); border-color: var(--bad); }
.reply-bank { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.tile {
  min-height: 44px;
  padding: 8px 14px;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: 12px;
  cursor: pointer;
}
.tile:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
.tile:disabled { cursor: default; }

/* Soal "Apa yang salah dari pesan ini?": potongan pesan sebagai pilihan, dua kolom supaya muat satu layar */
.options-find { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.options-find .option { align-items: center; min-height: 56px; padding: 8px 10px; }
/* Teks pilihan ditulis utuh (tidak dipotong): daftar jawaban boleh digulir, jadi tidak perlu dipendekkan. */
.options-find .option-text strong { font-size: 14px; font-weight: 700; line-height: 1.3; }
.options-find .option-check { width: 22px; height: 22px; }

/* Soal pertama dan tanda bahaya: satu kolom ke bawah, tombol besar yang mengisi ruang kosong.
   Ditaruh setelah aturan kolom lama supaya menang. */
/* Baris setinggi isinya (auto). Tinggi minimum dijaga min-height tombolnya, supaya isi tidak pernah keluar kotak
   walau daftarnya dibatasi dan digulir. */
.options-find, .options-chips { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 8px; }
.options-find .option, .options-chips .option { flex-direction: row; justify-content: flex-start; gap: 12px; min-height: 56px; padding: 10px 16px; text-align: left; }
.options-find .option-text strong, .options-chips .option-text strong { font-size: 17px; font-weight: 700; }
.options-chips .option-text { flex: 1; min-width: 0; text-wrap: pretty; }
.options-chips .q-icon { width: 34px; height: 34px; border-radius: 10px; }
.option-plain { justify-content: center !important; text-align: center !important; }
.option-plain .option-text strong { font-weight: 800; }

/* ---------- Materi (materi.html): kartu penjelasan dan mini kuis ---------- */

.lesson-main.is-text { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); grid-template-areas: "task"; }
/* margin hanya ke samping: setinggi area soal (bukan setinggi isinya), jadi kalau pilihan tidak muat (mis. teks
   paling besar di laptop pendek) yang digulir daftar pilihannya, bukan halamannya. Tengah vertikal dari safe center. */
.lesson-main.is-text .task-slot { width: 100%; max-width: 640px; margin: 0 auto; }
.learn-card {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding: 18px 20px;
  font-size: 18px;
  line-height: 1.55;
  background: var(--surface);
  border: 2px solid var(--line);
  border-bottom-width: 4px;
  border-radius: 18px;
  animation: rise .25s ease-out;
}
.learn-source { font-size: 14px; color: var(--muted); }
.options-quiz .option-text strong { overflow-wrap: anywhere; }

/* ---------- Ronde Kilat (kilat.html) ---------- */

.quick-main { display: block; }
.quick-play { display: grid; gap: 14px; max-width: 520px; margin: 0 auto; padding-top: 8px; }
.quick-intro p { margin-bottom: 0; }
.quick-card {
  padding: 16px 18px;
  font-size: 19px;
  line-height: 1.45;
  color: var(--violet);
  background: var(--seashell);
  border: 3px solid var(--french);
  border-bottom-width: 6px;
  border-radius: 22px;
  animation: pop .3s ease-out;
}
.quick-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 15px; }
.quick-card-top small { margin-left: auto; color: var(--french); }
.app-icon { display: grid; place-items: center; width: 22px; height: 22px; font-size: 12px; font-weight: 800; color: var(--seashell); background: var(--french); border-radius: 6px; } /* juga dipakai HP simulasi */
.quick-card.is-correct { animation: boing .4s ease-out; }
.quick-card.is-wrong { animation: shake .4s ease-in-out; }
.quick-timer { height: 10px; overflow: hidden; background: var(--line); border-radius: 99px; }
.quick-timer span { display: block; height: 100%; background: var(--brand); border-radius: 99px; transition: width .1s linear; }
.quick-score { font-weight: 800; text-align: center; color: var(--muted); }
.quick-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
.btn-quiet { color: var(--ink); background: var(--bg); border: 2px solid var(--line); box-shadow: 0 4px 0 var(--line); }
.btn-real { color: var(--violet); background: var(--powder); box-shadow: 0 4px 0 var(--french); }
.btn-scam { color: var(--violet); background: var(--wheat); box-shadow: 0 4px 0 var(--violet); }
@media (min-width: 860px) {
  .quick-buttons { grid-column: 1 / -1; max-width: 520px; width: 100%; margin: 0 auto; }
  .quick-buttons .btn { grid-column: auto; width: 100%; min-width: 0; }
  .lesson-footer:not(.is-good):not(.is-bad) .footer-inner:has(.quick-buttons) { grid-template-columns: 1fr; }
}
.node-quick { color: var(--violet); background: var(--wheat); box-shadow: 0 6px 0 var(--french); }

/* ---------- Pelajaran di HP: semua dibuat ringkas supaya HP simulasi tetap terbaca ---------- */
@media (max-width: 859px) {
  /* Kolom: HP simulasi di atas setinggi isi pesannya (paling tinggi 46% layar) dan tidak ikut digulir;
     soal mengisi sisa layar. Kalau ruang sempit (mis. lembar hasil terbuka), HP yang diperkecil dulu,
     soal tetap minimal setinggi pertanyaan + dua pilihan. --phone-h diisi fitPhone() di engine.js. */
  .lesson-main:not(.quick-main):not(.is-done) { display: flex; flex-direction: column; }
  .phone-col { flex: 0 1 auto; min-height: min(140px, 30%); }
  #phone-slot { flex: 0 1 auto; height: min(var(--phone-h, 40dvh), 46dvh); }
  .lesson-main:not(.quick-main) > .task-slot { flex: 1 1 0; min-height: min(260px, 55%); }
  .lesson-top { padding: 6px 12px; }
  .context { flex: none; margin-bottom: 8px; padding: 8px 12px; font-size: 15px; }

  .task-head .coach-btn { width: 52px; height: 52px; }
  .task-title { font-size: 19px; }
  .task-head .coach-bubble { padding: 8px 12px; }
  .task-sub { margin: 2px 0 8px; font-size: 15px; line-height: 1.35; }
  .options { gap: 8px; }
  .option { padding: 10px 12px; }
  .option-text strong { font-size: 16px; }
  .options-chips .option { flex-direction: row; justify-content: flex-start; gap: 8px; min-height: 52px; padding: 6px 10px; text-align: left; }
  .options-chips .q-icon, .options.is-graded .q-icon { width: 30px; height: 30px; border-radius: 8px; }
  .options-chips .q-icon svg, .options.is-graded .q-icon svg { width: 18px; height: 18px; }
  .options-chips .option-text strong { font-size: 15px; }
  .options-chips .option-text { flex: 1; min-width: 0; }
  .lesson-footer { max-height: 70vh; max-height: 70dvh; }

  .footer-inner { gap: 10px; padding: 10px 16px; }
  .match-item { min-height: 46px; padding: 5px 8px; }
  .match-item .q-icon { display: none; }
  .learn-card { gap: 8px; margin-top: 8px; padding: 14px 16px; font-size: 16px; line-height: 1.5; }
  .feedback { gap: 10px; }
  .feedback > .mascot { width: 68px; height: 68px; }
  .done-hero { width: 170px; height: 160px; }
  .done-hero .mascot { width: 144px; height: 144px; }
  .done h1 { margin-bottom: 14px; font-size: 27px; }
  .stats { gap: 8px; }
  .stat-value { gap: 4px; padding: 10px 4px; font-size: 18px; }
  .stat-value .icon svg { width: 20px; height: 20px; }
  .feedback h2 { font-size: 19px; }
  .feedback-body > p:not(.feedback-cheer) { margin-top: 2px; font-size: 15px; }
}

/* HP miring (landscape): HP simulasi di kiri, soal di kanan, seperti di laptop. */
@media (max-width: 859px) and (min-aspect-ratio: 4/3) and (max-height: 500px) {
  .lesson-main:not(.quick-main):not(.is-done):not(.is-text) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "phone task";
  }
  .phone-col { min-height: 0; }
  #phone-slot { flex: 1 1 0; height: auto; }
  .lesson-main:not(.quick-main) > .task-slot { min-height: 0; }
}

/* HP dengan layar pendek (mis. Safari dengan bar bawah): soal dipadatkan supaya pesan tetap terbaca. */
@media (max-width: 859px) and (max-height: 820px) {
  .lesson-top { padding: 2px 12px; }
  .context { margin-bottom: 6px; padding: 5px 10px; font-size: 14px; line-height: 1.35; }
  .task-head .coach-btn { width: 44px; height: 44px; }
  .task-title { font-size: 17px; }
  .task-head .coach-bubble { padding: 6px 10px; }
  .task-sub { margin: 2px 0 6px; font-size: 14px; }
  .multi-hint { font-size: 12px; line-height: 1.25; border-width: 1px; }
  .options-find, .options-chips { gap: 6px; }
  .options-find .option, .options-chips .option { min-height: 48px; padding: 6px 14px; }
  .options-find .option-text strong, .options-chips .option-text strong { font-size: 16px; }
  .options.is-graded { gap: 6px; }
  .options.is-graded .option { padding: 6px 10px; }
  .options.is-graded .option-note { font-size: 14px; }
  .footer-inner { padding: 8px 16px; }
  .feedback > .mascot { width: 52px; height: 52px; }
  .btn { padding: 12px 24px; }
}

/* ---------- Rapor (rapor.html) ---------- */

.page-title { margin: 8px 0 16px; font-size: 30px; line-height: 1.15; }
.section-title { margin: 28px 0 12px; font-size: 21px; }
.callout { margin-top: 16px; padding: 14px 16px; background: var(--brand-soft); border: 2px solid var(--brand-soft); border-radius: 14px; }
.callout-good { background: var(--good-soft); border-color: var(--good); }
.callout-kicker { display: block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.callout strong { display: block; font-size: 18px; }
.callout p { color: var(--muted); }
:root[data-theme="dark"] .callout p { color: var(--ink); } /* Powder Blue di atas French Blue kurang kontras */
.callout-good p { color: var(--ink); }
.callout-list { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.q-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.q-row { display: grid; grid-template-columns: 40px 1fr; align-items: start; gap: 12px; }
.q-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.q-count { font-size: 15px; color: var(--muted); }
.meter { height: 10px; margin-top: 6px; overflow: hidden; background: var(--line); border-radius: 99px; }
.meter span { display: block; height: 100%; background: var(--good); border-radius: 99px; }
.report-cta { margin-top: 28px; }

/* ---------- Animasi: biar terasa seperti game ---------- */

@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { transform: scale(.6); } 70% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes boing { 40% { transform: scale(.93); } 70% { transform: scale(1.05); } 100% { transform: scale(1); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes sheet-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes float-up { 0% { opacity: 0; transform: translateY(10px) scale(.7); } 30% { opacity: 1; transform: translateY(-4px) scale(1.15); } 100% { transform: none; } }
@keyframes bob { 50% { transform: translateY(-4px); } }
@keyframes fall { to { transform: translateY(110vh) rotate(calc(var(--spin) + 600deg)); } }
@keyframes pulse { 50% { transform: scale(1.06); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(28px); } }
@keyframes fade-in { from { opacity: 0; } }

/* Hasil benar memantul, salah bergetar (saat mengetuk pilihan tidak ada animasi). */
.option.is-found, .option.is-correct { animation: boing .4s ease-out; }
.option.is-missed, .option.is-extra, .option.is-wrong { animation: shake .4s ease-in-out; }

/* Lembar hasil naik dari bawah, dengan seruan, +XP, dan combo. */
.lesson-footer.is-good .footer-inner, .lesson-footer.is-partial .footer-inner, .lesson-footer.is-bad .footer-inner { animation: sheet-up .25s ease-out; }
.feedback-cheer { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 2px; font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.feedback-cheer.is-quip { font-family: var(--font); font-size: 16px; letter-spacing: 0; text-transform: none; }
.xp-pop, .combo { display: inline-block; padding: 2px 10px; font-size: 13px; border-radius: 99px; animation: float-up .5s ease-out both; }
.xp-pop { color: var(--on-status); background: var(--yellow); }
.combo { display: inline-flex; align-items: center; gap: 4px; color: var(--fire-orange-ink); background: var(--bg); border: 2px solid var(--fire-orange); animation-delay: .15s; }
.combo .icon svg { width: 14px; height: 14px; color: var(--fire-orange); }

/* Confetti di layar "Sempurna!" */
.confetti { position: fixed; inset: 0; z-index: 30; overflow: hidden; pointer-events: none; }
.confetti i { position: absolute; top: -24px; width: 10px; height: 16px; border-radius: 3px; transform: rotate(var(--spin)); animation: fall 2.6s ease-in forwards; }

/* Gerak dikurangi: dari pengaturan HP (kecuali pemain sengaja menyalakan Animasi di Pengaturan CekDulu),
   atau Animasi dimatikan di Pengaturan. data-motion dipasang js/settings.js: auto, on, atau reduce. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="on"]) *, :root:not([data-motion="on"]) *::before, :root:not([data-motion="on"]) *::after { animation: none !important; transition: none !important; }
  :root:not([data-motion="on"]) .confetti { display: none; }
}
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation: none !important; transition: none !important; }
:root[data-motion="reduce"] .confetti { display: none; }