diff --git a/paula-escape/escape_room.html b/paula-escape/escape_room.html index a6fcae9..22616b8 100644 --- a/paula-escape/escape_room.html +++ b/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; - height: 4vmin; - min-height: 36px; + bottom: 0; left: 0; right: 0; + height: 6vmin; + min-height: 48px; display: flex; align-items: center; justify-content: space-between; - padding: 0 2vmin; - background: rgba(0,0,0,0.15); - backdrop-filter: blur(2px); + padding: 0 3vmin; + background: rgba(0,0,0,0.25); + 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 {