/* 물고기 도감(js/fishdex.js). 식물 카드와 같은 떠 있는 유리 카드(.float-card, style.css) 위에 그립니다.
   위쪽(.fishdex-top: 제목 · 연못/바다 탭 · 모은 물고기 막대)은 고정, 종 목록(.fishdex-body)만 스크롤합니다.
   데스크톱은 화면 가운데 아래쪽에 뜨는 조금 넓은 카드, 560px 이하는 높이 약 85vh의 바텀시트입니다. */
#dlg-fishdex {
  --hero-out: 0px; /* 주인공 없음 */
  --dex-tint: 127, 191, 158; /* 지금 탭의 물빛(rgb): 연못은 녹청, 바다는 푸름 */
  width: min(560px, calc(100% - var(--gutter-l) - var(--gutter-r)));
  height: min(700px, calc(100dvh - 40px - var(--safe-t) - var(--safe-b)));
}
#dlg-fishdex:has(.water-sea) { --dex-tint: 120, 176, 226; }
.fishdex-top { flex: none; padding: 22px 22px 14px; }
.fishdex-top .garden-name { padding-right: 40px; }
.fishdex-intro { margin: 4px 0 0; padding-right: 40px; font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); word-break: keep-all; }

/* 연못/바다 세그먼트 탭 */
.seg {
  display: flex; gap: 4px; margin-top: 14px; padding: 4px; border: 1px solid var(--card-line); border-radius: 999px;
  background: rgba(0, 0, 0, 0.22);
}
.seg-tab {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 0 12px;
  border: 0; border-radius: 999px; background: none; color: var(--ink-dim); font: inherit; font-size: 14px; cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.seg-tab:hover { color: var(--ink); }
.seg-tab[aria-selected="true"] {
  background: rgba(255, 255, 255, 0.14); color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 2px 10px rgba(0, 0, 0, 0.22);
}
.seg-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seg-count { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 11.5px; color: var(--ink-dim); }
.seg-tab[aria-selected="true"] .seg-count { background: rgba(var(--dex-tint), 0.22); color: var(--ink); }

/* 모은 물고기 막대(.meter) */
.fishdex-progress { margin-top: 14px; }
#fishdex-bar { background: linear-gradient(90deg, #6fae94, #b9e0c8); }
#dlg-fishdex:has(.water-sea) #fishdex-bar { background: linear-gradient(90deg, #5a95cf, #a9d3f2); }

/* 종 목록: 수집 카드. 좁은 화면(390px)에서는 두 줄, 넓으면 세 줄 */
.fishdex-body { padding: 14px 22px 22px; border-top: 1px solid var(--card-line); }
.fishdex-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 10px; }
.fishdex-card {
  position: relative; min-width: 0; padding: 7px 7px 11px; border: 1px solid var(--card-line); border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03)); box-shadow: inset 0 1px 0 var(--card-hi);
  animation: fishdex-card-in 0.3s cubic-bezier(0.2, 0.8, 0.25, 1) both; animation-delay: calc(var(--i, 0) * 25ms);
}
@keyframes fishdex-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* 귀함 등급은 은은한 테두리 빛: 보통은 물빛, 귀함은 등불빛 */
.fishdex-card.grade-normal:not(.is-unknown) { border-color: rgba(143, 208, 240, 0.38); box-shadow: inset 0 1px 0 var(--card-hi), 0 0 18px -8px rgba(143, 208, 240, 0.7); }
.fishdex-card.grade-rare:not(.is-unknown) {
  border-color: rgba(233, 201, 143, 0.62);
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, 0.22), inset 0 0 18px -8px rgba(233, 201, 143, 0.6), 0 0 22px -6px rgba(233, 201, 143, 0.6);
}
.fishdex-card.is-unknown { background: rgba(255, 255, 255, 0.025); border-style: dashed; border-color: rgba(255, 255, 255, 0.14); }

/* 그림 칸: 맑은 물빛 바탕(바다는 조금 푸르게). 칸 비율 2.1은 fishdex.js의 PIC.frame과 같습니다.
   그림 크기·위치는 fishdex.js가 종의 몸 경계(box)로 정합니다. 잡은 종은 그림이 살짝 떠 있고 아래에 그림자가 집니다. */
.fishdex-pic {
  position: relative; overflow: hidden; aspect-ratio: 2.1 / 1; border-radius: 12px;
  background: radial-gradient(90% 120% at 50% 20%, rgba(232, 242, 236, 0.96) 0%, rgba(190, 216, 206, 0.9) 70%, rgba(160, 196, 184, 0.88) 100%);
}
.water-sea .fishdex-pic { background: radial-gradient(90% 120% at 50% 20%, rgba(232, 240, 246, 0.96) 0%, rgba(186, 210, 226, 0.9) 70%, rgba(150, 186, 210, 0.88) 100%); }
.fishdex-pic::after { /* 바닥에 비친 그림자 */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 7%; height: 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 40, 36, 0.28), rgba(20, 40, 36, 0));
}
.fishdex-pic img { position: absolute; z-index: 1; display: block; max-width: none; height: auto; }
.fishdex-card:not(.is-unknown) .fishdex-pic img { filter: drop-shadow(0 5px 4px rgba(20, 40, 36, 0.28)); animation: fishdex-float 4.8s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.6s); }
@keyframes fishdex-float { 0%, 100% { transform: translateY(-3%); } 50% { transform: translateY(-8%); } }
/* 못 잡은 종: 어두운 물에 비친 실루엣 */
.fishdex-card.is-unknown .fishdex-pic { background: radial-gradient(90% 120% at 50% 20%, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); }
.fishdex-card.is-unknown .fishdex-pic::after { display: none; }
.fishdex-card.is-unknown .fishdex-pic img { filter: brightness(0) invert(0.82); opacity: 0.14; }

.fishdex-name { margin: 9px 4px 0; font-family: var(--font-display); font-size: 15.5px; line-height: 1.3; color: var(--ink); overflow-wrap: anywhere; }
html[lang="en"] .fishdex-name { text-transform: capitalize; }
.fishdex-card.is-unknown .fishdex-name { color: var(--ink-dim); letter-spacing: 0.14em; }
.fishdex-grade { display: inline-flex; align-items: center; gap: 5px; margin: 3px 4px 0; font-size: 11.5px; color: var(--ink-dim); }
.fishdex-grade::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(239, 233, 220, 0.4); }
.fishdex-grade.grade-normal { color: #b5dcec; }
.fishdex-grade.grade-normal::before { background: #8fd0f0; box-shadow: 0 0 6px rgba(143, 208, 240, 0.8); }
.fishdex-grade.grade-rare { color: var(--accent); }
.fishdex-grade.grade-rare::before { background: var(--accent); box-shadow: 0 0 8px rgba(233, 201, 143, 0.9); }
.fishdex-facts { margin: 8px 4px 0; padding-top: 7px; border-top: 1px solid var(--card-line); display: grid; grid-template-columns: auto 1fr; gap: 3px 8px; font-size: 11.5px; }
.fishdex-facts dt { color: var(--ink-dim); }
.fishdex-facts dd { margin: 0; color: var(--ink); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 560px) {
  #dlg-fishdex { width: 100%; height: 85dvh; max-height: calc(100dvh - 16px - var(--safe-t)); }
  .fishdex-top { padding: 22px 18px 12px; }
  .fishdex-body { padding: 12px 18px calc(18px + var(--safe-b)); }
  .fishdex-list { grid-template-columns: 1fr 1fr; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .fishdex-card, .fishdex-card:not(.is-unknown) .fishdex-pic img { animation: none; }
  .seg-tab { transition: none; }
}