/* Keep the character decorative, including over links and navigation. */
#lelik-track {
  --lelik-w: 77px;
  --lelik-h: 98px;
  --stop-frames: 36;
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  z-index: 31;
  visibility: hidden;
}
#lelik-track[data-hidden="false"] { visibility: visible; }
#lelik-track * { pointer-events: none; }
.lelik-distance { width: var(--lelik-w); height: var(--lelik-h); }
.lelik-heading, .lelik-figure { width: 100%; height: 100%; }
#lelik-track[data-facing="left"] .lelik-heading { transform: scaleX(-1); }
.lelik-figure { background-repeat: no-repeat; }
#lelik-track[data-hidden="false"][data-pose="run"] .lelik-figure {
  background-image: url("./lelik-run.webp");
  background-size: 2200% 100%;
  animation: lelik-stride .916667s steps(22, end) infinite;
}
#lelik-track[data-hidden="false"]:is([data-pose="stop"], [data-pose="idle"]) .lelik-figure {
  background-image: url("./lelik-stop.webp");
  background-size: calc(var(--stop-frames) * 100%) 100%;
  background-position: right center;
}
#lelik-track[data-pose="stop"] .lelik-figure {
  animation: lelik-stop 1.458333s steps(35, end) forwards;
}
#lelik-track[data-motion="paused"] .lelik-figure { animation-play-state: paused !important; }
body.nav-open #lelik-track, body:has(dialog[open]) #lelik-track { visibility: hidden; }
@keyframes lelik-stride { from { background-position-x: 0; } to { background-position-x: calc(-22 * var(--lelik-w)); } }
@keyframes lelik-stop { from { background-position-x: 0%; } to { background-position-x: 100%; } }

lelik-control { display: inline-flex; color: var(--muted); }
.lelik-menu { position: relative; }
.lelik-menu summary { display: inline-flex; gap: 5px; align-items: center; padding: 5px 7px; min-height: 30px; border: 1px solid transparent; border-radius: 6px; list-style: none; cursor: pointer; font-size: 12px; font-weight: 550; }
.lelik-menu summary::-webkit-details-marker { display: none; }
.lelik-menu summary:hover,.lelik-menu[open] summary { color: var(--brand-text); border-color: var(--brand-line); background: var(--brand-pale); }
.lelik-popover { position: absolute; right: 0; top: calc(100% + 5px); z-index: 24; min-width: 170px; padding: 9px; background: white; border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 6px 20px #26201a20; }
.lelik-caption { display: flex; align-items: center; justify-content: space-between; padding: 2px 5px 7px; gap: 10px; color: var(--ink); }
.lelik-caption small { color: var(--sub); font-size: 11px; }
.lelik-popover button { display: block; width: 100%; padding: 7px; text-align: left; font-size: 12px; border-radius: 5px; }
.lelik-popover button:hover:not(:disabled) { background: var(--brand-pale); color: var(--brand-text); }
@media(max-width:560px) {
  #lelik-track { --lelik-w: 55px; --lelik-h: 70px; }
  .lelik-menu summary { min-width: 33px; justify-content: center; }
  .lelik-menu summary span { display: none; }
}