diff --git a/apps/web/src/app/features/combat/combat-page/combat-page.component.html b/apps/web/src/app/features/combat/combat-page/combat-page.component.html
index fa8831b..92062a7 100644
--- a/apps/web/src/app/features/combat/combat-page/combat-page.component.html
+++ b/apps/web/src/app/features/combat/combat-page/combat-page.component.html
@@ -70,11 +70,11 @@
       }
 
       @if (monsterGuardLabel(); as guard) {
-        <p class="combat__telegraph" data-combat-guard role="status">{{ guard }}</p>
+        <p class="combat__telegraph combat__guard" data-combat-guard role="status">{{ guard }}</p>
       }
 
       @if (monsterIsEnraged()) {
-        <p class="combat__telegraph" data-combat-enraged role="status">
+        <p class="combat__telegraph combat__enraged" data-combat-enraged role="status">
           {{ combat.monster.name }} is enraged.
         </p>
       }
diff --git a/apps/web/src/app/features/combat/combat-page/combat-page.component.scss b/apps/web/src/app/features/combat/combat-page/combat-page.component.scss
index 9db73bd..52aad6a 100644
--- a/apps/web/src/app/features/combat/combat-page/combat-page.component.scss
+++ b/apps/web/src/app/features/combat/combat-page/combat-page.component.scss
@@ -424,13 +424,14 @@
 }
 
 // The guard and enrage banners are the same shape and role as the telegraph
-// above -- same class, same rule -- only the accent changes, picked off the
-// data attribute the tests already hook into.
-[data-combat-guard] {
+// above -- same class, same rule -- only the accent changes. data-combat-guard
+// / data-combat-enraged stay on the elements purely as test hooks; styling
+// keys off the semantic modifier classes instead.
+.combat__guard {
   color: var(--ar-blue);
 }
 
-[data-combat-enraged] {
+.combat__enraged {
   color: var(--ar-danger);
 }