/* =====================================================================
   SPX Core — frontend game info block.
   Everything is scoped under .spx-game-details so it can never affect
   any other element on the site. Colors intentionally use currentColor /
   transparency instead of new hard-coded values, so the block always
   matches whatever surface it's printed on (theme content surface, dark
   or light mode) without needing to know about the active theme.
   ===================================================================== */

.spx-game-details {
	margin-top: 32px;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.spx-section-title {
	font-size: 1.1em;
	margin: 0 0 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(127, 127, 127, .25);
}

/* --- Screenshots ----------------------------------------------------- */
.spx-shot-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
}
.spx-shot {
	display: block;
	border-radius: 8px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
.spx-shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .2s ease;
}
.spx-shot:hover img {
	transform: scale(1.04);
}

/* --- Trailer ----------------------------------------------------------- */
.spx-trailer-embed {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 8px;
}
.spx-trailer-embed iframe,
.spx-trailer-embed embed,
.spx-trailer-embed object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* --- Game Information table --------------------------------------------- */
.spx-meta-table {
	width: 100%;
	border-collapse: collapse;
}
.spx-meta-table td,
.spx-meta-table th {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid rgba(127, 127, 127, .15);
}
.spx-meta-table th[scope="row"] {
	width: 35%;
	opacity: .7;
	font-weight: 600;
	white-space: nowrap;
}
.spx-meta-table td { font-weight: 600; }
.spx-meta-row:last-child th,
.spx-meta-row:last-child td { border-bottom: 0; }

/* --- System requirements ------------------------------------------------ */
.spx-sysreq-table {
	width: 100%;
	border-collapse: collapse;
}
.spx-sysreq-table th,
.spx-sysreq-table td {
	padding: 8px 10px;
	text-align: left;
	border-bottom: 1px solid rgba(127, 127, 127, .15);
}
.spx-sysreq-table thead th {
	font-size: .75em;
	text-transform: uppercase;
	opacity: .6;
}
.spx-sysreq-table tbody th {
	font-weight: 600;
	white-space: nowrap;
}

/* --- Buttons (stores / trailer fallback) -------------------------------- */
.spx-btn-row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.spx-btn {
	display: inline-block;
	padding: 10px 18px;
	border-radius: 6px;
	border: 1px solid currentColor;
	text-decoration: none;
	font-weight: 600;
	font-size: .9em;
}
.spx-btn:hover { opacity: .85; }

/* --- Downloads ----------------------------------------------------------- */
.spx-download-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.spx-download-list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	padding: 10px 14px;
	border: 1px solid rgba(127, 127, 127, .2);
	border-radius: 6px;
}
.spx-download-size { opacity: .6; font-size: .85em; white-space: nowrap; }

/* --- Views --------------------------------------------------------------- */
.spx-views {
	margin: 0;
	font-size: .85em;
	opacity: .6;
}

/* --- Tablet ---------------------------------------------------------------- */
@media (max-width: 1024px) {
	.spx-shot-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
}

/* --- Mobile ---------------------------------------------------------------- */
@media (max-width: 600px) {
	.spx-game-details { gap: 22px; }
	.spx-shot-grid { grid-template-columns: repeat(2, 1fr); }
	.spx-meta-table th[scope="row"] { width: 45%; }
	.spx-sysreq-table { display: block; overflow-x: auto; white-space: nowrap; }
}