@charset "windows-1251";
@import url(style_cs.1788208934.css);
 
@font-face {
    font-family: "Dalfitra";
	src: url('../res/font/dalfitra.eot'); /* IE 9 Compatibility Mode */
	src: url('../res/font/dalfitra.eot?#iefix') format('embedded-opentype'), /* IE < 9 */
		url('../res/font/dalfitra.woff2') format('woff2'), /* Super Modern Browsers */
		url('../res/font/dalfitra.woff') format('woff'), /* Firefox >= 3.6, any other modern browser */
		url('../res/font/dalfitra.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap");

@font-face {
    font-display: block;
    font-family: bootstrap-icons;
    src: url("../res/font/bootstrap-icons.woff2") format("woff2"),
        url("../res/font/bootstrap-icons.woff") format("woff");
}

@font-face {
  font-family: 'Golos Text';
  src: url('https://forumstatic.ru/files/001c/25/f9/74205.ttf');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Slab';
  src: url('https://forumstatic.ru/files/001c/25/f9/71037.ttf');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'cinzel';
  src: url('https://forumstatic.ru/files/0015/28/00/92110.ttf');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'cinzel';
  src: url('https://forumstatic.ru/files/0015/28/00/82096.ttf');
  font-weight: 700;
  font-style: normal;
}

@font-face {
    font-family: "Constantine";
    src: url("https://db.onlinewebfonts.com/t/ae22d77c6dfe8c4f73b516b19d1f5203.eot");
    src: url("https://db.onlinewebfonts.com/t/ae22d77c6dfe8c4f73b516b19d1f5203.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/ae22d77c6dfe8c4f73b516b19d1f5203.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/ae22d77c6dfe8c4f73b516b19d1f5203.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/ae22d77c6dfe8c4f73b516b19d1f5203.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/ae22d77c6dfe8c4f73b516b19d1f5203.svg#Constantine")format("svg");
}

/* иконки */
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");


@font-face {font-family: 'Font Awesome';
src: local("FontAwesome"), url(https://forumstatic.ru/files/0015/28/00/83987.ttf);}


/* Font Awesome */
@import url('https://kit-pro.fontawesome.com/releases/v6.5.2/css/pro.min.css');

 @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100..900&display=swap');

:root {
    --padding: 3em;
    --padding1: 10px;
    --padding2: 40px;
    --content-width: calc(100% - (var(--padding2) * 2));

    /* =========================
       ОСНОВНАЯ ПАЛИТРА
    ========================= */

    /* глубокий бордовый — главный акцент */
    --accent-color: #730a13;

    /* золотисто-охристый — второй акцент */
    --accent-color2: #bf8a49;

    /* основной тёмный текст с бордовым подтоном */
    --text-color: #5f171d;

    /* нейтральный текст */
    --text-color2: #262526;

    /* ссылки — приглушённый бирюзовый */
    --link-color: #477f86;

    /* наведение на ссылки — кораллово-красный */
    --link-hover-color: #bf3f3f;

    /* полупрозрачный бирюзово-серый */
    --main-grey: #639fa699;

    /* основной светлый фон */
    --main-white: #f2eeeb;

    /* основной тёмный фон */
    --main-black: #262526;

    /* насыщенный бордовый */
    --main-red: #730a13;

    /* спокойный бирюзовый */
    --main-blue: #639fa6;

    /* светлая подложка цитат */
    --quote-color: #e5e5e5b8;

    /* выделение текста */
    --select-color: #bf8a49;

    /* кнопки */
    --button-color: #bf8a49;
    --button-color-hover: #bf3f3f;


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

    /* закрытая тема — очень светлый красновато-бежевый */
    --closed-theme: #f4e7e4;

    /* светлый фон профильных блоков */
    --profile-body-color: #e3ddda;

    /* имя профиля */
    --profile-name-color: #730a13;

    /* подписи и второстепенные элементы */
    --profile-label-color: #639fa6;

    /* иконки — промежуточный оттенок между охрой и кораллом */
    --profile-icon-color: #b96346;

  /* FONTS */
    --arial: arial, verdana, helvetica, sans-serif;
    --rus:  "Roboto Slab", serif;
    --eng: "Golos Text", serif;
    --fontosnovnoe: verdana, arial, helvetica, sans-serif;
    --font-base: verdana, arial, helvetica, sans-serif;
    --mso: "Material Symbols Outlined";
    --fa: "Font Awesome";

    /* DESIGN ASSETS */
    --forum-logo: url("https://forumstatic.ru/files/001c/c4/14/39768.png");
    --forum-footer: url("https://forumstatic.ru/files/001c/25/f9/47288.png");
    --forum-bg: url("https://forumstatic.ru/files/001c/25/f9/81667.jpg");
    --forum-body: #f0ebe7;
    --linetelo: url('https://forumstatic.ru/files/001c/b8/a2/63060.jpg');
    --defaultavatar: url('https://upforme.ru/uploads/001c/25/f9/2/20294.png');
    --new-topic: url(https://forumstatic.ru/files/001c/25/f9/35963.png);
    --old-topic: url(https://forumstatic.ru/files/001c/25/f9/21071.png);
    --closed-topic: url(https://forumstatic.ru/files/001c/25/f9/43240.png);
    --sticky-topic: url(https://forumstatic.ru/files/001c/25/f9/40835.png);
    --old-main: url(https://forumstatic.ru/files/001c/93/e5/37309.png);
    --new-main: url(https://forumstatic.ru/files/001c/93/e5/91267.png);
    --forum-width: 1170px;
    --header-width: 1332px;
    --header-height: 497px;
    --footer-width: 1332px;
    --footer-height: 270px;
    --radius-small: 3px;
    --radius-medium: 5px;
    --radius-large: 10px;
    --ticket-cut: 10px;

	  /* PROFILE ICONS */
    --profile-type-size: 30px;
    --profile-type-icon-size: 18px;
    --profile-type-bg: var(--main-blue);
    --profile-type-icon: var(--main-white);
    --icon-human: url("https://forumstatic.ru/files/001c/25/f9/98405.svg");
    --icon-super: url("https://forumstatic.ru/files/001c/25/f9/55587.svg");
    --profile-type-lift: 33px;
    --profile-name-color: var(--main-white);
    --profile-title-color: var(--accent-color2);
    --profile-avatar-border: var(--main-white);
    --profile-online-color: var(--main-white);
    --profile-online-marker: #7fc67b;
    --profile-label-color: var(--accent-color);
    --profile-label-text: var(--main-white);
    --profile-field-color: var(--main-white);
    --profile-field-text: var(--text-color);
    --profile-field-border: var(--main-grey);
}
 
/* ======================== FIXED DESKTOP DESIGN OVERRIDES ======================== */

html {
    min-width: var(--header-width);
}

body {
    margin: 0;

    background: var(--forum-bg) fixed;
    background-color: #332e2a;

    font: 500 70% "Montserrat", Verdana, Arial, Helvetica, sans-serif;
}


#pun,
div#pun {
    position: relative;
    width: var(--forum-width);
    min-width: var(--forum-width);
    max-width: var(--forum-width);
    margin: 441px auto 20px;
    overflow: visible;
    background: var(--forum-body);
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 1170px auto;
}

/* Header artwork: native 1332 x 461, centered over the 1170px forum body. */
#pun-title,
div#pun-title {
    position: absolute;
    top: -436px;
    left: 1px;
    width: 1170px;
    height: 497px;
    min-height: 497px;
    margin: 0;
    overflow: visible;
    z-index: 1;
}

#pun {
    position: relative;
}

#pun::before {
    --dash-thickness: 2px; /* толщина рамки */
    --dash-length: 12px;   /* длина штриха */
    --dash-gap: 16px;      /* расстояние между штрихами */
    --dash-color: #639da845;
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 35px !important;
    right: 20px !important;
    bottom: 20px !important;
    left: 20px !important;
    padding: 0 !important;
    border: 0 !important;
    box-sizing: border-box !important;
    background-image:
        repeating-linear-gradient(
            90deg,
            var(--dash-color) 0 var(--dash-length),
            transparent var(--dash-length)
                calc(var(--dash-length) + var(--dash-gap))
        ),
        repeating-linear-gradient(
            90deg,
            var(--dash-color) 0 var(--dash-length),
            transparent var(--dash-length)
                calc(var(--dash-length) + var(--dash-gap))
        ),
        repeating-linear-gradient(
            0deg,
            var(--dash-color) 0 var(--dash-length),
            transparent var(--dash-length)
                calc(var(--dash-length) + var(--dash-gap))
        ),
        repeating-linear-gradient(
            0deg,
            var(--dash-color) 0 var(--dash-length),
            transparent var(--dash-length)
                calc(var(--dash-length) + var(--dash-gap))
        ) !important;
    background-position:
        top left,
        bottom left,
        top left,
        top right !important;
    background-size:
        100% var(--dash-thickness),
        100% var(--dash-thickness),
        var(--dash-thickness) 100%,
        var(--dash-thickness) 100% !important;
    background-repeat: no-repeat !important;
    -webkit-mask: none !important;
    mask: none !important;
    pointer-events: none;
    z-index: 1 !important;
}

#pun-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1332px;
    height: 461px;
    transform: translateX(-50%);
    background-image: var(--forum-logo);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 1332px 461px;
    pointer-events: none;
    z-index: 0;
}


#pun-title > * {
    position: relative;
    z-index: 1;
}

/* Hide the old text/custom-logo implementation: the full header PNG is used instead. */
#pun-title h1,
#pun.custom-logo #title-logo-tdr {
    background: none;
}

/* Footer artwork: native 1461 x 273 with transparent edges. */
#pun-about {
    position: relative;
    min-height: var(--footer-height);
    overflow: visible;
    z-index: 1;
    top: 50px;
}
#html-footer {
    position: relative;
    margin-top: -114px;
}

#html-footer .partners {
    position: relative;
    z-index: 5;
    width: 930px;
    max-width: 930px;
    height: 80px;
    margin: 0px 20px 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    gap: 4px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

#pun-about::before {
    content: "";
    position: absolute;
    z-index: 1;
    left: calc(50% + 1px);
    bottom: -25px;
    width: var(--footer-width);
    height: var(--footer-height);
    transform: translateX(-50%);
    background-image: var(--forum-footer);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 1461px 273px;
    pointer-events: none;
}

#pun-about .container {
    position: relative;
    z-index: 1;
    text-align: center;
    line-height: 150%;
    transform: translateY(-30px);
}

/* ======================== БЫСТРОПЛЮСЫ ======================== */

/* Плюс перед положительным рейтингом */
.noNull::before {
    content: none !important;
    display: none !important;
    position: absolute;
    z-index: 2;
    margin-left: -6px;

    color: currentColor;
    font-size: 9px;
}

/* ======================== ТЕКУЩИЙ РЕЙТИНГ ======================== */

div.post-rating p > a {
    position: relative;
    z-index: 100;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: var(--button-color-hover);
    background: none;
    outline: none;
    font-size: 12px !important;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -1px;
    text-align: center;
    text-decoration: none;
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}

/* Сердце позади числа рейтинга */
div.post-rating p > a::after {
    content: "\f004";
    position: absolute;
    inset: 0;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: color-mix(in srgb, var(--main-red) 18%, transparent);
    font-family: var(--fa);
    font-size: 33px;
    font-weight: 900;
    line-height: 1;
    transition:
        color 0.2s ease,
        transform 0.2s ease,
        filter 0.2s ease;
}

/* Наведение на рейтинг */
div.post-rating p > a:hover {
    color: var(--main-white);
}

div.post-rating p > a:hover::after {
    color: var(--main-red);
    filter: drop-shadow(0 2px 4px rgba(93, 1, 1, 0.25));
}

/* ======================== КНОПКА ГОЛОСОВАНИЯ ======================== */

div.post-vote {
    margin-bottom: 65px;
}

div.post-vote p > a {
    position: absolute;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    margin-top: 42px;
    margin-left: 29px;
    color: var(--main-grey);
    background: none !important;
    font-size: 0 !important;
    text-decoration: none;
    cursor: pointer;
    transition:
        color 0.2s ease,
        transform 0.2s ease,
        filter 0.2s ease;
}

/* Контурное сердце */
div.post-vote p > a::before {
    content: "\f27a";
    font-family: var(--fa);
    font-size: 21px;
    font-weight: 400;
    line-height: 1;
}

/* Наведение */
div.post-vote p > a:hover {
    color: var(--main-red);
    transform: scale(1.16);
    filter: drop-shadow(0 2px 3px rgba(93, 1, 1, 0.25));
}

/* Нажатие — сердце становится заполненным */
div.post-vote p > a:active {
    color: var(--main-red);
    transform: scale(0.92);
}

div.post-vote p > a:active::before {
    font-weight: 900;
}

/* Тёмное оформление */
.post.dark-style div.post-rating p > a,
.post.dark-style div.post-vote p > a {
    color: var(--main-blue) !important;
}

.post.dark-style div.post-rating p > a:hover,
.post.dark-style div.post-vote p > a:hover {
    color: var(--main-red) !important;
}

#navprofiles {
  position: relative;
  z-index: 999;
}

#pun-navlinks.section .multiacc-profilemenu {
  position: absolute;
  top: 20px;
  right: 0px;
  width: max-content;
  height: auto;
  background: #f4f4f4;
  border-radius: 20px;
  border-inline: 1px solid #999;
  color: #333;
}

.multiacc-profilemenu li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  gap: 10px;
  width: 100%;
}

.multiacc-profilemenu li a {
  display: block;
  flex-grow: 1;
  text-align: left;
  padding-left: 20px;
  position: relative;
}

.multiacc-profilemenu li:first-child {
  background-color: #e0e0e0;
  font-weight: 700;
}

#pun-navlinks.section .multiacc-profilemenu li {
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  font-size: 0.8rem;
  padding: 6px 16px 10px;
  border-bottom: 1px solid #64695c69;
  top: 0;
}

#pun-navlinks.section .multiacc-profilemenu li:last-child {
  border-bottom: 0;
}

#pun-navlinks.section .multiacc-profilemenu li:hover {
  box-shadow: inset 0px 0px 30px 3px rgba(43, 67, 62, 0.2);
}

#pun-navlinks.section .multiacc-profilemenu li a {
  color: #555;
}

#pun-navlinks.section .multiacc-profilemenu li a:hover {
  color: #888;
}

.multiacc-delete-btn {
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
}

.multiacc-dialog {
  z-index: 9999;
  padding: 10px;
  font-size: 0.8rem;
  background: #e8e8e8 !important;
  border: 1px solid #999;
  color: #333;
}

.multiacc-dialog > form {
  border: 1px solid #ccc;
  padding: 10px 10px 2px;
}

.multiacc-dialog input {
  padding: 4px 10px;
  border: 1px solid #b9bfb0;
}

.multiacc-dialog div {
  display: flex;
  justify-content: center;
}

.multiacc-dialog div:not(.multiacc-dialog div:last-child) {
  flex-direction: column;
}

.multiacc-dialog button {
  margin: 6px;
  padding: 4px 8px;
  background: #f4f4f4;
  color: #555;
  border-inline: 1px solid #999;
  border-block: 0;
  border-radius: 4px;
  cursor: pointer;
}

.multiacc-dialog button:hover {
  color: #444;
}


/* ==================================================
   МЕНЮ БЫСТРОЙ СМЕНЫ АККАУНТА
================================================== */

#navprofiles {
    position: relative;
    z-index: 100;
}


/* ==================================================
   ВЫПАДАЮЩЕЕ МЕНЮ
================================================== */

#pun-navlinks.section .multiacc-profilemenu {
    position: absolute;
    z-index: 1000;

    top: 100%;
    left: 50%;
    right: auto;

    width: 245px;
    height: auto;
    margin: 0;
    padding: 6px;

    box-sizing: border-box;
    overflow: visible;

    color: var(--text-color);

    background:
        /* красный слева, бирюзовый справа */
        linear-gradient(
            105deg,
            rgba(127, 31, 0, 0.065) 0%,
            rgba(255, 255, 255, 0.36) 43%,
            rgba(87, 159, 159, 0.14) 100%
        ),

        /* газетные точки справа */
        radial-gradient(
            circle,
            rgba(24, 77, 89, 0.13) 0 0.7px,
            transparent 1px
        ) right center / 5px 5px,

        /* холодный свет */
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.72),
            transparent 48%,
            rgba(55, 101, 103, 0.055)
        ),

        /* бумажная фактура */
        radial-gradient(
            circle,
            rgba(42, 73, 74, 0.045) 0 0.6px,
            transparent 0.9px
        ) 0 0 / 3px 3px,

        #eef1ed;

    background-size:
        100% 100%,
        115px 100%,
        100% 100%,
        3px 3px,
        auto;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        no-repeat;

    border: 1px solid rgba(45, 77, 78, 0.28);
    border-top: 3px solid var(--accent-color);
    border-left: 5px solid var(--main-blue);
    border-radius: 0;

    box-shadow:
        3px 4px 0 rgba(39, 69, 70, 0.12),
        0 9px 17px rgba(34, 60, 61, 0.16),
        inset 0 1px rgba(255, 255, 255, 0.76);

    transform: translateX(-50%);
}


/* ==================================================
   УКАЗАТЕЛЬ СВЕРХУ
================================================== */

#pun-navlinks.section .multiacc-profilemenu::before {
    content: "";

    position: absolute;
    z-index: 9;

    top: -7px;
    left: 50%;

    width: 11px;
    height: 11px;

    background: var(--accent-color);

    border-top: 1px solid rgba(54, 30, 22, 0.43);
    border-left: 1px solid rgba(54, 30, 22, 0.43);

    box-shadow:
        1px 1px 0 rgba(39, 69, 70, 0.1);

    transform:
        translateX(-50%)
        rotate(45deg);

    pointer-events: none;
}


/* ==================================================
   ОБЩАЯ СТРОКА МЕНЮ
================================================== */

#pun-navlinks.section .multiacc-profilemenu li {
    position: relative;
    top: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    width: 100%;
    min-height: 35px;
    margin: 0;
    padding: 6px 10px;

    box-sizing: border-box;
    overflow: hidden;

    color: var(--text-color);

    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.5),
            rgba(222, 235, 233, 0.27)
        );

    border: 0;
    border-bottom:
        1px dashed
        rgba(48, 82, 83, 0.21);

    font-size: 10px;
    line-height: 1.2;

    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        padding-left 0.18s ease;
}


/* ромб возле обычного аккаунта */

#pun-navlinks.section
.multiacc-profilemenu
li:not(:first-child)::before {
    content: "\25C6";

    flex: 0 0 auto;

    color: var(--main-blue);

    font-size: 6px;
    line-height: 1;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}


/* последняя строка без нижней линии */

#pun-navlinks.section
.multiacc-profilemenu
li:last-child {
    border-bottom: 0;
}


/* наведение на строку */

#pun-navlinks.section
.multiacc-profilemenu
li:not(:first-child):hover {
    padding-left: 13px;

    background:
        linear-gradient(
            100deg,
            rgba(127, 31, 0, 0.095),
            rgba(255, 255, 255, 0.5) 46%,
            rgba(87, 159, 159, 0.15)
        );

    box-shadow:
        inset 3px 0 0 var(--main-blue);
}


#pun-navlinks.section
.multiacc-profilemenu
li:not(:first-child):hover::before {
    color: var(--accent-color2);
    transform: rotate(45deg);
}


/* ==================================================
   ДОБАВИТЬ АККАУНТ
================================================== */

#pun-navlinks.section
.multiacc-profilemenu
li:first-child {
    min-height: 38px;
    margin-bottom: 4px;
    padding: 7px 11px;

    color: var(--main-white);

    background:
        linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.12),
            transparent 42%
        ),
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.08) 0 0.7px,
            transparent 1px
        ) 0 0 / 4px 4px,
        linear-gradient(
            135deg,
            var(--accent-color),
            var(--main-red)
        );

    border: 1px solid rgba(52, 28, 20, 0.36);
    border-radius: 0;

    box-shadow:
        2px 2px 0 rgba(37, 66, 67, 0.09);

    clip-path: polygon(
        0 3%,
        17% 0,
        34% 2%,
        51% 0,
        68% 2%,
        84% 0,
        100% 4%,
        100% 91%,
        82% 96%,
        64% 92%,
        46% 97%,
        27% 93%,
        0 96%
    );

    font-weight: 700;
    text-transform: uppercase;

    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.23);
}


/* наведение на первую строку */

#pun-navlinks.section
.multiacc-profilemenu
li:first-child:hover {
    background:
        linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.14),
            transparent 42%
        ),
        linear-gradient(
            to right,
            var(--main-red),
            color-mix(
                in srgb,
                var(--main-red) 64%,
                var(--main-blue)
            )
        );

    box-shadow:
        2px 2px 0 rgba(37, 66, 67, 0.12);
}


/* ==================================================
   ССЫЛКИ
================================================== */

#pun-navlinks.section
.multiacc-profilemenu
li a {
    position: relative;

    display: flex;
    align-items: center;
    gap: 7px;

    flex: 1 1 auto;

    min-width: 0;
    margin: 0;
    padding: 0;

    overflow: hidden;

    color: var(--link-color) !important;

    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-decoration: none !important;

    text-overflow: ellipsis;
    white-space: nowrap;

    transition: color 0.18s ease;
}


/* стандартную иконку у обычного аккаунта убираем,
   поскольку ромб уже создан у строки */

#pun-navlinks.section
.multiacc-profilemenu
li:not(:first-child)
a::before {
    content: none;
    display: none;
}


/* ссылка добавления аккаунта */

#pun-navlinks.section
.multiacc-profilemenu
li:first-child
a {
    color: var(--main-white) !important;

    font-family: var(--eng);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.045em;

    text-transform: uppercase;
}


/* иконка добавления аккаунта */

#pun-navlinks.section
.multiacc-profilemenu
li:first-child
a::before {
    content: "\f234";

    flex: 0 0 auto;

    color: var(--accent-color2);

    font-family: var(--fa);
    font-size: 12px;
    font-weight: normal;
    line-height: 1;
}


/* наведение на ссылку аккаунта */

#pun-navlinks.section
.multiacc-profilemenu
li:not(:first-child)
a:hover {
    color: var(--main-red) !important;
}


/* ==================================================
   КНОПКА УДАЛЕНИЯ
================================================== */

#pun-navlinks.section .multiacc-delete-btn {
    position: relative;

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

    flex: 0 0 24px;

    width: 24px;
    height: 24px;
    margin: 0 0 0 auto;
    padding: 0;

    box-sizing: border-box;

    color: var(--accent-color);
    background:
        rgba(255, 255, 255, 0.34);

    border: 1px solid rgba(48, 82, 83, 0.13);
    border-radius: 1px;

    font-size: 0;

    cursor: pointer;

    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}


