/* Cosmetic pet (cqPetHtml). Sheets are 352x1696 with 32x32 cells. A pet plays one row of the sheet:
   --row (which row), --n (frames), --t (loop time). data-mood switches rows (set by js/pet-interact.js);
   with no mood it plays the idle "wash sit" loop. --s is the pixel scale. */
.cq-pet {
  --row: 36;
  --n: 9;
  --t: 0.95s;
  --iter: infinite;
  --fill: none;
  display: inline-block;
  flex: none;
  width: calc(32px * var(--s, 2));
  height: calc(32px * var(--s, 2));
  background-repeat: no-repeat;
  background-size: calc(352px * var(--s, 2)) auto;
  background-position: 0 calc(var(--row) * -32px * var(--s, 2));
  image-rendering: pixelated;
  animation: cq-pet-frames var(--t) steps(var(--n)) var(--iter) var(--fill);
}

.cq-pet--sm,
.cq-pet-wrap--sm { --s: 2; }
.cq-pet--md,
.cq-pet-wrap--md { --s: 3; }
.cq-pet--lg,
.cq-pet-wrap--lg { --s: 4; }

@keyframes cq-pet-frames {
  to { background-position-x: calc(var(--n) * -32px * var(--s, 2)); }
}

/* Reactions. yawn/wake hold their last frame (7 steps over 8 frames). */
.cq-pet[data-mood="meow"] { --row: 28; --n: 3; --t: 0.6s; --iter: 2; }
.cq-pet[data-mood="happy"] { --row: 52; --n: 4; --t: 0.8s; }
.cq-pet[data-mood="hiss"] { --row: 41; --n: 2; --t: 0.3s; }
.cq-pet[data-mood="sulk"] { --row: 43; animation: none; }
.cq-pet[data-mood="yawn"],
.cq-pet[data-mood="wake"] { --row: 32; --n: 7; --t: 1.2s; --iter: 1; --fill: forwards; }
.cq-pet[data-mood="sleep"] { --row: 16; --n: 2; --t: 2s; } /* curled up like a croissant */

/* Roaming moods (js/pet-roam.js). data-dir is the way it faces, r or l; sleep without a dir is row 14. */
.cq-pet[data-mood="walk"] { --row: 6; --n: 8; --t: 0.64s; }
.cq-pet[data-mood="walk"][data-dir="l"] { --row: 7; }
.cq-pet[data-mood="run"] { --row: 6; --n: 8; --t: 0.42s; }
.cq-pet[data-mood="run"][data-dir="l"] { --row: 7; }
.cq-pet[data-mood="leap"] {
  --row: 6;
  background-position: calc(var(--s, 2) * -64px) calc(var(--row) * -32px * var(--s, 2));
  animation: none;
}
.cq-pet[data-mood="leap"][data-dir="l"] { --row: 7; }
.cq-pet[data-mood="sleep"][data-dir="r"] { --row: 17; }
.cq-pet[data-mood="sprawl"] { --row: 19; --n: 2; --t: 2.2s; }
.cq-pet[data-mood="sprawl"][data-dir="r"] { --row: 18; }
/* Watching a friend come over: standing side-on (first paw-attack frame), still. */
.cq-pet[data-mood="look"] { --row: 46; animation: none; }
.cq-pet[data-mood="look"][data-dir="r"] { --row: 47; }
/* Nose boop: side-on, face to face, leaning in twice. */
.cq-pet[data-mood="boop"] { --row: 46; animation: cq-pet-lean-l 0.9s ease-in-out 2; }
.cq-pet[data-mood="boop"][data-dir="r"] { --row: 47; animation-name: cq-pet-lean-r; }

@keyframes cq-pet-lean-r {
  40%, 60% { transform: translateX(4px); }
}

@keyframes cq-pet-lean-l {
  40%, 60% { transform: translateX(-4px); }
}
/* Wand toy: bat it on the ground, stand and swipe up at it, or stand watching it hang high. */
.cq-pet[data-mood="pawdown"] { --row: 44; --n: 8; --t: 0.7s; --iter: 1; --fill: forwards; }
.cq-pet[data-mood="swipe"] { --row: 51; --n: 4; --t: 0.5s; --iter: 1; --fill: forwards; }
.cq-pet[data-mood="swipe"][data-dir="r"] { --row: 50; }
.cq-pet[data-mood="stand"] { --row: 52; --n: 4; --t: 0.8s; }
.cq-pet[data-mood="pounce"] { --row: 46; --n: 6; --t: 0.7s; --iter: 1; --fill: forwards; }
.cq-pet[data-mood="pounce"][data-dir="r"] { --row: 47; }
.cq-pet[data-mood="hiss"][data-dir="r"] { --row: 42; }
/* Crouched and watching the yarn: first paw-attack frame, with a little butt wiggle. */
.cq-pet[data-mood="ready"] { --row: 46; animation: cq-pet-wiggle 0.5s steps(2) infinite; }
.cq-pet[data-mood="ready"][data-dir="r"] { --row: 47; }

@keyframes cq-pet-wiggle {
  50% { transform: translateX(1px); }
}

