/* Destiny Matrix CSS - Extracted directly from tvoyamatritsa.ru */

.matrix-diagram {
  position: relative;
  font-size: 8px;
  max-width: 872px;
  margin: 0 auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.matrix-diagram__svg {
  position: relative;
  padding-bottom: 100%;
}

.matrix-diagram__svg svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Circles - base styles */
.matrix-diagram__circle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  z-index: 5;
  border-radius: 50%;
  border: 2px solid transparent;
  background-color: #cacace;
  color: #a3a3a6;
  font-weight: 500;
  line-height: 1;
  transition: color 0.3s, background-color 0.3s, border-color 0.3s;
  cursor: pointer;
}

/* Circle positions */
.matrix-diagram__circle.-position-a { top: 50%; left: 3.9%; transform: translate(0, -50%); }
.matrix-diagram__circle.-position-a2 { top: 50%; left: 13%; transform: translate(0, -50%); }
.matrix-diagram__circle.-position-a1 { top: 50%; left: 19.4%; transform: translate(0, -50%); }
.matrix-diagram__circle.-position-a3 { top: 50%; left: 32.4%; transform: translate(0, -50%); }
.matrix-diagram__circle.-position-b { top: 3.9%; left: 50%; transform: translate(-50%, 0); }
.matrix-diagram__circle.-position-b2 { top: 13.1%; left: 50%; transform: translate(-50%, 0); }
.matrix-diagram__circle.-position-b1 { top: 19.5%; left: 50%; transform: translate(-50%, 0); }
.matrix-diagram__circle.-position-b3 { top: 32.5%; left: 50%; transform: translate(-50%, 0); }
.matrix-diagram__circle.-position-c { top: 50.1%; right: 4%; transform: translate(0, -50%); }
.matrix-diagram__circle.-position-c2 { top: 50.1%; right: 13.1%; transform: translate(0, -50%); }
.matrix-diagram__circle.-position-c1 { top: 50.1%; right: 19.5%; transform: translate(0, -50%); }
.matrix-diagram__circle.-position-d { bottom: 3.9%; left: 50%; transform: translate(-50%, 0); }
.matrix-diagram__circle.-position-d2 { bottom: 13.1%; left: 50%; transform: translate(-50%, 0); }
.matrix-diagram__circle.-position-d1 { bottom: 19.5%; left: 50%; transform: translate(-50%, 0); }
.matrix-diagram__circle.-position-e { top: 50%; left: 49.9%; transform: translate(-50%, -50%); }
.matrix-diagram__circle.-position-e1 { top: 50%; right: 39.2%; transform: translate(0, -50%); }
.matrix-diagram__circle.-position-e2 { top: 50%; right: 34.7%; transform: translate(0, -50%); }
.matrix-diagram__circle.-position-f { top: 16%; left: 16.2%; }
.matrix-diagram__circle.-position-g { top: 16.1%; right: 16.1%; }
.matrix-diagram__circle.-position-y { bottom: 15.9%; right: 16.3%; }
.matrix-diagram__circle.-position-p1 { top: 27.8%; right: 27.8%; }
.matrix-diagram__circle.-position-p2 { top: 23%; right: 23%; }
.matrix-diagram__circle.-position-p3 { bottom: 27.8%; left: 27.8%; }
.matrix-diagram__circle.-position-p4 { bottom: 23%; left: 23%; }
.matrix-diagram__circle.-position-k { bottom: 16.1%; left: 16%; }
.matrix-diagram__circle.-position-s1 { top: 27.8%; left: 27.8%; }
.matrix-diagram__circle.-position-s2 { top: 23%; left: 23%; }
.matrix-diagram__circle.-position-s3 { bottom: 23%; right: 23%; }
.matrix-diagram__circle.-position-s4 { bottom: 27.8%; right: 27.8%; }
.matrix-diagram__circle.-position-x { bottom: 33.7%; right: 33.7%; }
.matrix-diagram__circle.-position-x1 { bottom: 26.6%; right: 40.7%; }
.matrix-diagram__circle.-position-x2 { bottom: 40.6%; right: 26.6%; }

/* Circle sizes */
.matrix-diagram__circle.-size-lg { width: 9.143%; height: 9.143%; font-size: 5em; }
.matrix-diagram__circle.-size-md { width: 6.4%; height: 6.4%; font-size: 3em; }
.matrix-diagram__circle.-size-sm { width: 4.572%; height: 4.572%; font-size: 2em; }

