/* =====================================================================
   SCRIPTORIUM — ILLUMINATED PAGE BACKGROUND v1
   ---------------------------------------------------------------------
   Load AFTER:
     illuminated-foundation.css
     illuminated-rail-ornament.css
     illuminated-handmade-polish.css

   Load BEFORE the more specific room/vignette layers:
     illuminated-room-hero.css
     illuminated-vignettes.css

   Uses EXISTING art already in /public/rooms:
     parchment-texture.webp
     illum-corner-tl.webp
     illum-corner-tr.webp
     illum-corner-bl.webp
     illum-corner-br.webp
     illum-floral-spray.webp
     illum-gold-vine.webp

   Presentation only. No HTML / JS / state / saves / routing changes.
   ===================================================================== */


/* =====================================================================
   1. OUTSIDE THE MANUSCRIPT
   Luxurious black parchment desk with pigment stains, grain and a gold
   vine, identical in every theme. All colours are tokens (--illum-desk-*),
   so a theme / weather layer can retint the desk later without touching
   these rules.

   Why this block exists in this form:
   The former rule used the `background` shorthand, which reset
   background-color, while <body> is position: fixed and <html> is 0 px
   high. The gradients had no area to paint and the canvas stayed white
   around the manuscript. Giving <html> a height (below) and a real
   background-color fixes both.
   ===================================================================== */

:root:has(body.design-iluminovana) {
    height: 100%;
}

body.design-iluminovana {
    --illum-desk-color: #0c0907;
    --illum-desk-edge: #070504;
    --illum-desk-in: #130d09;
    --illum-desk-mid: #1b120c;

    /* r, g, b triplets, used as rgba(var(--illum-desk-*), alpha) */
    --illum-desk-rubric: 124, 43, 35;
    --illum-desk-blue: 49, 77, 99;
    --illum-desk-green: 82, 100, 62;
    --illum-desk-gold: 196, 154, 70;
    --illum-desk-warm: 105, 72, 41;

    /* half of the manuscript width at >= 1200 px (see illuminated-foundation.css) */
    --illum-desk-half: 660px;
    /* the vine needs a gutter of at least ~120 px, see the media query below */
    --illum-desk-vine: none;
    --illum-grain: url('/rooms/parchment-grain.webp');

    background-color: var(--illum-desk-color) !important;

    background-image:
        /* gold vine, left and right of the manuscript */
        var(--illum-desk-vine),
        var(--illum-desk-vine),

        /* pigment dots (same recipe as the rail) */
        radial-gradient(circle at 9% 18%, rgba(var(--illum-desk-rubric), .60) 0 3px, transparent 4px),
        radial-gradient(circle at 91% 31%, rgba(var(--illum-desk-green), .50) 0 4px, transparent 5px),
        radial-gradient(circle at 12% 57%, rgba(var(--illum-desk-blue), .55) 0 3px, transparent 4px),
        radial-gradient(circle at 88% 72%, rgba(var(--illum-desk-rubric), .50) 0 4px, transparent 5px),
        radial-gradient(circle at 7% 86%, rgba(var(--illum-desk-gold), .55) 0 2px, transparent 3px),
        radial-gradient(circle at 94% 9%, rgba(var(--illum-desk-gold), .55) 0 2px, transparent 3px),

        /* soft stains */
        radial-gradient(ellipse at 6% 30%, rgba(var(--illum-desk-rubric), .16), transparent 22%),
        radial-gradient(ellipse at 95% 60%, rgba(var(--illum-desk-blue), .15), transparent 24%),
        radial-gradient(ellipse at 8% 80%, rgba(var(--illum-desk-warm), .22), transparent 26%),
        radial-gradient(ellipse at 93% 15%, rgba(var(--illum-desk-warm), .20), transparent 26%),
        radial-gradient(ellipse at 50% 12%, rgba(var(--illum-desk-warm), .10), transparent 52%),

        /* parchment grain */
        var(--illum-grain),

        /* leather-dark base, lighter towards the manuscript */
        linear-gradient(
            90deg,
            var(--illum-desk-edge) 0%,
            var(--illum-desk-in) 30%,
            var(--illum-desk-mid) 50%,
            var(--illum-desk-in) 70%,
            var(--illum-desk-edge) 100%
        ) !important;

    background-repeat:
        repeat-y, repeat-y,
        no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
        no-repeat, no-repeat, no-repeat, no-repeat, no-repeat,
        repeat,
        no-repeat !important;

    background-size:
        96px auto, 96px auto,
        auto, auto, auto, auto, auto, auto,
        auto, auto, auto, auto, auto,
        640px 640px,
        auto !important;

    /* The vine hugs the manuscript edge; the right one is shifted so the
       two are not mirror images. calc() uses 50vw: percentages in a
       background-position offset refer to (area - image), not to the area. */
    background-position:
        right calc(50vw + var(--illum-desk-half) + 14px) top 0,
        left calc(50vw + var(--illum-desk-half) + 14px) top -160px,
        0 0, 0 0, 0 0, 0 0, 0 0, 0 0,
        0 0, 0 0, 0 0, 0 0, 0 0,
        0 0,
        0 0 !important;
}

