/* Metiq — tampilan siswa bergaya aplikasi belajar: maskot Meti, peta belajar, soal satu per satu.
 * Semua kelas diawali "mq-" supaya tidak bentrok dengan style.css (dasbor guru tetap seperti semula). */
:root {
  --mq: #35e0bd; --mq-l: #66ffdb; --mq-d: #19b796; --mq-dd: #0a7d68; --mq-ink: #04382e; --mq-bg: #e6fffa;
  --mq-line: #e3ece9; --mq-gold: #ffc800; --mq-gold-d: #e0a800; --mq-blue: #1c9be8; --mq-bad: #ff5a5f; --mq-bad-bg: #ffe3e3;
  --mq-warn-bg: #fff3c4; --mq-ok-bg: #d4fcef;
}

/* ---------- Gerak maskot: muncul membal, berkedip, lengan melambai ---------- */
.mq-mascot { display: block; overflow: visible; max-width: 100%; height: auto; }
.mq-enter { transform-origin: 50% 92%; animation: mq-pop .85s cubic-bezier(.3, 1.3, .5, 1) both; }
@keyframes mq-pop {
  0% { opacity: 0; transform: translateY(54px) scale(.55, .4); }
  45% { opacity: 1; transform: translateY(-16px) scale(.94, 1.1); }
  65% { transform: translateY(0) scale(1.08, .92); }
  82% { transform: scale(.98, 1.03); }
  100% { transform: none; }
}
.mq-float.mq-enter { animation: mq-pop .85s cubic-bezier(.3, 1.3, .5, 1) both, mq-bob 3.2s ease-in-out .9s infinite; }
@keyframes mq-bob { 50% { transform: translateY(-8px); } }
.mq-enter .mq-arms { transform-origin: 100px 130px; animation: mq-sway 2.8s ease-in-out .9s infinite; }
@keyframes mq-sway { 50% { transform: skewX(-2.5deg); } }
.mq-eye { transform-box: fill-box; transform-origin: center; animation: mq-blink 4.2s 1.3s infinite; }
@keyframes mq-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
.mq-tuft { transform-origin: 100px 26px; animation: mq-tuft 2.4s ease-in-out .7s infinite; }
@keyframes mq-tuft { 50% { transform: rotate(12deg); } }
.mq-wave { transform-origin: 150px 118px; animation: mq-wave 1s ease-in-out .8s infinite; }
@keyframes mq-wave { 50% { transform: rotate(-16deg); } }
.mq-cheerL { transform-origin: 52px 116px; animation: mq-cl .55s ease-in-out infinite alternate; }
.mq-cheerR { transform-origin: 148px 116px; animation: mq-cr .55s ease-in-out infinite alternate .1s; }
@keyframes mq-cl { to { transform: rotate(10deg); } } @keyframes mq-cr { to { transform: rotate(-10deg); } }
.mq-bubbles circle { fill: #bff7ec; opacity: 0; animation: mq-rise 1.7s ease-out .5s both; }
.mq-bubbles .b2 { animation-delay: .7s; } .mq-bubbles .b3 { animation-delay: .9s; } .mq-bubbles .b4 { animation-delay: 1.1s; }
@keyframes mq-rise { 0% { opacity: 0; transform: translateY(12px); } 30% { opacity: .95; } 100% { opacity: 0; transform: translateY(-80px); } }
.mq-react { animation: mq-react .45s ease; }
@keyframes mq-react { 30% { transform: translateY(-10px) scale(1.06); } 60% { transform: translateY(2px) scale(.97); } }
.mq-bubble { animation: mq-bpop .45s cubic-bezier(.3, 1.4, .5, 1) .55s both; transform-origin: 0 70%; }
@keyframes mq-bpop { from { opacity: 0; transform: scale(.6); } }
@media (prefers-reduced-motion: reduce) { .mq-mascot, .mq-mascot *, .mq-bubble, .mq-bub-node, .mq-label { animation: none !important; } }

/* ---------- Tombol besar (satu tombol utama per layar) ---------- */
.mq-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; padding: 14px 20px; border: 0; border-radius: 16px; font: inherit; font-weight: 900; font-size: 1.02rem; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer; background: var(--mq-l); color: var(--mq-ink); box-shadow: 0 5px 0 var(--mq); touch-action: manipulation; transition: transform .08s, box-shadow .08s; }
.mq-btn:active:not([disabled]) { transform: translateY(4px); box-shadow: 0 1px 0 var(--mq); }
.mq-btn.ghost { background: #fff; color: var(--mq-dd); border: 2px solid #cdeee5; box-shadow: 0 4px 0 #cdeee5; }
.mq-btn.ghost:active { box-shadow: 0 0 0 #cdeee5; }
.mq-btn.bad { background: var(--mq-bad); color: #fff; box-shadow: 0 5px 0 #d63c42; }
.mq-btn.warn { background: var(--mq-gold); color: #5a3d00; box-shadow: 0 5px 0 var(--mq-gold-d); }
.mq-btn.sm { min-height: 44px; padding: 10px 16px; font-size: .9rem; border-radius: 14px; }
.mq-btn[disabled] { background: #e8e8e8; color: #aaa; box-shadow: 0 5px 0 #d2d2d2; cursor: not-allowed; }
.mq-btn.pulse:not([disabled]) { animation: mq-btnpulse 1.8s ease-in-out infinite; }
@keyframes mq-btnpulse { 50% { transform: scale(1.025); } }
.mq-link { background: none; border: 0; color: var(--mq-dd); font: inherit; font-weight: 800; cursor: pointer; padding: 10px; text-decoration: none; }
.mq-foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: #fff; border-top: 2px solid #eef3f2; }
.mq-foot-in { max-width: 520px; margin: 0 auto; display: grid; gap: 10px; }
.mq-foot.ok { background: var(--mq-ok-bg); border-color: transparent; animation: mq-up .28s ease; }
.mq-foot.no { background: var(--mq-bad-bg); border-color: transparent; animation: mq-up .28s ease; }
.mq-foot.near { background: var(--mq-warn-bg); border-color: transparent; animation: mq-up .28s ease; }
@keyframes mq-up { from { transform: translateY(100%); } }

/* ---------- Kerangka layar penuh (onboarding, soal, hasil) ---------- */
body.mq-body { background: #fff; }
.mq-screen { max-width: 520px; margin: 0 auto; min-height: 100vh; padding: 0 16px 140px; display: flex; flex-direction: column; }
.mq-top { display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 0 auto; padding: 14px 16px 10px; }
.mq-ico { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: none; color: #9aa7a4; cursor: pointer; border-radius: 12px; text-decoration: none; }
.mq-ico:active { background: #f1f4f3; } .mq-ico svg { width: 26px; height: 26px; }
.mq-prog { flex: 1; height: 16px; border-radius: 99px; background: #e7e7e7; overflow: hidden; }
.mq-prog i { position: relative; display: block; height: 100%; min-width: 16px; border-radius: 99px; background: var(--mq); transition: width .45s ease, background .3s; }
.mq-prog i::after { content: ''; position: absolute; left: 8px; right: 8px; top: 3px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .45); }
.mq-prog.combo i { background: #ffb020; }
.mq-combo { max-width: 520px; margin: -4px auto 0; padding: 0 16px; text-align: center; font-weight: 900; font-size: .8rem; color: #e08a00; letter-spacing: .08em; height: 14px; }

.mq-say { display: flex; align-items: flex-end; gap: 4px; margin: 6px 0 14px; }
.mq-say .mq-mascot { flex: none; }
.mq-say .mq-bubble { min-width: 0; max-width: 100%; } /* soal lebar (tabel, rumus) tidak boleh melebarkan layar */
.mq-bubble { position: relative; flex: 1; border: 2px solid var(--mq-line); border-radius: 20px; padding: 14px 16px; margin-bottom: 26px; font-size: 1.12rem; font-weight: 800; line-height: 1.35; background: #fff; }
.mq-bubble::before, .mq-bubble::after { content: ''; position: absolute; left: -11px; bottom: 18px; border: 9px solid transparent; border-right-color: var(--mq-line); border-left: 0; }
.mq-bubble::after { left: -8px; border-right-color: #fff; }
.mq-bubble p { margin: 0; } .mq-bubble .sub { display: block; margin-top: 4px; font-weight: 700; font-size: .92rem; color: #6a7f7a; }
.mq-bubble b.hl { color: #19b796; }
.mq-spk { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -4px 8px -4px 0; vertical-align: middle; border: 0; border-radius: 50%; background: #e9faf6; color: var(--mq-blue); cursor: pointer; }
.mq-spk svg { width: 22px; height: 22px; } .mq-spk:active { transform: scale(.92); }

.mq-title { font-size: 1.4rem; font-weight: 900; margin: 6px 0 4px; line-height: 1.2; }
.mq-hint { margin: 0 0 6px; color: #6a7f7a; font-weight: 700; font-size: .95rem; }
.mq-lesson { flex: 1; }
.mq-vis { margin: 6px 0 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; overflow-x: auto; max-width: 100%; }

/* pilihan jawaban */
.mq-opts { display: grid; gap: 12px; }
.mq-opts.short { grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); }
.mq-opts:not(.short) { grid-template-columns: 1fr; }
@media (min-width: 420px) { .mq-opts:not(.short) { grid-template-columns: 1fr 1fr; } }
.mq-opt { display: flex; align-items: center; justify-content: center; min-height: 60px; padding: 12px; border: 2px solid #e5e5e5; border-bottom-width: 5px; border-radius: 16px; background: #fff; font: inherit; font-size: 1.2rem; font-weight: 800; color: var(--mq-ink); cursor: pointer; touch-action: manipulation; transition: transform .08s, background .12s, border-color .12s; }
.mq-opt:active { transform: translateY(2px); }
.mq-opt.sel { border-color: var(--mq); background: var(--mq-bg); color: var(--mq-dd); }
.mq-opt.right { border-color: var(--mq-d); background: var(--mq-ok-bg); color: var(--mq-dd); }
.mq-opt.wrong { border-color: var(--mq-bad); background: var(--mq-bad-bg); color: #c0282d; animation: mq-shake .35s; }
.mq-opt[disabled] { cursor: default; }
@keyframes mq-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* jawaban ketik + papan angka */
.mq-ans { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 4px 0 14px; }
.mq-ans .u { font-weight: 900; font-size: 1.3rem; }
.mq-disp { min-width: 160px; min-height: 64px; padding: 8px 18px; border: 3px solid #bfeee2; border-bottom-width: 6px; border-radius: 16px; background: #f4fffc; font-size: 2.1rem; font-weight: 900; text-align: center; letter-spacing: 2px; line-height: 1.4; }
.mq-disp.has { border-color: var(--mq); background: #fff; }
.mq-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 340px; margin: 0 auto; }
.mq-keys.extra { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); margin-bottom: 10px; }
.mq-key { min-height: 56px; border: 0; border-radius: 14px; background: #eefaf7; box-shadow: 0 4px 0 #cdeee5; font: inherit; font-size: 1.5rem; font-weight: 900; color: var(--mq-ink); cursor: pointer; touch-action: manipulation; }
.mq-key:active { transform: translateY(3px); box-shadow: 0 1px 0 #cdeee5; }
.mq-key.del { background: #ffeeea; box-shadow: 0 4px 0 #f6d2c8; } .mq-keys.extra .mq-key { background: #fff3c4; box-shadow: 0 4px 0 #f1d98a; font-size: 1.2rem; }
.mq-key[disabled] { opacity: .5; }

/* kotak umpan balik di bawah layar: benar / salah / hampir benar */
.mq-fbh { display: flex; align-items: center; gap: 10px; font-size: 1.35rem; font-weight: 900; }
.mq-fbh .ic { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; }
.mq-fbh .ic svg { width: 20px; height: 20px; }
.mq-foot.ok .mq-fbh { color: var(--mq-dd); } .mq-foot.ok .ic { background: var(--mq-d); }
.mq-foot.no .mq-fbh { color: #d63c42; } .mq-foot.no .ic { background: var(--mq-bad); }
.mq-foot.near .mq-fbh { color: #b97800; } .mq-foot.near .ic { background: var(--mq-gold); }
.mq-fbody { max-height: 38vh; overflow: auto; font-weight: 700; }
.mq-fbody p { margin: 4px 0; }
.mq-corr { font-weight: 900; font-size: 1.15rem; margin: 2px 0 8px; }
.mq-foot.no .mq-corr { color: #d63c42; } .mq-foot.near .mq-corr { color: #8a5a00; }
.mq-how { margin: 6px 0 2px; background: rgba(255, 255, 255, .7); border-radius: 14px; padding: 8px 12px; }
.mq-how summary { font-weight: 900; cursor: pointer; padding: 4px 0; color: var(--mq-ink); list-style: none; }
.mq-how summary::-webkit-details-marker { display: none; }
.mq-how .explain { background: none; padding: 0; margin: 4px 0 0; }
.mq-how a, .mq-how .link { font-weight: 800; }

/* ---------- Onboarding ---------- */
.mq-ob-body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 8px; padding-bottom: 30px; }
.mq-ob-body .mq-say { width: 100%; }
.mq-ob-body.center-say { justify-content: center; }
.mq-big-say { display: flex; flex-direction: column; align-items: center; gap: 0; }
.mq-big-say .mq-bubble { margin: 0 0 18px; text-align: center; font-size: 1.25rem; max-width: 340px; }
.mq-big-say .mq-bubble::before, .mq-big-say .mq-bubble::after { left: 50%; bottom: -17px; margin-left: -9px; border: 9px solid transparent; border-top: 9px solid var(--mq-line); border-bottom: 0; border-right-color: transparent; }
.mq-big-say .mq-bubble::after { bottom: -14px; border-top-color: #fff; border-right-color: transparent; left: 50%; }
.mq-choices { display: grid; gap: 12px; width: 100%; text-align: left; }
.mq-choice { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; padding: 12px 16px; border: 2px solid #e5e5e5; border-bottom-width: 5px; border-radius: 16px; background: #fff; font: inherit; font-weight: 800; font-size: 1.08rem; color: var(--mq-ink); cursor: pointer; text-align: left; touch-action: manipulation; }
.mq-choice:active { transform: translateY(2px); }
.mq-choice.sel { border-color: var(--mq); background: var(--mq-bg); color: var(--mq-dd); }
.mq-choice .em { flex: none; font-size: 1.8rem; width: 40px; text-align: center; }
.mq-choice .grow small { display: block; font-weight: 700; color: #6a7f7a; font-size: .85rem; }
.mq-choice .tag { margin-left: auto; font-weight: 700; color: #7b8c88; font-size: .9rem; }
.mq-ages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.mq-age { display: grid; place-items: center; gap: 0; min-height: 84px; border: 2px solid #e5e5e5; border-bottom-width: 5px; border-radius: 18px; background: #fff; font: inherit; color: var(--mq-ink); cursor: pointer; }
.mq-age b { font-size: 2rem; line-height: 1; } .mq-age small { font-weight: 800; color: #6a7f7a; }
.mq-age.sel { border-color: var(--mq); background: var(--mq-bg); color: var(--mq-dd); } .mq-age:active { transform: translateY(2px); }
.mq-ages.many { grid-template-columns: repeat(4, 1fr); gap: 10px; } .mq-ages.many .mq-age { min-height: 70px; } .mq-ages.many .mq-age b { font-size: 1.7rem; }
.mq-gain { display: grid; gap: 18px; width: 100%; text-align: left; margin-top: 8px; }
.mq-gain div { display: flex; gap: 14px; align-items: center; } .mq-gain .em { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--mq-bg); font-size: 1.9rem; }
.mq-gain b { display: block; font-size: 1.08rem; } .mq-gain small { color: #6a7f7a; font-weight: 700; }

/* kode kelas */
.mq-code { width: 100%; text-align: center; font: inherit; font-size: 2rem; font-weight: 900; letter-spacing: .4em; text-indent: .4em; text-transform: uppercase; padding: 14px 8px; border: 3px solid #bfeee2; border-bottom-width: 6px; border-radius: 18px; background: #f4fffc; color: var(--mq-ink); }
.mq-code:focus { outline: none; border-color: var(--mq); background: #fff; }
.mq-code.bad { border-color: var(--mq-bad); animation: mq-shake .35s; }
.mq-steps { display: grid; gap: 10px; width: 100%; text-align: left; margin-top: 6px; }
.mq-steps div { display: flex; gap: 12px; align-items: center; font-weight: 700; color: #4d625d; } .mq-steps .n { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mq-bg); color: var(--mq-dd); font-weight: 900; }
.mq-inline { color: var(--mq-dd); font-weight: 800; }
.mq-name { width: 100%; text-align: center; font: inherit; font-size: 1.4rem; font-weight: 900; padding: 16px 12px; border: 3px solid #bfeee2; border-bottom-width: 6px; border-radius: 18px; background: #f4fffc; color: var(--mq-ink); }
.mq-name:focus { outline: none; border-color: var(--mq); background: #fff; }
.mq-note { margin: 10px 0 0; text-align: center; font-weight: 700; color: #6a7f7a; font-size: .95rem; }
.mq-land-alt { margin: 12px 0 0; }
.mq-land-alt .mq-link { font-size: .95rem; color: #5b716b; }
.mq-kids { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; width: 100%; }
.mq-kid { display: grid; justify-items: center; gap: 8px; padding: 16px 8px 14px; border: 2px solid #e5e5e5; border-bottom-width: 5px; border-radius: 20px; background: #fff; font: inherit; font-weight: 900; font-size: 1.05rem; color: var(--mq-ink); cursor: pointer; }
.mq-kid:active { transform: translateY(2px); } .mq-kid .av { width: 76px; height: 76px; font-size: 3rem; box-shadow: none; background: var(--mq-bg); }
.mq-kid .av svg { width: 100%; height: 100%; }

/* ---------- Hasil ---------- */
.mq-result { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding-top: 18px; }
.mq-rtitle { font-size: 1.9rem; font-weight: 900; margin: 6px 0 0; color: #e0a800; }
.mq-rtitle.t { color: var(--mq-d); }
.mq-rsub { margin: 0 0 14px; color: #6a7f7a; font-weight: 800; }
.mq-stats3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; max-width: 420px; margin: 8px 0; }
.mq-stat { border: 3px solid var(--c); border-radius: 18px; overflow: hidden; background: #fff; }
.mq-stat small { display: block; padding: 5px 2px; background: var(--c); color: #fff; font-weight: 900; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.mq-stat b { display: block; padding: 14px 2px 12px; font-size: 1.7rem; color: var(--c); line-height: 1.1; } .mq-stat b em { display: block; font-style: normal; font-size: .75rem; opacity: .8; }
.mq-unlock { margin: 10px 0 0; padding: 10px 16px; border-radius: 14px; background: var(--mq-bg); color: var(--mq-dd); font-weight: 900; animation: mq-bpop .5s .8s both; }
.mq-more { width: 100%; max-width: 460px; text-align: left; margin-top: 12px; }
.mq-more > summary { text-align: center; font-weight: 900; color: var(--mq-dd); cursor: pointer; padding: 10px; list-style: none; }
.mq-more > summary::-webkit-details-marker { display: none; }
.mq-more .card { box-shadow: none; border: 2px solid var(--mq-line); }

/* ---------- Beranda siswa: peta belajar ---------- */
.mq-page { max-width: 520px; margin: 0 auto; padding: 0 0 110px; min-height: 100vh; }
.mq-demo { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 6px 14px; background: #fff3c4; font-size: .82rem; font-weight: 800; }
.mq-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 8px 12px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); border-bottom: 2px solid #eef3f2; }
.mq-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 4px 10px; border: 0; border-radius: 14px; background: none; font: inherit; font-weight: 900; font-size: 1.05rem; color: #ff8a00; cursor: pointer; }
.mq-chip.grade { color: var(--mq-dd); background: var(--mq-bg); border: 2px solid #bfeee2; border-bottom-width: 4px; } .mq-chip.grade small { font-weight: 800; font-size: .72rem; opacity: .8; }
.mq-chip.star { color: #e0a800; } .mq-chip .em { font-size: 1.3rem; }
.mq-ring { border: 0; padding: 0; cursor: pointer; --p: 0; position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: conic-gradient(var(--mq) calc(var(--p) * 1%), #e3e8e7 0); }
.mq-ring::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: #fff; } .mq-ring span { position: relative; font-size: 1.15rem; }
.mq-ring.done { background: var(--mq-gold); }

.mq-unit { position: sticky; top: 59px; z-index: 10; display: flex; align-items: center; gap: 12px; margin: 14px 12px 6px; padding: 12px 14px; border-radius: 18px; background: var(--mq); color: var(--mq-ink); box-shadow: 0 5px 0 var(--mq-d); }
.mq-unit .em { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; background: rgba(255, 255, 255, .55); font-size: 1.7rem; }
.mq-unit .grow small { display: block; font-weight: 900; font-size: .72rem; letter-spacing: .08em; opacity: .7; text-transform: uppercase; } .mq-unit .grow b { display: block; font-size: 1.12rem; line-height: 1.2; }
.mq-unit .les { flex: none; display: grid; justify-items: center; gap: 0; min-width: 54px; padding: 6px 8px; border-radius: 14px; background: rgba(255, 255, 255, .6); color: var(--mq-ink); text-decoration: none; font-size: .68rem; font-weight: 900; }
.mq-unit .les .em2 { font-size: 1.3rem; line-height: 1.2; } .mq-unit .les:active { transform: scale(.94); }
.mq-unit.lock { position: static; background: #eef0f0; color: #9aa3a1; box-shadow: 0 5px 0 #dde1e0; cursor: pointer; text-align: left; border: 0; width: calc(100% - 24px); font: inherit; }
.mq-unit.lock .em { background: rgba(255, 255, 255, .7); filter: grayscale(1); opacity: .6; }
.mq-unit.done { background: var(--mq-bg); color: var(--mq-dd); box-shadow: 0 5px 0 #bfeee2; position: static; }
details.mq-ud > summary { list-style: none; cursor: pointer; } details.mq-ud > summary::-webkit-details-marker { display: none; }
details.mq-ud[open] > summary .chev { transform: rotate(180deg); } .mq-unit .chev { transition: transform .2s; font-size: 1.2rem; }

.mq-path { display: flex; flex-direction: column; align-items: center; padding: 14px 0 6px; }
.mq-row { position: relative; display: flex; justify-content: center; width: 100%; padding: 9px 0; }
.mq-n { position: relative; transform: translateX(var(--x, 0px)); }
.mq-bub-node { --rc: var(--mq); --p: 0; position: relative; display: grid; place-items: center; width: 82px; height: 82px; border: 0; padding: 0; border-radius: 50%; background: conic-gradient(var(--rc) calc(var(--p) * 1%), #e3e8e7 0); box-shadow: 0 7px 0 rgba(4, 56, 46, .16); cursor: pointer; touch-action: manipulation; transition: transform .1s, box-shadow .1s; }
.mq-bub-node:active { transform: translateY(5px); box-shadow: 0 2px 0 rgba(4, 56, 46, .16); }
.mq-bub-node i { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: #fff; font-style: normal; font-size: 2rem; line-height: 1; position: relative; }
.mq-bub-node i::after { content: ''; position: absolute; left: 14px; top: 9px; width: 16px; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .85); transform: rotate(-30deg); }
.mq-n.cur .mq-bub-node { --rc: var(--mq-d); animation: mq-ripple 1.8s ease-out infinite; } .mq-n.cur .mq-bub-node i { background: var(--mq-l); }
@keyframes mq-ripple { 0% { box-shadow: 0 7px 0 rgba(4, 56, 46, .16), 0 0 0 0 rgba(53, 224, 189, .6); } 100% { box-shadow: 0 7px 0 rgba(4, 56, 46, .16), 0 0 0 22px rgba(53, 224, 189, 0); } }
.mq-n.open .mq-bub-node i { background: #f4fffc; }
.mq-n.done .mq-bub-node { --p: 100; --rc: var(--mq-d); } .mq-n.done .mq-bub-node i { background: var(--mq-bg); }
.mq-n.gold .mq-bub-node { --p: 100; --rc: var(--mq-gold); } .mq-n.gold .mq-bub-node i { background: #fff8d8; }
.mq-n.locked .mq-bub-node { background: #dfe3e2; box-shadow: 0 7px 0 #c8cecc; } .mq-n.locked .mq-bub-node i { background: #eef0f0; } .mq-n.locked .mq-bub-node i span { filter: grayscale(1); opacity: .35; }
.mq-n.locked .mq-bub-node i::after { display: none; }
.mq-badge { position: absolute; right: -4px; bottom: -2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 3px solid #fff; background: var(--mq-d); color: #fff; font-size: .85rem; font-weight: 900; z-index: 2; }
.mq-badge svg { width: 14px; height: 14px; } .mq-n.gold .mq-badge { background: var(--mq-gold); } .mq-n.locked .mq-badge { background: #aab2b0; } .mq-badge.task { background: #ff8a00; right: auto; left: -4px; top: -2px; bottom: auto; }
.mq-label { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%); padding: 7px 16px; border: 2px solid var(--mq-line); border-radius: 14px; background: #fff; color: var(--mq-d); font-weight: 900; font-size: .95rem; letter-spacing: .06em; white-space: nowrap; animation: mq-bounce 1.1s ease-in-out infinite; text-decoration: none; z-index: 3; }
.mq-label::after { content: ''; position: absolute; left: 50%; bottom: -9px; margin-left: -8px; border: 8px solid transparent; border-top-color: #fff; border-bottom: 0; } .mq-label::before { content: ''; position: absolute; left: 50%; bottom: -12px; margin-left: -10px; border: 10px solid transparent; border-top-color: var(--mq-line); border-bottom: 0; }
@keyframes mq-bounce { 50% { transform: translate(-50%, -7px); } }
.mq-buddy { position: absolute; top: -18px; width: 108px; pointer-events: none; z-index: 1; } .mq-buddy.l { right: calc(50% + 50px); } .mq-buddy.r { left: calc(50% + 50px); }
.mq-buddy .mq-say { margin: 0; }

.mq-pop { width: min(310px, 88%); margin: 4px auto 6px; padding: 14px; border-radius: 20px; background: var(--mq-l); color: var(--mq-ink); text-align: center; box-shadow: 0 5px 0 var(--mq-d); animation: mq-bpop .25s ease both; transform-origin: 50% 0; position: relative; }
.mq-pop::before { content: ''; position: absolute; left: var(--ax, 50%); top: -10px; margin-left: -10px; border: 10px solid transparent; border-bottom-color: var(--mq-l); border-top: 0; }
.mq-pop b { display: block; font-size: 1.08rem; line-height: 1.25; } .mq-pop small { display: block; margin: 2px 0 10px; font-weight: 800; opacity: .75; }
.mq-pop.lock { background: #e8ebea; color: #6b7573; box-shadow: 0 5px 0 #cfd4d2; } .mq-pop.lock::before { border-bottom-color: #e8ebea; }
.mq-pop .mq-btn { background: #fff; box-shadow: 0 5px 0 #bfeee2; min-height: 48px; } .mq-pop.lock .mq-btn { box-shadow: 0 5px 0 #cfd4d2; color: #6b7573; }
.mq-clam { width: 96px; height: 96px; border: 0; background: none; padding: 0; cursor: pointer; }
.mq-clam svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 0 rgba(4, 56, 46, .14)); } .mq-clam.on svg { animation: mq-bob 2.4s ease-in-out infinite; } .mq-clam.off svg { filter: grayscale(1) opacity(.5); }
.mq-all { margin: 14px 12px; padding: 16px; border-radius: 20px; background: var(--mq-bg); text-align: center; font-weight: 900; color: var(--mq-dd); }

.mq-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(4, 56, 46, .45); animation: mq-fade .2s; }
.mq-modal[hidden] { display: none; } @keyframes mq-fade { from { opacity: 0; } }
.mq-sheet { width: 100%; max-width: 520px; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: #fff; animation: mq-up .25s ease; }
.mq-sheet h2 { text-align: center; margin: 0 0 14px; font-size: 1.25rem; }
.mq-grades { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mq-g { display: grid; place-items: center; gap: 2px; padding: 12px 4px; border: 2px solid #e5e5e5; border-bottom-width: 5px; border-radius: 18px; background: #fff; font: inherit; color: var(--mq-ink); cursor: pointer; }
.mq-g b { font-size: 1.9rem; line-height: 1; } .mq-g small { font-weight: 800; color: #6a7f7a; font-size: .78rem; } .mq-g.on { border-color: var(--mq); background: var(--mq-bg); color: var(--mq-dd); }
.mq-g .bar { width: 70%; height: 6px; border-radius: 6px; background: #e3e8e7; overflow: hidden; } .mq-g .bar i { display: block; height: 100%; background: var(--mq); }

/* ---------- Navigasi bawah ---------- */
.mq-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; justify-content: center; padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: #fff; border-top: 2px solid #eef3f2; }
.mq-nav-in { display: flex; width: 100%; max-width: 520px; gap: 2px; }
.mq-nav a { position: relative; flex: 1; display: grid; justify-items: center; align-content: center; gap: 1px; min-height: 58px; padding: 4px 2px; border: 2px solid transparent; border-radius: 16px; text-decoration: none; color: #8a9a96; font-size: .68rem; font-weight: 900; letter-spacing: .02em; }
.mq-nav a svg { width: 28px; height: 28px; } .mq-nav a:active { background: #f1f4f3; }
.mq-nav a.on { border-color: #9be9d6; background: var(--mq-bg); color: var(--mq-dd); }
.mq-nav .dot { position: absolute; top: 4px; right: 18%; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #ff5a5f; color: #fff; font-size: .68rem; line-height: 18px; text-align: center; font-weight: 900; }
.wrap.mq-has-nav { padding-bottom: 110px; }

/* ---------- Tugas, profil ---------- */
.mq-h { font-size: 1.45rem; font-weight: 900; margin: 18px 14px 4px; } .mq-sub { margin: 0 14px 12px; color: #6a7f7a; font-weight: 700; }
.mq-card { margin: 12px; padding: 14px; border: 2px solid var(--mq-line); border-radius: 20px; background: #fff; }
.mq-card h3 { margin: 0 0 8px; font-size: 1.05rem; }
.mq-bigcode { margin: 4px 0 6px; text-align: center; font-size: 2.1rem; font-weight: 900; letter-spacing: .22em; color: var(--mq-dd); }
.mq-skrow { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-radius: 14px; text-decoration: none; color: var(--mq-ink); font-weight: 800; } .mq-skrow + .mq-skrow { border-top: 2px solid #f0f4f3; } .mq-skrow:active { background: #f4fffc; }
.mq-skrow .em { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--mq-bg); font-size: 1.5rem; } .mq-skrow small { display: block; color: #6a7f7a; font-weight: 700; }
.mq-skrow .go { flex: none; color: var(--mq-d); font-size: 1.4rem; }
.mq-empty { display: grid; justify-items: center; gap: 10px; padding: 26px 16px; text-align: center; font-weight: 800; color: #4d625d; }
.mq-me { display: grid; justify-items: center; gap: 4px; padding: 20px 16px 4px; text-align: center; background: linear-gradient(#e6fffa, #fff); }
.mq-me .av { width: 104px; height: 104px; font-size: 4rem; position: relative; box-shadow: 0 5px 0 #bfeee2; } .mq-me .av svg { width: 100%; height: 100%; }
.mq-me .edit { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mq-l); box-shadow: 0 3px 0 var(--mq); font-size: 1rem; }
.mq-me h1 { margin: 6px 0 0; font-size: 1.5rem; } .mq-me p { margin: 0; color: #6a7f7a; font-weight: 800; }
.mq-goalchips { display: flex; gap: 8px; flex-wrap: wrap; } .mq-goalchips button { flex: 1; min-width: 70px; padding: 10px 6px; border: 2px solid #e5e5e5; border-bottom-width: 4px; border-radius: 14px; background: #fff; font: inherit; font-weight: 900; color: var(--mq-ink); cursor: pointer; } .mq-goalchips button small { display: block; font-weight: 700; color: #6a7f7a; } .mq-goalchips button.on { border-color: var(--mq); background: var(--mq-bg); color: var(--mq-dd); }
.mq-list { margin: 12px; border: 2px solid var(--mq-line); border-radius: 20px; overflow: hidden; background: #fff; }
.mq-list > a, .mq-list > button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; padding: 10px 16px; border: 0; background: #fff; font: inherit; font-weight: 800; font-size: 1rem; color: var(--mq-ink); text-decoration: none; text-align: left; cursor: pointer; } .mq-list > * + * { border-top: 2px solid #f0f4f3; }
.mq-list .em { flex: none; width: 32px; text-align: center; font-size: 1.4rem; } .mq-list .go { margin-left: auto; color: #b3bfbc; font-size: 1.3rem; } .mq-list .danger { color: #d63c42; }
.mq-tiles3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px; }

/* ---------- Beranda umum (landing) ---------- */
.mq-land { max-width: 1040px; margin: 0 auto; padding: 0 18px 40px; }
.mq-lhead { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.mq-logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--mq-ink); font-weight: 900; font-size: 1.5rem; letter-spacing: -.5px; } .mq-logo img { width: 36px; height: 36px; border-radius: 10px; } .mq-logo .alpha { font-size: .62rem; padding: 2px 7px; border-radius: 99px; background: var(--mq-bg); color: var(--mq-dd); letter-spacing: 0; }
.mq-tlink { padding: 10px 14px; border: 2px solid var(--mq-line); border-bottom-width: 4px; border-radius: 14px; font-weight: 900; font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; color: var(--mq-dd); text-decoration: none; background: #fff; }
.mq-hero { display: grid; justify-items: center; gap: 10px; padding: 14px 0 30px; text-align: center; position: relative; overflow-x: clip; }
.mq-hero-art { position: relative; width: 250px; height: 250px; display: grid; place-items: center; }
.mq-hero-art::before { content: ''; position: absolute; inset: 14px; border-radius: 50%; background: radial-gradient(circle, #d9fff5 0 60%, transparent 71%); }
.mq-hero-art .mq-mascot { position: relative; }
.mq-sym { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px; font-weight: 900; font-size: 1.6rem; color: #fff; box-shadow: 0 4px 0 rgba(4, 56, 46, .18); animation: mq-drift 4s ease-in-out infinite; }
.mq-sym.a { left: 0; top: 24px; background: #ff8a65; } .mq-sym.b { right: 0; top: 40px; background: #5fa8ff; animation-delay: -1s; } .mq-sym.c { left: -6px; bottom: 74px; background: #ffc800; color: #5a3d00; animation-delay: -2s; } .mq-sym.d { right: 10px; bottom: 20px; background: #b88cff; animation-delay: -3s; }
@keyframes mq-drift { 50% { transform: translateY(-10px) rotate(6deg); } }
.mq-hero h1 { font-size: clamp(1.9rem, 6vw, 2.8rem); line-height: 1.12; margin: 0; font-weight: 900; } .mq-hero h1 span { color: #19b796; }
.mq-hero p { margin: 0; font-size: 1.08rem; color: #4d625d; font-weight: 700; max-width: 420px; }
.mq-cta { display: grid; gap: 14px; width: 100%; max-width: 360px; margin-top: 8px; }
.mq-resume { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 2px dashed var(--mq); border-radius: 18px; background: #f4fffc; text-decoration: none; color: var(--mq-ink); font-weight: 900; width: 100%; max-width: 360px; text-align: left; } .mq-resume .av { width: 44px; height: 44px; font-size: 1.8rem; box-shadow: none; background: #fff; }
.mq-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 10px 0 24px; }
.mq-feat div { display: grid; justify-items: center; gap: 8px; padding: 18px 8px; border: 2px solid var(--mq-line); border-bottom-width: 5px; border-radius: 22px; text-align: center; font-weight: 900; font-size: .92rem; line-height: 1.25; }
.mq-feat .em { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 20px; font-size: 2rem; background: var(--bg, #e6fffa); }
.mq-gb { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 6px 0 20px; } .mq-gb span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-weight: 900; font-size: 1.3rem; background: var(--mq-bg); color: var(--mq-dd); box-shadow: 0 4px 0 #bfeee2; }
.mq-gb-t { text-align: center; font-weight: 900; color: #6a7f7a; margin: 0 0 10px; }
/* Panduan pasang di layar utama HP */
.mq-install { margin: 0 0 20px; border: 2px solid var(--mq-line); border-bottom-width: 5px; border-radius: 22px; background: #fff; }
.mq-install summary { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; list-style: none; } .mq-install summary::-webkit-details-marker { display: none; }
.mq-install summary .em { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 16px; font-size: 1.6rem; background: var(--mq-bg); flex: none; }
.mq-install summary .grow { flex: 1; } .mq-install summary small { display: block; color: #6a7f7a; font-weight: 700; }
.mq-install summary .chev { font-size: 1.6rem; font-weight: 900; color: var(--mq-dd); transition: transform .2s; } .mq-install[open] summary .chev { transform: rotate(90deg); }
.ig-note { margin: 0 16px 10px; color: #4d625d; font-weight: 700; font-size: .92rem; line-height: 1.5; }
.ig-steps { list-style: none; margin: 0 0 12px; padding: 0 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.ig-steps li { position: relative; display: grid; gap: 8px; align-content: start; padding: 12px; border-radius: 18px; background: #f4fffc; border: 2px solid #d9f5ed; }
.ig-steps p { margin: 0; font-weight: 700; font-size: .92rem; line-height: 1.4; color: var(--mq-ink); }
.ig-n { position: absolute; top: -10px; left: -6px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mq-dd); color: #fff; font-weight: 900; }
.ig-pic { display: grid; place-items: center; min-height: 118px; padding: 8px; border-radius: 14px; background: #e9eceb; }
.ig-pic .on { background: var(--mq-l) !important; color: var(--mq-ink) !important; box-shadow: 0 0 0 3px var(--mq-dd); font-weight: 900; }
.ig-bar { display: flex; gap: 6px; width: 100%; padding: 10px 8px; border-radius: 12px; background: #fff; justify-content: space-between; font-size: 1.1rem; color: #6a7f7a; }
.ig-bar span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; }
.ig-menu { display: grid; gap: 2px; width: 100%; padding: 6px; border-radius: 12px; background: #fff; font-size: .8rem; color: #4d625d; }
.ig-menu span { padding: 4px 8px; border-radius: 8px; }
.ig-add { display: grid; justify-items: center; gap: 2px; width: 100%; padding: 8px; border-radius: 12px; background: #fff; }
.ig-add img { width: 40px; height: 40px; border-radius: 10px; } .ig-add small { font-weight: 700; color: #4d625d; }
.ig-add div { display: flex; justify-content: space-around; width: 100%; margin-top: 4px; font-size: .85rem; font-weight: 800; } .ig-add div span { padding: 3px 12px; border-radius: 8px; }
@media (display-mode: standalone) { .mq-install { display: none; } }
.mq-lfoot { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; padding: 14px 0 0; border-top: 2px solid #eef3f2; font-weight: 800; font-size: .85rem; } .mq-lfoot a { color: #6a7f7a; text-decoration: none; padding: 6px 0; }
@media (min-width: 860px) {
  .mq-hero { grid-template-columns: 1fr 1fr; text-align: left; justify-items: start; align-items: center; gap: 4px 40px; padding: 30px 0 44px; }
  .mq-hero-art { grid-row: 1 / span 4; justify-self: center; width: 380px; height: 380px; } .mq-hero p { max-width: none; }
  .mq-hero .mq-cta, .mq-hero .mq-resume { max-width: 340px; }
  /* animasi Meti di kolom kiri, judul, panduan pasang, dan tombol bertumpuk di kolom kanan */
  .mq-hero > .mq-stage { grid-column: 1; grid-row: 1 / span 6; justify-self: center; }
  .mq-hero > :not(.mq-stage) { grid-column: 2; }
  .mq-hero .mq-install { max-width: 420px; }
}
@media (max-width: 380px) { .mq-feat { grid-template-columns: 1fr; } .mq-feat div { grid-template-columns: auto 1fr; text-align: left; } }

.mq-task { display: flex; align-items: center; gap: 12px; margin: 10px 12px 0; padding: 12px 14px; border-radius: 18px; background: #fff0d9; color: #8a4b00; text-decoration: none; font-weight: 900; box-shadow: 0 4px 0 #f6d9ae; }
.mq-task .em { font-size: 1.5rem; } .mq-task b { flex: 1; } .mq-task:active { transform: translateY(3px); box-shadow: none; }

.mq-foot .mq-keys { gap: 8px; } .mq-foot .mq-key { min-height: 46px; font-size: 1.35rem; border-radius: 12px; box-shadow: 0 3px 0 #cdeee5; }
.mq-foot .mq-keys.extra { margin-bottom: 0; } .mq-foot .mq-keys.extra .mq-key { font-size: 1.1rem; box-shadow: 0 3px 0 #f1d98a; }
.mq-foot .mq-foot-in { gap: 8px; } .mq-foot .mq-btn { min-height: 50px; }
.mq-foot.ok .mq-foot-in, .mq-foot.no .mq-foot-in, .mq-foot.near .mq-foot-in { gap: 10px; }

.mq-foot .mq-keys { width: 100%; }


.mq-bubble { animation: none; }
.mq-big-say .mq-bubble { animation: mq-bpop .45s cubic-bezier(.3, 1.4, .5, 1) .55s both; transform-origin: 50% 100%; }
.mq-hero .mq-bubble { animation: mq-bpop .45s cubic-bezier(.3, 1.4, .5, 1) .55s both; }


.mq-me .av, .mq-resume, .mq-kid, .mq-skrow { text-decoration: none; }
.mq-sec { position: relative; }


/* ---------- Logo bab, peti harta karun, bintang, lencana ---------- */
.mq-glyph { font-weight: 900; font-size: 2.1rem; color: var(--gc); line-height: 1; letter-spacing: -1px; font-style: normal; }
.mq-glyph.s { font-size: 1.3rem; }
.mq-unit .mq-glyph { font-size: 1.7rem; } .mq-unit .mq-glyph.s { font-size: 1.05rem; }
.mq-skrow .mq-glyph { font-size: 1.4rem; } .mq-skrow .mq-glyph.s { font-size: .95rem; }
.mq-n.locked .mq-glyph { color: #9aa3a1; }
.mq-n.chest { transform: none; }
.mq-chest { width: 108px; height: 108px; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
.mq-chest svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 0 rgba(4, 56, 46, .14)); }
.mq-chest.ready svg { animation: mq-bob 1.6s ease-in-out infinite; filter: drop-shadow(0 0 14px rgba(255, 200, 0, .75)) drop-shadow(0 6px 0 rgba(4, 56, 46, .14)); }
.mq-chest:active svg { transform: scale(.94); }
.mq-cstars { position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%); color: #ffc800; font-size: 1.15rem; letter-spacing: 2px; text-shadow: 0 2px 0 #c58f00; white-space: nowrap; pointer-events: none; }
.mq-chestbox { width: 190px; height: 190px; } .mq-chestsvg { width: 100%; height: 100%; overflow: visible; display: block; }
.mq-chestsvg .glow { opacity: .85; } .mq-chestsvg:not(.mq-chestanim) .burst { display: none; }
.mq-rattle { transform-origin: 50% 90%; animation: mq-rattle 1s ease .2s both; }
.mq-chestanim { transform-origin: 50% 90%; animation: mq-rattle .9s ease .1s both; }
@keyframes mq-rattle { 10%, 50%, 90% { transform: rotate(-5deg); } 30%, 70% { transform: rotate(5deg); } 100% { transform: none; } }
.mq-chestanim .lid { transform-origin: 12px 52px; animation: mq-lidopen .7s cubic-bezier(.3, 1.5, .5, 1) 1s both; }
@keyframes mq-lidopen { to { transform: rotate(-52deg); } }
.mq-chestanim .glow { opacity: 0; animation: mq-glowin .6s ease 1.1s both; } @keyframes mq-glowin { to { opacity: .9; } }
.mq-chestanim .bs { opacity: 0; transform-box: fill-box; transform-origin: center; animation: mq-burst 1.3s ease-out both; }
@keyframes mq-burst { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.3) rotate(120deg); } }
.mq-starrow { display: flex; gap: 6px; justify-content: center; margin: 2px 0; }
.mq-bigstar { font-size: 3rem; line-height: 1; color: #dcdcdc; }
.mq-bigstar.on { color: #ffc800; text-shadow: 0 4px 0 #e0a800; animation: mq-starpop .55s cubic-bezier(.3, 1.6, .5, 1) var(--d, .4s) both; }
@keyframes mq-starpop { from { opacity: 0; transform: scale(0) rotate(-50deg); } }
.mq-medal { display: flex; gap: 10px; align-items: center; justify-content: center; }
.mq-medal-i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; box-shadow: 0 2px 0 #bfeee2; }
.mq-medal-i .mq-glyph { font-size: 1.3rem; } .mq-medal-i .mq-glyph.s { font-size: .85rem; }
.mq-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 10px; }
.mq-bd { display: grid; place-items: center; aspect-ratio: 1; border: 0; border-radius: 50%; background: #e9ecec; cursor: pointer; box-shadow: 0 4px 0 #cfd4d2; font-size: 1.5rem; }
.mq-bd span { filter: grayscale(1); opacity: .35; } .mq-bd .mq-glyph { font-size: 1.4rem; } .mq-bd .mq-glyph.s { font-size: .9rem; }
.mq-bd.on { background: var(--mq-bg); box-shadow: 0 4px 0 var(--mq); } .mq-bd.on span { filter: none; opacity: 1; }
.mq-chestbox { margin-top: 44px; }

/* Tombol bacakan hanya tampil jika perangkat punya suara bahasa Indonesia */
html:not(.has-tts) .mq-spk, html:not(.has-tts) .say, html:not(.has-tts) [data-act="say"], html:not(.has-tts) [data-act="lsay"] { display: none !important; }

/* Materi sebagai lembar di atas soal */
.mq-over { position: fixed; inset: 0; z-index: 70; overflow: auto; -webkit-overflow-scrolling: touch; background: var(--bg, #f1fbf8); animation: mq-up .25s ease; }
.mq-over-top { position: sticky; top: 0; z-index: 2; padding: 10px 14px; background: #fff; border-bottom: 2px solid #eef3f2; }
.mq-over-top .mq-btn { width: auto; display: inline-flex; }
.mq-over-body { max-width: 760px; margin: 0 auto; padding: 12px 14px 130px; }
.mq-over .mq-foot { z-index: 3; }
body.mq-noscroll { overflow: hidden; }
.mq-fbody { max-height: 46vh; }
.mq-how button.link { display: inline-block; margin-top: 4px; padding: 6px 0; font-size: 1rem; color: var(--mq-dd); text-decoration: underline; }

/* Layar hasil di HP pendek: perkecil peti dan bintang agar semua muat di atas tombol */
@media (max-height: 700px) {
  .mq-result { gap: 4px; padding-top: 8px; }
  .mq-chestbox { width: 116px; height: 116px; margin-top: 14px; }
  .mq-bigstar { font-size: 2rem; }
  .mq-rtitle { font-size: 1.35rem; margin-top: 2px; }
  .mq-rsub { font-size: .85rem; margin-bottom: 6px; }
  .mq-stats3 { margin: 2px 0; }
  .mq-stat b { padding: 10px 2px 8px; font-size: 1.45rem; }
  .mq-unlock { margin-top: 6px; padding: 7px 12px; font-size: .85rem; }
}

/* ---------- Main: daftar permainan bergambar, kunci kelas, dan layar main ---------- */
.mq-ghead { display: flex; align-items: center; gap: 8px; padding: 12px 14px 0; }
.mq-gsay { flex: 1; display: flex; align-items: flex-end; gap: 4px; min-width: 0; }
.mq-gsay .mq-bubble { flex: 0 1 auto; margin-bottom: 18px; padding: 10px 14px; font-size: 1.15rem; font-weight: 900; }
.mq-gchip { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 6px 12px; border: 2px solid #ffe7a3; border-bottom-width: 4px; border-radius: 14px; background: #fffaf0; font: inherit; font-weight: 900; font-size: 1.1rem; color: #c48a00; cursor: pointer; }
.gst { width: 22px; height: 22px; flex: none; fill: #e5e5e5; }
.gst.on { fill: var(--mq-gold); stroke: var(--mq-gold-d); stroke-width: 1.2; stroke-linejoin: round; }
.mq-ggs { display: flex; justify-content: space-between; gap: 6px; margin: 10px 14px 16px; }
.mq-gg { position: relative; flex: 1; max-width: 58px; aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 2px solid #d9efe9; border-bottom-width: 5px; border-radius: 50%; background: #fff; font: inherit; font-weight: 900; font-size: 1.3rem; color: var(--mq-dd); cursor: pointer; }
.mq-gg.on { background: var(--mq); border-color: var(--mq-d); color: #fff; }
.mq-gg.lock { background: #f2f4f3; border-color: #dfe3e2; color: #b4bcba; }
.mq-gg.lock.on { background: #e4e8e7; border-color: #b4bcba; color: #8c9694; }
.mq-gg i { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #9aa7a4; color: #fff; }
.mq-gg i svg { width: 13px; height: 13px; }
.mq-gg:active { transform: translateY(3px); border-bottom-width: 2px; }
.mq-ggrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 14px; }
.mq-gt { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px 12px; border: 2px solid color-mix(in srgb, var(--c) 30%, #fff); border-bottom-width: 6px; border-radius: 22px; background: var(--bg); color: var(--mq-ink); text-decoration: none; text-align: center; }
.mq-gt:active { transform: translateY(4px); border-bottom-width: 2px; }
.mq-gt .art { display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; background: #fff; }
.mq-gt .art svg { width: 86%; height: auto; }
.mq-gt b { display: flex; align-items: center; min-height: 2.4em; font-weight: 900; font-size: .98rem; line-height: 1.2; }
.mq-gt .st { display: flex; gap: 2px; }
.mq-gt .st .gst { width: 20px; height: 20px; }
.mq-gt .new { position: absolute; top: -8px; right: -4px; z-index: 1; padding: 3px 9px; border-radius: 99px; background: var(--mq-bad); color: #fff; font-size: .72rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 2px 0 #d63c42; }
.mq-glock { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 14px; padding: 18px 18px 22px; border: 2px dashed #d4dbd9; border-radius: 24px; text-align: center; }
.mq-glock .lk { display: grid; place-items: center; width: 54px; height: 54px; margin-top: -18px; border-radius: 50%; background: #9aa7a4; color: #fff; box-shadow: 0 4px 0 #7f8b88; }
.mq-glock .lk svg { width: 28px; height: 28px; }
.mq-glock h2 { margin: 6px 0 0; font-size: 1.5rem; }
.mq-glock p { margin: 0; font-weight: 700; color: #6a7f7a; }
.mq-glock small { display: inline-flex; align-items: center; gap: 4px; font-weight: 900; color: #6a7f7a; }
.mq-glock small .gst { width: 18px; height: 18px; }
.mq-glock .mq-btn { margin-top: 10px; }
.mq-glbar { width: 100%; height: 16px; margin-top: 8px; border-radius: 99px; background: #e7e7e7; overflow: hidden; }
.mq-glbar i { display: block; height: 100%; min-width: 16px; border-radius: 99px; background: var(--mq-gold); }

.mq-gtitle { flex: 1; text-align: center; font-weight: 900; font-size: 1.05rem; color: var(--mq-ink); }
.mq-gintro { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 6px; }
.mq-gart { display: grid; place-items: center; width: 230px; max-width: 70vw; aspect-ratio: 1; border-radius: 50%; background: var(--bg); border: 4px solid color-mix(in srgb, var(--c) 25%, #fff); }
.mq-gart svg { width: 84%; height: auto; animation: mq-bob 3.2s ease-in-out infinite; }
.mq-ghow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.mq-ghow div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px; border: 2px solid var(--mq-line); border-radius: 18px; font-weight: 800; font-size: .88rem; line-height: 1.2; text-align: center; color: #4d625d; }
.mq-ghow .e { font-size: 1.8rem; line-height: 1; font-weight: 900; color: var(--c); }
.mq-goal { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.mq-goal div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border-radius: 16px; background: #fffaf0; }
.mq-goal span { display: flex; }
.mq-goal .gst { width: 18px; height: 18px; }
.mq-goal b { font-size: 1.1rem; color: #8a6a00; }
.mq-gmore { width: 100%; color: #6a7f7a; font-weight: 700; font-size: .9rem; }
.mq-gmore summary { cursor: pointer; text-align: center; }
.mq-gplay .ghud { margin-top: 4px; }
.mq-gend { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 12px; text-align: center; }
.mq-gend h2 { margin: 4px 0 0; font-size: 1.7rem; }
.mq-gstars { display: flex; gap: 6px; }
.mq-gstars .gst { width: 52px; height: 52px; }
.mq-gstars .gst.on { animation: mq-pop .6s cubic-bezier(.3, 1.3, .5, 1) both; }
.mq-gstars .gst:nth-child(2) { animation-delay: .15s; }
.mq-gstars .gst:nth-child(3) { animation-delay: .3s; }
.mq-gpts { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: 6px; }
.mq-gpts b { font-size: 2.6rem; font-weight: 900; color: var(--c); }
.mq-gpts small { font-weight: 900; color: #6a7f7a; }
.mq-gpts .rec { flex-basis: 100%; font-weight: 900; color: #e08a00; }

/* Putaran 10 soal: garis bilangan dan juring */
.gr-head { display: flex; padding: 6px 0 4px; }
.gr-head .mq-prog { flex: 1; }
.gr-stage { display: flex; flex-direction: column; align-items: center; gap: 22px; padding: 22px 0 10px; }
.gr-q { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; font-size: 2.3rem; font-weight: 900; color: #3c4b48; }
.gr-q .gfr { font-size: .8em; }
.gr-box { display: inline-grid; place-items: center; min-width: 74px; height: 74px; padding: 0 10px; border: 3px solid #84d8ff; border-radius: 14px; background: #ddf4ff; color: var(--mq-blue); font-size: 2rem; }
.gr-box.ok { border-color: var(--mq-d); background: var(--mq-ok-bg); color: var(--mq-dd); }
.gr-box.no { border-color: var(--mq-bad); background: var(--mq-bad-bg); color: #d63c42; }
.gl { width: 100%; padding: 40px 24px 76px; touch-action: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.gl-track { position: relative; height: 6px; border-radius: 6px; background: #a5e070; }
.gl-t { font-style: normal; position: absolute; top: 50%; width: 4px; height: 20px; margin-left: -2px; transform: translateY(-50%); border-radius: 4px; background: #a5e070; }
.gl-t:not(.big) { height: 12px; }
.gl-t b { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font-size: 1.05rem; font-weight: 900; color: #8fd45c; white-space: nowrap; visibility: hidden; }
.gl-t.big b, .gl-t.on b { visibility: visible; }
.gl-t.on { background: #3a8c00; }
.gl-t.on b { color: #3a8c00; font-size: 1.3rem; }
.gl-mark { position: absolute; top: 24px; left: 0; width: 52px; height: 56px; margin-left: -26px; padding: 0; border: 0; background: none; cursor: grab; transition: left .12s ease; }
.gl-mark svg { width: 100%; height: 100%; fill: #58cc02; filter: drop-shadow(0 4px 0 #46a302); }
.gl-mark:focus-visible { outline: 3px solid var(--mq-blue); outline-offset: 2px; border-radius: 10px; }
.gl.ok .gl-mark svg { fill: var(--mq-d); filter: drop-shadow(0 4px 0 var(--mq-dd)); }
.gl.no .gl-mark svg { fill: var(--mq-bad); filter: drop-shadow(0 4px 0 #d63c42); }
.gl-ans { position: absolute; top: -9px; width: 24px; height: 24px; margin-left: -12px; border: 4px solid #fff; border-radius: 50%; background: var(--mq-d); box-shadow: 0 0 0 3px var(--mq-d); animation: mq-pop .5s both; }
.gl-nudge { display: flex; gap: 14px; margin-top: -24px; }
.gl-nudge button { width: 56px; height: 48px; border: 2px solid #d9efe9; border-bottom-width: 5px; border-radius: 14px; background: #fff; font: inherit; font-size: 1.2rem; color: #58a700; cursor: pointer; }
.gl-nudge button:active { transform: translateY(3px); border-bottom-width: 2px; }
.jr-q { gap: 14px; }
.jr-ask { font-size: 1.5rem; color: #6a7f7a; }
.jr-frac { display: inline-grid; place-items: center; min-width: 74px; height: 74px; padding: 0 12px; border-radius: 16px; background: #fff0e0; color: #e07000; }
.jr-wrap { align-self: stretch; text-align: center; }
.jr { display: block; margin: 0 auto; }
.jr-pie { width: min(300px, 82vw); }
.jr-bar { width: 100%; }
.jr-p { fill: #ffe2bf; stroke: #fff; stroke-width: 3; cursor: pointer; transition: fill .12s; }
.jr-bar .jr-p { stroke-width: 4; }
.jr-p.on { fill: #ff8a00; }
.jr.ok .jr-p.on { fill: var(--mq-d); }
.jr.no .jr-p.on { fill: var(--mq-bad); }
.jr-count { font-weight: 900; font-size: 1.2rem; color: #6a7f7a; }
.jr-count b { font-size: 1.5rem; color: #e07000; }
@media (max-width: 380px) { .gr-q { font-size: 1.9rem; } .mq-gt b { font-size: .9rem; } .gl-t b { font-size: .9rem; } }

/* Jam Ajaib */
.jm-q { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.jm-ask { font-size: 1.1rem; font-weight: 800; color: #6a7f7a; }
.jm-time { font-size: 2rem; font-weight: 900; line-height: 1.15; color: #0369a1; }
.jm-q small { font-size: 1rem; font-weight: 800; color: #0ea5e9; }
.jm-face { display: block; width: min(280px, 78vw); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; touch-action: none; cursor: grab; }
.jm-face:focus-visible { outline: 3px solid var(--mq-blue); outline-offset: 4px; }
.jm-face svg { display: block; width: 100%; height: 100%; }
.jm-rim { fill: #fff; stroke: #0ea5e9; stroke-width: 8; }
.jm-tk { stroke: #bae6fd; stroke-width: 2; stroke-linecap: round; } .jm-tk.big { stroke: #38bdf8; stroke-width: 4; }
.jm-n { font: 900 22px Nunito, sans-serif; fill: #0c4a6e; text-anchor: middle; }
.jm-h, .jm-m { stroke-linecap: round; }
.jm-now .jm-h { stroke: #0c4a6e; stroke-width: 9; } .jm-now .jm-m { stroke: #0ea5e9; stroke-width: 6; } .jm-now .jm-knob { fill: #0ea5e9; stroke: #fff; stroke-width: 3; }
.jm-ans { opacity: .75; } .jm-ans .jm-h { stroke: var(--mq-d); stroke-width: 9; } .jm-ans .jm-m { stroke: var(--mq-d); stroke-width: 6; } .jm-ans .jm-knob { fill: var(--mq-d); }
.jm-pin { fill: #ffb020; stroke: #fff; stroke-width: 3; }
.jm-face.ok .jm-rim { stroke: var(--mq-d); } .jm-face.no .jm-rim { stroke: var(--mq-bad); }
.jm-face.no .jm-now .jm-h, .jm-face.no .jm-now .jm-m { stroke: var(--mq-bad); } .jm-face.no .jm-now .jm-knob { fill: var(--mq-bad); }
.jm-btns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; max-width: 360px; }
.jm-btns button { min-height: 48px; padding: 0 4px; border: 2px solid #cdeefc; border-bottom-width: 5px; border-radius: 14px; background: #fff; font: inherit; font-weight: 900; font-size: 1rem; color: #0369a1; cursor: pointer; }
.jm-btns button:active { transform: translateY(3px); border-bottom-width: 2px; }

/* Ayo Belanja */
.wu-shop { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 12px; border: 2px solid #c8ecd3; border-radius: 20px; background: #f3fcf5; text-align: center; }
.wu-shop small { font-weight: 800; color: #4d625d; }
.wu-tags { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; }
.wu-it { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 14px; background: #fff; font-weight: 900; font-size: 1.15rem; color: #15803d; box-shadow: 0 3px 0 #c8ecd3; }
.wu-it .em { font-size: 1.8rem; } .wu-it.big { font-size: 1.6rem; } .wu-it.big .em { font-size: 2.6rem; }
.wu-plus { font-size: 1.3rem; color: #6a7f7a; }
.wu-pay { font-weight: 800; color: #4d625d; } .wu-pay b { color: #15803d; }
.wu-ask { margin-top: -8px; font-size: 1.15rem; font-weight: 900; color: var(--mq-ink); }
.wu-tray { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 6px; width: 100%; min-height: 76px; padding: 10px; border: 3px dashed #c8ecd3; border-radius: 18px; }
.wu-tray.ok { border-style: solid; border-color: var(--mq-d); background: var(--mq-ok-bg); } .wu-tray.no { border-style: solid; border-color: var(--mq-bad); background: var(--mq-bad-bg); }
.wu-empty { align-self: center; font-weight: 700; color: #9aa7a4; }
.wu-sum { display: flex; align-items: center; gap: 10px; margin-top: -10px; font-weight: 800; color: #6a7f7a; }
.wu-sum b { font-size: 1.6rem; font-weight: 900; color: #15803d; }
.wu-del { width: 52px; height: 44px; border: 2px solid #f3c7c9; border-bottom-width: 5px; border-radius: 14px; background: #fff; font: inherit; font-size: 1.3rem; color: #d63c42; cursor: pointer; }
.wu-del:active { transform: translateY(3px); border-bottom-width: 2px; }
.wu-pal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; width: 100%; justify-items: center; align-items: center; }
.wu-m { padding: 0; border: 0; font: inherit; cursor: pointer; color: #222; }
.wu-m:active { transform: translateY(3px) scale(.96); }
.wu-pal .note { width: 100%; max-width: 104px; height: 54px; } .wu-pal .note b { font-size: 1.05rem; }
.wu-tray .coin { width: 44px; height: 44px; font-size: .8rem; } .wu-tray .c1000 { width: 46px; height: 46px; }
.wu-tray .note { min-height: 44px; }
.wu-tray .note { width: 64px; height: 36px; border-radius: 6px; } .wu-tray .note b { font-size: .78rem; } .wu-tray .note small { font-size: .4rem; letter-spacing: 1px; }

/* ---------- Delapan permainan 10 soal: pilihan jawaban (gc-), pengatur − / + (gs-), model batang (mb-), timbangan (tb-),
 * koordinat (pt-), bangun bilangan (bb-), bangun datar dan jaring-jaring (bd-), alat ukur (uk-), grafik (gf-), pola (pl-) ---------- */
.gc-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
.gc-opts.wide { grid-template-columns: 1fr; }
.gc-opts.pic .gc-o { font-size: 2rem; }
.gc-o { min-height: 56px; padding: 10px 8px; border: 2px solid var(--mq-line); border-bottom-width: 5px; border-radius: 16px; background: #fff; font: inherit; font-weight: 900; font-size: 1.25rem; color: var(--mq-ink); cursor: pointer; touch-action: manipulation; }
.gc-o .gfr { font-size: .8em; }
.gc-o[aria-pressed="true"] { border-color: #84d8ff; background: #ddf4ff; color: var(--mq-blue); }
.gc-o.right { border-color: var(--mq-d); background: var(--mq-ok-bg); color: var(--mq-dd); }
.gc-o.wrong { border-color: var(--mq-bad); background: var(--mq-bad-bg); color: #d63c42; }
.gc-o:disabled { cursor: default; }
.gc-o:disabled:not(.right):not(.wrong) { opacity: .55; }
.gc-o:focus-visible, .gs-val:focus-visible, .mb-bar:focus-visible, .pt-grid:focus-visible, .bb-col:focus-visible, .bd-i:focus-visible, .bd-f:focus-visible { outline: 3px solid var(--mq-blue); outline-offset: 2px; }

.gs-step { display: grid; grid-template-columns: repeat(var(--n), 1fr); gap: 8px; width: 100%; max-width: 380px; }
.gs-val { grid-column: 1 / -1; display: block; padding: 8px; border: 3px solid #84d8ff; border-radius: 14px; background: #ddf4ff; text-align: center; font-size: 1.4rem; font-weight: 800; color: #0c4a6e; }
.gs-val b { font-size: 1.7rem; font-weight: 900; color: var(--mq-blue); }
.gs-step button { min-height: 48px; padding: 0 2px; border: 2px solid #d9efe9; border-bottom-width: 5px; border-radius: 14px; background: #fff; font: inherit; font-weight: 900; font-size: 1rem; color: var(--c, #0369a1); cursor: pointer; touch-action: manipulation; }
.gs-step button:active, .mb-adj button:active, .pt-pad button:active, .bb-pal button:active { transform: translateY(3px); border-bottom-width: 2px; }

.mb-story, .bb-ask, .bd-ask, .pt-ask, .uk-ask, .gf-q, .pl-ask, .pl-q { width: 100%; text-align: center; font-size: 1.15rem; font-weight: 800; line-height: 1.45; color: var(--mq-ink); }
.mb-story { padding: 12px 14px; border-radius: 18px; background: var(--bg); text-align: left; }
.mb-rows { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.mb-row { display: flex; align-items: flex-end; gap: 8px; }
.mb-name { flex: 0 0 72px; padding-bottom: 6px; font-weight: 900; font-size: .9rem; color: #6a7f7a; text-align: right; overflow-wrap: anywhere; }
.mb-track { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: flex-end; min-height: 52px; touch-action: none; }
.mb-row.adj .mb-track { cursor: ew-resize; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), #eadff0 calc(10% - 1px) 10%) bottom / 100% 34px no-repeat; border-radius: 8px; }
.mb-lbl { display: block; margin-bottom: 2px; text-align: center; font-weight: 900; font-size: .95rem; color: var(--c); white-space: nowrap; border-bottom: 2px solid color-mix(in srgb, var(--c) 45%, #fff); transition: width .12s; }
.mb-bar { display: flex; height: 34px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: none; transition: width .12s; }
.mb-bar i { flex: 1; margin-right: 2px; border-radius: 4px; background: #f0abfc; }
.mb-row.adj .mb-bar i { background: var(--c); }
.mb-row.adj.ok .mb-bar i { background: var(--mq-d); }
.mb-adj { display: flex; align-items: center; gap: 14px; margin-top: -8px; font-weight: 900; color: #6a7f7a; }
.mb-adj button { width: 56px; height: 48px; border: 2px solid #f5d0fe; border-bottom-width: 5px; border-radius: 14px; background: #fff; font: inherit; font-size: 1.5rem; font-weight: 900; color: var(--c); cursor: pointer; }
.mb-tip { margin: -10px 0 0; text-align: center; font-weight: 800; color: #6a7f7a; }

.tb-eq { font-size: 1.9rem; }
.tb { position: relative; width: 100%; max-width: 360px; height: 200px; }
.tb-post { position: absolute; left: 50%; bottom: 0; width: 76px; height: 96px; margin-left: -38px; background: #92400e; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.tb-beam { position: absolute; left: 4%; right: 4%; top: 100px; height: 10px; margin-top: -5px; border-radius: 6px; background: #b45309; transform: rotate(calc(var(--t) * 9deg)); transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.tb-pan { position: absolute; bottom: 100px; width: 44%; min-height: 40px; display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: center; gap: 4px; padding: 4px 4px 6px; border-bottom: 6px solid #d97706; border-radius: 0 0 10px 10px; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1); }
.tb-pan.l { left: 2%; transform: translateY(calc(var(--t) * -24px)); }
.tb-pan.r { right: 2%; transform: translateY(calc(var(--t) * 24px)); }
.tb-c { display: inline-grid; place-items: center; min-width: 32px; height: 30px; padding: 0 6px; border-radius: 8px; background: #fde68a; box-shadow: 0 3px 0 #d6a33b; font-style: normal; font-weight: 900; font-size: .9rem; color: #78350f; white-space: nowrap; }
.tb-c.x { background: #fb923c; box-shadow: 0 3px 0 #c2410c; color: #fff; font-size: 1.05rem; }
.tb-c.neg { background: #fecaca; box-shadow: 0 3px 0 #ef4444; color: #b91c1c; }
.tb.ok .tb-beam { background: var(--mq-d); } .tb.no .tb-beam { background: var(--mq-bad); }
.tb-tip { margin: -14px 0 0; text-align: center; font-weight: 700; font-size: .9rem; color: #6a7f7a; }

.pt-grid { display: block; width: min(340px, 100%); padding: 0; border: 0; border-radius: 14px; background: #fff; touch-action: none; cursor: crosshair; }
.pt-grid svg { display: block; width: 100%; height: auto; }
.pt-l { stroke: #d6e4e1; stroke-width: 1.5; } .pt-l.ax { stroke: #4d625d; stroke-width: 2.5; }
.pt-n { font: 800 11px Nunito, sans-serif; fill: #6a7f7a; text-anchor: middle; }
.pt-ax { font: 900 13px Nunito, sans-serif; fill: #0f766e; font-style: italic; }
.pt-p { fill: #0f766e; } .pt-lb { font: 900 15px Nunito, sans-serif; fill: #0f766e; }
.pt-seg { stroke: #0f766e; stroke-width: 3; stroke-linecap: round; }
.pt-gem { font-size: 22px; text-anchor: middle; }
.pt-mk { fill: rgba(225, 29, 72, .25); stroke: #e11d48; stroke-width: 4; }
.pt-guide { stroke: #e11d48; stroke-width: 2; stroke-dasharray: 4 4; fill: none; }
.pt-mk.ans { fill: rgba(25, 183, 150, .25); stroke: var(--mq-d); } .pt-guide.ans { stroke: var(--mq-d); }
.pt-grid.ok .pt-mk { stroke: var(--mq-d); fill: rgba(25, 183, 150, .3); } .pt-grid.ok .pt-guide { stroke: var(--mq-d); }
.pt-pad { display: grid; grid-template-columns: repeat(4, 56px); gap: 10px; margin-top: -10px; }
.pt-pad button { height: 48px; border: 2px solid #c7ebe5; border-bottom-width: 5px; border-radius: 14px; background: #fff; font: inherit; font-size: 1.15rem; color: #0f766e; cursor: pointer; }

.bb-tray { display: flex; gap: 8px; width: 100%; padding: 8px; border: 3px dashed #c7d7fe; border-radius: 18px; }
.bb-tray.ok { border-style: solid; border-color: var(--mq-d); background: var(--mq-ok-bg); } .bb-tray.no { border-style: solid; border-color: var(--mq-bad); background: var(--mq-bad-bg); }
.bb-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 120px; padding: 6px 2px; border: 0; border-radius: 12px; background: #f5f8ff; font: inherit; cursor: pointer; }
.bb-col small { font-weight: 800; color: #4b5d8a; font-size: .8rem; } .bb-col small b { font-size: 1.15rem; color: #1d4ed8; }
.bb-stack { flex: 1; display: flex; flex-wrap: wrap; align-content: flex-end; justify-content: center; gap: 3px; width: 100%; }
.bb-b { display: block; flex: none; font-style: normal; border: 1.5px solid rgba(0, 0, 0, .35); }
.bb-s { width: 12px; height: 12px; border-radius: 2px; background: #fde047; }
.bb-p { width: 12px; height: 62px; border-radius: 2px; background: #86efac repeating-linear-gradient(0deg, transparent 0 5px, rgba(0, 0, 0, .25) 5px 6.2px); }
.bb-r { width: 46px; height: 46px; border-radius: 3px; background-color: #93c5fd; background-image: repeating-linear-gradient(0deg, transparent 0 3.6px, rgba(0, 0, 0, .2) 3.6px 4.6px), repeating-linear-gradient(90deg, transparent 0 3.6px, rgba(0, 0, 0, .2) 3.6px 4.6px); }
.bb-k { width: 46px; height: 46px; border-radius: 3px; background: #c4b5fd; box-shadow: 4px -4px 0 #a78bfa, 8px -8px 0 #8b5cf6; margin: 8px 8px 0 0; }
.bb-stack .bb-r, .bb-stack .bb-k { width: 28px; height: 28px; background-size: auto; } .bb-stack .bb-r { background-image: repeating-linear-gradient(0deg, transparent 0 1.8px, rgba(0, 0, 0, .2) 1.8px 2.8px), repeating-linear-gradient(90deg, transparent 0 1.8px, rgba(0, 0, 0, .2) 1.8px 2.8px); }
.bb-stack .bb-k { box-shadow: 3px -3px 0 #a78bfa, 6px -6px 0 #8b5cf6; margin: 6px 6px 0 0; }
.bb-sum { margin-top: -10px; font-weight: 800; color: #4b5d8a; } .bb-sum b { font-size: 1.6rem; color: #1d4ed8; }
.bb-pal { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; width: 100%; }
.bb-pal button { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; min-height: 96px; padding: 8px 2px; border: 2px solid #c7d7fe; border-bottom-width: 5px; border-radius: 16px; background: #fff; font: inherit; font-weight: 900; font-size: .8rem; color: #1d4ed8; cursor: pointer; touch-action: manipulation; }

.bd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 360px; }
.bd-grid.nets { grid-template-columns: 1fr 1fr; }
.bd-i { aspect-ratio: 1; padding: 8px; border: 3px solid var(--mq-line); border-radius: 18px; background: #fff; cursor: pointer; touch-action: manipulation; }
.bd-i svg { display: block; width: 100%; height: 100%; }
.bd-i[aria-pressed="true"] { border-color: #84d8ff; background: #ddf4ff; }
.bd-i.right { border-color: var(--mq-d); background: var(--mq-ok-bg); } .bd-i.wrong { border-color: var(--mq-bad); background: var(--mq-bad-bg); }
.bd-i.miss { border-color: var(--mq-d); border-style: dashed; } .bd-i.off { opacity: .45; }
.bd-net { display: grid; grid-template-columns: repeat(var(--w), 52px); grid-template-rows: repeat(var(--h), 52px); gap: 3px; }
.bd-f { display: grid; place-items: center; border: 3px solid #b45309; border-radius: 6px; background: #fde68a; font: inherit; font-size: 1.6rem; color: #b45309; cursor: pointer; }
.bd-f.star { cursor: default; background: #fbbf24; }
.bd-f[aria-pressed="true"] { background: #ddf4ff; border-color: var(--mq-blue); }
.bd-f.right { background: var(--mq-ok-bg); border-color: var(--mq-d); } .bd-f.wrong { background: var(--mq-bad-bg); border-color: var(--mq-bad); }

.uk-ask small { display: block; font-size: .85rem; color: #6a7f7a; }
.uk-fig { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; }
.uk-svg { display: block; width: 100%; max-width: 380px; height: auto; }
.uk-svg.cup, .uk-svg.thermo { max-width: 170px; } .uk-svg.dial { max-width: 230px; } .uk-svg.tebak { max-width: 260px; }
.uk-rl { fill: #fef3c7; stroke: #d97706; stroke-width: 2; }
.uk-tk { stroke: #44403c; stroke-width: 1.4; }
.uk-n { font: 900 13px Nunito, sans-serif; fill: #44403c; text-anchor: middle; } .uk-n.l { text-anchor: start; } .uk-n.sm { font-size: 11px; }
.uk-u { font: 900 13px Nunito, sans-serif; fill: #4f46e5; }
.uk-n.halo { paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; }
.uk-gd { stroke: #4f46e5; stroke-width: 1.5; stroke-dasharray: 3 3; }
.uk-cup { fill: none; stroke: #64748b; stroke-width: 4; stroke-linejoin: round; }
.uk-nd { stroke: #e11d48; stroke-width: 4; stroke-linecap: round; }
.uk-pro { fill: rgba(199, 210, 254, .45); stroke: #6366f1; stroke-width: 2; }
.uk-ray { stroke: #1e1b4b; stroke-width: 4; stroke-linecap: round; }
.uk-arc { fill: none; stroke: #f59e0b; stroke-width: 3; }
.uk-real { margin-top: 4px; padding: 4px 14px; border-radius: 999px; background: var(--mq-ok-bg); font-weight: 800; color: var(--mq-dd); }

.gf-title { font-weight: 900; color: var(--c); text-align: center; }
.gf-fig { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gf-svg { display: block; width: 100%; max-width: 380px; height: auto; } .gf-svg.pie { max-width: 220px; } .gf-svg.grid { max-width: 320px; }
.gf-l { stroke: #e2ecea; stroke-width: 1; } .gf-ax { stroke: #4d625d; stroke-width: 2; }
.gf-t { font: 800 11px Nunito, sans-serif; fill: #6a7f7a; }
.gf-c { font: 800 18px Nunito, sans-serif; text-anchor: middle; } .gf-c.sm { font-size: 10px; fill: #4d625d; }
.gf-pl { fill: none; stroke: #0891b2; stroke-width: 3; stroke-linejoin: round; } .gf-dot { fill: #0891b2; stroke: #fff; stroke-width: 2; }
.gf-ln { stroke: #0891b2; stroke-width: 3; }
.gf-pe { font-size: 18px; text-anchor: middle; } .gf-pp { font: 900 13px Nunito, sans-serif; text-anchor: middle; fill: #04382e; }
.gf-leg { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-weight: 700; font-size: .85rem; color: #4d625d; }
.gf-leg i { display: inline-block; width: 10px; height: 10px; margin-right: 4px; border-radius: 3px; }
.gf-pk { width: 100%; max-width: 380px; border: 2px solid #cdeff6; border-radius: 16px; overflow: hidden; }
.gf-pr { display: flex; align-items: center; min-height: 40px; border-bottom: 2px solid #e3f7fb; }
.gf-pn { flex: 0 0 92px; padding: 0 8px; font-weight: 800; font-size: .9rem; color: #155e75; border-right: 2px solid #e3f7fb; }
.gf-pi { padding: 0 6px; font-size: 1.25rem; letter-spacing: 1px; line-height: 1.3; overflow-wrap: anywhere; }
.gf-key { padding: 6px 10px; background: #e3f7fb; text-align: right; font-weight: 900; font-size: .85rem; color: #155e75; }

.pl-seq { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
.pl-c { display: inline-grid; place-items: center; min-width: 54px; height: 54px; padding: 0 8px; border-radius: 14px; background: var(--bg); font-weight: 900; font-size: 1.35rem; color: #3f6212; }
.pl-seq.pic .pl-c { font-size: 1.8rem; padding: 0 4px; }
.pl-c.dots { background: none; min-width: 24px; }
.pl-blank { display: inline-grid; place-items: center; min-width: 54px; height: 54px; padding: 0 8px; border: 3px dashed #84cc16; border-radius: 14px; background: #fff; color: #9aa7a4; font-weight: 900; }
.pl-blank.on { border-style: solid; border-color: #84d8ff; background: #ddf4ff; color: var(--mq-blue); }
.pl-q .pl-blank { margin-left: 4px; vertical-align: middle; }
@media (max-width: 380px) { .gc-o { font-size: 1.1rem; } .pl-c, .pl-blank { min-width: 46px; height: 48px; font-size: 1.15rem; } .tb-eq { font-size: 1.5rem; } .bd-net { grid-template-columns: repeat(var(--w), 46px); grid-template-rows: repeat(var(--h), 46px); } .mb-name { flex-basis: 60px; } }

/* Tombol "Ajukan akun asli" di strip mode coba: emas, 3D, berkilau */
.mq-demo { padding: 8px 12px; }
.mq-real { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ffd23f, #ffb020); color: #5a3d00; font: inherit; font-weight: 900; font-size: .86rem; white-space: nowrap; box-shadow: 0 3px 0 #d98e00; cursor: pointer; animation: mq-realbob 2.6s ease-in-out infinite; }
.mq-real::after { content: ''; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .75), transparent); transform: skewX(-20deg); animation: mq-shine 3.2s ease-in-out infinite; }
.mq-real .sp { font-size: 1rem; }
.mq-real:active { transform: translateY(3px); box-shadow: 0 0 0 #d98e00; }
.mq-real:focus-visible { outline: 3px solid var(--mq-blue); outline-offset: 2px; }
@keyframes mq-shine { 0%, 55% { left: -40%; } 100% { left: 130%; } }
@keyframes mq-realbob { 0%, 100% { transform: none; } 50% { transform: translateY(-2px); } }
.demobar .mq-real { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .mq-real, .mq-real::after { animation: none; } }

/* Pesan singkat (mis. "🎁 Hadiah baru terbuka!") di layar siswa: muncul di atas, di bawah bar progres,
 * supaya tidak menutupi tombol Periksa/Lanjutkan di bawah; tembus klik agar tidak menghalangi apa pun. */
.toast { pointer-events: none; }
body.mq-body .toast { white-space: nowrap; top: calc(66px + env(safe-area-inset-top)); bottom: auto; padding: 12px 20px; border-radius: 999px; background: #fff; color: var(--mq-ink); border: 2px solid #ffe08a; box-shadow: 0 6px 18px rgba(4, 56, 46, .16); font-weight: 900; animation: mq-toast .35s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes mq-toast { from { transform: translate(-50%, -16px); opacity: 0; } }

/* Peta belajar: kartu bab berikutnya (abu-abu), bab sesudahnya disembunyikan */
.mq-next { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 26px 14px 10px; padding: 22px 16px 18px; border-top: 2px solid #eef3f2; text-align: center; color: #8c9694; }
.mq-next .tag { padding: 4px 12px; border-radius: 10px; background: #eef1f0; font-size: .8rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #9aa7a4; }
.mq-next .em { display: grid; place-items: center; width: 64px; height: 64px; margin-top: 6px; border-radius: 50%; background: #eef1f0; font-size: 1.9rem; filter: grayscale(1); opacity: .7; }
.mq-next b { font-size: 1.35rem; font-weight: 900; color: #6b7573; }
.mq-next small { font-weight: 800; }
.mq-next .mq-btn { width: auto; min-width: 180px; margin-top: 8px; color: #8c9694; border-color: #dfe3e2; box-shadow: 0 4px 0 #dfe3e2; }
.mq-gex { width: 100%; padding: 12px 14px; border-radius: 18px; background: var(--bg); text-align: center; }
.mq-gex > small { display: block; margin-bottom: 6px; font-weight: 900; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--c); }
.mq-gex .row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.mq-gex i { display: grid; place-items: center; min-width: 54px; height: 46px; padding: 0 8px; border: 2px solid #fff; border-radius: 10px; font-style: normal; font-weight: 900; font-size: 1.2rem; color: var(--mq-ink); box-shadow: 0 3px 0 rgba(0, 0, 0, .08); }
.mq-gex .op { font-size: 1.4rem; font-weight: 900; color: var(--c); } .mq-gex .poof { font-size: 2rem; }
.mq-gex p { margin: 8px 0 0; font-weight: 700; font-size: .92rem; color: #4d625d; }

/* Pengaturan siswa */
.mq-me { position: relative; }
.mq-gear { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #6a7f7a; }
.mq-gear svg { width: 28px; height: 28px; } .mq-gear:active { background: #eef3f2; }
.mq-settop { border-bottom: 2px solid #eef3f2; max-width: none; }
.mq-settop h1 { flex: 1; margin: 0; text-align: center; font-size: 1.2rem; font-weight: 900; }
.mq-sethead { margin: 20px 16px 0; font-size: .82rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #9aa7a4; }
.mq-list .t small { display: block; font-size: .82rem; font-weight: 700; color: #8c9694; }
.mq-school { display: flex; align-items: flex-end; justify-content: center; gap: 6px; margin: 0 0 4px; padding: 22px 16px 10px; background: linear-gradient(#e3f3ff, #fff); }
.mq-school .a1, .mq-school .a2 { display: grid; place-items: center; width: 74px; height: 74px; margin-bottom: 8px; border-radius: 50%; background: #fff; font-size: 2.8rem; line-height: 1; box-shadow: 0 4px 0 #cfe6f7; }
.mq-classnow { margin: 4px 0; } .mq-classnow b { display: block; font-size: 1.3rem; } .mq-classnow small { font-weight: 800; color: #6a7f7a; }
.mq-join form { display: grid; gap: 10px; margin-top: 8px; }
.mq-fbform { display: grid; gap: 10px; }
.mq-fbform textarea { width: 100%; padding: 12px; border: 2px solid var(--mq-line); border-radius: 14px; font: inherit; font-weight: 700; resize: vertical; }
.mq-fbform textarea:focus { outline: none; border-color: var(--mq); }

/* Kertas coret (soal perkalian dan pembagian) */
.mq-coretbtn { font-size: 1.3rem; } .mq-coretbtn.on { background: #fff3c4; }
.mq-coret { position: fixed; left: 0; right: 0; z-index: 25; max-width: 520px; height: min(42vh, 360px); margin: 0 auto; display: flex; flex-direction: column; border: 2px solid #f1d98a; border-bottom: 0; border-radius: 20px 20px 0 0; background: #fffdf3; box-shadow: 0 -8px 24px rgba(4, 56, 46, .14); animation: mq-up .25s ease; }
.mq-coret .bar { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 12px; border-bottom: 2px solid #f6e7ad; }
.mq-coret .bar b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 900; color: #8a6a00; white-space: nowrap; }
.mq-coret .tools { display: flex; flex: none; gap: 2px; }
.mq-coret .tools button { display: grid; place-items: center; width: 38px; height: 44px; padding: 0; border: 2px solid transparent; border-radius: 12px; background: none; font-size: 1.15rem; cursor: pointer; }
.mq-coret .tools button.on { border-color: #f1d98a; background: #fff; }
.mq-coret .tools i { width: 20px; height: 20px; border-radius: 50%; }
.mq-coret canvas { flex: 1; width: 100%; touch-action: none; cursor: crosshair; background-image: linear-gradient(#e7eef7 1px, transparent 1px); background-size: 100% 28px; }
@media (max-width: 400px) { .mq-coret .bar b .lbl { display: none; } .mq-coret .tools button { width: 36px; } }

/* Hadiah: Album Nusantara (puzzle 9 keping) */
.alb-head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 4px; }
.alb-head > div { flex: 1; } .alb-head h1 { margin: 0; font-size: 1.5rem; font-weight: 900; } .alb-head p { margin: 2px 0 0; font-weight: 800; color: #6a7f7a; }
.alb-main { margin: 10px 14px; padding: 16px; border-radius: 26px; background: linear-gradient(#e3f3ff, #f4fbff); text-align: center; }
.alb-main > small { font-weight: 900; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: #1c9be8; }
.alb-main h2 { margin: 2px 0 0; font-size: 1.5rem; font-weight: 900; } .pl { margin: 2px 0 10px; font-weight: 800; color: #6a7f7a; }
.alb-pz { position: relative; overflow: hidden; border-radius: 14px; aspect-ratio: 1; }
.alb-pz > svg, .alb-th > svg, .alb-sheet > svg { display: block; width: 100%; height: auto; }
.alb-pz.big { width: min(300px, 78vw); margin: 0 auto; padding: 8px; border-radius: 22px; background: #cfe6f2; box-shadow: 0 8px 0 #b5d6e6; }
.alb-pz.big > svg { border-radius: 14px; }
.alb-cover { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 3px; }
.alb-pz.big .alb-cover { inset: 8px; }
.alb-cover i { border-radius: 8px; background: #1cb0f6; box-shadow: inset 0 -5px 0 #1899d6; position: relative; }
.alb-cover i::after { content: '🧩'; position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 1.4rem; opacity: .9; filter: grayscale(1) brightness(3); }
.alb-cover i.open { background: none; box-shadow: none; } .alb-cover i.open::after { content: none; }
.alb-th .alb-cover i::after { font-size: .7rem; }
.alb-prog { position: relative; height: 22px; margin: 18px auto 6px; max-width: 300px; border-radius: 99px; background: #e2e8ec; overflow: hidden; }
.alb-prog i { display: block; height: 100%; min-width: 22px; border-radius: 99px; background: #1cb0f6; }
.alb-prog span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 900; font-size: .85rem; color: #4b5b66; }
.alb-msg { margin: 6px 0 0; font-weight: 800; font-size: 1.05rem; color: var(--mq-ink); }
.alb-goal { display: flex; align-items: center; gap: 10px; padding: 8px 0; } .alb-goal + .alb-goal { border-top: 2px solid #f0f4f3; }
.alb-goal .em { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #fff6d6; font-size: 1.3rem; }
.alb-goal b { display: block; font-size: .95rem; } .alb-goal small { font-weight: 800; color: #6a7f7a; }
.alb-goal .alb-bar { display: block; height: 10px; margin: 4px 0 2px; border-radius: 99px; background: #eceff0; overflow: hidden; } .alb-goal .alb-bar i { display: block; height: 100%; border-radius: 99px; background: var(--mq-gold); }
.mq-card .alb-goal ~ .mq-btn { margin-top: 10px; }
.alb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 8px 14px 20px; }
.alb-th { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 6px; border: 2px solid var(--mq-line); border-bottom-width: 5px; border-radius: 16px; background: #fff; font: inherit; cursor: pointer; text-align: center; }
.alb-th > svg, .alb-th .alb-pz { border-radius: 10px; }
.alb-th b { font-size: .78rem; font-weight: 900; line-height: 1.15; min-height: 2.3em; display: grid; place-items: center; color: var(--mq-ink); }
.alb-th.cur { border-color: #84d8ff; }
.alb-th.lock > svg { filter: grayscale(1) blur(3px); opacity: .45; }
.alb-th .lk { position: absolute; top: 34%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #9aa7a4; color: #fff; }
.alb-th .lk svg { width: 18px; height: 18px; }
.alb-th:active { transform: translateY(3px); border-bottom-width: 2px; }
.alb-sheet { text-align: center; } .alb-sheet > svg { width: min(280px, 72vw); margin: 0 auto; border-radius: 18px; }
.alb-sheet h2 { margin: 10px 0 0; } .alb-sheet p { font-weight: 700; }

/* Grafik siswa di halaman Aku */
.mc-hero { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; text-align: center; }
.mc-hero b { display: block; font-size: 1.5rem; font-weight: 900; color: var(--mq-ink); line-height: 1.1; }
.mc-hero small { font-weight: 800; font-size: .78rem; color: #6a7f7a; }
.mc-plot { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: 8px; border-bottom: 2px solid #e3ece9; }
.mc-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; min-width: 0; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.mc-bar { display: block; width: min(28px, 70%); border-radius: 4px 4px 0 0; background: #19b796; }
.mc-col.today .mc-bar { background: #0a7d68; }
.mc-col small { height: 18px; font-size: .72rem; font-weight: 800; color: #6a7f7a; white-space: nowrap; }
.mc-col.today small { color: var(--mq-ink); font-weight: 900; }
.mc-col:focus-visible { outline: 3px solid var(--mq-blue); border-radius: 8px; }
.mc-goal { position: absolute; left: 0; right: 0; border-top: 2px dashed #e0a800; pointer-events: none; }
.mc-key { display: flex; align-items: center; gap: 8px; margin: -4px 0 10px; font-size: .82rem; font-weight: 800; color: #8a6a00; } .mc-key i { width: 22px; border-top: 2px dashed #e0a800; }
.mc-big { margin: 0 0 10px; font-weight: 800; color: #4d625d; } .mc-big b { font-size: 1.6rem; color: var(--mq-ink); }
.mc-stack { display: flex; gap: 2px; height: 22px; border-radius: 6px; overflow: hidden; }
.mc-seg { min-width: 6px; padding: 0; border: 0; cursor: pointer; }
.mc-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .82rem; font-weight: 800; color: #4d625d; }
.mc-legend span { display: inline-flex; align-items: center; gap: 6px; } .mc-legend i { width: 12px; height: 12px; border-radius: 3px; } .mc-legend b { color: var(--mq-ink); }

/* ---------- Teman Meti: Tito, Nahla, Lumo (js/mascot-friends.js) ---------- */
.mq-sparkles path { transform-box: fill-box; transform-origin: center; opacity: 0; animation: mq-twinkle 1.4s ease-out .5s both; }
.mq-sparkles path:nth-child(2) { animation-delay: .7s; } .mq-sparkles path:nth-child(3) { animation-delay: .9s; } .mq-sparkles path:nth-child(4) { animation-delay: 1.1s; }
@keyframes mq-twinkle { 0% { opacity: 0; transform: scale(.2) rotate(-40deg); } 35% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: translateY(-40px) scale(.6) rotate(40deg); } }
.mq-who-nahla .mq-wings { transform-origin: 100px 60px; animation: mq-flutter .35s ease-in-out infinite alternate; }
@keyframes mq-flutter { to { transform: scaleY(.82); } }
.mq-who-lumo .mq-sonar { animation: mq-sonar 1.8s ease-in-out infinite; }
@keyframes mq-sonar { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.mq-who-tito .mq-tuft, .mq-who-nahla .mq-tuft { transform-origin: 100px 44px; }
.mq-who-lumo .mq-tuft { transform-origin: 104px 34px; animation-duration: 3.2s; }
.mq-who-tito .mq-wave { transform-origin: 122px 136px; } .mq-who-tito .mq-cheerL { transform-origin: 78px 136px; } .mq-who-tito .mq-cheerR { transform-origin: 122px 136px; }
.mq-who-nahla .mq-wave, .mq-who-nahla .mq-cheerR { transform-origin: 166px 120px; } .mq-who-nahla .mq-cheerL { transform-origin: 34px 118px; }
.mq-who-lumo .mq-wave, .mq-who-lumo .mq-cheerR { transform-origin: 160px 122px; } .mq-who-lumo .mq-cheerL { transform-origin: 40px 120px; }
.mq-enter.mq-who-tito .mq-arms, .mq-enter.mq-who-nahla .mq-arms, .mq-enter.mq-who-lumo .mq-arms { animation: none; }
.lbuddy { margin: 0 0 12px; } .lbuddy .mq-mascot { flex: none; }
.mq-gsay.gbuddy { justify-content: center; margin: 0 0 6px; } .mq-gsay.gbuddy .mq-mascot { flex: none; }
.avsvg .mq-face .mq-eye { animation: none; }

/* Cerita TK beraudio: tombol dengar selalu tampil karena memakai rekaman, bukan suara perangkat */
html .mq-bubble .mq-spk.aud { display: inline-flex !important; background: #ff9f43; color: #fff; }
.tkpair { display: grid; gap: 10px; justify-items: center; font-size: 2rem; line-height: 1.3; text-align: center; }
.tkpair div { letter-spacing: .1em; }
.tktwo { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; font-size: 1.7rem; }
.tktwo b { font-size: 1.6rem; color: #04382e; }

/* Kertas coret: atribut hidden harus menang atas display:flex (tombol ✕), bisa digeser lewat batang judul, dan ada ukuran besar */
.mq-coret[hidden] { display: none !important; }
/* Soal dengan kertas coret (SMP–SMA dan soal bersusun): tombol lebih kecil, dan papan angka bisa dilipat */
.mq-foot.compact .mq-keys { gap: 6px; max-width: 320px; } .mq-foot.compact .mq-key { min-height: 40px; font-size: 1.15rem; border-radius: 11px; }
.mq-foot.compact .mq-keys.extra .mq-key { font-size: 1rem; } .mq-foot.compact .mq-btn { min-height: 46px; }
.mq-krow { display: none; align-items: center; gap: 10px; max-width: 520px; width: 100%; margin: 0 auto; }
.mq-ktog { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 2px solid var(--mq-line); border-radius: 999px; background: #fff; font: inherit; font-weight: 900; color: var(--mq-ink); cursor: pointer; }
.mq-ktog i { font-style: normal; font-size: .8em; transition: transform .2s; }
.mq-mini { flex: 1; min-width: 0; text-align: right; font-weight: 800; color: var(--mq-muted, #5c7570); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mq-mini b { color: var(--mq-ink); font-size: 1.2rem; margin-left: 4px; }
.mq-foot.cor .mq-krow { display: flex; }
.mq-foot.cor .mq-keys { display: none; }
.mq-foot.cor.kshow .mq-keys { display: grid; animation: mq-up .22s ease; }
.mq-foot.cor.kshow .mq-ktog i { transform: rotate(180deg); }
.mq-ktog .kb, .mq-foot.cor.kshow .mq-ktog .ka { display: none; } .mq-foot.cor.kshow .mq-ktog .kb { display: inline; }
.mq-coret .bar { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.mq-coret .bar b::before { content: '⠿'; margin-right: 6px; color: #c9a93a; font-weight: 400; }
.mq-coret.drag { box-shadow: 0 14px 34px rgba(4, 56, 46, .28); opacity: .96; }
.mq-coret.drag .bar { cursor: grabbing; }
.mq-coret[style*="top"] { border-bottom: 2px solid #f1d98a; border-radius: 20px; }
.mq-coret.tall { height: min(68vh, 560px); }

/* Ajakan memakai kertas coret, tepat di bawah soal */
.mq-coretcta { display: block; margin: 8px auto 4px; padding: 7px 16px; border: 2px dashed #f1d98a; border-radius: 999px; background: #fffdf3; color: #8a6a00; font: inherit; font-weight: 900; font-size: .92rem; cursor: pointer; }
.mq-coretcta:active { transform: scale(.97); }
.mq-coret .qcopy { padding: 4px 12px; border-bottom: 2px dashed #f6e7ad; font-weight: 900; font-size: 1.05rem; color: #04382e; white-space: nowrap; overflow-x: auto; }

/* ---------- Sehari Bekerja (misi profesi): memakai gaya Permainan ---------- */
.jbands { display: flex; gap: 6px; margin: 10px 14px 8px; overflow-x: auto; }
.jbands button, .jfilters button { flex: none; padding: 7px 13px; border: 2px solid #d9efe9; border-bottom-width: 4px; border-radius: 999px; background: #fff; font: inherit; font-weight: 900; font-size: .9rem; color: #04382e; cursor: pointer; }
.jbands button.on, .jfilters button.on { background: #35e0bd; border-color: #1db796; }
.jfilters { display: grid; gap: 6px; margin: 0 14px 14px; }
.jfilters > div { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.jfilters button { padding: 4px 11px; font-size: .8rem; border-bottom-width: 2px; }
.jtile small { color: #5c7570; font-weight: 700; font-size: .78rem; text-align: center; line-height: 1.25; }
.jpeople { font-size: 2.4rem; letter-spacing: -.1em; line-height: 1; } .jpeople.big { font-size: 3.4rem; }
.jtile .jdone { background: #1db796; }
.jpick { display: grid; gap: 10px; padding: 16px 14px; }
.jpick .mq-btn { display: grid; text-align: left; } .jpick small { font-weight: 700; opacity: .75; }
.jhero { margin: 12px 14px; padding: 16px; border: 2px solid color-mix(in srgb, var(--c) 35%, #fff); border-bottom-width: 6px; border-radius: 22px; background: color-mix(in srgb, var(--c) 8%, #fff); text-align: center; }
.jhero .jart { font-size: 2.6rem; margin: 4px 0; } .jhero h2 { margin: 10px 0 2px; font-size: 1rem; } .jhero p { margin: 0; color: #36504a; font-weight: 700; }
.jsub { margin: 18px 14px 8px; font-size: 1.1rem; }
.jmissions { display: grid; gap: 8px; margin: 0 14px; }
.jmis { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 2px solid #e3efec; border-bottom-width: 5px; border-radius: 18px; background: #fff; color: inherit; text-decoration: none; }
.jmis.mine { border-color: var(--c); }
.jmis .lv { flex: none; min-width: 58px; padding: 3px 8px; border-radius: 999px; background: color-mix(in srgb, var(--c) 18%, #fff); font-weight: 900; font-size: .78rem; text-align: center; }
.jmis small { display: block; color: #5c7570; font-weight: 700; font-size: .78rem; } .jmis .go { font-size: 1.4rem; color: #9db3ae; } .jmis .st svg { width: 16px; height: 16px; }
.jlead { margin: 12px 14px; font-weight: 700; }
.jwhere { display: inline-block; margin: 0 0 12px; padding: 7px 14px; border: 2px dashed #b7e6da; border-radius: 999px; background: #f2fffb; color: #00806b; font-weight: 900; text-decoration: none; }
.jscene { text-align: center; } .jscene .jart.big { font-size: 4rem; line-height: 1.1; margin-top: 6px; }
.jscene h1 { margin: 4px 0 12px; font-size: 1.35rem; } .jlv { color: #5c7570; font-weight: 800; }
.jscene .mq-say { text-align: left; }
.jnote { margin: 12px 4px 0; padding: 8px 12px; border-radius: 14px; background: #fff7e0; font-size: .86rem; font-weight: 700; color: #6b5200; text-align: left; }
.mq-opt.jbig { font-size: 2rem; }
.jctx { margin: 0 0 12px; padding: 8px 14px; border: 2px solid #f1d98a; border-radius: 16px; background: #fffbea; font-size: .92rem; font-weight: 700; color: #4a3b00; }
.jctx summary { cursor: pointer; font-weight: 900; color: #8a6a00; } .jctx p { margin: 6px 0 2px; line-height: 1.45; }
.jfound { list-style: none; margin: 8px 0 2px; padding: 8px 0 0; border-top: 1px dashed #f1d98a; display: grid; gap: 4px; }
.jfound li { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .jfound small { color: #6b5a1e; font-weight: 700; } .jfound b { white-space: nowrap; color: var(--mq-dd, #00806b); }
.jhintw { display: block; margin: 4px 0 -6px; } .jhintw .mq-link { padding: 4px 0; font-size: .88rem; }
.jhint { display: block; margin: 8px 0 0; padding: 8px 12px; border-radius: 14px; background: #fff7e0; font-size: .92rem; font-weight: 800; color: #6b5200; } .jhint[hidden], .jhintw[hidden] { display: none; }
.jhow { margin: 4px 0 8px; text-align: center; color: #5c7570; font-weight: 800; font-size: .88rem; }
.jslots, .jbins { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.jslot { position: relative; display: grid; place-items: center; min-width: 76px; min-height: 76px; border: 2px dashed #b7e6da; border-radius: 16px; background: #f7fffd; }
.jslot small { position: absolute; top: 3px; left: 7px; font-weight: 900; color: #9db3ae; }
.jbin { flex: 1 1 140px; min-height: 110px; padding: 8px; border: 2px dashed #b7e6da; border-radius: 18px; background: #f7fffd; text-align: center; cursor: pointer; }
.jbin > div { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 6px; }
.jpool { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; min-height: 64px; margin-top: 14px; padding: 10px; border-radius: 18px; background: #f1f6f5; }
.jpool small { align-self: center; color: #5c7570; font-weight: 700; }
.jitem { display: grid; place-items: center; min-width: 58px; min-height: 58px; padding: 4px; border: 2px solid #d9efe9; border-bottom-width: 4px; border-radius: 14px; background: #fff; font-size: 2rem; cursor: grab; touch-action: none; }
.jitem.pick { border-color: #ff9f43; background: #fff3e0; }
.jghost { position: fixed; z-index: 90; pointer-events: none; opacity: .9; transform: scale(1.08); box-shadow: 0 10px 24px rgba(4, 56, 46, .25); }
.jblk { display: block; width: var(--s); height: var(--s); border-radius: 6px; background: var(--c); box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .15); }
.jtower { display: grid; justify-items: center; gap: 2px; }
.jrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 2.2rem; }
.jbrick { display: block; width: 100%; text-align: center; font-size: 1.5rem; letter-spacing: -.05em; }
.jhouse { width: 190px; max-width: 70%; display: block; margin: 0 auto; }
.jbars { display: flex; align-items: flex-end; justify-content: center; gap: 10px; height: 170px; padding: 8px; }
.jbar { display: grid; justify-items: center; align-content: end; height: 100%; }
.jbar i { display: grid; place-items: start center; width: 34px; border-radius: 8px 8px 0 0; background: #4d96ff; }
.jbar b { margin-top: -20px; font-size: .8rem; } .jbar small { margin-top: 4px; font-weight: 800; font-size: .78rem; }
.jgrid { width: 230px; max-width: 80%; display: block; margin: 0 auto; }
.jlist { text-align: center; font-size: 1.7rem; line-height: 1.5; word-spacing: .1em; }
.jresult { text-align: center; } .jresult h1 { margin: 4px 0; } .jwrap { font-weight: 800; color: #36504a; }
.jcard { margin: 14px 0; padding: 12px 14px; border: 2px solid #e3efec; border-radius: 18px; background: #fff; text-align: left; }
.jcard h2 { margin: 0 0 8px; font-size: 1rem; } .jcard ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.jcard li small { display: block; color: #5c7570; font-weight: 700; } .jcard li p { margin: 2px 0 0; font-size: .9rem; color: #36504a; }
.jtopics { display: flex; flex-wrap: wrap; gap: 6px; }
.jtopic { padding: 6px 12px; border-radius: 999px; background: #e6fffa; color: #00806b; font-weight: 900; font-size: .88rem; text-decoration: none; }
.jfoot { display: grid; gap: 8px; } .jfoot .mq-btn { text-align: center; text-decoration: none; }

/* Jalur belajar: warna bab mengikuti teman Meti yang menemani (Tito merah, Nahla kuning, Lumo biru tua) */
.th-tito { --mq: #ff8a8c; --mq-l: #ffc2c3; --mq-d: #e0464b; --mq-dd: #b52a30; --mq-bg: #ffeeee; --mq-ink: #4a0d10; }
.th-nahla { --mq: #ffc93d; --mq-l: #ffe48f; --mq-d: #e09b12; --mq-dd: #8a5a00; --mq-bg: #fff6dc; --mq-ink: #3d2a00; }
.th-lumo { --mq: #4a6fc7; --mq-l: #b4c8f7; --mq-d: #1f3c88; --mq-dd: #142a63; --mq-bg: #e9efff; --mq-ink: #fff; }
.th-lumo .mq-unit .les, .th-lumo .mq-label { color: #142a63; }
.th-lumo .mq-unit.done, .th-lumo .mq-unit.lock { color: #142a63; }

/* Beranda: Meti dan teman-temannya bergerak */
.mq-stage { position: relative; width: min(340px, 94vw); height: 270px; }
.mq-stage::before { content: ''; position: absolute; left: 50%; top: 8px; width: 230px; height: 230px; margin-left: -115px; border-radius: 50%; background: radial-gradient(circle, #d9fff5 0 60%, transparent 71%); }
.mq-stage .mq-sym { z-index: 2; width: 38px; height: 38px; font-size: 1.3rem; border-radius: 13px; }
.mq-stage .mq-sym.a { left: 64px; top: 0; } .mq-stage .mq-sym.b { right: 96px; top: 6px; } .mq-stage .mq-sym.c { left: 6px; top: 80px; bottom: auto; } .mq-stage .mq-sym.d { right: 4px; top: 118px; bottom: auto; }
.mq-stage .st { position: absolute; z-index: 1; }
.st-meti { left: 50%; top: 18px; margin-left: -95px; }
.st-tito { left: 0; bottom: 0; animation: st-in-l .9s cubic-bezier(.3, 1.3, .5, 1) .4s both; }
.st-tito .hop { animation: st-hop 1.4s ease-in-out 1.3s infinite; transform-origin: 50% 100%; }
.st-nahla { right: 14px; top: 10px; animation: st-in-r .9s cubic-bezier(.3, 1.3, .5, 1) .7s both; }
.st-nahla .fly { animation: st-fly 5s ease-in-out 1.6s infinite; }
.st-lumo { right: 0; bottom: 0; width: 120px; height: 120px; overflow: hidden; border-radius: 0 0 40px 40px; }
.st-lumo .jump { position: absolute; left: 14px; bottom: 0; animation: st-jump 3.4s ease-in-out 1s infinite both; }
.st-lumo .wave { position: absolute; left: 0; bottom: 0; width: 240px; height: 26px; fill: #5fa8ff; opacity: .85; animation: st-wave 2.4s linear infinite; }
@keyframes st-in-l { from { transform: translateX(-120px); opacity: 0; } }
@keyframes st-in-r { from { transform: translate(120px, -40px); opacity: 0; } }
@keyframes st-hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.08, .92); } 45% { transform: translateY(-22px) scale(.96, 1.04); } 70% { transform: translateY(0) scale(1.06, .94); } }
@keyframes st-fly { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-34px, 20px) rotate(-10deg); } 50% { transform: translate(-12px, 44px) rotate(4deg); } 75% { transform: translate(18px, 18px) rotate(10deg); } }
@keyframes st-jump { 0%, 12% { transform: translateY(110%) rotate(30deg); } 45% { transform: translateY(-6%) rotate(-12deg); } 60% { transform: translateY(-2%) rotate(-4deg); } 92%, 100% { transform: translateY(110%) rotate(35deg); } }
@keyframes st-wave { to { transform: translateX(-120px); } }
@media (prefers-reduced-motion: reduce) { .mq-stage .st, .mq-stage .st > div, .mq-stage .wave { animation: none !important; } .st-lumo .jump { transform: translateY(10%); } }

/* Album: gambar baru lengkap */
.alb-new { margin: 0 0 8px; text-align: center; font-size: 1.3rem; font-weight: 900; color: #e08a00; animation: mq-bpop .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.alb-reveal { animation: alb-rev .9s cubic-bezier(.3, 1.3, .5, 1) both; } .alb-reveal svg { display: block; width: 100%; height: auto; border-radius: 18px; }
@keyframes alb-rev { from { transform: scale(.6) rotate(-6deg); opacity: 0; filter: blur(6px); } }

/* Sapaan di peta belajar */
.mq-hello { display: block; margin: 18px 20px 6px; font-size: 1.5rem; font-weight: 900; line-height: 1.2; color: var(--mq-ink); text-align: center; letter-spacing: -.01em; animation: mq-bpop .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.mq-hello-ic { display: inline-block; width: 28px; height: 28px; margin-right: 8px; vertical-align: -5px; fill: #19b796; animation: mq-spin 9s linear infinite; }
@keyframes mq-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mq-hello, .mq-hello-ic { animation: none; } }
@media (max-width: 370px) { .mq-hello { font-size: 1.3rem; } }
.mq-hero .mq-install { width: 100%; margin: 6px 0 18px; text-align: left; }

/* Tablet mendatar: kertas coret di kanan, soal dan tombol di kiri */
body.coret-side .mq-screen, body.coret-side .mq-top { margin-left: 24px; margin-right: auto; }
body.coret-side .mq-foot { right: auto; width: 568px; }
.mq-coret.side { border-bottom: 2px solid #f1d98a; border-radius: 20px; }
.mq-coret.side [data-k="size"] { display: none; }

/* Kertas coret di iPad: telapak tangan tidak memilih teks (layar biru), tidak memunculkan menu salin, tidak menggulir */
.mq-coret, .mq-coret * { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.coret-open { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
body.coret-open #pq { -webkit-user-select: none; user-select: none; }
.mq-coret canvas { -webkit-tap-highlight-color: transparent; }
.mq-coret .tools [data-k="finger"].off { display: none; }

/* Olimpiade */
.ol-cta { display: flex; align-items: center; gap: 12px; margin: 4px 12px 10px; padding: 12px 16px; border-radius: 16px; background: #fff6dc; color: #5a3d00; text-decoration: none; font-size: 1.4rem; box-shadow: 0 4px 0 #f1d98a; }
.ol-cta b { display: block; font-size: 1.02rem; } .ol-cta small { display: block; font-size: .8rem; font-weight: 700; color: #8a6a00; }
.ol-wrap { padding: 0 16px 24px; max-width: 760px; margin: 0 auto; } .ol-wrap h1 { margin: 4px 0; } .ol-wrap h2 { font-size: 1.08rem; margin: 20px 0 8px; } .ol-lead { margin: 0 0 12px; color: #4d625d; font-weight: 700; }
.ol-seg { display: flex; gap: 6px; } .ol-seg button { flex: 1; padding: 10px 6px; border: 2px solid var(--mq-line); border-radius: 12px; background: #fff; font: inherit; font-weight: 900; color: var(--mq-ink); cursor: pointer; } .ol-seg button.on { background: #04382e; border-color: #04382e; color: #fff; } .ol-seg.small button { padding: 6px; font-size: .88rem; }
.ol-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.ol-card { display: grid; gap: 2px; padding: 16px; border: 2px solid var(--mq-line); border-radius: 16px; background: #fff; color: var(--mq-ink); text-decoration: none; box-shadow: 0 4px 0 #e3ece9; } .ol-card .em { font-size: 1.8rem; } .ol-card small { color: #5c7570; font-weight: 700; } .ol-card.off { opacity: .45; }
.ol-sim { display: grid; gap: 2px; padding: 14px 16px; border-radius: 16px; background: #04382e; color: #fff; text-decoration: none; } .ol-sim small { opacity: .85; font-weight: 700; }
.ol-info { margin-top: 18px; padding: 10px 14px; border-radius: 14px; background: #f1fbf8; font-weight: 700; font-size: .92rem; } .ol-info summary { font-weight: 900; cursor: pointer; } .ol-info p { margin: 8px 0 0; line-height: 1.5; }
.ol-gate { max-width: 420px; margin: 20px auto; padding: 0 20px; text-align: center; display: grid; gap: 12px; } .ol-gate h1, .ol-gate p { margin: 0; } .ol-gate p { font-weight: 700; color: #4d625d; line-height: 1.5; }
.ol-tag { font-size: .82rem; font-weight: 900; color: #5c7570; margin: 2px 0 6px; } .ol-count { font-weight: 900; min-width: 56px; text-align: right; }
.ol-q { font-size: 1.12rem; line-height: 1.5; } .mq-say .ol-q::before, .mq-say .ol-q::after { display: none; } .ol-q .mfr { vertical-align: middle; }
.ol-hintw { display: flex; justify-content: center; gap: 14px; margin: 8px 0 0; }
.ol-dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 12px 0 6px; } .ol-dots button { width: 34px; height: 34px; border: 2px solid var(--mq-line); border-radius: 10px; background: #fff; font: inherit; font-weight: 900; cursor: pointer; } .ol-dots button.done { background: #d4fcef; border-color: #19b796; } .ol-dots button.on { border-color: #04382e; box-shadow: 0 0 0 2px #04382e; }
.ol-end { text-align: center; margin: 10px 0 14px; } .ol-end h1, .ol-end p { margin: 0 0 4px; } .ol-end p { font-weight: 700; color: #4d625d; }
.ol-per { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; } .ol-per div { display: flex; justify-content: space-between; padding: 8px 12px; border-radius: 12px; background: #f1fbf8; font-weight: 800; font-size: .92rem; }
.ol-rev { padding: 10px 14px; margin-bottom: 8px; border: 2px solid var(--mq-line); border-radius: 14px; background: #fff; font-weight: 700; } .ol-rev summary { font-weight: 900; cursor: pointer; } .ol-rev.no { border-color: #ffc2c3; } .ol-rev.ok { border-color: #bfeee2; }
.mq-coret.side .qcopy { display: none; } /* di samping, soalnya sudah terlihat di kiri */

/* Beranda: angka dan kata pengguna */
.mq-stats, .mq-testi { padding: 8px 0 22px; } .mq-stats h2, .mq-testi h2 { text-align: center; font-size: 1.25rem; font-weight: 900; margin: 0 0 12px; }
.mq-marq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.mq-marq-t { display: flex; width: max-content; animation: mq-marq 60s linear infinite; }
.mq-marq-t > div { display: flex; align-items: stretch; }
.mq-marq.rev .mq-marq-t { animation-direction: reverse; animation-duration: 70s; }
.mq-marq:hover .mq-marq-t, .mq-marq:active .mq-marq-t { animation-play-state: paused; }
@keyframes mq-marq { to { transform: translateX(-50%); } }
.mq-marq.stats .mq-marq-t > div > div { display: grid; gap: 2px; align-content: center; width: 190px; margin-right: 12px; padding: 16px 12px; border-radius: 18px; background: #e6fffa; text-align: center; }
.mq-marq.stats .mq-marq-t > div > div.wide { width: 340px; background: #fff3c4; }
.mq-marq.stats b { font-size: 1.8rem; font-weight: 900; color: #0a7d68; line-height: 1.1; font-variant-numeric: tabular-nums; }
.mq-marq.stats small { font-size: .82rem; font-weight: 800; color: #4d625d; line-height: 1.25; }
.mq-testi figure { margin: 0 12px 0 0; width: min(320px, 78vw); display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 18px; border: 2px solid var(--mq-line); border-bottom-width: 5px; border-radius: 20px; background: #fff; }
.mq-testi blockquote { margin: 0; font-weight: 700; line-height: 1.45; color: var(--mq-ink); }
.mq-testi figcaption { display: grid; font-size: .85rem; font-weight: 700; color: #5c7570; } .mq-testi figcaption b { font-size: .98rem; color: var(--mq-ink); }
@media (prefers-reduced-motion: reduce) { .mq-marq { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .mq-marq-t { animation: none; } .mq-marq-t > div[aria-hidden] { display: none; } }

/* Profesi: panggung, grafik bergerak, dan pergantian layar */
.mq-screen.jt-in { animation: jt-in .36s cubic-bezier(.2, .9, .3, 1) both; } .mq-screen.jt-out { animation: jt-out .23s ease both; }
@keyframes jt-in { from { opacity: 0; transform: translateY(20px); } } @keyframes jt-out { to { opacity: 0; transform: translateX(-46px); } }
/* geser dari kanan hanya jika sisi kanan halaman bisa dipotong; tanpa ini halaman HP sempat melebar */
@supports selector(:has(a)) and (overflow: clip) { html:has(.jtrail), body:has(.jtrail) { overflow-x: clip; } @keyframes jt-in { from { opacity: 0; transform: translateX(46px); } } }
.mq-ggrid .jtile { animation: jv-up .42s cubic-bezier(.2, .9, .3, 1.2) both; } .mq-ggrid .jtile:nth-child(2) { animation-delay: .05s; } .mq-ggrid .jtile:nth-child(3) { animation-delay: .1s; } .mq-ggrid .jtile:nth-child(4) { animation-delay: .15s; } .mq-ggrid .jtile:nth-child(n+5) { animation-delay: .2s; } .mq-ggrid .jtile:nth-child(n+7) { animation-delay: .28s; } .mq-ggrid .jtile:nth-child(n+9) { animation-delay: .36s; }
.jmissions .jmis { animation: jv-right .36s ease both; } .jmissions .jmis:nth-child(2) { animation-delay: .07s; } .jmissions .jmis:nth-child(3) { animation-delay: .14s; } .jmissions .jmis:nth-child(4) { animation-delay: .21s; } .jmissions .jmis:nth-child(5) { animation-delay: .28s; }
@keyframes jv-up { from { opacity: 0; transform: translateY(18px) scale(.94); } } @keyframes jv-right { from { opacity: 0; transform: translateX(-16px); } } @keyframes jv-pop { from { opacity: 0; transform: scale(.5); } } @keyframes jv-in { from { opacity: 0; } }
/* Jejak perjalanan */
.jtrail { --at: 0; position: relative; height: 40px; max-width: 480px; margin: 0 auto 2px; width: calc(100% - 56px); } .jtrail u { position: absolute; left: 0; right: 0; top: 26px; height: 5px; border-radius: 3px; background: #e3ece9; }
.jtrail i { position: absolute; top: 22px; width: 13px; height: 13px; margin-left: -6px; border-radius: 50%; background: #fff; border: 3px solid #cfdcd8; transition: background .3s, border-color .3s; } .jtrail i.done { background: var(--c); border-color: var(--c); } .jtrail i.now { border-color: var(--c); }
.jtrail em { position: absolute; right: -14px; top: 8px; font-style: normal; font-size: 1.2rem; } .jtrail span { position: absolute; top: -8px; left: calc(var(--at) / var(--n) * 100%); margin-left: -20px; transition: left .55s cubic-bezier(.3, 1.3, .5, 1); } .jtrail span svg { display: block; width: 40px; height: auto; }
.jmini { text-align: center; font-size: 2.6rem; line-height: 1.1; margin: 0 0 8px; animation: jv-pop .4s cubic-bezier(.3, 1.4, .5, 1) both; }
/* Panggung */
.jv-stage { position: relative; height: 130px; margin: 2px 0 10px; border-radius: 20px; overflow: hidden; background: linear-gradient(color-mix(in srgb, var(--c) 28%, #fff), #fff 92%); } .jv-stage.big { height: 176px; }
.jv-stage .sun { position: absolute; right: 18px; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: #ffd34d; animation: jv-sun 3s ease-in-out infinite; } @keyframes jv-sun { 50% { transform: scale(1.14); } }
.jv-stage .cloud { position: absolute; top: 18px; width: 58px; height: 16px; border-radius: 10px; background: #fff; opacity: .95; animation: jv-cloud 11s linear infinite; } .jv-stage .cloud.b { top: 44px; width: 40px; animation-duration: 15s; animation-delay: -6s; } @keyframes jv-cloud { from { left: -70px; } to { left: 100%; } }
.jv-stage .ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: color-mix(in srgb, var(--c) 55%, #fff); }
.jv-stage .ppl { position: absolute; left: 0; right: 42%; bottom: 8%; display: flex; justify-content: center; gap: 6px; font-size: 3rem; line-height: 1; } .jv-stage.big .ppl { font-size: 3.9rem; } .jv-stage .ppl span { animation: jv-walk .7s cubic-bezier(.2, .9, .3, 1) both; } @keyframes jv-walk { from { opacity: 0; transform: translateX(-110px) rotate(-8deg); } }
.jv-stage .art { position: absolute; left: 56%; right: 6%; bottom: 14%; display: flex; justify-content: center; gap: 8px; font-size: 2.5rem; line-height: 1; } .jv-stage.big .art { font-size: 3.2rem; } .jv-stage .art span { animation: jv-drop .7s cubic-bezier(.3, 1.5, .5, 1) both; } @keyframes jv-drop { from { opacity: 0; transform: translateY(-120px); } }
/* Donat */
.jv-donut { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; width: 100%; } .jv-donut svg { width: 148px; height: 148px; flex: none; } .jv-arc { animation: jv-arc .55s ease-out both; } @keyframes jv-arc { from { stroke-dasharray: 0 100; } }
.jv-donut .t1 { font: 900 5.2px Nunito, sans-serif; text-anchor: middle; fill: #16302b; } .jv-donut .t2 { font: 700 3px Nunito, sans-serif; text-anchor: middle; fill: #5c7570; }
.jv-donut ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; min-width: 150px; } .jv-donut li { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: .94rem; animation: jv-right .35s ease both; } .jv-donut li i { width: 14px; height: 14px; border-radius: 4px; } .jv-donut li span { flex: 1; } .jv-donut li b { font-weight: 900; }
/* Batang */
.jv-bars { display: grid; gap: 8px; width: 100%; max-width: 440px; } .jv-bars > div { display: grid; grid-template-columns: minmax(70px, 30%) 1fr auto; gap: 8px; align-items: center; font-weight: 800; font-size: .92rem; } .jv-bars p { margin: 0; height: 18px; border-radius: 9px; background: #edf3f1; overflow: hidden; } .jv-bars p i { display: block; height: 100%; border-radius: 9px; animation: jv-wide .65s cubic-bezier(.2, .9, .3, 1) both; } @keyframes jv-wide { from { width: 0; } } .jv-bars b { font-weight: 900; font-size: .9rem; animation: jv-in .4s ease both; }
.jv-grow { display: flex; align-items: flex-end; justify-content: center; gap: 10px; height: 170px; width: 100%; max-width: 440px; } .jv-grow > div { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; } .jv-grow i { display: block; width: 100%; max-width: 52px; border-radius: 8px 8px 0 0; transform-origin: bottom; animation: jv-tall .6s cubic-bezier(.2, 1.1, .4, 1) both; } @keyframes jv-tall { from { transform: scaleY(0); } } .jv-grow b { font-size: .8rem; font-weight: 900; white-space: nowrap; animation: jv-in .4s ease both; } .jv-grow small { font-size: .74rem; font-weight: 800; color: #5c7570; }
/* Stoples */
.jv-jars { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } .jv-jars > div { display: grid; justify-items: center; gap: 2px; width: 74px; } .jv-jars .jar { position: relative; display: block; width: 62px; height: 92px; border: 3px solid #b6c7c2; border-top-width: 7px; border-radius: 8px 8px 16px 16px; overflow: hidden; background: #f7fbfa; } .jv-jars .jar i { position: absolute; left: 0; right: 0; bottom: 0; animation: jv-fill .8s cubic-bezier(.2, .9, .3, 1) both; } @keyframes jv-fill { from { height: 0; } } .jv-jars em { position: absolute; left: 0; right: 0; top: 30%; text-align: center; font-style: normal; font-size: 1.4rem; animation: jv-pop .35s ease both; } .jv-jars b { font-weight: 900; } .jv-jars small { font-weight: 800; font-size: .76rem; color: #5c7570; text-align: center; line-height: 1.1; }
/* Nota */
.jv-rec { width: min(320px, 100%); padding: 12px 14px; background: #fffef6; border: 2px dashed #d7c98c; border-radius: 10px; } .jv-rec h5 { margin: 0 0 6px; font-size: .95rem; text-align: center; } .jv-rec p { display: flex; justify-content: space-between; gap: 10px; margin: 3px 0; font-weight: 800; font-size: .94rem; animation: jv-right .35s ease both; } .jv-rec .tot { padding-top: 5px; border-top: 2px solid #16302b; font-weight: 900; }
/* Bagi rata */
.jv-split { display: grid; justify-items: center; gap: 2px; width: 100%; } .jv-split .pot { padding: 6px 16px; border-radius: 12px; background: #16302b; color: #66ffdb; font-weight: 900; font-size: 1.15rem; animation: jv-pop .35s ease both; } .jv-split .lines { display: flex; justify-content: space-around; width: min(380px, 100%); height: 18px; } .jv-split .lines i { width: 3px; background: #9fb6b0; transform-origin: top; animation: jv-tall2 .3s ease both; } @keyframes jv-tall2 { from { transform: scaleY(0); } } .jv-split .ppl { display: flex; justify-content: space-around; width: min(400px, 100%); } .jv-split .ppl span { display: grid; justify-items: center; animation: jv-up .35s ease both; } .jv-split em { font-style: normal; font-size: 1.8rem; line-height: 1.1; } .jv-split .ppl b { font-size: .74rem; font-weight: 900; color: #0a7d68; } .jv-split.many .ppl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 0; width: min(300px, 100%); } .jv-split.many .lines { width: min(200px, 66%); } .jv-split.many .lines i:nth-child(n+4) { display: none; }
/* Lapangan */
.jv-court { position: relative; width: min(340px, 100%); height: 150px; border-radius: 10px; background: #2fa36b; border: 3px solid #fff; box-shadow: 0 0 0 2px #1d7a4e; overflow: hidden; } .jv-court .line { position: absolute; background: #fff; } .jv-court .line.a { left: 0; right: 0; top: 16%; height: 2px; } .jv-court .line.b { left: 0; right: 0; bottom: 16%; height: 2px; } .jv-court .line.c { top: 16%; bottom: 16%; left: 25%; width: 2px; box-shadow: 170px 0 0 #fff; } .jv-court .net { position: absolute; left: 50%; top: 0; bottom: 0; width: 5px; margin-left: -2px; background: repeating-linear-gradient(#fff 0 4px, #16302b 4px 7px); z-index: 1; }
.jv-court .p { position: absolute; font-size: 2rem; animation: jv-pop .4s cubic-bezier(.3, 1.4, .5, 1) both; } .jv-court .p0 { left: 12%; top: 20%; } .jv-court .p1 { left: 12%; bottom: 18%; } .jv-court .p2 { right: 12%; top: 20%; } .jv-court .p3 { right: 12%; bottom: 18%; } .jv-court .kok { position: absolute; left: 22%; top: 44%; font-size: 1.3rem; z-index: 2; animation: jv-kok 2.2s ease-in-out infinite alternate; } @keyframes jv-kok { 50% { transform: translate(90px, -46px) rotate(180deg); } to { transform: translate(180px, 0) rotate(360deg); } }
/* Kode */
.jv-code { width: min(400px, 100%); border-radius: 12px; overflow: hidden; background: #10231f; color: #d8fff4; text-align: left; font: 700 .95rem/1.5 ui-monospace, Menlo, Consolas, monospace; } .jv-code pre { margin: 0; padding: 10px 0; white-space: pre-wrap; font: inherit; } .jv-code code { display: block; padding: 1px 12px; font: inherit; animation: jv-line 1.1s ease both; } .jv-code code i { display: inline-block; width: 22px; color: #6c8f86; font-style: normal; } @keyframes jv-line { 0% { opacity: .35; background: transparent; } 35% { opacity: 1; background: #2a7d68; } 100% { opacity: 1; background: transparent; } } .jv-code .vars { display: flex; gap: 8px; padding: 8px 12px; background: #182f2a; } .jv-code .vars span { display: grid; padding: 2px 10px; border-radius: 8px; background: #66ffdb; color: #04382e; } .jv-code .vars small { font-size: .7rem; } .jv-code .vars b { font-size: 1.05rem; }
/* Robot, duduk, dosis, deret, kembang api */
.jv-robot { position: relative; display: grid; grid-template-columns: repeat(calc(var(--n) + 1), 58px); gap: 3px; } .jv-robot i { height: 58px; border-radius: 10px; background: #e6f4f0; } .jv-robot .bot { position: absolute; left: 10px; top: 8px; font-size: 2.2rem; animation: jv-bot 3.2s ease-in-out infinite alternate; } @keyframes jv-bot { to { transform: translateX(calc(var(--to) * 61px)); } } .jv-robot .star { position: absolute; right: 10px; top: 8px; font-size: 2.2rem; }
.jv-seats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .jv-seats > div { padding: 6px 8px; border: 3px solid var(--c); border-radius: 12px; font-size: 1.15rem; animation: jv-pop .35s cubic-bezier(.3, 1.4, .5, 1) both; }
.jv-dose { display: grid; justify-items: center; gap: 3px; } .jv-dose .tube { position: relative; width: 54px; height: 138px; border: 3px solid #8eb1aa; border-top: 0; border-radius: 0 0 12px 12px; background: #fff; overflow: hidden; } .jv-dose .tube i { position: absolute; left: 0; right: 0; bottom: 0; background: #f08c3a; animation: jv-fill2 .8s ease both; } @keyframes jv-fill2 { from { height: 0; } } .jv-dose u { position: absolute; left: 0; width: 13px; height: 2px; background: #5c7570; text-decoration: none; } .jv-dose u small { position: absolute; left: 16px; top: -9px; font-size: .68rem; font-weight: 800; color: #36504a; } .jv-dose > b { font-weight: 900; } .jv-dose > small { font-weight: 800; color: #5c7570; font-size: .78rem; }
.jv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 1.7rem; } .jv-chips span { animation: jv-pop .34s cubic-bezier(.3, 1.4, .5, 1) both; }
.jv-burst { position: absolute; left: 38px; top: 38px; width: 0; height: 0; pointer-events: none; z-index: 3; } .jv-burst i { position: absolute; width: 8px; height: 8px; border-radius: 2px; background: var(--c); animation: jv-spark .75s ease-out both; } @keyframes jv-spark { to { opacity: 0; transform: rotate(var(--a)) translateY(-74px) scale(.4); } }
/* Medali akhir */
.jmedal { display: inline-grid; place-items: center; width: 92px; height: 92px; margin-top: 6px; border-radius: 50%; background: conic-gradient(#ffd34d, #ff9f1a, #ffd34d); box-shadow: 0 0 0 6px #fff, 0 0 0 9px var(--c); animation: jv-medal .8s cubic-bezier(.3, 1.4, .5, 1) both; } .jmedal span { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 50%; background: #fff; font-size: 1.5rem; } @keyframes jv-medal { from { opacity: 0; transform: rotate(-200deg) scale(.2); } } .jbadge { margin: 2px 0 0; font-weight: 800; color: #36504a; }
.jresult > * { animation: jv-up .45s ease both; } .jresult > *:nth-child(2) { animation-delay: .15s; } .jresult > *:nth-child(3) { animation-delay: .25s; } .jresult > *:nth-child(4) { animation-delay: .35s; } .jresult > *:nth-child(5) { animation-delay: .45s; } .jresult > *:nth-child(n+6) { animation-delay: .55s; } .jresult > .jmedal { animation-name: jv-medal; animation-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .mq-screen.jt-in, .mq-screen.jt-out, .jtile, .jmis, .jresult > *, .jmini, [class*="jv-"], [class*="jv-"] * { animation: none !important; } .jtrail span { transition: none; } } html[lang="en"] .jctx:not([open]) summary::after { content: ' · tap to read'; } .jctx:not([open]) summary::after { content: ' · ketuk untuk membaca'; font-weight: 700; opacity: .7; } @media (max-width: 640px) { .jstept { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); } .jctx { margin-bottom: 8px; } .jq { margin-bottom: 6px; } .jq #mqm svg { width: 54px; height: 54px; } .jq + .mq-vis { margin: 0 0 8px; } #jbody .mq-ans { margin: 0 0 8px; } #jbody .mq-disp { min-height: 50px; padding: 3px 14px; font-size: 1.7rem; } .jv-donut { flex-wrap: nowrap; gap: 12px; } .jv-donut svg { width: 112px; height: 112px; } .jv-donut ul { flex: 1; min-width: 0; gap: 3px; } .jv-donut li { font-size: .84rem; gap: 6px; } }
.mq-lright { display: inline-flex; align-items: center; gap: 10px; } .mq-lang { min-width: 44px; height: 38px; padding: 0 10px; border: 2px solid #bfeee2; border-bottom-width: 4px; border-radius: 12px; background: #fff; color: #0a7d68; font: 900 .9rem Nunito, sans-serif; letter-spacing: .5px; cursor: pointer; } .mq-lang:active { transform: translateY(2px); border-bottom-width: 2px; }