/*
 * Scriptorium — Iluminovaná design, Phase 1
 * ------------------------------------------------------------
 * Scope: visual layer only.
 * No gameplay IDs, onclick handlers, state objects or mechanics are changed.
 *
 * Phase 1 intentionally styles Scriptorium (#screen-lore) first.
 * Other rooms retain the existing base/Marnivá appearance until their
 * own room artwork is added in later phases.
 */

/* Keep the new design isolated from Pokorná and Marnivá. */
body.design-iluminovana {
    --illum-room-edge: rgba(34, 23, 14, 0.62);
    --illum-gold-soft: rgba(197, 160, 89, 0.42);
    --illum-gold-faint: rgba(197, 160, 89, 0.18);
    --illum-paper-glow: rgba(255, 248, 229, 0.30);
}

/* ─────────────────────────────────────────────────────────────
   SCRIPTORIUM — room image behind the page title + tabs
   Dynamic outdoor/weather header above stays untouched.
   ───────────────────────────────────────────────────────────── */
body.design-iluminovana #screen-lore {
    position: relative;
    isolation: isolate;
}

/* Room artwork is a presentation-only layer and never receives clicks. */
body.design-iluminovana #screen-lore::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: -20px;
    left: -20px;
    right: -20px;
    height: 230px;

    background-image:
        linear-gradient(
            to bottom,
            rgba(18, 12, 8, 0.06) 0%,
            rgba(18, 12, 8, 0.16) 44%,
            var(--bg-parchment) 100%
        ),
        linear-gradient(
            to right,
            rgba(10, 7, 5, 0.28) 0%,
            rgba(10, 7, 5, 0.02) 35%,
            rgba(10, 7, 5, 0.04) 76%,
            rgba(10, 7, 5, 0.22) 100%
        ),
        url("/rooms/scriptorium.webp");

    background-position: center top, center top, center 44%;
    background-size: cover, cover, cover;
    background-repeat: no-repeat;
    border-bottom: 1px solid var(--illum-gold-soft);
    box-shadow: inset 0 -18px 24px -18px var(--bg-parchment);
}

/* Keep real controls above the decorative room layer. */
body.design-iluminovana #screen-lore > .screen-header-row,
body.design-iluminovana #screen-lore > #lore-overlay,
body.design-iluminovana #screen-lore > #lore-content-wrapper {
    position: relative;
    z-index: 1;
}

/* Title stays in the same wireframe location; only its presentation changes. */
body.design-iluminovana #screen-lore > .screen-header-row {
    min-height: 104px;
    align-items: flex-end;
    padding: 12px 4px 14px;
}

body.design-iluminovana #screen-lore > .screen-header-row h2 {
    margin: 0;
    color: #f6e8bf !important;
    font-family: "Cinzel Decorative", serif !important;
    font-size: clamp(1.48rem, 4.8vw, 2.15rem);
    letter-spacing: 0.055em;
    text-shadow:
        0 2px 2px rgba(0, 0, 0, 0.85),
        0 0 14px rgba(0, 0, 0, 0.48),
        0 0 5px rgba(197, 160, 89, 0.58);
}

/* Remove the generic Art Nouveau divider only from this hero title.
   The artwork itself becomes the divider. */
body.design-iluminovana #screen-lore > .screen-header-row h2::after {
    display: none !important;
}

/* Top Scriptorium tab rail: same DOM/wrapping behavior, manuscript skin. */
body.design-iluminovana #lore-content-wrapper > .filter-bar {
    margin-top: 0 !important;
    padding: 5px 4px 11px !important;
    gap: 6px !important;
    border-bottom: 1px solid var(--illum-gold-faint);
}

body.design-iluminovana #screen-lore .filter-btn {
    min-height: 34px;
    padding: 6px 11px !important;
    background: var(--bg-card) !important;
    color: var(--ink-primary) !important;
    border: 1px solid var(--accent-gold) !important;
    border-radius: 3px !important;
    box-shadow:
        inset 0 1px 0 var(--illum-paper-glow),
        0 1px 3px rgba(0, 0, 0, 0.10) !important;
    font-family: "Cinzel Decorative", serif !important;
    letter-spacing: 0.025em;
}

body.design-iluminovana #screen-lore .filter-btn:hover {
    background: var(--bg-card) !important;
    border-color: var(--accent-gold) !important;
    box-shadow:
        inset 0 1px 0 var(--illum-paper-glow),
        0 2px 7px var(--illum-gold-faint) !important;
}

/* Active tabs use the active THEME accent. Winter therefore stays winter,
   dark stays dark, etc.; Design and Theme remain independent systems. */
body.design-iluminovana #screen-lore .filter-btn.active {
    background: var(--accent-wax) !important;
    color: #ffffff !important;
    border-color: var(--accent-gold) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.22),
        0 2px 8px rgba(0, 0, 0, 0.24),
        0 0 8px var(--illum-gold-soft) !important;
}

/* Research cards: same grid and same elements; only the material changes. */
body.design-iluminovana #lore-research-content .card {
    background: var(--bg-card) !important;
    border: 1px solid var(--accent-gold) !important;
    outline: 1px solid var(--illum-gold-faint) !important;
    outline-offset: -4px !important;
    border-radius: 3px !important;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.10),
        inset 0 0 18px rgba(197, 160, 89, 0.045) !important;
}

/* Manuscript page gets a very faint second echo of the room art.
   It fades immediately so generated inline panels remain fully readable. */
body.design-iluminovana #lore-manuscripts-content {
    position: relative;
    isolation: isolate;
}

body.design-iluminovana #lore-manuscripts-content::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: -4px;
    right: -4px;
    top: 0;
    height: 190px;
    opacity: 0.14;
    background-image:
        linear-gradient(to bottom, transparent 0%, var(--bg-parchment) 100%),
        url("/rooms/scriptorium.webp");
    background-position: center top, center 58%;
    background-size: cover, cover;
    background-repeat: no-repeat;
}

body.design-iluminovana #lore-manuscripts-content > * {
    position: relative;
    z-index: 1;
}

/* The existing mobile interaction model is preserved. */
@media (max-width: 500px) {
    body.design-iluminovana #screen-lore::before {
        top: -20px;
        height: 205px;
        background-position: center top, center top, 53% 42%;
    }

    body.design-iluminovana #screen-lore > .screen-header-row {
        min-height: 88px;
        padding-top: 8px;
        padding-bottom: 10px;
    }

    body.design-iluminovana #screen-lore > .screen-header-row h2 {
        font-size: 1.48rem;
    }

    body.design-iluminovana #screen-lore .filter-btn {
        min-height: 36px;
        padding: 6px 10px !important;
        font-size: 0.70rem !important;
    }
}

/* On PC, allow the room art a little more breathing room without changing
   any column/grid/navigation mechanics. */
@media (min-width: 751px) {
    body.design-iluminovana #screen-lore::before {
        height: 255px;
        background-position: center top, center top, center 48%;
    }

    body.design-iluminovana #screen-lore > .screen-header-row {
        min-height: 126px;
        padding-bottom: 18px;
    }
}

/* Accessibility: no extra decorative motion is introduced. */
@media (prefers-reduced-motion: reduce) {
    body.design-iluminovana #screen-lore::before,
    body.design-iluminovana #lore-manuscripts-content::before {
        transition: none !important;
    }
}

/* =====================================================================
   PHASE 1.2 — MOBILE HERO HOTFIX
   Removes the large dark title rectangle introduced by Phase 1.1
   on mobile/tablet widths. Visual only.
   ===================================================================== */

