/* ============================================
   EXTRAS.CSS — Fitur Tambahan
   Chart, Infografik, Glossary, Certificate,
   Scene Transisi, Comparison Table, dll.
   ============================================ */

/* ============================================
   DONUT / PIE CHART (SVG-based)
   ============================================ */
.chart-wrap {
  display: flex;
  align-items: center;
  gap: var(--gap-lg);
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--gap-md) 0;
}

.donut-svg { overflow: visible; }

.donut-label-center {
  font-family: var(--font-body);
  font-size: 0.75rem;
  fill: var(--text-muted);
  text-anchor: middle;
}
.donut-label-val {
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 800;
  fill: var(--white);
  text-anchor: middle;
}

.chart-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(110px, 1fr));
  gap: 0.3rem 0.6rem;
  min-width: 0;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: color 0.2s;
}
.legend-item:hover { color: var(--text-main); }

.legend-dot {
  width: 12px; height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}

.legend-pct {
  margin-left: auto;
  font-weight: 700;
  color: var(--text-main);
  font-size: 0.8rem;
}

/* ============================================
   BAR CHART (horizontal, animated)
   ============================================ */
.bar-chart {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: var(--gap-md) 0;
}

.bar-row {
  display: grid;
  grid-template-columns: 140px 1fr 60px;
  align-items: center;
  gap: 0.75rem;
}

.bar-label {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: right;
  line-height: 1.3;
}

.bar-track {
  height: 14px;
  background: rgba(139,175,197,0.08);
  border-radius: 100px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  border-radius: 100px;
  width: 0;
  transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.bar-fill::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 4px;
  border-radius: 0 100px 100px 0;
  background: rgba(255,255,255,0.6);
  filter: blur(2px);
}

.bar-val {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text-main);
}

/* ============================================
   ANIMASI STAGGER — item legend donut & baris bar chart
   Dipicu ulang (retrigger) via JS setiap kali sub-scene Bauran Energi
   / Potensi EBT (Scene 4) ditampilkan — lihat animateDonutChart() &
   animateBarChart() di main.js.
   ============================================ */
@keyframes chartFadeInUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.legend-item.anim-in,
.bar-row.anim-in {
  animation: chartFadeInUp 0.5s ease both;
}

/* "Pop" pada label nilai bar chart, muncul setelah batangnya selesai
   terisi penuh (lihat animateBarChart() di main.js). */
@keyframes barValPop {
  0%   { opacity: 0; transform: scale(0.7); }
  60%  { opacity: 1; transform: scale(1.15); }
  100% { opacity: 1; transform: scale(1); }
}
.bar-val.pop {
  animation: barValPop 0.4s ease both;
}

/* ============================================
   GLOSSARY / KAMUS ISTILAH
   ============================================ */
.glossary-search {
  width: 100%;
  padding: 0.8rem 1.2rem;
  background: var(--surface-2);
  border: 1px solid rgba(139,175,197,0.2);
  border-radius: 10px;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.9rem;
  margin-bottom: var(--gap-sm);
  transition: border-color var(--dur);
  outline: none;
}
.glossary-search:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(13,124,78,0.15); }
.glossary-search::placeholder { color: var(--text-muted); }

.glossary-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 420px;
  overflow-y: auto;
  padding-right: 0.25rem;
}

.glossary-item {
  background: var(--surface-2);
  border: 1px solid rgba(139,175,197,0.08);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  transition: border-color var(--dur), background var(--dur);
}
.glossary-item:hover { border-color: rgba(13,124,78,0.3); background: rgba(13,124,78,0.05); }
.glossary-item[hidden] { display: none; }

.glossary-term {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--primary-light);
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.glossary-cat {
  font-size: 0.62rem;
  font-weight: 600;
  background: rgba(59,158,219,0.15);
  color: var(--accent-2);
  border: 1px solid rgba(59,158,219,0.2);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.glossary-def {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.65;
}

/* ============================================
   CERTIFICATE / SERTIFIKAT
   ============================================ */
#cert-wrap {
  display: none;
  margin-top: var(--gap-lg);
}

#cert-wrap.show { display: block; animation: fadeUp 0.5s var(--ease) both; }

