@import url(https://forumstatic.ru/files/001a/28/10/55678.css);
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500&family=Urbanist:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=Vollkorn:ital,wght@0,400;1,400;1,500&display=swap");
@import url(style_cs.1791720329.css);

/* Urbanist has no Cyrillic glyphs. Use a regular Cyrillic face for the lighter
   fallback visible in the Figma render, rather than the browser's Arial Bold.
   Latin text continues to use Urbanist SemiBold. */
@font-face {
    font-family: 'Doomsday Nav Cyrillic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('https://fonts.gstatic.com/s/notosans/v42/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A99d.ttf') format('truetype');
    unicode-range: U+0400-052F;
}

/*************************************************************
A - SETUP
**************************************************************/

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */





:root {
  --doomsday-primary-theme: 1;
  --forum-width: 1000px;
  --header-height:463px;
  --forum-side-gap:18px;
  --section-gap: 13px;
  --section-radius:10px;
  --service-panel-radius: 10px;
  --service-panel-inset:0px;
  --service-panel-top-gap:0px;
  --service-panel-side-padding: 18px;
  --quick-link-gap:6px;
  --profile-details-background-image: url("https://forumstatic.ru/files/001c/c4/9a/47614.jpg");
  --profile-details-frame-image: url("https://forumstatic.ru/files/001c/c4/9a/52745.png");
  --profile-card-frame-background: linear-gradient(
    to bottom,
    rgba(200, 184, 223, 1) 0%,
    rgba(200, 184, 223, 0) 100%
  );
  --category-title-offset: 82px;
  --category-edge-padding:24.53px;
  --forum-content-width:100%;
  --forum-content-indent:0px;
  --forum-link-gap: 5px;
  --forum-link-radius:5px;
  --forum-link-min-width:88px;
  --lastpost-text-shift:0px;
  --ui-dark-texture:var(--color-dark);
  --ui-action-border:0;
  --ui-action-radius:5px;
  --ui-action-padding: 0 12px 2px;
  --ui-action-background:var(--color-quick-link);
  --ui-action-light-background:var(--color-quick-link);
  --content-frame-gradient: linear-gradient(
    90deg,
    var(--color-accent),
    var(--color-dark)
  );
  --ui-action-font:italic 12px/19px var(--font-forum-ui);
  --ui-action-hover-color:var(--color-text-light);
  --scroll-control-width:35px;
  --scroll-control-side-gap: 18px;
  --font-main:Urbanist, Arial, sans-serif;
  --font-forum-ui:Urbanist, Arial, sans-serif;
  --font-forum-title:Vollkorn, Georgia, serif;
  --font-size-xs: 9px;
  --font-size-sm: 10px;
  --font-size-base: 11px;
  --font-size-md: 11px;
  --font-size-lg: 12px;
  --font-size-category-title: 10px;
  --line-height-category-title: 14px;
  --letter-spacing-category-title: 1.1px;
  --font-size-forum-title:19px;
  --line-height-forum-title:30px;
  --font-size-forum-description:11px;
  --line-height-forum-description:12px;
  --bbcode-surface:var(--color-surface-alt);
  --font-navigation:Urbanist, "Doomsday Nav Cyrillic", Arial, sans-serif;
  --section-header-background:var(--category-image) center top / 100% auto no-repeat;
}

/* A2 Deal with browser defaults and wonkiness
-------------------------------------------------------------*/

/* A2.1 */
html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  padding:31px 0 32px;
  font-family: var(--font-main);
  font-size: 100.01%;
}

/* A2.2 */
.punbb * {
  box-sizing: border-box;
  margin: 0
  ;
}

.punbb *::before, .punbb *::after {
  box-sizing: border-box
  ;
}

/* A2.3 */
.punbb ul, .punbb dl, .punbb li, .punbb dd, .punbb dt {
  padding: 0;
  list-style: none;
}

/* A2.4 */


/* A2.5 */
.punbb .main table {
  table-layout: fixed;
  width: 100%;
}

/* A2.6 */
.checkfield input[type="checkbox"], .radiofield input[type="radio"] {
  margin: 0 0.3em;
}

/* A2.7 */
p[class="checkfield"] *,
div[class="checkfield"] *,
fieldset[class="radiofield"] * {
  height: 1.8em;
  vertical-align: middle
  ;
}


 /* A3 Text setup
-------------------------------------------------------------*/

/* A3.1 — body typography is defined in the browser-reset block above. */

/* A3.2 */
.punbb {
  float: none;
  width: 100%;
  min-height: 100vh;
  font: normal var(--font-size-base)/1.4 var(--font-main);
  line-height: 1.35;
}

/* 3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup, .punbb button {
  font: 1em var(--font-main)
  ;
}



/* A3.4 */
.punbb h1, .punbb h2, .punbb h3, .punbb h4, .punbb table, .punbb th {
  font-size: 1em;
  font-weight: normal;
}

/* A3.5 */
.punbb h1 span, .punbb h2 span, .punbb legend span {
  font-size: 1.1em;
}

/* A3.6 */
.punbb pre {
  font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  ;
}

/* A3.7 */
.punbb address, .punbb em {
  font-style: normal
  ;
}

/* A3.8 */
.punbb .post-content em {
  font-style: italic
  ;
}

/* A3.9 */
.punbb .post-content em.bbuline {
  font-style: normal;
}

.punbb del {
  -webkit-filter: blur(3px);
  transition: filter .18s ease;
}

.punbb del:hover {
  -webkit-filter: blur(0);
}

/* A3.10 */






/* A3.11 */
.punbb optgroup {
  font-weight: bold;
}


/* A4 Float clearing and hidden items
-------------------------------------------------------------*/

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

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


/* A5 Basic page layout and borders
-------------------------------------------------------------*/

/* A5.1 */
#pun {
  position: relative;
  width: var(--forum-width);
  max-width: calc(100% - (var(--forum-side-gap) * 2));
  margin: 0 auto;
}

/* A5.2 */
#pun-redirect, #pun-maint {
  margin:36px auto 12px;
  width:min(620px, calc(100% - 48px));
  float: none;
}

/* A5.3 */
.punbb .section, .punbb .main {
  margin-bottom: var(--section-gap);
}

/* A5.4 */
.punbb .category, .punbb .post {
  margin-top: var(--section-gap);
}

/* A5.5 */
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost {
  margin-top: 0;
}

/* A5.7 */


/* A5.8 — EMO baseline: no legacy PunBB frames */


/* A5.9 — EMO baseline: headings are unframed by default */
.punbb .section h2,
#pun-main h1,
#pun-main h2,
#pun-stats h2,
#pun-debug h2 {
  margin: 0;
  padding: 0;
}

/* Shared section frames and separators. Page files own placement only. */

#pun-index #pun-main .category > h2, #pun-stats h2,
#pun-main > :is(.formal, .info) > h2,
.punbb #pun-admain .adformal > h2, .punbb #pun-adnav > h2 {
  position: relative;
  display: block;
  left: auto;
  width: 100%;
  height: auto;
  min-height: var(--section-header-min-height, 55.55px);
  padding: 0;
  margin: 0;
}

#pun-index #pun-main .category > .container, #pun-stats .statscon,
#pun-main > :is(.formal, .info):not(.emo-list-panel, :is(#pun-redirect, #pun-message) .info) > .container,
.punbb #pun-admain .adcontainer {
  overflow: hidden;
}



/* Translation controls are intentionally absent on every forum page. */
.punbb .translatelink {
  display: none;
}

/* Rusff loads its fixed .inner geometry after the theme. Scope this adapter
   to PunBB to override that external rule without changing other dialogs. */
.punbb #pun-reputation > .inner {
  box-sizing: border-box;
  width: min(560px, calc(100vw - 24px));
  max-height: 80vh;
  margin: 0;
  transform: translate(-50%, -50%);
  overflow: hidden;
}

#pun-reputation :is(h1, h2) {
  position: relative;
  width: auto;
  max-width: none;
  min-height: 0;
  padding: 12px 18px;
  font: 700 var(--font-size-base)/1.4 var(--font-main);
}

#pun-reputation .container {
  max-height: 65vh;
  padding: 12px 18px;
}

#pun-reputation table {
  width: 100%;
  table-layout: fixed;
}

#pun-reputation :is(th, td) {
  padding: 8px 0;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

#pun-reputation :is(th, td):first-child {
  padding-right: 18px;
}

#pun-reputation textarea {
  box-sizing: border-box;
  max-width: 100%;
  height: 96px;
  min-height: 96px;
  padding: 12px;
  resize: vertical;
}

@media (max-width: 560px) {
    #pun-reputation :is(table, tbody, tr, th, td) {
  display: block;
}
    #pun-reputation :is(th, td):first-child {
  width: auto;
  padding-right: 0;
  padding-bottom: 4px;
}
}

/* Index, statistics and footer placement. Frames live in shared-components.css. */
/* The index mockup has no service strip between the news and categories. */
#pun-status, #pun-crumbs1:not(.emo-list-navigation) {
  display: none;
}
#pun-announcement .quick-link:first-child {
  min-width: 184px;
}
#pun-index #pun-main {
  width: 100%;
  margin: 0;
  padding: 36.4px 25px 0 32px;
}
#pun-index #pun-main .category {
  width: 100%;
  margin: 0 0 16px;
}
#pun-index #pun-main .category > h2 span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#pun-index #pun-main .category table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
}
#pun-index #pun-main .category th, #pun-index #pun-main .category td {
  vertical-align: top;
}
#pun-index .main thead {
  display: none;
}

#pun-stats {
  position: relative;
  margin: 0 25px 36px 32px;
}
#pun-stats h2 {
  min-height: 55px;
  font-size: 0;
}
#pun-stats h2::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 312px;
  height: 56px;
}
#pun-stats .container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0;
  min-height: 104px;
  padding: 26px 27px 20px;
  font: 500 11px/13px var(--font-forum-ui);
  text-transform: lowercase;
  letter-spacing: .22px;
}
#pun-stats .container::after {
  content: none;
}
#pun-stats li:is(.item1, .item2, .item3, .item4) {
  position: absolute;
  top: 0;
  height: 56px;
  margin: 0;
  padding: 0;
  text-align: center;
  font: 400 6.632px/8px var(--font-forum-ui);
  letter-spacing: .1492px;
}
#pun-stats li.item1 {
  left: 20.5px;
  width: 42.28px;
  --stats-label: "âñåãî òåì:";
  --stats-icon: var(--stats-topics-image);
}
#pun-stats li.item2 {
  left: 71.9px;
  width: 54.716px;
  --stats-label: "âñåãî ñîî:";
  --stats-icon: var(--stats-posts-image);
}
#pun-stats li.item3 {
  left: 135.73px;
  width: 43.109px;
  --stats-label: "ñ íàìè:";
  --stats-icon: var(--stats-users-image);
}
#pun-stats li.item4 {
  left: 187.96px;
  width: 87.877px;
  --stats-label: "ïîñëåäíèé:";
  --stats-icon: var(--stats-newest-image);
}
#pun-stats li:is(.item1, .item2, .item3, .item4)::before {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  content: "";
}
#pun-stats li:is(.item1, .item2, .item3, .item4) > span {
  position: absolute;
  top: 27px;
  left: 0;
  width: 100%;
  font-size: 0;
  white-space: nowrap;
}
#pun-stats li:is(.item1, .item2, .item3, .item4) > span::after {
  content: var(--stats-label);
  font-size: 6.632px;
}
#pun-stats li:is(.item1, .item2, .item3, .item4) > strong {
  position: absolute;
  top: 35px;
  left: 0;
  width: 100%;
  font: 500 12.435px/15px var(--font-forum-ui);
  white-space: nowrap;
}
#pun-stats li.item4 > strong {
  font-size: 10.777px;
}

li#onlinelist {
  width: 100%;
  margin: 0;
  padding: 0;
  float: none;
  line-height: 13px;
  overflow-wrap: anywhere;
}
li#onlinelist div {
  padding: 0;
}
#pun-stats .onlinelist strong {
  font-weight: inherit;
}
#pun-index #pun-break3, #pun-index #pun-break4, #pun-index #pun-about {
  display: none;
}
#pun-index #pun-crumbs2:not(.emo-list-navigation){
  height: 25px;
  margin: 0;
  font: 10px/25px var(--font-forum-ui);
}
#pun-index #pun-crumbs2:not(.emo-list-navigation) .container{
  padding: 0 18px;
}
#html-footer {
  position: relative;
  min-height: 171px;
  margin: 0;
  overflow: hidden;
}
#html-footer .container {
  position: relative;
  margin: 12px 18.5px;
  display: grid;
  grid-template-columns: repeat(auto-fill, 88px);
  grid-auto-rows: 31px;
  align-content: start;
  gap: 7.6px 5.3px;
  width: min(473px, calc(100% - 37px));
  padding: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}
#html-footer .container::after {
  content: none;
}
#html-footer .container > a {
  display: block;
}
#html-footer .footer-banner {
  display: block;
}
#html-footer .container > a img {
  display: block;
  width: 88px;
  height: 31px;
  object-fit: cover;
}
@media (max-width: 760px) {
    #pun-index #pun-main {
  padding: 22px 12px 0;
}
    /* The decorative strip scales with its artwork instead of keeping desktop height. */
    #pun-index #pun-main .category > h2 {
  --section-header-min-height: 0px;
  aspect-ratio: 943 / 57;
}

    /* On mobile the statistics row replaces the whole decorative strip. */
    #pun-stats h2 {
  --section-header-background: var(--color-dark);
}
    #pun-index .category :is(table, tbody, tr) {
  display: block;
  width: 100%;
}
    #pun-index .main tbody td {
  height: auto;
}
    #pun-index .main .tcl h3 {
  overflow-wrap: anywhere;
}
}

/* Shared inner-page placement; visual recipes above are also used on home. */
#pun-main > :is(.formal, .info) > h2 {
  padding: 16px 18px;
  font: italic 400 19px/23px var(--font-forum-title);
}

@media (max-width: 650px) {
    #pun > .punbb:not(#pun-index) #pun-main {
  padding: 20px 12px;
}
}

#pun-main > .forum .tclcon > a:first-child {
  font: italic 400 19px/30px var(--font-forum-title);
}


/*************************************************************
B - MAIN CONTENT - GENERAL
**************************************************************/

/* B1 Parsed Content, Signatures and Scroll Boxes
-------------------------------------------------------------*/

/* B1.1 */
.punbb .post-content {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-size: var(--font-size-base);
  line-height: 1.5;
}

/* B1.2 */
.punbb .post-sig dt {
  display: block;
  width: 250px;
  margin: 5px 0;
}

.punbb .lastedit {
  display: none;
}

/* B1.3 */
.punbb .post-content p {
  margin: 0;
  line-height: 1.5;
}

/* Role descriptions manage their own spacing inside the scroll area. */
.punbb .post-content p:where(:not(.emo-role-card__details)) {
  padding: 0 0 1em 0;
}

/* B1.4 */
.punbb .post-content img {
  vertical-align: text-bottom
  ;
}

/* B1.5 */
.punbb .post-content img.postimg {
  vertical-align: middle;
}

/* B1.6 */
.punbb .post-content .blockcode, .punbb .post-content blockquote {
  width: 100%;
  overflow: hidden;
}

/* B1.7 */
.punbb .post-content .scrollbox {
  width: 100%;
  overflow: auto;
}

/* B1.8 */
.punbb .post-content .quote-box, .punbb .post-content .code-box {
  margin: 0.4em 1.8em 1.4em 1.8em;
  padding: 1em;
}

/* B1.9 */
.punbb .quote-box cite, .punbb .code-box strong.legend {
  display: block;
  padding-bottom: 0.7em;
  font-size: 1.1em;
  font-weight: bold;
  font-style: normal;
  margin: 0;
}

/* B2 Information boxes
-------------------------------------------------------------*/

/* B2.1 */
.punbb .info-box {
  padding: 1.1em 1.7em 1em 1.7em;
  margin: 0 0 1.1em 0;
}

/* B2.2 */
.punbb .info-box * {
  padding: 0 0 0.7em 0;
}

/* B2.3 */
.punbb #pun-main .info-box .legend {
  font-size: 1.1em;
  font-weight: bold;
}


/* B3 Pagination and posting links
-------------------------------------------------------------*/

/* Current inner-page pagination is the base layout.
   Keep the legacy absolute-positioned PunBB pagination out of the cascade. */
#pun > .punbb:not(#pun-index) #pun-main > .linkst,
#pun > .punbb:not(#pun-index) #pun-main > .linksb {
  box-sizing: border-box;
  float: none;
  width: 100%;
  min-height:var(--inner-links-height, 48px);
  padding:var(--inner-links-padding, 0 0 22px);
  font: normal var(--font-size-xs)/22px var(--font-forum-ui);
}

#pun > .punbb:not(#pun-index) #pun-main > .linkst .pagelink,
#pun > .punbb:not(#pun-index) #pun-main > .linksb .pagelink {
  position: static;
  float: left;
  width: auto;
  font-size:var(--pagination-size, var(--font-size-xs));
  line-height:var(--pagination-line-height, 22px);
  text-transform:var(--pagination-case, uppercase);
  letter-spacing:var(--pagination-tracking, .8px);
}

#pun > .punbb:not(#pun-index) #pun-main > .linkst .postlink,
#pun > .punbb:not(#pun-index) #pun-main > .linksb .postlink {
  position: static;
  float: right;
  width: auto;
  text-align: right;
  font-weight: normal;
}

#pun-searchposts #pun-main > .topic .post-links a,
#pun-viewtopic .emo-role-card__link,
.emo-roles-list__filter{
  display: inline-block;
}

#pun-searchposts #pun-main > .topic .post-links a{
  text-transform:var(--ui-action-case, uppercase);
  min-height:var(--ui-action-min-height, 15px);
  margin-left:var(--ui-action-margin, 8px);
  padding: var(--ui-action-padding);
  font: var(--ui-action-font);
}

#pun-main :is(.linkst, .linksb) .postlink a{
  margin-left:var(--ui-action-margin, 8px);
}











.multipage {
  margin-top: 3em;
}

.subscribelink {
  clear: both;
  padding-top: 0.3em;
  padding-bottom: 0.5em;
}


/*************************************************************
C - MAIN CONTENT - SPECIFIC
**************************************************************/

/* C1 Form layout
-------------------------------------------------------------*/

/* C1.1 */
.punbb .formal .container {
  padding: 1.7em 2.3em 1.1em 2.3em;
}

/* C1.2 */
.punbb .formsubmit {
  padding: 0 0 0 1.7em;
  margin: 1em 0 0 0;
}

/* C1.3 */
.punbb .formsubmit input, .punbb .formsubmit a, .punbb .formsubmit span {
  margin: 0 0.6em 0 0
  ;
}

/* C1.4 — EMO baseline: forms do not inherit the old PunBB frame */
.punbb fieldset,
.punbb fieldset fieldset {
  margin: 0;
  padding: 0;
}

/* C1.5 — legends are neutral until a component styles them explicitly */
.punbb fieldset legend,
.punbb fieldset legend span {
  margin: 0;
  padding: 0;
}

/* C1.8 */
.punbb .fs-box {
  padding: 1em 0 0.8em 0;
}

/* C1.9 */
.punbb .fs-box p, .punbb .fs-box fieldset {
  padding: 0 0 0.8em 0
  ;
}

/* C1.10 */
.punbb .inline .inputfield, .punbb .inline .selectfield, .punbb .inline .passfield {
  float: left;
  margin-right: 1em;
}

/* C1.11 */
.punbb .inline .infofield {
  clear:both
  ;
}

/* C1.12 */
.punbb .datafield br {
  display: none
  ;
}

/* C1.13 */
.punbb .required label, .punbb .datafield span.input {
  font-weight: bold
  ;
}

/* C1.14 */
.punbb .datafield span.input a {
  font-weight: normal;
}

/* C1.15 */
.punbb .areafield span.input, .punbb p.longinput span.input {
  display: block;
  padding: 0 12em 0 0;
  height: 100%;
}

/* C1.16 */
.punbb textarea, .punbb .longinput input {
  width: 64%;
  margin: 0;
}

/* C1.17 */
.punbb .hashelp {
  position: relative;
}

/* C1.18 */
.punbb .helplinks {
  display: block;
  position: absolute;
  top: 1em;
  right: 0;
  font-weight: normal;
  width: 36%;
}

/* c1.19 */
.punbb #profile .helplinks {
  top: 1.5em;
}

/* C1.20 */
.punbb .helplinks span {
  display: block;
  padding-bottom: 0.2em;
}

/* C1.21 */
#pun-post .formal .info-box li {
  padding-left: 4px;
  list-style-type: square;
  list-style-position: inside;
  line-height: 1.5;
  margin: 0;
}

/* C2 Table layout
-------------------------------------------------------------*/

/* C2.1 */
.punbb .main .tcl {
  overflow: hidden;
  text-align: left;
  width: 50%;
}

/* C2.2 */
.punbb .main .tc2,
.punbb .main .tc3,
.punbb .main .tcmod {
  text-align: center;
  width: 10%;
}

/* C2.3 */
.punbb .main .tcr {
  overflow: hidden;
  text-align: left;
  width: 30%;
}


/* INDEX — columns */

#pun-index .main .tcl {
  width: auto;
}

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

#pun-index .main .tcr {
  position: relative;
  width:224px;
  overflow: visible;
  font-family: var(--font-forum-ui);
  font-size:12px;
  line-height:15px;
  overflow-wrap:anywhere;
}

#pun-index .main .tcr a {
  font-size:12px;
}


/* INDEX — last post */

#pun-index .main tbody td.tcr {
  padding:calc(var(--forum-row-top-padding, 14.53px) + 35px) 51px 11.03px 38px;
  vertical-align:top;
}

#pun-index .main .tcr .user-avatar {
  position: absolute;
  left:var(--lastpost-avatar-left, 0px);
  top:var(--lastpost-avatar-top, calc(var(--forum-row-top-padding, 14.53px) + 35px));
  margin: 0;
  float: none;
  transform:none;
  width:30px;
  height:30px;
}

#pun-index .main .tcr .user-avatar a {
  display: block;
  width:30px;
  height:30px;
}

#pun-index .main .tcr .avatar-image {
  display: block;
  width:30px;
  height:30px;
  margin: 0;
}

#pun-index .main .tcr .lastpost-link,
#pun-index .main .tcr .lastpost {
  position: relative;
  left: var(--lastpost-text-shift);
}


/* C2.4 */
#pun-searchtopics .main .tcl,
#pun-modviewforum .main .tcl {
  width: 40%;
}

#pun-userlist .main .tcl {
  width: 34%;
}

/* C2.5 */
#pun-userlist .main .tc2,
#pun-searchtopics .main .tc2 {
  text-align: left;
  width: 20%;
}

/* C2.6 */
#pun-debug table .tcl {
  width: 15%;
  white-space: normal;
}

/* C2.7 */
#pun-debug .tcr {
  width: 85%;
  white-space: normal;
}


/* C2.8 — forum content */

#pun-index .tcl .tclcon {
  width: var(--forum-content-width);
  margin-left: var(--forum-content-indent);
}

#pun-index .tcl h3 {
  margin:0;
  font-family: var(--font-forum-title);
  font-size: var(--font-size-forum-title);
  line-height: var(--line-height-forum-title);
  font-weight: 500;
  letter-spacing: .2px;
  text-transform: uppercase;
  min-height:32px;
  font-style:italic;
}

#pun-index .tcl h3 a {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
}

#pun-index .tcl .forumdesc,
#pun-index .bb-forum-about {
  font: normal var(--font-size-forum-description)/var(--line-height-forum-description) var(--font-forum-ui);
  letter-spacing:.11px;
  text-align:justify;
}

#pun-index .bb-forum-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--forum-link-gap);
  margin-top:4.47px;
}

#pun-index .bb-forum-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--forum-link-min-width);
  min-height:19px;
  padding:0 12px;
  font:var(--ui-action-font);
  text-align: center;
  text-transform: lowercase;
}

#pun-index .tcl .modlist {
  font-size: var(--font-size-xs);
  line-height: 1.4;
}


/* C2.9 */
.punbb td span.youposted {
  position: absolute;
  margin-left: -1em;
  font-weight: bold;
}

/* C2.10 */
.punbb td .modlist {
  display: block;
  padding-top: 0.3em;
}

/* C2.11 */
.punbb .main td {
  padding: 0.8em 1em;
}

/* C2.12 */
.punbb .main th {
  padding: 0.4em 1em;
}

/* C2.13 */
.punbb tbody.hasicon td.tcl {
  padding-left: 3.2em;
}

/* C2.14 */
.punbb div.icon {
  width: 0;
  height: 0;
  margin-top: 0.1em;
  line-height: 0;
}

/* C2.15 */
.punbb table div.icon {
  position: absolute;
  margin-left: -2.2em;
  font-size: 1.05em;
}


/* INDEX — rows */

#pun-index .main tbody td {
  height:auto;
  padding-top:var(--forum-row-top-padding, 14.53px);
  padding-bottom:12.03px;
  vertical-align:top;
}

#pun-index .category tbody tr:first-child td {
  --forum-row-top-padding:var(--category-edge-padding);
}

#pun-index .category tbody tr:last-child td {
  padding-bottom:23px;
}

#pun-index .main tbody td.tcl {
  position: relative;
  padding-left:96px;
  padding-right:56px;
}

#pun-index .main tbody.hasicon td.tcl {
  padding-left:96px;
}


/* INDEX — forum status icons */

#pun-index .main table div.icon {
  position: absolute;
  top:calc(var(--forum-row-top-padding, 14.53px) + 6px);
  left:27.5px;
  width:47.5px;
  height:46.51px;
  margin:0;
}





/* C3 Topics — EMO baseline
-------------------------------------------------------------*/

/*
 * The old PunBB 19em post layout, borders and dashed separators are not
 * global defaults anymore. Redesigned message surfaces define their own
 * geometry in the page/component sections below.
 */


.punbb .post .container {
  margin-top: 0;
  padding-bottom: 0;
}

.punbb .post h3 span,
.punbb .post-body,
.punbb .post-links,
.punbb .post-links ul {
  margin-left: 0;
}

.punbb .post .post-author {
  float: none;
  width: auto;
  margin-top: 0;
  overflow: visible;
}

.punbb .post .post-author ul,
.punbb .post .post-author p {
  padding: 0;
}

.punbb .post-box {
  padding: 0;
}

.punbb .post-links ul {
  height: auto;
  padding: 0;
  line-height: inherit;
}

.punbb .post-links li {
  padding-left: 0;
}

/* Post font-size control; its script owns the fill width and thumb offset. */
.post h3 > span:has(> .FNTslider) {
  position: relative;
}

.FNTslider {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: 110px;
  height: 5px;
  margin: 0;
  transform: translate(-50%, -50%);
}

.FNTslider .before {
  position: absolute;
  height: 6px;
  margin-top: -1px;
}

.FNTslider .thumb {
  position: relative;
  top: -4px;
  width: 8px;
  height: 13px;
  cursor: pointer;
}

/* Profile typography is intentional, not part of the legacy post geometry. */
.pa-author {
  font-size: 1.1em;
  font-weight: bold;
}

li.pa-title {
  padding-bottom: 0.4em;
  font-weight: bold;
}

li.pa-online {
  line-height: 0.8em;
  padding-left: 0.4em;
  margin-top: 0.7em;
}

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


/* C4 Moderator menu
-------------------------------------------------------------*/

/* C4.1 */
.punbb .modmenu .container {
  padding: 0.5em 1em;
  text-align: right;
}

/* C4.2 */
.punbb .modmenu strong, .punbb .modmenu a {
  height: 1.8em;
  line-height: 1.8em;
}

/* C4.3 */
.punbb .modmenu .container strong {
  float: left;
}

/* C4.4 */
.punbb .modmenu input {
  margin-left: 1em;
}


/* C5 Message boxes
-------------------------------------------------------------*/

/* C5.1 */
.punbb .info .container {
  padding: 0.8em 1em
  ;
}

/* C5.2 */
.punbb .info .container .backlink {
  padding-top: 0.8em;
}


/* C6 Profile
-------------------------------------------------------------*/

/* C6.1 */
#profile .container {
  padding-left: 18.6em;
}

/* C6.2 */
#profilenav {
  float: left;
  width: 14em;
  margin-left: -16.3em;
  display: inline;
}

/* C6.3 */
#profilenav li {
  padding-bottom: 0.8em;
  font-weight: bold;
}

/* C6.4 */
#viewprofile ul, #profilenav ul {
  padding: 1.5em 18px 0.8em 18px;
  margin: 0 0 1em 0;
}

