/* ===========================================================================
 * kaliber-site-backdrop.css — THE SITE BACKDROP. ONE DEFINITION, FOUR SHELLS.
 * ===========================================================================
 *
 * WHAT THIS FILE IS FOR, AND WHY IT HAD TO EXIST
 * ----------------------------------------------
 * The owner's requirement, verbatim: "on these pages using wrong templates it
 * uses a pink and blue gradient filter over the background and I really like it
 * and want that applied to all the website templates", and "Just make all pages
 * use same template ... they need to match".
 *
 * The navigation was converged first (2026-08-08): one manifest
 * `templates/_site_nav_items.html`, two renderers (`_site_nav.html` for Jinja,
 * `kaliber-site-nav.php` for Apache), one stylesheet `kaliber-site-nav.css`.
 * MEASURED after that pass: the nav block hashes identically across all three
 * renderers on 14 live URLs (sha256/12 = a2d2d0d885c0, 8 <li> each).
 *
 * The PAGE BEHIND that nav did not converge, and that is what this file fixes.
 * Measured on the live site 2026-08-08, there were FOUR different backdrops:
 *
 *   SHELL                          WHAT IT PAINTED                     WHERE
 *   -----------------------------  ----------------------------------  --------------------------------
 *   kaliber_public_base.html       violet+teal radials over a 145deg    kaliber_public_base.html:203-215
 *   (65 templates: wiki, casino,   dark-violet wash over
 *    leaderboards, markets)        kaliber-backdrop.webp   <- THE ONE THE OWNER MEANS
 *
 *   kaliber_auth_base.html         BYTE-FOR-BYTE THE SAME DECLARATION,  kaliber_auth_base.html:64-77
 *   (9 templates: /login,          copy-pasted into a second template
 *    /link-account, 404, error)
 *
 *   base.html                      "T7 ember/gold": style.css:97-105    style.css:97-105
 *   (27 templates: /rules,         paints a gold/orange radial pair     t7-theme.css:82-84
 *    /terms, /privacy, /shop,      over a #0a0000->#1a0808 ramp, which  t7-theme.css:51-58
 *    /index, /purchase, ...)       t7-theme.css:82-84 then flattens to  t7-theme.css:59-66
 *                                  `var(--fire-dark)` (#0a0000) WITH
 *                                  !important; the picture actually
 *                                  seen is a FIXED div stack
 *                                  (base.html:334-338) showing
 *                                  images/t7/background.webp — a bright
 *                                  RED fire/battle scene — at
 *                                  brightness(0.62) under a warm-dark
 *                                  0.32 wash.
 *
 *   the 6 PHP prototype pages      a flat 50% GREY wash
 *   (Mainpage/Shop/hq/vip/         (rgba(26,26,26,.5) x2) over
 *    Gamezone/Community.php)       /backgroundimage.webp                Mainpage.php:31-58 and siblings
 *
 * So after the nav pass a VIOLET navigation bar sat on an EMBER page on 27
 * templates and on a GREY-WASHED page on the 6 prototype pages. Same bar, three
 * different rooms.
 *
 * WHY A NEW STYLESHEET RATHER THAN "JUST COPY THE GRADIENT ACROSS"
 * ---------------------------------------------------------------
 * Copying is what produced this mess in the first place, three times over, and
 * every one of those copies is on the record:
 *   - the nav MARKUP existed in seven copies until `_site_nav_items.html`;
 *   - the nav stylesheet's cache-buster silently forked into TWO strings
 *     (`?v=1786231539814164100` from Flask's automatic mtime stamp on one half,
 *     `?v=20260808.2` hardcoded on the other) and Cloudflare then served two
 *     different sheets to two halves of the same site — see
 *     kaliber_public_base.html:82-86 and base.html:133-143;
 *   - and RIGHT HERE, `kaliber_auth_base.html:64-77` is a verbatim second copy
 *     of `kaliber_public_base.html:203-215`. Nobody forked it yet only because
 *     nobody has edited the backdrop since it was pasted.
 * A fourth and fifth copy would have guaranteed the same outcome. There is now
 * exactly ONE place in the repository where the Kaliber backdrop is written
 * down: the `--kaliber-backdrop-*` tokens below.
 *
 * THE ASSET, AND WHY THE URL IS ROOT-ABSOLUTE INTO THE FLASK STATIC TREE
 * ---------------------------------------------------------------------
 * `/static/images/background/kaliber-backdrop.webp` and the prototype pages'
 * `/backgroundimage.webp` are THE SAME FILE — verified by hash, not by eye:
 * both are 169,522 bytes, sha256 fafa3afd1025ab9... So pointing all four shells
 * at the static-tree copy is not a swap of artwork, it is a COLLAPSE OF TWO
 * CACHE ENTRIES INTO ONE: a visitor who lands on /shop (Apache) and then walks
 * to /leaderboards (Flask) used to download the same 166 KB picture twice.
 *
 * The static-tree copy is also the only one that resolves everywhere.
 * `/backgroundimage.png|webp` exists ONLY in the Apache document root, and the
 * server-level DocumentRoot is the PARENT eds-www folder with the image one
 * level down in Kaliberpal/ — so that URL is 200 with `Host: kalibergaming.com`
 * and 404 on every other Host, including Flask hit directly on :5000. That
 * failure mode is already written up at kaliber_auth_base.html:25-33 as the
 * cause of a reported "the background does not show up". Root-absolute
 * `/static/...` has neither problem: Flask serves it natively AND the
 * kalibergaming vhost proxies it — measured, `/static/css/kaliber-site-nav.css`
 * is 200 `text/css` and `/static/images/background/kaliber-backdrop.webp` is
 * 200 `image/webp` len=169522 on the public host, which is exactly how the six
 * PHP pages already reach the shared nav stylesheet.
 *
 * The path is written out in full rather than being folded into the custom
 * property. Relative `url()` inside a CUSTOM PROPERTY does not reliably resolve
 * against the stylesheet that declares it, and the whole point of this file is
 * that all four shells request one identical URL string so the edge keeps one
 * object. Do not "tidy" it into `var()`.
 *
 * CACHE-BUSTER: THE `?v=` ON EVERY LINK TO THIS FILE MUST BE THE SAME STRING
 * -------------------------------------------------------------------------
 * Nine links point here — base.html, kaliber_public_base.html,
 * kaliber_auth_base.html and the six PHP pages — and they are all the literal
 * `?v=20260808.3`. It is HARDCODED on the Flask side (`url_for(..., v='...')`)
 * rather than left to Flask's automatic mtime stamp for one reason: PHP cannot
 * call `url_for`, so the Apache half can only ever emit a literal, and if the
 * Flask half emits an mtime instead then the two halves request two different
 * URLs and Cloudflare caches two different objects. That is not hypothetical —
 * it happened to kaliber-site-nav.css earlier today and produced a site serving
 * two different navigations. When this file changes, bump ALL NINE together:
 *     grep -rn 'kaliber-site-backdrop.css' <repo> <docroot>
 * ===========================================================================
 */

