// Designed in 1080-reference space (ScreenPanel AutoScreenScale = ConsistentHeight).
@import "Theme.scss";

UnlockRevealOverlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	// The overlay only exists while a reveal is up, but the root must never eat input on the frames
	// it draws nothing — only .backdrop takes pointer events.
	pointer-events: none;

	font-family: $font;
	font-smooth: never;

	// Fullscreen scrim + centred panel. Both fade together off the inline opacity the reveal drives,
	// so they can't be split into separate fades. pointer-events:all makes the whole screen a dismiss
	// target and stops the stage underneath being clicked blind.
	.backdrop {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		align-items: center;
		justify-content: center;
		pointer-events: all;
		cursor: blank-hand;

		// The score tally's backdrop is already $black, so the panel would be invisible on its own —
		// darken everything behind it (and give the panel a border) to lift it off the screen.
		background-color: rgba( #000000, 0.55 );

		// Deliberately compact. The generous padding is load-bearing: the character's baked glow
		// spreads 60.5% of the icon height past each edge of its box (more for an oversized
		// character), and this keeps that soft tail inside the border instead of bleeding over it.
		.panel {
			flex-direction: column;
			align-items: center;
			// Width otherwise hugs the heading, which is narrower than the icon's glow at a large
			// PreviewScale; the floor keeps the glow off the side borders. Height stays content-sized.
			min-width: 420px;
			padding: 40px 64px 36px 64px;
			background-color: $black;
			border: 5px solid #59626e;
			box-shadow: 0 12px 40px rgba( #000000, 0.55 );

			.heading {
				font-size: 34px;
				color: #8a8f9c;
				letter-spacing: 3px;
				margin-bottom: 18px;
			}

			// Same construction as the character-picker grid entry: a viewport box (sized inline
			// from the character's preview scale) with the pre-baked glow behind the sprite layers.
			.character {
				position: relative;
				margin-top: 24px;

				.icon-glow {
					position: absolute;
					left: -61%;
					top: -60.5%;
					width: 222%;
					height: 221%;
					z-index: 0;
					pointer-events: none;
					opacity: 0.3;
					background-image: url( "sprites/ui/icon_glow.png" );
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}

				.sprite-layer {
					position: absolute;
					z-index: 1;
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center;
					image-rendering: pixelated;
				}

				&.paired {
					.rear {
						transform: translate( 11%, -9% ) scale( 0.94 );
					}

					.front {
						transform: translate( -11%, 9% );
					}
				}
			}

			.name {
				font-size: 40px;
				color: $white;
				margin-top: 40px;
			}
		}
	}
}