@media (max-width: 767px) {
    body.design-iluminovana #screen-lore > .screen-header-row::before {
        display: none !important;
        content: none !important;
    }

    body.design-iluminovana #screen-lore > .screen-header-row h2 {
        color: #f7e9bd !important;
        text-shadow:
            0 2px 2px rgba(0, 0, 0, 0.95),
            0 0 10px rgba(0, 0, 0, 0.92),
            0 0 22px rgba(0, 0, 0, 0.72),
            0 0 4px rgba(197, 160, 89, 0.65) !important;
    }
}

/* =====================================================================
   PHASE 2 — SCRIPTORIUM MANUSCRIPT PANELS
   ---------------------------------------------------------------------
   Presentation-only refinement of #lore-manuscripts-content.
   No JavaScript, handlers, IDs, state, mechanics, timers or save data.
   Requires the existing /rooms/scriptorium.webp asset from Phase 1.
   ===================================================================== */

/* Reduce the broad ghost image from Phase 1 now that the main manuscript
   panel gets its own focused room-art band. */
body.design-iluminovana #lore-manuscripts-content::before {
    opacity: 0.075 !important;
    height: 150px !important;
}

/* ─── Resource strip ─────────────────────────────────────────────── */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(1) {
    padding: 12px 16px !important;
    margin-bottom: 14px !important;
    border: 1px solid var(--illum-brass-soft) !important;
    border-radius: 4px !important;
    background:
        linear-gradient(90deg,
            rgba(197,160,89,0.045),
            rgba(255,255,255,0.11) 48%,
            rgba(197,160,89,0.045)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.22),
        0 1px 3px rgba(45,28,15,0.06) !important;
}

/* ─── Dormitorium / Scriptor status card ───────────────────────── */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(2) {
    border-color: var(--illum-brass) !important;
    border-radius: 4px !important;
    background:
        linear-gradient(90deg,
            rgba(255,252,241,0.94),
            rgba(248,239,215,0.84)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.30),
        0 2px 6px rgba(45,28,15,0.08) !important;
}

/* Do not let the old bright left status bars dominate Iluminovaná. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(2) {
    border-left-color: var(--illum-rubric) !important;
    border-left-width: 4px !important;
}

/* Status card CTA only — existing onclick remains untouched. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(2) .craft-btn {
    background:
        linear-gradient(180deg, #963421 0%, #742416 100%) !important;
    color: #fff4df !important;
    border: 1px solid #b58a48 !important;
    border-radius: 3px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,239,198,0.24),
        0 2px 5px rgba(48,22,12,0.18) !important;
}

/* ─── Main manuscript work panel ───────────────────────────────── */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) {
    border-color: var(--illum-brass) !important;
    border-radius: 4px !important;
    box-shadow:
        0 3px 10px rgba(46,29,17,0.09),
        inset 0 0 24px rgba(133,92,44,0.03) !important;

    /* Room art behaves like the requested section-title background:
       visible near the top, then gently disappears into parchment. */
    background-color: #fbf7ee !important;
    background-image:
        linear-gradient(
            to bottom,
            rgba(251,247,238,0.28) 0%,
            rgba(251,247,238,0.72) 38%,
            rgba(251,247,238,0.94) 72%,
            #fbf7ee 100%
        ),
        url("/rooms/scriptorium.webp") !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center top, center 54% !important;
    background-size: 100% 165px, cover !important;
}

/* The four existing corner marks remain in place; tone their inline gold. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) > div[style*="position:absolute"] {
    border-color: var(--illum-brass) !important;
}

/* Active manuscript subheading: muted lapis, not electric browser-blue. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
    > div[style*="text-transform:uppercase"] {
    color: #315d78 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.32);
}

/* Manuscript title. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
    div[style*="font-size:1.15rem"] {
    color: #35281e !important;
}

/* Progress number. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
    div[style*="color:#3182ce"] {
    color: #376d8c !important;
}

/* Progress rule + diamond. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
    div[style*="background:#90cdf4"] {
    background: rgba(83,129,150,0.58) !important;
}
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
    div[style*="background:#90cdf4"] > div {
    background: #587f91 !important;
}

/* Folio markers become tiny parchment folios instead of cyan UI squares. */
body.design-iluminovana #lore-manuscripts-content div[title^="Folium"] {
    width: 17px !important;
    height: 18px !important;
    border: 1px solid #a88955 !important;
    border-radius: 2px !important;
    background:
        linear-gradient(135deg,
            rgba(255,252,235,0.96),
            rgba(225,209,171,0.82)) !important;
    box-shadow:
        inset -2px 0 0 rgba(122,91,48,0.08),
        0 1px 1px rgba(55,35,18,0.08) !important;
}

/* Completed folios are detected from the existing stronger blue inline style. */
body.design-iluminovana #lore-manuscripts-content div[title^="Folium"][style*="background:#3182ce"] {
    background:
        linear-gradient(180deg, #496f78 0%, #2f5662 100%) !important;
    border-color: #b39150 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.16),
        0 0 3px rgba(170,132,71,0.18) !important;
}

/* ─── Copying buttons ───────────────────────────────────────────── */
body.design-iluminovana #lore-manuscripts-content button[onclick="UI.copyFolium(1)"],
body.design-iluminovana #lore-manuscripts-content button[onclick="UI.copyFolium(5)"] {
    background:
        linear-gradient(180deg, #784014 0%, #502706 100%) !important;
    color: #fff5df !important;
    border-color: #b58a48 !important;
    border-radius: 3px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,238,195,0.22),
        0 2px 4px rgba(46,21,12,0.20) !important;
    letter-spacing: 0.015em;
}

body.design-iluminovana #lore-manuscripts-content button[onclick="UI.copyFolium(1)"]:hover,
body.design-iluminovana #lore-manuscripts-content button[onclick="UI.copyFolium(5)"]:hover {
    filter: brightness(1.08);
}

/* Automation stays a distinct "mechanical" action, but becomes muted lapis. */
body.design-iluminovana #lore-manuscripts-content button[onclick="UI.toggleManuscriptAutomation()"] {
    background:
        linear-gradient(180deg, #3b6d91 0%, #284f70 100%) !important;
    color: #fff8e8 !important;
    border-color: #9a814e !important;
    border-radius: 3px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.17),
        0 2px 4px rgba(30,41,46,0.18) !important;
}

