/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/temple-runner.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Kesser stylesheet gateway establishing one deterministic import order for every Temple Runner visual vessel.
 * The Awtsmoos renews token, shell, HUD, drawer, disclosure, control, overlay, and motion before cascade can pretend to be cause;
 * Awtsmoos.com lets one doorway reveal localized layers in order, preventing partial garments and conflicting laws.
 */


/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/tokens.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Tiferes route-local tokens for contrast, safe areas, motion, touch geometry, and semantic layer ownership.
 * The Awtsmoos renews color and depth before one interface vessel can shine;
 * Awtsmoos.com keeps every token inside Temple Runner so no neighboring page inherits a shadow, radius, or z-line.
 */

#game-shell {
	--ink-950: #0d0907;
	--ink-900: #140e0b;
	--ink-850: #1a120e;
	--ivory-100: #fff9e8;
	--ivory-300: #f7e5c0;
	--ivory-500: #dec79a;
	--gold-300: #ffe08a;
	--gold-500: #d99d3f;
	--cyan-300: #b9efff;
	--cyan-500: #5bcbe7;
	--green-300: #d8f3b0;
	--danger-300: #ffb2a6;
	--glass: rgba(16, 11, 9, 0.78);
	--glass-strong: rgba(14, 9, 8, 0.92);
	--glass-soft: rgba(24, 16, 12, 0.62);
	--line: rgba(255, 226, 158, 0.28);
	--line-strong: rgba(255, 226, 158, 0.52);
	--line-cyan: rgba(111, 220, 246, 0.62);
	--shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.3);
	--shadow-deep: 0 24px 72px rgba(0, 0, 0, 0.52);
	--radius-small: 12px;
	--radius-medium: 17px;
	--radius-large: 24px;
	--tap: 48px;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
	--motion-fast: 150ms;
	--motion-medium: 280ms;
	--motion-slow: 520ms;
	--safe-top: max(10px, env(safe-area-inset-top));
	--safe-right: max(10px, env(safe-area-inset-right));
	--safe-bottom: max(10px, env(safe-area-inset-bottom));
	--safe-left: max(10px, env(safe-area-inset-left));
	--layer-world: 0;
	--layer-ambient: 2;
	--layer-hud: 10;
	--layer-controls: 20;
	--layer-prompt: 30;
	--layer-drawer-backdrop: 40;
	--layer-drawer: 42;
	--layer-modal: 60;
	--layer-boot: 70;
}

@supports (backdrop-filter: blur(1px)) {
	#game-shell {
		--glass-blur: blur(14px) saturate(1.08);
	}
}

@supports not (backdrop-filter: blur(1px)) {
	#game-shell {
		--glass-blur: none;
		--glass: rgba(16, 11, 9, 0.94);
		--glass-soft: rgba(20, 13, 10, 0.88);
	}
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/base.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Domem route foundation scoping page geometry, reset behavior, focus, and canvas laws exclusively to Temple Runner.
 * The Awtsmoos renews page and canvas before the road can fill the eye;
 * Awtsmoos.com keeps every reset inside this route so no global selector may wander into another world nearby.
 */

.temple-runner-route {
	width: 100%;
	min-height: 100dvh;
	margin: 0;
	overflow: hidden;
	background: #0d0907;
	color: #fff9e8;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-synthesis: none;
	touch-action: none;
	overscroll-behavior: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.temple-runner-route,
.temple-runner-route *,
.temple-runner-route *::before,
.temple-runner-route *::after {
	box-sizing: border-box;
}

.temple-runner-route button,
.temple-runner-route input,
.temple-runner-route summary {
	font: inherit;
}

.temple-runner-route button {
	color: inherit;
}

.temple-runner-route button,
.temple-runner-route summary,
.temple-runner-route label {
	-webkit-tap-highlight-color: transparent;
}

.temple-runner-route [hidden] {
	display: none !important;
}

.temple-runner-route :focus-visible {
	outline: 2px solid var(--gold-300);
	outline-offset: 3px;
}

.game-shell {
	position: relative;
	isolation: isolate;
	width: 100%;
	height: 100dvh;
	min-height: 100%;
	overflow: hidden;
	background:
		radial-gradient(circle at 50% 10%, rgba(234, 178, 92, 0.13), transparent 36%),
		linear-gradient(180deg, #17100c 0%, #0d0907 100%);
}

#game-canvas {
	display: block;
	width: 100%;
	height: 100%;
	touch-action: none;
	outline: none;
}

.game-shell::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: var(--layer-ambient);
	pointer-events: none;
	background:
		linear-gradient(180deg, rgba(5, 3, 2, 0.22), transparent 18%, transparent 72%, rgba(6, 4, 3, 0.18)),
		radial-gradient(circle at 50% 46%, transparent 56%, rgba(4, 3, 2, 0.16) 100%);
}

.glass-surface {
	border: 1px solid var(--line);
	background: var(--glass);
	backdrop-filter: var(--glass-blur);
	box-shadow: var(--shadow-soft);
}

@supports not (height: 100dvh) {
	.temple-runner-route,
	.game-shell {
		min-height: 100vh;
		height: 100vh;
	}
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/hud.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * The Awtsmoos renews several quiet HUD vessels while this doorway merely gathers their light;
 * Awtsmoos.com keeps score, mission, and prompt concerns separate so the runner never fights a tangled sight.
 */


/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/run-rail.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Hod run-rail gateway separates metric layout, compact quick-action controls, and their decorative signal layer into focused ownership.
 * The Awtsmoos renews number, action, and glint while one small top rail remains quiet above the road;
 * Awtsmoos.com keeps each visual concern modular so no future flourish becomes a cascade load.
 */


/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/run-metrics.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Malchus score, peruta, and streak rail using the route-owned HUD layer and bounded metric geometry.
 * The Awtsmoos renews score, peruta, and streak while the road remains wider than every number;
 * Awtsmoos.com keeps Malchus at the edge of sight, letting multiplier light deepen only when a real streak has begun.
 */

.run-rail {
	position: absolute;
	top: var(--safe-top);
	left: var(--safe-left);
	z-index: var(--layer-hud);
	display: flex;
	align-items: stretch;
	gap: 5px;
	max-width: calc(100vw - 128px);
	padding: 4px;
	border: 1px solid var(--line);
	border-radius: var(--radius-medium);
	background: linear-gradient(140deg, rgba(30, 20, 13, 0.78), rgba(13, 9, 7, 0.58));
	backdrop-filter: var(--glass-blur);
	box-shadow: var(--shadow-soft);
	pointer-events: none;
}

.run-metric {
	position: relative;
	min-width: 66px;
	padding: 6px 9px;
	border-radius: var(--radius-small);
	text-align: left;
}

.run-metric + .run-metric::before {
	content: "";
	position: absolute;
	top: 20%;
	bottom: 20%;
	left: -3px;
	width: 1px;
	background: var(--line);
}

.run-metric span,
.run-metric strong {
	display: block;
}

.run-metric span {
	color: var(--ivory-500);
	font-size: 9px;
	font-weight: 800;
	letter-spacing: 0.11em;
	line-height: 1;
	text-transform: uppercase;
}

.run-metric strong {
	margin-top: 3px;
	color: var(--ivory-100);
	font-size: 15px;
	font-variant-numeric: tabular-nums;
	font-weight: 850;
	line-height: 1;
	white-space: nowrap;
}

.run-metric-primary strong {
	color: var(--gold-300);
	font-size: 18px;
	text-shadow: 0 0 16px rgba(255, 202, 91, 0.18);
}

#multiplier-value {
	transition: color var(--motion-fast) var(--ease-soft), text-shadow var(--motion-fast) var(--ease-soft), filter var(--motion-fast) var(--ease-soft);
}

