Map-Bilder und Seitenwahl mit Emblemen

Map-Bilder aus ghostcap-gaming/cs2-map-images lokal als WebP gespeichert
(npm run images lädt und verkleinert sie). Bilder in Veto-Kacheln,
Pool-Vorschau, Serie und Seitenwahl; CT/T-Embleme aus client/public/sides
mit Ersatzsymbol, falls die Dateien fehlen.

client/src/components/VetoBoard.jsx

@@ -1,5 +1,7 @@
 import { useEffect, useState } from 'react';
 import { clock } from '../lib/labels.js';
+import MapImage from './MapImage.jsx';
+import SideIcon from './SideIcon.jsx';
 
 const STEP_SHORT = { ban: 'Ban', pick: 'Pick', side: 'Seite', decider: 'Decider' };
 
@@ -57,7 +59,7 @@ export default function VetoBoard({ state, viewer, act, busy, compact = false })
               aria-pressed={isSel}
               aria-label={`${meta.name}: ${statusText(m, teams)}`}
             >
-              <span className="map-art" aria-hidden="true" />
+              <MapImage map={meta} />
               <span className="map-name">{meta.name}</span>
               <span className="map-status">{statusText(m, teams)}</span>
             </button>
@@ -77,10 +79,21 @@ export default function VetoBoard({ state, viewer, act, busy, compact = false })
 
       {yourTurn && current.type === 'side' && (
         <div className="side-choice">
-          <p>Auf welcher Seite startet {teams[viewer.team].name} auf {sideMap?.name}?</p>
-          <div className="row">
-            <button className="btn btn-ct btn-lg" disabled={!!busy} onClick={() => submitSide('CT')}>Counter-Terrorists</button>
-            <button className="btn btn-t btn-lg" disabled={!!busy} onClick={() => submitSide('T')}>Terrorists</button>
+          <MapImage map={sideMap} className="side-choice-art" />
+          <div className="side-choice-body">
+            <p>Auf welcher Seite startet <strong>{teams[viewer.team].name}</strong> auf <strong>{sideMap?.name}</strong>?</p>
+            <div className="side-options">
+              <button className="side-option side-option-ct" disabled={!!busy} onClick={() => submitSide('CT')}>
+                <SideIcon side="CT" size={44} />
+                <span className="side-option-name">Counter-Terrorists</span>
+                <span className="side-option-sub">Start auf CT, Gegner beginnt als T</span>
+              </button>
+              <button className="side-option side-option-t" disabled={!!busy} onClick={() => submitSide('T')}>
+                <SideIcon side="T" size={44} />
+                <span className="side-option-name">Terrorists</span>
+                <span className="side-option-sub">Start auf T, Gegner beginnt als CT</span>
+              </button>
+            </div>
           </div>
         </div>
       )}