/* ─── Manuscript list heading ───────────────────────────────────── */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(4) {
    position: relative;
    margin: 2px 0 12px !important;
    padding: 7px 0 8px 30px !important;
    color: #4b3524 !important;
    font-family: "Cinzel", serif !important;
    border-bottom: 1px solid var(--illum-brass-soft);
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::after {
    content: "❧";
    position: absolute;
    right: 8px;
    bottom: -10px;
    padding: 0 7px;
    color: var(--illum-brass);
    background: var(--bg-parchment);
    font-size: 1rem;
}

/* ─── Manuscript selection cards ───────────────────────────────── */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) {
    gap: 10px !important;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div {
    position: relative;
    min-height: 58px;
    padding: 11px 14px 11px 42px !important;
    border: 1px solid var(--illum-brass-soft) !important;
    border-radius: 3px !important;
    background:
        linear-gradient(135deg,
            rgba(255,253,244,0.90),
            rgba(242,231,203,0.69)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 1px 3px rgba(45,28,15,0.055);
    transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

/* Small illuminated-book medallion using only CSS and existing content. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div::before {
    content: "✦";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #d8bd76;
    font-size: 0.78rem;
    border: 1px solid #9d763e;
    border-radius: 2px;
    background:
        linear-gradient(90deg,
            transparent 46%,
            rgba(235,207,132,0.30) 47%,
            rgba(235,207,132,0.30) 53%,
            transparent 54%),
        linear-gradient(180deg, #733122, #4e2118);
    box-shadow:
        inset 0 0 0 2px rgba(238,205,120,0.10),
        0 1px 3px rgba(44,25,15,0.17);
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div:hover {
    transform: translateY(-1px);
    border-color: var(--illum-brass) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        0 3px 7px rgba(45,28,15,0.10);
}

/* Selected manuscript already contains the direct child AKTIVNÍ span. */
@supports selector(:has(*)) {
    body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div:has(> span) {
        border-color: #a97c3c !important;
        background:
            linear-gradient(135deg,
                rgba(238,220,174,0.74),
                rgba(250,244,224,0.92)) !important;
        box-shadow:
            inset 3px 0 0 var(--illum-rubric),
            0 2px 5px rgba(45,28,15,0.09);
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div:has(> span)::before {
        background:
            linear-gradient(90deg,
                transparent 46%,
                rgba(236,213,151,0.30) 47%,
                rgba(236,213,151,0.30) 53%,
                transparent 54%),
            linear-gradient(180deg, #8f3825, #642519);
        box-shadow:
            inset 0 0 0 2px rgba(238,205,120,0.15),
            0 0 5px rgba(170,132,71,0.24);
    }
}

/* Active label. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div > span {
    color: var(--illum-rubric) !important;
}

/* ─── Mobile layout refinements ─────────────────────────────────── */
@media (max-width: 500px) {
    body.design-iluminovana #lore-manuscripts-content > div:nth-child(1) {
        padding: 11px 12px !important;
        gap: 8px 14px !important;
        font-size: 0.78rem !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(2) {
        padding: 13px 14px !important;
        gap: 10px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(2) .craft-btn {
        width: 100%;
        justify-content: center;
        min-height: 42px;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) {
        padding: 14px !important;
        background-size: 100% 138px, auto 150px !important;
        background-position: center top, center top !important;
    }

    /* Existing main action row contains the left two-button group and
       the automation button. Modern Chrome/Safari support :has(); if a
       browser does not, the existing flex wrapping remains unchanged. */
    @supports selector(:has(*)) {
        body.design-iluminovana #lore-manuscripts-content
            div:has(> button[onclick="UI.toggleManuscriptAutomation()"]) {
            display: grid !important;
            grid-template-columns: 1fr !important;
            align-items: stretch !important;
            width: 100%;
        }

        body.design-iluminovana #lore-manuscripts-content
            div:has(> button[onclick="UI.toggleManuscriptAutomation()"])
            > div:has(> button[onclick="UI.copyFolium(1)"]) {
            display: grid !important;
            grid-template-columns: 1fr 1fr !important;
            gap: 8px !important;
            width: 100%;
        }
    }

    body.design-iluminovana #lore-manuscripts-content button[onclick="UI.copyFolium(1)"],
    body.design-iluminovana #lore-manuscripts-content button[onclick="UI.copyFolium(5)"],
    body.design-iluminovana #lore-manuscripts-content button[onclick="UI.toggleManuscriptAutomation()"] {
        width: 100% !important;
        justify-content: center !important;
        min-height: 42px;
        padding: 8px 10px !important;
        font-size: 0.76rem !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div {
        min-height: 64px;
        padding-top: 12px !important;
        padding-bottom: 12px !important;
    }
}

/* Narrow phones: stack the two manual copying actions as well, preventing
   long Czech labels from squeezing or wrapping awkwardly. */
@media (max-width: 360px) {
    @supports selector(:has(*)) {
        body.design-iluminovana #lore-manuscripts-content
            div:has(> button[onclick="UI.toggleManuscriptAutomation()"])
            > div:has(> button[onclick="UI.copyFolium(1)"]) {
            grid-template-columns: 1fr !important;
        }
    }
}

/* Reduced motion: remove the tiny hover lift. */
@media (prefers-reduced-motion: reduce) {
    body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div {
        transition: none !important;
    }
}

/* =====================================================================
   PHASE 2.1 — DETAIL CROPS, NO DUPLICATED FULL ROOM
   ---------------------------------------------------------------------
   Replaces the repeated full-room image inside manuscript panels with
   purpose-built details from the SAME artwork:
      - window + flower pot in Active Manuscript
      - cat detail beside the codex list heading
   Visual only. No gameplay/HTML/JS changes.
   ===================================================================== */

/* The active manuscript panel must NOT repeat the full Scriptorium hero. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) {
    background-color: #fbf7ee !important;
    background-image:
        linear-gradient(
            to right,
            rgba(251,247,238,0.98) 0%,
            rgba(251,247,238,0.94) 38%,
            rgba(251,247,238,0.70) 67%,
            rgba(251,247,238,0.34) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(251,247,238,0.10) 0%,
            rgba(251,247,238,0.45) 42%,
            #fbf7ee 100%
        ),
        url("/rooms/scriptorium-window.webp") !important;
    background-repeat: no-repeat, no-repeat, no-repeat !important;
    background-position: center, center, right top !important;
    background-size: cover, cover, auto 100% !important;
}

/* The codex heading gets a completely different visual fragment:
   the cat / lower desk detail. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(4) {
    overflow: hidden;
    isolation: isolate;
    min-height: 52px;
    display: flex !important;
    align-items: center;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::before {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    top: 0;
    right: 0;
    width: min(42%, 270px);
    height: 100%;
    opacity: 0.42;

    background-image:
        linear-gradient(
            to right,
            var(--bg-parchment) 0%,
            rgba(244,236,216,0.82) 24%,
            rgba(244,236,216,0.28) 68%,
            rgba(244,236,216,0.04) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(244,236,216,0.10),
            var(--bg-parchment) 100%
        ),
        url("/rooms/scriptorium-cat.webp");
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center, center, right center;
    background-size: cover, cover, cover;
}

/* Keep the ornament above the detail image. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::after {
    z-index: 2;
}

/* Tone down the broad Phase-1 ghost layer even further; otherwise the room
   would still appear a third time behind the section stack. */
body.design-iluminovana #lore-manuscripts-content::before {
    opacity: 0.025 !important;
    height: 110px !important;
}

/* Mobile: the window detail occupies only the upper-right corner of the
   panel, keeping text/buttons on clean parchment. */
@media (max-width: 500px) {
    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) {
        background-image:
            linear-gradient(
                to right,
                rgba(251,247,238,0.98) 0%,
                rgba(251,247,238,0.92) 50%,
                rgba(251,247,238,0.50) 100%
            ),
            linear-gradient(
                to bottom,
                rgba(251,247,238,0.14) 0%,
                rgba(251,247,238,0.58) 45%,
                #fbf7ee 100%
            ),
            url("/rooms/scriptorium-window.webp") !important;
        background-position: center, center, right top !important;
        background-size: cover, cover, auto 124px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::before {
        width: 46%;
        opacity: 0.30;
    }
}

/* =====================================================================
   PHASE 2.2 — TARGET ALIGNMENT
   ---------------------------------------------------------------------
   Brings Opisování closer to the approved mock-up:
   - NO repeated full-room background in the content
   - window/flowers as a transparent vignette on the active manuscript
   - Mourka/books as a separate vignette above the codex grid
   - illuminated initials on the six fixed manuscript cards
   - stronger manuscript borders / calmer parchment hierarchy

   CSS + two decorative image assets only.
   No JS, HTML, state, handlers, timers, mechanics or save logic.
   ===================================================================== */

/* Remove all broad repeated-room echoes introduced in earlier phases. */
body.design-iluminovana #lore-manuscripts-content::before {
    display: none !important;
    content: none !important;
}

/* ─── Active manuscript: clean parchment first, vignette second ─── */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) {
    overflow: hidden !important;
    isolation: isolate;
    background:
        linear-gradient(180deg,
            rgba(255,253,245,0.985) 0%,
            rgba(249,242,224,0.97) 100%) !important;
    border: 1px solid #aa8447 !important;
    outline: 1px solid rgba(170,132,71,0.20) !important;
    outline-offset: -5px !important;
}

/* Transparent window + flower detail. This is deliberately NOT a full-room
   image, and its alpha fades into the parchment on the left/bottom. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 0;
    right: 0;
    width: min(43%, 430px);
    height: 100%;
    background: url("/rooms/scriptorium-window-vignette.webp") right top / cover no-repeat;
    opacity: 0.62;
}

/* Real controls stay above the decorative vignette. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) > * {
    position: relative;
    z-index: 1;
}

/* Keep the title/progress text readable over the vignette. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
    div[style*="font-size:1.15rem"] {
    color: #24384b !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.72);
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
    div[style*="color:#3182ce"] {
    color: #2e6387 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.65);
}

/* More manuscript-like empty folios. */
body.design-iluminovana #lore-manuscripts-content div[title^="Folium"] {
    border-color: #a98248 !important;
    background:
        linear-gradient(135deg, #fffaf0 0%, #eadbb7 100%) !important;
    box-shadow:
        inset -2px 0 0 rgba(94,63,28,0.07),
        0 1px 1px rgba(54,35,18,0.08) !important;
}

/* ─── Codex heading + Mourka vignette ─────────────────────────── */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(4) {
    min-height: 60px !important;
    padding: 11px 310px 10px 34px !important;
    overflow: visible !important;
    border-bottom: 1px solid rgba(170,132,71,0.36) !important;
    background:
        linear-gradient(to right,
            rgba(197,160,89,0.035),
            rgba(255,255,255,0.02)) !important;
}

/* Override the earlier small cat background implementation. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: -24px;
    right: 4px;
    width: 300px;
    height: 112px;
    opacity: 0.82;
    background:
        url("/rooms/scriptorium-cat-vignette.webp") right center / contain no-repeat !important;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::after {
    content: "❧";
    position: absolute;
    z-index: 1;
    left: 255px;
    right: auto;
    bottom: -10px;
    padding: 0 8px;
    color: #aa8447;
    background: var(--bg-parchment);
    font-size: 1rem;
}

/* ─── Codex grid / illuminated initial cards ──────────────────── */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) {
    position: relative;
    z-index: 1;
    gap: 12px !important;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div {
    min-height: 76px !important;
    padding: 13px 14px 12px 76px !important;
    border: 1px solid rgba(170,132,71,0.58) !important;
    outline: 1px solid rgba(170,132,71,0.10);
    outline-offset: -4px;
    border-radius: 2px !important;
    background:
        linear-gradient(135deg,
            rgba(255,253,245,0.96),
            rgba(243,232,205,0.83)) !important;
}

/* Replace Phase 2's generic book medallion with illuminated initials.
   The manuscript DB/order is fixed in the current renderer. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div::before {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 2px solid #ae8747;
    outline: 1px solid #5d3420;
    outline-offset: -5px;
    border-radius: 2px;
    color: #e7c878;
    font-family: "Cinzel Decorative", "Cinzel", Georgia, serif;
    font-size: 2.05rem;
    font-weight: 700;
    line-height: 1;
    text-shadow:
        0 1px 0 #24150d,
        0 0 3px rgba(234,201,118,0.35);
    background:
        radial-gradient(circle at 32% 22%, rgba(37,83,122,0.92), transparent 38%),
        linear-gradient(135deg, #25496b 0%, #18324d 52%, #7b2e20 100%);
    box-shadow:
        inset 0 0 0 3px rgba(214,177,91,0.12),
        0 2px 4px rgba(44,26,14,0.15);
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div:nth-child(1)::before { content: "Z"; }
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div:nth-child(2)::before { content: "R"; }
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div:nth-child(3)::before { content: "Z"; }
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div:nth-child(4)::before { content: "H"; }
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div:nth-child(5)::before { content: "H"; }
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div:nth-child(6)::before { content: "C"; }

/* Selected codex gets rubric edge and slightly warmer parchment. */
@supports selector(:has(*)) {
    body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div:has(> span) {
        border-color: #a57b3e !important;
        background:
            linear-gradient(135deg,
                rgba(245,230,188,0.93),
                rgba(255,250,233,0.97)) !important;
        box-shadow:
            inset 4px 0 0 #8f2f1f,
            0 2px 6px rgba(45,28,15,0.10) !important;
    }
}

/* The original inline 📖 remains textual content. De-emphasize it so the
   illuminated initial becomes the visual anchor without altering renderer JS. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div
    > div > div:first-child {
    color: #24384b !important;
    font-family: "Cinzel", Georgia, serif !important;
}

/* Buttons closer to approved target. */
body.design-iluminovana #lore-manuscripts-content button[onclick="UI.copyFolium(1)"],
body.design-iluminovana #lore-manuscripts-content button[onclick="UI.copyFolium(5)"] {
    background:
        linear-gradient(180deg, #7e3c12 0%, #4f2508 100%) !important;
    border: 1px solid #b98b3f !important;
    box-shadow:
        inset 0 1px 0 rgba(255,240,198,0.22),
        0 2px 5px rgba(50,25,11,0.24) !important;
}

body.design-iluminovana #lore-manuscripts-content button[onclick="UI.toggleManuscriptAutomation()"] {
    background:
        linear-gradient(180deg, #2f6595 0%, #1f4b72 100%) !important;
    border: 1px solid #9a8048 !important;
}

/* ─── Responsive alignment ─────────────────────────────────────── */
@media (max-width: 800px) {
    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4) {
        padding-right: 210px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::before {
        width: 205px;
        height: 88px;
        top: -14px;
        opacity: 0.68;
    }
}

@media (max-width: 500px) {
    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)::after {
        width: 48%;
        height: 128px;
        opacity: 0.34;
        background-size: auto 128px;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4) {
        min-height: 50px !important;
        padding: 9px 118px 8px 28px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::before {
        width: 125px;
        height: 66px;
        top: -8px;
        opacity: 0.44;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::after {
        display: none;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div {
        min-height: 67px !important;
        padding: 11px 10px 10px 60px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div::before {
        left: 9px;
        width: 40px;
        height: 48px;
        font-size: 1.55rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div {
        transition: none !important;
    }
}

/* =====================================================================
   PHASE 2.3 — SCRIPTORIUM FINAL FRAME
   ---------------------------------------------------------------------
   Final shell polish for the approved Scriptorium target:
   - illuminated drop-cap S in the hero title
   - manuscript frame around the room page
   - refined Písařství resource tracker
   - quieter parchment tab rail
   - ornamental resource / warning panels
   - stronger codex typography and spacing
   - mobile-safe scaling

   CSS only. No HTML, JS, state, handlers, mechanics, saves, weather,
   header-image or ThemeSystem changes.
   ===================================================================== */

body.design-iluminovana #screen-lore {
    border-left: 1px solid rgba(170,132,71,0.46);
    border-right: 1px solid rgba(170,132,71,0.46);
    border-bottom: 1px solid rgba(170,132,71,0.36);
    box-shadow:
        inset 1px 0 0 rgba(255,255,255,0.14),
        inset -1px 0 0 rgba(255,255,255,0.08);
}

/* ─── Hero title / illuminated initial ─────────────────────────── */
body.design-iluminovana #screen-lore > .screen-header-row h2 {
    display: inline-block;
    line-height: 1.05;
    letter-spacing: 0.035em !important;
}

/* A true CSS drop-cap: does not alter the text or localization. */
body.design-iluminovana #screen-lore > .screen-header-row h2::first-letter {
    color: #e3c272;
    background:
        radial-gradient(circle at 32% 25%, rgba(65,103,143,0.90), transparent 44%),
        linear-gradient(135deg, #1f466b 0%, #17334f 55%, #762d21 100%);
    border: 2px solid #c5a059;
    outline: 1px solid rgba(77,39,22,0.88);
    outline-offset: -5px;
    padding: 0.03em 0.16em 0.05em;
    margin-right: 0.09em;
    text-shadow:
        0 1px 0 #1d130c,
        0 0 4px rgba(231,198,112,0.42);
    box-shadow:
        inset 0 0 0 3px rgba(224,190,105,0.10),
        0 2px 5px rgba(0,0,0,0.24);
}

/* ─── Scriptorium resource tracker ("Písařství") ─────────────── */
body.design-iluminovana #screen-lore > .screen-header-row .resource-tracker-bar {
    align-self: center;
    margin-left: auto;
}

body.design-iluminovana #screen-lore .res-tracker-toggle-btn,
body.design-iluminovana #screen-lore .res-tracker-container {
    border: 1px solid #b7904d !important;
    border-radius: 3px !important;
    background:
        linear-gradient(180deg,
            rgba(255,252,239,0.96),
            rgba(232,216,178,0.91)) !important;
    color: #3f2c1e !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.48),
        0 2px 5px rgba(35,20,11,0.18) !important;
}

body.design-iluminovana #screen-lore .res-tracker-title,
body.design-iluminovana #screen-lore .res-tracker-title-text {
    font-family: "Cinzel", Georgia, serif !important;
    color: #493321 !important;
}

body.design-iluminovana #screen-lore .res-tracker-icon,
body.design-iluminovana #screen-lore .res-tracker-close-btn {
    color: #7d552b !important;
}

body.design-iluminovana #screen-lore .res-pill {
    border-color: rgba(170,132,71,0.42) !important;
    background: rgba(255,252,241,0.72) !important;
    color: #4b3828 !important;
}

