/**
 * Game Templates Fallback CSS
 *
 * Provides daisyUI component styles and Tailwind utility classes
 * for game templates when the active theme does not include daisyUI / Tailwind CSS.
 * Loaded conditionally by cas_enqueue_game_template_assets().
 *
 * NOTE: --rounded-box is intentionally NOT defined here.
 * The detection JS checks for its absence to know daisyUI is not loaded.
 */

/* ============================================
   Minimal Element Resets
   (only what plugin templates require)
   ============================================ */
dialog {
	padding: 0;
}

figure {
	margin: 0;
}

/* ============================================
   CSS Custom Properties
   ============================================ */
:root {
	--b1: 0.95 0 0;
	--b2: 0.9 0 0;
	--b3: 0.85 0 0;
	--bc: 0.2 0 0;
	--p: 0.55 0.2 260;
	--pc: 0.98 0 0;
	--s: 0.55 0.2 310;
	--a: 0.55 0.2 180;
	--ac: 0.15 0.04 180;
	--n: 0.31 0.02 254;
	--nc: 0.75 0.02 264;
	--er: 0.55 0.2 25;
	--animation-btn: 0.25s;
	--btn-focus-scale: 0.95;
	--border-btn: 1px;
}

@supports not (color: oklch(0% 0 0)) {
	:root {
		color-scheme: light;
		--fallback-p: #491eff;
		--fallback-pc: #d4dbff;
		--fallback-s: #ff41c7;
		--fallback-a: #00cfbd;
		--fallback-ac: #00100d;
		--fallback-n: #2b3440;
		--fallback-nc: #d7dde4;
		--fallback-b1: #ffffff;
		--fallback-b2: #e5e6e6;
		--fallback-b3: #e5e6e6;
		--fallback-bc: #1f2937;
		--fallback-er: #ff6f70;
	}
}

/* Tailwind CSS variable declarations used by components */
*, ::before, ::after {
	--tw-translate-x: 0;
	--tw-translate-y: 0;
	--tw-rotate: 0;
	--tw-skew-x: 0;
	--tw-skew-y: 0;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	--tw-ring-offset-shadow: 0 0 #0000;
	--tw-ring-shadow: 0 0 #0000;
	--tw-shadow: 0 0 #0000;
	--tw-shadow-colored: 0 0 #0000;
}

/* ============================================
   daisyUI Component: Button
   ============================================ */
.btn {
	display: inline-flex !important;
	height: 3rem;
	min-height: 3rem;
	flex-shrink: 0;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	flex-wrap: wrap;
	align-items: center !important;
	justify-content: center;
	border-radius: 0.5rem;
	border-color: transparent;
	border-color: oklch(var(--btn-color, var(--b2)) / var(--tw-border-opacity, 1));
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0;
	padding-bottom: 0;
	text-align: center;
	font-size: 0.875rem;
	line-height: 1em;
	gap: 0.5rem;
	font-weight: 600;
	text-decoration-line: none;
	transition-duration: 200ms;
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
	border-width: var(--border-btn, 1px);
	transition-property: color, background-color, border-color, opacity, box-shadow, transform;
	--tw-text-opacity: 1;
	color: var(--fallback-bc, oklch(var(--bc) / var(--tw-text-opacity)));
	--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
	outline-color: var(--fallback-bc, oklch(var(--bc) / 1));
	background-color: oklch(var(--btn-color, var(--b2)) / var(--tw-bg-opacity, 1));
	--tw-bg-opacity: 1;
	--tw-border-opacity: 1;
}

.btn-disabled,
.btn[disabled],
.btn:disabled {
	pointer-events: none;
}

.btn:focus-visible {
	outline-style: solid;
	outline-width: 2px;
	outline-offset: 2px;
}

.btn-primary {
	--tw-text-opacity: 1;
	color: var(--fallback-pc, oklch(var(--pc) / var(--tw-text-opacity)));
	outline-color: var(--fallback-p, oklch(var(--p) / 1));
}

@supports (color: oklch(0% 0 0)) {
	.btn-primary {
		--btn-color: var(--p);
	}
}

