/* Sacralib V2.13: real art settings, only visible in owner V2 HOME.
   Defaults are exactly the existing V2.12 originals (no behavior change unless edited).
   Image properties are set on #codexSiteHome via sanitized CSS variables. */
body.codex-site-v2-home #codexSiteHome .sv2-online::before {
  background-image: var(--sv213-online-image, url('/assets/codex-v27-figma/category-world.webp')) !important;
}
body.codex-site-v2-home #codexSiteHome .sv2-find-player::before {
  background-image: var(--sv213-playerSearch-image, url('/assets/codex-v27-figma/category-equipment.webp')) !important;
}
body.codex-site-v2-home #codexSiteHome .sv2-chaos::before {
  background-image: var(--sv213-chaos-image, url('/assets/codex-v27-figma/category-creatures.webp')) !important;
}
body.codex-site-v2-home #codexSiteHome .sv2-patch-hero::before {
  background-image: var(--sv213-updates-image, url('/assets/codex-v27-figma/patch-landscape.webp')) !important;
}
body.codex-site-v2-home #codexSiteHome .sv2-explore::before {
  background-image: var(--sv213-explore-image, url('/assets/codex-v27-figma/explore.webp')) !important;
}
/* One mask shared by built-in ::before and uploaded IMG art only.
   Never filter or mask text, buttons, or the whole card. */
