/* ============================================
   BAHAN AJAR INTERAKTIF - ENERGI TERBARUKAN
   Design System & Global Styles
   ============================================ */

/* Font lokal — lihat assets/css/fonts.css */

/* ---- CSS Custom Properties ---- */
:root {
  /* Palette: Deep Forest Tech */
  --primary:       #0D7C4E;   /* emerald green */
  --primary-dark:  #064E31;
  --primary-light: #16A867;
  --accent:        #F0B429;   /* solar amber */
  --accent-2:      #3B9EDB;   /* sky blue */
  --surface:       #0A1628;   /* deep navy */
  --surface-2:     #112240;
  --surface-3:     #1A3152;
  --text-main:     #E8F4F0;
  --text-muted:    #8BAFC5;
  --text-dark:     #1A2B3C;
  --white:         #FFFFFF;
  --danger:        #E05252;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* Spacing */
  --gap-xs: 0.4rem;
  --gap-sm: 0.6rem;
  --gap-md: 1.05rem;
  --gap-lg: 1.6rem;
  --gap-xl: 2.5rem;

  /* Transitions */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 0.35s;

  /* Shadows */
  --glow-green: 0 0 24px rgba(13,124,78,0.5);
  --glow-amber: 0 0 24px rgba(240,180,41,0.4);
  --card-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  background: #000;
  color: var(--text-main);
  overflow: hidden;
  line-height: 1.65;
  min-height: 100vh;
  /* Body hanya berfungsi sebagai "bioskop" gelap yang me-letterbox stage 16:9 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================
   STAGE 16:9 — bingkai tetap rasio 16:9
   Semua UI (scene, HUD, modal, overlay) hidup di dalam kotak ini
   supaya media selalu tampil sebagai layar 16:9, di layar apa pun.
   ============================================ */
#stage-16-9 {
  position: relative;
  /* BUG PRE-EXISTING (ditemukan saat pengujian Scene 5): elemen yang
     "disembunyikan" lewat transform di luar kanvas (mis. #badge-popup
     yang default-nya translateX(120%), #levelup-overlay, dsb.) tetap
     dihitung sebagai "scrollable overflow" oleh Chromium walau overflow
     di sini sudah "hidden" — overflow:hidden HANYA menyembunyikan
     scrollbar & mencegah scroll dari mouse/keyboard, TAPI tetap
     mengizinkan scroll terprogram, termasuk auto-scroll bawaan browser
     saat sebuah tombol menerima focus (mis. saat mengklik pilihan
     jawaban kuis). Akibatnya seluruh stage 16:9 bisa tergeser horizontal
     sesaat dan menampakkan elemen yang seharusnya tersembunyi.
     "overflow: clip" (beda dgn "hidden") melarang SEMUA scroll —
     termasuk yang terprogram — sehingga stage benar-benar terkunci
     seperti bingkai slide, tanpa perlu mengubah tiap elemen off-canvas
     satu per satu. */
  overflow: clip;
  background: var(--surface);
  color: var(--text-main);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 20px 80px rgba(0,0,0,0.7);
  /* Trik rasio tetap tanpa JS: batasi lebar & tinggi silang lewat vw/vh */
  width: 100vw;
  height: 56.25vw;   /* 9 / 16 */
  max-height: 100vh;
  max-width: 177.78vh; /* 16 / 9 */
}

/* ============================================
   ROTATE-DEVICE OVERLAY — panduan putar layar di HP mode potret
   ============================================ */
#rotate-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: #050B14;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

/* Kontainer khusus cetak sertifikat — selalu tersembunyi di layar
   normal (screen). Hanya dimunculkan lewat @media print di
   extras.css. Lihat generateCertificate() di main.js untuk bagaimana
   isinya diisi. */
#cert-print-only { display: none; }

.rotate-card {
  max-width: 380px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.rotate-icon {
  font-size: 3.4rem;
  animation: rotateHint 1.8s ease-in-out infinite;
}

@keyframes rotateHint {
  0%, 100% { transform: rotate(0deg); }
  45%      { transform: rotate(-90deg); }
  55%      { transform: rotate(-90deg); }
}

.rotate-title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--text-main);
}

.rotate-desc {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.rotate-continue-btn {
  margin-top: 0.4rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--dur) var(--ease);
}
.rotate-continue-btn:hover { opacity: 1; color: var(--primary-light); }

/* Tampil HANYA saat mode potret di layar sempit (HP/tablet) —
   pada layar lebar (desktop/laptop) atau mode lanskap, overlay ini
   tetap disembunyikan karena #stage-16-9 sudah tampil optimal.
   PENTING: di-scope ke "screen" (bukan sekadar orientation+max-width)
   supaya TIDAK ikut ter-trigger saat mode cetak (window.print()) —
   halaman cetak default berbentuk A4 potret & sempit, yang tanpa
   scope "screen" ini akan salah dikira "HP mode potret" dan overlay
   ini menutupi seluruh hasil cetak sertifikat. Lihat juga jaring
   pengaman tambahan di blok @media print pada extras.css. */
@media screen and (orientation: portrait) and (max-width: 900px) {
  #rotate-overlay { display: flex; }
}

/* Setelah pengguna memilih "Lanjutkan tetap dalam mode potret" */
body.rotate-dismissed #rotate-overlay { display: none !important; }

/* ============================================
   MODE POTRET DIPAKSA — putar stage 90° via CSS
   ============================================
   PERBAIKAN: sebelumnya, setelah overlay "Putar Perangkat Anda"
   ditutup, #stage-16-9 tetap dihitung dengan rumus width:100vw /
   height:56.25vw — di layar potret sempit ini menghasilkan bingkai
   setinggi ±220px saja (strip tipis di tengah layar), sehingga
   header, kartu HUD, tombol, dan popup yang didesain untuk kanvas
   16:9 penuh saling bertumpuk parah.

   Solusi: begitu pengguna memilih tetap lanjut di mode potret,
   #stage-16-9 diputar 90° dengan CSS transform sehingga tetap
   me-render UI dalam bentuk landscape 16:9 utuh (persis seperti di
   desktop/tablet-landscape — TIDAK ADA elemen yang bertumpuk),
   hanya saja bingkai tersebut diputar agar mengisi layar potret
   pengguna secara visual. Rumus width/height sengaja ditukar-silang
   dengan rumus asli (vw↔vh) supaya rasio 16:9 tetap terjaga persis
   sama seperti trik pada #stage-16-9 versi normal di atas.

   PENTING: di-scope ke "screen" juga (lihat alasan di blok
   #rotate-overlay di atas) — tanpa ini, transform rotate(-90deg)
   ini akan ikut ter-trigger saat mode cetak dan membuat sertifikat
   tercetak miring/terpotong. */
@media screen and (orientation: portrait) and (max-width: 900px) {
  body.rotate-dismissed { overflow: hidden; }

  body.rotate-dismissed #stage-16-9 {
    position: fixed;
    top: 50%;
    left: 50%;
    height: 100vw;
    width: 177.78vw;     /* 16/9 dari 100vw */
    max-height: 56.25vh; /* 9/16 dari 100vh — cabang saat lebar jadi pembatas */
    max-width: 100vh;
    transform: translate(-50%, -50%) rotate(-90deg);
    transform-origin: center center;
  }
}

/* ============================================
   AUDIO CONTROLS
   ============================================ */
#audio-controls {
  position: absolute;
  top: 1rem;
  right: 6rem;
  z-index: 1000;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.audio-btn {
  position: relative;
  background: rgba(13,124,78,0.3);
  border: 1px solid var(--primary);
  color: var(--text-main);
  width: 40px; height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  transition: all var(--dur) var(--ease);
  backdrop-filter: blur(8px);
}

.audio-btn:hover {
  background: var(--primary);
  box-shadow: var(--glow-green);
  transform: scale(1.1);
}

.audio-btn.muted { opacity: 0.5; }

/* ============================================
   NAVIGATION / PROGRESS
   ============================================ */
#main-nav {
  position: absolute;
  left: 1rem;
  bottom: 150px;
  z-index: 900;
  background: rgba(10, 22, 40, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(13,124,78,0.3);
  border-radius: 16px;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.3rem;
  max-height: min(64vh, 432px);
  overflow-y: auto;
  overflow-x: hidden;
  box-shadow: var(--card-shadow);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Disembunyikan: digeser keluar ke kiri supaya tidak menutupi konten materi */
#main-nav.collapsed {
  transform: translateX(calc(-100% - 1.6rem));
  opacity: 0;
  pointer-events: none;
}

/* BUG PRE-EXISTING (ditemukan saat pengujian): #main-nav memakai
   position:absolute tanpa jatah ruang (gutter), sehingga di stage
   sempit ia menutupi teks konten. Aturan penanganannya dipindah ke
   akhir inline-fullscreen.css (lihat catatan di sana) supaya urutan
   cascade CSS benar dan tidak tertimpa aturan dasar #main-nav /
   #nav-show-btn yang didefinisikan setelah titik ini di style.css. */

/* ── Handle "sembunyikan" di dalam panel nav (baris paling atas) ── */
.nav-collapse-btn {
  flex: none;
  width: 44px;
  height: 22px;
  background: transparent;
  border: 1px solid rgba(139,175,197,0.2);
  border-radius: 8px;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  margin-bottom: 0.15rem;
  transition: all var(--dur) var(--ease);
}
.nav-collapse-btn:hover { color: var(--white); background: rgba(224,82,82,0.2); border-color: var(--danger); }

/* ── Tombol bulat untuk memunculkan kembali nav saat sedang disembunyikan ── */
#nav-show-btn {
  position: absolute;
  left: 1rem;
  bottom: 150px;
  z-index: 900;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(13,124,78,0.85);
  border: 1px solid var(--primary);
  color: var(--white);
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--glow-green);
  transition: transform var(--dur) var(--ease);
}
#nav-show-btn:hover { transform: scale(1.1); }
#nav-show-btn.visible { display: flex; }

.nav-scene-btn, .nav-extra-btn {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0.15rem;
  background: transparent;
  border: 1px solid rgba(139,175,197,0.2);
  border-radius: 10px;
  color: var(--text-muted);
  font-family: var(--font-body);
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  position: relative;
}

.nav-scene-btn.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: var(--glow-green);
}

