/* ==========================================================
   PETUALANGAN LIPA' SABBE — css/style.css
   Palet diambil dari kain sutra Sengkang (foto pengguna):
   magenta, ungu, jingga, emas, hijau muda, tosca.
   Prinsip: keterbacaan tinggi + rasa permainan (gamifikasi).
   ========================================================== */

:root{
  --magenta:#D6006F;
  --magenta-tua:#8E0048;
  --ungu:#7A4FA3;
  --ungu-tua:#41246B;
  --jingga:#F58A1F;
  --emas:#DBA512;
  --emas-terang:#FFD95E;
  --hijau:#8FB832;
  --tosca:#0E7C6B;
  --gelap:#2E0F23;
  --tinta:#33122A;          /* teks utama — kontras tinggi */
  --tinta-lembut:#5C3350;
  --latar:#FFF9F1;
  --kartu:#FFFFFF;
  --font-display:"Fraunces", Georgia, serif;
  --font-body:"Plus Jakarta Sans","Segoe UI",sans-serif;
  --font-lontara:"Noto Sans Buginese",sans-serif;
  --bayang:0 10px 30px -12px rgba(65,36,107,.35);
  --radius:18px;
  --tinggi-hud:64px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--tinggi-hud) + 16px)}
body{
  font-family:var(--font-body);
  background:var(--latar);
  color:var(--tinta);
  /* Keterbacaan tinggi: huruf besar, jarak baris lega */
  font-size:clamp(1.06rem, 1rem + .35vw, 1.19rem);
  line-height:1.75;
  overflow-x:hidden;
}
::selection{background:var(--magenta);color:#fff}
img{max-width:100%;display:block}
.lontara,.lontara-kecil,.lontara-besar{font-family:var(--font-lontara)}

/* ---------- tombol ---------- */
.tombol{
  display:inline-block;padding:.85rem 1.7rem;border:none;cursor:pointer;
  border-radius:999px;font-family:var(--font-body);font-weight:700;
  font-size:1rem;text-decoration:none;text-align:center;
  transition:transform .18s ease, box-shadow .18s ease;
}
.tombol:hover{transform:translateY(-3px)}
.tombol:active{transform:translateY(0) scale(.97)}
.tombol-emas{
  background:linear-gradient(180deg,var(--emas-terang),var(--emas));
  color:#3d2c00;box-shadow:0 6px 0 #a67c00, 0 14px 26px -8px rgba(0,0,0,.35);
}
.tombol-emas:hover{box-shadow:0 8px 0 #a67c00, 0 18px 30px -8px rgba(0,0,0,.4)}
.tombol-emas:active{box-shadow:0 2px 0 #a67c00}
.tombol-magenta{
  background:linear-gradient(180deg,#FF2E93,var(--magenta));
  color:#fff;box-shadow:0 6px 0 var(--magenta-tua), 0 14px 26px -8px rgba(214,0,111,.5);
}
.tombol-magenta:active{box-shadow:0 2px 0 var(--magenta-tua)}
.tombol-garis{
  background:transparent;color:var(--ungu-tua);
  border:3px solid var(--ungu);box-shadow:none;
}
.tombol-garis:hover{background:var(--ungu);color:#fff}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:4px solid var(--jingga);outline-offset:3px;border-radius:6px;
}

/* ==========================================================
   LAYAR AWAN PEMBUKA
   ========================================================== */
#langit{
  position:fixed;inset:0;z-index:1000;
  background:linear-gradient(180deg,#41246B 0%,#7A4FA3 32%,#D6006F 70%,#F58A1F 100%);
  display:flex;align-items:center;justify-content:center;
  transition:opacity 1.2s ease, visibility 1.2s;
}
#langit.hilang{opacity:0;visibility:hidden;pointer-events:none}
.salam{position:relative;z-index:5;text-align:center;color:#FFF6EC;padding:1rem;
  animation:salamMuncul 1.4s ease both .25s}
@keyframes salamMuncul{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.salam .lontara-besar{
  font-size:clamp(3.2rem,9vw,5.6rem);color:var(--emas-terang);
  display:block;line-height:1.15;
  text-shadow:0 4px 34px rgba(232,181,32,.6);
  animation:denyut 2.6s ease-in-out infinite;
}
@keyframes denyut{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.salam h1{font-family:var(--font-display);font-weight:900;
  font-size:clamp(1.8rem,5vw,2.8rem);letter-spacing:.05em;margin-top:.3rem}
.salam-sub{margin:.5rem 0 1.8rem;font-size:1.02rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9}

/* awan = gumpalan lingkaran blur; menyibak saat .terbuka */
.awan{position:absolute;filter:blur(1px);will-change:transform;
  transition:transform 2s cubic-bezier(.7,0,.3,1), opacity 2s}
.awan i{position:absolute;border-radius:50%;
  background:radial-gradient(circle at 32% 28%, #ffffff, #f6e9f7 55%, #e2cdea 100%);
  box-shadow:0 22px 70px rgba(46,15,35,.35)}
.awan i:nth-child(1){width:360px;height:360px;left:0;top:36px}
.awan i:nth-child(2){width:280px;height:280px;left:230px;top:0}
.awan i:nth-child(3){width:320px;height:320px;left:440px;top:66px}
.awan i:nth-child(4){width:230px;height:230px;left:130px;top:160px}
.awan-1{left:-9%;top:-15%;transform:scale(1.3)}
.awan-2{right:-11%;top:-9%;transform:scale(1.15) scaleX(-1)}
.awan-3{left:-13%;bottom:-17%;transform:scale(1.4)}
.awan-4{right:-9%;bottom:-13%;transform:scale(1.25) scaleX(-1)}
.awan-5{left:26%;top:58%;transform:scale(.85)}
.awan-6{right:24%;top:6%;transform:scale(.72) scaleX(-1)}
#langit:not(.terbuka) .awan{animation:melayang 6.5s ease-in-out infinite}
#langit:not(.terbuka) .awan-2,#langit:not(.terbuka) .awan-4{animation-delay:-3.2s}
#langit:not(.terbuka) .awan-5{animation-delay:-1.4s}
@keyframes melayang{0%,100%{margin-top:0}50%{margin-top:20px}}
#langit.terbuka .awan-1{transform:scale(1.3) translate(-135%,-45%);opacity:.15}
#langit.terbuka .awan-2{transform:scale(1.15) scaleX(-1) translate(-135%,-45%);opacity:.15}
#langit.terbuka .awan-3{transform:scale(1.4) translate(-145%,45%);opacity:.15}
#langit.terbuka .awan-4{transform:scale(1.25) scaleX(-1) translate(-145%,45%);opacity:.15}
#langit.terbuka .awan-5{transform:scale(.85) translate(-280%,70%);opacity:0}
#langit.terbuka .awan-6{transform:scale(.72) scaleX(-1) translate(-280%,-70%);opacity:0}
#langit.terbuka .salam{opacity:0;transform:translateY(-34px);transition:all .8s ease}

/* ==========================================================
   HUD (papan skor tetap di atas)
   ========================================================== */
#hud{
  position:fixed;top:0;left:0;right:0;z-index:900;
  background:rgba(46,15,35,.92);backdrop-filter:blur(8px);
  color:#FFF6EC;border-bottom:3px solid var(--emas);
  transform:translateY(-110%);transition:transform .6s ease;
}
#hud.tampil{transform:none}
.hud-dalam{
  max-width:1100px;margin-inline:auto;height:var(--tinggi-hud);
  display:flex;align-items:center;gap:1rem;padding:0 1rem;
}
.hud-logo{
  font-size:1.5rem;color:var(--emas-terang);flex:none;
  width:44px;height:44px;display:grid;place-items:center;
  background:rgba(255,217,94,.12);border:2px solid var(--emas);border-radius:12px;
}
.hud-benang{
  flex:1;height:14px;border-radius:99px;overflow:hidden;
  background:repeating-linear-gradient(90deg,#4b2140 0 10px,#3a1730 10px 20px);
  border:1px solid rgba(255,217,94,.35);
}
.hud-benang-isi{
  height:100%;width:0%;
  background:repeating-linear-gradient(90deg,var(--magenta) 0 12px,var(--jingga) 12px 24px,var(--emas) 24px 30px,var(--hijau) 30px 42px,var(--tosca) 42px 54px,var(--ungu) 54px 66px);
  transition:width .5s ease;border-radius:99px;
}
.hud-xp{
  flex:none;font-weight:800;font-size:1rem;color:var(--emas-terang);
  background:rgba(255,217,94,.12);border:2px solid var(--emas);
  border-radius:99px;padding:.25rem .9rem;min-width:86px;text-align:center;
}
.hud-xp.melonjak{animation:lonjak .5s ease}
@keyframes lonjak{40%{transform:scale(1.25)}}
.hud-lencana{display:flex;gap:.4rem;flex:none}
.lencana{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-size:1.15rem;color:#7d6a77;background:#241019;border:2px dashed #5c3350;
  position:relative;transition:all .4s ease;cursor:help;
}
.lencana.terbuka{
  color:#3d2c00;border-style:solid;border-color:var(--emas-terang);
  background:radial-gradient(circle at 30% 25%,var(--emas-terang),var(--emas));
  box-shadow:0 0 16px rgba(255,217,94,.65);
  animation:lencanaBuka .7s cubic-bezier(.34,1.56,.64,1);
}
@keyframes lencanaBuka{0%{transform:scale(.2) rotate(-180deg)}100%{transform:scale(1) rotate(0)}}
.lencana::after{
  content:attr(data-tip);position:absolute;top:calc(100% + 8px);right:0;
  background:var(--gelap);color:#FFF6EC;font-size:.72rem;font-weight:600;
  padding:.3rem .6rem;border-radius:8px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .2s;border:1px solid var(--emas);
}
.lencana:hover::after,.lencana:focus-visible::after{opacity:1}

/* toast pencapaian */
#toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,140%);
  z-index:950;background:var(--gelap);color:#FFF6EC;
  border:2px solid var(--emas);border-radius:14px;
  padding:.9rem 1.4rem;font-weight:700;box-shadow:0 18px 40px rgba(0,0,0,.4);
  transition:transform .5s cubic-bezier(.34,1.4,.64,1);max-width:92vw;text-align:center;
}
#toast.tampil{transform:translate(-50%,0)}
#toast .toast-emas{color:var(--emas-terang)}

/* ==========================================================
   PAHLAWAN / HERO
   ========================================================== */
.pahlawan{
  position:relative;min-height:100svh;display:grid;
  grid-template-columns:1.05fr .95fr;align-items:center;gap:2rem;
  max-width:1160px;margin-inline:auto;padding:calc(var(--tinggi-hud) + 2rem) 1.5rem 3rem;
}
.pahlawan-kain{order:2;position:relative}
.pahlawan-kain img{
  width:min(420px,100%);margin-inline:auto;border-radius:24px;
  box-shadow:0 30px 70px -22px rgba(65,36,107,.55);
  transform:rotate(3deg);
  border:6px solid #fff;
}
.pahlawan-kain::before{ /* pita emas di belakang foto */
  content:"";position:absolute;inset:12% -6% 12% -6%;z-index:-1;border-radius:30px;
  background:repeating-linear-gradient(135deg,var(--emas-terang) 0 14px,var(--emas) 14px 22px,transparent 22px 44px);
  opacity:.5;
}
.pahlawan-isi{order:1}
.label-level{
  display:inline-block;font-weight:800;font-size:.82rem;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;
  background:linear-gradient(90deg,var(--magenta),var(--ungu));
  padding:.35rem 1rem;border-radius:99px;margin-bottom:1rem;
}
.pahlawan-lontara{display:block;font-size:clamp(1.7rem,3.5vw,2.4rem);color:var(--magenta);line-height:1.3}
.pahlawan h1{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(3rem,7.5vw,5.2rem);line-height:1.02;color:var(--ungu-tua);
}
.pahlawan h1 em{font-style:italic;color:var(--magenta)}
.pahlawan-teks{margin-top:1.1rem;max-width:56ch}
.pahlawan-aksi{margin-top:1.8rem;display:flex;gap:.9rem;flex-wrap:wrap}

/* ==========================================================
   SEKSI & TIPOGRAFI ISI
   ========================================================== */
.seksi{padding:5rem 1.5rem}
.seksi-terang{background:linear-gradient(180deg,#FFF3E4,#FFE9F3 65%,var(--latar))}
.seksi-gelap{background:var(--gelap);color:#FFF3E8}
.seksi-gelap h2{color:#FFF6EC}
.seksi-gelap .pengantar{color:#F6DCEA}
.seksi-gelap .label-level{background:linear-gradient(90deg,var(--jingga),var(--magenta))}
.wadah{max-width:1060px;margin-inline:auto}
.wadah-sempit{max-width:760px}
h2{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.9rem,4.4vw,2.8rem);line-height:1.18;color:var(--ungu-tua);
  max-width:24ch;
}
.lontara-kecil{color:var(--jingga);margin-right:.2em}
.pengantar{max-width:66ch;margin-top:1rem;color:var(--tinta-lembut);font-size:1.06em}
.pengantar strong{color:var(--magenta-tua)}
.seksi-gelap .pengantar strong{color:var(--emas-terang)}
.penghitung{
  margin-top:1.6rem;font-weight:700;font-size:1.05rem;color:var(--ungu-tua);
  background:#fff;border:2px dashed var(--ungu);display:inline-block;
  border-radius:12px;padding:.5rem 1.1rem;
}
.seksi-gelap .penghitung{background:transparent;color:var(--emas-terang);border-color:var(--emas)}
.penghitung-besar{font-size:1.25rem}
.catatan-kaki{
  margin-top:2rem;font-size:.98rem;color:var(--tinta-lembut);
  border-left:4px solid var(--emas);padding-left:1rem;max-width:70ch;
}
.benang-emas{
  height:22px;border:none;margin:0;
  background:
    repeating-linear-gradient(90deg,var(--emas) 0 12px,var(--emas-terang) 12px 16px,transparent 16px 26px)
    center/100% 6px no-repeat;
}

/* ---------- peta petualangan ---------- */
.peta-daftar{list-style:none;margin-top:2.2rem;display:grid;gap:1rem;counter-reset:peta}
.peta-daftar a{
  display:grid;grid-template-columns:64px 1fr;grid-template-rows:auto auto;
  column-gap:1.2rem;align-items:center;text-decoration:none;
  background:var(--kartu);border-radius:var(--radius);padding:1rem 1.3rem;
  box-shadow:var(--bayang);border:2px solid transparent;
  transition:transform .2s ease, border-color .2s ease;
}
.peta-daftar a:hover{transform:translateX(8px);border-color:var(--magenta)}
.peta-no{
  grid-row:1/3;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:900;font-size:1.6rem;color:#fff;
  background:conic-gradient(from 200deg,var(--magenta),var(--jingga),var(--emas),var(--hijau),var(--tosca),var(--ungu),var(--magenta));
}
.peta-nama{font-weight:800;font-size:1.15rem;color:var(--ungu-tua)}
.peta-ket{color:var(--tinta-lembut);font-size:.98rem}

/* ---------- tantangan 1: lorong waktu ---------- */
.lorong{margin-top:2.4rem;position:relative;display:grid;gap:1.1rem}
.lorong::before{ /* benang vertikal */
  content:"";position:absolute;left:26px;top:8px;bottom:8px;width:4px;
  background:repeating-linear-gradient(180deg,var(--magenta) 0 14px,var(--emas) 14px 22px,var(--tosca) 22px 36px);
  border-radius:99px;
}
.simpul-waktu{
  position:relative;margin-left:64px;background:var(--kartu);
  border-radius:var(--radius);box-shadow:var(--bayang);
  border:2px solid transparent;cursor:pointer;overflow:hidden;
  transition:border-color .25s ease;
}
.simpul-waktu::before{ /* kancing simpul */
  content:"✦";position:absolute;left:-56px;top:1.1rem;width:36px;height:36px;
  border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1rem;
  background:var(--ungu);border:3px solid #fff;box-shadow:0 0 0 3px var(--ungu);
  transition:background .3s ease, transform .3s ease;
}
.simpul-waktu:hover{border-color:var(--ungu)}
.simpul-waktu.terbuka{border-color:var(--emas)}
.simpul-waktu.terbuka::before{background:var(--emas);box-shadow:0 0 0 3px var(--emas);transform:scale(1.15);content:"★"}
.simpul-kepala{display:flex;align-items:center;gap:1rem;padding:1.1rem 1.4rem;flex-wrap:wrap}
.simpul-tahun{
  flex:none;font-weight:800;font-size:.95rem;color:#fff;
  background:var(--magenta);border-radius:99px;padding:.25rem .95rem;
}
.simpul-kepala h3{font-family:var(--font-display);font-size:1.3rem;color:var(--ungu-tua)}
.simpul-badan{
  max-height:0;overflow:hidden;transition:max-height .5s ease;
}
.simpul-waktu.terbuka .simpul-badan{max-height:400px}
.simpul-badan p{padding:0 1.4rem 1.4rem;max-width:70ch}

/* ---------- tantangan 2: kartu koleksi ---------- */
.kisi-kartu{
  margin-top:2rem;display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.kartu-balo{perspective:1200px;min-height:360px}
.kartu-balo-dalam{
  position:relative;width:100%;height:100%;min-height:360px;
  transform-style:preserve-3d;transition:transform .65s cubic-bezier(.5,0,.3,1);
}
.kartu-balo.terbalik .kartu-balo-dalam{transform:rotateY(180deg)}
.kartu-muka,.kartu-belakang{
  position:absolute;inset:0;backface-visibility:hidden;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--bayang);
  display:flex;flex-direction:column;
}
.kartu-muka{background:var(--kartu);border:3px solid var(--emas);cursor:pointer}
.kartu-muka img{width:100%;height:210px;object-fit:cover}
.kartu-muka .kartu-judul{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:1rem 1.2rem;gap:.15rem;
}
.kartu-muka h3{font-family:var(--font-display);font-size:1.3rem;color:var(--magenta-tua)}
.kartu-muka .kartu-bentuk{font-size:.86rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tosca)}
.kartu-muka .kartu-balik-hint{margin-top:auto;font-size:.8rem;color:var(--tinta-lembut)}
.kartu-belakang{
  transform:rotateY(180deg);color:#FFF6EC;padding:1.3rem;
  background:linear-gradient(160deg,var(--ungu-tua),var(--gelap));
  border:3px solid var(--ungu);cursor:pointer;
}
.kartu-belakang h3{font-family:var(--font-display);color:var(--emas-terang);font-size:1.2rem}
.kartu-belakang .makna{font-size:.95rem;line-height:1.6;margin-top:.5rem;flex:1}
.kartu-belakang .tombol-simpan{
  margin-top:.8rem;border:none;border-radius:12px;padding:.65rem;
  font-weight:800;font-size:.95rem;cursor:pointer;
  background:linear-gradient(180deg,var(--emas-terang),var(--emas));color:#3d2c00;
  box-shadow:0 4px 0 #a67c00;transition:transform .15s ease;
}
.tombol-simpan:hover{transform:translateY(-2px)}
.tombol-simpan:disabled{
  background:var(--hijau);color:#173300;box-shadow:none;cursor:default;transform:none;
}
.kartu-balo.terkoleksi .kartu-muka{border-color:var(--hijau)}
.kartu-balo.terkoleksi .kartu-muka::after{
  content:"✔ Terkoleksi";position:absolute;top:12px;right:12px;
  background:var(--hijau);color:#173300;font-weight:800;font-size:.78rem;
  padding:.25rem .7rem;border-radius:99px;box-shadow:0 4px 10px rgba(0,0,0,.25);
}

/* ---------- tantangan 3: warna ---------- */
.papan-warna{margin-top:2.2rem;display:grid;grid-template-columns:1fr 1.1fr;gap:2rem;align-items:start}
.deret-cawan{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem}
.cawan{
  border:none;cursor:pointer;border-radius:16px;padding:1.05rem .8rem;
  font-family:var(--font-body);font-weight:800;font-size:1rem;color:#fff;
  background:var(--c);box-shadow:0 6px 0 rgba(0,0,0,.3), inset 0 -8px 0 rgba(0,0,0,.14);
  transition:transform .15s ease;
}
.cawan:hover{transform:translateY(-3px)}
.cawan:active{transform:translateY(1px)}
.cawan.diramu{outline:4px solid var(--emas-terang);outline-offset:2px}
.cawan.diramu::after{content:" ✔"}
.panel-warna{
  background:#41192F;border:2px solid var(--emas);border-radius:var(--radius);
  padding:1.6rem;min-height:230px;
}
.panel-warna h3{font-family:var(--font-display);font-size:1.5rem;color:var(--emas-terang)}
.panel-warna .siapa{
  display:inline-block;margin:.6rem 0 .8rem;font-weight:800;font-size:.9rem;
  background:var(--magenta);border-radius:99px;padding:.3rem .95rem;color:#fff;
}
.panel-warna p{color:#FBE8F2}
.panel-warna-kosong{color:#CBA9BF;font-style:italic}

/* ---------- tantangan 4: dua kacamata ---------- */
.lab-tanda{margin-top:2.4rem;display:grid;grid-template-columns:.9fr 1.1fr;gap:2rem;align-items:start}
.lab-gambar img{
  width:100%;border-radius:var(--radius);border:5px solid #fff;
  box-shadow:var(--bayang);
}
.lab-gambar figcaption{margin-top:.6rem;font-size:.92rem;color:var(--tinta-lembut);text-align:center}
.lab-saklar{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.saklar{
  border:3px solid var(--ungu);background:#fff;color:var(--ungu-tua);
  border-radius:14px;padding:.8rem;cursor:pointer;font-family:var(--font-body);
  font-weight:800;font-size:1rem;display:grid;gap:.15rem;text-align:center;
  transition:all .2s ease;
}
.saklar small{font-weight:600;font-size:.78rem;color:var(--tinta-lembut)}
.saklar.aktif{
  background:linear-gradient(160deg,var(--ungu),var(--ungu-tua));color:#fff;
  transform:translateY(-3px);box-shadow:0 12px 22px -10px rgba(65,36,107,.6);
}
.saklar.aktif small{color:#E7D6F5}
.lab-isi{
  margin-top:1.2rem;background:var(--kartu);border-radius:var(--radius);
  border:2px solid var(--ungu);padding:1.6rem;box-shadow:var(--bayang);
  animation:isiGanti .45s ease;
}
@keyframes isiGanti{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.lab-isi h3{font-family:var(--font-display);color:var(--magenta-tua);font-size:1.35rem;margin-bottom:.5rem}
.lab-isi p{max-width:60ch}

/* ---------- tantangan 5: kuis ---------- */
.arena-kuis{
  margin-top:2.2rem;background:var(--kartu);border-radius:22px;
  box-shadow:var(--bayang);border:3px solid var(--emas);
  padding:2rem;min-height:340px;
}
.kuis-status{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.kuis-nomor{font-weight:800;color:var(--ungu-tua)}
.kuis-skor{font-weight:800;color:var(--magenta)}
.kuis-soal{font-family:var(--font-display);font-size:clamp(1.25rem,3vw,1.6rem);color:var(--tinta);line-height:1.4}
.kuis-pilihan{list-style:none;margin-top:1.4rem;display:grid;gap:.8rem}
.kuis-pilihan button{
  width:100%;text-align:left;padding:1rem 1.2rem;border-radius:14px;cursor:pointer;
  border:3px solid #E3D2E0;background:#FDF7FB;font-family:var(--font-body);
  font-size:1.05rem;font-weight:600;color:var(--tinta);
  transition:all .15s ease;
}
.kuis-pilihan button:hover:not(:disabled){border-color:var(--ungu);transform:translateX(6px)}
.kuis-pilihan button.benar{border-color:var(--hijau);background:#EFF8DC;color:#173300}
.kuis-pilihan button.salah{border-color:#C8102E;background:#FCE9EC;color:#6d0a1a}
.kuis-umpan{margin-top:1.1rem;font-weight:700;min-height:1.6em}
.kuis-umpan.benar{color:#3e7300}
.kuis-umpan.salah{color:#C8102E}
.kuis-lanjut{margin-top:1rem}
.kuis-hasil{text-align:center;padding:1rem 0}
.kuis-hasil .lontara{font-size:3rem;color:var(--emas);display:block}
.kuis-hasil h3{font-family:var(--font-display);font-size:2rem;color:var(--ungu-tua);margin:.4rem 0}
.kuis-hasil .gelar{
  display:inline-block;margin:.6rem 0 1rem;font-weight:900;font-size:1.25rem;color:#3d2c00;
  background:linear-gradient(180deg,var(--emas-terang),var(--emas));
  padding:.55rem 1.6rem;border-radius:99px;box-shadow:0 5px 0 #a67c00;
}
.kuis-hasil p{max-width:52ch;margin-inline:auto}

/* konfeti benang */
.serat{
  position:fixed;top:-30px;width:8px;height:22px;border-radius:3px;z-index:960;
  animation:jatuh linear forwards;pointer-events:none;
}
@keyframes jatuh{
  to{transform:translateY(110vh) rotate(720deg);opacity:.2}
}

/* ---------- sumber & footer ---------- */
.seksi-sumber{background:linear-gradient(180deg,var(--latar),#F3E7FA)}
.dua-kolom{display:grid;grid-template-columns:.65fr 1.35fr;gap:2.6rem;align-items:center}
.bingkai-buku img{
  width:min(300px,100%);border-radius:12px;box-shadow:0 26px 60px -18px rgba(65,36,107,.5);
  transform:rotate(-2.5deg);border:5px solid #fff;
}
.sitasi{
  margin:1.2rem 0;padding:1.2rem 1.5rem;border-left:5px solid var(--magenta);
  background:#fff;border-radius:0 14px 14px 0;font-size:1.02rem;
  box-shadow:var(--bayang);
}
.kaki{
  background:var(--gelap);color:#FFF3E8;text-align:center;
  padding:4rem 1.5rem 2.5rem;
  border-top:8px solid;
  border-image:repeating-linear-gradient(90deg,var(--magenta) 0 40px,var(--jingga) 40px 80px,var(--emas) 80px 110px,var(--hijau) 110px 150px,var(--tosca) 150px 190px,var(--ungu) 190px 230px) 8;
}
.kaki .lontara{font-size:2.4rem;color:var(--emas-terang);display:block}
.kaki-besar{font-family:var(--font-display);font-weight:700;font-size:1.8rem;margin:.4rem 0 .8rem}
.kaki-kecil{margin-top:1.6rem;font-size:.88rem;letter-spacing:.1em;opacity:.75}

/* animasi muncul saat digulir */
.muncul{opacity:0;transform:translateY(34px);transition:opacity .8s ease,transform .8s ease}
.muncul.tampak{opacity:1;transform:none}

/* ---------- responsif ---------- */
@media (max-width:900px){
  .pahlawan{grid-template-columns:1fr;text-align:center;padding-top:calc(var(--tinggi-hud) + 3rem)}
  .pahlawan-kain{order:1;margin-bottom:1.5rem}
  .pahlawan-isi{order:2}
  .pahlawan-teks{margin-inline:auto}
  .pahlawan-aksi{justify-content:center}
  .papan-warna,.lab-tanda,.dua-kolom{grid-template-columns:1fr}
  .hud-lencana .lencana{width:32px;height:32px;font-size:.95rem}
  .hud-xp{min-width:70px;font-size:.88rem}
}
@media (max-width:520px){
  .seksi{padding:3.6rem 1.1rem}
  .deret-cawan{grid-template-columns:repeat(2,1fr)}
  .hud-dalam{gap:.6rem}
  .hud-logo{display:none}
}

/* ---------- hormati preferensi gerak minim ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .muncul{opacity:1;transform:none}
  #langit{display:none}
  #hud{transform:none}
}