/* =========================================================
   EMERGING ZONE — OPTIMIZED CSS
   Consolidated from the current style.css.
   Old v1-v6 override history removed; current visual rules kept.
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    min-height: 100%;
    background: #000;
    color: #ddd;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    min-height: 100vh;
    overflow: hidden;
}

/* =========================================================
   TOP BAR / NAVIGATION
   ========================================================= */

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 72px;
    z-index: 10;
    background: rgba(0, 0, 0, .90);
    border-bottom: 1px solid rgba(255, 88, 20, .38);
    backdrop-filter: blur(4px);
}

.nav {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 42px;
    padding: 0 360px 0 180px;
    transform: translateX(110px);
}

.nav a {
    color: #aaa;
    text-decoration: none;
    letter-spacing: 2px;
    font-size: 15px;
    transition: .2s ease;
}

.nav a:hover,
.nav a.active {
    color: #ff681d;
    text-shadow: 0 0 12px rgba(255, 72, 0, .8);
}

.socials {
    position: absolute;
    top: 0;
    right: 90px;
    height: 72px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.social {
    height: 38px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #aaa;
    text-decoration: none;
    border: 1px solid rgba(255, 92, 28, .28);
    background: rgba(24, 8, 3, .45);
    font-size: 11px;
    letter-spacing: 1.2px;
    transition: .2s ease;
}

.social svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
    flex: 0 0 auto;
}

.social:hover {
    color: #ff7a34;
    border-color: rgba(255, 105, 35, .75);
    background: rgba(67, 18, 4, .58);
    box-shadow: 0 0 14px rgba(255, 74, 0, .16);
}

/* =========================================================
   HOME
   ========================================================= */

.hero {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image {
    display: block;
    width: auto;
    height: 94%;
    max-width: 94vw;
    object-fit: contain;
}

@media (min-aspect-ratio: 19/9) {
    .hero-image {
        height: 96%;
    }
}


@media (max-width: 1250px) {
    .bonus-categories {
        flex-wrap: wrap;
        gap: 10px;
        min-height: 0;
    }

    .bonus-category-list {
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }

    .bonus-info {
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 1050px) {
    .nav {
        justify-content: flex-start;
        padding-left: 24px;
        padding-right: 300px;
        gap: 24px;
    }

    .social span {
        display: none;
    }

    .social {
        width: 38px;
        padding: 0;
        justify-content: center;
    }
}

@media (max-width: 700px) {
    .topbar {
        height: 108px;
    }

    .nav {
        height: 58px;
        padding: 0 12px;
        justify-content: center;
        gap: 15px;
        transform: none;
    }

    .nav a {
        font-size: 11px;
        letter-spacing: 1px;
    }

    .socials {
        top: 58px;
        left: 0;
        right: 0;
        height: 50px;
        justify-content: center;
    }

    .hero {
        top: 108px;
    }
}

/* =========================================================
   LORE — BASE
   ========================================================= */

@font-face {
    font-family: "AmazStalker";
    src: url("fonts/amazstalker.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body.lore-page {
    overflow-x: hidden;
    overflow-y: auto;
    background: #000;
}

.lore-stream {
    position: relative;
    padding-top: 72px;
    background: #000;
}

/* ---------- Intro ---------- */

.lore-intro {
    position: relative;
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}

.lore-intro-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    z-index: 0;
}

.lore-intro::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(
            circle at center,
            rgba(0,0,0,.02) 0%,
            rgba(0,0,0,.15) 48%,
            rgba(0,0,0,.78) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(0,0,0,.16) 0%,
            rgba(0,0,0,.05) 55%,
            rgba(0,0,0,.88) 100%
        );
}

.lore-intro-title {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 32px 28px;
    margin-top: 8vh;
    text-transform: uppercase;
}

body.lore-page .lore-kicker {
    margin-bottom: 10px;
    font-family: "AmazStalker", sans-serif;
    color: #d8d5ce;
    font-size: clamp(34px, 2.9vw, 52px);
    font-weight: normal;
    letter-spacing: .20em;
    -webkit-text-stroke: .8px #1d0b06;
    paint-order: stroke fill;
    text-shadow:
        0 2px 2px #000,
        0 0 7px #000,
        0 0 14px rgba(0,0,0,.9);
}

body.lore-page .lore-intro-title h1 {
    margin: 0;
    font-family: "AmazStalker", sans-serif;
    color: #d8d5ce;
    font-size: clamp(78px, 8.7vw, 145px);
    line-height: .92;
    font-weight: normal;
    letter-spacing: .035em;
    transform: none;
    -webkit-text-stroke: 1.15px #1d0b06;
    paint-order: stroke fill;
    text-shadow:
        0 3px 2px #000,
        0 0 7px #000,
        0 0 18px rgba(0,0,0,.90);
}

body.lore-page .lore-project {
    display: inline-block;
    margin-top: 24px;
    font-family: "AmazStalker", sans-serif;
    color: #d8d5ce;
    font-size: clamp(40px, 4.2vw, 70px);
    line-height: 1;
    font-weight: normal;
    letter-spacing: .14em;
    -webkit-text-fill-color: #d8d5ce;
    -webkit-text-stroke: 1px #1d0b06;
    paint-order: stroke fill;
    text-shadow:
        0 3px 2px #000,
        0 0 7px #000,
        0 0 18px rgba(0,0,0,.90);
}

.lore-divider {
    width: min(420px, 60vw);
    height: 1px;
    margin: 24px auto 18px;
    position: relative;
    transform: translateY(185px);
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 104, 29, .8),
        transparent
    );
}

.lore-divider::after {
    content: "☢";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 12px;
    color: #ff681d;
    background: rgba(0,0,0,.72);
    font-size: 18px;
}

.lore-scroll {
    color: rgba(225,225,225,.65);
    font-size: 10px;
    letter-spacing: .22em;
    transform: translateY(185px);
}

.lore-arrow {
    display: block;
    margin-top: 2px;
    color: #ff681d;
    font-size: 30px;
    line-height: 1;
}

/* ---------- Lore slides ---------- */

body.lore-page .lore-section {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    isolation: isolate;
    background-color: #000;
    background-size: auto 110%;
    background-repeat: no-repeat;
    background-position: center center;
}

body.lore-page .lore-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.82) 0%,
            rgba(0,0,0,.22) 14%,
            rgba(0,0,0,.24) 80%,
            rgba(0,0,0,.88) 100%
        ),
        radial-gradient(
            ellipse at center,
            rgba(0,0,0,.08) 20%,
            rgba(0,0,0,.22) 68%,
            rgba(0,0,0,.72) 100%
        );
}

body.lore-page .lore-section::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -90px;
    height: 180px;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0),
        rgba(0,0,0,.48),
        rgba(0,0,0,0)
    );
    filter: blur(14px);
}

/* Base HTML lore text */
body.lore-page .lore-text {
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    background: none;
    color: #c7c6c0;
    -webkit-text-fill-color: #c7c6c0;
    font-size: clamp(24px, 2.05vw, 38px);
    line-height: 1.32;
    font-weight: 700;
    letter-spacing: .018em;
    text-transform: uppercase;
    -webkit-text-stroke: 1.35px rgba(8,8,8,.98);
    paint-order: stroke fill;
    text-shadow:
        -1px -1px 0 rgba(238,235,225,.22),
         1px  1px 0 rgba(0,0,0,.95),
         2px  2px 0 rgba(0,0,0,.72),
         0  3px 2px rgba(0,0,0,.88),
         0  0 6px rgba(0,0,0,.92),
         0  0 12px rgba(0,0,0,.58);
}

body.lore-page .lore-text p {
    max-width: 1320px;
    margin: 0 auto clamp(34px, 4.5vh, 58px);
}

body.lore-page .lore-text p:last-child {
    margin-bottom: 0;
    letter-spacing: .025em;
}

/* Base typography inherited by every .lore-block inside .lore-panel */
body.lore-page .lore-layout .lore-block {
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    color: #c7c6c0;
    font-size: clamp(19px, 1.55vw, 30px);
    line-height: 1.32;
    font-weight: 700;
    letter-spacing: .012em;
    text-transform: uppercase;
    -webkit-text-stroke: 1px rgba(5,5,5,.98);
    paint-order: stroke fill;
    text-shadow:
        -1px -1px 0 rgba(235,232,220,.14),
         1px  1px 0 rgba(0,0,0,.95),
         0  2px 2px rgba(0,0,0,.88),
         0  0 5px rgba(0,0,0,.90),
         0  0 10px rgba(0,0,0,.55);
}

body.lore-page .lore-layout .lore-block p {
    margin: 0;
}

body.lore-page .lore-date {
    color: #d46d28;
    text-shadow:
        0 1px 1px #000,
        0 0 5px rgba(0,0,0,.95);
}

@media (max-width: 900px) {
    body.lore-page .lore-kicker {
        font-size: clamp(27px, 4vw, 40px);
    }

    body.lore-page .lore-intro-title h1 {
        font-size: clamp(62px, 11vw, 100px);
    }

    body.lore-page .lore-project {
        font-size: clamp(31px, 5.2vw, 48px);
    }

    body.lore-page .lore-text {
        font-size: clamp(22px, 3.6vw, 32px);
        -webkit-text-stroke: 1.1px rgba(8,8,8,.98);
    }
}

@media (max-width: 700px) {
    .lore-stream {
        padding-top: 108px;
    }

    .lore-intro {
        min-height: calc(100vh - 108px);
    }

    .lore-intro-bg {
        object-fit: cover;
    }

    .lore-intro-title {
        margin-top: 0;
    }

    body.lore-page .lore-kicker {
        font-size: clamp(23px, 6vw, 34px);
    }

    body.lore-page .lore-project {
        font-size: clamp(25px, 7vw, 39px);
        letter-spacing: .10em;
    }

    body.lore-page .lore-divider,
    body.lore-page .lore-scroll {
        transform: translateY(110px);
    }

    body.lore-page .lore-text {
        font-family: Arial, Helvetica, sans-serif;
        font-size: clamp(18px, 5.2vw, 26px);
        line-height: 1.34;
        -webkit-text-stroke: .7px rgba(8,8,8,.98);
    }
}


/* =========================================================
   PINEGROW EDITABLE LORE LAYOUT v7
   ---------------------------------------------------------
   Теперь на каждом слайде есть ОДИН настоящий .lore-panel.
   Двигать нужно именно его.

   Основные параметры:
      left / right  — влево / вправо
      top / bottom  — вверх / вниз
      width         — ширина
      height        — высота (если нужна)

   В Pinegrow выбирай DIV с классом lore-panel.
   ========================================================= */
/* Полностью отключаем старую flex-раскладку секций */
body.lore-page .lore-layout {
    display: block !important;
    padding: 0 !important;
}

/* Старые псевдо-рамки больше не нужны */
body.lore-page .lore-slide-1::after,
body.lore-page .lore-slide-2::after,
body.lore-page .lore-slide-3::after,
body.lore-page .lore-slide-4::after,
body.lore-page .lore-slide-5::after,
body.lore-page .lore-slide-6::after,
body.lore-page .lore-slide-8::after,
body.lore-page .lore-slide-10::after,
body.lore-page .lore-slide-13::after,
body.lore-page .lore-slide-15::after {
    display: none !important;
}

/* Один реальный контейнер с текстом */
body.lore-page .lore-layout > .lore-panel {
    position: absolute !important;
    z-index: 3;
    box-sizing: border-box;
    padding: 10px 16px;
    background: linear-gradient(
    90deg,
    rgba(0,0,0,.68) 0%,
    rgba(0,0,0,.48) 82%,
    rgba(0,0,0,.26) 100%
  );
    border-left: 2px solid rgba(220,92,26,.62);
    border-top: 1px solid rgba(255,255,255,.06);
    border-bottom: 1px solid rgba(255,255,255,.06);
    box-shadow: 10px 12px 28px rgba(0,0,0,.22);
}

/* Внутри panel блоки больше НИКУДА сами не позиционируются */
body.lore-page .lore-layout > .lore-panel > .lore-block {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 11px 5px !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: inherit !important;
}

/* Видимое разделение смысловых кусков */
body.lore-page .lore-layout > .lore-panel > .lore-block + .lore-block {
    border-top: 1px solid rgba(220,92,26,.42) !important;
}

/* =========================================================
   ПОЛОЖЕНИЕ КАЖДОГО СЛАЙДА
   Именно эти блоки удобнее всего крутить в Pinegrow.
   ========================================================= */