.certificate {
  background: linear-gradient(145deg, #0A1628 0%, #112240 40%, #0D7C4E22 100%);
  border: 2px solid var(--accent);
  border-radius: 20px;
  padding: 3rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: 0 0 60px rgba(240,180,41,0.2), var(--card-shadow);
}

.cert-corner {
  position: absolute;
  width: 80px; height: 80px;
  border-color: rgba(240,180,41,0.3);
  border-style: solid;
}
.cert-corner.tl { top: 12px; left: 12px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
.cert-corner.tr { top: 12px; right: 12px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
.cert-corner.bl { bottom: 12px; left: 12px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
.cert-corner.br { bottom: 12px; right: 12px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }

.cert-icon { font-size: 3.5rem; margin-bottom: 0.5rem; display: block; }
.cert-sub { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; }
.cert-title { font-family: var(--font-display); font-size: 1.8rem; font-weight: 900; color: var(--white); margin-bottom: 1rem; line-height: 1.2; }
.cert-name { font-size: 1.3rem; font-weight: 700; color: var(--accent); border-bottom: 1px solid rgba(240,180,41,0.4); display: inline-block; padding-bottom: 0.3rem; margin-bottom: 0.75rem; min-width: 200px; }
.cert-score { font-size: 2.5rem; font-weight: 800; color: var(--primary-light); line-height: 1; }
.cert-score-label { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 1rem; }
.cert-date { font-size: 0.78rem; color: var(--text-muted); margin-top: 1rem; }
.cert-stamp {
  position: absolute; bottom: 1.5rem; right: 2rem;
  width: 70px; height: 70px; border-radius: 50%;
  border: 3px solid rgba(13,124,78,0.5);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 0.5rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(13,124,78,0.7); text-align: center; line-height: 1.4;
}

/* ============================================
   SCENARIO EXPLORER / SIMULATOR
   ============================================ */
.simulator-wrap {
  background: var(--surface-2);
  border: 1px solid rgba(13,124,78,0.2);
  border-radius: 16px;
  padding: 0.7rem 0.85rem;
  margin-top: 0.6rem;
}

.sim-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.sim-sliders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 0.9rem;
  margin-bottom: 0.6rem;
}

@media(max-width:600px) { .sim-sliders { grid-template-columns: 1fr; } }

.sim-slider-group label {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
  font-weight: 500;
}

.sim-slider-group label span {
  color: var(--accent);
  font-weight: 700;
}

input[type="range"] {
  width: 100%;
  -webkit-appearance: none;
  height: 6px;
  border-radius: 3px;
  background: rgba(139,175,197,0.15);
  outline: none;
  cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--primary-light);
  border: 2px solid var(--surface);
  box-shadow: 0 0 8px rgba(22,168,103,0.5);
  transition: background 0.2s, transform 0.2s;
}

input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); }

.sim-result {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.4rem;
  padding: 0.5rem;
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  border: 1px solid rgba(13,124,78,0.15);
}

.sim-metric {
  text-align: center;
  padding: 0.3rem;
}

.sim-metric .m-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.sim-metric .m-label {
  font-size: 0.6rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
  line-height: 1.25;
}

/* ============================================
   SCENE TRANSITION — slide effect
   ============================================ */
.scene {
  animation-fill-mode: both;
}

@keyframes slideFromRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideFromLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.scene.slide-right { animation: slideFromRight 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both; }
.scene.slide-left  { animation: slideFromLeft  0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

/* ============================================
   QUOTE BLOCK
   ============================================ */
.quote-block {
  border-left: 3px solid var(--primary-light);
  padding: 0.6rem 1rem;
  margin: 0.6rem 0;
  background: rgba(13,124,78,0.06);
  border-radius: 0 10px 10px 0;
}

.quote-block p {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--text-main);
  line-height: 1.5;
}

.quote-block cite {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.68rem;
  color: var(--text-muted);
  font-style: normal;
}

/* ============================================
   STEP PROCESS — grid 2 kolom bergaya kartu bernomor
   (bukan lagi timeline vertikal 1 kolom, supaya tetap
   ringkas dan muat dalam frame 16:9 walau berisi banyak butir)
   ============================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem 0.9rem;
  margin: 0.6rem 0;
}

.step {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid rgba(139,175,197,0.12);
  border-radius: 10px;
  padding: 0.55rem 0.7rem;
}

.step-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white;
  font-size: 0.68rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.step-body h4 {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.15rem;
  line-height: 1.3;
}

.step-body p {
  font-size: 0.68rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* ============================================
   NAME INPUT (for certificate)
   ============================================ */