@supports not (color: oklch(0% 0 0)) {
	.btn-primary {
		--btn-color: var(--fallback-p);
	}
}

.btn-accent {
	--tw-text-opacity: 1;
	color: var(--fallback-ac, oklch(var(--ac) / var(--tw-text-opacity)));
	outline-color: var(--fallback-a, oklch(var(--a) / 1));
}

@supports (color: oklch(0% 0 0)) {
	.btn-accent {
		--btn-color: var(--a);
	}
}

@supports not (color: oklch(0% 0 0)) {
	.btn-accent {
		--btn-color: var(--fallback-a);
	}
}

@media (hover: hover) {
	.btn:active:hover,
	.btn:active:focus {
		animation: button-pop 0s ease-out;
		transform: scale(var(--btn-focus-scale, 0.97));
	}
}

@keyframes button-pop {
	0% {
		transform: scale(var(--btn-focus-scale, 0.98));
	}
	40% {
		transform: scale(1.02);
	}
	100% {
		transform: scale(1);
	}
}

/* ============================================
   daisyUI Component: Card
   ============================================ */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 1rem;
}

.card:focus {
	outline: 2px solid transparent;
	outline-offset: 2px;
}

.card figure {
	display: flex;
	align-items: center;
	justify-content: center;
}

.card-body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: var(--padding-card, 2rem);
	gap: 0.5rem;
}

.card-body :where(p) {
	flex-grow: 1;
}

.card-bordered {
	border-width: 1px;
	--tw-border-opacity: 1;
	border-color: var(--fallback-b2, oklch(var(--b2) / var(--tw-border-opacity)));
}

.card-title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 1.25rem;
	line-height: 1.75rem;
	font-weight: 600;
}

@media (min-width: 1024px) {
	.lg\:card-side {
		align-items: stretch;
		flex-direction: row;
	}

	.lg\:card-side :where(figure:first-child) {
		overflow: hidden;
		border-start-start-radius: inherit;
		border-start-end-radius: unset;
		border-end-start-radius: inherit;
		border-end-end-radius: unset;
	}

	.lg\:card-side :where(figure:last-child) {
		overflow: hidden;
		border-start-start-radius: unset;
		border-start-end-radius: inherit;
		border-end-start-radius: unset;
		border-end-end-radius: inherit;
	}

	.lg\:card-side figure > * {
		max-width: unset;
	}

	:where(.lg\:card-side figure > *) {
		width: 100%;
		height: 100%;
		-o-object-fit: cover;
		object-fit: cover;
	}
}

/* ============================================
   daisyUI Component: Carousel
   ============================================ */
.carousel {
	display: inline-flex;
	overflow-x: scroll;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
	display: none;
}

.carousel-item {
	box-sizing: content-box;
	display: flex;
	flex: none;
	scroll-snap-align: start;
}

/* ============================================
   daisyUI Component: Divider
   ============================================ */
.divider {
	display: flex;
	flex-direction: row;
	align-items: center;
	align-self: stretch;
	margin-top: 1rem;
	margin-bottom: 1rem;
	height: 1rem;
	white-space: nowrap;
}

.divider:before,
.divider:after {
	height: 0.125rem;
	width: 100%;
	flex-grow: 1;
	--tw-content: '';
	content: var(--tw-content);
	background-color: var(--fallback-bc, oklch(var(--bc) / 0.1));
}

.divider-base-200:before,
.divider-base-200:after {
	--tw-bg-opacity: 1;
	background-color: var(--fallback-b2, oklch(var(--b2) / var(--tw-bg-opacity)));
}

/* ============================================
   daisyUI Component: Modal (dialog)
   ============================================ */
.modal {
	pointer-events: none;
	position: fixed;
	inset: 0px;
	margin: 0px;
	display: grid;
	height: 100%;
	max-height: none;
	width: 100%;
	max-width: none;
	justify-items: center;
	padding: 0px;
	opacity: 0;
	overscroll-behavior: contain;
	z-index: 999;
	background-color: transparent;
	color: inherit;
	transition-duration: 200ms;
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
	transition-property: transform, opacity, visibility;
	overflow-y: hidden;
}

