@import "Theme.scss";
$yellow: #dddd99;
$red: #c98a8a;
$teal: #76d1d1;

DailyChallengeScreen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	flex-direction: column;
	align-items: center;
	padding: 48px 0 46px;
	font-family: $font;
	font-smooth: never;

	.header {
		font-size: 72px;
		color: $white;
		text-shadow: 4px 4px 0 $black;
		margin-bottom: 10px;
	}

	// Day-end countdown in the quiet strip above the title. Absolute so it never shifts the layout
	// when it appears/expires; faded muted red so it reads as a background warning, not a headline.
	.countdown {
		position: absolute;
		top: 34px;
		left: 0;
		right: 0;
		text-align: center;
		font-size: 22px;
		color: rgba(201, 138, 138, 0.65);
	}

	// Smiling-cube selector shared by the off-list focus zones (day-nav / PLAY-WATCH / MAIN MENU).
	// Same sprite sheet as the in-list cube; .hidden fades it out while keeping its lane so buttons
	// don't shift as focus comes and goes.
	.selcube {
		width: 58px;
		height: 58px;
		flex-shrink: 0;
		margin: 0 8px;
		background-image: url( "sprites/menu_selector.png" );
		background-repeat: no-repeat;
		background-size: 700% 100%;
		image-rendering: pixelated;

		&.hidden { opacity: 0; }
	}

	.daybar {
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-bottom: 12px;
		pointer-events: all;

		// Shared .square-btn look (Theme.scss), shrunk to the daybar's 58px lane so the header
		// layout is unchanged. Disabled arrows fade out and lose the press-in so they read inert.
		.nav {
			width: 58px;
			height: 58px;
			flex-shrink: 0;

			&.disabled {
				opacity: 0.25;
				cursor: blank-arrow;

				&:active {
					transform: none;
					box-shadow: 6px 6px 0 $square-btn-shadow;
				}
			}
		}

		.daytext {
			width: 420px;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			.date {
				font-size: 36px;
				color: $white;
			}

			.attempts {
				font-size: 22px;
				color: rgba(248, 245, 230, 0.5);
				margin-top: 2px;
			}
		}
	}

	.status {
		flex-direction: row;
		height: 66px;
		align-items: center;
		justify-content: center;
		margin-bottom: 8px;
		pointer-events: all;

		.play, .watch {
			padding: 12px 44px;
			font-size: 34px;
			color: $black;
			background-color: $yellow;
			cursor: blank-hand;

			&:hover { background-color: $white; }
			&.selected { background-color: $white; }
		}

		// daily_debug_nav's non-today DEBUG PLAY — amber so it never reads as the real PLAY.
		.play.debug {
			background-color: #d9a25a;

			&:hover { background-color: $white; }
			&.selected { background-color: $white; }
		}

		.watch {
			background-color: $teal;

			&:hover { background-color: $white; }
			&.selected { background-color: $white; }
		}

		.state {
			font-size: 34px;
			color: rgba(248, 245, 230, 0.7);
		}
	}

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

	.list {
		position: relative;
		width: 1050px;
		flex-grow: 1;
		align-items: stretch;
		overflow: hidden;
		pointer-events: all;

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

		.scrollbar {
			position: absolute;
			right: 4px;
			width: 14px;
			background-color: rgba(248, 245, 230, 0.35);
		}

		.selector {
			position: absolute;
			left: 4px;
			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;
			left: 72px;
			right: 0;
			flex-direction: row;
			align-items: center;
			height: 64px;
			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); }

			// Row content is the shared LeaderboardRow component, which styles itself.
		}
	}

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

		.back {
			padding: 10px 28px;
			font-size: 30px;
			color: $black;
			background-color: $red;
			cursor: blank-hand;

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

	// Character picker inside the centred 1080px UI square's upper-right corner.
	.character-slot {
		position: absolute;
		z-index: 1000;
		right: 50%;
		margin-right: -516px;
		top: 8px;
		align-items: flex-end;
	}

	// Today's generated-level schematic in the upper-left corner (same component as the leaderboard
	// level picker's face, drawn larger).
	.level-slot {
		position: absolute;
		z-index: 1000;
		left: 50%;
		margin-left: -516px;
		top: 8px;
		width: 200px;
		height: 200px;
		overflow: hidden;
		border: 4px solid rgba( 111, 224, 208, 1 );
	}
}