@import url(https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&display=swap);

/* =========================================================
   SHADOW OF THE SHATTERED / MYBB OVERRIDES
   Clean consolidated version
   Replace your custom override layer with this
   ========================================================= */

:root {
  --sos-ink: #050B0F;
  --sos-deep: #091317;
  --sos-panel: #0f171b;
  --sos-panel-2: #151f24;
  --sos-panel-3: #2F3638;
  --sos-brass: #A37C54;
  --sos-brass-soft: rgba(163, 124, 84, 0.22);
  --sos-brass-strong: rgba(163, 124, 84, 0.45);
  --sos-text: #969ca5;
  --sos-text-soft: #7f8790;
  --sos-light: #d4d6d6;
  --sos-link: #d8c0a6;
  --sos-link-hover: #f1dfc8;
  --sos-border: rgba(163, 124, 84, 0.22);
  --sos-shadow: 0 0 0 1px rgba(163, 124, 84, 0.16), 0 10px 30px rgba(0,0,0,0.35);
  --sos-font: "IM Fell English", Georgia, serif;
  --sos-radius: 4px;

  --sos-site-width: 1400px;
  --sos-nav-height: 72px;
  --sos-sidebar-width: 260px;

  --sos-page-bg: url(https://i.imgur.com/JxTdugo.jpeg);
  --sos-welcome-bg: url(https://i.imgur.com/jd9Pxwk.jpeg);
  --sos-post-top-bg: url(https://i.imgur.com/jd9Pxwk.jpeg);

  --sos-post-side-width: 300px;
  --sos-post-portrait-width: 250px;
  --sos-post-portrait-height: 400px;
}

/* =========================================================
   BASE
   ========================================================= */

html,
body {
  width: 100%;
  min-width: var(--sos-site-width);
  margin: 0;
  padding: 0;
  background-color: var(--sos-ink) !important;
  background-image: var(--sos-page-bg) !important;
  background-repeat: no-repeat !important;
  background-attachment: fixed !important;
  background-position: center top !important;
  background-size: var(--sos-site-width) auto !important;
  color: var(--sos-text) !important;
  font-family: var(--sos-font) !important;
  letter-spacing: 0.04em;
  overflow-x: auto !important;
}

body {
  line-height: 1.45;
  padding-top: var(--sos-nav-height) !important;
}

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

#container,
#content,
#main-content,
.sos-main,
.sos-cotf-shell {
  background: transparent !important;
  color: var(--sos-text) !important;
}

.wrapper,
.container-md,
#container,
#content,
#main-content,
.sos-main,
.sos-cotf-shell,
#panel .upper .wrapper,
.menuwrapper .wrapper,
.sos-notices,
.sos-footer__inner,
.welcome,
#logobanner,
.sos-post {
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

#header,
#panel,
.menuwrapper,
#footer {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* =========================================================
   LINKS
   ========================================================= */

a,
a:link,
a:visited {
  color: var(--sos-link) !important;
  text-decoration: none !important;
  transition: color .2s ease, text-shadow .2s ease;
}

a:hover,
a:focus,
a:active {
  color: var(--sos-link-hover) !important;
  text-decoration: none !important;
  text-shadow: 0 0 6px rgba(241, 223, 200, 0.25);
}

/* =========================================================
   GLOBAL TABLE / FORM / BUTTON LANGUAGE
   ========================================================= */

.tborder {
  background: var(--sos-deep) !important;
  border: 1px solid var(--sos-border) !important;
  border-radius: var(--sos-radius) !important;
  box-shadow: var(--sos-shadow);
}

.thead {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
  border-bottom: 1px solid var(--sos-brass-strong) !important;
}

.thead a,
.thead strong {
  color: var(--sos-light) !important;
  font-weight: normal !important;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.tcat {
  background: var(--sos-panel) !important;
  color: var(--sos-brass) !important;
  border-top: 1px solid var(--sos-border) !important;
  border-bottom: 1px solid var(--sos-border) !important;
}

.tcat a {
  color: var(--sos-brass) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.trow1,
.trow2 {
  color: var(--sos-text) !important;
  border-top: 1px solid rgba(163,124,84,0.10) !important;
  border-bottom: 1px solid rgba(163,124,84,0.10) !important;
  padding-top: 10px;
  padding-bottom: 10px;
}

.trow1 {
  background: var(--sos-deep) !important;
}

.trow2 {
  background: var(--sos-panel) !important;
}

.trow_shaded {
  background: rgba(163,124,84,0.08) !important;
  color: var(--sos-light) !important;
}

.tfoot {
  background: var(--sos-panel-3) !important;
  color: var(--sos-text) !important;
  border-top: 1px solid var(--sos-border) !important;
}

.tfoot a {
  color: var(--sos-light) !important;
}

.button,
a.button,
input.button,
button,
input[type="submit"],
input[type="button"] {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
  border: 1px solid var(--sos-brass-strong) !important;
  border-radius: var(--sos-radius) !important;
  font-family: var(--sos-font) !important;
  font-size: 1rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  box-shadow: none !important;
}

.button:hover,
a.button:hover,
input.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: #3a4346 !important;
  color: #fff5ea !important;
  border-color: rgba(163,124,84,0.75) !important;
}

.button:focus,
a.button:focus,
input.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(163,124,84,0.18) !important;
}

input.textbox,
textarea,
select,
.editor_control_bar,
.codebuttons,
.smilie_insert,
.forminput,
.postbit_buttons > a,
.form-control,
.form-select {
  background: var(--sos-panel) !important;
  color: var(--sos-light) !important;
  border: 1px solid var(--sos-border) !important;
  font-family: var(--sos-font) !important;
}

input.textbox:focus,
textarea:focus,
select:focus,
.form-control:focus,
.form-select:focus {
  border-color: rgba(163,124,84,0.75) !important;
  box-shadow: 0 0 0 3px rgba(163,124,84,0.15) !important;
  outline: none !important;
}

option {
  background: var(--sos-panel) !important;
  color: var(--sos-light) !important;
}

fieldset {
  border: 1px solid var(--sos-border) !important;
  background: var(--sos-deep) !important;
}

legend {
  color: var(--sos-brass) !important;
  font-family: var(--sos-font) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

blockquote {
  background: var(--sos-panel) !important;
  border: 1px solid var(--sos-border) !important;
  border-left: 3px solid var(--sos-brass) !important;
  border-radius: var(--sos-radius) !important;
  color: var(--sos-text) !important;
  padding: 15px !important;
  margin: 12px 0 !important;
}

blockquote cite {
  display: block;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(163,124,84,0.12) !important;
  color: var(--sos-brass) !important;
  font-style: italic;
}

code,
.codeblock,
.pre-bordered {
  background: #10171b !important;
  border: 1px solid var(--sos-border) !important;
  color: #d8d8d8 !important;
  border-radius: var(--sos-radius) !important;
}

.codeblock .title {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
  border-bottom: 1px solid var(--sos-border) !important;
}

.pagination {
  color: var(--sos-text) !important;
}

.pagination a,
.pagination span {
  background: var(--sos-panel) !important;
  color: var(--sos-text) !important;
  border: 1px solid var(--sos-border) !important;
  border-radius: 3px !important;
}

.pagination a:hover {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
  border-color: var(--sos-brass-strong) !important;
}

.pagination .pagination_current,
.pagination .current {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
  border-color: var(--sos-brass-strong) !important;
}

.error {
  background: rgba(115, 34, 34, 0.35) !important;
  border: 1px solid rgba(183, 92, 92, 0.45) !important;
  color: #f0d0d0 !important;
}

.success {
  background: rgba(44, 63, 48, 0.35) !important;
  border: 1px solid rgba(102, 142, 111, 0.45) !important;
  color: #d7e8d8 !important;
}

.alert {
  background: rgba(163,124,84,0.10) !important;
  border: 1px solid var(--sos-brass-soft) !important;
  color: var(--sos-light) !important;
}

.pm_alert,
.red_alert {
  background: rgba(163,124,84,0.14) !important;
  border: 1px solid var(--sos-brass-strong) !important;
  color: var(--sos-light) !important;
}

.panel,
.pm_folder,
.pm_message,
.stat,
.stats,
.forumbit_post,
.forumbit_manage,
.subforum_small,
.attachbox,
.buddy_status,
.expcolimage,
.popup_menu,
.popup_item_container,
.popup_item,
.popup_menu .popup_item {
  background: var(--sos-deep) !important;
  color: var(--sos-text) !important;
  border-color: var(--sos-border) !important;
}

.popup_menu {
  border: 1px solid var(--sos-border) !important;
  box-shadow: var(--sos-shadow) !important;
}

.popup_item:hover,
.popup_menu .popup_item:hover {
  background: var(--sos-panel) !important;
  color: var(--sos-light) !important;
}

table {
  color: var(--sos-text) !important;
}

td {
  color: inherit !important;
}

hr {
  border: 0 !important;
  border-top: 1px solid var(--sos-border) !important;
}

img {
  max-width: 100%;
  height: auto;
}

.card,
.modal,
.dropdown-menu,
.bg-primary,
.bg-light,
.bg-white,
.nav-tabs .nav-link,
.btn-primary,
.btn-secondary,
.editor,
.editor_row {
  background-color: var(--sos-panel) !important;
  color: var(--sos-text) !important;
  border-color: var(--sos-border) !important;
}

.btn-primary,
.btn-secondary {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
}

.nav-tabs .nav-link.active {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
  border-color: var(--sos-border) !important;
}

::selection {
  background: rgba(163,124,84,0.25);
  color: #fffaf4;
}

/* =========================================================
   HEADER / ACCOUNT BAR / FIXED NAV / BANNER
   ========================================================= */

#header {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin-bottom: 18px;
  padding-top: var(--sos-nav-height) !important;
}

#panel,
#panel .upper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  position: relative;
  z-index: 4;
}

#panel {
  margin-top: 12px;
}

#panel .upper {
  padding: 10px 14px !important;
}

.sos-topbar {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.sos-accountbar-shell {
  width: auto !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.sos-accountbar {
  width: fit-content !important;
  max-width: var(--sos-site-width) !important;
  margin: 0 auto !important;
  padding: 12px 14px !important;
  background: var(--sos-deep);
  border: 1px solid var(--sos-border);
  box-shadow: var(--sos-shadow);
  border-radius: var(--sos-radius);
}

.sos-accountbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center !important;
  gap: 10px 12px !important;
}

.sos-accountbar__hello {
  margin: 0 !important;
  white-space: nowrap;
  color: var(--sos-text);
  font-family: var(--sos-font);
  font-size: 1.05rem;
  letter-spacing: 0.04em;
}

.sos-accountbar__hello a {
  color: var(--sos-brass) !important;
}

.sos-accountbar__hello a:hover {
  color: var(--sos-link-hover) !important;
}

.sos-accountbar__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center !important;
  gap: 8px !important;
}

.sos-accountbar__links li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sos-accountbar__links a {
  display: inline-block;
  background: var(--sos-panel-3);
  color: var(--sos-light) !important;
  border: 1px solid var(--sos-brass-strong);
  border-radius: 3px;
  padding: 5px 10px !important;
  font-family: var(--sos-font);
  font-size: 0.9rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none !important;
  line-height: 1.2;
}

.sos-accountbar__links a:hover,
.sos-accountbar__links a:focus {
  background: #3a4346;
  color: #fff5ea !important;
  border-color: rgba(163,124,84,0.78);
  text-shadow: none;
}

.sos-accountbar__links a.pm-button-single {
  white-space: nowrap !important;
}

/* full-width fixed nav */
.menuwrapper {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 999999 !important;
  background: rgba(5,11,15,.97) !important;
  border-top: 0 !important;
  border-bottom: 1px solid var(--sos-border) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.35) !important;
}

.menuwrapper .wrapper {
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.menuwrapper .menu,
ul.menu {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 42px !important;
  min-height: var(--sos-nav-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.menuwrapper .menu li {
  float: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.menuwrapper .menu a,
ul.menu li a {
  display: block !important;
  padding: 22px 0 !important;
  color: var(--sos-text) !important;
  font-family: var(--sos-font) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.menuwrapper .menu a:hover,
ul.menu li a:hover {
  color: var(--sos-light) !important;
}

/* banner */
#logobanner {
  position: relative !important;
  min-height: 550px !important;
  margin: 0 auto !important;
  padding: 36px 24px 26px !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  z-index: 1 !important;
}

#logobanner .logotitle {
  position: absolute !important;
  top: 150px !important;
  left: 23% !important;
  width: auto !important;
  margin: 0 !important;
  text-align: left !important;
  z-index: 5 !important;
}

#logobanner .plotheader {
  position: absolute !important;
  top: 222px !important;
  left: 23% !important;
  width: auto !important;
  margin: 0 !important;
  text-align: left !important;
  z-index: 5 !important;
  color: var(--sos-brass);
  font-family: var(--sos-font);
  font-size: clamp(1.1rem, 1.5vw, 1.7rem) !important;
  line-height: 1.1 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

#logobanner .logotitle a,
#logobanner .logotitle {
  color: var(--sos-light) !important;
  font-family: var(--sos-font) !important;
  font-size: clamp(2.8rem, 4.2vw, 5rem) !important;
  line-height: 1 !important;
  letter-spacing: 0.06em;
  text-transform: none !important;
  text-shadow: 0 0 18px rgba(0,0,0,.45);
}

.sos-notices {
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
  margin: 0 auto 18px !important;
}

/* =========================================================
   INDEX / CONTENT SHELL
   ========================================================= */

.sos-cotf-shell,
#container {
  display: grid !important;
  grid-template-columns: var(--sos-sidebar-width) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  float: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#sidebar-collapse,
.sos-sidebar,
#container > .float_left {
  float: none !important;
  width: var(--sos-sidebar-width) !important;
  min-width: var(--sos-sidebar-width) !important;
  max-width: var(--sos-sidebar-width) !important;
  margin: 0 !important;
}

#main-content,
.sos-main,
#container > .float_right {
  float: none !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 0 !important;
}

#content {
  width: 100% !important;
  min-width: 0 !important;
}

#main-content .navigation,
.sos-main .navigation {
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 14px !important;
}

.sos-sidebar-box {
  margin-bottom: 14px;
  overflow: hidden;
}

.sidebarstyle,
.sidelinks,
.sos-season-box {
  line-height: 1.7;
}

.trow1forum {
  background: var(--sos-deep);
  color: var(--sos-text);
  border-top: 1px solid rgba(163,124,84,.10);
  border-bottom: 1px solid rgba(163,124,84,.10);
  padding: 14px 16px;
}

.sidelinksmenu {
  display: grid;
  gap: 8px;
}

.sidelinksmenu a {
  display: block;
  background: var(--sos-panel);
  border: 1px solid var(--sos-border);
  border-radius: 3px;
  padding: 8px 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sos-light) !important;
  text-shadow: none !important;
}

.sidelinksmenu a:hover {
  background: var(--sos-panel-3);
  color: #fff5ea !important;
}

.sos-season-box strong {
  display: block;
  margin-bottom: 6px;
  color: var(--sos-brass);
  letter-spacing: .08em;
  text-transform: uppercase;
}

#main-content .tborder {
  margin-bottom: 14px;
}

#main-content .tcat {
  padding: 10px 14px;
}

#main-content .expcolimage {
  float: right;
  margin-left: 8px;
}

#boards {
  background: var(--sos-panel);
  border: 1px solid var(--sos-border);
  border-radius: 4px;
  padding: 14px 16px;
  margin: 10px 0 0;
}

.descripfade {
  color: var(--sos-text);
  line-height: 1.75;
  max-height: 130px;
  overflow: auto;
  text-align: justify;
}

.trow1forum .lastpost_bar,
.lastpost_bar {
  text-align: right;
}

.lastpost_bar .smalltext {
  display: inline-block;
  text-align: right;
  line-height: 1.55;
}

.subforums {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
  padding: 0;
}

.subforums li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.subforums a {
  display: inline-block;
  padding: 4px 10px;
  background: var(--sos-panel-2);
  border: 1px solid var(--sos-border);
  border-radius: 999px;
  font-size: .92rem;
  text-shadow: none !important;
}

.sos-board-activity .trow1 {
  padding: 18px !important;
}

/* =========================================================
   WELCOME TABLE
   Compact version
   ========================================================= */

.welcome {
  width: var(--sos-site-width);
  min-width: var(--sos-site-width);
  max-width: var(--sos-site-width);
  margin: 0 auto 28px;
  padding: 12px;
  padding-top: 0;
  background: var(--sos-deep);
  border: 1px solid var(--sos-border);
  box-shadow: 0 0 50px rgba(0,0,0,.45);
  border-radius: 320px 320px 0 0;
  box-sizing: border-box;
}

.welcome > .fade-scroll {
  opacity: 1;
}

.welcome__arch {
  position: relative;
  overflow: hidden;
  min-height: 320px;
  margin-bottom: 10px;
  padding: 26px 18px 18px;
  border: 1px solid rgba(163,124,84,.45);
  border-radius: 520px 520px 0 0;
  text-align: center;
  background:
    linear-gradient(to bottom, rgba(7,19,23,.28), rgba(7,19,23,.42)),
    var(--sos-welcome-bg) center center / cover no-repeat;
  box-shadow: inset 0 0 14px rgba(0,0,0,.35);
}

