/* ── Квартово-квинтовый круг ─────────────────── */

/* справа две кнопки, слева одна — компенсируем, чтобы текст был по центру */
.status { margin-left: 46px; }

.mic-btn.on {
  color: var(--accent);
  border-color: var(--accent);
}

#wheel {
  display: block;
  width: 100%;
  max-height: calc(100dvh - 120px);
  margin: 8px auto 0;
}

.sector { color: var(--dim); }

.sector path {
  fill: var(--board-bg);
  stroke: var(--bg);
  stroke-width: 2.5;
  cursor: pointer;
  transition: fill 0.12s;
}
.sector.minor path { fill: var(--pressed); }
.sector path:active { filter: brightness(1.2); }

.sector text {
  fill: currentColor;
  text-anchor: middle;
  font-weight: 600;
  pointer-events: none;
  user-select: none;
}
.sector .name { font-size: 18px; }
.sector.minor .name { font-size: 14px; }
.sector .role {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
}
.sector.minor .role { font-size: 10px; }

.sector.r-tonic path { fill: var(--c-root); }
.sector.r-tonic { color: #1a1206; }
.sector.r-tonic .name { font-weight: 800; }
.sector.r-dom path { fill: var(--c-fifth); }
.sector.r-sub path { fill: var(--c-third); }
.sector.r-rel path { fill: var(--c-seventh); }
.sector.r-dom, .sector.r-sub, .sector.r-rel { color: var(--note-text); }
.sector.r-dia path { fill: var(--c-tension); }
.sector.r-dia { color: #c6cdda; }

/* аккорд, услышанный с микрофона: сектор ярче, чуть «выпрыгивает» из круга */
.sector.detected {
  transform: scale(1.045);
  transition: transform 0.15s;
  color: var(--text);
}
.sector.r-tonic.detected { color: #1a1206; }
.sector.detected path { filter: brightness(1.4); }
.sector.detected .name { font-weight: 800; }

#halo {
  fill: none;
  stroke: var(--text);
  stroke-width: 5;
  pointer-events: none;
  transform: scale(1.045); /* как у .sector.detected — контур совпадает с сектором */
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.6));
  animation: halo-pulse 1s ease-in-out infinite;
}
#halo.hidden { display: none; }

@keyframes halo-pulse {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.35; }
}

#center-circle {
  fill: var(--board-bg);
  stroke: var(--line);
}

#center-name {
  fill: var(--text);
  font-size: 36px;
  font-weight: 700;
  text-anchor: middle;
  user-select: none;
}

#center-sub {
  fill: var(--dim);
  font-size: 14px;
  text-anchor: middle;
  user-select: none;
}

.leg-dot.r-tonic { background: var(--c-root); }
.leg-dot.r-dom   { background: var(--c-fifth); }
.leg-dot.r-sub   { background: var(--c-third); }
.leg-dot.r-rel   { background: var(--c-seventh); }
.leg-dot.r-dia   { background: var(--c-tension); }