/* ============================================================
   Pixel sprites — hand-built with box-shadow pixel art.
   1 sprite-pixel = var(--px). Each sprite is a 1px seed dot whose
   box-shadow paints the figure. Colors are flat = crisp pixels.
   ============================================================ */
:root{ --px:4px; }

.sprite{ position:relative; width:1px; height:1px; image-rendering:pixelated; }
.sprite::after{ content:""; position:absolute; width:var(--px); height:var(--px); }

/* keep a sprite's bounding box so layout reserves room */
.sprite-box{ position:relative; display:inline-block; }

/* ---------------- COIN (spinning gold) ---------------- */
.coin{ --px:4px; }
.coin::after{
  left:0; top:0; border-radius:0;
  background:#ffce4a;
  box-shadow:
    var(--px) 0 #ffe79a, calc(var(--px)*2) 0 #ffce4a,
    0 var(--px) #ffce4a, var(--px) var(--px) #fff3c4, calc(var(--px)*2) var(--px) #f5b424,
    0 calc(var(--px)*2) #ffce4a, var(--px) calc(var(--px)*2) #ffe79a, calc(var(--px)*2) calc(var(--px)*2) #e89e16,
    var(--px) calc(var(--px)*3) #f5b424;
  animation:coinflip 1.6s steps(1) infinite;
}
@keyframes coinflip{
  0%,49%{ transform:scaleX(1); }
  50%,99%{ transform:scaleX(.4); filter:brightness(.85); }
}

/* ---------------- SLIME (bobbing enemy) ---------------- */
.slime{ --px:5px; }
.slime::after{
  left:0; top:0;
  background:#57e389;
  box-shadow:
    /* row of body */
    calc(var(--px)*1) calc(var(--px)*1) #6cf0a0, calc(var(--px)*2) calc(var(--px)*1) #57e389, calc(var(--px)*3) calc(var(--px)*1) #57e389,
    calc(var(--px)*0) calc(var(--px)*2) #57e389, calc(var(--px)*1) calc(var(--px)*2) #6cf0a0, calc(var(--px)*2) calc(var(--px)*2) #57e389, calc(var(--px)*3) calc(var(--px)*2) #57e389, calc(var(--px)*4) calc(var(--px)*2) #2bb866,
    calc(var(--px)*0) calc(var(--px)*3) #2bb866, calc(var(--px)*1) calc(var(--px)*3) #05060f, calc(var(--px)*2) calc(var(--px)*3) #57e389, calc(var(--px)*3) calc(var(--px)*3) #05060f, calc(var(--px)*4) calc(var(--px)*3) #2bb866,
    calc(var(--px)*0) calc(var(--px)*4) #2bb866, calc(var(--px)*1) calc(var(--px)*4) #2bb866, calc(var(--px)*2) calc(var(--px)*4) #2bb866, calc(var(--px)*3) calc(var(--px)*4) #2bb866, calc(var(--px)*4) calc(var(--px)*4) #2bb866;
  animation:bob 1s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px) scaleY(.94); } }

/* ---------------- HERO (walking knight) ---------------- */
.hero-sprite{ --px:5px; }
.hero-sprite::after{
  left:0; top:0;
  background:transparent;
  box-shadow:
    /* helmet */
    calc(var(--px)*1) 0 #45c6ff, calc(var(--px)*2) 0 #45c6ff,
    calc(var(--px)*1) calc(var(--px)*1) #cfeeff, calc(var(--px)*2) calc(var(--px)*1) #cfeeff,
    /* face */
    calc(var(--px)*1) calc(var(--px)*2) #ffd9b0, calc(var(--px)*2) calc(var(--px)*2) #ffd9b0,
    /* body / armor */
    calc(var(--px)*0) calc(var(--px)*3) #b06bff, calc(var(--px)*1) calc(var(--px)*3) #c98bff, calc(var(--px)*2) calc(var(--px)*3) #b06bff, calc(var(--px)*3) calc(var(--px)*3) #ffce4a,
    calc(var(--px)*0) calc(var(--px)*4) #8a4fd6, calc(var(--px)*1) calc(var(--px)*4) #b06bff, calc(var(--px)*2) calc(var(--px)*4) #b06bff, calc(var(--px)*3) calc(var(--px)*4) #ffce4a,
    /* legs */
    calc(var(--px)*1) calc(var(--px)*5) #05060f, calc(var(--px)*2) calc(var(--px)*5) #05060f;
}
.hero-sprite.walk::after{ animation:walk .5s steps(2) infinite; }
@keyframes walk{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }

/* heart pixel */
.heart{ --px:4px; }
.heart::after{
  left:0; top:0; background:transparent;
  box-shadow:
    0 0 #ff5d72, calc(var(--px)*2) 0 #ff5d72,
    calc(var(--px)*-1) var(--px) #ff8a98, calc(var(--px)*1) var(--px) #ff5d72, calc(var(--px)*3) var(--px) #ff5d72,
    calc(var(--px)*-1) calc(var(--px)*2) #ff5d72, 0 calc(var(--px)*2) #ff5d72, var(--px) calc(var(--px)*2) #ff5d72, calc(var(--px)*2) calc(var(--px)*2) #ff5d72, calc(var(--px)*3) calc(var(--px)*2) #ff5d72,
    0 calc(var(--px)*3) #ff5d72, var(--px) calc(var(--px)*3) #ff5d72, calc(var(--px)*2) calc(var(--px)*3) #ff5d72,
    var(--px) calc(var(--px)*4) #ff5d72;
}