:root{--bg:#fff7e6;--bg2:#ffeedb;--tinta:#23303f;--kartu:#fff;--garis:#f0d9bc;--benar:#1f9d55;--benar-muda:#d8f5e3;--salah:#c2410c;--salah-muda:#ffe6d5;--radius:22px}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{min-height:100%;margin:0}body{background:linear-gradient(170deg, var(--bg), var(--bg2));color:var(--tinta);-webkit-user-select:none;user-select:none;touch-action:manipulation;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}#app{min-height:100dvh;display:grid}.layar{padding:20px 16px calc(20px + env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:16px;width:100%;max-width:900px;margin:0 auto;display:flex}h1{text-align:center;letter-spacing:-.02em;margin:0;font-size:clamp(1.8rem,6vw,2.6rem)}h2{text-align:center;margin:0;font-size:clamp(1.3rem,4.5vw,1.8rem)}h3{margin:12px 0 0;font-size:1.05rem}.sub{color:#5a6b7d;text-align:center;margin:0;font-size:1.05rem}.tombol{border:2px solid var(--garis);border-radius:var(--radius);background:var(--kartu);min-width:64px;min-height:64px;color:var(--tinta);font:inherit;cursor:pointer;box-shadow:0 4px 0 var(--garis);padding:16px 28px;font-size:1.15rem;font-weight:600;transition:transform .12s,box-shadow .12s}.tombol:active{box-shadow:0 1px 0 var(--garis);transform:translateY(3px)}.tombol.besar{background:#ffd45e;border-color:#e0ad2c;padding:22px 56px;font-size:1.6rem;box-shadow:0 6px #e0ad2c}.tombol.besar:active{box-shadow:0 2px #e0ad2c}.tombol.ortu{min-width:48px;min-height:48px;box-shadow:none;opacity:.55;background:0 0;border:none;margin-top:auto;padding:10px 14px;font-size:1.1rem}.tombol.kembali{box-shadow:none;background:0 0;border:none;margin-top:auto;font-size:1.4rem}.tombol.bahaya{background:var(--salah-muda);color:#8a3410;border-color:#f3c6a5;box-shadow:0 4px #f3c6a5}.home{text-align:center;justify-content:center}.maskot{font-size:clamp(4rem,18vw,7rem);line-height:1;animation:2.6s ease-in-out infinite naik-turun}@keyframes naik-turun{50%{transform:translateY(-10px)}}.grid-tema{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;width:100%;display:grid}.kartu{border:2px solid var(--garis);border-radius:var(--radius);background:var(--kartu);min-height:150px;color:inherit;font:inherit;cursor:pointer;box-shadow:0 4px 0 var(--garis);flex-direction:column;align-items:center;gap:6px;padding:18px 12px;transition:transform .12s;display:flex}.kartu:active{transform:scale(.97)}.kartu-ikon{font-size:2.6rem;line-height:1}.kartu-nama{text-align:center;font-size:1.05rem;font-weight:700}.kartu-bintang{color:#7a6a4f;font-size:.95rem}@media (width<=560px),(height<=780px){.grid-tema{grid-template-columns:repeat(3,1fr);gap:10px}.kartu{min-height:104px;padding:10px 4px}.kartu-ikon{font-size:1.9rem}.kartu-nama{font-size:.82rem}.kartu-bintang{font-size:.8rem}}.sesi{justify-content:flex-start;gap:12px}.sesi-header{justify-content:space-between;align-items:center;gap:12px;width:100%;display:flex}.ikon{border:2px solid var(--garis);background:var(--kartu);cursor:pointer;min-width:64px;min-height:64px;box-shadow:0 3px 0 var(--garis);border-radius:18px;font-size:1.5rem}.progres{gap:8px;display:flex}.titik{background:#f0ddc1;border-radius:50%;width:14px;height:14px}.titik.isi{background:#f0a91f}.titik.kini{outline-offset:2px;outline:3px solid #f0a91f}.panggung{border-radius:var(--radius);background:var(--kartu);border:2px solid var(--garis);flex:1;justify-content:center;align-items:center;width:100%;min-height:34vh;padding:16px;display:flex}.kumpulan{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;max-width:100%;display:flex}.kumpulan .item{font-size:clamp(2.4rem,9vw,3.4rem);line-height:1}.kumpulan.kecil{gap:6px}.kumpulan.kecil .item{font-size:clamp(1.6rem,6vw,2.1rem)}.kumpulan.deret .item{font-size:clamp(2.2rem,8vw,3.1rem)}.kumpulan.gabung .op{margin:0 4px;font-size:clamp(1.6rem,6vw,2.4rem);font-weight:700}.item.angka-kecil{color:#2b6cb0;font-size:clamp(2rem,8vw,2.8rem);font-weight:800}.bintik-grid{background:#f1f7fc;border:2px solid #c9dcee;border-radius:16px;place-content:center;gap:12px;padding:16px;display:grid}.bintik{aspect-ratio:1;background:#4a90d9;border-radius:50%;width:clamp(18px,6vw,28px)}.bintik-grid.kecil{background:0 0;border:0;grid-template-columns:repeat(3,auto);gap:6px;padding:8px}.bintik-grid.kecil .bintik{width:clamp(9px,2.6vw,13px)}.jam{font-variant-numeric:tabular-nums;color:var(--teks-lembut);border:2px solid var(--garis);border-radius:999px;padding:8px 14px;font-size:clamp(1rem,4vw,1.25rem);font-weight:700}.jam.habis{color:#b4520f;border-color:#e8b57a}.tombol.olimpiade{color:#975a16;background:#fff7ec;border-color:#e8b57a;font-weight:700}.item.tanya{color:#b98a2e;font-size:clamp(1.8rem,7vw,2.6rem);font-weight:700}.angka-besar{color:#2b6cb0;font-size:clamp(5rem,26vw,9rem);font-weight:800;line-height:1}.tanya-besar{font-size:clamp(3.5rem,16vw,6rem)}.bentuk{fill:#5aa9e6;width:clamp(84px,26vw,130px);height:clamp(84px,26vw,130px)}.adegan{width:clamp(180px,60vw,280px);height:clamp(180px,60vw,280px)}.adegan .kotak{fill:#e8b876;stroke:#b58a4a;stroke-width:3px}.adegan .bola{fill:#ef4444}.tanya-teks{text-align:center;margin:0;font-size:clamp(1.1rem,3.6vw,1.35rem);font-weight:700}.pilihan{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;width:100%;display:grid}.opsi{border:3px solid var(--garis);border-radius:var(--radius);background:var(--kartu);min-height:110px;color:inherit;font:inherit;cursor:pointer;box-shadow:0 5px 0 var(--garis);justify-content:center;align-items:center;padding:12px;transition:transform .12s,background-color .16s,opacity .16s;display:flex}.opsi:active{transform:scale(.97)}.opsi.benar{background:var(--benar-muda);border-color:var(--benar);box-shadow:0 5px 0 var(--benar)}.opsi.pilih{opacity:.75;border-color:#2b6cb0;box-shadow:0 0 0 3px #2b6cb040}.opsi.salah{background:var(--salah-muda);opacity:.45;box-shadow:none;border-color:#f3c6a5}.angka-pilihan{color:#2b6cb0;font-size:clamp(2.4rem,10vw,3.4rem);font-weight:800}.emoji-pilihan{font-size:clamp(2.2rem,9vw,3rem);line-height:1}.panah{font-size:clamp(2.4rem,10vw,3.4rem)}.umpan{min-height:1.5rem;color:var(--salah);margin:0;font-size:1.05rem;font-weight:600}.hitung-soal{color:#8a6a4a;font-size:1rem;font-weight:700}.stiker-baris{flex-wrap:wrap;justify-content:center;gap:6px;max-width:22rem;display:flex}.stiker{font-size:clamp(1.5rem,6vw,2rem);line-height:1;animation:.26s both muncul}.stiker.besar{font-size:clamp(3rem,16vw,4.5rem);display:block}.stiker-baru{justify-items:center;gap:2px;display:grid}.skor{align-items:baseline;gap:4px;display:flex}.skor b{color:var(--benar);font-size:clamp(3rem,16vw,4.5rem)}.skor span{color:#8a6a4a;font-size:clamp(1.4rem,7vw,2rem);font-weight:700}.hasil{text-align:center;justify-content:center}.bintang-baris{gap:6px;font-size:clamp(2rem,10vw,3rem);display:flex}.bintang{filter:grayscale()opacity(.35)}.bintang.isi{filter:none;animation:.32s both muncul}@keyframes muncul{0%{opacity:0;transform:scale(.4)}}.ortu{align-items:stretch;max-width:620px}.ortu h2,.ortu h3{text-align:left}.baris{background:var(--kartu);border:2px solid var(--garis);border-radius:16px;justify-content:space-between;align-items:center;min-height:64px;padding:0 16px;font-size:1.05rem;display:flex}.baris input{accent-color:#2b6cb0;width:28px;height:28px}.catatan{color:#6b5942;margin:0;font-size:.95rem}.riwayat{color:#4a5568;margin:0;padding-left:20px;font-size:.95rem;line-height:1.6}@media (prefers-reduced-motion:reduce){*{transition-duration:.001ms!important;animation-duration:.001ms!important;animation-iteration-count:1!important}}body.tenang *{transition:opacity .12s linear!important;animation:none!important}@media (width<=480px){.pilihan{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:10px}.opsi{min-height:96px}}.tanya-lapis{z-index:10;background:#3a2b1973;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.tanya-kotak{border-radius:var(--radius);background:var(--kartu);border:2px solid var(--garis);text-align:center;gap:20px;width:min(100%,420px);padding:24px;display:grid;box-shadow:0 20px 40px #3a2b1933}.tanya-kotak p{margin:0;font-size:clamp(1.05rem,4vw,1.3rem);font-weight:700}.tanya-aksi{gap:16px;display:flex}.tanya-aksi .tombol{flex:1;min-height:72px}
