/* Zone landing pages (/z/<tag>/). Capsules keep their own game-capsule.css;
   this file styles the header, hero spotlight, rail headings, and staff readout. */

.zone-title {
	color: #ffffff;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 2.6rem;
}

.zone-blurb {
	color: #e6e6e6;
	max-width: 640px;
	font-size: 1.05rem;
	line-height: 1.5;
}

/* Mosaic wall: a grid of the newest well-loved games, each tile its Steam capsule. */
.zone-mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0.75rem;
}

.zone-mosaic-tile {
	position: relative;
	display: block;
	aspect-ratio: 460 / 215;
	background-size: cover;
	background-position: center;
	border-radius: 0.5rem;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.zone-mosaic-tile:hover {
	transform: scale(1.03);
	box-shadow: 0 0 22px rgba(0, 0, 0, 0.95);
	z-index: 2;
}

.zone-mosaic-score {
	position: absolute;
	top: 0.4rem;
	right: 0.4rem;
	background: rgba(25, 135, 84, 0.92);
	color: #ffffff;
	font-size: 0.75rem;
	font-weight: 700;
	padding: 0.1rem 0.4rem;
	border-radius: 0.3rem;
}

@media (max-width: 991px) {
	.zone-mosaic { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575px) {
	.zone-mosaic { grid-template-columns: repeat(2, 1fr); }
}

/* Underline-style tabs, readable on the dark zone background. */
.zone-tabs {
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	flex-wrap: wrap;
}

.zone-tabs .nav-link {
	color: #cfcfcf;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 1.4rem;
	background: transparent;
	border: none;
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	padding: 0.5rem 1.15rem;
}

.zone-tabs .nav-link:hover {
	color: #ffffff;
	border-bottom-color: rgba(255, 255, 255, 0.3);
}

.zone-tabs .nav-link.active {
	color: #ffffff;
	background: transparent;
	border-bottom-color: #198754;
}

.zone-empty {
	color: #dddddd;
	padding: 3rem 0;
}

/* Guide pages: ranked capsule badge + "In this game, you can…" highlights. */
.capsule-rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.9rem;
	height: 1.9rem;
	padding: 0 0.4rem;
	margin-right: 0.5rem;
	background: #198754;
	color: #ffffff;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	border-radius: 999px;
	vertical-align: middle;
}

.capsule-highlights {
	color: #2a2a2a;
}

.capsule-highlights-label {
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 0.25rem;
}

.capsule-highlights-list {
	margin: 0;
	padding-left: 1.2rem;
	font-size: 0.9rem;
	line-height: 1.4;
}

.capsule-highlights-list li {
	margin-bottom: 0.15rem;
}

.zone-staff-timings {
	margin-top: 3rem;
	padding: 1rem;
	background: rgba(0, 0, 0, 0.5);
	color: #dddddd;
	border: 1px dashed #666666;
	border-radius: 0.5rem;
	font-family: monospace;
	font-size: 0.85rem;
}

.zone-staff-timings table {
	margin: 0.5rem 0;
}

.zone-staff-timings td {
	padding: 0.1rem 0.75rem 0.1rem 0;
}

.zone-staff-gen-time {
	margin-top: 1rem;
	padding: 0.5rem 1rem;
	background: rgba(0, 0, 0, 0.5);
	color: #dddddd;
	border: 1px dashed #666666;
	border-radius: 0.5rem;
	font-family: monospace;
	font-size: 0.85rem;
}

@media (max-width: 576px) {
	.zone-title { font-size: 2rem; }
}