/* note: although we want the rows of blue question boxes to be uniform so that they are all the height of the tallest in the row, we do not want to enforce the same for grey answer boxes, confirmed by JL 10Sept2024 10:44AM */

#matchupQuestions{
	list-style-type:none;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-top: 20px;
	user-select: none;
}

.matchupQuestion, .matchupQuestionCorrect{
	font-size:0.85rem !important;
	line-height:1.25rem;
	font-weight:100;
	width: 17.35rem;
	max-width: 80%;
	min-width: 250px;
	margin: 0.25rem 0.5rem;
	color:#FFF;
	padding: 5px;
	border-radius: 5px;
	text-align: center;
	float: left;
	height: auto;
	word-break: break-word;
	background-color: rgb(14, 121, 178);
	display: flex;
    align-items: center;
    flex-direction: column;
	position: relative;
	min-height: 60px;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.matchupQuestionIncorrect{
	font-size:0.85rem !important;
	line-height:1.25rem;
	font-weight:100;
	width: 17.35rem;
	max-width: 80%;
	min-width: 250px;
	margin: 0.25rem 0.5rem;
	color:#FFF;
	padding: 5px;
	border-radius: 5px;
	text-align: center;
	float: left;
	height: auto;
	word-break: break-word;
	background-color: #f38c8c;
	display: flex;
    align-items: center;
    flex-direction: column;
	position: relative;
	min-height: 60px;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.matchupQuestionCorrect{
	background-color: rgb(46, 139, 87);
}

#matchupAnswers{
	list-style-type:none;
	display: flow-root;
	padding-left: 0;
	padding-bottom: 0.2rem;
	position: relative;
	z-index: 2;
}

.matchupAnswer, .matchupAnswerCorrect, .matchupAnswerIncorrect, .matchupAnswerPlaceholder{
	font-size:0.85rem !important;
	font-weight:500;
	width: 17.35rem;
	max-width: 80%;
	min-width: 200px;
	padding: 0.35rem;
	text-align: center;
	line-height: normal;
	margin: .2rem .6rem;
	background-color: #E6E6E6;
	color: black !important;
	cursor: move;
	float: left;
	background-size: auto;
	background-repeat: no-repeat;
	background-position: center;
	vertical-align: middle;
	border:1px solid #BBB;
	position: relative;
	z-index: 2;
	border-radius: 5px;
	transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.matchupAnswer:hover{
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.matchupAnswerPlaceholder{
	opacity: 0.4;
}

.matchupAnswerImage, .matchupQuestionImage{ 
	max-width: 90%;
	max-height: 200px !important;
	position: relative;
}

#selectedAnswerStickyTopContainer{
	display: none;
    position: sticky;
    top: 42px;
    left: 0;
    width: 100%;
    z-index: 50;
}

#selectedAnswerStickyTopContainer .matchupAnswer{
	position: relative;
}

#selectedAnswerStickyBottomContainer{
    display: none;
    position: sticky;
    bottom: 0; /* Stick at the bottom */
    left: 0;
    width: 100%;
    z-index: 50;
}

#selectedAnswerStickyBottomContainer .matchupAnswer{
    position: relative;
}

.clickedOnSelectedAnswer{
	background-color: #ffe500; /* Yellow color for the background */
	outline: 2px solid #ffa500; /* Orange color for the outline, instead of border so that it doesn't affect the width of the element */
}

.highlightQuestionAsDropTarget{
    background-color: #ffe500; /* Yellow color for the background */
    outline: 2px solid #ffa500; /* Orange color for the outline, instead of border so that it doesn't affect the width of the element */
	color: #000;
}

