/* ==========================================================
   Coding Island — gaya dasar
   Warna, komponen (tombol, kartu, modal, toast, loader),
   dan kelas animasi. Tailwind dipakai untuk tata letak.
   ========================================================== */

/* ---------- Font lokal (woff2 variabel, lisensi OFL: fonts/LICENSE-OFL.txt) ---------- */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/baloo-2-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/baloo-2-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/nunito-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
  src: url('../fonts/nunito-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Token warna & ukuran ---------- */
:root {
  --teal-tua: #287A74;   /* navbar, tombol utama, judul (teks putih) */
  --teal: #55A9A0;       /* aksen, hover, progres (teks gelap) */
  --mint: #AEEED3;       /* latar kartu, area sukses */
  --kuning: #FFF8B0;     /* clue, bintang, sorotan */
  --tinta: #12332F;      /* teks utama */
  --oranye: #E8743B;     /* peringatan lembut */
  --latar: #F6FBF9;      /* latar halaman */

  --font-judul: "Baloo 2", system-ui, sans-serif;
  --font-isi: Nunito, system-ui, sans-serif;
  --font-kode: "JetBrains Mono", ui-monospace, monospace;

  --sudut: 1rem;         /* setara rounded-2xl */
  --sudut-besar: 1.5rem;
  --bayangan: 0 12px 32px -14px rgba(18, 51, 47, 0.28);
  --bayangan-kecil: 0 4px 14px -6px rgba(18, 51, 47, 0.25);
}

/* ---------- Dasar ---------- */
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--latar);
  color: var(--tinta);
  font-family: var(--font-isi);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: clip;              /* cegah scroll horizontal */
  -webkit-font-smoothing: antialiased;
}

body.modal-terbuka { overflow: hidden; }

h1, h2, h3, h4 { font-family: var(--font-judul); line-height: 1.15; }

code, pre, kbd, .font-kode { font-family: var(--font-kode); }

img { max-width: 100%; }

/* Atribut hidden selalu menang atas display dari kelas lain */
[hidden] { display: none !important; }

#app:focus { outline: none; }

/* Fokus keyboard yang jelas, terlihat di latar terang maupun gelap */
:focus-visible {
  outline: 4px solid var(--kuning);
  outline-offset: 2px;
  box-shadow: 0 0 0 7px var(--teal-tua);
}

/* Tautan "lewati ke isi" untuk pengguna keyboard */
.lewati-konten {
  position: fixed;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: .75rem 1.25rem;
  border-radius: var(--sudut);
  background: var(--teal-tua);
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}
.lewati-konten:focus { top: 1rem; }

/* Tinggi penuh layar yang aman di HP */
.tinggi-layar { min-height: 100vh; min-height: 100svh; }

