Use a number field, and improve focus styles

app/assets/stylesheets/cards.css

@@ -468,9 +468,11 @@
   }
 
   .input.boost__input {
+    --hover-size: 0;
     --input-border-radius: 0;
     --input-border-size: 0;
     --input-padding: 0;
+    --outline-size: 0;
 
     color: inherit;
     font-size: inherit;
@@ -483,6 +485,16 @@
       field-sizing: content;
       max-inline-size: unset;
     }
+
+    &:focus {
+      background-color: var(--color-highlight);
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
   }
 
   .card__popped {

app/views/bubbles/boosts/_boosts.html.erb

@@ -1,6 +1,6 @@
 <%= form_with url: bubble_boosts_path(bubble), class: "pad-inline flex align-center gap" do %>
   <span class="overflow-ellipsis">
-    <strong><%= text_field_tag :boost_count, bubble.boosts_count, min: 1, class: "boost__input input", autocomplete: "off" %></strong>
+    <strong><%= number_field_tag :boost_count, bubble.boosts_count, min: 1, class: "boost__input input", autocomplete: "off" %></strong>
     <span><%= bubble.boosts_count == 1 ? "boost" : "boosts" %></span>
   </span>
   <%= tag.button class: "btn", type: :submit, style: "font-size: 0.4em" do %>