.name-input-wrap {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--gap-sm);
  flex-wrap: wrap;
}

.name-input {
  flex: 1;
  min-width: 200px;
  padding: 0.7rem 1rem;
  background: var(--surface-2);
  border: 1px solid rgba(139,175,197,0.2);
  border-radius: 8px;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.9rem;
  outline: none;
  transition: border-color var(--dur);
}

.name-input:focus { border-color: var(--primary); }
.name-input::placeholder { color: var(--text-muted); }

/* ============================================
   RESPONSIVE EXTRAS
   ============================================ */
@media (max-width: 600px) {
  .bar-row { grid-template-columns: 100px 1fr 45px; }
  .bar-label { font-size: 0.7rem; }
  .sim-sliders { grid-template-columns: 1fr; }
  .chart-wrap { flex-direction: column; }
}

/* ============================================
   PRINT STYLES (for certificate)
   ============================================
   Tujuan: saat window.print() dipanggil dari tombol "Cetak / Simpan
   PDF" di sertifikat, hasil cetak HANYA berisi kartu sertifikat itu
   sendiri — bersih tanpa HUD XP, karakter guru, toast badge,
   progress-tracker, navigasi scene, sisa kuis, atau elemen UI
   lainnya yang ikut ada di DOM saat itu.

   Teknik: #cert-print-only adalah kontainer khusus di level teratas
   <body> (lihat index.html), diisi ulang dengan salinan kartu
   sertifikat setiap kali generateCertificate() dipanggil (main.js).
   Saat mode cetak, SEMUA anak langsung <body> disembunyikan KECUALI
   kontainer ini. Pendekatan ini jauh lebih andal daripada mencoba
   "melepaskan" elemen sertifikat asli dari tata-letak leluhurnya yang
   berlapis (stage 16:9 terkunci rasio, #app absolute, .scene/.subscene
   absolute, overflow:clip, dst.) lewat trik CSS position/visibility —
   trik semacam itu rawan meleset di berbagai mesin cetak/PDF (lihat
   riwayat percobaan di git blame kalau butuh detail). */
@media print {
  body > * { display: none !important; }
  #cert-print-only { display: block !important; }

  /* body memakai display:flex (lihat style.css) untuk memusatkan
     stage 16:9 di layar normal — kalau tidak direset, flex ini ikut
     memusatkan #cert-print-only secara vertikal di tengah halaman
     cetak alih-alih mengalir wajar dari atas. */
  body {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  #cert-print-only .certificate {
    margin: 1.5cm auto;
    box-shadow: none;
    border: 2px solid #888;
  }
}

/* ============================================================
   FITUR BARU — EXTRA FEATURES
   ============================================================ */

/* ── 1. PROGRESS TRACKER (floating panel) ── */
#progress-tracker {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  padding-right: 4px;
}

.pt-step {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.pt-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(139,175,197,0.2);
  border: 2px solid rgba(139,175,197,0.3);
  transition: all 0.3s ease;
  position: relative;
}

.pt-step.done .pt-dot {
  background: var(--primary-light);
  border-color: var(--primary-light);
  box-shadow: 0 0 8px rgba(22,168,103,0.6);
}

.pt-step.active .pt-dot {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(240,180,41,0.6);
  transform: scale(1.4);
}

.pt-label {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--surface-2);
  border: 1px solid rgba(139,175,197,0.15);
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(8px);
  transition: all 0.2s ease;
  pointer-events: none;
}

.pt-step:hover .pt-label,
.pt-step.active .pt-label {
  opacity: 1;
  transform: translateX(0);
}

.pt-step.active .pt-label { color: var(--accent); border-color: rgba(240,180,41,0.3); }
.pt-step.done .pt-label   { color: var(--primary-light); border-color: rgba(22,168,103,0.25); }

/* ── 2. DARK/LIGHT MODE TOGGLE ── */
#mode-toggle {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(13,124,78,0.2);
  border: 1px solid rgba(13,124,78,0.4);
  color: var(--text-main);
  font-size: 1.05rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}
