/* 完整人物动作帧；连接关系由每帧原画保证。 */
.pet-wrapper { position: fixed; left: 0; top: 0; width: 146px; height: 199px; z-index: 100; user-select: none; -webkit-user-select: none; }
.pet-wrapper[hidden], .pet-restore[hidden], .pet-bubble[hidden] { display: none !important; }
.pet-character { position: relative; width: 100%; height: 100%; display: block; border: 0; padding: 0; background: none; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; }
.pet-character canvas { display: none; width: 100%; height: 100%; pointer-events: none; }
.pet-fallback { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.sprites-ready .pet-character canvas { display: block; }
.sprites-ready .pet-fallback { display: none; }
.pet-wrapper[data-state="drag"] .pet-character { cursor: grabbing; }
.pet-bubble { position: absolute; right: 8px; bottom: calc(100% - 12px); width: max-content; max-width: min(220px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 17px 17px 5px 17px; color: #f8edf0; background: rgba(25,30,53,.95); border: 1px solid #f0b2c344; box-shadow: 0 8px 28px #0004; font: 13px/1.7 var(--font-ui, sans-serif); pointer-events: none; }

.pet-tools { position: absolute; left: auto; right: calc(100% - 12px); top: 50%; bottom: auto; transform: translateY(-50%); display: grid; grid-template-columns: repeat(2, max-content); white-space: nowrap; gap: 2px; border: 1px solid #f1c6d22b; padding: 3px; border-radius: 16px; background: #11182bef; opacity: 0; pointer-events: none; transition: opacity .2s; }
.pet-wrapper:hover .pet-tools, .pet-wrapper:focus-within .pet-tools { opacity: 1; pointer-events: auto; }
.pet-tools button { min-height: 30px; border: none; padding: 4px 9px; border-radius: 999px; background: transparent; color: #e9ced7; cursor: pointer; font: 11px var(--font-ui, sans-serif); }
.pet-tools button:hover { background: #ffffff12; }
.pet-restore { position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 100; padding: 10px 15px; border-radius: 999px; border: 1px solid #f0b2c355; background: #171e35ef; color: #f4d4df; cursor: pointer; }
.pet-footprint { position: fixed; width: 5px; height: 10px; border: 1px solid #bfe7e0; background: #9cddd74d; border-radius: 50% 50% 40% 40%; z-index: 65; pointer-events: none; animation: pet-print 1.7s ease-out forwards; }
@keyframes pet-print { 0% { opacity: 0; } 15% { opacity: .65; } 100% { opacity: 0; } }
.pet-character:focus-visible, .pet-tools button:focus-visible, .pet-restore:focus-visible { outline: 2px solid #f49ab6; outline-offset: 3px; border-radius: 14px; }
@media (max-width: 600px) {
  .pet-wrapper { width: 112px; height: 153px; }
  .pet-tools { opacity: 1; pointer-events: auto; }
  .pet-tools button { min-height: 34px; padding: 4px 7px; }
}
@media (prefers-reduced-motion: reduce) { .pet-footprint { display: none; } .pet-tools { transition: none; } }





.pet-tools button[aria-pressed="true"] { background: #f49ab620; color: #ffcfdf; }
.pet-response { position: fixed; z-index: 105; pointer-events: none; color: #ffd3e4; font: 24px/1 var(--font-ui); text-shadow: 0 0 12px #ef9ab9aa; animation: pet-response-in 1s ease-out forwards; }
@keyframes pet-response-in { 0% { opacity: 0; transform: translate(-50%,0) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-25px) scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .pet-response { animation: none; } }

/* Perched sprites remain above the supporting UI; standing hit area stops at the soles. */
.pet-wrapper[data-perched="stand"] .pet-character { clip-path: inset(0 0 6% 0); }
.pet-wrapper[data-perched="sit"] .pet-character { clip-path: inset(20% 0 0 0); }