#multiplier-value[data-tier="2"] {
	color: #ffd778;
	text-shadow: 0 0 14px rgba(255, 211, 111, 0.24);
}

#multiplier-value[data-tier="3"] {
	color: var(--gold-300);
	text-shadow: 0 0 10px rgba(255, 224, 138, 0.34), 0 0 22px rgba(255, 184, 76, 0.16);
}

#multiplier-value[data-tier="4"] {
	color: var(--cyan-300);
	filter: brightness(1.08);
	text-shadow: 0 0 10px rgba(111, 220, 246, 0.42), 0 0 22px rgba(255, 202, 91, 0.18);
}

@media (max-width: 390px) {
	.run-metric {
		min-width: 57px;
		padding-inline: 7px;
	}

	.run-metric strong {
		font-size: 14px;
	}

	.run-metric-primary strong {
		font-size: 16px;
	}
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/quick-actions.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Netzach owns compact pause/details geometry and universal hover, active, and focus-visible states while decorative signal edges remain delegated to Hod.
 * The Awtsmoos renews the smallest top controls while Awtsmoos.com keeps pause and advanced detail precise, tactile, and bright;
 * hover may whisper on fine pointers, active always answers touch, and focus appears without shifting the road beneath sight.
 */

.quick-actions {
	position: absolute;
	top: var(--safe-top);
	right: var(--safe-right);
	z-index: var(--layer-controls);
	display: flex;
	gap: 7px;
	pointer-events: auto;
}

.quick-actions button {
	position: relative;
	display: grid;
	place-items: center;
	min-width: var(--tap);
	height: var(--tap);
	padding: 0 12px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: rgba(20, 14, 10, 0.76);
	backdrop-filter: blur(14px) saturate(1.08);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	color: var(--ivory-300);
	font: inherit;
	font-size: 14px;
	font-weight: 850;
	cursor: pointer;
	touch-action: manipulation;
	transition:
		transform var(--motion-fast) var(--ease-out),
		background var(--motion-fast) var(--ease-soft),
		border-color var(--motion-fast) var(--ease-soft),
		color var(--motion-fast) var(--ease-soft),
		box-shadow var(--motion-fast) var(--ease-soft);
}

.quick-actions button:focus-visible {
	outline: 2px solid var(--cyan-300);
	outline-offset: 2px;
	border-color: var(--line-cyan);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(91, 203, 231, 0.08);
}

.quick-actions button:active {
	transform: translateY(1px) scale(0.94);
	border-color: var(--line-strong);
	background: rgba(255, 224, 138, 0.12);
	color: var(--gold-300);
}

@media (hover: hover) and (pointer: fine) {
	.quick-actions button:hover {
		transform: translateY(-1px);
		border-color: var(--line-strong);
		background: rgba(255, 224, 138, 0.075);
		color: var(--gold-300);
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24), 0 0 16px rgba(255, 224, 138, 0.06);
	}
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/quick-actions-effects.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Hod adds only pseudo-element signal light to compact pause/details actions, never restating their geometry or hit-area ownership.
 * The Awtsmoos renews a cyan thread before decoration can pretend to be the button or command;
 * Awtsmoos.com lets Hod reveal active light while Netzach keeps structure, focus, and touch entirely in hand.
 */

.quick-actions button::after {
	content: "";
	position: absolute;
	inset: auto 18% 2px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(185, 239, 255, 0.62), transparent);
	opacity: 0.35;
	transform: scaleX(0.45);
	pointer-events: none;
	transition:
		transform var(--motion-fast) var(--ease-out),
		opacity var(--motion-fast) var(--ease-soft);
}

.quick-actions button:focus-visible::after,
.quick-actions button:active::after {
	opacity: 1;
	transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
	.quick-actions button:hover::after {
		opacity: 0.9;
		transform: scaleX(1);
	}
}





/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/hud-prompts.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Tiferes status, power, and turning prompts using explicit HUD/prompt layers so temporary guidance never collides with controls or drawers.
 * The Awtsmoos renews status, power, and turning before a prompt may enter the runner's eye;
 * Awtsmoos.com lets each message hold its own measured row, so pause, power, and reward never trample one another beneath the sky.
 */

.status-stage {
	position: absolute;
	top: calc(var(--safe-top) + 58px);
	left: 50%;
	z-index: var(--layer-hud);
	display: grid;
	justify-items: center;
	gap: 5px;
	max-width: calc(100vw - 32px);
	transform: translateX(-50%);
	pointer-events: none;
}

.status-pill,
.power-up-status {
	min-width: 0;
	max-width: min(82vw, 430px);
	padding: 6px 11px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--glass);
	backdrop-filter: var(--glass-blur);
	box-shadow: var(--shadow-soft);
	overflow: hidden;
	color: var(--ivory-300);
	font-size: 11px;
	font-weight: 750;
	letter-spacing: 0.015em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.status-pill[data-moment="streak"],
.status-pill[data-moment="shield"] {
	border-color: var(--line-strong);
	background: rgba(48, 32, 15, 0.76);
	color: var(--gold-300);
}

.status-pill[data-moment="magnet"],
.status-pill[data-moment="double"] {
	border-color: var(--line-cyan);
	background: rgba(15, 30, 33, 0.76);
	color: var(--cyan-300);
}

