/* Главная — «мир, который строят игроки»: сюжет поверх 3D-мира (js/world) и секции после него.
   Без слоя: правила отсюда сильнее style.css. Имена шапки/подвала (.nav-*, .tab, .switch*, .foot-* …) не трогаем. */

/* пиксельные планеты 16×16 (сгенерированы): карточки серверов и CSS-система миров без WebGL */
:root {
  --orb-vanilla: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23f0f0f0' d='M5 0h2v1h-2z'/%3E%3Cpath fill='%233c90cc' d='M7 0h1v1h-1z'/%3E%3Cpath fill='%233c84cc' d='M8 0h1v1h-1zM8 1h1v1h-1zM8 3h1v1h-1zM8 4h1v1h-1z'/%3E%3Cpath fill='%23d8d8d8' d='M9 0h1v1h-1z'/%3E%3Cpath fill='%23c0c0c0' d='M10 0h1v1h-1zM11 1h1v1h-1zM11 5h1v1h-1z'/%3E%3Cpath fill='%23f0f0fc' d='M3 1h5v1h-5z'/%3E%3Cpath fill='%23d8d8e4' d='M9 1h1v1h-1z'/%3E%3Cpath fill='%23ccccd8' d='M10 1h1v1h-1z'/%3E%3Cpath fill='%239c9ca8' d='M12 1h1v1h-1z'/%3E%3Cpath fill='%233078b4' d='M2 2h1v1h-1zM6 2h1v1h-1zM5 4h1v1h-1z'/%3E%3Cpath fill='%233c78c0' d='M3 2h1v1h-1zM3 3h1v1h-1zM4 4h1v1h-1z'/%3E%3Cpath fill='%234890d8' d='M4 2h2v1h-2zM2 3h1v1h-1zM4 3h1v1h-1zM6 3h1v1h-1zM2 4h2v1h-2zM4 5h1v1h-1z'/%3E%3Cpath fill='%23306cb4' d='M7 2h1v1h-1zM7 3h1v1h-1zM6 4h2v1h-2zM5 5h3v1h-3z'/%3E%3Cpath fill='%2360b448' d='M8 2h1v1h-1zM0 6h1v1h-1zM5 6h1v1h-1zM1 7h1v1h-1z'/%3E%3Cpath fill='%23848484' d='M9 2h1v1h-1zM1 8h1v1h-1z'/%3E%3Cpath fill='%23549c48' d='M10 2h1v1h-1zM10 3h1v1h-1zM9 5h1v1h-1zM8 6h1v1h-1zM7 7h2v1h-2zM7 8h1v1h-1zM1 10h1v1h-1z'/%3E%3Cpath fill='%23549048' d='M11 2h1v1h-1zM11 3h1v1h-1zM10 6h1v1h-1zM9 7h1v1h-1zM7 9h1v1h-1zM4 10h2v1h-2z'/%3E%3Cpath fill='%233c6c9c' d='M12 2h1v1h-1zM12 3h1v1h-1z'/%3E%3Cpath fill='%23304878' d='M13 2h1v1h-1zM14 6h1v1h-1zM12 8h4v1h-4zM11 9h1v1h-1zM10 10h1v1h-1zM14 10h1v1h-1zM14 11h1v1h-1zM10 12h1v1h-1zM14 12h1v1h-1zM3 13h1v1h-1zM10 13h2v1h-2zM10 14h1v1h-1z'/%3E%3Cpath fill='%2360b454' d='M1 3h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1z'/%3E%3Cpath fill='%23e4d89c' d='M5 3h1v1h-1zM3 6h2v1h-2z'/%3E%3Cpath fill='%2354a848' d='M9 3h1v1h-1zM7 6h1v1h-1zM0 7h1v1h-1zM6 7h1v1h-1zM2 8h2v1h-2z'/%3E%3Cpath fill='%23304884' d='M13 3h1v1h-1zM13 4h1v1h-1zM10 9h1v1h-1zM10 11h1v1h-1z'/%3E%3Cpath fill='%23786060' d='M14 3h1v1h-1zM15 6h1v1h-1zM15 7h1v1h-1z'/%3E%3Cpath fill='%233c84c0' d='M9 4h1v1h-1zM8 5h1v1h-1z'/%3E%3Cpath fill='%2330609c' d='M10 4h1v1h-1z'/%3E%3Cpath fill='%2330549c' d='M11 4h1v1h-1z'/%3E%3Cpath fill='%23305490' d='M12 4h1v1h-1zM13 5h1v1h-1zM12 7h1v1h-1zM9 9h1v1h-1zM4 13h1v1h-1z'/%3E%3Cpath fill='%23303c6c' d='M14 4h1v1h-1zM14 5h2v1h-2zM12 9h3v1h-3zM11 10h3v1h-3zM11 11h3v1h-3zM11 12h3v1h-3zM13 13h1v1h-1zM5 14h1v1h-1z'/%3E%3Cpath fill='%2354b448' d='M0 5h1v1h-1zM6 6h1v1h-1z'/%3E%3Cpath fill='%2360c054' d='M2 5h2v1h-2z'/%3E%3Cpath fill='%233c78b4' d='M10 5h1v1h-1zM8 8h1v1h-1z'/%3E%3Cpath fill='%23305484' d='M12 5h1v1h-1zM5 13h1v1h-1z'/%3E%3Cpath fill='%233c90d8' d='M1 6h2v1h-2zM2 7h2v1h-2z'/%3E%3Cpath fill='%236cb460' d='M9 6h1v1h-1z'/%3E%3Cpath fill='%233c6ca8' d='M11 6h1v1h-1zM9 8h1v1h-1zM8 9h1v1h-1zM4 11h1v1h-1z'/%3E%3Cpath fill='%23306090' d='M12 6h1v1h-1zM11 8h1v1h-1zM9 10h1v1h-1z'/%3E%3Cpath fill='%2390786c' d='M13 6h1v1h-1z'/%3E%3Cpath fill='%2378cc6c' d='M4 7h2v1h-2z'/%3E%3Cpath fill='%23488448' d='M10 7h1v1h-1zM0 10h1v1h-1zM8 10h1v1h-1zM5 11h1v1h-1z'/%3E%3Cpath fill='%23a89078' d='M11 7h1v1h-1zM10 8h1v1h-1z'/%3E%3Cpath fill='%23846c60' d='M13 7h1v1h-1z'/%3E%3Cpath fill='%233c603c' d='M14 7h1v1h-1zM15 10h1v1h-1zM6 13h4v1h-4z'/%3E%3Cpath fill='%23848478' d='M0 8h1v1h-1zM5 8h1v1h-1zM2 9h1v1h-1z'/%3E%3Cpath fill='%236ccc6c' d='M4 8h1v1h-1z'/%3E%3Cpath fill='%236cc060' d='M6 8h1v1h-1zM3 9h2v1h-2z'/%3E%3Cpath fill='%23787878' d='M0 9h1v1h-1zM5 9h2v1h-2zM2 10h1v1h-1z'/%3E%3Cpath fill='%23788478' d='M1 9h1v1h-1z'/%3E%3Cpath fill='%23847884' d='M15 9h1v1h-1zM12 13h1v1h-1z'/%3E%3Cpath fill='%23d8ccd8' d='M3 10h1v1h-1z'/%3E%3Cpath fill='%2360a860' d='M6 10h1v1h-1zM2 11h1v1h-1z'/%3E%3Cpath fill='%23609c54' d='M7 10h1v1h-1z'/%3E%3Cpath fill='%23a89c78' d='M1 11h1v1h-1z'/%3E%3Cpath fill='%23489048' d='M3 11h1v1h-1z'/%3E%3Cpath fill='%23b4b4b4' d='M6 11h1v1h-1z'/%3E%3Cpath fill='%2360606c' d='M7 11h1v1h-1z'/%3E%3Cpath fill='%23606060' d='M8 11h1v1h-1z'/%3E%3Cpath fill='%23547854' d='M9 11h1v1h-1z'/%3E%3Cpath fill='%23486c48' d='M1 12h1v1h-1zM9 12h1v1h-1z'/%3E%3Cpath fill='%23609054' d='M2 12h1v1h-1z'/%3E%3Cpath fill='%233c609c' d='M3 12h2v1h-2z'/%3E%3Cpath fill='%239c8478' d='M5 12h1v1h-1z'/%3E%3Cpath fill='%23548454' d='M6 12h2v1h-2z'/%3E%3Cpath fill='%2390849c' d='M8 12h1v1h-1z'/%3E%3Cpath fill='%23847860' d='M2 13h1v1h-1z'/%3E%3Cpath fill='%23787884' d='M3 14h2v1h-2zM6 14h4v1h-4zM11 14h2v1h-2zM5 15h6v1h-6z'/%3E%3C/svg%3E");
  --orb-modded: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23d88454' d='M5 0h1v1h-1zM4 7h1v1h-1z'/%3E%3Cpath fill='%23c06c3c' d='M6 0h1v1h-1zM6 4h1v1h-1zM3 5h1v1h-1zM6 5h1v1h-1zM1 6h1v1h-1zM3 6h3v1h-3zM1 7h3v1h-3z'/%3E%3Cpath fill='%23488478' d='M7 0h1v1h-1zM7 3h2v1h-2zM2 8h1v1h-1z'/%3E%3Cpath fill='%23b4603c' d='M8 0h1v1h-1zM9 1h1v1h-1zM8 4h1v1h-1zM7 5h1v1h-1zM6 6h1v1h-1zM5 7h1v1h-1zM1 8h1v1h-1zM4 8h2v1h-2z'/%3E%3Cpath fill='%23c07848' d='M9 0h1v1h-1zM10 1h1v1h-1zM10 4h1v1h-1zM3 10h1v1h-1z'/%3E%3Cpath fill='%23548478' d='M10 0h1v1h-1zM10 6h1v1h-1zM7 9h1v1h-1z'/%3E%3Cpath fill='%23e49054' d='M3 1h1v1h-1zM4 4h2v1h-2zM5 5h1v1h-1z'/%3E%3Cpath fill='%23fccc6c' d='M4 1h1v1h-1zM4 5h1v1h-1z'/%3E%3Cpath fill='%23c06c48' d='M5 1h1v1h-1zM4 3h2v1h-2zM3 4h1v1h-1z'/%3E%3Cpath fill='%2360a89c' d='M6 1h1v1h-1zM6 2h1v1h-1zM6 3h1v1h-1zM1 4h1v1h-1z'/%3E%3Cpath fill='%2360a890' d='M7 1h1v1h-1zM7 2h2v1h-2zM7 4h1v1h-1zM0 6h1v1h-1zM2 6h1v1h-1z'/%3E%3Cpath fill='%23609c90' d='M8 1h1v1h-1zM0 5h1v1h-1zM0 7h1v1h-1zM3 8h1v1h-1z'/%3E%3Cpath fill='%23cc9c60' d='M11 1h1v1h-1z'/%3E%3Cpath fill='%2384483c' d='M12 1h1v1h-1zM13 3h1v1h-1zM12 6h1v1h-1zM11 7h1v1h-1zM10 9h1v1h-1zM7 11h2v1h-2zM2 12h2v1h-2z'/%3E%3Cpath fill='%23549078' d='M2 2h1v1h-1zM5 2h1v1h-1zM2 4h1v1h-1zM1 5h2v1h-2z'/%3E%3Cpath fill='%236ca89c' d='M3 2h2v1h-2zM2 3h2v1h-2z'/%3E%3Cpath fill='%2348846c' d='M9 2h1v1h-1zM9 3h1v1h-1z'/%3E%3Cpath fill='%23549084' d='M10 2h1v1h-1zM7 7h1v1h-1zM6 8h1v1h-1zM3 9h3v1h-3z'/%3E%3Cpath fill='%23b46c48' d='M11 2h1v1h-1zM11 3h1v1h-1zM11 4h1v1h-1zM3 11h1v1h-1z'/%3E%3Cpath fill='%23a86048' d='M12 2h1v1h-1zM12 3h1v1h-1zM12 4h1v1h-1z'/%3E%3Cpath fill='%2378483c' d='M13 2h1v1h-1zM12 7h1v1h-1zM14 7h1v1h-1zM10 10h1v1h-1zM8 13h2v1h-2zM4 14h1v1h-1zM6 14h1v1h-1zM8 14h2v1h-2zM5 15h1v1h-1z'/%3E%3Cpath fill='%23489078' d='M1 3h1v1h-1z'/%3E%3Cpath fill='%2348786c' d='M10 3h1v1h-1zM8 6h2v1h-2zM8 7h1v1h-1zM7 8h1v1h-1zM2 9h1v1h-1zM2 10h1v1h-1z'/%3E%3Cpath fill='%236c3c3c' d='M14 3h1v1h-1zM15 5h1v1h-1zM14 6h2v1h-2zM13 7h1v1h-1zM15 7h1v1h-1zM14 8h1v1h-1zM13 10h1v1h-1zM15 10h1v1h-1zM10 11h1v1h-1zM13 11h1v1h-1zM9 12h1v1h-1zM7 13h1v1h-1zM12 13h2v1h-2zM3 14h1v1h-1zM7 14h1v1h-1zM10 14h1v1h-1zM12 14h1v1h-1zM8 15h2v1h-2z'/%3E%3Cpath fill='%23e4b460' d='M9 4h1v1h-1z'/%3E%3Cpath fill='%23905448' d='M13 4h1v1h-1zM13 5h1v1h-1zM6 12h2v1h-2z'/%3E%3Cpath fill='%23846c48' d='M14 4h1v1h-1zM14 5h1v1h-1z'/%3E%3Cpath fill='%23cc8454' d='M8 5h1v1h-1z'/%3E%3Cpath fill='%23d8b460' d='M9 5h1v1h-1z'/%3E%3Cpath fill='%239c543c' d='M10 5h1v1h-1zM8 8h1v1h-1zM1 10h1v1h-1zM4 10h3v1h-3zM2 11h1v1h-1z'/%3E%3Cpath fill='%2390543c' d='M11 5h1v1h-1zM11 6h1v1h-1zM0 10h1v1h-1zM7 10h1v1h-1zM1 11h1v1h-1z'/%3E%3Cpath fill='%239c6048' d='M12 5h1v1h-1zM9 9h1v1h-1zM8 10h1v1h-1zM4 12h2v1h-2z'/%3E%3Cpath fill='%23549c90' d='M7 6h1v1h-1zM6 7h1v1h-1z'/%3E%3Cpath fill='%23845448' d='M13 6h1v1h-1zM4 13h3v1h-3z'/%3E%3Cpath fill='%233c6c6c' d='M9 7h1v1h-1z'/%3E%3Cpath fill='%23547878' d='M10 7h1v1h-1z'/%3E%3Cpath fill='%23a8603c' d='M0 8h1v1h-1zM0 9h2v1h-2z'/%3E%3Cpath fill='%23c09c60' d='M9 8h1v1h-1z'/%3E%3Cpath fill='%2390483c' d='M10 8h1v1h-1zM6 11h1v1h-1z'/%3E%3Cpath fill='%23486c6c' d='M11 8h1v1h-1zM1 12h1v1h-1z'/%3E%3Cpath fill='%233c5454' d='M12 8h1v1h-1zM11 9h1v1h-1zM2 13h1v1h-1z'/%3E%3Cpath fill='%233c5460' d='M13 8h1v1h-1zM15 8h1v1h-1zM14 9h2v1h-2zM14 10h1v1h-1zM11 11h2v1h-2zM14 11h1v1h-1zM10 12h5v1h-5zM10 13h1v1h-1zM11 14h1v1h-1zM6 15h1v1h-1z'/%3E%3Cpath fill='%23548484' d='M6 9h1v1h-1z'/%3E%3Cpath fill='%23a86c48' d='M8 9h1v1h-1zM4 11h2v1h-2z'/%3E%3Cpath fill='%233c4854' d='M12 9h2v1h-2zM11 10h2v1h-2zM11 13h1v1h-1zM7 15h1v1h-1zM10 15h1v1h-1z'/%3E%3Cpath fill='%23906048' d='M9 10h1v1h-1z'/%3E%3Cpath fill='%23783c3c' d='M9 11h1v1h-1z'/%3E%3Cpath fill='%23906c54' d='M8 12h1v1h-1z'/%3E%3Cpath fill='%2348606c' d='M3 13h1v1h-1z'/%3E%3Cpath fill='%23846048' d='M5 14h1v1h-1z'/%3E%3C/svg%3E");
  --orb-polit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23d8489c' d='M5 0h1v1h-1zM7 0h1v1h-1zM8 2h1v1h-1zM0 6h1v1h-1z'/%3E%3Cpath fill='%23d8549c' d='M6 0h1v1h-1zM5 1h3v1h-3zM2 2h2v1h-2zM6 2h1v1h-1zM1 3h1v1h-1zM7 3h1v1h-1zM1 4h1v1h-1zM1 5h1v1h-1zM1 6h1v1h-1z'/%3E%3Cpath fill='%23cc4890' d='M8 0h1v1h-1zM8 1h2v1h-2zM9 2h1v1h-1zM8 3h2v1h-2z'/%3E%3Cpath fill='%23e4b4c0' d='M9 0h1v1h-1z'/%3E%3Cpath fill='%23a83c84' d='M10 0h1v1h-1zM11 1h1v1h-1zM11 4h1v1h-1zM6 10h1v1h-1zM2 11h2v1h-2z'/%3E%3Cpath fill='%23603c90' d='M3 1h1v1h-1zM7 2h1v1h-1zM4 4h1v1h-1zM2 5h2v1h-2zM5 5h1v1h-1zM2 6h1v1h-1z'/%3E%3Cpath fill='%23fccce4' d='M4 1h1v1h-1zM5 2h1v1h-1zM5 4h1v1h-1z'/%3E%3Cpath fill='%23c04884' d='M10 1h1v1h-1zM10 2h1v1h-1zM10 3h1v1h-1z'/%3E%3Cpath fill='%23903c6c' d='M12 1h1v1h-1zM13 3h1v1h-1z'/%3E%3Cpath fill='%239054c0' d='M4 2h1v1h-1zM2 3h5v1h-5zM2 4h2v1h-2zM6 4h1v1h-1zM3 6h1v1h-1z'/%3E%3Cpath fill='%23b43c84' d='M11 2h1v1h-1zM11 3h1v1h-1z'/%3E%3Cpath fill='%239c3c78' d='M12 2h1v1h-1zM12 3h1v1h-1zM6 11h1v1h-1zM2 12h3v1h-3z'/%3E%3Cpath fill='%2384306c' d='M13 2h1v1h-1zM11 9h1v1h-1zM10 10h1v1h-1zM7 12h2v1h-2zM3 13h3v1h-3z'/%3E%3Cpath fill='%2354306c' d='M14 3h1v1h-1zM14 5h1v1h-1zM14 6h1v1h-1zM14 7h1v1h-1zM13 8h1v1h-1zM9 14h1v1h-1z'/%3E%3Cpath fill='%23543c84' d='M7 4h2v1h-2zM7 5h2v1h-2zM7 6h1v1h-1zM2 7h2v1h-2zM2 8h2v1h-2z'/%3E%3Cpath fill='%23543084' d='M9 4h1v1h-1zM7 7h1v1h-1zM2 9h2v1h-2z'/%3E%3Cpath fill='%23b44884' d='M10 4h1v1h-1zM10 5h1v1h-1zM9 6h1v1h-1zM2 10h1v1h-1z'/%3E%3Cpath fill='%23b490a8' d='M12 4h1v1h-1z'/%3E%3Cpath fill='%23603c84' d='M13 4h1v1h-1zM12 6h1v1h-1zM11 8h1v1h-1zM9 10h1v1h-1z'/%3E%3Cpath fill='%23543078' d='M14 4h1v1h-1zM8 6h1v1h-1zM13 7h1v1h-1zM6 8h2v1h-2zM5 9h2v1h-2z'/%3E%3Cpath fill='%23fcccd8' d='M0 5h1v1h-1zM4 7h1v1h-1z'/%3E%3Cpath fill='%23d84848' d='M4 5h1v1h-1zM6 5h1v1h-1zM4 6h2v1h-2z'/%3E%3Cpath fill='%23c04890' d='M9 5h1v1h-1z'/%3E%3Cpath fill='%23a83c78' d='M11 5h1v1h-1zM1 11h1v1h-1zM4 11h2v1h-2z'/%3E%3Cpath fill='%236c3c90' d='M12 5h1v1h-1zM10 8h1v1h-1zM9 9h1v1h-1zM0 10h1v1h-1zM7 10h2v1h-2z'/%3E%3Cpath fill='%23603084' d='M13 5h1v1h-1zM12 7h1v1h-1z'/%3E%3Cpath fill='%23783060' d='M15 5h1v1h-1zM15 6h1v1h-1zM15 7h1v1h-1zM14 8h2v1h-2zM12 9h2v1h-2zM11 10h2v1h-2zM10 11h2v1h-2zM9 12h3v1h-3zM8 13h3v1h-3zM3 14h4v1h-4zM10 14h1v1h-1zM6 15h3v1h-3zM10 15h1v1h-1z'/%3E%3Cpath fill='%23f0ccd8' d='M6 6h1v1h-1z'/%3E%3Cpath fill='%23483078' d='M10 6h1v1h-1zM7 9h1v1h-1z'/%3E%3Cpath fill='%23c090a8' d='M11 6h1v1h-1z'/%3E%3Cpath fill='%23603078' d='M13 6h1v1h-1zM12 8h1v1h-1zM9 11h1v1h-1z'/%3E%3Cpath fill='%238448b4' d='M0 7h1v1h-1zM5 7h2v1h-2zM1 8h1v1h-1zM4 8h2v1h-2z'/%3E%3Cpath fill='%239048c0' d='M1 7h1v1h-1z'/%3E%3Cpath fill='%237848a8' d='M8 7h1v1h-1zM0 9h1v1h-1zM3 10h1v1h-1z'/%3E%3Cpath fill='%23783c9c' d='M9 7h1v1h-1zM8 8h1v1h-1zM5 10h1v1h-1z'/%3E%3Cpath fill='%2348306c' d='M10 7h2v1h-2z'/%3E%3Cpath fill='%23e4b4cc' d='M0 8h1v1h-1z'/%3E%3Cpath fill='%236c3c9c' d='M9 8h1v1h-1zM8 9h1v1h-1z'/%3E%3Cpath fill='%238448a8' d='M1 9h1v1h-1zM4 9h1v1h-1z'/%3E%3Cpath fill='%23a8849c' d='M10 9h1v1h-1zM8 11h1v1h-1zM6 12h1v1h-1z'/%3E%3Cpath fill='%23846078' d='M14 9h1v1h-1zM12 11h1v1h-1zM12 14h1v1h-1z'/%3E%3Cpath fill='%233c2454' d='M15 9h1v1h-1zM11 13h1v1h-1zM7 14h2v1h-2zM11 14h1v1h-1zM5 15h1v1h-1zM9 15h1v1h-1z'/%3E%3Cpath fill='%2378489c' d='M1 10h1v1h-1zM4 10h1v1h-1z'/%3E%3Cpath fill='%2360303c' d='M13 10h3v1h-3zM13 11h2v1h-2zM12 12h3v1h-3zM12 13h2v1h-2z'/%3E%3Cpath fill='%23903c78' d='M7 11h1v1h-1zM5 12h1v1h-1z'/%3E%3Cpath fill='%2390306c' d='M1 12h1v1h-1z'/%3E%3Cpath fill='%23843060' d='M2 13h1v1h-1z'/%3E%3Cpath fill='%233c2460' d='M6 13h2v1h-2z'/%3E%3C/svg%3E");
  --orb-events: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23e4b430' d='M5 0h1v1h-1zM5 5h1v1h-1zM2 6h2v1h-2zM5 6h1v1h-1zM1 7h3v1h-3z'/%3E%3Cpath fill='%23fccc60' d='M6 0h2v1h-2zM0 5h1v1h-1zM4 7h1v1h-1z'/%3E%3Cpath fill='%23f0c060' d='M8 0h1v1h-1z'/%3E%3Cpath fill='%23e4b454' d='M9 0h1v1h-1zM6 8h1v1h-1z'/%3E%3Cpath fill='%23cca854' d='M10 0h1v1h-1zM11 1h1v1h-1zM11 4h1v1h-1zM9 7h1v1h-1zM8 8h1v1h-1zM7 9h1v1h-1zM1 10h1v1h-1z'/%3E%3Cpath fill='%23fcf0a8' d='M3 1h1v1h-1zM7 1h1v1h-1zM7 4h1v1h-1zM6 5h1v1h-1z'/%3E%3Cpath fill='%23e4b43c' d='M4 1h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM1 4h1v1h-1zM4 4h2v1h-2zM4 5h1v1h-1z'/%3E%3Cpath fill='%23fcd860' d='M5 1h2v1h-2zM2 2h6v1h-6zM1 3h2v1h-2zM4 3h1v1h-1zM6 3h2v1h-2zM2 4h2v1h-2zM6 4h1v1h-1zM1 5h3v1h-3zM1 6h1v1h-1zM4 6h1v1h-1z'/%3E%3Cpath fill='%23f0cc60' d='M8 1h1v1h-1zM8 3h1v1h-1zM7 5h1v1h-1zM0 7h1v1h-1zM5 7h1v1h-1z'/%3E%3Cpath fill='%23d8a830' d='M9 1h1v1h-1zM9 2h1v1h-1zM8 4h1v1h-1zM8 5h1v1h-1zM6 6h2v1h-2zM1 8h2v1h-2zM4 8h1v1h-1z'/%3E%3Cpath fill='%23d8b454' d='M10 1h1v1h-1zM9 6h1v1h-1zM7 8h1v1h-1zM2 10h2v1h-2z'/%3E%3Cpath fill='%239c7830' d='M12 1h1v1h-1zM10 9h1v1h-1zM9 10h1v1h-1zM7 11h1v1h-1zM5 12h1v1h-1z'/%3E%3Cpath fill='%23e4a830' d='M8 2h1v1h-1z'/%3E%3Cpath fill='%23cc9c30' d='M10 2h1v1h-1zM10 3h1v1h-1zM9 4h1v1h-1zM9 5h1v1h-1zM8 6h1v1h-1zM0 8h1v1h-1zM3 9h3v1h-3z'/%3E%3Cpath fill='%23c09030' d='M11 2h1v1h-1zM11 3h1v1h-1zM10 4h1v1h-1zM10 5h1v1h-1zM0 9h1v1h-1zM4 10h2v1h-2z'/%3E%3Cpath fill='%23a88430' d='M12 2h1v1h-1zM12 3h1v1h-1zM7 10h1v1h-1zM5 11h1v1h-1z'/%3E%3Cpath fill='%23906c30' d='M13 2h1v1h-1zM11 9h1v1h-1zM10 10h1v1h-1zM8 11h2v1h-2zM7 12h1v1h-1z'/%3E%3Cpath fill='%23d89c30' d='M9 3h1v1h-1z'/%3E%3Cpath fill='%239c6c30' d='M13 3h1v1h-1zM11 8h1v1h-1zM6 12h1v1h-1z'/%3E%3Cpath fill='%23785430' d='M14 3h1v1h-1zM15 5h1v1h-1zM15 6h1v1h-1zM15 7h1v1h-1zM13 8h1v1h-1zM13 9h2v1h-2zM12 10h3v1h-3zM10 12h4v1h-4zM8 13h2v1h-2zM11 13h3v1h-3zM6 14h1v1h-1zM8 14h5v1h-5zM6 15h2v1h-2z'/%3E%3Cpath fill='%23b49054' d='M12 4h1v1h-1zM12 5h1v1h-1zM11 7h1v1h-1zM9 9h1v1h-1zM2 12h2v1h-2z'/%3E%3Cpath fill='%23a88448' d='M13 4h1v1h-1zM12 6h1v1h-1z'/%3E%3Cpath fill='%23846c48' d='M14 4h1v1h-1zM14 5h1v1h-1z'/%3E%3Cpath fill='%23c09c54' d='M11 5h1v1h-1zM9 8h1v1h-1zM8 9h1v1h-1zM6 10h1v1h-1zM1 11h1v1h-1z'/%3E%3Cpath fill='%239c8448' d='M13 5h1v1h-1zM12 7h1v1h-1zM1 12h1v1h-1z'/%3E%3Cpath fill='%23fce4a8' d='M0 6h1v1h-1z'/%3E%3Cpath fill='%23ccb490' d='M10 6h1v1h-1z'/%3E%3Cpath fill='%23c0a884' d='M11 6h1v1h-1z'/%3E%3Cpath fill='%239c7848' d='M13 6h1v1h-1zM3 13h2v1h-2z'/%3E%3Cpath fill='%23846048' d='M14 6h1v1h-1zM14 7h1v1h-1zM14 8h1v1h-1zM15 9h1v1h-1zM15 10h1v1h-1zM11 11h1v1h-1zM13 11h1v1h-1zM14 12h1v1h-1zM3 14h1v1h-1zM5 14h1v1h-1zM8 15h3v1h-3z'/%3E%3Cpath fill='%23f0d89c' d='M6 7h1v1h-1z'/%3E%3Cpath fill='%23e4d89c' d='M7 7h1v1h-1z'/%3E%3Cpath fill='%23d8cc90' d='M8 7h1v1h-1z'/%3E%3Cpath fill='%23c0b484' d='M10 7h1v1h-1zM0 10h1v1h-1zM2 11h1v1h-1z'/%3E%3Cpath fill='%23906c48' d='M13 7h1v1h-1zM11 10h1v1h-1z'/%3E%3Cpath fill='%23f0e49c' d='M3 8h1v1h-1z'/%3E%3Cpath fill='%23e4c054' d='M5 8h1v1h-1zM1 9h2v1h-2z'/%3E%3Cpath fill='%23a87830' d='M10 8h1v1h-1zM8 10h1v1h-1zM6 11h1v1h-1z'/%3E%3Cpath fill='%23846030' d='M12 8h1v1h-1zM12 9h1v1h-1zM10 11h1v1h-1zM8 12h1v1h-1zM6 13h2v1h-2z'/%3E%3Cpath fill='%23846c60' d='M15 8h1v1h-1zM12 11h1v1h-1zM14 11h1v1h-1zM10 13h1v1h-1zM4 14h1v1h-1zM7 14h1v1h-1zM5 15h1v1h-1z'/%3E%3Cpath fill='%23d8a854' d='M6 9h1v1h-1z'/%3E%3Cpath fill='%23b48430' d='M3 11h2v1h-2z'/%3E%3Cpath fill='%23b49c78' d='M4 12h1v1h-1z'/%3E%3Cpath fill='%2384786c' d='M9 12h1v1h-1z'/%3E%3Cpath fill='%23907848' d='M2 13h1v1h-1z'/%3E%3Cpath fill='%239c846c' d='M5 13h1v1h-1z'/%3E%3C/svg%3E");
  --orb-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' shape-rendering='crispEdges'%3E%3Cpath fill='%23ffcc6c' d='M5 0h4v1h-4zM6 1h3v1h-3zM2 2h1v1h-1zM7 2h1v1h-1zM1 3h1v1h-1zM8 4h1v1h-1zM1 5h1v1h-1zM4 5h2v1h-2zM1 6h1v1h-1zM6 6h2v1h-2zM0 7h1v1h-1zM1 8h1v1h-1zM3 8h2v1h-2z'/%3E%3Cpath fill='%23fcc06c' d='M9 0h1v1h-1zM10 1h1v1h-1zM10 2h2v1h-2zM9 4h1v1h-1zM9 5h2v1h-2zM8 6h3v1h-3zM7 7h3v1h-3zM6 8h3v1h-3zM2 9h6v1h-6zM3 10h3v1h-3z'/%3E%3Cpath fill='%23fc906c' d='M10 0h1v1h-1z'/%3E%3Cpath fill='%23ffa86c' d='M3 1h1v1h-1z'/%3E%3Cpath fill='%23ffcc78' d='M4 1h1v1h-1zM2 5h2v1h-2z'/%3E%3Cpath fill='%23fffff0' d='M5 1h1v1h-1zM4 4h1v1h-1z'/%3E%3Cpath fill='%23ff9c6c' d='M9 1h1v1h-1zM8 2h2v1h-2zM7 3h1v1h-1zM0 5h1v1h-1zM6 5h1v1h-1zM8 5h1v1h-1zM2 8h1v1h-1z'/%3E%3Cpath fill='%23f0c06c' d='M11 1h1v1h-1zM9 8h1v1h-1zM6 10h1v1h-1zM4 11h1v1h-1z'/%3E%3Cpath fill='%23f0b460' d='M12 1h1v1h-1zM12 2h1v1h-1zM9 9h1v1h-1zM7 10h2v1h-2zM5 11h1v1h-1zM5 12h1v1h-1z'/%3E%3Cpath fill='%23ffa878' d='M3 2h1v1h-1z'/%3E%3Cpath fill='%23ff8454' d='M4 2h2v1h-2zM4 3h2v1h-2zM8 3h2v1h-2zM5 4h3v1h-3zM7 5h1v1h-1zM2 6h4v1h-4zM2 7h3v1h-3z'/%3E%3Cpath fill='%23fffce4' d='M6 2h1v1h-1zM6 3h1v1h-1zM0 6h1v1h-1zM1 7h1v1h-1zM5 7h1v1h-1z'/%3E%3Cpath fill='%23e46c48' d='M13 2h1v1h-1zM12 8h1v1h-1zM11 9h1v1h-1zM11 10h1v1h-1zM6 13h1v1h-1z'/%3E%3Cpath fill='%23ffd878' d='M2 3h2v1h-2zM2 4h2v1h-2z'/%3E%3Cpath fill='%23fc8454' d='M10 3h1v1h-1zM0 8h1v1h-1z'/%3E%3Cpath fill='%23fc7848' d='M11 3h1v1h-1zM11 4h1v1h-1z'/%3E%3Cpath fill='%23f09060' d='M12 3h1v1h-1zM12 6h1v1h-1zM10 8h1v1h-1zM2 12h1v1h-1zM4 12h1v1h-1z'/%3E%3Cpath fill='%23e49060' d='M13 3h1v1h-1zM12 7h1v1h-1zM8 11h1v1h-1zM4 13h1v1h-1z'/%3E%3Cpath fill='%23d86c48' d='M14 3h1v1h-1zM14 4h1v1h-1zM15 5h1v1h-1zM15 8h1v1h-1zM12 9h1v1h-1zM14 9h2v1h-2zM12 10h3v1h-3zM13 11h1v1h-1zM11 12h1v1h-1zM13 12h1v1h-1zM7 13h1v1h-1zM11 13h2v1h-2zM7 14h1v1h-1zM11 14h2v1h-2zM6 15h4v1h-4z'/%3E%3Cpath fill='%23fffcf0' d='M1 4h1v1h-1z'/%3E%3Cpath fill='%23fc9c6c' d='M10 4h1v1h-1zM5 8h1v1h-1z'/%3E%3Cpath fill='%23f07848' d='M12 4h1v1h-1zM11 5h2v1h-2zM11 7h1v1h-1zM0 10h1v1h-1zM1 11h1v1h-1zM3 11h1v1h-1zM6 11h2v1h-2zM3 12h1v1h-1z'/%3E%3Cpath fill='%23e4d8cc' d='M13 4h1v1h-1zM10 9h1v1h-1z'/%3E%3Cpath fill='%23e4b460' d='M13 5h1v1h-1zM13 6h1v1h-1zM9 10h1v1h-1zM9 11h1v1h-1z'/%3E%3Cpath fill='%23d88460' d='M14 5h1v1h-1zM15 6h1v1h-1zM15 7h1v1h-1zM13 9h1v1h-1zM11 11h2v1h-2zM14 11h1v1h-1zM14 12h1v1h-1zM10 13h1v1h-1zM4 14h1v1h-1zM10 14h1v1h-1zM5 15h1v1h-1zM10 15h1v1h-1z'/%3E%3Cpath fill='%23f0e4cc' d='M11 6h1v1h-1z'/%3E%3Cpath fill='%23d8a860' d='M14 6h1v1h-1zM14 7h1v1h-1zM14 8h1v1h-1zM9 12h2v1h-2zM8 13h2v1h-2zM13 13h1v1h-1zM3 14h1v1h-1zM8 14h2v1h-2z'/%3E%3Cpath fill='%23fff0e4' d='M6 7h1v1h-1z'/%3E%3Cpath fill='%23f0c060' d='M10 7h1v1h-1zM8 9h1v1h-1z'/%3E%3Cpath fill='%23e4a860' d='M13 7h1v1h-1zM8 12h1v1h-1z'/%3E%3Cpath fill='%23e47848' d='M11 8h1v1h-1zM1 12h1v1h-1zM6 12h2v1h-2z'/%3E%3Cpath fill='%23d8ccc0' d='M13 8h1v1h-1zM15 10h1v1h-1zM12 12h1v1h-1zM5 14h2v1h-2z'/%3E%3Cpath fill='%23fc7854' d='M0 9h1v1h-1zM1 10h1v1h-1z'/%3E%3Cpath fill='%23fcf0d8' d='M1 9h1v1h-1zM2 10h1v1h-1z'/%3E%3Cpath fill='%23e48460' d='M10 10h1v1h-1zM10 11h1v1h-1zM2 13h2v1h-2zM5 13h1v1h-1z'/%3E%3Cpath fill='%23f0e4d8' d='M2 11h1v1h-1z'/%3E%3C/svg%3E");
}

