/**
 * Game Page Styles
 *
 * Styles specific to the game listing and single game pages.
 * Always loaded on game pages regardless of theme.
 * Extracted from theme-specific styles that plugin templates depend on.
 */

/* ============================================
   Game Entry Cards (listing page)
   ============================================ */
.game-entry-link {
	display: block;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

@media (min-width: 1024px) {
	.game-entry-card {
		height: 222px;
	}

	.game-entry-figure {
		width: 40%;
	}

	.game-entry-card-body {
		width: 60%;
	}
}

/* ============================================
   Single Game Page Container
   ============================================ */
.data-details {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================
   Custom Capitalization Override
   Game titles use this to prevent forced
   uppercase/capitalize from themes.
   ============================================ */
.custom-capitalization {
	text-transform: none !important;
}

.custom-capitalization.card-title[class*="!text-primary"] {
	font-size: 24px;
	font-weight: 600;
}

/* ============================================
   No-Image Placeholder
   ============================================ */
.no-image-preview-text {
	font-size: 2.25rem;
}

/* ============================================
   Game Image (single game page)
   ============================================ */
.game-image {
	max-width: 850px;
	margin-left: auto;
	margin-right: auto;
}

/* ============================================
   Game Gallery
   ============================================ */
#carousel_modal {
	align-content: center;
}

#carousel_modal > p {
	display: none;
}

#carousel_modal .modal-box {
	margin: auto;
}

#carousel_modal .modal-backdrop {
	position: fixed;
	inset: 0;
}

.game-gallery-item {
	aspect-ratio: 16/9;
}

/* ============================================
   Grid: 3-column breakpoint for game listings
   ============================================ */
@media (min-width: 1220px) {
	.custom-grid-cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	}
}

/* ============================================
   Postlist Item Link (game links)
   ============================================ */
.content-area .postlist-item-link {
	color: #7480ff !important;
}

.latest-web-build-container .postlist-item-link {
	color: #7480ff !important;
}

/* ============================================
   Pagination Colors
   ============================================ */
.nav-links .page-numbers:hover {
	border-color: #f67eb0 !important;
}

.nav-links .current {
	border-color: #f67eb0 !important;
}

/* ============================================
   Game Description Content
   ============================================ */
.content h3 {
	font-weight: 700;
	font-size: 26px;
	margin-bottom: 15px;
	--tw-text-opacity: 1;
	color: var(--fallback-a, oklch(var(--a) / var(--tw-text-opacity)));
}

.content h2 {
	font-size: 32px;
}

/* ============================================
   News Section on Single Game Page
   ============================================ */
@media only screen and (min-width: 1024px) {
	.news-solo-contanier {
		width: 66%;
	}
}

/* ============================================
   Stats Chart Overrides
   ============================================ */
.stats-chart-header {
	justify-content: center !important;
	margin-bottom: 0em !important;
}

.stats-chart-container {
	padding-bottom: 50px !important;
}

/* ============================================
   Footer Banners
   ============================================ */
.footer-upload-game-banner {
	max-width: 700px;
	align-self: center;
	margin: 0 auto;
}

.browser-games-footer-banner {
	text-align: center !important;
	margin-top: 20px !important;
	margin-left: -20px !important;
	margin-right: -20px !important;
	padding-top: 15px !important;
	padding-bottom: 15px !important;
	border-bottom: 4px solid oklch(var(--p)) !important;
	border-top: 4px solid oklch(var(--p)) !important;
	font-size: 2.0rem !important;
	font-weight: bold !important;
}

@media (max-width: 768px) {
	.browser-games-footer-banner {
		font-size: 1.25rem !important;
	}
}

@media (max-width: 480px) {
	.browser-games-footer-banner {
		padding-top: 10px !important;
		padding-bottom: 10px !important;
		margin-left: -15px !important;
		margin-right: -15px !important;
		font-size: 1.0rem !important;
	}
}

/* ============================================
   Genre Filter
   ============================================ */
.genre-filter-container {
	max-width: 56rem;
	margin: 0 auto 1.5rem auto;
	padding: 1rem 1.5rem;
	background: oklch(var(--b2, 0.95 0 0));
	border-radius: 0.5rem;
	border: 1px solid oklch(var(--b3, 0.9 0 0));
}

.genre-filter-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75rem;
}

.genre-filter-label {
	font-weight: 600;
	color: oklch(var(--bc, 0.2 0 0));
}

.genre-filter-clear {
	font-size: 0.875rem;
	color: oklch(var(--er, 0.55 0.2 25));
	text-decoration: none;
}

.genre-filter-clear:hover {
	text-decoration: underline;
}

.genre-filter-tags {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 0.5rem;
}

.genre-tag {
	display: inline-flex !important;
	align-items: center;
	gap: 0.25rem;
	line-height: 1.5;
	padding: 0.375rem 0.75rem;
	background: oklch(var(--b3, 0.9 0 0));
	border: 1px solid oklch(var(--b3, 0.9 0 0));
	border-radius: 9999px;
	font-size: 0.875rem;
	color: oklch(var(--bc, 0.2 0 0));
	cursor: pointer;
	transition: all 0.15s ease;
	user-select: none;
}

.genre-tag:hover {
	background: oklch(var(--p, 0.55 0.2 260) / 0.2);
	border-color: oklch(var(--p, 0.55 0.2 260));
}

.genre-tag-selected {
	background: oklch(var(--p, 0.55 0.2 260));
	border-color: oklch(var(--p, 0.55 0.2 260));
	color: oklch(var(--pc, 0.98 0 0));
}

.genre-tag-selected:hover {
	background: oklch(var(--p, 0.55 0.2 260) / 0.8);
}

.genre-tag input[type="checkbox"] {
	display: none !important;
}

.genre-count {
	font-size: 0.75rem;
	opacity: 0.7;
}

@media (max-width: 640px) {
	.genre-filter-container {
		padding: 0.75rem 1rem;
	}

	.genre-filter-tags {
		gap: 0.375rem;
	}

	.genre-tag {
		padding: 0.25rem 0.5rem;
		font-size: 0.8125rem;
	}
}

/* ============================================
   Text Alignment (from Quill editor content)
   ============================================ */
.text-align-center {
	text-align: center;
}

.text-align-right {
	text-align: right;
}

.text-align-justify {
	text-align: justify;
}

.text-align-center img,
.text-align-right img {
	display: inline-block;
}

/* ============================================
   Social Buttons (wpautop fix)
   ============================================ */
.cas-social-button p {
	display: contents;
}

.cas-social-button .svg-icon.hidden {
	display: none !important;
}

.cas-social-button:hover .svg-icon.hidden {
	display: block !important;
}

.cas-social-button:hover .svg-icon.group-hover\:hidden {
	display: none !important;
}

p.text-align-center:has(img):not(:has(br)):not(:has(span)) {
	display: flex;
	justify-content: center;
}

p.text-align-right:has(img):not(:has(br)):not(:has(span)) {
	display: flex;
	justify-content: flex-end;
}