/* C6.5 */
#viewprofile h2, #profilenav h2 {
  padding: 0 0 0 0;
  margin: 0 14px -0.6em 14px;
}

/* C6.6 */
#viewprofile h2 span, #profilenav h2 span {
  padding: 0 5px;
  position: relative;
}

/* C6.7 */
#viewprofile li, #setmods dl {
  padding: 0 0 0 16em;
  margin-bottom: 0.2em;
}

/* C6.8 */
#viewprofile li span {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.5em 1em;
  font-weight: bold;
}

/*C6.9 */
#setmods dt {
  float: left;
  width: 14em;
  margin-left: -16em;
  padding: 0.8em 1em;
  font-weight: bold;
  display: inline;
}

/* C6.10 */
#viewprofile li strong, #viewprofile li div, #setmods dd {
  display: block;
  padding: 0.5em 1em;
  font-weight: normal;
}

/* C6.11 */
.punbb img.avatardemo {
  float: right;
  margin: 0 0 0.8em 1.8em
  ;
}


/* C6.12 Additional profile fields editor
-------------------------------------------------------------*/

#pun-profile #profile8.emo-profile-field-editor {
  display: flow-root;
}

.emo-profile-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: start;
  gap: 18px;
}

/* The notifications module clones #profile8, then appends this panel outside
   the cloned editor layout. Do not carry the player-card preview into it. */
#pun-profile #profile .container:has(.profile-notifications-content)
  .emo-profile-editor-layout {
  display: none;
}

.emo-profile-editor-fields {
  min-width: 0;
}

#pun-profile #profile8 .emo-profile-editor-fields > .emo-profile-field-card {
  position: relative;
  overflow: hidden;
  margin-bottom: var(--section-gap);
}

.emo-profile-editor-preview {
  width: 220px;
  margin: 0;
}

.emo-profile-editor-preview__title {
  min-height: 27px;
  padding: 7px 16px;
  margin: 0;
  font: 700 var(--font-size-xs)/12px var(--font-forum-ui);
  letter-spacing: .8px;
  text-align: center;
  text-transform: uppercase;
}

#pun-profile .emo-profile-editor-preview .emo-profile-page-card-host,
#pun-profile .emo-profile-editor-preview .emo-profile-card {
  width: 220px;
}

#pun-profile .emo-profile-editor-preview .emo-profile-page-card-host {
  padding: 0;
}

#pun-profile .emo-profile-editor-preview .emo-profile-editor-preview__badge {
  cursor: default;
}

#pun-profile .emo-profile-editor-preview .emo-profile-editor-preview__badge:is(:hover, :focus-visible) {
  transform: translateX(-50%);
}

#pun-profile #profile8 .emo-profile-field-card > legend {
  float: left;
  width: 100%;
  padding: 7px 16px;
  text-align: center;
}

#pun-profile #profile8 .emo-profile-field-card > legend span {
  font-weight: 700;
  text-transform: uppercase;
}

#pun-profile #profile8 .emo-profile-field-card > .fs-box {
  clear: both;
  padding: 16px;
}

#pun-profile #profile8 .emo-profile-field-card :is(
  input[type="text"],
  input[type="url"],
  textarea,
  select
) {
  width: 100%;
}

#pun-profile #profile8 .emo-profile-field-card textarea {
  min-height: 82px;
  resize: vertical;
}

#pun-profile #profile8 .emo-profile-field-card--choice > .fs-box {
  display: flex;
  align-items: center;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

#pun-profile #profile8 .emo-profile-field-card--choice > .fs-box br {
  display: none;
}

#pun-profile #profile8 .emo-profile-field-card--choice p:has(input[type="radio"]) {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 4px 0;
  vertical-align: middle;
}

#pun-profile #profile8 .emo-profile-field-card--choice p:has(input[type="radio"]) img {
  max-width: 96px;
  max-height: 62px;
  object-fit: cover;
}

#pun-profile #profile8 .emo-profile-field-card--image-choice > .fs-box {
  display: block;
  overflow: visible;
  white-space: normal;
}

.emo-profile-image-choices {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 4px 0;
}

.emo-profile-image-options {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding-bottom: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

.emo-profile-image-choice,
.emo-profile-image-custom__label {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.emo-profile-image-choice img {
  display: block;
  flex: 0 0 auto;
  margin: 0;
  object-position: center;
}

[data-emo-profile-field="fld1"] .emo-profile-image-choice img {
  width: 54px;
  height: 100px;
  object-fit: cover;
}

[data-emo-profile-field="fld2"] .emo-profile-image-choice img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.emo-profile-image-custom {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  width: min(100%, 520px);
  min-width: 0;
}

#pun-profile #profile8 .emo-profile-image-custom__input {
  min-width: 0;
  font-size: var(--font-size-sm);
}



#pun-profile #profile8 .emo-profile-editor-fields > .formsubmit {
  clear: both;
}





/* Personal titles accept HTML, so the compact toolbar edits the native field
   directly instead of maintaining a second source of text. */
#pun-profile .emo-personal-title-toolbar {
  display: grid;
  gap: 7px;
  margin: 0 0 8px;
  padding: 7px 9px;
}

#pun-profile .emo-personal-title-toolbar__hint,
#pun-profile .emo-personal-title-toolbar__status {
  margin: 0;
  font-size: var(--font-size-xs);
  line-height: 1.35;
}

#pun-profile .emo-personal-title-toolbar__status:empty {
  display: none;
}

#pun-profile .emo-personal-title-toolbar__tools,
#pun-profile .emo-personal-title-toolbar__link-panel {
  display: flex;
  gap: 5px;
  align-items: center;
}

#pun-profile .emo-personal-title-toolbar__tools {
  flex-wrap: nowrap;
  overflow-x: auto;
}

#pun-profile .emo-personal-title-toolbar__link-panel {
  flex-wrap: wrap;
}

#pun-profile .emo-personal-title-toolbar__button,
#pun-profile .emo-personal-title-toolbar__color {
  box-sizing: border-box;
  flex: 0 0 27px;
  width: 27px;
  height: 27px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}



#pun-profile .emo-personal-title-toolbar__button--bold {
  --emo-personal-title-icon: url("https://forumstatic.ru/files/001c/c4/9a/83893.png");
}

#pun-profile .emo-personal-title-toolbar__button--italic {
  --emo-personal-title-icon: url("https://forumstatic.ru/files/001c/c4/9a/48841.png");
}

#pun-profile .emo-personal-title-toolbar__button--underline {
  --emo-personal-title-icon: url("https://forumstatic.ru/files/001c/c4/9a/96868.png");
}

#pun-profile .emo-personal-title-toolbar__button--strike {
  --emo-personal-title-icon: url("https://forumstatic.ru/files/001c/c4/9a/77940.png");
}

#pun-profile .emo-personal-title-toolbar__button--line-break {
  --emo-personal-title-icon: url("https://forumstatic.ru/files/001c/c4/9a/11389.png");
}

#pun-profile .emo-personal-title-toolbar__button--link {
  --emo-personal-title-icon: url("https://forumstatic.ru/files/001c/c4/9a/98980.png");
}

#pun-profile .emo-personal-title-toolbar__color {
  appearance: none;
}

#pun-profile .emo-personal-title-toolbar__color::-webkit-color-swatch-wrapper {
  padding: 2px;
}



#pun-profile .emo-personal-title-toolbar__select,
#pun-profile .emo-personal-title-toolbar__link-input {
  box-sizing: border-box;
  min-height: 27px;
  font: var(--font-size-xs)/1.2 var(--font-main);
}

#pun-profile .emo-personal-title-toolbar__select {
  padding: 3px 6px;
}

#pun-profile .emo-personal-title-toolbar__select--font {
  flex: 1 1 140px;
  min-width: 120px;
  max-width: none;
}

#pun-profile .emo-personal-title-toolbar__select--size {
  flex: 0 0 77px;
  width: 77px;
}

#pun-profile .emo-personal-title-toolbar__link-panel[hidden] {
  display: none;
}

#pun-profile .emo-personal-title-toolbar__link-input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 4px 7px;
}

@media (max-width: 900px) {
  .emo-profile-editor-layout {
  grid-template-columns: minmax(0, 1fr);
}

  .emo-profile-editor-preview {
  grid-row: 1;
  margin: 0 auto;
}
  }

@media (max-width: 480px) {
  .emo-profile-image-custom {
  grid-template-columns: minmax(0, 1fr);
}

  }


/* C7 User list
-------------------------------------------------------------*/

/* C7.1 */
#pun-userlist .formal, #pun-userlist .formal .container {
  margin-bottom: 0;
}

/* C7.2 */


/*************************************************************
D - PUNBB SECTIONS OTHER THAN MAIN CONTENT
**************************************************************/
/* D1 Logo and description
-------------------------------------------------------------*/

/* Top navigation: measured Figma slots, native links and module controls. */
#pun-navlinks li:not(.nav-slot):not(.nav-account) {
  order: 8;
}
#pun-navlinks .isactive {
  --nav-link-color: var(--color-accent-soft);
}
.nav-slot--forum {
  --nav-slot-width: 65.402px;
  --nav-text-shift: .51px;
  order: 1;
}
.nav-slot--search {
  --nav-slot-width: 57.698px;
  --nav-text-shift: .51px;
  order: 2;
}
.nav-slot--awards {
  --nav-slot-width: 76.589px;
  --nav-text-shift: .51px;
  order: 3;
}
.nav-slot--members {
  --nav-slot-width: 91.981px;
  --nav-text-shift: .5px;
  order: 4;
}
.nav-slot--admin {
  --nav-slot-width: 162.496px;
  order: 5;
}
.nav-slot--logout {
  --nav-slot-width: 60.382px;
  --nav-text-shift: -.09px;
  order: 6;
}
.nav-slot--pr {
  --nav-slot-width: 48.074px;
  --nav-text-shift: -.59px;
  order: 7;
}
.nav-slot--register {
  --nav-slot-width: 110px;
  --nav-text-shift: .51px;
  order: 8;
}
.nav-slot--login {
  --nav-slot-width: 60px;
  --nav-text-shift: .51px;
  order: 9;
}
.nav-account--first {
  --nav-account-margin: auto;
}
.nav-account {
  --nav-link-width: 16px;
  --nav-text-shift: 0px;
}
.nav-account--bell {
  --nav-slot-width: 25.81px;
  order: 90;
}
.nav-account--messages {
  --nav-slot-width: 27.19px;
  order: 91;
}
.nav-account--profile {
  --nav-slot-width: 30px;
  --nav-link-width: 30px;
  order: 92;
}
.nav-account > a, .nav-account-control {
  position: relative;
  box-sizing: border-box;
  min-height: 32px;
}
.nav-account-control {
  display: block;
  width: 16px;
  margin: 0;
  padding: 0;
  cursor: pointer;
}
.nav-account-label, .nav-account--profile > a > .notify-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.nav-account-icon {
  position: absolute;
  top: 8px;
  left: 0;
  width: 16px;
  height: 16px;
}


.nav-account-icon--profile {
  display: none;
}
.nav-account-avatar {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  object-fit: cover;
  object-position: bottom;
}
/* Scope above the external notifications.css selectors using the navigation scope. */
#pun-navlinks .nav-account .unreads {
  position: absolute;
  top: 3px;
  right: -4px;
  height: 10px;
  min-width: 10px;
  padding: 0 2px;
  font: 600 8px/10px var(--font-forum-ui);
}
#pun-navlinks .nav-account-badge:not([hidden]) {
  display: block;
  top: -3px;
  right: -5px;
  width: auto;
  height: 16px;
  min-width: 16px;
  padding: 0 3px;
  text-align: center;
  font: 700 12px/16px var(--font-forum-ui);
}
#pun-navlinks .nav-account .unreads:empty,
#pun-navlinks .nav-account-badge[hidden] {
  display: none;
}

@media (max-width: 800px) {
    #pun-navlinks, #pun-ulinks {
  width: 100%;
  --navigation-wrap: nowrap;
}
    #pun-navlinks .container, #pun-ulinks .container {
  flex-wrap: nowrap;
  gap: 3px;
  padding: 4px 6px;
}
    #pun #pun-ulinks ul {
  gap: 3px;
}
    #pun #pun-navlinks li a {
  font-size: min(11px, 1.8vw);
  white-space: nowrap;
  font-weight:600;
}
    #pun #pun-ulinks li a {
  font-size: min(10px, 1.45vw);
  white-space: nowrap;
}
    .nav-slot {
  --nav-slot-width: auto;
  --nav-text-shift: 0px;
  --nav-slot-padding: 0;
}
    .nav-account {
  --nav-slot-width: 20px;
  --nav-link-width: 20px;
  min-height: 24px;
}
    .nav-account > a, .nav-account-control {
  width: 20px;
  min-height: 24px;
}
    .nav-account-icon {
  top: 5px;
  left: 3px;
  width: 14px;
  height: 14px;
}
    .nav-account-avatar {
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
}
}
/* Figma header: the artwork supplies its static labels and decorative surfaces. */
#pun-title {
  --header-overlay-scale: 1;
  position: relative;
  width: 100%;
  height: calc(var(--header-height) * var(--header-overlay-scale));
  margin:-6px 0 0;
}
#pun-title h1, #pun-title table {
  display: none;
}
.header-overlay {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1000px;
  height: 463px;
  zoom: var(--header-overlay-scale);
  font-family: var(--font-forum-ui);
}

.header-wanted-list, .header-activists {
  position: absolute;
  display: flex;
  gap: 26px;
}
.header-wanted-list {
  top: 63px;
  left: 31px;
}
.header-activists {
  top: 223px;
  left: 29px;
  gap: 27px;
}
.header-wanted, .header-activist {
  display: block;
  width: 54px;
  height: 54px;
  overflow: hidden;
}
.header-wanted__photo, .header-activist img {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: cover;
}
.header-episode {
  position: absolute;
  top: 388px;
  left: 44px;
  width: 205px;
  max-height: 44px;
  overflow: auto;
  text-align: center;
  font: italic 14px/17px var(--font-forum-ui);
}
/* The featured episode keeps readable text over the artwork on hover. */

.header-feature {
  position: absolute;
  top: 82px;
  left: 369px;
  width: 267px;
  height: 224px;
  text-align: center;
}
.header-feature-avatar {
  display: block;
  width: 54px;
  height: 54px;
  margin: 0 auto 8px;
  object-fit: cover;
}
.header-feature-name {
  display: block;
  margin-left: 125px;
  font: italic 700 18px/18px var(--font-forum-ui);
}
.header-feature-text {
  height: 119px;
  margin: 9px 14px 0;
  overflow: auto;
  text-align: justify;
  font: 11px/1.2 var(--font-forum-ui);
}
.header-feature-more {
  display: block;
  margin: 4px 12px 0;
  text-align: right;
  font-size: 11px;
  font-style: italic;
}
.header-timer {
  position: absolute;
  top: 166.5px;
  left: 731px;
  width: 122px;
  text-align: center;
}
.header-timer-days {
  display: block;
  font: italic 600 26px/31px var(--font-forum-ui);
  letter-spacing: -.78px;
}
.header-timer-value {
  display: block;
  font: italic 700 19px/23px var(--font-forum-ui);
}
.theme-selector {
  position: absolute;
  top: 94px;
  left: 917.5px;
  display: grid;
  gap: 7px;
  width: 23px;
}
.theme-selector button {
  display: block;
  width: 23px;
  height: 25px;
  padding: 0;
  cursor: pointer;
}
.theme-selector [data-forum-theme="light"] {
  --theme-button-image: var(--theme-light-image);
}
.theme-selector [data-forum-theme="dark"] {
  --theme-button-image: var(--theme-dark-image);
  height: 24px;
}

.header-popover {
  position: absolute;
  z-index: 8;
}
.header-popover summary {
  display: block;
  cursor: pointer;
  list-style: none;
}
.header-popover summary::-webkit-details-marker {
  display: none;
}
.header-admin-menu {
  top: 95px;
  left: 687.6px;
  --header-menu-padding: 0;
  --header-menu-border-width: 0;
  --header-menu-radius: 0;
  --header-menu-background: transparent;
  --header-menu-enter: header-admin-enter;
}
.header-admin-menu summary {
  width: 49px;
  height: 52px;
  --popover-image: var(--header-admin-image);
}
.header-navigation {
  top: 11px;
  left: 712px;
  --header-menu-width: 127px;
  --header-menu-enter: header-navigation-enter;
  --header-menu-min-width: 0;
  --header-menu-gap: 3px;
  --header-menu-padding: 4px;
  --header-menu-radius: 0;
  --header-menu-background: var(--header-navigation-surface);
  --header-menu-border: var(--color-header-status);
  --header-menu-color: var(--color-header-status);
}
.header-navigation summary {
  width: 185px;
  height: 58px;
  --popover-image: var(--header-navigation-image);
}
.header-envelope {
  position: absolute;
  top: 238px;
  left: 812.4px;
  width: 77px;
  height: 64px;
}
.header-popover-panel {
  position: absolute;
  top: 100%;
  right: 0;
  display: grid;
  gap: var(--header-menu-gap, 6px);
  width: var(--header-menu-width, auto);
  min-width: var(--header-menu-min-width, 150px);
  padding: var(--header-menu-padding, 10px);
  font-size: 12px;
}

.header-navigation .header-popover-panel {
  box-sizing: border-box;
  max-height: 260px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font: 700 11px/15px var(--font-forum-ui);
}
.header-navigation .header-popover-panel a {
  display: block;
  padding: 0 6px;
  overflow-wrap: anywhere;
  transition: color 120ms ease;
}


:is(.header-navigation, .header-admin-menu)[open] .header-popover-panel {
  animation: var(--header-menu-enter) 180ms ease-out both;
}
@keyframes header-admin-enter { from { opacity: 0; translate: -10px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes header-navigation-enter { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
    :is(.header-navigation, .header-admin-menu)[open] .header-popover-panel {
  animation: none;
}
    .header-navigation .header-popover-panel a {
  transition: none;
}
}
.header-admin-menu .header-popover-panel {
  top: 7px;
  left: 76px;
  right: auto;
  display: flex;
  min-width: 0;
}
.header-admin-link {
  flex: 0 0 37px;
}

.header-admin-link img {
  display: block;
  box-sizing: border-box;
  width: 37px;
  height: 37px;
  object-fit: cover;
}
@media (max-width: 760px) {
    .header-navigation .header-popover-panel {
  transform: scale(calc(1 / var(--header-overlay-scale)));
  transform-origin: top right;
}
    .theme-selector {
  top: 10px;
  right: 10px;
  left: auto;
  width: 44px;
  gap: 0;
  transform: scale(calc(1 / var(--header-overlay-scale)));
  transform-origin: top right;
}
    .theme-selector button, .theme-selector [data-forum-theme="dark"] {
  width: 44px;
  height: 44px;
}
}


/* D2 Page navigation
-------------------------------------------------------------*/

/* D2.1 */
#pun-pagelinks {
  position: absolute;
  top: -15px;
  left: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}

/* D2.2 */
#pun-pagelinks .container {
  padding: 0;
}

/* D2.3 */
#pun-pagelinks .container li {
  display: inline
  ;
}

/* D2.4 */
#pun-pagelinks li a, #pun-pagelinks a:link, #pun-pagelinks a:hover {
  height: 2em;
  line-height: 2em;
  padding: 0;
  font-size: 1.2em;
  margin-left: -9999px;
  display: block;
  float:left;
  width: 100%;
}

/* D2.5 */
#pun-pagelinks a:active, #pun-pagelinks a:focus {
  position:relative;
  margin: 0;
}

#pun-pagelinks li a span {
  display:block;
  margin: 0 1em
  ;
}

/* D3 Forum navigation
-------------------------------------------------------------*/

/* D3.1 */


#pun-navlinks {
  position: relative;
  width:100%;
  margin:0;
  order:-1;
  z-index:1;
}

#pun-navlinks::before {
  position: absolute;
  top: calc(0px - var(--service-panel-top-gap));
  left: calc(0px - var(--service-panel-inset));
  width: calc(100% + var(--service-panel-inset) + var(--service-panel-inset));
  height: var(--service-panel-top-gap);
  content:none;
  pointer-events: none;
}

/* D3.2 */
#pun-navlinks .container {
  display: flex;
  width: 100%;
  margin: 0;
  justify-content:flex-start;
  align-items: center;
  min-height:32px;
  padding:0 10px 0 13px;
}

#pun-navlinks ul {
  display: flex;
  flex-wrap: var(--navigation-wrap, wrap);
  justify-content:flex-start;
  align-items: center;
  gap:var(--nav-links-gap, 0);
  font-family:var(--font-navigation);
}

/* D.3 */
#pun-navlinks li {
  display: block;
  padding:var(--nav-slot-padding, 0);
  margin-left:var(--nav-account-margin, 0);
  width:var(--nav-slot-width, auto);
  flex-shrink:0;
}

/* D3.4 */
#pun-navlinks li a {
  display: block;
  font-size:11px;
  line-height:32px;
  font-weight:600;
  text-transform:uppercase;
  font-family:var(--font-navigation);
  font-style:normal;
  letter-spacing:0;
  text-align:center;
  padding:0;
  width:var(--nav-link-width, 100%);
  position:relative;
  top:var(--nav-text-shift, 0px);
}

/* D4 User links
-------------------------------------------------------------*/

/* D4.1 */
#pun-ulinks {
  width:100%;
  margin:-10.5px 0 0;
  font-size: var(--font-size-xs);
  line-height: 1.3;
  position:relative;
  z-index:2;
}

/* D4.2 */
#pun-ulinks .container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height:25px;
  padding:0 18px;
}

#pun-ulinks ul {
  display: flex;
  flex-wrap: var(--navigation-wrap, wrap);
  justify-content: center;
  align-items: center;
  gap: 5px 11px;
}

/* D4.3 */
#pun-ulinks li, #pun-ulinks li a {
  display: block;
  padding: 0;
  white-space: nowrap;
}

/* D4.4 */
#pun-ulinks li a {
  font:500 11px/1 var(--font-navigation);
  text-transform:lowercase;
  letter-spacing:0;
}

/* D4.5 */
#pun-ulinks li.item1, #pun-ulinks li.item1 a {
  padding-left: 0
  ;
}

/* D5 Welcome box and Top Breadcrumbs
-------------------------------------------------------------*/

/* D5.1 */
#pun-status {
  position:relative;
  z-index: 7;
  top:auto;
  right:auto;
  float: none;
  width:100%;
  max-width:100%;
  margin: 0;
}

/* D5.2 */
#pun-status .container {
  display: flex;
  width: 100%;
  min-height: 0;
  margin: 0;
  flex-wrap: wrap;
  justify-content:center;
  align-items: center;
  padding:6px 18px;
  text-align:center;
  font-size: var(--font-size-sm);
  line-height: 1.3;
}

/* D5.3 */
#pun-status span {
  white-space: nowrap;
  margin-right: 0.5em;
}

#pun-status span.item1 {
  flex-basis: 100%;
  margin-right: 0;
}

/* D5.4 */
#pun-crumbs1 {
  position: relative;
  left: auto;
  float: none;
  width: calc(100% - (var(--service-panel-inset) * 2));
  margin: 0 auto;
  overflow: visible;
  font-size: var(--font-size-sm);
  font-weight: bold;
}

/* D5.5 */
#pun-crumbs1 p.container {
  position: relative;
  top:auto;
  display: flex;
  align-items: center;
  min-height:0;
  padding:5px 18px;
  overflow: hidden;
  font-size: inherit;
  white-space:normal;
}

/* D5.6 */
#pun-break1 {
  display: none;
}

#pun-break2 {
  clear: both;
  height: 0;
  margin: 0;
}

#pun-index #pun-break2 + .section {
  margin-bottom: 0;
}

/* D6 Announcement
-------------------------------------------------------------*/

/* D6.1 */
#pun-announcement {
  width: calc(100% - (var(--service-panel-inset) * 2));
  margin: 0 auto;
}

/* D6.2 */
#pun-announcement .container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height:44.55px;
  padding:15.55px 18px 0;
}

/* D6.3 */
#pun-announcement .html-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px var(--quick-link-gap);
  width: 100%;
}

#pun-announcement .quick-link {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height:29px;
  padding: 6px 14px;
  font:500 11px/1.2 var(--font-forum-ui);
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
  min-width:88px;
}

/* D7 Statistics
-------------------------------------------------------------*/



/* D7.6 Page scroll controls */
.scroll-controls {
  position: fixed;
  z-index: 9999;
  top: 50%;
  right: max(
    10px,
    calc(
      (100vw - var(--forum-width)) / 2 -
      var(--scroll-control-width) -
      var(--scroll-control-side-gap)
    )
  );
  display: flex;
  width: var(--scroll-control-width);
  flex-direction: column;
  align-items: center;
  gap:4.48px;
  transform: translateY(-50%);
  pointer-events: none;
  box-sizing: border-box;
}

.scroll-control {
  display: block;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  overflow:hidden;
  cursor: pointer;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  pointer-events: none;
  width:var(--scroll-control-width);
  height:96px;
}

.scroll-control.is-visible {
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.scroll-control.is-visible:hover,
.scroll-control.is-visible:focus-visible {
  transform: translateX(-3px);
}

.scroll-control img {
  display:none;
  width: auto;
  max-width: var(--scroll-control-width);
  height: auto;
  margin: 0 auto;
}

@media (max-width: 1100px) {
  .scroll-controls {
  display: none;
}
}

/* D8 Quick Jump - About - Bottom Breadcrumbs
-------------------------------------------------------------*/

/* D8.1 */
#pun-qjump {
  margin: 0;
  width: 50%;
  position: relative;
  float: left;
}

/* D8.2 */
#pun-qjump .container {
  padding: 0.8em 1em;
}

/* D8.3 */
#pun-about {
  margin-top: 0;
}

/* D8.4 */
#pun-about .container {
  text-align: right;
  line-height: 150%;
  padding: 0.8em 1em;
}

/* D8.5 */
#pun-about p span {
  display:block;
  padding-left: 50%;
}

/* D8.6 */
#pun-crumbs2:not(.emo-list-navigation){
  width: 100%;
  margin: 0;
  overflow: hidden;
  font-size: var(--font-size-sm);
  font-weight: bold;
}

/* D8.7 */
#pun-crumbs2:not(.emo-list-navigation) .container{
  padding: 9px 15px;
  font-size: inherit;
}

/* D8.8 */
#pun-break4 {
  margin: -2px 1em;
  position: relative;
  height: 0;
  z-index: 1;
}

/* D8.9 */



/* D9 Help file
-------------------------------------------------------------*/

/* D9.1 */
#pun-help .formal .info-box h3.legend {
  padding-bottom: 0;
  margin-bottom: 0.8em;
}

/* D9.2 */
#pun-help .formal .info-box h3.legend span {
  padding-bottom: 0.6em;
  display: block;
  font-size: 1.1em;
}

/* D9.3 */
#pun-help .formal p, #pun-help .formal dd {
  margin-bottom: 1em
  ;
}

/* D9.4 */
#pun-help .formal ul, #pun-help .formal dl {
  padding: 0 0 0 1em
  ;
}

/* D9.5 */
#pun-help .formal li {
  padding: 0;
  line-height: 130%
  ;
}

/* D9.6 */
#pun-help .formal li * {
  vertical-align: text-top
  ;
}

/* D9.7 */
#pun-help .formal dt span {
  font: 1.4em/120% monaco, "bitstream vera sans mono", "courier new", courier, monospace
  ;
}

/* D9.8 */
#pun-help .formal .parsedmsg, #pun-help .formal .parsedmsg .incode {
  padding-bottom: 0;
}


/*************************************************************
E - RESPONSIVE
**************************************************************/

@media (max-width: 1140px) {
  #pun {
  width: calc(100% - 24px);
  max-width: none;
}
}

