html, body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	image-rendering: pixelated;
	font-family: 'Press Start 2P', monospace;
}

/* home ui style */

#home-logo {
	margin: 0;
}

.pixel-title-font {
	color: white;
	font-family: 'Press Start 2P', monospace;
	text-align: center;
	font-size: clamp(42px, 6vw, 56px);
	text-shadow: 2px 2px 0 black;
}
#ui {
	position: absolute;
	inset: 0;                    
	display: flex;
	align-items: safe center;
	justify-content: center;
	pointer-events: none;
	overflow-y: auto;
  }

#ui-fail {
	position: absolute;
	inset: 0;                    
	display: none;
	place-items: center;         
	pointer-events: none;       
  }
  
.ui-panel {
	pointer-events: auto;
	display: grid;
	gap: 12px;
	justify-items: center;
	width: min(520px, 86vw);
	padding: 18px 20px 22px;
	margin: 20px 0;
	background: linear-gradient(135deg, #f7eac7 0%, #f0dca6 60%, #e5cb86 100%);
	border: 4px solid #000;
	box-shadow:
		0px 6px 0px #000,
		0px -6px 0px #000,
		6px 0px 0px #000,
		-6px 0px 0px #000,
		0px 12px 0px #00000066,
		6px 6px 0px #00000066,
		-6px 6px 0px #00000066,
		inset 0px 6px 0px #ffffff47;
	text-shadow: 1px 1px 0 #fef6d8;
}

.ui-panel.fail-panel {
	background: linear-gradient(135deg, #f6d8c0 0%, #f0c8ac 60%, #e5b294 100%);
}

.ui-panel .pixel-title-font {
	color: #2c1d35;
	text-shadow:
		2px 2px 0 #000,
		0px 4px 0 #f4d7a1;
}

.ui-kicker {
	margin: 0;
	font-size: 12px;
	color: #543029;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.ui-blurb {
	margin: 0;
	font-size: 12px;
	line-height: 1.6;
	color: #2c1d35;
	text-shadow: none;
	text-align: center;
}

.button-stack {
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	width: clamp(240px, 40vw, 360px);
	margin: 4px auto 0;
	text-align: center;
}

#ui-fail #score {
	font-size: 20px;
	margin: -4px 0 2px;
	color: #2c1d35;
	text-shadow:
		2px 2px 0 #000,
		0px 3px 0 #f4d7a1;
}

.difficulty-chip {
	--accent: #4d7dd7;
	pointer-events: auto;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 6px 14px;
	width: clamp(240px, 52vw, 420px);
	margin: 6px 0 4px;
	padding: 12px 14px;
	border: 4px solid #000;
	background:
		linear-gradient(135deg, var(--accent) 0%, #f7eac7 45%, #e5cb86 100%),
		repeating-linear-gradient(135deg, #ffffff13 0px, #ffffff13 10px, #0000000f 10px, #0000000f 20px);
	box-shadow:
		0px 5px 0px #000,
		0px -5px 0px #000,
		5px 0px 0px #000,
		-5px 0px 0px #000,
		0px 10px 0px #00000038,
		5px 5px 0px #00000038,
		-5px 5px 0px #00000038,
		inset 0px 5px 0px #ffffff2e;
	text-align: left;
	cursor: pointer;
	transition: transform 0.05s ease, box-shadow 0.05s ease, filter 0.15s ease;
}

.difficulty-chip:hover {
	filter: brightness(1.08);
}

.difficulty-chip:active {
	transform: translateY(4px);
	box-shadow:
		0px 5px 0px #000,
		0px -5px 0px #000,
		5px 0px 0px #000,
		-5px 0px 0px #000,
		inset 0px 5px 0px #00000038;
}

.difficulty-chip .chip-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #32202a;
}

.difficulty-chip .chip-value {
	font-size: 16px;
	color: #fdf6d7;
	text-shadow:
		2px 2px 0 #000,
		0px 3px 0 #2c1d35;
}

.difficulty-chip .chip-note {
	font-size: 10px;
	color: #2c1d35;
	opacity: 0.8;
	text-align: right;
}

.difficulty-chip.compact {
	width: auto;
	min-width: 180px;
	margin: 0;
	padding: 10px 12px;
}
  
#ui-fail button,
#ui button,
#learn-more-popup .pixel-button,
#difficulty-popup .pixel-button {
	background-color: #c94b4b;            /* washed-out red */
	color: #fff;
	font-family: "Press Start 2P", monospace;
	font-size: 14px;
	padding: 14px 24px;
	min-height: 52px;
	width: 100%;
	border: 0;
	cursor: pointer;
	image-rendering: pixelated;
  
	box-shadow:
	  0px 5px 0px #000,
	  0px -5px 0px #000,
	  5px 0px 0px #000,
	  -5px 0px 0px #000,
	  0px 10px 0px #00000038,
	  5px 5px 0px #00000038,
	  -5px 5px 0px #00000038,
	  inset 0px 5px 0px #ffffff2e;
	transition: transform 0.05s ease, box-shadow 0.05s ease, filter 0.15s ease;
  }

#ui-fail button:hover,
#ui button:hover,
#learn-more-popup .pixel-button:hover {
	filter: brightness(1.06);
}
#ui-fail button:active,
#ui button:active,
#learn-more-popup .pixel-button:active {
	transform: translateY(5px);
	box-shadow:
	  0px 5px 0px #000,
	  0px -5px 0px #000,
	  5px 0px 0px #000,
	  -5px 0px 0px #000,
	  inset 0px 5px 0px #00000038;
}

