@media (max-width: 500px) {
  /* ========================================================
   1. ФУНДАМЕНТ: КОРОБЧАТАЯ МОДЕЛЬ И ГЛОБАЛЬНЫЕ СБРОСЫ
   ======================================================== */

   :root, .purple {
  /* --------- ТИПОГРАФИКА --------- */

  /* Декоративные заголовки */
  --type-page-title: 400 1.5rem/1.2 var(--font-display);
  --type-section-title: 400 1rem/1.3 var(--font-display);
  --type-decorative: 400 1.2rem/1.3 var(--font-display-alt);
  --type-decorative-small: 600 14px / 16.97px var(--font-display);

  /* Основной текст */
  --type-heading: 600 0.9rem/1.3 var(--font-body);
  --type-body: 400 0.65rem / 1.2 var(--font-body);
  --type-body-strong: 600 0.75rem/1.2 var(--font-body);
  --type-small: 350 0.6rem / 1.1 var(--font-body);

  /* Интерфейс */
  --type-label: 600 0.65rem/1.3 var(--font-body);
  --type-button: 600 0.65rem/1.2 var(--font-display);
  --type-input: 400 0.65rem/1.2 var(--font-body);

  /* Технический текст */
  --type-meta: 500 0.55rem / 1.3 var(--font-body);
  --type-code: 400 0.7rem/1.5 var(--font-mono);

  /* Межбуквенные интервалы */
  --tracking-display: 0.04em;
  --tracking-label: 0.06em;
  --tracking-button: 0.05em;

  /* --------- РАДИУСЫ --------- */

  --radius-none: 0;
  --radius-micro: 2px;
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 14px;
  --radius-pill: 999px;

   }

  *,
  *::before,
  *::after {
    box-sizing: border-box !important;
  }

  html,
  body {
    min-width: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    /* Лекарство для Safari: обрезаем вылеты, сохраняя плавный скролл */
    overflow-x: clip !important;
    overflow-y: visible !important;
    -webkit-text-size-adjust: none;
    overflow-wrap: break-word;
    background-color: #271e15;
  }

  body {
    position: relative;
    -webkit-overflow-scrolling: touch !important;
    z-index: 1;
    background-size: cover;
    background: #271e15;
    background-blend-mode: normal;
  }

  /* Усмиряем body:before, чтобы он не распирал экран */
  html body:before {
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .forum-header {
    display: block; */
    position: absolute;
        top: -276px;
    left: 0;
    width: 100%;
    background-image: var(--theme-hero);
        height: 276px;
    background-position-x: 0px;
    margin:0 !important;
  }

  #header-theme-switcher {
        top: -32px;
        left: -124px;
        transform: scale(.4);
  }

    #announcements {
        width: calc(100% - 200px);
        position: absolute;
        top: -142px;
        right: calc(8px - (100vw - 100%));
        left: auto;
  }

  #announcements .inner {
        display: flex;
        overflow: auto hidden;
        gap: 2px;
        flex-direction: column;
        align-items: stretch;
        max-height: 144px;
        overflow-y: scroll;
        width: 100%;
        flex-wrap: nowrap;
}

.announcement {
padding: 2px 3px !important;
        overflow: visible;
}

