/* Tarik Tambang Bahasa Indonesia: soal dan pilihan berupa teks, jadi ukuran huruf menyesuaikan panjang teks.
   Kelas pilihan: c-s (7-10 huruf), c-m (11-22), c-l (23-40), c-xl (lebih dari 40). Soal: q-m, q-l, q-xl. */
.question { line-height: 1.2; }
.question.q-m { font-size: clamp(22px, 4vw, 56px); }
.question.q-l { font-size: clamp(17px, 2.9vw, 40px); }
.question.q-xl { font-size: clamp(14px, 2.3vw, 32px); }
.choice { padding: 4px 8px; line-height: 1.15; overflow-wrap: anywhere; }
.choices.c-s .choice { font-size: clamp(20px, 3.3vw, 44px); }
.choices.c-m .choice { font-size: clamp(17px, 2.2vw, 30px); }
.choices.c-l .choice { font-size: clamp(14px, 2vw, 27px); }
.choices.c-xl .choice { font-size: clamp(12px, 1.6vw, 21px); }
/* HP berdiri: satu kolom untuk teks panjang */
@media (max-width: 700px) and (orientation: portrait) {
  .choices.c-l, .choices.c-xl { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(min-content, 1fr)); }
  .question.q-m { font-size: clamp(18px, 5.4vw, 30px); }
  .question.q-l { font-size: clamp(15px, 4.4vw, 24px); }
  .question.q-xl { font-size: clamp(13px, 3.6vw, 20px); }
  .choices.c-s .choice { font-size: clamp(17px, 5.4vw, 26px); }
  .choices.c-m .choice { font-size: clamp(15px, 4.4vw, 22px); }
  .choices.c-l .choice { font-size: clamp(13px, 3.6vw, 19px); }
  .choices.c-xl .choice { font-size: clamp(11px, 2.8vw, 15px); }
  .choices.c-l .choice { font-size: clamp(12px, 3.3vw, 18px); }
  .question.q-xl { font-size: clamp(12px, 3.2vw, 18px); }
  .question.q-l { font-size: clamp(14px, 4vw, 22px); }
}
/* HP mendatar: layar pendek */
@media (max-height: 520px) {
  .question.q-m { font-size: clamp(15px, 5.4vh, 24px); }
  .question.q-l { font-size: clamp(13px, 4.6vh, 20px); }
  .question.q-xl { font-size: clamp(11px, 4vh, 16px); }
  .choices.c-s .choice { font-size: clamp(14px, 6.4vh, 26px); }
  .choices.c-m .choice { font-size: clamp(13px, 5.4vh, 22px); }
  .choices.c-l .choice { font-size: clamp(12px, 4.6vh, 18px); }
  .choices.c-xl .choice { font-size: clamp(11px, 3.9vh, 15px); }
  .choice { padding: 2px 6px; }
}

/* Tebak Gambar: soal berupa gambar */
.question.pic { display: grid; place-items: center; padding: 4px; }
.question.pic img { height: clamp(64px, 20vh, 190px); width: auto; max-width: 100%; display: block; }
b#contoh img.ex { height: 44px; width: 44px; vertical-align: middle; }
@media (max-height: 520px) {
  .question.pic img { height: clamp(40px, 22vh, 86px); }
  b#contoh img.ex { height: 32px; width: 32px; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .question.pic img { height: clamp(48px, 11vh, 96px); }
}

/* Tebak Kata: kotak jawaban dan kotak huruf acak */
.team { --sz: 52px; }
.slots { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(4px, .8vw, 8px); flex: 0 0 auto; }
.slot {
  width: var(--sz); height: calc(var(--sz) * 1.1); padding: 0; border-radius: 12px; border: 3px dashed var(--muted); background: #fff;
  font-family: var(--font); font-weight: 800; font-size: calc(var(--sz) * .6); line-height: 1; text-transform: uppercase; color: var(--ink); cursor: pointer;
  display: grid; place-items: center;
}
.slot.filled { border-style: solid; }
.team.a .slot.filled { border-color: var(--team-a); } .team.b .slot.filled { border-color: var(--team-b); }
.slots.good .slot { background: #d1fae5; border-color: var(--ok); }
.slots.bad .slot { background: #ffe4e6; border-color: var(--bad); }
.choices.tiles { display: flex; flex-wrap: wrap; gap: clamp(5px, 1vw, 10px); justify-content: center; align-content: center; }
.tile {
  width: var(--sz); height: calc(var(--sz) * 1.1); padding: 0; border: 0; border-radius: 12px; color: #fff; cursor: pointer; touch-action: manipulation;
  font-family: var(--font); font-weight: 800; font-size: calc(var(--sz) * .6); line-height: 1; text-transform: uppercase; display: grid; place-items: center;
  box-shadow: 0 5px 0 rgba(0,0,0,.2); transition: transform .08s ease, opacity .12s ease;
}
.team.a .tile { background: var(--team-a); } .team.b .tile { background: var(--team-b); }
.tile:active { transform: translateY(3px) scale(.96); box-shadow: 0 2px 0 rgba(0,0,0,.2); }
.tile.used { opacity: .18; box-shadow: none; }
.team.locked .tile, .team.locked .slot, .team.bot .tile, .team.bot .slot { pointer-events: none; }
.question.nopic { font-size: clamp(18px, 3vw, 40px); }
@media (max-height: 520px) {
  .slot, .tile { border-radius: 8px; }
  .slot { border-width: 2px; }
  .tile { box-shadow: 0 3px 0 rgba(0,0,0,.2); }
  .slots { gap: 4px; }
  .choices.tiles { gap: 5px; }
}

@media (max-height: 520px) {
  .question.pic img { height: clamp(34px, 15vh, 60px); }
  .question.pic { padding: 2px; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .question.pic img { height: clamp(40px, 9vh, 80px); }
}