Add mobile responsive styles, new scenarios, and visual improvements

- Mobile responsive CSS: proper layout for small screens and landscape
- Two new scenarios: Convoy (escort tanker) and Duel (frigate combat)
- Improved minimap viewport indicator with filled highlight
- Gravity deflection arrows on course preview paths

Author: rgilks

src/client/renderer.ts

@@ -724,6 +724,31 @@ export class Renderer {
           ctx.stroke();
           ctx.setLineDash([]);
 
+          // Show gravity deflection indicators along the path
+          for (const grav of course.gravityEffects) {
+            if (grav.strength === 'weak') continue; // weak has its own toggle UI
+            const gp = hexToPixel(grav.hex, HEX_SIZE);
+            const dp = hexToPixel(hexAdd(grav.hex, HEX_DIRECTIONS[grav.direction]), HEX_SIZE);
+            const angle = Math.atan2(dp.y - gp.y, dp.x - gp.x);
+            const arrowLen = 7;
+            const ax = gp.x + Math.cos(angle) * arrowLen;
+            const ay = gp.y + Math.sin(angle) * arrowLen;
+            ctx.strokeStyle = 'rgba(255, 200, 50, 0.6)';
+            ctx.lineWidth = 1.5;
+            ctx.beginPath();
+            ctx.moveTo(gp.x, gp.y);
+            ctx.lineTo(ax, ay);
+            ctx.stroke();
+            // Arrowhead
+            const headLen = 4;
+            ctx.beginPath();
+            ctx.moveTo(ax, ay);
+            ctx.lineTo(ax - headLen * Math.cos(angle - 0.5), ay - headLen * Math.sin(angle - 0.5));
+            ctx.moveTo(ax, ay);
+            ctx.lineTo(ax - headLen * Math.cos(angle + 0.5), ay - headLen * Math.sin(angle + 0.5));
+            ctx.stroke();
+          }
+
           // Ghost ship at destination
           if (!course.crashed) {
             this.drawShipIcon(ctx, to.x, to.y, ship.owner, 0.4, 0);
@@ -1534,14 +1559,21 @@ export class Renderer {
     const vpW = vpBR.x - vpTL.x;
     const vpH = vpBR.y - vpTL.y;
 
-    ctx.strokeStyle = 'rgba(255, 255, 255, 0.4)';
-    ctx.lineWidth = 1;
-    ctx.strokeRect(
-      Math.max(mmX, vpTL.x),
-      Math.max(mmY, vpTL.y),
-      Math.min(vpW, mmW),
-      Math.min(vpH, mmH),
-    );
+    // Clip viewport rect to minimap bounds
+    const clampedX = Math.max(mmX + 1, vpTL.x);
+    const clampedY = Math.max(mmY + 1, vpTL.y);
+    const clampedR = Math.min(mmX + mmW - 1, vpTL.x + vpW);
+    const clampedB = Math.min(mmY + mmH - 1, vpTL.y + vpH);
+    const clampedW = clampedR - clampedX;
+    const clampedH = clampedB - clampedY;
+
+    if (clampedW > 2 && clampedH > 2) {
+      ctx.fillStyle = 'rgba(79, 195, 247, 0.06)';
+      ctx.fillRect(clampedX, clampedY, clampedW, clampedH);
+      ctx.strokeStyle = 'rgba(79, 195, 247, 0.5)';
+      ctx.lineWidth = 1;
+      ctx.strokeRect(clampedX, clampedY, clampedW, clampedH);
+    }
 
     ctx.restore();
   }

src/shared/map-data.ts

@@ -317,6 +317,54 @@ export const SCENARIOS: Record<string, ScenarioDefinition> = {
       },
     ],
   },
