/* Isolated Fullscreen Game Modal Context */
.synth-arcade-modal-body { background: #05050d !important; color: #fff; border: none; }
.synth-arcade-modal-body .modal-header { border-bottom: 2px solid; padding: 15px 30px; display: flex; align-items: center; justify-content: space-between; }
.synth-arcade-container { box-sizing: border-box; }

/* Interactive Board & Pixels */
.game-tile { background-color: #000; border: 1px solid rgba(255, 255, 255, 0.05); transition: opacity 0.2s ease-out; }

/* Custom Neon Timer Progress Bar Component Mapping */
.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; }

/* Adapted Premium Choice Button Variations */
.synth-arcade-container .btn-neon-choice { background-color: rgba(255, 255, 255, 0.03); color: #fff; border: 2px solid #bc13fe; padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; transition: all 0.2s ease-in-out; text-align: center; }
.synth-arcade-container .btn-neon-choice:hover:not(.disabled) { background-color: #bc13fe; color: #fff; box-shadow: 0 0 15px #bc13fe; transform: translateY(-2px); }
.synth-arcade-container .btn-neon-choice.disabled { opacity: 0.3; border-color: #444 !important; color: #666 !important; }

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

/* Typography & Neon Glow Alignment Maps */
.glow-text-pink { color: #fff; text-shadow: 0 0 4px #fff, 0 0 19px #ff007f, 0 0 40px #ff007f; }
.glow-text-blue { color: #fff; text-shadow: 0 0 4px #fff, 0 0 19px #00f3ff, 0 0 40px #00f3ff; }
.glow-text-purple { color: #fff; text-shadow: 0 0 4px #fff, 0 0 19px #bc13fe, 0 0 40px #bc13fe; }
.glow-text-green { color: #fff; text-shadow: 0 0 4px #fff, 0 0 19px #39ff14, 0 0 40px #39ff14; }

.glow-border-blue { border: 2px solid #00f3ff !important; box-shadow: 0 0 5px #fff, 0 0 15px #00f3ff; }
.glow-border-pink { border: 2px solid #ff007f !important; box-shadow: 0 0 5px #fff, 0 0 15px #ff007f; }
.glow-border-purple { border: 2px solid #bc13fe !important; box-shadow: 0 0 5px #fff, 0 0 15px #bc13fe; }
.glow-border-green { border: 2px solid #39ff14 !important; box-shadow: 0 0 5px #fff, 0 0 15px #39ff14; }
.glow-border-red { border: 2px solid #cc0000 !important; box-shadow: 0 0 5px #fff, 0 0 15px rgba(204, 0, 0, 0.4); }

.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;
}

.close-arcade-modal { margin: 0; padding: 5px; }

/* Custom Light Blue Capsule Layout Option Utility */
.synth-arcade-container .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; }
.synth-arcade-container .btn-capsule-blue:hover { border-color: #00f3ff !important; background-color: rgba(0, 243, 255, 0.15) !important; box-shadow: 0 0 12px #00f3ff !important; font-weight: bold; }


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

.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 */
.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;
}

/* Core Prologue Overlay Wrapper Configuration Layout */
#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 */
.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;
}

/* Mobile-First Arcade Optimization (Screens under 768px wide) */
@media (max-width: 767.98px) {
	/* 1. Downscale the giant artwork frame so it fits the viewport */
	#artworkFrame {
		max-width: 260px !important;
		margin-bottom: 0.5rem !important;
	}

	/* 2. Shrink the prologue instruction overlay text size */
	#clueOverlay {
		font-size: 0.75rem !important;
		padding: 12px !important;
	}
	#clueTextContent {
		margin-bottom: 0.75rem !important;
	}

	/* 3. Compress full screen modal padding to maximize vertical area */
	.synth-arcade-modal-body .modal-body {
		padding: 10px 15px !important;
	}

	/* 4. Streamline game top panel headers */
	#gameTopStatusHeader {
		margin-bottom: 0.25rem !important;
		padding-bottom: 0.25rem !important;
		font-size: 0.75rem !important;
	}

	/* 5. Reduce spacing around prompts and answer sections */
	#dynamicPromptHint {
		margin-bottom: 0.75rem !important;
		font-size: 0.85rem !important;
	}
	
	.synth-arcade-container .btn-neon-choice {
		padding-top: 0.4rem !important;
		padding-bottom: 0.4rem !important;
		font-size: 0.85rem !important;
	}
	
	/* 6. Tighten the review action deck buttons */
	#endgamePanel .mt-4 {
		margin-top: 0.75rem !important;
		gap: 0.5rem !important;
	}
}

.ccm-block-share-this-page ul.list-inline{display:inline-block;margin:0;padding:0}.ccm-block-share-this-page ul.list-inline li{display:inline-block;list-style-type:none;margin-right:10px;padding:0}.ccm-block-share-this-page svg{max-height:13px}.ccm-block-social-links ul.list-inline{display:inline-block;margin:0;padding:0}.ccm-block-social-links ul.list-inline li{display:inline-block;list-style-type:none;margin-right:10px;padding:0}.ccm-block-social-links svg{max-height:13px}