/* EAI City — 3D city overlays: building labels (frosted glass pills), resident name tags. (owner: city)
   Fonts follow the UI tokens: var(--font) (Manrope) for text. Text never goes below 14px. */
.ecity {
  position: absolute; inset: 0; overflow: hidden;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; outline: none;
  background: #cdbfa6;
  --ecity-ink: #1d232b;
  --ecity-gold: #d8ae5c;
}
.ecity:focus-visible { box-shadow: inset 0 0 0 3px rgba(216, 174, 92, .7); }
.ecity-canvas { display: block; width: 100%; height: 100%; }
.ecity-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; contain: layout style; }

/* ---- building labels: small frosted pill, coloured dot, thin stem down to the building ---- */
.ecity-label {
  position: absolute; left: 0; top: 0; transform-origin: 50% 100%;
  pointer-events: auto; cursor: pointer; will-change: transform; transition: opacity .2s ease;
  display: flex; flex-direction: column; align-items: center;
  padding-bottom: 6px;
  --lift: 0px;
}
.ecity-label__pill {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px 7px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(10px) saturate(1.35); backdrop-filter: blur(10px) saturate(1.35);
  border: 1px solid rgba(255, 255, 255, .78);
  box-shadow: 0 1px 2px rgba(20, 22, 28, .14), 0 6px 18px rgba(20, 22, 28, .18);
  font: 700 15px/1.15 var(--font, "Manrope", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  letter-spacing: .005em; color: var(--ecity-ink); white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.ecity-label__dot {
  flex: none; width: 9px; height: 9px; border-radius: 50%;
  background: var(--c, #6a7d8c);
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 0 0 4px rgba(20, 22, 28, .08);
}
.ecity-label__name { padding-top: 1px; }
.ecity-label__star { display: none; color: #b8862c; font-size: 14px; line-height: 1; margin-left: -2px; }
.ecity-label__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ecity-label:not(.is-hl) .ecity-label__sr { display: none; }
/* under a HUD widget (data-city-avoid): faded out and not clickable */
.ecity-label.is-covered { opacity: 0 !important; pointer-events: none !important; }
/* stem: a hairline from the pill to the anchor point (longer when the label is lifted to avoid overlaps) */
.ecity-label__stem {
  display: block; width: 1.5px; height: calc(10px + var(--lift)); margin-top: -1px;
  background: linear-gradient(rgba(255, 255, 255, .9), rgba(255, 255, 255, .35));
  box-shadow: 0 0 2px rgba(20, 22, 28, .25);
}
.ecity-label__stem::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1.5px rgba(20, 22, 28, .18), 0 1px 3px rgba(20, 22, 28, .3);
}
.ecity-label.is-hover .ecity-label__pill,
.ecity-label:focus-visible .ecity-label__pill { transform: translateY(-2px); background: rgba(255, 255, 255, .9); box-shadow: 0 1px 2px rgba(20, 22, 28, .16), 0 10px 24px rgba(20, 22, 28, .24); }
.ecity-label:focus-visible { outline: none; }
.ecity-label:focus-visible .ecity-label__pill { box-shadow: 0 0 0 3px rgba(216, 174, 92, .8), 0 10px 24px rgba(20, 22, 28, .24); }

/* «Для тебя» (recommended): a thin gold ring with a warm glow + a small gold star */
.ecity-label.is-hl .ecity-label__pill {
  background: rgba(255, 252, 244, .84);
  box-shadow: 0 0 0 1.5px var(--ecity-gold), 0 0 16px rgba(232, 182, 92, .55), 0 6px 18px rgba(20, 22, 28, .18);
  animation: ecity-glow 3.2s ease-in-out infinite;
}
.ecity-label.is-hl .ecity-label__star { display: inline-block; }
.ecity-label.is-hl .ecity-label__stem { background: linear-gradient(rgba(240, 206, 140, .95), rgba(240, 206, 140, .4)); }
.ecity-label.is-hl .ecity-label__stem::after { background: #f3d58f; }
@keyframes ecity-glow {
  0%, 100% { box-shadow: 0 0 0 1.5px var(--ecity-gold), 0 0 12px rgba(232, 182, 92, .4), 0 6px 18px rgba(20, 22, 28, .18); }
  50% { box-shadow: 0 0 0 1.5px var(--ecity-gold), 0 0 22px rgba(232, 182, 92, .7), 0 6px 18px rgba(20, 22, 28, .18); }
}
/* phones / low and laptops / mid quality: no backdrop blur over a canvas that redraws every frame (each blurred pill is
   re-filtered per frame), a little more opaque instead; on low the recommended glow does not pulse (a repaint per frame) */
.ecity.q-low .ecity-label__pill, .ecity.q-mid .ecity-label__pill { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(255, 255, 255, .9); }
.ecity.q-low .ecity-label.is-hl .ecity-label__pill, .ecity.q-mid .ecity-label.is-hl .ecity-label__pill { background: rgba(255, 251, 240, .94); }
.ecity.q-low .ecity-label.is-hl .ecity-label__pill { animation: none; }

/* ---- name tags over the avatar and residents ---- */
.ecity-tag {
  position: absolute; left: 0; top: 0; transform-origin: 50% 100%; pointer-events: none; will-change: transform;
  padding: 4px 10px; border-radius: 999px; background: rgba(24, 27, 33, .66); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 700 14px/1.15 var(--font, "Manrope", "Nunito", system-ui, sans-serif); white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2);
}
.ecity-tag.is-me { background: rgba(255, 255, 255, .88); color: var(--ecity-ink, #1d232b); box-shadow: 0 0 0 1.5px var(--ecity-gold, #d8ae5c), 0 3px 10px rgba(0, 0, 0, .22); }
.ecity.q-low .ecity-tag, .ecity.q-mid .ecity-tag { -webkit-backdrop-filter: none; backdrop-filter: none; }

.ecity-fallback {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center;
  background: linear-gradient(170deg, #e9dcc2, #c9b694); color: #2a2620;
  font: 700 18px/1.4 var(--font, "Manrope", "Nunito", system-ui, sans-serif);
}
html.big .ecity-label__pill { font-size: 17px; padding: 8px 15px 8px 12px; }
html.big .ecity-tag { font-size: 15px; }
@media (max-width: 600px) {
  .ecity-label__pill { font-size: 14px; padding: 6px 12px 6px 10px; gap: 7px; }
  .ecity-label__dot { width: 8px; height: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .ecity-label.is-hl .ecity-label__pill { animation: none; }
  .ecity-label__pill { transition: none; }
}
/* v7.1: the big places (Сити, airport, «Нейропарк») — a slightly larger label, they stay longest when zooming out */
.ecity-label.is-major .ecity-label__pill { font-size: 16px; padding-left: 13px; padding-right: 14px; }
.ecity-label { transition: opacity .25s ease; }
/* v7.5 «Скоро открытие»: a studio under construction — a small «Скоро» tag in its label (the label still opens its screen) */
.ecity-label__soon { display: inline-flex; align-items: center; margin-left: -1px; padding: 1px 7px 1px 7px; border-radius: 6px; background: #f3e6c4; color: #6e5214; font: 800 14px/1.2 var(--font, "Manrope", system-ui, sans-serif); letter-spacing: .01em; }
.ecity-label.is-soon .ecity-label__dot { background: repeating-linear-gradient(135deg, #e0a526 0 2px, #2b2b2b 2px 4px); }
@media (max-width: 600px) { .ecity-label__soon { padding: 0 6px; } }
/* v8.7: the tooltip over a board of the city (desktop hover): what it shows now, a click opens it */
.ecity-adtip { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; display: flex; flex-direction: column; gap: 2px; max-width: 230px; padding: 8px 11px; border-radius: 10px; background: rgba(20, 26, 30, 0.92); color: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); font: 600 13px/1.3 var(--font, "Manrope", system-ui, sans-serif); }
.ecity-adtip[hidden] { display: none; }
.ecity-adtip__k { font-size: 12px; font-weight: 600; color: rgba(255, 255, 255, 0.66); }
.ecity-adtip b { font-weight: 800; font-size: 14px; }
.ecity-adtip__go { font-size: 12px; color: #f2c66a; }