/* WoDBO - Dragon Ball look on top of the Tirania (tibia.com style) layout in style.css.
   Orange gi + blue trims, night sky with ki glow, dragon balls drawn in CSS. */

:root {
	--tib-bg: #050b1f;
	--dbz-orange: #ff8a1d;
	--dbz-orange-dk: #d35400;
	--dbz-orange-lt: #ffb347;
	--dbz-blue: #1d3f94;
	--dbz-blue-dk: #0f2257;
	--dbz-blue-lt: #3d6fe0;
	--dbz-yellow: #ffd23f;
	--dbz-cream: #fff4dc;
	--dbz-cream-dk: #f3dcae;
	--tib-parchment: var(--dbz-cream);
	--tib-parchment-dk: var(--dbz-cream-dk);
	--tib-gold: var(--dbz-yellow);
	--tib-tan: #e9eefc;
	--tib-brown: #b4651b;
	--tib-brown-dk: #0f2257;
	--tib-link: #1d3f94;
	--tib-title-font: "Bangers", "Impact", "Arial Black", sans-serif;
}

/* ------------------------------------------------------------ background (wodbo.png, logo is part of the picture) */
body {
	--dbz-bgh: calc(var(--tib-bgw) * 941 / 1672);
	color: var(--tib-tan);
	background:
		linear-gradient(180deg, rgba(5, 11, 31, 0) 0, rgba(5, 11, 31, 0) calc(var(--dbz-bgh) * .72), var(--tib-bg) var(--dbz-bgh)) center top / var(--tib-bgw) var(--dbz-bgh) no-repeat,
		url("img/wodbo_background.jpg") center top / var(--tib-bgw) auto no-repeat,
		var(--tib-bg);
}
@media (max-width: 767.98px) {
	body {
		background:
			linear-gradient(180deg, rgba(5, 11, 31, 0) 0, rgba(5, 11, 31, 0) calc(var(--dbz-bgh) * .72), var(--tib-bg) var(--dbz-bgh)) center top / var(--tib-bgw) var(--dbz-bgh) no-repeat,
			url("img/wodbo_background_m.jpg") center top / var(--tib-bgw) auto no-repeat,
			var(--tib-bg);
	}
}

