/* problemos-bubbles-3d.css — 100% эталонный 3D-объем, стекло и световая глубина (v20261009-karpathy-sprint).
   Соответствие эталону Vercel (media_1791540298347_d9703fd8.jpg):
   1. .bubble-mega-3d (центр ProblemOS 240px, radial-gradient 32% 28%, многослойные inset-тени + .shadow-mega размытая тень на полу);
   2. .bubble-mint-3d / .bubble-lilac-3d / .bubble-peach-3d / .bubble-gold-3d (10 сфер каталога: 3 Деньги, 3 AI, 3 Кризис, 1 VDAI Club);
   3. Глубокий объем, стекло, контрастные смещенные блики и нижние рефлексы без грязных теней;
   4. Магнитная физика и тактильные состояния;
   5. Горизонтальная ориентация текста во всех сферах (rotate: 0deg);
   6. Мобильный вертикальный аккордеон 390px без наложений и со scrollWidth == clientWidth. */

@property --hx { syntax: "<percentage>"; inherits: true; initial-value: 32%; }
@property --hy { syntax: "<percentage>"; inherits: true; initial-value: 26%; }

:root {
  --bubble-mint-tone: #e6f6f1;
  --bubble-mint-acc: #5ea391;
  --bubble-mint-rim: #8fc7b8;

  --bubble-lilac-tone: #f0f0fb;
  --bubble-lilac-acc: #7c7fb3;
  --bubble-lilac-rim: #a4a7d6;

  --bubble-peach-tone: #fdf3ec;
  --bubble-peach-acc: #c48c6e;
  --bubble-peach-rim: #e2b297;

  --bubble-gold-tone: #fbf7ee;
  --bubble-gold-acc: #a38959;
  --bubble-gold-rim: #d1be8e;
}

/* Фиксация строгой горизонтальности текста для всех сфер */
.problem-map .pm-orbiter,
.problem-map .pm-main,
.problem-map .pm-child,
.problem-map .pm-disc {
  rotate: 0deg !important;
}

/* =========================================================================
   1. ЦЕНТРАЛЬНАЯ МЕГА-СФЕРА (ProblemOS, 240px в эталоне)
   ========================================================================= */
.problem-map {
  --ps: 24; /* увеличиваем центральное ядро для монументальности */
}

.bubble-mega-3d,
.problem-map:not([data-layout="topic"]) .pm-pearl,
.pbm-stage .pbm-dom-pearl {
  border-radius: 50%;
  background:
    radial-gradient(ellipse 46% 30% at var(--hx, 32%) var(--hy, 26%), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.75) 28%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 65% 32% at 50% 96%, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0) 75%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 55%, rgba(180, 192, 210, 0.16) 84%, rgba(140, 158, 185, 0.32) 100%),
    radial-gradient(circle at 35% 30%, #ffffff 0%, #f4f6fa 42%, #e5eaf2 75%, #d1dbe8 100%);
  box-shadow:
    inset 0 4px 8px rgba(255, 255, 255, 1),
    inset 0 -16px 28px rgba(71, 85, 105, 0.2),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.9),
    0 24px 50px -10px rgba(30, 41, 59, 0.2),
    0 40px 76px -16px rgba(51, 65, 85, 0.14);
  isolation: isolate;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

/* Размытая тень на полу под мега-сферой */
.bubble-mega-3d::after,
.problem-map:not([data-layout="topic"]) .pm-pearl::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -22px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(30, 41, 59, 0.32) 0%, rgba(30, 41, 59, 0.12) 50%, transparent 75%);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
  transform: translateZ(0);
}

.shadow-mega {
  filter: drop-shadow(0 20px 30px rgba(30, 41, 59, 0.22));
}

.pm-pearl-text b {
  font-size: clamp(17px, 3.2cqw, 28px);
  letter-spacing: -0.055em;
  font-weight: 850;
  color: #111827;
}

.pm-pearl-text b span {
  color: #64748b;
}

