/* ===================== Матрица судьбы =====================
   Отдельный файл — чтобы не задеть base.css/ritual.css.
   Цвета закреплены по макету дизайнера (светлая тема). Классы
   надстраиваются над .card-tile / .stack из base.css.
   Префикс mx- у всего, чтобы не пересекаться с существующим. */

/* ---------- хаб-аккордеон (список продуктов) ---------- */
.mx-row{
  display:flex;align-items:center;gap:13px;
  cursor:pointer;
  transition:transform var(--dur-fast,200ms) var(--ease-out),
             box-shadow var(--dur-fast,200ms) var(--ease-out);
}
.mx-row:active{transform:scale(.985)}
.mx-row--free{
  border-color:rgba(111,151,127,.45);
  background:linear-gradient(168deg,#FFFFFF,#F3F6F1);
}
.mx-row-ic{
  flex:none;width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 26%,#FFFAEE,#F7EBCB 62%,#F0DCA8);
  border:1px solid rgba(199,154,69,.34);
  box-shadow:0 5px 13px -7px rgba(138,106,46,.5);
}
.mx-row-tx{flex:1;min-width:0}
.mx-row-tx b{
  font-family:var(--font-text);font-weight:600;font-size:15.5px;color:#2A2620;
  display:block;line-height:1.2;
}
.mx-row-sub{
  font-size:12px;line-height:1.4;margin-top:3px;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.mx-row-price{
  flex:none;align-self:flex-start;
  font-family:var(--font-text);font-weight:700;font-size:14px;color:#8A6A2E;
  white-space:nowrap;padding-top:1px;
}

/* ---------- верхняя панель со стрелкой «назад» ---------- */
.mx-topbar{display:flex;align-items:center;gap:12px;margin-bottom:2px}
.mx-topbar b{font-family:var(--font-display);font-weight:500;font-size:20px;color:#2A2620}
.mx-back{
  flex:none;width:34px;height:34px;border-radius:12px;
  background:rgba(255,255,255,.72);border:1px solid rgba(199,154,69,.24);
  display:grid;place-items:center;cursor:pointer;
  font-family:var(--font-display);font-size:20px;line-height:1;color:#8A6A2E;
  padding:0 0 3px;
  transition:background var(--dur-fast,200ms) var(--ease-out);
}
.mx-back:active{background:rgba(227,194,131,.2)}

/* ---------- звезда (обёртка вокруг matrixstar.js) ---------- */
.mx-star{
  padding:2px 6px 0;
  display:flex;justify-content:center;
}
.mx-star svg,.mx-star>div{max-width:340px;width:100%;margin:0 auto}

/* ---------- открытая зона (узел + текст) ---------- */
.mx-zone{display:flex;gap:12px;align-items:flex-start}
.mx-zone-node{
  flex:none;width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:radial-gradient(120% 120% at 50% 26%,#FFFAEE,#F0DCA8 60%,#E3C283);
  border:1.6px solid #C79A45;
  font-family:var(--font-display);font-size:19px;font-weight:600;color:#5A431C;
  box-shadow:0 6px 15px -8px rgba(199,154,69,.7);
}
.mx-zone-head{
  font-size:11px;font-weight:700;letter-spacing:.1em;color:#8A6A2E;
  text-transform:uppercase;
}
.mx-zone-text{font-size:13.5px;line-height:1.5;color:#2A2620;margin-top:4px}

/* ---------- «под вуалью» (закрытые зоны) ---------- */
.mx-veil{
  border-style:dashed !important;
  border-color:rgba(199,154,69,.4) !important;
  background:rgba(251,246,236,.75) !important;
  box-shadow:none !important;
}
.mx-veil>b{
  font-family:var(--font-text);font-weight:700;font-size:13px;color:#6B5E48;
  display:block;
}

/* ---------- легенда пары (ты / партнёр) ---------- */
.mx-legend{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;
  font-size:12px;color:#6B5E48;
}
.mx-legend span{display:inline-flex;align-items:center;gap:7px}
.mx-legend i{width:10px;height:10px;border-radius:50%;flex:none;display:inline-block}