.legal-button {
	position: fixed;
	right: 12px;
	bottom: 12px;
	background: #00000090;
	color: #f7eac7;
	border: 3px solid #000;
	font-family: "Press Start 2P", monospace;
	font-size: 10px;
	padding: 6px 10px;
	box-shadow:
		0px 4px 0px #00000066,
		4px 4px 0px #00000066;
	cursor: pointer;
	opacity: 0.65;
	transition: opacity 0.15s ease, transform 0.05s ease, box-shadow 0.05s ease;
	z-index: 9;
}

.legal-button:hover {
	opacity: 1;
}

.legal-button:active {
	transform: translateY(3px);
	box-shadow:
		0px 4px 0px #00000066 inset;
}

/* learn more popup */

#learn-more-popup {
	position: fixed;
	inset: 0;
	display: none;
	align-items: safe center;
	justify-content: center;
	padding: 24px;
	overflow-y: auto;
	background: repeating-linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.6) 0px,
		rgba(0, 0, 0, 0.6) 8px,
		rgba(0, 0, 0, 0.55) 8px,
		rgba(0, 0, 0, 0.55) 16px
	);
	backdrop-filter: blur(2px);
	z-index: 10;
	pointer-events: auto;
}

#learn-more-popup.active {
	display: flex;
}

.popup-card {
	width: min(760px, 94vw);
	background: linear-gradient(135deg, #f7eac7 0%, #f0dca6 60%, #e5cb86 100%);
	color: #201018;
	padding: 18px 18px 22px;
	margin: 20px 0;
	box-shadow:
		0px 6px 0px #000,
		0px -6px 0px #000,
		6px 0px 0px #000,
		-6px 0px 0px #000,
		0px 12px 0px #00000066,
		6px 6px 0px #00000066,
		-6px 6px 0px #00000066,
		inset 0px 6px 0px #ffffff47;
	border: 4px solid #000;
	text-shadow: 1px 1px 0 #fef6d8;
}

.popup-header {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr auto;
	gap: 12px;
	margin-bottom: 12px;
}

.popup-title {
	font-size: clamp(28px, 4vw, 36px);
	margin: 0;
	text-align: left;
}

.popup-kicker {
	font-size: 12px;
	margin: 0;
	color: #543029;
	letter-spacing: 1px;
}

.popup-close {
	justify-self: end;
	min-width: 128px;
}

.popup-body {
	background: repeating-linear-gradient(
		90deg,
		#fff6d9 0px,
		#fff6d9 18px,
		#f4e3b0 18px,
		#f4e3b0 36px
	);
	border: 4px solid #000;
	padding: 18px;
	box-shadow: inset 0px 6px 0px #00000022;
}

.popup-lede {
	margin-top: 0;
	margin-bottom: 12px;
	font-size: 14px;
	color: #2c1d35;
	text-shadow: none;
}

.popup-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
}

.popup-tile {
	background: #2d1f37;
	color: #f4d7a1;
	border: 4px solid #000;
	padding: 14px;
	box-shadow:
		0px 4px 0px #000,
		0px -4px 0px #000,
		4px 0px 0px #000,
		-4px 0px 0px #000,
		inset 0px 4px 0px #ffffff22;
}

