/* The game-art backdrop shared by the two auth pages (login, signup).
 *
 * It was 346 hand-written <i class="tile"> elements inside login.html, which is
 * why signup.html never had it: copying the background meant copying 260 lines
 * of markup into a second file, and the two would have drifted the first time
 * one of them changed. The tiles are generated now (auth-backdrop.js) and the
 * look lives here, once.
 *
 * Motion is `alternate`, not a loop — a looping drift has to reset, and a reset
 * is a jump. Breathing back and forth never seams.
 *
 * The art is greyed nearly out: it should register as somewhere to go, not
 * compete with the one thing on screen you can act on.
 */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.layer{position:absolute;inset:-30%;display:grid;justify-content:center;align-content:center;
       will-change:transform;backface-visibility:hidden}
/* No radius and no gap. Both let the near-black page background through
   between tiles, and once the grid actually filled the viewport that read as
   a lattice of black lines ruled across the artwork (owner, 2026-09-28) —
   rounded corners would leave black diamonds at every junction, which is
   worse. Butted together the layer reads as one wall of game art, which is
   the thing it was always meant to be. */
.tile{background-size:cover;background-position:center}

/* Fixed column WIDTHS, so a tile is a thumbnail at every viewport rather than
 * a fraction of an oversized layer.
 *
 * ONE layer now (owner, 2026-09-29). There were three at different scales and
 * speeds; the far two were blurred to 16px and 4px at .20/.24 opacity, which
 * bought texture and no recognisable game, and three translucent greyscale
 * sheets stacked full-bleed average out to flat grey. This is the layer that
 * was doing the work.
 *
 * Grey, but not colourless: a trace of the original keeps it feeling like
 * somewhere to go rather than a texture. No gap and no radius — both let the
 * near-black page background through between tiles, which read as a lattice of
 * black lines ruled across the artwork.
 */
.near{grid-template-columns:repeat(auto-fill,minmax(132px,132px));gap:0px;
      filter:grayscale(.8) brightness(.72) contrast(1.02);opacity:.34;
      animation:driftNear 58s ease-in-out infinite alternate}
.near .tile{height:83px}

@keyframes driftNear{from{transform:rotate(-11deg) translate3d(0,0,0)}
                     to  {transform:rotate(-11deg) translate3d(-9%,-19%,0)}}

/* Heavy right under the card, light at the edges: the form needs contrast, the
   corners need to show what is behind them. A flat scrim gave both the same
   treatment and flattened the whole thing. */
.scrim{position:absolute;inset:0;
       background:radial-gradient(ellipse 52% 48% at 50% 50%,
                  rgba(7,11,26,.93) 0%, rgba(7,11,26,.74) 38%,
                  rgba(7,11,26,.42) 70%, rgba(7,11,26,.30) 100%)}

@media (prefers-reduced-motion: reduce){
  .near{animation:none}
}

/* The privacy link on the two public pages. Quiet on purpose — it must be
   reachable and readable, not competing with the sign-in button. Cloudflare
   requires the Turnstile addendum to be referenced from a policy, and a policy
   nobody can find does not reference anything. */
.policy { margin: 14px 0 0; text-align: center; font-size: 13px; }
.policy a { color: inherit; opacity: .62; text-decoration: underline; }
.policy a:hover, .policy a:focus-visible { opacity: 1; }