ui: optimize kill log with 30-entry limit and slim scrollbar

src/styles.css

@@ -1069,7 +1069,9 @@ input[type="range"] {
   z-index: 4;
   width: min(370px, calc(100vw - 32px));
   max-height: min(34vh, 292px);
-  overflow: hidden;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgb(238 185 73 / 0.3) transparent;
   border: 1px solid rgb(238 185 73 / 0.2);
   border-radius: 8px;
   padding: 10px;
@@ -1083,15 +1085,28 @@ input[type="range"] {
   backdrop-filter: blur(10px);
 }
 
+.kill-log::-webkit-scrollbar {
+  width: 4px;
+}
+
+.kill-log::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.kill-log::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  background: rgb(238 185 73 / 0.3);
+}
+
 #app.match-live .kill-log.has-entries {
   opacity: 1;
+  pointer-events: auto;
   transform: translateY(0);
 }
 
 .kill-log-list {
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
   gap: 6px;
   min-height: 0;
   margin: 0;

src/ui/arenaKillLog.js

@@ -1,4 +1,4 @@
-const KILL_LOG_LIMIT = 8;
+const KILL_LOG_LIMIT = 30;
 
 export function resetKillLog(nodes) {
   const { logNode, listNode } = nodes;
@@ -45,10 +45,10 @@ export function appendKillLog(nodes, winner, defender) {
     action,
     createKillLogFighterNode(victim, "victim"),
   );
-  listNode.append(item);
+  listNode.prepend(item);
 
   while (listNode.children.length > KILL_LOG_LIMIT) {
-    listNode.firstElementChild?.remove();
+    listNode.lastElementChild?.remove();
   }
 
   logNode.classList.add("has-entries");