/* 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; }
}