/* ============================================================
   ANIMASI, KARAKTER, XP — neo brutalism yang bergerak
   ============================================================ */

/* ---------- strip status: teks berjalan + XP ---------- */
.strip{
  display:flex;align-items:stretch;gap:0;border-bottom:4px solid var(--ink);
  background:var(--kuning);min-height:44px;position:relative;z-index:50;
}
.marquee{flex:1 1 auto;overflow:hidden;display:flex;align-items:center;position:relative}
.marquee-isi{
  display:inline-flex;white-space:nowrap;will-change:transform;
  font-family:var(--f-display);text-transform:uppercase;font-size:clamp(11px,.72vw,13px);
  letter-spacing:.06em;animation:jalan 34s linear infinite;
}
.marquee-isi span{padding-right:36px}
@keyframes jalan{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.xp{
  display:flex;align-items:center;gap:8px;padding:6px 14px;background:var(--ink);color:var(--putih);
  position:relative;flex:0 0 auto;border-left:4px solid var(--ink);
}
.xp-level{font-family:var(--f-display);font-size:clamp(10px,.7vw,13px);background:var(--kuning);color:var(--ink);padding:3px 7px}
.xp-bar{width:clamp(60px,6vw,110px);height:12px;border:2px solid var(--putih);background:#2a2a2a;position:relative;overflow:hidden}
.xp-bar i{display:block;height:100%;width:0;background:var(--hijau);transition:width .5s cubic-bezier(.2,.8,.3,1)}
.xp #xpAngka{font-family:var(--f-display);font-size:clamp(12px,.8vw,15px);min-width:2ch;text-align:right}
.xp-lbl{font-size:10px;letter-spacing:.14em;opacity:.6;font-weight:700}
.xp-tambah{
  position:absolute;right:10px;top:-2px;font-family:var(--f-display);font-size:14px;color:var(--hijau);
  animation:naik-xp .9s ease-out forwards;pointer-events:none;
}
@keyframes naik-xp{0%{opacity:0;transform:translateY(6px)}25%{opacity:1}100%{opacity:0;transform:translateY(-22px)}}
@media (max-width:760px){.marquee{display:none}.strip{justify-content:flex-end}.xp{width:100%;justify-content:flex-end}}

/* ---------- masuk berurutan ---------- */
.screen > *{animation:masuk .3s cubic-bezier(.2,.8,.3,1) both}
.screen > *:nth-child(1){animation-delay:.02s}
.screen > *:nth-child(2){animation-delay:.07s}
.screen > *:nth-child(3){animation-delay:.12s}
.screen > *:nth-child(4){animation-delay:.17s}
.screen > *:nth-child(5){animation-delay:.21s}
.screen > *:nth-child(6){animation-delay:.25s}
.screen > *:nth-child(n+7){animation-delay:.28s}

/* ---------- emblem malaikat ---------- */
.emblem{display:inline-block;width:34px;height:34px;flex:0 0 auto;vertical-align:-8px;margin-right:8px}
.emblem svg{width:100%;height:100%;display:block}
.emblem .em-cincin{transform-origin:50% 50%;animation:putar 14s linear infinite}
.emblem.kecil{width:24px;height:24px;margin-right:6px;vertical-align:-5px}
.emblem.besar{width:52px;height:52px;margin-right:0}
@keyframes putar{to{transform:rotate(360deg)}}
@keyframes ngambang{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- konfeti ---------- */
#konfeti{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}
#konfeti i{
  position:absolute;top:-30px;display:block;border:2px solid var(--ink);
  animation-name:jatuh;animation-timing-function:cubic-bezier(.35,.1,.6,1);animation-fill-mode:forwards;
}
@keyframes jatuh{
  0%{transform:translateY(0) rotate(0);opacity:1}
  100%{transform:translateY(105vh) rotate(var(--r,360deg));opacity:.9}
}

/* ---------- maskot NUR ---------- */
.nur{
  position:fixed;right:clamp(8px,1.4vw,26px);bottom:8px;z-index:46;
  width:clamp(86px,7.2vw,124px);pointer-events:none;
  transform:translateY(14px);opacity:0;transition:opacity .5s ease,transform .5s ease;
}
.nur:not(.nur--masuk){transform:translateY(0);opacity:1}
.nur--sembunyi{opacity:0!important;transform:translateY(30px)!important}
.nur-badan-wrap{animation:tarik-napas 3.6s ease-in-out infinite;transform-origin:50% 100%}
.nur-svg{width:100%;height:auto;display:block;overflow:visible}
@keyframes tarik-napas{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.022)}}
.nur-lengan-kiri{transform-origin:36px 86px;animation:ayun-kiri 3.6s ease-in-out infinite}
.nur-lengan-kanan{transform-origin:104px 86px;animation:ayun-kanan 3.6s ease-in-out infinite}
@keyframes ayun-kiri{0%,100%{transform:rotate(0)}50%{transform:rotate(5deg)}}
@keyframes ayun-kanan{0%,100%{transform:rotate(0)}50%{transform:rotate(-5deg)}}
.nur-mata{animation:kedip 5s infinite}
.nur-mata-tutup{opacity:0}
@keyframes kedip{0%,94%,100%{opacity:1}96%,98%{opacity:0}}
.nur-mulut--senang,.nur-mulut--sedih{display:none}
.nur--senang .nur-mulut--biasa{display:none}
.nur--senang .nur-mulut--senang{display:block}
.nur--sedih .nur-mulut--biasa{display:none}
.nur--sedih .nur-mulut--sedih{display:block}
.nur--senang .nur-badan-wrap{animation:lompat .48s cubic-bezier(.3,0,.3,1) 2}
@keyframes lompat{0%,100%{transform:translateY(0) scaleY(1)}30%{transform:translateY(-18px) scaleY(1.04)}60%{transform:translateY(0) scaleY(.96)}}
.nur--senang .nur-lengan-kiri{animation:angkat-kiri .48s ease 2}
.nur--senang .nur-lengan-kanan{animation:angkat-kanan .48s ease 2}
@keyframes angkat-kiri{0%,100%{transform:rotate(0)}50%{transform:rotate(58deg)}}
@keyframes angkat-kanan{0%,100%{transform:rotate(0)}50%{transform:rotate(-58deg)}}
.nur--sedih .nur-badan-wrap{animation:tunduk .5s ease 1}
@keyframes tunduk{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(6px) rotate(-3deg)}}
.nur--pikir .nur-badan-wrap{animation:miring 1.2s ease-in-out infinite}
@keyframes miring{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(3deg)}}