:root {
    /* THE FLOOR. Paint order in a `background-image` list is FIRST-LAYER-ON-TOP,
       so `background-color` is underneath everything — it is what the visitor
       sees if the photo 404s or never finishes downloading. #100d20 is the same
       deep violet the wash lands on, so a failed image degrades to "the gradient
       without the picture", never to unreadable light-on-white. */
    --kaliber-backdrop-floor: #100d20;

    /* THE "PINK AND BLUE GRADIENT FILTER" THE OWNER ASKED FOR, verbatim from
       what kaliber_public_base.html:203-215 was already serving, so the 65
       pages that already looked right render pixel-identically after this
       change and only the other 42 move.
         - violet radial, top-left    -> the "pink" the request names
         - teal radial, bottom-right  -> the "blue"
         - 145deg dark wash           -> the readability layer: it is what makes
                                         body copy legible over a photograph,
                                         and /rules, /terms and /privacy are
                                         nothing BUT body copy.
       LAYER ORDER IS LOAD-BEARING. The url() is LAST, i.e. bottom. Move it up
       and the photo covers the wash and every long-form text page becomes
       white-on-bright-artwork. */
    --kaliber-backdrop-image:
        radial-gradient(circle at 12% 8%, rgba(139, 92, 246, .32), transparent 33%),
        radial-gradient(circle at 88% 92%, rgba(32, 214, 199, .20), transparent 34%),
        linear-gradient(145deg, rgba(16, 13, 32, .80), rgba(32, 18, 53, .74) 48%, rgba(17, 29, 42, .80)),
        url("/static/images/background/kaliber-backdrop.webp");

    /* Only the photo is `cover`; the three gradients keep their own sizing.
       cover/center/fixed is what the six PHP prototype pages have always used,
       so the artwork is framed identically on both halves of the site — that
       framing is why a visitor crossing from /shop to /leaderboards does not
       see the picture jump. */
    --kaliber-backdrop-size: auto, auto, auto, cover;
    --kaliber-backdrop-position: center, center, center, center;
    --kaliber-backdrop-attachment: fixed;
}

