:root {
    --gold: #f8cb71;
    --gold-2: #ffc066;
    --ink: #381208;
    --link: #71171f;
    --muted: #c5ab83;
    --shell: 1000px;
    --nav: 228px;
    --aside: 168px;
    /* левое крыло заходит под центр: шов закрыт, округление уходит во внешнее поле */
    --wing-glue: 1px;
    --wing-span: 2000px;
    /* как layout.css: * { arial !important; 13px } */
    --font: Arial, Times, FreeSerif, serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background: #000;
    color: var(--ink);
    font-family: var(--font);
    font-size: 13px;
    overflow-x: clip;
}

a { color: var(--gold-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.visually-hidden,
.menu-btn:not(.menu-btn-status) > span,
.play-btn > span,
.cta > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Полоса на всю ширину; графика сидит в .stage (ровно --shell) */
.band {
    width: 100%;
    background: #000;
}

.stage {
    position: relative;
    width: var(--shell);
    max-width: 100%;
    margin: 0 auto;
}

/*
 * Крылья — дети .stage. Заходят под центр на --wing-glue с обеих сторон,
 * чтобы щель от субпикселя уходила во внешнее чёрное поле, а не в арт.
 */
.wing {
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--wing-span);
    pointer-events: none;
    background-color: #000;
    z-index: 0;
}

.wing-left {
    /* правый край крыла = --wing-glue внутри .stage */
    right: auto;
    left: calc(0px - var(--wing-span) + var(--wing-glue));
    background-position: right top;
}

.wing-right {
    /* левый край крыла = --wing-glue внутри .stage (под «Начать игру» и т.п.) */
    left: calc(100% - var(--wing-glue));
    background-position: left top;
}

.hero-stage {
    height: 408px;
}

.hero-wing-left {
    background-image: url("/img2/1.jpg");
    background-repeat: no-repeat;
}

.hero-wing-right {
    background-image: url("/img2/3.jpg");
    background-repeat: no-repeat;
}

.hero-center {
    width: var(--shell);
    height: 408px;
    position: relative;
    z-index: 1;
    /* без #000 под картинкой — иначе 1px щель читается как чёрная полоса */
    background: url("/img2/2.jpg") top center no-repeat;
}

/* Искры как на старом сайте (particles.js), поверх шапки */
#particles-js {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 408px;
    z-index: 1;
    pointer-events: none;
}

#particles-js canvas {
    display: block;
    vertical-align: top;
}

