:root {
	--tropi-bg: #07050a;
	--tropi-bg-2: #0d0710;
	--tropi-surface: #130b18;
	--tropi-surface-2: #1a0f22;
	--tropi-surface-3: #21132d;
	--tropi-ink: #ffffff;
	--tropi-text: #f7f2f7;
	--tropi-muted: #bdb1c2;
	--tropi-soft: #8f8197;
	--tropi-line: #34203f;
	--tropi-line-2: #4a2a5d;
	--tropi-purple: #8a3fd1;
	--tropi-purple-2: #5c268f;
	--tropi-pink: #f05aa8;
	--tropi-pink-2: #bd2f76;
	--tropi-black: #050307;
	--tropi-ok: #ff89bf;
	--tropi-bad: #ff6b7d;
	--tropi-radius-xl: 24px;
	--tropi-radius-lg: 18px;
	--tropi-radius-md: 14px;
	--tropi-radius-sm: 10px;
	--tropi-shadow: 0 10px 24px #000;
	--tropi-shadow-soft: 0 6px 16px #050307;
}

html {
	background: var(--tropi-bg);
}

body {
	color: var(--tropi-text);
	background:
		linear-gradient(180deg, #07050ad9, #07050af2),
		url("../images/tropi-roleplay-bg.webp") center top / cover no-repeat fixed,
		var(--tropi-bg);
	font-family: Inter, "Segoe UI", ui-sans-serif, system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

body::before,
body::after {
	display: none !important;
	content: none !important;
}

a,
a:visited {
	color: var(--tropi-text);
}

a:hover {
	color: var(--tropi-ink);
	text-decoration: none;
}

strong,
.strong,
h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--tropi-ink);
}

input,
button,
select,
textarea {
	color: var(--tropi-text);
	background: var(--tropi-black);
	border: 1px solid var(--tropi-line);
	border-radius: var(--tropi-radius-sm);
	box-shadow: none;
}

input:hover,
textarea:hover,
button:hover,
select:hover,
input:focus,
textarea:focus,
button:focus,
select:focus {
	color: var(--tropi-text);
	background: var(--tropi-black);
	border-color: var(--tropi-pink);
}

input[type="checkbox"],
input[type="radio"] {
	background: none;
}

input[disabled],
textarea[disabled],
select[disabled],
.button.disabled,
.button[disabled]:hover {
	background: var(--tropi-surface-2);
	color: var(--tropi-soft);
	border-color: var(--tropi-line);
}

hr {
	background: var(--tropi-line);
	box-shadow: none;
}

.bbc_code,
.phpcode,
pre {
	color: var(--tropi-text);
	background: var(--tropi-black);
	border: 1px solid var(--tropi-line-2);
	border-left: 3px solid var(--tropi-pink);
	border-top: 1px solid var(--tropi-line-2);
	border-bottom: 1px solid var(--tropi-line-2);
	border-radius: var(--tropi-radius-md);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03), var(--tropi-shadow-soft);
	font-size: .82rem;
	line-height: 1.55;
	margin: 8px 0 12px;
	max-height: 32em;
	padding: 16px 18px;
	white-space: pre-wrap;
	word-break: break-word;
}

.bbc_code.expand_code,
.phpcode.expand_code,
pre.expand_code {
	max-height: none;
}

.codeheader,
.quoteheader {
	align-items: center;
	color: var(--tropi-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: .82rem;
	gap: 7px;
	margin: 14px 0 6px;
	padding: 0;
}

.codeoperation,
.codeoperation:visited {
	align-items: center;
	background: linear-gradient(135deg, rgba(236, 72, 153, .92), rgba(147, 51, 234, .9));
	border: 1px solid rgba(244, 114, 182, .5);
	border-radius: 999px;
	box-shadow: 0 8px 20px rgba(147, 51, 234, .18);
	color: var(--tropi-ink);
	cursor: pointer;
	display: inline-flex;
	font-size: .72rem;
	font-weight: 800;
	justify-content: center;
	line-height: 1;
	min-height: 24px;
	padding: 6px 10px;
	text-transform: uppercase;
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.codeoperation:hover {
	color: var(--tropi-ink);
	border-color: rgba(255, 255, 255, .7);
	box-shadow: 0 10px 24px rgba(236, 72, 153, .25);
	text-decoration: none;
	transform: translateY(-1px);
}

blockquote,
.bbc_standard_quote,
.bbc_alternate_quote {
	color: var(--tropi-text);
	background: var(--tropi-surface-2);
	border: 1px solid var(--tropi-line-2);
	border-left: 3px solid var(--tropi-purple);
	border-right: 1px solid var(--tropi-line-2);
	border-radius: var(--tropi-radius-md);
}

blockquote cite {
	color: #ffd7ea;
	border-bottom-color: var(--tropi-line);
}

.bbc_link {
	color: var(--tropi-pink);
	border-bottom-color: var(--tropi-pink-2);
}

.bbc_link:hover {
	color: var(--tropi-ink);
	border-bottom-color: var(--tropi-pink);
}

::selection {
	color: var(--tropi-ink);
	background: var(--tropi-pink-2);
}

#top_section {
	background: #0b0610;
	border-bottom: 1px solid var(--tropi-line);
	box-shadow: 0 6px 14px #000;
}

#top_section .inner_wrap,
#wrapper,
#header,
#footer .inner_wrap {
	width: min(1320px, calc(100% - clamp(24px, 4vw, 72px)));
	max-width: none;
}

