/* Karakter pixel (js/pixel-sprites.js) */
.px-sprite { image-rendering: pixelated; image-rendering: crisp-edges; display: block; user-select: none; }
.px-buddy { position: relative; display: inline-flex; align-items: flex-end; justify-content: center; }
.px-buddy-say {
  position: absolute; bottom: 100%; left: 50%; transform: translate(-50%, 0) scale(.6); opacity: 0; z-index: 3;
  background: #fff; color: #111827; font: 800 12px/1 Inter, system-ui, sans-serif; padding: 5px 8px; border-radius: 6px;
  white-space: nowrap; pointer-events: none; box-shadow: 0 2px 0 #1b1b2f; transition: transform .15s, opacity .15s;
}
.px-buddy.is-good .px-buddy-say, .px-buddy.is-bad .px-buddy-say { opacity: 1; transform: translate(-50%, -6px) scale(1); }
.px-buddy.is-bad .px-buddy-say { background: #fee2e2; }
.px-buddy.is-good .px-sprite { animation: px-hop .5s steps(4) 2; }
.px-buddy.is-bad .px-sprite { animation: px-shake .4s steps(4); }
@keyframes px-hop { 50% { transform: translateY(-10px); } }
@keyframes px-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.hud-buddy { display: flex; align-items: flex-end; justify-content: center; align-self: end; }
@media (prefers-reduced-motion: reduce) { .px-buddy .px-sprite { animation: none !important; } }