/* Only saved custom personality selections. The full chip remains the remove control. */
#selected-custom{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px;margin:16px 0}
#selected-custom:empty{display:none;margin:0}
#selected-custom .secondary.custom-trait{display:inline-flex;align-items:center;justify-content:center;gap:8px;max-width:100%;min-width:0;min-height:44px;margin:0;padding:7px 10px 7px 12px;border:2px solid #171613;border-radius:24px;background:#ff9409;color:#171613;font:20px/1.2 var(--heading);box-shadow:inset 0 2px 1px #ffe3a5,0 2px 4px #54290024;transition:transform 140ms ease-out}
#selected-custom .custom-trait::before{content:"";width:17px;height:19px;flex:0 0 17px;background:#171613;-webkit-mask:url("assets/selection-paw-v104.svg") center/contain no-repeat;mask:url("assets/selection-paw-v104.svg") center/contain no-repeat}
#selected-custom .custom-trait-label{min-width:0;overflow-wrap:anywhere;text-align:left}
#selected-custom .custom-trait-remove{display:grid;place-items:center;flex:0 0 23px;width:23px;height:23px;border:1.5px solid #171613;border-radius:50%;background:#fff3d9;font:900 19px/1 var(--body)}
@media(hover:hover) and (pointer:fine){#selected-custom .custom-trait:hover{transform:translateY(-1px)}}
#selected-custom .custom-trait:active{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){#selected-custom .custom-trait{transition:none}#selected-custom .custom-trait:is(:hover,:active){transform:none}}