:root{--bg-details: #0d0d14;--accent-green: #5a9b5a;--unlocked: rgba(90, 155, 90, .15);--columns: 6}.container{max-width:1200px}.keepsake-grid{display:grid;grid-template-columns:repeat(var(--columns),1fr);gap:1rem;padding:2rem 0}@media(max-width:1000px){.keepsake-grid{--columns: 5}}@media(max-width:800px){.keepsake-grid{--columns: 4}}@media(max-width:600px){.keepsake-grid{--columns: 3;gap:.75rem}}@media(max-width:400px){.keepsake-grid{--columns: 2}}.keepsake-item{position:relative;aspect-ratio:1;background:var(--bg-card);border:1px solid var(--border-color);transition:all .3s ease;overflow:hidden}.keepsake-item.unlocked{background:linear-gradient(135deg,var(--unlocked) 0%,var(--bg-card) 100%);border-color:#5a9b5a4d}.keepsake-item.expanded{border-color:var(--accent-gold);box-shadow:0 0 20px #d4a85333}.keepsake-main{width:100%;height:100%;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.5rem;transition:all .2s ease}.keepsake-main:hover{background:#ffffff08}.keepsake-main:active{transform:scale(.95)}.keepsake-icon{width:60px;height:60px;margin-bottom:.25rem;transition:filter .3s ease,transform .2s ease;object-fit:contain}.keepsake-item.locked .keepsake-icon{filter:grayscale(80%) brightness(.5)}.keepsake-name{font-family:Cinzel,serif;font-size:.65rem;text-align:center;color:var(--text-primary);letter-spacing:.02em;line-height:1.2;padding:0 .25rem}.keepsake-item.locked .keepsake-name{color:var(--text-secondary)}.info-btn{position:absolute;bottom:4px;right:4px;width:20px;height:20px;background:var(--bg-dark);border:1px solid var(--border-color);border-radius:50%;color:var(--text-secondary);font-size:.7rem;font-family:Cinzel,serif;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;z-index:10}.info-btn:hover{background:var(--accent-gold);border-color:var(--accent-gold);color:var(--bg-dark);transform:scale(1.1)}.keepsake-item.expanded .info-btn{background:var(--accent-gold);border-color:var(--accent-gold);color:var(--bg-dark)}.check-mark{position:absolute;top:4px;right:4px;width:18px;height:18px;background:var(--accent-green);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;opacity:0;transform:scale(0);transition:all .3s ease}.keepsake-item.unlocked .check-mark{opacity:1;transform:scale(1)}.rank-dots{position:absolute;top:4px;left:4px;display:flex;gap:2px}.rank-dot{width:6px;height:6px;border-radius:50%;background:var(--border-color);cursor:pointer;transition:all .2s ease}.rank-dot:hover{transform:scale(1.3)}.rank-dot.filled{background:var(--accent-gold)}.details-row{grid-column:1 / -1;background:var(--bg-details);border:1px solid var(--accent-gold-dim);border-top:2px solid var(--accent-gold);padding:1.5rem;display:none;position:relative;animation:slideDown .3s ease}.details-row.visible{display:block}.details-content{display:grid;grid-template-columns:auto 1fr;gap:1.5rem;align-items:start}@media(max-width:600px){.details-content{grid-template-columns:1fr;text-align:center}.details-icon{margin:0 auto}}.details-icon{width:80px;height:80px;background:var(--bg-card);border:1px solid var(--border-color);display:flex;align-items:center;justify-content:center;overflow:hidden}.details-icon img{width:100%;height:100%;object-fit:contain}.details-info h3{font-family:Cinzel,serif;font-size:1.4rem;font-weight:600;color:var(--accent-gold);margin-bottom:.25rem}.details-giver{font-size:1rem;color:var(--text-secondary);font-style:italic;margin-bottom:.5rem}.details-category{margin-bottom:1rem}.details-section:last-child{margin-bottom:0}.section-label{margin-bottom:.35rem}.effect-text{font-size:1.05rem;line-height:1.6;color:var(--text-primary)}.effect-text .highlight{color:var(--accent-gold);font-weight:500}.unlock-box{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#d4a8530d;border:1px solid var(--border-color);font-size:.9rem;color:var(--text-secondary)}.rank-controls{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}.rank-label{font-size:.9rem;color:var(--text-secondary);margin-right:.5rem}.rank-star{width:28px;height:28px;background:var(--bg-card);border:1px solid var(--border-color);color:var(--border-color);font-size:1rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center}.rank-star:hover{border-color:var(--accent-gold-dim);color:var(--accent-gold-dim)}.rank-star.filled{background:var(--accent-gold);border-color:var(--accent-gold);color:var(--bg-dark)}.close-details{position:absolute;top:1rem;right:1rem;width:28px;height:28px;background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);font-size:1.1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.close-details:hover{border-color:var(--accent-gold);color:var(--accent-gold)}.keepsake-item.just-toggled .keepsake-icon{animation:pulse .3s ease}