added random cybersigilism generation

frontend/src/styles/global.css

@@ -2022,6 +2022,47 @@ html.cybersigil body::after {
 .cybersigil .cs-fx-corner--bl { bottom: 0; left: 0;  transform: scaleY(-1); animation-delay: -3.4s; }
 .cybersigil .cs-fx-corner--br { bottom: 0; right: 0; transform: scale(-1);  animation-delay: -5.1s; }
 
+/* ─── Generated sigils (cs-sigil markup from lib/cybersigil.ts) ──────────
+ * Inert/hidden everywhere; only cybersigil draws them. Strokes start fully
+ * dashed-out and "carve" in via cs-carve. `forwards` fill means the reduced-
+ * motion kill-switch resolves them to the finished (fully drawn) state. */
+.cs-sigil { display: none; }
+.cybersigil .cs-sigil {
+  display: block;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+}
+.cybersigil .cs-sigil path,
+.cybersigil .cs-sigil line {
+  fill: none;
+  stroke: var(--sky);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  vector-effect: non-scaling-stroke;
+  stroke-dasharray: 1;
+  stroke-dashoffset: 1;
+}
+.cybersigil .cs-sig-spine { opacity: 0.45; stroke-width: 1.4; }
+
+@keyframes cs-carve {
+  to { stroke-dashoffset: 0; }
+}
+
+/* Corner growths: swap the static mask box for the live SVG, keep the box's
+ * size / placement / flicker opacity. Carves itself on page load. */
+.cybersigil .cs-fx-corner--sig {
+  background: none;
+  -webkit-mask: none;
+  mask: none;
+}
+.cybersigil .cs-fx-corner--sig .cs-sigil path,
+.cybersigil .cs-fx-corner--sig .cs-sigil line {
+  animation: cs-carve 1100ms ease-out forwards;
+  animation-delay: calc(var(--i, 0) * 90ms);
+}
+
 /* Selection — magenta block, bone glyph, cyan bleed. */
 .cybersigil ::selection {
   background: var(--mauve);
@@ -2199,6 +2240,41 @@ html.cybersigil body::after {
   animation: cs-scan 0.78s cubic-bezier(0.4, 0, 0.2, 1) 1;
 }
 
+/* Per-plate sigil — spiky bruised-magenta growth that carves over the tile
+ * on contact, then fades back out. Screen-blended so it etches into the
+ * panel rather than masking it. */
+.cs-plate-sig { display: none; }
+.cybersigil .cs-plate-sig {
+  display: block;
+  position: absolute;
+  top: -9%;
+  left: 50%;
+  width: 46%;
+  height: 118%;
+  transform: translateX(-50%);
+  z-index: 2;
+  pointer-events: none;
+  opacity: 0;
+  mix-blend-mode: screen;
+  transition: opacity 0.24s ease;
+}
+.cybersigil .cs-plate-sig .cs-sigil path,
+.cybersigil .cs-plate-sig .cs-sigil line {
+  stroke: color-mix(in srgb, var(--mauve) 68%, var(--sky));
+  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--mauve) 55%, transparent));
+}
+.cybersigil .plate-enter:hover .cs-plate-sig,
+.cybersigil .plate-enter:focus-within .cs-plate-sig {
+  opacity: 0.5;
+}
+.cybersigil .plate-enter:hover .cs-plate-sig .cs-sigil path,
+.cybersigil .plate-enter:hover .cs-plate-sig .cs-sigil line,
+.cybersigil .plate-enter:focus-within .cs-plate-sig .cs-sigil path,
+.cybersigil .plate-enter:focus-within .cs-plate-sig .cs-sigil line {
+  animation: cs-carve 600ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
+  animation-delay: calc(var(--i, 0) * 55ms);
+}
+
 /* Scroll-entry databend (class toggled by CyberFx IntersectionObserver). */
 @keyframes cs-databend {
   0%   { clip-path: inset(0 0 0 0); transform: translateX(0); filter: none; }