feat: Ren'Py screens (screen/call screen/show screen) with actions and styles

Converter
- screens.py parses the screen language: containers (fixed, frame, vbox, hbox,
  grid, vpgrid, viewport, button, has), widgets (text, textbutton, imagebutton,
  add, bar ...), if/for/use/transclude, default, python, key, timer, on, inline ATL,
  conditional properties, and decompiled forms (unparenthesised operators,
  glued property values, comma separated actions)
- style statements, call/show/hide screen operators and Python-level
  renpy.show_screen are translated; only screens the game shows are audited,
  unused stock screens no longer block an import; undefined screens do
- ATL values may be computed at run time and transforms take parameters
  (at blink(0.2, 0.3)); blur property

Player
- screens.ts builds the DOM from the IR and rebuilds it on state changes;
  buttons with idle/hover/selected/insensitive states, tooltips, sounds, modal
  screens, timers and keys that survive re-rendering, saved with the save file
- Actions: Jump, Call, Return, SetVariable, Toggle*, SetScreenVariable, Show, Hide,
  ToggleScreen, Function, Play, Notify, If, Language, ShowMenu, OpenURL ...
- Crop/LiveCrop/Solid/Frame/Transform/DynamicDisplayable values, crop property,
  globals(), renpy.variant/change_language/seen_image, transition stubs

Tests: screen parser and runtime (linkedom DOM), screens fixture compiled from
tests/fixtures/screens.rpy. Docs: docs/SCREENS.md.

Twisted-Thoughts now passes the strict compatibility check.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

frontend/src/player/renderer.ts

@@ -1,7 +1,7 @@
 // DOM renderer for the image layer: one absolutely positioned element per shown tag.
 // The stage has the game's native resolution and is scaled with a CSS transform.
 
-import { AtlRunner, type AtlBlock } from "./atl";
+import { AtlRunner, bindArguments, type AtlBlock } from "./atl";
 import type { AtSpec, ImageDef, ShownImage, Transition } from "./types";
 
 const POSITIONS: Record<string, Record<string, number>> = {
@@ -29,6 +29,8 @@ export interface RendererHost {
   evalCond(e: any): boolean;
   transform(name: string): Record<string, any> | null;
   atl(name: string): AtlBlock | null;
+  /** Evaluate an expression, optionally with extra variables (ATL parameters) in scope. */
+  evalExpr(expr: any, frame?: Map<string, any>): any;
   text(e: any): string;
 }
 
@@ -105,7 +107,8 @@ export class Renderer {
         block: (name) => this.host.atl(name),
         props: (name) => this.host.transform(name),
         apply: (p) => this.style(entry.el, { ...p }),
-      }, live);
+        eval: (expr, frame) => this.host.evalExpr(expr, frame),
+      }, live, bindArguments(block, spec, (e) => this.host.evalExpr(e)));
       entry.runners.push({ runner, block });
       void runner.start(block).catch((err) => console.warn("[pgvn] ATL", err));
     }
@@ -207,6 +210,11 @@ export class Renderer {
     return document.createElement("div");
   }
 
+  /** An element for an image definition, for UI built outside the scene (screens). */
+  displayable(def: ImageDef): HTMLElement {
+    return this.build(def);
+  }
+
   /** Frame-by-frame ATL animation: swaps children on timers while attached. */
   private animated(def: ImageDef, depth: number): HTMLElement {
     const box = document.createElement("div");
@@ -311,7 +319,10 @@ export class Renderer {
     if (ax.endsWith("px") || ay.endsWith("px"))
       el.style.transform = `translate(calc(-1 * ${ax}), calc(-1 * ${ay})) scale(${zx}, ${zy})`;
     if (p.alpha !== undefined) el.style.opacity = String(p.alpha);
-    if (p.filter) el.style.filter = `${p.filter}(1)`;
+    const filters: string[] = [];
+    if (p.filter) filters.push(`${p.filter}(1)`);
+    if (typeof p.blur === "number" && p.blur > 0) filters.push(`blur(${p.blur}px)`);
+    if (filters.length) el.style.filter = filters.join(" ");
   }
 
   // --- transitions ---------------------------------------------------------------