/******************************************************
MAGIA — ВЕРХНЕЕ поле «Своего стиля» (дизайн форума)
Режим «Своего стиля»: «Да. Отключить extra.css».
Нижнее поле — стандартное: копия экстры + база (без мобильного
блока базы: у Магии своя мобильная версия, ≤899px).

Перенесено с прода magia-frpg.ru 07.10.2026 (значения прода,
сверено попиксельно на 5 страницах × 4 ширинах).
Чем отличается от кода прода — в конце файла, раздел «Перенос».
*******************************************************/

/*Нижнее поле — только этой строкой и только первой*/
@import url(style_cs.1791487579.css);

/*Скрипты сайта magiascript.ru: генератор эпизодов, квесты и т.п.*/
@import url(https://magiascript.ru/design/bundle-overrides.css);

/*Иконки: FontAwesome базы (кнопки редактора), Material Symbols и FontAwesome Pro Магии*/
@import url('https://forumstatic.ru/files/001b/df/32/99049.css');
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
@import url("https://kit-pro.fontawesome.com/releases/v6.6.0/css/pro.min.css");

/*Шрифты*/
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://forumstatic.ru/files/001a/fa/19/46585.css?v=1'); /*Open Sans*/
@import url('https://forumstatic.ru/files/001a/fa/19/85244.css'); /*Comforter*/
@import url('//magiascript.ru/css/fonts/cormorantsc.css?v=2');
@import url('//magiascript.ru/css/fonts/lora.css?v=3');

@font-face {
  font-family: 'Alchemy';
  font-style: normal;
  font-weight: 500;
  src: url(//forumstatic.ru/files/001a/fa/19/54225.otf);
}

/*Ресурсы экстры с доменом форума: шрифт значков и иконки «Поделиться».
  Шрифт браузер берёт только с домена страницы — на проде здесь magia-frpg.ru*/
@font-face {
  font-family: 'mybb';
  src: url('https://mojitostudio.rusff.me/style/res/font/icons.woff2?3') format('woff2'),
       url('https://mojitostudio.rusff.me/style/res/font/icons.woff?3') format('woff'),
       url('https://mojitostudio.rusff.me/style/res/font/icons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.social {
  background-image: url('https://mojitostudio.rusff.me/i/social.2.png');
}

.social-webtalk {
  background-image: url('https://mojitostudio.rusff.me/i/social-webtalk.png');
}

/******************************************************
Переменные
*******************************************************/
:root {
  /*Шрифты*/
  --font-family: "Lora", sans-serif;
  --second-family: "Roboto", sans-serif;
  --third-family: "Alchemy", sans-serif;
  --font3: "Verdana", sans-serif;
  --font4: "Playfair Display", sans-serif;
  --font5: "Inter", sans-serif;
  --msr: "Material Symbols Rounded";
  --fa: "Font Awesome 6 Pro", "Font Awesome 6 Brands";

  /*Цвета шрифтов*/
  --main-text-color: #343434;
  --secondary-text-color: #656565;
  --third-text-color: #c9c3ad;
  --text-shadow: 0 0 8px #f6eed1;

  /*Акценты*/
  --accent-red: #924035;
  --accent-blue: #3b4559;
  --accent-yellow: #b8a467;
  --link-hover: var(--accent-red);

  /*Фоны и рамки*/
  --opacity-cover: rgba(108, 101, 80, 0.1);
  --cover: #bbb59f;
  --light-cover: #beb8a2;
  --pun-bg: var(--cover);
  --sec-bg: var(--light-cover);
  --borders-color: #9b917a;
  --borders-color-lighter: #bdb39c;
  --borders-for-dark-bg: #575d6a;
  --scrollbar-bg: #00000026;
  --noise: url(https://forumstatic.ru/files/0016/01/4e/87978.png) repeat;

  /*Размеры*/
  --pwidth: 240px;
  --pad1: 10px 70px;
  --pad2: 5px 70px;
  --pad3: 5px 10px;

  /*Переменные базы (нижнее поле) — под Магию*/
  --font-basic: var(--font-family);
  --font-accent: var(--font-family);
  --font-size: 12px;
  --line-height: normal;
  --text-basic: var(--main-text-color);
  --text-light: var(--secondary-text-color);
  --link-basic: var(--accent-red);
  --link-basic-hover: var(--accent-blue);
  --bg-page: transparent;
  --bg-block: transparent;
  --bg-block-alt: transparent;
  --border-basic: transparent;
  --accent: var(--accent-blue);
  --accent-text: var(--third-text-color);
  --radius: 0;
  --gap: 0;
}

/******************************************************
Скрываем элементы
*******************************************************/
/*Основа уже прячет шапку движка, заголовки служебных блоков, «Отредактировано», «Поделиться».
  Здесь — что Магия прячет сверх того*/
.modlist,
#pun-live-rusff,
#pun-title .title-logo,
#pun-announcement h2,
#pun-ulinks li.item3,
.subforums,
#post-form fieldset legend,
#pun-userlist thead,
#profile-right li#pa-invites,
#profile-right li#pa-fld2,
.post[data-group-id="3"] .post-rating {
  display: none;
}

/*категории: счётчики тем и сообщений (шапку таблицы прячет основа)*/
.category .tc2,
.category .tc3 {
  display: none;
}

/*из HTML верх прода: поля ввода на страницах профиля, смены пароля и аватара скрыты —
  зачем, не знаю (вопрос к Ярославе), перенесено как было*/
#pun-profile input,
#pun-changepass input,
#pun-upavatar input {
  display: none;
}

/*на главной в последнем сообщении перенос не нужен*/
#pun-index .tcr br,
.tclcon > br {
  display: none;
}

/*Что основа прячет, а Магия показывает*/
/*заголовок страницы — виден везде, кроме главной*/
#pun-main h1 {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 10px;
  overflow: visible;
  clip: auto;
  white-space: normal;
  font-size: 20px;
}

#pun-index #pun-main h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/*подпись формы поиска участников*/
#userlist legend span {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/*«»» в хлебных крошках, пустые абзацы (дают отступ), просмотры тем, перенос в последнем сообщении подфорума*/
.crumbs strong + em {
  display: inline;
}

.post-content p:empty,
.clearer {
  display: block;
}

.forum .tc3 {
  display: block;
}

.category .tcr br {
  display: inline;
}

/******************************************************
Скроллбары
*******************************************************/
/* Для Chrome, Edge, Safari */
@supports selector(::-webkit-scrollbar) {
  *::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  *::-webkit-scrollbar-track {
    border-radius: 10px;
    background: var(--light-cover);
  }

  *::-webkit-scrollbar-thumb {
    background: var(--accent-blue);
    border-radius: 5px;
  }

  *::-webkit-scrollbar-thumb:hover {
    background: var(--accent-blue);
    cursor: default;
  }
}

/* Для Firefox */
@supports not selector(::-webkit-scrollbar) {
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--accent-blue) var(--light-cover);
  }
}

/******************************************************
Стили
*******************************************************/
/*Общее*/
* {
  margin: 0;
  padding: 0;
  border: none;
}

/*шрифт страницы вне .punbb — браузерный по умолчанию: его наследует шапка-скрипт*/
body {
  font: initial;
  color: initial;
  overflow-x: hidden;
}

html {
  background: var(--main-text-color) url(https://forumstatic.ru/files/001c/52/c6/87881.jpg) no-repeat fixed top center/cover;
}

/*фон ещё раз — фиксированным слоем на весь экран*/
body::before {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  min-width: 100vw;
  min-height: 100vh;
  z-index: -10;
  background: var(--main-text-color) url(https://forumstatic.ru/files/001c/52/c6/87881.jpg) no-repeat fixed top center/cover;
}

#pun {
  width: 1100px;
  margin: 462px auto 30px;
  padding: 20px 0 50px;
  background: url(https://forumstatic.ru/files/001c/52/c6/68842.png) no-repeat top center, url(https://forumstatic.ru/files/001c/52/c6/66968.png) no-repeat bottom center, url(https://forumstatic.ru/files/001c/52/c6/89426.png) repeat-y top center var(--pun-bg);
  box-shadow: 0 -3px 7px 0 rgba(28, 31, 48, 0.34), 0 -12px 12px 0 rgba(28, 31, 48, 0.3), 0 -27px 16px 0 rgba(28, 31, 48, 0.18), 0 -48px 19px 0 rgba(28, 31, 48, 0.05), 0 -74px 21px 0 rgba(28, 31, 48, 0.01);
}

.punbb {
  display: flex;
  flex-direction: column;
  font: 12px var(--font-family);
  color: var(--main-text-color);
}

.punbb > div .container {
  padding: var(--pad1);
}

/*свиток под заголовками блоков*/
#pun-index .category,
#pun-stats,
#pun-main,
#post-form {
  background: url(https://forumstatic.ru/files/0016/01/4e/71076.png) no-repeat top center;
}

img {
  max-width: none;
}

::selection {
  background: var(--accent-red);
  color: var(--pun-bg);
}

:focus {
  outline: none;
}

/*.punbb — admin.css движка (грузится после) красит #pun-admain a синим*/
a,
.punbb #pun-admain a {
  text-decoration: none;
  font-weight: 600;
  color: var(--accent-red);
  transition: all .4s ease;
}

a:hover,
.punbb #pun-admain a:hover {
  color: var(--accent-blue);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  line-height: normal;
}

h1,
h2 {
  min-height: 50px;
  padding: 0 10px;
  font-family: var(--third-family);
  font-weight: 400;
  font-size: 20px;
  text-transform: lowercase;
  text-align: center;
  color: var(--accent-blue);
  text-shadow: var(--text-shadow);
}

ul,
dl,
li,
dd,
dt {
  list-style: none;
}

address,
em {
  font-style: normal;
}

/*Окна: репутация, жалоба, закладки, уведомления, панели редактора*/
#tags .container,
.post_report,
.post_reputation,
#MyBookmarks,
.inner.popup_graffiti,
.pun-modal .modal-inner,
.punbb-admin #pun-admin-award-form .inner {
  background: var(--sec-bg);
  border: 1px solid var(--borders-color);
  border-radius: 8px;
}

.pun-modal.unread-notifications .modal-inner {
  background: url(https://forumstatic.ru/files/0016/01/4e/71076.png) no-repeat top center var(--sec-bg);
}

.pun-modal.unread-notifications div.modal-inner.section div.container {
  padding: 10px 20px;
}

.inner.post_reputation div.container,
.inner.post_report div.container {
  padding: 0 15px 15px;
}

#rep_form tbody,
#report_form tbody {
  gap: 10px;
}

#rep_form tr .tcl,
#report_form tr .tcl {
  width: 20%;
}

#rep_form tr .tc2,
#report_form tr .tc2 {
  display: flex;
  flex-grow: 1;
  justify-content: left;
  align-items: center;
  gap: 10px;
  width: 80%;
}

#rep_form #reputationText,
#report_form #rep_text {
  width: 100%;
}

.jGrowl-notification .jGrowl-close {
  position: relative;
  right: 6px;
}

.tipsy #respect figcaption {
  margin-top: 0;
}

/*Формы*/
/*кнопки*/
input.button,
#pun-admain input.button,
#sub4,
input[type="button"],
input[type="submit"] {
  padding: 8px 15px;
  border: 1px solid #282f3c;
  border-radius: 10px;
  box-shadow: 0 1px 2px 0 rgba(54, 43, 43, 0.2), 0 4px 4px 0 rgba(54, 43, 43, 0.17), 0 8px 5px 0 rgba(54, 43, 43, 0.1), 0 15px 6px 0 rgba(54, 43, 43, 0.03), 0 23px 7px 0 rgba(54, 43, 43, 0);
  background: var(--noise), linear-gradient(90deg, #313b4f 0%, #3b4559 46.53%, #313b4f 100%);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  color: var(--third-text-color);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.5s ease, background 0.5s ease, border-color 0.5s ease;
}

input.button:hover,
input.button:focus,
#pun-admain input.button:hover,
#pun-admain input.button:focus,
input[type="button"]:hover,
input[type="button"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
#sub4:hover,
#sub4:focus {
  border: 1px solid #6c2529;
  background: var(--noise), linear-gradient(90deg, #782b2e 0%, #892b2f 46.53%, #782b2e 100%);
  transform: scale(1.15);
  opacity: 1;
}

input.button:active,
#pun-admain input.button:active,
#sub4:active,
input[type="button"]:active,
input[type="submit"]:active {
  border: 1px solid #a4363b;
  transform: scale(1.15);
}

/*поля ввода*/
input[type="text"],
input[type="password"],
input.searchKey,
textarea,
select,
input[type="date"] {
  max-width: none;
  padding: 4px 15px;
  background: var(--light-cover);
  border: 1px solid var(--borders-color);
  border-radius: 8px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 13px;
  line-height: 140%;
  color: var(--main-text-color);
  text-shadow: var(--text-shadow);
}

select {
  -webkit-appearance: none;
  padding: 4px 25px 4px 15px;
  background: url(https://forumstatic.ru/files/0016/01/4e/93846.svg) no-repeat right 5px center var(--light-cover);
  cursor: pointer;
}

optgroup {
  font-weight: bold;
}

textarea,
.longinput input {
  width: 64%;
}

/*флажки и переключатели*/
.checkfield input[type="checkbox"],
.radiofield input[type="radio"] {
  margin: 0 3px;
}

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

/*блоки форм: без рамки и фона, подпись поля — над полем (через <br> движка)*/
.formal fieldset {
  padding: 0;
  border: 0;
}

.formal .container {
  padding: var(--pad1);
}

fieldset fieldset {
  padding: 0 0 8px 0;
}

.formal legend {
  float: none;
  width: auto;
  margin-bottom: 0;
  font-weight: bold;
}

.fs-box {
  padding: 10px 0;
}

.fs-box p,
.fs-box fieldset {
  padding: 0 0 8px 0;
}

.fs-box .inputfield,
.fs-box .selectfield,
.fs-box .datafield {
  display: block;
  padding: 0 0 8px;
}

.fs-box .inputfield br,
.fs-box .selectfield br {
  display: inline;
}

.fs-box label {
  display: inline-block;
  margin-bottom: 5px;
}

.fs-box .inputfield label,
.fs-box .selectfield label {
  color: inherit;
}

.fs-box .inputfield input,
.fs-box .selectfield select {
  width: auto;
}

/*поля в строку: фильтр участников и т.п.*/
.fs-box.inline {
  display: block;
}

.fs-box.inline .inputfield,
.fs-box.inline .selectfield {
  padding: 0 0 8px;
}

.fs-box.inline label {
  display: inline-block;
  margin-bottom: 5px;
  font-size: inherit;
}

.inline .inputfield,
.inline .selectfield,
.inline .passfield {
  float: left;
  margin-right: 10px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 13px;
  line-height: 140%;
  color: var(--main-text-color);
}

.inline .infofield {
  clear: both;
  padding: 0;
  font-size: 13px;
  line-height: 140%;
  text-align: justify;
  color: var(--main-text-color);
}

.datafield br {
  display: none;
}

.required label,
.datafield span.input {
  font-size: 10px;
}

.hashelp {
  position: relative;
}

.formsubmit {
  display: block;
  margin: 10px 0 0 0;
}

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

/*информационный блок (регистрация, правила)*/
.info-box {
  margin: 0 0 10px 0;
}

.info-box * {
  padding: 0 0 5px 0;
}

.info-box .legend {
  font-weight: bold;
}

/*Навигация*/
#pun-navlinks {
  position: absolute;
  top: 522px;
  z-index: 150;
  padding: 0;
  border: 0;
}

#pun-ulinks {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 80px;
  margin-bottom: 10px;
  background: url(https://forumstatic.ru/files/0016/01/4e/42923.png) no-repeat bottom center;
  font-size: inherit;
}

#pun-navlinks .container,
#pun-ulinks .container {
  padding: var(--pad2);
  font-family: var(--font-family);
  text-shadow: var(--text-shadow);
}

#pun-navlinks .container {
  gap: 10px 20px;
}

