/* TeleFragged Quake II Full Theme - PASS 2
   Staged theme only. Designed to move theme much closer to the approved mockup.
*/

:root {
  --tfq2-bg: #0a0f0d;
  --tfq2-panel: #111813;
  --tfq2-panel2: #171f19;
  --tfq2-row: #202521;
  --tfq2-row2: #232924;
  --tfq2-edge: #566647;
  --tfq2-edge-dim: #3c4938;
  --tfq2-text: #eef0e6;
  --tfq2-muted: #b6c3ab;
  --tfq2-gold: #d8a64b;
  --tfq2-gold2: #b77420;
  --tfq2-orange: #e09b36;
  --tfq2-shadow: rgba(0,0,0,.45);
}

/* ---------- OVERALL ATMOSPHERE ---------- */
html, body {
  background:
    radial-gradient(circle at 20% 10%, rgba(123,150,82,.08), transparent 30%),
    radial-gradient(circle at 80% 20%, rgba(225,165,52,.03), transparent 25%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0 1px, transparent 1px 170px),
    linear-gradient(180deg, #0a0e0c, #090d0b 30%, #0a0f0d 100%) !important;
  color: var(--tfq2-text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%2390a078' stroke-opacity='.12'%3E%3Cpath d='M0 110h220M110 0v220'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.028'%3E%3Ccircle cx='27' cy='31' r='1'/%3E%3Ccircle cx='87' cy='91' r='1'/%3E%3Ccircle cx='141' cy='54' r='1'/%3E%3Ccircle cx='172' cy='171' r='1'/%3E%3Ccircle cx='58' cy='178' r='1'/%3E%3C/g%3E%3Cg stroke='%23c98c2e' stroke-opacity='.08'%3E%3Cpath d='M165 0l55 55M145 0l75 75M0 165l55 55M0 145l75 75'/%3E%3C/g%3E%3C/svg%3E");
}

#wrapper {
  background:
    linear-gradient(180deg, rgba(19,25,21,.96), rgba(14,20,16,.98)) !important;
  border: 1px solid var(--tfq2-edge) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.03) inset !important;
}

/* ---------- PANELS / CONTENT BLOCKS ---------- */
.windowbg,
.windowbg2,
.bg,
.roundframe,
.information,
.generic_list_wrapper,
.boardindex_table,
#recent .topic,
#forumposts .post_wrapper,
#main_content_section .windowbg,
#main_content_section .windowbg2 {
  background:
    linear-gradient(180deg, rgba(28,34,29,.98), rgba(18,24,20,.98)) !important;
  border-color: var(--tfq2-edge-dim) !important;
}

/* ---------- BREADCRUMBS ---------- */
.navigate_section ul {
  background: linear-gradient(180deg, rgba(27,34,28,.98), rgba(16,22,18,.98)) !important;
  border: 1px solid var(--tfq2-edge) !important;
  border-radius: 3px !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.02) inset, 0 2px 8px rgba(0,0,0,.20) !important;
  padding: 5px 10px !important;
}

/* ---------- TOP NAV / BUTTONS ---------- */
#main_menu { margin-bottom: 8px !important; }
#main_menu .dropmenu > li,
#top_info > li { margin-right: 8px !important; }

#main_menu .dropmenu > li > a,
#main_content_section .button,
#main_content_section .quickbuttons > li > a,
#main_content_section .buttonlist .button,
a.button,
input.button,
.button,
.pagelinks .button {
  border: 1px solid #687852 !important;
  border-radius: 4px !important;
  background:
    linear-gradient(180deg, rgba(48,57,43,.98), rgba(27,34,27,.98)) !important;
  color: #f3f4ee !important;
  box-shadow:
    inset 0 1px 0 rgba(235,220,180,.11),
    0 2px 6px rgba(0,0,0,.28) !important;
  min-height: 30px !important;
  line-height: 28px !important;
  padding-inline: 10px !important;
  text-transform: none !important;
}

#main_menu .dropmenu > li > a:hover,
#main_menu .dropmenu > li > a:focus,
#main_content_section .button:hover,
#main_content_section .button:focus,
#main_content_section .quickbuttons > li > a:hover,
#main_content_section .quickbuttons > li > a:focus,
#main_content_section .buttonlist .button:hover,
#main_content_section .buttonlist .button:focus,
.button:hover,
.button:focus {
  border-color: #8b6929 !important;
  color: #fff3cf !important;
  background:
    linear-gradient(180deg, rgba(75,62,33,.98), rgba(42,33,18,.98)) !important;
  text-decoration: none !important;
}