.header-hello {
    width: 100%;
    position: absolute;
    text-align: center;
    font-family: var(--font-display);
    color: var(--text-inverse);
    top: 68px;
    opacity: .8;
    left: 0;
}


  .custom-header-widget {
width: 100vw;
        padding: 0 12px 0 16px;
        display: flex;
        justify-content: center;
        position: absolute;
        top: 90px;
  }

  .info-toggle-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: var(--radius-small);
    cursor: pointer;
    user-select: none;
    transition: background-color 0.3s ease;
    position:static !important;
    width: auto;
    justify-content: center;
    text-transform: uppercase;
    top: 249px;
    left: 24px;
    z-index: 9999;
    width: 100%;
  }

  /* ========================================================
   2. ГЛАВНЫЙ КОНТЕЙНЕР ФОРУМА (#pun)
   ======================================================== */
  #pun,
  .punbb {
    min-width: 0 !important;
    max-width: 100vw !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 4px 0 4px !important;
    float: none;
    border: none;
    margin-top: 292px !important;
  }

  body #pun {
        background: var(--theme-body-top) no-repeat top center, var(--theme-body) repeat;
        background-size: 100% auto;
        z-index: 0;
  }

  .punbb .section,
  .punbb .main {
    width: 100%;
  }

  /* ========================================================
   3. ОСТАЛЬНОЙ ПОЛЬЗОВАТЕЛЬСКИЙ КОД
   ======================================================== */
  .modal_wrap,
  #character {
    display: none;
  }

  html td:not(.tipsy-inner *),
  html th:not(.tipsy-inner *) {
    padding: 8px;
  }

  /* Исключение: переопределяем отступы только внутри тултипа */
  body #tooltip td,
  body #tooltip th {
    padding: 4px !important; /* Укажите здесь 0 или любое другое компактное значение */
  }

  ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }

  .punbb .main td {
    padding: 0;
  }
  #pun-ulinks .container {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: flex-start !important;

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;

    overflow-x: scroll !important;
    overflow-y: hidden;

    gap: 8px;
    white-space: nowrap;

    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }

  #pun-ulinks .container::-webkit-scrollbar {
    display: none;
  }

  #pun-ulinks .container > li {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content;
  }

  #pun-ulinks .container > li > a {
    white-space: nowrap;
  }

  #pun-ulinks .container > li {
    flex: 0 0 auto;
  }

  #pun-ulinks li,
  #pun-ulinks li a {
    text-transform: lowercase;
  }

  body #pun .post {
    scroll-margin-top: 50px;
    margin: 0px 8px;
    margin: 0px 0px 12px;
  }

  body #pun #pun-navlinks .container {
    position: fixed;
    z-index: 2000;
    justify-content: space-evenly;
    box-sizing: border-box;
    width: 100%;
    gap: 16px;
    padding: 1em 1em;
    top: 0;
    background: var(--surface-contrast-bg);
  }

  #pun ul.container::after {
  content: none !important;
  display: none !important;
}


  body #pun .custom-audio-player,
  body #pun .postopiscy,
  body #pun .best-post,
  body #pun .fludery,
  body #pun .best-ep {
    display: none;
  }

  body #pun #html-footer,
  body #pun #banners {
    width: 100%;
  }

  #html-footer .banners_wrap {
    width: 100%;
  }

  body #pun #pun-main .category > div > table {
    position: relative;
    margin-left: 0px;
    width: auto;
  }

  body #pun #pun-main .category > div > table::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -152px;
    width: 0px;
  }

  body #pun #pun-main .category td.tcl {
    padding: 16px 16px 0px 16px;
  }

  body #pun .category td.tcl,
  body #pun #pun-searchtopics td.tcl {
    width: 100% !important;
  }

  #pun-index td.tcl {
    width: 100%;
  }

  .category tr {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--surface-soft-border);
    flex-direction: column;
  }

  .punbb div.icon,
  .fsbox {
    width: 16px;
    height: 16px;
    background-size: contain;
  }

  .forum .intd,
  .usertable .intd {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  .fs-box .intd {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
  }

  body #pun .fs-box .user-avatar,
  body #pun .avatar-image,
  body #pun #pun-index .user-avatar {
    height: 24px !important;
    width: 24px !important;
  }

  body #pun #pun-index td.tcr {
    grid-template-columns: 24px minmax(0, 1fr) !important;
    gap: 0px 6px !important;
  }

  body #pun #pun-index td.tcr {
    gap: 0px;
    width: 100%;
  }

  #pun-main .category,
  #pun-stats {
            margin: 0 0 12px 0;
  }

  body #pun.category .forum-header-row td.tc2 {
    margin-right: 12px;
  }

  body #pun .forum .user-avatar {
    display: none;
  }
  body #pun .forum .tcl {
    width: 60%;
  }
  body #pun .forum .tcr {
    width: 40%;
    text-transform: uppercase;
    font-size: 10px;
    text-align: right;
  }

  punbb h2 span,
  #pun-stats > h2 > span:before {
    font-size: 20px !important;
  }

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

  .punbb .post .container {
    display: flex;
    flex-direction: column;
  }

  body #pun .post-content .spoiler-box > div {
    background: var(--page-bg-img) !important;
    cursor: pointer;
    padding-left: 10px !important;
    color: var(--text-inverse);
    font: var(--type-decorative-small);
    padding: 6px 12px;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    gap: 8px;
    font-size: 12px;
    font-weight: normal !important;
  }

  body #pun .punbb .quote-box blockquote {
    padding: 1em;
}

  body #pun .punbb .quote-box cite,
  body #pun .punbb .code-box strong.legend {
    font-size: 1em;
    min-height: 24px;
    margin-bottom: 0.5em;
  }

  body #pun .punbb .quote-box,
  body #pun .punbb .code-box {
    margin: 1em 0em 1em 0em;
  }

  body #pun .punbb .post .post-author {
        display: flex;
        width: 100%;
        margin-top: 0;
        margin: 0 !important;
        border-radius: 0 !important;
        padding: 8px;
  }

  body #pun .punbb .post-body {
    margin-left: 0 !important;
    width:100% !important;
  }

  body #pun .punbb .post-box {
    padding: 1em 1em;
  }

  body #pun .punbb .post h3 span {
    margin-left: 12px;
  }

  body #pun .punbb .post h3 {
        margin-bottom: 0px;
  }

  body #pun .linkst,
  body #pun .linksb,
  body #pun .subscribelink,
  body #pun .subscribelink a {
    font-size: 0.9em !important;
  }