.nav-scene-btn:hover:not(.active), .nav-extra-btn:hover {
  border-color: var(--primary-light);
  color: var(--text-main);
  background: rgba(13,124,78,0.15);
}

/* Mini game button sits below the scenes — small separator marks it as an extra tool */
.nav-extra-btn {
  margin-top: 0.3rem;
  padding-top: calc(0.15rem + 8px);
  border-top: 1px solid rgba(139,175,197,0.2);
  border-color: rgba(240,180,41,0.35);
  color: var(--accent);
}
.nav-extra-btn:hover {
  border-color: var(--accent);
  color: var(--white);
  background: rgba(240,180,41,0.15);
}

/* Icon + micro-label inside the vertical rail button */
.nav-scene-btn .nav-icon, .nav-extra-btn .nav-icon {
  font-size: 1.15rem;
  line-height: 1;
}

.nav-scene-btn .nav-label, .nav-extra-btn .nav-label {
  font-size: 0.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: inherit;
  opacity: 0.85;
  line-height: 1;
}

/* Tooltip flies out to the right since the rail sits on the left edge */
.nav-scene-btn[data-tip]:hover::after, .nav-extra-btn[data-tip]:hover::after {
  bottom: auto;
  top: 50%;
  left: calc(100% + 10px);
  transform: translateY(-50%);
  white-space: nowrap;
}

/* ============================================
   SCENES WRAPPER
   ============================================ */
#app {
  position: absolute;
  inset: 0;
}

.scene {
  display: none !important;
  position: absolute;
  inset: 0;
  flex-direction: column;
  animation: sceneFadeIn 0.5s var(--ease) forwards;
}

.scene.active { display: flex !important; }

#scene-0.active {
  display: flex !important;
  overflow-y: auto;
}

@keyframes sceneFadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   SCENE 0 — HERO / INTRO
   ============================================ */
#scene-0 {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* BUG LAMA: "position: relative" di sini menimpa "position:absolute;inset:0"
     dari .scene, sehingga Scene 0 tidak lagi dikunci ke tinggi stage 16:9 —
     tingginya jadi mengikuti konten (bisa > tinggi stage) dan tombol-tombol
     di bagian bawah pun terpotong tanpa scrollbar. Dihapus supaya Scene 0
     mengikuti aturan .scene seperti scene lainnya. */
  overflow: hidden;
  text-align: center;
  padding: 1.1rem 1.5rem;
}

.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 20% 80%, rgba(13,124,78,0.35) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 80% 20%, rgba(59,158,219,0.25) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 50% 50%, rgba(240,180,41,0.08) 0%, transparent 60%),
    var(--surface);
  z-index: 0;
}

/* Animated particles */
.particles {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
}

.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--primary-light);
  opacity: 0;
  animation: particleFloat linear infinite;
}

@keyframes particleFloat {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.3; }
  100% { transform: translateY(-10vh) scale(1.2); opacity: 0; }
}

.hero-content {
  position: relative; z-index: 2;
  max-width: 780px;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(13,124,78,0.2);
  border: 1px solid rgba(13,124,78,0.5);
  color: var(--primary-light);
  padding: 0.35rem 1rem;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--gap-md);
  animation: fadeUp 0.7s var(--ease) 0.2s both;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 4vw, 3rem);
  line-height: 1.12;
  font-weight: 900;
  margin-bottom: 0.5rem;
  animation: fadeUp 0.7s var(--ease) 0.4s both;
}

.hero-title span.accent { color: var(--accent); }
.hero-title span.green  { color: var(--primary-light); }

.hero-subtitle {
  font-size: 0.85rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto var(--gap-sm);
  animation: fadeUp 0.7s var(--ease) 0.6s both;
}

.hero-stats {
  display: flex;
  gap: var(--gap-sm);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--gap-sm);
  animation: fadeUp 0.7s var(--ease) 0.7s both;
}

.stat-pill {
  background: var(--surface-2);
  border: 1px solid rgba(13,124,78,0.3);
  border-radius: 12px;
  padding: 0.5rem 1.1rem;
  text-align: center;
}

.stat-pill .num {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}

.stat-pill .label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.2rem;
}

.hero-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  justify-content: center;
  margin-bottom: var(--gap-sm);
  animation: fadeUp 0.7s var(--ease) 0.8s both;
}

.topic-chip {
  background: rgba(59,158,219,0.1);
  border: 1px solid rgba(59,158,219,0.3);
  color: var(--accent-2);
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
  font-size: 0.7rem;
  font-weight: 500;
}

.btn-start {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: var(--white);
  border: none;
  padding: 0.7rem 1.8rem;
  border-radius: 50px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  box-shadow: var(--glow-green);
  animation: fadeUp 0.7s var(--ease) 1s both;
}

.btn-start:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 0 40px rgba(13,124,78,0.7);
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================
   CONFETTI CELEBRATION (skor sempurna 100)
   ============================================ */
.confetti-layer {
  position: absolute;
  inset: 0;
  z-index: 5000;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -12px;
  width: 10px;
  height: 14px;
  opacity: 0.95;
  animation-name: confettiFall;
  animation-timing-function: cubic-bezier(0.35, 0, 0.65, 1);
  animation-fill-mode: forwards;
}
@keyframes confettiFall {
  0% {
    transform: translate(0, -10vh) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translate(var(--drift), 110vh) rotate(var(--rot));
    opacity: 0.3;
  }
}

/* ============================================
   SCENE HEADER (shared)
   ============================================ */
.scene-header {
  flex: none;
  background: linear-gradient(180deg, var(--surface-2) 0%, transparent 100%);
  padding: 0.7rem var(--gap-md) 0.4rem;
  text-align: center;
  border-bottom: 1px solid rgba(13,124,78,0.2);
  position: relative;
}

.scene-num-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--surface);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.7rem;
  border-radius: 100px;
  margin-bottom: 0.35rem;
}

.scene-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
  font-weight: 700;
  color: var(--white);
  line-height: 1.15;
}

.scene-title span { color: var(--primary-light); }

.scene-desc {
  max-width: 600px;
  margin: 0.35rem auto 0;
  color: var(--text-muted);
  font-size: 0.78rem;
}

/* ============================================
   SCENE CONTENT LAYOUT
   ============================================ */
.scene-content {
  flex: 1 1 auto;
  min-height: 0;           /* wajib agar overflow-y:auto bekerja di dalam flex column */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem var(--gap-md) 0.9rem;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
}

/* ============================================
   SUB-SCENE SYSTEM (scene dengan >1 bagian, mis. Scene 1/3/4)
   ============================================ */
.subscene-nav {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0.45rem 0 0.1rem;
}

.subnav-dot {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(139,175,197,0.08);
  border: 1px solid rgba(139,175,197,0.25);
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.9rem;
  border-radius: 100px;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
}

.subnav-dot .sd-num {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(139,175,197,0.2);
  color: var(--text-main);
  font-size: 0.65rem;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}

.subnav-dot:hover { border-color: var(--primary-light); color: var(--text-main); }

.subnav-dot.active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
  box-shadow: var(--glow-green);
}
.subnav-dot.active .sd-num { background: rgba(255,255,255,0.25); color: var(--white); }

.subscene { display: none; animation: sceneFadeIn 0.4s var(--ease) forwards; }

/* Tombol navigasi (← Kembali / Berikutnya →) selalu menempel konsisten
   di bagian bawah area konten — tidak lagi ikut "mengambang" di posisi
   berbeda-beda tergantung panjang konten tiap scene/subscene.
   .subscene.active dijadikan flex column setinggi area kontennya,
   lalu .subscene-footer didorong ke bawah lewat margin-top:auto. */
.subscene.active {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

/* Sub-scene Kamus Istilah (Scene 5.2) berisi daftar yang cukup panjang
   (24 istilah) untuk selalu muat total di layar 16:9 tanpa scroll sama
   sekali, jadi khusus di sini HANYA daftar istilahnya sendiri yang boleh
   scroll secara internal — judul, kotak info, kolom cari, dan tombol
   navigasi tetap selalu terlihat penuh seperti pada slide lainnya.
   Pakai height:100% (bukan cuma min-height) supaya box-nya benar-benar
   dikunci pas setinggi area konten, tidak ikut membesar oleh isi list. */
#scene-5 .subscene[data-sub="1"].active {
  height: 100%;
}
#scene-5 .subscene[data-sub="1"].active .glossary-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

/* Sub-scene lain yang isinya sedikit lebih tinggi dari frame 16:9
   (Scene 2.3 "Regulasi & UU" — 6 kartu step + quote-block; Scene 3.1
   "Isu Global EBT" — 5 kartu + callout tambahan) memakai pola yang sama:
   subscene dikunci height:100%, lalu HANYA isi di dalam ".subscene-body"
   yang scroll internal kalau perlu — supaya tombol "← Kembali /
   Berikutnya →" di ".subscene-footer" selalu menempel konsisten di
   pojok kiri-kanan bawah slide, tidak lagi ikut turun mengikuti
   panjang konten seperti sebelumnya. */
#scene-2 .subscene[data-sub="2"].active,
#scene-3 .subscene[data-sub="0"].active {
  height: 100%;
}
.subscene-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.subscene-footer {
  margin-top: auto;
  padding-top: 0.9rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  flex: none;
}

/* Scene 6 (Peta Interaktif) tidak memakai sistem .subscene — kontennya
   langsung anak dari .scene-content — jadi supaya tombol "← Kembali /
   🏠 Beranda" juga menempel konsisten di bawah seperti scene lain,
   .scene-content khusus di scene ini dijadikan flex column (tinggi
   sudah otomatis benar lewat flex:1 1 auto bawaan, tidak perlu
   min-height tambahan — itu tadinya malah membuatnya kepanjangan
   melebihi tinggi stage karena ikut menghitung tinggi scene-header). */
#scene-6 .scene-content {
  display: flex;
  flex-direction: column;
}

/* ============================================
   CARDS / GRID
   ============================================ */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-md);
  margin-top: var(--gap-md);
}

.card {
  background: var(--surface-2);
  border: 1px solid rgba(13,124,78,0.2);
  border-radius: 16px;
  padding: var(--gap-md);
  transition: all var(--dur) var(--ease);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(13,124,78,0.1), transparent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--card-shadow), var(--glow-green);
}

.card:hover::before { opacity: 1; }

