/**
 * Lighter — dark overlay, elliptical cursor light, fuel bar, Voltage.
 * Version: 1.4.2
 */

:root {
	--lighter-dark: #050505;
	--lighter-rx: 50px;
	--lighter-ry: 50px;
	--lighter-lens-offset-x: 0px;
	--lighter-hud-bg: rgba(0, 0, 0, 0.85);
	--lighter-hud-fg: #c8c8c8;
	--lighter-hud-top: 0px;
	--lighter-refill-fg: #f0e6c8;
	--lighter-refill-border: #d4a84b;
}

/*
 * Unlit page reads as solid dark: overlay covers everything.
 * Theme text stays intact so the circular hole reveals readable content.
 * Nav/menus and Cesium map widgets keep a normal cursor (Cesium sets its own).
 */
html.lighter-active,
html.lighter-active body {
	cursor: none !important;
}

html.lighter-active *:not(:is(
	.lighter-refill,
	.lighter-refill *,
	.lighter-boost,
	.lighter-battery,
	.lighter-battery *,
	.lighter-double-voltage,
	.lighter-double-voltage *,
	nav,
	nav *,
	.menu,
	.menu *,
	.main-navigation,
	.main-navigation *,
	.wp-block-navigation,
	.wp-block-navigation *,
	.menu-toggle,
	.menu-toggle *,
	[class*="menu-toggle"],
	.hamburger,
	.nav-toggle,
	button[aria-controls],
	.cesium-viewer,
	.cesium-viewer *,
	.cesium-widget,
	.cesium-widget *,
	.cesium-container,
	.cesium-container *,
	.cesium-viewer-cesiumWidgetContainer,
	.cesium-viewer-cesiumWidgetContainer *,
	#cesiumContainer,
	#cesiumContainer *
)) {
	cursor: none !important;
}

html.lighter-active nav,
html.lighter-active nav *,
html.lighter-active .menu,
html.lighter-active .menu *,
html.lighter-active .main-navigation,
html.lighter-active .main-navigation *,
html.lighter-active .wp-block-navigation,
html.lighter-active .wp-block-navigation *,
html.lighter-active .menu-toggle,
html.lighter-active [class*="menu-toggle"],
html.lighter-active .hamburger,
html.lighter-active .nav-toggle,
html.lighter-active button[aria-controls] {
	cursor: pointer !important;
}

/* Let Cesium control grab/crosshair/etc. without cursor:none !important. */
html.lighter-active .cesium-viewer,
html.lighter-active .cesium-viewer *,
html.lighter-active .cesium-widget,
html.lighter-active .cesium-widget *,
html.lighter-active .cesium-container,
html.lighter-active .cesium-container *,
html.lighter-active .cesium-viewer-cesiumWidgetContainer,
html.lighter-active .cesium-viewer-cesiumWidgetContainer *,
html.lighter-active #cesiumContainer,
html.lighter-active #cesiumContainer * {
	cursor: auto;
}

.lighter-root {
	position: fixed;
	inset: 0;
	z-index: 99980;
	pointer-events: none;
}

.lighter-overlay {
	position: absolute;
	inset: 0;
	background: var(--lighter-dark);
	-webkit-mask-image: radial-gradient(
		ellipse var(--lighter-rx, 50px) var(--lighter-ry, 50px) at calc(var(--lx, 50%) + var(--lighter-lens-offset-x, 0px)) var(--ly, 50%),
		transparent 0%,
		transparent 55%,
		rgba(0, 0, 0, 0.55) 75%,
		#000 100%
	);
	mask-image: radial-gradient(
		ellipse var(--lighter-rx, 50px) var(--lighter-ry, 50px) at calc(var(--lx, 50%) + var(--lighter-lens-offset-x, 0px)) var(--ly, 50%),
		transparent 0%,
		transparent 55%,
		rgba(0, 0, 0, 0.55) 75%,
		#000 100%
	);
	transition: opacity 0.2s ease;
}

html.lighter-locked .lighter-overlay {
	-webkit-mask-image: none;
	mask-image: none;
	opacity: 1;
}

