/* Layar siswa — dioptimalkan untuk HP: target sentuh besar, satu kolom. */

.main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* "safe" mencegah konten panjang (soal + 4 pilihan) terpotong di atas
     saat tingginya melebihi layar HP. */
  justify-content: safe center;
  gap: var(--s5);
  max-width: 460px;
  margin: 0 auto;
  padding: var(--s6) var(--s4);
}

.merek {
  text-align: center;
}
.merek__nama {
  font-size: clamp(1.8rem, 8vw, 2.4rem);
  line-height: 1.05;
}
.merek__nama span { color: var(--amber); }
.merek .eyebrow { display: block; margin-bottom: var(--s2); }

.kartu {
  background: var(--tinta-800);
  border: 2px solid var(--tinta-700);
  border-radius: var(--r-besar);
  padding: var(--s5);
  box-shadow: var(--angkat-2);
}

.form-bidang { display: flex; flex-direction: column; gap: var(--s2); }
.form-bidang + .form-bidang { margin-top: var(--s4); }
.form-bidang label { font-size: 0.9rem; font-weight: 600; color: var(--teks-redup); }

.form-aksi { margin-top: var(--s5); }
.form-bidang + .pesan-error { margin-top: var(--s4); }

/* Tombol yang sebenarnya tautan ke halaman lain. */
.tombol--tautan {
  display: block;
  text-align: center;
  text-decoration: none;
}

.sambutan {
  color: var(--teks-redup);
  text-align: center;
  line-height: 1.5;
  margin-bottom: var(--s5);
}
.tombol--penuh { width: 100%; padding: var(--s5); font-size: 1.15rem; }

/* ---------- Lobby siswa ---------- */
.lobby { text-align: center; }

.lobby__sapaan {
  font-size: 1.6rem;
  margin-bottom: var(--s2);
}
.lobby__sapaan span { color: var(--mint); }

.lobby__kode {
  font-family: var(--font-kode);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--teks-redup);
  margin-bottom: var(--s5);
}

/* Tiga titik yang berdenyut bergantian selama menunggu. */
.denyut {
  display: flex;
  justify-content: center;
  gap: var(--s2);
  margin: var(--s5) 0;
}
.denyut i {
  width: 10px;
  height: 10px;
  border-radius: var(--r-bulat);
  background: var(--amber);
  animation: denyut 1.4s ease-in-out infinite;
}
.denyut i:nth-child(2) { animation-delay: 0.18s; }
.denyut i:nth-child(3) { animation-delay: 0.36s; }

@keyframes denyut {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  40%      { opacity: 1;    transform: translateY(-6px); }
}

.lobby__info { color: var(--teks-redup); font-size: 0.95rem; }

.daftar-teman {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s2);
  margin-top: var(--s5);
}
.teman-chip {
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--tinta-700);
  border-radius: var(--r-bulat);
  padding: var(--s1) var(--s3);
  color: var(--teks-redup);
}
.teman-chip--saya { background: var(--mint-gelap); color: var(--teks-utama); }

/* ---------- Layar ronde di HP ---------- */
#layar-ronde { display: flex; flex-direction: column; gap: var(--s4); }

.kartu--soal { padding: var(--s4); }
.kartu--papan { padding: var(--s4); }
.kartu--papan .papan-kepala h2,
.kartu--papan .eyebrow { margin: 0; }
.kartu--soal .soal-teks { font-size: 1.15rem; }

/* Target sentuh besar: satu kolom penuh, tinggi minimum nyaman untuk jempol. */
#layar-ronde .pilihan { grid-template-columns: 1fr; margin-top: 0; }
#layar-ronde .opsi { min-height: 68px; }

/* ---------- Taruhan ----------
   Amber sudah jadi warna skor dan dadu di seluruh aplikasi, jadi seluruh
   blok taruhan memakai warna itu — bukan warna baru. */
.taruhan {
  background: var(--tinta-800);
  border: 2px solid var(--amber-gelap);
  border-radius: var(--r-besar);
  padding: var(--s4);
}

.taruhan__kepala {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
}

.taruhan__nilai {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--teks-redup);
}
.taruhan__nilai[data-terpasang="ya"] { color: var(--amber); }

.taruhan__petunjuk {
  margin-top: var(--s2);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--teks-redup);
}

.taruhan__dadu {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s2);
  margin-top: var(--s4);
}

