/* 手机界面的贴图槽位（web/js/ui-slots.js「手机界面」一组，docs/ART_BIBLE.md 第 16 节）。
   有图时 <html> 上挂 ui-<名>、:root 上有 --ui-<名>；没图时这里一条都不生效，按钮上照旧是毛笔单字。
   放在最后加载，电脑、手机同一套。 */

/* ——图标：按钮上那个单字隐去，换成图—— */
.ui-icon-rail .dbtn[data-d="rail"] i,
.ui-icon-edict .dbtn[data-d="edict"] i,
.ui-icon-inv .dbtn[data-d="inv"] i,
.ui-icon-night .dbtn[data-d="night"] i,
.ui-icon-chart .more-grid [data-h="chart"] i,
.ui-icon-harem .more-grid [data-h="harem"] i,
.ui-icon-gallery .more-grid [data-h="gallery"] i,
.ui-icon-neitang .more-grid [data-h="wallet"] i,
.ui-icon-settings .more-grid [data-h="settings"] i,
.ui-icon-home .more-grid [data-h="title"] i,
.ui-icon-gallery .menu-minor [data-m="gallery"] i,
.ui-icon-ach .menu-minor [data-m="ach"] i,
.ui-icon-records .menu-minor [data-m="records"] i,
.ui-icon-neitang .menu-minor [data-m="wallet"] i,
.ui-icon-settings .menu-minor [data-m="settings"] i {
  display: inline-block; flex: none; width: 1.3em; height: 1.3em; overflow: hidden; color: transparent; text-shadow: none;
  background: var(--ico) center / contain no-repeat;
}
/* 底栏：器物多是细长的（笏板、绿头牌），按字号算显得单薄，单独放大 */
.ui-icon-rail .dock [data-d="rail"] i, .ui-icon-edict .dock [data-d="edict"] i,
.ui-icon-inv .dock [data-d="inv"] i, .ui-icon-night .dock [data-d="night"] i { width: 32px; height: 32px; }
@media (max-width: 860px) {
  .ui-icon-rail .dock [data-d="rail"] i, .ui-icon-edict .dock [data-d="edict"] i,
  .ui-icon-inv .dock [data-d="inv"] i, .ui-icon-night .dock [data-d="night"] i { width: 30px; height: 30px; }
}
.ui-icon-rail [data-d="rail"] i, .ui-icon-rail .hud-btns [data-h="rail"] { --ico: var(--ui-icon-rail); }
.ui-icon-edict [data-d="edict"] i { --ico: var(--ui-icon-edict); }
.ui-icon-inv [data-d="inv"] i { --ico: var(--ui-icon-inv); }
.ui-icon-night [data-d="night"] i { --ico: var(--ui-icon-night); }
.ui-icon-feeds .hud-btns [data-h="feeds"] { --ico: var(--ui-icon-feeds); }
.ui-icon-chart [data-h="chart"] { --ico: var(--ui-icon-chart); }
.ui-icon-harem [data-h="harem"] { --ico: var(--ui-icon-harem); }
.ui-icon-gallery :is([data-h="gallery"], [data-m="gallery"]) { --ico: var(--ui-icon-gallery); }
.ui-icon-ach [data-m="ach"] { --ico: var(--ui-icon-ach); }
.ui-icon-records [data-m="records"] { --ico: var(--ui-icon-records); }
.ui-icon-neitang :is([data-h="wallet"], [data-m="wallet"]) { --ico: var(--ui-icon-neitang); }
.ui-icon-settings :is([data-h="settings"], [data-m="settings"]) { --ico: var(--ui-icon-settings); }
.ui-icon-home [data-h="title"] { --ico: var(--ui-icon-home); }

/* 顶栏圆钮（臣、闻、局、宫、卷、帑、设、归）：字直接写在按钮里，图叠在原来的深色圆底上 */
.ui-icon-rail .hud-btns [data-h="rail"],
.ui-icon-feeds .hud-btns [data-h="feeds"],
.ui-icon-chart .hud-more [data-h="chart"],
.ui-icon-harem .hud-more [data-h="harem"],
.ui-icon-gallery .hud-more [data-h="gallery"],
.ui-icon-neitang .hud-more [data-h="wallet"],
.ui-icon-settings .hud-more [data-h="settings"],
.ui-icon-home .hud-more [data-h="title"] {
  color: transparent;
  background: var(--ico) center / 66% no-repeat, radial-gradient(circle at 35% 30%, #3a2618, #160e09);
}
/* 标题页那排小钮：图本身就是器物，不再套圆圈 */
.ui-icon-gallery .menu-minor [data-m="gallery"] i, .ui-icon-ach .menu-minor [data-m="ach"] i,
.ui-icon-records .menu-minor [data-m="records"] i, .ui-icon-neitang .menu-minor [data-m="wallet"] i, .ui-icon-settings .menu-minor [data-m="settings"] i {
  width: 32px; height: 32px; border: 0; border-radius: 0;
}

/* ——描金饰条：底部抽屉上沿、全屏页标题下沿。两端角花不拉伸，中段拉长—— */
.ui-trim .sheet::before,
.ui-trim .pg-head::after,
.ui-trim .modal-wrap.ov-page .box-title::after {
  content: ""; position: absolute; left: 0; right: 0; height: 18px; pointer-events: none;
  border-style: solid; border-width: 0 30px; border-image: var(--ui-trim) 0 160 fill / 0 30px / 0 stretch;
}
.ui-trim .sheet { border-top-color: transparent; }
.ui-trim .sheet::before { top: -7px; border-radius: 14px 14px 0 0; }
.ui-trim .pg-head { position: relative; border-bottom-color: transparent; }
.ui-trim .pg-head::after { bottom: -9px; }
.ui-trim .modal-wrap.ov-page .box-title { position: relative; }
.ui-trim .modal-wrap.ov-page .box-title::after { left: -44px; right: -44px; bottom: -12px; }

/* ——横屏提示：竖挂的空白立轴，"竖持"两字由程序竖写在轴上—— */
.ui-turn-scroll #turn .seal {
  width: 88px; height: 132px; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: var(--ui-turn-scroll) center / contain no-repeat;
  writing-mode: vertical-rl; color: #2a1e15; font-size: 24px; letter-spacing: 0.3em; text-shadow: none;
}