/* «Миры» — поверх «Кино»: главная — выбор мира, каждая книга — своя
   вселенная-панель; ниже «С чего начать», «Пишется сейчас», подкаст. */
[data-skin~="worlds"] .worlds { display: flex; height: calc(100svh - 64px); min-height: 560px; }
[data-skin~="worlds"] .world {
  position: relative; flex: 1; overflow: hidden; text-decoration: none; color: #f3efe8;
  border-right: 1px solid #ffffff1f; transition: flex .6s cubic-bezier(.2,.8,.2,1);
  display: flex; align-items: flex-end; padding: 32px; isolation: isolate;
}
[data-skin~="worlds"] .world:last-child { border-right: 0; }
[data-skin~="worlds"] .world:hover, [data-skin~="worlds"] .world:focus-visible { flex: 2.4; }
[data-skin~="worlds"] .world-bg {
  position: absolute; inset: -40px; z-index: -1; background-size: cover; background-position: center;
  filter: blur(26px) brightness(.55) saturate(1.3); transform: scale(1.1);
}
[data-skin~="worlds"] .world-art {
  position: absolute; left: 50%; top: 44%; width: min(46%, 260px); transform: translate(-50%, -50%) rotate(-3deg);
  height: auto; aspect-ratio: 2 / 3; object-fit: cover;
  box-shadow: 0 40px 70px -20px #000; border-radius: 6px; transition: transform .6s;
}
[data-skin~="worlds"] .world:hover .world-art { transform: translate(-50%, -54%) rotate(0) scale(1.05); }
[data-skin~="worlds"] .world-txt { position: relative; max-width: 26rem; }
[data-skin~="worlds"] .world-num { font: 500 .72rem Unbounded, sans-serif; letter-spacing: .26em; text-transform: uppercase; color: #ffffffa0; }
[data-skin~="worlds"] .world h2 { margin: .3em 0 .25em; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1; color: var(--accent); text-transform: none; letter-spacing: 0; }
[data-skin~="worlds"] .world.t-oshibka-pustyni h2 { font-family: "El Messiri", serif !important; }
[data-skin~="worlds"] .world.t-nenadezhnaya-krov h2 { font-family: Cormorant, serif !important; }
[data-skin~="worlds"] .world-next h2 { color: #ff8a2a; }
/* Название и пометка длиннее, чем у книг, — обложку поднимаем, чтобы текст на неё не наезжал. */
[data-skin~="worlds"] .world-next .world-art { top: 36%; width: min(40%, 230px); }
[data-skin~="worlds"] .world-wip { display: flex; width: fit-content; align-items: center; gap: 8px; margin-top: 10px; padding: 5px 12px; border: 1px solid #ff8a2a88; border-radius: 999px; font: 600 .68rem Unbounded, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #ffcf9a; background: #ff8a2a1a; }
[data-skin~="worlds"] .world-wip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #ff8a2a; box-shadow: 0 0 0 0 #ff8a2a88; animation: wip 1.8s infinite; }
@keyframes wip { 70% { box-shadow: 0 0 0 8px #ff8a2a00; } 100% { box-shadow: 0 0 0 0 #ff8a2a00; } }
@media (prefers-reduced-motion: reduce) { [data-skin~="worlds"] .world-wip::before { animation: none; } }
[data-skin~="worlds"] .world p { margin: 0; color: #ddd6cc; overflow: hidden; opacity: 0; max-height: 0; transition: opacity .4s, max-height .6s; }
[data-skin~="worlds"] .world:hover p, [data-skin~="worlds"] .world:focus-visible p { opacity: 1; max-height: 8em; }
[data-skin~="worlds"] .world-go { display: inline-block; margin-top: 14px; font: 600 .74rem Unbounded, sans-serif; letter-spacing: .14em; text-transform: uppercase; border-bottom: 1px solid; }
/* Мир III — чёрный космос, огонь затмения и искры алмазов. */
[data-skin~="worlds"] .world-next .world-bg {
  filter: none;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 78% 12%, #fff, transparent),
    radial-gradient(2px 2px at 88% 64%, #cfe9ff, transparent), radial-gradient(1px 1px at 22% 72%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 56% 86%, #ffe2b8, transparent), radial-gradient(1px 1px at 40% 30%, #fff, transparent),
    radial-gradient(2.5px 2.5px at 68% 40%, #fff, transparent), radial-gradient(1px 1px at 8% 48%, #cfe9ff, transparent),
    radial-gradient(circle at 50% 44%, #ff6a0059, transparent 45%), radial-gradient(circle at 50% 110%, #ff8a2a33, transparent 55%), #030203;
}
[data-skin~="worlds"] .world-next::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(3px 3px at 18% 22%, #fff, transparent), radial-gradient(3px 3px at 82% 30%, #dff3ff, transparent), radial-gradient(2.5px 2.5px at 74% 78%, #fff, transparent);
  animation: twinkle 3.2s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .25; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { [data-skin~="worlds"] .world-next::after { animation: none; } }
[data-skin~="worlds"] .world-signal {
  aspect-ratio: 2 / 3; display: grid; place-items: center; text-align: center; padding: 20px;
  background: repeating-linear-gradient(0deg, #9fe7ff14 0 2px, transparent 2px 6px), #0a1220;
  border: 1px solid #9fe7ff55; color: #9fe7ff; font: 500 .8rem Unbounded, sans-serif; letter-spacing: .2em; text-transform: uppercase;
}
@media (max-width: 860px) {
  [data-skin~="worlds"] .worlds { flex-direction: column; height: auto; }
  [data-skin~="worlds"] .world { min-height: 72svh; border-right: 0; border-bottom: 1px solid #ffffff1f; }
  [data-skin~="worlds"] .world p { opacity: 1; max-height: none; }
  [data-skin~="worlds"] .world-art { top: 38%; width: min(50%, 210px); }
  [data-skin~="worlds"] .world-next { min-height: 100svh; }
  [data-skin~="worlds"] .world-next .world-art { top: 30%; width: min(46%, 190px); }
}
@media (prefers-reduced-motion: reduce) { [data-skin~="worlds"] .world, [data-skin~="worlds"] .world-art { transition: none; } }

[data-skin~="worlds"] .world-strip { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1px; background: #ffffff1f; }
[data-skin~="worlds"] .world-strip > section { background: #0b0c0e; padding: 48px 32px; }
@media (max-width: 860px) { [data-skin~="worlds"] .world-strip { grid-template-columns: 1fr; } [data-skin~="worlds"] .world-strip > section { padding: 36px 16px; } }
[data-skin~="worlds"] .world-strip-one { grid-template-columns: 1fr; }
@media (min-width: 861px) { [data-skin~="worlds"] .world-strip-one .world-start { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 32px; } }
[data-skin~="worlds"] .world-strip h3, [data-skin~="worlds"] .world-pod h3 { font: 800 .78rem Unbounded, sans-serif; letter-spacing: .24em; text-transform: uppercase; margin: 0 0 22px; color: #ffffff90; }
[data-skin~="worlds"] .world-start { display: grid; gap: 12px; }
[data-skin~="worlds"] .world-start a { display: flex; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid #ffffff1f; border-radius: 14px; text-decoration: none; color: inherit; }
[data-skin~="worlds"] .world-start a:hover { border-color: #fff6; }
[data-skin~="worlds"] .world-start span { color: #ffffff90; font-size: .9rem; display: block; }
[data-skin~="worlds"] .world-start em { font: 800 1.6rem Unbounded, sans-serif; font-style: normal; color: #ffffff40; min-width: 2ch; }
[data-skin~="worlds"] .world-prog { margin-bottom: 18px; }
[data-skin~="worlds"] .world-prog b { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; }
[data-skin~="worlds"] .world-bar { height: 6px; background: #ffffff14; border-radius: 6px; margin-top: 6px; overflow: hidden; }
[data-skin~="worlds"] .world-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, #f6d8a8, #e2545c, #9fe7ff); }
[data-skin~="worlds"] .world-pod { padding: 28px 32px; display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; border-top: 1px solid #ffffff1f; background: #0b0c0e; }
@media (max-width: 860px) { [data-skin~="worlds"] .world-pod { padding: 28px 16px; } }
[data-skin~="worlds"] .world-pod h3 { margin-bottom: 6px; }
[data-skin~="worlds"] .world-pod strong { font: 800 clamp(1.2rem, 3vw, 1.8rem) Unbounded, sans-serif; }