/* корзина */

#pun-navlinks.section
.multiacc-delete-btn::before {
    content: "\f1f8";

    color: inherit;

    font-family: var(--fa);
    font-size: 10px;
    font-weight: normal;
    line-height: 1;
}


/* наведение на удаление */

#pun-navlinks.section
.multiacc-delete-btn:hover {
    color: var(--main-white);

    background: var(--accent-color);
    border-color: var(--main-red);

    transform: rotate(-2deg) scale(1.06);
}


/* ==================================================
   ЗАЩИТА ПОЗИЦИОНИРОВАНИЯ МЕНЮ
================================================== */

#pun-navlinks.section .multiacc-profilemenu,
#pun-navlinks.section li:hover > .multiacc-profilemenu {
    transform: translateX(-50%);
}


/* ==================================================
   ДИАЛОГ ДОБАВЛЕНИЯ/УДАЛЕНИЯ АККАУНТА
================================================== */

.multiacc-dialog {
    position: fixed;
    z-index: 99999;

    width: min(90vw, 370px);
    padding: 6px;

    box-sizing: border-box;
    overflow: visible;

    color: var(--text-color) !important;

    background:
        linear-gradient(
            115deg,
            rgba(127, 31, 0, 0.075),
            rgba(255, 255, 255, 0.36) 43%,
            rgba(87, 159, 159, 0.15)
        ),

        radial-gradient(
            circle,
            rgba(24, 77, 89, 0.12) 0 0.7px,
            transparent 1px
        ) right center / 5px 5px,

        radial-gradient(
            circle,
            rgba(44, 75, 76, 0.04) 0 0.6px,
            transparent 0.9px
        ) 0 0 / 3px 3px,

        #eef1ed !important;

    background-size:
        100% 100%,
        130px 100%,
        3px 3px,
        auto !important;

    background-repeat:
        no-repeat,
        no-repeat,
        repeat,
        no-repeat !important;

    border: 1px solid rgba(43, 75, 76, 0.32);
    border-top: 5px solid var(--accent-color);
    border-left: 6px solid var(--main-blue);
    border-radius: 0;

    box-shadow:
        4px 5px 0 rgba(39, 69, 70, 0.13),
        0 16px 38px rgba(28, 52, 53, 0.28),
        inset 0 1px rgba(255, 255, 255, 0.72);

    font-size: 11px;
}


/* затемнение страницы */

.multiacc-dialog::backdrop {
    background:
        rgba(25, 42, 43, 0.48);

    backdrop-filter:
        blur(2px)
        saturate(0.8);
}


/* ==================================================
   ФОРМА ВНУТРИ
================================================== */

.multiacc-dialog > form {
    position: relative;

    padding: 16px;

    color: var(--text-color);

    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.62),
            rgba(218, 233, 231, 0.36)
        ),

        radial-gradient(
            circle,
            rgba(45, 75, 76, 0.04) 0 0.6px,
            transparent 0.9px
        ) 0 0 / 3px 3px,

        #edf0ed;

    border: 1px solid rgba(47, 79, 80, 0.22);
    border-radius: 0;

    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.7);
}


/* декоративная газетная линия */

.multiacc-dialog > form::before {
    content: "";

    position: absolute;

    top: 6px;
    right: 12px;
    left: 12px;

    height: 1px;

    background: linear-gradient(
        to right,
        transparent,
        var(--main-blue),
        transparent
    );

    opacity: 0.45;
    pointer-events: none;
}


/* строки формы */

.multiacc-dialog form > div {
    display: flex;
    justify-content: center;
    gap: 7px;
}


.multiacc-dialog
form > div:not(:last-child) {
    flex-direction: column;
    margin-bottom: 11px;
}


/* ==================================================
   ПОЛЯ
================================================== */

.multiacc-dialog input {
    width: 100%;
    min-height: 33px;
    padding: 7px 10px;

    box-sizing: border-box;

    color: var(--text-color);

    background:
        rgba(250, 252, 249, 0.78);

    border: 1px solid rgba(46, 78, 79, 0.25);
    border-left: 3px solid var(--main-blue);
    border-radius: 0;

    box-shadow:
        inset 1px 1px 2px rgba(39, 68, 69, 0.05);

    font-size: 11px;

    transition:
        border-color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}


/* фокус поля */

.multiacc-dialog input:focus {
    color: var(--text-color);

    background: #fbfcf9;

    border-color: var(--main-blue);
    border-left-color: var(--accent-color);

    outline: 0;

    box-shadow:
        0 0 0 2px
        color-mix(
            in srgb,
            var(--main-blue) 17%,
            transparent
        );
}


/* ==================================================
   КНОПКИ ДИАЛОГА
================================================== */

.multiacc-dialog button {
    min-height: 30px;
    margin: 0;
    padding: 6px 13px;

    box-sizing: border-box;

    color: var(--main-white);

    background:
        linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.11),
            transparent 42%
        ),
        var(--accent-color);

    border: 1px solid rgba(52, 28, 20, 0.38);
    border-radius: 1px;

    box-shadow:
        2px 2px 0 rgba(39, 69, 70, 0.1);

    font-family: var(--eng);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.04em;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background 0.18s ease,
        color 0.18s ease,
        transform 0.18s ease;
}


/* чередование цвета кнопок */

.multiacc-dialog button:nth-child(even) {
    background:
        linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.11),
            transparent 42%
        ),
        var(--main-blue);

    border-color: rgba(35, 65, 66, 0.4);
}


/* наведение */

.multiacc-dialog button:hover {
    color: var(--main-white);

    background:
        linear-gradient(
            to right,
            var(--main-red),
            var(--main-blue)
        );

    transform: translateY(-1px);
}

/* ==================================================
   СЧЁТЧИК СИМВОЛОВ
================================================== */

#plng {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;

    min-height: 20px !important;

    margin: 0 10px 0 0 !important;
    padding: 2px 4px 2px 7px !important;

    box-sizing: border-box !important;

    border: 1px solid rgb(255 255 255 / 18%) !important;
    border-radius: var(--radius-small) !important;

    background: rgb(255 255 255 / 10%) !important;
    color: var(--main-white) !important;

    font-family: var(--eng) !important;
    font-size: 9px !important;
    font-weight: 600 !important;
    font-style: normal !important;
    line-height: 1 !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;

    vertical-align: middle !important;
}


/* иконка карандаша */
#plng::before {
    content: "\f040";

    color: var(--main-white);

    font-family: var(--fa);
    font-size: 10px;
    font-weight: normal;
    line-height: 1;
}


/* само количество символов */
#plng > b {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 25px;
    min-height: 16px;

    padding: 1px 5px;

    box-sizing: border-box;

    border-radius: calc(var(--radius-small) - 1px);

    background: var(--main-white);
    color: var(--accent-color);

    font-family: var(--eng);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;

    font-variant-numeric: tabular-nums;
}


/* ======================== REALTIME TOGGLE ======================== */

#realtime-toggle {
    position: relative;
    z-index: 2;

    width: auto;
    margin: 14px 18px 16px !important;
    padding: 0 !important;

    box-sizing: border-box;
    text-align: right !important;
}

#realtime-toggle a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-small);
    color: var(--closed-theme);
    background: var(--link-color);
    text-decoration: none !important;
    transition:
        color 0.2s ease,
        background-color 0.2s ease;
}

#realtime-toggle a::before {
    content: "\f021";
    font-family: var(--fa);
    font-weight: 900;
    font-size: 0.85em;
}

#realtime-toggle a:hover {
    color: var(--main-white) !important;
    background-color: var(--button-color-hover);
}

/* ======================== TOOLTIP ========================  */

/* Своё оформление всплывающих подсказок — совместимо с quicktip */
#tooltip {
  position:absolute;
  display:none;
  background:#333;
  color:#fff;
  font-family:Verdana, sans-serif;
  font-size:10px;
  padding:6px 10px;
  border-radius:5px;
  text-align: justify;          
  max-width:200px;
  z-index:2147483647; 
  pointer-events:none;
  white-space:normal;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}

/* Additional menus © max, the murderer! */

/* ==================================================
   ПОЗИЦИОНИРОВАНИЕ
================================================== */

#pun-navlinks .container li {
    position: relative;
}


/* ==================================================
   ВЫПАДАЮЩЕЕ МЕНЮ ПЕРВОГО УРОВНЯ
   Разворачивается вниз
================================================== */

#pun-navlinks .container li > ul:not(.multiacc-profilemenu) {
    position: absolute;
    z-index: 20;

    top: 29px;
    left: 0;

    display: block;

    min-width: 100%;
    width: max-content;
    max-width: 280px;

    margin: 0;
    padding: 5px;

    box-sizing: border-box;

    background:
        /* красный слева, бирюзовый справа */
        linear-gradient(
            105deg,
            rgba(127, 31, 0, 0.06) 0%,
            rgba(255, 255, 255, 0.35) 42%,
            rgba(87, 159, 159, 0.14) 100%
        ),

        /* газетные точки */
        radial-gradient(
            circle,
            rgba(24, 77, 89, 0.13) 0 0.7px,
            transparent 1px
        ) right center / 5px 5px,

        /* свет бумаги */
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.7),
            transparent 48%,
            rgba(55, 101, 103, 0.06)
        ),

        /* бумажная фактура */
        radial-gradient(
            circle,
            rgba(42, 73, 74, 0.045) 0 0.6px,
            transparent 0.9px
        ) 0 0 / 3px 3px,

        #eef1ed;

    background-size:
        100% 100%,
        110px 100%,
        100% 100%,
        3px 3px,
        auto;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        repeat,
        no-repeat;

    border: 1px solid rgba(45, 77, 78, 0.27);
    border-top: 3px solid var(--accent-color);
    border-left: 5px solid var(--main-blue);
    border-radius: 0;

    box-shadow:
        3px 4px 0 rgba(40, 70, 71, 0.12),
        0 7px 12px rgba(35, 61, 62, 0.13),
        inset 0 1px rgba(255, 255, 255, 0.76);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: scaleY(0);
    transform-origin: top center;

    transition:
        transform 0.18s ease,
        opacity 0.14s ease,
        visibility 0.14s ease;
}


/* указатель сверху */

#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)::before {
    content: "";

    position: absolute;
    z-index: 3;

    top: -7px;
    left: 12px;

    width: 10px;
    height: 10px;

    background: var(--accent-color);
    border: 1px solid rgba(52, 29, 21, 0.45);

    box-shadow:
        1px 1px 0 rgba(40, 70, 71, 0.12);

    transform: rotate(45deg);
    pointer-events: none;
}


/* раскрытие первого уровня вниз */

#pun-navlinks
.container
li:hover > ul:not(.multiacc-profilemenu) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: scaleY(1);
}


/* ==================================================
   ПУНКТЫ МЕНЮ
================================================== */

#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu) > li {
    position: relative;

    display: block;

    width: 100%;
    margin: 0;
    padding: 0;
}


/* убираем разделители основного меню */

#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu) > li::after {
    content: none !important;
    display: none !important;
}


/* ==================================================
   ССЫЛКИ ПЕРВОГО И ВТОРОГО УРОВНЯ
================================================== */

#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu) > li > a {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
    min-height: 30px;
    margin: 0;
    padding: 7px 12px 7px 25px;

    box-sizing: border-box;
    overflow: hidden;

    color: var(--text-color) !important;

    background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.52),
            rgba(222, 235, 233, 0.29)
        );

    border: 0;
    border-bottom:
        1px dashed
        rgba(49, 83, 84, 0.21);

    font-family: var(--eng);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.035em;

    text-align: left;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;

    transition:
        color 0.18s ease,
        background 0.18s ease,
        padding-left 0.18s ease;
}


/* последний пункт без линии */

#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li:last-child > a {
    border-bottom: 0;
}


/* ромб возле ссылки */

#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li > a::before {
    content: "\25C6";

    position: absolute;
    left: 11px;

    color: var(--main-blue);

    font-size: 6px;
    line-height: 1;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}


/* ==================================================
   НАВЕДЕНИЕ
================================================== */

#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li > a:hover {
    padding-left: 29px;

    color: var(--main-red) !important;

    background:
        linear-gradient(
            100deg,
            rgba(127, 31, 0, 0.1),
            rgba(255, 255, 255, 0.52) 48%,
            rgba(87, 159, 159, 0.14)
        );
}


#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li > a:hover::before {
    color: var(--accent-color2);
    transform: rotate(45deg);
}


/* ==================================================
   ПЕРВЫЙ ПУНКТ — КРАСНАЯ ПЛАШКА
================================================== */

#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li:first-child > a {
    min-height: 32px;

    color: var(--main-white) !important;

    background:
        linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.12),
            transparent 40%
        ),
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.08) 0 0.7px,
            transparent 1px
        ) 0 0 / 4px 4px,
        linear-gradient(
            135deg,
            var(--accent-color),
            var(--main-red)
        );

    border-bottom:
        1px solid
        rgba(51, 28, 20, 0.38);

    text-shadow:
        1px 1px 0 rgba(0, 0, 0, 0.24);
}


#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li:first-child > a::before {
    color: var(--accent-color2);
}


#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li:first-child > a:hover {
    color: var(--main-white) !important;

    background:
        linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.15),
            transparent 42%
        ),
        linear-gradient(
            to right,
            var(--main-red),
            color-mix(
                in srgb,
                var(--main-red) 70%,
                var(--main-blue)
            )
        );
}


/* ==================================================
   ПУНКТ, ИМЕЮЩИЙ ВЫДВИГАЮЩЕЕСЯ МЕНЮ
================================================== */

#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li.forms > a {
    padding-right: 29px;
}


/* стрелка у пункта с выдвигающимся меню */

#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li.forms > a::after {
    content: "\203A";

    position: absolute;

    top: 50%;
    right: 10px;
    bottom: auto;
    left: auto;

    display: block;

    width: auto;
    height: auto;
    margin: 0;
    padding: 0;

    color: var(--main-blue);
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;

    opacity: 0.85;

    transform: translateY(-53%);
    transition:
        color 0.18s ease,
        right 0.18s ease;
}


#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li.forms > a:hover::after {
    right: 7px;

    width: auto;
    height: auto;

    color: var(--accent-color);
    background: none !important;

    opacity: 1;
}/* стрелка у пункта с выдвигающимся меню */

#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li.forms > a::after {
    content: "\203A";

    position: absolute;

    top: 50%;
    right: 10px;
    bottom: auto;
    left: auto;

    display: block;

    width: auto;
    height: auto;
    margin: 0;
    padding: 0;

    color: var(--main-blue);
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;

    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;

    opacity: 0.85;

    transform: translateY(-53%);
    transition:
        color 0.18s ease,
        right 0.18s ease;
}


#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li.forms > a:hover::after {
    right: 7px;

    width: auto;
    height: auto;

    color: var(--accent-color);
    background: none !important;

    opacity: 1;
}


#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li.forms > a:hover::after {
    right: 7px;
    color: var(--accent-color);
}


/* ==================================================
   ВТОРОЙ УРОВЕНЬ
   Выдвигается вправо
================================================== */

#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li > ul:not(.multiacc-profilemenu) {
    position: absolute;
    z-index: 22;

    top: -7px;
    left: calc(100% + 4px);

    min-width: 165px;
    width: max-content;

    border-top: 3px solid var(--main-blue);
    border-left: 5px solid var(--accent-color);

    box-shadow:
        3px 4px 0 rgba(127, 31, 0, 0.1),
        0 7px 12px rgba(35, 64, 65, 0.14);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /*
       Отменяем вертикальную анимацию первого уровня
       и задаём горизонтальную.
    */
    transform: scaleX(0) !important;
    transform-origin: left center !important;

    transition:
        transform 0.18s ease,
        opacity 0.14s ease,
        visibility 0.14s ease;
}


/* указатель второго уровня */

#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li > ul:not(.multiacc-profilemenu)::before {
    top: 14px;
    left: -7px;

    background: var(--main-blue);
    border-color: rgba(39, 68, 69, 0.45);
}


/* выдвижение второго уровня вправо */

#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li.forms:hover
> ul:not(.multiacc-profilemenu) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: scaleX(1) !important;
}


/* первый пункт второго уровня — бирюзовый */

#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li > ul:not(.multiacc-profilemenu)
> li:first-child > a {
    color: var(--main-white) !important;

    background:
        linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.13),
            transparent 42%
        ),
        linear-gradient(
            135deg,
            var(--main-blue),
            color-mix(in srgb, var(--main-blue) 72%, #000)
        );

    border-bottom:
        1px solid
        rgba(35, 64, 65, 0.37);
}


#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li > ul:not(.multiacc-profilemenu)
> li:first-child > a::before {
    color: var(--accent-color2);
}


#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu)
> li > ul:not(.multiacc-profilemenu)
> li:first-child > a:hover {
    color: var(--main-white) !important;

    background:
        linear-gradient(
            to right,
            var(--main-blue),
            color-mix(
                in srgb,
                var(--main-blue) 65%,
                var(--accent-color)
            )
        );
}


/* ==================================================
   ЗАЩИТА МЕНЮ БЫСТРОЙ СМЕНЫ АККАУНТА
================================================== */

#pun-navlinks.section .multiacc-profilemenu,
#pun-navlinks.section li:hover > .multiacc-profilemenu {
    transform: translateX(-50%);
}

/* ======================== UP DOWN ========================  */
/* Up & Down Arrows © max, the murderer!
------------------------------------------------------------------ */

.go-up,
.go-down {
    position: fixed;
    right: 0;
    z-index: 1;

    display: none;

    width: 100px;
    height: 50%;

    box-sizing: border-box;
    cursor: pointer;
}

.go-up {
    top: 0;
}

.go-down {
    bottom: 0;
}

.go-up .inside,
.go-down .inside {
    display: flex;
    justify-content: center;

    height: 100%;

    color: var(--main-white);
    opacity: .6;

    transition:
        color .2s ease,
        opacity .2s ease;
}

.go-up .inside {
    align-items: flex-start;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, .12),
            transparent
        );
}

.go-down .inside {
    align-items: flex-end;

    background:
        linear-gradient(
            to top,
            rgba(255, 255, 255, .12),
            transparent
        );
}

.go-up .inside:hover,
.go-down .inside:hover {
    color: var(--accent-color2);
    opacity: 1;
}

/* скрываем старые изображения */

.go-up img,
.go-down img {
    display: none;
}

/* общие настройки иконок */

.go-up .inside::before,
.go-down .inside::before {
    padding: 20px 0;
    color: inherit;
    font-family: var(--fa);
    font-size: 60px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
    text-shadow:
        2px 2px 0 rgba(115, 23, 2, .38);
}

/* стрелка вверх */

.go-up .inside::before {
    content: "\f062";
}

/* стрелка вниз */

.go-down .inside::before {
    content: "\f063";
}


/* ======================== CHARACTER APPLICATION ======================== */

.post-content .character-form {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: none;
    margin: -1em 0;
    padding: 28px;

    box-sizing: border-box;
    overflow: hidden;

    color: var(--text-color2);
    font: 400 12px/1.75 var(--eng);

    background:
        linear-gradient(
            135deg,
            rgba(141, 166, 157, .08),
            transparent 28% 72%,
            rgba(115, 23, 2, .055)
        ),
        color-mix(
            in srgb,
            var(--main-white) 92%,
            white
        );

    border: 1px solid rgba(115, 23, 2, .16);
    border-radius: var(--radius-large);

    box-shadow:
        inset 0 0 45px rgba(115, 23, 2, .035),
        5px 5px 0 rgba(24, 77, 89, .13);
}

/* едва заметный газетный угол */

.post-content .character-form::before {
    content: "";

    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;

    width: 280px;
    height: 180px;

    background:
        radial-gradient(
            circle,
            rgba(24, 77, 89, .08) 1px,
            transparent 1.3px
        )
        0 0 / 8px 8px;

    -webkit-mask-image:
        linear-gradient(
            225deg,
            #000,
            transparent 72%
        );

    mask-image:
        linear-gradient(
            225deg,
            #000,
            transparent 72%
        );
}

/* ======================== HEADER ======================== */

.post-content .character-form-header {
    position: relative;
    padding: 5px 120px 22px;
    text-align: center;
}

.post-content .character-form-number {
    position: absolute;
    top: 2px;
    left: 0;

    padding: 5px 9px;

    color: var(--link-color);
    font: 700 8px/1 var(--rus);
    letter-spacing: 1px;
    text-transform: uppercase;

    background: rgba(141, 166, 157, .15);
    border-left: 3px solid var(--main-blue);
}

.post-content .character-form-header h2 {
    margin: 0;

    color: var(--main-red);
    font: 700 27px/1.1 var(--rus);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.post-content .character-form-name {
    margin-top: 4px;

    color: var(--text-color2);
    font: 700 11px/1.2 var(--rus);
    letter-spacing: 2.2px;
    text-transform: uppercase;
}

.post-content .character-form-nickname {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 12px;
    padding: 5px 12px;
    color: var(--text-color2);
    font-size: 10px;
    background: var(--profile-body-color);
    border-radius: var(--radius-small);
}

.post-content .character-form-nickname span {
    color: var(--link-color);
    font: 700 8px/1 var(--rus);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ======================== MAIN IMAGE ======================== */

.post-content .character-form-visual {
    position: relative;

    width: 72%;
    max-width: 760px;
    margin: 0 auto 24px;
    padding: 0;

    background: var(--main-black);
    border-radius: var(--radius-medium);
    box-shadow:
        6px 6px 0 rgba(24, 77, 89, .18),
        -6px -6px 0 rgba(242, 164, 19, .10);
}

.post-content .character-form-visual::before {
    content: "";

    position: absolute;
    z-index: 2;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(24, 77, 89, .64),
            transparent 42%
        ),
        linear-gradient(
            115deg,
            rgba(115, 23, 2, .12),
            transparent 38%
        );

    border-radius: inherit;
}

.post-content .character-form-visual img {
    display: block;

    width: 100%;
    height: 285px;

    object-fit: cover;
    filter: saturate(.72) contrast(.96);

    border-radius: inherit;
}

.post-content .character-form-visual figcaption {
    position: absolute;
    z-index: 3;
    right: 14px;
    bottom: 12px;

    max-width: calc(100% - 28px);
    padding: 6px 10px;

    box-sizing: border-box;

    color: var(--main-white);
    font: 700 9px/1.25 var(--rus);
    letter-spacing: .6px;
    text-transform: uppercase;

    background: rgba(24, 77, 89, .84);
    border-radius: var(--radius-small);
}

.post-content .character-form-visual figcaption span {
    margin-right: 6px;
    color: var(--accent-color2);
}

/* ======================== SHORT INFORMATION ======================== */

.post-content .character-form-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;

    margin-bottom: 27px;
    overflow: hidden;

    background: rgba(24, 77, 89, .16);
    border: 1px solid rgba(24, 77, 89, .13);
    border-radius: var(--radius-medium);
}

