@charset "windows-1251";
@import url(style_cs.1787931706.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;
}

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

@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: #731702;
    --accent-color2: #f2a413;
    --text-color: #731414;
    --text-color2: #2e2e2d;
    --link-color: #184d59;
    --link-hover-color: #f7af17;
    --main-grey: #8da69d99;
    --main-white: #fbefe0;
    --main-black: #184d59;
    --main-red: #731702;
    --main-blue: #8da69d;
    --quote-color: #f2dec4b0;
    --select-color: #f2a413;
    --button-color: #e7ac5f;
    --button-color-hover: #bf4539;

    /* новые цвета */
    --closed-theme: #fff5e9;
    --profile-body-color: #f2dec4;
    --profile-name-color: #731702;
    --profile-label-color: #8da69d;
    --profile-icon-color: #d97941;

  /* 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/25/f9/77843.png");
    --forum-footer: url("https://forumstatic.ru/files/001c/25/f9/57265.png");
    --forum-bg: url("https://forumstatic.ru/files/001c/25/f9/15794.png");
    --forum-body: url("https://forumstatic.ru/files/001c/25/f9/27471.png");
    --linetelo: url('https://forumstatic.ru/files/001c/b8/a2/63060.jpg');
    --defaultavatar: url('https://upforme.ru/uploads/001c/25/f9/2/795346.png');
    --forum-width: 1170px;
    --header-width: 1364px;
    --header-height: 497px;
    --footer-width: 1364px;
    --footer-height: 177px;
    --radius-small: 3px;
    --radius-medium: 5px;
    --radius-large: 10px;
    --ticket-cut: 10px;

    /* TABLICA */
    --tablica-width: 1168px;
    --tablica-height: 411px;
    --tablica-top: calc(0px - var(--header-height));
    --tablica-shift-x: 0px;
    --menu-paper-texture: url("https://png.pngtree.com/thumb_back/fw800/background/20251117/pngtree-natural-fiber-paper-texture-background-jpg-image_20385887.webp");

	  /* 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 {
    background: var(--forum-bg) fixed;
    background-color: #332e2a;
    margin: 0;

    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: 483px auto 30px;
    overflow: visible;
    background-image: var(--forum-body);
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 1170px auto;
}

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

#pun::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    width: calc(100% - 40px) !important;
    height: calc(100% - 50px) !important;
    top: 67px !important;
    left: 20px !important;
    padding: 1px;
    box-sizing: border-box;
    background: var(--linetelo);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 0;
}

#pun-title::before {
    content: "";
    position: absolute;

    top: 0;
    left: 50%;

    width: 1364px;
    height: 497px;

    transform: translateX(-50%);

    background-image: var(--forum-logo);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 1364px 497px;

    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 1364 x 177 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: -44px;
}

#html-footer .partners {
    position: relative;
    z-index: 5;
    width: 930px;
    max-width: 930px;
    height: 80px;
    margin: -35px 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: 0;

    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: 1364px 177px;

    pointer-events: none;
}

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

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

/* Плюс перед положительным рейтингом */
.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: calc(100% + 0px);
    left: 50%;
    right: auto;
    width: 245px;
    height: auto;
    margin: 0px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid
        color-mix(
            in srgb,
            var(--accent-color2) 55%,
            transparent
        );
    border-radius: var(--radius-medium);
    background: var(--main-white);
    color: var(--text-color);
    box-shadow:
        0 8px 20px rgb(62 21 14 / 22%),
        inset 0 0 0 2px rgb(255 255 255 / 45%);
    transform: translateX(-50%);
}


/* маленький указатель сверху */
#pun-navlinks.section .multiacc-profilemenu::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 50%;
    width: 12px;
    height: 12px;
    border-top: 1px solid
        color-mix(
            in srgb,
            var(--accent-color2) 55%,
            transparent
        );
    border-left: 1px solid
        color-mix(
            in srgb,
            var(--accent-color2) 55%,
            transparent
        );
    background: var(--accent-color2);
    transform:
        translateX(-50%)
        rotate(45deg);
    z-index: 9;
}


/* общая строка меню */
#pun-navlinks.section .multiacc-profilemenu li {
    position: relative;
    top: auto;

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

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

    margin: 0;
    padding: 6px 9px;

    gap: 8px;

    box-sizing: border-box;

    border: 0;
    border-bottom: 1px solid
        color-mix(
            in srgb,
            var(--text-color) 12%,
            transparent
        );

    background: transparent;

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

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


/* последняя строка без нижней линии */
#pun-navlinks.section .multiacc-profilemenu li:last-child {
    border-bottom: 0;
}


