/* 墨线分镜 · 底部导航（大厅与英灵/成就/星盘/图鉴共用）（W1-A 负责）
 * 黑底条，高 --nav-h + 安全区；选中项图标上浮、背后垫一块倾斜的黄胶带、字变黑。 */

.ink-nav {
  position: relative; z-index: 6; flex: none;
  display: flex; align-items: stretch;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding: 0 6px var(--safe-bottom);
  background: var(--ink);
  border-top: 3px solid var(--ink);
  font-family: var(--font-cjk);
}

.ink-nav__item {
  position: relative; z-index: 0;
  flex: 1 1 0; min-width: 0; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  /* 未选中：白线、深灰填充、灰字 */
  --nav-line: #f3eee3;
  --nav-fill: #4a4a4a;
  --nav-acc: #9a9a9a;
  --nav-acc2: #cfcfcf;
  color: #a8a8a8;
}
.ink-nav__item.is-on {
  --nav-line: #111111;
  --nav-fill: #ffffff;
  --nav-acc: var(--red);
  --nav-acc2: var(--yellow);
  color: var(--ink);
  cursor: default;
}

/* 选中态背后的黄胶带 */
.ink-nav__item::before {
  content: ""; position: absolute; z-index: -1;
  left: 4px; right: 4px; top: 6px; bottom: 6px;
  background: var(--yellow);
  border-left: 2px dashed rgba(17, 17, 17, .35);
  border-right: 2px dashed rgba(17, 17, 17, .35);
  transform: rotate(-4deg) skewX(-10deg) scale(.6);
  opacity: 0;
  transition: transform .18s var(--ease-pop), opacity .12s;
}
.ink-nav__item.is-on::before { opacity: 1; transform: rotate(-4deg) skewX(-10deg) scale(1); }

.ink-nav__ico {
  display: block; width: 28px; height: 28px;
  transition: transform .18s var(--ease-pop);
}
.ink-nav__item.is-on .ink-nav__ico { transform: translateY(-6px); }
.ink-nav__lbl {
  font-size: 11px; font-weight: 900; line-height: 1; letter-spacing: .06em;
  transition: transform .18s var(--ease-pop);
}
.ink-nav__item.is-on .ink-nav__lbl { transform: translateY(-3px); }
.ink-nav__item:not(.is-on):active .ink-nav__ico { transform: translateY(2px); }

.ink-nav__svg { display: block; overflow: visible; }
.ink-nav__svg .ln { fill: none; stroke: var(--nav-line); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ink-nav__svg .fl { fill: var(--nav-fill); stroke: var(--nav-line); stroke-width: 2.5; stroke-linejoin: round; }
.ink-nav__svg .ac { fill: var(--nav-acc); stroke: var(--nav-line); stroke-width: 2; stroke-linejoin: round; }
.ink-nav__svg .a2 { fill: var(--nav-acc2); stroke: none; }
.ink-nav__svg .sd { fill: #111111; stroke: #111111; stroke-width: 1.5; stroke-linejoin: round; }
/* 烬环：同一段弧画两遍，外层描边、内层填色，得到带轮廓的粗环 */
.ink-nav__svg .ring-o { fill: none; stroke: var(--nav-line); stroke-width: 6.6; stroke-linecap: round; }
.ink-nav__svg .ring-f { fill: none; stroke: var(--nav-fill); stroke-width: 2.4; stroke-linecap: round; }