@media (max-width: 760px) {
  :root {
  --forum-side-gap: 12px;
  --section-radius: 6px;
}

  #pun {
  width: 100%;
}

  #pun-index .category > h2 span {
  padding: 10px var(--category-title-offset);
  font-size: var(--font-size-category-title);
  line-height: var(--line-height-category-title);
}

  #pun-index .main tbody td.tcr {
  width:100%;
  display:block;
  padding:12px 16px 20px 54px;
  min-height:60px;
  --lastpost-avatar-top:12px;
  --lastpost-avatar-left:16px;
}

  #pun-index .main tbody td.tcl, #pun-index .main tbody.hasicon td.tcl {
  padding-left: 68px;
  width:100%;
  display:block;
  padding:18px 16px 12px 70px;
}

  #pun-index .main table div.icon {
  left: 18px;
  width: 32px;
  height: 32px;
  margin-top: -16px;
}

  #pun-crumbs1 {
  position: static;
  float: none;
  width: calc(100% - (var(--service-panel-inset) * 2));
  margin-right: auto;
  margin-left: auto;
}













  #pun-crumbs1 p.container {
  display: block;
  height: auto;
  min-height: 36px;
  padding: 6px var(--service-panel-side-padding) 9px;
  overflow: visible;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
}

  #pun > .punbb:not(#pun-index) #pun-main > .linkst,
  #pun > .punbb:not(#pun-index) #pun-main > .linksb {
  display: flex;
  min-height: 38px;
  height: auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 5px 8px;
}

  #pun > .punbb:not(#pun-index) #pun-main > .linkst .pagelink,
  #pun > .punbb:not(#pun-index) #pun-main > .linksb .pagelink {
  float: none;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}

  #pun > .punbb:not(#pun-index) #pun-main > .linkst .postlink,
  #pun > .punbb:not(#pun-index) #pun-main > .linksb .postlink {
  float: none;
  flex: 0 0 auto;
  margin-left: auto;
}

  #pun > .punbb:not(#pun-index) #pun-main > .linksb::after {
  display: none;
}
}



/* The platform mobile stylesheet turns both link lists into 48px sprite
   buttons and a black dropdown. EMO keeps their text and scales the existing
   navigation component down instead. These declarations are protected because
   /style/mobile.css is loaded after the theme and uses !important itself. */
@media screen and (max-width: 540px) {
  /* Platform mobile.css forces full-height nested shells, creating a second scrollbar. */
  html #pun, #pun > .punbb {
  height: auto !important;
}

  #pun #pun-ulinks ul {
  position: static;
  top: auto;
  right: auto;
  display: flex;
}

  #pun #pun-navlinks,
  #pun #pun-ulinks {
  width: 100% !important;
  height: auto !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

  #pun #pun-navlinks {
  margin-top: var(--service-panel-top-gap) !important;
}

  #pun #pun-ulinks {
  position: static !important;
  top: auto !important;
  right: auto !important;
  line-height: 1.2 !important;
}

  #pun #pun-navlinks .container,
  #pun #pun-ulinks .container {
  position: static;
  display: flex;
  height: auto !important;
  margin: 0 !important;
  text-align: center !important;
}

  #pun #pun-navlinks .container {
  gap: 3px;
  padding: 4px 6px !important;
}

  #pun #pun-ulinks .container {
  gap: 3px;
  padding: 4px 6px !important;
}

  #pun #pun-navlinks li,
  #pun #pun-ulinks li {
  display: block !important;
  float: none !important;
  margin:0 0 0 var(--nav-account-margin, 0)!important;
  padding: 0 !important;
  line-height: inherit !important;
}

  #pun #pun-navlinks li a,
  #pun #pun-ulinks li a {
  display: block !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  line-height: 1.2;
  white-space: nowrap;
}

  #pun #pun-navlinks li a {
  font-size: min(11px, 1.8vw) !important;
  font-weight:600;
}

  #pun #pun-ulinks li a {
  font-size: min(10px, 1.45vw) !important;
  font-weight: normal;
}

  #pun #pun-navlinks li a span {
  font-size: inherit !important;
}


}

/* Secondary pages: one dark canvas with 980px inner surfaces. */


#pun > .punbb:not(#pun-index) #pun-main, #pun > .punbb:not(#pun-index) #pun-crumbs2:not(.emo-list-navigation), #pun > .punbb:not(#pun-index) #pun-about{
  box-sizing: border-box;
  width: calc(100% - (var(--service-panel-inset) * 2));
  margin-right: var(--service-panel-inset);
  margin-left: var(--service-panel-inset);
}

/* Viewforum: keep the list page on the same dark canvas as the home page. */
#pun-viewforum #pun-main > h1:not(.emo-list-heading){
  display: none;
}



























#pun-viewforum #pun-about {
  margin-bottom: 0;
}

/* Keep the home-page crumbs transparent even when the base MyBB skin adds a surface. */




/* =========================================================
   INNER PAGES — shared shell
   ========================================================= */

#pun > .punbb:not(#pun-index) #pun-main {
  margin-top: 0;
  margin-bottom: 0;
  padding:var(--inner-main-padding, 36.4px 25px 36px 32px);
}



#pun > .punbb:not(#pun-index) #pun-crumbs2:not(.emo-list-navigation), #pun > .punbb:not(#pun-index) #pun-crumbs2:not(.emo-list-navigation) .container, #pun > .punbb:not(#pun-index) #pun-about, #pun > .punbb:not(#pun-index) #pun-about .container{
  box-sizing: border-box;
  font-size: var(--font-size-sm);
  font-weight: normal;
}

#pun > .punbb:not(#pun-index) #pun-crumbs2:not(.emo-list-navigation) .container, #pun > .punbb:not(#pun-index) #pun-about .container{
  padding:0 18px;
  min-height:25px;
  line-height:25px;
}

#pun > .punbb:not(#pun-index) #pun-break4 {
  display: none;
}

/* The full footer and partner banners belong only to the home page. */
#pun > .punbb:not(#pun-index) :is(#html-footer, #pun-about) {
  display: none;
}

/* =========================================================
   INNER PAGES — shared visual components
   Appearance lives here; page sections below mostly control layout.
   ========================================================= */

/* Dark utility surfaces share one texture source across navigation and actions. */


/* Text and links in utility blocks must stay legible wherever those blocks
   sit on the dark inner-page canvas, including transparent utility rows. */






/* Light rounded surfaces used by redesigned inner-page cards. */




/* Redesigned list tables share one neutral surface language. */








/* User-directory rows share a slightly more open vertical rhythm. */
#pun-online #pun-main .formal tbody td{
  padding: 18px;
}

/* Last-post avatars are the same component on forum and search lists. */






/* Compact post cards are shared by search results, the full-reply topic
   review and an opened private message. Their page sections below only
   control placement. */
:is(
  #pun-searchposts #pun-main > .topic,
  #pun-post #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post {
  margin: 0 0 var(--section-gap);
}

:is(
  #pun-searchposts #pun-main > .topic,
  #pun-post #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post:last-child {
  margin-bottom: 0;
}

:is(
  #pun-searchposts #pun-main > .topic,
  #pun-post #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post > h3 {
  margin: 0;
  padding: 10px 18px;
  font: normal var(--font-size-xs)/16px var(--font-forum-ui);
}

:is(
  #pun-searchposts #pun-main > .topic,
  #pun-post #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post > h3 span {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  font: inherit;
}





:is(
  #pun-searchposts #pun-main > .topic,
  #pun-post #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post > h3 strong {
  flex: 0 0 auto;
  font-weight: normal;
}

:is(
  #pun-searchposts #pun-main > .topic,
  #pun-post #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post > .container {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  min-height: 96px;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

:is(
  #pun-searchposts #pun-main > .topic,
  #pun-post #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post > .container::after {
  display: none;
}

:is(
  #pun-searchposts #pun-main > .topic,
  #pun-post #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post .post-author {
  float: none;
  width: auto;
  margin: 0;
  padding: 16px 18px;
}

:is(
  #pun-searchposts #pun-main > .topic,
  #pun-post #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post .post-author :is(ul, p) {
  margin: 0;
  padding: 0;
}

:is(
  #pun-searchposts #pun-main > .topic,
  #pun-post #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post .post-author li + li {
  margin-top: 5px;
}

:is(
  #pun-searchposts #pun-main > .topic,
  #pun-post #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post .post-body {
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 16px 18px;
}

:is(
  #pun-searchposts #pun-main > .topic,
  #pun-post #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post .post-box {
  min-height: 0;
  margin: 0;
  padding: 0;
}

:is(
  #pun-searchposts #pun-main > .topic,
  #pun-post #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post .post-content {
  overflow: visible;
  font-size: var(--font-size-base);
  line-height: 1.5;
}

:is(
  #pun-searchposts #pun-main > .topic,
  #pun-post #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post .post-content > p:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

:is(
  #pun-searchposts #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post .post-links {
  grid-column: 1 / -1;
  margin: 0;
}

:is(
  #pun-searchposts #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post .post-links ul {
  display: flex;
  justify-content: flex-end;
  height: auto;
  margin: 0;
  padding: 0 18px 14px;
  line-height: inherit;
}

:is(
  #pun-searchposts #pun-main > .topic,
  #pun-messages #profile.messages-container > .container > fieldset > .fs-box
) > .post .post-links li {
  padding: 0;
}

@media (max-width: 760px) {
  :is(
    #pun-searchposts #pun-main > .topic,
    #pun-post #pun-main > .topic,
    #pun-messages #profile.messages-container > .container > fieldset > .fs-box
  ) > .post > .container {
  display: block;
}

  :is(
    #pun-searchposts #pun-main > .topic,
    #pun-post #pun-main > .topic,
    #pun-messages #profile.messages-container > .container > fieldset > .fs-box
  ) > .post .post-author {
  padding-bottom: 10px;
}

  :is(
    #pun-searchposts #pun-main > .topic,
    #pun-post #pun-main > .topic,
    #pun-messages #profile.messages-container > .container > fieldset > .fs-box
  ) > .post .post-body {
  padding-top: 10px;
}
  }

/* Search results align their cards with the pagination content. */
#pun-searchposts #pun-main > .topic {
  padding: var(--section-gap) 18px 0;
}

/* The full-reply topic review uses the same compact heading language as the
   surrounding inner-page utilities. */
#pun-post #pun-main > .topic {
  margin-top: var(--section-gap);
  padding: 0 18px;
}

#pun-post #pun-main > .topic > h2 {
  margin: 0 0 8px;
  padding: 0 2px;
  font: normal var(--font-size-sm)/16px var(--font-forum-ui);
  letter-spacing: .8px;
  text-transform: uppercase;
}

#pun-post #pun-main > .topic > h2 span {
  font: inherit;
}

/* =========================================================
   PRIVATE MESSAGES
   Sidebar, message collections and opened messages share the existing
   inner-page surfaces, compact post cards and action-button recipe.
   ========================================================= */

#pun-messages #pun-main > #profile.messages-container {
  margin: 0;
  overflow: visible;
}

#pun-messages #profile.messages-container > .container {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: var(--section-gap) 18px;
  min-height: 0;
  padding: 18px;
}

#pun-messages #profile.messages-container > .container > #profilenav {
  grid-column: 1;
  grid-row: 1 / span 10;
  float: none;
  display: block;
  width: auto;
  margin: 0;
}

#pun-messages #profile.messages-container > .container > #profilenav ~ * {
  grid-column: 2;
  min-width: 0;
  margin: 0;
}

#pun-messages #profilenav > h2:not(.emo-list-heading) {
  min-height: 34px;
  margin: 0;
  padding: 9px 14px;
  font: normal var(--font-size-sm)/16px var(--font-forum-ui);
  letter-spacing: .7px;
  text-align: center;
  text-transform: uppercase;
}

#pun-messages #profilenav > h2:not(.emo-list-heading) span {
  padding: 0;
  font: inherit;
}

#pun-messages #profilenav > ul {
  margin: 0 0 var(--section-gap);
  padding: 7px 0;
}

#pun-messages #profilenav > ul:last-child {
  margin-bottom: 0;
}

#pun-messages #profilenav li {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

#pun-messages #profilenav li a {
  display: block;
  padding: 7px 12px 7px 15px;
  font: normal var(--font-size-sm)/15px var(--font-forum-ui);
}



#pun-messages #profile.messages-container > .container
  > form#post #post-form > h2 {
  min-height: 34px;
  margin: 0 0 14px;
  padding: 9px 16px;
  font: normal var(--font-size-sm)/16px var(--font-forum-ui);
  letter-spacing: .7px;
  text-transform: uppercase;
}

#pun-messages #profile.messages-container > .container
  > form#post #post-form > h2 span {
  padding: 0;
  font: inherit;
}

/* Message collections */

#pun-messages #messages,
#pun-messages #messages fieldset,
#pun-messages #messages .fs-box {
  min-width: 0;
  margin: 0;
  padding: 0;
}

#pun-messages #messages fieldset > legend:not(.emo-list-heading),
#pun-messages #profile.messages-container > .container
  > fieldset:has(> .fs-box > .post) > legend {
  display: block;
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 9px 16px;
  font: normal var(--font-size-sm)/16px var(--font-forum-ui);
  letter-spacing: .7px;
  text-transform: uppercase;
}

#pun-messages #messages fieldset > legend:not(.emo-list-heading) span,
#pun-messages #profile.messages-container > .container
  > fieldset:has(> .fs-box > .post) > legend strong {
  padding: 0;
  font: inherit;
}

#pun-messages #messages .fs-box > .container {
  padding: 0;
  overflow: hidden;
}

#pun-messages #messages table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

#pun-messages #messages th {
  height: 34px;
  padding: 8px 14px;
  font: normal var(--font-size-xs)/16px var(--font-forum-ui);
  letter-spacing: .7px;
  text-transform: uppercase;
}

#pun-messages #messages tbody td {
  height: 64px;
  padding: 10px 14px;
  vertical-align: middle;
}







#pun-messages #messages td.tcl .intd {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 40px;
  padding-left: 52px;
}

#pun-messages #messages td.tcl .tclcon {
  min-width: 0;
}

#pun-messages #messages td.tcl .tclcon a {
  font: 500 var(--font-size-forum-title)/var(--line-height-forum-title)
    var(--font-forum-title);
  letter-spacing: .2px;
}



#pun-messages #messages td.tcl .icon {
  position: absolute;
  top: 50%;
  left: 0;
  width: 36px;
  height: 36px;
  margin: -18px 0 0;
}



#pun-messages #messages td.pmtc22 {
  text-align: left;
}

#pun-messages #messages td.pmtc22 > :is(.user-avatar, a) {
  vertical-align: middle;
}

#pun-messages #messages td.pmtc22 .user-avatar {
  display: inline-block;
  margin-right: 8px;
}

#pun-messages #messages td.pmtc22 .avatar-image,
#pun-messages #messages td.pmtc22 .user-avatar > a {
  display: inline-block;
  width: 36px;
  height: 36px;
}





#pun-messages #messages > .linksb {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 10px 18px 0;
}

#pun-messages #messages > .linksb .postlink {
  margin-left: auto;
}

#pun-messages #messages > .linksb .postlink input.button,
#pun-messages #profile.messages-container > .container > fieldset:has(> .fs-box > .post) .post-links a{
  min-width: 76px;
}



#pun-messages #profile.messages-container > .container > fieldset:has(> .fs-box > .post) .post-links a{
  vertical-align: middle;
}



#pun-messages #messages > .linksb > .clearer {
  display: none;
}

/* Opened message */

#pun-messages #profile.messages-container > .container
  > fieldset:has(> .fs-box > .post) {
  min-width: 0;
  margin: 0;
  padding: 0;
}

#pun-messages #profile.messages-container > .container
  > fieldset:has(> .fs-box > .post) > .fs-box {
  padding: 0;
}



#pun-messages #profile.messages-container > .container
  > fieldset:has(> .fs-box > .post) .post > .container {
  grid-template-columns: 216px minmax(0, 1fr);
}

#pun-messages #profile.messages-container > .container
  > fieldset:has(> .fs-box > .post) .post-author {
  text-align: center;
}

#pun-messages #profile.messages-container > .container
  > fieldset:has(> .fs-box > .post) .post-author
  :is(.pa-reg, .pa-posts, .pa-online) {
  display: none;
}

#pun-messages #profile.messages-container > .container
  > fieldset:has(> .fs-box > .post) .pa-avatar {
  margin-top: 10px;
}

#pun-messages #profile.messages-container > .container
  > fieldset:has(> .fs-box > .post) .pa-avatar img {
  width: 180px;
  height: 180px;
  object-fit: cover;
}

#pun-messages #profile.messages-container > .container
  > fieldset:has(> .fs-box > .post) .post-links ul {
  align-items: center;
  gap: 8px;
}

#pun-messages #profile.messages-container > .container
  > fieldset:has(> .fs-box > .post) .post-links li + li {
  margin-left: 0;
}

@media (max-width: 760px) {
  #pun-messages #profile.messages-container > .container {
  display: block;
  padding: 14px;
}

  #pun-messages #profile.messages-container > .container > #profilenav {
  margin-bottom: var(--section-gap);
}

  #pun-messages #profilenav > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 7px;
}

  #pun-messages #profilenav li a {
  padding: 6px 9px;
}

  #pun-messages #messages .fs-box > .container {
  overflow-x: auto;
}

  #pun-messages #messages table {
  min-width: 620px;
}
  }

/* =========================================================
   VIEWTOPIC — page order
   The actual message-card styling lives in the single VIEWTOPIC block below.
   ========================================================= */

#pun-viewtopic #pun-main,
#pun-searchtopics #pun-main,
#pun-userlist #pun-main {
  display: flex;
  flex-direction: column;
}

#pun-viewtopic #pun-main > .linkst,
#pun-searchtopics #pun-main > .linkst,
#pun-userlist #pun-main > .linkst {
  order: 1;
}

#pun-searchtopics #pun-main > h1:not(.emo-list-heading), #pun-userlist #pun-main > h1:not(.emo-list-heading){
  order: 2;
}

#pun-viewtopic #pun-main > .topic {
  order: 4;
}
#pun-viewtopic #pun-main > .linksb {
  order: 5;
}

#pun-viewtopic #topic_t2 {
  margin: 0;
}

#pun-viewtopic #topic_t2 > h2 {
  display: none;
}

/* =========================================================
   SEARCH / ACTIVE TOPICS
   ========================================================= */

#pun-userlist #pun-main > .formal{
  order: 3;
}

#pun-searchtopics #pun-main > .linksb, #pun-userlist #pun-main > .linksb{
  order: 4;
}


























/* =========================================================
   PARTICIPANTS
   ========================================================= */

#pun-userlist #pun-main .formal{
  margin: 0 0 var(--section-gap);
}

#pun-userlist #pun-main .formal > .container {
  padding: 14px 18px;
}





/* Keep both registration and last-visit dates on one line. */




@media (max-width: 760px) {
  #pun-userlist #pun-main .formal .fs-box.inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

  #pun-userlist #pun-main .formal .fs-box.inline > p {
  width: auto;
  margin: 0;
}

  #pun-userlist #pun-main .formal .fs-box.inline > .inputfield,
  #pun-userlist #pun-main .formal .fs-box.inline > .infofield,
  #pun-userlist #pun-main .formal .fs-box.inline > .selectfield:has(#fld4) {
  grid-column: 1 / -1;
}

  #pun-userlist #pun-main .formal .fs-box.inline :is(label, span.input) {
  display: block;
  width: 100%;
}

  #pun-userlist #pun-main .formal .fs-box.inline p > br {
  display: none;
}

  #pun-userlist #pun-main .formal .fs-box.inline :is(input[type="text"], select) {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

  #pun-userlist #pun-main .formal .formsubmit {
  margin-right: 0;
  margin-left: 0;
  padding-left: 0;
}








  }

/* online.php has no pagination strip for the shared floating page title.
   Keep its heading in normal flow so the users table starts below it. */
#pun-online #pun-main > h1:not(.emo-list-heading){
  min-height: 38px;
  margin: 0;
  padding: 11px 18px 10px;
  font: normal var(--font-size-category-title)/var(--line-height-category-title)
    var(--font-forum-ui);
  letter-spacing: var(--letter-spacing-category-title);
  text-align: right;
  text-transform: uppercase;
}

#pun-online #pun-main > h1:not(.emo-list-heading) span{
  font: inherit;
}

#pun-message #pun-main .info > .container {
  padding: 18px;
}

/* =========================================================
   INNER-PAGE HEADINGS / FEEDS / QUICK REPLY
   ========================================================= */

/*
 * All secondary-page titles use the same compact category-label treatment
 * as the index.  They sit on the right side of the pagination strip, so the
 * page title and page number share one line without adding another block.
 */
#pun > .punbb:not(#pun-index):not(#pun-viewforum) #pun-main {
  position: relative;
}

#pun > .punbb:not(#pun-index):not(#pun-viewforum):not(#pun-online):not(#pun-redirect):not(#pun-message):not(#pun-post) #pun-main > h1:not(.emo-list-heading){
  position:static;
  z-index: 3;
  top: 0;
  right: 18px;
  min-height:0;
  margin: 0;
  padding:0 0 18px;
  font-weight: normal;
  letter-spacing: var(--letter-spacing-category-title);
  text-align:left;
  text-transform: uppercase;
  font:italic 400 19px/30px var(--font-forum-title);
}

/* RSS/Atom are platform utilities, not part of the visual footer.  Hide the
   utility links and their empty wrapper wherever a page provides them. */
#pun > .punbb:not(#pun-index) #pun-main :is(a[href*="rss" i], a[href*="atom" i]),
#pun > .punbb:not(#pun-index) #pun-about :is(a[href*="rss" i], a[href*="atom" i]),
#pun > .punbb:not(#pun-index) :is([class*="rss" i], [class*="atom" i]) {
  display: none !important;
}

#pun > .punbb:not(#pun-index) #pun-main :is(.postlink, .feed-links):has(a[href*="rss" i]),
#pun > .punbb:not(#pun-index) #pun-main :is(.postlink, .feed-links):has(a[href*="atom" i]) {
  display: none !important;
}

#pun > .punbb:not(#pun-index) #pun-main > :is(.linkst, .linksb):not(:has(.pagelink)):has(a[href*="rss" i]),
#pun > .punbb:not(#pun-index) #pun-main > :is(.linkst, .linksb):not(:has(.pagelink)):has(a[href*="atom" i]) {
  display: none !important;
}

/* MyBB renders the RSS/Atom links in a separate moderator menu.  Remove the
   whole wrapper so its border and empty dark strip do not remain. */
#pun > .punbb#pun-searchtopics #pun-main > .modmenu,
#pun > .punbb#pun-searchtopics #pun-main > .modmenu .container {
  display: none !important;
}

/* The native quick-reply form is a direct child of #pun-main.  The shared
   page layout uses flex ordering; give the form an explicit final position
   so it remains below the posts and pagination, as in the default forum. */
#pun > .punbb#pun-viewtopic #pun-main > #post-form,
#pun > .punbb#pun-viewtopic #pun-main > form#post,
#pun > .punbb#pun-viewtopic #pun-main > .quickpost,
#pun > .punbb#pun-viewtopic #pun-main > .formal:has(form#post) {
  order: 6;
  margin-top: var(--section-gap);
  margin-bottom: var(--section-gap);
}

#pun > .punbb#pun-viewtopic #pun-main > #pun-graffiti-rusff,
#pun > .punbb#pun-viewtopic #pun-main > .section {
  order:var(--topic-section-order, 7);
}

/* Secondary pages keep the same visible header overflow as the index.  The
   decorative header elements intentionally extend beyond #pun-title. */
#pun:has(> .punbb:not(#pun-index)) {
  overflow: visible;
}

/* Child span can still inherit the native plate from the base skin. */


/* =========================================================
   VIEWTOPIC — message window layout
   ========================================================= */

/* The topic name is already present in the breadcrumbs; keep the content
   area focused on the messages themselves. */
#pun-viewtopic #pun-main > h1:not(.emo-list-heading), #pun-viewtopic #pun-main > h1:not(.emo-list-heading) span, #pun-post #pun-main > h1:not(.emo-list-heading), #pun-post #pun-main > h1:not(.emo-list-heading) span{
  display: none !important;
}

/* Rusff.LIVE recommendation is an external utility and is not part of the
   forum message layout. */
#pun-viewtopic #pun-live-rusff,
#pun-viewtopic #pun-main > #pun-live-rusff {
  display: none !important;
}

/* Keep the two utility blocks at the end of the topic: viewers immediately
   above the pagination line, moderation after the quick-reply form. */
#pun-viewtopic #pun-main > #topic-users-in,
#pun-viewtopic #pun-main > #topic-modmenu {
  font-size: var(--font-size-xs);
  line-height: 20px;
}

#pun-viewtopic #pun-main > #topic-users-in {
  order: 4;
  margin: 0;
  padding: 4px 18px;
}

#pun-viewtopic #pun-main > #topic-users-in .container,
#pun-viewtopic #pun-main > #topic-modmenu .container {
  padding: 0;
}

#pun-viewtopic #pun-main > #topic-modmenu {
  order: 8;
  margin:0;
  padding:0;
}

#pun-viewtopic #pun-main > #topic-modmenu select{
  appearance:none;
  --ui-action-control-padding:0 28px 0 7px;
}

/* Each post is a light, rounded card.  The timestamp and post number sit
   above the card on the dark page texture. */
#pun-viewtopic #pun-main > .topic > .post {
  position: relative;
  margin:0 0 12px;
  padding:0;
  overflow:visible;
  --ui-action-background:var(--message-action-background);
  --ui-action-border:var(--message-action-border);
  --ui-action-line-height:var(--message-action-line-height);
}



#pun-viewtopic #pun-main > .topic > .post > h3 {
  position:relative;
  z-index: 2;
  top:auto;
  left: 0;
  width: 100%;
  min-height:21px;
  font-size: var(--font-size-xs);
  line-height: 20px;
  font:600 10px/21px var(--font-navigation);
}

#pun-viewtopic #pun-main > .topic > .post > h3 span {
  display: flex;
  align-items: center;
  min-height:21px;
  margin: 0;
  padding:0 6px;
  font-size: var(--font-size-sm);
  line-height: 16px;
  font:inherit;
}

#pun-viewtopic #pun-main > .topic > .post > h3 .sharelink {
  display: none;
}

#pun-viewtopic #pun-main > .topic > .post > h3 .permalink {
  order: 1;
}

#pun-viewtopic #pun-main > .topic > .post > h3 strong {
  order: 2;
  width: auto;
  margin-left: auto;
  font-weight: normal;
}

#pun-viewtopic #pun-main > .topic > .post > .container {
  position: relative;
  display: flow-root;
  overflow: visible;
  margin: 0;
  padding:18px 12px 27px;
}

#pun-viewtopic #pun-main > .topic > .post .post-body {
  min-height:449px;
  margin-left:249px;
  padding:0;
}

#pun-viewtopic #pun-main > .topic > .post .post-box {
  min-height:422px;
  padding:0 0 48px;
  font-size: var(--font-size-sm);
  line-height: 1.45;
  overflow: visible;
  box-sizing:border-box;
  display:flow-root;
}

#pun-viewtopic #pun-main > .topic > .post .post-content {
  overflow: visible;
}

#pun-viewtopic #pun-main > .topic > .post .post-links {
  margin-left:0;
  margin-top:15px;
  clear:both;
}

#pun-viewtopic #pun-main > .topic > .post .post-links ul {
  display: flex;
  align-items:center;
  justify-content: flex-start;
  height:auto;
  margin-left:0;
  padding: 0;
  line-height:19px;
  min-height:19px;
  gap:4px;
}

#pun-viewtopic #pun-main > .topic > .post .post-links li {
  display: block;
  padding:0;
}

#pun-viewtopic #pun-main > .topic > .post .post-links li.pl-share {
  display: none;
}

#pun-viewtopic #pun-main > .topic > .post .post-links li.pl-email {
  float: none;
}

@media (max-width: 760px) {
  /* On phones the E-mail link wraps awkwardly; the preceding profile link
     takes over its spacer before the moderation/action group. */
  #pun-viewtopic #pun-main > .topic > .post .post-links li.pl-email:not(:has(~ li.pl-email)) {
  display: none;
}

  #pun-viewtopic #pun-main > .topic > .post .post-links li:has(+ li.pl-email:not(:has(~ li.pl-email))) {
  margin-right: auto;
}
  }

/* The last profile link pushes the moderation/action group to the right;
   hidden profile links therefore do not leave an empty dark strip. */
#pun-viewtopic #pun-main > .topic > .post .post-links li.pl-email:not(:has(~ li.pl-email)) {
  margin-right: auto;
}



#pun-viewtopic #pun-main > .topic > .post .post-links li.pl-delete {
  margin-left:auto;
}

/* =========================================================
   GUESTBOOK — topic 8, first post
   The background contains all decorative artwork. Text and lists are
   positioned in a separate component created by guestbook.js.
   ========================================================= */

.emo-guestbook-post .post-box {
  padding: 28px 18px 48px;
}

