:root {
  --art-tiles: 1;
  --art-ball: 1;
  --art-creatures: 1;
}
.patch .grass, .meter .m-grass { background-color: transparent; background-image: url(/assets/art/tile-tall.png); background-size: calc(var(--px) * 16) calc(var(--px) * 16); background-repeat: repeat; }
.invite .sign-post { background-color: transparent; background-image: url(/assets/art/tile-sign.png); background-size: 100% 100%; }
.ball.sprite, .star.sprite, .m-ball.sprite { background-color: transparent; background-image: url(/assets/art/ball-sheet.png); background-size: calc(var(--px) * var(--bs, 32) * 18) calc(var(--px) * var(--bs, 32)); background-position: calc(var(--f, 0) * var(--px) * var(--bs, 32) * -1) 0; }
.star.sprite { --bs: 16; width: calc(var(--px) * 16); height: calc(var(--px) * 16); }
.m-ball.sprite { --bs: 8; }
.creature.sprite { background-color: transparent; background-image: url(/assets/art/creatures-sheet.png); background-size: calc(var(--px) * 32 * 8) calc(var(--px) * 32); background-position: calc((var(--c, 0) * 2 + var(--f, 0)) * var(--px) * -32) 0; }
.away .creature.sprite { width: calc(var(--px) * 16); height: calc(var(--px) * 16); background-size: calc(var(--px) * 16 * 8) calc(var(--px) * 16); background-position: calc((var(--c, 0) * 2 + var(--f, 0)) * var(--px) * -16) 0; }
.sign.sprite { background-color: transparent; background-image: url(/assets/art/route-sign.png); background-size: 100% 100%; }
.center.sprite { background-color: transparent; background-image: url(/assets/art/trap-center.png); background-size: 100% 100%; }
.frame.sprite { background-color: transparent; border: calc(var(--px) * 6) solid transparent; border-image: url(/assets/art/hall-frame.png) 6 fill / calc(var(--px) * 6) stretch; padding: 0; }
.box { clip-path: none; box-shadow: none; border: calc(var(--px) * 6) solid transparent; border-image: url(/assets/art/dialog-frame.png) 6 fill / calc(var(--px) * 6) stretch; }
.tri { border: 0; width: calc(var(--px) * 5); height: calc(var(--px) * 8); background: url(/assets/art/menu-arrow.png) 0 0 / 100% 100% no-repeat; image-rendering: pixelated; }
body { cursor: url(/assets/art/cursor-glove.png) 6 2, auto; } a, button, [role=radio], label { cursor: url(/assets/art/cursor-glove.png) 6 2, pointer; }
.s-hero .hero-ball, .patch .grass, [data-throw] { cursor: url(/assets/art/cursor-ball.png) 16 16, pointer; }
.ca { cursor: url(/assets/art/cursor-ball-open.png) 16 16, pointer; }
.lost { background: var(--grass) url(/assets/art/404.png) center / cover no-repeat; image-rendering: pixelated; } .lost .bubble { display: none; }