#pun-ulinks .container {
  gap: 10px 15px;
}

#pun-navlinks .container::after,
#pun-ulinks .container::after {
  display: none;
}

#pun-navlinks a {
  font-size: 16px;
  color: var(--accent-blue);
}

/*синие ссылки при наведении — красные (красные — синие, общее правило a:hover)*/
#pun-navlinks a:hover {
  color: var(--accent-red);
}

#pun-ulinks a {
  font-weight: 500;
  font-size: 13px;
  text-transform: lowercase;
  color: var(--secondary-text-color);
}

#pun-ulinks a:hover {
  color: var(--accent-red);
}

/*Приветствие*/
#pun-status {
  text-shadow: var(--text-shadow);
}

#pun-status .container {
  display: block;
  font-size: inherit;
  color: inherit;
}

#pun-status span {
  margin-right: 5px;
  white-space: nowrap;
}

#pun-status strong,
#pun-status a {
  font-weight: 600;
}

/*Хлебные крошки*/
.crumbs {
  color: inherit;
}

.crumbs em {
  margin: 0;
}

.crumbs.container {
  font-size: 12px;
  text-transform: uppercase;
  text-shadow: var(--text-shadow);
}

/*Копирайт движка*/
#pun-about .container {
  text-align: center;
}

/*Объявление: кнопки-ссылки под шапкой*/
#pun-announcement {
  order: -1;
}

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

.hotlinks {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.hotlinks a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 15px;
  border-inline: 1px solid #6c2529;
  border-bottom: 1px solid #6c2529;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 1px 2px 0 rgba(54, 43, 43, 0.2), 0 4px 4px 0 rgba(54, 43, 43, 0.17), 0 8px 5px 0 rgba(54, 43, 43, 0.1), 0 15px 6px 0 rgba(54, 43, 43, 0.03), 0 23px 7px 0 rgba(54, 43, 43, 0);
  background: var(--noise), linear-gradient(180deg, #3a080a 0%, #5d1619 31.25%, #892b2f 100%);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  color: var(--third-text-color);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
  transition: color 0.5s ease;
}

.hotlinks a:hover {
  color: var(--accent-yellow);
}

/*Таблицы-списки движка: разделы, темы и поиск, участники, кто на форуме, ЛС, профиль,
  файлы, репутация и позитив, окна репутации и жалобы — строками на flex.
  Таблицы в постах, в окнах редактора и на страницах-скриптах это не задевает*/
.category .container,
.forum .container,
#pun-userlist .usertable .container,
#pun-online .online-list .container {
  border: 0;
  overflow: visible;
}

tbody .tcl,
tbody .tc2,
tbody .tc3,
tbody .tcr {
  border-top: 0;
}

.category table,
.category tbody,
.forum table,
.forum thead,
.forum tbody,
#pun-viewforum .forum table,
#pun-viewforum .forum tbody,
.usertable table,
.usertable thead,
.usertable tbody,
.online-list table,
.online-list thead,
.online-list tbody,
#messages table,
#messages thead,
#messages tbody,
#viewprofile table,
#viewprofile tbody,
#filetable,
#filetable thead,
#filetable tbody,
#pun-respect table,
#pun-respect thead,
#pun-respect tbody,
#pun-positive table,
#pun-positive thead,
#pun-positive tbody,
#rep_form table,
#rep_form tbody,
#report_form table,
#report_form tbody,
#pun-debug table,
#pun-debug tbody,
#pun-statistic table,
#pun-statistic thead,
#pun-statistic tbody {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.category tr,
.forum tr,
#pun-viewforum .forum tr,
.usertable tr,
.online-list tr,
#messages tr,
#viewprofile tr,
#filetable tr,
#pun-respect tr,
#pun-positive tr,
#rep_form tr,
#report_form tr,
#pun-debug tr,
#pun-statistic tr {
  display: flex;
  align-items: center;
  gap: 2px;
}

/*ячейки списков: отступы основы убираем (у Магии их нет), ширины задают колонки*/
.tcl,
.tc2,
.tc3,
.tcr {
  padding: 0;
}

.main th,
.main td {
  flex-shrink: 0;
}

/*шапка списков и таблиц страниц-скриптов*/
.main th {
  padding: 3px 0;
  background: var(--opacity-cover);
  font-weight: 400;
  font-size: 10px;
  line-height: 140%;
  text-transform: uppercase;
  text-align: center;
  color: var(--main-text-color);
  text-shadow: var(--text-shadow);
}

.main th.tcl {
  border-radius: 8px 0 0 8px;
}

.main th.tcr {
  border-radius: 0 8px 8px 0;
}

.main td {
  font-weight: 400;
  font-size: 13px;
  line-height: 140%;
  color: var(--main-text-color);
  text-shadow: var(--text-shadow);
}

/*таблица в посте — без рамок экстры*/
.post-content td {
  border: 0;
}

/*страницы-скрипты (хронология, календарь): обычные таблицы с промежутками между ячейками*/
/*колонки — по содержимому (основа ставит таблицам fixed: таблица хронологии на телефоне сжималась
  до 38px на колонку даты); у календаря свой fixed — ниже*/
#pun-main.pages table {
  table-layout: auto;
  border-collapse: separate;
}

#pun-main.pages th,
#pun-main.pages td {
  padding: 4px 8px;
}

/*колонки*/
.tcl {
  width: 50%;
}

.tcl .intd {
  display: block;
}

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

.tcr {
  flex-grow: 1;
  width: min-content;
}

td.tcr {
  padding: 0 0 0 15px;
}

.tcr a {
  font-weight: 600;
}

#pun-searchtopics .tcl,
#pun-modviewforum .tcl {
  width: 40%;
}

#pun-searchtopics .tc2 {
  width: 20%;
}

#pun-debug table .tcl {
  width: 15%;
}

#pun-debug .tcr {
  width: 90%;
}

/*последнее сообщение: аватар слева, ссылка и дата — текстом (основа ставит их сеткой)*/
.category .tcr,
#pun-viewforum .forum .tcr {
  display: block;
  /*на телефоне ячейка — flex: промежутки основы убираем*/
  gap: normal;
  width: min-content;
  font-size: 13px;
}

.category .tcr .user-avatar,
#pun-viewforum .forum .tcr .user-avatar {
  float: left;
  margin: 0 15px 10px 0;
}

.category .lastpost-link,
#pun-viewforum .forum .tcr > a {
  overflow: visible;
  white-space: normal;
}

.category .lastpost,
#pun-viewforum .forum .tcr > .byuser {
  font-size: inherit;
}

.byuser,
.lastpost .datetime {
  color: inherit;
}

/*аватар в последнем сообщении — рваной маской, приглушённый*/
td .user-avatar {
  position: relative;
  width: 30px;
  height: 30px;
  margin: 0 15px 10px 0;
}

td .user-avatar .avatar-image {
  width: 30px;
  height: 30px;
  border-radius: 0;
  opacity: 0.75;
  mix-blend-mode: luminosity;
  mask-image: url(https://forumstatic.ru/files/0016/01/4e/52405.svg);
  mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-image: url(https://forumstatic.ru/files/0016/01/4e/52405.svg);
  -webkit-mask-size: contain;
  transition: opacity .2s linear 0s;
}

#pun-index td .user-avatar a {
  display: inline-block;
  position: relative;
}

#pun-index td .user-avatar,
#pun-index td .user-avatar .avatar-image {
  width: 40px;
  height: 40px;
}

/*значок «на форуме» вместо мигающей точки экстры*/
td .user-avatar .isonline {
  top: unset;
  right: -8px;
  bottom: -12px;
  width: 31px;
  height: 25px;
  background: url(https://forumstatic.ru/files/0016/01/4e/72587.svg);
  animation: none;
}

/*значок раздела/темы: нет нового, новое, закреплена, закрыта*/
.tcl .icon {
  width: 25px;
  height: 25px;
  margin-top: 0;
  border: 0;
  border-radius: 0;
}

div.icon {
  flex-shrink: 0;
  background: url(https://forumstatic.ru/files/0016/01/4e/49750.svg) no-repeat top center;
}

tr.inew div.icon {
  background: url(https://forumstatic.ru/files/0016/01/4e/58764.svg) no-repeat top center;
}

tr.isticky div.icon {
  background: url(https://forumstatic.ru/files/0016/01/4e/69347.svg) no-repeat top center;
}

tr.iclosed div.icon {
  background: url(https://forumstatic.ru/files/0016/01/4e/36934.svg) no-repeat top center;
}

/*Страницы, кнопки «Новая тема», «Ответить», подписка*/
.multipage {
  margin-top: 10px;
}

.linkst,
.linksb {
  position: relative;
  justify-content: space-between;
  align-items: normal;
  margin: 0;
  padding: var(--pad2);
}

.linkst {
  flex-wrap: nowrap;
  gap: normal;
}

.linkst .postlink {
  text-align: right;
}

.linksb {
  gap: 5px;
}

.linksb .pagelink {
  order: -1;
}

.linksb noindex {
  order: 1;
}

.linksb .postlink {
  margin-left: auto;
  text-align: right;
}

.pagelink {
  display: block;
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--opacity-cover);
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 13px;
  color: var(--main-text-color);
}

.pagelink a,
.pagelink strong,
.pagelink span {
  padding: 0;
}

.pagelink a,
.pagelink strong {
  border: 0;
}

.pagelink strong {
  background: none;
  color: inherit;
}

.postlink {
  display: block;
}

.postlink a,
.subscribelink a {
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--opacity-cover);
  font-weight: 600;
  font-size: 13px;
  color: var(--accent-red);
  text-shadow: var(--text-shadow);
}

.postlink a:hover {
  color: var(--accent-blue);
  opacity: 1;
}

.subscribelink {
  width: 100%;
  text-align: right;
}

/*Модерация, RSS, «Тему просматривают».
  p.container — иначе общий отступ контейнеров (.punbb > div .container) перебьёт*/
.modmenu {
  padding: var(--pad2);
  font-size: inherit;
}

.modmenu p.container {
  display: block;
  padding: 3px 10px;
  border-radius: 8px;
  background: var(--opacity-cover);
  font-weight: 500;
  font-size: 10px;
  line-height: 140%;
  text-transform: uppercase;
  text-align: right;
  text-shadow: var(--text-shadow);
}

.modmenu .container strong {
  float: left;
}

.modmenu input {
  margin-left: 10px;
}

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

/*Категории (главная)*/
#pun-index .category {
  margin-bottom: 30px;
}

.category + .category,
.forum + .forum {
  margin-top: 0;
}

/*название категории и «статистика» — крупно, без полосы основы*/
.category h2,
#pun-stats h2 {
  margin: 0;
  border: 0;
}

#pun-index .category h2,
#pun-stats h2 {
  padding: 0 70px;
  font-family: var(--third-family);
  font-size: 32px;
}

.category tr,
#pun-viewforum .forum tr {
  padding: 0;
}

.category tr + tr,
#pun-viewforum .forum tr + tr {
  border-top: 0;
}

.category tr,
.isub tr {
  gap: 10px 15px;
  margin-bottom: 10px;
}

.category .tcl,
.isub .tcl {
  width: 65%;
}

#pun-index .intd {
  display: flex;
  gap: 10px;
}

#pun-index .tclcon,
.isub .tclcon {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  gap: 8px 10px;
  text-shadow: var(--text-shadow);
}

/*название раздела плашкой*/
#pun-index .tclcon h3,
.isub .tclcon h3 {
  display: inline-flex;
  width: fit-content;
  padding: 0 15px 8px;
  border-radius: 10px;
  background: var(--opacity-cover);
  font-family: var(--third-family);
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  text-transform: lowercase;
}

#pun-index .inew .tclcon h3,
.isub.inew .tclcon h3 {
  max-width: calc(100% - 170px);
}

/*есть новое — ярлык рядом с названием*/
#pun-index .inew .tclcon::before,
.isub.inew .tclcon h3::before {
  content: "новых свитков: +1";
  display: inline-flex;
  flex-shrink: 0;
  position: relative;
  height: 32px;
  padding: 5px 15px;
  border: 1px solid #282F3C;
  border-radius: 10px;
  box-shadow: 0 1px 2px 0 rgba(54, 43, 43, 0.2), 0 4px 4px 0 rgba(54, 43, 43, 0.17), 0 8px 5px 0 rgba(54, 43, 43, 0.1), 0 15px 6px 0 rgba(54, 43, 43, 0.03), 0 23px 7px 0 rgba(54, 43, 43, 0);
  background: linear-gradient(90deg, #313b4f 0%, #3b4559 46.53%, #313b4f 100%);
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 11px;
  line-height: 22px;
  text-transform: uppercase;
  color: var(--third-text-color);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
}

/*описание раздела: кавычка и черта слева*/
.textfor {
  display: flex;
  line-height: 140%;
  text-align: justify;
}

.textfor::before {
  content: "\f10d";
  height: 100%;
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid var(--borders-color);
  font-family: var(--fa);
  font-weight: 700;
  color: var(--borders-color);
  text-shadow: none;
}

/*быстрые ссылки под описанием*/
.spd-link {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: 5px;
}

.spd-link a {
  padding: 3px 10px 4px;
  border-radius: 5px;
  background: var(--opacity-cover);
  font-weight: 500;
  font-size: 11px;
  line-height: 15px;
  text-transform: uppercase;
  color: var(--accent-blue);
  text-shadow: var(--text-shadow);
}

.spd-link a:hover {
  color: var(--accent-red);
}

/*значок раздела на главной и у подфорумов скрыт*/
#pun-index div.icon,
.isub div.icon {
  display: none;
}

/*последнее сообщение на главной — в две строки с многоточием*/
#pun-index .tcr .lastpost-link {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/*Статистика*/
#pun-stats {
  margin-top: 0;
}

