/* murid-seru.css — "Ruang Murid yang Seru" (Okt 2026).
 * Peta Petualangan, peti kejutan & Album Kartu Ilmu, animasi XP/naik level, api semangat,
 * Hoot interaktif, animasi masuk, latar hidup, dan mode baca materi.
 * Semua animasi hanya berjalan di bawah body.anim (dimatikan otomatis oleh pengaturan Animasi,
 * mode hemat data, dan prefers-reduced-motion -- lihat murid-fx.js). */

/* ── latar hidup (di belakang konten) ── */
.seru-latar{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
#layar-app>.app,#layar-app>.nav{position:relative;z-index:1}
#layar-app>.nav{position:fixed}
.seru-latar i{position:absolute;display:block;border-radius:50%;opacity:.0}
.anim:not(.hemat) .seru-latar i{opacity:.5;animation:latarApung var(--d,22s) ease-in-out infinite;animation-delay:var(--t,0s)}
.seru-latar i.b{background:radial-gradient(circle at 35% 35%,#fff,var(--warna,#DDF5E8) 60%);box-shadow:0 0 0 1px rgba(255,255,255,.4) inset}
.seru-latar i.s{border-radius:0;background:none;width:18px!important;height:18px!important;color:var(--warna,#FFC83D);font-size:18px;line-height:1}
.seru-latar i.s::before{content:"\2726"}
@keyframes latarApung{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(14px,-26px) rotate(40deg)}66%{transform:translate(-12px,-10px) rotate(-30deg)}}
@media (prefers-color-scheme:dark){.anim:not(.hemat) .seru-latar i{opacity:.18}}

/* ── animasi masuk berurutan & riak sentuh ── */
.anim .seru-masuk>*{animation:seruMasuk .55s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(var(--i,0) * 55ms)}
@keyframes seruMasuk{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
.seru-riak{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.22;transform:scale(0);animation:riak .55s ease-out forwards}
@keyframes riak{to{transform:scale(1);opacity:0}}
.tombol,.item,.misi,.pt-bulat,.hr-item,.album-k,.chip{position:relative;overflow:hidden}
.anim .nav button[aria-current=page] .e{animation:navLoncat .45s cubic-bezier(.3,1.8,.5,1)}
@keyframes navLoncat{0%{transform:translateY(0) scale(.8)}60%{transform:translateY(-6px) scale(1.15)}100%{transform:translateY(-2px) scale(1.08)}}
.anim .nav button:active .e{transform:scale(.85)}

/* ── kartu misi utama: kilau + XP ── */
.misi-xp{position:absolute;top:14px;right:14px;z-index:2;background:rgba(255,255,255,.95);color:#8A5A00;font-family:var(--f-judul);font-weight:800;font-size:.8rem;padding:4px 10px;border-radius:99px;box-shadow:0 2px 0 rgba(0,0,0,.12)}
.anim .misi:not(.selesai)::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 45%,transparent 60%);background-size:250% 100%;animation:misiKilau 3.6s ease-in-out infinite;pointer-events:none}
@keyframes misiKilau{0%,55%{background-position:150% 0}100%{background-position:-100% 0}}
.anim .misi .aksi{animation:aksiDenyut 2.2s ease-in-out infinite}
@keyframes aksiDenyut{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* ── api semangat & titik pekan (di kartu level) ── */
.lv-semangat{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.14);position:relative;z-index:1}
.lv-api{flex:none;font-size:calc(1.6rem + var(--api,0) * .12rem);line-height:1;filter:drop-shadow(0 2px 6px rgba(255,140,0,.6))}
.anim .lv-api{animation:apiNyala 1.1s ease-in-out infinite alternate;transform-origin:50% 90%}
.lv-api.redup{filter:grayscale(1);opacity:.55;animation:none}
@keyframes apiNyala{0%{transform:scale(1) rotate(-3deg)}100%{transform:scale(1.12,1.18) rotate(3deg)}}
.lv-sem-isi{flex:1;min-width:0}
.lv-sem-isi b{display:block;font-family:var(--f-judul);font-size:1rem;line-height:1.15}
.lv-sem-isi small{font-size:.75rem;opacity:.92}
.lv-titik{display:flex;gap:6px;margin-top:6px}
.lv-titik span{flex:1;max-width:38px;text-align:center;font-size:.62rem;font-weight:800;letter-spacing:.02em}
.lv-titik span i{display:grid;place-items:center;width:26px;height:26px;margin:0 auto 2px;border-radius:50%;background:rgba(255,255,255,.18);font-style:normal;font-size:.8rem}
.lv-titik span.aktif i{background:#FFD76A;color:#7A4A00;box-shadow:0 0 0 3px rgba(255,215,106,.35)}
.lv-titik span.kini i{outline:2px dashed rgba(255,255,255,.85);outline-offset:2px}
.anim .lv-titik span.kini:not(.aktif) i{animation:titikKini 1.6s ease-in-out infinite}
@keyframes titikKini{50%{transform:scale(1.12)}}
.lv-titik span.libur i{background:transparent;border:2px dashed rgba(255,255,255,.4)}
.lv-xp-hit{display:inline-block;min-width:2ch}

/* ── PETA PETUALANGAN (misi harian) ── */
.peta{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--kartu) 0%,var(--kartu) 60%,var(--hijau-muda) 140%)}
.peta .hr-kepala{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:2}
.pt-jalur{list-style:none;position:relative;z-index:1;padding:6px 0 2px}
.pt-garis{position:absolute;inset:0;width:100%;height:100%;z-index:0;overflow:visible;pointer-events:none}
.pt-garis path{fill:none;stroke:var(--garis);stroke-width:7;stroke-linecap:round;stroke-dasharray:2 14}
.pt-garis path.isi{stroke:var(--hijau);stroke-dasharray:none;stroke-width:7;opacity:.85}
.anim .pt-garis path.isi{transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1)}
.pt-titik{position:relative;display:flex;align-items:center;gap:12px;min-height:106px}
.pt-titik.kanan{flex-direction:row-reverse;text-align:right}
.pt-titik.kiri{padding-left:6%}.pt-titik.kanan{padding-right:6%}
.pt-titik.tengah{padding-left:30%}
.pt-bulat{flex:none;width:68px;height:68px;border-radius:50%;display:grid;place-items:center;font-size:1.9rem;border:none;cursor:pointer;text-decoration:none;color:inherit;font:inherit;
  background:var(--kartu);box-shadow:0 5px 0 var(--garis),0 0 0 4px var(--garis) inset}
.pt-bulat .pt-e{font-size:1.8rem;line-height:1}
.pt-titik.sudah .pt-bulat{background:linear-gradient(145deg,#3CC98A,#1FA06A);box-shadow:0 5px 0 #157A50;color:#fff;font-size:2rem;font-weight:800;cursor:default;overflow:visible}
.pt-titik.aktif .pt-bulat{width:78px;height:78px;background:linear-gradient(145deg,#FFD76A,#FFB01F);box-shadow:0 6px 0 #D9A400}
.anim .pt-titik.aktif .pt-bulat::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:4px solid #FFC83D;animation:cincin 1.6s ease-out infinite}
@keyframes cincin{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.pt-bulat:active{transform:translateY(3px)}
.pt-bintang{position:absolute;top:-6px;right:-4px;font-size:1.05rem}
.anim .pt-titik.sudah .pt-bintang{animation:bintangPop .6s cubic-bezier(.3,1.8,.5,1) both .2s}
.pt-label{flex:1;min-width:0}
.pt-label b{display:block;font-family:var(--f-judul);font-size:1rem;line-height:1.2}
.pt-titik.sudah .pt-label b{text-decoration:line-through;text-decoration-thickness:1px;opacity:.7}
.pt-label small{display:inline-block;margin-top:3px;font-weight:800;font-size:.72rem;padding:2px 9px;border-radius:99px;background:var(--kuning-muda);color:#8A5A00}
.pt-titik.sudah .pt-label small{background:var(--hijau-muda);color:var(--hijau-tua)}
.pt-label .pt-kini{display:block;font-size:.72rem;font-weight:800;color:var(--jingga);letter-spacing:.04em;text-transform:uppercase;margin-bottom:1px}
@media (prefers-color-scheme:dark){.pt-label small{color:#FFD76A}.pt-titik.sudah .pt-label small{color:#7DE0B2}}
.pt-hoot{position:absolute;width:52px;height:52px;left:calc(var(--x,0px) - 26px);top:calc(var(--y,0px) - 82px);z-index:3;pointer-events:none;transition:left .7s cubic-bezier(.3,1.4,.5,1),top .7s cubic-bezier(.3,1.4,.5,1)}
.pt-hoot img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.18))}
.anim .pt-hoot img{animation:hootNapas 2.4s ease-in-out infinite}
.anim .pt-hoot.lompat img{animation:hootLompat .7s cubic-bezier(.3,1.6,.5,1) 1}
/* peti */
.pt-titik.peti .pt-bulat{border-radius:22px;width:76px;height:70px;font-size:2.4rem;background:linear-gradient(145deg,#B07A3A,#7A4A20);box-shadow:0 5px 0 #5A3414}
.pt-titik.peti.kunci .pt-bulat{filter:grayscale(.85) brightness(1.05);opacity:.75;cursor:not-allowed}
.pt-titik.peti.siap .pt-bulat{background:linear-gradient(145deg,#FFD76A,#FF9F1C);box-shadow:0 5px 0 #C77700,0 0 24px 4px rgba(255,200,61,.65)}
.anim .pt-titik.peti.siap .pt-bulat{animation:petiGoyang 1.4s ease-in-out infinite}
@keyframes petiGoyang{0%,60%,100%{transform:rotate(0)}65%{transform:rotate(-9deg) scale(1.06)}75%{transform:rotate(8deg) scale(1.06)}85%{transform:rotate(-5deg)}}
.pt-titik.peti.dibuka .pt-bulat{background:linear-gradient(145deg,#C9B8FF,#8B6CF0);box-shadow:0 5px 0 #5B3FD0}
.pt-cukup{margin-top:8px;padding:12px 14px;border-radius:16px;background:var(--kuning-muda);color:#6B4700;font-size:.92rem;position:relative;z-index:2}
.pt-cukup b{display:block;font-family:var(--f-judul)}
@media (prefers-color-scheme:dark){.pt-cukup{color:#FFD76A}}
.umur-kecil .pt-bulat{width:74px;height:74px}

/* ── terbang XP ── */
.xp-terbang{position:fixed;z-index:120;pointer-events:none;font-family:var(--f-judul);font-weight:800;font-size:1.5rem;color:#8A5A00;background:#FFD76A;padding:8px 16px;border-radius:99px;box-shadow:0 6px 18px rgba(0,0,0,.2);white-space:nowrap}
.xp-partikel{position:fixed;z-index:119;pointer-events:none;font-size:1.3rem;line-height:1}
.lv-bar i.berkilau{box-shadow:0 0 12px 2px #FFD76A}

/* ── overlay umum (naik level, peti, kartu) ── */
.seru-ov{position:fixed;inset:0;z-index:9500;display:grid;place-items:center;padding:20px;background:rgba(10,30,22,.62);backdrop-filter:blur(3px)}
.anim .seru-ov{animation:ovMasuk .25s ease-out both}
@keyframes ovMasuk{from{opacity:0}to{opacity:1}}
.seru-ov-dalam{position:relative;width:min(380px,100%);max-height:calc(100vh - 40px);overflow:auto;background:var(--kartu);border-radius:28px;padding:26px 20px 20px;text-align:center;box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.anim .seru-ov-dalam{animation:ovPop .5s cubic-bezier(.3,1.6,.5,1) both}
@keyframes ovPop{from{transform:scale(.6) translateY(30px);opacity:0}to{transform:none;opacity:1}}
.seru-ov h2{font-size:1.6rem;margin:6px 0 4px}
.seru-ov .tombol{margin-top:14px}
.seru-sinar{position:absolute;left:50%;top:70px;width:340px;height:340px;margin:-170px 0 0 -170px;border-radius:50%;pointer-events:none;
  background:repeating-conic-gradient(rgba(255,200,61,.28) 0 12deg,transparent 12deg 30deg);mask:radial-gradient(circle,#000 30%,transparent 70%);-webkit-mask:radial-gradient(circle,#000 30%,transparent 70%)}
.anim .seru-sinar{animation:putar 9s linear infinite}
@keyframes putar{to{transform:rotate(360deg)}}
.nl-hoot{position:relative;width:120px;height:120px;margin:0 auto}
.nl-hoot img{width:100%;height:100%;object-fit:contain}
.anim .nl-hoot img{animation:hootLompat .7s cubic-bezier(.3,1.6,.5,1) 3}
.nl-angka{display:inline-block;font-family:var(--f-judul);font-weight:800;font-size:3rem;line-height:1;color:var(--hijau-tua);position:relative}
@media (prefers-color-scheme:dark){.nl-angka{color:var(--hijau)}}
.anim .nl-angka{animation:angkaPop .8s cubic-bezier(.3,1.8,.5,1) both .3s}
@keyframes angkaPop{from{transform:scale(0) rotate(-20deg)}to{transform:none}}
.nl-tema{margin-top:10px;padding:10px 12px;border-radius:16px;background:var(--ungu-muda);color:#5B3FD0;font-weight:800;font-size:.9rem}
@media (prefers-color-scheme:dark){.nl-tema{color:#C2B2FF}}

/* peti dibuka */
.peti-besar{font-size:5.5rem;line-height:1;display:inline-block;position:relative;z-index:1}
.anim .peti-besar.goyang{animation:petiBesar .9s ease-in-out 2}
@keyframes petiBesar{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-12deg) scale(1.08)}40%{transform:rotate(10deg) scale(1.12)}60%{transform:rotate(-8deg) scale(1.15)}80%{transform:rotate(6deg) scale(1.2)}}
.anim .peti-besar.meledak{animation:petiMeledak .45s ease-in forwards}
@keyframes petiMeledak{to{transform:scale(1.8);opacity:0}}

/* ── KARTU ILMU ── */
.ki{--w1:#1FA06A;--w2:#157A50;position:relative;width:100%;max-width:280px;margin:6px auto 4px;aspect-ratio:5/7;perspective:1000px}
.ki-dalam{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .8s cubic-bezier(.3,1.3,.5,1)}
.ki.balik .ki-dalam{transform:rotateY(180deg)}
.ki-muka,.ki-punggung{position:absolute;inset:0;border-radius:22px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden}
.ki-punggung{background:repeating-linear-gradient(45deg,#2E1F73 0 14px,#3D2A94 14px 28px);display:grid;place-items:center;font-size:3rem;border:6px solid #FFD76A}
.ki-muka{transform:rotateY(180deg);background:linear-gradient(160deg,var(--w1),var(--w2));color:#fff;padding:16px 14px;display:flex;flex-direction:column;text-align:left;border:5px solid rgba(255,255,255,.85)}
.ki-muka .ki-kat{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.95}
.ki-muka .ki-e{font-size:3.6rem;line-height:1;margin:10px auto 8px;text-align:center;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.ki-muka h3{font-size:1.15rem;color:#fff;margin-bottom:6px;text-align:center}
.ki-muka p{font-size:.92rem;line-height:1.45;font-weight:600}
.ki-langka{position:absolute;top:10px;right:10px;font-size:.66rem;font-weight:800;padding:3px 8px;border-radius:99px;background:rgba(255,255,255,.92);color:#5B3FD0}
.ki.r2 .ki-muka{border-color:#C9D6FF}
.ki.r3 .ki-muka{border-color:#FFD76A;box-shadow:0 0 22px 3px rgba(255,215,106,.7) inset}
.ki.r2 .ki-muka::after,.ki.r3 .ki-muka::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);background-size:250% 100%;pointer-events:none}
.anim .ki.r2 .ki-muka::after,.anim .ki.r3 .ki-muka::after{animation:misiKilau 2.8s ease-in-out infinite}
.k-hewan{--w1:#2FB57A;--w2:#127A52}.k-alam{--w1:#14A3A3;--w2:#0B6E78}.k-antariksa{--w1:#7B5CF0;--w2:#3A238F}
.k-tubuh{--w1:#F06A6A;--w2:#B83A4B}.k-indonesia{--w1:#F0723C;--w2:#C0392B}.k-angka{--w1:#3D9BFF;--w2:#2459C7}
.ki-aksi{display:flex;gap:8px;margin-top:12px}
.ki-aksi .tombol{margin-top:0}
.ki-ket{font-size:.85rem;color:var(--redup);margin-top:6px}

/* album */
.album-atas{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.album-atas .pr{flex:1}
.album-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
@media (min-width:480px){.album-grid{grid-template-columns:repeat(8,1fr)}}
.album-k{aspect-ratio:4/5;min-height:44px;border-radius:10px;border:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;color:#fff;padding:4px;
  background:linear-gradient(160deg,var(--w1,#1FA06A),var(--w2,#157A50));box-shadow:0 3px 0 rgba(0,0,0,.15)}
.album-k .e{font-size:1.35rem;line-height:1}
.album-k small{font-size:.5rem;font-weight:800;line-height:1.1;text-align:center;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.album-k.r3{box-shadow:0 0 0 2px #FFD76A,0 3px 0 rgba(0,0,0,.15)}
.album-k.belum{background:var(--latar);color:var(--redup);border:2px dashed var(--garis);box-shadow:none;cursor:default;font-family:var(--f-judul);font-weight:800;font-size:1.2rem}
.album-k.baru::before{content:"BARU";position:absolute;top:3px;left:3px;font-size:.5rem;font-weight:800;background:#FF7A2F;color:#fff;padding:1px 4px;border-radius:6px}

/* ── Hoot interaktif ── */
.seru-hati{position:fixed;z-index:110;pointer-events:none;font-size:1.4rem}
.anim .hoot.dansa{animation:hootDansa 1.2s ease-in-out}
@keyframes hootDansa{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg) translateY(-6px)}40%{transform:rotate(14deg) translateY(-12px)}60%{transform:rotate(-10deg) translateY(-6px) scale(1.1)}80%{transform:rotate(360deg)}}
.gelembung.ganti{animation:gelGanti .35s cubic-bezier(.3,1.6,.5,1)}
@keyframes gelGanti{from{transform:scale(.92)}to{transform:none}}

/* ── ringkasan Belajar ── */
.br-cincin{display:flex;align-items:center;gap:16px}
.br-cincin svg{flex:none;width:84px;height:84px;transform:rotate(-90deg)}
.br-cincin circle{fill:none;stroke-width:10}
.br-cincin .alas{stroke:var(--garis)}
.br-cincin .isi{stroke:var(--hijau);stroke-linecap:round;transition:stroke-dashoffset 1.1s cubic-bezier(.3,1,.4,1)}
.br-cincin .angka{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--f-judul);font-weight:800;font-size:1.15rem}
.br-cincin .wadah{position:relative;flex:none}
.br-cincin b{display:block;font-family:var(--f-judul);font-size:1.05rem}

/* ══ MODE BACA MATERI ══ */
.mode-baca .bungkus{padding-top:46px}
.baca-bar{position:fixed;left:0;right:0;top:0;height:7px;z-index:60;background:var(--garis)}
.baca-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--hijau),#7BDCA6,#FFC83D);border-radius:0 99px 99px 0;transition:width .15s linear}
.baca-burung{position:fixed;top:4px;z-index:61;width:34px;height:34px;left:calc(var(--p,0) * (100% - 40px));transition:left .15s linear;pointer-events:none}
.baca-burung img{width:100%;height:100%;object-fit:contain}
.baca-kepala{position:relative;overflow:hidden;background:linear-gradient(135deg,#1FA06A,#12805A);color:#fff}
.baca-kepala h1{color:#fff;font-size:1.45rem;margin:4px 0 8px}
.baca-kepala .meta{font-size:.82rem;opacity:.95}
.baca-kepala .chip-baca{display:inline-flex;align-items:center;gap:4px;margin:2px 6px 0 0;padding:4px 10px;border-radius:99px;background:rgba(255,255,255,.2);font-size:.78rem;font-weight:800}
.baca-alat{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap}
.baca-alat button{flex:1;min-width:130px;min-height:44px;border:none;border-radius:14px;background:#fff;color:#12805A;font:inherit;font-family:var(--f-judul);font-weight:700;cursor:pointer}
.baca-alat button[aria-pressed=true]{background:#FFD76A;color:#6B4700}
.baca-isi{font-size:1.06rem;line-height:1.75}
.baca-p{margin-bottom:14px;padding:4px 8px;border-radius:12px;transition:background .3s}
.baca-p.dibaca{background:var(--kuning-muda)}
.anim .baca-p.tunggu{opacity:0;transform:translateY(14px)}
.anim .baca-p{transition:opacity .5s ease,transform .5s ease,background .3s}
.baca-selesai{text-align:center}
.baca-selesai .tombol{font-size:1.1rem}
.paham{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:10px}
.paham button{border:2px solid var(--garis);border-radius:16px;background:var(--kartu);padding:10px 4px;font:inherit;font-weight:800;font-size:.8rem;color:var(--teks);cursor:pointer}
.paham button span{display:block;font-size:2rem;line-height:1.1}
.paham button[aria-pressed=true]{border-color:var(--hijau);background:var(--hijau-muda)}
.anim .paham button:active{transform:scale(.94)}
.baca-teman{position:fixed;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:40;display:flex;align-items:flex-end;gap:6px;pointer-events:none;max-width:calc(100% - 24px)}
.baca-teman .gel{background:var(--kartu);border-radius:16px 16px 4px 16px;padding:8px 12px;box-shadow:var(--bayang);font-size:.82rem;font-weight:700;max-width:220px;opacity:0;transform:translateY(8px);transition:opacity .3s,transform .3s}
.baca-teman.bicara .gel{opacity:1;transform:none}
.baca-teman img{width:56px;height:56px;object-fit:contain}
.anim .baca-teman img{animation:hootNapas 2.8s ease-in-out infinite}