/* Mystic Gaming – dark style based on prosilver */

/* Load all prosilver styles first */
@import url("../../prosilver/theme/stylesheet.css");

/* Brand colors taken from the logo */
:root {
	--mg-page: #070a0e;
	--mg-panel: #141c26;
	--mg-panel-alt: #1a2432;
	--mg-panel-hi: #1f2c3d;
	--mg-line: #27374a;
	--mg-blue: #24507f;
	--mg-blue-dark: #0e2138;
	--mg-blue-light: #56a2e8;
	--mg-text: #ccd7e3;
	--mg-text-dim: #8b99a8;
	--mg-text-bright: #f1f6fb;
}

/* Page background with the brand wallpaper */
body {
	background: var(--mg-page) url("./images/mg_bg.jpg") no-repeat center top fixed;
	background-size: cover;
	color: var(--mg-text);
}

.wrap {
	background-color: rgba(9, 13, 18, 0.95);
	border: 1px solid var(--mg-line);
	border-radius: 6px;
	padding: 15px;
}

a {
	color: var(--mg-blue-light);
}

a:hover {
	color: var(--mg-text-bright);
}

/* Header, dark so the logo stands out */
.headerbar {
	background: radial-gradient(ellipse at 50% 0%, #1d3a5c 0%, #0b1420 70%);
	border: 1px solid var(--mg-line);
	border-bottom: 2px solid var(--mg-blue);
	border-radius: 6px;
	color: var(--mg-text-bright);
	padding: 16px 20px;
}

/* Logo in the original colors, soft halo keeps it readable.
   Variants in theme/images: mg_banner_outline.png, mg_banner_plate.png,
   mg_banner.png (plain original). */
.site_logo {
	background-image: url("./images/mg_banner_glow.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	width: 460px;
	height: 150px;
	max-width: 100%;
}

/* Centered header block */
.headerbar .inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.logo {
	float: none;
	display: block;
	margin: 0;
	padding: 0;
}

.site-description {
	float: none;
	margin: 0;
	text-align: center;
}

.site-description h1 {
	color: var(--mg-text-bright);
	text-shadow: none;
	font-size: 2em;
}

.site-description p {
	color: var(--mg-text-dim);
}

#search-box {
	float: none;
	margin: 0;
}

.navbar .navbar-inner,
.navbar .linklist.compact,
#nav-breadcrumbs {
	background-color: var(--mg-panel-alt);
	border-top: 1px solid var(--mg-line);
	border-radius: 0 0 6px 6px;
	padding: 6px 10px;
}

/* Navigation as tabs */
.navbar .linklist > li > a {
	padding: 9px 14px;
	margin-right: 3px;
	background-color: var(--mg-panel-alt);
	border: 1px solid var(--mg-line);
	border-radius: 4px;
	font-weight: 600;
}

.navbar .linklist > li > a:hover {
	background-color: var(--mg-blue);
	border-color: var(--mg-blue-light);
	color: var(--mg-text-bright);
}

.navbar {
	background-color: var(--mg-panel);
	border: 1px solid var(--mg-line);
	border-bottom: 3px solid var(--mg-blue);
	border-radius: 6px 6px 0 0;
}

.navbar a,
.navbar .linklist > li > a,
.navbar .linklist > li > a > span {
	color: var(--mg-text);
}

.navbar a:hover,
.navbar a:hover > span {
	color: var(--mg-blue-light);
}

/* Dropdowns need a solid background */
.dropdown .dropdown-contents,
.dropdown-extended .dropdown-contents {
	background-color: var(--mg-panel-alt);
	border: 1px solid var(--mg-line);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
	color: var(--mg-text);
}

.dropdown-contents a,
.dropdown li a {
	color: var(--mg-text);
}

.dropdown-contents a:hover,
.dropdown li:hover > a {
	background-color: var(--mg-panel-hi);
	color: var(--mg-text-bright);
}

.dropdown-extended ul li,
.dropdown li.separator {
	border-color: var(--mg-line);
}

