/**************************************************************
* GENERAL
* design template by max, the murderer!
**************************************************************/

@charset "windows-1251";
@import url('style_cs.1786207296.css');

/* Import
-------------------------------------------------------------*/

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

/* Design Fonts */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200..900&display=swap');

/* Variables */
:root, .light {
    --dark900: 12 12 12;
    --dark900c: 12 12 12;
    --light100c: 230 230 230;
    --light100: 230 230 230;
    --text900: 25 25 25;
    --primary400: 124 109 148;
    --secondary400: 51 51 51;
    --success: 52 199 89;
    --warning: 255 204 0;
    --danger: 236 34 31;
    --font: 'Unbounded', verdana, tahoma, arial, helvetica, sans-serif;
    --fa: 'Font Awesome 6 Pro';
    --header-bg: url('/files/001c/56/22/62451.jpg') no-repeat top center;
    --profileWidth: calc(180px + calc(var(--16) * 2));
    --punWidth: 1080px;
    --coeffMobile: calc(2vw + 0.5vh);
    --80: calc(var(--16) * 5);
    --64: calc(var(--16) * 4);
    --48: calc(var(--16) * 3);
    --32: calc(var(--16) * 2);
    --24: calc(var(--16) * 1.5);
    --20: calc(var(--16) * 1.25);
    --16: 16px;
    --12: calc(var(--16) / 1.33);
    --8: calc(var(--16) / 2);
    --6: calc(var(--16) / 2.66);
    --4: calc(var(--16) / 4);
    --2: calc(var(--16) / 8);
}

.medium {
    --light100c: 215 215 215;
    --light100: 215 215 215;
    --secondary400: 166 159 175;
}

.dark {
    --light100c: 190 190 190;
    --dark900: 190 190 190;
    --text900: 190 190 190;
    --light100: 29 26 22;
    --secondary400: 76 73 80;
    --success: 77 137 92;
    --warning: 181 158 64;
    --danger: 162 64 63;
}


/* General
-------------------------------------------------------------*/

* {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    box-sizing: border-box;
}

html {
    padding: var(--32) 0 0;
    font: normal 75%/140% verdana, tahoma, arial, helvetica, sans-serif;
    background-color: rgb(var(--secondary400)) !important;
    background-image: url('https://forumstatic.ru/files/001c/0a/b2/44527.jpg') !important;
    background-repeat: no-repeat !important; /* Узор бесконечно размножается по всему экрану */
    background-position: center !important;
    background-attachment: fixed !important; /* Фон застывает и красиво не движется при скролле */
    background-size: 3000px auto !important; /* Настройте размер узора, чтобы он не был слишком крупным */
    
    color: rgb(var(--text900));
}


#pun {
    width: var(--punWidth);
    margin: 0 auto;
}

.punbb {
    padding: var(--32);
    border-radius: 4rem;
    background: rgb(var(--light100));
    position: relative;
}

.punbb .container {
    padding: 1.4em 0;
}

.punbb .container::after,
#viewprofile-next::after,
.post-body::after,
.linkst::after {
    clear: both;
    content: '';
    display: block;
    visibility: hidden;
}

.fs-box {
    padding: var(--8) 0;
}

.hashelp {
    position: relative;
}


/* Announcement */

#pun-announcement .container {
    padding: 0;
}


/* Footer */

#html-footer .container {
    padding: 0;
}

#pun-about .container {
    text-align: center;
    padding-top: 0;
    margin-top: calc(var(--8) * -1);
    font-weight: 700;
}


/* Crumbs */

#pun-crumbs1 .container {
    text-align: center;
}

#pun-crumbs2 .container {
    text-align: center;
}

#pun-crumbs1 .container a,
#pun-crumbs2 .container a {
    font-weight: bold;
}

#pun-crumbs1 .container em,
#pun-crumbs2 .container em {
    color: rgb(var(--primary400));
    font-weight: 700;
    font-style: normal;
}


/* Links */

a,
body #pun-admain a,
body #pun #pun-adnav ul.adsubnav a {
    text-decoration: none;
    color: rgb(var(--primary400));
}

a:hover,
a:focus,
body #pun-admain a:hover,
body #pun-admain a:focus,
body #pun #pun-adnav ul.adsubnav a:hover,
body #pun #pun-adnav ul.adsubnav a:focus {
    text-decoration: none;
    color: rgb(var(--text900));
}


/* Headlines */

h1,
h2 {
    padding: var(--8) 0;
    position: relative;
    text-align: center;
}

h1 span,
h2 span {
    display: inline-block;
    font: 700 1.4rem/100% var(--font);
    border-radius: 1rem;
}

#pun-index h2,
#pun-messages h2 {
    text-align: left;
}

.punbb legend span {
    font-weight: 700;
}


/* Tables */

table {
    width: 100%;
    border-spacing: 0;
}

td,
th {
    padding: var(--12) var(--16);
}

/* Rusff reputation fix */

.tipsy-inner #respect td {
    padding: var(--4);
}

th {
    font-weight: 700;
    font-size: 0.9rem;
    text-align: left;
    padding: var(--4) var(--16);
}

.punbb:not(#pun-index, #pun-mod, #pun-online, .punbb-admin) .tcl {
    width: 40%;
}

.punbb:not(#pun-index, #pun-mod, .punbb-admin) .tc2 {
    width: 10%;
}

.punbb:not(#pun-index, #pun-mod, .punbb-admin) .tc3 {
    width: 10%;
}

.punbb:not(#pun-index, #pun-mod, .punbb-admin) .tcr {
    width: 40%;
}

.punbb#pun-searchtopics td.tc2,
.punbb#pun-searchtopics th.tc2 {
    width: 15%;
}

.punbb#pun-searchtopics td.tc3,
.punbb#pun-searchtopics th.tc3 {
    width: 5%;
}


/* Inputs */

.inputfield label,
.selectfield label {
    font-size: 0.9rem;
    display: inline-block;
    font-weight: 700;
}

.inline .inputfield,
.inline .selectfield {
    display: inline-block;
}

.punbb .fs-box p,
.punbb .fs-box fieldset {
    padding: 0 0 var(--8) 0;
}

input,
textarea,
#pun #sTheme {
    padding: var(--8) var(--16);
    box-sizing: border-box;
    background: rgb(var(--secondary400) / .2);
    border-radius: 1rem;
    color: rgb(var(--text900));
    font: normal 1rem/130% verdana, tahoma, arial, helvetica, sans-serif;
    border: none;
    margin: 0 var(--4) var(--4) 0 !important;
    max-width: 100%;
}

select {
    background: rgb(var(--secondary400) / .2);
    color: rgb(var(--text900));
    font-family: verdana, tahoma, arial, helvetica, sans-serif;
    padding: var(--4) var(--8);
    margin: 0 var(--4) var(--4) 0 !important;
    border-radius: 1rem;
    max-width: 100%;
}

select option {
    background: rgb(var(--light100));
}

input:hover,
textarea:hover, 
#pun #sTheme:hover,
select:hover,
#pun #wysi-reply:hover,
.button[name="preview"]:hover {
    background: rgb(var(--secondary400) / .38);
    color: rgb(var(--text900));
}

select:hover {
    cursor: pointer;
}

::placeholder {
  color: rgb(var(--text900) / .38);
  opacity: 1; /* Firefox */
}


/* Checkboxes & Radionuttons */

input[type="checkbox"],
input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: var(--16);
    height: var(--16);
    min-width: var(--16);
    min-height: var(--16);
    margin: 0 var(--2) var(--4) 0;
    border-radius: var(--4);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    padding: 0;
}

input[type="radio"] {
    border-radius: var(--8);
}

input[type="checkbox"]:hover,
input[type="radio"]:hover {
    cursor: pointer;
    background: rgb(var(--secondary400) / .6);
}

input[type="checkbox"]:checked {
    background: rgb(var(--primary400));
}

input[type="radio"]:checked:hover {
    cursor: default;
}

input[type="radio"]:checked {
    background: transparent;
    box-shadow: inset 0 0 0 2px rgb(var(--primary400));
}

input[type="radio"]:checked::before {
    content: '\f111';
    font: 900 var(--8)/100% var(--fa);
    color: rgb(var(--primary400));
}

input[type="checkbox"]:checked::before {
    content: '\f00c';
    font: 900 var(--8)/100% var(--fa);
    color: rgb(var(--light100));
}

input[type="checkbox"]:checked:hover {
    background: rgb(var(--text900));
}

p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
    line-height: 100%;
    vertical-align: middle;
}

.radio label,
.checkfield label {
    padding: 0 var(--8) 0 var(--4);
}

.checkfield label {
    line-height: 120%;
}

.radio *:hover,
.checkfield *:hover {
    cursor: pointer;
}


/* Buttons */

button,
.button,
input[type="button"],
input[type="submit"] {
    border-radius: var(--br400);
    background: rgb(var(--primary400));
    color: rgb(var(--light100));
    margin: var(--4) !important;
    font: 700 1em/100% var(--font);
    text-transform: uppercase;
}

button[disabled],
.button[disabled],
input[disabled] {
    background: rgb(var(--text900) / .12);
    color: rgb(var(--text900) / .388);
}

.button[name="preview"] {
    background: rgb(var(--secondary400) / .38);
    color: rgb(var(--text900));
}

.formsubmit input, 
.formsubmit a,
.formsubmit span {
    margin: 0 var(--8) 0 0;
}

button:hover,
.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover {
    background: rgb(var(--dark900)) !important;
    color: rgb(var(--light100)) !important;
    cursor: pointer;
}

button[disabled]:hover,
.button[disabled]:hover,
input[disabled]:hover {
    background: rgb(var(--text900) / .12) !important;
    color: rgb(var(--text900) / .388) !important;
    cursor: not-allowed;
}

.punbb #isk {
    border-radius: 1rem;
    border: none;
    background: rgb(var(--secondary400) / .38);
    color: rgb(var(--text900));
    margin-left: var(--4);
    position: relative;
    padding: 0.5px;
}

.punbb #isk::before {
    content: '\f002';
    font: 400 1rem/100% var(--fa);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}


/* Hide elements
-------------------------------------------------------------*/

.punbb:not(.punbb-admin) #pun-title,
#pun-title .title-logo-tdl,
#pun-navlinks h2,
#pun-ulinks h2,
#pun-status h2,
#pun-index h1,
#pun-announcement h2,
.punbb :not(#pun-statistic) #pun-main h1,
#pun-crumbs1 .container strong,
#pun-crumbs2 .container strong,
#pun-index thead,
#pun-status .item4,
.acchide,
#pun-userlist h1,
#pun-userlist h2,
#pun-profile h2,
#pun-viewtopic h2,
#post fieldset legend > span,
.sharelink,
#formkey,
#formetc,
#pun-searchposts h1,
#pun-searchposts h2,
#pun-searchtopics h1,
#pun-searchtopics h2,
#pun-modviewforum h1,
#pun-modviewforum h2,
#pun-viewforum h1,
#pun-viewforum h2,
.punbb .submitfield label,
.pa-gifts,
.stickytext,
.closedatafield,
.gid5 #navprofile,
.post-sig dt,
#pun-navlinks #navawards,
#pun-navlinks #navrules,
.modlist,
.tclcon:has(.modlist) > br:last-of-type,
#pun-ulinks #h-replies,
#pun-ulinks #h-unanswered,
.pl-email.email,
.catleft,
.catright,
#pun-premoderation .pa-title,
#pun-premoderation .pa-ua,
#pun-premoderation .pa-posts,
#pun-premoderation .pa-respect,
#pun-premoderation li[class^="pa-fld"],
#pun-premoderation h2,
#pun-viewtopic .linksb .postlink {
    display: none;
}