.card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.4rem;
}

.card p {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.card .tag {
  display: inline-block;
  margin-top: 0.4rem;
  background: rgba(240,180,41,0.15);
  border: 1px solid rgba(240,180,41,0.3);
  color: var(--accent);
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
}

.card.has-illust { padding: 0; }

.card-illust {
  width: 100%;
  aspect-ratio: 2.6 / 1;
  overflow: hidden;
}

.card-illust img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur) var(--ease);
}

.card.has-illust:hover .card-illust img { transform: scale(1.05); }

.card-text { padding: 0.7rem 0.8rem; }
.card-text h3 { font-size: 0.9rem; font-weight: 700; color: var(--white); margin-bottom: 0.25rem; }
.card-text p { font-size: 0.74rem; color: var(--text-muted); line-height: 1.45; }

/* ============================================
   SLIDER HORIZONTAL (reusable — dipakai di beberapa scene)
   ============================================ */
.hslider-wrap {
  position: relative;
  margin-top: var(--gap-md);
}

.hslider-nav {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid rgba(139,175,197,0.3);
  color: var(--white);
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 5;
  transition: all var(--dur) var(--ease);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

.hslider-nav:hover { background: var(--primary); border-color: var(--primary); }
.hslider-nav.prev { left: -10px; }
.hslider-nav.next { right: -10px; }
.hslider-nav:disabled { opacity: 0.3; cursor: default; pointer-events: none; }

/* ============================================
   TEKNOLOGI EBT — KARTU VISUAL (SLIDER)
   ============================================ */
.tech-visual-grid {
  display: flex;
  gap: var(--gap-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.6rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}

.tech-visual-grid::-webkit-scrollbar { height: 6px; }
.tech-visual-grid::-webkit-scrollbar-track { background: rgba(139,175,197,0.08); border-radius: 4px; }
.tech-visual-grid::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }

.tech-card {
  background: var(--surface-2);
  border: 1px solid rgba(139,175,197,0.15);
  border-radius: 16px;
  overflow: hidden;
  transition: all var(--dur) var(--ease);
  flex: 0 0 auto;
  width: min(78vw, 260px);
  scroll-snap-align: start;
}

.tech-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--card-shadow), var(--glow-green);
}

/* ============================================
   POTENSI EBT — SLIDER KARTU (scene 2)
   ============================================ */
.cards-slider-track {
  display: flex;
  gap: var(--gap-md);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-bottom: 0.6rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--primary) transparent;
}

.cards-slider-track::-webkit-scrollbar { height: 6px; }
.cards-slider-track::-webkit-scrollbar-track { background: rgba(139,175,197,0.08); border-radius: 4px; }
.cards-slider-track::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }

.cards-slider-track .card {
  flex: 0 0 auto;
  width: min(78vw, 250px);
  scroll-snap-align: start;
}

.tech-illust {
  width: 100%;
  aspect-ratio: 240 / 110;
  display: block;
  cursor: zoom-in;
  position: relative;
  overflow: hidden;
}

.tech-illust svg { width: 100%; height: 100%; display: block; }
.tech-illust img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform var(--dur) var(--ease); }
.tech-illust:hover img { transform: scale(1.05); }
.tech-illust video { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform var(--dur) var(--ease); }
.tech-illust:hover video { transform: scale(1.05); }

.tech-illust::after {
  content: '🔍';
  position: absolute;
  bottom: 8px; right: 8px;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: rgba(10,22,40,0.7);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  pointer-events: none;
}

/* Kartu berisi video (bukan gambar infografis statis) — ganti ikon
   kaca pembesar dengan ikon play supaya jelas ini konten video */
.tech-illust.has-video::after { content: '▶️'; }

/* Indikator loading saat video di kartu tech masih dimuat/buffering */
.tech-video-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 22, 40, 0.45);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  pointer-events: none;
  z-index: 2;
}
.tech-illust.video-ready .tech-video-loading {
  opacity: 0;
  visibility: hidden;
}
.tech-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid rgba(255, 255, 255, 0.28);
  border-top-color: var(--accent, #fff);
  border-radius: 50%;
  animation: tech-spin 0.8s linear infinite;
}
@keyframes tech-spin {
  to { transform: rotate(360deg); }
}

.tech-card-body { padding: 0.6rem 0.9rem 0.9rem; }

.tech-card h3 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.15rem;
}

.tech-card .tech-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 0.45rem;
}

.tech-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.tech-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(13,124,78,0.12);
  border: 1px solid rgba(13,124,78,0.3);
  color: var(--text-main);
  padding: 0.22rem 0.5rem;
  border-radius: 8px;
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.3;

}

/* ============================================
   (Blok TABS lama dihapus — sudah tidak dipakai lagi setelah
   Scene 5 dipindah ke pola sub-scene yang sama dengan Scene 1–4)
   ============================================ */

/* ============================================
   PROGRESS BARS
   ============================================ */
.progress-list {
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.progress-item {
  background: var(--surface-2);
  border: 1px solid rgba(139,175,197,0.1);
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
}

.progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.3rem;
}

.progress-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.progress-pct {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--accent);
}

.progress-bar-track {
  width: 100%;
  height: 8px;
  background: rgba(139,175,197,0.1);
  border-radius: 100px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--primary), var(--primary-light));
  width: 0;
  transition: width 1.2s var(--ease);
}

.progress-bar-fill.amber {
  background: linear-gradient(90deg, #e07820, var(--accent));
}

.progress-bar-fill.blue {
  background: linear-gradient(90deg, #1e6ea8, var(--accent-2));
}

/* ============================================
   INFO GRID (2 col)
   ============================================ */
.info-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
  margin-top: var(--gap-md);
}

@media (max-width: 600px) { .info-2col { grid-template-columns: 1fr; } }

.info-block {
  background: var(--surface-2);
  border: 1px solid rgba(139,175,197,0.12);
  border-radius: 14px;
  padding: var(--gap-md);
}

.info-block h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--primary-light);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.info-block p, .info-block li {
  font-size: 0.83rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.info-block ul { list-style: none; }
.info-block ul li { padding-left: 1.2rem; position: relative; }
.info-block ul li::before { content: '✦'; position: absolute; left: 0; color: var(--accent); font-size: 0.6rem; top: 0.3rem; }

/* ============================================
   HIGHLIGHT / CALLOUT
   ============================================ */
.callout {
  background: linear-gradient(135deg, rgba(13,124,78,0.15), rgba(13,124,78,0.05));
  border: 1px solid rgba(13,124,78,0.4);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  margin: 0.6rem 0;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.callout .callout-icon { font-size: 1.25rem; flex-shrink: 0; }

.callout-body h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--primary-light);
  margin-bottom: 0.2rem;
}

.callout-body p {
  font-size: 0.76rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Amber variant */
.callout.amber {
  background: linear-gradient(135deg, rgba(240,180,41,0.1), rgba(240,180,41,0.03));
  border-color: rgba(240,180,41,0.35);
}

.callout.amber .callout-body h4 { color: var(--accent); }

/* ============================================
   QUIZ / KUIS
   ============================================ */
.quiz-container {
  background: var(--surface-2);
  border: 1px solid rgba(13,124,78,0.3);
  border-radius: 16px;
  padding: 0.9rem 0.9rem;
  margin-top: 0.6rem;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.quiz-progress-bar {
  height: 4px;
  background: rgba(139,175,197,0.1);
  border-radius: 100px;
  margin-bottom: 0.6rem;
  overflow: hidden;
}

.quiz-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  border-radius: 100px;
  transition: width 0.4s var(--ease);
}

.quiz-question-num {
  font-size: 0.64rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

.quiz-question {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--white);
  line-height: 1.35;
  margin-bottom: 0.55rem;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.quiz-opt {
  width: 100%;
  padding: 0.55rem 0.9rem;
  background: rgba(139,175,197,0.05);
  border: 1px solid rgba(139,175,197,0.15);
  border-radius: 10px;
  color: var(--text-main);
  font-family: var(--font-body);
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.quiz-opt-letter {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(139,175,197,0.1);
  border: 1px solid rgba(139,175,197,0.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
  color: var(--text-muted);
}

.quiz-opt:hover:not(:disabled) {
  border-color: var(--primary);
  background: rgba(13,124,78,0.1);
}

.quiz-opt:hover:not(:disabled) .quiz-opt-letter {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.quiz-opt.correct {
  border-color: var(--primary-light);
  background: rgba(22,168,103,0.15);
}

.quiz-opt.correct .quiz-opt-letter {
  background: var(--primary-light);
  color: white;
  border-color: var(--primary-light);
}

.quiz-opt.wrong {
  border-color: var(--danger);
  background: rgba(224,82,82,0.1);
}

.quiz-opt.wrong .quiz-opt-letter {
  background: var(--danger);
  color: white;
  border-color: var(--danger);
}

.quiz-opt:disabled { cursor: not-allowed; }

.quiz-feedback {
  margin-top: 0.45rem;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  font-size: 0.76rem;
  line-height: 1.4;
  display: none;
}

.quiz-feedback.show { display: block; }
.quiz-feedback.correct-fb { background: rgba(22,168,103,0.15); border: 1px solid rgba(22,168,103,0.3); color: var(--primary-light); }
.quiz-feedback.wrong-fb   { background: rgba(224,82,82,0.1);   border: 1px solid rgba(224,82,82,0.3);   color: #f08080; }

.quiz-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.6rem;
}

.quiz-score-display {
  text-align: center;
  padding: 0.9rem;
}

.quiz-score-display .final-score {
  font-size: 2.6rem;
  font-weight: 900;
  font-family: var(--font-display);
  color: var(--accent);
  line-height: 1;
  margin: 0.35rem 0;
}

.quiz-score-display .score-label {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.quiz-score-display .score-msg {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--primary-light);
  margin-top: 0.35rem;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--dur) var(--ease);
  border: none;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--primary-light);
  transform: translateY(-2px);
  box-shadow: var(--glow-green);
}

.btn-outline {
  background: transparent;
  border: 1px solid rgba(139,175,197,0.3);
  color: var(--text-muted);
}

.btn-outline:hover {
  border-color: var(--primary);
  color: var(--primary-light);
}

.btn-amber {
  background: var(--accent);
  color: var(--surface);
}

.btn-amber:hover {
  background: #f5c842;
  transform: translateY(-2px);
  box-shadow: var(--glow-amber);
}

/* ============================================
   SECTION DIVIDER
   ============================================ */
.section-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--primary-light);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  margin-top: 0.2rem;
}

.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(13,124,78,0.3);
}