/* 1 */
body.lore-page .lore-slide-1 > .lore-panel {
    left: 3%;
    top: 22%;
    width: 40%;
    text-align: left;
}

body.lore-page .lore-slide-1 > .lore-panel .lore-block {
    font-size: clamp(25px, 1.18vw, 26px) !important;
    line-height: 1.35 !important;
}

/* 2 */
body.lore-page .lore-slide-2 > .lore-panel {
    left: 3%;
    top: 22%;
    width: 45%;
    text-align: left;
}

body.lore-page .lore-slide-2 > .lore-panel .lore-block {
    font-size: clamp(25px, 1.18vw, 26px) !important;
    line-height: 1.35 !important;
}

/* 3 — широкий нижний блок, центр картинки открыт */
body.lore-page .lore-slide-3 > .lore-panel {
    left: 9%;
    bottom: 4%;
    width: 85%;
    text-align: center;
}

body.lore-page .lore-slide-3 > .lore-panel .lore-block {
    font-size: clamp(25px, 1.18vw, 26px) !important;
    line-height: 1.34 !important;
}

/* 4 */
body.lore-page .lore-slide-4 > .lore-panel {
    right: 4%;
    top: 22%;
    width: 50%;
    text-align: left;
    background: linear-gradient(
    270deg,
    rgba(0,0,0,.69),
    rgba(0,0,0,.47) 82%,
    rgba(0,0,0,.24)
  );
    border-left: 0;
    border-right: 2px solid rgba(220,92,26,.62);
}

body.lore-page .lore-slide-4 > .lore-panel .lore-block {
    font-size: clamp(25px, 1.16vw, 26px) !important;
    line-height: 1.34 !important;
}

/* 5 */
body.lore-page .lore-slide-5 > .lore-panel {
    left: 3%;
    top: 22%;
    width: 45%;
    text-align: left;
}

body.lore-page .lore-slide-5 > .lore-panel .lore-block {
    font-size: clamp(25px, 1.14vw, 26px) !important;
    line-height: 1.34 !important;
}

/* 6 — справа снизу */
body.lore-page .lore-slide-6 > .lore-panel {
    right: 4%;
    bottom: 12%;
    width: 54%;
    text-align: left;
    background: linear-gradient(
    270deg,
    rgba(0,0,0,.70),
    rgba(0,0,0,.46) 82%,
    rgba(0,0,0,.22)
  );
    border-left: 0;
    border-right: 2px solid rgba(220,92,26,.58);
}

body.lore-page .lore-slide-6 > .lore-panel .lore-block {
    font-size: clamp(25px, 1.10vw, 26px) !important;
    line-height: 1.34 !important;
}

/* 7 — верх + низ внутри одного высокого контейнера */
body.lore-page .lore-slide-7 > .lore-panel {
    left: 11%;
    top: 5%;
    width: 78%;
    height: 88%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.lore-page .lore-slide-7 > .lore-panel > .lore-block {
    background: rgba(0,0,0,.28) !important;
    border-bottom: 1px solid rgba(220,92,26,.38) !important;
}

/* 8 — справа */
body.lore-page .lore-slide-8 > .lore-panel {
    right: 3%;
    top: 22%;
    width: 45%;
    text-align: left;
    background: linear-gradient(
    270deg,
    rgba(0,0,0,.69),
    rgba(0,0,0,.47) 82%,
    rgba(0,0,0,.24)
  );
    border-left: 0;
    border-right: 2px solid rgba(220,92,26,.60);
}

body.lore-page .lore-slide-8 > .lore-panel .lore-block {
    font-size: clamp(25px, 1.08vw, 26px) !important;
    line-height: 1.34 !important;
}

/* 9 — оставить верх/низ */
body.lore-page .lore-slide-9 > .lore-panel {
    left: 11%;
    top: 5%;
    width: 78%;
    height: 88%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.lore-page .lore-slide-9 > .lore-panel > .lore-block {
    background: rgba(0,0,0,.28) !important;
    border-bottom: 1px solid rgba(220,92,26,.38) !important;
}

/* 10 — узкая центральная колонка */
body.lore-page .lore-slide-10 > .lore-panel {
    left: 34.5%;
    top: 25%;
    width: 38%;
    height: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    text-align: center;
    background: linear-gradient(
    180deg,
    rgba(0,0,0,.57),
    rgba(0,0,0,.39),
    rgba(0,0,0,.57)
  );
    border: 1px solid rgba(220,92,26,.38);
}

body.lore-page .lore-slide-10 > .lore-panel .lore-block {
    font-size: clamp(23px, 1.02vw, 24px) !important;
    line-height: 1.38 !important;
}

/* 11 — оставить верх/низ */
body.lore-page .lore-slide-11 > .lore-panel {
    left: 12%;
    top: 5%;
    width: 76%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.lore-page .lore-slide-11 > .lore-panel > .lore-block {
    background: rgba(0,0,0,.27) !important;
    border-bottom: 1px solid rgba(220,92,26,.35) !important;
}

/* 12 — оставить верх/низ */
body.lore-page .lore-slide-12 > .lore-panel {
    left: 10%;
    top: 4%;
    width: 80%;
    height: 91%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.lore-page .lore-slide-12 > .lore-panel > .lore-block {
    background: rgba(0,0,0,.27) !important;
    border-bottom: 1px solid rgba(220,92,26,.35) !important;
}

/* 13 — слева снизу */
body.lore-page .lore-slide-13 > .lore-panel {
    left: 3%;
    bottom: 15%;
    width: 59%;
    text-align: left;
}

body.lore-page .lore-slide-13 > .lore-panel .lore-block {
    font-size: clamp(25px, 1.08vw, 26px) !important;
    line-height: 1.34 !important;
}

/* 14 — оставить верх/низ */
body.lore-page .lore-slide-14 > .lore-panel {
    left: 12%;
    top: 5%;
    width: 76%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.lore-page .lore-slide-14 > .lore-panel > .lore-block {
    background: rgba(0,0,0,.27) !important;
    border-bottom: 1px solid rgba(220,92,26,.35) !important;
}

/* 15 — одна нижняя рамка */
body.lore-page .lore-slide-15 > .lore-panel {
    left: 9%;
    bottom: 4%;
    width: 82%;
    text-align: center;
    background: linear-gradient(
    180deg,
    rgba(0,0,0,.30),
    rgba(0,0,0,.64)
  );
    border-left: 0;
    border-top: 1px solid rgba(220,92,26,.44);
}

body.lore-page .lore-slide-15 > .lore-panel .lore-block {
    font-size: clamp(25px, 1.10vw, 26px) !important;
    line-height: 1.34 !important;
}

body.lore-page .lore-slide-16 > .lore-panel {
    left: 12%;
    top: 5%;
    width: 76%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.lore-page .lore-slide-16 > .lore-panel > .lore-block {
    background: rgba(0,0,0,.27) !important;
    border-bottom: 1px solid rgba(220,92,26,.35) !important;
}

/* 16 — финал */
body.lore-page .lore-slide-99 > .lore-panel {
    left: 3%;
    top: 15%;
    width: 50%;
    text-align: left;
}

body.lore-page .lore-slide-99 > .lore-panel .lore-block {
    font-size: clamp(40px, 1.10vw, 45px) !important;
    line-height: 1.34 !important;
}

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 900px) {
    body.lore-page .lore-layout > .lore-panel {
        left: 5% !important;
        right: auto !important;
        top: 8% !important;
        bottom: auto !important;
        width: 90% !important;
        height: auto !important;
        display: block !important;
        text-align: center !important;
        background: rgba(0,0,0,.50) !important;
        border-left: 1px solid rgba(220,92,26,.45) !important;
        border-right: 1px solid rgba(220,92,26,.45) !important;
    }

    body.lore-page .lore-layout > .lore-panel > .lore-block {
        font-size: clamp(16px, 2.8vw, 24px) !important;
        text-align: center !important;
    }
}


/* === SLIDE 17 — ЭВАКУАЦИЯ НАУЧНОЙ БАЗЫ === */
body.lore-page .lore-slide-17 > .lore-panel {
    left: 4%;
    top: 30%;
    transform: translateY(-50%) !important;

    width: 40%;
    max-width: 40%;
    text-align: left;

    background: linear-gradient(
        270deg,
        rgba(0,0,0,.72),
        rgba(0,0,0,.48) 82%,
        rgba(0,0,0,.20)
    );

    border-right: 0;
    border-left: 2px solid rgba(220,92,26,.62);
}

body.lore-page .lore-slide-17 > .lore-panel .lore-block {
    font-size: clamp(24px, 1.3vw, 26px) !important;
    line-height: 1.35 !important;
}

/* Разделитель между двумя смысловыми частями */
body.lore-page .lore-slide-17 > .lore-panel .lore-block + .lore-block {
    margin-top: 10px !important;
    padding-top: 20px !important;
    border-top: 1px solid rgba(220,92,26,.55) !important;
}

/* 18 — оставить верх/низ */
body.lore-page .lore-slide-18 > .lore-panel {
    left: 12%;
    top: 5%;
    width: 76%;
    height: 90%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.lore-page .lore-slide-18 > .lore-panel > .lore-block {
    background: rgba(0,0,0,.27) !important;
    border-bottom: 1px solid rgba(220,92,26,.35) !important;
}

/* =========================================================
   СЛАЙД 19
   1 блок — слева сверху
   2 блок — справа снизу
   ========================================================= */

body.lore-page .lore-slide-19 > .lore-panel {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    max-width: none !important;
    height: 100% !important;

    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;

    transform: none !important;
}


/* ПЕРВЫЙ ТЕКСТ — СЛЕВА СВЕРХ */

body.lore-page .lore-slide-19 > .lore-panel > .pos-left {
    position: absolute !important;

    left: 4% !important;
    top: 12% !important;

    width: 38% !important;
    max-width: 38% !important;

    padding: 14px 18px !important;

    text-align: left !important;

    background: linear-gradient(
        90deg,
        rgba(0,0,0,.70),
        rgba(0,0,0,.45) 80%,
        rgba(0,0,0,.15)
    ) !important;

    border-left: 2px solid rgba(220,92,26,.62) !important;
}


/* ВТОРОЙ ТЕКСТ — СПРАВА СНИЗУ */

body.lore-page .lore-slide-19 > .lore-panel > .pos-right {
    position: absolute !important;

    right: 4% !important;
    left: auto !important;

    bottom: 10% !important;
    top: auto !important;

    width: 38% !important;
    max-width: 38% !important;

    padding: 14px 18px !important;

    text-align: right !important;

    background: linear-gradient(
        270deg,
        rgba(0,0,0,.70),
        rgba(0,0,0,.45) 80%,
        rgba(0,0,0,.15)
    ) !important;

    border-right: 2px solid rgba(220,92,26,.62) !important;
}


/* Размер текста */

body.lore-page .lore-slide-19 > .lore-panel > .lore-block {
    font-size: clamp(25px, 1.3vw, 26px) !important;
    line-height: 1.35 !important;
}


/* =========================================================
   RULES PAGE
   ========================================================= */

body.rules-page {
    height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at center,
            #151515 0%,
            #080808 65%,
            #000 100%
        );
}


/* =========================================================
   ОБЛАСТЬ ПОД ШАПКОЙ
   ========================================================= */

.rules-stage {
    position: absolute;

    left: 0;
    right: 0;
    top: 72px;
    bottom: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    /* Минимальные отступы, чтобы КПК почти касался границ */
    padding: 2px 4px;
}


/* =========================================================
   КПК

   Чуть растянут по ширине и высоте относительно исходника.
   Верхняя часть почти касается верхнего края рабочей области.
   ========================================================= */

.rules-pda {
    position: relative;

    /*
       Немного увеличиваем КПК по горизонтали и вертикали.
       Пропорции намеренно чуть растянуты.
    */
    width: min(85vw, 1680px);
    height: min(calc(100vh - 74px), 1090px);

    flex: 0 0 auto;

    transform: scaleY(1.05);

}


/* картинка корпуса */

.rules-pda-image {
    display: block;

    width: 100%;
    height: 100%;

    /*
       Намеренно растягиваем под размеры контейнера,
       чтобы КПК был немного шире и выше.
    */
    object-fit: fill;

    user-select: none;
    pointer-events: none;
}


/* =========================================================
   ЛЕВОЕ МЕНЮ
   Отдельный скролл, можно делать 17+ пунктов
   ========================================================= */

.rules-menu {
    position: absolute;

    left: 11.1%;
    top: 20.6%;

    width: 17.5%;
    height: 64.2%;

    display: flex;
    flex-direction: column;

    padding: 1.1% .8%;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(213,102,37,.65)
        rgba(255,255,255,.025);
}

.rules-menu::-webkit-scrollbar {
    width: 5px;
}

.rules-menu::-webkit-scrollbar-track {
    background: rgba(255,255,255,.025);
}

.rules-menu::-webkit-scrollbar-thumb {
    background: rgba(213,102,37,.55);
    border-radius: 4px;
}

.rules-menu::-webkit-scrollbar-thumb:hover {
    background: rgba(229,117,52,.8);
}


/* =========================================================
   КНОПКИ КАТЕГОРИЙ
   ========================================================= */

.rules-menu-item {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: 52px;
    flex: 0 0 auto;

    padding: 12px 16px;

    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.07);

    background: transparent;

    color: #a7aaac;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    font-size: clamp(12px, .95vw, 15px);
    font-weight: 700;
    letter-spacing: .035em;
    text-align: left;

    cursor: pointer;

    transition:
        color .16s ease,
        background .16s ease,
        box-shadow .16s ease;
}

.rules-menu-item:hover {
    color: #ddd;
    background: rgba(255,255,255,.035);
}

.rules-menu-item.active {
    color: #e9883e;

    background:
        linear-gradient(
            90deg,
            rgba(196,82,20,.20),
            rgba(196,82,20,.04)
        );

    box-shadow:
        inset 3px 0 0 #d66f2b;
}

.rules-menu-item:focus-visible {
    outline: 1px solid rgba(226,105,36,.55);
    outline-offset: -1px;
}


/* =========================================================
   ПРАВАЯ ОБЛАСТЬ ПРАВИЛ
   Скроллится отдельно от меню
   ========================================================= */

.rules-scroll {
    position: absolute;

    left: 29.2%;
    top: 20.6%;

    width: 59.1%;
    height: 64.2%;

    overflow-y: auto;
    overflow-x: hidden;

    padding:
        2.2%
        2.8%
        4%
        2.6%;

    color: #bfc1c2;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Arial,
        sans-serif;

    scrollbar-width: thin;
    scrollbar-color:
        rgba(213,102,37,.65)
        rgba(255,255,255,.035);
}

.rules-scroll::-webkit-scrollbar {
    width: 6px;
}

.rules-scroll::-webkit-scrollbar-track {
    background: rgba(255,255,255,.025);
}

.rules-scroll::-webkit-scrollbar-thumb {
    background: rgba(213,102,37,.58);
    border-radius: 4px;
}

.rules-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(229,117,52,.82);
}


/* =========================================================
   РАЗДЕЛЫ
   Одновременно виден только выбранный раздел
   ========================================================= */

.rules-section {
    display: none;
    padding-bottom: 40px;
}

.rules-section.active {
    display: block;
}

.rules-section h1 {
    margin: 0 0 26px;
    padding-bottom: 14px;

    color: #d0d1d1;

    font-size: clamp(25px, 2.05vw, 38px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: .025em;
    text-transform: uppercase;

    border-bottom: 1px solid rgba(255,255,255,.24);

    text-shadow:
        0 2px 2px #000,
        0 0 7px rgba(0,0,0,.9);
}


/* =========================================================
   ОТДЕЛЬНОЕ ПРАВИЛО
   ========================================================= */

.rule {
    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr);

    gap: 16px;

    margin-bottom: 25px;
}

.rule-number {
    padding-top: 1px;

    color: #d97636;

    font-size: clamp(18px, 1.3vw, 24px);
    line-height: 1.4;
    font-weight: 800;

    text-shadow:
        0 2px 2px rgba(0,0,0,.9);
}

.rule p {
    margin: 0;

    color: #b8babb;

    font-size: clamp(16px, 1.14vw, 21px);
    line-height: 1.45;
    font-weight: 500;
    letter-spacing: .015em;

    text-shadow:
        0 1px 2px #000;
}

.rule strong {
    color: #dedede;
}

.rule a {
    color: #da7d40;
    text-decoration: none;
}

.rule a:hover {
    text-decoration: underline;
}


/* =========================================================
   НИЗКИЕ ЭКРАНЫ
   ========================================================= */

@media (max-height: 760px) {

    .rules-pda {
        width: min(98vw, 1540px);
        height: calc(100vh - 74px);
        transform: scaleY(1.10);
    }

    .rules-menu-item {
        min-height: 42px;
        padding: 8px 12px;
    }

    .rule {
        margin-bottom: 18px;
    }
}


/* =========================================================
   МОБИЛЬНЫЙ РЕЖИМ
   ========================================================= */

@media (max-width: 900px) {

    body.rules-page {
        overflow: auto;
    }

    .rules-stage {
        top: 108px;

        justify-content: flex-start;

        overflow-x: auto;
        overflow-y: hidden;

        padding: 6px 0;
    }

    .rules-pda {
        width: 1050px;
        min-width: 1050px;
        height: 700px;

        margin: 0 20px;

        transform: scaleY(1.10);
    }
}

/* =========================================================
   BONUSES PAGE
   ========================================================= */

body.bonuses-page {
    height: 100vh;
    overflow: hidden;
    background: #000;
}

.bonuses-stage {
    position: fixed;
    top: 72px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: #000;
}

/* Тот же фон, что и на главной */
.bonuses-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    pointer-events: none;
    user-select: none;
}

/* Незначительно приглушаем фон страницы, но не прячем его */
.bonuses-vignette {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at center, rgba(0,0,0,.08) 0%, rgba(0,0,0,.20) 55%, rgba(0,0,0,.55) 100%),
        linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.10) 55%, rgba(0,0,0,.38));
}

