/**
 * Game Info lightbox — 4-zone layout (hero header, media carousel,
 * "About game", "How to play"), opened by the info-icon button on a
 * game card (see .game-card__info-btn in game-cards.css and
 * game-info-modal.js). Uses the same brand tokens as the rest of the
 * plugin (--wp--preset--color--*, spec-mono/display font families) so
 * it reads as one native TriKdanG surface rather than a bolted-on
 * generic modal.
 *
 * Markup (built at runtime by game-info-modal.js, cloning the
 * per-card <template> printed by tkge_render_game_card()):
 *
 *   .tkge-info-overlay
 *     .tkge-info-modal
 *       button.tkge-info-modal__close
 *       .tkge-info-modal__scroll         <- everything below lives here
 *         .tkge-info-modal__hero         (Zone 1)
 *         .tkge-info-modal__carousel-wrap (Zone 2)
 *         .tkge-info-zone--about         (Zone 3, from tkge_render_game_info_zones())
 *         .tkge-info-zone--how-to-play   (Zone 4, from tkge_render_game_info_zones())
 */

.tkge-info-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	background: rgba( 18, 19, 22, 0.72 );
	backdrop-filter: blur( 3px );
	opacity: 0;
	/* Closed by default: opacity: 0 alone still fully receives pointer
	   events (it's just invisible), which — since this overlay is
	   position: fixed + inset: 0 + a very high z-index, i.e. sitting on
	   top of the ENTIRE page — silently swallowed hover/click on
	   whatever was underneath it once built, even while "closed". This
	   is what made a 2nd/3rd card stop responding after the first
	   lightbox open/close: pointer-events: none here is the actual fix,
	   not just the opacity. */
	pointer-events: none;
	transition: opacity 0.18s ease;
}

.tkge-info-overlay.is-open {
	opacity: 1;
	pointer-events: auto;
}

