body {
	background:#0c0f14 url("/images/proton-background.jpg") 50% 50% no-repeat;
	background-size: cover;
	color:#e9ecef;
	min-height:100svh;
	overflow: hidden;
}
.app {
	max-width:480px;
	margin:0 auto;
	padding:24px;
}
.card {
	background:rgba(0,0,0,0.3);
	border:1px solid #222a36;
}
.brand {
	font-weight: 800;
	letter-spacing: -.01em;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	position: relative;
	text-shadow: 0 0 1px rgba(0,0,0,0.4),0 2px 2px rgba(0,0,0,0.5);
}
.brand::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("/images/white-faded.png") 0% 45%;
	background-size: cover;
	mix-blend-mode: multiply;
	pointer-events: none;
	border-radius: 20px;
}
.brand .no-ghosts {
	height: 1em;
	width: auto;
	vertical-align: middle;
}
.big-toggle {
	display:flex;
	align-items:center;
	justify-content:space-between;
	border-radius:16px;
	padding:18px;
	border:2px solid #1f2632;
	background:rgba(0,0,0,0.3);
	margin-bottom:16px;
}
.toggle-label {
	font-size: 1.7rem;
	color: #f8f9fa;
	letter-spacing: 0.02em;
	position: relative;
	text-shadow: 0 0 1px rgba(0,0,0,0.4),0 2px 2px rgba(0,0,0,0.5);
}
.toggle-label::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url("/images/white-faded.png?v=3");
	background-size: cover;
	mix-blend-mode: multiply;
	pointer-events: none;
}
.switch-image {
	cursor: pointer;
	user-select: none;
}
.power-switch {
	display: block;
	width: 75px;
	height: auto;
	transition: filter 0.2s ease, transform 0.1s ease;
}
.status-dot{
	display:inline-block;
	position:relative;
	width: 16px;
	height: 16px;
	margin-left: .5rem;
	border-radius: 50%;
	background: #495057;
	box-shadow: inset 0 0 3px rgba(0,0,0,.5);
	transform: translateZ(0);
}
.status-off{
	background: #495057;
	box-shadow:inset 0 0 4px rgba(0,0,0,.6),0 0 0 2px rgba(0,0,0,.2);
}
.status-on{
	/* vivid core with slight shading so it reads as a lamp */
	background: radial-gradient(circle at 40% 35%,#d4ffd9 0%,#7dff9a 25%,#3bd166 55%,#1f8f41 100%);
	box-shadow:0 0 6px rgba(47,158,68,.9),0 0 14px rgba(47,158,68,.7),0 0 28px rgba(47,158,68,.55),inset 0 0 6px rgba(255,255,255,.35),inset 0 0 12px rgba(255,255,255,.2);
	animation: status-breathe 2.4s ease-in-out infinite;
}
.status-on::after{
	content:"";
	position:absolute;
	inset:-6px;
	border-radius: inherit;
	background: radial-gradient(circle,rgba(47,158,68,.35) 0%,rgba(47,158,68,.22) 40%,rgba(47,158,68,0) 70%);
	filter: blur(1px);
	pointer-events:none;
}
.status-on.ramp{
	animation: status-ramp 0.7s ease-in-out 6, status-breathe 2.4s ease-in-out infinite 4.2s;
}
@keyframes status-breathe{
	0%, 100% {
		filter: brightness(1) saturate(1);
		box-shadow:0 0 6px rgba(47,158,68,.9),0 0 14px rgba(47,158,68,.7),0 0 28px rgba(47,158,68,.55),inset 0 0 6px rgba(255,255,255,.35),inset 0 0 12px rgba(255,255,255,.2);
	}
	50% {
		filter: brightness(1.12) saturate(1.1);
		box-shadow:0 0 8px rgba(47,158,68,1),0 0 18px rgba(47,158,68,.85),0 0 36px rgba(47,158,68,.65),inset 0 0 7px rgba(255,255,255,.42),inset 0 0 14px rgba(255,255,255,.25);
	}
}
@keyframes status-ramp{
	0%,100% {
		filter: brightness(1) saturate(1);
	}
	50% {
		filter: brightness(1.35) saturate(1.2);
	}
}
@media (prefers-reduced-motion: reduce){
	.status-on{
		animation: none;
	}
	.status-on.ramp{
		animation: none;
	}
}
.btn-ghost {
	display:block;
	width:100%;
	padding:18px 16px;
	font-size:1.1rem;
	font-weight:700;
	border-radius:16px;
	border:2px solid #1f2632;
	background:#111723;
	color:#e9ecef;
}
.btn-ghost:active {
	transform:translateY(1px);
}
.btn-fire {
	position: relative;
	width: 100%;
	height: 120px;
	border-radius: 26px;
	font-size: 1.4rem;
	font-weight: 900;
	background: radial-gradient(ellipse at 50% 40%, #ff6b6b 0%, #d90429 45%, #8b0000 100%);
	color: #fff;
	border: 0;
	box-shadow: 0 6px 0 #5d0b0b, inset 0 0 24px rgba(255,255,255,.15);
	text-shadow: 0 -1px 1px rgba(0,0,0,0.6),0 2px 2px rgba(255,255,255,0.25);
}
.btn-fire::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: inherit;
	background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.03) 40%, transparent 100%);
	pointer-events: none;
}
.btn-fire:active {
	transform:translateY(2px);
	box-shadow:0 3px 0 #5d0b0b, inset 0 0 18px rgba(255,255,255,.15);
}
.btn-fire.pressed {
	transform: translateY(2px);
	box-shadow: 0 3px 0 #5d0b0b, inset 0 0 18px rgba(255,255,255,.15);
	filter: brightness(0.9);
}
.btn-fire.pressed::after{
	content:"";
	position:absolute;
	inset:6px;
	border-radius:22px;
	background: radial-gradient(circle at 50% 50%, rgba(255,180,180,.5), rgba(255,0,0,0) 60%);
	pointer-events:none;
	animation: throb 0.6s ease-in-out infinite alternate;
}
@keyframes throb {
	from{
		opacity:.5
	}
	to{
		opacity:.9
	}
}
.btn-trap {
	width:100%;
	height:60px;
	border-radius:13px;
	font-size:1.4rem;
	font-weight:900;
	color:white;
	border:0;
	position:relative;
	overflow:hidden;
	box-shadow:0 6px 0 #5d5d0b, inset 0 0 24px rgba(255,255,255,.15);
	background:radial-gradient(ellipse at 50% 40%, rgba(255,255,107,0.9) 0%, rgba(217,217,41,0.8) 45%, rgba(139,139,0,0.8) 100%),url('/images/hazard.jpg');
	background-size: cover;
	background-blend-mode: multiply;
	background-position: center;
	text-shadow: 0 -1px 1px rgba(0,0,0,0.6),0 2px 2px rgba(255,255,255,0.25);
}
.btn-trap::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: inherit;
	background: linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.03) 40%, transparent 100%);
	pointer-events: none;
}
.btn-trap:active {
	transform: translateY(2px);
	box-shadow:0 3px 0 #5d5d0b, inset 0 0 18px rgba(255,255,255,.15);
}
.btn-trap:disabled {
	opacity: 0.9;
	transform: translateY(2px);
	box-shadow:0 3px 0 #5d5d0b, inset 0 0 18px rgba(255,255,255,.15);
	filter: brightness(0.9);
}
.small {
	color:#94a3b8;
}
.power-bar{
	background:#0b0f16;
	border:2px solid #1f2632;
	border-radius:12px;
	padding:10px 12px;
}
.power-leds{
	display:flex;
	gap:6px;
	align-items:center;
	justify-content:center;
}
.power-led{
	width:10px;
	height:20px;
	border-radius:3px;
	background:rgba(255,255,255,.08);
	box-shadow: inset 0 0 6px rgba(0,0,0,.6);
	transition: background-color .08s linear, box-shadow .08s linear, filter .08s linear;
}
.power-led.on {
	background: radial-gradient(circle at 50% 40%, #5fa8ff 0%, #1e4fff 80%);
	box-shadow: 0 0 6px rgba(80,150,255,0.9), 0 0 14px rgba(50,120,255,0.7), 0 0 28px rgba(40,100,255,0.4), inset 0 0 4px rgba(255,255,255,0.3);
	filter: saturate(1.3);
}
.power-led.on.hi {
	background: radial-gradient(circle at 50% 40%, #7fc3ff 0%, #3369ff 85%);
	box-shadow: 0 0 8px rgba(100,170,255,1), 0 0 18px rgba(70,140,255,0.9), 0 0 36px rgba(60,120,255,0.6), inset 0 0 5px rgba(255,255,255,0.4);
	filter: saturate(1.5);
}
.power-led.on.hi.flash,.power-led.flash {
	background: radial-gradient(circle at 50% 40%,#eafcff 0%,#5fa8ff 55%,#5aa4ff 100%);
	box-shadow:0 0 8px rgba(120,170,255,.9),0 0 16px rgba(80,150,255,.8),0 0 32px rgba(60,120,255,.6),inset 0 0 5px rgba(255,255,255,.4);
	filter: saturate(1.4) brightness(1.05);
}
.ecto-toggle{
	outline: none;
	display:flex;
	align-items:center;
	justify-content:space-between;
	border-radius:16px;
	padding:18px;
	border:2px solid #1f2632;
	background:rgba(0,0,0,.3);
	cursor:pointer;
	user-select:none;
}
.ecto-toggle:focus{
	outline: none;
}
.ecto-label{
	color: #ffffff;
	font-size:1.35rem;
	font-weight:800;
	letter-spacing:.02em;
	position:relative;
	text-shadow:0 0 1px rgba(0,0,0,.4),0 2px 2px rgba(0,0,0,.5);
}
.ecto-label::after{
	content:"";
	position:absolute;
	inset:0;
	background:url("/images/white-faded.png");
	background-size:cover;
	mix-blend-mode:multiply;
	pointer-events:none;
}
.ecto-housing{
	position:relative;
	width:140px;
	height:48px;
	border-radius:12px;
	overflow:hidden;
	background: linear-gradient(#0e141e,#0a0f18);
	border:1px solid #222a36;
	box-shadow: inset 0 0 12px rgba(0,0,0,.7);
}
.ecto-housing::after{
	content:"";
	position:absolute;
	inset:0;
	border-radius:12px;
	pointer-events:none;
	background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%, rgba(255,255,255,.04) 60%, rgba(255,255,255,0));
}
.slider{
	position:absolute;
	top:6px;
	bottom:6px;
	width:56px;
	border-radius:10px;
	background: linear-gradient(90deg,#6f7684,#c5cbd6 45%,#9aa2af 55%,#6f7684);
	box-shadow: inset 0 0 10px rgba(255,255,255,.25), 0 2px 3px rgba(0,0,0,.5);
	transform: translateX(6px);
	transition: transform .2s ease, filter .2s ease;
}
.ecto-toggle.on .slider{
	transform: translateX(78px);
	filter: brightness(1.05) saturate(1.05);
}
.screw{
	position:absolute;
	width:8px;
	height:8px;
	border-radius:50%;
	background: radial-gradient(circle at 35% 35%, #b7beca 0%, #6f7684 70%, #404958 100%);
	box-shadow: inset 0 0 2px rgba(0,0,0,.4);
}
.screw.tl{
	left:6px;
	top:6px;
}
.screw.tr{
	right:6px;
	top:6px;
}
.screw.bl{
	left:6px;
	bottom:6px;
}
.screw.br{
	right:6px;
	bottom:6px;
}
.beacon{
	position:absolute;
	top:10px;
	width:26px;
	height:26px;
	border-radius:50%;
	background: radial-gradient(circle at 40% 35%, #ff9aa0 0%, #ff3b3b 45%, #8b0000 100%);
	box-shadow: inset 0 0 8px rgba(255,255,255,.25), 0 0 10px rgba(0,0,0,.6);
	filter: saturate(1.2);
	opacity:.85;
}
.beacon.left{
	left:16px;
}
.beacon.right{
	right:16px;
}
@keyframes beacon-left {
	0%, 45% {
		filter: brightness(1) saturate(1.1);
		box-shadow: 0 0 10px rgba(255,0,0,.15), inset 0 0 8px rgba(255,255,255,.25);
	}
	50%, 95% {
		filter: brightness(1.5) saturate(1.4);
		box-shadow: 0 0 16px rgba(255,70,70,.95), 0 0 32px rgba(255,60,60,.6), inset 0 0 10px rgba(255,255,255,.35);
	}
}
@keyframes beacon-right {
	0%, 45% {
		filter: brightness(1.5) saturate(1.4);
		box-shadow: 0 0 16px rgba(255,70,70,.95), 0 0 32px rgba(255,60,60,.6), inset 0 0 10px rgba(255,255,255,.35);
	}
	50%, 95% {
		filter: brightness(1) saturate(1.1);
		box-shadow: 0 0 10px rgba(255,0,0,.15), inset 0 0 8px rgba(255,255,255,.25);
	}
}
.ecto-toggle.on .beacon.left{
	animation: beacon-left .6s infinite;
}
.ecto-toggle.on .beacon.right{
	animation: beacon-right .6s infinite;
}
#sirenDot.status-on{
	animation: status-breathe 2.4s ease-in-out infinite;
}
.ecto-glow{
	position:fixed;
	inset:0;
	z-index:50;
	display:none;
	/* <- not always there */
	opacity:0;
	transition:opacity .2s ease;
	pointer-events:none;
}
.ecto-glow *, .ecto-glow::before, .ecto-glow::after{
	pointer-events:none;
}
.ecto-glow-on .ecto-glow{
	display:block;
	opacity:1;
}
.ecto-glow .beam{
	position:absolute;
	top:0;
	bottom:0;
	width:60vw;
	max-width:680px;
	mix-blend-mode:screen;
	filter:blur(14px);
	opacity:.95;
}
.ecto-glow .beam.left{
	left:-28vw;
	-webkit-mask-image: linear-gradient(to right, black 60%, transparent 96%);
	mask-image: linear-gradient(to right, black 60%, transparent 96%);
}
.ecto-glow .beam.right{
	right:-28vw;
	-webkit-mask-image: linear-gradient(to left, black 60%, transparent 96%);
	mask-image: linear-gradient(to left, black 60%, transparent 96%);
}
.ecto-glow .beam::before,.ecto-glow .beam::after{
	content:"";
	position:absolute;
	inset:0;
}
:root{
	--ecto-red-core: rgba(255,110,110,.95);
	--ecto-red-mid: rgba(255,60,60,.62);
	--ecto-red-fade: rgba(255,0,0,.26);
	--ecto-blue-core: rgba(120,190,255,.95);
	--ecto-blue-mid: rgba(80,150,255,.55);
	--ecto-blue-fade: rgba(40,100,255,.26);
	--ecto-white: rgba(255,250,250,.75);
}
.ecto-glow .beam.left::before{
	background:radial-gradient(circle at -10% 50%,var(--ecto-white) 0%,var(--ecto-red-core) 12%,var(--ecto-red-mid) 30%,var(--ecto-red-fade) 55%,rgba(255,0,0,0) 82%),radial-gradient(circle at 10% 50%,rgba(220,240,255,.35) 0%,var(--ecto-blue-mid) 22%,rgba(0,80,255,0) 60%);
	filter:blur(26px);
	opacity:.65;
}
.ecto-glow .beam.right::before{
	background:radial-gradient(circle at 110% 50%,rgba(240,250,255,.75) 0%,var(--ecto-blue-core) 14%,var(--ecto-blue-mid) 32%,var(--ecto-blue-fade) 56%,rgba(0,80,255,0) 84%),radial-gradient(circle at 90% 50%,rgba(255,140,140,.28) 0%,var(--ecto-red-mid) 22%,rgba(255,0,0,0) 58%);
	filter:blur(26px);
	opacity:.68;
}
.ecto-glow .beam.left::after{
	background:radial-gradient(60% 160% at -8% 50%,var(--ecto-white) 0%,var(--ecto-red-core) 18%,var(--ecto-red-mid) 36%,rgba(255,0,0,0) 58%);
	transform-origin:-8% 50%;
	opacity:0;
}
.ecto-glow .beam.right::after{
	background:radial-gradient(60% 160% at 108% 50%,rgba(255,255,255,.85) 0%,var(--ecto-blue-core) 18%,var(--ecto-blue-mid) 36%,rgba(0,80,255,0) 58%);
	transform-origin:108% 50%;
	opacity:0;
}
@keyframes flash-left {
	0%, 40% {
		opacity:0;
		transform:rotate(-6deg) translateX(0);
	}
	50%, 65% {
		opacity:1;
		transform:rotate( 0) translateX(2vw);
	}
	75% {
		opacity:.7;
		transform:rotate( 6deg) translateX(3vw);
	}
	100% {
		opacity:0;
		transform:rotate( 0) translateX(1vw);
	}
}
@keyframes flash-right {
	0%, 20% {
		opacity:1;
		transform:rotate( 6deg) translateX(0);
	}
	30%, 60% {
		opacity:0;
		transform:rotate( 0) translateX(-2vw);
	}
	70%, 85% {
		opacity:1;
		transform:rotate(-6deg) translateX(-3vw);
	}
	100% {
		opacity:.9;
		transform:rotate( 0) translateX(-1vw);
	}
}
.ecto-glow-on .beam.left::before,.ecto-glow-on .beam.left::after {
	animation: flash-left 0.65s infinite;
}
.ecto-glow-on .beam.right::before,.ecto-glow-on .beam.right::after {
	animation: flash-right 0.65s infinite;
}
@media (prefers-reduced-motion: reduce){
	.ecto-glow-on .beam.left::before,.ecto-glow-on .beam.left::after,.ecto-glow-on .beam.right::before,.ecto-glow-on .beam.right::after{
		animation:none;
		opacity:.35;
	}
}