#main_menu .dropmenu > li > a.active,
#top_info > li > a.active {
  border-color: #7f6a35 !important;
  background: linear-gradient(180deg, rgba(72,64,36,.98), rgba(42,35,22,.98)) !important;
  color: #fff2ca !important;
}

/* make main menu icons warmer */
#main_menu .main_icons::before,
#main_content_section .main_icons::before,
#top_info .main_icons::before {
  filter: sepia(.38) saturate(1.55) hue-rotate(-8deg) brightness(1.05) !important;
}

/* ---------- CATEGORY / SECTION HEADERS ---------- */
.cat_bar,
.title_bar,
h3.catbg,
h3.titlebg,
#main_content_section .cat_bar,
#main_content_section .title_bar,
.boardindex_table .cat_bar {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#main_content_section .cat_bar h3,
#main_content_section .cat_bar h4,
#main_content_section .title_bar h3,
#main_content_section .title_bar h4,
.boardindex_table .cat_bar h3,
.boardindex_table .cat_bar h4,
h3.catbg,
h3.titlebg {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  padding: 11px 48px 11px 16px !important;
  color: #ecefe4 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  border: 1px solid #667652 !important;
  border-radius: 4px !important;
  background:
    radial-gradient(circle at 18% 30%, rgba(255,255,255,.035), transparent 20%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.012) 0 6px, rgba(0,0,0,.03) 6px 12px),
    linear-gradient(180deg, rgba(48,58,45,.96), rgba(34,41,34,.98)) !important;
  box-shadow:
    inset 0 1px 0 rgba(230,220,190,.08),
    inset 0 -1px 0 rgba(0,0,0,.35),
    0 3px 8px rgba(0,0,0,.28) !important;
}

#main_content_section .cat_bar h3::before,
#main_content_section .cat_bar h4::before,
#main_content_section .title_bar h3::before,
#main_content_section .title_bar h4::before,
.boardindex_table .cat_bar h3::before,
.boardindex_table .cat_bar h4::before,
h3.catbg::before,
h3.titlebg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='48' viewBox='0 0 180 48'%3E%3Cg fill='none' stroke='%23d7dfcf' stroke-opacity='.09'%3E%3Cpath d='M9 12h55M13 21h36M72 15h24M110 32h42M80 30h15'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.03'%3E%3Ccircle cx='18' cy='14' r='1'/%3E%3Ccircle cx='68' cy='8' r='1'/%3E%3Ccircle cx='122' cy='19' r='1'/%3E%3Ccircle cx='144' cy='33' r='1'/%3E%3C/g%3E%3C/svg%3E") repeat;
  opacity: .7;
  pointer-events: none;
}

#main_content_section .cat_bar h3::after,
#main_content_section .cat_bar h4::after,
#main_content_section .title_bar h3::after,
#main_content_section .title_bar h4::after,
.boardindex_table .cat_bar h3::after,
.boardindex_table .cat_bar h4::after,
h3.catbg::after,
h3.titlebg::after {
  content: "";
  position: absolute;
  top: 0;
  right: 10px;
  width: 48px;
  height: 100%;
  background:
    linear-gradient(135deg, transparent 0 54%, rgba(217,166,75,.92) 54% 62%, transparent 62% 100%),
    linear-gradient(135deg, transparent 0 68%, rgba(185,116,32,.88) 68% 75%, transparent 75% 100%);
  opacity: .95;
  pointer-events: none;
}

/* ---------- BOARD LIST / ROWS ---------- */
.boardindex_table:not(:last-child) { margin-bottom: 10px !important; }

.boardindex_table .windowbg,
.boardindex_table .windowbg2 {
  min-height: 54px !important;
  background:
    linear-gradient(180deg, rgba(35,40,35,.97), rgba(31,37,32,.98)) !important;
  border-top: 1px solid #63714f !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02) !important;
}

.boardindex_table .info {
  padding-top: 11px !important;
  padding-bottom: 11px !important;
}

.boardindex_table .info,
.boardindex_table .board_stats,
.boardindex_table .lastpost {
  min-height: 53px !important;
}

.boardindex_table .board_stats,
.boardindex_table .lastpost {
  padding-top: 12px !important;
  padding-bottom: 10px !important;
}