body.home { background: var(--ink); }

/* =====================================================================================================
   СЮЖЕТ: высокая ось прокрутки, липкая сцена, 3D-мир и главы поверх
   ===================================================================================================== */
/* высота = длина экскурсии по мирам в «экранах» (--tour ставит home.js из js/world/tour.js) */
.story { position: relative; height: calc(var(--tour, 1500) * 1vh); height: calc(var(--tour, 1500) * 1svh); }
@media (max-width: 760px) { .story { height: calc(var(--tour, 1500) * .9svh); } }
/* сцена: никаких transform на контейнере канваса — размер буфера мир берёт из CSS */
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: #0b080d; }

/* ---------- космос на CSS: пока грузится 3D и без WebGL ---------- */
.sky, .orrery, .stage-canvas, .ptags { position: absolute; inset: 0; }
.sky { z-index: 0; pointer-events: none; overflow: hidden; }
.sky-neb {
  position: absolute; inset: -10%;
  background:
    radial-gradient(28% 22% at 50% 60%, rgba(255, 150, 90, .38), rgba(255, 127, 80, .12) 45%, transparent 75%),
    radial-gradient(40% 30% at 22% 28%, rgba(142, 42, 92, .34), transparent 70%),
    radial-gradient(36% 30% at 80% 70%, rgba(122, 42, 78, .30), transparent 70%),
    radial-gradient(50% 40% at 70% 18%, rgba(58, 46, 122, .32), transparent 70%),
    linear-gradient(180deg, #0d0910, #120b16 60%, #0b080d);
  animation: neb-drift 60s var(--ease-io) infinite alternate;
}
.sky-stars {
  position: absolute; inset: 0; opacity: .8;
  background:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 27% 62%, #ffe6d6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 12%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 58% 33%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 84%, #ffd9c4 50%, transparent 51%), radial-gradient(1.5px 1.5px at 78% 22%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 56%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 8% 76%, #e8dcff 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 88%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 93% 9%, #fff 50%, transparent 51%);
  background-size: 620px 520px;
  animation: stars-tw 7s steps(3) infinite alternate;
}
@keyframes neb-drift { to { transform: translate3d(-2%, 1.5%, 0) scale(1.05); } }
@keyframes stars-tw { to { opacity: .5; } }

/* система миров на CSS: пиксельные планеты на орбитах (видна только без 3D) */
.orrery { z-index: 1; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 1s var(--ease-out); --cy: 62%; }
.stage.no-world .orrery { opacity: 1; visibility: visible; }
.orrery-ring {
  position: absolute; left: 50%; top: var(--cy); width: var(--d); height: calc(var(--d) * .3);
  translate: -50% -50%; rotate: -5deg; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 200, 170, .12);
}
.orrery-ring.r1 { --d: 30vw; } .orrery-ring.r2 { --d: 46vw; } .orrery-ring.r3 { --d: 64vw; } .orrery-ring.r4 { --d: 84vw; }
.orrery-sun {
  position: absolute; left: 50%; top: var(--cy); width: clamp(84px, 10vw, 150px); aspect-ratio: 1; translate: -50% -50%;
  background: var(--orb-sun) center / 100% 100%; image-rendering: pixelated;
  filter: drop-shadow(0 0 40px rgba(255, 127, 80, .7)) drop-shadow(0 0 90px rgba(255, 92, 60, .45));
  animation: orb-pulse 5s ease-in-out infinite alternate;
}
.oplanet {
  position: absolute; left: calc(50% + cos(var(--a)) * var(--d) / 2); top: calc(var(--cy) + sin(var(--a)) * var(--d) * .15);
  width: var(--s); aspect-ratio: 1; translate: -50% -50%; pointer-events: auto;
  display: grid; justify-items: center; color: var(--text); text-decoration: none;
}
.oplanet > i { display: block; width: 100%; aspect-ratio: 1; background: var(--orb) center / 100% 100%; image-rendering: pixelated; filter: drop-shadow(0 0 18px var(--glow)); transition: transform .5s var(--spring); animation: orb-bob 6s ease-in-out infinite alternate; }
.oplanet:hover > i { transform: scale(1.12); }
.oplanet.locked > i { opacity: .45; filter: grayscale(.3) drop-shadow(0 0 10px var(--glow)); }
.oplanet > span { position: absolute; top: 100%; margin-top: 10px; white-space: nowrap; font: 600 .7rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase; }
.oplanet > span small { display: block; margin-top: 5px; font: 500 .62rem/1 var(--f-mono); letter-spacing: .04em; text-transform: none; color: var(--muted); text-align: center; }
@keyframes orb-pulse { to { filter: drop-shadow(0 0 54px rgba(255, 127, 80, .85)) drop-shadow(0 0 120px rgba(255, 92, 60, .5)); } }
@keyframes orb-bob { to { translate: 0 -6%; } }

