:root {
			--dark-bg: #0a0a0a;
			--darker-bg: #050505;
			--accent-color: #00bfff;
			--accent-gradient: linear-gradient(135deg, #00bfff, #0080ff);
			--accent-glow: 0 0 20px rgba(0,191,255,0.2);
			--text-color: #ffffff;
			--border-color: #333333;
		}

		body {
			background: var(--dark-bg) !important;
			color: var(--text-color);
			font-family: 'Open Sans', sans-serif;
			min-height: 100vh;
			background-image: linear-gradient(rgba(5,5,5,0.9), rgba(5,5,5,0.9)), url(images/footmash-back.jpg?v=2);
			background-size: cover;
			background-attachment: fixed;
			background-position: center;
			will-change: transform;
		}

		.header {
			background: linear-gradient(145deg, var(--darker-bg), #0a0a0a);
			border-radius: 8px;
			padding: 2rem;
			margin-bottom: 1rem;
			box-shadow: var(--accent-glow);
			will-change: transform;
		}

		.header h1 {
			font-family: 'Caveat', cursive;
			background: var(--accent-gradient);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
		}

		.nav-menu {
			background: linear-gradient(145deg, var(--darker-bg), #0a0a0a);
			border-radius: 8px;
			padding: 1rem;
			margin-bottom: 1rem;
			box-shadow: var(--accent-glow);
		}

		.nav-link {
			color: var(--text-color);
			text-decoration: none;
			padding: 0.5rem 1rem;
			background: rgba(0,191,255,0.1);
			border-radius: 4px;
			transition: all 0.2s ease;
			margin: 0.25rem;
			will-change: transform;
			border: 1px solid rgba(0,191,255,0.2);
		}

		.nav-link:hover {
			background: var(--accent-gradient);
			color: var(--text-color);
			transform: translateY(-2px) translateZ(0);
			box-shadow: var(--accent-glow);
		}

		.main-container {
			background: linear-gradient(145deg, var(--darker-bg), #0a0a0a);
			border-radius: 8px;
			padding: 2rem;
			margin-bottom: 1rem;
			box-shadow: var(--accent-glow);
			opacity: 0;
			transition: opacity 0.3s ease;
			will-change: opacity;
		}

		.image-panel {
			transition: all 0.2s ease;
			position: relative;
			text-align: center;
			padding: 2rem;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			will-change: transform;
			background: rgba(0,191,255,0.05);
			border-radius: 8px;
			border: 1px solid rgba(0,191,255,0.1);
			cursor: pointer;
		}
		
		.image-panel:hover {
			transform: translateY(-3px) translateZ(0);
			box-shadow: var(--accent-glow);
			border-color: var(--accent-color);
		}
		
		.image-vote {
			transition: all 0.2s ease;
			height: 100%;
			width: 100%;
			object-fit: contain;
			margin: 0 auto;
			border-radius: 8px;
			will-change: transform;
			backface-visibility: hidden;
			transform: translateZ(0);
		}
		
		.image-vote:hover {
			transform: scale(1.02) translateZ(0);
		}

		.vs-container {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 10;
			text-align: center;
			pointer-events: none;
			width: 80px;
			will-change: transform;
		}

		.vs-text {
			font-family: 'Caveat', cursive;
			font-size: 3rem;
			font-weight: bold;
			background: var(--accent-gradient);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			text-shadow: 
				0 0 10px rgba(0,191,255,0.5),
				0 0 20px rgba(0,191,255,0.3),
				0 0 30px rgba(0,191,255,0.2);
			animation: pulse 1.5s infinite;
			line-height: 1;
			will-change: transform;
		}

		.vs-line {
			width: 2px;
			height: 60px;
			background: var(--accent-gradient);
			margin: 5px auto;
			box-shadow: var(--accent-glow);
		}

		@keyframes pulse {
			0% { transform: scale(1) translateZ(0); }
			50% { transform: scale(1.1) translateZ(0); }
			100% { transform: scale(1) translateZ(0); }
		}

		.character-name {
			background: var(--accent-gradient);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
			margin-top: 1rem;
			margin-bottom: -0.2em;
			font-size: 2.5rem;
			font-weight: bold;			
			font-family: 'Caveat', cursive;
		}

		.character-description {
			color: #cccccc;
			margin-top: 0.5rem;
		}

		.left-panel {
			text-align: right;
		}

		.right-panel {
			text-align: left;
		}

		.footer {
			background: linear-gradient(145deg, var(--darker-bg), #0a0a0a);
			border-radius: 8px;
			padding: 1rem;
			text-align: center;
			font-size: 0.8rem;
			opacity: 0.7;
			box-shadow: var(--accent-glow);
		}

		@media (max-width: 768px) {
			.image-panel {
				margin-bottom: 20px;
				text-align: center;
			}
			
			.vs-container {
				display:none;
			}

			.nav-menu {
				text-align: center;
			}

			.nav-link {
				display: inline-block;
				margin: 0.25rem;
			}

			.left-panel,
			.right-panel {
				text-align: center;
			}
		}
		
		.swal-modal {
			background: linear-gradient(145deg, #050505, #0a0a0a) !important;
			border: 1px solid #00bfff !important;
			box-shadow: 0 0 20px rgba(0,191,255,0.2) !important;
		}
		.swal-title, 
		.swal-text {
			color: #00bfff !important;
			text-shadow: 0 0 10px rgba(0,191,255,0.3) !important;
		}
		.swal-icon {
			border-color: #00bfff !important;
		}
		.swal2-timer-progress-bar {
			background: #00bfff !important;
		}
		.swal-icon--success:after, .swal-icon--success:before, .swal-icon--success__hide-corners {
			background: none !important;
		}