/* ============================================================
   HERO PORTRAIT — CIRCULAR XP RING
   ============================================================ */

.hero-portrait-frame {
  position: relative;
  border-radius: 50%;
  width: 110px;
  height: 110px;
  padding: 6px;
  background: conic-gradient(#888 0deg, #222 0deg);
  transition: background 0.3s ease-out;
}

.hero-portrait {
  border-radius: 50%;
}

/* JS will update this via inline style:
   heroPortraitFrame.style.background = `conic-gradient(#7aff9c ${angle}deg, #222 0deg)`
*/


/* ============================================================
   CHARACTER SCREEN XP BAR
   ============================================================ */

.character-xp-box {
  background: #1a1a1a;
  border: 2px solid #333;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1rem;
}

.character-xp-frame {
  width: 100%;
  height: 14px;
  background: #333;
  border-radius: 7px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.character-xp-fill {
  height: 100%;
  width: 0%;
  background: #888;
  transition: width 0.3s ease-out;
}

.character-xp-stats {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.8rem;
  color: #c9b89a;
}


/* ============================================================
   GLOBAL GOLD DISPLAY
   ============================================================ */

.hero-gold-text {
  font-size: 0.75rem;
  color: #ffd86b;
  margin-top: 0.25rem;
}

#gold-total {
  font-weight: bold;
  color: #ffea9c;
}

#gold-total-character {
  font-weight: bold;
  color: #ffea9c;
}