#top_info {
	color: var(--tropi-muted);
}

#top_info a,
#top_info a:visited,
#top_info .welcome {
	color: var(--tropi-muted);
}

#top_info a:hover,
#top_info a.active,
#top_info a.open {
	color: var(--tropi-ink);
}

#search_form input[type="search"],
#search_form select,
#languages_form select {
	min-height: 36px;
	border-radius: 999px;
}

#header {
	margin-top: 18px;
	padding: 18px 0;
	align-items: center;
	background: transparent;
}

h1.forumtitle {
	padding: 0;
	font-family: inherit;
	font-size: 1.25rem;
	font-weight: 900;
	letter-spacing: .03em;
	text-transform: uppercase;
}

h1.forumtitle a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--tropi-ink);
	text-shadow: none;
}

h1.forumtitle a::before {
	content: "";
	width: 44px;
	height: 44px;
	display: inline-block;
	border-radius: 999px;
	border: 1px solid var(--tropi-line-2);
	background: var(--tropi-surface-2) url("../images/tropi-logo.png") center / cover no-repeat;
	box-shadow: var(--tropi-shadow-soft);
}

h1.forumtitle img {
	max-height: 52px;
	border-radius: 999px;
	border: 1px solid var(--tropi-line-2);
	background: var(--tropi-surface-2);
	box-shadow: var(--tropi-shadow-soft);
}

#smflogo {
	display: none;
}

#siteslogan {
	color: var(--tropi-muted);
	font-size: .9rem;
}

#wrapper {
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

#upper_section {
	background: transparent;
	border: 0;
}

#inner_section {
	background: var(--tropi-surface);
	border: 1px solid var(--tropi-line);
	border-radius: var(--tropi-radius-xl);
	box-shadow: var(--tropi-shadow-soft);
	overflow: visible;
}

#inner_wrap {
	border-bottom: 1px solid var(--tropi-line);
}

#inner_wrap .user,
#inner_wrap .news {
	color: var(--tropi-muted);
}

#inner_wrap .news h2 {
	color: var(--tropi-ink);
}

.dropmenu > li > a {
	border-radius: 999px;
	border: 1px solid var(--tropi-line);
	background: var(--tropi-surface-2);
	color: var(--tropi-muted);
	font-weight: 800;
}

.dropmenu > li:hover > a,
.dropmenu > li > a:focus,
.dropmenu > li > a.active,
.dropmenu > li > a.chosen {
	color: var(--tropi-ink);
	background: var(--tropi-surface-3);
	border-color: var(--tropi-line-2);
	text-decoration: none;
}

.dropmenu li ul,
.top_menu,
#main_menu .popup_window {
	background: var(--tropi-surface);
	border: 1px solid var(--tropi-line-2);
	border-radius: var(--tropi-radius-lg);
	box-shadow: var(--tropi-shadow);
}

.dropmenu li li a,
.top_menu a {
	color: var(--tropi-text);
}

.dropmenu li li:hover,
.dropmenu li li:hover > a,
.quickbuttons li ul li a:hover,
.quickbuttons ul li a:focus {
	background: var(--tropi-surface-2);
	color: var(--tropi-ink);
}

.navigate_section {
	margin: 12px 0 0;
}

.navigate_section ul {
	background: var(--tropi-surface);
	border: 1px solid var(--tropi-line);
	border-radius: 999px;
	box-shadow: var(--tropi-shadow-soft);
}