+  convoy: {
+    name: 'Convoy',
+    description: 'Escort a tanker from Mars to Venus — pirates intercept',
+    players: [
+      {
+        // Convoy: tanker + corvette escort, starting from Mars
+        ships: [
+          { type: 'tanker', position: { q: 10, r: 8 }, velocity: { dq: 0, dr: 0 } },
+          { type: 'corvette', position: { q: 10, r: 8 }, velocity: { dq: 0, dr: 0 } },
+        ],
+        targetBody: 'Venus',
+        homeBody: 'Mars',
+        escapeWins: false,
+      },
+      {
+        // Pirates: 2 corsairs lurking in the asteroid belt
+        ships: [
+          { type: 'corsair', position: { q: 3, r: 3 }, velocity: { dq: 0, dr: 0 }, startLanded: false },
+          { type: 'corsair', position: { q: -2, r: 5 }, velocity: { dq: 0, dr: 0 }, startLanded: false },
+        ],
+        targetBody: '',
+        homeBody: '',
+        escapeWins: false,
+      },
+    ],
+  },
+  duel: {
+    name: 'Duel',
+    description: 'Frigates clash near Mercury — last ship standing wins',
+    players: [
+      {
+        ships: [
+          { type: 'frigate', position: { q: 5, r: -3 }, velocity: { dq: 0, dr: 0 }, startLanded: false },
+        ],
+        targetBody: '',
+        homeBody: 'Mercury',
+        escapeWins: false,
+      },
+      {
+        ships: [
+          { type: 'frigate', position: { q: 9, r: -1 }, velocity: { dq: 0, dr: 0 }, startLanded: false },
+        ],
+        targetBody: '',
+        homeBody: 'Mercury',
+        escapeWins: false,
+      },
+    ],
+  },
 };
 
 // Singleton map instance

static/index.html

@@ -43,6 +43,14 @@ <h2 class="scenario-title">Select Scenario</h2>
         <div class="scenario-name">Escape</div>
         <div class="scenario-desc">3 pilgrim transports flee — enforcers must stop them</div>
       </button>
+      <button class="btn btn-scenario" data-scenario="convoy">
+        <div class="scenario-name">Convoy</div>
+        <div class="scenario-desc">Escort a tanker from Mars to Venus — pirates intercept</div>
+      </button>
+      <button class="btn btn-scenario" data-scenario="duel">
+        <div class="scenario-name">Duel</div>
+        <div class="scenario-desc">Frigates clash near Mercury — last ship standing wins</div>
+      </button>
       <button id="backBtn" class="btn btn-secondary" style="margin-top: 1rem">Back</button>
     </div>
   </div>

static/style.css

@@ -615,3 +615,120 @@ body {
   width: 100%;
   margin-bottom: 0.5rem;
 }
+
+/* Mobile responsive */
+@media (max-width: 600px) {
+  .title {
+    font-size: 2rem;
+    letter-spacing: 0.2em;
+  }
+
+  .subtitle {
+    font-size: 0.75rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .menu-content {
+    padding: 1.2rem;
+    max-width: 300px;
+  }
+
+  .hud-bar {
+    flex-wrap: wrap;
+    gap: 0.2rem;
+    padding: 0.4rem 0.5rem;
+    font-size: 0.7rem;
+  }
+
+  .hud-bottom {
+    flex-wrap: wrap;
+    gap: 0.4rem;
+    padding: 0.5rem;
+  }
+
+  .status-msg {
+    font-size: 0.7rem;
+    width: 100%;
+  }
+
+  .btn-confirm, .btn-attack {
+    padding: 0.5rem 1.5rem;
+    font-size: 0.85rem;
+  }
+
+  .btn-ordnance {
+    padding: 0.5rem 1rem;
+    font-size: 0.75rem;
+  }
+
+  .ship-list {
+    top: auto;
+    bottom: 5rem;
+    left: 0.3rem;
+    max-height: 30vh;
+    overflow-y: auto;
+  }
+
+  .ship-entry {
+    font-size: 0.6rem;
+    min-width: 100px;
+    padding: 0.25rem 0.4rem;
+  }
+
+  .game-log {
+    top: auto;
+    bottom: 5rem;
+    right: 0.3rem;
+    width: 160px;
+    max-height: 30vh;
+  }
+
+  .log-entries {
+    font-size: 0.55rem;
+  }
+
+  .game-code {
+    font-size: 1.8rem;
+    letter-spacing: 0.3em;
+  }
+
+  .objective-text {
+    font-size: 0.6rem;
+  }
+
+  .latency-text {
+    font-size: 0.55rem;
+  }
+
+  .help-content {
+    max-width: 280px;
+    font-size: 0.85rem;
+  }
+
+  .help-key {
+    min-width: 90px;
+  }
+
+  #gameOver h2 {
+    font-size: 1.5rem;
+  }
+}
+
+@media (max-height: 500px) {
+  /* Landscape mobile */
+  .ship-list {
+    top: 2.5rem;
+    bottom: auto;
+    max-height: 50vh;
+  }
+
+  .game-log {
+    top: 2.5rem;
+    bottom: auto;
+    max-height: 50vh;
+  }
+
+  .hud-bottom {
+    padding: 0.3rem;
+  }
+}