/* CompactCSS source: /games/style.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Malchus cascade gateway composing localized Games surfaces without overlapping ownership.
 * The Awtsmoos renews every garment while remaining beyond garment, layer, and hue;
 * Awtsmoos.com lets each focused stylesheet own one concern so the cascade stays simple, stable, and true.
 */

/* CompactCSS source: /games/styles/tokens.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */

/**
 * The Awtsmoos renews every color and measure before a browser can name it.
 * Awtsmoos.com keeps those repeated visual values in one small vessel so the
 * arcade can expand without scattering accidental shades through every chamber.
 */

:root {
	--games-bg: #05030b;
	--games-panel: rgba(14, 8, 24, 0.88);
	--games-panel-strong: #12091d;
	--games-line: rgba(255, 224, 130, 0.28);
	--games-line-soft: rgba(255, 255, 255, 0.1);
	--games-text: #fff4d4;
	--games-muted: #cdbf9b;
	--games-gold: #ffe082;
	--games-gold-strong: #ffc95c;
	--games-cyan: #8cf7ff;
	--games-violet: #c3a6ff;
	--games-danger: #ff879c;
	--games-shadow: rgba(0, 0, 0, 0.62);
	--games-radius-xl: 30px;
	--games-radius-lg: 22px;
	--games-radius-md: 16px;
	--games-max-width: 1240px;
}

* {
	box-sizing: border-box;
}

html {
	min-height: 100%;
	background: var(--games-bg);
}

