/* results.html — trait bubbles + explanatory text, on the shared theme. */

.results-header {
  text-align: center;
  padding: 70px 24px 10px;
}

.results-header h2 {
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
}

/* Pentagon layout: 5 bubbles positioned around a circle, matching the
   site's Big-Five radar motif (top vertex, then clockwise). Bubble size is
   a percentage of the container (not a fixed px value swapped at a
   breakpoint) so the ratio between bubble size and pentagon radius never
   drifts -- that drift is what caused overlap on narrow phones, where the
   container kept shrinking with vw but a breakpoint-fixed bubble size
   didn't. */
.trait-circle {
  position: relative;
  width: min(90vw, 500px);
  aspect-ratio: 1;
  margin: 30px auto 20px;
}

.trait-bubble {
  position: absolute;
  width: 28%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 2px solid var(--bubble-color, var(--gold));
  background: var(--card-bg);
  color: var(--text);
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Passive idle glow -- signals "clickable" even before the user hovers. */
  animation: bubble-breathe 2.6s ease-in-out infinite;
}

.trait-bubble:nth-child(1) { top: 18%;   left: 50%; }
.trait-bubble:nth-child(2) { top: 40.1%; left: 80.4%; }
.trait-bubble:nth-child(3) { top: 75.9%; left: 68.8%; }
.trait-bubble:nth-child(4) { top: 75.9%; left: 31.2%; }
.trait-bubble:nth-child(5) { top: 40.1%; left: 19.6%; }

.trait-bubble:hover {
  animation-play-state: paused;
  transform: translate(-50%, -50%) translateY(-4px);
  box-shadow: 0 12px 26px -14px var(--bubble-color, var(--gold));
}

@keyframes bubble-breathe {
  0%, 100% { box-shadow: 0 0 0 0 var(--bubble-glow, rgba(212, 175, 110, 0.3)); }
  50% { box-shadow: 0 0 22px 4px var(--bubble-glow, rgba(212, 175, 110, 0.3)); }
}

.trait-bubble .trait-name {
  font-family: var(--font-serif);
  font-size: clamp(11px, 3vw, 15px);
  text-align: center;
  line-height: 1.2;
  padding: 0 6px;
  /* English "Conscientiousness" has no space to wrap on and would rather
     overflow the circular bubble than shrink -- allow it to split mid-word
     onto a 2nd line instead. */
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.trait-bubble .trait-score {
  font-size: clamp(15px, 4.2vw, 22px);
  font-weight: 700;
  color: var(--bubble-color, var(--gold));
}

.results-text {
  /* Same width as trait_core.css/aspect_core.css's .text_container, so the
     radar chart matches the size of the other pages' graphs and the text
     column is consistent site-wide. */
  max-width: 960px;
  margin: 50px auto;
  padding: 0 24px 40px;
  text-align: justify;
}

.results-text p {
  margin-bottom: 22px;
}

.results-text h3 {
  font-size: 22px;
  text-align: left;
}