:root {
  --web-rng-counter-height: clamp(34px, 5.75vw, 58px);
}
#web-rng-counter {
  position: fixed;
  left: 50%;
  bottom: 4px;
  z-index: 26;
  width: min(390px, calc(100vw - 20px));
  height: var(--web-rng-counter-height);
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
  opacity: 1;
  transition: opacity 240ms ease;
  contain: layout paint size;
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.72));
}
#web-rng-counter canvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: 0;
  image-rendering: auto;
}
#web-rng-counter .web-rng-counter__a11y {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
body[data-runtime-state="loading"] #web-rng-counter {
  opacity: 0.34;
}
body #web-rng-counter[data-counter-loading] {
  opacity: 0;
}
.city-instructions {
  bottom: calc(4px + var(--web-rng-counter-height) + 3px);
}
@media (max-width: 620px) {
  :root {
    --web-rng-counter-height: 38px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #web-rng-counter {
    transition: none;
  }
}