feat: add logo word with letter icons and physics

- Introduced a new logo system consisting of individual letter SVG icons for "shadolldev".
- Implemented LogoController to manage the floating logo word, including physics for movement and collisions with entities.
- Added LogoLetter class to handle individual letter behavior, including ejection and reattachment based on collisions.
- Integrated logo functionality into the main application flow, ensuring it initializes alongside the evolution system.
- Enhanced settings to control debug visibility for letter hit counts.
- Created styles for the logo letters, including animations for ejection and hit effects.
- Updated constants to define logo-related parameters such as letter size, speed, and collision properties.

src/styles/logo.css

@@ -0,0 +1,100 @@
+/* ════════════════════════════════════════════════════════════
+   logo.css — floating "shadolldev" letter word
+   ════════════════════════════════════════════════════════════ */
+
+/* ── Letter outer (physics position) ────────────────────── */
+/*
+ * JS writes transform: translate(Xpx, Ypx) every frame.
+ * Size must match DEFAULTS.LOGO_LETTER_SIZE (36px).
+ */
+.logo-letter {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 36px;
+  height: 36px;
+  will-change: transform;
+  pointer-events: none;
+  z-index: 9;
+}
+
+/* ── Letter body (scale transition + appear animation) ───── */
+.logo-letter__body {
+  width: 100%;
+  height: 100%;
+  scale: 0;
+  opacity: 0;
+  color: rgba(255, 255, 255, 0.22);
+  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.06));
+  transition:
+    scale    0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
+    opacity  0.3s ease,
+    color    0.3s ease,
+    filter   0.3s ease;
+}
+
+.logo-letter__body[data-state="alive"] {
+  scale: 1;
+  opacity: 1;
+}
+
+.logo-letter__body svg {
+  width: 100%;
+  height: 100%;
+  display: block;
+}
+
+/* ── Ejected state — brighter, glowing ──────────────────── */
+/*
+ * The class is on the outer .logo-letter so the body
+ * inherits a new filter/color via the transition.
+ */
+.logo-letter--ejected .logo-letter__body {
+  color: rgba(255, 255, 255, 0.72);
+  filter:
+    drop-shadow(0 0 8px rgba(255, 255, 255, 0.45))
+    drop-shadow(0 0 2px rgba(255, 255, 255, 0.2));
+  scale: 1.12;
+}
+
+/* ── Debug hit-count label ───────────────────────────────── */
+.logo-letter__debug {
+  display: none;
+  position: absolute;
+  top: calc(100% + 3px);
+  left: 50%;
+  transform: translateX(-50%);
+  font-family: 'DM Mono', monospace;
+  font-size: 8px;
+  line-height: 1;
+  color: rgba(255, 255, 255, 0.45);
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+}
+
+.logo-letter--show-debug .logo-letter__debug {
+  display: block;
+}
+
+/* ── Hit flash animation ─────────────────────────────────── */
+@keyframes logo-letter-hit {
+  0%   { scale: 1;    }
+  40%  { scale: 1.5;  }
+  100% { scale: 1;    }
+}
+
+.logo-letter__body--hit {
+  animation: logo-letter-hit 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+
+/* Ejected letters get a slightly larger hit pop */
+.logo-letter--ejected .logo-letter__body--hit {
+  animation: logo-letter-hit-ejected 0.35s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
+}
+
+@keyframes logo-letter-hit-ejected {
+  0%   { scale: 1.12; }
+  40%  { scale: 1.65; }
+  100% { scale: 1.12; }
+}

src/styles/main.css

@@ -12,8 +12,8 @@
 /* ── Design Tokens ───────────────────────────────────────── */
 :root {
   /* Gradient colors — overridden immediately by JS on load */
-  --color-1: #1a7040;
-  --color-2: #4db8c4;
+  --color-1: #4d22b3;
+  --color-2: #8d66e7;
 
   /* Animation timing — overridden by JS (default = speed 5) */
   --anim-duration:     19s;