/* Sacralib V2.25 — owner-only V2 alignment on market, levels, patch notes, quests.
   Scenery follows the same inner-view model as V2.20; public UI is untouched. */
body.sv225-preview {
  --sv225-paper:#f6efe3; --sv225-line:#d6bea0;
}
body.sv225-preview #markettestView.active,
body.sv225-preview #patch-notesView.active {
  position:relative!important;
  isolation:isolate!important;
  overflow:visible!important;
  min-width:0!important;
}
@media(min-width:1551px) {
  /* Market scenery stays attached to its own view. */
  body.sv225-preview #markettestView.active::before,
  body.sv225-preview #markettestView.active::after {
    content:""!important; display:block!important;
    position:absolute!important; top:-42px!important;
    width:clamp(78px,5.8vw,116px)!important;
    aspect-ratio:160 / 2048!important; height:auto!important;
    background-repeat:no-repeat!important; background-size:100% 100%!important;
    pointer-events:none!important;z-index:-1!important;opacity:.87!important;
  }
  body.sv225-preview #markettestView.active::before {
    left:-102px!important; background-image:url('/assets/codex-v27-figma/side-left.webp')!important;
  }
  body.sv225-preview #markettestView.active::after {
    right:-102px!important; background-image:url('/assets/codex-v27-figma/side-right.webp')!important;
  }
  /* Patch scenery must follow its narrower content layout, not the edge
     of the wider view. Keep a 10px gap to the first/last column. */
  body.sv225-preview #patch-notesView.active::before,
  body.sv225-preview #patch-notesView.active::after {
    display:none!important;content:none!important;
  }
  body.sv225-preview #patch-notesView.active .sv223-patch-layout {
    position:relative!important;isolation:isolate!important;
  }
  body.sv225-preview #patch-notesView.active .sv223-patch-layout::before,
  body.sv225-preview #patch-notesView.active .sv223-patch-layout::after {
    content:""!important;display:block!important;
    position:absolute!important;top:-42px!important;
    width:clamp(76px,5.3vw,105px)!important;
    height:auto!important;aspect-ratio:160 / 2048!important;
    background-repeat:no-repeat!important;background-size:100% 100%!important;
    pointer-events:none!important;z-index:-1!important;opacity:.87!important;
  }
  body.sv225-preview #patch-notesView.active .sv223-patch-layout::before {
    left:calc(-1 * (clamp(76px,5.3vw,105px) + 10px))!important;
    background-image:url('/assets/codex-v27-figma/side-left.webp')!important;
  }
  body.sv225-preview #patch-notesView.active .sv223-patch-layout::after {
    right:calc(-1 * (clamp(76px,5.3vw,105px) + 10px))!important;
    background-image:url('/assets/codex-v27-figma/side-right.webp')!important;
  }
  /* Existing V2.20 figures were pushed to the outer viewport edge, leaving
     empty strips between illustration and the Experience content. */
  body.sv225-preview.sv218-page-theme.sv217-page-theme.sv216-page-theme.codex-site-v2-current
  #experienceView.active::before {left:-104px!important;top:-42px!important;}
  body.sv225-preview.sv218-page-theme.sv217-page-theme.sv216-page-theme.codex-site-v2-current
  #experienceView.active::after {right:-104px!important;top:-42px!important;}
}
@media(max-width:1550px) {
  /* The patch layout can sit over the existing body-edge artwork, so reserve
     actual side gutters rather than letting its third column overlap it. */
  body.sv225-preview #markettestView.active::before,
  body.sv225-preview #markettestView.active::after,
  body.sv225-preview #patch-notesView.active::before,
  body.sv225-preview #patch-notesView.active::after {display:none!important;content:none!important;}
}
@media(min-width:1200px) and (max-width:1550px) {
  /* Unlike article views, market was completely absent from V2.20 scenery
     selectors. At laptop widths its 2 decorative side rails fit in the
     unused space outside the market table, without covering any controls. */
  body.sv225-preview #markettestView.active::before,
  body.sv225-preview #markettestView.active::after {
    content:""!important; display:block!important;
    position:absolute!important; top:-42px!important;
    width:clamp(60px,5.2vw,82px)!important;
    aspect-ratio:160 / 2048!important; height:auto!important;
    background-repeat:no-repeat!important;background-size:100% 100%!important;
    pointer-events:none!important;z-index:-1!important;opacity:.86!important;
  }
  body.sv225-preview #markettestView.active::before {
    left:-92px!important; background-image:url('/assets/codex-v27-figma/side-left.webp')!important;
  }
  body.sv225-preview #markettestView.active::after {
    right:-92px!important; background-image:url('/assets/codex-v27-figma/side-right.webp')!important;
  }
}
/* Market: page is already a table — no card/grid conversions or new scroll traps. */
body.sv225-preview #markettestView.active .markettest-page {
  box-sizing:border-box!important;max-width:none!important;width:100%!important;
  margin-inline:auto!important;min-width:0!important;
}
@media(min-width:1551px) {
  /* The artwork extends 14px inside the view at its maximum 116px width:
     inset market content by 28px on each side for an unobstructed gap.
     Below 1551px the murals already end OUTSIDE the view. */
  body.sv225-preview #markettestView.active .markettest-page {
    width:calc(100% - 56px)!important;
    margin-inline:auto!important;
  }
}
body.sv225-preview #markettestView.active .markettest-heading {
  border-color:var(--sv225-line)!important;
  background:linear-gradient(165deg,#fffaf2,#f1e5cd)!important;
}
body.sv225-preview #markettestView.active .markettest-controls,
body.sv225-preview #markettestView.active .markettest-filters {min-width:0!important;max-width:100%!important;}
/* The footer is outside the market view, and used to reach the mural rails
   on both sides. Give it the same inner clearance as the market content. */