/* наведение на строку */
#pun-navlinks.section .multiacc-profilemenu li:hover {
    background:
        color-mix(
            in srgb,
            var(--main-blue) 10%,
            transparent
        );

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


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

#pun-navlinks.section .multiacc-profilemenu li:first-child {
    min-height: 38px;

    margin-bottom: 3px;

    border: 0;
    border-radius:
        calc(var(--radius-medium) - 2px)
        calc(var(--radius-medium) - 2px)
        var(--radius-small)
        var(--radius-small);

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

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


/* не меняем фон первой строки как у обычной */
#pun-navlinks.section .multiacc-profilemenu li:first-child:hover {
    background: var(--main-blue);
    box-shadow: none;
}


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

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

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

    min-width: 0;
    padding: 0;

    flex: 1 1 auto;

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

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


/* обычный аккаунт */
#pun-navlinks.section
.multiacc-profilemenu
li:not(:first-child)
a::before {
    content: "\f007";

    color: var(--main-blue);

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


/* добавить аккаунт */
#pun-navlinks.section
.multiacc-profilemenu
li:first-child
a {
    color: var(--main-white) !important;
    font: 600 12px var(--eng);
}


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

    color: var(--main-white);

    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(--link-hover-color) !important;
}


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

#pun-navlinks.section .multiacc-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    margin: 0 0 0 auto;
    padding: 0;

    flex: 0 0 24px;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: var(--accent-color);

    font-size: 0;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease;
}


/* корзина */
#pun-navlinks.section .multiacc-delete-btn::before {
    content: "\f1f8";

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


/* наведение на удаление */
#pun-navlinks.section .multiacc-delete-btn:hover {
    background:
        color-mix(
            in srgb,
            var(--accent-color) 12%,
            transparent
        );

    color: var(--main-red);

    transform: scale(1.08);
}

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

.multiacc-dialog {
    z-index: 99999;

    width: min(90vw, 360px);

    padding: 6px;

    box-sizing: border-box;

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

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

    font-size: 11px;

    box-shadow:
        0 12px 35px rgb(62 21 14 / 30%);
}


/* затемнение страницы */
.multiacc-dialog::backdrop {
    background: rgb(62 21 14 / 35%);
    backdrop-filter: blur(2px);
}


/* форма внутри */
.multiacc-dialog > form {
    padding: 14px;
    border: 1px solid
        color-mix(
            in srgb,
            var(--accent-color2) 35%,
            transparent
        );
    border-radius: calc(var(--radius-medium) - 2px);
    background: var(--profile-body-color);
}


/* строки формы */
.multiacc-dialog form > div {
    display: flex;
    justify-content: center;
    gap: 7px;
}


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


/* поля */
.multiacc-dialog input {
    width: 100%;

    padding: 7px 9px;

    box-sizing: border-box;

    border: 1px solid
        color-mix(
            in srgb,
            var(--text-color) 20%,
            transparent
        );

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

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

    font-size: 11px;
}


/* фокус поля */
.multiacc-dialog input:focus {
    border-color: var(--main-blue);
    outline: 2px solid
        color-mix(
            in srgb,
            var(--main-blue) 20%,
            transparent
        );
}


/* кнопки диалога */
.multiacc-dialog button {
    min-height: 28px;

    margin: 0;
    padding: 5px 11px;

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

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

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

    font-size: 10px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}


.multiacc-dialog button:hover {
    background: var(--button-color-hover);
    color: var(
    --main-white);
    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(--accent-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: 12;

    left: 0;
    top: 29px;

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

    padding: 4px;
    box-sizing: border-box;

    background:
        linear-gradient(
            125deg,
            rgba(255, 255, 255, .28),
            transparent 45%
        ),
        var(--main-white);

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

    box-shadow:
        4px 4px 0 var(--main-red),
        7px 7px 0 rgba(24, 77, 89, .15);

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

    transition: transform .18s ease;
}


/* ромбик сверху */

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

    position: absolute;
    z-index: 2;

    top: -6px;
    left: 11px;

    width: 10px;
    height: 10px;

    background: var(--accent-color2);
    border: 1px solid var(--main-red);

    transform: rotate(45deg);
}


/* появление при наведении */

#pun-navlinks
.container
li:hover > ul:not(.multiacc-profilemenu) {
    transform: scaleY(1);
}


/* ==================================================
   ПУНКТЫ ВЫПАДАЮЩЕГО МЕНЮ
================================================== */

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

    margin: 0;
    padding: 0;
}


