/* ============================================================
   CZR Network: styles
   Self-contained. The only requirement is a positioned wrapper
   with a real size, for example:

     .stage { position: relative; aspect-ratio: 1 / .94; }

   Theming hooks (set on the wrapper or :root):
     --czr-net-accent       accent used by the hint pip
     --czr-net-hint-color   hint text colour
     --czr-net-hint-font    hint font stack
   ============================================================ */

.czr-net{
  display:block;
  width:100%;
  height:100%;
  touch-action:pan-y;
  cursor:grab;
}
.czr-net:active{cursor:grabbing}

.czr-net__hint{
  position:absolute;right:4px;bottom:4px;margin:0;
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--czr-net-hint-font,ui-monospace,SFMono-Regular,Menlo,monospace);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--czr-net-hint-color,#828A93);
  pointer-events:none;
  transition:opacity 600ms cubic-bezier(.16,1,.3,1);
}
.czr-net__hint.is-hidden{opacity:0}
.czr-net__hint i{
  width:5px;height:5px;border-radius:50%;
  background:var(--czr-net-accent,#FF6702);
  animation:czr-net-pip 2.4s ease-in-out infinite;
}
@keyframes czr-net-pip{
  0%,100%{opacity:.35;transform:scale(1)}
  50%{opacity:1;transform:scale(1.5)}
}

/* the hint names a pointer gesture, so it is pointless on touch */
@media (hover:none){.czr-net__hint{display:none}}
@media (prefers-reduced-motion:reduce){.czr-net__hint i{animation:none}}