.stats-bar-chart {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 10px;
  }
  
  .stat-group {
    display: flex;
    align-items: center;
    margin-bottom: 3px;
  }
  
  .stat-label {
    flex: 0 0 100px;
    margin-right: 10px;
    color: white;
    text-align: right;
  }
  
  .stat-bar-container {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
  }
  
  .stat-bar {
    height: 20px;
    border-radius: 5px;
    position: absolute;
  }
  
  .pokemon-bar {
    z-index: 2;
    width: var(--pokemon-bar-width);
    background-color: var(--pokemon-bar-color);
  }
  
  .max-bar {
    z-index: 1;
    width: 100% !important;
    opacity: 0.3;
    background-color: rgba(194, 23, 23, 0.705) !important;
  }
  
  .stat-legend {
    display: flex;
    justify-content: center;
    margin-top: 10px;
    gap: 20px;
  }
  
  .legend-box {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    border-radius: 3px;
  }
  
  .legend-box.pokemon {
    background-color: #ff6384;
  }
  
  .legend-box.max {
    background-color: rgba(194, 23, 23, 0.705) !important;
  }