.emo-guestbook-scroll {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

/* The supplied artwork has fixed slots on an 800 × 396 canvas. */
.emo-guestbook {
  position: relative;
  box-sizing: border-box;
  width: 800px;
  min-width: 800px;
  height: 396px;
  margin: 0 auto;
  overflow: hidden;
  font-family: var(--font-forum-ui);
}

.emo-guestbook__intro,
.emo-guestbook__panel,
.emo-guestbook__note,
.emo-guestbook__admins,
.emo-guestbook__nav {
  position: absolute;
  box-sizing: border-box;
}

.emo-guestbook__intro {
  top: 74px;
  left: 542px;
  width: 195px;
  font-size: 10px;
  line-height: 1.22;
}

.emo-guestbook__tags,
.emo-guestbook__lead,
.emo-guestbook__description,
.emo-guestbook__note {
  margin: 0;
  white-space: pre-line;
}

.emo-guestbook__tags {
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}

.emo-guestbook__lead {
  margin: 20px 0 14px;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.emo-guestbook__description {
  text-align: justify;
}

.emo-guestbook__nav {
  top: 285.625px;
  left: 573.898px;
  width: 148px;
  display: grid;
  gap: 7.5px;
}

#pun-viewtopic .emo-guestbook__nav :is(a, button) {
  box-sizing: border-box;
  width: 100%;
  height: 27px;
  padding: 1px 8px;
  font: italic 12px/21px var(--font-forum-ui);
  text-align: center;
  cursor: pointer;
}



.emo-guestbook__note {
  top: 20px;
  left: 75.51px;
  width: 348.766px;
  font-size: 9px;
  font-weight: 600;
  line-height: 11px;
  letter-spacing: .36px;
}



.emo-guestbook__admins {
  top: 248px;
  left: 534px;
  width: 210px;
  text-align: center;
  font: italic 700 12px/17px var(--font-forum-ui);
}





.emo-guestbook-standard,
.emo-roles-standard,
.emo-shop-standard,
.emo-awards-standard{
  margin-top: 24px;
  font: normal var(--font-size-base)/1.5 var(--font-main);
}

.emo-guestbook__panel {
  left: 50.789px;
  width: 355px;
  height: 126px;
  padding: 9px 16px 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 9px;
  line-height: 1.4;
}

.emo-guestbook__panel--roles {
  top: 65.875px;
}
.emo-guestbook__panel--faces {
  top: 233.125px;
}

.emo-guestbook__panel::-webkit-scrollbar {
  width: 5px;
}


#pun-viewtopic .emo-guestbook__panel-title {
  position: static;
  left: auto;
  width: auto;
  height: auto;
  margin: 0 0 4px;
  padding: 0 0 3px;
  overflow: visible;
  font: 700 12px/14px var(--font-forum-ui);
  text-align: center;
  text-transform: uppercase;
}

.emo-guestbook__group + .emo-guestbook__group {
  margin-top: 6px;
  padding-top: 4px;
}

#pun-viewtopic .emo-guestbook__group-title {
  margin: 0 0 5px;
  font: italic 300 12px/14px var(--font-forum-ui);
  text-align: center;
  text-transform: lowercase;
}

.emo-guestbook__group-content {
  margin: 0;
  line-height: 1.45;
}

.emo-guestbook__group-content strong {
  display: inline-block;
  padding: 0 7px;
  font-weight: 700;
}





/* =========================================================
   OCCUPIED ROLES
   Cards are created from repeated [roles_card] sections by roles-list.js.
   The grid shows three columns and grows with the filtered card list.
   ========================================================= */

.emo-roles-post .post-box {
  padding: 28px 18px 48px;
}

.emo-roles-list,
.emo-shop,
.emo-awards-request{
  box-sizing: border-box;
  width: 100%;
  padding: 4px 10px 10px;
  font-family: var(--font-forum-ui);
}

.emo-roles-list__title {
  position: static;
  left: auto;
  width: auto;
  height: auto;
  margin: 0 0 14px;
  padding: 0;
  overflow: visible;
  font: normal 17px/1.25 var(--font-forum-title);
  letter-spacing: .04em;
  text-align: center;
  text-transform: uppercase;
}

.emo-roles-list__controls {
  display: flex;
  align-items: var(--roles-controls-align, center);
  flex-direction: var(--roles-controls-direction, row);
  gap: 10px;
  margin: 0 0 14px;
}

.punbb .emo-roles-list__search {
  flex: 1 1 var(--roles-search-basis, 240px);
  box-sizing: border-box;
  width: var(--roles-search-width, auto);
  min-width: var(--roles-search-min-width, 160px);
  height: 26px;
  margin: 0;
  padding: 4px 11px 5px;
  font: normal var(--font-size-xs)/15px var(--font-forum-ui);
  letter-spacing: .04em;
}





.emo-roles-list__filters {
  display: flex;
  flex: 0 0 auto;
  width: var(--roles-filters-width, auto);
  gap: 5px;
  padding: var(--roles-filters-padding, 0);
  overflow-x: var(--roles-filters-overflow, visible);
}

.emo-roles-list__filter {
  flex: var(--roles-filter-flex, 0 1 auto);
  min-width: 34px;
  min-height: 26px;
  margin: 0;
  padding: 3px 9px 4px;
  font: var(--ui-action-font);
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
}





.emo-roles-list__grid {
  --roles-card-height: 152px;
  --roles-card-gap: 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: var(--roles-card-height);
  gap: var(--roles-card-gap);
}

.emo-roles-list__grid.is-empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

.emo-roles-list__empty {
  margin: 0;
  font-size: var(--font-size-sm);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.emo-role-card {
  box-sizing: border-box;
  min-width: 0;
  padding: 10px;
  overflow: hidden;
}

.emo-role-card__inner {
  display: grid;
  grid-template-columns: 98px minmax(0, 1fr);
  gap: 12px;
  box-sizing: border-box;
  height: 100%;
  padding: 10px;
  overflow: hidden;
}

.emo-roles-list__grid > .emo-role-card {
  padding: 8px;
}

.emo-roles-list__grid .emo-role-card__inner {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 10px;
  padding: 8px;
}

.emo-roles-list__grid .emo-role-card__details {
  font-size: 9px;
  line-height: 1.2;
}

.emo-roles-list__grid
  .emo-role-card__body > :not(.emo-role-card__details) {
  flex-shrink: 0;
}

.emo-role-card__media {
  position: relative;
  min-width: 0;
  height: 100%;
  overflow: hidden;
}

.emo-roles-list__grid .emo-role-card__media {
  align-self: start;
  height: 96px;
}

.emo-role-card__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}



.emo-role-card__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

.emo-role-card__headline {
  display: flex;
  flex-wrap: wrap;
  gap: 0 5px;
  min-width: 0;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.emo-role-card__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emo-role-card__age {
  flex: 0 0 auto;
}

.emo-role-card__affiliations {
  display: flex;
  align-items: baseline;
  gap: 3px;
  min-height: 14px;
  margin-top: 1px;
}

.emo-role-card__icon {
  font-size: 1.08em;
  line-height: 1;
}

.emo-role-card__separator {
  margin: 0 2px;
}

.emo-role-card__details,
.emo-role-card__face {
  margin: 1px 0 0;
  padding: 0;
  font-size: inherit !important;
}

.emo-role-card__details {
  display: block;
  min-height: 0;
  max-height: 3lh;
  overflow-x: hidden;
  overflow-y: auto;
  overflow-wrap: anywhere;
  white-space: normal;
}

.emo-role-card__face {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emo-role-card__link {
  box-sizing: border-box;
  width: min(100%, 150px);
  min-height: 18px;
  margin-top: auto;
  padding: 2px 12px 3px;
  align-self: flex-end;
  font: var(--ui-action-font);
  line-height: 11px;
  text-align: center;
}

.emo-roles-list__grid .emo-role-card__link {
  align-self: center;
}



@media (max-width: 760px) {
  .emo-roles-list {
  --roles-controls-align: stretch;
  --roles-controls-direction: column;
  --roles-search-basis: auto;
  --roles-search-width: 100%;
  --roles-search-min-width: 0;
  --roles-filters-width: 100%;
  --roles-filters-padding: 2px 1px;
  --roles-filters-overflow: auto;
  --roles-filter-flex: 0 0 auto;
  padding-inline: 0;
}

  .emo-roles-list__grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
  }

@media (max-width: 480px) {
  .emo-role-card__inner {
  grid-template-columns: 82px minmax(0, 1fr);
  gap: 9px;
  padding: 8px;
}

  .emo-roles-list__grid {
  grid-template-columns: minmax(0, 1fr);
}

  .emo-role-card__link {
  width: 100%;
}
  }

/* =========================================================
   SHOP
   The catalog and interface copy are read from [shop_*] sections by shop.js.
   ========================================================= */

#pun-viewtopic .emo-shop-post .post-box {
  padding: 28px 18px 48px;
}



.emo-shop__header {
  max-width: 720px;
  margin: 0 auto 38px;
  text-align: center;
}

#pun-viewtopic .emo-shop__title {
  position: static;
  left: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  font: normal 18px/1.25 var(--font-forum-title);
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

#pun-viewtopic .emo-shop__description,
#pun-viewtopic .emo-awards-request__description{
  margin: 10px 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.emo-shop__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.emo-shop__panel {
  position: relative;
  min-width: 0;
  padding: 32px 14px 14px;
}



#pun-viewtopic .emo-shop__panel-title {
  position: absolute;
  top: -25px;
  right: -2px;
  box-sizing: border-box;
  width: min(64%, 190px);
  min-height: 27px;
  margin: 0;
  padding: 7px 14px 6px;
  font: normal 12px/14px var(--font-forum-title);
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
}

#pun-viewtopic .emo-shop__panel--purchase .emo-shop__panel-title {
  right: auto;
  left: -2px;
}

.emo-shop__items {
  display: grid;
  gap: 3px;
}

.emo-shop__item {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 34px;
  padding: 4px 5px 4px 4px;
  transition: background-color .15s ease;
}



.emo-shop__item-price {
  display: grid;
  min-height: 25px;
  padding: 4px 5px;
  place-items: center;
  font: bold 11px/1 var(--font-forum-title);
}

.emo-shop__item-name {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: var(--font-size-sm);
  line-height: 1.3;
}

.emo-shop__quantity {
  display: grid;
  grid-template-columns: 24px 26px 24px;
  min-height: 25px;
  overflow: hidden;
}

.emo-shop__quantity-button,
.emo-shop__quantity-value {
  display: grid;
  min-width: 0;
  padding: 0;
  place-items: center;
  font: normal 12px/1 var(--font-forum-ui);
}

.emo-shop__quantity-button {
  cursor: pointer;
}





.emo-shop__quantity-button:disabled {
  cursor: default;
}

.emo-shop__quantity-value {
  font-size: var(--font-size-sm);
}

.emo-shop__summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 18px;
  overflow: hidden;
}

.emo-shop__summary-item {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 11px 10px;
  text-align: center;
}

.emo-shop__summary-label {
  overflow: hidden;
  font-size: var(--font-size-xs);
  letter-spacing: .05em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.emo-shop__summary-value {
  font: normal 14px/1.2 var(--font-forum-title);
}



.emo-shop__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.emo-shop__button {
  min-height: 28px;
  padding: 5px 16px 6px;
  font: normal var(--font-size-sm)/14px var(--font-forum-ui);
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
}









.emo-shop__button:disabled {
  cursor: default;
}

#pun-viewtopic .emo-shop__status,
.emo-awards-request__status{
  min-height: 16px;
  margin: 8px 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  text-align: right;
}



@media (max-width: 760px) {
  .emo-shop {
  padding-inline: 0;
}

  .emo-shop__header {
  margin-bottom: 34px;
}

  .emo-shop__columns {
  grid-template-columns: minmax(0, 1fr);
  gap: 42px;
}



  #pun-viewtopic .emo-shop__panel--purchase .emo-shop__panel-title {
  right: -2px;
  left: auto;
}
  }

@media (max-width: 480px) {
  .emo-shop__panel {
  padding-inline: 8px;
}

  .emo-shop__item {
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 6px;
}

  .emo-shop__quantity {
  grid-template-columns: 22px 24px 22px;
}

  .emo-shop__summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .emo-shop__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .emo-shop__button {
  padding-inline: 8px;
}
  }

/* =========================================================
   START: SHARED PLAYER PROFILE CARD

   Ýòîò áëîê îòâå÷àåò çà êàðòî÷êó èãðîêà â ñîîáùåíèè è íà ñòðàíèöå ïðîôèëÿ.
   Åñëè â áóäóùåì ìåíÿåì êàðòî÷êó öåëèêîì — çàìåíÿåì CSS îò
   START: SHARED PLAYER PROFILE CARD
   äî
   END: SHARED PLAYER PROFILE CARD.

   Ñâÿçàííûé JS: profile-fields.js

   Ïîëÿ ïðîôèëÿ:
   fld1 — òåêñòóðà ò¸ìíîé ðàìêè
   fld2 — èêîíêà â êðóãëîì áåéäæå ñíèçó
   fld3 — ññûëêà ïîä àâàòàðîì
   fld4 — ñâîáîäíàÿ HTML-ïîäïèñü
   fld5 — òðåòüÿ ñòàòèñòèêà â íèæíåé ñòðîêå
   fld8 — áàëàíñ ïîñëå fld5, ñêðûòûé ïðè íóëåâîì çíà÷åíèè
   ========================================================= */

/* ---------------------------------------------------------
   PROFILE 1 — OUTER WRAPPER
   Âíåøíèé êîíòåéíåð. Îí ïðîçðà÷íûé, ÷òîáû online-status ìîæíî
   áûëî âûíåñòè ÍÈÆÅ ÷¸ðíîé ðàìêè.
   --------------------------------------------------------- */

#pun-viewtopic #pun-main > .topic > .post .post-author {
  float: left;
  width:224px;
  min-height: 0;
  margin:0 0 0 2px;
  padding: 0;
  overflow: visible;
  --profile-panel:var(--message-profile-panel);
}

#pun-profile #viewprofile #profile-left.emo-profile-page-card-host {
  width: 257px;
  padding: 0 18px 18px;
  vertical-align: top;
}

#pun-profile #pun-main:has(#viewprofile) > h1 {
  display: none;
}

#pun-profile #viewprofile #profile-left.emo-profile-page-card-host
  > .emo-profile-card {
  width: 220px;
  margin: 0 auto;
}

#pun-profile #viewprofile #profile-right li {
  padding-left: 18em;
}

#pun-profile #viewprofile #profile-right li > span {
  width: 16em;
  margin-left: -18em;
  white-space: nowrap;
}

#pun-profile #viewprofile .emo-profile-page-edit {
  width: 220px;
  margin: 26px auto 0;
  padding: 0;
  text-align: center;
}

#pun-profile #viewprofile .emo-profile-page-edit strong {
  display: inline;
  padding: 0;
}

/* The native profile list paints and offsets every li/span. Inside the shared
   player card those platform styles must not alter the viewtopic component. */


#pun-profile .emo-profile-page-card-host .emo-profile-card > ul > li span {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  font-weight: inherit;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) ul,
:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) p {
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

/* ---------------------------------------------------------
   PROFILE 2 — BLACK CARD / fld1
   Íåïîñðåäñòâåííî ÷¸ðíàÿ ðàìêà êàðòî÷êè.
   fld1 èñïîëüçóåòñÿ êàê å¸ òåêñòóðà.
   --------------------------------------------------------- */

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-card {
  position: relative;
  width: 100%;
  padding:27px 11px 38px 10px;
  overflow: visible;
}

/* Guest posts have no custom profile texture. Keep the shared card frame and
   use the standard dark texture as its fallback. */


/* Country flags and technical user-agent data are not part of the player-card
   design. Keep them available elsewhere, but hide them inside post authors. */
#pun-viewtopic #pun-main > .topic > .post .post-author :is(.flag-i, .pa-ua) {
  display: none;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-card::before {
  position: absolute;
  z-index: 1;
  content:none;
  top: 52px;
  right: 12px;
  bottom: 70px;
  left: 12px;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-card::after {
  position: absolute;
  z-index: 0;
  content:none;
  top: 18px;
  right: 6px;
  bottom: 18px;
  left: 6px;
  pointer-events: none;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host)
  .emo-profile-card:not(:has(.pa-fld4))::before {
  bottom: 68px;
}

/* Guests have no lower profile fields: keep their avatar inside the complete
   light inset, followed by the card's dark outer frame. */
#pun-viewtopic #pun-main > .topic > .post[data-group-id="3"]
  .post-author .emo-profile-card::before {
  bottom: 18px;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-card > ul,
:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-card > p {
  position: relative;
  z-index: 2;
} 

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-card > ul {
  list-style: none;
  padding:0;
  margin:0;
}

/* Offline marker is used in post cards only. */
#pun-viewtopic #pun-main > .topic > .post .post-author .emo-profile-offline-sticker {
  position: absolute;
  z-index: 4;
  top:34px;
  left:16.5px;
  display: block;
  width:14px;
  height:14px;
  margin: 0;
  pointer-events: none;
  content:var(--profile-offline-image);
}

/* Óíèâåðñàëüíûé êëàññ äëÿ èñõîäíûõ ïîëåé, êîòîðûå JS çàìåíèë
   íàøåé êàñòîìíîé ðàçìåòêîé. */
.emo-profile-source-hidden,
.punbb :is(.pa-gifts, #pa-gifts),
#pun-profile #profile-gifts,
.punbb .pa-ua,
#pun-profile #pa-ua {
  display: none !important;
}

/* ---------------------------------------------------------
   PROFILE 3 — PLAYER NAME
   Èìÿ èãðîêà íàõîäèòñÿ íà ñâåòëî-ôèîëåòîâîé âåðõíåé ðàìêå.
   --------------------------------------------------------- */

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .pa-author {
  display: flex;
  height:35px;
  align-items: center;
  justify-content: center;
  width:100%;
  margin:0;
  padding:0;
  font:italic 400 14px/35px var(--font-forum-title);
  letter-spacing:0;
  text-align: center;
  text-transform:uppercase;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .pa-author :is(a, strong) {
  display: inline;
  padding: 0;
  font: inherit;
}

/* ---------------------------------------------------------
   PROFILE 4 — PLAYER STATUS / TITLE
   Íàïðèìåð: «Àäìèíèñòðàòîð».
   --------------------------------------------------------- */

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .pa-title {
  margin:-6.5px 0 0;
  padding:0 4px;
  font-size: 9px;
  line-height: 1.3;
  font-weight: normal;
  text-align: center;
  min-height:24.5px;
  font:400 10px/13px var(--font-forum-ui);
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .pa-title strong {
  display: inline;
  padding: 0;
  font: inherit;
}

/* ---------------------------------------------------------
   PROFILE 5 — AVATAR
   --------------------------------------------------------- */

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .pa-avatar {
  margin: 0;
  padding: 0;
  text-align: center;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .pa-avatar > div {
  padding: 0;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .pa-avatar img {
  display: block;
  max-width: 100%;
  height:180px;
  margin: 0 auto;
  width:180px;
  object-fit:cover;
}

#pun-viewtopic #pun-main > .topic > .post[data-group-id="3"]
  .post-author .pa-avatar {
  padding-bottom: 8px;
}

/* ---------------------------------------------------------
   PROFILE 6 — CUSTOM FIELD LABELS
   Íàçâàíèÿ fld2–fld5 è fld8 íå ïîêàçûâàåì âíóòðè êàðòî÷êè.
   --------------------------------------------------------- */

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host)
:is(.pa-fld2, .pa-fld3, .pa-fld4, .pa-fld5, .pa-fld8) .fld-name {
  display: none;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-value-field {
  display: block;
  overflow-wrap: anywhere;
}

/* ---------------------------------------------------------
   PROFILE 7 — fld3: LINK UNDER AVATAR
   Ïðèìåð: ÂÀËÅÐÀ.
   Ññûëêà èñïîëüçóåò äåêîðàòèâíûé Baron Neue èç øðèôòîâ ôîðóìà.
   --------------------------------------------------------- */

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .pa-fld3 {
  margin: 0;
  padding:11.5px 4px;
  font:400 14px/18px var(--font-forum-title);
  letter-spacing:0;
  text-align: center;
  text-transform:lowercase;
  min-height:41px;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .pa-fld3 a {
  font: inherit;
}



/* ---------------------------------------------------------
   PROFILE 8 — fld4: FREE HTML SIGNATURE
   Ãîðèçîíòàëüíàÿ ïëàøêà ñ áîðäåðîì ñâåðõó è ñíèçó.
   Âûñîòà àâòîìàòè÷åñêàÿ è çàâèñèò îò êîëè÷åñòâà òåêñòà.
   --------------------------------------------------------- */

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .pa-fld4 {
  width:100%;
  height: auto;
  min-height:34px;
  margin:0;
  padding:8px 4px;
  font-size: var(--font-size-xs);
  line-height: 1.45;
  font-weight: normal;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  font:600 10px/17px var(--font-forum-ui);
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .pa-fld4 b,
:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .pa-fld4 strong {
  display: inline;
  padding: 0;
  font-weight: bold;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .pa-fld4 i,
:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .pa-fld4 em {
  font-style: italic;
}







/* ---------------------------------------------------------
   PROFILE 9 — BOTTOM STATS BAR

   Ñâåòëàÿ ïîëîñêà ñòàòèñòèêè íà÷èíàåòñÿ ÑÐÀÇÓ ïîñëå fld4.
   Ïî áîêàì îñòà¸òñÿ âèäåí ÷¸ðíûé ôîí êàðòî÷êè.

   ÂÀÆÍÎ:
   çäåñü ñïåöèàëüíî íåò âåðõíåãî padding —
   íà ìîêàïå ìåæäó fld4 è ïîëîñêîé èêîíîê íåò
   îòäåëüíîé ÷¸ðíîé ïîëîñû.
   --------------------------------------------------------- */

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-bottom {
  position: relative;
  display: block;
  width:100%;
  margin:0;
  padding:0;
  list-style: none;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-stats {
  display: flex;
  align-items:flex-start;
  justify-content: center;
  gap:25.281px;
  width: 100%;
  min-height:49px;
  margin: 0;
  padding:10px 9px 16px;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host)
  .emo-profile-stats:has(.emo-profile-stat-balance) {
  gap:25.281px;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-stat {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap:2.107px;
  min-width: 0;
  padding: 0;
  white-space: nowrap;
  flex-direction:column;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-stat-icon {
  display:none;
  width: auto;
  max-width: 21px;
  height: auto;
  max-height: 18px;
  margin: 0;
  object-fit: contain;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-stat-value {
  font:500 7.374px/1.44 Inter, sans-serif;
  letter-spacing: 0;
}

/* ---------------------------------------------------------
   PROFILE 10 — fld2: ROUND BOTTOM BADGE

   Ìàøèíêà íàõîäèòñÿ íèæå ïîëîñû ñòàòèñòèêè.
   Êðóã ñèäèò íåïîñðåäñòâåííî ó íèæíåé ãðàíèöû
   ÷¸ðíîé êàðòî÷êè, êàê íà ìîêàïå.
   --------------------------------------------------------- */

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-bottom-badge {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom:-29px;
  display: flex;
  align-items: center;
  justify-content: center;
  width:40px;
  height:40px;
  padding: 0;
  font: inherit;
  cursor: pointer;
  appearance: none;
  transform: translateX(-50%);
  transition: transform .18s ease;
}

:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-bottom-badge:is(:hover, :focus-visible) {
  transform: translateX(-50%) scale(1.08);
}



:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-bottom-badge-image {
  display: block;
  width:35px;
  height:35px;
  margin: 0;
  object-fit: contain;
}


:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-offline-sticker[data-presence="online"] {
  content: var(--profile-online-image);
}
:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-bottom-badge-image[data-default-artwork] {
  content: var(--profile-badge-image);
}
:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) .emo-profile-stat::before {
  content: "";
  width: 10px;
  height: 10px;
  mask: var(--profile-stat-image) center / contain no-repeat;
}
:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) :is(.emo-profile-stat-posts, .emo-profile-stat:has(> .emo-profile-stat-icon[src$="/15078.png"])) {
  --profile-stat-image: url("https://forumstatic.ru/files/001c/c4/9a/68995.svg?v=1");
}
:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) :is(.emo-profile-stat-respect, .emo-profile-stat:has(> .emo-profile-stat-icon[src$="/41803.png"])) {
  --profile-stat-image: url("https://forumstatic.ru/files/001c/c4/9a/93558.svg?v=1");
}
:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) :is(.emo-profile-stat-fld5, .emo-profile-stat:has(> .emo-profile-stat-icon[src$="/74157.png"])) {
  --profile-stat-image: url("https://forumstatic.ru/files/001c/c4/9a/14527.svg?v=1");
}
/* Older editor previews identify this statistic by its original image URL. */
:is(#pun-viewtopic #pun-main > .topic > .post .post-author, #pun-profile .emo-profile-page-card-host) :is(.emo-profile-stat-balance, .emo-profile-stat:has(> .emo-profile-stat-icon[src$="/99954.png"])) {
  --profile-stat-image: url("https://forumstatic.ru/files/001c/c4/9a/66382.svg?v=1");
}

/* fld2 profile details modal */

.emo-profile-details-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, visibility .24s ease;
}

.emo-profile-details-modal.is-open {
  visibility: visible;
  pointer-events: auto;
}

.emo-profile-details-dialog {
  position: relative;
  width: min(720px, calc(100vw - 32px), calc((100vh - 32px) * 1.333));
  aspect-ratio: 4 / 3;
  overflow: hidden;
  transform: translate(
      var(--emo-profile-details-from-x, -120px),
      var(--emo-profile-details-from-y, 0)
    ) scale(.82);
  transform-origin:
    var(--emo-profile-details-origin-x, left)
    var(--emo-profile-details-origin-y, center);
  transition: opacity .24s ease, transform .38s cubic-bezier(.2, .8, .2, 1);
}

.emo-profile-details-modal.is-open .emo-profile-details-dialog {
  transform: translateY(0) scale(1);
}

.emo-profile-details-close {
  position: absolute;
  z-index: 8;
  top: 10px;
  right: 10px;
  display: flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  padding: 0 0 2px;
  font: normal 22px/1 var(--font-main);
  cursor: pointer;
  transition: color .16s ease, opacity .16s ease, transform .16s ease;
}

.emo-profile-details-close:is(:hover, :focus-visible) {
  transform: rotate(7deg) scale(1.05);
}

.emo-profile-details-close::before {
  content: "×";
}

/* Technical IDs stay in profile fields; scripts render their public UI. */
.bb-game-topic-field-source,
.emo-profile-role-ids-source {
  display: none;
}

.emo-profile-details-dialog > .game-topics {
  position: absolute;
  z-index: 3;
  top: 9%;
  right: 19%;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-sizing: border-box;
  width: 31%;
  height: 25%;
  padding: 8px 10px 10px;
  overflow-y: auto;
}

.emo-profile-details-dialog > .game-topics::-webkit-scrollbar {
  width: 4px;
}



.emo-profile-details-dialog .game-topic {
  display: grid;
  gap: 1px;
  padding: 5px 6px 6px;
  font-family: var(--font-forum-ui);
}

.emo-profile-details-dialog .game-topic__title {
  overflow: hidden;
  font-size: clamp(8px, 1.35vw, 11px);
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emo-profile-details-dialog .game-topic__meta {
  grid-column: 1 / -1;
  font-size: clamp(6px, 1.05vw, 8px);
  line-height: 1.3;
}

.emo-profile-details-dialog .game-topics__state {
  margin: auto 0;
  padding: 8px 4px;
  font: normal clamp(7px, 1.2vw, 10px)/1.35 var(--font-forum-ui);
  letter-spacing: .4px;
  text-align: center;
}

.emo-profile-details-roles {
  position: absolute;
  z-index: 3;
  top: 1.5%;
  left: 3%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: min-content;
  align-items: start;
  gap: clamp(4px, .8vw, 7px);
  width: 43%;
  max-height: 53%;
  padding: 1% 2% 3%;
  overflow-x: hidden;
  overflow-y: auto;
}

.emo-profile-details-roles::-webkit-scrollbar {
  width: 4px;
}

.emo-profile-details-role {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-self: center;
  width: min(100%, 84px);
  padding: 0;
}

.emo-profile-details-role-portrait {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 169 / 175;
}

.emo-profile-details-role-portrait::after {
  position: absolute;
  z-index: 2;
  inset: 0;
  content: "";
  pointer-events: none;
}

.emo-profile-details-role-name {
  display: block;
  width: calc(100% - 12px);
  margin-top: 3px;
  padding: 5px 8px 6px;
  overflow: hidden;
  font: normal var(--font-size-xs)/1.3 var(--font-main);
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  overflow-wrap: anywhere;
  white-space: normal;
}

.emo-profile-details-role-avatar {
  position: absolute;
  z-index: 1;
  inset: 13% 14% 14%;
  display: block;
  width: 72%;
  height: 73%;
  margin: 0;
  object-fit: cover;
  transition: filter .18s ease, transform .18s ease;
}

.emo-profile-details-role:is(:hover, :focus-visible) .emo-profile-details-role-avatar {
  transform: scale(1.03);
}



.emo-profile-details-awards {
  position: absolute;
  z-index: 5;
  right: calc(5% + 10px);
  bottom: 4%;
  left: calc(4% + 10px);
  display: flex;
  box-sizing: border-box;
  height: 48%;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0;
  padding: 0 26px 4px 56px;
  overflow-x: auto;
  overflow-y: hidden;
  pointer-events: auto;
}

.emo-profile-details-awards::-webkit-scrollbar {
  height: 4px;
}



.emo-profile-details-awards[hidden] {
  display: none;
}

.emo-profile-details-award {
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  height: 48%;
  aspect-ratio: 1;
  margin: 0 0 0 -30px;
  padding: 0;
  cursor: help;
  transform: rotate(var(--emo-award-rotation, 0deg));
  transform-origin: 50% 100%;
  transition: filter .16s ease, transform .16s ease;
}

.emo-profile-details-award-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.emo-profile-details-award:is(:hover, :focus-visible) {
  z-index: 7;
  transform: translateY(-6px) rotate(0) scale(1.03);
}

.emo-profile-details-award-tooltip {
  position: absolute;
  z-index: 9;
  bottom: calc(100% + 8px);
  left: 0;
  display: grid;
  grid-template-columns: 56px minmax(120px, 1fr);
  gap: 10px;
  width: max-content;
  max-width: min(280px, 68vw);
  padding: 12px;
  visibility: hidden;
  pointer-events: none;
  transform: translate(0, 8px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

.emo-profile-details-award-tooltip > img {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.emo-profile-details-award-tooltip-text {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  font: normal clamp(8px, 1.15vw, 10px)/1.4 var(--font-forum-ui);
  text-align: left;
}

.emo-profile-details-award-tooltip-text strong {
  font: normal var(--font-size-category-title)/var(--line-height-category-title)
    var(--font-forum-ui);
  letter-spacing: var(--letter-spacing-category-title);
  text-transform: uppercase;
}



.emo-profile-details-award:is(:hover, :focus-visible)
  .emo-profile-details-award-tooltip {
  visibility: visible;
  transform: translate(0, 0);
}

.emo-profile-details-award:not(:first-child):last-child
  .emo-profile-details-award-tooltip {
  right: 0;
  left: auto;
}

/* ---------------------------------------------------------
   PROFILE DETAILS — LUCKY TICKETS
   The list is hardcoded by user ID in profile-lucky-tickets.js.
   --------------------------------------------------------- */

.emo-profile-details-ticket-trigger {
  position: absolute;
  z-index: 13;
  top: 28%;
  left: -1%;
  display: block;
  width: clamp(52px, 10%, 80px);
  padding: 0;
  cursor: pointer;
  transform: rotate(-7deg);
  transition: filter .16s ease, transform .16s ease;
}

.emo-profile-details-ticket-trigger img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.emo-profile-details-ticket-trigger:is(:hover, :focus-visible) {
  transform: rotate(-2deg) translateY(-4px) scale(1.04);
}



.emo-profile-details-tickets {
  position: absolute;
  z-index: 14;
  top: 29%;
  left: 7%;
  box-sizing: border-box;
  width: min(43%, 320px);
  max-height: 48%;
  padding: 22px 24px 20px;
  overflow-x: hidden;
  overflow-y: auto;
}

.emo-profile-details-tickets::-webkit-scrollbar {
  width: 4px;
}



.emo-profile-details-tickets__title {
  margin: 0 24px 13px 0;
  font: 700 clamp(7px, 1vw, 9px)/1.3 var(--font-forum-ui);
  letter-spacing: 1px;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}

.emo-profile-details-tickets__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  padding: 0 0 2px;
  font: normal 18px/1 var(--font-main);
  cursor: pointer;
}

.emo-profile-details-tickets__close::before {
  content: "×";
}



.emo-profile-details-tickets__list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.emo-profile-details-tickets__item,
.emo-profile-details-tickets__empty {
  margin: 0;
  font: normal clamp(7px, .95vw, 8px)/1.45 var(--font-forum-ui);
  overflow-wrap: anywhere;
  word-break: break-word;
}

.emo-profile-details-tickets__item {
  padding-left: 14px;
}

.emo-profile-details-tickets__item::before {
  content: "—";
  display: inline-block;
  width: 14px;
  margin-left: -14px;
}



@media screen and (max-width: 540px) {
  .emo-profile-details-modal {
  padding: 8px;
}

  .emo-profile-details-dialog {
  width: min(calc(100vw - 16px), calc((100vh - 16px) * 1.333));
}

  .emo-profile-details-close {
  top: 5px;
  right: 5px;
  width: 22px;
  height: 22px;
  font-size: 18px;
}

  .emo-profile-details-dialog > .game-topics {
  padding: 5px 6px;
}

  .emo-profile-details-role-name {
  width: 100%;
}

  .emo-profile-details-award-tooltip {
  grid-template-columns: 40px minmax(72px, 1fr);
  gap: 6px;
  padding: 6px;
}

  .emo-profile-details-award-tooltip > img {
  width: 40px;
  height: 40px;
}

  .emo-profile-details-ticket-trigger {
  top: 27%;
  left: -2%;
  width: 14%;
}

  .emo-profile-details-tickets {
  top: 28%;
  left: 6%;
  width: 48%;
  max-height: 49%;
  padding: 16px 18px 15px;
}
}

/* =========================================================
   AWARD REQUESTS
   The catalog is loaded from /mod/awards/ by awards.js.
   ========================================================= */

#pun-viewtopic .emo-awards-post .post-box {
  padding: 28px 18px 48px;
}



.emo-awards-request__header {
  max-width: 720px;
  margin: 0 auto 28px;
  text-align: center;
}

#pun-viewtopic .emo-awards-request__title {
  margin: 0;
  font: normal 20px/1.25 var(--font-forum-title);
  letter-spacing: .08em;
  text-transform: uppercase;
}



.emo-awards-request__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.emo-awards-request__item {
  display: grid;
  grid-template-columns: auto 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 9px;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}





.emo-awards-request__item input {
  width: 17px;
  height: 17px;
  margin: 0;
}

.emo-awards-request__image {
  width: 64px;
  height: 64px;
  object-fit: contain;
}

.emo-awards-request__body {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.emo-awards-request__body strong {
  overflow-wrap: anywhere;
  font-size: var(--font-size-base);
}

.emo-awards-request__body small {
  line-height: 1.35;
}

.emo-awards-request__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 14px;
}





@media (max-width: 760px) {
  .emo-awards-request {
  padding-inline: 0;
}

  .emo-awards-request__items {
  grid-template-columns: minmax(0, 1fr);
}
  }

@media (max-width: 480px) {
  #pun-viewtopic .emo-awards-post .post-box {
  padding-inline: 8px;
}

  .emo-awards-request__item {
  grid-template-columns: auto 56px minmax(0, 1fr);
}

  .emo-awards-request__image {
  width: 56px;
  height: 56px;
}

  .emo-awards-request__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .emo-awards-request .emo-shop__button {
  padding-inline: 8px;
}
  }

/* Mobile post card: compact two-column layout inside the existing component.
   Rusff's later /style/mobile.css hides fld3 and limits avatars to 50px, so
   only those conflicting declarations need protected values here. */
@media screen and (max-width: 540px) {
  #pun #pun-viewtopic #pun-main > .topic > .post .post-author {
  float:none;
  width:100%;
  margin:0;
}

  #pun #pun-viewtopic #pun-main > .topic > .post .post-author .emo-profile-card {
  box-sizing: border-box;
  padding: 14px 14px 32px;
  min-height:0;
}

  #pun #pun-viewtopic #pun-main > .topic > .post .post-author
    .emo-profile-card::before {
  top: 14px;
  right: 14px;
  bottom: 32px;
  left: 14px;
}

  #pun #pun-viewtopic #pun-main > .topic > .post .post-author
    .emo-profile-card::after {
  top: 14px;
  right: 14px;
  bottom: 32px;
  left: 14px;
}

  #pun #pun-viewtopic #pun-main > .topic > .post .post-author
    .emo-profile-card > ul {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(105px, 38%);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  column-gap: 10px;
  row-gap: 2px;
  box-sizing: border-box;
  min-height: 145px;
  padding: 10px 12px 12px;
}

  #pun #pun-viewtopic #pun-main > .topic > .post .post-author
    .emo-profile-offline-sticker {
  top: 24px;
  right: 24px;
  left: auto;
}

  /* Suppress the online dot injected by the platform mobile stylesheet. */
  #pun #pun-viewtopic #pun-main > .topic > .post .post-author .pa-author::after {
  display: none;
}

  #pun #pun-viewtopic #pun-main > .topic > .post .post-author .pa-author {
  display: block;
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  height: auto;
  min-width: 0;
  width: auto;
  margin: 0;
  padding: 0 20px 6px 0 !important;
  overflow: hidden;
  font-size: clamp(11px, 3.5vw, 14px);
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}



  #pun #pun-viewtopic #pun-main > .topic > .post .post-author .pa-title {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  padding: 4px 0 !important;
  font-size: clamp(9px, 2.8vw, 12px);
  line-height: 1.25;
  text-align: center;
}

  #pun #pun-viewtopic #pun-main > .topic > .post .post-author .pa-avatar {
  grid-column: 2;
  grid-row: 2 / 6;
  align-self: start;
  float: none;
  min-width: 0;
  margin: 0;
  padding: 0;
}

  #pun #pun-viewtopic #pun-main > .topic > .post .post-author .pa-avatar img {
  width: 100%;
  max-width: 145px;
  height: auto;
  max-height: none;
  aspect-ratio: 1;
  margin: 0 auto;
  object-fit: cover;
}

  #pun #pun-viewtopic #pun-main > .topic > .post .post-author .pa-fld3 {
  display: block !important;
  grid-column: 1;
  grid-row: 3;
  align-self: start;
  min-width: 0;
  padding: 4px 0;
  text-align: center;
}

  #pun #pun-viewtopic #pun-main > .topic > .post .post-author .pa-fld3 a {
  font-size: clamp(9px, 2.8vw, 12px);
  line-height: 1.25;
}

  #pun #pun-viewtopic #pun-main > .topic > .post .post-author .pa-fld4 {
  display: -webkit-box !important;
  grid-column: 1;
  grid-row: 4;
  align-self: start;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  max-height: 32px;
  margin: 4px 0 0;
  padding: 0;
  overflow: hidden;
  font-size: clamp(9px, 2.8vw, 11px);
  line-height: 15px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

  #pun #pun-viewtopic #pun-main > .topic > .post .post-author
    .emo-profile-bottom {
  position: static;
  grid-column: 1;
  grid-row: 5;
  align-self: start;
  width: auto;
  margin: 0;
  padding: 0;
}

  #pun #pun-viewtopic #pun-main > .topic > .post .post-author
    .emo-profile-stats {
  flex-wrap:wrap;
  justify-content: center;
  gap: clamp(7px, 2.5vw, 12px);
  min-height: 0;
  padding: 8px 0 0;
}

  #pun #pun-viewtopic #pun-main > .topic > .post .post-author
    .emo-profile-stat {
  gap: 3px;
}

  #pun #pun-viewtopic #pun-main > .topic > .post .post-author
    .emo-profile-stat-icon {
  max-width: 21px;
  max-height: 18px;
}

  #pun #pun-viewtopic #pun-main > .topic > .post .post-author
    .emo-profile-bottom-badge {
  bottom: -26px;
}
}

