web: fullscreen keeps the display's aspect ratio on any page shell

[LinuxJedi]

Fullscreen in the browser build stretched the picture to the monitor's aspect ratio on any page shell without its own :fullscreen CSS - very visibly on ultrawide monitors.

Root cause. In real element fullscreen try.js relied entirely on the host page's stylesheet to letterbox the canvas, and only the hosted /try shell carries a :fullscreen rule; any other embedding (the retro32 page, self-hosted shells) keeps its normal width: 100% canvas rule, which fills the monitor. The hosted rule was also subtly off: object-fit: contain letterboxes at the presentation buffer's own ratio (the PAL capture is 668x540, about 1.24:1), not the 4:3 TV shape every shell gives the canvas in the page layout.

Fix, all in the page glue so it holds on every embedding:

• CSS_FS_CANVAS now makes the canvas the largest 4:3 box that fits the screen, centred by auto margins, with object-fit pinned to fill so a shell's own :fullscreen rule cannot re-letterbox the bitmap inside the box. Dynamic viewport units (dvw/dvh) measure the monitor exactly in real fullscreen and track the visible area in the pinned iPhone fallback, where plain vh reaches under Safari's chrome.
• The styles are applied on fullscreenchange for real fullscreen (previously only the CSS fallback got them) and removed on any exit, Esc included.
• cssToEmu() loses its fullscreen special case: the bitmap fills the canvas element in every mode now, so the width ratio is the displayed scale.
• docs/guide/browser.md documents the fullscreen behaviour, which had no doc coverage.

Verified by serving the real page shell with the modified glue and driving Chrome: in fullscreen the canvas measures exactly 4:3 (ratio 1.3333), centred with equal pillarbox bars on a 1.75:1 viewport, and exiting restores the page layout with all inline styles cleared. Chrome denies requestFullscreen to automation input, so the scripted run exercised the pinned-shell fallback path; it applies the identical style object through the same fullscreenchange listener, but the real-fullscreen entry itself still wants a one-click manual check on a wide monitor.

Follow-up for the website repository (not part of this PR): the .try-shell:fullscreen #screen rule in try/index.html is now redundant - the inline styles override it - and can be dropped.

[Copilot]

Pull request overview

This PR fixes browser fullscreen rendering for Copperline’s web build so the emulator display preserves a consistent 4:3 aspect ratio across any embedding shell (not just the hosted /try page), avoiding visible stretching on wide/ultrawide monitors.

Changes:

• Apply a 4:3 “largest box that fits” fullscreen letterbox via inline canvas styles (CSS_FS_CANVAS) so it works in all embedding shells.
• Apply/remove the fullscreen canvas styling on fullscreenchange (real element fullscreen), not only in the CSS-pinned fallback path.
• Document the fullscreen behavior (including the iPhone pinned fallback) in docs/guide/browser.md.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 1 comment.

File	Description
docs/guide/browser.md	Documents expected fullscreen + iPhone fallback behavior for the browser build.
crates/copperline-web/www/try.js	Enforces consistent 4:3 fullscreen sizing via inline styles and updates fullscreen event handling and CSS→emulated scaling logic.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.