/* Navigation
-------------------------------------------------------------*/


/* Navlinks */

#pun-navlinks {
    background: rgb(var(--dark900c));
    border-radius: 2rem;
    z-index: 9;
    position: sticky;
    top: 0;
    margin-bottom: var(--8);
}

#pun-navlinks .container {
    position: relative;
    padding: 0;
    text-align: center;
}

#pun-navlinks li {
    list-style: none;
    display: inline-block;
}

#pun-navlinks li a {
    display: inline-block;
    font: 700 1.2rem/100% var(--font);
    color: rgb(var(--light100c));
    text-transform: uppercase;
    padding: var(--8) var(--4);
}

#pun-navlinks li a:hover {
    color: rgb(var(--primary400));    
}


/* Ulinks */

#pun-ulinks {
    z-index: 8;
    margin: 0 calc(var(--32) * -1) var(--16);
    position: sticky;
    top: calc(var(--24) + var(--6));
    background: rgb(var(--light100));
}

#pun-ulinks .container {
    padding: 0;
    text-align: center;
}

#pun-ulinks li {
    list-style: none;
    display: inline-block;
}

#pun-ulinks li a {
    display: inline-block;
    font: 700 1rem/100% var(--font);
    color: rgb(var(--text900));
    text-transform: uppercase;
    padding: var(--8) var(--4);
}

#pun-ulinks li a:hover {
    color: rgb(var(--primary400));    
}


/* Index
-------------------------------------------------------------*/


/* Categories & forums */

#pun-index .category .container {
    padding-top: 0;
}

#pun-index .category tbody {
    display: flex;
    flex-direction: column;
    border-radius: 2rem;
    padding: 0 var(--32);
}

#pun-index .category tr {
    display: flex;
    flex-direction: row;
    gap: var(--16);
    align-items: center;
    box-sizing: border-box;
    position: relative;
    padding: var(--32) 0;
}

#pun-index .category tr:not(:last-child) {
    border-bottom: 1px solid rgb(var(--text900) / .12);
}

#pun-index .category tr td {
    padding: 0;
}

#pun-index .category .tcl {
    width: 70%;
}

#pun-index .category .tclcon {
    display: flex;
    flex-direction: column;
    gap: var(--8);
}

#pun-index .category tr .desc {
    font-size: 0.9rem;
    line-height: 130%;
    color: rgb(var(--text900) / .6);
}

#pun-index .category tr .tc2,
#pun-index .category tr .tc3 {
    display: none;
}

#pun-index .category tr h3 a {
    font: 900 1.4em/130% var(--font);
    display: inline-block;
    text-transform: uppercase;
}

#pun-index .category tr .tcr {
    width: 50%;
    display: flex;
    align-items: center;
    gap: var(--12);
}

#pun-index .category tr .tcr .lastpost-link {
    display: block;
    text-transform: uppercase;
    font: 700 1em/120% var(--font);
    margin-bottom: var(--4);
}

#pun-index .category tr .tcr .lastpost-link ~ br {
    display: none;
}

#pun .user-avatar {
    flex-shrink: 0;
}


/* Subforums */

#pun-index .subforums,
#subforums {
    background: rgb(var(--secondary400) / .38);
    border-radius: 1rem;
    padding: var(--4) var(--16);
    text-align: center;
    font: 700 1em/130% var(--font);
    text-transform: lowercase;
}

#subforums {
    margin: var(--8) 0;
}


/* Statistics */

#pun-stats .container {
    padding: 0;
    list-style: none;
    display: flex;
    gap: var(--16);
    flex-direction: column;
    padding: var(--32);
    background: rgb(var(--secondary400) / .2);
    border-radius: 2rem;
}

#pun-stats .container::after {
    display: none;
}

#pun-stats .statsinfo {
    display: flex;
    gap: var(--16);
    padding-bottom: var(--16);
    border-bottom: 1px solid rgb(var(--text900) / .12);
}

#pun-stats .statsinfo li strong {
    font-weight: 700;
}

#pun-stats #onlinelist.onlinelist div,
#pun-stats #onlinelist.users_24h div {
    padding-right: var(--8);
    padding-bottom: var(--16);
    border-bottom: 1px solid rgb(var(--text900) / .12);
    text-align: justify;
}


/* Forum, Userlist, Statistic list
-------------------------------------------------------------*/


/* Table */

#pun-viewforum table,
#pun-modviewforum table,
#pun-searchtopics table,
#pun-userlist table,
#pun-statistic table,
#pun-respect table,
#pun-positive table,
#pun-messages #messages table,
.profile-awards-container table {
    overflow: hidden;
}

#pun-viewforum table tr,
#pun-modviewforum table tr,
#pun-searchtopics table tr,
#pun-userlist table tr,
#pun-statistic table tr,
#pun-respect table tr,
#pun-positive table tr,
#pun-messages #messages table tr,
.profile-awards-container table tr {
    display: flex;
    align-items: center;
    margin-top: var(--8);
    background: rgb(var(--secondary400) / .2);
    border-radius: 1rem;
}

#pun-viewforum table thead tr,
#pun-modviewforum table thead tr,
#pun-searchtopics table thead tr,
#pun-userlist table thead tr,
#pun-statistic table thead tr,
#pun-respect table thead tr,
#pun-positive table thead tr,
#pun-messages #messages table thead tr,
.profile-awards-container table thead tr {
    background: rgb(var(--dark900c)) !important;
    color: rgb(var(--light100c));
    border-radius: 1rem;
}

#pun-viewforum tbody tr:hover,
#pun-modviewforum tbody tr:hover,
#pun-searchtopics tbody tr:hover,
#pun-userlist tbody tr:hover,
#pun-statistic tbody tr:hover,
#pun-respect tbody tr:hover,
#pun-positive tbody tr:hover,
#pun-messages #messages tbody tr:hover,
.profile-awards-container tbody tr:hover  {
    background: rgb(var(--secondary400) / .38);
}

#pun-viewforum tr .tcr,
#pun-modviewforum tr .tcr,
#pun-searchtopics tr .tcr,
#pun-userlist tr .tcl,
#pun-viewforum tr .tcl .intd,
#pun-modviewforum tr .tcl .intd,
#pun-searchtopics tr .tcl .intd,
#pun-messages #messages tr .tcl .intd,
#pun-userlist tr .tcl .intd {
    display: flex;
    align-items: center;
    gap: var(--12);
}

.profile-awards-container th,
.profile-awards-container td {
    width: 20% !important;
}

.profile-awards-container td {
    padding: var(--16);
}

th input[type="checkbox"] {
    margin: 0 !important;
}

#pun-messages #messages td.tc2.pmtc22 {
    display: flex !important;
    align-items: center;
    gap: var(--12);
}


/* Userlist */

.punbb#pun-userlist .tcl {
    width: 25%;
}

.punbb#pun-userlist .tc2,
.punbb#pun-userlist .tc3 {
    width: 15%;
}


/* Statistic list */

#pun-statistic .main .container {
    padding: 0 0 var(--16) 0;
}

.punbb#pun-statistic .tcl {
    width: 40%;
}

.punbb#pun-statistic .tc2,
.punbb#pun-statistic .tc3 {
    width: 15%;
}


/* Links */

.punbb:not(.punbb-admin) .pagelink,
.punbb:not(.punbb-admin) .postlink {
    display: inline-block;
}

.punbb:not(.punbb-admin) .postlink {
    float: right;
    width: unset;
}


/* Paginator */

/* experimental */
.punbb:not(.punbb-admin) .pagelink:has(strong:only-child) {
    display: none !important;
}

.punbb:not(.punbb-admin) .pagelink {
    padding: 0 var(--8);
    background: rgb(var(--secondary400) / .2);
    padding: var(--4);
    border-radius: 1rem;
}

.punbb:not(.punbb-admin) .pagelink a,
.punbb:not(.punbb-admin) .pagelink strong {
    display: inline-block;
    padding: var(--4) var(--6) !important;
    border-radius: 0.5rem !important;
    line-height: 130%;
}

.punbb:not(.punbb-admin) .pagelink span {
    margin: 0 var(--4);
}

.punbb:not(.punbb-admin) .pagelink strong {
    background: rgb(var(--dark900));
    color: rgb(var(--light100));
    font: 700 1rem/100% var(--font);
}


/* Icons */

.punbb div.icon {
    position: relative;
    display: inline-flex;
    width: var(--16);
    height: var(--16);
    border-radius: 0.4rem;
    background: rgb(var(--secondary400) / .38);
    margin: var(--4) var(--4) var(--4) 0;
    text-align: center;
    font: 400 var(--20)/100% var(--fa);
    color: rgb(var(--secondary400));
}

.punbb div.icon::after {
    font-size: var(--16);
}

.punbb tr.inew div.icon {
    background: rgb(var(--primary400));
}

.punbb tr.isticky div.icon {
    background: rgb(var(--danger));
}

.punbb tr.iclosed div.icon {
    background: rgb(var(--text900) / .2);
}

#pun-index tr div.icon {
    float: left;
    margin-right: var(--16);
    width: var(--24);
    height: var(--24);
    border-radius: 0.6rem;
}


/* Profile page
-------------------------------------------------------------*/

#pun-profile #profile .container {
    padding-left: 10em;
}

#viewprofile {
    flex-grow: 1;
}

#viewprofile-next {
    display: flex;
    gap: var(--32);
}

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

#viewprofile-next #profilenav {
    display: inline-block !important;
}

#pun-profile #profile #profilenav {
    float: left;
    width: 10em;
    margin-left: -10em;
}

#viewprofile-next #profilenav {
    padding-top: var(--16);
}

#viewprofile .container::after {
    display: none;
}

#viewprofile .container tr {
    display: flex;
    gap: var(--32);
}

body #profile-left {
    padding: var(--16) !important;
    background: rgb(var(--secondary400) / .2);
    border-radius: 1rem;
}

#profilenav li {
    list-style: none;
}

#profilenav a {
    display: block;
    margin-bottom: var(--4);
}

#profilenav li:not(:last-child) a {
    margin-right: var(--4);
}

#profilenav .isactive a {
    font-weight: 700;
}

#profile-right li {
    padding-bottom: var(--8);
}

#viewprofile li span {
    display: inline-block;
    min-width: 14em;
    font-weight: 700;
}

#viewprofile li strong {
    display: inline-block;
    font-weight: normal;
}

#profile-left li {
    list-style: none;
}

#profile-left #profile-title {
    margin: var(--4) 0 var(--8);
}

#profile-left #pa-online {
    padding-top: var(--8)
}

#profile-left #pa-avatar strong {
    display: none;
}

#pa-edit {
    display: none;
}

.avatardemo {
    padding-left: var(--16);
}

td.tc0.ft-image {
    border: 2px solid rgb(var(--light100));
}

#profile li {
    list-style: none;
}

#profile #select-hosting .infofield * {
    margin: 0;
}


/* Set moderator permissions */

#setmods dl dl {
    padding: 0 var(--8);
    background: rgb(var(--secondary400) / .2);
    margin-bottom: var(--8);
    border-radius: var(--8);
}

#setmods dl dl:hover {
    background: rgb(var(--secondary400) / .38);
}

#setmods dt {
    font-weight: bold;
    display: inline-block;
    width: 20%;
    vertical-align: top;
    padding: var(--8);
}

