/* Press Start 2P — pixel font used by the donkey's speech bubble. Loaded
   only here since this is the only place on the site that needs it. */
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

/* Easter-egg donkey — pixel-rendered canvas pinned to the bottom of the
   viewport, fades in/out, translated horizontally as it walks. */
.donkey {
  position: fixed;
  left: 0;
  top: auto;
  bottom: 0;
  width: 95px;     /* native sprite frame width */
  height: 96px;    /* native sprite frame height */
  pointer-events: none;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  z-index: 45;
  opacity: 0;
  transition: opacity 600ms ease;
  will-change: transform;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,0.08));
}
.donkey.show { opacity: 1; }

/* ── Donkey speech bubble ────────────────────────────────────────
   Fires once per session after the user has hovered the donkey for
   >5s AND the donkey has caught up to the cursor. Position is set
   inline from donkey.js each frame (top + left in screen coords) and
   we offset to the bubble's bottom-centre via translate, so the tail
   always points down at the donkey. */
.donkey-bubble {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  /* The buttons inside need clicks, so the bubble is interactive — but
     only while .show is applied. With opacity:0 and no .show the
     pointer-events:none rule below keeps the hidden bubble from
     swallowing clicks on the page underneath. */
  pointer-events: none;

  background: #ffffff;
  color: #1a1a2e;
  font-family: 'Press Start 2P', ui-monospace, Menlo, monospace;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0;
  padding: 14px 16px;
  max-width: 260px;
  text-align: left;
  white-space: normal;
  /* Crisp blocky border + pixel-art drop shadow (no blur). */
  border: 3px solid #1a1a2e;
  box-shadow: 4px 4px 0 0 rgba(0, 0, 0, 0.18);

  /* Anchor the bubble's BOTTOM-CENTRE to the (left, top) point set in JS
     (which is the donkey's top-centre on screen) and lift it a few px
     above the donkey's head so there's room for the tail. */
  transform: translate(-50%, -100%) translateY(-12px) scale(0.94);
  transform-origin: 50% 100%;
  opacity: 0;
  transition:
    opacity 220ms ease,
    transform 280ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.donkey-bubble.show {
  opacity: 1;
  transform: translate(-50%, -100%) translateY(-14px) scale(1);
  pointer-events: auto;
}

.donkey-bubble-buttons {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}
.donkey-bubble-btn {
  font-family: inherit;
  font-size: 10px;
  line-height: 1;
  padding: 7px 12px;
  background: #1a1a2e;
  color: #ffffff;
  border: 2px solid #1a1a2e;
  border-radius: 0;
  box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.18);
  cursor: pointer;
  text-transform: lowercase;
  transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}
.donkey-bubble-btn:hover {
  background: #ffffff;
  color: #1a1a2e;
}
.donkey-bubble-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.18);
}

/* Pixel-art tail: a small square rotated 45° with two sides borrowing
   the bubble's border. Sits centred under the bubble pointing down. */
.donkey-bubble::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  width: 14px;
  height: 14px;
  background: #ffffff;
  border-right: 3px solid #1a1a2e;
  border-bottom: 3px solid #1a1a2e;
  transform: translateX(-50%) rotate(45deg);
}