/* Desa Sukabantu — Prototipe 3D: gaya antarmuka (ringan, tanpa aset luar) */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: #0e1a33; color: #f7efdb;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#adegan, #adegan canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }

/* ---------- Layar judul ---------- */
#judul {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, rgba(14,26,51,0.55) 0%, rgba(14,26,51,0.25) 45%, rgba(14,26,51,0.65) 100%);
  transition: opacity 0.45s ease;
  padding: 20px;
}
#judul.sembunyi { opacity: 0; pointer-events: none; }
.kartu-judul { text-align: center; max-width: 430px; }
.kartu-judul h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 9vw, 56px); line-height: 1.05;
  color: #fdf6e0; text-shadow: 0 3px 18px rgba(0,0,0,0.55);
}
.slogan {
  margin: 14px auto 22px; font-size: clamp(15px, 4vw, 18px); font-style: italic;
  color: #ffe9b8; text-shadow: 0 2px 10px rgba(0,0,0,0.6); max-width: 340px;
}
#masuk {
  font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
  color: #3a2410; background: linear-gradient(180deg, #ffc46a, #f09a3e);
  border: none; border-radius: 999px; padding: 14px 42px;
  box-shadow: 0 6px 22px rgba(0,0,0,0.45);
}
#masuk:disabled { filter: grayscale(0.5) brightness(0.8); cursor: wait; }
#masuk:active { transform: scale(0.97); }
.catatan { margin-top: 14px; font-size: 13px; color: rgba(247,239,219,0.85); }
.catatan.kecil { font-size: 12px; color: rgba(247,239,219,0.6); max-width: 330px; margin-left: auto; margin-right: auto; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 10px; pointer-events: none;
}
.panel-hud {
  background: rgba(18,28,20,0.62); border: 1px solid rgba(255,233,184,0.25);
  border-radius: 12px; padding: 8px 12px; backdrop-filter: blur(3px);
}
/* Baris info kamera & deretan tombol fase DIHAPUS (perintah CEO
   4 Nov — layar simpel): panel hanya memuat status pemain & label
   fase; fase selalu mengikuti jam Asia/Jakarta sungguhan. */
#labelFase { font-size: 12.5px; font-weight: 600; color: #ffd9a0; }
/* Bubble menu DIPERKECIL (perintah CEO 4 Nov ±00:58): fon 12.5px,
   padding ramping, tinggi sasaran ketuk tetap ±36px, label tetap
   terbaca jelas di layar HP kecil. */
#tombolMode {
  pointer-events: auto; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  color: #fdf6e0; background: rgba(122,62,32,0.85); border: 1px solid rgba(255,217,160,0.5);
  border-radius: 999px; padding: 7px 12px; min-height: 36px; box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
#tombolMode:active { transform: scale(0.96); }

/* ---------- Joystick ---------- */
#joy {
  position: fixed; left: 18px; bottom: 20px; z-index: 20;
  width: 118px; height: 118px; border-radius: 50%;
  background: rgba(18,28,20,0.4); border: 1.5px solid rgba(255,233,184,0.4);
  touch-action: none;
}
#joyKnob {
  position: absolute; left: 50%; top: 50%; width: 50px; height: 50px;
  margin: -25px 0 0 -25px; border-radius: 50%;
  background: rgba(255,217,160,0.85); box-shadow: 0 3px 10px rgba(0,0,0,0.4);
  pointer-events: none;
}

/* ---------- Panel akun (publish resmi: hanya Google) ---------- */
.panel-akun {
  margin: 0 auto 18px; max-width: 320px; text-align: left;
  background: rgba(14,24,18,0.72); border: 1px solid rgba(255,233,184,0.3);
  border-radius: 16px; padding: 14px;
}
/* Tombol Google: putih bersih bergaya resmi Google, lebar penuh —
   satu-satunya pintu masuk pada publish resmi. */
