/* A cell is 512px square in each of the approved 3 × 2 sprite sheets. */
.bao-character{display:inline-block;position:relative;width:var(--bao-character-size,100px);height:auto;aspect-ratio:1;max-width:100%;flex-shrink:0;font-style:normal;vertical-align:middle;line-height:0}
.bao-character>.bao-character-frame{display:block;width:100%;height:100%;aspect-ratio:1;background-size:300% 200%;background-repeat:no-repeat;background-position:var(--bao-frame-x,0%) var(--bao-frame-y,0%);background-image:url('../bao-room/assets/bun.png');transform-origin:50% 90%;animation:bao-character-float 3.8s ease-in-out infinite}
.bao-character[data-bao-form="human"]>.bao-character-frame{background-image:url('../bao-room/assets/human.png');animation-name:bao-character-breathe}
.bao-character.bao-character-still>.bao-character-frame{animation:none!important}
@keyframes bao-character-float{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
@keyframes bao-character-breathe{0%,100%{transform:scale(1)}50%{transform:translateY(-2px) scale(1.012)}}
@media(prefers-reduced-motion:reduce){.bao-character>.bao-character-frame{animation:none!important;transition:none!important}}
.brand-bao-companion>.bao-character{--bao-character-size:48px}
.bao-mascot-avatar>.bao-character{--bao-character-size:48px}
.bao-mascot-stage>.bao-character{--bao-character-size:134px;max-width:none}
.bao-about-intro>.bao-character{--bao-character-size:62px}
.bao-mascot-page .visual.bao-native-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:24px 16px 40px;min-height:540px}
.bao-native-stage>#bao-page-character{--bao-character-size:430px;max-width:100%}
.bao-page-forms{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.bao-page-forms button{font:inherit;cursor:pointer;border:1px solid #e2b27b66;border-radius:30px;padding:10px 20px;background:#1d1823;color:#f4e5e9}
.bao-page-forms button[aria-pressed="true"]{background:#d6aa73;color:#251c23}
.bao-page-forms button:focus-visible{outline:3px solid #ffd4e5;outline-offset:3px}
.bao-mascot-body .bao-mascot-stage{width:120px;min-width:120px;height:150px}
@media(max-width:600px){.bao-native-stage>#bao-page-character{--bao-character-size:320px}.bao-mascot-page .visual.bao-native-stage{min-height:390px}.bao-mascot-body .bao-mascot-stage{width:96px;min-width:96px;height:134px}.bao-mascot-stage>.bao-character{--bao-character-size:116px}}

#home-view .brand-closing-bao.bao-character{--bao-character-size:72px;width:72px;height:72px}

/* Crop the face for small identity/launcher icons; keep the stage full-body. */
.brand-bao-companion>.bao-character,.bao-mascot-avatar>.bao-character{overflow:hidden;border-radius:50%}
.brand-bao-companion>.bao-character[data-bao-form="human"]>.bao-character-frame,.bao-mascot-avatar>.bao-character[data-bao-form="human"]>.bao-character-frame{background-size:900% 600%;background-position:calc(12.5% + var(--bao-frame-col,0)*37.5%) calc(var(--bao-frame-row,0)*60%)}
.bao-support-icon.bao-character{--bao-character-size:24px;width:24px;height:24px}

.bao-mascot--tap .bao-character:not(.bao-character-still)>.bao-character-frame{animation:bao-bun-tap .46s ease-out}

/* Keep the click target fixed; only the character inside it animates. */
#bao-mascot-root .bao-mascot-launch{animation:none!important;transform:none!important}

@media(max-width:820px){
  body.bao-mobile-nav-visible #bao-mascot-root{bottom:calc(144px + env(safe-area-inset-bottom,0px))!important}
  body.bao-mobile-nav-visible #bao-mascot-panel{max-height:calc(100dvh - 220px - env(safe-area-inset-bottom,0px))}
}