/* Formats (src/formats.js): the stage is the output frame; #back / #front
   keep the design frame (1920 x 1080), placed and scaled by the view
   (src/reframe.js sets left / top / transform). Full-bleed layers (#bg,
   #wipe, #flash, #grain, the bars, the HUD) fill the output. */
#stage[data-format='v'], #stage[data-format='v'] #gl { width: 1080px; height: 1920px; }
#stage[data-format='v'] #back, #stage[data-format='v'] #front { inset: auto; width: 1920px; height: 1080px; transform-origin: 0 0; }

/* Per-scene fixes live in the folders' style.css, the rest in each scene's
   formats field (defineScene). */

/* Preview only: the platforms' UI over a vertical frame (top bar > Safe
   zones), a guide: shaded lightly outside the safe area of all three. */
.fmt-safe { position: absolute; inset: 0; display: none; pointer-events: none; }
#stage.show-safe .fmt-safe { display: block; }
.fmt-safe svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fmt-safe .shade { fill: rgba(255, 40, 90, 0.07); }
.fmt-safe .edge { fill: none; stroke: rgba(255, 60, 110, 0.5); stroke-width: 2; stroke-dasharray: 6 8; }
.fmt-safe .pf { fill: none; stroke-width: 2.5; stroke-dasharray: 14 10; }
.fmt-safe text { font: 700 26px 'JetBrains Mono', monospace; }