/**
 * Single game page.
 */

.wpx-game__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wpx-space-3);
	margin-block-end: var(--wpx-space-5);
}

.wpx-game__title { margin: 0; }

.wpx-game__header .wpx-badges { position: static; }

.wpx-game__lead {
	display: grid;
	gap: var(--wpx-space-5);
	grid-template-columns: 1fr;
	margin-block-end: var(--wpx-space-6);
}

@media (min-width: 640px) {
	.wpx-game__lead { grid-template-columns: 240px minmax(0, 1fr); }
}

.wpx-game__cover img {
	width: 100%;
	border-radius: var(--wpx-radius);
	box-shadow: var(--wpx-shadow);
}

.wpx-game__excerpt {
	font-size: var(--wpx-text-lg);
	color: var(--wpx-text-muted);
}

/* --- Specs -------------------------------------------------------------- */

.wpx-specs {
	margin: 0 0 var(--wpx-space-5);
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius);
	overflow: hidden;
}

.wpx-specs__row {
	display: grid;
	grid-template-columns: 130px minmax(0, 1fr);
	gap: var(--wpx-space-3);
	padding: var(--wpx-space-2) var(--wpx-space-3);
	background: var(--wpx-surface-2);
	font-size: var(--wpx-text-sm);
}

.wpx-specs__row:nth-child(even) { background: var(--wpx-surface-1); }

.wpx-specs dt { color: var(--wpx-text-dim); }
.wpx-specs dd { margin: 0; color: var(--wpx-text); }

.wpx-stores {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wpx-space-2);
}

/* --- Screenshots -------------------------------------------------------- */

.wpx-screenshots__grid {
	display: grid;
	gap: var(--wpx-space-3);
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

.wpx-screenshot {
	display: block;
	overflow: hidden;
	border-radius: var(--wpx-radius);
	border: 1px solid var(--wpx-border);
	transition: transform var(--wpx-transition), border-color var(--wpx-transition);
}

.wpx-screenshot:hover {
	transform: translateY(-2px);
	border-color: var(--wpx-accent);
}

.wpx-screenshot img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	transition: transform var(--wpx-duration) var(--wpx-ease-out);
}

.wpx-screenshot:hover img { transform: scale(1.05); }

/* --- Requirements ------------------------------------------------------- */

.wpx-req-table {
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius);
	overflow: hidden;
	font-size: var(--wpx-text-sm);
}

.wpx-req-table th,
.wpx-req-table td {
	padding: var(--wpx-space-3);
	text-align: start;
	border-block-end: 1px solid var(--wpx-border);
	vertical-align: top;
}

.wpx-req-table thead th {
	background: var(--wpx-surface-3);
	font-size: var(--wpx-text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wpx-text-muted);
}

.wpx-req-table tbody th { color: var(--wpx-text-dim); font-weight: var(--wpx-weight-normal); width: 120px; }
.wpx-req-table tbody tr:last-child th,
.wpx-req-table tbody tr:last-child td { border-block-end: 0; }

/* Stack the table into labelled rows on narrow screens rather than letting
   it scroll sideways. */
@media (max-width: 600px) {
	.wpx-req-table thead { display: none; }
	.wpx-req-table tr { display: block; border-block-end: 1px solid var(--wpx-border); }
	.wpx-req-table th, .wpx-req-table td { display: block; border: 0; padding-block: var(--wpx-space-1); }
	.wpx-req-table tbody th { width: auto; font-weight: var(--wpx-weight-medium); color: var(--wpx-text); padding-block-start: var(--wpx-space-3); }
	.wpx-req-table td::before { content: attr(data-label) ": "; color: var(--wpx-text-dim); }
}

/* --- Downloads ---------------------------------------------------------- */

.wpx-downloads__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wpx-space-2); }

.wpx-download {
	display: flex;
	align-items: center;
	gap: var(--wpx-space-3);
	padding: var(--wpx-space-3) var(--wpx-space-4);
	background: var(--wpx-surface-2);
	border: 1px solid var(--wpx-border);
	border-radius: var(--wpx-radius);
	color: var(--wpx-text);
	transition: background var(--wpx-transition), border-color var(--wpx-transition), transform var(--wpx-transition);
}

.wpx-download:hover {
	background: var(--wpx-surface-3);
	border-color: var(--wpx-accent);
	color: var(--wpx-text);
	transform: translateX(3px);
}

.wpx-download__name { font-weight: var(--wpx-weight-medium); }
.wpx-download__size { margin-inline-start: auto; font-size: var(--wpx-text-sm); color: var(--wpx-text-dim); }

/* --- Lightbox ----------------------------------------------------------- */

.wpx-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--wpx-z-modal);
	display: grid;
	place-items: center;
	padding: var(--wpx-space-4);
	background: rgb(0 0 0 / 0.9);
	animation: wpx-fade var(--wpx-duration) var(--wpx-ease);
}

@keyframes wpx-fade { from { opacity: 0; } to { opacity: 1; } }

.wpx-lightbox img {
	max-width: 100%;
	max-height: 85vh;
	border-radius: var(--wpx-radius);
	box-shadow: var(--wpx-shadow-lg);
}

.wpx-lightbox__close,
.wpx-lightbox__nav {
	position: absolute;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: rgb(255 255 255 / 0.1);
	border: 0;
	border-radius: var(--wpx-radius-pill);
	color: #fff;
	font-size: 22px;
	cursor: pointer;
	transition: background var(--wpx-transition);
}

.wpx-lightbox__close:hover,
.wpx-lightbox__nav:hover { background: rgb(255 255 255 / 0.22); }

.wpx-lightbox__close { top: var(--wpx-space-4); inset-inline-end: var(--wpx-space-4); }
.wpx-lightbox__nav--prev { inset-inline-start: var(--wpx-space-4); }
.wpx-lightbox__nav--next { inset-inline-end: var(--wpx-space-4); }

.wpx-lightbox__counter {
	position: absolute;
	bottom: var(--wpx-space-4);
	color: rgb(255 255 255 / 0.7);
	font-size: var(--wpx-text-sm);
}