.panel-akun button.tombol-google {
  width: 100%; flex: none; display: flex; align-items: center; justify-content: center; gap: 10px;
  color: #3c4043; background: #ffffff; border: 1px solid rgba(0,0,0,0.18);
  border-radius: 999px; padding: 11px 20px; font-size: 15px; box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.panel-akun button.tombol-google svg { flex: 0 0 auto; display: block; }
.panel-akun button {
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  color: #3a2410; background: linear-gradient(180deg, #ffc46a, #f09a3e);
  border: none; border-radius: 999px; padding: 10px 20px; flex: 1;
}
.panel-akun button.sekunder {
  color: #fdf6e0; background: rgba(122,62,32,0.9);
  border: 1px solid rgba(255,217,160,0.5); flex: 0 0 auto;
}
.panel-akun button.kecil { padding: 7px 14px; font-size: 13px; flex: 0 0 auto; }
.panel-akun button:disabled { filter: grayscale(0.5) brightness(0.8); cursor: wait; }
.panel-akun button:active { transform: scale(0.97); }
.pesan-akun { margin-top: 10px; font-size: 12.5px; line-height: 1.45; color: rgba(247,239,219,0.85); }
.pesan-akun.galat { color: #ffb3a0; }
.sesi-teks { font-size: 14px; line-height: 1.5; color: #f7efdb; margin-bottom: 10px; }
.identitas-judul {
  margin-top: 18px; font-size: 11px; letter-spacing: 1.6px; font-weight: 700;
  color: rgba(255,217,160,0.75); text-transform: uppercase;
}

/* ---------- HUD status pemain ---------- */
#panelStatus { margin-top: 8px; border-top: 1px solid rgba(255,233,184,0.22); padding-top: 8px; min-width: 178px; }
.status-tamu-teks { display: block; font-size: 12px; color: rgba(247,239,219,0.85); margin-bottom: 6px; }
#btnMasukDariHud {
  pointer-events: auto; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  color: #3a2410; background: #ffc46a; border: none; border-radius: 999px; padding: 6px 13px;
}
.baris-status { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.koin { font-size: 14.5px; color: #ffe9b8; }
.chip-fase {
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px; color: #241708;
  border-radius: 999px; padding: 3px 9px; background: #7fc24a;
}
.chip-fase.fase-lapar { background: #e8b93e; }
.chip-fase.fase-kurus { background: #e07f2e; color: #fff7ea; }
.chip-fase.fase-lemas { background: #d84b2e; color: #fff7ea; }
.chip-fase.fase-kritis { background: #b01e1e; color: #fff7ea; animation: denyut 1.1s ease-in-out infinite; }
.baris-bar { display: flex; align-items: center; gap: 7px; margin-top: 7px; }
.label-bar { font-size: 11.5px; font-weight: 700; color: rgba(247,239,219,0.9); }
.rel-bar {
  flex: 1; height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,233,184,0.25);
}
.isi-bar { height: 100%; border-radius: 999px; background: #7fc24a; transition: width 0.6s ease, background 0.6s ease; }
.isi-bar.fase-lapar { background: #e8b93e; }
.isi-bar.fase-kurus { background: #e07f2e; }
.isi-bar.fase-lemas { background: #d84b2e; }
.isi-bar.fase-kritis { background: #b01e1e; animation: denyut 1.1s ease-in-out infinite; }
.angka-bar { font-size: 11.5px; font-weight: 700; color: #ffe9b8; min-width: 38px; text-align: right; }
@keyframes denyut { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
.kolom-kanan-hud { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; padding-right: 2px; }
#tombolProfil {
  pointer-events: auto; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  color: #fdf6e0; background: rgba(18,28,20,0.75); border: 1px solid rgba(255,217,160,0.5);
  border-radius: 999px; padding: 7px 12px; min-height: 36px; box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
#tombolProfil:active { transform: scale(0.96); }

/* ---------- Menu Profil ---------- */
#lapisProfil {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(8,14,26,0.62); padding: 16px;
}
#lapisProfil[hidden] { display: none; }
.kartu-profil {
  width: 100%; max-width: 400px; max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, #22331f, #18251a); color: #f7efdb;
  border: 1px solid rgba(255,233,184,0.4); border-radius: 18px; padding: 18px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.55);
}
.kepala-profil { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kepala-profil h2 { font-family: Georgia, "Times New Roman", serif; font-size: 22px; color: #fdf6e0; }
#btnTutupProfil {
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; color: #fdf6e0;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,233,184,0.4);
  border-radius: 50%; width: 34px; height: 34px; line-height: 1;
}
.isi-profil .baris-profil {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 8px 2px; border-bottom: 1px solid rgba(255,233,184,0.14); font-size: 14px;
}
.isi-profil .baris-profil span:first-child { color: rgba(247,239,219,0.75); }
.isi-profil .baris-profil b { color: #ffe9b8; text-align: right; }
.profil-muat { font-size: 13.5px; color: rgba(247,239,219,0.8); padding: 8px 0; }
#seksiKlaim { margin-top: 16px; border-top: 1px solid rgba(255,233,184,0.25); padding-top: 12px; }
#seksiKlaim h3 { font-size: 16px; color: #ffd9a0; margin-bottom: 6px; }
.klaim-teks { font-size: 13px; line-height: 1.5; color: rgba(247,239,219,0.88); margin-bottom: 10px; }
.daftar-kavling { display: flex; flex-wrap: wrap; gap: 7px; }
.daftar-kavling button {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer;
  color: #3a2410; background: #ffc46a; border: none; border-radius: 999px; padding: 8px 14px;
}
.daftar-kavling button:disabled { filter: grayscale(0.6) brightness(0.8); cursor: wait; }
.identitas-profil {
  margin-top: 16px; text-align: center; font-size: 11px; letter-spacing: 1.6px;
  font-weight: 700; color: rgba(255,217,160,0.75); text-transform: uppercase;
}

/* ---------- Lemari (Putaran 3B): ganti-pakai di kartu Profil ---------- */
#seksiLemari { margin-top: 16px; border-top: 1px solid rgba(255,233,184,0.25); padding-top: 12px; }
#seksiLemari h3 { font-size: 16px; color: #ffd9a0; margin-bottom: 6px; }
.subjudul-lemari { font-size: 13.5px; color: #ffd9a0; margin: 12px 0 4px; }
.baris-lemari {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 7px 2px; border-bottom: 1px solid rgba(255,233,184,0.12); font-size: 14px;
}
.nama-lemari { color: #f7efdb; min-width: 0; }
.aksi-lemari { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.tombol-lemari {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  color: #3a2410; background: #ffc46a; border: none; border-radius: 999px; padding: 7px 14px;
}
.tombol-lemari.lepas {
  color: #fdf6e0; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,233,184,0.4);
}
.tombol-lemari:disabled { filter: grayscale(0.6) brightness(0.8); cursor: wait; }
.tombol-lemari:active { transform: scale(0.96); }
.baris-lemari .chip-milik { padding: 5px 10px; }

/* ---------- Kaki identitas (layar main & menu) ---------- */
#kakiIdentitas {
  position: fixed; left: 0; right: 0; bottom: 5px; z-index: 15;
  text-align: center; font-size: 10.5px; letter-spacing: 1.5px; font-weight: 700;
  color: rgba(255,233,184,0.66); text-transform: uppercase; pointer-events: none;
  text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}

/* ---------- Menu Putaran 2: Paket Koin, Tukar Kode, Toko ---------- */
#tombolPaket, #tombolTukar, #tombolToko, #tombolKerja, #tombolJajan, #tombolSapa {
  pointer-events: auto; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  color: #fdf6e0; background: rgba(18,28,20,0.75); border: 1px solid rgba(255,217,160,0.5);
  border-radius: 999px; padding: 7px 12px; min-height: 36px; box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
#tombolPaket:active, #tombolTukar:active, #tombolToko:active, #tombolKerja:active, #tombolJajan:active, #tombolSapa:active { transform: scale(0.96); }
#tombolSapa[disabled] { opacity: 0.55; cursor: wait; }
.lapis-menu {
  position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: rgba(8,14,26,0.62); padding: 16px;
}
.lapis-menu[hidden] { display: none; }
.kartu-menu {
  width: 100%; max-width: 400px; max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, #22331f, #18251a); color: #f7efdb;
  border: 1px solid rgba(255,233,184,0.4); border-radius: 18px; padding: 18px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.55);
}
.kartu-menu .kepala-profil h2 { font-family: Georgia, "Times New Roman", serif; font-size: 22px; color: #fdf6e0; }
.kartu-menu .kepala-profil button {
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer; color: #fdf6e0;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,233,184,0.4);
  border-radius: 50%; width: 34px; height: 34px; line-height: 1; flex: 0 0 auto;
}
.subjudul-menu { font-size: 16px; color: #ffd9a0; margin: 16px 0 8px; }

/* Kartu paket */
.kartu-paket {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,233,184,0.3);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
}
.info-paket { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.info-paket b { font-size: 15.5px; color: #fdf6e0; }
.koin-paket { font-size: 14px; font-weight: 700; color: #ffe9b8; }
.ket-paket { font-size: 12px; line-height: 1.45; color: rgba(247,239,219,0.78); }
.sisi-paket { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: 0 0 auto; }
.harga-paket { font-size: 15px; font-weight: 800; color: #ffd9a0; }
.tombol-beli-paket {
  font: inherit; font-size: 13.5px; font-weight: 700; text-decoration: none; cursor: pointer;
  color: #3a2410; background: linear-gradient(180deg, #ffc46a, #f09a3e);
  border-radius: 999px; padding: 8px 15px; white-space: nowrap;
}
.tombol-beli-paket:active { transform: scale(0.96); }

/* Langkah sesudah bayar + kotak janji */
.langkah { margin: 0 0 4px 20px; font-size: 13px; line-height: 1.55; color: rgba(247,239,219,0.9); }
.langkah li { margin-bottom: 6px; }
.tautan-klaim { word-break: break-all; color: #ffd9a0; font-size: 12px; }
.kotak-janji {
  margin-top: 14px; background: rgba(255,196,106,0.1);
  border: 1px solid rgba(255,196,106,0.45); border-radius: 14px; padding: 12px 14px;
}
.kotak-janji h3 { font-size: 14.5px; color: #ffd9a0; margin-bottom: 6px; }
.kotak-janji p { font-size: 12.5px; line-height: 1.6; color: rgba(247,239,219,0.92); }

/* Tukar kode */
#kodeTukar {
  width: 100%; font: inherit; font-size: 15px; color: #fdf6e0;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,233,184,0.35);
  border-radius: 10px; padding: 12px; margin-bottom: 10px;
  -webkit-user-select: text; user-select: text;
}
#kodeTukar::placeholder { color: rgba(247,239,219,0.5); }

/* Atur nama tampil satu kali (Kartu Sambutan, migrasi 009) */
.kotak-atur-nama {
  text-align: left; margin: 0 0 14px;
  background: rgba(255, 196, 106, 0.10); border: 1px solid rgba(255, 217, 160, 0.45);
  border-radius: 14px; padding: 13px 14px;
}
.kotak-atur-nama .subjudul-menu { margin-top: 0; }
#inpNamaTampil {
  width: 100%; font: inherit; font-size: 15px; color: #fdf6e0;
  background: rgba(255,255,255,0.09); border: 1px solid rgba(255,233,184,0.35);
  border-radius: 10px; padding: 12px; margin-bottom: 10px;
  -webkit-user-select: text; user-select: text;
}
#inpNamaTampil::placeholder { color: rgba(247,239,219,0.5); }
.tombol-utama-lebar {
  width: 100%; font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer;
  color: #3a2410; background: linear-gradient(180deg, #ffc46a, #f09a3e);
  border: none; border-radius: 999px; padding: 12px 20px;
}
.tombol-utama-lebar:disabled { filter: grayscale(0.5) brightness(0.8); cursor: wait; }
.tombol-utama-lebar:active { transform: scale(0.98); }

/* Kartu toko */
.kartu-toko {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,233,184,0.3);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
}
.kartu-toko.dimiliki { border-color: rgba(127,194,74,0.55); }
.kartu-toko.terkunci { opacity: 0.75; border-style: dashed; }
.info-toko { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.info-toko b { font-size: 15px; color: #fdf6e0; }
.info-toko span { font-size: 12px; line-height: 1.45; color: rgba(247,239,219,0.78); }
/* Kartu berpratinjau (renovasi & kosmetik): baris 1 = gambar + info
   melebar, baris 2 = tombol/chip selebar kartu — kolom info tidak
   lagi terjepit gambar & tombol (temuan QC putaran 3: info 93px). */
.kartu-toko.berpratinjau { flex-wrap: wrap; }
.kartu-toko.berpratinjau .info-toko { flex: 1 1 0; }
.kartu-toko.berpratinjau .tombol-segera,
.kartu-toko.berpratinjau .tombol-beli-toko,
.kartu-toko.berpratinjau .chip-milik,
.kartu-toko.berpratinjau .chip-kunci { flex: 1 1 100%; text-align: center; }
.tombol-beli-toko {
  font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; flex: 0 0 auto;
  color: #3a2410; background: linear-gradient(180deg, #ffc46a, #f09a3e);
  border: none; border-radius: 999px; padding: 9px 15px; white-space: nowrap;
}
.tombol-beli-toko:disabled { filter: grayscale(0.5) brightness(0.8); cursor: wait; }
.tombol-beli-toko:active { transform: scale(0.96); }
.chip-milik {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: #1d2b12;
  background: #7fc24a; border-radius: 999px; padding: 6px 12px; white-space: nowrap;
}
.chip-kunci {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: #ffe9b8;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,233,184,0.4);
  border-radius: 999px; padding: 6px 12px; white-space: nowrap;
}

/* ---------- Menu Kerja & Skill (putaran Kerja 4 Nov) ---------- */
.subjudul-kerja {
  font-size: 16px; color: #ffd9a0; margin: 16px 0 8px;
  border-top: 1px solid rgba(255,233,184,0.25); padding-top: 12px;
}
.kartu-kerja-aktif { border-color: rgba(127,194,74,0.55); }
.kartu-skill {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,233,184,0.3);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
}
.kepala-skill { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.kepala-skill b { font-size: 15px; color: #fdf6e0; }
.bintang-skill { font-size: 13px; font-weight: 800; color: #ffd9a0; white-space: nowrap; }
.teks-skill { font-size: 12px; line-height: 1.45; color: rgba(247,239,219,0.78); margin-top: 2px; }
.baris-aksi-kerja { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.baris-aksi-kerja button {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  color: #3a2410; background: linear-gradient(180deg, #ffc46a, #f09a3e);
  border: none; border-radius: 999px; padding: 9px 14px;
}
.baris-aksi-kerja button.sekunder {
  color: #fdf6e0; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,233,184,0.45);
}
.baris-aksi-kerja button:disabled { filter: grayscale(0.5) brightness(0.8); cursor: wait; }
.baris-aksi-kerja button:active { transform: scale(0.96); }
.konfirmasi-kursus { margin-top: 10px; border-top: 1px dashed rgba(255,233,184,0.3); padding-top: 10px; }
.baris-jumlah-kursus { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.tombol-langkah {
  font: inherit; font-size: 17px; font-weight: 800; cursor: pointer; line-height: 1;
  color: #fdf6e0; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,233,184,0.45); border-radius: 50%;
  width: 36px; height: 36px; flex: 0 0 auto;
}
.tombol-langkah:active { transform: scale(0.94); }
.jumlah-kursus { font-size: 16px; font-weight: 800; color: #ffe9b8; min-width: 86px; text-align: center; }

/* ---------- KTP Desa & Kartu Sambutan ---------- */
#seksiKTP { margin-top: 16px; border-top: 1px solid rgba(255,233,184,0.25); padding-top: 12px; }
#seksiKTP h3 { font-size: 16px; color: #ffd9a0; margin-bottom: 8px; }
.img-ktp {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid rgba(255,233,184,0.45); box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  background: #22331f;
}
.baris-aksi-ktp { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.baris-aksi-ktp button {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  color: #3a2410; background: linear-gradient(180deg, #ffc46a, #f09a3e);
  border: none; border-radius: 999px; padding: 9px 14px;
}
.baris-aksi-ktp button.tombol-ktp-sekunder {
  color: #fdf6e0; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,233,184,0.45);
}
.baris-aksi-ktp button:disabled { filter: grayscale(0.5) brightness(0.8); cursor: wait; }
.baris-aksi-ktp button:active { transform: scale(0.96); }

/* Keluar akun di Profil (tambahan CEO 4 Nov): aksi penutup yang
   jelas terpisah di dasar kartu. */
#seksiKeluar { margin-top: 18px; border-top: 1px solid rgba(255,233,184,0.25); padding-top: 14px; }
#btnKeluarProfil {
  width: 100%; font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer;
  color: #ffb3a0; background: rgba(216,75,46,0.16);
  border: 1px solid rgba(255,150,120,0.55); border-radius: 999px; padding: 11px 20px;
}
#btnKeluarProfil:active { transform: scale(0.98); }

/* Kartu Sambutan */
.kartu-sambutan .judul-sambutan {
  font-family: Georgia, "Times New Roman", serif; font-size: 23px; line-height: 1.25;
  color: #fdf6e0; margin-bottom: 6px;
}
.slogan-sambutan { font-style: italic; font-size: 14.5px; color: #ffe9b8; margin-bottom: 14px; }
.kartu-sambutan .img-ktp { margin-bottom: 12px; }
.tombol-ikuti {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; text-decoration: none; cursor: pointer; margin-bottom: 8px;
  font: inherit; font-size: 14px; font-weight: 700; color: #fdf6e0;
  background: rgba(255,255,255,0.07); border: 1px solid rgba(255,233,184,0.35);
  border-radius: 12px; padding: 11px 14px;
}
.tombol-ikuti .pegangan { font-weight: 400; font-size: 12.5px; color: rgba(247,239,219,0.75); }
.tombol-ikuti.sorotan {
  border-color: #ffc46a; background: rgba(255,196,106,0.16);
  box-shadow: 0 0 0 2px rgba(255,196,106,0.45);
}
.tombol-ikuti.dibuka { border-color: rgba(127,194,74,0.6); }
.tombol-ikuti .cek-ikuti { color: #7fc24a; font-weight: 800; }
.tombol-ikuti-semua {
  width: 100%; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  color: #fdf6e0; background: rgba(122,62,32,0.9);
  border: 1px solid rgba(255,217,160,0.5); border-radius: 999px; padding: 11px 20px;
  margin-bottom: 4px;
}
.tombol-ikuti-semua:active { transform: scale(0.98); }
.kartu-sambutan .tombol-utama-lebar { margin-top: 12px; }
.tombol-lewati {
  width: 100%; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
  color: rgba(247,239,219,0.8); background: none; border: none; padding: 10px;
  text-decoration: underline;
}

/* ---------- Tab kategori Toko (tambahan CEO 4 Nov) ---------- */
.tab-toko {
  display: flex; gap: 7px; overflow-x: auto; padding: 2px 2px 10px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tab-toko::-webkit-scrollbar { display: none; }
.tab-toko button {
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap;
  color: rgba(253,246,224,0.85); background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,233,184,0.35); border-radius: 999px; padding: 8px 14px;
  flex: 0 0 auto;
}
.tab-toko button.aktif {
  color: #3a2410; background: linear-gradient(180deg, #ffc46a, #f09a3e); border-color: transparent;
}
.tab-toko button:active { transform: scale(0.96); }
.seksi-toko[hidden] { display: none; }

/* ---------- Toko Babak 2: pratinjau besar + tab muat penuh + grid ---------- */
/* Tab babak 2: ikon + label pendek, membungkus dua baris — WAJIB
   muat penuh di lebar 360 & 390px tanpa terpotong (keluhan CEO
   dari potret 22:26: tab lama terpotong separuh). */
.tab-toko-babak2 { flex-wrap: wrap; overflow-x: visible; }
.tab-toko-babak2 button { font-size: 12px; padding: 7px 10px; }
/* Pratinjau avatar besar: menempel (sticky) di atas panel toko
   selama katalog digulir — bentuk fungsi toko acuan, rupa tetap
   Sukabantu. */
.panel-pratinjau-toko {
  position: sticky; top: -18px; z-index: 3;
  background: linear-gradient(180deg, #22331f, #1d2c1c);
  border: 1px solid rgba(255,233,184,0.4); border-radius: 14px;
  padding: 8px; margin-bottom: 10px;
}
.panel-pratinjau-toko[hidden] { display: none; }
.panel-pratinjau-toko img {
  width: 100%; height: auto; display: block; border-radius: 10px;
  background: #2a3b26;
}
.teks-pratinjau-toko {
  font-size: 12.5px; line-height: 1.45; text-align: center;
  color: rgba(247,239,219,0.9); margin-top: 7px;
}
/* Baris aksi pratinjau (Avatar Baru): tombol Beli/Pakai BESAR
   menempel di bawah teks pratinjau, selalu terlihat selama ada
   item yang sedang dicoba (fungsi panel coba toko acuan). */
.aksi-pratinjau-toko {
  display: flex; align-items: center; gap: 9px; margin-top: 8px;
}
.aksi-pratinjau-toko[hidden] { display: none; }
.aksi-pratinjau-toko button {
  font: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  color: #3a2410; background: linear-gradient(180deg, #ffc46a, #f09a3e);
  border: none; border-radius: 999px; padding: 11px 18px;
  flex: 0 0 auto; min-width: 46%;
}
.aksi-pratinjau-toko button[hidden] { display: none; }
.aksi-pratinjau-toko button:disabled {
  color: rgba(253,246,224,0.75); background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,233,184,0.35); cursor: not-allowed;
}
.aksi-pratinjau-toko button:active:not(:disabled) { transform: scale(0.97); }
.aksi-pratinjau-toko span {
  font-size: 11.5px; line-height: 1.4; color: rgba(247,239,219,0.85);
}
/* Grid katalog 2 kolom kartu ringkas */
.grid-toko { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid-toko .profil-muat { grid-column: 1 / -1; }
.kartu-grid {
  display: flex; flex-direction: column; gap: 4px; cursor: pointer;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,233,184,0.3);
  border-radius: 12px; padding: 10px;
}
.kartu-grid.dicoba { border-color: #ffc46a; box-shadow: 0 0 0 2px rgba(255,196,106,0.45); }
.kartu-grid.dimiliki { border-color: rgba(127,194,74,0.55); }
.kartu-grid b { font-size: 13.5px; line-height: 1.3; color: #fdf6e0; }
/* Ikon kartu (Avatar Baru): render 3D item itu sendiri di
   avatar — kartu terbaca dari gambarnya saja tanpa mengetuk. */
.kartu-grid .ikon-grid {
  width: calc(100% + 8px); margin: -4px -4px 2px; height: 96px;
  object-fit: cover; object-position: center 22%;
  border-radius: 8px; background: #2a3b26; display: block;
}
.kartu-grid .ket-grid {
  font-size: 11.5px; line-height: 1.4; color: rgba(247,239,219,0.75);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kartu-grid .slot-grid { font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px; color: #ffd9a0; text-transform: uppercase; }
.kartu-grid .harga-grid { font-size: 13px; font-weight: 800; color: #ffc46a; margin-top: auto; }
.kartu-grid .harga-grid.gratis { color: #7fc24a; }
.kartu-grid button {
  font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  color: #3a2410; background: linear-gradient(180deg, #ffc46a, #f09a3e);
  border: none; border-radius: 999px; padding: 8px 10px; width: 100%;
}
.kartu-grid button.sekunder {
  color: #fdf6e0; background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,233,184,0.4);
}
.kartu-grid button:disabled { filter: grayscale(0.5) brightness(0.8); cursor: wait; }
/* Kartu item LAWAN GENDER (keputusan CEO 5 Nov ±22:30 — semua
   tampil, tidak nyebrang): ikon sedikit diredupkan supaya
   terbaca "bukan untuk avatarmu" sekilas, tombol kuncinya abu
   rata berlabel "Khusus ♂/♀" dan TIDAK bereaksi (nonaktif). */
.kartu-grid.terkunci-gender .ikon-grid { filter: saturate(0.55) brightness(0.85); }
.kartu-grid button.tombol-kunci-gender {
  color: rgba(247,239,219,0.75); background: rgba(255,255,255,0.10);
  border: 1px dashed rgba(255,233,184,0.45);
}
.kartu-grid button.tombol-kunci-gender:disabled { filter: none; cursor: not-allowed; }
.kartu-grid button:active { transform: scale(0.96); }
.kartu-grid .chip-milik, .kartu-grid .chip-kunci { align-self: flex-start; }
/* ---------- Logo gender (Putaran Item Mencolok, rancangan
   D.2): lencana lingkaran Ø22px pojok kanan-atas gambar kartu
   + teks makna di bawah nama. ♂ biru baja #3E6DA3 · ♀ merah
   mawar tua #B4506E · ♂♀ abu hijau netral #6B7F6E; simbol
   selalu putih, tepi putih 2px + bayangan lembut agar terbaca
   di atas ikon warna apa pun. ---------- */
.kartu-grid { position: relative; }
.lencana-gender {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12.5px; font-weight: 800; line-height: 1;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.45);
  pointer-events: none; user-select: none;
}
.lencana-gender.pria { background: #3E6DA3; }
.lencana-gender.wanita { background: #B4506E; }
.lencana-gender.semua { background: #6B7F6E; font-size: 9.5px; letter-spacing: -1px; }
.lencana-gender.besar { width: 30px; height: 30px; font-size: 16px; top: 10px; right: 10px; }
.lencana-gender.besar.semua { font-size: 12px; }
.lencana-gender.kecil {
  position: static; width: 18px; height: 18px; font-size: 10.5px;
  border-width: 1.5px; vertical-align: -4px; margin-left: 5px;
}
.lencana-gender.kecil.semua { font-size: 8px; }
.teks-gender { font-size: 9.5px; font-weight: 700; letter-spacing: 0.3px; color: rgba(247,239,219,0.62); }
.teks-gender.tak-sesuai { color: #e89a7c; }
.panel-pratinjau-toko { position: relative; }
.panel-pratinjau-toko .lencana-gender { position: absolute; }
.panel-pratinjau-toko .lencana-gender[hidden] { display: none; }
/* Pilihan gender satu kali (Kartu Sambutan) */
.pilihan-gender { display: flex; gap: 8px; }
.pilihan-gender button {
  flex: 1; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  color: #3a2410; background: linear-gradient(180deg, #ffc46a, #f09a3e);
  border: none; border-radius: 12px; padding: 13px 8px;
}
.pilihan-gender button:disabled { filter: grayscale(0.5) brightness(0.8); cursor: wait; }
.pilihan-gender button:active { transform: scale(0.97); }

/* ---------- Katalog putaran 3: pratinjau 3D bentuk jadi di kartu toko ---------- */
.kartu-toko .pratinjau-toko {
  flex: 0 0 auto; width: 88px; height: 67px; object-fit: cover;
  border-radius: 10px; border: 1px solid rgba(255,233,184,0.35); background: #2a3b26;
}
.harga-toko { font-size: 13px; font-weight: 800; color: #ffc46a; }
.tombol-segera {
  font: inherit; font-size: 12.5px; font-weight: 700; flex: 0 0 auto; white-space: nowrap;
  color: rgba(253,246,224,0.85); background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,233,184,0.4); border-radius: 999px; padding: 8px 13px;
  cursor: not-allowed;
}

/* ---------- Bubble nama + Zzz di dunia 3D (tambahan CEO #4/#7) ---------- */
#lapisBubble {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 10;
}
.bubble-nama {
  position: absolute; left: 0; top: 0; max-width: 46vw;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  background: rgba(24, 36, 26, 0.78); color: #fdf6e0;
  border: 1px solid rgba(255, 217, 160, 0.5);
  font-size: 11px; font-weight: 600; line-height: 1.35;
  will-change: transform, opacity;
}
.bubble-nama.pemain { background: rgba(122, 82, 48, 0.85); border-color: rgba(255, 217, 160, 0.8); }
.bubble-nama.zzz {
  background: rgba(38, 48, 86, 0.82); border-color: rgba(159, 182, 255, 0.55);
  color: #cdd9ff; font-style: italic; font-weight: 700;
}

/* ---------- Bubble sapaan (Chat Sapaan Tahap 1) ---------- */
/* Bubble percakapan: krem terang membulat berekor kecil, tampil
   di BAWAH bubble nama pemiliknya (nama selalu paling atas &
   terbaca). Teks bisa dua baris (kalimat katalog maks ±40
   karakter) — tidak seperti bubble nama yang satu baris. */
.bubble-sapa {
  position: absolute; left: 0; top: 0; width: max-content; max-width: 168px;
  padding: 5px 10px 6px; border-radius: 13px;
  white-space: normal; text-align: center;
  background: rgba(253, 246, 224, 0.96); color: #2c2114;
  border: 1px solid rgba(122, 82, 48, 0.55);
  font-size: 11.5px; font-weight: 700; line-height: 1.3;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  will-change: transform, opacity;
}
.bubble-sapa::after {
  content: ""; position: absolute; left: 50%; bottom: -5px;
  transform: translateX(-50%);
  border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-top: 6px solid rgba(253, 246, 224, 0.96);
}

/* ---------- Panel Sapa ---------- */
.baris-emote-sapa {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px;
}
.baris-emote-sapa button {
  font: inherit; font-size: 19px; line-height: 1; cursor: pointer;
  background: rgba(253, 246, 224, 0.1); border: 1px solid rgba(255, 217, 160, 0.4);
  border-radius: 12px; padding: 8px 0; flex: 1 1 15%;
}
.baris-emote-sapa button:active { transform: scale(0.92); }
.tombol-sapa-item {
  display: block; width: 100%; text-align: left;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: #f7efdb; background: rgba(253, 246, 224, 0.08);
  border: 1px solid rgba(255, 217, 160, 0.35); border-radius: 12px;
  padding: 11px 13px; margin-bottom: 7px; min-height: 44px;
}
.tombol-sapa-item:active { transform: scale(0.98); background: rgba(253, 246, 224, 0.16); }

/* ---------- Tombol Bangun (tambahan CEO #8) ---------- */
#btnBangun {
  position: fixed; left: 50%; bottom: 108px; transform: translateX(-50%);
  z-index: 25; font: inherit; font-size: 19px; font-weight: 800; cursor: pointer;
  color: #3a2410; background: linear-gradient(180deg, #ffd9a0, #f09a3e);
  border: none; border-radius: 999px; padding: 16px 42px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
#btnBangun[hidden] { display: none; }
#btnBangun:active { transform: translateX(-50%) scale(0.97); }

/* ---------- Form jadwal tidur di Profil (koreksi CEO 4 Nov) ---------- */
.form-jadwal { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.form-jadwal label {
  flex: 1 1 130px; display: flex; flex-direction: column; gap: 5px;
  font-size: 13px; font-weight: 700; color: rgba(247, 239, 219, 0.9);
}
.form-jadwal input[type="time"] {
  font: inherit; font-size: 16px; padding: 9px 10px; border-radius: 10px;
  border: 1px solid rgba(255, 233, 184, 0.4); background: rgba(0, 0, 0, 0.25); color: #fdf6e0;
}

/* ---------- Status & Tangga Karier (migrasi 010) ---------- */
.kartu-tangga {
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,233,184,0.3);
  border-radius: 14px; padding: 12px 14px; margin-bottom: 10px;
}
.kepala-tangga b { display: block; color: #ffe9b8; font-size: 15px; }
.kepala-tangga .ket-tangga {
  display: block; margin-top: 3px; font-size: 12.5px;
  color: rgba(247,239,219,0.72);
}
.baris-tangga {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 9px 0 2px; margin-top: 9px;
  border-top: 1px dashed rgba(255,233,184,0.22);
}
.baris-tangga .info-tangga { flex: 1 1 auto; min-width: 0; }
.baris-tangga .info-tangga b { display: block; color: #fdf6e0; font-size: 14.5px; }
.baris-tangga .info-tangga span {
  display: block; font-size: 12.5px; line-height: 1.45;
  color: rgba(247,239,219,0.75);
}
.baris-tangga.aktif { background: rgba(127,194,74,0.12); border-radius: 10px; padding-left: 8px; padding-right: 8px; }
.baris-tangga .tombol-beli-toko, .baris-tangga .chip-kunci, .baris-tangga .chip-milik {
  flex: 0 0 auto; max-width: 46%; text-align: center; white-space: normal;
}
.baris-tangga .info-tangga span.alasan-kunci { color: #ffd9a0; font-weight: 600; }