html.nara-akun-wait body { visibility: hidden; }

a.akun-link {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 80;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 248, 241, 0.94);
  color: #5c3a32;
  text-decoration: none;
  font-family: "Nunito", "Trebuchet MS", sans-serif;
  font-weight: 800;
  font-size: 0.92rem;
  box-shadow: 0 0 0 3px #f3d7b0;
}
.app:has(#screen-start[hidden]) a.akun-link { display: none; }

/* tombol kembali: hanya di layar awal & layar selesai (tidak mengganggu saat main) */
a.nara-home {
  position: absolute; top: 10px; left: 10px; z-index: 80;
  min-height: 36px; display: none; align-items: center; gap: 6px;
  padding: 6px 12px 6px 9px; border-radius: 999px;
  background: rgba(255, 248, 241, 0.94); color: #5c3a32; text-decoration: none;
  font-family: "Nunito", "Trebuchet MS", sans-serif; font-weight: 800; font-size: 0.92rem;
  box-shadow: 0 0 0 3px #f3d7b0;
}
a.nara-home svg { width: 18px; height: 18px; }
.app:has(#screen-start:not([hidden])) a.nara-home,
.app:has(#screen-done:not([hidden])) a.nara-home { display: inline-flex; }

/* ajakan setelah coba gratis */
.nara-promo { position: fixed; inset: 0; z-index: 200; background: rgba(60, 35, 30, .55); display: flex; align-items: center; justify-content: center; padding: 18px; opacity: 0; transition: opacity .3s; }
.nara-promo.on { opacity: 1; }
.nara-promo-card { position: relative; width: min(100%, 380px); background: #fff8f1; border-radius: 28px; padding: 26px 22px 22px; text-align: center; font-family: "Nunito", "Trebuchet MS", sans-serif; color: #5c3a32; border: 6px solid #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); transform: translateY(30px) scale(.95); transition: transform .4s cubic-bezier(.3, 1.5, .5, 1); }
.nara-promo.on .nara-promo-card { transform: none; }
.nara-promo-card img { height: 110px; margin: -70px auto 6px; display: block; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .2)); }
.nara-promo-card h2 { font-size: 1.35rem; line-height: 1.2; margin: 0 0 8px; font-weight: 900; }
.nara-promo-card p { margin: 0 0 16px; font-weight: 700; line-height: 1.45; font-size: .95rem; color: #8a655c; }
.nara-promo-btn { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: 999px; background: #ffd15c; color: #5c3a32; font-weight: 900; font-size: 1.05rem; text-decoration: none; box-shadow: 0 5px 0 #e0a92a; }
.nara-promo-link { display: inline-block; margin-top: 14px; color: #1aa6b8; font-weight: 800; }
.nara-promo-x { position: absolute; top: 10px; right: 12px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #fdebd0; color: #5c3a32; font-size: 1.4rem; cursor: pointer; }
/* layar selesai: ikon saja agar tidak menutupi judul */
.app:has(#screen-done:not([hidden])) a.nara-home { padding: 0; width: 40px; height: 40px; min-height: 0; justify-content: center; top: 8px; left: 8px; }
.app:has(#screen-done:not([hidden])) a.nara-home span { display: none; }
.app:has(#screen-done:not([hidden])) a.nara-home svg { width: 20px; height: 20px; }