.welcome__arch-fill {
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.welcome__arch-hello {
  color: var(--sos-brass);
  font-family: var(--sos-font);
  font-size: 1.05rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.welcome__arch-title {
  color: #E6E3D6;
  font-family: var(--sos-font);
  font-size: 2.4rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0,0,0,.45);
}

.welcome__row {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.welcome__content {
  background:
    linear-gradient(to bottom, rgba(5,11,15,.72), rgba(5,11,15,.82)),
    var(--sos-welcome-bg) center top / cover no-repeat;
  border: 1px solid var(--sos-border);
  box-shadow: var(--sos-shadow);
  border-radius: 5px;
  padding: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  box-sizing: border-box;
}

.welcome__content--intro,
.welcome__content--staff,
.welcome__content--updates,
.welcome__content--links {
  flex: 0 0 calc(50% - 5px);
  max-width: calc(50% - 5px);
}

.welcome__title {
  width: 100%;
  margin-bottom: 6px;
  padding: 9px 10px 8px;
  background: var(--sos-deep);
  border: 1px solid var(--sos-border);
  border-radius: 5px;
  text-align: center;
  box-sizing: border-box;
}

.welcome__title p {
  margin: 0;
  color: var(--sos-brass);
  font-family: var(--sos-font);
  font-size: 1.4rem;
  font-style: italic;
}

.welcome__text,
.welcome__weather,
.welcome__links {
  width: 100%;
  background: var(--sos-deep);
  border: 1px solid var(--sos-border);
  border-radius: 5px;
  box-sizing: border-box;
}

.welcome__text {
  padding: 10px 14px;
}

.welcome__text-inner {
  max-height: 150px;
  overflow: auto;
  padding-right: 8px;
}

.welcome__text-inner p {
  margin: 0 0 10px;
  line-height: 1.7;
  text-align: justify;
}

.welcome__weather {
  margin-top: 8px;
  padding: 12px 14px;
}

.welcome__weather p {
  margin: 0;
  line-height: 1.7;
}

.welcome__weather span {
  font-style: italic;
}

.welcome__links {
  padding: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}

.welcome__links a {
  flex: 0 0 calc(50% - 4px);
  display: block;
  padding: 9px;
  background: var(--sos-panel-3);
  border: 1px solid var(--sos-border);
  color: var(--sos-text) !important;
  text-align: center;
  text-transform: uppercase;
  font-size: .88rem;
  font-style: normal;
}

.welcome__links a:hover {
  color: var(--sos-light) !important;
  text-shadow: none !important;
}

.welcome__content--staff {
  justify-content: center;
  gap: 12px;
}

.hover-avatar {
  position: relative;
  overflow: hidden;
  width: 150px;
  height: 200px;
  border: 1px solid rgba(163,124,84,.56);
  border-radius: 100px 100px 0 0;
  background: var(--sos-deep);
  display: block;
}

.hover-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: .3s ease;
}

.hover-avatar span {
  position: absolute;
  inset: auto 0 12px 0;
  z-index: 2;
  opacity: 0;
  padding: 0 8px;
  color: var(--sos-light);
  text-align: center;
  transition: .3s ease;
}

.hover-avatar:hover span {
  opacity: 1;
}

.hover-avatar:hover img {
  opacity: .35;
  transform: scale(1.08);
  filter: blur(2px);
}

/* =========================================================
   USER CP
   ========================================================= */

.usercp_nav,
table.usercp_nav,
.usercp table,
#content table.tborder {
  border-radius: 4px;
  overflow: hidden;
}

.usercp_nav,
table.usercp_nav {
  width: 260px;
  background: #091317 !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.16), 0 10px 30px rgba(0,0,0,0.35);
}

.usercp_nav .thead,
.usercp_nav .tcat,
table.usercp_nav .thead,
table.usercp_nav .tcat {
  background: #2F3638 !important;
  color: #d4d6d6 !important;
  border-bottom: 1px solid rgba(163,124,84,0.45) !important;
}

.usercp_nav .thead strong,
.usercp_nav .tcat strong,
table.usercp_nav .thead strong,
table.usercp_nav .tcat strong {
  color: #d4d6d6 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-weight: normal !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.usercp_nav .trow1,
.usercp_nav .trow2,
table.usercp_nav .trow1,
table.usercp_nav .trow2 {
  background: #0f171b !important;
  padding: 10px !important;
  border-top: 1px solid rgba(163,124,84,0.10) !important;
  border-bottom: 1px solid rgba(163,124,84,0.10) !important;
}

.usercp_nav a,
table.usercp_nav a,
.usercp_nav .usercp_nav_item,
table.usercp_nav .usercp_nav_item,
a.usercp_nav_item {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: #151f24 !important;
  color: #d4d6d6 !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  border-radius: 3px;
  padding: 9px 12px !important;
  margin: 0 0 6px 0 !important;
  text-decoration: none !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-size: 0.98rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.2;
  float: none !important;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.usercp_nav a:last-child,
table.usercp_nav a:last-child,
.usercp_nav .usercp_nav_item:last-child,
table.usercp_nav .usercp_nav_item:last-child {
  margin-bottom: 0 !important;
}

.usercp_nav a:hover,
table.usercp_nav a:hover,
.usercp_nav .usercp_nav_item:hover,
table.usercp_nav .usercp_nav_item:hover,
a.usercp_nav_item:hover {
  background: #2F3638 !important;
  color: #f1dfc8 !important;
  border-color: rgba(163,124,84,0.50) !important;
  text-shadow: none !important;
}

.usercp_nav .usercp_nav_current,
table.usercp_nav .usercp_nav_current,
.usercp_nav a.usercp_nav_current,
table.usercp_nav a.usercp_nav_current {
  background: #2F3638 !important;
  color: #f1dfc8 !important;
  border-color: rgba(163,124,84,0.62) !important;
  box-shadow: inset 0 0 0 1px rgba(163,124,84,0.14);
}

#content .tborder {
  background: #091317 !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.16), 0 10px 30px rgba(0,0,0,0.35);
}

#content .thead {
  background: #2F3638 !important;
  color: #d4d6d6 !important;
  border-bottom: 1px solid rgba(163,124,84,0.45) !important;
}

#content .thead strong,
#content .thead a {
  color: #d4d6d6 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-weight: normal !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#content .trow1 {
  background: #091317 !important;
  color: #969ca5 !important;
  border-top: 1px solid rgba(163,124,84,0.10) !important;
  border-bottom: 1px solid rgba(163,124,84,0.10) !important;
}

#content .trow2 {
  background: #0f171b !important;
  color: #969ca5 !important;
  border-top: 1px solid rgba(163,124,84,0.10) !important;
  border-bottom: 1px solid rgba(163,124,84,0.10) !important;
}

#content .tcat {
  background: #151f24 !important;
  color: #A37C54 !important;
  border-top: 1px solid rgba(163,124,84,0.22) !important;
  border-bottom: 1px solid rgba(163,124,84,0.22) !important;
}

#content .tcat strong {
  color: #A37C54 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-weight: normal !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#content .tfoot {
  background: #151f24 !important;
  border-top: 1px solid rgba(163,124,84,0.22) !important;
}

.usercp_container,
.usercp_content {
  background: transparent !important;
}

.usercp_content .tborder {
  margin-bottom: 16px;
}

#content input.textbox {
  min-height: 36px;
}

#content textarea {
  min-height: 140px;
  resize: vertical;
}

.sos-ucp-layout {
  align-items: flex-start;
}

.sos-ucp-sidebar,
.sos-ucp-main {
  min-width: 0;
}

.sos-ucp-main > .tborder,
.sos-ucp-main form > .tborder,
.sos-ucp-main table.tborder {
  width: 100% !important;
  margin-bottom: 16px;
}

.sos-ucp-main > br,
.sos-ucp-main form > br {
  display: none;
}

.sos-ucp-main img.rounded-circle {
  display: block;
  width: 120px !important;
  height: 120px !important;
  object-fit: cover;
  margin: 0 0 16px 0;
  border: 2px solid rgba(163,124,84,0.45);
  background: #091317;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.16), 0 10px 30px rgba(0,0,0,0.35);
}

.sos-ucp-main .alert.bg-white {
  background: #0f171b !important;
  color: #969ca5 !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  padding: 12px !important;
}

.sos-ucp-main .largetext,
.sos-ucp-main .largetext a {
  color: #A37C54 !important;
  font-family: "IM Fell English", Georgia, serif !important;
}

.sos-ucp-main strong {
  color: #d4d6d6;
}

.sos-ucp-main textarea.usercp_notepad {
  width: 100% !important;
  min-height: 180px;
}

/* =========================================================
   SHOWTHREAD HEADER / CONTROLS
   ========================================================= */

.container-md > .card.catmod,
.d-block.d-sm-block.d-md-block.d-lg-none.d-xl-none.d-xxl-none > .card.catmod,
.card.shadow-sm.rounded.border-0.p-2.mt-4.mb-4 {
  background: var(--sos-deep) !important;
  border: 1px solid var(--sos-border) !important;
  box-shadow: var(--sos-shadow) !important;
  border-radius: 8px !important;
}

.container-md > .card.catmod p,
.container-md > .card.catmod label,
.container-md > .card.catmod .text-muted,
.card.shadow-sm.rounded.border-0.p-2.mt-4.mb-4,
.card.shadow-sm.rounded.border-0.p-2.mt-4.mb-4 .text-muted {
  color: var(--sos-text) !important;
}

.container-md > .card.catmod p[style*="font-size: 20px"],
.d-block.d-sm-block.d-md-block.d-lg-none.d-xl-none.d-xxl-none .card.catmod p[style*="font-size: 20px"] {
  color: var(--sos-light) !important;
  font-family: var(--sos-font) !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.container-md .card.catmod .btn,
.card.catmod .btn,
#moderator_options .btn,
#inlinemoderation_options .btn {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
  border: 1px solid var(--sos-brass-strong) !important;
  border-radius: 4px !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.container-md .card.catmod .btn:hover,
.card.catmod .btn:hover,
#moderator_options .btn:hover,
#inlinemoderation_options .btn:hover {
  background: #3a4346 !important;
  color: #fff5ea !important;
}

.container-md .card.catmod .form-select,
.card.catmod .form-select,
#moderator_options .form-select,
#inlinemoderation_options .form-select {
  background: var(--sos-panel) !important;
  color: var(--sos-light) !important;
  border: 1px solid var(--sos-border) !important;
}

/* =========================================================
   DESKTOP POSTBIT
   Fixed width. No stacking.
   Portrait locked at 250x400.
   ========================================================= */

.sos-post {
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
  margin: 24px auto !important;
  background: var(--sos-deep) !important;
  border: 1px solid var(--sos-border) !important;
  box-shadow: var(--sos-shadow) !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.sos-post__grid {
  display: grid !important;
  grid-template-columns: var(--sos-post-side-width) minmax(0, 1fr) !important;
  gap: 0 !important;
  align-items: start !important;
}

.sos-post__side {
  padding: 12px 14px 14px !important;
  border-right: 1px solid rgba(163,124,84,.18) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

.sos-post__portraitwrap {
  margin: 0 !important;
  padding: 12px !important;
  background: transparent !important;
  border: 1px solid rgba(163,124,84,.18) !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.sos-post__portrait {
  width: var(--sos-post-portrait-width) !important;
  min-width: var(--sos-post-portrait-width) !important;
  max-width: var(--sos-post-portrait-width) !important;
  margin: 0 auto !important;
}

.sos-post__portrait img {
  display: block !important;
  width: var(--sos-post-portrait-width) !important;
  min-width: var(--sos-post-portrait-width) !important;
  max-width: var(--sos-post-portrait-width) !important;
  height: var(--sos-post-portrait-height) !important;
  min-height: var(--sos-post-portrait-height) !important;
  max-height: var(--sos-post-portrait-height) !important;
  object-fit: cover !important;
  object-position: center top !important;
  border: 2px solid rgba(163,124,84,.55) !important;
  border-radius: 150px 150px 0 0 !important;
  background: var(--sos-panel) !important;
}

.sos-post__quote {
  margin: 0 !important;
  padding: 14px 18px !important;
  min-height: 96px !important;
  background: transparent !important;
  border: 1px solid rgba(163,124,84,.18) !important;
  color: var(--sos-light) !important;
  font-family: var(--sos-font) !important;
  font-size: .95rem !important;
  font-style: italic !important;
  line-height: 1.35 !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

.sos-post__quote:empty {
  display: none;
}

.sos-post__main {
  min-width: 0 !important;
  padding: 12px 18px 0 !important;
  box-sizing: border-box !important;
  background:
    linear-gradient(to bottom, rgba(5,11,15,.52), rgba(5,11,15,.72)),
    var(--sos-post-top-bg) center top / cover no-repeat !important;
}

.sos-post__namewrap {
  margin: 0 0 10px !important;
  padding: 0 2px !important;
  text-align: left !important;
}

.sos-post__name {
  display: inline-block !important;
  color: var(--sos-light) !important;
  font-family: var(--sos-font) !important;
  font-size: 1.95rem !important;
  font-weight: normal !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none !important;
}

.sos-post__bar {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 12px !important;
  background: rgba(5,11,15,.28) !important;
  border: 1px solid rgba(163,124,84,.35) !important;
  border-radius: 28px !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

.sos-post__bar .mp-card {
  background: rgba(5,11,15,.18) !important;
  border: 1px solid rgba(163,124,84,.35) !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  box-sizing: border-box !important;
}

.sos-post__bar .mp-card h4 {
  margin: 0 0 10px !important;
  padding-bottom: 6px !important;
  border-bottom: 1px solid rgba(163,124,84,.35) !important;
  color: var(--sos-light) !important;
  font-family: var(--sos-font) !important;
  font-size: 1rem !important;
  font-weight: normal !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.sos-post__bar .mp-card.mp-grid {
  display: grid !important;
  gap: 8px !important;
}

.sos-post__bar .mp-pill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 28px !important;
  padding: 6px 10px !important;
  background: rgba(5,11,15,.40) !important;
  border: 1px solid rgba(163,124,84,.38) !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}

.sos-post__bar .mp-pill .label {
  color: var(--sos-brass) !important;
  font-size: .76rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: none !important;
}

.sos-post__bar .mp-pill .value {
  color: var(--sos-light) !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
}

.sos-post__stats {
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 10px 8px 12px !important;
  background: transparent !important;
  border: 0 !important;
  box-sizing: border-box !important;
}

.sos-statpill {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-height: 34px !important;
  padding: 6px 10px !important;
  background: rgba(15,23,27,.72) !important;
  border: 1px solid rgba(163,124,84,.34) !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
}

.sos-statpill .label {
  color: var(--sos-brass) !important;
  font-size: .88rem !important;
  font-weight: 700 !important;
  letter-spacing: .02em !important;
  text-transform: uppercase !important;
}

.sos-statpill .value {
  color: var(--sos-light) !important;
  font-size: .9rem !important;
  font-weight: 600 !important;
}

.sos-post__utility {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  margin: 0 -18px !important;
  padding: 14px 18px !important;
  background: rgba(5,11,15,.84) !important;
  border-top: 1px solid rgba(163,124,84,.18) !important;
  border-bottom: 1px solid rgba(163,124,84,.18) !important;
  box-sizing: border-box !important;
}

.sos-post__meta {
  color: var(--sos-text-soft) !important;
  font-size: .92rem !important;
}

.sos-post__meta * {
  font-size: .92rem !important;
}

.sos-post__actions {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.sos-post__actions a,
.sos-post__actions .btn,
.sos-post__actions .postbit_quote,
.sos-post__actions .postbit_edit,
.sos-post__actions .postbit_qdelete,
.sos-post__actions .postbit_qrestore,
.sos-post__actions .postbit_multiquote {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 62px !important;
  min-height: 40px !important;
  padding: 8px 14px !important;
  background: #4a4e52 !important;
  color: var(--sos-light) !important;
  border: 0 !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-family: var(--sos-font) !important;
  font-size: .95rem !important;
}

.sos-post__actions a:hover,
.sos-post__actions .btn:hover {
  background: #5b6166 !important;
  color: #fff5ea !important;
}

.sos-post__body {
  min-height: 280px !important;
  margin: 0 -18px !important;
  padding: 26px 30px 34px !important;
  background: rgba(5,11,15,.96) !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--sos-light) !important;
  font-family: var(--sos-font) !important;
  font-size: 1.02rem !important;
  line-height: 1.9 !important;
  letter-spacing: 0 !important;
  box-sizing: border-box !important;
}

.sos-post__body p:last-child {
  margin-bottom: 0;
}

.sos-post__body a {
  color: var(--sos-link) !important;
}

.sos-post__body a:hover {
  color: var(--sos-link-hover) !important;
}

.sos-post__body .signature,
.sos-post__body .post_signature {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(163,124,84,.18);
}

/* kill old temporary stitched fragments if any survive */
.mp-righttop,
.sos-post-shell,
.post_meta,
.post_body:empty {
  display: none !important;
}

/* quick reply */
#quick_reply_form .row.mb-4.shadow-sm.border-0.rounded.bg-white,
.d-block.d-sm-block.d-md-block.d-lg-none.d-xl-none.d-xxl-none .card.border-0.shadow-sm {
  background: var(--sos-deep) !important;
  border: 1px solid var(--sos-border) !important;
  box-shadow: var(--sos-shadow) !important;
  border-radius: 8px !important;
}

#quick_reply_form textarea.form-control,
.d-block.d-sm-block.d-md-block.d-lg-none.d-xl-none.d-xxl-none textarea.form-control {
  background: var(--sos-panel) !important;
  color: var(--sos-light) !important;
  border: 1px solid var(--sos-border) !important;
  box-shadow: none !important;
}

#quick_reply_form .btn,
.d-block.d-sm-block.d-md-block.d-lg-none.d-xl-none.d-xxl-none .btn {
  background: var(--sos-panel-3) !important;
  color: var(--sos-light) !important;
  border: 1px solid var(--sos-brass-strong) !important;
}

#quick_reply_form .btn:hover,
.d-block.d-sm-block.d-md-block.d-lg-none.d-xl-none.d-xxl-none .btn:hover {
  background: #3a4346 !important;
  color: #fff5ea !important;
}

.editor_control_bar {
  background: var(--sos-panel) !important;
  color: var(--sos-text) !important;
  border: 1px solid var(--sos-border) !important;
}

.card.body.bg-white.rounded.shadow-sm.mt-3.mb-3.border-0,
.d-block.d-sm-block.d-md-block.d-lg-none.d-xl-none.d-xxl-none .card-body.bg-white.shadow-sm.rounded.border-0.p-3.mt-3 {
  background: var(--sos-deep) !important;
  border: 1px solid var(--sos-border) !important;
  box-shadow: var(--sos-shadow) !important;
  color: var(--sos-text) !important;
}

/* footer */
#footer {
  background: transparent !important;
  color: var(--sos-text-soft) !important;
}

.sos-footer {
  background: var(--sos-deep);
  border-top: 1px solid var(--sos-border);
  margin-top: 40px;
  padding: 28px 0;
}

.sos-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 28px;
}

.sos-footer__left {
  flex: 1 1 580px;
  min-width: 0;
}

.sos-footer__right {
  flex: 0 1 320px;
  min-width: 260px;
}

.sos-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
}

.sos-footer__links li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sos-footer__credit {
  color: var(--sos-text-soft);
  font-size: 0.95rem;
  line-height: 1.6;
}

.sos-footer__search .input-group {
  display: flex;
  gap: 8px;
}

.sos-footer__search .form-control {
  flex: 1 1 auto;
}

.sos-footer__selectors {
  margin-top: 14px;
}

.sos-footer select,
.sos-footer .form-select,
.sos-footer .form-control {
  background: var(--sos-panel) !important;
  color: var(--sos-light) !important;
  border: 1px solid var(--sos-border) !important;
}

/* =========================================================
   COMPACT PASS
   Append this at the VERY BOTTOM of your CSS
   ========================================================= */

/* global scale-down */
:root{
  --sos-site-width: 1200px;
  --sos-sidebar-width: 240px;
  --sos-post-side-width: 280px;
  --sos-post-portrait-width: 250px;
  --sos-post-portrait-height: 400px;
  --sos-nav-height: 62px;
}

/* page background stays centered to the same width */
html,
body{
  background-size: var(--sos-site-width) auto !important;
  padding-top: var(--sos-nav-height) !important;
}

/* all main shells obey the smaller width */
.wrapper,
.container-md,
#container,
#content,
#main-content,
.sos-main,
.sos-cotf-shell,
#panel .upper .wrapper,
.menuwrapper .wrapper,
.sos-notices,
.sos-footer__inner,
.welcome,
#logobanner,
.sos-post{
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
}

/* =========================================================
   NAV / HEADER COMPACTING
   ========================================================= */

.menuwrapper .menu,
ul.menu{
  gap: 20px !important;
  min-height: var(--sos-nav-height) !important;
}

.menuwrapper .menu a,
ul.menu li a{
  padding: 16px 0 !important;
  font-size: .88rem !important;
  letter-spacing: .06em !important;
}

#header{
  padding-top: var(--sos-nav-height) !important;
}

.sos-accountbar{
  padding: 8px 10px !important;
}

.sos-accountbar__hello{
  font-size: .95rem !important;
}

.sos-accountbar__links a{
  padding: 4px 8px !important;
  font-size: .82rem !important;
}

/* banner text */
#logobanner{
  min-height: 440px !important;
}