/* ============================================
   MODAL / DETAIL OVERLAY
   ============================================ */
.modal-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(6px);
  animation: overlayIn 0.25s var(--ease);
}

@keyframes overlayIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background: var(--surface-2);
  border: 1px solid rgba(13,124,78,0.4);
  border-radius: 20px;
  max-width: 640px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding: var(--gap-lg) var(--gap-md);
  position: relative;
  animation: modalIn 0.35s var(--ease);
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.9) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(139,175,197,0.1);
  border: 1px solid rgba(139,175,197,0.2);
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--dur);
}

.modal-close:hover { background: var(--danger); color: white; border-color: var(--danger); }

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--surface); }
::-webkit-scrollbar-thumb { background: rgba(13,124,78,0.4); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* ============================================
   TOOLTIP
   ============================================ */
[data-tip] { position: relative; }

[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface-3);
  border: 1px solid rgba(13,124,78,0.3);
  color: var(--text-main);
  font-size: 0.75rem;
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 500;
  pointer-events: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .cards-grid { grid-template-columns: 1fr; }
  .hslider-nav { display: none; }
  .scene-content { padding: var(--gap-sm); }
  .scene-header { padding: 0.6rem 1rem 0.35rem; }
  .info-2col { grid-template-columns: 1fr; }
  #main-nav { left: 0.6rem; bottom: 140px; max-height: min(58vh, 380px); gap: 0.25rem; }
  #nav-show-btn { left: 0.6rem; bottom: 140px; width: 40px; height: 40px; }
  .nav-scene-btn, .nav-extra-btn { width: 40px; height: 40px; }
  .nav-scene-btn .nav-icon, .nav-extra-btn .nav-icon { font-size: 1rem; }
  .nav-scene-btn .nav-label, .nav-extra-btn .nav-label { font-size: 0.46rem; }
  #btn-petunjuk-trigger { left: 0.6rem; bottom: 88px; width: 40px; height: 40px; }
}

/* Mode padat untuk stage sangat pendek dipindah ke akhir extras.css
   supaya urutan cascade CSS benar (lihat catatan di extras.css). */

/* ============================================
   LOADING SCREEN
   ============================================ */
#loading-screen {
  position: absolute; inset: 0;
  background: var(--surface);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  transition: opacity 0.5s, visibility 0.5s;
}

#loading-screen.hidden { opacity: 0; visibility: hidden; }

.loader-icon {
  font-size: 3rem;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.loader-text {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 500;
}

.loader-bar {
  width: 200px;
  height: 3px;
  background: rgba(139,175,197,0.1);
  border-radius: 3px;
  overflow: hidden;
}

.loader-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  animation: loaderAnim 1.5s var(--ease) forwards;
}

@keyframes loaderAnim {
  from { width: 0%; }
  to   { width: 100%; }
}

/* flip card */
.flip-card {
  perspective: 800px;
  height: 180px;
  cursor: pointer;
}

.flip-inner {
  width: 100%; height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s var(--ease);
}

.flip-card:hover .flip-inner,
.flip-card.flipped .flip-inner {
  transform: rotateY(180deg);
}

.flip-front, .flip-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: 14px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  border: 1px solid rgba(13,124,78,0.3);
}

.flip-front {
  background: var(--surface-2);
}

.flip-back {
  background: linear-gradient(135deg, var(--primary-dark), var(--surface-2));
  transform: rotateY(180deg);
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.flip-front .icon { font-size: 2.2rem; margin-bottom: 0.5rem; }
.flip-front h4 { font-size: 0.9rem; font-weight: 700; color: var(--white); }

/* ============================================
   INTRO SPLASH SCREEN (Cinematic)
   ============================================ */
#intro-splash {
  position: absolute; inset: 0; z-index: 8000;
  background: var(--surface);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}
#intro-splash.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* Animated radial background */
.splash-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 15% 85%, rgba(13,124,78,0.45) 0%, transparent 65%),
    radial-gradient(ellipse 55% 65% at 85% 15%, rgba(59,158,219,0.3) 0%, transparent 65%),
    radial-gradient(ellipse 45% 45% at 50% 50%, rgba(240,180,41,0.1) 0%, transparent 55%),
    var(--surface);
  animation: splashPulse 4s ease-in-out infinite alternate;
}
@keyframes splashPulse {
  from { opacity: 0.7; }
  to   { opacity: 1; }
}

.splash-rings {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.splash-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(13,124,78,0.2);
  animation: ringExpand 3s ease-out infinite;
}
.splash-ring:nth-child(1) { width: 200px; height: 200px; animation-delay: 0s; }
.splash-ring:nth-child(2) { width: 350px; height: 350px; animation-delay: 0.7s; }
.splash-ring:nth-child(3) { width: 500px; height: 500px; animation-delay: 1.4s; }
.splash-ring:nth-child(4) { width: 650px; height: 650px; animation-delay: 2.1s; }
@keyframes ringExpand {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(1.2); opacity: 0; }
}

.splash-content {
  position: relative; z-index: 2;
  text-align: center; padding: 2rem;
  max-width: 640px;
}

.splash-logo {
  font-size: 4rem; margin-bottom: 1rem;
  animation: splashLogoBounce 0.8s cubic-bezier(0.34,1.56,0.64,1) 0.3s both;
  display: block;
}
@keyframes splashLogoBounce {
  from { opacity: 0; transform: scale(0.3) rotate(-15deg); }
  to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

.splash-school {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
  background: rgba(240,180,41,0.1); border: 1px solid rgba(240,180,41,0.3);
  padding: 0.3rem 1rem; border-radius: 100px;
  display: inline-block; margin-bottom: 1.25rem;
  animation: fadeUp 0.6s ease 0.6s both;
}

.splash-title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 4.5vw, 2.8rem);
  font-weight: 900; line-height: 1.15;
  color: var(--white); margin-bottom: 0.5rem;
  animation: fadeUp 0.6s ease 0.8s both;
}
.splash-title .green { color: var(--primary-light); }
.splash-title .amber { color: var(--accent); }

.splash-subtitle {
  font-size: 0.88rem; color: var(--text-muted); line-height: 1.65;
  margin-bottom: 2rem;
  animation: fadeUp 0.6s ease 1s both;
}

/* Progress bar intro */
.splash-progress-wrap {
  margin-bottom: 1.5rem;
  animation: fadeUp 0.6s ease 1.1s both;
}
.splash-progress-label {
  font-size: 0.7rem; color: var(--text-muted); margin-bottom: 0.4rem;
  display: flex; justify-content: space-between;
}
.splash-progress-track {
  width: 280px; height: 4px;
  background: rgba(139,175,197,0.1);
  border-radius: 100px; overflow: hidden; margin: 0 auto;
}
.splash-progress-fill {
  height: 100%; width: 0; border-radius: 100px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.1s linear;
}

.splash-info-pills {
  display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center;
  margin-bottom: 2rem;
  animation: fadeUp 0.6s ease 1.2s both;
}
.splash-pill {
  background: rgba(13,124,78,0.12); border: 1px solid rgba(13,124,78,0.3);
  color: var(--primary-light); padding: 0.3rem 0.8rem; border-radius: 100px;
  font-size: 0.72rem; font-weight: 600;
}

.btn-splash-start {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  color: white; border: none; padding: 0.9rem 2.2rem;
  border-radius: 50px; font-family: var(--font-body); font-size: 1rem;
  font-weight: 700; cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 0 30px rgba(13,124,78,0.5);
  animation: fadeUp 0.6s ease 1.3s both;
}
.btn-splash-start:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 0 50px rgba(13,124,78,0.7);
}

/* Floating emoji decorations */
.splash-float {
  position: absolute; font-size: 1.8rem; opacity: 0.12;
  animation: floatAround linear infinite;
  pointer-events: none;
}
@keyframes floatAround {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.12; }
  90%  { opacity: 0.12; }
  100% { transform: translateY(-120px) rotate(20deg); opacity: 0; }
}

/* Awan bergaya "gumpalan" (bukan emoji) — direplikasi dari desain
   senja.html: bentuk lonjong + 2 lingkaran di ::before/::after supaya
   terlihat seperti gumpalan awan asli. Warna dibuat terang/putih
   transparan (bukan warna hangat seperti di senja.html) supaya kontras
   dengan latar navy gelap splash intro di sini. Kecepatan dibuat lebih
   cepat dari referensi (yang aslinya 60-95s) sesuai permintaan. */
.splash-cloud {
  position: absolute;
  border-radius: 60px;
  filter: blur(1px);
  animation: splashCloudDrift linear infinite;
  pointer-events: none;
  z-index: 0;
}
.splash-cloud::before,
.splash-cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}
.splash-cloud::before { width: 55%; height: 55%; top: -25%; left: 12%; }
.splash-cloud::after  { width: 65%; height: 65%; top: -18%; right: 12%; }

.splash-cloud1 {
  width: clamp(130px, 26vw, 210px);
  height: clamp(30px, 6vw, 48px);
  top: 10%;
  background: rgba(255, 255, 255, 0.28);
  animation-duration: 32s;
}
.splash-cloud2 {
  width: clamp(170px, 34vw, 270px);
  height: clamp(40px, 8vw, 64px);
  top: 22%;
  background: rgba(220, 235, 245, 0.22);
  animation-duration: 42s;
}
.splash-cloud3 {
  width: clamp(95px, 18vw, 145px);
  height: clamp(24px, 5vw, 40px);
  top: 30%;
  background: rgba(255, 255, 255, 0.2);
  animation-duration: 25s;
}
@keyframes splashCloudDrift {
  from { left: -30%; }
  to   { left: 110%; }
}

/* Burung — kawanan berbentuk V dari SVG (bukan emoji), direplikasi
   dari senja.html. Warna garis dibuat terang (bukan gelap) supaya
   terlihat di latar navy. Kecepatan dipercepat dari referensi
   (aslinya 88-108s) sesuai permintaan. */
