/* WebGL glass is an optical layer, not a replacement for readable DOM controls.
   The solid book page and its text intentionally remain untouched. */

@media (max-width: 899px) {
  html, body { overflow-x: clip; }
  .bottom-nav[data-liquid-glass],
  .quick-menu[data-liquid-glass],
  .rank-tabs[data-liquid-glass],
  .search-row[data-liquid-glass],
  .browser-bar[data-liquid-glass] {
    border: 1px solid rgba(255, 255, 255, .8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .92),
      inset 0 -1px 0 rgba(126, 145, 167, .12),
      0 10px 28px rgba(29, 42, 67, .12);
  }
  .bottom-nav[data-liquid-glass] {
    border-radius: 999px;
    overflow: visible;
  }
  .bottom-nav[data-liquid-glass="webgl"],
  html[data-theme] body .bottom-nav[data-liquid-glass="webgl"] {
    border-color: transparent;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    /* WebGL 绘制唯一的玻璃外壳，宿主不再叠加第二圈描边与材质。 */
    box-shadow: none;
  }
  html[data-theme] body .bottom-nav[data-liquid-glass="webgl"]::before,
  html[data-theme] body .bottom-nav[data-liquid-glass="webgl"]::after {
    display: none;
  }
  .bottom-nav[data-liquid-glass="fallback"] {
    background: rgba(247, 250, 255, .76);
  }
  .bottom-nav[data-liquid-glass] .nav-item.active {
    background: rgba(255, 255, 255, .47);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88),
      0 2px 8px rgba(47, 68, 101, .10);
  }
  .bottom-nav[data-liquid-glass] .nav-item:active {
    background: rgba(255, 255, 255, .6);
  }
  html[data-theme="dark"] .bottom-nav[data-liquid-glass] .nav-item.active,
  html[data-theme="dark"] .bottom-nav[data-liquid-glass] .nav-item:active {
    color: #b6dbff;
    background: rgba(21, 32, 45, .88);
    box-shadow: inset 0 1px 0 rgba(180, 216, 255, .2),
      0 2px 8px rgba(0, 0, 0, .23);
  }

  .quick-menu[data-liquid-glass] {
    border-radius: 23px;
    overflow: visible;
  }
  .quick-menu[data-liquid-glass="webgl"] {
    background: rgba(250, 252, 255, .15);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .quick-menu[data-liquid-glass="fallback"] {
    background: rgba(250, 252, 255, .84);
  }
  .quick-menu[data-liquid-glass] .quick-menu-item:hover,
  .quick-menu[data-liquid-glass] .quick-menu-item:focus-visible {
    background: rgba(255, 255, 255, .47);
  }

  .rank-tabs[data-liquid-glass],
  .search-row[data-liquid-glass],
  .browser-bar[data-liquid-glass] {
    border-radius: 999px;
    padding: 5px;
  }
  .rank-tabs[data-liquid-glass="webgl"],
  .search-row[data-liquid-glass="webgl"],
  .browser-bar[data-liquid-glass="webgl"] {
    background: rgba(246, 249, 254, .14);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .rank-tabs[data-liquid-glass="fallback"],
  .search-row[data-liquid-glass="fallback"],
  .browser-bar[data-liquid-glass="fallback"] {
    background: rgba(247, 250, 255, .78);
  }
  .rank-tabs[data-liquid-glass] .rank-tab.active {
    background: rgba(255, 255, 255, .58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88),
      0 1px 5px rgba(32, 48, 78, .09);
  }
  html[data-theme="dark"] .rank-tabs[data-liquid-glass] .rank-tab.active {
    background: rgba(25, 36, 49, .9);
    color: #f5f5f7;
    box-shadow: inset 0 1px 0 rgba(180, 216, 255, .16);
  }
  .search-row[data-liquid-glass] .search-input,
  .browser-bar[data-liquid-glass] .browser-input {
    border-color: transparent;
    background: rgba(255, 255, 255, .12);
    box-shadow: none;
  }
  .browser-bar[data-liquid-glass] {
    margin: 8px 12px 12px;
  }
  html[data-theme="dark"] .bottom-nav[data-liquid-glass="fallback"],
  html[data-theme="dark"] .quick-menu[data-liquid-glass="fallback"],
  html[data-theme="dark"] .rank-tabs[data-liquid-glass="fallback"],
  html[data-theme="dark"] .search-row[data-liquid-glass="fallback"],
  html[data-theme="dark"] .browser-bar[data-liquid-glass="fallback"] {
    background: rgba(34, 34, 38, .88);
    border-color: rgba(200, 218, 238, .23);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09),
      0 10px 28px rgba(0, 0, 0, .25);
  }
  html[data-theme="dark"] .search-row[data-liquid-glass] .search-input,
  html[data-theme="dark"] .browser-bar[data-liquid-glass] .browser-input {
    background: rgba(9, 12, 18, .3);
    color: #f5f5f7;
  }
  #toast[data-liquid-glass="webgl"] {
    border-color: transparent;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
  #toast[data-liquid-glass="webgl"]::before,
  #toast[data-liquid-glass="webgl"]::after {
    display: none;
  }
}