.post-author ul {
    display: grid !important;
    grid-template-columns: 100px repeat(2, minmax(0, 1fr));
    grid-template-areas:
      "avatar author author"
      "avatar title title"
      "avatar posts respect"
      "avatar fld2 fld3";
    gap: 8px;
    padding: 15px;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    list-style: none;
  }

  .post-author .pa-avatar {
    grid-area: avatar;
    width: 100px;
    height: 100px;
    align-self: start;
    min-width: 0;
  }

  .post-author .pa-avatar img {
    display: block;
    width: 100px;
    height: 100px;
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
    border-radius: var(--bradius-small);
  }

  .post-author .pa-author {
    grid-area: author;
    position: relative;
    min-width: 0;
    margin: 0;
        padding-left: 24px !important;
        overflow-wrap: anywhere;
        padding-top: 0 !important;
  }

  .post-author .pa-title {
    grid-area: title;
    min-width: 0;
    font: var(--type-meta);
    text-align: left !important;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
            margin-bottom: 0;
        padding-left: 24px !important;
        margin-bottom: -12px !important;
        padding-top: 0 !important;
                margin-top: -8px !important;
  }

  .post-author .pa-author::before {
    top: 0 !important;
    left: 0 !important;
  }

  .post-author .pa-posts {
    grid-area: posts;
  }

  .post-author .pa-respect {
    grid-area: respect;
  }

  .post-author .pa-fld2 {
    grid-area: fld2;
  }

  .post-author .pa-fld3 {
    grid-area: fld3;
  }

  .post-author .pa-fld1,
  .post-author .pa-fld4,
  .post-author .pa-fld5,
  .post-author .pa-ip,
  .post-author .pa-online,
    .post-author .last-visit {
    display: none !important;
  }

  /* 2. Зоны авторов */
  body #pun .pa-avatar {
    grid-area: avatar;
    align-self: center;
    min-width: 100px;
  }

  body #pun .pa-avatar img {
    max-width: 100px;
    max-height: 100px;
    height: auto;
    border-radius: 4px;
    display: block;
    object-fit: cover;
    border-radius: 4px;
  }


  body #pun li.pa-online {
    display:none;
  }

  html .punbb .show_user_posts .post-author ul,
  html .punbb .search .post-links .post-author ul {
    gap: 0px 12px;
  }
  html .punbb .show_user_posts .pa-replies,
  html .punbb .search .post-links .pa-replies {
    display: flex;
  }

  html .punbb .show_user_posts .post-links,
  html .punbb .search .post-links {
    display: none;
  }

  body #pun #pun-respect table.tcl {
    width: 50% !important;
    flex-grow: 1;
  }

  .pa-author .acchide {
    display: none;
  }

  .post-author .pa-fld5 {
    display: none;
  }

  .pa-title {
    grid-area: title;
    text-align: center;
    font-size: 12px;
    margin-top: 4px;
    align-self: start;
    padding: 0 !important;
    text-shadow: none !important;
    font-size: 10px !important;
  }

  .pa-posts {
    grid-area: posts;
  }
  .pa-respect {
    grid-area: respect;
  }
  .pa-fld3 {
    grid-area: fld3;
  }
  .pa-fld2 {
    grid-area: fld2;
  }

  .pa-posts,
  .pa-respect,
  .pa-fld3,
  .pa-fld2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    font-size: 13px;
    color: #333;
    width: 60px !important;
  }

  .fld-name {
    display: block;
    font-size: 0;
  }

  .pa-posts .fld-name::before {
    content: "✉";
    font-size: 20px;
    color: #00796b;
  }

  body #pun .pa-online {
    position: absolute;
    top: 9px;
    left: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    font-size: 0 !important;
    z-index: 10;
    animation: smoothOnlinePulse 2.5s ease-in-out infinite;
  }

  .post-author .online .pa-online {
    background-color: #ebe8db;
    box-shadow: 0 0 3px 2px #a3906e;
  }

  body #pun .pa-fld1,
  body #pun .pa-fld2,
  body #pun .pa-fld4,
  body #pun .pa-ip {
    display: none;
  }

  /* Навигация (Бронебойный вариант) */

  /* 1. Жестко фиксируем видимость самих кнопок */