.statscon {
  padding: 0;
  border: 0;
}

.statscon .container {
  font-size: inherit;
}

#pun-stats .container,
#statistic-other {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px 2px;
  text-align: justify;
}

#statistic-other a {
  font-size: 11px;
  color: var(--accent-blue);
}

#statistic-other a:hover {
  color: var(--accent-red);
}

/*всего тем, сообщений, зарегистрированных, последний зарегистрировавшийся — плашками*/
/*#pun-stats у #statistic-other — движок кладёт рядом свой <style> «#statistic-other span {padding-right:1em}»*/
#pun-stats li.item1,
#pun-stats li.item2,
#pun-stats li.item3,
#pun-stats li.item4,
#pun-stats #statistic-other span {
  padding: 3px 10px;
  border-radius: 5px;
  background: var(--opacity-cover);
  font-weight: 400;
  font-size: 11px;
  line-height: 16px;
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--main-text-color);
  text-shadow: var(--text-shadow);
}

/*активны, посетили за сутки*/
li#onlinelist {
  width: 100%;
  margin-top: 10px;
  font-size: 13px;
  line-height: 140%;
  text-align: justify;
  text-shadow: var(--text-shadow);
}

#onlinelist a {
  font-weight: 600;
}

#pun-stats .item5.onlinelist {
  padding-bottom: 15px;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(to right, #9B917A 0%, transparent 100%) 1;
}

/*Топики*/
.post {
  margin-top: 10px;
  border: 0;
  overflow: visible;
}

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

/*автор слева, текст справа, ссылки строкой ниже*/
.post > .container {
  display: flex;
  flex-wrap: wrap;
  align-items: start;
}

/*шапка поста: дата слева, номер справа плашкой*/
.post h3 {
  padding: var(--pad2);
  border-bottom: 0;
  font-size: 1.17em;
  font-weight: bold;
}

.post h3 span {
  position: relative;
  gap: 2px;
  border-radius: 8px;
  background: var(--opacity-cover);
  text-transform: uppercase;
  text-shadow: var(--text-shadow);
}

.post h3 .permalink {
  order: -1;
  flex-grow: 1;
  padding: 3px 15px;
}

.post h3 strong {
  order: 1;
  position: relative;
  padding: 3px 15px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 10px;
  line-height: 18px;
  text-transform: uppercase;
  text-align: right;
  color: var(--main-text-color);
}

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

/*разделитель между датой и номером*/
.post h3 strong::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 2px;
  height: 100%;
  background: url(https://forumstatic.ru/files/0016/01/4e/31248.jpg) repeat top left;
}

/*Автор — тёмной карточкой*/
.post-author {
  position: relative;
  width: var(--pwidth);
  margin: 0 0 15px;
  padding: 8px 19px 20px;
  border: 1px solid #aaa492;
  border-radius: 10px;
  box-shadow: 0 0 10px 0 #978d70, inset 0 0 15px 0 #656d7e, inset 0 0 0 3px #4d525c, inset 0 0 0 2px #393d45;
  background: var(--noise), linear-gradient(90deg, #212731 0%, #2c333f 46.53%, #212731 100%);
  font-weight: 400;
  font-size: 11px;
  text-align: center;
  color: var(--third-text-color);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
  overflow-wrap: normal;
}

.post-author ul {
  display: flex;
  flex-direction: column;
}

.post-author a {
  color: var(--accent-yellow);
}

.post-author a:hover {
  color: var(--third-text-color);
}

.post-author .pa-author,
.pa-author a {
  font-family: var(--third-family);
  font-weight: 400;
  font-size: 19px;
  white-space: nowrap;
}

.pa-author {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 26px;
}

/*значок «не в сети / на форуме» — в правом верхнем углу карточки (не после ника:
  там он ездил за длиной ника и сдвигал ник с середины)*/
.post-author .pa-author::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 12px;
  width: 22px;
  height: 22px;
  background: url(https://forumstatic.ru/files/0016/01/4e/30681.svg) no-repeat center;
}

.post-author.online .pa-author::after {
  background: url(https://forumstatic.ru/files/0016/01/4e/37258.svg) no-repeat center;
}

.post-author .pa-title {
  margin: 5px 0 0;
  text-transform: lowercase;
  color: inherit;
}

.post-author .pa-avatar {
  display: block;
  position: relative;
  width: fit-content;
  height: fit-content;
  max-width: 180px;
  max-height: 180px;
  margin: 10px auto;
  outline: 1px solid #2e3341;
  border-radius: 8px;
  box-shadow: 0 -1px 2px 0 rgba(76, 85, 103, 0.29), 0 -3px 3px 0 rgba(76, 85, 103, 0.26), 0 -6px 4px 0 rgba(76, 85, 103, 0.15), 0 -11px 5px 0 rgba(76, 85, 103, 0.04), 0 -18px 5px 0 rgba(76, 85, 103, 0.01);
}

.pa-avatar img {
  border-radius: 8px;
}

/*карма поверх аватара — при наведении*/
.pa-avatar .karma-count {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  background: rgba(0, 0, 0, .7);
  box-shadow: inset 0 0 5px 3px rgba(0, 0, 0, .7);
  font-weight: 700;
  font-size: 48px;
  color: var(--accent-yellow);
  cursor: pointer;
  opacity: 0;
  transition: opacity .3s linear 0s;
}

.pa-avatar:hover .karma-count {
  opacity: 1;
}

/*цвета уровней кармы — не по палитре дизайна, это значения уровней*/
.karma-count-black {
  background: black;
  color: white;
}

.karma-count-red {
  background: red;
  color: white;
}

.karma-count-green {
  background: green;
  color: white;
}

.karma-count-yellow {
  background: gold;
}

.karma-count-yellowgreen {
  background: yellowgreen;
}

.karma-count-pink {
  background: pink;
}

.karma-count-purple {
  background: purple;
  color: white;
}

/*поле 1 — ЛЗ: первая ссылка заголовком с линией*/
.pa-fld1,
#pa-fld1 {
  width: 100%;
  margin-bottom: 10px;
  padding: 5px 10px 10px;
  border: 1px solid var(--borders-for-dark-bg);
  border-radius: 8px;
  background: rgba(87, 93, 106, 0.1);
  font-size: 12px;
  text-transform: lowercase;
}

.pa-fld1 a:first-child,
#pa-fld1 a:first-child {
  display: block;
  margin-bottom: 5px;
  padding: 0 0 5px;
  background: linear-gradient(to right, transparent 0%, #575D6A 50%, transparent 100%) no-repeat bottom center / auto 1px;
  font-size: 13px;
  text-transform: initial;
}

/*сообщения и уважение — в строку на подложке*/
.pa-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(28, 31, 39, 0.25);
}

/*IP (видят админы) — под плашкой, с тем же отступом, что между блоками карточки*/
.post-author .pa-ip {
  margin-top: 10px;
}

.pa-posts,
.pa-respect {
  display: inline-block;
  margin: 0 5px;
  font-size: 10px;
  text-transform: lowercase;
}

.post-author .fld-name {
  color: inherit;
}

.pa-posts .fld-name,
.pa-respect .fld-name {
  display: block;
  margin-bottom: 2px;
}

/*поле 2 — плашка*/
.plh {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  height: 35px;
  margin-bottom: 10px;
  border: 1px solid #b34e41;
  border-radius: 8px;
  box-shadow: inset 0 0 15px 0 rgba(255, 255, 255, 0.06);
  background: var(--noise), var(--accent-red);
}

.plh img {
  flex-shrink: 0;
  max-width: 48px;
  max-height: 48px;
}

.plht {
  width: 100%;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
}

.plh::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 16px;
  border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
  background: radial-gradient(ellipse at 50% 100%, rgba(223, 94, 76, 0.5) 0%, transparent 70%);
  pointer-events: none;
}

/*поле 3 — команда: вертикальная закладка слева от карточки*/
.post-author .pa-fld3 {
  position: absolute;
  left: 0;
  top: 20px;
  padding: 15px 5px;
  border-top: 1px solid #6d3434;
  border-right: 1px solid #6d3434;
  border-bottom: 1px solid #6d3434;
  border-radius: 0 10px 10px 0;
  box-shadow: -1px 0 1px 0 rgba(0, 0, 0, 0.1), -2px 0 2px 0 rgba(0, 0, 0, 0.09), -5px 0 3px 0 rgba(0, 0, 0, 0.05), -9px 0 3px 0 rgba(0, 0, 0, 0.01), -13px 0 4px 0 rgba(0, 0, 0, 0);
  background: linear-gradient(90deg, #3a080a 0%, #5d1619 31.25%, #892b2f 100%);
  line-height: 12px;
  text-transform: uppercase;
  writing-mode: tb-rl;
  transform: translatex(-100%) rotate(180deg);
}

/*«дополнительная информация» (скрипт pub.bundle.js): закладка снизу и окно.
  .punbb — стиль скрипта вставляется на страницу позже нашего, нужен перевес селектора*/
.punbb .character-summary__profile-button {
  left: 0;
  bottom: 20px;
  padding: 15px 5px;
  border-top: 1px solid #475061;
  border-right: 1px solid #475061;
  border-bottom: 1px solid #475061;
  border-radius: 0 10px 10px 0;
  box-shadow: -1px 0 1px 0 rgba(0, 0, 0, 0.1), -2px 0 2px 0 rgba(0, 0, 0, 0.09), -5px 0 3px 0 rgba(0, 0, 0, 0.05), -9px 0 3px 0 rgba(0, 0, 0, 0.01), -13px 0 4px 0 rgba(0, 0, 0, 0);
  background: var(--noise), linear-gradient(90deg, #1a2438 0%, #313b4f 35.58%, #3b4559 100%);
  font-family: var(--font-family);
  font-size: 10px;
  line-height: 12px;
  text-transform: uppercase;
  color: var(--third-text-color);
  transform: translatex(-100%) rotate(180deg);
}

.punbb .character-summary__window {
  border-radius: 8px;
  box-shadow: inset 0 0 10px 5px rgba(0, 0, 0, .3), inset 0 0 0 1px var(--borders-for-dark-bg);
  background: rgba(28, 31, 39, 0.4);
  backdrop-filter: blur(10px);
}

/*«в сети»: основа прячет строку, у Магии она подписью с подсказкой*/
.pa-online {
  position: relative;
  width: fit-content;
  height: fit-content;
  margin: 10px auto 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
  cursor: pointer;
}

.pa-online::before {
  content: "online";
  font-weight: bold;
}

.pa-online strong {
  position: absolute;
  left: 50%;
  margin-right: -50%;
  padding: 5px 10px;
  background: rgba(0, 0, 0, .7);
  white-space: nowrap;
  color: var(--pun-bg);
  opacity: 0;
  transform: translate(-50%, 100%);
  transition: opacity .2s linear 0s;
  pointer-events: none;
}

.pa-online strong::after {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: -10px;
  z-index: 10;
  width: 0;
  height: 0;
  margin-left: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid rgba(0, 0, 0, .7);
}

.pa-online:hover strong {
  opacity: 1;
}

/*Тело поста*/
.post-body {
  width: calc(100% - var(--pwidth));
  padding: 0;
}

.post-box {
  padding: 0 0 10px 10px;
}

/*ссылки под постом: профиль, ЛС, e-mail — слева, остальное — справа*/
.post-links {
  width: 100%;
  padding: 0;
  border-top: 0;
  font-size: inherit;
}

.post-links ul {
  display: block;
  text-align: right;
}

.post-links li {
  display: inline;
}

.post-links li:not(:first-of-type) {
  padding-left: 10px;
}

.post-links li a {
  padding: 3px 10px;
  border-radius: 10px;
  background: var(--opacity-cover);
  font-size: 11px;
  line-height: 140%;
  text-transform: uppercase;
  color: var(--accent-red);
}

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

.clearer {
  display: block;
  clear: both;
  height: 0;
  font-size: 0;
}

/*Контент поста*/
.post-content p {
  padding: 0 0 12px 0;
  font-family: var(--font3);
  font-weight: 400;
  line-height: 150%;
  color: var(--main-text-color);
}

.post-content p + p {
  margin-top: 0;
}

.post-content a {
  text-decoration: none;
}

.post-content em {
  font-style: italic;
}

.post-content em.bbuline {
  font-style: normal;
  text-decoration: underline;
}

/*таблица [table] в посте — колонки по содержимому, как было на проде (основа ставит таблицам fixed)*/
.post-content table {
  table-layout: auto;
}

/*зачёркнутый [s] — текст закрыт золотой плашкой с бликом по диагонали (на каждой строке своя);
  при наведении золото рассеивается мягкой волной слева направо, текст проявляется.
  Как: градиент втрое шире плашки — прозрачная треть, мягкий переход, золотая треть; видна золотая,
  при наведении фон сдвигается к прозрачной (сам градиент браузер плавно не гасит, а сдвиг — да)*/
.post-content del {
  border-radius: 3px;
  background: linear-gradient(120deg, rgba(168, 134, 42, 0) 0%, rgba(168, 134, 42, 0) 40%, #a8862a 66.7%, #c9a43a 73%, #f3dc85 78.5%, #e9cf70 81%, #c9a43a 87%, #a8862a 93%, #8c6d1f 100%) no-repeat 100% 0 / 300% 100%;
  text-decoration: none;
  text-shadow: none;
  color: transparent;
  cursor: pointer;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-position 1.4s ease, color 1.4s ease;
}

/*ссылки и выделение внутри закрытого текста — тоже спрятаны*/
.post-content del:not(:hover) * {
  text-shadow: none;
  color: transparent;
}

.post-content del:hover {
  background-position: 0 0;
  text-shadow: inherit;
  color: inherit;
}

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

/*цитата, код, скрытый текст, скрытие для групп (скрипт) — плашкой с подписью на рамке*/
.quote-box,
.code-box,
.hideblock {
  margin: 5px 0 10px;
  padding: 10px 15px;
  border: 1px solid var(--borders-color);
  border-radius: 10px;
  background: var(--light-cover);
  font-family: var(--font3);
  color: var(--main-text-color);
  text-shadow: var(--text-shadow);
}

.quote-box .quote-box {
  background: var(--light-cover);
}

.quote-box.answer-box,
.quote-box.hide-box,
.code-box {
  margin-top: 20px;
}

.code-box {
  overflow: visible;
}

.quote-box cite,
.code-box strong.legend,
.hideblock cite {
  display: block;
  position: relative;
  width: fit-content;
  margin: 0 0 -15px 5px;
  padding: 3px 8px;
  border-bottom: 0;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--borders-color);
  background: var(--light-cover);
  font-style: normal;
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  line-height: 14px;
  text-transform: uppercase;
  color: var(--main-text-color);
  transform: translatey(calc(-50% - 10px));
}

/*значок перед подписью: кавычка, замок, код*/
.quote-box cite::before,
.code-box strong.legend::before {
  position: absolute;
  top: 0;
  left: 0;
  padding: 3px 6px;
  border-radius: 5px;
  box-shadow: inset 0 0 0 1px var(--borders-color);
  background: var(--light-cover);
  font-family: var(--fa);
  color: var(--secondary-text-color);
  transform: translatex(calc(-100% - 2px));
}

.quote-box cite::before {
  content: "\f10d";
}

.quote-box.hide-box cite::before {
  content: "\f023";
}

.code-box strong.legend::before {
  content: "\f121";
  padding: 3px 3px;
}

.code-box .scrollbox {
  width: 100%;
  max-height: 200px;
  padding: 0;
}

.code-box pre {
  font: 12px/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace;
}

/*спойлер: значок картинкой фоном (вместо стрелки основы), открытый — на подложке.
  Значок — на одной вертикали со значками цитаты, кода и скрытого (их центр — в 8px от края блока):
  строка заголовка заходит на поле блока (&#8722;15px), текст остаётся на месте*/
.post-content .spoiler-box > div {
  margin-left: -15px;
  padding-left: 33px;
  background: url(https://forumstatic.ru/files/0016/01/4e/20474.svg) no-repeat left center;
  font-weight: normal;
}

.post-content .spoiler-box > div.visible {
  background-image: url(https://forumstatic.ru/files/0016/01/4e/96535.svg);
}

/*стрелка основы — и у закрытого, и у открытого (.visible) спойлера*/
.spoiler-box > div::before,
.spoiler-box > div.visible::before {
  content: none;
}

.post-content .spoiler-box > blockquote.visible {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--opacity-cover);
}

/*подпись: черта по центру*/
.post-sig {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  font-size: inherit;
  color: inherit;
}

.post-sig dt {
  width: 300px;
  margin: 10px auto;
  border-bottom: 1px solid var(--link-hover);
}

/*разделители [hr] с картинкой*/
.post-content hr[data-value] {
  opacity: 1;
  background-position: top center;
  background-repeat: no-repeat;
}

.post-content hr[data-value="hatching"] {
  height: 35px;
  background-image: url(https://upforme.ru/uploads/001a/fa/19/2/362769.png);
}

.post-content hr[data-value="coal"] {
  height: 35px;
  background-image: url(https://upforme.ru/uploads/001a/fa/19/2/292922.png);
}

.post-content hr[data-value="gold-ribbon"] {
  height: 47px;
  background-image: url(https://upforme.ru/uploads/001a/fa/19/2/26529.png);
}

.post-content hr[data-value="silver-ribbon"] {
  height: 47px;
  background-image: url(https://upforme.ru/uploads/001a/fa/19/2/236018.png);
}

.post-content hr[data-value="dark-moon"] {
  height: 110px;
  background-image: url(https://upforme.ru/uploads/001a/fa/19/174/480455.png);
}

.post-content hr[data-value="light-moon"] {
  height: 110px;
  background-image: url(https://upforme.ru/uploads/001a/fa/19/174/171138.png);
}

/*скрытие для групп (скрипт) — оформлено как цитата, см. выше*/
.hideblock p {
  display: none;
}

.hideblock blockquote p {
  display: inherit;
}

/*Рейтинг поста: сердце и число на подложке справа*/
.rating-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  float: right;
  padding: 3px 5px;
  border-radius: 5px;
  background: var(--opacity-cover);
}

.post-vote {
  order: -1;
}

.post-rating,
.post-vote {
  position: relative;
  float: right;
  margin-top: 0;
  line-height: initial;
}

.post-rating .container {
  display: flex;
  align-items: center;
  gap: 5px;
}

.post-rating .container::after {
  display: none;
}

/*div…p.container — иначе общий отступ контейнеров (.punbb > div .container, и на телефоне) перебьёт*/
div.post-rating p.container,
div.post-vote p {
  float: none;
  margin: 0;
  padding: 0;
}

.post-rating p > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 700 11px/150% verdana, arial, sans-serif;
  text-align: center;
  color: var(--accent-red);
}

.post-vote p > a {
  font-size: 0;
}

/*сердце у Магии — перед числом в p (у основы оно на ссылке — убираем)*/
.post-rating a::before {
  content: none;
}

.post-rating p::before,
.post-vote p a::before {
  content: '\f004';
  font-family: var(--fa);
  font-weight: 700;
  font-size: 10px;
  line-height: 100%;
  color: var(--sec-bg);
  -webkit-text-stroke: 1px var(--accent-red);
  transition: all .2s linear 0s;
}

.post-vote p a::before {
  content: '\f075';
}

.post-rating p:hover::before,
.post-vote p:hover a::before,
.mylike .post-rating p::before {
  color: var(--accent-red);
}

.isguest .post .post-rating {
  pointer-events: none;
}

/*Форма ответа*/
#tags {
  position: relative;
}

#tags .container {
  top: 0;
  max-height: 300px;
  padding: var(--pad3);
  overflow: auto;
  box-shadow: none;
}

#tags #grouphide-area {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  gap: 10px;
  width: fit-content;
}

#grouphide-area label {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  margin: 0;
}

#grouphide-area .button {
  margin-left: 15px;
}

/*кнопки редактора: значки FontAwesome Pro*/
#form-buttons {
  margin-bottom: 0;
  padding: 0;
  border: 0;
}

#form-buttons tr {
  flex-wrap: nowrap;
  align-items: normal;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 4px;
}

