/* Text alone is high-resolution DOM. The world and sign frames stay pixel art. */
.world-labels {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 4;
  isolation: isolate;
  font-family: MusicStagePixel11, monospace;
  font-synthesis: none;
  text-rendering: auto;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
.world-labels .world-labels__layer { position: absolute; inset: 0; pointer-events: none; }
.world-labels .world-labels__layer > div { position: absolute; box-sizing: border-box; margin: 0; pointer-events: none; }
.world-labels__name {
  z-index: 2;
  width: max-content;
  max-width: 126px;
  padding: 2px 6px 3px;
  border-radius: 0;
  background: rgb(21 25 42 / 78%);
  color: #e5deec;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: none;
}
.world-labels__name--self { color: #ffdfa0; background: rgb(39 32 37 / 86%); }
.world-labels .world-labels__bubble {
  --world-label-tail-x: 50%;
  --bubble-bg: #e2f1e9;
  --bubble-edge: #74b5a8;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 4px;
  width: max-content;
  min-width: 56px;
  max-width: 250px;
  padding: 8px 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #244a44;
  box-shadow: none;
  isolation: isolate;
}
/* A stepped silhouette and three rectangular fills leave a 2px dark rim.
   Only horizontal/vertical edges: no rounded corners or rotated diamonds. */
.world-labels .world-labels__bubble::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(var(--bubble-bg), var(--bubble-bg)) center / calc(100% - 12px) calc(100% - 4px) no-repeat,
    linear-gradient(var(--bubble-bg), var(--bubble-bg)) center / calc(100% - 8px) calc(100% - 8px) no-repeat,
    linear-gradient(var(--bubble-bg), var(--bubble-bg)) center / calc(100% - 4px) calc(100% - 12px) no-repeat,
    var(--bubble-edge);
  clip-path: polygon(4px 0, calc(100% - 4px) 0, calc(100% - 4px) 2px, calc(100% - 2px) 2px, calc(100% - 2px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 2px) calc(100% - 4px), calc(100% - 2px) calc(100% - 2px), calc(100% - 4px) calc(100% - 2px), calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 2px), 2px calc(100% - 2px), 2px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 2px 4px, 2px 2px, 4px 2px);
}
/* Each shadow is an actual 2 × 2 pixel block; the tail is never rotated. */
.world-labels .world-labels__bubble::after {
  content: "";
  position: absolute;
  left: calc(var(--world-label-tail-x) - 1px);
  top: calc(100% - 2px);
  width: 2px;
  height: 2px;
  border: 0;
  background: var(--bubble-bg);
  box-shadow:
    -4px 0 0 var(--bubble-bg), -2px 0 0 var(--bubble-bg),
    2px 0 0 var(--bubble-bg), 4px 0 0 var(--bubble-bg),
    -4px 2px 0 var(--bubble-edge), -2px 2px 0 var(--bubble-bg),
    0 2px 0 var(--bubble-bg), 2px 2px 0 var(--bubble-bg), 4px 2px 0 var(--bubble-edge),
    -2px 4px 0 var(--bubble-edge), 0 4px 0 var(--bubble-bg), 2px 4px 0 var(--bubble-edge),
    0 6px 0 var(--bubble-edge);
  transform: none;
}
.world-labels__bubble[data-role="performer"] {
  --bubble-bg: #fff0ca;
  --bubble-edge: #b88a46;
  color: #593d26;
}
.world-labels__role {
  display: block;
  padding: 1px 4px;
  border-radius: 0;
  background: #c2dfd3;
  color: #2d6357;
  font-family: MusicStagePixel9, monospace;
  font-size: 10px;
  font-weight: 400;
  line-height: 12px;
  white-space: nowrap;
}
.world-labels__bubble[data-role="performer"] .world-labels__role { background: #e7c47f; color: #604018; }
.world-labels__message {
  display: block;
  flex: 0 1 auto;
  min-height: 0;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  font-family: MusicStagePixel11, monospace;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: keep-all;
}
.world-labels .world-labels__bubble--emoji { min-width: 61px; align-items: center; }
.world-labels .world-labels__bubble--emoji .world-labels__message {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 32px;
  min-height: 32px;
  line-height: 0;
  text-align: center;
}
.pixel-emoji { display: inline-block; flex: 0 0 auto; object-fit: contain; image-rendering: pixelated; vertical-align: middle; }
.world-labels .world-labels__bubble--emoji .pixel-emoji { display: block; width: 32px; height: 32px; }
.world-labels__sign {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: transparent;
  border: 0;
  padding: 0;
  color: #f3e7c9;
  font-weight: 650;
  line-height: 1.15;
  text-align: center;
}
.world-labels__sign-text {
  display: block;
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.world-labels__sign--wrap .world-labels__sign-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: keep-all;
  text-overflow: clip;
}

/* A compact cassette and two small badges, not an info panel. This scope also
   wins over the later general pixel-font sheet. Nothing here affects the HUD. */
.world-labels .world-labels__performance {
  --tag-paper:#fff0cf; --tag-edge:#668d84;
  z-index:3; display:flex; flex-direction:column; align-items:center; gap:3px; width:max-content;
  max-width:272px; padding:0; border:0; border-radius:0;
  background:transparent; color:#334a48; box-shadow:none; isolation:isolate;
  font-family:MusicStagePixel11,monospace !important; font-size:12px;
  font-weight:400; line-height:18px; white-space:nowrap; text-align:left; overflow:visible;
}
.world-labels .world-labels__performance[data-tape="1"] { --tag-paper:#f4efd9; --tag-edge:#789493; }
.world-labels .world-labels__performance[data-tape="2"] { --tag-paper:#ffebd3; --tag-edge:#879478; }
.world-labels .world-labels__performance-main::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(var(--tag-paper),var(--tag-paper)) center / calc(100% - 2px) calc(100% - 4px) no-repeat,
    linear-gradient(var(--tag-paper),var(--tag-paper)) center / calc(100% - 4px) calc(100% - 2px) no-repeat,var(--tag-edge);
  clip-path:polygon(4px 0,calc(100% - 4px) 0,calc(100% - 4px) 2px,calc(100% - 2px) 2px,calc(100% - 2px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 2px) calc(100% - 4px),calc(100% - 2px) calc(100% - 2px),calc(100% - 4px) calc(100% - 2px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - 4px),0 calc(100% - 4px),0 4px,2px 4px,2px 2px,4px 2px);
}
.world-labels .world-labels__cassette { position:relative; display:block; flex:0 0 24px; width:24px; height:16px; }
.world-labels .world-labels__dot { display:block; flex:0 0 auto; object-fit:contain; image-rendering:pixelated; }
.world-labels .world-labels__dot--cassette { position:absolute; inset:0; width:24px; height:16px; }
.world-labels .world-labels__dot--cassette + .world-labels__dot--cassette { visibility:hidden; }
.world-labels .world-labels__performance[data-playing="true"] .world-labels__dot--cassette + .world-labels__dot--cassette { animation:world-tape-reel 1000ms steps(1,end) infinite; }
.world-labels .world-labels__performance-title { min-width:50px; flex:1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:MusicStagePixel11,monospace !important; font-size:12px; line-height:18px; }
.world-labels .world-labels__performance-metrics { display:inline-flex; flex:0 0 auto; align-items:center; gap:3px; overflow:visible; white-space:nowrap; }
.world-labels .world-labels__performance-badge { position:relative; display:inline-flex; flex:0 0 auto; align-items:center; gap:2px; padding:2px 3px; background:#d9e9d9; color:#45665d; font-family:MusicStagePixel9,monospace !important; font-size:10px; line-height:12px; font-variant-numeric:tabular-nums; }
.world-labels .world-labels__performance-badge--heart { background:#f5d7d6; color:#ac576d; }
.world-labels .world-labels__performance-value { font-family:MusicStagePixel9,monospace !important; font-size:10px; line-height:12px; }
.world-labels .world-labels__performance-badge .world-labels__dot { width:8px; height:8px; }
.world-labels .world-labels__metrics-pending { color:#7d8070; font-family:MusicStagePixel9,monospace !important; font-size:10px; line-height:12px; }
.world-labels .world-labels__performance [hidden] { display:none; }
.world-labels .world-labels__performance-badge[data-pop="a"] { animation:world-count-a 220ms steps(2,end) 1; }
.world-labels .world-labels__performance-badge[data-pop="b"] { animation:world-count-b 220ms steps(2,end) 1; }
.world-labels .world-labels__performance-badge--heart[data-spark="a"] .world-labels__dot { animation:world-heart-a 240ms steps(2,end) 1; }
.world-labels .world-labels__performance-badge--heart[data-spark="b"] .world-labels__dot { animation:world-heart-b 240ms steps(2,end) 1; }
.world-labels .world-labels__performance-badge--heart::after { content:""; position:absolute; top:0; right:2px; width:2px; height:2px; background:#d97e9a; box-shadow:-8px 2px 0 #e3b96e; opacity:0; pointer-events:none; }
.world-labels .world-labels__performance-badge--heart[data-spark="a"]::after { animation:world-confetti-a 400ms steps(2,end) 1; }
.world-labels .world-labels__performance-badge--heart[data-spark="b"]::after { animation:world-confetti-b 400ms steps(2,end) 1; }
@keyframes world-tape-reel { 0%,100%{visibility:hidden} 50%{visibility:visible} }
@keyframes world-count-a { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }
@keyframes world-count-b { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-2px)} }
@keyframes world-heart-a { 0%,100%{opacity:1;transform:translateY(0)} 50%{opacity:.5;transform:translateY(-1px)} }
@keyframes world-heart-b { 0%,100%{opacity:1;transform:translateY(0)} 50%{opacity:.5;transform:translateY(-1px)} }
@keyframes world-confetti-a { 0%{opacity:0;transform:translateY(0)} 20%{opacity:1;transform:translateY(-2px)} 70%{opacity:1;transform:translateY(-5px)} 100%{opacity:0;transform:translateY(-6px)} }
@keyframes world-confetti-b { 0%{opacity:0;transform:translateY(0)} 20%{opacity:1;transform:translateY(-2px)} 70%{opacity:1;transform:translateY(-5px)} 100%{opacity:0;transform:translateY(-6px)} }
.world-labels .world-labels__performance[data-reduced-motion="true"] *,
.world-labels .world-labels__performance[data-reduced-motion="true"] *::after { animation:none !important; }
@media (prefers-reduced-motion:reduce) {
  .world-labels .world-labels__performance *, .world-labels .world-labels__performance *::after { animation:none !important; }
}


/* Overall performance clock stays on its own row above the compact cassette. */
.world-labels .world-labels__performance-main {
 position:relative; display:flex; align-items:center; gap:5px; width:100%; max-width:272px;
 min-width:0; box-sizing:border-box; padding:4px 6px; isolation:isolate;
}
.world-labels .world-labels__performance-countdown {
 display:inline-block; align-self:center; padding:2px 6px; background:#293536e8; color:#e9ead1;
 font-family:MusicStagePixel9,monospace!important; font-size:12px; line-height:16px;
 font-weight:400; font-variant-numeric:tabular-nums; letter-spacing:0; white-space:nowrap;
}
.world-labels .world-labels__performance-countdown[data-low="true"] { color:#f1cd91; }