/* Постановка семи сцен /presentation2. Координаты — в --su кадра 100 × 56,25
   (центры предметов приходят из Rust как --x/--y). Вход и появление текста
   идут внутри первого такта. Второй такт есть только у сцен, в которых
   раскрывается новая зависимость или выбирается действие. */

/* === 1. Вопрос: вся жизнь вокруг одной сферы ============================== */

.jr-stage--question { --hx: 55; --hy: 17; --hw: 25; --rim-r: .55; --rim-l: .3; --copy-top: 15.5; --copy-w: 33; --title-size: 3.7; --title-weight: 380; }
.jr-stage--question .jr-room__pedestal { display: none; }
.jr-stage--question .jr-cards { --ox: 64.5; --oy: 22.5; }
.jr-room--lounge .jr-room__window {
  right: 0;
  width: calc(5 * var(--su));
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(1.6 * var(--su)), #0b0c1f calc(1.6 * var(--su)) calc(1.8 * var(--su))),
    radial-gradient(ellipse at 60% 30%, #6c4fb966, #2a1f5a33 40%, transparent 70%);
  border-left: 1px solid #b9a6f522;
  opacity: .8;
}
.jr-room__sofa {
  left: -1%;
  bottom: 9%;
  width: calc(14 * var(--su));
  height: calc(7 * var(--su));
  border-radius: calc(1.5 * var(--su)) calc(1.5 * var(--su)) 0 0;
  background: linear-gradient(180deg, #17183a, #07081a);
  box-shadow: inset 0 1px #b9a6f522;
}

/* Стеклянная сфера за головой героя: звёзды внутри, золотая кромка. */
.jr-sphere {
  left: calc((var(--x) - 9) * var(--su));
  top: calc((var(--y) - 9) * var(--su));
  width: calc(18 * var(--su));
  height: calc(18 * var(--su));
  z-index: 4;
  border-radius: 50%;
}
.jr-sphere > span { position: absolute; inset: 0; border-radius: 50%; }
.jr-sphere__glow {
  inset: -45% !important;
  background: radial-gradient(circle, #fff1cf55, #f0c77a33 22%, #8d72e622 42%, transparent 64%);
  animation: jr-sphere-breathe 6s ease-in-out infinite;
}
.jr-sphere__glass {
  background:
    radial-gradient(circle at 34% 28%, #ffffff55, transparent 22%),
    radial-gradient(circle at 50% 50%, #1b1c4a33 40%, #7e6fd055 72%, #f1d3a066 96%);
  box-shadow: inset 0 0 calc(2.4 * var(--su)) #c9b8ff44, 0 0 calc(3 * var(--su)) #f0c77a33;
}
.jr-sphere__stars {
  background:
    radial-gradient(circle at 30% 60%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 62% 34%, #ffe8b0 0 1px, transparent 1.6px),
    radial-gradient(circle at 72% 70%, #fff 0 .8px, transparent 1.4px),
    radial-gradient(circle at 44% 22%, #d9ccff 0 .8px, transparent 1.4px),
    radial-gradient(circle at 20% 40%, #fff 0 .7px, transparent 1.3px),
    radial-gradient(circle at 56% 82%, #ffe8b0 0 .8px, transparent 1.4px),
    radial-gradient(circle at 84% 48%, #fff 0 .7px, transparent 1.3px),
    radial-gradient(ellipse at 50% 50%, #9b86f022, transparent 70%);
  background-size: 50% 50%, 46% 46%, 38% 38%, 54% 54%, 42% 42%, 48% 48%, 36% 36%, 100% 100%;
  animation: jr-spin 80s linear infinite;
  opacity: .9;
}
.jr-sphere__rim { border: 1px solid #f6dcaa99; box-shadow: 0 0 calc(1 * var(--su)) #f0c77a66, inset 0 0 calc(1.4 * var(--su)) #ffffff22; }
.jr-stage--question .jr-sphere__glass { animation: jr-sphere-wake 1.8s cubic-bezier(.16, 1, .3, 1) backwards; }
@keyframes jr-sphere-breathe { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.08); opacity: 1; } }
@keyframes jr-sphere-wake { from { filter: brightness(2.2) saturate(1.4); } }

/* Карточки жизни вылетают из сферы по очереди. */
.jr-stage:is(.jr-stage--question, .jr-stage--michael) .jr-card {
  animation: jr-card-arrive 1.9s cubic-bezier(.16, 1, .3, 1) calc(.3s + var(--i) * .14s) backwards;
}
@keyframes jr-card-arrive {
  0%, 12% { opacity: 0; transform: translate(calc((var(--ox) - var(--x)) * var(--su)), calc((var(--oy) - var(--y)) * var(--su))) scale(.12) rotateY(55deg); }
  68% { opacity: 1; transform: translate(0, calc(-.9 * var(--su))) scale(1.035) rotateY(-4deg); }
  100% { opacity: 1; transform: none; }
}
/* «Нет ясного пути»: карточки тянут в разные стороны, орбиты качаются. */
.jr-stage--question .jr-card__glass { animation: jr-float 8s ease-in-out infinite, jr-tug 5.2s ease-in-out infinite; animation-delay: calc(var(--i) * -1.37s), calc(var(--i) * -.8s); }
.jr-stage--question .jr-orbits__ring { animation: jr-wobble 9s ease-in-out calc(var(--i) * -3s) infinite; }
@keyframes jr-tug {
  0%, 100% { transform: rotateY(var(--tilt)) rotateZ(0deg); }
  40% { transform: rotateY(calc(var(--tilt) + 5deg)) rotateZ(1deg); }
  70% { transform: rotateY(calc(var(--tilt) - 3deg)) rotateZ(-.6deg); }
}
@keyframes jr-wobble { 0%, 100% { rotate: 0deg; } 50% { rotate: 2.5deg; } }
.jr-stage--question .ex-connections { opacity: .8; }

/* === 2. Майкл: следующая глава ============================================== */

.jr-stage--michael { --hx: 48.5; --hy: 14; --hw: 25; --rim-r: .9; --rim-l: .2; --copy-top: 15; --copy-w: 33; --title-size: 5.2; --title-weight: 700; --accent-scale: .8; }
.jr-stage--michael .jr-cards { --ox: 61; --oy: 21; }
.jr-room--office .jr-room__shelves {
  left: calc(25 * var(--su));
  top: 6%;
  width: calc(18 * var(--su));
  height: 70%;
  background:
    repeating-linear-gradient(180deg, transparent 0 calc(5.6 * var(--su)), #e9c27a33 calc(5.6 * var(--su)) calc(5.7 * var(--su)), #0a0b1d calc(5.7 * var(--su)) calc(6.2 * var(--su))),
    repeating-linear-gradient(90deg, #15163055 0 calc(.7 * var(--su)), #0c0d2088 calc(.7 * var(--su)) calc(1.2 * var(--su)));
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000 70%, transparent);
  opacity: .55;
}
.jr-room__window--city {
  left: calc(56 * var(--su));
  right: -4%;
  background: linear-gradient(180deg, #0e1030 0%, #262862 46%, #8b6a98 68%, #e9a874 80%, #2a2448 81%);
  opacity: .78;
  border-left: 1px solid #e9c27a33;
}
.jr-room__skyline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background:
    radial-gradient(circle, #ffd58f 0 1px, transparent 1.6px) 0 0 / calc(1.4 * var(--su)) calc(1.3 * var(--su)),
    linear-gradient(180deg, transparent, #07081a 90%);
  clip-path: polygon(0 40%, 6% 40%, 6% 18%, 11% 18%, 11% 52%, 18% 52%, 18% 10%, 22% 10%, 22% 4%, 25% 4%, 25% 30%, 34% 30%, 34% 46%, 44% 46%, 44% 22%, 50% 22%, 50% 60%, 60% 60%, 60% 26%, 66% 26%, 66% 12%, 70% 12%, 70% 44%, 80% 44%, 80% 20%, 88% 20%, 88% 50%, 100% 50%, 100% 100%, 0 100%);
  animation: jr-window 9s ease-in-out infinite;
}
.jr-room__mullions {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10.6 * var(--su)), #05060f calc(10.6 * var(--su)) calc(11 * var(--su)));
}
.jr-room__fire {
  left: 0;
  top: calc(44.5 * var(--su));
  width: calc(22 * var(--su));
  height: calc(1.2 * var(--su));
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 100%, #ffb34fcc, #ff7a3a55 45%, transparent 70%);
  filter: blur(2px);
  animation: jr-fire 3.1s ease-in-out infinite;
}
@keyframes jr-fire { 0%, 100% { opacity: .65; transform: scaleY(1); } 40% { opacity: 1; transform: scaleY(1.5); } 70% { opacity: .8; transform: scaleY(1.15); } }
.jr-stage--michael .jr-card__glass { box-shadow: 0 0 calc(2.4 * var(--su)) rgba(var(--jr-gold-rgb), .4), 0 calc(1 * var(--su)) calc(3 * var(--su)) #02030c99, inset 0 1px #fff3d633; }

/* Сцены 3–4: общий тоннель и превращение завала — journey-tunnel.css. */

/* === 5. Оливия: одна невидимая зависимость ==================================== */

.jr-stage--olivia { --copy-top: 13; --copy-w: 30; --body-w: 26; --title-size: 5; --title-weight: 700; --accent-scale: .6; }
.jr-stage--olivia .jr-copy__quote { color: var(--jr-gold-hi); font-weight: 500; }
.jr-room--study .jr-room__shelves--right {
  left: auto;
  right: 0;
  top: 0;
  width: calc(13 * var(--su));
  height: 82%;
  background:
    linear-gradient(90deg, #f2c77a55 0 2px, transparent 2px),
    repeating-linear-gradient(180deg, transparent 0 calc(7 * var(--su)), #f2c77a44 calc(7 * var(--su)) calc(7.15 * var(--su))),
    repeating-linear-gradient(90deg, #1b1a3a 0 calc(.8 * var(--su)), #0c0c20 calc(.8 * var(--su)) calc(1.5 * var(--su)));
  opacity: .6;
}
.jr-room__lamp {
  right: calc(-1 * var(--su));
  top: calc(36.5 * var(--su));
  width: calc(5.5 * var(--su));
  height: calc(2.8 * var(--su));
  border-radius: 50% 50% 8% 8% / 90% 90% 10% 10%;
  background: linear-gradient(180deg, #b8964f, #5e4a24);
}
.jr-room__lamp span {
  position: absolute;
  left: -120%;
  right: -120%;
  top: 60%;
  height: calc(16 * var(--su));
  background: radial-gradient(ellipse at 50% 0%, #ffd58f88, #ffb85a22 40%, transparent 70%);
  animation: jr-pulse 7s ease-in-out infinite;
}
.jr-room__desk {
  left: calc(20 * var(--su));
  right: -5%;
  top: calc(47.5 * var(--su));
  height: calc(12 * var(--su));
  background: linear-gradient(180deg, #1a1a35, #06061a 60%);
  border-top: 1px solid #e9c27a44;
}
.jr-olivia-slot {
  left: calc(55 * var(--su));
  top: calc(13 * var(--su));
  width: calc(28 * var(--su));
  height: calc(33.6 * var(--su));
  z-index: 3;
}
.jr-olivia { width: 100%; height: 100%; overflow: visible; }
/* Контровой свет экрана прорисовывается при входе; массы фигуры — `jr-fig__*`. */
.jr-olivia__line {
  fill: none;
  stroke: #ffd27e;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  filter: drop-shadow(0 0 4px #ffcf7a);
  animation: jr-draw 2.8s cubic-bezier(.45, 0, .2, 1) calc(.2s + var(--i) * .22s) backwards, jr-pulse 6s ease-in-out calc(4s + var(--i) * .4s) infinite;
}
.jr-olivia__line--thin { stroke-width: 1.4; }
.jr-olivia__line--cool {
  stroke: #c9b8ff;
  opacity: .32;
  filter: drop-shadow(0 0 4px #b39dff);
  animation: jr-draw 2.8s cubic-bezier(.45, 0, .2, 1) calc(.2s + var(--i) * .22s) backwards;
}
.jr-laptop-slot { left: calc(39 * var(--su)); top: calc(34 * var(--su)); width: calc(26 * var(--su)); height: calc(14.7 * var(--su)); z-index: 4; }
.jr-laptop { width: 100%; height: 100%; }
.jr-laptop__lid { fill: #1d1e36; stroke: #8f8fb855; stroke-width: 1; }
.jr-laptop__base { fill: #0e0f22; stroke: #8f8fb844; }
.jr-laptop__logo { fill: none; stroke: #f2d08c; stroke-width: 1.6; filter: drop-shadow(0 0 4px #f2c77a); animation: jr-pulse 4s ease-in-out infinite; }

.jr-risk {
  left: calc((var(--x) - 5.5) * var(--su));
  top: calc((var(--y) - 5.5) * var(--su));
  width: calc(11 * var(--su));
  height: calc(11 * var(--su));
  z-index: 5;
}
.jr-risk__orb {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: calc(.4 * var(--su));
  border-radius: 50%;
  border: 1px solid #ffd894;
  background: radial-gradient(circle, #2a2050ee 45%, #6b4b9a88 75%, #f2c77a44 100%);
  box-shadow: 0 0 calc(2.4 * var(--su)) #f2c77a66, inset 0 0 calc(1.6 * var(--su)) #f2c77a44;
  color: #fff3d6;
  font: 700 max(10px, calc(1.05 * var(--su)))/1 var(--font);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.jr-risk__orb .jr-glyph { width: calc(3 * var(--su)); height: calc(3 * var(--su)); color: var(--jr-gold-hi); }
.jr-risk__sparkle {
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 20% 30%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 80% 24%, #ffe1a0 0 1.2px, transparent 2px),
    radial-gradient(circle at 70% 80%, #fff 0 1px, transparent 2px),
    radial-gradient(circle at 26% 76%, #d9ccff 0 1.2px, transparent 2px),
    radial-gradient(circle at 50% 6%, #fff 0 .8px, transparent 1.6px),
    radial-gradient(circle, transparent 55%, #f2c77a22 66%, transparent 74%);
  animation: jr-spin 24s linear infinite;
  pointer-events: none;
}
.jr-stage--olivia[data-beat="1"] .jr-risk__orb { animation: jr-alarm 2.6s ease-in-out infinite; }
@keyframes jr-alarm {
  0%, 100% { box-shadow: 0 0 calc(2.4 * var(--su)) #f2c77a66, inset 0 0 calc(1.6 * var(--su)) #f2c77a44; border-color: #ffd894; }
  50% { box-shadow: 0 0 calc(4 * var(--su)) #f19a86aa, inset 0 0 calc(2 * var(--su)) #f19a8666; border-color: #f6b3a2; }
}

.jr-tiles { inset: 0; z-index: 4; --ox: 57; --oy: 15; perspective: calc(80 * var(--su)); }
.jr-tile {
  position: absolute;
  left: calc((var(--x) - 5.6) * var(--su));
  top: calc((var(--y) - 3.6) * var(--su));
  width: calc(11.2 * var(--su));
  height: calc(7.2 * var(--su));
  display: grid;
  justify-items: center;
  align-content: center;
  gap: calc(.5 * var(--su));
  border: 1px solid #f2d39066;
  border-radius: calc(.8 * var(--su));
  background: linear-gradient(160deg, #2a2c5a99, #0b0c22e6);
  box-shadow: 0 0 calc(1.4 * var(--su)) #f2c77a2e, inset 0 1px #fff3d633;
  transform: rotateY(var(--tilt));
  font: 650 max(10px, calc(.86 * var(--su)))/1.2 var(--font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f6efe0;
  transition: opacity .7s ease calc(var(--i) * .2s), transform 1.2s cubic-bezier(.16, 1, .3, 1) calc(var(--i) * .2s), border-color .8s, box-shadow .8s;
}
.jr-tile__icon .jr-glyph { width: calc(2.8 * var(--su)); height: calc(2.8 * var(--su)); color: #cfc4f6; }
.jr-stage--olivia .jr-tile {
  animation: jr-deal-arrive 1.7s cubic-bezier(.16, 1, .3, 1) calc(.45s + var(--i) * .16s) backwards;
}
@keyframes jr-deal-arrive {
  from { opacity: 0; transform: translate(calc((var(--ox) - var(--x)) * var(--su)), calc((var(--oy) - var(--y)) * var(--su))) scale(.15) rotateY(65deg); }
  to { opacity: 1; transform: rotateY(var(--tilt)); }
}
.jr-stage--olivia[data-beat="1"] .jr-tile--hidden { border-color: #f6a996; box-shadow: 0 0 calc(2 * var(--su)) #f19a8677, inset 0 1px #ffd9cc44; }
.jr-stage--olivia[data-beat="1"] .jr-tile--hidden .jr-glyph { color: #ffc2b3; }
.jr-hidden { inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; pointer-events: none; }
.jr-hidden path { fill: none; stroke-linecap: round; stroke-dasharray: 1; }
.jr-hidden__glow { stroke: #f19a86; stroke-width: .8; opacity: .25; }
.jr-hidden__line { stroke: #ffc2b3; stroke-width: .18; filter: drop-shadow(0 0 .3px #f19a86); }
.jr-stage--olivia:not([data-beat="1"]) .jr-hidden path { stroke-dashoffset: 1; }
.jr-stage--olivia[data-beat="1"] .jr-hidden path { animation: jr-draw 2.4s cubic-bezier(.45, 0, .2, 1) .3s backwards; }

/* === 6. Дэниел: стратегия становится действием ================================== */

.jr-stage--daniel { --hx: 22; --hy: 12; --hw: 22; --rim-r: .85; --rim-l: .25; --copy-top: 13; --copy-w: 24; --body-w: 19; --title-size: 3.9; --title-weight: 700; --accent-scale: .64; }
.jr-stage--daniel .jr-copy__body { font-size: max(12px, calc(1.2 * var(--su))); }
.jr-room__window--grid {
  left: 0;
  right: 0;
  bottom: 30% !important;
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(9.8 * var(--su)), #05060f calc(9.8 * var(--su)) calc(10.3 * var(--su))),
    radial-gradient(circle, #f3c97a 0 1px, transparent 1.5px) 0 calc(28 * var(--su)) / calc(1.6 * var(--su)) calc(1.2 * var(--su)) no-repeat,
    linear-gradient(180deg, #0b0c22, #1a1b44 70%, #2e2a5a);
  opacity: .5;
}
.jr-room__desk--right { left: calc(55 * var(--su)); top: calc(46.5 * var(--su)); }
.jr-room__mug {
  left: calc(61 * var(--su));
  top: calc(41.5 * var(--su));
  width: calc(3.4 * var(--su));
  height: calc(4.4 * var(--su));
  border-radius: 0 0 calc(.6 * var(--su)) calc(.6 * var(--su));
  background: linear-gradient(90deg, #0a0a18, #24233f 50%, #0a0a18);
  box-shadow: inset 0 0 0 1px #e9c27a33;
}
.jr-board {
  left: calc(44 * var(--su));
  top: calc(9 * var(--su));
  width: calc(54 * var(--su));
  height: calc(36 * var(--su));
  z-index: 3;
  perspective: calc(90 * var(--su));
}
.jr-board__glass {
  position: absolute;
  inset: 0;
  border: 1px solid #b9a6f540;
  border-radius: calc(1 * var(--su));
  background:
    radial-gradient(ellipse at 70% 30%, #6a55c022, transparent 60%),
    linear-gradient(160deg, #191b44cc, #0a0b22e6);
  box-shadow: 0 0 calc(3 * var(--su)) #7c63e033, inset 0 1px #e8dcff22;
  transform: rotateY(-10deg) rotateX(2deg);
  transform-origin: 0 50%;
  animation: jr-board-in 1.8s cubic-bezier(.16, 1, .3, 1) .2s backwards;
}
.jr-board__glass::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #ddd2ffcc, transparent);
  box-shadow: 0 0 14px #b9a6f5;
  animation: jr-scan 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes jr-board-in { from { opacity: 0; transform: rotateY(-34deg) rotateX(4deg) scale(.9); filter: blur(8px); } }
@keyframes jr-scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 60% { top: 100%; opacity: .6; } 61%, 100% { top: 100%; opacity: 0; } }
.jr-board__links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.jr-board__link { fill: none; stroke: #b9a6f5; stroke-width: .16; opacity: .7; stroke-dasharray: 1; }
.jr-board__link--gold { stroke: #f2d08c; }
.jr-board__arrow { stroke: #8f87c4; stroke-width: .12; }
.jr-board__gem { stroke: none; transform-box: fill-box; transform-origin: center; }
.jr-board__gem[data-tint="0"] { fill: #b9a6f5; }
.jr-board__gem[data-tint="1"] { fill: #86e3cb; }
.jr-board__gem[data-tint="2"] { fill: #f2d08c; }
.jr-board__gem[data-tint="3"] { fill: #ffffff; }
.jr-board__vertical { stroke: #86e3cb; stroke-width: .12; opacity: .7; }
.jr-stage--daniel .jr-board__link { animation: jr-draw 1.4s ease calc(.2s + var(--i) * .16s) backwards; }
.jr-board__chain { transition: opacity 1s ease calc(.8s + var(--i) * .3s); }
.jr-stage--daniel .jr-board__gem { animation: jr-gem 4.8s ease-in-out infinite; animation-delay: calc(var(--k) * .35s); }
@keyframes jr-gem { 0%, 70%, 100% { transform: scale(1); filter: none; } 80% { transform: scale(1.7); filter: drop-shadow(0 0 3px currentColor) brightness(1.4); } }

.jr-board__col { position: absolute; top: 3%; }
.jr-board__col h3 { margin: 0; font: 600 max(9px, calc(.82 * var(--su)))/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #ddd2ff; }
.jr-board__col--init { left: 3%; }
.jr-board__col--teams { left: 36%; }
.jr-board__col--deps { left: 59%; }
.jr-board__col--results { left: 81%; width: 17%; }
.jr-board__col--results h3 { color: var(--jr-gold-hi); }
.jr-row, .jr-result {
  position: absolute;
  top: var(--top);
  display: flex;
  align-items: center;
  gap: calc(.6 * var(--su));
  padding: calc(.45 * var(--su)) calc(.7 * var(--su));
  border: 1px solid #b9a6f533;
  border-radius: calc(.5 * var(--su));
  background: #ffffff08;
  font-size: max(9px, calc(.82 * var(--su)));
  line-height: 1.2;
  color: #eceaf8;
  translate: 0 -50%;
  animation: jr-row-in .9s cubic-bezier(.16, 1, .3, 1) calc(.5s + var(--i) * .12s) backwards;
}
.jr-row { left: 3%; width: 21%; }
.jr-row--team { left: 36%; width: 16%; animation-delay: calc(.9s + var(--i) * .12s); }
.jr-result { left: 81%; width: 17%; min-height: 18%; padding: calc(.7 * var(--su)); flex-direction: column; align-items: flex-start; justify-content: center; gap: calc(.4 * var(--su)); border-color: #f2d08c55; font-size: max(9px, calc(.76 * var(--su))); overflow-wrap: anywhere; animation-delay: calc(1.3s + var(--i) * .15s); }
.jr-row .jr-glyph, .jr-result .jr-glyph { width: calc(1.6 * var(--su)); height: calc(1.6 * var(--su)); flex: none; color: #cfc4f6; }
.jr-result .jr-glyph { width: calc(2.2 * var(--su)); height: calc(2.2 * var(--su)); color: var(--jr-gold); }
@keyframes jr-row-in { from { opacity: 0; translate: calc(-1.2 * var(--su)) -50%; } }
.jr-next {
  position: absolute;
  left: 36%;
  top: 82%;
  width: 38%;
  display: flex;
  align-items: center;
  gap: calc(.9 * var(--su));
  padding: calc(.8 * var(--su)) calc(1.1 * var(--su));
  border: 1px solid #ffe0a0;
  border-radius: calc(.8 * var(--su));
  background: linear-gradient(120deg, #2c2650ee, #0d0d24ee);
  box-shadow: 0 0 calc(2.4 * var(--su)) #ffd27e66;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.16, 1, .3, 1), filter .9s ease;
}
.jr-next div { display: grid; gap: calc(.25 * var(--su)); flex: 1; }
.jr-next b { font: 600 max(9px, calc(.82 * var(--su)))/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--jr-gold-hi); }
.jr-next div span { font-size: max(10px, calc(.92 * var(--su))); color: #f1eee6; }
.jr-next__icon .jr-glyph { width: calc(2.8 * var(--su)); height: calc(2.8 * var(--su)); color: var(--jr-gold-hi); }
.jr-next__go .jr-glyph { width: calc(1.6 * var(--su)); height: calc(1.6 * var(--su)); color: var(--jr-gold-hi); }
.jr-stage--daniel .jr-next { opacity: .65; }
.jr-board__phrase {
  position: absolute;
  font: 500 max(9px, calc(.78 * var(--su)))/1 var(--mono);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: #e3c587;
  white-space: nowrap;
  animation: jr-fade 1.6s ease 1.4s backwards;
}
.jr-board__phrase--a { left: 14%; top: -5%; }
.jr-board__phrase--b { right: 4%; top: -7%; }

/* === 8. Финал: от сложной проблемы — к ясному шагу ================================ */

.jr-stage--finale { --copy-top: 16; --copy-w: 50; --body-w: 31; --title-size: 4.4; --title-weight: 380; }
.jr-galaxy { left: calc(36 * var(--su)); top: calc(-1 * var(--su)); width: calc(66 * var(--su)); height: calc(52 * var(--su)); z-index: 0; }
.jr-galaxy .ex-cosmos__flare, .jr-galaxy .ex-cosmos__horizon { display: none; }
.jr-galaxy__orbits { inset: 0; width: 100%; height: 100%; z-index: 2; overflow: visible; pointer-events: none; }
.jr-galaxy__orbit { fill: none; stroke: #f2d08c; stroke-width: .1; opacity: .55; stroke-dasharray: 1; filter: drop-shadow(0 0 .2px #f2c77a88); }
.jr-galaxy__orbit--inner { stroke: #c9b8ff; opacity: .4; }
.jr-galaxy__leader { stroke: #e9d6ad88; stroke-width: .08; stroke-dasharray: 1; }
.jr-stage--finale .jr-galaxy__orbit { animation: jr-draw 3.2s cubic-bezier(.45, 0, .2, 1) backwards; }
.jr-stage--finale .jr-galaxy__leader { animation: jr-draw .9s ease calc(.6s + var(--i) * .55s) backwards; }

.jr-core {
  left: calc((var(--x) - 4.5) * var(--su));
  top: calc((var(--y) - 4.5) * var(--su));
  width: calc(9 * var(--su));
  height: calc(9 * var(--su));
  z-index: 3;
  display: grid;
  place-items: center;
}
.jr-core__halo {
  position: absolute;
  inset: -60%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6dc88, #f2c77a44 26%, #b9a6f522 48%, transparent 66%);
  animation: jr-sphere-breathe 5.4s ease-in-out infinite;
}
.jr-core__logo { position: relative; width: 90%; height: 90%; }
.jr-core .jr-logo__orbit, .jr-core .jr-logo__ring { stroke-width: 1.8; }
.jr-stage--finale .jr-core__halo { animation: jr-flare-core 1.8s cubic-bezier(.16, 1, .3, 1) backwards, jr-sphere-breathe 5.4s ease-in-out 1.8s infinite; }
@keyframes jr-flare-core { from { opacity: 0; transform: scale(.2); } 40% { opacity: 1; transform: scale(1.6); } }

.jr-planets { inset: 0; z-index: 4; }
.jr-planet { position: absolute; left: calc(var(--x) * var(--su)); top: calc(var(--y) * var(--su)); transition: opacity .8s ease calc(.6s + var(--i) * .55s), transform 1s cubic-bezier(.16, 1, .3, 1) calc(.6s + var(--i) * .55s); }
.jr-planet__ball {
  position: absolute;
  left: calc(-.75 * var(--su));
  top: calc(-.75 * var(--su));
  width: calc(1.5 * var(--su));
  height: calc(1.5 * var(--su));
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fffaf0, #f2d08c 45%, #8a6326);
  box-shadow: 0 0 calc(1.2 * var(--su)) #f2c77acc;
  animation: jr-sphere-breathe 4.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.8s);
}
.jr-planet[data-tint="1"] .jr-planet__ball { background: radial-gradient(circle at 35% 30%, #fbf8ff, #b9a6f5 45%, #5b4aa0); box-shadow: 0 0 calc(1.2 * var(--su)) #b9a6f5cc; }
.jr-planet[data-tint="2"] .jr-planet__ball { background: radial-gradient(circle at 35% 30%, #f3fffb, #86e3cb 45%, #2d7a68); box-shadow: 0 0 calc(1.2 * var(--su)) #86e3cbcc; }
.jr-planet__label {
  position: absolute;
  left: calc(var(--dx) * var(--su));
  top: calc(var(--dy) * var(--su));
  translate: -50% -50%;
  font: 500 max(10px, calc(.82 * var(--su)))/1 var(--mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #ece6d6;
  white-space: nowrap;
}
.jr-stage--finale .jr-planet { animation: jr-pop 1.2s cubic-bezier(.2, 1.35, .3, 1) calc(1.1s + var(--i) * .28s) backwards; }
.jr-restart {
  right: calc(4.5 * var(--su));
  top: calc(43.5 * var(--su));
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: max(32px, calc(2.8 * var(--su)));
  padding: 0 1.3em;
  border: 1px solid #f2d08c88;
  border-radius: 999px;
  background: #f2c77a14;
  color: var(--jr-gold-hi);
  font: 500 max(12px, calc(1 * var(--su))) var(--font);
  cursor: pointer;
  transition: opacity 1s ease 1.2s, background .2s, border-color .2s;
}
.jr-restart .jr-glyph { width: 1.1em; height: 1.1em; transform: scaleX(-1); }
.jr-restart:hover, .jr-restart:focus-visible { background: #f2c77a2e; border-color: var(--jr-gold-hi); }
.jr-restart:focus-visible { outline: 2px solid #e6cd9acc; outline-offset: 2px; }
.jr-stage--finale .jr-restart { animation: jr-fade 1s ease 2s backwards; }
.jr-glyph { display: block; }