Enable much larger task images - almost fill the window

Enhanced image scaling for maximum visual impact:

##  Massive Image Scaling Upgrade:

### Dramatically Increased Size Limits:
- **Base Size**: Now 70vh height (was 45vh), 90vw width (was 85vw)
- **Ultra-wide Screens**: Up to 1500px wide, 1000px tall (was 900x700)
- **Large Screens**: Up to 1200px wide, 800px tall (was 700x550)
- **Medium Screens**: Up to 800px wide, 600px tall (was 500x400)
- **Small Screens**: Up to 500px wide, 400px tall (was 400x300)

### Window Size Optimizations:
- **window-xl**: 80vh height, 85vw width - nearly full screen
- **window-large**: 75vh height, 88vw width - most of the screen
- **window-medium**: 65vh height, 90vw width - large portion
- **window-small**: 55vh height, 95vw width - efficient use of space

### Enhanced Container Support:
- Container max-height increased to 85vh (was 70vh)
- Better vertical space utilization
- Full width containers for optimal centering
- Dynamic minimum heights scale with window size

### Responsive Breakpoint Updates:
- **1400px+**: 75vh max height, 85vw width - huge images
- **1000-1399px**: 65vh max height, 88vw width - very large
- **800-999px**: 55vh max height, 92vw width - substantial size
- **<800px**: 50vh max height, 95vw width - fills small windows

##  User Experience:
- **Immersive Viewing**: Images now dominate the screen appropriately
- **Better Detail Visibility**: Much easier to see image details
- **Scalable Impact**: Larger windows = dramatically larger images
- **Maintains Quality**: Aspect ratios and sharpness preserved
- **Space Efficient**: Takes full advantage of available screen real estate

**Images now fill most of the window for maximum visual impact! **

styles.css

@@ -737,14 +737,15 @@ body {
     display: flex;
     justify-content: center;
     align-items: center;
-    min-height: max(200px, 25vh); /* Dynamic minimum height based on viewport */
-    max-height: 70vh; /* Don't take up more than 70% of viewport height */
+    min-height: max(200px, 25vh);       /* Dynamic minimum height based on viewport */
+    max-height: 85vh;                   /* Allow container to take up most of screen */
+    width: 100%;                        /* Full width for centering */
 }
 
 .task-image {
     /* Hybrid responsive sizing - scales with viewport but has reasonable limits */
-    max-width: min(85vw, 700px);        /* 85% of viewport width, capped at 700px */
-    max-height: min(45vh, 500px);       /* 45% of viewport height, capped at 500px */
+    max-width: min(90vw, 1200px);       /* 90% of viewport width, capped at 1200px */
+    max-height: min(70vh, 800px);       /* 70% of viewport height, capped at 800px */
     min-height: max(200px, 20vh);       /* Minimum 200px or 20% of viewport height */
     min-width: 250px;                   /* Prevent images from being too narrow */
     
@@ -1879,36 +1880,37 @@ body.theme-monochrome {
 /* Ensure game screen task display scales well */
 @media (min-width: 1400px) {
     .task-display {
-        max-width: 700px;
+        max-width: 900px;
         margin: 0 auto;
     }
     
     .task-image {
-        max-height: min(40vh, 600px);   /* Larger images on very large screens */
-        max-width: min(80vw, 800px);    /* Can be wider on large screens */
+        max-height: min(75vh, 900px);   /* Much larger images on very large screens */
+        max-width: min(85vw, 1400px);   /* Can be much wider on large screens */
     }
     
     .task-image-container {
-        min-height: max(250px, 30vh);   /* Taller container for larger images */
+        min-height: max(300px, 35vh);   /* Taller container for larger images */
     }
 }
 
 @media (min-width: 1000px) and (max-width: 1399px) {
     .task-display {
-        max-width: 600px;
+        max-width: 700px;
         margin: 0 auto;
     }
     
     .task-image {
-        max-height: min(45vh, 500px);   /* Standard size for medium-large screens */
+        max-height: min(65vh, 700px);   /* Bigger images for medium-large screens */
+        max-width: min(88vw, 1000px);   /* More width utilization */
     }
 }
 
 /* Compact sizing for smaller windows */
 @media (max-width: 999px) {
     .task-image {
-        max-height: min(35vh, 400px);   /* Smaller images on compact screens */
-        max-width: min(90vw, 500px);    /* Take up more width percentage */
+        max-height: min(55vh, 500px);   /* Still quite large on compact screens */
+        max-width: min(92vw, 600px);    /* Take up most of the width */
         min-height: max(180px, 18vh);   /* Smaller minimum height */
     }
     
@@ -1918,11 +1920,11 @@ body.theme-monochrome {
     }
 }
 
-/* Very small windows - mobile-like experience */
+/* Very small windows - still allow decent image size */
 @media (max-width: 800px) {
     .task-image {
-        max-height: min(30vh, 300px);   /* Even smaller for very compact windows */
-        max-width: min(95vw, 400px);    /* Nearly full width */
+        max-height: min(50vh, 400px);   /* Half the viewport height on small windows */
+        max-width: min(95vw, 500px);    /* Nearly full width */
         min-height: max(150px, 15vh);   /* Smaller minimum */
         min-width: 200px;               /* Smaller minimum width */
     }
@@ -1950,27 +1952,27 @@ body.theme-monochrome {
 
 /* Extra fine-tuning based on JavaScript window size detection */
 .game-container.window-xl .task-image {
-    max-width: min(75vw, 900px);
-    max-height: min(50vh, 700px);
-    min-height: max(300px, 25vh);
+    max-width: min(85vw, 1500px);       /* Huge images on ultra-wide screens */
+    max-height: min(80vh, 1000px);      /* Take up most of the vertical space */
+    min-height: max(400px, 30vh);       /* Large minimum size */
 }
 
 .game-container.window-large .task-image {
-    max-width: min(80vw, 700px);
-    max-height: min(45vh, 550px);
-    min-height: max(250px, 22vh);
+    max-width: min(88vw, 1200px);       /* Very large images */
+    max-height: min(75vh, 800px);       /* Most of the screen height */
+    min-height: max(300px, 25vh);       /* Good minimum size */
 }
 
 .game-container.window-medium .task-image {
-    max-width: min(85vw, 500px);
-    max-height: min(40vh, 400px);
-    min-height: max(200px, 20vh);
+    max-width: min(90vw, 800px);        /* Large images on medium screens */
+    max-height: min(65vh, 600px);       /* Good portion of screen height */
+    min-height: max(250px, 22vh);       /* Reasonable minimum */
 }
 
 .game-container.window-small .task-image {
-    max-width: min(95vw, 400px);
-    max-height: min(35vh, 300px);
-    min-height: max(150px, 18vh);
+    max-width: min(95vw, 500px);        /* Nearly full width on small screens */
+    max-height: min(55vh, 400px);       /* More than half the screen height */
+    min-height: max(200px, 20vh);       /* Decent minimum size */
     min-width: 180px;
 }