.navigate_section ul li,
.navigate_section ul li a,
.navigate_section ul li em {
	color: var(--tropi-muted);
}

.navigate_section ul li.last,
.navigate_section ul li.last span,
.navigate_section ul li.last em {
	color: var(--tropi-text);
}

#content_section {
	margin-top: 18px;
}

#main_content_section {
	padding-bottom: 56px;
}

#preview_section {
	margin: 0 0 18px;
	border-radius: var(--tropi-radius-lg);
	overflow: hidden;
	box-shadow: var(--tropi-shadow-soft);
}

#preview_section .cat_bar {
	border-radius: var(--tropi-radius-lg) var(--tropi-radius-lg) 0 0;
}

#preview_subject {
	display: block;
	font-style: italic;
}

#preview_body.windowbg {
	margin: 0;
	padding: 18px 20px;
	background: var(--tropi-surface);
	border-color: var(--tropi-line);
	border-top: 0;
	border-radius: 0 0 var(--tropi-radius-lg) var(--tropi-radius-lg);
	box-shadow: none;
}

#preview_body.windowbg > br:first-child {
	display: none;
}

.generic_list_wrapper,
.windowbg,
.approvebg,
.approvebg2,
.roundframe,
.information {
	color: var(--tropi-text);
	background: var(--tropi-surface);
	border: 1px solid var(--tropi-line);
	border-radius: var(--tropi-radius-lg);
	box-shadow: var(--tropi-shadow-soft);
}

.windowbg:nth-of-type(even),
.windowbg:nth-of-type(odd),
.bg.even,
.bg.odd {
	background: var(--tropi-surface);
}

.windowbg:target,
tr.windowbg:hover {
	background: var(--tropi-surface-2);
}

.windowbg.locked,
.windowbg.sticky,
.windowbg.sticky.locked {
	background: var(--tropi-surface-2);
}

#topic_container .windowbg.sticky {
	background:
		linear-gradient(90deg, rgba(240, 90, 168, .22), rgba(138, 63, 209, .08) 42%, rgba(26, 15, 34, .96)),
		var(--tropi-surface-2);
	border-left: 4px solid var(--tropi-pink);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 22px rgba(5, 3, 7, .28);
	position: relative;
}

#topic_container .windowbg.sticky .message_index_title::before {
	background: rgba(240, 90, 168, .14);
	border: 1px solid rgba(240, 90, 168, .42);
	border-radius: 999px;
	color: var(--tropi-pink);
	content: "FIJADO";
	display: inline-flex;
	font-size: .64rem;
	font-weight: 900;
	letter-spacing: .04em;
	line-height: 1;
	margin: 0 8px 4px 0;
	padding: 5px 8px;
	vertical-align: middle;
}

#topic_container .windowbg.sticky .message_index_title a {
	color: var(--tropi-ink);
	font-weight: 900;
}

#topic_container .windowbg.sticky .board_icon,
#topic_container .windowbg.sticky .board_stats,
#topic_container .windowbg.sticky .lastpost,
#topic_container .windowbg.sticky .moderation {
	background: rgba(5, 3, 7, .16);
}

.windowbg.approvetopic,
.windowbg.approvepost {
	background: #251018;
	border-color: #663140;
}

.boardindex_table .main_container {
	margin-bottom: 20px;
	border-radius: var(--tropi-radius-xl);
	overflow: hidden;
	box-shadow: var(--tropi-shadow-soft);
}

.boardindex_table .cat_bar {
	margin-top: 0;
}

.up_contain,
.navigate_section ul,
.popup_content {
	background: var(--tropi-surface) !important;
	background-image: none !important;
}

.boardindex_table .up_contain {
	margin: 0;
	color: var(--tropi-text);
	border: 1px solid var(--tropi-line);
	border-top: 0;
	border-radius: 0;
	box-shadow: none;
}

.boardindex_table .up_contain:nth-child(even) {
	background: var(--tropi-surface-2) !important;
}

.boardindex_table .up_contain:hover {
	background: var(--tropi-surface-3) !important;
}

.boardindex_table .info,
.boardindex_table .board_stats,
.boardindex_table .lastpost,
.boardindex_table .children {
	color: var(--tropi-muted);
	background: transparent;
}

.boardindex_table .info .subject,
.boardindex_table .info .subject:visited {
	color: var(--tropi-text);
	font-weight: 800;
}

