feat(duel): allow swapping main view to opponent's board

- Add a toggle on the picture-in-picture window to swap the big board
  with the mini view of the opponent's field
- Color-coded frame and badge identify whose board is currently shown
  (blue = player 1, orange = player 2)
- Block building and rushing while spectating the opponent's board;
  the PiP then shows your own field instead
- Clarify duel-mode descriptions in lobby and start screen, add hints
  in the multiplayer bar
- Replace previous announcement banners so only one shows at a time

src/App.vue

@@ -10,7 +10,28 @@ import PiPCanvas from '@/components/PiPCanvas.vue'
 import StartScreen from '@/components/StartScreen.vue'
 import TowerPanel from '@/components/TowerPanel.vue'
 import TowerShop from '@/components/TowerShop.vue'
+import { playerColor } from '@/game/config'
 import { store } from '@/game/store'
+import { computed } from 'vue'
+
+/** duel: colored frame + label around the main canvas showing whose board it is */
+const frameStyle = computed(() => {
+  if (!store.mp.active || store.mp.mode !== 'duel') return undefined
+  const viewedOwner = store.mp.viewOpponent ? 1 - store.mp.myId : store.mp.myId
+  return { boxShadow: `0 0 0 4px ${playerColor(viewedOwner)}` }
+})
+
+const badgeText = computed(() => {
+  if (!store.mp.active || store.mp.mode !== 'duel') return ''
+  return store.mp.viewOpponent
+    ? `👁 ${store.mp.peerName} – Ansicht (zum Bauen zurückwechseln)`
+    : '🛡 Deine Basis'
+})
+
+const badgeColor = computed(() => {
+  const viewedOwner = store.mp.viewOpponent ? 1 - store.mp.myId : store.mp.myId
+  return playerColor(viewedOwner)
+})
 </script>
 
 <template>
@@ -21,8 +42,15 @@ import { store } from '@/game/store'
       <Hud />
       <MPBar />
       <div class="canvas-wrap">
-        <div class="canvas-box">
+        <div class="canvas-box" :style="frameStyle">
           <GameCanvas />
+          <div
+            v-if="badgeText"
+            class="board-badge"
+            :style="{ background: badgeColor }"
+          >
+            {{ badgeText }}
+          </div>
           <TowerPanel />
           <ObstaclePanel />
           <PiPCanvas />
@@ -56,5 +84,21 @@ import { store } from '@/game/store'
 }
 .canvas-box {
   position: relative;
+  border-radius: 10px;
+}
+.board-badge {
+  position: absolute;
+  bottom: 8px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 4;
+  color: #10151c;
+  font-size: 11.5px;
+  font-weight: 800;
+  padding: 3px 12px;
+  border-radius: 20px;
+  pointer-events: none;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+  white-space: nowrap;
 }
 </style>