/* ── The cat companion (src/ui/pet/) ─────────────────────────────────────────
   An overlay over the play stage: transparent to input everywhere except the
   cat herself, so she never blocks a move — but she can be petted, carried
   and dropped. The engine writes positions/transforms inline; this sheet is
   the skin: shadow, speech bubble, sleep emote, dust puff. Tokens only, so
   she dresses for both themes. */

.pet-layer {
  position: absolute; inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 6;
}

.pet-layer .cat6 { position: absolute; left: 0; top: 0; cursor: pointer; pointer-events: auto; }
.pet-layer .cat6-art { position: absolute; left: 0; top: 0; }

.pet-layer .cat6-shadow {
  position: absolute; left: 0; top: -5px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, var(--shadow-ink, rgba(0, 0, 0, 0.45)), transparent 68%);
  border-radius: 50%;
  pointer-events: none;
}

/* She speaks in short beats and waits: the whole bubble is a "next" target,
   with an explicit Skip in its corner. Nothing times out. */
.pet-layer .cat6-bubble {
  position: absolute; left: 0; top: 0;
  width: max-content; max-width: 230px;
  white-space: normal; text-align: left; line-height: 1.35;
  background: var(--surface); color: var(--text);
  font-size: 12.5px; font-weight: 600;
  border: var(--hairline) solid var(--line-2);
  border-radius: 12px 12px 12px 3px;
  padding: 6px 11px 22px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  z-index: 999;
  pointer-events: auto; cursor: pointer;
}
.pet-layer .cat6-skip {
  position: absolute; right: 6px; bottom: 3px;
  padding: 2px 6px; border: none; background: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--accent);
}
.pet-layer .cat6-skip:hover { color: var(--text); }

.pet-layer .cat6-emote {
  position: absolute; left: 26px; top: 0;
  font-size: 20px; font-weight: 700; color: var(--dim);
  animation: pet-floaty 1.8s ease-in-out infinite;
  z-index: 999;
  pointer-events: none;
}
@keyframes pet-floaty { 50% { transform: translateY(-6px); } }

.pet-layer .cat6-dust { pointer-events: none; }

/* ── the one-time coach mark: "Double-tap me for menu" ───────────────────────
   A speech bubble in the pet-menu's voice, anchored above the cat, plus a
   gentle pulse ring at her feet. Shown by companion.js on a player's first
   boards only; never under the QA flag. */
.pet-layer .pet-coach {
  position: absolute; left: 0; top: 0;
  width: max-content; max-width: 210px;
  white-space: normal; line-height: 1.35;
  background: var(--surface); color: var(--text);
  font-size: 12.5px; font-weight: 600;
  border: var(--hairline) solid var(--line-2);
  border-radius: 12px 12px 12px 3px;
  padding: 7px 11px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  z-index: 999;
  pointer-events: none;
  animation: pet-coach-in 0.3s ease-out;
}
@keyframes pet-coach-in { from { opacity: 0; transform: translateY(4px); } }

.pet-layer .cat6-ring {
  position: absolute; left: 0; top: -6px;
  width: 76px; height: 30px; margin-left: -38px;
  border: 2px solid var(--accent, currentColor);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: pet-coach-ring 1.4s ease-out 3;
}
@keyframes pet-coach-ring {
  0%   { opacity: 0.65; transform: scale(0.55); }
  100% { opacity: 0;    transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .pet-layer .cat6-emote { animation: none; }
  .pet-layer .cat6-ring { animation: none; }
  .pet-layer .pet-coach { animation: none; }
}

/* ── the top-bar actions live behind the cat now ─────────────────────────────
   Once a companion has mounted (.pet-on), the grid play chromes hide their
   back / tutorial / hint buttons — the buttons STAY in the DOM (every game's
   wiring is untouched) and the cat's request menu clicks them. If the cat
   fails to load, the class never lands and the bar stays. Circuits' build
   toolbar is its own thing and keeps everything. */
.pet-on .q-chrome [data-home],
.pet-on .q-chrome [data-hint],
.pet-on .q-chrome [data-solve],
.pet-on .q-chrome [data-learn-game],
.pet-on .q-chrome [data-auto],
.pet-on .lits-chrome [data-home],
.pet-on .lits-chrome [data-hint],
.pet-on .lits-chrome [data-learn-game] { display: none; }
/* …and with every action gone the bar itself is an empty strip with a stray
   divider — collapse it. (The buttons stay in the DOM; the menu still clicks
   them. Arena match screens never mount the pet, so their chrome stands.) */
.pet-on .q-chrome, .pet-on .lits-chrome { display: none; }

/* the victory sheet borrows her (celebrate.js draws her portrait inside it) —
   the board's live cat bows out for the duration, so there's never a second
   cat sitting behind the popup */
body.vic-open .pet-layer { opacity: 0; transition: opacity 0.22s var(--ease); pointer-events: none; }

/* ── the request menu (double-tap the cat) ─────────────────────────────────── */
.pet-menu-wrap {
  position: fixed; inset: 0;
  z-index: 320;
  background: rgba(0, 0, 0, 0.28);
}
.pet-menu {
  position: absolute; left: 12px; bottom: calc(14px + var(--sab, 0px));
  width: min(330px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: var(--space-2);
  background: var(--surface);
  border: var(--hairline) solid var(--line-2);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.35);
}
.pet-menu-head { display: flex; align-items: flex-end; gap: var(--space-3); margin-bottom: var(--space-2); }
.pet-menu-cat { flex: none; display: block; }
.pet-menu-prompt {
  font-size: 14px; font-weight: 600; color: var(--text); line-height: 1.35;
  background: var(--surface-2);
  border: var(--hairline) solid var(--line);
  border-radius: 12px 12px 12px 3px;
  padding: 8px 12px;
  margin-bottom: 10px;
}
.pet-mi {
  display: flex; align-items: center; gap: var(--space-4);
  text-align: left;
  font-size: 13px; color: var(--text);
  background: var(--surface-2);
  border: var(--hairline) solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
}
.pet-mi:hover { border-color: var(--accent); }
/* each request wears its icon — a small accent chip so the list scans fast */
.pet-mi-ic {
  flex: none; width: 30px; height: 30px; display: grid; place-items: center;
  border-radius: var(--radius-sm); background: var(--surface);
  border: var(--hairline) solid var(--line); color: var(--accent);
}
.pet-mi-ic svg { width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pet-mi-t { flex: 1; min-width: 0; }