/* Desk pet: lives above the page, never blocks it (only the pet itself takes pointer events). */
#pet-root { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
#pet { position: absolute; left: 0; top: 0; width: 116px; height: 150px; pointer-events: auto; touch-action: none; cursor: grab; will-change: transform; -webkit-tap-highlight-color: transparent; }
#pet.grab { cursor: grabbing; }
#pet:focus-visible, #pet-avatar:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 12px; }
#pet-rig { position: absolute; inset: 0; }
#pet-sprite { width: 100%; height: 100%; display: block; pointer-events: none; -webkit-user-drag: none; user-select: none; -webkit-user-select: none; }
#pet-shadow { position: absolute; left: 0; top: 0; width: 70px; height: 9px; border-radius: 50%; background: var(--ink); opacity: .1; pointer-events: none; }
.pet-fx { position: absolute; pointer-events: none; opacity: 0; transition: opacity .12s; }
.pet-fx.on { opacity: 1; }
#pet-pinch { left: 30px; top: -40px; width: 48px; height: 48px; }
#pet-lines { left: -26px; top: 34px; width: 168px; height: 100px; }
#pet-sweat { left: 86px; top: 14px; width: 16px; height: 21px; }
#pet-zz { left: 94px; top: 4px; font-weight: 600; font-size: 15px; color: var(--muted); }
#pet-zz span { position: absolute; opacity: 0; animation: pet-z 2.4s ease-in-out infinite; }
#pet-zz span:nth-child(2) { animation-delay: .8s; }
#pet-zz span:nth-child(3) { animation-delay: 1.6s; }
@keyframes pet-z { 0% { opacity: 0; transform: translate(0, 8px) scale(.7); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -26px) scale(1.15); } }
.pet-heart { position: absolute; color: #e0567f; font-size: 17px; line-height: 1; pointer-events: none; animation: pet-h 1.1s ease-out forwards; }
@keyframes pet-h { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 20% { opacity: 1; transform: translate(0, -6px) scale(1.1); } 100% { opacity: 0; transform: translate(var(--dx), -50px) scale(.9); } }
.pet-puff { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--muted); opacity: .35; pointer-events: none; animation: pet-p .5s ease-out forwards; }
@keyframes pet-p { to { transform: translate(var(--dx), -8px) scale(2.2); opacity: 0; } }
#pet-bf { position: absolute; left: 0; top: 0; width: 24px; height: 20px; pointer-events: none; display: none; }
#pet-bf .wl, #pet-bf .wr { transform-box: fill-box; animation: pet-flap .13s ease-in-out infinite alternate; }
#pet-bf .wl { transform-origin: 100% 50%; } #pet-bf .wr { transform-origin: 0 50%; }
@keyframes pet-flap { to { transform: scaleX(.25); } }
#pet-bubble { position: absolute; left: 0; top: 0; max-width: 220px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 6px 12px; font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .15s; }
#pet-bubble.on { opacity: 1; }
#pet-avatar { position: absolute; right: 16px; bottom: 16px; width: 56px; height: 56px; padding: 0; border-radius: 50%; border: 2px solid var(--accent); background: var(--accent-soft) center / cover no-repeat; cursor: pointer; pointer-events: auto; transform: scale(0); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
#pet-avatar.on { transform: scale(1); }
#pet-avatar:hover { transform: scale(1.07); }
#pet-hide { position: absolute; right: -4px; top: 2px; width: 24px; height: 24px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 600 14px/1 inherit; cursor: pointer; pointer-events: auto; opacity: 0; transition: opacity .15s; }
#pet:hover #pet-hide, #pet-hide:focus-visible { opacity: 1; }
@media (hover: none) { #pet-hide { opacity: .85; } }
@media (prefers-reduced-motion: reduce) { #pet-zz span, .pet-heart, .pet-puff { animation-duration: .01s; } }