/* Shared, compact controls. Art stays in document flow and never covers tools. */
.character-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;padding-top:12px;border-top:1px solid #b2ccdf22;font:inherit;color:#a7bac9}
.character-size-control{display:flex;align-items:center;gap:10px;font-size:11px!important;white-space:nowrap}.character-size-control select{font:inherit!important;font-size:11px!important;min-height:44px;padding:8px 25px 8px 10px!important;border:1px solid #bdd9e539!important;border-radius:9px!important;background:#1b2c3d!important;color:#e6f1f5!important;cursor:pointer}.character-size-control option{background:#1b2c3d;color:#e6f1f5}
.character-motion-toggle{font:inherit!important;min-height:44px;padding:8px 11px!important;background:transparent!important;border:1px solid #bfd8e026!important;border-radius:9px!important;font-size:11px!important;color:#b9cbd7!important;cursor:pointer}.character-motion-toggle:disabled{opacity:.65;cursor:default}.character-controls :focus-visible,.character-interactive:focus-visible{outline:3px solid #e7c981!important;outline-offset:4px!important}.character-interactive{touch-action:manipulation;cursor:pointer;transform-origin:50% 86%;will-change:auto}.character-interactive[data-character-reaction="wave"]{animation:character-wave .52s ease-in-out!important}.character-interactive[data-character-reaction="cheer"]{animation:character-cheer .52s ease-out!important}.character-interactive[data-character-reaction="think"]{animation:character-think .48s ease-in-out!important}
@keyframes character-wave{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-3deg) translateY(-3px)}65%{transform:rotate(3deg) translateY(-3px)}}@keyframes character-cheer{0%,100%{transform:translateY(0)}35%{transform:translateY(-9px) rotate(-2deg)}70%{transform:translateY(-2px) rotate(1deg)}}@keyframes character-think{0%,100%{transform:rotate(0)}45%{transform:rotate(-4deg)}}
@media(hover:hover) and (pointer:fine){body:not(.motion-paused):not(.page-hidden) .character-interactive:hover{transform:translateY(-4px) rotate(-1deg)}.character-interactive:hover{filter:brightness(1.06)}}
@media(prefers-reduced-motion:reduce){.character-interactive,.character-interactive:hover,.character-interactive[data-character-reaction]{animation:none!important;transition:none!important;transform:none!important}}
.motion-paused .character-interactive,.motion-paused .character-interactive[data-character-reaction],.page-hidden .character-interactive{animation:none!important;transition:none!important;transform:none!important}