@import url(style_cs.1788567488.css);
/* банк приколов */ 
@import url(https://forumstatic.ru/files/001c/bd/d1/43828.css);

/* Reply Form Fonts */ 
@import url(/files/001c/bd/d1/fonts.css); 

/* шрифты */ 
@import url('https://fonts.googleapis.com/css2?family=Brygada+1918:ital,wght@0,400..700;1,400..700&family=Jura:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');


/* Дополнительный CSS */
@import url('https://forumstatic.ru/files/001c/bd/d1/84900.css');

:root {
  --def-font: "Jura", sans-serif;
  --sec-font: "Jost", sans-serif;
  --cursivef: "Brygada 1918", serif;
  --newsf: "Lavoza", serif;
  --acc-color: #E1821D;
  --acc-deep: #A95319;
  --acc-soft: #F5E9DB;
  --pun-main: #F1EEE8;
  --pun-soft: #F7F4EE;
  --pun-light: #FCFAF6;
  --pun-muted: #DDD6CB;
  --pun-dark: #2B2119;
  --pun-dark-soft: #3D2E22;
  --text-main: #281F18;
  --text-soft: #6D5C4B;
  --line-color: #D4CCC0;
  --small-color: #6D7048;
  --bg-body: var(--pun-main);
}

@media screen and (max-width: 720px) {
	.post-box .post-content {
		font-size: 1.4em !important;
	}

	.punbb textarea#main-reply {
		font-size: 1.7em !important;
	}
}

@font-face {
    font-family: 'Druzhok';
    src: url('https://forumstatic.ru/files/001c/be/8c/15463.woff2?v=1') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lavoza';
    src: url('https://forumstatic.ru/files/001c/c4/75/92515.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/*** ФОН ФОРУМА ***/
html,
body {
    background: #000 url(https://upforme.ru/uploads/001c/c0/46/2/750027.png) center top / cover no-repeat fixed;
}


/* Скрываем элементы форума */

.acchide,
#pun-index #pun-main h1,
#pun-navlinks h2,
#pun-status h2,
#pun-ulinks h2,
.punbb .forum h2,
.punbb .multipage .topic h2,
.punbb dl.post-sig dt span,
.punbb p.crumbs strong,
.punbb .divider hr,
.punbb .required label em,
.punbb .formsubmit label,
.punbb .submitfield label,
.punbb .modmenu label,
.punbb .modmenu .container span,
#pun-userlist .main h2,
#pun-title h1,
#pun-announcement h2 {
  font-size: 0;
  height: 0;
  width: 0;
  line-height: 0.0;
  position:absolute;
  left: -9999px;
  overflow: hidden
}

#pun:after,
.punbb .post-links ul:after,
.punbb .main div.inline:after,
.punbb .post-box:after,
.punbb .linksb:after,
.punbb .container:after {clear: both; content: "."; display: block; height: 0; visibility: hidden; overflow:hidden; line-height: 0.0; font-size: 0;}

.punbb th,
.punbb thead {
display: none;
}

#pun-index .tc2,
#pun-index .tc3,
#pun-index .tcmod {
	display: none
}

#pun-main.show_new .tc3 {
    display: none;
}

.topic a.sharelink, .topic a.translatelink {display: none;}

.lastedit, li#navawards, .pa-invites, .pa-gifts, #pun-live-rusff, #button-files_rusff, #button-graffiti_rusff, 
.pl-share, .sharelink, .pl-reports, li.pl-share, .post-links li.pl-reports {display: none !important;}

#pun-status .status-right {display: none;}
fieldset legend span {
display:none;
}

/* скрыть плюсик в профиле */
.pa-respect a[href*="relation"] {
    display: none;}

td#button-smile {
display: none;}

/* ================== */

/* Общие стили */
* {margin: 0; padding: 0;}
body {margin: 0;}
ul, dl, li, dd, dt {list-style: none;}

body {font: 12px Verdana;}
h1, h2 {
    padding: 5px 10px;
    margin: 0;
    font: 500 19px / 1 var(--def-font);
    color: var(--text-soft);
    text-transform: lowercase;
    text-align: center;
}

address, em {font-style: normal}

a {text-decoration: none;}

/* Скроллбары */
* {
scrollbar-width: thin;
    scrollbar-color: var(--acc-color) transparent;
}
*::-webkit-scrollbar {width: 5px; height: 9px;}
*::-webkit-scrollbar-track {background-color: var(--acc-color);}
*::-webkit-scrollbar-thumb {background-color: transparent;}
/* ================== */

#pun-adnav li {
    margin-bottom: 6px;
    background: var(--pun-soft);
    border-radius: 5px;
    display: flex;
    align-items: center;
    font: 500 13px / 1 var(--sec-font);
    text-transform: lowercase;
    transition: background 0.15s ease;
}

#pun-adnav li:last-child {
    margin-bottom: 0;
}

#pun-adnav li:hover {
    background: var(--pun-main);
}

#pun-adnav li a {
    color: inherit;
    font: inherit; /* забирает font-family/size/weight у li целиком */
    text-decoration: none;
    display: block;
    width: 100%;
}

/* Тело форума */
.punbb {
font: normal 100% verdana, arial, helvetica, sans-serif;
	float: left;
	width: 100%;
	height: auto;
}
/***   ШАПКА   ***/
#pun-title table {
width: 1000px;
    height: 460px;
    margin: -51px auto auto -15px;
    background: url(https://upforme.ru/uploads/001c/c0/46/2/650903.jpg);
    border-radius: 40px 40px 0 0;
overflow: hidden;
background-clip: padding-box;
}


#pun {
width: 970px;
    padding: 0px 15px 0px 15px;
    margin: 100px auto 35px auto;
    border-radius: 40px 40px 28px 28px;
    color: var(--text-main);
    background: var(--pun-main);}

/* ================== */

/* Основное меню над шапкой */
#pun-navlinks {
    height: 0;
    overflow: visible;
}

#pun-navlinks > .container {
    position: relative;
    z-index: 20;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 24px;

    width: max-content;
    max-width: none;
    margin: 0 auto;
    padding: 0;

    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    transform: translateY(-485px);
}

#pun-navlinks > .container > li {
    position: relative;
    display: block;
    border: 0;
}

#pun-navlinks > .container > li > a {
    position: relative;
    display: block;
    padding: 0;

    color: var(--text-main);
    font: 600 13px/1 var(--def-font);
    letter-spacing: 0.035em;
    text-transform: lowercase;
    text-decoration: none;
}

#pun-navlinks > .container > li > a::before,
#pun-navlinks > .container > li > a::after {
    content: none !important;
    display: none !important;
}

/* Крест поверх пункта при наведении */
#pun-navlinks > .container > li::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 5;

    width: 16px;
    height: 16px;
    background: var(--acc-color);

    clip-path: polygon(
        18% 0,
        50% 32%,
        82% 0,
        100% 18%,
        68% 50%,
        100% 82%,
        82% 100%,
        50% 68%,
        18% 100%,
        0 82%,
        32% 50%,
        0 18%
    );

    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.15s ease;
    pointer-events: none;
}

#pun-navlinks > .container > li:hover::after {
    opacity: 1;
}

#pun-navlinks > .container > li > a:hover,
#pun-navlinks > .container > li.isactive > a {
    color: var(--text-main);
}

/* Служебное меню под шапкой */
#pun-ulinks {
    position: relative;
    top: auto;
    z-index: 15;
}

#pun-ulinks > .container {
    box-sizing: border-box;
    position: relative;
    top: auto;
    left: auto;

    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0;

    width: 1000px;
    min-height: 44px;
    margin: 0 0 0 -15px;
    padding: 14px 18px 12px;

    text-transform: lowercase;
    transform: none;

    background: transparent;
    border: 0;
    box-shadow: none;
}

#pun-ulinks > .container > li {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    margin: 0;
    padding: 0;
}

#pun-ulinks > .container > li + li {
    margin-left: 8px;
    padding-left: 16px;
}

/* Крестики между пунктами */
#pun-ulinks > .container > li + li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;

    width: 7px;
    height: 7px;
    background: var(--acc-color);

    clip-path: polygon(
        18% 0,
        50% 32%,
        82% 0,
        100% 18%,
        68% 50%,
        100% 82%,
        82% 100%,
        50% 68%,
        18% 100%,
        0 82%,
        32% 50%,
        0 18%
    );

    opacity: 0.85;
    transform: translateY(-50%) rotate(5deg);
    pointer-events: none;
}

#pun-ulinks > .container > li > a::before,
#pun-ulinks > .container > li > a::after {
    content: none !important;
    display: none !important;
}

#pun-ulinks > .container > li > a,
#pun-ulinks > .container > li > a:link,
#pun-ulinks > .container > li > a:visited {
    display: block;
    padding: 2px 0;

    color: var(--text-main);
    font: 650 9px/1 var(--def-font);
    letter-spacing: 0.015em;
    text-transform: lowercase;
    white-space: nowrap;
    text-decoration: none;
    text-shadow: none;

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

#pun-ulinks > .container > li > a:hover {
    color: var(--acc-deep);
    transform: translateY(-1px);
}

/* ================== */

/* Жанр, сезон и навигация в шапке */
#custom_table .header-meta {
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 27px;
    z-index: 25;

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

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

    white-space: nowrap;
    transform: translateX(-50%);

    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#custom_table .header-meta > .genre,