#setmods dd {
    display: inline-block;
    padding: var(--8);
}

#setmods dd div {
    display: block;
}

div.checkfield .sub {
    margin-left: 0 !important;
}

div.checkfield:has(.sub) {
    margin-left: var(--24);
}


/* Topic
-------------------------------------------------------------*/

.post {
    scroll-margin-top: calc(var(--48) + var(--24));
}

.post .container {
    padding: 0;
    margin: var(--16) 0;
    width: 100%;
    display: flex;
    flex-flow: wrap;
}

.post-author {
    width: var(--profileWidth);
    align-self: start;
}

.post-body {
    padding-left: var(--32);
    box-sizing: border-box;
    width: calc(100% - var(--profileWidth));
}

.post-links {
    width: 100%;
}

.post-content {
    padding: var(--8) 0 var(--16);
    word-break: break-word;
}

.post-content img,
.post-sig img {
    max-width: 100%;
}

#poll-special td {
    padding: var(--4);
}

.post-links {
    text-align: right;
    margin-top: var(--16);
}

.post-links li {
    display: inline-block;
}

.post-links li a {
    font-weight: 700;
}

.post-links .pl-email,
.post-links .pl-website {
    float: left;
}

.post-links .pl-email a {
    margin: 0 var(--8) 0 0;
}

.post-links li a:not(.pl-email a) {
    margin: 0 0 0 var(--4);
}

.post-links li.approve {
    margin-left: var(--4);
}

#topic-modmenu span,
.forum ~ .modmenu span {
    float: right;
}

#topic-modmenu .container {
    vertical-align: middle;
}

.subscribelink {
    text-align: right;
}

#topic-users-in a:not(:last-child)::after {
    content: ',';
}

.punbb #profile-signature ul {
    border: none;
    padding: 0;
}

.post-sig::before,
.punbb #profile-signature ul::before {
    content: '';
    display: block;
    margin: var(--16) auto var(--8);
    width: 30%;
    height: 1px;
    background: rgb(var(--secondary400) / .38);
}


/* Post headline */

.post h3 {
    font-size: 1rem;
    float: right;
    position: relative;
    z-index: 1;
    width: calc(100% - var(--profileWidth) - var(--32));
    margin-top: var(--24);
    padding-bottom: var(--4);
    border-bottom: 1px solid rgb(var(--secondary400) / .6) !important;
}

.post h3 em {
    font-style: normal;
}

.post h3 a {
    font-weight: 700;
}

.post h3 strong {
    float: right;
    margin-left: var(--16);
}

.post h3 strong::before {
    content: '#';
}

#pun-premoderation .post h3 span > em:last-child {
    padding-left: var(--4);
}


/* Profile */

.post-author {
    background-color: rgb(var(--secondary400) / .2);
    padding: var(--16) 0 var(--8);
    border-radius: 1rem;
    box-sizing: border-box;
    margin-top: calc(var(--20) * -1)
}

#pun-viewtopic .post-author {
    margin-bottom: var(--64);
}

.post-author li {
    padding: 0 var(--16) var(--8);
    list-style: none;
    text-align: center;
}

.post-author .pa-author {
    padding-bottom: var(--4);
}

.punbb .pa-author a,
.punbb .pa-author strong {
    font: 700 1rem/100% var(--font);
}

#pun-premoderation .pa-author,
#pun-post .pa-author {
    font-weight: 700;
    text-align: center;
}

.pa-title {
    font-size: 0.8rem;
    line-height: 120%;
}

.pa-avatar {
    margin-top: var(--8);
}

.pa-avatar img {
    max-width: 180px;
}

.pa-posts,
.pa-respect {
    padding-top: var(--8);
    width: 100%;
}

.pa-posts .fld-name,
.pa-respect .fld-name {
    display: block;
    font-size: 0;
}

#pun:not(.isguest) .post-author .pa-respect a:first-child::before,
#pun.isguest .post-author .pa-respect .fld-name::before,
.post-author .pa-posts .fld-name::before {
    font-family: var(--fa);
    font-size: 1.4rem;
    font-weight: 400;
    margin-bottom: var(--4);
}

#pun.isguest .punbb .post-author .pa-respect .fld-name::before {
    color: rgb(var(--primary400));
}

#pun:not(.isguest) .punbb .post-author .pa-respect a:first-child::before,
#pun.isguest .punbb .post-author .pa-respect .fld-name::before {
    content: '\f004';
}

.punbb .post-author .pa-posts .fld-name::before {
    content: '\f0e0';
    color: rgb(var(--primary400));
}

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


/* Messages page */

#pun-messages .post-author .pa-reg,
#pun-messages .post-author .pa-online,
#pun-messages .post-author .pa-last-visit {
    display: none;
}

#pun-messages #profilenav {
    float: none;
    display: flex;
    justify-content: space-between;
    margin-right: 0;
}

#pun-messages #profilenav h2 {
    display: none;
}

#pun-messages #profilenav ul {
    display: inline-block;
    margin-bottom: var(--16);
}

#pun-messages #profilenav ul li {
    display: inline-block;
}


/* Reply form
-------------------------------------------------------------*/

#main-reply {
    width: 100%;
    box-sizing: border-box;
    font-size: 1rem;
}

.formsubmit {
    text-align: center;
}

#post-errors ul {
    padding-bottom: var(--4);
}

#post-errors li {
    list-style: none;
    padding-bottom: var(--4);
}


/* Keep buttons always above textarea fix */

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

#post .fs-box .inputfield.required {
    order: -1;
}

/* Form tools
----------------------------------------------------------------------- */

#pun #tags .container {
    right: 0;
    margin-top: calc(var(--4) * -1);
    background: rgb(var(--light100));
    border-radius: var(--16);
    padding: var(--12);
    top: unset;
    box-shadow: 0 var(--8) var(--64) rgb(var(--dark900c) / .2);
    overflow: hidden auto;
    max-height: 200px;
}

#keyboard-area input {
    line-height: 100%;
    border-radius: var(--8);
}

#keyboard-area input:hover {
    background: rgb(var(--primary400));
    color: rgb(var(--light100));
}

#size-area div {
    line-height: 120%;
}

#pun #size-area span {
    width: unset;
    height: unset;
    margin: 0;
}

#pun #addition-area div {
    height: unset;
}

#size-area div,
#addition-area div,
#font-area div {
    background: rgb(var(--secondary400) / .2);
    border-radius: var(--8);
    padding: var(--4) var(--8) !important;
}

#font-area div:hover,
#size-area div:hover,
#addition-area div:hover {
    background: rgb(var(--primary400));
    color: rgb(var(--light100));
}

#size-area div:not(:last-child),
#addition-area div:not(:last-child),
#font-area div:not(:last-child) {
    margin-bottom: var(--4);
}

.punbb #table-area td.selected,
.punbb #table-area td:hover {
    background: rgb(var(--primary400))
}


/* Form Buttons
----------------------------------------------------------------------- */

#pun #form-buttons table,
#pun #form-buttons tbody {
    width: 100%;
}

#pun #form-buttons td img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#pun #form-buttons td {
    background: transparent;
    position: relative;
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
}

#pun #form-buttons td:hover {
    cursor: pointer;
    color: rgb(var(--primary400));
}

#form-buttons table tr {
    display: flex;
    justify-content: space-between;
    gap: var(--4);
    margin-bottom: var(--8);
    background: rgb(var(--secondary400) / .2);
    padding: var(--4) var(--8);
    border-radius: 1rem;
}

#form-buttons td::before {
    font: 400 1.4rem/120% var(--fa);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

#button-font::before {
    content: '\f031';
}

#button-size::before {
    content: '\f894';
}

#button-bold::before {
    content: '\f032';
}

#button-italic::before {
    content: '\f033';
}

#button-underline::before {
    content: '\f0cd';
}

#button-strike::before {
    content: '\f0cc';
}

#button-left::before {
    content: '\f036';
}

#button-right::before {
    content: '\f038';
}

#button-center::before {
    content: '\f037';
}

#button-link::before {
    content: '\f0c1';
}

#button-spoiler::before {
    content: '\f518';
}

#button-image::before {
    content: '\f302';
}

#button-video::before {
    content: '\f144';
}

#button-hide::before {
    content: '\f30d';
}

#button-quote::before {
    content: '\f27a';
}

#button-code::before {
    content: '\f121';
}

#button-color::before {
    content: '\f53f';
}

#button-table::before {
    content: '\f009';
}

#button-smile::before {
    content: '\f118';
}

#button-keyboard::before {
    content: '\f11c';
}

#button-addition::before {
    content: '\f0d7';
}

#button-mask::before {
    content: '\f630';
}


/* Post
------------------------------------------------------------------ */

.post-content img {
    vertical-align: middle;
}

.post-content p {
    line-height: 150%;
    padding: var(--4) 0;
    text-align: justify;
}

.post-box .post-content ul {
    padding: 0.4rem 0 0.8rem 2.4rem;
}

.post-box .post-content ul ul {
    padding-top: var(--4);
    padding-bottom: 0;
}

.post-content li p {
    padding: 0 0 var(--4) 0;
}

/* Selection */

::selection {
    color: rgb(var(--light100));
    background: rgb(var(--dark900));
}


/* Deleted text */

del {
    text-decoration-thickness: var(--2);
    -wenkit-text-decoration-thickness: var(--2);
    text-decoration-line: line-through;
    -wenkit-text-decoration-line: line-through;
    text-decoration-style: solid;
    -wenkit-text-decoration-style: solid;
    text-decoration-color: rgb(var(--primary400));
    -wenkit-text-decoration-color: rgb(var(--primary400));
}

del:hover {
    text-decoration: none;
}


/* Underlined text */

.bbuline {
    font-style: unset;
    text-decoration: underline;
    text-decoration-color: rgb(var(--primary400));
}


/* Highlighted text */

#pun .highlight-text {
    background-color: rgb(var(--warning));
    padding: 0.1rem 0.2rem 0.2rem;
}


/* Abbreviated text */

.post-content abbr {
    text-decoration: underline dotted rgb(var(--primary400));
    cursor: help !important;
}


/* Link */

.post-content a {
    font-weight: 700;
}


/* Marker */

.post-content ::marker {
    font-weight: 700;
    color: rgb(var(--primary400));
}


/* HR (divider) */

#pun .post-content hr {
    opacity: 1;
    border-top: 2px solid rgb(var(--secondary400) / .6);
    margin: var(--8) 0;
}


/* Table */

#pun .post-content td {
    border: none !important;
    padding: var(--8) !important;
    vertical-align: top;
}


/* Quote, code & spoiler */

.quote-box,
.code-box,
.spoiler-box {
    padding: var(--8) var(--16);
    margin: var(--8) 0;
    position: relative;
    background: rgb(var(--secondary400) / .38);
    border-radius: 1rem;
}

blockcode,
blockquote {
    overflow: hidden;
}

.code-box .scrollbox {
    width: 100%;
    overflow: auto;
}

.code-box pre {
    font: 400 1rem/140% 'courier new';
}

.quote-box cite,
.code-box strong,
.code-box strong a {
    font: normal 600 1rem/100% var(--font);
}

.code-box strong a {
    padding: var(--6) var(--12);
    background: rgb(var(--primary400));
    border-radius: 1em;
    color: rgb(var(--light100));
    display: inline-block;
}

.code-box strong a:hover {
    background: rgb(var(--dark900));
}