.post-content .character-form-fact {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-width: 0;
    padding: 13px;
    background: rgb(255 255 255 / 68%);
}

.post-content .character-form-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    color: var(--link-color);

    background: rgba(141, 166, 157, .17);
    border-radius: 50%;
}

.post-content .character-form-icon i {
    font-size: 12px;
}

.post-content .character-form-fact b {
    display: block;
    margin-bottom: 3px;

    color: var(--main-red);
    font: 700 9px/1 var(--rus);
    letter-spacing: .7px;
    text-transform: uppercase;
}

.post-content .character-form-fact p {
    margin: 0;
    padding: 0;

    color: var(--text-color2);
    font-size: 10px;
    line-height: 1.45;
}

/* ======================== APPLICATION SUMMARY ICONS ======================== */

/* скрываем неработающие теги */

.post-content .character-form-icon i {
    display: none;
}

/* общие настройки иконок */

.post-content .character-form-icon::before {
    color: inherit !important;
    font-family: var(--fa);
    font-size: 13px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;

    -webkit-text-fill-color: currentColor !important;
}

/* принадлежность — здание */

.post-content
.character-form-fact:nth-child(1)
.character-form-icon {
    color: var(--main-blue);
}

.post-content
.character-form-fact:nth-child(1)
.character-form-icon::before {
    content: "\f1ad";
}


/* идентичность — секретный пользователь */

.post-content
.character-form-fact:nth-child(2)
.character-form-icon {
    color: var(--main-red);
}

.post-content
.character-form-fact:nth-child(2)
.character-form-icon::before {
    content: "\f21b";
}


/* ранг — кубок */

.post-content
.character-form-fact:nth-child(3)
.character-form-icon {
    color: var(--accent-color2);
}

.post-content
.character-form-fact:nth-child(3)
.character-form-icon::before {
    content: "\f091";
}


/* возраст — песочные часы */

.post-content
.character-form-fact:nth-child(4)
.character-form-icon {
    color: var(--button-color);
}

.post-content
.character-form-fact:nth-child(4)
.character-form-icon::before {
    content: "\f252";
}

/* ======================== HISTORY AND ABILITIES ======================== */

.post-content .character-form-content {
    display: grid;
    gap: 25px;
}

.post-content .character-form-section {
    display: flow-root;

    padding: 23px 0;

    border-top: 1px solid rgba(115, 23, 2, .16);
}

.post-content .character-form-section-title {
    float: left;

    width: 170px;
    margin: 0 25px 10px 0;

    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.post-content .character-form-section:last-child {
    border-bottom: 1px solid rgba(115, 23, 2, .16);
}

.post-content .character-form-section-title > span {
    color: rgba(24, 77, 89, .36);
    font: 700 25px/.85 var(--rus);
}

.post-content .character-form-section-title h3 {
    margin: 0 0 5px;

    color: var(--main-red);
    font: 700 15px/1 var(--rus);
    letter-spacing: .8px;
    text-transform: uppercase;
}

.post-content .character-form-section-title small {
    display: block;

    color: var(--link-color);
    font-size: 8px;
    letter-spacing: .7px;
    text-transform: uppercase;
}

.post-content .character-form-text {
    min-width: 0;

    color: var(--text-color2);
    font: 400 12px/1.8 var(--eng);
    text-align: justify;
}

.post-content .character-form-text p {
    margin: 0 0 13px;
    padding: 0;
}

.post-content .character-form-text p:last-child {
    margin-bottom: 0;
}

/* первая буква только первого абзаца раздела */

.post-content
.character-form-section
.character-form-text p:first-child::first-letter {
    float: left;

    margin: 5px 7px 0 0;

    color: var(--main-red);
    font: 700 31px/.75 var(--rus);
}

/* ======================== ADDITIONAL INFORMATION ======================== */

.post-content .character-form-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin-top: 25px;
}

/* последний блок занимает всю ширину */

.post-content .character-form-detail:last-child {
    grid-column: 1 / -1;
}

.post-content .character-form-detail {
    position: relative;
    min-width: 0;
    padding: 13px 14px 13px 17px;

    background: rgba(141, 166, 157, .09);
    border-left: 3px solid rgba(24, 77, 89, .55);
    border-radius:
        0
        var(--radius-small)
        var(--radius-small)
        0;
}

.post-content .character-form-detail:nth-child(2) {
    border-left-color: rgba(115, 23, 2, .57);
}

.post-content .character-form-detail:nth-child(3) {
    border-left-color: rgba(242, 164, 19, .72);
}

.post-content .character-form-detail b {
    display: block;
    margin-bottom: 5px;

    color: var(--main-red);
    font: 700 9px/1 var(--rus);
    letter-spacing: .7px;
    text-transform: uppercase;
}

.post-content .character-form-detail p {
    margin: 0;
    padding: 0;

    color: var(--text-color2);
    font-size: 10px;
    line-height: 1.5;
}

.post-content .character-form-detail a {
    color: var(--link-color) !important;
    font-weight: 700;
    border-bottom: 1px dashed rgba(24, 77, 89, .45);
}

.post-content .character-form-detail a:hover {
    color: var(--link-hover-color) !important;
}

/* ======================== CHARACTER WRITING SAMPLE ======================== */

.post-content .character-form-sample {
    display: block;

    margin-top: 25px;
    padding-top: 23px;

    border-top: 1px solid rgba(115, 23, 2, .16);
}

/* заголовок раздела */

.post-content .character-form-sample-title {
    position: relative;

    display: flex;
    align-items: center;
    gap: 11px;

    width: 100%;
    margin: 0 0 14px;
    padding: 0 0 11px;

    box-sizing: border-box;

    border-bottom: 1px dashed rgba(115, 23, 2, .18);
}

.post-content .character-form-sample-title > span {
    flex-shrink: 0;

    color: rgba(24, 77, 89, .36);
    font: 700 25px/.85 var(--rus);
}

.post-content .character-form-sample-title > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.post-content .character-form-sample-title h3 {
    margin: 0;

    color: var(--main-red);
    font: 700 15px/1 var(--rus);
    letter-spacing: .8px;
    text-transform: uppercase;
}

.post-content .character-form-sample-title small {
    color: var(--link-color);
    font-size: 8px;
    letter-spacing: .7px;
    text-transform: uppercase;
}

/* декоративная линия справа от заголовка */

.post-content .character-form-sample-title::after {
    content: "";

    flex: 1;
    height: 1px;
    margin-left: 7px;

    background:
        linear-gradient(
            to right,
            rgba(24, 77, 89, .25),
            transparent
        );
}

/* область пробного поста */

.post-content .character-form-sample-text {
    position: relative;
    width: 100%;
    min-width: 0;
    max-height: 400px;
    padding: 20px 22px;
    box-sizing: border-box;
    overflow: visible;
    color: var(--text-color2);
    font: 400 12px/1.85 var(--eng);
    text-align: justify;
    background: linear-gradient(135deg, rgba(255, 255, 255, .27), transparent 38%), rgb(255 255 255 / 68%);
    border: 1px solid rgba(115, 23, 2, .13);
    border-left: 3px solid rgba(24, 77, 89, .48);
    border-radius:
        0
        var(--radius-medium)
        var(--radius-medium)
        0;
    box-shadow:
        inset 0 0 25px rgba(115, 23, 2, .025);
    overflow-x: hidden;
    overflow-y: auto;
}

/* пунктирная линия сверху */

.post-content .character-form-sample-text::before {overflow-y: auto;
    content: "";

    position: absolute;
    top: 8px;
    right: 22px;
    left: 22px;

    height: 1px;

    background:
        repeating-linear-gradient(
            to right,
            rgba(115, 23, 2, .20) 0 3px,
            transparent 3px 7px
        );
}

/* абзацы */

.post-content .character-form-sample-text p {
    margin: 0 0 14px;
    padding: 0;
}

.post-content .character-form-sample-text p:first-child {
    margin-top: 4px;
}

.post-content .character-form-sample-text p:last-child {
    margin-bottom: 0;
}

/* буквица */

.post-content
.character-form-sample-text
p:first-child::first-letter {
    float: left;

    margin: 6px 8px 0 0;

    color: var(--main-red);
    font: 700 34px/.72 var(--rus);
}

/* ======================== TGD APPLICATION GENERATOR ======================== */

.tgd-generator,
.tgd-generator * {
    box-sizing: border-box;
}

.tgd-generator {
    position: relative;
    isolation: isolate;
    width: 100%;
    padding: 25px;
    overflow: hidden;
    color: var(--text-color2);
    font-family: var(--font-base);
    background: linear-gradient(135deg, rgb(249 247 247 / 97%), rgb(255 255 255 / 92%)), radial-gradient(circle, rgb(115 23 2 / 66%) 1px, transparent 1.3px) 0 0 / 7px 7px, var(--main-white);
    border: 1px solid rgba(115, 23, 2, .22);
    border-radius: var(--radius-large);
    box-shadow:
        7px 7px 0 var(--main-red),
        12px 12px 0 rgba(24, 77, 89, .25);
}

.tgd-generator::before {
    content: "";

    position: absolute;
    z-index: -1;
    top: 105px;
    right: -90px;

    width: 430px;
    height: 80px;

    background: rgba(141, 166, 157, .13);
    transform: rotate(-7deg);
}

/* ======================== HEADER ======================== */

.tgd-generator__header {
    margin-bottom: 23px;
    padding-bottom: 17px;

    border-bottom: 1px dashed rgba(115, 23, 2, .33);
}

.tgd-generator__issue {
    display: inline-block;

    margin-bottom: 9px;
    padding: 5px 9px;

    color: var(--main-white);
    font: 700 8px/1 var(--rus);
    letter-spacing: 1.2px;
    text-transform: uppercase;

    background: var(--main-blue);
    border-radius: var(--radius-small);

    box-shadow:
        3px 3px 0 rgba(115, 23, 2, .17);

    transform: skew(-7deg);
}

.tgd-generator__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.tgd-generator__heading h2 {
    margin: 0;

    color: var(--main-red);
    font: 700 27px/1 var(--rus);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.tgd-generator__heading span {
    color: rgba(24, 77, 89, .25);
    font: 700 20px/1 var(--rus);
    letter-spacing: 1px;
}

.tgd-generator__header p {
    margin: 9px 0 0;
    padding: 0;

    color: var(--text-color2);
    font-size: 10px;
    line-height: 1.5;
}

/* ======================== SECTIONS ======================== */

.tgd-generator__section {
    display: grid;
    grid-template-columns: 155px minmax(0, 1fr);
    gap: 20px;

    padding: 20px 0;

    border-bottom: 1px solid rgba(115, 23, 2, .13);
}

.tgd-generator__section-title {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.tgd-generator__section-title > span {
    color: rgba(24, 77, 89, .34);
    font: 700 23px/.9 var(--rus);
}

.tgd-generator__section-title h3 {
    margin: 0 0 5px;

    color: var(--main-red);
    font: 700 13px/1 var(--rus);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.tgd-generator__section-title small {
    display: block;

    color: var(--link-color);
    font-size: 7px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* ======================== FIELDS ======================== */

.tgd-generator__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.tgd-generator__full {
    grid-column: 1 / -1;
}

.tgd-generator__field {
    min-width: 0;
}

.tgd-generator__field label,
.tgd-generator__result > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 6px;

    color: var(--main-red);
    font: 700 8px/1.3 var(--rus);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.tgd-generator input,
.tgd-generator textarea {
    display: block;
    width: 100%;
    margin: 0;
    padding: 9px 11px;
    color: var(--text-color2);
    font: 400 10px/1.55 var(--font-base);
    background: rgb(255 255 255);
    border: 1px solid rgba(115, 23, 2, .16);
    border-left: 3px solid rgba(24, 77, 89, .48);
    border-radius:
        0
        var(--radius-small)
        var(--radius-small)
        0;
    outline: none;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.tgd-generator input:focus,
.tgd-generator textarea:focus {
    background: var(--main-white);
    border-color: rgba(115, 23, 2, .32);
    border-left-color: var(--accent-color2);

    box-shadow:
        3px 3px 0 rgba(24, 77, 89, .11);
}

.tgd-generator textarea {
    min-height: 125px;
    resize: vertical;
}

.tgd-generator textarea.tgd-generator__sample {
    min-height: 310px;
}

.tgd-generator__counter {
    color: var(--link-color);
    font-weight: 400;
}

.tgd-generator__counter b {
    color: var(--accent-color2);
}

.tgd-generator__hint {
    margin-top: 6px;

    color: rgba(46, 46, 45, .62);
    font-size: 8px;
    line-height: 1.45;
}

/* ======================== BUTTONS ======================== */

.tgd-generator__buttons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;

    padding: 20px 0 5px;
}

.tgd-generator__buttons button {
    min-height: 32px;
    margin: 0;
    padding: 8px 13px;

    cursor: pointer;

    color: var(--main-white);
    font: 700 8px/1 var(--rus);
    letter-spacing: .7px;
    text-transform: uppercase;

    background: var(--main-red);
    border: 1px solid var(--main-red);
    border-radius: var(--radius-small);

    box-shadow:
        3px 3px 0 var(--accent-color2);

    transition:
        color .2s ease,
        background-color .2s ease,
        transform .2s ease;
}

.tgd-generator__buttons button:hover {
    color: var(--main-red);
    background: var(--accent-color2);

    transform: translateY(-1px);
}

.tgd-generator__buttons
button.tgd-generator__button--secondary {
    color: var(--link-color);

    background: var(--main-white);
    border-color: rgba(24, 77, 89, .20);

    box-shadow:
        3px 3px 0 rgba(24, 77, 89, .18);
}

.tgd-generator__buttons
button.tgd-generator__button--secondary:hover {
    color: var(--main-white);
    background: var(--main-blue);
}

/* ======================== RESULT ======================== */

.tgd-generator__result {
    margin-top: 17px;
    padding-top: 17px;

    border-top: 1px dashed rgba(115, 23, 2, .30);
}

#cfg-result {
    width: 100%;
    min-height: 150px;
    max-height: 360px;
    margin: 0;
    padding: 14px;

    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;

    color: var(--main-red);
    font: 400 10px/1.5 monospace;

    background: var(--closed-theme);
    border: 1px solid var(--accent-color2);
    border-radius: var(--radius-medium);

    scrollbar-width: thin;
    scrollbar-color: var(--accent-color2) transparent;
}

.tgd-generator__note {
    min-height: 15px;
    margin-top: 7px;

    color: var(--link-color);
    font-size: 9px;
    text-align: right;
}

.tgd-generator__note.is-bad {
    color: var(--main-red);
}


/* ======================== TGD WANTED CHARACTER ======================== */

.post-content .tgd-wanted {
    --wanted-accent: var(--main-red);
    --wanted-secondary: var(--accent-color2);
    --wanted-shadow: rgba(115, 23, 2, .18);
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: 275px minmax(0, 1fr);
    width: 100%;
    max-width: none;
    min-height: 540px;
    margin: -1em 0;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--text-color2);
    font-family: var(--font-base);
    background: var(--main-grey);
    border: 1px solid rgba(115, 23, 2, .20);
    border-radius: var(--radius-large);
    box-shadow:
        7px 7px 0 var(--wanted-accent),
        12px 12px 0 var(--wanted-shadow);
}

/* заявка от АМС */

.post-content .tgd-wanted--ams {
    --wanted-accent: var(--main-red);
    --wanted-secondary: var(--accent-color2);
    --wanted-shadow: rgba(24, 77, 89, .20);
}

/* заявка от игрока */

.post-content .tgd-wanted--player {
    --wanted-accent: var(--main-blue);
    --wanted-secondary: var(--button-color);
    --wanted-shadow: rgba(115, 23, 2, .15);
}

/* ======================== IMAGE ======================== */

.post-content .tgd-wanted__image {
    position: relative;
    z-index: 1;
    min-width: 0;
    min-height: 520px;
    overflow: hidden;
    background: var(--main-black);
}

.post-content .tgd-wanted__image::before {
    content: "";

    position: absolute;
    z-index: 2;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to top,
            rgba(24, 77, 89, .90),
            transparent 48%
        ),
        linear-gradient(
            115deg,
            rgba(115, 23, 2, .24),
            transparent 40%
        );
}

.post-content .tgd-wanted__image::after {
    content: "";

    position: absolute;
    z-index: 3;
    top: -10%;
    right: -50px;
    bottom: -10%;

    width: 100px;

    pointer-events: none;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(251, 239, 224, .70),
            var(--main-white)
        );

    filter: blur(23px);
}

.post-content .tgd-wanted__image img {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 540px;

    object-fit: cover;
    object-position: center;

    filter:
        saturate(.76)
        contrast(.97)
        brightness(.91);
}

.post-content .tgd-wanted--player
.tgd-wanted__image img {
    filter:
        saturate(.72)
        contrast(.95)
        brightness(.94);
}

.post-content .tgd-wanted__image-label {
    position: absolute;
    z-index: 4;
    right: 18px;
    bottom: 18px;
    left: 18px;

    padding: 10px 12px;

    color: var(--main-white);
    font: 700 10px/1.35 var(--rus);
    letter-spacing: .7px;
    text-transform: uppercase;

    background:
        color-mix(
            in srgb,
            var(--wanted-accent) 78%,
            transparent
        );

    border-left: 3px solid var(--wanted-secondary);
    border-radius:
        0
        var(--radius-small)
        var(--radius-small)
        0;

    box-shadow:
        3px 3px 0 rgba(62, 21, 14, .28);
}

.post-content .tgd-wanted__image-label span {
    display: block;
    margin-bottom: 3px;

    color: var(--wanted-secondary);
    font-size: 8px;
    letter-spacing: 1px;
}

/* ======================== CONTENT ======================== */

.post-content .tgd-wanted__content {
    position: relative;
    z-index: 3;
    min-width: 0;
    padding: 24px 26px;
    box-sizing: border-box;
    background: radial-gradient(circle, color-mix(in srgb, var(--wanted-accent) 11%, transparent) 1px, transparent 1.3px) right top / 8px 8px, linear-gradient(135deg, rgba(255, 255, 255, .20), transparent 35%), rgb(255 255 255 / 82%);
}

/* диагональная полоса */

.post-content .tgd-wanted__content::before {
    content: "";

    position: absolute;
    z-index: -1;
    top: 96px;
    right: -75px;

    width: 360px;
    height: 58px;

    pointer-events: none;

    background:
        color-mix(
            in srgb,
            var(--wanted-accent) 9%,
            transparent
        );

    transform: rotate(-7deg);
}

/* ======================== HEADER ======================== */

.post-content .tgd-wanted__header {
    margin-bottom: 14px;
    padding-bottom: 13px;

    border-bottom:
        1px dashed
        color-mix(
            in srgb,
            var(--wanted-accent) 32%,
            transparent
        );
}

.post-content .tgd-wanted__source {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-bottom: 10px;
    padding: 5px 9px;

    color: var(--main-white);
    font: 700 8px/1 var(--rus);
    letter-spacing: 1px;
    text-transform: uppercase;

    background: var(--wanted-accent);
    border-radius: var(--radius-small);

    box-shadow:
        3px 3px 0 var(--wanted-secondary);

    transform: skew(-6deg);
}

.post-content .tgd-wanted__source i {
    color: var(--wanted-secondary);
}

.post-content .tgd-wanted__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.post-content .tgd-wanted__heading h2 {
    margin: 0;

    color: var(--wanted-accent);
    font: 700 23px/1.1 var(--rus);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.post-content .tgd-wanted__name {
    margin-top: 4px;

    color: var(--text-color2);
    font: 700 10px/1.2 var(--rus);
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.post-content .tgd-wanted__number {
    flex-shrink: 0;

    color:
        color-mix(
            in srgb,
            var(--wanted-accent) 28%,
            transparent
        );

    font: 700 9px/1 var(--rus);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.post-content .tgd-wanted__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-top: 11px;
}

.post-content .tgd-wanted__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    color: var(--wanted-accent);
    font: 700 8px/1 var(--rus);
    letter-spacing: .6px;
    text-transform: uppercase;
    background: white;
    border-radius: var(--radius-small);
}

.post-content .tgd-wanted__badge::before {
    color: var(--wanted-secondary);
    font-family: var(--fa);
    font-size: 8px;
    font-weight: 900;
}

.post-content .tgd-wanted__badge--type::before {
    content: "\f471";
}

.post-content .tgd-wanted__badge--age::before {
    content: "\f1da";
}

/* ======================== FACTS ======================== */

.post-content .tgd-wanted__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;

    margin-bottom: 11px;
}

.post-content .tgd-wanted__fact {
    min-width: 0;
    padding: 8px 10px;
    background: white;
    border-left:
        3px solid
        color-mix(
            in srgb,
            var(
    --wanted-accent) 66%,
            transparent
        );
    border-radius:
        0
        var(
    --radius-small)
        var(--radius-small)
        0;
}

.post-content .tgd-wanted__fact b {
    display: block;
    margin-bottom: 4px;

    color: var(--wanted-accent);
    font: 700 8px/1 var(--rus);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.post-content .tgd-wanted__fact span {
    color: var(--text-color2);
    font: 400 9px/1.4 var(--font-base);
}

/* ======================== TAGS ======================== */

.post-content .tgd-wanted__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;

    margin-bottom: 12px;
}

.post-content .tgd-wanted__tags span {
    padding: 4px 8px;

    color: var(--wanted-accent);
    font: 700 8px/1 var(--rus);
    letter-spacing: .4px;
    text-transform: lowercase;

    background:
        color-mix(
            in srgb,
            var(--wanted-accent) 7%,
            transparent
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--wanted-accent) 17%,
            transparent
        );

    border-radius: var(--radius-small);
}

.post-content .tgd-wanted__tags span::before {
    content: "#";
    margin-right: 2px;

    color: var(--wanted-secondary);
}

/* ======================== DESCRIPTION ======================== */

.post-content .tgd-wanted__description {
    display: grid;
    grid-template-columns: 125px minmax(0, 1fr);
    gap: 16px;

    padding: 14px 0;

    border-top:
        1px solid
        color-mix(
            in srgb,
            var(--wanted-accent) 15%,
            transparent
        );
}

