/* wkx-livecount.css — the Library's live sample counter (wkx-livecount.js).
   Dark, compact, violet/cyan (never gold: gold is rewards only). */
.wlc {
  --wlc-violet: var(--wkl-violet-2, #8b5cf6);
  --wlc-violet-soft: rgba(139, 92, 246, 0.16);
  --wlc-text: var(--wkl-text, #f5f7f3);
  --wlc-muted: var(--wkl-muted, #8e93aa);
  --wlc-live: #f43f5e;
  --wlc-cyan: var(--pt-cyan, #38d6f5);
  --wlc-ok: var(--pt-success, #2dd4bf);
  display: inline-grid;
  grid-template-columns: auto;
  gap: 2px;
  min-width: 0;
  max-width: 100%;
  padding: 10px 14px 9px;
  border-radius: 14px;
  border: 1px solid rgba(139, 92, 246, 0.28);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(139, 92, 246, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01)),
    rgba(12, 12, 20, 0.82);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
  color: var(--wlc-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.wlc:hover { border-color: rgba(139, 92, 246, 0.55); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 28px rgba(76, 29, 149, 0.35); }
.wlc:active { transform: translateY(1px); }
.wlc:focus-visible { outline: 2px solid var(--wlc-violet); outline-offset: 2px; }
.wlc.wlc-stale { opacity: 0.6; }

.wlc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 18px; }
.wlc-live { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.14em; color: var(--wlc-muted); }
.wlc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--wlc-live); box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.6); animation: wlc-pulse 2s ease-out infinite; }

.wlc-badge {
  padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: #d1fae5; background: rgba(45, 212, 191, 0.16); border: 1px solid rgba(45, 212, 191, 0.4);
}
.wlc-badge-pop { animation: wlc-pop 0.36s cubic-bezier(0.2, 0.9, 0.3, 1.3); }

.wlc-num {
  display: flex; overflow: hidden; height: 1.12em; line-height: 1.12;
  font-size: clamp(26px, 3.2vw, 34px); font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, #ffffff 0%, #ddd6fe 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wlc-dig, .wlc-sep { display: inline-block; }
.wlc-sep { opacity: 0.55; }
.wlc-roll { animation: wlc-roll 0.42s cubic-bezier(0.22, 1, 0.36, 1); }

.wlc-label { font-size: 11px; color: var(--wlc-muted); letter-spacing: 0.02em; margin-top: -1px; }
.wlc-stats { font-size: 12px; color: var(--wlc-muted); white-space: normal; line-height: 1.45; }
.wlc-stats b { color: var(--wlc-text); font-weight: 600; font-variant-numeric: tabular-nums; }

.wlc-act { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-top: 2px; color: var(--wlc-ok); }
.wlc-act-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.wlc-act[data-state="importing"] { color: var(--wlc-cyan); }
.wlc-act[data-state="importing"] .wlc-act-dot { animation: wlc-blink 1.1s ease-in-out infinite; }

.wkl-live-slot { display: flex; min-width: 0; }

@keyframes wlc-pulse { 0% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(244, 63, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); } }
@keyframes wlc-roll { from { transform: translateY(70%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes wlc-pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes wlc-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

@media (max-width: 720px) {
  .wlc { width: 100%; padding: 9px 12px 8px; }
  .wkl-live-slot { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .wlc-dot, .wlc-act[data-state="importing"] .wlc-act-dot, .wlc-roll, .wlc-badge-pop { animation: none; }
}

/* the header tools row grows to hold the counter */
.wkl-head-tools:has(> .wkl-live-slot) { align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; }