/* Tombol dadu dibuat persegi dan besar supaya nyaman ditekan dengan jempol. */
.dadu {
  aspect-ratio: 1;
  min-height: 46px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--teks-utama);
  background: var(--tinta-700);
  border: 2px solid var(--tinta-600);
  border-radius: var(--r-sedang);
  cursor: pointer;
  box-shadow: var(--angkat-1);
  transition: transform var(--cepat) ease, background-color var(--cepat) ease,
              border-color var(--cepat) ease, color var(--cepat) ease;
}

.dadu:hover:not(:disabled) { border-color: var(--amber); transform: translateY(-2px); }
.dadu:active:not(:disabled) { transform: translateY(2px); box-shadow: none; }

.dadu--terpilih {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--tinta-900);
  box-shadow: var(--angkat-2);
}

.dadu:disabled { cursor: default; opacity: 0.55; }
.dadu--terpilih:disabled { opacity: 1; }

/* Pilihan jawaban terkunci sampai taruhan dipasang. */
.pilihan--terkunci { opacity: 0.35; pointer-events: none; }

.kunci-jawaban {
  font-size: 0.88rem;
  text-align: center;
  color: var(--teks-redup);
}
.kunci-jawaban.sembunyi { display: none; }

/* ---------- Umpan balik benar/salah ---------- */
.umpan {
  border-radius: var(--r-besar);
  padding: var(--s5);
  text-align: center;
  box-shadow: var(--angkat-2);
}

.umpan__judul {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1.1;
}

.umpan__detail { margin-top: var(--s2); font-size: 1rem; opacity: 0.85; }

.umpan--benar { background: var(--mint-gelap); border: 2px solid var(--mint); }
.umpan--salah { background: var(--koral-gelap); border: 2px solid var(--koral); }
.umpan--diam  { background: var(--tinta-800);   border: 2px solid var(--tinta-600); }

/* Benar: kartu memantul naik sekali. Salah: bergetar pendek. */
.umpan--benar { animation: memantul var(--lambat) var(--pantul); }
.umpan--salah { animation: bergetar 380ms ease-in-out; }

@keyframes memantul {
  0%   { transform: scale(0.86); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}

@keyframes bergetar {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-9px); }
  40%      { transform: translateX(8px); }
  60%      { transform: translateX(-5px); }
  80%      { transform: translateX(3px); }
}

/* ---------- Mode monopoli di HP ---------- */
#layar-monopoli { display: flex; flex-direction: column; gap: var(--s4); }

/* Kas selalu terlihat di atas — angka yang paling sering dilirik kelompok. */
.dompet-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  background: var(--tinta-800);
  border: 2px solid var(--tinta-700);
  border-radius: var(--r-bulat);
  padding: var(--s2) var(--s4);
}
.dompet-bar .dompet__angka { font-size: 1.15rem; }

#layar-monopoli .pilihan { grid-template-columns: 1fr; margin-top: 0; }
#layar-monopoli .opsi { min-height: 64px; }

#m-tombol-kocok { margin-top: var(--s4); }
#m-dadu-tampil { justify-content: center; margin-top: var(--s3); font-size: 0.85rem; }

.keputusan-tombol .tombol { width: 100%; padding: var(--s4); }

/* ---------- Pilihan kotak tujuan portal ---------- */
.portal__ket {
  margin-top: var(--s2);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--teks-redup);
}

.portal__daftar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--s2);
  margin-top: var(--s4);
  max-height: 46vh;
  overflow-y: auto;
}

.portal-kotak {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  font-family: var(--font-teks);
  color: var(--teks-utama);
  background: var(--tinta-700);
  border: 2px solid var(--tinta-600);
  border-radius: var(--r-kecil);
  padding: var(--s2);
  cursor: pointer;
  min-height: 56px;
  transition: border-color var(--cepat) ease, transform var(--cepat) ease;
}
.portal-kotak:hover:not(:disabled) { border-color: var(--amber); transform: translateY(-2px); }
.portal-kotak:disabled { opacity: 0.4; cursor: default; }

.portal-kotak__nama { font-size: 0.78rem; font-weight: 600; line-height: 1.2; }
.portal-kotak__ket {
  font-family: var(--font-kode);
  font-size: 0.66rem;
  color: var(--teks-redup);
}
/* Kotak yang sudah dimiliki kelompok lain: tandai supaya tidak salah pilih. */
.portal-kotak--lawan { border-color: var(--koral); }
.portal-kotak--milikku { border-color: var(--mint); }

/* ---------- Layar akhir ---------- */
.akhir-angka {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--amber);
  margin: var(--s4) 0 var(--s2);
}

.kaki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s3);
}