/*! VERO Sim — Damage FX Styles
 *  Kompagnon zu js/vero-sim-damage-fx.js + vero-sim-chibi-mood.js.
 *  Alle Animationen respektieren prefers-reduced-motion.
 *  Kontrast zum „süßen" Chibi-Look: klare Signale, aber nicht überzogen.
 */

/* =========================================================
 * Anchor-basierte FX-Scene-Positionierung
 * (überschreibt default-Mittig-Zentrierung aus vero-sim-engine.css,
 *  aber nur wenn .vero-fx-has-anchor gesetzt ist)
 * ========================================================= */
.vero-fx-layer.vero-fx-has-anchor .fx-scene {
	left: var(--fx-anchor-x, 50%);
	top:  var(--fx-anchor-y, 50%);
	width: min(40%, 230px);
	transform: translate(-50%, -50%);
	animation: fx-scene-pop 0.8s cubic-bezier(0.2, 0.9, 0.2, 1) both;
	filter: drop-shadow(0 6px 16px rgba(0,0,0,0.55))
	        drop-shadow(0 0 28px rgba(239,68,68,0.3));
}
@keyframes fx-scene-pop {
	from { opacity: 0; transform: translate(-50%, -50%) scale(0.7) rotate(-3deg); }
	60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(1deg); }
	to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* Während Schadenfilm: FX-Szene am Anker bleibt am Anker, nicht oben! */
.si-schaden-active .vero-fx-layer.vero-fx-has-anchor .fx-scene,
.canvas-wrapper.si-schaden-active .vero-fx-layer.vero-fx-has-anchor .fx-scene {
	top:  var(--fx-anchor-y, 50%);
	width: min(38%, 210px);
}
@media (max-width: 720px) {
	.vero-fx-layer.vero-fx-has-anchor .fx-scene {
		width: min(44%, 180px);
	}
	.si-schaden-active .vero-fx-layer.vero-fx-has-anchor .fx-scene,
	.canvas-wrapper.si-schaden-active .vero-fx-layer.vero-fx-has-anchor .fx-scene {
		width: min(48%, 170px);
	}
}

/* =========================================================
 * Wasser-Scene — fallende Tropfen + wachsende Pfütze
 * (Elemente sitzen IN der fx-scene SVG, damit sie am Anker bleiben)
 * 2026-04-19 · Timo-Feedback: Leitungswasser muss am Haus anzeigen
 * ========================================================= */
