/* ============================================================
   三角洲钓鱼板块 · 共享组件（鱼类图鉴列表页 + 鱼类详情页共用）
   由 delta_head 通过 extraCss 引入；仅放两个页面都会用到的部分，
   地图画布 / 分布区域 / 渔具 / 玩法机制等单页组件仍写在各自页面内。
   ============================================================ */

/* ---------- 品级配色：白 绿 蓝 紫 金 红 ---------- */
.rarity-badge { display: inline-block; padding: .16rem .5rem; border-radius: 7px; font-size: .72rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap; line-height: 1.4; }
.rarity-0 { background: rgba(148,163,184,.14); color: #94a3b8; border-color: rgba(148,163,184,.3); }
.rarity-1 { background: rgba(203,213,225,.16); color: #e2e8f0; border-color: rgba(203,213,225,.38); }
.rarity-2 { background: rgba(52,211,153,.16); color: #6ee7b7; border-color: rgba(52,211,153,.38); }
.rarity-3 { background: rgba(96,165,250,.16); color: #93c5fd; border-color: rgba(96,165,250,.38); }
.rarity-4 { background: rgba(167,139,250,.16); color: #c4b5fd; border-color: rgba(167,139,250,.38); }
.rarity-5 { background: rgba(251,191,36,.16); color: #fcd34d; border-color: rgba(251,191,36,.4); }
.rarity-6 { background: rgba(248,113,113,.18); color: #fca5a5; border-color: rgba(248,113,113,.42); }

/* 品级对应的强调色（卡片左侧色条 / 占位图标） */
.rarity-tone-0 { --tone: #94a3b8; }
.rarity-tone-1 { --tone: #cbd5e1; }
.rarity-tone-2 { --tone: #34d399; }
.rarity-tone-3 { --tone: #60a5fa; }
.rarity-tone-4 { --tone: #a78bfa; }
.rarity-tone-5 { --tone: #fbbf24; }
.rarity-tone-6 { --tone: #f87171; }

/* ---------- 品级胶囊（带图标与占格） ---------- */
.tier-list { display: flex; flex-wrap: wrap; gap: .3rem; }
.tier-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .48rem; border-radius: 8px; font-size: .73rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; }
.tier-chip img { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; background: rgba(255,255,255,.06); }
.tier-chip .sz { font-weight: 500; opacity: .88; font-variant-numeric: tabular-nums; }

/* ---------- 标签胶囊 ---------- */
.tag-chip { display: inline-block; padding: .12rem .45rem; margin: .1rem .2rem .1rem 0; border-radius: 6px; font-size: .73rem; background: rgba(255,255,255,.07); border: 1px solid var(--dta-border); color: var(--dta-text); white-space: nowrap; }
.tag-chip.rod { background: rgba(34,211,238,.12); border-color: rgba(34,211,238,.3); color: #67e8f9; }
.tag-chip.bait { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.3); color: #6ee7b7; }
.tag-chip.map { background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.3); color: #fcd34d; }
.tag-chip.val { background: rgba(251,191,36,.16); border-color: rgba(251,191,36,.4); color: #fcd34d; font-weight: 600; font-variant-numeric: tabular-nums; }

.fish-note { font-size: .78rem; color: var(--dta-muted); }
.fish-name { font-weight: 600; color: #fff; white-space: nowrap; }

/* ---------- 区块标题 / 面包屑 ---------- */
.sec-title { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: #fff; font-size: .95rem; margin-bottom: .7rem; }
.crumb { display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; font-size: .8rem; color: var(--dta-muted); margin-bottom: .9rem; }
.crumb a { color: var(--dta-muted); text-decoration: none; }
.crumb a:hover { color: var(--dta-cyan); }
.crumb .bi { font-size: .68rem; opacity: .55; }
.crumb .cur { color: var(--dta-text); font-weight: 600; }

/* ---------- 鱼类卡片（图鉴列表：手机单列 / 平板两列 / 桌面三列） ---------- */
.fish-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .85rem; }
.fish-sort { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.fish-card { display: flex; flex-direction: column; position: relative; height: 100%; background: var(--dta-panel); border: 1px solid var(--dta-border); border-radius: 14px; padding: .8rem .9rem .85rem 1.05rem; overflow: hidden; text-decoration: none; color: inherit; transition: all .18s ease; backdrop-filter: blur(10px); }
.fish-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tone, var(--dta-cyan)); opacity: .9; }
.fish-card:hover,
.fish-card:focus-visible { border-color: var(--dta-border-strong); transform: translateY(-2px); box-shadow: 0 12px 28px rgba(34,211,238,.14); color: inherit; outline: none; }
.fc-head { display: flex; gap: .6rem; align-items: flex-start; }
.fc-head img { width: 46px; height: 46px; object-fit: contain; border-radius: 10px; background: rgba(255,255,255,.05); flex: none; }
.fc-ph { width: 46px; height: 46px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; background: rgba(255,255,255,.05); color: var(--tone, var(--dta-cyan)); flex: none; }
.fc-title { flex: 1; min-width: 0; }
.fc-name { font-weight: 700; color: #fff; font-size: .95rem; line-height: 1.35; }
.fc-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin-top: .3rem; }
.fc-go { flex: none; color: var(--dta-muted); font-size: .82rem; margin-top: .2rem; }
.fc-body { margin-top: .6rem; }
.fc-rows { display: flex; flex-direction: column; gap: .3rem; margin-top: .55rem; }
.fc-rows .r { display: flex; gap: .5rem; font-size: .78rem; }
.fc-rows .k { flex: none; width: 2.7rem; font-weight: 600; color: var(--dta-muted); }
.fc-rows .v { min-width: 0; }
.fc-note { margin: .55rem 0 0; font-size: .76rem; line-height: 1.65; color: var(--dta-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fc-more { margin-top: .5rem; font-size: .76rem; font-weight: 600; color: var(--dta-cyan); }

/* ---------- 白天模式校正 ---------- */
body.theme-light .fish-name,
body.theme-light .sec-title,
body.theme-light .fc-name { color: var(--dta-text); }
body.theme-light .tag-chip { background: rgba(15,23,42,.045); }
body.theme-light .tag-chip.val { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.34); color: #b45309; }
body.theme-light .tier-chip img,
body.theme-light .fc-head img,
body.theme-light .fc-ph { background: rgba(15,23,42,.05); }
body.theme-light .fish-card { background: #fff; }
body.theme-light .rarity-0 { background: rgba(100,116,139,.1); color: #64748b; border-color: rgba(100,116,139,.28); }
body.theme-light .rarity-1 { background: rgba(71,85,105,.1); color: #475569; border-color: rgba(71,85,105,.3); }
body.theme-light .rarity-2 { background: rgba(16,185,129,.12); color: #047857; border-color: rgba(16,185,129,.32); }
body.theme-light .rarity-3 { background: rgba(59,130,246,.12); color: #1d4ed8; border-color: rgba(59,130,246,.32); }
body.theme-light .rarity-4 { background: rgba(139,92,246,.12); color: #6d28d9; border-color: rgba(139,92,246,.32); }
body.theme-light .rarity-5 { background: rgba(245,158,11,.14); color: #b45309; border-color: rgba(245,158,11,.34); }
body.theme-light .rarity-6 { background: rgba(239,68,68,.12); color: #b91c1c; border-color: rgba(239,68,68,.34); }