/* For Geeks cosmetics: banners and other purely visual items bought in the market (forgeeks-market.html).
   Base rules only here; each item adds a .fg-banner[data-item="<catalog id>"] rule below.
   Cosmetics never carry text, so they cannot hurt contrast; they sit behind or above content. */
.fg-banner{display:block;height:120px;border-radius:8px 8px 0 0;background:var(--well);border:1px solid var(--line);border-bottom:0;overflow:hidden;position:relative}
.fg-banner:not([data-item]),.fg-banner[data-item=""]{background:linear-gradient(120deg,var(--well),var(--panel))}
@media (max-width:640px){.fg-banner{height:88px}}
@media (prefers-reduced-motion:reduce){.fg-banner,.fg-banner *,.fg-banner::before,.fg-banner::after{animation:none!important;transition:none!important}}

/* ---- items (added by the market) ---- */
/* Banners are drawn with gradients only: no images, no text. Each has its own ground, so it reads the same
   on a dark theme and on a light one (the hairline border comes from the base rule). The redrawn scenes (2026-10-28)
   size themselves to the banner's height (cqh), so a 50px leaderboard row and a 140px profile strip show the same
   picture. Only the motion tier moves, slowly; the rule above stops it, pseudo-elements included, under reduced motion. */

/* halo: follows the colours of the theme it is seen in */
.fg-banner[data-item="banner-halo"]{background:
  radial-gradient(70% 150% at 12% -10%,rgba(var(--glow),.42),transparent 70%),
  radial-gradient(55% 130% at 92% 115%,color-mix(in srgb,var(--accent2) 40%,transparent),transparent 72%),
  linear-gradient(120deg,var(--well),var(--panel))}

/* Banners, redrawn (owner, 2026-10-28: better contrast, crisper scenes). Each scene is drawn on ::before in units of
   the banner's own height (cqh), so it composes the same in a 50px leaderboard row and a 140px profile strip: the
   horizon, the sun or the trace always sit in view instead of being cut off. Clear shapes on one dark or one light
   ground, no muddy middle greys. */
.fg-banner:is([data-item="banner-blueprint"],[data-item="banner-dusk"],[data-item="banner-circuit"],[data-item="banner-dunes"],[data-item="banner-felucca"],[data-item="banner-sandwind"],[data-item="banner-papyrus-thread"],[data-item="banner-dendera-zodiac"]){container-type:size}
.fg-banner:is([data-item="banner-blueprint"],[data-item="banner-dusk"],[data-item="banner-circuit"],[data-item="banner-dunes"],[data-item="banner-felucca"],[data-item="banner-sandwind"],[data-item="banner-papyrus-thread"],[data-item="banner-dendera-zodiac"])::before{content:"";position:absolute;inset:0}

