feat(sasch40): authentic 3 sisters portraits, 9:16 responsive stage with medieval ornaments, and hotspot fixes

- Recreate 16-bit LucasArts portraits for Saskia, Maja, and Miriam matching real-life source photos
- Add 3 sisters showcase in Act II intro modal and golden portrait badges on goal platforms
- Fix Act III background scaling: lock scene to 9:16 aspect ratio with medieval ornamental side borders and corner brackets
- Ensure 100% full background visibility with zero cropping and lock hotspot buttons to image features across all screen sizes
- Fix cache issue by referencing schankraum_v5.jpg with cache buster query
- Re-position NAT button to feet (top: 70%) and Mario button to knees (top: 79%) to eliminate face occlusion

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

@@ -542,36 +542,101 @@ function drawPlayer(ctx: CanvasRenderingContext2D) {
   ctx.restore()
 }
 
+const sisterImages: Record<number, HTMLImageElement> = {}
+
+function preloadSisterImages() {
+  const sources: Record<number, string> = {
+    1: CHARACTERS.saskia.portrait,
+    2: CHARACTERS.maja.portrait,
+    3: CHARACTERS.miriam.portrait
+  }
+  for (const [lvl, src] of Object.entries(sources)) {
+    const img = new Image()
+    img.src = src
+    sisterImages[Number(lvl)] = img
+  }
+}
+
 function drawSisterSprite(ctx: CanvasRenderingContext2D, x: number, y: number, level: number) {
-  // Dirndl color per sister
+  const img = sisterImages[level]
-  const dirndlColor = level === 1 ? '#f43f5e' : level === 2 ? '#8b5cf6' : '#06b6d4'
+  const wave = Math.sin(Date.now() / 160) * 3
-  const hairColor = level === 1 ? '#fde047' : level === 2 ? '#78350f' : '#b45309'
 
-  // Body
+  if (img && img.complete && img.naturalWidth > 0) {
-  ctx.fillStyle = dirndlColor
+    const size = 32
-  ctx.fillRect(x + 2, y + 14, 18, 18)
+    const drawX = x - 4
-  // White apron
+    const drawY = y - 4 + wave
-  ctx.fillStyle = '#ffffff'
-  ctx.fillRect(x + 6, y + 18, 10, 14)
 
-  // Head
+    ctx.save()
-  ctx.fillStyle = '#fbcfe8'
+    // Golden border
-  ctx.fillRect(x + 4, y + 4, 14, 12)
+    ctx.beginPath()
+    ctx.arc(drawX + size / 2, drawY + size / 2, size / 2 + 2, 0, Math.PI * 2)
+    ctx.fillStyle = '#ffd700'
+    ctx.fill()
+    ctx.lineWidth = 2
+    ctx.strokeStyle = '#b45309'
+    ctx.stroke()
 
-  // Hair
+    // Circular portrait
-  ctx.fillStyle = hairColor
+    ctx.beginPath()
-  ctx.fillRect(x + 2, y, 18, 6)
+    ctx.arc(drawX + size / 2, drawY + size / 2, size / 2, 0, Math.PI * 2)
-  ctx.fillRect(x + 1, y + 5, 4, 14) // Left braid
+    ctx.clip()
-  ctx.fillRect(x + 17, y + 5, 4, 14) // Right braid
+    ctx.drawImage(img, drawX, drawY, size, size)
+    ctx.restore()
 
-  // Tiara / flowers
+    // Little waving hand
-  ctx.fillStyle = '#ffd700'
+    ctx.fillStyle = '#ffd700'
-  ctx.fillRect(x + 5, y - 2, 12, 3)
+    ctx.font = '10px monospace'
+    ctx.fillText('👋', drawX + size - 2, drawY + 8 + wave)
+  } else {
+    // Custom pixel-art styling per sister matching real photos
+    const dirndlColor = level === 1 ? '#f43f5e' : level === 2 ? '#8b5cf6' : '#06b6d4'
+    const hairColor = level === 1 ? '#3d2314' : level === 2 ? '#6b4226' : '#18181b'
 
-  // Waving arm
+    // Body
-  const wave = Math.sin(Date.now() / 150) * 4
+    ctx.fillStyle = dirndlColor
-  ctx.fillStyle = '#fbcfe8'
+    ctx.fillRect(x + 2, y + 14, 18, 18)
-  ctx.fillRect(x - 3, y + 6 + wave, 5, 5)
+    // White apron
+    ctx.fillStyle = '#ffffff'
+    ctx.fillRect(x + 6, y + 18, 10, 14)
+
+    // Head
+    ctx.fillStyle = '#fce7f3'
+    ctx.fillRect(x + 4, y + 4, 14, 12)
+
+    // Hair
+    ctx.fillStyle = hairColor
+    if (level === 1) {
+      // Saskia: elegant bun updo with side strands
+      ctx.fillRect(x + 2, y, 18, 6)
+      ctx.fillRect(x + 5, y - 5, 12, 6)
+      ctx.fillRect(x + 1, y + 5, 2, 6)
+      ctx.fillRect(x + 19, y + 5, 2, 6)
+    } else if (level === 2) {
+      // Maja: short pixie cut with side bangs
+      ctx.fillRect(x + 2, y, 18, 6)
+      ctx.fillRect(x + 1, y + 3, 5, 8)
+      // Gold hoop earring
+      ctx.fillStyle = '#ffd700'
+      ctx.fillRect(x + 1, y + 9, 2, 2)
+      ctx.fillStyle = hairColor
+    } else {
+      // Miriam: long flowing dark hair with sunglasses on head
+      ctx.fillRect(x + 2, y, 18, 6)
+      ctx.fillRect(x + 1, y + 4, 4, 16)
+      ctx.fillRect(x + 17, y + 4, 4, 16)
+      // Sunglasses
+      ctx.fillStyle = '#0f172a'
+      ctx.fillRect(x + 5, y - 3, 12, 3)
+    }
+
+    // Tiara
+    ctx.fillStyle = '#ffd700'
+    ctx.fillRect(x + 6, y - 2, 10, 3)
+
+    // Waving arm
+    ctx.fillStyle = '#fce7f3'
+    ctx.fillRect(x - 3, y + 6 + wave, 5, 5)
+  }
 }
 
 function drawHUD(ctx: CanvasRenderingContext2D) {
@@ -604,6 +669,7 @@ function gameLoop() {
 }
 
 onMounted(() => {
+  preloadSisterImages()
   window.addEventListener('keydown', handleKeyDown)
   window.addEventListener('keyup', handleKeyUp)
   ;(window as any).__platformer = {
@@ -652,6 +718,28 @@ onUnmounted(() => {
           Gierige Kronkorken-Kobolde haben Saschas drei Schwestern <strong>Saskia</strong>, <strong>Maja</strong> und <strong>Miriam</strong> auf luftige Himmelszinnen entführt!
         </p>
 
+        <!-- 3 Sisters Preview Showcase -->
+        <div class="sisters-showcase">
+          <div class="sister-mini-card">
+            <div class="sister-mini-portrait">
+              <img :src="CHARACTERS.saskia.portrait" alt="Saskia" />
+            </div>
+            <span class="sister-mini-label">1. Saskia 👑</span>
+          </div>
+          <div class="sister-mini-card">
+            <div class="sister-mini-portrait">
+              <img :src="CHARACTERS.maja.portrait" alt="Maja" />
+            </div>
+            <span class="sister-mini-label">2. Maja 🌸</span>
+          </div>
+          <div class="sister-mini-card">
+            <div class="sister-mini-portrait">
+              <img :src="CHARACTERS.miriam.portrait" alt="Miriam" />
+            </div>
+            <span class="sister-mini-label">3. Miriam ✨</span>
+          </div>
+        </div>
+
         <div class="mission-callout">
           <span class="callout-icon">☁️</span>
           <div class="callout-text">
@@ -962,6 +1050,46 @@ onUnmounted(() => {
   font-size: 6.5px;
 }
 
+/* Sisters Showcase in Act II Intro */
+.sisters-showcase {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin: 10px 0 12px 0;
+  width: 100%;
+}
+
+.sister-mini-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.sister-mini-portrait {
+  width: 52px;
+  height: 52px;
+  border-radius: 8px;
+  border: 2px solid #ffd700;
+  box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
+  overflow: hidden;
+  background: #1e1b4b;
+}
+
+.sister-mini-portrait img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  image-rendering: crisp-edges;
+}
+
+.sister-mini-label {
+  font-family: 'Press Start 2P', monospace;
+  font-size: 5.5px;
+  color: #ffd700;
+  text-align: center;
+}
+
 /* Animations */
 .fade-enter-active, .fade-leave-active {
   transition: opacity 0.3s;

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

@@ -580,10 +580,36 @@ function proceedToExpress() {
 <template>
   <div class="tavern-container">
     <div class="scene-viewport">
+      <!-- Left Medieval Ornament Border -->
+      <div class="medieval-side-border border-left" aria-hidden="true">
+        <div class="ornament-column">
+          <span class="ornament-symbol">⚜️</span>
+          <span class="ornament-divider">✦</span>
+          <span class="ornament-symbol">👑</span>
+          <span class="ornament-divider">✦</span>
+          <span class="ornament-symbol">🍻</span>
+          <span class="ornament-divider">✦</span>
+          <span class="ornament-symbol">⚔️</span>
+          <span class="ornament-divider">✦</span>
+          <span class="ornament-symbol">🛡️</span>
+          <span class="ornament-divider">✦</span>
+          <span class="ornament-symbol">🌿</span>
+          <span class="ornament-divider">✦</span>
+          <span class="ornament-symbol">⚜️</span>
+        </div>
+      </div>
 
-      <!-- ================= 1. GASTSTUBE (SCHANKRAUM) ================= -->
+      <!-- The 9:16 Scene Stage: whole image is 100% visible, zero cropping, hotspots locked to image -->
-      <template v-if="currentRoom === 'schankraum'">
+      <div class="scene-stage">
-        <img src="/assets/scenes/schankraum.jpg" alt="Gaststube Zum wummernden Ritter" class="tavern-bg" />
+        <!-- 4 Golden Corner Ornaments -->
+        <div class="corner-ornament corner-tl"></div>
+        <div class="corner-ornament corner-tr"></div>
+        <div class="corner-ornament corner-bl"></div>
+        <div class="corner-ornament corner-br"></div>
+
+        <!-- ================= 1. GASTSTUBE (SCHANKRAUM) ================= -->
+        <template v-if="currentRoom === 'schankraum'">
+        <img src="/assets/scenes/schankraum_v5.jpg?v=5" alt="Gaststube Zum wummernden Ritter" class="tavern-bg" />
 
         <!-- Verena on the wooden gallery -->
         <button class="hotspot hotspot-verena" @click="openCharacterDialog('verena')">
@@ -767,9 +793,30 @@ function proceedToExpress() {
           <span class="hotspot-badge glow-door">◀ Zurück in den Schankraum</span>
         </button>
       </template>
+      </div><!-- /.scene-stage -->
 
-      <!-- Bottom Scene Navigation & Duel -->
+      <!-- Right Medieval Ornament Border -->
-      <div class="scene-bottom-nav">
+      <div class="medieval-side-border border-right" aria-hidden="true">
+        <div class="ornament-column">
+          <span class="ornament-symbol">⚜️</span>
+          <span class="ornament-divider">✦</span>
+          <span class="ornament-symbol">👑</span>
+          <span class="ornament-divider">✦</span>
+          <span class="ornament-symbol">🍻</span>
+          <span class="ornament-divider">✦</span>
+          <span class="ornament-symbol">⚔️</span>
+          <span class="ornament-divider">✦</span>
+          <span class="ornament-symbol">🛡️</span>
+          <span class="ornament-divider">✦</span>
+          <span class="ornament-symbol">🌿</span>
+          <span class="ornament-divider">✦</span>
+          <span class="ornament-symbol">⚜️</span>
+        </div>
+      </div>
+    </div><!-- /.scene-viewport -->
+
+    <!-- Bottom Scene Navigation & Duel -->
+    <div class="scene-bottom-nav">
         <!-- Room Title Badge -->
         <div class="tavern-bar-title">
           {{
@@ -840,7 +887,6 @@ function proceedToExpress() {
           </button>
         </div>
       </div>
-    </div>
 
     <!-- Monkey Island Dialog Modal -->
     <div v-if="activeDialog" class="dialog-overlay" @click="activeDialog = null">
@@ -1192,27 +1238,110 @@ function proceedToExpress() {
 
 <style scoped>
 .tavern-container {
+  display: flex;
+  flex-direction: column;
   position: relative;
   width: 100%;
   height: 100%;
-  background: #1a0f0a;
+  background: #100603;
   overflow: hidden;
 }
 
 .scene-viewport {
-  position: relative;
+  flex: 1;
+  min-height: 0;
   width: 100%;
-  height: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  background-color: #120703;
+  background-image: 
+    radial-gradient(circle at 50% 50%, rgba(69, 26, 3, 0.45) 0%, rgba(10, 4, 1, 0.95) 100%),
+    repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.05) 0, rgba(212, 175, 55, 0.05) 1px, transparent 0, transparent 20px),
+    repeating-linear-gradient(-45deg, rgba(212, 175, 55, 0.05) 0, rgba(212, 175, 55, 0.05) 1px, transparent 0, transparent 20px);
+}
+
+.scene-stage {
+  position: relative;
+  max-width: 100%;
+  max-height: 100%;
+  aspect-ratio: 9 / 16;
+  height: min(100%, calc(100vw * 16 / 9));
+  width: auto;
+  box-shadow: 
+    0 0 0 2px #78350f,
+    0 0 0 4px #b45309,
+    0 0 20px rgba(0, 0, 0, 0.95),
+    0 0 16px rgba(245, 158, 11, 0.3);
+  border: 2px solid #b45309;
+  border-radius: 4px;
+  overflow: hidden;
+  flex-shrink: 0;
 }
 
 .tavern-bg {
   width: 100%;
   height: 100%;
-  object-fit: cover;
+  display: block;
+  object-fit: fill;
   image-rendering: pixelated;
   image-rendering: crisp-edges;
 }
 
+/* Corner Ornaments on Scene Stage */
+.corner-ornament {
+  position: absolute;
+  width: 14px;
+  height: 14px;
+  z-index: 14;
+  pointer-events: none;
+}
+.corner-tl { top: 3px; left: 3px; border-top: 2px solid #ffd700; border-left: 2px solid #ffd700; }
+.corner-tr { top: 3px; right: 3px; border-top: 2px solid #ffd700; border-right: 2px solid #ffd700; }
+.corner-bl { bottom: 3px; left: 3px; border-bottom: 2px solid #ffd700; border-left: 2px solid #ffd700; }
+.corner-br { bottom: 3px; right: 3px; border-bottom: 2px solid #ffd700; border-right: 2px solid #ffd700; }
+
+/* Side Medieval Ornament Borders */
+.medieval-side-border {
+  flex: 1;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 0;
+  overflow: hidden;
+  opacity: 0.85;
+  pointer-events: none;
+  user-select: none;
+}
+
+.ornament-column {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 8px;
+}
+
+.ornament-symbol {
+  font-size: 16px;
+  filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.35));
+}
+
+.ornament-divider {
+  font-size: 9px;
+  color: #b45309;
+  text-shadow: 0 0 4px rgba(245, 158, 11, 0.5);
+}
+
+@media (max-width: 480px) {
+  .medieval-side-border {
+    display: none;
+  }
+}
+
 /* Hotspots with Avatar Thumbnails */
 .hotspot {
   position: absolute;
@@ -1327,8 +1456,8 @@ function proceedToExpress() {
 /* 3. Marktplatz Hotspots */
 .mario-container {
   position: absolute;
-  top: 66%;
+  top: 79%;
-  left: 70%;
+  left: 76%;
   z-index: 10;
 }
 
@@ -1382,8 +1511,8 @@ function proceedToExpress() {
   100% { opacity: 1; transform: scale(1.3); }
 }
 
-.hotspot-nat { top: 54%; left: 22%; }
+.hotspot-nat { top: 70%; left: 22%; }
-.hotspot-door-back-gaststube { top: 74%; left: 20%; }
+.hotspot-door-back-gaststube { top: 82%; left: 16%; }
 .hotspot-door-hinterland { top: 34%; left: 76%; }
 
 /* 4. Hinterland Hotspots */
@@ -1443,10 +1572,9 @@ function proceedToExpress() {
 
 /* Bottom Navigation */
 .scene-bottom-nav {
-  position: absolute;
+  position: relative;
-  bottom: 0;
+  flex-shrink: 0;
-  left: 0;
+  width: 100%;
-  right: 0;
   height: 94px;
   background: linear-gradient(180deg, #451a03 0%, #26140b 100%);
   border-top: 3px solid #b45309;

projects/sasch40/frontend/src/config/characters.ts

@@ -130,8 +130,8 @@ export const CHARACTERS: Record<string, CharacterConfig> = {
     id: 'saskia',
     name: 'Schwester Saskia',
     title: 'Die Erstgeborene Schwester',
-    portrait: '/assets/characters/saskia/portrait.jpg',
+    portrait: '/assets/characters/saskia/portrait_v2.jpg?v=2',
-    description: 'Wurde auf den ersten Turm in den Wolken verschleppt und ruft nach König Sascha!',
+    description: 'Saschas erstgeborene Schwester mit strahlendem Lächeln und eleganter Hochsteckfrisur. Wartet auf dem ersten Wolkenturm!',
     famousQuote: 'Sascha, beeil di! Der Turm wackelt im 135-BPM-Takt!',
     themeColor: '#f43f5e'
   },
@@ -139,8 +139,8 @@ export const CHARACTERS: Record<string, CharacterConfig> = {
     id: 'maja',
     name: 'Schwester Maja',
     title: 'Die Zweite Schwester',
-    portrait: '/assets/characters/maja/portrait.jpg',
+    portrait: '/assets/characters/maja/portrait_v2.jpg?v=2',
-    description: 'Gefangen in den Wipfeln des Haumdaucher Himmelsgartens.',
+    description: 'Saschas zweite Schwester mit frechem Pixie-Cut, goldenen Creolen und markantem Schönheitsfleck. Gefangen im Himmelsgarten!',
     famousQuote: 'Hol mi runter, Sascha, i hob an riesen Durst auf a Helles!',
     themeColor: '#8b5cf6'
   },
@@ -148,8 +148,8 @@ export const CHARACTERS: Record<string, CharacterConfig> = {
     id: 'miriam',
     name: 'Schwester Miriam',
     title: 'Die Jüngste Schwester',
-    portrait: '/assets/characters/miriam/portrait.jpg',
+    portrait: '/assets/characters/miriam/portrait_v2.jpg?v=2',
-    description: 'Hockt auf den höchsten Himmelszinnen und wartet auf ihren großen Bruder.',
+    description: 'Saschas jüngste Schwester mit langen dunklen Locken, Sonnenbrille im Haar, strahlend blauen Augen und Nasenring. Hockt auf den höchsten Himmelszinnen!',
     famousQuote: 'Bester Bruder! Alle drei Schwestern gerettet! Jetzt aber zügig zum Schankraum!',
     themeColor: '#06b6d4'
   },