/* assets/livesfu.css -- 2026-11-05 (Rob approved: instant join + bubbles always fill the stage; docs/live-mocks-20261105.html sections 1, 3, 9, 10).
   The SFU stage's own looks (assets/livesfu.js draws the bubbles inline; rova.css / livechat.css belong to other owners, so every stage rule of
   ours lives here). Printed by routes/livesfu.php livesfu_page_assets next to the SFU bundle: a page without the SFU path never loads it.
     .lsf-reserved  a seat the host reserved (people[].state 'reserved'): the avatar with a GOLD RING in its final cell, no spinner, no words
     .lsf-left      a seat still warm after a leave (state 'left', warm_until): the avatar dimmed to 35 %, so a rejoin pops back without a reflow
     .lsf-live      the first video frame landed: the picture cross-fades over the avatar (the <video> fades in 250 ms inline)
     .lsf-pip       the two-person portrait + landscape room: the landscape person as a draggable PIP (42 % wide, 16:9, radius 14, 1.5 px white border)
   Switches: k/v live_join_v2 (reserved / left) and live_pack_v2 (the PIP) -- off, livesfu.js never sets these classes. */

/* 2026-11-05 (Rob approved: instant join) RESERVED SEAT: the gold ring (over rova.css's join look), no pulse, a quiet dashed cell */
.lsfu-stage .lw-bub.lsf-reserved{background:rgba(255,255,255,.06);box-shadow:none}
.lsfu-stage .lw-bub.lsf-reserved .lw-bub-avw > .lw-bub-av{animation:none;box-shadow:0 0 0 2px #e8c25a,0 0 0 8px rgba(232,194,90,.18),0 12px 28px rgba(0,0,0,.45)}
.lsfu-stage .lw-bub.lsf-reserved .lw-bub-bg{opacity:.55}
.lsfu-stage .lw-bub.lsf-reserved > video{opacity:0 !important}

/* 2026-11-05 (Rob approved: instant join) WARM LEFT SEAT: the avatar dimmed at 35 % in its cell (the mock's "tile shrinks, audio continuous") */
.lsfu-stage .lw-bub.lsf-left{opacity:.35}
.lsfu-stage .lw-bub.lsf-left .lw-bub-ph{filter:blur(2px)}
.lsfu-stage .lw-bub.lsf-left .lw-bub-avw > .lw-bub-av{animation:none}
.lsfu-stage .lw-bub.lsf-left > video{opacity:0 !important}

/* 2026-11-05 (Rob approved: instant join) THE FIRST FRAME: the picture over the avatar, the photo under it fades */
.lsfu-stage .lw-bub.lsf-live > .lw-bub-ph{opacity:0;transition:opacity .25s ease}

/* 2026-11-05 (Rob approved: section 3) THE TWO-PERSON PIP: 1.5 px white border, radius 14 (set inline), a grip mark bottom-right, draggable */
.lsfu-stage .lw-bub.lsf-pip{box-sizing:border-box;border:1.5px solid rgba(255,255,255,.85);box-shadow:0 8px 24px rgba(0,0,0,.5);cursor:grab;-webkit-user-select:none;user-select:none}
.lsfu-stage .lw-bub.lsf-pip:active{cursor:grabbing}
.lsfu-stage .lw-bub.lsf-pip .lw-bub-nm{font-size:9px;line-height:1.2}
.lsfu-stage .lw-bub.lsf-pip::after{content:"";position:absolute;right:6px;bottom:6px;width:14px;height:14px;border-right:2px solid rgba(255,255,255,.6);border-bottom:2px solid rgba(255,255,255,.6);border-radius:3px;pointer-events:none;z-index:5}

@media (prefers-reduced-motion:reduce){ .lsfu-stage .lw-bub.lsf-live > .lw-bub-ph{transition:none} }

/* ===== 2026-11-06 (Rob, iPhone Safari 430 px, 2 people on stage): focus mini / glass buttons / name pills (livesfu.js xbSync, xcolShow, fminiSync, fnmShow) ===== */
/* THE GLASS BUTTONS: a frosted, translucent disc (backdrop blur), a soft top highlight, a shade inside the bottom edge, a soft drop shadow, no drawn
   ring; crisp SVG arrows; pressed = 0.92. Per bubble (.lw-bub > .lsf-xb, bottom-right, sized from the bubble's width --lsf-tw) only while the stage
   allows tile focus (.lsf-xok) and nothing is focused; in focus the ONE collapse button (.lsf-xcol, a child of the stage) sits in the corner. */
.lsf-xb{--xbs:clamp(30px,calc(var(--lsf-tw,240px) * .14),40px);--xbi:clamp(6px,calc(var(--lsf-tw,240px) * .035),10px);
  position:absolute;right:var(--xbi);bottom:var(--xbi);z-index:6;display:none;align-items:center;justify-content:center;box-sizing:border-box;
  width:var(--xbs);height:var(--xbs);margin:0;padding:0;border:0;border-radius:50%;color:#fff;cursor:pointer;pointer-events:auto;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
  background:radial-gradient(130% 100% at 50% 0%,rgba(255,255,255,.2) 0%,rgba(255,255,255,.06) 50%,rgba(255,255,255,0) 72%),linear-gradient(180deg,rgba(120,120,134,.34) 0%,rgba(26,26,34,.48) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(1.5) brightness(.92);backdrop-filter:blur(14px) saturate(1.5) brightness(.92);
  box-shadow:inset 0 0 12px rgba(255,255,255,.1),0 4px 12px rgba(0,0,0,.3),0 1px 3px rgba(0,0,0,.2);   /* 11-06 glass rule: no ring / hairline / top line -- fill, tint, blur, an inner glow, a soft outer shadow */
  transition:transform .15s cubic-bezier(.2,.8,.2,1),opacity .2s ease,box-shadow .2s ease}
.lsf-xb svg{width:46%;height:46%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.38));pointer-events:none}
.lsf-xb:active{transform:scale(.92);box-shadow:inset 0 0 14px rgba(255,255,255,.16),0 0 14px rgba(255,255,255,.22),0 2px 8px rgba(0,0,0,.3)}
.lsf-xb:focus-visible{outline:0;box-shadow:inset 0 0 12px rgba(255,255,255,.12),0 0 18px rgba(255,255,255,.35),0 4px 12px rgba(0,0,0,.3)}
@media (hover:hover){.lsf-xb:hover{background-color:rgba(255,255,255,.06)}}
.live-stage.lsf-xok:not(.lsf-foc) .lsfu-stage .lw-bub:not(.lsf-pbig):not(.lsf-left):not(.lsf-reserved) > .lsf-xb{display:flex}
.lsfu-stage .lw-bub[style*="opacity: 0"] > .lsf-xb{display:none!important}
/* THE COLLAPSE BUTTON (2026-11-06 PM, Rob: "it should sweep down to rest above the sfx button ... match the size and style when it drops down
   there"): the stage's own, flown by livesfu.js (left / top) to rest 10 px above the SFX circle, the same x centre; it wears the SFX circle's
   look exactly (livesoundstrip.css .lss.lss2 .lss-tog: 36 px, --ls2-gbg glass, blur 26 + saturate 1.8, the soft drop shadow, no ring) and its
   diameter (--xbs, set from the SFX circle's real size). */
