/* =====================================================================
   Guild theme, opted into page by page (home, archive, quest board so far).
   A page adds `cg-guild` to its wrapper and renders
   `<div class="cg-mapbg" aria-hidden="true"></div>` as its first child.

   1. World-map backdrop behind every member page (fixed, dimmed, vignetted).
   2. Handmade-paper texture on the common surfaces (Bootstrap cards, modals,
      quest scrolls) blended into whatever colour each surface already has,
      so nothing changes colour, it just stops being a flat fill.
   Nothing here touches the logged-out pages.
   ===================================================================== */

/* ---------- 1. Map backdrop ---------- */

.cg-mapbg {
    --map-opacity: 0.5; /* how much of the map shows through */
    --map-brightness: 0.72; /* < 1 darkens the art */
    --map-saturate: 0.9; /* < 1 mutes the remaining colour */
    --map-blur: 0px; /* raise to soften detail behind text */
    --map-ground: 42, 42, 42; /* page ground (#2a2a2a) the vignette fades into */

    position: fixed;
    inset: 0;
    z-index: -1; /* under all content; the page ground is painted by <html> beneath it */
    pointer-events: none;
    overflow: hidden;
}

    .cg-mapbg::before,
    .cg-mapbg::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    .cg-mapbg::before {
        background-image: url("/images/mapart.jpg");
        background-image: image-set(url("/images/mapart.webp") type("image/webp"), url("/images/mapart.jpg") type("image/jpeg"));
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        opacity: var(--map-opacity);
        filter: brightness(var(--map-brightness)) saturate(var(--map-saturate)) blur(var(--map-blur));
    }

    .cg-mapbg::after {
        background:
            radial-gradient(ellipse 120% 85% at 50% 42%, rgba(var(--map-ground), 0) 0%, rgba(var(--map-ground), 0.35) 58%, rgba(var(--map-ground), 0.88) 100%),
            linear-gradient(to bottom, rgba(var(--map-ground), 0.6) 0%, rgba(var(--map-ground), 0.1) 26%, rgba(var(--map-ground), 0.1) 72%, rgba(var(--map-ground), 0.7) 100%);
    }

/* app.css paints #2a2a2a on both <html> and <body>. A body background would sit on top
   of a z-index:-1 layer, so make body transparent and let <html> keep painting the ground. */
body {
    background-color: transparent !important;
}

/* ---------- 2. Paper texture ---------- */

/* Three colourless, tiling noise layers blended soft-light into the element's own
   background-color: broad pulp mottling, long fibres, fine grain (white at about
   0.26 / 0.16 / 0.145 alpha). They are scaled up by background-size, which softens them
   and keeps one tile wider than the widest card (1240px), so no repeat seam shows
   before the edge.
   The tiles are plain images (wwwroot/images/paper). They used to be inline SVG
   feTurbulence filters, which Chrome computes at the drawn size times the screen
   scaling: on a PC where Chrome draws without the graphics card that cost ~160 ms per
   page (tested Oct 2026, after a desktop lag report). The images were rendered from those exact
   SVGs (same seeds, same alpha), so the look is unchanged. To change the texture,
   re-render a tile rather than going back to an SVG filter. */
:root {
    --cg-paper-layers:
        url("/images/paper/paper-mottle.webp"),
        url("/images/paper/paper-fibres.webp"),
        url("/images/paper/paper-grain.webp");
    --cg-paper-sizes: 2200px 2200px, 1100px 1100px, 220px 220px;
}

.cg-paper,
.ann-card,
.cg-guild .card,
.cg-guild .modal-content {
    background-image: var(--cg-paper-layers);
    background-size: var(--cg-paper-sizes);
    background-repeat: repeat;
    background-blend-mode: soft-light, soft-light, soft-light;
}

/* Quest board scrolls keep their parchment art as the bottom layer. */
.cg-guild .quest-scroll {
    background-image:
        url("/images/paper/paper-mottle.webp"),
        url("/images/paper/paper-fibres.webp"),
        url("/images/parchment.jpg");
    background-size: 2200px 2200px, 1100px 1100px, cover;
    background-position: 0 0, 0 0, center center;
    background-repeat: repeat, repeat, no-repeat;
    background-blend-mode: soft-light, soft-light, normal;
    transition: transform 0.22s cubic-bezier(.2,.8,.3,1), box-shadow 0.22s ease;
}

    @media (hover: hover) { /* mouse/trackpad only: on phones a tapped card would stay lifted */
    .cg-guild .quest-scroll:hover {
        transform: translateY(-5px);
        box-shadow: 10px 14px 24px rgba(0, 0, 0, 0.5);
    }
    }

/* Cards and modals get a soft inner edge so they read as sheets, not flat fills.
   Kept off the quest scrolls, whose parchment art already has edges. */
.cg-guild .card,
.cg-guild .modal-content {
    box-shadow: inset 0 0 34px rgba(0, 0, 0, 0.22);
}

@media (prefers-reduced-motion: reduce) {
    .cg-guild .quest-scroll {
        transition: none;
    }

    @media (hover: hover) { /* mouse/trackpad only: on phones a tapped card would stay lifted */
    .cg-guild .quest-scroll:hover {
        transform: none;
    }
    }
}

/* Placeholder text in themed forms: Bootstrap's default grey vanishes on slate inputs. */
.cg-guild ::placeholder {
    color: rgba(236, 233, 226, 0.5) !important;
    opacity: 1;
}