/* ---------- water layer (shared by every design) ----------
   The shader reads its palette from CSS custom properties on :root:
     --bg            paper colour (required)
     --water         tint of thick water          default: #ccE6F2-ish
     --water-veil    0..1 how much the tint washes out text   default .42
     --water-blur    blur under the film (mip levels)          default 1.1
     --water-spec    specular highlight strength               default 1
     --water-rim     meniscus line colour                      default dark
     --water-rim-amt 0..1 meniscus strength                    default .5
     --water-refract refraction strength                       default 420
     --paper         plain | grid                              default plain
     --grid-size     minor grid spacing in px (major = 5x)     default 8
     --grid-minor / --grid-major   grid line colours
   ---------------------------------------------------------- */

/* Text stays in the DOM (layout, links, a11y) but its pixels are painted by the shader. */
.water #content { -webkit-text-fill-color: transparent; }

/* Fallback when images can't be captured (e.g. page opened from file://): lift them above the water. */
.water-no-images #content img { position: relative; z-index: 4; }
.water #content ::selection { background: transparent; }

#water {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  display: none;
}
.water #water { display: block; }

.ui {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  display: none;
}
.water .ui { display: block; }

#drain {
  pointer-events: auto;
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  padding: 0.5rem 0.85rem;
  font: 500 0.78rem/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
}
#drain:hover { background: rgba(255, 255, 255, 0.7); }
#drain:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.hint {
  position: absolute;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  margin: 0;
  padding: 0.55rem 0.95rem;
  font-size: 0.8rem;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
  transition: opacity 0.9s ease;
}
.hint.hidden { opacity: 0; }
.hint .coarse { display: none; }
@media (pointer: coarse) {
  .hint .fine { display: none; }
  .hint .coarse { display: inline; }
}