@media (prefers-reduced-motion: reduce) {
  .emo-profile-bottom-badge,
  .emo-profile-details-modal,
  .emo-profile-details-dialog,
  .emo-profile-details-role-avatar {
  transition: none;
}
}

/* =========================================================
   END: SHARED PLAYER PROFILE CARD
   ========================================================= */

/* The reactions plugin injects its button styles after the theme. Keep its
   native 26px control, but replace the plus icon and remove the native ring. */
#pun-viewtopic .reaction-picker-button {
  width:24px;
  height:24px;
}

#pun-viewtopic .reaction-picker-button > svg {
  display: none;
}

#pun-viewtopic .reaction-counter {
  width:20px;
  height:20px;
  padding:0;
  flex:0 0 20px;
}



/* The reactions module orders counters by count and then by recency.
   Keep the five most relevant reaction types visible in the post footer. */
#pun-viewtopic .reaction-counters-container > :nth-child(n + 6) {
  display: none;
}

/* =========================================================
   BBCODE — tables, quote, spoiler and code blocks
   ========================================================= */

/* BBCode tables are layout helpers inside a post, not forum data tables. */


.punbb .post-content :is(.quote-box, .spoiler-box, .code-box),
#pun-post #post-preview :is(.quote-box, .spoiler-box, .code-box) {
  --bbcode-frame-border-width: 1px;
  --bbcode-frame-radius:10px;
  --bbcode-frame-margin:0 0 10px;
  --bbcode-frame-padding:11px 12px;
  position: relative;
  box-sizing: border-box;
  width: auto;
  margin: var(--bbcode-frame-margin);
  padding: var(--bbcode-frame-padding);
}

.punbb .post-content :is(.quote-box, .spoiler-box, .code-box) > blockquote,
.punbb .post-content .code-box .scrollbox,
#pun-post #post-preview :is(.quote-box, .spoiler-box) > blockquote,
#pun-post #post-preview .code-box .scrollbox {
  width: 100%;
  margin: 0;
  padding: 0;
}

.punbb .post-content .code-box .scrollbox,
#pun-post #post-preview .code-box .scrollbox {
  height: auto !important;
  max-height: 130px;
  overflow: auto;
}

.punbb .post-content .quote-box > blockquote:has(.spoiler-box),
#pun-post #post-preview .quote-box > blockquote:has(.spoiler-box) {
  overflow: visible;
}

.punbb .post-content .spoiler-box,
#pun-post #post-preview .spoiler-box {
  --bbcode-frame-radius:10px;
  --bbcode-frame-padding:0;
  z-index: 2;
  --bbcode-frame-margin: 0 0 10px;
  --bbcode-frame-border-width: 0;
}

.punbb .post-content .spoiler-box > div:first-child,
#pun-post #post-preview .spoiler-box > div:first-child {
  position:relative;
  z-index: 1;
  display: flex;
  box-sizing: border-box;
  width: auto;
  min-height:26px;
  margin:0;
  padding:5px 12px;
  letter-spacing: .02em;
  align-items: center;
  justify-content:flex-start;
  text-align:left;
  cursor: pointer;
  gap: 5px;
}

/* Quote/code legends and quenta section tabs share one visual recipe. Their
   component rules below only choose layout and the side where the tab sits. */
.punbb .post-content .quote-box > cite, #pun-post #post-preview .quote-box > cite, .punbb .post-content .code-box > strong.legend, #pun-post #post-preview .code-box > strong.legend{
  position:static;
  z-index: 1;
  display: var(--bbcode-tab-display, block);
  box-sizing: border-box;
  width:100%;
  min-width:0;
  height:19px;
  margin: 0;
  padding:2px 12px;
  overflow: visible;
  letter-spacing:0;
  text-align:left;
  left: calc(0px - var(--bbcode-frame-border-width));
}

.punbb .post-content :is(.quote-box:has(> cite), .code-box:has(> strong.legend)),
#pun-post #post-preview :is(.quote-box:has(> cite), .code-box:has(> strong.legend)) {
  --bbcode-frame-radius:10px;
  --bbcode-frame-margin:0 0 10px;
  --bbcode-frame-padding:0;
}

/* A quote/code legend rises above its frame; reserve a visible gap when
   two complete tabbed blocks follow one another. */
.punbb .post-content :is(
  .quote-box:has(> cite),
  .code-box:has(> strong.legend)
) + :is(
  .quote-box:has(> cite),
  .code-box:has(> strong.legend)
),
#pun-post #post-preview :is(
  .quote-box:has(> cite),
  .code-box:has(> strong.legend)
) + :is(
  .quote-box:has(> cite),
  .code-box:has(> strong.legend)
) {
  --bbcode-frame-margin:0 0 10px;
}



.punbb .post-content .code-box > strong.legend,
#pun-post #post-preview .code-box > strong.legend {
  --bbcode-tab-display: flex;
  align-items: center;
  justify-content:flex-start;
  gap: 0;
  user-select: none;
}

.punbb .code-box .emo-code-action {
  appearance: none;
  margin: 0;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.punbb .code-box .emo-code-action + .emo-code-action::before {
  content: "/";
  margin: 0 8px;
}



/* Keep the custom sticker as the only spoiler control. */
.punbb .post-content .spoiler-box > div:first-child img,
.punbb .post-content .spoiler-box > div:first-child button,
.punbb .post-content .spoiler-box > div:first-child input,
.punbb .post-content .spoiler-box > div:first-child [class*="spoiler-toggle"],
.punbb .post-content .spoiler-box > div:first-child [class*="spoiler-button"],
#pun-post #post-preview .spoiler-box > div:first-child img,
#pun-post #post-preview .spoiler-box > div:first-child button,
#pun-post #post-preview .spoiler-box > div:first-child input,
#pun-post #post-preview .spoiler-box > div:first-child [class*="spoiler-toggle"],
#pun-post #post-preview .spoiler-box > div:first-child [class*="spoiler-button"] {
  display: none !important;
}

.punbb .post-content .spoiler-box > blockquote:not(.visible),
#pun-post #post-preview .spoiler-box > blockquote:not(.visible) {
  display: none;
}

.punbb .post-content .spoiler-box:not(:has(> blockquote.visible)),
#pun-post #post-preview .spoiler-box:not(:has(> blockquote.visible)) {
  --bbcode-frame-padding:0;
  --bbcode-frame-border-width: 0;
  --message-bbcode-surface: var(--message-tab);
}

.punbb .post-content .spoiler-box:not(:has(> blockquote.visible)) > div:first-child,
#pun-post #post-preview .spoiler-box:not(:has(> blockquote.visible)) > div:first-child {
  margin-bottom: 0;
}

.punbb .post-content .spoiler-box > div:first-child::before,
#pun-post #post-preview .spoiler-box > div:first-child::before {
  content: "";
  position:static;
  width:16px;
  height:14px;
  z-index:auto;
  pointer-events: auto;
  cursor: pointer;
  flex: 0 0 16px;
}

/* The shared stylesheet also draws a native plus/minus pseudo-control.
   Give the custom sticker rule the same page specificity so that control
   cannot reappear over it. */
:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content .spoiler-box > div:first-child::before,
#pun-post #post-preview .spoiler-box > div:first-child::before,
:is(#pun-viewtopic, #pun-messages, #pun-post) #pun-main .post-content .spoiler-box > div:first-child.visible::before,
#pun-post #post-preview .spoiler-box > div:first-child.visible::before {
  width:16px;
  height:14px;
  transform: none;
  pointer-events: auto;
  cursor: pointer;
  position: static;
  flex: 0 0 16px;
  z-index: auto;
}


.punbb .post-content :is(.code-box pre, .code-box code),
#pun-post #post-preview :is(.code-box pre, .code-box code) {
  font-family: var(--font-main);
  font-size: inherit;
  line-height: inherit;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.punbb .post-content :is(.quote-box, .spoiler-box, .code-box) p:last-child,
#pun-post #post-preview :is(.quote-box, .spoiler-box, .code-box) p:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

  #pun-viewtopic .post-content hr {
  height: 2px;
  margin: 10px 0;
}

#pun-viewtopic .post-content hr + br {
  display: none;
}

/* =========================================================
   EMO — reply editor
   Keep the native BBCode toolbar, but remove the platform captions and
   bring the editor controls into the light/gradient EMO language.
   ========================================================= */

/* The quick-reply heading and the native fieldset instruction are redundant
   with the page breadcrumbs, so leave the editor itself as the first visible
   element. */
#pun-viewtopic #pun-main #post-form > h2,
#pun-viewtopic #pun-main #post-form fieldset > legend,
#pun-post #pun-main #post-form > h2,
#pun-post #pun-main #post-form fieldset > legend,
#pun-messages form#post #post-form fieldset > legend,
#pun-messages form#post > fieldset > legend {
  display: none !important;
}

/* Some MyBB builds put the quick-reply caption on the wrapper rather than
   inside #post-form; hide that wrapper caption only when it contains the
   reply form. */
#pun-viewtopic #pun-main > .quickpost > h2,
#pun-viewtopic #pun-main > .formal:has(form#post) > h2,
#pun-viewtopic #pun-main > form#post > h2 {
  display: none !important;
}

/* The BB toolbar remains light; only give its frame the same compact EMO
   radius and neutral surface as the rest of the editor. */
#pun-viewtopic #pun-main #post-form #form-buttons,
#pun-post #pun-main #post-form #form-buttons,
#pun-messages form#post #form-buttons {
  min-height: 38px !important;
  padding: 6px 12px !important;
  overflow: hidden !important;
}

/* Native BBCode popovers use the shared soft surface for readable options. */
.punbb #tags > .container {
  overflow: hidden;
}

/* Extra fonts appended to #font-area in html-bottom are shown as a compact,
   scrollable list. The inline display:none belongs to the platform, hence
   the conditional !important only replaces its open-state display:block. */
.punbb #font-area:not([style*="display:none"]):not([style*="display: none"]) {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 2px;
  box-sizing: border-box;
  width: 480px;
  max-width: calc(100vw - 28px);
  max-height: min(280px, calc(100vh - 120px));
  padding: 10px 12px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* Empty items in the font script are only spacers around its two headings. */
.punbb #font-area > div:has(> span:empty) {
  display: none;
}

.punbb #font-area > div {
  position: relative;
  min-width: 0;
  min-height: 28px;
}



.punbb #font-area > div > span {
  display: block;
  padding: 5px 2px;
  overflow: hidden;
  font-size: var(--font-size-sm);
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

/* The platform's blank image keeps the native bbcode() handler. Stretch it
   over the whole card rather than requiring a click on a tiny invisible icon. */
.punbb #font-area > div > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/* Section labels are recognised by the deliberately unusual font-family
   value used in html-bottom. They occupy the full grid width without
   becoming another card in the list. */
.punbb #font-area > div:has(> span[style*="— ë à ò è í è ö à —"]),
.punbb #font-area > div:has(> span[style*="— ê è ð è ë ë è ö à —"]) {
  grid-column: 1 / -1;
  min-height: auto;
  margin-top: 8px;
}

.punbb #font-area > div:has(> span[style*="— ë à ò è í è ö à —"]) > span,
.punbb #font-area > div:has(> span[style*="— ê è ð è ë ë è ö à —"]) > span {
  padding: 5px 2px 4px;
  font-family: var(--font-forum-ui) !important;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .9px;
  text-align: left;
  text-transform: uppercase;
}

.punbb #font-area > div:has(> span[style*="— ë à ò è í è ö à —"]) > img,
.punbb #font-area > div:has(> span[style*="— ê è ð è ë ë è ö à —"]) > img {
  display: none;
}

@media (max-width: 520px) {
  .punbb #font-area:not([style*="display:none"]):not([style*="display: none"]) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 10px;
}
}

/* The platform sizes the outer smile popover separately from its contents.
   Keep both layers on the same width so the grid cannot continue behind the
   clipped right edge. */
.punbb #tags > #smilies-area {
  box-sizing: border-box;
  width: 650px !important;
  max-width: calc(100vw - 40px) !important;
}

.punbb #smilies-block.emo-smilies-ready {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px;
  overflow-x: hidden;
}

.emo-smilie-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.emo-smilie-tab {
  min-height: 26px;
  padding: 5px 8px;
  font: var(--ui-action-font);
  letter-spacing: .5px;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
}



.emo-smilie-panel {
  display: none;
  grid-template-columns: repeat(10, 54px);
  gap: 3px;
  align-items: center;
  justify-content: start;
  box-sizing: border-box;
  width: 100%;
  max-height: 205px;
  overflow-x: hidden;
  overflow-y: auto;
}

.emo-smilie-panel::-webkit-scrollbar {
  width: 6px;
}







.emo-smilie-panel.is-active {
  display: grid;
}

.emo-smilie-item {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 0;
  height: 46px;
  padding: 2px;
  cursor: pointer;
}



.emo-smilie-item img {
  display: block;
  max-width: 100%;
  max-height: 42px;
  object-fit: contain;
}

/* Pusheen, Cats and Pepe keep their proportions after insertion into a post. */
.punbb img.emo-post-smilie {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 50px;
  object-fit: contain;
}

.emo-guest-mention-link {
  cursor: pointer;
}

/* Toolbar icons are individual transparent PNGs. The native blank image stays
   in place because its inline handler owns the editor action; the visible icon
   is drawn once on the parent cell. */
.punbb #form-buttons table {
  width: 100%;
  table-layout: fixed;
}

.punbb #form-buttons td:is(
  #button-font,
  #button-size,
  #button-bold,
  #button-italic,
  #button-underline,
  #button-strike,
  #button-indent,
  #button-left,
  #button-center,
  #button-right,
  #button-justify,
  #button-link,
  #button-spoiler,
  #button-image,
  #button-image-tag,
  #button-video,
  #button-hide,
  #button-quote,
  #button-code,
  #button-color,
  #button-table,
  #button-smile,
  #button-addition,
  #button-keyboard,
  #button-hideprofile,
  #button-mask
) {
  position: relative;
  height: 26px;
  padding: 0;
  cursor: pointer;
  transition: opacity .15s ease;
}

.punbb #form-buttons td:is(
  #button-font,
  #button-size,
  #button-bold,
  #button-italic,
  #button-underline,
  #button-strike,
  #button-indent,
  #button-left,
  #button-center,
  #button-right,
  #button-justify,
  #button-link,
  #button-spoiler,
  #button-image,
  #button-image-tag,
  #button-video,
  #button-hide,
  #button-quote,
  #button-code,
  #button-color,
  #button-table,
  #button-smile,
  #button-addition,
  #button-keyboard,
  #button-hideprofile,
  #button-mask
)::before {
  content: "";
  position: absolute;
  inset: 0;
  mask: var(--emo-editor-icon, none) center / var(--emo-editor-icon-size, auto 12px) no-repeat;
  pointer-events: none;
}



.punbb #form-buttons td:is(
  #button-font,
  #button-size,
  #button-bold,
  #button-italic,
  #button-underline,
  #button-strike,
  #button-indent,
  #button-left,
  #button-center,
  #button-right,
  #button-justify,
  #button-link,
  #button-spoiler,
  #button-image,
  #button-image-tag,
  #button-video,
  #button-hide,
  #button-quote,
  #button-code,
  #button-color,
  #button-table,
  #button-smile,
  #button-addition,
  #button-keyboard,
  #button-hideprofile,
  #button-mask
) > img {
  display: block;
  width: 100%;
  height: 26px;
}

#button-font {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/33959.svg?v=1");
}
#button-size {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/35893.svg?v=1");
}
#button-bold {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/70835.svg?v=1");
}
#button-italic {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/45281.svg?v=1");
}
#button-underline {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/78407.svg?v=1");
}
#button-strike {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/69453.svg?v=1");
}
#button-indent {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/88589.svg?v=1");
}
#button-left {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/45646.svg?v=1");
}
#button-center {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/62769.svg?v=1");
}
#button-right {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/38176.svg?v=1");
}
#button-justify {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/98080.svg?v=1");
  --emo-editor-icon-size: auto 15px;
}
#button-link {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/35883.svg?v=1");
}
#button-spoiler {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/96754.svg?v=1");
}
#button-image {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/99871.svg?v=1");
}
#button-image-tag {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/16567.svg?v=1");
}
#button-video {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/45761.svg?v=1");
}
#button-hide {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/62140.svg?v=1");
}
#button-quote {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/58576.svg?v=1");
}
#button-code {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/94634.svg?v=1");
}
#button-color {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/82285.svg?v=1");
  --emo-editor-icon-size: auto 16px;
}
#button-table {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/37630.svg?v=1");
}
#button-smile {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/63960.svg?v=1");
}
#button-addition {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/24937.svg?v=1");
}
#button-keyboard {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/20348.svg?v=1");
}
#button-hideprofile {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/68900.svg?v=1");
}
#button-mask {
  --emo-editor-icon: url("https://forumstatic.ru/files/001c/c4/9a/43060.svg?v=1");
}

/* The previously published editor-extras module hides service controls with
   inline display:none. Keep the restored native actions and the separately
   loaded mask action visible until that module is re-uploaded. */
