/* Gaya Kafe Cilik. Sumber: docs/GDD.md bagian 12 (palet, tipografi, garis, bayangan, sudut, komponen), dasar dari mockup/gaya.css. */

@font-face { font-family: 'Lilita One'; src: url('../assets/fonts/lilita-one-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Andika'; src: url('../assets/fonts/andika-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: block; }
@font-face { font-family: 'Andika'; src: url('../assets/fonts/andika-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: block; }

:root {
  --tinta: #3B2314; --krem: #FFF5E4; --mangga: #FFB627; --pandan: #3FAE8C;
  --jambu: #F27A7D; --kayu: #C0723E; --papan: #2E4A42; --persik: #FFDDB5;
  --mangga-gelap: #CE9122; --pandan-gelap: #3E8B6E; --jambu-gelap: #C46463; --kayu-gelap: #9F5E34;
  --krem-gelap: #CEC0B0; --papan-gelap: #314036; --persik-gelap: #CEAE8D;
  --mangga-terang: #FFCF73; --pandan-terang: #8CCAAF; --jambu-terang: #F7ABA6; --kayu-terang: #D9A680; --persik-terang: #FFE7C8;
  --bayang: rgba(59, 35, 20, .3);
  --font-judul: 'Lilita One', 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
  --font-isi: 'Andika', 'Trebuchet MS', 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--persik-gelap); }
body { font-family: var(--font-isi); color: var(--tinta); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
p { margin: 0; }
button { font-family: inherit; color: inherit; }

/* Panggung logis 1280x720 (js/engine/scene.js), letterbox senada latar */
#stage { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; overflow: hidden; transform-origin: 0 0; background: var(--persik); }
#scene-root { position: absolute; inset: 0; }
#cover { position: absolute; inset: 0; z-index: 50; background: var(--krem); opacity: 0; pointer-events: none; }
#rotate { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; background: var(--papan); color: var(--krem); font: 700 24px/1.3 var(--font-isi); text-align: center; }
#rotate svg { width: 120px; height: 120px; }
.lapis, .lapis-gambar { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; }
.lapis > svg { display: block; }
.lapis-gambar { pointer-events: none; display: block; }
.tersembunyi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Tombol "kue tebal": badan berwarna + alas 8 px versi gelap + garis 4 px. Ditekan: turun 6 px dan skala 0,95. */
.tombol {
  position: absolute; display: block; margin: 0; padding: 0 0 8px; min-height: 64px;
  border: 4px solid var(--tinta); border-radius: 22px; background: var(--alas, var(--mangga-gelap));
  font: 400 28px/1 var(--font-judul); color: var(--tinta); cursor: pointer; transition: transform .08s ease-out;
}
.tombol > .badan {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%;
  padding: 0 14px; border-radius: 18px; border-bottom: 4px solid var(--tinta);
  background: var(--badan, var(--mangga)); box-shadow: inset 0 4px 0 rgba(255, 255, 255, .4);
  white-space: nowrap; transition: transform .08s ease-out;
}
.tombol:active, .tombol.ditekan { transform: scale(.95); }
.tombol:active > .badan, .tombol.ditekan > .badan { transform: translateY(6px); }
.tombol:disabled { cursor: default; }
.tombol:disabled > .badan { opacity: .5; }
.tombol:focus { outline: none; }
.kibor .tombol:focus-visible, .kibor .item-etalase:focus-visible, .kibor .kartu-kata:focus-visible, .kibor .papan-pilih:focus-visible { outline: 4px dashed var(--tinta); outline-offset: 4px; }
.tombol.utama { --badan: var(--mangga); --alas: var(--mangga-gelap); }
.tombol.kedua { --badan: var(--pandan); --alas: var(--pandan-gelap); }
.tombol.ketiga { --badan: var(--krem); --alas: var(--krem-gelap); }
.tombol.ikon { width: 64px; height: 64px; border-radius: 20px; }
.tombol.ikon > .badan { padding: 0; border-radius: 16px; }
.tombol.ikon svg { display: block; }
.tombol.alir { position: relative; flex: none; }
.tombol.lebar { min-width: 300px; height: 74px; }

/* Panel dan papan HUD: Krem, sudut 24, garis 4 px, bayangan pelat padat 6 px */
.papan-hud, .balon { position: absolute; background: var(--krem); border: 4px solid var(--tinta); border-radius: 24px; box-shadow: 0 6px 0 var(--bayang); }
.papan-level { padding: 6px 14px 0; }
.judul-level { font: 400 24px/30px var(--font-judul); white-space: nowrap; }
.cangkir-pelanggan { display: flex; gap: 2px; margin-top: 2px; }
.cangkir-pelanggan svg { display: block; }
.instruksi { display: flex; align-items: center; gap: 12px; padding: 0 4px 0 6px; }
.instruksi .potret svg { display: block; }
.instruksi .teks-instruksi { flex: 1; max-height: 64px; font: 700 24px/30px var(--font-isi); }
.chip-kas { display: flex; align-items: center; gap: 10px; padding: 0 12px; }
.chip-kas .kolom { display: flex; flex-direction: column; }
.chip-kas svg { flex: none; }
.chip-kas .label-kas { font: 700 20px/20px var(--font-isi); }
.chip-kas .nilai-kas { font: 400 28px/30px var(--font-judul); white-space: nowrap; }

/* Balon dialog */
.balon .ucapan { font: 700 30px/1.25 var(--font-isi); }
.balon-main { padding: 10px 0 0 18px; }
.balon-main .nama-pelanggan { display: inline-block; padding: 2px 10px; border-radius: 12px; background: var(--pandan-terang); font: 700 20px/24px var(--font-isi); }
.balon-main .ucapan { margin-top: 10px; width: calc(100% - 100px); }
.balon-main.tanpa-tombol .ucapan { width: calc(100% - 20px); }
.balon-main .tombol-balon { position: absolute; right: 6px; top: 4px; display: flex; flex-direction: column; gap: 8px; }
.balon-judul { display: flex; align-items: center; justify-content: center; padding: 10px 18px; text-align: center; }
.balon .kata { border-radius: 8px; transition: background .1s; }
.balon .kata.aktif { background: var(--mangga-terang); box-shadow: 0 0 0 3px var(--mangga-terang); }
.balon .dengarkan { display: inline-flex; align-items: center; gap: 12px; font: 400 32px/1 var(--font-judul); color: var(--kayu); }
.balon .dengarkan svg { display: block; }
.ekor { position: absolute; display: block; overflow: visible; }
.ekor-bawah { bottom: -30px; }
.ekor-kiri { left: -30px; }

/* Overlay bergaya kertas menu dengan pita kepala bergaris tenda */
.overlay { position: absolute; inset: 0; z-index: 47; display: flex; align-items: center; justify-content: center; background: rgba(59, 35, 20, .45); }
.panel.kertas { position: relative; display: flex; flex-direction: column; align-items: center; max-width: 1220px; max-height: 690px; padding: 62px 30px 26px; background: var(--krem); border: 4px solid var(--tinta); border-radius: 24px; box-shadow: 0 6px 0 var(--bayang); }
.pita-kepala {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -45%); min-width: 320px; padding: 12px 40px;
  border: 4px solid var(--tinta); border-radius: 18px; box-shadow: 0 6px 0 var(--bayang);
  background: repeating-linear-gradient(90deg, var(--pandan) 0 28px, var(--pandan-terang) 28px 56px);
  font: 400 32px/1 var(--font-judul); text-align: center; white-space: nowrap;
}
.isi-panel { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.grid-sakelar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.baris-sakelar { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 540px; min-height: 76px; padding: 4px 6px 4px 14px; border-radius: 16px; background: var(--persik-terang); border: 3px solid var(--krem-gelap); }
.label-sakelar { display: flex; flex-direction: column; font: 700 24px/1.15 var(--font-isi); }
.label-sakelar small { font: 400 20px/1.2 var(--font-isi); }
.tombol.sakelar { width: 150px; height: 64px; font: 700 22px/1 var(--font-isi); --badan: var(--krem-gelap); --alas: #A89A8C; }
.tombol.sakelar.nyala { --badan: var(--pandan); --alas: var(--pandan-gelap); }
.tombol.sakelar > .badan { justify-content: space-between; padding: 0 10px; }
.tombol.sakelar.nyala > .badan { flex-direction: row-reverse; }
.kenop { width: 30px; height: 30px; border-radius: 50%; background: var(--krem); border: 3px solid var(--tinta); }
.tombol.hapus { min-width: 230px; height: 64px; font: 700 22px/1 var(--font-isi); }
.teks-info { width: 780px; display: flex; flex-direction: column; gap: 12px; font: 400 24px/1.4 var(--font-isi); }
/* Informasi dan Referensi bertab, Pengembang berfoto */
.panel-info .teks-info.isi-tab { width: 1020px; min-height: 430px; gap: 10px; font: 400 24px/1.35 var(--font-isi); }
.teks-info p { margin: 0; }
.daftar-info { margin: 0; padding-left: 32px; display: flex; flex-direction: column; gap: 6px; }
.sorot-info { font-weight: 700; color: var(--pandan-gelap); }
.kecil-info { font-size: 20px; color: var(--kayu-gelap); }
.baris-info { display: flex; flex-direction: column; gap: 8px; }
.baris-info > div { display: grid; grid-template-columns: 300px 1fr; gap: 14px; padding: 6px 14px; border-radius: 14px; background: var(--persik-terang); border: 3px solid var(--krem-gelap); }
.pustaka { padding-left: 36px; text-indent: -36px; }
.kartu-pengembang { display: grid; grid-template-columns: 200px 1fr; gap: 16px 32px; width: 920px; align-items: center; font: 400 24px/1.35 var(--font-isi); }
.foto-pengembang { width: 200px; height: 200px; border-radius: 50%; overflow: hidden; border: 5px solid var(--tinta); background: var(--persik-terang); box-shadow: 0 6px 0 var(--bayang); }
.foto-pengembang img, .foto-pengembang svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.data-pengembang { display: flex; flex-direction: column; gap: 4px; }
.nama-pengembang { font: 400 44px/1.1 var(--font-judul); }
.prestasi { grid-column: 1 / -1; }
.prestasi .daftar-info { margin-top: 6px; }
/* beberapa pengembang digeser dengan panah; tinggi kartu tetap supaya panah tidak melompat */
.geser-pengembang { display: flex; align-items: center; gap: 18px; }
.geser-pengembang .kartu-pengembang { width: 860px; min-height: 450px; align-content: center; }
.tombol.ikon.panah-kiri svg { transform: scaleX(-1); }
.baris-ikon { display: inline-flex; align-items: center; gap: 10px; }
.baris-ikon img { width: 32px; height: 32px; flex: none; }
.urutan-pengembang { margin: 0; font: 700 20px/1 var(--font-isi); color: var(--kayu-gelap); }
.tujuan-info { padding: 12px 18px; border-radius: 16px; background: var(--persik-terang); border: 3px solid var(--krem-gelap); }
/* isian nama dan sekolah */
.panel-identitas { width: 780px; }
.ajak-identitas { margin: 0; max-width: 680px; font: 700 24px/1.3 var(--font-isi); text-align: center; }
.isian { display: flex; align-items: center; gap: 16px; width: 680px; }
.isian span { width: 130px; font: 700 26px/1 var(--font-isi); }
.isian input { flex: 1; min-width: 0; height: 64px; padding: 0 16px; border: 4px solid var(--tinta); border-radius: 16px; background: #FFFFFF; font: 700 28px/1 var(--font-isi); color: var(--tinta); }
.isian input:focus { outline: 4px solid var(--mangga); outline-offset: 2px; }
.panel-identitas .baris-tombol { margin-top: 6px; }
/* sertifikat */
.kanvas-sertifikat { position: absolute; left: 136px; top: 10px; width: 1008px; height: 630px; border-radius: 12px; box-shadow: 0 8px 0 var(--bayang); }
.baris-sertifikat { position: absolute; left: 0; top: 648px; width: 1280px; display: flex; justify-content: center; gap: 20px; }
.grid-menu { display: grid; grid-template-columns: repeat(6, 178px); gap: 12px; }
.sel-menu { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px 10px; border-radius: 16px; background: var(--persik-terang); border: 3px solid var(--krem-gelap); }
.sel-menu svg { display: block; }
.nama-menu { font: 700 22px/1.15 var(--font-isi); text-align: center; white-space: nowrap; }
.arti-menu { font: 400 20px/1.2 var(--font-isi); white-space: nowrap; }
.harga-menu { font: 700 20px/1.2 var(--font-isi); color: var(--kayu-gelap); }
.baris-harga { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.panel-buku { width: 1180px; height: 660px; }
.panel-buku .isi-panel { width: 100%; height: 100%; }
.tab-buku { display: flex; gap: 12px; }
.tombol.tab { min-width: 170px; }
.tombol.tab.aktif { --badan: var(--mangga); --alas: var(--mangga-gelap); }
.tombol.tutup-tab { margin-left: 40px; }
.isi-buku { flex: 1; display: flex; align-items: flex-start; justify-content: center; width: 100%; }
.daftar-ungkapan { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; width: 1100px; }
.baris-ungkapan { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 8px 6px 14px; border-radius: 16px; background: var(--persik-terang); border: 3px solid var(--krem-gelap); }
.baris-ungkapan span { display: flex; flex-direction: column; font: 700 24px/1.2 var(--font-isi); }
.baris-ungkapan small { font: 400 20px/1.2 var(--font-isi); }
.daftar-angka { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; width: 1100px; }
.baris-angka { display: flex; align-items: center; gap: 12px; padding: 4px 8px 4px 14px; border-radius: 16px; background: var(--persik-terang); border: 3px solid var(--krem-gelap); font: 400 24px/1.2 var(--font-isi); }
.baris-angka .nilai { min-width: 60px; font: 400 30px/1 var(--font-judul); }
.baris-angka .kata { flex: 1; }
.baris-angka .kata b { color: var(--jambu-gelap); }
.catatan-angka { grid-column: 1 / -1; font: 700 22px/1.2 var(--font-isi); text-align: center; }
.teks-guru { width: 900px; font: 400 22px/1.35 var(--font-isi); }
.teks-guru table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.teks-guru th, .teks-guru td { padding: 4px 10px; border-bottom: 2px solid var(--krem-gelap); text-align: left; }
.teks-guru th { font-weight: 700; }
.teks-guru .kecil { font-size: 20px; margin-top: 4px; }
.status-dikuasai { color: var(--pandan-gelap); font-weight: 700; }
.status-berkembang { color: var(--kayu-gelap); font-weight: 700; }
.status-latihan { color: var(--jambu-gelap); font-weight: 700; }
.toast { position: absolute; left: 50%; bottom: 150px; z-index: 60; pointer-events: none; max-width: 900px; padding: 14px 26px; transform: translateX(-50%); background: var(--krem); border: 4px solid var(--tinta); border-radius: 20px; box-shadow: 0 6px 0 var(--bayang); font: 700 24px/1.25 var(--font-isi); text-align: center; }

/* Tangan penunjuk dan partikel */
.tangan-penunjuk { position: absolute; z-index: 45; width: 120px; height: 140px; pointer-events: none; opacity: 0; transition: opacity .2s; }
.tangan-penunjuk.tampil { opacity: 1; }
.tangan-penunjuk.bawah svg { transform: scaleY(-1); }
/* tangan gambar: ujung jari di titik (0,0) elemen; dibalik lewat transform pada elemen */
.tangan-penunjuk.gambar { width: 0; height: 0; overflow: visible; transform-origin: 0 0; }
.tangan-penunjuk.gambar img { position: absolute; display: block; animation: tunjuk-gambar 1.1s ease-in-out infinite; }
@keyframes tunjuk-gambar { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(9px, 9px); } }
.kurangi-gerak .tangan-penunjuk.gambar img { animation: none; }
.tangan-penunjuk svg { display: block; overflow: visible; }
.kanvas-partikel { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; z-index: 44; pointer-events: none; }

/* Etalase dan kartu kata (Level 1, hook) */
.item-etalase { position: absolute; display: flex; flex-direction: column; align-items: center; width: 150px; height: 142px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: opacity .2s; }
.item-etalase svg { display: block; pointer-events: none; overflow: visible; }
.item-etalase .label-item { margin-top: -4px; padding: 0 10px; border-radius: 10px; background: var(--krem); border: 3px solid var(--tinta); font: 700 20px/26px var(--font-isi); white-space: nowrap; visibility: hidden; }
.item-etalase.berlabel .label-item { visibility: visible; }
.item-etalase.redup { opacity: .3; }
.item-etalase.sorot::before, .item-etalase.denyut-item::before { content: ''; position: absolute; inset: -6px -4px; border: 5px solid var(--mangga); border-radius: 22px; animation: denyut 1.1s ease-in-out infinite; }
.item-etalase.siap-cocok::after { content: ''; position: absolute; inset: -6px -4px; border: 4px dashed var(--pandan-gelap); border-radius: 22px; }
.kartu-kata { position: absolute; z-index: 5; display: flex; align-items: center; justify-content: center; width: 220px; height: 72px; padding: 0 8px; background: var(--krem); border: 4px solid var(--tinta); border-radius: 16px; box-shadow: 0 6px 0 var(--bayang); font: 700 26px/1 var(--font-isi); white-space: nowrap; cursor: grab; touch-action: none; }
.kartu-kata.terpilih { background: var(--mangga-terang); }
.kartu-kata.seret { z-index: 30; cursor: grabbing; box-shadow: 0 14px 0 var(--bayang); }
.kartu-kata.selesai { visibility: hidden; }
.item-etalase.kecil { width: 98px; height: 142px; }
.item-etalase.kecil .label-item { max-width: 98px; margin-top: -2px; padding: 1px 3px; border-width: 2px; font: 700 20px/21px var(--font-isi); white-space: normal; text-align: center; }
.deret-kartu, .deret-pilihan { position: absolute; inset: 0; pointer-events: none; }
.deret-pilihan > * { pointer-events: auto; }
.kartu-kalimat { position: absolute; z-index: 6; display: flex; align-items: center; gap: 10px; width: 354px; min-height: 92px; padding: 8px 14px; background: var(--krem); border: 4px solid var(--tinta); border-radius: 16px; box-shadow: 0 6px 0 var(--bayang); font: 700 24px/1.2 var(--font-isi); text-align: left; cursor: pointer; pointer-events: auto; transition: transform .08s; }
/* kartu di rak bawah: teks isi 24 px; ikon gelembung disembunyikan supaya kalimat harga terpanjang tetap 2 baris */
.deret-bawah .kartu-kalimat { width: 400px; min-height: 96px; font-size: 24px; }
.deret-bawah .kartu-kalimat > svg { display: none; }
.balon-lebar .ucapan { width: calc(100% - 20px); font-size: 28px; }
.balon-lebar .tombol-balon { top: auto; bottom: 8px; right: 8px; flex-direction: row; }
.kartu-kalimat svg { flex: none; display: block; }
.kartu-kalimat small { display: block; margin-top: 2px; font: 700 20px/1.1 var(--font-isi); color: var(--kayu-gelap); }
.kartu-kalimat.dipilih { background: var(--mangga-terang); }
.kartu-kalimat:active { transform: scale(.97); }
.kibor .kartu-kalimat:focus-visible, .kibor .porsi:focus-visible, .kibor .uang-laci:focus-visible, .kibor .uang-nampan:focus-visible { outline: 4px dashed var(--tinta); outline-offset: 3px; }
.nampan-pesanan { position: absolute; left: 20px; top: 444px; width: 270px; height: 150px; }
.nampan-pesanan > svg, .nampan-kembalian > svg, .struk-toko > svg { position: absolute; left: 0; top: 0; }
.porsi, .uang-laci, .uang-nampan { position: absolute; padding: 0; border: 0; background: transparent; cursor: pointer; }
.porsi { width: 78px; height: 65px; }
.porsi svg, .uang-laci svg, .uang-nampan svg, .uang-meja svg { display: block; pointer-events: none; }
.struk-toko { position: absolute; left: 906px; top: 100px; width: 354px; height: 160px; }
.struk-toko .isi-struk { left: 20px; top: 12px; width: 314px; height: 132px; }
.isi-menu { position: absolute; color: var(--krem); }
.isi-menu .judul-menu { font: 400 24px/28px var(--font-judul); text-align: center; letter-spacing: 2px; }
.isi-menu .baris { display: flex; justify-content: space-between; gap: 8px; border-radius: 12px; font: 700 20px/22px var(--font-isi); white-space: nowrap; }
.isi-menu .harga { color: var(--mangga); font-weight: 700; }
.isi-struk { position: absolute; }
.isi-struk .baris { display: flex; justify-content: space-between; font: 700 22px/28px var(--font-isi); white-space: nowrap; }
.isi-struk .total { margin-top: 6px; padding-top: 6px; border-top: 3px dashed var(--kayu); font-size: 24px; }
.isi-struk .baris { border-radius: 8px; transition: background-color .15s; }
.isi-struk .baris.menyala { background: var(--mangga-terang); }
.isi-struk .sub { margin-left: 10px; }
.chip-kembalian { position: absolute; display: flex; align-items: center; justify-content: center; padding: 0 10px; background: var(--krem); border: 3px solid var(--tinta); border-radius: 12px; font: 700 20px/1 var(--font-isi); white-space: nowrap; }
.isi-menu .baris.lingkar { box-shadow: 0 0 0 3px var(--krem); }
.isi-menu .harga.belum { color: var(--krem); }
.balon .kata.terlewat { background: var(--jambu-terang); box-shadow: 0 0 0 3px var(--jambu-terang); }
.layar-angka { position: absolute; left: 700px; top: 462px; width: 300px; height: 88px; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--papan); border: 4px solid var(--tinta); border-radius: 18px; box-shadow: 0 6px 0 var(--bayang); color: var(--krem); font: 400 44px/1 var(--font-judul); }
.layar-angka span { font-size: 30px; color: var(--mangga); }
/* gambar dapur L1 hanya setinggi dinding (1280x440) */
.lapis-gambar.latar-gambar { height: 440px; }
.garis-bilangan { position: absolute; left: 562px; top: 274px; width: 698px; height: 152px; }
/* L3: kontras -teen/-ty (suku kata bertekanan dibesarkan) */
/* panel muncul memantul (CSS, tetap berjalan saat tween dijeda) */
.panel-muncul { animation: panel-muncul .26s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes panel-muncul { from { transform: scale(.9); } to { transform: scale(1); } }
.kontras-angka { position: absolute; left: 906px; top: 272px; width: 354px; box-sizing: border-box; padding: 8px 14px; background: var(--krem); border: 4px solid var(--tinta); border-radius: 18px; box-shadow: 0 6px 0 var(--bayang); }
.baris-kontras { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font: 400 24px/1.5 var(--font-isi); white-space: nowrap; }
.baris-kontras .tekan { font: 700 30px/1 var(--font-isi); color: var(--jambu-gelap, #B4524F); }
.baris-kontras .nilai { font-weight: 700; }
.baris-kontras.benar .nilai { color: var(--pandan-gelap); }
/* L5: cangkir kesabaran di samping pelanggan, dengan bintang bonus */
.kesabaran .bintang-bonus { position: absolute; right: -14px; bottom: -10px; }
.kesabaran .bintang-bonus svg { display: block; }
/* instruksi yang dirender lebih lebar di perangkat lain: jarak huruf dirapatkan, ukuran tetap 24 px */
.teks-instruksi.padat { letter-spacing: -0.5px; word-spacing: -1px; }
.kesabaran { position: absolute; left: 474px; top: 100px; width: 76px; height: 76px; pointer-events: none; }
.kesabaran svg { display: block; overflow: visible; }
.garis-bilangan svg { display: block; overflow: visible; }
.uang-pelanggan { position: absolute; left: 306px; top: 470px; width: 240px; height: 120px; pointer-events: none; }
.uang-meja { position: absolute; transform: rotate(-5deg); }
.nampan-kembalian { position: absolute; left: 560px; top: 444px; width: 440px; height: 150px; }
.chip-nampan { left: 18px; top: 12px; width: 216px; height: 40px; }
.lapis-item, .lapis-kartu { position: absolute; inset: 0; pointer-events: none; }
.lapis-item > *, .lapis-kartu > * { pointer-events: auto; }

/* Layar muat */
#muat { position: absolute; inset: 0; z-index: 70; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: var(--krem); transition: opacity .4s; }
#muat.tutup { opacity: 0; }
.muat-logo svg, .muat-cangkir svg { display: block; }
.muat-teks { font: 700 24px/1.2 var(--font-isi); }
.muat-tip { max-width: 760px; margin-top: 10px; padding: 12px 22px; border-radius: 18px; background: var(--persik-terang); border: 3px solid var(--krem-gelap); font: 400 24px/1.35 var(--font-isi); text-align: center; }

/* Pilih Level */
.judul-pilih { position: absolute; left: 650px; top: 96px; width: 560px; font: 400 44px/1 var(--font-judul); text-align: center; }
.papan-pilih { position: absolute; display: flex; align-items: center; gap: 16px; width: 560px; height: 86px; padding: 0 18px; background: var(--krem); border: 4px solid var(--tinta); border-radius: 22px; box-shadow: 0 6px 0 var(--bayang); font: 700 24px/1.15 var(--font-isi); text-align: left; cursor: pointer; transition: transform .08s; }
.papan-pilih:active { transform: scale(.97); }
.papan-pilih .nomor { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--mangga); border: 4px solid var(--tinta); font: 400 32px/1 var(--font-judul); }
.papan-pilih .nama-level { flex: 1; white-space: nowrap; }
.papan-pilih .bintang-level { display: flex; gap: 2px; }
.papan-pilih .bintang-level svg { display: block; }
.papan-pilih.terkunci { background: var(--krem-gelap); }
.papan-pilih.terkunci .nomor { background: var(--krem); }
/* hiasan kafe yang baru didapat muncul memantul */
.dekor-baru { transform-box: fill-box; transform-origin: 50% 100%; animation: dekor-muncul .6s cubic-bezier(.34, 1.56, .64, 1) .4s both; }
@keyframes dekor-muncul { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.kurangi-gerak .dekor-baru { animation: none; }
.chip-santai { position: absolute; left: 860px; top: 14px; width: 400px; background: var(--krem); border-color: var(--tinta); border-width: 4px; box-shadow: 0 6px 0 var(--bayang); }

/* Hasil Belajarku */
.panel-hasil { position: absolute; left: 520px; top: 34px; width: 730px; height: 652px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 30px; background: var(--krem); border: 4px solid var(--tinta); border-radius: 26px; box-shadow: 0 6px 0 var(--bayang); }
.judul-hasil { font: 400 48px/1.05 var(--font-judul); }
.sub-hasil { font: 700 24px/1.2 var(--font-isi); }
.bintang-hasil { display: flex; gap: 16px; height: 92px; align-items: center; }
.sub-hasil .pisah { margin: 0 8px; color: var(--krem-gelap); }
.bintang-hasil svg { display: block; }
.kuasai { width: 100%; padding: 12px 18px; border-radius: 18px; background: var(--persik-terang); border: 3px solid var(--krem-gelap); }
.kuasai h2 { margin: 0 0 6px; font: 400 28px/1.1 var(--font-judul); }
.kuasai ul { margin: 0; padding-left: 0; list-style: none; font: 700 24px/1.35 var(--font-isi); }
.kuasai li { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 2px 0; }
.chip-status { flex: none; padding: 0 12px; border-radius: 12px; border: 3px solid var(--tinta); font: 700 20px/28px var(--font-isi); }
.chip-status.status-dikuasai { background: var(--pandan-terang); }
.chip-status.status-berkembang { background: var(--mangga-terang); }
.chip-status.status-latihan { background: var(--krem); }
.kuasai.latih { background: var(--krem); border-color: var(--mangga); }
.kuasai.latih p { margin: 0; font: 700 24px/1.3 var(--font-isi); }
.baris-tombol { display: flex; gap: 16px; margin-top: auto; }

/* ---------- Gerak ambient (dimatikan oleh Kurangi animasi dan prefers-reduced-motion) ---------- */
.awan-a { animation: geserAwan 26s ease-in-out infinite alternate; }
.awan-b { animation: geserAwan 34s ease-in-out infinite alternate-reverse; }
@keyframes geserAwan { from { transform: translateX(-30px); } to { transform: translateX(40px); } }
.burung { animation: kepak 6s ease-in-out infinite; }
@keyframes kepak { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-26px, -8px); } }
.napas { transform-box: fill-box; transform-origin: 50% 100%; animation: napas 3.2s ease-in-out infinite; }
@keyframes napas { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.01, 1.02); } }
.mata { transform-box: fill-box; transform-origin: 50% 50%; animation: kedip 4.6s infinite; }
@keyframes kedip { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
.lambai { transform-box: fill-box; transform-origin: 12% 95%; animation: lambai 1.4s ease-in-out infinite alternate; }
@keyframes lambai { from { transform: rotate(-8deg); } to { transform: rotate(10deg); } }
.uap { transform-box: fill-box; transform-origin: 50% 100%; animation: uap 2.6s ease-out infinite; }
@keyframes uap { 0% { transform: translateY(6px) scaleY(.85); opacity: 0; } 35% { opacity: 1; } 100% { transform: translateY(-14px) scaleY(1.1); opacity: 0; } }
.denyut { animation: denyut 1.2s ease-in-out infinite; }
@keyframes denyut { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.tunjuk { animation: tunjuk 1.1s ease-in-out infinite; }
@keyframes tunjuk { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

body.foto *, body.kurangi-gerak * { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }