#mysteryMusicGameContainer {
	background-color: #0b0c10 !important;
	color: #fff !important;
}

/* --- In-Game Typography & Layout Classes --- */
#mysteryMusicGameContainer .glow-text-pink {
	color: #fff;
	text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #ff007f, 0 0 40px #ff007f, 0 0 80px #ff007f, 0 0 120px #ff007f;
}
#mysteryMusicGameContainer .glow-text-blue {
	color: #fff;
	text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #00f3ff, 0 0 40px #00f3ff, 0 0 80px #00f3ff, 0 0 120px #00f3ff;
}
#mysteryMusicGameContainer .glow-text-purple {
	color: #fff;
	text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #bc13fe, 0 0 40px #bc13fe, 0 0 80px #bc13fe, 0 0 120px #bc13fe;
}
#mysteryMusicGameContainer .glow-text-green {
	color: #fff;
	text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #39ff14, 0 0 40px #39ff14, 0 0 80px #39ff14, 0 0 120px #39ff14;
}

#mysteryMusicGameContainer .glow-text-yellow {
	color: #fff;
	text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #ffff33, 0 0 40px #ffff33, 0 0 80px #ffff33, 0 0 120px #ffff33;
}

.glow-border-blue {
	border: 2px solid #00f3ff !important;
	box-shadow: 0 0 5px #fff, inset 0 0 5px #fff, 0 0 15px #00f3ff, inset 0 0 15px #00f3ff;
}
#mysteryMusicGameContainer .glow-border-pink {
	border: 2px solid #ff007f !important;
	box-shadow: 0 0 5px #fff, inset 0 0 5px #fff, 0 0 15px #ff007f, inset 0 0 15px #ff007f;
}
.glow-border-purple {
	border: 2px solid #bc13fe !important;
	box-shadow: 0 0 5px #fff, inset 0 0 5px #fff, 0 0 15px #bc13fe, inset 0 0 15px #bc13fe;
}
.glow-border-green {
	border: 2px solid #39ff14 !important;
	box-shadow: 0 0 5px #fff, inset 0 0 5px #fff, 0 0 15px #39ff14, inset 0 0 15px #39ff14;
}

#mysteryMusicGameContainer .glow-text-success {
	color: #39ff14 !important;
	text-shadow: 0 0 2px #fff, 0 0 8px #fff, 0 0 15px rgba(255, 255, 255, 0.6);
}

#mysteryMusicGameContainer .glow-text-danger {
	color: #ff007f !important;
	text-shadow: 0 0 2px #fff, 0 0 8px #fff, 0 0 15px rgba(255, 255, 255, 0.6);
}

/* --- Custom Neon Timer Component --- */
#mysteryMusicGameContainer .timer-progress-bar {
	background: linear-gradient(90deg, #ff007f, #00f3ff) !important;
	box-shadow: 0 0 10px #00f3ff, 0 0 20px #ff007f;
	transition: width 0.1s linear;
}

/* --- Button Interactions (No Fill On Hover) --- */
#mysteryMusicGameContainer .btn-outline-info.glow-border-blue:hover,
#mysteryMusicGameContainer .btn-outline-info.glow-border-blue:active {
	background-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 0 10px #fff, inset 0 0 10px #fff, 0 0 30px #00f3ff, inset 0 0 30px #00f3ff !important;
}
#mysteryMusicGameContainer .btn-outline-purple.glow-border-purple:hover,
#mysteryMusicGameContainer .btn-outline-purple.glow-border-purple:active {
	background-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 0 10px #fff, inset 0 0 10px #fff, 0 0 30px #bc13fe, inset 0 0 30px #bc13fe !important;
}
#mysteryMusicGameContainer .btn-outline-danger.glow-border-pink:hover,
#mysteryMusicGameContainer .btn-outline-danger.glow-border-pink:active {
	background-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 0 10px #fff, inset 0 0 10px #fff, 0 0 30px #ff007f, inset 0 0 30px #ff007f !important;
}

#mysteryMusicGameContainer #gameplayGrid {
	z-index: 10;
	/* Establishes a 3D arena view depth so flying fragments pop toward the screen */
	perspective: 1000px;
	perspective-origin: center;
}