#logobanner .logotitle{
  top: 122px !important;
  left: 22% !important;
}

#logobanner .plotheader{
  top: 182px !important;
  left: 22% !important;
}

#logobanner .logotitle a,
#logobanner .logotitle{
  font-size: clamp(2.2rem, 3vw, 3.6rem) !important;
  letter-spacing: .03em !important;
}

#logobanner .plotheader{
  font-size: clamp(.9rem, 1.1vw, 1.15rem) !important;
  letter-spacing: .09em !important;
}

/* =========================================================
   INDEX / SIDEBAR COMPACTING
   ========================================================= */

.sos-cotf-shell,
#container{
  grid-template-columns: var(--sos-sidebar-width) minmax(0, 1fr) !important;
  gap: 12px !important;
}

#sidebar-collapse,
.sos-sidebar,
#container > .float_left{
  width: var(--sos-sidebar-width) !important;
  min-width: var(--sos-sidebar-width) !important;
  max-width: var(--sos-sidebar-width) !important;
}

.trow1forum{
  padding: 12px 14px !important;
}

.sidelinksmenu{
  gap: 6px !important;
}

.sidelinksmenu a{
  padding: 7px 9px !important;
  font-size: .82rem !important;
}

/* =========================================================
   WELCOME TABLE COMPACTING
   ========================================================= */

.welcome{
  padding: 10px !important;
  margin-bottom: 22px !important;
  border-radius: 250px 250px 0 0 !important;
}

.welcome__arch{
  min-height: 250px !important;
  padding: 18px 14px 14px !important;
  border-radius: 360px 360px 0 0 !important;
}

.welcome__arch-fill{
  min-height: 205px !important;
}

.welcome__arch-hello{
  font-size: .9rem !important;
  margin-bottom: 6px !important;
}

.welcome__arch-title{
  font-size: 2rem !important;
}

.welcome__row{
  gap: 8px !important;
  margin-top: 8px !important;
}

.welcome__content{
  padding: 14px !important;
}

.welcome__title{
  padding: 7px 8px 6px !important;
}

.welcome__title p{
  font-size: 1.15rem !important;
}

.welcome__text{
  padding: 8px 10px !important;
}

.welcome__text-inner{
  max-height: 130px !important;
}

.welcome__text-inner p{
  margin-bottom: 8px !important;
  line-height: 1.55 !important;
  font-size: .92rem !important;
}

.welcome__weather{
  padding: 9px 10px !important;
}

.welcome__weather p{
  line-height: 1.5 !important;
  font-size: .9rem !important;
}

.welcome__links{
  padding: 10px !important;
  gap: 6px !important;
}

.welcome__links a{
  padding: 7px !important;
  font-size: .78rem !important;
}

.hover-avatar{
  width: 130px !important;
  height: 175px !important;
}

.hover-avatar img{
  width: 130px !important;
  height: 175px !important;
}

/* =========================================================
   POSTBIT COMPACTING
   Keeps portrait at 250x400, but shrinks everything else
   ========================================================= */

.sos-post{
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
}

.sos-post__grid{
  grid-template-columns: var(--sos-post-side-width) minmax(0, 1fr) !important;
}

.sos-post__side{
  padding: 10px 12px 12px !important;
  gap: 8px !important;
}

.sos-post__portraitwrap{
  padding: 10px !important;
}

.sos-post__portrait{
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
}

.sos-post__portrait img{
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 400px !important;
  min-height: 400px !important;
  max-height: 400px !important;
}

.sos-post__quote{
  padding: 10px 12px !important;
  min-height: 72px !important;
  font-size: .88rem !important;
  line-height: 1.25 !important;
}

.sos-post__main{
  padding: 10px 14px 0 !important;
}

.sos-post__namewrap{
  margin-bottom: 8px !important;
}

.sos-post__name{
  font-size: 1.55rem !important;
}

.sos-post__bar{
  gap: 8px !important;
  padding: 8px !important;
  border-radius: 18px !important;
}

.sos-post__bar .mp-card{
  padding: 8px 9px !important;
}

.sos-post__bar .mp-card h4{
  font-size: .86rem !important;
  margin-bottom: 8px !important;
  padding-bottom: 5px !important;
}

.sos-post__bar .mp-card.mp-grid{
  gap: 6px !important;
}

.sos-post__bar .mp-pill{
  min-height: 24px !important;
  padding: 4px 8px !important;
  gap: 5px !important;
}

.sos-post__bar .mp-pill .label{
  font-size: .66rem !important;
}

.sos-post__bar .mp-pill .value{
  font-size: .7rem !important;
}

.sos-post__stats{
  gap: 8px !important;
  padding: 8px 4px 10px !important;
}

.sos-statpill{
  min-height: 28px !important;
  padding: 4px 8px !important;
  gap: 6px !important;
}

.sos-statpill .label{
  font-size: .74rem !important;
}

.sos-statpill .value{
  font-size: .78rem !important;
}

.sos-post__utility{
  padding: 10px 14px !important;
}

.sos-post__meta,
.sos-post__meta *{
  font-size: .78rem !important;
}

.sos-post__actions{
  gap: 6px !important;
}

.sos-post__actions a,
.sos-post__actions .btn,
.sos-post__actions .postbit_quote,
.sos-post__actions .postbit_edit,
.sos-post__actions .postbit_qdelete,
.sos-post__actions .postbit_qrestore,
.sos-post__actions .postbit_multiquote{
  min-width: 52px !important;
  min-height: 32px !important;
  padding: 6px 10px !important;
  font-size: .82rem !important;
}

.sos-post__body{
  min-height: 220px !important;
  padding: 20px 24px 26px !important;
  font-size: .94rem !important;
  line-height: 1.75 !important;
}

/* =========================================================
   FOOTER COMPACTING
   ========================================================= */

.sos-footer{
  padding: 22px 0 !important;
}

.sos-footer__inner{
  gap: 20px !important;
}

.sos-footer__links{
  gap: 8px 14px !important;
}

.sos-footer__credit{
  font-size: .85rem !important;
}

/* =========================================================
   BOARD SHELL = SAME WIDTH AS WELCOME TABLE
   Paste at VERY BOTTOM
   ========================================================= */

:root{
  --sos-site-width: 1200px; /* or 1400px if that is your real final target */
}

/* Welcome table and board shell use the exact same width */
.welcome,
.container-md,
#container,
.sos-cotf-shell,
#main-content,
.sos-main {
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* The combined sidebar + forum area should fill that full shell */
#container,
.sos-cotf-shell {
  display: grid !important;
  grid-template-columns: var(--sos-sidebar-width) minmax(0, 1fr) !important;
  gap: 14px !important;
  align-items: start !important;
  padding: 0 !important;
}

/* Sidebar stays fixed width */
#sidebar-collapse,
.sos-sidebar,
#container > .float_left {
  width: var(--sos-sidebar-width) !important;
  min-width: var(--sos-sidebar-width) !important;
  max-width: var(--sos-sidebar-width) !important;
  margin: 0 !important;
  float: none !important
}
	  
	  /* =========================================
   NARROWER FORUM WIDTH
   ========================================= */

:root{
  --sos-site-width: 1100px;
}

/* all major shells */
.wrapper,
.container-md,
#container,
#content,
#main-content,
.sos-main,
.sos-cotf-shell,
#panel .upper .wrapper,
.menuwrapper .wrapper,
.sos-notices,
.sos-footer__inner,
.welcome,
#logobanner,
.sos-post{
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
}

/* keep the page background aligned to the same width */
html,
body{
  background-size: var(--sos-site-width) auto !important;
}

/* keep the fixed nav inner width matched too */
.menuwrapper .wrapper{
  width: var(--sos-site-width) !important;
  min-width: var(--sos-site-width) !important;
  max-width: var(--sos-site-width) !important;
}

/* =========================================================
   SOS PROFILE MOCKUP BUILD
   ========================================================= */

.sos-mockprofile-page {
  margin-top: 18px;
}

.sos-mockprofile {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  color: var(--sos-text);
}

.sos-mockprofile__namewrap {
  margin-bottom: 14px;
  text-align: center;
}

.sos-mockprofile__name {
  display: inline-block;
  padding: 0 14px;
  color: var(--sos-brass);
  font-family: var(--sos-font);
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-style: italic;
  letter-spacing: .05em;
  text-shadow: 0 0 8px rgba(0,0,0,.5);
}

.sos-card {
  background:
    linear-gradient(to bottom, rgba(15,23,27,.88), rgba(8,14,17,.94)),
    var(--sos-post-top-bg) center center / cover no-repeat;
  border: 1px solid rgba(163,124,84,.45);
  border-radius: 18px;
  box-shadow: 0 0 0 1px rgba(163,124,84,.12), 0 10px 30px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.02);
  padding: 14px;
  margin-bottom: 16px;
}

.sos-section-title {
  margin: 0 0 12px 0;
  text-align: center;
  color: #f0e1a2;
  font-family: var(--sos-font);
  font-size: 2rem;
  font-style: italic;
  letter-spacing: .03em;
  text-shadow: 0 0 8px rgba(0,0,0,.55);
}

.sos-section-title--small {
  font-size: 1.7rem;
  margin-bottom: 10px;
}

.sos-mockprofile__hero {
  margin-bottom: 16px;
}

.sos-mockprofile__mainimage {
  width: 100%;
  height: 320px;
  border: 1px solid rgba(163,124,84,.55);
  border-radius: 18px 18px 0 0;
  background:
    linear-gradient(to bottom, rgba(15,23,27,.45), rgba(8,14,17,.65)),
    var(--sos-post-top-bg) center center / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 0 16px rgba(0,0,0,.28);
}

.sos-mockprofile__thumbs {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 8px 10px 0;
}

.sos-gallery-thumb {
  width: 64px;
  height: 64px;
  border: 1px solid rgba(163,124,84,.45);
  border-radius: 6px;
  background-color: var(--sos-deep);
  background-image: var(--thumb-image);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}

.sos-gallery-thumb:hover,
.sos-gallery-thumb.is-active {
  transform: translateY(-1px);
  border-color: rgba(163,124,84,.85);
  box-shadow: 0 0 0 2px rgba(163,124,84,.18);
}

.sos-mockprofile__toprow {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

.sos-mockprofile__avatarcol {
  min-width: 0;
}

.sos-avatarwindow {
  height: 430px;
  padding: 10px;
  border: 1px solid rgba(163,124,84,.45);
  border-radius: 100px 100px 0 0;
  background:
    linear-gradient(to bottom, rgba(15,23,27,.88), rgba(8,14,17,.94)),
    var(--sos-post-top-bg) center center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(163,124,84,.12), 0 10px 30px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.02);
  overflow: hidden;
}

.sos-avatarwindow img,
.sos-avatarwindow .avatar img,
.sos-avatarwindow .avatar-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 88px 88px 0 0 !important;
  border: 1px solid rgba(163,124,84,.35) !important;
  background: var(--sos-deep);
}

.sos-mockprofile__rightcol {
  min-width: 0;
}

