/* GameHub — a warm, desktop-inspired 1990s Macintosh skin for Bootstrap 5. */
:root {
	--mac-paper: #f5f4ed;
	--mac-white: #fff;
	--mac-ink: #171717;
	--mac-gray: #d7d7d1;
	--mac-mid: #a3a39d;
	--mac-dark: #555550;
	--mac-accent: #315f9e;
	--mac-line: #222;
	--bs-body-color: var(--mac-ink);
	--bs-body-bg: var(--mac-paper);
	--bs-border-color: var(--mac-line);
	--bs-primary: var(--mac-accent);
	--bs-link-color: #174f91;
	--bs-link-hover-color: #092e5b;
	--bs-border-radius: 0;
	--bs-border-radius-sm: 0;
	--bs-border-radius-lg: 0;
	--bs-border-radius-xl: 0;
	--bs-border-radius-xxl: 0;
	--bs-btn-border-radius: 0;
	--bs-card-border-radius: 0;
}

* { box-sizing: border-box; }

body {
	min-height: 100vh;
	background-color: var(--mac-paper);
	background-image: radial-gradient(#d7d6ce 0.65px, transparent 0.65px);
	background-size: 4px 4px;
	font-family: Geneva, "Lucida Grande", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}

a { text-decoration-thickness: 1px; text-underline-offset: 2px; }

.navbar {
	min-height: 42px;
	background: var(--mac-white) !important;
	border-bottom: 2px solid var(--mac-line);
	box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}

.navbar-brand { 
	color: var(--mac-ink) !important; 
	font-weight: 700; 
	letter-spacing: -.04em; 
}

.nav-link { 
	color: var(--mac-ink) !important; 
	padding: .55rem .8rem !important; 
}

.nav-link:hover, 
.nav-link.active { 
	background: var(--mac-ink); 
	color: var(--mac-white) !important; 
}

.card {
	background: var(--mac-paper);
	border: 1px solid var(--mac-line);
	box-shadow: 3px 3px 0 rgba(0, 0, 0, .28);
}

.card-header {
	position: relative;
	min-height: 31px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .2rem 2.75rem;
	border-bottom: 1px solid var(--mac-line);
	background: repeating-linear-gradient(to bottom, #fff 0, #fff 1px, #e3e3dc 1px, #e3e3dc 2px);
	font-weight: 700;
	text-align: center;
}

.card-header::before, 
.card-header::after { 
	position: absolute; 
	display: block;
	top: 50%;
	z-index: 1;
	width: 13px; 
	height: 13px; 
	border: 1px solid var(--mac-line); 
	background: #fff;
	content: ""; 
	transform: translateY(-50%); 
}

.card-header::before { 
	left: 9px; 
}

.card-header::after { 
	right: 9px; 
}

.card-body { 
	padding: clamp(1rem, 3vw, 2rem); 
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 { 
	font-weight: 700; 
	letter-spacing: -.045em; 
}

.btn {
	--bs-btn-border-radius: 0;
	min-height: 38px;
	padding: .45rem 1rem;
	border: 1px solid var(--mac-line);
	box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 var(--mac-mid), 1px 1px 0 rgba(0,0,0,.15);
	font-weight: 700;
}

.btn:active { 
	box-shadow: inset 1px 1px 2px rgba(0,0,0,.3); 
	transform: translate(1px, 1px); 
}

.btn-primary { 
	--bs-btn-color: #fff; 
	--bs-btn-bg: var(--mac-accent); 
	--bs-btn-border-color: var(--mac-line); 
	--bs-btn-hover-bg: #244b7e; 
	--bs-btn-hover-border-color: var(--mac-line); 
}

.btn-light, 
.btn-outline-dark { 
	--bs-btn-color: var(--mac-ink); 
	--bs-btn-bg: var(--mac-gray); 
	--bs-btn-border-color: var(--mac-line); 
	--bs-btn-hover-bg: #c5c5be; 
	--bs-btn-hover-color: var(--mac-ink); 
	--bs-btn-hover-border-color: var(--mac-line); 
}


.form-control, .form-select {
	min-height: 42px;
	border: 1px solid var(--mac-line);
	border-radius: 0;
	background-color: #fff;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,.14);
}
.form-control:focus, 
.form-select:focus { 
	border-color: var(--mac-accent); 
	box-shadow: 0 0 0 2px rgba(49,95,158,.22), inset 1px 1px 2px rgba(0,0,0,.1);
 }

.input-group-text { 
	border: 1px solid var(--mac-line); 
	border-radius: 0; background: var(--mac-gray); 
}

.card { 
	height: 100%; border: 1px solid var(--mac-line); 
	border-radius: 0; background: var(--mac-white); 
	box-shadow: 2px 2px 0 rgba(0,0,0,.16); 
}

.card-img-top { 
	aspect-ratio: 16 / 10; border-bottom: 1px solid var(--mac-line); 
	object-fit: cover; image-rendering: auto; 
}

.card-body { 
	padding: 1rem; 
}

.card-title { 
	margin-bottom: .35rem; 
	font-size: 1.15rem; 
}

.badge { 
	border: 1px solid currentColor; 
	border-radius: 0; font-weight: 700; 
}

.badge.text-bg-light { 
	border-color: #777; 
	background: #eee !important; 
	color: var(--mac-ink) !important; 
}

.alert { 
	border: 1px solid var(--mac-line); 
	border-left-width: 5px; 
	border-radius: 0; 
	background: #fff; 
	color: var(--mac-ink); 
}

.alert-info { 
	border-left-color: var(--mac-accent); 
}

.list-group-item { 
	border-color: var(--mac-line); 
	border-radius: 0 !important; 
}

.dropdown-menu { 
	border: 1px solid var(--mac-line); 
	border-radius: 0; 
	box-shadow: 2px 2px 0 rgba(0,0,0,.2); 
}

.dropdown-item:active { 
	background: var(--mac-accent); 
}

.pagination { 
	--bs-pagination-border-radius: 0; 
	--bs-pagination-color: var(--mac-ink); 
	--bs-pagination-border-color: var(--mac-line); 
	--bs-pagination-hover-color: var(--mac-ink); 
	--bs-pagination-hover-bg: var(--mac-gray); 
	--bs-pagination-hover-border-color: var(--mac-line); 
	--bs-pagination-active-bg: var(--mac-accent); 
	--bs-pagination-active-border-color: var(--mac-line); 
}

.progress { 
	height: 14px; 
	border: 1px solid var(--mac-line); 
	border-radius: 0; 
	background: #fff; 
}

.progress-bar { 
	background-color: var(--mac-accent); 
}

hr { 
	border-color: var(--mac-line); 
	opacity: .35; 
}

.card-footer { 
	display: flex; 
	justify-content: space-between; 
	gap: 1rem; 
	padding: .45rem .75rem; 
	border-top: 1px solid var(--mac-line); 
	background: var(--mac-gray); 
	font-size: .78rem; 
}

@media (max-width: 575.98px) {
	.card-header { justify-content: flex-start; padding-left: 2.1rem; }
	.card-footer { flex-direction: column; gap: .15rem; }
}