#custom_table .header-meta > .autumn-ed,
#custom_table .header-meta > .spirit_nav-wrap {
    box-sizing: border-box;
    position: relative;
    inset: auto;

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

    min-height: 31px;
    margin: 0;
    padding: 0 14px;

    color: var(--pun-light);
    background: rgba(31, 24, 18, 0.86);

    border: 0;
    border-radius: 4px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 3px 8px rgba(15, 10, 7, 0.18);

    font: 700 11px/1 var(--def-font);
    letter-spacing: 0.025em;
    text-transform: lowercase;

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

#custom_table .header-meta > .genre {
    min-width: 150px;
}

#custom_table .header-meta > .autumn-ed {
    min-width: 165px;
}

#custom_table .header-meta > .spirit_nav-wrap {
    min-width: 135px;
}

#custom_table .header-meta > * + * {
    padding-left: 14px;
    border-left: 0;
}

/* Крестики между метками */
#custom_table .header-meta > * + *::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -16px;

    width: 10px;
    height: 10px;
    background: var(--acc-color);

    clip-path: polygon(
        18% 0,
        50% 32%,
        82% 0,
        100% 18%,
        68% 50%,
        100% 82%,
        82% 100%,
        50% 68%,
        18% 100%,
        0 82%,
        32% 50%,
        0 18%
    );

    opacity: 0.95;
    transform: translateY(-50%) rotate(7deg);
    pointer-events: none;
}

#custom_table .header-meta span {
    margin-right: 7px;
    color: var(--acc-color);
    font: 750 9px/1 var(--def-font);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

#custom_table .header-meta .nav_button {
    position: relative;
    inset: auto;

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

    width: 100%;
    height: 31px;
    margin: 0;
    padding: 0;

    color: var(--pun-light);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;

    font: 700 11px/1 var(--def-font);
    letter-spacing: 0.025em;
    cursor: pointer;
}

#custom_table .header-meta > .genre:hover,
#custom_table .header-meta > .autumn-ed:hover,
#custom_table .header-meta > .spirit_nav-wrap:hover {
    background: rgba(48, 31, 19, 0.96);
    transform: translateY(-2px);
}

#custom_table .header-meta .nav_block {
    right: 50%;
    bottom: calc(100% + 9px);
    width: 250px;
    padding: 11px 13px;

    background: rgba(27, 21, 16, 0.96);
    border: 0;
    border-radius: 4px;
    box-shadow: 0 7px 16px rgba(16, 10, 6, 0.28);

    transform: translateX(50%);
}

/* Компактные новости */
#pun-announcement .container {
    padding: 0 10px 21px;
    text-align: center;
}

#pun-announcement .news-list {
    box-sizing: border-box;
    position: relative;
    top: auto;

    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: 920px;
    max-width: 100%;
    min-height: 32px;
    margin: 0 auto;
    padding: 2px 0 4px;

    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;

    background: transparent;
    border: 0;
    box-shadow: none;
}

#pun-announcement .news-list::-webkit-scrollbar {
    display: none;
}

#pun-announcement a.news-btn,
#pun-announcement a.news-btn:link,
#pun-announcement a.news-btn:visited {
    box-sizing: border-box;
    position: relative;

    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;

    width: auto;
    height: 25px;
    margin: 0;
    padding: 0 10px;

    color: var(--pun-light);
    background: var(--pun-dark);
    border: 0;
    border-radius: 3px;
    box-shadow: none;

    text-decoration: none;
    transform: none;
    transition: background 0.18s ease, transform 0.18s ease;
}

#pun-announcement .news-date {
    margin-right: 7px;
    color: var(--acc-color);
    font: italic 700 11px/1 var(--cursivef);
    white-space: nowrap;
}

#pun-announcement .news-title {
    color: var(--pun-light);
    font: 650 9px/1 var(--def-font);
    letter-spacing: 0.02em;
    text-transform: lowercase;
    white-space: nowrap;
}

#pun-announcement a.news-btn:hover {
    color: var(--pun-light);
    background: var(--pun-dark-soft);
    transform: translateY(-2px);
    filter: none;
}

/* Крест отмечает свежую новость */
#pun-announcement a.news-btn.news-hot,
#pun-announcement a.news-btn.news-hot:link,
#pun-announcement a.news-btn.news-hot:visited {
    padding-left: 28px;
}

#pun-announcement a.news-btn.news-hot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 9px;

    width: 8px;
    height: 8px;
    background: var(--acc-color);

    clip-path: polygon(
        18% 0,
        50% 32%,
        82% 0,
        100% 18%,
        68% 50%,
        100% 82%,
        82% 100%,
        50% 68%,
        18% 100%,
        0 82%,
        32% 50%,
        0 18%
    );

    transform: translateY(-50%) rotate(6deg);
    pointer-events: none;
}

#pun-announcement a.news-old {
    background: #5f5a3d;
    opacity: 0.68;
}

#pun-announcement a.news-old:hover {
    opacity: 1;
}

/* Статус (Добро пожаловать) */
#pun-status .container {
    margin-top: 0;
    padding-bottom: 14px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 8px 30px;
}

#pun-status .container > .item1,
#pun-status .container > .item2,
#pun-status .container > .item3,
#pun-status .container > .item4 {
    flex: 0 1 auto;
    text-align: center;
}

#pun-status .container > .item1 { order: 1; }
#pun-status .container > .item2 { order: 2; }
#pun-status .container > .item3 { order: 3; }
#pun-status .container > .item4 { order: 4; }

#pun-status span {
    white-space: nowrap;
    margin-right: 5px;
    font: 11px / 1 var(--def-font);
    text-transform: lowercase;
}


/*хлебные крошки */

#pun-crumbs1, #pun-crumbs2 {
margin-top: 0;
    overflow: hidden;
    text-align: center;
    font: 400 14px / 1 var(--sec-font);
    text-transform: lowercase;
}

#pun-crumbs2 {
    margin-top: 10px;
}

#pun-crumbs1 p.container {
	padding: 1em 1em 0.8em 1em;
	border-top: none;
}

#pun-crumbs1 .crumbs a:last-of-type,
#pun-crumbs2 .crumbs a:last-of-type {
color: var(--small-color);
}

#pun-crumbs1 .crumbs em,
#pun-crumbs2 .crumbs em {
    font-style: normal;
    font-size: 0;
}

#pun-crumbs1 .crumbs em::before,
#pun-crumbs2 .crumbs em::before {
    content: '\f54c';
    font-size: 12px;
    font-weight: 600;
    padding: 0 9px 0 4px;
    color: var(--pun-muted);
    font-family: 'Font Awesome 6 Pro';
}

#pun-crumbs1 .crumbs em:first-of-type,
#pun-crumbs2 .crumbs em:first-of-type {
    display: none;
}

/* Копирайт майбб */
#pun-about {
    margin: 0 !important;
    padding: 0 0 8px !important;
}

#pun-about .container {
    margin: 0 !important;
    padding: 5px 10px !important;
    text-align: center;
    font: var(--def-font);
    font-size: 10px;
    line-height: 1.15;
    text-transform: lowercase;
}

#pun-about p {
    margin: 1px 0 !important;
    padding: 0 !important;
    line-height: 1.15;
}

/* ОБЩИЕ ПРАВИЛА ТАБЛИЦ */

table {table-layout: fixed; width: 100%;}
#respect {width: auto;}

.tcl {width: 65%;}
.tc2, .tc3, .tcmod {text-align: center; width: 10%;}
.tcr {width: 40%;}

.punbb .main :is(.tc2, .tc3, .tcmod) {
    background-color: var(--bg-body);
    color: var(--text-main);
}
.punbb .main .tcr a {
    font-weight: 600;}

td {padding: 8px 10px;}
th {padding: 4px 10px;}
tbody.hasicon td.tcl {padding-left: 40px;}

#pun-debug table .tcl {width: 15%; white-space: normal;}
#pun-debug .tcr {width: 90%; white-space: normal;}

#pun-searchtopics .tcl,
#pun-modviewforum .tcl {width: 40%;}
#pun-searchtopics .tc2 {text-align: left; width: 20%;}

/* Личные сообщения */
#profile.messages-container tbody .pmtcl1 {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    max-width: none;
}

#profile.messages-container tbody .pmtc22 {
    flex: 0 0 180px;
    width: 180px;
    min-width: 180px;
    max-width: 180px;
    justify-content: flex-start;
    text-align: left;
    gap: 6px;
    white-space: nowrap;
}

#profile.messages-container tbody .pmtc33 {
    flex: 0 0 90px;
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    justify-content: center;
    white-space: nowrap;
}

#profile.messages-container tbody .pmtc24 {
    flex: 0 0 26px;
    width: 26px;
    min-width: 26px;
    max-width: 26px;
    padding: 8px 0;
    justify-content: center;
}

/* ============================================= */
/* СПИСКИ ТЕМ И СООБЩЕНИЙ */
/* ============================================= */
:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum,
    #profile.messages-container) thead {
    display: none;
}

/* Строка */
:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum,
    #profile.messages-container) tbody tr {
    display: flex;
    align-items: stretch;
    width: 100%;
    gap: 35px;
    font: 14px / 1 var(--sec-font);
    padding: 4px 12px;
    box-sizing: border-box;
    border-bottom: 1px solid rgba(94, 72, 51, 0.16);
    transition: background-color 0.16s ease;
}

:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum,
    #profile.messages-container) tbody tr:hover {
    background: rgba(252, 250, 246, 0.78);
}

/* Базовые свойства всех ячеек */
:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum,
    #profile.messages-container) tbody td {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-width: 0;
    padding: 7px 0;
}

/* --- Колонка темы: фикс. ширина, растёт в высоту --- */
:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum,
    #profile.messages-container) tbody td.tcl {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding-left: 0;
    text-transform: lowercase;
    align-items: flex-start;
}

:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum,
    #profile.messages-container) tbody td.tcl .intd {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-width: 0;
}

:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum,
    #profile.messages-container) tbody td.tcl .icon {
    flex: 0 0 auto;
    margin-top: 2px;
}

:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum,
    #profile.messages-container) tbody td.tcl .tclcon {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 6px;
    row-gap: 5px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
}

:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum,
    #profile.messages-container) tbody td.tcl .tclcon > a {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum,
    #profile.messages-container) tbody td.tcl .tclcon .byuser {
    flex: 1 1 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Числовые/служебные колонки: по контенту --- */
:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum)
tbody :is(.tc2, .tc3, .tcmod) {
    flex: 0 0 60px;
    width: 60px;
    min-width: 60px;
    max-width: 60px;
    padding: 8px 0;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

/* --- Последнее сообщение: забирает остаток --- */
:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum, #profile.messages-container) tbody .tcr {
    display: flex;
    flex-wrap: wrap;
    width: 230px;
    max-width: 240px;
    min-width: 0;
    margin-left: 0;
    justify-content: flex-end;
    align-items: center;
    column-gap: 6px;
    row-gap: 5px;
    text-transform: lowercase;
    text-align: right;
}

:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum, #profile.messages-container) tbody .tcr em.user-avatar {
    flex: 0 0 auto;
}

:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum, #profile.messages-container) tbody .tcr > a {
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum, #profile.messages-container) tbody .tcr .byuser {
    flex: 1 1 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum, #profile.messages-container) tbody .tcr .byuser::before,
:is(#pun-viewforum, #pun-searchtopics, #pun-modviewforum, #profile.messages-container) tbody td.tcl .tclcon .byuser::before {
    content: "автор:";
    color: var(--text-soft);
}

/* Окно загрузки картинок в ЛС: возвращаем родную табличную раскладку */
#profile.messages-container tbody tr:has([id^="imageupload"]) {
    display: revert;
    width: auto;
    gap: 0;
    padding-bottom: 0;
}

#profile.messages-container [id^="imageupload"],
#profile.messages-container [id^="imageupload"] tr,
#profile.messages-container [id^="imageupload"] td {
    display: revert;
    align-items: initial;
    min-width: 0;
    padding: revert;
}

/* ============================================= */
/* ГЛАВНАЯ СТРАНИЦА */
/* ============================================= */

/* Боковые изображения категорий.
  350 x 700 px. */
#pun-index .category {
    box-sizing: border-box;
    position: relative;

    min-height: 210px;
    margin: 34px 0 25px !important;

    background: var(--pun-soft);
    border: 1px solid rgba(94, 72, 51, 0.16);
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(35, 27, 20, 0.10);
}

/*** КАРТИНКИ КАТЕГОРИЙ ***/

#pun-index #pun-category1 {
    --category-picture: url("https://upforme.ru/uploads/001c/c0/46/2/933799.png");
}

#pun-index #pun-category2 {
    --category-picture: url("https://upforme.ru/uploads/001c/c0/46/2/251653.png");
}

#pun-index #pun-category3 {
    --category-picture: url("https://upforme.ru/uploads/001c/c0/46/2/558635.png");
}

#pun-index #pun-category4 {
    --category-picture: url("https://upforme.ru/uploads/001c/c0/46/2/313044.png");
}

#pun-index #pun-category5 {
    --category-picture: url("https://upforme.ru/uploads/001c/c0/46/2/483333.png");
}

#pun-index #pun-category6 {
    --category-picture: url("https://upforme.ru/uploads/001c/c0/46/2/305581.png");
}

#pun-index #pun-category7 {
    --category-picture: url("https://upforme.ru/uploads/001c/c0/46/2/958118.png");
}

#pun-index #pun-category8 {
    --category-picture: url("https://upforme.ru/uploads/001c/c0/46/2/918949.png");
}

#pun-index .category::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;

    width: 175px;

    background-image: var(--category-picture);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    filter:
        sepia(0.18)
        saturate(0.72)
        contrast(0.96)
        brightness(0.86);

    pointer-events: none;
}

/* Нечётные категории: изображение справа */
#pun-index #pun-category1::after,
#pun-index #pun-category3::after,
#pun-index #pun-category5::after,
#pun-index #pun-category7::after {
    right: 0;
    left: auto;
}

/* Чётные категории: изображение слева */
#pun-index #pun-category2::after,
#pun-index #pun-category4::after,
#pun-index #pun-category6::after,
#pun-index #pun-category8::after {
    right: auto;
    left: 0;
}

#pun-index .category > h2,
#pun-index .category > .container {
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    max-width: none !important;
}

/*** НАЗВАНИЯ КАТЕГОРИЙ ***/
#pun-index .category > h2 {
    display: none !important;
}

#pun-index #pun-category1 > h2,
#pun-index #pun-category1 > .container,
#pun-index #pun-category3 > h2,
#pun-index #pun-category3 > .container,
#pun-index #pun-category5 > h2,
#pun-index #pun-category5 > .container,
#pun-index #pun-category7 > h2,
#pun-index #pun-category7 > .container {
    width: calc(100% - 175px) !important;
    margin-right: 175px !important;
    margin-left: 0 !important;
}

#pun-index #pun-category2 > h2,
#pun-index #pun-category2 > .container,
#pun-index #pun-category4 > h2,
#pun-index #pun-category4 > .container,
#pun-index #pun-category6 > h2,
#pun-index #pun-category6 > .container,
#pun-index #pun-category8 > h2,
#pun-index #pun-category8 > .container {
    width: calc(100% - 175px) !important;
    margin-right: 0 !important;
    margin-left: 175px !important;
}

#pun-index td.tcr {
    align-items: center;
    padding: 0 !important;
    font: 14px 'Jost';
    text-transform: lowercase;
    text-align: left;
    padding-left: 20px !important;
}
#pun-index tbody.hasicon td.tcl {
    padding-left: 0px;
    color: var(--text-soft);
    position: relative;
}
#pun-index .tclcon {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    position: relative;
    font: 600 11.5px / 1 var(--def-font);
    text-transform: lowercase;
    color: var(--text-main);
}

#pun-index .tcl h3 {
    font: 900 22px / 1 var(--def-font);
    margin-bottom: 3px;
    text-transform: uppercase;
    position: relative;
}
#pun-index .tcl h3 a {color: var(--text-main) !important;}
#pun-index .category tr {
    margin: 0px 0px 0px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
         "tcl"
        "tcr";
    height: auto;
    padding: 13px 28px 16px 34px;
    border-bottom: 1px solid rgba(94, 72, 51, 0.16);
}

#pun-index .category tr:last-child {
    border-bottom: 0;
}

#pun-index .category tr .tcl {grid-area: tcl;}
#pun-index .category .tcl,
#pun-index .category .tcr {
    width: 100% !important;
    position: static;
    left: auto;
}
#pun-index .category tr .tcr {
    grid-area: tcr;
    display: flex;
    align-items: center;
    padding: 0 !important;
    font: 13px / 1 var(--def-font);
    text-transform: uppercase;
    text-align: left;
}
#pun-index .category tr .tcr a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
}
#pun-index .isub .tcl {padding-left: 0 !important;}
#pun-searchtopics .tcl,
#pun-modviewforum .tcl {width: 40%;}


/***   РАЗДЕЛИТЕЛЬ МЕЖДУ НАЗВАНИЕМ ТЕМЫ И ДАТОЙ НА ГЛАВНОЙ   ***/
#pun-index .category tr .tcr .datetime::before {
    content: "#";
    font: 700 12px / 1 var(--def-font);
    margin: 0 5px;
}


/*** ЦВЕТ ПОДФОРУМОВ С НОВЫМИ СОО ***/


#pun-index .category tr.inew {
    background: var(--acc-soft);
}

#pun-index .category tr.inew:last-child {
    border-radius: 0;
}

/*** КРЕСТИК У НОВЫХ ПОДФОРУМОВ ***/
#pun-index .category tr.inew .tcl h3 > a::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 9px;
    background: var(--acc-color);
    clip-path: polygon(
        18% 0,
        50% 32%,
        82% 0,
        100% 18%,
        68% 50%,
        100% 82%,
        82% 100%,
        50% 68%,
        18% 100%,
        0 82%,
        32% 50%,
        0 18%
    );
    vertical-align: 1px;
    transform: rotate(6deg);
    pointer-events: none;
    animation: new-forum-cross 2.2s ease-in-out infinite;
}

@keyframes new-forum-cross {
    0%,
    100% {
        opacity: 0.65;
        transform: rotate(6deg) scale(0.9);
    }

    50% {
        opacity: 1;
        transform: rotate(6deg) scale(1);
    }
}

/* Минималистичные ссылки в описаниях форумов */
#pun-index .podlink-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 9px;

    margin-top: 9px;
    padding: 0;
}