/* ─── Top tab rail ─────────────────────────────────────────────── */
body.design-iluminovana #lore-content-wrapper > .filter-bar {
    position: relative;
    padding-bottom: 13px !important;
    border-bottom: 1px solid rgba(170,132,71,0.35) !important;
}

body.design-iluminovana #lore-content-wrapper > .filter-bar::after {
    content: "❦";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    padding: 0 9px;
    color: #aa8447;
    background: var(--bg-parchment);
    font-size: 0.92rem;
}

/* More compact parchment tab faces, closer to the approved mock-up. */
body.design-iluminovana #lore-content-wrapper > .filter-bar > .filter-btn {
    padding: 7px 13px !important;
    border-radius: 2px !important;
    background:
        linear-gradient(180deg,
            rgba(255,253,245,0.97),
            rgba(235,221,187,0.92)) !important;
    border: 1px solid #ae8749 !important;
    color: #4a3323 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.46),
        0 1px 2px rgba(50,31,17,0.10) !important;
}

body.design-iluminovana #lore-content-wrapper > .filter-bar > .filter-btn.active {
    background:
        linear-gradient(180deg, #a23d29 0%, #832c1d 54%, #681f15 100%) !important;
    color: #fff4dc !important;
    border-color: #c5a059 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,235,180,0.30),
        inset 0 0 0 1px rgba(96,26,16,0.30),
        0 2px 5px rgba(43,22,12,0.22),
        0 0 5px rgba(197,160,89,0.28) !important;
}

