/**
 * Game gallery filter pills — ported 1:1 from Flight Log Shorts Hub's
 * filter-marquee (which was itself ported from Video Hub), just renamed
 * under a tkge- prefix and pointed at this theme's own design tokens
 * instead of Shorts' --flvs- bridge. Behavior and look match both hubs
 * exactly: a plain wrapped pill row by default, upgraded by
 * game-filter-marquee.js to an auto-scrolling strip (with prev/next
 * arrows once tapped) only when the pills don't fit on one line.
 *
 * Colors use the same --tktt-* / --wp--preset--color--* fallback
 * pattern as the theme's own motif.css, so this plugin never needs the
 * theme active to degrade gracefully, but matches it exactly when it is.
 */

/* ---------- Game hub page shell ----------
   Applied to the <main> wrapper on the Game Portal (page-game-portal.html)
   and single Game (single-game.html) templates, alongside an alignfull +
   night-flight-background block — mirrors Flight Log Video Hub's own
   .flv-video-hub treatment exactly (see that plugin's style.css) so both
   hubs read as the same dark, edge-to-edge "hub" page rather than one
   looking like a plain boxed content page. No forced background here on
   purpose, same reasoning as flv-video-hub: the actual night-flight color
   comes from the block's own backgroundColor attribute in the template;
   this class just guards against anything else painting over it. */
body.tkge-game-hub,
.tkge-game-hub {
	background: none;
}

.tkge-game-hub {
	overflow-wrap: break-word;
	word-break: break-word;
}

.tkge-section-heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 26px;
	color: var( --tktt-text-primary, var(--wp--preset--color--paper) );
	margin: 0;
}

/* Heading and its filter pills share one line — same pairing as Flight
   Log Video Hub's .flv-grid-header — wrapping to its own line on narrow
   screens. */
.tkge-grid-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px 20px;
	margin-bottom: 24px;
}

.tkge-filter-marquee-wrap {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	flex: 1 1 240px;
}

.tkge-filter-marquee {
	overflow: visible;
	flex: 1 1 auto;
	min-width: 0;
}

.tkge-filter-track {
	display: flex;
	width: auto;
}

.tkge-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tkge-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border: 1px solid var( --tktt-border, var(--wp--preset--color--steel) );
	border-radius: 999px;
	color: var( --tktt-text-muted, var(--wp--preset--color--paper-dim) );
	background: var( --tktt-bg-surface, var(--wp--preset--color--surface) );
	font-family: var(--wp--preset--font-family--spec-mono);
	font-size: 12px;
	/* Uppercase + tracked letter-spacing matches the theme's own eyebrow
	   labels (e.g. the "Play"/"Portal" tags used elsewhere in
	   trikdang-flex) — keeps category names visually consistent with the
	   rest of the site regardless of how they were typed in the admin. */
	text-transform: uppercase;
	letter-spacing: 0.06em;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.tkge-pill__icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
}

.tkge-pill:hover {
	color: var( --tktt-text-primary, var(--wp--preset--color--paper) );
}

.tkge-pill.is-active {
	background: var( --tktt-text-primary, var(--wp--preset--color--paper) );
	color: var( --tktt-bg-primary, var(--wp--preset--color--night-flight) );
	border-color: var( --tktt-text-primary, var(--wp--preset--color--paper) );
}

/* Only applied by JS once it's confirmed the pills don't fit on one line
   at the current width — see game-filter-marquee.js. */
.tkge-filter-marquee.is-scrolling {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
	mask-image: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.tkge-filter-marquee.is-scrolling .tkge-filter-track {
	width: max-content;
	animation: tkge-marquee 75s linear infinite;
}

.tkge-filter-marquee.is-scrolling .tkge-filter-pills {
	flex-wrap: nowrap;
	padding-right: 8px;
}

.tkge-filter-marquee.is-scrolling:hover .tkge-filter-track,
.tkge-filter-marquee.is-scrolling .tkge-filter-track:focus-within {
	animation-play-state: paused;
}

@keyframes tkge-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.tkge-filter-track {
		animation: none;
	}
}

/* Once tapped/clicked, the row freezes for good and becomes a normal
   horizontally-swipeable strip using the prev/next arrow buttons
   instead of a native scrollbar. */
.tkge-filter-marquee.is-stopped {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	-webkit-mask-image: none;
	mask-image: none;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.tkge-filter-marquee.is-stopped::-webkit-scrollbar {
	display: none;
	height: 0;
}

.tkge-filter-marquee.is-stopped .tkge-filter-track {
	animation: none;
	transform: none;
}

.tkge-filter-marquee.is-stopped [aria-hidden="true"] {
	display: none;
}

.tkge-marquee-arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	background: var( --tktt-bg-surface, var(--wp--preset--color--surface) );
	color: var( --tktt-text-primary, var(--wp--preset--color--paper) );
	border: 1px solid var( --tktt-border, var(--wp--preset--color--steel) );
	border-radius: 999px;
	cursor: pointer;
}

.tkge-marquee-arrow[hidden] {
	display: none;
}

.tkge-marquee-arrow:hover {
	border-color: var( --tktt-accent, var(--wp--preset--color--signature-red) );
	color: var( --tktt-accent, var(--wp--preset--color--signature-red) );
}

.tkge-empty-state {
	color: var( --tktt-text-muted, var(--wp--preset--color--paper-dim) );
	grid-column: 1 / -1;
}