.ptmon-sprite{--sprite-scale:3;display:inline-block;position:relative;width:calc(64px * var(--sprite-scale));height:calc(64px * var(--sprite-scale));flex:0 0 auto;line-height:0;overflow:visible}
.approved-egg{display:inline-block;width:220px;height:220px;background-image:url('/assets/sprites/hatch-approved-sheet-transparent.png');background-size:1100% 100%;background-position:0 0;background-repeat:no-repeat;image-rendering:pixelated;flex:0 0 auto}
.ptmon-sprite-frame{position:absolute;inset:0 auto auto 0;width:64px;height:64px;background:url('/assets/sprites/egg-hatch-v1.png') no-repeat 0 0;image-rendering:pixelated;transform:scale(var(--sprite-scale));transform-origin:0 0}
.ptmon-motion{display:inline-grid;place-items:center;position:relative;line-height:0}
.ptmon-motion-art{display:inline-block;will-change:transform}
.onboarding-egg>.ptmon-sprite{z-index:2}
.onboarding-egg .hatch-pet-layer{position:absolute;inset:0;z-index:1;display:grid;place-items:center;opacity:0;overflow:hidden}
.onboarding-egg .hatch-pet-layer>.pixel-sprite,.onboarding-egg .hatch-pet-layer>.sprite-wrap,.onboarding-egg .hatch-pet-layer .pixel-sprite{width:168px;height:168px;object-fit:contain}
.onboarding-egg[data-hatch-frame="12"] .hatch-pet-layer,.onboarding-egg[data-hatch-frame="13"] .hatch-pet-layer,.onboarding-egg[data-hatch-frame="14"] .hatch-pet-layer,.onboarding-egg[data-hatch-frame="15"] .hatch-pet-layer{opacity:1;transform:translateY(0)}
.sprite-preview-stage{display:grid;place-items:center;min-height:220px;background:#f2f5e8;border:1px solid #d8dfc9;border-radius:10px;margin:16px 0;overflow:hidden}
.sprite-family-preview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0}
.sprite-family-preview>div{min-width:0;text-align:center;padding:10px 4px;background:#f5f6f1;border:1px solid #dfe4d9;border-radius:8px}
.sprite-family-preview .sample-pet{width:88px;height:88px;max-width:100%}
.sprite-family-preview small{display:block;margin-top:7px}
@media(prefers-reduced-motion:reduce){.ptmon-motion-art{transform:none!important;will-change:auto}.onboarding-egg[data-hatch-sequence="hatch"] .hatch-pet-layer{opacity:1;transform:none}}
@media(max-width:380px){.sprite-family-preview .sample-pet{width:72px;height:72px}}