/* One WebGL canvas on the header draws both the 30px back dot and title pill. */
.reader-icon::before,
.reader.theme-night .reader-icon::before,
.reader-menu-orb::before,
.reader.theme-night .reader-menu-orb::before {
  display: none;
}
.reader-back-glass,
.orb-glass {
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--reader-material-edge);
  border-radius: 50%;
  background: var(--reader-material);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7),
    0 3px 11px rgba(26, 38, 55, .11);
}
.reader-back-glass { inset: 7px; }
.orb-glass { inset: 4px; }
.reader-back-dot { position: relative; z-index: 1; }
.reader-header[data-liquid-glass="webgl"] .reader-back-glass,
.reader-header[data-liquid-glass="webgl"] .reader-heading,
.reader-menu-orb[data-liquid-glass="webgl"] .orb-glass {
  background: rgba(248, 251, 255, .12);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.reader.theme-night .reader-header[data-liquid-glass="webgl"] .reader-back-glass,
.reader.theme-night .reader-header[data-liquid-glass="webgl"] .reader-heading,
.reader.theme-night .reader-menu-orb[data-liquid-glass="webgl"] .orb-glass {
  background: rgba(23, 28, 35, .1);
}
.reader-heading {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65),
    0 3px 12px rgba(25, 38, 58, .09);
}
.reader-footer[data-liquid-glass],
.reader-drawer[data-liquid-glass] {
  border-color: rgba(255, 255, 255, .8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88),
    0 12px 30px rgba(28, 42, 65, .17);
}
.reader-footer[data-liquid-glass="webgl"] {
  background: rgba(248, 251, 255, .14);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.reader-footer[data-liquid-glass="fallback"] {
  background: rgba(248, 251, 255, .74);
}
.reader.theme-night .reader-footer[data-liquid-glass="webgl"] {
  background: rgba(248, 251, 255, .14);
}
.reader-drawer[data-liquid-glass="webgl"],
.reader.theme-night .reader-drawer[data-liquid-glass="webgl"] {
  background: rgba(248, 251, 255, .19);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.reader-drawer[data-liquid-glass="webgl"]::before {
  content: '';
  position: absolute;
  z-index: 0;
  inset: 0;
  border-radius: inherit;
  background: rgba(250, 252, 255, .38);
  pointer-events: none;
}
.reader-drawer[data-liquid-glass="webgl"] > :not(canvas) {
  position: relative;
  z-index: 1;
}
.reader.theme-night .reader-drawer[data-liquid-glass="webgl"] {
  /* The night page is very dark; retain a readable light sheet over the lens. */
  background: rgba(248, 251, 255, .97);
}
.reader.theme-night .reader-drawer[data-liquid-glass="webgl"]::before {
  background: rgba(248, 251, 255, .88);
}
.reader.theme-night .reader-drawer[data-liquid-glass="webgl"] > canvas[data-liquid-glass-layer] {
  opacity: .12;
}
.reader-drawer[data-liquid-glass="fallback"],
.reader.theme-night .reader-drawer[data-liquid-glass="fallback"] {
  background: rgba(248, 251, 255, .91);
}
.reader-drawer[data-liquid-glass] .setting-range-row {
  background: rgba(255, 255, 255, .28);
  border-color: rgba(255, 255, 255, .58);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .62);
}
.reader-menu-orb[data-liquid-glass] .orb-glass {
  border-color: rgba(255, 255, 255, .68);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8),
    0 7px 18px rgba(25, 39, 63, .19);
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  .reader-back-glass, .orb-glass {
    background: var(--chrome);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: var(--ink);
  }
  .reader.theme-night .reader-back-glass,
  .reader.theme-night .orb-glass { background: #262628; }
}
@media (prefers-reduced-motion: reduce) {
  .reader-back-glass, .orb-glass { transition: none; }
}