.lsf-xb.lsf-xcol{--xbs:36px;display:flex;right:auto;bottom:auto;left:auto;top:auto;z-index:36;opacity:0;color:#fff;
  background:var(--ls2-gbg,rgba(26,21,15,.5));-webkit-backdrop-filter:blur(26px) saturate(1.8);backdrop-filter:blur(26px) saturate(1.8);box-shadow:0 8px 28px rgba(0,0,0,.22)}
.lsf-xb.lsf-xcol svg{width:18px;height:18px;filter:none}
.lsf-xb.lsf-xcol:active{box-shadow:0 0 14px rgba(255,255,255,.22),0 8px 28px rgba(0,0,0,.22)}
.lsf-xb.lsf-xcol[hidden]{display:none}

/* THE TWO-PERSON FOCUS MINI: the PIP look + the grab corner at its inner corner (data-c = the corner it sits in) */
.lsfu-stage .lw-bub.lsf-fmini{box-sizing:border-box;border:1.5px solid rgba(255,255,255,.85);box-shadow:0 10px 28px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);cursor:grab;-webkit-user-select:none;user-select:none}
.lsfu-stage .lw-bub.lsf-fmini:active{cursor:grabbing}
/* the grab corner: a quarter arc on the mini's own radius, 5 px in, round caps (livesfu.js rszArc draws it for the bottom-left; mirrored here) */
.lsfu-stage .lw-bub > .lsf-rsz{display:none}
.lsfu-stage .lw-bub.lsf-fmini > .lsf-rsz{display:block;position:absolute;z-index:7;min-width:34px;min-height:34px;pointer-events:auto;touch-action:none;cursor:nesw-resize;color:rgba(255,255,255,.95);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.lsfu-stage .lw-bub.lsf-fmini > .lsf-rsz svg{position:absolute;left:0;bottom:0;display:block;overflow:visible;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55));pointer-events:none}
.lsfu-stage .lw-bub.lsf-fmini[data-c="tr"] > .lsf-rsz{left:0;bottom:0}
.lsfu-stage .lw-bub.lsf-fmini[data-c="tl"] > .lsf-rsz{right:0;bottom:0;cursor:nwse-resize}
.lsfu-stage .lw-bub.lsf-fmini[data-c="tl"] > .lsf-rsz svg{left:auto;right:0;transform:scaleX(-1)}
.lsfu-stage .lw-bub.lsf-fmini[data-c="br"] > .lsf-rsz{left:0;top:0;cursor:nwse-resize}
.lsfu-stage .lw-bub.lsf-fmini[data-c="br"] > .lsf-rsz svg{bottom:auto;top:0;transform:scaleY(-1)}
.lsfu-stage .lw-bub.lsf-fmini[data-c="bl"] > .lsf-rsz{right:0;top:0}
.lsfu-stage .lw-bub.lsf-fmini[data-c="bl"] > .lsf-rsz svg{left:auto;bottom:auto;right:0;top:0;transform:scale(-1,-1)}
/* the name pill sits bottom-left: with the grab corner bottom-left (tr) it starts right of the arc */
.live-stage.lsf-foc .lsfu-stage .lw-bub.lsf-mini.is-live.lsf-fmini[data-c="tr"] > .lsf-nm{left:calc(var(--rsz-w,34px) - 2px);max-width:calc(100% - var(--rsz-w,34px) - var(--nmi))}