.fx-scene-waterdrop {
	transform-box: fill-box;
	transform-origin: center;
	animation: fx-scene-waterdrop-fall 3.2s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
.fx-scene-waterdrop.d1 { animation-delay: 0s; }
.fx-scene-waterdrop.d2 { animation-delay: 0.9s; }
.fx-scene-waterdrop.d3 { animation-delay: 1.8s; }
@keyframes fx-scene-waterdrop-fall {
	0%   { transform: translateY(-6px) scaleY(0.6); opacity: 0; }
	15%  { opacity: 1; transform: translateY(0) scaleY(1); }
	70%  { transform: translateY(42px) scaleY(1.1); opacity: 1; }
	100% { transform: translateY(52px) scaleY(0.3); opacity: 0; }
}
.fx-scene-puddle {
	transform-box: fill-box;
	transform-origin: center;
	animation: fx-scene-puddle-grow 4.8s ease-out infinite alternate;
}
.fx-scene-puddle-inner {
	transform-box: fill-box;
	transform-origin: center;
	animation: fx-scene-puddle-shimmer 3.6s ease-in-out infinite alternate;
}
@keyframes fx-scene-puddle-grow {
	from { transform: scaleX(0.75) scaleY(0.8); opacity: 0.45; }
	to   { transform: scaleX(1.08) scaleY(1.15); opacity: 0.7; }
}
@keyframes fx-scene-puddle-shimmer {
	from { transform: scaleX(0.8); opacity: 0.4; }
	to   { transform: scaleX(1.12); opacity: 0.85; }
}
@media (prefers-reduced-motion: reduce) {
	.fx-scene-waterdrop,
	.fx-scene-puddle,
	.fx-scene-puddle-inner {
		animation: none !important;
	}
}

/* =========================================================
 * Pre-Warn (vor jedem Schaden 0.5-1s Teaser am Anker)
 * ========================================================= */
.vero-fx-prewarn {
	position: absolute;
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: 36;
	width: 110px;
	height: 110px;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: vero-prewarn-in 0.6s ease-out both;
}
.vero-fx-prewarn.fading { animation: vero-prewarn-out 0.4s ease-in both; }

.vero-fx-prewarn__ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	border: 3px solid #f59e0b;
	box-shadow: 0 0 0 2px rgba(245,158,11,0.25), 0 0 24px rgba(245,158,11,0.55);
	animation: vero-prewarn-ring 0.9s ease-out infinite;
}
.vero-fx-prewarn__dot {
	position: absolute;
	width: 18px;
	height: 18px;
	background: #f59e0b;
	border-radius: 50%;
	box-shadow: 0 0 16px rgba(245,158,11,0.75);
	animation: vero-prewarn-dot 0.6s ease-in-out infinite alternate;
}
.vero-fx-prewarn__glyph {
	position: absolute;
	width: 80px;
	height: 80px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
	animation: vero-prewarn-glyph 1.4s ease-in-out infinite alternate;
}
.vero-fx-prewarn__text {
	position: absolute;
	top: 100%;
	margin-top: 10px;
	white-space: nowrap;
	font-family: 'Montserrat', sans-serif;
	font-size: 12px;
	font-weight: 700;
	color: #fff;
	background: rgba(239,68,68,0.9);
	padding: 4px 10px;
	border-radius: 999px;
	box-shadow: 0 4px 14px rgba(0,0,0,0.3);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Severity-Ramping am Pre-Warn-Ring */
.vero-fx-prewarn.sev-3 .vero-fx-prewarn__ring { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.3), 0 0 28px rgba(239,68,68,0.6); }
.vero-fx-prewarn.sev-4 .vero-fx-prewarn__ring { border-color: #ef4444; border-width: 4px; box-shadow: 0 0 0 3px rgba(239,68,68,0.4), 0 0 36px rgba(239,68,68,0.75); }
.vero-fx-prewarn.sev-5 .vero-fx-prewarn__ring { border-color: #7f1d1d; border-width: 5px; box-shadow: 0 0 0 4px rgba(127,29,29,0.5), 0 0 48px rgba(127,29,29,0.9); animation-duration: 1.2s; }

@keyframes vero-prewarn-in {
	from { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
	to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes vero-prewarn-out {
	from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
	to   { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}
@keyframes vero-prewarn-ring {
	0%   { transform: scale(0.85); opacity: 1; }
	100% { transform: scale(1.5); opacity: 0; }
}
@keyframes vero-prewarn-dot {
	from { transform: scale(1); }
	to   { transform: scale(1.3); }
}
@keyframes vero-prewarn-glyph {
	from { transform: translateY(0) scale(1); }
	to   { transform: translateY(-4px) scale(1.05); }
}

/* =========================================================
 * Pre-Warn Glyph-Presets (als Emoji-ähnliche SVG-Data-URIs
 * für Schwellen-Schäden: Marder, Rauch, Herz, Blitz, Hund …)
 * ========================================================= */
/* Rauch-Teaser für Küchenbrand */
.vero-fx-prewarn__glyph.glyph-smoke-hint {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g fill='none' stroke='%23777' stroke-width='4' stroke-linecap='round'><path d='M20 50 Q 22 38 28 36 Q 34 34 30 26 Q 26 18 34 14'/><path d='M40 52 Q 44 40 48 38 Q 52 36 46 28'/></g><circle cx='26' cy='56' r='4' fill='%23ef4444' opacity='0.7'/></svg>");
}
/* Marder-Gucker */
.vero-fx-prewarn__glyph.glyph-marten-peek {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><ellipse cx='32' cy='44' rx='18' ry='14' fill='%234a3820' stroke='%231a1008' stroke-width='2'/><circle cx='26' cy='40' r='2.5' fill='%23ffd700'/><circle cx='38' cy='40' r='2.5' fill='%23ffd700'/><path d='M28 48 Q 32 52 36 48' stroke='%231a1008' stroke-width='2' fill='none' stroke-linecap='round'/><path d='M20 30 L 14 24 M44 30 L 50 24' stroke='%234a3820' stroke-width='3' stroke-linecap='round'/></svg>");
}
/* Herz-Zucken */
.vero-fx-prewarn__glyph.glyph-heart-twitch {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 54 L10 32 A12 12 0 0 1 30 14 L32 16 L34 14 A12 12 0 0 1 54 32 Z' fill='%23ef4444' stroke='%237f1d1d' stroke-width='2.5'/><path d='M20 32 L26 32 L30 24 L34 40 L38 32 L44 32' stroke='%23ffffff' stroke-width='2.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
/* Blitz (Sturm) */
.vero-fx-prewarn__glyph.glyph-lightning-hint {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M38 4 L18 36 L28 36 L22 60 L46 28 L34 28 L42 4 Z' fill='%23f59e0b' stroke='%23b45309' stroke-width='2' stroke-linejoin='round'/></svg>");
}
/* Hund-Alert */
.vero-fx-prewarn__glyph.glyph-dog-alert {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M12 32 L18 16 L26 24 L30 20 L40 28 L50 20 L54 32 L50 50 L14 50 Z' fill='%23a67c4a' stroke='%234a2f18' stroke-width='2'/><circle cx='24' cy='36' r='2' fill='%23000'/><circle cx='40' cy='36' r='2' fill='%23000'/><ellipse cx='32' cy='44' rx='3' ry='2' fill='%23000'/><path d='M28 48 L32 52 L36 48' stroke='%23000' stroke-width='1.5' fill='none'/></svg>");
}
/* Einbrecher (Schatten) */
.vero-fx-prewarn__glyph.glyph-shadow-creep {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='18' r='10' fill='%23111'/><path d='M18 32 L46 32 L50 58 L14 58 Z' fill='%23111'/><rect x='24' y='14' width='16' height='6' rx='1' fill='%23333'/><circle cx='26' cy='16' r='1.5' fill='%23ef4444'/><circle cx='38' cy='16' r='1.5' fill='%23ef4444'/></svg>");
}
/* Baum-Kipp */
.vero-fx-prewarn__glyph.glyph-tree-wobble {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='28' y='36' width='8' height='24' fill='%238b6f47'/><circle cx='32' cy='24' r='16' fill='%235a8d3f'/><circle cx='22' cy='18' r='11' fill='%236a9d4f'/><circle cx='42' cy='18' r='11' fill='%236a9d4f'/></svg>");
}
/* Wasser-Drop-Hint */
.vero-fx-prewarn__glyph.glyph-water-drop {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 4 C 46 28 52 38 52 46 A 20 20 0 0 1 12 46 C 12 38 18 28 32 4 Z' fill='%2338bdf8' stroke='%230369a1' stroke-width='2.5'/><ellipse cx='26' cy='38' rx='4' ry='8' fill='%23bae6fd' opacity='0.7'/></svg>");
}
/* Generisches Warnung */
.vero-fx-prewarn__glyph.glyph-warning {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M32 6 L60 58 L4 58 Z' fill='%23f59e0b' stroke='%23b45309' stroke-width='3' stroke-linejoin='round'/><text x='32' y='50' font-family='Arial' font-weight='900' font-size='34' text-anchor='middle' fill='%23fff'>!</text></svg>");
}
/* Pflege-Rollator-Hint */
.vero-fx-prewarn__glyph.glyph-care-hint {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><circle cx='32' cy='18' r='8' fill='%23FAE0C8' stroke='%231a1a2e' stroke-width='2'/><path d='M24 30 L 24 50 M40 30 L 40 50' stroke='%231a1a2e' stroke-width='3'/><circle cx='24' cy='54' r='4' fill='%23333'/><circle cx='40' cy='54' r='4' fill='%23333'/><path d='M24 38 L 40 38' stroke='%231a1a2e' stroke-width='2'/></svg>");
}
/* Trauerband (Todesfall) */
.vero-fx-prewarn__glyph.glyph-mourning {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><rect x='12' y='8' width='40' height='48' rx='4' fill='%231a1a2e' stroke='%23000' stroke-width='2'/><rect x='18' y='14' width='28' height='38' fill='%23e8f0fe'/><path d='M18 14 L46 14 L46 22 L18 22 Z' fill='%23ef4444'/><circle cx='32' cy='36' r='6' fill='%23d4d4d4'/></svg>");
}

/* =========================================================
 * Walker-Layer — eigener Container, unabhängig vom FX-Layer.
 * Grund: VeroSim.anim() leert den FX-Layer (layer.innerHTML = '')
 * und würde Walker sofort zerstören. Der Walker-Layer ist Schwester
 * des FX-Layers und bleibt stabil.
 * ========================================================= */
.vero-fx-walker-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 34;
	border-radius: inherit;
}

/* =========================================================
 * Walk-In-Animationen (Marder läuft, Hund läuft, Einbrecher schleicht)
 * ========================================================= */
.vero-fx-walker {
	position: absolute;
	width: 90px;
	height: 90px;
	transform: translate(-50%, -50%) scaleX(var(--walker-flip, 1));
	pointer-events: none;
	z-index: 34;
	animation: vero-walker-walk var(--walker-dur, 1800ms) cubic-bezier(0.3, 0.7, 0.5, 1) forwards;
}
/* Echter Chibi als Walker — breiter & etwas höher,
   damit die SVG-Proportionen von buildChibiSVG erhalten bleiben. */
.vero-fx-walker.walker-chibi {
	width: 110px;
	height: 160px;
}
.vero-fx-walker__chibi {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.vero-fx-walker__chibi svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
}
.vero-fx-walker.arrived {
	animation: vero-walker-wiggle 0.28s ease-in-out infinite alternate;
}
.vero-fx-walker.fading {
	animation: vero-walker-away 0.35s ease-in forwards;
	opacity: 0;
}
.vero-fx-walker__body {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	filter: drop-shadow(0 3px 8px rgba(0,0,0,0.4));
}
@keyframes vero-walker-walk {
	from { left: inherit; }
	to   { left: var(--walker-end-x, 50%); }
}
@keyframes vero-walker-wiggle {
	from { transform: translate(-50%, -50%) scaleX(var(--walker-flip, 1)) rotate(-4deg); }
	to   { transform: translate(-50%, -50%) scaleX(var(--walker-flip, 1)) rotate(4deg); }
}
@keyframes vero-walker-away {
	from { transform: translate(-50%, -50%) scaleX(var(--walker-flip, 1)) scale(1); }
	to   { transform: translate(-50%, -50%) scaleX(var(--walker-flip, 1)) scale(1.2); }
}

/* Walker-Typen (Body-Background SVGs) */
.vero-fx-walker.walker-marten .vero-fx-walker__body {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 64'><path d='M8 40 Q 6 36 10 34 L 16 34 Q 20 28 30 30 L 58 32 Q 70 30 82 36 L 92 38 Q 94 44 88 48 Q 82 52 70 50 L 20 48 Q 10 46 8 40 Z' fill='%234a3820' stroke='%231a1008' stroke-width='2'/><circle cx='86' cy='42' r='2.5' fill='%23ffd700'/><circle cx='80' cy='42' r='2.5' fill='%23ffd700'/><path d='M12 48 L 10 58 M22 50 L 20 60 M58 50 L 56 58 M76 52 L 74 60' stroke='%234a3820' stroke-width='2.5' stroke-linecap='round'/><path d='M4 42 Q -4 38 2 34 Q 6 36 8 40' fill='%234a3820' stroke='%231a1008' stroke-width='1.5'/></svg>");
}
.vero-fx-walker.walker-dog .vero-fx-walker__body {
	/* Schlankerer, stilechter Hund mit Hängeohren, Pfoten, Schnauze,
	   Fletschen (kleine Zähne), wedelndem Schwanz und Augenglanz.
	   Farbpalette passt zu den Bühnen-Chibis (warm, leicht comic). */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 80'><defs><linearGradient id='dg' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23d4a574'/><stop offset='1' stop-color='%238b5a2b'/></linearGradient></defs><ellipse cx='60' cy='72' rx='42' ry='5' fill='rgba(0,0,0,0.22)'/><path d='M18 52 Q10 50 12 42 Q14 36 22 38 L30 34 Q32 24 44 26 L68 28 Q82 26 90 34 L100 38 Q108 42 104 50 Q100 58 92 56 L92 68 L84 68 L84 56 L34 56 L34 68 L26 68 L26 54 L20 52 Z' fill='url(%23dg)' stroke='%234a2f18' stroke-width='2.5'/><path d='M20 30 Q18 42 26 44 Q30 38 30 34 Z' fill='%236b3d1c'/><path d='M42 20 Q38 30 46 34 Q52 30 50 22 Z' fill='%236b3d1c'/><circle cx='32' cy='32' r='2.4' fill='%23000'/><circle cx='32.5' cy='31.4' r='0.7' fill='%23fff'/><path d='M16 40 Q10 42 12 47 L18 46' fill='%23000' opacity='0.9'/><path d='M14 48 L22 48' stroke='%23fff' stroke-width='0.9' stroke-linecap='round'/><path d='M16 50 L20 50' stroke='%23fff' stroke-width='0.9' stroke-linecap='round'/><path d='M108 30 Q118 36 112 48 Q106 44 106 36 Z' fill='url(%23dg)' stroke='%234a2f18' stroke-width='1.8'/></svg>");
}
.vero-fx-walker.walker-creature .vero-fx-walker__body {
	/* Fallback-Person-Silhouette, falls buildChibiSVG nicht verfügbar.
	   Im Normalbetrieb wird walker-chibi + echter Chibi-SVG gerendert. */
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 140'><ellipse cx='40' cy='136' rx='22' ry='3' fill='rgba(0,0,0,0.25)'/><circle cx='40' cy='28' r='16' fill='%23FAE0C8' stroke='%231a1a2e' stroke-width='1.5'/><rect x='24' y='44' width='32' height='46' rx='10' fill='%230055a4' stroke='%231a1a2e' stroke-width='1.5'/><rect x='28' y='90' width='10' height='36' rx='3' fill='%232d3a4d'/><rect x='42' y='90' width='10' height='36' rx='3' fill='%232d3a4d'/></svg>");
}

/* =========================================================
 * Kamera-Zoom (Pre-Warn Fokus auf Anker)
 * ========================================================= */
.canvas-scaler {
	transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
	transform-origin: 50% 50%;
}
.canvas-scaler.vero-zoom-active {
	transform: scale(var(--vero-zoom-scale, 1.08));
	transform-origin: var(--vero-zoom-x, 50%) var(--vero-zoom-y, 50%);
}

/* =========================================================
 * Stage-Alert-Glow (Severity ≥3)
 * ========================================================= */
.canvas-wrapper.vero-stage-alert::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	box-shadow: inset 0 0 0 3px rgba(245,158,11,0.55), inset 0 0 60px rgba(239,68,68,0.3);
	animation: vero-stage-alert 0.9s ease-in-out infinite alternate;
	z-index: 40;
}
@keyframes vero-stage-alert {
	from { opacity: 0.4; }
	to   { opacity: 1; }
}

/* =========================================================
 * Screenshake — Bühne (5 Severity-Level)
 * ========================================================= */
.vero-shake {
	animation-name: vero-shake-stage;
	animation-timing-function: cubic-bezier(0.36, 0.07, 0.19, 0.97);
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
/* 2026-04-19 Timing Runde 3: Werte synchron zu SEVERITY.shakeMs in
 * vero-sim-damage-fx.js (damit die CSS-Wackel-Animation genauso lang
 * läuft, wie die JS-Logik den Shake aktiv hält). */
.vero-shake--sev1 { animation-duration: 1.35s; }
.vero-shake--sev2 { animation-duration: 2.25s; }
.vero-shake--sev3 { animation-duration: 3.60s; }
.vero-shake--sev4 { animation-duration: 5.40s; }
.vero-shake--sev5 { animation-duration: 9.00s; }

@keyframes vero-shake-stage {
	0%   { transform: translate(0, 0); }
	10%  { transform: translate(calc(var(--shake-amp, 6px) * -1), calc(var(--shake-amp, 6px) * -0.5)); }
	20%  { transform: translate(var(--shake-amp, 6px),  calc(var(--shake-amp, 6px) *  0.5)); }
	30%  { transform: translate(calc(var(--shake-amp, 6px) * -0.7), calc(var(--shake-amp, 6px) *  0.4)); }
	40%  { transform: translate(var(--shake-amp, 6px), calc(var(--shake-amp, 6px) * -0.4)); }
	50%  { transform: translate(calc(var(--shake-amp, 6px) * -0.5), calc(var(--shake-amp, 6px) *  0.5)); }
	60%  { transform: translate(calc(var(--shake-amp, 6px) *  0.5), calc(var(--shake-amp, 6px) * -0.5)); }
	70%  { transform: translate(calc(var(--shake-amp, 6px) * -0.3), calc(var(--shake-amp, 6px) *  0.3)); }
	80%  { transform: translate(calc(var(--shake-amp, 6px) *  0.3), calc(var(--shake-amp, 6px) * -0.3)); }
	90%  { transform: translate(calc(var(--shake-amp, 6px) * -0.15), calc(var(--shake-amp, 6px) * 0.1)); }
	100% { transform: translate(0, 0); }
}

/* Viewport-Shake (Severity 4-5) — schüttelt den ganzen sichtbaren Bereich */
.vero-shake-viewport {
	animation-name: vero-shake-viewport;
	animation-timing-function: cubic-bezier(0.36, 0.07, 0.19, 0.97);
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}
.vero-shake-viewport--sev4 { animation-duration: 5.40s; }
.vero-shake-viewport--sev5 { animation-duration: 9.00s; }

@keyframes vero-shake-viewport {
	0%, 100% { transform: translate(0, 0); }
	7%       { transform: translate(calc(var(--shake-amp, 8px) * -1), 0); }
	14%      { transform: translate(var(--shake-amp, 8px), calc(var(--shake-amp, 8px) * 0.3)); }
	21%      { transform: translate(calc(var(--shake-amp, 8px) * -0.7), calc(var(--shake-amp, 8px) * -0.3)); }
	28%      { transform: translate(var(--shake-amp, 8px), 0); }
	35%      { transform: translate(calc(var(--shake-amp, 8px) * -0.5), calc(var(--shake-amp, 8px) * 0.5)); }
	42%      { transform: translate(var(--shake-amp, 8px), calc(var(--shake-amp, 8px) * -0.5)); }
	49%      { transform: translate(calc(var(--shake-amp, 8px) * -0.3), 0); }
	56%      { transform: translate(var(--shake-amp, 8px), calc(var(--shake-amp, 8px) * 0.2)); }
	63%      { transform: translate(calc(var(--shake-amp, 8px) * -0.3), calc(var(--shake-amp, 8px) * -0.2)); }
	70%      { transform: translate(var(--shake-amp, 8px), 0); }
	77%      { transform: translate(calc(var(--shake-amp, 8px) * -0.15), calc(var(--shake-amp, 8px) * 0.1)); }
}

/* =========================================================
 * Flash-Rand (Severity ≥3)
 * ========================================================= */
.vero-fx-flash {
	position: absolute;
	inset: 0;
	pointer-events: none;
	border-radius: inherit;
	z-index: 45;
	background: radial-gradient(
		circle at 50% 50%,
		rgba(239,68,68,0)    0%,
		rgba(239,68,68,0)    55%,
		rgba(239,68,68,0.5) 100%
	);
	animation: vero-fx-flash 1.0s ease-out forwards;
}
.vero-fx-flash.sev-4 { animation-duration: 1.4s; }
.vero-fx-flash.sev-5 { animation-duration: 2.0s; background: radial-gradient(circle at 50% 50%, rgba(127,29,29,0) 0%, rgba(127,29,29,0) 40%, rgba(127,29,29,0.75) 100%); }
.vero-fx-flash.fading { opacity: 0; transition: opacity 0.5s ease-out; }
@keyframes vero-fx-flash {
	0%   { opacity: 0; }
	30%  { opacity: 1; }
	100% { opacity: 0; }
}

/* =========================================================
 * Schwarzblende (Severity 5: Todesfall, schwerer Unfall)
 * ========================================================= */
.vero-fx-blackout {
	position: fixed;
	inset: 0;
	background: #000;
	z-index: 9998;
	pointer-events: none;
	animation: vero-fx-blackout 2.8s ease-in-out forwards;
}
.vero-fx-blackout.fading { opacity: 0; transition: opacity 0.8s ease-out; }
@keyframes vero-fx-blackout {
	0%   { opacity: 0; }
	15%  { opacity: 0.85; }
	55%  { opacity: 0.85; }
	100% { opacity: 0; }
}

/* =========================================================
 * Chibi-Pose-Klassen (werden TEMPORÄR auf .chibi-char gesetzt)
 * ========================================================= */
.chibi-char.chibi-pose-shock {
	animation: chibi-pose-shock 0.8s ease-out forwards,
	           chibi-pose-tremble 0.18s ease-in-out 0.8s 12 alternate;
	transform-origin: center bottom;
	transform-box: fill-box;
}
.chibi-char.chibi-pose-fall {
	animation: chibi-pose-fall 1.8s cubic-bezier(0.4, 0, 0.9, 1) forwards;
	transform-origin: center bottom;
	transform-box: fill-box;
}
.chibi-char.chibi-pose-heart {
	animation: chibi-pose-heart 0.6s ease-in-out infinite alternate;
	transform-origin: center center;
	transform-box: fill-box;
	filter: drop-shadow(0 0 12px rgba(239,68,68,0.5));
}
.chibi-char.chibi-pose-sick {
	animation: chibi-pose-sick 1.2s ease-in-out infinite;
	transform-origin: center bottom;
	transform-box: fill-box;
	filter: hue-rotate(60deg) saturate(0.7);
}
.chibi-char.chibi-pose-pain {
	animation: chibi-pose-pain 0.5s ease-in-out infinite alternate;
	transform-origin: center center;
	transform-box: fill-box;
	filter: drop-shadow(0 0 10px rgba(239,68,68,0.45));
}
.chibi-char.chibi-pose-fear {
	animation: chibi-pose-fear 0.22s ease-in-out infinite alternate;
	transform-origin: center bottom;
	transform-box: fill-box;
}

@keyframes chibi-pose-shock {
	0%   { transform: translateY(0) scaleY(1); }
	50%  { transform: translateY(-6px) scaleY(1.04); }
	100% { transform: translateY(0) scaleY(1); }
}
@keyframes chibi-pose-tremble {
	from { transform: translate(-1.5px, 0); }
	to   { transform: translate(1.5px, 0); }
}
@keyframes chibi-pose-fall {
	0%   { transform: rotate(0deg) translateY(0); }
	40%  { transform: rotate(-18deg) translateY(2px); }
	70%  { transform: rotate(-52deg) translateY(6px); }
	100% { transform: rotate(-82deg) translateY(12px); }
}
@keyframes chibi-pose-heart {
	from { transform: scale(1); }
	to   { transform: scale(1.05); }
}
@keyframes chibi-pose-sick {
	0%   { transform: translateX(0) rotate(0deg); }
	25%  { transform: translateX(-2px) rotate(-2deg); }
	50%  { transform: translateX(0) rotate(0deg); }
	75%  { transform: translateX(2px) rotate(2deg); }
	100% { transform: translateX(0) rotate(0deg); }
}
@keyframes chibi-pose-pain {
	from { transform: rotate(-3deg) scale(0.98); }
	to   { transform: rotate(3deg) scale(1.02); }
}
@keyframes chibi-pose-fear {
	from { transform: translate(-2px, 0); }
	to   { transform: translate(2px, 0); }
}

/* =========================================================
 * Chibi-Mood-Overlay (Glyphen über dem Chibi-Kopf)
 * ========================================================= */
.vero-chibi-mood-layer {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 38;
	overflow: hidden;
}
.vero-chibi-overlay {
	position: absolute;
	width: 70px;
	height: 70px;
	transform: translate(-50%, -50%);
	animation: vero-chibi-overlay-pop 0.3s ease-out both;
}
.vero-chibi-overlay.fading { opacity: 0; transition: opacity 0.22s ease-out; }
.vero-chibi-overlay__svg {
	width: 100%;
	height: 100%;
	filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35));
}
.vero-chibi-overlay.overlay-heart .vero-chibi-overlay__svg {
	animation: vero-overlay-heart 0.6s ease-in-out infinite alternate;
}
.vero-chibi-overlay.overlay-stars .vero-chibi-overlay__svg {
	animation: vero-overlay-stars 0.9s linear infinite;
}
.vero-chibi-overlay.overlay-excl .vero-chibi-overlay__svg {
	animation: vero-overlay-excl 0.28s ease-in-out infinite alternate;
}
.vero-chibi-overlay.overlay-sweat .vero-chibi-overlay__svg {
	animation: vero-overlay-sweat 1.0s ease-in-out infinite;
}
.vero-chibi-overlay.overlay-zzz .vero-chibi-overlay__svg {
	animation: vero-overlay-zzz 1.6s ease-in-out infinite;
}
.vero-chibi-overlay.overlay-tilde .vero-chibi-overlay__svg {
	animation: vero-overlay-tilde 0.8s ease-in-out infinite alternate;
}
@keyframes vero-chibi-overlay-pop {
	0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
	70%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
	100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes vero-overlay-heart {
	from { transform: scale(1); }
	to   { transform: scale(1.15); }
}
@keyframes vero-overlay-stars {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}
@keyframes vero-overlay-excl {
	from { transform: translateY(0) scale(1); }
	to   { transform: translateY(-4px) scale(1.08); }
}
@keyframes vero-overlay-sweat {
	0%   { transform: translateY(-4px); opacity: 0; }
	20%  { opacity: 1; }
	80%  { opacity: 1; }
	100% { transform: translateY(8px); opacity: 0; }
}
@keyframes vero-overlay-zzz {
	0%   { transform: translate(-3px, 0); opacity: 0.6; }
	50%  { transform: translate(2px, -4px); opacity: 1; }
	100% { transform: translate(4px, -8px); opacity: 0.2; }
}
@keyframes vero-overlay-tilde {
	from { transform: scale(1); }
	to   { transform: scale(1.1) translateY(-2px); }
}

/* =========================================================
 * Reduced-Motion: alle Animationen aus, nur Farbe + Pos bleiben
 * ========================================================= */
@media (prefers-reduced-motion: reduce){
	.vero-shake,
	.vero-shake-viewport,
	.vero-fx-flash,
	.vero-fx-blackout,
	.vero-fx-prewarn,
	.vero-fx-prewarn__ring,
	.vero-fx-prewarn__dot,
	.vero-fx-prewarn__glyph,
	.vero-fx-walker,
	.vero-chibi-overlay,
	.vero-chibi-overlay__svg,
	.chibi-char.chibi-pose-shock,
	.chibi-char.chibi-pose-fall,
	.chibi-char.chibi-pose-heart,
	.chibi-char.chibi-pose-sick,
	.chibi-char.chibi-pose-pain,
	.chibi-char.chibi-pose-fear,
	.canvas-scaler,
	.canvas-wrapper.vero-stage-alert::after {
		animation: none !important;
		transition: none !important;
	}
	.vero-fx-blackout { opacity: 0.55 !important; }
}

/* =========================================================
 * Dark Mode Adjustments
 * ========================================================= */
[data-theme="dark"] .vero-fx-prewarn__text {
	background: rgba(239,68,68,0.95);
}
[data-theme="dark"] .canvas-wrapper.vero-stage-alert::after {
	box-shadow: inset 0 0 0 3px rgba(251,191,36,0.65), inset 0 0 60px rgba(239,68,68,0.4);
}