body #pun #pun-navlinks .container > li:not(#navpm) {
    display: inline-block !important;
    padding-right: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body #pun #pun-navlinks .container > li > a {
    text-align: center !important;
    font-size: 16px !important;
    display: inline-block !important;
    position: relative !important;
    visibility: visible !important;
  }

  /* 2. Прячем текстовые надписи */
  body #pun #pun-navlinks .container > li > a > span {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }

  /* 3. Воскрешаем иконки Font Awesome */
  body #pun #pun-navlinks .container > li > a::before {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    display: inline-block !important;
    visibility: visible !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    -webkit-font-smoothing: antialiased !important;
  }

  /* 4. Привязка юникодов (с железобетонным приоритетом) */
  body #pun #navindex > a::before {
    content: "\f015" !important;
  }
  body #pun #navuserlist > a::before {
    content: "\f0c0" !important;
  }
  body #pun #navsearch > a::before {
    content: "\f002" !important;
  }
  body #pun #navprofile > a::before {
    content: "\f007" !important;
  }
  body #pun #navpm > a::before {
    content: "\f0e0" !important;
  }
  body #pun #navadmin > a::before {
    content: "\f013" !important;
  }
  body #pun #navprofiles > a::before {
    content: "\f2bd" !important;
  }
  body #pun #navlogout > a::before {
    content: "\f08b" !important;
  }
  body #pun #navregister > a::before {
    content: "\f234" !important;
  }
  body #pun #navlogin > a::before {
    content: "\f2f6" !important;
  }
  body #pun #navpr_1 > a::before {
    content: "\f0a1" !important;
  }

  #pun-navlinks li {
    display: inline;
    padding-right: 0;
  }

  #pun-ulinks .container {
    margin-left: auto;
    margin-right: auto;
  }

  #pun-ulinks li,
  #pun-ulinks li a {
    font-size: 10px;
    padding: 0;
  }

  body #pun #html-footer {
    position: absolute;
    bottom: -123px;
    margin-left: 0px;
    padding: 8px;
  }
  
  #pun-navlinks li#navpm span.num_msg {
        /* font-size: 15px !important; */
        height: 16px !important;
        line-height: 20px !important;
        display: flex;
        align-items: center;
        padding: 0px 4px !important;
        font-size: 12px !important;
    }
  #pun-navlinks li#navpm {display: flex; flex-direction:row;}

  .aftertext {
    font-size: 8px;
    padding-bottom: 12px;
    line-height: 110%;
  }

  .hello {
    font-size: 9px;
    top: 99px;
    width: 41%;
    text-align: center;
    left: 90px;
  }

  .shapka-logo {
    display: block;
    width: 100%;
    height: 113px;
    background: url(https://forumstatic.ru/files/001c/bf/08/73932.png) no-repeat
      top center;
    position: absolute;
    top: 100px !important;
    background-size: contain;
  }

  .forum tr .tc2,
  .forum tr .tc3 {
    display: none;
  }

  #pun-viewforum .punbb tbody.hasicon td.tcl,
  #pun-searchtopics .punbb tbody.hasicon td.tcl {
    width: 100%;
    padding: 0px !important;
  }

  .forum tr {
    flex-direction: row;
    gap: 0px;
    padding: 8px;
  }

  .punbb tbody.hasicon td.tcl {
    width: 100%;
    padding: 6px;
  }

  body #pun .forum tr td.tcl,
  body #pun .forum tr .tcl span {
    min-width: 0;
    max-width: 100%;
    flex: 1;
    overflow: hidden;
  }

  .forum .icon,
  #pun-searchtopics .icon {
    flex-shrink: 0;
  }

  #viewprofile table {
    display: flex;
    grid-auto-flow: row;
    flex-direction: column;
  }

  #viewprofile table tr {
    width: 100%;
    display: flex;
    flex-direction: column;
  }

  #viewprofile #profile-left {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-content: center;
    align-items: center;
  }

  #viewprofile #profile-right {
    gap: 6px;
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  #viewprofile #profile-right li {
    background: var(--surface-soft-bg);
    border-radius: var(--radius-small);
  }

  #viewprofile li {
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    padding: 6px;
    text-align: center;
    flex-grow: 1;
    justify-content: center;
  }

  #viewprofile li span,
  #viewprofile li strong {
    width: auto;
    padding: 0 !important;
  }

  #profile-right li strong {
    padding-left: 1em;
  }

  #viewprofile .container {
    padding: 0;
  }

  #viewprofile li span {
    margin-left: 0;
  }

  body #pun #profilenav {
    margin: 0;
    width: 100%;
  }

  body #pun #profile form.container {
    padding: 0;
    display: flex;
    flex-direction: column;
    margin-top: 10px;
  }

  #profilenav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  #profilenav li {
    display: flex;
    background: var(--surface-soft-bg);
    border-radius: var(--radius-small);
    padding: 4px;
    flex-grow: 1;
    text-align: center;
    justify-content: center;
  }

  #profilenav li.isactive {
    background: var(--surface-soft-border);
  }

  .punbb fieldset legend {
    margin: 0 0 11px -2px;
  }

 body #pun .punbb #profile.formal fieldset {
  width: 100% !important;
  margin-left: 0 !important;
}

  .punbb fieldset legend span {
    margin: 0;
  }

  #profile p.formsubmit {
    align-items: flex-start;
    flex-direction: column;
    justify-content: space-between;
    width: 90%;
  }

  body #pun #pun-status .item3,
  body #pun #pun-status .item4,
  body #pun #pun-status .item2 {
    display: none;
  }

  #pun-stats .container {
    padding: 12px;
  }

  body #pun #pun-about {
    height: unset;
  }

  .banners_wrap {
    height: 69px;
    overflow-y: scroll;
  }

  .punbb .formal .container {
    padding: 0;
  }

  .editor-top-row-wrapper {
    flex-wrap: wrap;
    width: 100%;
    justify-content: flex-end;
  }

  #form-buttons table tr {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
  }

  #post-form .formsubmit {
    padding: 0 1em;
    margin: 1em 0 0 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: unset;
  }

  /* Ссылки в посте */
  .post-links ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .post-links .pl-email.profile {
    order: 1;
  }
  .post-links .pl-email.pm {
    order: 2;
  }
  .post-links .pl-email.email {
    order: 3;
    margin-right: auto;
  }

  .post-links .pl-delete {
    order: 4;
  }
  .post-links .pl-edit {
    order: 5;
  }
  .post-links .pl-quote {
    order: 6;
  }
  .post-links .pl-reports {
    order: 7;
  }

  .post-links ul li a {
    font-size: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-medium);
    background-color: transparent;
    transition: background-color 0.2s ease;
  }

  .post-links ul li a:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }

  .post-links ul li a::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: var(--text-secondary);
  }

  .post-links .pl-email.profile a::before {
    content: "\f007";
  }
  .post-links .pl-email.pm a::before {
    content: "\f0e0";
  }
  .post-links .pl-email.email a::before,
  #pun-messages .post-links .pl-email.email a::before {
    content: "\f1fa";
  }
  .post-links .pl-delete a::before {
    content: "\f2ed";
  }
  .post-links .pl-edit a::before {
    content: "\f044";
  }
  .post-links .pl-quote a::before {
    content: "\f10e";
  }
  .post-links .pl-reports a::before {
    content: "\f071";
  }

  .punbb .post-links li {
    padding: 0 !important;
    background: var(--surface-soft-bg);
    border-radius: var(--radius-small);
  }

  .online-list table {
    font-size: 11px;
  }
  body #pun .online-list table,
  body #pun .online-list tbody {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  body #pun .online-list table {
    padding: 6px;
  }
  body #pun .online-list .tcl {
    width: 20%;
  }

  #pun-modviewforum tr,
  #pun-userlist tr,
  #pun-statistic tr,
  #pun-respect tr,
  #pun-positive tr {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    justify-content: space-between;
  }

  #pun-searchtopics tr:not(.modal-inner *) {
    display: flex;
    flex-wrap: wrap;
    gap: 0px;
    padding: 8px;
    box-sizing: border-box;
    justify-content: space-between;
  }

  #pun-userlist tr {
    padding: 12px;
  }
  #pun-userlist tr td,
  #pun-userlist tr th {
    box-sizing: border-box;
  }
  body #pun #pun-userlist tr .username {
    width: 40%;
  }
  body #pun #pun-userlist tr .title,
  body #pun #pun-userlist tr .user_title {
    width: 60%;
  }
  body #pun #pun-userlist tr .relation,
  body #pun #pun-userlist tr .posts,
  body #pun #pun-userlist tr .num_posts {
    width: 20%;
    flex-grow: 1;
  }
  body #pun #pun-userlist tr .registered,
  body #pun #pun-userlist tr .last_visit {
    width: 30%;
    flex-grow: 1;
    text-align: left;
  }
  body #pun #pun-userlist tr .relation,
  body #pun #pun-userlist tr .posts,
  body #pun #pun-userlist tr .num_posts {
    text-align: left;
  }

  body #pun #pun-modviewforum td,
  body #pun #pun-searchtopics td,
  body #pun #pun-userlist td,
  body #pun #pun-statistic td,
  body #pun #pun-respect td,
  body #pun #pun-positive td {
    width: unset;
  }

  body #pun #pun-respect table {
    margin: 12px;
    width: unset;
  }

  html #pun-respect .tc4,
  html #pun-positive .tc4,
  html #pun-respect .tcr,
  html #pun-positive .tcr {
    flex-basis: 100%;
  }

  #pun-respect .tc3,
  html #pun-positive .tc3 {
    flex-basis: 30%;
  }

  body #pun #pun-userlist tr .title,
  html body #pun #pun-userlist tr .user_title {
    width: 60%;
  }

  #pun-userlist .usertable .container {
    padding: 12px;
  }

  body #pun ft {
    text-align: justify;
    line-height: 140%;
    display: block;
    font-weight: 300;
    margin-top: 3px;
    font-size: 8px;
  }

  .category .forum-header-row h3 a {
    font-size: 16px;
  }

  html #pun-messages div:not(#form-buttons) > table tr {
    display: flex;
    align-items: center;
    flex-flow: wrap;
    padding: 8px;
  }

  body #pun #pun-messages .tcl.pmtcl1 {
    box-sizing: border-box;
    width: 100% !important;
    text-align: left;
    padding: 0;
  }

  body #pun #pun-messages .tc2.pmtc22 {
    box-sizing: border-box;
    width: 50% !important;
    text-align: left;
  }

  body #pun #pun-messages .tc3.pmtc33 {
    box-sizing: border-box;
    width: 40% !important;
    text-align: left;
    padding: 4px;
  }

  body #pun #pun-messages .post-links ul li a {
    font-size: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
  }

  body #pun #pun-messages .post-links ul li a::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 14px;
    color: inherit;
  }

  body #pun #pun-messages .post-links .pl-email a::before,
  body #pun #pun-messages .post-links .email a::before {
    content: "\f1fa";
  }

  #pun-messages .post-links .pl-email {
    margin-right: auto;
  }

  body #pun #pun-messages .post-box {
    padding: 0;
  }

  body #pun #pun-messages .post-author {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  body #pun .category .forum-header-row .tc2,
  body #pun .category .forum-header-row .tc3 {
    display: none;
  }

  body #pun .formal #image-area,
  body #pun .formal #spoiler-area,
  body #pun .formal #table-area,
  body #pun .formal #video-area {
    padding: 1.5em;
    box-sizing: border-box;
    position: absolute;
    right: unset;
    top: 80px;
    z-index: 2;
    width: 99%;
  }

  body #pun .formal #keyboard-area {
    padding: 1.5em;
    box-sizing: border-box;
    position: absolute;
    right: unset;
    top: 118px;
    z-index: 2;
    width: 99%;
    display: flex;
    flex-wrap: wrap;
  }

  body #pun .hotkeys_help {
    display: none;
  }



  /*новости*/
  
    .novosti {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .news-sidebar {
    gap: 12px !important;
  }

  .novosti .news-activists {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .news-episodes {
    gap: 12px;
  }
  
    .news-episodes,
  .news-episode,
  .news-post {
    overflow: visible !important;
  }

  .novosti:before,
  .secrets:before {
    width: 63px;
    height: 83px;
    background-size: cover;
  }

  body #pun .novosti,
  body #pun .secrets {
    padding: 13px 15px 13px 15px;
  }

  body #pun .targ-title {
    left: 0;
    top: 0;
    margin-left: 57px;
    margin-bottom: 14px;
  }

  body #pun .targ-title p {
    font-size: 9px !important;
  }

  body #pun .targ-body,
  body #pun .secrets-body {
    margin: 16px 0px;
    padding: 16px;
    font-size: 11px;
  }

  body #pun .targ-body {
    height: 450px;
    overflow-y: scroll;
  }

  body #pun .secrets-body {
    height: auto;
  }

  body #pun .news-episode {
    margin: 0px;
    padding: 16px;
    font-size: 11px;
    height: 250px;
    overflow-y: scroll;
  }

  body #pun .news-activists {
    margin: 0;
  }

  .news-flood a,
  .news-posts a {
    font-size: 13px;
  }

  /*сюжет*/
  body #pun .plot-body {
    font-size: 1.1em;
    height: 500px;
    overflow-y: scroll;
    padding: calc(100% - 95%);
  }

  /* гостевая*/