.post-content .tgd-wanted__section-title {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.post-content .tgd-wanted__section-title > span {
    color:
        color-mix(
            in srgb,
            var(--wanted-accent) 34%,
            transparent
        );

    font: 700 21px/.9 var(--rus);
}

.post-content .tgd-wanted__section-title h3 {
    margin: 0 0 4px;

    color: var(--wanted-accent);
    font: 700 12px/1 var(--rus);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.post-content .tgd-wanted__section-title small {
    display: block;

    color: var(--link-color);
    font-size: 7px;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.post-content .tgd-wanted__text {
    max-height: 135px;
    padding-right: 8px;

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

    color: var(--text-color2);
    font: 400 10px/1.65 var(--font-base);
    text-align: justify;

    scrollbar-width: thin;
    scrollbar-color: var(--wanted-accent) transparent;
}

.post-content .tgd-wanted__text p {
    margin: 0 0 10px;
    padding: 0;
}

.post-content .tgd-wanted__text p:last-child {
    margin-bottom: 0;
}

.post-content .tgd-wanted__text::-webkit-scrollbar {
    width: 4px;
}

.post-content .tgd-wanted__text::-webkit-scrollbar-track {
    background: transparent;
}

.post-content .tgd-wanted__text::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            to bottom,
            var(--wanted-secondary),
            var(--wanted-accent)
        );

    border-radius: 4px;
}

/* ======================== WISHES ======================== */

.post-content .tgd-wanted__wishes {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 15px;
    margin-top: 4px;
    padding: 13px;
    background: white;
    border:
        1px solid
        color-mix(
            in srgb,
            var(--wanted-accent) 16%,
            transparent
        );
    border-radius: var(--radius-medium);
}

.post-content .tgd-wanted__wishes-label {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    color: var(--wanted-accent);
}

.post-content .tgd-wanted__wishes-label > i {
    margin-top: 1px;

    color: var(--wanted-secondary);
    font-size: 11px;
}

.post-content .tgd-wanted__wishes-label b {
    display: block;
    margin-bottom: 4px;

    color: var(--wanted-accent);
    font: 700 9px/1.2 var(--rus);
    letter-spacing: .5px;
    text-transform: uppercase;
}

.post-content .tgd-wanted__wishes-label small {
    display: block;

    color: var(--link-color);
    font-size: 7px;
    line-height: 1.35;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.post-content .tgd-wanted__wishes-text {
    color: var(--text-color2);
    font: 400 10px/1.65 var(--font-base);
    text-align: justify;
}

.post-content .tgd-wanted__wishes-text p {
    margin: 0 0 9px;
    padding: 0;
}

.post-content .tgd-wanted__wishes-text p:last-child {
    margin-bottom: 0;
}

/* =========================================================
   TGD WANTED CHARACTER GENERATOR
========================================================= */

.tgd-wanted-generator,
.tgd-wanted-generator * {
    box-sizing: border-box;
}

.tgd-wanted-generator {
    position: relative;
    isolation: isolate;
    margin: -1em auto;
    width: 100%;
    padding: 25px;
    overflow: hidden;
    color: var(--text-color2);
    font-family: var(--font-base);
    background: var(--forum-body);
    border: 1px solid rgba(115, 23, 2, .22);
    border-radius: var(--radius-large);
    box-shadow:
        7px 7px 0 var(--main-red),
        12px 12px 0 rgba(24, 77, 89, .25);
}

/* диагональная фоновая полоса */

.tgd-wanted-generator::before {
    content: "";

    position: absolute;
    z-index: -1;
    top: 105px;
    right: -90px;

    width: 430px;
    height: 80px;

    pointer-events: none;

    background: rgba(141, 166, 157, .13);
    transform: rotate(-7deg);
}

/* газетные точки в углу */

.tgd-wanted-generator::after {
    content: "";

    position: absolute;
    z-index: -1;
    right: -20px;
    bottom: -25px;

    width: 240px;
    height: 180px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(115, 23, 2, .15) 2px,
            transparent 2.5px
        )
        0 0 / 11px 11px;

    -webkit-mask-image:
        linear-gradient(
            315deg,
            #000,
            transparent 72%
        );

    mask-image:
        linear-gradient(
            315deg,
            #000,
            transparent 72%
        );
}

/* =========================================================
   HEADER
========================================================= */

.tgd-wanted-generator .tgd-generator__header {
    position: relative;

    margin-bottom: 23px;
    padding-bottom: 17px;

    border-bottom: 1px dashed rgba(115, 23, 2, .33);
}

.tgd-wanted-generator .tgd-generator__issue {
    display: inline-block;

    margin-bottom: 9px;
    padding: 5px 9px;

    color: var(--main-white);
    font: 700 8px/1 var(--rus);
    letter-spacing: 1.2px;
    text-transform: uppercase;

    background: var(--main-blue);
    border-radius: var(--radius-small);

    box-shadow:
        3px 3px 0 rgba(115, 23, 2, .17);

    transform: skew(-7deg);
}

.tgd-wanted-generator .tgd-generator__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.tgd-wanted-generator .tgd-generator__heading h2 {
    margin: 0;

    color: var(--main-red);
    font: 700 27px/1 var(--rus);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.tgd-wanted-generator .tgd-generator__heading span {
    flex-shrink: 0;

    color: rgba(24, 77, 89, .25);
    font: 700 20px/1 var(--rus);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tgd-wanted-generator .tgd-generator__header p {
    margin: 9px 0 0;
    padding: 0;

    color: var(--text-color2);
    font-size: 10px;
    line-height: 1.5;
}

/* =========================================================
   SECTIONS
========================================================= */

.tgd-wanted-generator .tgd-generator__section {
    display: grid;
    grid-template-columns: 155px minmax(0, 1fr);
    gap: 20px;

    padding: 20px 0;

    border-bottom: 1px solid rgba(115, 23, 2, .13);
}

.tgd-wanted-generator
.tgd-generator__section:last-of-type {
    border-bottom: 0;
}

.tgd-wanted-generator .tgd-generator__section-title {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.tgd-wanted-generator
.tgd-generator__section-title > span {
    flex-shrink: 0;

    color: rgba(24, 77, 89, .34);
    font: 700 23px/.9 var(--rus);
}

.tgd-wanted-generator
.tgd-generator__section-title h3 {
    margin: 0 0 5px;

    color: var(--main-red);
    font: 700 13px/1 var(--rus);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.tgd-wanted-generator
.tgd-generator__section-title small {
    display: block;

    color: var(--link-color);
    font-size: 7px;
    line-height: 1.4;
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* =========================================================
   GRID
========================================================= */

.tgd-wanted-generator .tgd-generator__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    min-width: 0;
}

.tgd-wanted-generator .tgd-generator__full {
    grid-column: 1 / -1;
}

.tgd-wanted-generator .tgd-generator__field {
    min-width: 0;
}

/* =========================================================
   LABELS
========================================================= */

.tgd-wanted-generator .tgd-generator__field label,
.tgd-wanted-generator .tgd-generator__result > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 6px;

    color: var(--main-red);
    font: 700 8px/1.3 var(--rus);
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* =========================================================
   INPUTS, TEXTAREAS AND SELECT
========================================================= */

.tgd-wanted-generator input,
.tgd-wanted-generator textarea,
.tgd-wanted-generator select {
    display: block;
    width: 100%;
    margin: 0;
    padding: 9px 11px;
    box-sizing: border-box;
    color: var(--text-color2);
    font: 400 10px/1.55 var(--font-base);
    background: var(--profile-avatar-border);
    border: 1px solid rgba(115, 23, 2, .16);
    border-left: 3px solid rgba(24, 77, 89, .48);
    border-radius:
        0
        var(--radius-small)
        var(--radius-small)
        0;
    outline: none;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.tgd-wanted-generator input:focus,
.tgd-wanted-generator textarea:focus,
.tgd-wanted-generator select:focus {
    background: var(--main-white);

    border-color: rgba(115, 23, 2, .32);
    border-left-color: var(--accent-color2);

    box-shadow:
        3px 3px 0 rgba(24, 77, 89, .11);
}

.tgd-wanted-generator input::placeholder,
.tgd-wanted-generator textarea::placeholder {
    color: rgba(46, 46, 45, .47);
    opacity: 1;
}

.tgd-wanted-generator textarea {
    min-height: 130px;

    resize: vertical;
}

.tgd-wanted-generator select {
    min-height: 36px;
    cursor: pointer;
}

.tgd-wanted-generator select option {
    color: var(--text-color2);
    background: var(--main-white);
}

/* скрытое поле режима */

.tgd-wanted-generator input[type="hidden"] {
    display: none;
}

/* =========================================================
   HINTS
========================================================= */

.tgd-wanted-generator .tgd-generator__hint {
    margin-top: 6px;

    color: rgba(46, 46, 45, .62);
    font-size: 8px;
    line-height: 1.45;
}

/* =========================================================
   MODE SWITCH
========================================================= */

.wanted-generator__mode {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    min-width: 0;
}

.wanted-generator__mode-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 34px;
    margin: 0;
    padding: 8px 13px;

    box-sizing: border-box;
    cursor: pointer;

    color: var(--link-color);
    font: 700 9px/1 var(--rus);
    letter-spacing: .7px;
    text-transform: uppercase;

    background: rgba(141, 166, 157, .10);
    border: 1px solid rgba(24, 77, 89, .20);
    border-radius: var(--radius-small);

    box-shadow:
        3px 3px 0 rgba(24, 77, 89, .15);

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.wanted-generator__mode-button:hover {
    color: var(--main-red);
    background: var(--main-white);

    transform: translateY(-1px);
}

/* активный режим АМС */

.wanted-generator__mode-button.is-active {
    color: var(--main-white);

    background: var(--main-red);
    border-color: var(--main-red);

    box-shadow:
        3px 3px 0 var(--accent-color2);
}

/* активный режим игрока */

.wanted-generator__mode-button[
    data-wg-mode="player"
].is-active {
    color: var(--main-white);

    background: var(--main-blue);
    border-color: var(--main-blue);

    box-shadow:
        3px 3px 0 var(--button-color);
}

/* Font Awesome может превратить i в svg */

.wanted-generator__mode-button i,
.wanted-generator__mode-button svg,
.wanted-generator__mode-button svg path {
    color: inherit !important;
    fill: currentColor !important;
}

.wanted-generator__mode-note {
    flex: 1 1 240px;

    min-width: 0;
    padding: 9px 11px;

    color: var(--text-color2);
    font-size: 9px;
    line-height: 1.45;

    background:
        linear-gradient(
            105deg,
            rgba(141, 166, 157, .11),
            rgba(251, 239, 224, .55)
        );

    border-left: 3px solid var(--accent-color2);

    border-radius:
        0
        var(--radius-small)
        var(--radius-small)
        0;
}

/* =========================================================
   CONTROL BUTTONS
========================================================= */

.tgd-wanted-generator .tgd-generator__buttons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;

    padding: 20px 0 5px;
}

.tgd-wanted-generator
.tgd-generator__buttons button {
    min-height: 32px;
    margin: 0;
    padding: 8px 13px;

    box-sizing: border-box;
    cursor: pointer;

    color: var(--main-white);
    font: 700 8px/1 var(--rus);
    letter-spacing: .7px;
    text-transform: uppercase;

    background: var(--main-red);
    border: 1px solid var(--main-red);
    border-radius: var(--radius-small);

    box-shadow:
        3px 3px 0 var(--accent-color2);

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.tgd-wanted-generator
.tgd-generator__buttons button:hover {
    color: var(--main-red);

    background: var(--accent-color2);
    border-color: var(--accent-color2);

    transform: translateY(-1px);
}

.tgd-wanted-generator
.tgd-generator__buttons
button.tgd-generator__button--secondary {
    color: var(--link-color);

    background: var(--main-white);
    border-color: rgba(24, 77, 89, .20);

    box-shadow:
        3px 3px 0 rgba(24, 77, 89, .18);
}

.tgd-wanted-generator
.tgd-generator__buttons
button.tgd-generator__button--secondary:hover {
    color: var(--main-white);

    background: var(--main-blue);
    border-color: var(--main-blue);
}

/* =========================================================
   RESULT
========================================================= */

.tgd-wanted-generator .tgd-generator__result {
    margin-top: 17px;
    padding-top: 17px;

    border-top: 1px dashed rgba(115, 23, 2, .30);
}

#wg-result {
    display: block;

    width: 100%;
    min-height: 150px;
    max-height: 360px;
    margin: 0;
    padding: 14px;

    box-sizing: border-box;
    overflow: auto;

    white-space: pre-wrap;
    overflow-wrap: anywhere;

    color: var(--accent-color);
    font: 400 10px/1.5 monospace;

    background: var(--closed-theme);
    border: 1px solid var(--accent-color2);
    border-radius: var(--radius-medium);

    scrollbar-width: thin;
    scrollbar-color: var(--accent-color2) transparent;
}

#wg-result::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

#wg-result::-webkit-scrollbar-track {
    background: transparent;
}

#wg-result::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            to bottom,
            var(--accent-color2),
            var(--main-blue)
        );

    border-radius: 5px;
}

/* =========================================================
   STATUS NOTE
========================================================= */

.tgd-wanted-generator .tgd-generator__note {
    min-height: 15px;
    margin-top: 7px;

    color: var(--link-color);
    font-size: 9px;
    line-height: 1.4;
    text-align: right;
}

.tgd-wanted-generator .tgd-generator__note.is-bad {
    color: var(--main-red);
}

/* ======================== TGD ROLE LIST ======================== */

.post-content .tgd-roles {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    margin: -1em 0;
    padding: 25px;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--text-color2);
    font-family: var(--font-base);
    background: linear-gradient(135deg, rgb(255 255 255 / 96%), rgb(239 250 255 / 91%)), radial-gradient(circle, rgb(143 143 143) 1px, transparent 1.3px) 0 0 / 7px 7px, var(--main-white);
    border: 1px solid rgba(115, 23, 2, .24);
    border-radius: var(--radius-large);
    box-shadow:
        7px 7px 0 var(--main-red),
        12px 12px 0 rgba(24, 77, 89, .28);
}

/* фоновая полоса */

.post-content .tgd-roles::before {
    content: "";

    position: absolute;
    z-index: -1;
    top: 78px;
    right: -85px;

    width: 430px;
    height: 80px;

    pointer-events: none;

    background: rgba(141, 166, 157, .14);
    transform: rotate(-7deg);
}

/* фоновые точки */

.post-content .tgd-roles::after {
    content: "";

    position: absolute;
    z-index: -1;
    right: -15px;
    bottom: -20px;

    width: 230px;
    height: 170px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(115, 23, 2, .16) 2px,
            transparent 2.5px
        )
        0 0 / 11px 11px;

    -webkit-mask-image:
        linear-gradient(
            315deg,
            #000,
            transparent 72%
        );

    mask-image:
        linear-gradient(
            315deg,
            #000,
            transparent 72%
        );
}

/* карточка, скрытая фильтром */

.post-content .tgd-role.is-hidden {
    display: none !important;
}

/* ======================== HEADER ======================== */

.post-content .tgd-roles__header {
    position: relative;

    margin-bottom: 18px;
    padding-bottom: 17px;

    border-bottom: 1px dashed rgba(115, 23, 2, .36);
}

.post-content .tgd-roles__issue {
    display: inline-block;

    margin-bottom: 8px;
    padding: 5px 9px;

    color: var(--main-white);
    font: 700 8px/1 var(--rus);
    letter-spacing: 1.3px;
    text-transform: uppercase;

    background: var(--main-blue);
    border-radius: var(--radius-small);

    box-shadow:
        3px 3px 0 rgba(115, 23, 2, .17);

    transform: skew(-7deg);
}

.post-content .tgd-roles__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.post-content .tgd-roles__title {
    color: var(--main-red);
    font: 700 27px/1 var(--rus);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.post-content .tgd-roles__mark {
    flex-shrink: 0;

    color: rgba(24, 77, 89, .25);
    font: 700 21px/1 var(--rus);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.post-content .tgd-roles__subtitle {
    margin-top: 9px;

    color: var(--text-color2);
    font: 400 10px/1.5 var(--font-base);
}

/* ======================== FILTERS ======================== */

.post-content .tgd-roles__filters {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin-bottom: 11px;
}

.post-content .tgd-roles__filter-group {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    min-width: 0;
    padding: 9px 10px;
    background: rgb(255 255 255 / 88%);
    border: 1px solid rgba(115, 23, 2, .13);
    border-radius: var(--radius-small);
}

.post-content .tgd-roles__filter-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    margin-right: 3px;

    color: var(--main-red);
    font: 700 9px/1 var(--rus);
    letter-spacing: .7px;
    text-transform: uppercase;
}

.post-content .tgd-roles__filter-title i {
    color: var(--accent-color2);
}

/* обнуляем форумное оформление кнопок */

.post-content button.tgd-roles__filter {
    min-height: 0;
    margin: 0;
    padding: 5px 9px;

    box-sizing: border-box;
    cursor: pointer;

    color: var(--link-color);
    font: 700 8px/1 var(--rus);
    letter-spacing: .5px;
    text-transform: uppercase;

    background: rgba(141, 166, 157, .11);
    border: 1px solid rgba(24, 77, 89, .18);
    border-radius: var(--radius-small);

    box-shadow: none;

    transition:
        color .18s ease,
        background .18s ease,
        border-color .18s ease,
        transform .18s ease;
}

.post-content button.tgd-roles__filter:hover {
    color: var(--main-red);
    background: var(--main-white);
    border-color: rgba(115, 23, 2, .28);

    transform: translateY(-1px);
}

.post-content button.tgd-roles__filter.is-active {
    color: var(--main-white);

    background: var(--main-red);
    border-color: var(--main-red);

    box-shadow:
        2px 2px 0 var(--accent-color2);
}

/* ======================== RESULT COUNTER ======================== */

.post-content .tgd-roles__result {
    margin-bottom: 13px;

    color: rgba(46, 46, 45, .65);
    font: 700 8px/1 var(--rus);
    letter-spacing: .7px;
    text-align: right;
    text-transform: uppercase;
}

.post-content .tgd-roles__result b {
    color: var(--main-red);
}

/* ======================== ROLE GRID ======================== */

.post-content .tgd-roles__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

/* ======================== ROLE CARD ======================== */

.post-content .tgd-role {
    position: relative;
    min-width: 0;
    padding: 13px;
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255, 255, 255, .27), transparent 38%), rgb(255 255 255 / 76%);
    border: 1px solid rgba(115, 23, 2, .15);
    border-left: 4px solid var(--main-blue);
    border-radius:
        0
        var(--radius-medium)
        var(--radius-medium)
        0;
    box-shadow:
        3px 3px 0 rgba(24, 77, 89, .10);
    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

/* extra-human получает красную полосу */

.post-content
.tgd-role[data-type="extra-human"] {
    border-left-color: var(--main-red);
}

.post-content .tgd-role:hover {
    background: var(--profile-avatar-border);
    border-color: rgba(115, 23, 2, .28);
    transform: translateY(-2px);
}

/* комиксный угол */

.post-content .tgd-role::after {
    content: "";

    position: absolute;
    right: -24px;
    bottom: -24px;

    width: 58px;
    height: 58px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(115, 23, 2, .15) 1px,
            transparent 1.5px
        )
        0 0 / 6px 6px;

    transform: rotate(15deg);
}

/* ======================== CARD HEADER ======================== */

.post-content .tgd-role__header {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 9px;
    padding-bottom: 8px;

    border-bottom: 1px dashed rgba(115, 23, 2, .19);
}

.post-content .tgd-role__name {
    min-width: 0;
    margin-right: auto;

    color: var(--main-red) !important;
    font: 700 14px/1.2 var(--rus);
    letter-spacing: .4px;
    text-transform: uppercase;
}

.post-content .tgd-role__name:hover {
    color: var(--link-hover-color) !important;
}

.post-content .tgd-role__gender {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;

    width: 25px;
    height: 25px;

    color: var(--main-white);

    background: var(--main-blue);
    border-radius: 50%;

    box-shadow:
        2px 2px 0 var(--accent-color2);
}

.post-content
.tgd-role[data-gender="female"]
.tgd-role__gender {
    background: var(--main-red);
}

.post-content .tgd-role__gender i {
    font-size: 10px;
}

/* ======================== BADGES ======================== */

.post-content .tgd-role__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;

    margin-bottom: 10px;
}

.post-content .tgd-role__type,
.post-content .tgd-role__age {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 4px 7px;

    color: var(--link-color);
    font: 700 8px/1 var(--rus);
    letter-spacing: .5px;
    text-transform: uppercase;

    background: rgba(141, 166, 157, .12);
    border-radius: var(--radius-small);
}

.post-content .tgd-role__type::before {
    content: "";

    width: 5px;
    height: 5px;

    background: var(--main-blue);
    transform: rotate(45deg);
}

.post-content
.tgd-role[data-type="extra-human"]
.tgd-role__type {
    color: var(--main-red);
    background: rgba(115, 23, 2, .07);
}

.post-content
.tgd-role[data-type="extra-human"]
.tgd-role__type::before {
    background: var(--accent-color2);
}

.post-content .tgd-role__age::before {
    content: "\f1da";

    color: var(--accent-color2);
    font-family: var(--fa);
    font-size: 8px;
    font-weight: 900;
}

/* ======================== CARD INFORMATION ======================== */

