/* Layar host — dirancang untuk proyektor/TV: elemen besar, kontras tinggi. */

.host {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: var(--s6) var(--s7);
  gap: var(--s6);
}

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

.host__alat {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.host__judul {
  font-size: clamp(1.5rem, 2.2vw, 2.2rem);
}
.host__judul span { color: var(--amber); }

/* ---------- Elemen tanda tangan: kode room sebagai ubin papan ----------
   Tiap huruf duduk di ubinnya sendiri dengan bayangan padat, memakai
   bahasa visual yang sama dengan kotak papan ular tangga. */
.kode-panggung {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s4);
}

.kode-ubin {
  display: flex;
  gap: var(--s3);
}

.kode-ubin__huruf {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(3rem, 7vw, 6.5rem);
  line-height: 1;
  color: var(--tinta-900);
  background: var(--amber);
  border-radius: var(--r-sedang);
  box-shadow: var(--angkat-3);
  padding: var(--s4) var(--s5) calc(var(--s4) + 4px);
  min-width: 1.1em;
  text-align: center;
  /* Ubin muncul satu per satu saat halaman dibuka. */
  animation: ubin-masuk var(--lambat) var(--pantul) backwards;
}

@keyframes ubin-masuk {
  from { opacity: 0; transform: translateY(-28px) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}

.kode-petunjuk {
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  color: var(--teks-redup);
  text-align: center;
}
.kode-petunjuk b { color: var(--teks-utama); font-weight: 600; }

/* ---------- Daftar pemain ---------- */
.host__badan {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(320px, 30%) 1fr;
  gap: var(--s6);
  align-items: start;
}

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

.panel__judul {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--s4);
}

.jumlah-pemain {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--amber);
  line-height: 1;
}

.pemain-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-content: flex-start;
  min-height: 200px;
}

.pemain-chip {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: clamp(1rem, 1.3vw, 1.35rem);
  font-weight: 600;
  background: var(--tinta-700);
  border-radius: var(--r-bulat);
  padding: var(--s2) var(--s5) var(--s2) var(--s2);
  box-shadow: var(--angkat-1);
  animation: chip-masuk var(--sedang) var(--pantul) backwards;
}

@keyframes chip-masuk {
  from { opacity: 0; transform: scale(0.7); }
  to   { opacity: 1; transform: none; }
}

/* Pion bulat berisi inisial — bentuk yang sama nanti dipakai di papan. */
.pion {
  display: grid;
  place-items: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: var(--r-bulat);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85em;
  color: var(--tinta-900);
  background: var(--amber);
  flex-shrink: 0;
}

.kosong-petunjuk {
  color: var(--teks-redup);
  font-size: 1.1rem;
  align-self: center;
  margin: auto;
  text-align: center;
}

/* ---------- Daftar aturan di lobby ---------- */
.aturan {
  color: var(--teks-redup);
  line-height: 1.9;
  font-size: 1.05rem;
  padding-left: 1.1em;
  margin: 0;
}
.w-amber { color: var(--amber); }
.w-mint  { color: var(--mint); }
.w-koral { color: var(--koral); }

/* ---------- Tata letak saat ronde berjalan ---------- */
#layar-ronde { flex: 1; display: flex; flex-direction: column; gap: var(--s4); }

.host__soal {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr minmax(300px, 30%);
  gap: var(--s5);
  align-items: start;
}

.host__samping {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

/* ---------- Pemilihan mode ---------- */
.mode-pilih {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s5);
  max-width: 980px;
  margin: 0 auto;
}

.mode-kartu {
  text-align: left;
  font-family: var(--font-teks);
  color: var(--teks-utama);
  background: var(--tinta-800);
  border: 2px solid var(--tinta-600);
  border-radius: var(--r-besar);
  padding: var(--s5);
  cursor: pointer;
  box-shadow: var(--angkat-2);
  transition: transform var(--cepat) ease, border-color var(--cepat) ease;
}
.mode-kartu:hover { transform: translateY(-3px); border-color: var(--amber); }
.mode-kartu:active { transform: translateY(2px); box-shadow: var(--angkat-1); }

.mode-kartu__label {
  font-family: var(--font-kode);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
}

.mode-kartu__nama {
  font-size: clamp(1.5rem, 2.4vw, 2.1rem);
  margin: var(--s2) 0 var(--s3);
}

.mode-kartu__ket { color: var(--teks-redup); line-height: 1.55; }

.mode-kartu__poin {
  margin: var(--s4) 0 0;
  padding-left: 1.1em;
  color: var(--teks-redup);
  font-size: 0.92rem;
  line-height: 1.8;
}

/* ---------- Riwayat kejadian (mode monopoli) ---------- */
.riwayat {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-height: 38vh;
  overflow-y: auto;
}

.riwayat li {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--teks-redup);
  border-left: 3px solid var(--warna-pemain, var(--tinta-600));
  padding: var(--s2) var(--s3);
  background: var(--tinta-700);
  border-radius: var(--r-kecil);
}
.riwayat li b { color: var(--teks-utama); }
.riwayat li:first-child { animation: chip-masuk var(--sedang) var(--pantul); }

/* ---------- Layar akhir ---------- */
.judul-akhir { font-size: clamp(2rem, 5vw, 4rem); color: var(--amber); }

.panel--akhir {
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}

/* ---------- Podium tiga besar ----------
   Tinggi balok mengurutkan juara secara visual, jadi peringkat terbaca
   dari belakang kelas tanpa perlu membaca angkanya. */
.podium {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  gap: var(--s4);
  max-width: 780px;
  margin: 0 auto var(--s6);
}

.podium__slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
}

.podium__nama {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1rem, 1.6vw, 1.5rem);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.podium__skor {
  font-family: var(--font-kode);
  font-size: 0.85rem;
  color: var(--teks-redup);
}

.podium__balok {
  width: 100%;
  border-radius: var(--r-sedang) var(--r-sedang) 0 0;
  box-shadow: var(--angkat-2);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 3rem);
  color: var(--tinta-900);
  /* Balok tumbuh dari bawah saat layar akhir muncul. */
  transform-origin: bottom center;
  animation: tumbuh var(--lambat) var(--pantul) backwards;
}

@keyframes tumbuh {
  from { transform: scaleY(0.05); opacity: 0; }
  to   { transform: scaleY(1); opacity: 1; }
}

.podium__slot--1 { order: 2; }
.podium__slot--2 { order: 1; }
.podium__slot--3 { order: 3; }

.podium__slot--1 .podium__balok { height: 170px; background: var(--amber); animation-delay: 240ms; }
.podium__slot--2 .podium__balok { height: 120px; background: #b9c4e0; animation-delay: 120ms; }
.podium__slot--3 .podium__balok { height:  90px; background: #c98a4b; }

.podium__slot--1 .pion { width: 3em; height: 3em; font-size: 1.1em; }

@media (max-width: 600px) {
  .podium { gap: var(--s2); }
  .podium__slot--1 .podium__balok { height: 120px; }
  .podium__slot--2 .podium__balok { height: 88px; }
  .podium__slot--3 .podium__balok { height: 66px; }
}

.host__bawah {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s5);
}

.tombol--besar {
  font-size: clamp(1.2rem, 1.8vw, 1.7rem);
  padding: var(--s5) var(--s8);
}

/* Layar sempit (guru mengecek dari laptop, bukan proyektor). */
@media (max-width: 900px) {
  .host { padding: var(--s5) var(--s4); }
  .host__badan,
  .host__soal { grid-template-columns: 1fr; }
}