.dropdown-extended .header,
.dropdown-extended .footer {
	background-color: var(--mg-panel);
	border-color: var(--mg-line);
	color: var(--mg-text-bright);
}

.dropdown .pointer-inner {
	border-color: var(--mg-panel-alt) transparent;
}

.dropdown .pointer {
	border-color: var(--mg-line) transparent;
}

/* Category and forum headers */
.forabg,
.forumbg {
	background: linear-gradient(180deg, var(--mg-blue) 0%, var(--mg-blue-dark) 100%);
	border: 1px solid var(--mg-line);
	border-radius: 6px;
}

li.header dt,
li.header dd,
li.header dl.row-item dt .list-inner {
	color: var(--mg-text-bright);
	text-shadow: none;
}

/* Rows and panels */
.panel {
	background-color: var(--mg-panel);
	color: var(--mg-text);
	border: 1px solid var(--mg-line);
	border-radius: 6px;
}

.bg1 {
	background-color: var(--mg-panel);
}

.bg2 {
	background-color: var(--mg-panel-alt);
}

.bg3 {
	background-color: var(--mg-panel-hi);
}

ul.topiclist li {
	color: var(--mg-text);
}

ul.topiclist li.row {
	background-color: var(--mg-panel);
	border-bottom: 1px solid var(--mg-line);
}

/* Row must contain its floated columns, otherwise long
   subforum lists run past the border */
ul.topiclist li.row {
	overflow: hidden;
}

ul.topiclist li.row dl {
	overflow: visible;
	margin: 6px 0;
}

.row-item .forum-description,
.row-item .responsive-show,
ul.topiclist li.row dd.lastpost span,
ul.topiclist li.row dd.posts,
ul.topiclist li.row dd.topics,
ul.topiclist li.row dd.views {
	color: var(--mg-text-dim);
}

ul.topiclist li.row dd.lastpost a {
	color: var(--mg-text);
}

ul.topiclist li.row dl {
	border-color: var(--mg-line);
}

ul.topiclist li.row:hover {
	background-color: var(--mg-panel-hi);
}

ul.topiclist dd {
	border-left: 1px solid var(--mg-line);
}

.forumtitle,
.topictitle {
	color: var(--mg-text-bright);
	font-weight: 600;
	text-shadow: none;
}

.forumtitle:hover,
.topictitle:hover {
	color: var(--mg-blue-light);
}

.row-item-link-container a,
.lastsubject {
	color: var(--mg-text);
}

/* Blocks below the forum list */
.stat-block {
	overflow: auto;
	background-color: var(--mg-panel);
	border: 1px solid var(--mg-line);
	border-radius: 6px;
	padding: 12px 15px 6px;
	margin-bottom: 10px;
}

.stat-block > *:last-child {
	margin-bottom: 0;
}

.stat-block h3 {
	color: var(--mg-text-bright);
	border-bottom: 1px solid var(--mg-line);
	padding-bottom: 5px;
	margin-bottom: 8px;
}

.stat-block p {
	color: var(--mg-text-dim);
}

/* Posts */
.post {
	background-color: var(--mg-panel);
	border: 1px solid var(--mg-line);
	border-radius: 6px;
}

.postbody,
.content,
.postbody h3 a {
	color: var(--mg-text);
}

.postprofile {
	color: var(--mg-text-dim);
	border-color: var(--mg-line);
	background-color: rgba(0, 0, 0, 0.22);
}

.postprofile strong {
	color: var(--mg-text);
}

.author,
.responsive-show {
	color: var(--mg-text-dim);
}

blockquote {
	background-color: rgba(36, 80, 127, 0.16);
	border: 1px solid var(--mg-line);
	color: var(--mg-text);
}

blockquote cite {
	color: var(--mg-text-bright);
}

.codebox {
	background-color: #0b1119;
	border: 1px solid var(--mg-line);
	color: var(--mg-text);
}

.codebox p {
	border-bottom-color: var(--mg-line);
	color: var(--mg-text-dim);
}

.codebox code {
	color: #8fc4f0;
}

