/* Full-screen reel result overlay — the shared look of a playing reel.
   Paired with /reel-player.js: any page that mounts the player links this.
   Used by generate.html (the funnel's result) and reel-watch.html (/reel/@handle
   delivery).

   Lifted out of generate.html's inline <style>, where it was invisible to any
   other page — reel-watch.html rendered an unstyled 300x150 <video> because these
   rules simply weren't there. Keep it here, not per-page: a copy that drifts is
   the bug this repo's DRY rule exists to prevent.

   Ownership note: .gen-result__cta is the funnel's trial pitch. It lives here
   because it's part of this overlay's markup, but only generate.html renders it —
   the watch page deliberately has no CTA. */

.gen-result{position:fixed;inset:0;z-index:9000;background:radial-gradient(120% 120% at 50% 0%,#1d2440 0%,#0c0f1c 70%);display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.gen-result.is-open{display:flex}
.gen-result__stage{position:relative;height:min(80vh,720px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.55);background:#000}
.gen-result__video{width:100%;height:100%;object-fit:cover;display:block}
.gen-result__confetti{position:absolute;inset:0;pointer-events:none}
.gen-result__cta{margin-top:24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.gen-result__cta-line{color:#cfd6ea;font-size:.95rem}
.gen-result__cta-line strong{color:#fff}
.gen-result__close{position:absolute;top:16px;right:18px;width:40px;height:40px;border-radius:50%;border:none;background:rgba(255,255,255,.12);color:#fff;font-size:1.4rem;line-height:1;cursor:pointer;z-index:2}
.gen-result__controls{display:flex;gap:12px;justify-content:center;align-items:center;margin:14px auto 0}
.gen-result__ctrl{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
.gen-result__ctrl:hover{background:rgba(255,255,255,.2)}
.gen-result__ctrl svg{width:21px;height:21px}
.gen-result__ctrl--wide{width:auto;gap:8px;padding:0 18px;border-radius:23px;font:600 14px/1 var(--font-body,system-ui),sans-serif}
/* An author `display` rule outranks the UA stylesheet's [hidden]{display:none},
   so a page that toggles the overlay via the hidden attribute needs this or both
   states render at once. */
.gen-result[hidden]{display:none}