:where(.modal) {
	align-items: center;
}

.modal-box {
	max-height: calc(100vh - 5em);
	grid-column-start: 1;
	grid-row-start: 1;
	width: 91.666667%;
	max-width: 32rem;
	--tw-scale-x: .9;
	--tw-scale-y: .9;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
	border-radius: 1rem;
	--tw-bg-opacity: 1;
	background-color: var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity)));
	padding: 1.5rem;
	transition-property: color, background-color, border-color, opacity, box-shadow, transform;
	transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
	transition-duration: 200ms;
	box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.modal::backdrop {
	background-color: rgba(0, 0, 0, 0.6);
}

.modal-open,
.modal:target,
.modal[open] {
	pointer-events: auto;
	visibility: visible;
	opacity: 1;
}

.modal-open .modal-box,
.modal:target .modal-box,
.modal[open] .modal-box {
	--tw-translate-y: 0px;
	--tw-scale-x: 1;
	--tw-scale-y: 1;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

:root:has(:is(.modal-open, .modal:target, .modal[open])) {
	overflow: hidden;
	scrollbar-gutter: stable;
}

.modal-backdrop {
	z-index: -1;
	grid-column-start: 1;
	grid-row-start: 1;
	display: grid;
	align-self: stretch;
	justify-self: stretch;
	color: transparent;
}

.modal-backdrop button {
	width: 100%;
	height: 100%;
	cursor: pointer;
	background: transparent;
	border: none;
	font-size: 0;
}

@keyframes modal-pop {
	0% {
		opacity: 0;
	}
}

/* ============================================
   daisyUI Component: Table
   ============================================ */
.table {
	position: relative;
	width: 100%;
	border-radius: 1rem;
	text-align: left;
	font-size: 0.875rem;
	line-height: 1.25rem;
}

.table :where(th, td) {
	padding-left: 1rem;
	padding-right: 1rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	vertical-align: middle;
}

.table :where(thead tr, tbody tr:not(:last-child), tbody tr:first-child:last-child) {
	border-bottom-width: 1px;
	--tw-border-opacity: 1;
	border-bottom-color: var(--fallback-b2, oklch(var(--b2) / var(--tw-border-opacity)));
}

.table :where(thead, tfoot) {
	white-space: nowrap;
	font-size: 0.75rem;
	line-height: 1rem;
	font-weight: 700;
	color: var(--fallback-bc, oklch(var(--bc) / 0.6));
}

@media (hover: hover) {
	.table tr.hover:hover,
	.table tr.hover:nth-child(even):hover {
		--tw-bg-opacity: 1;
		background-color: var(--fallback-b2, oklch(var(--b2) / var(--tw-bg-opacity)));
	}
}

/* ============================================
   Layout Utilities
   ============================================ */
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.inline-block { display: inline-block; }
.inline-grid { display: inline-grid; }
.table { display: table; }
.grid { display: grid; }
.hidden { display: none; }
.block { display: block; }

/* ============================================
   Position Utilities
   ============================================ */
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { inset: 0px; }
.top-0 { top: 0px; }
.left-0 { left: 0px; }

/* ============================================
   Flexbox Utilities
   ============================================ */
.flex-col { flex-direction: column; }
.flex-shrink-0 { flex-shrink: 0; }
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.items-center { align-items: center; }
.self-center { align-self: center; }

/* ============================================
   Grid Utilities
   ============================================ */
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.col-start-1 { grid-column-start: 1; }
.row-start-1 { grid-row-start: 1; }

@media (min-width: 640px) {
	.sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
	.lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
	.xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.custom-grid-cols-3 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.custom-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================
   Sizing Utilities
   ============================================ */
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-auto { width: auto; }
.h-auto { height: auto; }
.max-w-full { max-width: 100%; }
.max-w-4xl { max-width: 56rem; }
.w-\[250px\] { width: 250px; }
.w-11 { width: 2.75rem; }
.max-w-\[90vw\] { max-width: 90vw; }
.max-h-\[90vh\] { max-height: 90vh; }

/* ============================================
   Spacing Utilities
   ============================================ */
.p-0 { padding: 0px; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-4 { padding: 1rem; }
.px-2 { padding-left: 0.5rem; padding-right: 0.5rem; }
.pl-5 { padding-left: 1.25rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.m-8 { margin: 2rem; }
.m-auto { margin: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-4 { margin-bottom: 1rem; }
.mb-16 { margin-bottom: 4rem; }
.mt-4 { margin-top: 1rem; }
.\!mt-4 { margin-top: 1rem !important; }
.my-8 { margin-top: 2rem; margin-bottom: 2rem; }
.mt-8 { margin-top: 2rem; }
.ml-2 { margin-left: 0.5rem; }

/* ============================================
   Overflow Utilities
   ============================================ */
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }

/* ============================================
   Typography Utilities
   ============================================ */
.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-center { text-align: center; }
.text-justify { text-align: justify; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }
.\!leading-5 { line-height: 1.25rem !important; }
.leading-8 { line-height: 2rem; }
.leading-\[1\.5\] { line-height: 1.5; }
.text-\[clamp\(2rem\2c 6vw\2c 4\.2rem\)\] { font-size: clamp(2rem, 6vw, 4.2rem); }
.custom-capitalization { text-transform: none; }
.\[word-break\:auto-phrase\] { word-break: auto-phrase; }

/* ============================================
   Images & Objects
   ============================================ */
.object-cover { -o-object-fit: cover; object-fit: cover; }
.object-fill { -o-object-fit: fill; object-fit: fill; }
.object-top { -o-object-position: top; object-position: top; }
.aspect-\[3\/2\] { aspect-ratio: 3 / 2; }

/* ============================================
   Borders & Shapes
   ============================================ */
.rounded-full { border-radius: 9999px; }
.rounded-md { border-radius: 0.375rem; }
.rounded-none { border-radius: 0px; }
.border { border-width: 1px; }
.border-none { border-style: none; }
.border-secondary {
	--tw-border-opacity: 1;
	border-color: var(--fallback-s, oklch(var(--s) / var(--tw-border-opacity)));
}

/* ============================================
   Color Utilities
   ============================================ */
.bg-base-100 {
	--tw-bg-opacity: 1;
	background-color: var(--fallback-b1, oklch(var(--b1) / var(--tw-bg-opacity)));
}

.bg-base-200 {
	--tw-bg-opacity: 1;
	background-color: var(--fallback-b2, oklch(var(--b2) / var(--tw-bg-opacity)));
}

.bg-base-300 {
	--tw-bg-opacity: 1;
	background-color: var(--fallback-b3, oklch(var(--b3) / var(--tw-bg-opacity)));
}

.text-base-content {
	--tw-text-opacity: 1;
	color: var(--fallback-bc, oklch(var(--bc) / var(--tw-text-opacity)));
}

.text-primary {
	--tw-text-opacity: 1;
	color: var(--fallback-p, oklch(var(--p) / var(--tw-text-opacity)));
}

.\!text-primary {
	--tw-text-opacity: 1 !important;
	color: var(--fallback-p, oklch(var(--p) / var(--tw-text-opacity))) !important;
}

.text-accent {
	--tw-text-opacity: 1;
	color: var(--fallback-a, oklch(var(--a) / var(--tw-text-opacity)));
}

.text-white { color: #fff; }

.bg-\[\#a894f0\] { background-color: #a894f0; }
.bg-black {
	--tw-bg-opacity: 1;
	background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
.bg-opacity-0 { --tw-bg-opacity: 0; }

/* ============================================
   Effects & Filters
   ============================================ */
.shadow-xl {
	--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
	--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.pointer-events-none { pointer-events: none; }
.blur-xl { filter: blur(24px); }
.bg-clip-text { -webkit-background-clip: text; background-clip: text; }
.-webkit-text-fill-color-transparent { -webkit-text-fill-color: transparent; }

/* ============================================
   Transition Utilities
   ============================================ */
.transition-all {
	transition-property: all;
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
	transition-duration: 150ms;
}
.duration-300 { transition-duration: 300ms; }

/* ============================================
   Group Hover Support
   ============================================ */
.group:hover .group-hover\:hidden { display: none; }
.group:hover .group-hover\:block { display: block; }
.group:hover .group-hover\:scale-110 {
	--tw-scale-x: 1.1;
	--tw-scale-y: 1.1;
	transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.group:hover .group-hover\:bg-opacity-30 { --tw-bg-opacity: 0.3; }

/* ============================================
   Hover Utilities
   ============================================ */
.hover\:underline:hover { text-decoration-line: underline; }
.hover\:bg-\[\#383f47\]:hover { background-color: #383f47; }
.hover\:justify-center:hover { justify-content: center; }

/* ============================================
   Responsive Utilities
   ============================================ */
@media (min-width: 1280px) {
	.xl\:text-center { text-align: center; }
}

.\[\:root\[dir\=rtl\]_\&\]\:leading-\[1\.35\]:is(:root[dir=rtl] *) {
	line-height: 1.35;
}

/* ============================================
   Animation Control
   ============================================ */
.no-animation {
	--btn-focus-scale: 1;
	--animation-btn: 0;
	--animation-input: 0;
}

/* ============================================
   Font title fallback
   ============================================ */
.font-title {
	font-family: inherit;
}

/* ============================================
   Game Template: Entry cards
   ============================================ */
.game-entry-card {
	text-decoration: none;
	color: inherit;
}

.game-entry-figure {
	overflow: hidden;
	flex-shrink: 0;
}

.game-entry-figure img {
	width: 100%;
	height: 100%;
	-o-object-fit: fill;
	object-fit: fill;
}

.game-entry-card-body {
	flex: 1;
}

/* ============================================
   Game Template: Gallery
   ============================================ */
.game-gallery-item {
	overflow: hidden;
	border-radius: 0.25rem;
	cursor: pointer;
}

.game-gallery-item button {
	cursor: pointer;
	padding: 0;
	background: none;
	border: none;
}

.game-gallery-button {
	background-color: var(--fallback-b2, oklch(var(--b2) / 1));
	min-width: 2.5rem;
}

.game-gallery-button:hover {
	background-color: var(--fallback-b3, oklch(var(--b3) / 1));
}

/* ============================================
   Game Template: Attributes
   ============================================ */
.list-attributes {
	max-width: 56rem;
	margin: 1rem auto;
}

.data-details {
	max-width: 100%;
}

.data-details .content {
	max-width: 56rem;
	margin: 0 auto;
}

/* ============================================
   Game Template: Social links
   ============================================ */
.svg-icon {
	display: inline-block;
	vertical-align: middle;
}

/* ============================================
   Game Template: News cards container
   ============================================ */
.news-solo-contanier {
	max-width: 56rem;
	width: 100%;
}

/* ============================================
   Game Template: Postlist link
   ============================================ */
.postlist-item-link {
	text-decoration: none;
	color: inherit;
	display: block;
}

/* ============================================
   Game Image
   ============================================ */
.game-image img {
	max-width: 100%;
	height: auto;
	border-radius: 0.5rem;
}

/* ============================================
   Pagination (WordPress default enhancement)
   ============================================ */
.nav-links {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin: 2rem 0;
	flex-wrap: wrap;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.75rem;
	border-radius: 0.5rem;
	background-color: var(--fallback-b2, oklch(var(--b2) / 1));
	color: var(--fallback-bc, oklch(var(--bc) / 1));
	text-decoration: none;
	font-weight: 500;
}

.nav-links .page-numbers.current {
	background-color: var(--fallback-p, oklch(var(--p) / 1));
	color: var(--fallback-pc, oklch(var(--pc) / 1));
}

.nav-links .page-numbers:hover:not(.current) {
	background-color: var(--fallback-b3, oklch(var(--b3) / 1));
}