.matchupQuestion.cursorPointerForQuestions{
    cursor: pointer;
	background-color: rgb(16, 132, 181);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Grey out already paired answers */
.greyedOutPairedAnswer{
    opacity: 0.5;
    pointer-events: none;
}

/* Glow effect - Animation for when an answer is paired */
@keyframes subtleGlowYellow{
	0%{ 
		box-shadow: 
        0px 0px 5px 0px rgba(255, 100, 0, 0.8), /* Reddish base layer, counteract the blue background to avoid green effect */
        0px 0px 10px 0px rgba(255, 215, 0, 0.6); /* Golden yellow top layer */
		outline: 1px solid rgb(255, 215, 0);
	}
	50%{
		box-shadow: 
        0px 0px 10px 0px rgba(255, 100, 0, 0.8), /* Reddish base layer, counteract the blue background to avoid green effect */
        0px 0px 20px 0px rgba(255, 215, 0); /* Golden yellow top layer */
		outline: 1px solid rgb(255, 215, 0);
	}
	100%{
		box-shadow: 
        0px 0px 5px 0px rgba(255, 100, 0, 0.8), /* Reddish base layer, counteract the blue background to avoid green effect */
        0px 0px 10px 0px rgba(255, 215, 0, 0.6); /* Golden yellow top layer */
		outline: 1px solid rgb(255, 215, 0);
	}
}
.confirmPairIsMade{
    animation: subtleGlowYellow 0.5s ease-in-out;
}

/* Glow effect - Animation for when an answer is unpaired */
@keyframes subtleGlowRed{
	0%{ 
		box-shadow: 
		0px 0px 5px 0px rgba(255, 69, 0, 0.8),  /* Reddish-orange base shadow */
		0px 0px 10px 0px rgba(255, 165, 0, 0.6), /* Brighter orange top shadow */
		0px 0px 15px 0px rgba(255, 140, 0, 0.4); /* Soft orange outer glow for spread */
		outline: 1px solid rgb(255, 140, 0);
	}
	50%{
		box-shadow: 
		0px 0px 10px 0px rgba(255, 69, 0, 0.8),  /* Reddish-orange base shadow */
		0px 0px 20px 0px rgba(255, 165, 0, 0.6), /* Brighter orange top shadow */
		0px 0px 30px 0px rgba(255, 140, 0, 0.4); /* Soft orange outer glow for spread */
		outline: 1px solid rgb(255, 140, 0);
	}
	100%{
		box-shadow: 
		0px 0px 5px 0px rgba(255, 69, 0, 0.8),  /* Reddish-orange base shadow */
		0px 0px 10px 0px rgba(255, 165, 0, 0.6), /* Brighter orange top shadow */
		0px 0px 15px 0px rgba(255, 140, 0, 0.4); /* Soft orange outer glow for spread */
		outline: 1px solid rgb(255, 140, 0);
	}
}
.confirmPairUnattached{
	animation: subtleGlowRed 0.5s ease-in-out;
}

/* Swap animation */
@keyframes swapAnimation{
    0%{ 
		transform: scale(1);
	}
    50%{
		transform: scale(0.85); opacity: 0.5;
	}
    100%{
		transform: scale(1); opacity: 1;
	}
}
.swappedWithAnotherPair{
    animation: swapAnimation 0.3s ease-in-out;
}

/* Define keyframes for sliding in */
@keyframes slideIn{
	0%{
		transform: translateY(-100%);
		opacity: 0;
	}
	100%{
		transform: translateY(0);
		opacity: 1;
	}
}
.movedIntoPair{
    animation: slideIn 0.4s ease forwards; /* Apply the slideIn animation */
}

/* Define keyframes for sliding out */
@keyframes slideOut{
	0%{
		transform: translateY(0);
		opacity: 1;
	}
	100%{
		transform: translateY(-100%);
		opacity: 0;
	}
}
.movedOutOfPair{
	animation: slideOut 0.4s ease forwards; /* Apply the slideOut animation */
}

/* Swap In Animation */
@keyframes swapIn{
	0%{
		transform: scale(0.85);
		opacity: 0.5;
	}
	100%{
		transform: scale(1);
		opacity: 1;
	}
}
.swappedIntoPair{
	animation: swapIn 0.3s ease-in-out;
}

/* Swap Out Animation */
@keyframes swapOut{
	0%{
		transform: scale(1);
		opacity: 1;
	}
	100%{
		transform: scale(0.85);
		opacity: 0.5;
	}
}
.swappedOutOfPair{
	animation: swapOut 0.3s ease-in-out;
}

/* Improve dragging performance for matchup */
.ui-draggable-helper {
	will-change: transform;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

/* Smooth scrolling optimizations during drag */
body.dragging-active {
	overflow-x: hidden; /* Prevent horizontal scroll during drag */
	-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
}

body.dragging-active * {
	pointer-events: none; /* Prevent interference during drag */
}

body.dragging-active .ui-draggable-helper,
body.dragging-active .ui-droppable {
	pointer-events: auto; /* Re-enable for drag elements */
}

/* Optimize animations during drag */
.matchupAnswer {
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
	will-change: transform;
}

/* Reduce repaints during scroll */
#activityCanvas {
	transform: translateZ(0);
	-webkit-transform: translateZ(0);
}

/* Smooth momentum scrolling on iOS */
body {
	-webkit-overflow-scrolling: touch;
}