#mode-toggle:hover {
  background: var(--primary);
  transform: rotate(20deg) scale(1.1);
}

/* Light mode overrides */
body.light-mode {
  --surface:      #F0F7F4;
  --surface-2:    #FFFFFF;
  --surface-3:    #E8F5EE;
  --text-main:    #1A2B3C;
  --text-muted:   #4A6B7C;
  --text-dark:    #1A2B3C;
  /* body tetap hitam (letterbox bar) — hanya #stage-16-9 yang berganti warna via var(--surface) */
}
body.light-mode .scene-header    { background: linear-gradient(180deg, var(--surface-2) 0%, transparent); }
body.light-mode .card            { background: var(--surface-2); }
body.light-mode #main-nav        { background: rgba(240,247,244,0.95); border-color: rgba(13,124,78,0.2); }
body.light-mode .quiz-container  { background: var(--surface-2); }
body.light-mode .simulator-wrap  { background: var(--surface-2); }
body.light-mode .petunjuk-modal  { background: var(--surface-2); }
body.light-mode .glossary-item   { background: var(--surface-3); }
body.light-mode #intro-splash    { background: #F0F7F4; }
body.light-mode .splash-bg       { filter: brightness(1.4) saturate(0.7); }

/* ── INFO MENU: Referensi Materi & Info Pengembang ──
   Diletakkan sebelum (di kiri) icon speaker #audio-controls, mengikuti
   urutan interval 2.5rem yang sudah dipakai tombol-tombol pojok kanan
   atas lain: #close-btn (right:1rem) → #fs-btn (right:3.5rem) →
   #audio-controls (right:6rem) → tombol ini (right:8.5rem). */
#info-menu-wrap {
  position: absolute;
  top: 1rem;
  right: 8.5rem;
  z-index: 1000;
}

#info-menu-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(13,124,78,0.2);
  border: 1px solid rgba(13,124,78,0.4);
  color: var(--text-main);
  font-size: 1.05rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(8px);
}
#info-menu-btn:hover { background: var(--primary); transform: scale(1.1); }

#info-menu-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  min-width: 210px;
  background: var(--surface-2);
  border: 1px solid rgba(13,124,78,0.4);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s var(--ease);
}
#info-menu-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#info-menu-dropdown button {
  background: none;
  border: none;
  color: var(--text-main);
  font-size: 0.85rem;
  text-align: left;
  padding: 0.6rem 0.7rem;
  border-radius: 9px;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}
#info-menu-dropdown button:hover { background: rgba(13,124,78,0.18); }

/* ── 5. MINI GAME — TEBAK EBT ── */
#minigame-overlay {
  position: absolute; inset: 0; z-index: 2500;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
#minigame-overlay.show { opacity: 1; visibility: visible; }

.minigame-modal {
  background: var(--surface-2);
  border: 1px solid rgba(13,124,78,0.4);
  border-radius: 20px;
  max-width: 520px; width: 100%;
  padding: 1.75rem;
  text-align: center;
  animation: modalIn 0.35s cubic-bezier(0.22,0.61,0.36,1) both;
}

.mg-header { margin-bottom: 1.25rem; }
.mg-header h3 {
  font-family: var(--font-display);
  font-size: 1.4rem; color: var(--primary-light);
  margin-bottom: 0.25rem;
}
.mg-header p { font-size: 0.8rem; color: var(--text-muted); }

.mg-timer-ring {
  position: relative;
  width: 80px; height: 80px;
  margin: 0 auto 1rem;
}
.mg-timer-ring svg { transform: rotate(-90deg); }
.mg-timer-track { fill: none; stroke: rgba(139,175,197,0.1); stroke-width: 5; }
.mg-timer-fill  { fill: none; stroke: var(--primary-light); stroke-width: 5;
  stroke-linecap: round; transition: stroke-dashoffset 0.9s linear;
  stroke-dasharray: 220; stroke-dashoffset: 0; }
.mg-timer-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800; color: var(--white);
}

.mg-question {
  font-size: 1rem; font-weight: 600; color: var(--white);
  line-height: 1.5; margin-bottom: 1.25rem;
  min-height: 60px;
}

