Theme

static/css/main.css

@@ -145,6 +145,12 @@ input[type="number"]::-webkit-inner-spin-button {
     border-bottom: none;
 }
 
+.participant-name.is-admin {
+    color: #2f58ff;
+    text-shadow: 0 0 0.2rem rgba(47, 88, 255, 0.32);
+    font-weight: 700;
+}
+
 .summary-table {
     width: 100%;
     border-collapse: collapse;
@@ -164,13 +170,41 @@ input[type="number"]::-webkit-inner-spin-button {
 }
 
 .vote-card.impact {
-    animation: vote-impact 170ms ease;
+    animation: vote-impact 320ms cubic-bezier(0.2, 0.85, 0.2, 1);
 }
 
 @keyframes vote-impact {
-    0% { transform: scale(1); }
-    40% { transform: scale(0.91); }
-    100% { transform: scale(1); }
+    0% { transform: translateX(0) scale(1) rotate(0deg); }
+    15% { transform: translateX(-0.18rem) scale(0.9) rotate(-2.2deg); }
+    30% { transform: translateX(0.14rem) scale(1.06) rotate(1.7deg); }
+    45% { transform: translateX(-0.1rem) scale(0.98) rotate(-1.4deg); }
+    60% { transform: translateX(0.08rem) scale(1.04) rotate(1deg); }
+    100% { transform: translateX(0) scale(1) rotate(0deg); }
+}
+
+.vote-particle {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 0.32rem;
+    height: 0.32rem;
+    border-radius: 999px;
+    pointer-events: none;
+    background: hsl(var(--hue, 120) 95% 66%);
+    box-shadow: 0 0 0.35rem hsl(var(--hue, 120) 95% 66%);
+    transform: translate(-50%, -50%) scale(1);
+    animation: vote-particle-burst 420ms ease-out forwards;
+}
+
+@keyframes vote-particle-burst {
+    0% {
+        opacity: 0.95;
+        transform: translate(-50%, -50%) scale(1);
+    }
+    100% {
+        opacity: 0;
+        transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) scale(0.2);
+    }
 }
 
 .terminal-window .title-bar {