feat(web): readable header (duration 6m 37s, faded id by GAME) + skyquake font for vehicle country glyphs

frontend/src/App.jsx

@@ -122,7 +122,8 @@ function formatDuration(seconds) {
   if (!total) return ''
   const m = Math.floor(total / 60)
   const s = total % 60
-  return `${m}:${String(s).padStart(2, '0')}`
+  if (!m) return `${s}s`
+  return `${m}m ${s}s`
 }
 
 function gameParticipants(game) {
@@ -2842,7 +2843,10 @@ function GamePage({ gameId, navigate }) {
       </button>
 
       <div className="rounded-lg border border-border bg-fury-white p-6 shadow-sm">
+        <div className="flex flex-wrap items-baseline gap-x-3">
           <p className="text-sm font-semibold uppercase tracking-wide text-fury-cyan">Game</p>
+          <span className="break-all text-xs text-text-muted opacity-70">{game?.session_id || gameId}</span>
+        </div>
         <div className="mt-1 flex flex-wrap items-center gap-3">
           <h1 className="text-4xl font-bold">{game?.map_name || 'Battle log'}</h1>
           {game?.draw ? (
@@ -2852,10 +2856,9 @@ function GamePage({ gameId, navigate }) {
           ) : null}
         </div>
         {subtitle ? <p className="mt-1 text-sm font-medium text-fury-violet">{subtitle}</p> : null}
-        <p className="mt-2 break-all text-sm text-text-soft">
+        <p className="mt-2 text-sm text-text-soft">
           {game ? formatDate(game.timestamp) : ''}
           {duration ? ` · ${duration}` : ''}
-          {game ? ` · ${game.session_id}` : gameId}
         </p>
         <div className="mt-3">
           <ParticipantNames participants={participantNames} />
@@ -2922,7 +2925,7 @@ function GamePage({ gameId, navigate }) {
                             {(player.vehicles || []).length ? (
                               player.vehicles.map((vehicle) => (
                                 <span
-                                  className="inline-flex items-center gap-1 text-xs text-text-soft"
+                                  className="vehicle-name inline-flex items-center gap-1 text-xs text-text-soft"
                                   key={vehicle.cdk}
                                 >
                                   <img

frontend/src/styles.css

@@ -119,6 +119,20 @@
   box-sizing: border-box;
 }
 
+@font-face {
+  font-family: "skyquakesymbols";
+  src: url("/fonts/symbols_skyquake.ttf") format("truetype");
+  font-display: swap;
+}
+
+/* War Thunder vehicle names carry country/event glyphs (▀ ▄ ◊ + PUA markers)
+   that only the skyquake symbol font renders; list it first, then fall back. */
+.vehicle-name {
+  font-family:
+    "skyquakesymbols", "SF Pro Rounded", "SF Pro Text", -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Inter, ui-sans-serif, system-ui, sans-serif;
+}
+
 body {
   margin: 0;
   min-width: 320px;