#form-buttons td {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 24px;
  height: 24px;
  line-height: normal;
}

#form-buttons td::before {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  font-family: var(--fa);
  font-size: 16px;
  font-weight: 400;
  color: var(--accent-red);
  pointer-events: none;
}

#form-buttons td:hover::before {
  color: var(--link-hover);
}

/*значки, которые у Магии свои (остальные — из основы)*/
#button-size::before {content: '\f894';}
#button-spoiler::before {content: '\f518';}
#button-image::before {content: '\f302';}
#button-video::before {content: '\f144';}
#button-hide::before {content: '\f30d';}
#button-grouphide::before {content: '\e481';}
#button-quote::before {content: '\f27a';}
#button-color::before {content: '\f53f';}
#button-table::before {content: '\f009';}
#button-addition::before {content: '\f0d7';}
#button-transL::before {content: '\f891';}
#button-indent::before {content: '\f878';}
#floatbut::before {content: '\f03c';}
/*вторая кнопка картинки (скрипт) — другим значком*/
#form-buttons #button-image ~ #button-image::before {content: '\f03e';}

/*Темы в разделе*/
#pun-viewforum .forum tbody tr {
  padding: 8px 0;
}

.forum tbody tr {
  border-bottom: 1px solid var(--borders-color-lighter);
}

.forum .intd {
  display: flex;
  align-items: center;
  gap: 10px;
}

/*название темы, автор, страницы — одной строкой текста (основа ставит название блоком с многоточием)*/
.forum .tclcon > a,
.forum .tclcon > strong > a {
  display: inline;
  overflow: visible;
  white-space: normal;
}

.tcl .byuser,
.tcl .pagestext {
  font-size: inherit;
  white-space: normal;
}

.stickytext,
.closedatafield {
  margin-right: 5px;
}

/*последнее сообщение: имя автора — строкой под датой*/
.forum .tcr .byuser-username {
  display: block;
}

/*ответы — числом, просмотры видны (основа их прячет, подписывает «ответов»)*/
#pun-viewforum .forum .tc2 {
  width: 10%;
  color: inherit;
}

#pun-viewforum .forum .tc2::after {
  content: none;
}

#pun-viewforum .forum th.tcr {
  font-size: 10px;
}

#pun-viewforum .forum td.tcr {
  padding-left: 15px;
}

/*Профиль*/
/*редактирование: меню разделов колонкой слева*/
#profile .container {
  padding-left: 260px;
}

#profilenav {
  float: left;
  width: 180px;
  margin: -30px 0 0 -190px;
}

/*ЛС: заголовка страницы над меню нет (в профиле меню поднято к нему) — без подъёма, иначе лезет на крошки*/
.messages-container #profilenav {
  margin-top: 0;
}

#profilenav ul {
  display: block;
  padding: 0;
  border: 0;
}

#profilenav ul:first-of-type {
  margin-bottom: 10px;
}

#profilenav li {
  padding: 0 0 5px;
}

#profilenav .isactive a {
  color: var(--accent-red);
}

#viewprofile h2,
#profilenav h2 {
  min-height: 0;
  margin-bottom: 0;
  padding: 5px 10px 10px;
  background-size: auto 100%;
}

/*просмотр: карточка слева, плашки полей справа*/
#viewprofile .container {
  padding: var(--pad1);
  border: 0;
}

#viewprofile .container > ul {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#viewprofile tr {
  align-items: flex-start;
  gap: 15px;
}

#viewprofile table,
#viewprofile #profile-signature {
  width: 100%;
  max-width: 750px;
  margin: 0 auto;
  padding: 15px;
  border-radius: 10px;
  background: var(--opacity-cover);
}

#profile-left li strong,
#profile-right li strong {
  font-weight: normal;
  line-height: 140%;
}

/*#viewprofile — в копии экстры «#viewprofile td {padding: 0; border: 0}»*/
#viewprofile #profile-left {
  width: 220px;
  margin-top: -20px;
  padding: 5px 20px 20px;
  border: 1px solid #aaa492;
  border-radius: 5px 5px 15px 15px;
  box-shadow: 0 0 10px 0 #978d70, inset 0 0 15px 0 #656d7e, inset 0 0 0 3px #4d525c, inset 0 0 0 2px #393d45;
  background: linear-gradient(90deg, #212731 0%, #2c333f 46.53%, #212731 100%);
  text-align: center;
  color: var(--third-text-color);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
}

#profile-left li {
  margin-bottom: 0;
}

li#profile-name {
  font-family: var(--third-family);
  font-weight: 400;
  font-size: 22px;
  color: var(--accent-yellow);
}

#profile-left li#profile-title {
  margin-bottom: 10px;
  font-size: 11px;
  text-transform: lowercase;
}

li#pa-avatar {
  border: 1px solid #2e3341;
  border-radius: 8px;
  box-shadow: 0 -1px 2px 0 rgba(76, 85, 103, 0.29), 0 -3px 3px 0 rgba(76, 85, 103, 0.26), 0 -6px 4px 0 rgba(76, 85, 103, 0.15), 0 -11px 5px 0 rgba(76, 85, 103, 0.04), 0 -18px 5px 0 rgba(76, 85, 103, 0.01);
}

#profile-left li#pa-online {
  margin: 10px 0;
  font-size: 12px;
  text-transform: lowercase;
}

li#pa-edit a {
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 8px 15px;
  border: 1px solid #6c2529;
  border-radius: 10px;
  box-shadow: 0 1px 2px 0 rgba(54, 43, 43, 0.2), 0 4px 4px 0 rgba(54, 43, 43, 0.17), 0 8px 5px 0 rgba(54, 43, 43, 0.1), 0 15px 6px 0 rgba(54, 43, 43, 0.03), 0 23px 7px 0 rgba(54, 43, 43, 0);
  background: var(--noise), linear-gradient(90deg, #782b2e 0%, #892b2f 46.53%, #782b2e 100%);
  color: var(--third-text-color);
}

#profile-left li#pa-ua {
  margin: 10px 0 0;
}

#profile-right {
  display: flex;
  flex-wrap: wrap;
  flex-grow: 1;
  gap: 5px;
  width: calc(100% - 220px - 15px);
}

#profile-right li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: calc(50% - 2.5px);
  padding: 8px 10px;
  border: none;
  border-radius: 5px;
  background: var(--opacity-cover);
}

#profile-right li#pa-posts {
  order: -1;
  width: 100%;
}

#profile-right li#pa-fld1 {
  order: 1;
  width: 100%;
}

#profile-right li#pa-fld1 strong {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#profile-right li span {
  flex-shrink: 0;
  font-weight: 400;
  font-size: 10px;
  line-height: 140%;
  text-transform: uppercase;
  text-align: center;
  color: var(--secondary-text-color);
}

#profile-right li span a {
  font-size: 12px;
}

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

img.avatardemo {
  float: right;
  margin: 0 0 8px 18px;
}

/*ЛС*/
#pun-messages .clearer {
  display: none;
}

#pun-messages .main tr {
  align-items: stretch;
  border-bottom: 1px solid var(--borders-color-lighter);
}

#pun-messages tr td {
  display: flex;
  align-items: center;
  justify-content: left;
  padding: 0 10px;
}

#pun-messages tr .tcl .intd {
  display: flex;
  flex-grow: 1;
  align-items: center;
  gap: 10px;
  min-height: 50px;
}

#pun-messages tr td.tc3.pmtc33 {
  justify-content: center;
}

#pun-messages tr .tc2.pmtc24 {
  justify-content: center;
  min-height: 20px;
  border-radius: 0 8px 8px 0;
}

#pun-messages .linksb {
  align-items: center;
  padding: 0;
}

/*просмотр ЛС: полоса с датой — от края карточки автора, как в теме (боковые 70px поста здесь лишние)*/
#pun-messages .post h3 {
  padding-left: 0;
  padding-right: 0;
}

/*Участники: карточками, аватар на углу*/
#pun-userlist .usertable {
  margin-top: 0;
}

#pun-userlist .formal,
#pun-userlist .formal .container {
  margin-bottom: 0;
}

#userlist.container p.formsubmit,
#userlist.container p.formsubmit input {
  margin: 0 auto;
  text-align: center;
}

#pun-userlist .usertable tbody {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 10px;
}

#pun-userlist .usertable tr {
  flex-direction: column;
  gap: 5px;
  position: relative;
  width: 232px;
  padding: 5px 10px 10px;
  border: 1px solid var(--borders-color);
  border-radius: 10px;
  background: var(--noise) var(--cover);
}

#pun-userlist .usertable td,
#pun-userlist .usertable .tc2,
#pun-userlist .usertable .tc3 {
  width: 100%;
  white-space: normal;
  text-align: left;
}

#pun-userlist .usertable .user-avatar {
  position: absolute;
  top: -5px;
  left: -7px;
  margin: 0 15px 10px 0;
  vertical-align: baseline;
}

#pun-userlist td .user-avatar,
#pun-userlist td .user-avatar .avatar-image {
  width: 50px;
  height: 50px;
  mix-blend-mode: normal;
  opacity: 1;
}

#pun-userlist .tcl.username {
  padding-left: 40px;
  font-family: var(--third-family);
  font-size: 22px;
}

#pun-userlist .tcl.username a {
  font-weight: 400;
}

#pun-userlist .tc2.user_title {
  overflow: hidden;
  margin-bottom: 5px;
  padding-left: 40px;
  font-family: var(--font-family);
  font-weight: 400;
  font-size: 11px;
  text-transform: lowercase;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--secondary-text-color);
}

