/* [sx]-PAC — pseudographic pac-man overlay */

#sx-pacman-overlay {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	background: rgba(4, 5, 14, 0.96);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	touch-action: none;
	font-family: ui-monospace, Menlo, Monaco, Consolas, "Courier New", monospace;
}
#sx-pacman-overlay * {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* close button pinned to the very top right of the page */
.sxp-close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 40;
	width: 48px;
	height: 48px;
	background: rgba(4, 5, 14, 0.8);
	border: 1px solid #2a3cff;
	color: #aab2ff;
	font: inherit;
	font-size: 22px;
	line-height: 1;
	border-radius: 8px;
	cursor: pointer;
}
.sxp-close:hover {
	background: #2a3cff;
	color: #fff;
}
@media (max-width: 640px), (pointer: coarse) {
	.sxp-close {
		top: 8px;
		right: 8px;
		width: 58px;
		height: 58px;
		font-size: 28px;
	}
}

.sxp-frame {
	background: #04050e;
	border: 2px solid #2a3cff;
	border-radius: 8px;
	box-shadow: 0 0 24px rgba(42, 60, 255, 0.45), inset 0 0 60px rgba(42, 60, 255, 0.07);
	padding: 10px 14px 8px;
	transform-origin: center center;
}

/* title above the playfield */
.sxp-title {
	text-align: center;
	padding: 4px 40px 10px;
}
.sxp-title-main {
	color: #ffe737;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	text-shadow: 0 0 10px rgba(255, 231, 55, 0.6);
}
.sxp-title-sub {
	color: #8f99e8;
	font-size: 12px;
	margin-top: 5px;
}

.sxp-hud {
	display: flex;
	gap: 20px;
	color: #aab2ff;
	font-size: 13px;
	letter-spacing: 1px;
	padding: 0 2px 8px;
}
.sxp-hud b {
	color: #fff;
}
.sxp-lives {
	margin-left: auto;
	color: #ffe737;
	font-weight: bold;
	letter-spacing: 2px;
}

.sxp-board {
	position: relative;
	background: #04050e;
	border: 1px solid #141a52;
	overflow: hidden;
}

/* static maze */
.sxp-wall {
	position: absolute;
	width: 36px;
	height: 31px;
	color: #2a3cff;
	font-size: 22px;
	line-height: 31px;
	text-align: center;
	text-shadow: 0 0 6px rgba(42, 60, 255, 0.8);
	user-select: none;
}
.sxp-door {
	position: absolute;
	width: 36px;
	height: 31px;
	color: #ff9ad5;
	font-size: 14px;
	line-height: 31px;
	text-align: center;
	user-select: none;
}

/* pellets */
.sxp-dot {
	position: absolute;
	width: 36px;
	height: 31px;
	color: #f4b08c;
	font-size: 10px;
	line-height: 31px;
	text-align: center;
	user-select: none;
}
.sxp-power {
	color: #ffd23e;
	font-size: 12px;
	font-weight: bold;
	animation: sxp-pulse 0.5s infinite alternate;
}
@keyframes sxp-pulse {
	from { opacity: 0.45; }
	to   { opacity: 1; text-shadow: 0 0 8px rgba(255, 210, 62, 0.9); }
}

/* actors */
.sxp-actor {
	position: absolute;
	left: 0;
	top: 0;
	width: 36px;
	height: 31px;
	transition: transform 0.15s linear;
	will-change: transform;
}
.sxp-pac {
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sxp-pac-ch {
	color: #ffe737;
	font-size: 26px;
	font-weight: bold;
	line-height: 1;
	text-shadow: 0 0 8px rgba(255, 231, 55, 0.6);
}
.sxp-pac-ch[data-dir="left"] { transform: scaleX(-1); }
.sxp-pac-ch[data-dir="up"]   { transform: rotate(-90deg); }
.sxp-pac-ch[data-dir="down"] { transform: rotate(90deg); }
.sxp-pac.dying .sxp-pac-ch {
	animation: sxp-die 1.4s forwards;
}
@keyframes sxp-die {
	60%  { transform: rotate(540deg) scale(0.9); opacity: 1; }
	100% { transform: rotate(720deg) scale(0); opacity: 0; }
}

.sxp-ghost {
	z-index: 6;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sxp-glabel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 54px;
	min-height: 31px;
	margin: 0 -9px;
	padding: 5px 5px 4px;
	border-radius: 13px 13px 3px 3px;
	font-size: 10px;
	line-height: 1.1;
	text-align: center;
	color: #04050e;
	font-weight: bold;
	white-space: pre-line;
}
.g-despair .sxp-glabel { background: #ff4b3e; box-shadow: 0 0 10px rgba(255, 75, 62, 0.5); }
.g-disapp  .sxp-glabel { background: #ff8ad8; box-shadow: 0 0 10px rgba(255, 138, 216, 0.5); }
.g-fears   .sxp-glabel { background: #58e6f6; box-shadow: 0 0 10px rgba(88, 230, 246, 0.5); }

.sxp-ghost.fright .sxp-glabel {
	background: #2530d8 !important;
	color: #dfe3ff;
	box-shadow: 0 0 10px rgba(37, 48, 216, 0.7);
}
.fright-ending .sxp-ghost.fright .sxp-glabel {
	animation: sxp-flicker 0.28s steps(2) infinite;
}
@keyframes sxp-flicker {
	50% { background: #e8ecff; color: #2530d8; }
}
.sxp-ghost.eyes .sxp-glabel {
	background: none !important;
	box-shadow: none;
	color: #fff;
	font-size: 12px;
	letter-spacing: 1px;
}
.sxp-ghost.home .sxp-glabel {
	animation: sxp-bob 1s ease-in-out infinite alternate;
}
@keyframes sxp-bob {
	from { transform: translateY(-2px); }
	to   { transform: translateY(2px); }
}

/* center message */
.sxp-msg {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	z-index: 9;
	text-align: center;
	background: rgba(4, 5, 14, 0.85);
	border: 1px solid #2a3cff;
	border-radius: 6px;
	padding: 16px 26px;
	max-width: 85%;
}
.sxp-msg-main {
	color: #ffe737;
	font-size: 20px;
	font-weight: bold;
	letter-spacing: 2px;
	text-shadow: 0 0 10px rgba(255, 231, 55, 0.7);
	white-space: pre-line;
}
.sxp-msg-sub {
	color: #8f99e8;
	font-size: 12px;
	margin-top: 9px;
}
.sxp-msg-sub:empty {
	display: none;
}

/* CRT scanlines */
.sxp-crt {
	position: absolute;
	inset: 0;
	z-index: 20;
	pointer-events: none;
	background: repeating-linear-gradient(
		to bottom,
		rgba(255, 255, 255, 0.025) 0 1px,
		transparent 1px 3px
	);
}

/* wave-clear flash */
.sxp-board.cleared .sxp-wall {
	animation: sxp-clearflash 0.3s steps(2) 5;
}
@keyframes sxp-clearflash {
	50% { color: #fff; }
}

.sxp-foot {
	color: #5560a8;
	font-size: 11px;
	letter-spacing: 1px;
	padding: 8px 2px 2px;
	text-align: center;
}

/* the launch link inside post content */
.sx-pacman-launch {
	cursor: pointer;
}