#modal .box{overflow:hidden;max-height:90dvh}
#modal .box-head{flex:0 0 auto}
#modal #filters{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;justify-content:space-between}
.picker-filter-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;width:100%;max-width:392px}
#modal .picker-filter{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:0;aspect-ratio:1;padding:6px;border:1px solid var(--filter-color);border-radius:9px;background:#ffffff04;color:var(--filter-color);box-shadow:none;text-shadow:none;line-height:1}
#modal .picker-filter:hover{background:color-mix(in srgb,var(--filter-color) 14%,transparent)}
#modal .picker-filter.on{background:var(--filter-color);border-color:var(--filter-color);color:var(--bg);box-shadow:none;text-shadow:none}
#modal .picker-filter .element-icon,#modal .picker-filter .affinity-icon{width:24px;height:24px;object-fit:contain;filter:none}
#modal .picker-filter.on .element-icon,#modal .picker-filter.on .affinity-icon{filter:brightness(0) saturate(100%)}
.picker-rarity{display:flex;align-items:center;justify-content:center;gap:3px;font-size:14px;white-space:nowrap}
.picker-rarity>span:last-child{font-size:13px}
.picker-heart{font-family:system-ui,sans-serif;font-size:27px;line-height:1}
.picker-reset-text{font-size:10px;line-height:1}
.picker-sort-row{display:flex;flex:0 1 210px;min-width:0}
#modal .picker-sort-row .sort-select{width:100%;margin:0;min-height:38px;font-size:12px}
#modal .grid{min-height:0;overscroll-behavior:contain;scrollbar-width:thin}
/* Reuse Your Characters' rarity portrait, badges and contiguous name ribbon. */
#modal .item{min-width:0;justify-content:flex-start}
#modal .item .character-frame .avatar{display:flex;min-width:0;width:100%;height:auto;aspect-ratio:1;max-width:none;margin:0;padding:0;border:0!important;border-radius:8px 8px 0 0;overflow:hidden;box-shadow:none}
#modal .item .framed-name{font-size:13px;line-height:1.5;width:100%}
#modal .item .cb{top:4px;left:4px;z-index:3;line-height:1.4;pointer-events:none}
#modal .item .hb{top:4px;right:4px;z-index:3;display:flex;padding:3px;border-radius:50%;background:#111b2bdb;pointer-events:none}
#modal .item .hb .shared-heart{width:13px;height:13px}
#modal .picker-footer-actions{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px}
#modal .picker-footer-actions button{min-height:42px;margin:0}
@media(max-width:760px){
  #modal{padding:10px}
  #modal .box{width:100%;max-height:calc(100dvh - 20px)}
  #modal .box-head{padding:12px;gap:12px}
  #modal .box-head .row{gap:8px}
  #modal .box-head .search-field{min-width:0}
  #modal .box-head #search{width:100%;min-width:0;min-height:42px}
  #modal #closeModal{min-height:42px;padding:8px 10px;font-size:12px}
  #modal #filters{flex-direction:column;align-items:stretch;gap:10px}
  .picker-filter-grid{max-width:392px;gap:5px}
  #modal .picker-filter{padding:3px;border-radius:8px}
  #modal .picker-filter .element-icon,#modal .picker-filter .affinity-icon{width:22px;height:22px}
  .picker-rarity{font-size:12px;gap:2px}
  .picker-rarity>span:last-child{font-size:11px}
  .picker-sort-row{flex:none;width:100%}
  #modal .grid{padding:10px;gap:8px;grid-template-columns:repeat(3,minmax(0,1fr))}
  #modal .foot{padding:12px;gap:12px;align-items:stretch}
  #modal .foot .note{width:100%;font-size:10px;line-height:1.6}
  #modal .picker-footer-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
  #modal .picker-footer-actions button{width:100%;min-width:0;padding:9px 6px;font-size:11px;line-height:1.5}
}