.objetivo-hit-in {
       animation: objetivoHitIn 0.7s cubic-bezier(.4,1.6,.4,1);
       box-shadow: 0 0 32px 12px #43a047cc, 0 0 0 8px #fff8;
}

@keyframes objetivoHitIn {
       0% {
	       filter: brightness(1.2) drop-shadow(0 0 0 #43a047cc);
	       box-shadow: 0 0 0 0 #43a047cc, 0 0 0 0 #fff8;
       }
       30% {
	       filter: brightness(2) drop-shadow(0 0 24px #43a047cc);
	       box-shadow: 0 0 32px 12px #43a047cc, 0 0 0 8px #fff8;
       }
       60% {
	       filter: brightness(1.2) drop-shadow(0 0 0 #43a047cc);
	       box-shadow: 0 0 0 0 #43a047cc, 0 0 0 0 #fff8;
       }
       100% {
	       filter: brightness(1) drop-shadow(0 0 0 #43a047cc);
	       box-shadow: 0 0 0 0 #43a047cc, 0 0 0 0 #fff8;
       }
}

@keyframes objetivoHitFlash {
	0% { filter: brightness(1.2) drop-shadow(0 0 0 #e53935cc); }
	30% { filter: brightness(2) drop-shadow(0 0 24px #e53935cc); }
	60% { filter: brightness(1.2) drop-shadow(0 0 0 #e53935cc); }
	100% { filter: brightness(1) drop-shadow(0 0 0 #e53935cc); }
}
.wp-site-blocks main .touch-list-component {
	order: 3;
	background: #232837;
	color: #f3f6fa;
}
.wp-site-blocks main .touch-area {
	order: 4;
	border: 1px solid #444a5a;
	background: #232837;
	color: #f3f6fa;
}
.wp-site-blocks main .list-panel-float {
	order: 5;
	box-shadow: -2px 0 16px #0008;
	background: #232837;
	color: #f3f6fa;
}
.wp-site-blocks main .toggle-list-panel {
	order: 6;
	background: #2d3548;
	color: #f3f6fa;
	box-shadow: 0 2px 8px #0008;
color: #b0b6c6;
color: #f3f6fa;
color: #b0b6c6;
border: 1px solid #444a5a;
background: #232837;
background: #232837;
box-shadow: 0 4px 24px #0008;
border: 2px solid #b0b6c6;
}
/* Asegura que el contenedor principal de main use flex y ordena target-div antes de last-stroke-div */
.wp-site-blocks main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.wp-site-blocks main .target-div {
	order: 1;
	position: relative;
	/* Perspectiva para animación 3D */
	transform-style: preserve-3d;
	perspective: 600px;
}
.wp-site-blocks main .target-div canvas {
	transform: translate3d(0px, -100px, -600px);
}
.wp-site-blocks main .last-stroke-div {
	order: 2;
}

.last-stroke-div {
	position: relative;
	/* Perspectiva para animación 3D */
	transform-style: preserve-3d;
	perspective: 600px;
}
.animated-stroke-canvas {
	position: absolute;
	left: 0;
	top: 0;
	width: 200px;
	height: 200px;
	pointer-events: none;
	z-index: 1300;
}

.animate-up-perspective {
	animation: flyUpPerspective 2s linear forwards;
}

@keyframes flyUpPerspective {
	0% {
		opacity: 1;
		transform: translate3d(0,0,0) scale(1);
	}
	50% {
	}
	100% {
		opacity: 1;
		transform: translate3d(0,-500px,-600px) scale(1);
	}
}
.last-stroke-canvas {
	position: relative;
	width: 200px;
	height: 200px;
	background: #fff8;
	border-radius: 16px;
	box-shadow: 0 4px 24px #0002;
	z-index: 1200;
	pointer-events: none;
	border: 2px solid #1976d2;
}
.touch-area {
	border: 1px solid #ccc;
	min-height: 200px;
	cursor: pointer;
	user-select: none;
	position: relative;
	background: #f8f8fa;
	width: 100%;
}
.wp-site-blocks > main {
	z-index: unset;
	background: #181c24 !important;
	color: #f3f6fa;
}
.touch-area-hint {
	color: #888;
	margin: 0.5em 0 0 0;
	text-align: center;
}
.toggle-list-panel {
	position: fixed;
	top: 1em;
	right: 1em;
	z-index: 1001;
	background: #1976d2;
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	font-size: 2em;
	box-shadow: 0 2px 8px #0002;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.list-panel-float {
	position: fixed;
	top: 0;
	right: 0;
	width: 340px;
	max-width: 90vw;
	height: 100vh;
	z-index: 1000;
	box-shadow: -2px 0 16px #0002;
	background: #fff;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(.4,2,.6,1);
	display: flex;
	flex-direction: column;
}
.list-panel-float.open {
	transform: translateX(0);
}
.list-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1em 1em 0 1em;
}
.list-panel-header h3 {
	margin: 0;
	font-size: 1.2em;
}
.close-list-panel {
	background: none;
	border: none;
	font-size: 2em;
	line-height: 1;
	cursor: pointer;
	color: #1976d2;
}
.drag-thumb {
	border: 1px solid #ccc;
	background: #fff;
	margin-left: 0.5em;
}
.list-panel-float {
	position: fixed;
	top: 0;
	right: 0;
	width: 340px;
	max-width: 90vw;
	height: 100vh;
	z-index: 1000;
	box-shadow: -2px 0 16px #0002;
	background: #fff;
	transform: translateX(100%);
	transition: transform 0.3s cubic-bezier(.4,2,.6,1);
	display: flex;
	flex-direction: column;
}
.list-panel-float.open {
	transform: translateX(0);
}
.toggle-list-panel {
	position: fixed;
	top: 1em;
	right: 1em;
	z-index: 1001;
	background: #1976d2;
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 48px;
	height: 48px;
	font-size: 2em;
	box-shadow: 0 2px 8px #0002;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.close-list-panel {
	background: none;
	border: none;
	font-size: 2em;
	line-height: 1;
	cursor: pointer;
	color: #1976d2;
}
.list-panel-float ul {
	margin: 0;
	padding: 0 1em 1em 1em;
	overflow-x: auto;
	width: 100%;
	box-sizing: border-box;
}
html, body, .wp-site-blocks, .wp-site-blocks main {
	height: 100%;
	margin: 0;
	padding: 0;
}
.touch-list-component {
	display: flex;
	flex-direction: column;
	width: calc(100vw - 20px);
	height: 100vw;
	max-width: none;
	background: #fff;
	border-radius: 0;
	box-shadow: none;
	padding: 0;
    margin: 10px;
}
.touch-list-component .touch-area {
	flex: 1 1 0;
	border: 1px solid #ccc;
	min-height: 200px;
	width: 100%;
	cursor: pointer;
	user-select: none;
	position: relative;
	background: #f8f8fa;
}
.touch-list, .drag-list {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0 1em 1em 1em;
	overflow-x: auto;
}