.hero-logo {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.locales {
    position: absolute;
    left: 750px;
    top: 393px;
    width: 240px;
    z-index: 3;
    color: #f8cb71;
    font-weight: bold;
    font-size: 13px;
    text-align: right;
    line-height: 1;
    white-space: nowrap;
}

.locales a {
    color: #f8cb71;
    text-decoration: none;
}

.locales a:hover,
.locales a.is-active {
    text-decoration: none;
    color: #fecf7e;
}

.locales-sep {
    margin: 0 6px;
    color: #f8cb71;
}

.staging {
    margin: 0;
    padding: 8px 16px;
    text-align: center;
    background: #3a2414;
    color: var(--gold);
    border-top: 1px solid #6a5538;
    border-bottom: 1px solid #6a5538;
}

.locale-preview {
    margin: 0;
    padding: 6px 16px 8px;
    text-align: center;
    background: #2a1a10;
    color: #c5ab83;
    font-size: 12px;
    border-bottom: 1px solid #6a5538;
}

.locale-preview-label {
    margin-right: 8px;
    color: #86644b;
}

.locale-preview a {
    color: #f8cb71;
    text-decoration: none;
    font-weight: bold;
}

.locale-preview a:hover,
.locale-preview a.is-active {
    color: #fecf7e;
    text-decoration: underline;
}

.body-wing-left {
    background-image: url("/img2/z5.jpg");
    background-repeat: repeat-y;
}

.wing-z1 {
    width: 100%;
    height: 309px;
    background: #000 url("/img2/z1.jpg") right top no-repeat;
}

.body-wing-right {
    background-image: url("/img2/r4.jpg");
    background-repeat: repeat-y;
}

.wing-r2 {
    width: 100%;
    height: 309px;
    background: url("/img2/r2.jpg") left top no-repeat;
}

.wing-r3 {
    width: 100%;
    /* файл 352×93; было 95px + #000 → чёрная полоса под артом */
    height: 93px;
    background: url("/img2/r3.jpg") left top no-repeat;
}

.body-core {
    position: relative;
    z-index: 1;
    width: var(--shell);
}

.shell {
    display: grid;
    grid-template-columns: 228px 604px 168px;
    width: var(--shell);
    align-items: stretch;
    position: relative;
    background: url("/img2/conteiner2.jpg") repeat-y 228px 0;
}

.shell-nav {
    width: 228px;
    /* тёплый тон test.jpg — если шов/субпиксель всё же проступит, не будет чёрной полосы */
    background-color: #86644b;
    background-image: url("/img2/test.jpg"), url("/img2/z4.jpg");
    background-position: left top, left top;
    background-repeat: no-repeat, repeat-y;
    min-height: 100%;
}

.shell-main {
    width: 604px;
    min-height: 640px;
    background: url("/img2/conteiner1.jpg") top left no-repeat;
    padding: 48px 0 32px;
}

.shell-aside {
    width: 168px;
    /* r1.jpg = 167px; тёплый fallback закрывает 1px справа у «Начать игру» */
    background-color: #3a2818;
    background-image: url("/img2/r1.jpg");
    background-position: left top;
    background-repeat: repeat;
    min-height: 100%;
    padding: 0 0 24px;
}

.nav-toggle,
.nav-toggle-btn { display: none; }

/* Регистрация / Скачать — только в мобильном текстовом меню */
.mobile-nav-only { display: none !important; }

.side-nav {
    width: var(--nav);
    background: transparent;
}

.menu-btn {
    display: block;
    width: var(--nav);
    height: 51px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: right top;
    position: relative;
    cursor: pointer;
}

.menu-btn:hover,
.menu-btn:focus-visible,
.nav-group[open] > .menu-btn {
    background-position: right -51px;
    outline: none;
}

.menu-btn-home { background-image: var(--menu-btn-home, url("/img2/m1.png")); height: 42px; }
.menu-btn-home:hover,
.menu-btn-home:focus-visible { background-position: right -42px; }
.menu-btn-reg { background-image: var(--menu-btn-reg, url("/img2/m2.png")); }
.menu-btn-news { background-image: var(--menu-btn-news, url("/img2/m3.png")); }
.menu-btn-lib { background-image: var(--menu-btn-lib, url("/img2/m4.png")); }
.menu-btn-support { background-image: var(--menu-btn-support, url("/img2/m5.png")); }
.menu-btn-forum { background-image: var(--menu-btn-forum, url("/img2/m6.png")); }
.menu-btn-ratings { background-image: var(--menu-btn-ratings, url("/img2/m7.png")); }
.menu-btn-shop { background-image: var(--menu-btn-shop, url("/img2/m9.png")); }
.menu-btn-shop:hover,
.menu-btn-shop:focus-visible { background-position: right bottom; }
.menu-btn-status {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    box-sizing: border-box;
    background-image: var(--menu-btn-status, url("/img2/m10.png"));
    height: 60px;
    padding: 6px 8px 10px;
    cursor: pointer;
    text-decoration: none;
}

.menu-btn-status:hover,
.menu-btn-status:focus-visible {
    background-position: right top;
    outline: none;
    text-decoration: none;
}

/*
 * Как старый #e10 + .ml2: «Статус сервера:» золотом, ONLINE/OFFLINE ниже.
 * Не absolute — иначе при скрытии соседних span меню ломается поток.
 */
.menu-btn-status .status-label,
.menu-btn-status .status-flag {
    position: static;
    display: block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: unset;
    clip-path: none;
    white-space: normal;
    text-align: center;
    font-family: "Times New Roman", Times, FreeSerif, serif;
    font-size: 12px;
    line-height: 1.15;
    text-decoration: none;
    pointer-events: none;
}

.menu-btn-status .status-label {
    z-index: 2;
    color: #ffc066;
    font-weight: normal;
}

.menu-btn-status .status-flag {
    z-index: 2;
    font-weight: bold;
}

.status-flag.is-online {
    color: #00aa00;
}

.status-flag.is-offline {
    color: #ff0000;
}

.status-flag.is-unknown {
    color: #aaa;
}

.menu-bottom {
    width: var(--nav);
    height: 54px;
    background: var(--menu-btn-status-bottom, url("/img2/m10Bottom.png")) right top no-repeat;
}

.nav-group { margin: 0; }
.nav-group > summary { list-style: none; }
.nav-group > summary::-webkit-details-marker { display: none; }

/* Десктоп: анимация наведения и раскрытия подменю */
@media (min-width: 1001px) {
    /* Спрайт меняется сразу; короткая вспышка яркости = «загорается» */
    .menu-btn:not(.menu-btn-status) {
        transition: filter 0.12s ease-out;
    }

    .menu-btn:not(.menu-btn-status):hover,
    .menu-btn:not(.menu-btn-status):focus-visible {
        filter: brightness(1.18);
    }

    .nav-group[open] > .menu-btn:not(:hover):not(:focus-visible) {
        filter: none;
    }

    .menu-btn-status {
        transition: none;
    }

    .sub-link {
        transition: filter 0.12s ease-out;
    }

    .sub-link:hover {
        filter: brightness(1.18);
    }

    /* Плавное раскрытие <details> (Chrome/Edge и др. с ::details-content) */
    @supports (interpolate-size: allow-keywords) {
        html {
            interpolate-size: allow-keywords;
        }

        .nav-group::details-content {
            block-size: 0;
            overflow: hidden;
            transition:
                block-size 0.35s ease,
                content-visibility 0.35s allow-discrete;
        }

        .nav-group[open]::details-content {
            block-size: auto;
        }
    }

    /* Запасной вариант: появление пунктов при открытии */
    @supports not (interpolate-size: allow-keywords) {
        .nav-group[open] > .submenu {
            animation: ds-submenu-open 0.35s ease;
        }
    }

    .nav-group[open] > .submenu > .sub-link {
        animation: ds-sublink-in 0.3s ease both;
    }

    .nav-group[open] > .submenu > .sub-link:nth-child(1) { animation-delay: 0.02s; }
    .nav-group[open] > .submenu > .sub-link:nth-child(2) { animation-delay: 0.05s; }
    .nav-group[open] > .submenu > .sub-link:nth-child(3) { animation-delay: 0.08s; }
    .nav-group[open] > .submenu > .sub-link:nth-child(4) { animation-delay: 0.11s; }
    .nav-group[open] > .submenu > .sub-link:nth-child(5) { animation-delay: 0.14s; }
    .nav-group[open] > .submenu > .sub-link:nth-child(6) { animation-delay: 0.17s; }
    .nav-group[open] > .submenu > .sub-link:nth-child(7) { animation-delay: 0.2s; }
    .nav-group[open] > .submenu > .sub-link:nth-child(8) { animation-delay: 0.23s; }
    .nav-group[open] > .submenu > .sub-link:nth-child(9) { animation-delay: 0.26s; }
    .nav-group[open] > .submenu > .sub-link:nth-child(10) { animation-delay: 0.29s; }
}

@keyframes ds-submenu-open {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ds-sublink-in {
    from {
        opacity: 0;
        transform: translateX(-8px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (min-width: 1001px) and (prefers-reduced-motion: reduce) {
    .menu-btn:not(.menu-btn-status),
    .sub-link {
        transition: none;
    }

    .menu-btn:not(.menu-btn-status):hover,
    .menu-btn:not(.menu-btn-status):focus-visible,
    .sub-link:hover {
        filter: none;
    }

    .nav-group::details-content {
        transition: none;
    }

    .nav-group[open] > .submenu,
    .nav-group[open] > .submenu > .sub-link {
        animation: none;
    }
}

.sub-link {
    display: block;
    width: var(--nav);
    height: 29px;
    background: url("/img2/submenu.png") right -76px no-repeat;
    color: var(--gold-2);
    text-align: center;
    line-height: 29px;
    font-size: 12px;
    font-family: var(--font);
}

.sub-link:hover { background-position: right -105px; text-decoration: none; }

.submenu .sub-link:first-child {
    height: 38px;
    line-height: 38px;
    background-position: right 0;
}

.submenu .sub-link:first-child:hover { background-position: right -38px; }

.submenu .sub-link:last-child {
    height: 31px;
    line-height: 31px;
    background-position: right -134px;
}

.submenu .sub-link:last-child:hover { background-position: right -165px; }

.play-btn {
    display: block;
    width: 168px;
    height: 72px;
    margin: 0;
    padding: 0;
    line-height: 0;
    position: relative;
    z-index: 2;
    /* спрайт 167×144: растягиваем на 168, иначе 1px чёрная щель справа у «крыла» кнопки */
    background-color: #2a1c12;
    background-image: var(--play-btn, url("/img2/playButtton.jpg"));
    background-repeat: no-repeat;
    background-position: top left;
    background-size: 168px 144px;
}

.play-btn:hover {
    background-position: left bottom;
}

.events-panel {
    width: 168px;
    height: 146px;
    margin: 0;
    padding: 8px 8px 0;
    overflow: hidden;
    background: url("/img2/loginProfPan.jpg") left top no-repeat;
    color: var(--gold);
    font-family: var(--font);
    font-size: 12px;
    text-align: left;
    box-sizing: border-box;
}

.events-panel h2 {
    margin: 0 0 6px;
    padding: 0;
    color: var(--gold);
    font-family: var(--font);
    font-size: 12px;
    font-weight: bold;
    text-transform: none;
    background: none;
    width: auto;
    height: auto;
    text-align: left;
    line-height: 1.2;
}

.events-panel h2 a {
    color: var(--gold);
    text-decoration: none;
}

.events-panel h2 a:hover {
    color: #ffe9a0;
    text-decoration: underline;
}

.events-panel .hint {
    color: var(--gold);
    font-size: 12px;
    margin: 0;
}

.events-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.events-list li {
    margin: 0 0 2px;
    line-height: 1.25;
}

.events-list a {
    color: var(--gold);
    text-decoration: none;
}

.events-list a:hover {
    text-decoration: underline;
}

.relig-pct {
    margin: 0;
    color: var(--gold);
    font-size: 12px;
    text-align: center;
}

.widget-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--gold);
}

.widget-list li {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 20px;
    margin: 0 0 4px;
    line-height: 1.2;
}

.widget-list img {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

.widget-list--siege li {
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 10px;
}

.widget-list--siege li:last-child {
    margin-bottom: 0;
}

.widget-list--siege .siege-time {
    display: block;
    font-weight: bold;
}

.widget-list--siege .siege-name {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    max-width: 160px;
    min-width: 0;
    flex-wrap: nowrap;
}

.widget-list--siege .siege-name img {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.widget-list--siege .siege-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.side-right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.side-box {
    color: var(--gold);
    text-align: center;
    padding: 0 0 8px;
}

.side-box h2,
.right-header {
    width: 160px;
    height: 27px;
    margin: 0 0 8px;
    padding: 7px 4px 0;
    background: url("/img2/rightheader.jpg") left top no-repeat;
    color: var(--gold);
    font-family: var(--font);
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    line-height: 1;
}

.side-box h2 a,
.right-header a {
    color: var(--gold);
    text-decoration: none;
}

.right-spacer {
    width: 166px;
    height: 3px;
    margin: 8px 0;
    background: url("/img2/rightspacer.jpg") left center no-repeat;
}

.side-box .hint,
.hint {
    color: var(--muted);
    font-size: 12px;
}

.side-help-btn {
    display: inline-block;
    margin: 4px 4px 0;
    padding: 6px 10px;
    color: var(--gold);
    font-family: var(--font);
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    border: 1px solid rgba(212, 175, 55, 0.45);
    background: rgba(42, 28, 18, 0.55);
}

.side-help-btn:hover {
    color: #ffe9a0;
    border-color: rgba(255, 220, 120, 0.7);
}

.side-box--support .side-help-btn {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

.social {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: 168px;
    height: 91px;
    margin: 0 0 8px;
    padding: 10px 4px 8px;
    background: url("/img2/serchPannel.jpg") left top no-repeat;
}

.social img {
    display: block;
    border: 0;
}

.relig-bar {
    display: flex;
    height: 14px;
    border: 2px ridge #fff;
    width: 100px;
    margin: 0 auto 8px;
    overflow: hidden;
}

.r-holy { flex: 27; background: #adad93; }
.r-evil { flex: 29; background: #58716e; }
.r-order { flex: 22; background: #a2de0a; }
.r-chaos { flex: 22; background: #800000; }

.article {
    width: 544px;
    max-width: 100%;
    margin: 0 auto 22px;
}

.article-up {
    width: 542px;
    height: 34px;
    position: relative;
    left: 2px;
    background: url("/img2/artical/articalUp.png") no-repeat;
}

.article-body {
    background: url("/img2/artical/articalCenter.png") repeat-y;
    padding: 0 15px 8px 20px;
    color: var(--ink);
    font-family: var(--font);
    font-size: 13px;
}

/* Contain floated images so the parchment frame grows with them */
.article-body::after {
    content: "";
    display: table;
    clear: both;
}

.article-body a { color: var(--link); }

.article-body p {
    margin: 1px;
    padding: 1px;
    text-align: justify;
    text-indent: 20px;
    font-family: var(--font);
    font-size: 13px;
}

.article-down {
    width: 541px;
    height: 37px;
    position: relative;
    left: 3px;
    background: url("/img2/artical/articalBottom.png") no-repeat;
}

.article-mark {
    position: relative;
    left: -8px;
    width: 507px;
    max-width: calc(100% + 16px);
    min-height: 19px;
    margin: 0 0 8px;
    padding: 0 8px 0 15px;
    background: url("/img2/artical/articalLineMark.jpg") left center no-repeat;
    color: var(--link);
    font-family: var(--font);
    font-size: 13px;
    font-weight: bold;
    line-height: 19px;
}

.article-body > .article-mark:first-child,
.article-body > .news-item:first-child .article-mark {
    top: -20px;
    margin-bottom: -4px;
}

.article-mark a,
.article-mark .newsh {
    color: var(--link);
    text-decoration: none;
    font-family: var(--font);
    font-size: 13px;
    font-weight: bold;
}

/* News list headings: title bold, date quieter, category normal */
.article-mark a.newsh,
.news-item-head .newsh {
    font-size: 14px;
    font-weight: bold;
}

.news-item-date {
    font-size: 11px;
    font-weight: normal;
    opacity: 0.85;
}

.news-item {
    margin: 0 0 36px;
}

.news-item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    box-sizing: border-box;
    font-weight: normal;
}

.news-item-title {
    flex: 1 1 auto;
    min-width: 0;
}

.news-item-cat {
    flex: 0 0 auto;
    white-space: nowrap;
    font-weight: normal;
}

.news-item-cat a {
    font-weight: normal;
}

.news-body {
    overflow: hidden;
    margin: 4px 0 0;
}

.news-body ul,
.news-body ol,
.news-body .news-list {
    margin: 4px 0 10px;
    padding-left: 28px;
    list-style-position: outside;
}

.news-body li {
    margin: 2px 0;
    padding: 0;
    text-align: left;
    text-indent: 0;
}

.news-body img {
    max-width: 100%;
    height: auto;
}

.news-body center {
    display: block;
    text-align: center;
}

.news-archive-years {
    margin: 0 0 28px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(80, 60, 40, 0.25);
    text-align: left;
    text-indent: 0;
    font-weight: bold;
}

.news-archive-years a {
    font-weight: bold;
}

.news-pager {
    margin: 24px 0 8px;
    text-align: center;
    font-family: var(--font);
    font-size: 13px;
    font-weight: bold;
}

.news-pager .pages {
    color: var(--link);
    text-decoration: none;
}

.news-pager .apages {
    color: #8b0000;
}

.cta-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin: 8px 0 24px;
}

.cta {
    display: block;
    width: 220px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: top;
}

.cta:hover { background-position: bottom; }
.cta-reg { background-image: var(--cta-reg, url("/img2/2dbuttons/reg.png")); }
.cta-client { background-image: var(--cta-client, url("/img2/2dbuttons/client.png")); }

.foot-stage {
    height: 224px;
}

.foot-wing-left {
    background-image: url("/img2/z5.jpg");
    background-repeat: repeat-y;
}

.foot-wing-right {
    background-image: url("/img2/r5.jpg");
    background-repeat: repeat-y;
}

.foot-inner {
    display: grid;
    grid-template-columns: 228px 604px 168px;
    width: var(--shell);
    height: 224px;
    position: relative;
    z-index: 1;
}

.foot-1 { background: url("/img2/bottom1.jpg") top left no-repeat; }
.foot-2 { background: url("/img2/bottom2.jpg") top center no-repeat; }
.foot-3 { background: url("/img2/bottom3.jpg") top right no-repeat; }

.foot-copy {
    background: url("/img2/bottomGrcenter.jpg") center / auto round;
    color: var(--muted);
    text-align: center;
    padding: 20px 12px 28px;
    font-size: 18px;
}

@media (max-width: 1000px) {
    html, body {
        background: #241810;
        overflow-x: hidden;
    }

    .band {
        background: #241810;
    }

    .wing {
        display: none;
    }

    .stage,
    .hero-center,
    .body-core,
    .foot-inner,
    .shell {
        width: auto;
        max-width: 100%;
    }

    .hero-stage {
        height: auto;
    }

    .hero-center {
        height: 180px;
        background-size: cover;
        background-position: center top;
    }

    #particles-js {
        display: none;
    }

    .locales {
        left: auto;
        right: 12px;
        top: auto;
        bottom: 8px;
        width: auto;
        font-size: 11px;
    }

    .shell {
        grid-template-columns: minmax(0, 1fr);
        background: #2c2016;
        min-width: 0;
        overflow: hidden;
    }

    .shell-nav,
    .shell-main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    /* Правая колонка на мобильном не нужна */
    .shell-aside {
        display: none;
    }

    .nav-toggle-btn {
        display: block;
        margin: 12px 12px 8px;
        padding: 12px 16px;
        color: var(--gold);
        background:
            linear-gradient(180deg, #4a3424 0%, #2c1c12 100%);
        border: 1px solid #8a6a3a;
        box-shadow:
            inset 0 1px 0 rgba(248, 203, 113, 0.25),
            0 1px 0 #1a1008;
        text-align: center;
        cursor: pointer;
        font-family: var(--font);
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-decoration: none;
    }

    .nav-toggle-btn:active,
    .nav-toggle:checked + .nav-toggle-btn {
        background: #24160e;
        box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
        color: #ffe09a;
    }

    .shell-nav {
        display: none;
        margin: 0 12px 12px;
        padding: 6px 0;
        background:
            linear-gradient(180deg, #3a2818 0%, #24160e 100%);
        border: 1px solid #6a5538;
        box-shadow:
            inset 0 0 0 1px rgba(248, 203, 113, 0.12),
            0 4px 14px rgba(0, 0, 0, 0.35);
    }

    .nav-toggle:checked ~ .shell .shell-nav {
        display: block;
    }

    /* Текстовое меню в стиле портала */
    .side-nav {
        width: auto;
    }

    .menu-btn,
    .menu-btn-home,
    .menu-btn-status,
    a.mobile-nav-only.menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        width: auto;
        height: auto;
        min-height: 44px;
        margin: 0 8px;
        padding: 11px 14px;
        background-image: none !important;
        background-color: transparent;
        background-position: left top;
        color: var(--gold);
        font-family: var(--font);
        font-size: 13px;
        font-weight: bold;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        text-decoration: none;
        border: none;
        border-bottom: 1px solid rgba(106, 85, 56, 0.65);
        cursor: pointer;
        transition: color 0.15s ease, background-color 0.15s ease;
    }

    .side-nav > .menu-btn:last-child,
    .side-nav > .nav-group:last-of-type .menu-btn {
        border-bottom: none;
    }

    .menu-btn:hover:not(.menu-btn-status),
    .menu-btn:focus-visible:not(.menu-btn-status),
    .nav-group[open] > .menu-btn,
    .menu-btn.is-active:not(.menu-btn-status) {
        color: #ffe09a;
        background-color: rgba(248, 203, 113, 0.08);
        outline: none;
        text-decoration: none;
    }

    .menu-btn:not(.menu-btn-status) > span {
        position: static;
        width: auto;
        height: auto;
        margin: 0;
        clip: auto;
        overflow: visible;
        white-space: normal;
    }

    /* Стрелка у раскрывающихся пунктов */
    .nav-group > .menu-btn::after {
        content: "▸";
        flex-shrink: 0;
        margin-left: 10px;
        color: #c5ab83;
        font-size: 12px;
        transition: transform 0.15s ease;
    }

    .nav-group[open] > .menu-btn::after {
        transform: rotate(90deg);
        color: var(--gold);
    }

    .menu-btn-status,
    .menu-btn-status:hover,
    .menu-btn-status:focus-visible {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        height: auto;
        min-height: 52px;
        margin-top: 4px;
        padding: 8px 10px;
        cursor: pointer;
        text-transform: none;
        font-weight: normal;
        letter-spacing: 0;
        color: var(--muted);
        background-image: none !important;
        background-color: transparent !important;
        border-top: 1px solid rgba(106, 85, 56, 0.65);
        border-bottom: none;
    }

    .menu-btn-status .status-label {
        position: static;
        color: #ffc066;
        font-size: 12px;
        pointer-events: none;
    }

    .menu-btn-status .status-flag {
        position: static;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        width: auto;
        display: inline-block;
        padding: 2px 8px;
        font-size: 11px;
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid #6a5538;
        pointer-events: none;
    }

    .menu-btn-status .status-flag.is-online {
        color: #00aa00;
        border-color: rgba(0, 170, 0, 0.45);
    }

    .menu-btn-status .status-flag.is-offline {
        color: #ff5555;
        border-color: rgba(255, 0, 0, 0.4);
    }

    .menu-bottom {
        display: none;
    }

    .submenu {
        margin: 0 8px 6px;
        padding: 4px 0 6px;
        background: rgba(0, 0, 0, 0.22);
        border: 1px solid rgba(106, 85, 56, 0.45);
        border-top: none;
    }

    .sub-link,
    .submenu .sub-link:first-child,
    .submenu .sub-link:last-child {
        display: block;
        width: auto;
        height: auto;
        min-height: 0;
        line-height: 1.35;
        padding: 9px 14px 9px 22px;
        background: none !important;
        background-image: none !important;
        color: #d4b896;
        text-align: left;
        font-family: var(--font);
        font-size: 12px;
        letter-spacing: 0.02em;
        border: none;
        border-bottom: 1px solid rgba(74, 56, 40, 0.7);
        text-decoration: none;
    }

    .submenu .sub-link:last-child {
        border-bottom: none;
    }

    .sub-link:hover,
    .submenu .sub-link:first-child:hover,
    .submenu .sub-link:last-child:hover,
    .sub-link.is-active {
        background: rgba(248, 203, 113, 0.1) !important;
        color: var(--gold);
        text-decoration: none;
    }

    .sub-link.is-active {
        font-weight: bold;
    }

    .shell-main {
        min-height: 0;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 16px 12px 28px;
        background: #2c2016;
        background-image: none;
    }

    /* Пергамент: на узком экране обрезаем боковой декор, центральная часть на всю ширину */
    .article {
        width: 100%;
        max-width: 100%;
        margin: 0 auto 18px;
        overflow: hidden;
    }

    .article-header {
        width: 100%;
        max-width: 100%;
        height: 38px;
        padding: 0 12px 0 28px;
        /* 544px спрайт → видимые ~480px по центру (режем зубцы по краям) */
        background: url("/img2/artical/articalHeader.png") center top / calc(100% * 544 / 480) 38px no-repeat;
    }

    .article-up {
        width: 100%;
        height: 37px;
        left: 0;
        /* 542px → ~420px центра (режем металлические «ушки» ~57px слева) */
        background: url("/img2/artical/articalUp.png") center top / calc(100% * 542 / 420) 37px no-repeat;
    }

    .article-body {
        width: 100%;
        box-sizing: border-box;
        background-color: transparent;
        background-image: url("/img2/artical/articalCenter.png");
        background-repeat: repeat-y;
        background-position: top center;
        /* 544px → ~500px центра (тонкие боковые линии рамки) */
        background-size: calc(100% * 544 / 500) auto;
        padding: 4px 12px 10px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .article-down {
        width: 100%;
        height: 37px;
        left: 0;
        background: url("/img2/artical/articalBottom.png") center top / calc(100% * 541 / 420) 37px no-repeat;
    }

    .article-mark {
        left: 0;
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
        margin-left: 0;
        padding-left: 12px;
        background-image: url("/img2/artical/articalLineMark.jpg");
        background-repeat: no-repeat;
        background-position: left center;
        background-size: auto 19px;
    }

    .article-body > .article-mark:first-child,
    .article-body > .news-item:first-child .article-mark {
        top: 0;
        margin-bottom: 8px;
    }

    .article-body p {
        text-indent: 1.2em;
    }

    .article-body .wtable {
        max-width: 100%;
    }

    .cta-row {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin: 8px 0 20px;
    }

    /* Те же спрайты «Регистрация» / «Скачать», что на десктопе */
    .cta {
        display: block;
        width: 220px;
        height: 50px;
        max-width: 100%;
        margin: 0 auto;
        border: none;
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: top center;
        background-size: 220px 100px;
    }

    .cta:hover {
        background-position: bottom center;
        background-color: transparent;
    }

    .cta-reg { background-image: var(--cta-reg, url("/img2/2dbuttons/reg.png")); }
    .cta-client { background-image: var(--cta-client, url("/img2/2dbuttons/client.png")); }

    .cta > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .foot-stage {
        height: auto;
    }

    .foot-inner {
        display: none;
    }

    .foot-copy {
        background: #1a120c;
        font-size: 14px;
        padding: 16px 12px 24px;
    }
}

.locale-fallback {
    color: #7a4a12;
    font-size: 12px;
    font-style: italic;
    margin: 0 0 10px;
}

.article-body p.content-preview-banner {
    text-indent: 0;
    text-align: left;
    font-size: 12px;
    font-style: normal;
    margin: 0 0 10px;
    padding: 6px 8px;
    border: 1px solid #86644b;
    background: rgba(113, 23, 31, 0.08);
    color: var(--link);
}

/* EN/UK desktop: same image buttons as RU (sprites via --menu-btn-* / --cta-*).
   Mobile menu stays text for all locales (see max-width:1000px rules above). */
@media (min-width: 1001px) {
    html:not(.locale-ru) .menu-btn:not(.menu-btn-status) > span,
    html:not(.locale-ru) .cta > span {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    html:not(.locale-ru) .menu-btn:not(.menu-btn-status) {
        /* keep RU sprite layout; localized via CSS variables */
        color: transparent;
    }

    html:not(.locale-ru) .cta {
        color: transparent;
        border: none;
        background-color: transparent;
    }
}

/* Library / knowledge base */
.lib-kb-search {
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
    border: 0;
}

.lib-kb-search-label {
    display: block;
    margin: 0 0 6px;
    color: #381208;
    font-size: 12px;
    font-weight: bold;
}

.lib-kb-search-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.lib-kb-search-input {
    flex: 1 1 220px;
    min-width: 0;
    max-width: 100%;
    padding: 4px 8px;
    border: 1px solid #9a7d50;
    background: #f3d7a4;
    color: #381208;
    font-size: 13px;
}

.lib-kb-search-btn,
.npc-search button[type="submit"],
.lib-search button[type="submit"],
.shop-search-form button[type="submit"] {
    padding: 5px 18px;
    border: 1px solid #7a4a12;
    border-bottom-color: #5a3a18;
    background: linear-gradient(180deg, #f8d48a 0%, #e4b97a 55%, #d4a86a 100%);
    color: #381208;
    font: inherit;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 0.02em;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 220, 0.55),
        0 1px 2px rgba(56, 18, 8, 0.28);
}

.lib-kb-search-btn:hover,
.npc-search button[type="submit"]:hover,
.lib-search button[type="submit"]:hover,
.shop-search-form button[type="submit"]:hover {
    background: linear-gradient(180deg, #ffe09a 0%, #f0c878 50%, #e4b97a 100%);
    border-color: #9a6a2e;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 240, 0.7),
        0 2px 4px rgba(56, 18, 8, 0.35);
}

.lib-kb-search-btn:active,
.npc-search button[type="submit"]:active,
.lib-search button[type="submit"]:active,
.shop-search-form button[type="submit"]:active {
    background: linear-gradient(180deg, #d4a86a 0%, #e4b97a 100%);
    box-shadow: inset 0 1px 3px rgba(56, 18, 8, 0.35);
}

.lib-kb-results {
    margin: 0 0 18px;
}

.lib-kb-results-count {
    margin: 0 0 10px;
    color: #5a3a18;
    font-size: 12px;
}

.lib-kb-hit {
    margin: 0 0 10px;
    padding: 10px 12px;
    background: rgba(56, 18, 8, 0.03);
    border: 1px solid rgba(122, 74, 18, 0.18);
    border-left: 3px solid #9a6a2e;
}

.lib-kb-hit-title {
    margin: 0 0 4px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.35;
}

.lib-kb-hit-title a {
    color: #71171f;
    text-decoration: none;
}

.lib-kb-hit-title a:hover {
    color: #381208;
    text-decoration: underline;
}

.lib-kb-hit-section {
    margin: 0 0 4px;
    color: #5a3a18;
    font-size: 11px;
}

.lib-kb-hit-snippet {
    margin: 0;
    color: #381208;
    font-size: 12px;
    line-height: 1.45;
    text-align: justify;
}

.lib-kb-hit mark,
.lib-kb-hit-title mark {
    background: #f0d49a;
    color: inherit;
    padding: 0 1px;
}

.lib-lead {
    margin: 0 0 14px;
    text-align: justify;
}

.lib-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 0 0 18px;
    padding: 10px 12px;
    background: rgba(122, 74, 18, 0.06);
    border: 1px solid rgba(122, 74, 18, 0.22);
}

.lib-jump a {
    display: inline-block;
    padding: 3px 9px;
    color: #71171f;
    font-size: 12px;
    line-height: 1.35;
    text-decoration: none;
    border: 1px solid rgba(113, 23, 31, 0.28);
    background: rgba(255, 255, 255, 0.35);
}

.lib-jump a:hover {
    color: #381208;
    border-color: #7a4a12;
    background: rgba(248, 203, 113, 0.25);
    text-decoration: none;
}

.lib-toc {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lib-toc-section {
    margin: 0;
    padding: 10px 12px 12px;
    background: rgba(56, 18, 8, 0.03);
    border: 1px solid rgba(122, 74, 18, 0.18);
    border-left: 3px solid #9a6a2e;
    scroll-margin-top: 12px;
}

.lib-toc-title {
    margin: 0 0 8px;
    padding: 0 0 6px;
    color: #7a4a12;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.25;
    border-bottom: 1px solid rgba(122, 74, 18, 0.2);
}

.lib-toc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lib-toc-list li {
    display: flex;
    align-items: baseline;
    gap: 4px;
    width: 50%;
    box-sizing: border-box;
    margin: 0;
    padding: 2px 8px 2px 0;
    font-size: 13px;
    line-height: 1.35;
}

.lib-toc-list li.is-local a {
    color: #71171f;
    font-weight: bold;
}

.lib-toc-list li.is-wiki a {
    color: #5a3a22;
}

.lib-badge {
    flex-shrink: 0;
    color: #86644b;
    font-size: 10px;
    font-weight: normal;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.lib-ext {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    margin-top: 1px;
    color: #86644b;
    opacity: 0.9;
    line-height: 1;
}

.lib-ext svg {
    display: block;
}

.lib-foot {
    margin: 18px 0 0;
    padding-top: 10px;
    border-top: 1px solid rgba(122, 74, 18, 0.2);
    font-size: 12px;
}

.lib-soon {
    color: var(--muted);
}

.lib-sub {
    margin: 18px 0 8px;
    color: var(--ink);
    font-size: 13px;
    font-weight: bold;
}

.lib-back {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 1.6em;
    padding: 0 0 10px;
    border-bottom: 1px solid rgba(113, 23, 31, 0.18);
    font-family: var(--font);
    font-size: 12px;
    line-height: 1.35;
}

.lib-back-link {
    color: var(--link);
    font-weight: bold;
    text-decoration: none;
}

.lib-back-link:hover {
    text-decoration: underline;
}

.lib-back-sep {
    color: var(--muted);
    font-weight: normal;
    user-select: none;
}

.article-html {
    line-height: 1.45;
}

.article-html::after {
    content: "";
    display: table;
    clear: both;
}

.article-html img {
    max-width: 100%;
    height: auto;
}

.article-html h1,
.article-html h2,
.article-html h3,
.article-html h4 {
    margin: 14px 0 8px;
    color: #7a4a12;
    scroll-margin-top: 16px;
}

.article-html h1 {
    font-size: 1.45em;
}

.article-html h2 {
    font-size: 1.25em;
}

.article-html h3 {
    font-size: 1.1em;
    margin: 12px 0 6px;
}

.article-html a.cms-heading-anchor {
    color: inherit;
    text-decoration: none;
    border-bottom: none;
}

.article-html a.cms-heading-anchor:hover,
.article-html a.cms-heading-anchor:focus {
    color: inherit;
    text-decoration: underline;
    border-bottom: none;
}

.article-html ul,
.article-html ol {
    margin: 8px 0 12px;
    padding-left: 22px;
}

.article-html .cms-align-left { text-align: left; }
.article-html .cms-align-center { text-align: center; }
.article-html .cms-align-right { text-align: right; }
.article-html .cms-align-justify { text-align: justify; }

.article-html p.cms-hr {
    text-align: center;
    margin: 12px 0;
}

.article-html p.cms-hr img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

.article-html .cms-float-left {
    float: left;
    margin: 0 1em 0.75em 0;
    max-width: 50%;
}

.article-html .cms-float-right {
    float: right;
    margin: 0 0 0.75em 1em;
    max-width: 50%;
}

.article-html .cms-valign-top { vertical-align: top; }
.article-html .cms-valign-middle { vertical-align: middle; }
.article-html .cms-valign-bottom { vertical-align: bottom; }
.article-html .cms-clear { clear: both; }

/* Section stripe (old articalLineMark) — insertable as block «Полоска» in CMS */
.article-html .article-mark,
.article-html p.article-mark {
    text-indent: 0;
    text-align: left;
    margin: 14px 0 10px;
}

.article-html table.cms-table {
    border-collapse: collapse;
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    margin: 0.75em 0;
}

.article-html table.cms-table td,
.article-html table.cms-table th {
    border: 1px solid #6a5538;
    padding: 4px 6px;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.article-html table.cms-table th {
    background: rgba(122, 74, 18, 0.12);
    font-weight: bold;
}

.article-html iframe.cms-embed {
    display: block;
    max-width: 100%;
    margin: 0.75em auto;
    border: 0;
    background: transparent;
}

@media (max-width: 560px) {
    .lib-toc-list li {
        width: 100%;
    }
}

.wtable {
    width: 100%;
    max-width: 500px;
    margin: 0 auto 16px;
    border-collapse: separate;
    border-spacing: 1px;
    background-color: #58645d;
    font-family: var(--font);
    font-size: 13px;
    color: #381208;
}

.wtable td {
    padding: 1px;
    border: 0;
    color: #381208;
    vertical-align: middle;
}

.wtable .rowh td {
    text-align: center;
    font-weight: bold;
    background: #9a7d50;
    height: 25px;
}

.wtable .row1 td { background: #e4b97a; }
.wtable .row2 td { background: #cba66f; }

.wtable a {
    color: #71171f;
    text-decoration: underline;
}

.wtable .col-war-phase,
.wtable .col-status {
    text-align: center;
    width: 48px;
}

.wtable .war-status-icon,
.wtable .siege-status-icon {
    width: 40px;
    height: 40px;
    vertical-align: middle;
}

.wtable img {
    vertical-align: middle;
}

.wtable select,
.wtable input[type="text"],
.wtable input[type="number"],
.wtable input[type="search"],
.npc-search select,
.npc-search input,
.lib-search select,
.lib-search input {
    max-width: 100%;
    background: #f3d7a4;
    color: #381208;
    border: 1px solid #9a7d50;
    padding: 2px 6px;
    font: inherit;
}

.inp-num { width: 64px; }

.npc-actions {
    text-align: right;
}

.npc-card {
    display: flex;
    gap: 12px;
    margin: 16px 0 8px;
    color: #00312d;
    font-size: 13px;
}

.npc-avatar {
    flex: 0 0 75px;
    width: 75px;
    height: 100px;
}

.npc-body { flex: 1; min-width: 0; }

.npc-name.harakter-1 { color: #0044cc; }
.npc-name.harakter-2 { color: #b00000; }

.npc-drop {
    display: flex;
    gap: 10px;
    margin: 8px 0;
    align-items: flex-start;
}

.npc-hr {
    text-align: center;
    margin: 8px 0 16px;
}

.npc-pages {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin: 16px 0;
}

.npc-pages a {
    min-width: 24px;
    text-align: center;
    padding: 2px 6px;
    border: 1px solid #7a6248;
    text-decoration: none;
    color: var(--link);
}

.npc-pages a.is-active {
    font-weight: bold;
    background: rgba(0, 0, 0, 0.08);
}

.recipe-list { max-width: 350px; margin: 12px auto; }
.recipe-list td { text-align: left; }
.recipe-head { text-align: center; margin: 12px 0; color: #00312d; }
.recipe-back { text-align: right; }
.recipe-flow { max-width: 500px; margin: 12px auto; }
.recipe-col { width: 200px; vertical-align: top; text-align: center; color: #00312d; font-size: 13px; }
.recipe-arrow { width: 100px; text-align: center; vertical-align: middle; }
.recipe-piece { margin: 8px 0; }
.item-card { margin: 12px 0; color: #00312d; font-size: 13px; }

.article-header {
    display: flex;
    align-items: center;
    width: 544px;
    max-width: 100%;
    height: 38px;
    margin: 0 auto;
    padding: 0 16px 0 58px;
    box-sizing: border-box;
    background: url("/img2/artical/articalHeader.png") no-repeat;
    color: #f8cb71;
    font-family: var(--font);
    font-size: 13px;
    font-weight: bold;
    line-height: 1.2;
}

.ratings-nav-article { margin-bottom: 18px; }
.ratings-nav { margin: 0; font-family: var(--font); font-size: 13px; }
.ratings-pages {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    margin: 0;
}
.ratings-pages td {
    vertical-align: middle;
    padding: 0;
    border: 0;
}
.ratings-pages-item { width: 50%; }
.ratings-pages a {
    display: block;
    color: #71171f;
    text-decoration: underline;
    font-size: 13px;
    padding: 2px 0 2px 10px;
    font-family: var(--font);
}
.ratings-pages a.is-active {
    color: #a10000;
    text-decoration: none;
    font-weight: bold;
    background: url("/img2/artical/asd123r31fr13.jpg") left center repeat-y;
}
.ratings-pages-ornament {
    width: 12px;
    min-width: 12px;
}
.ratings-pages-ornament-top {
    height: 16px;
    background: url("/img2/artical/t7hgr9fs_01.jpg") top right no-repeat;
}
.ratings-pages-ornament-mid {
    background: url("/img2/artical/t7hgr9fs_02.jpg") top right repeat-y;
}
.ratings-pages-ornament-bottom {
    height: 17px;
    background: url("/img2/artical/t7hgr9fs_03.jpg") top right no-repeat;
}
.ratings-brackets a.is-active { font-weight: bold; text-decoration: none; }
.ratings-religion-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 16px; }
.ratings-domain { margin: 18px auto; }
.klan-icon { vertical-align: middle; margin-right: 4px; }

.ratings-online-table {
    max-width: 500px;
}
.ratings-online-table td {
    text-align: center;
    vertical-align: middle;
}
.ratings-online-table .col-num { width: 30px; }
.ratings-online-table .col-name { width: 200px; }
.ratings-online-table .col-level { width: 80px; }
.ratings-online-table .col-relig { width: 50px; }
.ratings-online-table img {
    vertical-align: middle;
}

.article-body p.ratings-domain-head {
    text-align: center;
    text-indent: 0;
    margin: 0;
    line-height: 1.55;
}
.ratings-land-wrap {
    overflow-x: auto;
    margin: 0 auto 28px;
}
.ratings-land-table {
    width: 560px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.ratings-land-table td {
    text-align: center;
    vertical-align: middle;
}
.ratings-land-table .col-region { width: 160px; }
.ratings-land-table .col-type,
.ratings-land-table .col-mobs { width: 20px; }
.ratings-land-table .col-owner,
.ratings-land-table .col-atk { width: 129px; }
.ratings-land-table .col-phase { width: 100px; }
.ratings-land-table .col-status {
    width: 42px;
    max-width: 42px;
    padding-left: 0;
    padding-right: 0;
}
.ratings-land-table .col-status .siege-status-icon {
    display: block;
    margin: 0 auto;
}
.ratings-land-table img {
    vertical-align: middle;
}

.ratings-battles-wrap {
    overflow-x: auto;
    margin: 0 auto 22px;
    max-width: 544px;
}
.ratings-battles-table {
    max-width: 100%;
    width: 100%;
    table-layout: fixed;
}
.ratings-battles-table td {
    word-wrap: break-word;
    overflow-wrap: anywhere;
    vertical-align: middle;
}

.shops-table td { vertical-align: top; }
.shop-total { text-align: center; white-space: nowrap; }
.shop-off { color: #b00000; margin-left: 4px; }
.shop-item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: #00312d;
    font-size: 13px;
    text-align: left;
}
.shop-item img { flex: 0 0 75px; }
.shops-goods td { vertical-align: top; }

.article-body p.shop-search-hint,
.article-body p.shop-search-credit {
    color: #00312d;
    font-size: 13px;
}
.shop-search-hint {
    margin: 0 0 12px;
    text-align: left;
    text-indent: 0;
}
.shop-search-credit {
    margin: 16px 0 0;
    text-align: center;
    text-indent: 0;
}
.shop-search-form {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    justify-content: center;
    margin: 0 0 16px;
}
.shop-search-ac {
    position: relative;
    flex: 1 1 auto;
    max-width: 360px;
}
.shop-search-ac input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    padding: 3px 6px;
    font: inherit;
    color: #381208;
    background: #f3d7a4;
    border: 1px solid #9a7d50;
}
.shop-search-suggest {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    max-height: 240px;
    overflow-y: auto;
    background: #f3d7a4;
    border: 1px solid #9a7d50;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
    text-align: left;
}
.shop-search-suggest li {
    padding: 6px 8px;
    cursor: pointer;
    color: #381208;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.shop-search-suggest li:hover,
.shop-search-suggest li.is-active {
    background: #e4b97a;
}
.shop-search-suggest mark {
    background: #cba66f;
    color: inherit;
    padding: 0;
}
.shop-search-wrap {
    overflow-x: auto;
}
.shops-search-table {
    max-width: 100%;
    width: 100%;
}
.shops-search-table th,
.shops-search-table td {
    vertical-align: top;
}
.shops-search-table thead th {
    text-align: center;
    font-weight: bold;
    background: #9a7d50;
    height: 25px;
    padding: 1px 4px;
    border: 0;
    color: #381208;
    cursor: pointer;
    user-select: none;
}
.shops-search-table thead th[aria-sort="ascending"]::after {
    content: " \25b2";
    font-size: 10px;
}
.shops-search-table thead th[aria-sort="descending"]::after {
    content: " \25bc";
    font-size: 10px;
}
.shops-search-table th:nth-child(3),
.shops-search-table th:nth-child(4),
.shops-search-table td:nth-child(3),
.shops-search-table td:nth-child(4) {
    white-space: nowrap;
}
.shops-search-table td.shop-search-qty {
    white-space: normal;
    overflow-wrap: break-word;
    word-wrap: break-word;
    max-width: 7em;
    line-height: 1.25;
}
.shops-search-table td.shop-search-qty .shop-off {
    margin-left: 0;
}
.shop-search-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #00312d;
    font-size: 13px;
}
.shop-search-item .shop-item-code {
    display: block;
    margin: 0;
    text-align: center;
    overflow-wrap: anywhere;
}
.shop-search-item img {
    display: block;
    flex: none;
    width: 75px;
    height: 75px;
}
.shop-search-item-desc {
    width: 100%;
    text-align: left;
}
.shop-copy {
    display: inline;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #71171f;
    text-decoration: underline;
    cursor: pointer;
}
.shop-item-code {
    display: block;
    margin-bottom: 4px;
}
.shop-search-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 40;
    transform: translateX(-50%);
    padding: 6px 14px;
    background: #9a7d50;
    color: #f3d7a4;
    border: 1px solid #381208;
    font-size: 13px;
}

.ds-live {
    text-align: left;
    height: 203px;
    overflow-y: hidden;
    margin: 4px 0 8px;
}
.ds-live-text {
    font-family: Arial, Times, FreeSerif, serif;
    font-size: 12px;
    font-weight: bold;
    color: var(--ink);
    line-height: 1.35;
}
.ds-live-text a {
    color: var(--link);
}
.ds-live .cdate {
    color: #744032;
}
.ds-live .c_ava {
    vertical-align: bottom;
}
.ds-live-cursor {
    background-color: #000;
}

.home-banners {
    text-align: center;
}
.home-banners-hero {
    margin: 0 auto 12px;
}
.home-banners-hero-link {
    display: inline-block;
    max-width: 100%;
    line-height: 0;
}
.home-banners-stage {
    position: relative;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    vertical-align: middle;
}
.home-banners-sizer {
    display: block;
    max-width: 100%;
    height: auto;
    visibility: hidden;
    pointer-events: none;
}
.home-banners-frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    opacity: 0;
    transform: scale(1.03);
    transition:
        opacity 550ms ease,
        transform 550ms cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
    pointer-events: none;
    z-index: 1;
}
.home-banners-frame.is-active {
    z-index: 2;
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}
.home-banners-frame.is-active.is-enter {
    opacity: 0;
    transform: scale(1.035);
}
.home-banners-frame.is-leave {
    z-index: 1;
    opacity: 0;
    transform: scale(0.985);
}
.home-banners.is-reduced-motion .home-banners-frame,
.home-banners.is-reduced-motion .home-banners-thumb,
.home-banners.is-reduced-motion .home-banners-thumb img {
    transition: none !important;
    transform: none !important;
}
.home-banners-strip {
    display: flex;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: thin;
    scrollbar-color: #8a6a3a transparent;
}
@supports (justify-content: safe center) {
    .home-banners-strip {
        justify-content: safe center;
    }
}
.home-banners.is-strip-overflow .home-banners-strip {
    justify-content: flex-start;
}
.home-banners-strip::-webkit-scrollbar {
    height: 6px;
}
.home-banners-strip::-webkit-scrollbar-thumb {
    background: #8a6a3a;
    border-radius: 3px;
}
.home-banners-strip::-webkit-scrollbar-track {
    background: transparent;
}
.home-banners-strip-inner {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    align-items: center;
    width: max-content;
    max-width: none;
}
.home-banners-thumb {
    display: block;
    flex: 0 0 auto;
    line-height: 0;
    opacity: 0.72;
    transition: opacity 220ms ease;
}
@media (hover: hover) and (pointer: fine) {
    .home-banners-thumb {
        transition: opacity 220ms ease, transform 220ms ease;
    }
    .home-banners-thumb:hover,
    .home-banners-thumb:focus-visible {
        opacity: 1;
        transform: translateY(-1px);
    }
}
.home-banners-thumb:focus-visible {
    opacity: 1;
}
.home-banners-thumb.is-active {
    opacity: 1;
}
.home-banners-thumb img {
    width: 96px;
    max-width: none;
    height: auto;
    vertical-align: middle;
    border: 1px solid transparent;
    box-sizing: border-box;
    transition: border-color 220ms ease, filter 220ms ease;
}
.home-banners-thumb.is-active img {
    border-color: #744032;
    filter: brightness(1.05);
}
.home-banners-standalone {
    text-align: center;
}
.home-banners-standalone img {
    max-width: 100%;
    height: auto;
}

@media (prefers-reduced-motion: reduce) {
    .home-banners-frame,
    .home-banners-thumb,
    .home-banners-thumb img {
        transition: none !important;
        transform: none !important;
    }
}

/* ===== Character card ===== */
html.page-char,
body.page-char {
    min-height: 100%;
    background: #0b0705;
    color: #1a120c;
}
body.page-char {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
}
.char-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    background-color: #0b0705;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
}
.char-top,
.char-main,
.char-foot,
.page-char .staging,
.page-char .locale-preview {
    position: relative;
    z-index: 1;
}
.char-top {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 18px;
    background: rgba(8, 5, 3, 0.72);
    border-bottom: 1px solid rgba(248, 203, 113, 0.35);
    color: #ead9c0;
}
.char-top a {
    color: #f8cb71;
    text-decoration: none;
}
.char-top a:hover,
.char-top a.is-active {
    color: #ffe2a0;
}
.char-top-logo {
    font-weight: bold;
    letter-spacing: 0.04em;
}
.char-top-nav {
    display: flex;
    gap: 6px;
    align-items: center;
}
.char-main {
    padding: 12px 12px 36px;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    flex: 1 0 auto;
}
.char-foot {
    text-align: center;
    padding: 12px;
    color: #c5ab83;
    font-size: 12px;
    background: rgba(8, 5, 3, 0.55);
    flex-shrink: 0;
    margin-top: auto;
    width: 100%;
    box-sizing: border-box;
}
.char-layout {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
    align-items: flex-start;
}
.char-armory {
    position: relative;
    width: 681px;
    max-width: 100%;
    height: 665px;
    flex: 0 0 auto;
    color: #1a120c;
}
.char-armory-bg {
    display: block;
    width: 681px;
    max-width: none;
    height: 665px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    pointer-events: none;
}
.char-profile {
    position: absolute;
    left: 0;
    top: 0;
    width: 380px;
    height: 665px;
    z-index: 2;
    font-size: 13px;
    line-height: 1.4;
}
.char-avatar {
    position: absolute;
    top: 70px;
    left: 15px;
    width: 75px;
    height: 100px;
    display: block;
    border: 0;
    background: #000;
    z-index: 3;
    object-fit: cover;
}
.char-pet-avatar {
    position: absolute;
    top: 70px;
    left: 280px;
    width: 75px;
    height: 100px;
    display: block;
    border: 0;
    background: #000;
    z-index: 3;
    object-fit: cover;
}
.char-name-block {
    position: absolute;
    top: 70px;
    left: 100px;
    width: 170px;
    text-align: center;
    z-index: 4;
}
.char-name-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    justify-content: center;
}
.char-login {
    font-size: 15px;
}
.char-icon {
    vertical-align: middle;
}
.char-pet-line {
    margin: 8px 0 0;
    text-align: center;
    font-size: 12px;
}
.char-profile-body {
    position: absolute;
    top: 220px;
    left: 35px;
    width: 300px;
    z-index: 3;
}
.char-profile-body p {
    margin: 0 0 6px;
}
.char-banned {
    color: #a00;
    font-weight: bold;
    text-align: center;
}
.char-about {
    position: absolute;
    top: 450px;
    left: 27px;
    width: 325px;
    z-index: 3;
    max-height: 90px;
    overflow: auto;
    color: var(--ink);
    font-size: 12px;
    line-height: 1.35;
    text-align: left;
}
.char-about p {
    margin: 0 0 4px;
    padding: 0;
    text-indent: 0;
    text-align: left;
    font-size: 12px;
}
.char-about ul,
.char-about ol {
    margin: 0 0 4px;
    padding-left: 18px;
}
.char-about a {
    color: var(--link);
}
.char-shops {
    position: absolute;
    top: 550px;
    left: 22px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.char-shop img {
    display: block;
}
.char-doll-wrap {
    position: absolute;
    top: 47px;
    left: 383px;
    z-index: 2;
    width: 273px;
    height: 584px;
}
.char-doll {
    position: relative;
    width: 273px;
    height: 584px;
}
.char-doll-frame {
    display: block;
    width: 273px;
    height: 584px;
    position: relative;
    z-index: 2;
    pointer-events: none;
}
.char-doll-body {
    position: absolute;
    top: 28px;
    left: 15px;
    z-index: 1;
    pointer-events: none;
}
.char-slot {
    position: absolute;
    z-index: 3;
    display: block;
}
.char-side {
    flex: 1 1 320px;
    min-width: 280px;
    max-width: 560px;
}
.char-tabs {
    width: 100%;
}
.char-tablist {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    background: #211510 url("/img2/menu_pattern.jpg") repeat-x 80px 0;
    background-size: cover;
    border: 1px solid #542219;
    border-radius: 4px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}
.char-tab {
    flex: 1 1 auto;
    min-width: 90px;
    margin: 0;
    padding: 12px 14px;
    border: 0;
    border-right: 1px solid #542219;
    background: transparent;
    color: #ffc056;
    text-shadow: 0 -1px 1px #586835;
    font: 14px/1 Helvetica, Arial, sans-serif;
    cursor: pointer;
}
.char-tab:last-child {
    border-right: 0;
}
.char-tab.is-active,
.char-tab:hover {
    background: rgba(255, 192, 86, 0.12);
    color: #ffe2a0;
}

/* Seamless article frame (same assets as portal articles — no 9-slice seams) */
.char-article {
    width: 542px;
    max-width: 100%;
}
.char-article-up {
    width: 542px;
    max-width: 100%;
    height: 34px;
    position: relative;
    left: 2px;
    background: url("/img2/artical/articalUp.png") no-repeat;
}
.char-article-body {
    background: url("/img2/artical/articalCenter.png") repeat-y;
    padding: 4px 15px 10px 20px;
    color: #1a120c;
    font-size: 13px;
    min-height: 420px;
    box-sizing: border-box;
}
.char-article-down {
    width: 541px;
    max-width: 100%;
    height: 37px;
    position: relative;
    left: 3px;
    background: url("/img2/artical/articalBottom.png") no-repeat;
}
.char-article-mark {
    position: relative;
    left: -8px;
    min-height: 19px;
    margin: 0 0 12px;
    padding: 0 8px 0 15px;
    background: url("/img2/artical/articalLineMark.jpg") left center no-repeat;
    color: #744032;
    font-size: 13px;
    font-weight: bold;
    line-height: 19px;
}
.char-empty {
    text-align: center;
    color: #744032;
}
.char-presents {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.char-present {
    display: block;
}
.char-ach-summary {
    margin: 0 0 12px;
    font-size: 13px;
}
.char-ach-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.char-ach {
    display: flex;
    width: 100%;
    height: 56px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    align-items: stretch;
}
.char-ach-l {
    flex: 0 0 118px;
    width: 118px;
    height: 56px;
    background: url("/img2/ach_L.png") left center no-repeat;
}
.char-ach-c {
    flex: 1 1 auto;
    min-width: 0;
    height: 56px;
    background: url("/img2/ach_C.png") left center repeat-x;
}
.char-ach-r {
    flex: 0 0 64px;
    width: 64px;
    height: 56px;
    background: url("/img2/ach_R.png") right center no-repeat;
}
.char-ach-img {
    width: 48px;
    height: 48px;
    position: relative;
    left: 4px;
    top: 4px;
}
.char-ach-img img {
    display: block;
    width: 48px;
    height: 48px;
}
.char-ach-txt {
    position: relative;
    top: 5px;
    left: -10px;
    padding: 0 8px;
    text-align: center;
    font-size: 12px;
    line-height: 1.25;
    max-height: 48px;
    overflow: hidden;
}
.char-ach-right {
    position: relative;
    top: 0;
    left: -10px;
    height: 56px;
    text-align: center;
}
.char-ach-round {
    width: 26px;
    height: 26px;
    margin: 8px auto 0;
    background: url("/img2/ach_ring.png") center no-repeat;
    position: relative;
}
.char-ach-round-txt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    font-size: 12px;
    line-height: 1;
}
.char-ach-finish {
    margin-top: 2px;
    color: #004500;
    font-size: 11px;
    line-height: 1;
}
.char-rating-blocks {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: center;
}
.char-rating-block {
    width: 100%;
    max-width: 320px;
}
.char-rating-title {
    margin: 0 0 8px;
    font-size: 14px;
    text-align: center;
}
.char-rating-table {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    border-collapse: separate;
    border-spacing: 1px;
    background: #6a5538;
}
.char-rating-table td {
    height: 25px;
    vertical-align: middle;
    text-align: center;
    background: #f3e2c2;
    color: #1a120c;
    font-size: 13px;
}
.char-rating-table .row2 td {
    background: #e8d2a8;
}
.char-rating-table .is-self td {
    background: #f8eccf;
}
.char-rating-place {
    width: 75px;
}
.char-rating-login {
    width: 225px;
}
.char-rating-table a {
    color: #744032;
    text-decoration: none;
}
.char-rating-table a:hover {
    color: #410000;
    text-decoration: underline;
}
.char-pets {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}
.char-pet {
    margin: 0;
    width: 110px;
    text-align: center;
    font-size: 12px;
}
.char-pet img {
    display: block;
    margin: 0 auto 6px;
    width: 75px;
    height: 100px;
    object-fit: cover;
    border: 1px solid #410000;
}
.char-hint {
    position: fixed;
    z-index: 50;
    max-width: 280px;
    padding: 8px 10px;
    background: #f8dcb3;
    border: 1px solid #410000;
    color: #1a120c;
    font-size: 12px;
    line-height: 1.35;
    pointer-events: none;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.2);
}
.page-char .char-armory a,
.page-char .char-article a {
    color: #744032;
}
.page-char .char-armory a:hover,
.page-char .char-article a:hover {
    color: #410000;
}

@media (max-width: 1100px) {
    .char-armory {
        transform-origin: top left;
        transform: scale(0.85);
        margin-bottom: -100px;
        margin-right: -100px;
    }
}

@media (max-width: 760px) {
    .char-armory {
        transform: scale(0.55);
        margin-bottom: -300px;
        margin-right: -300px;
        height: 665px;
    }
    .char-side {
        max-width: 100%;
        width: 100%;
    }
    .char-article,
    .char-article-up,
    .char-article-down {
        width: 100%;
        max-width: 100%;
        left: 0;
    }
    .char-article-up,
    .char-article-down {
        background-position: center top;
        height: 37px;
    }
    .char-article-up {
        background-size: calc(100% * 542 / 420) 37px;
    }
    .char-article-down {
        background-size: calc(100% * 541 / 420) 37px;
    }
    .char-article-body {
        background-size: calc(100% * 544 / 500) auto;
        background-position: top center;
        padding-left: 12px;
        padding-right: 12px;
        overflow-x: auto;
    }
}

/* Download / client page */
.download-lead { margin: 0 0 12px; }
.download-file { margin: 0 0 16px; text-align: center; font-weight: bold; }
.download-link { font-size: 15px; }
.download-size { font-weight: normal; margin-left: 4px; }
.download-steam { margin: 0 0 8px; text-align: center; }
.download-steam img { vertical-align: middle; border: 0; }
.download-changelog { text-align: left; font-size: 13px; line-height: 1.45; }
.download-changelog ul { margin: 0 0 12px 1.2em; padding: 0; }
.download-changelog p { margin: 10px 0 4px; font-weight: bold; }
.download-page-body > .article-mark {
    margin: 22px 0 12px;
}

.foot-copy p,
.char-foot p {
    margin: 0;
}

.foot-legal {
    margin-top: 8px;
    font-size: 13px;
}

.foot-legal a,
.foot-legal-btn {
    color: var(--muted);
    text-decoration: underline;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.foot-legal a:hover,
.foot-legal-btn:hover {
    color: var(--gold);
}

.foot-legal-sep {
    margin: 0 6px;
    color: #86644b;
}

html:not(.cookie-consent-ok) {
    padding-bottom: 9rem;
}

.cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5000;
    max-height: 70vh;
    overflow: auto;
    background: #2a1a10;
    color: #e8d4b0;
    border-top: 1px solid #6a5538;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45);
}

html.cookie-consent-ok .cookie-banner {
    display: none;
}

.cookie-banner-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 12px 16px 14px;
    font-size: 13px;
    line-height: 1.4;
}

.cookie-banner-title {
    margin: 0 0 6px;
    color: var(--gold);
    font-size: 15px;
    font-weight: bold;
}

.cookie-banner-text {
    margin: 0 0 10px;
}

.cookie-banner a,
.cookie-banner-policy {
    color: var(--gold);
    text-decoration: underline;
}

.cookie-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.cookie-btn {
    font: inherit;
    font-size: 13px;
    line-height: 1.2;
    cursor: pointer;
    padding: 7px 12px;
    border-radius: 2px;
    border: 1px solid #6a5538;
    background: #3a2414;
    color: var(--gold);
}

.cookie-btn-accept {
    background: #5a3a18;
    border-color: var(--gold);
}

.cookie-btn:hover,
.cookie-btn:focus {
    outline: 1px solid var(--gold);
}

.cookie-customize {
    margin-top: 12px;
    padding: 10px 12px;
    background: #f4ead2;
    color: var(--ink);
    border: 1px solid #6a5538;
}

.cookie-customize .cookie-banner-policy {
    color: var(--link);
}

.cookie-cat {
    margin: 0 0 8px;
    padding: 0;
    border: 0;
}

.cookie-cat legend {
    padding: 0;
}

.cookie-policy-table th:nth-child(1),
.cookie-policy-table td:nth-child(1) { width: 24%; }
.cookie-policy-table th:nth-child(2),
.cookie-policy-table td:nth-child(2) { width: 18%; }
.cookie-policy-table th:nth-child(3),
.cookie-policy-table td:nth-child(3) { width: 16%; }
.cookie-policy-table th:nth-child(4),
.cookie-policy-table td:nth-child(4) { width: 42%; }

.cookie-policy-table code {
    font-size: 11px;
    word-break: break-all;
}

.cookie-cat-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin: 4px 0 0;
    cursor: pointer;
}

.cookie-cat-row input {
    margin-top: 2px;
}

.cookie-policy {
    margin-top: 18px;
    scroll-margin-top: 16px;
}

.cookie-inline-settings {
    font: inherit;
    color: var(--link);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner {
        box-shadow: none;
    }
}

/* HTTP error pages: art + overlay, no portal chrome */
.error-page {
    min-height: 100vh;
    background: #000;
    color: var(--gold);
}

.error-page .staging {
    width: 100%;
}

.error-page-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 40px);
    padding: 24px 16px 40px;
}

.error-art {
    position: relative;
    margin: 0;
    width: min(100%, 1509px);
    line-height: 0;
}

.error-art img {
    display: block;
    width: 100%;
    height: auto;
}

.error-art::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 48%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.28) 55%, transparent 100%);
    pointer-events: none;
}

.error-overlay {
    position: absolute;
    left: 50%;
    bottom: 7%;
    z-index: 1;
    width: min(92%, 28em);
    margin: 0;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}

.error-code {
    margin: 0;
    color: var(--gold);
    font-family: "Times New Roman", Times, FreeSerif, serif;
    font-size: clamp(56px, 11vw, 112px);
    font-weight: 700;
    line-height: 0.9;
    letter-spacing: 0.06em;
    text-shadow:
        0 0 6px #000,
        0 2px 0 #1a0a00,
        0 4px 18px #000,
        0 0 28px rgba(0, 0, 0, 0.9);
}

.error-reason {
    margin: 10px 0 0;
    color: #f3e0b8;
    font-family: var(--font);
    font-size: clamp(14px, 2.1vw, 22px);
    font-weight: 700;
    line-height: 1.35;
    text-shadow:
        0 0 4px #000,
        0 1px 0 #000,
        0 2px 12px #000;
}

.error-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    justify-content: center;
    margin-top: 18px;
}

.error-home,
.error-back {
    color: var(--gold-2);
    font-size: 14px;
}