/* Global styles moved from inline */
body { background: radial-gradient(1200px 800px at 0% 0%, #0e1520, #0b0f15) fixed; display: flex; flex-direction: column; min-height: 100vh; }
html, body { height: 100%; }
.card-img-top { object-fit: cover; height: 180px; }
/* Keep card banner aspect ratio consistent (4:1) on overview */
.banner-4x1 {
	aspect-ratio: 4 / 1;
	width: 100%;
	height: auto;
	object-fit: cover;
	display: block;
}
.card-img-top.banner-4x1 { height: auto; }
.server-banner { height: 320px; object-fit: cover; width: 100%; display: block; }
.shadow-soft { box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 4px 10px rgba(0,0,0,.25); }

/* Adjustable spacing variables */
:root {
	--categories-gap: .75rem; /* bottom spacing between badges and following content */
	--categories-top-gap: .5rem; /* top spacing above badges (between title/buttons and badges) */
}

/* Small round server button/icon shown before title */
.server-button-img {
	width: 40px;
	height: 40px;
	object-fit: cover;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,.2);
}

/* Extra spacing around category badges on cards */
.categories-wrap {
	margin-top: var(--categories-top-gap) !important;
	margin-bottom: var(--categories-gap) !important;
}

/* Optional quick-tuning utilities (override the CSS variable locally) */
.categories-gap-0 { --categories-gap: 0 !important; }
.categories-gap-xs { --categories-gap: .25rem !important; }
.categories-gap-sm { --categories-gap: .5rem !important; }
.categories-gap-md { --categories-gap: .75rem !important; }
.categories-gap-lg { --categories-gap: 1rem !important; }
.categories-gap-xl { --categories-gap: 1.25rem !important; }

/* Top gap utilities */
.categories-gap-top-0 { --categories-top-gap: 0 !important; }
.categories-gap-top-xs { --categories-top-gap: .25rem !important; }
.categories-gap-top-sm { --categories-top-gap: .5rem !important; }
.categories-gap-top-md { --categories-top-gap: .75rem !important; }
.categories-gap-top-lg { --categories-top-gap: 1rem !important; }
.categories-gap-top-xl { --categories-top-gap: 1.25rem !important; }
.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.4), 0 6px 14px rgba(0,0,0,.3); }
.card-link:hover { text-decoration: none; }
.server-hero { position: relative; border-radius: 12px; overflow: hidden; }
.server-hero .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65)); }
.title-box { display: inline-block; background: rgba(20, 26, 36, .9); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.06); border-radius: 12px; padding: 12px 16px; position: relative; z-index: 2; }
.title-over-hero { margin-top: 10px; }
.title-box h1 { margin: 0; }
.badge { --bs-badge-padding-x: .6em; --bs-badge-padding-y: .35em; }
.page-wrap { flex: 1 0 auto; }
.site-footer { border-top: 1px solid rgba(255,255,255,.06); background: rgba(14,20,28,.7); backdrop-filter: blur(6px); }
.site-footer small { letter-spacing: .02em; }
.icon-btn { width: 36px; height: 36px; border-radius: 50% !important; display: inline-flex; align-items: center; justify-content: center; }
.icon-btn i { font-size: 1rem; line-height: 1; }

/* Responsive wrap for card action buttons */
.actions-wrap { flex-wrap: wrap; }
@media (max-width: 400px) {
	.actions-wrap { gap: .4rem !important; }
	.actions-wrap .icon-btn { width: 32px; height: 32px; }
	.actions-wrap .btn.btn-sm { padding: .25rem .4rem; font-size: .8rem; }
}

/* Navbar brand logo */
.brand-logo { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; }

/* Fix for fixed-top navbar spacing */
body.nav-fixed { padding-top: 64px; }

/* BattleMetrics metrics layout */
.metrics-grid { display: grid; grid-template-columns: 1fr; gap: .5rem; }
@media (min-width: 576px) { .metrics-grid { grid-template-columns: 1fr 1fr; } }
.metric-item { display: flex; align-items: center; justify-content: space-between; padding: .5rem .6rem; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; }
.metric-item .left { display: flex; align-items: center; gap: .4rem; color: var(--bs-secondary-color); font-size: .875rem; }
.metric-item .value { font-weight: 400; color: var(--bs-secondary-color); font-size: .875rem; }

