.character{position:absolute;right:0;bottom:0;z-index:3;width:clamp(155px,20vw,250px);height:78%;pointer-events:none;perspective:850px}
.character-figure{position:absolute;inset:0 0 39px;width:100%;padding:0;border:0;background:none;cursor:pointer;pointer-events:auto;transform:rotateY(var(--look-x,0deg)) rotateX(var(--look-y,0deg));transform-origin:50% 85%;transition:transform .24s ease;filter:drop-shadow(0 9px 8px #593e4433);-webkit-tap-highlight-color:transparent}
.character-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:bottom;pointer-events:none;transition:opacity .8s ease,transform .8s ease}
#characterNext{opacity:0}
.character.is-changing #characterNext{opacity:1}
.character.is-changing #characterImage{opacity:0;transform:scale(.97)}
.character-tools{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);display:flex;gap:3px;width:max-content;padding:4px;border:1px solid #c88a6f55;border-radius:22px;background:#fff8edeb;box-shadow:0 3px 12px #704d3a12;pointer-events:auto}
.character-tools button,.character-outfits button{font:inherit;font-size:11px;white-space:nowrap;border:0;border-radius:15px;background:none;color:#704137;padding:6px 7px;cursor:pointer;min-height:30px}
.character-tools button:hover,.character-outfits button:hover,.character-outfits [aria-pressed=true]{background:#f1ddd0;color:#8f332e}
.character button:focus-visible{outline:2px solid #a43f36;outline-offset:3px}
.character-speech{position:absolute;right:10%;top:0;max-width:190px;margin:0;padding:9px 13px;border:1px solid #c88a6f44;border-radius:14px 14px 2px 14px;background:#fff9eef5;font-size:12px;line-height:1.6;color:#80513e;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
.character.is-speaking .character-speech{opacity:1;transform:translateY(0)}
.character-outfits{position:absolute;right:10px;bottom:52px;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;width:160px;border:1px solid #c88a6f55;border-radius:14px;padding:8px;background:#fff8eff5;box-shadow:0 8px 24px #704d3a22;pointer-events:auto}
.character-outfits[hidden]{display:none}
.character-outfits i{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--swatch);margin-right:4px}
.character.is-greeting .character-figure{animation:character-greet .85s ease}
.character.is-bowing .character-figure{animation:character-bow 1.2s ease}
.character-noscript{position:absolute;bottom:35px;font-size:11px}
@keyframes character-greet{25%{transform:rotate(-5deg) translateY(-7px)}65%{transform:rotate(4deg) translateY(-3px)}}
@keyframes character-bow{45%{transform:rotateX(13deg) translateY(5px) scale(.97)}}
@media(max-width:640px){
  /* 人物独占一条轻量互动栏，避免盖住可浏览的便签。 */
  .character{position:relative;order:1;inset:auto;width:100%;height:112px;pointer-events:none}
  .character-tools{left:10px;right:auto;bottom:7px;transform:none;gap:0;padding:2px}
  .character-tools button{font-size:10px;padding:5px;min-height:32px}
  .character-figure{right:6px;bottom:25px;width:100px;height:82px}
  .character-speech{left:10px;right:auto;top:12px;font-size:11px;max-width:210px;padding:7px 9px}
  .character-outfits{right:8px;bottom:45px;width:140px}
}
@media(prefers-reduced-motion:reduce){.character-figure,.character-figure img,.character-speech{transition:none}.character.is-greeting .character-figure,.character.is-bowing .character-figure{animation:none}}