Polish battle HUD notices

src/styles/animations.css

@@ -46,6 +46,15 @@
   }
 }
 
+@keyframes battle-notice-roll {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(calc(-1 * (var(--battle-notice-message-width) + var(--battle-notice-roll-gap))));
+  }
+}
+
 @keyframes kill-log-entry {
   from {
     opacity: 0;

src/styles/game-ui.css

@@ -13,9 +13,9 @@
   scrollbar-width: thin;
   scrollbar-color: rgb(238 185 73 / 0.3) transparent;
   padding: 8px;
-  border: 1px solid rgb(238 185 73 / 0.18);
+  border: 1px solid rgb(238 185 73 / 0.12);
   border-radius: 8px;
-  background: rgb(4 6 4 / 0.5);
+  background: rgb(4 6 4 / 0.46);
   opacity: 0;
   pointer-events: none;
   transform: translateY(-18px);
@@ -56,33 +56,54 @@
 }
 
 .team-score {
+  position: relative;
   display: grid;
   grid-template-rows: 1fr 1px auto;
   gap: 6px;
   width: 100%;
   min-height: 72px;
   overflow: hidden;
+  border: 1px solid rgb(255 244 209 / 0.08);
   border-radius: 6px;
   padding: 8px 7px;
+  background: rgb(8 10 7 / 0.58);
   color: #fff;
   font-size: 0.8rem;
   font-weight: 900;
   text-align: left;
-  text-shadow: 1px 1px 2px #000;
+  text-shadow: 0 1px 1px rgb(0 0 0 / 0.78);
   transition:
-    filter 160ms ease,
-    transform 160ms ease;
+    background-color 160ms ease,
+    border-color 160ms ease,
+    filter 160ms ease;
+}
+
+.team-score::before {
+  content: "";
+  position: absolute;
+  top: 9px;
+  left: 8px;
+  width: 10px;
+  height: 7px;
+  border-radius: 1px;
+  background: var(--team-color);
+  box-shadow:
+    0 0 0 1px rgb(0 0 0 / 0.72),
+    inset 0 -1px 0 rgb(0 0 0 / 0.28);
+  opacity: 0.9;
+  transform: skewX(-14deg);
 }
 
 .team-score:hover {
-  filter: brightness(1.16);
-  transform: translateY(-1px);
+  border-color: rgb(255 244 209 / 0.16);
+  background: rgb(12 14 10 / 0.68);
+  filter: brightness(1.06);
 }
 
 .team-score.is-focused {
   box-shadow:
-    inset 0 0 0 2px rgb(255 244 209 / 0.92),
-    0 0 18px rgb(227 178 79 / 0.26);
+    inset 0 0 0 1px rgb(255 244 209 / 0.72),
+    inset 0 0 0 999px rgb(255 244 209 / 0.035);
 }
 
 .team-score:disabled {
@@ -91,7 +112,7 @@
 }
 
 .team-score:disabled:hover {
-  transform: none;
+  background: rgb(8 10 7 / 0.58);
 }
 
 .team-score-name {
@@ -99,6 +120,7 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
+  padding-left: 16px;
   text-overflow: ellipsis;
   white-space: normal;
   line-height: 1.15;
@@ -106,15 +128,18 @@
 
 .team-score-rule {
   width: 100%;
-  background: var(--team-color);
-  opacity: 0.9;
+  background: linear-gradient(
+    90deg,
+    var(--team-color) 0 34%,
+    rgb(255 244 209 / 0.1) 34% 100%
+  );
+  opacity: 0.68;
 }
 
 .team-score-count {
   justify-self: end;
-  color: #fff2c8;
+  color: #ead9b3;
   font-size: 0.68rem;
-  letter-spacing: -0.02em;
   white-space: nowrap;
 }
 
@@ -140,13 +165,51 @@
   text-align: center;
   text-shadow: 1px 1px 2px #000;
   white-space: nowrap;
+  overflow: hidden;
   opacity: 0;
   pointer-events: none;
   transform: translate(-50%, -10px);
   transition:
     opacity 260ms ease,
     transform 260ms ease;
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(7px);
+}
+
+.battle-notice-message {
+  display: block;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.battle-notice.is-rolling {
+  justify-content: flex-start;
+}
+
+.battle-notice-track {
+  display: flex;
+  flex: 0 0 auto;
+  gap: var(--battle-notice-roll-gap, 48px);
+  width: max-content;
+  max-width: none;
+  animation: battle-notice-roll var(--battle-notice-roll-duration, 12s) linear infinite;
+  will-change: transform;
+}
+
+.battle-notice.is-rolling .battle-notice-message {
+  flex: 0 0 auto;
+  max-width: none;
+  overflow: visible;
+  text-overflow: clip;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .battle-notice-track {
+    animation: none;
+    transform: none;
+  }
 }
 
 #app.match-live .battle-notice.is-visible {

src/styles/mobile.css

@@ -204,12 +204,25 @@
     align-content: center;
   }
 
+  .team-score::before {
+    top: 6px;
+    left: 6px;
+    width: 8px;
+    height: 6px;
+  }
+
+  .team-score-name {
+    padding-left: 13px;
+  }
+
   .team-score-count {
     font-size: 0.64rem;
   }
 
   .team-score.is-focused {
-    box-shadow: inset 0 0 0 2px rgb(255 244 209 / 0.92);
+    box-shadow:
+      inset 0 0 0 1px rgb(255 244 209 / 0.72),
+      inset 0 0 0 999px rgb(255 244 209 / 0.035);
   }
 
   .battle-notice {