/* Custom markdown <t>...</t> block styling */
.md-t { margin: 1rem 0; padding: .875rem 1rem; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.md-t > :first-child { margin-top: 0; }
.md-t > :last-child { margin-bottom: 0; }

/* Hardware badges */
.hw-dot { width:14px; height:14px; border-radius:50%; display:inline-block; box-shadow: inset 0 0 0 2px rgba(255,255,255,.25); }
.hw-dot-shared { background: linear-gradient(135deg, #9db3ff, #7fd1ff); }
.hw-dot-dedicated { background: linear-gradient(135deg, #ffd280, #ff9b73); }
.hw-dot-unknown { background: linear-gradient(135deg, #cfcfcf, #9e9e9e); }

/* Ensure Bootstrap modals are hidden by default; show only when toggled */
.modal { display: none !important; }
.modal.show { display: block !important; }

/* Partner card image: fixed yet responsive width */
.partner-logo {
	/* Keep it small by default but never overflow on mobile */
	width: min(320px, 50%);
	height: auto;
}

/* Unified card surface for intro/server/partner boxes */
.surface-card {
	background: rgba(255,255,255,.04) !important;
	border: 1px solid rgba(255,255,255,.08) !important;
}

/* Filter toolbar styling */
.filter-toolbar { gap: .5rem; }
.filter-btn {
	min-width: 100px;
	border-radius: 999px;
	border-color: rgba(255,255,255,.18) !important;
	color: var(--bs-body-color);
	background: rgba(255,255,255,.03);
}
.btn-check:checked + .filter-btn {
	background: rgba(255,255,255,.08);
	border-color: rgba(255,255,255,.28) !important;
	color: var(--bs-body-color);
}
.filter-btn:hover { filter: brightness(1.05); }

/* Subtle fading divider (centered) */
.fade-divider {
	height: 1px;
	width: min(520px, 100%);
	margin: 8px auto 12px;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 50%, rgba(255,255,255,0) 100%);
}

/* Top navbar icon filters */
.filter-icon-btn {
	--size: 34px;
	width: var(--size);
	height: var(--size);
	border-radius: 50% !important;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-color: rgba(255,255,255,.2) !important;
	background: rgba(255,255,255,.02);
	color: rgba(255,255,255,.4);
}
.filter-icon-btn i { font-size: 1rem; line-height: 1; color: inherit; }
.btn-check:checked + .filter-icon-btn {
	background: rgba(255,255,255,.14);
	border-color: rgba(255,255,255,.38) !important;
	color: rgba(255,255,255,.88);
	box-shadow: inset 0 0 0 2px rgba(0,0,0,.12), 0 0 0 1px rgba(255,255,255,.20);
}
.filter-icon-btn:hover { color: rgba(255,255,255,.75); }

/* Link styling: use normal text color by default; underline on hover for clarity */
a, a:visited { color: var(--bs-body-color); }
a:hover, a:focus { color: var(--bs-body-color); text-decoration: underline; }

/* Keep the very top site title (navbar brand) clean: no underline on hover/focus */
.navbar .navbar-brand:hover,
.navbar .navbar-brand:focus {
	text-decoration: none;
}

/* Form styling enhancements */
.form-section-nav {
	position: relative;
}
.form-section-nav .nav-link {
	border-radius: 999px;
	padding: .3rem .75rem;
}
.form-section-nav .nav-link:hover { filter: brightness(1.1); }
.form-card .section-header {
	display: flex; align-items: center; justify-content: space-between;
	margin-bottom: .6rem;
}
.form-card .section-title {
	margin: 0; letter-spacing: .04em; font-weight: 600; opacity: .85;
}
.form-card .section-subtext { color: var(--bs-secondary-color); font-size: .875rem; }
.option-group {
	border: 1px solid rgba(255,255,255,.08);
	background: rgba(255,255,255,.03);
	border-radius: 10px; padding: .75rem .9rem; margin-top: .25rem;
}
.option-group .group-title { font-size: .9rem; color: var(--bs-secondary-color); margin-bottom: .25rem; }
.form-divider { height: 1px; background: rgba(255,255,255,.08); margin: .5rem 0 .75rem; }
.badge-md { font-size: .7rem; font-weight: 500; letter-spacing: .03em; }

/* Server images carousel */
.server-carousel { border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.15); position: relative; }
.server-carousel .carousel-inner { max-height: 520px; }
.server-carousel .carousel-img { width: 100%; height: auto; display: block; object-fit: contain; background: rgba(0,0,0,.25); }

/* More visible controls and indicators */
.server-carousel .carousel-control-prev, .server-carousel .carousel-control-next {
	width: 12%;
}
.server-carousel .carousel-control-prev .carousel-control-prev-icon,
.server-carousel .carousel-control-next .carousel-control-next-icon {
	filter: invert(1) drop-shadow(0 2px 4px rgba(0,0,0,.5));
	background-color: rgba(0,0,0,.35);
	border-radius: 999px;
	padding: 12px;
}
.server-carousel .carousel-indicators [data-bs-target] {
	width: 10px; height: 10px; border-radius: 50%;
	background-color: rgba(255,255,255,.75);
	box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.server-carousel .carousel-indicators .active { background-color: #fff; }

/* Peek neighbors: show part of previous/next slides on md+ screens */
@media (min-width: 768px) {
	.server-carousel.peek .carousel-inner {
		overflow: visible;
	}
	.server-carousel.peek .carousel-item {
		transition: transform .6s ease;
	}
	.server-carousel.peek .carousel-item > img {
		/* add side padding so neighbors are visible */
		padding: 0 15%;
	}
}
@media (min-width: 576px) { .server-carousel .carousel-inner { max-height: 560px; } }
@media (min-width: 992px) { .server-carousel .carousel-inner { max-height: 640px; } }

/* Prefer-reduced-motion: stop autoplay visually (JS also disables ride) */
@media (prefers-reduced-motion: reduce) {
	.carousel, .carousel * { transition: none !important; animation: none !important; }
}

/* Thumbnail strip below carousel */
.carousel-thumbs {
	display: flex; gap: .5rem; align-items: center; justify-content: center;
	overflow-x: auto; padding: .25rem; margin-bottom: .75rem;
}
.carousel-thumbs .thumb {
	border: 1px solid rgba(255,255,255,.25); border-radius: 8px; padding: 0;
	background: rgba(0,0,0,.2); cursor: pointer;
}
.carousel-thumbs .thumb.active { outline: 2px solid #fff; outline-offset: 2px; }
.carousel-thumbs .thumb img {
	display: block; width: 72px; height: 48px; object-fit: cover; border-radius: 8px;
}
@media (min-width: 576px) { .carousel-thumbs .thumb img { width: 96px; height: 64px; } }

/* Sticky sidebar for details (BattleMetrics card) */
.sticky-sidebar { position: sticky; top: calc(64px + 12px); z-index: 2; }
@media (max-width: 991.98px) { /* disable sticky on < lg */
	.sticky-sidebar { position: static; }
}
/* Sticky title (left column) */
.sticky-title { position: sticky; top: calc(64px + 8px); z-index: 3; }
@media (max-width: 991.98px) {
	.sticky-title { position: static; }
}

/* Random server button styling: slightly distinct from filter icons */
.btn-random-server {
	--bs-btn-color: var(--bs-info);
	--bs-btn-border-color: rgba(13,202,240,.35);
	--bs-btn-hover-bg: rgba(13,202,240,.12);
	--bs-btn-hover-border-color: rgba(13,202,240,.6);
	/* match filter icon size */
	--size: 34px;
	width: var(--size);
	height: var(--size);
	border-radius: 50% !important;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.nav-filters .btn-random-server { margin-left: .25rem; }