@import "/ui/styles/_theme.scss";

MenuMapGrid {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 20px;

	.map-grid-card {
		pointer-events: all;
		cursor: pointer;
		flex-direction: column;
		width: 320px;
		background-color: rgba(33, 33, 35, 0.9);
		border: 1px solid $border;
		border-bottom: 3px solid $secondary-strong;
		transition: background-color 0.12s ease-out, border-color 0.12s ease-out, transform 0.12s ease-out;

		.map-grid-thumb {
			position: relative;
			width: 100%;
			height: 180px;
			background-color: $panel-glass;
			border-bottom: 1px solid $border;
			justify-content: center;
			align-items: center;

			.map-grid-image {
				position: absolute;
				top: 0; right: 0; bottom: 0; left: 0;
				background-size: cover;
				background-position: center;
			}

			.map-grid-placeholder {
				color: $text-dim;
				opacity: 0.4;
			}

			.map-grid-badge {
				position: absolute;
				top: 8px;
				right: 8px;
				font-family: $font-primary;
				font-size: 13px;
				font-weight: 800;
				letter-spacing: 2px;
				text-transform: uppercase;
				padding: 4px 10px;
				color: $text;
				background-color: rgba(33, 33, 35, 0.65);
				border: 1px solid transparent;

				&.tone-primary {
					border-color: $primary-line;
					background-color: rgba(211, 160, 104, 0.28);
				}

				&.tone-confirm {
					border-color: $success-line;
					background-color: rgba(138, 176, 96, 0.28);
				}

				&.tone-danger {
					border-color: $danger-line;
					background-color: rgba(180, 82, 82, 0.28);
				}
			}

			.map-grid-overlay {
				position: absolute;
				top: 0; right: 0; bottom: 0; left: 0;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				gap: 8px;
				background-color: rgba(33, 33, 35, 0.7);

				.overlay-icon { color: $text-dim; }

				.overlay-text {
					font-family: $font-primary;
					font-size: 22px;
					font-weight: 700;
					letter-spacing: 3px;
					text-transform: uppercase;
					color: $text;
					text-shadow: $text-shadow;
				}

				&.selected-overlay {
					background-color: rgba(138, 176, 96, 0.4);
					.overlay-icon { color: $success; }
				}
			}
		}

		.map-grid-info {
			padding: 16px 18px;
			flex-direction: column;
			gap: 4px;
		}

		.map-grid-title {
			font-family: $font-primary;
			font-size: 22px;
			font-weight: 700;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: $text;
		}

		.map-grid-desc {
			font-family: $font-secondary;
			font-size: 14px;
			color: $text;
			opacity: 0.75;
		}

		&:hover {
			background-color: rgba(33, 33, 35, 0.95);
			border-bottom-color: $danger;
			transform: translateY(-2px);
		}

		&.selected {
			border-bottom-color: $success;
			background-color: rgba(33, 33, 35, 0.92);
		}

		&.coming-soon, &.locked {
			cursor: default;
			opacity: 0.75;

			&:hover {
				background-color: rgba(33, 33, 35, 0.9);
				border-bottom-color: $secondary-strong;
				transform: none;
			}
		}
	}
}