/* ============================================================================
   Liquid glass, shared (founder 2026-10-29).

   The recipe only. Pages load this first, then their own *-glass.css decides
   which surfaces become glass. Started life inside sponsor-glass.css and was
   lifted out when register.html needed the same look: two copies of these
   numbers would have drifted apart the first time either page was tuned.

   There WAS a drifting aurora behind the page here, six big radial blobs, to
   give the blur something to refract. Founder removed it on 2026-10-29: the
   circles read as glow rather than as light. What carries the material now is
   the grain, the lit top edge, the depth shadow, and the blur of whatever real
   content sits behind a pane (the hero map, card art, screenshots). Over a
   plain stretch of page the blur has little to bite on, which is the honest
   cost of dropping the backdrop.

   Where the blur is spent: large panels get backdrop-filter, small pills get
   translucency and a lit edge without it. Thirty blurred pills cost real
   frames on a mid range phone and look no different from two.
   ========================================================================= */

:root {
  --g-fill:   rgba(10, 23, 54, 0.38);          /* the pane itself */
  --g-fill-2: rgba(12, 26, 60, 0.26);          /* lighter pane, for nested things */
  --g-edge:   rgba(255, 255, 255, 0.16);       /* hairline border */
  --g-rim:    rgba(255, 255, 255, 0.26);       /* lit top edge, inside */
  --g-rim-lo: rgba(255, 255, 255, 0.04);       /* faint bottom edge, inside */
  --g-sheen:  linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.018) 42%, rgba(255,255,255,0) 72%);
  --g-cast:   0 34px 76px -46px rgba(0,0,0,.95), 0 3px 14px -9px rgba(0,0,0,.65);
  --g-blur:   blur(22px) saturate(170%);
  --g-blur-s: blur(14px) saturate(150%);       /* smaller panes, lighter cost */
  /* A fine grain. Real glass is never optically perfect, and without this the panes read as flat paint
     however much blur sits behind them. It has to stay almost subliminal: the first attempt at .38 turned
     every pane to concrete and washed the colour out of the text. One tile, repeated, rasterised once. */
  --g-grain:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.11'/%3E%3C/svg%3E");
}

/* No light theme values on purpose. The site pins itself to dark: every page ships
   <html data-theme="dark"> and site.js sets it back to dark on load, so light variables would be
   unreachable code that reads like a supported mode. If light is ever switched back on, this file
   needs a second set of --g-* values and nothing else. */

/* The pane. Opt in with .g-pane, or point the page's own selectors at these declarations. */
.g-pane {
  background: var(--g-grain), var(--g-sheen), var(--g-fill);
  -webkit-backdrop-filter: var(--g-blur);
  backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-edge);
  box-shadow: inset 0 1px 0 var(--g-rim), inset 0 -1px 0 var(--g-rim-lo), var(--g-cast);
}
/* Nested panes sit on something already blurred, so they stay lighter. Blurring a second time
   just muddies what is underneath. */
.g-pane-2 {
  background: var(--g-grain), var(--g-sheen), var(--g-fill-2);
  -webkit-backdrop-filter: var(--g-blur-s);
  backdrop-filter: var(--g-blur-s);
  border: 1px solid var(--g-edge);
  box-shadow: inset 0 1px 0 var(--g-rim);
}

/* Reduced transparency is an accessibility setting, not a preference: someone has told their system
   that translucent layers make text hard to read. Same for browsers with no backdrop-filter, where a
   translucent pane has nothing to separate it from the page behind. Pages add their own selectors to
   these two blocks. */
@media (prefers-reduced-transparency: reduce) {
  .g-pane, .g-pane-2 { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .g-pane, .g-pane-2 { background: var(--surface); }
}

/* Phones: the blur radius drops. A 22px backdrop blur over a full width pane is one
   of the easiest ways to drop frames on older hardware, and at that size nobody sees the difference. */
@media (max-width: 760px) {
  :root { --g-blur: blur(12px) saturate(150%); --g-blur-s: blur(8px) saturate(140%); }
}