body {
			font-family: 'Inter', sans-serif;
			background-color: #f8f9fa;
			color: #212529;
		}
		.card-container {
            		display: flex;
            		flex-wrap: wrap;
            		gap: 20px;
            		justify-content: center;
			        padding: 10 px;
		}
		.card{
		        background-color: white;
            		padding: 10px;
            		border-radius: 16px; /* More curve = more roundness */
            		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
            		width: 160px; /* Permanent/fixed width */
			height: 220px;
            		text-align: center;
            		transition: transform 0.2s;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			transform-origin:100% 100%;
		}
		.card .front,
		.card .back{
            		position: absolute;
            		width: 100%;
            		height: 100%;
            		display: flex;
            		align-items: center;
            		justify-content: center;
            		transition: opacity 0.3s ease;
        	}
		.card .front {
			opacity: 1;
		}
		.card .back {
			opacity: 0;
			font-size: 10px;
		}
		.card-footer {
  			position: absolute;
  			left: 0;
  			bottom: 16px;
  			width: 100%;
  			display: flex;
  			justify-content: center;
  			pointer-events: auto;
  			background: transparent;
  			z-index: 10;
		}
		.user-dropdown {
  			padding: 10px 14px;
  			font-size: 14px;
  			border: 1px solid #ccc;
  			border-radius: 8px;
  			width: 80%;
  			max-width: 200px;
		}
		.card.swipe-up{
			transition: transform 0.5s cubic-bezier(0.4,0,0.2,1);
		}
		.card.curve {
			transition: none;
		}
		.card:hover .front {
			opacity: 0;
		}
		.card:hover .back {
			opacity: 1;
		}
		.card:hover {
			transform: translateY(-5px);
		}
        #curse-card-container {
            position: fixed;
            top: 24px;
            right: 24px;
            z-index: 10000;
        }   

        .curse-card {
            background: white;
            color: #212529;
            border-radius: 16px;
            box-shadow: 0 4px 10px rgba(160, 32, 240, 0.18), 0 0 0 4px #a020f044;
            padding: 18px 26px;
            min-width: 110px;
            min-height: 60px;
            font-size: 1.2em;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: center;
            pointer-events: auto;
            margin-bottom: 8px;
            transition: box-shadow 0.2s;
        }
		.add-form,
		.rem-form {
   			position: absolute;
			top: 8px;
			right: 8px;
			z-index: 2;
			margin: 0;
		}

		.add-button,
		.rem-button {
			background-color: #28a745;
			color: white;
			border: none;
			border-radius: 50%;
    			width: 24px;
    			height: 24px
    			font-size: 16px;
   			line-height: 24px;
			text-align: center;
		    	padding: 0;
		    	cursor: pointer;
		}
		.rem-button {
			background-color: #dc3545;
		}
		#curse-overlay {
			position: fixed;
			inset: 0;
			z-index: 9999;
			pointer-events: none;
			display: none; /* Show with JS when cursed */
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		/* Cracks effect using gradients */
		#curse-flash {
			position: absolute;
			inset: 0;
			pointer-events: none;
			z-index: 1;
			background:
				radial-gradient(ellipse at 50% 50%,
					transparent 68%,
					rgba(35,0,48,0.55) 80%,
					rgba(15,0,18,0.8) 97%,
					transparent 100%
				);
			opacity: 0.85;
			animation: curse-cracks-pulse 2.5s ease-in-out infinite;
		}

		@keyframes curse-cracks-pulse {
			0%, 100% {
				opacity: 0.7;
				filter: blur(2.5px) brightness(1);
			}
			45% {
				opacity: 1;
				filter: blur(0.5px) brightness(1.15);
			}
			55% {
				opacity: 1;
				filter: blur(0.5px) brightness(1.15);
			}
		}

		/* Message styling */
		#curse-message {
			position: relative;
			color: #fff;
			font-size: 2.5em;
			font-weight: bold;
			text-shadow: 0 0 16px #a020f0, 0 0 40px #000;
			animation: curse-message-pop 3s;
			z-index: 2;
			padding: 20px 40px;
			background: rgba(0,0,0,0.2);
			border-radius: 20px;
			/* Optionally add border or more glow */
		}

		@keyframes curse-message-pop {
			0% { transform: scale(0.5) rotate(-10deg); opacity: 0; }
			40% { transform: scale(1.2) rotate(5deg); opacity: 1; }
			60% { transform: scale(0.9) rotate(-3deg);}
			100% { transform: scale(1) rotate(0deg); opacity: 1; }
		}

				@keyframes curse-flash-effect {
					0% { opacity: 0; }
					20% { opacity: 1; }
					50% { opacity: 0.7; }
					80% { opacity: 1; }
					100% { opacity: 0; }
				}
				@keyframes curse-bg-pulse {
					0% { filter: blur(0px) brightness(1); }
					40% { filter: blur(6px) brightness(1.25);}
					60% { filter: blur(2px) brightness(1.1);}
					100% { filter: blur(0px) brightness(1);}
		}
				@keyframes curse-message-pop {
					0% { transform: scale(0.5) rotate(-10deg); opacity: 0; }
					40% { transform: scale(1.2) rotate(5deg); opacity: 1; }
					60% { transform: scale(0.9) rotate(-3deg);}
					100% { transform: scale(1) rotate(0deg); opacity: 1; }
				}
				
		input[type="text"],
		select {
  			padding: 10px 14px;
  			font-size: 14px;
  			border: 1px solid #ccc;
  			border-radius: 8px;
  			width: 100%;
  			max-width: 300px;
  			transition: border 0.2s ease;
		}

		input[type="text"]:focus,
		select:focus {
  			border-color: #007bff;
  			outline: none;
			}

		input[type="submit"] {
		  	padding: 8px 12px;
			margin: 5px 0;
  			font-size: 14px;
  			border: 1px solid #ccc;
  			border-radius: 6px;
  			box-sizing: border-box;
			}

		input[type="submit"] {
  			background-color: #007BFF;
  			color: white;
  			border: none;
  			cursor: pointer;
			}

		input[type="submit"]:hover {
  			background-color: #0056b3;
			}