/* ─── Resource strip inside Opisování ─────────────────────────── */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(1) {
    position: relative;
    border-color: rgba(170,132,71,0.52) !important;
    outline: 1px solid rgba(170,132,71,0.10);
    outline-offset: -4px;
    background:
        linear-gradient(90deg,
            rgba(244,230,196,0.68),
            rgba(255,253,245,0.94) 28%,
            rgba(255,253,245,0.94) 72%,
            rgba(244,230,196,0.68)) !important;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(1)::before,
body.design-iluminovana #lore-manuscripts-content > div:nth-child(1)::after {
    content: "✦";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(170,132,71,0.62);
    font-size: 0.62rem;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(1)::before {
    left: 5px;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(1)::after {
    right: 5px;
}

/* ─── Dormitorium warning / assignment strip ─────────────────── */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(2) {
    position: relative;
    outline: 1px solid rgba(170,132,71,0.12);
    outline-offset: -5px;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(2)::before {
    content: "❧";
    position: absolute;
    right: 12px;
    bottom: -9px;
    padding: 0 7px;
    color: rgba(170,132,71,0.72);
    background: var(--bg-parchment);
}

/* ─── Main active-manuscript typography ───────────────────────── */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) {
    padding-top: 22px !important;
    padding-bottom: 20px !important;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
    > div[style*="text-transform:uppercase"] {
    font-family: "Cinzel", Georgia, serif !important;
    letter-spacing: 0.07em !important;
    font-size: 0.83rem !important;
    color: #35617c !important;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
    div[style*="font-size:1.15rem"] {
    font-family: "Cinzel", Georgia, serif !important;
    font-size: 1.22rem !important;
    font-weight: 700 !important;
    color: #25394c !important;
}

/* ─── Codex list heading ───────────────────────────────────────── */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(4) {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #2f4353 !important;
    letter-spacing: 0.015em;
}

/* ─── Codex cards: stronger target-like hierarchy ─────────────── */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div {
    border-color: rgba(170,132,71,0.62) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.34),
        inset 0 0 14px rgba(149,101,48,0.025),
        0 2px 4px rgba(45,28,15,0.07) !important;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div:hover {
    border-color: #ad8242 !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.35),
        0 4px 9px rgba(45,28,15,0.11) !important;
}

/* The actual manuscript name remains functional text from the renderer.
   Give it the dark-lapis color used in the target. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div
    > div > div:first-child {
    color: #29435a !important;
    font-size: 0.91rem !important;
    line-height: 1.2;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div
    > div > div:nth-child(2) {
    color: #7b6247 !important;
    font-size: 0.73rem !important;
}

/* ─── Research cards: align same manuscript language ──────────── */
body.design-iluminovana #lore-research-content .card {
    border-color: rgba(170,132,71,0.58) !important;
    border-radius: 2px !important;
}

body.design-iluminovana #lore-research-content .card strong {
    font-family: "Cinzel", Georgia, serif !important;
    color: #673220 !important;
    letter-spacing: 0.018em;
}

/* ─── Mobile ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
    body.design-iluminovana #screen-lore {
        border-left-width: 0;
        border-right-width: 0;
    }

    /* Avoid trying to render a large framed drop-cap on a small phone. */
    body.design-iluminovana #screen-lore > .screen-header-row h2::first-letter {
        padding: 0.015em 0.10em 0.025em;
        margin-right: 0.055em;
        border-width: 1px;
        outline-width: 0;
        box-shadow:
            inset 0 0 0 2px rgba(224,190,105,0.08),
            0 1px 3px rgba(0,0,0,0.20);
    }

    body.design-iluminovana #lore-content-wrapper > .filter-bar {
        gap: 6px !important;
        padding-bottom: 10px !important;
    }

    body.design-iluminovana #lore-content-wrapper > .filter-bar::after {
        display: none;
    }
}

@media (max-width: 500px) {
    body.design-iluminovana #screen-lore > .screen-header-row h2 {
        letter-spacing: 0.015em !important;
    }

    body.design-iluminovana #lore-content-wrapper > .filter-bar > .filter-btn {
        min-height: 38px;
        padding: 7px 10px !important;
        font-size: 0.69rem !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(1) {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) {
        padding-top: 16px !important;
        padding-bottom: 15px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
        div[style*="font-size:1.15rem"] {
        font-size: 1.05rem !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div
        > div > div:first-child {
        font-size: 0.82rem !important;
    }
}

/* =====================================================================
   PHASE 2.4 — TEXTURE + REAL DETAILS
   ---------------------------------------------------------------------
   Corrects the remaining gap against the approved target:
   - visible paper/parchment texture in manuscript areas
   - image details sink into parchment instead of sitting as hard inserts
   - flowers are explicitly visible in the active manuscript section
   - Mourka/cat becomes clearly visible again
   - keeps illuminated initials introduced earlier

   CSS + 3 decorative assets only.
   No HTML, JS, state, saves, handlers, mechanics, weather or theme logic.
   ===================================================================== */

/* Stronger parchment material across the manuscript page. */
body.design-iluminovana #lore-manuscripts-content {
    background:
        linear-gradient(180deg,
            rgba(255,253,246,0.96),
            rgba(247,240,224,0.97)) !important;
}

