/* The live audience map: a card over the stage's top corner, the world dark, the countries people watch from lit in
   the room's colour, a dot as big as each one's share, and hellos as new countries arrive. */
.audience-map {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 6;
  display: grid;
  gap: 6px;
  width: min(360px, 46%);
  padding: 10px 12px;
  border-radius: 14px;
  background: rgb(20 22 28 / 84%);
  color: #fff;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgb(0 0 0 / 35%);
  font-size: 13px;
}

.audience-map[hidden] {
  display: none;
}

.audience-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.audience-heading button {
  padding: 2px 8px;
  font-size: 12px;
  color: #fff;
  border-color: rgb(255 255 255 / 35%);
  background: transparent;
}

.audience-world {
  width: 100%;
  height: auto;
}

.audience-world .land {
  fill: rgb(255 255 255 / 16%);
}

.audience-world .lit {
  fill: var(--brand, #d0121b);
}

.audience-world .dot {
  fill: #ffd34d;
  stroke: #fff;
  stroke-width: 2;
  opacity: 0.92;
  animation: audience-pulse 2.4s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes audience-pulse {
  50% {
    transform: scale(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .audience-world .dot {
    animation: none;
  }
}

.audience-top {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.audience-hellos {
  display: grid;
  gap: 4px;
}

.audience-hellos:empty {
  display: none;
}

.audience-hello {
  justify-self: start;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 14%);
  animation: audience-hello 0.4s ease-out;
}

@keyframes audience-hello {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* A phone: smaller, out of the way of the video's middle. */
@media (max-width: 760px) {
  .audience-map {
    top: 8px;
    left: 8px;
    width: min(240px, 62%);
    padding: 6px 8px;
    font-size: 11px;
  }
}