#mysteryMusicGameContainer .game-tile {
	background-color: #000;
	border: 1px solid rgba(255, 255, 255, 0.05);
	/* Hardware-accelerated transitions for complex spatial movements */
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), 
	            opacity 0.6s ease-out, 
	            background-color 0.3s ease;
	backface-visibility: hidden;
	transform-style: preserve-3d;
}

/* The Shatter/Blast effect class triggered by the script engine */
#mysteryMusicGameContainer .game-tile.shatter-shrapnel {
	opacity: 0 !important;
	pointer-events: none;
	background-color: #39ff14 !important; /* Emits a fleeting green neon pulse as it shatters */
	box-shadow: 0 0 15px #39ff14;
}

#mysteryMusicGameContainer .btn-neon-choice {
	background-color: rgba(255, 255, 255, 0.03);
	color: #fff;
	border: 2px solid #bc13fe;
	padding-top: 0.25rem !important;  /* Tightened from py-3 */
	padding-bottom: 0.25rem !important; /* Tightened from py-3 */
	transition: all 0.2s ease-in-out;
}
#mysteryMusicGameContainer .btn-neon-choice:hover:not(.disabled) {
	background-color: #bc13fe;
	color: #fff;
	box-shadow: 0 0 15px #bc13fe;
	transform: translateY(-2px);
}
#mysteryMusicGameContainer .btn-neon-choice.disabled {
	opacity: 0.3;
	border-color: #444 !important;
	color: #666 !important;
}

/* --- Performance Metrics --- */
#mysteryMusicGameContainer .text-neon-bright-green {
	color: #39ff14 !important;
	text-shadow: 0 0 8px rgba(57, 255, 20, 0.4);
}

/* ==========================================================================
   Leaderboard Target Grouping (Allows glows to reach the table downstream)
   ========================================================================== */
#leaderBoard .glow-text-pink {
	color: #fff;
	text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #ff007f, 0 0 40px #ff007f, 0 0 80px #ff007f, 0 0 120px #ff007f;
}
#leaderBoard .glow-text-blue {
	color: #fff;
	text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #00f3ff, 0 0 40px #00f3ff, 0 0 80px #00f3ff, 0 0 120px #00f3ff;
}
#leaderBoard .glow-text-purple {
	color: #fff;
	text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #bc13fe, 0 0 40px #bc13fe, 0 0 80px #bc13fe, 0 0 120px #bc13fe;
}
#leaderBoard .glow-text-green {
	color: #fff;
	text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #39ff14, 0 0 40px #39ff14, 0 0 80px #39ff14, 0 0 120px #39ff14;
}
#leaderBoard .glow-text-yellow {
	color: #fff;
	text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #ffea00, 0 0 40px #ffea00, 0 0 80px #ffea00, 0 0 120px #ffea00;
}

/* ==========================================================================
   Fluid Scrolled Table Body Alignment Directives
   ========================================================================== */

#tbody-scroll-wrapper {
	max-height: 300px !important;
	overflow-y: scroll !important;
	overflow-x: hidden !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	display: block !important;
	width: 100% !important;
}

#tbody-scroll-wrapper .tcc-table,
#tbody-scroll-wrapper #leaderboard-entries,
#tbody-scroll-wrapper tr {
	display: block !important;
	width: 100% !important;
}

#tbody-scroll-wrapper tr {
	content: "";
	display: flex !important;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
}

.tcc-table th, 
.tcc-table td {
	flex: 1 1 18% !important;
	width: 18% !important;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
	display: inline-block !important;
}

.tcc-table th:first-child, 
.tcc-table td:first-child {
	flex: 0 0 10% !important;
	width: 10% !important;
}

.spot-available {
	color: rgba(255, 255, 255, 0.50);
	font-style: italic;
}

/* ==========================================================================
   Premium Synthwave Custom Scrollbar Theme
   ========================================================================== */

#tbody-scroll-wrapper::-webkit-scrollbar {
	width: 8px !important;
}