/* THE MINI'S NAME PILL: scales with the mini (--lsf-tw = its width, set inline), hugs the bottom-left 4-6 px in, ellipsis.
   2026-11-06 PM (Rob: the text rode high): a flex box centres the text's own line (line-height 1.2) in the pill, so an emoji / flag in the
   name (BigFknDeal's peacock) cannot push the baseline; the inner span ellipsizes. */
.lsfu-stage .lw-bub > .lsf-nm{display:none}
.live-stage.lsf-foc .lsfu-stage .lw-bub.lsf-mini.is-live > .lsf-nm{--nmi:clamp(4px,calc(var(--lsf-tw,120px) * .035),6px);display:flex;align-items:center;position:absolute;z-index:6;left:var(--nmi);bottom:var(--nmi);
  box-sizing:border-box;max-width:calc(100% - 2 * var(--nmi));height:clamp(16px,calc(var(--lsf-tw,120px) * .125),22px);
  padding:0 clamp(5px,calc(var(--lsf-tw,120px) * .045),9px);border-radius:999px;background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font:700 clamp(9px,calc(var(--lsf-tw,120px) * .062),12.5px)/1.2 -apple-system,"Segoe UI",Inter,system-ui,sans-serif;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.live-stage.lsf-foc .lsfu-stage .lw-bub.lsf-mini.is-live > .lsf-nm > span,.live-stage > .lsf-fnm > span{display:block;min-width:0;line-height:1.2;max-height:1.2em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* THE FOCUSED PERSON'S NAME: under the header, beside the Grid pill (livesfu.js fnmAt); the stage-wide name pills (app.js .lw-cchips) step aside
   while a focus shows -- they belong to the grid, and one of them sat under the composer. Text centred like the mini's (flex + the span). */
.live-stage > .lsf-fnm{position:absolute;z-index:30;display:flex;align-items:center;box-sizing:border-box;height:26px;padding:0 11px;border-radius:999px;
  background:rgba(18,16,24,.5);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 4px 14px rgba(0,0,0,.25);
  color:#fff;font:700 13px/1.2 -apple-system,"Segoe UI",Inter,system-ui,sans-serif;white-space:nowrap;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .25s ease}
.live-stage > .lsf-fnm[hidden]{display:none}
#live-stage.lsfu-on.lsf-foc > .lw-cchips{visibility:hidden}

@media (prefers-reduced-motion:reduce){ .lsf-xb,.live-stage > .lsf-fnm{transition:none!important} }

/* ===== 2026-11-06 HOST SPOTLIGHT = "HERO + STRIP" (Rob picked option A, then mock C; livesfu.js hsPlan / hsStrip / xcolAt) =====
   Glass = fill + blur + soft shadow, never a border, hairline or top highlight line (the avatar's speaking glow is exempt).
   iOS twin sizes: strip tile 90 x 120 r 18 (116 with 1-2 others); pill 11 px 600, 3 x 8 pad, r 10,
   6 px in; audio column 76, avatar 66, mic badge 24 (-3 / -3), name 11 px; glows 0 0 22 4 rgba(245,197,24,.6) (tile) / 0 0 26 6 .55 (avatar). */
/* MOCK C (2026-11-06 PM): the Host / Grid switch is gone (Rob: "doesn't fit and is useless"); the collapse button (.lsf-xcol, 36 px glass disc) sits
   inside the hero's top-right corner, 8 px from its top and right edges (livesfu.js xcolAt); the focused person's top-left name gives way to the hero's
   own name pill (bottom-left, 10 px in, the strip pill's glass). iOS twin: hero top = header pill bottom + 10, r 22 all corners, full width on a phone. */
#live-stage.lsf-hs > .lsf-fnm{display:none!important}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-hero > .lsf-nm{display:flex;align-items:center;gap:4px;position:absolute;z-index:6;left:10px;bottom:10px;box-sizing:border-box;max-width:calc(100% - 20px);
  height:auto;padding:4px 10px;border-radius:12px;background:rgba(22,22,28,.46);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 6px 22px rgba(0,0,0,.35);
  color:#fff;font:600 13px/17px Inter,-apple-system,"Segoe UI",system-ui,sans-serif;white-space:nowrap;overflow:hidden;pointer-events:none;text-shadow:none;opacity:1;visibility:visible}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-hero > .lsf-nm > span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-hero.is-talk > .lsf-nm{color:#f5c518;font-weight:700}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-hero .lw-bub-nm{display:none}
/* THE HERO: no top highlight / inner line; the per-uid crop stays (object-position inline) */
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-hero::after{display:none}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-hero{box-shadow:0 10px 30px rgba(0,0,0,.35)}
/* THE STRIP: camera tiles (sizes inline), no inner lines; the speaker = a gold glow outside the tile */
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-st::after{display:none}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-st{box-shadow:0 6px 18px rgba(0,0,0,.35)}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-st:not(.lsf-sa).is-talk{box-shadow:0 0 22px 4px rgba(245,197,24,.6)}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-st:not(.lsf-sa) > .lsf-nm{display:flex;align-items:center;gap:4px;position:absolute;z-index:6;left:6px;bottom:6px;box-sizing:border-box;max-width:calc(100% - 12px);
  height:auto;padding:3px 8px;border-radius:10px;background:rgba(22,22,28,.46);-webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 6px 22px rgba(0,0,0,.35);
  color:#fff;font:600 11px/15px Inter,-apple-system,"Segoe UI",system-ui,sans-serif;white-space:nowrap;overflow:hidden;pointer-events:none;text-shadow:none}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-st:not(.lsf-sa) > .lsf-nm > span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-st:not(.lsf-sa).is-talk > .lsf-nm{color:#f5c518;font-weight:700}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-st:not(.lsf-sa) .lw-bub-nm{display:none}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-st:not(.lsf-sa) .lw-bub-avw{width:44px}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-st > .lsf-xb{display:none!important}
/* the small gold equalizer before a speaker's name (pill and audio name) */
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-st.is-talk > .lsf-nm::before,.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-sa.is-talk .lw-bub-nm::before{content:"";flex:none;display:inline-block;width:11px;height:9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' fill='%23f5c518'%3E%3Crect x='0' y='4' width='2.5' height='8' rx='1.2'/%3E%3Crect x='4' y='0' width='2.5' height='12' rx='1.2'/%3E%3Crect x='8' y='3' width='2.5' height='9' rx='1.2'/%3E%3Crect x='11.5' y='6' width='2.5' height='6' rx='1.2'/%3E%3C/svg%3E") center/contain no-repeat}
/* AUDIO-ONLY = a 76 px column: the 66 px round avatar 14 px from the top, a 24 px glass mic badge, the name 7 px under */
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-sa{background:transparent;box-shadow:none;overflow:visible;isolation:auto;container-type:normal}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-sa::after{display:none}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-sa > .lw-bub-ph{opacity:1!important;visibility:visible!important;background:transparent;overflow:visible;justify-content:flex-start;gap:7px;padding:14px 0 0}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-sa .lw-bub-bg,.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-sa > .lsf-nm,.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-sa > video{display:none!important}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-sa .lw-bub-avw{width:66px;height:66px;transform:none!important;flex:none}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-sa .lw-bub-avw > .lw-bub-av{width:66px;height:66px;animation:none;box-shadow:none;color:#fff;font:700 20px/1 Inter,-apple-system,"Segoe UI",system-ui,sans-serif;
  background:linear-gradient(135deg,#6d5dfc,#c56cf0);transition:box-shadow .2s ease}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-sa[data-g="1"] .lw-bub-avw > .lw-bub-av{background:linear-gradient(135deg,#ff8a5b,#f5c518);color:#2a1608}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-sa[data-g="2"] .lw-bub-avw > .lw-bub-av{background:linear-gradient(135deg,#1fa38a,#5fd3f3)}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-sa[data-g="3"] .lw-bub-avw > .lw-bub-av{background:linear-gradient(135deg,#e0457b,#ff9a6b)}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-sa.is-talk .lw-bub-avw > .lw-bub-av{box-shadow:0 0 26px 6px rgba(245,197,24,.55)}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-sa .lw-bub-avw::after{content:"";position:absolute;right:-3px;bottom:-3px;z-index:2;width:24px;height:24px;border-radius:50%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f5c518' stroke-width='2.4' stroke-linecap='round'%3E%3Crect x='9' y='3' width='6' height='11' rx='3'/%3E%3Cpath d='M5 11a7 7 0 0 0 14 0M12 18v3'/%3E%3C/svg%3E") center/12px 12px no-repeat,rgba(22,22,28,.46);
  -webkit-backdrop-filter:blur(18px) saturate(150%);backdrop-filter:blur(18px) saturate(150%);box-shadow:0 6px 22px rgba(0,0,0,.35)}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-sa .lw-bub-nm{display:flex!important;align-items:center;gap:4px;max-width:76px;font:400 11px/14px Inter,-apple-system,"Segoe UI",system-ui,sans-serif;color:#e4e4ea;text-shadow:none}
.live-stage.lsf-hs .lsfu-stage .lw-bub.lsf-sa.is-talk .lw-bub-nm{color:#f5c518;font-weight:700}
/* the strip's scroller (transparent; only while the strip overflows) + the 36 px fade on its right edge */
.live-stage > .lsf-strip{position:absolute;z-index:2;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-width:none;-webkit-overflow-scrolling:touch;background:transparent}
.live-stage > .lsf-strip::-webkit-scrollbar{display:none}
.live-stage > .lsf-strip > .lsf-strip-in{height:1px}
.live-stage > .lsf-strip[hidden],.live-stage > .lsf-strip-fade[hidden]{display:none}
.live-stage > .lsf-strip-fade{position:absolute;z-index:2;width:36px;pointer-events:none;background:linear-gradient(90deg,rgba(12,11,16,0),#0c0b10);transition:opacity .2s ease}
.live-stage > .lsf-strip-fade.is-end{opacity:0}
#live-stage.lsfu-on:not(.lsf-hs) > .lsf-strip,#live-stage.lsfu-on:not(.lsf-hs) > .lsf-strip-fade{display:none}
@media (prefers-reduced-motion:reduce){ .live-stage > .lsf-strip-fade{transition:none} }
/* the chat list's band in the hero + strip = exactly from the strip line to its own bottom (livesfu.js --lsf-chat-room; livechat.css guesses 100% - people - 70) */
.live-stage.lsf-hs.lsf-cfade.lsf-cfade:not(.lc-cx):not(.lc-cm) .lc-list{max-height:var(--lsf-chat-room,34%)}
/* an ended live: the strip scroller leaves with the stage (the end card owns the box) */
.live-stage:has(> .lw-ended:not([hidden])) > :is(.lsf-strip,.lsf-strip-fade,.lsf-fnm){display:none!important}