/**
 * OpenStation — Games hub window styles (Steam-library layout).
 *
 * Scoped to `.desktop-mode-games` so the rules can't leak into
 * other windows. Layout: a compact game grid across the top; the
 * selected game's detail panel (hero + scoreboard + challenges)
 * fills the rest and scrolls.
 */

.desktop-mode-games {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	background: var( --os-ui-surface, #fff );
	color: var( --os-ui-fg, #1d2327 );
}

.os-games__library {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 14px;
	gap: 14px;
}

/* ------------------------------------------------------------------
 * Game grid (compact tiles, selection = which detail shows below)
 * ---------------------------------------------------------------- */

.os-games__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-content: start;
	flex-shrink: 0;
}

/* Empty state (no games registered): centered in the window body
   instead of hugging the grid's top-left corner. */
.os-games__grid:has( os-empty-state ) {
	flex: 1;
	align-content: center;
	justify-content: center;
}

.os-games__tile {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px 8px 10px;
	border: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) );
	border-radius: 10px;
	background: var( --os-ui-surface, #fff );
	color: inherit;
	cursor: pointer;
	text-align: start;
	transition: box-shadow 0.12s ease, border-color 0.12s ease;
}

.os-games__tile:hover,
.os-games__tile:focus-visible {
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.12 );
}

.os-games__tile--selected {
	border-color: var( --os-ui-accent, #2271b1 );
	box-shadow: inset 0 0 0 1px var( --os-ui-accent, #2271b1 );
}

.os-games__tile-visual {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
}

.os-games__tile-visual .os-games__icon-img {
	max-width: 36px;
	max-height: 36px;
}

.os-games__tile-visual .os-games__icon-dashicon {
	font-size: 28px;
	width: 28px;
	height: 28px;
}

.os-games__tile-title {
	font-weight: 600;
	font-size: 13px;
}

/* ------------------------------------------------------------------
 * Detail panel — hero row + sections
 * ---------------------------------------------------------------- */

.os-games__detail {
	display: flex;
	flex-direction: column;
	gap: 18px;
	border-top: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) );
	padding-block-start: 14px;
}

.os-games__detail[hidden] {
	display: none;
}

.os-games__hero {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px;
	border: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) );
	border-radius: 12px;
	background: var( --os-ui-surface-elevated, #f6f7f7 );
}

.os-games__hero-visual {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	flex-shrink: 0;
}

.os-games__hero-visual .os-games__icon-img {
	max-width: 72px;
	max-height: 72px;
}

.os-games__hero-visual .os-games__icon-dashicon {
	font-size: 56px;
	width: 56px;
	height: 56px;
}

.os-games__hero-info {
	flex: 1;
	min-width: 0;
}

.os-games__hero-title {
	margin: 0 0 4px;
	font-size: 20px;
	line-height: 1.2;
}

.os-games__hero-desc {
	margin: 0;
	color: var( --os-ui-fg-muted, #646970 );
	font-size: 13px;
	max-width: 60ch;
}

.os-games__hero-playtime {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 24px;
	margin-block-start: 10px;
}

.os-games__playtime-stat {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.os-games__playtime-label {
	color: var( --os-ui-fg-muted, #646970 );
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.os-games__playtime-value {
	font-size: 14px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.os-games__hero-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.os-games__section {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.os-games__section-heading {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --os-ui-fg-muted, #646970 );
}

/* ------------------------------------------------------------------
 * Scoreboard
 * ---------------------------------------------------------------- */

.os-games__scoreboard-table {
	max-height: 340px;
	overflow: auto;
	border: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) );
	border-radius: 10px;
}

.os-games__scoreboard-empty {
	padding: 24px;
	text-align: center;
	color: var( --os-ui-fg-muted, #646970 );
}

.os-games__pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.os-games__pager-label {
	font-variant-numeric: tabular-nums;
	color: var( --os-ui-fg-muted, #646970 );
}

/* ------------------------------------------------------------------
 * Challenges
 * ---------------------------------------------------------------- */

.os-games__challenge-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.os-games__challenge {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) );
	border-radius: 10px;
}

.os-games__challenge--pending {
	border-inline-start: 3px solid var( --os-ui-accent, #2271b1 );
}

.os-games__challenge-main {
	flex: 1;
	min-width: 0;
}

.os-games__challenge-main p {
	margin: 0 0 2px;
}

.os-games__challenge-main os-relative-time {
	font-size: 12px;
	color: var( --os-ui-fg-muted, #646970 );
}

.os-games__challenge-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ------------------------------------------------------------------
 * Send-challenge dialog
 * ---------------------------------------------------------------- */

.os-games__challenge-dialog {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 280px;
}

.os-games__challenge-summary {
	margin: 0;
}

.os-games__challenge-picked {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid var( --os-ui-border, rgba( 0, 0, 0, 0.08 ) );
	border-radius: 8px;
}

.os-games__challenge-footer {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}