.maze-page {
	max-width: 1040px;
	margin: 0 auto;
}

.maze-page--play {
	max-width: 720px;
}

.maze-play-card {
	background: #ffffff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(16, 35, 55, 0.12);
}

.maze-play-header {
	text-align: center;
	padding: 24px 20px 0;
}

.maze-play-title {
	margin: 0 0 14px;
	font-family: "Courier New", Courier, monospace;
	font-size: 24px;
	font-weight: bold;
	line-height: 1.15;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #1f3a57;
}

.maze-play-emblem {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 220px;
	margin: 0 auto 18px;
}

.maze-play-emblem-line {
	flex: 1;
	height: 1px;
	background: rgba(31, 58, 87, 0.35);
}

.maze-play-emblem-line::before,
.maze-play-emblem-line::after {
	content: none;
}

.maze-play-emblem-icon {
	font-size: 20px;
	line-height: 1;
	color: #1f3a57;
}

.maze-hud {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	background: #1f3a57;
	color: #ffffff;
	padding: 12px 16px;
	margin: 0;
}

.maze-hud-stat {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	line-height: 1;
}

.maze-hud-icon {
	font-size: 16px;
	line-height: 1;
}

.maze-hud-icon--heart {
	color: #e85d5d;
}

.maze-hud-label {
	font-weight: 600;
	opacity: 0.92;
}

.maze-hud-value {
	font-weight: bold;
	min-width: 1.2em;
}

.maze-hud-quit-btn {
	appearance: none;
	margin-left: auto;
	border: 0;
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 13px;
	font-weight: bold;
	color: #1f3a57;
	background: #ffffff;
	cursor: pointer;
	white-space: nowrap;
}

.maze-hud-quit-btn:hover,
.maze-hud-quit-btn:focus {
	background: #e8eef5;
	outline: none;
}

.maze-layout,
.maze-play-area {
	width: 100%;
}

.maze-play-area {
	padding: 16px 16px 20px;
	box-sizing: border-box;
}

.maze-start {
	margin: 0;
}

.maze-start-card {
	display: flex;
	flex-wrap: wrap;
	background: #1f3a57;
	border: 4px solid #1f3a57;
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(16, 35, 55, 0.25);
}

.maze-start-sidebar {
	flex: 0 0 280px;
	max-width: 100%;
	background: #000000;
	color: #ffffff;
	padding: 28px 24px 24px;
	box-sizing: border-box;
}

.maze-start-title {
	margin: 0 0 18px;
	font-family: "Courier New", Courier, monospace;
	font-size: 22px;
	font-weight: bold;
	line-height: 1.15;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
}

.maze-start-emblem {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 22px;
}

.maze-start-emblem-line {
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.45);
}

.maze-start-emblem-icon {
	font-size: 22px;
	line-height: 1;
	opacity: 0.95;
}

.maze-start-intro {
	margin: 0 0 24px;
	font-size: 15px;
	line-height: 1.55;
	color: #f0f0f0;
}

.maze-start-best {
	background: #e8e2cf;
	border: 1px solid #c8c0aa;
	border-radius: 4px;
	color: #2f3440;
	padding: 14px 14px 12px;
}

.maze-start-best-title {
	margin: 0 0 12px;
	font-family: "Courier New", Courier, monospace;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
	color: #2f3440;
}

.maze-start-best-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.maze-start-best-list li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.35;
}

.maze-start-best-list li:last-child {
	margin-bottom: 0;
}

.maze-start-best-icon {
	display: inline-flex;
	width: 18px;
	justify-content: center;
	flex-shrink: 0;
	opacity: 0.85;
}

.maze-start-best-empty {
	margin: 0;
	font-size: 14px;
	line-height: 1.45;
	color: #4a5568;
	font-style: italic;
}

.maze-start-hero {
	position: relative;
	flex: 1 1 360px;
	min-width: 0;
	min-height: 360px;
	background: #58c8d8;
}