.nur-balon{
  position:absolute;right:88%;bottom:64%;min-width:150px;max-width:min(260px,52vw);
  background:var(--putih);border:4px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  padding:10px 12px;font-size:clamp(11px,.85vw,14px);font-weight:700;line-height:1.3;
  transform:scale(.7);transform-origin:100% 100%;opacity:0;transition:opacity .25s,transform .25s;
}
.nur-balon.tampil{opacity:1;transform:scale(1)}
.nur-balon::after{
  content:'';position:absolute;right:-4px;bottom:-16px;width:0;height:0;
  border-left:14px solid transparent;border-top:16px solid var(--ink);
}
@media (max-width:1200px){
  .nur{width:74px;right:8px}
  .nur-balon{max-width:min(210px,60vw);font-size:12px;padding:8px 10px}
}
@media (max-width:760px){
  .nur{width:58px;opacity:.95}
  .nur-balon{display:none}
}
@media (prefers-reduced-motion:reduce){
  .marquee-isi{animation:none;padding-left:0}
  .nur,.nur *{animation:none!important}
  .screen > *{animation:none!important}
  .emblem .em-cincin{animation:none}
  #konfeti{display:none}
}

/* ---------- sentuhan hidup pada elemen yang sering disentuh ---------- */
.peta-item,.tab,.kartu-malaikat,.kartu-tugas{transition:transform .08s linear,box-shadow .08s linear,background .15s}
.peta-item:hover,.tab:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.opsi:hover:not(.na):not(.benar):not(.salah){background:#FFF8DC}
.opsi.benar{animation:denyut-benar .4s ease}
@keyframes denyut-benar{0%{transform:scale(1)}45%{transform:scale(1.025)}100%{transform:scale(1)}}
.hasil-angka{font-variant-numeric:tabular-nums}
.stat{transition:transform .1s linear}
.stat:hover{transform:translate(-2px,-2px)}