/* ═══════════════════════════════════════════════════════════════════════
   Kampagnenkarte: Dungeons als Wahrzeichen IN der Szene (assets/js/pixelart-worldmap.js) statt Kacheln mit Rahmen.
   Straße/Pfad je Kampagne verbindet die Orte; Challenges hängen als Portale an Abzweigen.
   ═══════════════════════════════════════════════════════════════════════ */
.worldmap-map-pane { --road-w: 18px; }
.worldmap-map-pane.campaign-bg-pflegeplanung { --road-w: 22px; }
.worldmap-map-pane.campaign-bg-neurologie { --road-w: 18px; }
.worldmap-map-pane.campaign-bg-demenz { --road-w: 5px; }
.worldmap-map-pane.campaign-bg-vitalzeichen { --road-w: 16px; }

/* ── Orte ── */
.worldmap-cell.wm-lm-cell {
  background: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0;
  padding: 0; gap: 0; overflow: visible; position: relative; z-index: 1; cursor: pointer;
  filter: none !important; transform: none !important; justify-content: center;
}
.wm-lm {
  position: relative; display: block; flex: 0 0 auto; width: min(210%, 150px, calc((100vh - 110px) / 5 * 0.66)); max-height: 74%; aspect-ratio: 1 / 1;
  transition: filter 160ms;
}
.wm-lm .pxw { display: block; width: 100%; height: 100%; image-rendering: pixelated; overflow: visible; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.35)); }
.wm-lm::after {   /* Bodenschatten */
  content: ""; position: absolute; left: 14%; right: 14%; bottom: -2%; height: 7%; background: rgba(0, 0, 0, 0.3); border-radius: 50%; z-index: -1;
}
.wm-lm-cell:hover .wm-lm { animation: wmLmBob 0.5s steps(2, end) infinite; filter: brightness(1.12) drop-shadow(0 0 8px rgba(255, 224, 120, 0.7)); }
@keyframes wmLmBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }

/* Namensschild (hängendes Holz-/Metallschild, Pixelrahmen aus Schatten) */
.wm-lm-plate {
  position: relative; z-index: 2; margin-top: -3px; padding: 2px 5px; max-width: 215%; text-align: center;
  font-size: 0.56rem; font-weight: 800; line-height: 1.12; letter-spacing: 0.01em; color: #fff3d0; text-shadow: 0 1px 0 #000;
  background: #2f1d0e; box-shadow: 0 0 0 2px #8a5a2b, 0 0 0 4px #160f1c, 0 4px 0 4px rgba(0, 0, 0, 0.25);
}
.wm-lm-plate small { color: #f2c94c; font-weight: 700; }
.wm-lm-cell:hover .wm-lm-plate { color: #fff; background: #4a2d14; }
.campaign-bg-neurologie .wm-lm-plate { background: #241a38; color: #eadcff; box-shadow: 0 0 0 2px #7a5fb8, 0 0 0 4px #0c0814, 0 4px 0 4px rgba(0, 0, 0, 0.3); }
.campaign-bg-demenz .wm-lm-plate { background: #131f3a; color: #d8f6ff; box-shadow: 0 0 0 2px #46d8e0, 0 0 0 4px #060a18, 0 4px 0 4px rgba(0, 0, 0, 0.3); }
.campaign-bg-vitalzeichen .wm-lm-plate { background: #3a2410; color: #ffe9b8; box-shadow: 0 0 0 2px #b5834a, 0 0 0 4px #1c1008, 0 4px 0 4px rgba(0, 0, 0, 0.25); }
.campaign-bg-pflegeplanung .wm-lm-plate { background: #1d2a44; color: #e6f0ff; box-shadow: 0 0 0 2px #5a8fd6, 0 0 0 4px #0a1020, 0 4px 0 4px rgba(0, 0, 0, 0.3); }

/* gesperrt: Silhouette im Dunst */
.wm-lm-cell.worldmap-cell-locked .wm-lm .pxw { filter: brightness(0.26) saturate(0.15) contrast(1.15); }
.wm-lm-cell.worldmap-cell-locked .wm-lm-plate { opacity: 0.62; filter: grayscale(0.6); }
.wm-lm-cell.worldmap-cell-locked { cursor: not-allowed; }
.wm-lm-lock { position: absolute; left: 50%; top: 52%; translate: -50% -50%; font-style: normal; font-size: 1.4rem; filter: drop-shadow(0 1px 0 #000); z-index: 3; }
/* geschafft: Fähnchen am Ort */
.wm-done .wm-lm::before {
  content: "✓"; position: absolute; right: 4%; top: 0; z-index: 3; width: 18px; height: 18px; display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 900; color: #fff; background: #2f9d4a; box-shadow: 0 0 0 2px #0f3a1c; text-shadow: 0 1px 0 #0f3a1c;
}
.worldmap-cell.wm-lm-cell.worldmap-cell-tutorial-pending .wm-lm { animation: wmLmBob 0.9s steps(2, end) infinite; filter: drop-shadow(0 0 10px rgba(255, 224, 120, 0.9)); }

/* Challenge-Portal */
.wm-lm-portal { width: min(130%, 64px); max-height: 56%; }
.wm-lm-challenge .wm-lm-plate { max-width: 190%; background: #2a1440; color: #ffd27a; box-shadow: 0 0 0 2px #ffb347, 0 0 0 4px #14081f; font-size: 0.5rem; }
.wm-lm-challenge .px-l-swirl { animation: wmSwirl 1.6s linear infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes wmSwirl { to { rotate: 360deg; } }

/* ── Wege ── */
.wm-path, .wm-path-branch { position: relative; z-index: 0; pointer-events: none; }
.wm-path::before {
  content: ""; position: absolute; left: 50%; translate: -50% 0; width: var(--road-w);
  top: calc(50% / var(--n, 2)); bottom: calc(50% / var(--n, 2));
}
.wm-path-branch { align-self: center; height: 100%; }
.wm-path-branch::before {
  content: ""; position: absolute; left: 25%; right: 25%; top: 50%; translate: 0 -50%; height: calc(var(--road-w) * 0.6);
}
/* Stadt: Asphalt mit gelber Mittellinie */
.campaign-bg-pflegeplanung .wm-path::before {
  background: repeating-linear-gradient(180deg, #e8c34a 0 7px, transparent 7px 15px) 50% 0 / 3px 100% no-repeat, linear-gradient(90deg, #1c1c26 0 2px, #2e2e3b 2px calc(100% - 2px), #1c1c26 0);
  box-shadow: 0 0 0 2px #0e0e16;
}
.campaign-bg-pflegeplanung .wm-path-branch::before {
  background: repeating-linear-gradient(90deg, #e8c34a 0 6px, transparent 6px 13px) 0 50% / 100% 2px no-repeat, linear-gradient(180deg, #1c1c26 0 2px, #2e2e3b 2px calc(100% - 2px), #1c1c26 0);
  box-shadow: 0 0 0 2px #0e0e16;
}
/* Neurologie: Kopfsteinpflaster */
.campaign-bg-neurologie .wm-path::before, .campaign-bg-neurologie .wm-path-branch::before {
  background: repeating-linear-gradient(180deg, transparent 0 6px, #2b2640 6px 8px), repeating-linear-gradient(90deg, transparent 0 8px, #2b2640 8px 10px), #5f5878;
  box-shadow: 0 0 0 2px #14101f;
}
/* Demenz: leuchtende Flugbahn */
.campaign-bg-demenz .wm-path::before {
  background: repeating-linear-gradient(180deg, #7ff5e6 0 4px, transparent 4px 11px);
  box-shadow: 0 0 0 5px rgba(70, 216, 224, 0.10); filter: drop-shadow(0 0 4px #46d8e0);
}
.campaign-bg-demenz .wm-path-branch::before {
  background: repeating-linear-gradient(90deg, #7ff5e6 0 4px, transparent 4px 11px); height: 5px;
  box-shadow: 0 0 0 4px rgba(70, 216, 224, 0.10); filter: drop-shadow(0 0 4px #46d8e0);
}
/* Vitalzeichen: Trampelpfad */
.campaign-bg-vitalzeichen .wm-path::before, .campaign-bg-vitalzeichen .wm-path-branch::before {
  background: radial-gradient(#b08a55 1.2px, transparent 1.7px) 0 0 / 9px 9px, #8a5f33; box-shadow: 0 0 0 2px #5d3f20;
}

/* ── Schicht-Animationen der Wahrzeichen ── */
.pxw g[class^="px-l-"] { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes wmSteamUp { 0%, 100% { translate: 0 0; opacity: 0.95; } 50% { translate: 1px -2px; opacity: 0.45; } }
@keyframes wmFlicker { 0%, 100% { scale: 1 1; opacity: 1; } 50% { scale: 1.08 1.18; opacity: 0.85; } }
@keyframes wmBlink { 0%, 55%, 100% { opacity: 1; } 60%, 95% { opacity: 0.1; } }
@keyframes wmPulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
@keyframes wmWave { 0%, 100% { translate: 0 0; } 50% { translate: 1px 0; } }
@keyframes wmBeat { 0%, 100% { scale: 1; } 20% { scale: 1.2; } 40% { scale: 1; } }
@keyframes wmDrift { 0%, 100% { translate: -1px 0; opacity: 0.85; } 50% { translate: 2px 0; opacity: 1; } }
.pxw .px-l-steam, .pxw .px-l-smoke { animation: wmSteamUp 2.6s ease-in-out infinite; }
.pxw .px-l-fire { animation: wmFlicker 0.6s steps(2, end) infinite; transform-origin: 50% 100%; }
.pxw .px-l-alarm { animation: wmBlink 1.1s steps(1, end) infinite; }
.pxw .px-l-glow { animation: wmPulse 2.4s ease-in-out infinite; }
.pxw .px-l-flag { animation: wmWave 1.4s steps(2, end) infinite; }
.pxw .px-l-eyes { animation: wmBlink 4.5s steps(1, end) infinite; }
.pxw .px-l-ecg, .pxw .px-l-pulse { animation: wmPulse 1.1s ease-in-out infinite; }
.pxw .px-l-heart { animation: wmBeat 1.2s ease-in-out infinite; }
.pxw .px-l-fog { animation: wmDrift 5s ease-in-out infinite; }
.pxw .px-l-swirl { animation: wmSwirl 3s linear infinite; }
.pxw .px-l-bubble { animation: wmSteamUp 3.2s ease-in-out infinite; }

@media (max-width: 700px) {
  .wm-lm-plate { font-size: 0.5rem; padding: 1px 4px; box-shadow: 0 0 0 1px #8a5a2b, 0 0 0 3px #160f1c; }
  .campaign-bg-neurologie .wm-lm-plate { box-shadow: 0 0 0 1px #7a5fb8, 0 0 0 3px #0c0814; }
  .campaign-bg-demenz .wm-lm-plate { box-shadow: 0 0 0 1px #46d8e0, 0 0 0 3px #060a18; }
  .campaign-bg-vitalzeichen .wm-lm-plate { box-shadow: 0 0 0 1px #b5834a, 0 0 0 3px #1c1008; }
  .campaign-bg-pflegeplanung .wm-lm-plate { box-shadow: 0 0 0 1px #5a8fd6, 0 0 0 3px #0a1020; }
}
@media (prefers-reduced-motion: reduce) { .pxw g[class^="px-l-"], .wm-lm-cell:hover .wm-lm { animation: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════
   Freie Szenen-Karte (pixelart-worldscene.js): Pixel-Canvas als Hintergrund, Orte stehen IN der Szene
   ═══════════════════════════════════════════════════════════════════════ */
.worldmap-map-pane.wm-px-on { container-type: size; background: #05030c !important; background-image: none !important; --lmw: clamp(64px, min(30cqw, 19cqh), 150px); }
.wm-pixel-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; z-index: 0; display: block; }
/* alte Verlauf-/CSS-Formen weichen dem Pixel-Hintergrund; Orte ersetzen die Szenen-Doubletten (Schloss, Vulkan) */
.wm-px-on .wm-scene-halftone, .wm-px-on .wm-scene-skyline, .wm-px-on .wm-space-stars, .wm-px-on .wm-night-sky, .wm-px-on .wm-moon,
.wm-px-on .wm-forest, .wm-px-on .wm-hill, .wm-px-on .wm-castle, .wm-px-on .wm-village,
.wm-px-on .wm-jungle-cloud, .wm-px-on .wm-volcano, .wm-px-on .wm-jungle-ridge, .wm-px-on .wm-jungle-floor { display: none !important; }
/* Kaiju thront hinter der Stadt (oben), nicht mehr mitten im Weg */
.wm-px-on .wm-kaiju { bottom: auto; top: 13%; scale: 0.62; transform-origin: 50% 0; }
.wm-px-on:not(.wm-portrait) .wm-kaiju { scale: 0.7; }
.wm-px-on .wm-brachio { bottom: 6%; }

.worldmap-grid.wm-free { display: block; padding: 0; }
.wm-free .worldmap-cell-fog { display: none; }
.wm-free .wm-lm-cell.wm-free-node {
  position: absolute; width: var(--lmw); height: auto; left: calc(var(--px) * 1%); top: calc(var(--py) * 1%); translate: -50% -62%;
}
.wm-px-on:not(.wm-portrait) .wm-free .wm-lm-cell.wm-free-node { left: calc(var(--lx) * 1%); top: calc(var(--ly) * 1%); }
.wm-free .wm-lm { width: 100%; max-height: none; }
.wm-free .wm-lm-plate { max-width: 150%; }
.wm-free .wm-lm-portal { width: 64%; margin: 0 auto; }
.wm-free .wm-lm::after { display: none; }
.wm-px-on .wm-scene { opacity: 1; }
.wm-px-on .wm-scene-pflegeplanung { opacity: 0.9; }
.wm-free .wm-lm-cell.wm-free-node.wm-lm-challenge { width: calc(var(--lmw) * 0.6); translate: -50% -55%; }
.wm-free .wm-lm-challenge .wm-lm-portal { width: 100%; }
.wm-free .wm-lm-challenge .wm-lm-plate { max-width: 200%; font-size: 0.46rem; }

/* ── Größe nach Wahrzeichen-Maß und Tiefe; Bodenebene: Fußpunkt = Position ── */
.wm-free .wm-lm-cell.wm-free-node:not(.wm-lm-challenge) { width: calc(var(--lmw) * var(--k, 1) * var(--ds, 1)); }
.wm-px-on:not(.wm-portrait) .wm-free .wm-lm-cell.wm-free-node:not(.wm-lm-challenge) { width: calc(var(--lmw) * var(--k, 1) * var(--dsl, 1)); }
.wm-free .wm-lm-cell.wm-free-node:not(.wm-lm-challenge) .wm-lm { aspect-ratio: var(--ar, 1 / 1); max-height: none; }
.wm-free .wm-ground-node.wm-free-node:not(.wm-lm-challenge) { translate: -50% calc(-100% + 20px); }
.wm-free .wm-ground-node .wm-lm-plate { max-width: 170%; }
/* Fledermäuse, die aus dem Schloss fliegen */
.wm-batfx { position: absolute; z-index: 3; width: 33px; height: 18px; background: var(--u-bat) center / 100% 100% no-repeat; image-rendering: pixelated; pointer-events: none; opacity: 0; animation: wmBatOut 3.2s ease-out forwards; animation-delay: var(--d, 0s); }
@keyframes wmBatOut { 0% { opacity: 0; translate: 0 0; scale: 0.5; } 12% { opacity: 1; } 55% { translate: calc(var(--dx) * 0.6) calc(var(--dy) * 0.5 - 8px); } 100% { opacity: 0; translate: var(--dx) var(--dy); scale: 1.1; } }
.wm-px-on .wm-palm { display: none !important; }
.wm-px-on .wm-brachio { left: 0; bottom: 40%; scale: 0.4; transform-origin: 20% 100%; }

/* ── Stadtleben (cityFx in pixelart-worldscene.js) ── */
.wm-cityfx { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.wm-fx { position: absolute; display: block; image-rendering: pixelated; }
.wm-fx .pxw { display: block; width: 100%; height: 100%; }
.wm-car { width: 42px; height: 21px; animation-duration: var(--dur, 20s); animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes wmDriveR { from { left: -12%; } to { left: 108%; } }
@keyframes wmDriveL { from { left: 108%; } to { left: -12%; } }
.wm-ped { width: 10px; height: 20px; animation-duration: var(--dur, 50s); animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes wmWalkR { from { left: -4%; } to { left: 104%; } }
@keyframes wmWalkL { from { left: 104%; } to { left: -4%; } }
.wm-bob { display: block; width: 100%; height: 100%; animation: wmBobStep 0.5s steps(2, end) infinite; }
@keyframes wmBobStep { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
.wm-heli { width: 52px; height: 22px; animation: wmHeli 34s linear infinite; }
@keyframes wmHeli { 0% { left: -14%; translate: 0 0; } 25% { translate: 0 -8px; } 50% { translate: 0 4px; } 75% { translate: 0 -6px; } 100% { left: 112%; translate: 0 0; } }
.wm-heli .px-l-rotor { animation: wmRotor 0.12s steps(2, end) infinite; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes wmRotor { 0% { scale: 1 1; } 50% { scale: 0.45 1; } }
.wm-bird { width: 14px; height: 6px; animation: wmBird var(--dur, 30s) linear infinite; }
@keyframes wmBird { 0% { left: -4%; translate: 0 0; } 20% { translate: 0 -6px; } 40% { translate: 0 4px; } 60% { translate: 0 -5px; } 80% { translate: 0 3px; } 100% { left: 104%; translate: 0 0; } }
.wm-fxwin { width: 5px; height: 5px; background: #ffd27a; box-shadow: 0 0 6px 1px rgba(255, 190, 90, 0.7); animation: wmWinBlink var(--t, 4s) steps(1, end) infinite; }
@keyframes wmWinBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
.wm-neon { width: 26px; height: 9px; background: var(--c, #ff4fa0); box-shadow: 0 0 10px 2px var(--c, #ff4fa0); animation: wmNeon 2.2s steps(1, end) infinite; }
@keyframes wmNeon { 0%, 70% { opacity: 1; } 72%, 76% { opacity: 0.2; } 78%, 100% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .wm-fx, .wm-fx * { animation: none !important; } .wm-car, .wm-ped, .wm-heli, .wm-bird { display: none; } }

/* ── Hubschrauber blickt in Flugrichtung; Kaiju läuft um das Finale (worldmap-fx.js) ── */
.wm-heli { scale: -1 1; }
.wm-kaiju-wrap { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.wm-px-on .wm-kaiju.wm-walk { left: 0; top: 0; bottom: auto; scale: calc(var(--ks, 0.38) * var(--kf, 1)) var(--ks, 0.38); transform-origin: 50% 100%; }
.wm-px-on:not(.wm-portrait) .wm-kaiju.wm-walk { scale: calc(var(--ks, 0.38) * var(--kf, 1)) var(--ks, 0.38); }

/* ── Neurologie ── */
.wm-ghost { width: 30px; height: 36px; opacity: 0.6; animation-duration: var(--dur, 50s); animation-timing-function: linear; animation-iteration-count: infinite; }
.wm-ghost .pxw { animation: wmGhostBob 2.6s ease-in-out infinite; }
@keyframes wmGhostBob { 0%, 100% { translate: 0 0; opacity: 0.9; } 50% { translate: 0 -6px; opacity: 0.45; } }
.wm-wisp { width: 5px; height: 5px; border-radius: 50%; background: var(--c, #9bff9b); box-shadow: 0 0 8px 3px var(--c, #9bff9b); animation: wmWisp var(--t, 8s) ease-in-out infinite; }
@keyframes wmWisp { 0%, 100% { translate: 0 0; opacity: 0.15; } 30% { opacity: 1; } 50% { translate: var(--dx) var(--dy); opacity: 0.9; } 80% { opacity: 0.3; } }
.wm-fogband { width: 62%; height: 6%; opacity: 0.45; animation-duration: var(--dur, 60s); animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes wmFogR { from { left: -62%; } to { left: 100%; } }
@keyframes wmFogL { from { left: 100%; } to { left: -62%; } }
.wm-candle { width: 5px; height: 5px; background: #ffd27a; box-shadow: 0 0 8px 2px rgba(255, 170, 60, 0.8); animation: wmCandle var(--t, 2s) steps(4, end) infinite; }
@keyframes wmCandle { 0%, 100% { opacity: 1; } 25% { opacity: 0.45; } 50% { opacity: 0.85; } 75% { opacity: 0.3; } }

/* ── Demenz ── */
.wm-twinkle { width: 2px; height: 2px; background: #fff; animation: wmTw var(--t, 3s) steps(2, end) infinite; }
@keyframes wmTw { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }
.wm-ship { width: 36px; height: 18px; animation-duration: var(--dur, 30s); animation-timing-function: linear; animation-iteration-count: infinite; }
.wm-ship .px-l-flame { animation: wmFlicker 0.25s steps(2, end) infinite; transform-box: fill-box; transform-origin: 100% 50%; }
.wm-sat { width: 36px; height: 20px; animation: wmSat 90s linear infinite; }
@keyframes wmSat { 0% { left: -6%; translate: 0 0; } 100% { left: 106%; translate: 0 40px; } }
.wm-ast { width: 22px; height: 19px; animation: wmAst var(--dur, 60s) ease-in-out infinite alternate; }
@keyframes wmAst { from { translate: 0 0; rotate: 0deg; } to { translate: var(--dx) var(--dy); rotate: 140deg; } }
.wm-shoot { width: 2px; height: 46px; background: linear-gradient(180deg, transparent, #fff); rotate: -55deg; opacity: 0; animation: wmShoot 11s linear infinite; animation-delay: var(--d, 0s); }
@keyframes wmShoot { 0% { opacity: 0; translate: 0 0; } 1% { opacity: 1; } 7% { opacity: 0; translate: 150px 110px; } 100% { opacity: 0; translate: 150px 110px; } }
.wm-comet { width: 7px; height: 7px; background: #dff6ff; border-radius: 50%; box-shadow: 0 0 10px 4px rgba(150, 220, 255, 0.7), -26px -14px 14px 2px rgba(150, 220, 255, 0.3), -46px -24px 18px 1px rgba(150, 220, 255, 0.18); animation: wmComet 48s linear infinite; }
@keyframes wmComet { 0% { left: -6%; top: 6%; } 100% { left: 106%; top: 50%; } }

/* ── Vitalzeichen ── */
.wm-dino { width: 54px; height: 29px; animation-duration: var(--dur, 100s); animation-timing-function: linear; animation-iteration-count: infinite; opacity: 0.85; }
.wm-dino .pxw { animation: wmBobStep 0.9s steps(2, end) infinite; }
.wm-raptor { width: 36px; height: 20px; animation-duration: var(--gap, 36s); animation-timing-function: linear; animation-iteration-count: infinite; }
.wm-raptor .pxw { animation: wmBobStep 0.18s steps(2, end) infinite; }
@keyframes wmRunR { 0% { left: -10%; } 40% { left: 110%; } 100% { left: 110%; } }
@keyframes wmRunL { 0% { left: 110%; } 40% { left: -10%; } 100% { left: -10%; } }
.wm-dragon { width: 20px; height: 11px; animation: wmDrag var(--t, 7s) ease-in-out infinite; }
.wm-dragon .pxw { animation: wmFlap 0.14s steps(2, end) infinite; }
@keyframes wmDrag { 0%, 100% { translate: 0 0; } 20% { translate: var(--dx) var(--dy); } 45% { translate: calc(var(--dx) * -0.4) calc(var(--dy) * 0.3); } 70% { translate: calc(var(--dx) * 0.6) calc(var(--dy) * -0.6); } }
@keyframes wmFlap { 0% { scale: 1 1; } 50% { scale: 1 0.55; } }
.wm-glint { width: 3px; height: 2px; background: #fff; animation: wmGlint var(--t, 3s) steps(1, end) infinite; }
@keyframes wmGlint { 0%, 70% { opacity: 0; } 71%, 90% { opacity: 1; } 91%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .wm-ghost, .wm-wisp, .wm-ship, .wm-sat, .wm-raptor, .wm-dino, .wm-comet, .wm-shoot { display: none; } }

/* ── Interaktionen: Sprechblasen, Funken, Wellen ── */
.wm-bubble { position: absolute; z-index: 4; translate: -50% -100%; padding: 2px 6px; font-weight: 800; font-size: 0.62rem; line-height: 1.1; color: #1a1020; background: #fffbea; box-shadow: 0 0 0 2px #1a1020, 0 3px 0 2px rgba(0, 0, 0, 0.3); pointer-events: none; white-space: nowrap; animation: wmBubble 1.4s ease-out forwards; }
.wm-bubble.big { font-size: 0.8rem; background: #ffe08a; padding: 3px 8px; }
@keyframes wmBubble { 0% { opacity: 0; scale: 0.4; } 15% { opacity: 1; scale: 1.15; } 25% { scale: 1; } 80% { opacity: 1; } 100% { opacity: 0; translate: -50% calc(-100% - 14px); } }
.wm-spark { position: absolute; z-index: 4; width: 4px; height: 4px; pointer-events: none; animation: wmSpark 0.85s ease-out forwards; }
@keyframes wmSpark { 0% { translate: 0 0; opacity: 1; } 100% { translate: var(--dx) var(--dy); opacity: 0; } }
.wm-ring { position: absolute; z-index: 4; width: 10px; height: 10px; translate: -50% -50%; border: 2px solid var(--c, #fff); border-radius: 50%; pointer-events: none; animation: wmRing 0.9s ease-out forwards; }
@keyframes wmRing { from { scale: 1; opacity: 1; } to { scale: 9; opacity: 0; } }
.wm-ghost-pop { position: absolute; z-index: 4; width: 30px; height: 36px; opacity: 0.85; pointer-events: none; animation: wmGhostPop 1.8s ease-out forwards; }
@keyframes wmGhostPop { from { translate: 0 14px; opacity: 0; } 25% { opacity: 0.9; } to { translate: 0 -26px; opacity: 0; } }
.worldmap-map-pane .wm-batfx { z-index: 4; }