.quote-box cite,
.code-box strong {
    display: block;
    padding: var(--4) 0 var(--8);
    margin-bottom: var(--4);
    border-bottom: 1px solid rgb(var(--secondary400));
}

#pun .spoiler-box > div {
    text-align: center;
    padding: var(--6) var(--32);
    background: transparent;
    position: relative;
    line-height: 140%;
    font-weight: bold;
}

.spoiler-box > div:hover {
    cursor: pointer;
    color: rgb(var(--primary400));
}

.spoiler-box > div::before {
    content: '\2b';
    font: 900 0.9rem var(--fa);
    width: var(--24);
    height: var(--24);
    border-radius: var(--8);
    padding: 1px;
    box-sizing: border-box;
    background:  rgb(var(--secondary400) / .38);
    color: rgb(var(--text900));
    position: absolute;
    left: calc(var(--4) * -1);
    top: calc(50% - var(--12));
    display: flex;
    align-items: center;
    justify-content: center;
}

.spoiler-box > div.visible::before {
    content: '\f068';
}

.spoiler-box > div:hover {
    color: rgb(var(--primary400))
}

.spoiler-box > div:hover::before {
    background: rgb(var(--primary400));
    color: rgb(var(--light100));
}


/* Admin pages
------------------------------------------------------------------ */


/* Rusff support block */

.title-logo-tdr {
    display: none;
}


/* Containers */

#pun .adcontainer {
    border: none;
    border-width: 0 1px 1px 1px;
    margin-bottom: var(--16);
}


/* Files table fix */

.punbb-admin #filetable .tc3 {
    width: 10% !important;
}


/* Sticky elements */

#pun-adnav {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
}

#pun-adnav sup {
    display: none;
}

#pun-adnav li {
    list-style: none !important;
}

#adnav-standard > ul > li {
    padding: 0 0 var(--4);
}

#pun-adnav ul.adsubnav li {
    padding-left: var(--16) !important;
}

#adnav-standard > ul > li > a {
    display: block;
    padding: var(--4) var(--8);
    box-sizing: border-box;
    position: relative;
    font-size: 0.9rem;
    text-transform: uppercase;
    border-radius: var(--8);
}

#pun-adnav li.isactive > a {
    background: #333;
    color: #fff;
}

#pun-adnav li.item3:not(.isactive) > a,
#pun-adnav li.item-forms:not(.isactive) > a,
#pun-adnav li.item15:not(.isactive) > a,
#pun-adnav li.item20:not(.isactive) > a,
#pun-adnav li.item11:not(.isactive) > a,
#pun-adnav li.item22:not(.isactive) > a {
    background-color: rgb(var(--secondary400) / .38);
}

#pun-adnav li.item3 > a:after,
#pun-adnav li.item-forms > a:after,
#pun-adnav li.item15 > a:after,
#pun-adnav li.item20 > a:after,
#pun-adnav li.item11 > a:after,
#pun-adnav li.item22 > a:after {
    content: '\f005';
    font: 700 1rem/100% var(--fa);
    margin-top: var(--2);
    margin-left: var(--6);
    float: right;
}

#adnav-standard > ul > li > a:hover {
    background: rgb(var(--primary400)) !important;
    color: #fff;
}

#pun-adnav .adsubnav {
    padding-left: var(--8);
}

#pun-admain .submittop {
    position: -webkit-sticky;
    position: sticky;
    top: 56px;
    background: rgb(var(--light100));
    padding: var(--8) var(--16);
    margin-bottom: var(--16);
    z-index: 7;
}


/* Modal
------------------------------------------------------------------ */

#pun-report .inner,
#pun-reputation .inner,
#pun-admin-award-form .inner {
    background: rgb(var(--light100));
    border-radius: 1rem;
    box-shadow: 0 var(--8) var(--64) rgb(var(--dark900c) / .38) !important;
}

#pun-report .container,
#pun-reputation .container,
#pun-admin-award-form .container {
    padding: 0 !important;
}

#pun-report h1,
#pun-reputation h1,
#pun-admin-award-form h1{
    padding: var(--16) !important;
}


/* Scrollbar
------------------------------------------------------------------ */

@supports selector(::-webkit-scrollbar) {
    *::-webkit-scrollbar-thumb {
        border-radius: 8px;
        background: rgb(var(--dark900));
    }
    *::-webkit-scrollbar-thumb:hover {
        background: rgb(var(--primary400));
        cursor: default;
    }
    *::-webkit-scrollbar-track {
        border-radius: 8px;
        background: rgb(var(--secondary400));
    }
    *::-webkit-scrollbar {
        max-width: 8px;
        max-height: 8px;
    }
}


/* Respect table
-------------------------------------------------------------*/

#pun-respect .tcl {
    width: 20% !important;
}

#pun-respect .tc2 {
    width: 5% !important;
}

#pun-respect .tc3 {
    width: 15% !important;
}

#pun-respect .tc4 {
    width: 30% !important;
}

#pun-respect .tcr {
    width: 30% !important;
}

/**************************************************************
* МАКЕТ «РЕТРОГРАДНЫЙ МЕРКУРИЙ» — ФОН ШАПКИ И БУРГУНДСКИЙ КРАСНЫЙ
**************************************************************/

/* 1. ГЛАВНЫЙ КОНТЕЙНЕР ШАПКИ (Состояние покоя) */
.mercury-header {
height: 250px;
    width: 100% !important;
    max-width: var(--punWidth) !important;
    margin: 0 auto var(--32) auto !important;
    padding: var(--24) var(--32) !important;
    box-sizing: border-box !important;
    
    /* Принудительно отключаем любые грид-сетки Макса, собираем в монолит */
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: var(--24) !important;
    clear: both !important;
    border-radius: 4rem !important;
    
    /* ЖЕЛЕЗОБЕТОННЫЙ МОНОЛИТНЫЙ ФОН: картинка растягивается строго по центру шапки без разрывов */
    background-image: url('https://forumstatic.ru/files/001c/0a/b2/52188.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: scroll !important;
    background-color: #111114 !important;
   
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    transition: background 0.8s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.8s ease, box-shadow 0.8s ease !important;
}


/* 2. ЛЕВАЯ ЧАСТЬ: ЗОНА ТЕКСТА */
.logo-area {
    flex-grow: 1 !important;
    text-align: left !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    
    /* ЖЕСТКИЙ ФИКС: Убираем hidden, чтобы верхние края букв больше не срезались */
    overflow: visible !important; 
}

.mercury-title {
    font-family: "novelist", "Georgia", serif !important;
    font-size: clamp(1.6rem, 3vw, 2.5rem) !important;
    font-weight: 300 !important;
    font-style: normal !important;
    letter-spacing: 7px !important;
    color: #fcb73e !important;
    text-align: left !important;
    text-transform: uppercase !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: var(--8) 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    text-shadow: 0 2px 5px rgb(0 0 0) !important;
    line-height: 1.4 !important;
    transition: color 0.6s ease, text-shadow 0.6s ease !important;
    
    /* ЖЕСТКИЙ ФИКС: Даем буквам простор по вертикали, чтобы они дышали и не прижимались к потолку */
    line-height: 1.4 !important; 
    
    transition: color 0.6s ease, text-shadow 0.6s ease !important;
}

/* 3. ПРАВАЯ ЧАСТЬ: АСТРОЛОГИЧЕСКИЙ DISK */
.mercury-disk {
    width: 130px !important;
    height: 130px !important;
    min-width: 130px !important;
    max-width: 130px !important;
    min-height: 130px !important;
    max-height: 130px !important;
    flex: none !important;
    border-radius: 50% !important;
    position: relative !important;
    overflow: visible !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.6) !important;
    /* border: 1px solid rgb(239 169 58) !important; */
    /* background: #bf8f2b !important; */
    margin: 0 100px 0 0 !important;
    padding: 0 !important;
}

