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

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

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

	// Title row matches the list width (the centred content square). The title is centred within it;
	// the IMPORT button is absolutely pinned to the row's right edge — i.e. the square's right edge,
	// not the screen edge / letterbox. The button wrap stretches full-height so it stays vertically
	// centred against the title.
	.header-row {
		position: relative;
		left: 30px;                 // nudge right to match the list (keeps the cube in the square)
		flex-direction: row;
		align-items: center;
		justify-content: center;
		width: 1160px;              // matches the (widened) list so the title stays centred over it
		margin-bottom: 16px;
		pointer-events: all;

		.actions {
			position: absolute;
			right: 110px;            // aligns the IMPORT button with the rows' right lane
			top: 0;
			bottom: 0;
			flex-direction: row;
			align-items: center;
		}
	}

	.header {
		font-size: 80px;
		color: $white;
		text-shadow: 4px 4px 0 $black;
		white-space: nowrap;
	}

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

	.favorite-filter {
		width: 60px;
		height: 60px;
		margin-right: 12px;
		align-items: center;
		justify-content: center;
		pointer-events: all;
		cursor: blank-hand;
		background-color: rgba($black, 0.6);
		border: 4px solid rgba($white, 0.8);
		transition: background-color 0.1s ease;

		.icon {
			font-family: "Material Icons";
			font-size: 34px;
			color: rgba($white, 0.8);
		}

		&.active {
			border-color: #ff9b9b;

			.icon { color: #ff9b9b; }
		}

		&:hover { background-color: rgba($black, 0.9); }
	}

	// Labelled IMPORT button (text + input icon) on a bordered dark rectangle, matching the
	// replay page's HUD button look but wider so the label fits.
	.import-button {
		flex-direction: row;
		align-items: center;
		padding: 10px 20px;
		pointer-events: all;
		cursor: blank-hand;
		background-color: rgba($black, 0.6);
		border: 4px solid $white;
		transition: background-color 0.1s ease;

		.text {
			font-size: 30px;
			color: $white;
			font-family: $font;
			margin-right: 10px;
			white-space: nowrap;
		}

		.icon {
			font-family: "Material Icons";
			font-size: 34px;
			color: $white;
		}

		&:hover { background-color: rgba($black, 0.9); }
	}

	.list {
		position: relative;
		left: 30px;                 // nudge the whole list right so the left-lane cube sits in the square
		flex-direction: column;
		width: 1160px;
		flex-grow: 1;
		overflow: hidden;
		align-items: stretch;
		pointer-events: all;

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

		.scrollbar {
			position: absolute;
			right: 76px;            // inset so the bar stays inside the centred content square
			width: 14px;
			background-color: rgba(248, 245, 230, 0.35);
			pointer-events: all;
			cursor: blank-hand;

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

		.selector {
			position: absolute;
			left: 1px;
			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;
			// Nudged left into the surplus gap on the cube's right (there's more room here than on the
			// cube's left) so the content lane is a touch wider — keeps the square cells square without
			// clipping the selector cube (content still starts at left+padding-left = 72px, clear of the
			// cube which ends at 68px).
			left: 58px;             // left lane for the selector cube
			right: 72px;            // right lane so the row content sits inside the square
			flex-direction: row;
			align-items: center;
			height: 64px;
			flex-shrink: 0;
			padding: 0 24px 0 14px;
			color: $white;
			background-color: rgba(0, 0, 0, 0.12);

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

			// 50px face comes from the component's Size (flex-shrink 0 too, so the name column absorbs
			// any overflow instead); click opens the Steam profile.
			SteamAvatar {
				margin-right: 18px;
			}

			.name {
				width: 150px;
				font-size: 30px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-right: 16px;

				&.own { color: $player-name; }
			}

			// Miniature schematic of the level this run was played on (the same node preview shown on
			// the level-select screen). Square, no label, sits between the name and the date.
			.level-col {
				position: relative;
				pointer-events: all;
				width: 48px;
				height: 48px;
				flex-shrink: 0;
				margin-right: 16px;
			}

			// Small preview of the character the run was played with, immediately left of the block
			// tally at the same size as one tally block (40px).
			.char-col {
				position: relative;
				width: 40px;
				height: 40px;
				flex-shrink: 0;
				margin-left: 8px;

				.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%;
				}

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

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

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

			// Fixed-width lane for the block-tally graphic (sized to five 40px blocks).
			// Sits between the time and score columns.
			.blocks-col {
				width: 220px;
				flex-shrink: 0;
				flex-direction: row;
				align-items: center;
				margin-left: 16px;
				margin-right: 16px;
			}

			.date {
				width: 130px;
				font-size: 24px;
				font-family: $font;
				color: rgba(248, 245, 230, 0.7);
				text-align: center;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-right: 12px;
				//border: 1px solid red;
			}

			.dur {
				width: 85px;
				font-size: 32px;
				font-family: $font-mono;
				text-align: right;
				margin-right: 6px;
			}

			.score {
				width: 70px;
				font-size: 34px;
				font-family: $font-mono;
				color: $score-victory;
				text-align: left;

				&.non-victory { color: $score-non-victory; }
			}

			.replay {
				width: 44px;
				height: 44px;
				flex-shrink: 0;         // stay square
				//margin-left: 16px;
				margin-left: auto;
				align-items: center;
				justify-content: center;
				font-size: 24px;
				color: $black;
				background-color: $white;
				cursor: blank-hand;

				&:hover { background-color: $yellow; }
			}

			.favorite {
				width: 44px;
				height: 44px;
				flex-shrink: 0;         // stay square
				margin-left: 6px;
				align-items: center;
				justify-content: center;
				background-color: rgba($black, 0.35);
				border: 3px solid rgba($white, 0.55);
				cursor: blank-hand;

				.icon {
					font-family: "Material Icons";
					font-size: 28px;
					color: rgba($white, 0.75);
				}

				&.active {
					border-color: #ff9b9b;

					.icon { color: #ff9b9b; }
				}

				&:hover { background-color: rgba($black, 0.75); }
			}

			.delete {
				width: 44px;
				height: 44px;
				flex-shrink: 0;         // stay square
				margin-left: 6px;
				align-items: center;
				justify-content: center;
				font-size: 22px;
				color: $white;
				background-color: #c98a8a;
				cursor: blank-hand;

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

	.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 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 36px;
			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 — same brightened look as hover.
			&.selected { background-color: #d99a9a; }
		}
	}
}