.splash-birds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.splash-flock {
  position: absolute;
  width: 40px;
  height: 12px;
  animation: splashFlyHome linear infinite;
}
.splash-flock svg { width: 100%; height: 100%; display: block; }
@keyframes splashFlyHome {
  from { transform: translateX(-10vw) translateY(0); }
  50%  { transform: translateX(55vw)  translateY(-16px); }
  to   { transform: translateX(115vw) translateY(6px); }
}

/* ============================================
   PETUNJUK MODAL (Onboarding Tutorial)
   ============================================ */
#petunjuk-overlay {
  position: absolute; inset: 0; z-index: 8500;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#petunjuk-overlay.show { opacity: 1; visibility: visible; }

/* Tujuan Pembelajaran modal — same overlay behavior as petunjuk */
#tp-overlay {
  position: absolute; inset: 0; z-index: 8500;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#tp-overlay.show { opacity: 1; visibility: visible; }

/* Pertanyaan Pemantik modal — same overlay behavior as tp/petunjuk */
#pp-overlay {
  position: absolute; inset: 0; z-index: 8500;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
#pp-overlay.show { opacity: 1; visibility: visible; }

.petunjuk-modal {
  background: var(--surface-2);
  border: 1px solid rgba(13,124,78,0.4);
  border-radius: 24px; max-width: 680px; width: 100%;
  max-height: 90vh; overflow-y: auto;
  position: relative;
  animation: modalIn 0.4s cubic-bezier(0.22,0.61,0.36,1) both;
}

.petunjuk-header {
  padding: 2rem 2rem 1rem;
  background: linear-gradient(180deg, var(--surface-3) 0%, transparent 100%);
  border-radius: 24px 24px 0 0;
  text-align: center;
  border-bottom: 1px solid rgba(13,124,78,0.15);
}
.petunjuk-header-icon { font-size: 2.5rem; display: block; margin-bottom: 0.5rem; }
.petunjuk-header h2 {
  font-family: var(--font-display); font-size: 1.5rem;
  font-weight: 700; color: var(--white); margin-bottom: 0.4rem;
}
.petunjuk-header p { font-size: 0.85rem; color: var(--text-muted); }

.petunjuk-close-x {
  position: absolute;
  top: 1rem; right: 1rem;
  z-index: 10;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s ease;
}
.petunjuk-close-x:hover {
  background: rgba(220,38,38,0.85);
  border-color: rgba(220,38,38,0.9);
  color: #fff;
  transform: scale(1.08);
}

.petunjuk-body { padding: 1.5rem 2rem 2rem; }

/* Step cards in petunjuk */
.petunjuk-steps {
  display: flex; flex-direction: column; gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.petunjuk-step {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem; background: rgba(0,0,0,0.2);
  border: 1px solid rgba(139,175,197,0.08);
  border-radius: 12px; transition: border-color 0.2s;
}
.petunjuk-step:hover { border-color: rgba(13,124,78,0.3); }
.ps-num {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 800; color: white;
}
.ps-body h4 { font-size: 0.9rem; font-weight: 700; color: var(--white); margin-bottom: 0.2rem; }
.ps-body p  { font-size: 0.8rem; color: var(--text-muted); line-height: 1.6; }
.pp-img {
  width: 100%; max-height: 160px; object-fit: cover;
  border-radius: 10px; margin-bottom: 0.6rem;
  cursor: pointer; display: block;
  border: 1px solid rgba(139,175,197,0.15);
  transition: transform 0.25s ease;
}
.pp-img:hover { transform: scale(1.015); }

/* Keyboard shortcuts grid */
.shortcut-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0.5rem; margin-bottom: 1.5rem;
}
@media(max-width:500px){ .shortcut-grid { grid-template-columns: 1fr; } }
.shortcut-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: rgba(0,0,0,0.2); border-radius: 8px;
  border: 1px solid rgba(139,175,197,0.08);
}
.kbd {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-3); border: 1px solid rgba(139,175,197,0.25);
  border-bottom: 3px solid rgba(139,175,197,0.15);
  color: var(--text-main); font-size: 0.72rem; font-weight: 700;
  padding: 0.2rem 0.5rem; border-radius: 5px; font-family: monospace;
  white-space: nowrap; flex-shrink: 0;
}
.shortcut-desc { font-size: 0.78rem; color: var(--text-muted); }

/* Scene map in petunjuk */
.scene-map {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem; margin-bottom: 1.5rem;
}
@media(max-width:480px){ .scene-map { grid-template-columns: 1fr 1fr; } }
.scene-map-item {
  background: rgba(13,124,78,0.08); border: 1px solid rgba(13,124,78,0.2);
  border-radius: 10px; padding: 0.75rem 0.6rem; text-align: center;
  transition: all 0.2s ease; cursor: default;
}
.scene-map-item:hover {
  background: rgba(13,124,78,0.15); border-color: rgba(13,124,78,0.4);
  transform: translateY(-2px);
}
.sm-icon { font-size: 1.4rem; display: block; margin-bottom: 0.3rem; }
.sm-label { font-size: 0.68rem; font-weight: 700; color: var(--white); line-height: 1.3; }
.sm-num {
  font-size: 0.6rem; color: var(--accent); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.2rem;
  display: block;
}

/* Tips section */
.tips-list {
  display: flex; flex-direction: column; gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.tip-item {
  display: flex; gap: 0.6rem; align-items: flex-start;
  font-size: 0.8rem; color: var(--text-muted); line-height: 1.5;
}
.tip-icon { flex-shrink: 0; font-size: 1rem; margin-top: 0.05rem; }

.petunjuk-actions {
  display: flex; gap: 0.75rem; flex-wrap: wrap;
}

/* Petunjuk trigger button (always visible) */
#btn-petunjuk-trigger {
  position: absolute;
  bottom: 92px;
  left: 1rem;
  z-index: 700;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(13,124,78,0.25);
  border: 1px solid rgba(13,124,78,0.5);
  color: var(--white); font-size: 1.1rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(8px);
  transition: all 0.3s ease;
  box-shadow: var(--glow-green);
}
#btn-petunjuk-trigger:hover {
  background: var(--primary); transform: scale(1.1);
}

/* Petunjuk section title */
.petunjuk-section-title {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent);
  margin: 1.25rem 0 0.6rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.petunjuk-section-title::after {
  content: ''; flex: 1; height: 1px;
  background: rgba(240,180,41,0.2);
}

/* Intro sequence overlay (before hero) */
#intro-sequence {
  position: absolute; inset: 0; z-index: 9000;
  background: #000;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column;
  transition: opacity 1s ease, visibility 1s ease;
}
#intro-sequence.visible { display: flex; }
#intro-sequence.fading  { opacity: 0; pointer-events: none; }

.intro-seq-line {
  font-family: var(--font-display);
  font-size: clamp(1rem, 3vw, 1.6rem);
  color: rgba(255,255,255,0);
  text-align: center; padding: 0 2rem;
  letter-spacing: 0.04em;
  transition: color 0.8s ease;
  line-height: 1.4;
}
.intro-seq-line.lit { color: rgba(255,255,255,0.9); }
.intro-seq-line.green-lit { color: var(--primary-light); }
.intro-seq-line.amber-lit { color: var(--accent); }

.intro-seq-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary-light);
  margin: 1.5rem auto;
  opacity: 0; transition: opacity 0.5s;
  box-shadow: 0 0 12px var(--primary-light);
}
.intro-seq-dot.lit { opacity: 1; }

/* 'Don't show again' checkbox */
.no-show-wrap {
  display: flex; align-items: center; gap: 0.5rem;
  margin-top: 1rem; font-size: 0.75rem; color: var(--text-muted);
  cursor: pointer;
}
.no-show-wrap input { cursor: pointer; accent-color: var(--primary); }

/* ============================================================
   KARAKTER GURU — SPLASH SCREEN
   ============================================================ */
#teacher-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 336px; /* 70% dari ukuran semula (480px) */
  opacity: 0;
  transform: translateY(40px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#teacher-wrap.teacher-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

#teacher-wrap.teacher-fade-out {
  opacity: 0;
  transform: translateY(40px) scale(0.85);
  pointer-events: none;
}

#teacher-static {
  width: 294px; /* 70% dari ukuran semula (420px) */
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
  transition: transform 0.3s ease;
}

/* Tombol Dengarkan Deskripsi */
#btn-deskripsi {
  position: relative;
  bottom: 8px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  border: none;
  border-radius: 100px;
  padding: 0.45rem 1rem;
  color: white;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(13,124,78,0.5);
  transition: all 0.3s ease;
  animation: btnPulseGreen 2s ease-in-out infinite;
}

@keyframes btnPulseGreen {
  0%,100% { box-shadow: 0 4px 16px rgba(13,124,78,0.5); }
  50%      { box-shadow: 0 4px 28px rgba(13,124,78,0.9); }
}

#btn-deskripsi.playing {
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  box-shadow: 0 4px 16px rgba(224,82,82,0.5);
  animation: btnPulseRed 1s ease-in-out infinite;
  padding: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  justify-content: center;
}

#btn-deskripsi.playing #deskripsi-label { display: none; }
#btn-deskripsi.playing #deskripsi-icon { font-size: 1rem; line-height: 1; }

@keyframes btnPulseRed {
  0%,100% { box-shadow: 0 4px 16px rgba(224,82,82,0.5); }
  50%      { box-shadow: 0 4px 28px rgba(224,82,82,0.9); }
}

#btn-deskripsi:hover { transform: scale(1.06); }

/* ============================================
   SPLASH SCREEN DI LAYAR PENDEK (short-height)
   ============================================
   MASALAH: karakter guru diberi lebar tetap (px) lalu height:auto
   mengikuti rasio gambar aslinya — di layar yang PENDEK (HP dalam
   mode lanskap asli, ATAU mode "lanjut potret" yang di-rotate lewat
   CSS di atas, yang tinggi efektifnya = lebar HP itu sendiri,
   biasanya 320–500px) hasilnya karakter jadi setinggi/lebih tinggi
   dari layar itu sendiri, menutupi judul & deskripsi. Konten splash
   (logo, judul, progress, badge, tombol) juga memakai margin/ukuran
   font yang dirancang untuk layar tinggi (desktop), jadi di layar
   pendek totalnya melebihi tinggi bingkai dan tombol "Mulai Belajar"
   ter-clip di luar area yang terlihat.

   SOLUSI: saat tinggi viewport pendek (atau saat mode "lanjut
   potret" yang tingginya SELALU pendek — lihat #stage-16-9 rotate),
   karakter guru diperkecil berdasarkan TINGGI layar (bukan lebar)
   dan dipindah jadi lebih kecil & mepet pojok agar tidak menutupi
   teks, sekaligus seluruh spacing/font splash dirampingkan supaya
   tombol selalu ikut termuat dalam bingkai. */