#pun-index a.podlink,
#pun-index a.podlink:link,
#pun-index a.podlink:visited {
    position: relative;
    display: inline-block;

    margin: 0;
    padding: 1px 0;

    color: rgba(38, 32, 26, 0.76);
    background: transparent;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;

    font: 650 9px/1.2 var(--def-font);
    letter-spacing: 0.025em;
    text-transform: lowercase;
    white-space: nowrap;
    text-decoration: none;

    transform: none;
    transition: color 0.16s ease, border-color 0.16s ease;
}

#pun-index a.podlink::before,
#pun-index a.podlink::after {
    content: none;
    display: none;
}

#pun-index a.podlink + a.podlink {
    margin-left: 5px;
    padding-left: 13px;
}

#pun-index a.podlink + a.podlink::before {
    content: "";
    display: block;

    position: absolute;
    top: 50%;
    left: 0;

    width: 6px;
    height: 6px;
    background: var(--acc-color);

    clip-path: polygon(
        18% 0,
        50% 32%,
        82% 0,
        100% 18%,
        68% 50%,
        100% 82%,
        82% 100%,
        50% 68%,
        18% 100%,
        0 82%,
        32% 50%,
        0 18%
    );

    opacity: 0.72;
    transform: translateY(-50%) rotate(6deg);
}

#pun-index a.podlink:hover {
    color: var(--acc-deep);
    border-bottom-color: rgba(225, 130, 29, 0.65);
}


/*** ПРОСМОТР ПРОФИЛЯ ***/
#viewprofile table {
    width: 100%;
    border-collapse: collapse;
}

#viewprofile tbody {
    display: block;
    width: 100%;
}

#viewprofile tr {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
}

#viewprofile td {
    display: block;
    padding: 0;
    vertical-align: top;
}

#viewprofile #profile-left {
    flex: 0 0 255px;
}

#profile-left strong {
    font-weight: inherit!important;
}

#viewprofile #profile-right {
display: flex !important;
    flex-wrap: wrap;
    flex: 1;
    gap: 12px;
    width: auto !important;
    padding: 20px !important;
    box-sizing: border-box;
    justify-content: center;
    text-transform: lowercase;
    font: 11px var(--def-font);
}

#viewprofile #profile-right .pa-fld5 {
    position: static;
    left: auto;
    bottom: auto;
    width: auto;
    height: auto;
    z-index: auto;
}

/* Левая колонка */
#viewprofile #profile-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    padding: 12px !important;
    background: var(--pun-soft);
    border-radius: 5px;
    text-align: center;
    text-transform: lowercase;
    font-family: var(--def-font);
    color: var(--text-main) !important;
    border: 1px solid rgba(94, 72, 51, 0.16);
    box-shadow: 3px 3px 4px rgba(43, 33, 25, 0.05);
}


/* Имя */
#viewprofile #profile-name {
    width: 100%;
}

#viewprofile #profile-name strong {
    font: 700 16px / 18px var(--def-font);
    color: var(--text-main);
}

/* Личное звание */
#viewprofile #pa-fld1 {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    font: 400 12px "Jost";
    color: var(--text-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#viewprofile #pa-fld1 strong {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

#viewprofile #pa-fld1 > span {
    display: none;
}

#viewprofile #pa-fld1 .char-name,
#viewprofile #pa-fld1 .char-race,
#viewprofile #pa-fld1 .char-desc {
    width: 100%;
    text-align: center;
padding: 0px 10px 0 10px;
}

#viewprofile #pa-fld1 .char-divider {
    margin: 0 auto 8px auto;
    background-repeat: no-repeat;
}

#viewprofile #profile-title {
font: 500 10px / 1 Jost;
color: var(--text-soft);
    letter-spacing: 0.3px;
text-transform: lowercase;}

/* Аватар */
#viewprofile #pa-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0;
}

#viewprofile #pa-avatar img {
    display: block;
    max-width: 180px;
    max-height: 180px;
    width: auto;
    height: auto;
    border-radius: 5px;
}

/* скрыть название локации */
#viewprofile #profile-left #pa-fld3 > span {
    display: none;
}

/*** ЛОКАЦИЯ В ЛЕВОЙ КОЛОНКЕ ПРОСМОТРА ПРОФИЛЯ ***/
#viewprofile #profile-left #pa-fld3 {
    background: var(--pun-light);
    border: 1px solid var(--line-color);
    width: max-content;
    border-radius: 10px;
    padding: 4px 10px 4px 7px;
    font: 500 11px / 1 Jost;
    margin: 0 auto;
}

#viewprofile #profile-left #pa-fld3::before {
    content: "\f3c5";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    margin-right: 4px;
    color: var(--acc-deep);
}

#viewprofile #profile-left #pa-fld3 > span {
    display: none;
}

/*** ИНДИКАТОР ОНЛАЙНА В ПРОСМОТРЕ ПРОФИЛЯ ***/
#viewprofile #profile-left {
    position: relative; 
    overflow: visible;
}

#viewprofile #profile-left > div.status-container {
    position: absolute !important;
    width: 16px !important;
    height: 16px !important;
    top: -6px;
    right: auto;
    left: -6px;
    text-align: center;
    z-index: 20;
}

#viewprofile #profile-left .status-container {
    position: absolute !important;
    top: 8px;
    right: 8px;
    left: auto;
    width: 14px;
    height: 14px;
    z-index: 20;
}

#viewprofile #profile-left .status-container::after {
    font-size: 13px;
}

#viewprofile #pa-online,
#viewprofile #pa-last-visit {
    display: none;
}

/* СКРЫТЬ НАЗВАНИЯ ПОЛЕЙ ЛЗ */
.pa-fld1 .fld-name {display: none;}
.pa-fld3 .fld-name {display: none;}
.pa-fld4 .fld-name {display: none;}

#profile8 .fs-box {
    display: flex;
    flex-direction: column;
}

#profile8 .infofield {
    order: -1;
    margin-bottom: -4px; 
    font: 500 14px 'Jost';
}


/* Все остальные блоки слева */
#viewprofile #profile-left > div,
#viewprofile #profile-left > dl,
#viewprofile #profile-left > ul,
#viewprofile #profile-left > p {
    width: 100%;
    text-align: center;
}

#viewprofile li#pa-invites { display: none!important; }

/* Правая колонка */
#viewprofile #profile-right > li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 1 180px;
    min-width: 180px;
    min-height: 50px;
    position: relative;
    padding: 10px !important;
    gap: 4px;
    background: var(--pun-soft);
    border: 1px solid rgba(94, 72, 51, 0.14);
    border-radius: 5px;
    text-align: center;
}

#viewprofile #profile-right li>span {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 171px;
    height: 23px;
    padding: 0 20px;
    margin: 0;
    border-radius: 0 0 7px 7px;
    background: rgba(252, 250, 246, 0.78);
    font: 500 12px var(--sec-font);
    text-transform: lowercase;
}

#profile-right li strong {
padding-top: 13px;
    padding-left: 0 !important;
    font-weight: 600;
    font-size: 12px;
}

/* Перенос кнопки редактировать */
#viewprofile #profile-right #profile-edit-wrap {
    flex: 0 0 100%;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

#viewprofile #profile-right #profile-edit-wrap a {
    display: inline-block;
    padding: 4px 10px 6px 10px;
    background: var(--pun-dark);
    color: var(--pun-light);
    font: 600 11px / 1 var(--def-font);
    text-transform: lowercase;
    border-radius: 4px;
    transition: all .2s ease;
}

#viewprofile #profile-right #profile-edit-wrap a:hover {
    background: var(--acc-color);
    color: var(--pun-dark);
}

/* ================== */

/* Модераторы категории */
.category td .modlist {
display: block;
padding-top: 5px;
}

/* Статистика */
#pun-stats {
    box-sizing: border-box;
    width: 900px;
    max-width: 100%;
    margin: 18px auto 0;
    padding: 10px 0 0;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(49, 38, 29, 0.22) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#pun-stats > h2 {
    display: none !important;
}

#pun-stats .container {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#pun-stats .container > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#pun-stats .statsinfo {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0 !important;
    margin: 0;
    padding: 0 0 9px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#pun-stats .statsinfo li {
    position: relative;
    float: none !important;
    clear: none !important;
    margin: 0 !important;
    padding: 1px 16px !important;
    color: rgba(40, 33, 27, 0.72) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font: 650 10px/1.2 var(--def-font) !important;
    text-align: center;
    text-transform: lowercase;
    white-space: nowrap;
}

#pun-stats .statsinfo li strong {
    color: var(--acc-deep) !important;
    font-weight: 800 !important;
}

#pun-stats .statsinfo li + li::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: -3px;
    width: 7px;
    height: 7px;
    background: var(--acc-color);
    clip-path: polygon(
        18% 0,
        50% 32%,
        82% 0,
        100% 18%,
        68% 50%,
        100% 82%,
        82% 100%,
        50% 68%,
        18% 100%,
        0 82%,
        32% 50%,
        0 18%
    );
    opacity: 0.72;
    transform: translateY(-50%) rotate(6deg);
    pointer-events: none;
}

#pun-stats .onlinebox {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 4px !important;
    margin: 0;
    padding: 8px 16px 0;
    color: rgba(43, 36, 30, 0.68) !important;
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid rgba(49, 38, 29, 0.12) !important;
    border-radius: 0 !important;
    font: 600 10px/1.3 var(--def-font) !important;
    text-align: center !important;
    text-transform: lowercase;
}