@media(min-width:1200px) {
  body.sv225-preview.markettest-mode #siteFooter {
    box-sizing:border-box!important;
    width:calc(100% - 2 * (var(--sv216-gutter) + 32px))!important;
    max-width:1840px!important;
    margin-inline:auto!important;
  }
}
/* Experience calculator: stretch into the full inner column while respecting
   its independent light/dark CSS variables and existing calculations. */
body.sv225-preview #experienceView.active,
body.sv225-preview #experienceView.active #experienceRoot {min-width:0!important;width:100%!important;max-width:none!important;}
body.sv225-preview #experienceView.active .exp-v33 {
  box-sizing:border-box!important;width:100%!important;max-width:none!important;
  padding:clamp(13px,1.45vw,23px)!important;
  margin:0!important;border-color:var(--ex-line)!important;
  background:var(--ex-paper)!important;border-radius:4px!important;
}
body.sv225-preview #experienceView.active :is(.exp-v33-planner,.exp-v33-levels) {
  border-color:var(--ex-line)!important;border-radius:4px!important;
  background:var(--ex-soft)!important;
}
body.sv225-preview #experienceView.active :is(.exp-v33-topfacts,.exp-v33-fields,.exp-v33-output,.exp-v33-cards) {min-width:0!important;}
body.sv225-preview #experienceView.active :is(.exp-v33-topfacts,.exp-v33-output,.exp-v33-fields)>* {min-width:0!important;}
/* Real menu on Patchnotes: identical dynamic category markup as article V2.
   Keep the three-column feed clear of the side murals on laptop AND desktop. */
body.sv225-preview #patch-notesView.active .sv223-patch-layout {width:100%!important;max-width:none!important;}
@media(min-width:1101px) and (max-width:1550px) {
  /* Below 1250px the existing V2.23 two-column layout remains in effect. */
  body.sv225-preview #patch-notesView.active .sv223-patch-layout {
    box-sizing:border-box!important;
    width:min(100%,calc(100vw - 280px))!important;
    max-width:calc(100vw - 280px)!important;
    margin-inline:auto!important;
  }
}
@media(min-width:1551px) {
  /* The old 100%-wide layout almost touched the 160/152px mural rails. */
  body.sv225-preview #patch-notesView.active .sv223-patch-layout {
    box-sizing:border-box!important;
    width:min(100%,calc(100vw - 320px))!important;
    max-width:1680px!important;
    margin-inline:auto!important;
  }
}
body.sv225-preview #patch-notesView.active .sv223-patch-left {
  padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important;
}
body.sv225-preview #patch-notesView.active .sv225-patch-nav {
  margin:0!important;width:100%!important;
  border:1px solid var(--sv225-line)!important;border-radius:4px!important;
  background:linear-gradient(145deg,#fffaf1,#f3e9d7)!important;
}
body.sv225-preview #patch-notesView.active .sv225-patch-nav .sv218-nav-heading {
  padding:13px 12px!important;margin:0!important;
}
body.sv225-preview #patch-notesView.active .sv225-patch-nav .sv218-nav-summary {cursor:pointer!important;}
body.sv225-preview #patch-notesView.active .sv225-patch-nav .sv218-nav-link {
  display:block!important;min-width:0!important;overflow-wrap:break-word!important;
}
body.sv225-preview #patch-notesView.active .sv223-patch-main,
body.sv225-preview #patch-notesView.active .patch-notes-page {min-width:0!important;max-width:100%!important;}
/* Counter must stay inside the quest search toolbar, not spill past its edge. */
body.sv225-preview .quest-block.quest-v2-block .quest-v5-toolbar {
  box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;
  grid-template-columns:minmax(180px,1.6fr) repeat(4,minmax(0,1fr))!important;
}
body.sv225-preview .quest-block.quest-v2-block .quest-v5-toolbar >* {min-width:0!important;max-width:100%!important;}
body.sv225-preview .quest-block.quest-v2-block .quest-v5-toolbar-actions {
  grid-column:1/-1!important;justify-self:stretch!important;justify-content:flex-end!important;
  min-width:0!important;max-width:100%!important;flex-wrap:wrap!important;
}
body.sv225-preview .quest-block.quest-v2-block .quest-v5-filter-status {
  white-space:normal!important;overflow-wrap:break-word!important;text-align:right!important;
}
@media(max-width:1100px) {
  body.sv225-preview .quest-block.quest-v2-block .quest-v5-toolbar {
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  body.sv225-preview .quest-block.quest-v2-block .quest-v5-search {grid-column:1/-1!important;}
}
@media(max-width:620px) {
  body.sv225-preview .quest-block.quest-v2-block .quest-v5-toolbar {grid-template-columns:minmax(0,1fr)!important;}
  body.sv225-preview .quest-block.quest-v2-block .quest-v5-toolbar-actions {grid-column:1!important;}
  body.sv225-preview #experienceView.active .exp-v33 {padding:10px!important;}
}

/* Visible, keyboard-operable manual refresh for freshly published Telegram posts. */
#patch-notesView .patch-notes-updates {
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;min-width:0;
}
#patch-notesView .patch-notes-updates .patch-notes-status {
  min-width:0;flex:1 1 260px;overflow-wrap:break-word;
}
#patch-notesView .patch-notes-refresh {
  flex:none;min-height:34px;padding:6px 11px;
  border:1px solid #c9ae8b;border-radius:4px;
  color:#743b2d;background:#f9f0de;
  font:600 13px/1.2 Georgia,serif;cursor:pointer;
}
#patch-notesView .patch-notes-refresh:hover {background:#efe0c7;}
#patch-notesView .patch-notes-refresh:disabled {opacity:.5;cursor:wait;}
#patch-notesView .patch-notes-refresh:focus-visible {outline:2px solid #845b31;outline-offset:2px;}