/* Resource strip */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(1) {
    background-image:
        linear-gradient(90deg,
            rgba(244,230,196,0.58),
            rgba(255,253,245,0.92) 28%,
            rgba(255,253,245,0.92) 72%,
            rgba(244,230,196,0.58)),
        url("/rooms/parchment-texture.webp") !important;
    background-size: cover, 320px 320px !important;
    background-repeat: no-repeat, repeat !important;
}

/* Dormitorium strip */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(2) {
    background-image:
        linear-gradient(90deg,
            rgba(255,252,241,0.95),
            rgba(247,238,215,0.86)),
        url("/rooms/parchment-texture.webp") !important;
    background-size: cover, 360px 360px !important;
    background-repeat: no-repeat, repeat !important;
}

/* Active manuscript card:
   true parchment texture first, then a transparent flowers/window vignette
   that dissolves into the paper on the left and below. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) {
    position: relative;
    overflow: hidden !important;
    background-image:
        linear-gradient(180deg,
            rgba(255,252,244,0.97),
            rgba(248,241,225,0.97)),
        url("/rooms/parchment-texture.webp") !important;
    background-size: cover, 320px 320px !important;
    background-repeat: no-repeat, repeat !important;
    box-shadow:
        0 3px 8px rgba(46,29,17,0.08),
        inset 0 0 18px rgba(144,103,56,0.04) !important;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    top: 0;
    right: 0;
    width: min(42%, 360px);
    height: 100%;
    opacity: 0.95;
    background:
        url("/rooms/scriptorium-flowers-vignette.webp") right top / contain no-repeat;
    filter: saturate(0.95);
}

/* gentle paper mist to let the image melt into the parchment, not cut out */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    inset: 0;
    background:
        radial-gradient(circle at 78% 24%,
            rgba(255,252,244,0.02) 0%,
            rgba(255,252,244,0.08) 22%,
            rgba(255,252,244,0.32) 46%,
            rgba(255,252,244,0.62) 70%,
            rgba(255,252,244,0.00) 100%),
        linear-gradient(90deg,
            rgba(255,252,244,0.96) 0%,
            rgba(255,252,244,0.94) 45%,
            rgba(255,252,244,0.54) 78%,
            rgba(255,252,244,0.14) 100%),
        linear-gradient(180deg,
            rgba(255,252,244,0.08) 0%,
            rgba(255,252,244,0.24) 48%,
            rgba(255,252,244,0.90) 100%);
}

/* real content above decorative layers */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) > * {
    position: relative;
    z-index: 1;
}

/* Headline bar calmer, but with visible material */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(4) {
    position: relative;
    background:
        linear-gradient(90deg,
            rgba(248,241,226,0.82),
            rgba(255,253,246,0.35) 46%,
            rgba(248,241,226,0.70) 100%),
        url("/rooms/parchment-texture.webp") !important;
    background-size: cover, 340px 340px !important;
    background-repeat: no-repeat, repeat !important;
    border-bottom-color: rgba(170,132,71,0.32) !important;
}

/* Make Mourka actually visible and place her into the codex zone, not as a tiny hint. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    right: 6px;
    top: -8px;
    width: min(31%, 300px);
    height: 128px;
    opacity: 0.92;
    background: url("/rooms/scriptorium-cat-large-vignette.webp") right center / contain no-repeat !important;
}

/* Slight extra cat continuation over the empty right side above the grid. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) {
    position: relative;
    background:
        linear-gradient(180deg,
            rgba(255,253,246,0.06),
            rgba(255,253,246,0.00)),
        url("/rooms/parchment-texture.webp") !important;
    background-size: cover, 360px 360px !important;
    background-repeat: no-repeat, repeat !important;
    padding-top: 8px !important;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(5)::before {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    right: 8px;
    top: -26px;
    width: min(30%, 280px);
    height: 150px;
    opacity: 0.34;
    background: url("/rooms/scriptorium-cat-large-vignette.webp") right center / contain no-repeat;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div {
    position: relative;
    z-index: 1;
    background-image:
        linear-gradient(135deg,
            rgba(255,253,245,0.97),
            rgba(242,231,203,0.86)),
        url("/rooms/parchment-texture.webp") !important;
    background-size: cover, 260px 260px !important;
    background-repeat: no-repeat, repeat !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.36),
        0 2px 5px rgba(45,28,15,0.08) !important;
}

/* Research cards share paper texture too, so the style feels materially unified. */
body.design-iluminovana #lore-research-content .card {
    background-image:
        linear-gradient(180deg,
            rgba(255,253,246,0.97),
            rgba(244,235,213,0.95)),
        url("/rooms/parchment-texture.webp") !important;
    background-size: cover, 260px 260px !important;
    background-repeat: no-repeat, repeat !important;
}

/* Mobile: keep details smaller but still visible. */
@media (max-width: 500px) {
    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)::before {
        width: 46%;
        height: 135px;
        opacity: 0.82;
        background-size: auto 135px;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::before {
        width: 145px;
        height: 88px;
        top: -4px;
        opacity: 0.60;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(5)::before {
        width: 132px;
        height: 90px;
        top: -10px;
        opacity: 0.22;
    }
}

/* =====================================================================
   PHASE 2.5 — TARGET LOCK / DECORATIVE COMPOSITOR
   ---------------------------------------------------------------------
   This is a deliberate final override for the Scriptorium visual target.
   It corrects the remaining mismatch with the approved reference:

   1) ACTIVE MANUSCRIPT IMAGE NOW BLENDS DIAGONALLY FROM THE RIGHT.
   2) REAL ILLUMINATED FLORAL CORNERS ARE VISIBLE.
   3) PAPER TEXTURE IS MATERIAL, NOT A FLAT WEB BACKGROUND.
   4) MOURKA + BOOKS + CANDLE ARE LARGE AND CLEARLY VISIBLE.
   5) GOLD VINE + FLORAL MARGINALIA APPEAR AROUND THE CODEX SECTION.
   6) RESPONSIVE RULES PRESERVE THE EXISTING WIREFRAME.

   CSS + decorative assets only. No gameplay DOM/JS/state/mechanics.
   ===================================================================== */

body.design-iluminovana {
    --illum-paper: #f4ead1;
    --illum-paper-light: #fbf6e8;
    --illum-paper-dark: #e7d7b4;
    --illum-frame: #ad8545;
    --illum-frame-soft: rgba(173,133,69,.42);
    --illum-rubric-strong: #8b2d1d;
    --illum-lapis: #27577c;
}

/* Kill broad repeated-room ghosts from all earlier incremental phases. */
body.design-iluminovana #lore-manuscripts-content::before {
    content: none !important;
    display: none !important;
}

/* The whole manuscript page has real material depth. */
body.design-iluminovana #lore-manuscripts-content {
    position: relative;
    background-image:
        linear-gradient(rgba(249,244,230,.72), rgba(244,235,213,.72)),
        url("/rooms/parchment-target.webp") !important;
    background-size: cover, 360px 360px !important;
    background-repeat: no-repeat, repeat !important;
}