.tkge-info-modal {
	position: relative;
	width: 100%;
	max-width: 640px;
	max-height: min( 88vh, 88dvh );
	display: flex;
	flex-direction: column;
	background: var( --wp--preset--color--night-flight, #121316 );
	color: var( --wp--preset--color--paper, #f3efe4 );
	border: 1px solid var( --wp--preset--color--steel, #8b9199 );
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.5 );
	transform: translateY( 12px ) scale( 0.98 );
	transition: transform 0.18s ease;
}

.tkge-info-overlay.is-open .tkge-info-modal {
	transform: translateY( 0 ) scale( 1 );
}

.tkge-info-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* color-mix() instead of a hardcoded rgba() approximation of "paper"
	   — this keeps the tint locked to the paper token itself, so if the
	   theme re-points --wp--preset--color--paper for light mode (as it
	   does for the modal's own bg/text just above), this translucent
	   overlay follows it instead of staying frozen at the dark-mode
	   value. Same fix applied to .tkge-info-modal__carousel-nav below. */
	background: color-mix( in srgb, var( --wp--preset--color--paper, #f3efe4 ) 10%, transparent );
	color: var( --wp--preset--color--paper, #f3efe4 );
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.tkge-info-modal__close:hover,
.tkge-info-modal__close:focus-visible {
	background: color-mix( in srgb, var( --wp--preset--color--paper, #f3efe4 ) 20%, transparent );
}

.tkge-info-modal__scroll {
	overflow-y: auto;
	padding: 28px 24px 32px;
	/* Keep the modal scrollable but hide the browser's default scrollbar
	   chrome — it clashed with the rest of this custom-styled surface. */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* legacy Edge */
}

.tkge-info-modal__scroll::-webkit-scrollbar {
	display: none; /* Chrome, Safari, new Edge */
}

/* ---- Zone 1: Hero header ------------------------------------------- */

.tkge-info-modal__hero {
	display: grid;
	grid-template-columns: 64px 1fr;
	column-gap: 14px;
	row-gap: 12px;
	margin-bottom: 22px;
}

.tkge-info-modal__icon {
	grid-row: 1 / 3;
	width: 64px;
	height: 64px;
	border-radius: 14px;
	overflow: hidden;
	background: var( --wp--preset--color--surface, #1b1d22 );
	border: 1px solid var( --wp--preset--color--steel, #8b9199 );
}

.tkge-info-modal__icon-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tkge-info-modal__heading {
	min-width: 0;
}

.tkge-info-modal__title {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 4px;
	font-family: var( --wp--preset--font-family--display, "Space Grotesk", sans-serif );
	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.15;
}

.tkge-age-badge {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border: 1px solid var( --wp--preset--color--signature-red, #e4002b );
	border-radius: 999px;
	color: var( --wp--preset--color--signature-red, #e4002b );
	font-family: var( --wp--preset--font-family--spec-mono, monospace );
	font-size: 0.65rem;
	letter-spacing: 0.04em;
}

.tkge-info-modal__meta {
	margin: 0 0 6px;
	color: var( --wp--preset--color--paper-dim, #c9c4b6 );
	font-size: 0.85rem;
}

.tkge-rating-line {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var( --wp--preset--font-family--spec-mono, monospace );
	font-size: 0.8rem;
}

.tkge-rating-line__score {
	display: inline-flex;
	align-items: center;
	padding: 2px 8px;
	border-radius: 6px;
	/* White badge — was green, which read as an unrelated "success/pass"
	   signal rather than a neutral platform grade. */
	background: var( --wp--preset--color--paper, #f3efe4 );
	color: var( --wp--preset--color--night-flight, #121316 );
	font-weight: 700;
}

.tkge-rating-line__stars {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var( --wp--preset--color--paper, #f3efe4 );
}

.tkge-rating-line__stars svg {
	color: #f2b705;
}

.tkge-rating-line__likes {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: var( --wp--preset--color--paper, #f3efe4 );
}

.tkge-rating-line__likes svg {
	color: var( --tktt-accent, var( --wp--preset--color--signature-red ) );
}

/* CTA row — "Play now" + "Share", sized to their own content rather
   than stretched full-width, reusing the same clipped-corner primary /
   capsule-outline secondary pairing as the on-page action row
   (.tkge-game-cta / .tkge-game-secondary in game-actions.css) so the
   two surfaces read as one consistent button language. */
.tkge-info-modal__cta-row {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 2px;
}

.tkge-info-modal__cta-row .tkge-btn.tkge-game-cta,
.tkge-info-modal__cta-row .tkge-btn.tkge-game-secondary {
	padding: 10px 20px;
	font-size: 11px;
	letter-spacing: 0.12em;
}

.tkge-info-modal__cta {
	flex: 0 1 auto;
}

.tkge-info-modal__share {
	flex: 0 0 auto;
}

/* ---- Zone 2: Media carousel ----------------------------------------- */

.tkge-info-modal__carousel-wrap {
	position: relative;
	margin-bottom: 24px;
}

.tkge-info-modal__carousel {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	padding-bottom: 4px;
	/* Same hidden-scrollbar treatment as .tkge-info-modal__scroll above —
	   the carousel is still swipeable/draggable, this just hides the
	   browser's default scrollbar chrome so it doesn't show a stray
	   horizontal bar under the images. */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* legacy Edge */
}

.tkge-info-modal__carousel::-webkit-scrollbar {
	display: none; /* Chrome, Safari, new Edge */
}

.tkge-info-modal__shot {
	flex: 0 0 auto;
	width: min( 220px, 68vw );
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 10px;
	scroll-snap-align: start;
	background: var( --wp--preset--color--surface, #1b1d22 );
}

.tkge-info-modal__carousel-nav {
	position: absolute;
	top: 50%;
	right: -6px;
	transform: translateY( -50% );
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	/* This was a hardcoded rgba(18, 19, 22, 0.85) — a manual approximation
	   of --wp--preset--color--night-flight at 85% opacity — which meant
	   the button ignored the theme entirely and stayed a fixed dark
	   circle no matter what. Fine on dark mode (where night-flight *is*
	   dark), but wrong on light mode, where the modal card around it
	   switches to a light surface and this button didn't follow, leaving
	   a dark blob with a same-color icon on it. color-mix() ties both the
	   fill and its opacity to the actual token, so it tracks whatever
	   night-flight resolves to in either mode. */
	background: color-mix( in srgb, var( --wp--preset--color--night-flight, #121316 ) 85%, transparent );
	color: var( --wp--preset--color--paper, #f3efe4 );
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.35 );
	cursor: pointer;
}

.tkge-info-modal__carousel-nav:hover {
	background: var( --wp--preset--color--signature-red, #e4002b );
}

/* ---- Zones 3-5: About game / Characters / How to play ----------------
   Built by tkge_render_game_info_zones() and printed only inside this
   lightbox now (opened from the gallery/suggestions cards, or from the
   Info button in a game's own Subscribe/Like/Share/Support row — see
   tkge_render_action_row()). Kept intentionally plain/readable — short
   paragraphs, no giant walls of text — rather than styled as "modal
   chrome". */

.tkge-info-zone {
	margin-bottom: 22px;
}

.tkge-info-zone:last-child {
	margin-bottom: 0;
}

.tkge-info-zone__heading {
	margin: 0 0 8px;
	font-family: var( --wp--preset--font-family--display, "Space Grotesk", sans-serif );
	font-size: 1rem;
	font-weight: 700;
}

.tkge-info-zone__body {
	color: var( --wp--preset--color--paper-dim, #c9c4b6 );
	font-size: 0.92rem;
	line-height: 1.6;
}

.tkge-info-zone__body p {
	margin: 0 0 0.9em;
}

.tkge-info-zone__body p:last-child {
	margin-bottom: 0;
}

/* ---- Zone: Characters (paper airplane tags) --------------------------
   Each tag links out to that character's own build/tutorial video (set
   per-character in the "Game Info Card" meta box) — real, crawlable
   internal links, same SEO intent as the About/How-to-play copy above. */

.tkge-char-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.tkge-char-tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid var( --wp--preset--color--steel, #8b9199 );
	border-radius: 999px;
	color: var( --wp--preset--color--paper, #f3efe4 );
	font-family: var( --wp--preset--font-family--spec-mono, monospace );
	font-size: 0.78rem;
	line-height: 1;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

a.tkge-char-tag:hover,
a.tkge-char-tag:focus-visible {
	border-color: var( --wp--preset--color--signature-red, #e4002b );
	color: var( --wp--preset--color--signature-red, #e4002b );
}

/* A character with no tutorial URL yet still renders (as plain, non-
   clickable text) rather than being silently dropped — dimmer so it
   doesn't look accidentally clickable. */
.tkge-char-tag--static {
	color: var( --wp--preset--color--paper-dim, #c9c4b6 );
	cursor: default;
}

@media ( max-width: 480px ) {
	.tkge-info-modal__hero {
		grid-template-columns: 52px 1fr;
	}

	.tkge-info-modal__icon {
		width: 52px;
		height: 52px;
	}

	.tkge-info-modal__title {
		font-size: 1.1rem;
	}
}