/* assets/liveposter.css -- THE JOIN POSTER (2026-10-29, Thursday plan PHASE 2 "join speed", item 2, web). views/live_watch.php #lw-poster:
   a blurred still of the live (or the host's photo) + the host's photo in the gold ring + "Joining X's live", over the black player until
   its first real frame; assets/liveposter.js then fades it out (the live picture fades in over the blur, nothing moves). Drawn right after
   #live-player, so every later layer of the stage (header row, chat, bubbles, gates, Be right back) paints over it. */
.lw-poster{position:absolute;inset:0;overflow:hidden;pointer-events:none;background:radial-gradient(120% 80% at 50% 32%,#2a2238 0,#141019 72%);
  opacity:1;transition:opacity .3s ease}
.lw-poster.is-out{opacity:0}
.lw-poster-bg{position:absolute;left:-8%;top:-8%;width:116%;height:116%;max-width:none;object-fit:cover;display:block;
  filter:blur(18px) brightness(.72) saturate(1.1);transform:translateZ(0)}
.lw-poster-mid{position:absolute;left:0;right:0;bottom:56%;   /* the block ENDS above the stage centre, where "Tap for sound" sits */
  display:flex;flex-direction:column;align-items:center;
  gap:12px;padding:0 16px;text-align:center}
.lw-poster-av{display:block;width:86px;height:86px;border-radius:50%;border:3px solid #f5c518;overflow:hidden;background:#1b1a22;
  box-shadow:0 0 0 8px rgba(245,197,24,.15),0 12px 28px rgba(0,0,0,.45)}
.lw-poster-av > *{width:100% !important;height:100% !important;max-width:none !important;margin:0 !important;border:0 !important;
  border-radius:50% !important;box-shadow:none !important;object-fit:cover;display:flex;align-items:center;justify-content:center;font-size:34px}
.lw-poster-tx{color:#fff;font-weight:700;font-size:14px;line-height:1.3;text-shadow:0 1px 6px rgba(0,0,0,.65);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* a room: the bubbles carry the faces (views/_live_bubbles.php), the poster is only the blurred backdrop behind them */
.live-stage:has(> .lw-bub-ssr) > .lw-poster > .lw-poster-mid{display:none}
/* p3stall 10-29 (Rob, desktop viewer after an SFU give-back: "Joining X's live", the old player's "Waiting for the stream to start..."
   and "Tap for sound" all in one spot). While the poster is up it is the only status line (it already says Joining), and Tap for sound
   sits 16 px under the Joining block (.lw-poster-mid ends at 44% of the stage), never on it. */
.live-stage:has(> .lw-poster:not(.is-out)) > .lw-wait{display:none}
.live-stage:not(.lw-roomb):not(:has(> .lw-bub-ssr)):has(> .lw-poster:not(.is-out)) > .lw-sndpill{top:calc(44% + 16px);transform:translate(-50%,0);animation:none}
@media (prefers-reduced-motion:reduce){.lw-poster{transition-duration:.15s}}

/* GUESTS ON STAGE (Rob 10-30: "the waiting for the stream to start when it's already going"): once the call's own stage (.lsfu-stage, the people's
   pictures) is on screen the old HLS player's wait message has nothing left to say, so it goes. */
.live-stage:has(.lsfu-stage) .lw-wait,.live-stage:has(.lrt-stage) .lw-wait{display:none!important}

/* GLASS ICONS IN THE MORE TILES (Rob 10-30: the glass icon sat inside the tile's own grey circle = two circles): a tile whose icon is a glass
   PNG is just that disc; "on" shows as a gold ring around it instead of the filled colour circle. */
html .lui2 .ls2-tile .ls2-tc:has(img.ls2-png){width:46px;height:46px;background:none!important;box-shadow:none!important;transition:box-shadow .25s}
html .lui2 .ls2-tile .ls2-tc img.ls2-png{width:46px;height:46px}
html .lui2 .ls2-tile[aria-pressed="true"] .ls2-tc:has(img.ls2-png){box-shadow:0 0 0 2.5px var(--ls2-accent,#f5c518)!important;border-radius:50%}

/* THE LIVE PILL ON THE JOINING AVATAR (2026-10-31, Rob in Safari: the red LIVE pill under the host's photo was cut off): the round frame clipped its own child. The frame no longer clips; the photo keeps its circle through its own radius. */
.lw-poster-av,.lw-poster-av > *{overflow:visible !important}
.lw-poster-av img,.lw-poster-av video,.lw-poster-av canvas,.lw-poster-av svg{border-radius:50%}
.lw-poster-mid{padding-bottom:6px}

/* 11-01 (Rob): the poster-icon tiles follow the smaller circles */
html .lui2 .ls2-tile .ls2-tc:has(img.ls2-png){width:36px;height:36px}
html .lui2 .ls2-tile .ls2-tc img.ls2-png{width:36px;height:36px}