/* Styles for elements created at runtime by js/effects.js and js/overlays.js.
   Anything that varies per-instance (position, computed colors) is still set
   inline by the JS that creates the element; everything constant lives here. */

/* ── Click ripple (js/effects.js ripple()) ── */
.ripple {
  position: absolute;
  border-radius: 50%;
  mix-blend-mode: screen;
  background: radial-gradient(closest-side, transparent 58%, var(--lampc) 72%, transparent 84%);
  will-change: transform, opacity;
}
.ripple--lit {
  mix-blend-mode: multiply;
}

/* ── Hidden-features card (js/overlays.js hints()) ── */
.hint-card {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 12;
  background: var(--ground);
  border: 1px solid var(--hot);
  padding: 14px 18px;
  font: 11px/1.9 var(--mono);
  letter-spacing: 0.1em;
  color: var(--dim);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.5);
}
.hint-card--lit {
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
}
.hint-title {
  color: var(--hot);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.hint-footer {
  margin-top: 6px;
  color: var(--faint);
}

/* ── Grid inspector (js/overlays.js grid()) ── */
.grid-overlay {
  position: fixed;
  inset: 0;
  z-index: 9;
  pointer-events: none;
  font: 9.5px/1.4 var(--mono);
  color: var(--hot);
  letter-spacing: 0.12em;
}
.grid-overlay-base {
  position: absolute;
  inset: 0;
}
.grid-overlay-col {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1560px, 100% - 2 * clamp(24px, 3.5vw, 64px));
}
.grid-overlay-ruler {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  opacity: 0.94;
}
.grid-tick {
  position: absolute;
  bottom: 0;
  width: 1px;
}
.grid-tick-label {
  position: absolute;
  top: 2px;
}
.grid-overlay-cross {
  position: absolute;
  inset: 0;
}
.grid-overlay-vline {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--hot);
  opacity: 0.75;
  transform: translateX(-999px);
}
.grid-overlay-hline {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hot);
  opacity: 0.75;
  transform: translateY(-999px);
}
.grid-overlay-read {
  position: absolute;
  left: 0;
  top: 0;
  background: var(--hot);
  color: var(--ground);
  padding: 2px 6px;
  transform: translate(-999px, -999px);
  white-space: nowrap;
  font-weight: 600;
}
.grid-overlay-badge {
  position: absolute;
  left: 12px;
  bottom: 12px;
  background: var(--ground);
  padding: 7px 10px;
  line-height: 1.8;
  text-transform: uppercase;
}
.grid-badge-title {
  color: var(--hot);
}
.grid-badge-row {
  color: var(--dim);
}

/* ── Selection word-count bar (js/main.js selectionchange) ── */
.sel-bar {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 11;
  pointer-events: none;
  background: var(--hot);
  color: var(--ground);
  padding: 4px 9px;
  font: 9.5px/1.6 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
}

/* ── Project image fx tag (js/main.js dblclick) ── */
.fx-tag {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--hot);
  margin-top: -0.7rem;
}