/* Basamak Ustası — SADECE bu oyuna özgü kurallar.
   Ortak taban /ortak/tema.css'te; genel bir kuralı oraya ekle, buraya kopyalama. */

.basamak-question-card {
  position: relative;
  background: #fff;
  border-radius: 28px;
  box-shadow: 0 12px 28px rgba(67, 53, 107, 0.12);
  padding: 3.4vh 5vw;
  width: 100%;
  text-align: center;
  transform: rotate(-1deg);
}

.bq-gorsel {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
}

.bq-gorsel svg { filter: drop-shadow(0 6px 14px rgba(67, 53, 107, 0.14)); }

/* soru gövdesindeki büyük sayı; rakamlar arası boşluk basamakları ayırt ettirir */
.bq-sayi {
  font-size: clamp(40px, 12vw, 72px);
  font-weight: 800;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

/* sorulan rakam: hangi rakamdan bahsedildiği belli olsun (cevabı ele vermez) */
.bq-sayi .vurgu {
  color: var(--orange);
  position: relative;
}

.bq-sayi .vurgu::after {
  content: '';
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -6px;
  height: 5px;
  border-radius: 3px;
  background: var(--orange);
}

/* okunuş sorusunda gösterilen sayı adı */
.bq-okunus {
  display: block;
  font-size: clamp(24px, 7vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  color: var(--teal-dark);
}

.bq-soru {
  display: block;
  padding-top: 1.8vh;
  font-size: clamp(17px, 4.4vw, 24px);
  font-weight: 800;
  line-height: 1.3;
  color: var(--muted);
}

/* sayı adı şıkları uzun olabilir: iki satıra sığsın */
.answer-btn .answer-word {
  font-size: clamp(17px, 4.6vw, 24px);
  letter-spacing: 0;
  line-height: 1.2;
  padding: 0 8px;
}

.answer-btn .answer-num { font-variant-numeric: tabular-nums; }