Hustler-Pixelwelt T8: Regie (Ereignisse als Blasen, Icons, Flüge) in der Hochhaus-Welt

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/styles/hustler/hustler-regie.css

@@ -0,0 +1,99 @@
+/* Regie der Hochhaus-Welt (T8, Spec E9): Sprechblase, Symbol-Pop, Flug (Umschlag, Münze) und Jubel-Stern, gezeichnet von RegieEbene.jsx.
+   Handgeschrieben, nicht erzeugt. Alle Klassen beginnen mit hk-regie- und stehen unter der Wurzel .hk-hochhaus; alle Keyframes heißen hk-regie-….
+   Die Ebene liegt in der skalierten Bühne (Weltkoordinaten, 1 Einheit = 1 Kunstpixel): left/top sind der Mittelpunkt (Blase: Spitze des Dreiecks),
+   --dauer (und beim Flug --dx/--dy, der Weg zum Ziel) kommen inline aus dem Effekt. Die Bilder sind die vorhandenen PNGs aus assets/hustler
+   (nichts Neues gezeichnet), 16 × 16 in der Welt; bei Sprite-Blättern (Münze, Stern) zeigt die Regel nur das erste Bild.
+   „Weniger Bewegung“: keine Animation (die Regie zeigt dann ohnehin nur Blasen). Wird in WorkersPage.jsx importiert (CSS-Importe nur dort). */
+
+.hk-hochhaus .hk-regie {
+  position: absolute; inset: 0; z-index: 50;
+  pointer-events: none; overflow: visible;
+  image-rendering: pixelated;
+}
+.hk-hochhaus .hk-regie * { pointer-events: none; }
+
+/* ---------- Sprechblase: dunkler Pixel-Rand ohne Ecken, kleines Dreieck nach unten; die Spitze sitzt auf left/top ---------- */
+.hk-hochhaus .hk-regie-blase {
+  position: absolute;
+  margin-top: -6px; /* Dreieck (2 px Rand + 4 px Spitze) hängt unter dem Kasten: die Spitze landet auf top */
+  transform: translate(-50%, -100%);
+}
+.hk-hochhaus .hk-regie-blase-text {
+  display: block; position: relative; box-sizing: border-box;
+  padding: 2px 4px; white-space: nowrap;
+  font-family: 'Pixelify Sans', ui-monospace, monospace; font-size: 8px; line-height: 10px; font-weight: 400; letter-spacing: normal;
+  color: #1a1630; background: #fffbe8;
+  box-shadow: 0 -2px 0 0 #1a1630, 0 2px 0 0 #1a1630, -2px 0 0 0 #1a1630, 2px 0 0 0 #1a1630;
+  transform-origin: 50% 100%;
+  animation: hk-regie-blase var(--dauer, 2500ms) steps(1, end) both;
+}
+.hk-hochhaus .hk-regie-blase-text::after {
+  content: ''; position: absolute; left: 50%; top: 100%; margin: 2px 0 0 -3px;
+  width: 0; height: 0;
+  border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #1a1630;
+}
+
+/* ---------- Symbole: Haken, Stopp, Akte, Alarm, Umschlag, Münze, Stern (Mittelpunkt auf left/top) ---------- */
+.hk-hochhaus .hk-regie-icon,
+.hk-hochhaus .hk-regie-flug,
+.hk-hochhaus .hk-regie-jubel {
+  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px;
+  background-repeat: no-repeat; background-position: 0 0; background-size: auto 16px;
+  image-rendering: pixelated;
+}
+.hk-hochhaus .hk-regie-bild-umschlag { background-image: url(../../assets/hustler/pult/ui/art-mail.png); }
+.hk-hochhaus .hk-regie-bild-haken { background-image: url(../../assets/hustler/keller/ui/haken.png); }
+.hk-hochhaus .hk-regie-bild-stopp { background-image: url(../../assets/hustler/keller/ui/stopp.png); }
+.hk-hochhaus .hk-regie-bild-akte { background-image: url(../../assets/hustler/keller/ui/akte-icon.png); }
+.hk-hochhaus .hk-regie-bild-alarm { background-image: url(../../assets/hustler/pult/ui/art-beschwerde.png); }
+.hk-hochhaus .hk-regie-bild-muenze { background-image: url(../../assets/hustler/ui/muenze-gruen.png); }
+.hk-hochhaus .hk-regie-bild-stern { background-image: url(../../assets/hustler/ui/stern.png); }
+
+/* Icon-Pop: kurz aufploppen, stehen, am Ende ausblenden */
+.hk-hochhaus .hk-regie-icon { animation: hk-regie-pop var(--dauer, 1200ms) steps(1, end) both; }
+
+/* Flug: Bogen von der Mitte des Absenders zum Ziel (--dx/--dy), fünf Stützpunkte auf einer Parabel, 14 px Bogenhöhe */
+.hk-hochhaus .hk-regie-flug { animation: hk-regie-flug var(--dauer, 900ms) linear both; }
+
+/* Jubel: Stern ploppt auf und hüpft */
+.hk-hochhaus .hk-regie-jubel { animation: hk-regie-jubel var(--dauer, 1200ms) steps(1, end) both; }
+
+@keyframes hk-regie-blase {
+  0%   { transform: scale(0.5); opacity: 1; }
+  4%   { transform: scale(1.12); opacity: 1; }
+  8%   { transform: scale(1); opacity: 1; }
+  90%  { transform: scale(1); opacity: 0.6; }
+  96%  { transform: scale(1); opacity: 0.3; }
+  100% { transform: scale(1); opacity: 0; }
+}
+@keyframes hk-regie-pop {
+  0%   { transform: scale(0.4); opacity: 1; }
+  10%  { transform: scale(1.35); opacity: 1; }
+  22%  { transform: scale(1); opacity: 1; }
+  85%  { transform: scale(1); opacity: 0.5; }
+  100% { transform: scale(1); opacity: 0; }
+}
+@keyframes hk-regie-flug {
+  0%   { transform: translate(0, 0) scale(0.7); opacity: 1; }
+  25%  { transform: translate(calc(var(--dx, 0px) * 0.25), calc(var(--dy, 0px) * 0.25 - 10.5px)) scale(1); opacity: 1; }
+  50%  { transform: translate(calc(var(--dx, 0px) * 0.5), calc(var(--dy, 0px) * 0.5 - 14px)) scale(1); opacity: 1; }
+  75%  { transform: translate(calc(var(--dx, 0px) * 0.75), calc(var(--dy, 0px) * 0.75 - 10.5px)) scale(1); opacity: 1; }
+  100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(0.8); opacity: 0; }
+}
+@keyframes hk-regie-jubel {
+  0%   { transform: translateY(0) scale(0.4); opacity: 1; }
+  12%  { transform: translateY(-4px) scale(1.4); opacity: 1; }
+  24%  { transform: translateY(-8px) scale(1); opacity: 1; }
+  40%  { transform: translateY(-3px) scale(1); opacity: 1; }
+  56%  { transform: translateY(-8px) scale(1); opacity: 1; }
+  72%  { transform: translateY(-3px) scale(1); opacity: 1; }
+  88%  { transform: translateY(-8px) scale(1); opacity: 0.6; }
+  100% { transform: translateY(-8px) scale(1); opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .hk-hochhaus .hk-regie-blase-text,
+  .hk-hochhaus .hk-regie-icon,
+  .hk-hochhaus .hk-regie-flug,
+  .hk-hochhaus .hk-regie-jubel { animation: none; }
+}