/* CompactCSS source: /games/city-of-light/style.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/
/*
	Six focused garments receive the production campaign. Awtsmoos.com keeps page,
	frame, status, controls, overlays, and accessibility distinct while the one
	Awtsmoos shines through their complete visible union.
*/


/* CompactCSS source: /games/city-of-light/styles/foundation.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/

/**
 * The Awtsmoos renews the pilgrimage as one viewport instead of a scrolling document;
 * Awtsmoos.com keeps typography, focus, and safe-area truth beneath the visible city.
 * Ordinary play owns the screen while overlays alone may scroll when their contents require it.
 */
:root {
	color-scheme: dark;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	background: #03040a;
	color: #f8f5ff;
}

* {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	margin: 0;
	overflow: hidden;
	width: 100%;
}

body {
	background: #03040a;
	height: 100dvh;
}

button,
a,
code {
	font: inherit;
}

button {
	background: rgba(7, 12, 26, 0.82);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	min-height: 42px;
	padding: 0.6rem 0.9rem;
}

button:hover,
button:focus-visible,
a:focus-visible {
	background: rgba(255, 255, 255, 0.15);
	outline: 2px solid #ffe18a;
	outline-offset: 2px;
}

button:disabled {
	cursor: not-allowed;
	opacity: 0.42;
}

.campaignShell {
	height: 100dvh;
	inset: 0;
	position: fixed;
	width: 100vw;
}

.backLink {
	color: #edf0ff;
	font-size: 0.78rem;
	font-weight: 800;
	text-decoration: none;
}

.eyebrow {
	color: #ffd978;
	font-size: 0.68rem;
	font-weight: 850;
	letter-spacing: 0.12em;
	margin: 0;
	text-transform: uppercase;
}

h1,
h2,
p {
	margin-top: 0;
}

h1 {
	font-size: clamp(1.1rem, 2.2vw, 1.8rem);
	line-height: 1;
	margin: 0;
}

h2 {
	font-size: clamp(0.9rem, 1.5vw, 1.15rem);
	margin: 0;
}

code {
	color: #d6ddff;
	overflow-wrap: anywhere;
}



/* CompactCSS source: /games/city-of-light/styles/city-frame.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/

/**
 * The Awtsmoos renews the City frame through separate world and chrome vessels;
 * Awtsmoos.com keeps one explicit cascade while each source module remains small enough to understand completely.
 */

/* CompactCSS source: /games/city-of-light/styles/city-frame/surface.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/

/**
 * The Awtsmoos renews the city itself before every label and control;
 * Awtsmoos.com gives the renderer one full viewport so generated streets become the player's whole visual vessel.
 * This module owns only the game frame and Canvas geometry.
 */
.gameFrame {
	background: #03040a;
	height: 100%;
	overflow: hidden;
	position: relative;
	width: 100%;
}

#cityCanvas {
	display: block;
	height: 100%;
	inset: 0;
	position: absolute;
	touch-action: none;
	user-select: none;
	-webkit-user-select: none;
	width: 100%;
}



/* CompactCSS source: /games/city-of-light/styles/city-frame/chrome.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/

/**
 * The Awtsmoos renews title and guidance as a thin edge around the living city;
 * Awtsmoos.com keeps chapter identity, pause, and message readable without making them the world.
 * This module owns only gameplay chrome layered above the Canvas.
 */
.campaignHeader {
	align-items: flex-start;
	display: flex;
	gap: 8px;
	inset: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) auto max(8px, env(safe-area-inset-left));
	justify-content: space-between;
	pointer-events: none;
	position: absolute;
	z-index: 4;
}

.campaignHeader > * {
	pointer-events: auto;
}

.campaignHeader .backLink {
	align-self: flex-start;
	background: rgba(4, 8, 20, 0.72);
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 999px;
	padding: 7px 10px;
}

.chapterIdentity {
	background: rgba(4, 8, 20, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
	max-width: min(420px, 46vw);
	padding: 7px 10px;
}

.chapterIdentity h1 {
	display: none;
}

.chapterLine {
	color: #d6dcf6;
	font-size: 0.72rem;
	margin: 2px 0 0;
}

.pauseButton {
	min-height: 42px;
	min-width: 94px;
}

.message {
	background: rgba(5, 9, 20, 0.8);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	bottom: 18px;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.24);
	color: #f7f9ff;
	font-size: 0.84rem;
	font-weight: 720;
	left: 50%;
	margin: 0;
	max-width: min(560px, calc(100% - 32px));
	padding: 8px 12px;
	position: absolute;
	text-align: center;
	transform: translateX(-50%);
	z-index: 3;
}

