/* ============================================================
   Papan monopoli: cincin kotak mengelilingi panel tengah.

   Ukuran gridnya diatur dari JavaScript mengikuti jumlah kotak preset
   (32 kotak jadi 9x9, 40 kotak jadi 11x11). Kotak menempati tepi, panel
   tengah mengisi sisanya — susunan yang sama dengan papan monopoli cetak,
   dan membuat ruang tengah berguna untuk dadu serta soal.
   ============================================================ */

.papan-m {
  position: relative;      /* acuan posisi absolut bidak */
  width: 100%;
  aspect-ratio: 1;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 3px;
  container-type: inline-size;
}

/* ---------- Kotak ---------- */
.mk {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px;
  border-radius: 6px;
  background: var(--tinta-700);
  box-shadow: var(--angkat-1);
  overflow: hidden;
  min-width: 0;
}

/* Ukuran huruf ikut lebar papan, bukan lebar layar — jadi papan mini di HP
   dan papan besar di proyektor sama-sama proporsional.

   Lebar satu kotak = 100cqw / jumlah kolom, jadi ukuran hurufnya dibagi
   --sisi-papan supaya papan 9 kolom dan 11 kolom sama-sama proporsional.
   Tinggi isinya (pita + dua baris nama + harga) tetap muat di kotak. */
.mk__nama {
  font-size: calc(17cqw / var(--sisi-papan, 9));
  line-height: 1.15;
  font-weight: 600;
  color: var(--teks-utama);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow-wrap: anywhere;
}

.mk__harga {
  font-family: var(--font-kode);
  font-size: calc(14cqw / var(--sisi-papan, 9));
  color: var(--teks-redup);
}

/* Pita warna kelompok properti di tepi atas kotak. */
.mk__pita {
  height: 14%;
  min-height: 4px;
  border-radius: 3px;
  flex-shrink: 0;
}
.mk__pita[data-grup="html"]  { background: var(--grup-html); }
.mk__pita[data-grup="css"]   { background: var(--grup-css); }
.mk__pita[data-grup="js"]    { background: var(--grup-js); }
.mk__pita[data-grup="akhir"] { background: var(--grup-akhir); }
.mk__pita[data-grup="teks"]     { background: var(--grup-teks); }
.mk__pita[data-grup="media"]    { background: var(--grup-media); }
.mk__pita[data-grup="struktur"] { background: var(--grup-struktur); }
.mk__pita[data-grup="data"]     { background: var(--grup-data); }

/* Sudut dan kotak khusus. */
.mk--start      { background: var(--mint-gelap); }
.mk--rehat      { background: var(--tinta-600); }
.mk--penjara    { background: var(--koral-gelap); }
.mk--ke_penjara { background: var(--koral-gelap); }
.mk--kartu      { background: #3b2f7a; }
/* Portal: satu-satunya kotak yang membiarkan kelompok memilih tujuannya
   sendiri, jadi diberi warna tersendiri agar mudah dikenali dari jauh. */
.mk--teleport   { background: #125f6b; }
.mk--pajak      { background: #5a3a20; }

.mk--sudut .mk__nama {
  font-size: calc(18cqw / var(--sisi-papan, 9));
  -webkit-line-clamp: 3;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  align-self: center;
}
.mk--sudut { justify-content: center; align-items: center; }

/* Kotak yang sudah dimiliki: garis tebal berwarna kelompok pemiliknya. */
.mk--dimiliki { box-shadow: inset 0 0 0 3px var(--warna-pemilik), var(--angkat-1); }

.mk__pemilik {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 12%;
  aspect-ratio: 1;
  min-width: 7px;
  border-radius: var(--r-bulat);
  background: var(--warna-pemilik);
  border: 1px solid var(--tinta-900);
}

/* Kotak tempat bidak yang sedang jalan berhenti. */
.mk--disorot {
  outline: 3px solid var(--teks-utama);
  outline-offset: -3px;
  animation: sorot-kotak 1.1s ease-in-out infinite;
}
@keyframes sorot-kotak {
  0%, 100% { outline-color: var(--teks-utama); }
  50%      { outline-color: transparent; }
}

/* ---------- Bidak ---------- */
.bidak-m {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  border-radius: var(--r-bulat);
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--tinta-900);
  background: var(--warna-pemain);
  border: 2px solid var(--tinta-900);
  box-shadow: var(--angkat-1);
  z-index: 3;
  pointer-events: none;
  will-change: transform;
}
.bidak-m--saya { border-color: var(--teks-utama); z-index: 4; }
.bidak-m--jalan { z-index: 5; }

/* ---------- Panel tengah ---------- */
.papan-m__tengah {
  grid-column: 2 / 9;
  grid-row: 2 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s4);
  text-align: center;
  background: var(--tinta-800);
  border: 2px solid var(--tinta-700);
  border-radius: var(--r-besar);
  overflow: hidden;
}

/* ---------- Dadu ---------- */
.dadu-pasang { display: flex; gap: var(--s3); }

.dadu-m {
  width: 3.2em;
  height: 3.2em;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.7em;
  color: var(--tinta-900);
  background: var(--teks-utama);
  border-radius: var(--r-sedang);
  box-shadow: var(--angkat-2);
}
.dadu-m--kosong { background: var(--tinta-600); color: var(--teks-redup); }

/* Dadu mendarat: jatuh sekali dengan pantulan. */
.dadu-m--baru { animation: dadu-jatuh 520ms var(--pantul); }
@keyframes dadu-jatuh {
  0%   { transform: translateY(-40px) rotate(-90deg); opacity: 0; }
  70%  { transform: translateY(4px) rotate(8deg); opacity: 1; }
  100% { transform: none; }
}

/* Dadu sedang berputar: angkanya diganti dari JavaScript, guncangannya
   dari sini. Hasil akhirnya sudah ditentukan server sejak awal —
   putaran ini hanya membuat jedanya terasa seperti mengocok dadu. */
.dadu-m--guling {
  background: var(--amber);
  animation: dadu-guling 260ms linear infinite;
}
@keyframes dadu-guling {
  0%   { transform: translateY(0) rotate(-10deg); }
  25%  { transform: translateY(-10px) rotate(6deg); }
  50%  { transform: translateY(0) rotate(12deg); }
  75%  { transform: translateY(-6px) rotate(-8deg); }
  100% { transform: translateY(0) rotate(-10deg); }
}

/* Perpindahan antar adegan: naik pelan sambil memudar masuk, supaya
   pergantian panel tidak terasa seperti layar berkedip. */
.adegan-masuk { animation: adegan-masuk var(--lambat) ease-out; }
@keyframes adegan-masuk {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Kartu giliran ---------- */
.giliran-kartu {
  display: flex;
  align-items: center;
  gap: var(--s3);
  background: var(--tinta-700);
  border-radius: var(--r-bulat);
  padding: var(--s2) var(--s5) var(--s2) var(--s2);
  box-shadow: var(--angkat-1);
}

.giliran-kartu__nama {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
}

.giliran-fase {
  font-family: var(--font-kode);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teks-redup);
}

.giliran-catatan {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--teks-utama);
  max-width: 46ch;
}

