/* ============================================================
   金框方言 — 门页与 HUB 共用
   .lib-frame（大面板）> .lib-frame--plain（小卡）> .lib-slot（槽格）
   线与凹凸，不用大面积填色。圆角 ≤4。阴影模糊半径为 0。
   门页 .gate-panel 仍保留四角 span，避免和伪元素叠出双份铆钉。
   ============================================================ */

:root {
  /* 中文短标题走 Fusion Pixel ZH，缺字落到 Noto。动态正文不要用这条。 */
  --font-cjk-pixel: "Fusion Pixel 12 ZH", "Fusion Pixel 12", var(--font-sans);
  --fs-pixel-sub: 16px;
}

.lib-frame {
  position: relative;
  background: var(--frame-bg, var(--gate-panel-bg));
  border: var(--gate-frame-outer);
  border-radius: var(--gate-radius);
  box-shadow: var(--shadow-hard);
  color: var(--text);
}

.lib-frame--ornate::before,
.lib-frame--plain::before {
  content: "";
  position: absolute;
  inset: var(--gate-frame-gap);
  border: var(--gate-frame-inner);
  border-radius: 0;
  pointer-events: none;
  z-index: 1;
}

.lib-frame--plain {
  --frame-bg: rgba(17, 17, 25, 0.94);
  border: 1px solid var(--accent-dim);
  box-shadow: var(--shadow);
}

.lib-frame--plain::before {
  border-color: rgba(232, 196, 154, 0.22);
}

/* HUB 大面板没有门页那 8 个 span，角花和铆钉画在 ::after 上。 */
.lib-frame--ornate:not(.gate-panel)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background-repeat: no-repeat;
  background-image:
    url("../assets/ui/corner-flourish-16-tl.png"),
    url("../assets/ui/corner-flourish-16-tr.png"),
    url("../assets/ui/corner-flourish-16-bl.png"),
    url("../assets/ui/corner-flourish-16-br.png"),
    image-set(
      url("../assets/ui/rivet-stud-12.png") 1x,
      url("../assets/ui/rivet-stud-12@2x.png") 2x
    ),
    image-set(
      url("../assets/ui/rivet-stud-12.png") 1x,
      url("../assets/ui/rivet-stud-12@2x.png") 2x
    ),
    image-set(
      url("../assets/ui/rivet-stud-12.png") 1x,
      url("../assets/ui/rivet-stud-12@2x.png") 2x
    ),
    image-set(
      url("../assets/ui/rivet-stud-12.png") 1x,
      url("../assets/ui/rivet-stud-12@2x.png") 2x
    );
  background-size:
    16px 16px, 16px 16px, 16px 16px, 16px 16px,
    var(--gate-rivet-size) var(--gate-rivet-size),
    var(--gate-rivet-size) var(--gate-rivet-size),
    var(--gate-rivet-size) var(--gate-rivet-size),
    var(--gate-rivet-size) var(--gate-rivet-size);
  background-position:
    left 0 top 0,
    right 0 top 0,
    left 0 bottom 0,
    right 0 bottom 0,
    left var(--gate-rivet-inset) top var(--gate-rivet-inset),
    right var(--gate-rivet-inset) top var(--gate-rivet-inset),
    left var(--gate-rivet-inset) bottom var(--gate-rivet-inset),
    right var(--gate-rivet-inset) bottom var(--gate-rivet-inset);
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* 槽格：背包格，凹底、描边 */
.lib-slot {
  background: var(--bg-well);
  border: 1px solid var(--line-bright);
  border-radius: var(--radius-px);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.55), inset -1px -1px 0 rgba(232, 196, 154, 0.10);
}

.lib-slot:hover {
  border-color: var(--accent-dim);
}

.lib-slot[aria-current],
.lib-slot.is-active,
.lib-slot.active {
  border-color: var(--accent);
  box-shadow: inset 2px 2px 0 rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(232, 196, 154, 0.25);
}

.lib-slot-grid {
  display: grid;
  gap: 4px;
  grid-template-columns: repeat(auto-fill, 48px);
}

.lib-slot-grid > .lib-slot {
  position: relative;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
}

.lib-slot__badge {
  font-family: "Fusion Pixel 12", "Fusion Pixel 12 ZH", var(--font-sans);
  font-size: 12px;
  line-height: 1;
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: none;
  color: var(--accent-bright);
}

.lib-slot-grid .lib-slot__badge {
  position: absolute;
  right: 2px;
  bottom: 2px;
}

/* 两条整数像素线，代替渐变分割 */
.lib-rule {
  display: block;
  height: 3px;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--accent-dim);
  border-bottom: 1px solid rgba(0, 0, 0, 0.6);
  background: transparent;
}

/* 按钮 A：空心金边。与 .gate-btn / .btn-primary 同一族。 */
.lib-btn {
  background: rgba(0, 0, 0, 0.42);
  color: var(--accent-bright);
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  font-family: var(--font-sans);
  font-weight: 400;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}

.lib-btn:hover {
  background: rgba(0, 0, 0, 0.62);
  border-color: var(--accent-bright);
  color: var(--accent-bright);
  transform: none;
}

.lib-btn:active {
  border-color: var(--accent-dark);
  box-shadow: none;
  transform: none;
}

.lib-btn:disabled {
  opacity: 0.4;
  box-shadow: none;
}

.lib-btn:focus-visible,
.lib-slot:focus-visible,
.gate-btn:focus-visible,
.gate-toggle:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

.gate-input-wrap:focus-within {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}