.punbb #form-buttons :is(
  #button-keyboard,
  #button-mask
) {
  display: table-cell !important;
}

.punbb #form-buttons #button-attach,
.punbb #form-buttons #button-attachment,
.punbb #form-buttons #button-file,
.punbb #form-buttons #button-files,
.punbb #form-buttons #button-files_rusff,
.punbb #form-buttons #button-graffiti,
.punbb #form-buttons td:has(
  [title*="âëîæ" i],
  [alt*="âëîæ" i],
  [title*="ãðàôô" i],
  [alt*="ãðàôô" i]
),
.punbb #form-buttons :is(
  [title*="âëîæ" i],
  [alt*="âëîæ" i],
  [title*="ãðàôô" i],
  [alt*="ãðàôô" i]
) {
  display: none;
}

/* Profile-mask editor: the third-party component keeps its functional DOM,
   while EMO supplies the same light surfaces, compact fields and actions as
   the rest of the editor. */
#mask_dialog .hv-bg {
  box-sizing: border-box;
  padding: 16px;
}

#mask_dialog .inner {
  box-sizing: border-box;
  width: 760px;
  max-width: calc(100vw - 32px);
  max-height: 90vh;
  padding: 0;
  overflow: hidden;
  font-family: var(--font-main);
}

#mask_dialog .hv-mask-dialog-title {
  box-sizing: border-box;
  margin: 0;
  padding: 14px 18px;
  font: normal var(--font-size-base)/16px var(--font-forum-ui);
  letter-spacing: .8px;
  text-align: left;
  text-transform: uppercase;
}

#mask_dialog .hv-mask-block {
  gap: 14px;
  padding: 16px;
  overflow: auto;
}



#mask_dialog .hv-preview-block {
  padding: 4px 8px;
}

#mask_dialog .hv-form-block :is(label, b) {
  font-family: var(--font-main);
}

#mask_dialog .hv-form-block .description {
  font: normal var(--font-size-xs)/13px var(--font-main);
}

#mask_dialog .hv-form-block :is(input, textarea, select) {
  box-sizing: border-box;
  min-height: 34px;
  margin: 4px 0 0;
  padding: 8px 10px;
  font: normal var(--font-size-base)/1.45 var(--font-main);
}

#mask_dialog .hv-form-block textarea {
  min-height: 54px;
  resize: vertical;
}









#mask_dialog .hv-control {
  box-sizing: border-box;
  margin: 0;
  padding: 14px 16px 16px;
}

#mask_dialog .hv-control .button{
  min-width: 0;
  margin: 0;
}



/* The active-mask avatar gets a dedicated row above the complete toolbar,
   so neither the toolbar nor the textarea can clip it. */
:is(#pun-viewtopic, #pun-post) #post-form .hvMiniProfileWrapper,
#pun-messages form#post .hvMiniProfileWrapper {
  position: relative;
  width: 100%;
  height: 46px;
  margin: 0;
  pointer-events: none;
}

:is(#pun-viewtopic, #pun-post) #post-form .hvMiniProfileWrapper:has(> .hvMiniProfile.hv-mask-empty),
#pun-messages form#post .hvMiniProfileWrapper:has(> .hvMiniProfile.hv-mask-empty) {
  height: 0;
}

:is(#pun-viewtopic, #pun-post) #post-form .hvMiniProfile,
#pun-messages form#post .hvMiniProfile {
  top: 4px;
  right: 30px;
  left: auto;
  pointer-events: auto;
}

@media (max-width: 768px) {
  #mask_dialog .hv-bg {
  padding: 8px;
}

  #mask_dialog .inner {
  width: calc(100vw - 16px);
  max-width: none;
  max-height: calc(100vh - 16px);
  overflow-x: hidden;
  overflow-y: auto;
}

  #mask_dialog .hv-mask-dialog-title {
  padding: 12px 14px;
}

  #mask_dialog .hv-mask-block {
  gap: 10px;
  padding: 12px;
}


}



/* Keep the native send/preview row available.  A legacy notification
   iframe rule hides every `.formsubmit`; the page-level editor must restore
   this row so the form has its actual «Îòïðàâèòü» and «Ïîñìîòðåòü» actions. */
#pun-viewtopic #pun-main #post-form .formsubmit,
#pun-post #pun-main #post-form .formsubmit,
#pun-messages form#post > #post-form > p:has(> span > input.button) {
  display: flex !important;
  visibility: visible !important;
}

#pun-viewtopic #pun-main #post-form > #post.container,
#pun-post #pun-main #post-form > #post.container,
#pun-messages form#post > #post-form {
  padding: 0 !important;
}

/* Keep the editor wrapper flat. Platform/editor-specific CSS may still add
   its own spacing or frame, so this component explicitly owns the shell. */
#pun-viewtopic #pun-main #post-form fieldset,
#pun-post #pun-main #post-form fieldset,
#pun-messages form#post > fieldset {
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible;
}

/* Message previews use the same rounded light-card surface as the rest of
   the theme, with enough inset to keep parsed text away from the frame. */
:is(#pun-viewtopic, #pun-post) #pun-main #post-form
  #post-preview .post-box,
#pun-messages form#post #post-preview .post-box {
  padding: 14px 18px;
  overflow: hidden;
}

/* The new-topic form must not fall back to the legacy 64%-wide PunBB field.
   Align its subject, options and dynamically injected topic-tag row with the
   textarea's existing 30px inset, and keep labels legible on the dark shell. */
#pun-post #pun-main #post-form :is(.inputfield, .areafield) > .input {
  padding-right: 0;
}

#pun-post #pun-main #post-form .inputfield > br {
  display: none;
}

#pun-post #pun-main #post-form .inputfield:not(:has([value*="òåã" i])) > label {
  display: block;
  width: calc(100% - 60px);
  margin: 0 auto 4px;
}

:is(#pun-viewtopic, #pun-post) #pun-main #post-form .checkfield {
  display: flex;
  align-items:center;
  gap: 10px;
  width: calc(100% - 60px);
  min-height: 22px;
  margin-top: 12px;
  margin-right: auto;
  margin-left: auto;
  line-height: 1.4;
}

:is(#pun-viewtopic, #pun-post) #pun-main #post-form .checkfield + .checkfield {
  margin-top: 8px;
}

:is(#pun-viewtopic, #pun-post) #pun-main #post-form .checkfield label {
  display: flex;
  align-items:center;
  gap: 10px;
  min-width: 0;
  height: auto;
  line-height: inherit;
}

:is(#pun-viewtopic, #pun-post) #pun-main #post-form .checkfield input[type="checkbox"] {
  flex: 0 0 auto;
  margin:0;
}

#pun-post #pun-main #post-form #fld3,
#pun-post #pun-main #post-form :is(p:has(:is(input, button)[value*="òåã" i]), div:has(> :is(input, button)[value*="òåã" i])) > input[type="text"] {
  min-width: 0;
  max-width: none;
  min-height: 32px;
  padding: 6px 9px;
  font-family: var(--font-main);
}

#pun-post #pun-main #post-form #fld3 {
  display: block;
  width: calc(100% - 60px);
  margin-right: auto;
  margin-left: auto;
}

#pun-post #pun-main #post-form :is(p:has(:is(input, button)[value*="òåã" i]), div:has(> :is(input, button)[value*="òåã" i])) {
  width: calc(100% - 60px);
  margin-right: auto;
  margin-left: auto;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:0;
}

#pun-post #pun-main #post-form :is(p:has(:is(input, button)[value*="òåã" i]), div:has(> :is(input, button)[value*="òåã" i])) > input[type="text"] {
  width:auto;
  margin-right:0;
  margin-left: 0;
  flex:1 1 200px;
}

/* Text entry field: preserve the toolbar-to-field seam while using the EMO
   paper colour, typography and lower rounded corners. */
#pun-viewtopic #pun-main #post-form #main-reply,
#pun-post #pun-main #post-form #main-reply,
#pun-messages form#post #main-reply {
  width: var(--editor-field-inline-size, calc(100% - 60px)) !important;
  min-width: 0 !important;
  max-width: var(--editor-field-inline-size, calc(100% - 60px)) !important;
  margin-right: var(--editor-field-gutter, 30px) !important;
  margin-left: var(--editor-field-gutter, 30px) !important;
  font-family: var(--font-main) !important;
  font-size:13px;
  line-height:1.5;
}

/* Keep the dice action and the optional live-preview switch on one shared
   editor row, aligned to the same inset as the textarea. */
.punbb .emo-editor-actions {
  display: flex;
  align-items: center;
  justify-content:flex-start;
  flex-wrap: wrap;
  gap: 8px;
  box-sizing: border-box;
  width: var(--editor-field-inline-size, calc(100% - 60px));
  margin-top: 14px;
  margin-right: var(--editor-field-gutter, 30px);
  margin-left: var(--editor-field-gutter, 30px);
  padding:0;
}

.punbb #togglePreview {
  display: block;
  margin-left: auto;
}

/* Editor actions reuse the forum pill recipe. Context variables below keep
   topic actions dark and match private-message actions to its light links. */
#pun-viewtopic #pun-main #post-form .formsubmit input.button,
#pun-post #pun-main #post-form .formsubmit input.button,
#pun-viewtopic #pun-main #post-form #togglePreview input.button,
#pun-post #pun-main #post-form #togglePreview input.button,
#pun-viewtopic #pun-main #post-form input[type="button"][onclick*="dice("],
#pun-post #pun-main #post-form input[type="button"][onclick*="dice("],
#pun-messages form#post #post-form input[type="button"][onclick*="dice("],
#pun-messages form#post > #post-form > p:has(> span > input.button) input.button{
  min-width: 0 !important;
  min-height:var(--ui-action-min-height, 19px)!important;
  padding:var(--ui-action-control-padding, 0 10px)!important;
  font:600 10px/var(--ui-action-line-height, 19px) var(--font-navigation)!important;
  letter-spacing:0!important;
  text-transform:var(--ui-action-case, lowercase)!important;
}



#pun-viewtopic #pun-main #post-form input[type="button"][onclick*="dice("]:not(.emo-editor-utility-row > input),
#pun-post #pun-main #post-form input[type="button"][onclick*="dice("]:not(.emo-editor-utility-row > input),
#pun-messages form#post #post-form input[type="button"][onclick*="dice("]:not(.emo-editor-utility-row > input) {
  margin-left: var(--editor-field-gutter, 30px);
}

/* Private-message editor fields use the same inset and light surfaces as the
   shared editor, while the surrounding PM grid remains page-specific. */
#pun-messages form#post {
  --editor-field-inline-size: calc(100% - 60px);
  --editor-field-gutter: 30px;
  --pm-submit-padding: 14px 30px 0;
}

#pun-messages form#post #post-form > .fs-box {
  min-width: 0;
  margin: 0;
  padding: 0;
}

#pun-messages form#post #post-form .inputfield {
  width: var(--editor-field-inline-size);
  margin: 0 var(--editor-field-gutter) 12px;
  padding: 0;
}

#pun-messages form#post #post-form .inputfield > br {
  display: none;
}

#pun-messages form#post #post-form .inputfield > label {
  display: block;
  margin: 0 0 4px;
  font-weight: 700;
}

#pun-messages form#post #post-form .inputfield > .input,
#pun-messages form#post #post-form .areafield > .input {
  display: block;
  height: auto;
  padding: 0;
}

#pun-messages form#post #post-form .inputfield input[type="text"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: none;
  min-height: 32px;
  margin: 0;
  padding: 6px 9px;
  font: normal var(--font-size-base)/1.4 var(--font-main);
}



#pun-messages form#post #form-buttons {
  width: var(--editor-field-inline-size);
  margin-right: var(--editor-field-gutter);
  margin-left: var(--editor-field-gutter);
}

#pun-messages form#post #post-form .areafield {
  margin: 0;
  padding: 0;
}

#pun-messages form#post #main-reply {
  min-height: 260px;
  padding: 14px 16px;
  resize: vertical;
}



#pun-messages form#post > #post-form > p:has(> span > input.button) {
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: var(--pm-submit-padding) !important;
}

#pun-messages form#post > #post-form > p:has(> span > input.button) > span:first-child {
  display: flex;
  gap: 8px;
}

#pun-messages form#post > #post-form > p:has(> span > input.button) > .checkfield {
  margin-left: auto;
}

@media (max-width: 760px) {
  /* The native quick-reply form retains three unrelated desktop widths on
     mobile: 64% for the guest name, 30px gutters for the textarea and a
     legacy left inset for its actions. Let every control follow the same
     available width without changing the desktop editor. */
  #pun-viewtopic #pun-main #post-form,
  #pun-messages form#post {
  --editor-field-inline-size: 100%;
  --editor-field-gutter: 0;
}

  #pun-viewtopic #pun-main #post-form .inputfield > br {
  display: none;
}

  #pun-viewtopic #pun-main #post-form .inputfield > label {
  display: block;
  margin-bottom: 4px;
  font-size: var(--font-size-base);
}

  #pun-viewtopic #pun-main #post-form .inputfield > .input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  padding: 0;
}

  #pun-viewtopic #pun-main #post-form .inputfield input[type="text"] {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

  #pun-viewtopic #pun-main #post-form .formsubmit {
  flex-wrap: wrap;
  gap: 6px;
  padding-left: 0;
}

  #pun-viewtopic #pun-main #post-form .formsubmit input.button {
  margin: 0;
}

  #pun-messages form#post {
  --pm-submit-padding: 14px 0 0;
}
  }

/* =========================================================
   EMO — optional editor BBCode utilities
   [align=justify] justifies text; [img] inserts an image by URL; [indent] adds
   a text indent; [hideprofile] hides only the author card belonging to the
   marked post. Their controls extend the native toolbar.
   ========================================================= */





.punbb .post-content .emo-indent,
#pun-post #post-preview .emo-indent,
.mybb-live-preview-content .emo-indent {
  display: inline-block;
  width: 2.4em;
  height: 1em;
}

.emo-hide-profile-marker,
.emo-hide-profile-token-line {
  display: none;
}

#pun-viewtopic #pun-main > .topic > .post.emo-post-hide-profile .post-author {
  display: none;
}

#pun-viewtopic #pun-main > .topic > .post.emo-post-hide-profile .post-body {
  margin-left: 0;
}

#pun-viewtopic #pun-main > .topic > .post.emo-post-hide-profile .post-links {
  margin-left: 0;
}

#pun-viewtopic #pun-main > .topic > .post.emo-post-hide-profile .post-links ul {
  margin-left: 0;
}

/* =========================================================
   EMO — ÁûñòðîÏëþñû äëÿ òîïèêà
   The plugin injects .post-rating and .post-vote into each post.
   ========================================================= */

#pun-viewtopic #pun-main .post .reactions-root {
  position: absolute;
  bottom:57px;
  left:auto;
  right:var(--message-reactions-right, 84px);
  padding:0;
  z-index:101;
}



#pun-viewtopic #pun-main .post .post-rating {
  position: absolute;
  right:12px;
  bottom:57px;
  float: none;
  margin: 0;
  overflow: visible;
}

#pun-viewtopic #pun-main .post :is(.post-rating, .post-vote),
#pun-viewtopic #pun-main .post :is(.post-rating, .post-vote) p {
  margin: 0;
  padding: 0;
}

#pun-viewtopic #pun-main .post .post-rating p > a {
  position: relative;
  z-index: 100;
  display: inline-flex;
  align-items: flex-end;
  justify-content: flex-start;
  box-sizing: border-box;
  width: auto;
  min-width:36px;
  height:24px;
  padding:0 0 0 26px;
  font-size: 12px !important;
  font-weight: 700;
  line-height: 1;
  letter-spacing:0;
  text-align: left;
  vertical-align: middle;
  cursor: pointer;
}

/* `noNull` only means that someone voted; `mylike` is the current user's vote. */


#pun-viewtopic #pun-main .post .post-rating p > a.noNull::before {
  position: static;
  display: inline-block;
  margin: 10 0px 0 0;
  content: "+";
  font-size: 9px;
}

#pun-viewtopic #pun-main .post .post-vote {
  position: absolute;
  right:51px;
  bottom:57px;
  display: block;
  float: none;
  width:24px;
  height:24px;
  margin: 0;
}

#pun-viewtopic #pun-main .post .post-vote p > a {
  position: static;
  z-index: 200;
  display: block;
  width:24px;
  height:24px;
  margin: 0;
  padding: 0;
  font-size: 0 !important;
  cursor: pointer;
}

/* On narrow screens both action groups belong to the light post body, not to
   the dark links strip below it. The post body becomes their common anchor. */
@media screen and (max-width: 540px) {
  #pun-viewtopic #pun-main > .topic > .post .post-body {
  position: relative;
}

  #pun-viewtopic #pun-main .post .reactions-root {
  right:var(--message-reactions-right, 84px);
  bottom:10px;
  left:auto;
}

  #pun-viewtopic #pun-main .post .post-rating {
  right:12px;
  bottom:10px;
}

  #pun-viewtopic #pun-main .post .post-vote {
  right:51px;
  bottom:10px;
}
}

/* The native link switches to v=0 after a vote; the API-backed class also
   covers the initial page render before the link state is refreshed. */
#pun-viewtopic #pun-main .post .post-vote:has(a[href*="v=0"]),
#pun-viewtopic #pun-main .post.mylike .post-vote {
  display: none !important;
}

/* Hover card for the users who gave the post a positive rating. */
#pun-viewtopic #pun-main .post .emo-like-tooltip {
  position: absolute;
  right: 10px;
  bottom: calc(100% + 10px);
  z-index: 500;
  box-sizing: border-box;
  width: 174px;
  padding: 10px;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s ease;
  pointer-events: none;
}

#pun-viewtopic #pun-main .post .emo-like-tooltip::after {
  position: absolute;
  right: 22px;
  bottom: -6px;
  width: 0;
  height: 0;
  content: "";
}

#pun-viewtopic #pun-main .post .emo-like-tooltip.is-open {
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

#pun-viewtopic #pun-main .post .emo-like-tooltip > strong {
  display: block;
  margin-bottom: 7px;
  font: normal var(--font-size-xs)/11px var(--font-forum-ui);
  letter-spacing: .8px;
  text-transform: uppercase;
}

#pun-viewtopic #pun-main .post .emo-like-tooltip-grid {
  display: grid;
  grid-template-columns: repeat(4, 30px);
  grid-auto-rows: 42px;
  align-content: start;
  gap: 6px;
  max-height: 90px;
  padding-right: 4px;
  overflow-x: hidden;
  overflow-y: auto;
}

#pun-viewtopic #pun-main .post .emo-like-tooltip-grid.is-empty {
  display: block;
  max-height: none;
  padding: 2px 0;
  overflow: visible;
  font: normal var(--font-size-xs)/12px var(--font-forum-ui);
  text-align: center;
}

#pun-viewtopic #pun-main .post .emo-like-tooltip-grid > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 30px;
  height: 42px;
  padding: 0;
  transition: transform .14s ease;
}

#pun-viewtopic #pun-main .post .emo-like-tooltip-grid > a:is(:hover, :focus) {
  transform: translateY(-1px);
}

#pun-viewtopic #pun-main .post .emo-like-tooltip-grid img {
  display: block;
  width: 30px;
  height: 30px;
  margin: 0;
  object-fit: cover;
  transition: outline-color .14s ease;
}



#pun-viewtopic #pun-main .post .emo-like-tooltip-name {
  display: block;
  width: 30px;
  margin-top: 2px;
  overflow: hidden;
  font: normal 7px/9px var(--font-forum-ui);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   EMO — CHARACTER APPLICATION / QUENTA
   ========================================================= */

#pun-viewtopic .emo-quenta-post .post-box {
  padding: 22px 18px 70px;
}


/* ---------------------------------------------------------
   ROOT
   --------------------------------------------------------- */

.emo-quenta {
  --content-frame-gradient: linear-gradient(90deg, var(--color-accent), var(--message-tab));
  box-sizing: border-box;
  width: 100%;
  font:
    normal
    var(--font-size-sm) / 1.55
    var(--font-main);
}

.emo-quenta *,
.emo-quenta *::before,
.emo-quenta *::after {
  box-sizing: border-box;
}


/* ---------------------------------------------------------
   NAME / FACE
   --------------------------------------------------------- */

.emo-quenta__header {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(150px, 250px);
  align-items: end;
  gap: 18px;
  margin: 0 0 10px;
}

.emo-quenta__identity {
  min-width: 0;
}


#pun-viewtopic .emo-quenta__name,
#pun-post #post-preview .emo-quenta__name,
.mybb-live-preview-content .emo-quenta__name {
  position: static;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  font-family: var(--font-forum-title);
  font-size: clamp(26px, 4.3vw, 42px);
  line-height: .88;
  font-weight: normal;
  letter-spacing: -.035em;
  white-space: nowrap;
  text-align: left;
  text-transform: uppercase;
}


.emo-quenta__secondary-name {
  margin-top: 7px;
  font:
    700
    clamp(9px, 1.35vw, 12px) / 1.25
    var(--font-forum-title);
  text-transform: uppercase;
}


.emo-quenta__face {
  align-self: center;
  padding: 4px 0 3px;
  font:
    italic
    9px / 1.25
    var(--font-main);
  text-align: right;
}


.emo-quenta__face-name {
  font-weight: 700;
}


/* ---------------------------------------------------------
   TOP INFO
   --------------------------------------------------------- */

.emo-quenta__intro {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 18px 0 0;
}


/* ---------------------------------------------------------
   CHARACTER IMAGE
   --------------------------------------------------------- */

.emo-quenta__portrait {
  position: relative;
  width: min(720px, 82%);
  aspect-ratio: 2 / 1;
  margin: 0 auto;
  overflow: hidden;
}


.emo-quenta__portrait::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}


.emo-quenta__portrait img {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  object-position: center;
}


.emo-quenta__portrait--empty::before {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  content: "NO PHOTO";
  font:
    700
    9px / 1
    var(--font-forum-ui);
  letter-spacing: .12em;
}


/* ---------------------------------------------------------
   QUOTE AREA
   --------------------------------------------------------- */

.emo-quenta__intro-body {
  position: relative;
  width: 100%;
  min-width: 0;
  margin-top: 28px;
  padding-top: 32px;
}


.emo-quenta__intro-body::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 2px;
  content: "";
}


/* ---------------------------------------------------------
   QUOTE
   --------------------------------------------------------- */

.emo-quenta__quote {
  position: relative;
  width: min(430px, 58%);
  margin:
    0
    20px
    0
    auto;
  padding:
    4px
    0
    4px
    22px;
  font:
    italic
    11px / 1.45
    var(--font-main);
}


.emo-quenta__quote::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  content: "";
}


.emo-quenta__quote p:last-child {
  padding-bottom: 0;
}


/* ---------------------------------------------------------
   MAIN META
   --------------------------------------------------------- */

.emo-quenta__section--meta .emo-quenta__section-body {
  min-height: 0;
}


.emo-quenta__meta {
  display: grid;
  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );
  width: 100%;
  font-size: 10px;
  line-height: 1.55;
}


.emo-quenta__meta-column {
  min-width: 0;
  padding:
    0
    18px
    0
    0;
}


.emo-quenta__meta-column
+
.emo-quenta__meta-column {
  padding:
    0
    0
    0
    18px;
}


.emo-quenta__meta-item {
  display: grid;
  grid-template-columns:
    max-content
    minmax(0, 1fr);
  gap: 5px;
  align-items: baseline;
}


.emo-quenta__meta-item
+
.emo-quenta__meta-item {
  margin-top: 3px;
}


.emo-quenta__meta-label {
  font-weight: 700;
  white-space: nowrap;
}


.emo-quenta__meta-value {
  min-width: 0;
}


.emo-quenta__meta-value p {
  display: inline;
  margin: 0;
  padding: 0;
}


/* ---------------------------------------------------------
   HISTORY / TALENTS / EXTRA / NOTES
   --------------------------------------------------------- */

.emo-quenta__section {
  position: relative;
  margin:
    46px
    0
    0;
  padding:
    27px
    18px
    19px;
}

#pun-viewtopic .emo-quenta__section-title,
#pun-post #post-preview .emo-quenta__section-title,
.mybb-live-preview-content .emo-quenta__section-title {
  right: -2px;
  position: absolute;
  z-index: 1;
  top: -30px;
  display: var(--bbcode-tab-display, block);
  box-sizing: border-box;
  width: auto;
  min-width: 190px;
  height: 30px;
  margin: 0;
  padding: 7px 18px 6px;
  overflow: visible;
  font: normal 10px/17px var(--font-forum-title);
  letter-spacing: .02em;
  text-align: center;
  text-transform: uppercase;
}

.emo-quenta__section-body {
  min-height: 62px;
  font-size: 10px;
  line-height: 1.55;
}


.emo-quenta__section-body p {
  padding-bottom: .8em;
}


.emo-quenta__section-body p:last-child {
  padding-bottom: 0;
}


.emo-quenta__section-body
:is(b, strong) {
  font-weight: 700;
}


.emo-quenta__section-body
:is(ul, ol) {
  margin:
    0
    0
    .8em
    1.5em;
}


.emo-quenta__section-body li {
  margin: .18em 0;
  list-style: inherit;
}


/* ---------------------------------------------------------
   NOTES
   --------------------------------------------------------- */




.emo-quenta__notes {
  display: grid;
  gap: 4px;
}


.emo-quenta__note-row {
  display: grid;
  grid-template-columns:
    max-content
    minmax(0, 1fr);
  gap: 5px;
  align-items: baseline;
}


.emo-quenta__note-label {
  font-weight: 700;
}


.emo-quenta__note-value {
  min-width: 0;
}


.emo-quenta__note-value p {
  display: inline;
  margin: 0;
  padding: 0;
}


/* ---------------------------------------------------------
   STANDARD TRIAL-POST SPOILER
   --------------------------------------------------------- */

/*
 * Ñàì spoiler íå ïåðåîôîðìëÿåì.
 * Çäåñü òîëüêî äà¸ì åìó ðàññòîÿíèå ïîñëå àíêåòû.
 */

#pun-viewtopic .emo-quenta-post .post-content > .spoiler-box,
#pun-viewtopic .emo-quenta-post .post-content > p > .spoiler-box,
#pun-viewtopic .emo-quenta-post .post-content > div > .spoiler-box {
  margin-top: 40px !important;
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 820px) {

  .emo-quenta__header {
  grid-template-columns:
      minmax(0, 1fr);
  gap: 7px;
}


  .emo-quenta__face {
  text-align: left;
}


  .emo-quenta__portrait {
  width: min(720px, 92%);
}


  .emo-quenta__meta {
  grid-template-columns:
      minmax(0, 1fr);
}


  .emo-quenta__meta-column {
  padding: 0;
}


  .emo-quenta__meta-column
  +
  .emo-quenta__meta-column {
  margin-top: 12px;
  padding:
      12px
      0
      0;
}
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 540px) {

  #pun-viewtopic
  .emo-quenta-post
  .post-box {
  padding-right: 12px;
  padding-left: 12px;
}


  .emo-quenta__name {
  font-size:
      clamp(
        28px,
        11vw,
        42px
      );
}


  .emo-quenta__portrait {
  width: 100%;
}


  .emo-quenta__intro-body {
  margin-top: 22px;
  padding-top: 25px;
}


  .emo-quenta__quote {
  width: calc(100% - 18px);
  margin:
      0
      0
      0
      auto;
  padding-left: 18px;
}


  .emo-quenta__section {
  margin-top: 42px;
  padding:
      24px
      13px
      15px;
}


  .punbb .post-content .quote-box > cite,
  #pun-post #post-preview .quote-box > cite,
  #pun-viewtopic .emo-quenta__section-title,
  #pun-post #post-preview .emo-quenta__section-title,
  .mybb-live-preview-content .emo-quenta__section-title {
  min-width: 0;
  max-width:
      calc(
        100% - 20px
      );
  padding-right: 13px;
  padding-left: 13px;
}


  .emo-quenta__note-row,
  .emo-quenta__meta-item {
  grid-template-columns:
      minmax(0, 1fr);
  gap: 0;
}


}


/* =========================================================
   REUSABLE CONTENT BOX
   [dd_box] keeps a shared dark header and light body around any BBCode.
   ========================================================= */