/* ---------- Dompet & daftar kelompok ---------- */
.dompet {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
}
.dompet__angka {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--amber);
}

.kelompok-baris {
  display: flex;
  align-items: center;
  gap: var(--s3);
  background: var(--tinta-700);
  border-left: 4px solid var(--warna-pemain);
  border-radius: var(--r-sedang);
  padding: var(--s3);
  transition: background-color var(--sedang) ease;
}
.kelompok-baris--giliran { background: var(--tinta-600); box-shadow: var(--angkat-1); }
.kelompok-baris--bangkrut { opacity: 0.45; }

.kelompok-baris__nama {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kelompok-baris__aset,
.kelompok-baris__uang {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
}
.kelompok-baris__aset { color: var(--mint); }
.kelompok-baris__uang { color: var(--amber); }

.pion-m {
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  flex-shrink: 0;
  border-radius: var(--r-bulat);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8em;
  color: var(--tinta-900);
  background: var(--warna-pemain);
}

.lencana-tahan {
  font-family: var(--font-kode);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--koral);
  border: 1px solid var(--koral);
  border-radius: var(--r-kecil);
  padding: 1px 5px;
}

/* ---------- Kartu properti (layar kelompok) ---------- */
.properti-kartu {
  border-radius: var(--r-besar);
  overflow: hidden;
  background: var(--tinta-800);
  border: 2px solid var(--tinta-600);
  box-shadow: var(--angkat-2);
}

.properti-kartu__pita {
  height: 40px;
  display: grid;
  place-items: center;
  font-family: var(--font-kode);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tinta-900);
  font-weight: 700;
}

.properti-kartu__isi { padding: var(--s5); text-align: center; }

.properti-kartu__nama {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.15;
}

/* Keterangan topik: memberi tahu siswa soal seperti apa yang akan datang
   sebelum mereka memutuskan mengeluarkan uang. */
.properti-kartu__ket {
  margin-top: var(--s2);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--teks-redup);
}

.properti-kartu__baris {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  margin-top: var(--s4);
  padding-top: var(--s3);
  border-top: 1px solid var(--tinta-600);
  font-size: 0.95rem;
  color: var(--teks-redup);
}
.properti-kartu__baris b {
  font-family: var(--font-display);
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

/* ---------- Tombol keputusan ---------- */
.keputusan-tombol { display: grid; gap: var(--s3); margin-top: var(--s5); }

.tombol--beli  { background: var(--mint); }
.tombol--bayar { background: var(--koral); color: var(--teks-utama); }

/* ---------- Menunggu giliran kelompok lain ---------- */
.menunggu {
  text-align: center;
  padding: var(--s5);
}
.menunggu__nama {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--warna-pemain);
}

/* ---------- Tata letak layar guru ---------- */
.monopoli-badan {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 24%);
  gap: var(--s5);
  align-items: start;
}

.monopoli-papan-bungkus {
  /* Papan dibuat setinggi mungkin selama masih muat di layar proyektor. */
  max-width: min(88vh, 100%);
  width: 100%;
  margin: 0 auto;
}

/* Saat ada soal, kolomnya ditukar: soal mendapat ruang lebar, papan
   mengecil tapi tetap terlihat supaya kelas tahu properti mana yang
   sedang diperebutkan. */
.monopoli-badan--soal { grid-template-columns: minmax(220px, 26%) minmax(0, 1fr); }
.monopoli-badan--soal .monopoli-papan-bungkus { max-width: 100%; }

@media (max-width: 900px) {
  .monopoli-badan,
  .monopoli-badan--soal { grid-template-columns: 1fr; }
}

/* Papan mini di HP: panel tengah cukup menampilkan giliran siapa. */
.papan-m--mini { gap: 2px; }
.papan-m--mini .mk { border-radius: 3px; padding: 2px; box-shadow: none; }
.papan-m--mini .mk__harga { display: none; }
.papan-m--mini .mk__nama { font-size: 2.4cqw; -webkit-line-clamp: 2; }
.papan-m--mini .papan-m__tengah { padding: var(--s3); border-radius: var(--r-sedang); }