/*
 * 技能数据库页面。复用 items.css 的浏览骨架（结果行、详情面板、掉落卡片、
 * 手机端就地展开），这里只定义技能特有的分类色、线稿图标、逐级数值表与
 * 技能树表。
 */

:root {
  --cat-attack: #f7768e;
  --cat-ground: #7dcfff;
  --cat-support: #9ece6a;
  --cat-self: #7aa2f7;
  --cat-passive: #9aa3b2;
  --cat-trap: #e0af68;
}

body.skills-page .cat-attack { color: var(--cat-attack); }
body.skills-page .cat-ground { color: var(--cat-ground); }
body.skills-page .cat-support { color: var(--cat-support); }
body.skills-page .cat-self { color: var(--cat-self); }
body.skills-page .cat-passive { color: var(--cat-passive); }
body.skills-page .cat-trap { color: var(--cat-trap); }

/* 技能没有客户端图标的少数（NPC / 版本新增）用分类色线稿；有图标的用
   客户端 24×24 BMP 转成的 48×48 WebP（与物品图标同一套 Scale2x 流程）。 */
.item-icon svg.ksvg { width: 26px; height: 26px; }
.dicon svg.ksvg { width: 44px; height: 44px; }
.item-icon img.ksprite { width: 40px; height: 40px; object-fit: contain; display: block; }
.dicon img.ksprite { width: 64px; height: 64px; object-fit: contain; }
.skill-id { font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim); margin-top: 5px; overflow-wrap: anywhere; }

/* 详情里的 h3 需要携带客户端「系列 / 类型 / 对象」小标签 */
h3 .h3tags { display: inline-flex; gap: 6px; margin-left: 10px; vertical-align: middle; text-transform: none; letter-spacing: 0; }
h3 .h3tags .tag { font-size: 11px; padding: 1px 6px; }

/* 详情里的表格：列多，窄屏允许表内横向滚动（与魔物页同一套观感） */
.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; }
table.mtable td.mono { font-family: var(--mono); }

/* 逐级数值：等级列窄，其余等宽数字列 */
table.leveltable td:first-child { color: var(--accent); }
table.leveltable { min-width: 420px; }
table.jobtable { min-width: 520px; }
table.jobtable td .tag { font-size: 10px; padding: 0 5px; margin-left: 4px; }

/* 详情里的可点击标签（关联状态 / 前置技能） */
.tags a.tag { text-decoration: none; }
.tags a.tag:hover { border-color: var(--accent); color: var(--fg); }

/* 详情面板宽约 1100px：items.css 的固定 5 列会把魔物名挤成两三行。
   技能页改成自适应列宽（最小 280px），材料卡片同样受惠。 */
body.skills-page .drops { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
/* 魔物卡片的状态/条件单独占一行，长条件（攻击 / 被技能命中）不再挤在右侧窄栏 */
body.skills-page .drop-cond { white-space: normal; color: var(--fg-dim); }
@media (max-width: 640px) {
  body.skills-page .drops { grid-template-columns: 1fr; }
}

@media (max-width: 900px), (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  .skill-id { font-size: 11px; }
  table.leveltable, table.jobtable { min-width: 460px; }
}