#pun-userlist .tc3 {
  padding: 2px 10px;
  border-radius: 8px;
  background: var(--light-cover);
  font-size: 11px;
  text-transform: lowercase;
  text-shadow: var(--text-shadow);
}

/*шапки таблицы нет — подписи строк*/
#pun-userlist .tc3.relation::before {
  content: "уважение: ";
}

#pun-userlist .tc3.num_posts::before {
  content: "сообщений: ";
}

#pun-userlist .tc3.registered::before {
  content: "дата регистрации: ";
}

#pun-userlist .tc3.last_visit::before {
  content: "был в сети: ";
}

/*Кто на форуме: имя и действие поровну, время справа.
  Движок пишет шапке style="width:25%" прямо в разметку — строки здесь на flex,
  поэтому ширину колонок задаёт flex-basis: он главнее width, !important не нужен*/
#pun-online .online-list .tcl {
  flex: 0 0 40%;
}

#pun-online .online-list .tcl.action {
  border-radius: 0;
  text-align: center;
}

#pun-online .online-list .tc3 {
  flex: 0 0 20%;
  border-radius: 0 8px 8px 0;
  white-space: normal;
  text-align: center;
}

/*Статистика форума (statistic.php): строками, как «Кто на форуме».
  Ширины колонок экстра задаёт width — в строке на flex их ведёт flex-basis*/
#pun-statistic .main th:last-child {
  border-radius: 0 8px 8px 0;
}

#pun-statistic .tc-username {
  flex: 0 0 25%;
}

#pun-statistic .tc-title {
  flex: 1 1 0;
}

#pun-statistic .tc3 {
  flex: 0 0 15%;
  text-align: center;
}

#pun-statistic .tc-topic {
  flex: 1 1 0;
}

#pun-statistic .tc-topic + .tc-username {
  flex: 0 0 20%;
  text-align: center;
}

/*у каждого раздела статистики — свиток под заголовком (на других страницах он — фон #pun-main,
  здесь он оставался только у первого); заголовок — у своей таблицы, отступ — перед ним*/
#pun-statistic #pun-main {
  background: none;
}

#pun-statistic .main .section {
  background: url(https://forumstatic.ru/files/0016/01/4e/71076.png) no-repeat top center;
}

#pun-statistic .main .section + .section {
  margin-top: 30px;
}

#pun-statistic #pun-main h1 {
  min-height: 0;
}

/*Служебные сообщения движка*/
.info .container {
  border: 0;
}

.info .container .backlink {
  padding-top: 8px;
}

/*Подвал: копирайт и баннеры под рамкой (HTML низ движок кладёт внутрь .punbb)*/
#html-footer .container {
  padding: 0;
}

/*копирайт и баннеры — в строку на flex: край плашки баннеров заходит под копирайт (отрицательное
  поле справа, копирайт поверх); не помещаются рядом — баннеры сами переносятся вниз, к правому краю.
  30 + 340 &#8722; 39 + 769 = 1100 — на десктопе ровно в строку*/
.footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  position: absolute;
  width: 1100px;
  height: fit-content;
  margin-top: 50px;
}

.copyright {
  order: -1;
  position: relative;
  z-index: 1;
  width: 340px;
  height: 58px;
  margin: 0 -39px 0 30px;
  padding: 8px 15px;
  border-bottom: 1px solid #475061;
  border-inline: 1px solid #475061;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 1px 2px 0 rgba(8, 8, 8, 0.2), 0 3px 3px 0 rgba(8, 8, 8, 0.17), 0 7px 4px 0 rgba(8, 8, 8, 0.1), 0 12px 5px 0 rgba(8, 8, 8, 0.03), 0 18px 5px 0 rgba(8, 8, 8, 0);
  background: var(--noise), linear-gradient(180deg, #1a2438 0%, #313b4f 35.58%, #3b4559 100%);
}

.copyright p {
  max-height: 42px;
  overflow: auto;
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 11px;
  color: var(--third-text-color);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
}

.copyright a {
  color: var(--accent-yellow);
}

.copyright a:hover {
  color: var(--third-text-color);
}

.banners {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-between;
  width: 769px;
  height: 154px;
  margin-left: auto;
  padding: 8px 50px 50px;
  background: url(https://forumstatic.ru/files/0016/01/4e/68856.png) no-repeat top right;
}

.banners .container {
  display: flex;
  flex-wrap: wrap;
  flex-shrink: 0;
  gap: 8px;
  height: 70px;
  overflow: auto;
}

.banners h5 {
  font-family: var(--third-family);
  font-weight: 400;
  font-size: 24px;
  text-transform: lowercase;
  text-align: right;
  color: var(--accent-blue);
  text-shadow: var(--text-shadow);
  transform: rotate(3.5deg);
}

.banners a {
  display: block;
  width: 88px;
  height: 31px;
  opacity: .7;
}

.banners a:hover {
  opacity: 1;
}

/*Кнопки вверх-вниз (разметка и скрипт — в HTML верх) — язычками у правого края рамки.
  Место — здесь; скрипт только сдвигает их (transform), если они вышли бы за блок форума:
  наверху страницы — над рамкой, внизу — под ней. Поэтому transform без плавного перехода*/
#ToTop,
#OnBottom {
  display: none;
  position: fixed;
  z-index: 9999;
  width: 40px;
  height: 31px;
  margin-left: 1035px;
  padding: 8px 15px;
  border-block: 1px solid #475061;
  border-left: 1px solid #475061;
  border-radius: 10px 0 0 10px;
  box-shadow: 0 1px 2px 0 rgba(8, 8, 8, 0.2), 0 3px 3px 0 rgba(8, 8, 8, 0.17), 0 7px 4px 0 rgba(8, 8, 8, 0.1), 0 12px 5px 0 rgba(8, 8, 8, 0.03), 0 18px 5px 0 rgba(8, 8, 8, 0);
  background: var(--noise), linear-gradient(270deg, #1a2438 0%, #313b4f 35.58%, #3b4559 100%);
  color: var(--third-text-color);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
  cursor: pointer;
  transition: all .3s linear 0s, transform 0s;
}

#ToTop {
  bottom: 300px;
}

#OnBottom {
  bottom: 254px;
}

/*Страница переадресации: тёмная сцена с ключами, своя фраза вместо текста движка*/
body.redirect-page::before {
  content: '';
  background: url(https://forumstatic.ru/files/0016/01/4e/83329.jpg) no-repeat fixed top center/cover;
}

body.redirect-page::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 640px;
  height: 360px;
  background: url(https://forumstatic.ru/files/001a/fa/19/52964.gif) no-repeat top center;
  mix-blend-mode: screen;
  transform: translateX(-50%);
}

body.redirect-page #pun {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 100;
  width: fit-content;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  transform: translate(-50%, -50%);
}

body.redirect-page h1 {
  display: none;
}

body.redirect-page #pun .info {
  position: relative;
  font-size: 0;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
}

body.redirect-page #pun .info::before {
  content: "Магия решит все твои проблемы. Добавив кому-то новые.";
  display: block;
  max-width: 600px;
  margin: 0 auto;
  font-family: var(--third-family);
  font-weight: 400;
  font-size: 36px;
  text-align: center;
  color: var(--third-text-color);
}

body.redirect-page #pun .backlink a {
  font-size: 13px;
  color: var(--third-text-color);
}

/*Админка*/
.punbb-admin {
  padding-top: 20px;
}

.punbb-admin .adcontainer,
.punbb-admin .adformal {
  border: none;
}

.punbb-admin .adminmain {
  margin: 0;
  padding: 0 25px 0 205px;
}

.punbb-admin #pun-adnav {
  width: 200px;
  margin-left: -180px;
}

.punbb-admin #pun-adnav ul {
  padding: 10px 10px 10px 30px;
}

/*подменю открытого пункта: у пункта уже есть отступ (admin.css), второй 30px был лишним*/
.punbb-admin #pun-adnav ul.adsubnav {
  padding: 5px 0 0 10px;
}

/*заголовки — тёмной полосой, как на проде; текст светлый (тёмный цвет основы на ней терялся)*/
.punbb-admin #pun-admain .adformal h2,
.punbb-admin #pun-admain #pun-adnav h2 {
  min-height: 0;
  background: #333;
  color: var(--third-text-color);
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.25);
}

/*Скрипты сайта и форума*/
/*всплывающее окно справки по API*/
.api-form {
  position: absolute;
  z-index: 999999;
  width: 800px;
  margin-left: 15px;
  padding: 1em;
  border-radius: 15px;
  box-shadow: 0 0 5px 1px #aa7e61;
  background: url(https://forumstatic.ru/files/001a/fa/19/79976.png?v=1);
}

.api-form-hidden {
  display: none;
}

/*страница «коллекции»: подпись выезжает при наведении*/
.box-crew {
  position: relative;
  width: 100px;
  height: 167px;
  overflow: hidden;
}

.box-crew span {
  display: block;
  position: absolute;
  top: -130px;
  width: 100%;
  padding: 10px 0;
  background-color: #c5bfa9;
  font-family: var(--font-family);
  font-size: 10px;
  text-align: center;
  color: #022038;
  transition-duration: 0.6s;
}

div.box-crew:hover span {
  top: 0;
}

/*бегунок размера шрифта в шапке поста (раньше — стилем в HTML верх)*/
.FNTslider {
  float: right;
  position: relative;
  z-index: 1000;
  width: 110px;
  height: 5px;
  margin: 5px 7% 3px 5px;
  border-radius: 4px;
  background: rgba(108, 101, 80, 0.15);
}

.FNTslider .before {
  position: absolute;
  height: 6px;
  margin-top: -1px;
  border-radius: 4px 0 0 4px;
  background: var(--accent-red);
}

.FNTslider .thumb {
  position: relative;
  top: -4px;
  width: 8px;
  height: 13px;
  border-radius: 3px;
  background: var(--accent-blue);
  cursor: pointer;
}

/*калькулятор годов обучения (c) Fumuse*/
#year-learning-block-wrapper {
  display: none;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(59, 69, 89, 0.55);
}

#year-learning-block-wrapper.open {
  display: flex;
}

#year-learning-block-wrapper h2 {
  width: auto;
  background: none;
}

#year-learning-block {
  width: 500px;
  max-width: 92vw;
  height: auto;
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px 22px;
  border: 1px solid #6C2529;
  border-radius: 10px;
  box-shadow: 0px 15px 6px rgba(54, 43, 43, 0.03), 0px 8px 5px rgba(54, 43, 43, 0.1), 0px 4px 4px rgba(54, 43, 43, 0.17), 0px 1px 2px rgba(54, 43, 43, 0.2);
  background: url(https://forumstatic.ru/files/001a/fa/19/79976.png) center repeat;
  font-family: var(--font-family);
  letter-spacing: 0.5px;
  color: var(--main-text-color);
}

#calculator-error {
  font-weight: bold;
  color: var(--accent-red);
}

.year-learning-block-close {
  text-align: right;
  color: var(--secondary-text-color);
  cursor: pointer;
}

.year-learning-block-close:hover {
  color: var(--accent-red);
}

/*мессенджер и подписи скриптов*/
#messanger1,
.styl1,
.styl2 {
  color: var(--accent-yellow);
}

/*кнопка «добавить эпизод» (скрипт эпизодов в профиле)*/
button.add-user-episode-button {
  margin: 0;
  padding: 6px 14px;
  border: none;
  border-radius: 10px;
  background: var(--opacity-cover);
  font-family: var(--font-family);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--accent-red);
  cursor: pointer;
  transition: color 0.3s ease, background 0.3s ease;
}

button.add-user-episode-button:hover:not([disabled]) {
  color: var(--accent-blue);
}

button.add-user-episode-button[disabled] {
  background: rgba(108, 101, 80, 0.06);
  color: var(--secondary-text-color);
  cursor: default;
  opacity: 0.7;
}

/******************************************************
Страницы-скрипты (админка &#8594; «Страницы»): хронология, календарь.
Их вид на телефоне — в мобильном блоке (он всегда последний)
*******************************************************/
.pages div.container {
  padding: var(--pad1);
  border-radius: 15px;
}

/*Хронология*/
.container999 {
  height: 450px;
  overflow-y: auto;
}

.container999 table {
  border-spacing: 0;
}

.container999 thead tr {
  height: 32px;
  font-family: var(--third-family);
  font-size: 20px;
  letter-spacing: 1px;
}

.container999 thead th {
  line-height: 20px;
  border-radius: 10px;
  background: var(--opacity-cover);
  font-weight: 700;
  font-size: 12px;
  color: var(--main-text-color);
  text-shadow: var(--text-shadow);
}

.container999 thead th:hover {
  color: var(--accent-blue);
  transition: color 0.5s linear;
}

.container999 td {
  font-family: var(--font-family);
  color: var(--main-text-color);
}

/*кнопки правки и удаления — простыми значками*/
.adbut input.button,
.timeline-button--update,
.timeline-button--delete {
  padding: 2px 8px;
  border: none;
  border-radius: 8px;
  box-shadow: none;
  background: var(--opacity-cover);
  font-family: var(--font-family);
  font-weight: 600;
  font-size: 12px;
  color: var(--accent-red);
  transition: color 0.3s ease;
}

.adbut input.button:hover,
.timeline-button--update:hover,
.timeline-button--delete:hover {
  border: none;
  box-shadow: none;
  background: var(--opacity-cover);
  color: var(--accent-blue);
  transform: none;
}

.hrono-s-date,
.hrono-s-op {
  width: 15%;
}

.hrono-s-date {
  font-size: 12px;
  text-align: center;
}

.hrono-s-link,
.hrono-s-op {
  font-size: 14px;
  text-align: center;
}

.hrono-s-link,
.hrono-s-us {
  width: 30%;
}

.hrono-s-us {
  font-weight: 600;
  font-size: 12px;
  text-align: center;
  color: var(--accent-red);
}

.adbut {
  display: none;
  width: 10%;
}

.ismoderator .adbut,
.isadmin .adbut {
  display: table-cell;
}

/*перенесено из текста страницы: кнопка «перенести» в колонке правки не нужна*/
.adbut input.button[name="move"] {
  display: none;
}

/*перенесено из текста страницы: поиск — скрипт помечает непрошедшие строки visible='false';
  «ничего не найдено» скрыто, показывает его сам скрипт*/
#pun-main.pages .results tr[visible='false'],
.no-result {
  display: none;
}

/*окно правки записи*/
#hronoedit {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 9999;
  width: 500px;
  max-width: 92vw;
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px 22px;
  border: 1px solid #6C2529;
  border-radius: 10px;
  box-shadow: 0px 15px 6px rgba(54, 43, 43, 0.03), 0px 8px 5px rgba(54, 43, 43, 0.1), 0px 4px 4px rgba(54, 43, 43, 0.17), 0px 1px 2px rgba(54, 43, 43, 0.2);
  background: url(https://forumstatic.ru/files/001a/fa/19/79976.png) repeat;
  font-family: var(--font-family);
  color: var(--main-text-color);
  transform: translate(-50%, -50%);
}