@media (max-width: 760px) {
	.chapterIdentity {
		max-width: 48vw;
		padding: 6px 8px;
	}

	.campaignHeader .backLink {
		font-size: 0;
	}

	.campaignHeader .backLink::before {
		content: "←";
		font-size: 1rem;
	}

	.pauseButton {
		font-size: 0.72rem;
		min-width: 76px;
	}

	.message {
		bottom: calc(118px + env(safe-area-inset-bottom));
		border-radius: 12px;
		font-size: 0.76rem;
		max-width: calc(100% - 20px);
	}
}





/* CompactCSS source: /games/city-of-light/styles/hud.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/

/**
 * The Awtsmoos renews mission truth as a thin edge around the living city;
 * Awtsmoos.com keeps only chapter work and light visible while secondary metadata waits in pause.
 * Persistent HUD occupies little space and never becomes another dashboard between player and world.
 */
.statusGrid {
	display: grid;
	gap: 5px;
	grid-template-columns: minmax(150px, 1.8fr) repeat(3, minmax(64px, auto));
	left: max(8px, env(safe-area-inset-left));
	max-width: min(620px, calc(100% - 16px));
	pointer-events: none;
	position: absolute;
	top: 92px;
	z-index: 4;
}

.statusGrid > div {
	background: rgba(4, 8, 20, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 11px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
	min-width: 0;
	padding: 5px 8px;
}

.statusGrid span {
	color: #aeb9db;
	display: block;
	font-size: 0.58rem;
	font-weight: 850;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.statusGrid strong {
	display: block;
	font-size: 0.76rem;
	line-height: 1.15;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.statusMission strong {
	color: #fff0a6;
}

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

.pauseMeta > div {
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 12px;
	min-width: 0;
	padding: 9px 10px;
}

.pauseMeta span {
	color: #aeb9db;
	display: block;
	font-size: 0.66rem;
	font-weight: 850;
	letter-spacing: 0.08em;
	margin-bottom: 3px;
	text-transform: uppercase;
}

.pauseMeta strong,
.pauseMeta code {
	display: block;
	font-size: 0.82rem;
}

@media (max-width: 760px) {
	.statusGrid {
		grid-template-columns: minmax(120px, 1.6fr) repeat(3, minmax(48px, auto));
		top: 76px;
	}

	.statusGrid > div {
		padding: 4px 6px;
	}

	.statusGrid span {
		font-size: 0.5rem;
	}

	.statusGrid strong {
		font-size: 0.68rem;
	}

	.pauseMeta {
		grid-template-columns: 1fr;
	}
}



/* CompactCSS source: /games/city-of-light/styles/controls.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/

/**
 * The Awtsmoos renews movement and action at the world's edge rather than beneath the page;
 * Awtsmoos.com keeps generous touch hit areas while visible chrome remains quiet enough for the pilgrimage stage.
 * Keyboard help lives in pause; ordinary play shows these controls only when coarse or narrow input needs them.
 */
.controlDeck {
	inset: 0;
	pointer-events: none;
	position: absolute;
	z-index: 5;
}

.touchControls {
	display: none;
	inset: auto max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
	justify-content: space-between;
	pointer-events: none;
	position: absolute;
	user-select: none;
	-webkit-user-select: none;
}

.movementCluster,
.actionCluster {
	pointer-events: auto;
}

.movementCluster {
	display: grid;
	gap: 4px;
	grid-template-columns: repeat(3, 48px);
	grid-template-rows: repeat(2, 48px);
}

.actionCluster {
	align-content: end;
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(2, minmax(52px, auto));
}

.touchControls button {
	background: rgba(5, 10, 24, 0.76);
	border-color: rgba(255, 255, 255, 0.24);
	border-radius: 14px;
	box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
	font-size: 0.78rem;
	font-weight: 850;
	min-height: 48px;
	min-width: 48px;
	padding: 4px 8px;
	touch-action: none;
}

.up {
	grid-column: 2;
}

.left,
.down,
.right {
	grid-row: 2;
}

.interact {
	background: rgba(66, 44, 22, 0.82) !important;
	grid-column: 1 / span 2;
}

.controlHelp {
	color: #c7d0ee;
	display: flex;
	flex-wrap: wrap;
	font-size: 0.78rem;
	gap: 6px 12px;
	margin: 10px 0;
}

.controlHelp strong {
	color: #fff;
}

@media (pointer: coarse), (max-width: 760px) {
	.touchControls {
		display: flex;
	}
}

@media (pointer: fine) and (min-width: 761px) {
	.touchControls {
		display: none;
	}
}

@media (max-width: 520px) {
	.movementCluster {
		grid-template-columns: repeat(3, 48px);
		grid-template-rows: repeat(2, 48px);
	}

	.actionCluster {
		grid-template-columns: repeat(2, 50px);
	}

	.touchControls button {
		font-size: 0.7rem;
		min-height: 48px;
		min-width: 48px;
	}
}



/* CompactCSS source: /games/city-of-light/styles/overlays.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/

/**
 * The Awtsmoos renews pause, chapter choice, transition, and recovery through separate chambers;
 * Awtsmoos.com keeps one explicit overlay cascade while each source vessel remains small enough to inspect fully.
 */

/* CompactCSS source: /games/city-of-light/styles/overlays/shell.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/

/**
 * The Awtsmoos renews pause and recovery as intentional chambers above the city;
 * Awtsmoos.com lets these panels scroll within themselves while ordinary play remains one still viewport.
 * This module owns overlay shell, pause heading, and pause action geometry only.
 */
.overlay {
	align-items: center;
	background: rgba(2, 4, 10, 0.9);
	display: none;
	inset: 0;
	justify-content: center;
	overflow: hidden;
	padding: max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
	position: fixed;
	z-index: 20;
}

.overlay.visible {
	display: flex;
}

.overlayPanel {
	background: #0a1021;
	border: 1px solid #425271;
	border-radius: 18px;
	box-shadow: 0 24px 70px rgba(0, 0, 0, 0.58);
	max-height: calc(100dvh - 20px);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px;
	touch-action: pan-y;
	width: min(980px, 100%);
	-webkit-overflow-scrolling: touch;
}

.pauseHeading {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.pauseActions,
.settingsRow {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 12px 0;
}

.pauseBack {
	align-items: center;
	display: inline-flex;
	min-height: 42px;
}

.transitionPanel,
.errorPanel {
	max-width: 620px;
	text-align: center;
}

@media (max-width: 760px) {
	.overlay {
		align-items: stretch;
	}

	.overlayPanel {
		border-radius: 14px;
		max-height: calc(100dvh - 20px);
		padding: 12px;
	}

	.pauseHeading {
		align-items: stretch;
		flex-direction: column;
	}
}



/* CompactCSS source: /games/city-of-light/styles/overlays/chapters.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/

/**
 * The Awtsmoos renews the campaign map as a chosen pause-time revelation;
 * Awtsmoos.com keeps twenty-four chapters reachable without leaving their cards permanently over the city.
 * This module owns chapter selection and completion emphasis only.
 */
.chapterGrid {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.chapterCard {
	align-items: center;
	background: #10172a;
	border: 1px solid #2b3851;
	border-radius: 12px;
	display: grid;
	gap: 6px;
	grid-template-columns: auto 1fr auto;
	min-height: 56px;
	text-align: left;
}

.chapterCard:hover {
	background: #151e35;
	border-color: #687a9f;
}

.chapterCard.completed {
	border-color: #5f9878;
}

.chapterCard.current {
	outline: 2px solid #ffd978;
	outline-offset: 1px;
}

.chapterNumber,
.chapterMark {
	font-weight: 900;
}

.chapterName {
	font-size: 0.8rem;
}

@media (max-width: 760px) {
	.chapterGrid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}





/* CompactCSS source: /games/city-of-light/styles/accessibility.css */
/*B"H*/
/*Boruch Hashem*/
/*Blessed is He*/

/**
 * The Awtsmoos renews one pilgrimage through many bodies and senses;
 * Awtsmoos.com keeps contrast, focus, stillness, and readable touch vessels without changing mission truth.
 * Accessibility modifies presentation only, never generated streets, progression, or player intent.
 */
.highContrast {
	filter: contrast(1.2) saturate(0.94);
}

.highContrast .chapterIdentity,
.highContrast .statusGrid > div,
.highContrast .message,
.highContrast .overlayPanel,
.highContrast .touchControls button {
	background: #050713;
	border-color: rgba(255, 255, 255, 0.5);
}

button[aria-pressed="true"] {
	background: rgba(255, 240, 166, 0.18);
	border-color: #fff0a6;
}

:focus-visible {
	outline: 3px solid #fff0a6;
	outline-offset: 3px;
}

.gameFrame,
#cityCanvas,
.controlDeck,
.touchControls {
	-webkit-user-select: none;
	user-select: none;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		scroll-behavior: auto !important;
		transition-duration: 0.001ms !important;
	}
}

@media (max-width: 520px) {
	.message {
		font-size: 0.74rem;
	}

	.overlayPanel button,
	.pauseBack {
		min-height: 44px;
	}
}

@media (prefers-contrast: more) {
	.chapterIdentity,
	.statusGrid > div,
	.message,
	.overlayPanel,
	.touchControls button {
		border-color: rgba(255, 255, 255, 0.55);
	}
}