.mg-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.mg-opt {
  padding: 0.7rem 0.5rem;
  background: rgba(139,175,197,0.05);
  border: 1px solid rgba(139,175,197,0.15);
  border-radius: 8px;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}
.mg-opt:hover:not(:disabled) {
  background: rgba(13,124,78,0.15);
  border-color: var(--primary);
  color: var(--white);
}
.mg-opt.mg-correct { background: rgba(22,168,103,0.2); border-color: var(--primary-light); color: var(--primary-light); }
.mg-opt.mg-wrong   { background: rgba(224,82,82,0.15); border-color: var(--danger); color: #f08080; }
.mg-opt:disabled   { cursor: not-allowed; }

.mg-score-row {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.mg-stat { text-align: center; }
.mg-stat .ms-val { font-size: 1.4rem; font-weight: 800; color: var(--accent); }
.mg-stat .ms-lbl { font-size: 0.65rem; color: var(--text-muted); }

.mg-streak {
  font-size: 0.75rem;
  color: var(--accent);
  min-height: 20px;
  font-weight: 700;
}

/* ── SORTIR ENERGI (reuses .minigame-modal / .mg-* above) ── */
#sort-overlay {
  position: absolute; inset: 0; z-index: 2500;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
#sort-overlay.show { opacity: 1; visibility: visible; }

.sg-card {
  background: rgba(139,175,197,0.05);
  border: 1px solid rgba(139,175,197,0.15);
  border-radius: 14px;
  padding: 1.5rem 1rem;
  margin-bottom: 1.25rem;
  min-height: 110px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.4rem;
  transition: background 0.25s, border-color 0.25s;
}
.sg-card .sg-emoji { font-size: 2.75rem; line-height: 1; }
.sg-card .sg-name  { font-size: 1rem; font-weight: 700; color: var(--white); text-align: center; }
.sg-card.sg-flash-correct { background: rgba(22,168,103,0.2); border-color: var(--primary-light); }
.sg-card.sg-flash-wrong   { background: rgba(224,82,82,0.15); border-color: var(--danger); }

.sg-choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.sg-choice {
  padding: 0.9rem 0.5rem;
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid;
  transition: all 0.2s;
}
.sg-choice:disabled { cursor: not-allowed; opacity: 0.6; }
.sg-choice-ebt {
  background: rgba(22,168,103,0.1);
  border-color: rgba(22,168,103,0.4);
  color: var(--primary-light);
}
.sg-choice-ebt:hover:not(:disabled) { background: rgba(22,168,103,0.25); }
.sg-choice-fosil {
  background: rgba(224,82,82,0.08);
  border-color: rgba(224,82,82,0.35);
  color: #f08080;
}
.sg-choice-fosil:hover:not(:disabled) { background: rgba(224,82,82,0.2); }

/* ── RANCANG PEMBANGKIT (Drag & Drop, reuses .minigame-modal / .mg-* di atas) ── */
#dropgame-overlay {
  position: absolute; inset: 0; z-index: 2500;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
#dropgame-overlay.show { opacity: 1; visibility: visible; }

.dg-modal { max-width: 680px; max-height: 88vh; overflow-y: auto; }

.dg-tip {
  font-size: 0.68rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 0.6rem;
}

.dg-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 1rem;
  padding: 0.7rem;
  background: rgba(0,0,0,0.22);
  border-radius: 12px;
}

.dg-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.5rem 0.75rem;
  border-radius: 14px;
  background: rgba(139,175,197,0.08);
  border: 1px solid rgba(139,175,197,0.25);
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.15s, opacity 0.15s, border-color 0.15s;
}
.dg-chip:hover { border-color: var(--primary); transform: translateY(-2px); }
.dg-chip:active { cursor: grabbing; }
.dg-chip-dragging { opacity: 0.3; }
.dg-chip-icon { font-size: 1.4rem; line-height: 1; }
.dg-chip-label { font-size: 0.62rem; font-weight: 700; color: var(--text-main); white-space: nowrap; }

.dg-chip.dg-hint-pulse { animation: dgHintPulse 0.9s infinite; border-color: var(--accent); }
@keyframes dgHintPulse {
  0%   { box-shadow: 0 0 0 0 rgba(240,180,41,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(240,180,41,0); }
  100% { box-shadow: 0 0 0 0 rgba(240,180,41,0); }
}

.dg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
  gap: 0.6rem;
}

.dg-card {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(139,175,197,0.25);
  transition: transform 0.15s, outline 0.15s;
}
.dg-card.drop-hover { outline: 3px solid var(--accent); transform: scale(1.035); }
.dg-card.dg-card-solved { border-color: var(--primary-light); }

.dg-card-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,22,40,0.1) 0%, rgba(10,22,40,0.55) 52%, rgba(10,22,40,0.94) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0.5rem;
  text-align: left;
}
.dg-card-name {
  font-weight: 800; font-size: 0.76rem; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  margin-bottom: 0.3rem;
}

.dg-slot {
  border: 2px dashed rgba(255,255,255,0.45);
  border-radius: 8px;
  padding: 0.35rem;
  font-size: 0.65rem;
  text-align: center;
  color: rgba(255,255,255,0.85);
  transition: all 0.2s;
  display: flex; align-items: center; justify-content: center; gap: 0.3rem;
}
.dg-slot.filled {
  border-style: solid;
  flex-direction: column;
  padding: 0.3rem 0.2rem;
}
.dg-slot.dg-correct { border-color: var(--primary-light); background: rgba(22,168,103,0.28); }
.dg-slot-icon { font-size: 1.15rem; line-height: 1; }
.dg-slot-label { font-size: 0.65rem; font-weight: 700; color: #fff; }

.dg-slot.dg-wrong-flash {
  animation: dgShake 0.4s;
  border-color: var(--danger);
  background: rgba(224,82,82,0.28);
}
@keyframes dgShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.dg-reason {
  font-size: 0.6rem;
  line-height: 1.35;
  color: #fff;
  margin-top: 0.3rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: all 0.3s;
}
.dg-reason.show { max-height: 90px; opacity: 1; }
.dg-reason.dg-hint-text { color: var(--accent); font-weight: 700; }

#dg-ghost {
  position: fixed;
  z-index: 3000;
  pointer-events: none;
  transform: translate(-50%, -50%);
  display: none;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  white-space: nowrap;
}
#dg-ghost.show { display: flex; }

/* ── GAME CHOOSER — Pilih Mini Game ── */
#gc-overlay {
  position: absolute; inset: 0; z-index: 2500;
  background: rgba(0,0,0,0.8);
  backdrop-filter: blur(10px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
#gc-overlay.show { opacity: 1; visibility: visible; }
.gc-modal { max-width: 460px; }

.gc-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.gc-option {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.85rem 0.9rem;
  background: rgba(139,175,197,0.06);
  border: 1px solid rgba(139,175,197,0.2);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  transition: all 0.2s;
}
.gc-option:hover {
  background: rgba(13,124,78,0.15);
  border-color: var(--primary);
  transform: translateX(3px);
}
.gc-icon { font-size: 1.8rem; flex: none; line-height: 1; }
.gc-text { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; min-width: 0; }
.gc-title { font-size: 0.92rem; font-weight: 800; color: var(--white); }
.gc-desc { font-size: 0.72rem; color: var(--text-muted); line-height: 1.35; }
.gc-arrow { font-size: 1.4rem; color: var(--text-muted); flex: none; }
.gc-option:hover .gc-arrow { color: var(--primary-light); }

/* ── FEATURE BUTTONS ROW (bottom-left cluster) ── */
#feature-cluster {
  position: absolute;
  bottom: 88px;
  right: 1rem;
  z-index: 600;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-end;
}

.feat-btn {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(139,175,197,0.25);
  background: rgba(10,22,40,0.85);
  color: var(--text-main);
  font-size: 1.05rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease;
  backdrop-filter: blur(8px);
  position: relative;
}
.feat-btn:hover { transform: scale(1.12); border-color: var(--primary); }
.feat-btn[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  right: 48px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--surface-3);
  border: 1px solid rgba(139,175,197,0.2);
  color: var(--text-main);
  font-size: 0.7rem;
  padding: 0.3rem 0.6rem;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
}

.feat-btn-active { border-color: var(--accent) !important; background: rgba(240,180,41,0.15) !important; }

