// Designed in 1080-reference space (ScreenPanel AutoScreenScale = ConsistentHeight).
@import "Theme.scss";
$yellow: #dddd99;  // Original player color

HighscoreScreen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	padding: 16px 0 60px;

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

	.header {
		font-size: 80px;
		line-height: 0.8;   // pixel font reserves a tall line box; hug the glyphs so the gap below
		                    // is real spacing, not empty line-box whitespace
		color: $white;
		text-shadow: 4px 4px 0 $black;
		margin-bottom: 0;
	}

	// Single-level title: the level's name (smaller than the generic header so long names fit), with
	// the workshop author and description beneath. Fixed width + nowrap so over-long text ellipsizes.
	.level-header {
		flex-direction: column;
		align-items: center;
		width: 900px;
		margin-bottom: 4px;

		.level-title {
			max-width: 100%;
			font-size: 52px;
			line-height: 0.9;
			color: $white;
			text-shadow: 3px 3px 0 $black;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		// Avatar (Steam profile link, 28px — the author line's height) beside the name; the name keeps
		// its ellipsis by shrinking inside the row.
		.level-author-row {
			flex-direction: row;
			align-items: center;
			max-width: 100%;

			SteamAvatar {
				margin-right: 10px;
			}

			.level-author {
				flex-shrink: 1;
				min-width: 0;
			}
		}

		.level-author {
			max-width: 100%;
			font-size: 26px;
			line-height: 1.1;
			color: rgba( 255, 255, 255, 0.55 );
			text-shadow: 2px 2px 0 $black;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			// Linked author (see the razor): the wrapper is bare, the WebLinkLabel inside is the
			// clickable name — blue, brighter while hovered. pointer-events is opt-in on this screen
			// (the engine defaults panels to none), so the link must ask for clicks explicitly. The
			// .shadow twin is the outline: rich text can't draw text-shadow, so a plain label with the
			// same text/metrics sits 2px down-right underneath in the shadow colour.
			&.link {
				position: relative;
				pointer-events: all;
				cursor: blank-hand;
				overflow: visible;   // the twin's offset must not be clipped

				.shadow {
					position: absolute;
					left: 2px;
					top: 2px;
					font-size: 26px;
					line-height: 1.1;
					color: $black;
					white-space: nowrap;
					pointer-events: none;
				}

				WebLinkLabel {
					font-size: 26px;
					line-height: 1.1;
					color: $link;
					white-space: nowrap;
					pointer-events: all;
					cursor: blank-hand;
				}

				&:hover WebLinkLabel { color: $link-hover; }
			}
		}

		// Author's workshop description, one line (WorkshopLevels folds newlines); the CSS ellipsis is
		// the visible cut. Dimmer than the author so the credit still reads first. Tight line box +
		// negative bottom margin: the pixel font reserves a tall line, and the controls below should
		// sit as close under the description as they do under the author on boards without one.
		.level-description {
			max-width: 100%;
			font-size: 22px;
			line-height: 0.9;
			margin-top: 2px;
			margin-bottom: -8px;
			color: rgba( 255, 255, 255, 0.4 );
			text-shadow: 2px 2px 0 $black;
			text-align: center;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.info {
		font-size: 38px;
		color: $white;
	}

	// Board filters. Sits above the list; a high z-index lets an open dropdown's menu paint over the
	// list rows below (siblings otherwise draw in order, hiding the menu).
	.controls {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: -4px;
		margin-bottom: 22px;
		z-index: 20;

		.control {
			flex-direction: column;
			margin: 0 10px;
			width: 260px;

			&.level-control {
				width: 170px;
				align-items: center;
			}

			&.character-control {
				position: relative;
				width: 170px;
				align-items: center;
				padding-top: 29px;

				&.open {
					z-index: 100;
				}
			}

			.level-picker {
				width: 150px;
				flex-direction: column;
				align-items: center;
				padding: 0;
				background-color: transparent;
				cursor: blank-hand;
				pointer-events: all;

				.level-name {
					// Hidden but still laid out: the preview must keep its position when the level
					// name is shown in the screen title instead.
					&.hidden {
						opacity: 0;
					}

					width: 120px;
					height: 25px;
					padding: 2px 6px;
					align-items: center;
					justify-content: center;
					background-color: #171b22;
					overflow: hidden;
					margin-bottom: 4px;

					label {
						width: 100%;
						font-size: 18px;
						line-height: 21px;
						color: $white;
						text-align: center;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				.level-face {
					position: relative;
					width: 120px;
					height: 120px;
					overflow: hidden;
					border: 4px solid rgba( 111, 224, 208, 1 );

					// Forced-character badge in the preview's lower-left, matching the level
					// browser's tiles (glow-behind-sprite, see LevelBrowserOverlay.razor.scss).
					.tile-forced-character {
						position: absolute;
						left: 5px;
						bottom: 5px;
						pointer-events: none;
						z-index: 2;

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

						.sprite {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
							z-index: 1;
							background-repeat: no-repeat;
							background-position: center;
							background-size: contain;
							image-rendering: pixelated;
							opacity: 0.95;
						}

						// Paired (twins) badge: partner behind up-right and slightly smaller, character
						// in front down-left — same composition as the picker's twins icon.
						&.paired {
							.sprite.rear {
								transform: translate( 11%, -9% ) scale( 0.94 );
							}

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

				&:hover .level-face {
					border-color: $white;
					box-shadow: 0 0 18px 2px rgba( 255, 255, 255, 0.65 );
				}

				// Workshop boards pin their level: same look, but not clickable — no hand cursor,
				// no hover glow.
				&.static {
					position: relative;   // anchors the workshop-link square beside the face
					cursor: default;

					&:hover .level-face {
						border-color: rgba( 111, 224, 208, 1 );
						box-shadow: none;
					}

					// The level's Steam Workshop page (WorkshopLinkButton, shared .square-btn look),
					// 16px left of the preview face and centred on it. The face is 128px wide (120 +
					// 4px borders) centred in this 150px picker, so its left edge is 11px in: right =
					// 150 - 11 + 16. top = the 29px name row above the face + (128 - 72) / 2.
					.workshop-link {
						position: absolute;
						right: 155px;
						top: 57px;
					}
				}
			}
		}
	}

	.list {
		position: relative;        // anchor for absolutely-positioned virtual rows + scrollbar
		flex-direction: column;
		width: 1050px;
		flex-grow: 1;
		align-items: stretch;
		overflow: hidden;          // clip rows outside the viewport (we render a slice ourselves)
		pointer-events: all;       // needed so the wheel reaches OnMouseWheel

		.info {
			position: absolute;
			left: 0;
			right: 0;
			top: 80px;
			text-align: center;
			justify-content: center;
		}

		.scrollbar {
			position: absolute;
			right: 4px;             // inside the list (overflow:hidden clips anything outside)
			width: 14px;
			background-color: rgba(248, 245, 230, 0.35);
			border-radius: 0;        // square, pixel style
			pointer-events: all;     // grabbable for click-drag
			cursor: blank-hand;

			&:hover {
				background-color: rgba(248, 245, 230, 0.55);
			}
		}

		// Smiling-cube selector. Slides between rows; top + frame (background-position) are set
		// inline from the controller. 7-frame sheet -> background-size 700% makes one frame fill it.
		.selector {
			position: absolute;
			left: 4px;                 // sits in the left padding lane, left of the rank/row
			width: 64px;
			height: 64px;
			background-image: url( "sprites/menu_selector.png" );
			background-repeat: no-repeat;
			background-size: 700% 100%;
			image-rendering: pixelated;
		}

		.row {
			position: absolute;    // placed by inline top from the virtualizer
			left: 72px;            // leave a left lane for the selector cube
			right: 0;
			flex-direction: row;
			align-items: center;
			height: 64px;
			flex-shrink: 0;
			background-color: rgba(0, 0, 0, 0.12);

			// Zebra striping is driven by the absolute row index (not :nth-child, which
			// would flip as the rendered slice changes while scrolling).
			&.even {
				background-color: rgba(0, 0, 0, 0.22);
			}

			&.selected {
				background-color: rgba(221, 221, 153, 0.1);
			}

			// The row's content (rank / avatar / name / time / character / block tally / score /
			// replay) is the shared LeaderboardRow component, which styles itself.
		}
	}

	.hint {
		font-size: 28px;
		color: $black;
		margin-top: 28px;
	}

	.footer {
		flex-direction: row;
		align-items: center;
		margin-top: 8px;
		pointer-events: all;

		// Selector cube for the MAIN MENU button (same smiling-cube sheet as the list rows). Keeps a
		// fixed lane so the button never shifts; .hidden just fades it out while a row is focused.
		.selector {
			width: 64px;
			height: 64px;
			margin-right: 8px;
			background-image: url( "sprites/menu_selector.png" );
			background-repeat: no-repeat;
			background-size: 700% 100%;
			image-rendering: pixelated;

			&.hidden { opacity: 0; }
		}

		.back {
			padding: 10px 28px;
			font-size: 30px;
			color: $black;
			background-color: #c98a8a;
			cursor: blank-hand;
			pointer-events: all;

			&:hover { background-color: #d99a9a; }

			// Focused via the W/S selection cycle (keyboard/pad) — same brightened look as hover.
			&.selected { background-color: #d99a9a; }
		}
	}
}