/* ссылки в пунктах */

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

    margin: 0;
    padding: 7px 10px;

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

    font-size: 1em;
    font-weight: bold;
    text-align: left;

    background: rgba(251, 239, 224, .82);

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

    transition:
        color .18s ease,
        background .18s ease,
        padding-left .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";

    margin-right: 6px;

    color: var(--main-blue);

    font-size: .65em;
}


/* ==================================================
   НАВЕДЕНИЕ НА ПУНКТ
================================================== */

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

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

    background:
        linear-gradient(
            100deg,
            rgba(242, 164, 19, .16),
            var(--main-white)
        );
}


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


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

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

    background: var(--main-red);

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


#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(
            to right,
            var(--main-red),
            var(--button-color-hover)
        );
}


/* ==================================================
   ВЫПАДАЮЩЕЕ МЕНЮ ВТОРОГО УРОВНЯ
================================================== */

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

    left: 100%;
    top: -10px;

    width: max-content;

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

    box-shadow:
        4px 4px 0 var(--main-blue),
        7px 7px 0 rgba(115, 23, 2, .13);

    transform: scaleX(0) !important;
    transform-origin: left;
}


/* ромбик второго уровня */

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

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


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

#pun-navlinks
.container
li > ul:not(.multiacc-profilemenu) > li.forms:hover
> ul:not(.multiacc-profilemenu) {
    transform: scaleX(1) !important;
}


/* ==================================================
   УБИРАЕМ РАЗДЕЛИТЕЛИ ВНУТРИ ВЫПАДАЮЩЕГО МЕНЮ
================================================== */

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


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

#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: rgba(242, 222, 196, .5);
    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:
        minmax(0, 1fr)
        minmax(0, 1.35fr)
        minmax(130px, .55fr);
    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: rgba(251, 239, 224, .94);
}

.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(--button-color);
}

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

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

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

.post-content .character-form-section {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 25px;

    padding: 23px 0;

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

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

.post-content .character-form-section-title {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.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%
        ),
        rgba(242, 222, 196, .38);
    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,
            rgba(251, 239, 224, .97),
            rgba(242, 222, 196, .92)
        ),
        radial-gradient(
            circle,
            rgba(115, 23, 2, .10) 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: rgba(251, 239, 224, .80);
    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:
        linear-gradient(
            135deg,
            rgba(251, 239, 224, .96),
            rgba(242, 222, 196, .91)
        ),
        var(--main-white);

    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: 540px;
    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%
        ),
        rgba(251, 239, 224, .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:
        color-mix(
            in srgb,
            var(--wanted-accent) 8%,
            var(--main-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:
        color-mix(
            in srgb,
            var(--wanted-accent) 6%,
            var(--main-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:
        color-mix(
            in srgb,
            var(--wanted-accent) 7%,
            var(--main-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:
        linear-gradient(
            135deg,
            rgba(251, 239, 224, .97),
            rgba(242, 222, 196, .92)
        ),
        radial-gradient(
            circle,
            rgba(115, 23, 2, .10) 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-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: rgba(251, 239, 224, .80);

    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,
            rgba(251, 239, 224, .96),
            rgba(242, 222, 196, .91)
        ),
        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-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: rgba(251, 239, 224, .64);
    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%
        ),
        rgba(251, 239, 224, .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(--main-white);
    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: rgba(242, 222, 196, .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,
            rgba(251, 239, 224, .96),
            rgba(242, 222, 196, .91)
        ),

        /* комиксные точки */
        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%
        ),
        rgba(242, 222, 196, .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: rgba(251, 239, 224, .91);

    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%
        ),
        rgba(242, 222, 196, .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: rgba(251, 239, 224, .67);
    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(--main-white);
    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:
        linear-gradient(
            180deg,
            rgba(251, 239, 224, .92),
            rgba(242, 222, 196, .83)
        );
}

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

.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: rgba(251, 239, 224, .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: rgba(115, 23, 2, .24);
}

.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;
}

.ep-flashback .ep-description,
.ep-flashback .ep-section {
    background:
        color-mix(
            in srgb,
            var(--main-blue) 8%,
            var(--main-white)
        ) !important;
}

/* ======================================================
   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: linear-gradient(
            135deg,
            rgba(251, 239, 224, .97),
            rgba(242, 222, 196, .92)
        ),
        radial-gradient(
            circle,
            rgba(115, 23, 2, .10) 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-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: rgba(251, 239, 224, .80);

    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: rgba(187,153,103,.12);
    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);
    font-weight: 600;
    text-decoration: none;
    background: rgba(187,153,103,.1);
    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-red);
    border-color: var(--lore-ink);
    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;
}