/* 状态节点始终隐藏；首页手势监听真实页面，不铺透明按钮拦截内容。 */
#light-installation[hidden] { display: none !important; pointer-events: none; }
/* 横向拨水保留指针事件，竖向滚动和双指缩放继续交给浏览器。 */
#page-home { touch-action: pan-y pinch-zoom; }
/* 手形只标记当前可玩的背景节点；按钮、正文与离页后恢复各自原有光标。 */
.tide-background-grab { cursor: grab !important; }
.tide-background-grabbing { cursor: grabbing !important; }
/* 音效只保留一个图标按钮，与现有日夜按钮保持同一材质。 */
.tide-sound-toggle { width: 38px; padding: 8px; flex-shrink: 0; }
.tide-sound-toggle svg { width: 19px; height: 19px; }
.tide-sound-toggle .sound-on { display: none; }
.tide-sound-toggle[aria-pressed="true"] { color: var(--blue); border-color: var(--focus); background: var(--blue-soft); }
.tide-sound-toggle[aria-pressed="true"] .sound-on { display: block; }
.tide-sound-toggle[aria-pressed="true"] .sound-off { display: none; }
.tide-sound-toggle[hidden] { display: none; }
/* WebGL 备用图上使用同色光核和涟漪；正常光场由着色器绘制。 */
.tide-feedback {
  /* 最轻量的后备高光也沿用珍珠与薄荷，不退回饱和蓝紫。 */
  --charge-rgb: 178, 239, 211;
  --charge-core: #fff5df;
  position: absolute;
  left: var(--charge-x, 70%);
  top: var(--charge-y, 50%);
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
:root[data-theme="light"] .tide-feedback { --charge-rgb: 62, 145, 118; --charge-core: #f4dfc9; }
.site-light-background[data-state="ready"][data-ambient="ready"] .tide-feedback { display: none; }
.tide-feedback::before, .tide-feedback::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.tide-feedback::before {
  width: calc(36px + var(--charge-level, 0) * 180px);
  height: calc(36px + var(--charge-level, 0) * 180px);
  background: radial-gradient(circle, var(--charge-core), rgba(var(--charge-rgb), .8) 25%, rgba(var(--charge-rgb), .3) 46%, transparent 70%);
}
.tide-feedback::after { width: 38px; height: 16px; border: 1px solid rgba(var(--charge-rgb), .9); box-shadow: 0 0 12px rgba(var(--charge-rgb), .5), inset 0 0 10px rgba(var(--charge-rgb), .3); }
.tide-feedback[data-phase="charge"], .tide-feedback[data-phase="release"] { opacity: 1; }
.tide-feedback[data-phase="release"]::before { animation: tide-core-fade .55s ease-out both; }
.tide-feedback[data-phase="release"]::after { animation: tide-water-release 1.2s ease-out both; }
@keyframes tide-core-fade { to { opacity: 0; transform: translate(-50%, -50%) scale(1.4); } }
@keyframes tide-water-release { to { opacity: 0; transform: translate(-50%, -50%) scale(10); } }
/* 无 WebGL 时用同一弹道计划绘制火星，不退回只有一个圆环的交互。 */
.tide-spark-fallback { position: absolute; inset: var(--scene-top-gap) 0 auto; width: 100%; height: 100%; pointer-events: none; }
.site-light-background[data-state="ready"][data-ambient="ready"] .tide-spark-fallback,
.site-light-background[data-backup-draw="ready"] .tide-feedback { display: none; }
/* 仅四个透明贴图随弹道移动；日间用浅阴影，夜间用柔和水光托住毛发。 */
.tide-puppies { position: fixed; z-index: 4; inset: var(--scene-top-gap) 0 auto; pointer-events: none; overflow: hidden; }
.tide-puppies[hidden] { display: none; }
.tide-puppy { position: absolute; left: 0; top: 0; opacity: 0; will-change: transform, opacity;
  filter: drop-shadow(0 0 5px rgba(216, 247, 236, .40)); transform-origin: center bottom; }
:root[data-theme="light"] .tide-puppy { filter: drop-shadow(0 2px 3px rgba(28, 74, 78, .24)); }
@media (prefers-reduced-motion: reduce) {
  /* 减少动态时仅给静态小高光，不播放扩散和缩放。 */
  .tide-feedback::before, .tide-feedback::after { animation: none !important; }
  .tide-feedback::before { width: 38px; height: 38px; }
}