#hronoedit .inputfield input {
  width: 100%;
}

/*разделитель между годами*/
.results .delimiter {
  background: url(https://upforme.ru/uploads/001a/fa/19/2/292922.png) center no-repeat;
  color: transparent;
}

.results .delimiter td {
  line-height: 43px;
}

/*поиск*/
.hrono-search-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 15px;
}

input.searchKey {
  width: 300px;
  margin: 0;
}

.searchCount {
  margin: 0;
  font-family: var(--font-family);
  letter-spacing: 1px;
  color: var(--secondary-text-color);
}

/*Календарь событий: таблица с ячейками фиксированного размера.
  Публичный — #calendar.eventsk, рабочий в админке — .calendar-wrapper#calendar (тот же id)*/
.eventsk {
  width: 100%;
  font-family: var(--font-family);
}

#pun-main.pages #calendar table {
  width: 840px;
  max-width: 100%;
  margin: 0 auto;
  border-spacing: 2px;
  table-layout: fixed;
}

/*перенесено из текста страницы: ячейка — опора для кнопок модератора и всплывающих событий*/
#calendar,
#calendar td {
  position: relative;
}

.calendar-wrapper#calendar table {
  width: 630px;
  max-width: 100%;
  margin: 0 auto;
  border-spacing: 2px;
  table-layout: fixed;
}

.eventsk td.calendar-day-header {
  position: relative;
  vertical-align: top;
  color: var(--main-text-color);
}

.eventsk td.calendar-day {
  overflow-x: hidden;
  overflow-y: auto;
  vertical-align: top;
  color: var(--main-text-color);
}

#calendar.eventsk th {
  width: 120px;
  text-align: center;
}

#calendar.eventsk td {
  width: 120px;
  padding: 2px;
  background: var(--opacity-cover);
  text-align: center;
}

/*нечётные строки — числа, чётные — события*/
#calendar.eventsk tbody tr:nth-child(odd) td {
  height: 30px;
  border-radius: 5px 5px 0 0;
}

#calendar.eventsk tbody tr:nth-child(even) td {
  height: 90px;
  border-radius: 0 0 5px 5px;
}

#calendar.eventsk .event-container {
  max-height: 60px;
  margin-top: 2px;
  overflow-x: hidden;
  overflow-y: auto;
}

/*место под кнопки модератора — только когда они есть: скрипт кладёт их в ячейку перед событиями*/
#calendar.eventsk .calendar-event-add ~ .event-container {
  margin-top: 22px;
}

#calendar.eventsk .event-line {
  position: relative;
  margin-bottom: 2px;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--opacity-cover);
  font-size: 11px;
  text-align: left;
  overflow-wrap: break-word;
  word-break: break-word;
}

#calendar.eventsk .event-line.has-event-line-mod {
  padding-left: 24px;
}

#calendar.eventsk .event-line p {
  padding: 0;
  font-weight: 600;
  font-size: 10px;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
}

#calendar.eventsk .delete-event {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 2px;
  left: 2px;
  right: auto;
  z-index: 5;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--cover);
  color: var(--accent-red);
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}

#calendar.eventsk .delete-event:hover {
  opacity: 1;
  color: var(--accent-blue);
}

/*перенесено из текста страницы: окна модератора — настройки дня и новое событие*/
#event-calendar-settings-block,
#event-calendar-content-block {
  position: absolute;
  top: 0;
  left: calc(50% - 250px);
  z-index: 999999;
  width: 500px;
  padding: 1em;
  box-sizing: border-box;
  border: 1px solid #6c2529;
  border-radius: 10px;
  box-shadow: 0 15px 6px rgba(54, 43, 43, 0.03), 0 8px 5px rgba(54, 43, 43, 0.1), 0 4px 4px rgba(54, 43, 43, 0.17), 0 1px 2px rgba(54, 43, 43, 0.2);
  background: url(https://forumstatic.ru/files/001a/fa/19/79976.png) center repeat;
}

#event-calendar-settings-form label,
#event-calendar-content-block label {
  display: flex;
  width: 100%;
}

#event-calendar-settings-form label > *,
#event-calendar-content-block label > * {
  flex: 1 1 auto;
  width: 50%;
}

#event-calendar-settings-block legend,
#event-calendar-content-block legend {
  margin-bottom: 20px;
  text-align: center;
}

#event-calendar-settings-block .formsubmit,
#event-calendar-content-block .formsubmit {
  margin-top: 20px;
}

/*кнопки «добавить» и «настройки» — внутри ячейки числа (в стиле страницы они вынесены над ней)*/
#calendar.eventsk .calendar-event-add,
#calendar.eventsk .calendar-event-settings {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--opacity-cover);
  font-weight: bold;
  font-size: 14px;
  color: var(--accent-red);
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease;
}

#calendar.eventsk .calendar-event-add {
  top: 2px;
  right: 2px;
  left: auto;
}

#calendar.eventsk .calendar-event-settings {
  top: 2px;
  left: 2px;
  right: auto;
}

#calendar.eventsk .calendar-event-add:hover,
#calendar.eventsk .calendar-event-settings:hover {
  background: var(--accent-red);
  color: var(--cover);
}

/*кнопка «+» рабочего календаря в админке — обычной кнопкой в ячейке*/
.calendar-wrapper#calendar .calendar-event-add {
  width: 16px;
  height: 16px;
  margin-left: 2px;
  border: none;
  border-radius: 4px;
  background: rgba(108, 101, 80, 0.15);
  font-size: 11px;
  line-height: 1;
  color: var(--accent-red);
  cursor: pointer;
  transition: color 0.3s ease;
}

.calendar-wrapper#calendar .calendar-event-add:hover {
  color: var(--accent-blue);
}

.eventsk b {
  font-size: 15px;
}

.eventsk p {
  padding: 0 0 5px;
  font-weight: 600;
  font-size: 15px;
}

/******************************************************
Планшет лёжа, небольшой ноутбук (900–1119px): раскладка десктопа, ширина — по экрану
*******************************************************/
@media screen and (min-width: 900px) and (max-width: 1119px) {
  /*шапка-арт нарисована на холсте 1100px — уменьшаем целиком, пропорции и стыки сохраняются;
    --ha = (ширина экрана &#8722; поля 20px) / 1100 по нижней границе ступени*/
  :root {
    --ha: .8;
  }

  /*рамка: их три картинки (верх, середина, низ) по 1100px с зашитыми краями — на узком экране края
    обрезаются. Здесь они склеены в одну (наложены, как их кладёт браузер) и натянуты border-image:
    углы и края целые при любой ширине. ПРОД: залить v3/files/magia-frame-tablet.jpg в «Файлы» Магии
    и заменить адрес*/
  #pun {
    width: auto;
    margin: calc(462px * var(--ha)) 10px 30px;
    border: 0 solid transparent;
    border-image: url(https://forumstatic.ru/files/001c/cd/c3/73774.jpg) 117 60 fill / 117px 60px stretch round;
    background: var(--pun-bg);
  }

  /*меню стоит абсолютом от верха страницы (на десктопе 522 = шапка 462 + 60) — вслед за шапкой*/
  #pun-navlinks {
    top: calc(462px * var(--ha) + 60px);
  }

  #pun .magia-headerart {
    left: 50%;
    margin-left: -550px;
    transform: scale(var(--ha));
    transform-origin: 50% 0;
  }

  /*кнопки вверх-вниз — у правого края рамки, как на десктопе (там: 25px внутрь от края)*/
  #ToTop,
  #OnBottom {
    right: 35px;
    margin-left: 0;
  }

  /*подвал под рамкой — по ширине рамки (на десктопе 1100px)*/
  /*копирайт и баннеры рядом целиком не помещаются — плашка баннеров берёт остаток строки
    (свиток тянется по ширине), а не уходит вниз под копирайт*/
  .footer {
    left: 10px;
    right: 10px;
    width: auto;
    flex-wrap: nowrap;
  }

  .banners {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    background-size: 100% 100%;
  }
}

@media screen and (min-width: 940px) and (max-width: 1119px) {
  :root {--ha: .836;}
}

@media screen and (min-width: 980px) and (max-width: 1119px) {
  :root {--ha: .873;}
}

@media screen and (min-width: 1020px) and (max-width: 1119px) {
  :root {--ha: .909;}
}

@media screen and (min-width: 1060px) and (max-width: 1119px) {
  :root {--ha: .945;}
}

@media screen and (min-width: 1100px) and (max-width: 1119px) {
  :root {--ha: .982;}
}

