.play-screen dialog[data-kind="collection"]{width:min(780px,calc(100vw - 24px))}
.collection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 9px}
.play-screen .collection-toolbar .dialog-copy{margin:0;font-size:13px}
.collection-filter{flex:none;background:none;border:7px solid transparent;border-image:var(--ui-slot) 210 fill/15px stretch}
.collection-filter select{font:inherit;font-size:12px;color:#46664c;background:transparent;border:0;min-height:28px;padding:0 8px;cursor:pointer;max-width:165px}
.collection-guide{font-size:12px;color:#7c8b72;line-height:1.6;margin:0 0 17px}
.collection-families{display:grid;gap:10px}
.collection-family{min-width:0;border:10px solid transparent;border-image:var(--ui-slot) 210 fill/20px stretch;padding:9px 5px 5px}
.collection-family-heading{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:0 6px 6px}
.collection-family-heading h3{font-size:16px;color:#49644b;margin:0;font-weight:600}
.collection-family-count{font-size:15px;color:#849071;white-space:nowrap}.collection-family-count b{color:#34836c}
.collection-complete{margin-left:auto;font-size:11px;color:#34836c}
.collection-variants{display:flex;gap:9px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:#a9bc98 transparent;padding:0 2px 9px}
.collection-variants:focus-visible{outline:2px solid #59917b;outline-offset:2px}
.play-screen .collection-family .collection-tile{flex:0 0 calc((100% - 36px)/5);min-width:95px;max-width:126px;border:0;background:none;padding:0;scroll-snap-align:start;text-align:center}
.collection-art{background:var(--ui-slot) center/100% 100% no-repeat;padding:7px}
.play-screen .collection-family .crop-art{height:78px;width:100%;margin:0}
.play-screen .collection-family .collection-tile.unknown .crop-art{opacity:1;filter:brightness(0)}
.play-screen .collection-family h4{font-size:11px;line-height:1.5;font-weight:600;margin:4px 2px;min-height:29px;color:#50694f}
.play-screen .collection-family .rarity-label{font-size:10px;margin:5px 0 0}
.play-screen .collection-family .collection-tile p{font-size:10px;margin:0;color:#75886b}
.collection-swipe{display:none;color:#8a987b;font-size:10px;text-align:center;margin:12px 0 0}
@media(max-width:760px){
 .play-screen dialog[data-kind="collection"]{width:calc(100vw - 14px)}
 .collection-toolbar{gap:6px}.play-screen .collection-toolbar .dialog-copy{font-size:10px}
 .collection-filter{border-width:5px;border-image-width:13px}.collection-filter select{font-size:11px;max-width:133px;padding:0 3px}
 .collection-guide{font-size:11px;margin-bottom:13px}
 .collection-family{border-width:9px;border-image-width:18px;padding:9px 3px 5px}
 .collection-family-heading{gap:10px;margin:0 3px 6px}.collection-family-heading h3{font-size:15px}.collection-family-count{font-size:14px}
 .play-screen .collection-family .collection-tile{flex-basis:103px;min-width:103px;max-width:103px}
 .play-screen .collection-family .crop-art{height:72px}.collection-variants{gap:7px}
 .collection-swipe{display:block}
}

.collection-unlock{margin-left:auto;color:#7b846e;font-size:11px}.family-locked .collection-family-heading h3{color:#6d7764}