.disk-front, .disk-back {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* ЖУТКАЯ ИЗНАНКА */
.disk-back {
    z-index: 1 !important;
    background-size: cover !important;
    filter: brightness(0.25) contrast(1.6) saturate(0.5) !important;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ПАРАДНЫЙ УЮТНЫЙ ФАСАД */
.disk-front {
    z-index: 3 !important;
    background-image: url('') !important;
    opacity: 1;
    filter: blur(0px) grayscale(0) brightness(1) !important;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 0%, #000 0%);
    mask-image: radial-gradient(circle at 50% 50%, transparent 0%, #000 0%);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), filter 1.4s cubic-bezier(0.16, 1, 0.3, 1), -webkit-mask-image 1.4s cubic-bezier(0.16, 1, 0.3, 1), mask-image 1.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ЗОЛОТАЯ ПЛАНЕТА НА ОРБИТЕ */
.mercury-planet {
    width: 12px !important;
    height: 12px !important;
    border-radius: 50% !important;
    position: absolute !important;
    top: 50% !important; left: 50% !important;
    z-index: 4 !important;
    margin-top: -6px !important; margin-left: -6px !important;
    background: radial-gradient(circle at 35% 35%, #fffdf0 0%, #f6e3a3 25%, #d4af37 60%, #836512 100%) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), inset -1px -1px 3px rgba(0, 0, 0, 0.4) !important;
    animation: orbitRotation 12s infinite linear !important;
    transition: background 0.8s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.8s ease !important;
}

@keyframes orbitRotation {
    from { transform: rotate(0deg) translateX(75px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(75px) rotate(-360deg); }
}


/* ==========================================================================
   ФАЗА АНОМАЛИИ: ПРОРЫВ СТРАШНОЙ ТЬМЫ 
   ========================================================================== */

body.horror-active .mercury-header {
    /* ФОН ШАПКИ В АНОМАЛИИ: Мертвый, потрескавшийся темный камень или магма */
    background: url('https://forumstatic.ru/files/001c/0a/b2/55276.jpg') no-repeat center !important;
    background-size: cover !important;
    
    border-color: #58111A !important; /* Бургундские границы */
    box-shadow: inset 0 0 40px #000000, 0 5px 25px rgba(88, 17, 26, 0.3) !important;
}

/* Текст загорается глубоким бургундским винным сиянием */
body.horror-active .mercury-title {
    color: #9e999a !important;
    text-shadow: 
        0 0 6px #A12532, 
        0 0 15px #58111A, 
        0 0 35px #000000 !important;
    animation: mercuryPulse 2.5s infinite ease-in-out !important;
}

@keyframes mercuryPulse {
    0%, 100% { text-shadow: 0 0 6px #A12532, 0 0 15px #58111A, 0 0 30px #000000; }
    50% { text-shadow: 0 0 12px #B93C4C, 0 0 25px #A12532, 0 0 45px #000000; }
}

/* ОБЪЕМНАЯ КАПЛЯ ГУСТОЙ ВИННОЙ КРОВИ (Вместо дешевого красного) */
body.horror-active .mercury-planet {
    background: radial-gradient(circle at 35% 35%, #ff9e9e 0%, #a12532 30%, #58111a 65%, #1f0205 100%) !important;
    box-shadow: 0 0 12px #58111a, inset -1px -1px 3px rgba(0, 0, 0, 0.9) !important;
    animation: reverseOrbit 3.5s infinite linear !important;
}

@keyframes reverseOrbit {
    from { transform: rotate(360deg) translateX(75px) rotate(-360deg); }
    to { transform: rotate(0deg) translateX(75px) rotate(0deg); }
}

/* Проявляем нижний слой с монстром */
body.horror-active .disk-back {
    opacity: 1 !important;
    filter: brightness(1) contrast(1.2) saturate(1.3) !important; 
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), filter 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Маска проедает верхний уютный слой */
body.horror-active .disk-front {
    opacity: 0 !important;
    filter: blur(4px) grayscale(1) brightness(0.1) !important;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, transparent 45%, rgba(0,0,0,0.8) 55%, #000 70%) !important;
    mask-image: radial-gradient(circle at 50% 50%, transparent 45%, rgba(0,0,0,0.8) 55%, #000 70%) !important;
    transition: opacity 0.5s ease, filter 0.5s ease, -webkit-mask-image 0.5s ease, mask-image 0.5s ease !important;
}

/**************************************************************
* КАРКАС «РЕТРОГРАДНЫЙ МЕРКУРИЙ» — ТРЕЩИНЫ НА ЗАДНЕМ ФОНЕ ВСЕГО САЙТА
**************************************************************/

/* СЛОЙ ТРЕЩИН (В покое они полностью прозрачны, сжаты и скрыты за границами видимости) */
body::after {
    content: '' !important;
    position: fixed !important; /* Намертво прибиты к экрану, не плывут при скролле */
    inset: 0 !important; /* Растягиваем на весь монитор */
    z-index: -1 !important; /* Лежат строго ПОД телом форума (.punbb), но НАД базовыми обоями сайта */
    pointer-events: none !important; /* Мышь пролетает насквозь */

    /* ВСТАВЬТЕ СЮДА ССЫЛКУ НА ВАШИ PNG-ТРЕЩИНЫ */
    background-image: url('https://forumstatic.ru/files/001c/0a/b2/54808.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    
    opacity: 0 !important; /* Изначально скрыты */
    
    /* ЭФФЕКТ СЖАТИЯ: в покое трещины уменьшены (scale(0.7)) и сильно размыты (blur(15px)) */
    transform: scale(0.7) !important;
    filter: blur(15px) brightness(0.2) !important;
    
    /* Тягучий, медленный возврат к уюту («сшивание» ткани вселенной за 1.8 секунды) */
    transition: transform 1.8s cubic-bezier(0.16, 1, 0.3, 1), 
                opacity 1.5s ease, 
                filter 1.8s ease !important;
}


/* ==========================================================================
   ФАЗА АНОМАЛИИ: ТРЕЩИНЫ РЕЗКО РАСПОЛЗАЮТСЯ ПО ЭКРАНУ (Через 2.3 сек)
   ========================================================================== */

/* Взрыв аномалии: трещины молниеносно прорастают по всему заднему плану сайта */
body.horror-active::after {
    opacity: 0.85 !important; /* Проявляются на фоне */
    
    /* Хоррор-эффект: трещины мгновенно расправляются до оригинального размера 100% 
       и становятся бритвенно-четкими, имитируя резкий физический раскол */
    transform: scale(1) !important;
    filter: blur(0px) brightness(0.15) drop-shadow(0 0 15px rgba(88, 17, 26, 0.4)) !important; /* Добавляем им в глубину разломов легкое, зловещее бургундское сияние */
    
    /* Скорость раскола — сочные, резкие 0.4 секунды, чтобы соигрок вздрогнул от неожиданности */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1), 
                opacity 0.3s ease, 
                filter 0.4s ease !important;
}


/**************************************************************
* ТАБЛИЦА ОБЪЯВЛЕНИЙ «РЕТРОГРАДНЫЙ МЕРКУРИЙ»
**************************************************************/

.mercury-news-table {
    width: 100%;
    max-width: var(--punWidth) !important;
    margin: 0 auto var(--24) auto !important;
    box-sizing: border-box !important;
    
    /* Верстка сеткой: три равные колонки для админов, текста и ссылок */
    display: grid !important;
    grid-template-columns: 1fr 1.5fr 1fr !important;
    gap: var(--20) !important;
    
    padding: var(--20) !important;
    border: 2px solid rgb(var(--secondary400) / 0.2) !important;
    border-radius: 2rem !important; /* Мягкие скругления */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

/* Общие стили для всех трех секций таблицы */
.news-section {
    background: rgb(var(--secondary400) / 0.05) !important;
    border: 1px solid rgb(var(--secondary400) / 0.1) !important;
    border-radius: 1.5rem !important;
    padding: var(--16) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
}

/* --- СЕКЦИЯ 1: БЛОК АДМИНИСТРАЦИИ --- */
.admin-block {
    display: flex !important;
    flex-direction: row !important; /* Выстраиваем 3 админов в ряд внутри своей колонки */
    justify-content: space-around !important;
    align-items: center !important;
    gap: var(--8) !important;
}

.admin-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: var(--8) !important;
    flex: 1 !important;
}

.admin-card img {
    width: 65px !important;  /* Аккуратный размер аватарок */
    height: 65px !important;
    border-radius: 50% !important; /* Идеально круглые аватары админов */
    object-fit: cover !important;
    border: 1px solid #fcb73e !important; /* Золотой контур */
    box-shadow: 0 4px 10px rgba(0,0,0,0.4) !important;
    transition: transform 0.4s ease !important;
}

.admin-card:hover img {
    transform: scale(1.1) rotate(5deg) !important; /* Легкая живая реакция при наведении */
}

.admin-card span {
    font-family: var(--font) !important;
    font-size: 0.65rem !important; /* Мелкий, аккуратный шрифт Макса */
    font-weight: 400 !important;
    color: rgb(var(--dark900)) !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-align: center !important;
}

/* --- СЕКЦИЯ 2: ТЕКСТОВЫЙ БЛОК С ПРОКРУТКОЙ --- */
.text-block h3, .links-block h3 {
    font-family: var(--font) !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #fcb73e !important; /* Фирменное золото */
    letter-spacing: 2px !important;
    margin-bottom: var(--12) !important;
    text-transform: uppercase !important;
    text-align: center !important;
    padding: 0 !important;
}

.scroll-text {
    max-height: 100px !important; /* Высота зоны текста, если он будет длинным */
    overflow-y: auto !important; /* Включает аккуратную вертикальную прокрутку */
    padding-right: var(--4) !important;
}

/* Кастомизация полосы прокрутки для текста под дизайн */
.scroll-text::-webkit-scrollbar { width: 4px !important; }
.scroll-text::-webkit-scrollbar-track { background: transparent !important; }
.scroll-text::-webkit-scrollbar-thumb { background: rgb(var(--secondary400) / 0.3) !important; border-radius: 2px !important; }

.scroll-text p {
    font-family: verdana, sans-serif !important;
    font-size: 0.85rem !important;
    line-height: 140% !important;
    color: rgb(var(--text900)) !important;
    margin-bottom: var(--8) !important;
    text-align: justify !important;
}

/* --- СЕКЦИЯ 3: БЛОК НАВИГАЦИОННЫХ ССЫЛОК --- */
.links-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* Ссылки в два аккуратных ряда */
    gap: var(--8) !important;
    flex-grow: 1 !important;
    align-content: center !important;
}

.links-grid a {
    font-family: verdana, sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: bold !important;
    color: rgb(var(--primary400)) !important; /* Родной сиреневый цвет Макса */
    background: rgb(var(--secondary400) / 0.1) !important;
    padding: var(--6) var(--8) !important;
    border-radius: var(--8) !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

.links-grid a:hover {
    color: #111114 !important;
    background: #fcb73e !important; /* Ссылка горит золотом при наведении */
    box-shadow: 0 2px 8px rgba(252, 183, 62, 0.3) !important;
}

/* АДАПТИВНОСТЬ: На экранах мобильных телефонов таблица перестроится в один вертикальный столбец */
@media screen and (max-width: 768px) {
    .mercury-news-table {
        grid-template-columns: 1fr !important;
    }
    .admin-block {
        padding: var(--8) 0 !important;
    }
}


/**************************************************************
* ОБНОВЛЕННАЯ НАВИГАЦИЯ ФОРУМА (#pun-navlinks) — ФИКС ВЫПАДАШЕК
**************************************************************/

/* Контейнер навигации и центрирование */
#pun-navlinks .container {
    padding: var(--16) 0 !important;
    display: flex !important;
    justify-content: center !important;
}

/* Флекс-линейка для главных кнопок */
#pun-navlinks ul {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    gap: var(--16) !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Важный фикс: даем родительским li относительный контекст, 
   чтобы выпадающие списки открывались строго ПОД ними */
#pun-navlinks ul li {
    position: relative !important;
    display: inline-block !important;
}

/* Стилизуем каждую главную кнопку-медальон в уюте */
#pun-navlinks ul li > a {
    font-family: var(--font) !important;
    font-size: 0.7rem !important; 
    font-weight: 400 !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    
    color: #a1a1aa !important;
    background: #161619 !important; 
    
    padding: var(--8) var(--20) !important;
    border: 1px solid rgb(var(--secondary400) / 0.15) !important;
    border-radius: 2rem !important; 
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    display: inline-block !important;
    
    transition: color 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                background 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                text-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Ховер главных кнопок (Мягкое золотое загорание) */
#pun-navlinks ul li > a:hover {
    color: #111114 !important; 
    background: #fcb73e !important; 
    border-color: #fcb73e !important;
    box-shadow: 0 0 15px rgba(252, 183, 62, 0.5), 
                0 0 30px rgba(252, 183, 62, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    
    transition: color 0.5s cubic-bezier(0.33, 1, 0.68, 1), 
                background 0.5s cubic-bezier(0.33, 1, 0.68, 1), 
                border-color 0.5s cubic-bezier(0.33, 1, 0.68, 1), 
                box-shadow 0.5s cubic-bezier(0.33, 1, 0.68, 1) !important;
}

/* ==========================================================================
   ЖЕЛЕЗОБЕТОННЫЙ ФИКС ВЫПАДАЮЩИХ МЕНЮ (Убираем скрытые швы)
   ========================================================================== */
#pun-navlinks ul li ul, 
#pun-navlinks ul li .subnav, 
#pun-navlinks ul li .adsubnav {
    display: none !important; /* Полностью убираем из структуры в покое */
    position: absolute !important;
    top: 100% !important; /* Вплотную к нижней линии главной кнопки */
    left: 50% !important;
    z-index: 99999 !important; /* Поверх абсолютно всего на форуме */
    
    width: 180px !important;
    min-width: 180px !important;
    
    /* УБИРАЕМ ВСЕ ВНУТРЕННИЕ ОТСТУПЫ КОНТЕЙНЕРА:
       Больше никаких пустых невидимых зон внутри выпадашки */
    padding: 0 !important; 
    margin: -2px 0 0 0 !important; /* Минимальный наезд наверх, чтобы склеить шов */
    
    background: #161619 !important; 
    border: 1px solid rgb(var(--secondary400) / 0.2) !important;
    border-radius: 1rem !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden !important; /* Скругляет углы самих внутренних ссылок по краям */
}

/* Проявляем меню строго при наведении на родительский li */
#pun-navlinks ul li:hover ul,
#pun-navlinks ul li:hover .subnav,
#pun-navlinks ul li:hover .adsubnav {
    display: block !important; /* Возвращаем стандартный блочный вид вместо флекса */
}

/* СБРОС СТИЛЕЙ ДЛЯ СТРОК СПИСКА */
#pun-navlinks ul li ul li,
#pun-navlinks ul li .subnav li,
#pun-navlinks ul li .adsubnav li {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;   /* Намертво убираем паддинги у li */
    margin: 0 !important;    /* Намертво убираем маргины у li */
    float: none !important;  /* Гасим любые старые флоаты MyBB */
}

/* ССЫЛКИ ВНУТРИ ВЫПАДАЮЩЕГО СПИСКА (Теперь они монолитны) */
#pun-navlinks ul li ul li a,
#pun-navlinks ul li .subnav a,
#pun-navlinks ul li .adsubnav a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    
    /* Переносим весь объем и паддинги СТРОГО внутрь самой ссылки.
       Теперь кликабельная зона занимает 100% пространства строки, без швов */
    padding: var(--12) var(--16) !important; 
    
    font-size: 0.7rem !important;
    text-transform: none !important; 
    letter-spacing: 1px !important;
    color: #a1a1aa !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important; /* Убираем индивидуальные скругления, чтобы не было щелей */
    text-align: left !important; 
    
    transition: background 0.2s ease, color 0.2s ease !important;
}

/* Ховер ссылок внутри выпадашки (Мягкое золото) */
#pun-navlinks ul li ul li a:hover,
#pun-navlinks ul li .subnav a:hover,
#pun-navlinks ul li .adsubnav a:hover {
    color: #111114 !important;
    background: #fcb73e !important; 
}


/* ==========================================================================
   ФАЗА АНОМАЛИИ: НАВИГАЦИЯ И ВЫПАДАШКИ МЯГКО ТЛЕЕТ ВИННЫМ ОГНЕМ
   ========================================================================== */

body.horror-active #pun-navlinks ul li > a {
    background: #050505 !important; 
    border-color: #58111A !important; 
    color: #58111A !important; 
    box-shadow: inset 0 0 12px #000000 !important;
    text-shadow: none !important;
    transition: background 0.8s ease, border-color 0.8s ease, color 0.8s ease, box-shadow 0.8s ease !important;
}

body.horror-active #pun-navlinks ul li > a:hover {
    color: #ffffff !important;
    background: #58111A !important;
    border-color: #A12532 !important;
    box-shadow: 0 0 15px rgba(88, 17, 26, 0.7), 0 0 30px rgba(161, 37, 50, 0.3), inset 0 0 5px rgba(0, 0, 0, 0.5) !important;
    text-shadow: 0 0 4px #A12532 !important;
    transition: background 0.7s cubic-bezier(0.33, 1, 0.68, 1), border-color 0.7s cubic-bezier(0.33, 1, 0.68, 1), color 0.7s cubic-bezier(0.33, 1, 0.68, 1), box-shadow 0.7s cubic-bezier(0.33, 1, 0.68, 1), text-shadow 0.7s cubic-bezier(0.33, 1, 0.68, 1) !important;
}

/* Выпадашка в хорроре тоже чернеет и наливается бургундским контуром */
body.horror-active #pun-navlinks ul li ul, 
body.horror-active #pun-navlinks ul li .subnav, 
body.horror-active #pun-navlinks ul li .adsubnav {
    background: #050505 !important;
    border-color: #58111A !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8), inset 0 0 10px #000000 !important;
}

