/* ASCII-SEA（2026-10-31 小克）：设置栏变成一缸点阵鲨鱼，照圆圆录的 sumit kumar「ASCII Sharks」。
   - 底色是浅灰的「水」+ 一层很细的网格；鲨鱼在 ascii-sea.js 里画
   - 卡片全换成磨砂玻璃：鲨鱼游到卡片底下会糊成一团灰影（视频里那样）
   - 便当格改成一排排玻璃小图标（四个一排），腾出水面给鲨鱼游；颜色收成黑白灰，只留天数和小爱心那点粉
   - 只在设置栏首页生效（JS 给 #menu 加 .sea-on），子页面还是原来的样子
   删掉这个 css 和 ascii-sea.js 就回到原来的样子。 */
#menu.sea-on {
  isolation: isolate;
  --sea-bg: #E4E5E6;
  --glass: rgba(255, 255, 255, .5);
  --glass-2: rgba(255, 255, 255, .6);
  --glass-edge: rgba(255, 255, 255, .9);
  --glass-ring: rgba(22, 30, 40, .07);
  --glass-shadow: 0 9px 24px -15px rgba(26, 34, 46, .3), 0 1px 1.5px rgba(26, 34, 46, .05);
  --glass-fx: blur(14px) saturate(150%);
  --sea-ink: #1f2328;
  --sea-chip: rgba(22, 30, 40, .055);
  --line: rgba(22, 30, 40, .085);
}
:root[data-theme="dark"] #menu.sea-on {
  --sea-bg: #101214;
  --glass: rgba(40, 43, 48, .52);
  --glass-2: rgba(54, 57, 63, .56);
  --glass-edge: rgba(255, 255, 255, .13);
  --glass-ring: rgba(255, 255, 255, .06);
  --glass-shadow: 0 14px 30px -14px rgba(0, 0, 0, .8), 0 1px 2px rgba(0, 0, 0, .4);
  --sea-ink: #eef0f3;
  --sea-chip: rgba(255, 255, 255, .075);
  --line: rgba(255, 255, 255, .075);
}
#menu.sea-on:not([data-sidebar-tint]) { --sbd-bg: var(--sea-bg); background: var(--sea-bg); }
/* 设置栏颜色调过的：水就用她调的颜色，玻璃跟着变 */
#menu.sea-on[data-sidebar-tint] { --sea-bg: var(--sbd-bg); }

/* 水 */
.ascii-sea { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .7s ease;
  background-repeat: repeat; background-position: 0 0; }
#menu.sea-on > .ascii-sea { opacity: 1; }
.ascii-sea canvas { position: absolute; left: 0; top: 0; display: block; }
.shark-water { display: none !important; }   /* 今天下午那版方块鲨鱼：被这版换掉了 */

/* ---------- 玻璃：卡片、檐廊、小图标 ---------- */
#menu.sea-on .sbd-card,
#menu.sea-on .sbd-tile.sbd-porch,
#menu.sea-on .sbd-tile:not(.sbd-porch) .sbd-tile-ic {
  background: var(--glass); background-image: none;
  -webkit-backdrop-filter: var(--glass-fx); backdrop-filter: var(--glass-fx);
  box-shadow: var(--glass-shadow), inset 0 .5px 0 var(--glass-edge), inset 0 0 0 .5px var(--glass-ring);
}
#menu.sea-on .sbd-card { border-radius: 18px; }

/* ---------- 便当格 → 四个一排的玻璃小图标（像手机桌面） ---------- */
#menu.sea-on .sbd-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px 4px; margin: 2px 0 24px; }
#menu.sea-on .sbd-tile:not(.sbd-porch) {
  flex-direction: column; justify-content: flex-start; align-items: center; gap: 7px;
  min-height: 0; padding: 0; border-radius: 0; overflow: visible; isolation: auto;
  background: none; box-shadow: none; color: var(--text);
}
#menu.sea-on .sbd-tile:not(.sbd-porch)::before { display: none; }
#menu.sea-on .sbd-tile:not(.sbd-porch):active { transform: none; background: none; }
#menu.sea-on .sbd-tile:not(.sbd-porch) .sbd-tile-ic {
  width: 58px; height: 58px; border-radius: 19px; color: var(--sea-ink); background-color: var(--glass-2);
  transition: transform .5s var(--sb2-spring, cubic-bezier(.2, 1.45, .4, 1));
}
#menu.sea-on .sbd-tile:not(.sbd-porch):active .sbd-tile-ic { transform: scale(.88); transition-duration: .12s; }
#menu.sea-on .sbd-tile:not(.sbd-porch) .sbd-tile-ic svg { width: 25px; height: 25px; }
#menu.sea-on .sbd-tile:not(.sbd-porch) .sbd-tile-tx { text-align: center; }
#menu.sea-on .sbd-tile:not(.sbd-porch) .sbd-tile-tx b { font-size: 11.5px; line-height: 1.25; font-weight: 500; letter-spacing: 0;
  text-shadow: 0 0 6px var(--sea-bg), 0 0 2px var(--sea-bg); }
#menu.sea-on .sbd-tile:not(.sbd-porch) .sbd-tile-tx small { display: none; }
/* 一起听歌在放歌时：三根小音柱挂在图标右上角 */
#menu.sea-on .sb2-eq { top: 7px; right: calc(50% - 23px); height: 11px; }
#menu.sea-on .sb2-eq i { width: 2.5px; background: var(--sea-ink); }

/* 檐廊：整行一张玻璃卡片，月亮是暖白色的 */
#menu.sea-on .sbd-tile.sbd-porch { grid-column: 1 / -1; min-height: 64px; padding: 12px 14px 12px 12px; gap: 12px; border-radius: 20px;
  color: var(--text); flex-direction: row; align-items: center; justify-content: flex-start; }
#menu.sea-on .sbd-tile.sbd-porch::before, #menu.sea-on .sbd-tile.sbd-porch::after,
#menu.sea-on .sbd-porch .sb2-meteor, #menu.sea-on .sbd-porch .sb2-cloud { display: none; }
#menu.sea-on .sbd-porch .sbd-tile-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--sea-chip); color: var(--sea-ink); box-shadow: none; }
#menu.sea-on .sbd-porch .sbd-porch-tx { text-shadow: none; }
#menu.sea-on .sbd-porch .sbd-porch-tx b { color: var(--text); font-size: 15px; }
#menu.sea-on .sbd-porch .sbd-porch-tx small { color: var(--dim); }
#menu.sea-on .sbd-porch .sbd-porch-moon { color: #d9a441; }
:root[data-theme="dark"] #menu.sea-on .sbd-porch .sbd-porch-moon { color: #f4d58f; }
#menu.sea-on .sbd-porch:active { filter: none; transform: scale(.975); }

/* ---------- 列表 ---------- */
#menu.sea-on .sb2-ic { background: var(--sea-chip); color: var(--sea-ink); box-shadow: none; }
#menu.sea-on .sbd-sec-title { text-shadow: 0 0 6px var(--sea-bg); }

/* 进场：只用位移（带透明度的话，动画那一下玻璃底下看不到鲨鱼，会闪一下） */
#menu.sea-on .sbd-tile, #menu.sea-on .sbd-sec { animation-name: sea-rise; }
@keyframes sea-rise { from { transform: translateY(12px) scale(.96); } }

/* 最底下那行字也压在水上 */
#menu.sea-on .sb2-foot small { text-shadow: 0 0 6px var(--sea-bg); }

@media (prefers-reduced-motion: reduce) {
  .ascii-sea { transition: none; }
  #menu.sea-on .sbd-tile, #menu.sea-on .sbd-sec { animation: none !important; }
}