@media (max-height: 500px), (orientation: portrait) and (max-width: 900px) {
  #teacher-wrap { width: auto; max-width: 92px; z-index: 5; }
  #teacher-static {
    width: auto;
    height: min(22vh, 92px);
  }
  #btn-deskripsi {
    font-size: 0.56rem; padding: 0.28rem 0.6rem; bottom: 2px;
  }
  #sound-waves { height: 12px; margin-bottom: 2px; }

  .splash-content { padding: 0.6rem 1rem; max-width: 74%; }
  .splash-logo { font-size: 1.7rem; margin-bottom: 0.2rem; }
  .splash-school {
    font-size: 0.56rem; padding: 0.2rem 0.65rem; margin-bottom: 0.4rem;
  }
  .splash-title {
    font-size: clamp(0.95rem, 3.4vh, 1.5rem); margin-bottom: 0.3rem; line-height: 1.1;
  }
  .splash-subtitle { font-size: 0.66rem; line-height: 1.3; margin-bottom: 0.5rem; }
  .splash-progress-wrap { margin-bottom: 0.4rem; }
  .splash-progress-track { width: 160px; }
  .splash-progress-label { font-size: 0.6rem; margin-bottom: 0.2rem; }
  .splash-info-pills { margin-bottom: 0.4rem; gap: 0.3rem; }
  .splash-pill { font-size: 0.56rem; padding: 0.18rem 0.55rem; }
  .btn-splash-start { padding: 0.5rem 1.15rem; font-size: 0.76rem; gap: 0.4rem; }
  .splash-btn-row { margin-bottom: 0.3rem !important; gap: 0.5rem !important; }
}

/* Gelombang Suara */
#sound-waves {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  margin-bottom: 4px;
}

#sound-waves.hidden { display: none; }

#sound-waves span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: var(--primary-light);
  animation: waveBar 0.9s ease-in-out infinite;
}

#sound-waves span:nth-child(1) { height: 8px;  animation-delay: 0.0s; }
#sound-waves span:nth-child(2) { height: 16px; animation-delay: 0.15s; }
#sound-waves span:nth-child(3) { height: 20px; animation-delay: 0.3s;  }
#sound-waves span:nth-child(4) { height: 14px; animation-delay: 0.45s; }
#sound-waves span:nth-child(5) { height: 8px;  animation-delay: 0.6s;  }

@keyframes waveBar {
  0%,100% { transform: scaleY(0.4); opacity: 0.5; }
  50%      { transform: scaleY(1.0); opacity: 1.0; }
}

/* Speech bubble saat playing */
#teacher-wrap.playing #teacher-static {
  transform: scale(1.04);
}

/* Responsif mobile */
@media (max-width: 600px) {
  #teacher-wrap {
    width: 231px; /* 70% dari ukuran semula (330px) */
  }
  #teacher-static { width: 210px; } /* 70% dari ukuran semula (300px) */
  #btn-deskripsi  { font-size: 0.62rem; padding: 0.35rem 0.7rem; }
}

/* ============================================================
   KARAKTER GURU — SCENE 2 (pojok KANAN bawah, ukuran lebih kecil)
   Pola identik dengan karakter guru di splash (lihat blok
   "KARAKTER GURU — SPLASH SCREEN" di atas): gambar diam ditukar ke
   versi animasi selama audio deskripsi Scene 2 diputar, lalu
   fade-out otomatis saat audio selesai. Elemen ini hidup DI DALAM
   #scene-2 (bukan di #intro-splash) sehingga hanya tampil selagi
   Scene 2 sedang aktif, dan otomatis ikut hilang saat pindah scene
   lain (lihat playScene2Teacher()/stopScene2Teacher() di main.js).
   ============================================================ */
#teacher-wrap-s2 {
  position: absolute;
  bottom: 0;
  right: 0.4rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 176px;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#teacher-wrap-s2.teacher-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#teacher-wrap-s2.teacher-fade-out {
  opacity: 0;
  transform: translateY(30px) scale(0.85);
}

#teacher-static-s2 {
  width: 154px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

#sound-waves-s2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 16px;
  margin-top: 2px;
}
#sound-waves-s2.hidden { display: none; }
#sound-waves-s2 span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: var(--primary-light);
  animation: waveBar 0.9s ease-in-out infinite;
}
#sound-waves-s2 span:nth-child(1) { height: 6px;  animation-delay: 0.0s; }
#sound-waves-s2 span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
#sound-waves-s2 span:nth-child(3) { height: 16px; animation-delay: 0.3s;  }
#sound-waves-s2 span:nth-child(4) { height: 10px; animation-delay: 0.45s; }
#sound-waves-s2 span:nth-child(5) { height: 6px;  animation-delay: 0.6s;  }

/* Layar sempit (HP potret/kecil) — perkecil lagi supaya tidak
   menutupi tombol "Berikutnya" di footer sub-scene */
@media (max-width: 600px) {
  #teacher-wrap-s2  { width: 120px; }
  #teacher-static-s2 { width: 104px; }
}

/* Stage sangat pendek (HP landscape asli) — pola sama seperti
   perbaikan header scene & hero di atas: skala berdasar TINGGI
   layar supaya karakter tidak lebih tinggi dari stage itu sendiri. */
@media (max-height: 430px) and (orientation: landscape) {
  #teacher-wrap-s2   { width: auto; max-width: 76px; right: 0.3rem; }
  #teacher-static-s2 { width: auto; height: min(30vh, 76px); }
  #sound-waves-s2    { height: 10px; }
}

/* ============================================================
   KARAKTER GURU — SCENE 2, SUB-SCENE "Gap Potensi vs Pemanfaatan"
   Salinan persis dari blok teacher-wrap-s2 di atas, hanya menyasar
   elemen sub-scene ke-3 Scene 2.
   ============================================================ */
#teacher-wrap-s2-gap {
  position: absolute;
  bottom: 0;
  right: 0.4rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 176px;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#teacher-wrap-s2-gap.teacher-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#teacher-wrap-s2-gap.teacher-fade-out {
  opacity: 0;
  transform: translateY(30px) scale(0.85);
}

#teacher-static-s2-gap {
  width: 154px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

#sound-waves-s2-gap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 16px;
  margin-top: 2px;
}
#sound-waves-s2-gap.hidden { display: none; }
#sound-waves-s2-gap span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: var(--primary-light);
  animation: waveBar 0.9s ease-in-out infinite;
}
#sound-waves-s2-gap span:nth-child(1) { height: 6px;  animation-delay: 0.0s; }
#sound-waves-s2-gap span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
#sound-waves-s2-gap span:nth-child(3) { height: 16px; animation-delay: 0.3s;  }
#sound-waves-s2-gap span:nth-child(4) { height: 10px; animation-delay: 0.45s; }
#sound-waves-s2-gap span:nth-child(5) { height: 6px;  animation-delay: 0.6s;  }

@media (max-width: 600px) {
  #teacher-wrap-s2-gap   { width: 120px; }
  #teacher-static-s2-gap { width: 104px; }
}

@media (max-height: 430px) and (orientation: landscape) {
  #teacher-wrap-s2-gap   { width: auto; max-width: 76px; right: 0.3rem; }
  #teacher-static-s2-gap { width: auto; height: min(30vh, 76px); }
  #sound-waves-s2-gap    { height: 10px; }
}

/* ============================================================
   KARAKTER GURU — SCENE 2, SUB-SCENE "Regulasi & UU"
   Salinan persis dari blok teacher-wrap-s2-gap di atas, hanya
   menyasar elemen sub-scene ke-3 Scene 2.
   ============================================================ */
#teacher-wrap-s2-regulasi {
  position: absolute;
  bottom: 0;
  right: 0.4rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 176px;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#teacher-wrap-s2-regulasi.teacher-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#teacher-wrap-s2-regulasi.teacher-fade-out {
  opacity: 0;
  transform: translateY(30px) scale(0.85);
}

#teacher-static-s2-regulasi {
  width: 154px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

#sound-waves-s2-regulasi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 16px;
  margin-top: 2px;
}
#sound-waves-s2-regulasi.hidden { display: none; }
#sound-waves-s2-regulasi span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: var(--primary-light);
  animation: waveBar 0.9s ease-in-out infinite;
}
#sound-waves-s2-regulasi span:nth-child(1) { height: 6px;  animation-delay: 0.0s; }
#sound-waves-s2-regulasi span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
#sound-waves-s2-regulasi span:nth-child(3) { height: 16px; animation-delay: 0.3s;  }
#sound-waves-s2-regulasi span:nth-child(4) { height: 10px; animation-delay: 0.45s; }
#sound-waves-s2-regulasi span:nth-child(5) { height: 6px;  animation-delay: 0.6s;  }

@media (max-width: 600px) {
  #teacher-wrap-s2-regulasi   { width: 120px; }
  #teacher-static-s2-regulasi { width: 104px; }
}

@media (max-height: 430px) and (orientation: landscape) {
  #teacher-wrap-s2-regulasi   { width: auto; max-width: 76px; right: 0.3rem; }
  #teacher-static-s2-regulasi { width: auto; height: min(30vh, 76px); }
  #sound-waves-s2-regulasi    { height: 10px; }
}

/* ============================================================
   KARAKTER GURU — SCENE 1 (pojok KANAN bawah, ukuran lebih kecil)
   Sama persis dengan blok "KARAKTER GURU — SCENE 2" di atas, hanya
   ID elemen berbeda (…-s1) karena tiap scene punya audio & elemen
   karakter sendiri-sendiri. Lihat playScene1Teacher()/
   stopScene1Teacher() di main.js.
   ============================================================ */
#teacher-wrap-s1 {
  position: absolute;
  bottom: 0;
  right: 0.4rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 176px;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#teacher-wrap-s1.teacher-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#teacher-wrap-s1.teacher-fade-out {
  opacity: 0;
  transform: translateY(30px) scale(0.85);
}

