/* 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__role[hidden] { display: none; }
.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; }

/* Scenery sign text uses the bundled Galmuri pixel faces (fonts/pixel-font.css), kept crisp.
   Venue titles (variant 'venue') are a step larger and softer with a 1px drop shadow. */
.world-labels .world-labels__sign .world-labels__sign-text {
  font-family: MusicStagePixel11, var(--music-pixel-font, monospace);
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: none;
  letter-spacing: 0;
}
.world-labels .world-labels__sign--venue .world-labels__sign-text {
  letter-spacing: .02em;
  padding-bottom: 1px;
  text-shadow: 1px 1px 0 rgba(12, 8, 22, .9);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ad copy: never clip the tops of glyphs; the box only positions the line. */
.world-labels .world-labels__sign--ad { overflow: visible; align-items: center; }
.world-labels .world-labels__sign--ad .world-labels__sign-text { overflow: visible; text-overflow: clip; line-height: 1.45; padding: 1px 0 0; }

/* Galmuri covers Hangul, kana and Korean hanja but not most Chinese characters.
   Chinese UIs render scenery text in the system CJK face so no glyph falls back unevenly. */
html[lang^="zh"] .world-labels .world-labels__sign .world-labels__sign-text {
  font-family: "PingFang SC","PingFang TC","Hiragino Sans GB","Noto Sans SC","Noto Sans TC","Microsoft YaHei","Microsoft JhengHei",sans-serif !important;
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
}

/* Titles: "Lv.N" + equipped title chip (tier colours come from titles.js via CSS vars). */
.world-labels .world-labels__name-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.world-labels .world-labels__name--titled { display: flex; align-items: center; justify-content: center; gap: 4px; }
.world-labels .world-labels__name--titled .world-labels__name-text { flex: 0 1 auto; min-width: 0; }
.world-labels .world-labels__title-chip {
  --tier-color:#e7c98f; --tier-bg:#2a2538; --tier-border:#a98ca4;
  display: inline-block; flex: 0 1 auto; min-width: 0; max-width: 84px; box-sizing: border-box;
  padding: 0 3px; border: 1px solid var(--tier-border); border-radius: 0;
  background: var(--tier-bg); color: var(--tier-color);
  font-family: MusicStagePixel9, monospace !important; font-size: 10px; line-height: 12px; font-weight: 400;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.world-labels .world-labels__title-chip[hidden] { display: none; }
.world-labels .world-labels__title-chip[data-tier="S"], .world-labels .world-labels__title-chip[data-tier="SS"] { box-shadow: 1px 1px 0 var(--tier-border); }
.world-labels .world-labels__performer-level {
  flex: 0 0 auto; padding: 1px 3px; background: #334a48; color: #fff0cf;
  font-family: MusicStagePixel9, monospace !important; font-size: 10px; line-height: 12px; white-space: nowrap;
}
.world-labels .world-labels__title-chip--tag { flex: 0 1 auto; max-width: 84px; }
@media (max-width: 360px) {
  .world-labels .world-labels__title-chip { max-width: 64px; }
}

/* Remaining time carries the cassette; streak badge (flame) before the audience count. */
.world-labels .world-labels__performance-countdown { display:inline-flex; align-items:center; gap:4px; }
.world-labels .world-labels__performance-countdown .world-labels__cassette { display:inline-flex; transform:scale(.75); transform-origin:left center; margin-right:-5px; }
.world-labels .world-labels__performance-countdown .world-labels__cassette img + img { display:none; }
.world-labels .world-labels__performance[data-playing="true"] .world-labels__performance-countdown .world-labels__cassette img:first-child { animation:none; }
.world-labels .world-labels__performance-badge--fire { background:#ffe2c4; color:#b4542f; }
/* Name tags: crown for the heart top 3, flame + days for a 2+ day streak. */
.world-labels .world-labels__crown { width:8px; height:8px; margin-right:3px; image-rendering:pixelated; flex:0 0 auto; }
.world-labels .world-labels__streak { display:inline-flex; align-items:center; gap:1px; margin-left:4px; color:#ffcf8a; font-family:MusicStagePixel9,monospace !important; font-size:10px; line-height:12px; flex:0 0 auto; }
.world-labels .world-labels__streak img { width:8px; height:8px; image-rendering:pixelated; }
.world-labels .world-labels__crown[hidden], .world-labels .world-labels__streak[hidden] { display:none; }
/* Time of day: shop-sign lettering is neon at night, sun-faded paint by day. */
html[data-tod="morning"] .world-labels__sign:not(.world-labels__sign--ad) .world-labels__sign-text,
html[data-tod="afternoon"] .world-labels__sign:not(.world-labels__sign--ad) .world-labels__sign-text { color:color-mix(in srgb, currentColor 40%, #fff3dc); text-shadow:1px 1px 0 rgba(40,28,20,.45) !important; }
html[data-tod="dawn"] .world-labels__sign:not(.world-labels__sign--ad) .world-labels__sign-text { color:color-mix(in srgb, currentColor 70%, #e9def5); }

/* 페이퍼썬더 plea bubble (resident-bubbles.js): paper speech bubble with a small tail. */
.world-labels .world-labels__sign--bubble { overflow:visible; align-items:center; background:#fff4dc; border:2px solid #3b2d2a; box-shadow:2px 2px 0 #3b2d2a66; padding:3px 6px; border-radius:0; z-index:4; }
.world-labels .world-labels__sign--bubble::after { content:""; position:absolute; left:calc(50% - 4px); bottom:-8px; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:7px solid #3b2d2a; }
.world-labels .world-labels__sign--bubble .world-labels__sign-text { overflow:visible; text-overflow:clip; white-space:pre-wrap; line-height:1.35; font-family:MusicStagePixel9,monospace !important; font-size:10px; }
html[data-tod] .world-labels .world-labels__sign--bubble .world-labels__sign-text { color:#3b2d2a !important; text-shadow:none !important; filter:none !important; }

/* Vertical side signs (place-character.js): one upright column of glyphs. */
.world-labels .world-labels__sign--vertical { overflow:visible; align-items:center; justify-content:center; }
.world-labels .world-labels__sign--vertical .world-labels__sign-text { writing-mode:vertical-rl; text-orientation:upright; white-space:nowrap; overflow:visible; text-overflow:clip; letter-spacing:0; line-height:1; font-family:MusicStagePixel9,monospace !important; font-size:10px; }

/* Sign lettering variants (place-character.js): thin spaced boutique type, heavy bold, soft neon glow. */
.world-labels .world-labels__sign--lux .world-labels__sign-text { font-family:MusicStagePixel14,monospace !important; letter-spacing:3px; }
.world-labels .world-labels__sign--bold .world-labels__sign-text { font-family:MusicStagePixelBold,monospace !important; letter-spacing:1px; }
.world-labels .world-labels__sign--glow .world-labels__sign-text { text-shadow:0 0 4px currentColor, 0 0 8px currentColor; }