/* Misi Moci + kartu bergambar (Simak Web). Warna ikut tema lewat variabel style.css. */
.misi { flex: none; margin: 10px 0 4px; border-radius: 18px; background: var(--kartu); border: 1px solid var(--garis); box-shadow: var(--bayang); overflow: hidden; }
.misi-kepala { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 12px 8px 8px; cursor: pointer; }
.misi-kepala:focus-visible { outline: 2px solid var(--aksen); outline-offset: -2px; border-radius: 18px; }
.misi .misi-moci { width: 44px; height: 40px; cursor: pointer; }
.misi-teks { flex: 1; display: grid; gap: 5px; min-width: 0; }
.misi-lanjut { font-size: 12.5px; color: var(--samar); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.misi-teks b { font: 600 15px Fredoka, var(--sans); }
.misi-bar { display: block; height: 8px; border-radius: 4px; background: var(--kartu-2); overflow: hidden; }
.misi-isi-bar { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--c-kuning), var(--rekam)); transition: width .6s cubic-bezier(.2,1.2,.4,1); }
.misi-angka { font: 600 14px Fredoka, var(--sans); color: var(--redup); font-variant-numeric: tabular-nums; }
.misi-panah { color: var(--samar); transition: transform .25s; }
.misi.ciut .misi-panah { transform: rotate(-90deg); }
.misi.ciut .misi-badan { display: none; }
.misi-daftar { list-style: none; margin: 0; padding: 0 12px 10px; display: grid; gap: 2px; }
.misi-daftar li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 4px; border-radius: 10px; }
.misi-daftar b { display: block; font-size: 14px; font-weight: 600; }
.misi-daftar small { display: block; font-size: 12.5px; color: var(--samar); line-height: 1.35; }
.misi-cek { flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 2px solid var(--garis-kuat); display: grid; place-items: center; transition: background .25s, border-color .25s; }
.misi-daftar li.beres .misi-cek { background: var(--c-hijau); border-color: var(--c-hijau); }
.misi-daftar li.beres .misi-cek::after { content: ""; width: 9px; height: 5px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }
.misi-daftar li.beres b { color: var(--samar); text-decoration: line-through; text-decoration-thickness: 2px; }
.misi-daftar li.baru { animation: misi-pop .5s cubic-bezier(.2,1.5,.4,1); }
.misi-daftar li.baru .misi-cek { animation: misi-cap .45s cubic-bezier(.2,1.8,.4,1); }
@keyframes misi-pop { 0% { background: rgb(217 165 33 / .35); } 100% { background: transparent; } }
@keyframes misi-cap { 0% { transform: scale(.4); } 60% { transform: scale(1.3); } 100% { transform: none; } }
.misi-akhir { padding: 0 12px 12px; }
.misi.tamat .misi-kepala .misi-teks b::after { content: " · tamat!"; color: var(--rekam); }
.misi-kilau { position: fixed; z-index: 9500; pointer-events: none; }
.misi-kilau i { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: var(--w); animation: misi-pecah .8s cubic-bezier(.1,.8,.3,1) forwards; }
@keyframes misi-pecah { from { transform: rotate(var(--a)) translateX(0) scale(1); opacity: 1; } to { transform: rotate(var(--a)) translateX(46px) scale(.3); opacity: 0; } }
.misi-toast { position: fixed; left: 50%; bottom: 120px; z-index: 9500; transform: translate(-50%, 20px); opacity: 0; padding: 12px 20px; border-radius: 999px; background: var(--teks); color: var(--latar); font: 600 15px Fredoka, var(--sans); box-shadow: 0 14px 30px -12px rgb(0 0 0 / .5); transition: transform .3s cubic-bezier(.2,1.4,.4,1), opacity .3s; white-space: nowrap; }
.misi-toast.tampil { transform: translate(-50%, 0); opacity: 1; }
.misi-rayakan { width: min(420px, calc(100vw - 32px)); padding: 26px 24px 22px; border: 0; border-radius: 26px; background: var(--kartu); color: var(--teks); text-align: center; overflow: hidden; box-shadow: 0 30px 60px -20px rgb(0 0 0 / .5); }
.misi-rayakan::backdrop { background: rgb(28 20 12 / .55); }
.misi-rayakan .misi-moci-besar { margin: 0 auto 6px; width: 150px; height: 138px; }
.misi-rayakan h2 { margin: 0 0 8px; font: 600 26px Fredoka, var(--sans); }
.misi-rayakan p { margin: 0 0 18px; color: var(--redup); line-height: 1.5; }
.misi-rayakan .aksi { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.konfeti { position: absolute; inset: 0; pointer-events: none; }
.konfeti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: konfeti 1.8s cubic-bezier(.2,.6,.4,1) forwards; }
@keyframes konfeti { to { transform: translateY(560px) rotate(var(--r)); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .misi-isi-bar, .misi-toast { transition: none; }
  .misi-daftar li.baru, .misi-daftar li.baru .misi-cek, .misi-kilau i, .konfeti i { animation: none; }
  .konfeti { display: none; }
}