/* Interactive pet: a button around the sprite plus an effects layer (bubble, hearts, z's). */
.cq-pet-wrap {
  position: relative;
  display: inline-flex;
  flex: none;
}

.cq-pet-btn {
  padding: 0;
  line-height: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  transform-origin: 50% 85%;
}

.cq-pet-btn:focus-visible {
  outline: 2px solid var(--btn-gold);
  outline-offset: 2px;
}

.cq-pet-btn.is-bump { animation: cq-pet-squash 0.25s ease-out; }

@keyframes cq-pet-squash {
  0% { transform: scale(1, 1); }
  35% { transform: scale(1.08, 0.9); }
  100% { transform: scale(1, 1); }
}

.cq-pet-fx {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cq-pet-bubble {
  position: absolute;
  left: 50%;
  bottom: calc(var(--s, 2) * 25px);
  z-index: 5;
  padding: 4px 10px;
  color: var(--text-dark);
  background: var(--text-main);
  font-family: var(--font-pixel);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  transform: translateX(-50%);
  animation: cq-pet-pop 0.18s ease-out;
}

.cq-pet-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  background: inherit;
  transform: rotate(45deg);
}

@keyframes cq-pet-pop {
  from { opacity: 0; transform: translate(-50%, 6px) scale(0.85); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

.cq-pet-heart {
  position: absolute;
  bottom: calc(var(--s, 2) * 14px);
  width: calc(var(--s, 2) * 7px);
  height: calc(var(--s, 2) * 6px);
  opacity: 0;
  animation: cq-pet-rise 1.6s ease-out forwards;
}

@keyframes cq-pet-rise {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translateY(calc(var(--s, 2) * -22px)); opacity: 0; }
}

.cq-pet-z {
  position: absolute;
  bottom: calc(var(--s, 2) * 14px);
  color: var(--arcane);
  font-family: var(--font-pixel);
  font-size: calc(var(--s, 2) * 5px + 4px);
  opacity: 0;
  animation: cq-pet-zfloat 2.4s linear infinite;
}

@keyframes cq-pet-zfloat {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(calc(var(--s, 2) * 4px), calc(var(--s, 2) * -12px)); opacity: 0; }
}

/* A bed of equipped pets (dashboard pet row, Arcade den): they overlap a little on one cushion.
   The cushion top is where the paws rest (73 px down a 96 px md cell); js/pet-roam.js uses the same line. */
.cq-pet-bed {
  position: relative;
  display: inline-flex;
  flex: none;
}

.cq-pet-bed .cq-pet-wrap + .cq-pet-wrap { margin-left: -40px; }

.cq-pet-cushion {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 73px;
  height: 8px;
  background: #2b3358;
  box-shadow: inset 0 3px 0 #3d4778;
}

/* Roaming pet (js/pet-roam.js): one layer over the page, in document coordinates. Only the cats and the
   yarn yard take clicks, so nothing underneath is blocked. */
.cq-roam-layer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 50;
  width: 0;
  height: 0;
  pointer-events: none;
}

.cq-roamer {
  position: absolute;
  left: 0;
  top: 0;
  width: 96px;
  height: 96px;
  will-change: transform;
}

.cq-roamer .cq-pet {
  position: absolute;
  left: 0;
  top: 0;
}

.cq-roamer .cq-pet-btn {
  position: absolute;
  left: 20px;
  top: 13px;
  width: 56px;
  height: 62px;
  pointer-events: auto;
}

.cq-roam-yard {
  position: absolute;
  left: 0;
  top: 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  pointer-events: auto;
}

.cq-roam-yard::after {
  content: attr(data-hint);
  position: absolute;
  left: 0;
  right: 0;
  top: 8px; /* clear of the floor, where the cats walk */
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  text-align: center;
  pointer-events: none;
}

.cq-roam-yard.is-used::after,
html.cq-wand-on .cq-roam-yard::after { content: none; }

.cq-roam-yard:focus-visible {
  outline: 2px solid var(--btn-gold);
  outline-offset: -2px;
}

.cq-roam-ball {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

/* Wand toy (hold the mouse still): a rod, its string and a feather lure. Lines are drawn from their
   left middle, then rotated (js/pet-roam.js setLine). */
.cq-wand-rod,
.cq-wand-line,
.cq-wand-lure {
  position: absolute;
  left: 0;
  pointer-events: none;
}

.cq-wand-rod,
.cq-wand-line {
  transform-origin: 0 50%;
}

.cq-wand-rod {
  top: -3px;
  height: 6px;
  background: #a8743f;
  box-shadow: inset 0 2px 0 #c8955a, inset 0 -2px 0 #5a3a1c;
}

.cq-wand-line {
  top: -1px;
  height: 2px;
  background: #d7d2c4;
}

.cq-wand-lure { top: 0; }

html.cq-wand-on,
html.cq-wand-on * {
  cursor: grabbing !important;
  user-select: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .cq-pet,
  .cq-pet-btn.is-bump,
  .cq-pet-bubble { animation: none; }
  .cq-pet-heart,
  .cq-pet-z { animation: none; opacity: 1; }
}