Templat aplikasi Paket Teka-teki

Build a single-file mobile web app (index.html with inline CSS/JS) for Android WebView.

The app: Puzzle Packs — a sliding number puzzle (3×3 and 4×4) with a free Classic pack and paid packs pack_forest and pack_space, each with its own theme, colours and emoji; locked packs show the Play price and a Buy button. Sliding number puzzle with a free pack and themed level packs sold as one-time Google Play purchases.

Requirements:
- Mobile-first, touch-friendly UI (min 44px tap targets), works in portrait, supports light and dark mode.
- Use <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> and pad for env(safe-area-inset-*).
- You may load libraries from a CDN (jsDelivr/unpkg); show a friendly message if the device is offline.

The page runs inside an Android app that injects a native bridge as window.FreeApp. Available APIs:
- FreeApp.billing.{available, products(ids: string[]): Promise<[{id, title, description, type: 'inapp'|'subs', price /* formatted, local currency */, priceMicros, currency, period?, offers?: [{basePlan, offer, tags, phases: [{price, priceMicros, currency, period, cycles}]}], owned, consumable}]>, buy(id, {offer?}): Promise<{id, products, token, orderId, quantity, autoRenewing, alreadyOwned?}> (rejects with err.code: 'cancelled' | 'pending' | 'network' | 'busy' | 'unavailable' | 'developer_error' | 'not_found' | 'already_owned' | 'error'), restore(): Promise<{purchases, owned}>, consume(idOrToken), owned(): string[], isOwned(id): boolean, isAdFree(): boolean, manageSubscriptions(id?), on(cb: (e: {event: 'purchase'|'pending'|'owned'|'failed'|'unavailable', …}) => void)} — Google Play Billing; only present when Purchases is on in the builder. Unlock non-consumables from isOwned()/owned() at startup plus the 'owned' and 'purchase' events (not only in the click handler); grant consumables only in the 'purchase' event, deduplicated by e.token saved in localStorage; use buy()'s promise only for UI; show prices from products(), never hard-coded; say "Payment pending" on 'pending', stay silent on 'cancelled'; always offer a Restore purchases button and, for subscriptions, a Manage subscription link (manageSubscriptions); in a normal browser simulate purchases with a demo store
- FreeApp.toast(message: string): void — short native toast
- FreeApp.vibrate(ms?: number | number[]): void — one-shot buzz (default 50 ms) or an [off, on, off, on…] pattern

Rules for the bridge:
- Always guard calls with `window.FreeApp &&` (or `if (window.FreeApp) { … }`) and provide a browser fallback so the page also works in a normal browser.
- The bridge may be injected after your script runs: do native setup inside `window.addEventListener('freeappready', …)` and also run it immediately if window.FreeApp already exists.
- Do not use alert/confirm for normal feedback; prefer FreeApp.toast when available.

Return the complete index.html in one code block.

My idea: [DESCRIBE YOUR APP IDEA HERE]