/* =====================================================
   BOSS — battle "Penjaga Kata"
   ===================================================== */
.boss-card {
  background: linear-gradient(160deg, #3B2357, #241338);
  color: var(--putih);
  border-radius: var(--radius);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.35);
  padding: 32px 28px;
  width: min(520px, 94vw);
  text-align: center;
  animation: masuk 0.35s ease;
}
.boss-card .boss-emoji {
  font-size: clamp(3rem, 12vw, 4.5rem);
  display: inline-block;
  animation: bossIdle 1.6s ease-in-out infinite;
}
.boss-card h3 {
  font-family: var(--font-judul);
  font-size: 1.7rem;
  color: #FFD27A;
  margin: 8px 0 10px;
}
.boss-card p { line-height: 1.7; font-size: 1rem; }
.boss-actions {
  display: flex; gap: 12px; justify-content: center;
  margin-top: 20px; flex-wrap: wrap;
}

@keyframes bossIdle {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-8px) rotate(3deg); }
}

/* Header pertarungan: wajah boss + HP */
.boss-header {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(160deg, #3B2357, #241338);
  border-radius: 999px;
  padding: 10px 24px;
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
}
.boss-wajah {
  font-size: clamp(1.8rem, 8vw, 2.4rem);
  display: inline-block;
  animation: bossIdle 1.6s ease-in-out infinite;
}
.boss-wajah.kena { animation: bossKena 0.45s ease; }
.boss-wajah.menang { animation: bossMenang 0.8s ease infinite; }
.boss-hp { font-size: 1.3rem; letter-spacing: 3px; }

@keyframes bossKena {
  0%   { transform: scale(1) rotate(0); filter: none; }
  30%  { transform: scale(0.82) rotate(-14deg); filter: brightness(2) saturate(0); }
  60%  { transform: scale(1.12) rotate(8deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes bossMenang {
  0%, 100% { transform: scale(1.15) rotate(-5deg); }
  50%      { transform: scale(1.25) rotate(5deg); }
}

/* Wadah soal boss */
.boss-soal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
}

/* Pesan boss di layar hasil */
#result-boss {
  font-weight: 700;
  color: #6B3FA0;
  background: #F3EBFC;
  border-radius: 12px;
  padding: 8px 12px;
  margin-bottom: 12px;
  font-size: clamp(0.82rem, 2vmin, 0.95rem);
}

@media (max-width: 1024px) and (max-height: 600px) and (orientation: landscape) {
  .boss-card {
    padding: clamp(10px, 2vh, 20px) clamp(14px, 2.5vw, 24px);
    border-radius: 18px;
    max-height: 90vh;
  }
  .boss-card .boss-emoji { font-size: clamp(2rem, 6vmin, 3.2rem); }
  .boss-card h3 { font-size: clamp(1.1rem, 2.8vmin, 1.4rem); margin: 4px 0 6px; }
  .boss-card p { font-size: clamp(0.82rem, 2vmin, 0.95rem); line-height: 1.35; }
  .boss-actions { margin-top: 10px; gap: 8px; }
  .boss-header { padding: 6px 18px; gap: 10px; }
  .boss-wajah { font-size: clamp(1.4rem, 4vmin, 2rem); }
  .boss-hp { font-size: clamp(1rem, 2.5vmin, 1.25rem); }
}