#pun-stats .onlinelist,
#pun-stats .users_24h,
#pun-stats li#onlinelist {
    float: none !important;
    clear: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

#pun-stats li#onlinelist div {
    padding: 2px 0 0 !important;
}

#pun-stats .onlinebox a,
#pun-stats .onlinebox a:link,
#pun-stats .onlinebox a:visited {
    color: var(--text-main) !important;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.16s ease;
}

#pun-stats .onlinebox a.group1 {
    color: var(--acc-deep) !important;
}

#pun-stats .onlinebox a:hover {
    color: var(--acc-color) !important;
}

#statistic-other span {
    display: none !important;
}

/* ================== */

/* Пагинация (Переключаемые страницы, Новая тема + Опрос, Подписка) */
.multipage {margin-top: 30px;}

.linkst,
.linksb {
    font-family: var(--def-font);
    text-transform: lowercase;
}

.linkst .pagelink strong,
.linkst .postlink strong,
.linksb .pagelink strong,
.linksb .postlink strong {
background: var(--pun-light);
    padding: 0px 5px;
    border-radius: 3px;
    font: 600 12px / 1 var(--sec-font);
}

.linkst {
    position: relative;
    height: 0;
    padding-bottom: 10px;
}

.linkst .pagelink,
.linkst .postlink {
    position: absolute;
    top: -50px;
}

.linkst .pagelink { left: 10px; }
.linkst .postlink { right: 10px; text-align: right; }

.linksb {
    text-align: right;
    padding: 4px 10px;
}

.linksb .pagelink {
    float: left;
    text-align: left;
}

.linksb .postlink {
    float: right;
}

.subscribelink {
    clear: both;
    padding: 5px 0;
}

/* Модераторское меню, RSS, Atom */
.modmenu .container {padding: 5px 10px;text-align: right;}
.modmenu .container strong {float: left;}
.modmenu input {margin-left: 10px;}

.punbb input, .punbb select {
    color: var(--text-main);
    background-color: var(--pun-light);
    padding: 3px 10px 3px 10px;
    border: 1px solid rgba(94, 72, 51, 0.18);
    border-radius: 5px;
    display: inline-block;
}

/* ================== */

/* Страница топика */
.post {margin-top: 10px;}

.post {
    position: relative;
    z-index: 0;
}

.toppost, .topicpost {margin-top: 0;}

.post .container {}
.post h3 {}
.post h3 span {
padding: 5px 10px;
    display: block;
    margin-left: 253px;
    color: var(--text-main);
    background-color: var(--pun-soft);
    font: 800 13px / 1 var(--def-font);
    text-transform: uppercase;
    border-radius: 5px;
}
.post h3 strong {
    float: right;
    text-align: right;
    font: 600 21px / 1 var(--cursivef);
    color: var(--text-main);
    margin: -1px 0 0px 0;
}

/***  ПРОФИЛЬ  ***/
.post-author {
    float: left;
    width: 200px;
    font-size: 10px;
    margin: 0 0 50px 33px; 
    font-family: verdana;
    position: relative;
    border-radius: 10px;
    text-align: center;
    z-index: 1;
}


.post-author ul::before {
    z-index: 5;
    background: var(--pun-soft);
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    inset: 0;
    border-radius: 8px;
}

.post-author ul {
    z-index: 10;
    background-color: var(--pun-soft);
    position: relative;
    border-radius: 8px;
}

.post-author ul li:is(:not(.pa-fld4)):not(.pa-fld6) {
    position: relative;
    z-index: 10;
}


/***   НИК АВТОРА ***/
.pa-author {
    position: absolute !important;
    top: -38px;
    left: 44px;
    width: 100px;
    height: 34px;
    display: flex;
    align-items: center;
    text-transform: lowercase;
    justify-content: flex-start;
    text-align: left;
    font: 800 17px / 18px var(--def-font);}

.pa-title {
    text-transform: lowercase;
    margin-top: 7px;
    padding: 7px;
    color: var(--text-soft);
    background-color: var(--pun-soft);
    letter-spacing: 0.3px;
    font: 500 11px / 1 Jost;
border-radius: 8px 8px 0 0;}

li.pa-avatar item2 {
background-color: var(--pun-soft);
}

/***   ПОЛЯ ПРОФИЛЯ В РЯД ***/
.pstats {
display: flex;
    gap: 2px;
    padding: 10px 0;
    justify-content: center;
    align-items: center;
    font: 400 9px "Jost";
    text-transform: lowercase;
    color: var(--text-main);
    flex-wrap: nowrap;
    white-space: nowrap;
    word-spacing: -2px;
}


/***   ЛИЧНОЕ ЗВАНИЕ ***/

.pa-fld1 {
    line-height: 110%;
    margin-top: 7px;
text-transform: lowercase;
}

.pa-fld1 .char-name a {
    color: var(--text-main)!important;
}
.pa-fld1 .char-name a:hover {
    color: var(--acc-deep) !important;
}

.char-name {
font: italic 900 15px / 1 var(--cursivef);
    color: var(--text-main);
    text-transform: lowercase;
    margin-bottom: 2px;
}

.char-race {
    text-transform: lowercase;
    color: var(--text-soft);
    margin: 4px 0 7px 0;
    font: 500 10px / 1 var(--sec-font);
}

.char-divider {
    width: 180px;
    height: 1px;
    background: url(https://upforme.ru/uploads/001c/be/8c/2/684010.png);
    margin: 0 auto 8px auto;
}

.char-desc {
   color: var(--text-main);
    padding: 0px 10px 15px 10px;
    font: 400 11px / 1 Jost;
    text-align: justify;
    text-transform: lowercase;
}

.pa-fld1 a {    color: var(--text-main) !important;
    font-weight: 600;}
.pa-fld1 a:hover {color: var(--acc-deep)!important;}

/***   ЛОКАЦИЯ   ***/

.pa-fld3 {
background: var(--pun-light);
    border: 1px solid var(--line-color);
    width: max-content;
    border-radius: 10px;
    padding: 4px 10px 4px 7px;
    font: 500 11px / 1 Jost;
    margin: 0 auto;}

.pa-fld3::before {
content: "\f3c5";
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    margin-right: 4px;
    color: var(--acc-deep);
}

/***   ФОН ПРОФИЛЯ***/

.post-author::before {
    content: '';
    position: absolute;
    left: -28px;
    top: -37px;
    width: 65px;
    height: calc(100% + 50px);
    z-index: -1;
    border-radius: 8px;
    background-image: url('https://upforme.ru/uploads/001c/bd/d1/7/646114.png');
    background-size: cover;
    background-position: center;
}


/***   ЗАКЛАДКА (ФОН ПРОФИЛЯ)   ***/
.pa-fld4 {
    position: absolute;
    left: -28px;
    top: -44px;
    width: 65px;
    height: calc(100% + 82px);   /* нижний край = 100% + 13px от низа .post-author */
    z-index: 0;
    border-radius: 8px;
    background-image: url(https://upforme.ru/uploads/001c/bd/d1/7/646114.png);
    background-size: cover;
    background-position: center;
}

.pa-fld4 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}

.pa-fld4 .perspage1 {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.pa-fld4 .perspage1 a.modal-link {
    display: block;
    width: 100%;
    height: 100%;
}

/***   плашка   ***/

.pa-fld6 {
position: absolute;
    left: 24px;
    bottom: -38px;
    height: 40px;
    width: 175px;
    box-sizing: border-box;
    padding: 10px 10px 4px;
    background-color: #C99746;
    background-size: cover;
    background-position: center;
    border-radius: 0 0 8px 8px;
    text-transform: lowercase;
    color: var(--pun-dark);
    font: 500 11px / 11px var(--sec-font);
    text-align: center;
    z-index: -2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.pa-posts, .pa-respect, .pa-fld2, .pa-fld5 {
    display: inline-flex;
    gap: 5px;
    font-size: 10px;
    padding: 0 5px !important;
    margin-top: 4px !important;
    margin-bottom: 15px;
    width: auto;
    height: auto;
    line-height: 13px;
    text-transform: lowercase;
}

.pa-fld2 a {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-main) !important;
}

.pa-posts .fld-name:before,
.pa-respect .fld-name a:before,
.gid3 .pa-respect .fld-name:before,
.pa-fld2 .fld-name:before, 
.pa-fld5 .fld-name:before {
    font-family: "Font Awesome 6 Pro";
    font-weight: 900;
    display: block;
    width: 10px;
    height: 10px;
    font-size: 10px;
    line-height: 10px;
    margin-top: 1px !important;
    text-align: center;
}

/* сообщения */
.pa-posts .fld-name:before { content: "\f0e0"; } 

/* репутация */
.pa-respect .fld-name a:before,
.gid3 .pa-respect .fld-name:before { content: "\f004"; }

/* банк */
.pa-fld2 .fld-name:before { content: "\f4d3"; } 

.pa-fld5 .fld-name:before { content: "\f56b"; } 


.pa-posts .fld-name,
.pa-respect .fld-name,
.pa-fld2 .fld-name, 
.pa-fld5 .fld-name {
    font-size: 0;
    height: 16px;
    justify-content: center;
    opacity: 0.4;
}



.post-body {margin-left: 245px;}
.post-box {
    min-height: 190px;
    padding: 16px 18px;
    color: var(--text-main);
    background: var(--pun-light);
    border: 1px solid rgba(94, 72, 51, 0.16);
    border-radius: 8px;
    box-sizing: border-box;
    text-align: justify;
}


li.pa-avatar img {
    max-width: 180px;
    max-height: 180px;
    border-radius: 5px;}

.post-links {margin-left: 300px;}

.post-links ul {
    padding: 0 10px 50px 0;
    margin-left: -300px;
    text-align: right;
    text-transform: lowercase;
}

.post-links li {
    display: inline;
    padding-left: 5px;
transition: all .2s ease;
}

.post-links li a {
    display: inline-block;
    border: 1px solid var(--line-color);
    background: var(--pun-soft);
    border-radius: 5px;
    padding: 2px 9px;
    font: 400 12px/1 var(--sec-font);
    letter-spacing: 0.3px;
}
.post-links li a:hover {
    border: 1px solid var(--acc-deep);
    background: var(--pun-light);
    color: var(--acc-deep);
}

.pl-email, .pl-website {float: left;}
.clearer {clear: both; height: 0; font-size: 0;}

textarea#main-reply {
text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%; 
-webkit-text-size-adjust: 100%;
}

.punbb textarea {
    color: var(--text-main);
    background: var(--pun-light);
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid rgba(94, 72, 51, 0.18);
    font: 1em verdana, arial, helvetica, sans-serif;
}


/***   КНОПКИ   ***/
button,
.button,
input[type="button"],
input[type="submit"] {
    background: var(--pun-dark);
    color: var(--pun-light);
    margin: 4px !important;
    padding: 5px 10px;
    font: 400 13px / 1 var(--sec-font);
    text-transform: lowercase;
    cursor: pointer;
    transition: all .2s ease;
    display: inline-flex;
border: none;
    border-radius: 5px;
}

button:hover,
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
  background: var(--acc-color);
  color: var(--pun-dark);
}