#tbody-scroll-wrapper::-webkit-scrollbar-track {
	background: rgba(18, 12, 45, 0.6) !important;
	border-radius: 10px !important;
	border: 1px solid rgba(255, 255, 255, 0.05) !important;
}

#tbody-scroll-wrapper::-webkit-scrollbar-thumb {
	background: rgba(157, 78, 221, 0.4) !important;
	border-radius: 10px !important;
	border: 1px solid rgba(188, 19, 254, 0.2) !important;
	transition: all 0.25s ease-in-out !important;
}

#tbody-scroll-wrapper::-webkit-scrollbar-thumb:hover {
	background: rgba(157, 78, 221, 0.8) !important;
	box-shadow: 0 0 10px #bc13fe !important;
}

/* --- Interactive Category Badge Overrides --- */
.category-capsule-wrapper .btn-check:checked + .btn-outline-info {
	background-color: #5bf7ff !important;
	color: #000 !important;
	box-shadow: 0 0 12px #00f3ff !important;
	font-weight: bold;
}

.category-capsule-wrapper .btn-outline-info {
	border-color: rgba(0, 243, 255, 0.4) !important;
	background-color: rgba(255, 255, 255, 0.02);
	transition: all 0.15s ease-in-out;
}

.category-capsule-wrapper .btn-outline-info:hover {
	border-color: #00f3ff !important;
	background-color: rgba(0, 243, 255, 0.1) !important;
}

/* ==========================================================================
   Premium Capsule Difficulty System Overrides (White Text Retained)
   ========================================================================== */

.difficulty-capsule-wrapper .btn-difficulty-easy {
	border: 1px solid rgba(57, 255, 20, 0.4) !important;
	background-color: rgba(255, 255, 255, 0.02);
	color: #ffffff !important;
	transition: all 0.15s ease-in-out;
	letter-spacing: 0.05rem;
	font-size: 0.8rem;
}
.difficulty-capsule-wrapper .btn-difficulty-easy:hover,
.difficulty-capsule-wrapper .btn-difficulty-easy:active {
	border-color: #39ff14 !important;
	background-color: rgba(57, 255, 20, 0.15) !important;
	color: #ffffff !important;
	box-shadow: 0 0 12px #39ff14 !important;
	font-weight: bold;
}

.difficulty-capsule-wrapper .btn-difficulty-medium {
	border: 1px solid rgba(188, 19, 254, 0.4) !important;
	background-color: rgba(255, 255, 255, 0.02);
	color: #ffffff !important;
	transition: all 0.15s ease-in-out;
	letter-spacing: 0.05rem;
	font-size: 0.8rem;
}
.difficulty-capsule-wrapper .btn-difficulty-medium:hover,
.difficulty-capsule-wrapper .btn-difficulty-medium:active {
	border-color: #bc13fe !important;
	background-color: rgba(188, 19, 254, 0.15) !important;
	color: #ffffff !important;
	box-shadow: 0 0 12px #bc13fe !important;
	font-weight: bold;
}

.difficulty-capsule-wrapper .btn-difficulty-hard {
	border: 1px solid rgba(255, 0, 127, 0.4) !important;
	background-color: rgba(255, 255, 255, 0.02);
	color: #ffffff !important;
	transition: all 0.15s ease-in-out;
	letter-spacing: 0.05rem;
	font-size: 0.8rem;
}
.difficulty-capsule-wrapper .btn-difficulty-hard:hover,
.difficulty-capsule-wrapper .btn-difficulty-hard:active {
	border-color: #ff007f !important;
	background-color: rgba(255, 0, 127, 0.15) !important;
	color: #ffffff !important;
	box-shadow: 0 0 12px #ff007f !important;
	font-weight: bold;
}

/* Custom Light Blue Capsule Utility for UI Navigation */
.btn-capsule-blue {
	border: 1px solid rgba(0, 243, 255, 0.4) !important;
	background-color: rgba(255, 255, 255, 0.02);
	color: #ffffff !important;
	transition: all 0.15s ease-in-out;
	letter-spacing: 0.05rem;
	font-size: 0.8rem;
}
.btn-capsule-blue:hover,
.btn-capsule-blue:active {
	border-color: #00f3ff !important;
	background-color: rgba(0, 243, 255, 0.15) !important;
	color: #ffffff !important;
	box-shadow: 0 0 12px #00f3ff !important;
	font-weight: bold;
}