.post-content .tgd-role__information {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.post-content .tgd-role__field {
    min-width: 0;
    padding: 7px 8px;
    background: rgb(227 227 227 / 35%);
    border-radius: var(--radius-small);
}

.post-content .tgd-role__field b {
    display: block;

    margin-bottom: 4px;

    color: var(--main-red);
    font: 700 8px/1 var(--rus);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.post-content .tgd-role__field span {
    display: block;

    color: var(--text-color2);
    font: 400 9px/1.4 var(--font-base);
}

/* ======================== EMPTY RESULT ======================== */

.post-content .tgd-roles__empty {
    margin-top: 12px;
    padding: 18px;

    color: var(--link-color);
    font: 700 10px/1.4 var(--rus);
    letter-spacing: .6px;
    text-align: center;
    text-transform: uppercase;

    background: rgba(141, 166, 157, .09);
    border: 1px dashed rgba(24, 77, 89, .28);
    border-radius: var(--radius-small);
}

.post-content .tgd-roles__empty[hidden],
.post-content .tgd-role[hidden] {
    display: none !important;
}

/* ======================== ROLE GENDER ICONS ======================== */

/* скрываем неработающий тег Font Awesome */

.post-content .tgd-role__gender i {
    display: none;
}

/* общие настройки иконки */

.post-content .tgd-role__gender::before {
    color: var(--main-white) !important;
    font-family: var(--fa);
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
    line-height: 1;
}

/* женщина — Venus */

.post-content
.tgd-role[data-gender="female"]
.tgd-role__gender::before {
    content: "\f221";
}

/* мужчина — Mars */

.post-content
.tgd-role[data-gender="male"]
.tgd-role__gender::before {
    content: "\f222";
}

/* ======================== TGD FACE CLAIMS ======================== */

.post-content .tgd-faces {
    position: relative;
    isolation: isolate;
    width: 100%;
    max-width: none;
    margin: -1em 0;
    padding: 25px;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--text-color2);
    font-family: var(--font-base);
    background: /* свет поверх точек для читаемости */ linear-gradient(135deg, rgb(255 255 255 / 96%), rgb(201 209 211 / 31%)), /* комиксные точки */ radial-gradient(circle, rgba(115, 23, 2, .13) 1px, transparent 1.3px) 0 0 / 7px 7px, var(--main-white);
    border: 1px solid rgba(115, 23, 2, .24);
    border-radius: var(--radius-large);
    box-shadow:
        7px 7px 0 var(--main-red),
        12px 12px 0 rgba(24, 77, 89, .28);
}

/* декоративная полоса на фоне */

.post-content .tgd-faces::before {
    content: "";

    position: absolute;
    z-index: -1;
    top: 78px;
    right: -85px;

    width: 430px;
    height: 80px;

    pointer-events: none;

    background: rgba(141, 166, 157, .14);
    transform: rotate(-7deg);
}

/* точки в правом нижнем углу */

.post-content .tgd-faces::after {
    content: "";

    position: absolute;
    z-index: -1;
    right: -15px;
    bottom: -20px;

    width: 230px;
    height: 170px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(115, 23, 2, .16) 2px,
            transparent 2.5px
        )
        0 0 / 11px 11px;

    -webkit-mask-image:
        linear-gradient(
            315deg,
            #000,
            transparent 72%
        );

    mask-image:
        linear-gradient(
            315deg,
            #000,
            transparent 72%
        );
}

/* ======================== HEADER ======================== */

.post-content .tgd-faces__header {
    position: relative;

    margin-bottom: 22px;
    padding: 0 0 17px;

    border-bottom: 1px dashed rgba(115, 23, 2, .36);
}

.post-content .tgd-faces__issue {
    display: inline-block;

    margin-bottom: 8px;
    padding: 5px 9px;

    color: var(--main-white);
    font: 700 8px/1 var(--rus);
    letter-spacing: 1.3px;
    text-transform: uppercase;

    background: var(--main-blue);
    border-radius: var(--radius-small);
    box-shadow: 3px 3px 0 rgba(115, 23, 2, .17);

    transform: skew(-7deg);
}

.post-content .tgd-faces__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.post-content .tgd-faces__title {
    color: var(--main-red);
    font: 700 27px/1 var(--rus);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.post-content .tgd-faces__mark {
    flex-shrink: 0;

    color: rgba(24, 77, 89, .25);
    font: 700 21px/1 var(--rus);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.post-content .tgd-faces__subtitle {
    margin-top: 9px;

    color: var(--text-color2);
    font: 400 10px/1.5 var(--font-base);
}

/* ======================== COLUMNS ======================== */

.post-content .tgd-faces__columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* ======================== SECTIONS ======================== */

.post-content .tgd-faces__section {
    position: relative;
    min-width: 0;
    padding-top: 18px;
}

.post-content .tgd-faces__section-title {
    position: absolute;
    z-index: 5;
    top: 0;
    left: 12px;
    right: 12px;

    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 38px;
    margin: 0;
    padding: 0 13px;

    box-sizing: border-box;

    color: var(--main-white);
    font: 700 13px/1 var(--rus);
    letter-spacing: 1px;
    text-transform: uppercase;

    background: var(--main-red);
    border-radius: var(--radius-small);

    box-shadow:
        4px 4px 0 var(--accent-color2);

    transform: rotate(-.7deg);
}

.post-content .tgd-faces__section--male
.tgd-faces__section-title {
    background: var(--main-blue);
    transform: rotate(.7deg);
}

.post-content .tgd-faces__section-title i {
    color: var(--accent-color2);
    font-size: 11px;
}

.post-content .tgd-faces__section-title > span {
    margin-left: auto;

    color: rgba(251, 239, 224, .62);
    font: 700 8px/1 var(--eng);
    letter-spacing: 1.2px;
}

/* ======================== SCROLL AREA ======================== */

.post-content .tgd-faces__scroll {
    height: 510px;
    padding: 35px 12px 13px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    background: linear-gradient(145deg, rgba(255, 255, 255, .24), transparent 35%), rgb(255 252 248 / 77%);
    border: 1px solid rgba(115, 23, 2, .20);
    border-radius: var(--radius-medium);
    box-shadow:
        inset 0 0 30px rgba(115, 23, 2, .045),
        4px 4px 0 rgba(24, 77, 89, .13);
    scrollbar-width: thin;
    scrollbar-color: var(--main-red) transparent;
}

.post-content .tgd-faces__section--male
.tgd-faces__scroll {
    scrollbar-color: var(--main-blue) transparent;
}

.post-content .tgd-faces__scroll::-webkit-scrollbar {
    width: 5px;
}

.post-content .tgd-faces__scroll::-webkit-scrollbar-track {
    background: transparent;
}

.post-content .tgd-faces__scroll::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            to bottom,
            var(--accent-color2),
            var(--main-red)
        );

    border-radius: 5px;
}

.post-content .tgd-faces__section--male
.tgd-faces__scroll::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            to bottom,
            var(--accent-color2),
            var(--main-blue)
        );
}

/* ======================== LETTER GROUP ======================== */

.post-content .tgd-faces__group {
    margin-bottom: 16px;
}

.post-content .tgd-faces__group:last-child {
    margin-bottom: 0;
}

.post-content .tgd-faces__letter {
    position: sticky;
    z-index: 3;
    top: -1px;

    display: flex;
    align-items: center;
    gap: 8px;

    margin-bottom: 7px;
    padding: 5px 9px;

    color: var(--main-red);
    font: 700 9px/1 var(--rus);
    letter-spacing: 1.2px;
    text-transform: uppercase;

    background:
        linear-gradient(
            to right,
            rgba(251, 239, 224, .98),
            rgba(251, 239, 224, .90)
        );

    border-left: 3px solid var(--main-red);
    border-radius:
        0
        var(--radius-small)
        var(--radius-small)
        0;

    box-shadow: 2px 2px 0 rgba(115, 23, 2, .08);
}

.post-content .tgd-faces__letter::after {
    content: "";

    flex: 1;
    height: 1px;

    background:
        repeating-linear-gradient(
            to right,
            rgba(115, 23, 2, .35) 0 3px,
            transparent 3px 6px
        );
}

.post-content .tgd-faces__section--male
.tgd-faces__letter {
    color: var(--link-color);
    border-left-color: var(--main-blue);
}

.post-content .tgd-faces__section--male
.tgd-faces__letter::after {
    background:
        repeating-linear-gradient(
            to right,
            rgba(24, 77, 89, .35) 0 3px,
            transparent 3px 6px
        );
}

/* ======================== LIST ======================== */

.post-content .tgd-faces__list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.post-content .tgd-faces__list > div {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;

    min-width: 0;
    padding: 8px 10px;

    box-sizing: border-box;

    color: var(--text-color2);
    font: 400 10px/1.45 var(--font-base);

    background: rgba(251, 239, 224, .68);
    border: 1px solid rgba(115, 23, 2, .12);
    border-radius: var(--radius-small);

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease;
}

.post-content .tgd-faces__list > div::before {
    content: "";

    position: absolute;
    top: 50%;
    right: 9px;

    width: 4px;
    height: 4px;

    background: var(--accent-color2);
    transform:
        translateY(-50%)
        rotate(45deg);
}

.post-content .tgd-faces__list > div:hover {
    background: var(--main-white);
    border-color: rgba(115, 23, 2, .30);

    transform: translateX(2px);
}

.post-content .tgd-faces__section--male
.tgd-faces__list > div:hover {
    border-color: rgba(24, 77, 89, .34);
}

.post-content .tgd-faces__list > div > span {
    min-width: 0;
    padding-right: 8px;
}

.post-content .tgd-faces__list a {
    position: relative;

    margin-right: 11px;
    padding-left: 12px;

    color: var(--link-color) !important;
    font-weight: 700;
    white-space: nowrap;
}

.post-content .tgd-faces__list a::before {
    content: "—";

    position: absolute;
    left: 0;

    color: var(--accent-color2);
}

.post-content .tgd-faces__list a:hover {
    color: var(--link-hover-color) !important;
}

/* пустые строки-заглушки */

.post-content .tgd-faces__empty {
    opacity: .48;
    font-style: italic;
}

.post-content .tgd-faces__empty:hover {
    opacity: .72;
}

/* ======================== GUESTBOOK TEMPLATE ======================== */

.post-content .guestbook {
    position: relative;
    isolation: isolate;

    width: 100%;
    max-width: none;
    margin: -1em 0;
    padding: 24px;

    box-sizing: border-box;
    overflow: hidden;

    color: var(--text-color2);
    font: 400 12px/1.65 var(--eng);

    background:
        /* мягкое затемнение по краям */
        linear-gradient(
            115deg,
            rgba(115, 23, 2, .08),
            transparent 24% 72%,
            rgba(24, 77, 89, .10)
        ),

        /* газетные точки */
        radial-gradient(
            circle,
            rgba(115, 23, 2, .10) 1px,
            transparent 1.2px
        )
        0 0 / 7px 7px,

        var(--main-white);

    border: 1px solid rgba(115, 23, 2, .25);
    border-radius: var(--radius-large);

    box-shadow:
        7px 7px 0 var(--main-red),
        12px 12px 0 rgba(24, 77, 89, .32);

    -webkit-mask:
        radial-gradient(
            circle var(--ticket-cut) at left top,
            transparent 97%,
            #000
        ),
        radial-gradient(
            circle var(--ticket-cut) at right top,
            transparent 97%,
            #000
        ),
        radial-gradient(
            circle var(--ticket-cut) at left bottom,
            transparent 97%,
            #000
        ),
        radial-gradient(
            circle var(--ticket-cut) at right bottom,
            transparent 97%,
            #000
        ),
        linear-gradient(#000 0 0);

    -webkit-mask-composite: source-in;
    mask:
        radial-gradient(
            circle var(--ticket-cut) at left top,
            transparent 97%,
            #000
        ),
        radial-gradient(
            circle var(--ticket-cut) at right top,
            transparent 97%,
            #000
        ),
        radial-gradient(
            circle var(--ticket-cut) at left bottom,
            transparent 97%,
            #000
        ),
        radial-gradient(
            circle var(--ticket-cut) at right bottom,
            transparent 97%,
            #000
        ),
        linear-gradient(#000 0 0);
}

/* широкая комиксная полоса */

.post-content .guestbook::before {
    content: "";

    position: absolute;
    z-index: -1;
    top: 82px;
    right: -85px;

    width: 390px;
    height: 75px;

    background: var(--main-blue);
    opacity: .17;
    transform: rotate(-8deg);
}

/* ======================== TAGS ======================== */

.post-content .guestbook-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;

    margin: 0 0 15px;
}

.post-content .guestbook-tags span {
    display: inline-flex;
    align-items: center;
    gap: 6px;

    padding: 5px 10px;

    color: var(--main-white);
    font: 700 9px/1 var(--rus);
    letter-spacing: .7px;
    text-transform: uppercase;

    background: var(--main-blue);
    border-radius: var(--radius-small);
    box-shadow: 3px 3px 0 rgba(115, 23, 2, .22);

    transform: skew(-7deg);
}

.post-content .guestbook-tags span:nth-child(2) {
    background: var(--main-red);
}

.post-content .guestbook-tags span:nth-child(3) {
    color: var(--main-red);
    background: var(--accent-color2);
}

.post-content .guestbook-tags i {
    font-size: 10px;
}

/* ======================== INTRO ======================== */

.post-content .guestbook-intro {
    position: relative;
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
    margin-bottom: 28px;
    padding: 14px;
    color: var(--text-color2);
    background: var(--main-white);
    border: 1px solid rgba(115, 23, 2, .25);
    border-left: 8px solid var(--main-red);
    border-radius: var(--radius-medium);
    box-shadow:
        4px 4px 0 rgba(115, 23, 2, .13),
        inset 0 0 30px rgba(231, 172, 95, .14);
}

.post-content .guestbook-intro-mark {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 110px;
    padding: 10px;

    color: var(--main-white);
    font: 700 24px/.82 var(--rus);
    letter-spacing: -1px;
    text-align: center;

    background:
        radial-gradient(
            circle,
            rgba(251, 239, 224, .27) 1px,
            transparent 1.5px
        )
        0 0 / 6px 6px,
        var(--main-red);

    clip-path: polygon(
        0 0,
        100% 0,
        91% 50%,
        100% 100%,
        0 100%,
        8% 50%
    );

    text-shadow: 2px 2px 0 var(--main-black);
}

.post-content .guestbook-intro-text {
    min-width: 0;
}

.post-content .guestbook-intro h2 {
    margin: 0 0 8px;
    padding-bottom: 7px;

    color: var(--main-red);
    font: 700 19px/1.1 var(--rus);
    letter-spacing: .5px;
    text-transform: uppercase;

    border-bottom: 1px dashed rgba(115, 23, 2, .38);
}

.post-content .guestbook-intro p {
    margin: 0 0 7px;
}

.post-content .guestbook-intro ul {
    margin: 0;
    padding: 0;
}

.post-content .guestbook-intro li {
    position: relative;
    margin: 3px 0;
    padding-left: 17px;
}

.post-content .guestbook-intro li::before {
    content: "\f0da";

    position: absolute;
    left: 2px;
    top: 1px;

    color: var(--main-red);
    font-family: var(--fa);
    font-weight: 900;
}

/* ======================== MAIN GRID ======================== */

.post-content .guestbook-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1.12fr)
        minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

.post-content .guestbook-card {
    position: relative;
    min-width: 0;
    padding-top: 20px;
}

.post-content .guestbook-card h3 {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 12px;
    right: 12px;

    display: flex;
    align-items: center;
    gap: 8px;

    min-height: 37px;
    margin: 0;
    padding: 0 13px;

    box-sizing: border-box;

    color: var(--main-white);
    font: 700 13px/1 var(--rus);
    letter-spacing: 1.5px;
    text-transform: uppercase;

    background: var(--main-red);
    border-radius: var(--radius-small);
    box-shadow: 4px 4px 0 var(--accent-color2);

    transform: rotate(-1deg);
}

.post-content .guestbook-card:nth-child(2) h3 {
    background: var(--main-blue);
    transform: rotate(1deg);
}

.post-content .guestbook-card h3 span {
    color: var(--accent-color2);
    font: 700 20px/1 var(--rus);
}

.post-content .guestbook-card-body {
    height: 250px;
    min-height: 0;
    padding: 34px 15px 16px;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color2) transparent;
    background: linear-gradient(145deg, rgba(255, 255, 255, .28), transparent 35%), rgb(255 255 255 / 92%);
    border: 1px solid rgba(115, 23, 2, .26);
    border-radius: var(--radius-medium);
    box-shadow:
        inset 0 0 28px rgba(115, 23, 2, .05),
        4px 4px 0 rgba(24, 77, 89, .16);
}

/* цветные линии внутри карточек */

.post-content .guestbook-card-body::before {
    content: "";

    position: absolute;
    top: 51px;
    right: 7px;
    bottom: 13px;

    width: 4px;

    background:
        linear-gradient(
            to bottom,
            var(--accent-color2),
            var(--main-red)
        );

    border-radius: 3px;
}

.post-content .guestbook-card:nth-child(2) .guestbook-card-body::before {
    background:
        linear-gradient(
            to bottom,
            var(--accent-color2),
            var(--main-blue)
        );
}

/* ======================== LISTS ======================== */

.post-content .guestbook-list-group + .guestbook-list-group {
    margin-top: 17px;
}

.post-content .guestbook-list-group h4 {
    display: flex;
    align-items: center;
    gap: 7px;

    margin: 0 0 8px;

    color: var(--main-red);
    font: 700 9px/1 var(--rus);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.post-content .guestbook-list-group h4::after {
    content: "";
    flex: 1;
    height: 1px;

    background:
        repeating-linear-gradient(
            to right,
            var(--main-blue) 0 3px,
            transparent 3px 6px
        );
}

.post-content .guestbook-list-group p {
    margin: 5px 0;
    padding: 0;

    font-size: 10px;
    line-height: 1.45;
    text-transform: uppercase;
}

.post-content .guestbook-list-group b {
    color: var(--text-color2);
    font-weight: 700;
}

.post-content .guestbook-list-group a {
    color: var(--link-color) !important;
    font-weight: 700;
}

.post-content .guestbook-list-group a:hover {
    color: var(--link-hover-color) !important;
}

.post-content .guestbook-divider {
    color: var(--accent-color2);
    font-weight: 700;
}

.post-content .guestbook-list-group small {
    display: block;

    color: rgba(46, 46, 45, .62);
    font-size: 8px;
    letter-spacing: .5px;
}

.post-content .guestbook-empty {
    color: rgba(46, 46, 45, .55);
    font-style: italic;
}

/* ======================== ACTION LINKS ======================== */

.post-content .guestbook-action {
    position: relative;
    display: block;
    margin-bottom: 9px;
    padding: 11px 30px 10px 12px;
    color: var(--main-red) !important;
    background: rgb(218 231 231 / 35%);
    border-left: 4px solid var(--main-blue);
    border-radius: var(--radius-small);
    box-shadow: 2px 2px 0 rgba(115, 23, 2, .12);
}

.post-content .guestbook-action::after {
    content: "\f061";

    position: absolute;
    top: 50%;
    right: 11px;

    color: var(--main-blue);
    font-family: var(--fa);
    font-weight: 900;

    transform: translateY(-50%);
    transition: transform .25s ease;
}

.post-content .guestbook-action:hover {
    color: var(--link-color) !important;
    background: var(--profile-body-color);
    transform: translateX(3px);
}

.post-content .guestbook-action:hover::after {
    transform: translate(3px, -50%);
}

.post-content .guestbook-action strong {
    display: block;

    font: 700 10px/1.2 var(--rus);
    letter-spacing: .7px;
    text-transform: uppercase;
}

.post-content .guestbook-action small {
    display: block;
    margin-top: 3px;

    color: var(--text-color2);
    font-size: 9px;
    line-height: 1.35;
}


/* ======================== EPISODE TEMPLATE ======================== */

.ep-container {
    --ep-accent: var(--main-red);
    --ep-secondary: var(--main-blue);
    --ep-paper: var(--main-white);
    --ep-soft: var(--quote-color);
    --ep-text: var(--text-color2);
    --ep-muted: var(--link-color);
    --ep-border: rgba(115, 23, 2, .20);
    position: relative;
    isolation: isolate;
    display: flex;
    width: 850px;
    max-width: 100%;
    min-height: 290px;
    margin: -1em auto 20px;
    box-sizing: border-box;
    overflow: hidden;
    color: var(--ep-text);
    font-family: var(--font-base);
    background:
        linear-gradient(
            135deg,
            rgba(141, 166, 157, .08),
            transparent 35% 68%,
            rgba(115, 23, 2, .055)
        ),

        radial-gradient(
            circle,
            rgba(115, 23, 2, .06) 1px,
            transparent 1.3px
        )
        0 0 / 8px 8px,

        var(--ep-paper);
    border: 1px solid var(--ep-border);
    border-radius: var(--radius-medium);
    box-shadow:
        6px 6px 0 rgba(24, 77, 89, .17),
        10px 10px 0 rgba(115, 23, 2, .07);
}

/* ======================== IMAGE ======================== */

.ep-img {
    position: relative;
    z-index: 1;

    flex: 0 0 175px;
    min-height: 290px;

    overflow: hidden;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* затемнение изображения */

.ep-img::before {
    content: "";

    position: absolute;
    z-index: 1;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            to bottom,
            rgba(24, 77, 89, .06),
            rgba(24, 77, 89, .18)
        );
}

/* плавный переход от изображения к тексту */

.ep-img::after {
    content: "";

    position: absolute;
    z-index: 2;
    top: -15%;
    bottom: -15%;

    width: 115px;

    pointer-events: none;

    filter: blur(25px);
    opacity: .95;
}

.ep-img-left::after {
    right: -54px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(251, 239, 224, .22) 28%,
            rgba(251, 239, 224, .67) 66%,
            var(--ep-paper) 100%
        );
}

.ep-img-right::after {
    left: -54px;

    background:
        linear-gradient(
            270deg,
            transparent 0%,
            rgba(251, 239, 224, .22) 28%,
            rgba(251, 239, 224, .67) 66%,
            var(--ep-paper) 100%
        );
}

/* ======================== CONTENT ======================== */

.ep-content {
    position: relative;
    z-index: 3;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px !important;
    min-width: 0;
    padding: 16px 20px !important;
    box-sizing: border-box;
    color: var(--ep-text) !important;
    text-align: center;
    background: var(--profile-avatar-border);
}

/* слабая диагональная полоса */

.ep-content::before {
    content: "";

    position: absolute;
    z-index: -1;
    top: 47px;
    right: -45px;

    width: 270px;
    height: 38px;

    pointer-events: none;

    background: rgba(141, 166, 157, .10);
    transform: rotate(-6deg);
}

/* ======================== EPISODE TYPE ======================== */

.ep-type {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: fit-content;
    margin: 0 auto;
    padding: 5px 10px;

    box-sizing: border-box;

    color: var(--ep-muted);
    font: 700 8px/1 var(--rus);
    letter-spacing: 1px;
    text-transform: uppercase;

    background: rgba(141, 166, 157, .10);
    border: 1px solid rgba(24, 77, 89, .16);
    border-radius: var(--radius-small);
}

.ep-type::before {
    content: "";

    flex-shrink: 0;

    width: 7px;
    height: 7px;

    background: currentColor;

    transform: rotate(45deg);
}

/* ======================== TITLE ======================== */

.ep-title {
    position: relative;

    display: inline-block;

    max-width: 100%;
    margin: 0 auto !important;
    padding: 2px 34px 4px !important;

    box-sizing: border-box;

    color: var(--ep-accent) !important;
    font: 700 16px/1.25 var(--rus) !important;
    letter-spacing: .7px;
    text-align: center;
    text-transform: uppercase;
}

.ep-title::before,
.ep-title::after {
    content: "";

    position: absolute;
    top: 50%;

    width: 15px;
    height: 15px;

    background: var(--accent-color2);

    transform: translateY(-50%);

    -webkit-mask:
        url("https://forumstatic.ru/files/001c/25/f9/18906.svg")
        center / contain no-repeat;

    mask:
        url("https://forumstatic.ru/files/001c/25/f9/18906.svg")
        center / contain no-repeat;
}