button:disabled,
.button:disabled,
input:disabled {
  background: rgb(20 20 20 / .12);
  color: rgb(20 20 20 / .388);
  cursor: not-allowed;
}

button:disabled:hover,
.button:disabled:hover,
input:disabled:hover {
  background: rgb(20 20 20 / .12) !important;
  color: rgb(20 20 20 / .388) !important;
}

/* ================== */

/* Подпись в топике */
.post-sig dt, .post-sig dd, .post-sig dl {margin: 0} 
.post-sig dt {
display: block;
margin: 5px 0;
}

/* Контент поста */
pre {font: 11px monaco;}
.post-content em {font-style: italic}
.post .post-content td {border-width: 0px !important;}
.post-content em.bbuline {font-style: normal; text-decoration: underline;}
.post-content p {
margin: 0;
line-height: 150%;
padding: 8px 0 12px 0;
overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
}

.post-content p a {
font-weight: bold;
    color: var(--acc-deep) !important;
}
.post-content p a:hover {
    color: var(--acc-color)!important;
}

.post-content .highlight-text {
    background-color: #D9C394!important;
}

.post-content img {vertical-align: middle;}
.scrollbox {
width: 100%;
overflow: auto;
max-height: 200px;
}
.quote-box, .code-box {
margin: 10px 0px 10px;
    padding: 13px;
    background: var(--pun-soft);
    border: 1px solid rgba(94, 72, 51, 0.16);
    border-radius: 10px;
}
.quote-box cite {
    display: block;
    text-transform: lowercase;
    padding-bottom: 6px;
    font: 800 15px / 1 var(--def-font);
}

.code-box strong.legend {
    display: block;
    padding-bottom: 13px;
    text-transform: lowercase;
    font: 800 14px / 1 var(--def-font);
}

.code-box pre {
    font: 400 11px / 160% 'courier new';
    white-space: break-spaces;
    color: var(--text-soft);}

blockcode,
blockquote {
  overflow: hidden;
}

.code-box .scrollbox {
  width: 100%;
  overflow: hidden auto;
  height: auto !important;
  max-height: 20vh;
}

/* ================== */

/* Формы */
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {margin: 0 3px;}
p[class="checkfield"] *, div[class="checkfield"] *, fieldset[class="radiofield"] * {height: 20px; vertical-align: middle;}

textarea, input, select, optgroup {font-size: 14px;}
optgroup {font-weight: bold;}

#pun-admain textarea, #pun-admain input, #pun-admain select, #pun-admain optgroup {
    font: 1em verdana, arial, helvetica, sans-serif;
}

.formal .container {padding: 10px 20px;}

.formsubmit {
padding: 0 0 0 15px;
margin: 0px 0 0 0;
}
.formsubmit input, .formsubmit a, .formsubmit span {margin: 0 6px 0 0;}

fieldset {border: none;}
fieldset legend {
font-style: italic;
font-weight: bold
}
fieldset fieldset {
border: none;
margin: 0;
padding: 0 0 8px 0
}
.fs-box {padding: 5px 0;}
.fs-box p, .fs-box fieldset {padding: 0 0 8px 0;}

.inline .inputfield, .inline .selectfield, .inline .passfield {float: left;margin-right: 1em;}
.inline .infofield {clear:both}
.datafield br {display: none}
.required label, .datafield span.input {font-size: 10px;}
textarea, .longinput input {width: 64%; margin: 0;}
.hashelp {position: relative;}

/* ================== */

/* Предпросмотр сообщения */
#pun-post .topic {margin-top: 10px;}

/* ================== */

/* Профиль + ЛС */
#profile .container {padding-left: 0px;}

/* ================== */
/* навигация в профиле */

#profilenav {
display:block;
width:auto;
padding-top: 0px; 
text-align: center; 
}

/***   КНОПКИ-ВКЛАДКИ В ЛС И ПРОФИЛЕ   ***/
#profilenav li {
    margin: auto 2px 6px 2px;
    padding: 2px 5px;
    border-radius: 4px;
    font: 400 12px var(--sec-font);
    background: var(--pun-dark);
    display: inline-flex;
    text-transform: lowercase;
    transition: all .1s ease-in-out;
}

/***   КНОПКИ-ВКЛАДКИ ПРИ НАВЕДЕНИИ   ***/
#profilenav li:hover, #profilenav li:focus, #pun-main li.isactive {
background: var(--acc-color);}

#profilenav li a {
color: var(--pun-light);
}
#profilenav li a:hover {
color: var(--pun-dark);
}

#profilenav li.item9, li.item10 {
display:none;}

#viewprofile-next #profilenav {display: none;}

div#profilenav {
    display: block !important;
}

#viewprofile ul, #profilenav ul {
    margin: 0 0 1em 0;
    padding: 0.3em 1em 0.5em 1em;
    border-style: none;
    border-width: 0px;
    border-color: transparent;
}

#viewprofile ul:last-child, #profilenav ul:last-child {margin-bottom: 0em;}

#viewprofile h2 span, #profilenav h2 span {
position: relative;
padding: 0 5px;
display: none;
}

#viewprofile li, #setmods dl {margin-bottom: 0.2em; padding: 0 0 0 16em;}

label {
    cursor: default;
    font: 500 14px 'Jost';
    text-transform: lowercase;
}



#viewprofile h2, #profilenav h2 {
padding: 0;
margin: 0;
}
img.avatardemo {float: right;margin: 0 0 8px 18px;}



/* ================== */

/* Список пользователей */
#pun-userlist .formal, #pun-userlist .formal .container {margin-bottom: 0;}
#pun-userlist .tc2 {
text-align: left;
width: 20%;
}
#pun-userlist .tcl {width: 40%}

/* ================== */

/* Собщения об ошибках */
.info .container {padding: 5px 10px;}
.info .container .backlink {padding-top: 8px;}

/* ================== */

/* Регистрация */
.info-box {
padding: 10px 15px;
margin: 0 0 10px 0;
}
.info-box * {padding: 0 0 5px 0;}
.info-box .legend {font-weight: bold;}


/* аватар юзера */
#pun-index .user-avatar, .punbb .user-avatar {
    display: none!important;
}

del {
    filter: blur(2px);
    text-decoration: none;
    transition:.10s;
}
del:hover {
    filter: initial;
    transition:.10s;
}


/***   ФОН ДЛЯ ВЫСКАКИВАЮЩИХ ОКОН   ***/
#pun_wrap #post .container[id$="-area"] {
	max-height: 195px;
	overflow: auto;
}

#pun_wrap #post .container[id$="-area"],
#video-area-tinp,
#image-area-tinp,
.pun-modal .modal-inner,
.inner,
#post-sig .container[id$="-area"] {
    color: var(--text-main);
    background: var(--pun-light);
    border: 1px solid rgba(94, 72, 51, 0.18);
    border-radius: 8px;
}

/***   ФИКС ДЛЯ СПОЙЛЕРА - ОТСТУП СТРОК   ***/
.spoiler-box>div[onclick]>p {
	display: inline-block;
	margin: 0 !important;
	padding: 0 !important;
}

.post-content .spoiler-box>div {
background: none !important;
    cursor: pointer;
    padding-left: 32px !important;
    position: relative;
    text-transform: lowercase;
    border-radius: 5px;
    font: 700 14px / 1 var(--def-font);
    color: var(--text-main);
}

.post-content .spoiler-box>div::before {
content: "\f6e2";
    font-family: "Font Awesome 6 Pro";
    font-weight: 600;
    font-size: 16px;
    font-style: normal;
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    transition: transform .25s ease;
    color: var(--acc-deep);
}

