/* BDO Class Hub spec radar on class guides (cr-1) */
.class-radar-card {
  --crd-w: calc(var(--path-stat-chip, 13.25rem) * 1.75);
  box-sizing: border-box; width: var(--crd-w); max-width: 100%;
  margin-left: calc(var(--path-stat-chip, 13.25rem) * 1.5 + var(--path-stat-gap, 0.75rem) - var(--crd-w) / 2);
  padding: 0.6rem 0.7rem 0.35rem; border: 1px solid rgba(178, 141, 85, 0.5); border-radius: 8px;
  background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(4px); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
  pointer-events: auto; opacity: 0; transform: translateY(6px); transition: opacity 0.45s ease, transform 0.45s ease;
}
.path-hero-panel--right .class-radar-card { margin-left: 0; margin-right: calc(var(--path-stat-chip, 13.25rem) * 1.5 + var(--path-stat-gap, 0.75rem) - var(--crd-w) / 2); }
.class-radar-card.is-in { opacity: 1; transform: none; }
.class-radar-title { margin: 0 0 0.1rem; text-align: center; color: rgba(242, 239, 232, 0.72); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
.crd-radar { display: block; width: 100%; height: auto; overflow: visible; }
.crd-ring, .crd-spoke { fill: none; stroke: rgba(178, 141, 85, 0.25); stroke-width: 1; }
.crd-axis { fill: #d8d0bf; font-weight: 600; letter-spacing: 0.02em; }
.crd-poly { stroke-width: 2.2; stroke-linejoin: round; transform-box: view-box; transform-origin: 170px 150px; animation: crd-grow 0.9s cubic-bezier(.2,.8,.2,1) 0.15s both; }
.crd-poly-class { fill: rgba(200, 160, 90, 0.36); stroke: #e3c27a; filter: drop-shadow(0 0 6px rgba(227, 194, 122, 0.45)); }
@keyframes crd-grow { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.crd-pt { cursor: pointer; outline: none; }
.crd-hit { fill: transparent; }
.crd-dot { fill: #f1d79a; animation: crd-fade 0.4s 0.9s both; }
@keyframes crd-fade { from { opacity: 0; } }
.crd-tip { opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.crd-tip rect { fill: rgba(10, 9, 8, 0.94); stroke: #b28d55; }
.crd-tip text { fill: #f1d79a; font-size: 15px; font-weight: 700; }
.crd-pt:hover .crd-tip, .crd-pt:focus .crd-tip { opacity: 1; }
.crd-pt:hover .crd-hit, .crd-pt:focus .crd-hit { fill: rgba(227, 194, 122, 0.18); }
/* flow twin: only on small screens, where the hero card is hidden */
.class-radar-card--flow { display: none; }
@media (max-width: 640px) {
  .path-hero-panel .class-radar-card { display: none; }
  .class-radar-card.class-radar-card--flow { display: block; --crd-w: min(22rem, calc(100% - 2.5rem)); margin: 1.1rem auto 3.4rem; position: relative; z-index: 5; background: rgba(12, 10, 8, 0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .class-radar-card { transition: none; transform: none; }
  .crd-poly, .crd-dot { animation: none; }
  .crd-tip { transition: none; }
}