.sos-pillbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.sos-pill {
  min-height: 42px;
  padding: 7px 10px;
  border: 1px solid rgba(163,124,84,.45);
  border-radius: 999px;
  background: rgba(15,23,27,.88);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.sos-pill__label {
  color: #d7c3a4;
  font-size: .9rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.sos-pill__value {
  color: #95e0d0;
  font-size: 1rem;
  font-style: italic;
}

.sos-vitals {
  padding: 14px;
}

.sos-vitals__list {
  display: grid;
  gap: 8px;
}

.sos-vital {
  display: grid;
  grid-template-columns: 180px minmax(0,1fr);
  gap: 10px;
  align-items: center;
  min-height: 36px;
  padding: 7px 12px;
  border: 1px solid rgba(163,124,84,.36);
  border-radius: 999px;
  background: rgba(15,23,27,.78);
}

.sos-vital__label {
  color: #e9e4dc;
  font-family: var(--sos-font);
  font-size: 1rem;
  font-style: italic;
  letter-spacing: .04em;
}

.sos-vital__value {
  color: var(--sos-light);
  font-size: 1rem;
  text-align: left;
}

.sos-tiergrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

.sos-tiercard {
  min-height: 260px;
  border: 1px solid rgba(163,124,84,.42);
  border-radius: 12px;
  background: rgba(15,23,27,.75);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
  overflow: hidden;
}

.sos-tiercard__title {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(163,124,84,.32);
  text-align: center;
  color: #f0e1a2;
  font-family: var(--sos-font);
  font-size: 1.35rem;
  font-style: italic;
}

.sos-tiercard__body {
  padding: 14px;
  color: var(--sos-light);
  line-height: 1.65;
  text-align: justify;
}

.sos-copy {
  color: var(--sos-light);
  line-height: 1.8;
  text-align: justify;
  font-size: 1rem;
}

.sos-mentalitygrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
}

.sos-mini-card {
  border: 1px solid rgba(163,124,84,.42);
  border-radius: 12px;
  background: rgba(15,23,27,.75);
  padding: 12px;
}

.sos-mini-card__title {
  margin-bottom: 8px;
  text-align: center;
  color: #5af1d0;
  font-family: var(--sos-font);
  font-size: 1.8rem;
  text-shadow: 0 0 8px rgba(0,0,0,.55);
}

.sos-mini-card__body {
  color: var(--sos-light);
  line-height: 1.7;
  text-align: center;
}

.sos-historyfamily {
  max-width: 62%;
  margin: 0 auto 14px;
  padding: 12px;
  border: 1px solid rgba(163,124,84,.36);
  border-radius: 10px;
  background: rgba(145,153,173,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

.sos-historyfamily__title {
  margin-bottom: 8px;
  text-align: center;
  color: #d6d0ff;
  font-family: var(--sos-font);
  font-size: 1.8rem;
  text-shadow: 0 0 8px rgba(0,0,0,.55);
}

.sos-historyfamily__body {
  color: var(--sos-light);
  line-height: 1.7;
  text-align: center;
}

.sos-profile-signature {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(163,124,84,.22);
}

@media (max-width: 980px) {
  .sos-pillbar {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .sos-vital {
    grid-template-columns: 1fr;
    gap: 4px;
    border-radius: 18px;
  }

  .sos-tiergrid,
  .sos-mentalitygrid {
    grid-template-columns: 1fr;
  }

  .sos-historyfamily {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .sos-mockprofile__mainimage {
    height: 220px;
  }

  .sos-mockprofile__toprow {
    grid-template-columns: 1fr;
  }

  .sos-avatarwindow {
    max-width: 280px;
    margin: 0 auto;
    height: 380px;
  }

  .sos-mockprofile__name {
    font-size: 2.4rem;
  }
}

/* =========================================================
   SOS PROFILE MOCKUP CALMER OVERRIDES
   paste BELOW the current profile css
   ========================================================= */

.sos-mockprofile {
  max-width: 860px;
}

.sos-mockprofile__namewrap {
  margin-bottom: 10px;
}

.sos-mockprofile__name {
  font-size: clamp(1.9rem, 3vw, 2.8rem);
  letter-spacing: .03em;
  color: var(--sos-brass);
  text-shadow: 0 0 6px rgba(0,0,0,.45);
}

.sos-card {
  padding: 10px 12px;
  margin-bottom: 12px;
  border-radius: 14px;
}

.sos-section-title,
.sos-section-title--small,
.sos-mini-card__title,
.sos-historyfamily__title,
.sos-tiercard__title {
  color: var(--sos-brass);
  text-shadow: 0 0 6px rgba(0,0,0,.45);
}

.sos-section-title {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.sos-section-title--small {
  font-size: 1.35rem;
}

.sos-copy,
.sos-tiercard__body,
.sos-mini-card__body,
.sos-historyfamily__body,
.sos-vital__value {
  color: var(--sos-light);
  font-size: .95rem;
  line-height: 1.65;
}

.sos-vital__label,
.sos-pill__label {
  color: var(--sos-light);
  opacity: .85;
}

.sos-pill__value {
  color: var(--sos-light);
  font-style: normal;
}

.sos-mockprofile__hero {
  margin-bottom: 12px;
}

.sos-mockprofile__mainimage {
  height: 220px;
  padding: 10px;
  border-radius: 14px 14px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,20,23,.82);
}

.sos-mockprofile__mainimage img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  border: 1px solid rgba(163,124,84,.35);
  background: transparent;
}

.sos-mockprofile__thumbs {
  gap: 6px;
  padding-top: 6px;
}

.sos-gallery-thumb {
  width: 46px;
  height: 46px;
  border-radius: 4px;
}

.sos-mockprofile__toprow {
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
  margin-bottom: 12px;
}

.sos-mockprofile__rightcol {
  display: flex;
  flex-direction: column;
  min-height: 360px;
}

.sos-avatarwindow {
  height: 360px;
  padding: 8px;
  border-radius: 80px 80px 0 0;
}

.sos-avatarwindow img,
.sos-avatarwindow .avatar img,
.sos-avatarwindow .avatar-image img {
  border-radius: 72px 72px 0 0 !important;
}

.sos-pillbar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 8px;
}

.sos-pill {
  min-height: 34px;
  padding: 5px 8px;
  font-size: .86rem;
}

.sos-vitals {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.sos-vitals__list {
  flex: 1;
  gap: 6px;
}

.sos-vital {
  grid-template-columns: 145px minmax(0,1fr);
  min-height: 30px;
  padding: 5px 10px;
  gap: 8px;
}

.sos-vital__label,
.sos-vital__value {
  font-size: .9rem;
}

.sos-tiergrid {
  gap: 10px;
}

.sos-tiercard {
  min-height: 210px;
}

.sos-tiercard__title {
  padding: 8px 10px;
  font-size: 1.15rem;
}

.sos-tiercard__body {
  padding: 10px;
  font-size: .92rem;
}

.sos-mentalitygrid {
  gap: 10px;
}

.sos-mini-card {
  padding: 10px;
}

.sos-mini-card__title {
  font-size: 1.35rem;
  margin-bottom: 6px;
}

.sos-historyfamily {
  max-width: 56%;
  margin-bottom: 10px;
  padding: 10px;
}

.sos-historyfamily__title {
  font-size: 1.35rem;
  margin-bottom: 6px;
}

.sos-profile-signature {
  margin-top: 12px;
  padding-top: 12px;
}

@media (max-width: 980px) {
  .sos-pillbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sos-historyfamily {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .sos-mockprofile {
    max-width: 100%;
  }

  .sos-mockprofile__mainimage {
    height: 180px;
  }

  .sos-mockprofile__toprow {
    grid-template-columns: 1fr;
  }

  .sos-mockprofile__rightcol {
    min-height: 0;
  }

  .sos-avatarwindow {
    max-width: 240px;
    height: 320px;
    margin: 0 auto;
  }

  .sos-vital {
    grid-template-columns: 1fr;
    border-radius: 14px;
  }
}

/* =========================================================
   SOS PROFILE MOCKUP - tighter / calmer / real-image fix
   ========================================================= */

.sos-mockprofile {
  max-width: 760px;
}

.sos-mockprofile__namewrap {
  margin-bottom: 8px;
}

.sos-mockprofile__name {
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  letter-spacing: .03em;
  color: var(--sos-brass);
  text-shadow: 0 0 6px rgba(0,0,0,.45);
}

.sos-card {
  padding: 10px 12px;
  margin-bottom: 10px;
  border-radius: 14px;
}

.sos-section-title,
.sos-section-title--small,
.sos-mini-card__title,
.sos-historyfamily__title,
.sos-tiercard__title {
  color: var(--sos-brass) !important;
  text-shadow: 0 0 6px rgba(0,0,0,.45);
}

.sos-section-title {
  font-size: 1.45rem;
  margin-bottom: 8px;
}

.sos-section-title--small {
  font-size: 1.2rem;
  margin-bottom: 8px;
}

.sos-copy,
.sos-tiercard__body,
.sos-mini-card__body,
.sos-historyfamily__body,
.sos-vital__label,
.sos-vital__value,
.sos-pill__label,
.sos-pill__value {
  color: var(--sos-light) !important;
}

.sos-copy,
.sos-tiercard__body,
.sos-mini-card__body,
.sos-historyfamily__body {
  font-size: .88rem;
  line-height: 1.6;
}

.sos-pill__label,
.sos-pill__value,
.sos-vital__label,
.sos-vital__value {
  font-size: .8rem;
}

.sos-mockprofile__hero {
  margin-bottom: 10px;
}

.sos-mockprofile__mainimage {
  height: 160px;
  padding: 8px;
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10,20,23,.82);
  overflow: hidden;
}

.sos-mockprofile__mainimage img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  border: 1px solid rgba(163,124,84,.35);
  background: transparent;
}

.sos-mockprofile__thumbs {
  display: flex;
  justify-content: center;
  gap: 6px;
  padding: 6px 8px 0;
}

.sos-gallery-thumb {
  width: 42px;
  height: 42px;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(163,124,84,.45);
  border-radius: 4px;
  background: rgba(15,23,27,.9) !important;
  cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, box-shadow .2s ease;
}

.sos-gallery-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sos-gallery-thumb:hover,
.sos-gallery-thumb.is-active {
  transform: translateY(-1px);
  border-color: rgba(163,124,84,.85);
  box-shadow: 0 0 0 2px rgba(163,124,84,.16);
}

.sos-mockprofile__toprow {
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
  margin-bottom: 10px;
}

.sos-mockprofile__avatarcol {
  min-width: 0;
}

.sos-avatarwindow {
  height: 350px;
  padding: 8px;
  border-radius: 80px 80px 0 0;
}

.sos-avatarwindow img,
.sos-avatarwindow .avatar img,
.sos-avatarwindow .avatar-image img {
  border-radius: 72px 72px 0 0 !important;
}

.sos-mockprofile__rightcol {
  display: flex;
  flex-direction: column;
  height: 350px;
  min-height: 350px;
}

.sos-pillbar {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 6px;
}

.sos-pill {
  min-height: 30px;
  padding: 4px 8px;
}

.sos-vitals {
  flex: 1;
  min-height: 0;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
}

.sos-vitals__list {
  flex: 1;
  gap: 4px;
}

.sos-vital {
  grid-template-columns: 110px minmax(0,1fr);
  gap: 8px;
  min-height: 22px;
  padding: 3px 8px;
}

.sos-tiergrid {
  gap: 8px;
}

.sos-tiercard {
  min-height: 180px;
}

.sos-tiercard__title {
  padding: 7px 10px;
  font-size: 1rem;
}

.sos-tiercard__body {
  padding: 10px;
  font-size: .84rem;
}

.sos-mentalitygrid {
  gap: 8px;
}

.sos-mini-card {
  padding: 10px;
}

.sos-mini-card__title {
  font-size: 1.15rem;
  margin-bottom: 6px;
}

.sos-historyfamily {
  max-width: 54%;
  margin: 0 auto 10px;
  padding: 8px 10px;
}

.sos-historyfamily__title {
  font-size: 1.15rem;
  margin-bottom: 5px;
}

.sos-profile-signature {
  margin-top: 10px;
  padding-top: 10px;
}

@media (max-width: 900px) {
  .sos-pillbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sos-historyfamily {
    max-width: 100%;
  }
}

@media (max-width: 760px) {
  .sos-mockprofile {
    max-width: 100%;
  }

  .sos-mockprofile__mainimage {
    height: 140px;
  }

  .sos-mockprofile__toprow {
    grid-template-columns: 1fr;
  }

  .sos-mockprofile__rightcol {
    height: auto;
    min-height: 0;
  }

  .sos-avatarwindow {
    max-width: 220px;
    height: 300px;
    margin: 0 auto;
  }

  .sos-vital {
    grid-template-columns: 1fr;
    border-radius: 12px;
  }
}

/* =========================================================
   SOS PROFILE TOP FIX
   ========================================================= */

.sos-mockprofile {
  max-width: 760px !important;
}

/* ---------- top gallery ---------- */

.sos-mockprofile__hero {
  margin: 0 0 10px 0 !important;
  text-align: center !important;
}

.sos-gallery-radio {
  position: absolute !important;
  left: -9999px !important;
}

.sos-gallery-panels {
  margin-bottom: 6px !important;
}

.sos-gallery-stage {
  display: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  height: auto !important;
}

.sos-gallery-stage img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 170px !important;
  margin: 0 auto !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  object-fit: contain !important;
}

#sos-gallery-1:checked ~ .sos-gallery-panels .sos-gallery-stage--1,
#sos-gallery-2:checked ~ .sos-gallery-panels .sos-gallery-stage--2,
#sos-gallery-3:checked ~ .sos-gallery-panels .sos-gallery-stage--3,
#sos-gallery-4:checked ~ .sos-gallery-panels .sos-gallery-stage--4 {
  display: block !important;
}

.sos-mockprofile__thumbs {
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.sos-gallery-thumb {
  width: 34px !important;
  height: 34px !important;
  display: block !important;
  overflow: hidden !important;
  border: 1px solid rgba(163,124,84,.45) !important;
  border-radius: 4px !important;
  background: rgba(15,23,27,.9) !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.sos-gallery-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

#sos-gallery-1:checked ~ .sos-mockprofile__thumbs label[for="sos-gallery-1"],
#sos-gallery-2:checked ~ .sos-mockprofile__thumbs label[for="sos-gallery-2"],
#sos-gallery-3:checked ~ .sos-mockprofile__thumbs label[for="sos-gallery-3"],
#sos-gallery-4:checked ~ .sos-mockprofile__thumbs label[for="sos-gallery-4"] {
  border-color: rgba(163,124,84,.9) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,.2) !important;
}

/* ---------- avatar + vitals row ---------- */

.sos-mockprofile__toprow {
  display: grid !important;
  grid-template-columns: 200px minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: start !important;
  justify-content: start !important;
  margin-bottom: 10px !important;
}

.sos-mockprofile__avatarcol {
  width: 200px !important;
  min-width: 200px !important;
}

.sos-avatarwindow {
  width: 200px !important;
  height: 400px !important;
  padding: 8px !important;
  border-radius: 95px 95px 0 0 !important;
  overflow: hidden !important;
}

.sos-avatarwindow img,
.sos-avatarwindow .avatar img,
.sos-avatarwindow .avatar-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 86px 86px 0 0 !important;
}

.sos-mockprofile__rightcol {
  width: 100% !important;
  max-width: 520px !important;
  height: 400px !important;
  min-height: 400px !important;
  display: flex !important;
  flex-direction: column !important;
}

.sos-pillbar {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 4px !important;
  margin-bottom: 4px !important;
}

.sos-pill {
  min-height: 28px !important;
  padding: 2px 6px !important;
}

.sos-pill__label,
.sos-pill__value {
  font-size: .72rem !important;
  line-height: 1.1 !important;
  color: var(--sos-light) !important;
  font-style: normal !important;
}

.sos-vitals {
  flex: 1 1 auto !important;
  height: calc(400px - 32px) !important;
  max-height: calc(400px - 32px) !important;
  min-height: 0 !important;
  padding: 6px 8px !important;
  overflow: hidden !important;
}

.sos-vitals .sos-section-title--small {
  font-size: 1rem !important;
  margin-bottom: 4px !important;
}

.sos-vitals__list {
  height: 100% !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  gap: 3px !important;
  padding-right: 2px !important;
}

.sos-vital {
  grid-template-columns: 92px minmax(0,1fr) !important;
  gap: 6px !important;
  min-height: 20px !important;
  padding: 2px 7px !important;
}

.sos-vital__label,
.sos-vital__value {
  font-size: .72rem !important;
  line-height: 1.1 !important;
  color: var(--sos-light) !important;
}

@media (max-width: 760px) {
  .sos-mockprofile__toprow {
    grid-template-columns: 1fr !important;
  }

  .sos-mockprofile__avatarcol {
    width: auto !important;
    min-width: 0 !important;
  }

  .sos-avatarwindow {
    margin: 0 auto !important;
  }

  .sos-mockprofile__rightcol {
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .sos-vitals {
    height: auto !important;
    max-height: none !important;
  }

  .sos-vital {
    grid-template-columns: 1fr !important;
  }
}

/* =========================================
   SOS FOOTER PRETTY PASS
   ========================================= */

#debug{
  display:none !important;
}

#footer{
  background: transparent !important;
  margin-top: 34px !important;
}

