/* Tampilan soal — dipakai layar guru maupun layar siswa.
   Ukuran huruf memakai clamp() sehingga blok yang sama tetap enak dibaca
   dari proyektor maupun dari genggaman. */

/* ---------- Bilah waktu ---------- */
.waktu {
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.waktu__batang {
  flex: 1;
  height: 14px;
  background: var(--tinta-700);
  border-radius: var(--r-bulat);
  overflow: hidden;
}

.waktu__isi {
  height: 100%;
  width: 100%;
  background: var(--mint);
  border-radius: var(--r-bulat);
  transform-origin: left center;
  /* Lebar dianimasikan linear agar terasa seperti waktu berjalan, bukan meloncat. */
  transition: width 1s linear, background-color var(--sedang) ease;
}

/* Sepuluh detik terakhir berubah kuning, lima detik terakhir merah dan berdenyut. */
.waktu[data-urgensi="sedang"] .waktu__isi { background: var(--amber); }
.waktu[data-urgensi="tinggi"] .waktu__isi { background: var(--koral); }
.waktu[data-urgensi="tinggi"] .waktu__angka { animation: detak 0.9s ease-in-out infinite; }

@keyframes detak {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}

.waktu__angka {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  line-height: 1;
  min-width: 2.2ch;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ---------- Kepala ronde ---------- */
.ronde-kepala {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s3);
}

.lencana-bahasa {
  font-family: var(--font-kode);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: var(--s1) var(--s3);
  border-radius: var(--r-kecil);
  background: var(--tinta-700);
  color: var(--teks-redup);
}
.lencana-bahasa[data-bahasa="html"] { color: #ff9f6e; }
.lencana-bahasa[data-bahasa="css"]  { color: #6ec8ff; }
.lencana-bahasa[data-bahasa="js"]   { color: var(--amber); }

/* ---------- Teks soal ---------- */
.soal-teks {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.15rem, 2.6vw, 2.4rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* ---------- Blok kode ---------- */
.soal-kode {
  font-family: var(--font-kode);
  font-size: clamp(0.85rem, 1.5vw, 1.35rem);
  line-height: 1.65;
  white-space: pre;
  overflow-x: auto;
  background: #080c16;
  border: 2px solid var(--tinta-700);
  border-left: 4px solid var(--amber);
  border-radius: var(--r-sedang);
  padding: var(--s4);
  margin: var(--s4) 0 0;
  color: #d7e0ff;
  tab-size: 2;
}
.soal-kode .tok-tag  { color: #ff9f6e; }
.soal-kode .tok-str  { color: var(--mint); }
.soal-kode .tok-kunci { color: #b79bff; }
.soal-kode .tok-num  { color: var(--amber); }
.soal-kode .tok-komen { color: var(--teks-redup); font-style: italic; }
.soal-kode .tok-baris { color: var(--teks-redup); }

/* ---------- Pilihan jawaban ----------
   Pilihan sengaja netral, bukan empat warna berbeda: warna hijau dan merah
   disimpan khusus untuk menandai benar dan salah saat jawaban dibuka. */
.pilihan {
  display: grid;
  gap: var(--s3);
  margin-top: var(--s5);
}

@media (min-width: 760px) {
  .pilihan--dua-kolom { grid-template-columns: 1fr 1fr; }
}

.opsi {
  display: flex;
  align-items: center;
  gap: var(--s4);
  width: 100%;
  text-align: left;
  font-family: var(--font-teks);
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  font-weight: 600;
  color: var(--teks-utama);
  background: var(--tinta-700);
  border: 2px solid var(--tinta-600);
  border-radius: var(--r-sedang);
  padding: var(--s4);
  min-height: 64px;
  cursor: pointer;
  box-shadow: var(--angkat-1);
  transition: transform var(--cepat) ease, border-color var(--cepat) ease,
              background-color var(--sedang) ease, opacity var(--sedang) ease;
}

/* Item grid dan flex punya lebar minimum sebesar isinya. Tanpa min-width: 0,
   pilihan jawaban yang panjang (apalagi potongan kode tanpa spasi) melebar
   melewati kotaknya dan terpotong. */
.opsi { min-width: 0; }

.opsi__label {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 2.1em;
  height: 2.1em;
  border-radius: var(--r-kecil);
  font-family: var(--font-display);
  font-weight: 700;
  background: var(--tinta-600);
  color: var(--amber);
}

.opsi__teks {
  font-family: var(--font-kode);
  font-size: 0.95em;
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.4;
}

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

/* Pilihan yang dikunci siswa sebelum jawaban dibuka. */
.opsi--dipilih {
  border-color: var(--amber);
  background: var(--amber-gelap);
}
.opsi--dipilih .opsi__label { background: var(--amber); color: var(--tinta-900); }

/* Setelah jawaban dibuka. */
.opsi--benar {
  border-color: var(--mint);
  background: var(--mint-gelap);
}
.opsi--benar .opsi__label { background: var(--mint); color: var(--tinta-900); }

.opsi--salah {
  border-color: var(--koral);
  background: var(--koral-gelap);
}
.opsi--salah .opsi__label { background: var(--koral); color: var(--tinta-900); }

.opsi--redup { opacity: 0.4; }

/* Jumlah pemilih tiap opsi, tampil di layar guru saat hasil dibuka. */
.opsi__jumlah {
  margin-left: auto;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1em;
  font-variant-numeric: tabular-nums;
}

/* ---------- Penjelasan ---------- */
.penjelasan {
  margin-top: var(--s5);
  font-size: clamp(0.95rem, 1.2vw, 1.25rem);
  line-height: 1.6;
  color: var(--teks-redup);
  border-left: 3px solid var(--mint);
  background: rgba(61, 220, 151, 0.07);
  border-radius: var(--r-kecil);
  padding: var(--s4);
}

/* ---------- Penghitung siswa yang sudah menjawab ---------- */
.penghitung-jawab {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.6rem);
  color: var(--teks-redup);
  font-variant-numeric: tabular-nums;
}
.penghitung-jawab b { color: var(--mint); }

/* ---------- Papan peringkat ---------- */
.peringkat { display: flex; flex-direction: column; gap: var(--s2); }

.peringkat__baris {
  display: flex;
  align-items: center;
  gap: var(--s4);
  background: var(--tinta-700);
  border-radius: var(--r-sedang);
  padding: var(--s3) var(--s4);
  font-size: clamp(0.95rem, 1.3vw, 1.3rem);
  font-weight: 600;
  /* Perpindahan urutan peringkat dianimasikan lewat FLIP di leaderboard.js. */
  transition: transform var(--lambat) var(--pantul);
}

.peringkat__nomor {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--teks-redup);
  min-width: 1.6ch;
  font-variant-numeric: tabular-nums;
}

.peringkat__nama { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.peringkat__skor {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}

.peringkat__baris--juara1 { background: var(--amber); color: var(--tinta-900); }
.peringkat__baris--juara1 .peringkat__nomor,
.peringkat__baris--juara1 .peringkat__skor { color: var(--tinta-900); }
.peringkat__baris--juara2,
.peringkat__baris--juara3 { background: var(--tinta-600); }
.peringkat__baris--saya { outline: 2px solid var(--mint); }