/* Taman Manis: kebun pastel. Pink sakura untuk aksi, matcha untuk papan, kuning bunga matahari untuk hadiah. */
:root {
  --latar: #FBEAF0;
  --latar-2: #F7D6E2;
  --kartu: #FFFFFF;
  --tinta: #3B2B33;
  --tinta-2: #7A6670;
  --pink: #E0528B;
  --pink-tua: #B83A70;
  --pink-muda: #F8C9DA;
  --matcha: #5C8A3A;
  --matcha-tua: #34522A;
  --matcha-muda: #DCEBC8;
  --matahari: #F6C23E;
  --matahari-tua: #C88A0E;
  --garis: rgba(59, 43, 51, .12);
  --bayang: 0 6px 18px rgba(120, 40, 80, .12);
  --sel: 44px;
  --huruf: "Nunito", "Quicksand", ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--huruf); color: var(--tinta); background: var(--latar);
  background-image: radial-gradient(circle at 12% 8%, #FFF6D6 0 90px, transparent 91px), radial-gradient(circle at 92% 22%, #E7F2D9 0 120px, transparent 121px);
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--matahari); outline-offset: 2px; }
#app { max-width: 520px; margin: 0 auto; min-height: 100%; padding: max(14px, env(safe-area-inset-top)) 16px 28px; }