/* Toast notification */
.toast {
  position: absolute;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-3);
  border: 1px solid rgba(13,124,78,0.4);
  color: var(--text-main);
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  z-index: 5000;
  opacity: 0;
  transition: all 0.3s ease;
  white-space: nowrap;
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ============================================
   MODE PADAT UNTUK STAGE SANGAT PENDEK
   (mis. window < ~650px tinggi) — CATATAN: blok ini SENGAJA
   diletakkan di akhir extras.css (bukan di style.css) karena
   file ini dimuat lebih akhir dari style.css. Jika rule dengan
   spesifisitas sama diletakkan di style.css, ia akan tertimpa oleh
   rule non-media-query di file yang dimuat belakangan (extras.css /
   features.css) walau kondisi media query terpenuhi. Supaya mode
   padat ini benar-benar berlaku, ia harus berada di file yang
   dimuat PALING AKHIR di antara file yang mendefinisikan selector
   yang sama.
   ============================================ */
@media (max-height: 650px) {
  /* PERBAIKAN: padding-top diperbesar (bukan 0.4rem) supaya scene-header
     tetap mulai DI BAWAH #xp-hud & tombol kanan-atas — keduanya overlay
     "position:absolute" terpisah yang selalu menempati ~8-50px teratas
     stage. .scene-title juga diganti dari clamp(...vw...) ke clamp(...vh...)
     karena di HP landscape (lebar besar, tinggi kecil) versi vw tetap
     membuat judul terlalu besar utk stage yg pendek. Tanpa dua perbaikan
     ini, badge "SCENE 0X" & judul scene selalu tertabrak/ketiban HUD di
     HP landscape sungguhan (mis. iPhone SE/12/13, ~360-430px tinggi). */
  .scene-header { padding: 3rem 1rem 0.25rem; }
  .scene-num-badge { margin-bottom: 0.2rem; font-size: 0.55rem; padding: 0.15rem 0.6rem; }
  .scene-title { font-size: clamp(0.85rem, 3.2vh, 1.3rem); line-height: 1.08; }
  .scene-desc { font-size: 0.62rem; margin-top: 0.2rem; }
  .subscene-nav { margin: 0.3rem 0 0.05rem; }
  .subnav-dot { padding: 0.25rem 0.7rem; font-size: 0.65rem; }
  .scene-content { padding: 0.5rem 0.8rem 0.6rem; }
  .subscene-footer { margin-top: 0.5rem; }
  .section-title { font-size: 0.8rem; margin: 0.1rem 0 0.35rem; }
  .callout { padding: 0.45rem 0.65rem; margin: 0.4rem 0; }
  .card-illust { aspect-ratio: 3.6 / 1; }
  .tech-illust { aspect-ratio: 240 / 70; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 0.3rem 0.5rem; margin: 0.35rem 0; }
  .step { padding: 0.3rem 0.4rem; gap: 0.4rem; }
  .step-num { width: 20px; height: 20px; font-size: 0.6rem; }
  .step-body h4 { font-size: 0.64rem; margin-bottom: 0.05rem; }
  .step-body p { font-size: 0.58rem; line-height: 1.25; }
  .quote-block { padding: 0.4rem 0.7rem; margin: 0.4rem 0; }
  .quote-block p { font-size: 0.7rem; line-height: 1.35; }
  .progress-list { margin-top: 0.35rem; gap: 0.3rem; }
  .progress-item { padding: 0.35rem 0.5rem; }
  .info-block { padding: 0.6rem 0.7rem; }
  .simulator-wrap { padding: 0.5rem 0.65rem; margin-top: 0.4rem; }
  .sim-sliders { gap: 0.25rem 0.7rem; margin-bottom: 0.4rem; }
  .sim-slider-group label { margin-bottom: 0.1rem; }
  .quiz-container { padding: 0.5rem 0.6rem; margin-top: 0.35rem; }
  .quiz-question { font-size: 0.78rem; margin-bottom: 0.35rem; }
  .quiz-opt { padding: 0.35rem 0.6rem; font-size: 0.7rem; }
  .quiz-opt-letter { width: 18px; height: 18px; font-size: 0.6rem; }
  .quiz-options { gap: 0.25rem; }
  .sim-result { padding: 0.35rem; gap: 0.25rem; }
  .sim-metric { padding: 0.15rem; }
  .sim-metric .m-val { font-size: 0.9rem; }
  .sim-footnote { display: none; }
}

