.collection-modal { position: fixed; inset: 0; z-index: 25; display: grid; place-items: center; padding: 18px; background: rgba(16, 24, 38, .76); opacity: 0; pointer-events: none; transition: opacity .2s; }
.collection-modal.open { opacity: 1; pointer-events: auto; }
.collection-card { width: min(100%, 520px); max-height: calc(100vh - 36px); overflow: auto; padding: 20px 16px 16px; border: 3px solid #17253b; border-radius: 18px; background: #fff7df; color: #173345; box-shadow: 0 8px 0 #111724, 0 24px 50px rgba(0, 0, 0, .3); }
.collection-overview { margin: 15px 0 13px; padding: 12px; border: 2px solid #bdd4d0; border-radius: 11px; background: #e4f0eb; }
.collection-overview-top, .collection-zone-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.collection-overview-top strong { font-size: 16px; }
.collection-overview-top small, .collection-zone-heading small { color: #69818c; font: 800 9px 'DM Mono', monospace; text-transform: uppercase; }
.collection-overview p { margin-top: 4px; color: #69818c; font-size: 10px; line-height: 1.35; }
.collection-progress-track { height: 8px; margin-top: 10px; border-radius: 20px; overflow: hidden; background: #c8ddd4; }
.collection-progress-track span { display: block; width: 0; height: 100%; border-radius: 20px; background: #2c9ca4; transition: width .3s; }
.collection-zone-tabs { display: flex; gap: 7px; overflow-x: auto; padding: 2px 1px 10px; scrollbar-width: thin; }
.collection-zone-tab { flex: 0 0 auto; display: grid; gap: 3px; min-width: 104px; padding: 8px 9px; border: 2px solid #bdd4d0; border-radius: 10px; background: #fffdf2; color: #173345; text-align: left; cursor: pointer; }
.collection-zone-tab:hover, .collection-zone-tab.active { border-color: #ef795c; background: #fff0d2; }
.collection-zone-tab.locked { border-color: #d7d1c0; opacity: .74; }
.collection-zone-tab.locked:hover { border-color: #d6aa59; opacity: 1; }
.collection-zone-tab strong { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.collection-zone-tab small { color: #69818c; font: 800 8px 'DM Mono', monospace; }
.collection-zone-heading { align-items: center; margin: 4px 0 3px; }
.collection-zone-heading h3 { font-size: 20px; }
.collection-zone-subtitle { margin-bottom: 9px; color: #69818c; font-size: 10px; }
.collection-zone-lock { margin: 0 0 10px; padding: 8px 10px; border: 2px dashed #d6aa59; border-radius: 9px; color: #7e6335; font: 700 9px Manrope; line-height: 1.35; }
.collection-fish-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.collection-fish-card { position: relative; min-width: 0; padding: 10px; border: 2px solid #d7c9a9; border-radius: 12px; background: #fffdf2; text-align: center; overflow: hidden; }
.collection-fish-card::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--collection-rarity); }
.collection-fish-card.undiscovered { border-color: #d7d1c0; background: #f0ecdf; }
.collection-fish-art { display: grid; place-items: center; height: 112px; margin: 4px 0 5px; border-radius: 10px; background: radial-gradient(circle, #d3eee8 0 38%, #c3e1dd 39% 72%, #afd2d0 73% 100%); overflow: hidden; }
.collection-fish-art img { width: 100%; height: 100%; object-fit: contain; animation: collection-float 3s ease-in-out infinite; }
.collection-fish-card.undiscovered .collection-fish-art img { filter: grayscale(1) brightness(.6); opacity: .52; }
.collection-fish-fallback { font-size: 54px; line-height: 1; }
.collection-fish-card.undiscovered .collection-fish-fallback { color: #8c958f; font-size: 38px; }
.collection-fish-card h4 { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.collection-fish-details { display: grid; gap: 3px; margin-top: 4px; }
.collection-fish-details span { color: var(--collection-rarity); font: 800 9px 'DM Mono', monospace; letter-spacing: .06em; text-transform: uppercase; }
.collection-fish-details small { color: #69818c; font: 800 8px 'DM Mono', monospace; }
@keyframes collection-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }

body.dark-mode .collection-card { border-color: #101827; background: #1d2636; color: #f3f1e7; box-shadow: 0 8px 0 #0d1320, 0 24px 50px rgba(0, 0, 0, .45); }
body.dark-mode .collection-overview { border-color: #4e7275; background: #253e43; }
body.dark-mode .collection-overview p, body.dark-mode .collection-overview-top small, body.dark-mode .collection-zone-heading small, body.dark-mode .collection-zone-subtitle { color: #b5c3ca; }
body.dark-mode .collection-progress-track { background: #36545b; }
body.dark-mode .collection-zone-tab { border-color: #4a5a70; background: #283447; color: #f3f1e7; }
body.dark-mode .collection-zone-tab:hover, body.dark-mode .collection-zone-tab.active { border-color: #ff9272; background: #35435a; }
body.dark-mode .collection-zone-tab.locked { border-color: #4a4f5d; opacity: .72; }
body.dark-mode .collection-zone-tab small, body.dark-mode .collection-fish-details small { color: #adbac2; }
body.dark-mode .collection-fish-card { border-color: #4a5a70; background: #283447; }
body.dark-mode .collection-fish-card.undiscovered { border-color: #4a4f5d; background: #242b3a; }
body.dark-mode .collection-fish-art { background: radial-gradient(circle, #385f66 0 38%, #2c515b 39% 72%, #24444f 73% 100%); }
body.dark-mode .collection-zone-lock { color: #f0cc7b; border-color: #ad8340; }

@media (max-width: 360px) {
  .collection-fish-list { grid-template-columns: 1fr; }
}