/* Puzzle styles */
 .container-p {
	 max-width: 100%;
	 margin: 0 auto;
	 text-align: center;
}
 #puzzle-wrapper {
	 touch-action: none;
	 user-select: none;
	 -webkit-user-select: none;
	 -moz-user-select: none;
	 -ms-user-select: none;
}
 #puzzle-container {
	 width: 100%;
	 max-width: 960px;
	 aspect-ratio: 16 / 9;
	 border: 2px solid #ccc;
	 margin: 0 auto;
	 position: relative;
	 overflow: hidden;
}
 .puzzle-piece {
	 width: 33.33%;
	 height: 50%;
	 position: absolute;
	 background-size: 300% 200%;
	 cursor: move;
	 box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
	 transition: box-shadow 0.3s ease;
	 background-image: url("https://upload.wikimedia.org/wikipedia/commons/c/c0/St._Mary%2C_Aldermanbury_at_America%E2%80%99s_National_Churchill_Museum.jpg");
	 touch-action: none;
}
 .puzzle-piece:hover {
	 box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
 #piece-1 {
	 background-position: 0 0;
}
 #piece-2 {
	 background-position: 50% 0;
}
 #piece-3 {
	 background-position: 100% 0;
}
 #piece-4 {
	 background-position: 0 100%;
}
 #piece-5 {
	 background-position: 50% 100%;
}
 #piece-6 {
	 background-position: 100% 100%;
}
/* Modal styles */
 .modal {
	 display: none;
	 position: fixed;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 z-index: 1000;
}
 .modal-content {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 background-color: #fff;
	 padding: 20px;
	 border-radius: 10px;
	 width: 90%;
	 max-width: 400px;
	 background-color: var(--dark-bg);
	 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	 color: var(--light-text);
}
 .modal-header {
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 margin-bottom: 20px;
}
 .modal-header h2 {
	 margin: 0;
	 font-size: 24px;
	 color: var(--light-text);
}
 .puzzle-close {
	 font-size: 28px;
	 font-weight: bold;
	 color: var(--light-text);
	 cursor: pointer !important;
}
 .puzzle-close:hover {
	 color: gray;
}
 .modal-body {
	 text-align: center;
}
 .coupon {
	 background-color: var(--primary-color);
	 border: 2px dashed #ccc;
	 border-radius: 10px;
	 padding: 15px;
	 margin: 20px 0;
}
 .coupon-code {
	 font-size: 32px;
	 font-weight: bold;
	 color: var(--primary-color);
	 background-color: #fff;
	 padding: 10px;
	 border-radius: 5px;
	 margin: 10px 0;
}
 .store-link {
	 display: block;
	 background-color: var(--primary-color);
	 color: white;
	 text-align: center;
	 padding: 15px;
	 text-decoration: none;
	 border-radius: 5px;
	 font-size: 18px;
	 transition: background-color 0.3s ease;
}
 .store-link:hover {
	 background-color: #0056b3;
}
 .modal.show {
	 display: block;
}
 .modal.show .modal-content {
	 animation: slideIn 0.3s ease-out;
}
 @keyframes slideIn {
	 from {
		 transform: translate(-50%, -60%);
		 opacity: 0;
	}
	 to {
		 transform: translate(-50%, -50%);
		 opacity: 1;
	}
}