/* ------------------------------------------------------------ top bar */
.tib-topbar {
	background: rgba(8, 18, 48, .82);
	border-bottom: 2px solid var(--dbz-orange);
	box-shadow: 0 2px 14px rgba(255, 138, 29, .25);
}
.tib-topnav a { color: #dfe7ff; border-left-color: rgba(255, 138, 29, .35); }
.tib-topnav a:hover { color: var(--dbz-yellow); }
.tib-search input { background: var(--dbz-cream); border-color: var(--dbz-orange-dk); }
.tib-search button { background: linear-gradient(var(--dbz-orange-lt), var(--dbz-orange) 50%, var(--dbz-orange-dk)); }

/* ------------------------------------------------------------ header (logo comes from the background picture) */
.tib-header {
	position: relative;
	height: calc(var(--tib-bgw) * 941 / 1672 * .66);
	padding: 0;
}
.dbz-balls { display: none; }
.tib-logo {
	position: absolute;
	left: 50%;
	top: calc(var(--tib-bgw) * 941 / 1672 * .34);
	width: calc(var(--tib-bgw) * .52);
	height: calc(var(--tib-bgw) * 941 / 1672 * .30);
	transform: translateX(-50%);
}
.tib-logo-name, .tib-logo-sub {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.dbz-cat-ball {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin: 0 4px 0 6px;
	border-radius: 50%;
	background: radial-gradient(circle at 32% 28%, #fff7d0 0 8%, #ffd76a 20%, #ff9d1a 55%, #c65500 100%);
	border: 1px solid #7a2c00;
	color: #d4130b;
	font-size: 9px;
	line-height: 1;
	box-shadow: 0 0 6px rgba(255, 230, 150, .7);
}

/* ------------------------------------------------------------ left menu */
.tib-cat { border: 2px solid var(--dbz-blue-dk); box-shadow: 0 4px 14px rgba(0, 0, 0, .55); }
.tib-cat-btn {
	background: linear-gradient(180deg, var(--dbz-orange-lt) 0%, var(--dbz-orange) 45%, var(--dbz-orange-dk) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -6px 10px rgba(120, 40, 0, .25);
}
.tib-cat.is-open .tib-cat-btn { border-bottom: 2px solid var(--dbz-blue-dk); }
.tib-cat-text {
	font-size: 20px;
	letter-spacing: .05em;
	color: #fff;
	text-shadow: 2px 2px 0 var(--dbz-blue-dk), -1px -1px 0 var(--dbz-blue-dk), 1px -1px 0 var(--dbz-blue-dk), -1px 1px 0 var(--dbz-blue-dk);
}
.tib-cat-sign { filter: brightness(0) invert(1); }
.tib-cat-items { background: var(--dbz-cream); }
.tib-sub { color: #20304f !important; border-bottom-color: var(--dbz-cream-dk); }
.tib-sub::before { border-left-color: var(--dbz-orange); }
.tib-sub:hover { background: #ffe2b5; color: #000 !important; }
.tib-sub.active { color: var(--dbz-orange-dk) !important; background: #ffe2b5; box-shadow: inset 3px 0 0 var(--dbz-orange-dk); }

/* ------------------------------------------------------------ content box */
.tib-box {
	border: 3px solid var(--dbz-blue-dk);
	background: var(--dbz-blue-dk);
	box-shadow: 0 0 0 2px var(--dbz-orange), 0 14px 34px rgba(0, 0, 0, .6), 0 0 34px rgba(255, 138, 29, .18);
}
.tib-box::before, .tib-box::after, .tib-corner, .tib-bracer { display: none; }
.tib-box-title, .tib-side-title {
	background: linear-gradient(180deg, var(--dbz-blue-lt) 0%, var(--dbz-blue) 50%, var(--dbz-blue-dk) 100%);
	border-bottom: 3px solid var(--dbz-orange);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.tib-box-title h1, .tib-side-title h2 {
	font-weight: 400;
	letter-spacing: .06em;
	color: var(--dbz-yellow);
	text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255, 170, 40, .55);
}
.tib-box-title h1 { font-size: 30px; }
.tib-side-title h2 { font-size: 21px; }
.tib-box-content {
	background: linear-gradient(180deg, #fffaf0, var(--dbz-cream));
	box-shadow: inset 0 0 26px rgba(255, 138, 29, .12);
	--bs-border-color: var(--dbz-cream-dk);
}
.tib-side-box {
	border: 2px solid var(--dbz-blue-dk);
	background: linear-gradient(180deg, #fffaf0, var(--dbz-cream));
}
.tib-status-row, .tib-top li { border-bottom-color: var(--dbz-cream-dk); }
.tib-top li::before { color: var(--dbz-orange-dk); }
.tib-muted { color: #44506b; }

/* ------------------------------------------------------------ news */
.tib-news { border-color: var(--dbz-blue-dk); background: #fff; box-shadow: 0 3px 10px rgba(15, 34, 87, .18); }
.tib-news-head { background: linear-gradient(90deg, var(--dbz-orange-dk), var(--dbz-orange)); }
.tib-news-head img { display: none; }
.tib-news-date { color: #fff3c4; }
.tib-news-foot { border-top-color: var(--dbz-cream-dk); }

/* ------------------------------------------------------------ tables */
.tib-box-content .table,
.tib-box-content .tib-table {
	--bs-table-border-color: var(--dbz-cream-dk);
	--bs-table-striped-bg: rgba(29, 63, 148, .05);
	--bs-table-hover-bg: rgba(255, 138, 29, .12);
	border-color: var(--dbz-blue);
	background: #fff;
}
.tib-box-content .tib-table th,
.tib-box-content .table-tibia > thead > tr > *,
.tib-box-content .table > thead.table-tibia > tr > *,
.tib-box-content .table-light > thead > tr > *,
.tib-box-content .table-dark > thead > tr > *,
.tib-box-content thead.table-light > tr > *,
.tib-box-content thead.table-dark > tr > * {
	background: linear-gradient(180deg, var(--dbz-blue-lt), var(--dbz-blue)) !important;
	color: #fff !important;
	border-color: var(--dbz-blue-dk) !important;
}

/* ------------------------------------------------------------ buttons */
.tib-btn,
.btn.btn-primary,
.btn.btn-secondary,
.btn.btn-outline-primary,
.btn.btn-info {
	background: linear-gradient(var(--dbz-orange-lt), var(--dbz-orange) 50%, var(--dbz-orange-dk));
	border: 1px solid #7a2c00;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 2px 5px rgba(0, 0, 0, .35);
	text-shadow: 1px 1px 0 #6b2400;
}
.tib-btn-green,
.btn.btn-success {
	background: linear-gradient(var(--dbz-blue-lt), var(--dbz-blue) 55%, var(--dbz-blue-dk));
	border-color: #0a1638;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 5px rgba(0, 0, 0, .35);
	text-shadow: 1px 1px 0 #000;
}

/* ------------------------------------------------------------ footer */
footer, .tib-footer { color: #b8c4e8; }
footer a, .tib-footer a { color: var(--dbz-yellow); }