.ep-title::before {
    left: 7px;
}

.ep-title::after {
    right: 7px;
}

/* тонкая линия под названием */

.ep-title + .ep-description {
    position: relative;
}

.ep-title + .ep-description::before {
    content: "";

    position: absolute;
    top: -5px;
    left: 15%;
    right: 15%;

    height: 1px;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(115, 23, 2, .28),
            transparent
        );
}

/* ======================== DESCRIPTION ======================== */

.ep-description {
    width: 100%;
    max-height: 105px;
    margin: 0 auto !important;
    padding: 10px 13px !important;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: auto;
    color: var(--ep-text) !important;
    font-size: 11px !important;
    line-height: 1.62 !important;
    text-align: justify;
    background: rgb(255 255 255 / 58%) !important;
    border: 1px solid rgba(115, 23, 2, .14) !important;
    border-left: 3px solid rgba(24, 77, 89, .46) !important;
    border-radius:
        0
        var(--radius-small)
        var(--radius-small)
        0 !important;
    scrollbar-width: thin;
    scrollbar-color: var(--ep-secondary) transparent;
}

.ep-description::-webkit-scrollbar {
    width: 4px;
}

.ep-description::-webkit-scrollbar-track {
    background: transparent;
}

.ep-description::-webkit-scrollbar-thumb {
    background: var(--ep-secondary);
    border-radius: 4px;
}

/* ======================== INFORMATION ROWS ======================== */

.ep-section {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 7px 14px;

    margin: 0 !important;
    padding: 7px 11px !important;

    box-sizing: border-box;

    color: var(--ep-muted) !important;
    font-size: 10px !important;
    line-height: 1.4;

    background: rgba(141, 166, 157, .09);
    border: 1px solid rgba(24, 77, 89, .13);
    border-radius: var(--radius-small);
}

.ep-section i {
    margin-right: 5px;
    color: var(--ep-accent) !important;
}

/* разделители между информационными пунктами */

.ep-section > span:not(:last-child)::after {
    content: "";

    display: inline-block;

    width: 4px;
    height: 4px;
    margin-left: 14px;

    vertical-align: middle;

    background: var(--accent-color2);
    transform: rotate(45deg);
}

/* ======================== TAGS ======================== */

.ep-tags .ep-tag {
    display: inline-block;

    padding: 4px 8px;

    color: var(--ep-muted);
    font-size: 9px;
    font-weight: 500 !important;
    letter-spacing: .4px;
    text-transform: lowercase;

    background: rgba(24, 77, 89, .07);
    border: 1px solid rgba(24, 77, 89, .15);
    border-radius: var(--radius-small);
}

.ep-tags .ep-tag::before {
    content: "#";
    margin-right: 2px;
    color: var(--ep-accent);
    font-weight: 700;
}

/* ======================== LINKS ======================== */

.ep-container a {
    color: var(--link-color) !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.ep-container a:hover {
    color: var(--link-hover-color) !important;
}

/* ======================================================
   ACTIVE / НАСТОЯЩЕЕ
====================================================== */

.ep-active {
    --ep-accent: var(--main-red);
    --ep-secondary: var(--main-blue);
    --ep-border: rgb(3 67 76 / 52%);
}

.ep-active .ep-type {
    color: var(--main-red);

    background: rgba(115, 23, 2, .07);
    border-color: rgba(115, 23, 2, .17);
}

.ep-active .ep-type::before {
    border-radius: 50%;
    transform: none;

    box-shadow:
        0 0 0 3px rgba(115, 23, 2, .08);
}

.ep-active .ep-description {
    border-left-color: rgba(115, 23, 2, .52) !important;
}

/* ======================================================
   FLASHBACK / ПРОШЛОЕ
====================================================== */

.ep-flashback {
    --ep-accent: var(--link-color);
    --ep-secondary: var(--main-blue);
    --ep-border: rgba(24, 77, 89, .21);

    filter: saturate(.88);
}

.ep-flashback .ep-type {
    color: var(--link-color);

    background: rgba(24, 77, 89, .07);
    border-color: rgba(24, 77, 89, .14);
}

.ep-flashback .ep-type::before {
    border-radius: 1px;
    transform: rotate(45deg);
    opacity: .75;
}

/* ======================================================
   AU / АЛЬТЕРНАТИВА
====================================================== */

.ep-au {
    --ep-accent: var(--button-color);
    --ep-secondary: var(--main-red);
    --ep-border: rgba(217, 121, 65, .28);
    /* box-shadow:
        6px 6px 0 rgba(217, 121, 65, .17),
        10px 10px 0 rgba(115, 23, 2, .07); */
}

.ep-au .ep-type {
    color: var(--button-color);

    background: rgba(217, 121, 65, .08);
    border-color: rgba(217, 121, 65, .19);
}

.ep-au .ep-type::before {
    width: 9px;
    height: 9px;

    background: currentColor;
    transform: none;

    -webkit-mask:
        url("https://forumstatic.ru/files/001c/25/f9/18906.svg")
        center / contain no-repeat;

    mask:
        url("https://forumstatic.ru/files/001c/25/f9/18906.svg")
        center / contain no-repeat;
}

.ep-au .ep-description {
    border-left-color: rgba(217, 121, 65, .55) !important;
}

.ep-au .ep-description,
.ep-au .ep-section {
    border-color: rgba(217, 121, 65, .19) !important;
}

/* =========================================================
   TGD EPISODE GENERATOR
========================================================= */

.tgd-episode-generator,
.tgd-episode-generator * {
    box-sizing: border-box;
}

.tgd-episode-generator {
    position: relative;
    isolation: isolate;
    margin: -1em auto;
    width: 100%;
    padding: 25px;
    overflow: hidden;
    color: var(--text-color2);
    font-family: var(--font-base);
    background: var(--forum-body);
    border: 1px solid rgba(115, 23, 2, .22);
    border-radius: var(
    --radius-large);
    box-shadow: 7px 7px 0 var(
    --main-red),
        12px 12px 0 rgba(24, 77, 89, .25);
}

.tgd-episode-generator::before {
    content: "";

    position: absolute;
    z-index: -1;
    top: 105px;
    right: -90px;

    width: 430px;
    height: 80px;

    pointer-events: none;

    background: rgba(141, 166, 157, .13);
    transform: rotate(-7deg);
}

.tgd-episode-generator::after {
    content: "";

    position: absolute;
    z-index: -1;
    right: -20px;
    bottom: -25px;

    width: 240px;
    height: 180px;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(115, 23, 2, .15) 2px,
            transparent 2.5px
        )
        0 0 / 11px 11px;

    -webkit-mask-image:
        linear-gradient(
            315deg,
            #000,
            transparent 72%
        );

    mask-image:
        linear-gradient(
            315deg,
            #000,
            transparent 72%
        );
}

/* =========================================================
   HEADER
========================================================= */

.tgd-episode-generator__header {
    margin-bottom: 23px;
    padding-bottom: 17px;

    border-bottom: 1px dashed rgba(115, 23, 2, .33);
}

.tgd-episode-generator__issue {
    display: inline-block;

    margin-bottom: 9px;
    padding: 5px 9px;

    color: var(--main-white);
    font: 700 8px/1 var(--rus);
    letter-spacing: 1.2px;
    text-transform: uppercase;

    background: var(--main-blue);
    border-radius: var(--radius-small);

    box-shadow:
        3px 3px 0 rgba(115, 23, 2, .17);

    transform: skew(-7deg);
}

.tgd-episode-generator__heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
}

