/* Bee mascot sprite animation.
   Sprite: 192×288px (6 rows × 4 frames, 48×48 per frame).
   Container: 48×48px. Background-size: 400% 600% (scales to 192×288px).

   CSS background-position percentage formula:
   pixel_offset = percentage × (background_size - container_size)

   Horizontal (192 - 48 = 144px offset):
     Frame 0: 0% = 0 × 144 = 0px
     Frame 1: 33.33% = 0.3333 × 144 = 48px ✓
     Frame 2: 66.67% = 0.6667 × 144 = 96px ✓
     Frame 3: 100% = 1.0 × 144 = 144px ✓

   Vertical (288 - 48 = 240px offset):
     Row 0 (IDLE):   0% = 0 × 240 = 0px
     Row 1 (FLY):   20% = 0.2 × 240 = 48px
     Row 2 (SPELL): 40% = 0.4 × 240 = 96px
     Row 3 (WALK):  60% = 0.6 × 240 = 144px
     Row 4 (HAPPY): 80% = 0.8 × 240 = 192px
     Row 5 (SAD):   100% = 1.0 × 240 = 240px
*/

#mascot {
  display: inline-block;
  width: 48px;
  height: 48px;
  cursor: pointer;
  user-select: none;
  background-image: url(/shared/mascot-bee.png?v=v4);
  background-size: 192px 288px;
  background-repeat: no-repeat;
  background-position: 0px 0px;
  overflow: hidden;
  border-radius: 4px;
  /* drop-shadow follows the sprite's own alpha silhouette instead of the
     48x48 bounding box, so it doesn't read as a square "frame" in light mode */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
  transition: transform 0.1s ease-out;
}

#mascot:hover {
  transform: scale(1.15);
}

#mascot:active {
  transform: scale(0.9);
}

/* States are managed by JavaScript frame animation in mascot.js */
/* No CSS animations - all frame cycling done via setInterval */

/* Mobile keeps the same 48px size + 192x288 sprite scale so the JS frame
   offsets (-48px steps in mascot.js) stay aligned. Do not shrink here — a
   different background-size would misalign every animation frame. */