/* Lock and Lay — the keepsake book (#953): the profile's Keepsakes tab, the prestige picker and the card button.
   Desktop and phone (both pages load this file). */

.ks-book { display: grid; gap: 14px; padding: 10px 12px 14px; }
.ks-empty { display: grid; gap: 4px; justify-items: center; padding: 28px 16px; text-align: center; color: var(--ink-2); }
.ks-empty b { font-size: 15px; color: var(--ink); }
.ks-empty span { font-size: 12.5px; color: var(--ink-3); }
.ks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.ks-card { position: relative; display: grid; gap: 2px; min-width: 0; padding: 6px; border: 1px solid var(--rule); border-radius: 10px; background: linear-gradient(180deg, rgba(176, 120, 60, .1), transparent 60%), var(--paper-2); }
.ks-pic { display: block; aspect-ratio: 20 / 13; border-radius: 6px; background: var(--thumb-bg); overflow: hidden; }
.ks-pic canvas { width: 100%; height: 100%; display: block; }
.ks-card b { overflow: hidden; font-size: 12.5px; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.ks-card small { overflow: hidden; font-size: 10.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-3); }
.ks-card .ks-morph { color: var(--ink-2); }
.ks-stars { color: #c9a33a; letter-spacing: -1px; }
.ks-stars i { font-style: normal; color: var(--rule-2); }
.ks-del { justify-self: start; margin-top: 2px; }
.ks-note { margin: 0; }

/* the prestige pickers (keepsakes, and the Pet shelf's) are rows of pickrow.js, styled in prestige.css */
.ks-btn.on { color: var(--moss); }

/* the Pet shelf (#1040), above the keepsake book */
.ps-shelf { display: grid; gap: 8px; padding: 10px 12px 0; }
.ps-card { background: linear-gradient(180deg, rgba(90, 140, 90, .12), transparent 60%), var(--paper-2); }
.ps-note { margin: 0; }
/* the owner's room line and the card's warning (#1279): amber when a Pet won't fit at the next prestige */
.ps-room { margin: 0; }
.ps-room.over, .ps-nofit { color: var(--amber); }
.ps-nofit { margin-top: 4px; }
/* Pets, its own area (#1411): the live Pets, then the Pet shelf set off under them; the pointers to it */
.pets-area { padding: 4px 0 12px; }
.ps-live { width: 100%; min-height: 0; height: auto; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ps-live:hover { border-color: var(--ink-3); }
.pets-view { margin: 14px 0 10px; border-top: 1px solid var(--rule-2); }
.pets-view .ps-shelf { padding: 12px 4px 0; }
.ps-filter-note { margin: 10px 4px; } .ps-filter-note .small { margin-left: 6px; }
.ps-moved .ps-note .small { margin-left: 6px; }