.boardindex_table .board_stats p,
.boardindex_table .lastpost p {
  border-left-color: #5a684a !important;
  border-right-color: #5a684a !important;
}

.boardindex_table .info a.subject,
.boardindex_table .info h4 a,
.boardindex_table .info .board_name,
.boardindex_table .subject {
  color: #ebefe3 !important;
  font-weight: 700 !important;
}

.boardindex_table .info a.subject:hover,
.boardindex_table .info h4 a:hover,
.boardindex_table .info .board_name:hover,
.boardindex_table .subject:hover {
  color: #fff2cc !important;
}

/* ---------- BOARD ICON FRAMES ---------- */
.board_icon { padding-top: 8px !important; width: 70px !important; }
.boardindex_table .board_icon { width: 86px !important; }
.board_icon a {
  position: relative;
  width: 46px !important;
  height: 46px !important;
  background: linear-gradient(180deg, #1f2720, #151b16) !important;
  border: 1px solid #6c7b57 !important;
  border-radius: 6px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 2px 8px rgba(0,0,0,.35) !important;
  background-image: none !important;
}
.board_icon a::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(227,173,72,.20);
  border-radius: 4px;
  pointer-events: none;
}
.board_icon a::after {
  content: "";
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,.45));
}

/* read vs unread overall tone */
.board_icon a.board_on,
.board_icon a.board_on2 {
  border-color: #8f6f30 !important;
  box-shadow: inset 0 1px 0 rgba(255,235,186,.08), 0 0 0 1px rgba(217,166,75,.15), 0 2px 8px rgba(0,0,0,.35) !important;
}
.board_icon a.board_on::after,
.board_icon a.board_on2::after { filter: sepia(.38) saturate(1.55) hue-rotate(-8deg) brightness(1.18) drop-shadow(0 1px 1px rgba(0,0,0,.45)); }
.board_icon a.board_off::after,
.board_icon a.board_redirect::after { filter: saturate(.25) brightness(1.15) opacity(.88) drop-shadow(0 1px 1px rgba(0,0,0,.45)); }

/* Distinct icons for the first five visible boards in a category.
   Assumes the category header is child 1 and board rows are children 2-6.
*/
.boardindex_table > *:nth-child(2) .board_icon a::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath fill='%23d7a349' d='M7 4h9l5 5v15H7z'/%3E%3Cpath fill='%23212620' d='M16 4v5h5z'/%3E%3Cpath fill='none' stroke='%23212620' stroke-width='1.7' d='M10 13.5h8M10 17.5h8M10 21.5h6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.boardindex_table > *:nth-child(3) .board_icon a::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath fill='%23d7a349' d='M6 6h16a3 3 0 0 1 3 3v8a3 3 0 0 1-3 3h-7l-5 4v-4H6a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3z'/%3E%3Cpath fill='none' stroke='%23212620' stroke-width='1.8' d='M9 11.5h10M9 15.5h7' stroke-linecap='round'/%3E%3C/svg%3E"); }
.boardindex_table > *:nth-child(4) .board_icon a::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='%23d7a349'%3E%3Ccircle cx='10' cy='11' r='4'/%3E%3Ccircle cx='18.5' cy='12.5' r='3.5'/%3E%3Cpath d='M4 23c.6-4 3.5-6.5 8-6.5s7.4 2.5 8 6.5z'/%3E%3Cpath d='M15 23c.4-2.6 2.2-4.3 5.4-4.3 2.1 0 3.8.7 4.9 2.2V23z'/%3E%3C/g%3E%3C/svg%3E"); }
.boardindex_table > *:nth-child(5) .board_icon a::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cg fill='%23d7a349'%3E%3Ccircle cx='14' cy='14' r='4.2'/%3E%3Cpath d='M14 3.7l2 1.3 2.4-.6 1 2.2 2.4.7-.2 2.4 1.8 1.7-1.4 2 .9 2.3-2 1.1-.2 2.5-2.5.1-1.4 2-2.2-.9-2.2.9-1.4-2-2.5-.1-.2-2.5-2-1.1.9-2.3-1.4-2 1.8-1.7-.2-2.4 2.4-.7 1-2.2 2.4.6z'/%3E%3C/g%3E%3C/svg%3E"); }
.boardindex_table > *:nth-child(6) .board_icon a::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath fill='%23d7a349' d='M4 7l10-3 10 3v14l-10 3-10-3z'/%3E%3Cpath fill='none' stroke='%23212620' stroke-width='1.8' d='M14 7v14M4 7l10 7 10-7'/%3E%3C/svg%3E"); }

