/* Lion & Lamp — character-select polish
 * Adds:
 *  - "Choose One ↓" animated prompt above the character cards
 *  - Real image avatars in .char-avatar (fills the circle, keeps the letter fallback working)
 */

/* ── Choose One prompt ── */
.choose-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.25rem;
  margin: 1.5rem auto 0.75rem;
  color: var(--color-primary, #e8b84a);
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  user-select: none;
}

.choose-prompt__text {
  font-size: 0.95rem;
  font-family: var(--font-display, 'Boska', 'Georgia', serif);
  letter-spacing: 0.22em;
  text-shadow: 0 0 12px rgba(232, 184, 74, 0.35);
}

.choose-prompt__arrow {
  display: inline-block;
  font-size: 1.8rem;
  line-height: 1;
  color: var(--color-primary, #e8b84a);
  animation: choose-bounce 1.4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(232, 184, 74, 0.45));
}

@keyframes choose-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.9; }
  50%      { transform: translateY(8px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .choose-prompt__arrow { animation: none; }
}

/* ── Character avatar image support ── */
/* When an <img> lives inside .char-avatar, style the wrapper as a rounded portrait frame */
.char-avatar {
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-lg, 14px);
  background: rgba(255, 255, 255, 0.02);
  /* Ensure old letter behavior still works when there is no <img> child */
}
.char-avatar:has(.char-avatar__img) {
  /* Fill a nice square-ish frame; keep the card's natural rhythm */
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 260px;
  margin: 0 auto var(--space-3, 12px);
  font-size: 0; /* remove the 3rem letter font sizing when image is present */
}
.char-avatar__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

/* Warm gold interactive ring on hover/focus */
.char-card {
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.char-card:hover,
.char-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(232, 184, 74, 0.25), 0 0 0 1px rgba(232, 184, 74, 0.45);
}