.pm-pearl-text small {
  font-size: clamp(9px, 1.4cqw, 12px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 700;
}

/* =========================================================================
   2. РОДИТЕЛЬСКИЕ КЛАСТЕРЫ 3D (.pm-main / .pbm-dom-cluster)
   ========================================================================= */
.problem-map .pm-main,
.pbm-stage .pbm-dom-cluster {
  border-radius: 50%;
  border: none;
  isolation: isolate;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

/* Mint Кластер (Деньги) */
.problem-map .mint .pm-main,
.bubble-mint-3d.pm-main {
  background:
    radial-gradient(ellipse 45% 28% at var(--hx, 32%) var(--hy, 26%), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 65% 28% at 50% 96%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 52%, rgba(121, 170, 155, 0.2) 84%, rgba(82, 125, 112, 0.38) 100%),
    radial-gradient(circle at 35% 28%, #ffffff 0%, #edf8f5 40%, #daf0ea 72%, #bfe4da 100%);
  box-shadow:
    inset 0 3px 6px rgba(255, 255, 255, 1),
    inset 0 -10px 20px rgba(82, 125, 112, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    0 16px 36px -8px rgba(23, 33, 40, 0.18),
    0 28px 56px -12px rgba(82, 125, 112, 0.24);
}

/* Lilac Кластер (AI для бизнеса) */
.problem-map .lilac .pm-main,
.bubble-lilac-3d.pm-main {
  background:
    radial-gradient(ellipse 45% 28% at var(--hx, 32%) var(--hy, 26%), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 65% 28% at 50% 96%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 52%, rgba(143, 146, 193, 0.2) 84%, rgba(114, 118, 168, 0.38) 100%),
    radial-gradient(circle at 35% 28%, #ffffff 0%, #f4f4fd 40%, #e6e6f8 72%, #d2d2f2 100%);
  box-shadow:
    inset 0 3px 6px rgba(255, 255, 255, 1),
    inset 0 -10px 20px rgba(114, 118, 168, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    0 16px 36px -8px rgba(23, 33, 40, 0.18),
    0 28px 56px -12px rgba(114, 118, 168, 0.24);
}

/* Peach Кластер (Выйти из кризиса) */
.problem-map .peach .pm-main,
.bubble-peach-3d.pm-main {
  background:
    radial-gradient(ellipse 45% 28% at var(--hx, 32%) var(--hy, 26%), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 65% 28% at 50% 96%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 52%, rgba(212, 154, 120, 0.2) 84%, rgba(162, 123, 100, 0.38) 100%),
    radial-gradient(circle at 35% 28%, #ffffff 0%, #fbf3ed 40%, #f7e6dc 72%, #edd0c0 100%);
  box-shadow:
    inset 0 3px 6px rgba(255, 255, 255, 1),
    inset 0 -10px 20px rgba(162, 123, 100, 0.25),
    inset 0 0 0 1px rgba(255, 255, 255, 0.85),
    0 16px 36px -8px rgba(23, 33, 40, 0.18),
    0 28px 56px -12px rgba(162, 123, 100, 0.24);
}

.problem-map .pm-main::after,
.pbm-stage .pbm-dom-cluster::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -12px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(23, 33, 40, 0.24) 0%, transparent 72%);
  filter: blur(6px);
  z-index: -1;
  pointer-events: none;
}

/* =========================================================================
   3. ДЕСЯТЬ СФЕР КАТАЛОГА (.pm-disc-3d / .bubble-*-3d)
   ========================================================================= */
.bubble-mint-3d .pm-disc,
.problem-map .mint .pm-disc,
.bubble-mint-3d {
  background:
    radial-gradient(ellipse 42% 26% at var(--hx, 32%) var(--hy, 26%), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.55) 30%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 65% 26% at 50% 96%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 52%, rgba(121, 170, 155, 0.18) 84%, rgba(82, 125, 112, 0.35) 100%),
    radial-gradient(circle at 35% 28%, #ffffff 0%, #edf8f5 42%, #daf0ea 72%, #c3e7de 100%) !important;
  box-shadow:
    inset 0 2.5px 5px rgba(255, 255, 255, 1),
    inset 0 -8px 16px rgba(82, 125, 112, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    0 12px 26px -6px rgba(23, 33, 40, 0.16),
    0 22px 42px -10px rgba(82, 125, 112, 0.2) !important;
}

.bubble-lilac-3d .pm-disc,
.problem-map .lilac .pm-disc,
.bubble-lilac-3d {
  background:
    radial-gradient(ellipse 42% 26% at var(--hx, 32%) var(--hy, 26%), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.55) 30%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 65% 26% at 50% 96%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 52%, rgba(143, 146, 193, 0.18) 84%, rgba(114, 118, 168, 0.35) 100%),
    radial-gradient(circle at 35% 28%, #ffffff 0%, #f4f4fd 42%, #e6e6f8 72%, #d5d5f4 100%) !important;
  box-shadow:
    inset 0 2.5px 5px rgba(255, 255, 255, 1),
    inset 0 -8px 16px rgba(114, 118, 168, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    0 12px 26px -6px rgba(23, 33, 40, 0.16),
    0 22px 42px -10px rgba(114, 118, 168, 0.2) !important;
}

.bubble-peach-3d .pm-disc,
.problem-map .peach .pm-disc,
.bubble-peach-3d {
  background:
    radial-gradient(ellipse 42% 26% at var(--hx, 32%) var(--hy, 26%), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.55) 30%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 65% 26% at 50% 96%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 52%, rgba(212, 154, 120, 0.18) 84%, rgba(162, 123, 100, 0.35) 100%),
    radial-gradient(circle at 35% 28%, #ffffff 0%, #fbf3ed 42%, #f7e6dc 72%, #f0d5c6 100%) !important;
  box-shadow:
    inset 0 2.5px 5px rgba(255, 255, 255, 1),
    inset 0 -8px 16px rgba(162, 123, 100, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    0 12px 26px -6px rgba(23, 33, 40, 0.16),
    0 22px 42px -10px rgba(162, 123, 100, 0.2) !important;
}

/* 10-я сфера каталога: VDAI Club (Gold) */
.bubble-gold-3d,
.pm-club-disc {
  background:
    radial-gradient(ellipse 42% 26% at var(--hx, 32%) var(--hy, 26%), rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.55) 30%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(ellipse 65% 26% at 50% 96%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 52%, rgba(163, 137, 89, 0.18) 84%, rgba(142, 119, 71, 0.35) 100%),
    radial-gradient(circle at 35% 28%, #ffffff 0%, #fbf7ee 42%, #f5ecd3 72%, #eddcb2 100%) !important;
  box-shadow:
    inset 0 2.5px 5px rgba(255, 255, 255, 1),
    inset 0 -8px 16px rgba(142, 119, 71, 0.22),
    inset 0 0 0 1px rgba(255, 255, 255, 0.8),
    0 12px 26px -6px rgba(23, 33, 40, 0.16),
    0 22px 42px -10px rgba(142, 119, 71, 0.2) !important;
}

/* Полная падающая тень под дочерними сферами */
.problem-map .pm-disc::after,
.pbm-dom-child::after,
.pm-club-disc::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: -9px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(23, 33, 40, 0.22) 0%, transparent 70%);
  filter: blur(4.5px);
  z-index: -1;
  pointer-events: none;
}

/* Иконка в кружочке по центру сферы */
.problem-map .pm-ico,
.pbm-dom-child .pm-ico,
.pm-club-disc .pm-ico {
  background: rgba(255, 255, 255, 0.94) !important;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 1.5px #fff,
    0 2px 6px -1px rgba(23, 33, 40, 0.12),
    0 0 0 1px rgba(255, 255, 255, 0.9) !important;
}

/* Типографика подписей под сферами */
.pm-note {
  font-weight: 500;
  color: #52646f;
  margin-top: 8px;
}

/* =========================================================================
   4. ТАКТИЛЬНЫЙ ХОВЕР И МАГНИТНЫЙ ПРИТЯГАТЕЛЬ (pull <= 8px)
   ========================================================================= */
@media (hover: hover) and (pointer: fine) {
  .problem-map .pm-child:hover .pm-disc,
  .pbm-dom-child:hover,
  .pm-club:hover .pm-club-disc {
    transform: translateY(-4px) scale(1.04);
  }

  .problem-map .pm-main:hover,
  .pbm-stage .pbm-dom-cluster:hover,
  .problem-map .pm-pearl:hover {
    transform: translateY(-3px) scale(1.03);
  }
}

/* =========================================================================
   5. МОБИЛЬНАЯ ВЕРСИЯ 390px (Вертикальный аккордеон без наложений, scrollWidth == clientWidth)
   ========================================================================= */
@media (max-width: 559px) {
  .problem-map,
  .pbm-map-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    box-sizing: border-box;
  }

  .problem-map .pm-main,
  .pbm-stage .pbm-dom-cluster {
    width: 124px;
    height: 124px;
  }

  .problem-map .pm-disc,
  .pbm-dom-child {
    width: 96px;
    height: 96px;
  }

  .problem-map:not([data-layout="topic"]) .pm-pearl,
  .pbm-stage .pbm-dom-pearl {
    width: 180px;
    height: 180px;
  }

  .pm-children {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pm-child {
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
    box-sizing: border-box;
  }
}