body.horror-active #pun-navlinks ul li ul li a,
body.horror-active #pun-navlinks ul li .subnav a,
body.horror-active #pun-navlinks ul li .adsubnav a {
    color: #58111A !important;
}

body.horror-active #pun-navlinks ul li ul li a:hover,
body.horror-active #pun-navlinks ul li .subnav a:hover,
body.horror-active #pun-navlinks ul li .adsubnav a:hover {
    color: #ffffff !important;
    background: #58111A !important;
}


/**************************************************************
* ФИКСИРОВАННЫЙ ВИДЖЕТ С ЗАКЛАДКАМИ «РЕТРОГРАДНЫЙ МЕРКУРИЙ» (200x380)
**************************************************************/

#pun-status {
    background: transparent !important; border: none !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important; width: 0 !important; height: 0 !important;
}

.mercury-welcome {
    width: 330px !important;
    height: 380px !important; /* Увеличили высоту, чтобы уместить темы */
    padding: var(--24) var(--16) !important;
    box-sizing: border-box !important;
    
    position: fixed !important;
    top: 30% !important;
    left: 20px !important;
    transform: translateY(-50%) !important;
    z-index: 9999 !important;
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important; /* Равномерно распределяет элементы по высоте */
    align-items: center !important;
    
    background: #111114 !important; /* Уютный темный бархат шапки */
    border: 2px solid rgb(var(--secondary400) / 0.15) !important;
    border-radius: 2rem !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
    transition: background 0.8s ease, border-color 0.8s ease, box-shadow 0.8s ease !important;
}

/* --- АВАТАРНЫЙ ДИСК --- */
.welcome-avatar-zone { flex-shrink: 0 !important; margin: 0 0 var(--4) 0 !important; }
.welcome-avatar-disk {
    width: 80px !important; height: 80px !important; /* Чуть уменьшили для баланса */
    border-radius: 50% !important; position: relative !important; overflow: hidden !important;
    border: 1px solid #fcb73e !important; box-shadow: 0 4px 12px rgba(0,0,0,0.5) !important;
}
.welcome-avatar-front, .welcome-avatar-back {
    position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important;
    background-size: cover !important; background-position: center !important; border-radius: 50% !important;
}
.welcome-avatar-front {
    z-index: 3 !important; opacity: 1; filter: blur(0px) grayscale(0) brightness(1) !important;
    -webkit-mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), transparent 0%, #000 0%);
    mask-image: radial-gradient(circle at var(--x, 50%) var(--y, 50%), transparent 0%, #000 0%);
    transition: opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1), filter 1.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.welcome-avatar-back {
    z-index: 1 !important; background-image: url('https://forumstatic.ru') !important;
    filter: brightness(0.2) contrast(1.5) saturate(0.6) !important; opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* --- ИНФОБЛОК (Текст) --- */
.welcome-info-zone {
    flex-shrink: 0 !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; gap: var(--4) !important;
    padding: 0 !important; margin: 0 0 var(--12) 0 !important;
    width: 100% !important;
}
.welcome-username {
    font-family: "novelist", "Georgia", serif !important; font-size: 1.2rem !important;
    font-weight: 300 !important; letter-spacing: 1px !important; color: #fcb73e !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.6) !important; text-align: center !important;
}
.welcome-usertitle {
    font-family: verdana, sans-serif !important; font-size: 0.7rem !important;
    color: #a1a1aa !important; text-align: center !important;
}

/* --- ЦЕНТР: БЛОК ЛИЧНЫХ ЗАКЛАДОК (Новое) --- */
.welcome-bookmarks-zone {
    width: 100% !important;
    flex-grow: 1 !important; /* Занимает всё свободное пространство в центре */
    margin-bottom: var(--16) !important;
    box-sizing: border-box !important;
    border-top: 1px solid rgb(var(--secondary400) / 0.1) !important;
    border-bottom: 1px solid rgb(var(--secondary400) / 0.1) !important;
    padding: var(--8) 0 !important;
}

.bookmarks-scroll {
    max-height: 100px !important; /* Ограничиваем высоту списка */
    overflow-y: auto !important; /* Включаем аккуратный внутренний скролл */
    display: flex !important;
    flex-direction: column !important;
    gap: var(--4) !important;
}

/* Кастомизация тонкого скролла закладок */
.bookmarks-scroll::-webkit-scrollbar { width: 3px !important; }
.bookmarks-scroll::-webkit-scrollbar-track { background: transparent !important; }
.bookmarks-scroll::-webkit-scrollbar-thumb { background: rgb(252 183 62 / 0.2) !important; border-radius: 2px !important; }

/* Стилизация каждой строчки-ссылки в уюте */
.bookmarks-scroll a {
    font-family: verdana, sans-serif !important;
    color: #a1a1aa !important; /* Серебро */
    padding: var(--4) var(--6) !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--8) !important;
    border-radius: var(--6) !important;
    transition: all 0.3s ease !important;
}

.bookmark-icon {
    font-size: 0.75rem !important;
    color: rgb(var(--primary400)) !important; /* Родной сиреневый Макса */
    transition: color 0.3s ease !important;
}

/* Ховер ссылки (Загорается золотом) */
.bookmarks-scroll a:hover {
    color: #111114 !important;
    background: #fcb73e !important;
}
.bookmarks-scroll a:hover .bookmark-icon {
    color: #111114 !important;
}