/* ============================================
   MODE PADAT UNTUK "LANJUT TETAP DALAM MODE POTRET"
   (ditemukan saat pengujian lintas-perangkat)
   ============================================
   MASALAH: blok "MODE PADAT" di atas (@media max-height: 650px) hanya
   aktif saat window.innerHeight BENAR-BENAR pendek — ini akurat untuk
   HP landscape sungguhan, tapi TIDAK PERNAH aktif saat pengguna memilih
   "Lanjutkan tetap dalam mode potret" (lihat #stage-16-9.rotate-dismissed
   di style.css). Pada mode itu window.innerHeight tetap TINGGI (ukuran
   potret asli, mis. 780px) — yang menyempit hanya kanvas EFEKTIF di
   dalam #stage-16-9 (≈ lebar HP itu sendiri, umumnya 320-430px setelah
   rotasi). Akibatnya .scene-title dkk. tetap dirender di ukuran normal
   (clamp min 1.15rem) dan terlihat sesak / bertabrakan dengan popup
   badge di HP sempit (≤360px).

   SOLUSI: blok terpisah (BUKAN vh-based, karena vh di sini mengacu ke
   viewport asli yang tinggi/salah konteks — lihat penjelasan di atas)
   dengan nilai rem tetap yang dikalibrasi meniru pendekatan splash
   screen (lihat @media (max-height:500px), (orientation:portrait) and
   (max-width:900px) di style.css). Diberi bobot cascade lebih tinggi
   lewat body.rotate-dismissed supaya tidak tertimpa rule non-media-query
   di atasnya (sesuai catatan urutan file di awal file ini). */
@media (orientation: portrait) and (max-width: 480px) {
  body.rotate-dismissed .scene-header { padding: 0.5rem 0.7rem 0.3rem; }
  body.rotate-dismissed .scene-num-badge { margin-bottom: 0.2rem; font-size: 0.55rem; padding: 0.15rem 0.6rem; }
  body.rotate-dismissed .scene-title { font-size: 0.92rem; line-height: 1.12; }
  body.rotate-dismissed .scene-desc { font-size: 0.62rem; margin-top: 0.15rem; }
  body.rotate-dismissed .scene-content { padding: 0.4rem 0.6rem 0.5rem; }

  /* Scene 0 (Hero/Beranda) memakai selector & struktur terpisah dari
     .scene-header/.scene-title di atas — perbaikan yang sama dibutuhkan
     di sini, sama seperti kenapa @media(max-height:430px) and
     (orientation:landscape) di style.css punya versi khusus utk hero.
     Nilai di bawah sengaja dibuat mirip (bukan sama persis) dengan versi
     landscape-asli di style.css karena lebar efektif kanvasnya berbeda. */
  body.rotate-dismissed #scene-0 { padding: 0.4rem 0.8rem; }
  body.rotate-dismissed .hero-eyebrow {
    font-size: 0.58rem; padding: 0.18rem 0.6rem; margin-bottom: 0.25rem;
  }
  body.rotate-dismissed .hero-title {
    font-size: 1rem; line-height: 1.1; margin-bottom: 0.25rem;
  }
  body.rotate-dismissed .hero-subtitle {
    font-size: 0.62rem; line-height: 1.3; margin-bottom: 0.3rem;
  }
  body.rotate-dismissed .hero-stats { gap: 0.3rem; margin-bottom: 0.3rem; }
  body.rotate-dismissed .stat-pill { padding: 0.22rem 0.6rem; border-radius: 8px; }
  body.rotate-dismissed .stat-pill .num { font-size: 0.85rem; }
  body.rotate-dismissed .stat-pill .label { font-size: 0.48rem; margin-top: 0.1rem; }
  body.rotate-dismissed .hero-topics { gap: 0.22rem; margin-bottom: 0.3rem; }
  body.rotate-dismissed .topic-chip { font-size: 0.56rem; padding: 0.16rem 0.5rem; }
  body.rotate-dismissed .hero-cta-row { gap: 0.35rem !important; margin-bottom: 0.2rem !important; }
  body.rotate-dismissed .btn-start { font-size: 0.64rem; padding: 0.4rem 0.85rem; gap: 0.3rem; }
  body.rotate-dismissed .hero-hint { display: none; }
}