/* Resource / status panels use the same sheet of parchment. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(1),
body.design-iluminovana #lore-manuscripts-content > div:nth-child(2) {
    background-image:
        linear-gradient(90deg, rgba(255,252,242,.92), rgba(244,234,208,.82)),
        url("/rooms/parchment-target.webp") !important;
    background-size: cover, 330px 330px !important;
    background-repeat: no-repeat, repeat !important;
}

/* ================================================================
   ACTIVE MANUSCRIPT — this is the key target area
   ================================================================ */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
    min-height: 260px;
    padding: 24px 24px 21px !important;

    /* four actual floral illuminated corners + parchment texture */
    background-image:
        url("/rooms/illum-corner-tl.webp"),
        url("/rooms/illum-corner-tr.webp"),
        url("/rooms/illum-corner-bl.webp"),
        url("/rooms/illum-corner-br.webp"),
        linear-gradient(180deg, rgba(255,252,243,.94), rgba(246,237,214,.92)),
        url("/rooms/parchment-target.webp") !important;
    background-position:
        left 2px top 2px,
        right 2px top 2px,
        left 2px bottom 2px,
        right 2px bottom 2px,
        center,
        center !important;
    background-size:
        72px 72px,
        72px 72px,
        72px 72px,
        72px 72px,
        cover,
        340px 340px !important;
    background-repeat:
        no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat !important;

    border: 1px solid var(--illum-frame) !important;
    outline: 1px solid rgba(173,133,69,.24) !important;
    outline-offset: -6px !important;
    box-shadow:
        inset 0 0 24px rgba(110,75,35,.035),
        0 3px 8px rgba(49,30,16,.09) !important;
}

/* Right-side room detail with ALREADY-BUILT diagonal alpha.
   This is what the previous versions were missing. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 0 !important;
    pointer-events: none !important;
    top: 0 !important;
    right: 0 !important;
    width: 56% !important;
    height: 100% !important;
    opacity: .78 !important;
    background:
        url("/rooms/scriptorium-window-diagonal.webp") right top / cover no-repeat !important;
}

/* Parchment mist softens the very bottom/right but deliberately leaves
   the diagonal edge readable, matching the approved reference. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 0 !important;
    pointer-events: none !important;
    inset: 0 !important;
    background:
        linear-gradient(180deg,
            rgba(251,247,235,.02) 0%,
            rgba(251,247,235,.02) 55%,
            rgba(247,239,217,.30) 78%,
            rgba(247,239,217,.72) 100%),
        linear-gradient(90deg,
            rgba(251,247,235,.88) 0%,
            rgba(251,247,235,.46) 40%,
            rgba(251,247,235,.05) 70%,
            rgba(251,247,235,.00) 100%) !important;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) > * {
    position: relative !important;
    z-index: 2 !important;
}

/* More breathing room around the title/progress, like the target. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
    > div[style*="text-transform:uppercase"] {
    margin-left: 22px !important;
    color: #2d6183 !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.70);
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
    div[style*="font-size:1.15rem"] {
    color: #233b53 !important;
    font-family: "Cinzel", Georgia, serif !important;
    font-weight: 700 !important;
    font-size: 1.28rem !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.72);
}

/* Keep controls readable over the image while leaving the diagonal visible. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
    button {
    position: relative;
    z-index: 3;
}

/* Folia squares: parchment tiles, not cyan web widgets. */
body.design-iluminovana #lore-manuscripts-content div[title^="Folium"] {
    border: 1px solid #a67d3d !important;
    background:
        linear-gradient(135deg, #fffaf0, #e7d4aa) !important;
    box-shadow:
        inset -2px 0 0 rgba(88,58,25,.06),
        0 1px 1px rgba(55,34,17,.09) !important;
}

/* ================================================================
   CODEX HEADING — cat / books / candle / vine
   ================================================================ */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(4) {
    position: relative !important;
    isolation: isolate;
    overflow: visible !important;
    min-height: 78px !important;
    padding: 16px 420px 12px 38px !important;

    background-image:
        linear-gradient(90deg, rgba(250,245,231,.76), rgba(250,245,231,.18)),
        url("/rooms/parchment-target.webp") !important;
    background-size: cover, 340px 340px !important;
    background-repeat: no-repeat, repeat !important;
    border-bottom: 1px solid var(--illum-frame-soft) !important;
}

/* Mourka is intentionally large and unmistakable. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 0 !important;
    pointer-events: none !important;
    right: 6px !important;
    top: -22px !important;
    width: 410px !important;
    height: 142px !important;
    opacity: .96 !important;
    background:
        url("/rooms/scriptorium-cat-target.webp") right center / contain no-repeat !important;
}

/* Replace the tiny text flourish with the real gold vine from the target. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;
    pointer-events: none !important;
    left: 245px !important;
    bottom: -7px !important;
    width: 170px !important;
    height: 42px !important;
    padding: 0 !important;
    background:
        url("/rooms/illum-gold-vine.webp") left center / contain no-repeat !important;
}

/* ================================================================
   CODEX GRID — parchment + floral marginalia on the right
   ================================================================ */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) {
    position: relative !important;
    isolation: isolate;
    overflow: visible !important;
    gap: 12px !important;
    padding: 10px 10px 28px 10px !important;

    background-image:
        linear-gradient(180deg, rgba(250,245,231,.48), rgba(246,238,217,.66)),
        url("/rooms/parchment-target.webp") !important;
    background-size: cover, 360px 360px !important;
    background-repeat: no-repeat, repeat !important;
}

/* Explicitly remove the older duplicate-cat continuation. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5)::before {
    content: none !important;
    display: none !important;
}

/* Floral right marginalia: visible but behind cards. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5)::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 0 !important;
    pointer-events: none !important;
    right: -4px !important;
    bottom: -10px !important;
    width: 155px !important;
    height: 235px !important;
    opacity: .78 !important;
    background:
        url("/rooms/illum-floral-spray.webp") right bottom / contain no-repeat !important;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div {
    position: relative !important;
    z-index: 2 !important;
    min-height: 82px !important;
    background-image:
        linear-gradient(135deg, rgba(255,253,245,.95), rgba(240,228,197,.86)),
        url("/rooms/parchment-target.webp") !important;
    background-size: cover, 260px 260px !important;
    background-repeat: no-repeat, repeat !important;
    border: 1px solid rgba(173,133,69,.64) !important;
    outline: 1px solid rgba(173,133,69,.11) !important;
    outline-offset: -4px !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.38),
        0 2px 5px rgba(45,28,15,.08) !important;
}

/* Initials stay as approved. */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div::before {
    border-color: #b88d48 !important;
    box-shadow:
        inset 0 0 0 3px rgba(222,185,93,.13),
        0 2px 4px rgba(44,26,14,.17) !important;
}

/* Research cards use the same physical paper. */
body.design-iluminovana #lore-research-content .card {
    background-image:
        linear-gradient(180deg, rgba(255,253,246,.94), rgba(241,231,207,.90)),
        url("/rooms/parchment-target.webp") !important;
    background-size: cover, 280px 280px !important;
    background-repeat: no-repeat, repeat !important;
}

/* ================================================================
   RESPONSIVE — preserve wireframe, scale decoration
   ================================================================ */

