Drop one iframe on the framing page; everything else (styles, the widget, offline caching) lives here:

<iframe
    src="https://games.andikarekatias.com/player/embed.html"
    title="Games Music player"
    style="position: fixed; bottom: 0; right: 0;
        width: 340px; height: 620px; border: 0;">
</iframe>

• Use the fixed 340 × 620 frame — the page behind the widget is transparent, but the iframe intercepts clicks across its whole box.
• The widget sits 50px up / 10px in from the frame's corner by default (footer clearance). Each edge is overridable in px: ?top=, ?right=, ?bottom=, ?left= — e.g. embed.html?bottom=70&state=expanded.
• The playlist opens upward; the full list still fits a 620 frame at the default raise. If you raise the widget farther with ?bottom=N, grow the frame by the same N.
• Playback waits for a click inside the frame (autoplay rules); ?state=expanded only opens the panel.
• Framing a new origin? Add it to frame-ancestors in this repo's _headers (Snake, Tic-Tac-Toe and the hub are pinned).

Full guide: docs/music-player-integration.md.