/* Shared muted metadata beneath dark component-header labels. */
.dd-box__subtitle,
.emo-news__month {
  font-family: var(--font-forum-ui);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* Plain [box]: inline placement respects an outer BBCode alignment wrapper. */
.dd-content-box {
  display: inline-block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 12px;
  overflow: auto;
  vertical-align: top;
}

.dd-box {
  box-sizing: border-box;
  width: min(100%, 900px);
  margin: 10px auto;
  overflow: hidden;
  font: normal var(--font-size-base)/1.55 var(--font-main);
}

.dd-box__header {
  position: relative;
  padding: 24px 28px 22px;
  text-align: center;
}

.dd-box__header::after,
.emo-wordle__header::after, .emo-question-event__header::after, .emo-bingo__header::after,
.emo-news__header::after{
  position: absolute;
  right: 10%;
  bottom: 0;
  left: 10%;
  height: 2px;
  content: "";
}

.dd-box__top {
  margin: 0 auto 12px;
  font: 700 var(--font-size-category-title)/1.35 var(--font-forum-ui);
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.dd-box__top:has(+ .dd-box__subtitle) {
  margin-bottom: 0;
}

.dd-box__subtitle {
  margin: 10px auto 12px;
  font-size: 8px;
}

.dd-box__subtitle:first-child {
  margin-top: 0;
}

.punbb .dd-box__title,
.dd-box__title {
  display: inline-block;
  box-sizing: border-box;
  max-width: 100%;
  margin: 0;
  padding: 8px 22px;
  font: 700 var(--font-size-category-title)/1.25 var(--font-forum-ui);
  letter-spacing: var(--letter-spacing-category-title);
  text-transform: uppercase;
}

.dd-box__body {
  box-sizing: border-box;
  min-width: 0;
  padding: 16px clamp(18px, 5vw, 46px) 26px;
  overflow-x: auto;
}

.dd-box__body > :first-child {
  margin-top: 0;
}

.dd-box__body > :last-child {
  margin-bottom: 0;
}

.dd-box__body :is(img, video, iframe) {
  max-width: 100%;
}

.dd-box__body table {
  max-width: 100%;
}

.dd-box__footer {
  padding: 20px clamp(18px, 5vw, 46px);
  text-align: center;
}

@media (max-width: 600px) {
  .dd-box {
  margin: 8px auto;
}

  .dd-box__header {
  padding: 20px 14px 18px;
}

  .punbb .dd-box__title,
  .dd-box__title {
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
}

  .dd-box__body {
  padding: 14px 14px 20px;
}

  .dd-box__footer {
  padding: 17px 14px;
}
}

/* =========================================================
   CHRONOLOGY
   Repeated [chronology_item] sections form a growing timeline in any post.
   ========================================================= */

.emo-chronology {
  box-sizing: border-box;
  width: 100%;
  max-width: 860px;
  margin: 8px auto;
  padding: 30px 24px 36px;
  font-family: var(--font-main);
}

.emo-chronology__header {
  max-width: 680px;
  margin: 0 auto 30px;
  text-align: center;
}

.emo-chronology__heading {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  padding: 7px 24px;
  font: normal var(--font-size-category-title)/1.25 var(--font-forum-ui);
  letter-spacing: var(--letter-spacing-category-title);
  text-transform: uppercase;
}

.emo-chronology__lead,
.emo-chronology__footer {
  font: normal var(--font-size-base)/1.55 var(--font-main);
}

.emo-chronology__lead {
  margin-top: 14px;
}

.emo-chronology__items {
  position: relative;
  display: grid;
  gap: 18px;
}

.emo-chronology__items::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  content: "";
  transform: translateX(-50%);
}

.emo-chronology__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 156px minmax(0, 1fr);
  align-items: center;
  min-width: 0;
}

.emo-chronology__date {
  z-index: 2;
  grid-column: 2;
  grid-row: 1;
  box-sizing: border-box;
  width: 88px;
  min-height: 28px;
  margin: 0 auto;
  padding: 7px 7px 6px;
  overflow: hidden;
  font: 700 var(--font-size-xs)/1.15 var(--font-forum-ui);
  letter-spacing: .7px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emo-chronology__card {
  position: relative;
  z-index: 1;
  grid-row: 1;
  min-width: 0;
  padding: 15px 17px;
}

.emo-chronology__card::before {
  position: absolute;
  top: 50%;
  width: 78px;
  height: 2px;
  content: "";
}

.emo-chronology__card::after {
  position: absolute;
  top: calc(50% - 4px);
  width: 8px;
  height: 8px;
  content: "";
}

.emo-chronology__item:nth-child(odd) .emo-chronology__card {
  grid-column: 1;
  text-align: right;
}

.emo-chronology__item:nth-child(odd) .emo-chronology__card::before {
  right: -78px;
}

.emo-chronology__item:nth-child(odd) .emo-chronology__card::after {
  right: -4px;
}

.emo-chronology__item:nth-child(even) .emo-chronology__card {
  grid-column: 3;
  text-align: left;
}

.emo-chronology__item:nth-child(even) .emo-chronology__card::before {
  left: -78px;
}

.emo-chronology__item:nth-child(even) .emo-chronology__card::after {
  left: -4px;
}

.emo-chronology__event-name {
  margin-bottom: 7px;
  font: 700 var(--font-size-base)/1.3 var(--font-forum-ui);
  letter-spacing: .35px;
  text-transform: uppercase;
}

.emo-chronology__text {
  font: normal var(--font-size-sm)/1.5 var(--font-main);
}

.emo-chronology__text :is(p, ul, ol, blockquote) {
  margin: 7px 0 0;
}

.emo-chronology__text > :first-child {
  margin-top: 0;
}

.emo-chronology__link {
  display: inline-flex;
  min-height: 22px;
  margin-top: 11px;
  align-items: center;
  justify-content: center;
  padding: var(--ui-action-padding);
  font: var(--ui-action-font);
  letter-spacing: .55px;
  text-transform: uppercase;
}



.emo-chronology__footer {
  max-width: 680px;
  margin: 28px auto 0;
  padding-top: 18px;
  text-align: center;
}

@media (max-width: 600px) {
  #pun-viewtopic .emo-chronology-post .post-box,
  #pun-post #post-preview .emo-chronology-post .post-box {
  padding-right: 12px;
  padding-left: 12px;
}

  .emo-chronology {
  padding: 22px 12px 28px;
}

  .emo-chronology__header {
  margin-bottom: 24px;
}

  .emo-chronology__heading {
  width: 100%;
  padding-right: 12px;
  padding-left: 12px;
}

  .emo-chronology__items {
  gap: 14px;
}

  .emo-chronology__items::before {
  left: 42px;
  transform: none;
}

  .emo-chronology__item {
  grid-template-columns: 104px minmax(0, 1fr);
}

  .emo-chronology__date {
  grid-column: 1;
  width: 80px;
  margin-right: 0;
  margin-left: 2px;
  padding-right: 4px;
  padding-left: 4px;
}

  .emo-chronology__item:nth-child(odd) .emo-chronology__card,
  .emo-chronology__item:nth-child(even) .emo-chronology__card {
  grid-column: 2;
  text-align: left;
}

  .emo-chronology__item:nth-child(odd) .emo-chronology__card::before,
  .emo-chronology__item:nth-child(even) .emo-chronology__card::before {
  right: auto;
  left: -62px;
  width: 62px;
}

  .emo-chronology__item:nth-child(odd) .emo-chronology__card::after,
  .emo-chronology__item:nth-child(even) .emo-chronology__card::after {
  right: auto;
  left: -4px;
}

  .emo-chronology__card {
  padding: 13px 14px;
}
}

/* =========================================================
   EVENT WORDLE
   A dated [wordle] block exposes one shared word per event day.
   ========================================================= */

.emo-wordle,
.emo-question-event,
.emo-bingo {
  margin: 0 auto;
  overflow: hidden;
  font: normal var(--font-size-base)/1.45 var(--font-main);
}

.emo-wordle {
  width: min(100%, 620px);
}

.emo-wordle [hidden] {
  display: none;
}

.emo-wordle__header,
.emo-question-event__header,
.emo-bingo__header {
  position: relative;
  padding: 25px 24px 23px;
  text-align: center;
}



.emo-wordle__eyebrow,
.emo-wordle__period,
.emo-wordle__day,
.emo-question-event__eyebrow,
.emo-question-event__period,
.emo-question-event__day,
.emo-bingo__eyebrow,
.emo-bingo__period {
  font: 700 var(--font-size-xs)/1.35 var(--font-forum-ui);
  letter-spacing: 1.3px;
  text-transform: uppercase;
}



.punbb .emo-wordle__title,
.punbb .emo-question-event__title,
.punbb .emo-bingo__title {
  margin-top: 8px;
  font: normal 26px/1.15 var(--font-forum-title);
  letter-spacing: 1px;
}

.emo-wordle__period,
.emo-question-event__period,
.emo-bingo__period {
  margin-top: 7px;
}

.emo-wordle__day,
.emo-question-event__day {
  width: fit-content;
  margin: 13px auto 0;
  padding: 5px 10px;
}

.emo-question-event__intro,
.emo-bingo__intro {
  padding: 20px clamp(20px, 6vw, 46px) 0;
  text-align: center;
}

.emo-wordle__rules {
  margin: 24px 24px 0;
  text-align: left;
}

.emo-wordle__intro {
  margin-top: 14px;
  white-space: pre-line;
}

.emo-wordle__hint {
  display: inline-block;
  width: .9em;
  height: .9em;
  vertical-align: -.05em;
}

.emo-wordle__notice,
.emo-question-event__notice,
.emo-bingo__notice {
  padding: 18px;
  text-align: center;
}

.emo-wordle__notice {
  margin: 24px;
}

.emo-wordle__grid {
  display: grid;
  grid-template-columns: repeat(var(--wordle-length, 5), minmax(0, 48px));
  justify-content: center;
  gap: 6px;
  margin: 24px auto 18px;
  padding: 0 16px;
}

.emo-wordle__tile {
  display: grid;
  min-width: 0;
  aspect-ratio: 1;
  place-items: center;
  font: 700 19px/1 var(--font-forum-ui);
  text-transform: uppercase;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}









.emo-wordle__status {
  width: min(calc(100% - 32px), 488px);
  margin: 0 auto 12px;
  padding: 8px 10px;
  text-align: center;
}

.emo-wordle__form {
  display: flex;
  width: min(calc(100% - 32px), 488px);
  align-items: stretch;
  justify-content: center;
  gap: 7px;
  margin: 0 auto 16px;
}

.emo-wordle__input {
  min-width: 0;
  flex: 1;
  padding: 8px 10px;
  font: 700 var(--font-size-base)/1.3 var(--font-forum-ui);
  letter-spacing: 1px;
  text-transform: uppercase;
}



.emo-wordle__keyboard {
  display: grid;
  gap: 5px;
  width: min(calc(100% - 24px), 520px);
  margin: 0 auto;
  padding: 0 0 24px;
}

.emo-wordle__keyboard-row {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.emo-wordle__key {
  display: grid;
  min-width: 0;
  height: 35px;
  flex: 0 1 34px;
  place-items: center;
  padding: 0;
  font: 700 var(--font-size-sm)/1 var(--font-forum-ui);
  cursor: pointer;
}

.emo-wordle__key--wide {
  flex-basis: 44px;
}



.emo-wordle__key:disabled,
.emo-wordle__button:disabled,
.emo-wordle__input:disabled {
  cursor: default;
}

@media (max-width: 600px) {
  .emo-wordle__header,
  .emo-question-event__header,
  .emo-bingo__header {
  padding: 21px 16px 19px;
}

  .punbb .emo-wordle__title,
  .punbb .emo-question-event__title,
  .punbb .emo-bingo__title {
  font-size: 22px;
}

  .emo-wordle__grid {
  grid-template-columns: repeat(var(--wordle-length, 5), minmax(0, 42px));
  gap: 5px;
  margin-top: 20px;
}

  .emo-wordle__tile {
  font-size: 17px;
}

  .emo-wordle__form {
  flex-wrap: wrap;
}

  .emo-wordle__input {
  flex-basis: 100%;
}

  .emo-wordle__button {
  flex: 1 1 120px;
}

  .emo-wordle__keyboard {
  width: calc(100% - 12px);
}

  .emo-wordle__keyboard-row {
  gap: 3px;
}

  .emo-wordle__key {
  height: 33px;
  flex-basis: 27px;
  font-size: 9px;
}

  .emo-wordle__key--wide {
  flex-basis: 34px;
}
}

/* =========================================================
   MONTHLY NEWS
   The post is stored as readable [monthly_*] tags and rendered by
   monthly-news.js. The admin page and the published card share tokens.
   ========================================================= */

#pun-viewtopic .emo-news-post .post-box {
  padding: 24px 18px 42px;
}

.emo-news {
  width: min(100%, 900px);
  margin: 0 auto;
  overflow: hidden;
  font: normal var(--font-size-base)/1.55 var(--font-main);
}

.emo-news__header {
  position: relative;
  min-height: 132px;
  padding: 31px 34px 27px;
  text-align: center;
}



.emo-news__eyebrow {
  font: 700 var(--font-size-xs)/1.3 var(--font-forum-ui);
  letter-spacing: 1.6px;
  text-transform: uppercase;
}



.emo-news__month {
  margin-top: 7px;
  font-size: var(--font-size-xs);
}

.punbb .emo-news__title {
  margin-top: 10px;
  font: normal 23px/1.2 var(--font-forum-title);
  letter-spacing: .7px;
}

.emo-news__lead,
.emo-news__footer {
  padding: 24px clamp(20px, 6vw, 58px);
  text-align: center;
}

.emo-news__lead p + p,
.emo-news__footer p + p,
.emo-news__text p + p,
.emo-news__card-body p + p {
  margin-top: 9px;
}

.emo-news__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0 clamp(14px, 4vw, 36px) 28px;
  overflow: hidden;
}

.emo-news__stat {
  display: flex;
  min-height: 86px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 13px 9px;
  text-align: center;
}

.emo-news__stat strong {
  font: normal 22px/1 var(--font-forum-title);
}

.emo-news__stat span {
  margin-top: 7px;
  font: 700 var(--font-size-xs)/1.35 var(--font-forum-ui);
  letter-spacing: .35px;
  text-transform: uppercase;
}

.emo-news__section {
  padding: 27px clamp(18px, 5vw, 46px);
}

.punbb .emo-news__section > .emo-news__section-title,
.emo-news__section-title {
  width: fit-content;
  min-width: 190px;
  margin: 0 auto 20px;
  padding: 8px 20px;
  font: 700 var(--font-size-category-title)/1.25 var(--font-forum-ui);
  letter-spacing: var(--letter-spacing-category-title);
  text-align: center;
  text-transform: uppercase;
}

.emo-news__text {
  max-width: 720px;
  margin: 0 auto;
}

.emo-news__people,
.emo-news__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.emo-news__person {
  display: flex;
  min-width: 0;
  min-height: 66px;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
}



.emo-news__person img,
.emo-news__avatar-empty {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  object-fit: cover;
}



.emo-news__person-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.emo-news__person-name {
  overflow: hidden;
  font: 700 var(--font-size-base)/1.35 var(--font-forum-ui);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emo-news__person small {
  margin-top: 3px;
  font-size: var(--font-size-sm);
}

.emo-news__topics {
  display: grid;
  gap: 6px;
}

.emo-news__topic {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 42px;
  padding: 7px 11px;
}



.emo-news__topic-index {
  font: 700 var(--font-size-xs)/1 var(--font-forum-ui);
  letter-spacing: 1px;
}

.emo-news__topic-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emo-news__topic strong {
  font-size: var(--font-size-sm);
}

.emo-news__card {
  display: flex;
  min-width: 0;
  overflow: hidden;
}

.emo-news__card-image {
  width: 116px;
  min-height: 148px;
  flex: 0 0 116px;
  object-fit: cover;
}

.emo-news__card-body {
  display: flex;
  min-width: 0;
  flex: 1;
  align-items: flex-start;
  flex-direction: column;
  padding: 15px;
}

.emo-news__card-type {
  font: 700 var(--font-size-xs)/1.2 var(--font-forum-ui);
  letter-spacing: .9px;
  text-transform: uppercase;
}

.punbb .emo-news__card-title,
.emo-news__card-title {
  margin-top: 7px;
  font: 700 var(--font-size-base)/1.35 var(--font-forum-ui);
}

.emo-news__card-body p {
  margin-top: 8px;
  font-size: var(--font-size-sm);
}



.emo-news__card-link{
  margin-top: auto;
}





/* Reusable forum navigation page: edit only section headings, link labels and hrefs. */
.emo-navigation-page {
  box-sizing: border-box;
  width: min(100%, 960px);
  margin: 20px auto;
  font: normal var(--font-size-base)/1.45 var(--font-main);
}

.emo-navigation__hero {
  padding: 30px 32px;
  text-align: center;
}

.emo-navigation__hero > span {
  font: 700 var(--font-size-xs)/1.2 var(--font-forum-ui);
  letter-spacing: 1.5px;
}

.emo-navigation__hero h1 {
  margin-top: 9px;
  font: normal 28px/1.15 var(--font-forum-title);
}

.emo-navigation__hero p {
  margin: 10px auto 0;
}

.emo-navigation__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.emo-navigation__section {
  min-width: 0;
  padding: 24px 22px 20px;
}

#pun-main .emo-navigation__section h2 {
  display: inline-block;
  margin: 0 0 14px;
  padding: 7px 12px 6px;
  font: 700 var(--font-size-md)/1.2 var(--font-forum-ui);
  letter-spacing: .08em;
}

.emo-navigation__section ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.emo-navigation__section li {
  min-width: 0;
}

.emo-navigation__section a {
  position: relative;
  display: block;
  padding: 9px 12px 8px 28px;
  transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.emo-navigation__section a::before {
  content: "—";
  position: absolute;
  margin-left: -17px;
  font-weight: 700;
}



@media (max-width: 760px) {
  .emo-navigation-page {
  margin: 12px auto;
}

  .emo-navigation__grid {
  grid-template-columns: minmax(0, 1fr);
}
}

@media (max-width: 480px) {
  .emo-navigation__hero {
  padding: 24px 18px;
}

  .emo-navigation__hero h1 {
  font-size: 24px;
}

  .emo-navigation__section {
  padding: 18px 14px 14px;
}
}

/* Generator page */
.emo-monthly-admin {
  width: min(100%, 1180px);
  margin: 20px auto;
  font: normal var(--font-size-base)/1.45 var(--font-main);
}

.emo-monthly-admin__hero {
  padding: 28px 32px;
}

.emo-monthly-admin__hero > span {
  font: 700 var(--font-size-xs)/1.2 var(--font-forum-ui);
  letter-spacing: 1.5px;
}

.emo-monthly-admin__hero h1 {
  margin-top: 8px;
  font: normal 25px/1.15 var(--font-forum-title);
}

.emo-monthly-admin__hero p {
  max-width: 680px;
  margin-top: 9px;
}

.emo-monthly-admin__panel {
  padding: 20px;
}

.emo-monthly-admin__denied {
  padding: 24px;
  text-align: center;
}

.emo-monthly-admin__start {
  display: grid;
  grid-template-columns: 190px auto minmax(220px, 1fr);
  align-items: end;
  gap: 12px;
  margin-top: 12px;
}

.emo-monthly-admin__status {
  min-height: 30px;
  align-content: center;
  padding: 7px 10px;
}





.emo-monthly-admin__settings {
  margin-top: 12px;
}

.emo-wordle__rules-toggle,
.emo-monthly-admin__settings summary {
  font-weight: 700;
  cursor: pointer;
}

.emo-monthly-admin__settings-grid,
.emo-monthly-admin__manual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
  margin-top: 16px;
}

.emo-monthly-admin__field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.emo-monthly-admin__field > span {
  font-weight: 700;
}

.emo-monthly-admin__field small,
.emo-monthly-admin__hint {
  font-size: var(--font-size-sm);
}

.emo-monthly-admin__field :is(input, select, textarea),
.emo-monthly-admin__output-panel > textarea {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 9px 10px;
}

.emo-monthly-admin__field textarea,
.emo-monthly-admin__output-panel > textarea {
  resize: vertical;
}



.emo-monthly-admin__field--small {
  max-width: 190px;
}

.emo-monthly-admin__workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 43%);
  align-items: start;
  gap: 12px;
  margin-top: 12px;
}

.emo-monthly-admin__editor {
  display: grid;
  gap: 12px;
}

.punbb .emo-monthly-admin__panel h2,
.punbb .emo-monthly-admin__panel-heading h2 {
  margin-bottom: 14px;
  font: 700 var(--font-size-lg)/1.3 var(--font-forum-ui);
  letter-spacing: .6px;
  text-transform: uppercase;
}

.emo-monthly-admin__panel > .emo-monthly-admin__field + .emo-monthly-admin__field {
  margin-top: 13px;
}

.emo-monthly-admin__toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 16px;
}

.emo-monthly-admin__toggles label {
  padding: 6px 9px;
  cursor: pointer;
}

.emo-monthly-admin__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.emo-monthly-admin__stat {
  display: grid;
  min-height: 67px;
  place-content: center;
  padding: 9px;
  text-align: center;
}

.emo-monthly-admin__stat strong {
  font: normal 18px/1 var(--font-forum-title);
}

.emo-monthly-admin__stat span {
  margin-top: 5px;
  font-size: var(--font-size-xs);
}

.emo-monthly-admin__results-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}

.punbb .emo-monthly-admin__results-grid h3 {
  margin-bottom: 7px;
  font-weight: 700;
}

.emo-monthly-admin__result-list {
  display: grid;
  gap: 4px;
}

.emo-monthly-admin__result-row {
  display: grid;
  grid-template-columns: auto 32px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 5px 7px;
  cursor: pointer;
}

.emo-monthly-admin__result-row:not(:has(img)) {
  grid-template-columns: auto minmax(0, 1fr);
}

.emo-monthly-admin__result-row img {
  width: 32px;
  height: 32px;
  object-fit: cover;
}

.emo-monthly-admin__result-row > span {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.emo-monthly-admin__result-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}



.emo-monthly-admin__manual-items {
  display: grid;
  gap: 9px;
  margin: 13px 0;
}

.emo-monthly-admin__manual-row {
  padding: 13px;
}

.emo-monthly-admin__manual-head,
.emo-monthly-admin__panel-heading,
.emo-monthly-admin__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.emo-monthly-admin__manual-head .emo-monthly-admin__field {
  width: min(100%, 240px);
}

.emo-monthly-admin__remove {
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.emo-monthly-admin__manual-row > .emo-monthly-admin__field {
  margin-top: 11px;
}

.emo-monthly-admin__output-panel > textarea {
  min-height: 310px;
  font-family: monospace;
  font-size: var(--font-size-sm);
}

.emo-monthly-admin__preview-column {
  position: sticky;
  top: 12px;
}

.emo-monthly-admin__preview-label {
  margin-bottom: 7px;
  font: 700 var(--font-size-xs)/1.2 var(--font-forum-ui);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.emo-monthly-admin__preview {
  min-height: 240px;
  padding: 9px;
}

.emo-monthly-admin__preview .emo-news {
  width: 100%;
}

.emo-monthly-admin__button:disabled {
  cursor: wait;
}

@media (max-width: 820px) {
  .emo-news__people,
  .emo-news__cards {
  grid-template-columns: 1fr;
}

  .emo-monthly-admin__workspace {
  grid-template-columns: 1fr;
}

  .emo-monthly-admin__preview-column {
  position: static;
}
}

/* =========================================================
   DAILY QUESTION EVENT
   A dated [daily_question] block exposes one question and its reward per day.
   ========================================================= */

.emo-question-event {
  width: min(100%, 680px);
}

.emo-question-event__card {
  width: min(calc(100% - 32px), 560px);
  margin: 24px auto;
  padding: 24px 24px 20px;
  text-align: center;
}

.emo-question-event__label {
  font: 700 var(--font-size-xs)/1.3 var(--font-forum-ui);
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.emo-question-event__question {
  margin: 14px auto 0;
  font: 700 var(--font-size-lg)/1.4 var(--font-forum-ui);
}

.emo-question-event__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 20px;
}

.emo-question-event__price {
  font: 700 var(--font-size-md)/1.3 var(--font-forum-ui);
}

.emo-question-event__status {
  margin-top: 12px;
  font-size: var(--font-size-sm);
}

.emo-question-event__status:empty {
  display: none;
}

.emo-question-event__notice {
  width: min(calc(100% - 32px), 560px);
  margin: 24px auto;
}

@media (max-width: 600px) {
  .emo-question-event__card {
  padding: 20px 16px 17px;
}

  .emo-question-event__question {
  font-size: var(--font-size-md);
}

  .emo-question-event__button {
  flex: 1 1 180px;
}
}

/* =========================================================
   BINGO EVENT
   A reusable [bingo] grid collects selected cells into a reply quote.
   ========================================================= */

#pun-viewtopic .emo-question-event-post .post-box,
#pun-viewtopic .emo-bingo-post .post-box {
  padding: 28px 18px 48px;
}

.emo-bingo {
  width: min(100%, 760px);
}

.emo-bingo__card {
  margin: 24px auto;
  padding: 0 24px 24px;
}

.emo-bingo__grid {
  display: grid;
  grid-template-columns: repeat(var(--bingo-columns, 4), minmax(0, 1fr));
  gap: 10px;
}

.emo-bingo__cell {
  position: relative;
  display: flex;
  min-height: 112px;
  align-items: center;
  justify-content: center;
  padding: 28px 10px 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}



.emo-bingo__cell.is-selected {
  transform: translateY(-1px);
}

.emo-bingo__cell input {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 18px;
  height: 18px;
  margin: 0;
}

.emo-bingo__cell-text {
  overflow-wrap: anywhere;
}

.emo-bingo__controls {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-top: 22px;
}

.emo-bingo__status {
  font-size: var(--font-size-sm);
  text-align: center;
}

.emo-bingo__status:empty {
  display: none;
}

.emo-bingo__notice {
  width: min(calc(100% - 48px), 620px);
  margin: 24px auto;
}

@media (max-width: 600px) {
  .emo-bingo__card {
  padding: 0 12px 18px;
}

  .emo-bingo__grid {
  gap: 6px;
}

  .emo-bingo__cell {
  min-height: 82px;
  padding: 25px 6px 8px;
  font-size: var(--font-size-sm);
}

  .emo-bingo__cell input {
  top: 7px;
  left: 7px;
  width: 16px;
  height: 16px;
}

  .emo-bingo__button {
  flex: 1 1 220px;
}
}

@media (max-width: 600px) {
  #pun-viewtopic .emo-news-post .post-box {
  padding: 10px 8px 28px;
}

  .emo-news__header {
  min-height: 0;
  padding: 24px 17px 21px;
}

  .punbb .emo-news__title {
  font-size: 19px;
}

  .emo-news__lead,
  .emo-news__footer,
  .emo-news__section {
  padding: 19px 15px;
}

  .emo-news__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 10px 20px;
}

  .emo-news__stat {
  min-height: 75px;
}

  .emo-news__stat:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

  .emo-news__section-title {
  width: 100%;
  min-width: 0;
}

  .emo-news__topic {
  grid-template-columns: 28px minmax(0, 1fr);
}

  .emo-news__topic strong {
  grid-column: 2;
}

  .emo-news__card-image {
  width: 92px;
  min-height: 132px;
  flex-basis: 92px;
}

  .emo-news__card-body {
  padding: 12px;
}

  .emo-monthly-admin {
  margin: 8px auto;
}

  .emo-monthly-admin__hero,
  .emo-monthly-admin__panel {
  padding: 16px;
}

  .emo-monthly-admin__start,
  .emo-monthly-admin__settings-grid,
  .emo-monthly-admin__manual-grid,
  .emo-monthly-admin__results-grid {
  grid-template-columns: 1fr;
}

  .emo-monthly-admin__stats {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

  .emo-monthly-admin__field--small {
  max-width: none;
}

  .emo-monthly-admin__panel-heading {
  align-items: stretch;
  flex-direction: column;
}

  .emo-monthly-admin__actions,
  .emo-monthly-admin__actions .emo-monthly-admin__button {
  width: 100%;
}
}

/* =========================================================
   PLAYER CLEANUP
   Extends the monthly-news card and generator components.
   ========================================================= */

.emo-cleanup__player {
  min-height: 0;
  align-items: flex-start;
}

.emo-cleanup__players {
  grid-template-columns: 1fr;
}

.emo-cleanup__reasons,
.emo-cleanup-admin__reasons {
  padding: 5px 7px;
  font-size: var(--font-size-xs);
}

.emo-cleanup__reasons {
  margin-top: 7px;
}

.emo-cleanup-admin__start {
  grid-template-columns: auto minmax(220px, 1fr);
}

.emo-cleanup-admin__criteria {
  display: grid;
  gap: 8px;
  margin-top: 13px;
}

.emo-cleanup-admin__criterion {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 76px auto;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  cursor: pointer;
}