@media (min-width: 1560px) {
    body.design-iluminovana {
        --illum-desk-vine: url('/rooms/illum-desk-vine.svg');
    }
}


/* =====================================================================
   2. MANUSCRIPT FRAME
   Keep the game container itself neutral; the actual page treatment lives
   in the scrollable main area below the dynamic landscape header.
   ===================================================================== */

body.design-iluminovana #game-container {
    background-color: #ead9b5 !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(62, 34, 17, .10),
            transparent 15px,
            transparent calc(100% - 15px),
            rgba(62, 34, 17, .09)
        ) !important;

    border-left:
        1px solid
        rgba(180, 137, 66, .62) !important;

    border-right:
        1px solid
        rgba(180, 137, 66, .62) !important;

    /* double gold / rubric rule tooled around the manuscript, then the
       original shadow (rail recipe: dark, gap, gold) */
    box-shadow:
        0 0 0 5px #0a0705,
        0 0 0 6px rgba(var(--illum-desk-gold), .55),
        0 0 0 9px #0a0705,
        0 0 0 10px rgba(var(--illum-desk-rubric), .60),
        0 0 42px 10px rgba(0,0,0,.72),
        inset 1px 0 0 rgba(255,241,204,.20),
        inset -1px 0 0 rgba(255,241,204,.14) !important;
}


/* =====================================================================
   3. MAIN PAGE — REAL PARCHMENT TEXTURE + MANUSCRIPT MARGINALIA
   ===================================================================== */

body.design-iluminovana main#main-content {
    position: relative !important;
    isolation: isolate;

    /*
       IMPORTANT:
       The texture is real artwork from the repo; the CSS gradients are
       only translucent age / stain / fold layers over it.
    */
    background-color: #ead9b5 !important;

    background-image:
        /* top-left illuminated corner */
        url('/rooms/illum-corner-tl.webp'),

        /* top-right illuminated corner */
        url('/rooms/illum-corner-tr.webp'),

        /* lower-left illuminated corner */
        url('/rooms/illum-corner-bl.webp'),

        /* lower-right illuminated corner */
        url('/rooms/illum-corner-br.webp'),

        /* occasional botanical marginalia */
        url('/rooms/illum-floral-spray.webp'),

        /* thin manuscript vine in the outer margin */
        url('/rooms/illum-gold-vine.webp'),

        /* dried-water / handling stain */
        radial-gradient(
            ellipse at 76% 31%,
            rgba(116, 72, 37, .085) 0%,
            rgba(116, 72, 37, .045) 18%,
            transparent 42%
        ),

        /* smaller old stain */
        radial-gradient(
            ellipse at 17% 67%,
            rgba(126, 68, 39, .065) 0%,
            rgba(126, 68, 39, .035) 15%,
            transparent 36%
        ),

        /* faint diagonal "two pieces of parchment" shift */
        linear-gradient(
            154deg,
            rgba(255,248,220,.16) 0%,
            rgba(255,248,220,.10) 43%,
            rgba(132, 89, 45, .035) 43.3%,
            rgba(132, 89, 45, .055) 44%,
            rgba(255,255,255,0) 44.4%,
            rgba(96, 58, 31, .025) 100%
        ),

        /* edge handling / age */
        linear-gradient(
            90deg,
            rgba(80, 44, 22, .065) 0%,
            transparent 4%,
            transparent 95%,
            rgba(80, 44, 22, .055) 100%
        ),

        /* actual paper artwork */
        url('/rooms/parchment-texture.webp') !important;

    background-repeat:
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat-y,
        no-repeat,
        no-repeat,
        no-repeat,
        no-repeat,
        repeat !important;

    background-position:
        left 5px top 5px,
        right 7px top 7px,
        left 8px bottom 7px,
        right 8px bottom 7px,
        right 3px top 58%,
        left 2px top 0,
        center,
        center,
        center,
        center,
        center top !important;

    background-size:
        118px auto,
        108px auto,
        94px auto,
        104px auto,
        165px auto,
        42px auto,
        100% 100%,
        100% 100%,
        100% 100%,
        100% 100%,
        560px auto !important;

    background-attachment:
        local,
        local,
        local,
        local,
        local,
        local,
        local,
        local,
        local,
        local,
        local !important;

    box-shadow:
        inset 14px 0 20px -20px rgba(63, 35, 18, .44),
        inset -14px 0 20px -20px rgba(63, 35, 18, .38),
        inset 0 18px 24px -28px rgba(67, 38, 20, .40) !important;
}