.lighter-hud {
	position: fixed;
	top: var(--lighter-hud-top, 0);
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.65rem;
	padding: 0.55rem 1rem;
	background: var(--lighter-hud-bg);
	color: var(--lighter-hud-fg);
	pointer-events: none;
	z-index: 99990;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

html.admin-bar .lighter-hud {
	top: var(--lighter-hud-top, 32px);
}

@media screen and (max-width: 782px) {
	html.admin-bar .lighter-hud {
		top: var(--lighter-hud-top, 46px);
	}
}

.lighter-bar-track {
	flex: 1 1 auto;
	max-width: 28rem;
	height: 0.55rem;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	overflow: visible;
}

html.lighter-locked .lighter-bar-track {
	display: none;
}

html.lighter-boosted .lighter-bar-track {
	animation: lighter-voltage-outline 1.575s ease-in-out infinite;
}

@keyframes lighter-voltage-outline {
	0%,
	100% {
		box-shadow: 0 0 0 0 rgba(255, 204, 51, 0);
	}
	50% {
		box-shadow: 0 0 0 2px #ffcc33, 0 0 10px rgba(255, 204, 51, 0.85);
	}
}

.lighter-bar-fill {
	height: 100%;
	width: 100%;
	border-radius: inherit;
	transform-origin: left center;
	transition: width 0.25s linear, background-color 0.2s ease;
	background: #3dba5a;
}

.lighter-bar-fill.is-green {
	background: #3dba5a;
}

.lighter-bar-fill.is-yellow {
	background: #e0b040;
}

.lighter-bar-fill.is-red {
	background: #d64545;
}

html.lighter-boosted .lighter-bar-fill.is-red {
	animation: lighter-voltage-red-pulse 1.575s ease-in-out infinite;
}

@keyframes lighter-voltage-red-pulse {
	0%,
	100% {
		background: #d64545;
		opacity: 1;
		filter: brightness(1);
	}
	50% {
		background: #ff6b6b;
		opacity: 0.65;
		filter: brightness(1.35);
	}
}

html.lighter-locked .lighter-bar-fill {
	width: 0% !important;
}

.lighter-lock-msg {
	display: none;
	flex: 1 1 auto;
	max-width: 28rem;
	text-align: center;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.95rem;
	letter-spacing: 0.02em;
	color: #f0e6c8;
}

html.lighter-locked .lighter-lock-msg {
	display: block;
}

html.lighter-locked .lighter-boost {
	display: none;
}

.lighter-boost {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	min-height: 1.4rem;
	pointer-events: auto;
	cursor: pointer !important;
	padding: 0.1rem 0.25rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.85rem;
	line-height: 1;
	letter-spacing: 0;
	color: #f0e6c8;
	background: rgba(30, 24, 12, 0.95);
	border: 1px solid #d4a84b;
	border-radius: 2px;
	transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.lighter-boost:hover,
.lighter-boost:focus-visible {
	background: rgba(50, 38, 14, 0.98);
	outline: 1px solid #d4a84b;
}

.lighter-boost[aria-pressed="true"] {
	background: #ffcc33;
	color: #1a1408;
	border-color: #fff3c4;
	box-shadow: 0 0 0 2px #fff3c4, 0 0 16px rgba(255, 200, 60, 0.85);
}

.lighter-boost:disabled {
	opacity: 0.35;
	pointer-events: none;
	cursor: default !important;
	box-shadow: none;
}

.lighter-refill {
	display: inline-block;
	margin: 0.25rem 0;
	padding: 0.4rem 0.75rem;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 0.9rem;
	color: var(--lighter-refill-fg) !important;
	background: rgba(20, 16, 8, 0.95);
	border: 1px solid var(--lighter-refill-border);
	border-radius: 2px;
	cursor: pointer !important;
	pointer-events: auto;
	position: relative;
	z-index: 99995;
	box-shadow: 0 0 12px rgba(212, 168, 75, 0.35);
}

.lighter-refill:hover,
.lighter-refill:focus-visible {
	background: rgba(40, 30, 12, 0.98);
	outline: 1px solid var(--lighter-refill-border);
}

.lighter-refill.is-collected,
.lighter-refill:disabled {
	opacity: 0.35;
	pointer-events: none;
	box-shadow: none;
	cursor: default !important;
}

.lighter-battery {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin: 0.04rem 0.04rem;
	padding: 0.04rem 0.06rem;
	background: #fff !important;
	border: 1px solid #ccc;
	border-radius: 2px;
	cursor: pointer !important;
	pointer-events: auto !important;
	position: relative;
	z-index: 100000;
	gap: 1px;
	box-shadow: none;
	user-select: none;
	-webkit-user-select: none;
}

.lighter-battery *,
.lighter-refill,
.lighter-refill * {
	pointer-events: auto !important;
	cursor: pointer !important;
}

.lighter-battery-pair {
	display: inline-flex;
	align-items: center;
	gap: 0.08rem;
}

.lighter-battery-unit {
	display: inline-flex;
	align-items: center;
	gap: 1px;
}

.lighter-battery-body {
	display: block;
	width: 0.55rem;
	height: 0.3rem;
	border: 1px solid currentColor;
	border-radius: 1px;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	color: inherit;
}

.lighter-battery-fill {
	display: block;
	position: absolute;
	left: 1px;
	top: 1px;
	bottom: 1px;
	width: 70%;
	border-radius: 0;
	background: currentColor;
}

.lighter-battery-tip {
	display: block;
	width: 0.08rem;
	height: 0.16rem;
	background: currentColor;
	border-radius: 0 1px 1px 0;
	opacity: 0.95;
}

.lighter-battery--green {
	color: #3dba5a;
}

.lighter-battery--yellow {
	color: #e0b040;
}

.lighter-battery--red {
	color: #d64545;
}

.lighter-battery--cyan {
	color: #3ecfd8;
}

.lighter-battery--double {
	color: #9b6dd6;
}

.lighter-battery--green .lighter-battery-fill {
	width: 100%;
}

.lighter-battery--yellow .lighter-battery-fill {
	width: 50%;
}

.lighter-battery--red .lighter-battery-fill {
	width: 25%;
}

.lighter-battery--cyan .lighter-battery-fill {
	width: 85%;
}

.lighter-battery--double .lighter-battery-fill {
	width: 100%;
}

.lighter-battery:hover,
.lighter-battery:focus-visible {
	outline: 1px solid #999;
	background: #fff !important;
	filter: none;
}

.lighter-battery.is-collected,
.lighter-battery:disabled {
	color: #999 !important;
	border-color: #bbb !important;
	background: #f0f0f0 !important;
	box-shadow: none !important;
	opacity: 1;
	pointer-events: none !important;
	cursor: default !important;
	filter: grayscale(1);
}

.lighter-battery.is-collected *,
.lighter-battery:disabled * {
	pointer-events: none !important;
	cursor: default !important;
}

.lighter-battery.is-collected .lighter-battery-fill,
.lighter-battery:disabled .lighter-battery-fill,
.lighter-battery.is-collected .lighter-battery-tip,
.lighter-battery:disabled .lighter-battery-tip,
.lighter-battery.is-collected .lighter-battery-body,
.lighter-battery:disabled .lighter-battery-body {
	color: #999 !important;
	background: #999;
	border-color: #999;
}

.lighter-double-voltage {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	vertical-align: middle;
	margin: 0.04rem 0.04rem;
	min-width: 0.95rem;
	min-height: 0.85rem;
	padding: 0.02rem 0.12rem;
	font-size: 0.65rem;
	line-height: 1;
	color: #f0e6c8;
	background: rgba(30, 24, 12, 0.95);
	border: 1px solid #d4a84b;
	border-radius: 2px;
	cursor: pointer !important;
	pointer-events: auto !important;
	position: relative;
	z-index: 100000;
	box-shadow: none;
	user-select: none;
}

.lighter-double-voltage:hover,
.lighter-double-voltage:focus-visible {
	background: rgba(50, 38, 14, 0.98);
	outline: 1px solid #d4a84b;
}

.lighter-double-voltage[aria-pressed="true"],
.lighter-double-voltage.is-active {
	background: #ffcc33;
	color: #1a1408;
	border-color: #fff3c4;
	box-shadow: 0 0 0 2px #fff3c4, 0 0 16px rgba(255, 200, 60, 0.85);
}

.lighter-double-voltage:disabled {
	opacity: 0.35;
	pointer-events: none;
	cursor: default !important;
	box-shadow: none;
}

.lighter-root::after {
	content: "";
	position: fixed;
	left: var(--lx, 50%);
	top: var(--ly, 50%);
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff8e0 0%, #f0c060 40%, transparent 70%);
	box-shadow: 0 0 14px 4px rgba(255, 220, 140, 0.55);
	pointer-events: none;
	z-index: 99991;
	opacity: 0.9;
}

html.lighter-locked .lighter-root::after {
	display: none;
}