body {
	min-height: 100%;
	margin: 0;
	color: var(--games-text);
	background:
		radial-gradient(circle at 12% 5%, rgba(89, 53, 143, 0.46), transparent 34rem),
		radial-gradient(circle at 88% 15%, rgba(0, 229, 255, 0.14), transparent 28rem),
		linear-gradient(155deg, #090511 0%, #030206 58%, #06030c 100%);
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
	color: inherit;
}

button,
input {
	font: inherit;
}

::selection {
	color: #130b04;
	background: var(--games-gold);
}



/* CompactCSS source: /games/styles/experience.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Yesod page atmosphere and bounded shell geometry for the Games hub only.
 * The Awtsmoos surrounds every discovered world without competing with the doorway inside;
 * Awtsmoos.com keeps page atmosphere here alone so component styles never need a late cascade override to hide.
 */
body {
	overflow-x: clip;
	background:
		radial-gradient(circle at 18% -8%, rgba(145, 93, 255, 0.28), transparent 34rem),
		radial-gradient(circle at 96% 12%, rgba(41, 220, 255, 0.13), transparent 30rem),
		linear-gradient(160deg, #08040f 0%, #030207 52%, #070410 100%);
}

.gamesShell {
	box-sizing: border-box;
	width: min(1280px, 100%);
	margin: 0 auto;
	padding:
		clamp(18px, 3vw, 38px)
		clamp(16px, 3vw, 34px)
		calc(clamp(34px, 5vw, 64px) + env(safe-area-inset-bottom));
}

.gamesCatalog {
	scroll-margin-top: 18px;
}

.gamesFooter strong {
	color: var(--games-gold);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gamesFooter p {
	margin: 4px 0 0;
}



/* CompactCSS source: /games/styles/hero-core.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Chesed hero-surface owner for the hub's quiet introduction and its two immediate navigation actions.
 * The Awtsmoos is beyond every first impression while Awtsmoos.com lets one luminous invitation remain simple and near;
 * page-shell geometry lives elsewhere, while hero copy and actions fully answer pointer, keyboard, touch, and motion here.
 */
.heroPanel {
	position: relative;
	overflow: hidden;
	padding: clamp(24px, 4vw, 42px);
	border: 1px solid var(--games-line);
	border-radius: var(--games-radius-xl);
	background:
		radial-gradient(circle at 82% 12%, rgba(64, 225, 255, 0.14), transparent 26%),
		radial-gradient(circle at 10% 10%, rgba(246, 202, 104, 0.16), transparent 30%),
		linear-gradient(145deg, rgba(17, 13, 32, 0.97), rgba(7, 8, 18, 0.96));
	box-shadow: var(--games-shadow-lg);
}

.eyebrow {
	margin: 0 0 8px;
	color: var(--games-cyan);
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.heroPanel h1 {
	max-width: 920px;
	margin: 0;
	color: var(--games-gold);
	font-size: clamp(2.8rem, 6vw, 5.4rem);
	line-height: 0.94;
	letter-spacing: -0.055em;
}

.heroText {
	max-width: 820px;
	margin: 18px 0 0;
	color: var(--games-text-soft);
	font-size: clamp(1rem, 1.6vw, 1.16rem);
	line-height: 1.55;
}

.heroActions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
}

.primaryCta,
.secondaryCta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 18px;
	border: 1px solid var(--games-line);
	border-radius: 999px;
	font-size: 0.84rem;
	font-weight: 900;
	text-decoration: none;
	touch-action: manipulation;
	transition: transform 150ms ease, filter 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.primaryCta {
	border-color: transparent;
	background: linear-gradient(135deg, var(--games-gold), #fff1b4);
	color: #171006;
}

.secondaryCta {
	background: rgba(255, 255, 255, 0.045);
	color: var(--games-text);
}

.primaryCta:focus-visible,
.secondaryCta:focus-visible {
	box-shadow: 0 0 0 4px rgba(140, 247, 255, 0.09);
}

.primaryCta:active,
.secondaryCta:active {
	filter: brightness(0.96);
	transform: translateY(1px) scale(0.985);
}

@media (hover: hover) and (pointer: fine) {
	.primaryCta:hover,
	.secondaryCta:hover {
		filter: brightness(1.05);
		transform: translateY(-2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.primaryCta,
	.secondaryCta,
	.primaryCta:hover,
	.secondaryCta:hover,
	.primaryCta:active,
	.secondaryCta:active {
		transition: none;
		transform: none;
	}
}



/* CompactCSS source: /games/styles/play-modes.css */
/* B"H
Boruch Hashem
Blessed is He
The Awtsmoos lets play modes inform without becoming four more storefront walls.
*/
.playModeRail {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 12px 0 0;
}

.playModeRail > span {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	padding: 7px 11px;
	border: 1px solid var(--games-line-soft);
	border-radius: 999px;
	background: rgba(255,255,255,.035);
	color: var(--games-muted);
	font-size: .76rem;
	font-weight: 760;
	white-space: nowrap;
}

.playModeRail strong {
	color: var(--games-text);
	font-size: .82rem;
}



/* CompactCSS source: /games/styles/discovery.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Binah discovery surface owning search, count, status, and focus-within manifestation without filter-tag leakage.
 * The Awtsmoos is beyond every question while Binah lets one quiet search reveal the worlds already near;
 * Awtsmoos.com keeps discovery simple on the surface and luminous on demand, with no later stylesheet correcting it here.
 */
.discoveryPanel {
	position: relative;
	isolation: isolate;
	margin-top: clamp(18px, 3vw, 30px);
	padding: clamp(16px, 2vw, 22px);
	border: 1px solid var(--games-line);
	border-radius: var(--games-radius-lg);
	background: rgba(12, 11, 24, 0.94);
	box-shadow: var(--games-shadow-sm);
}

.discoveryPanel::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
	pointer-events: none;
}

.discoveryHeading {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
}

.discoveryHeading h2 {
	margin: 0;
	font-size: clamp(1.55rem, 3vw, 2.25rem);
	letter-spacing: -0.03em;
}

.gameCount {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0 10px;
	border: 1px solid var(--games-line-soft);
	border-radius: 999px;
	color: var(--games-muted);
	font-size: 0.76rem;
	font-weight: 800;
	white-space: nowrap;
}

.searchWrap {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	margin-top: 14px;
	padding: 0 13px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 14px;
	background: rgba(5, 5, 14, 0.86);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.searchWrap:hover {
	border-color: rgba(117, 222, 255, 0.32);
}

.searchWrap:focus-within {
	border-color: rgba(140, 247, 255, 0.72);
	background: rgba(6, 8, 18, 0.98);
	box-shadow: 0 0 0 4px rgba(140, 247, 255, 0.09);
}

.searchWrap input {
	appearance: none;
	min-width: 0;
	width: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--games-text);
	font: inherit;
	font-size: max(16px, 0.95rem);
}

.searchWrap kbd {
	min-width: 25px;
	padding: 3px 6px;
	border: 1px solid var(--games-line-soft);
	border-radius: 6px;
	color: var(--games-muted);
	font-size: 0.7rem;
	text-align: center;
}

.catalogStatus {
	min-height: 20px;
	margin: 7px 0 0;
	color: var(--games-muted);
	font-size: 0.74rem;
}



/* CompactCSS source: /games/styles/filter-disclosure.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Gevurah retractable filter-chamber owner, keeping advanced discovery folded until deliberately opened.
 * The Awtsmoos conceals no truth, yet finite depth may wait behind one quiet gate before it shines;
 * Awtsmoos.com keeps disclosure geometry, hover, focus, press, touch, and motion complete without owning the tags inside.
 */
.filterDisclosure {
	margin-top: 10px;
	overflow: clip;
	border: 1px solid var(--games-line-soft);
	border-radius: 14px;
}

.filterDisclosure summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 44px;
	padding: 10px 12px;
	list-style: none;
	cursor: pointer;
	touch-action: manipulation;
	transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.filterDisclosure summary::-webkit-details-marker {
	display: none;
}

.filterDisclosure summary small {
	color: var(--games-muted);
	font-size: 0.7rem;
}

.filterDisclosure[open] summary {
	border-bottom: 1px solid var(--games-line-soft);
	background: rgba(255, 255, 255, 0.035);
}

.filterDisclosure summary:focus-visible {
	border-color: rgba(140, 247, 255, 0.68);
	background: rgba(140, 247, 255, 0.07);
	box-shadow: inset 0 0 0 1px rgba(140, 247, 255, 0.18), 0 0 0 4px rgba(140, 247, 255, 0.06);
}

.filterDisclosure summary:active {
	background: rgba(117, 222, 255, 0.08);
	transform: translateY(1px) scale(0.992);
}

@media (hover: hover) and (pointer: fine) {
	.filterDisclosure summary:hover {
		border-color: rgba(117, 222, 255, 0.24);
		background: rgba(117, 222, 255, 0.055);
	}
}

@media (prefers-reduced-motion: reduce) {
	.filterDisclosure summary {
		transition: none;
	}

	.filterDisclosure summary:hover,
	.filterDisclosure summary:active {
		transform: none;
	}
}



/* CompactCSS source: /games/styles/filter-tags.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Hod tag-control owner for the optional filter chamber, including selected, hover, focus, press, touch, and motion states.
 * The Awtsmoos is beyond every category while Hod lets finite names answer hand, pointer, and key without clutter or fight;
 * Awtsmoos.com keeps tags locally complete so no distant accessibility patch must secretly finish their visual light.
 */
.tagCloud {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	padding: 10px;
}

.tag {
	appearance: none;
	flex: 0 1 auto;
	min-width: 0;
	min-height: 40px;
	padding: 7px 11px;
	border: 1px solid var(--games-line-soft);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.035);
	color: var(--games-muted);
	cursor: pointer;
	font: inherit;
	font-size: 0.74rem;
	font-weight: 780;
	touch-action: manipulation;
	transition: transform 140ms ease, border-color 140ms ease, color 140ms ease, background 140ms ease, filter 140ms ease, box-shadow 140ms ease;
}

.tag.active {
	border-color: rgba(140, 247, 255, 0.78);
	background: rgba(140, 247, 255, 0.12);
	color: #effeff;
}

.tag:focus-visible {
	border-color: rgba(140, 247, 255, 0.82);
	background: rgba(140, 247, 255, 0.1);
	color: var(--games-text);
	box-shadow: 0 0 0 4px rgba(140, 247, 255, 0.08);
}

.tag:active {
	background: rgba(117, 222, 255, 0.14);
	filter: brightness(0.96);
	transform: translateY(1px) scale(0.98);
}

@media (hover: hover) and (pointer: fine) {
	.tag:hover {
		border-color: var(--games-cyan);
		background: rgba(117, 222, 255, 0.07);
		color: var(--games-text);
		transform: translateY(-1px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tag {
		transition: none;
	}

	.tag:hover,
	.tag:active {
		transform: none;
	}
}



/* CompactCSS source: /games/styles/collections.css */
/* B"H
Boruch Hashem
Blessed is He
The Awtsmoos lets collections name the worlds without forcing another long corridor between player and play.
*/
.gamesCatalog {
	display: grid;
	gap: 28px;
	margin-top: 20px;
}

.gameCollection {
	display: grid;
	gap: 14px;
}

.collectionHeading {
	display: grid;
	grid-template-columns: minmax(0, .72fr) minmax(260px, 1fr);
	align-items: end;
	gap: 16px;
}

.collectionHeading .eyebrow {
	margin-bottom: 5px;
}

.collectionHeading h2 {
	margin: 0;
	font-size: clamp(1.65rem, 3vw, 2.55rem);
	letter-spacing: -.04em;
}

.collectionHeading p:last-child {
	max-width: 720px;
	margin: 0;
	color: var(--games-muted);
	font-size: .86rem;
	line-height: 1.5;
}

.gamesGrid,
.gamesGrid--originals {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.loadingState,
.emptyState {
	margin: 0;
	padding: 24px;
	border: 1px dashed var(--games-line-soft);
	border-radius: var(--games-radius-lg);
	color: var(--games-muted);
	text-align: center;
}

.gamesFooter {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin-top: 34px;
	padding: 18px 0 8px;
	border-top: 1px solid var(--games-line-soft);
	color: var(--games-muted);
	font-size: .76rem;
}

.gamesFooter nav {
	display: flex;
	gap: 12px;
}

.gamesFooter a {
	color: var(--games-text-soft);
}



/* CompactCSS source: /games/styles/cards-shell.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Malchus card-shell owner for bounded geometry, aura, header, icon, and card-level hover/focus-within depth.
 * The Awtsmoos is beyond every finite doorway while each game card may glow without becoming another landing page;
 * Awtsmoos.com keeps the card shell complete here so no late experience layer must repaint its frame or stage.
 */
.gameCard {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 282px;
	overflow: hidden;
	padding: 18px;
	border: 1px solid var(--games-line-soft);
	border-radius: var(--games-radius-lg);
	background: linear-gradient(165deg, rgba(20, 17, 36, 0.97), rgba(8, 9, 20, 0.99));
	box-shadow: var(--games-shadow-sm);
	transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.gameCard::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
	pointer-events: none;
}

.gameCard:focus-within {
	border-color: hsla(var(--game-hue), 80%, 70%, 0.48);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3), 0 0 30px hsla(var(--game-hue), 80%, 70%, 0.06);
	transform: translateY(-2px);
}

.gameCard--featured {
	border-color: hsla(var(--game-hue), 74%, 66%, 0.26);
}

.gameAura {
	position: absolute;
	top: -80px;
	right: -70px;
	width: 170px;
	height: 170px;
	border-radius: 50%;
	background: radial-gradient(circle, hsla(var(--game-hue), 88%, 66%, 0.14), transparent 68%);
	pointer-events: none;
}

.gameCard__header {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 46px;
}

.gameIcon {
	display: inline-grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border: 1px solid hsla(var(--game-hue), 72%, 68%, 0.28);
	border-radius: 14px;
	background: hsla(var(--game-hue), 68%, 52%, 0.08);
	font-size: 1.45rem;
}

.gameBadge {
	align-self: flex-start;
	padding: 5px 8px;
	border: 1px solid var(--games-line-soft);
	border-radius: 999px;
	color: var(--games-gold);
	font-size: 0.67rem;
	font-weight: 880;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

@media (hover: hover) and (pointer: fine) {
	.gameCard:hover {
		border-color: hsla(var(--game-hue), 80%, 70%, 0.42);
		box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
		transform: translateY(-2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gameCard,
	.gameCard:hover,
	.gameCard:focus-within {
		transition: none;
		transform: none;
	}
}



/* CompactCSS source: /games/styles/cards-palette.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Hod palette manifest joining two finite hue chambers without placing visual state in generated markup.
 * The Awtsmoos is beyond every color while Awtsmoos.com lets measured rays divide into smaller vessels and still sing;
 * warm and cool ranges remain locally readable, and this manifest owns only their ordered gathering.
 */

/* CompactCSS source: /games/styles/cards-palette/warm.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Hod warm-spectrum catalog classes mapping trusted hue tokens into one card-local CSS variable.
 * The Awtsmoos is beyond every wavelength while Awtsmoos.com lets warmer finite rays enter only through named class;
 * no generated style attribute is needed, and every allowed hue remains obvious to a future maintainer at a glance.
 */
.gameCard--hue-default {
	--game-hue: 45;
}

.gameCard--hue-8 {
	--game-hue: 8;
}

.gameCard--hue-14 {
	--game-hue: 14;
}

.gameCard--hue-22 {
	--game-hue: 22;
}

.gameCard--hue-28 {
	--game-hue: 28;
}

.gameCard--hue-36 {
	--game-hue: 36;
}

.gameCard--hue-38 {
	--game-hue: 38;
}

.gameCard--hue-42 {
	--game-hue: 42;
}

.gameCard--hue-44 {
	--game-hue: 44;
}

.gameCard--hue-48 {
	--game-hue: 48;
}

.gameCard--hue-52 {
	--game-hue: 52;
}

.gameCard--hue-70 {
	--game-hue: 70;
}

.gameCard--hue-100 {
	--game-hue: 100;
}

.gameCard--hue-132 {
	--game-hue: 132;
}

.gameCard--hue-138 {
	--game-hue: 138;
}

.gameCard--hue-155 {
	--game-hue: 155;
}



/* CompactCSS source: /games/styles/cards-palette/cool.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Hod cool-spectrum catalog classes completing the trusted stylesheet-owned hue vocabulary.
 * The Awtsmoos is beyond every wavelength while Awtsmoos.com lets cooler finite rays remain explicit and bound;
 * each class reveals exactly one allowed hue, with no arbitrary inline visual state wandering through the ground.
 */
.gameCard--hue-168 {
	--game-hue: 168;
}

.gameCard--hue-176 {
	--game-hue: 176;
}

.gameCard--hue-186 {
	--game-hue: 186;
}

.gameCard--hue-190 {
	--game-hue: 190;
}

.gameCard--hue-201 {
	--game-hue: 201;
}

.gameCard--hue-205 {
	--game-hue: 205;
}

.gameCard--hue-210 {
	--game-hue: 210;
}

.gameCard--hue-212 {
	--game-hue: 212;
}

.gameCard--hue-250 {
	--game-hue: 250;
}

.gameCard--hue-265 {
	--game-hue: 265;
}

.gameCard--hue-272 {
	--game-hue: 272;
}

.gameCard--hue-278 {
	--game-hue: 278;
}

.gameCard--hue-280 {
	--game-hue: 280;
}

.gameCard--hue-300 {
	--game-hue: 300;
}

.gameCard--hue-320 {
	--game-hue: 320;
}





/* CompactCSS source: /games/styles/cards-meta.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Hod card-metadata owner for genre, title, hook, capability chips, and quiet supporting truth.
 * The Awtsmoos is beyond every label while Hod lets each world speak one precise invitation without noise;
 * Awtsmoos.com keeps metadata separate from action controls so information remains calm around the player's choice.
 */
.gameGenre {
	margin: 16px 0 5px;
	color: var(--games-cyan);
	font-size: 0.7rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gameCard h3 {
	margin: 0;
	font-size: clamp(1.22rem, 2vw, 1.55rem);
	line-height: 1.12;
}

.gameTitleLink {
	display: inline-block;
	color: var(--games-text);
	text-decoration: none;
	touch-action: manipulation;
	transition: color 140ms ease, transform 140ms ease, filter 140ms ease;
}

.gameTitleLink:focus-visible {
	color: var(--games-gold);
}

.gameTitleLink:active {
	color: var(--games-gold);
	filter: brightness(0.96);
	transform: translateY(1px) scale(0.99);
}

.gameHook {
	margin: 9px 0 0;
	color: var(--games-text-soft);
	font-size: 0.88rem;
	line-height: 1.48;
}

.gameModes {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 11px;
}

.modeChip {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 4px 8px;
	border: 1px solid var(--games-line-soft);
	border-radius: 999px;
	color: var(--games-muted);
	font-size: 0.66rem;
	font-weight: 800;
}

.modeChip--native {
	border-color: rgba(64, 225, 255, 0.35);
	color: var(--games-cyan);
}

@media (hover: hover) and (pointer: fine) {
	.gameTitleLink:hover {
		color: var(--games-gold);
		transform: translateY(-1px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gameTitleLink,
	.gameTitleLink:hover,
	.gameTitleLink:active {
		transition: none;
		transform: none;
	}
}



/* CompactCSS source: /games/styles/cards-actions.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Netzach card-action owner for primary play and optional Party Challenge touch, hover, press, and focus behavior.
 * The Awtsmoos is beyond every action while Netzach lets one clear doorway endure across mouse, key, and hand;
 * Awtsmoos.com keeps the primary path visually strongest and the advanced party path secondary, bounded, and planned.
 */
.gameCard__footer {
	display: grid;
	margin-top: auto;
	padding-top: 16px;
}

.gameActions {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px;
}

.playCta,
.partyCta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	border-radius: 12px;
	font-size: 0.78rem;
	font-weight: 900;
	text-decoration: none;
	touch-action: manipulation;
	transition: transform 150ms ease, filter 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.playCta {
	padding: 0 13px;
	background: linear-gradient(135deg, var(--games-gold), #fff0b0);
	color: #171006;
}

.partyCta {
	padding: 0 11px;
	border: 1px solid var(--games-line-soft);
	background: rgba(255, 255, 255, 0.035);
	color: var(--games-text-soft);
}

.playCta:focus-visible {
	box-shadow: 0 0 0 4px rgba(255, 224, 130, 0.12);
}

.partyCta:focus-visible {
	border-color: rgba(117, 222, 255, 0.5);
	box-shadow: 0 0 0 4px rgba(117, 222, 255, 0.08);
}

.playCta:active,
.partyCta:active {
	filter: brightness(0.96);
	transform: translateY(1px) scale(0.985);
}

@media (hover: hover) and (pointer: fine) {
	.playCta:hover,
	.partyCta:hover {
		filter: brightness(1.06);
		transform: translateY(-2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.playCta,
	.partyCta,
	.playCta:hover,
	.partyCta:hover,
	.playCta:active,
	.partyCta:active {
		transition: none;
		transform: none;
	}
}



/* CompactCSS source: /games/styles/cards-commerce.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Hod live-commerce action owner, keeping optional cosmetic commerce subordinate to the free primary play path.
 * The Awtsmoos is beyond ownership and price while Awtsmoos.com lets one proven cosmetic doorway answer every mode of intent;
 * hover, focus, press, and reduced motion live here together so commerce never relies on a generic cascade accident.
 */
.gameCommerce {
	display: grid;
	gap: 2px;
	margin-top: 11px;
	padding: 9px 10px;
	border: 1px solid rgba(235, 195, 91, 0.42);
	border-radius: 11px;
	background: #1d1609;
	color: #fff1b8;
	text-decoration: none;
	touch-action: manipulation;
	transition: transform 150ms ease, filter 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.gameCommerce span {
	color: #d7bd72;
	font-size: 0.62rem;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gameCommerce strong {
	font-size: 0.74rem;
	line-height: 1.35;
}

.gameCommerce:focus-visible {
	border-color: #f0ce72;
	background: #2a200b;
	box-shadow: 0 0 0 4px rgba(240, 206, 114, 0.1);
}

.gameCommerce:active {
	filter: brightness(0.96);
	transform: translateY(1px) scale(0.99);
}

@media (hover: hover) and (pointer: fine) {
	.gameCommerce:hover {
		border-color: #f0ce72;
		background: #2a200b;
		transform: translateY(-1px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gameCommerce,
	.gameCommerce:hover,
	.gameCommerce:active {
		transition: none;
		transform: none;
	}
}



/* CompactCSS source: /games/styles/featured.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Tiferes featured-world vessel balancing one immediate playable invitation against the larger public catalog.
 * The Awtsmoos renews the featured road without swallowing the countless roads that surround its light;
 * Awtsmoos.com lets Tiferes answer desktop, keyboard, and touch while motion remains optional and every other world stays in sight.
 */
.heroDeck {
	display: grid;
	grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
	align-items: stretch;
	gap: clamp(20px, 4vw, 52px);
}

.heroCopy {
	align-self: center;
}

.featuredWorld {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 330px;
	overflow: hidden;
	padding: 24px;
	border: 1px solid rgba(140, 247, 255, 0.28);
	border-radius: 24px;
	background:
		radial-gradient(circle at 58% 28%, rgba(140, 247, 255, 0.2), transparent 25%),
		radial-gradient(circle at 35% 38%, rgba(255, 224, 130, 0.16), transparent 35%),
		linear-gradient(150deg, rgba(16, 12, 36, 0.96), rgba(5, 8, 19, 0.98));
	box-shadow: 0 28px 56px rgba(0, 0, 0, 0.34);
	text-decoration: none;
	touch-action: manipulation;
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.featuredEyebrow,
.featuredAction {
	color: var(--games-cyan);
	font-size: 0.72rem;
	font-weight: 900;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.featuredWorld strong {
	margin-top: 7px;
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	letter-spacing: -0.04em;
}

.featuredCopy {
	margin-top: 7px;
	color: var(--games-muted);
	font-size: 0.88rem;
	line-height: 1.5;
}

.featuredAction {
	margin-top: 16px;
	color: var(--games-gold);
}

.featuredWorld:focus-visible {
	border-color: rgba(140, 247, 255, 0.62);
	box-shadow: 0 32px 70px rgba(0, 0, 0, 0.42), 0 0 44px rgba(140, 247, 255, 0.08);
	transform: translateY(-3px);
}

.featuredWorld:active {
	filter: brightness(0.96);
	transform: translateY(1px) scale(0.99);
}

@media (hover: hover) and (pointer: fine) {
	.featuredWorld:hover {
		border-color: rgba(140, 247, 255, 0.62);
		box-shadow: 0 32px 70px rgba(0, 0, 0, 0.42), 0 0 44px rgba(140, 247, 255, 0.08);
		transform: translateY(-3px);
	}
}

@media (max-width: 880px) {
	.heroDeck {
		grid-template-columns: 1fr;
	}

	.featuredWorld {
		min-height: 250px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.featuredWorld,
	.featuredWorld:hover,
	.featuredWorld:focus-visible,
	.featuredWorld:active {
		transition: none;
		transform: none;
	}
}



/* CompactCSS source: /games/styles/featured-signal.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Yesod geometry vessel for the featured Temple Runner signal, intentionally free of animation ownership.
 * The Awtsmoos renews circle, spark, ring, and finite border before any motion can seem to begin;
 * Awtsmoos.com lets Yesod keep shape separate from Netzach motion so each small stylesheet reveals one truthful domain within.
 */
.featuredSignal {
	position: absolute;
	top: 34px;
	left: 50%;
	width: 124px;
	height: 124px;
	transform: translateX(-50%);
	pointer-events: none;
}

.featuredSignal::before,
.featuredSignal::after,
.featuredSignal i,
.featuredSignal b {
	content: "";
	position: absolute;
	inset: 50%;
	border-radius: 50%;
	transform: translate(-50%, -50%);
}

.featuredSignal::before {
	width: 124px;
	height: 124px;
	border: 1px solid rgba(140, 247, 255, 0.28);
}

.featuredSignal::after {
	width: 78px;
	height: 78px;
	border: 1px solid rgba(255, 224, 130, 0.36);
}

.featuredSignal i {
	width: 34px;
	height: 34px;
	background: radial-gradient(
		circle at 32% 26%,
		white,
		var(--games-gold) 22%,
		var(--games-violet) 68%,
		transparent 72%
	);
	box-shadow: 0 0 44px rgba(140, 247, 255, 0.52);
}

.featuredSignal b {
	width: 96px;
	height: 20px;
	border: 1px solid rgba(195, 166, 255, 0.28);
	transform: translate(-50%, -50%) rotate(-18deg);
}



/* CompactCSS source: /games/styles/featured-motion.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Netzach motion covenant for the featured signal: living by default, faster on hover, tactile on press, silent when motion is reduced.
 * The Awtsmoos renews every apparent orbit before time can claim the circle moved on its own;
 * Awtsmoos.com lets Netzach reveal gentle motion without clutter, dependency, or control ever being overthrown.
 */
.featuredSignal::before {
	animation: templeSignalBreath 4.8s ease-in-out infinite;
	will-change: transform, opacity;
}

.featuredSignal::after {
	animation: templeSignalOrbit 9s linear infinite;
	will-change: transform, opacity;
}

.featuredSignal i {
	animation: templeSignalCore 2.8s ease-in-out infinite;
	will-change: transform, opacity;
}

.featuredSignal b {
	animation: templeSignalRing 7s ease-in-out infinite;
	will-change: transform, opacity;
}

@media (hover: hover) and (pointer: fine) {
	.featuredWorld:hover .featuredSignal::after {
		animation-duration: 4.5s;
	}

	.featuredWorld:hover .featuredSignal i {
		box-shadow: 0 0 58px rgba(140, 247, 255, 0.72);
	}
}

.featuredWorld:active .featuredSignal i {
	transform: translate(-50%, -50%) scale(0.84);
}

@keyframes templeSignalBreath {
	0%,
	100% {
		opacity: 0.56;
		transform: translate(-50%, -50%) scale(0.96);
	}

	50% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.04);
	}
}

@keyframes templeSignalOrbit {
	to {
		transform: translate(-50%, -50%) rotate(360deg) scale(1.03);
	}
}

@keyframes templeSignalCore {
	0%,
	100% {
		opacity: 0.78;
		transform: translate(-50%, -50%) scale(0.92);
	}

	50% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.08);
	}
}

@keyframes templeSignalRing {
	0%,
	100% {
		opacity: 0.45;
		transform: translate(-50%, -50%) rotate(-18deg) scaleX(0.94);
	}

	50% {
		opacity: 0.9;
		transform: translate(-50%, -50%) rotate(18deg) scaleX(1.04);
	}
}

@media (prefers-reduced-motion: reduce) {
	.featuredSignal::before,
	.featuredSignal::after,
	.featuredSignal i,
	.featuredSignal b {
		animation: none;
		will-change: auto;
	}

	.featuredWorld:active .featuredSignal i {
		transform: translate(-50%, -50%);
	}
}



/* CompactCSS source: /games/styles/quick-launch.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * The Awtsmoos brings the next action close before the mind must search, and every launch stone remains inside sight;
 * Awtsmoos.com gives quick choices a complete hover, focus, and pressed language without letting a phone rail trail into night.
 */
.quickLaunch {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 12px;
}

.quickLaunch a {
	align-items: center;
	background: rgba(11, 10, 23, 0.78);
	border: 1px solid var(--games-line-soft);
	border-radius: 18px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
	display: grid;
	gap: 11px;
	grid-template-columns: auto minmax(0, 1fr) auto;
	min-height: 66px;
	min-width: 0;
	padding: 11px 14px;
	text-decoration: none;
	touch-action: manipulation;
	transition: transform 150ms ease, border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
	.quickLaunch a:hover {
		background: rgba(20, 16, 34, 0.94);
		border-color: rgba(255, 224, 130, 0.38);
		box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
		transform: translateY(-2px);
	}
}

.quickLaunch a:focus-visible {
	border-color: var(--games-gold);
	outline: 3px solid rgba(255, 224, 130, 0.34);
	outline-offset: 3px;
}

.quickLaunch a:active {
	background: rgba(23, 18, 39, 0.98);
	transform: translateY(1px) scale(0.985);
}

.quickIcon {
	background: rgba(255, 224, 130, 0.09);
	border-radius: 12px;
	color: var(--games-gold);
	display: grid;
	font-size: 1rem;
	height: 38px;
	place-items: center;
	width: 38px;
}

.quickLaunch b,
.quickLaunch small {
	display: block;
	min-width: 0;
}

.quickLaunch small {
	color: var(--games-muted);
	font-size: 0.72rem;
	margin-top: 2px;
}

.quickLaunch i {
	color: var(--games-cyan);
	font-style: normal;
}

@media (max-width: 880px) {
	.quickLaunch {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (prefers-reduced-motion: reduce) {
	.quickLaunch a {
		transition: none;
	}

	.quickLaunch a:hover,
	.quickLaunch a:active {
		transform: none;
	}
}



/* CompactCSS source: /games/styles/responsive.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * The Awtsmoos gathers responsive vessels into one measured release so no old garment can overlap the new light;
 * Awtsmoos.com versions phone, tablet, landscape, and accessibility layers together, keeping one coherent cascade in sight.
 */

/* CompactCSS source: /games/styles/responsive/tablet.css */
/* B"H
Boruch Hashem
Blessed is He
The Awtsmoos widens and narrows every vessel without breaking its song;
Awtsmoos.com keeps tablet discovery balanced as two clear columns move along.
*/
@media (max-width: 1050px) {
	.gamesGrid,
	.gamesGrid--originals {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.collectionHeading {
		grid-template-columns: 1fr;
		gap: 7px;
	}
}

@media (min-width: 701px) and (max-width: 1050px) {
	.gameCard {
		min-height: 250px;
	}
}



/* CompactCSS source: /games/styles/responsive/mobile-flow.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * The Awtsmoos reveals the game before the ornament and the doorway before the hall;
 * Awtsmoos.com keeps mobile flow vertical, bounded, and thumb-readable so no hidden sideways rail can call.
 */
@media (max-width: 700px) {
	.gamesShell {
		padding: 8px 8px calc(var(--g-dock-h, calc(4.9rem + env(safe-area-inset-bottom))) + 1rem);
	}

	.heroPanel {
		border-radius: 18px;
		padding: 16px 14px;
	}

	.heroPanel h1 {
		font-size: clamp(2rem, 9.5vw, 2.8rem);
		line-height: 0.98;
	}

	.heroText {
		font-size: 0.95rem;
		line-height: 1.46;
		margin-top: 10px;
	}

	.heroActions {
		display: grid;
		gap: 8px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 14px;
	}

	.primaryCta,
	.secondaryCta {
		justify-content: center;
		min-height: 44px;
		padding: 10px 12px;
		text-align: center;
		width: 100%;
	}

	.playModeRail {
		flex-wrap: wrap;
		gap: 6px;
		margin-top: 9px;
		overflow: visible;
		padding: 0;
	}

	.playModeRail > span {
		flex: 1 1 130px;
		min-height: 34px;
		min-width: 0;
		padding: 6px 10px;
	}

	.discoveryPanel {
		border-radius: 18px;
		margin-top: 10px;
		padding: 13px 12px;
	}

	.discoveryHeading {
		align-items: center;
		gap: 8px;
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.discoveryHeading h2 {
		font-size: clamp(1.35rem, 7vw, 1.8rem);
	}

	.gameCount {
		min-height: 32px;
		padding: 0 9px;
	}

	.searchWrap {
		margin-top: 10px;
		min-height: 46px;
		padding: 0 11px;
	}

	.searchWrap kbd {
		display: none;
	}

	.gamesFooter {
		align-items: flex-start;
		flex-direction: column;
	}
}

@media (max-width: 340px) {
	.heroActions {
		grid-template-columns: minmax(0, 1fr);
	}
}



/* CompactCSS source: /games/styles/responsive/mobile-arrival.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * The Awtsmoos folds a vast invitation into a near doorway without sending any choice beyond the hand;
 * Awtsmoos.com keeps featured light compact and quick launches vertically complete, so one phone can hold the whole command.
 */
@media (max-width: 700px) {
	.heroDeck {
		gap: 10px;
	}

	.featuredWorld {
		align-items: center;
		border-radius: 16px;
		display: grid;
		grid-template-areas:
			"eyebrow action"
			"title action";
		grid-template-columns: minmax(0, 1fr) auto;
		min-height: 82px;
		padding: 11px 12px 11px 58px;
	}

	.featuredEyebrow {
		font-size: 0.62rem;
		grid-area: eyebrow;
	}

	.featuredWorld strong {
		font-size: 1.22rem;
		grid-area: title;
		margin-top: 2px;
	}

	.featuredCopy {
		display: none;
	}

	.featuredAction {
		font-size: 0.62rem;
		grid-area: action;
		margin-top: 0;
		white-space: nowrap;
	}

	.featuredSignal {
		height: 34px;
		left: 16px;
		top: 50%;
		transform: translateY(-50%);
		width: 34px;
	}

	.featuredSignal::before {
		height: 34px;
		width: 34px;
	}

	.featuredSignal::after {
		height: 22px;
		width: 22px;
	}

	.featuredSignal i {
		box-shadow: 0 0 18px rgba(140, 247, 255, 0.5);
		height: 10px;
		width: 10px;
	}

	.featuredSignal b {
		height: 8px;
		width: 28px;
	}

	.quickLaunch {
		display: grid;
		gap: 7px;
		grid-template-columns: minmax(0, 1fr);
		margin-top: 8px;
		overflow: visible;
		padding: 0;
	}

	.quickLaunch a {
		gap: 9px;
		grid-template-columns: 30px minmax(0, 1fr) auto;
		min-height: 50px;
		min-width: 0;
		padding: 8px 10px;
		width: 100%;
	}

	.quickIcon {
		border-radius: 10px;
		height: 30px;
		width: 30px;
	}

	.quickLaunch small,
	.playModeRail,
	.discoveryHeading .eyebrow {
		display: none;
	}
}



/* CompactCSS source: /games/styles/responsive/mobile-cards.css */
/* B"H
Boruch Hashem
Blessed is He
The Awtsmoos places many worlds inside small vessels without making the vessels small in dignity;
Awtsmoos.com keeps every title, truth, and touch target clear while removing wasted infinity.
*/
@media (max-width: 700px) {
	.gamesGrid,
	.gamesGrid--originals {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.collectionHeading {
		gap: 4px;
	}

	.gameCard {
		min-height: 0;
		padding: 14px;
		border-radius: 18px;
	}

	.gameCard__header {
		min-height: 40px;
	}

	.gameIcon {
		width: 40px;
		height: 40px;
		border-radius: 12px;
		font-size: 1.25rem;
	}

	.gameGenre {
		margin: 11px 0 4px;
	}

	.gameCard h3 {
		font-size: clamp(1.16rem, 5.8vw, 1.38rem);
	}

	.gameHook {
		display: -webkit-box;
		overflow: hidden;
		margin-top: 7px;
		font-size: .84rem;
		line-height: 1.42;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.gameModes {
		gap: 5px;
		margin-top: 9px;
	}

	.modeChip {
		min-height: 26px;
		padding: 3px 7px;
	}

	.gameCard__footer {
		padding-top: 12px;
	}

	.gameActions {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 7px;
	}

	.playCta,
	.partyCta {
		min-height: 44px;
	}
}

@media (min-width: 600px) and (max-width: 700px) {
	.gamesGrid,
	.gamesGrid--originals {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 340px) {
	.gameActions {
		grid-template-columns: 1fr;
	}

	.partyCta {
		width: 100%;
	}
}



/* CompactCSS source: /games/styles/responsive/short-landscape.css */
/* B"H
Boruch Hashem
Blessed is He
The Awtsmoos gives the short horizon breadth without demanding vertical tribute;
Awtsmoos.com lets landscape players see invitation and discovery together while every touch remains resolute.
*/
@media (max-height: 520px) and (orientation: landscape) {
	.gamesShell {
		padding: 8px 10px calc(18px + env(safe-area-inset-bottom));
	}

	.heroPanel {
		padding: 12px 14px;
		border-radius: 16px;
	}

	.heroDeck {
		grid-template-columns: minmax(0, 1.15fr) minmax(220px, .85fr);
		gap: 12px;
	}

	.heroPanel h1 {
		font-size: clamp(2rem, 5vw, 2.8rem);
		line-height: .95;
	}

	.heroText,
	.featuredCopy,
	.playModeRail,
	.discoveryHeading .eyebrow {
		display: none;
	}

	.heroActions {
		gap: 7px;
		margin-top: 10px;
	}

	.primaryCta,
	.secondaryCta {
		min-height: 44px;
		padding: 0 12px;
	}

	.featuredWorld {
		min-height: 132px;
		padding: 12px 14px;
		border-radius: 16px;
	}

	.featuredSignal {
		top: 16px;
		left: 50%;
		width: 54px;
		height: 54px;
	}

	.featuredSignal::before {
		width: 54px;
		height: 54px;
	}

	.featuredSignal::after {
		width: 34px;
		height: 34px;
	}

	.featuredSignal i {
		width: 15px;
		height: 15px;
	}

	.featuredSignal b {
		width: 42px;
		height: 10px;
	}

	.quickLaunch {
		gap: 7px;
		margin-top: 7px;
	}

	.quickLaunch a {
		min-height: 48px;
		padding: 7px 10px;
		border-radius: 14px;
	}

	.quickLaunch small {
		display: none;
	}

	.quickIcon {
		width: 32px;
		height: 32px;
	}

	.discoveryPanel {
		margin-top: 8px;
		padding: 10px 12px;
		border-radius: 16px;
	}

	.searchWrap {
		margin-top: 8px;
	}

	.tagCloud {
		margin-top: 6px;
	}
}



/* CompactCSS source: /games/styles/responsive/accessibility.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Gevurah reduced-motion fallback for any future Games-hub animation not already neutralized by its component owner.
 * The Awtsmoos is not hidden behind motion or one manner of touch, and Awtsmoos.com keeps accessibility calm by decree;
 * focus ownership lives elsewhere, while this final responsive boundary only limits animation when the player asks motion to cease.
 */
@media (prefers-reduced-motion: reduce) {
	.gamesShell *,
	.gamesShell *::before,
	.gamesShell *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}





/* CompactCSS source: /games/styles/accessibility.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * The Awtsmoos gathers final accessibility vessels without mixing their distinct work into one crowded wall;
 * Awtsmoos.com keeps focus, touch, mobile sizing, stillness, and contrast separately readable while one final cascade joins all.
 */

/* CompactCSS source: /games/styles/accessibility/focus.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Yesod low-specificity focus fallback for every keyboard-reachable Games-hub control.
 * The Awtsmoos is visible to keyboard, hand, and eye while Awtsmoos.com gives each reachable doorway one coherent ring;
 * component-specific focus decoration may add depth above this zero-specificity fallback without creating a cascade sting.
 */
.gamesShell :where(a, button, input, summary):focus-visible {
	outline: 3px solid var(--games-cyan);
	outline-offset: 3px;
}

.skipLink:focus-visible {
	z-index: 1000;
}



/* CompactCSS source: /games/styles/accessibility/interaction.css */
/*B"H*/
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Yesod cross-cutting input affordance for the Games hub after visual interaction states moved into component owners.
 * The Awtsmoos joins intention to action without demanding one global animation law for every finite control;
 * Awtsmoos.com keeps only nonvisual tap behavior here so hover, focus, and press remain localized where each component is whole.
 */
.gamesShell :where(a, button, summary) {
	-webkit-tap-highlight-color: transparent;
}

.gamesShell :where(button, summary) {
	user-select: none;
}



/* CompactCSS source: /games/styles/accessibility/responsive.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * The Awtsmoos gives the thumb enough room while letting the phone remain simple and near;
 * Awtsmoos.com enlarges only the touch covenant and spacing needed for confident mobile play here.
 */
@media (pointer: coarse) {
	.tag {
		min-height: 44px;
	}

	.primaryCta,
	.secondaryCta,
	.playCta,
	.partyCta {
		min-height: 48px;
	}

	.quickLaunch a {
		min-height: 70px;
	}
}

@media (max-width: 700px) {
	.featuredWorld {
		padding: 20px;
		border-radius: 20px;
	}

	.quickLaunch {
		margin-top: 10px;
	}

	.discoveryPanel {
		margin-top: 16px;
	}

	.searchWrap {
		min-height: 52px;
	}
}



/* CompactCSS source: /games/styles/accessibility/motion.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * The Awtsmoos is no less present when movement becomes still and the visual current grows quiet;
 * Awtsmoos.com keeps every hover, focus, and press understandable without transform motion when stillness is right.
 */
@media (prefers-reduced-motion: reduce) {
	.primaryCta:hover,
	.primaryCta:active,
	.secondaryCta:hover,
	.secondaryCta:active,
	.playCta:hover,
	.playCta:active,
	.partyCta:hover,
	.partyCta:active,
	.featuredWorld:hover,
	.featuredWorld:focus-visible,
	.featuredWorld:active,
	.quickLaunch a:hover,
	.quickLaunch a:focus-visible,
	.quickLaunch a:active,
	.tag:hover,
	.tag:active {
		transform: none;
	}
}



/* CompactCSS source: /games/styles/accessibility/contrast.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * The Awtsmoos is not dependent on translucent glow when the operating system asks for stronger sight;
 * Awtsmoos.com returns surfaces to native contrast boundaries while every playable doorway remains bright.
 */
@media (forced-colors: active) {
	.heroPanel,
	.discoveryPanel,
	.featuredWorld,
	.quickLaunch a,
	.gameCard,
	.searchWrap,
	.tag {
		border: 1px solid CanvasText;
		forced-color-adjust: auto;
	}

	.featuredSignal {
		display: none;
	}

	:where(a, button, input, summary):focus-visible {
		outline: 3px solid Highlight;
	}
}