/* мобильные и общие правки поверх остальных стилей, подключается последним */

/* ---- «Магазин» в шапках: самоцвет вместо иконки-маски --------------------- */
.wiki-topbar__nav > li > a.wiki-topbar__shop::before { display: none; }
.wiki-topbar__nav > li > a.wiki-topbar__shop img { width: 20px; height: 20px; flex: 0 0 auto; filter: drop-shadow(0 2px 6px rgba(90, 170, 255, .6)); }
.header .header_nav .hnav--shop .hnav__ico img { width: 18px; height: 18px; display: block; filter: drop-shadow(0 2px 6px rgba(90, 170, 255, .6)); }
.header_nav a.hdr-shop { display: inline-flex; align-items: center; gap: 8px; }
.header_nav a.hdr-shop img { width: 18px; height: 18px; filter: drop-shadow(0 2px 6px rgba(90, 170, 255, .6)); }
.header_mobile-menu > a[href="/wiki/shop"]::before { -webkit-mask: none; mask: none; background: url("/public/img/gem.webp") center / contain no-repeat; }
@media (max-width: 560px) {
    .wiki-topbar__nav > li > a.wiki-topbar__shop img { width: 22px; height: 22px; }
}

/* ---- шапка вики ---------------------------------------------------------- */
/* декор шторки не должен участвовать в раскладке (на телефоне вставал в ряд с лого) */
.wiki-topbar > .hdr-shade, .wiki-topbar > .hdr-edge { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
@media (max-width: 795px) {
    /* шапка без размытия: blur поверх видео и холстов пересчитывался на каждый кадр свайпа, отсюда рывки. плотный фон вместо него */
    .header, .header.is-scrolled { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(8, 8, 10, .96) !important; }
    /* вместо видео кадр из него: телефон декодировал ролик на каждом кадре прокрутки и тянул лишний мегабайт */
    .main_bg video { display: none !important; }
    .main_bg { background-image: url(../img/bg-still.webp) !important; background-size: cover; background-position: center top; }
    .wiki-topbar > .hdr-shade, .wiki-topbar > .hdr-edge { display: none; }
    .wiki-topbar { min-height: 60px; padding: 9px 14px; gap: 10px; }
    .wiki-topbar.is-scrolled { padding: 7px 14px; }
    .wiki-topbar__logo { width: 112px; height: 32px; flex: 0 0 auto; }
    .wiki-topbar__cta { height: 42px; padding: 0 13px; }
}
@media (max-width: 560px) {
    /* nav сжимаем до иконок, «На главную» дублирует лого */
    .wiki-topbar__nav { display: flex; flex: 1 1 auto; width: auto; justify-content: flex-end; gap: 8px; margin: 0; }
    .wiki-topbar__nav > li > a { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 0; gap: 0; border-radius: 10px; }
    .wiki-topbar__nav { gap: 6px; }
    .wiki-topbar__nav > li > a::before { width: 20px; height: 20px; }
    .wiki-topbar__cta { width: 42px; padding: 0; justify-content: center; border-radius: 10px; }
    .wiki-topbar__cta svg { width: 20px; height: 20px; }
}

/* ---- полоса разделов под шапкой ------------------------------------------ */
@media (max-width: 560px) {
    .wiki-rail { padding: 6px 10px; }
    .wiki-rail__link { padding: 8px 11px; font-size: 12.5px; }
    .wiki-rail__link .n { display: none; }          /* номера разделов на телефоне только съедают ширину */
    .wiki-rail__soon { margin-left: 6px; }
    .wiki-main { padding-top: 124px; }
    .wiki-lead__title { font-size: 28px; }
}

/* ---- карточка фракции: сначала досье, потом Discord и лидеры -------------- */
@media (max-width: 980px) {
    .fac-body { grid-template-areas: "main" "side"; }
}
@media (max-width: 560px) {
    .fac-hero__name { font-size: 26px; }
}

/* ---- свод правил: читаемость на телефоне --------------------------------- */
@media (max-width: 560px) {
    .doc-item__t, .doc-ch__lead, .doc-def__v { font-size: 15px; line-height: 1.55; }
    .doc-clar__k, .doc-note__k, .doc-pager__k { font-size: 10.5px; }
    .doc-sev, .doc-sev__r { font-size: 11px; }
}

/* ---- лендинг: блоки, вылезавшие за экран --------------------------------- */
.screenshots_grid { box-sizing: border-box; }
.dcard__btn { box-sizing: border-box; }
@media screen and (max-width: 420px) {
    .projects_main { width: 100%; }
    .projects_main-img { width: calc(100vw - 32px); height: auto; aspect-ratio: 16 / 10; }
    .projects_main-txt { box-sizing: border-box; width: calc(100vw - 32px); height: auto; margin-left: 0; }
}

/* бургер на лендинге */
.header_mobile-menu { width: calc(100% - 24px); right: 0; padding: 10px 10px 12px; gap: 0; align-items: stretch;
    border: 1px solid rgba(255, 255, 255, .1); background: linear-gradient(180deg, #17181a, #101112);
    box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .9); }
.header_mobile-menu > a:not(.header_btn) { display: flex; align-items: center; gap: 12px; padding: 14px 10px;
    font-family: inter, system-ui, sans-serif; font-size: 15px; font-weight: 500; color: #e6e6e6; text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, .06); }
.header_mobile-menu > a:not(.header_btn)::before { content: ""; width: 20px; height: 20px; flex: 0 0 auto;
    background: #ff6464; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.header_mobile-menu > a:not(.header_btn)::after { content: ""; margin-left: auto; width: 7px; height: 7px;
    border-right: 1.5px solid #5a5a5a; border-top: 1.5px solid #5a5a5a; transform: rotate(45deg); }
.header_mobile-menu > a[href="#play"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10.3 8.9v6.2a.55.55 0 0 0 .84.47l4.9-3.1a.55.55 0 0 0 0-.94l-4.9-3.1a.55.55 0 0 0-.84.47z' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.header_mobile-menu > a[href="/wiki"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.6C10.2 5.3 7.6 4.7 4.3 4.9v12.6c3.3-.2 5.9.4 7.7 1.7 1.8-1.3 4.4-1.9 7.7-1.7V4.9c-3.3-.2-5.9.4-7.7 1.7z'/%3E%3Cpath d='M12 6.6v12.6'/%3E%3C/svg%3E"); }
.header_mobile-menu > a[href="/lore"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h9l4 4v12H6z'/%3E%3Cpath d='M15 4v4h4M9 12h6M9 16h6'/%3E%3C/svg%3E"); }
.header_mobile-menu > a:not(.header_btn):last-of-type { border-bottom: 0; }
.header_mobile-menu > .header_btn { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 10px 0 0; width: 100%; box-sizing: border-box; white-space: nowrap;
    height: 48px; padding: 0 18px; border-radius: 12px; background: #5865f2; color: #fff;
    font-family: inter, system-ui, sans-serif; font-size: 14.5px; font-weight: 600; text-decoration: none;
    box-shadow: 0 10px 24px -10px rgba(88, 101, 242, .9), inset 0 1px 0 rgba(255, 255, 255, .18); }
.header_mobile-menu > .header_btn::before { content: ""; width: 20px; height: 20px; flex: 0 0 auto; background: #fff;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.317 4.3698a19.7913 19.7913 0 0 0-4.8851-1.5152.0741.0741 0 0 0-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 0 0-.0785-.037 19.7363 19.7363 0 0 0-4.8852 1.515.0699.0699 0 0 0-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 0 0 .0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 0 0 .0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 0 0-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 0 1-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 0 1 .0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 0 1 .0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 0 1-.0066.1276 12.2986 12.2986 0 0 1-1.873.8914.0766.0766 0 0 0-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 0 0 .0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 0 0 .0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 0 0-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.317 4.3698a19.7913 19.7913 0 0 0-4.8851-1.5152.0741.0741 0 0 0-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 0 0-.0785-.037 19.7363 19.7363 0 0 0-4.8852 1.515.0699.0699 0 0 0-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 0 0 .0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 0 0 .0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 0 0-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 0 1-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 0 1 .0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 0 1 .0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 0 1-.0066.1276 12.2986 12.2986 0 0 1-1.873.8914.0766.0766 0 0 0-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 0 0 .0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 0 0 .0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 0 0-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* картинки не кликабельны и не тащатся: пкм -> «открыть в новой вкладке» нам не нужен */
img, picture, video { pointer-events: none; -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; }
#lbImg, .fac-fx, .shop-embers { pointer-events: auto; }

/* шапка лора: те же кнопки, что на лендинге и в вики */
.header--lore .header_nav { display: flex; align-items: center; gap: 10px; }
.header--lore .header_nav li a {
    --hc: #cf2929; --ico: none;
    position: relative; isolation: isolate; display: flex; align-items: center; gap: 8px;
    height: 38px; padding: 0 16px 0 12px; box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, .28); border-radius: 12px;
    background-color: rgba(22, 23, 25, .82); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
    font-family: inter; font-size: 13.5px; font-weight: 600; line-height: 1; letter-spacing: .01em; color: #f1f1f1; white-space: nowrap;
    transition: border-color .28s ease, background-color .28s ease, filter .28s ease, transform .45s cubic-bezier(.34, 1.4, .5, 1);
}
.header--lore .header_nav li a::before { content: ""; width: 18px; height: 18px; flex: 0 0 auto; background-color: #ff6464; -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; transition: background-color .28s ease, transform .45s cubic-bezier(.34, 1.4, .5, 1); }
.header--lore .header_nav li a.hdr-shop::before { display: none; }
.header--lore .header_nav li a[href="/"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 11.5L12 4l8.5 7.5'/%3E%3Cpath d='M6 10.5V20h12v-9.5'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E"); }
.header--lore .header_nav li a[href="#play"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M10.3 8.9v6.2a.55.55 0 0 0 .84.47l4.9-3.1a.55.55 0 0 0 0-.94l-4.9-3.1a.55.55 0 0 0-.84.47z' fill='black' stroke='none'/%3E%3C/svg%3E"); }
.header--lore .header_nav li a[href="/wiki"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.6C10.2 5.3 7.6 4.7 4.3 4.9v12.6c3.3-.2 5.9.4 7.7 1.7 1.8-1.3 4.4-1.9 7.7-1.7V4.9c-3.3-.2-5.9.4-7.7 1.7z'/%3E%3Cpath d='M12 6.6v12.6'/%3E%3C/svg%3E"); }
.header--lore .header_nav li a::after { content: ""; position: absolute; z-index: -1; left: 14%; right: 14%; bottom: -14px; height: 24px; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, var(--hc), transparent); filter: blur(10px); opacity: 0; transform: scaleX(.7); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); }
.header--lore .header_nav li a:hover { background-color: var(--hc); border-color: var(--hc); color: #fff; filter: drop-shadow(0 0 15px rgba(243, 63, 63, .7)); }
.header--lore .header_nav li a:hover::before { background-color: #fff; transform: scale(1.1); }
.header--lore .header_nav li a:hover::after { opacity: .9; transform: none; }
.header_nav a.hdr-shop { --hc: #2f7fe0; }

/* холсты живых эффектов проявляются плавно, а не вспыхивают на первом кадре */
.fac-fx { opacity: 0; transition: opacity .9s ease; }
.fx-ready > .fac-fx { opacity: 1; }

/* кнопка магазина: при наведении синяя заливка вместо общего красного */
.wiki-topbar__nav > li > a.wiki-topbar__shop:hover, .header .header_nav .hnav--shop:hover, .header .header_nav .hnav--shop:focus-visible, .header_nav a.hdr-shop:hover { background-color: #2f7fe0 !important; border-color: #2f7fe0 !important; filter: drop-shadow(0 0 15px rgba(88, 166, 255, .7)) !important; }
.header .header_nav li:has(> .hnav--shop):hover { background-color: transparent; border-color: transparent; filter: none; }
.header .header_nav .hnav--shop { --hc: #2f7fe0; }
/* кнопка магазина: самоцвет иногда вспыхивает + подсветка рамки */
.wiki-topbar__nav > li > a.wiki-topbar__shop img, .header .header_nav .hnav--shop .hnav__ico img, .header_nav a.hdr-shop img, .wiki-rail__gem {
    animation: gemFlash 6s ease-in-out infinite; }
@keyframes gemFlash {
    0%, 64%, 100% { filter: drop-shadow(0 2px 6px rgba(90, 170, 255, .45)); transform: none; }
    71% { filter: drop-shadow(0 0 9px rgba(150, 205, 255, 1)) drop-shadow(0 0 18px rgba(90, 170, 255, .7)); transform: scale(1.14) rotate(-7deg); }
    79% { filter: drop-shadow(0 0 5px rgba(150, 205, 255, .8)); transform: scale(1.05) rotate(4deg); }
    88% { filter: drop-shadow(0 2px 6px rgba(90, 170, 255, .45)); transform: none; }
}
.wiki-topbar__nav > li > a.wiki-topbar__shop, .header .header_nav .hnav--shop, .header_nav a.hdr-shop { animation: gemBtn 6s ease-in-out infinite; }
@keyframes gemBtn {
    0%, 64%, 100% { box-shadow: 0 0 0 0 rgba(90, 170, 255, 0); }
    72% { box-shadow: 0 0 0 1px rgba(150, 205, 255, .7), 0 0 18px rgba(90, 170, 255, .45), inset 0 0 14px rgba(90, 170, 255, .18); border-color: rgba(150, 205, 255, .8); }
    88% { box-shadow: 0 0 0 0 rgba(90, 170, 255, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .wiki-topbar__nav > li > a.wiki-topbar__shop img, .header .header_nav .hnav--shop .hnav__ico img, .header_nav a.hdr-shop img, .wiki-rail__gem,
    .wiki-topbar__nav > li > a.wiki-topbar__shop, .header .header_nav .hnav--shop, .header_nav a.hdr-shop { animation: none; }
}