/* ============================================================
   手写覆盖层（不要交给调校台）
   ------------------------------------------------------------
   调校台保存时只会整段重写 tweaks.css，不会碰到这个文件，
   所以结构性的、确定不再反复试的改动放这里最稳。
   ============================================================ */

/* 淡黄色（未选中）页签：背景纹样旋转 180°，梯形上下颠倒。
   元素本体不再画背景，改由一个独立的 ::before 来画，这样转的只是底图，
   文字和图标不会被一起转。 */
.tab {
  position: relative;
  isolation: isolate; /* 让 z-index:-1 的伪元素留在按钮内部，不跑到别处 */
}

.tab:not(.active) {
  background-image: none;
}

.tab:not(.active)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("assets_v9/tab_unselected_v8.webp") center / 100% 100% no-repeat;
  /* 原图上下留白不对称（上 10.1%、下 18.1%），旋转后整体会往下掉 8.5%，
     这里补回来，让翻转后的图案仍停在原来的位置 */
  transform: rotate(180deg);
  translate: 0 -8.5%;
  transform-origin: 50% 50%;
}

/* 紫色（选中）页签永远压在淡黄色页签之上。
   ------------------------------------------------------------
   这是页签控件本来的层叠语义：选中的那一片是「抽出来」的，
   接缝处的斜边和金色描边要盖住旁边那一片，而不是被它切掉。
   调校台的层级面板会给单个页签写死 z-index（.tab:nth-of-type(n)），
   权重很高，所以这里用 !important 兜住；切换选中项时也不用再手改。 */
.dict-tabs .tab {
  z-index: 0 !important;
}

.dict-tabs .tab.active {
  z-index: 3 !important;
}

/* 书写板底图跟随容器自由拉伸，不再按原比例居中留白。
   ------------------------------------------------------------
   这张图 1024×1536、默认容器 472×708，本来就是同一个 2:3，
   所以 object-fit:fill 在默认尺寸下的画法和 contain 一模一样，外观不变。
   只有在调校台把容器（或图片本身）拉成非 2:3 时才有区别：
   contain 会让整张图等比缩小、上下（或左右）空出来，看起来像宽高还被锁着；
   fill 才是真·只改一个方向。 */
.board-art {
  object-fit: fill;
}

/* 底部那条深紫色横条
   ------------------------------------------------------------
   现象：底部导航栏下面多出一条颜色均匀、横跨全宽、上沿是硬直边的深紫色横条。
   实测那条颜色是 rgb(23,11,79) = #170b4f，正好就是 --status-bg，
   也就是 .app-shell 自己的底色 —— 说明背景图根本没铺到底。

   原因是壳子比屏幕矮：100dvh 在 iOS 上会算成「扣掉状态栏」的高度
   （932 的屏幕报 872，956 的报 894），.app-shell 于是短了一截，
   里面 overflow:hidden 把背景图一起裁掉，下面那 60px 露出底色。

   改用 100vh 打底：vh 在 iOS 上是「大视口」＝整块物理屏幕的高度，
   不随地址栏、工具栏伸缩，所以壳子必定铺满；
   再由 index.html 里的小脚本算出 --app-h 精确覆盖（某些 WebView 连 vh 都算错）。
   壳子是 position:fixed + overflow:hidden，比可视区高一点不会有副作用。 */
.app-shell {
  height: var(--app-h, 100vh);
}

/* 第二道保险：万一还有浏览器把壳子算短，让画布本身也带同一张背景图。
   根元素的背景是整张画布的最底层，不存在「被哪一层盖住」的问题。
   （之前那版用的是 body::before + z-index:-1，Chrome 里能看见，
     但 WebKit 会把它画到根背景下面去 —— 在 iPhone 上等于不存在。） */
html {
  background: #170b4f url("assets_v9/shell_scene.webp") center top / cover no-repeat;
}

/* body 自己不能再刷一层不透明底色，否则会盖住上面那层画布背景；
   底色由 html 承担，视觉上没有区别。 */
body {
  background: transparent;
}

.scene-bg {
  /* 贴住左右上下四条边，而不是从状态栏下沿才开始铺。
     原来是 top: env(safe-area-inset-top)，图片顶边被切掉一条、上方留一条
     纯色 #170b4f —— 那就是「顶部看着发糊、像被刀切」的真正来源：
     一条死平的色带接一条被切断的拱窗，交界处怎么调都对不上。
     铺到顶以后既没有色带也没有切线，拱窗、月亮、城堡都是完整的，
     也就不需要任何渐隐遮罩了。 */
  top: 0 !important;
  bottom: 0 !important;
  height: auto !important;
  translate: none !important; /* 调校台留下的 -3px 位移会让底边再露出 3px 缝隙 */
}

/* 顶边那层「渐隐」——取消
   ------------------------------------------------------------
   以前背景图从状态栏下沿才开始铺，图片顶边被切了一刀（月亮剩个平顶），
   于是有人在那条切线加了一条渐变遮罩把硬边化开，代价是顶部一条变灰、发糊。
   现在两件事一起做掉：
   ① 背景铺到顶（上面那条规则），根本没有切线，也就不需要遮罩；
   ② 万一别处还留着遮罩或滤镜，这里全部清空，也不许再冒出伪元素盖在背景上。
   要藏硬线就改背景图本身，别在页面上盖纱。 */
.scene-bg {
  -webkit-mask: none !important;
  mask: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  filter: none !important;
}

.scene-bg::before,
.scene-bg::after,
.app-shell::before,
.app-shell::after {
  content: none !important;
  display: none !important;
}