/* custom.css */

/* Выпадающее меню "Описание": поднимаем над панелью серверов,
   иначе она перекрывает список и перехватывает клики. */
.navigation { position: relative; z-index: 30; }
.menu__el:hover { z-index: 50; }
.menu__sub-list { z-index: 200; }

/* Затемнение выпадающего меню для читаемости
   (переменная --navigation-bg в теме не задана, поэтому фон был прозрачным). */
.menu__sub-list {
    background-color: rgba(18, 16, 14, 0.95);
    border-top: 2px solid rgba(var(--color-accent), 1);
}
.menu__sub-item {
    color: rgba(235, 228, 216, 0.9);
}
.menu__sub-item:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: rgba(var(--color-accent-2), 1);
}
/* =====================================================================
   Страница «Описание сервера» (about-static-page-smr-*.html)
   Компоненты с префиксом ab- . Работают только внутри .about__content.
   ===================================================================== */
.about__content { line-height: 1.6; }
.about__content p { margin: 0 0 .75rem; }
.about__content .ab-title { margin-bottom: 1rem; }
.about__content .ab-lead { font-size: 1.0625rem; color: #4a3523; margin: 0 0 1.5rem; }

/* Секции и заголовки */
.about__content .ab-sec { margin-top: 2.25rem; padding-top: 1.75rem; border-top: 1px solid rgba(74, 53, 35, .14); }
.about__content .ab-h { font-size: 1.375rem; margin: 0 0 .875rem; }
.about__content .ab-sub { font-weight: 700; color: #4a3523; margin: 1.25rem 0 .5rem; }

/* Списки */
.about__content .list { gap: .5rem; margin: 0 0 1rem; }
.about__content .list li { padding-left: 1.375rem; }
.about__content .list li:before { top: .6em; width: .4375rem; height: .4375rem; background-color: #b8834f; }
.about__content ol.ab-steps { list-style: none; counter-reset: ab-step; padding: 0; margin: 0 0 1rem; display: grid; gap: .625rem; }
.about__content ol.ab-steps > li { counter-increment: ab-step; position: relative; padding-left: 2.25rem; min-height: 1.5rem; }
.about__content ol.ab-steps > li:before { content: counter(ab-step); position: absolute; left: 0; top: .05rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #4a3523; color: #f1e6d6; font-size: .8125rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* Карточки-цифры (рейты, лимиты) */
.about__content .ab-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .625rem; margin: 0 0 1rem; }
.about__content .ab-stat { background: #444038; border-radius: .375rem; padding: .875rem 1rem .75rem; color: #dbd7d0; }
.about__content .ab-stat__val { display: block; font-family: var(--font-0); font-size: 1.75rem; line-height: 1.1; color: #ed9f4d; }
.about__content .ab-stat__lbl { display: block; margin-top: .25rem; font-size: .8125rem; line-height: 1.3; text-transform: uppercase; letter-spacing: .03em; opacity: .85; }

/* Карточки с содержимым */
.about__content .ab-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .75rem; margin: 0 0 1rem; }
.about__content .ab-card { background: rgba(255, 255, 255, .5); border: 1px solid rgba(74, 53, 35, .13); border-radius: .5rem; padding: 1rem 1.125rem; min-width: 0; }
.about__content .ab-card__title { font-weight: 700; color: #4a3523; margin: 0 0 .5rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.about__content .ab-card .list { gap: .3rem; margin: 0; }
.about__content .ab-card p:last-child { margin-bottom: 0; }

/* Плашки-подсказки */
.about__content .ab-note { background: rgba(237, 159, 77, .13); border-left: 3px solid #ed9f4d; border-radius: .25rem; padding: .75rem 1rem; color: #4a3523; margin: 1rem 0; }
.about__content .ab-note_warn { background: rgba(168, 60, 43, .09); border-left-color: #a83c2b; }

/* Метки и «чипсы» времени */
.about__content .ab-tag { display: inline-block; padding: .05rem .5rem; border-radius: .25rem; font-size: .8125rem; font-weight: 700; line-height: 1.5; color: #fff; background: #685c4f; white-space: nowrap; }
.about__content .ab-tag_easy { background: #5b8a3a; }
.about__content .ab-tag_mid { background: #c28a1c; }
.about__content .ab-tag_hard { background: #a83c2b; }
.about__content .ab-chips { display: flex; flex-wrap: wrap; gap: .375rem; margin: .25rem 0 .75rem; }
.about__content .ab-chip { background: #444038; color: #f1d7b4; border-radius: 1rem; padding: .15rem .7rem; font-size: .875rem; white-space: nowrap; }

/* Пары «параметр — значение» */
.about__content .ab-dl { display: grid; grid-template-columns: max-content 1fr; gap: .375rem 1.25rem; margin: 0 0 1rem; }
.about__content .ab-dl dt { font-weight: 700; color: #4a3523; }
.about__content .ab-dl dd { margin: 0; }

/* Таблицы */
.about__content .tblbox { margin: .5rem 0 1.25rem; border-radius: .375rem; }
.about__content .tblbox_fit > table { min-width: 0; }
.about__content .tblbox th { text-align: left; }
.about__content .tblbox td, .about__content .tblbox th { vertical-align: top; }
.about__content .ab-num td, .about__content .ab-num th { text-align: center; }
.about__content .ab-num td:first-child, .about__content .ab-num th:first-child { text-align: left; }
.about__content td .ab-icons { margin-right: .375rem; }

/* Иконки предметов и скриншоты */
.about__content .ab-icons { display: inline-flex; gap: .25rem; vertical-align: middle; }
.about__content .ab-icons img { width: 2rem; height: 2rem; border-radius: .25rem; }
.about__content .ab-shots { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; margin: .5rem 0; }
.about__content .ab-shot { margin: 0; max-width: 100%; }
.about__content .ab-shot img { display: block; max-width: 100%; height: auto; border-radius: .375rem; box-shadow: 0 2px 10px rgba(0, 0, 0, .22); }
.about__content .ab-shot figcaption { font-size: .8125rem; margin-top: .375rem; color: #685c4f; }
.about__content .spoiler__content .ab-shot figcaption { color: #dbd7d0; }
.about__content .spoiler__content { padding: .5rem 0; }
.about__content .spoiler-list { margin: .5rem 0 1rem; }

/* Боссы */
.about__content .ab-bosses { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .625rem; margin: 0 0 1rem; }
.about__content .ab-boss { display: flex; align-items: center; gap: .875rem; background: rgba(255, 255, 255, .5); border: 1px solid rgba(74, 53, 35, .13); border-radius: .5rem; padding: .625rem .875rem; }
.about__content .ab-boss img { width: 3.5rem; height: 3.5rem; object-fit: contain; flex-shrink: 0; }
.about__content .ab-boss__name { font-weight: 700; color: #4a3523; }
.about__content .ab-boss__time { font-size: .875rem; }

@media (max-width: 47.99rem) {
  .about__content .ab-sec { margin-top: 1.75rem; padding-top: 1.25rem; }
  .about__content .ab-stats { grid-template-columns: repeat(2, 1fr); }
  .about__content .ab-dl { grid-template-columns: 1fr; gap: .125rem; }
  .about__content .ab-dl dd { margin-bottom: .5rem; }
}
.about__content .ab-mt { margin-top: 1rem; }
.about__content .ab-inline-ico { width: 2rem; height: 2rem; vertical-align: middle; margin-right: .375rem; }
.about__content .ab-cards_2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 47.99rem) { .about__content .ab-cards_2 { grid-template-columns: 1fr; } }
.about__content .ab-note_row { display: flex; align-items: center; gap: 1rem; }
.about__content .ab-note_row img { flex-shrink: 0; border-radius: .25rem; }
.about__content .ab-shots_half .ab-shot { flex: 1 1 16rem; max-width: calc(50% - .5rem); }
@media (max-width: 47.99rem) { .about__content .ab-shots_half .ab-shot { max-width: 100%; } }

/* ---- Навигация описания: фиксированная колонка со своим ползунком ---- */
.about__inav {
    position: sticky;
    top: calc(var(--top-informer-h, 0px) + var(--ab-hdr-h, 9rem) + 1rem);
    align-self: start;
    max-height: calc(100vh - var(--top-informer-h, 0px) - var(--ab-hdr-h, 9rem) - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(214, 170, 110, .55) transparent;
    padding-right: 6px;
}
.about__inav::-webkit-scrollbar { width: 6px; }
.about__inav::-webkit-scrollbar-track { background: transparent; }
.about__inav::-webkit-scrollbar-thumb { background: rgba(214, 170, 110, .55); border-radius: 3px; }
.about__inav::-webkit-scrollbar-thumb:hover { background: rgba(214, 170, 110, .85); }

.about__content .ab-ico-row { display: flex; align-items: center; gap: .5rem; }
.about__content .ab-ico-set { display: flex; gap: .125rem; flex-wrap: wrap; flex: 0 0 auto; max-width: 6.5rem; }
.about__content .ab-ico { width: 2rem; height: 2rem; border-radius: .25rem; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }

/* in-game Community Board (Alt+B) buttons */
.about__content .ab-gpath { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .25rem .375rem; vertical-align: middle; }
.about__content .ab-garr { color: #8c7a55; }
.about__content .ab-key { display: inline-block; padding: .125rem .5rem; border: 1px solid #5a4f3c; border-bottom-width: 2px; border-radius: .25rem; background: #1d1a16; color: #e9dcc0; font: inherit; font-size: .8125rem; line-height: 1.3; }
.about__content .ab-gb, .about__content .ab-gc, .about__content .ab-gs { height: 22px; padding: 0 12px; font-size: .75rem; background: url(../images/about/ui/gs_full.png) center / 100% 100% no-repeat; }
.about__content .ab-gb { height: 26px; padding: 0 12px 0 32px; font-size: .8125rem; background-image: url(../images/about/ui/gb_l_home.png), url(../images/about/ui/gb_r.png), url(../images/about/ui/gb_mid.png); background-position: left center, right center, center; background-size: auto 100%, auto 100%, 100% 100%; }
.about__content .ab-gb_teleport { background-image: url(../images/about/ui/gb_l_teleport.png), url(../images/about/ui/gb_r.png), url(../images/about/ui/gb_mid.png); }
.about__content .ab-gb_proff { background-image: url(../images/about/ui/gb_l_proff.png), url(../images/about/ui/gb_r.png), url(../images/about/ui/gb_mid.png); }
.about__content .ab-gb_event { background-image: url(../images/about/ui/gb_l_event.png), url(../images/about/ui/gb_r.png), url(../images/about/ui/gb_mid.png); }
.about__content .ab-gb_stat { background-image: url(../images/about/ui/gb_l_stat.png), url(../images/about/ui/gb_r.png), url(../images/about/ui/gb_mid.png); }
.about__content .ab-gc { height: 28px; padding: 0 18px; font-size: .8125rem; color: #fff4dc; text-shadow: 0 1px 1px rgba(0,0,0,.7); background: url(../images/about/ui/gc_full.png) center / 100% 100% no-repeat; }
.about__content .ab-gs { height: 22px; padding: 0 12px; font-size: .75rem; background: url(../images/about/ui/gs_full.png) center / 100% 100% no-repeat; }

.about__content .ab-ii { width: 1.375rem; height: 1.375rem; vertical-align: -.375rem; margin-right: .25rem; border-radius: .1875rem; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }


/* side panel button hint */
.about__content .ab-sidebtn { display: flex; align-items: center; gap: .75rem; margin: 0 0 1rem; }
.about__content .ab-sidebtn__slot { flex: 0 0 auto; width: 3rem; height: 3rem; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: .25rem; background: linear-gradient(160deg, #2c3a3d 0%, #1b2426 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 1px 2px rgba(0,0,0,.4); }
.about__content .ab-sidebtn__slot img { width: 3.25rem; height: 3.25rem; object-fit: contain; }

/* Страница описания: шапка сайта (меню + полоса серверов) фиксированная и
   полупрозрачная, из-за чего прокручиваемый текст и левое меню просвечивали
   и налезали на неё. Делаем шапку плотной только на этой странице
   и опускаем липкое левое меню ниже шапки. */
body:has(.about__inav) { --ab-hdr-h: 9rem; }
body:has(.about__inav) [data-section=navigation]:after { opacity: 1; }
body:has(.about__inav) [data-section=navigation] { background-color: rgba(245, 243, 239, .96); }
body:has(.about__inav) .sbar_pos:after { opacity: 1; }
body:has(.about__inav) .sbar_pos { background-color: rgba(238, 234, 227, .97); }

/* mobile: tables as cards */
@media (max-width: 600px) {
    .about__content .tbl_stack { overflow: visible; }
    .about__content .tbl_stack > table { min-width: 0 !important; width: 100%; }
    .about__content .tbl_stack > table, .about__content .tbl_stack tbody, .about__content .tbl_stack tr, .about__content .tbl_stack td { display: block; width: 100%; box-sizing: border-box; }
    .about__content .tbl_stack thead, .about__content .tbl_stack tr:has(> th) { display: none; }
    .about__content .tbl_stack tr { padding: .625rem .875rem; border-bottom: 1px solid rgba(255,255,255,.08); }
    .about__content .tbl_stack tr:last-child { border-bottom: 0; }
    .about__content .tbl_stack td { padding: .2rem 0 !important; border: 0 !important; }
    .about__content .tbl_stack td:first-child { font-weight: 700; color: #f0a64a; padding-bottom: .35rem !important; }
    .about__content .tbl_stack td:not(:first-child)::before { content: attr(data-l); display: block; font-size: .72em; letter-spacing: .03em; text-transform: uppercase; opacity: .55; margin-bottom: .1rem; }
    .about__content .tbl_stack td:empty { display: none; }
}

/* поиск по описанию */
.ab-search { position: relative; margin: 0 0 1.25rem; z-index: 40; }
.ab-search__input { width: 100%; box-sizing: border-box; height: 3rem; padding: 0 2.75rem 0 2.75rem; border: 1px solid rgba(92,70,50,.22); border-radius: .5rem; background: rgba(255,255,255,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23866b52' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='m12.5 12.5 4 4'/%3E%3C/svg%3E") no-repeat 1rem 50%; font: inherit; font-size: .95rem; color: #3d3027; outline: none; box-shadow: 0 1px 2px rgba(60,40,20,.06); transition: border-color .2s, box-shadow .2s, background-color .2s; -webkit-appearance: none; appearance: none; }
.ab-search__input::-webkit-search-cancel-button { display: none; }
.ab-search__input::placeholder { color: rgba(61,48,39,.45); }
.ab-search__input:focus { border-color: #d98a3a; background-color: #fff; box-shadow: 0 0 0 3px rgba(240,166,74,.18); }
.ab-search__clear { position: absolute; right: .5rem; top: .5rem; width: 2rem; height: 2rem; border: 0; border-radius: 50%; background: transparent; color: #866b52; font-size: 1.35rem; line-height: 1; cursor: pointer; display: none; }
.ab-search__clear:hover { background: rgba(134,107,82,.12); }
.ab-search_filled .ab-search__clear { display: block; }
.ab-search__drop { display: none; position: absolute; left: 0; right: 0; top: calc(100% + .375rem); max-height: min(60vh, 32rem); overflow-y: auto; background: #fbf9f5; border: 1px solid rgba(92,70,50,.18); border-radius: .5rem; box-shadow: 0 12px 32px rgba(40,28,16,.18); padding: .375rem 0; -webkit-overflow-scrolling: touch; }
.ab-search_open .ab-search__drop { display: block; }
.ab-search__grp { position: sticky; top: -.375rem; padding: .5rem 1rem .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #b8702c; background: #fbf9f5; border-top: 1px solid rgba(92,70,50,.08); }
.ab-search__grp:first-child { border-top: 0; }
.ab-search__item { padding: .5rem 1rem; cursor: pointer; font-size: .875rem; line-height: 1.45; color: #4a3b30; }
.ab-search__item:hover, .ab-search__item.is-sel { background: rgba(240,166,74,.14); }
.ab-search__path { font-size: .75rem; color: rgba(74,59,48,.6); margin-bottom: .1rem; }
.ab-search__txt b { font-weight: 700; }
.ab-search__item mark, mark.ab-mark { background: rgba(240,166,74,.38); color: inherit; border-radius: 2px; padding: 0 1px; }
.ab-search__empty { padding: .75rem 1rem; font-size: .85rem; color: rgba(74,59,48,.6); }
.about__content .ab-hit { animation: abHit 2.4s ease-out 1; }
@keyframes abHit { 0%, 30% { box-shadow: 0 0 0 3px rgba(240,166,74,.65); background-color: rgba(240,166,74,.18); } 100% { box-shadow: 0 0 0 3px rgba(240,166,74,0); } }
@media (max-width: 600px) { .ab-search__input { font-size: 16px; } .ab-search__drop { max-height: 55vh; } }