/* "Hutan Utan" palette: forest green, mango orange, wood, pale leaf */
:root{--c:#2F6B3A;--c-gelap:#1F4A27;--c2:#F28C28;--c2-gelap:#C96A12;--kayu:#8A5A35;--ok:#3E9B4F;--no:#D9534F;--bg:#F1F7EA;--kartu:#FFFFFF;--ink:#24301F;--muted:#5E6B57;--seg:#DCEFD2;--seg-ulang:#E8F4E0;--beda:#FFE7CC;--garis:#D7E3CC;--kalimat:#F3F8EE;--r:18px;--bayang:0 4px 14px rgba(36,48,31,.13);--judul:'Baloo 2','Nunito',system-ui,sans-serif;--isi:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.45 var(--isi);overflow-x:hidden}
body[data-layar=peta]{background:
  radial-gradient(circle at 6% 14%,#3f8a4a 0 34px,transparent 35px),
  radial-gradient(circle at 12% 19%,#2f6b3a 0 26px,transparent 27px),
  radial-gradient(circle at 94% 30%,#3f8a4a 0 40px,transparent 41px),
  radial-gradient(circle at 88% 35%,#4f9a55 0 24px,transparent 25px),
  radial-gradient(circle at 4% 58%,#4f9a55 0 30px,transparent 31px),
  radial-gradient(circle at 97% 66%,#2f6b3a 0 36px,transparent 37px),
  radial-gradient(circle at 8% 88%,#3f8a4a 0 38px,transparent 39px),
  radial-gradient(circle at 92% 92%,#4f9a55 0 28px,transparent 29px),
  radial-gradient(ellipse 70% 45% at 50% 40%,rgba(160,205,120,.55),transparent 70%),
  linear-gradient(180deg,#9fcf82 0%,#6fae5f 45%,#4f8f4a 100%) fixed;background-attachment:fixed}
body[data-layar=profil],body[data-layar=tes],body[data-layar=ortu],body[data-layar=tutorial],body[data-layar=intro]{background:linear-gradient(180deg,#F1F7EA 0%,#DDEDCF 100%) fixed}
body[data-layar=istirahat]{background:linear-gradient(180deg,#2b3a67 0%,#4a4e8f 100%) fixed;color:#fff}
#app{max-width:520px;margin:0 auto;padding:14px 16px 40px;min-height:100vh;position:relative}
img{max-width:100%}
h1,h2,h3,.tombol,.kartu b,.slot,.bintang,.op,.pilihan-btn,.soal-hitung{font-family:var(--judul)}
h1,h2{margin:.2em 0;line-height:1.15}
h1{font-size:34px;color:var(--c-gelap)}
button{font:inherit;cursor:pointer;border:0;border-radius:var(--r);-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:active:not(:disabled){transform:translateY(3px)}

/* ---- chunky 3D buttons ---- */
.tombol{padding:12px 20px;font-weight:800;font-size:20px;min-height:54px;border-bottom:5px solid rgba(0,0,0,.22);transition:transform .08s,border-bottom-width .08s}
.tombol:active:not(:disabled){border-bottom-width:2px}
.utama{background:var(--c);color:#fff;border-bottom-color:var(--c-gelap)}
.utama:disabled{opacity:.4}
.putih{background:#fff;color:var(--c);border:2px solid var(--c);border-bottom:5px solid var(--c)}
.aksi{display:flex;gap:10px;justify-content:space-between;margin:14px 0}.aksi .tombol{flex:1}
.kecil{font-size:13px;color:var(--muted);letter-spacing:1px}

/* ---- play header: mascot + steps ---- */
.kepala{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.utan{display:flex;align-items:center;gap:10px}
.ulang-suara{flex:none;width:44px;height:44px;border-radius:50%;background:#fff;border:2px solid var(--c);font-size:20px;line-height:1;box-shadow:var(--bayang)}
.garis-petunjuk{margin:4px 2px 8px;font-size:15px;color:var(--muted);font-weight:600}
.garis-petunjuk:not(.ada){display:none}
.garis-petunjuk.ada{color:var(--ink);background:var(--beda);border-left:5px solid var(--c2);padding:8px 12px;border-radius:10px;font-weight:700}
.garis-petunjuk.baru{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
.bar-petunjuk{display:flex;gap:8px;align-items:center;margin-bottom:10px}
.bar-petunjuk:empty{display:none}
.bar-petunjuk .petunjuk{margin:0}
.petunjuk:disabled{opacity:.45}
.lewati-soal{font-size:14px;padding:6px 12px;color:var(--muted)}
.papan-main{background:#fff;border-radius:var(--r);padding:10px;box-shadow:var(--bayang)}
.papan-main .cerita{box-shadow:none;padding:2px}
.papan-main .batang{box-shadow:none;border:2px solid var(--garis);margin:10px 0}
.gelembung{position:relative;flex:1;min-width:0;min-height:46px;background:#fff;border:2px solid var(--c);border-radius:16px;padding:8px 12px;font:700 16px/1.3 var(--isi);color:var(--ink);box-shadow:var(--bayang)}
.gelembung:empty{visibility:hidden}
.gelembung::before{content:'';position:absolute;left:-11px;top:50%;margin-top:-9px;border-style:solid;border-width:9px 11px 9px 0;border-color:transparent var(--c) transparent transparent}
.gelembung::after{content:'';position:absolute;left:-7px;top:50%;margin-top:-7px;border-style:solid;border-width:7px 8px 7px 0;border-color:transparent #fff transparent transparent}
.gelembung.baru{animation:pop .35s cubic-bezier(.3,1.6,.5,1)}
.maskot{width:72px;height:72px;object-fit:contain;flex:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.18));user-select:none;-webkit-user-drag:none}
.maskot.besar{width:170px;height:170px}
.lompat{animation:lompat .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes lompat{0%{transform:translateY(0) scale(.85)}40%{transform:translateY(-14px) scale(1.08)}100%{transform:translateY(0) scale(1)}}
.langkah{display:flex;gap:4px;flex:1;min-width:0}
.langkah span{flex:1;min-width:0;text-align:center;padding:5px 1px;border-radius:12px;background:#fff;color:var(--muted);box-shadow:var(--bayang)}
.langkah span b{display:block;font-size:20px;font-family:var(--judul);line-height:1.1}
.langkah span small{display:block;font-size:9.5px;line-height:1.05;overflow-wrap:anywhere}
.langkah span.aktif{background:var(--c);color:#fff}
.arahan{font-weight:700;margin:10px 0}

/* ---- story card ---- */
.cerita{background:#fff;border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:8px;position:relative;box-shadow:var(--bayang)}
.gambar-soal{display:flex;justify-content:center;animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
.gambar-soal img{width:110px;height:110px;object-fit:contain;filter:drop-shadow(0 4px 4px rgba(0,0,0,.15))}
.gambar-soal.kecil img{width:72px;height:72px}
@keyframes pop{0%{transform:scale(.3);opacity:0}100%{transform:scale(1);opacity:1}}
.kalimat{background:var(--kalimat);text-align:left;padding:12px 14px;font-size:18px;font-family:var(--isi);font-weight:600;border-radius:var(--r)}
div.kalimat{line-height:1.75}
.angka-cerita{display:inline-block;vertical-align:middle;background:var(--c2);color:#fff;font:800 22px/1 var(--judul);padding:7px 12px 6px;margin:1px 3px;min-height:40px;min-width:44px;border-radius:14px;border-bottom:4px solid var(--c2-gelap);text-decoration:underline dotted rgba(255,255,255,.9);text-underline-offset:5px}
.angka-cerita.sinar{text-decoration:none;animation:sinar 1s ease-in-out infinite}
@keyframes sinar{50%{transform:scale(1.1);box-shadow:0 0 0 6px rgba(242,140,40,.4),0 0 18px 8px rgba(242,140,40,.55)}}
.angka-cerita.selesai{text-decoration:none}
.angka-terbang{position:fixed;z-index:30;display:flex;align-items:center;justify-content:center;background:var(--c2);color:#fff;font:800 22px/1 var(--judul);border-radius:14px;pointer-events:none;transition:transform .4s cubic-bezier(.4,.1,.3,1);box-shadow:0 6px 14px rgba(0,0,0,.25)}
.kalimat:disabled{color:var(--ink);opacity:1}
.kalimat:disabled{padding:8px 12px;font-size:16px}
.kalimat.ditanya{background:#fff1e0;outline:2px solid var(--c2)}
.kalimat.sorot{animation:kedip 1s infinite}
.ikon-btn{background:#fff;border:2px solid var(--garis);padding:8px 12px;align-self:flex-end;font-weight:700}
.petunjuk{margin-top:10px;background:#FFF1DF;border-color:#F5B56F}

/* ---- bar model ---- */
.batang{background:#fff;border-radius:var(--r);padding:14px 10px;margin:12px 0;box-shadow:var(--bayang)}
.baris{display:flex;gap:3px;align-items:stretch;margin:6px 0}
.seg{background:var(--seg);border:2px solid var(--c);border-radius:10px;min-height:54px;min-width:30px;display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:center;padding:4px;position:relative}
.seg.ulang{background:var(--seg-ulang);min-width:18px}
.seg.lewat{align-items:center;font-weight:700;color:var(--c);background:transparent;border-style:dotted}
.seg.selisih{background:var(--beda);border-style:dashed;border-color:var(--c2)}
.spasi{min-width:0}
.unit{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c);margin:1px;opacity:.5}
.gbr{width:18px;height:18px;object-fit:contain;margin:1px;animation:pop .35s ease-out;-webkit-user-drag:none}
.ulangan{display:flex;align-items:center}
.kurung{border-top:3px solid var(--kayu);margin-top:6px;padding-top:6px;text-align:center}
.slot{background:#fff;border:2px solid var(--kayu);padding:4px 10px;font-weight:800;min-width:44px;min-height:36px;margin-top:4px;border-radius:12px}
.slot.kosong{border-style:dashed;color:var(--muted)}
.slot.nyala{border:3px solid var(--c2);background:#fff1df;color:var(--c2-gelap);animation:denyut 1s ease-in-out infinite}
@keyframes denyut{50%{transform:scale(1.12);box-shadow:0 0 0 5px rgba(242,140,40,.35)}}
.slot.jatuh{animation:jatuh-tanya .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes jatuh-tanya{0%{transform:translateY(-70px);opacity:0}60%{transform:translateY(5px);opacity:1}100%{transform:translateY(0)}}
.lanjut-hitung{display:block;width:100%;font-size:22px;margin-top:4px;animation:pop .45s .7s cubic-bezier(.3,1.6,.5,1) backwards}
.slot:disabled{color:var(--ink);opacity:1}
.pilih-jenis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.jenis{background:#fff;border:2px solid var(--garis);border-bottom-width:5px;padding:14px 8px;font-weight:800;font-family:var(--judul)}
.jenis .ikon{display:flex;flex-direction:column;gap:4px;margin-bottom:8px}
.jenis small{display:block;margin-top:6px;font:600 13px/1.25 var(--isi);color:var(--muted)}
.jenis .ikon i{display:block;height:14px;background:var(--seg);border:2px solid var(--c);border-radius:4px}
.jenis.gabung .ikon{flex-direction:row}.jenis.gabung .ikon i{flex:1}
.jenis.banding .ikon i.pendek{width:60%}
.ops{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.op{background:#fff;border:2px solid var(--c);border-bottom-width:5px;color:var(--c);font-size:34px;font-weight:800;min-height:68px}
.op.sorot{background:var(--c2);color:#fff;border-color:var(--c2-gelap)}
.op.coret,.pilihan-btn.coret{opacity:.35;text-decoration:line-through;border-color:var(--garis);color:var(--muted)}
.soal-hitung{text-align:center;font-size:30px;font-weight:800;margin:8px 0 10px;color:var(--c-gelap)}
.pilihan{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pilihan-btn{background:var(--c2);color:#fff;font-size:30px;font-weight:800;min-height:72px;border-bottom:5px solid var(--c2-gelap)}
.pilihan-btn.coret{background:#fff;border:2px dashed var(--garis)}
/* ---- stage intro card ---- */
.intro-pulau{text-align:center;background:#fff;border-radius:var(--r);padding:18px 16px 20px;margin-top:20px;box-shadow:var(--bayang);border-bottom:5px solid var(--kayu)}
.intro-pulau img.peta-pulau{width:130px;height:130px;animation:none}
.intro-pulau h2{color:var(--c-gelap);font-size:28px}
.intro-pulau p{margin:6px 0 16px;font-weight:600}
.intro-pulau .tombol{width:100%;font-size:24px}
.jawaban{font-size:20px;text-align:center}
.pesan{white-space:pre-line;background:var(--beda);border-left:5px solid var(--c2);padding:10px 12px;border-radius:10px;margin-top:10px}

/* ---- Mantap ---- */
.mantap{text-align:center;padding:10px 0 20px;position:relative;overflow:hidden}
.mantap h2{font-size:40px;color:var(--c-gelap);margin:0}
.bintang{display:flex;justify-content:center;gap:6px;font-size:58px;line-height:1}
.bintang .bt{color:#d7dde1;display:inline-block;transform:scale(.6);opacity:.5}
.bintang .bt.nyala.muncul{color:#f4b400;opacity:1;animation:bintang .6s cubic-bezier(.3,1.7,.5,1) forwards;text-shadow:0 3px 0 #c98a00}
@keyframes bintang{0%{transform:scale(0) rotate(-120deg)}100%{transform:scale(1) rotate(0)}}
.konfeti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.konfeti i{position:absolute;top:-14px;width:9px;height:14px;border-radius:2px;animation:jatuh 2.4s linear infinite}
@keyframes jatuh{0%{transform:translate(0,-10px) rotate(0)}100%{transform:translate(var(--geser,0),420px) rotate(720deg)}}

.goyang{animation:goyang .4s}
@keyframes goyang{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes kedip{50%{background:#ffe0b3}}

/* ---- parent gate ---- */
.tirai{position:fixed;inset:0;background:rgba(241,247,234,.98);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:20px;z-index:10;text-align:center}
.tahan{width:140px;height:140px;border-radius:50%;background:#fff;position:relative;font-weight:800;color:var(--c);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;box-shadow:var(--bayang)}
.tahan svg{position:absolute;inset:0;transform:rotate(-90deg)}
.tahan circle{fill:none;stroke:var(--c);stroke-width:8;stroke-dasharray:402;stroke-dashoffset:402}

/* ---- cards, profil ---- */
.kartu{background:#fff;color:var(--ink);border-radius:var(--r);padding:14px;margin:10px 0;display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left;box-shadow:var(--bayang);border-bottom:4px solid #D3C2AE}
.kartu b{font-size:20px}
.titik{letter-spacing:2px;color:var(--c2)}
.atas{display:flex;justify-content:space-between;align-items:center}
.sambutan{text-align:center;padding-top:6px}
.sambutan .maskot{width:150px;height:150px}
.sambutan .maskot.salam{animation:lambai 1.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes lambai{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(5deg)}}
.anak-kartu{padding:10px 14px}
.avatar{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font:800 24px var(--judul);flex:none;border-bottom:3px solid rgba(0,0,0,.2)}
.anak-info{flex:1;min-width:0}
.anak-info small{color:var(--muted)}
.main-tanda{color:var(--c);font-size:22px}
input,select{font:inherit;padding:12px;border-radius:12px;border:2px solid var(--garis);width:100%}
.kelas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}
.kelas button{background:#fff;border:2px solid var(--garis);border-bottom-width:4px;padding:12px;font-weight:800;font-family:var(--judul)}
.kelas button.pilih{border-color:var(--c);background:var(--seg)}
.atur-baris{display:grid;grid-template-columns:1fr;gap:8px;margin:8px 0}
.atur-baris button{background:#fff;border:2px solid var(--garis);border-bottom-width:4px;padding:12px;font-weight:800;font-family:var(--judul);text-align:left}
.atur-baris button.pilih{border-color:var(--c);background:var(--seg)}
pre{white-space:pre-wrap;background:#fff;padding:12px;border-radius:var(--r);font:14px/1.4 ui-monospace,monospace;overflow-wrap:anywhere}
.peringatan{background:#fde2dc;color:var(--ink);padding:10px;border-radius:10px}
.tengah{text-align:center}

/* ---- intro / tes / istirahat ---- */
.layar-tengah{text-align:center;padding-top:6px}
.layar-tengah .maskot{width:170px;height:170px}
.layar-tengah .tombol{width:100%;margin:6px 0}
.istirahat .maskot{width:210px;height:210px}
.istirahat h2{color:#fff;font-size:28px}
.istirahat .putih{width:100%;margin:6px 0}

/* ---- island map ---- */
.peta-atas{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.92);border-radius:var(--r);padding:8px 10px;box-shadow:var(--bayang)}
.peta-atas .maskot{width:56px;height:56px}
.peta-sapa{flex:1;min-width:0}
.peta-sapa b{font:800 19px var(--judul);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip-info{display:inline-block;font-size:12.5px;font-weight:800;background:#FFF1DF;color:var(--c2-gelap);border-radius:20px;padding:1px 8px;margin:2px 3px 0 0;white-space:nowrap}
.peta-atas .ikon-btn{align-self:center}
.peta-jalur{position:relative;margin:10px 0 0}
.peta-garis{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
.peta-garis path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.peta-garis .sungai-tepi{stroke:#CFE9C0;stroke-width:66}
.peta-garis .sungai{stroke:#9FD6EE;stroke-width:52}
.peta-garis .sungai-kilau{stroke:#D4F0FB;stroke-width:6;stroke-dasharray:18 26;stroke-opacity:.9}
.peta-garis .jejak{stroke:#F3E3BC;stroke-width:7;stroke-dasharray:1 16}
.pulau-item{position:relative;width:52%;height:196px;display:flex;flex-direction:column;align-items:center;background:none;padding:0;color:#fff;text-shadow:0 2px 3px rgba(20,40,15,.7)}
.pulau-item.kiri{margin-left:4%}
.pulau-item.kanan{margin-left:44%}
.peta-pulau{width:150px;height:150px;object-fit:contain;filter:drop-shadow(0 8px 6px rgba(20,50,20,.35));animation:apung 4s ease-in-out infinite}
.pulau-item.kanan .peta-pulau{animation-delay:-2s}
@keyframes apung{50%{transform:translateY(-6px)}}
.pulau-nama{font:800 16px/1.1 var(--judul);margin-top:-2px}
.pulau-tingkat{font-size:16px;letter-spacing:2px;color:#FFC46B}
.pulau-tingkat .kosong{color:rgba(255,255,255,.6)}
.peta-bawah{position:sticky;bottom:0;padding:12px 0 10px;margin-top:6px;background:linear-gradient(180deg,rgba(47,107,58,0),rgba(47,107,58,.95) 40%)}
.peta-bawah .tombol{width:100%;font-size:24px}
.peta-bantu{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.peta-bawah .ganti{display:block;margin:8px 0 0;background:rgba(255,255,255,.85);color:var(--c-gelap);font-weight:800;padding:6px 16px;border-radius:20px}

/* ---- toast ---- */
.toast{position:fixed;left:50%;top:14px;transform:translateX(-50%);max-width:calc(100vw - 24px);background:#fff;color:var(--ink);padding:10px 16px;border-radius:30px;box-shadow:0 6px 20px rgba(0,0,0,.25);font:800 18px var(--judul);z-index:20;display:flex;align-items:center;gap:8px;animation:turun .45s cubic-bezier(.3,1.5,.5,1);border-bottom:4px solid var(--c2)}
.toast img{width:36px;height:36px;object-fit:contain}
.toast.keluar{opacity:0;transform:translate(-50%,-30px);transition:all .4s}
@keyframes turun{0%{transform:translate(-50%,-70px)}100%{transform:translate(-50%,0)}}

@media (max-width:400px){
  #app{padding:12px 12px 40px}
  .maskot{width:62px;height:62px}
  h1{font-size:30px}
}
/* ---- pointing hand (idle hint + tutorial) ---- */
.tangan{position:absolute;z-index:40;font-size:42px;line-height:1;pointer-events:none;opacity:0;transition:opacity .25s;filter:drop-shadow(0 3px 3px rgba(0,0,0,.35))}
.tangan.tampil{opacity:1;animation:tunjuk .9s ease-in-out infinite}
@keyframes tunjuk{50%{transform:translateY(12px)}}
.tangan.pandu{transition:opacity .25s,left .7s ease-in-out,top .7s ease-in-out}
.tangan.pandu.tampil{animation:none}
.tangan.pandu.tekan{animation:tekan .35s ease-out}
@keyframes tekan{50%{transform:translateY(-8px) scale(.85)}}

/* ---- tutorial ---- */
.tutorial-atas{position:relative;z-index:6;margin-bottom:6px}
.tutorial-atas .lewati{min-height:44px;font-size:17px;padding:6px 16px}
.tutorial-tirai{position:fixed;inset:0;z-index:5}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;animation-iteration-count:1!important}.angka-terbang{transition:none}}
.mantap ~ .tombol{display:block;width:100%}
.hint-ios{font-size:13px;opacity:.75;margin-top:8px;text-align:center}

/* ======== plan 1d: app shell ======== */
body[data-layar=beranda],body[data-layar=pulau],body[data-layar=arena],body[data-layar=utan],body[data-layar=hadiah],body[data-layar=game],body[data-layar=game-menang]{background:linear-gradient(180deg,#EAF4E0 0%,#D6EAC6 100%) fixed}
body[data-layar=beranda] #app,body[data-layar=pulau] #app,body[data-layar=arena] #app,body[data-layar=utan] #app,body[data-layar=hadiah] #app{padding-bottom:96px}
.bar-anak{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.94);border-radius:var(--r);padding:6px 8px;box-shadow:var(--bayang);position:sticky;top:6px;z-index:8}
.avatar.kecil{width:40px;height:40px;font-size:20px;padding:0;border-radius:50%;border:0;border-bottom:3px solid rgba(0,0,0,.2);color:#fff}
.chip-bar{display:inline-flex;align-items:center;gap:3px;font:800 15px var(--judul);background:#FFF1DF;color:var(--c2-gelap);border-radius:20px;padding:3px 10px;white-space:nowrap}
.chip-bar.mangga{background:#FFE9C7}
.isi-kosong{flex:1}
.gear{padding:6px 10px;align-self:center;font-size:18px}
.cincin{position:relative;display:inline-flex;width:44px;height:44px;flex:none;align-items:center;justify-content:center}
.cincin svg{position:absolute;inset:0;transform:rotate(-90deg)}
.cincin circle{fill:none;stroke-width:5}
.cincin .cincin-latar{stroke:#E3EEDA}
.cincin .cincin-isi{stroke:var(--ok);stroke-linecap:round;transition:stroke-dashoffset .9s linear,stroke .3s}
.cincin b{position:relative;font:800 13px var(--judul);color:var(--c-gelap)}
.cincin.hampir .cincin-isi{stroke:var(--c2)}
.cincin.hampir b{color:var(--c2-gelap)}
.cincin-kecil{margin-left:auto;margin-right:6px;display:inline-flex}
.cincin-kecil .cincin{width:38px;height:38px}
.atas small{flex:1;min-width:0}
.nav-bawah{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:520px;display:grid;grid-template-columns:repeat(5,1fr);gap:2px;background:#fff;padding:6px 6px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -4px 16px rgba(36,48,31,.14);border-radius:18px 18px 0 0;z-index:9}
.nav-bawah button{position:relative;background:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 0 4px;min-height:56px;font:800 12px var(--judul);color:var(--muted);border-radius:16px}
.nav-ikon{font-size:23px;line-height:1.1}
.nav-bawah button.aktif{background:var(--c2);color:#fff;box-shadow:0 3px 0 var(--c2-gelap)}
.titik-merah{position:absolute;top:4px;right:calc(50% - 20px);width:11px;height:11px;border-radius:50%;background:var(--no);border:2px solid #fff}
.isi-tab{padding-top:8px}
.judul-tab{color:var(--c-gelap);font-size:28px;margin:6px 0 0}
.judul-baris{margin:16px 2px 6px;color:var(--c-gelap);font-size:19px}
.catatan-kecil{font-size:13.5px;color:var(--muted);margin:4px 2px 8px}
.catatan-tengah{text-align:center;font-weight:700;color:var(--muted)}
.lebar{display:block;width:100%;margin-top:10px;text-align:center;text-decoration:none}
.tautan{display:block;margin:16px auto 0;background:none;color:var(--c-gelap);font-weight:800;text-decoration:underline;padding:8px}
.saklar{display:flex;background:#fff;border-radius:30px;padding:4px;box-shadow:var(--bayang);margin:4px 0 10px}
.saklar button{flex:1;background:none;font:800 15px var(--judul);padding:8px 4px;border-radius:24px;color:var(--muted)}
.saklar button.pilih{background:var(--c);color:#fff}
.saklar small{align-self:center;padding:0 8px;font-weight:700;color:var(--muted)}
.toast-wadah{position:fixed;left:50%;top:12px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;z-index:20;pointer-events:none;width:max-content;max-width:calc(100vw - 24px)}
.toast-wadah .toast{position:static;transform:none;max-width:100%;animation:turun2 .45s cubic-bezier(.3,1.5,.5,1)}
.toast-wadah .toast.keluar{opacity:0;transform:translateY(-20px)}
@keyframes turun2{0%{transform:translateY(-50px);opacity:0}100%{transform:none;opacity:1}}

/* ======== home ======== */
.sapa-utan{display:flex;align-items:center;gap:12px;margin:6px 0 10px}
.sapa-utan .maskot{width:84px;height:84px}
.sapa-utan .gelembung{font-size:16.5px}
.hero-kartu{background:#fff;border-radius:22px;overflow:hidden;box-shadow:var(--bayang);border-bottom:5px solid var(--kayu)}
.hero-gambar{position:relative;aspect-ratio:16/9;background:#CFE6BE;cursor:pointer}
.scene{display:block;width:100%;height:100%;object-fit:cover}
.label-kecil{position:absolute;left:10px;top:10px;background:rgba(31,74,39,.85);color:#fff;font:800 13px var(--judul);padding:3px 10px;border-radius:20px}
.hero-isi{position:relative;padding:12px 90px 14px 14px}
.hero-isi b{font:800 21px var(--judul);display:block;color:var(--c-gelap)}
.hero-isi small{color:var(--muted);font-weight:700}
.bar-misi{height:12px;border-radius:8px;background:#E6EFDD;overflow:hidden;margin:6px 0 3px}
.bar-misi i{display:block;height:100%;background:linear-gradient(90deg,var(--c2),#FFC46B);border-radius:8px;transition:width .4s}
.tombol-main{position:absolute;right:14px;top:-34px;width:68px;height:68px;border-radius:50%;background:var(--c2);color:#fff;font-size:30px;border:4px solid #fff;border-bottom:7px solid var(--c2-gelap);box-shadow:var(--bayang);padding-left:6px;animation:denyut 1.6s ease-in-out infinite}
.kartu-hadiah{position:relative;display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;background:linear-gradient(135deg,#FFF6E6,#FFE4BD);padding:10px 14px;border-radius:var(--r);text-align:left;box-shadow:var(--bayang);border-bottom:4px solid #E9B774}
.kartu-hadiah b{display:block;font:800 17px var(--judul);color:var(--c2-gelap)}
.kartu-hadiah small{color:var(--muted);font-weight:700}
.kartu-hadiah .titik-merah{top:10px;right:12px;width:14px;height:14px}
.peti-kecil{width:64px;height:64px;object-fit:contain;flex:none}
.goyang-pelan{animation:goyang-pelan 2.2s ease-in-out infinite}
@keyframes goyang-pelan{0%,70%,100%{transform:rotate(0)}75%{transform:rotate(-8deg)}85%{transform:rotate(8deg)}92%{transform:rotate(-4deg)}}
.gulir-baris{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;margin:0 -2px;-webkit-overflow-scrolling:touch}
.gulir-baris .kartu-scene{flex:0 0 150px;scroll-snap-align:start}
.kartu-scene{position:relative;background:#fff;border-radius:16px;overflow:hidden;padding:0 0 8px;text-align:center;box-shadow:var(--bayang);border-bottom:4px solid #D3C2AE;display:flex;flex-direction:column;align-items:center}
.kartu-scene .scene{aspect-ratio:16/10;height:auto;background:#CFE6BE}
.kartu-scene b{font:800 14.5px/1.15 var(--judul);color:var(--c-gelap);padding:6px 6px 0}
.kartu-scene small{color:var(--muted);font-weight:700}
.kartu-scene .pulau-tingkat{font-size:14px;letter-spacing:1px;color:#F4B400}
.kartu-scene .pulau-tingkat .kosong{color:#D7DDE1}
.tag-baru{position:absolute;top:6px;right:6px;background:var(--no);color:#fff;font:800 12px var(--judul);padding:2px 8px;border-radius:12px}
.grid-pulau{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.titik-level{display:inline-flex;gap:4px;margin-top:4px}
.titik-level i{width:10px;height:10px;border-radius:50%;background:#DDE5D6}
.titik-level i.nyala{background:var(--c2)}
.peta-hutan{margin-top:6px;border-radius:var(--r);padding:6px 0 12px;background:radial-gradient(ellipse 70% 45% at 50% 40%,rgba(160,205,120,.55),transparent 70%),linear-gradient(180deg,#9fcf82 0%,#6fae5f 45%,#4f8f4a 100%)}
.intro-scene{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:14px;margin-bottom:6px}

/* ======== hadiah ======== */
.kalender{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:8px 0}
.hari{position:relative;background:#fff;border-radius:14px;padding:6px 2px 7px;text-align:center;box-shadow:var(--bayang);display:flex;flex-direction:column;align-items:center;gap:2px;border-bottom:3px solid #D3C2AE;min-height:96px}
.hari small{font-size:11.5px;font-weight:800;color:var(--muted)}
.hari span{font:800 12px/1.1 var(--judul);color:var(--ink)}
.ikon-hari{width:40px;height:40px;object-fit:contain}
.ikon-hari.teks{font-size:28px;line-height:40px;display:flex;align-items:center;justify-content:center;position:relative}
.ikon-hari.teks small{position:absolute;right:-8px;bottom:0;background:var(--c2);color:#fff;border-radius:10px;padding:1px 5px;font-size:11px;line-height:1.2}
.hari.besar{grid-column:span 2;background:linear-gradient(135deg,#FFF6E6,#FFE4BD)}
.hari.kini{outline:3px solid var(--c2);animation:denyut 1.6s ease-in-out infinite}
.hari.lewat{opacity:.55}
.centang{position:absolute;top:4px;right:6px;color:#fff;background:var(--ok);border-radius:50%;width:20px;height:20px;font:800 13px/20px var(--judul);font-style:normal}
.peti-wadah{position:relative;text-align:center;margin:6px 0 0}
.peti-besar{width:170px;height:150px;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.18))}
.peti-besar.buka{animation:buka-peti .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes buka-peti{0%{transform:scale(1)}40%{transform:scale(1.18) translateY(-10px)}100%{transform:scale(1)}}
.hasil-peti{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.hasil-peti.muncul{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
.dapat{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:30px;padding:6px 14px;font:800 18px var(--judul);box-shadow:var(--bayang);color:var(--c2-gelap)}
.dapat-gbr{width:40px;height:40px;object-fit:contain}
.misi{display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--r);padding:10px 12px;margin:8px 0;box-shadow:var(--bayang)}
.misi-teks{flex:1;min-width:0}
.misi-teks b{font:800 16px var(--judul)}
.misi-teks small{color:var(--muted);font-weight:700}
.misi.beres{opacity:.65}
.misi-hadiah{font:800 15px var(--judul);color:var(--c2-gelap);white-space:nowrap}
.misi-ok{width:40px;height:40px;border-radius:50%;background:var(--ok);color:#fff;font:800 22px/40px var(--judul);text-align:center}
.tombol-ambil{background:var(--c2);color:#fff;font:800 14px/1.15 var(--judul);padding:6px 12px;border-bottom:4px solid var(--c2-gelap);animation:denyut 1.4s ease-in-out infinite}

/* ======== utan ======== */
.utan-panggung{display:flex;align-items:center;gap:12px;background:radial-gradient(circle at 30% 60%,#FFF6E0,#fff 70%);border-radius:22px;padding:10px 14px;box-shadow:var(--bayang);margin-top:8px}
.utan-besar{width:150px;height:170px;object-fit:contain;filter:drop-shadow(0 6px 6px rgba(0,0,0,.18));flex:none}
.utan-panggung h2{margin:0;color:var(--c-gelap)}
.utan-panggung p{margin:2px 0 8px;font-weight:700;color:var(--muted)}
.saklar.tiga button{font-size:14px}
.grid-kostum{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kostum{background:#fff;border-radius:16px;padding:8px;text-align:center;box-shadow:var(--bayang);display:flex;flex-direction:column;align-items:center;gap:3px;border-bottom:4px solid #D3C2AE}
.kostum.dipakai{outline:3px solid var(--c2)}
.kostum-gbr{width:96px;height:110px;object-fit:contain}
.kostum b{font:800 15px/1.1 var(--judul)}
.harga{font:800 15px var(--judul);color:var(--c2-gelap)}
.kostum-ok{font-weight:800;color:var(--ok);font-size:14px}
.tombol-kecil{width:100%;padding:8px;font:800 15px var(--judul);background:#fff;border:2px solid var(--garis);border-bottom-width:4px;color:var(--c-gelap)}
.tombol-kecil.isi{background:var(--c);color:#fff;border-color:var(--c-gelap)}
.tombol-kecil:disabled{color:var(--muted);opacity:.7}
.album{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slot-stiker{position:relative;background:#fff;border-radius:50%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;box-shadow:var(--bayang)}
.stiker-gbr{width:88%;height:88%;object-fit:contain}
.slot-stiker:not(.ada) .stiker-gbr{filter:grayscale(1) brightness(0);opacity:.2}
.slot-stiker small{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);background:var(--c);color:#fff;font:800 10px/1.2 var(--judul);padding:1px 6px;border-radius:8px;white-space:nowrap}
.tanya-tanda{position:absolute;font:800 26px var(--judul);color:#B8C3AF}
.grid-lencana{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lencana{background:#fff;border-radius:16px;padding:10px 8px;text-align:center;box-shadow:var(--bayang);display:flex;flex-direction:column;align-items:center;gap:2px}
.lencana b{font:800 15px var(--judul)}
.lencana small{font-size:12px;color:var(--muted);line-height:1.2}
.medali{position:relative;width:76px;height:88px;display:block}
.pita{position:absolute;left:50%;top:0;width:34px;height:40px;transform:translateX(-50%);background:linear-gradient(90deg,var(--no) 0 50%,#B93C38 50%);clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%)}
.koin-medali{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:64px;height:64px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#FFE9A8,#F4B400 60%,#C98A00);border:3px solid #fff;box-shadow:0 3px 6px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center}
.medali-gbr{width:44px;height:44px;object-fit:contain}
.lencana:not(.ada) .koin-medali{background:#E3E7DE}
.lencana:not(.ada) .pita{background:#C9CFC3}
.lencana:not(.ada) .medali-gbr{filter:grayscale(1);opacity:.35}
.lencana:not(.ada) b{color:var(--muted)}
.tirai.tanya{background:rgba(36,48,31,.55)}
.tanya-kotak{background:#fff;border-radius:22px;padding:16px;width:min(340px,100%);text-align:center}
.tanya-kotak h3{margin:4px 0}
.tanya-gbr{width:110px;height:120px;object-fit:contain}

/* ======== rest (night) ======== */
body[data-layar=istirahat]{background:#16203F}
.malam{position:relative;margin:-14px -16px -40px;min-height:100vh;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.malam-latar{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.malam-teks{position:relative;padding:120px 16px 22px;background:linear-gradient(180deg,rgba(14,22,48,0) 0%,rgba(14,22,48,.86) 32%,#0E1630 100%);color:#fff}
.malam-teks h2{color:#fff;font-size:27px;text-align:center;text-shadow:0 2px 6px rgba(0,0,0,.4)}
.malam-kartu{background:#fff;color:var(--ink);border-radius:20px;padding:12px;margin:10px 0}
.malam-angka{display:grid;grid-template-columns:repeat(3,1fr);text-align:center}
.malam-angka span{display:flex;flex-direction:column;font-size:13px;font-weight:700;color:var(--muted)}
.malam-angka b{font:800 30px/1.1 var(--judul);color:var(--c-gelap)}
.malam-saran{font-size:14.5px;margin:10px 0 0;background:var(--kalimat);padding:8px 10px;border-radius:12px}
.malam-tombol .tombol{width:100%;margin:5px 0}
@media (max-width:400px){.malam{margin:-12px -12px -40px}}

/* ======== parent ======== */
.ortu-atas h2{margin:0;color:var(--c-gelap)}
.ortu-nama{margin:4px 2px 8px}
.angka-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.angka{background:#fff;border-radius:14px;padding:8px 4px;text-align:center;box-shadow:var(--bayang);display:flex;flex-direction:column;align-items:center}
.angka b{font:800 22px/1.1 var(--judul);color:var(--c-gelap)}
.angka b small{font-size:11px;color:var(--muted)}
.angka > small{font-size:11.5px;color:var(--muted);font-weight:700;line-height:1.15}
.dasbor-kartu{background:#fff;border-radius:var(--r);padding:12px;margin:12px 0;box-shadow:var(--bayang)}
.dasbor-kartu h3{margin:0 0 8px;color:var(--c-gelap)}
.tes-banding{display:flex;align-items:center;justify-content:space-around;text-align:center}
.tes-banding div{display:flex;flex-direction:column}
.tes-banding b{font:800 30px var(--judul);color:var(--c-gelap)}
.tes-banding span,.tes-banding small{font-size:12px;color:var(--muted);font-weight:700}
.tes-banding .panah{font-size:28px;color:var(--c2)}
.grafik{position:relative;display:flex;align-items:flex-end;gap:6px;height:120px;margin:22px 0 4px}
.grafik .kolom{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.grafik .kolom i{display:block;width:100%;max-width:30px;min-height:2px;background:var(--ok);border-radius:6px 6px 0 0}
.grafik .kolom i.lebih{background:var(--c2)}
.grafik .kolom b{position:absolute;top:-18px;font-size:11px;color:var(--muted)}
.grafik .kolom small{position:absolute;bottom:-18px;font-size:11px;font-weight:700;color:var(--muted)}
.garis-batas{position:absolute;left:0;right:0;bottom:var(--batas);border-top:2px dashed var(--no);z-index:2;pointer-events:none}
.garis-batas small{position:absolute;right:0;top:-16px;font-size:11px;color:var(--no);font-weight:800;background:#fff;padding:0 3px}
.tabel{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
.tabel th{text-align:left;font-size:12px;color:var(--muted);border-bottom:2px solid var(--garis);padding:4px}
.tabel td{border-bottom:1px solid var(--garis);padding:6px 4px;vertical-align:top}
.tabel td small{color:var(--muted);font-size:11.5px}
.saran{background:var(--kalimat);padding:8px 10px;border-radius:10px;font-size:14.5px}
.kegiatan{margin:8px 0}
.kegiatan ul{margin:4px 0;padding-left:20px;font-size:14.5px}
.kegiatan.disorot{background:var(--beda);border-radius:10px;padding:6px 8px}
.kartu.kolom{flex-direction:column;align-items:stretch}
.panduan p{margin:4px 0;font-size:14.5px}

/* ======== arena ======== */
.kartu-arena{display:flex;align-items:center;gap:10px;width:100%;background:#fff;border-radius:18px;padding:0 12px 0 0;margin:10px 0;overflow:hidden;text-align:left;box-shadow:var(--bayang);border-bottom:5px solid #D3C2AE}
.kartu-arena .scene{width:46%;aspect-ratio:16/10;height:auto;flex:none}
.kartu-arena-isi{flex:1;min-width:0}
.kartu-arena b{display:block;font:800 18px/1.15 var(--judul);color:var(--c-gelap)}
.kartu-arena small{font-weight:700;color:var(--muted)}
.peta-game-atas{position:relative;display:flex;align-items:center;gap:10px;background:#fff;border-radius:18px;padding:8px;box-shadow:var(--bayang);margin-top:8px}
.peta-game-atas .scene{width:96px;height:64px;border-radius:12px;flex:none}
.peta-game-atas b{display:block;font:800 19px var(--judul);color:var(--c-gelap)}
.peta-game-atas small{font-size:12.5px;color:var(--muted);font-weight:700;line-height:1.25;display:block}
.peta-game-atas .kembali{padding:6px 10px;align-self:center}
.peta-level{position:relative;margin:14px 0 8px}
.peta-level svg{position:absolute;inset:0;width:100%;height:100%}
.peta-level path{fill:none;stroke:#F3E3BC;stroke-width:14;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.node{position:absolute;transform:translate(-50%,-50%);width:54px;height:54px;border-radius:50%;background:#fff;border:3px solid var(--c);border-bottom-width:6px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;font-family:var(--judul);z-index:1}
.node:active:not(:disabled){transform:translate(-50%,calc(-50% + 3px))}
.node b{font-size:19px;line-height:1;color:var(--c-gelap)}
.node small{font-size:10px;color:#F4B400;letter-spacing:-1px;line-height:1}
.node.beres{background:#E7F5DE}
.node.kini{background:var(--c2);border-color:var(--c2-gelap);animation:denyut-node 1.4s ease-in-out infinite}
@keyframes denyut-node{50%{box-shadow:0 0 0 7px rgba(242,140,40,.35)}}
.node.kini b{color:#fff}
.node.kunci{background:#EEF1EA;border-color:#C9CFC3}
.node.kunci b{font-size:16px}
.node.peti{width:64px;height:64px}
.node-peti{position:absolute;width:40px;height:40px;top:-24px;object-fit:contain}
.chip-langkah{display:flex;align-items:center;gap:3px;margin:8px 0;font:800 12px/1.1 var(--judul);color:var(--muted)}
.chip-langkah span{flex:1;background:#fff;border-radius:12px;padding:5px 4px;text-align:center;box-shadow:var(--bayang)}
.chip-langkah span b{display:inline-block;background:var(--c);color:#fff;border-radius:50%;width:17px;height:17px;line-height:17px;margin-right:3px;font-size:11px}
.chip-langkah i{font-style:normal;color:var(--muted)}
.papan-game{background:#fff;border-radius:var(--r);padding:12px;box-shadow:var(--bayang);touch-action:manipulation}
.bar-game{display:flex;gap:6px;margin-top:8px}
.bar-game .ikon-btn{flex:1;align-self:stretch;padding:9px 4px;font-size:14.5px}
.hitung-langkah{text-align:center;font-size:14px;color:var(--muted);margin:8px 0 0}
.sorot{animation:sinar 1s ease-in-out infinite;outline:3px solid var(--c2);outline-offset:2px}
.demo{animation:sinar .7s ease-in-out infinite}
.menang-game h2{font-size:32px}
.peti-menang{display:flex;align-items:center;gap:10px;justify-content:center;background:var(--beda);border-radius:16px;padding:8px;margin:8px 0;font:800 16px var(--judul)}
.menang-game ~ .tombol{display:block;width:100%}
/* uang */
.warung{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:linear-gradient(180deg,#FFF6E6,#FCE9CC);border-radius:14px;padding:8px}
.barang{display:flex;flex-direction:column;align-items:center;font-weight:700;font-size:14px}
.barang-gbr{width:66px;height:66px;object-fit:contain;font-size:40px;text-align:center}
.label-harga{background:var(--no);color:#fff;font:800 17px var(--judul);padding:2px 10px;border-radius:10px;transform:rotate(-3deg);margin-top:2px}
.total-harga{width:100%;text-align:center;font:800 16px var(--judul)}
.baki{margin:10px 0;border:3px dashed var(--garis);border-radius:16px;padding:8px;min-height:96px;background:#FAFCF7}
.baki.pas{border-color:var(--ok);background:#EEF8E8}
.baki.lebih{border-color:var(--no);background:#FDECE9}
.baki-atas{display:flex;align-items:baseline;gap:8px;font-weight:700;color:var(--muted)}
.baki-atas b{font:800 22px var(--judul);color:var(--c-gelap)}
.baki.lebih .baki-atas b{color:var(--no)}
.baki-atas small{margin-left:auto}
.baki-isi{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.baki-kosong{font-size:13.5px;color:var(--muted)}
.palet{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.uang-btn{background:none;padding:2px;display:flex;justify-content:center;border-radius:12px}
.uang{display:flex;align-items:center;justify-content:center;font:800 15px var(--judul);color:#fff;text-shadow:0 1px 1px rgba(0,0,0,.35);box-shadow:0 3px 0 rgba(0,0,0,.2)}
.uang.koin{width:58px;height:58px;border-radius:50%;border:3px solid rgba(255,255,255,.6)}
.uang.kertas{width:96px;height:52px;border-radius:8px;border:2px solid rgba(255,255,255,.7);background-image:radial-gradient(circle at 22% 50%,rgba(255,255,255,.35) 0 10px,transparent 11px)}
.uang.d500{background:radial-gradient(circle at 35% 30%,#FFE9A8,#D9A520)}
.uang.d1000{background:radial-gradient(circle at 35% 30%,#F4F6F2,#A9B3A6 60%,#D9A520 61%)}
.uang.d1000 b{color:#5a4a10;text-shadow:none}
.uang.d2000{background-color:#7E8DA3}
.uang.d5000{background-color:#9B6A3C}
.uang.d10000{background-color:#8F5BA8}
.uang.d20000{background-color:#3E9B6A}
.uang-btn.kecil .uang.koin{width:40px;height:40px;font-size:11px}
.uang-btn.kecil .uang.kertas{width:62px;height:36px;font-size:12px}
/* timbangan */
.timbangan{position:relative;height:200px;margin:0 auto;max-width:340px}
.tiang{position:absolute;left:50%;bottom:0;width:16px;height:150px;transform:translateX(-50%);background:linear-gradient(90deg,#9C6B42,#7A5030);border-radius:8px 8px 0 0}
.tiang::after{content:'';position:absolute;left:50%;bottom:0;width:110px;height:14px;transform:translateX(-50%);background:#7A5030;border-radius:10px}
.lengan{position:absolute;left:5%;right:5%;top:48px;height:12px;background:linear-gradient(180deg,#B07A4C,#8A5A35);border-radius:8px;transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.lengan::after{content:'';position:absolute;left:50%;top:-6px;width:22px;height:22px;margin-left:-11px;border-radius:50%;background:var(--c2);border:3px solid #fff}
.pan{position:absolute;top:60px;width:44%;display:flex;flex-direction:column;align-items:center;transition:transform .6s cubic-bezier(.3,1.4,.5,1)}
.pan-kiri{left:0}.pan-kanan{right:0}
.pan::before{content:'';position:absolute;top:-12px;left:50%;width:2px;height:82px;background:#A8784C;z-index:-1}
.pan-isi{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;align-content:flex-end;gap:3px;min-height:70px;width:100%;padding:0 4px}
.pan-dasar{width:100%;height:16px;background:linear-gradient(180deg,#E9C893,#C9A066);border-radius:0 0 50% 50%/0 0 100% 100%}
.buah{position:relative;display:inline-flex}
.buah-gbr{width:40px;height:40px;object-fit:contain}
.buah b{position:absolute;right:-4px;bottom:-2px;background:var(--c-gelap);color:#fff;border-radius:10px;font:800 13px/1 var(--judul);padding:3px 6px}
.balok{min-width:38px;height:38px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;font:800 18px var(--judul);color:#fff;padding:0 6px;border-bottom:4px solid rgba(0,0,0,.25);box-shadow:inset 0 3px 0 rgba(255,255,255,.3)}
.balok.kosong{background:#EEF1EA!important;color:#C9CFC3!important;border-bottom-color:#DDE2D7;box-shadow:none}
.tanya-balok{background:#fff;color:var(--c2-gelap);border:3px dashed var(--c2)}
.tanya-balok.benar{background:var(--ok);color:#fff;border-style:solid}
.info-timbang{display:flex;justify-content:center;gap:10px;min-height:26px;margin:6px 0;font-weight:700;color:var(--muted)}
.info-timbang b{color:var(--c-gelap);font-family:var(--judul)}
.rak-balok{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;background:#F3F8EE;border-radius:14px;padding:10px}
.saklar.sisi{margin:4px 0 8px}
.w1,.p1{background:#E9E2D2;color:var(--ink)!important}
.w2,.p2{background:#E25B4F}.w3,.p3{background:#7FB446}.w4,.p4{background:#B771CC}.w5,.p5{background:#EBC23E;color:var(--ink)!important}
.w6,.p6{background:#2F8F5B}.w7,.p7{background:#4A4A4A}.w8,.p8{background:#8A5A35}.w9,.p9{background:#4A7BD0}.w10,.p10{background:#F28C28}
/* susun batang */
.panjang-target{text-align:center;font-weight:700;margin-bottom:4px}
.baris-batang{position:relative;display:flex;height:46px;margin:6px auto;border-radius:10px;background:repeating-linear-gradient(90deg,#F3F8EE 0 calc(var(--u) - 2px),#D7E3CC calc(var(--u) - 2px) var(--u));border:2px solid var(--garis);box-sizing:content-box}
.baris-batang.target{border:2px dashed var(--c)}
.baris-batang[data-label]::before{content:attr(data-label);position:absolute;left:-2px;top:-17px;font:800 11px var(--judul);color:var(--muted)}
.baris-batang.atas{background:none;border-style:solid;margin-top:16px}
.baris-batang.target[data-label]{margin-top:18px}
.potong{height:42px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:#fff;font:800 16px var(--judul);padding:0;border:0;border-bottom:4px solid rgba(0,0,0,.25);box-shadow:inset 0 3px 0 rgba(255,255,255,.3);flex:none;min-width:0;overflow:hidden;margin:2px 0}
.baris-batang .potong{margin:0;height:46px}
.potong.tetap{opacity:.9}
.potong.kosong{background:transparent!important;border:2px dashed #DDE2D7;box-shadow:none}
.potong.redup{opacity:.45}
.sisa-batang{flex:1;display:flex;align-items:center;justify-content:center;font:800 14px var(--judul);color:var(--c2-gelap)}
.garis-ukur{position:relative;height:16px;margin:0 auto 6px}
.garis-ukur i{position:absolute;top:0;width:1px;height:6px;background:var(--muted)}
.garis-ukur small{position:absolute;top:5px;left:-4px;font-size:10px;color:var(--muted)}
.rak-potong{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;background:#F3F8EE;border-radius:14px;padding:10px;margin-top:6px}
.tautan-tombol{text-decoration:none;text-align:center;display:flex;align-items:center;justify-content:center}
.panduan b{font-size:15px}