.popup-tile h3 {
	margin: 0 0 10px 0;
	font-size: 16px;
	color: #ffe7b0;
	text-shadow: 2px 2px 0 #000;
}

.popup-tile ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.popup-tile li {
	position: relative;
	padding-left: 18px;
	font-size: 13px;
	line-height: 1.8;
	text-shadow: none;
}

.popup-tile li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	background: #c94b4b;
	box-shadow: 0px 0px 0px 2px #000;
}

#difficulty-popup {
	position: fixed;
	inset: 0;
	display: none;
	align-items: safe center;
	justify-content: center;
	padding: 24px;
	overflow-y: auto;
	background: repeating-linear-gradient(
		90deg,
		rgba(28, 18, 41, 0.8) 0px,
		rgba(28, 18, 41, 0.8) 10px,
		rgba(20, 10, 30, 0.72) 10px,
		rgba(20, 10, 30, 0.72) 20px
	);
	backdrop-filter: blur(2px);
	z-index: 11;
	pointer-events: auto;
}

#difficulty-popup.active {
	display: flex;
}

.difficulty-card {
	position: relative;
	outline: 3px dashed #00000036;
	outline-offset: -9px;
}

.difficulty-body {
	background:
		radial-gradient(circle at 22% 18%, rgba(77, 125, 215, 0.22), transparent 26%),
		radial-gradient(circle at 78% 14%, rgba(244, 216, 90, 0.24), transparent 28%),
		repeating-linear-gradient(
			-45deg,
			#fff6d9 0px,
			#fff6d9 18px,
			#f4e3b0 18px,
			#f4e3b0 36px
		);
	border: 4px solid #000;
	padding: 16px;
	box-shadow: inset 0px 6px 0px #00000022;
}

.difficulty-header-row {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) auto;
	gap: 12px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}

@media (max-width: 480px) {
	.difficulty-header-row {
		grid-template-columns: 1fr;
	}
	.difficulty-chip.compact {
		justify-self: start;
	}
}

.difficulty-current {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.difficulty-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
	margin: 4px 0 10px;
}

.difficulty-option {
	--accent: #4d7dd7;
	display: grid;
	gap: 6px;
	align-content: start;
	font-family: "Press Start 2P", monospace;
	text-align: left;
	background:
		linear-gradient(135deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.02) 40%, rgba(255, 255, 255, 0.12) 100%),
		linear-gradient(135deg, var(--accent) 0%, #f7eac7 78%);
	color: #fdf6d7;
	border: 4px solid #000;
	padding: 14px;
	box-shadow:
		0px 5px 0px #000,
		0px -5px 0px #000,
		5px 0px 0px #000,
		-5px 0px 0px #000,
		0px 8px 0px #00000032,
		5px 5px 0px #00000032,
		-5px 5px 0px #00000032,
		inset 0px 4px 0px #ffffff28;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: transform 0.05s ease, box-shadow 0.05s ease, filter 0.15s ease;
}

.difficulty-option::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.12) 0px,
		rgba(255, 255, 255, 0.12) 6px,
		transparent 6px,
		transparent 12px
	);
	opacity: 0;
	transition: opacity 0.2s ease;
	pointer-events: none;
}

.difficulty-option:hover {
	filter: brightness(1.04);
}

.difficulty-option:hover::after {
	opacity: 0.7;
}

.difficulty-option:active {
	transform: translateY(4px);
	box-shadow:
		0px 5px 0px #000,
		0px -5px 0px #000,
		5px 0px 0px #000,
		-5px 0px 0px #000,
		inset 0px 4px 0px #00000032;
}

.difficulty-option.active {
	outline: 3px solid #000;
	box-shadow:
		0px 6px 0px #000,
		6px 6px 0px #00000044,
		-6px 6px 0px #00000044,
		inset 0px 5px 0px #ffffff40;
}

.difficulty-option .difficulty-name {
	font-size: 18px;
	font-weight: bold;
	text-shadow:
		2px 2px 0 #000,
		0px 3px 0 rgba(0, 0, 0, 0.35);
}

.difficulty-badge {
	--accent: #4d7dd7;
	margin: 2px 0 6px;
	font-size: 14px;
	color: var(--accent);
	text-shadow:
		2px 2px 0 #000,
		0px 3px 0 #f4d7a1;
}

@media (max-width: 720px) {
	.popup-header {
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.popup-close {
		width: 100%;
	}

	.popup-body {
		padding: 14px;
	}

	.difficulty-current {
		flex-direction: column;
	}
}