#teacher-static-s1 {
  width: 154px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

#sound-waves-s1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 16px;
  margin-top: 2px;
}
#sound-waves-s1.hidden { display: none; }
#sound-waves-s1 span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: var(--primary-light);
  animation: waveBar 0.9s ease-in-out infinite;
}
#sound-waves-s1 span:nth-child(1) { height: 6px;  animation-delay: 0.0s; }
#sound-waves-s1 span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
#sound-waves-s1 span:nth-child(3) { height: 16px; animation-delay: 0.3s;  }
#sound-waves-s1 span:nth-child(4) { height: 10px; animation-delay: 0.45s; }
#sound-waves-s1 span:nth-child(5) { height: 6px;  animation-delay: 0.6s;  }

@media (max-width: 600px) {
  #teacher-wrap-s1   { width: 120px; }
  #teacher-static-s1 { width: 104px; }
}

@media (max-height: 430px) and (orientation: landscape) {
  #teacher-wrap-s1   { width: auto; max-width: 76px; right: 0.3rem; }
  #teacher-static-s1 { width: auto; height: min(30vh, 76px); }
  #sound-waves-s1    { height: 10px; }
}

/* ============================================================
   KARAKTER GURU — SCENE 1, SUB-SCENE "Kapasitas EBT Terpasang"
   Salinan persis dari blok teacher-wrap-s1 di atas, hanya menyasar
   elemen sub-scene ke-2 Scene 1.
   ============================================================ */
#teacher-wrap-s1-kapasitas {
  position: absolute;
  bottom: 0;
  right: 0.4rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 176px;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#teacher-wrap-s1-kapasitas.teacher-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#teacher-wrap-s1-kapasitas.teacher-fade-out {
  opacity: 0;
  transform: translateY(30px) scale(0.85);
}

#teacher-static-s1-kapasitas {
  width: 154px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

#sound-waves-s1-kapasitas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 16px;
  margin-top: 2px;
}
#sound-waves-s1-kapasitas.hidden { display: none; }
#sound-waves-s1-kapasitas span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: var(--primary-light);
  animation: waveBar 0.9s ease-in-out infinite;
}
#sound-waves-s1-kapasitas span:nth-child(1) { height: 6px;  animation-delay: 0.0s; }
#sound-waves-s1-kapasitas span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
#sound-waves-s1-kapasitas span:nth-child(3) { height: 16px; animation-delay: 0.3s;  }
#sound-waves-s1-kapasitas span:nth-child(4) { height: 10px; animation-delay: 0.45s; }
#sound-waves-s1-kapasitas span:nth-child(5) { height: 6px;  animation-delay: 0.6s;  }

@media (max-width: 600px) {
  #teacher-wrap-s1-kapasitas   { width: 120px; }
  #teacher-static-s1-kapasitas { width: 104px; }
}

@media (max-height: 430px) and (orientation: landscape) {
  #teacher-wrap-s1-kapasitas   { width: auto; max-width: 76px; right: 0.3rem; }
  #teacher-static-s1-kapasitas { width: auto; height: min(30vh, 76px); }
  #sound-waves-s1-kapasitas    { height: 10px; }
}

/* ============================================================
   KARAKTER GURU — SCENE 3 (pojok KANAN bawah, ukuran lebih kecil)
   Sama persis dengan blok "KARAKTER GURU — SCENE 1/SCENE 2" di atas,
   hanya ID elemen berbeda (…-s3) karena Scene 3 punya audio & elemen
   karakter guru sendiri (lihat playScene3Teacher()/initScene3() di
   main.js).
   ============================================================ */
#teacher-wrap-s3 {
  position: absolute;
  bottom: 0;
  right: 0.4rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 176px;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#teacher-wrap-s3.teacher-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#teacher-wrap-s3.teacher-fade-out {
  opacity: 0;
  transform: translateY(30px) scale(0.85);
}

#teacher-static-s3 {
  width: 154px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

#sound-waves-s3 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 16px;
  margin-top: 2px;
}
#sound-waves-s3.hidden { display: none; }
#sound-waves-s3 span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: var(--primary-light);
  animation: waveBar 0.9s ease-in-out infinite;
}
#sound-waves-s3 span:nth-child(1) { height: 6px;  animation-delay: 0.0s; }
#sound-waves-s3 span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
#sound-waves-s3 span:nth-child(3) { height: 16px; animation-delay: 0.3s;  }
#sound-waves-s3 span:nth-child(4) { height: 10px; animation-delay: 0.45s; }
#sound-waves-s3 span:nth-child(5) { height: 6px;  animation-delay: 0.6s;  }

@media (max-width: 600px) {
  #teacher-wrap-s3   { width: 120px; }
  #teacher-static-s3 { width: 104px; }
}

@media (max-height: 430px) and (orientation: landscape) {
  #teacher-wrap-s3   { width: auto; max-width: 76px; right: 0.3rem; }
  #teacher-static-s3 { width: auto; height: min(30vh, 76px); }
  #sound-waves-s3    { height: 10px; }
}

/* ============================================================
   KARAKTER GURU — SCENE 3, SUB-SCENE "Tantangan Pemanfaatan"
   Salinan persis dari blok teacher-wrap-s3 di atas, hanya menyasar
   elemen sub-scene ke-2 Scene 3.
   ============================================================ */
#teacher-wrap-s3-tantangan {
  position: absolute;
  bottom: 0;
  right: 0.4rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 176px;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#teacher-wrap-s3-tantangan.teacher-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#teacher-wrap-s3-tantangan.teacher-fade-out {
  opacity: 0;
  transform: translateY(30px) scale(0.85);
}

#teacher-static-s3-tantangan {
  width: 154px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

#sound-waves-s3-tantangan {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 16px;
  margin-top: 2px;
}
#sound-waves-s3-tantangan.hidden { display: none; }
#sound-waves-s3-tantangan span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: var(--primary-light);
  animation: waveBar 0.9s ease-in-out infinite;
}
#sound-waves-s3-tantangan span:nth-child(1) { height: 6px;  animation-delay: 0.0s; }
#sound-waves-s3-tantangan span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
#sound-waves-s3-tantangan span:nth-child(3) { height: 16px; animation-delay: 0.3s;  }
#sound-waves-s3-tantangan span:nth-child(4) { height: 10px; animation-delay: 0.45s; }
#sound-waves-s3-tantangan span:nth-child(5) { height: 6px;  animation-delay: 0.6s;  }

@media (max-width: 600px) {
  #teacher-wrap-s3-tantangan   { width: 120px; }
  #teacher-static-s3-tantangan { width: 104px; }
}

@media (max-height: 430px) and (orientation: landscape) {
  #teacher-wrap-s3-tantangan   { width: auto; max-width: 76px; right: 0.3rem; }
  #teacher-static-s3-tantangan { width: auto; height: min(30vh, 76px); }
  #sound-waves-s3-tantangan    { height: 10px; }
}

/* ============================================================
   KARAKTER GURU — SCENE 4 / SUB-SCENE SIMULATOR (pojok KANAN bawah)
   Sama persis dengan blok "KARAKTER GURU — SCENE 1/2/3" di atas,
   hanya ID elemen berbeda (…-s4-sim) karena guru di sini hanya
   tampil khusus saat sub-scene Simulator (Scene 4, data-sub="2")
   sedang aktif — lihat showSub()/playScene4SimulatorTeacher() di
   main.js.
   ============================================================ */
#teacher-wrap-s4-sim {
  position: absolute;
  bottom: 0;
  right: 0.4rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 176px;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#teacher-wrap-s4-sim.teacher-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#teacher-wrap-s4-sim.teacher-fade-out {
  opacity: 0;
  transform: translateY(30px) scale(0.85);
}

#teacher-static-s4-sim {
  width: 154px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

#sound-waves-s4-sim {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 16px;
  margin-top: 2px;
}
#sound-waves-s4-sim.hidden { display: none; }
#sound-waves-s4-sim span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: var(--primary-light);
  animation: waveBar 0.9s ease-in-out infinite;
}
#sound-waves-s4-sim span:nth-child(1) { height: 6px;  animation-delay: 0.0s; }
#sound-waves-s4-sim span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
#sound-waves-s4-sim span:nth-child(3) { height: 16px; animation-delay: 0.3s;  }
#sound-waves-s4-sim span:nth-child(4) { height: 10px; animation-delay: 0.45s; }
#sound-waves-s4-sim span:nth-child(5) { height: 6px;  animation-delay: 0.6s;  }

@media (max-width: 600px) {
  #teacher-wrap-s4-sim   { width: 120px; }
  #teacher-static-s4-sim { width: 104px; }
}

@media (max-height: 430px) and (orientation: landscape) {
  #teacher-wrap-s4-sim   { width: auto; max-width: 76px; right: 0.3rem; }
  #teacher-static-s4-sim { width: auto; height: min(30vh, 76px); }
  #sound-waves-s4-sim    { height: 10px; }
}

/* ============================================================
   KARAKTER GURU — SCENE 4 / SUB-SCENE BAURAN ENERGI (pojok KANAN bawah)
   Sama persis dengan blok "KARAKTER GURU — SCENE 4 / SUB-SCENE
   SIMULATOR" di atas, hanya ID elemen berbeda (…-s4-bauran) karena guru
   di sini menyasar sub-scene BAURAN ENERGI di Scene 4 — lihat
   showSub()/playScene4BauranTeacher() di main.js.
   ============================================================ */
#teacher-wrap-s4-bauran {
  position: absolute;
  bottom: 0;
  right: 0.4rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 176px;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#teacher-wrap-s4-bauran.teacher-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#teacher-wrap-s4-bauran.teacher-fade-out {
  opacity: 0;
  transform: translateY(30px) scale(0.85);
}

#teacher-static-s4-bauran {
  width: 154px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

#sound-waves-s4-bauran {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 16px;
  margin-top: 2px;
}
#sound-waves-s4-bauran.hidden { display: none; }
#sound-waves-s4-bauran span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: var(--primary-light);
  animation: waveBar 0.9s ease-in-out infinite;
}
#sound-waves-s4-bauran span:nth-child(1) { height: 6px;  animation-delay: 0.0s; }
#sound-waves-s4-bauran span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
#sound-waves-s4-bauran span:nth-child(3) { height: 16px; animation-delay: 0.3s;  }
#sound-waves-s4-bauran span:nth-child(4) { height: 10px; animation-delay: 0.45s; }
#sound-waves-s4-bauran span:nth-child(5) { height: 6px;  animation-delay: 0.6s;  }

