/* ═══════════════════════════════════════════════════════════════════
   AURALIS · ScaleSlider (1-5 scale) — ВЪЛНА 3.1 Task А
   ═══════════════════════════════════════════════════════════════════ */

.ss-wrap {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 8px 0;
}

.ss-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.ss-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--border-color);
  background: transparent;
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 8px;
  transition: transform var(--dur-fast) var(--ease), background var(--dur) var(--ease),
              border-color var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
[data-theme="light"] .ss-circle,
:root:not([data-theme]) .ss-circle {
  background: var(--surface);
  box-shadow: var(--shadow-card-sm);
  border-color: hsl(220 18% 86%);
}
[data-theme="dark"] .ss-circle {
  background: hsl(220 25% 8% / 0.5);
  border-color: hsl(220 20% 18%);
}

.ss-circle:active { transform: scale(0.95); }

.ss-circle.is-active {
  background: linear-gradient(135deg, hsl(38 80% 50%), hsl(38 70% 42%));
  border-color: hsl(38 80% 55%);
  color: white;
  box-shadow: 0 0 16px hsl(38 80% 55% / 0.4);
}

.ss-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  max-width: 64px;
  line-height: 1.2;
  word-wrap: break-word;
}

@media (prefers-reduced-motion: reduce) {
  .ss-circle { transition: none; }
}