/* ---------- tombol ---------- */
.btn { border: 0; border-radius: 999px; padding: 13px 22px; font-weight: 800; font-size: 16px; background: var(--pink); color: #fff; box-shadow: 0 4px 0 var(--pink-tua); transition: transform .08s, box-shadow .08s; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pink-tua); }
.btn[disabled] { opacity: .6; cursor: wait; }
.btn.hijau { background: var(--matcha); box-shadow: 0 4px 0 var(--matcha-tua); }
.btn.kuning { background: var(--matahari); color: #4A3206; box-shadow: 0 4px 0 var(--matahari-tua); }
.btn.polos { background: var(--kartu); color: var(--tinta); box-shadow: 0 4px 0 var(--garis); }
.btn.kecil { padding: 8px 14px; font-size: 14px; }
.btn.penuh { width: 100%; }

/* ---------- masuk ---------- */
.masuk { padding-top: 6vh; text-align: center; }
.logo { display: flex; justify-content: center; gap: 4px; margin-bottom: 6px; }
.logo svg { width: 64px; height: 64px; }
.logo svg:nth-child(1) { transform: rotate(-12deg) translateY(6px); }
.logo svg:nth-child(3) { transform: rotate(10deg) translateY(6px); }
h1.judul { font-size: 40px; line-height: 1.05; margin: 8px 0 6px; letter-spacing: -.5px; color: var(--pink-tua); }
.sub { color: var(--tinta-2); margin: 0 0 26px; font-size: 16px; }
.kartu { background: var(--kartu); border-radius: 26px; padding: 22px 20px; box-shadow: var(--bayang); text-align: left; }
.pilih { display: grid; grid-template-columns: 1fr 1fr; background: var(--latar); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.pilih button { border: 0; background: transparent; border-radius: 999px; padding: 10px 6px; font-weight: 800; color: var(--tinta-2); }
.pilih button[aria-pressed="true"] { background: var(--kartu); color: var(--pink-tua); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
label { display: block; font-weight: 700; font-size: 14px; margin: 0 0 6px; }
input { width: 100%; border: 2px solid var(--garis); border-radius: 14px; padding: 12px 14px; font: inherit; font-size: 16px; margin-bottom: 14px; background: #FFFCFD; }
input:focus { border-color: var(--pink); outline: none; }
.catatan { font-size: 13px; color: var(--tinta-2); margin: 14px 2px 0; line-height: 1.45; }
.galat { background: #FFE6EE; color: var(--pink-tua); border-radius: 12px; padding: 10px 12px; font-size: 14px; font-weight: 700; margin-bottom: 14px; }

/* ---------- beranda ---------- */
.atas { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.atas .nama { font-weight: 800; font-size: 18px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atas .nama small { display: block; font-weight: 700; font-size: 13px; color: var(--tinta-2); }
.ringkas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.ringkas div { background: var(--kartu); border-radius: 18px; padding: 10px 8px; text-align: center; box-shadow: var(--bayang); }
.ringkas b { display: block; font-size: 22px; line-height: 1.1; }
.ringkas span { font-size: 12px; color: var(--tinta-2); font-weight: 700; }
.tab { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.tab button { border: 0; border-radius: 16px; padding: 11px; font-weight: 800; background: var(--latar-2); color: var(--pink-tua); }
.tab button[aria-selected="true"] { background: var(--pink); color: #fff; }

/* Peta level: jalur berkelok, satu baris tiga level, arah bergantian. */
.peta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px 10px; padding: 6px 4px 10px; }
.peta .baris-balik { direction: rtl; }
.lv { position: relative; aspect-ratio: 1; border-radius: 50%; border: 0; background: var(--kartu); box-shadow: 0 5px 0 var(--garis); font-weight: 900; font-size: 20px; display: grid; place-items: center; }
.lv.selesai { background: var(--matcha-muda); color: var(--matcha-tua); box-shadow: 0 5px 0 #AFCB8C; }
.lv.kini { background: var(--pink); color: #fff; box-shadow: 0 5px 0 var(--pink-tua); animation: denyut 1.6s ease-in-out infinite; }
.lv.kunci { background: #EFE3E8; color: #BFA9B3; box-shadow: none; cursor: not-allowed; }
.lv .bt { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); font-size: 12px; letter-spacing: -1px; color: var(--matahari-tua); white-space: nowrap; }
.lv .bt i { font-style: normal; color: #E2D2D9; }
.lv .bt i.on { color: var(--matahari); text-shadow: 0 1px 0 var(--matahari-tua); }
@keyframes denyut { 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .lv.kini { animation: none; } }

/* ---------- peringkat ---------- */
.papan-skor { background: var(--kartu); border-radius: 22px; box-shadow: var(--bayang); overflow: hidden; }
.papan-skor h3 { margin: 0; padding: 14px 16px 6px; font-size: 16px; }
.papan-skor .ket { padding: 0 16px 10px; margin: 0; font-size: 13px; color: var(--tinta-2); }
.baris { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--garis); }
.baris.saya { background: #FFF1F6; }
.baris .no { font-weight: 900; text-align: center; color: var(--tinta-2); }
.baris .no.n1, .baris .no.n2, .baris .no.n3 { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #4A3206; }
.baris .no.n1 { background: var(--matahari); }
.baris .no.n2 { background: var(--pink-muda); color: var(--pink-tua); }
.baris .no.n3 { background: var(--matcha-muda); color: var(--matcha-tua); }
.baris .siapa { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.baris .siapa small { display: block; font-weight: 700; color: var(--tinta-2); font-size: 12px; }
.baris .angka { text-align: right; font-weight: 900; }
.baris .angka small { display: block; font-weight: 700; color: var(--tinta-2); font-size: 12px; }
.kosong { padding: 22px 16px; text-align: center; color: var(--tinta-2); }
.jarak { height: 14px; }

/* ---------- permainan ---------- */
.kepala { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 10px; }
.kepala h2 { margin: 0; font-size: 20px; text-align: center; }
.statistik { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.statistik div { background: var(--kartu); border-radius: 16px; padding: 8px; text-align: center; box-shadow: var(--bayang); }
.statistik b { display: block; font-size: 22px; line-height: 1.1; }
.statistik span { font-size: 12px; font-weight: 700; color: var(--tinta-2); }
.statistik .habis b { color: var(--pink); }
.bar { position: relative; height: 14px; border-radius: 99px; background: #fff; box-shadow: inset 0 1px 3px rgba(0,0,0,.1); margin: 4px 2px 18px; }
.bar .isi { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--pink-muda), var(--pink)); transition: width .35s; }
.bar .tanda { position: absolute; top: -5px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: #fff; border: 2px solid #E8D6DD; display: grid; place-items: center; font-size: 13px; color: #E2D2D9; }
.bar .tanda.on { border-color: var(--matahari-tua); background: var(--matahari); color: #fff; }

.papan { position: relative; width: calc(var(--sel) * 8 + 12px); height: calc(var(--sel) * 8 + 12px); margin: 0 auto; padding: 6px; border-radius: 22px; background: var(--matcha-tua); box-shadow: 0 8px 0 #24391D, var(--bayang); touch-action: none; user-select: none; -webkit-user-select: none; }
.papan .ruang { position: absolute; inset: 6px; overflow: hidden; border-radius: 16px; }
.sel { position: absolute; width: var(--sel); height: var(--sel); }
.sel::before { content: ""; position: absolute; inset: 1.5px; border-radius: 10px; background: #46683A; }
.sel.ganjil::before { background: #4E7341; }
.sel.j1::before { background: #F3B6CC; box-shadow: inset 0 0 0 2px #F7CCDB; }
.sel.j2::before { background: #E07AA2; box-shadow: inset 0 0 0 3px #F3B6CC; }
.kp { position: absolute; left: 0; top: 0; width: var(--sel); height: var(--sel); padding: 3px; transition: transform .2s cubic-bezier(.3,.9,.4,1.15); will-change: transform; }
.kp.tanpa-transisi { transition: none; }
.kp svg { width: 100%; height: 100%; display: block; pointer-events: none; transition: transform .15s; }
.kp.pilih svg { transform: scale(1.14); }
.kp.pilih::after { content: ""; position: absolute; inset: 1px; border-radius: 12px; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--matahari); }
.kp.hilang svg { transform: scale(0) rotate(40deg); opacity: 0; transition: transform .2s ease-in, opacity .2s; }
.kp.petunjuk svg { animation: goyang .8s ease-in-out infinite; }
@keyframes goyang { 25% { transform: rotate(-10deg) scale(1.06); } 75% { transform: rotate(10deg) scale(1.06); } }
/* Keping khusus */
.kp.s-h::before, .kp.s-v::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; z-index: 1; pointer-events: none; opacity: .9; }
.kp.s-h::before { background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.9) 4px 7px); }
.kp.s-v::before { background: repeating-linear-gradient(90deg, transparent 0 4px, rgba(255,255,255,.9) 4px 7px); }
.kp.s-b svg { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 6px var(--matahari)); }
.kp.s-b::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2.5px dashed #FFF3B0; animation: putar 4s linear infinite; pointer-events: none; }
.kp.s-c svg { animation: putar 6s linear infinite; }
@keyframes putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kp, .kp svg { transition: none !important; animation: none !important; } }

.skor-terbang { position: absolute; z-index: 5; font-weight: 900; color: #fff; font-size: 18px; text-shadow: 0 2px 0 var(--pink-tua); pointer-events: none; animation: terbang .8s ease-out forwards; }
@keyframes terbang { to { transform: translateY(-34px); opacity: 0; } }
.aksi { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }

/* ---------- hasil ---------- */
.layar { position: fixed; inset: 0; background: rgba(59, 43, 51, .45); display: grid; place-items: center; padding: 16px; z-index: 20; animation: muncul .2s; }
.layar .kartu { width: min(420px, 100%); text-align: center; }
.layar h2 { margin: 0 0 4px; font-size: 30px; }
.layar .bintang-besar { font-size: 46px; letter-spacing: 6px; margin: 6px 0; color: #E8D6DD; }
.layar .bintang-besar i { font-style: normal; }
.layar .bintang-besar i.on { color: var(--matahari); text-shadow: 0 3px 0 var(--matahari-tua); }
.layar .skor { font-size: 34px; font-weight: 900; color: var(--pink-tua); }
.layar p { color: var(--tinta-2); margin: 6px 0 16px; }
.layar .tombol { display: grid; gap: 10px; }
@keyframes muncul { from { opacity: 0; } }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 40px); background: var(--tinta); color: #fff; border-radius: 14px; padding: 11px 16px; font-weight: 700; font-size: 14px; opacity: 0; transition: .25s; pointer-events: none; max-width: calc(100% - 32px); z-index: 30; }
#toast.on { opacity: 1; transform: translate(-50%, 0); }
.muat { text-align: center; padding: 40px 0; color: var(--tinta-2); font-weight: 700; }
.tengah { text-align: center; }