.rules {
	background-color: rgba(147, 45, 60, 0.18);
	border: 1px solid #5a2a33;
	color: var(--mg-text);
}

/* Tables */
.table1 thead th {
	color: var(--mg-text-bright);
	border-bottom-color: var(--mg-line);
}

.table1 tbody td {
	border-top-color: var(--mg-line);
	color: var(--mg-text);
}

.table1 tbody tr:hover,
.table1 tbody tr.hover {
	background-color: var(--mg-panel-hi);
	color: var(--mg-text-bright);
}

/* Forms */
.inputbox,
input.inputbox,
textarea.inputbox,
select {
	background-color: #0d141d;
	border: 1px solid var(--mg-line);
	color: var(--mg-text);
}

.inputbox:hover,
.inputbox:focus {
	border-color: var(--mg-blue-light);
	color: var(--mg-text-bright);
}

fieldset dt,
fieldset dd,
fieldset.fields1,
fieldset.fields2 {
	color: var(--mg-text);
}

legend {
	color: var(--mg-text-bright);
}

/* Buttons */
.button,
a.button,
button.button,
input.button1,
input.button2,
.button.button-secondary {
	background: var(--mg-panel-alt);
	border: 1px solid var(--mg-line);
	border-radius: 4px;
	color: var(--mg-text);
	font-weight: 600;
	padding: 6px 14px;
	transition: background-color .15s ease, border-color .15s ease;
}

.button:hover,
a.button:hover,
button.button:hover,
input.button1:hover,
input.button2:hover {
	background: var(--mg-panel-hi);
	border-color: var(--mg-blue-light);
	color: var(--mg-text-bright);
}

/* Primary action, e.g. submit or new topic */
.button.button-primary,
.submit-buttons input.button1,
input[type="submit"].button1 {
	background: var(--mg-blue);
	border-color: var(--mg-blue);
	color: var(--mg-text-bright);
}

.button.button-primary:hover,
.submit-buttons input.button1:hover,
input[type="submit"].button1:hover {
	background: #2e64a0;
	border-color: var(--mg-blue-light);
}

.button .icon,
.button:hover .icon {
	color: var(--mg-blue-light);
}

/* Keyboard focus stays visible */
a:focus-visible,
.button:focus-visible,
.inputbox:focus-visible {
	outline: 2px solid var(--mg-blue-light);
	outline-offset: 2px;
}

/* Pagination */
.pagination li a,
.pagination li span {
	background-color: var(--mg-panel-alt);
	border: 1px solid var(--mg-line);
	color: var(--mg-text);
}

.pagination li.active span {
	background-color: var(--mg-blue);
	border-color: var(--mg-blue);
	color: var(--mg-text-bright);
}

.pagination li a:hover {
	background-color: var(--mg-blue);
	border-color: var(--mg-blue-light);
	color: var(--mg-text-bright);
}

/* Tabs */
#tabs .tab > a {
	background-color: var(--mg-panel-alt);
	color: var(--mg-text);
}

#tabs .activetab > a {
	background-color: var(--mg-blue);
	color: var(--mg-text-bright);
}

/* Search box in the header */
.search-header {
	background-color: var(--mg-panel-alt);
	border: 1px solid var(--mg-line);
	box-shadow: none;
}

.search-box .inputbox {
	background-color: transparent;
	border: none;
}

/* Footer */
.copyright {
	color: var(--mg-text-dim);
}

.copyright a {
	color: var(--mg-text-dim);
}

.navbar-bottom {
	background-color: var(--mg-panel);
	border: 1px solid var(--mg-line);
	border-radius: 6px;
}

/* Small elements */
.badge {
	background-color: var(--mg-blue);
	color: var(--mg-text-bright);
}

hr,
.notice {
	border-top-color: var(--mg-line);
}

.phpbb_alert {
	background-color: var(--mg-panel);
	border: 1px solid var(--mg-line);
	color: var(--mg-text);
}

.darkenwrapper .darken {
	background-color: #000;
}