/* --- НИЗ: ИНДИКАТОР СВЯЗИ (ЛС) --- */
.welcome-pm-zone { flex-shrink: 0 !important; width: 100% !important; }
.welcome-pm-link {
    display: flex !important; align-items: center !important; justify-content: center !important; gap: var(--8) !important;
    background: #161619 !important; padding: var(--8) var(--12) !important;
    border: 1px solid rgb(var(--secondary400) / 0.1) !important; border-radius: 2rem !important;
    color: #a1a1aa !important; font-family: var(--font) !important; font-size: 0.65rem !important;
    letter-spacing: 1px !important; box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
    width: 100% !important; box-sizing: border-box !important;
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.pm-icon { font-size: 0.9rem !important; transition: transform 0.4s ease !important; }
.welcome-pm-link.has-new-pm {
    color: #111114 !important; background: #fcb73e !important; border-color: #fcb73e !important;
    font-weight: bold !important; animation: pmPulse 2s infinite ease-in-out !important;
}
@keyframes pmPulse { 0%, 100% { box-shadow: 0 0 10px rgba(252, 183, 62, 0.4); } 50% { box-shadow: 0 0 20px rgba(252, 183, 62, 0.7); } }
.welcome-pm-link:hover { color: #111114 !important; background: #fcb73e !important; border-color: #fcb73e !important; box-shadow: 0 0 15px rgba(252, 183, 62, 0.5) !important; }


/* ==========================================================================
   ФАЗА АНОМАЛИИ: ЗАКЛАДКИ ТОЖЕ ТЕМНЕЮТ И ТЛЕЮТ
   ========================================================================== */
.mercury-welcome.distort .welcome-avatar-back { opacity: 1 !important; }
.mercury-welcome.distort .welcome-avatar-front {
    opacity: 0 !important; filter: blur(4px) grayscale(1) brightness(0.1) !important;
    -webkit-mask-image: radial-gradient(circle at var(--x) var(--y), transparent 45%, rgba(0,0,0,0.8) 55%, #000 70%) !important;
    mask-image: radial-gradient(circle at var(--x) var(--y), transparent 45%, rgba(0,0,0,0.8) 55%, #000 70%) !important;
}
body.horror-active .mercury-welcome {
    background: #050505 !important; border-color: #58111A !important;
    box-shadow: inset 0 0 20px #000000, 0 10px 30px rgba(0,0,0,0.8) !important;
}
body.horror-active .welcome-username { color: #9e999a !important; text-shadow: 0 0 6px #A12532, 0 0 15px #58111A, 0 0 35px #000000 !important; }
body.horror-active .welcome-usertitle { color: #58111A !important; text-shadow: 0 0 4px rgba(88, 17, 26, 0.5) !important; }
body.horror-active .welcome-pm-link { background: #050505 !important; border-color: #58111A !important; color: #58111A !important; box-shadow: inset 0 0 8px #000000 !important; animation: none !important; }
body.horror-active .welcome-pm-link .pm-num { color: #A12532 !important; }
.welcome-avatar-front.no-avatar-icon { background: #161619 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.welcome-avatar-front.no-avatar-icon::before { content: "\f68a" !important; font-family: var(--fa) !important; font-weight: 300 !important; font-size: 2rem !important; color: #fcb73e !important; text-shadow: 0 0 10px rgba(252, 183, 62, 0.4) !important; }

/* Закладки в хорроре: рамки темнеют, ссылки наливаются багровым */
body.horror-active .welcome-bookmarks-zone {
    border-color: rgba(88, 17, 26, 0.4) !important;
}
body.horror-active .bookmarks-scroll a {
    color: #58111A !important;
}
body.horror-active .bookmarks-scroll a .bookmark-icon {
    color: #58111A !important;
}
body.horror-active .bookmarks-scroll a:hover {
    color: #ffffff !important;
    background: #58111A !important;
}
body.horror-active .bookmarks-scroll a:hover .bookmark-icon {
    color: #ffffff !important;
}

/* Стилизация строк закладок с кнопкой удаления */
.bookmark-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: var(--4) !important;
}

.bookmark-item a {
    flex-grow: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Красный крестик удаления ссылки */
.bookmark-delete {
    color: rgb(var(--danger) / 0.5) !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    cursor: pointer !important;
    padding: 0 var(--4) !important;
    transition: color 0.3s ease !important;
}

.bookmark-delete:hover {
    color: rgb(var(--danger)) !important;
}

/* Зона инпутов под списком ссылок */
.bookmark-inputs {
    display: grid !important;
    grid-template-columns: 1fr 1fr 30px !important;
    gap: var(--4) !important;
    margin-top: var(--8) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 var(--4) !important;
}

/* Компактные текстовые поля */
.bookmark-inputs input {
    font-family: shortcomings, verdana, sans-serif !important;
    font-size: 0.65rem !important;
    padding: var(--4) var(--6) !important;
    height: 22px !important;
    background: rgb(0 0 0 / 0.4) !important;
    border: 1px solid rgb(var(--secondary400) / 0.1) !important;
    border-radius: var(--4) !important;
    margin: 0 !important;
    color: #a1a1aa !important;
}

.bookmark-inputs input:focus {
    border-color: #fcb73e !important;
}

/* Маленькая золотая кнопка плюс */
#bk-add-btn {
    height: 22px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.8rem !important;
    line-height: 20px !important;
    background: #fcb73e !important;
    color: #111114 !important;
    border-radius: var(--4) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#bk-add-btn:hover {
    box-shadow: 0 0 8px rgba(252, 183, 62, 0.5) !important;
}

/* АНОМАЛИЯ ДЛЯ ИНПУТОВ: В хорроре поля чернеют, кнопка наливается винным цветом */
body.horror-active .bookmark-inputs input {
    background: #050505 !important;
    border-color: #58111A !important;
    color: #58111A !important;
}
body.horror-active #bk-add-btn {
    background: #58111A !important;
    color: #ffffff !important;
    box-shadow: none !important;
}
body.horror-active .bookmark-delete {
    color: #58111A !important;
}
body.horror-active .bookmark-delete:hover {
    color: #dc2626 !important;
}

/**************************************************************
* КЕЙС-ИНВЕНТАРЬ СЛЕВА (Чистый CSS без багов памяти)
**************************************************************/

.mercury-inventory {
    width: 200px !important;
    height: 380px !important;
    padding: var(--24) var(--16) !important;
    box-sizing: border-box !important;
    
    /* Железобетонная фиксация на левом боку монитора строго под паспортом */
    position: fixed !important;
    top: 540px !important; 
    left: 20px !important; 
    z-index: 9998 !important;
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    
    background: #111114 !important; /* Уютный темный бархат вашей шапки */
    border: 2px solid rgb(var(--secondary400) / 0.15) !important;
    border-radius: 2rem !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6) !important;
    transition: background 0.8s ease, border-color 0.8s ease, box-shadow 0.8s ease !important;
}

/* ВЕРХ: ЗАГОЛОВОК ШКАТУЛКИ */
.inventory-title-zone {
    display: flex !important; 
    flex-direction: column !important; 
    align-items: center !important; 
    gap: var(--6) !important;
    width: 100% !important; 
    margin-bottom: var(--12) !important; 
    border-bottom: 1px solid rgb(var(--secondary400) / 0.1) !important; 
    padding-bottom: var(--8) !important;
}
.cabinet-icon { font-size: 1.4rem !important; color: #fcb73e !important; }
.inventory-main-title { font-family: "novelist", "Georgia", serif !important; font-size: 0.95rem !important; letter-spacing: 1px !important; color: #fcb73e !important; text-transform: uppercase !important; text-align: center !important; }

/* ЦЕНТР: ЗОНА С ВЕЩАМИ */
.inventory-content-zone {
    width: 100% !important;
    flex-grow: 1 !important;
    box-sizing: border-box !important;
}

.inventory-scroll {
    max-height: 250px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--6) !important;
    width: 100% !important;
}

/* СТИЛИЗАЦИЯ ПРЕДМЕТОВ */
.inv-item {
    display: flex !important; 
    align-items: center !important; 
    gap: var(--8) !important;
    background: #161619 !important; 
    padding: var(--6) var(--12) !important; 
    border-radius: var(--8) !important;
    border: 1px solid transparent !important; 
    box-sizing: border-box !important; 
    width: 100% !important; 
    cursor: help !important; 
    transition: all 0.3s ease !important;
}

.inv-item span { 
    font-family: verdana, sans-serif !important; 
    font-size: 0.75rem !important; 
    color: #a1a1aa !important; 
    white-space: nowrap !important; 
    overflow: hidden !important; 
    text-overflow: ellipsis !important; 
}
.inv-icon { font-size: 0.85rem !important; }

/* КЛАССЫ РЕЛИКВИЙ */
.item-medal .inv-icon { color: #fcb73e !important; } /* Золотая медаль */
.item-gift .inv-icon { color: rgb(var(--primary400)) !important; } /* Сиреневый подарок */
.item-object .inv-icon { color: #e4e4e7 !important; } /* Серебряный свиток */

.inv-item:hover { 
    border-color: rgb(var(--secondary400) / 0.2) !important; 
    background: rgb(0 0 0 / 0.4) !important; 
}

/* ФАЗА АНОМАЛИИ: ШКАТУЛКА ПРЕДМЕТОВ ПОКРЫВАЕТСЯ ПЕПЛОМ */
body.horror-active .mercury-inventory { 
    background: #050505 !important; 
    border-color: #58111A !important; 
    box-shadow: inset 0 0 20px #000000, 0 10px 30px rgba(0,0,0,0.8) !important; 
}
body.horror-active .inventory-title-zone { border-color: rgba(88, 17, 26, 0.4) !important; }
body.horror-active .cabinet-icon { color: #58111A !important; }
body.horror-active .inventory-main-title { color: #58111A !important; text-shadow: 0 0 4px rgba(88, 17, 26, 0.5) !important; }
body.horror-active .inv-item { background: #050505 !important; border-color: #58111A !important; }
body.horror-active .inv-item span, 
body.horror-active .inv-item .inv-icon { color: #58111A !important; text-shadow: none !important; }




/**************************************************************
* СТРУКТУРА КАТЕГОРИЙ И ПОДФОРУМОВ С ВЫВОДОМ ПОСЛЕДНЕЙ ТЕМЫ
**************************************************************/

/* --- 1. ПАНЕЛЬ КАТЕГОРИИ (Шапка раздела) --- */
.category h2, .punbb .main h2 {
    background: transparent !important;
    padding: var(--16) 0 !important;
    margin-bottom: var(--8) !important;
    text-align: left !important;
}

.category h2 span, .punbb .main h2 span {
    font-family: "novelist", "Georgia", serif !important;
    font-size: 1.1rem !important;
    font-weight: 300 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    color: #fcb73e !important; /* Наше золото */
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5) !important;
}

/* --- 2. СТРОКА ПОДФОРУМА (Состояние покоя — уютный бархат) --- */
.punbb .main tr, 
.punbb .main .forum-row {
    border: 1px solid rgb(var(--secondary400) / 0.1) !important;
    border-radius: 1.5rem !important; /* Округлые плашки */
    margin-bottom: var(--12) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3) !important;
    
    /* Выстраиваем плашку во флекс-монолит: описание слева, тема справа */
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: var(--16) var(--24) !important;
    box-sizing: border-box !important;
    
    transition: background 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                border-color 0.8s ease,
                box-shadow 0.8s ease !important;
}

/* Принудительный сброс нативных табличных свойств MyBB под флексы */
.punbb .main table, .punbb .main tbody { display: block !important; width: 100% !important; }
.punbb .main tr { width: 100% !important; }
.punbb .main td { display: block !important; padding: 0 !important; border: none !important; background: transparent !important; }

/* ЗОНА А: Левая часть (Название подфорума, описание и счетчики) */
.punbb .main .tcl {
    width: 60% !important; /* Мягко делим пространство */
    flex-grow: 1 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.punbb .main .tcl h3 a {
    font-family: "Georgia", serif !important;
    font-size: 1.05rem !important;
    font-weight: bold !important;
    color: #3e3c3d !important; /* Контрастное серебро */
    letter-spacing: 1px !important;
    transition: color 0.3s ease !important;
}

.punbb .main .tcl h3 a:hover { color: #fcb73e !important; }

.punbb .main .tcl .forumdesc {
    font-family: verdana, sans-serif !important;
    font-size: 0.8rem !important;
    line-height: 140% !important;
    color: #a1a1aa !important;
    margin-top: var(--4) !important;
    display: block !important;
    transition: color 0.6s ease, text-shadow 0.6s ease !important;
}

/* Скрываем только пустые столбцы цифр статистики, чтобы не раздувать плашку */
.punbb .main .tc2, 
.punbb .main .tc3 {
    display: none !important; 
}


/* ==========================================================================
   ЗОНА Б: ПРАВАЯ ЧАСТЬ — ВЫВОД ПОСЛЕДНЕЙ АКТИВНОЙ ТЕМЫ (Тот самый возврат)
   ========================================================================== */
.punbb .main .tcr {
    width: 280px !important; /* Фиксированная зона под блок темы справа */
    min-width: 280px !important;
    flex-shrink: 0 !important;
    text-align: right !important; /* Текст темы прижимается к правому краю плашки */
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    
    font-family: verdana, sans-serif !important;
    font-size: 0.75rem !important;
    line-height: 140% !important;
    color: #a1a1aa !important; /* Серебряный цвет по умолчанию */
    
    transition: color 0.6s ease, text-shadow 0.6s ease !important;
}

/* Ссылка на саму последнюю тему внутри блока .tcr */
.punbb .main .tcr a {
    color: rgb(var(--primary400)) !important; /* Родной сиреневый цвет темы Макса */
    font-weight: bold !important;
    transition: color 0.3s ease !important;
}

.punbb .main .tcr a:hover {
    color: #fcb73e !important; /* Подсвечивается золотом при наведении */
}

/* Оформление ника автора последнего поста и даты (MyBB выводит их тегом em или текстом) */
.punbb .main .tcr em,
.punbb .main .tcr span {
    display: block !important; /* Автор и дата аккуратно переносятся на новую строчку под темой */
    font-style: normal !important;
    font-size: 0.7rem !important;
    color: rgb(var(--text900) / 0.5) !important; /* Чуть блеклый цвет для баланса */
}


/* ==========================================================================
   ФАЗА АНОМАЛИИ: ВСЯ СТРУКТУРА ПОДФОРУМОВ И ТЕМ ПАДЕТ В СТРАШНУЮ ТЬМУ
   ========================================================================== */

/* Заголовки категорий тлеют винным огнем */
body.horror-active .category h2 span, 
body.horror-active .punbb .main h2 span {
    color: #050505 !important;
    text-shadow: 0 0 6px #A12532, 0 0 15px #58111A, 0 0 35px #000000 !important;
}

/* Плашки подфорумов чернеют, наливаясь бургундским контуром */
body.horror-active .punbb .main tr,
body.horror-active .punbb .main .forum-row {
    background: #050505 !important;
    border-color: #58111A !important;
    box-shadow: inset 0 0 15px #000000 !important;
}

/* Названия подфорумов вспыхивают багровым */
body.horror-active .punbb .main .tcl h3 a {
    color: #050505 !important;
    text-shadow: 0 0 5px #A12532, 0 0 12px #58111A, 0 0 25px #000000 !important;
}

/* Парадные описания локаций превращаются в статичные багровые предупреждения */
body.horror-active .punbb .main .tcl .forumdesc {
    color: #050505 !important; 
    text-shadow: 0 0 6px #58111A, 0 0 12px #1f0205 !important;
}

/* БЛОК ПОСЛЕДНЕЙ ТЕМЫ В ХОРРОРЕ: Текст темы чернеет и горит тусклым винным цветом */
body.horror-active .punbb .main .tcr {
    color: #58111A !important;
}

body.horror-active .punbb .main .tcr a {
    color: #050505 !important;
    text-shadow: 0 0 4px #A12532, 0 0 10px #58111A !important;
    pointer-events: none !important; /* Блокируем клики по темам во время искажения */
}

body.horror-active .punbb .main .tcr em,
body.horror-active .punbb .main .tcr span {
    color: #58111A !important;
    text-shadow: none !important;
}

/* ==========================================================================
   ЦЕНТРИРОВАННОЕ ОФОРМЛЕНИЕ КАТЕГОРИЙ С НОВЫМ ШРИФТОМ
   ========================================================================= */

/* Контейнер шапки категории: Выравниваем всё строго ПО ЦЕНТРУ */
.category h2, 
.punbb .main h2 {
    background: transparent !important;
    padding: var(--16) 0 var(--20) 0 !important; 
    margin: var(--32) 0 var(--12) 0 !important; 
    
    /* ЖЕСТКИЙ ФИКС ЦЕНТРИРОВАНИЯ: Смещаем текст и иконку на середину плашки */
    display: flex !important;
    justify-content: center !important; 
    align-items: center !important;
    gap: var(--12) !important;
    text-align: center !important;
    position: relative !important;
    
    border-bottom: none !important; 
}

/* Сам текст названия категории: Меняем шрифт на благородный Serif */
.category h2 span, 
.punbb .main h2 span {
    font-family: "Cinzel", "Georgia", "Times New Roman", serif !important;
    font-size: 1.3rem !important; /* Слегка увеличили размер для центральной композиции */
    font-weight: 300 !important;
    letter-spacing: 5px !important; /* Увеличили шаг букв для мистики */
    text-transform: uppercase !important;
    color: #fcb73e !important; /* Фирменное золото */
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-block !important;
    text-shadow: 0 0px 0px rgba(0,0,0,0.6) !important;
    
    transition: color 0.6s ease, text-shadow 0.6s ease !important;
}

/* Пульсирующий маркер-звезда (Встает строго по центру перед текстом) */
.category h2::before,
.punbb .main h2::before {
    content: "\f699" !important; /* Код звезды из Font Awesome 6 Pro */
    font-family: var(--fa) !important;
    font-weight: 300 !important;
    font-size: 0.9rem !important;
    color: #fcb73e !important;
    display: inline-block !important;
    margin-top: -2px !important; /* Микро-выравнивание иконки по высоте шрифта */
    animation: starPulse 4s infinite ease-in-out !important;
}

@keyframes starPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; filter: drop-shadow(0 0 2px rgba(252, 183, 62, 0.3)); }
    50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 6px rgba(252, 183, 62, 0.6)); }
}

/* Плотный градиентный разделитель под категорией (Центрирован) */
.category h2::after,
.punbb .main h2::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important; 
    
    /* Золотая нить лениво тает по краям экрана, акцентируя внимание на центре */
    background: linear-gradient(90deg, 
        rgba(17, 17, 20, 0) 0%, 
        #b89742 25%, 
        #f5e0a3 50%, 
        #d4af37 75%, 
        rgba(17, 17, 20, 0) 100%) !important;
        
    box-shadow: 0 1px 4px rgba(252, 183, 62, 0.2) !important;
    transition: background 0.8s ease, box-shadow 0.8s ease !important;
}


/* ==========================================================================
   ФАЗА АНОМАЛИИ: ЦЕНТРИРОВАННАЯ ШАПКА КАТЕГОРИИ ИСКАЖАЕТСЯ
   ========================================================================== */

body.horror-active .category h2 span, 
body.horror-active .punbb .main h2 span {
    color: #050505 !important;
    text-shadow: 0 0 6px #A12532, 0 0 15px #58111A, 0 0 35px #000000 !important;
}

body.horror-active .category h2::before,
body.horror-active .punbb .main h2::before {
    animation: none !important;
    content: "\f111" !important;
    font-size: 0.5rem !important;
    color: #58111A !important;
    filter: drop-shadow(0 0 4px #A12532) !important;
}

body.horror-active .category h2::after,
body.horror-active .punbb .main h2::after {
    background: linear-gradient(90deg, 
        rgba(5, 5, 5, 0) 0%, 
        #450a0a 25%, 
        #dc2626 50%, 
        #991b1b 75%, 
        rgba(5, 5, 5, 0) 100%) !important;
        
    box-shadow: 0 0 12px #991b1b, 0 0 4px #450a0a !important;

}

/* --- НОВЫЙ ЯВНЫЙ ГРАДИЕНТНЫЙ РАЗДЕЛИТЕЛЬ ПОД КАТЕГОРИЕЙ --- */
.category h2::after,
.punbb .main h2::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 3px !important; /* Делаем линию более плотной и заметной */
    
    /* Красивый трехслойный золотой градиент, уходящий по краям в прозрачность */
    background: linear-gradient(90deg, 
        rgba(17, 17, 20, 0) 0%, 
        #b89742 20%, 
        #f5e0a3 50%, 
        #d4af37 80%, 
        rgba(17, 17, 20, 0) 100%) !important;
        
    /* Добавляем легкий объемный блик-свечение по центру линии */
    box-shadow: 0 1px 4px rgba(252, 183, 62, 0.2) !important;
    
    transition: background 0.8s cubic-bezier(0.25, 1, 0.5, 1),
                box-shadow 0.8s ease !important;
}


/* ==========================================================================
   ФАЗА АНОМАЛИИ: РАЗДЕЛИТЕЛЬ РАСКАЛЯЕТСЯ ДО КРОВИ
   ========================================================================== */

/* Текст категории тонет во мраке, загораясь винным пламенем */
body.horror-active .category h2 span, 
body.horror-active .punbb .main h2 span {
    color: #050505 !important;
    text-shadow: 0 0 6px #A12532, 0 0 15px #58111A, 0 0 35px #000000 !important;
}

/* Левая искорка превращается в мертвую бургундскую точку */
body.horror-active .category h2::before,
body.horror-active .punbb .main h2::before {
    animation: none !important;
    content: "\f111" !important;
    font-size: 0.5rem !important;
    color: #58111A !important;
    filter: drop-shadow(0 0 4px #A12532) !important;
}

/* Наш плотный разделитель «вскипает» тяжелым, тлеющим кроваво-черным маревом */
body.horror-active .category h2::after,
body.horror-active .punbb .main h2::after {
    /* Переключаем градиент линии на глубокие винные и угольные оттенки */
    background: linear-gradient(90deg, 
        rgba(5, 5, 5, 0) 0%, 
        #450a0a 20%, 
        #dc2626 50%, 
        #991b1b 80%, 
        rgba(5, 5, 5, 0) 100%) !important;
        
    /* Зловещее неоновое свечение запекшейся крови под линией */
    box-shadow: 0 0 12px #991b1b, 0 0 4px #450a0a !important;
}

/**************************************************************
* ФИКСИРОВАННАЯ КНОПКА «НОВЫЕ СООБЩЕНИЯ» (Правый бок, 60x60)
**************************************************************/

.mercury-new-posts-btn {
    width: 60px !important;
    height: 60px !important;
    box-sizing: border-box !important;
    
    /* Железобетонная фиксация у ПРАВОГО края экрана */
    position: fixed !important;
    top: 50% !important; /* Центрируем по вертикали зеркально левому паспорту */
    right: 300px !important; /* Отступ от правого края монитора */
    transform: translateY(-50%) !important;
    z-index: 9999 !important; /* Парит поверх всего контента */
    
    border-radius: 50% !important;
    overflow: hidden !important;
    background: #111114 !important; /* Уютный темный бархат шапки */
    border: 2px solid #fcb73e !important; /* Наше фирменное золото */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    
    /* Запускаем ленивую, мягкую пульсацию-призыв в уюте */
    animation: newPostsPulse 3s infinite ease-in-out !important;
    transition: background 0.8s ease, border-color 0.8s ease, box-shadow 0.8s ease !important;
}

/* Стилизация иконки компаса/созвездий внутри */
.new-posts-btn-front {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 3 !important;
}

.new-posts-btn-front i {
    font-size: 1.6rem !important;
    color: #fcb73e !important; /* Золотая иконка */
    transition: transform 0.4s ease, color 0.4s ease !important;
}

/* Скрытая хоррор-подложка под иконкой */
.new-posts-btn-back {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background-image: url('https://forumstatic.ru') !important; /* Ваша текстура изнанки */
    filter: brightness(0.2) contrast(1.5) saturate(0.6) !important;
    opacity: 0;
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Анимация мягкого дыхания золотого медальона */
@keyframes newPostsPulse {
    0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 10px rgba(252, 183, 62, 0.2); border-color: #fcb73e; }
    50% { box-shadow: 0 10px 35px rgba(0, 0, 0, 0.6), 0 0 20px rgba(252, 183, 62, 0.5); border-color: #f5e0a3; transform: translateY(-50%) scale(1.05); }
}

/* ХОВЕР КНОПКИ: Иконка делает аккуратный мистический полуоборот */
.mercury-new-posts-btn:hover .new-posts-btn-front i {
    transform: rotate(45deg) scale(1.1) !important;
    color: #ffffff !important; /* Иконка вспыхивает белым */
}


/* ==========================================================================
   ФАЗА АНОМАЛИИ: КНОПКА СВЯЗИ ИСКАЖАЕТСЯ (По сигналу JS)
   ========================================================================== */

/* Верхняя иконка тает, выпуская изнанку */
.mercury-new-posts-btn.distort .new-posts-btn-back { opacity: 1 !important; }
.mercury-new-posts-btn.distort .new-posts-btn-front i {
    opacity: 0 !important;
    filter: blur(4px) grayscale(1) brightness(0.1) !important;
}

/* Весь корпус кнопки чернеет и наливается бургундским вином */
body.horror-active .mercury-new-posts-btn {
    animation: none !important; /* Намертво тушим пульсацию уюта */
    background: #050505 !important;
    border-color: #58111A !important;
    box-shadow: inset 0 0 12px #000000, 0 10px 30px rgba(0, 0, 0, 0.8) !important;
    transform: translateY(-50%) scale(1) !important; /* Возвращаем к исходному размеру */
}

/* Ховер в хоррор-режиме: кнопка тлеет зловещим багровым неоном */
body.horror-active .mercury-new-posts-btn:hover {
    border-color: #A12532 !important;
    box-shadow: inset 0 0 12px #000000, 0 0 20px rgba(88, 17, 26, 0.7) !important;
}