/* ---------- Tombol besar ---------- */
.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.5rem;
  padding: .75rem 1.75rem;
  border: 3px solid transparent;
  border-radius: var(--sudut);
  font-family: var(--font-judul);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 5px 0 0 rgba(18, 51, 47, 0.22), var(--bayangan-kecil);
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
}
.tombol:hover { transform: translateY(-2px); }
.tombol:active { transform: translateY(3px); box-shadow: 0 2px 0 0 rgba(18, 51, 47, 0.22); }
.tombol:disabled, .tombol[aria-disabled="true"] {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

.tombol-utama { background: var(--teal-tua); color: #fff; }
.tombol-utama:hover { background: var(--teal); color: var(--tinta); }

.tombol-sekunder { background: #fff; color: var(--teal-tua); border-color: var(--teal); }
.tombol-sekunder:hover { background: var(--mint); color: var(--tinta); }

.tombol-bahaya { background: var(--oranye); color: var(--tinta); }
.tombol-bahaya:hover { background: #F08A56; }

.tombol-kecil { min-height: 2.75rem; padding: .5rem 1.1rem; font-size: 1.05rem; }
.tombol-lebar { width: 100%; }

.tombol-ikon { width: 1.75rem; height: 1.75rem; object-fit: contain; flex-shrink: 0; }

/* ---------- Kartu ---------- */
.kartu {
  background: #fff;
  border: 2px solid rgba(174, 238, 211, 0.8);
  border-radius: var(--sudut-besar);
  box-shadow: var(--bayangan);
  padding: 1.5rem;
}
.kartu-mint { background: var(--mint); border-color: var(--mint); }
.kartu-kuning { background: var(--kuning); border-color: #F3E98A; }
.kartu-judul {
  margin: 0 0 .5rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--teal-tua);
}

/* ---------- Gelembung bicara Robot Tutor ---------- */
.gelembung {
  position: relative;
  display: inline-block;
  padding: .75rem 1.1rem;
  border-radius: var(--sudut-besar);
  background: #fff;
  color: var(--tinta);
  font-family: var(--font-judul);
  font-weight: 700;
  font-size: 1.2rem;
  box-shadow: var(--bayangan-kecil);
}
.gelembung::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border: 10px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
}

/* ---------- Modal ---------- */
.modal-latar {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(18, 51, 47, 0.55);
  animation: pudar-masuk .2s ease both;
}
.modal-kotak {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: calc(100vh - 2rem);
  max-height: calc(100svh - 2rem);
  overflow-y: auto;
  padding: 2rem 1.5rem 1.5rem;
  border-radius: 1.75rem;
  background: #fff;
  box-shadow: 0 24px 60px -20px rgba(18, 51, 47, 0.5);
  text-align: center;
}
.modal-tutup {
  position: absolute;
  top: .75rem;
  right: .75rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background: var(--latar);
  color: var(--tinta);
  cursor: pointer;
  transition: background-color .15s ease;
}
.modal-tutup:hover { background: var(--mint); }
.modal-gambar { width: 7rem; height: auto; margin: 0 auto .5rem; }
.modal-judul { margin: 0 0 .5rem; font-size: 1.75rem; font-weight: 800; color: var(--teal-tua); }
.modal-isi { font-size: 1.15rem; }
.modal-aksi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.5rem;
}

/* ---------- Toast ---------- */
.wadah-toast {
  position: fixed;
  top: 1rem;
  right: 1rem;
  left: 1rem;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .75rem;
  pointer-events: none;
}
@media (min-width: 640px) {
  .wadah-toast { left: auto; width: 23rem; }
}
.toast {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  padding: .85rem 1rem;
  border-left: 8px solid var(--teal);
  border-radius: var(--sudut);
  background: #fff;
  box-shadow: var(--bayangan);
  font-weight: 700;
  font-size: 1.05rem;
  pointer-events: auto;
  animation: muncul .3s ease both;
  transition: opacity .25s ease, transform .25s ease;
}
.toast img { width: 2.25rem; height: 2.25rem; object-fit: contain; flex-shrink: 0; }
.toast-sukses { border-left-color: var(--teal-tua); background: #EFFBF5; }
.toast-peringatan { border-left-color: var(--oranye); background: #FFF3EC; }
.toast-info { border-left-color: var(--teal); background: var(--kuning); }
.toast-keluar { opacity: 0; transform: translateX(20px); }

/* ---------- Loader robot berpikir ---------- */
.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  min-height: 60vh;
  padding: 2rem 1rem;
  text-align: center;
}
.loader-robot { width: 8rem; height: auto; }
.loader-teks { font-family: var(--font-judul); font-weight: 700; font-size: 1.35rem; color: var(--teal-tua); }
.loader-titik span { animation: kedip 1.2s infinite both; }
.loader-titik span:nth-child(2) { animation-delay: .2s; }
.loader-titik span:nth-child(3) { animation-delay: .4s; }

/* ---------- Bagian landing ---------- */
.hero-overlay {
  background:
    linear-gradient(180deg, rgba(18, 51, 47, 0.55) 0%, rgba(18, 51, 47, 0.35) 45%, rgba(18, 51, 47, 0.65) 100%);
}
.teks-bayangan { text-shadow: 0 3px 14px rgba(18, 51, 47, 0.55); }

.mini-editor {
  width: 100%;
  max-width: 15rem;
  border-radius: var(--sudut);
  background: var(--tinta);
  color: var(--mint);
  box-shadow: var(--bayangan-kecil);
  text-align: left;
  overflow: hidden;
}
.mini-editor-atas { display: flex; gap: .35rem; padding: .6rem .8rem; background: rgba(255, 255, 255, 0.08); }
.mini-editor-atas i { width: .65rem; height: .65rem; border-radius: 999px; background: var(--teal); }
.mini-editor-atas i:nth-child(2) { background: var(--kuning); }
.mini-editor-atas i:nth-child(3) { background: var(--oranye); }
.mini-editor pre { margin: 0; padding: .75rem 1rem 1rem; font-size: 1rem; line-height: 1.7; white-space: pre-wrap; }
.mini-editor .kata-kunci { color: var(--kuning); font-weight: 700; }

/* ---------- Formulir ---------- */
.label-kolom {
  display: block;
  margin-bottom: .4rem;
  padding: 0;
  font-family: var(--font-judul);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--tinta);
}
.kolom-input {
  width: 100%;
  min-height: 3.5rem;
  padding: .75rem 1rem;
  border: 3px solid #CFE7DF;
  border-radius: var(--sudut);
  background: #fff;
  color: var(--tinta);
  font-size: 1.2rem;
  font-weight: 700;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kolom-input::placeholder { color: #6E8F8A; font-weight: 600; }
.kolom-input:hover { border-color: var(--teal); }
.kolom-input:focus,
.kotak-pin-input:focus {
  outline: none;
  border-color: var(--teal-tua);
  box-shadow: 0 0 0 4px rgba(85, 169, 160, 0.35);
}
.kolom-input:disabled, .kotak-pin-input:disabled { background: #EEF4F2; cursor: not-allowed; }
.kolom-input[aria-invalid="true"],
.kotak-pin-input[aria-invalid="true"] { border-color: var(--oranye); background: #FFF6F0; }

select.kolom-input {
  appearance: none;
  padding-right: 3rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23287A74' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}
.kolom-kode { font-family: var(--font-kode); text-transform: uppercase; letter-spacing: .3em; }

.pesan-kolom { min-height: 1.6rem; margin: .35rem 0 0; font-weight: 700; font-size: 1rem; line-height: 1.4; }
.pesan-galat { color: #B24E1C; }  /* oranye yang digelapkan agar terbaca */
.pesan-oke { color: var(--teal-tua); }
.pesan-galat::before { content: "⚠ "; }
.pesan-oke::before { content: "✓ "; }

.tautan { color: var(--teal-tua); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.tautan:hover { color: var(--tinta); }

/* Kotak PIN 4 angka */
.kotak-pin { border: 0; margin: 0; padding: 0; min-width: 0; }
.kotak-pin-input {
  width: 3.5rem;
  height: 4rem;
  border: 3px solid #CFE7DF;
  border-radius: var(--sudut);
  background: #fff;
  color: var(--tinta);
  font-family: var(--font-kode);
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  transition: border-color .15s ease, box-shadow .15s ease;
}
@media (min-width: 400px) {
  .kotak-pin-input { width: 4rem; height: 4.5rem; }
}

/* Papan angka besar */
.tombol-angka {
  min-height: 4rem;
  border: 3px solid #CFE7DF;
  border-radius: var(--sudut);
  background: #fff;
  color: var(--tinta);
  font-family: var(--font-judul);
  font-size: 1.9rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 0 0 #CFE7DF;
  transition: transform .1s ease, background-color .15s ease, box-shadow .1s ease;
}
.tombol-angka:hover { background: var(--mint); }
.tombol-angka:active { transform: translateY(3px); box-shadow: 0 1px 0 0 #CFE7DF; }
.tombol-angka:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.tombol-angka-ok { background: var(--teal-tua); border-color: var(--teal-tua); color: #fff; box-shadow: 0 4px 0 0 #1C5A55; }
.tombol-angka-ok:hover { background: var(--teal); color: var(--tinta); }

/* Kartu pilih avatar */
.pilih-avatar {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1rem .75rem;
  border: 3px solid #CFE7DF;
  border-radius: var(--sudut-besar);
  background: #fff;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.pilih-avatar:hover { border-color: var(--teal); transform: translateY(-2px); }
.pilih-avatar input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pilih-avatar:has(input:checked) { border-color: var(--teal-tua); background: var(--mint); box-shadow: var(--bayangan-kecil); }
.pilih-avatar:has(input:focus-visible) { outline: 4px solid var(--kuning); outline-offset: 2px; box-shadow: 0 0 0 7px var(--teal-tua); }
.pilih-avatar .tanda-pilih {
  position: absolute;
  top: .6rem;
  right: .6rem;
  display: none;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--teal-tua);
  color: #fff;
  font-weight: 800;
}
.pilih-avatar:has(input:checked) .tanda-pilih { display: grid; }

/* Indikator langkah */
.titik-langkah {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 3px solid #CFE7DF;
  border-radius: 999px;
  background: #fff;
  color: #5E7F7A;
  font-family: var(--font-judul);
  font-weight: 800;
  font-size: 1.35rem;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
[data-status="aktif"] > .titik-langkah { background: var(--teal-tua); border-color: var(--teal-tua); color: #fff; }
[data-status="selesai"] > .titik-langkah { background: var(--mint); border-color: var(--teal); color: var(--teal-tua); }
.label-langkah { font-weight: 800; font-size: .95rem; color: #5E7F7A; }
[data-status="aktif"] > .label-langkah { color: var(--teal-tua); }
.garis-langkah { flex: 1; height: 6px; margin-top: 1.3rem; border-radius: 999px; background: #DCEFE8; transition: background-color .2s ease; }
.garis-langkah[data-selesai="true"] { background: var(--teal); }

/* ---------- Header siswa ---------- */
.header-siswa {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--teal-tua);
  color: #fff;
  box-shadow: 0 6px 20px -10px rgba(18, 51, 47, 0.5);
}
.chip-uang {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .25rem .65rem .25rem .3rem;
  border-radius: 999px;
  font-family: var(--font-judul);
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--tinta);
}
.chip-uang img { width: 1.75rem; height: 1.75rem; object-fit: contain; }
.chip-koin { background: var(--kuning); }
.chip-berlian { background: var(--mint); }
.tombol-keluar { min-height: 2.75rem; padding: .4rem .75rem; font-size: 1rem; }

/* ---------- Peta: kartu zona ---------- */
.kartu-zona {
  --aksen: var(--teal);
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 17rem;   /* tinggi mengikuti isi agar tidak terpotong di HP */
  overflow: hidden;
  border: 4px solid var(--aksen);
  border-radius: 1.75rem;
  background: var(--tinta);
  color: #fff;
  text-align: left;
  text-decoration: none;
  box-shadow: var(--bayangan);
  transition: transform .2s ease, box-shadow .2s ease;
}
@media (min-width: 1024px) {
  .kartu-zona { min-height: 20rem; }
}
a.kartu-zona:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -16px rgba(18, 51, 47, 0.45); }
.kartu-zona-gambar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
a.kartu-zona:hover .kartu-zona-gambar { transform: scale(1.05); }
.kartu-zona-tirai {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(18, 51, 47, 0.2) 0%, rgba(18, 51, 47, 0.25) 40%, rgba(18, 51, 47, 0.85) 100%);
}
.kartu-zona[data-status="terkunci"] { border-color: #9AA8A6; cursor: not-allowed; }
.kartu-zona[data-status="terkunci"] .kartu-zona-gambar { filter: grayscale(1) brightness(.8); }
.kartu-zona[data-status="terkunci"] .kartu-zona-tirai { background: rgba(70, 82, 80, 0.55); }

.chip-pulau {
  border-radius: .75rem;
  background: var(--aksen, var(--teal));
  color: var(--tinta);
  padding: .15rem .7rem;
  font-family: var(--font-judul);
  font-weight: 800;
}
.chip-status {
  border-radius: 999px;
  padding: .15rem .75rem;
  font-weight: 800;
  font-size: .95rem;
  background: #fff;
  color: var(--teal-tua);
}
.chip-status[data-status="tuntas"] { background: var(--kuning); color: var(--tinta); }
.chip-status[data-status="terkunci"] { background: #DDE3E2; color: #4B5A58; }

.bilah-progres {
  display: block;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
}
.bilah-progres > span { display: block; height: 100%; border-radius: inherit; background: var(--teal); }

/* ---------- Peta: panggung zona ---------- */
.panggung-peta { position: relative; margin: 0 auto; }
.panggung-peta.lanskap {
  width: min(100%, max(38rem, calc((100vh - 13rem) * 16 / 9)));
  width: min(100%, max(38rem, calc((100svh - 13rem) * 16 / 9)));
}
.panggung-peta.potret { width: 100%; }
.panggung-latar {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 1.5rem;
  box-shadow: var(--bayangan);
}
.panggung-latar img { width: 100%; height: 100%; object-fit: cover; }

.titik-level { position: absolute; z-index: 2; transform: translate(-50%, -50%); }
.bulatan-level {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 0;
  border: 4px solid #fff;
  border-radius: 999px;
  font-family: var(--font-judul);
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 5px 0 rgba(18, 51, 47, 0.35), 0 10px 18px -6px rgba(18, 51, 47, 0.55);
  transition: transform .15s ease;
}
.bulatan-level:hover { transform: scale(1.08); }
.bulatan-level[data-status="terkunci"] { background: #B9C5C3; color: #566563; cursor: not-allowed; }
.bulatan-level[data-status="terkunci"]:hover { transform: none; }
.bulatan-level[data-status="terbuka"] {
  background: #fff;
  color: var(--teal-tua);
  box-shadow: 0 0 0 6px var(--kuning), 0 5px 0 6px rgba(18, 51, 47, 0.3);
  animation: denyut 1.8s ease-in-out infinite;
}
.bulatan-level[data-status="selesai"] { background: var(--teal); color: var(--tinta); }
.bulatan-boss { width: 84px; height: 84px; font-size: 2.2rem; border-color: var(--kuning); }
.ikon-piala {
  position: absolute;
  top: -30px;
  left: 50%;
  width: 40px;
  height: 40px;
  object-fit: contain;
  transform: translateX(-50%);
  filter: drop-shadow(0 2px 2px rgba(18, 51, 47, 0.4));
  pointer-events: none;
}
.lencana-bug {
  position: absolute;
  top: -6px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: var(--kuning);
}
.deret-bintang { display: inline-flex; align-items: center; gap: .1rem; }
.bintang-kosong { filter: grayscale(1); opacity: .35; }
.bintang-bawah {
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  filter: drop-shadow(0 1px 1px rgba(18, 51, 47, 0.6));
  pointer-events: none;
}

.legenda-titik {
  width: 1.5rem;
  height: 1.5rem;
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 1px #CFE7DF;
}
.legenda-titik[data-status="terbuka"] { background: #fff; box-shadow: 0 0 0 3px var(--kuning); }
.legenda-titik[data-status="selesai"] { background: var(--teal); }
.legenda-titik[data-status="terkunci"] { background: #B9C5C3; color: #566563; }

/* Robot Tutor di samping level aktif */
.robot-peta { position: absolute; z-index: 1; } /* di bawah lingkaran level agar level tetap bisa diklik */
.robot-peta.di-kanan { transform: translate(48px, -85%); }
.robot-peta.di-kiri { transform: translate(calc(-100% - 48px), -85%); }
.robot-peta.di-bawah.di-kanan { transform: translate(48px, -15%); }
.robot-peta.di-bawah.di-kiri { transform: translate(calc(-100% - 48px), -15%); }
.robot-peta-tombol { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 1rem; }
.robot-peta-gambar { width: 120px; height: auto; filter: drop-shadow(0 6px 6px rgba(18, 51, 47, 0.35)); }
.gelembung-peta {
  position: absolute;
  bottom: calc(100% + 12px);
  width: max-content;
  max-width: 14rem;
  margin: 0;
  padding: .6rem .85rem;
  font-size: 1rem;
  line-height: 1.3;
}
.di-kanan .gelembung-peta { left: -.5rem; }
.di-kiri .gelembung-peta { right: -.5rem; }
.di-kanan .gelembung-peta::after { left: 2.5rem; transform: none; }
.di-kiri .gelembung-peta::after { left: auto; right: 2.5rem; transform: none; }
.di-bawah .gelembung-peta { bottom: auto; top: calc(100% + 12px); }
.di-bawah .gelembung-peta::after { top: -10px; bottom: auto; border-top: 0; border-bottom: 10px solid #fff; }
@media (max-width: 767px) {
  .robot-peta-gambar { width: 88px; }
  .gelembung-peta { max-width: 10rem; font-size: .9rem; }
  .robot-peta.di-kanan, .robot-peta.di-bawah.di-kanan { transform: translate(42px, -75%); }
  .robot-peta.di-kiri, .robot-peta.di-bawah.di-kiri { transform: translate(calc(-100% - 42px), -75%); }
}

.tombol-bulat { width: 3rem; min-height: 3rem; height: 3rem; padding: 0; border-radius: 999px; flex-shrink: 0; }
.tombol-main { min-height: 4rem; padding: .75rem 2.5rem; font-size: 1.6rem; }

/* Roket & robot terbang melintas saat pulau baru terbuka */
.lapisan-terbang { position: fixed; inset: 0; z-index: 70; overflow: hidden; pointer-events: none; }
.terbang-melintas {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(90px, 14vw, 170px);
  height: auto;
  animation: melintas 2.4s cubic-bezier(.45, .05, .55, .95) both;
}
.terbang-robot { width: clamp(100px, 16vw, 190px); animation-delay: .35s; }

/* ---------- Halaman level ---------- */
.kode-inline {
  padding: .05rem .4rem;
  border-radius: .5rem;
  background: var(--kuning);
  font-family: var(--font-kode);
  font-size: .95em;
  font-weight: 700;
}
.lencana-jenis {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .75rem;
  border-radius: 999px;
  background: var(--mint);
  font-weight: 800;
  font-size: .95rem;
}
.lencana-jenis[data-jenis="debug"] { background: var(--kuning); }
.lencana-jenis[data-jenis="boss"] { background: var(--oranye); }

.daftar-tujuan { display: flex; flex-direction: column; gap: .4rem; }
.daftar-tujuan li {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .7rem;
  border-radius: var(--sudut);
  background: var(--latar);
  font-weight: 700;
  transition: background-color .3s ease;
}
.daftar-tujuan .centang {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  border: 3px solid #CFE7DF;
  border-radius: .6rem;
  background: #fff;
  color: #fff;
  font-weight: 900;
  transition: background-color .3s ease, border-color .3s ease, transform .3s ease;
}
.daftar-tujuan li.tercapai { background: var(--mint); }
.daftar-tujuan li.tercapai .centang { background: var(--teal-tua); border-color: var(--teal-tua); transform: scale(1.1); }
.daftar-tujuan li.tercapai .centang::after { content: "\2713"; }

.chip-perintah {
  min-height: 2.75rem;
  padding: .35rem .9rem;
  border: 2px solid var(--teal);
  border-radius: 999px;
  background: #fff;
  color: var(--teal-tua);
  font-family: var(--font-kode);
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.chip-perintah:hover { background: var(--mint); transform: translateY(-1px); }
.chip-perintah[aria-disabled="true"] { cursor: default; opacity: .75; }
.chip-perintah[aria-disabled="true"]:hover { background: #fff; transform: none; }

.editor-kode {
  overflow: hidden;
  border: 3px solid #CFE7DF;
  border-radius: var(--sudut);
  background: #fff;
  box-shadow: var(--bayangan-kecil);
}
.editor-kode:focus-within { border-color: var(--teal-tua); }
.cm-baris-jalan { background: rgba(255, 248, 176, 0.9) !important; box-shadow: inset 4px 0 0 var(--teal); }
.cm-baris-galat { background: rgba(232, 116, 59, 0.18) !important; box-shadow: inset 4px 0 0 var(--oranye); }

/* Editor cadangan (textarea) */
.editor-cadangan { display: flex; font-family: var(--font-kode); font-size: 18px; line-height: 1.6; }
.editor-cadangan-nomor {
  margin: 0;
  padding: 10px 10px 10px 12px;
  min-width: 2.75rem;
  max-height: 24rem;
  overflow: hidden;
  background: var(--latar);
  border-right: 2px solid #DCEFE8;
  color: #6E8F8A;
  text-align: right;
  font: inherit;
  user-select: none;
}
.editor-cadangan-isi { position: relative; flex: 1; min-width: 0; }
.editor-cadangan textarea {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 15rem;
  min-height: 13rem;
  max-height: 24rem;
  padding: 10px 12px;
  border: 0;
  outline: none;
  resize: vertical;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  white-space: pre;
  overflow: auto;
}
.editor-cadangan-sorot { position: absolute; left: 0; right: 0; background: rgba(255, 248, 176, 0.9); box-shadow: inset 4px 0 0 var(--teal); pointer-events: none; }
.editor-cadangan-sorot.galat { background: rgba(232, 116, 59, 0.18); box-shadow: inset 4px 0 0 var(--oranye); }

.tombol-jalankan { min-height: 4rem; padding: .75rem 2rem; font-size: 1.5rem; }

.pilihan-kecepatan { display: inline-flex; padding: .25rem; border-radius: var(--sudut); background: #E4F3EE; }
.pilihan-kecepatan label { position: relative; cursor: pointer; }
.pilihan-kecepatan input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pilihan-kecepatan span {
  display: block;
  padding: .45rem .8rem;
  border-radius: .75rem;
  font-weight: 800;
  font-size: .95rem;
  color: var(--teal-tua);
  transition: background-color .15s ease;
}
.pilihan-kecepatan input:checked + span { background: var(--teal-tua); color: #fff; }
.pilihan-kecepatan input:focus-visible + span { outline: 3px solid var(--kuning); box-shadow: 0 0 0 6px var(--teal-tua); }

/* Sakelar (switch) */
.sakelar { position: relative; display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; cursor: pointer; }
.sakelar input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sakelar-jalur {
  position: relative;
  flex-shrink: 0;
  width: 3rem;
  height: 1.75rem;
  border-radius: 999px;
  background: #C4D3D0;
  transition: background-color .2s ease;
}
.sakelar-jalur::after {
  content: "";
  position: absolute;
  top: .2rem;
  left: .2rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(18, 51, 47, 0.3);
  transition: transform .2s ease;
}
.sakelar input:checked + .sakelar-jalur { background: var(--teal-tua); }
.sakelar input:checked + .sakelar-jalur::after { transform: translateX(1.25rem); }
.sakelar input:focus-visible + .sakelar-jalur { outline: 3px solid var(--kuning); box-shadow: 0 0 0 6px var(--teal-tua); }

/* ---------- Panggung level ---------- */
.panggung {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 4px solid #fff;
  border-radius: 1.5rem;
  background: var(--tinta);
  box-shadow: var(--bayangan);
}
.panggung-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panggung-grid { position: absolute; left: 50%; top: 53%; transform: translate(-50%, -50%); }
.lapisan-petak { position: absolute; inset: 0; display: grid; }
.lapisan-petak span { margin: -0.75px; border: 1.5px dashed rgba(255, 255, 255, 0.55); }
.panggung-grid.tanpa-petak .lapisan-petak { display: none; }

.objek {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sel);
  height: var(--sel);
  transform: translate(calc(var(--x) * var(--sel)), calc(var(--y) * var(--sel)));
}
.objek-rintangan, .objek-bendera { padding: calc(var(--sel) * 0.06); } /* persen dihitung dari lebar grid, jadi pakai ukuran petak */
.objek-item { z-index: 1; display: grid; place-items: center; }
.objek-item img { width: 68%; height: 68%; object-fit: contain; filter: drop-shadow(0 3px 3px rgba(18, 51, 47, 0.4)); }
.objek-item.diambil { visibility: hidden; }
.jurang {
  position: absolute;
  inset: 5%;
  border: 3px solid rgba(255, 255, 255, 0.35);
  border-radius: 22%;
  background: radial-gradient(circle at 50% 45%, #050f0e 0%, #12332F 55%, #2b4a46 100%);
  box-shadow: inset 0 8px 14px rgba(0, 0, 0, 0.7), 0 2px 0 rgba(255, 255, 255, 0.2);
}

.robot-panggung { z-index: 3; }
.robot-goyang, .robot-badan { position: absolute; inset: 0; }
.robot-badan img {
  position: absolute;
  left: 50%;
  bottom: -4%;
  width: 145%;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 4px 4px rgba(18, 51, 47, 0.45));
  pointer-events: none;
}
.robot-badan.hadap-kiri { transform: scaleX(-1); }
.robot-badan.jatuh { animation: jatuh-jurang .6s ease-in forwards; }
.robot-panah {
  position: absolute;
  left: 50%;
  bottom: -14%;
  width: 34%;
  height: 22%;
  border: 2px solid var(--tinta);
  background: var(--kuning);
  clip-path: polygon(0 20%, 60% 20%, 60% 0, 100% 50%, 60% 100%, 60% 80%, 0 80%);
  transform: translateX(-50%) rotate(var(--sudut, 0deg));
  transition: transform .25s ease;
}
.gelembung-robot {
  position: absolute;
  z-index: 5;
  bottom: calc(100% + 30%);
  left: 50%;
  width: max-content;
  max-width: min(16rem, 60vw);
  margin: 0;
  padding: .5rem .75rem;
  font-size: .95rem;
  line-height: 1.3;
  text-align: left;
  transform: translateX(-50%);
}
.gelembung-robot.balon-kiri { left: -10%; transform: none; }
.gelembung-robot.balon-kiri::after { left: 1.25rem; transform: none; }
.gelembung-robot.balon-kanan { left: auto; right: -10%; transform: none; }
.gelembung-robot.balon-kanan::after { left: auto; right: 1.25rem; transform: none; }
.gelembung-robot.balon-bawah { top: calc(100% + 25%); bottom: auto; }
.gelembung-robot.balon-bawah::after { top: -10px; bottom: auto; border-top: 0; border-bottom: 10px solid #fff; }
@media (max-width: 640px) {
  .gelembung-robot { max-width: 11rem; padding: .35rem .55rem; font-size: .8rem; }
}

.item-terbang { position: fixed; z-index: 80; object-fit: contain; pointer-events: none; }
.lompat-gembira { animation: lompat-gembira .9s ease-in-out 2; }

.bintang-hasil { width: 4rem; height: 4rem; object-fit: contain; }
.bintang-hasil.tengah { width: 5rem; height: 5rem; margin-bottom: .75rem; }
.bintang-muncul { animation: bintang-muncul .5s cubic-bezier(.2, .9, .3, 1.4) both; }

/* ---------- Tahap 6: tantangan bonus, level debug, boss ---------- */
.tantangan-bonus {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  padding: .6rem .8rem;
  border-radius: var(--sudut);
  background: #E9F6FF;
  border: 2px dashed #7BB8DD;
}
.banner-bug {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
  padding: .6rem .8rem;
  border: 2px solid #E9C866;
  border-radius: var(--sudut);
  background: var(--kuning);
}
.banner-bug-ikon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: #fff;
  flex-shrink: 0;
}
.piala-soal { width: 4.5rem; height: 4.5rem; object-fit: contain; flex-shrink: 0; filter: drop-shadow(0 4px 6px rgba(180, 130, 20, 0.45)); }

/* Bingkai keemasan panggung boss */
.bingkai-boss {
  padding: 6px;
  border-radius: 1.85rem;
  background: linear-gradient(135deg, #FFE27A 0%, #E8B53B 30%, #FFF3B8 50%, #D99A1E 75%, #FFE27A 100%);
  box-shadow: 0 0 0 3px #B87F12, 0 14px 30px -12px rgba(184, 127, 18, 0.7);
}
.bingkai-boss .panggung { border-color: #FFF3B8; }

/* Animasi piala besar saat boss kalah */
.lapisan-piala {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: 1rem;
  background: rgba(18, 51, 47, 0.75);
  color: #fff;
  text-align: center;
  cursor: pointer;
  animation: pudar-masuk .25s ease both;
}
.piala-sinar {
  position: absolute;
  width: min(80vw, 34rem);
  aspect-ratio: 1;
  border-radius: 999px;
  background: repeating-conic-gradient(rgba(255, 226, 122, 0.45) 0 12deg, transparent 12deg 30deg);
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
  mask: radial-gradient(circle, #000 30%, transparent 70%);
  animation: putar 8s linear infinite;
}
.piala-besar {
  position: relative;
  width: min(55vw, 16rem);
  height: auto;
  filter: drop-shadow(0 10px 30px rgba(255, 210, 80, 0.8));
  animation: piala-muncul .9s cubic-bezier(.2, .9, .3, 1.3) both;
}
.piala-teks { position: relative; font-family: var(--font-judul); font-size: clamp(2rem, 6vw, 3.25rem); font-weight: 800; text-shadow: 0 3px 12px rgba(0, 0, 0, 0.4); animation: muncul .5s .5s both; }
.piala-berlian {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4rem 1.2rem;
  border-radius: 999px;
  background: var(--mint);
  color: var(--tinta);
  font-family: var(--font-judul);
  font-size: 1.6rem;
  font-weight: 800;
  animation: muncul .5s 1s both;
}
.piala-berlian img { width: 2.5rem; height: 2.5rem; object-fit: contain; }

/* ---------- Toko clue ---------- */
.tombol-clue { position: relative; }
.lencana-clue {
  padding: .05rem .5rem;
  border-radius: 999px;
  background: var(--kuning);
  color: var(--tinta);
  font-family: var(--font-isi);
  font-size: .85rem;
  font-weight: 800;
}
.kartu-clue {
  padding: .8rem 1rem;
  border: 3px solid #CFE7DF;
  border-radius: var(--sudut);
  background: #fff;
}
.kartu-clue[data-status="tersedia"] { border-color: var(--teal); }
.kartu-clue[data-status="dibeli"] { border-color: #E9C866; background: var(--kuning); }
.kartu-clue[data-status="terkunci"] { background: #F1F5F4; color: #5E7471; }
.chip-clue-harga, .chip-clue-dibeli {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .15rem .6rem;
  border-radius: 999px;
  font-weight: 800;
  font-size: .9rem;
  white-space: nowrap;
}
.chip-clue-harga { background: var(--kuning); }
.chip-clue-harga img { width: 1.25rem; height: 1.25rem; object-fit: contain; }
.chip-clue-dibeli { background: var(--teal-tua); color: #fff; }
.isi-clue {
  margin: .5rem 0 0;
  padding: .6rem .75rem;
  border-radius: .75rem;
  background: #fff;
  font-family: var(--font-kode);
  font-size: 1rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.aturan-bintang {
  margin-top: 1rem;
  padding: .8rem 1rem;
  border-radius: var(--sudut);
  background: var(--mint);
  text-align: left;
}
.aturan-bintang ul { margin: .35rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .25rem; font-weight: 700; }
.gelembung-toko { display: block; text-align: center; font-size: 1rem; background: var(--latar); }
.gelembung-toko::after { border-top-color: var(--latar); }

/* ---------- Juara ---------- */
.spanduk-juara {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border: 3px solid #E9C866;
  border-radius: var(--sudut-besar);
  background: linear-gradient(135deg, #FFF8B0, #FFE9A3);
  color: var(--tinta);
  text-decoration: none;
  box-shadow: var(--bayangan);
  transition: transform .15s ease;
}
.spanduk-juara:hover { transform: translateY(-2px); }

.sertifikat {
  padding: 14px;
  border-radius: 1.5rem;
  background: linear-gradient(135deg, #287A74, #55A9A0 40%, #E8B53B 60%, #287A74);
  box-shadow: var(--bayangan);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.sertifikat-dalam {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: clamp(1.25rem, 4vw, 3rem);
  border: 3px double #E8B53B;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 10% 10%, rgba(174, 238, 211, 0.6), transparent 30%),
    radial-gradient(circle at 90% 90%, rgba(255, 248, 176, 0.8), transparent 35%),
    #fff;
  text-align: center;
}
.sertifikat-piala { width: clamp(4rem, 12vw, 6.5rem); height: auto; }
.sertifikat-label { font-family: var(--font-judul); font-weight: 800; letter-spacing: .35em; text-transform: uppercase; color: var(--teal); }
.sertifikat-judul { margin: 0; font-family: var(--font-judul); font-size: clamp(2rem, 6vw, 3.5rem); font-weight: 800; color: var(--teal-tua); line-height: 1.1; }
.sertifikat-teks { max-width: 40rem; font-size: clamp(1rem, 2.2vw, 1.2rem); }
.sertifikat-nama {
  margin: .25rem 0;
  padding: 0 1.5rem .25rem;
  border-bottom: 3px solid #E8B53B;
  font-family: var(--font-judul);
  font-size: clamp(1.8rem, 5vw, 3rem);
  font-weight: 800;
  color: var(--tinta);
  line-height: 1.15;
}
.sertifikat-info { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem 2.5rem; margin-top: .5rem; }
.sertifikat-info div { display: flex; flex-direction: column; align-items: center; }
.sertifikat-info span { font-size: .9rem; font-weight: 700; color: var(--teal-tua); }
.sertifikat-info strong { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-judul); font-size: 1.5rem; }
.sertifikat-ttd { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; text-align: left; }
.sertifikat-ttd-garis { margin: 0; padding-bottom: .1rem; border-bottom: 2px solid var(--tinta); font-family: var(--font-judul); font-size: 1.25rem; font-weight: 800; }

/* ---------- Animasi ---------- */
@keyframes melayang {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes muncul {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes goyang {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px) rotate(-2deg); }
  40% { transform: translateX(8px) rotate(2deg); }
  60% { transform: translateX(-6px); }
  80% { transform: translateX(6px); }
}
@keyframes pudar-masuk {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes denyut {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}
@keyframes melintas {
  0% { transform: translate(-25vw, 25vh) rotate(-6deg); opacity: 0; }
  10% { opacity: 1; }
  85% { opacity: 1; }
  100% { transform: translate(105vw, -105vh) rotate(6deg); opacity: 0; }
}
@keyframes lompat-gembira {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-45%); }
  60% { transform: translateY(-45%) rotate(6deg); }
}
@keyframes bintang-muncul {
  0% { opacity: 0; transform: scale(0) rotate(-30deg); }
  70% { opacity: 1; transform: scale(1.25) rotate(8deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes jatuh-jurang {
  to { transform: scale(.25); opacity: .15; }
}
@keyframes piala-muncul {
  0% { opacity: 0; transform: scale(.2) rotate(-25deg); }
  70% { opacity: 1; transform: scale(1.15) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes putar {
  to { transform: rotate(360deg); }
}
@keyframes kedip {
  0%, 80%, 100% { opacity: .2; }
  40% { opacity: 1; }
}

.melayang { animation: melayang 3.5s ease-in-out infinite; }
.muncul { animation: muncul .4s cubic-bezier(.2, .9, .3, 1.2) both; }

/* Muncul saat digulir (halaman utama). Kelas ditambahkan lewat JS, jadi tanpa JS tetap terlihat. */
.gulir-muncul {
  opacity: 0;
  transform: translateY(32px) scale(.97);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .9, .3, 1.1);
  transition-delay: var(--tunda-gulir, 0s);
}
.gulir-muncul.terlihat { opacity: 1; transform: none; }
.goyang { animation: goyang .5s ease-in-out; }
.halaman-masuk { animation: pudar-masuk .25s ease both; }

/* Penunda animasi muncul agar elemen tampil bergantian */
.tunda-1 { animation-delay: .1s; }
.tunda-2 { animation-delay: .2s; }
.tunda-3 { animation-delay: .3s; }
.tunda-4 { animation-delay: .4s; }

/* Hormati pengguna yang memilih mengurangi gerakan */
@media (prefers-reduced-motion: reduce) {
  .gulir-muncul { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .melayang, .muncul, .goyang, .halaman-masuk, .toast, .modal-latar, .loader-titik span,
  .bulatan-level, .terbang-melintas, .lompat-gembira, .bintang-muncul, .piala-sinar, .piala-besar, .piala-teks, .piala-berlian {
    animation: none !important;
  }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .tombol:hover, .tombol:active, .bulatan-level:hover,
  a.kartu-zona:hover, a.kartu-zona:hover .kartu-zona-gambar { transform: none; }
}

/* ---------- Panel pengembang (hanya uji lokal, MODE_DEV=1) ---------- */
.tombol-dev {
  position: fixed;
  left: 1rem;
  bottom: 1rem;
  z-index: 65;
  min-height: 2.75rem;
  padding: .4rem 1rem;
  border: 3px solid var(--tinta);
  border-radius: 999px;
  background: var(--oranye);
  color: var(--tinta);
  font-family: var(--font-judul);
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--bayangan-kecil);
}
.panel-dev {
  position: fixed;
  left: 1rem;
  bottom: 4.5rem;
  z-index: 65;
  width: min(24rem, calc(100vw - 2rem));
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  padding: 1rem;
}


/* ---------- Gaya cetak (sertifikat juara) ---------- */
@media print {
  .gulir-muncul { opacity: 1 !important; transform: none !important; }
  @page { size: A4 landscape; margin: 10mm; }
  body { background: #fff !important; }
  .header-siswa, .no-print, .tombol-dev, .panel-dev, .wadah-toast, .lewati-konten { display: none !important; }
  .halaman-juara { max-width: none; padding: 0; }
  .sertifikat { box-shadow: none; break-inside: avoid; }
  .sertifikat-dalam { min-height: 170mm; justify-content: center; }
  .melayang, .muncul, .halaman-masuk { animation: none !important; }
}

/* =====================================================================
   Dashboard guru (awalan .dg-) — lebih rapi & padat, tetap memakai palet proyek
   ===================================================================== */
.dg-kerangka {
  --lebar-sidebar: 260px;
  display: grid;
  grid-template-columns: var(--lebar-sidebar) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100svh;
  background: #F3F8F6;
  font-size: .975rem;
}
.dg-kerangka.dg-ciut { --lebar-sidebar: 76px; }

/* Tombol di dashboard memakai huruf isi dan ukuran lebih kecil */
.dg-kerangka .tombol, .form-modal .tombol, .modal-lebar .tombol {
  font-family: var(--font-isi);
  font-weight: 800;
  font-size: .95rem;
  min-height: 2.5rem;
  padding: .45rem 1rem;
  border-width: 2px;
  box-shadow: 0 2px 0 0 rgba(18, 51, 47, 0.15);
}
.dg-kerangka .tombol svg { flex-shrink: 0; }

/* ---------- Sidebar ---------- */
.dg-sidebar {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: 100vh;
  height: 100svh;
  padding: 1rem .75rem;
  overflow-y: auto;
  background: var(--teal-tua);
  color: #fff;
}
.dg-logo { display: flex; align-items: center; gap: .6rem; padding: 0 .35rem; }
.dg-logo-robot { width: 44px; height: auto; flex-shrink: 0; }
.dg-profil {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .65rem;
  border-radius: .9rem;
  background: rgba(18, 51, 47, 0.28);
}
.dg-profil-inisial {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--kuning);
  color: var(--tinta);
  font-family: var(--font-judul);
  font-weight: 800;
  font-size: 1.2rem;
}
.dg-peran {
  display: inline-block;
  margin-top: .1rem;
  padding: 0 .5rem;
  border-radius: 999px;
  background: var(--mint);
  color: var(--tinta);
  font-size: .75rem;
  font-weight: 800;
}
.dg-menu ul { display: flex; flex-direction: column; gap: .2rem; margin: 0; padding: 0; list-style: none; }
.dg-menu a, .dg-tombol-ciut, .dg-keluar {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 2.75rem;
  padding: .55rem .75rem;
  border: 0;
  border-radius: .75rem;
  background: transparent;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.dg-menu a svg, .dg-tombol-ciut svg, .dg-keluar svg { flex-shrink: 0; }
.dg-menu a:hover, .dg-tombol-ciut:hover, .dg-keluar:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.dg-menu a.dg-aktif { background: var(--mint); color: var(--tinta); }
.dg-sidebar-bawah { display: flex; flex-direction: column; gap: .2rem; margin-top: auto; padding-top: .75rem; border-top: 1px solid rgba(255, 255, 255, 0.15); }
.dg-keluar:hover { background: rgba(232, 116, 59, 0.3); }
.dg-tombol-ciut svg { transition: transform .2s ease; }

/* Mode ciut: ikon saja */
.dg-ciut .dg-teks-menu { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dg-ciut .dg-menu a, .dg-ciut .dg-tombol-ciut, .dg-ciut .dg-keluar { justify-content: center; padding: .55rem; }
.dg-ciut .dg-profil { justify-content: center; padding: .4rem; background: transparent; }
.dg-ciut .dg-logo { justify-content: center; padding: 0; }
.dg-ciut .dg-tombol-ciut svg { transform: rotate(180deg); }

/* ---------- Area utama ---------- */
.dg-utama { min-width: 0; display: flex; flex-direction: column; }
.dg-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  padding: .75rem 1.5rem;
  border-bottom: 1px solid #DCEBE7;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(6px);
}
.dg-judul { margin: 0; font-size: 1.6rem; font-weight: 800; color: var(--teal-tua); }
.dg-topbar-kanan { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-left: auto; }
.dg-filter { display: flex; align-items: center; gap: .5rem; }
.dg-filter select { min-height: 2.5rem; padding: .35rem 2.25rem .35rem .75rem; border: 1px solid #C9DDD8; border-radius: .7rem; background-color: #fff; font-weight: 700; }
.dg-tanggal { font-size: .875rem; font-weight: 700; color: #4F6B67; }
.dg-hamburger { display: none; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid #C9DDD8; border-radius: .75rem; background: #fff; color: var(--teal-tua); cursor: pointer; }
.dg-isi { padding: 1.5rem; }
.dg-tirai { position: fixed; inset: 0; z-index: 44; background: rgba(18, 51, 47, 0.5); }

/* Layar kecil: sidebar menjadi drawer */
@media (max-width: 1023px) {
  .dg-kerangka, .dg-kerangka.dg-ciut { grid-template-columns: minmax(0, 1fr); }
  .dg-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    width: 270px;
    transform: translateX(-105%);
    transition: transform .25s ease;
    box-shadow: 0 0 40px rgba(18, 51, 47, 0.35);
  }
  .dg-drawer-buka .dg-sidebar { transform: translateX(0); }
  /* Di drawer selalu tampil lengkap */
  .dg-ciut .dg-teks-menu { position: static; width: auto; height: auto; clip: auto; }
  .dg-ciut .dg-menu a, .dg-ciut .dg-keluar { justify-content: flex-start; padding: .55rem .75rem; }
  .dg-ciut .dg-profil { justify-content: flex-start; padding: .65rem; background: rgba(18, 51, 47, 0.28); }
  .dg-ciut .dg-logo { justify-content: flex-start; padding: 0 .35rem; }
  .dg-tombol-ciut { display: none; }
  .dg-hamburger { display: grid; }
  .dg-topbar { padding: .65rem 1rem; }
  .dg-judul { font-size: 1.35rem; }
  .dg-isi { padding: 1rem; }
}
@media (max-width: 640px) {
  .dg-topbar-kanan { width: 100%; margin-left: 0; justify-content: space-between; }
  .dg-tanggal { font-size: .8rem; }
}

/* ---------- Kartu & statistik ---------- */
.dg-kartu {
  padding: 1.25rem;
  border: 1px solid #DCEBE7;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 6px 18px -14px rgba(18, 51, 47, 0.35);
}
.dg-kartu-kepala { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.dg-subjudul { margin: 0; font-size: 1.25rem; font-weight: 800; color: var(--tinta); }
.dg-grid-stat { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
@media (max-width: 640px) {
  .dg-grid-stat { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .dg-kartu.dg-stat { gap: .6rem; padding: .85rem; }
  .dg-stat-ikon { width: 2.25rem; height: 2.25rem; border-radius: .7rem; }
  .dg-stat-ikon svg { width: 18px; height: 18px; }
  .dg-stat-nilai { font-size: 1.4rem; }
}
.dg-stat { display: flex; align-items: center; gap: .9rem; }
.dg-stat-ikon { display: grid; place-items: center; width: 3rem; height: 3rem; flex-shrink: 0; border-radius: .9rem; background: var(--mint); color: var(--teal-tua); }
.dg-stat-label { margin: 0; font-size: .85rem; font-weight: 700; color: #4F6B67; }
.dg-stat-nilai { margin: 0; font-family: var(--font-judul); font-size: 1.85rem; font-weight: 800; line-height: 1.1; color: var(--tinta); }

.dg-daftar { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dg-daftar-baris { display: flex; align-items: center; gap: .75rem; padding: .6rem .5rem; border-radius: .75rem; color: inherit; text-decoration: none; }
.dg-daftar-baris:hover { background: #F1F8F6; }
.dg-daftar li + li { border-top: 1px solid #EDF4F2; }
.dg-linimasa { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.dg-linimasa li { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding: .55rem 0; }
.dg-linimasa li + li { border-top: 1px solid #EDF4F2; }

.dg-tautan { color: var(--teal-tua); text-decoration: none; }
.dg-tautan:hover { text-decoration: underline; }
.dg-tautan-kecil { font-size: .875rem; font-weight: 800; color: var(--teal-tua); text-decoration: none; white-space: nowrap; }
.dg-tautan-kecil:hover { text-decoration: underline; }

.dg-lencana {
  display: inline-block;
  padding: .1rem .55rem;
  border-radius: 999px;
  background: #E6F3EF;
  color: var(--teal-tua);
  font-size: .78rem;
  font-weight: 800;
  white-space: nowrap;
}
.dg-lencana[data-jenis="selesai"], .dg-lencana[data-jenis="juara"] { background: var(--mint); color: var(--tinta); }
.dg-lencana[data-jenis="coba"] { background: #FFE9DC; color: #9A4316; }
.dg-lencana[data-jenis="clue"], .dg-lencana[data-jenis="piala"] { background: var(--kuning); color: var(--tinta); }
.dg-lencana[data-jenis="daftar"] { background: #E5EEFF; color: #2D4E8C; }
.dg-chip { display: inline-block; margin: .1rem 0; padding: .05rem .5rem; border-radius: .5rem; background: #EEF5F3; font-size: .8rem; font-weight: 700; }
.dg-kode { padding: .05rem .4rem; border-radius: .4rem; background: #EEF5F3; font-family: var(--font-kode); font-size: .9em; font-weight: 700; }
.dg-bilah { display: block; height: 12px; overflow: hidden; border-radius: 999px; background: #E6F3EF; }
.dg-bilah > span { display: block; height: 100%; border-radius: inherit; }

/* ---------- Tabel ---------- */
.dg-tabel-wadah { position: relative; overflow-x: auto; border: 1px solid #E3EEEB; border-radius: .85rem; }
.dg-tabel { width: 100%; border-collapse: collapse; font-size: .925rem; }
.dg-tabel th {
  padding: .6rem .75rem;
  background: #F1F8F6;
  color: #3E625D;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .03em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.dg-tabel td { padding: .6rem .75rem; border-top: 1px solid #E8F0EE; vertical-align: middle; }
.dg-tabel tbody tr:hover td { background: #F8FCFB; }
.dg-tabel .text-right { text-align: right; }
.dg-baris-salah td { background: #FFF4EE; }
.dg-baris-pudar td { color: #6B8581; }
.dg-urut { display: inline-flex; align-items: center; gap: .25rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.dg-urut:hover { color: var(--teal-tua); }
th[aria-sort="ascending"] .dg-urut, th[aria-sort="descending"] .dg-urut { color: var(--teal-tua); }

.dg-tombol-ikon {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  margin-left: .15rem;
  border: 1px solid #CFE3DE;
  border-radius: .6rem;
  background: #fff;
  color: var(--teal-tua);
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .15s ease;
}
.dg-tombol-ikon:hover { background: var(--mint); }
.dg-tombol-ikon.bahaya { color: #B24E1C; }
.dg-tombol-ikon.bahaya:hover { background: #FFE9DC; }
.dg-tombol-ikon:disabled { opacity: .4; cursor: not-allowed; background: #fff; }

.dg-alat { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem; margin-bottom: 1rem; }
.dg-cari { flex: 1 1 16rem; }
.dg-label-sebaris { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .9rem; }
.dg-label-sebaris .dg-input { width: auto; max-width: 16rem; }
.dg-halaman { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; }

/* ---------- Form ---------- */
.dg-label { display: flex; flex-direction: column; gap: .3rem; font-weight: 800; font-size: .9rem; color: var(--tinta); }
.dg-input {
  width: 100%;
  min-height: 2.6rem;
  padding: .5rem .75rem;
  border: 1px solid #C9DDD8;
  border-radius: .7rem;
  background: #fff;
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
}
.dg-input:focus { outline: none; border-color: var(--teal-tua); box-shadow: 0 0 0 3px rgba(85, 169, 160, 0.3); }
select.dg-input, .dg-filter select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23287A74' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .7rem center;
  padding-right: 2.25rem;
}
.dg-form-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.dg-pilihan-grid { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-top: .35rem; }
.dg-centang { display: flex; align-items: center; gap: .45rem; font-weight: 700; cursor: pointer; }
.dg-centang input { width: 1.1rem; height: 1.1rem; accent-color: var(--teal-tua); }
.form-modal { text-align: left; }
.form-aksi { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }
.modal-lebar { max-width: 56rem; }

.dg-kotak-pin { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 1rem; }
.dg-kotak-pin div { display: flex; flex-direction: column; align-items: center; min-width: 9rem; padding: .75rem 1rem; border-radius: .9rem; background: var(--kuning); }
.dg-kotak-pin span { font-size: .8rem; font-weight: 800; color: var(--teal-tua); }
.dg-kotak-pin strong { font-family: var(--font-kode); font-size: 1.6rem; }
.dg-kotak-sukses { padding: 1rem; border-radius: .9rem; background: var(--mint); }

.dg-profil-data { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; margin: 1rem 0 0; }
.dg-profil-data dt { font-size: .8rem; font-weight: 800; color: #4F6B67; }
.dg-profil-data dd { margin: 0; font-weight: 800; }
.dg-blok-kode {
  margin: 0;
  padding: 1rem;
  max-height: 60vh;
  overflow: auto;
  border-radius: .85rem;
  background: var(--tinta);
  color: var(--mint);
  font-family: var(--font-kode);
  font-size: 1rem;
  line-height: 1.65;
  text-align: left;
  white-space: pre;
}
.dg-no-baris { display: inline-block; width: 2.25rem; margin-right: .75rem; color: #6E9C95; text-align: right; user-select: none; }

.dg-kosong { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.5rem 1rem; text-align: center; }

/* ---------- Editor level guru ---------- */
.palet-alat { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; }
.alat-tombol {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .25rem;
  min-height: 4.75rem;
  padding: .45rem .35rem;
  border: 2px solid #CFE3DE;
  border-radius: .9rem;
  background: #fff;
  color: var(--tinta);
  font-weight: 800;
  font-size: .82rem;
  line-height: 1.15;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.alat-tombol:hover { border-color: var(--teal); }
.alat-tombol[aria-pressed="true"] { border-color: var(--teal-tua); background: var(--mint); box-shadow: inset 0 0 0 2px var(--teal-tua); }
.alat-ikon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; color: var(--teal-tua); }
.alat-ikon img, .alat-ikon svg { width: 100%; height: 100%; object-fit: contain; }
.jurang-mini {
  display: block;
  width: 1.9rem;
  height: 1.9rem;
  border: 2px solid rgba(18, 51, 47, 0.25);
  border-radius: 28%;
  background: radial-gradient(circle at 50% 45%, #050f0e 0%, #12332F 55%, #2b4a46 100%);
}

/* Lapisan klik di atas petak panggung */
.lapisan-klik { position: absolute; inset: 0; z-index: 6; display: grid; }
.lapisan-klik button { padding: 0; border: 0; background: transparent; cursor: crosshair; }
.lapisan-klik button:hover { background: rgba(255, 248, 176, 0.35); box-shadow: inset 0 0 0 3px var(--kuning); }
.lapisan-klik button:focus-visible { outline: none; box-shadow: inset 0 0 0 4px var(--kuning); background: rgba(255, 248, 176, 0.3); }
.lapisan-klik.mati { pointer-events: none; }

.pratinjau-siswa { margin-top: .4rem; padding: .75rem; border: 2px dashed #CFE3DE; border-radius: 1rem; background: var(--latar); }
.pratinjau-siswa .kartu { box-shadow: none; }
.dg-alasan { margin: .35rem 0 0; padding-left: 1.2rem; list-style: disc; font-size: .9rem; color: #7A3A14; }
.dg-alasan li + li { margin-top: .2rem; }
.dg-status-terbit { padding: .75rem 1rem; border-radius: .85rem; background: #F7FBFA; border: 1px solid #E3EEEB; }

/* =====================================================================
   Tahap 9: nilai, profil, bantuan, dan perapian
   ===================================================================== */

/* ---------- Target sentuh minimal 44 px ---------- */
.dg-kerangka .tombol, .form-modal .tombol, .modal-lebar .tombol { min-height: 2.75rem; }
.dg-tombol-ikon { width: 2.75rem; height: 2.75rem; }
.dg-input, .dg-filter select { min-height: 2.75rem; }
.dg-urut { min-height: 2.75rem; }
.pilihan-kecepatan span { display: flex; align-items: center; min-height: 2.75rem; }
.sakelar { min-height: 2.75rem; }
.chip-perintah { min-height: 2.75rem; }
.tombol-bulat-besar { width: 3.5rem; min-height: 3.5rem; height: 3.5rem; padding: 0; border-radius: 999px; font-size: 1.6rem; flex-shrink: 0; }

/* ---------- Toast galat (robot kaget) ---------- */
.toast-galat { border-left-color: var(--oranye); background: #FFF3EC; }

/* ---------- Matriks nilai ---------- */
.dg-matriks-wadah { position: relative; max-height: 70vh; overflow: auto; } /* relative: teks sr-only di sel tidak melebarkan halaman */
.dg-matriks { font-size: .875rem; }
.dg-matriks th, .dg-matriks td { padding: .45rem .5rem; text-align: center; }
.dg-matriks thead th { position: sticky; top: 0; z-index: 2; }
.dg-matriks thead tr:nth-child(2) th { top: 2.4rem; }
.dg-kepala-zona {
  background: color-mix(in srgb, var(--warna-zona) 45%, #fff) !important;
  color: var(--tinta) !important;
  letter-spacing: 0 !important;
  font-size: .8rem !important;
  border-left: 2px solid #fff;
}
.dg-kepala-level {
  background: color-mix(in srgb, var(--warna-zona) 22%, #fff) !important;
  color: var(--tinta) !important;
  border-left: 1px solid #fff;
}
.dg-kepala-level abbr { text-decoration: none; cursor: help; }
.dg-kolom-siswa { position: sticky; left: 0; z-index: 1; min-width: 12rem; max-width: 16rem; text-align: left !important; background: #fff; }
thead .dg-kolom-siswa { z-index: 3; background: #F1F8F6; }
.dg-kolom-akhir { position: sticky; right: 0; z-index: 1; min-width: 8.5rem; background: #F7FBFA; border-left: 2px solid #DCEBE7; }
thead .dg-kolom-akhir { z-index: 3; background: #F1F8F6; }
.dg-sel-nilai { cursor: help; white-space: nowrap; }
.dg-bintang-sel { display: inline-flex; gap: 1px; }
.dg-bintang-sel img { width: 15px; height: 15px; object-fit: contain; }
.dg-strip { font-weight: 800; color: #8BA3A0; }
.dg-nilai-timpa { color: #9A4316; text-decoration: underline dotted; text-underline-offset: 3px; }
.hanya-cetak { display: none; }

/* ---------- Profil siswa ---------- */
.koleksi-piala {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25rem;
  padding: .75rem .5rem;
  border: 2px dashed #CFE7DF;
  border-radius: var(--sudut);
  background: var(--latar);
  text-align: center;
}
.koleksi-piala img { width: 4rem; height: 4rem; object-fit: contain; filter: grayscale(1); opacity: .45; }
.koleksi-piala.didapat { border-style: solid; border-color: #E9C866; background: var(--kuning); }
.koleksi-piala.didapat img { filter: drop-shadow(0 4px 6px rgba(184, 127, 18, 0.45)); opacity: 1; }
.profil-bilah { background: #E6F3EF; height: 16px; }
.riwayat-baris { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .65rem 0; }
.riwayat-baris + .riwayat-baris { border-top: 1px solid #E6F0ED; }
.riwayat-zona { padding: .1rem .6rem; border-radius: 999px; color: var(--tinta); font-size: .85rem; font-weight: 800; }

/* ---------- Bantuan ---------- */
.bantuan-kelompok + .bantuan-kelompok { margin-top: 1.5rem; }
.bantuan-pulau { display: inline-block; margin-left: .35rem; padding: .05rem .6rem; border-radius: 999px; background: var(--mint); color: var(--tinta); font-family: var(--font-isi); font-size: .85rem; vertical-align: middle; }
.bantuan-grid { display: grid; gap: .75rem; margin-top: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.bantuan-kartu { padding: .85rem 1rem; border: 2px solid #CFE7DF; border-radius: var(--sudut); background: #fff; }
.bantuan-kartu.belum-terbuka { opacity: .6; background: #F4F7F6; }
.bantuan-chip { padding: .05rem .55rem; border-radius: 999px; background: #E3E9E8; font-size: .8rem; font-weight: 800; }
.bantuan-chip.bisa { background: var(--mint); }
.bantuan-contoh {
  margin: .5rem 0 0;
  padding: .6rem .75rem;
  border-radius: .75rem;
  background: var(--tinta);
  color: var(--mint);
  font-family: var(--font-kode);
  font-size: .95rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.bantuan-tips { margin: .5rem 0 0; padding-left: 1.25rem; list-style: disc; display: flex; flex-direction: column; gap: .3rem; font-weight: 700; }

/* ---------- Gaya cetak dashboard (nilai) ---------- */
@media print {
  .dg-kerangka { display: block; background: #fff; }
  .dg-sidebar, .dg-topbar, .dg-tirai, .no-print { display: none !important; }
  .dg-isi { padding: 0; }
  .dg-kartu { border: 0; box-shadow: none; padding: 0; }
  .hanya-cetak { display: block; }
  .dg-matriks-wadah { max-height: none; overflow: visible; border: 0; }
  .dg-matriks { font-size: 9pt; }
  .dg-matriks thead th, .dg-kolom-siswa, .dg-kolom-akhir { position: static; }
  .dg-matriks th, .dg-matriks td { border: 1px solid #C9D9D5; padding: 3px 4px; }
  .dg-kepala-zona, .dg-kepala-level, .dg-bintang-sel img { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .dg-sel-nilai .sr-only { position: static; width: auto; height: auto; clip: auto; display: none; }
}

/* Panel hero: teks putih di atas teal tua (bukan langsung di atas foto) */
.hero-panel { background: rgba(40, 122, 116, 0.92); border-radius: 1.75rem; padding: 1.5rem; box-shadow: 0 18px 40px -20px rgba(18, 51, 47, 0.6); }
@media (min-width: 640px) { .hero-panel { padding: 2rem 2.25rem; } }
.dg-matriks tbody th { text-transform: none; letter-spacing: 0; font-size: .9rem; font-weight: 700; color: var(--tinta); background: #fff; }