/* THEATRE-X, the elevation round (2026-10-09). The theatre as a PLACE: a WebGL room behind the page (theatre-x.js), one of six
   concepts in /x/, chosen by ?x=1..6 on the desktop. Nothing in this sheet applies without html.x, which theatre-x.js sets, so the
   plain /theatre is the capital theatre untouched. Fonts, the masthead, the marquee, the screen, Enter world, the reel: all theirs. */
html.x #xStage{position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%;pointer-events:none;opacity:var(--xo,1)}
/* the room wash stays for the archive (the canvas has faded by then); under the room it is hidden by the opaque canvas anyway */
/* the DOM furniture the room replaces: the back vignette, the wings, the turntable disc, the floor reflection. A concept that wants
   one back sets the variable from its own sheet block below. */
html.x .rv-back,html.x .rv-wing{display:none}
html.x .rv-disc{opacity:var(--xdisc,0)}
html.x .floor{opacity:var(--xfloor,0)}
html.x .act-space{height:calc(var(--n,8) * var(--xslot,80vh) + var(--xlead,140vh))}   /* the lead stretch (the walk in) plus a slower walk through the worlds */
/* the stage is glued to the room's screen plane by a homography written on this box every frame (theatre-x.js register()) */
html.x .stagebox{transform-origin:0 0;will-change:transform}
/* the controls rest while the camera is still walking in, and come up when it arrives (theatre-x.js writes --xui) */
html.x .screen-ui,html.x .rv-hint,html.x .rv-arm{opacity:var(--xui,1)}
html.x .rv:hover .rv-arm{opacity:var(--xui,1)}
html.x .reelbox{opacity:calc(.26 * var(--xui,1))}
html.x .reelbox:hover,html.x .reelbox:focus-within,html.x .reelbox.dragging{opacity:var(--xui,1)}
/* the fan of worlds round the screen: a concept may hold it back until the camera arrives (theatre-x.js writes --xfan from api.fan) */
html.x .rv-ring{opacity:var(--xfan,1)}
/* the intermission's painted sky is the room's now */
html.x .im-bg{display:none}
/* the concept picker, localhost only, bottom left (theatre-x.js builds it) */
.xpick{position:fixed;left:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:6px;align-items:flex-start;font:10px/1 var(--mono,ui-monospace,monospace);letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.xpick div{display:flex;gap:6px;align-items:center}
.xpick span{min-width:14px}
.xpick a{color:rgba(255,255,255,.5);text-decoration:none;padding:7px 9px;border-radius:999px;border:1px solid rgba(255,255,255,.12)}
.xpick a.on{color:#fff;border-color:rgba(214,208,255,.6)}
.xpick .xfail{margin-left:10px;color:#ffb3b3;text-transform:none;letter-spacing:.02em;font-size:11px;max-width:60vw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---------- E1 THE ONE (2026-10-13): d2's opening, b2's descent, b2's glowing floor; the DOM reflection of the film under the screen, no dotted disc (neither the DOM's nor, since round 2, the room's); d2's 200vh lead ---------- */
html.xe1{--xfloor:1;--xdisc:0;--xlead:200vh}
/* the reel's film perforations read as rows of dots over the floor (his "film grain dots"): they show only when he reaches for the reel */
html.xe1 .reelbox:not(:hover):not(:focus-within):not(.dragging) .perf{opacity:0}
/* ---------- E1 world change (2026-10-13) ---------- */
/* the screen's dark for the changeover (theatre.js xEase writes its opacity): the screen is never see-through under the room, its
   light goes down and up on this layer */
html.xe1 .xdim{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:#040406;opacity:0}
/* the film's reflection on the floor goes down and up with the screen (xEase writes --xlit on .floor) */
html.xe1 .floor{opacity:calc(var(--xfloor,0) * var(--xlit,1))}
/* no box round the screen (his note: "why is there like a box around them, a purple box?"): under the room the screen keeps its
   shadow and loses its hairlines; its edge is the picture and the glow */
html.xe1 .theatre-page .screen{box-shadow:0 54px 104px -44px rgba(0,0,0,.92)}
/* the breath scales the screen, its hit area and its glow about one point 30% down the screen (theatre.js XO), so the top edge
   barely moves toward the kind line and Enter world rides the bottom edge */
html.xe1 .theatre-page .screen,html.xe1 .screen-hit,html.xe1 .xglow{transform-origin:50% 30%}
/* the glow behind the screen (theatre-x.js puts it in, theatre.js xEase writes its scale, --xgl its light, --xg the world's light
   colour): the world's light thrown round the screen's edges, mostly down onto the stage and out to the sides and almost none
   upward, so nothing lights the band behind the masthead or NOW SHOWING; held back with the fan while the camera walks in */
html.xe1 .xglow{position:absolute;left:50%;top:0;width:var(--cardW,900px);height:100%;margin-left:calc(var(--cardW,900px) / -2);border-radius:22px;
  pointer-events:none;will-change:transform,opacity;--xg:179,190,255;opacity:calc(var(--xgl,0) * var(--xfan,1));
  box-shadow:0 34px 90px -16px rgba(var(--xg),.42),0 14px 40px -14px rgba(var(--xg),.5)}
/* ---------- E1 round 3 (2026-10-13) ---------- */
/* his "the lets chat and icon sit wayyy too high, should literally be bottom right": the plain theatre steps it up 96 px off the pinned
   reel on a short window; under the room the reel's ends fall into the dark seats, so it keeps the landing's corner */
html.xe1 .theatre-page .chat-launcher{bottom:calc(24px + env(safe-area-inset-bottom,0px))}
/* past the act (theatre-x.js writes --xexit over the first 32px the page travels: a quick dissolve, since the room draws the picture a few px off the DOM screen and a slow fade showed it twice): the page carries the reel and the pin's foot up
   while the screen stays on the room's plane, so the reel goes in the first half and the stage (screen, Enter world, arrows, fan)
   fades with it, handing over to the room's own screen (its picture is drawn there too), the way the room's own frames go dark into ACT 2. Before this the
   reel slid across the picture and the pin's foot cut a dark band up through it (his "takes the bar over the screen") */
html.xe1 .reelbox{opacity:calc(.26 * var(--xui,1) * (1 - min(1, var(--xexit,0) * 2)))}
html.xe1 .reelbox:hover,html.xe1 .reelbox:focus-within,html.xe1 .reelbox.dragging{opacity:calc(var(--xui,1) * (1 - min(1, var(--xexit,0) * 2)))}
html.xe1 .stagebox{opacity:calc(1 - var(--xexit,0))}
html.xe1.xgone .reelbox,html.xe1.xgone .stagebox{visibility:hidden}
/* ---------- 2026-10-14, his note: "remove this bottom strip, you kinda don't need it at all, makes it look doubled with the main screen,
   and that way you see the reflection on the floor properly too": under the room the reel is hidden, never removed, since theatre.js
   measures it (measure, reelTo) for the keys and the scroll; the plain theatre and phones keep it ---------- */
html.xe1 .reelbox{visibility:hidden;pointer-events:none}