/* ==========================================================================
   Learning With Badri — komponen game (HUD, nyawa, layar hasil, animasi)
   ========================================================================== */

.play { padding-block: var(--space-6) var(--space-16); }

.hud {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.hud-group { display: flex; align-items: center; gap: var(--space-4); }
.hud-item { display: grid; gap: var(--space-1); }
.hud-value {
  font-family: var(--font-heading);
  font-size: var(--type-xp-size);
  font-weight: var(--weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hud-value--success { color: var(--color-success); }

.hearts { display: flex; gap: var(--space-1); font-size: var(--text-xl); line-height: 1; }
.hearts .lost { filter: grayscale(1); opacity: 0.3; }

.combo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-warning-soft);
  color: var(--color-warning);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.timer { height: var(--space-2); border-radius: var(--radius-full); background: var(--color-border); overflow: hidden; }
.timer > span { display: block; height: 100%; background: var(--color-primary); border-radius: inherit; }
.timer.is-low > span { background: var(--color-danger); }

/* Pilihan jawaban (dipakai Lawan Monster) */
.answers { display: grid; gap: var(--space-3); }
@media (min-width: 640px) { .answers { grid-template-columns: 1fr 1fr; } }
.answer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--button-lg);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--type-answer-size);
  font-weight: var(--weight-medium);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.answer:hover:not(:disabled) { border-color: var(--color-primary); background: var(--color-primary-soft); transform: translateY(-2px); }
.answer:disabled { cursor: default; }
.answer .key {
  width: var(--space-8); height: var(--space-8); flex-shrink: 0; display: grid; place-items: center;
  border-radius: var(--radius-sm); background: var(--color-surface-muted);
  font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-secondary);
}
.answer.is-correct { border-color: var(--color-success); background: var(--color-success-soft); font-weight: var(--weight-semibold); }
.answer.is-correct .key { background: var(--color-success); color: var(--color-text-on-primary); }
.answer.is-wrong { border-color: var(--color-danger); background: var(--color-danger-soft); }
.answer.is-wrong .key { background: var(--color-danger); color: var(--color-text-on-primary); }

.question {
  font-family: var(--font-heading);
  font-size: var(--type-question-size);
  line-height: var(--type-question-line);
  font-weight: var(--weight-bold);
  letter-spacing: var(--type-h3-letter-spacing);
  text-wrap: balance;
}

/* Layar mulai / hasil */
.screen { display: grid; gap: var(--space-6); justify-items: center; text-align: center; padding-block: var(--space-8); }
.screen-emoji { font-size: var(--text-7xl); line-height: 1; }
.stars { display: flex; gap: var(--space-2); font-size: var(--text-5xl); line-height: 1; }
.stars .off { filter: grayscale(1); opacity: 0.25; }
.result-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-8); }
.result-xp { font-family: var(--font-heading); font-size: var(--type-stat-size); font-weight: var(--weight-bold); color: var(--color-success); }

/* Teks melayang (+XP, -1) */
.float-text {
  position: absolute;
  font-family: var(--font-heading);
  font-size: var(--type-xp-size);
  font-weight: var(--weight-bold);
  pointer-events: none;
  animation: float-up 900ms var(--ease) forwards;
  white-space: nowrap;
}
.float-text--success { color: var(--color-success); }
.float-text--danger { color: var(--color-danger); }
@keyframes float-up {
  from { opacity: 1; transform: translate(-50%, 0); }
  to { opacity: 0; transform: translate(-50%, calc(-1 * var(--space-16))); }
}

.shake { animation: shake 400ms var(--ease); }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(calc(-1 * var(--space-2))); }
  40% { transform: translateX(var(--space-2)); }
  60% { transform: translateX(calc(-1 * var(--space-1))); }
  80% { transform: translateX(var(--space-1)); }
}
.pop { animation: pop 300ms var(--ease); }
@keyframes pop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.source-note { display: flex; align-items: center; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- HP: tidak ada zoom saat diketuk, game muat satu layar (potret) ---------- */
html, body { touch-action: manipulation; }
.game-wrap, .game-wrap * { -webkit-tap-highlight-color: transparent; }
.game-wrap canvas, .game-wrap .run-stage, .game-wrap .stage { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
@media (max-width: 700px) {
  input, select, textarea { font-size: 16px; }   /* iPhone tidak zoom saat kotak isian diketuk */
  body.is-playing .site-header, body.is-playing .site-footer { display: none; }
  body.is-playing .play { padding-block: 6px 6px; }
  body.is-playing .hud { margin-bottom: 6px; gap: 8px; }
  body.is-playing .hud-value { font-size: 20px; }
  body.is-playing .fly-q { min-height: 0; padding: 8px 10px; margin-bottom: 6px; }
  body.is-playing .fly-q .question, body.is-playing .question { font-size: 16px; line-height: 1.3; }
  body.is-playing .fly-opts { gap: 4px; }
  body.is-playing .fly-opt { padding: 4px 8px; min-height: 0; font-size: 13px; }
  body.is-playing .fly-q-head .t-caption { display: none; }
}
@media (max-width: 700px) {
  /* game layar lebar (2:1): tinggi mengikuti lebar supaya tidak ada pita kosong */
  body.is-playing .run-stage.war-stage, body.is-playing .run-stage.zom-stage, body.is-playing .run-stage.dash-stage { min-height: 0; height: auto; aspect-ratio: 4 / 3; }
  /* Stick War: tombol beli muat di layar HP */
  .war-shop { gap: 6px; }
  .war-shop .btn { min-width: 0; padding-inline: 4px; font-size: 14px; }
  /* Kartu Pasangan: 3 kolom, kartu menyesuaikan tinggi layar */
  body.is-playing .board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body.is-playing .tile { min-height: max(84px, calc((100dvh - 110px) / 4 - 8px)); }
  body.is-playing .face { padding: 6px; font-size: 13px; line-height: 1.25; }
  body.is-playing .face--back { font-size: 28px; }
}