/* fallback redirect icon */
.board_icon a.board_redirect::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath fill='%23d7a349' d='M15 5l8 8-8 8v-5H6v-6h9z'/%3E%3C/svg%3E") !important; }

/* ---------- MARK READ BUTTON ---------- */
.mark_read .button,
.mark_read .buttonlist .button {
  position: relative;
  padding-left: 36px !important;
  min-height: 30px !important;
}
.mark_read .button::before,
.mark_read .buttonlist .button::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23d7a349' d='M2 4h12v8H2z'/%3E%3Cpath fill='none' stroke='%23212620' stroke-width='1.2' d='M2 4l6 5 6-5'/%3E%3C/svg%3E") center/16px 16px no-repeat;
}

/* ---------- INFO CENTER ---------- */
#main_content_section .title_bar + .windowbg,
#main_content_section .cat_bar + .windowbg,
#main_content_section .title_bar + .information {
  border-top: none !important;
}

/* ---------- SIDE BLOCKS ---------- */
.sidebar,
.tp_block,
.blockbody,
#left_admsection,
#right_admsection {
  border-color: #566647 !important;
}

/* ---------- FORM ELEMENTS ---------- */
input, select, textarea {
  background: #151b17 !important;
  border-color: #576849 !important;
  color: #f1f2ea !important;
}

/* ---------- FOOTER HARMONY ---------- */
#footer {
  background: linear-gradient(180deg, #243023, #1f281f) !important;
  border-top-color: #566647 !important;
}

/* ---------- MOBILE ---------- */
@media (max-width: 900px) {
  #main_menu .dropmenu > li > a,
  .button,
  .pagelinks .button { min-height: 28px !important; line-height: 26px !important; }
  #main_content_section .cat_bar h3,
  #main_content_section .cat_bar h4,
  #main_content_section .title_bar h3,
  #main_content_section .title_bar h4,
  .boardindex_table .cat_bar h3,
  .boardindex_table .cat_bar h4,
  h3.catbg,
  h3.titlebg {
    letter-spacing: .04em !important;
    padding-right: 40px !important;
  }
  .board_icon a {
    width: 40px !important;
    height: 40px !important;
  }
}

/* TF Q2 PASS3 BEGIN */
/* Layout repair and quieter TinyPortal sidebar. Staged theme only. */

/* Restore SMF's horizontal board list layout. The previous pass gave all
   three text columns fixed minimum heights, which caused wrapping. */
.boardindex_table .windowbg,
.boardindex_table .windowbg2 {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  min-height: 0 !important;
  padding-block: 0 !important;
  background: linear-gradient(180deg,#242925,#202521) !important;
}
.boardindex_table .board_icon {
  flex: 0 0 78px !important;
  width: 78px !important;
  min-width: 0 !important;
  padding: 5px 0 !important;
  align-self: center !important;
}
.boardindex_table .board_icon a {
  width: 42px !important;
  height: 42px !important;
  margin: 0 auto !important;
}
.boardindex_table .info {
  flex: 1 1 48% !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 7px 8px 7px 2px !important;
}
.boardindex_table .board_stats {
  flex: 0 0 13% !important;
  width: 13% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 6px 6px !important;
}
.boardindex_table .lastpost {
  flex: 0 1 31% !important;
  width: 31% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 6px 8px !important;
}
.boardindex_table .board_stats p,
.boardindex_table .lastpost p {
  margin: 0 !important;
}
/* Do not turn the entire forum into tall tiles. */
.boardindex_table .info,
.boardindex_table .board_stats,
.boardindex_table .lastpost { height: auto !important; }

/* Keep the extra visual weight on the two major forum sections.
   TinyPortal side headings retain olive panels, without hazard stripes. */
#main_content_section :is(.tp_block, .tp_block_container, .tborder) :is(.cat_bar,.title_bar),
#main_content_section :is(#leftbar,#rightbar,#left_admsection,#right_admsection) :is(.cat_bar,.title_bar),
#main_content_section :is(.tp_block, .tp_block_container, .tborder) :is(h3.catbg,h3.titlebg),
#main_content_section :is(#leftbar,#rightbar,#left_admsection,#right_admsection) :is(h3.catbg,h3.titlebg) {
  border-left: 0 !important;
}
#main_content_section :is(.tp_block, .tp_block_container, #leftbar, #rightbar, #left_admsection, #right_admsection) :is(.cat_bar,.title_bar) :is(h3,h4),
#main_content_section :is(.tp_block, .tp_block_container, #leftbar, #rightbar, #left_admsection, #right_admsection) :is(h3.catbg,h3.titlebg) {
  background: linear-gradient(180deg,#2b3529,#202a22) !important;
  padding: 6px 28px 6px 9px !important;
  letter-spacing: .025em !important;
  text-transform: none !important;
  box-shadow: inset 0 1px rgba(255,255,255,.035) !important;
}
#main_content_section :is(.tp_block, .tp_block_container, #leftbar, #rightbar, #left_admsection, #right_admsection) :is(.cat_bar,.title_bar) :is(h3,h4)::after,
#main_content_section :is(.tp_block, .tp_block_container, #leftbar, #rightbar, #left_admsection, #right_admsection) :is(h3.catbg,h3.titlebg)::after {
  content: none !important;
}