/* Patch notes + market side scenery uses the entire natural-height illustration.
   Its vertical fade is proportional to the image instead of a short fixed 455px
   segment; horizontal inner-edge feather is preserved.
   Fade exactly the four added figures; preserve positions, aspect ratios,
   legible content gutters and all other routes' established artwork. */
@media (min-width:1200px) {
  body.sv225-preview #markettestView.active::before,
  body.sv225-preview #markettestView.active::after,
  body.sv225-preview #patch-notesView.active .sv223-patch-layout::before,
  body.sv225-preview #patch-notesView.active .sv223-patch-layout::after {
    /* The 160×2048 artwork is >1,000px tall at desktop rail widths.
       Fixed 455px mask hid nearly all of it, as seen in owner screenshots.
       Follow the natural image height so the mural continues down the page
       and disappears gradually before its actual bottom edge. */
    --sv225-mural-fade:linear-gradient(to bottom,
      #000 0%,#000 42%,rgba(0,0,0,.94) 59%,
      rgba(0,0,0,.7) 73%,rgba(0,0,0,.28) 89%,
      transparent 100%);
    -webkit-mask-image:var(--sv225-mural-fade)!important;
    mask-image:var(--sv225-mural-fade)!important;
    -webkit-mask-repeat:no-repeat!important;
    mask-repeat:no-repeat!important;
  }
  /* Composed masks feather the inside edge towards the parchment as well as
     the bottom, with an explicit single-gradient fallback above. */
  @supports (mask-composite:intersect) {
    body.sv225-preview #markettestView.active::before,
    body.sv225-preview #patch-notesView.active .sv223-patch-layout::before {
      -webkit-mask-image:var(--sv225-mural-fade),
        linear-gradient(to right,#000 0%,#000 55%,rgba(0,0,0,.75) 73%,transparent 100%)!important;
      mask-image:var(--sv225-mural-fade),
        linear-gradient(to right,#000 0%,#000 55%,rgba(0,0,0,.75) 73%,transparent 100%)!important;
      -webkit-mask-composite:source-in;
      mask-composite:intersect;
    }
    body.sv225-preview #markettestView.active::after,
    body.sv225-preview #patch-notesView.active .sv223-patch-layout::after {
      -webkit-mask-image:var(--sv225-mural-fade),
        linear-gradient(to left,#000 0%,#000 55%,rgba(0,0,0,.75) 73%,transparent 100%)!important;
      mask-image:var(--sv225-mural-fade),
        linear-gradient(to left,#000 0%,#000 55%,rgba(0,0,0,.75) 73%,transparent 100%)!important;
      -webkit-mask-composite:source-in;
      mask-composite:intersect;
    }
  }
}