/* Общая рабочая область */
.bonuses-shell {
    position: absolute;
    z-index: 2;
    left: 4.5%;
    right: 4.5%;
    top: 4.5%;
    bottom: 4.5%;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Категории можно дополнять новыми кнопками без изменения сетки */
.bonus-categories {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 22px;
    min-height: 88px;
    margin-bottom: 10px;
    padding: 10px 14px;
    background: rgba(3, 7, 9, .82);
    border: 1px solid rgba(213, 102, 37, .28);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .42);
    backdrop-filter: blur(5px);
}

.bonus-category-list {
    display: flex;
    flex: 0 1 47%;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    gap: 8px;
    min-width: 440px;
}

.bonus-info {
    display: flex;
    flex: 0 1 49%;
    align-items: center;
    gap: 14px;
    min-width: 0;
    margin-left: auto;
    padding: 10px 18px 10px 22px;
    border-left: 2px solid rgba(225, 108, 40, .75);
    background: linear-gradient(
        90deg,
        rgba(104, 43, 13, .22),
        rgba(20, 15, 12, .08) 78%,
        transparent 100%
    );
}

.bonus-info-icon {
    flex: 0 0 auto;
    color: #e9823c;
    font-size: 31px;
    line-height: 1;
    text-shadow: 0 0 10px rgba(225, 108, 40, .35);
}

.bonus-info-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
}

.bonus-info-text strong {
    color: #e9823c;
    font-size: 13px;
    letter-spacing: .11em;
}

.bonus-info-text span {
    color: #c5c7c8;
    font-size: clamp(13px, .82vw, 16px);
    line-height: 1.34;
}

.bonus-info-text b {
    color: #e3e3e3;
    font-weight: 700;
}

.bonus-category {
    min-height: 42px;
    padding: 0 24px;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(13, 20, 24, .88);
    color: #aeb3b5;
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    font-size: clamp(13px, .9vw, 17px);
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    cursor: pointer;
    transition: .16s ease;
}

.bonus-category:hover {
    color: #e5e5e5;
    border-color: rgba(213, 102, 37, .45);
    background: rgba(30, 24, 20, .92);
}

.bonus-category.active {
    color: #ef8a43;
    border-color: rgba(225, 108, 40, .78);
    background: linear-gradient(180deg, rgba(76,31,10,.80), rgba(27,17,12,.94));
    box-shadow: inset 0 -2px 0 #d76e2c, 0 0 14px rgba(210,83,18,.16);
}

.bonus-content {
    flex: 1 1 auto;
    min-height: 0;
    background: rgba(3, 8, 11, .37);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 16px 45px rgba(0,0,0,.62);
    backdrop-filter: blur(4px);
    overflow: hidden;
}

.bonus-table-section {
    display: none;
    width: 100%;
    height: 100%;
}

.bonus-table-section.active {
    display: block;
}

.bonus-table-wrap {
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(213,102,37,.65) rgba(255,255,255,.035);
}

.bonus-table-wrap::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.bonus-table-wrap::-webkit-scrollbar-track {
    background: rgba(255,255,255,.025);
}

.bonus-table-wrap::-webkit-scrollbar-thumb {
    background: rgba(213,102,37,.58);
    border-radius: 4px;
}

.bonus-table {
    width: 100%;
    min-width: 1180px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    color: #c2c5c6;
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
}

.bonus-table thead {
    position: sticky;
    top: 0;
    z-index: 5;
}

.bonus-table th {
    padding: 15px 14px;
    background: rgba(11, 18, 22, .98);
    color: #d5d7d8;
    border-right: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(213,102,37,.38);
    font-size: clamp(13px, .86vw, 16px);
    font-weight: 800;
    letter-spacing: .055em;
    text-transform: uppercase;
    text-align: left;
}

.bonus-table td {
    padding: 13px 14px;
    vertical-align: top;
    background: rgba(5, 11, 14, .80);
    border-right: 1px solid rgba(255,255,255,.055);
    border-bottom: 1px solid rgba(255,255,255,.07);
    font-size: clamp(14px, .87vw, 17px);
    line-height: 1.42;
    overflow-wrap: anywhere;
}

.bonus-table tbody tr:nth-child(even) td {
    background: rgba(8, 15, 18, .84);
}

.bonus-table tbody tr:hover td {
    background: rgba(35, 24, 17, .72);
    transition:
        background .16s ease,
        box-shadow .16s ease;
}

/*
   Подсветка выбранной позиции:
   слева — яркая вертикальная линия,
   сверху и снизу — линии, которые постепенно затухают вправо.
   Сделано по отдельным ячейкам, чтобы не менять HTML таблицы.
*/
.bonus-table tbody tr:hover td:nth-child(1) {
    box-shadow:
        inset 2px 0 0 rgba(225, 108, 40, .95),
        inset 0 1px 0 rgba(225, 108, 40, .90),
        inset 0 -1px 0 rgba(225, 108, 40, .90),
        inset 10px 0 18px -18px rgba(225, 108, 40, .95);
}

.bonus-table tbody tr:hover td:nth-child(2) {
    box-shadow:
        inset 0 1px 0 rgba(225, 108, 40, .72),
        inset 0 -1px 0 rgba(225, 108, 40, .72);
}

.bonus-table tbody tr:hover td:nth-child(3) {
    box-shadow:
        inset 0 1px 0 rgba(225, 108, 40, .48),
        inset 0 -1px 0 rgba(225, 108, 40, .48);
}

.bonus-table tbody tr:hover td:nth-child(4) {
    box-shadow:
        inset 0 1px 0 rgba(225, 108, 40, .22),
        inset 0 -1px 0 rgba(225, 108, 40, .22);
}

.bonus-table tbody tr:hover td:nth-child(5) {
    box-shadow:
        inset 0 1px 0 rgba(225, 108, 40, .05),
        inset 0 -1px 0 rgba(225, 108, 40, .05);
}

.bonus-table th:nth-child(1),
.bonus-table td:nth-child(1) {
    width: 7%;
    text-align: center;
}

.bonus-table th:nth-child(2),
.bonus-table td:nth-child(2) {
    width: 20%;
}

.bonus-table th:nth-child(3),
.bonus-table td:nth-child(3) {
    width: 27%;
}

.bonus-table th:nth-child(4),
.bonus-table td:nth-child(4) {
    width: 36%;
}

.bonus-table th:nth-child(5),
.bonus-table td:nth-child(5) {
    width: 10%;
    text-align: center;
}

.bonus-code {
    color: #899194;
    font-weight: 700;
    letter-spacing: .04em;
}

.bonus-name {
    color: #e07b39;
    font-weight: 800;
}

.bonus-price {
    color: #ee8a43;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 1050px) {
    .bonuses-shell {
        left: 2.5%;
        right: 2.5%;
    }

    .bonus-category {
        padding: 0 16px;
    }
}