/* =====================================================================
   4. CONTENT ABOVE THE PAGE ART
   ===================================================================== */

body.design-iluminovana main#main-content > .screen {
    position: relative;
    z-index: 1;
}


/*
   The page should remain visible BETWEEN cards.
   Do not give the entire active screen an opaque rectangle.
*/
body.design-iluminovana main#main-content > .screen.active {
    background: transparent !important;
}


/* =====================================================================
   5. SUBTLE MANUSCRIPT RULES IN EMPTY SPACE
   These are intentionally faint so dense UI remains readable.
   ===================================================================== */

body.design-iluminovana main#main-content::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;

    top: 0;
    bottom: 0;

    left: clamp(13px, 2.1vw, 29px);

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent 0 30px,
            rgba(132, 58, 43, .19) 30px calc(100% - 26px),
            transparent calc(100% - 26px)
        );

    box-shadow:
        4px 0 0 rgba(188, 145, 64, .09);
}


/* right edge rule — deliberately incomplete / worn */
body.design-iluminovana main#main-content::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;

    top: 42px;
    bottom: 76px;
    right: clamp(10px, 1.8vw, 25px);

    width: 1px;

    background:
        linear-gradient(
            180deg,
            transparent 0%,
            rgba(177, 133, 59, .12) 8%,
            rgba(177, 133, 59, .17) 45%,
            transparent 73%,
            rgba(116, 61, 39, .09) 86%,
            transparent 100%
        );
}


/* =====================================================================
   6. DESKTOP / WIDE MANUSCRIPT
   Give the marginalia enough air to breathe without touching controls.
   ===================================================================== */

@media (min-width: 768px) {

    body.design-iluminovana main#main-content {
        background-position:
            left 9px top 8px,
            right 11px top 8px,
            left 11px bottom 9px,
            right 12px bottom 9px,
            right 7px top 61%,
            left 5px top 0,
            center,
            center,
            center,
            center,
            center top !important;

        background-size:
            145px auto,
            132px auto,
            116px auto,
            124px auto,
            205px auto,
            48px auto,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            640px auto !important;
    }
}


@media (min-width: 1200px) {

    body.design-iluminovana main#main-content {
        background-size:
            168px auto,
            150px auto,
            132px auto,
            142px auto,
            235px auto,
            54px auto,
            100% 100%,
            100% 100%,
            100% 100%,
            100% 100%,
            720px auto !important;
    }
}


/* =====================================================================
   7. PHONE PORTRAIT
   Less decoration; content width is precious and the bottom dock already
   provides a strong visual frame.
   ===================================================================== */

@media (max-width: 900px) and (orientation: portrait) {

    body.design-iluminovana main#main-content {
        background-image:
            url('/rooms/illum-corner-tl.webp'),
            url('/rooms/illum-corner-br.webp'),
            url('/rooms/illum-floral-spray.webp'),

            radial-gradient(
                ellipse at 78% 30%,
                rgba(116, 72, 37, .065) 0%,
                rgba(116, 72, 37, .025) 18%,
                transparent 39%
            ),

            linear-gradient(
                155deg,
                rgba(255,248,220,.13) 0%,
                rgba(255,248,220,.07) 45%,
                rgba(113, 72, 37, .035) 45.4%,
                transparent 46%
            ),

            linear-gradient(
                90deg,
                rgba(80, 44, 22, .045),
                transparent 7%,
                transparent 94%,
                rgba(80, 44, 22, .04)
            ),

            url('/rooms/parchment-texture.webp') !important;

        background-repeat:
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            no-repeat,
            repeat !important;

        background-position:
            left 3px top 4px,
            right 4px bottom 8px,
            right -16px top 68%,
            center,
            center,
            center,
            center top !important;

        background-size:
            88px auto,
            82px auto,
            126px auto,
            100% 100%,
            100% 100%,
            100% 100%,
            440px auto !important;
    }


    body.design-iluminovana main#main-content::before {
        left: 5px;
        opacity: .52;
    }


    body.design-iluminovana main#main-content::after {
        right: 5px;
        opacity: .38;
    }
}


/* =====================================================================
   8. DARK / NIGHT THEME
   The page tint of the dark and night themes (page colour, grain, cards,
   tabs, edge wash) lives in illuminated-theme-tint.css, which loads last.
   Do not use filter on main: it would dim interactive content too.
   ===================================================================== */


/*
   Header stays dynamic and weather/season driven.
   We intentionally DO NOT place any manuscript artwork over:
   .header-bg-layer
   .header-canonical-overlay
*/


/* =====================================================================
   9. ACCESSIBILITY / PRINT-LIKE STABILITY
   No decorative motion.
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {
    body.design-iluminovana main#main-content,
    body.design-iluminovana main#main-content::before,
    body.design-iluminovana main#main-content::after {
        transition: none !important;
    }
}