.boardindex_table .info .subject:hover {
	color: var(--tropi-pink);
}

.boardindex_table .board_description,
.boardindex_table .board_stats p,
.boardindex_table .lastpost,
.boardindex_table .lastpost a {
	color: var(--tropi-muted);
}

.boardindex_table .board_stats p {
	border-left: 1px solid var(--tropi-line);
	border-right: 1px solid var(--tropi-line);
}

.children {
	border-top: 1px solid var(--tropi-line);
	background: var(--tropi-surface-2);
}

.children p,
.children a {
	color: var(--tropi-muted);
}

div.cat_bar {
	background: var(--tropi-purple);
	border: 1px solid var(--tropi-purple);
	border-radius: var(--tropi-radius-lg) var(--tropi-radius-lg) 0 0;
	box-shadow: none;
	text-shadow: none;
}

.cat_bar.collapsed,
.cat_bar.cat_bar_round {
	border-radius: var(--tropi-radius-lg);
}

h3.catbg,
h3.catbg a,
h3.catbg a:hover,
.cat_bar strong {
	color: var(--tropi-ink);
}

.cat_bar .desc,
.cat_bar .desc a {
	color: #ffd7ea;
}

.cat_bar + .windowbg,
.cat_bar + .roundframe,
.cat_bar + .title_bar {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}

.title_bar {
	background: var(--tropi-surface-2);
	color: var(--tropi-text);
	border: 1px solid var(--tropi-line);
	border-top: 1px solid var(--tropi-line-2);
	border-bottom: 1px solid var(--tropi-line);
	border-radius: var(--tropi-radius-md) var(--tropi-radius-md) 0 0;
}

h3.titlebg,
h4.titlebg,
.titlebg,
h3.subbg,
h4.subbg,
.subbg,
.titlebg a,
.subbg a {
	color: var(--tropi-text);
	font-family: inherit;
}

.information {
	background: var(--tropi-surface-2);
	border-color: var(--tropi-line);
}

.buttonlist,
.buttonrow,
.pagelinks {
	gap: 8px;
}

.quickbuttons {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
	background: transparent !important;
	background-image: none !important;
}

.quickbuttons > li {
	float: none;
	background: transparent !important;
	background-image: none !important;
	padding: 0;
}

.button,
.quickbuttons > li > a,
.inline_mod_check,
.pagelinks .nav_page,
.pagelinks .current_page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 14px;
	color: var(--tropi-text);
	background: var(--tropi-surface-2);
	border: 1px solid var(--tropi-line-2);
	border-radius: 999px;
	box-shadow: none;
	font-weight: 800;
}

.quickbuttons > li > a {
	display: inline-flex;
	height: auto;
	line-height: 1;
	white-space: nowrap;
}

.button:hover,
.button:focus,
.quickbuttons > li:hover > a,
.quickbuttons > li > a:focus,
.pagelinks .nav_page:hover,
.pagelinks .current_page {
	color: var(--tropi-ink);
	background: var(--tropi-purple);
	border-color: var(--tropi-purple);
	text-decoration: none;
}

.button.active,
.button.active:hover,
.button.active:focus {
	color: var(--tropi-ink);
	background: var(--tropi-pink);
	border-color: var(--tropi-pink);
}

.quickbuttons > li:first-child > a,
.quickbuttons > li:last-child > a,
.quickbuttons > li:only-child > a,
.inline_mod_check:last-child,
.inline_mod_check:only-child {
	border-radius: 999px;
}

.post_options {
	background: transparent !important;
}

.post_options ul {
	background: var(--tropi-surface) !important;
	background-image: none !important;
	border: 1px solid var(--tropi-line-2);
	border-radius: var(--tropi-radius-md);
	box-shadow: var(--tropi-shadow);
}

.post_options ul a {
	color: var(--tropi-text);
	border-radius: var(--tropi-radius-sm);
}

.post_options ul a:hover,
.post_options ul a:focus {
	color: var(--tropi-ink);
	background: var(--tropi-surface-2) !important;
	border-color: var(--tropi-line-2);
}

.poster {
	background: var(--tropi-surface-2);
	border-right: 1px solid var(--tropi-line);
}

.poster h4,
.poster h4 a,
.poster li:hover h4 a,
.poster h4 a:hover,
.poster li h4 a,
.poster h4 a:focus {
	color: var(--tropi-ink);
}