/* Restore cleaner post action proportions. */
.mark_read { margin-top: 2px !important; margin-bottom: 12px !important; }
.mark_read .button { font-size: .72rem !important; }

/* On narrow screens, allow SMF to stack content rather than forcing tiny
   unreadable three-column rows. */
@media(max-width: 780px) {
  .boardindex_table .windowbg,
  .boardindex_table .windowbg2 { flex-wrap: wrap !important; }
  .boardindex_table .info { flex: 1 1 calc(100% - 78px) !important; }
  .boardindex_table .board_stats { flex: 0 0 30% !important; width: 30% !important; }
  .boardindex_table .lastpost { flex: 1 1 65% !important; width: 65% !important; }
}
/* TF Q2 PASS3 END */

/* === TeleFragged Q2: Category subtitle alignment fix === */

/* Allow the category heading and subtitle to occupy separate lines. */
#main_content_section .boardindex_table .cat_bar {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding-bottom: 5px !important;
}

/* Reduce heading height while preserving the industrial styling. */
#main_content_section .boardindex_table .cat_bar h3,
#main_content_section .boardindex_table .cat_bar h4 {
    padding-top: 7px !important;
    padding-bottom: 7px !important;
    min-height: 0 !important;
}

/* Keep the subtitle visible immediately beneath the heading. */
#main_content_section .boardindex_table .cat_bar .smalltext,
#main_content_section .boardindex_table .cat_bar p {
    position: relative !important;
    display: block !important;
    margin: 3px 12px 4px !important;
    line-height: 1.4 !important;
    height: auto !important;
    overflow: visible !important;
}


/* === TeleFragged Q2: Category subtitle FINAL fix === */

/* Keep category title and description in normal document flow. */
#main_content_section .main_container > .cat_bar {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 0 5px !important;
}

/* Keep the industrial title bar separate from the subtitle. */
#main_content_section .main_container > .cat_bar > h3.catbg {
    display: block !important;
    position: relative !important;
    margin: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px 48px 8px 12px !important;
}

/* Style the actual SMF category description element. */
#main_content_section .main_container > .cat_bar > .desc {
    display: block !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    height: auto !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 4px 12px 6px !important;
    line-height: 1.4 !important;
    overflow: visible !important;
    color: #b6c3ab !important;
    background: #1a231c !important;
    border: 1px solid #566647 !important;
    border-top: none !important;
    border-radius: 0 0 4px 4px !important;
}

/* Avoid clipping when the category expands. */
#main_content_section .main_container {
    overflow: visible !important;
}

/* === End category subtitle fix === */

