/* ==========================================================================
   pixel.css · 自制像素风组件库（V1 视觉方向）
   规则：所有视觉元素自绘，不使用任何官方素材。
   设计语言：阶梯描边（box-shadow 多层）+ 无模糊硬阴影 + 荧光强调色
   ========================================================================== */

/* ---------- 阶梯描边 ---------- */
.px{
  box-shadow:
    0 0 0 2px var(--shadow),
    0 0 0 4px var(--line),
    4px 4px 0 4px var(--shadow);
}
.px-s{
  box-shadow:
    0 0 0 2px var(--shadow),
    0 0 0 3px var(--line),
    3px 3px 0 3px var(--shadow);
}
.px-xs{
  box-shadow:0 0 0 2px var(--shadow),0 0 0 3px var(--line);
}

/* ---------- 标签 ---------- */
.tag{
  display:inline-block;font-size:12px;padding:2px 8px;
  background:var(--panel2);color:var(--ink-dim);border:1px solid var(--line);
}
.tag.mint{background:var(--mint);color:#0d0b22;border-color:var(--shadow);font-weight:700}
.tag.gold{background:var(--gold);color:#2a1f00;border-color:var(--shadow);font-weight:700}
.tag.pink{background:var(--pink);color:#2a0a1c;border-color:var(--shadow);font-weight:700}
.tags{display:flex;gap:6px;flex-wrap:wrap}

/* ---------- 状态徽标 ---------- */
.k-null{
  display:inline-block;font-size:11.5px;padding:1px 6px;
  background:rgba(255,180,162,.14);color:var(--null);
  border:1px dashed rgba(255,180,162,.5);
}
/* 「不适用」占位：说明性规则没有门槛/触发值（区别于 k-null 的「待核实」） */
.k-na{
  display:inline-block;font-size:11.5px;padding:1px 6px;
  color:var(--ink-soft, #8a8177);opacity:.75;
}
.k-ver{display:inline-block;font-size:11px;padding:1px 6px;border:1px solid;white-space:nowrap}
.k-ver.is-ok{color:var(--mint);border-color:rgba(126,240,176,.5);background:rgba(126,240,176,.1)}
.k-ver.is-todo{color:var(--gold);border-color:rgba(255,212,94,.45);background:rgba(255,212,94,.08)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-block;padding:8px 14px;font-size:13.5px;font-weight:700;
  background:var(--panel2);color:var(--ink);border:1px solid var(--line);
  text-decoration:none;cursor:pointer;
  box-shadow:0 0 0 2px var(--shadow),0 0 0 3px var(--line),3px 3px 0 3px var(--shadow);
}
.btn:hover{text-decoration:none;background:var(--mint);color:#0d0b22}
.btn.primary{background:var(--mint);color:#0d0b22;border-color:var(--shadow)}
.btn.primary:hover{background:var(--gold)}

/* ---------- 筛选块 ---------- */
.chip{
  padding:5px 11px;font-size:13px;background:var(--panel2);color:var(--ink-dim);
  border:1px solid var(--line);cursor:pointer;font-family:inherit;
}
.chip:hover{color:var(--mint);border-color:var(--mint)}
.chip.on{background:var(--mint);color:#0d0b22;font-weight:700;border-color:var(--shadow)}

/* 二级筛选行（如「系统」分类下的 职业/怪物/事件/炼金配方）
   —— 与一级筛选取交集；chip 比一级更小、更淡，形成层级感。 */
.filters-sub{
  margin:-8px 0 16px;padding:8px 10px;background:var(--panel);
  border-left:2px solid var(--line);align-items:center;
}
.filters-sub .filters-label{
  font-size:11px;color:var(--ink-faint);letter-spacing:.06em;
  margin-right:2px;white-space:nowrap;
}
.chip-sub{padding:3px 9px;font-size:12px;opacity:.92}
.filters-sub .chip.on{background:var(--sky);color:#062a3d}



/* ---------- 输入框 ---------- */
.searchbox{
  flex:1 1 180px;min-width:140px;padding:8px 11px;font-size:13.5px;font-family:inherit;
  background:var(--bg2);border:1px solid var(--line);color:var(--ink);
}
.searchbox:focus{outline:none;border-color:var(--mint);box-shadow:0 0 0 2px rgba(126,240,176,.25)}
.searchbox::placeholder{color:var(--ink-faint)}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}

/* ---------- 章节标题 ---------- */
.sec-h{display:flex;align-items:center;gap:10px;margin:0 0 14px;flex-wrap:wrap}
.sec-h h2{font-size:17px;margin:0;letter-spacing:.4px}
.sec-h .bar{width:12px;height:18px;background:var(--mint);box-shadow:2px 2px 0 var(--shadow);flex:0 0 auto}
.sec-h .hint{font-size:12.5px;color:var(--ink-faint);margin-left:auto}

/* ---------- 步骤 ---------- */
.steps{counter-reset:s;margin:0;padding:0;list-style:none}
.steps li{position:relative;padding:10px 0 10px 40px;border-bottom:1px dashed var(--line)}
.steps li:last-child{border-bottom:0}
.steps li::before{
  counter-increment:s;content:counter(s,decimal-leading-zero);
  position:absolute;left:0;top:10px;width:26px;height:26px;line-height:26px;text-align:center;
  background:var(--gold);color:#2a1f00;font-size:12px;font-weight:800;
  box-shadow:2px 2px 0 var(--shadow);
}
.steps b{display:block;margin-bottom:2px}
.steps p{margin:0;color:var(--ink-dim);font-size:13.5px}

/* ---------- 警示 / 提示列表 ---------- */
.notes{margin:0;padding:0;list-style:none}
.notes li{
  padding:8px 10px 8px 30px;position:relative;color:var(--ink-dim);
  background:rgba(255,180,162,.05);border-left:3px solid var(--null);
  margin-bottom:6px;font-size:13.5px;
}
.notes li::before{content:"!";position:absolute;left:11px;color:var(--null);font-weight:800}
.notes.ok li{background:rgba(126,240,176,.05);border-left-color:var(--mint)}
.notes.ok li::before{content:"✓";color:var(--mint)}

/* ---------- 提示条 ---------- */
.notice{
  padding:10px 14px;font-size:13px;border-left:3px solid var(--sky);
  background:rgba(125,211,252,.07);color:var(--ink-dim);margin:0 0 18px;
}
.notice.warn{border-left-color:var(--gold);background:rgba(255,212,94,.08);color:#e8cf9a}
.notice b{color:var(--ink)}

/* ---------- 筹备中空态 ---------- */
.wip-box{
  padding:26px;text-align:center;color:var(--ink-faint);font-size:13.5px;
  background:var(--bg2);border:1px dashed var(--line);
}
.wip-box b{display:block;color:var(--gold);margin-bottom:6px;font-size:15px;letter-spacing:.5px}
.wip-box p{margin:0 0 10px}
.empty{
  padding:26px;text-align:center;color:var(--ink-faint);font-size:13.5px;
  background:var(--bg2);border:1px dashed var(--line);
}
.empty b{display:block;color:var(--ink-dim);margin-bottom:4px;font-size:14px}

/* ⚠️ 关键：hidden 属性必须强制生效
   HTML 的 [hidden] 只是浏览器默认样式 display:none，元素一旦有自己的
   display 声明（如 .dcard{display:flex}、.dcard-grid{display:grid}），
   默认的 hidden 会被完全覆盖 → 筛选/搜索"点了没反应"（实为元素没被隐藏）。
   注意：!important 在此是必要的，因为它要压过组件自身的 display 声明。 */
[hidden]{display:none!important}