#categorySelectionGroup {
	max-height: 140px;
	overflow-y: auto;
	padding-right: 5px;
}
#categoriesSelected {
	max-height: 300px;
	overflow-y: auto;
	padding-right: 5px;
}

/* ==========================================================================
   Premium Light Blue Scrollbar for Category Selection Group
   ========================================================================== */

#categorySelectionGroup::-webkit-scrollbar {
	width: 6px !important; /* Slightly thinner for a tight layout column */
}

#categorySelectionGroup::-webkit-scrollbar-track {
	background: rgba(11, 12, 16, 0.6) !important;
	border-radius: 10px !important;
	border: 1px solid rgba(255, 255, 255, 0.03) !important;
}

#categorySelectionGroup::-webkit-scrollbar-thumb {
	background: rgba(0, 243, 255, 0.3) !important;
	border-radius: 10px !important;
	border: 1px solid rgba(0, 243, 255, 0.1) !important;
	transition: all 0.25s ease-in-out !important;
}

#categorySelectionGroup::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 243, 255, 0.7) !important;
	box-shadow: 0 0 10px #00f3ff !important;
}

#categoriesSelected::-webkit-scrollbar {
	width: 6px !important; /* Slightly thinner for a tight layout column */
}

#categoriesSelected::-webkit-scrollbar-track {
	background: rgba(11, 12, 16, 0.6) !important;
	border-radius: 10px !important;
	border: 1px solid rgba(255, 255, 255, 0.03) !important;
}

#categoriesSelected::-webkit-scrollbar-thumb {
	background: rgba(0, 243, 255, 0.3) !important;
	border-radius: 10px !important;
	border: 1px solid rgba(0, 243, 255, 0.1) !important;
	transition: all 0.25s ease-in-out !important;
}

#categoriesSelected::-webkit-scrollbar-thumb:hover {
	background: rgba(0, 243, 255, 0.7) !important;
	box-shadow: 0 0 10px #00f3ff !important;
}

#answerSection, #endgamePanel {
	min-height: 340px; /* Aligns the container footprint across states */
}

/* --- Interactive Trivia Badge Overrides --- */
.trivia-capsule-wrapper .btn-check:checked + .btn-outline-success {
	background-color: rgba(255, 255, 255, 0.08);	
	box-shadow: 0 0 12px #39ff14 !important;
	font-weight: bold;
}
.trivia-capsule-wrapper .btn-outline-success:hover{
	border-color: #99ff00 !important;
	background-color: rgba(255, 255, 255, 0.02);
}

.trivia-capsule-wrapper .btn-check:checked + .btn-outline-warning {
	background-color: rgba(255, 255, 255, 0.08);	
	box-shadow: 0 0 12px #ffea00 !important;
	font-weight: bold;
}
.trivia-capsule-wrapper .btn-outline-warning:hover{
	border-color: #ffff99 !important;
	background-color: rgba(255, 255, 255, 0.02);
}


.trivia-capsule-wrapper .btn-check:checked + .btn-outline-danger {
	background-color: rgba(255, 255, 255, 0.08);	
	box-shadow: 0 0 12px #ff007f !important;
	font-weight: bold;
}
.trivia-capsule-wrapper .btn-outline-danger:hover{
	border-color: #ff9b9d !important;
	background-color: rgba(255, 255, 255, 0.02);
}

/* --- Streamlined Grid Selection Cards (Clean White Borders & Text Focus) --- */
.grid-layout-option {
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	color: rgba(255, 255, 255, 0.6) !important;
	transition: all 0.15s ease-in-out;
}
.grid-layout-option:hover {
	border-color: rgba(255, 255, 255, 0.5) !important;
	color: #ffffff !important;
}
.grid-layout-option.active {
	border-color: #a21caf !important;
	color: #ffffff !important;
	background-color: rgba(255, 255, 255, 0.08);
	box-shadow: 0 0 10px rgba(255, 255, 255, 0.15);
	font-weight: bold;
}