/* ---------------------------------------------------------------------------
 * THE ONE PAINT RULE. Every shell opts in by putting `kaliber-site-backdrop` on
 * its <body>; there is no second selector list to keep in sync.
 *
 * THE SIX `!important`s THAT USED TO BE ON THIS RULE ARE GONE — 2026-08-08
 * -----------------------------------------------------------------------
 * They were here for exactly one reason, and the reason has been removed at
 * source. `t7-theme.css:82-84` used to be
 * `body { background: var(--fire-dark) !important; }`, and `!important` is not
 * outranked by specificity or by source order — only by another `!important` —
 * so a plain declaration here would have lost on all 27 base.html pages, i.e.
 * on precisely the pages the backdrop pass existed to fix. Six `!important`s
 * here were the cost of one `!important` there.
 *
 * That t7-theme `!important` was itself unnecessary: it was beating
 * `style.css:97-105`, a PLAIN declaration at identical specificity in a sheet
 * base.html links eighteen lines earlier, so source order had already decided
 * it. Owner, 2026-08-08: "get rid of overriding monkeypatch bandaid". It was
 * dropped, the declaration itself kept (map_embed_base.html needs it), and
 * these six came off with it.
 *
 * WHAT WINS NOW, AND WHY IT IS SAFE. `body.kaliber-site-backdrop` is (0,1,1)
 * against t7-theme's `body` at (0,0,1) and style.css's `body` at (0,0,1), and
 * this file is additionally the LAST stylesheet in every shell that links it.
 * It wins twice over, on two independent grounds, with no weapon drawn.
 *
 * THIS IS ALSO STRICTLY BETTER FOR ANY PAGE THAT LEGITIMATELY NEEDS ITS OWN
 * BACKDROP. Under the old rule a casino felt or a seasonal takeover needed
 * `!important` PLUS more specificity than `body.<class>`; now an ordinary
 * `body.my-page { background: … }` at equal specificity and later source order
 * simply works. Checked across every template outside admin_*: the only
 * per-page `body` background declarations in the tree are 50x.html:8,
 * analytics_dashboard.html:13 and map_embed_base.html:20, and none of those
 * three shells links this file — so nothing changes today either way.
 * ------------------------------------------------------------------------- */
body.kaliber-site-backdrop {
    background-color: var(--kaliber-backdrop-floor);
    background-image: var(--kaliber-backdrop-image);
    background-size: var(--kaliber-backdrop-size);
    background-position: var(--kaliber-backdrop-position);
    background-repeat: no-repeat;
    background-attachment: var(--kaliber-backdrop-attachment);
}

