.collection-tools{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.25rem}
.collection-note{max-width:75ch;color:#c4ccb8;line-height:1.7}
#collection-status{min-height:1.75rem;color:#e7b75a}
.collection-boss{display:flex;gap:2rem;padding:2rem 0;border-top:1px solid #56634c}
.collection-boss>img{width:clamp(180px,28%,300px);height:auto;aspect-ratio:16/9;object-fit:cover;align-self:flex-start;border:1px solid #8c7644}
.collection-body{flex:1;min-width:0}.collection-body h2{margin:0 0 .5rem}
.collection-count{color:#e7b75a}.collection-empty{max-width:65ch;color:#c4ccb8}
.collection-items{list-style:none;padding:0;margin:1.5rem 0;display:flex;flex-direction:column;gap:.5rem}
.collection-items li{display:flex;align-items:center;gap:.75rem;padding:.6rem .75rem;background:#18221e;border:1px solid #44523c;min-width:0}
.collection-items img{flex:none;image-rendering:pixelated}.collection-items span{flex:1;overflow-wrap:anywhere}
.collection-items strong{font-size:.9rem;font-family:system-ui,sans-serif;font-weight:600;color:#c4ccb8;text-align:right}
.collection-items .obtained{border-color:#8bc480}.obtained strong{color:#a8dc9e}
.undiscovered img{filter:grayscale(1);opacity:.65}
@media(max-width:700px){.collection-boss{display:block;padding:1.5rem 0}.collection-boss>img{width:100%;max-width:480px;margin-bottom:1.25rem}.collection-items li{flex-wrap:wrap}.collection-items strong{margin-left:56px}.collection-tools .button{min-height:44px}}