/* venue-stage.css: the scene on every venue screen (venue-stage.js). The room is the screen: the painted room with the
   gladiator and the keeper fills the top (portrait) or the left (landscape, desktop); the menus scroll in their own region.
   The stage is a fixed layer under #app (repaints never touch it), seen through .venue-stage-slot, a window in the venue
   screen with the same geometry. --vs-top: where the stage floor starts (under the status bar and heading, as venues.css
   sizes them); --stage-h: its height; --stage-w: its width beside the menus; --fig: figure size; --floor: ground line. */
:is(.venue-staged,.venue-stage){--vt:calc(70px + env(safe-area-inset-top));--vh:60px;--vs-top:calc(var(--vt) + var(--vh));--stage-h:clamp(165px,28dvh,330px);--fig:min(calc(var(--stage-h) * .8),54vw);--floor:calc(var(--stage-h) * .035)}
@media(min-width:1000px) and (min-height:600px){:is(.venue-staged,.venue-stage){--vt:calc(83px + env(safe-area-inset-top));--vh:64px}}
@media(max-width:360px){:is(.venue-staged,.venue-stage){--vt:calc(62px + env(safe-area-inset-top));--vh:57px}}
@media(max-height:599px) and (min-width:600px){:is(.venue-staged,.venue-stage){--vt:calc(54px + env(safe-area-inset-top));--vh:48px}}
.venue-staged:before{display:none}
.venue-stage-slot{position:absolute;left:0;right:0;top:0;height:calc(var(--vs-top) + var(--stage-h));z-index:0;background:#1d1108 30% 72%/cover no-repeat;pointer-events:none}
/* While the stage layer is live the venue screen is a window: no backdrop, an empty slot. */
body.vs-live .venue-staged{background:none}
body.vs-live .venue-stage-slot{background:none!important}
/* The keeper's line for screen readers, in reading order (the stage layer itself is aria-hidden). */
.vs-sr{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.mobile-app.map-app .venue-staged #main.venue-scroll{top:calc(var(--vs-top) + var(--stage-h));z-index:1;background:linear-gradient(180deg,#2c190d 0,#20130a 45%,#1a0f08);box-shadow:inset 0 12px 14px -10px #000c;scroll-padding-block:10px}
.venue-staged .venue-layout{display:block}
.venue-staged .venue-content{padding-top:12px}
.venue-staged .venue-heading{z-index:5}
/* The stage: a size container, so the room, the cast and the ambience scale with it. */
.venue-stage{position:fixed;left:0;right:0;top:0;height:calc(var(--vs-top) + var(--stage-h));overflow:hidden;container-type:size;pointer-events:none;background:#1d1108;--vs-t:0s}
.venue-stage[hidden]{display:none}
/* In stage (container) units: where each figure's torso stands, and the bubble's right edge (near the keeper, or the edge). */
.venue-stage>*{--hero-x:calc(50cqw - var(--fig) * .47);--keeper-x:calc(50cqw + var(--fig) * .47);--b-right:max(8px,calc(100cqw - var(--keeper-x) - var(--fig) * .32))}
.vs-room{position:absolute;will-change:transform;--bw:max(100cqw,150cqh);--bh:max(100cqh,66.667cqw);width:var(--bw);height:var(--bh);left:calc((100cqw - var(--bw)) * var(--fx,.5));top:calc((100cqh - var(--bh)) * .72)}
.vs-room>img{display:block;width:100%;height:100%}
.vs-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#170a03d9 0,#170a0373 calc(var(--vs-top) - 20px),#170a0300 calc(var(--vs-top) + 26px)),linear-gradient(0deg,#140903c7 0,#14090300 18%)}
.vs-cast,.vs-fx,.vs-poof{position:absolute;inset:0;pointer-events:none}
.vs-actor{position:absolute;bottom:var(--floor);width:var(--fig);height:var(--fig)}
.vs-hero{left:calc(var(--hero-x) - var(--fig) * .46)}
.vs-keeper{left:calc(var(--keeper-x) - var(--fig) * .54)}
.vs-breath,.vs-rig,.vs-flip,.vs-flip .keeper-figure{position:absolute;inset:0}
.vs-flip{transform:scaleX(-1)}
.venue-stage .combat-rig{display:block;width:100%;height:100%;overflow:visible}
/* Idle breathing on the HTML wrapper (composited); the rigs' own SVG idle loops stay off here. */
.venue-stage .combat-rig :is(.rig-body,.rig-head){animation:none}
.vs-breath{transform-origin:50% 97%;animation:vs-breathe 3.8s ease-in-out infinite;animation-delay:var(--vs-t)}
.vs-keeper .vs-breath{animation-duration:3.1s}
@keyframes vs-breathe{50%{transform:scale(1.007,1.017)}}
.vs-shadow{position:absolute;left:20%;right:20%;bottom:0;height:7%;border-radius:50%;background:radial-gradient(closest-side,#1a0c04b3,#1a0c0400)}
/* Try-on flourish: sparkles thrown from the gladiator's chest (venue-stage.js animates them). */
.vs-poof i{position:absolute;left:43%;top:42%;width:14px;height:14px;margin:-7px;opacity:0;background:#ffe27a;clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%)}
.vs-poof i:nth-child(even){background:#fffbe8;width:10px;height:10px;margin:-5px}
/* The keeper's line: the arrival conversation's comic bubble, tail at the keeper's head. It sits just above the head when
   the stage has room, else under the heading (margin-top:auto in a band from the heading down to the head: never above it). */
.vs-say{position:absolute;z-index:4;top:calc(var(--vs-top) + 14px);bottom:calc(var(--floor) + var(--fig) * (252 - var(--k-top)) / 240);right:var(--b-right);left:clamp(8px,calc(var(--hero-x) + var(--fig) * .22),calc(100cqw - var(--b-right) - 250px));display:flex;flex-direction:column;align-items:flex-end;pointer-events:none}
.vs-bubble{position:relative;flex-shrink:0;margin-top:auto;width:max-content;max-width:min(340px,100%);padding:10px 12px 7px;background:var(--ss-parch-bg,#f3e3bd);color:var(--ss-parch-ink,#3a220f);border:2.5px solid var(--ss-ink,#2b1709);border-radius:16px;box-shadow:0 3px 0 var(--ss-ink,#2b1709),0 8px 18px #0007;transform-origin:88% 118%;pointer-events:none}
.vs-bubble:before,.vs-bubble:after{content:'';position:absolute;top:100%;border-style:solid}
.vs-bubble:before{right:clamp(10px,calc(100cqw - var(--b-right) - var(--keeper-x) + var(--fig) * .03 - 9px),calc(100% - 26px));border-width:14px 2px 0 11px;border-color:var(--ss-ink,#2b1709) transparent transparent transparent}
.vs-bubble:after{right:clamp(13px,calc(100cqw - var(--b-right) - var(--keeper-x) + var(--fig) * .03 - 6px),calc(100% - 23px));margin-top:-1px;border-width:9px 1px 0 7px;border-color:#ecd7a8 transparent transparent transparent}
.vs-tag{position:absolute;top:-12px;right:12px;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:1px 8px 2px;border:2px solid var(--ss-ink,#2b1709);border-radius:9px;background:linear-gradient(#fff4,#0000 60%),var(--accent,#b86f35);color:#fff;text-shadow:var(--ss-outline-sm,0 1px 0 #2b1709);box-shadow:0 2px 0 var(--ss-ink,#2b1709);font:400 12px/1.25 var(--ss-font-display,'Lilita One',sans-serif);letter-spacing:.02em}
.vs-bubble p{margin:0;font:700 13.5px/1.3 var(--font,'DM Sans',sans-serif);color:var(--ss-parch-ink,#3a220f);text-align:left;overflow-wrap:anywhere}
@media (max-height:700px),(max-width:380px){.vs-bubble{padding:9px 11px 6px}.vs-bubble p{font-size:12.5px;line-height:1.25}}
/* The action chip for the piece on show rides in the heading, in place of the title (still there for screen readers and
   focus), so it never covers the gladiator being dressed. */
.venue-heading.vs-chipped>div:not(.vs-chip){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.venue-heading.vs-chipped>.venue-symbol{display:none}
.vs-chip{flex:1;min-width:0;display:flex;justify-content:flex-end;text-shadow:none}
.vs-chip[hidden]{display:none}
.vs-chip>*{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%;padding:4px 5px 4px 11px;background:var(--ss-parch-bg,#f3e3bd);color:var(--ss-parch-ink,#3a220f);border:2px solid var(--ss-ink,#2b1709);border-radius:14px;box-shadow:0 3px 0 var(--ss-ink,#2b1709),0 8px 16px #0008}
.vs-chip b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 13px/1.2 var(--ss-font-display,'Lilita One',sans-serif);letter-spacing:.02em;color:var(--ss-parch-ink,#3a220f)}
.vs-chip button{flex-shrink:0;min-height:40px;margin:0;padding:6px 11px;font-size:13px;white-space:nowrap}
.vs-chip button .icon{width:16px;height:16px}
/* Ambient life: flickering fire and candle glows, rising embers and magic motes, dust drifting in the light. Transform and
   opacity only; the phase follows the page clock so repaints never restart them. */
.vs-fx i{position:absolute;display:block}
.vs-glow{aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,var(--c),transparent);opacity:.5;animation:vs-flicker 2.4s ease-in-out infinite alternate;animation-delay:calc(var(--vs-t) + var(--d,0s))}
.vs-ember,.vs-mote,.vs-dust{border-radius:50%;opacity:0;animation-delay:calc(var(--vs-t) + var(--d,0s));animation-iteration-count:infinite}
.vs-ember{width:4px;height:4px;margin:-2px;background:#ffd98a;box-shadow:0 0 5px 2px #ff8a2acc;animation-name:vs-rise;animation-duration:3.3s;animation-timing-function:linear}
.vs-mote{width:7px;height:7px;margin:-3.5px;background:radial-gradient(circle,#fff 0 22%,#d9b3ff 40%,#b77cff00 72%);animation-name:vs-float;animation-duration:5.6s;animation-timing-function:ease-in-out}
.vs-dust{width:3px;height:3px;margin:-1.5px;background:#fff1c8;box-shadow:0 0 4px #fff1c8aa;animation-name:vs-drift;animation-duration:9.5s;animation-timing-function:ease-in-out}
@keyframes vs-flicker{0%{opacity:.4;transform:scale(1)}30%{opacity:.66;transform:scale(1.06)}55%{opacity:.46}78%{opacity:.72;transform:scale(1.03)}100%{opacity:.52;transform:scale(.97)}}
@keyframes vs-rise{0%{transform:translate(0,0) scale(1);opacity:0}12%{opacity:1}100%{transform:translate(var(--dx,0),-15cqh) scale(.3);opacity:0}}
@keyframes vs-float{0%{transform:translate(0,0) scale(.6);opacity:0}25%{opacity:1}55%{transform:translate(var(--dx,0),-6cqh) scale(1.1)}80%{opacity:.8}100%{transform:translate(calc(var(--dx,0px) * -.5),-12cqh) scale(.5);opacity:0}}
@keyframes vs-drift{0%{transform:translate(0,0);opacity:0}30%{opacity:.75}70%{opacity:.55}100%{transform:translate(var(--dx,0),-5cqh);opacity:0}}
html[data-motion=off] .venue-stage :is(.vs-breath,.vs-fx i){animation:none}
html[data-motion=off] .vs-fx :is(.vs-ember,.vs-mote,.vs-dust){display:none}
/* Landscape phones and desktop: the stage stands on the left, the heading rides on it, the menus scroll on the right. */
@media (min-aspect-ratio:5/4) and (min-width:600px){
 :is(.venue-staged,.venue-stage){--stage-w:clamp(290px,44vw,640px);--stage-h:calc(100dvh - var(--vs-top));--fig:min(calc(var(--stage-h) * .74),calc(var(--stage-w) * .6));--floor:calc(var(--stage-h) * .045)}
 :is(.venue-stage-slot,.venue-stage){right:auto;bottom:0;width:var(--stage-w);height:auto}
 .venue-staged .venue-heading{right:auto;width:calc(var(--stage-w) - var(--scene-edge) - 10px)}
 .mobile-app.map-app .venue-staged #main.venue-scroll{top:var(--vt);left:var(--stage-w);box-shadow:inset 14px 0 16px -12px #000c}
 .vs-shade{background:linear-gradient(180deg,#170a03d9 0,#170a0373 calc(var(--vs-top) - 20px),#170a0300 calc(var(--vs-top) + 26px)),linear-gradient(0deg,#140903b3 0,#14090300 16%),linear-gradient(270deg,#1409038c 0,#14090300 8%)}
 .vs-bubble{max-width:min(360px,100%)}
}
@media (min-width:1000px) and (min-height:600px){.vs-bubble p{font-size:16px}.vs-tag{font-size:14px}.vs-bubble{padding:13px 14px 10px}}
/* short portrait phones: slightly smaller figures so a two-line keeper bubble clears their heads */
@media (max-height:700px) and (max-aspect-ratio:5/4){:is(.venue-staged,.venue-stage){--fig:min(calc(var(--stage-h) * .7),48vw)}}
/* 10.19 the fold (venue-stage.js fold): on portrait screens the menus begin at the band under the heading (--vs-band) and carry a
   clear stretch on top (--vs-room, the stage's height less the band) through which the room shows; scrolling slides them up over
   the room like any list (their top edge never moves: 10.15's tuck moved it, and the list jumped under the finger), and the cast,
   scaled about the heading's foot, shrinks in step to stand on their top edge. Their backdrop is painted in their own coordinates
   (background-attachment: local), so it starts below the clear stretch and scrolls with them; --menus-bg is the colour a stuck
   bar matches (venue-panels.css). */
@media not all and (min-aspect-ratio:5/4) and (min-width:600px){
 :is(.venue-staged,.venue-stage){--vs-band:clamp(96px,14dvh,150px);--vs-room:calc(var(--stage-h) - var(--vs-band));--menus-bg:#24150b}
 .mobile-app.map-app .venue-staged #main.venue-scroll{top:calc(var(--vs-top) + var(--vs-band));box-shadow:none;background:linear-gradient(#0000 var(--vs-room),#000b var(--vs-room),#0000 calc(var(--vs-room) + 12px)) local,linear-gradient(#0000 var(--vs-room),var(--menus-bg) var(--vs-room)) local}
 .venue-staged .venue-content{padding-top:calc(var(--vs-room) + 12px)}
 .vs-cast{transform-origin:50% var(--vs-top);will-change:transform}
 .vs-say{transition:opacity .12s}
 html[data-motion=off] .vs-say{transition:none}
}