body.codex-site-v2-home #codexSiteHome .sv2-live-card::before,
body.codex-site-v2-home #codexSiteHome .sv2-live-card > .sv213-media-art {
  -webkit-mask-image: var(--sv213-media-mask, linear-gradient(90deg,#000 0%,#000 30%,transparent 80%)) !important;
  mask-image: var(--sv213-media-mask, linear-gradient(90deg,#000 0%,#000 30%,transparent 80%)) !important;
}
body.codex-site-v2-home #codexSiteHome .sv2-patch-hero::before,
body.codex-site-v2-home #codexSiteHome .sv2-patch-hero > .sv213-media-art {
  -webkit-mask-image: var(--sv213-media-mask, linear-gradient(90deg,transparent 0%,#000 80%)) !important;
  mask-image: var(--sv213-media-mask, linear-gradient(90deg,transparent 0%,#000 80%)) !important;
}
body.codex-site-v2-home #codexSiteHome .sv2-explore::before,
body.codex-site-v2-home #codexSiteHome .sv2-explore > .sv213-media-art {
  -webkit-mask-image: var(--sv213-media-mask, linear-gradient(90deg,transparent 0%,rgba(0,0,0,.04) 8%,rgba(0,0,0,.16) 20%,rgba(0,0,0,.43) 36%,rgba(0,0,0,.75) 52%,#000 65%)) !important;
  mask-image: var(--sv213-media-mask, linear-gradient(90deg,transparent 0%,rgba(0,0,0,.04) 8%,rgba(0,0,0,.16) 20%,rgba(0,0,0,.43) 36%,rgba(0,0,0,.75) 52%,#000 65%)) !important;
}
/* Custom home art uses a real image, above the paper background but
   below the text. Existing ::before images remain the fallback until load. */
body.codex-site-v2-home #codexSiteHome .sv213-media-art {
  position: absolute !important;
  display: block;
  z-index: 0 !important;
  pointer-events: none !important;
  object-fit: cover !important;
  opacity: 1 !important;
}
body.codex-site-v2-home #codexSiteHome .sv213-media-art[hidden] {
  display: none !important;
}
body.codex-site-v2-home #codexSiteHome .sv2-live-card > .sv213-media-art {
  top: 0 !important;
  left: 0 !important;
  width: 68% !important;
  height: 100% !important;
  object-position: left center !important;
}
body.codex-site-v2-home #codexSiteHome .sv2-patch-hero > .sv213-media-art,
body.codex-site-v2-home #codexSiteHome .sv2-explore > .sv213-media-art {
  top: 0 !important;
  right: 0 !important;
  width: min(76%, 560px) !important;
  height: 100% !important;
  object-position: center !important;
}
/* Extend the map leftward under the navy background. The longer feather
   transitions across actual art pixels, not a hard edge at the old 38% seam.
   The CSS fallback (::before) uses the same footprint as an uploaded image. */
body.codex-site-v2-home #codexSiteHome .sv2-explore::before,
body.codex-site-v2-home #codexSiteHome .sv2-explore > .sv213-media-art {
  width: min(82%, 800px) !important;
}
body.codex-site-v2-home #codexSiteHome .sv2-live-card.sv213-media-loaded::before,
body.codex-site-v2-home #codexSiteHome .sv2-patch-hero.sv213-media-loaded::before,
body.codex-site-v2-home #codexSiteHome .sv2-explore.sv213-media-loaded::before {
  opacity: 0 !important;
}
body.codex-site-v2-home #codexSiteHome .sv2-patch-hero > :not(.sv213-media-art),
body.codex-site-v2-home #codexSiteHome .sv2-explore > :not(.sv213-media-art) {
  position: relative;
  z-index: 2;
}

/* On a broken custom URL, restore the shipped art instead of keeping an
   invalid custom-property URL that would leave the card blank. */
body.codex-site-v2-home #codexSiteHome .sv2-online.sv213-media-error::before {
  background-image: url('/assets/codex-v27-figma/category-world.webp') !important;
}
body.codex-site-v2-home #codexSiteHome .sv2-find-player.sv213-media-error::before {
  background-image: url('/assets/codex-v27-figma/category-equipment.webp') !important;
}
body.codex-site-v2-home #codexSiteHome .sv2-chaos.sv213-media-error::before {
  background-image: url('/assets/codex-v27-figma/category-creatures.webp') !important;
}
body.codex-site-v2-home #codexSiteHome .sv2-patch-hero.sv213-media-error::before {
  background-image: url('/assets/codex-v27-figma/patch-landscape.webp') !important;
}
body.codex-site-v2-home #codexSiteHome .sv2-explore.sv213-media-error::before {
  background-image: url('/assets/codex-v27-figma/explore.webp') !important;
}
/* Requested small 70px original emblem, rendered at a natural title-icon size. */
body.codex-site-v2-home #codexSiteHome .sv2-chaos-copy small::before {
  content: '' !important;
  background: url('/assets/chaos-emblem.png') center / contain no-repeat !important;
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  flex: 0 0 26px !important;
}
/* Exactly the same transparent icon as the 'Бой и развитие' category (mechanics). */
body.codex-site-v2-home #codexSiteHome .sv2-patches .sv2-section-header h2::before {
  background-image: url('/assets/codex-v29-transparent-icons/tools.webp?v=213') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
}
/* Existing admin theme: five separate image controls + clear preview and reset. */
.sv213-media-editor { margin-top: 12px; }
.sv213-media-group { margin-block: 13px 18px; }
.sv213-media-group h4 { color: #5b3c22; font-size: 15px; margin: 0 0 9px; }
.sv213-media-row {
  display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr);
  gap: 14px; align-items: start; margin-block: 8px;
  padding: 12px; border: 1px solid #d8c3a5; border-radius: 6px;
  background: #fbf5ea; min-width: 0;
}
.sv213-media-fields { display: grid; gap: 8px; min-width: 0; }
.sv213-media-fields > label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; }
.sv213-media-fields input[type="text"] { width: 100%; min-width: 0; }
.sv213-media-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.sv213-upload-label { display: grid; gap: 5px; font-size: 12px; }
.sv213-upload-label input { max-width: 100%; font-size: 12px; }
.sv213-reset { background: #f3e7d6; color: #70462d; border: 1px solid #c5ab88; border-radius: 5px; padding: 7px 10px; cursor: pointer; }
.sv213-reset:hover { background: #ead7bc; }
.sv213-fade-control { display: grid; gap: 7px; margin: 2px 0; font-size: 12px; font-weight: 600; }
.sv213-fade-heading { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.sv213-fade-value { font-variant-numeric: tabular-nums; color: #70462d; min-width: 42px; text-align: right; font-weight: 700; }
.sv213-fade-control input[type="range"] { width: 100%; max-width: 410px; min-height: 25px; accent-color: #835237; cursor: pointer; }
.sv213-media-preview { margin: 0; display: grid; gap: 5px; }
.sv213-media-preview img { display: block; width: 100%; max-height: 100px; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 4px; border: 1px solid #c7b298; background: #ede4d7; }
.sv213-media-preview figcaption { font-size: 11px; color: #876a4d; }
.sv213-media-status { font-size: 12px; margin: 0; color: #76502d; }
@media (max-width: 680px) {
  .sv213-media-row { grid-template-columns: 1fr; }
  .sv213-media-preview img { max-width: 240px; }
  body.codex-site-v2-home #codexSiteHome .sv2-chaos-copy small::before { width: 23px !important; height: 23px !important; min-width: 23px !important; flex-basis: 23px !important; }
}

/* Individual page/article destinations for the Living World tiles. */
.sv213-live-target{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin:12px 0 2px;padding:10px;border:1px solid #d5c3a4;border-radius:5px;background:rgba(255,249,237,.65);}
.sv213-live-target label{display:grid;gap:4px;min-width:0;font:600 12px/1.4 Georgia,serif;}
.sv213-live-target select{width:100%;min-width:0;min-height:36px;padding:6px 8px;border:1px solid #baa182;border-radius:4px;background:#fff9ec;color:#402d20;font:13px Georgia,serif;}
.sv213-live-target .sv213-target-hint{grid-column:1/-1;color:#76563d;font:12px/1.45 Georgia,serif;}
.sv213-live-target [hidden]{display:none!important;}
body.codex-site-v2-home #codexSiteHome .sv213-player-target{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:4px;
  align-self:start;margin-top:1px;min-height:24px;
  color:#65412c;font:600 12px/1.3 Georgia,serif;text-decoration:underline;
  text-underline-offset:3px;position:relative;z-index:3;
}
body.codex-site-v2-home #codexSiteHome .sv213-player-target:hover{color:#8c4a27;}
body.codex-site-v2-home #codexSiteHome .sv213-player-target:focus-visible{outline:2px solid #82502b;outline-offset:3px;}
@media(max-width:560px){.sv213-live-target{grid-template-columns:minmax(0,1fr);}}

/* Artwork around player lookup opens the selected page; actual form fields remain interactive. */
body.codex-site-v2-home #codexSiteHome .sv2-find-player {cursor:pointer;}
body.codex-site-v2-home #codexSiteHome .sv2-player-controls input {cursor:text;}
body.codex-site-v2-home #codexSiteHome .sv2-player-controls button {cursor:pointer;}