UI: общие классы кнопок и бейджей вместо дублирующихся inline-стилей

- .btn-block в global.css заменяет 9 повторов style={{width:100%}};
- .badge-live — единый бейдж «идёт» (3 копии inline-стиля);
- незавершённые партии на главной используют стандартный .card,
  как список партий (была единственная карточка на самодельных стилях);
- в списке партий добавлен бейдж 🎲 случайной фракции — как на странице
  партии (раньше в списке он терялся);
- переключатель групп: кнопка «+» подписана «+ Создать группу»
  (по образцу «+ Добавить игрока»), убран пустой span.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

frontend/src/components/CreateGroupForm.tsx

@@ -58,7 +58,7 @@ export function CreateGroupForm({ onCreated }: { onCreated?: () => void }) {
         </div>
       </div>
       {error && <p className="error-text">{error}</p>}
-      <button className="btn btn-primary" style={{ width: "100%" }} onClick={submit} disabled={createGroup.isPending}>
+      <button className="btn btn-primary btn-block" onClick={submit} disabled={createGroup.isPending}>
         Создать
       </button>
     </div>

frontend/src/components/GroupSwitcher.tsx

@@ -21,17 +21,13 @@ export function GroupSwitcher() {
               className={"btn" + (active ? " btn-primary" : "")}
               onClick={() => !active && setActive.mutate(g.id)}
             >
-              {g.name} {active && "✓"} <span className="muted small"></span>
+              {g.name} {active && "✓"}
             </button>
           );
         })}
         {/* Плашка создания новой группы — в одном ряду логики с выбором группы. */}
-        <button
-          className="btn"
-          aria-label="Создать группу"
-          onClick={() => setCreating((v) => !v)}
-        >
-          +
+        <button className="btn" onClick={() => setCreating((v) => !v)}>
+          + Создать группу
         </button>
       </div>
 

frontend/src/components/InProgressMatches.tsx

@@ -18,23 +18,14 @@ export function InProgressMatches({ items }: { items: HomeInProgressMatch[] }) {
           // а интерактивные элементы внутри <button> — невалидная разметка.
           <div
             key={m.id}
-            className="row-between"
+            className="card row-between"
             onClick={() => navigate(`/match/${m.id}`)}
-            style={{
-              width: "100%",
-              textAlign: "left",
-              background: "var(--surface-2)",
-              border: "1px solid var(--border)",
-              borderRadius: "var(--radius-sm)",
-              padding: 12,
-              color: "var(--text)",
-              cursor: "pointer",
-            }}
+            style={{ margin: 0, cursor: "pointer" }}
           >
             <div style={{ minWidth: 0 }}>
               <div className="row" style={{ gap: 8 }}>
                 <b>{m.group_name}</b>
-                <span className="badge" style={{ color: "var(--accent-2)" }}>идёт</span>
+                <span className="badge badge-live">идёт</span>
               </div>
               <div className="muted small">
                 {formatTime(m.started_at)} · {m.player_count}{" "}

frontend/src/components/MatchList.tsx

@@ -26,7 +26,7 @@ export function MatchListView({ items }: { items: MatchListItem[] }) {
             <div className="row-between">
               <span className="muted small">{formatDate(m.played_at)}</span>
               {inProgress ? (
-                <span className="badge" style={{ color: "var(--accent-2)" }}>идёт</span>
+                <span className="badge badge-live">идёт</span>
               ) : (
                 <span className="muted small">
                   {formatDuration(m.duration_minutes)} · {winReasonLabel(m.win_reason)}
@@ -47,6 +47,7 @@ export function MatchListView({ items }: { items: MatchListItem[] }) {
                   </span>
                   <span>{p.nickname}</span>
                   <span className="muted small">· {p.faction_name}</span>
+                  {p.was_random && <span className="badge">🎲</span>}
                 </PlayerLink>
               ))}
             </div>