/* --- Core Prologue Overlay Wrapper Configuration Layout --- */
#mysteryMusicGameContainer #prologueCountdown {
	font-size: 0.85rem !important;
	letter-spacing: 0.05rem;
	color: #ffffff !important;
	border: 1px solid rgba(255, 234, 0, 0.3) !important;
	background-color: #000000 !important;
	padding: 6px 16px !important;
	border-radius: 4px;
}

/* --- Isolated Numeric Time Countdown Value Ticker --- */
#mysteryMusicGameContainer .prologue-time-value {
	display: inline-block;
	font-family: monospace !important;
	font-weight: bold;
	font-size: 1.1rem;
	color: #ffea00; /* Distinct bright yellow arcade tone */
	text-shadow: 0 0 8px rgba(255, 234, 0, 0.6);
	min-width: 1.25rem; /* Enforces absolute fixed container tracking width */
	text-align: center;
}

/* --- Stylized Early Termination Cancel Button Override --- */
.border-neon-pink {
	border: 1px solid #ff007f !important;
	transition: all 0.2s ease-in-out;
}
.border-neon-pink:hover {
	background-color: rgba(255, 0, 127, 0.2) !important;
	box-shadow: 0 0 10px #ff007f;
	opacity: 1 !important;
}

/* Remove default browser persistent focus borders on checked filters */
#mysteryMusicGameContainer .btn-check:focus + .btn,
#mysteryMusicGameContainer .btn:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* Re-apply the targeted neon glows strictly on explicit states without browser rings */
#mysteryMusicGameContainer .trivia-capsule-wrapper .btn-check:checked + .btn-outline-success {
	box-shadow: 0 0 12px #39ff14 !important;
}
#mysteryMusicGameContainer .trivia-capsule-wrapper .btn-check:checked + .btn-outline-warning {
	box-shadow: 0 0 12px #ffea00 !important;
}
#mysteryMusicGameContainer .trivia-capsule-wrapper .btn-check:checked + .btn-outline-danger {
	box-shadow: 0 0 12px #ff007f !important;
}

/* --- High-Visibility Alarm Badge for Empty Puzzle Pools --- */
#mysteryMusicGameContainer .badge-danger-glow {
	background-color: rgba(255, 0, 127, 0.15) !important;
	color: #ffffff !important;
	border: 1px solid #ff007f !important;
	box-shadow: 0 0 8px #ff007f, inset 0 0 4px #ff007f;
	padding: 2px 8px !important;
	animation: pulse-alarm-glow 1.5s infinite ease-in-out;
}

/* --- High-Visibility Success Badge for Active Puzzle Pools --- */
#mysteryMusicGameContainer .badge-success-glow {
	background-color: rgba(57, 255, 20, 0.12) !important;
	color: #ffffff !important;
	border: 1px solid #39ff14 !important;
	box-shadow: 0 0 8px #39ff14, inset 0 0 4px #39ff14;
	padding: 2px 8px !important;
	transition: all 0.2s ease-in-out;
}

@keyframes pulse-alarm-glow {
	0%, 100% { opacity: 1; box-shadow: 0 0 8px #ff007f, inset 0 0 4px #ff007f; }
	50% { opacity: 0.7; box-shadow: 0 0 2px #ff007f, inset 0 0 1px #ff007f; }
}

.youtubeBlockResponsive16by9,.youtubeBlockResponsive4by3{height:0;position:relative}.youtubeBlockResponsive16by9 iframe,.youtubeBlockResponsive4by3 iframe{border:"none";height:100%;left:0;position:absolute;top:0;width:100%}.youtubeBlockResponsive16by9{padding-bottom:56.25%}.youtubeBlockResponsive4by3{padding-bottom:75%}.ccm-edit-mode-disabled-item.youtubeBlockResponsive16by9{padding-bottom:28.125%;padding-top:28.125%}.ccm-edit-mode-disabled-item.youtubeBlockResponsive4by3{padding-bottom:37.5%;padding-top:37.5%}