<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>El Filibusterismo - C&E Publishing</title>

    <!-- PWA & Mobile Icons / Manifest -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#000000">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="El Filibusterismo">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        html, body {
            width: 100%;
            height: 100%;
            background-color: #000000;
            overflow: hidden;
            touch-action: none;
        }
        body {
            position: fixed;
            inset: 0;
            width: var(--viewport-width, 100vw);
            height: var(--viewport-height, 100dvh);
            display: grid;
            place-items: center;
        }
        #ruffle-player {
            width: min(var(--viewport-width, 100vw), calc(var(--viewport-height, 100dvh) * 4 / 3));
            height: min(var(--viewport-height, 100dvh), calc(var(--viewport-width, 100vw) * 3 / 4));
            aspect-ratio: 4 / 3;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            contain: strict;
            isolation: isolate;
        }
        ruffle-player {
            width: 100% !important;
            height: 100% !important;
            max-width: 100% !important;
            max-height: 100% !important;
        }
        
        /* Floating Mobile Fullscreen Button */
        .fs-floating-btn {
            position: fixed;
            top: max(8px, env(safe-area-inset-top));
            right: max(8px, env(safe-area-inset-right));
            z-index: 999999;
            background: rgba(0, 0, 0, 0.7);
            color: #ffffff;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 20px;
            padding: 6px 12px;
            font-family: system-ui, -apple-system, sans-serif;
            font-size: 0.75rem;
            font-weight: 600;
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 4px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.6);
            transition: all 0.2s ease;
            opacity: 0.9;
        }
        .fs-floating-btn:hover {
            opacity: 1;
            background: rgba(0, 0, 0, 0.9);
            transform: scale(1.05);
        }
        @media (pointer: coarse), (prefers-reduced-motion: reduce) {
            .fs-floating-btn {
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
                transition: none;
                box-shadow: none;
            }
        }
    </style>
</head>
<body>
    <!-- Floating Mobile Fullscreen Toggle -->
    <button class="fs-floating-btn" onclick="toggleMobileFullscreen()">
        <span>⛶ Fullscreen</span>
    </button>

    <div id="ruffle-player"></div>

    <script>
        window.RufflePlayer = window.RufflePlayer || {};
        window.RufflePlayer.config = {
            publicPath: "./ruffle/",
            polyfills: false
        };
    </script>
    <script src="./ruffle/ruffle.js"></script>
    <script>
        // Use the actually visible area when mobile browser bars expand/collapse.
        function syncViewportSize() {
            const viewport = window.visualViewport;
            const width = viewport ? viewport.width : window.innerWidth;
            const height = viewport ? viewport.height : window.innerHeight;
            document.documentElement.style.setProperty("--viewport-width", `${width}px`);
            document.documentElement.style.setProperty("--viewport-height", `${height}px`);
        }
        syncViewportSize();
        window.addEventListener("resize", syncViewportSize);
        window.addEventListener("orientationchange", syncViewportSize);
        if (window.visualViewport) {
            window.visualViewport.addEventListener("resize", syncViewportSize);
            window.visualViewport.addEventListener("scroll", syncViewportSize);
        }

        // Register PWA Service Worker for Offline Functionality
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('./sw.js')
                    .then(reg => console.log('[PWA] Service Worker active:', reg.scope))
                    .catch(err => console.warn('[PWA] Service Worker registration skipped:', err));
            });
        }

        // Initialize Ruffle Player with ForceScale & Mobile Viewport Constraints
        window.addEventListener("load", () => {
            const ruffle = window.RufflePlayer.newest();
            const player = ruffle.createPlayer();
            const container = document.getElementById("ruffle-player");
            container.appendChild(player);
            const coarsePointer = window.matchMedia("(pointer: coarse)").matches;
            const lowMemory = navigator.deviceMemory && navigator.deviceMemory <= 4;
            const fewCores = navigator.hardwareConcurrency && navigator.hardwareConcurrency <= 4;
            const performanceQuality = coarsePointer || lowMemory || fewCores ? "low" : "medium";

            player.style.width = "100%";
            player.style.height = "100%";
            player.style.maxWidth = "100%";
            player.style.maxHeight = "100%";

            // Apply ForceScale & Mobile Stage Auto-Fit Settings
            player.load({
                url: "ElFilibusterismo.swf",
                base: "./",
                parameters: {
                    xmlFile: "xml/pages.xml",
                    tauxmlFile: "xml/tauhan2.xml",
                    bookxmlFile: "xml/nilalaman2.xml"
                },
                allowScriptAccess: true,
                backgroundColor: "#000000",
                letterbox: "on",
                scale: "showAll",
                forceScale: true, // Forces Ruffle to scale to container, ignoring Stage.scaleMode = "noScale"
                autoplay: "on",
                unmuteOverlay: "hidden",
                quality: performanceQuality,
                wmode: "opaque",
                contextMenu: "off",
                menu: false,
                splashScreen: false,
                polyfills: false
            });
        });

        // Mobile Fullscreen Handler
        function toggleMobileFullscreen() {
            if (!document.fullscreenElement && !document.webkitFullscreenElement) {
                const docEl = document.documentElement;
                if (docEl.requestFullscreen) {
                    docEl.requestFullscreen();
                } else if (docEl.webkitRequestFullscreen) {
                    docEl.webkitRequestFullscreen();
                }
            } else {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                }
            }
        }
    </script>
</body>
</html>
