/* modals_collections.css - Collections and Relics Overlay Systems */

/* Collections (도감) */
#collections-overlay { z-index: 2000; }
#collections-content {
    width: 95%; max-width: 800px; max-height: 90%; padding: 15px;
    background: linear-gradient(145deg, #1a1a1a, #050505);
    border: 3px solid #ffd700; border-radius: 20px 20px 10px 10px;
    display: flex; flex-direction: column; gap: 10px;
    box-shadow: 0 0 60px rgba(255, 215, 0, 0.2), inset 0 0 30px rgba(0, 0, 0, 0.8);
    position: relative; border-top: 5px solid #ffd700;
}
#collections-content::before {
    content: "📖 CHRONICLES OF DESTINY 📖";
    position: absolute; top: -28px; left: 50%; transform: translateX(-50%);
    background: #ffd700; color: #000; padding: 4px 20px; border-radius: 8px 8px 0 0;
    font-family: 'Cinzel', serif; font-size: 12px; font-weight: 900; letter-spacing: 2px; white-space: nowrap;
}
#collections-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 215, 0, 0.3); padding-bottom: 10px; }
#collections-tabs { display: flex; gap: 5px; }
.col-tab-btn { padding: 6px 15px; font-size: 13px; font-weight: bold; background: none; color: #888; border: none; border-bottom: 3px solid transparent; cursor: pointer; transition: all 0.3s; }
.col-tab-btn.active { color: #ffd700; border-bottom-color: #ffd700; background: rgba(255, 215, 0, 0.1); }
#close-collections { background: none; border: none; color: #ff4500; font-size: 24px; cursor: pointer; font-weight: bold; }

.collections-section { display: none; flex: 1; overflow-y: auto; }
.collections-section.active { display: flex; flex-direction: column; gap: 10px; }
.col-category-nav { display: flex; gap: 5px; flex-wrap: wrap; }
.col-cat-btn { padding: 4px 10px; font-size: 11px; font-weight: bold; background: #111; color: #aaa; border: 1px solid #333; border-radius: 8px; cursor: pointer; }
.col-cat-btn.active { background: #333; color: #ffd700; border-color: #ffd700; }
.collections-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(45px, 1fr)); gap: 8px; padding: 10px; background: rgba(0,0,0,0.4); border-radius: 10px; }
.col-item { aspect-ratio: 1/1; background: #222; border: 1px solid #333; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-size: 24px; cursor: pointer; }

#collection-details { height: 140px; background: rgba(0, 0, 0, 0.7); border: 1px solid rgba(255, 215, 0, 0.4); border-radius: 10px; display: flex; overflow: hidden; }
#col-info-pane { flex: 1; height: 100%; }
.col-detail-icon { font-size: 36px; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 8px; border: 1px solid #444; margin: 10px; }
.col-detail-title { font-size: 18px; font-weight: 900; color: #fff; margin-bottom: 3px; }
.col-detail-stats { display: flex; gap: 8px; font-size: 11px; color: #ffd700; }
.col-detail-lore { font-size: 11px; color: #ccc; line-height: 1.3; padding: 10px; font-style: italic; flex: 1; }

/* Relics (유물) */
#relics-content {
    width: 95%; max-width: 800px; max-height: 90%; padding: 20px;
    background: linear-gradient(145deg, #1a0a05, #000000);
    border: 3px solid #ff4500; border-radius: 20px 20px 10px 10px;
    display: flex; flex-direction: column; gap: 10px;
    position: relative; border-top: 6px solid #ff4500;
}
#relics-header h2 { color: #ff4500; margin: 0; font-size: 24px; text-transform: uppercase; letter-spacing: 4px; text-shadow: 0 0 15px rgba(255, 69, 0, 0.6); }
#close-relics { background: none; border: none; color: #888; font-size: 24px; cursor: pointer; }
#relics-grid { flex: 1; overflow-y: auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 10px; background: rgba(0,0,0,0.4); border-radius: 8px; }
.relic-slot { aspect-ratio: 1/1; background: #111; border: 1px solid #333; border-radius: 6px; display: flex; justify-content: center; align-items: center; font-size: 24px; cursor: pointer; transition: all 0.2s; position: relative; }
.relic-slot.empty { opacity: 0.2; cursor: default; }
.relic-slot.selected { border-color: #ff4500; box-shadow: 0 0 10px #ff4500; background: #1a0500; }
#relic-details { margin-top: 10px; height: 110px; display: flex; gap: 8px; }
#relic-info-pane { flex: 1.6; background: rgba(0,0,0,0.5); padding: 8px; border-radius: 8px; border: 1px solid #444; display: flex; flex-direction: column; justify-content: center; }
#relic-bonus-pane { flex: 1; background: rgba(0,0,0,0.4); padding: 8px; border-radius: 8px; border: 1px solid #333; overflow-y: auto; }
.relic-detail-title { color: #fff; font-size: 12px; font-weight: bold; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 2px; }
.relic-detail-effect { color: #00ff88; font-size: 9.5px; margin-bottom: 4px; line-height: 1.2; }
.relic-detail-lore { color: #aaa; font-size: 8.5px; font-style: italic; line-height: 1.3; opacity: 0.8; }
.relic-bonus-title { color: #ff4500; font-size: 11px; font-weight: bold; text-align: center; margin-bottom: 6px; border-bottom: 1px solid #444; padding-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }

/* Legacy Header Fixes */
#records-header h2 { font-size: 20px; }
#close-records { font-size: 18px; }