/******************************************************
Мобильная версия — ВСЕГДА последней: всё новое дописывается выше, мобильное правило
повторяет селектор десктопного (&#8804;899px: телефоны, планшеты стоя, телефоны лёжа;
у Магии было &#8804;700 — 701–1100 на проде раскладывался десктоп 1100px с прокруткой)
*******************************************************/
@media screen and (max-width: 899px) {
  /*Общее: ничего не шире своего блока (у img и полей ввода max-width задан выше — повторяем)*/
  * {
    max-width: 100%;
  }

  img,
  input[type="text"],
  input[type="password"],
  input.searchKey,
  textarea,
  select,
  input[type="date"] {
    max-width: 100%;
  }

  /*страница в резной рамке, фон — бумага*/
  #pun {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    border: 10px solid transparent;
    border-image: url(https://forumstatic.ru/files/0016/01/4e/79641.png) 8/10px round round;
    box-shadow: inset 0 0 10px 0 #2f240b;
    background: url(https://forumstatic.ru/files/0016/01/4e/31248.jpg) repeat top left;
  }

  .punbb > div .container,
  .modmenu {
    padding: 5px 20px;
  }

  /*шапка — картинкой у #pun-title (основа этот блок прячет — показываем)*/
  #pun-title {
    position: static;
    width: auto;
    height: 434px;
    min-height: 300px;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    background: url(https://forumstatic.ru/files/0016/01/4e/13197.jpg) no-repeat top center/cover;
  }

  /*Объявление: кнопки-ссылки поверх шапки, только значками*/
  #pun-announcement {
    position: absolute;
    z-index: 160;
    width: calc(100% - 20px);
  }

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

  .hotlinks {
    flex-wrap: wrap;
    gap: 10px;
    padding-bottom: 20px;
  }

  .hotlinks a {
    padding: 5px 10px;
  }

  .hotlinks a p {
    display: none;
  }

  /*Меню — синей полосой, прилипает к верху, пункты значками*/
  #pun-navlinks {
    position: sticky;
    top: 0;
    z-index: 120;
    width: 100%;
  }

  #pun-navlinks .container {
    position: relative;
    align-items: center;
    align-content: center;
    gap: 10px;
    padding: 10px 20px;
    border-block: 1px solid #2c2622;
    box-shadow: inset 0 0 10px 0 #252e40;
    background: var(--noise), linear-gradient(180deg, #1a2438 0%, #313b4f 35.58%, #3b4559 101%);
  }

  #pun-navlinks li a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 30px;
    height: 30px;
    font-size: 0;
  }

  #pun-navlinks li a::after {
    font: normal 700 16px/16px var(--fa);
    color: var(--accent-yellow);
    text-shadow: none;
  }

  #pun-navlinks li#navindex a::after {content: "\e3af";}
  #pun-navlinks li#navuserlist a::after {content: "\f0c0";}
  #pun-navlinks li#navsearch a::after {content: "\f002";}
  #pun-navlinks li#navprofile a::after {content: "\f2c2";}
  #pun-navlinks li#navadmin a::after {content: "\f085";}
  #pun-navlinks li#navlogout a::after {content: "\f2f5";}
  #pun-navlinks li#navlogin a::after {content: "\e66d";}
  #pun-navlinks li#navregister a::after {content: "\f234";}
  #pun-navlinks li#navpr_1 a::after {content: "\f0a1";}
  #pun-navlinks li#navpr_2 a::after {content: "\f5da";}
  #pun-navlinks li#navawards a::after {content: "\f091";}
  #pun-navlinks li#navrules a::after {content: "\f03a";}

  /*ЛС — значок у span внутри ссылки: у непрочитанных движок ставит метку data-last-unread
    на span, не на ссылку (у ссылки её без :has не выбрать)*/
  #pun-navlinks li#navpm a > span:not(.num_msg)::after {
    content: "\f0e0";
    font: normal 700 16px/16px var(--fa);
    color: var(--accent-yellow);
    text-shadow: none;
  }

  /*есть непрочитанные — значок другой и мигает*/
  #pun-navlinks li#navpm span[data-last-unread] {
    animation: blinkColor 2s linear infinite;
  }

  #pun-navlinks li#navpm span[data-last-unread]::after {
    content: "\e16f";
  }

  /*счётчик скрипта уведомлений — на тестовике его нет, !important как на проде, не проверено*/
  #pun-navlinks li#navpm span.num_msg {
    height: 20px !important;
    margin-top: 0;
  }

  span.num_msg::before {
    top: -3px;
    z-index: 100;
  }

  /*Ссылки пользователя — плашками*/
  #pun-ulinks {
    z-index: 110;
    height: auto;
    border-bottom: 1px solid var(--borders-color);
    background: var(--opacity-cover);
  }

  #pun-ulinks .container {
    gap: 5px;
    padding: 10px 20px;
  }

  #pun-ulinks li a {
    display: block;
    padding: 2px 5px 3px;
    border-radius: 5px;
    background: var(--opacity-cover);
    color: var(--main-text-color);
  }

  /*!important — как на проде; против чего, не проверено (пузырь уведомлений, скрипт)*/
  #pun-ulinks > span.notify-bubble {
    display: block !important;
  }

  /*Приветствие и крошки*/
  /*промежутки и выравнивание основы — не нужны (у Магии отступ у самих span)*/
  #pun-status .container {
    display: flex;
    flex-wrap: wrap;
    align-items: normal;
    gap: normal;
    justify-content: left;
    font-size: 12px;
    text-align: left;
  }

  #pun-crumbs1 {
    margin: 10px 0 15px;
  }

  /*Кнопки вверх-вниз — у правого края экрана*/
  #ToTop,
  #OnBottom {
    right: 10px;
    margin: 0;
  }

  #ToTop {
    bottom: 320px;
  }

  #OnBottom {
    bottom: 280px;
  }

  /*Списки движка: строки переносятся, ячейки — блоками друг под другом*/
  .category thead,
  .forum thead,
  .usertable thead,
  .online-list thead,
  #messages thead,
  #filetable thead,
  #pun-respect thead,
  #pun-positive thead {
    display: none;
  }

  #pun-index .category h2,
  #pun-stats h2 {
    padding: 0 20px;
  }

  #pun-index .category {
    margin-bottom: 20px;
  }

  .main .hasicon {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .category tr,
  .forum tr,
  .usertable tr,
  .online-list tr,
  #messages tr,
  #filetable tr,
  #pun-respect tr,
  #pun-positive tr {
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    padding: 8px 0;
  }

  .hasicon tr:not(:last-of-type) {
    border-bottom: 1px solid var(--borders-color-lighter);
  }

  /*главная: разделы карточками*/
  #pun-index .main .hasicon {
    gap: 10px;
  }

  #pun-index .hasicon tr {
    gap: 10px;
    padding: 10px;
    border: none;
    border-radius: 10px;
    background: var(--opacity-cover);
  }

  .category td,
  .forum td,
  .usertable td,
  .online-list td,
  #messages td,
  #filetable td,
  #pun-respect td,
  #pun-positive td {
    padding: 5px 10px;
  }

  .main .tcl,
  .main .tcr,
  #pun-searchtopics .main .tcl,
  #pun-modviewforum .main .tcl,
  #pun-messages tr td.tcl,
  #pun-messages tr td.tcr {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0;
  }

  .main .intd {
    display: flex;
    width: 100%;
  }

  .tclcon {
    flex-grow: 1;
  }

  div.icon {
    position: relative;
  }

  /*счётчики тем, ответов и просмотров на телефоне скрыты*/
  .main .tc2,
  .main .tc3 {
    display: none;
  }

  /*последнее сообщение — плашкой, без аватара*/
  .main .tcr {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    position: relative;
  }

  #pun-viewforum .forum .tcr {
    display: flex;
    align-items: flex-start;
    width: 100%;
  }

  /*плашка — у самих ссылки на тему и даты, не у ячейки: у раздела без сообщений
    в ячейке только &nbsp; — плашки нет (без :has)*/
  #pun-index .tcr {
    align-items: stretch;
  }

  #pun-index .tcr .lastpost-link,
  #pun-index .tcr .lastpost {
    width: auto;
    padding: 0 15px;
    background: var(--opacity-cover);
  }

  #pun-index .tcr .lastpost-link {
    padding-top: 10px;
    border-radius: 10px 10px 0 0;
  }

  #pun-index .tcr .lastpost {
    padding-bottom: 10px;
    border-radius: 0 0 10px 10px;
  }

  .main .forum .tcr,
  #pun-viewforum .forum td.tcr {
    padding: 0 10px;
  }

  .tcr .user-avatar {
    display: none;
  }

  /*последнее сообщение в списке тем: имя автора перед датой*/
  .forum .tcr .byuser {
    display: flex;
  }

  .forum .tcr .byuser-username {
    order: -1;
  }

  .tcr > a,
  .tcr .lastpost,
  .tcr > .byuser {
    width: fit-content;
    text-align: left;
  }

  .user-avatar .avatar-image {
    display: flex;
  }

  .main td.tcmod {
    flex-shrink: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    margin-left: auto;
  }

  /*Статистика — плашки на всю строку*/
  #pun-stats .container li:not(#onlinelist),
  #statistic-other span {
    flex-grow: 1;
    text-align: center;
  }

  /*Подвал — в поток: копирайт полосой, баннеры под ним.
    flow-root — отступ подвала не «схлопывается» с контейнером*/
  #html-footer > .container {
    display: flow-root;
  }

  .footer {
    flex-direction: column;
    position: relative;
    margin-top: 10px;
  }

  .copyright {
    width: 100%;
    height: auto;
    margin: 0;
    border-block: 1px solid #2c2622;
    border-radius: 0;
    box-shadow: inset 0 0 10px 0 #252e40;
  }

  .banners {
    display: block;
    position: relative;
    width: 100%;
    height: 102px;
    padding: 10px 16px;
    background: none;
  }

  .banners h5 {
    display: none;
  }

  /*Участники — счётчики видны (подписями строк)*/
  #pun-userlist .main .tc2,
  #pun-userlist .main .tc3 {
    display: block;
  }

  /*Страницы, кнопки, модерация*/
  .linkst,
  .linksb {
    padding: 5px 20px;
  }

  .linkst::after,
  .linksb::after {
    display: none;
  }

  .linksb .pagelink {
    order: 1;
    flex-grow: 1;
    width: fit-content;
    max-width: fit-content;
  }

  .postlink,
  .linksb noindex {
    order: 2;
    flex-grow: 1;
  }

  .subscribelink {
    order: 3;
  }

  .modmenu p.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 5px;
    width: 100%;
    padding: 10px;
  }

  #topic-users-in .container {
    justify-content: flex-start;
  }

  .modmenu p.container::after {
    display: none;
  }

  .modmenu strong {
    width: 100%;
    margin-bottom: 10px;
  }

  #pun-viewforum .modmenu .container strong a {
    display: flex;
    font-size: 0;
  }

  #pun-viewforum .modmenu .container strong a::after {
    content: "Действия с темами";
    font-size: 12px;
  }

  .modmenu input.button {
    margin: 0;
  }

  #pun-searchposts .post h3 span {
    justify-content: flex-start;
    gap: 0 10px;
  }

  #pun-admain #tag-filter-container {
    margin-bottom: 10px;
  }

  .per-page-select,
  #profile10 .submitend .pagelink {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  .per-page-select .page-container,
  .files-pagelink {
    flex-grow: 1;
  }

  /*Пост: автор строкой над текстом — аватар 50px слева, ник и статус рядом*/
  .post {
    margin: 0;
    scroll-margin-top: 55px;
  }

  .post h3 {
    padding: 0;
  }

  .post h3 span {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: 0 20px;
    padding: 0;
  }

  .post h3 span strong {
    order: 2;
    margin-left: auto;
  }

  .post > div.container {
    flex-direction: column;
    padding: 10px 20px;
  }

  .post-author {
    width: 100%;
    min-height: 90px;
    margin: 0;
    padding: 10px;
  }

  #pun-searchposts .post .post-author {
    min-height: unset;
  }

  /*!important — высоту списку карточки пишет в style скрипт Магии (pub.bundle.js,
    «дополнительная информация»); на телефоне этот блок скрыт, высота не нужна*/
  .post-author ul {
    flex-direction: row;
    flex-wrap: wrap;
    min-height: unset !important;
  }

  /*лишние строки карточки на телефоне скрыты*/
  .pa-reg,
  .pa-from,
  .pa-invites,
  .pa-positive,
  .pa-icq,
  .pa-sex,
  .pa-age,
  .pa-ip,
  .pa-time-visit,
  .pa-last-visit,
  .pa-online,
  .pa-awards,
  .pa-gifts,
  .pa-fld2,
  .character-summary__profile-block {
    display: none;
  }

  /*команда — ярлыком сверху справа*/
  .post-author .pa-fld3 {
    top: 0;
    right: 10px;
    left: unset;
    width: fit-content;
    padding: 5px 15px;
    border-top: none;
    border-inline: 1px solid #6d3434;
    border-bottom: 1px solid #6d3434;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, #3a080a 0%, #5d1619 31.25%, #892b2f 100%);
    text-transform: uppercase;
    writing-mode: horizontal-tb;
    transform: none;
  }

  .post-author .pa-avatar {
    display: block;
    order: -2;
    position: absolute;
    width: 50px;
    height: auto;
    max-width: 50px;
    max-height: 50px;
  }

  .post-author .pa-avatar img {
    width: 100%;
    height: 100%;
    max-width: 50px;
    max-height: 50px;
    object-fit: contain;
    object-position: center;
  }

  /*ширина — за вычетом отступа под аватар (65px): в обзоре темы под формой ответа ник — p, не в ul,
    и не сжимается — со 100% вылезал за экран*/
  .post-author .pa-author,
  .post-author .pa-title {
    width: calc(100% - 65px);
    text-align: left;
  }

  .post-author .pa-author {
    justify-content: flex-start;
    margin: 10px 0 5px 65px;
  }

  /*значок «в сети» — справа в строке ника (ярлык команды — выше)*/
  .post-author .pa-author::after {
    top: 25px;
  }

  .post-author .pa-title {
    margin: 0 0 10px 65px;
  }

  .post-author .pa-fld1,
  .pa-wrap {
    width: 100%;
  }

  .pa-posts,
  .pa-respect {
    display: flex;
  }

  .post-body {
    width: 100%;
  }

  .post-box {
    padding: 10px 0;
  }

  .post-content p {
    padding: 0 0 5px 0;
  }

  .post-content iframe {
    max-width: 100%;
  }

  .post-sig {
    display: none;
  }

  /*ссылки под постом — значками*/
  .post-links ul {
    margin-top: 5px;
  }

  .post-links li {
    padding-left: 10px;
    line-height: initial;
  }

  .post-links .pl-email,
  .post-links .pl-website {
    padding: 0 10px 0 0;
  }

  .post-links li a {
    display: inline-flex;
    padding: 5px;
    border-radius: 5px;
    font-size: 0;
    line-height: 16px;
  }

  .post-links li a::before {
    font: 700 16px/16px var(--fa);
  }

  .post-links li.profile a::before {content: "\f2bb";}
  .post-links li.pm a::before {content: "\f0e0";}
  .post-links li.email a::before,
  #pun-messages .post-links li.pl-email a::before {content: "\40";}
  .post-links li.pl-website a::before {content: "\e60e";}
  .post-links li.pl-delete a::before {content: "\f1f8";}
  .post-links li.pl-edit a::before {content: "\f044";}
  .post-links li.pl-quote a::before {content: "\e14c";}
  .post-links li.pl-reports a::before {content: "\f848";}

  /*Форма ответа*/
  #post-form {
    margin-top: 5px;
  }

  #form-buttons tr {
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 0 5px;
  }

  #form-buttons td {
    display: block;
    width: 26px;
    height: 26px;
  }

  #post-form #tags .container {
    display: flex;
    gap: 5px 10px;
    position: relative;
    left: 0;
    width: 100%;
    margin-bottom: 10px;
  }

  #post-form #tags #font-area {
    padding-bottom: 15px;
  }

  /*Поиск сообщений*/
  #pun-searchposts .post-author ul {
    justify-content: space-between;
  }

  #pun-searchposts .post li.pa-author,
  #pun-searchposts .post li.pa-replies {
    width: auto;
    margin: 0;
    text-align: left;
  }

  #pun-searchposts .post-links ul {
    height: 150%;
    margin: 0;
  }

  #pun-searchposts .post-links li a {
    font-size: initial;
  }

  /*Просмотр профиля: карточка над полями*/
  #viewprofile .container {
    padding: 5px 20px;
  }

  #viewprofile ul,
  #profilenav ul {
    margin: 0 0 10px;
  }

  #viewprofile tr {
    flex-direction: column;
    align-items: center;
    padding: 0;
  }

  #viewprofile td,
  #viewprofile #profile-right {
    width: 100%;
  }

  #viewprofile li,
  #viewprofile li strong,
  #viewprofile li span,
  #viewprofile li div,
  #setmods dd,
  #setmods dl {
    margin: 0;
    padding: 0;
  }

  #viewprofile #profile-left {
    margin: 0;
  }

  #profile-right li {
    flex-wrap: wrap;
    width: 100%;
    padding: 5px;
    text-align: center;
  }

  #viewprofile #profile-signature {
    display: none;
  }

  /*Редактирование профиля и ЛС*/
  #profile > .container {
    padding: 5px 10px;
  }

  /*float от десктопной колонки снимаем: иначе форма (fieldset) обтекает меню во всю ширину и сжимается в 0*/
  #profilenav {
    display: block;
    float: none;
    width: 100%;
    margin: 0;
  }

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

  #profilenav li {
    padding: 0;
  }

  #pun-messages #notify-settings {
    width: 100%;
  }

  #pun-messages #notify-settings .inp2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

  /*!important — как на проде; элемент скрипта уведомлений, на тестовике его нет — не проверено*/
  #OnOff_Notify {
    order: 1;
    margin: 0 !important;
  }

  #OnOff_Notify + label {
    display: none;
  }

  #volume-set {
    display: flex;
    align-items: center;
  }

  #profile #messages fieldset,
  #profile #messages fieldset .fs-box {
    margin: 0;
    padding: 0;
  }

  #messages .hasicon tr {
    justify-content: space-between;
    border-bottom: 1px solid var(--borders-color-lighter);
  }

  /*ширины колонок движок пишет в страницу своим <style> с !important (.pmtcl1 {width:57%} и др.,
    у даты и галочки ещё nowrap и overflow:hidden) — перебиваем через flex-basis: в строке на flex
    он главнее width. Тема и отправитель — по строке, ниже дата и галочка*/
  #messages .hasicon .tcl,
  #profile #messages .hasicon .pmtc22 {
    flex: 0 0 100%;
  }

  #profile #messages .hasicon .pmtc22 {
    display: flex;
  }

  #profile #messages .hasicon .tc3,
  #profile #messages .hasicon .pmtc24 {
    display: block;
    padding: 5px 10px;
  }

  #profile #messages .hasicon .tc3 {
    flex: 1 1 0;
    text-align: left;
  }

  /*у галочки движок обнуляет padding (!important) — отступ полем*/
  #profile #messages .hasicon .pmtc24 {
    flex: 0 0 100px;
    margin-right: 10px;
    text-align: right;
  }

  #profile #messages .hasicon .tc3::before {
    content: "Дата: ";
  }

  #profile #messages .hasicon .pmtc24::before {
    content: "Выбрать: ";
  }

  #pun-messages .linksb {
    align-items: flex-start;
    margin-top: 10px;
  }

  #pun-messages .post h3 span {
    margin: 0 0 10px;
    padding: 3px 15px;
  }

  /*Кто на форуме*/
  #pun-online .online-list tr:not(:last-of-type) {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
  }

  #pun-online .username {
    gap: 5px;
  }

  #pun-online .registered-user,
  #pun-online .online-list .tcl.action,
  #pun-online .online-list .tc3 {
    display: block;
    flex-basis: 100%;
  }

  /*Статистика форума: колонки видны (общее правило списков их прячет), ячейки — строками,
    у цифр подписи (шапка таблицы скрыта)*/
  #pun-statistic thead {
    display: none;
  }

  #pun-statistic tr {
    flex-wrap: wrap;
    padding: 8px 0;
  }

  #pun-statistic tr:not(:last-of-type) {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
  }

  #pun-statistic .main .tc2,
  #pun-statistic .main .tc3 {
    display: block;
  }

  #pun-statistic .main td {
    flex: 0 0 100%;
    padding: 0 10px;
    text-align: left;
  }

  /*цифры — в строку, каждая по своему тексту (ширины колонок из экстры здесь не нужны)*/
  #pun-statistic .main td.tc3 {
    flex: 0 0 auto;
    width: auto;
    font-size: 12px;
    white-space: nowrap;
  }

  #pun-statistic .tc-registered::before {content: "зарегистрирован: ";}
  #pun-statistic .tc-posts::before {content: "сообщений: ";}
  #pun-statistic .tc-percent::before {content: "доля: ";}
  #pun-statistic .tc-timevisit::before {content: "на форуме: ";}
  #pun-statistic .tc-invites::before {content: "приглашений: ";}
  #pun-statistic .tc-lastvisit::before {content: "был: ";}
  #pun-statistic .tc-replies::before {content: "ответов: ";}
  #pun-statistic .tc-views::before {content: "просмотров: ";}

  #pun-statistic .main td.tc3::before {
    color: var(--secondary-text-color);
  }

  /*Уважение и позитив: строки подписями*/
  #pun-respect .main .container,
  #pun-positive .main .container {
    padding: 10px;
  }

  #pun-respect tr,
  #pun-positive tr {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
  }

  #pun-respect td,
  #pun-positive td {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    font-size: 12px;
    line-height: 1.2;
  }

  #pun-respect td::before,
  #pun-positive td::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 100px;
    font-weight: bold;
  }

  #pun-respect td.tcl::before,
  #pun-positive td.tcl::before {content: "Когда: ";}
  #pun-respect td.tc2::before,
  #pun-positive td.tc2::before {content: "Что: ";}
  #pun-respect td.tc3::before {content: "Кто: ";}
  #pun-positive td.tc3::before {content: "Кому: ";}
  #pun-respect td.tc4::before,
  #pun-positive td.tc4::before {content: "За что: ";}
  #pun-respect td.tcr::before,
  #pun-positive td.tcr::before {content: "Где: ";}

  #pun-respect .tcr a,
  #pun-positive .tcr a {
    width: auto;
    margin: 0;
    text-align: left;
  }

  /*Загрузка файлов*/
  #filetable {
    margin-bottom: 10px;
  }

  #filetable tr {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
  }

  #filetable td {
    width: 100%;
  }

  #filetable .tc2,
  #filetable .tc3:not(.checker) {
    display: none;
  }

  #filetable .tc3.checker {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
  }

  #filetable .tc3.checker::before {
    content: "Выбрать:";
  }

  /*Админка. admin.css движка грузится после «Своего стиля» — селекторы здесь весомее его правил.
    !important — только против style, который движок пишет в разметку (проверено на mojitostudio)*/
  .punbb-admin .adminmain * {
    max-width: 100%;
  }

  .punbb-admin #pun-adnav {
    float: none;
    margin: 0;
  }

  .punbb-admin #pun-admain {
    padding: 0;
  }

  .punbb-admin #pun-adnav ul {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
  }

  .punbb-admin #pun-adnav li {
    padding: 2px 5px;
  }

  .punbb-admin #pun-admain fieldset .handle,
  .punbb-admin #pun-admain fieldset p {
    border: none;
  }

  .punbb-admin #pun-admain .adlabel {
    display: block;
    position: relative;
    width: auto;
    margin: 0;
    padding: 0 5px;
    text-align: center;
  }

  .punbb-admin #pun-admain .adcontainer {
    padding: 5px 10px;
  }

  /*на главной админки у admin.css здесь два id — повторяем #pun-admin_index*/
  .punbb-admin #pun-admain .adformal div ul,
  .punbb-admin #pun-admain div p,
  #pun-admin_index.punbb-admin #pun-admain .adformal div ul,
  #pun-admin_index.punbb-admin #pun-admain div p {
    padding: 5px;
  }

  .punbb-admin #pun-admain .adcontainer td {
    padding: 5px;
    border: none;
  }

  .punbb-admin .adcontainer .adsubmitfield {
    display: flex;
    flex-direction: column;
  }

  .punbb-admin #pun-admain span.adsubmit,
  .punbb-admin #pun-admain p.adsubmitfield span.adsubmit {
    display: block;
    position: relative;
    top: 0;
    left: 0;
    width: auto;
    margin: 0 auto;
    padding: 5px;
  }

  .punbb-admin #pun-admain1 .sortable p input[name^="cat_name"] {
    position: relative;
    width: calc(100% - 20px);
    margin: 0;
  }

  .punbb-admin #pun-admain input[type="submit"] {
    display: block;
    margin: 0 auto;
  }

  #pun-admain .adformal p.submittop,
  #pun-admain .adformal p.submitend {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 5px;
  }

  #pun-admain .adformal p.submittop input[type="submit"],
  #pun-admain .adformal p.submitend input[type="submit"] {
    margin: 0 5px;
  }

  .punbb-admin #pun-admain fieldset .subforums {
    margin-left: 0;
  }

  .punbb-admin .admin-advert-block {
    width: auto;
  }

  .punbb-admin input[type="text"] {
    width: 100%;
  }

  .page-list tr,
  #pun-admin_logs #pun-admain .adcontainer tr {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
  }

  /*!important — движок пишет здесь style в разметку: width ячейкам страниц, margin полю метатегов, height кнопкам услуг*/
  .punbb-admin #pun-admain .page-list td {
    width: 100% !important;
  }

  #metatags input#fld0content {
    margin: 0 !important;
  }

  #pun-admin_paid_services #pun-admain .linksb {
    flex-direction: column;
    height: auto !important;
  }

  #pun-admin_logs #pun-admain .adcontainer tbody {
    display: block;
    width: 100%;
  }

  #pun-admin_logs #pun-admain .adcontainer td {
    width: 100%;
    text-align: left;
  }

  /*Награды: строки подписями*/
  .mod-awards .category h2 {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .mod-awards .category h2 .fr {
    position: relative;
    right: unset;
    font-size: 12px;
  }

  #awards-content {
    padding: 0;
  }

  #awards-content td {
    display: inline-block;
    width: 100%;
    font-size: 12px;
  }

  .mod-awards-user #awards-content td:nth-child(3),
  .mod-awards-user #awards-content td:nth-child(4) {
    display: flex;
    gap: 5px;
  }

  #awards-content td::before {
    content: "";
    display: inline-block;
    flex-shrink: 0;
    width: 100px;
    font-weight: bold;
  }

  .mod-awards-list #awards-content td:nth-child(1)::before,
  .mod-awards-user #awards-content td:nth-child(1)::before {content: "Название:";}
  .mod-awards-list #awards-content td:nth-child(2)::before,
  .mod-awards-user #awards-content td:nth-child(2)::before {content: "Иконка:";}
  .mod-awards-list #awards-content td:nth-child(3)::before {content: "Описание:";}
  .mod-awards-list #awards-content td:nth-child(4)::before {content: "Лауреаты:";}
  .mod-awards-user #awards-content td:nth-child(3)::before {content: "За заслуги:";}
  .mod-awards-user #awards-content td:nth-child(4)::before {content: "Вручена:";}
  .mod-awards-users #awards-content td:nth-child(1)::before {content: "Пользователь:";}
  .mod-awards-users #awards-content td:nth-child(2)::before {content: "Кол-во наград:";}
  .mod-awards-users #awards-content td:nth-child(3)::before {content: "Награды:";}
  .mod-awards-users #awards-content td:nth-child(4)::before {content: "Детали:";}

  /*Safari: без своего скругления полей*/
  button,
  input.button,
  input[type="text"],
  input[type="password"],
  select {
    appearance: none;
    -webkit-appearance: none;
  }
}