.post-content .spoiler-box>div.visible::before {
	transform: translateY(-50%) rotate(180deg);
}

/* выделение текста */
::selection {
    background: rgba(225, 130, 29, 0.28);
    color: var(--pun-dark);
}

/* текст с подсказкой */
.post-content p abbr {
    text-decoration: underline;
    text-decoration-color: var(--acc-deep);
    text-decoration-style: wavy;
    text-decoration-thickness: 0.5px;
    cursor: pointer;
}

/***   ИНДИКАТОР ОНЛАЙНА deff, vandra  ***/
.pa-online, .pa-last-visit {
    display: none;
}

.status-offline::after,
.status-online::after {
position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-family: "Font Awesome 6 Pro" !important;
    font-weight: 900 !important;
    font-size: 12px;
}

.status-offline::after {
    content: '\f4c9';
    color: var(--pun-muted);
}

.status-online::after {
content: '\f4c9';
    color: var(--small-color);
}

/* Контейнеры */
.status-container,
.status-online,
.status-offline {
position: absolute !important;
    top: -2px;
    left: 192px;
    width: 10px;
    height: 10px;
    z-index: 100;
    cursor: pointer;
}

/* БыстроПлюсы для Топика */
.post-rating p a {
display: inline-flex;
    align-items: center;
    gap: 5px;
    font: italic 700 13px / 0 var(--cursivef);
    background: var(--pun-soft);
    border-radius: 5px;
    padding: 3px 7px;
    color: var(--text-soft);
    text-decoration: none;
}

.post-rating p a::before {
content: "";
    width: 18px;
    height: 18px;
    display: inline-block;
    background-color: var(--text-soft);
    -webkit-mask: url(https://forumstatic.ru/files/001c/c4/75/12074.svg) center / contain no-repeat;
    mask: url(https://forumstatic.ru/files/001c/c4/75/12074.svg) center / contain no-repeat;
    transform: rotate(0deg);
    transition: background-color 0.3s ease, transform 0.3s ease-out;
}

.post-rating p:hover a::before {
    background-color: var(--acc-deep);
    animation: swing 0.7s ease-in-out infinite; 
}
.mylike .post-rating p a::before {
    background-color: var(--acc-color);
}

@keyframes swing {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(-15deg); }
    75% { transform: rotate(15deg); }
    100% { transform: rotate(0deg); }
}

/* Комментарии */
div.post-vote {
    margin-bottom: 65px;
}
div.post-vote p>a {
font-size: 0 !important;
    position: absolute;
    cursor: pointer;
    z-index: 200;
    width: 15px;
    height: 15px;
    background-color: var(--text-soft);
    -webkit-mask: url(https://forumstatic.ru/files/001b/bd/50/86006.svg) center / contain no-repeat;
    mask: url(https://forumstatic.ru/files/001b/bd/50/86006.svg) center / contain no-repeat;
    display: block;
    background-size: 100%;
    margin-left: -4px;
    margin-top: 7px;
}

.fonchiki {
    display: grid;
    grid-template-columns: repeat(8, 70px);
    gap: 10px;
    justify-content: center;
    align-content: start;
    padding: 15px;
    box-sizing: border-box;
    line-height: 0; 
    font-size: 0;
}

.fonchiki br {
    display: none !important;
}

.fonchiki img {
    display: block !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;
    object-fit: cover;
    object-position: top;
    border-radius: 8px;
    box-shadow: 2px 2px 4px #0000003b;
    transition: all 0.2s ease-out;}

.fonchiki img:hover {
    filter: none;
    box-shadow: 2px 2px 4px #0000008c;
}

.hvStickerPackModal {
    padding: 12px 13px 9px!important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: solid 1px var(--line-color);
    border-radius: 11px!important;
    background: var(--pun-light)!important;
    position: absolute;
    display: none;
    bottom: 34px!important;
    left: 0;
    z-index: 100;
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
}

.hvStickerPackModalContent {
    border: none!important;
    padding: 9px!important;
    min-height: 70px!important;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-height: 233px!important;
    overflow-x: hidden;
    overflow-y: auto;
}

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

#pun-navlinks.section .multiacc-profilemenu {
  position: absolute;
  top: 20px;
  right: 0px;
  width: max-content;
  height: auto;
  background: var(--pun-light);
  border-radius: 20px;
  border-inline: 1px solid var(--line-color);
  color: var(--text-main);
}

.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: var(--pun-soft);
  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 rgba(94, 72, 51, 0.18);
  top: 0;
}

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

#pun-navlinks.section .multiacc-profilemenu li:hover {
  background: rgba(225, 130, 29, 0.12);
  box-shadow: none;
}

#pun-navlinks.section .multiacc-profilemenu li a {
  color: var(--text-main);
}

#pun-navlinks.section .multiacc-profilemenu li a:hover {
  color: var(--acc-deep);
}


/***   СКРИПТ СМЕНЫ АККАУНТОВ   ***/

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

.multiacc-profilemenu {
  position: absolute;
  z-index: 10000;
}

.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: var(--pun-light) !important;
  border: 1px solid var(--line-color);
  color: var(--text-main);
}

.multiacc-dialog > form {
  border: 1px solid rgba(94, 72, 51, 0.18);
  padding: 10px 10px 2px;
}

.multiacc-dialog input {
  padding: 4px 10px;
  border: 1px solid var(--line-color);
}

.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: var(--pun-soft);
  color: var(--text-main);
  border-inline: 1px solid var(--line-color);
  border-block: 0;
  border-radius: 4px;
  cursor: pointer;
}

.multiacc-dialog button:hover {
  color: var(--pun-dark);
}

/***   СТИЛИ ГАЧИ   ***/

#gacha-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
}

#gacha {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 320px;
  padding: 10px;
  color: var(--text-main);
  background: var(--pun-light);
  border: 1px solid var(--line-color);
  z-index: 9999;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

#gacha-roll {
    background-color: var(--pun-dark);
    color: var(--pun-light);
    font-family: Noto Sans Mono;
    border: none;
    padding: 4px 10px;
    transition: background-color 1s ease-in;
    width: 100%
}

#gacha-roll:hover {
    background-color: var(--acc-color);
    color: var(--pun-dark);
}

#gacha input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 6px;
    padding: 6px 10px;
}

#gacha-result-text {
    margin-bottom: 10px;
    text-align: center;
    font-family: Noto Sans Mono;
    font-size: 16px;
    font-style: italic;
}

#gacha-result-subline {
    font-size: 10px;
    text-align: center;
    margin-bottom: 6px;
}


/* ===== Страница личных сообщений ===== */

#profile.messages-container #plng {
  display: none !important;
}

#profile.messages-container fieldset {
    border-radius: 6px;
    background: var(--pun-soft);
    padding: 12px 16px;
    margin-bottom: 20px;
}

#profile.messages-container fieldset legend {
  padding: 0;
  margin: 0 0 0 10px;
}

#profile.messages-container fieldset legend strong,
#profile.messages-container fieldset legend span {
display: inline-block;
    padding: 2px 11px;
    background: var(--pun-dark);
    border-radius: 4px;
    font: 400 13px "Jost", sans-serif;
    letter-spacing: .08em;
    text-transform: lowercase;
    color: var(--pun-light);
}

/***** Стиль. Вкладки в постах вв-кодами. (done by Kolobdur) *****/

/* Оформление в посту */
.wrapper{
  display: grid;
  grid-template:
                 ". buttop ." auto
                 "butleft windows butright" auto
                 ". butbottom ." auto 
                 / auto 1fr auto;				 
  overflow: hidden;
}

.buttop {grid-area: buttop;}
.butleft {grid-area: butleft;}
.butright {grid-area: butright;}
.butbottom {grid-area: butbottom;}

.buttons {z-index: 2;}

.buttons div {
  padding: 10px 20px;
  transition: background-color .3s;
  color: var(--text-main);
  text-align: center;
  cursor:pointer;
border-radius: 7px;
background: var(--pun-soft);
}

.buttop, .butbottom {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
font: 500 13px var(--def-font);
gap: 6px;
padding-top: 13px;
}

.windows{
  position: relative;
    display: grid;
    grid-area: windows;
    background: transparent;
    color: var(--text-main);
}

.window {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.window.activevkladka {
  position: static; 
}

.window {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  overflow: auto;
  line-height: 1.4em;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.2s, transform 0.2s;
  transition-delay: 0.4s;
    padding: 21px 10px 0 0;
  z-index: 0;
}

.wrapper > br, .wrapper > p, .buttons > br, .buttons > p, .windows > br, .windows > p {
  display: none;
}

.windows > div {
  transition: transform 0.2s;
  transform: translateX(86%);
}
 
.windows > .activevkladka {
  transform: translateY(0px);
  transform: translateX(0%);
  opacity: 1;
  z-index: 1;
}

.buttons div:hover,
.buttons > .activevkladka {
    background: var(--pun-dark) !important;
    color: var(--pun-light) !important;
}

/* Оформление вв-кода */
.icons-vkladka:before {
  content: '\412\043A\043B\0430\0434\043A\0438';
  font-size: 12px;
} 
.icons-vkladka:hover:before{margin-top: -4px;}
.icons-vkladka:hover, .tab-list:hover {
  color: var(--acc-color);
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -webkit-transition: transform 0.2s ease-in-out;
  -moz-transition: transform 0.2s ease-in-out;
  -ms-transition: transform 0.2s ease-in-out;
}
#vkladka-area div {
  cursor: pointer;
  font-weight: normal;
  width: 220px;
  margin-bottom: 10px;
}
#vkladka-area div:hover {overflow: hidden;}
.tab-list:hover {transform-origin: center left;}
#vkladka-area span {display: none;}