/* Circle active colors (when filled with values) */
.matrix-diagram__circle.-active { color: #fff; }
.matrix-diagram__circle.-purple.-active { background-color: #8a46a3; border-color: #8a46a3; }
.matrix-diagram__circle.-red.-active { background-color: #ef4141; border-color: #ef4141; }
.matrix-diagram__circle.-yellow.-active { background-color: #ffed47; border-color: #ffed47; color: #222831; }
.matrix-diagram__circle.-white.-active { background-color: #fff; border-color: #222831; color: #222831; }
.matrix-diagram__circle.-blue.-active { background-color: #526dfa; border-color: #526dfa; }
.matrix-diagram__circle.-cyan.-active { background-color: #45cfe1; border-color: #45cfe1; }
.matrix-diagram__circle.-orange.-active { background-color: #ffae34; border-color: #ffae34; }
.matrix-diagram__circle.-green.-active { background-color: #afde61; border-color: #afde61; }

/* Numbers - base styles */
.matrix-diagram__number {
  position: absolute;
  font-size: 1.5em;
  z-index: 10;
  min-width: 14px;
  text-align: center;
  color: #1a1a1a;
  font-weight: 500;
}
.matrix-diagram__number.-bold { font-weight: 700; }

/* Current age highlight */
.matrix-diagram__number.-current-age {
  font-size: 2em;
  font-weight: 800;
  color: #1a4b8c;
  background: rgba(26, 75, 140, 0.15);
  border-radius: 4px;
  padding: 2px 4px;
  box-shadow: 0 0 8px rgba(26, 75, 140, 0.5);
}

/* Number positions */
.matrix-diagram__number.-position-b8 { top: 3.3%; right: 40.2%; }
.matrix-diagram__number.-position-b7 { top: 4.8%; right: 36.9%; }
.matrix-diagram__number.-position-k2 { top: 5.8%; right: 34.1%; }
.matrix-diagram__number.-position-k1 { top: 7.4%; right: 30.5%; }
.matrix-diagram__number.-position-k4 { top: 8.8%; right: 27.2%; }
.matrix-diagram__number.-position-k3 { top: 9.9%; right: 24.3%; }
.matrix-diagram__number.-position-k5 { top: 11.4%; right: 21%; }
.matrix-diagram__number.-position-k8 { top: 22.3%; right: 10.9%; }
.matrix-diagram__number.-position-k7 { top: 25.6%; right: 9.6%; }
.matrix-diagram__number.-position-k6 { top: 28.7%; right: 8.2%; }
.matrix-diagram__number.-position-c4 { top: 31.6%; right: 6.9%; }
.matrix-diagram__number.-position-c6 { top: 34.7%; right: 5.8%; }
.matrix-diagram__number.-position-c5 { top: 37.9%; right: 4.4%; }
.matrix-diagram__number.-position-c7 { top: 41.6%; right: 2.7%; }
.matrix-diagram__number.-position-y3 { bottom: 40.6%; right: 3.2%; }
.matrix-diagram__number.-position-y2 { bottom: 37.7%; right: 4.4%; }
.matrix-diagram__number.-position-y4 { bottom: 34.4%; right: 5.6%; }
.matrix-diagram__number.-position-y1 { bottom: 31.2%; right: 6.9%; }
.matrix-diagram__number.-position-y6 { bottom: 28.1%; right: 8.1%; }
.matrix-diagram__number.-position-y5 { bottom: 24.6%; right: 9.6%; }
.matrix-diagram__number.-position-y7 { bottom: 21.2%; right: 10.9%; }
.matrix-diagram__number.-position-d6 { bottom: 11.1%; right: 21%; }
.matrix-diagram__number.-position-y8 { bottom: 9.7%; right: 24.3%; }
.matrix-diagram__number.-position-d5 { bottom: 8.4%; right: 27.4%; }
.matrix-diagram__number.-position-d4 { bottom: 6.5%; right: 31.3%; }
.matrix-diagram__number.-position-d8 { bottom: 5.1%; right: 35%; }
.matrix-diagram__number.-position-d7 { bottom: 3.7%; right: 38.7%; }
.matrix-diagram__number.-position-d9 { bottom: 2.3%; right: 42.8%; }
.matrix-diagram__number.-position-g3 { bottom: 2.5%; left: 41.7%; }
.matrix-diagram__number.-position-g2 { bottom: 3.7%; left: 38.6%; }
.matrix-diagram__number.-position-g4 { bottom: 5%; left: 35.3%; }
.matrix-diagram__number.-position-g1 { bottom: 6.5%; left: 31.3%; }
.matrix-diagram__number.-position-g7 { bottom: 7.8%; left: 28.3%; }
.matrix-diagram__number.-position-g5 { bottom: 9.1%; left: 25.3%; }
.matrix-diagram__number.-position-g6 { bottom: 10.5%; left: 22.1%; }
.matrix-diagram__number.-position-t3 { bottom: 22.2%; left: 10.8%; }
.matrix-diagram__number.-position-t2 { bottom: 25.3%; left: 9.8%; }
.matrix-diagram__number.-position-t4 { bottom: 28.4%; left: 8.3%; }
.matrix-diagram__number.-position-t1 { bottom: 31.6%; left: 6.7%; }
.matrix-diagram__number.-position-t6 { bottom: 34.7%; left: 5.7%; }
.matrix-diagram__number.-position-t5 { bottom: 38%; left: 4.1%; }
.matrix-diagram__number.-position-t7 { bottom: 41.6%; left: 2.7%; }
.matrix-diagram__number.-position-a5 { top: 40.8%; left: 3.2%; }
.matrix-diagram__number.-position-a4 { top: 37.7%; left: 4.5%; }
.matrix-diagram__number.-position-a6 { top: 34.4%; left: 5.6%; }
.matrix-diagram__number.-position-f1 { top: 31.2%; left: 6.8%; }
.matrix-diagram__number.-position-f3 { top: 28%; left: 8.2%; }
.matrix-diagram__number.-position-f2 { top: 24.8%; left: 9.7%; }
.matrix-diagram__number.-position-f4 { top: 21.1%; left: 11.1%; }
.matrix-diagram__number.-position-f7 { top: 10.8%; left: 22.1%; }
.matrix-diagram__number.-position-f6 { top: 9.4%; left: 25.5%; }
.matrix-diagram__number.-position-f8 { top: 8%; left: 28.8%; }
.matrix-diagram__number.-position-f5 { top: 6.4%; left: 32%; }
.matrix-diagram__number.-position-b5 { top: 5.3%; left: 35.1%; }
.matrix-diagram__number.-position-b4 { top: 4%; left: 38.4%; }
.matrix-diagram__number.-position-b6 { top: 3%; left: 42%; }

/* Hover effect */
.matrix-diagram__circle:hover {
  transform: scale(1.1);
  z-index: 20;
}
.matrix-diagram__circle.-position-a:hover { transform: translate(0, -50%) scale(1.1); }
.matrix-diagram__circle.-position-a2:hover { transform: translate(0, -50%) scale(1.1); }
.matrix-diagram__circle.-position-a1:hover { transform: translate(0, -50%) scale(1.1); }
.matrix-diagram__circle.-position-a3:hover { transform: translate(0, -50%) scale(1.1); }
.matrix-diagram__circle.-position-b:hover { transform: translate(-50%, 0) scale(1.1); }
.matrix-diagram__circle.-position-b2:hover { transform: translate(-50%, 0) scale(1.1); }
.matrix-diagram__circle.-position-b1:hover { transform: translate(-50%, 0) scale(1.1); }
.matrix-diagram__circle.-position-b3:hover { transform: translate(-50%, 0) scale(1.1); }
.matrix-diagram__circle.-position-c:hover { transform: translate(0, -50%) scale(1.1); }
.matrix-diagram__circle.-position-c2:hover { transform: translate(0, -50%) scale(1.1); }
.matrix-diagram__circle.-position-c1:hover { transform: translate(0, -50%) scale(1.1); }
.matrix-diagram__circle.-position-d:hover { transform: translate(-50%, 0) scale(1.1); }
.matrix-diagram__circle.-position-d2:hover { transform: translate(-50%, 0) scale(1.1); }
.matrix-diagram__circle.-position-d1:hover { transform: translate(-50%, 0) scale(1.1); }
.matrix-diagram__circle.-position-e:hover { transform: translate(-50%, -50%) scale(1.1); }
.matrix-diagram__circle.-position-e1:hover { transform: translate(0, -50%) scale(1.1); }
.matrix-diagram__circle.-position-e2:hover { transform: translate(0, -50%) scale(1.1); }

/* Mobile responsive - smaller fonts for phones */
@media screen and (max-width: 600px) {
  .matrix-diagram {
    font-size: 1.4vw !important;
  }
  .matrix-diagram__circle.-size-lg { font-size: 3.5em !important; }
  .matrix-diagram__circle.-size-md { font-size: 2em !important; }
  .matrix-diagram__circle.-size-sm { font-size: 1.3em !important; }
  .matrix-diagram__number { font-size: 1em !important; }
  .matrix-diagram__number.-current-age { font-size: 1.3em !important; }
}

@media screen and (max-width: 400px) {
  .matrix-diagram {
    font-size: 1.2vw !important;
  }
  .matrix-diagram__circle.-size-lg { font-size: 3em !important; }
  .matrix-diagram__circle.-size-md { font-size: 1.8em !important; }
  .matrix-diagram__circle.-size-sm { font-size: 1.2em !important; }
  .matrix-diagram__number { font-size: 0.9em !important; }
  .matrix-diagram__number.-current-age { font-size: 1.1em !important; }
}