/* Glitch Profile - damage layer. Everything here sits above the app and never takes pointer events. */
#gp-damage {
	position: absolute;
	inset: 0;
	z-index: 20;
	pointer-events: none;
	overflow: hidden;
	border-radius: inherit;
}
#gp-damage > div,
#gp-damage > canvas {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
#gp-damage canvas {
	width: 100%;
	height: 100%;
}

/* OLED burn-in: worn pixels in the shape of UI that sat on screen for years */
.gpd-burn { z-index: 1; opacity: .07; color: #5c4c20; }
.gpd-burn svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gpd-burn-status {
	position: absolute; top: 15px; left: 0; right: 0;
	display: flex; justify-content: space-between; align-items: center;
	padding: 0 26px 0 42px;
	font: 600 17px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.gpd-burn-r { display: flex; align-items: center; gap: 6px; }
.gpd-burn-bars { display: flex; align-items: flex-end; gap: 2px; height: 12px; }
.gpd-burn-bars i { width: 3px; background: currentColor; border-radius: 1px; }
.gpd-burn-bars i:nth-child(1) { height: 4px; } .gpd-burn-bars i:nth-child(2) { height: 6px; }
.gpd-burn-bars i:nth-child(3) { height: 9px; } .gpd-burn-bars i:nth-child(4) { height: 12px; }
.gpd-burn-bat { width: 26px; height: 13px; border-radius: 4px; background: currentColor; }
.gpd-burn-nav {
	position: absolute; left: 21px; right: 22px; bottom: calc(14px + var(--sab, 0px)); height: 58px;
	border-radius: 29px; border: 3px solid currentColor;
	display: flex; align-items: center; justify-content: space-around; padding: 0 70px 0 6px;
}
.gpd-burn-nav svg { width: 27px; height: 27px; }

/* image retention: the previous screen fades but never quite leaves */
/* only pictures and text of the old screen stay; its white background does not wash over the new one */
.gpd-ghost { z-index: 2; }
#gp-damage[data-theme="dark"] .gpd-ghost { opacity: .5; }
.gpd-ghost-item { position: absolute; inset: 0; overflow: hidden; }
.gpd-ghost-item * { background-color: transparent !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.gpd-ghost-item img { filter: grayscale(.6); }

/* torn strips while glitching */
.gpd-slices { z-index: 3; }
.gpd-slice { position: absolute; left: 0; right: 0; overflow: hidden; }
.gpd-clone { position: absolute; pointer-events: none; }
.gpd-clone * { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

/* uneven colour as the panel ages */
.gpd-tint {
	z-index: 4; opacity: 0; transition: opacity 3s;
	background:
		radial-gradient(110% 70% at 0% 100%, rgba(120, 255, 170, .95), transparent 62%),
		radial-gradient(90% 70% at 100% 0%, rgba(255, 130, 225, .9), transparent 60%),
		radial-gradient(60% 40% at 70% 70%, rgba(255, 236, 140, .8), transparent 70%);
}
.gpd-dim { z-index: 5; background: #000; opacity: 0; }
.gpd-pix { z-index: 6; }
.gpd-ink { z-index: 7; }
.gpd-fx { z-index: 8; }
.gpd-shards { z-index: 9; }
.gpd-shard { position: absolute; }
.gpd-crack { z-index: 10; }
.gpd-flash { z-index: 11; background: #fff; opacity: 0; }

/* a phantom finger pressing something */
.gpd-phantom { opacity: .4 !important; transition: none !important; }

@media (prefers-reduced-motion: reduce) {
	.gpd-tint { transition: none; }
}