/* ================= r16: pavilion name labels =================
   The old .ag-tag lived inside the tilting diorama. It picked up the r9 glass recipe (white 3-11% and no base colour),
   lost its blur in r11, faded with the figure, got clipped by the panel and was hidden under 1080px. It read as
   transparent. Now one label lives on <body> (js/r16-labels.js) and floats over everything, readable, never
   clipped. The in-figure tag stays in the DOM as the text source (so localised names and roles are used),
   but it is not painted. Figure stacking, poses and the speech bubble are untouched. */
html.r16-labels .dio .ag .ag-tag,html.r16-labels .panel .ag .ag-tag{display:none!important}

.r16-tip{position:fixed;left:0;top:0;z-index:2147483000;pointer-events:none;
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  max-width:min(300px,calc(100vw - 16px));padding:8px 13px 9px;border-radius:13px;
  font-family:inherit;font-size:12.5px;line-height:1.3;letter-spacing:0;color:rgba(255,255,255,.82);text-align:left;
  white-space:normal;overflow-wrap:anywhere;
  /* a near-opaque glass plate: readable over sky, roofs, flowers and stone */
  background:linear-gradient(160deg,rgba(255,255,255,.13),rgba(255,255,255,.035) 48%,rgba(255,255,255,.06)),rgba(13,12,22,.94);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 0 0 1px color-mix(in srgb,var(--c,#fff) 55%,rgba(255,255,255,.12)),0 16px 32px -14px rgba(0,0,0,.95),0 2px 6px rgba(0,0,0,.35);
  opacity:0;visibility:hidden;transition:opacity .16s ease,visibility 0s linear .16s}
.r16-tip.on{opacity:1;visibility:visible;transition:opacity .16s ease,visibility 0s}
.r16-tip b{display:block;font-size:14px;font-weight:700;color:#fff;letter-spacing:-.005em}
.r16-tip .r16-role{display:block;color:rgba(255,255,255,.86)}
.r16-tip .r16-dept{display:flex;align-items:center;gap:6px;margin-top:3px;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.r16-tip .r16-dept::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--c,#3DF08A)}
/* CJK text: no faux caps spacing, a touch more line height */
.r16-tip:lang(zh) .r16-dept,.r16-tip:lang(ja) .r16-dept,.r16-tip:lang(ko) .r16-dept{letter-spacing:.04em;text-transform:none}
.r16-tip:lang(zh),.r16-tip:lang(ja),.r16-tip:lang(ko){line-height:1.4}
/* a short tick that points at the person: up when the label sits under the crew, down when above */
.r16-tip::after{content:"";position:absolute;left:var(--ax,50%);width:1px;height:7px;background:color-mix(in srgb,var(--c,#fff) 70%,transparent)}
.r16-tip[data-side="below"]::after{top:-7px}
.r16-tip[data-side="above"]::after{bottom:-7px}
.r16-tip[data-side="side"]::after{display:none}
@media (prefers-reduced-motion:reduce){.r16-tip,.r16-tip.on{transition:none}}
@media (forced-colors:active){.r16-tip{background:Canvas;color:CanvasText;border:1px solid CanvasText}.r16-tip b{color:CanvasText}}