/***   ссылка трекера эпизодов   ***/
#episodesOpenBtn {
    color: var(--acc-color) !important;
    padding: 0px 5px;
    border-radius: 4px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;}


/*** СКРИМЕР С УЛЫБКОЙ ***/
#custom_table .genre {
    cursor: pointer;
    user-select: none;
}

#header-scare-layer {
    --face-x: 0px;
    --face-y: 0px;
    --face-angle: -2deg;
    --face-scale: 0.92;
    --rush-scale: 1.28;
    --eye-gap: 70px;
    --blink-duration: 2.45s;
    --smile-width: 350px;
    --smile-angle: -5deg;
    --smile-scale: 1;
    --smile-wide: 1.04;
    --smile-narrow: 0.98;
    --smile-stroke: 11px;
    --smile-top: -5px;

    position: absolute;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    isolation: isolate;
    background: rgba(5, 4, 3, 0.92);
    pointer-events: none;
}

#header-scare-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    background: rgba(225, 130, 29, 0.16);
    pointer-events: none;
}

#header-scare-layer.is-active {
    visibility: visible;
    animation: header-scare-scene 3.4s ease both;
}

#header-scare-layer.is-active[data-afterimage="true"]::after {
    animation: header-scare-afterimage 3.15s ease both;
}

.header-scare-face {
    position: relative;
    top: -2%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform-origin: center;
}

#header-scare-layer.is-active .header-scare-face {
    animation: header-scare-appear 0.45s ease-out both;
}

#header-scare-layer.is-active[data-variant="rush"] .header-scare-face {
    animation: header-scare-rush 3.18s ease-in both;
}

.header-scare-eyes {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--eye-gap);
}

.header-scare-eye {
    --eye-scale-x: 1;
    --eye-delay: 0.35s;
    --blink-min: 0.06;

    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 50%;
    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.95),
        0 0 28px rgba(255, 247, 220, 0.48);
    transform: scaleX(var(--eye-scale-x));
    transform-origin: center;
}

#header-scare-layer.is-active .header-scare-eye {
    animation: header-scare-blink var(--blink-duration) var(--eye-delay) linear both;
}

.header-scare-smile {
    display: block;
    width: var(--smile-width);
    height: 118px;
    margin-top: var(--smile-top);
    overflow: visible;
    transform-origin: center;
}

.header-scare-smile path {
    fill: none;
    stroke: #fff;
    stroke-width: var(--smile-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    filter:
        drop-shadow(0 0 5px rgba(255, 255, 255, 0.95))
        drop-shadow(0 0 16px rgba(255, 245, 215, 0.45));
}

#header-scare-layer.is-active .header-scare-smile {
    animation: header-scare-smile-twitch 2.8s 0.15s ease-in-out both;
}

#header-scare-layer.is-active[data-variant="twitch"] {
    animation:
        header-scare-scene 3.4s ease both,
        header-scare-layer-twitch 0.52s 0.62s ease-in-out 2;
}


@keyframes header-scare-smile-twitch {
    0% {
        opacity: 0;
        transform: rotate(calc(var(--smile-angle) - 2deg)) scaleX(0.55);
    }

    18% {
        opacity: 1;
        transform: rotate(var(--smile-angle)) scaleX(var(--smile-scale));
    }

    48% {
        transform: rotate(var(--smile-angle)) scaleX(var(--smile-scale));
    }

    52% {
        transform: rotate(calc(var(--smile-angle) - 3deg)) scaleX(var(--smile-wide)) translateY(3px);
    }

    57% {
        transform: rotate(calc(var(--smile-angle) + 1deg)) scaleX(var(--smile-narrow));
    }

    76% {
        transform: rotate(calc(var(--smile-angle) + 1deg)) scaleX(var(--smile-narrow));
    }

    80% {
        transform: rotate(calc(var(--smile-angle) - 2deg)) scaleX(var(--smile-wide)) translateY(-2px);
    }

    86%,
    100% {
        opacity: 1;
        transform: rotate(var(--smile-angle)) scaleX(var(--smile-scale));
    }
}

@keyframes header-scare-scene {
    0% {
        opacity: 0;
    }

    10%,
    82% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes header-scare-appear {
    from {
        opacity: 0;
        transform:
            translate(var(--face-x), calc(var(--face-y) + 14px))
            rotate(calc(var(--face-angle) - 4deg))
            scale(0.76);
    }

    to {
        opacity: 1;
        transform:
            translate(var(--face-x), var(--face-y))
            rotate(var(--face-angle))
            scale(var(--face-scale));
    }
}

@keyframes header-scare-rush {
    0% {
        opacity: 0;
        transform:
            translate(var(--face-x), calc(var(--face-y) + 16px))
            rotate(calc(var(--face-angle) - 4deg))
            scale(0.72);
    }

    16%,
    70% {
        opacity: 1;
        transform:
            translate(var(--face-x), var(--face-y))
            rotate(var(--face-angle))
            scale(var(--face-scale));
    }

    76%,
    100% {
        opacity: 1;
        transform:
            translate(var(--face-x), calc(var(--face-y) + 8px))
            rotate(calc(var(--face-angle) + 2deg))
            scale(var(--rush-scale));
    }
}

@keyframes header-scare-blink {
    0%,
    17% {
        transform: scaleX(var(--eye-scale-x)) scaleY(1);
    }

    21% {
        transform: scaleX(var(--eye-scale-x)) scaleY(var(--blink-min));
    }

    25%,
    45% {
        transform: scaleX(var(--eye-scale-x)) scaleY(1);
    }

    49% {
        transform: scaleX(var(--eye-scale-x)) scaleY(var(--blink-min));
    }

    53%,
    72% {
        transform: scaleX(var(--eye-scale-x)) scaleY(1);
    }

    76% {
        transform: scaleX(var(--eye-scale-x)) scaleY(var(--blink-min));
    }

    80%,
    100% {
        transform: scaleX(var(--eye-scale-x)) scaleY(1);
    }
}

@keyframes header-scare-layer-twitch {
    0%,
    100% {
        transform: translate(0, 0) rotate(0);
    }

    25% {
        transform: translate(-5px, 2px) rotate(-0.35deg);
    }

    48% {
        transform: translate(6px, -2px) rotate(0.45deg);
    }

    72% {
        transform: translate(-3px, -1px) rotate(-0.2deg);
    }
}

@keyframes header-scare-afterimage {
    0%,
    69% {
        opacity: 0;
    }

    72% {
        opacity: 0.2;
    }

    76% {
        opacity: 0;
    }

    80% {
        opacity: 0.11;
    }

    84%,
    100% {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #header-scare-layer.is-active,
    #header-scare-layer.is-active[data-variant="twitch"] {
        animation: header-scare-scene 2.2s ease both;
    }

    #header-scare-layer.is-active .header-scare-face,
    #header-scare-layer.is-active[data-variant="rush"] .header-scare-face,
    #header-scare-layer.is-active .header-scare-eye,
    #header-scare-layer.is-active .header-scare-smile,
    #header-scare-layer.is-active[data-afterimage="true"]::after {
        animation: none;
    }

    #header-scare-layer.is-active .header-scare-face {
        opacity: 1;
        transform:
            translate(var(--face-x), var(--face-y))
            rotate(var(--face-angle))
            scale(var(--face-scale));
    }
}



/*** СТРАНИЦА ПЕРЕАДРЕСАЦИИ ***/

html,
body {
    background:
        var(--pun-main)
        url("https://upforme.ru/uploads/001c/c0/46/2/750027.png")
        center top / cover no-repeat fixed !important;
}

#pun-redirect,
#pun-maint {
    box-sizing: border-box;
    float: none !important;

    width: 970px !important;
    margin: 120px auto !important;
    padding: 25px !important;

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

    border: 0;
    border-radius: 20px;
    box-shadow: none;
}

#pun-redirect .main,
#pun-redirect .container,
#pun-maint .main,
#pun-maint .container {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}




/*** ССЫЛКИ В ТЕКСТЕ ПОСТОВ ***/

.post-content :is(p, li, blockquote, dd) a:not(.button) {
    display: inline;
    padding: 0 2px;

    color: var(--acc-deep) !important;
    font-weight: 700;
    text-decoration: none;

    border-bottom: 1px solid rgba(225, 130, 29, 0.65);
    box-shadow: inset 0 -0.42em 0 rgba(225, 130, 29, 0.18);

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

.post-content :is(p, li, blockquote, dd) a:not(.button):hover {
    color: var(--pun-dark) !important;
    border-bottom-color: var(--acc-color);
    box-shadow: inset 0 -1.45em 0 var(--acc-color);
}

.post-content :is(p, li, blockquote, dd) a:not(.button):focus-visible {
    color: var(--pun-dark) !important;
    outline: 1px solid var(--acc-color);
    outline-offset: 2px;
    box-shadow: inset 0 -1.45em 0 var(--acc-color);
}

.post-content a:has(img) {
    padding: 0;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}