/* 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: none;
	flex-wrap: wrap;
}

/* Unselected tabs sit grey; the selected one goes green and merges into the pane below: */
.zone-tabs .nav-link {
	color: #cfcfcf;
	font-family: 'Oswald', sans-serif;
	font-weight: 700;
	font-size: 1.4rem;
	background: #3f3f3f;
	border: none;
	border-radius: 8px 8px 0 0;
	margin-right: 10px;
	padding: 0.25rem 1.15rem;
}

.zone-tabs .nav-link:hover {
	color: #ffffff;
	background: #4f4f4f;
}

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

.zone-tabs .nav-link.active:hover {
	background: #198754;
}

.zone-tab-content {
	background: #198754;
	padding: 1rem;
	border-radius: 0 8px 8px 8px;
}

/* One-line explainer at the top of each pane, above the capsules: */
.zone-rail-blurb {
	color: rgba(255, 255, 255, 0.9);
	font-size: 0.95rem;
	margin-bottom: 1rem;
}

.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; }
}

/* --- Bottom CTA cards --------------------------------------------------------
   Same card language as the homepage: a link that scales on hover, a heavy
   Archivo/Anton headline, and one oversized corner. Restated here rather than
   shared because home.html keeps its card CSS inline in a <style> block. */
.zone-cta-link {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease;
}

.zone-cta-link:hover {
	transform: scale(1.02);
	color: inherit;
}

/* Guide card — the homepage Best New Games red, corner mirrored to the top left: */
.zone-cta-guide {
	position: relative;
	border-radius: 66px 22px 22px 22px;
	background: repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.08) 0 7px, transparent 7px 15px), #ea2319;
	color: #F4EEE1;
}

.zone-cta-guide h2 {
	margin: 0;
	color: #F4EEE1;
	font-family: 'Archivo', sans-serif;
	font-variation-settings: 'wdth' 93.75, 'wght' 900;
	font-size: 34px;
	line-height: 0.85;
	letter-spacing: -0.04em;
	text-transform: uppercase;
	/* Tags run long ("Intentionally Awkward Controls") — let them break: */
	overflow-wrap: anywhere;
}

/* Black-filled lead-in with the cream stroke kept around it: */
.zone-cta-ink {
	color: #131114;
	-webkit-text-stroke: 2px #F4EEE1;
	text-shadow: none;
}

/* Power search card — the homepage's cream Power Search tool card: */
.zone-cta-search {
	border-radius: 22px 22px 66px 22px;
	background: #F4EEE1;
	color: #131114;
}

.zone-cta-search h2 {
	margin: 0;
	color: #131114;
	font-family: 'Anton', sans-serif;
	font-weight: 400;
	font-size: 40px;
	/* Headline wraps to several lines here, so it gets room the homepage's one-liner doesn't need: */
	line-height: 1;
	letter-spacing: 0.005em;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* Inherits the h2's Anton, hollowed out — a span, so it beats `.zone-cta-search h2` on colour: */
.zone-cta-search-outline {
	color: transparent;
	-webkit-text-stroke: 2px #131114;
	text-shadow: none;
}

/* Mono eyebrow rail, lifted from the homepage tool cards: */
.zone-cta-eyebrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-family: 'IBM Plex Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #131114;
}

.zone-cta-rule {
	flex: 1;
	height: 1px;
	margin: 0 14px;
	background: #131114;
	opacity: 0.4;
}

.zone-cta-ticks {
	display: block;
	width: 40px;
	height: 14px;
	background: repeating-linear-gradient(90deg, #131114 0 2px, transparent 2px 4px, #131114 4px 7px, transparent 7px 9px);
}

/* --- Takeover handoff card ---------------------------------------------------
   The whole body of a taken-over zone (see views_zones.zone_takeover). Reuses the
   homepage Game Zones card exactly — same pink, same dot grid, same oversized
   bottom-left corner — so the handoff reads as ours rather than as an ad. */
.zone-takeover-lead {
	font-size: 1.15rem;
	margin-bottom: 1.25rem;
}

.zone-takeover-btn {
	position: relative;
	border-radius: 22px 22px 66px 22px;
	background: radial-gradient(rgba(255, 255, 255, 0.18) 1.19px, transparent 1.26px) 0 0/10.5px 10.5px, #C8518F;
	color: #131114;
	text-decoration: none;
	transition: transform 0.15s ease;
}

.zone-takeover-btn:hover {
	transform: scale(1.02);
	color: #131114;
}

/* The homepage's zones-title-light treatment — cream on pink over hard black: */
.zone-takeover-btn h2 {
	margin: 0 0 0.5rem;
	color: #F4EEE1;
	font-family: 'Archivo', sans-serif;
	font-variation-settings: 'wdth' 125, 'wght' 900;
	font-size: 54px;
	line-height: 0.85;
	letter-spacing: -0.05em;
	text-transform: uppercase;
	text-shadow: 4px 5px 0 #131114;
	overflow-wrap: anywhere;
}

/* Dark ink for the small line, so it reads against the pink without competing: */
.zone-takeover-btn p {
	color: #131114;
	font-weight: 700;
}

@media (max-width: 576px) {
	.zone-takeover-btn h2 { font-size: 38px; }
}