/* TeleFragged Q2 Pass 4: real extracted PNG asset integration. STAGED THEME ONLY */
/* CSS begins at end of q2full.css; reversible by installer */
:root { --tf4-olive:#252f26; --tf4-edge:#61704f; --tf4-gold:#d5a34b; }
/* Intricate real texture in the headers, not a forced image with text in it. */
#main_content_section .main_container > .cat_bar > h3.catbg,
#main_content_section .title_bar > h3,
#main_content_section .title_bar > h4,
#main_content_section .cat_bar > h3,
#main_content_section .cat_bar > h4 {
  background-image:linear-gradient(180deg,rgba(31,41,32,.26),rgba(12,18,13,.43)),url('images/q2pass4/header-texture.png') !important;
  background-size:auto, 230px 42px !important;
  background-repeat:repeat, repeat-x !important;
  border-color:var(--tf4-edge) !important;
}
/* Preserve the separate, accessible subtitle. */
#main_content_section .main_container > .cat_bar > .desc {
  display:block !important; position:static !important; margin:0 !important;
  padding:4px 11px 6px !important; height:auto !important; overflow:visible !important;
  color:#c1cbb7 !important; background:#1a241d !important;
}
/* Texture is intentionally far more subtle behind actual content. */
#main_content_section .boardindex_table .up_contain,
#main_content_section [id^='category_'][id$='_boards'] > .up_contain {
 background-image:linear-gradient(90deg,rgba(33,39,34,.94),rgba(35,41,36,.98)),url('images/q2pass4/panel-texture.png') !important;
 background-size:auto,305px 37px !important;
 background-repeat:no-repeat,repeat !important;
}
/* SMF board icons: production pack art as pseudo-elements.
   This deliberately overrides the old custom SVG backgrounds. */
#main_content_section .board_icon a {
 background-image:none !important; background-color:transparent !important;
 background:none !important; width:56px !important; height:56px !important;
 border:0 !important; box-shadow:none !important; display:inline-block !important;
 position:relative !important; overflow:visible !important;
}
#main_content_section .board_icon a::before { display:none !important; }
#main_content_section .board_icon a::after {
 content:'' !important; inset:0 !important; position:absolute !important;
 background-image:url('images/q2pass4/board-read.png') !important;
 background-position:center !important; background-size:56px 56px !important;
 background-repeat:no-repeat !important; filter:none !important;
}
#main_content_section .board_icon a.board_on::after,
#main_content_section .board_icon a.board_on2::after {
 background-image:url('images/q2pass4/board-unread.png') !important;
 filter:brightness(1.12) saturate(1.15) !important;
}
#main_content_section .board_icon a.board_redirect::after {
 background-image:url('images/q2pass4/board-redirect.png') !important;
}
/* For actual category rows, use a consistent family of illustrated tiles. No fragile nth-child(2) on main_container. */
#main_content_section [id^='category_'][id$='_boards'] > .up_contain:nth-child(1) .board_icon a::after { background-image:url('images/q2pass4/board-news.png') !important; }
#main_content_section [id^='category_'][id$='_boards'] > .up_contain:nth-child(2) .board_icon a::after { background-image:url('images/q2pass4/board-general.png') !important; }
#main_content_section [id^='category_'][id$='_boards'] > .up_contain:nth-child(3) .board_icon a::after { background-image:url('images/q2pass4/board-support.png') !important; }
#main_content_section [id^='category_'][id$='_boards'] > .up_contain:nth-child(4) .board_icon a::after { background-image:url('images/q2pass4/board-servers.png') !important; }
#main_content_section [id^='category_'][id$='_boards'] > .up_contain:nth-child(5) .board_icon a::after { background-image:url('images/q2pass4/board-maps.png') !important; }
/* Retain true unread state as amber illumination across all illustrations. */
#main_content_section [id^='category_'][id$='_boards'] > .up_contain .board_icon a.board_off::after { filter:grayscale(.78) saturate(.52) brightness(.85) !important; }
#main_content_section [id^='category_'][id$='_boards'] > .up_contain .board_icon a.board_on::after,
#main_content_section [id^='category_'][id$='_boards'] > .up_contain .board_icon a.board_on2::after { filter:saturate(1.25) brightness(1.14) !important; }
/* Align image with existing SMF layout instead of changing row flex structure. */
#main_content_section .board_icon { padding-top:1px !important; min-width:64px !important; }
#main_content_section .boardindex_table .board_icon { width:68px !important; }
#main_content_section .boardindex_table .info { width:auto !important; min-width:0 !important; }
/* Suppress the industrial pseudo pictograms from Pass 2 where the real images now take over. */
#main_content_section .board_icon a.board_redirect::after { background-image:url('images/q2pass4/board-redirect.png') !important; }
/* Main menu: a harmonized physical-button texture, without replacing accessible text. */
#main_menu .dropmenu > li > a {
 background-image:linear-gradient(180deg,rgba(24,31,25,.73),rgba(12,19,15,.73)),url('images/q2pass4/panel-texture.png') !important;
 background-size:auto,305px 37px !important;
 background-repeat:repeat,repeat !important;
 border-color:#687a51 !important;
 box-shadow:inset 0 1px rgba(237,204,133,.12),0 2px 3px rgba(0,0,0,.27) !important;
}
#main_menu .dropmenu > li > a .main_icons::before { filter:sepia(.3) saturate(1.5) brightness(1.1) !important; }
/* Sidebar headers lose the loud gold stripes. Keep them understated. */
#main_content_section .tp_block .cat_bar h3::after,
#main_content_section .tp_block .title_bar h3::after,
#main_content_section .sidebar .cat_bar h3::after,
#main_content_section .sidebar .title_bar h3::after { opacity:.18 !important; }
@media(max-width:700px) {
 #main_content_section .board_icon a { width:45px!important;height:45px!important; }
 #main_content_section .board_icon a::after {background-size:45px 45px!important;}
}

