/* Clanfall world labels (render layer). Palette per SPEC section 7. */
.cfr-layer, .cfr-vignette {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none; overflow: hidden; contain: layout style; z-index: 1;
}
.cfr-vignette {
  background:
    radial-gradient(125% 95% at 50% 46%, rgba(0, 0, 0, 0) 58%, rgba(20, 34, 18, 0.2) 100%),
    linear-gradient(180deg, rgba(255, 240, 200, 0.12) 0%, rgba(255, 240, 200, 0) 26%);
}
.cfr-timer, .cfr-name, .cfr-tag {
  position: absolute; left: 0; top: 0; will-change: transform; white-space: nowrap;
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}

/* upgrade / removal timer (CoC style): white outlined time over a slim framed progress bar, no box */
.cfr-timer {
  margin: 0; translate: -50% -100%;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-width: 66px; padding: 0;
  color: #fff; font: 400 13px/1 'Lilita One', 'Nunito', system-ui, sans-serif; letter-spacing: 0.03em; text-align: center;
  text-shadow:
    -1.5px -1.5px 0 #1d1710, 1.5px -1.5px 0 #1d1710, -1.5px 1.5px 0 #1d1710, 1.5px 1.5px 0 #1d1710,
    0 -2px 0 #1d1710, 0 2px 0 #1d1710, -2px 0 0 #1d1710, 2px 0 0 #1d1710, 0 3px 0 #1d1710, 0 4px 6px rgba(0, 0, 0, 0.35);
}
.cfr-timer .cfr-t { display: block; padding: 0 2px; }
.cfr-timer .cfr-bar {
  display: block; position: relative; width: 66px; height: 9px; border-radius: 5px; overflow: hidden;
  background: linear-gradient(180deg, #2b2632 0%, #3d3746 100%);
  border: 1.5px solid #15110c;
  box-shadow: 0 2px 0 rgba(21, 17, 12, 0.85), inset 0 1px 1px rgba(0, 0, 0, 0.45);
}
.cfr-timer .cfr-bar i {
  display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(180deg, #d6ff8e 0%, #8fe03f 38%, #5cb82a 72%, #45941d 100%);
  border-radius: 3px; transition: transform 0.35s linear;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.cfr-timer .cfr-bar::after {
  content: ''; position: absolute; left: 3px; right: 3px; top: 1px; height: 2px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.35); pointer-events: none;
}
.cfr-timer.cfr-done { color: #d9ff7a; }
.cfr-timer.cfr-done .cfr-t { animation: cfr-bob 0.9s ease-in-out infinite; }

/* selected building name tag: white display text with a dark outline, level in pale gold underneath */
.cfr-name {
  translate: -50% -100%; text-align: center; color: #fff;
  font: 400 17px/1 'Lilita One', 'Nunito', system-ui, sans-serif; letter-spacing: 0.025em;
  text-shadow:
    -2px -2px 0 #1d1710, 2px -2px 0 #1d1710, -2px 2px 0 #1d1710, 2px 2px 0 #1d1710,
    0 -2.5px 0 #1d1710, 0 2.5px 0 #1d1710, -2.5px 0 0 #1d1710, 2.5px 0 0 #1d1710, 0 4px 0 #1d1710, 0 6px 10px rgba(0, 0, 0, 0.35);
  animation: cfr-pop 0.22s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.cfr-name b { display: block; font-weight: 400; }
.cfr-name small {
  display: block; margin-top: 4px; color: #ffe07a;
  font: 400 12px/1 'Lilita One', 'Nunito', system-ui, sans-serif; letter-spacing: 0.04em;
}
.cfr-tag { translate: -50% -100%; }

@keyframes cfr-pop { from { opacity: 0; scale: 0.7; } to { opacity: 1; scale: 1; } }
@keyframes cfr-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -2px; } }
@media (max-width: 520px) {
  .cfr-timer { font-size: 13px; min-width: 56px; }
  .cfr-timer .cfr-bar { width: 56px; height: 8px; }
  .cfr-name { font-size: 17px; }
  .cfr-name small { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .cfr-name, .cfr-timer.cfr-done .cfr-t { animation: none; } .cfr-timer .cfr-bar i { transition: none; } }