/*Страницы-скрипты на телефоне: хронология, календарь*/
@media screen and (max-width: 899px) {
  /*контейнер страницы — свой отступ, как на десктопе (мобильный общий — 5px 20px)*/
  .pages div.container {
    padding: var(--pad1);
  }

  /*хронология*/
  input.searchKey {
    width: 100%;
    margin: 0 0 10px;
  }

  .searchCount {
    margin-left: 0;
  }

  .container999 {
    height: 350px;
  }

  /*календарь: сетка только из чисел, события дня — всплывашкой по нажатию*/
  #pun-main.pages #calendar table {
    width: 100%;
  }

  #calendar.eventsk th {
    width: 14.2857%;
    padding: 4px 2px;
    font-size: 10px;
  }

  #calendar.eventsk td {
    width: 14.2857%;
    padding: 2px;
  }

  #calendar.eventsk tbody tr:nth-child(odd) td {
    height: 22px;
    font-size: 12px;
  }

  #calendar.eventsk tbody tr:nth-child(even) td {
    height: 22px;
    overflow: visible;
  }

  #calendar.eventsk .calendar-event-add,
  #calendar.eventsk .calendar-event-settings {
    display: none;
  }

  /*окна модератора — по ширине календаря (500px на телефоне вылезали за экран)*/
  #event-calendar-settings-block,
  #event-calendar-content-block {
    left: 0;
    width: 100%;
  }

  /*точка под днём с событиями: контейнер событий (в ячейке под числом) — точкой, сами события
    скрыты до тапа. Без событий контейнер пустой — его нет. (На проде точка не появлялась:
    правило ждало у ячейки класс calendar-day, а скрипт календаря его не ставит)*/
  #calendar.eventsk .event-container {
    width: 5px;
    height: 5px;
    margin: 2px auto 0;
    border-radius: 50%;
    background: var(--accent-red);
  }

  #calendar.eventsk .event-container:empty {
    display: none;
  }

  #calendar.eventsk .event-container > * {
    display: none;
  }

  #calendar.eventsk td.mobile-day-open .event-container > * {
    display: block;
  }

  #calendar.eventsk td.mobile-day-open {
    z-index: 50;
  }

  #calendar.eventsk td.mobile-day-open .event-container {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    width: 160px;
    max-width: none;
    height: auto;
    max-height: 150px;
    margin: 0;
    padding: 4px;
    border: 1px solid var(--borders-color);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    background: var(--cover);
  }

  #calendar.eventsk td.mobile-day-open .calendar-event-add,
  #calendar.eventsk td.mobile-day-open .calendar-event-settings {
    display: flex;
    position: absolute;
    top: 2px;
    z-index: 51;
  }

  /*калькулятор годов — круглой кнопкой со значком*/
  button#year-learning {
    justify-content: center;
    gap: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    font-size: 0;
  }

  #year-learning::after {
    content: "\f6e8";
    z-index: 1;
    font: 700 18px / 18px var(--fa);
    color: #C9C3AD;
  }
}

@media screen and (max-width: 540px) {
  #pun-userlist .usertable tr {
    width: 100%;
  }
}

@media screen and (max-width: 378px) {
  .post {
    scroll-margin-top: 80px;
  }
}

/*Шапка-арт на 701–899: её мобильный вид в header-art.css (magiascript) включается только до 700px —
  повторяем его здесь. #pun — файл скрипта грузится после «Своего стиля» и при равном весе победил бы.
  Если в header-art.css поменяют 700 на 899, этот блок можно удалить*/
@media screen and (min-width: 701px) and (max-width: 899px) {
  #pun .magia-headerart {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 20px);
    height: 434px;
    top: 10px;
    box-sizing: border-box;
    z-index: 150;
  }

  #pun .magia-news,
  #pun .magia-verevki,
  #pun .magia-mascot,
  #pun .magia-boardmascot,
  #pun .magia-mirror {
    display: none;
  }

  #pun .magia-teamname {
    left: 0;
    top: 290px;
    width: fit-content;
    height: auto;
    background: var(--noise), linear-gradient(270deg, #3a080a 0%, #5d1619 31.25%, #892b2f 100%);
    border-block: 1px solid #6d3434;
    border-right: 1px solid #6d3434;
    border-radius: 0 10px 10px 0;
    box-shadow: -1px 0 1px 0 rgba(0,0,0,0.1), -2px 0 2px 0 rgba(0,0,0,0.09), -5px 0 3px 0 rgba(0,0,0,0.05), -9px 0 3px 0 rgba(0,0,0,0.01), -13px 0 4px 0 rgba(0,0,0,0);
    padding: 10px;
  }

  #pun .magia-teamname-badge {
    width: unset;
    height: unset;
    padding: 0;
    background: none;
    transform: none;
    border-radius: 0;
    box-shadow: none;
  }

  #pun .magia-teamname-text {
    font-weight: 500;
    white-space: nowrap;
    width: fit-content;
  }

  #pun .magia-teamname-text::before {
    content: 'команда победитель: ';
  }

  #pun .magia-navigation {
    right: 0;
    top: 290px;
    width: 203px;
    height: fit-content;
    background: none;
    justify-content: flex-end;
    pointer-events: none;
  }

  #pun .magia-navigation-text {
    width: fit-content;
    height: auto;
    background: var(--noise), linear-gradient(270deg, #3a080a 0%, #5d1619 31.25%, #892b2f 100%);
    border-block: 1px solid #6d3434;
    border-left: 1px solid #6d3434;
    border-radius: 10px 0 0 10px;
    box-shadow: -1px 0 1px 0 rgba(0,0,0,0.1), -2px 0 2px 0 rgba(0,0,0,0.09), -5px 0 3px 0 rgba(0,0,0,0.05), -9px 0 3px 0 rgba(0,0,0,0.01), -13px 0 4px 0 rgba(0,0,0,0);
    padding: 10px;
    pointer-events: all;
  }

  #pun .magia-navigation-dropdown.magia-nav-open {
    position: absolute;
    top: 100%;
    left: 0;
    transform: none;
    margin-top: 4px;
    width: 100%;
    pointer-events: all;
    border-block: 1px solid #475061;
    border-left: 1px solid #475061;
    border-radius: 10px 0 0 10px;
    box-shadow: inset 0 0 10px 0 #252e40;
    background: var(--noise), linear-gradient(180deg, #1a2438 0%, #313b4f 35.58%, #3b4559 100%);
    padding: 10px;
  }

  #pun .magia-navigation-dropdown a {
    background: var(--scrollbar-bg, rgba(0,0,0,0.15));
    backdrop-filter: blur(10px);
    color: var(--third-text-color, #c9c3ad);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
  }

  #pun .magia-navigation-dropdown a:hover,
  #pun .magia-navigation-dropdown a:active {
    color: var(--third-text-color, #c9c3ad);
    background: var(--noise), linear-gradient(90deg, #782b2e 0%, #892b2f 46.53%, #782b2e 100%);
  }

  #pun .magia-nav-mirror-extra {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  #pun .magia-nav-mirror-divider {
    border-top: 1px solid rgba(201,195,173,0.25);
    margin: 4px 0;
  }

  #pun .magia-tabsleva {
    position: relative;
    left: 0;
    top: 402px;
    width: 100%;
    height: fit-content;
    background: none;
    order: 2;
  }

  #pun .magia-tabsleva-text {
    position: relative;
    top: unset;
    transform: none;
    width: 100%;
    height: auto;
    display: block;
    text-align: center;
    box-sizing: border-box;
  }

  #pun .magia-tabsleva-text span {
    width: 100%;
    color: var(--third-text-color, #c9c3ad);
    text-shadow: 1px 1px 1px rgba(0,0,0,0.25);
  }
}