/* Velo (SITE-33). The element keeps his resting frame's size (its bottom edge is his ground line); velo.js draws the
   current state in .velo__art, bottom-centred on whole art pixels, so a reaction never moves the layout. A placement
   positions the element with `bottom` on the edge he stands, sits or sleeps on. */
.velo {
  position: relative; display: block; flex: none;
  width: var(--velo-w, 136px); height: var(--velo-h, 176px);
  pointer-events: none;
}
.velo__art {
  position: absolute; bottom: 0; left: 0;
  background-repeat: no-repeat; image-rendering: pixelated; transform-origin: 50% 100%;
}
/* Clickable (the default): the whole frame is the hit area (always ≥ 64 × 64). */
.velo--poke { pointer-events: auto; cursor: pointer; border-radius: var(--r-sm); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.velo--poke:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

/* Pixel marks above his head: "!" (startled awake), "!!" (annoyed), a puff (the huff as he calms down). */
.velo__fx { position: absolute; bottom: 100%; margin-bottom: var(--velo-u, 2px); display: none; background: no-repeat center / 100% 100%; image-rendering: pixelated; pointer-events: none; }
.velo__fx[data-fx] { display: block; animation: velo-pop 160ms steps(1) both; }
.velo__fx[data-fx="bang"] { width: calc(4 * var(--velo-u, 2px)); height: calc(10 * var(--velo-u, 2px)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 10' shape-rendering='crispEdges'%3E%3Cpath fill='%2315130F' d='M0 0h4v1h-4zM0 1h1v1h-1zM3 1h1v1h-1zM0 2h1v1h-1zM3 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM0 5h4v1h-4zM0 7h4v1h-4zM0 8h1v1h-1zM3 8h1v1h-1zM0 9h4v1h-4z'/%3E%3Cpath fill='%23FF5A24' d='M1 1h2v1h-2zM1 2h2v1h-2zM1 3h2v1h-2zM1 4h2v1h-2zM1 8h2v1h-2z'/%3E%3C/svg%3E"); }
.velo__fx[data-fx="bangs"] { width: calc(9 * var(--velo-u, 2px)); height: calc(10 * var(--velo-u, 2px)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 10' shape-rendering='crispEdges'%3E%3Cpath fill='%2315130F' d='M0 0h4v1h-4zM5 0h4v1h-4zM0 1h1v1h-1zM3 1h1v1h-1zM5 1h1v1h-1zM8 1h1v1h-1zM0 2h1v1h-1zM3 2h1v1h-1zM5 2h1v1h-1zM8 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM5 3h1v1h-1zM8 3h1v1h-1zM0 4h1v1h-1zM3 4h1v1h-1zM5 4h1v1h-1zM8 4h1v1h-1zM0 5h4v1h-4zM5 5h4v1h-4zM0 7h4v1h-4zM5 7h4v1h-4zM0 8h1v1h-1zM3 8h1v1h-1zM5 8h1v1h-1zM8 8h1v1h-1zM0 9h4v1h-4zM5 9h4v1h-4z'/%3E%3Cpath fill='%23FF5A24' d='M1 1h2v1h-2zM6 1h2v1h-2zM1 2h2v1h-2zM6 2h2v1h-2zM1 3h2v1h-2zM6 3h2v1h-2zM1 4h2v1h-2zM6 4h2v1h-2zM1 8h2v1h-2zM6 8h2v1h-2z'/%3E%3C/svg%3E"); }
.velo__fx[data-fx="puff"] { width: calc(9 * var(--velo-u, 2px)); height: calc(5 * var(--velo-u, 2px)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23B4B3B1' d='M3 0h3v1h-3zM1 1h2v1h-2zM6 1h2v1h-2zM0 2h1v1h-1zM8 2h1v1h-1zM0 3h1v1h-1zM8 3h1v1h-1zM1 4h7v1h-7z'/%3E%3Cpath fill='white' d='M3 1h3v1h-3zM1 2h7v1h-7zM1 3h7v1h-7z'/%3E%3C/svg%3E"); }
.velo__fx[data-fx="puff"] { animation: velo-puff 900ms steps(3, jump-none) both; }
@keyframes velo-pop { from { translate: 0 var(--velo-u, 2px); } to { translate: 0 0; } }
@keyframes velo-puff { from { translate: 0 0; opacity: 1; } to { translate: calc(2 * var(--velo-u, 2px)) calc(-3 * var(--velo-u, 2px)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .velo__fx[data-fx] { animation: none; } }
:root[data-motion="reduce"] .velo__fx[data-fx] { animation: none; }