.sos-footer{
  position: relative;
  background:
    linear-gradient(to bottom, rgba(5,11,15,.82), rgba(5,11,15,.92)),
    url(https://i.imgur.com/JxTdugo.jpeg) center 62% / cover no-repeat !important;
  border-top: 1px solid rgba(163,124,84,.22) !important;
  box-shadow: inset 0 1px 0 rgba(163,124,84,.08);
  padding: 30px 0 36px !important;
}

.sos-footer::before{
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: calc(100% - 40px);
  max-width: 1120px;
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(to right, transparent, rgba(163,124,84,.55), transparent);
}

.sos-footer__inner{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 34px !important;
  align-items: start;
}

.sos-footer__left{
  min-width: 0;
}

.sos-footer__right{
  width: 100%;
  min-width: 0 !important;
}

.sos-footer__links{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 16px !important;
  margin: 0 0 18px !important;
  padding: 0 !important;
  list-style: none !important;
}

.sos-footer__links li{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.sos-footer__links a{
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid rgba(163,124,84,.30);
  border-radius: 999px;
  background: rgba(8,16,20,.58);
  color: #d6c3a8 !important;
  text-decoration: none !important;
  font-size: .92rem;
  letter-spacing: .03em;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease, transform .15s ease;
}

.sos-footer__links a:hover{
  border-color: rgba(163,124,84,.65);
  background: rgba(20,28,32,.82);
  color: #f0e2cf !important;
  transform: translateY(-1px);
}

.sos-footer__credit{
  color: #aeb4ba !important;
  font-size: .86rem !important;
  line-height: 1.8 !important;
  max-width: 720px;
}

.sos-footer__creditline{
  display: block;
}

.sos-footer__credit a{
  color: #d6c3a8 !important;
}

.sos-footer__credit a:hover{
  color: #f0e2cf !important;
}

.sos-footer__search{
  width: 100%;
}

.sos-footer__search .input-group{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px !important;
  align-items: stretch;
}

.sos-footer__search .form-control{
  min-height: 48px;
  padding: 10px 14px !important;
  border-radius: 10px !important;
  background: rgba(8,16,20,.78) !important;
  border: 1px solid rgba(163,124,84,.28) !important;
  color: #d4d6d6 !important;
  box-shadow: none !important;
}

.sos-footer__search .form-control::placeholder{
  color: #7f8a91 !important;
  opacity: 1;
}

.sos-footer__search .button{
  min-width: 122px;
  min-height: 48px;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  background: rgba(47,54,56,.95) !important;
  border: 1px solid rgba(163,124,84,.35) !important;
  color: #e6e3d6 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  box-shadow: none !important;
}

.sos-footer__search .button:hover{
  background: rgba(60,69,73,.98) !important;
  border-color: rgba(163,124,84,.7) !important;
  color: #fff4e6 !important;
}

@media (max-width: 900px){
  .sos-footer__inner{
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .sos-footer__right{
    max-width: 100%;
  }

  .sos-footer__search .input-group{
    grid-template-columns: 1fr;
  }

  .sos-footer__search .button{
    width: 100%;
  }
}

.sos-post__side{
  width: 200px !important;
  min-width: 200px !important;
  max-width: 200px !important;
  position: relative !important;
  overflow: visible !important;
  align-self: start !important;
}

.sos-post__stickwrap{
  position: relative !important;
  transform: translateY(0);
  will-change: transform;
}

.sos-post__grid{
  display: grid !important;
  grid-template-columns: 200px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
}

.sos-post,
.sos-post__grid,
.sos-post__main,
.sos-post__body{
  overflow: visible !important;
}

@media (max-width: 991px){
  .sos-post__stickwrap{
    transform: none !important;
  }
}

/* member area in top nav */
.sos-topbar__member{
  margin-left: auto;
  display: flex;
  align-items: center;
  min-width: 0;
}

.sos-memberbar{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  min-width: 0;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

.sos-memberbar__links{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

.sos-memberbar__links li{
  margin: 0;
  padding: 0;
  list-style: none;
  float: none !important;
}

.sos-memberbar__links a{
  display: block !important;
  padding: 22px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--sos-text) !important;
  font-family: var(--sos-font) !important;
  font-size: inherit !important;
  font-style: normal !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1 !important;
  text-decoration: none !important;
  min-height: 0 !important;
}

.sos-memberbar__links a:hover,
.sos-memberbar__links a:focus{
  background: transparent !important;
  border: 0 !important;
  color: var(--sos-light) !important;
  text-shadow: none !important;
}

.sos-memberbar__welcome{
  white-space: nowrap;
  color: var(--sos-text);
  font-family: var(--sos-font);
  font-size: inherit;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sos-memberbar__welcome span{
  color: var(--sos-brass);
}

/* keep everything on one row a bit longer */
.menuwrapper .wrapper.sos-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.sos-topbar__nav{
  display: flex;
  align-items: center;
  min-width: 0;
}

/* optional: tighten spacing a little if needed */
.sos-topbar__nav .menu{
  gap: 34px !important;
}

@media (max-width: 1400px){
  .sos-memberbar,
  .sos-memberbar__links{
    gap: 18px;
  }

  .sos-topbar__nav .menu{
    gap: 24px !important;
  }
}

@media (max-width: 1100px){
  .menuwrapper .wrapper.sos-topbar{
    flex-direction: column;
    justify-content: center;
    padding: 8px 0;
  }

  .sos-topbar__member{
    margin-left: 0;
  }

  .sos-memberbar{
    flex-direction: column-reverse;
    gap: 10px;
    flex-wrap: wrap !important;
  }

  .sos-memberbar__links{
    justify-content: center;
    flex-wrap: wrap !important;
  }

  .sos-memberbar__welcome{
    text-align: center;
  }

  .sos-topbar__nav .menu{
    justify-content: center;
  }
}

.sos-topbar__member{
  margin-left: auto;
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 0 1 auto;
}

.sos-memberbar{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

.sos-memberbar__links{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap !important;
  white-space: nowrap;
}

.sos-memberbar__links li{
  margin: 0;
  padding: 0;
  list-style: none;
  float: none !important;
}

.sos-memberbar__links a{
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--sos-text) !important;
  font-family: var(--sos-font) !important;
  font-size: 0.82rem !important;
  font-style: normal !important;
  font-weight: normal !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1 !important;
  text-decoration: none !important;
  min-height: 0 !important;
  white-space: nowrap !important;
}

.sos-memberbar__links a:hover,
.sos-memberbar__links a:focus{
  background: transparent !important;
  border: 0 !important;
  color: var(--sos-light) !important;
  text-shadow: none !important;
}

/* kill icons / little symbols */
.sos-memberbar__links i,
.sos-memberbar__links svg,
.sos-memberbar__links img,
.sos-memberbar__links .fa,
.sos-memberbar__links .fas,
.sos-memberbar__links .far,
.sos-memberbar__links .fal,
.sos-memberbar__links .fab,
.sos-memberbar__links .fa-fw,
.sos-memberbar__links .icon{
  display: none !important;
}

.sos-memberbar__links a::before,
.sos-memberbar__links a::after{
  display: none !important;
  content: none !important;
}

.sos-memberbar__welcome{
  white-space: nowrap;
  color: var(--sos-text);
  font-family: var(--sos-font);
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
}

.sos-memberbar__welcome span{
  color: var(--sos-brass);
}

/* tighten the whole bar */
.menuwrapper .wrapper.sos-topbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.sos-topbar__nav{
  display: flex;
  align-items: center;
  min-width: 0;
}

.sos-topbar__nav .menu{
  gap: 22px !important;
}

.sos-topbar__nav .menu a,
ul.menu li a{
  padding: 0 !important;
  font-size: 0.82rem !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* give the fixed nav a compact height */
.menuwrapper,
.menuwrapper .menu,
ul.menu{
  min-height: 48px !important;
}

.menuwrapper .wrapper{
  padding: 14px 0 !important;
}

@media (max-width: 1400px){
  .sos-topbar__nav .menu{
    gap: 16px !important;
  }

  .sos-memberbar{
    gap: 12px;
  }

  .sos-memberbar__links{
    gap: 10px;
  }

  .sos-memberbar__links a,
  .sos-memberbar__welcome,
  .sos-topbar__nav .menu a,
  ul.menu li a{
    font-size: 0.76rem !important;
    letter-spacing: 0.04em !important;
  }
}

@media (max-width: 1100px){
  .menuwrapper .wrapper.sos-topbar{
    flex-direction: column;
    justify-content: center;
    padding: 8px 0;
  }

  .sos-topbar__member{
    margin-left: 0;
  }

  .sos-memberbar{
    flex-direction: column-reverse;
    gap: 8px;
    flex-wrap: wrap !important;
  }

  .sos-memberbar__links{
    justify-content: center;
    flex-wrap: wrap !important;
  }

  .sos-memberbar__welcome{
    text-align: center;
  }

  .sos-topbar__nav .menu{
    justify-content: center;
    flex-wrap: wrap !important;
  }
}

.menuwrapper .wrapper.sos-topbar{
  justify-content: flex-start !important;
  gap: 10px !important;
}

.sos-topbar__member{
  margin-left: 0 !important;
  flex: 0 0 auto !important;
}

.sos-topbar__nav{
  flex: 0 0 auto !important;
}

.sos-memberbar{
  gap: 10px !important;
}

.sos-memberbar__links{
  gap: 10px !important;
}

#logobanner {
  position: relative !important;
  min-height: 550px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  z-index: 1 !important;
  overflow: visible !important;
}

.floating-banner-wrapper {
  position: absolute;
  top: 2%;
  left: 2%;
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
  pointer-events: auto;
  z-index: 10;
  text-align: left;
  padding-left: 100px;
}

.floating-banner-wrapper.fade-out {
  opacity: 0;
  pointer-events: none;
}

.floating-banner {
  display: inline-block;
  pointer-events: none;
}

.banner-flex {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 60px;
  pointer-events: auto;
}

.hover-text {
  font-size: 55px;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  color: #787F87 !important;
  text-decoration: none !important;
  text-shadow: 3px 5px 10px #000;
  transition: all 0.3s ease-in-out;
}

.banner-flex:hover .hover-text {
  color: var(--sos-brass, #A37C54) !important;
  transform: scale(1.1);
  text-shadow: 0 0 25px rgba(112, 92, 75, 1), 0 0 35px rgba(112, 92, 75, 1);
  font-weight: 400;
}

.line {
  display: inline-block;
  height: 2px;
  width: 0;
  background-color: #787F87;
  transition: width 1s ease;
}

.banner-flex:hover .line {
  width: 120px;
}

.floating-banner-subtext {
  font-size: 30px;
  font-family: 'IM Fell English', serif;
  font-style: italic;
  font-weight: 400;
  color: #49535B;
  text-shadow: 3px 5px 5px #000, 0 0 10px #000;
  margin-top: -20px;
  pointer-events: none;
  padding-left: 250px;
}

.floating-banner-links {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 15px;
  opacity: 0;
  padding-left: 500px;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.floating-banner-wrapper.show-links .floating-banner-links {
  opacity: 1;
  pointer-events: auto;
}

.link-wrapper {
  position: relative;
  height: 30px;
}

.reveal-link {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateY(10px) scale(1);
  font-family: 'IM Fell English', serif;
  font-size: 40px;
  color: #787F87 !important;
  text-decoration: none !important;
  text-shadow: 0 0 10px rgba(0, 0, 0, 1);
  transition:
    opacity 0.3s ease,
    transform 0.5s ease-in-out,
    text-shadow 0.3s ease-in-out,
    color 0.3s ease-in-out;
  pointer-events: none;
}

.reveal-link:hover {
  color: var(--sos-brass, #A37C54) !important;
  transform: translateY(10px) scale(1.1);
  text-shadow: 0 0 45px rgba(237, 243, 232, 0.8);
  font-weight: 400;
}

.floating-banner-wrapper.show-links .link-wrapper:nth-child(1) .reveal-link {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
  pointer-events: auto;
}

.floating-banner-wrapper.show-links .link-wrapper:nth-child(2) .reveal-link {
  opacity: 1;
  transform: translate(60px, 20px);
  transition-delay: 0.2s;
  pointer-events: auto;
}

.floating-banner-wrapper.show-links .link-wrapper:nth-child(3) .reveal-link {
  opacity: 1;
  transform: translate(120px, 40px);
  transition-delay: 0.7s;
  pointer-events: auto;
}

.reveal-link::before,
.reveal-link::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 0;
  height: 2px;
  background-color: #a1aaaf;
  opacity: 0;
  transition: width 0.5s ease, opacity 0.3s ease;
}

.reveal-link::before {
  right: 100%;
  margin-right: 12px;
}

.reveal-link::after {
  left: 100%;
  margin-left: 12px;
}

.floating-banner-wrapper.show-links .link-wrapper:nth-child(1) .reveal-link::before,
.floating-banner-wrapper.show-links .link-wrapper:nth-child(1) .reveal-link::after {
  width: 100px;
  opacity: 0.6;
  transition-delay: 0.4s;
}

.floating-banner-wrapper.show-links .link-wrapper:nth-child(2) .reveal-link::before,
.floating-banner-wrapper.show-links .link-wrapper:nth-child(2) .reveal-link::after {
  width: 100px;
  opacity: 0.6;
  transition-delay: 0.6s;
}

.floating-banner-wrapper.show-links .link-wrapper:nth-child(3) .reveal-link::before,
.floating-banner-wrapper.show-links .link-wrapper:nth-child(3) .reveal-link::after {
  width: 100px;
  opacity: 0.6;
  transition-delay: 0.8s;
}

html:has(#custom-page-visual) .floating-banner-wrapper {
  display: none !important;
}

@media (max-width: 1100px) {
  .floating-banner-wrapper {
    left: 50%;
    top: 18%;
    transform: translateX(-50%);
    padding-left: 0;
    width: 90%;
    text-align: center;
  }

  .banner-flex {
    justify-content: center;
    gap: 20px;
  }

  .hover-text {
    font-size: clamp(2rem, 6vw, 3rem);
  }

  .floating-banner-subtext {
    padding-left: 0;
    margin-top: 8px;
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    text-align: center;
  }

  .floating-banner-links {
    padding-left: 0;
    align-items: center;
  }

  .link-wrapper {
    height: auto;
  }

  .reveal-link {
    position: relative;
    font-size: clamp(1.4rem, 4vw, 2rem);
  }

  .floating-banner-wrapper.show-links .link-wrapper:nth-child(1) .reveal-link,
  .floating-banner-wrapper.show-links .link-wrapper:nth-child(2) .reveal-link,
  .floating-banner-wrapper.show-links .link-wrapper:nth-child(3) .reveal-link {
    transform: none;
  }

  .reveal-link::before,
  .reveal-link::after {
    display: none;
  }
}

/* =========================================================
   WELCOME TABLE - missing row restore
   ========================================================= */

.welcome__content--character-year,
.welcome__content--otm {
  flex: 0 0 calc(50% - 5px);
  max-width: calc(50% - 5px);
}

/* CHARACTER OF THE YEAR */
.welcome__content--character-year {
  align-items: flex-start;
}

.welcome__character-year {
  width: 100%;
  background: var(--sos-deep);
  border: 1px solid var(--sos-border);
  border-radius: 5px;
  padding: 14px;
  box-sizing: border-box;
}

.character-year__body {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.character-year__image {
  flex: 0 0 150px;
  width: 150px;
  height: 200px;
}

.character-year__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(163,124,84,.56);
  border-radius: 100px 100px 0 0;
  background: var(--sos-deep);
}

.character-year__info {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.character-year__name {
  margin-bottom: 8px;
  padding: 8px 10px;
  background: var(--sos-panel-3);
  border: 1px solid var(--sos-border);
  border-radius: 5px;
  color: var(--sos-light);
  font-size: .95rem;
  line-height: 1.35;
}

.character-year__desc {
  padding: 10px 12px;
  background: var(--sos-deep);
  border: 1px solid var(--sos-border);
  border-radius: 5px;
  color: var(--sos-text);
  line-height: 1.6;
  text-align: justify;
  font-size: .88rem;
  flex: 1 1 auto;
  min-height: 148px;
}

/* OF THE MONTH */
.welcome__content--otm {
  justify-content: center;
  gap: 12px;
  align-content: flex-start;
}

.welcome__title--otm {
  width: 100%;
  margin-bottom: 6px;
  padding: 9px 10px 8px;
  background: var(--sos-deep);
  border: 1px solid var(--sos-border);
  border-radius: 5px;
  text-align: center;
  box-sizing: border-box;
}

.welcome__title--otm p {
  margin: 0;
  color: var(--sos-brass);
  font-family: var(--sos-font);
  font-size: 1.4rem;
  font-style: italic;
}

.hover-avatar--otm {
  width: 150px;
  height: 200px;
  flex: 0 0 150px;
}

.hover-avatar--otm img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* mobile */
@media (max-width: 1100px) {
  .welcome__row {
    flex-wrap: wrap;
  }

  .welcome__content--character-year,
  .welcome__content--otm {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

@media (max-width: 700px) {
  .character-year__body {
    flex-direction: column;
    align-items: center;
  }

  .character-year__image {
    width: 150px;
    height: 200px;
  }

  .character-year__info {
    width: 100%;
  }

  .welcome__content--otm {
    justify-content: center;
  }
}
/* taller OTM cards only */
.hover-avatar--otm {
  height: 240px;
}

.hover-avatar--otm img {
  height: 240px;
}

/* keep the hover zoom from shrinking awkwardly */
.hover-avatar--otm:hover img {
  height: 270px;
}


/*=================fad in forums====================*/

.fade-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease-out, transform 1.2s ease-out;
}

.fade-scroll.visible {
  opacity: 1;
  transform: translateY(0);
}

.welcome.fade-scroll {
  transform: none !important;
}

.welcome.fade-scroll.visible {
  transform: none !important;
}

/* wider footer search area */
.sos-footer__inner{
  grid-template-columns: minmax(0, 1fr) 520px !important;
}

.sos-footer__right{
  width: 520px !important;
  max-width: 520px !important;
  min-width: 520px !important;
}

.sos-footer__search .input-group{
  grid-template-columns: minmax(0, 1fr) 140px !important;
}

.sos-footer__search .form-control{
  width: 100% !important;
}

/* =========================================================
   USER CP - REAL MARKUP FIX
   targets the HTML you just showed me
   ========================================================= */

/* shell width / columns */
table.sos-ucp-shell {
  width: 100% !important;
  max-width: 1150px !important;
  margin: 0 auto !important;
  border-collapse: separate !important;
  border-spacing: 18px 0 !important;
  table-layout: fixed !important;
}

table.sos-ucp-shell > tbody > tr > td:first-child {
  width: 250px !important;
  vertical-align: top !important;
}

table.sos-ucp-shell > tbody > tr > td.sos-ucp-main {
  vertical-align: top !important;
}

.sos-ucp-main,
.sos-ucp-stack {
  position: relative;
  min-width: 0;
}

/* hide empty wrapper panels */
.sos-ucp-panel:empty {
  display: none !important;
}

/* =========================================================
   SUMMARY CARD
   ========================================================= */

.sos-ucp-summary {
  position: relative;
  overflow: hidden;
  background: rgba(9, 19, 23, 0.52) !important;
  border: 1px solid rgba(163,124,84,0.24) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.14), 0 10px 30px rgba(0,0,0,0.38) !important;
  margin: 0 0 18px 0 !important;
}

.sos-ucp-summary .thead {
  background: #2F3638 !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(163,124,84,0.40) !important;
}

.sos-ucp-summary .thead strong {
  color: #d4d6d6 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-weight: normal !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sos-ucp-summary .trow2.sos-ucp-summary-cell {
  position: relative;
  min-height: 440px;
  padding: 18px 18px 18px 286px !important;
  background: rgba(7, 19, 23, 0.58) !important;
  vertical-align: top !important;
}

/* the actual portrait in YOUR markup */
.sos-ucp-stack > img.rounded-circle {
  position: absolute !important;
  top: 58px !important;
  left: 18px !important;
  width: 250px !important;
  height: 400px !important;
  min-width: 250px !important;
  min-height: 400px !important;
  max-width: 250px !important;
  max-height: 400px !important;
  object-fit: cover !important;
  border-radius: 125px 125px 10px 10px !important;
  border: 2px solid rgba(163,124,84,0.56) !important;
  background: #091317 !important;
  box-shadow:
    0 0 0 1px rgba(163,124,84,0.16),
    0 12px 30px rgba(0,0,0,0.45) !important;
  z-index: 3 !important;
  margin: 0 !important;
}

/* summary inner layout */
.sos-ucp-summary-grid {
  display: grid !important;
  grid-template-columns: minmax(340px, 410px) minmax(0, 1fr) !important;
  gap: 22px !important;
  min-height: 400px !important;
  align-items: stretch !important;
}

.sos-ucp-summary-info {
  background: rgba(9,19,23,0.84) !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.sos-ucp-summary-side {
  background: rgba(9,19,23,0.20) !important;
  border-left: 1px solid rgba(163,124,84,0.14) !important;
  min-height: 100% !important;
}

/* summary typography */
.sos-ucp-summary .largetext,
.sos-ucp-summary .largetext a {
  display: block !important;
  margin-bottom: 14px !important;
  color: #A37C54 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-size: 2.2rem !important;
  line-height: 1.05 !important;
  font-style: italic !important;
  text-decoration: none !important;
}

.sos-ucp-summary-meta {
  color: #b8bcc2 !important;
  line-height: 1.85 !important;
}

.sos-ucp-summary-meta > div {
  margin-bottom: 2px !important;
}

.sos-ucp-summary-meta strong {
  color: #d4d6d6 !important;
}

.sos-ucp-summary-meta a {
  color: #d7c3a4 !important;
}

/* referral box */
.sos-ucp-summary-meta .alert.bg-white {
  margin-top: 16px !important;
  background: rgba(9,19,23,0.76) !important;
  color: #b8bcc2 !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  padding: 14px !important;
  box-shadow: none !important;
}

.sos-ucp-summary-meta .alert.bg-white br:first-child {
  display: none !important;
}

/* =========================================================
   THREADS PANEL
   ========================================================= */

.sos-ucp-panel--threads {
  background: rgba(7,19,23,0.56) !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.14), 0 10px 30px rgba(0,0,0,0.38) !important;
  padding: 18px !important;
  margin: 0 0 18px 0 !important;
}

/* title strip */
.sos-ucp-panel--threads .legend {
  margin: 0 0 12px 0 !important;
  padding: 14px 18px !important;
  background: rgba(47,54,56,0.92) !important;
  border: 1px solid rgba(163,124,84,0.36) !important;
}

.sos-ucp-panel--threads .legend,
.sos-ucp-panel--threads .legend * {
  color: #d4d6d6 !important;
  text-shadow: none !important;
}

.sos-ucp-panel--threads .btn.btn-multipage {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #d7c3a4 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-style: italic !important;
}

/* actual thread rows */
.sos-ucp-panel--threads .d-none.d-sm-none.d-md-none.d-lg-block.d-xl-block.d-xxl-block > .row,
.sos-ucp-panel--threads .row.ps-3.pt-3.pe-3.pb-3.border-bottom.m-0 {
  background: rgba(9,19,23,0.72) !important;
  border: 1px solid rgba(163,124,84,0.16) !important;
  border-radius: 4px !important;
  margin: 0 0 10px 0 !important;
  padding: 16px 18px !important;
}

/* remove harsh default divider */
.sos-ucp-panel--threads .border-bottom {
  border-bottom: 1px solid rgba(163,124,84,0.18) !important;
}

/* text colors */
.sos-ucp-panel--threads a {
  color: #d7c3a4 !important;
  text-decoration: none !important;
}

.sos-ucp-panel--threads .text-muted,
.sos-ucp-panel--threads span.text-muted {
  color: #97a0aa !important;
}

.sos-ucp-panel--threads .lastpostbit a {
  color: #e5d5bf !important;
}

.sos-ucp-panel--threads i.bi {
  color: #A37C54 !important;
  font-size: 1.4rem !important;
}

/* =========================================================
   NOTEPAD
   ========================================================= */

.sos-ucp-panel--notepad form > br {
  display: none !important;
}

.sos-ucp-panel--notepad .tborder {
  background: rgba(7,19,23,0.56) !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.14), 0 10px 30px rgba(0,0,0,0.38) !important;
}

.sos-ucp-panel--notepad .thead {
  background: #2F3638 !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(163,124,84,0.40) !important;
}

.sos-ucp-panel--notepad .thead strong {
  color: #d4d6d6 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-weight: normal !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sos-ucp-panel--notepad .trow1 {
  background: rgba(9,19,23,0.72) !important;
  padding: 18px !important;
}

textarea.usercp_notepad,
.sos-ucp-main textarea {
  width: 100% !important;
  min-height: 220px !important;
  background: rgba(9,19,23,0.84) !important;
  color: #d4d6d6 !important;
  border: 1px solid rgba(163,124,84,0.26) !important;
  padding: 14px !important;
  resize: vertical !important;
  box-sizing: border-box !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-size: 1.4rem !important;
  line-height: 1.6 !important;
}

.sos-ucp-panel--notepad div[align="center"] {
  text-align: left !important;
  margin-top: 12px !important;
}

.sos-ucp-main input.button,
.sos-ucp-main input[type="submit"] {
  background: #2F3638 !important;
  color: #f1dfc8 !important;
  border: 1px solid rgba(163,124,84,0.45) !important;
  border-radius: 3px !important;
  padding: 9px 14px !important;
  font-family: "IM Fell English", Georgia, serif !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.sos-ucp-main input.button:hover,
.sos-ucp-main input[type="submit"]:hover {
  background: #151f24 !important;
  border-color: rgba(163,124,84,0.58) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 1100px) {
  .sos-ucp-stack > img.rounded-circle {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    margin: 0 auto 18px auto !important;
  }

  .sos-ucp-summary .trow2.sos-ucp-summary-cell {
    padding: 18px !important;
    min-height: auto !important;
  }

  .sos-ucp-summary-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .sos-ucp-summary-side {
    min-height: 140px !important;
  }
}

@media screen and (max-width: 980px) {
  table.sos-ucp-shell,
  table.sos-ucp-shell > tbody,
  table.sos-ucp-shell > tbody > tr,
  table.sos-ucp-shell > tbody > tr > td {
    display: block !important;
    width: 100% !important;
  }

  table.sos-ucp-shell {
    border-spacing: 0 !important;
  }

  table.sos-ucp-shell > tbody > tr > td:first-child {
    margin-bottom: 18px !important;
  }
}

/* =========================================================
   USER CP MAIN PAGE LAYOUT FIX
   paste BELOW your current UCP css
   ========================================================= */

table.sos-ucp-shell {
  width: 100% !important;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 18px 0;
  table-layout: fixed;
  margin: 0 auto;
}

table.sos-ucp-shell > tbody > tr > td {
  vertical-align: top;
}

table.sos-ucp-shell > tbody > tr > td:first-child {
  width: 260px !important;
}

table.sos-ucp-shell > tbody > tr > td:last-child {
  width: auto !important;
}

.sos-ucp-stack {
  width: 100%;
}

.sos-ucp-stack > .tborder,
.sos-ucp-main > .tborder,
.sos-ucp-main table.tborder {
  width: 100% !important;
  margin: 0 0 18px 0 !important;
}

.sos-ucp-main br + .tborder,
.sos-ucp-main .tborder + br {
  display: none;
}

/* main cards */
.sos-ucp-main .tborder {
  background: #091317 !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.16), 0 10px 30px rgba(0,0,0,0.35);
}

.sos-ucp-main .thead {
  background: #2F3638 !important;
  color: #d4d6d6 !important;
  border-bottom: 1px solid rgba(163,124,84,0.45) !important;
  padding: 14px 18px !important;
}

.sos-ucp-main .thead strong,
.sos-ucp-main .thead a {
  color: #d4d6d6 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-weight: normal !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sos-ucp-main .trow1,
.sos-ucp-main .trow2 {
  background: #0f171b !important;
  color: #969ca5 !important;
  border-top: 1px solid rgba(163,124,84,0.10) !important;
  border-bottom: 1px solid rgba(163,124,84,0.10) !important;
  padding: 16px 18px !important;
}

.sos-ucp-main .tcat {
  background: #151f24 !important;
  color: #A37C54 !important;
  border-top: 1px solid rgba(163,124,84,0.22) !important;
  border-bottom: 1px solid rgba(163,124,84,0.22) !important;
  padding: 12px 18px !important;
}

.sos-ucp-main .tcat strong {
  color: #A37C54 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-weight: normal !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* account summary */
.sos-ucp-summary td {
  vertical-align: top;
}

.sos-ucp-summary .largetext,
.sos-ucp-summary .largetext a {
  display: block;
  margin-bottom: 10px;
  color: #A37C54 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-size: 2rem;
  line-height: 1.1;
  font-style: italic;
  text-decoration: none !important;
}

.sos-ucp-summary strong {
  color: #d4d6d6 !important;
}

/* avatar cell in summary */
.sos-ucp-summary td:first-child {
  width: 120px;
  padding: 18px !important;
}

.sos-ucp-summary td:first-child img {
  display: block;
  width: 90px !important;
  height: 90px !important;
  object-fit: cover;
  border-radius: 60px 60px 8px 8px;
  border: 2px solid rgba(163,124,84,0.45);
  background: #091317;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.16), 0 10px 30px rgba(0,0,0,0.35);
}

/* latest threads / subscribed / warnings tables */
.sos-ucp-main table {
  table-layout: fixed;
}

.sos-ucp-main .tborder td {
  word-wrap: break-word;
}

.sos-ucp-main .tborder .smalltext,
.sos-ucp-main .smalltext {
  color: #969ca5 !important;
}

/* notepad */
.sos-ucp-main textarea,
.sos-ucp-main textarea.usercp_notepad {
  width: 100% !important;
  min-height: 220px !important;
  resize: vertical;
  background: #091317 !important;
  color: #d4d6d6 !important;
  border: 1px solid rgba(163,124,84,0.28) !important;
  padding: 14px !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-size: 1.4rem !important;
  line-height: 1.6 !important;
  box-sizing: border-box;
}

/* normal-sized fields for later subpages too */
.sos-ucp-main input.textbox,
.sos-ucp-main select,
.sos-ucp-main input[type="text"],
.sos-ucp-main input[type="password"],
.sos-ucp-main input[type="email"] {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 40px;
  background: #091317 !important;
  color: #d4d6d6 !important;
  border: 1px solid rgba(163,124,84,0.28) !important;
  padding: 0 12px !important;
  box-sizing: border-box;
}

/* buttons */
.sos-ucp-main input.button,
.sos-ucp-main button,
.sos-ucp-main input[type="submit"] {
  background: #2F3638 !important;
  color: #f1dfc8 !important;
  border: 1px solid rgba(163,124,84,0.45) !important;
  border-radius: 3px;
  padding: 9px 14px !important;
  font-family: "IM Fell English", Georgia, serif !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: none !important;
}

.sos-ucp-main input.button:hover,
.sos-ucp-main button:hover,
.sos-ucp-main input[type="submit"]:hover {
  background: #151f24 !important;
  color: #f1dfc8 !important;
  border-color: rgba(163,124,84,0.60) !important;
}

/* keep the notepad button from floating off into the void */
.sos-ucp-main .tfoot,
.sos-ucp-main .tfoot td {
  text-align: left !important;
  padding: 14px 18px !important;
}

/* mobile stack */
@media screen and (max-width: 980px) {
  table.sos-ucp-shell,
  table.sos-ucp-shell > tbody,
  table.sos-ucp-shell > tbody > tr,
  table.sos-ucp-shell > tbody > tr > td {
    display: block;
    width: 100% !important;
  }

  table.sos-ucp-shell {
    border-spacing: 0;
  }

  table.sos-ucp-shell > tbody > tr > td:first-child {
    margin-bottom: 18px;
  }

  .usercp_nav,
  table.usercp_nav {
    width: 100% !important;
  }
}

/* =========================================================
   USER CP - LAYOUT REWORK / HERO SUMMARY
   paste BELOW your current UCP css
   ========================================================= */

/* overall shell */
table.sos-ucp-shell {
  width: 100% !important;
  max-width: 1150px !important;
  border-collapse: separate;
  border-spacing: 18px 0;
  table-layout: fixed;
  margin: 0 auto;
}

table.sos-ucp-shell > tbody > tr > td {
  vertical-align: top;
}

table.sos-ucp-shell > tbody > tr > td:first-child {
  width: 270px !important;
}

table.sos-ucp-shell > tbody > tr > td:last-child {
  width: auto !important;
}

.sos-ucp-stack {
  width: 100%;
}

.sos-ucp-main > .tborder,
.sos-ucp-main table.tborder,
.sos-ucp-stack > .tborder {
  width: 100% !important;
  margin: 0 0 18px 0 !important;
}

/* =========================================================
   ACCOUNT SUMMARY CARD
   ========================================================= */

.sos-ucp-summary {
  margin-top: 0 !important;
  background: rgba(9,19,23,0.55) !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.16), 0 10px 30px rgba(0,0,0,0.35);
  overflow: hidden;
}

.sos-ucp-summary .thead {
  background: #2F3638 !important;
  color: #d4d6d6 !important;
  border-bottom: 1px solid rgba(163,124,84,0.45) !important;
  padding: 14px 18px !important;
}

.sos-ucp-summary .thead strong {
  color: #d4d6d6 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-weight: normal !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* make summary body sit like a clean horizontal layout */
.sos-ucp-summary .sos-ucp-summary-row {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.sos-ucp-summary .sos-ucp-summary-row > td {
  display: block;
  box-sizing: border-box;
}

/* avatar column */
.sos-ucp-summary .sos-ucp-summary-row > td:first-child {
  flex: 0 0 280px;
  width: 280px !important;
  background: rgba(9,19,23,0.72) !important;
  padding: 18px !important;
  vertical-align: top !important;
  border-right: 1px solid rgba(163,124,84,0.16);
}

/* avatar itself */
.sos-ucp-summary .sos-ucp-summary-row > td:first-child img {
  display: block;
  width: 250px !important;
  height: 400px !important;
  min-width: 250px !important;
  min-height: 400px !important;
  max-width: 250px !important;
  max-height: 400px !important;
  object-fit: cover;
  border-radius: 125px 125px 10px 10px;
  border: 2px solid rgba(163,124,84,0.55);
  background: #091317;
  box-shadow:
    0 0 0 1px rgba(163,124,84,0.16),
    0 10px 30px rgba(0,0,0,0.45);
  margin: 0 auto;
}

/* info side of summary */
.sos-ucp-summary-cell {
  flex: 1 1 auto;
  width: auto !important;
  padding: 18px !important;
  background: rgba(9,19,23,0.58) !important;
}

.sos-ucp-summary-grid {
  display: grid;
  grid-template-columns: 410px minmax(0, 1fr);
  gap: 22px;
  min-height: 400px;
  align-items: stretch;
}

/* green-box equivalent */
.sos-ucp-summary-info {
  background: rgba(9,19,23,0.82);
  border: 1px solid rgba(163,124,84,0.22);
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* right empty/open side */
.sos-ucp-summary-side {
  background: rgba(9,19,23,0.20);
  border-left: 1px solid rgba(163,124,84,0.16);
  min-height: 100%;
}

/* text styling */
.sos-ucp-summary .largetext,
.sos-ucp-summary .largetext a {
  display: block;
  margin-bottom: 14px;
  color: #A37C54 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-size: 2.2rem;
  line-height: 1.05;
  font-style: italic;
  text-decoration: none !important;
}

.sos-ucp-summary-meta {
  color: #b8bcc2;
  line-height: 1.8;
}

.sos-ucp-summary-meta > div {
  margin-bottom: 2px;
}

.sos-ucp-summary-meta strong {
  color: #d4d6d6 !important;
}

/* referral box */
.sos-ucp-summary-meta .smalltext,
.sos-ucp-summary-meta .trow1,
.sos-ucp-summary-meta .trow2,
.sos-ucp-summary-meta div[style],
.sos-ucp-summary-meta blockquote {
  background: rgba(9,19,23,0.72) !important;
}

/* =========================================================
   GENERAL PANEL LOOK
   ========================================================= */

.sos-ucp-panel .tborder {
  background: rgba(9,19,23,0.45) !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.16), 0 10px 30px rgba(0,0,0,0.35);
  overflow: hidden;
}

.sos-ucp-panel .thead {
  background: rgba(47,54,56,0.92) !important;
  border-bottom: 1px solid rgba(163,124,84,0.35) !important;
}

.sos-ucp-panel .thead strong,
.sos-ucp-panel .thead a {
  color: #d4d6d6 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-weight: normal !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sos-ucp-panel .trow1,
.sos-ucp-panel .trow2 {
  background: rgba(9,19,23,0.62) !important;
  color: #b8bcc2 !important;
  border-top: 1px solid rgba(163,124,84,0.08) !important;
  border-bottom: 1px solid rgba(163,124,84,0.08) !important;
  padding: 16px 18px !important;
}

/* =========================================================
   RECENT THREADS - easier to read
   ========================================================= */

.sos-ucp-panel--threads .tborder {
  background: rgba(7,19,23,0.60) !important;
}

.sos-ucp-panel--threads .trow1,
.sos-ucp-panel--threads .trow2 {
  background: rgba(7,19,23,0.68) !important;
}

.sos-ucp-panel--threads table {
  background: transparent !important;
}

.sos-ucp-panel--threads .trow1 a,
.sos-ucp-panel--threads .trow2 a {
  color: #d8c3a5 !important;
}

.sos-ucp-panel--threads .trow1,
.sos-ucp-panel--threads .trow2,
.sos-ucp-panel--threads td {
  text-shadow: 0 0 4px rgba(0,0,0,0.75);
}

/* =========================================================
   NOTEPAD / FORM FIXES
   ========================================================= */

.sos-ucp-main textarea,
.sos-ucp-main textarea.usercp_notepad {
  width: 100% !important;
  min-height: 220px !important;
  resize: vertical;
  background: rgba(9,19,23,0.82) !important;
  color: #d4d6d6 !important;
  border: 1px solid rgba(163,124,84,0.28) !important;
  padding: 14px !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-size: 1.4rem !important;
  line-height: 1.6 !important;
  box-sizing: border-box;
}

.sos-ucp-main input.textbox,
.sos-ucp-main select,
.sos-ucp-main input[type="text"],
.sos-ucp-main input[type="password"],
.sos-ucp-main input[type="email"] {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 40px;
  background: rgba(9,19,23,0.82) !important;
  color: #d4d6d6 !important;
  border: 1px solid rgba(163,124,84,0.28) !important;
  padding: 0 12px !important;
  box-sizing: border-box;
}

.sos-ucp-main input.button,
.sos-ucp-main button,
.sos-ucp-main input[type="submit"] {
  background: #2F3638 !important;
  color: #f1dfc8 !important;
  border: 1px solid rgba(163,124,84,0.45) !important;
  border-radius: 3px;
  padding: 9px 14px !important;
  font-family: "IM Fell English", Georgia, serif !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.sos-ucp-main input.button:hover,
.sos-ucp-main button:hover,
.sos-ucp-main input[type="submit"]:hover {
  background: #151f24 !important;
  color: #f1dfc8 !important;
  border-color: rgba(163,124,84,0.60) !important;
}

/* keep buttons aligned better */
.sos-ucp-main .tfoot,
.sos-ucp-main .tfoot td {
  text-align: left !important;
  padding: 14px 18px !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media screen and (max-width: 1100px) {
  .sos-ucp-summary .sos-ucp-summary-row {
    display: block;
  }

  .sos-ucp-summary .sos-ucp-summary-row > td:first-child,
  .sos-ucp-summary-cell {
    width: 100% !important;
    flex: none;
  }

  .sos-ucp-summary-grid {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .sos-ucp-summary-side {
    min-height: 140px;
  }
}

@media screen and (max-width: 980px) {
  table.sos-ucp-shell,
  table.sos-ucp-shell > tbody,
  table.sos-ucp-shell > tbody > tr,
  table.sos-ucp-shell > tbody > tr > td {
    display: block;
    width: 100% !important;
  }

  table.sos-ucp-shell {
    border-spacing: 0;
  }

  table.sos-ucp-shell > tbody > tr > td:first-child {
    margin-bottom: 18px;
  }

  .usercp_nav,
  table.usercp_nav {
    width: 100% !important;
  }
}

/* =========================================================
   USER CP - REAL MARKUP FIX
   targets the HTML you just showed me
   ========================================================= */

/* shell width / columns */
table.sos-ucp-shell {
  width: 100% !important;
  max-width: 1150px !important;
  margin: 0 auto !important;
  border-collapse: separate !important;
  border-spacing: 18px 0 !important;
  table-layout: fixed !important;
}

table.sos-ucp-shell > tbody > tr > td:first-child {
  width: 250px !important;
  vertical-align: top !important;
}

table.sos-ucp-shell > tbody > tr > td.sos-ucp-main {
  vertical-align: top !important;
}

.sos-ucp-main,
.sos-ucp-stack {
  position: relative;
  min-width: 0;
}

/* hide empty wrapper panels */
.sos-ucp-panel:empty {
  display: none !important;
}

/* =========================================================
   SUMMARY CARD
   ========================================================= */

.sos-ucp-summary {
  position: relative;
  overflow: hidden;
  background: rgba(9, 19, 23, 0.52) !important;
  border: 1px solid rgba(163,124,84,0.24) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.14), 0 10px 30px rgba(0,0,0,0.38) !important;
  margin: 0 0 18px 0 !important;
}

.sos-ucp-summary .thead {
  background: #2F3638 !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(163,124,84,0.40) !important;
}

.sos-ucp-summary .thead strong {
  color: #d4d6d6 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-weight: normal !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sos-ucp-summary .trow2.sos-ucp-summary-cell {
  position: relative;
  min-height: 440px;
  padding: 18px 18px 18px 286px !important;
  background: rgba(7, 19, 23, 0.58) !important;
  vertical-align: top !important;
}

/* the actual portrait in YOUR markup */
.sos-ucp-stack > img.rounded-circle {
  position: absolute !important;
  top: 58px !important;
  left: 18px !important;
  width: 250px !important;
  height: 400px !important;
  min-width: 250px !important;
  min-height: 400px !important;
  max-width: 250px !important;
  max-height: 400px !important;
  object-fit: cover !important;
  border-radius: 125px 125px 10px 10px !important;
  border: 2px solid rgba(163,124,84,0.56) !important;
  background: #091317 !important;
  box-shadow:
    0 0 0 1px rgba(163,124,84,0.16),
    0 12px 30px rgba(0,0,0,0.45) !important;
  z-index: 3 !important;
  margin: 0 !important;
}

/* summary inner layout */
.sos-ucp-summary-grid {
  display: grid !important;
  grid-template-columns: minmax(340px, 410px) minmax(0, 1fr) !important;
  gap: 22px !important;
  min-height: 400px !important;
  align-items: stretch !important;
}

.sos-ucp-summary-info {
  background: rgba(9,19,23,0.84) !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

.sos-ucp-summary-side {
  background: rgba(9,19,23,0.20) !important;
  border-left: 1px solid rgba(163,124,84,0.14) !important;
  min-height: 100% !important;
}

/* summary typography */
.sos-ucp-summary .largetext,
.sos-ucp-summary .largetext a {
  display: block !important;
  margin-bottom: 14px !important;
  color: #A37C54 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-size: 2.2rem !important;
  line-height: 1.05 !important;
  font-style: italic !important;
  text-decoration: none !important;
}

.sos-ucp-summary-meta {
  color: #b8bcc2 !important;
  line-height: 1.85 !important;
}

.sos-ucp-summary-meta > div {
  margin-bottom: 2px !important;
}

.sos-ucp-summary-meta strong {
  color: #d4d6d6 !important;
}

.sos-ucp-summary-meta a {
  color: #d7c3a4 !important;
}

/* referral box */
.sos-ucp-summary-meta .alert.bg-white {
  margin-top: 16px !important;
  background: rgba(9,19,23,0.76) !important;
  color: #b8bcc2 !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  padding: 14px !important;
  box-shadow: none !important;
}

.sos-ucp-summary-meta .alert.bg-white br:first-child {
  display: none !important;
}

/* =========================================================
   THREADS PANEL
   ========================================================= */

.sos-ucp-panel--threads {
  background: rgba(7,19,23,0.56) !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.14), 0 10px 30px rgba(0,0,0,0.38) !important;
  padding: 18px !important;
  margin: 0 0 18px 0 !important;
}

/* title strip */
.sos-ucp-panel--threads .legend {
  margin: 0 0 12px 0 !important;
  padding: 14px 18px !important;
  background: rgba(47,54,56,0.92) !important;
  border: 1px solid rgba(163,124,84,0.36) !important;
}

.sos-ucp-panel--threads .legend,
.sos-ucp-panel--threads .legend * {
  color: #d4d6d6 !important;
  text-shadow: none !important;
}

.sos-ucp-panel--threads .btn.btn-multipage {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  color: #d7c3a4 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-style: italic !important;
}

/* actual thread rows */
.sos-ucp-panel--threads .d-none.d-sm-none.d-md-none.d-lg-block.d-xl-block.d-xxl-block > .row,
.sos-ucp-panel--threads .row.ps-3.pt-3.pe-3.pb-3.border-bottom.m-0 {
  background: rgba(9,19,23,0.72) !important;
  border: 1px solid rgba(163,124,84,0.16) !important;
  border-radius: 4px !important;
  margin: 0 0 10px 0 !important;
  padding: 16px 18px !important;
}

/* remove harsh default divider */
.sos-ucp-panel--threads .border-bottom {
  border-bottom: 1px solid rgba(163,124,84,0.18) !important;
}

/* text colors */
.sos-ucp-panel--threads a {
  color: #d7c3a4 !important;
  text-decoration: none !important;
}

.sos-ucp-panel--threads .text-muted,
.sos-ucp-panel--threads span.text-muted {
  color: #97a0aa !important;
}

.sos-ucp-panel--threads .lastpostbit a {
  color: #e5d5bf !important;
}

.sos-ucp-panel--threads i.bi {
  color: #A37C54 !important;
  font-size: 1.4rem !important;
}

/* =========================================================
   NOTEPAD
   ========================================================= */

.sos-ucp-panel--notepad form > br {
  display: none !important;
}

.sos-ucp-panel--notepad .tborder {
  background: rgba(7,19,23,0.56) !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.14), 0 10px 30px rgba(0,0,0,0.38) !important;
}

.sos-ucp-panel--notepad .thead {
  background: #2F3638 !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid rgba(163,124,84,0.40) !important;
}

.sos-ucp-panel--notepad .thead strong {
  color: #d4d6d6 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-weight: normal !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sos-ucp-panel--notepad .trow1 {
  background: rgba(9,19,23,0.72) !important;
  padding: 18px !important;
}

textarea.usercp_notepad,
.sos-ucp-main textarea {
  width: 100% !important;
  min-height: 220px !important;
  background: rgba(9,19,23,0.84) !important;
  color: #d4d6d6 !important;
  border: 1px solid rgba(163,124,84,0.26) !important;
  padding: 14px !important;
  resize: vertical !important;
  box-sizing: border-box !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-size: 1.4rem !important;
  line-height: 1.6 !important;
}

.sos-ucp-panel--notepad div[align="center"] {
  text-align: left !important;
  margin-top: 12px !important;
}

.sos-ucp-main input.button,
.sos-ucp-main input[type="submit"] {
  background: #2F3638 !important;
  color: #f1dfc8 !important;
  border: 1px solid rgba(163,124,84,0.45) !important;
  border-radius: 3px !important;
  padding: 9px 14px !important;
  font-family: "IM Fell English", Georgia, serif !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
}

.sos-ucp-main input.button:hover,
.sos-ucp-main input[type="submit"]:hover {
  background: #151f24 !important;
  border-color: rgba(163,124,84,0.58) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 1100px) {
  .sos-ucp-stack > img.rounded-circle {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: block !important;
    margin: 0 auto 18px auto !important;
  }

  .sos-ucp-summary .trow2.sos-ucp-summary-cell {
    padding: 18px !important;
    min-height: auto !important;
  }

  .sos-ucp-summary-grid {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }

  .sos-ucp-summary-side {
    min-height: 140px !important;
  }
}

@media screen and (max-width: 980px) {
  table.sos-ucp-shell,
  table.sos-ucp-shell > tbody,
  table.sos-ucp-shell > tbody > tr,
  table.sos-ucp-shell > tbody > tr > td {
    display: block !important;
    width: 100% !important;
  }

  table.sos-ucp-shell {
    border-spacing: 0 !important;
  }

  table.sos-ucp-shell > tbody > tr > td:first-child {
    margin-bottom: 18px !important;
  }
}

/* =========================================================
   USER CP FINAL STABLE LAYOUT
   Sidebar left, 250x400 avatar, info beside it, panels below
   Desktop-preserving. No mobile stacking.
========================================================= */

/* Main User CP shell */
table.sos-ucp-shell {
  width: 1100px !important;
  min-width: 1100px !important;
  max-width: 1100px !important;
  margin: 0 auto 30px auto !important;
  border-collapse: separate !important;
  border-spacing: 18px 0 !important;
  table-layout: fixed !important;
  background: transparent !important;
}

/* User CP nav cell, assuming {$usercpnav} already outputs the first td */
table.sos-ucp-shell > tbody > tr > td:first-child {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  vertical-align: top !important;
}

/* Main content cell */
table.sos-ucp-shell > tbody > tr > td.sos-ucp-main,
table.sos-ucp-shell > tbody > tr > td:last-child {
  width: 832px !important;
  min-width: 0 !important;
  vertical-align: top !important;
}

/* Keep the nav contained */
table.sos-ucp-shell > tbody > tr > td:first-child table,
table.sos-ucp-shell > tbody > tr > td:first-child .tborder,
table.sos-ucp-shell > tbody > tr > td:first-child .usercp_nav {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  margin: 0 !important;
}

/* Nav buttons */
table.sos-ucp-shell > tbody > tr > td:first-child a,
table.sos-ucp-shell > tbody > tr > td:first-child .usercp_nav_item {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 5px 0 !important;
  padding: 8px 10px !important;
  background: #151f24 !important;
  border: 1px solid rgba(163,124,84,0.28) !important;
  color: #d4d6d6 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-size: 0.82rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.05em !important;
  text-align: center !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

table.sos-ucp-shell > tbody > tr > td:first-child a:hover,
table.sos-ucp-shell > tbody > tr > td:first-child .usercp_nav_item:hover,
table.sos-ucp-shell > tbody > tr > td:first-child .usercp_nav_current {
  background: #2F3638 !important;
  color: #f1dfc8 !important;
  border-color: rgba(163,124,84,0.55) !important;
}

/* Main stack */
.sos-ucp-main,
.sos-ucp-stack {
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* Undo earlier floating/absolute avatar experiments */
.sos-ucp-stack > img.rounded-circle {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  max-height: none !important;
  margin: 0 !important;
}

/* Account summary card */
.sos-ucp-summary {
  width: 100% !important;
  margin: 0 0 18px 0 !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: rgba(9,19,23,0.68) !important;
  border: 1px solid rgba(163,124,84,0.28) !important;
  box-shadow:
    0 0 0 1px rgba(163,124,84,0.14),
    0 10px 30px rgba(0,0,0,0.35) !important;
  overflow: hidden !important;
}

.sos-ucp-summary .thead {
  background: #2F3638 !important;
  color: #d4d6d6 !important;
  border-bottom: 1px solid rgba(163,124,84,0.45) !important;
  padding: 14px 18px !important;
}

.sos-ucp-summary .thead strong {
  color: #d4d6d6 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-weight: normal !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* Summary row must stay horizontal */
.sos-ucp-summary-row {
  display: table-row !important;
}

/* Avatar cell */
.sos-ucp-summary-row > td:first-child {
  width: 286px !important;
  min-width: 286px !important;
  max-width: 286px !important;
  padding: 18px !important;
  vertical-align: top !important;
  background: rgba(7,19,23,0.72) !important;
  border-right: 1px solid rgba(163,124,84,0.18) !important;
  box-sizing: border-box !important;
}

/* Avatar image, locked to 250x400 */
.sos-ucp-summary-row > td:first-child img,
.sos-ucp-summary-row > td:first-child .avatar img,
.sos-ucp-summary-row > td:first-child .avatar-wrapper img,
.sos-ucp-summary-row > td:first-child .rounded-circle {
  display: block !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 400px !important;
  min-height: 400px !important;
  max-height: 400px !important;
  object-fit: cover !important;
  object-position: center top !important;
  margin: 0 auto !important;
  border-radius: 125px 125px 8px 8px !important;
  border: 2px solid rgba(163,124,84,0.56) !important;
  background: #091317 !important;
  box-shadow:
    0 0 0 1px rgba(163,124,84,0.16),
    0 12px 30px rgba(0,0,0,0.45) !important;
}

/* Info cell */
.sos-ucp-summary-cell {
  width: auto !important;
  padding: 18px !important;
  vertical-align: top !important;
  background: rgba(7,19,23,0.58) !important;
  box-sizing: border-box !important;
}

/* Info beside avatar, with optional empty breathing space */
.sos-ucp-summary-grid {
  display: grid !important;
  grid-template-columns: minmax(360px, 430px) minmax(0, 1fr) !important;
  gap: 18px !important;
  min-height: 400px !important;
  align-items: stretch !important;
}

.sos-ucp-summary-info {
  background: rgba(9,19,23,0.86) !important;
  border: 1px solid rgba(163,124,84,0.24) !important;
  padding: 22px !important;
  box-sizing: border-box !important;
  display: block !important;
}

.sos-ucp-summary-side {
  display: block !important;
  min-height: 100% !important;
  background: rgba(9,19,23,0.18) !important;
  border-left: 1px solid rgba(163,124,84,0.14) !important;
}

/* Summary text */
.sos-ucp-summary .largetext,
.sos-ucp-summary .largetext a {
  display: block !important;
  margin: 0 0 18px 0 !important;
  color: #d4d6d6 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-size: 2.35rem !important;
  line-height: 1.05 !important;
  font-style: italic !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  text-shadow: 0 0 8px rgba(255,255,255,0.35) !important;
}

.sos-ucp-summary-meta {
  color: #b8bcc2 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-size: 1.05rem !important;
  line-height: 1.85 !important;
  letter-spacing: 0.03em !important;
}

.sos-ucp-summary-meta > div {
  margin-bottom: 3px !important;
}

.sos-ucp-summary-meta strong {
  color: #d4d6d6 !important;
}

.sos-ucp-summary-meta a {
  color: #d8c0a6 !important;
}

.sos-ucp-summary-meta a:hover {
  color: #f1dfc8 !important;
}

/* Referral box */
.sos-ucp-summary-meta .alert,
.sos-ucp-summary-meta .bg-white,
.sos-ucp-summary-meta div[style] {
  background: rgba(9,19,23,0.76) !important;
  color: #b8bcc2 !important;
  border: 1px solid rgba(163,124,84,0.24) !important;
  box-shadow: none !important;
}

/* Panels below account summary */
.sos-ucp-panel {
  width: 100% !important;
  margin: 0 0 18px 0 !important;
}

.sos-ucp-panel:empty {
  display: none !important;
}

.sos-ucp-panel .tborder,
.sos-ucp-main .tborder {
  width: 100% !important;
  margin: 0 0 18px 0 !important;
  background: rgba(9,19,23,0.64) !important;
  border: 1px solid rgba(163,124,84,0.24) !important;
  box-shadow:
    0 0 0 1px rgba(163,124,84,0.14),
    0 10px 30px rgba(0,0,0,0.35) !important;
}

.sos-ucp-panel .thead,
.sos-ucp-main .thead {
  background: #2F3638 !important;
  color: #d4d6d6 !important;
  border-bottom: 1px solid rgba(163,124,84,0.45) !important;
}

.sos-ucp-panel .trow1,
.sos-ucp-panel .trow2,
.sos-ucp-main .trow1,
.sos-ucp-main .trow2 {
  background: rgba(9,19,23,0.76) !important;
  color: #b8bcc2 !important;
  border-color: rgba(163,124,84,0.14) !important;
}

/* Notepad */
.sos-ucp-main textarea,
.sos-ucp-main textarea.usercp_notepad {
  width: 100% !important;
  min-height: 220px !important;
  resize: vertical !important;
  background: rgba(9,19,23,0.86) !important;
  color: #d4d6d6 !important;
  border: 1px solid rgba(163,124,84,0.30) !important;
  padding: 14px !important;
  box-sizing: border-box !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-size: 1.15rem !important;
  line-height: 1.6 !important;
}

/* Buttons inside UCP */
.sos-ucp-main input.button,
.sos-ucp-main button,
.sos-ucp-main input[type="submit"] {
  background: #2F3638 !important;
  color: #f1dfc8 !important;
  border: 1px solid rgba(163,124,84,0.45) !important;
  border-radius: 3px !important;
  padding: 9px 14px !important;
  font-family: "IM Fell English", Georgia, serif !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
}

.sos-ucp-main input.button:hover,
.sos-ucp-main button:hover,
.sos-ucp-main input[type="submit"]:hover {
  background: #151f24 !important;
  color: #fff5ea !important;
  border-color: rgba(163,124,84,0.62) !important;
}

/* =========================================================
   USER CP AVATAR / SUMMARY FINAL FIX
   ========================================================= */

/* overall shell */
table.sos-ucp-shell {
  width: 1100px !important;
  min-width: 1100px !important;
  max-width: 1100px !important;
  margin: 0 auto 30px auto !important;
  border-collapse: separate !important;
  border-spacing: 18px 0 !important;
  table-layout: fixed !important;
}

/* left nav */
table.sos-ucp-shell > tbody > tr > td:first-child {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  vertical-align: top !important;
}

/* main area */
table.sos-ucp-shell > tbody > tr > td.sos-ucp-main {
  width: 832px !important;
  vertical-align: top !important;
}

.sos-ucp-stack,
.sos-ucp-main {
  width: 100% !important;
  min-width: 0 !important;
}

/* summary card */
.sos-ucp-summary {
  width: 100% !important;
  margin: 0 0 18px 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
  background: rgba(9,19,23,0.62) !important;
  border: 1px solid rgba(163,124,84,0.24) !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.14), 0 10px 30px rgba(0,0,0,0.35) !important;
  overflow: hidden !important;
}

.sos-ucp-summary .thead {
  background: #2F3638 !important;
  color: #d4d6d6 !important;
  border-bottom: 1px solid rgba(163,124,84,0.42) !important;
  padding: 14px 18px !important;
}

.sos-ucp-summary .thead strong {
  color: #d4d6d6 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-weight: normal !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

/* keep the row behaving like a row */
.sos-ucp-summary-row > td {
  display: table-cell !important;
  vertical-align: top !important;
}

/* avatar column */
.sos-ucp-avatarcell {
  width: 286px !important;
  min-width: 286px !important;
  max-width: 286px !important;
  padding: 18px !important;
  background: rgba(7,19,23,0.72) !important;
  border-right: 1px solid rgba(163,124,84,0.16) !important;
  box-sizing: border-box !important;
}

/* kill the tiny square behavior */
.sos-ucp-avatarcell img,
.sos-ucp-avatarcell .rounded-circle,
.sos-ucp-avatarcell .avatar img,
.sos-ucp-avatarcell .avatar-image img {
  display: block !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 400px !important;
  min-height: 400px !important;
  max-height: 400px !important;
  object-fit: cover !important;
  object-position: center top !important;
  margin: 0 auto !important;
  border-radius: 125px 125px 0 0 !important;
  border: 2px solid rgba(163,124,84,0.56) !important;
  background: #091317 !important;
  box-shadow: 0 0 0 1px rgba(163,124,84,0.16), 0 12px 30px rgba(0,0,0,0.45) !important;
}

/* info column */
.sos-ucp-summary-cell {
  padding: 18px !important;
  background: rgba(7,19,23,0.58) !important;
  box-sizing: border-box !important;
}

.sos-ucp-summary-grid {
  display: grid !important;
  grid-template-columns: 380px minmax(0, 1fr) !important;
  gap: 18px !important;
  min-height: 400px !important;
  align-items: stretch !important;
}

.sos-ucp-summary-info {
  background: rgba(9,19,23,0.84) !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  padding: 18px !important;
  box-sizing: border-box !important;
}

.sos-ucp-summary-side {
  background: rgba(9,19,23,0.18) !important;
  border-left: 1px solid rgba(163,124,84,0.14) !important;
  min-height: 100% !important;
}

.sos-ucp-summary .largetext,
.sos-ucp-summary .largetext a {
  display: block !important;
  margin: 0 0 14px 0 !important;
  color: #d4d6d6 !important;
  font-family: "IM Fell English", Georgia, serif !important;
  font-size: 2.2rem !important;
  line-height: 1.05 !important;
  font-style: italic !important;
  text-decoration: none !important;
  text-shadow: 0 0 8px rgba(255,255,255,0.35) !important;
}

.sos-ucp-summary-meta {
  color: #b8bcc2 !important;
  line-height: 1.8 !important;
}

.sos-ucp-summary-meta strong {
  color: #d4d6d6 !important;
}

.sos-ucp-summary-meta a {
  color: #d8c0a6 !important;
}

/* make recent threads a little translucent */
.sos-ucp-panel--threads,
.sos-ucp-panel--threads .tborder {
  background: rgba(9,19,23,0.52) !important;
}

.sos-ucp-panel--threads .trow1,
.sos-ucp-panel--threads .trow2 {
  background: rgba(9,19,23,0.66) !important;
}

.sos-ucp-panel--threads .thead {
  background: rgba(47,54,56,0.92) !important;
}

/* =========================================================
   USER CP - FIX AVATAR CELL + INFO PUSH
   This overrides the earlier fake-position padding.
========================================================= */

/* stop old padding rule from shoving the info off-screen */
.sos-ucp-summary .trow2.sos-ucp-summary-cell {
  position: static !important;
  padding: 18px !important;
  min-height: 400px !important;
  background: rgba(7,19,23,0.42) !important;
}

/* avatar cell should be a clean slot, not a framed container */
.sos-ucp-avatarcell {
  width: 286px !important;
  min-width: 286px !important;
  max-width: 286px !important;
  padding: 18px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* keep only the avatar itself windowed */
.sos-ucp-avatarcell img,
.sos-ucp-avatarcell .rounded-circle,
.sos-ucp-avatarcell .avatar img,
.sos-ucp-avatarcell .avatar-image img {
  display: block !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 400px !important;
  min-height: 400px !important;
  max-height: 400px !important;
  object-fit: cover !important;
  object-position: center top !important;
  margin: 0 auto !important;
  border-radius: 125px 125px 0 0 !important;
  border: 2px solid rgba(163,124,84,0.56) !important;
  background: #091317 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45) !important;
}

/* make the info sit directly beside the avatar */
.sos-ucp-summary-grid {
  display: block !important;
  min-height: 400px !important;
}

/* size the info box nicely instead of letting it wander */
.sos-ucp-summary-info {
  width: 380px !important;
  max-width: 380px !important;
  min-height: 400px !important;
  margin: 0 !important;
  background: rgba(9,19,23,0.78) !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  padding: 18px !important;
  box-sizing: border-box !important;
}

/* hide the empty breathing-space column for now */
.sos-ucp-summary-side {
  display: none !important;
}

/* =========================================================
   USER CP - NUDGE AVATAR LEFT / EXPAND INFO / KILL CENTER LINE
========================================================= */

/* make avatar column narrower so info gets more room */
.sos-ucp-summary-row > td.sos-ucp-avatarcell,
.sos-ucp-avatarcell {
  width: 260px !important;
  min-width: 260px !important;
  max-width: 260px !important;
  padding: 18px 10px 18px 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

/* nudge avatar left inside its cell */
.sos-ucp-avatarcell img,
.sos-ucp-avatarcell .rounded-circle,
.sos-ucp-avatarcell .avatar img,
.sos-ucp-avatarcell .avatar-image img {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* remove rogue center divider/borders from old rules */
.sos-ucp-summary-row > td,
.sos-ucp-summary-row > td:first-child,
.sos-ucp-summary-cell,
.sos-ucp-summary-side {
  border-left: 0 !important;
  border-right: 0 !important;
}

/* let the info cell take the space the avatar gave up */
.sos-ucp-summary-cell {
  padding: 18px 18px 18px 8px !important;
}

/* stretch the info box to fill the remaining width */
.sos-ucp-summary-info {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 400px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* keep the empty side hidden */
.sos-ucp-summary-side {
  display: none !important;
}

/* =========================================================
   USER CP - FLOATING AVATAR, NO CELL BOX
========================================================= */

/* make the avatar cell itself visually disappear */
.sos-ucp-summary .sos-ucp-summary-row > td.sos-ucp-avatarcell,
.sos-ucp-summary-row > td.sos-ucp-avatarcell,
td.sos-ucp-avatarcell {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  padding: 14px 0 14px 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* kill any wrapper/card effect inside the avatar cell */
.sos-ucp-avatarcell *,
.sos-ucp-avatarcell .avatar,
.sos-ucp-avatarcell .avatar-wrapper,
.sos-ucp-avatarcell .rounded-circle,
.sos-ucp-avatarcell div {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* move the actual avatar left and keep only the image border */
.sos-ucp-avatarcell img,
.sos-ucp-avatarcell .rounded-circle,
.sos-ucp-avatarcell .avatar img,
.sos-ucp-avatarcell .avatar-wrapper img,
.sos-ucp-avatarcell .avatar-image img {
  display: block !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 400px !important;
  min-height: 400px !important;
  max-height: 400px !important;
  object-fit: cover !important;
  object-position: center top !important;
  margin: 0 !important;
  transform: translateX(-54px) !important;
  border-radius: 125px 125px 0 0 !important;
  border: 2px solid rgba(163,124,84,0.56) !important;
  background: #091317 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45) !important;
}

/* give the info cell the space the avatar moved out of */
.sos-ucp-summary .trow2.sos-ucp-summary-cell,
.sos-ucp-summary-cell {
  padding: 14px 14px 14px 0 !important;
  background: rgba(7,19,23,0.36) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* info panel fills its side cleanly */
.sos-ucp-summary-info {
  width: 100% !important;
  max-width: none !important;
  min-height: 400px !important;
  margin: 0 !important;
}

/* =========================================================
   USER CP - LET INFO FILL SPACE LEFT BY SHIFTED AVATAR
========================================================= */

/* shrink the invisible avatar cell so the info can move left */
.sos-ucp-summary .sos-ucp-summary-row > td.sos-ucp-avatarcell,
.sos-ucp-summary-row > td.sos-ucp-avatarcell,
td.sos-ucp-avatarcell {
  width: 216px !important;
  min-width: 216px !important;
  max-width: 216px !important;
  padding: 14px 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* keep the avatar visually floating left */
.sos-ucp-avatarcell img,
.sos-ucp-avatarcell .rounded-circle,
.sos-ucp-avatarcell .avatar img,
.sos-ucp-avatarcell .avatar-wrapper img,
.sos-ucp-avatarcell .avatar-image img {
  transform: translateX(-34px) !important;
  position: relative !important;
  z-index: 2 !important;
}

/* let the info cell start closer to the avatar */
.sos-ucp-summary .trow2.sos-ucp-summary-cell,
.sos-ucp-summary-cell {
  padding: 14px 14px 14px 0 !important;
  width: auto !important;
  background: rgba(7,19,23,0.36) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* make the info box fill all available space */
.sos-ucp-summary-grid {
  display: block !important;
  width: 100% !important;
}

.sos-ucp-summary-info {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 400px !important;
  margin: 0 !important;
}

/* =========================================================
   USER CP - FORCE SUMMARY INTO FLEX SO INFO CAN MOVE
========================================================= */

/* turn only the account summary body row into a flex row */
.sos-ucp-summary-row {
  display: flex !important;
  width: 100% !important;
  align-items: stretch !important;
}

/* stop the cells acting like stubborn table cells */
.sos-ucp-summary-row > td {
  display: block !important;
  box-sizing: border-box !important;
}

/* avatar slot: narrow, invisible, allows the image to hang left */
.sos-ucp-summary-row > td.sos-ucp-avatarcell {
  flex: 0 0 216px !important;
  width: 216px !important;
  min-width: 216px !important;
  max-width: 216px !important;
  padding: 14px 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* actual avatar */
.sos-ucp-avatarcell img,
.sos-ucp-avatarcell .rounded-circle,
.sos-ucp-avatarcell .avatar img,
.sos-ucp-avatarcell .avatar-wrapper img,
.sos-ucp-avatarcell .avatar-image img {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 400px !important;
  min-height: 400px !important;
  max-height: 400px !important;
  object-fit: cover !important;
  object-position: center top !important;
  transform: translateX(-34px) !important;
  margin: 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* info side: take all remaining space */
.sos-ucp-summary-row > td.sos-ucp-summary-cell {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 14px 14px 14px 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* info panel fills the available side */
.sos-ucp-summary-grid {
  display: block !important;
  width: 100% !important;
  min-height: 400px !important;
}

.sos-ucp-summary-info {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 400px !important;
  margin: 0 !important;
}

/* =========================================================
   USER CP - RESET SUMMARY LAYOUT AFTER OVERCORRECTION
   Avatar floats visually. Info fills the remaining space.
========================================================= */

/* summary body row */
.sos-ucp-summary .sos-ucp-summary-row {
  display: flex !important;
  width: 100% !important;
  align-items: stretch !important;
}

/* both cells behave predictably */
.sos-ucp-summary .sos-ucp-summary-row > td {
  display: block !important;
  box-sizing: border-box !important;
}

/* avatar slot: wide enough that avatar does NOT fall off screen */
.sos-ucp-summary .sos-ucp-summary-row > td.sos-ucp-avatarcell,
td.sos-ucp-avatarcell {
  flex: 0 0 300px !important;
  width: 300px !important;
  min-width: 300px !important;
  max-width: 300px !important;
  padding: 14px 0 14px 18px !important;
  overflow: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* kill any fake container around the avatar */
.sos-ucp-avatarcell *,
.sos-ucp-avatarcell .avatar,
.sos-ucp-avatarcell .avatar-wrapper,
.sos-ucp-avatarcell div {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* actual avatar: slightly left, but not offscreen */
.sos-ucp-avatarcell img,
.sos-ucp-avatarcell .rounded-circle,
.sos-ucp-avatarcell .avatar img,
.sos-ucp-avatarcell .avatar-wrapper img,
.sos-ucp-avatarcell .avatar-image img {
  display: block !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 400px !important;
  min-height: 400px !important;
  max-height: 400px !important;
  object-fit: cover !important;
  object-position: center top !important;
  margin: 0 !important;
  transform: translateX(-12px) !important;
  position: relative !important;
  z-index: 2 !important;
  border-radius: 125px 125px 0 0 !important;
  border: 2px solid rgba(163,124,84,0.56) !important;
  background: #091317 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45) !important;
}

/* info side: takes everything left over */
.sos-ucp-summary .sos-ucp-summary-row > td.sos-ucp-summary-cell,
.sos-ucp-summary .trow2.sos-ucp-summary-cell,
.sos-ucp-summary-cell {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  padding: 14px 14px 14px 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* no two-column grid inside the info side */
.sos-ucp-summary .sos-ucp-summary-grid,
.sos-ucp-summary-cell .sos-ucp-summary-grid {
  display: block !important;
  width: 100% !important;
  min-height: 400px !important;
}

/* info box fills the whole remaining side */
.sos-ucp-summary .sos-ucp-summary-info,
.sos-ucp-summary-cell .sos-ucp-summary-info {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 400px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* keep the empty blue/right-side panel dead */
.sos-ucp-summary .sos-ucp-summary-side,
.sos-ucp-summary-cell .sos-ucp-summary-side {
  display: none !important;
}

/* =========================================================
   USER CP - CLEAN FLEX SUMMARY
   Avoids table-cell goblin behavior entirely.
========================================================= */

.sos-ucp-summary-cell {
  padding: 14px !important;
  background: rgba(7,19,23,0.36) !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sos-ucp-summary-flex {
  display: flex !important;
  align-items: stretch !important;
  gap: 18px !important;
  width: 100% !important;
  min-height: 400px !important;
}

.sos-ucp-avatarfloat {
  flex: 0 0 250px !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

.sos-ucp-avatarfloat *,
.sos-ucp-avatarfloat div,
.sos-ucp-avatarfloat .avatar,
.sos-ucp-avatarfloat .avatar-wrapper {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.sos-ucp-avatarfloat img,
.sos-ucp-avatarfloat .rounded-circle,
.sos-ucp-avatarfloat .avatar img,
.sos-ucp-avatarfloat .avatar-wrapper img {
  display: block !important;
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 400px !important;
  min-height: 400px !important;
  max-height: 400px !important;
  object-fit: cover !important;
  object-position: center top !important;
  margin: 0 !important;
  border-radius: 125px 125px 0 0 !important;
  border: 2px solid rgba(163,124,84,0.56) !important;
  background: #091317 !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.45) !important;
}

.sos-ucp-summary-flex > .sos-ucp-summary-info {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  min-height: 400px !important;
  margin: 0 !important;
  padding: 18px !important;
  background: rgba(9,19,23,0.78) !important;
  border: 1px solid rgba(163,124,84,0.22) !important;
  box-sizing: border-box !important;
}

/* USER CP - add breathing room left of avatar */
.sos-ucp-avatarfloat {
  flex: 0 0 270px !important;
  width: 270px !important;
  min-width: 270px !important;
  max-width: 270px !important;
  padding-left: 20px !important;
  box-sizing: border-box !important;
}

.sos-ucp-avatarfloat img,
.sos-ucp-avatarfloat .rounded-circle,
.sos-ucp-avatarfloat .avatar img,
.sos-ucp-avatarfloat .avatar-wrapper img {
  transform: none !important;
  margin: 0 !important;
}