/* ---------- 3D-канвас ---------- */
.stage-canvas { z-index: 2; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease-out); }
.stage.is-live .stage-canvas { opacity: 1; }
.stage.no-world .stage-canvas { display: none; }

/* ---------- подписи планет: маркер-«вейпоинт» под планетой ---------- */
.ptags { z-index: 3; pointer-events: none; }
.ptag {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 5px;
  opacity: 0; visibility: hidden; pointer-events: auto; color: var(--text); text-decoration: none; will-change: transform, opacity;
}
.ptag::before { content: ""; width: 1px; height: 14px; background: linear-gradient(rgba(255, 220, 200, 0), rgba(255, 220, 200, .7)); transition: height .3s var(--ease-out), background .3s; }
.ptag-box {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 5px 8px; white-space: nowrap;
  font: 650 .7rem/1 var(--f-display); letter-spacing: .14em; text-transform: uppercase;
  background: rgba(16, 11, 18, .78); clip-path: var(--pc-xs); box-shadow: inset 0 0 0 1px rgba(255, 210, 190, .22);
  transition: background-color .25s, color .25s, box-shadow .25s, transform .35s var(--spring);
}
.ptag-ico { font-size: .95rem; letter-spacing: 0; }
.ptag > small { font: 500 .66rem/1 var(--f-mono); color: var(--text-2); text-shadow: 0 1px 6px rgba(0, 0, 0, .9); display: inline-flex; align-items: center; gap: 6px; }
.ptag > small:empty { display: none; }
.ptag > small .dot { width: 7px; height: 7px; }
.ptag.locked { color: var(--muted); cursor: not-allowed; }
.ptag.locked .ptag-box { background: rgba(16, 11, 18, .6); box-shadow: inset 0 0 0 1px rgba(255, 210, 190, .12); }
.ptag.locked > small { color: #c9a48f; }
.ptag.locked > small::before { content: ""; width: 7px; height: 7px; background: repeating-linear-gradient(-45deg, #ffb48a 0 2px, transparent 2px 4px); }
.ptag.hot::before, a.ptag:hover::before { height: 22px; background: linear-gradient(rgba(255, 127, 80, 0), var(--coral)); }
.ptag.hot .ptag-box, a.ptag:hover .ptag-box, a.ptag:focus-visible .ptag-box { color: #221008; background: var(--coral-hot); box-shadow: inset 0 -2px 0 var(--coral-deep), 0 0 24px rgba(255, 127, 80, .6); transform: translateY(-2px); }
.ptag.locked.hot .ptag-box { color: var(--text); background: rgba(40, 28, 44, .9); box-shadow: inset 0 0 0 1px rgba(255, 210, 190, .3); }
a.ptag:focus-visible { outline: none; }

/* ---------- «Загрузка местности» на стене блоков между космосом и островом ---------- */
.veil-note {
  position: absolute; left: 50%; top: 50%; z-index: 5; translate: -50% -50%; display: grid; justify-items: center; gap: 12px;
  pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .25s, visibility 0s .25s; color: #4a2416; text-align: center;
}
.stage.veil .veil-note { opacity: 1; visibility: visible; transition: opacity .25s; }
.veil-note > span { font: 600 .74rem/1 var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: #8a4a34; }
.veil-note > b { font: 800 clamp(1.8rem, 4vw, 3rem)/1 var(--f-display); letter-spacing: -.02em; color: #3a1a10; }
.veil-bar { display: flex; gap: 4px; }
.veil-bar > i { width: 14px; height: 14px; background: rgba(90, 40, 24, .16); box-shadow: inset 0 -2px 0 rgba(90, 40, 24, .12); }
.veil-bar > i:nth-child(-n + 10) { background: rgba(90, 40, 24, calc(.16 + .6 * clamp(0, var(--v, 0) * 11 - var(--n, 0), 1))); }
.veil-bar > i:nth-child(1) { --n: 0; } .veil-bar > i:nth-child(2) { --n: 1; } .veil-bar > i:nth-child(3) { --n: 2; } .veil-bar > i:nth-child(4) { --n: 3; }
.veil-bar > i:nth-child(5) { --n: 4; } .veil-bar > i:nth-child(6) { --n: 5; } .veil-bar > i:nth-child(7) { --n: 6; } .veil-bar > i:nth-child(8) { --n: 7; }
.veil-bar > i:nth-child(9) { --n: 8; } .veil-bar > i:nth-child(10) { --n: 9; }

/* =====================================================================================================
   ГЛАВА 0 — ПОСТЕР: огромное EVOLUTION, «Четыре мира. Один смысл.», IP, статус сети
   ===================================================================================================== */
.intro {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: space-between;
  padding: calc(var(--nav-h) + clamp(14px, 3.4vh, 40px)) clamp(16px, 3vw, 48px) clamp(18px, 3.6vh, 40px);
  pointer-events: none; text-align: center;
}
/* мягкая темнота сверху и снизу — текст читается поверх звёзд и солнца */
.intro::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(11, 8, 13, .72) 0%, rgba(11, 8, 13, .25) 26%, rgba(11, 8, 13, 0) 40%),
    linear-gradient(0deg, rgba(11, 8, 13, .78) 0%, rgba(11, 8, 13, .3) 16%, rgba(11, 8, 13, 0) 30%);
}
.intro-top { display: grid; justify-items: center; will-change: transform, opacity; }
.intro-kicker {
  display: inline-flex; align-items: center; gap: 14px;
  font: 600 clamp(.62rem, .9vw, .74rem)/1.3 var(--f-display); letter-spacing: .3em; text-transform: uppercase; color: var(--text-2);
}
.intro-kicker > i { width: 6px; height: 6px; background: var(--coral); box-shadow: 10px 0 0 rgba(255, 127, 80, .45), 20px 0 0 rgba(255, 127, 80, .18); }
.intro-kicker > i:last-child { box-shadow: -10px 0 0 rgba(255, 127, 80, .45), -20px 0 0 rgba(255, 127, 80, .18); }
.intro-kicker > i:first-child { margin-right: 20px; }
.k-narrow { display: none; }
.intro-kicker > i:last-child { margin-left: 20px; }

.intro-word {
  --hw: clamp(3.1rem, 14.2vw, 13.2rem);
  display: flex; justify-content: center; margin: clamp(10px, 1.6vh, 20px) 0 0;
  font: 900 var(--hw)/.82 var(--f-display); letter-spacing: .015em; color: var(--text);
  filter: drop-shadow(0 .045em 0 #a8402a) drop-shadow(0 .03em 0 #4a170d) drop-shadow(0 .14em .3em rgba(0, 0, 0, .55));
}
.intro-word > span {
  display: inline-block; color: transparent; -webkit-text-fill-color: transparent;
  background: linear-gradient(180deg, #fffaf4 0%, #ffeadb 38%, #ffc29e 70%, #ff8a5c 100%); -webkit-background-clip: text; background-clip: text;
}
.intro-sub {
  margin: clamp(10px, 2.2vh, 26px) 0 0; font: 700 clamp(1.25rem, 2.5vw, 2.2rem)/1.1 var(--f-display); letter-spacing: -.01em; color: var(--text);
  text-shadow: 0 2px 24px rgba(0, 0, 0, .6);
}
.intro-lead { margin: 12px auto 0; max-width: 560px; font-size: clamp(.92rem, 1.1vw, 1.02rem); line-height: 1.55; color: var(--text-2); text-shadow: 0 1px 14px rgba(0, 0, 0, .8); }

.intro-bottom { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 20px; will-change: transform, opacity; }
.intro-center { display: grid; justify-items: center; gap: 12px; }
.intro-center > *, .ptag, .skip, .rail { pointer-events: auto; }

/* кнопка IP: моноширинный адрес, «нажимается» как блок */
.intro-ip, .ch-ip {
  position: relative; display: inline-flex; align-items: center; gap: 14px; padding: 10px 10px 13px 16px; border: 0; cursor: pointer;
  color: var(--text); background: rgba(22, 15, 24, .86); clip-path: var(--pc-sm);
  box-shadow: inset 0 0 0 1px rgba(255, 200, 170, .24), inset 0 -4px 0 rgba(0, 0, 0, .45);
  transition: box-shadow .25s, background-color .25s, transform .3s var(--spring);
}
.intro-ip:hover, .ch-ip:hover { background: rgba(32, 21, 32, .92); box-shadow: inset 0 0 0 1px rgba(255, 154, 107, .6), inset 0 -4px 0 rgba(0, 0, 0, .45); }
.intro-ip:active, .ch-ip:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(255, 154, 107, .6), inset 0 -1px 0 rgba(0, 0, 0, .45); }
.intro-ip:focus-visible, .ch-ip:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--amber), inset 0 -4px 0 rgba(0, 0, 0, .45); }
.intro-ip-k { font: 600 .66rem/1 var(--f-display); letter-spacing: .2em; color: var(--muted); }
.intro-ip-v { font: 700 clamp(1.05rem, 1.5vw, 1.3rem)/1 var(--f-mono); letter-spacing: -.01em; }
.intro-ip-c, .ch-ip > span {
  display: grid; padding: 8px 12px 9px; font: 650 .8rem/1 var(--f-body); color: #221008; background: var(--g-coral);
  clip-path: var(--pc-xs); box-shadow: inset 0 -3px 0 #B4432A, inset 0 2px 0 rgba(255, 238, 222, .5);
}
.intro-ip-c > span, .ch-ip > span > span { grid-area: 1 / 1; transition: opacity .25s, transform .35s var(--spring); }
.c-done { opacity: 0; transform: translateY(6px); }
.copied .c-copy { opacity: 0; transform: translateY(-6px); }
.copied .c-done { opacity: 1; transform: none; }
.copied .intro-ip-c, .ch-ip.copied > span { background: linear-gradient(180deg, #9be88d, #6cc85e); box-shadow: inset 0 -3px 0 #3f8a34, inset 0 2px 0 rgba(255, 255, 255, .45); }

.intro-live { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 0 2px; font-size: .92rem; color: var(--text-2); text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
.intro-live b { color: var(--text); font-weight: 700; }
.intro-live.clickable { cursor: pointer; }
.intro-live.clickable:hover #status-text { color: var(--coral-hot); }
.intro-heads { display: inline-flex; }
.intro-heads:empty { display: none; }
.intro-heads a { display: block; margin-left: -6px; transition: transform .3s var(--spring); }
.intro-heads a:first-child { margin-left: 2px; }
.intro-heads a:hover { transform: translateY(-3px); position: relative; z-index: 1; }
.intro-heads img { display: block; width: 26px; height: 26px; image-rendering: pixelated; background: var(--panel-3); clip-path: var(--pc-xs); box-shadow: 0 0 0 2px #120c14; }

/* подсказка «листай» — три блока по очереди падают вниз */
.intro-cue { display: flex; align-items: center; gap: 14px; justify-self: start; text-align: left; font: 600 .64rem/1.5 var(--f-display); letter-spacing: .24em; text-transform: uppercase; color: var(--text-2); text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
.intro-cue > i { display: grid; gap: 4px; }
.intro-cue b { width: 7px; height: 7px; background: var(--coral); opacity: .2; animation: cue 1.6s steps(1) infinite; }
.intro-cue b:nth-child(2) { animation-delay: .2s; }
.intro-cue b:nth-child(3) { animation-delay: .4s; }
@keyframes cue { 0% { opacity: 1; } 30% { opacity: .2; } }

/* прокрутка: постер уходит, как будто камера пролетает сквозь него (--h от home.js, 0..1) */
.story:not(.is-static) .intro-top { transform: translate3d(0, calc(var(--h, 0) * -16vh), 0) scale(calc(1 + var(--h, 0) * var(--h, 0) * .7)); opacity: calc(1 - var(--h, 0) * 1.35); }
.story:not(.is-static) .intro-bottom { transform: translate3d(0, calc(var(--h, 0) * 8vh), 0); opacity: calc(1 - var(--h, 0) * 2.2); }
.story:not(.is-static) .intro-word { letter-spacing: calc(.015em + var(--h, 0) * .16em); }
.stage.intro-off .intro { visibility: hidden; }

/* появление постера — чистый CSS (без мигания), после обложки «загрузки чанков» */
@media (prefers-reduced-motion: no-preference) {
  .intro-kicker { animation: in-clip 1.1s var(--ease-out) .5s both; }
  .intro-word > span {
    --rv-t: calc(12 * .085em);
    mask-image: var(--blk-0), var(--blk-1), var(--blk-2), var(--blk-3), var(--blk-4), var(--blk-5), var(--blk-6), var(--blk-7), var(--blk-8), var(--blk-9);
    mask-repeat: repeat; mask-size: 0 0;
    animation: assemble .72s step-end calc(.55s + var(--i) * .075s) both, word-drop 1.2s var(--ease-out) calc(.55s + var(--i) * .075s) both;
  }
  .intro-sub { animation: in-rise 1.2s var(--ease-out) 1.25s both; }
  .intro-lead { animation: in-rise 1.2s var(--ease-out) 1.4s both; }
  .intro-bottom > * { animation: in-rise 1.1s var(--ease-out) 1.55s both; }
  .intro-bottom > :first-child { animation-delay: 1.9s; }
  .stage .skip { animation: in-fade 1s var(--ease-out) 1.9s both; }
}
@keyframes in-clip { from { opacity: 0; clip-path: inset(0 50% 0 50%); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes word-drop { from { transform: translate3d(0, -.22em, 0) scale(1.08); } }
@keyframes in-rise { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
@keyframes in-fade { from { opacity: 0; } }

/* =====================================================================================================
   ГЛАВЫ 1–8 — титры поверх мира: сборка из блоков, «прогрузка» текста, уход рассыпанием
   ===================================================================================================== */
.ch {
  position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: flex-start;
  padding: calc(var(--nav-h) + 4vh) clamp(24px, 7vw, 128px) 6vh; pointer-events: none; opacity: 0;
}
.ch.ch-r { justify-content: flex-end; padding-right: clamp(120px, 13vw, 220px); }
.ch.ch-c { justify-content: center; text-align: center; }
.ch.ch-low { align-items: flex-end; padding-bottom: 13vh; }
.ch.is-in, .ch.is-out { opacity: 1; }
/* общая дымка кадра (лёгкая) + подложка-скрим за самим текстом: дневные кадры светлые, текст читается на любом */
.ch::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1s var(--ease-out);
  background: linear-gradient(90deg, rgba(15, 9, 14, .34), rgba(15, 9, 14, 0) 55%);
}
.ch.ch-r::before { background: linear-gradient(270deg, rgba(15, 9, 14, .34), rgba(15, 9, 14, 0) 55%); }
.ch.ch-c::before { background: linear-gradient(0deg, rgba(15, 9, 14, .4), rgba(15, 9, 14, 0) 50%); }
.ch.is-in::before { opacity: 1; }
.ch.is-out::before { opacity: 0; transition-duration: .7s; }
.ch-in::before {
  content: ""; position: absolute; inset: -34% -30% -34% -26%; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, rgba(15, 9, 14, .8), rgba(15, 9, 14, .62) 48%, rgba(15, 9, 14, .24) 76%, rgba(15, 9, 14, 0));
  transition: opacity .9s var(--ease-out);
}
.ch-c .ch-in::before { inset: -40% -16%; }
.ch.is-in .ch-in::before { opacity: 1; }
.ch.is-out .ch-in::before { opacity: 0; transition-duration: .5s; }
.ch-in { position: relative; width: min(600px, 100%); transform: translate3d(0, calc((.5 - var(--t, .5)) * 6vh), 0); }
.ch-c .ch-in { width: min(820px, 100%); }
.ch-art { display: none; }

.ch-k {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: clamp(14px, 2.2vh, 22px); padding: 7px 12px 6px 8px;
  font: 600 .72rem/1.3 var(--f-display); letter-spacing: .24em; text-transform: uppercase; color: var(--coral-hot);
  background: rgba(16, 10, 16, .82); clip-path: var(--pc-xs); box-shadow: inset 0 0 0 1px rgba(255, 154, 107, .28);
}
.ch-k > img { width: 20px; height: 20px; image-rendering: pixelated; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); }
.ch-k > em { font: 500 .68rem/1 var(--f-mono); letter-spacing: .06em; font-style: normal; color: var(--text-2); padding-left: 12px; box-shadow: inset 1px 0 0 rgba(255, 220, 200, .3); }
.ch-h {
  margin: 0; font: 800 clamp(2.15rem, 4.5vw, 4.4rem)/.98 var(--f-display); letter-spacing: -.03em; color: var(--text);
  text-shadow: 0 2px 30px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35);
}
.ch-hl { color: var(--coral-hot); }
.ch-p { margin: clamp(16px, 2.4vh, 24px) 0 0; max-width: 46ch; font-size: clamp(1rem, 1.2vw, 1.14rem); line-height: 1.6; color: #eadbd2; text-shadow: 0 1px 14px rgba(0, 0, 0, .75); }
.ch-c .ch-p { margin-inline: auto; }
.ch-p b { color: var(--text); }

.ch-facts { list-style: none; margin: clamp(16px, 2.4vh, 24px) 0 0; padding: 0; display: grid; gap: 8px; }
.ch-facts li {
  display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; padding: 9px 14px 9px 12px;
  font-size: .96rem; font-weight: 550; color: var(--text); background: rgba(22, 14, 22, .74);
  clip-path: var(--pc-xs); box-shadow: inset 0 0 0 1px rgba(255, 200, 170, .16), inset 3px 0 0 var(--coral);
}
.ch-facts li::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--coral); box-shadow: 0 0 10px rgba(255, 127, 80, .7); }
.ch-fact { display: inline-flex; align-items: center; gap: 14px; margin: 20px 0 0; padding: 10px 18px 10px 12px; background: rgba(18, 26, 30, .78); clip-path: var(--pc-sm); box-shadow: inset 0 0 0 1px rgba(111, 240, 232, .3); }
.ch-fact > img { width: 40px; height: 40px; image-rendering: pixelated; filter: drop-shadow(0 0 12px rgba(111, 240, 232, .45)); }
.ch-fact > span { display: grid; gap: 2px; font-size: .86rem; color: var(--text-2); text-align: left; }
.ch-fact b { font: 700 1.05rem/1.2 var(--f-display); color: var(--diamond); }

.ch-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.ch-links:empty { display: none; }
.ch-links a {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 14px 11px 10px; color: var(--text); text-decoration: none; font-weight: 600; font-size: .94rem;
  background: rgba(22, 14, 22, .82); clip-path: var(--pc-xs); box-shadow: inset 0 0 0 1px rgba(255, 200, 170, .2), inset 0 -3px 0 rgba(0, 0, 0, .4);
  transition: background-color .2s, box-shadow .2s, transform .3s var(--spring);
}
.ch-links a > img { width: 20px; height: 20px; image-rendering: pixelated; }
.ch-links a:hover { color: #221008; background: var(--coral-hot); box-shadow: inset 0 -3px 0 var(--coral-deep); transform: translateY(-2px); }

.ch-ip { margin: 24px auto 0; padding: 12px 12px 15px 20px; gap: 18px; text-align: left; }
.ch-ip > small { font: 600 .62rem/1.2 var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); max-width: 70px; }
.ch-ip > b { font: 700 clamp(1.3rem, 2.4vw, 2rem)/1 var(--f-mono); letter-spacing: -.02em; }
.ch-steps { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; margin: 22px 0 0; padding: 0; font-size: .95rem; color: var(--text-2); text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.ch-steps li { display: inline-flex; align-items: center; gap: 9px; }
.ch-steps i { display: grid; place-items: center; width: 22px; height: 22px; font: 700 .72rem/1 var(--f-mono); font-style: normal; color: #221008; background: var(--coral-hot); clip-path: var(--pc-xs); }
.ch-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 26px; }
.ch-links, .ch-ip, .ch-actions { pointer-events: none; }
.ch.is-in .ch-links, .ch.is-in .ch-ip, .ch.is-in .ch-actions { pointer-events: auto; }

/* вход главы: подпись «прогружается», заголовок собирается из блоков по словам, остальное поднимается */
.ch.is-in .ch-k { animation: in-clip-l .9s var(--ease-out) both; }
.ch.is-in .ch-h .split-word {
  --rv-t: calc(12 * .12em);
  mask-image: var(--blk-0), var(--blk-1), var(--blk-2), var(--blk-3), var(--blk-4), var(--blk-5), var(--blk-6), var(--blk-7), var(--blk-8), var(--blk-9);
  mask-repeat: repeat; mask-size: 0 0;
  animation: assemble .6s step-end calc(.1s + var(--i) * .065s) both, ch-word 1s var(--ease-out) calc(.1s + var(--i) * .065s) both;
}
.ch.is-in[data-dir="up"] .ch-h .split-word { animation-name: assemble, ch-word-up; }
.ch.is-in .ch-p { animation: in-rise 1s var(--ease-out) .42s both; }
.ch.is-in .ch-facts li, .ch.is-in .ch-fact, .ch.is-in .ch-links a {
  --rv-t: calc(12 * 9px);
  mask-image: var(--blk-0), var(--blk-1), var(--blk-2), var(--blk-3), var(--blk-4), var(--blk-5), var(--blk-6), var(--blk-7), var(--blk-8), var(--blk-9);
  mask-repeat: repeat; mask-size: 0 0;
  animation: assemble .5s step-end calc(.6s + var(--k, 0) * .1s) both;
}
.ch-facts li:nth-child(2), .ch-links a:nth-child(2) { --k: 1; } .ch-facts li:nth-child(3), .ch-links a:nth-child(3) { --k: 2; }
.ch-links a:nth-child(4) { --k: 3; } .ch-links a:nth-child(5) { --k: 4; }
.ch.is-in .ch-ip { animation: in-rise 1s var(--ease-out) .45s both; }
.ch.is-in .ch-steps { animation: in-rise 1s var(--ease-out) .58s both; }
.ch.is-in .ch-actions { animation: in-rise 1s var(--ease-out) .7s both; }
@keyframes in-clip-l { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes ch-word { from { transform: translate3d(0, .32em, 0) scale(1.06); } }
@keyframes ch-word-up { from { transform: translate3d(0, -.32em, 0) scale(1.06); } }

/* уход главы: рассыпается на блоки и уплывает по ходу движения */
.ch.is-out .ch-in { animation: ch-leave .7s var(--ease-io) both; }
.ch.is-out[data-dir="up"] .ch-in { animation-name: ch-leave-up; }
.ch.is-out .ch-in > * {
  --rv-t: calc(12 * 22px);
  mask-image: var(--blk-0), var(--blk-1), var(--blk-2), var(--blk-3), var(--blk-4), var(--blk-5), var(--blk-6), var(--blk-7), var(--blk-8), var(--blk-9);
  mask-repeat: repeat;
  animation: assemble .5s step-end reverse both;
}
.ch.is-out .ch-in > :nth-child(2) { animation-delay: .04s; } .ch.is-out .ch-in > :nth-child(3) { animation-delay: .08s; } .ch.is-out .ch-in > :nth-child(n + 4) { animation-delay: .12s; }
@keyframes ch-leave { to { transform: translate3d(0, -7vh, 0); } }
@keyframes ch-leave-up { to { transform: translate3d(0, 7vh, 0); } }

/* ---------- индикатор глав: блоки «достраиваются» по мере истории ---------- */
.rail {
  position: absolute; right: clamp(14px, 2.2vw, 36px); top: 50%; z-index: 6; translate: 0 -50%;
  display: flex; flex-direction: column; gap: 4px; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s;
}
.stage.rail-on .rail { opacity: 1; visibility: visible; transition: opacity .5s; }
.rail::before {
  content: ""; position: absolute; right: 10px; top: 13px; bottom: 13px; width: 2px; z-index: -1;
  background: linear-gradient(var(--coral), var(--coral)) 0 0 / 100% calc(var(--rp, 0) * 100%) no-repeat, rgba(255, 220, 200, .16);
}
.rail button {
  display: flex; align-items: center; justify-content: flex-end; gap: 12px; height: 26px; padding: 0 4px 0 12px; border: 0; background: none; cursor: pointer;
  font: 600 .64rem/1 var(--f-display); letter-spacing: .18em; text-transform: uppercase; color: var(--text);
}
.rail button > i {
  order: 2; flex: none; width: 14px; height: 14px; background: rgba(14, 10, 16, .55);
  box-shadow: inset 0 0 0 1px rgba(255, 230, 215, .45); transition: background-color .35s, box-shadow .35s, transform .45s var(--spring);
}
.rail button.done > i { background: #f4d6c4; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .25), inset 0 2px 0 rgba(255, 255, 255, .5); }
.rail button.now > i { background: var(--coral); transform: scale(1.18); box-shadow: inset 0 -3px 0 var(--coral-deep), inset 0 2px 0 rgba(255, 238, 222, .55), 0 0 18px rgba(255, 127, 80, .8); }
.rail button > span {
  padding: 5px 8px 4px; background: rgba(14, 10, 16, .78); clip-path: var(--pc-xs); opacity: 0; transform: translateX(8px);
  transition: opacity .3s, transform .4s var(--ease-out);
}
.rail button.now > span, .rail button:hover > span, .rail button:focus-visible > span { opacity: 1; transform: none; }
.rail button.now > span { color: var(--coral-hot); }
.rail button:focus-visible { outline: none; }
.rail button:focus-visible > i { box-shadow: inset 0 0 0 2px var(--amber); }

/* ---------- «Пропустить» ---------- */
.skip {
  position: absolute; right: clamp(16px, 2.2vw, 36px); bottom: clamp(18px, 3.6vh, 40px); z-index: 6;
  display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 11px; color: var(--text-2); text-decoration: none;
  font: 600 .72rem/1 var(--f-display); letter-spacing: .2em; text-transform: uppercase;
  background: rgba(16, 11, 18, .72); clip-path: var(--pc-xs); box-shadow: inset 0 0 0 1px rgba(255, 210, 190, .2), inset 0 -3px 0 rgba(0, 0, 0, .4);
  transition: color .2s, background-color .2s, opacity .4s, transform .3s var(--spring);
}
.skip > i { font-style: normal; color: var(--coral-hot); animation: skip-bob 1.6s var(--ease-io) infinite; }
.skip:hover { color: var(--text); background: rgba(34, 22, 34, .9); }
.skip:hover > i { color: var(--amber); }
.stage.story-end .skip { opacity: 0; pointer-events: none; }
@keyframes skip-bob { 50% { transform: translateY(3px); } }

/* конец истории: ночь мягко переходит в страницу */
.stage::after {
  content: ""; position: absolute; inset: auto 0 0; height: 30vh; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .8s;
  background: linear-gradient(180deg, rgba(14, 11, 16, 0), var(--ink));
}
.stage.story-end::after { opacity: 1; }

/* =====================================================================================================
   БЕЗ 3D-ОСИ (reduced motion / нет WebGL): главы — обычные экраны с CSS-иллюстрациями, без scroll-jacking
   ===================================================================================================== */
.story.is-static { height: auto; }
.story.is-static .stage { position: relative; height: auto; overflow: visible; background: var(--ink); }
.story.is-static .sky, .story.is-static .orrery, .story.is-static .stage-canvas, .story.is-static .ptags { bottom: auto; height: 100vh; height: 100svh; }
.story.is-static .sky { overflow: hidden; }
.story.is-static .intro { position: relative; min-height: 100vh; min-height: 100svh; }
.story.is-static .intro-cue { visibility: hidden; }
.story.is-static .rail, .story.is-static .veil-note, .story.is-static .stage::after { display: none; }
.story.is-static .skip { bottom: auto; top: calc(100svh - 64px); }
.story.is-static .ch {
  position: relative; inset: auto; opacity: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: center; gap: clamp(24px, 5vw, 72px);
  min-height: 0; padding: clamp(56px, 9vw, 120px) max(24px, calc((100% - 1240px) / 2)); text-align: left;
  background: var(--sky-c, linear-gradient(180deg, #160f1c, var(--ink)));
}
.story.is-static .ch::before { opacity: 1; background: linear-gradient(90deg, rgba(14, 10, 16, .6), rgba(14, 10, 16, 0) 70%); }
.story.is-static .ch-in { transform: none; width: auto; }
.story.is-static .ch-in::before { display: none; }
.story.is-static .ch-c .ch-in, .story.is-static .ch-c .ch-p { margin-inline: 0; }
.story.is-static .ch-steps, .story.is-static .ch-actions { justify-content: flex-start; }
.story.is-static .ch-ip { margin-inline: 0; }
.story.is-static .ch-links, .story.is-static .ch-ip, .story.is-static .ch-actions { pointer-events: auto; }
.story.is-static .ch-art {
  position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; clip-path: var(--pc);
  background: var(--sky-a, radial-gradient(circle at 50% 60%, rgba(255, 127, 80, .3), transparent 65%)), rgba(255, 255, 255, .02);
  box-shadow: inset 0 0 0 1px rgba(255, 220, 200, .14);
}
.story.is-static .ch-art::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(255, 230, 215, .05) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(255, 230, 215, .05) 1px, transparent 1px) 0 0 / 32px 32px;
}
.story.is-static .ch-art > img { position: relative; width: 34%; image-rendering: pixelated; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, .55)) drop-shadow(0 0 40px rgba(255, 196, 140, .35)); }
.story.is-static .ch-r { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); }
.story.is-static .ch-r .ch-art { order: -1; }
.story.is-static [data-ch="1"] { --sky-c: linear-gradient(180deg, #120c16, #2a1220 60%, #3a1622); --sky-a: radial-gradient(70% 70% at 50% 100%, rgba(255, 127, 80, .7), rgba(255, 92, 138, .25) 50%, transparent 80%); }
.story.is-static [data-ch="2"] { --sky-c: linear-gradient(180deg, #3a1622, #2a1a2e 50%, #1a1420); --sky-a: linear-gradient(180deg, #8e6bff 0%, #ff9a8a 55%, #ffc46b 100%); }
.story.is-static [data-ch="3"], .story.is-static [data-ch="4"], .story.is-static [data-ch="5"], .story.is-static [data-ch="6"] { --sky-c: linear-gradient(180deg, #1a1420, #17121c); --sky-a: linear-gradient(180deg, #9ad0f0 0%, #ffe8d8 70%, #ffd2b0 100%); }
.story.is-static [data-ch="7"] { --sky-c: linear-gradient(180deg, #17121c, #2a1424 50%, #1d1020); --sky-a: linear-gradient(180deg, #8e6bff 0%, #ff5c8a 40%, #ff7f50 70%, #ffc46b 100%); }
.story.is-static [data-ch="8"] { --sky-c: linear-gradient(180deg, #1d1020, #120d1c 50%, var(--ink)); --sky-a: radial-gradient(40% 60% at 50% 20%, rgba(255, 127, 80, .5), transparent 70%), linear-gradient(180deg, #1a1236, #0e0b16); }

/* =====================================================================================================
   СЕКЦИИ ПОСЛЕ ИСТОРИИ
   ===================================================================================================== */
.sec { position: relative; isolation: isolate; padding-block: clamp(64px, 9vw, 128px); }
.sec + .sec { padding-top: 0; }
#servers { scroll-margin-top: var(--nav-h); }
#servers::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 420px; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(110, 60, 160, .18), transparent 70%);
}
.sec-head { max-width: 780px; margin-bottom: clamp(28px, 4vw, 52px); }
.sec-head h2 { margin: .38em 0 .28em; font-size: clamp(2.3rem, 5.4vw, 4.4rem); font-weight: 800; line-height: .95; letter-spacing: -.035em; }
.sec-head p { margin: 0; max-width: 620px; font-size: clamp(1rem, 1.2vw, 1.1rem); color: var(--text-2); }
.sec-head-row { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px 48px; }
.sec-head-row h2 { margin-bottom: 0; }
.sec-head-row > p { max-width: 380px; color: var(--muted); }

/* ---------- карточки серверов ---------- */
.srv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.srv-grid > .skeleton { min-height: 300px; }
.srv {
  --kind: 255, 127, 80;
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px; width: 100%; min-height: 100%; padding: 28px 28px 26px; text-align: left;
  --card-bg: radial-gradient(120% 70% at 100% 0%, rgba(var(--kind), .16), transparent 60%), linear-gradient(180deg, #1c141e, var(--panel) 70%);
}
[data-kind="vanilla"] { --kind: 111, 200, 140; --orb: var(--orb-vanilla); }
[data-kind="modded"] { --kind: 255, 154, 80; --orb: var(--orb-modded); }
[data-kind="polit"] { --kind: 255, 92, 138; --orb: var(--orb-polit); }
[data-kind="events"] { --kind: 255, 212, 94; --orb: var(--orb-events); }
.srv-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; }
.srv-orb { position: relative; width: 72px; height: 72px; flex: none; }
.srv-orb > i { position: absolute; inset: 0; background: var(--orb, var(--orb-vanilla)) center / 100% 100%; image-rendering: pixelated; filter: drop-shadow(0 0 16px rgba(var(--kind), .45)); transition: transform .6s var(--spring); }
.srv-orb > b { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 30px; height: 30px; font-size: 1rem; background: #1a121c; clip-path: var(--pc-xs); box-shadow: inset 0 0 0 1px var(--line-2); }
.srv:hover .srv-orb > i { transform: rotate(-8deg) scale(1.06); }
.srv-online { display: inline-flex; align-items: center; gap: 8px; font: 500 .8rem/1 var(--f-mono); color: var(--text-2); }
.srv-online .dot { width: 8px; height: 8px; }
.srv-body { display: grid; gap: 6px; min-width: 0; }
.srv h3 { margin: 6px 0 0; font-size: clamp(1.5rem, 2.2vw, 1.9rem); font-weight: 800; letter-spacing: -.025em; overflow-wrap: anywhere; }
.srv-tag { font: 600 .74rem/1.4 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--kind)); }
.srv > p { flex: 1; margin: 0; color: var(--text-2); font-size: .95rem; line-height: 1.6; }
.srv .chips { gap: 6px; }
.srv-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font: 650 .9rem/1 var(--f-body); color: var(--coral-hot); }
.srv-more > i { font-style: normal; transition: transform .35s var(--spring); }
.srv:hover .srv-more > i { transform: translateX(5px); }
.srv.current { --card-line: rgba(255, 127, 80, .7); }
.srv.current .srv-more { color: var(--amber); }
/* закрытый мир — в строительных лесах */
.srv.locked { cursor: not-allowed; --card-line: rgba(255, 200, 170, .1); --card-bg: repeating-linear-gradient(-45deg, rgba(255, 200, 170, .035) 0 2px, transparent 2px 14px), linear-gradient(180deg, #19131b, #151017); }
.srv.locked:hover { transform: none; box-shadow: none; }
.srv.locked .srv-orb > i { opacity: .38; filter: grayscale(.4); }
.srv.locked .srv-orb::after {
  content: ""; position: absolute; inset: -4px;
  background:
    linear-gradient(rgba(255, 196, 140, .55), rgba(255, 196, 140, .55)) 0 33% / 100% 2px no-repeat,
    linear-gradient(rgba(255, 196, 140, .55), rgba(255, 196, 140, .55)) 0 66% / 100% 2px no-repeat,
    linear-gradient(90deg, rgba(255, 196, 140, .55), rgba(255, 196, 140, .55)) 30% 0 / 2px 100% no-repeat,
    linear-gradient(90deg, rgba(255, 196, 140, .55), rgba(255, 196, 140, .55)) 70% 0 / 2px 100% no-repeat;
}
.srv.locked h3, .srv.locked > p { color: var(--muted); }
.srv.locked .srv-tag { color: var(--muted); }
/* ивентовый — отдельной широкой строкой */
.srv-extra { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 20px 32px; align-items: center; margin-top: 32px; }
.srv-extra-label { display: grid; gap: 8px; }
.srv-extra-label b { font: 800 1.6rem/1 var(--f-display); letter-spacing: -.02em; }
.srv-extra-label span { color: var(--muted); font-size: .95rem; }
.srv-extra .srv { flex-direction: row; flex-wrap: wrap; align-items: center; column-gap: 24px; }
.srv-extra .srv-top { width: auto; }
.srv-extra .srv-body { flex: 1 1 320px; display: grid; gap: 8px; min-width: 0; }
.srv-extra .srv-body h3 { margin: 0; }
.srv-extra .srv-body p { margin: 0; color: var(--text-2); font-size: .95rem; }

/* ---------- описание выбранного сервера ---------- */
.picked { margin-top: clamp(48px, 7vw, 96px); scroll-margin-top: calc(var(--nav-h) + 8px); }
:where(.picked) { --kind: 255, 127, 80; --orb: var(--orb-vanilla); }
.picked-hero { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid var(--line); }
.picked-orb { position: relative; width: clamp(110px, 14vw, 180px); aspect-ratio: 1; }
.picked-orb > i { position: absolute; inset: 0; background: var(--orb) center / 100% 100%; image-rendering: pixelated; filter: drop-shadow(0 0 40px rgba(var(--kind), .5)); animation: orb-spin 30s linear infinite; }
.picked-orb > b { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 48px; height: 48px; font-size: 1.5rem; background: #1a121c; clip-path: var(--pc-xs); box-shadow: inset 0 0 0 1px var(--line-2); }
@keyframes orb-spin { 50% { transform: rotate(6deg) scale(1.03); } }
.picked-hero .kicker { color: rgb(var(--kind)); }
.picked-hero h2 { margin: .3em 0 .15em; font-size: clamp(2.6rem, 6.4vw, 5.6rem); font-weight: 800; line-height: .9; letter-spacing: -.04em; }
.picked-lead { margin: 0 0 8px; font: 600 clamp(1.1rem, 1.6vw, 1.35rem)/1.35 var(--f-display); color: var(--text); }
.picked-hero p.muted { max-width: 680px; margin: 0 0 16px; color: var(--text-2); }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.about-tile { padding: 28px; }
.about-tile h3 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 1.3rem; font-weight: 750; }
.about-tile h3 > span { display: grid; place-items: center; flex: none; width: 42px; height: 42px; font-size: 1.3rem; background: rgba(255, 127, 80, .1); clip-path: var(--pc-xs); box-shadow: inset 0 0 0 1px rgba(255, 127, 80, .25); }
.about-tile p { margin: 0 0 10px; color: var(--text-2); }
.about-tile ul { list-style: none; margin: 14px 0 0; padding: 14px 0 0; display: grid; gap: 8px; border-top: 1px solid var(--line); }
.about-tile li { display: flex; gap: 12px; align-items: baseline; font-weight: 550; }
.about-tile li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--coral); translate: 0 -2px; }
.sects-title { margin: clamp(40px, 6vw, 72px) 0 18px; font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -.02em; }
.sects { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.sect-tile {
  display: flex; align-items: center; gap: 16px; padding: 16px 18px; color: var(--text); text-decoration: none;
  background: var(--panel); clip-path: var(--pc-sm); box-shadow: inset 0 0 0 1px var(--line), inset 0 -3px 0 rgba(0, 0, 0, .35);
  transition: background-color .25s, box-shadow .25s, transform .4s var(--spring);
}
.sect-tile:hover { color: var(--text); background: #221822; box-shadow: inset 0 0 0 1px rgba(255, 154, 107, .5), inset 0 -3px 0 rgba(0, 0, 0, .35); transform: translateY(-3px); text-decoration: none; }
.sect-slot { display: grid; place-items: center; flex: none; width: 52px; height: 52px; background: #120c13; box-shadow: inset 0 0 0 2px #2c2130, inset 3px 3px 0 rgba(0, 0, 0, .45); }
.sect-slot > img { width: 32px; height: 32px; image-rendering: pixelated; transition: transform .4s var(--spring); }
.sect-tile:hover .sect-slot > img { transform: scale(1.15) rotate(-6deg); }
.sect-tile b { display: block; font: 700 1.02rem/1.25 var(--f-display); }
.sect-tile small { display: block; margin-top: 3px; color: var(--muted); font-size: .86rem; line-height: 1.4; }

/* ---------- сейчас играют ---------- */
.online { display: grid; gap: 20px; }
.online-group { padding: 24px; }
.online-group h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: 1.15rem; }
.online-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 8px; }
.online-players a {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 12px 8px 8px; color: var(--text); text-decoration: none;
  background: rgba(255, 220, 200, .03); clip-path: var(--pc-xs); box-shadow: inset 0 0 0 1px var(--line);
  transition: background-color .2s, box-shadow .2s, transform .3s var(--spring);
}
.online-players a:hover { color: var(--text); background: rgba(255, 127, 80, .08); box-shadow: inset 0 0 0 1px rgba(255, 154, 107, .45); transform: translateY(-2px); }
.online-players img { flex: none; width: 36px; height: 36px; image-rendering: pixelated; background: var(--panel-3); clip-path: var(--pc-xs); }
.op-text { display: flex; align-items: center; gap: 6px; min-width: 0; }
.op-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- кадры: «кинозал» (смена кадра — сборкой из блоков) + плитки ---------- */
.reel { position: relative; aspect-ratio: 21 / 9; margin-bottom: 20px; overflow: hidden; clip-path: var(--pc); background: #120c14; }
.reel-frame { position: absolute; inset: 0; }
.reel-slide { position: absolute; inset: 0; background: #120c14 center / cover no-repeat; opacity: 0; }
.reel-slide.prev { opacity: 1; z-index: 0; }
.reel-slide.on { opacity: 1; z-index: 1; animation: reel-zoom 9s linear both; }
@media (prefers-reduced-motion: no-preference) {
  .reel-slide.on.swap {
    --rv-t: calc(12 * 56px);
    mask-image: var(--blk-0), var(--blk-1), var(--blk-2), var(--blk-3), var(--blk-4), var(--blk-5), var(--blk-6), var(--blk-7), var(--blk-8), var(--blk-9);
    mask-repeat: repeat; mask-size: 0 0;
    animation: assemble .9s step-end both, reel-zoom 9s linear both;
  }
}
@keyframes reel-zoom { from { transform: scale(1.08); } to { transform: scale(1); } }
.reel::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(0deg, rgba(10, 7, 11, .82), rgba(10, 7, 11, 0) 38%); box-shadow: inset 0 0 0 1px var(--line); }
.reel-bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: clamp(16px, 2.4vw, 28px); }
.reel-caption { font: 600 clamp(.95rem, 1.3vw, 1.15rem)/1.35 var(--f-display); color: var(--text); text-shadow: 0 1px 10px rgba(0, 0, 0, .8); }
.reel-dots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.reel-dots button { width: 12px; height: 12px; padding: 0; border: 0; cursor: pointer; background: rgba(255, 230, 215, .3); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3); transition: background-color .25s, transform .3s var(--spring); }
.reel-dots button:hover { background: rgba(255, 230, 215, .6); }
.reel-dots button.on { background: var(--coral); transform: scale(1.2); }
.shots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 14vw, 210px); gap: 14px; }
.shots:empty { display: none; }
.shots > a:first-child { grid-column: span 2; grid-row: span 2; }
.shots.few { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(180px, 20vw, 280px); }
.shots.few > a:first-child { grid-column: auto; grid-row: auto; }
.shot { position: relative; display: block; overflow: hidden; color: var(--text); clip-path: var(--pc); background: #120c14; }
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.shot:hover img { transform: scale(1.06); }
.shot > span { position: absolute; inset: auto 0 0; display: grid; gap: 2px; padding: 40px 16px 14px; font-size: .84rem; color: var(--text-2); background: linear-gradient(0deg, rgba(10, 7, 11, .9), transparent); }
.shot > span b { font: 650 .98rem/1.3 var(--f-display); color: var(--text); }
.shot:hover { color: var(--text); }

/* ---------- как начать: тропинка из четырёх блоков ---------- */
.path { position: relative; isolation: isolate; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.path::before {
  content: ""; position: absolute; left: 12%; right: 12%; top: 64px; height: 4px; z-index: -1;
  background: repeating-linear-gradient(90deg, var(--coral) 0 12px, transparent 12px 20px);
  opacity: .55; transform-origin: 0 50%; transform: scaleX(clamp(0, var(--p, 1) * 1.25, 1));
}
.path-step { position: relative; padding: 26px 24px 26px; }
.path-step > img { display: block; width: 56px; height: 56px; margin: 6px 0 18px; image-rendering: pixelated; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .5)); transition: transform .5s var(--spring); }
.path-step:hover > img { transform: translateY(-6px) rotate(-6deg); }
.path-n { position: absolute; right: 20px; top: 18px; font: 800 2.6rem/1 var(--f-display); letter-spacing: -.04em; color: rgba(255, 200, 170, .1); }
.path-step h3 { margin: 0 0 8px; font-size: 1.2rem; font-weight: 750; }
.path-step p { margin: 0; color: var(--text-2); font-size: .95rem; }

/* ---------- Telegram ---------- */
.tg {
  position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px;
  padding: clamp(32px, 5vw, 64px); clip-path: var(--pc);
  background:
    radial-gradient(70% 140% at 100% 100%, rgba(79, 181, 232, .16), transparent 60%),
    radial-gradient(60% 120% at 0% 0%, rgba(255, 127, 80, .16), transparent 60%),
    linear-gradient(180deg, #1d1520, #160f18);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.tg-text { position: relative; z-index: 1; }
.tg h2 { margin: .35em 0 .3em; font-size: clamp(1.9rem, 3.8vw, 3.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.tg p { margin: 0; max-width: 520px; color: var(--text-2); }
.tg-btn { position: relative; z-index: 1; }
.tg-word {
  position: absolute; right: -2%; bottom: -.24em; z-index: 0; pointer-events: none;
  font: 900 clamp(5rem, 15vw, 13rem)/1 var(--f-display); letter-spacing: -.04em; color: transparent;
  -webkit-text-stroke: 1px rgba(255, 200, 170, .1);
}

/* =====================================================================================================
   ТЕЛЕФОН
   ===================================================================================================== */
@media (max-width: 1000px) {
  .srv-grid { grid-template-columns: minmax(0, 1fr); }
  .srv-grid .srv { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; }
  .srv-grid .srv > :not(.srv-top) { grid-column: 2; }
  .srv-grid .srv > .srv-top { grid-row: 1 / span 6; flex-direction: column; align-items: flex-start; width: auto; align-self: start; }
  .srv-extra { grid-template-columns: minmax(0, 1fr); }
  .path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .path::before { display: none; }
}
@media (max-width: 760px) {
  .intro-bottom { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; }
  .intro-right, .intro-cue { display: none; }
  .intro { padding-bottom: calc(clamp(18px, 3.6vh, 40px) + 46px); }
  .k-wide { display: none; }
  .k-narrow { display: inline; }
  .ptag-box { padding: 5px 8px 4px 6px; font-size: .6rem; gap: 5px; letter-spacing: .1em; }
  .ptag-ico { font-size: .8rem; }
  .ptag > small { font-size: .58rem; }
  .ptag::before { height: 8px; }
  .intro-lead { font-size: .9rem; max-width: 34ch; }
  .intro-kicker { letter-spacing: .2em; gap: 8px; }
  .intro-kicker > i:first-child { margin-right: 14px; }
  .intro-kicker > i:last-child { margin-left: 14px; }
  .ch { padding: calc(var(--nav-h) + 3vh) 20px 5vh; align-items: flex-end; padding-bottom: 12vh; }
  .ch.ch-r { justify-content: flex-start; }
  .ch::before, .ch.ch-r::before, .ch.ch-c::before { background: linear-gradient(0deg, rgba(15, 9, 14, .78) 0%, rgba(15, 9, 14, .5) 40%, rgba(15, 9, 14, 0) 72%); }
  .ch-in::before, .ch-c .ch-in::before { inset: -18% -14%; }
  .ch.ch-end { align-items: center; padding-bottom: 6vh; }
  .ch.ch-r { padding-right: 20px; }
  .ch-in { width: 100%; padding-right: 26px; }
  .ch-c .ch-in { padding-right: 0; }
  .ch-h { font-size: clamp(1.85rem, 8.6vw, 2.5rem); }
  .ch-p { font-size: .98rem; line-height: 1.55; }
  .ch-facts { gap: 6px; }
  .ch-facts li { font-size: .84rem; padding: 7px 11px 7px 10px; gap: 10px; }
  .ch-fact { margin-top: 16px; }
  .ch-links a { font-size: .86rem; padding: 7px 11px 9px 8px; }
  .ch-k > em { display: none; }
  .ch-ip { flex-wrap: wrap; justify-content: center; }
  .ch-ip > small { display: none; }
  .ch-actions .btn { flex: 1 1 100%; }
  .rail { right: 8px; }
  .rail button { height: 22px; padding: 0; }
  .rail button > span { display: none; }
  .rail button > i { width: 10px; height: 10px; }
  .rail::before { right: 4px; }
  .skip { padding: 8px 11px 10px; font-size: .64rem; }
  .story.is-static .ch { grid-template-columns: minmax(0, 1fr); padding: 56px 16px; }
  .story.is-static .ch-r .ch-art { order: 0; }
  .story.is-static .ch-art { aspect-ratio: 16 / 9; }
  .story.is-static .ch-in { padding-right: 0; }
  .sec-head-row { display: grid; }
  .srv-grid .srv { display: flex; padding: 22px; }
  .srv-grid .srv > .srv-top { flex-direction: row; width: 100%; align-items: center; }
  .picked-hero { grid-template-columns: minmax(0, 1fr); }
  .reel { aspect-ratio: 4 / 3; }
  .reel-bar { flex-direction: column; align-items: flex-start; }
  .shots, .shots.few { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; gap: 10px; }
  .shots.few > a:first-child { grid-column: span 2; }
  .tg { grid-template-columns: minmax(0, 1fr); }
  .tg-btn { width: 100%; }
}
@media (max-width: 520px) {
  .path { grid-template-columns: minmax(0, 1fr); }
  .path-step { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; padding: 20px; }
  .path-step > img { grid-row: 1 / span 2; margin: 0; width: 48px; height: 48px; }
  .path-n { font-size: 2rem; }
}

/* нырок в планету по клику: постер и подписи планет уходят, пока камера летит */
.stage.diving :is(.intro, .ptags, .skip) { opacity: 0 !important; visibility: hidden; transition: opacity .5s, visibility 0s .5s; pointer-events: none; }

/* Производительность: пока 3D живой, CSS-космос под ним не нужен (он непрозрачный) — не анимируем и не рисуем;
   размытие шапки поверх 3D пересчитывалось бы каждый кадр — заменяем плотным фоном */
.stage.is-live .sky, .stage.is-live .orrery { display: none; }
body.home .site-header::after { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(17, 13, 19, .95); }

/* ---------- Telegram-бот: текст, список возможностей и телефон с листающимся приложением ---------- */
.tgx { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 6vw, 96px); align-items: center; }
.tgx-text h2 { margin: .35em 0 .35em; font-size: clamp(2rem, 4.2vw, 3.6rem); font-weight: 800; letter-spacing: -.03em; line-height: .98; }
.tgx-text > p { max-width: 560px; color: var(--text-2); font-size: 1.06rem; }
.tgx-list { list-style: none; margin: 26px 0 30px; padding: 0; display: grid; gap: 10px; max-width: 560px; }
.tgx-list li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; padding: 12px 16px 12px 12px; background: rgba(24, 18, 26, .86); clip-path: var(--pc-sm); box-shadow: inset 0 0 0 1px var(--line); }
.tgx-list li img { width: 44px; height: 44px; padding: 8px; image-rendering: pixelated; background: #120d14; box-shadow: inset 2px 2px 0 rgba(0, 0, 0, .6), inset -2px -2px 0 rgba(255, 220, 200, .08); }
.tgx-list b { display: block; font: 700 1rem/1.2 var(--f-display); color: var(--text); }
.tgx-list span { color: var(--muted); font-size: .9rem; }
.tgx-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 900px) {
  .tgx { grid-template-columns: minmax(0, 1fr); }
  .tgx .tgphone { width: min(100%, 280px); }
  .tgx-actions .btn { flex: 1 1 220px; }
}