Fix iframe viewport clipping issue by removing 4:3 aspect ratio and supporting height scaling

templates/player.html

@@ -266,12 +266,27 @@
         }
 
         /* Iframe Viewport for Scratch & HTML5 */
+        .screen-frame.iframe-mode {
+            aspect-ratio: auto;
+            max-height: 100%;
+            height: 100%;
+            width: 100%;
+            padding: 0;
+            overflow: auto;
+            border-radius: 12px;
+            box-shadow: 
+                0 0 0 1px rgba(255,255,255,0.03), 
+                0 25px 60px rgba(0,0,0,0.85),
+                0 0 45px rgba(99, 102, 241, 0.15);
+        }
+
         .iframe-viewport {
             width: 100%;
             height: 100%;
             border: none;
             background-color: #000;
             border-radius: 10px;
+            display: block;
         }
 
         /* Guide Tip Overlay */
@@ -635,6 +650,8 @@
                 layout.style.gridTemplateColumns = "1fr";
                 statusWrapper.style.display = "none"; // Iframe handles itself
                 
+                viewportFrame.classList.add("iframe-mode");
+                
                 const iframe = document.createElement("iframe");
                 iframe.className = "iframe-viewport";
                 iframe.allow = "autoplay; fullscreen; microphone; camera";