/* Tablet / narrow desktop */
@media (max-width: 980px) {
    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)::before {
        width: 52% !important;
        opacity: .68 !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4) {
        padding-right: 285px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::before {
        width: 285px !important;
        height: 108px !important;
        top: -12px !important;
        opacity: .84 !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::after {
        left: 210px !important;
        width: 125px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(5)::after {
        width: 115px !important;
        height: 190px !important;
        opacity: .58 !important;
    }
}

/* Phones */
@media (max-width: 500px) {
    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) {
        min-height: 330px !important;
        padding: 16px 14px 15px !important;
        background-size:
            48px 48px,
            48px 48px,
            48px 48px,
            48px 48px,
            cover,
            300px 300px !important;
    }

    /* On mobile the image becomes an upper-right illustration, still with
       a diagonal fade, leaving the lower action area clean. */
    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)::before {
        width: 62% !important;
        height: 155px !important;
        opacity: .58 !important;
        background-size: cover !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)::after {
        background:
            linear-gradient(180deg,
                rgba(251,247,235,.02) 0%,
                rgba(251,247,235,.16) 34%,
                rgba(247,239,217,.82) 58%,
                rgba(247,239,217,.97) 100%),
            linear-gradient(90deg,
                rgba(251,247,235,.90) 0%,
                rgba(251,247,235,.48) 42%,
                rgba(251,247,235,.02) 80%,
                rgba(251,247,235,.00) 100%) !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
        > div[style*="text-transform:uppercase"] {
        margin-left: 14px !important;
        font-size: .72rem !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
        div[style*="font-size:1.15rem"] {
        font-size: 1.03rem !important;
    }

    /* Cat is still clearly visible but no longer steals a whole row. */
    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4) {
        min-height: 64px !important;
        padding: 11px 138px 9px 28px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::before {
        width: 145px !important;
        height: 66px !important;
        top: -4px !important;
        right: 0 !important;
        opacity: .76 !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::after {
        display: none !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(5)::after {
        width: 78px !important;
        height: 130px !important;
        opacity: .35 !important;
        right: -8px !important;
        bottom: -2px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(5) > div {
        min-height: 68px !important;
    }
}

/* Very narrow phones */
@media (max-width: 360px) {
    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)::before {
        width: 58% !important;
        height: 135px !important;
        opacity: .50 !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4) {
        padding-right: 105px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::before {
        width: 112px !important;
        height: 54px !important;
        opacity: .68 !important;
    }
}

/* =====================================================================
   PHASE 2.5.1 — MARKED BUGFIX
   ---------------------------------------------------------------------
   Fixes the specific visual bugs marked in the screenshots:

   1) active-manuscript floral corner ornaments were too intrusive;
   2) bottom-left corner ornament collided with the copy button;
   3) top-left ornament visually collided with the heading/icon;
   4) the gold vine after "Knižní kodexy k opisování" floated awkwardly;
   5) mobile scaling of manuscript ornaments/details was too aggressive.

   CSS override only. No HTML, JS, state, mechanics, handlers or saves.
   ===================================================================== */

/* ──────────────────────────────────────────────────────────────────
   ACTIVE MANUSCRIPT PANEL
   make floral corners smaller, more corner-bound, less intrusive
   ────────────────────────────────────────────────────────────────── */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) {
    padding: 26px 24px 23px 30px !important;
    background-position:
        left -10px top -10px,
        right -10px top -10px,
        left -10px bottom -10px,
        right -10px bottom -10px,
        center,
        center !important;
    background-size:
        56px 56px,
        56px 56px,
        56px 56px,
        56px 56px,
        cover,
        340px 340px !important;
}

/* move the right room vignette slightly further right,
   preserving the diagonal but freeing the text area */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)::before {
    right: -8px !important;
    width: 54% !important;
    opacity: .74 !important;
}

/* stronger parchment veil on the left side so the heading/text area
   feels intentionally clean instead of accidentally empty */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)::after {
    background:
        linear-gradient(180deg,
            rgba(251,247,235,.03) 0%,
            rgba(251,247,235,.05) 50%,
            rgba(247,239,217,.28) 76%,
            rgba(247,239,217,.70) 100%),
        linear-gradient(90deg,
            rgba(251,247,235,.96) 0%,
            rgba(251,247,235,.66) 28%,
            rgba(251,247,235,.22) 52%,
            rgba(251,247,235,.02) 72%,
            rgba(251,247,235,.00) 100%) !important;
}

/* heading block gets more internal breathing room from the ornament */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
    > div[style*="text-transform:uppercase"] {
    margin-left: 32px !important;
}

body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
    div[style*="font-size:1.15rem"] {
    padding-left: 10px !important;
}

/* keep the left-most action button away from the lower-left ornament */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
    div:has(> button[onclick="UI.copyFolium(1)"]) {
    padding-left: 12px !important;
}

/* ──────────────────────────────────────────────────────────────────
   CODEX HEADING
   make the gold vine sit naturally after the heading, not float
   ────────────────────────────────────────────────────────────────── */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(4) {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 74px !important;
    padding: 15px 420px 12px 38px !important;
}

/* keep cat behind everything but large/visible */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::before {
    right: 10px !important;
    top: -18px !important;
    width: 400px !important;
    height: 136px !important;
    opacity: .94 !important;
}

/* convert the vine to an inline decorative continuation */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::after {
    position: static !important;
    display: block !important;
    flex: 0 0 145px !important;
    width: 145px !important;
    height: 22px !important;
    margin-left: 8px !important;
    margin-top: 2px !important;
    background: url("/rooms/illum-gold-vine.webp") left center / contain no-repeat !important;
    left: auto !important;
    bottom: auto !important;
}

/* ──────────────────────────────────────────────────────────────────
   CODEX GRID / FLORAL SPRAY
   keep the spray visible but tucked into the margin
   ────────────────────────────────────────────────────────────────── */
body.design-iluminovana #lore-manuscripts-content > div:nth-child(5)::after {
    right: -10px !important;
    bottom: -8px !important;
    width: 138px !important;
    height: 208px !important;
    opacity: .74 !important;
}

/* ──────────────────────────────────────────────────────────────────
   MOBILE / NARROW TABLET
   scale ornaments way down and avoid collisions
   ────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) {
        padding: 18px 14px 16px 18px !important;
        background-position:
            left -8px top -8px,
            right -8px top -8px,
            left -8px bottom -8px,
            right -8px bottom -8px,
            center,
            center !important;
        background-size:
            36px 36px,
            36px 36px,
            36px 36px,
            36px 36px,
            cover,
            300px 300px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)::before {
        width: 56% !important;
        height: 150px !important;
        right: -10px !important;
        opacity: .54 !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)::after {
        background:
            linear-gradient(180deg,
                rgba(251,247,235,.04) 0%,
                rgba(251,247,235,.20) 38%,
                rgba(247,239,217,.82) 60%,
                rgba(247,239,217,.98) 100%),
            linear-gradient(90deg,
                rgba(251,247,235,.96) 0%,
                rgba(251,247,235,.72) 34%,
                rgba(251,247,235,.18) 62%,
                rgba(251,247,235,.00) 100%) !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
        > div[style*="text-transform:uppercase"] {
        margin-left: 18px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
        div[style*="font-size:1.15rem"] {
        padding-left: 0 !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)
        div:has(> button[onclick="UI.copyFolium(1)"]) {
        padding-left: 0 !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4) {
        min-height: 58px !important;
        padding: 10px 136px 9px 24px !important;
        gap: 6px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::before {
        width: 138px !important;
        height: 62px !important;
        right: 0 !important;
        top: -2px !important;
        opacity: .74 !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::after {
        display: none !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(5)::after {
        width: 72px !important;
        height: 118px !important;
        right: -8px !important;
        bottom: -2px !important;
        opacity: .32 !important;
    }
}

/* very narrow phones */
@media (max-width: 420px) {
    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3) {
        background-size:
            30px 30px,
            30px 30px,
            30px 30px,
            30px 30px,
            cover,
            280px 280px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(3)::before {
        width: 54% !important;
        height: 138px !important;
        opacity: .48 !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4) {
        padding-right: 120px !important;
    }

    body.design-iluminovana #lore-manuscripts-content > div:nth-child(4)::before {
        width: 120px !important;
        height: 56px !important;
        opacity: .68 !important;
    }
}