.power-up-status {
	border-color: var(--line-cyan);
	background: rgba(15, 30, 33, 0.68);
	color: var(--cyan-300);
}

.power-up-status[data-power="shield"] {
	border-color: var(--line-strong);
	background: rgba(48, 32, 15, 0.72);
	color: var(--gold-300);
}

.power-up-status[data-power="mixed"] {
	border-color: rgba(165, 226, 235, 0.42);
	background: linear-gradient(135deg, rgba(46, 31, 15, 0.74), rgba(14, 32, 35, 0.72));
	color: var(--ivory-100);
}

.turn-prompt {
	position: absolute;
	top: 26%;
	left: 50%;
	z-index: var(--layer-prompt);
	min-width: 136px;
	padding: 10px 18px;
	transform: translate(-50%, -50%);
	border: 1px solid rgba(255, 224, 138, 0.55);
	border-radius: var(--radius-medium);
	background: linear-gradient(135deg, rgba(63, 38, 17, 0.88), rgba(20, 13, 9, 0.84));
	backdrop-filter: var(--glass-blur);
	box-shadow: var(--shadow-deep);
	color: var(--gold-300);
	font-size: clamp(15px, 3vw, 22px);
	font-weight: 900;
	letter-spacing: 0.09em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
}

.turn-prompt[data-direction="left"] {
	animation-name: turn-from-right;
}

.turn-prompt[data-direction="right"] {
	animation-name: turn-from-left;
}

@media (max-height: 520px) and (orientation: landscape) {
	.status-stage {
		top: calc(var(--safe-top) + 48px);
		gap: 3px;
	}

	.turn-prompt {
		top: 30%;
		padding-block: 7px;
	}
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/missions.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * The Awtsmoos renews each small mission while the runner remains larger than the checklist at hand;
 * Awtsmoos.com keeps progress inside Binah's drawer, so goals may guide without covering the land.
 */

.mission-list {
	display: grid;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mission {
	position: relative;
	margin: 0;
	padding: 9px 10px 9px 28px;
	border: 1px solid rgba(255, 226, 158, 0.11);
	border-radius: var(--radius-small);
	background: rgba(255, 255, 255, 0.025);
	color: rgba(255, 249, 232, 0.82);
	font-size: 11px;
	line-height: 1.35;
}

.mission::before {
	content: "";
	position: absolute;
	top: 12px;
	left: 10px;
	width: 8px;
	height: 8px;
	border: 1px solid var(--ivory-500);
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px rgba(13, 9, 7, 0.8);
}

.mission.complete {
	border-color: rgba(216, 243, 176, 0.2);
	color: var(--green-300);
}

.mission.complete::before {
	border-color: var(--green-300);
	background: var(--green-300);
	box-shadow:
		inset 0 0 0 2px rgba(13, 9, 7, 0.75),
		0 0 12px rgba(216, 243, 176, 0.22);
}

.mission.complete::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: linear-gradient(105deg, transparent 20%, rgba(216, 243, 176, 0.12), transparent 72%);
	animation: mission-complete-sweep 560ms var(--ease-out) both;
}

.game-shell[data-motion="reduced"] .mission.complete::after {
	animation: none;
}





/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/drawer.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Binah drawer gateway joins shell, content, settings, interaction, and decorative signal modules without allowing their responsibilities to overlap.
 * The Awtsmoos renews hidden depth through many vessels while one drawer appears to the seeing mind;
 * Awtsmoos.com keeps every concern in its own chamber so advanced UI may deepen without leaving conflict behind.
 */


/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/drawer-shell.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Binah off-canvas drawer shell with safe-area bounds, internal scrolling, and semantic layer ownership.
 * The Awtsmoos renews hidden depth before the advanced drawer may enter or leave the scene;
 * Awtsmoos.com keeps this shell bounded by dynamic viewport and safe areas, so no menu edge can drift beyond what may be seen.
 */

.drawer-backdrop {
	position: absolute;
	inset: 0;
	z-index: var(--layer-drawer-backdrop);
	background: rgba(5, 3, 2, 0.42);
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--motion-medium) var(--ease-soft);
}

.run-drawer {
	position: absolute;
	top: var(--safe-top);
	right: var(--safe-right);
	bottom: var(--safe-bottom);
	z-index: var(--layer-drawer);
	width: min(360px, calc(100vw - 20px));
	max-height: calc(100dvh - var(--safe-top) - var(--safe-bottom));
	padding: 14px;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-large);
	background: linear-gradient(160deg, rgba(34, 23, 15, 0.96), rgba(12, 8, 6, 0.94));
	backdrop-filter: blur(18px) saturate(1.08);
	box-shadow: var(--shadow-deep);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-gutter: stable;
	scrollbar-width: thin;
	transform: translate3d(calc(100% + 24px), 0, 0);
	opacity: 0;
	pointer-events: none;
	transition: transform var(--motion-medium) var(--ease-out), opacity var(--motion-fast) var(--ease-soft);
}

.game-shell[data-drawer="open"] .drawer-backdrop {
	opacity: 1;
	pointer-events: auto;
}

.game-shell[data-drawer="open"] .run-drawer {
	transform: translate3d(0, 0, 0);
	opacity: 1;
	pointer-events: auto;
}

.drawer-header {
	position: sticky;
	top: -14px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: -14px -14px 0;
	padding: 16px 16px 12px;
	border-bottom: 1px solid var(--line);
	background: linear-gradient(180deg, rgba(30, 20, 14, 0.98), rgba(26, 17, 12, 0.92));
	backdrop-filter: blur(18px) saturate(1.08);
}

.drawer-kicker {
	color: var(--ivory-500);
	font-size: 9px;
	font-weight: 850;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.drawer-header h2 {
	margin: 3px 0 0;
	font-size: 20px;
	line-height: 1;
}

.drawer-header button {
	display: grid;
	place-items: center;
	flex: 0 0 var(--tap);
	width: var(--tap);
	height: var(--tap);
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.035);
	color: var(--ivory-300);
	font-size: 24px;
	line-height: 1;
	cursor: pointer;
	touch-action: manipulation;
}

