.level-journey {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  margin: 16px 0;
}


.level-bar {
  display: flex;
  width: 100%;
  max-width: 360px;
  height: 14px;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08),
              0 6px 14px rgba(0,0,0,.15) inset;
  background: #eee;
}

.level-segment {
  height: 100%;
}



.level-segment.is-current-level {
  outline: 2px solid rgba(255,255,255,.9);
  box-shadow: 0 0 6px rgba(0,0,0,.6), 0 0 10px rgba(255,255,255,.8) inset;
}

.level-caption {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.3;
  color: #4a5568;
  text-align: center;
  font-weight: 500;
}

.bp-wrapper {
  background: #f4f6fa;
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.08);
  padding: 12px 16px;
  width: clamp(220px, 35vw, 280px); /* fixed feel, flexible on mobile */
  flex-shrink: 0;
  margin-top: 8px;
  margin-bottom: 12px;
}


/* Bar + scale container */
.bp-bar-area {
  position: relative;
  width: 100%;
  margin-top: 6px;
}

/* Bar track */
.bp-bar {
  position: relative;
  height: 12px;
  background: #d9dde3;
  border-radius: 10px;
  overflow: hidden;
}

/* Filled portion */
.bp-bar-current {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 10px 0 0 10px;
  transition: width 0.3s ease;
}

/* Dotted remaining section */
.bp-bar-remaining {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.4) 0 4px,
    rgba(0,0,0,0.06) 4px 8px
  );
}

/* Scale now sits INSIDE the frame */
.bp-scale {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 6px;       /* sits below the bar but inside wrapper */
  font-size: 11px;
  font-weight: 500;
  color: #0a1a40;
  padding: 0 2px;        /* a little inset */
}

.bp-scale span {
  white-space: nowrap;
}

.bp-unit {
  font-size: 0.7em;
  opacity: 0.75;
  position: relative;
  top: 1px;           /* slightly lower than digits */
  margin-left: 2px;   /* closer to the number */
  letter-spacing: -0.5px; /* tighten visual gap */
}

.legend {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.4rem;
  color: #6b7280;
  font-size: 0.9rem;

  margin-bottom: 0.4rem;   /* ↓ reduced from 0.8rem */
  padding-bottom: 0.4rem;  /* ↓ reduced from 0.6rem */
  border-bottom: 1px solid #e5e7eb;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.legend .stat-icon {
  width: 18px;
  height: 18px;
  opacity: 0.9;
  position: relative;
  top: -1px;
}