/*
 * 魔物数据库页面。复用 items.css 的浏览骨架（结果行、详情面板、手机端就地
 * 展开），这里只定义魔物特有的分类色、精灵卡、筛选下拉、掉落/技能表。
 */

:root {
  --cat-mvp: #f7768e;
  --cat-boss: #e0af68;
  --cat-normal: #9aa3b2;
  --cat-event: #bb9af7;
  --cat-battlefield: #7dcfff;
  --cat-guardian: #9ece6a;
}

body.monsters-page .cat-mvp { color: var(--cat-mvp); }
body.monsters-page .cat-boss { color: var(--cat-boss); }
body.monsters-page .cat-normal { color: var(--cat-normal); }
body.monsters-page .cat-event { color: var(--cat-event); }
body.monsters-page .cat-battlefield { color: var(--cat-battlefield); }
body.monsters-page .cat-guardian { color: var(--cat-guardian); }

/* 魔物精灵多为 40–200px 不等，统一放进 44px 方框内等比缩放；
   详情用更大的柔光卡，和物品 collection 插图的处理一致。 */
.item-icon .msprite { width: 40px; height: 40px; object-fit: contain; image-rendering: auto; }
.item-icon svg.msvg { width: 28px; height: 28px; }

/* ------------------------------------------------------------------ 详情 */
.dsprite {
  width: 124px; height: 124px; border-radius: 12px; flex: none;
  background: radial-gradient(circle at 50% 45%, #1b2029, #0f1115 74%);
  border: 1px solid var(--line); padding: 7px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
}
.dsprite img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.dsprite svg { width: 72px; height: 72px; color: var(--fg-dim); }
.monster-id { font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim); margin-top: 5px; }

/* 详情里的掉落 / 技能表。列多，窄屏允许表内横向滚动。 */
.tscroll { overflow-x: auto; }
table.mtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.mtable th, table.mtable td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); }
table.mtable th { color: var(--fg-dim); font-weight: 600; font-size: 11px; letter-spacing: .3px; white-space: nowrap; }
table.mtable td { white-space: nowrap; }
table.mtable td.wrap { white-space: normal; }
table.mtable tr:last-child td { border-bottom: 0; }

/* 掉落物卡片沿用 items.css 的 .drops / a.drop-row（与物品页掉落来源同一套）；
   展开摘要也用 .drop-inline，这里只补充物品说明区。 */
.detail .drop-subhead { margin: 18px 0 8px; font-size: 13px; }
/* 「不可偷窃」为灰色徽章；位置在掉落率下方 */
a.drop-row .drop-steal {
  font-size: 9.5px; color: var(--fg-dim); white-space: nowrap;
  border: 1px solid var(--line); border-radius: 5px;
  padding: 1px 4px; background: var(--bg-elev2);
}
.drop-inline-stats span { min-width: 0; overflow-wrap: anywhere; }
.drop-inline-desc {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.65; color: #cfd6e4;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.drop-inline-desc.empty { color: var(--fg-dim); }
.rate { font-family: var(--mono); color: var(--fg); }
.rate.rare { color: var(--warn); }
.rate.mvp { color: var(--cat-mvp); }

.mode-tag { color: var(--fg); border-color: var(--line); }
.racegroup-tag { color: var(--fg-dim); }
.skill-cond { color: var(--fg-dim); }
.skill-name { font-family: var(--mono); color: var(--fg); }
/* 技能名链到技能库（/skills.html）；悬停才有下划线，避免表格显得花 */
a.skill-link { color: var(--fg); text-decoration: none; }
a.skill-link:hover { color: var(--accent); text-decoration: underline; }
/* 技能表固定列宽：展开/收起时表头与所有数据列都不跳动 */
table.skilltable { table-layout: fixed; min-width: 720px; }
table.skilltable th:nth-child(1), table.skilltable td:nth-child(1) { width: 25%; }
table.skilltable th:nth-child(2), table.skilltable td:nth-child(2) { width: 8%; }
table.skilltable th:nth-child(3), table.skilltable td:nth-child(3) { width: 20%; }
table.skilltable th:nth-child(4), table.skilltable td:nth-child(4) { width: 8%; }
table.skilltable th:nth-child(5), table.skilltable td:nth-child(5) { width: 10%; }
table.skilltable th:nth-child(6), table.skilltable td:nth-child(6) { width: 10%; }
table.skilltable th:nth-child(7), table.skilltable td:nth-child(7) { width: 10%; }
table.skilltable th:nth-child(8), table.skilltable td:nth-child(8) { width: 9%; }
table.skilltable tr.skill-more-row td { width: auto; }
.skill-more-row td { padding: 6px 8px; }
.skill-more {
  background: none; border: 0; padding: 4px 0; color: var(--accent);
  font: inherit; font-size: 12.5px; cursor: pointer; text-align: left;
}
.skill-more:hover { text-decoration: underline; }

/* 手机：详情里的精灵卡略小，统计格两列（items.css 已处理 statgrid） */
@media (max-width: 900px), (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .dsprite { width: 96px; height: 96px; }
  .dsprite svg { width: 56px; height: 56px; }
  .drop-inline-top { flex-wrap: wrap; }
  .drop-inline { padding: 10px 10px 11px; }
}