.pet-portrait-3d{--portrait-color:#ffd8a8;--portrait-color-alt:#fff0d8;--portrait-accent:#ff7a59;isolation:isolate;object-fit:contain;-webkit-user-select:none;user-select:none;place-items:center;display:grid;position:relative;overflow:visible}.pet-portrait-3d>img,.pet-portrait-tint,.pet-portrait-aura{width:100%;height:100%;position:absolute;inset:0}.pet-portrait-3d>img{z-index:2;object-fit:contain;object-position:center;pointer-events:none;display:block}.pet-portrait-aura{z-index:0;background:radial-gradient(circle, color-mix(in srgb, var(--portrait-color) 58%, white) 0 38%, color-mix(in srgb, var(--portrait-color-alt) 54%, transparent) 60%, transparent 74%);filter:blur(9px);opacity:.76;pointer-events:none;border-radius:50%;width:76%;height:76%;inset:12%;transform:scale(.92)}.pet-portrait-tint{z-index:3;background:linear-gradient(145deg, var(--portrait-color-alt), var(--portrait-color));-webkit-mask:var(--portrait-asset) center / contain no-repeat;-webkit-mask:var(--portrait-asset) center / contain no-repeat;mask:var(--portrait-asset) center / contain no-repeat;mix-blend-mode:color;opacity:0;pointer-events:none}.pet-portrait-3d.is-tinted .pet-portrait-tint{opacity:.52}.pet-portrait-3d.is-tinted.has-outfit .pet-portrait-tint{opacity:.24}.pet-portrait-3d.is-tinted .pet-portrait-aura{opacity:1;transform:scale(1)}.interactive-pet-3d{--pet-accent:#ff8f7e;--pet-body:#ffe6ba;--pet-body-alt:#fff3dd;--pet-rotate-x:0deg;--pet-rotate-y:0deg;--pet-shift-x:0px;--pet-mood-energy:1;isolation:isolate;cursor:pointer;touch-action:manipulation;perspective:900px;background:0 0;border:0;border-radius:0;width:100%;min-height:430px;position:relative;overflow:visible}.interactive-pet-3d:focus-visible{outline:4px solid color-mix(in srgb, var(--pet-accent) 40%, transparent);outline-offset:3px}.pet-portrait-stage{z-index:1;min-width:0;min-height:0;transform-style:preserve-3d;pointer-events:none;place-items:end center;display:grid;position:absolute;inset:42px 14px 12px}.interactive-pet-portrait{z-index:2;width:min(100%,450px);height:100%;max-height:376px;transform:translate3d(var(--pet-shift-x), 0, 28px) rotateX(var(--pet-rotate-x)) rotateY(var(--pet-rotate-y));transform-origin:bottom;filter:drop-shadow(0 20px 18px #412d2024)drop-shadow(0 2px 2px #ffffffb3);animation:pet-idle-float calc(3.8s / var(--pet-mood-energy)) ease-in-out infinite;will-change:transform;transition:transform .32s cubic-bezier(.22,1,.36,1)}.pet-ground-shadow{z-index:0;background:color-mix(in srgb, var(--pet-body) 44%, #4b352942);filter:blur(10px);opacity:.58;transform-origin:50%;width:min(54%,270px);height:18px;animation:pet-shadow-breathe calc(3.8s / var(--pet-mood-energy)) ease-in-out infinite;border-radius:50%;position:absolute;bottom:8px;left:50%;transform:translate(-50%)}.interactive-pet-3d.is-pet .interactive-pet-portrait{animation:.76s cubic-bezier(.22,1,.36,1) pet-soft-squish}.interactive-pet-3d.is-treat .interactive-pet-portrait{animation:.9s cubic-bezier(.22,1,.36,1) pet-treat-hop}.interactive-pet-3d.is-highfive .interactive-pet-portrait{animation:.9s cubic-bezier(.22,1,.36,1) pet-highfive}.interactive-pet-3d.is-dance .interactive-pet-portrait{animation:1.15s cubic-bezier(.22,1,.36,1) pet-happy-dance}.pet-3d-reaction{z-index:4;-webkit-backdrop-filter:blur(18px)saturate(165%);backdrop-filter:blur(18px)saturate(165%);max-width:calc(100% - 36px);color:var(--ink);font-family:var(--font-hand);text-align:center;pointer-events:none;background:#fffdf7c7;border:1px solid #ffffffd1;border-radius:999px;align-items:center;gap:6px;padding:9px 13px;font-size:15px;font-weight:700;line-height:1.2;display:inline-flex;position:absolute;top:6px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #2a251f14,inset 0 1px #ffffffe6}.pet-3d-reaction svg{color:var(--pet-accent);flex:none}.pet-costume-badge{z-index:4;border:1px solid color-mix(in srgb, var(--pet-accent) 28%, white);background:color-mix(in srgb, var(--pet-accent) 12%, #ffffffdb);max-width:calc(100% - 48px);color:var(--ink);font-family:var(--font-hand);pointer-events:none;border-radius:999px;align-items:center;gap:5px;padding:6px 10px;font-size:13px;font-weight:700;line-height:1;display:inline-flex;position:absolute;top:49px;left:50%;transform:translate(-50%);box-shadow:0 6px 18px #2a251f12}.interactive-pet-3d.is-compact{min-height:292px}@keyframes pet-idle-float{0%,to{translate:0;scale:1}50%{translate:0 -5px;scale:1.006}}@keyframes pet-shadow-breathe{0%,to{opacity:.58;scale:1}50%{opacity:.46;scale:.94}}@keyframes pet-soft-squish{0%,to{scale:1}32%{scale:1.025 .965}62%{scale:.988 1.018}}@keyframes pet-treat-hop{0%,to{translate:0;rotate:0deg}34%{translate:0 -18px;rotate:-2deg}58%{translate:0 -7px;rotate:2deg}}@keyframes pet-highfive{0%,to{translate:0;rotate:0deg}35%{translate:6px -9px;rotate:4deg}60%{translate:-2px -3px;rotate:-1deg}}@keyframes pet-happy-dance{0%,to{translate:0;rotate:0deg}20%{translate:-8px -7px;rotate:-4deg}42%{translate:9px -12px;rotate:5deg}64%{translate:-6px -6px;rotate:-3deg}82%{translate:4px -2px;rotate:2deg}}@media (width<=640px){.interactive-pet-3d{min-height:300px}.pet-portrait-stage{inset:40px 8px 12px}.interactive-pet-portrait{width:min(88%,278px);max-height:252px}.interactive-pet-3d.is-compact{min-height:280px}}@media (prefers-reduced-motion:reduce){.interactive-pet-portrait,.pet-ground-shadow,.interactive-pet-3d[class*=\ is-] .interactive-pet-portrait{transition:opacity .16s var(--ease-out);animation:none}}@media (prefers-reduced-transparency:reduce){.pet-3d-reaction{background:var(--paper-card);-webkit-backdrop-filter:none;backdrop-filter:none}}