/* TFQ2 PASS5 START - restrained illustrated navigation and board polish */
/* Keep the original SMF link labels, roles, destinations and hover behavior. */
#main_menu .dropmenu > li > a {
  min-height: 32px !important;
  line-height: 29px !important;
  padding: 0 12px 0 7px !important;
  border: 1px solid #596a49 !important;
  border-radius: 4px !important;
  background: linear-gradient(180deg,rgba(41,52,40,.92),rgba(19,27,21,.95)),url('images/q2pass4/panel-texture.png') repeat !important;
  background-size: auto,305px 37px !important;
  box-shadow: inset 0 1px rgba(230,214,165,.11),0 2px 5px rgba(0,0,0,.25) !important;
  color: #e9eee3 !important;
  white-space: nowrap;
}
#main_menu .dropmenu > li > a:hover,
#main_menu .dropmenu > li > a:focus {
  border-color: #ac8744 !important;
  background: linear-gradient(180deg,#3d4634,#252f24) !important;
}
/* Actual illustrated PNGs, not generated SVG substitutes. */
#main_menu .dropmenu > li > a .main_icons::before {
  display: inline-block !important;
  width: 27px !important;
  height: 30px !important;
  margin: 0 7px 0 0 !important;
  vertical-align: middle !important;
  background-size: 27px 32px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  filter: none !important;
}
#main_menu .main_icons.home::before {background-image:url('images/q2pass5/nav-home.png') !important;}
#main_menu .main_icons.search::before {background-image:url('images/q2pass5/nav-search.png') !important;}
#main_menu .main_icons.members::before,
#main_menu .main_icons.people::before {background-image:url('images/q2pass5/nav-members.png') !important;}
#main_menu .main_icons.inbox::before,
#main_menu .main_icons.mail::before {background-image:url('images/q2pass5/nav-messages.png') !important;}
#main_menu .main_icons.admin::before,
#main_menu .main_icons.settings::before {background-image:url('images/q2pass5/nav-admin.png') !important;}
#main_menu .main_icons.login::before {background-image:url('images/q2pass5/nav-login.png') !important;}
#main_menu .main_icons.logout::before {background-image:url('images/q2pass5/nav-logout.png') !important;}
/* SMF/TinyPortal can render alternate navigation wrappers; these targeted selectors
   add icons only when a matching existing class/URL is available. */
#main_menu .dropmenu > li > a[href*='action=forum'] .main_icons::before {background-image:url('images/q2pass5/nav-forum.png') !important;}
#main_menu .dropmenu > li > a[href*='action=tpmod'] .main_icons::before,
#main_menu .dropmenu > li > a[href*='action=downloads'] .main_icons::before {background-image:url('images/q2pass5/nav-downloads.png') !important;}
/* Distinctive illustrated tiles already supplied by Pass 4. Avoid reassigning
   per-board art or overriding the actual board state. */
#main_content_section [id^='category_'][id$='_boards'] > .up_contain .board_icon a {
  width: 58px !important;
  height: 58px !important;
  outline: none !important;
}
#main_content_section [id^='category_'][id$='_boards'] > .up_contain .board_icon a::after {
  background-size: 58px 58px !important;
  transition: filter .18s ease !important;
}
#main_content_section [id^='category_'][id$='_boards'] > .up_contain .board_icon a.board_off::after {
  filter: grayscale(.50) saturate(.70) brightness(1.10) !important;
}
#main_content_section [id^='category_'][id$='_boards'] > .up_contain .board_icon a.board_on::after,
#main_content_section [id^='category_'][id$='_boards'] > .up_contain .board_icon a.board_on2::after {
  filter: saturate(1.6) brightness(1.27) drop-shadow(0 0 2px rgba(219,153,45,.35)) !important;
}
#main_content_section [id^='category_'][id$='_boards'] > .up_contain .board_icon a.board_redirect::after {
  filter: saturate(.7) brightness(1.05) !important;
}
/* Keep the hazard-stripe accents prominent on main forum sections, but quiet
   on TinyPortal sidebar blocks when those containers are present. */
