/* The error cat (belly.js): a dialog box in the pixel font over a pixel cat,
   in the app's arcade colors. A plain file in public/, so the static error
   pages can use it too. */
@font-face {
  font-family: "Maimbrain Cat";
  src: url("/fonts/maimbrain-pixel.woff2") format("woff2");
  font-display: block;
}

.belly { display: grid; justify-items: center; gap: 16px; }

.belly-dialog {
  position: relative; box-sizing: border-box; width: min(320px, 86vw); padding: 14px 16px 26px;
  background: #22264a; color: #f4f1de; text-align: left;
  /* A 3 px border with stepped corners and a hard shadow, like the app's pixel panels. */
  box-shadow: 0 -3px 0 #f4f1de, 0 3px 0 #f4f1de, -3px 0 0 #f4f1de, 3px 0 0 #f4f1de, 6px 6px 0 #0b0c18, 3px 7px 0 #0b0c18, 7px 3px 0 #0b0c18;
}

.belly-text {
  margin: 0; font: 16px/1.5 "Maimbrain Cat", "Maimbrain Pixel", monospace; text-transform: uppercase;
  text-shadow: 2px 2px 0 #0b0c18; overflow-wrap: anywhere;
}
/* Every letter's space is there from the start; typing shows them. */
.belly-text span { visibility: hidden; }
.belly-text span.on { visibility: visible; }

.belly-heard {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.belly-next {
  position: absolute; right: 12px; bottom: 6px; font: 16px/1 "Maimbrain Cat", "Maimbrain Pixel", monospace;
  visibility: hidden;
}
.belly-dialog.done .belly-next { visibility: visible; animation: belly-blink 1.6s ease-in-out infinite; }

.belly-spot { position: relative; }
.belly-cat { display: block; width: 192px; height: 192px; image-rendering: pixelated; cursor: pointer; }
.belly-cat:focus-visible { outline: 3px solid #ffd447; outline-offset: 4px; }
/* Purring: a quick buzz, side to side. */
.belly-cat.purr { animation: belly-purr 0.07s linear infinite; }

/* Petting: hearts float up from his head and fade. */
.belly-heart {
  position: absolute; top: 12%; width: 18%; image-rendering: pixelated; pointer-events: none;
  animation: belly-heart 1.3s ease-out forwards;
}
.belly-heart-1 { left: 41%; }
.belly-heart-2 { left: 18%; animation-delay: 0.15s; opacity: 0; }
.belly-heart-3 { left: 64%; animation-delay: 0.3s; opacity: 0; }

@keyframes belly-blink { 50% { opacity: 0.4; } }
@keyframes belly-purr { 25% { transform: translate(-2px, 1px); } 75% { transform: translate(2px, 0); } }
@keyframes belly-heart {
  0% { opacity: 0; transform: translateY(10px) scale(0.6); }
  20% { opacity: 1; transform: translateY(-6px) scale(1); }
  100% { opacity: 0; transform: translateY(-64px) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .belly-dialog.done .belly-next, .belly-cat.purr { animation: none; }
  .belly-heart { animation: none; opacity: 1; transform: translateY(-24px); }
}