@media (max-width: 700px) {
    .bonuses-stage {
        top: 108px;
    }

    .bonuses-shell {
        left: 10px;
        right: 10px;
        top: 10px;
        bottom: 10px;
    }

    .bonus-categories {
        flex-wrap: wrap;
        overflow: visible;
    }

    .bonus-category-list {
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .bonus-info {
        width: 100%;
        margin-left: 0;
        padding: 9px 11px;
    }

    .bonus-info-icon {
        font-size: 24px;
    }

    .bonus-info-text span {
        font-size: 11px;
    }

    .bonus-category {
        flex: 0 0 auto;
        min-height: 38px;
        padding: 0 14px;
        font-size: 12px;
    }

    .bonus-table {
        min-width: 980px;
    }
}

/* Состояние пустого/недоступного bonuses.json */
.bonus-data-message {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: #c5c7c8;
    font-family: "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    font-size: 16px;
    text-align: center;
}

.bonus-data-error {
    color: #e9823c;
}

/* =========================================================
   GLOBAL MOBILE LANDSCAPE MODE
   Работает на любой странице, подключающей этот style.css.
   Дополнительный HTML не требуется.
   ========================================================= */

@media (max-width: 900px) and (orientation: portrait) {
    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden !important;
        background: #030303 !important;
    }

    body > * {
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body::before {
        content:
            "↻\A\A"
            "ПОВЕРНИТЕ УСТРОЙСТВО\A"
            "Для корректного отображения сайта используйте альбомную ориентацию.";

        position: fixed;
        inset: 0;
        z-index: 2147483647;

        display: flex;
        align-items: center;
        justify-content: center;

        box-sizing: border-box;
        padding: 28px 34px;

        visibility: visible !important;
        pointer-events: auto !important;

        background:
            radial-gradient(
                circle at center,
                rgba(92, 35, 10, .24) 0%,
                rgba(20, 10, 5, .10) 38%,
                rgba(3, 3, 3, .97) 74%
            ),
            #030303;

        color: #d0d0d0;

        font-family:
            "Arial Narrow",
            "Roboto Condensed",
            Arial,
            sans-serif;

        font-size: 15px;
        font-weight: 400;
        line-height: 1.55;
        letter-spacing: .02em;
        text-align: center;
        white-space: pre-line;

        text-shadow:
            0 0 12px rgba(0, 0, 0, .95),
            0 0 24px rgba(225, 108, 40, .18);
    }

    body::after {
        content: "";

        position: fixed;
        left: 50%;
        top: calc(50% - 25px);
        z-index: 2147483647;

        width: min(78vw, 390px);
        height: 1px;

        visibility: visible !important;
        pointer-events: none !important;

        transform: translateX(-50%);

        background: linear-gradient(
            90deg,
            transparent,
            rgba(225, 108, 40, .65) 22%,
            rgba(225, 108, 40, .65) 78%,
            transparent
        );

        box-shadow: 0 0 12px rgba(225, 108, 40, .22);
    }
}

/* =========================================================
   EMERGING ZONE — RESPONSIVE PACK
   ---------------------------------------------------------
   Основные режимы:
   1500px и меньше   — ноутбуки / небольшие мониторы
   1200px и меньше   — планшеты / компактные окна
   max-height 500px  — телефоны в LANDSCAPE
   max-height 400px  — очень низкие телефоны в LANDSCAPE

   Этот блок намеренно расположен В САМОМ КОНЦЕ CSS,
   чтобы перекрывать старые мобильные правила.
   ========================================================= */


/* =========================================================
   1. НЕБОЛЬШИЕ МОНИТОРЫ / НОУТБУКИ
   ========================================================= */

@media (max-width: 1500px) and (min-height: 501px) {
    .nav {
        gap: 30px;
        padding-left: 130px;
        padding-right: 300px;
        transform: translateX(70px);
    }

    .socials {
        right: 42px;
    }

    .rules-pda {
        width: min(92vw, 1540px);
    }

    .bonuses-shell {
        left: 3%;
        right: 3%;
        top: 3%;
        bottom: 3%;
    }
}


/* =========================================================
   2. ПЛАНШЕТЫ / КОМПАКТНЫЕ ОКНА
   ========================================================= */

@media (max-width: 1200px) and (min-height: 501px) {
    .topbar {
        height: 64px;
    }

    .nav {
        height: 64px;
        justify-content: flex-start;
        gap: 20px;
        padding: 0 190px 0 18px;
        transform: none;
    }

    .nav a {
        font-size: 13px;
        letter-spacing: 1.4px;
    }

    .socials {
        right: 16px;
        height: 64px;
        gap: 6px;
    }

    .social {
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
    }

    .social span {
        display: none;
    }

    .hero {
        top: 64px;
    }

    .hero-image {
        max-width: 98vw;
        height: 96%;
    }

    /* LORE */
    .lore-stream {
        padding-top: 64px;
    }

    .lore-intro {
        min-height: calc(100vh - 64px);
        min-height: calc(100svh - 64px);
    }

    body.lore-page .lore-layout > .lore-panel {
        max-width: 94vw;
    }

    /* RULES */
    .rules-stage {
        top: 64px;
        padding: 2px;
    }

    .rules-pda {
        width: 98vw;
        height: calc(100vh - 66px);
        height: calc(100svh - 66px);
        transform: scaleY(1.02);
    }

    .rules-menu-item {
        min-height: 44px;
        padding: 9px 11px;
        font-size: clamp(11px, 1.15vw, 14px);
    }

    .rules-scroll {
        padding: 2% 2.4% 3% 2.3%;
    }

    .rules-section h1 {
        margin-bottom: 18px;
        padding-bottom: 10px;
        font-size: clamp(21px, 2.3vw, 31px);
    }

    .rule {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: 12px;
        margin-bottom: 19px;
    }

    .rule-number {
        font-size: clamp(16px, 1.6vw, 21px);
    }

    .rule p {
        font-size: clamp(14px, 1.45vw, 18px);
    }

    /* BONUSES */
    .bonuses-stage {
        top: 64px;
    }

    .bonuses-shell {
        left: 12px;
        right: 12px;
        top: 12px;
        bottom: 12px;
    }

    .bonus-categories {
        min-height: 0;
        gap: 10px;
        padding: 8px 10px;
    }

    .bonus-category-list {
        min-width: 0;
    }

    .bonus-info {
        padding: 8px 12px 8px 16px;
    }

    .bonus-info-icon {
        font-size: 26px;
    }

    .bonus-info-text span {
        font-size: 12px;
    }

    .bonus-table {
        min-width: 1000px;
    }
}


/* =========================================================
   3. ТЕЛЕФОНЫ — LANDSCAPE
   Главный критерий здесь ВЫСОТА, а не ширина.
   ========================================================= */

@media (orientation: landscape) and (max-height: 500px) {

    html,
    body {
        min-height: 100%;
    }

    /* ---------- HEADER ---------- */

    .topbar {
        height: 46px;
        backdrop-filter: blur(4px);
    }

    .nav {
        height: 46px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        gap: clamp(8px, 1.7vw, 16px);
        padding: 0 112px 0 9px;
        transform: none;
        overflow: hidden;
    }

    .nav a {
        flex: 0 0 auto;
        font-size: clamp(9px, 1.45vw, 11px);
        letter-spacing: .7px;
        white-space: nowrap;
    }

    .socials {
        top: 0;
        left: auto;
        right: 6px;
        height: 46px;
        gap: 4px;
        justify-content: flex-end;
    }

    .social {
        width: 28px;
        height: 28px;
        padding: 0;
        justify-content: center;
        border-color: rgba(255, 92, 28, .22);
    }

    .social span {
        display: none;
    }

    .social svg {
        width: 15px;
        height: 15px;
    }


    /* ---------- HOME ---------- */

    .hero {
        top: 46px;
    }

    .hero-image {
        width: auto;
        height: 100%;
        max-width: 100vw;
        max-height: 100%;
        object-fit: contain;
    }


    /* ---------- LORE ---------- */

    body.lore-page {
        overflow-x: hidden;
        overflow-y: auto;
    }

    .lore-stream {
        padding-top: 46px;
    }

    .lore-intro {
        min-height: calc(100vh - 46px);
        min-height: calc(100svh - 46px);
    }

    .lore-intro-bg {
        object-fit: contain;
    }

    .lore-intro-title {
        margin-top: 0;
        padding: 10px 16px;
    }

    body.lore-page .lore-kicker {
        margin-bottom: 4px;
        font-size: clamp(18px, 3.2vw, 28px);
        letter-spacing: .14em;
        -webkit-text-stroke: .55px #1d0b06;
    }

    body.lore-page .lore-intro-title h1 {
        font-size: clamp(45px, 8.8vw, 78px);
        line-height: .88;
        -webkit-text-stroke: .8px #1d0b06;
    }

    body.lore-page .lore-project {
        margin-top: 9px;
        font-size: clamp(24px, 4.6vw, 40px);
        letter-spacing: .10em;
        -webkit-text-stroke: .65px #1d0b06;
    }

    body.lore-page .lore-divider {
        width: min(300px, 48vw);
        margin: 10px auto 7px;
        transform: translateY(18px);
    }

    body.lore-page .lore-scroll {
        font-size: 8px;
        transform: translateY(18px);
    }

    .lore-arrow {
        font-size: 20px;
    }

    body.lore-page .lore-section {
        min-height: calc(100vh - 46px);
        min-height: calc(100svh - 46px);
        background-size: cover;
        background-position: center center;
    }

    /*
       Все обычные lore-панели в телефонном landscape
       превращаются в компактное читаемое окно.
       Это также перекрывает индивидуальные координаты слайдов.
    */
    body.lore-page .lore-layout > .lore-panel {
        left: 3% !important;
        right: auto !important;
        top: 5% !important;
        bottom: auto !important;

        width: 94% !important;
        max-width: 94% !important;
        height: auto !important;
        max-height: 90% !important;

        display: block !important;

        padding: 5px 8px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        transform: none !important;

        text-align: left !important;

        background: rgba(0, 0, 0, .58) !important;
        border: 1px solid rgba(220, 92, 26, .38) !important;
        border-left: 2px solid rgba(220, 92, 26, .62) !important;
        box-shadow: 7px 8px 20px rgba(0, 0, 0, .20) !important;
    }

    body.lore-page .lore-layout > .lore-panel > .lore-block,
    body.lore-page .lore-slide-1 > .lore-panel .lore-block,
    body.lore-page .lore-slide-2 > .lore-panel .lore-block,
    body.lore-page .lore-slide-3 > .lore-panel .lore-block,
    body.lore-page .lore-slide-4 > .lore-panel .lore-block,
    body.lore-page .lore-slide-5 > .lore-panel .lore-block,
    body.lore-page .lore-slide-6 > .lore-panel .lore-block,
    body.lore-page .lore-slide-8 > .lore-panel .lore-block,
    body.lore-page .lore-slide-10 > .lore-panel .lore-block,
    body.lore-page .lore-slide-13 > .lore-panel .lore-block,
    body.lore-page .lore-slide-15 > .lore-panel .lore-block,
    body.lore-page .lore-slide-17 > .lore-panel .lore-block,
    body.lore-page .lore-slide-99 > .lore-panel .lore-block {
        padding: 5px 4px !important;
        font-size: clamp(10px, 1.65vw, 13px) !important;
        line-height: 1.27 !important;
        -webkit-text-stroke: .35px rgba(5, 5, 5, .98) !important;
    }

    body.lore-page .lore-layout > .lore-panel > .lore-block + .lore-block {
        margin-top: 0 !important;
        padding-top: 6px !important;
    }

    /* Слайд 19 имеет две независимые позиции — сохраняем композицию. */
    body.lore-page .lore-slide-19 > .lore-panel {
        inset: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        padding: 0 !important;
        overflow: visible !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.lore-page .lore-slide-19 > .lore-panel > .pos-left,
    body.lore-page .lore-slide-19 > .lore-panel > .pos-right {
        position: absolute !important;
        top: 7% !important;
        bottom: auto !important;
        width: 46% !important;
        max-width: 46% !important;
        max-height: 86% !important;
        overflow-y: auto !important;
        padding: 7px 9px !important;
        font-size: clamp(10px, 1.55vw, 12px) !important;
        line-height: 1.28 !important;
        text-align: left !important;
        background: rgba(0, 0, 0, .60) !important;
    }

    body.lore-page .lore-slide-19 > .lore-panel > .pos-left {
        left: 2% !important;
        right: auto !important;
        border-left: 2px solid rgba(220, 92, 26, .62) !important;
        border-right: 0 !important;
    }

    body.lore-page .lore-slide-19 > .lore-panel > .pos-right {
        left: auto !important;
        right: 2% !important;
        border-left: 0 !important;
        border-right: 2px solid rgba(220, 92, 26, .62) !important;
    }


    /* ---------- RULES ---------- */

    body.rules-page {
        height: 100vh;
        height: 100svh;
        overflow: hidden !important;
    }

    .rules-stage {
        top: 46px;
        bottom: 0;
        justify-content: center;
        overflow: hidden;
        padding: 1px 3px;
    }

    .rules-pda {
        width: calc(100vw - 6px);
        min-width: 0;
        max-width: none;

        height: calc(100vh - 48px);
        height: calc(100svh - 48px);

        margin: 0;

        transform: none;
    }

    .rules-pda-image {
        object-fit: fill;
    }

    .rules-menu {
        padding: .7% .55%;
        scrollbar-width: none;
    }

    .rules-menu::-webkit-scrollbar {
        width: 0;
    }

    .rules-menu-item {
        min-height: 24px;
        padding: 4px 5px;
        font-size: clamp(7.5px, 1.18vw, 10px);
        line-height: 1.13;
        letter-spacing: .01em;
    }

    .rules-scroll {
        padding: 1.6% 2% 2.4% 2%;
        scrollbar-width: thin;
    }

    .rules-scroll::-webkit-scrollbar {
        width: 3px;
    }

    .rules-section {
        padding-bottom: 12px;
    }

    .rules-section h1 {
        margin: 0 0 8px;
        padding-bottom: 5px;
        font-size: clamp(13px, 2vw, 18px);
        line-height: 1.05;
    }

    .rule {
        grid-template-columns: 28px minmax(0, 1fr);
        gap: 6px;
        margin-bottom: 8px;
    }

    .rule-number {
        font-size: clamp(9px, 1.45vw, 12px);
        line-height: 1.28;
    }

    .rule p {
        font-size: clamp(8px, 1.32vw, 11px);
        line-height: 1.28;
        letter-spacing: 0;
    }


    /* ---------- BONUSES ---------- */

    body.bonuses-page {
        height: 100vh;
        height: 100svh;
        overflow: hidden;
    }

    .bonuses-stage {
        top: 46px;
    }

    .bonuses-shell {
        left: 5px;
        right: 5px;
        top: 5px;
        bottom: 5px;
    }

    .bonus-categories {
        flex-wrap: nowrap;
        align-items: center;
        gap: 7px;
        min-height: 55px;
        margin-bottom: 5px;
        padding: 5px 7px;
    }

    .bonus-category-list {
        flex: 0 1 46%;
        width: auto;
        min-width: 0;
        flex-wrap: wrap;
        overflow: visible;
        gap: 4px;
    }

    .bonus-category {
        min-height: 27px;
        padding: 0 8px;
        font-size: clamp(8px, 1.25vw, 10px);
        letter-spacing: .035em;
    }

    .bonus-info {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        margin-left: auto;
        gap: 7px;
        padding: 4px 8px 4px 10px;
    }

    .bonus-info-icon {
        font-size: 20px;
    }

    .bonus-info-text {
        gap: 1px;
    }

    .bonus-info-text strong {
        font-size: clamp(8px, 1.2vw, 10px);
        letter-spacing: .07em;
    }

    .bonus-info-text span {
        font-size: clamp(7.5px, 1.08vw, 9px);
        line-height: 1.18;
    }

    .bonus-content {
        backdrop-filter: blur(3px);
    }

    .bonus-table {
        min-width: max(760px, 100%);
    }

    .bonus-table th {
        padding: 6px 7px;
        font-size: clamp(8px, 1.15vw, 10px);
        letter-spacing: .035em;
    }

    .bonus-table td {
        padding: 6px 7px;
        font-size: clamp(8.5px, 1.22vw, 10.5px);
        line-height: 1.23;
    }

    .bonus-table-wrap::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    .bonus-data-message {
        padding: 12px;
        font-size: 11px;
    }
}


/* =========================================================
   4. ОЧЕНЬ НИЗКИЕ LANDSCAPE-ЭКРАНЫ
   Например 667×375 / 740×360 с учётом браузерных панелей.
   ========================================================= */

@media (orientation: landscape) and (max-height: 400px) {

    .topbar {
        height: 42px;
    }

    .nav {
        height: 42px;
        padding-right: 104px;
        gap: clamp(6px, 1.4vw, 12px);
    }

    .nav a {
        font-size: clamp(8px, 1.35vw, 10px);
    }

    .socials {
        height: 42px;
        right: 4px;
    }

    .social {
        width: 26px;
        height: 26px;
    }

    .social svg {
        width: 14px;
        height: 14px;
    }

    .hero,
    .bonuses-stage {
        top: 42px;
    }

    .lore-stream {
        padding-top: 42px;
    }

    .lore-intro {
        min-height: calc(100vh - 42px);
        min-height: calc(100svh - 42px);
    }

    body.lore-page .lore-section {
        min-height: calc(100vh - 42px);
        min-height: calc(100svh - 42px);
    }

    body.lore-page .lore-layout > .lore-panel {
        top: 3% !important;
        max-height: 94% !important;
    }

    body.lore-page .lore-layout > .lore-panel > .lore-block,
    body.lore-page .lore-slide-1 > .lore-panel .lore-block,
    body.lore-page .lore-slide-2 > .lore-panel .lore-block,
    body.lore-page .lore-slide-3 > .lore-panel .lore-block,
    body.lore-page .lore-slide-4 > .lore-panel .lore-block,
    body.lore-page .lore-slide-5 > .lore-panel .lore-block,
    body.lore-page .lore-slide-6 > .lore-panel .lore-block,
    body.lore-page .lore-slide-8 > .lore-panel .lore-block,
    body.lore-page .lore-slide-10 > .lore-panel .lore-block,
    body.lore-page .lore-slide-13 > .lore-panel .lore-block,
    body.lore-page .lore-slide-15 > .lore-panel .lore-block,
    body.lore-page .lore-slide-17 > .lore-panel .lore-block,
    body.lore-page .lore-slide-99 > .lore-panel .lore-block {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        font-size: clamp(9px, 1.5vw, 11px) !important;
        line-height: 1.20 !important;
    }

    .rules-stage {
        top: 42px;
    }

    .rules-pda {
        height: calc(100vh - 44px);
        height: calc(100svh - 44px);
    }

    .rules-menu-item {
        min-height: 21px;
        padding: 3px 4px;
        font-size: clamp(7px, 1.08vw, 9px);
    }

    .rules-section h1 {
        margin-bottom: 6px;
        font-size: clamp(11px, 1.8vw, 15px);
    }

    .rule {
        grid-template-columns: 25px minmax(0, 1fr);
        gap: 5px;
        margin-bottom: 6px;
    }

    .rule-number {
        font-size: clamp(8px, 1.25vw, 10px);
    }

    .rule p {
        font-size: clamp(7.5px, 1.18vw, 9.5px);
        line-height: 1.22;
    }

    .bonuses-shell {
        top: 3px;
        bottom: 3px;
    }

    .bonus-categories {
        min-height: 48px;
        margin-bottom: 3px;
        padding: 3px 5px;
    }

    .bonus-category {
        min-height: 23px;
        padding: 0 6px;
        font-size: 8px;
    }

    .bonus-info-icon {
        font-size: 17px;
    }

    .bonus-info-text strong {
        font-size: 8px;
    }

    .bonus-info-text span {
        font-size: 7px;
        line-height: 1.12;
    }

    .bonus-table th,
    .bonus-table td {
        padding-top: 5px;
        padding-bottom: 5px;
    }
}


/* =========================================================
   5. SAFETY: горизонтальный скролл страницы не нужен
   (локальный скролл таблицы остаётся внутри bonus-table-wrap)
   ========================================================= */

@media (max-width: 1200px) {
    html,
    body {
        max-width: 100%;
    }

    body:not(.lore-page) {
        overflow-x: hidden;
    }
}

/* =========================================================
   LORE — LAPTOP / LOW-HEIGHT RESPONSIVE FIX
   ---------------------------------------------------------
   Оптимизирует ЛОР для 1366×768, 1440×900, 1536×864
   и других экранов с ограниченной высотой.

   ВАЖНО:
   - позиции слайдов сохраняются;
   - RULES / PDA не изменяются;
   - телефонные правила остаются отдельными;
   - если текста всё же слишком много, панель получает
     внутренний скролл вместо обрезания текста.
   ========================================================= */


/* ---------------------------------------------------------
   Обычные ноутбуки и небольшие мониторы
   --------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1600px),
       (min-width: 901px) and (max-height: 900px) {

    body.lore-page .lore-section {
        min-height: 100vh;
        min-height: 100svh;
    }

    /* Уменьшаем рамку и внутренние отступы текстовых панелей */
    body.lore-page .lore-layout > .lore-panel {
        padding: 7px 11px;
        max-height: 92%;
        overflow-y: auto;
        overflow-x: hidden;
        scrollbar-width: thin;
        scrollbar-color:
            rgba(213,102,37,.50)
            rgba(255,255,255,.02);
    }

    body.lore-page .lore-layout > .lore-panel::-webkit-scrollbar {
        width: 4px;
    }

    body.lore-page .lore-layout > .lore-panel::-webkit-scrollbar-track {
        background: rgba(255,255,255,.02);
    }

    body.lore-page .lore-layout > .lore-panel::-webkit-scrollbar-thumb {
        background: rgba(213,102,37,.48);
        border-radius: 4px;
    }

    /* Главная причина переполнения:
       у отдельных слайдов был минимальный размер 23–25px.
       На ноутбуке он больше не уменьшался. */
    body.lore-page .lore-layout > .lore-panel > .lore-block,
    body.lore-page .lore-slide-1 > .lore-panel .lore-block,
    body.lore-page .lore-slide-2 > .lore-panel .lore-block,
    body.lore-page .lore-slide-3 > .lore-panel .lore-block,
    body.lore-page .lore-slide-4 > .lore-panel .lore-block,
    body.lore-page .lore-slide-5 > .lore-panel .lore-block,
    body.lore-page .lore-slide-6 > .lore-panel .lore-block,
    body.lore-page .lore-slide-8 > .lore-panel .lore-block,
    body.lore-page .lore-slide-10 > .lore-panel .lore-block,
    body.lore-page .lore-slide-13 > .lore-panel .lore-block,
    body.lore-page .lore-slide-15 > .lore-panel .lore-block,
    body.lore-page .lore-slide-17 > .lore-panel .lore-block,
    body.lore-page .lore-slide-19 > .lore-panel > .lore-block {
        font-size: clamp(16px, 1.28vw, 20px) !important;
        line-height: 1.24 !important;
    }

    body.lore-page .lore-layout > .lore-panel > .lore-block {
        padding: 7px 4px !important;
    }

    body.lore-page .lore-layout > .lore-panel > .lore-block + .lore-block {
        padding-top: 8px !important;
    }

    /* Финальный слайд намеренно крупнее остальных */
    body.lore-page .lore-slide-99 > .lore-panel .lore-block {
        font-size: clamp(23px, 2vw, 31px) !important;
        line-height: 1.20 !important;
    }

    /* Слайды с верхним и нижним текстом.
       Убираем лишние внутренние отступы, но сохраняем композицию. */
    body.lore-page .lore-slide-7 > .lore-panel,
    body.lore-page .lore-slide-9 > .lore-panel,
    body.lore-page .lore-slide-11 > .lore-panel,
    body.lore-page .lore-slide-12 > .lore-panel,
    body.lore-page .lore-slide-14 > .lore-panel,
    body.lore-page .lore-slide-16 > .lore-panel,
    body.lore-page .lore-slide-18 > .lore-panel {
        top: 4%;
        height: 92%;
        max-height: 92%;
        overflow: hidden;
    }

    body.lore-page .lore-slide-7 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-9 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-11 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-12 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-14 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-16 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-18 > .lore-panel > .lore-block {
        font-size: clamp(15px, 1.20vw, 19px) !important;
        line-height: 1.22 !important;
        padding: 6px 8px !important;
    }

    /* Узкая центральная колонка особенно чувствительна к высоте */
    body.lore-page .lore-slide-10 > .lore-panel {
        top: 18%;
        height: 64%;
    }

    /* 17-й слайд имеет transform и легко вылезает сверху/снизу */
    body.lore-page .lore-slide-17 > .lore-panel {
        top: 50%;
        max-height: 82%;
        overflow-y: auto;
    }

    body.lore-page .lore-slide-17 > .lore-panel .lore-block + .lore-block {
        margin-top: 4px !important;
        padding-top: 8px !important;
    }

    /* 19-й слайд: родитель должен оставаться прозрачным и
       не получать общий внутренний скролл. */
    body.lore-page .lore-slide-19 > .lore-panel {
        max-height: none;
        overflow: visible;
    }

    body.lore-page .lore-slide-19 > .lore-panel > .pos-left,
    body.lore-page .lore-slide-19 > .lore-panel > .pos-right {
        width: 42% !important;
        max-width: 42% !important;
        max-height: 78%;
        overflow-y: auto;
        padding: 9px 12px !important;
    }

    body.lore-page .lore-slide-19 > .lore-panel > .pos-left {
        top: 8% !important;
    }

    body.lore-page .lore-slide-19 > .lore-panel > .pos-right {
        bottom: 7% !important;
    }

    /* Intro — не даём нижней декоративной части выпадать
       за экран на 768/800/864px по высоте. */
    .lore-intro-title {
        margin-top: 3vh;
        padding-top: 18px;
        padding-bottom: 18px;
    }

    body.lore-page .lore-kicker {
        font-size: clamp(27px, 2.6vw, 40px);
    }

    body.lore-page .lore-intro-title h1 {
        font-size: clamp(66px, 7.2vw, 108px);
    }

    body.lore-page .lore-project {
        margin-top: 14px;
        font-size: clamp(34px, 3.7vw, 54px);
    }

    body.lore-page .lore-divider,
    body.lore-page .lore-scroll {
        transform: translateY(clamp(65px, 11vh, 105px));
    }

    .lore-divider {
        margin-top: 16px;
        margin-bottom: 12px;
    }
}


/* ---------------------------------------------------------
   Низкие ноутбуки: 1366×768, 1536×768 и похожие
   --------------------------------------------------------- */
@media (min-width: 901px) and (max-height: 800px) {

    body.lore-page .lore-layout > .lore-panel {
        padding: 5px 9px;
        max-height: 94%;
    }

    body.lore-page .lore-layout > .lore-panel > .lore-block,
    body.lore-page .lore-slide-1 > .lore-panel .lore-block,
    body.lore-page .lore-slide-2 > .lore-panel .lore-block,
    body.lore-page .lore-slide-3 > .lore-panel .lore-block,
    body.lore-page .lore-slide-4 > .lore-panel .lore-block,
    body.lore-page .lore-slide-5 > .lore-panel .lore-block,
    body.lore-page .lore-slide-6 > .lore-panel .lore-block,
    body.lore-page .lore-slide-8 > .lore-panel .lore-block,
    body.lore-page .lore-slide-10 > .lore-panel .lore-block,
    body.lore-page .lore-slide-13 > .lore-panel .lore-block,
    body.lore-page .lore-slide-15 > .lore-panel .lore-block,
    body.lore-page .lore-slide-17 > .lore-panel .lore-block,
    body.lore-page .lore-slide-19 > .lore-panel > .lore-block {
        font-size: clamp(14px, 1.16vw, 17px) !important;
        line-height: 1.18 !important;
    }

    body.lore-page .lore-layout > .lore-panel > .lore-block {
        padding: 5px 3px !important;
    }

    body.lore-page .lore-slide-7 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-9 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-11 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-12 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-14 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-16 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-18 > .lore-panel > .lore-block {
        font-size: clamp(13px, 1.10vw, 16px) !important;
        line-height: 1.17 !important;
        padding: 4px 6px !important;
    }

    body.lore-page .lore-slide-99 > .lore-panel .lore-block {
        font-size: clamp(20px, 1.8vw, 27px) !important;
    }

    body.lore-page .lore-slide-19 > .lore-panel > .pos-left,
    body.lore-page .lore-slide-19 > .lore-panel > .pos-right {
        max-height: 82%;
        padding: 7px 10px !important;
    }

    .lore-intro-title {
        margin-top: 0;
        padding: 12px 20px;
    }

    body.lore-page .lore-kicker {
        font-size: clamp(23px, 2.3vw, 34px);
        margin-bottom: 6px;
    }

    body.lore-page .lore-intro-title h1 {
        font-size: clamp(58px, 6.5vw, 92px);
    }

    body.lore-page .lore-project {
        margin-top: 9px;
        font-size: clamp(29px, 3.3vw, 45px);
    }

    body.lore-page .lore-divider,
    body.lore-page .lore-scroll {
        transform: translateY(clamp(42px, 8vh, 68px));
    }
}


/* ---------------------------------------------------------
   Очень низкие desktop/laptop окна, но НЕ телефон.
   --------------------------------------------------------- */
@media (min-width: 901px) and (max-height: 650px) {

    body.lore-page .lore-layout > .lore-panel > .lore-block,
    body.lore-page .lore-slide-1 > .lore-panel .lore-block,
    body.lore-page .lore-slide-2 > .lore-panel .lore-block,
    body.lore-page .lore-slide-3 > .lore-panel .lore-block,
    body.lore-page .lore-slide-4 > .lore-panel .lore-block,
    body.lore-page .lore-slide-5 > .lore-panel .lore-block,
    body.lore-page .lore-slide-6 > .lore-panel .lore-block,
    body.lore-page .lore-slide-8 > .lore-panel .lore-block,
    body.lore-page .lore-slide-10 > .lore-panel .lore-block,
    body.lore-page .lore-slide-13 > .lore-panel .lore-block,
    body.lore-page .lore-slide-15 > .lore-panel .lore-block,
    body.lore-page .lore-slide-17 > .lore-panel .lore-block,
    body.lore-page .lore-slide-19 > .lore-panel > .lore-block {
        font-size: clamp(12px, 1vw, 15px) !important;
        line-height: 1.15 !important;
    }

    body.lore-page .lore-slide-99 > .lore-panel .lore-block {
        font-size: clamp(18px, 1.6vw, 23px) !important;
    }
}

/* =========================================================
   LORE — PHONE LANDSCAPE v2
   ---------------------------------------------------------
   На телефоне НЕ превращаем все слайды в один широкий блок.
   Вместо этого сохраняем композицию desktop-версии и
   уменьшаем типографику/отступы пропорционально.
   ========================================================= */

@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {

    body.lore-page .lore-section {
        min-height: calc(100svh - 46px);
        background-size: auto 110%;
        background-position: center center;
        overflow: hidden;
    }

    /* Возвращаем обычную панель вместо прежнего 94%-блока */
    body.lore-page .lore-layout > .lore-panel {
        max-height: 92% !important;
        padding: 4px 6px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: none;
        background: linear-gradient(
            90deg,
            rgba(0,0,0,.66) 0%,
            rgba(0,0,0,.45) 82%,
            rgba(0,0,0,.22) 100%
        ) !important;
        border: 0 !important;
        border-left: 1px solid rgba(220,92,26,.58) !important;
        box-shadow: 5px 6px 15px rgba(0,0,0,.18) !important;
        text-align: inherit !important;
        scrollbar-width: none;
    }

    body.lore-page .lore-layout > .lore-panel::-webkit-scrollbar {
        width: 0;
    }

    body.lore-page .lore-layout > .lore-panel > .lore-block {
        padding: 3px 2px !important;
        font-size: clamp(9px, 1.38vw, 11px) !important;
        line-height: 1.18 !important;
        -webkit-text-stroke: .22px rgba(5,5,5,.98) !important;
        text-align: inherit !important;
    }

    body.lore-page .lore-layout > .lore-panel > .lore-block + .lore-block {
        margin-top: 0 !important;
        padding-top: 4px !important;
    }

    /* 1 */
    body.lore-page .lore-slide-1 > .lore-panel {
        left: 3% !important;
        right: auto !important;
        top: 22% !important;
        bottom: auto !important;
        width: 40% !important;
        height: auto !important;
        text-align: left !important;
    }

    /* 2 */
    body.lore-page .lore-slide-2 > .lore-panel {
        left: 3% !important;
        right: auto !important;
        top: 22% !important;
        bottom: auto !important;
        width: 45% !important;
        height: auto !important;
        text-align: left !important;
    }

    /* 3 */
    body.lore-page .lore-slide-3 > .lore-panel {
        left: 9% !important;
        right: auto !important;
        top: auto !important;
        bottom: 4% !important;
        width: 85% !important;
        height: auto !important;
        text-align: center !important;
        border-left: 0 !important;
        border-top: 1px solid rgba(220,92,26,.42) !important;
    }

    /* 4 */
    body.lore-page .lore-slide-4 > .lore-panel {
        left: auto !important;
        right: 4% !important;
        top: 22% !important;
        bottom: auto !important;
        width: 50% !important;
        height: auto !important;
        text-align: left !important;
        background: linear-gradient(
            270deg,
            rgba(0,0,0,.67),
            rgba(0,0,0,.44) 82%,
            rgba(0,0,0,.20)
        ) !important;
        border-left: 0 !important;
        border-right: 1px solid rgba(220,92,26,.58) !important;
    }

    /* 5 */
    body.lore-page .lore-slide-5 > .lore-panel {
        left: 3% !important;
        right: auto !important;
        top: 22% !important;
        bottom: auto !important;
        width: 45% !important;
        height: auto !important;
        text-align: left !important;
    }

    /* 6 */
    body.lore-page .lore-slide-6 > .lore-panel {
        left: auto !important;
        right: 4% !important;
        top: auto !important;
        bottom: 12% !important;
        width: 54% !important;
        height: auto !important;
        text-align: left !important;
        background: linear-gradient(
            270deg,
            rgba(0,0,0,.68),
            rgba(0,0,0,.43) 82%,
            rgba(0,0,0,.18)
        ) !important;
        border-left: 0 !important;
        border-right: 1px solid rgba(220,92,26,.56) !important;
    }

    /* 7 / 9 / 11 / 12 / 14 / 16 / 18 — верх + низ */
    body.lore-page .lore-slide-7 > .lore-panel,
    body.lore-page .lore-slide-9 > .lore-panel,
    body.lore-page .lore-slide-11 > .lore-panel,
    body.lore-page .lore-slide-12 > .lore-panel,
    body.lore-page .lore-slide-14 > .lore-panel,
    body.lore-page .lore-slide-16 > .lore-panel,
    body.lore-page .lore-slide-18 > .lore-panel {
        left: 10% !important;
        right: auto !important;
        top: 4% !important;
        bottom: auto !important;
        width: 80% !important;
        height: 92% !important;
        max-height: 92% !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;

        overflow: hidden !important;

        text-align: center !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.lore-page .lore-slide-7 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-9 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-11 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-12 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-14 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-16 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-18 > .lore-panel > .lore-block {
        flex: 0 0 auto;
        padding: 3px 5px !important;
        font-size: clamp(8.5px, 1.26vw, 10.5px) !important;
        line-height: 1.15 !important;
        text-align: center !important;
        background: rgba(0,0,0,.28) !important;
        border-bottom: 1px solid rgba(220,92,26,.32) !important;
    }

    /* 8 */
    body.lore-page .lore-slide-8 > .lore-panel {
        left: auto !important;
        right: 3% !important;
        top: 22% !important;
        bottom: auto !important;
        width: 45% !important;
        height: auto !important;
        text-align: left !important;
        background: linear-gradient(
            270deg,
            rgba(0,0,0,.67),
            rgba(0,0,0,.44) 82%,
            rgba(0,0,0,.20)
        ) !important;
        border-left: 0 !important;
        border-right: 1px solid rgba(220,92,26,.58) !important;
    }

    /* 10 */
    body.lore-page .lore-slide-10 > .lore-panel {
        left: 34.5% !important;
        right: auto !important;
        top: 18% !important;
        bottom: auto !important;
        width: 38% !important;
        height: 64% !important;

        display: flex !important;
        flex-direction: column !important;
        justify-content: space-evenly !important;

        text-align: center !important;

        background: linear-gradient(
            180deg,
            rgba(0,0,0,.54),
            rgba(0,0,0,.36),
            rgba(0,0,0,.54)
        ) !important;

        border: 1px solid rgba(220,92,26,.34) !important;
    }

    body.lore-page .lore-slide-10 > .lore-panel .lore-block {
        font-size: clamp(8.5px, 1.20vw, 10px) !important;
        line-height: 1.17 !important;
    }

    /* 13 */
    body.lore-page .lore-slide-13 > .lore-panel {
        left: 3% !important;
        right: auto !important;
        top: auto !important;
        bottom: 15% !important;
        width: 59% !important;
        height: auto !important;
        text-align: left !important;
    }

    /* 15 */
    body.lore-page .lore-slide-15 > .lore-panel {
        left: 9% !important;
        right: auto !important;
        top: auto !important;
        bottom: 4% !important;
        width: 82% !important;
        height: auto !important;
        text-align: center !important;
        background: linear-gradient(
            180deg,
            rgba(0,0,0,.28),
            rgba(0,0,0,.60)
        ) !important;
        border-left: 0 !important;
        border-top: 1px solid rgba(220,92,26,.40) !important;
    }

    /* 17 */
    body.lore-page .lore-slide-17 > .lore-panel {
        left: 4% !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        width: 40% !important;
        max-width: 40% !important;
        height: auto !important;
        max-height: 84% !important;

        transform: translateY(-50%) !important;

        text-align: left !important;

        background: linear-gradient(
            270deg,
            rgba(0,0,0,.69),
            rgba(0,0,0,.45) 82%,
            rgba(0,0,0,.18)
        ) !important;

        border-right: 0 !important;
        border-left: 1px solid rgba(220,92,26,.58) !important;
    }

    body.lore-page .lore-slide-17 > .lore-panel .lore-block + .lore-block {
        margin-top: 2px !important;
        padding-top: 4px !important;
    }

    /* 19 — две независимые панели */
    body.lore-page .lore-slide-19 > .lore-panel {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        max-height: none !important;
        padding: 0 !important;
        overflow: visible !important;
        background: none !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body.lore-page .lore-slide-19 > .lore-panel > .pos-left,
    body.lore-page .lore-slide-19 > .lore-panel > .pos-right {
        position: absolute !important;
        width: 38% !important;
        max-width: 38% !important;
        max-height: 78% !important;
        overflow-y: auto !important;

        padding: 5px 7px !important;

        font-size: clamp(8.5px, 1.25vw, 10px) !important;
        line-height: 1.16 !important;
        text-align: inherit !important;
    }

    body.lore-page .lore-slide-19 > .lore-panel > .pos-left {
        left: 4% !important;
        right: auto !important;
        top: 10% !important;
        bottom: auto !important;
        text-align: left !important;
        border-left: 1px solid rgba(220,92,26,.58) !important;
        border-right: 0 !important;
    }

    body.lore-page .lore-slide-19 > .lore-panel > .pos-right {
        left: auto !important;
        right: 4% !important;
        top: auto !important;
        bottom: 8% !important;
        text-align: right !important;
        border-left: 0 !important;
        border-right: 1px solid rgba(220,92,26,.58) !important;
    }

    /* Финал */
    body.lore-page .lore-slide-99 > .lore-panel {
        left: 3% !important;
        right: auto !important;
        top: 15% !important;
        bottom: auto !important;
        width: 50% !important;
        height: auto !important;
        text-align: left !important;
    }

    body.lore-page .lore-slide-99 > .lore-panel .lore-block {
        font-size: clamp(15px, 2.1vw, 20px) !important;
        line-height: 1.18 !important;
    }
}


/* =========================================================
   LORE — LAPTOP READABILITY +1px
   ========================================================= */

@media (min-width: 901px) and (max-width: 1600px) and (min-height: 651px) {
    body.lore-page .lore-layout > .lore-panel > .lore-block,
    body.lore-page .lore-slide-1 > .lore-panel .lore-block,
    body.lore-page .lore-slide-2 > .lore-panel .lore-block,
    body.lore-page .lore-slide-3 > .lore-panel .lore-block,
    body.lore-page .lore-slide-4 > .lore-panel .lore-block,
    body.lore-page .lore-slide-5 > .lore-panel .lore-block,
    body.lore-page .lore-slide-6 > .lore-panel .lore-block,
    body.lore-page .lore-slide-8 > .lore-panel .lore-block,
    body.lore-page .lore-slide-10 > .lore-panel .lore-block,
    body.lore-page .lore-slide-13 > .lore-panel .lore-block,
    body.lore-page .lore-slide-15 > .lore-panel .lore-block,
    body.lore-page .lore-slide-17 > .lore-panel .lore-block,
    body.lore-page .lore-slide-19 > .lore-panel > .lore-block {
        font-size: clamp(17px, 1.28vw, 21px) !important;
    }

    body.lore-page .lore-slide-7 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-9 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-11 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-12 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-14 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-16 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-18 > .lore-panel > .lore-block {
        font-size: clamp(16px, 1.20vw, 20px) !important;
    }
}

/* =========================================================
   LORE — PHONE LANDSCAPE v3
   ---------------------------------------------------------
   На телефоне приоритет:
   1) весь текст должен оставаться внутри слайда;
   2) композиция должна сохраняться;
   3) текст сознательно делаем меньше — пользователь при
      необходимости увеличивает страницу pinch-zoom'ом.
   ========================================================= */

@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {

    /* Чуть больше рабочей площади */
    body.lore-page .lore-layout > .lore-panel {
        max-height: 88% !important;
        overflow: hidden !important;
    }

    /* Базовая мобильная типографика — заметно компактнее */
    body.lore-page .lore-layout > .lore-panel > .lore-block,
    body.lore-page .lore-slide-1 > .lore-panel .lore-block,
    body.lore-page .lore-slide-2 > .lore-panel .lore-block,
    body.lore-page .lore-slide-3 > .lore-panel .lore-block,
    body.lore-page .lore-slide-4 > .lore-panel .lore-block,
    body.lore-page .lore-slide-5 > .lore-panel .lore-block,
    body.lore-page .lore-slide-6 > .lore-panel .lore-block,
    body.lore-page .lore-slide-8 > .lore-panel .lore-block,
    body.lore-page .lore-slide-10 > .lore-panel .lore-block,
    body.lore-page .lore-slide-13 > .lore-panel .lore-block,
    body.lore-page .lore-slide-15 > .lore-panel .lore-block,
    body.lore-page .lore-slide-17 > .lore-panel .lore-block,
    body.lore-page .lore-slide-19 > .lore-panel > .lore-block {
        font-size: clamp(7.2px, 1.02vw, 8.8px) !important;
        line-height: 1.10 !important;
        letter-spacing: 0 !important;
        -webkit-text-stroke: .12px rgba(5,5,5,.98) !important;
    }

    body.lore-page .lore-layout > .lore-panel > .lore-block {
        padding: 2px 1px !important;
    }

    body.lore-page .lore-layout > .lore-panel > .lore-block + .lore-block {
        padding-top: 3px !important;
    }

    /* Немного расширяем узкие панели, чтобы уменьшить число строк */
    body.lore-page .lore-slide-1 > .lore-panel {
        width: 46% !important;
        top: 18% !important;
    }

    body.lore-page .lore-slide-2 > .lore-panel {
        width: 50% !important;
        top: 18% !important;
    }

    body.lore-page .lore-slide-4 > .lore-panel {
        width: 55% !important;
        top: 18% !important;
    }

    body.lore-page .lore-slide-5 > .lore-panel {
        width: 50% !important;
        top: 18% !important;
    }

    body.lore-page .lore-slide-6 > .lore-panel {
        width: 58% !important;
        bottom: 9% !important;
    }

    body.lore-page .lore-slide-8 > .lore-panel {
        width: 50% !important;
        top: 18% !important;
    }

    body.lore-page .lore-slide-13 > .lore-panel {
        width: 64% !important;
        bottom: 10% !important;
    }

    body.lore-page .lore-slide-17 > .lore-panel {
        width: 46% !important;
        max-width: 46% !important;
        max-height: 76% !important;
    }

    /* Широкие нижние слайды тоже немного ужимаем по высоте */
    body.lore-page .lore-slide-3 > .lore-panel,
    body.lore-page .lore-slide-15 > .lore-panel {
        bottom: 3% !important;
    }

    /* Верх + низ: максимально компактный режим */
    body.lore-page .lore-slide-7 > .lore-panel,
    body.lore-page .lore-slide-9 > .lore-panel,
    body.lore-page .lore-slide-11 > .lore-panel,
    body.lore-page .lore-slide-12 > .lore-panel,
    body.lore-page .lore-slide-14 > .lore-panel,
    body.lore-page .lore-slide-16 > .lore-panel,
    body.lore-page .lore-slide-18 > .lore-panel {
        left: 6% !important;
        width: 88% !important;
        top: 3% !important;
        height: 94% !important;
        max-height: 94% !important;
    }

    body.lore-page .lore-slide-7 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-9 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-11 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-12 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-14 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-16 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-18 > .lore-panel > .lore-block {
        padding: 2px 4px !important;
        font-size: clamp(6.8px, .96vw, 8.2px) !important;
        line-height: 1.08 !important;
        letter-spacing: 0 !important;
    }

    /* 10 — центральная колонка: шире и ниже */
    body.lore-page .lore-slide-10 > .lore-panel {
        left: 31% !important;
        width: 44% !important;
        top: 13% !important;
        height: 74% !important;
    }

    body.lore-page .lore-slide-10 > .lore-panel .lore-block {
        font-size: clamp(6.8px, .96vw, 8.1px) !important;
        line-height: 1.08 !important;
    }

    /* 19 — оба блока уменьшаем и чуть расширяем */
    body.lore-page .lore-slide-19 > .lore-panel > .pos-left,
    body.lore-page .lore-slide-19 > .lore-panel > .pos-right {
        width: 43% !important;
        max-width: 43% !important;
        max-height: 72% !important;
        overflow: hidden !important;
        padding: 4px 5px !important;

        font-size: clamp(6.8px, .98vw, 8.2px) !important;
        line-height: 1.08 !important;
        letter-spacing: 0 !important;
    }

    body.lore-page .lore-slide-19 > .lore-panel > .pos-left {
        top: 6% !important;
    }

    body.lore-page .lore-slide-19 > .lore-panel > .pos-right {
        bottom: 5% !important;
    }

    /* Финальный крупный текст тоже существенно уменьшаем */
    body.lore-page .lore-slide-99 > .lore-panel {
        width: 58% !important;
        top: 11% !important;
    }

    body.lore-page .lore-slide-99 > .lore-panel .lore-block {
        font-size: clamp(10px, 1.45vw, 13px) !important;
        line-height: 1.10 !important;
    }
}


/* Ещё более низкие телефоны */
@media (orientation: landscape) and (max-height: 400px) and (max-width: 950px) {

    body.lore-page .lore-layout > .lore-panel > .lore-block,
    body.lore-page .lore-slide-1 > .lore-panel .lore-block,
    body.lore-page .lore-slide-2 > .lore-panel .lore-block,
    body.lore-page .lore-slide-3 > .lore-panel .lore-block,
    body.lore-page .lore-slide-4 > .lore-panel .lore-block,
    body.lore-page .lore-slide-5 > .lore-panel .lore-block,
    body.lore-page .lore-slide-6 > .lore-panel .lore-block,
    body.lore-page .lore-slide-8 > .lore-panel .lore-block,
    body.lore-page .lore-slide-10 > .lore-panel .lore-block,
    body.lore-page .lore-slide-13 > .lore-panel .lore-block,
    body.lore-page .lore-slide-15 > .lore-panel .lore-block,
    body.lore-page .lore-slide-17 > .lore-panel .lore-block,
    body.lore-page .lore-slide-19 > .lore-panel > .lore-block {
        font-size: clamp(6.4px, .90vw, 7.7px) !important;
        line-height: 1.06 !important;
    }

    body.lore-page .lore-slide-7 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-9 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-11 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-12 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-14 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-16 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-18 > .lore-panel > .lore-block {
        font-size: clamp(6.1px, .84vw, 7.2px) !important;
        line-height: 1.05 !important;
    }

    body.lore-page .lore-slide-99 > .lore-panel .lore-block {
        font-size: clamp(9px, 1.25vw, 11px) !important;
    }
}

/* =========================================================
   LORE — PHONE LANDSCAPE v4
   ---------------------------------------------------------
   Основное изменение:
   - фон на телефоне показываем целиком по высоте;
   - текст больше не растягивается почти на весь viewport;
   - боковые панели становятся узкими колонками;
   - верхние/нижние панели ограничены шириной изображения;
   - шрифт намеренно мелкий: для чтения можно использовать zoom.
   ========================================================= */

@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {

    body.lore-page .lore-section {
        background-size: auto 100% !important;
        background-position: center center !important;
    }

    /* Базовый текст телефона */
    body.lore-page .lore-layout > .lore-panel > .lore-block,
    body.lore-page .lore-slide-1 > .lore-panel .lore-block,
    body.lore-page .lore-slide-2 > .lore-panel .lore-block,
    body.lore-page .lore-slide-3 > .lore-panel .lore-block,
    body.lore-page .lore-slide-4 > .lore-panel .lore-block,
    body.lore-page .lore-slide-5 > .lore-panel .lore-block,
    body.lore-page .lore-slide-6 > .lore-panel .lore-block,
    body.lore-page .lore-slide-8 > .lore-panel .lore-block,
    body.lore-page .lore-slide-10 > .lore-panel .lore-block,
    body.lore-page .lore-slide-13 > .lore-panel .lore-block,
    body.lore-page .lore-slide-15 > .lore-panel .lore-block,
    body.lore-page .lore-slide-17 > .lore-panel .lore-block,
    body.lore-page .lore-slide-19 > .lore-panel > .lore-block {
        font-size: clamp(6.1px, .88vw, 7.4px) !important;
        line-height: 1.08 !important;
        letter-spacing: 0 !important;
    }

    body.lore-page .lore-layout > .lore-panel {
        padding: 3px 5px !important;
    }

    body.lore-page .lore-layout > .lore-panel > .lore-block {
        padding: 2px 1px !important;
    }

    /*
       Боковые колонки.
       max через svh не даёт строкам разъезжаться на очень широких телефонах.
    */
    body.lore-page .lore-slide-1 > .lore-panel,
    body.lore-page .lore-slide-2 > .lore-panel,
    body.lore-page .lore-slide-5 > .lore-panel,
    body.lore-page .lore-slide-17 > .lore-panel {
        left: max(2%, calc(50% - 84svh)) !important;
        right: auto !important;
        width: min(36vw, 72svh) !important;
        max-width: min(36vw, 72svh) !important;
    }

    body.lore-page .lore-slide-1 > .lore-panel,
    body.lore-page .lore-slide-2 > .lore-panel,
    body.lore-page .lore-slide-5 > .lore-panel {
        top: 16% !important;
        bottom: auto !important;
    }

    body.lore-page .lore-slide-4 > .lore-panel,
    body.lore-page .lore-slide-8 > .lore-panel {
        left: auto !important;
        right: max(2%, calc(50% - 84svh)) !important;
        width: min(38vw, 76svh) !important;
        max-width: min(38vw, 76svh) !important;
        top: 16% !important;
        bottom: auto !important;
    }

    body.lore-page .lore-slide-6 > .lore-panel {
        left: auto !important;
        right: max(2%, calc(50% - 84svh)) !important;
        width: min(42vw, 82svh) !important;
        max-width: min(42vw, 82svh) !important;
        top: auto !important;
        bottom: 8% !important;
    }

    body.lore-page .lore-slide-13 > .lore-panel {
        left: max(2%, calc(50% - 84svh)) !important;
        right: auto !important;
        width: min(44vw, 88svh) !important;
        max-width: min(44vw, 88svh) !important;
        top: auto !important;
        bottom: 8% !important;
    }

    /* Широкие нижние блоки — уже, чем раньше */
    body.lore-page .lore-slide-3 > .lore-panel,
    body.lore-page .lore-slide-15 > .lore-panel {
        left: 50% !important;
        right: auto !important;
        width: min(74vw, 148svh) !important;
        max-width: min(74vw, 148svh) !important;
        top: auto !important;
        bottom: 3% !important;
        transform: translateX(-50%) !important;
    }

    /* Верх + низ: ограничиваем строки шириной картинки */
    body.lore-page .lore-slide-7 > .lore-panel,
    body.lore-page .lore-slide-9 > .lore-panel,
    body.lore-page .lore-slide-11 > .lore-panel,
    body.lore-page .lore-slide-12 > .lore-panel,
    body.lore-page .lore-slide-14 > .lore-panel,
    body.lore-page .lore-slide-16 > .lore-panel,
    body.lore-page .lore-slide-18 > .lore-panel {
        left: 50% !important;
        right: auto !important;
        top: 3% !important;

        width: min(74vw, 148svh) !important;
        max-width: min(74vw, 148svh) !important;

        height: 94% !important;
        max-height: 94% !important;

        transform: translateX(-50%) !important;
    }

    body.lore-page .lore-slide-7 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-9 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-11 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-12 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-14 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-16 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-18 > .lore-panel > .lore-block {
        padding: 2px 4px !important;
        font-size: clamp(5.8px, .80vw, 6.9px) !important;
        line-height: 1.06 !important;
    }

    /* Центральная колонка */
    body.lore-page .lore-slide-10 > .lore-panel {
        left: 50% !important;
        right: auto !important;
        top: 12% !important;

        width: min(38vw, 76svh) !important;
        max-width: min(38vw, 76svh) !important;
        height: 76% !important;

        transform: translateX(-50%) !important;
    }

    body.lore-page .lore-slide-10 > .lore-panel .lore-block {
        font-size: clamp(5.8px, .80vw, 6.8px) !important;
        line-height: 1.06 !important;
    }

    /* 17 — сохраняем вертикальное центрирование */
    body.lore-page .lore-slide-17 > .lore-panel {
        top: 50% !important;
        bottom: auto !important;
        max-height: 78% !important;
        transform: translateY(-50%) !important;
    }

    /* 19 — две узкие колонки внутри картинки */
    body.lore-page .lore-slide-19 > .lore-panel {
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        transform: none !important;
    }

    body.lore-page .lore-slide-19 > .lore-panel > .pos-left,
    body.lore-page .lore-slide-19 > .lore-panel > .pos-right {
        width: min(34vw, 68svh) !important;
        max-width: min(34vw, 68svh) !important;
        max-height: 74% !important;

        padding: 3px 5px !important;

        font-size: clamp(5.8px, .82vw, 7px) !important;
        line-height: 1.06 !important;
    }

    body.lore-page .lore-slide-19 > .lore-panel > .pos-left {
        left: max(2%, calc(50% - 84svh)) !important;
        right: auto !important;
        top: 7% !important;
        bottom: auto !important;
    }

    body.lore-page .lore-slide-19 > .lore-panel > .pos-right {
        left: auto !important;
        right: max(2%, calc(50% - 84svh)) !important;
        top: auto !important;
        bottom: 6% !important;
    }

    /* Финал */
    body.lore-page .lore-slide-99 > .lore-panel {
        left: max(2%, calc(50% - 84svh)) !important;
        right: auto !important;
        top: 12% !important;
        width: min(42vw, 82svh) !important;
        max-width: min(42vw, 82svh) !important;
    }

    body.lore-page .lore-slide-99 > .lore-panel .lore-block {
        font-size: clamp(9px, 1.25vw, 11px) !important;
        line-height: 1.08 !important;
    }
}


/* Самые низкие телефоны: ещё компактнее */
@media (orientation: landscape) and (max-height: 400px) and (max-width: 950px) {

    body.lore-page .lore-layout > .lore-panel > .lore-block,
    body.lore-page .lore-slide-1 > .lore-panel .lore-block,
    body.lore-page .lore-slide-2 > .lore-panel .lore-block,
    body.lore-page .lore-slide-3 > .lore-panel .lore-block,
    body.lore-page .lore-slide-4 > .lore-panel .lore-block,
    body.lore-page .lore-slide-5 > .lore-panel .lore-block,
    body.lore-page .lore-slide-6 > .lore-panel .lore-block,
    body.lore-page .lore-slide-8 > .lore-panel .lore-block,
    body.lore-page .lore-slide-10 > .lore-panel .lore-block,
    body.lore-page .lore-slide-13 > .lore-panel .lore-block,
    body.lore-page .lore-slide-15 > .lore-panel .lore-block,
    body.lore-page .lore-slide-17 > .lore-panel .lore-block,
    body.lore-page .lore-slide-19 > .lore-panel > .lore-block {
        font-size: clamp(5.5px, .76vw, 6.5px) !important;
        line-height: 1.04 !important;
    }

    body.lore-page .lore-slide-7 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-9 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-11 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-12 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-14 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-16 > .lore-panel > .lore-block,
    body.lore-page .lore-slide-18 > .lore-panel > .lore-block {
        font-size: clamp(5.2px, .70vw, 6.1px) !important;
        line-height: 1.03 !important;
    }
}

/* =========================================================
   LORE — PHONE LANDSCAPE v5
   Боковые блоки чуть ближе к центру изображения.
   ========================================================= */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {

    /* Левые боковые блоки */
    body.lore-page .lore-slide-1 > .lore-panel,
    body.lore-page .lore-slide-2 > .lore-panel,
    body.lore-page .lore-slide-5 > .lore-panel,
    body.lore-page .lore-slide-17 > .lore-panel {
        left: max(5%, calc(50% - 76svh)) !important;
    }

    /* Правые боковые блоки */
    body.lore-page .lore-slide-4 > .lore-panel,
    body.lore-page .lore-slide-8 > .lore-panel,
    body.lore-page .lore-slide-6 > .lore-panel {
        right: max(5%, calc(50% - 76svh)) !important;
    }

    /* Слайд 13 — нижний левый */
    body.lore-page .lore-slide-13 > .lore-panel {
        left: max(5%, calc(50% - 76svh)) !important;
    }

    /* Слайд 19 — обе стороны симметрично ближе к центру */
    body.lore-page .lore-slide-19 > .lore-panel > .pos-left {
        left: max(5%, calc(50% - 76svh)) !important;
    }

    body.lore-page .lore-slide-19 > .lore-panel > .pos-right {
        right: max(5%, calc(50% - 76svh)) !important;
    }

    /* Финальный боковой блок */
    body.lore-page .lore-slide-99 > .lore-panel {
        left: max(5%, calc(50% - 76svh)) !important;
    }
}

/* =========================================================
   LORE — "ЛИСТАЙТЕ ВНИЗ" RESPONSIVE FIX
   ---------------------------------------------------------
   Подстраивает lore-divider + lore-scroll под высоту экрана,
   чтобы подсказка не уезжала на ноутбуках и телефонах.
   ========================================================= */

/* Базовый desktop */
body.lore-page .lore-divider,
body.lore-page .lore-scroll {
    transform: translateY(clamp(70px, 14vh, 185px));
}

/* Небольшие ноутбуки / пониженная высота */
@media (min-width: 901px) and (max-height: 900px) {
    body.lore-page .lore-divider,
    body.lore-page .lore-scroll {
        transform: translateY(clamp(45px, 9vh, 95px));
    }
}

/* 1366×768 и похожие */
@media (min-width: 901px) and (max-height: 800px) {
    body.lore-page .lore-divider,
    body.lore-page .lore-scroll {
        transform: translateY(clamp(28px, 6vh, 58px));
    }

    body.lore-page .lore-divider {
        margin-top: 12px;
        margin-bottom: 8px;
    }

    body.lore-page .lore-scroll {
        font-size: 9px;
    }

    body.lore-page .lore-arrow {
        font-size: 24px;
    }
}

/* Очень низкие desktop / laptop окна */
@media (min-width: 901px) and (max-height: 650px) {
    body.lore-page .lore-divider,
    body.lore-page .lore-scroll {
        transform: translateY(18px);
    }

    body.lore-page .lore-divider {
        width: min(340px, 52vw);
        margin-top: 8px;
        margin-bottom: 6px;
    }

    body.lore-page .lore-scroll {
        font-size: 8px;
    }

    body.lore-page .lore-arrow {
        font-size: 20px;
    }
}

/* Телефоны landscape */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 950px) {
    body.lore-page .lore-divider,
    body.lore-page .lore-scroll {
        transform: translateY(8px) !important;
    }

    body.lore-page .lore-divider {
        width: min(210px, 34vw);
        margin: 6px auto 4px;
    }

    body.lore-page .lore-divider::after {
        padding: 0 7px;
        font-size: 12px;
    }

    body.lore-page .lore-scroll {
        font-size: 6.5px;
        letter-spacing: .14em;
        line-height: 1.1;
    }

    body.lore-page .lore-arrow {
        margin-top: 0;
        font-size: 15px;
    }
}

/* Очень низкие телефоны landscape */
@media (orientation: landscape) and (max-height: 400px) and (max-width: 950px) {
    body.lore-page .lore-divider,
    body.lore-page .lore-scroll {
        transform: translateY(2px) !important;
    }

    body.lore-page .lore-divider {
        width: min(180px, 30vw);
        margin: 4px auto 2px;
    }

    body.lore-page .lore-scroll {
        font-size: 5.8px;
    }

    body.lore-page .lore-arrow {
        font-size: 13px;
    }
}