.maze-start-canvas {
	display: block;
	width: 100%;
	height: auto;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.maze-start-actions {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 0 20px 22px;
	pointer-events: none;
}

.maze-start-actions > * {
	pointer-events: auto;
}

.maze-start-enter-btn {
	appearance: none;
	border: 0;
	border-radius: 999px;
	padding: 12px 28px;
	font-size: 16px;
	font-weight: bold;
	color: #ffffff;
	background: linear-gradient(180deg, #4a86e8 0%, #2b61cf 55%, #1a45a0 100%);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.maze-start-enter-btn:hover,
.maze-start-enter-btn:focus {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
	outline: none;
}

.maze-start-enter-btn:disabled {
	opacity: 0.65;
	cursor: wait;
	transform: none;
}

.maze-start-help-link {
	appearance: none;
	border: 0;
	background: transparent;
	color: #1a45a0;
	font-size: 14px;
	font-weight: bold;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
}

.maze-start-help-link:hover,
.maze-start-help-link:focus {
	color: #0f3278;
	outline: none;
}

.maze-start-actions .maze-message {
	margin: 4px 0 0;
	text-align: center;
	color: #ffffff;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
	font-weight: bold;
}

.maze-help-text p {
	margin: 0 0 12px;
	line-height: 1.5;
}

.maze-help-text p:last-child {
	margin-bottom: 0;
}

.maze-message {
	margin-top: 12px;
	color: #b42318;
}

.maze-viewport-wrap {
	position: relative;
	background: #000000;
	border: 3px solid #8844aa;
	border-radius: 4px;
	padding: 8px;
	overflow: hidden;
	touch-action: manipulation;
	cursor: pointer;
}

.maze-viewport {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.maze-status-message {
	text-align: center;
	color: #8b1a1a;
	font-weight: bold;
	margin: 10px 0 0;
	min-height: 1.4em;
}

.maze-controls {
	margin-top: 16px;
	text-align: center;
}

.maze-controls-row {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 8px;
	flex-wrap: wrap;
}

.maze-move-btn {
	appearance: none;
	min-width: 100px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	padding: 12px 18px;
	color: #1f3a57;
	background: #ffffff;
	border: 1px solid #c8d0dc;
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(16, 35, 55, 0.08);
	cursor: pointer;
}

.maze-move-btn:hover,
.maze-move-btn:focus {
	background: #f4f7fb;
	border-color: #1f3a57;
	outline: none;
}

.maze-help {
	text-align: center;
	color: #667085;
	margin-top: 10px;
	font-size: 13px;
}

.maze-touch-controls {
	display: none;
	position: absolute;
	top: 8px;
	right: 8px;
	bottom: 8px;
	left: 8px;
	inset: 8px;
	z-index: 3;
	pointer-events: auto;
	touch-action: manipulation;
}

.maze-touch-controls.is-active {
	display: block;
}

.maze-touch-btn {
	position: absolute;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	touch-action: manipulation;
	pointer-events: auto;
}

.maze-touch-btn--left {
	left: 0;
	top: 0;
	width: 20%;
	height: 80%;
	z-index: 2;
}

.maze-touch-btn--right {
	right: 0;
	top: 0;
	width: 20%;
	height: 80%;
	z-index: 2;
}

.maze-touch-btn--forward {
	left: 20%;
	top: 0;
	width: 60%;
	height: 80%;
	z-index: 1;
}

.maze-touch-btn--back {
	left: 0;
	bottom: 0;
	width: 100%;
	height: 20%;
	z-index: 3;
}

.maze-viewport-wrap.maze-touch-flash-forward .maze-touch-btn--forward,
.maze-viewport-wrap.maze-touch-flash-back .maze-touch-btn--back,
.maze-viewport-wrap.maze-touch-flash-left .maze-touch-btn--left,
.maze-viewport-wrap.maze-touch-flash-right .maze-touch-btn--right {
	background: rgba(255, 255, 255, 0.12);
}

.maze-help--touch {
	display: none;
}

body.maze-modal-open {
	overflow: hidden;
}

.maze-modal-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(16, 35, 55, 0.65);
	z-index: 10000;
}

.maze-modal-backdrop[hidden],
.maze-modal[hidden] {
	display: none !important;
}

.maze-modal {
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: min(92vw, 520px);
	max-height: var(--yws-modal-max-height, 70dvh);
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	z-index: 10001;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.maze-modal-header {
	background: #1f3a57;
	color: #ffffff;
	padding: 14px 18px;
	border-radius: 10px 10px 0 0;
	flex-shrink: 0;
}

.maze-modal-header h2 {
	margin: 0;
	font-size: 20px;
	color: #ffffff;
	font-weight: bold;
}

.maze-modal-body {
	padding: 18px;
	overflow-y: auto;
	flex: 1 1 auto;
	min-height: 0;
	-webkit-overflow-scrolling: touch;
}

.maze-question-difficulty {
	display: inline-block;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #1f3a57;
	background: #e8eef5;
	border-radius: 4px;
	padding: 4px 8px;
	margin: 0 0 12px;
}

.maze-question-text,
.maze-result-text,
.maze-level-summary,
.maze-gameover-text {
	line-height: 1.5;
	margin: 0 0 16px;
	white-space: pre-line;
}

.maze-answer-buttons {
	display: grid;
	gap: 10px;
}

.maze-answer-btn {
	text-align: left;
	white-space: normal;
}

.maze-result-points {
	font-weight: bold;
	color: #2d8659;
	margin: 0 0 16px;
}

.maze-level-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.maze-quit-text {
	line-height: 1.5;
	margin: 0 0 16px;
}

@media (max-width: 720px) {
	.maze-page--play {
		max-width: 100%;
	}

	.maze-play-card {
		border-radius: 0;
		box-shadow: none;
	}

	.maze-play-area {
		padding: 12px 10px 16px;
	}

	.maze-start-sidebar {
		flex-basis: 100%;
	}

	.maze-start-hero {
		min-height: 280px;
	}

	.maze-hud {
		font-size: 13px;
	}

	.maze-hud-quit-btn {
		margin-left: 0;
		width: 100%;
		text-align: center;
	}

	.maze-move-btn {
		min-width: 72px;
		padding: 10px 10px;
		font-size: 13px;
	}

	.maze-controls,
	.maze-help--keys {
		display: none;
	}

	.maze-help--touch {
		display: block;
	}

	.maze-touch-controls {
		display: block;
	}

	.maze-viewport {
		pointer-events: none;
	}

	body.maze-modal-open .maze-touch-controls {
		pointer-events: none;
	}

	.maze-modal-backdrop {
		background: rgba(0, 0, 0, 0.78);
	}

	.maze-modal {
		width: 80vw;
		max-width: 80vw;
		max-height: var(--yws-modal-max-height, 70dvh);
		overflow: hidden;
	}

	.maze-modal-body {
		padding: 16px;
	}

	.maze-answer-btn {
		padding: 12px 14px;
		font-size: 15px;
		line-height: 1.35;
	}
}

@media (pointer: coarse) and (min-width: 721px) {
	.maze-controls,
	.maze-help--keys {
		display: none;
	}

	.maze-help--touch {
		display: block;
	}

	.maze-touch-controls {
		display: block;
	}

	.maze-viewport {
		pointer-events: none;
	}

	.maze-modal-backdrop {
		background: rgba(0, 0, 0, 0.78);
	}

	.maze-modal {
		width: 80vw;
		max-width: 80vw;
		max-height: var(--yws-modal-max-height, 70dvh);
		overflow: hidden;
	}
}

.maze-minimap-wrap {
	background: #0a1520;
	border: 2px solid #1a3050;
	border-radius: 4px;
	padding: 4px;
	margin-bottom: 8px;
	width: 208px;
	max-width: 100%;
}

.maze-minimap {
	display: block;
	width: 200px;
	height: 200px;
	max-width: 100%;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

.maze-minimap-note {
	color: #99a6b3;
	font-size: 11px;
	line-height: 1.4;
	margin: 0;
	width: 208px;
	max-width: 100%;
}