/* Колонка мира и раскладка станций – общие для всех песочниц серии (theme.js строит разметку:
   .stage > aside.world [.w-scene, .w-pet] + main.wrap, наставник – в main.wrap). Курс задает только
   краски через переменные --w-* в своем theme.css / digital.css.

   Решения Артёма 14.10.2026: герой со своей реакцией виден всегда; прокрутка одна – у страницы,
   внутренних полос нет; реплика наставника видна целиком, без "ещё". Поэтому колонка мира (сцена и
   герой) закреплена под закрепленной шапкой и всегда ровно в экран, а наставник стоит в широкой
   колонке задания. На узком экране сцена – полосой сверху, герой – в углу экрана (как Арти-помощник
   в Learn). Подключается в каждой странице обычной ссылкой: догрузка из скрипта давала мигание. */

:where(:root) {
  --w-edge: var(--rk-visor-edge);
  --w-ring: transparent;
  --w-plaque: var(--rk-raised);
  --w-plaque-edge: var(--rk-visor-edge);
  --w-plaque-ink: var(--rk-ink);
  --w-dot: var(--rk-btn);
  --w-name: var(--rk-accent);
  --w-surface: var(--rk-raised);
  --w-ok-edge: var(--rk-ok);
  --w-ok-bg: var(--rk-raised);
  --w-bad-edge: var(--rk-danger);
  --w-bad-bg: var(--rk-raised);
}

body.themed .wrap { max-width: none; margin: 0; padding: 0; min-width: 0; }
body.themed .lead { max-width: 82ch; }

/* Колонка мира */
.world { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.w-scene { margin: 0; position: relative; border-radius: 18px; overflow: hidden; flex: none;
  border: 3px solid var(--w-edge); box-shadow: 0 0 0 3px var(--w-ring), var(--rk-shadow-card); background: var(--rk-sunken); }
.w-scene img { display: block; width: 100%; height: clamp(140px, 26vh, 300px); object-fit: cover; }
.w-scene figcaption {
  position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px);
  background: var(--w-plaque); color: var(--w-plaque-ink); border: 2px solid var(--w-plaque-edge); border-radius: 12px;
  padding: 3px 12px 3px 28px; font-weight: 700; font-size: .85rem; line-height: 1.3;
}
.w-scene figcaption::before {
  content: ""; position: absolute; left: 9px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  border-radius: 50%; background: var(--w-dot); border: 2px solid var(--w-edge);
}

/* Наставник – в колонке задания над заданием, текст целиком: аватар слева, реплика справа. Без
   сворачивания и прокрутки (Артём 14.10.2026). Реплика со страницы (.w-mentor-page, Пиксель) – как
   была, только в цвет мира. */
.w-mentor {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 14px; align-items: center;
  background: var(--w-surface); border: 2px solid var(--w-edge); border-radius: 16px; padding: 12px 16px;
  box-shadow: var(--rk-shadow-card); margin: 14px 0 18px; max-width: 100ch;
}
.w-mentor img { width: 56px; height: 56px; border-radius: 50%; border: 3px solid var(--w-dot); background: var(--rk-raised); object-fit: cover; }
.w-say b { display: block; color: var(--w-name); font-size: .95rem; }
.w-say p { margin: 2px 0 0; font-size: 1rem; line-height: 1.5; }

/* Герой, который отзывается на ответы */
.w-pet { position: relative; display: flex; justify-content: center; align-items: flex-end; padding-top: 54px; flex: none; margin-top: auto; }
.w-pet img { width: auto; height: clamp(96px, 19vh, 170px); filter: drop-shadow(0 6px 6px rgb(0 0 0 / .2)); transform-origin: 50% 100%; }
.w-bubble {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%) scale(.6); opacity: 0;
  margin: 0; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  background: var(--w-surface); border: 2px solid var(--w-edge); border-radius: 14px; padding: 6px 14px;
  font-weight: 700; color: var(--rk-ink); transition: transform .2s, opacity .2s; pointer-events: none;
}
.w-bubble::after { content: ""; position: absolute; left: 50%; bottom: -8px; margin-left: -7px;
  border: 7px solid transparent; border-top-color: inherit; border-bottom: 0; }
.w-pet.on .w-bubble { opacity: 1; transform: translateX(-50%) scale(1); }
.w-pet.joy .w-bubble { border-color: var(--w-ok-edge); background: var(--w-ok-bg); }
.w-pet.hmm .w-bubble { border-color: var(--w-bad-edge); background: var(--w-bad-bg); }
.w-pet.joy.on img { animation: w-hop .7s ease 2; }
.w-pet.hmm.on img { animation: w-tilt .9s ease 1; }
@keyframes w-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-16px) rotate(-4deg); } }
@keyframes w-tilt { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 65% { transform: rotate(7deg); } }

/* Хаб: карточки со сценами и героем */
body.themed-hub .grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
body.themed .card { overflow: hidden; padding: 0 16px 16px; }
.c-pic { position: relative; display: block; margin: 0 -16px 8px; }
.c-pic img:first-child { display: block; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; border-bottom: 3px solid var(--w-edge); }

/* Широкий экран: одна прокрутка – у страницы. Шапка закреплена, колонка мира закреплена под ней
   и всегда ровно в экран: сцена сжимается, герой стоит внизу целиком. Внутренних полос прокрутки нет (Артём 14.10.2026: "не нравятся
   дополнительные скроллы у наставника и на станциях"). */
@media (min-width: 1000px) and (min-height: 560px) {
  body.themed > .rk-top { position: sticky; top: 0; z-index: 50; height: 64px; flex-wrap: nowrap; }
  .stage {
    display: grid; grid-template-columns: minmax(270px, 24vw) minmax(0, 1fr); align-items: start;
    gap: clamp(16px, 2.2vw, 36px); padding: 14px clamp(16px, 2.6vw, 40px) 40px;
  }
  .world { position: sticky; top: 78px; height: calc(100vh - 92px); height: calc(100dvh - 92px); overflow: hidden; }
  .w-scene { flex: 1 1 auto; min-height: 120px; display: flex; }
  .w-scene img { height: auto; flex: 1; min-height: 0; }
  .w-pet img { height: clamp(110px, 24vh, 220px); }
}

/* Узкий экран: сцена полосой сверху, наставник целиком в потоке, герой в углу экрана */
@media (max-width: 999px), (max-height: 559px) {
  .stage { display: block; padding: 12px 14px 104px; }
  .world { margin-bottom: 12px; }
  .w-scene img { height: clamp(96px, 22vw, 180px); }
  .w-pet {
    position: fixed; left: 10px; bottom: 10px; z-index: 60; padding: 0; margin: 0; pointer-events: none;
    justify-content: flex-start;
  }
  .w-pet img { height: 66px; }
  .w-bubble {
    top: auto; left: 70px; bottom: 34px; transform: scale(.6); transform-origin: 0 100%;
    width: max-content; max-width: calc(100vw - 96px); white-space: normal; font-size: .88rem; padding: 5px 12px; box-shadow: var(--rk-shadow-card);
  }
  .w-pet.on .w-bubble { transform: scale(1); }
  .w-bubble::after { left: -8px; bottom: 8px; top: auto; margin: 0; border: 7px solid transparent; border-right-color: inherit; border-left: 0; }
}
@media (max-width: 560px) {
  .w-mentor { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 10px 12px; align-items: start; }
  .w-mentor img { width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .w-pet img { animation: none !important; } }