/* ---------------------------------------------------------------------------
 * LEGACY base.html SHELL ONLY: RETIRE THE T7 FIRE STACK.
 *
 * base.html:334-338 renders a FIXED, full-viewport div stack —
 *   #siteBgStack > #siteBgLayerA.site-bg-layer.is-active   (the photo)
 *                > #siteBgLayerB.site-bg-layer             (the cross-fade spare)
 *                > .site-bg-overlay                        (the wash)
 * at `position: fixed; inset: 0; z-index: 0` (style.css:140-147). It therefore
 * paints ON TOP of <body>'s own background, and painting body without dealing
 * with this stack would change nothing a visitor can see. The photo it carries
 * is `images/t7/background.webp`, a bright red fire/battle scene — the single
 * loudest ember signal on the page and precisely what the owner is asking to
 * stop seeing.
 *
 * THE STACK IS NEUTRALISED, NOT REMOVED. The markup stays in base.html, the
 * ids stay queryable, `.is-active` still toggles. `display:none` on the
 * container was rejected for that reason. This is presentation only.
 *
 * WHY THE PICTURE MOVES TO <body> RATHER THAN THIS STACK KEEPING IT: reproducing
 * the Kaliber look on the stack would mean matching `filter:` (t7-theme.css:51-58
 * forces `saturate(108%) contrast(100%) brightness(0.62) !important`), an
 * `opacity: .32` overlay (t7-theme.css:59-66) and a `mix-blend-mode: screen`
 * ::before radial (style.css:178-188) — three more compositing steps the other
 * three shells do not have, i.e. three more ways for base.html to look
 * "nearly the same". One `background` on one <body> is the only way the shells
 * can be provably identical.
 *
 * EXACTLY ONE `!important` SURVIVES IN THIS BLOCK, AND IT IS THE ONE THAT HAS
 * NO ALTERNATIVE — 2026-08-08
 * ---------------------------------------------------------------------------
 * Five of the six used to be here to beat `!important` declarations in
 * t7-theme.css (`.site-bg-layer { filter: … !important }`,
 * `.site-bg-overlay { opacity/background … !important }`). Those were removed
 * at source on the same date, because each was only ever beating a PLAIN
 * declaration in style.css that base.html links eighteen lines earlier — source
 * order had already settled every one of them. With the fight over, the
 * declarations below win the ordinary way: `body.kaliber-site-backdrop .x` is
 * (0,2,1) against style.css's and t7-theme's bare `.x` at (0,1,0), and this is
 * the last stylesheet in the shell.
 *
 * `background-image: none !important` IS DIFFERENT AND IT STAYS. It is not
 * competing with a stylesheet at all — `base.html:395` renders
 * `<div id="siteBgLayerA" … style="background-image: url('…')">`, an INLINE
 * STYLE ATTRIBUTE. Inline styles outrank every author rule regardless of
 * specificity or order; `!important` in an author sheet is the ONLY thing in
 * CSS that beats one. Remove it and the T7 fire scene paints straight back over
 * the Kaliber backdrop on all 27 legacy pages, which is the exact defect this
 * file exists to fix. Do not "tidy" it away.
 *
 * (The genuinely clean fix would be to stop emitting that inline attribute in
 * base.html and let the stylesheet own the layer. It is left alone deliberately:
 * `static/js/app.js` cross-fades #siteBgLayerA/B by WRITING that same inline
 * property, so removing it from the template would not remove it from the
 * document — it would just move the moment it appears from render time to
 * script time, and make the failure intermittent instead of constant. That is a
 * JS change in a file this pass does not own.)
 *
 * Selectors are scoped to this body class, so they are inert on the PHP pages
 * and the two Kaliber shells, which have no such elements.
 * ------------------------------------------------------------------------- */
body.kaliber-site-backdrop .site-bg-layer {
    /* THE ONLY `!important` LEFT IN THIS FILE. It beats the inline
       `style="background-image: url(…)"` attribute on #siteBgLayerA, which no
       amount of specificity or source order can touch. See the note above. */
    background-image: none !important;
    background-color: transparent;
    filter: none;
}
body.kaliber-site-backdrop .site-bg-layer::before {
    opacity: 0;
}
body.kaliber-site-backdrop .site-bg-overlay {
    opacity: 0;
    background: none;
}

/* `static/js/t7-sparks.js` paints #spark-canvas with
   `FIRE_COLORS = ["#ff0000","#ff4500","#ffd700"]` — drifting RED AND GOLD embers.
   Over a violet/teal backdrop they do not read as ambience, they read as the
   ember theme still being half-present, which is the exact "these pages don't
   match" complaint. Hidden rather than recoloured so that NO JavaScript is
   touched: the canvas keeps running off-screen exactly as it already does on any
   page scrolled past it. This is the same call `kaliber-purchase-theme.css`
   already made for /purchase ("Kaliber has no ember motif"), generalised.
   THIS IS A VISIBLE FEATURE REMOVAL and it is the one judgement call in this
   file — deleting these three lines brings the embers back site-wide with no
   other consequence.

   `!important` REMOVED 2026-08-08. `t7-theme.css:1141` declares `#spark-canvas`
   with position/size/pointer-events/z-index and NO `display` at all, and
   nothing else in the tree declares one — grepped. There was never a rule to
   beat, so the keyword was doing nothing except making this harder to override
   for a page that legitimately wanted its embers back. */
body.kaliber-site-backdrop #spark-canvas {
    display: none;
}