style(design): overlay-uri mai mici, inimi/stelute mai mari si in partea de jos

- Overlay-urile acopereau prea mult din imaginea hartii. Reduse la ~18-22% latime
  si 12% inaltime, pozitionate sa acopere doar zona textului provocarilor.
- HUD-ul (inimi + stelute) mutat de sus in partea de jos a ecranului.
- Dimensiunile inimilor si stelutelor crescute semnificativ (font-size 3vmin/2.8vmin).
- Overlay-urile facute semi-transparente (0.85 opacitate) pentru vizibilitate mai buna.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

paula-escape/escape_room.html

@@ -21,7 +21,7 @@ const PROBLEMS = [
       { label: "D", text: "x = 30, y = 6", correct: false }
     ],
     marker: { top: "13%", left: "15%" },
-    overlay: { top: "3%", left: "2%", width: "27%", height: "27%" }
+    overlay: { top: "7%", left: "5%", width: "18%", height: "12%" }
   },
   {
     id: 2,
@@ -35,7 +35,7 @@ const PROBLEMS = [
       { label: "D", text: "p = 16, c = 4", correct: false }
     ],
     marker: { top: "50%", left: "12%" },
-    overlay: { top: "36%", left: "1%", width: "27%", height: "30%" }
+    overlay: { top: "43%", left: "3%", width: "18%", height: "12%" }
   },
   {
     id: 3,
@@ -49,7 +49,7 @@ const PROBLEMS = [
       { label: "D", text: "h = 11, s = 11", correct: false }
     ],
     marker: { top: "12%", left: "65%" },
-    overlay: { top: "2%", left: "51%", width: "32%", height: "28%" }
+    overlay: { top: "6%", left: "56%", width: "22%", height: "12%" }
   },
   {
     id: 4,
@@ -63,7 +63,7 @@ const PROBLEMS = [
       { label: "D", text: "m = 14, c = 10", correct: false }
     ],
     marker: { top: "72%", left: "22%" },
-    overlay: { top: "58%", left: "8%", width: "30%", height: "32%" }
+    overlay: { top: "65%", left: "14%", width: "20%", height: "12%" }
   },
   {
     id: 5,
@@ -77,7 +77,7 @@ const PROBLEMS = [
       { label: "D", text: "p = 18, c = 4", correct: false }
     ],
     marker: { top: "58%", left: "48%" },
-    overlay: { top: "42%", left: "34%", width: "32%", height: "38%" }
+    overlay: { top: "52%", left: "40%", width: "20%", height: "12%" }
   },
   {
     id: 6,
@@ -91,7 +91,7 @@ const PROBLEMS = [
       { label: "D", text: "m = 22, n = 8", correct: false }
     ],
     marker: { top: "28%", left: "80%" },
-    overlay: { top: "14%", left: "58%", width: "41%", height: "56%" }
+    overlay: { top: "24%", left: "72%", width: "22%", height: "12%" }
   }
 ];
 
@@ -147,7 +147,7 @@ const TOTAL_HEARTS = 10;
   --heart-empty: #bdc3c7;
   --star-gold: #f1c40f;
   --star-locked: #95a5a6;
-  --overlay-bg: rgba(244,228,193,1);
+  --overlay-bg: rgba(244,228,193,0.85);
   --success-green: #4caf50;
   --backdrop: rgba(0,0,0,0.5);
 }
@@ -194,32 +194,32 @@ html, body {
    ============================================================ */
 .hud {
   position: absolute;
-  top: 0; left: 0; right: 0;
+  bottom: 0; left: 0; right: 0;
-  height: 4vmin;
+  height: 6vmin;
-  min-height: 36px;
+  min-height: 48px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 2vmin;
+  padding: 0 3vmin;
-  background: rgba(0,0,0,0.15);
+  background: rgba(0,0,0,0.25);
-  backdrop-filter: blur(2px);
+  backdrop-filter: blur(4px);
   z-index: 10;
-  font: 600 clamp(14px, 1.2vmin, 18px) 'Nunito', sans-serif;
+  font: 600 clamp(16px, 1.5vmin, 22px) 'Nunito', sans-serif;
 }
-.stars { display: flex; gap: 0.5vmin; }
+.stars { display: flex; gap: 0.8vmin; }
 .star {
-  font-size: clamp(16px, 1.8vmin, 24px);
+  font-size: clamp(22px, 3vmin, 36px);
   color: var(--star-locked);
   transition: color 0.5s, transform 0.5s;
 }
 .star.solved {
   color: var(--star-gold);
   transform: scale(1.2);
-  filter: drop-shadow(0 0 4px rgba(241,196,15,0.6));
+  filter: drop-shadow(0 0 6px rgba(241,196,15,0.6));
 }
-.hearts { display: flex; gap: 0.3vmin; }
+.hearts { display: flex; gap: 0.5vmin; }
 .heart {
-  font-size: clamp(14px, 1.6vmin, 22px);
+  font-size: clamp(20px, 2.8vmin, 34px);
   transition: opacity 0.3s, transform 0.3s;
 }
 .heart.lost {