@media (max-width: 600px) {
	.run-drawer {
		top: max(6px, env(safe-area-inset-top));
		right: max(6px, env(safe-area-inset-right));
		bottom: max(6px, env(safe-area-inset-bottom));
		width: min(360px, calc(100vw - max(12px, env(safe-area-inset-left)) - max(12px, env(safe-area-inset-right))));
		max-height: calc(100dvh - max(6px, env(safe-area-inset-top)) - max(6px, env(safe-area-inset-bottom)));
	}
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/drawer-content.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * The Awtsmoos renews mission, statistic, guide, and advanced evidence after Binah opens its gate;
 * Awtsmoos.com keeps content structure calm and bounded, leaving settings and interaction motion to their own measured state.
 */

.drawer-section {
	min-width: 0;
	padding: 14px 2px 4px;
}

.drawer-section h3 {
	margin: 0 0 8px;
	color: var(--ivory-500);
	font-size: 9px;
	font-weight: 850;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

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

.detail-grid div {
	min-width: 0;
	padding: 9px;
	border: 1px solid rgba(255, 226, 158, 0.1);
	border-radius: var(--radius-small);
	background: rgba(255, 255, 255, 0.025);
}

.detail-grid span,
.detail-grid strong {
	display: block;
}

.detail-grid span {
	color: var(--ivory-500);
	font-size: 9px;
}

.detail-grid strong {
	margin-top: 3px;
	overflow: hidden;
	color: var(--ivory-100);
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.control-guide p {
	margin: 0;
	color: rgba(255, 249, 232, 0.66);
	font-size: 11px;
	line-height: 1.55;
}

.diagnostics-panel {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}

.diagnostics-panel summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: var(--tap);
	padding: 0 8px;
	border-radius: var(--radius-small);
	color: var(--ivory-500);
	font-size: 10px;
	font-weight: 800;
	cursor: pointer;
	list-style: none;
}

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

.diagnostics-panel summary::after {
	content: "›";
	color: var(--cyan-300);
	font-size: 18px;
	transform: rotate(0deg);
	transition: transform var(--motion-fast) var(--ease-out);
}

.diagnostics-panel[open] summary::after {
	transform: rotate(90deg);
}

.diagnostics-panel pre {
	max-height: min(280px, 34dvh);
	margin: 9px 0 2px;
	padding: 9px;
	border: 1px solid rgba(111, 220, 246, 0.12);
	border-radius: var(--radius-small);
	background: rgba(0, 0, 0, 0.24);
	overflow: auto;
	color: var(--cyan-300);
	font: 10px/1.45 ui-monospace, SFMono-Regular, Menlo, monospace;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}

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



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/drawer-settings.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Binah settings styling for fully dressed checkbox and select controls whose descriptions reveal advanced depth without visual clutter.
 * The Awtsmoos renews toggle, option, caption, and chosen state before preference can pretend to own the road;
 * Awtsmoos.com lets Binah make advanced garments clear and tactile while gameplay remains the larger load.
 */

.settings-list {
	display: grid;
	gap: 4px;
}

.settings-list h3 {
	margin-bottom: 2px;
}

.settings-list label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	min-height: 56px;
	padding: 6px 7px;
	border-top: 1px solid rgba(255, 226, 158, 0.08);
	border-radius: 11px;
	color: rgba(255, 249, 232, 0.84);
	font-size: 12px;
	cursor: pointer;
	touch-action: manipulation;
}

.settings-list label > span {
	display: grid;
	min-width: 0;
	gap: 2px;
	line-height: 1.3;
}

.settings-list small {
	color: rgba(255, 249, 232, 0.46);
	font-size: 9px;
	font-weight: 560;
}

.settings-list input[type="checkbox"] {
	appearance: none;
	flex: 0 0 44px;
	width: 44px;
	height: 26px;
	margin: 0;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: radial-gradient(circle at 11px 50%, var(--ivory-300) 0 6px, transparent 6.5px), rgba(255, 255, 255, 0.055);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
	cursor: pointer;
}

.settings-list input[type="checkbox"]:checked {
	border-color: var(--line-cyan);
	background: radial-gradient(circle at 33px 50%, #e8fbff 0 6px, transparent 6.5px), linear-gradient(135deg, #25869dbf, #27687a94);
}

.settings-list select {
	min-width: 112px;
	height: 38px;
	padding: 0 30px 0 10px;
	border: 1px solid var(--line);
	border-radius: 11px;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
	color: var(--ivory-100);
	font-size: 11px;
	font-weight: 750;
	cursor: pointer;
}

.settings-list select option {
	background: #17100c;
	color: var(--ivory-100);
}

@media (max-width: 330px) {
	.settings-list label {
		gap: 8px;
		font-size: 11px;
	}

	.settings-list select {
		min-width: 102px;
	}
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/drawer-interactions.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Tiferes hover, press, focus, selection, and disclosure motion shared by every advanced drawer interaction without leaking into unrelated controls.
 * The Awtsmoos renews hover, press, focus, and choice before one advanced control answers the hand;
 * Awtsmoos.com gives every Binah interaction one restrained grammar so desktop and touch can understand.
 */

.drawer-header button,
.settings-list label,
.settings-list input,
.settings-list select,
.diagnostics-panel summary {
	transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-soft), border-color var(--motion-fast) var(--ease-soft), color var(--motion-fast) var(--ease-soft), box-shadow var(--motion-fast) var(--ease-soft);
}

.drawer-header button:focus-visible,
.settings-list input:focus-visible,
.settings-list select:focus-visible,
.diagnostics-panel summary:focus-visible {
	outline: 2px solid var(--cyan-300);
	outline-offset: 2px;
}

.settings-list label:focus-within {
	background: rgba(91, 203, 231, 0.055);
	box-shadow: inset 0 0 0 1px rgba(111, 220, 246, 0.16);
}

.drawer-header button:active,
.settings-list input:active,
.settings-list select:active {
	transform: scale(0.95);
}

.settings-list label:active,
.diagnostics-panel summary:active {
	transform: translateY(1px);
	background: rgba(91, 203, 231, 0.06);
}

@media (hover: hover) and (pointer: fine) {
	.drawer-header button:hover {
		border-color: var(--line-strong);
		background: rgba(255, 224, 138, 0.08);
		color: var(--gold-300);
	}

	.settings-list label:hover {
		background: rgba(255, 255, 255, 0.035);
		color: var(--ivory-100);
	}

	.settings-list input:hover,
	.settings-list select:hover {
		border-color: var(--line-strong);
		box-shadow: 0 0 18px rgba(91, 203, 231, 0.1);
	}

	.diagnostics-panel summary:hover {
		background: rgba(91, 203, 231, 0.045);
		color: var(--cyan-300);
	}
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/drawer-effects.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Hod owns only pseudo-element signal light for the advanced drawer, leaving grip geometry, shell bounds, content, settings, and interaction to their existing explicit owners.
 * The Awtsmoos renews concealed knowledge before its border can glow upon the night;
 * Awtsmoos.com lets Hod mark the doorway with a quiet cyan thread, keeping advanced depth futuristic but visually light.
 */

.run-drawer::before {
	content: "";
	position: sticky;
	top: 0;
	z-index: 3;
	display: block;
	width: 42%;
	height: 1px;
	margin: -1px auto 0;
	background: linear-gradient(90deg, transparent, rgba(185, 239, 255, 0.62), transparent);
	box-shadow: 0 0 16px rgba(91, 203, 231, 0.18);
	pointer-events: none;
}

.drawer-grip::after {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	box-shadow: 0 0 16px rgba(91, 203, 231, 0.1);
	opacity: 0.68;
	pointer-events: none;
	animation: temple-drawer-signal 2.4s var(--ease-soft) infinite;
}

@keyframes temple-drawer-signal {
	50% {
		opacity: 1;
		box-shadow: 0 0 22px rgba(91, 203, 231, 0.18);
	}
}





/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/controls.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Malchus control gateway separating baseline interaction, viewport adaptation, and decorative signal effects into three explicit owners.
 * The Awtsmoos renews body, garment, and glow before one stylesheet can swallow every layer whole;
 * Awtsmoos.com keeps this doorway tiny so each responsibility may evolve without conflicting with another soul.
 */


/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/control-tray.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Malchus owns the baseline thumb-control geometry and all universal interaction states; responsive and decorative effects are delegated elsewhere.
 * The Awtsmoos renews every press before the hand can claim the road as its own command;
 * Awtsmoos.com lets Malchus make touch immediate, focus unmistakable, and motion restrained beneath the runner's demand.
 */

.controls {
	position: absolute;
	left: 50%;
	bottom: var(--safe-bottom);
	z-index: var(--layer-controls);
	display: flex;
	gap: 7px;
	max-width: calc(100vw - var(--safe-left) - var(--safe-right) - 12px);
	padding: 5px;
	transform: translateX(-50%);
	border: 1px solid var(--line);
	border-radius: 21px;
	background: var(--glass);
	backdrop-filter: var(--glass-blur);
	box-shadow: var(--shadow-soft);
	opacity: 1;
	transition:
		opacity var(--motion-medium) var(--ease-soft),
		filter var(--motion-fast) var(--ease-soft);
}

.controls button {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(50px, 16.4vw, 62px);
	height: 58px;
	padding: 4px;
	overflow: hidden;
	border: 1px solid var(--line);
	border-radius: 16px;
	background: linear-gradient(155deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.035));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
	color: var(--ivory-300);
	font-weight: 850;
	cursor: pointer;
	touch-action: manipulation;
	transition:
		transform var(--motion-fast) var(--ease-out),
		background var(--motion-fast) var(--ease-soft),
		border-color var(--motion-fast) var(--ease-soft),
		color var(--motion-fast) var(--ease-soft),
		box-shadow var(--motion-fast) var(--ease-soft);
}

.controls button b,
.controls button span {
	position: relative;
	z-index: 2;
}

.controls button b {
	font-size: 21px;
	line-height: 1;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.58);
}

.controls button span {
	color: var(--ivory-500);
	font-size: 8px;
	font-weight: 760;
	letter-spacing: 0.08em;
	line-height: 1;
	text-transform: uppercase;
}

.controls button:focus-visible {
	outline: 2px solid var(--cyan-300);
	outline-offset: 2px;
	border-color: var(--line-cyan);
	box-shadow: 0 0 0 4px rgba(91, 203, 231, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.controls button:active {
	transform: translateY(1px) scale(0.94);
	border-color: var(--line-cyan);
	background: linear-gradient(155deg, rgba(91, 203, 231, 0.18), rgba(255, 224, 138, 0.07));
	color: var(--gold-300);
	box-shadow: inset 0 0 18px rgba(91, 203, 231, 0.08);
}

@media (hover: hover) and (pointer: fine) {
	.controls button:hover {
		transform: translateY(-2px);
		border-color: var(--line-strong);
		background: linear-gradient(155deg, rgba(255, 224, 138, 0.13), rgba(91, 203, 231, 0.055));
		color: var(--gold-300);
		box-shadow: 0 9px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	}
}

.game-shell[data-controls="hidden"] .controls {
	opacity: 0;
	filter: blur(2px);
	pointer-events: none;
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/control-responsive.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Yesod owns only viewport-specific thumb geometry and desktop keyboard hints, never baseline control colors or universal interaction states.
 * The Awtsmoos renews portrait, landscape, pointer, and thumb before one fixed width can harden into law;
 * Awtsmoos.com lets Yesod resize the vessel without repainting the interaction soul that Malchus already saw.
 */

@media (hover: hover) and (pointer: fine) and (min-width: 801px) {
	.controls button {
		width: 66px;
		height: 54px;
		padding: 4px 4px 17px;
	}

	.controls button::after {
		position: absolute;
		left: 50%;
		bottom: 4px;
		z-index: 3;
		min-width: 25px;
		padding: 2px 5px;
		transform: translateX(-50%);
		border: 1px solid rgba(255, 226, 158, 0.24);
		border-radius: 5px;
		background: rgba(4, 3, 2, 0.56);
		color: var(--ivory-500);
		font-size: 7px;
		font-weight: 850;
		line-height: 1;
		pointer-events: none;
	}

	.controls button[data-action="left"]::after {
		content: "A · ←";
	}

	.controls button[data-action="jump"]::after {
		content: "W · ␣";
	}

	.controls button[data-action="slide"]::after {
		content: "S · ↓";
	}

	.controls button[data-action="right"]::after {
		content: "D · →";
	}
}

@media (max-width: 420px) {
	.controls {
		gap: 5px;
		padding: 4px;
	}

	.controls button {
		height: 54px;
		border-radius: 15px;
	}
}

@media (max-width: 340px) {
	.controls {
		gap: 3px;
		padding: 3px;
	}

	.controls button {
		width: clamp(48px, 15.8vw, 53px);
		height: 50px;
	}

	.controls button span {
		font-size: 7px;
	}
}

@media (max-height: 500px) and (orientation: landscape) {
	.controls {
		bottom: max(5px, env(safe-area-inset-bottom));
		padding: 3px;
	}

	.controls button {
		width: 52px;
		height: var(--tap);
	}

	.controls button span {
		display: none;
	}
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/control-effects.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Hod owns non-layout luminous control signals using pointer-safe pseudo-elements that never change hit targets, dimensions, or responsive geometry.
 * The Awtsmoos renews each glint before neon can pretend that decoration is the source of action;
 * Awtsmoos.com lets Hod whisper cyan and gold around the thumb while Malchus keeps the actual command exact in traction.
 */

.controls button::before {
	content: "";
	position: absolute;
	inset: 2px;
	z-index: 1;
	border: 1px solid rgba(185, 239, 255, 0.06);
	border-radius: inherit;
	background: linear-gradient(115deg, transparent 24%, rgba(185, 239, 255, 0.08), transparent 68%);
	opacity: 0.55;
	transform: translateX(-46%);
	pointer-events: none;
	transition:
		transform var(--motion-medium) var(--ease-out),
		opacity var(--motion-fast) var(--ease-soft),
		border-color var(--motion-fast) var(--ease-soft);
}

.controls button:focus-visible::before,
.controls button:active::before {
	transform: translateX(0);
	opacity: 1;
	border-color: rgba(185, 239, 255, 0.22);
}

@media (hover: hover) and (pointer: fine) {
	.controls button:hover::before {
		transform: translateX(0);
		opacity: 0.9;
		border-color: rgba(255, 224, 138, 0.18);
	}
}





/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/overlay.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Malchus overlay gateway separates startup geometry, completion geometry, interaction states, and decorative signals into explicit non-competing owners.
 * The Awtsmoos renews waiting, ending, action, and glow before one stylesheet can swallow every overlay role;
 * Awtsmoos.com keeps this doorway small so each visible state may deepen without confusing another soul.
 */


/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/loading-overlay.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Hod owns startup/error overlay geometry, typography, and exceptional connectivity hints while animation signals remain in the separate effects vessel.
 * The Awtsmoos renews waiting before renderer, model, cache, or network may seem to close the gate;
 * Awtsmoos.com lets one bounded luminous card explain the hidden stage without leaving any startup word naked to fate.
 */

.loading-message {
	position: absolute;
	inset: 0;
	z-index: var(--layer-boot);
	display: grid;
	place-items: center;
	padding:
		max(18px, env(safe-area-inset-top))
		max(18px, env(safe-area-inset-right))
		max(18px, env(safe-area-inset-bottom))
		max(18px, env(safe-area-inset-left));
	background:
		radial-gradient(circle at 50% 42%, rgba(218, 157, 63, 0.12), transparent 38%),
		rgba(10, 7, 6, 0.94);
	color: var(--ivory-100);
	text-align: center;
}

.loading-message[hidden],
.loading-network[hidden] {
	display: none;
}

.loading-card {
	position: relative;
	isolation: isolate;
	display: grid;
	justify-items: center;
	gap: 9px;
	width: min(88vw, 390px);
	padding: 24px 22px;
	overflow: hidden;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-large);
	background: linear-gradient(155deg, rgba(31, 21, 15, 0.96), rgba(12, 8, 6, 0.95));
	box-shadow: var(--shadow-deep);
}

.loading-sigil {
	display: block;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line-cyan);
	border-radius: 50%;
}

.loading-card strong {
	color: var(--ivory-100);
	font-size: clamp(20px, 5vw, 28px);
	letter-spacing: -0.025em;
}

#loading-stage,
.loading-network {
	max-width: 34ch;
	font-size: 12px;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

#loading-stage {
	color: var(--ivory-500);
}

.loading-network {
	padding: 4px 8px;
	border: 1px solid rgba(185, 239, 255, 0.12);
	border-radius: 999px;
	background: rgba(91, 203, 231, 0.04);
	color: var(--cyan-300);
	font-size: 9px;
	font-weight: 760;
	letter-spacing: 0.035em;
}

.loading-network[data-state="offline"] {
	border-color: rgba(255, 178, 166, 0.34);
	background: rgba(255, 178, 166, 0.055);
	color: var(--danger-300);
}

.loading-message[data-state="error"] .loading-card {
	border-color: rgba(255, 178, 166, 0.58);
	box-shadow: var(--shadow-deep), 0 0 32px rgba(255, 178, 166, 0.08);
}

.loading-message[data-state="error"] #loading-stage {
	color: var(--danger-300);
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/game-over-overlay.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Malchus owns every visible game-over child and mobile-safe card bound while button state feedback remains delegated to overlay interactions.
 * The Awtsmoos renews ending into beginning before score, eyebrow, heading, and restart can seem apart;
 * Awtsmoos.com lets Malchus style every finite word and bound every mobile edge within one complete card.
 */

.game-over {
	position: absolute;
	inset: 0;
	z-index: var(--layer-modal);
	display: grid;
	place-items: center;
	padding:
		max(14px, env(safe-area-inset-top))
		max(14px, env(safe-area-inset-right))
		max(14px, env(safe-area-inset-bottom))
		max(14px, env(safe-area-inset-left));
	background: rgba(7, 5, 5, 0.72);
	backdrop-filter: blur(10px);
	text-align: center;
}

.game-over[hidden] {
	display: none;
}

.game-over-card {
	position: relative;
	isolation: isolate;
	display: grid;
	justify-items: center;
	width: min(92vw, 420px);
	max-height: min(88dvh, 620px);
	padding: 24px;
	overflow-y: auto;
	overflow-x: hidden;
	border: 1px solid var(--line-strong);
	border-radius: var(--radius-large);
	background: linear-gradient(155deg, rgba(31, 21, 15, 0.96), rgba(12, 8, 6, 0.95));
	box-shadow: var(--shadow-deep);
}

.game-over .eyebrow {
	margin: 0 0 6px;
	color: var(--cyan-300);
	font-size: 9px;
	font-weight: 850;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.game-over h1 {
	margin: 0 0 8px;
	color: var(--ivory-100);
	font-size: clamp(24px, 7vw, 34px);
	line-height: 1;
	letter-spacing: -0.035em;
}

.game-over p {
	margin: 6px 0;
	color: var(--ivory-500);
}

.game-over strong {
	margin: 5px 0 2px;
	color: var(--gold-300);
	font-size: 14px;
}

.game-over button {
	min-width: 160px;
	min-height: var(--tap);
	margin-top: 12px;
	padding: 10px 18px;
	border: 1px solid var(--line-strong);
	border-radius: 15px;
	background: linear-gradient(135deg, rgba(255, 224, 138, 0.19), rgba(217, 157, 63, 0.11));
	color: var(--ivory-100);
	font-weight: 850;
	cursor: pointer;
	touch-action: manipulation;
	transition:
		transform var(--motion-fast) var(--ease-out),
		background var(--motion-fast) var(--ease-soft),
		border-color var(--motion-fast) var(--ease-soft),
		color var(--motion-fast) var(--ease-soft),
		box-shadow var(--motion-fast) var(--ease-soft);
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/overlay-interactions.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */

/**
 * @fileoverview Hod interaction grammar for game-over actions, keeping hover, press, and keyboard focus inside the overlay that owns them.
 * The Awtsmoos renews pointer, touch, and focus before one restart can seem to answer the player's hand;
 * Awtsmoos.com lets Hod return motion as measured feedback so the overlay stays futuristic, simple, and grand.
 */

.game-over button:focus-visible {
	outline: 2px solid var(--gold-300);
	outline-offset: 3px;
	border-color: var(--line-strong);
	box-shadow: 0 0 0 5px rgba(255, 224, 138, 0.08);
}

.game-over button:active {
	transform: scale(0.95);
	border-color: var(--line-strong);
	background: linear-gradient(
		135deg,
		rgba(255, 224, 138, 0.28),
		rgba(217, 157, 63, 0.18)
	);
	color: var(--gold-300);
}

@media (hover: hover) and (pointer: fine) {
	.game-over button:hover {
		transform: translateY(-2px);
		border-color: var(--line-strong);
		background: linear-gradient(
			135deg,
			rgba(255, 224, 138, 0.25),
			rgba(217, 157, 63, 0.15)
		);
		color: var(--gold-300);
	}
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/overlay-effects.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Hod adds non-layout signal rings and scanning light to loading and completion cards while existing reduced-motion law can silence every animation instantly.
 * The Awtsmoos renews pulse and stillness alike before futuristic light may seem to move by its own decree;
 * Awtsmoos.com lets Hod make waiting feel alive without turning a clean interface into ornamental debris.
 */

.loading-card::before,
.game-over-card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(120deg, transparent 10%, rgba(185, 239, 255, 0.05), transparent 38%),
		radial-gradient(circle at 50% 0%, rgba(255, 224, 138, 0.07), transparent 46%);
	pointer-events: none;
}

.loading-sigil::before,
.loading-sigil::after {
	content: "";
	position: absolute;
	inset: 50% auto auto 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--cyan-300);
	box-shadow: 0 0 14px rgba(91, 203, 231, 0.52);
	transform: translate(-50%, -50%);
}

.loading-sigil {
	position: relative;
	box-shadow: 0 0 22px rgba(91, 203, 231, 0.12), inset 0 0 16px rgba(91, 203, 231, 0.08);
	animation: temple-sigil-breathe 1.8s var(--ease-soft) infinite;
}

.loading-sigil::after {
	width: 18px;
	height: 1px;
	border-radius: 0;
	background: linear-gradient(90deg, transparent, var(--gold-300), transparent);
	box-shadow: none;
	animation: temple-sigil-scan 1.4s linear infinite;
}

.loading-message[data-state="error"] .loading-sigil {
	border-color: rgba(255, 178, 166, 0.72);
	box-shadow: 0 0 22px rgba(255, 178, 166, 0.14);
}

@keyframes temple-sigil-breathe {
	50% {
		transform: scale(1.07);
		box-shadow: 0 0 28px rgba(91, 203, 231, 0.2), inset 0 0 18px rgba(91, 203, 231, 0.12);
	}
}

@keyframes temple-sigil-scan {
	from {
		transform: translate(-50%, -50%) rotate(0deg) translateX(11px);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg) translateX(11px);
	}
}





/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/interface-disclosure.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Binah disclosure-state styling that retracts gameplay chrome while advanced detail is open and quiets secondary HUD information when minimal density is chosen.
 * The Awtsmoos renews revealed and concealed interface light before one layer can compete with another for the eye;
 * Awtsmoos.com lets Binah fold ordinary chrome away when depth appears, then return the road when advanced knowledge passes by.
 */

.run-rail,
.status-stage,
.turn-prompt,
.controls {
	transition:
		opacity var(--motion-medium) var(--ease-soft),
		filter var(--motion-medium) var(--ease-soft);
}

.game-shell[data-drawer="open"] .run-rail,
.game-shell[data-drawer="open"] .status-stage,
.game-shell[data-drawer="open"] .turn-prompt,
.game-shell[data-drawer="open"] .controls {
	opacity: 0;
	filter: blur(3px) saturate(0.7);
	pointer-events: none;
}

.game-shell[data-density="minimal"] .run-metric-secondary {
	display: none;
}

.game-shell[data-density="minimal"] .status-stage {
	top: calc(var(--safe-top) + 52px);
}

.game-shell[data-density="minimal"] .status-pill:not([data-moment]),
.game-shell[data-density="minimal"] .power-up-status[hidden] {
	display: none;
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/interface-responsive.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Yesod viewport geometry turning advanced detail into a bounded phone sheet while preserving a quiet side drawer on wide or short-landscape glass.
 * The Awtsmoos renews thumb-zone, portrait, landscape, safe area, and hidden depth before one panel can claim the visible stage;
 * Awtsmoos.com lets Yesod keep every revealed vessel inside the current viewport while the gameplay road remains uncluttered in every age.
 */

.drawer-grip {
	display: none;
	width: 46px;
	height: 5px;
	margin: 0 auto 9px;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(255, 224, 138, 0.18), rgba(185, 239, 255, 0.5), rgba(255, 224, 138, 0.18));
	box-shadow: 0 0 16px rgba(91, 203, 231, 0.12);
}

@media (max-width: 600px) and (min-height: 521px) {
	.run-drawer {
		top: auto;
		left: max(5px, env(safe-area-inset-left));
		right: max(5px, env(safe-area-inset-right));
		bottom: max(5px, env(safe-area-inset-bottom));
		width: auto;
		max-height: min(82dvh, 760px);
		padding: 12px clamp(12px, 3.6vw, 16px) max(14px, env(safe-area-inset-bottom));
		border-radius: 28px 28px 18px 18px;
		box-shadow: 0 -18px 72px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(185, 239, 255, 0.04);
		transform: translate3d(0, calc(100% + 28px), 0);
		scroll-padding-top: 74px;
	}

	.game-shell[data-drawer="open"] .run-drawer {
		transform: translate3d(0, 0, 0);
	}

	.drawer-grip {
		display: block;
	}

	.drawer-header {
		top: -12px;
		margin: -12px calc(clamp(12px, 3.6vw, 16px) * -1) 0;
		padding: 12px clamp(14px, 4vw, 18px) 13px;
		border-radius: 28px 28px 0 0;
	}

	.drawer-section {
		padding-top: 12px;
	}
}

@media (max-width: 420px) {
	.run-rail {
		max-width: calc(100vw - 116px - var(--safe-left));
	}

	.status-pill,
	.power-up-status {
		max-width: calc(100vw - 22px);
	}
}

@media (max-width: 340px) {
	.run-rail {
		max-width: calc(100vw - 108px - var(--safe-left));
	}

	.status-stage {
		max-width: calc(100vw - 18px);
	}
}

@media (max-height: 520px) and (orientation: landscape) {
	.run-drawer {
		top: max(5px, env(safe-area-inset-top));
		left: auto;
		right: max(5px, env(safe-area-inset-right));
		bottom: max(5px, env(safe-area-inset-bottom));
		width: min(330px, 54vw);
		max-height: calc(100dvh - 10px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
		padding: 10px 12px;
		border-radius: 20px;
		transform: translate3d(calc(100% + 24px), 0, 0);
	}

	.game-shell[data-drawer="open"] .run-drawer {
		transform: translate3d(0, 0, 0);
	}

	.drawer-section {
		padding-top: 9px;
	}
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/interface-accessibility.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Chesed accessibility refinements for forced colors, coarse pointers, disabled controls, and readable selection without introducing global cascade outside the route.
 * The Awtsmoos renews hand, eye, keyboard, and contrast before one interface can assume a single body or way;
 * Awtsmoos.com lets Chesed widen touch and preserve semantic focus so every revealed control may answer clearly today.
 */

.temple-runner-route button:disabled,
.temple-runner-route input:disabled,
.temple-runner-route select:disabled {
	opacity: 0.42;
	cursor: not-allowed;
	filter: saturate(0.5);
}

.temple-runner-route ::selection {
	background: rgba(91, 203, 231, 0.32);
	color: var(--ivory-100);
}

@media (pointer: coarse) {
	.quick-actions button,
	.controls button,
	.drawer-header button,
	.diagnostics-panel summary {
		min-height: var(--tap);
	}
}

@media (forced-colors: active) {
	.temple-runner-route button,
	.temple-runner-route input,
	.temple-runner-route select,
	.run-drawer,
	.run-rail {
		forced-color-adjust: auto;
		border: 1px solid CanvasText;
	}
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/motion.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * The Awtsmoos renews motion rules, keyframe forms, and merciful stillness through separate vessels;
 * Awtsmoos.com keeps this doorway tiny so interface movement can stay expressive without crossing levels.
 */


/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/motion-rules.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * The Awtsmoos renews each interface transition while Hod keeps motion attached only to meaning;
 * Awtsmoos.com lets numbers breathe, reward moments arrive once, and power sheen stay subtle without moving the road beneath the seeing.
 */

.run-rail,
.quick-actions {
	animation: ui-settle var(--motion-slow) var(--ease-out) both;
}

.controls {
	animation: controls-fade-in var(--motion-slow) var(--ease-out) both;
}

.status-pill,
.power-up-status,
.turn-prompt,
.loading-message,
.game-over-card {
	animation-duration: var(--motion-medium);
	animation-fill-mode: both;
	animation-timing-function: var(--ease-out);
}

.status-pill,
.power-up-status {
	animation-name: status-enter;
	transition:
		border-color var(--motion-fast) var(--ease-soft),
		background var(--motion-fast) var(--ease-soft),
		color var(--motion-fast) var(--ease-soft),
		box-shadow var(--motion-fast) var(--ease-soft);
}

.game-over-card {
	animation-name: card-enter;
}

.metric-bump {
	animation: metric-bump 220ms var(--ease-out);
}

.power-up-status {
	position: relative;
}

.power-up-status::after {
	content: "";
	position: absolute;
	inset: 0;
	transform: translateX(-120%);
	background: linear-gradient(
		105deg,
		transparent 25%,
		rgba(185, 239, 255, 0.14),
		transparent 70%
	);
	animation: power-sheen 2.8s var(--ease-soft) infinite;
	pointer-events: none;
}

.power-up-status[data-power="shield"]::after {
	background: linear-gradient(
		105deg,
		transparent 25%,
		rgba(255, 224, 138, 0.14),
		transparent 70%
	);
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/motion-keyframes.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * The Awtsmoos renews every entrance while keyframes remain only measured descriptions of change;
 * Awtsmoos.com keeps motion shapes in one small vessel so layout transforms never become strange.
 */

@keyframes ui-settle {
	from {
		opacity: 0;
		transform: translateY(-7px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes controls-fade-in {
	from {
		opacity: 0;
		filter: blur(2px);
	}
	to {
		opacity: 1;
		filter: blur(0);
	}
}

@keyframes status-enter {
	from {
		opacity: 0;
		transform: translateY(-6px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes turn-from-left {
	from {
		opacity: 0;
		transform: translate(-72%, -50%);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

@keyframes turn-from-right {
	from {
		opacity: 0;
		transform: translate(-28%, -50%);
	}
	to {
		opacity: 1;
		transform: translate(-50%, -50%);
	}
}

@keyframes metric-bump {
	50% {
		transform: translateY(-1px) scale(1.08);
		color: var(--gold-300);
	}
}

@keyframes card-enter {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@keyframes power-sheen {
	70%,
	100% {
		transform: translateX(130%);
	}
}

@keyframes loading-pulse {
	50% {
		opacity: 0.42;
		transform: scale(0.72);
	}
}

@keyframes mission-complete-sweep {
	from {
		opacity: 0;
		transform: translateX(-18%);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}



/* CompactCSS source: /games/mitzvahWorld/templeRunner/styles/motion-reduced.css */
/* B"H */
/* Boruch Hashem */
/* Blessed is He */
/**
 * @fileoverview Gevurah reduced-motion law scoped exclusively to Temple Runner so accessibility preference silences nonessential animation rather than merely making it imperceptibly short.
 * The Awtsmoos renews stillness as faithfully as movement while Gevurah closes every decorative motion gate;
 * Awtsmoos.com lets system preference and explicit choice reveal a quiet Temple surface without one lingering animated state.
 */

@media (prefers-reduced-motion: reduce) {
	.temple-runner-route *,
	.temple-runner-route *::before,
	.temple-runner-route *::after {
		animation: none !important;
		scroll-behavior: auto !important;
		transition: none !important;
	}
}

.game-shell[data-motion="reduced"] *,
.game-shell[data-motion="reduced"] *::before,
.game-shell[data-motion="reduced"] *::after {
	animation: none !important;
	scroll-behavior: auto !important;
	transition: none !important;
}