/* The radius includes the entire feather. Keep an unlit margin even at the
   limits of aim; pointer coordinates for dragging and opening clues stay raw. */
.ag-lamp, #light {
  --ag-radius: min(35vmin, 340px);
  --ag-gutter: clamp(8px, 2vmin, 20px);
  --ag-clear-top: max(var(--ag-gutter), env(safe-area-inset-top, 0px));
  --ag-clear-bottom: max(var(--ag-gutter), env(safe-area-inset-bottom, 0px));
  --ag-inset: calc(var(--ag-radius) + var(--ag-gutter));
  --ag-beam-x: clamp(var(--ag-inset), var(--ag-x, 50%), calc(100% - var(--ag-inset)));
  --ag-beam-y: clamp(calc(var(--ag-radius) + var(--ag-clear-top)), var(--ag-y, 50%), calc(100% - var(--ag-radius) - var(--ag-clear-bottom)));
  --ag-dark: rgb(4 4 5 / 96%);
}
@supports (height: 100dvh) {
  .ag-lamp, #light {
    --ag-radius: min(35dvw, 35dvh, 340px, calc((100dvh - var(--ag-clear-top) - var(--ag-clear-bottom)) / 2));
  }
}
@media (max-width: 600px) {
  /* The archivist's phone preview has an opaque full-width control strip. */
  #light { --ag-clear-bottom: max(var(--ag-gutter), var(--ag-footer-clearance, 0px)); }
}
.ag-lamp:not(.ag-steady), #light:not(.steady) {
  background: radial-gradient(
    circle var(--ag-radius) at var(--ag-beam-x) var(--ag-beam-y),
    rgb(238 207 153 / 8%) 0%,
    rgb(202 172 127 / 4%) 32%,
    rgb(34 28 22 / 12%) 55%,
    rgb(14 12 11 / 46%) 72%,
    rgb(6 6 6 / 84%) 89%,
    var(--ag-dark) 100%
  );
}