.skeleton-value,
.skeleton-block {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  color: var(--text-strong);
  filter: blur(4px);
  user-select: none;
  pointer-events: none;
  animation: skeleton-pulse 1.8s ease-in-out infinite;
}

.skeleton-value {
  display: inline-block;
  vertical-align: middle;
  white-space: nowrap;
}

.skeleton-value::after,
.skeleton-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
  animation: skeleton-sweep 1.6s ease-in-out infinite;
}

[data-theme="dark"] .skeleton-value::after,
[data-theme="dark"] .skeleton-block::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .09), transparent);
}

@keyframes skeleton-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: .55; }
  50% { opacity: .9; }
}

.flag-skeleton {
  display: inline-block;
  width: 34px;
  height: 24px;
  border-radius: 5px;
  vertical-align: middle;
  margin-right: 2px;
  background: linear-gradient(180deg, var(--accent, #3839C3) 34%, var(--surface-border) 34% 67%, var(--accent-cyan, #22d3ee) 67%);
  filter: blur(3px);
  animation: skeleton-pulse 1.8s ease-in-out infinite;
}

.chip.skeleton-block {
  height: 24px;
  border-color: transparent;
  background: var(--pill-bg, var(--surface-border));
  padding: 0 10px;
  color: var(--text-strong);
}

.map-frame-skeleton {
  width: 100%;
  aspect-ratio: 16/11;
  border-top: 1px solid var(--card-border);
  border-radius: 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 35%, rgba(56, 57, 195, .25), transparent 45%),
    radial-gradient(circle at 70% 65%, rgba(34, 211, 238, .2), transparent 50%),
    linear-gradient(0deg, var(--surface-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--surface-border) 1px, transparent 1px),
    var(--surface);
  background-size: 100% 100%, 100% 100%, 28px 28px, 28px 28px, 100% 100%;
  filter: blur(3px);
  animation: skeleton-pulse 1.8s ease-in-out infinite;
}

.map-frame-skeleton::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50% 50% 50% 0;
  background: var(--accent, #3839C3);
  transform: translate(-50%, -100%) rotate(-45deg);
}