.tgd-episode-generator__heading h2 {
    margin: 0;

    color: var(--main-red);
    font: 700 27px/1 var(--rus);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.tgd-episode-generator__heading span {
    flex-shrink: 0;

    color: rgba(24, 77, 89, .25);
    font: 700 20px/1 var(--rus);
    letter-spacing: 1px;
}

.tgd-episode-generator__header p {
    margin: 9px 0 0;
    padding: 0;

    color: var(--text-color2);
    font-size: 10px;
    line-height: 1.5;
}

/* =========================================================
   SECTIONS
========================================================= */

.tgd-episode-generator__section {
    display: grid;
    grid-template-columns: 155px minmax(0, 1fr);
    gap: 20px;

    padding: 20px 0;

    border-bottom: 1px solid rgba(115, 23, 2, .13);
}

.tgd-episode-generator__section-title {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

.tgd-episode-generator__section-title > span {
    flex-shrink: 0;

    color: rgba(24, 77, 89, .34);
    font: 700 23px/.9 var(--rus);
}

.tgd-episode-generator__section-title h3 {
    margin: 0 0 5px;

    color: var(--main-red);
    font: 700 13px/1 var(--rus);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.tgd-episode-generator__section-title small {
    display: block;

    color: var(--link-color);
    font-size: 7px;
    line-height: 1.4;
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* =========================================================
   GRID
========================================================= */

.tgd-episode-generator__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    min-width: 0;
}

.tgd-episode-generator__wide {
    min-width: 0;
}

.tgd-episode-generator__field {
    min-width: 0;
}

/* =========================================================
   LABELS
========================================================= */

.tgd-episode-generator__field label,
.tgd-episode-generator__result > label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 6px;

    color: var(--main-red);
    font: 700 8px/1.3 var(--rus);
    letter-spacing: .6px;
    text-transform: uppercase;
}

/* =========================================================
   INPUTS
========================================================= */

.tgd-episode-generator input,
.tgd-episode-generator textarea,
.tgd-episode-generator select {
    display: block;
    width: 100%;
    margin: 0;
    padding: 9px 11px;
    color: var(--text-color2);
    font: 400 10px/1.55 var(--font-base);
    background: var(--main-white);
    border: 1px solid rgba(115, 23, 2, .16);
    border-left: 3px solid rgba(24, 77, 89, .48);
    border-radius:
        0
        var(
    --radius-small)
        var(--radius-small)
        0;
    outline: none;
    transition:
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.tgd-episode-generator input:focus,
.tgd-episode-generator textarea:focus,
.tgd-episode-generator select:focus {
    background: var(--main-white);

    border-color: rgba(115, 23, 2, .32);
    border-left-color: var(--accent-color2);

    box-shadow:
        3px 3px 0 rgba(24, 77, 89, .11);
}

.tgd-episode-generator input::placeholder,
.tgd-episode-generator textarea::placeholder {
    color: rgba(46, 46, 45, .47);
    opacity: 1;
}

.tgd-episode-generator textarea {
    min-height: 130px;
    resize: vertical;
}

.tgd-episode-generator select {
    min-height: 36px;
    cursor: pointer;
}

.tgd-episode-generator select option {
    color: var(--text-color2);
    background: var(--main-white);
}

/* пояснение выбранного типа */

.tgd-episode-generator__type-note {
    grid-column: 1 / -1;

    padding: 8px 10px;

    color: var(--text-color2);
    font-size: 9px;
    line-height: 1.45;

    background:
        linear-gradient(
            100deg,
            rgba(141, 166, 157, .12),
            transparent
        );

    border-left: 3px solid var(--accent-color2);
}

/* подсказки */

.tgd-episode-generator__hint {
    margin-top: 6px;

    color: rgba(46, 46, 45, .62);
    font-size: 8px;
    line-height: 1.45;
}

/* =========================================================
   BUTTONS
========================================================= */

.tgd-episode-generator__buttons {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;

    padding: 20px 0 5px;
}

.tgd-episode-generator__buttons button {
    min-height: 32px;
    margin: 0;
    padding: 8px 13px;

    cursor: pointer;

    color: var(--main-white);
    font: 700 8px/1 var(--rus);
    letter-spacing: .7px;
    text-transform: uppercase;

    background: var(--main-red);
    border: 1px solid var(--main-red);
    border-radius: var(--radius-small);

    box-shadow:
        3px 3px 0 var(--accent-color2);

    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.tgd-episode-generator__buttons button:hover {
    color: var(--main-red);

    background: var(--accent-color2);
    border-color: var(--accent-color2);

    transform: translateY(-1px);
}

.tgd-episode-generator__buttons
button.tgd-episode-generator__button--secondary {
    color: var(--link-color);

    background: var(--main-white);
    border-color: rgba(24, 77, 89, .20);

    box-shadow:
        3px 3px 0 rgba(24, 77, 89, .18);
}

.tgd-episode-generator__buttons
button.tgd-episode-generator__button--secondary:hover {
    color: var(--main-white);

    background: var(--main-blue);
    border-color: var(--main-blue);
}

/* =========================================================
   RESULT
========================================================= */

.tgd-episode-generator__result {
    margin-top: 17px;
    padding-top: 17px;

    border-top: 1px dashed rgba(115, 23, 2, .30);
}

#eg-result {
    display: block;
    width: 100%;
    min-height: 150px;
    max-height: 360px;
    margin: 0;
    padding: 14px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--accent-color);
    font: 400 10px/1.5 monospace;
    background: var(
    --closed-theme);
    border: 1px solid var(
    --accent-color2);
    border-radius: var(
    --radius-medium);
    scrollbar-width: thin;
    scrollbar-color: var(
    --accent-color2) transparent;
}

.eg-copy-note {
    min-height: 15px;
    margin-top: 7px;

    color: var(--link-color);
    font-size: 9px;
    line-height: 1.4;
    text-align: right;
}

.eg-copy-note.is-bad {
    color: var(--main-red);
}

/* THE GLORY DAYS — NEWS. Добавить один раз в CSS форума. */
.tgd-news,
.tgd-news * {
    box-sizing: border-box;
}
.tgd-news {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: -1em auto;
    padding: clamp(16px, 3%, 30px);
    color: var(--text-color, #421b0e);
    font: 400 13px/1.75 var(--font-base, Arial, sans-serif);
    overflow-wrap: anywhere;
    background:
        radial-gradient(circle, rgba(127,31,0,.055) .7px, transparent 1px) 0 0 / 6px 6px,
        var(--main-white, #fbf7f1);
    border: 1px solid var(--accent-color2, #bb9967);
    border-radius: var(--radius-medium, 8px);
    box-shadow: inset 0 0 0 5px rgba(187,153,103,.12);
}
.tgd-news a {
    font: 600 14px / 1.55 var(--rus);
    color: var(--link-color);
}
.tgd-news a:hover {
    color: var(--link-hover-color, #4b8b83);
    text-decoration: underline;
}
.tgd-news a:focus-visible {
    outline: 2px solid var(--main-red, #5d0101);
    outline-offset: 3px;
}
.tgd-news .tgd-news__brand {
    display: block;
    padding-bottom: 12px;
    color: var(--main-red, #5d0101);
    font: 900 clamp(25px, 4vw, 42px)/1.1 Georgia, serif;
    letter-spacing: -1px;
    text-align: center;
    text-transform: uppercase;
    border-bottom: 4px double var(--accent-color2, #bb9967);
}
.tgd-news__meta {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 10px 0;
    color: var(--link-color, #647879);
    font: 700 17px/1.3 var(--rus);
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom: 1px solid var(--accent-color2, #bb9967);
}
.tgd-news__author {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
}
.tgd-news .tgd-news__avatar {
    display: block;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    max-width: 100%;
    margin: 0;
    padding: 2px;
    object-fit: cover;
    background: var(--main-white, #fbf7f1);
    border: 1px solid var(--accent-color2, #bb9967);
    border-radius: var(--radius-small, 4px);
}
.tgd-news__author small {
    display: block;
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.tgd-news__author strong {
    display: block;
    font-size: 13px;
}
.tgd-news .tgd-news__title {
    margin: 0 0 16px;
    padding: 0;
    color: var(--main-red, #5d0101);
    font: 700 clamp(22px, 3vw, 30px)/1.2 Georgia, serif;
    background: none;
    border: 0;
}
.tgd-news__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
}
.tgd-news .tgd-news__tag {
    display: inline-block;
    padding: 3px 8px;
    color: var(--text-color, #421b0e);
    font: 600 12px / 1.55 var(--rus);
    background: rgba(187,153,103,.17);
    border: 1px solid rgba(187,153,103,.4);
    border-radius: 3px;
    text-transform: lowercase;
}
.tgd-news .tgd-news__tag--important {
    color: var(--main-white, #fbf7f1);
    background: var(--main-red, #5d0101);
    border-color: var(--main-red, #5d0101);
}
.tgd-news__section {
    min-width: 0;
    margin-top: 24px;
}
.tgd-news .tgd-news__heading {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 0 0 14px;
    padding: 0 0 8px;
    color: var(--main-red, #5d0101);
    font: 700 17px/1.3 var(--rus);
    background: none;
    border: 0;
    border-bottom: 2px solid var(--accent-color2, #bb9967);
}
.tgd-news__heading span {
    color: var(--link-color, #647879);
    font: 700 17px/1.3 var(--rus);
}
.tgd-news .tgd-news__text p {
    margin: 0 0 12px;
    padding: 0;
    color: var(--text-color, #421b0e);
    font: 400 13px/1.55 var(--eng, Arial, sans-serif);
    text-align: justify;
}
.tgd-news .tgd-news__text p:last-child {
    margin-bottom: 0;
}
.tgd-news .tgd-news__note {
    margin: 16px 0 0;
    padding: 12px 15px;
    font-size: 12px;
    background: rgba(87,159,159,.09);
    border-left: 3px solid var(--main-blue, #579f9f);
    font: 400 14px / 1.55 var(--eng);
    color: var(--link-color);
}
.tgd-news__awards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
    gap: 22px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 4px double var(--accent-color2, #bb9967);
}
.tgd-news__awards > section {
    min-width: 0;
}
.tgd-news .tgd-news__people {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tgd-news .tgd-news__people li {
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.tgd-news .tgd-news__person {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    padding: 8px;
    background: rgba(187,153,103,.09);
    border: 1px solid rgba(187,153,103,.23);
    border-radius: var(--radius-small, 4px);
}
.tgd-news__person > span {
    min-width: 0;
}
.tgd-news__person strong,
.tgd-news__person small {
    display: block;
}
.tgd-news__person strong {
    font-size: 12px;
}
.tgd-news__person small {
    color: var(--text-color, #421b0e);
    font-size: 10px;
}
.tgd-news__footer {
    margin-top: 20px;
    color: var(--link-color, #647879);
    font: 400 12px / 1.55 var(--rus);
    letter-spacing: 1px;
    text-align: center;
    text-transform: uppercase;
}

/* ======================== TGD: COMIC FAQ ======================== */

.tgd-faq,
.tgd-faq * {
    box-sizing: border-box;
}

.tgd-faq {
    --faq-ink: var(--main-black, #3e150e);
    --faq-paper: var(--main-white, #fbf7f1);
    --faq-red: var(--main-red, #5d0101);
    --faq-blue: var(--main-blue, #579f9f);

    width: 100%;
    min-width: 0;
    margin: -1em auto;
    padding: 0 8px 12px;
    color: var(--text-color, #421b0e);
    font: 400 12px/1.55 var(--font-base, Arial, sans-serif);
    overflow-wrap: anywhere;
}

.tgd-faq__image {
    margin: 0 0 30px;
    text-align: center;
}

.tgd-faq .tgd-faq__image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;
    border: 0;
    box-shadow: none;
}

/* Обложка FAQ */

.tgd-faq .tgd-faq__image {
    position: relative;
    isolation: isolate;
    display: table;
    width: fit-content;
    max-width: calc(100% - 24px);
    margin: 18px auto 38px;
    padding: 12px;

    background:
        radial-gradient(
            circle,
            rgba(62, 21, 14, .23) 1px,
            transparent 1.4px
        ) 0 0 / 6px 6px,
        var(--main-white, #fbf7f1);

    border: 2px solid var(--main-black, #3e150e);
    border-radius: 3px;

    box-shadow:
        5px 5px 0 var(--main-black, #3e150e),
        10px 10px 0 var(--main-blue, #579f9f);
}

/* Бумажный скотч */

.tgd-faq .tgd-faq__image::before,
.tgd-faq .tgd-faq__image::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 58px;
    height: 20px;
    pointer-events: none;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 4px,
            rgba(127, 31, 0, .09) 4px 5px
        ),
        rgba(216, 185, 135, .78);

    clip-path: polygon(
        0 8%, 8% 0, 16% 8%, 24% 0,
        32% 8%, 40% 0, 48% 8%, 56% 0,
        64% 8%, 72% 0, 80% 8%, 88% 0,
        100% 8%, 100% 92%, 92% 100%,
        84% 92%, 76% 100%, 68% 92%,
        60% 100%, 52% 92%, 44% 100%,
        36% 92%, 28% 100%, 20% 92%,
        12% 100%, 0 92%
    );
}

.tgd-faq .tgd-faq__image::before {
    top: -5px;
    left: -12px;
    transform: rotate(-32deg);
}

.tgd-faq .tgd-faq__image::after {
    right: -12 wettpx;
    bottom: -5px;
    transform: rotate(-32deg);
}

/* Картинка целиком, без обрезки */

.tgd-faq .tgd-faq__image img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    padding: 0;

    background: var(--main-white, #fbf7f1);
    border: 1px solid var(--main-black, #3e150e);
    border-radius: 0;
    box-shadow: none;
}


.tgd-faq__list {
    display: grid;
    gap: 26px;
    width: 88%;
    min-width: 0;
    margin: 0 auto;
}

/* Каждый вопрос — отдельная комиксная панель. */

.tgd-faq__item {
    position: relative;
    isolation: isolate;
    min-width: 0;
    padding: 20px;
    background: var(--faq-paper);
    border: 2px solid var(--faq-ink);
    border-radius: 3px 12px 3px 3px;
    box-shadow:
        5px 5px 0 var(--faq-ink),
        9px 9px 0 rgba(87,159,159,.22);
}

/* Типографская точка только на краю, не под текстом. */

.tgd-faq__item::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 115px;
    height: 75px;
    border-top-right-radius: 10px;
    pointer-events: none;
    background:
        radial-gradient(circle, rgba(62,21,14,.22) 1px, transparent 1.3px)
        0 0 / 5px 5px;
    -webkit-mask-image: linear-gradient(225deg, #000, transparent 75%);
    mask-image: linear-gradient(225deg, #000, transparent 75%);
}

.tgd-faq__item:nth-child(even) {
    box-shadow:
        5px 5px 0 var(--faq-ink),
        9px 9px 0 rgba(187,153,103,.28);
}

.tgd-faq .tgd-faq__question,
.tgd-faq .tgd-faq__answer {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    align-items: start;
    gap: 13px;
    margin: 0;
    padding: 0;
    text-align: left;
    background: none;
    border: 0;
}

.tgd-faq .tgd-faq__question {
    margin-bottom: 19px;
    color: var(--faq-red);
    font: 800 14px/1.5 var(--eng);
}

.tgd-faq__question > span {
    padding: 1px 0 10px;
    border-bottom: 2px solid var(--faq-ink);
}

.tgd-faq .tgd-faq__answer {
    color: var(--text-color, #421b0e);
    font: 400 13px/1.55 var(--eng, Arial, sans-serif);
    text-align: justify;
}

.tgd-faq__question > span,
.tgd-faq__answer > span {
    min-width: 0;
}

/* Плашки с хвостиками реплик. */

.tgd-faq .tgd-faq__label {
    position: relative;
    display: block;
    width: 38px;
    padding: 5px 0;
    font: 900 19px/1.2 Georgia, serif;
    text-align: center;
    border: 2px solid var(--faq-ink);
    border-radius: 3px;
    box-shadow: 2px 2px 0 var(--faq-ink);
}

.tgd-faq .tgd-faq__label::after {
    content: "";
    position: absolute;
    bottom: -6px;
    right: 5px;
    width: 8px;
    height: 8px;
    background: inherit;
    border-right: 2px solid var(--faq-ink);
    border-bottom: 2px solid var(--faq-ink);
    transform: skewY(25deg);
}

.tgd-faq__question .tgd-faq__label {
    color: var(--faq-paper);
    background: var(--faq-red);
    transform: rotate(-6deg);
}

.tgd-faq__answer .tgd-faq__label {
    color: var(--faq-ink);
    background: var(--faq-blue);
    transform: rotate(5deg);
}

/* Финальная подпись как маленькая редакционная вставка. */

.tgd-faq .tgd-faq__footer {
    width: fit-content;
    max-width: 88%;
    margin: 32px auto 0;
    padding: 9px 16px;
    color: var(--faq-ink);
    font: italic 700 12px/1.6 var(--font-base, Arial, sans-serif);
    text-align: center;
    background:
        linear-gradient(rgba(187,153,103,.18), rgba(187,153,103,.18)),
        var(--faq-paper);
    border: 2px solid var(--faq-ink);
    box-shadow: 3px 3px 0 var(--faq-ink);
}

/* Даём длинному вопросу увеличивать высоту блока */

.tgd-faq .tgd-faq__item > h3.tgd-faq__question {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 0 19px !important;
    overflow: visible;
    white-space: normal;
}

.tgd-faq .tgd-faq__question > span {
    height: auto !important;
    max-height: none !important;
    white-space: normal;
}

.tgd-faq .tgd-faq__item > .tgd-faq__answer {
    margin: 0 !important;
    clear: both;
}

/* ======================== TGD: СЮЖЕТ ======================== */
.tgd-plot,
.tgd-plot * {
    box-sizing: border-box;
}

.tgd-plot {
    --plot-paper: var(--main-white, #fbf7f1);
    --plot-ink: var(--main-black, #3e150e);
    --plot-red: var(--main-red, #5d0101);
    --plot-blue: var(--main-blue, #579f9f);
    --plot-photo-width: 220px;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: -1em auto;
    padding: 0 10px 12px;
    color: var(--text-color, #421b0e);
    font: 100 12px/1.55 var(--font-base, Arial, sans-serif);
    overflow-wrap: anywhere;
}

/* Одна полоса для чтения, разделённая на крупные панели. */
.tgd-plot__panel {
    display: flow-root;
    position: relative;
    isolation: isolate;
    min-width: 0;
    margin: 0 0 25px;
    padding: clamp(18px, 4%, 32px);
    background: var(--plot-paper);
    border: 2px solid var(--plot-ink);
    border-radius: 3px;
    box-shadow:
        5px 5px 0 var(--plot-ink),
        9px 9px 0 rgba(87,159,159,.2);
}

/* Точки ограничены углом: под длинным текстом фон чистый. */
.tgd-plot__panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 150px;
    height: 100px;
    pointer-events: none;
    background:
        radial-gradient(circle, rgba(62,21,14,.2) 1px, transparent 1.4px)
        0 0 / 6px 6px;
    -webkit-mask-image: linear-gradient(225deg, #000, transparent 75%);
    mask-image: linear-gradient(225deg, #000, transparent 75%);
}

.tgd-plot__panel:nth-child(even) {
    box-shadow:
        5px 5px 0 var(--plot-ink),
        9px 9px 0 rgba(187,153,103,.25);
}

/* Важно: абзацы остаются обычными блоками для обтекания. */
.tgd-plot .tgd-plot__panel > p {
    display: block;
    clear: none;
    float: none;
    width: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0 0 16px;
    padding: 0;
    overflow: visible;
    color: inherit;
    font: 400 12px/1.55 var(--eng, Arial, sans-serif);
    text-align: justify;
    white-space: normal;
    background: none;
    border: 0;
}

.tgd-plot .tgd-plot__panel > p:last-child {
    margin-bottom: 0;
}

/* Начало истории и послание Вейла. */
.tgd-plot .tgd-plot__panel > .tgd-plot__lead {
    font-weight: 600;
}

.tgd-plot__message {
    color: var(--plot-red);
    font-weight: 800;
}

/* Фраза-перелом из исходного текста. */
.tgd-plot .tgd-plot__panel > .tgd-plot__turn {
    margin-bottom: 22px;
    padding: 12px 16px;
    color: var(--plot-paper);
    font: 400 14px/1.5 var(--eng);
    background: var(--plot-red);
    border: 2px solid var(--plot-ink);
    box-shadow: 4px 4px 0 var(--plot-ink);
}

.tgd-plot .tgd-plot__panel > .tgd-plot__heading {
    display: flow-root;
    float: none;
    clear: none;

    width: auto;
    height: auto;
    min-height: 0;
    max-height: none;
    margin: 0 5px 22px 0;
    padding: 12px 16px;

    color: var(--plot-paper, #fbf7f1);
    font: 400 14px/1.5 var(--eng, Arial, sans-serif);
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;

    background: var(--plot-red, #5d0101);
    border: 2px solid var(--plot-ink, #3e150e);
    box-shadow: 4px 4px 0 var(--plot-ink, #3e150e);
}

/* Картинки: обычный float, без скриптов и специальных BB-тегов. */
.tgd-plot .tgd-plot__photo {
    position: relative;
    display: block;
    width: var(--plot-photo-width);
    max-width: 42%;
    height: auto;
    padding: 6px;
    background: var(--plot-paper);
    border: 2px solid var(--plot-ink);
    border-radius: 2px;
    box-shadow: 4px 4px 0 var(--plot-ink);
    shape-margin: 5px;
}

.tgd-plot .tgd-plot__photo--left {
    float: left;
    margin: 0px 20px 15px 0;
}

.tgd-plot .tgd-plot__photo--right {
    float: right;
    margin: 0px 0 15px 20px;
}

.tgd-plot .tgd-plot__photo img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Итоговая реплика в отдельной комиксной панели. */
.tgd-plot .tgd-plot__final {
    position: relative;
    margin: 30px 0 0;
    padding: 22px 18px;
    color: var(--plot-paper);
    font: 700 14px/1.6 var(--eng);
    text-align: center;
    background:
        radial-gradient(circle, rgba(255,255,255,.1) 1px, transparent 1.4px)
        0 0 / 6px 6px,
        var(--plot-red);
    border: 2px solid var(--plot-ink);
    border-radius: 3px;
    box-shadow:
        5px 5px 0 var(--plot-ink),
        9px 9px 0 var(--plot-blue);
}

.tgd-plot__final strong {
    display: block;
    margin-top: 6px;
    color: var(--plot-paper);
    font: 900 clamp(24px, 4vw, 40px)/1.2 Georgia, serif;
    letter-spacing: 1px;
    text-shadow: 2px 2px 0 var(--plot-ink);
}

/* =========================================================
   THE GLORY DAYS — ОРГАНИЗАЦИИ
   Общий CSS для всех постов. Добавить один раз в стили форума.
   ========================================================= */

.tgd-org-list,
.tgd-org-list * {
    box-sizing: border-box;
}

.tgd-org-list {
    --org-paper: var(--main-white, #fbf7f1);
    --org-ink: var(--main-black, #3e150e);
    --org-red: var(--main-red, #5d0101);
    --org-blue: var(--main-blue, #579f9f);
    --org-gold: var(--accent-color2, #bb9967);
    display: grid;
    gap: 34px;
    width: 100%;
    min-width: 0;
    margin: -1em auto;
    padding: 8px 10px 14px 0;
    color: var(--text-color2, var(--text-color, #421b0e));
    font: 400 13px/1.8 var(--font-base, Arial, sans-serif);
    overflow-wrap: anywhere;
}

/* Карточка организации */

.tgd-org-list .tgd-org {
    position: relative;
    isolation: isolate;
    display: block;
    min-width: 0;
    margin: 0;
    padding: clamp(16px, 3%, 28px);

    background: var(--org-paper);
    border: 2px solid var(--org-ink);
    border-radius: 3px;
    box-shadow:
        5px 5px 0 var(--org-ink),
        9px 9px 0 var(--org-blue);
}

.tgd-org::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 170px;
    height: 140px;
    pointer-events: none;

    background:
        radial-gradient(circle, rgba(62,21,14,.22) 1px, transparent 1.4px)
        0 0 / 6px 6px;

    -webkit-mask-image: linear-gradient(225deg, #000, transparent 75%);
    mask-image: linear-gradient(225deg, #000, transparent 75%);
}

/* Изображение целиком: без фиксированной высоты и обрезки */

.tgd-org-list .tgd-org__header {
    display: block;
    margin: 0 0 22px;
    padding: 0;
    background: none;
    border: 0;
}

.tgd-org-list .tgd-org__visual {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 22px;
    padding: 6px;

    background:
        radial-gradient(circle, rgba(62,21,14,.2) 1px, transparent 1.4px)
        0 0 / 5px 5px,
        var(--org-paper);

    border: 2px solid var(--org-ink);
    box-shadow: 4px 4px 0 var(--org-gold);
}

.tgd-org-list .tgd-org__visual img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

/* Сбрасываем ограничения заголовков форумного оформления */

.tgd-org-list h2.tgd-org__title,
.tgd-org-list h3.tgd-org__heading {
    position: relative;
    display: block;
    float: none;
    clear: none;
    width: auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible;
    white-space: normal;
    text-indent: 0;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
}

.tgd-org-list h2.tgd-org__title {
    margin: 0 !important;
    padding: 13px 18px !important;

    color: var(--org-paper);
    font: 700 clamp(21px, 3vw, 30px)/1.25 var(--eng, Georgia, serif);

    background: var(--org-red);
    border: 2px solid var(--org-ink);
    border-radius: 2px;
    box-shadow: 4px 4px 0 var(--org-ink);
}

/* Характеристики: число строк произвольное */

.tgd-org-list .tgd-org__meta {
    display: block;
    margin: 0 0 26px;
    padding: 0 14px;
    background: rgba(87,159,159,.09);
    border: 1px solid var(--org-gold);
    border-left: 4px solid var(--org-blue);
}

.tgd-org__row {
    display: grid;
    grid-template-columns: minmax(110px, 24%) minmax(0, 1fr);
    gap: 10px 18px;
    min-width: 0;
    padding: 11px 0;
}

.tgd-org__row + .tgd-org__row {
    border-top: 1px dashed rgba(62,21,14,.2);
}

.tgd-org-list .tgd-org__row > dt,
.tgd-org-list .tgd-org__row > dd {
    float: none;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font: inherit;
    text-align: left;
}

.tgd-org-list .tgd-org__row > dt {
    color: var(--org-red);
    font-weight: 700;
}

/* Разделы: плашка с маленькой комиксной тенью */

.tgd-org-list .tgd-org__section {
    display: block;
    min-width: 0;
    margin: 25px 0 0;
    padding: 0;
}

.tgd-org-list h3.tgd-org__heading {
    width: fit-content;
    max-width: calc(100% - 4px);
    margin: 0 0 17px !important;
    padding: 7px 12px !important;

    color: var(--org-ink);
    font: 700 14px/1.5 var(--eng, Arial, sans-serif);

    background:
        linear-gradient(rgba(187,153,103,.24), rgba(187,153,103,.24)),
        var(--org-paper);

    border: 2px solid var(--org-ink);
    border-radius: 2px;
    box-shadow: 3px 3px 0 var(--org-blue);
}

/* Основной текст */

.tgd-org-list .tgd-org__text {
    min-width: 0;
}

.tgd-org-list .tgd-org__text > p {
    display: block;
    float: none;
    clear: none;
    width: auto;
    height: auto;
    margin: 0 0 13px;
    padding: 0;
    color: inherit;
    font: 100 12px/1.65 var(--eng);
    text-align: left;
    text-indent: 0;
    background: none;
    border: 0;
}

.tgd-org-list .tgd-org__text > p:last-child {
    margin-bottom: 0;
}

.tgd-org__text strong {
    color: var(--org-red);
    font-weight: 700;
}

/* TGD — МИРОУСТРОЙСТВО. Общий CSS: добавить один раз. */
:root {
    --tgd-lore-top: 12px; /* Увеличить, если сверху есть фиксированная панель форума. */
    --tgd-lore-offset: 90px;
}

.tgd-lore, .tgd-lore-index, .tgd-lore-dock {
    --lore-paper: var(--main-white, #fbf7f1);
    --lore-ink: var(--main-black, #3e150e);
    --lore-red: var(--main-red, #5d0101);
    --lore-blue: var(--main-blue, #579f9f);
    --lore-gold: var(--accent-color2, #bb9967);
    box-sizing: border-box;
    color: var(--text-color2, var(--text-color, #421b0e));
    font: 400 13px/1.8 var(--font-base, Arial, sans-serif);
    overflow-wrap: anywhere;
}
.tgd-lore *, .tgd-lore-index *, .tgd-lore-dock * {
    box-sizing: border-box;
}

/* Статья без картинок. */
.tgd-lore {
    position: relative;
    isolation: isolate;
    width: calc(100% - 10px);
    min-width: 0;
    margin: 8px 10px 24px 0;
    padding: clamp(16px, 3%, 30px);
    background: var(--lore-paper);
    border: 2px solid var(--lore-ink);
    border-radius: 3px;
    box-shadow: 5px 5px 0 var(--lore-ink), 9px 9px 0 var(--lore-blue);
}
.tgd-lore::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 160px;
    height: 120px;
    pointer-events: none;
    background: radial-gradient(circle, rgba(62,21,14,.2) 1px, transparent 1.4px) 0 0 / 6px 6px;
    -webkit-mask-image: linear-gradient(225deg, #000, transparent 75%);
    mask-image: linear-gradient(225deg, #000, transparent 75%);
}
.tgd-lore h2.tgd-lore__title,
.tgd-lore h3.tgd-lore__heading,
.tgd-lore-index__nav > h2 {
    display: block;
    float: none;
    clear: none;
    width: auto;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible;
    white-space: normal;
    text-indent: 0;
    text-align: left;
    text-transform: none;
}
.post-content .tgd-lore h2.tgd-lore__title {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
    margin: 0 0 25px !important;
    padding: 14px 18px !important;
    color: var(--lore-paper);
    font: 700 clamp(20px, 3vw, 21px)/1.35 var(--eng, Georgia, serif);
    background: var(--lore-red);
    border: 2px solid var(--lore-ink);
    border-radius: 2px;
    box-shadow: 4px 4px 0 var(--lore-ink);
}
.tgd-lore h3.tgd-lore__heading {
    width: fit-content;
    max-width: calc(100% - 4px);
    margin: 28px 0 18px !important;
    padding: 8px 13px !important;
    color: var(--lore-ink);
    font: 700 15px/1.5 var(--eng, Arial, sans-serif);
    background: var(--lore-paper);
    border: 2px solid var(--lore-ink);
    border-left: 6px solid var(--lore-blue);
    box-shadow: 3px 3px 0 var(--lore-gold);
}
.tgd-lore .tgd-lore__text p {
    display: block;
    width: auto;
    height: auto;
    margin: 0 0 15px;
    padding: 0;
    color: inherit;
    font: 400 12px / 1.55 var(--eng);
    text-align: left;
    text-indent: 0;
    background: none;
    border: 0;
}
.tgd-lore__text p:last-child { margin-bottom: 0; }
.tgd-lore__text strong { color: var(--lore-red); font-weight: 700; }
.tgd-lore .tgd-lore__list {
    margin: 0 0 17px;
    padding: 0 0 0 24px;
    list-style: circle;
    font: 400 12px / 1.55 var(--eng);
    color: var(--lore-red);
}
.tgd-lore .tgd-lore__list li {
    margin: 0 0 9px;
    padding: 0 0 0 3px;
    list-style: circle;
}
.tgd-lore__list li::marker { color: var(--lore-red); }
.tgd-lore blockquote.tgd-lore__quote {
    margin: 20px 0;
    padding: 16px 20px;
    color: inherit;
    font: inherit;
    background: rgba(87,159,159,.1);
    border: 1px solid var(--lore-gold);
    border-left: 5px solid var(--lore-blue);
    border-radius: 2px;
    box-shadow: none;
}
.tgd-lore__quote::before, .tgd-lore__quote::after { content: none; }

/* Оглавление разделов отдельной статьи. */
.tgd-lore .tgd-lore__toc {
    margin: 0 0 23px;
    padding: 0;
    background: rgb(245 245 245);
    border: 1px solid var(--lore-gold);
}
.tgd-lore__toc > summary {
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 700;
}
.tgd-lore__toc nav {
    display: grid;
    gap: 5px;
    padding: 0 14px 13px;
}
.tgd-lore a { color: var(--link-color, #647879); }
.tgd-lore a:hover { color: var(--link-hover-color, #4b8b83); }
.tgd-lore :is(a, summary):focus-visible,
.tgd-lore-index a:focus-visible,
.tgd-lore-dock :is(a, summary):focus-visible {
    outline: 2px solid var(--lore-blue);
    outline-offset: 3px;
}

/* Первый пост с навигацией. */
.tgd-lore-index {
    width: calc(100% - 10px);
    margin: 8px 10px 24px 0;
}
.tgd-lore-index .tgd-lore-index__intro {
    margin: 0 0 20px;
    padding: 18px 22px;
    text-align: center;
    background: var(--lore-paper);
    border: 2px solid var(--lore-ink);
    box-shadow: 4px 4px 0 var(--lore-gold);
}
.tgd-lore-index__nav {
    padding: 18px;
    background: var(--lore-paper);
    border: 2px solid var(--lore-ink);
    box-shadow: 5px 5px 0 var(--lore-ink), 9px 9px 0 var(--lore-blue);
}
.post-content .tgd-lore-index__nav > h2 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    position: relative !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;

    margin: 0 0 14px !important;
    padding: 0 !important;

    color: var(--lore-red);
    font: 700 23px/1.3 var(--eng, Georgia, serif);
    white-space: normal;
    text-indent: 0;

    background: none;
    border: 0;
}
.tgd-lore-links { display: grid; gap: 8px; }
.tgd-lore-links > a {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-width: 0;
    padding: 10px 13px;
    color: var(--lore-ink)!important;
    font-weight: 600;
    text-decoration: none;
    background: var(--main-white);
    border: 1px solid var(
    --lore-gold);
}
.tgd-lore-links > a > span {
    flex: 0 0 auto;
    color: var(--lore-red);
    font-weight: 800;
}
.tgd-lore-links > a:hover,
.tgd-lore-links > a[aria-current="location"] {
    color: var(--lore-paper);
    background: var(--lore-ink);
    border-color: var(
    --lore-ink);
    color: var(--closed-theme)!important;
    text-decoration: none;
}
.tgd-lore-links > a:hover > span,
.tgd-lore-links > a[aria-current="location"] > span { color: inherit; }

/* Плавающее меню создаёт скрипт непосредственно в body. */
.tgd-lore-dock {
    position: fixed;
    z-index: 9999;
    top: var(--tgd-lore-top);
    left: 50%;
    transform: translateX(-50%);
    width: min(780px, calc(100% - 32px));
    max-height: calc(100vh - var(--tgd-lore-top) - 24px);
    max-height: calc(100dvh - var(--tgd-lore-top) - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--lore-paper);
    border: 2px solid var(--lore-ink);
    border-radius: 3px;
    box-shadow: 4px 4px 0 var(--lore-ink);
}
.tgd-lore-dock[hidden] { display: none !important; }
.tgd-lore-dock > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    list-style: none;
    color: var(--lore-paper);
    font-weight: 700;
    line-height: 1.5;
    background: var(--lore-red);
}
.tgd-lore-dock > summary::-webkit-details-marker { display: none; }
.tgd-lore-dock > summary::after {
    content: "\f078";
    flex-shrink: 0;
    font-family: var(--fa);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}

.tgd-lore-dock[open] > summary::after {
    content: "\f077";
}
.tgd-lore-dock .tgd-lore-links { padding: 12px; }
.tgd-lore,
.tgd-lore__heading,
html.tgd-lore-page :is(#p32, #p33, #p34, #p35) {
    scroll-margin-top: var(--tgd-lore-offset);
}

/* ==================== TGD: ПРАВИЛА ==================== */
.tgd-rules,
.tgd-rules * {
    box-sizing: border-box;
}

.tgd-rules {
    --rules-paper: var(--main-white, #fbefe0);
    --rules-ink: var(--main-black, #184d59);
    --rules-red: var(--main-red, #5d0101);
    --rules-gold: var(--accent-color2, #f2a413);

    display: grid;
    gap: 28px;
    width: 100%;
    min-width: 0;
    margin: -1em auto;
    padding: 8px 10px 14px 0;

    color: var(--text-color2, #2e2e2d);
    font: 400 12px/1.65 var(--eng);
    overflow-wrap: anywhere;
}

/* Бумажная комиксная панель */
.tgd-rules .tgd-rules__section {
    position: relative;
    isolation: isolate;
    min-width: 0;
    margin: 0;
    padding: clamp(15px, 3%, 26px);

    background: var(--rules-paper);
    border: 2px solid var(--rules-ink);
    border-radius: 3px;
    box-shadow:
        5px 5px 0 var(--rules-ink),
        9px 9px 0 rgba(187,153,103,.3);
}

.tgd-rules__section::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    width: 140px;
    height: 120px;
    pointer-events: none;

    background:
        radial-gradient(circle, rgba(24,77,89,.22) 1px, transparent 1.4px)
        0 0 / 6px 6px;

    -webkit-mask-image: linear-gradient(225deg, #000, transparent 75%);
    mask-image: linear-gradient(225deg, #000, transparent 75%);
}

/* Это div: общие правила форума для h2 его не затрагивают */
.tgd-rules .tgd-rules__heading {
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0 4px 22px 0;
    padding: 11px 15px;

    color: var(--rules-paper);
    font: 400 24px/1.3 Impact, var(--eng, Arial, sans-serif);
    letter-spacing: .8px;

    background: var(--rules-red);
    border: 2px solid var(--rules-ink);
    border-radius: 2px;
    box-shadow: 4px 4px 0 var(--rules-ink);
}

.tgd-rules__heading > span:last-child {
    min-width: 0;
}

.tgd-rules .tgd-rules__symbol {
    flex: 0 0 32px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;

    color: var(--rules-ink);
    font: 400 22px/1 "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;

    background: var(--rules-paper);
    border: 2px solid var(--rules-ink);
    box-shadow: 2px 2px 0 var(--rules-ink);
    transform: rotate(-5deg);
}

/* Пункты с разделителями и небольшими ромбами */
.tgd-rules .tgd-rules__list {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tgd-rules .tgd-rules__list > li {
    position: relative;
    margin: 0;
    padding: 12px 0 12px 22px;
    color: inherit;
    font: inherit;
    text-align: left;
    list-style: none;
}

.tgd-rules .tgd-rules__list > li + li {
    border-top: 1px dashed rgba(24,77,89,.22);
}

.tgd-rules__list > li::before {
    content: "";
    position: absolute;
    top: 21px;
    left: 2px;
    width: 8px;
    height: 8px;
    background: var(--rules-gold);
    border: 1px solid var(--rules-ink);
    transform: rotate(45deg);
}

.tgd-rules .tgd-rules__list > li:last-child {
    padding-bottom: 0;
}

.tgd-rules strong {
    color: var(--rules-red);
    font-weight: 700;
}


/* ==================================================
   ШАБЛОН ПРИНЯТИЯ ИГРОКА
================================================== */

.post-content .accepted-player {
    position: relative;
    overflow: hidden;

    max-width: 760px;
    margin: 25px auto;
    padding: 42px 46px 38px;
    box-sizing: border-box;

    color: var(--text-color2);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.7),
            transparent 45%
        ),
        var(--main-white);

    border: 1px solid
        color-mix(
            in srgb,
            var(--accent-color2) 45%,
            transparent
        );

    border-radius: var(--radius-medium);
    box-shadow: 0 12px 30px rgba(62, 21, 14, 0.1);

    text-align: center;
}


/* верхняя декоративная линия */

.post-content .accepted-player::before {
    content: "";

    position: absolute;
    top: 0;
    right: 0;
    left: 0;

    height: 7px;

    background:
        linear-gradient(
            90deg,
            var(--main-red) 0 50%,
            var(--main-blue) 50% 100%
        );
}


/* верхняя подпись */

.post-content .accepted-player-label {
    margin-bottom: 11px;

    color: var(--link-color);

    font-size: 9px;
    font-weight: 800;
    letter-spacing: 3px;
    text-transform: uppercase;
}


/* заголовок */

.post-content .accepted-player-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;

    margin-bottom: 24px;
}

.post-content .accepted-player-title span {
    color: var(--text-color);

    font-size: 11px;
    letter-spacing: 0.6px;
}

.post-content .accepted-player-title strong {
    color: var(--accent-color);

    font-family: Fixedsys, Impact, sans-serif;
    font-size: 42px;
    font-weight: normal;
    line-height: 1;
    letter-spacing: 2px;
    text-transform: uppercase;
}


/* основной текст */

.post-content .accepted-player-text {
    max-width: 610px;
    margin: 0 auto;

    font-size: 12px;
    line-height: 1.65;
}

.post-content .accepted-player-text p {
    margin: 0 0 13px;
}

.post-content .accepted-player-text p:last-child {
    margin-bottom: 0;
}

/* ==================================================
   ВЕРХНЯЯ ТАБЛИЦА
================================================== */

.tablica {
    /* строгий размер таблицы */
    --tablica-width: 1172px;
    --tablica-height: 336px;

    /*
       Положение таблицы относительно верхней точки #pun.
       Для корректировки высоты меняй только 0px.
    */
    --tablica-top: calc(40px - var(--header-height));
    --tablica-shift-x: 0px;
    position: absolute;
    z-index: 20;
    top: var(--tablica-top);
    left: 50%;
    width: var(--tablica-width);
    min-width: var(--tablica-width);
    max-width: var(--tablica-width);
    height: var(--tablica-height);
    min-height: var(--tablica-height);
    max-height: var(--tablica-height);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: var(--text-color);
    background: transparent;
    overflow: visible;
    transform:
        translateX(
            calc(-50% + var(--tablica-shift-x))
        );
    pointer-events: none;
}


/* единый расчёт размеров */

.tablica *,
.tablica *::before,
.tablica *::after {
    box-sizing: border-box;
}


/* возвращаем кликабельность */

.tablica a,
.tablica .tablica-post-text {
    pointer-events: auto;
}


/* ==================================================
   ВНУТРЕННИЙ СЛОЙ
================================================== */

.tablica > .menushka {
    position: absolute;
    z-index: 1;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;

    display: block;

    width: 1172px;
    min-width: 1172px;
    max-width: 1172px;

    height: 336px;
    min-height: 336px;
    max-height: 336px;

    margin: 0;
    padding: 0;

    color: inherit;
    background: transparent;

    overflow: visible;

    transform: none;

    pointer-events: none;
}


/* ==================================================
   ЛЕВАЯ ЧАСТЬ — АВАТАРЫ
================================================== */

.tablica .tablica-team {
    position: absolute;
    z-index: 3;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    display: block;
    width: 290px;
    height: 336px;
    margin: 0;
    padding: 0;
    pointer-events: none;
    transform: rotate(-4deg);
    transform-origin: center;
}


/* общие правила рядов */

.tablica .tablica-akt {
    position: absolute;

    display: flex;
    align-items: center;

    margin: 0;
    padding: 0;

    pointer-events: none;
}


/* верхний диагональный ряд */

.tablica .tablica-akt-top {
    top: 60px;
    right: auto;
    bottom: auto;
    left: 29px;
    gap: 19px;
    transform: rotate(
10deg);
    transform-origin: center;
}


/* строгие вертикальные смещения */

.tablica .tablica-akt-top > a:nth-child(1) {
    --avatar-offset: 72px;
    transform:
        translateY(var(--avatar-offset));
}

.tablica .tablica-akt-top > a:nth-child(2) {
    --avatar-offset: 48px;

    transform:
        translateY(var(--avatar-offset));
}

.tablica .tablica-akt-top > a:nth-child(3) {
    --avatar-offset: 24px;

    transform:
        translateY(var(--avatar-offset));
}

.tablica .tablica-akt-top > a:nth-child(4) {
    --avatar-offset: 0px;

    transform:
        translateY(var(--avatar-offset));
}


/* нижний ряд */

.tablica .tablica-akt-bottom {
    top: auto;
    right: auto;
    bottom: 50px;
    left: 20px;
    gap: 19px;
    transform: rotate(
2deg);
    transform-origin: center;
}


/* аватары */

.tablica .tablica-akt > a {
    position: relative;

    display: block;
    flex: 0 0 50px;

    width: 50px;
    min-width: 50px;
    max-width: 50px;

    height: 50px;
    min-height: 50px;
    max-height: 50px;

    margin: 0;
    padding: 0;

    background: var(--main-black);

    box-shadow:
        3px 3px 0
        color-mix(
            in srgb,
            var(--accent-color2) 45%,
            transparent
        );

    overflow: hidden;

    pointer-events: auto;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease;
}


/* изображения */

.tablica .tablica-akt > a > img {
    display: block;

    width: 50px;
    min-width: 50px;
    max-width: 50px;

    height: 50px;
    min-height: 50px;
    max-height: 50px;

    margin: 0;
    padding: 0;

    object-fit: cover;

    border: 0;

    filter:
        grayscale(0.2)
        contrast(1.05);

    transition: filter 0.18s ease;
}


/* внутренняя рамка */

.tablica .tablica-akt > a::after {
    content: "";

    position: absolute;
    inset: 3px;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--main-white) 58%,
            transparent
        );

    pointer-events: none;
}


/* наведение верхнего ряда */

.tablica .tablica-akt-top > a:hover {
    z-index: 5;

    box-shadow:
        5px 5px 0
        var(--accent-color2);

    transform:
        translateY(var(--avatar-offset))
        rotate(-3deg)
        scale(1.08);
}


/* наведение нижнего ряда */

.tablica .tablica-akt-bottom > a:hover {
    z-index: 5;

    box-shadow:
        5px 5px 0
        var(--accent-color2);

    transform:
        rotate(-3deg)
        scale(1.08);
}

.tablica .tablica-akt > a:hover > img {
    filter:
        grayscale(0)
        contrast(1.08);
}


/* ==================================================
   ЦЕНТРАЛЬНАЯ ЧАСТЬ
================================================== */

.tablica .tablica-center {
    position: absolute;
    z-index: 2;
    top: 0;
    right: auto;
    bottom: auto;
    left: 325px;

    display: block;

    width: 455px;
    height: 336px;
    margin: 0;
    padding: 0;

    pointer-events: none;
}


/* имена администрации */

.tablica .tablica-admin-names {
    position: absolute;
    top: 25px;
    right: auto;
    bottom: auto;
    left: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 5px;
    width: 455px;
    height: 14px;
    margin: 0;
    padding: 0;
    color: var(--accent-color);
    font-family: var(--eng);
    font-size: 10px;
    font-weight: 800;
    line-height: 14px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}


/* ссылки администрации */

.tablica .tablica-admin-names > a {
    color: var(--accent-color);
    text-decoration: none;

    pointer-events: auto;

    transition: color 0.18s ease;
}

.tablica .tablica-admin-names > a:hover {
    color: var(--link-color);
}


/* разделители */

.tablica .tablica-admin-names > span {
    color: var(--accent-color2);

    font-family: Georgia, serif;
    font-size: 9px;
    font-weight: 700;
    line-height: 14px;

    opacity: 0.85;
}


/* описание */

.tablica .tablica-description {
    position: absolute;
    top: auto;
    right: 19px;
    bottom: 47px;
    left: auto;
    width: 300px;
    min-height: 28px;
    margin: 0;
    padding: 0;
    color: var(--accent-color);
    font-family: var(--eng);
    font-size: 9px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transform: rotate(
350deg);
    transform-origin: center;
    pointer-events: auto;
}


/* пунктирная линия */

.tablica .tablica-description::after {
    content: "";

    display: block;

    width: 82%;
    height: 1px;
    margin: 6px auto 0;

    background:
        repeating-linear-gradient(
            to right,
            var(--accent-color2) 0 6px,
            transparent 6px 10px
        );

    opacity: 0.72;
}


/* ==================================================
   ПРАВАЯ ЧАСТЬ
================================================== */

.tablica > .menushka > .tablica-right {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 17px;
    bottom: auto;
    left: auto;

    display: block;

    width: 359px;
    min-width: 359px;
    max-width: 359px;

    height: 336px;
    min-height: 336px;
    max-height: 336px;

    margin: 0;
    padding: 0;

    pointer-events: none;
}


/* ==================================================
   ВЕРХНИЕ ССЫЛКИ
================================================== */

/* ==================================================
   ВЕРХНИЕ ССЫЛКИ
================================================== */

.tablica .tablica-right > .tablica-links {
    position: absolute;
    z-index: 20;
    top: 44px;
    right: 0;
    bottom: auto;
    left: 0;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 22px;

    width: 359px;
    height: 14px;

    margin: 0;
    padding: 0;

    pointer-events: auto;
}


/* ==================================================
   ГРУППА ССЫЛОК
================================================== */

.tablica .tablica-links-group {
    position: relative;

    flex: 0 0 auto;

    margin: 0;
    padding: 0 0 12px;
}


/* ==================================================
   ЗАГОЛОВОК МЕНЮ
================================================== */

.tablica .tablica-links-title {
    position: relative;
    isolation: isolate;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-width: 165px;
    height: 31px;
    margin: 0;
    padding: 0 18px;

    box-sizing: border-box;

    background:
        linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.35),
            transparent 36%
        ),
        color-mix(
            in srgb,
            var(--main-white) 91%,
            var(--accent-color2)
        );

    border: 1px solid
        color-mix(
            in srgb,
            var(--accent-color) 40%,
            transparent
        );

    border-radius: 2px;

    box-shadow:
        3px 3px 0
        color-mix(
            in srgb,
            var(--accent-color2) 28%,
            transparent
        );

    color: var(--accent-color);

    font-family: var(--rus);
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.35px;

    white-space: nowrap;

    transform: rotate(-1deg);

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.tablica .tablica-links-title {
    cursor: default;
}

/* стрелка меню */

.tablica .tablica-links-title::before {
    content: "\f0d7";

    color: var(--accent-color2);

    font-family: var(--fa);
    font-size: 8px;
    font-weight: 900;
    line-height: 1;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}


/* декоративная линия снизу */

.tablica .tablica-links-title::after {
    content: "";

    position: absolute;
    z-index: -1;
    right: 7px;
    bottom: 4px;
    left: 7px;

    height: 1px;

    background:
        repeating-linear-gradient(
            90deg,
            var(--accent-color2) 0 5px,
            transparent 5px 8px
        );

    opacity: 0.5;

    transform: none;
}


/* вторую плашку наклоняем в другую сторону */

.tablica .tablica-links-group:last-child
> .tablica-links-title {
    transform: rotate(1deg);
}


/* наведение и открытое меню */

.tablica .tablica-links-group:hover
> .tablica-links-title,
.tablica .tablica-links-group:focus-within
> .tablica-links-title {
    color: var(--link-color);

    background:
        linear-gradient(
            105deg,
            rgba(255, 255, 255, 0.42),
            transparent 36%
        ),
        color-mix(
            in srgb,
            var(--main-white) 82%,
            var(--accent-color2)
        );

    box-shadow:
        4px 4px 0
        color-mix(
            in srgb,
            var(--accent-color2) 40%,
            transparent
        );

    transform: rotate(0deg) translateY(-2px);
}

.tablica .tablica-links-group:hover
> .tablica-links-title::before,
.tablica .tablica-links-group:focus-within
> .tablica-links-title::before {
    color: var(--link-color);
    transform: rotate(180deg);
}

/* маленькая стрелка */

.tablica .tablica-links-title::before {
    content: "\f0d7";

    display: inline-block;

    color: var(--accent-color2);

    font-family: var(--fa);
    font-size: 8px;
    font-weight: 900;
    line-height: 1;

    transform-origin: center;

    transition:
        color 0.18s ease,
        transform 0.2s ease;
}


/* линия под заголовком */

.tablica .tablica-links-title::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: -4px;
    left: 14px;

    height: 1px;

    background: var(--accent-color2);

    transform: scaleX(0);
    transform-origin: center;

    transition: transform 0.18s ease;
}


/* наведение на всю группу */

.tablica .tablica-links-group:hover > .tablica-links-title,
.tablica .tablica-links-group:focus-within > .tablica-links-title {
    color: var(--link-color);
}

.tablica .tablica-links-group:hover > .tablica-links-title::before,
.tablica .tablica-links-group:focus-within > .tablica-links-title::before {
    color: var(--link-color);
    transform: rotate(180deg);
}

.tablica .tablica-links-group:hover > .tablica-links-title::after,
.tablica .tablica-links-group:focus-within > .tablica-links-title::after {
    transform: scaleX(1);
}


/* ==================================================
   ВЫПАДАЮЩЕЕ МЕНЮ
================================================== */

.tablica .tablica-dropdown {
    position: absolute;
    z-index: 30;
    top: calc(100% + 2px);
    left: 0;

    display: flex;
    flex-direction: column;

    width: 205px;
    margin: 0;
    padding: 7px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.34),
            transparent 38%
        ),
        var(--main-white);

    border: 1px solid
        color-mix(
            in srgb,
            var(--accent-color) 35%,
            transparent
        );

    border-radius: 2px 2px var(--radius-medium) var(--radius-medium);

    box-shadow:
        4px 5px 0
        color-mix(
            in srgb,
            var(--main-black) 12%,
            transparent
        ),
        0 12px 25px
        color-mix(
            in srgb,
            var(--main-black) 18%,
            transparent
        );

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-7px);
    transform-origin: top center;

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.18s ease;
}


/* декоративная верхняя линия */

.tablica .tablica-dropdown::before {
    content: "";

    position: absolute;
    top: 0;
    right: 7px;
    left: 7px;

    height: 2px;

    background:
        repeating-linear-gradient(
            90deg,
            var(--accent-color2) 0 8px,
            transparent 8px 11px
        );

    opacity: 0.7;
}


/* загнутый уголок */

.tablica .tablica-dropdown::after {
    content: "";

    position: absolute;
    right: -1px;
    bottom: -1px;

    width: 15px;
    height: 15px;

    background:
        linear-gradient(
            135deg,
            transparent 49%,
            color-mix(
                in srgb,
                var(--accent-color2) 35%,
                var(--main-white)
            ) 50%
        );

    border-bottom-right-radius: var(--radius-medium);

    pointer-events: none;
}


/* открытие */

.tablica .tablica-links-group:hover > .tablica-dropdown,
.tablica .tablica-links-group:focus-within > .tablica-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


/* ==================================================
   ССЫЛКИ ВНУТРИ МЕНЮ
================================================== */

.tablica .tablica-dropdown > a {
    position: relative;

    display: block;

    margin: 0;
    padding: 8px 21px 8px 12px;

    color: var(--text-color);

    border-bottom: 1px dashed
        color-mix(
            in srgb,
            var(--accent-color) 22%,
            transparent
        );

    font-family: var(--rus);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.25px;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        padding-left 0.18s ease;
}


/* последняя ссылка без разделителя */

.tablica .tablica-dropdown > a:last-child {
    border-bottom: 0;
}


/* стрелка справа */

.tablica .tablica-dropdown > a::after {
    content: "\f054";

    position: absolute;
    top: 50%;
    right: 9px;

    color: var(--accent-color2);

    font-family: var(--fa);
    font-size: 7px;
    font-weight: 900;
    line-height: 1;

    opacity: 0.65;

    transform: translateY(-50%);

    transition:
        right 0.18s ease,
        opacity 0.18s ease;
}


/* наведение на пункт */

.tablica .tablica-dropdown > a:hover,
.tablica .tablica-dropdown > a:focus {
    color: var(--link-color);

    background:
        color-mix(
            in srgb,
            var(--accent-color2) 11%,
            transparent
        );

    padding-left: 16px;

    outline: none;
}

.tablica .tablica-dropdown > a:hover::after,
.tablica .tablica-dropdown > a:focus::after {
    right: 6px;
    opacity: 1;
}


/* меню принятых раскрывается от правого края */

.tablica .tablica-links-group:last-child > .tablica-dropdown {
    right: 0;
    left: auto;
}
/* ==================================================
   КАРТОЧКА ПОСТА — СПРАВА
================================================== */

.tablica .tablica-right > .tablica-post {
    position: absolute;
    z-index: 4;
    top: 164px;
    right: -11px;
    bottom: auto;
    left: auto;
    display: block;
    width: 359px;
    min-width: 359px;
    max-width: 359px;
    height: 132px;
    min-height: 132px;
    max-height: 132px;
    margin: 0;
    padding: 0;
    pointer-events: none;
    transform: rotate(
7deg);
    transform-origin: center;
}


/* автор */

.tablica .tablica-post-author {
    position: absolute;
    z-index: 6;
    top: -12px;
    left: 50%;
    display: block;
    width: max-content;
    max-width: 260px;
    height: 18px;
    padding: 3px 14px;
    color: var(--accent-color);
    /* background: var(--main-white); */
    font-family: var(--eng);
    font-size: 10px;
    font-weight: 800;
    line-height: 12px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transform: translateX(-50%);
    pointer-events: auto;
    transition: color 0.18s ease;
}

.tablica .tablica-post-author:hover {
    color: var(--link-color);
}


/* основа карточки */

.tablica .tablica-post-body {
    position: relative;
    display: grid;
    grid-template-rows:
        minmax(0, 1fr)
        26px;
    width: 355px;
    min-width: 351px;
    max-width: 342px;
    height: 102px;
    /* min-height: 100px; */
    /* max-height: 108px; */
    margin: 0;
    padding: 9px 12px 7px;
    color: var(--text-color);
    /* background:
        linear-gradient(
            100deg,
            rgba(255, 255, 255, 0.19),
            transparent 34%
        ),
        color-mix(
            in srgb,
            var(--accent-color2) 23%,
            var(--main-white)
        ); */
    /* border:
        1px solid
        color-mix(
            in srgb,
            var(--accent-color2) 45%,
            transparent
        ); */
    /* box-shadow:
        5px 5px 0
        color-mix(
            in srgb,
            var(--main-black) 18%,
            transparent
        ); */
    overflow: hidden;
    pointer-events: auto;
}





/* прокручиваемый текст */

.tablica .tablica-post-text {
    position: relative;
    z-index: 2;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 4px 10px 8px 2px;
    color: var(--text-color);
    font-family: var(--font-base);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
    text-align: left;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color:
        var(--accent-color)
        transparent;
}

.tablica .tablica-post-text::-webkit-scrollbar {
    width: 3px;
}

.tablica .tablica-post-text::-webkit-scrollbar-track {
    background: transparent;
}

.tablica .tablica-post-text::-webkit-scrollbar-thumb {
    background: var(--accent-color);
}


/* ссылка на пост */

.tablica .tablica-post-link {
    position: relative;
    z-index: 3;

    align-self: end;
    justify-self: end;

    display: block;

    max-width: 100%;
    height: 21px;
    margin: 0;
    padding: 5px 9px;

    color: var(--main-white);
    background: var(--accent-color);

    font-family: var(--rus);
    font-size: 9px;
    font-weight: 800;
    line-height: 11px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    pointer-events: auto;

    transition:
        color 0.18s ease,
        background-color 0.18s ease;
}

.tablica .tablica-post-link:hover {
    color: var(--main-white);
    background: var(--link-color);
}


/* ==================================================
   НАЗВАНИЕ ЭПИЗОДА
================================================== */

.tablica .tablica-right > .tablica-episode {
    position: absolute;
    z-index: 5;
    top: 288px;
    right: 10px;
    bottom: auto;
    left: 31%;
    display: block;
    width: max-content;
    max-width: 300px;
    height: 28px;
    margin: 0;
    padding: 6px 18px;
    color: var(--accent-color);
    /* background: var(--profile-body-color); */
    font-family: var(
    --rus);
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    transform: translateX(-50%);
    pointer-events: auto;
    transition:
        color 0.18s ease,
        background-color 0.18s ease;
    transform: rotate(
8deg);
    transform-origin: center;
}

.tablica .tablica-right > .tablica-episode:hover {
    color: var(--button-color);
}