.emo-cleanup-admin__criterion input[type="number"] {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  padding: 6px 7px;
}

.emo-cleanup-admin__list-heading {
  align-items: flex-start;
}

.emo-cleanup-admin__view-toggle {
  margin-top: 14px;
}

.emo-cleanup-admin__results {
  display: grid;
  gap: 7px;
}

.emo-cleanup-admin__player {
  display: grid;
  grid-template-columns: auto 42px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  padding: 10px;
}



.emo-cleanup-admin__player > img,
.emo-cleanup-admin__player > .emo-news__avatar-empty {
  width: 42px;
  height: 42px;
  flex-basis: 42px;
}

.emo-cleanup-admin__player-body {
  display: grid;
  min-width: 0;
  gap: 7px;
}

.emo-cleanup-admin__player-name {
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.emo-cleanup-admin__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 10px;
}

.emo-cleanup-admin__fact {
  display: grid;
  min-width: 0;
}

.emo-cleanup-admin__fact strong {
  font-size: var(--font-size-xs);
}

.emo-cleanup-admin__fact small {
  font-size: var(--font-size-sm);
}

@media (max-width: 600px) {
  .emo-cleanup-admin__start,
  .emo-cleanup-admin__facts {
  grid-template-columns: 1fr;
}

  .emo-cleanup-admin__criterion {
  grid-template-columns: auto minmax(0, 1fr) 62px auto;
}

  .emo-cleanup-admin__player {
  grid-template-columns: auto 36px minmax(0, 1fr);
  padding: 8px;
}

  .emo-cleanup-admin__player > img,
  .emo-cleanup-admin__player > .emo-news__avatar-empty {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
}
}
#pun-profile #profile8 .emo-profile-field-card :is( input[type="text"], input[type="url"], textarea, select ), .punbb :is(input:not([type]), input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], textarea, select) {
  max-width: 100%;
  padding: 8px 10px;
}/* Message-only placement. Appearance of post actions comes from the shared recipe. */
#pun-viewtopic {
  --inner-main-padding: 23px 24px 30px;
  --pagination-size: 11px;
  --pagination-line-height: 19px;
  --pagination-case: lowercase;
  --pagination-tracking: 0;
  --inner-links-height: 31px;
  --inner-links-padding: 0 0 9px 15px;
}
#pun-viewtopic #pun-main > :is(.linkst, .linksb) .postlink {
  --ui-action-background: var(--color-quick-link);
  --ui-action-control-padding: 0 20px;
}
#pun-viewtopic #pun-main > :is(.linkst, .linksb) .postlink a {
  min-width: 88px;
}

#pun-viewtopic #pun-main > .topic > .post .post-links li:not(.pl-email):first-child {
  margin-left: auto;
}
#pun-viewtopic #pun-main > .topic > .post .FNTslider {
  left: auto;
  right: 40px;
  width: 176px;
  height: 7px;
  transform: translateY(-50%);
}


/* Native plugin CSS forces padding/margins with !important. Normalize only
   these wrappers; otherwise the two 24px glyphs have different baselines. */
#pun-viewtopic #pun-main .post :is(.post-rating, .post-vote) p {
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
}
/* Reclaim the native comment slot only when its action is unavailable.
   The same v=0/mylike states hide the native action in the quickplus recipe. */
#pun-viewtopic .post:is(.mylike, :has(.post-vote a[href*="v=0"]), :not(:has(.post-vote a))) {
  --message-reactions-right: 51px;
  --message-picker-right: -39px;
}
#pun-viewtopic .reactions-container {
  align-items: center;
  gap: 5px;
  flex-wrap: nowrap;
}
#pun-viewtopic .reaction-counters-container {
  order: 0;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 1px 5px;
}
#pun-viewtopic .reaction-counters-container:empty {
  display: none;
}
#pun-viewtopic .reaction-counter__count {
  display: none;
}
#pun-viewtopic .reaction-counter__emoji {
  padding: 0;
  min-width: 0;
  width: 20px;
  justify-content: center;
}
#pun-viewtopic .reaction-picker {
  position: static;
  order: 1;
  flex: 0 0 24px;
}
#pun-viewtopic .reaction-picker-panel {
  left: auto;
  right: var(--message-picker-right, -72px);
  max-width: calc(100vw - 100px);
}
#pun-viewtopic .reaction-picker-panel .emoji-mart {
  max-width: 100%;
}
/* The topic intentionally exposes its native upper crumbs above pagination. */
#pun-viewtopic #pun-crumbs1 {
  --topic-section-order: 0;
  margin-bottom: 7px;
  padding-left: 15px;
}
#pun-viewtopic #pun-main > :is(.linkst, .linksb) .pagelink {
  font-weight: 700;
  font-family: var(--font-forum-ui);
}
#pun-viewtopic #topic-modmenu strong {
  position: relative;
  display: inline-block;
}
#pun-viewtopic #topic-modmenu strong::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 6px;
  width: 5px;
  height: 5px;
  transform: rotate(45deg);
  pointer-events: none;
}
.punbb .post-content .spoiler-box > div:first-child.visible {
  --message-spoiler-icon: url("https://forumstatic.ru/files/001c/c4/9a/29547.svg?v=1");
}
.punbb .post-content .spoiler-box > blockquote.visible {
  padding: 11px 12px;
}
/* One typography recipe for all BBCode labels, including preview. */
.punbb .post-content :is(.quote-box > cite, .code-box > strong.legend, .spoiler-box > div:first-child),
#pun-post #post-preview :is(.quote-box > cite, .code-box > strong.legend, .spoiler-box > div:first-child) {
  font: 600 10px/16px var(--font-navigation);
  text-transform: lowercase;
  letter-spacing: 0;
}
.punbb .post-content .quote-box:has(> cite) > blockquote,
#pun-post #post-preview .quote-box:has(> cite) > blockquote {
  padding: 11px 12px;
}
/* Rusff can render either a bare pre or pre inside a scrollbox. Pad the
   content once, retaining the native scroll area and whitespace. */
.punbb .post-content .code-box :is(pre, .scrollbox:not(:has(pre))),
#pun-post #post-preview .code-box :is(pre, .scrollbox:not(:has(pre))) {
  margin: 0;
  padding: 11px 12px;
}
/* Only these three reactions have supplied artwork; other emoji stay dynamic. */




@media (max-width: 760px) {
    #pun-viewtopic #pun-main > .topic > .post > .container {
  padding: 14px 10px;
}
    #pun-viewtopic #pun-main > .topic > .post .post-body {
  margin-left: 0;
  min-height: 100px;
  clear: both;
}
    #pun-viewtopic #pun-main > .topic > .post .post-box {
  padding: 16px 0 48px;
  min-height: 100px;
}
    #pun-viewtopic #pun-main > .topic > .post .post-links ul {
  flex-wrap: wrap;
  row-gap: 6px;
}
    #pun-viewtopic #pun-main > .topic > .post .FNTslider {
  width: 90px;
}
}

/* The presentation adapter moves existing utility controls into the native
   submit row, preserving button handlers and form submission semantics. */
.punbb .emo-editor-actions > .emo-editor-utility-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.punbb .emo-editor-actions > :is(input, span),
.punbb .emo-editor-utility-row > :is(input, small) {
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
}

/* Native tag rows can wrap their controls in spans. Keep those wrappers
   within the same editor gutter without inheriting generic form offsets. */
#pun-post #post-form p:has(:is(input, button)[value*="òåã" i]) > :is(label, br) {
  flex-basis: 100%;
  width: 100%;
  margin: 0;
}
#pun-post #post-form p:has(:is(input, button)[value*="òåã" i]) > span.input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 0;
}
#pun-post #post-form p:has(:is(input, button)[value*="òåã" i]) > span.input > input[type="text"] {
  width: 100%;
  margin: 0;
}
#pun-post #post-form p:has(:is(input, button)[value*="òåã" i]) :is(input, button)[value*="òåã" i] {
  margin: 0;
}

/* Shared standard actions. Artwork and Figma-specific pills remain separate. */
#pun-viewtopic #pun-main > #topic-modmenu select,
#pun-viewtopic #pun-main > .topic > .post .post-links a,
#pun-main :is(.linkst, .linksb) .postlink a,
#pun-profile #viewprofile .emo-profile-page-edit a,
#pun-profile #profile8 .emo-profile-editor-fields > .formsubmit input.button,
#pun-messages #messages > .linksb .postlink input.button,
#pun-messages #profile.messages-container > .container > fieldset:has(> .fs-box > .post) .post-links a,
#mask_dialog .hv-control .button,
#pun-reputation :is(button, input[type="button"], input[type="submit"]),
:is(.punbb #pun-admain, .punbb#pun-login, .punbb#pun-register, .punbb#pun-search, .punbb#pun-message, .punbb#pun-redirect, .punbb#pun-messages, .punbb .emo-uploads-page) :is(input.button, input[type="submit"], input[type="button"], input[type="reset"], button.button),
#pun-post #post-form :is(input, button)[value*="òåã" i],
.emo-news__card-link,
.emo-wordle__button,
.emo-monthly-admin__button,
.emo-question-event__button,
.emo-bingo__button,
.emo-personal-title-toolbar__link-apply,
#pun-viewtopic #pun-main #post-form .formsubmit input.button,
#pun-post #pun-main #post-form .formsubmit input.button,
#pun-viewtopic #pun-main #post-form #togglePreview input.button,
#pun-post #pun-main #post-form #togglePreview input.button,
#pun-viewtopic #pun-main #post-form input[type="button"][onclick*="dice("],
#pun-post #pun-main #post-form input[type="button"][onclick*="dice("],
#pun-messages form#post #post-form input[type="button"][onclick*="dice("],
#pun-messages form#post > #post-form > p:has(> span > input.button) input.button,
.punbb .emo-news__card-link,
.punbb .emo-wordle__button,
.punbb .emo-monthly-admin__button,
.punbb .emo-question-event__button,
.punbb .emo-bingo__button,
.punbb .emo-personal-title-toolbar__link-apply{
  display:inline-flex;
  box-sizing:border-box;
  align-items:center;
  justify-content:center;
  min-height:var(--ui-action-min-height, 19px);
  height:auto;
  padding:var(--ui-action-control-padding, 0 10px);
  font:600 10px/var(--ui-action-line-height, 19px) var(--font-navigation);
  letter-spacing:0;
  text-transform:var(--ui-action-case, lowercase);
  text-align:center;
}
#pun-viewtopic #pun-main > #topic-modmenu select:where(:not(:disabled)),
#pun-viewtopic #pun-main > .topic > .post .post-links a:where(:not(:disabled)),
#pun-main :is(.linkst, .linksb) .postlink a:where(:not(:disabled)),
#pun-profile #viewprofile .emo-profile-page-edit a:where(:not(:disabled)),
#pun-profile #profile8 .emo-profile-editor-fields > .formsubmit input.button:where(:not(:disabled)),
#pun-messages #messages > .linksb .postlink input.button:where(:not(:disabled)),
#pun-messages #profile.messages-container > .container > fieldset:has(> .fs-box > .post) .post-links a:where(:not(:disabled)),
#mask_dialog .hv-control .button:where(:not(:disabled)),
#pun-reputation :is(button, input[type="button"], input[type="submit"]):where(:not(:disabled)),
:is(.punbb #pun-admain, .punbb#pun-login, .punbb#pun-register, .punbb#pun-search, .punbb#pun-message, .punbb#pun-redirect, .punbb#pun-messages, .punbb .emo-uploads-page) :is(input.button, input[type="submit"], input[type="button"], input[type="reset"], button.button):where(:not(:disabled)),
#pun-post #post-form :is(input, button)[value*="òåã" i]:where(:not(:disabled)),
.emo-news__card-link:where(:not(:disabled)),
.emo-wordle__button:where(:not(:disabled)),
.emo-monthly-admin__button:where(:not(:disabled)),
.emo-question-event__button:where(:not(:disabled)),
.emo-bingo__button:where(:not(:disabled)),
.emo-personal-title-toolbar__link-apply:where(:not(:disabled)),
#pun-viewtopic #pun-main #post-form .formsubmit input.button:where(:not(:disabled)),
#pun-post #pun-main #post-form .formsubmit input.button:where(:not(:disabled)),
#pun-viewtopic #pun-main #post-form #togglePreview input.button:where(:not(:disabled)),
#pun-post #pun-main #post-form #togglePreview input.button:where(:not(:disabled)),
#pun-viewtopic #pun-main #post-form input[type="button"][onclick*="dice("]:where(:not(:disabled)),
#pun-post #pun-main #post-form input[type="button"][onclick*="dice("]:where(:not(:disabled)),
#pun-messages form#post #post-form input[type="button"][onclick*="dice("]:where(:not(:disabled)),
#pun-messages form#post > #post-form > p:has(> span > input.button) input.button:where(:not(:disabled)),
.punbb .emo-news__card-link:where(:not(:disabled)),
.punbb .emo-wordle__button:where(:not(:disabled)),
.punbb .emo-monthly-admin__button:where(:not(:disabled)),
.punbb .emo-question-event__button:where(:not(:disabled)),
.punbb .emo-bingo__button:where(:not(:disabled)),
.punbb .emo-personal-title-toolbar__link-apply:where(:not(:disabled)){
  cursor:pointer;
}



/* Shared list component: forum topics, active topics and user directories. */
#pun-main .emo-list-panel,
:is(#pun-redirect, #pun-message) .info {
  --ui-action-padding: 0 10px;
  --ui-action-font: 600 10px/19px var(--font-navigation);
  --ui-action-min-height: 19px;
  --ui-action-margin: 0;
  --ui-action-case: lowercase;
  box-sizing: border-box;
  order: 4;
  width: 100%;
  padding: 12px 19px;
  font: 400 11px/14px var(--font-navigation);
}
#pun-main .emo-list-panel > :is(.forum, .usertable, .formal, .online-list, .info) {
  margin: 0;
  width: 100%;
}
#pun-main .emo-list-panel > :is(.forum, .usertable, .formal, .online-list, .info) > h2 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
#pun-main .emo-list-panel > :is(.forum, .usertable, .formal, .online-list, .info) > .container,
#pun-main .emo-list-panel > .container,
:is(#pun-redirect, #pun-message) .info > .container,
#pun-main .emo-list-panel > #profile10 {
  padding: 0;
  overflow-x: auto;
}
/* Native topic rows use this recipe before the presentation adapter wraps them. */
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)) table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0 4.266px;
}
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)):not(.emo-list-panel--online):not(.emo-list-panel--uploads):not(.emo-list-panel--table) thead {
  display: none;
}
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)) tbody td {
  height: 44px;
  padding: 6px 10px;
  vertical-align: middle;
  font: inherit;
  overflow-wrap: anywhere;
}


#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)):not(.emo-list-panel--table) td.tcl:not(.username):not(.action):not(.emo-upload-name) {
  position: relative;
  width: auto;
  padding-left: 71px;
}
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)) .intd {
  position: static;
  padding: 0;
}
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)) .tclcon {
  padding: 0;
  margin: 0;
}
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)):not(.emo-list-panel--table) td.tcl:not(.action) a {
  font: 600 12px/16px var(--font-navigation);
}
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)) .byuser {
  display: inline;
  font: inherit;
}
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)) td:is(.tc2, .tc3) {
  text-align: center;
}
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)):not(.emo-list-panel--online):not(.emo-list-panel--uploads):not(.emo-list-panel--table) td:is(.tc2, .tc3) {
  width: 10%;
}
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)) td.tcr {
  position: relative;
  width: 32.5%;
  padding-left: 48px;
  font-size: 12px;
}
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)) td.tcr br {
  display: none;
}
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)) td.tcr .user-avatar,
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)) td.username .user-avatar {
  position: absolute;
  top: 50%;
  left: 10px;
  margin: 0;
  transform: translateY(-50%);
}
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)) .user-avatar :is(a, .avatar-image) {
  display: block;
  width: 30px;
  height: 30px;
}
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)) td.username {
  position: relative;
  padding-left: 10px;
}
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)) td.username:has(.user-avatar) {
  padding-left: 48px;
}
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)) div.icon {
  position: absolute;
  top: 50%;
  left: 17px;
  width: 28px;
  height: 28px;
  margin: -14px 0 0;
}



/* Native action strips and pagination. */
#pun-main .emo-list-panel > :is(.linkst, .linksb) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 19px;
  padding: 0;
  margin: 0;
}
#pun-main .emo-list-panel > .linkst {
  min-height: 31.234px;
}
#pun-main .emo-list-panel > :is(.linkst, .linksb) > noindex {
  display: contents;
}
#pun-main .emo-list-panel :is(.linkst, .linksb)::after {
  content: none;
}
#pun-main .emo-list-panel :is(.pagelink, .postlink) {
  position: static;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  font: inherit;
}
#pun-main .emo-list-panel .postlink {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
  order: 1;
}

#pun-main .emo-list-panel .pagelink {
  order: 0;
  font-weight: 700;
  text-transform: lowercase;
}
#pun-main .emo-list-panel .linksb .pagelink {
  display: none;
}

/* Moderator utilities: keep the native links, hide the feed-only wrapper. */
#pun-main .emo-list-panel > .modmenu, #pun-main .emo-list-panel > .modmenu .container {
  margin: 0;
  text-align: left;
  font: inherit;
  font-weight: 700;
  text-transform: lowercase;
}
#pun-main .emo-list-panel > .modmenu {
  padding: 0;
}
#pun-main .emo-list-panel > .modmenu .container {
  padding: 10px 0 0;
}
#pun-main .emo-list-panel .modmenu :is(strong, a) {
  float: none;
  height: auto;
  line-height: inherit;
}
#pun-main .emo-list-panel .modmenu a {
  font-weight: 700;
}
#pun-main .emo-list-panel .modmenu .container > span {
  display: none;
}

/* Page/column placement; appearance is shared above. */
#pun-main.emo-list-main {
  --inner-main-padding: 36.4px 31.5px 36px 25.5px;
  display: flex;
  flex-direction: column;
}
#pun-main :is(.emo-list-panel, :where(#pun-viewforum #pun-main > .forum)) td.tcl .byuser {
  display: none;
}

/* One heading/navigation recipe across all adapted lists. Native links stay
   intact; only their containers move above and below the list frame. */
.punbb #pun-main :is(.emo-list-heading, .emo-list-navigation),
:is(#pun-redirect, #pun-message, #pun-post) #pun-main > h1 {
  position: static;
  display: block;
  float: none;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  font: 700 11px/12px var(--font-forum-ui);
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}
.punbb #pun-main .emo-list-heading,
:is(#pun-redirect, #pun-message, #pun-post) #pun-main > h1 {
  order: 3;
  margin-bottom: 14px;
}
.punbb #pun-main .emo-list-navigation--bottom {
  order: 5;
  margin-top: 14px;
}
.punbb #pun-main :is(.emo-list-heading, .emo-list-navigation) > :is(span, p.container),
:is(#pun-redirect, #pun-message, #pun-post) #pun-main > h1 > span {
  position: static;
  display: block;
  width: auto;
  min-height: 0;
  height: auto;
  margin: 0;
  padding: 0;
  font: inherit;
  white-space: normal;
}
.punbb #pun-main .emo-list-navigation :is(a, em) {
  font: inherit;
}
#pun-main .emo-list-panel:is(.emo-list-panel--online, .emo-list-panel--table) thead {
  display: table-header-group;
}
#pun-main .emo-list-panel:is(.emo-list-panel--online, .emo-list-panel--uploads, .emo-list-panel--table) th {
  padding: 0 10px 6px;
  font: 600 11px/14px var(--font-navigation);
  text-align: left;
}
#pun-main .emo-list-panel--online td.action {
  padding-left: 10px;
}
#pun-main .emo-list-panel--online td.tc3 {
  width: 20%;
}
@media (max-width: 650px) {
    #pun-main .emo-list-panel {
  padding: 10px;
}
    #pun-main .emo-list-panel table {
  table-layout: auto;
}
    #pun-main .emo-list-panel:not(.emo-list-panel--table) td.tcl:not(.emo-upload-name) {
  min-width: 100px;
  padding-left: 42px;
}
    #pun-main .emo-list-panel div.icon {
  left: 7px;
}
    #pun-main .emo-list-panel td.tcr {
  min-width: 100px;
  padding-left: 8px;
}
    #pun-main .emo-list-panel td.tcr .user-avatar {
  display: none;
}
    #pun-main .emo-list-panel > :is(.linkst, .linksb) {
  flex-wrap: wrap;
}
  /* User-list cards keep the status below the name on narrow screens. */
  #pun-userlist #pun-main .emo-list-panel table,
  #pun-userlist #pun-main .emo-list-panel tbody {
    display: block;
    width: 100%;
  }
  #pun-userlist #pun-main .emo-list-panel tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 6px;
  }
  #pun-userlist #pun-main .emo-list-panel td:is(.username, .user_title, .last_visit) {
    display: block;
    width: auto;
    min-width: 0;
    height: auto;
    text-align: left;
  }
  #pun-userlist #pun-main .emo-list-panel td.username {
    min-height: 32px;
    border-radius: 10px 10px 0 0;
  }
  #pun-userlist #pun-main .emo-list-panel td.user_title {
    padding: 0 10px 4px 42px;
    border-radius: 0;
  }
  #pun-userlist #pun-main .emo-list-panel td.last_visit {
    padding: 0 10px 8px 42px;
    border-radius: 0 0 10px 10px;
    font-size: 11px;
  }
  #pun-userlist #pun-main .emo-list-panel td.last_visit::before {
    content: "Ïîñëåäíèé âèçèò: ";
  }
}

/* Native admin layout. Shared frames, fields and actions own appearance. */
.punbb-admin {
  display: flex;
  flex-direction: column;
  --nav-links-gap: 0 14px;
}
.punbb #pun-admain {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  padding: 36px 25px 36px 32px;
  margin: 0;
  font: 400 12px/1.5 var(--font-navigation);
}
.punbb #pun-admain > h1 {
  grid-column: 1 / -1;
}
.punbb #pun-adnav {
  grid-column: 1;
  grid-row: 1 / span 2;
  float: none;
  display: block;
  width: auto;
  margin: 0;
}
.punbb #pun-admain > .adformal {
  min-width: 0;
  grid-column: 2;
  margin: 0;
}
.punbb #pun-admain .adcontainer {
  padding: 18px;
  min-width: 0;
  overflow-x: auto;
}
.punbb #pun-adnav .adcontainer {
  padding: 10px;
}
.punbb #pun-admain :is(.adformal, #pun-adnav) > h2 {
  display: flex;
  align-items: center;
  padding: 12px 18px;
  box-sizing: border-box;
  font: 600 15px/1.4 var(--font-navigation);
}


.punbb #pun-adnav :is(li, .adsubnav > li) {
  list-style: none;
  margin: 0;
  padding: 0;
}
.punbb #pun-adnav :is(a, .adsubnav a) {
  display: block;
  padding: 7px 10px;
  font-weight: 500;
  overflow-wrap: anywhere;
}



.punbb #pun-adnav .adsubnav {
  margin: 4px 0 8px;
  padding: 0 0 0 10px;
}
.punbb #pun-admain fieldset {
  padding: 0;
  margin: 0 0 18px;
  min-width: 0;
}
.punbb #pun-admain legend {
  margin: 0;
  font-weight: 600;
}
.punbb #pun-admain legend span {
  margin: 0;
  padding: 0;
}
.punbb #pun-admain fieldset .adfs-box {
  overflow: visible;
  padding: 10px 0 0;
}
.punbb #pun-admain fieldset :is(p, .handle) {
  display: grid;
  grid-template-columns: minmax(110px, 28%) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  margin: 0 0 6px;
}
.punbb #pun-admain .adlabel {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}
.punbb #pun-admain .adinput {
  min-width: 0;
  padding: 0;
}
.punbb #pun-admain .adformal p.adinfofield {
  display: block;
}
.punbb #pun-admain span.adsubmit {
  position: static;
  width: auto;
}
.punbb #pun-admain :is(textarea, input, select, optgroup) {
  font-family: var(--font-navigation);
}
.punbb #pun-admain textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
}
.punbb #pun-admain .adcontainer :is(td, th) {
  padding: 10px;
  overflow-wrap: anywhere;
}
.punbb #pun-admain .adcontainer th {
  font-weight: 600;
}
.punbb #pun-admain .adcontainer :is(.submitend, .submittop) {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  padding: 12px 0 0;
}
:is(.punbb #pun-admain, .punbb#pun-login, .punbb#pun-register, .punbb#pun-search, .punbb#pun-message) :is(input, textarea, select) {
  box-sizing: border-box;
}

@media (max-width: 760px) {
    .punbb #pun-admain {
  grid-template-columns: minmax(0, 1fr);
  padding: 20px 12px;
  gap: 16px;
}
    .punbb #pun-adnav {
  grid-column: 1;
  grid-row: auto;
}
    .punbb #pun-admain > .adformal {
  grid-column: 1;
}
    .punbb #pun-adnav #adnav-standard > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
    .punbb #pun-admain fieldset :is(p, .handle) {
  grid-template-columns: minmax(0, 1fr);
}
}

/* Upload manager: retain the native profile navigation and file controls. */
#pun-main.emo-uploads-page > .emo-list-heading {
  margin-bottom: 14px;
}
#pun-main .emo-list-panel--uploads #profile10 {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px 20px;
  padding: 0;
}
#profile10 #profilenav {
  grid-column: 1;
  grid-row: 1 / span 4;
  float: none;
  width: auto;
  margin: 0;
}
#profile10 #profilenav ul {
  padding: 0;
}
#profile10 > :not(#profilenav) {
  grid-column: 2;
  min-width: 0;
  margin: 0;
}
#profile10 .adfs-box {
  overflow-x: auto;
}
#profile10 #filetable {
  min-width: 700px;
}
/* Rusff injects !important widths (10% for names). Own the column widths
   once for headers and cells, so the image cannot squeeze the filename. */
#profile10 #filetable :is(th, td) {
  width: var(--upload-column-width) !important;
}
#profile10 #filetable :is(th, td):nth-child(1) {
  --upload-column-width: 24%;
}
#profile10 #filetable :is(th, td):nth-child(2), #profile10 #filetable :is(th, td):nth-child(3) {
  --upload-column-width: 14%;
}
#profile10 #filetable :is(th, td):nth-child(4), #profile10 #filetable :is(th, td):nth-child(5) {
  --upload-column-width: 6%;
}
#profile10 #filetable :is(th, td):nth-child(6) {
  --upload-column-width: 30%;
}
#profile10 #filetable :is(th, td):nth-child(7) {
  --upload-column-width: 6%;
}
#pun-main .emo-list-panel--uploads td.tcr {
  width: auto;
  padding-left: 10px;
  font-size: inherit;
}
#profile10 #filetable input[type="text"] {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
#profile10 .emo-upload-name > a {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
#profile10 .emo-upload-thumbnail {
  width: 48px;
  height: 48px;
  object-fit: contain;
  flex: 0 0 48px;
}
#profile10 .emo-upload-thumbnail[hidden] {
  display: none;
}
#profile10 .formsubmit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
@media (max-width: 760px) {
    #pun-main .emo-list-panel--uploads #profile10 {
  grid-template-columns: minmax(0, 1fr);
}
    #profile10 #profilenav {
  grid-column: 1;
  grid-row: auto;
}
    #profile10 > :not(#profilenav) {
  grid-column: 1;
}
    #profile10 #profilenav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
}

/* Utility forms retain native controls and validation; only layout is adapted. */
#pun-main.emo-utility-main {
  --inner-main-padding: 36.4px 31.5px 36px 25.5px;
}
.emo-utility-main > .emo-list-panel {
  margin: 0 0 14px;
}
.emo-utility-main .formal fieldset {
  min-width: 0;
  margin-bottom: 14px;
}
.emo-utility-main .formal legend {
  font-weight: 600;
}
.emo-utility-main .formal .formsubmit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 0;
}
.emo-utility-main .formal :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  max-width: 100%;
}
.emo-utility-main .formal .input {
  max-width: 100%;
}
.punbb #pun-main .emo-utility-heading-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.emo-utility-main > .emo-utility-heading-actions > .fr {
  float: none;
  width: auto;
}
@media (max-width: 650px) {
    #pun-main.emo-utility-main {
  --inner-main-padding: 20px 12px;
}
    .emo-utility-main .inline :is(.inputfield, .selectfield, .passfield) {
  float: none;
  margin-right: 0;
}
}

/* Redirect headings sit directly on the dark page canvas. */
#pun-redirect {
  --page-heading-color: var(--color-footer-text);
}

.scroll-control--down {
  height: 103px;
}