#tpleftbar .cat_bar h3::after,#tpleftbar .title_bar h3::after,
#tprightbar .cat_bar h3::after,#tprightbar .title_bar h3::after,
.tp_block .cat_bar h3::after,.tp_block .title_bar h3::after,
#leftbar .cat_bar h3::after,#rightbar .cat_bar h3::after {
  opacity: .14 !important;
}
/* The existing category subtitle and SMF board-row flex layout are untouched. */
@media (max-width: 700px) {
 #main_menu .dropmenu > li > a {min-height:28px !important;line-height:26px !important;padding-inline:5px !important;}
 #main_menu .dropmenu > li > a .main_icons::before {width:22px !important;height:26px !important;background-size:22px 26px !important;margin-right:3px !important;}
 #main_content_section [id^='category_'][id$='_boards'] > .up_contain .board_icon a {width:46px !important;height:46px !important;}
 #main_content_section [id^='category_'][id$='_boards'] > .up_contain .board_icon a::after {background-size:46px 46px !important;}
}
/* TFQ2 PASS5 END */

/* TFQ2 PASS6 START */
/* Crisp coordinated icons for privileged navigation; do not change button layout. */
#main_menu .dropmenu > li > a .main_icons.admin::before,
#main_menu .dropmenu > li > a .main_icons.administration::before,
#main_menu .dropmenu > li > a .main_icons.settings::before {
 background-image:url('images/q2pass6/nav-admin-clean.png') !important;
 background-position:center !important;
 background-repeat:no-repeat !important;
 background-size:27px 27px !important;
 filter:none !important;
}
#main_menu .dropmenu > li > a .main_icons.moderate::before,
#main_menu .dropmenu > li > a .main_icons.moderation::before,
#main_menu .dropmenu > li > a .main_icons.post_moderation_moderate::before,
#main_menu .dropmenu > li > a[href*='action=moderate'] .main_icons::before {
 background-image:url('images/q2pass6/nav-moderate-clean.png') !important;
 background-position:center !important;
 background-repeat:no-repeat !important;
 background-size:27px 27px !important;
 filter:none !important;
}
/* State-aware board contrast. The actual PNG art comes from Pass 4. */
#main_content_section [id^='category_'][id$='_boards'] > .up_contain .board_icon a.board_off::after {
 filter:grayscale(.47) saturate(.75) brightness(1.25) contrast(1.11) !important;
}
#main_content_section [id^='category_'][id$='_boards'] > .up_contain .board_icon a.board_on::after,
#main_content_section [id^='category_'][id$='_boards'] > .up_contain .board_icon a.board_on2::after {
 filter:sepia(.16) saturate(1.48) brightness(1.27) contrast(1.1) drop-shadow(0 0 2px rgba(222,155,58,.24)) !important;
}
/* TFQ2 PASS6 END */


/* TF-MISSING-NAV-ICONS-BEGIN */
/* TinyPortal Downloads renders an IMG, unlike native SMF menu buttons. */
#main_menu .dropmenu > li.button_tpbutton1 > a > img {
  display:none !important;
}
/* Use existing Quake II illustrated art for both missing menu icons. */
#main_menu .dropmenu > li.button_tpbutton1 > a::before,
#main_menu .dropmenu > li.button_mlist > a::before {
  content:"" !important;
  display:inline-block !important;
  width:27px !important;
  height:30px !important;
  flex:0 0 27px !important;
  vertical-align:middle !important;
  margin:0 7px 0 0 !important;
  background-size:27px 30px !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
}
#main_menu .dropmenu > li.button_tpbutton1 > a::before {
  background-image:url('images/q2pass5/nav-downloads.png') !important;
}
/* Replace the pixel-grid member icon with the theme's person silhouette. */
#main_menu .dropmenu > li.button_mlist > a::before {
  background-image:url('images/q2pass5/nav-login.png') !important;
}
#main_menu .dropmenu > li.button_mlist > a > .main_icons {
  display:none !important;
}
/* TF-MISSING-NAV-ICONS-END */