.poster li,
.poster li.membergroup,
.poster li.poster_online,
.poster li.poster_online a {
	color: var(--tropi-muted);
}

.poster img.avatar {
	border-radius: var(--tropi-radius-md);
	border: 1px solid var(--tropi-line-2);
	background: var(--tropi-surface-3);
}

.errorbox,
.noticebox,
.infobox {
	color: var(--tropi-text);
	background: #251018;
	border: 1px solid #663140;
	border-radius: var(--tropi-radius-md);
	box-shadow: var(--tropi-shadow-soft);
}

.errorbox {
	border-color: var(--tropi-bad);
}

.infobox {
	background: var(--tropi-surface-2);
	border-color: var(--tropi-line-2);
}

table.table_grid,
.table_grid {
	color: var(--tropi-text);
}

tr.windowbg td,
tr.bg td,
.table_grid tr td,
.title_bar th,
.windowbg th {
	border-color: var(--tropi-line);
}

#footer {
	background: #0b0610;
	border-top: 1px solid var(--tropi-line);
	color: var(--tropi-muted);
}

#footer a {
	color: var(--tropi-text);
}

#footer a:hover {
	color: var(--tropi-pink);
}

#ajax_in_progress {
	z-index: 9999;
	color: var(--tropi-ink);
	background: var(--tropi-surface);
	border-bottom: 2px solid var(--tropi-pink);
	box-shadow: var(--tropi-shadow);
	font-size: 1rem;
	font-weight: 900;
	letter-spacing: .02em;
	padding: 10px 16px;
}

#ajax_in_progress a {
	color: var(--tropi-pink);
}

#quickreply_options .roundframe,
form#postmodify .roundframe {
	background: var(--tropi-surface);
	border-color: var(--tropi-line);
}

#quickreply_options .roundframe {
	padding-left: clamp(16px, 10vw, 130px);
	padding-right: clamp(16px, 10vw, 130px);
}

#post_draft_options {
	color: var(--tropi-text);
	background: var(--tropi-surface-2);
	border-color: var(--tropi-line);
	box-shadow: none;
}

#post_draft_options .settings dd,
#post_draft_options .settings dt {
	border-top-color: var(--tropi-line);
}

#post_draft_options .settings strong,
#post_confirm_buttons .smalltext,
#shortcuts {
	color: var(--tropi-muted);
}

.sceditor-container {
	color: var(--tropi-text) !important;
	background: var(--tropi-black) !important;
	border: 1px solid var(--tropi-line-2) !important;
	border-radius: var(--tropi-radius-md) !important;
	box-shadow: var(--tropi-shadow-soft);
}

.sceditor-container iframe,
.sceditor-container textarea {
	color: var(--tropi-text) !important;
	background: var(--tropi-black) !important;
}

.sceditor-toolbar,
.sceditor-group {
	background: var(--tropi-surface-2) !important;
	border-color: var(--tropi-line) !important;
}

.sceditor-toolbar {
	border-bottom: 1px solid var(--tropi-line) !important;
	border-radius: var(--tropi-radius-md) var(--tropi-radius-md) 0 0 !important;
}

.sceditor-button,
.sceditor-button:hover,
.sceditor-button.active,
.sceditor-button:active {
	background-color: var(--tropi-surface-3) !important;
	border-color: var(--tropi-line) !important;
	border-radius: 6px !important;
}

.sceditor-button:hover,
.sceditor-button.active {
	background-color: var(--tropi-purple) !important;
}

div.sceditor-dropdown {
	color: var(--tropi-text) !important;
	background: var(--tropi-surface) !important;
	border-color: var(--tropi-line-2) !important;
	border-radius: var(--tropi-radius-md) !important;
	box-shadow: var(--tropi-shadow) !important;
}

div.sceditor-dropdown label,
div.sceditor-dropdown div {
	color: var(--tropi-text) !important;
}

.richedit_resize {
	background: var(--tropi-surface-2);
	border-color: var(--tropi-line);
}

@media (max-width: 720px) {
	#top_section .inner_wrap,
	#wrapper,
	#header,
	#footer .inner_wrap {
		width: min(100% - 24px, 1320px);
	}

	#header {
		margin-top: 12px;
		padding: 14px 0;
	}

	h1.forumtitle {
		font-size: 1rem;
	}

	#inner_section {
		border-radius: var(--tropi-radius-lg);
	}

	.navigate_section ul {
		border-radius: var(--tropi-radius-md);
	}
}