/* veryimportantmeeting.com live player counter (2026-09-28). Markup:
   <p class="vim-live vim-live--<theme>" data-live hidden><span class="vim-live__dot" aria-hidden="true"></span><span data-live-text></span></p>
   Each theme borrows the look of that page's own "Back to homepage" link and sits opposite it. */
.vim-live {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin: 0;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.vim-live[hidden] {
  display: none;
}
.vim-live__dot {
  flex: none;
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: #6fd58f;
  animation: vim-live-beat 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes vim-live-beat {
  0% { box-shadow: 0 0 0 0 rgba(111, 213, 143, 0.55); }
  70%, 100% { box-shadow: 0 0 0 0.55em rgba(111, 213, 143, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .vim-live__dot { animation: none; }
}

/* Home page: a twin of the card's "Single player" badge, top right of the card art. */
.vim-live--card {
  left: auto;
  right: 0.85rem;
  gap: 0.45em;
}

/* The Last Keep: same small pill as the menu's back link, top right of the menu panel. */
.vim-live--siege {
  position: absolute;
  top: 2cqh;
  right: 2.4cqw;
  color: var(--muted);
  font-size: 0.8em;
  font-weight: 700;
  padding: 0.6cqh 1cqw;
  background: rgba(255, 255, 255, 0.06);
}

/* Banner Frenzy: mirror of the menu's back link, top right of the screen. */
.vim-live--frenzy {
  position: absolute;
  right: calc(22 * var(--u));
  top: calc(18 * var(--u));
  font-size: 0.95em;
  color: var(--cream);
  padding: 0.3em 0.6em;
  border-radius: 0.3em;
  background: rgba(16, 32, 31, 0.55);
}

/* The King Is Missing: candle-gold dot, printer's face, top right of the title screen. */
.vim-live--king {
  position: absolute;
  top: calc(var(--u) * 10px);
  right: calc(var(--u) * 12px);
  font-family: var(--fell);
  font-style: italic;
  font-size: calc(var(--u) * 12px);
  color: var(--paper2);
}
.vim-live--king .vim-live__dot {
  background: var(--gold);
  animation-name: vim-live-candle;
}
@keyframes vim-live-candle {
  0% { box-shadow: 0 0 0 0 rgba(217, 180, 90, 0.55); }
  70%, 100% { box-shadow: 0 0 0 0.55em rgba(217, 180, 90, 0); }
}

/* Realms Divided: a line of the oak brand block, under "Medieval grand strategy". */
.vim-live--realms {
  display: flex;
  justify-content: center;
  margin-top: 12px;
  font: 700 12px var(--oak-pix, monospace);
  letter-spacing: 1px;
  color: var(--oak-ink, #2b1a0d);
}
.vim-live--realms .vim-live__dot {
  background: #2f8a4c;
  animation-name: vim-live-oak;
}
@keyframes vim-live-oak {
  0% { box-shadow: 0 0 0 0 rgba(47, 138, 76, 0.5); }
  70%, 100% { box-shadow: 0 0 0 0.55em rgba(47, 138, 76, 0); }
}