/**
 * Trad Tune Explorer - Tune Personality Radar Chart Styles
 */

.radar-chart-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 20px auto;
  width: 100%;
  max-width: 380px;
  position: relative;
}

.radar-chart-placeholder {
  width: 100%;
  aspect-ratio: 1; /* Maintain square ratio */
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.radar-chart-placeholder svg {
  width: 100%;
  height: 100%;
  overflow: visible; /* Ensure axis labels and tooltips do not clip */
}

/* Base text formatting for SVG labels */
.radar-chart-placeholder text {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  user-select: none;
}

/* Tooltip style mapping to Trad Tune Explorer's global theme */
#tt.tooltip {
  position: fixed;
  display: none;
  background: rgba(15, 17, 21, 0.96);
  border: 1px solid rgba(138, 180, 255, 0.2);
  border-radius: 12px;
  padding: 10px 14px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  z-index: 9999;
  max-width: min(290px, calc(100vw - 24px));
  backdrop-filter: blur(8px);
  color: #ffffff;
  font-family: system-ui, -apple-system, sans-serif;
}

#tt.tooltip b {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  color: #8ab4ff; /* Accent blue */
}

#tt.tooltip .desc {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.4;
  margin-top: 2px;
  display: block;
}

/* Responsive Scaling and Typography Adjustments */
@media (max-width: 480px) {
  .radar-chart-container {
    max-width: 320px;
  }
  
  .radar-chart-placeholder text {
    font-size: 10px !important;
  }
}