/* blueprint: crisp white-blue lines on deep cobalt, one bright trace with a node, like a drawing's main line */
.fg-banner[data-item="banner-blueprint"]{background:#0d2f6b}
.fg-banner[data-item="banner-blueprint"]::before{background:
  radial-gradient(circle at 62% 50%,#e8f4ff 0 4cqh,rgba(120,200,255,.45) 4.5cqh 9cqh,transparent 9.5cqh),
  linear-gradient(transparent calc(50% - .8cqh),rgba(200,232,255,.95) calc(50% - .8cqh) calc(50% + .8cqh),transparent calc(50% + .8cqh)) 0 0/62% 100% no-repeat,
  linear-gradient(rgba(170,214,255,.42) 1px,transparent 1px) 0 0/25cqh 25cqh,
  linear-gradient(90deg,rgba(170,214,255,.42) 1px,transparent 1px) 0 0/25cqh 25cqh,
  linear-gradient(rgba(170,214,255,.16) 1px,transparent 1px) 0 0/5cqh 5cqh,
  linear-gradient(90deg,rgba(170,214,255,.16) 1px,transparent 1px) 0 0/5cqh 5cqh,
  radial-gradient(120% 140% at 80% 0%,#1d56b8,#0d2f6b 60%,#081f4a)}

/* dusk: a deep sky down to a low sun sitting on the horizon, and its light broken on the water below */
.fg-banner[data-item="banner-dusk"]{background:#1a1446}
.fg-banner[data-item="banner-dusk"]::before{background:
  radial-gradient(circle at 58% 60%,#fff4d6 0 13cqh,#ffc370 13.5cqh 17cqh,rgba(255,140,80,.35) 17.5cqh 34cqh,transparent 35cqh),
  radial-gradient(ellipse 9cqw 1.2cqh at 58% 68%,rgba(255,206,140,.9),transparent),
  radial-gradient(ellipse 6cqw 1.1cqh at 58% 76%,rgba(255,196,120,.7),transparent),
  radial-gradient(ellipse 4cqw 1cqh at 58% 85%,rgba(255,186,110,.5),transparent),
  radial-gradient(ellipse 2.5cqw .9cqh at 58% 93%,rgba(255,176,100,.35),transparent),
  linear-gradient(180deg,transparent 0 62%,#2a1748 62% 100%),
  linear-gradient(180deg,#1a1446 0%,#46207a 30%,#b83f6e 52%,#f28a4a 62%)}

/* circuit: bright copper traces and pads on near-black, sized to the banner so the pads read at any height */
.fg-banner[data-item="banner-circuit"]{background:#14110f}
.fg-banner[data-item="banner-circuit"]::before{background:
  radial-gradient(circle at 18cqh 30cqh,#ffb36b 0 4cqh,#14110f 4.2cqh 6cqh,transparent 6.2cqh) 0 0/60cqh 100cqh,
  radial-gradient(circle at 48cqh 72cqh,#ffb36b 0 3cqh,transparent 3.2cqh) 0 0/60cqh 100cqh,
  linear-gradient(90deg,transparent 0 17.2cqh,#d98a48 17.2cqh 18.8cqh,transparent 18.8cqh) 0 30cqh/60cqh 42cqh repeat-x,
  linear-gradient(0deg,transparent 0 28cqh,#d98a48 28cqh 29.6cqh,transparent 29.6cqh) 18cqh 0/30cqh 100cqh repeat-x,
  linear-gradient(0deg,transparent 0 71.2cqh,rgba(217,138,72,.7) 71.2cqh 72.6cqh,transparent 72.6cqh) 0 0/60cqh 100cqh,
  radial-gradient(80% 140% at 50% 50%,#231d18,#14110f 70%)}

/* dunes: three clear dune ridges, nearest darkest, under a pale sun; a light ground on purpose */
.fg-banner[data-item="banner-dunes"]{background:#f3d6a2}
.fg-banner[data-item="banner-dunes"]::before{background:
  radial-gradient(ellipse 34cqw 60cqh at 10% 118%,#8a3d1e 0 98%,transparent 100%),
  radial-gradient(ellipse 40cqw 64cqh at 82% 124%,#b9622e 0 98%,transparent 100%),
  radial-gradient(ellipse 52cqw 70cqh at 46% 128%,#e19a55 0 98%,transparent 100%),
  radial-gradient(circle at 58% 34%,#fffaf0 0 9cqh,rgba(255,244,214,.45) 9.5cqh 20cqh,transparent 21cqh),
  linear-gradient(180deg,#f8e7c4 0%,#f3d6a2 60%,#eebf80 100%)}

/* ---- new, animated (tier motion): one slow motion each; the base rule stops it under reduced motion ---- */
/* felucca: a white sail crossing the Nile at sunset, once every 40 seconds */
.fg-banner[data-item="banner-felucca"]{background:#2a1a4a}
.fg-banner[data-item="banner-felucca"]::before{background:
  linear-gradient(180deg,transparent 0 64%,rgba(255,206,140,.55) 64% 65.5%,transparent 65.5% 72%,rgba(255,206,140,.3) 72% 73%,transparent 73%) 0 0/100% 100% no-repeat,
  radial-gradient(circle at 46% 58%,#ffe9b8 0 10cqh,rgba(255,170,90,.4) 10.5cqh 26cqh,transparent 27cqh),
  linear-gradient(180deg,transparent 0 63%,#1b2550 63% 100%),
  linear-gradient(180deg,#2a1a4a 0%,#7a2f6a 34%,#e0704c 58%,#ffb36b 63%)}
.fg-banner[data-item="banner-felucca"]::after{content:"";position:absolute;bottom:34%;left:0;width:30cqh;height:52cqh;
  background:
    linear-gradient(to top right,#fffaf0 0 49%,transparent 50%) 30% 0/62% 86% no-repeat,
    linear-gradient(#3a2a1e,#3a2a1e) 0 100%/100% 10% no-repeat;
  animation:fg-sail 40s linear infinite}
@keyframes fg-sail{from{transform:translateX(-30cqh)}to{transform:translateX(100cqw)}}

/* sand wind: gusts of light running over the dunes, slowly */
.fg-banner[data-item="banner-sandwind"]{background:#f0c88a}
.fg-banner[data-item="banner-sandwind"]::before{background:
  radial-gradient(ellipse 14cqw 1.6cqh at 30% 42%,rgba(255,252,240,.75),transparent) 0 0/60cqw 100%,
  radial-gradient(ellipse 10cqw 1.4cqh at 70% 74%,rgba(255,240,210,.55),transparent) 0 0/60cqw 100%,
  radial-gradient(ellipse 50cqw 66cqh at 70% 126%,#a8542a 0 98%,transparent 100%),
  radial-gradient(ellipse 60cqw 72cqh at 22% 130%,#d48a4a 0 98%,transparent 100%),
  linear-gradient(180deg,#fbe9c6,#f0c88a);
  animation:fg-wind 18s linear infinite}
@keyframes fg-wind{to{background-position:60cqw 0,60cqw 0,0 0,0 0,0 0}}

/* ---- the Papyrus and Dendera sets (NF-10D2, owner 2026-11-08): each theme's own colours and its one motion ---- */
/* gold thread: Papyrus's lapis lacquer and fine fibres, one gold thread whose light travels slowly along it */
.fg-banner[data-item="banner-papyrus-thread"]{background:#0b1a3a}
.fg-banner[data-item="banner-papyrus-thread"]::before{background:
  repeating-linear-gradient(90deg,rgba(232,214,160,.07) 0 1px,transparent 1px 7px),
  repeating-linear-gradient(0deg,rgba(232,214,160,.05) 0 1px,transparent 1px 11px),
  radial-gradient(90% 140% at 20% 0%,#1d3a78,#0b1a3a 65%,#071126)}
.fg-banner[data-item="banner-papyrus-thread"]::after{content:"";position:absolute;left:0;right:0;top:58%;height:max(2px,1.8cqh);transform:translateY(-50%);
  background:
    linear-gradient(90deg,transparent,rgba(255,246,214,.95),transparent) -40% 0/40% 100% no-repeat,
    linear-gradient(90deg,#8a6420,#d4a537 30%,#f3d58a 50%,#d4a537 70%,#8a6420);
  box-shadow:0 0 6px rgba(243,213,138,.35);
  animation:fg-thread 12s linear infinite}
@keyframes fg-thread{from{background-position:-40% 0,0 0}to{background-position:140% 0,0 0}}
/* zodiac ceiling: Dendera's night ceiling in pigment blue, gold stars, and the zodiac ring turning once in 120 seconds */
.fg-banner[data-item="banner-dendera-zodiac"]{background:#14275a}
.fg-banner[data-item="banner-dendera-zodiac"]::before{background:
  radial-gradient(circle at 12% 30%,#f1d58a 0 .9cqh,transparent 1.4cqh),
  radial-gradient(circle at 26% 70%,#f1d58a 0 .7cqh,transparent 1.2cqh),
  radial-gradient(circle at 40% 22%,#f1e6cc 0 .6cqh,transparent 1.1cqh),
  radial-gradient(circle at 84% 64%,#f1d58a 0 .8cqh,transparent 1.3cqh),
  radial-gradient(circle at 93% 24%,#f1e6cc 0 .6cqh,transparent 1.1cqh),
  radial-gradient(circle at 74% 84%,#f1e6cc 0 .5cqh,transparent 1cqh),
  linear-gradient(180deg,transparent 0 88%,#c99a3a 88% 90%,transparent 90%),
  radial-gradient(120% 150% at 60% 40%,#1f3f8c,#14275a 60%,#0c1838)}
.fg-banner[data-item="banner-dendera-zodiac"]::after{content:"";position:absolute;top:8cqh;left:calc(60% - 36cqh);width:72cqh;height:72cqh;border-radius:50%;
  background:
    radial-gradient(circle,#1f3f8c 0 52%,transparent 53%),
    repeating-conic-gradient(rgba(241,213,138,.85) 0 1.5deg,transparent 1.5deg 30deg),
    radial-gradient(circle,transparent 0 62%,rgba(241,213,138,.9) 63% 65%,transparent 66% 96%,rgba(241,213,138,.9) 97% 99%,transparent 100%);
  animation:fg-zodiac 120s linear infinite}
@keyframes fg-zodiac{to{transform:rotate(360deg)}}

/* borealis: soft bands of teal and violet over a night sky, drifting slowly */
.fg-banner[data-item="banner-borealis"]{
  background:
    radial-gradient(1px 1px at 9% 24%,rgba(255,255,255,.85),transparent),
    radial-gradient(1px 1px at 27% 12%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 46% 30%,rgba(255,255,255,.75),transparent),
    radial-gradient(1px 1px at 63% 14%,rgba(255,255,255,.55),transparent),
    radial-gradient(1px 1px at 81% 26%,rgba(255,255,255,.8),transparent),
    radial-gradient(1px 1px at 94% 10%,rgba(255,255,255,.6),transparent),
    radial-gradient(60% 130% at 20% 120%,rgba(64,226,176,.6),transparent 70%),
    radial-gradient(50% 125% at 58% 118%,rgba(138,110,255,.8),transparent 70%),
    radial-gradient(42% 110% at 90% 125%,rgba(64,186,255,.55),transparent 70%),
    linear-gradient(180deg,#050a1c,#0a1632 70%,#0d2338);
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,150% 100%,170% 100%,160% 100%,100% 100%;
  background-position:0 0,0 0,0 0,0 0,0 0,0 0,0% 0,100% 0,50% 0,0 0;
  animation:fg-drift 60s ease-in-out infinite alternate}
@keyframes fg-drift{to{background-position:0 0,0 0,0 0,0 0,0 0,0 0,100% 0,0% 0,100% 0,0 0}}

/* ---- frames and badges (market items; drawn around the avatar and beside the name) ---- */
/* Frames are rings made of box-shadows: they sit outside the picture, so they never hide a face and need no image.
   The first ring is the page ground, so a frame reads the same on a light or a dark theme. */
.av[data-frame="frame-halo"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px #14A874,0 0 12px 4px rgba(20,168,116,.35)!important}
.av[data-frame="frame-gold"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px #C9A24B,0 0 0 5px rgba(120,86,10,.55)!important}
.av[data-frame="frame-nile"]{box-shadow:0 0 0 2px var(--bg),0 0 0 5px #0A2442,0 0 0 6px #5BD3F2!important}
.av[data-frame="frame-double"]{box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--ink),0 0 0 6px var(--bg),0 0 0 7px var(--ink)!important}
/* gold foil (Papyrus set): a gold-leaf ring whose glint brightens once in 10 seconds; lotus (Dendera set): pigment blue in an ochre rim */
/* The running animation sets the ring itself (an animation beats a page's ordinary box-shadow rule, and !important would
   freeze it); under reduced motion the still ring below takes over with !important like every other frame. */
.av[data-frame="frame-gold-foil"]{animation:fg-foil 10s ease-in-out infinite}
@keyframes fg-foil{0%,70%,100%{box-shadow:0 0 0 2px var(--bg),0 0 0 4px #D4A537,0 0 0 5px #8A6420,0 0 6px 5px rgba(243,213,138,.25)}85%{box-shadow:0 0 0 2px var(--bg),0 0 0 4px #F3D58A,0 0 0 5px #8A6420,0 0 10px 6px rgba(243,213,138,.55)}}
.av[data-frame="frame-lotus"]{box-shadow:0 0 0 2px var(--bg),0 0 0 5px #1F3F8C,0 0 0 7px #C99A3A!important}
@media (prefers-reduced-motion:reduce){.av[data-frame]{animation:none!important}.av[data-frame="frame-gold-foil"]{box-shadow:0 0 0 2px var(--bg),0 0 0 4px #D4A537,0 0 0 5px #8A6420,0 0 6px 5px rgba(243,213,138,.25)!important}}
.av[data-frame].xl{margin-inline-start:6px}

/* Badges: a small mark beside the name. The words for screen readers sit in .sr. */
.fg-badge{display:inline-grid;place-items:center;width:20px;height:20px;margin-inline-start:8px;border-radius:50%;vertical-align:middle;background:var(--well);border:1px solid var(--line);color:var(--ink)}
.fg-badge svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fg-badge[data-item="badge-bolt"]{color:var(--ink)}
/* the two-leaf mark keeps the logo's own colours (B03: Vivid is for the logo), with its lit facet a step lighter */
.fg-badge svg .leaf-a,.fg-badge svg .leaf-b{stroke:none}
.fg-badge svg .leaf-a{fill:#0B6DD6}.fg-badge svg .leaf-a.lit{fill:#36B4F2}
.fg-badge svg .leaf-b{fill:#14A874}.fg-badge svg .leaf-b.lit{fill:#2FD69A}
.fg-badge[data-item="badge-coin"]{color:#9A6B12}
.fg-badge[data-item="badge-pen"]{color:#0B7A57}
.fg-badge[data-item="badge-star"]{color:#B8860B}
.fg-badge .sr,.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fg-badge{position:relative}
.fg-badge.lg{width:44px;height:44px}.fg-badge.lg svg{width:24px;height:24px}

/* ---- supporter release (supabase/migrations/20261025370000_supporter_release.sql) ---- */
/* Earned badges: one shield, three metals; Founding in the brand gold. Never sold. */
.fg-badge[data-item="badge-supporter-bronze"]{color:#A0612B}
.fg-badge[data-item="badge-supporter-silver"]{color:#6F7C8A}
.fg-badge[data-item="badge-supporter-gold"]{color:#B8860B}
.fg-badge[data-item="badge-founding"]{color:#B8860B;box-shadow:0 0 0 1px #B8860B}
.fg-badge[data-item="badge-cotton-boll"]{color:#8A7A5C}
.fg-badge[data-item="badge-lantern"]{color:#C26A1B}

/* Name styles paint the display name itself, over any page rule for names (hence !important). Each hue is mixed 60% with the page's own text colour, so the name keeps
   4.5:1 or better on every theme, light and dark (checked against all eight seeds; Papyrus gold and Pigment blue against all 18 themes, 2026-11-10). */
[data-name-style="name-gold"]{color:color-mix(in srgb,#C9971C 60%,var(--ink))!important}
[data-name-style="name-nile"]{color:color-mix(in srgb,#1E88C8 60%,var(--ink))!important}
[data-name-style="name-papyrus-gold"]{color:color-mix(in srgb,#B8862A 60%,var(--ink))!important}
[data-name-style="name-pigment-blue"]{color:color-mix(in srgb,#4A74D8 60%,var(--ink))!important}
[data-name-style="name-sunset"],[data-name-style="name-shimmer"]{-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;text-decoration-color:var(--ink)}
[data-name-style="name-sunset"]{background-image:linear-gradient(90deg,color-mix(in srgb,#E8742A 60%,var(--ink)),color-mix(in srgb,#9B4DE0 60%,var(--ink)))}
/* shimmer: one slow light across the name every 9 s; the light is nearer the text colour, so contrast only rises */
[data-name-style="name-shimmer"]{background-image:linear-gradient(100deg,color-mix(in srgb,#C9971C 60%,var(--ink)) 0 40%,color-mix(in srgb,#C9971C 30%,var(--ink)) 50%,color-mix(in srgb,#C9971C 60%,var(--ink)) 60% 100%);
  background-size:250% 100%;background-position:100% 0;animation:fg-shimmer 9s ease-in-out infinite}
@keyframes fg-shimmer{0%,55%{background-position:100% 0}100%{background-position:0 0}}
@media (prefers-reduced-motion:reduce){[data-name-style]{animation:none!important;background-position:100% 0!important}}

/* Animated banners: one slow motion each, behind content; the base rule stops them under reduced motion. */
/* nile at night: gold glints drifting on dark water */
.fg-banner[data-item="banner-nile-flow"]{
  background:
    repeating-linear-gradient(176deg,transparent 0 10px,rgba(230,180,80,.16) 10px 11px,transparent 11px 23px) 0 58%/200% 42% repeat-x,
    radial-gradient(40% 60% at 70% 60%,rgba(230,180,80,.35),transparent 70%),
    radial-gradient(1px 1px at 12% 18%,rgba(255,240,200,.8),transparent),
    radial-gradient(1px 1px at 38% 10%,rgba(255,240,200,.6),transparent),
    radial-gradient(1px 1px at 84% 22%,rgba(255,240,200,.7),transparent),
    linear-gradient(180deg,#070b16 0%,#0b1630 55%,#0e2340 100%);
  animation:fg-flow 14s linear infinite}
@keyframes fg-flow{to{background-position:-100% 58%,70% 60%,0 0,0 0,0 0,0 0}}
/* drifting stars (redrawn 2026-11-10: the old tiny tiles showed as a grid and shimmered as the background repainted):
   a deep sky with a faint band of light, and stars at two depths scattered with no visible repeat. Each depth is a layer
   moved by transform, so nothing repaints; the far stars cross their 389px tile in 240s, the near ones their 523px tile in 150s (about 3.5px a second), which reads as
   one slow drift with depth. Each loop moves exactly one tile, so it never jumps. Still under reduced motion. */
.fg-banner[data-item="banner-drift"]{background:
    radial-gradient(70% 90% at 72% 115%,rgba(112,88,214,.38),transparent 70%),
    linear-gradient(168deg,transparent 30%,rgba(170,186,255,.07) 46%,rgba(170,186,255,.11) 52%,transparent 68%),
    linear-gradient(180deg,#03050d,#0a0f26 70%,#141a3c)}
.fg-banner[data-item="banner-drift"]::before,.fg-banner[data-item="banner-drift"]::after{content:"";position:absolute;top:0;bottom:0;left:0;will-change:transform;pointer-events:none}
.fg-banner[data-item="banner-drift"]::before{right:-389px;background:
    radial-gradient(circle at 234px 74px,rgb(200 214 255/0.53) 0 0.8px,transparent 1.5px),
    radial-gradient(circle at 263px 78px,rgb(200 214 255/0.54) 0 0.6px,transparent 1.3px),
    radial-gradient(circle at 325px 81px,rgb(200 214 255/0.33) 0 0.7px,transparent 1.4px),
    radial-gradient(circle at 75px 14px,rgb(255 255 255/0.57) 0 0.7px,transparent 1.4px),
    radial-gradient(circle at 307px 53px,rgb(255 255 255/0.5) 0 0.8px,transparent 1.5px),
    radial-gradient(circle at 322px 4px,rgb(255 255 255/0.32) 0 0.7px,transparent 1.4px),
    radial-gradient(circle at 100px 33px,rgb(200 214 255/0.53) 0 0.7px,transparent 1.4px),
    radial-gradient(circle at 103px 69px,rgb(255 255 255/0.39) 0 0.6px,transparent 1.3px),
    radial-gradient(circle at 145px 55px,rgb(255 255 255/0.6) 0 0.8px,transparent 1.5px),
    radial-gradient(circle at 365px 35px,rgb(200 214 255/0.37) 0 0.6px,transparent 1.3px),
    radial-gradient(circle at 18px 11px,rgb(255 255 255/0.33) 0 0.7px,transparent 1.4px),
    radial-gradient(circle at 353px 3px,rgb(255 255 255/0.58) 0 0.6px,transparent 1.3px),
    radial-gradient(circle at 243px 51px,rgb(255 255 255/0.42) 0 0.8px,transparent 1.5px),
    radial-gradient(circle at 292px 83px,rgb(200 214 255/0.5) 0 0.6px,transparent 1.3px),
    radial-gradient(circle at 47px 42px,rgb(255 255 255/0.59) 0 0.6px,transparent 1.3px),
    radial-gradient(circle at 93px 90px,rgb(255 255 255/0.43) 0 0.7px,transparent 1.4px),
    radial-gradient(circle at 199px 17px,rgb(255 255 255/0.6) 0 0.6px,transparent 1.3px),
    radial-gradient(circle at 141px 78px,rgb(255 255 255/0.57) 0 0.6px,transparent 1.3px),
    radial-gradient(circle at 298px 15px,rgb(200 214 255/0.34) 0 0.5px,transparent 1.2px),
    radial-gradient(circle at 135px 4px,rgb(200 214 255/0.4) 0 0.7px,transparent 1.4px),
    radial-gradient(circle at 41px 14px,rgb(255 255 255/0.49) 0 0.6px,transparent 1.3px),
    radial-gradient(circle at 193px 82px,rgb(200 214 255/0.59) 0 0.6px,transparent 1.3px);
  background-size:389px 97px;animation:fg-stars-far 240s linear infinite}
.fg-banner[data-item="banner-drift"]::after{right:-523px;background:
    radial-gradient(circle at 141px 113px,rgb(255 244 220/0.84) 0 1.0px,transparent 1.7px),
    radial-gradient(circle at 236px 107px,rgb(255 255 255/0.87) 0 1.1px,transparent 1.8px),
    radial-gradient(circle at 400px 115px,rgb(255 255 255/0.67) 0 1.0px,transparent 1.7px),
    radial-gradient(circle at 109px 16px,rgb(255 255 255/0.94) 0 0.8px,transparent 1.5px),
    radial-gradient(circle at 404px 35px,rgb(255 244 220/0.92) 0 1.0px,transparent 1.7px),
    radial-gradient(circle at 303px 69px,rgb(255 255 255/0.87) 0 0.9px,transparent 1.6px),
    radial-gradient(circle at 493px 74px,rgb(255 255 255/0.83) 0 1.1px,transparent 1.8px),
    radial-gradient(circle at 289px 30px,rgb(255 255 255/0.71) 0 1.3px,transparent 2.0px),
    radial-gradient(circle at 73px 37px,rgb(255 255 255/0.72) 0 1.0px,transparent 1.7px),
    radial-gradient(circle at 183px 39px,rgb(255 255 255/0.82) 0 1.0px,transparent 1.7px),
    radial-gradient(circle at 464px 128px,rgb(210 224 255/0.87) 0 1.0px,transparent 1.7px),
    radial-gradient(circle at 38px 121px,rgb(210 224 255/0.92) 0 0.8px,transparent 1.5px),
    radial-gradient(circle at 322px 126px,rgb(255 255 255/0.83) 0 0.8px,transparent 1.5px),
    radial-gradient(circle at 496px 11px,rgb(255 255 255/0.75) 0 1.2px,transparent 1.9px),
    radial-gradient(circle at 352px 48px,rgb(255 255 255/0.79) 0 0.8px,transparent 1.5px),
    radial-gradient(circle at 17px 82px,rgb(255 255 255/0.76) 0 1.1px,transparent 1.8px);
  background-size:523px 131px;animation:fg-stars-near 150s linear infinite}
@keyframes fg-stars-far{to{transform:translate3d(-389px,0,0)}}
@keyframes fg-stars-near{to{transform:translate3d(-523px,0,0)}}

/* Seasonal banners: on sale in their window, kept for ever by their owners. */
/* cotton harvest: open bolls over an autumn field */
.fg-banner[data-item="banner-cotton-harvest"]{background:
  radial-gradient(circle at 14px 14px,#fffaf0 0 6px,rgba(255,250,240,.0) 7px) 0 62%/46px 34px repeat-x,
  radial-gradient(circle at 30px 20px,#f5ecd8 0 5px,rgba(245,236,216,0) 6px) 10px 78%/52px 30px repeat-x,
  linear-gradient(180deg,transparent 0 55%,#5f6b2c 55% 100%),
  linear-gradient(180deg,#f3d9a4,#e9b872 55%)}
/* new year 2027: fireworks over the Nile */
.fg-banner[data-item="banner-new-year-2027"]{background:
  repeating-conic-gradient(from 0deg at 22% 40%,rgba(255,214,120,.85) 0 2deg,transparent 2deg 18deg) 0 0/100% 100% no-repeat,
  radial-gradient(circle at 22% 40%,transparent 0 30px,#0b1430 31px),
  repeating-conic-gradient(from 9deg at 74% 34%,rgba(120,220,255,.75) 0 2deg,transparent 2deg 20deg),
  linear-gradient(180deg,#0b1430 0 78%,#1b2b55 78% 100%)}
/* ramadan lanterns: warm fanous lights on a night street */
.fg-banner[data-item="banner-ramadan-2027"]{background:
  radial-gradient(circle at 20px 26px,#ffcf6b 0 7px,rgba(255,170,60,.35) 8px 18px,transparent 19px) 0 0/80px 70px,
  linear-gradient(90deg,transparent 0 19px,rgba(255,207,107,.5) 19px 21px,transparent 21px) 0 0/80px 20px repeat-x,
  linear-gradient(180deg,#160c2b,#2a1440 70%,#3a1d3f)}
/* sham el-nessim: spring green, a pale sky and the river */
.fg-banner[data-item="banner-sham-el-nessim-2027"]{background:
  radial-gradient(ellipse 60% 40% at 30% 100%,#5cae5a 0 96%,transparent 100%),
  radial-gradient(ellipse 70% 36% at 85% 104%,#3f9450 0 96%,transparent 100%),
  linear-gradient(180deg,transparent 0 62%,#4aa3c8 62% 74%,transparent 74%),
  linear-gradient(180deg,#d9f1ff,#bfe6f4)}

.fg-badge[data-item="badge-supporter-true"]{color:var(--accent,var(--nile));box-shadow:inset 0 0 0 1px currentColor}