.guestbook {
    height: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    background: var(--theme-artwork);
    gap: 16px;
}

.orange .guestbook {
      background-position: bottom center;
}

.orange .guest-text {
  color: var(--text-main);
}

  /*список ролей*/
  body #pun .role-section-box.full-width-section::before {
    width: 60px;
    height: 80px;
    background-size: contain;
  }

  body #pun .roles-list-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  body #pun .role-section-box.full-width-section h2 {
    font-size: 17px;
    width: auto;
    margin-left: 53px;
    margin-bottom: 0px;
  }

  body #pun .role-two-columns {
    display: flex;
    flex-direction: column;
    margin-left: 0;
    width: auto;
  }

  body #pun .roles-list-king {
    margin-left: 0;
    width: auto;
  }

  .role-section-box {
    padding: 16px;
  }

  .role-section-box .role-section-title {
    margin-bottom: 12px;
  }

  .sigimage {
    max-height: 60px;
  }

  #notifications-stored tbody,
  #notifications tbody {
    display: flex;
    flex-direction: column;
    padding: 12px;
    gap: 24px;
  }

  #notifications-stored .unread-notifications .modal-inner {
    max-height: 99vh !important;
  }
  
      #pun-navlinks li:has(.unreads), #pun-ulinks li:has(.unreads):not([data-number-unread="0"]) {
        order: -1;
    }

  body #pun .hvStickerPackModal.active {
    width: 90vw !important;
  }

  body #pun .notify-link {
    top: 2px !important;
    left: 1px !important;
  }

  body #pun .punbb textarea {
    padding: 8px;
  }

  body #pun .post-body iframe {
    max-width: 100%;
  }

  /* Укрощение непослушного тултипа */
  body #tooltip {
    /* 1. Блокируем скриптовый left и жестко центрируем по горизонтали */
    left: 74% !important;
    transform: translateX(-50%) !important;

    /* 2. Защищаем границы экрана */
    max-width: 90vw !important; /* Тултип никогда не будет шире 90% экрана */
    width: max-content !important; /* Позволяем ему быть компактным, если текста мало */

    /* 3. Принудительно разрешаем перенос текста, если скрипт его запретил */
    white-space: normal !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;

    /* 4. Сбрасываем случайные смещения */
    margin: 0 !important;
  }

  /* Пробиваем "стеклянные стены": жестко вытаскиваем пагинацию наверх */
  body #pun .linkst,
  body #pun .linksb {
    position: relative !important;
    z-index: 50 !important; /* Ставим слой выше любого случайного перекрытия */
    pointer-events: auto !important; /* Насильно включаем реакцию на клики */
  }

  /* Дополнительно поднимаем сами ссылки внутри пагинации */
  body #pun .linkst a,
  body #pun .linksb a,
  body #pun .linkst strong,
  body #pun .linksb strong {
    position: relative !important;
    z-index: 51 !important;
    display: inline-block !important; /* Увеличиваем площадь клика */
  }

  /* ========================================
   MOBILE SIDE MENU
   ======================================== */

  @media (max-width: 500px) {
    /* Кнопка-гамбургер */
    #custom-side-menu-btn {
      top: 12px;
      left: 12px;
      padding: 8px;
    }

    /* Общий контейнер */
    #custom-side-menu {
      width: 90vw;
      max-width: 420px;
      height: 100vh;
      height: 100dvh;
      left: -100%;
    }

    #custom-side-menu.is-open {
      left: 0;
    }

    /* Левая панель вкладок */
    .side-menu-nav {
      width: 75px;
      flex-shrink: 0;
      padding: 10px 0 10px 6px;
    }

    .side-tab {
      padding: 12px 4px;
      gap: 4px;
      border-radius: 8px 0 0 8px;
    }

    .tab-icon {
      font-size: 20px;
      margin-bottom: 4px;
    }

    .tab-text {
      font-size: 9px;
      letter-spacing: 0;
      line-height: 1.2;
      overflow-wrap: anywhere;
    }

    /* Правая панель */
    .side-menu-content-area {
      width: auto;
      flex: 1;
      min-width: 0;
      padding: 12px;
    }

    /* Заголовки */
    .menu-section h4 {
      font-size: 12px;
    }

    /* Ссылки */
    .menu-section a {
      padding: 10px;
      font-size: 11px;
      overflow-wrap: anywhere;
    }
  }

      #custom-side-menu-btn {
        opacity: 1 !important;
        z-index: 99999999 !important;
        cursor: pointer;
                border: 1px solid var(--surface-contrast-border);
        background: var(--surface-contrast-bg);
                top: unset !important;
        bottom: 2% !important;
    }
}