@media (max-width: 600px) {
  #teacher-wrap-s4-bauran   { width: 120px; }
  #teacher-static-s4-bauran { width: 104px; }
}

@media (max-height: 430px) and (orientation: landscape) {
  #teacher-wrap-s4-bauran   { width: auto; max-width: 76px; right: 0.3rem; }
  #teacher-static-s4-bauran { width: auto; height: min(30vh, 76px); }
  #sound-waves-s4-bauran    { height: 10px; }
}

/* ============================================================
   KARAKTER GURU — SCENE 4 / SUB-SCENE POTENSI EBT (pojok KANAN bawah)
   Sama persis dengan blok "KARAKTER GURU — SCENE 4 / SUB-SCENE
   SIMULATOR" di atas, hanya ID elemen berbeda (…-s4-potensi) karena guru
   di sini menyasar sub-scene POTENSI EBT di Scene 4 — lihat
   showSub()/playScene4PotensiTeacher() di main.js.
   ============================================================ */
#teacher-wrap-s4-potensi {
  position: absolute;
  bottom: 0;
  right: 0.4rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 176px;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#teacher-wrap-s4-potensi.teacher-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#teacher-wrap-s4-potensi.teacher-fade-out {
  opacity: 0;
  transform: translateY(30px) scale(0.85);
}

#teacher-static-s4-potensi {
  width: 154px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

#sound-waves-s4-potensi {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 16px;
  margin-top: 2px;
}
#sound-waves-s4-potensi.hidden { display: none; }
#sound-waves-s4-potensi span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: var(--primary-light);
  animation: waveBar 0.9s ease-in-out infinite;
}
#sound-waves-s4-potensi span:nth-child(1) { height: 6px;  animation-delay: 0.0s; }
#sound-waves-s4-potensi span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
#sound-waves-s4-potensi span:nth-child(3) { height: 16px; animation-delay: 0.3s;  }
#sound-waves-s4-potensi span:nth-child(4) { height: 10px; animation-delay: 0.45s; }
#sound-waves-s4-potensi span:nth-child(5) { height: 6px;  animation-delay: 0.6s;  }

@media (max-width: 600px) {
  #teacher-wrap-s4-potensi   { width: 120px; }
  #teacher-static-s4-potensi { width: 104px; }
}

@media (max-height: 430px) and (orientation: landscape) {
  #teacher-wrap-s4-potensi   { width: auto; max-width: 76px; right: 0.3rem; }
  #teacher-static-s4-potensi { width: auto; height: min(30vh, 76px); }
  #sound-waves-s4-potensi    { height: 10px; }
}

/* ============================================================
   KARAKTER GURU — SCENE 5 / SUB-SCENE KUIS INTERAKTIF (pojok KANAN bawah)
   Sama persis dengan blok "KARAKTER GURU — SCENE 4 / SUB-SCENE SIMULATOR"
   di atas, hanya ID elemen berbeda (…-s5-quiz) karena guru di sini hanya
   tampil khusus saat sub-scene Kuis Interaktif (Scene 5, data-sub="0")
   sedang aktif — lihat showSub()/playScene5QuizTeacher() di main.js.
   ============================================================ */
#teacher-wrap-s5-quiz {
  position: absolute;
  bottom: 0;
  right: 0.4rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 176px;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#teacher-wrap-s5-quiz.teacher-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#teacher-wrap-s5-quiz.teacher-fade-out {
  opacity: 0;
  transform: translateY(30px) scale(0.85);
}

#teacher-static-s5-quiz {
  width: 154px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

#sound-waves-s5-quiz {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 16px;
  margin-top: 2px;
}
#sound-waves-s5-quiz.hidden { display: none; }
#sound-waves-s5-quiz span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: var(--primary-light);
  animation: waveBar 0.9s ease-in-out infinite;
}
#sound-waves-s5-quiz span:nth-child(1) { height: 6px;  animation-delay: 0.0s; }
#sound-waves-s5-quiz span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
#sound-waves-s5-quiz span:nth-child(3) { height: 16px; animation-delay: 0.3s;  }
#sound-waves-s5-quiz span:nth-child(4) { height: 10px; animation-delay: 0.45s; }
#sound-waves-s5-quiz span:nth-child(5) { height: 6px;  animation-delay: 0.6s;  }

@media (max-width: 600px) {
  #teacher-wrap-s5-quiz   { width: 120px; }
  #teacher-static-s5-quiz { width: 104px; }
}

@media (max-height: 430px) and (orientation: landscape) {
  #teacher-wrap-s5-quiz   { width: auto; max-width: 76px; right: 0.3rem; }
  #teacher-static-s5-quiz { width: auto; height: min(30vh, 76px); }
  #sound-waves-s5-quiz    { height: 10px; }
}

/* ============================================================
   KARAKTER GURU — SCENE 6 / PETA INTERAKTIF (pojok KANAN bawah)
   Sama persis dengan blok "KARAKTER GURU — SCENE 1" di atas, hanya ID
   elemen berbeda (…-s6) karena guru di sini menyasar Scene 6, yang
   tidak punya sub-scene — dipicu LANGSUNG dari onSceneActivate() di
   main.js (bukan lewat fungsi initScene6(), karena nama itu sudah
   dipakai oleh features.js untuk buildMap() dan akan saling menimpa
   jika dibuat ulang di sini). Lihat playScene6Teacher() di main.js.
   ============================================================ */
#teacher-wrap-s6 {
  position: absolute;
  bottom: 0;
  right: 0.4rem;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 176px;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  pointer-events: none;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#teacher-wrap-s6.teacher-shown {
  opacity: 1;
  transform: translateY(0) scale(1);
}

#teacher-wrap-s6.teacher-fade-out {
  opacity: 0;
  transform: translateY(30px) scale(0.85);
}

#teacher-static-s6 {
  width: 154px;
  height: auto;
  display: block;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.4));
}

#sound-waves-s6 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 16px;
  margin-top: 2px;
}
#sound-waves-s6.hidden { display: none; }
#sound-waves-s6 span {
  display: block;
  width: 3px;
  border-radius: 3px;
  background: var(--primary-light);
  animation: waveBar 0.9s ease-in-out infinite;
}
#sound-waves-s6 span:nth-child(1) { height: 6px;  animation-delay: 0.0s; }
#sound-waves-s6 span:nth-child(2) { height: 12px; animation-delay: 0.15s; }
#sound-waves-s6 span:nth-child(3) { height: 16px; animation-delay: 0.3s;  }
#sound-waves-s6 span:nth-child(4) { height: 10px; animation-delay: 0.45s; }
#sound-waves-s6 span:nth-child(5) { height: 6px;  animation-delay: 0.6s;  }

@media (max-width: 600px) {
  #teacher-wrap-s6   { width: 120px; }
  #teacher-static-s6 { width: 104px; }
}

@media (max-height: 430px) and (orientation: landscape) {
  #teacher-wrap-s6   { width: auto; max-width: 76px; right: 0.3rem; }
  #teacher-static-s6 { width: auto; height: min(30vh, 76px); }
  #sound-waves-s6    { height: 10px; }
}

/* ============================================
   SCENE 0 (HERO/BERANDA) — perbaikan HP landscape (tinggi viewport pendek)
   BUG: .hero-title, .hero-subtitle, .hero-stats, dsb. diskalakan pakai vw,
   jadi di HP landscape sungguhan (lebar ~660-900px tapi tinggi hanya
   ~360-430px, mis. iPhone SE/12/13, HP Android umum) ukurannya tetap
   besar seperti di tablet/desktop. Karena #scene-0 pakai overflow:hidden,
   konten yang kepanjangan itu jadi tumpang-tindih dengan header HUD di
   atas dan tombol CTA paling bawah ter-clip hilang dari layar.
   SOLUSI: sama seperti perbaikan splash (lihat @media max-height:500px
   di atas), skalakan hero pakai vh & rapatkan spacing saat tinggi
   viewport pendek dalam mode landscape. */
@media (max-height: 430px) and (orientation: landscape) {
  #scene-0 { padding: 0.4rem 1.2rem; }
  .hero-eyebrow {
    font-size: 0.56rem; padding: 0.18rem 0.6rem; margin-bottom: 0.3rem;
  }
  .hero-title {
    font-size: clamp(0.8rem, 3.4vh, 1.35rem);
    line-height: 1.05;
    margin-bottom: 0.25rem;
  }
  .hero-subtitle {
    font-size: 0.6rem; line-height: 1.25; margin-bottom: 0.3rem;
  }
  .hero-stats { gap: 0.3rem; margin-bottom: 0.3rem; }
  .stat-pill { padding: 0.2rem 0.55rem; border-radius: 8px; }
  .stat-pill .num { font-size: 0.8rem; }
  .stat-pill .label { font-size: 0.46rem; margin-top: 0.1rem; }
  .hero-topics { gap: 0.22rem; margin-bottom: 0.3rem; }
  .topic-chip { font-size: 0.54rem; padding: 0.16rem 0.5rem; }
  .hero-cta-row { gap: 0.35rem !important; margin-bottom: 0.2rem !important; }
  .btn-start { font-size: 0.62rem; padding: 0.38rem 0.85rem; gap: 0.3rem; }
  .hero-hint { display: none; }

  /* Toast XP — "bottom:100px" tetap terlalu tinggi relatif tinggi stage
     yang cuma ~360-430px, jadi menutupi konten tengah. Turunkan jaraknya.
     CATATAN: perbaikan .scene-header/.scene-title/.scene-num-badge/
     .scene-desc yg dulunya juga ditaruh di sini SENGAJA dipindah ke
     assets/css/extras.css (lihat blok "MODE PADAT UNTUK STAGE SANGAT
     PENDEK" di sana) — file itu dimuat setelah style.css, jadi rule
     dengan selector sama di style.css akan selalu tertimpa olehnya
     walau media query di sini lebih spesifik. Taruh di sini = tidak
     akan pernah benar-benar berlaku. */
  .toast { bottom: 40px; font-size: 0.68rem; padding: 0.45rem 0.9rem; }
}