feat(sasch40): polish retro game layout, clean tavern scene, and improve mobile HUD

- Hide GameBoy D-Pad and action buttons during RPG and dialogue modes
- Add prequel intro landing screen for QR code arrivals with Haumdaucher lore
- Clean baked-in text from tavern scene background and streamline navigation bar
- Add safe-zone margins and HTML HUD in platformer and party express acts
- Optimize Certificate modal layout and scoring breakdown for mobile screens
- Add automated end-to-end browser playtest script with Puppeteer
- Accelerate Docker build via native pre-compilation

projects/sasch40/frontend/src/components/TavernView.vue

@@ -120,6 +120,20 @@ function openCharacterDialog(charId: string) {
         activeDialog.value = null
       }
     }
+  } else if (charId === 'nat') {
+    activeDialog.value = {
+      characterId: charId,
+      name: char.name,
+      title: char.title,
+      portrait: char.portrait,
+      text: 'Servus Sascha! Schau dir meinen Wildschwein-Harnisch an – der glänzt wie ein Kronjuwel! Ich hab dir schon 3 kühle Helle und 5 Kronkorken gesichert, bevor die Meute alles wegsäuft!',
+      actionLabel: 'Sauber Josef! (+5 Kronkorken & Helles)',
+      actionFn: () => {
+        store.addKronkorken(5)
+        store.addBeer()
+        activeDialog.value = null
+      }
+    }
   }
 }
 
@@ -162,7 +176,7 @@ function proceedToExpress() {
 
       <!-- Interactive Hotspots on the visual scene with Avatar Thumbnails -->
       <button class="hotspot hotspot-verena" @click="openCharacterDialog('verena')">
-        <img :src="CHARACTERS.verena.portrait" class="hotspot-thumb" alt="Verena" />
+        <img :src="CHARACTERS.verena.portrait" class="hotspot-thumb" alt="Königin Verena" />
         <span class="hotspot-badge">Verena 👑</span>
       </button>
 
@@ -196,6 +210,11 @@ function proceedToExpress() {
         <span class="hotspot-badge">Mane 🥾</span>
       </button>
 
+      <button class="hotspot hotspot-nat" @click="openCharacterDialog('nat')">
+        <img :src="CHARACTERS.nat.portrait" class="hotspot-thumb" alt="NAT" />
+        <span class="hotspot-badge">NAT 🐗</span>
+      </button>
+
       <button class="hotspot hotspot-mario" @click="openCharacterDialog('mario')">
         <img :src="CHARACTERS.mario.portrait" class="hotspot-thumb" alt="Mario" />
         <span class="hotspot-badge">Mario 🤹</span>
@@ -203,13 +222,16 @@ function proceedToExpress() {
 
       <!-- Bottom Scene Navigation & Duel -->
       <div class="scene-bottom-nav">
-        <button class="duel-trigger" @click="startGstanzlDuel">
-          ⚔️ Gstanzl-Fechten
-        </button>
+        <div class="tavern-bar-title">🍻 TAVERNE ZUM WUMMERNDEN RITTER 🍻</div>
+        <div class="tavern-nav-buttons">
+          <button class="duel-trigger" @click="startGstanzlDuel">
+            ⚔️ Gstanzl-Fechten
+          </button>
 
-        <button class="next-level-btn" @click="proceedToExpress">
-          ➡️ Zum Fest-Konvoi!
-        </button>
+          <button class="next-level-btn" @click="proceedToExpress">
+            ➡️ Zum Fest-Konvoi!
+          </button>
+        </div>
       </div>
     </div>
 
@@ -353,14 +375,15 @@ function proceedToExpress() {
   white-space: nowrap;
 }
 
-.hotspot-verena { top: 72%; left: 54%; }
+.hotspot-verena { top: 15%; left: 80%; }
 .hotspot-armend { top: 62%; left: 24%; }
-.hotspot-lutz { top: 38%; left: 22%; }
-.hotspot-mirror { top: 30%; left: 63%; }
-.hotspot-amy { top: 52%; left: 84%; }
-.hotspot-pue { top: 16%; left: 35%; }
-.hotspot-mane { top: 44%; left: 68%; }
-.hotspot-mario { top: 74%; left: 86%; }
+.hotspot-lutz { top: 38%; left: 20%; }
+.hotspot-mirror { top: 32%; left: 63%; }
+.hotspot-amy { top: 52%; left: 82%; }
+.hotspot-pue { top: 20%; left: 35%; }
+.hotspot-mane { top: 45%; left: 66%; }
+.hotspot-nat { top: 63%; left: 85%; }
+.hotspot-mario { top: 36%; left: 90%; }
 
 .pulse {
   animation: pulseAnim 1.5s infinite;
@@ -373,13 +396,37 @@ function proceedToExpress() {
 
 .scene-bottom-nav {
   position: absolute;
-  bottom: 8px;
-  left: 8px;
-  right: 8px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 84px;
+  background: linear-gradient(180deg, #451a03 0%, #26140b 100%);
+  border-top: 3px solid #b45309;
+  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.95);
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 12px;
+  z-index: 15;
+}
+
+.tavern-bar-title {
+  font-family: 'Press Start 2P', monospace;
+  font-size: 7px;
+  color: #fef08a;
+  text-shadow: 1px 1px 0 #000;
+  letter-spacing: 0.5px;
+  text-align: center;
+}
+
+.tavern-nav-buttons {
+  display: flex;
+  width: 100%;
+  align-items: center;
   justify-content: space-between;
   gap: 8px;
-  z-index: 15;
 }
 
 .duel-trigger {