/* Clean MAJLIS Game Live Swatch system. */
#majlisGameStage .majlis-live-swatch-toggle,
.preview-stage.in-game .majlis-live-swatch-toggle,
.game-full-stage.in-game .majlis-live-swatch-toggle {
  position: absolute !important;
  top: 64px !important;
  right: 14px !important;
  left: auto !important;
  z-index: 28 !important;
  min-width: 148px !important;
  min-height: 36px !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(240,232,213,.36) !important;
  background: var(--wine, #540D00) !important;
  color: var(--bone, #F0E8D5) !important;
  font-family: "Brandon Grotesque","Brandon Text","Avenir Next",Avenir,Inter,system-ui,sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  box-shadow: 0 10px 22px rgba(42,32,24,.20) !important;
}
#majlisGameStage .majlis-live-swatch-stack,
.preview-stage.in-game .majlis-live-swatch-stack,
.game-full-stage.in-game .majlis-live-swatch-stack {
  position: absolute !important;
  top: 108px !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 27 !important;
  width: 224px !important;
  display: grid !important;
  gap: 10px !important;
  pointer-events: auto !important;
}
body.majlis-live-swatch-off #majlisLiveSwatchStackClean,
body.majlis-v308-ls-off #majlisLiveSwatchStackClean {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
.majlis-live-swatch-card {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  border: 1px solid rgba(84,13,0,.16) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #fffaf1 !important;
  box-shadow: 0 18px 42px rgba(42,32,24,.16) !important;
  cursor: zoom-in !important;
  text-align: left !important;
  pointer-events: auto !important;
}
.majlis-live-swatch-card .mls-photo {
  display: block !important;
  width: 100% !important;
  height: 132px !important;
  background-size: cover !important;
  background-position: center !important;
  border-bottom: 1px solid rgba(42,32,24,.10) !important;
}
.majlis-live-swatch-card .mls-copy {
  display: grid !important;
  gap: 3px !important;
  padding: 11px 13px 13px !important;
}
.majlis-live-swatch-card .mls-role {
  font-family: "Brandon Grotesque","Brandon Text","Avenir Next",Avenir,Inter,system-ui,sans-serif !important;
  font-size: 8px !important;
  letter-spacing: .16em !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  color: rgba(42,32,24,.66) !important;
}
.majlis-live-swatch-card .mls-name {
  font-family: "Brandon Grotesque","Brandon Text","Avenir Next",Avenir,Inter,system-ui,sans-serif !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  color: var(--ink, #2A2018) !important;
}
.majlis-live-swatch-card .mls-meta {
  font-family: "Brandon Grotesque","Brandon Text","Avenir Next",Avenir,Inter,system-ui,sans-serif !important;
  font-size: 10.625px !important;
  font-weight: 800 !important;
  letter-spacing: .17em !important;
  text-transform: uppercase !important;
  color: rgba(42,32,24,.62) !important;
}
.majlis-live-swatch-card .mls-collection { color: var(--wine, #540D00) !important; }
#majlisCleanLiveSwatchLightbox {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: clamp(18px, 4vw, 54px) !important;
  background: rgba(36,26,20,.50) !important;
}
#majlisCleanLiveSwatchLightbox.is-open { display: flex !important; }
#majlisCleanLiveSwatchLightbox .mls-lightbox-panel {
  width: min(42vw, 720px) !important;
  min-width: min(92vw, 500px) !important;
  max-width: 92vw !important;
  height: min(68svh, 680px) !important;
  max-height: 82svh !important;
  display: grid !important;
  grid-template-rows: minmax(0, 1fr) auto !important;
  gap: 12px !important;
  padding: clamp(12px, 1.45vw, 20px) !important;
  background: #FFF8EA !important;
  color: var(--wine, #540D00) !important;
  border: 1px solid rgba(240,232,213,.42) !important;
  box-shadow: 0 28px 70px rgba(42,32,24,.34) !important;
  overflow: hidden !important;
}
#majlisCleanLiveSwatchLightbox .mls-lightbox-image-wrap {
  min-height: 0 !important;
  height: auto !important;
  display: grid !important;
  place-items: stretch !important;
  background: #F0E8D5 !important;
  border: 1px solid rgba(84,13,0,.14) !important;
  position: relative !important;
  overflow: hidden !important;
}
#majlisCleanLiveSwatchLightbox .mls-lightbox-image-wrap::after {
  content: "" !important;
  display: none !important;
  position: absolute !important;
  inset: auto 18px 18px 18px !important;
  padding-top: 12px !important;
  border-top: 1px solid rgba(84,13,0,.18) !important;
  color: rgba(84,13,0,.76) !important;
  font-family: "Brandon Grotesque","Brandon Text","Avenir Next",Avenir,Inter,system-ui,sans-serif !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  line-height: 1.45 !important;
  text-transform: uppercase !important;
}
#majlisCleanLiveSwatchLightbox .mls-lightbox-image-wrap.is-missing::after {
  content: "Texture image not found. Place high-res files in /majlis-assets/textures-high-res/, /assets/textures-high-res/, or /textures-high-res/." !important;
  display: block !important;
}
#majlisCleanLiveSwatchLightbox img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}
#majlisCleanLiveSwatchLightbox .mls-lightbox-image-wrap.is-missing img {
  opacity: 0 !important;
}
#majlisCleanLiveSwatchLightbox .mls-lightbox-caption {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) auto !important;
  gap: 16px !important;
  align-items: end !important;
  border-top: 1px solid rgba(84,13,0,.18) !important;
  padding-top: 12px !important;
}
#majlisCleanLiveSwatchLightbox .mls-lightbox-collection {
  font-family: "Brandon Grotesque","Brandon Text","Avenir Next",Avenir,Inter,system-ui,sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--wine, #540D00) !important;
}
#majlisCleanLiveSwatchLightbox .mls-lightbox-name {
  margin-top: 6px !important;
  font-family: "Brandon Grotesque","Brandon Text","Avenir Next",Avenir,Inter,system-ui,sans-serif !important;
  font-size: clamp(24px, 2.6vw, 38px) !important;
  font-weight: 700 !important;
  line-height: .98 !important;
  color: var(--ink, #2A2018) !important;
}
#majlisCleanLiveSwatchLightbox .mls-lightbox-code {
  margin-top: 8px !important;
  font-family: "Brandon Grotesque","Brandon Text","Avenir Next",Avenir,Inter,system-ui,sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(42,32,24,.72) !important;
}
#majlisCleanLiveSwatchLightbox .mls-lightbox-close {
  min-height: 42px !important;
  padding: 10px 18px !important;
  border: 1px solid var(--wine, #540D00) !important;
  background: var(--wine, #540D00) !important;
  color: #FFF8EA !important;
  font-family: "Brandon Grotesque","Brandon Text","Avenir Next",Avenir,Inter,system-ui,sans-serif !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
}
#majlisCleanLiveSwatchLightbox .mls-lightbox-outside {
  appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  cursor: zoom-out !important;
}
@media (max-width: 900px) {
  #majlisCleanLiveSwatchLightbox { padding: 16px !important; }
  #majlisCleanLiveSwatchLightbox .mls-lightbox-panel {
    width: min(92vw, 620px) !important;
    min-width: 0 !important;
    height: min(76svh, 620px) !important;
    max-height: 86svh !important;
  }
  #majlisCleanLiveSwatchLightbox .mls-lightbox-image-wrap { height: auto !important; }
  #majlisGameStage .majlis-live-swatch-stack { width: min(224px, calc(100% - 28px)) !important; }
}


/* v319: centered non-scrolling lightbox. The image fills the preview area while the collection, color name, and code remain visible without scrolling. */
#majlisCleanLiveSwatchLightbox.is-open {
  overflow: hidden !important;
}
#majlisCleanLiveSwatchLightbox .mls-lightbox-panel,
#majlisCleanLiveSwatchLightbox .mls-lightbox-panel * {
  box-sizing: border-box !important;
}


/* v323: color-name/code hierarchy aligned to MAJLIS Build catalog. */
.majlis-live-swatch-card .mls-name {
  font-size: 28px !important;
  color: var(--wine, #540D00) !important;
}
.majlis-live-swatch-card .mls-meta {
  font-size: 10.625px !important;
  font-weight: 900 !important;
}
.majlis-live-swatch-card .mls-collection {
  color: var(--wine, #540D00) !important;
}
.majlis-live-swatch-card .mls-code,
.majlis-live-swatch-card .mls-separator {
  color: rgba(42,32,24,.66) !important;
}
#majlisCleanLiveSwatchLightbox .mls-lightbox-code {
  font-size: 12.5px !important;
  font-weight: 900 !important;
}

/* Studio concept: compact portrait Live Swatch. */
body.majlis-game-standalone #majlisGameStage > .majlis-live-swatch-toggle,
body.majlis-game-standalone .game-full-stage.in-game .majlis-live-swatch-toggle,
body.majlis-game-standalone .preview-stage.in-game .majlis-live-swatch-toggle {
  width: 139px !important;
  max-width: calc(100% - 28px) !important;
}
body.majlis-game-standalone #majlisGameStage > .majlis-live-swatch-stack,
body.majlis-game-standalone .game-full-stage.in-game .majlis-live-swatch-stack,
body.majlis-game-standalone .preview-stage.in-game .majlis-live-swatch-stack {
  width: 139px !important;
  max-width: calc(100% - 28px) !important;
}
body.majlis-game-standalone #majlisGameStage .majlis-live-swatch-card,
body.majlis-game-standalone .game-full-stage.in-game .majlis-live-swatch-card,
body.majlis-game-standalone .preview-stage.in-game .majlis-live-swatch-card {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
  min-height: 0 !important;
  padding: 7px !important;
  border-radius: 14px !important;
}
body.majlis-game-standalone #majlisGameStage .majlis-live-swatch-card .mls-photo,
body.majlis-game-standalone .game-full-stage.in-game .majlis-live-swatch-card .mls-photo,
body.majlis-game-standalone .preview-stage.in-game .majlis-live-swatch-card .mls-photo {
  width: 100% !important;
  height: 154px !important;
  min-height: 154px !important;
  aspect-ratio: auto !important;
  border-radius: 9px !important;
}
body.majlis-game-standalone #majlisGameStage .majlis-live-swatch-card .mls-copy,
body.majlis-game-standalone .game-full-stage.in-game .majlis-live-swatch-card .mls-copy,
body.majlis-game-standalone .preview-stage.in-game .majlis-live-swatch-card .mls-copy {
  gap: 3px !important;
  padding: 9px 3px 4px !important;
}
body.majlis-game-standalone #majlisGameStage .majlis-live-swatch-card .mls-name,
body.majlis-game-standalone .game-full-stage.in-game .majlis-live-swatch-card .mls-name,
body.majlis-game-standalone .preview-stage.in-game .majlis-live-swatch-card .mls-name {
  font-size: 18px !important;
}
body.majlis-game-standalone #majlisGameStage .majlis-live-swatch-card .mls-meta,
body.majlis-game-standalone .game-full-stage.in-game .majlis-live-swatch-card .mls-meta,
body.majlis-game-standalone .preview-stage.in-game .majlis-live-swatch-card .mls-meta {
  font-size: 8px !important;
  letter-spacing: .11em !important;
}

/* Live Swatch clipping fix: keep portrait-card children inside the padded
   content box even when a color name or metadata has a wider min-content size. */
.majlis-live-swatch-card .mls-photo,
.majlis-live-swatch-card .mls-copy {
  min-width: 0 !important;
  max-width: 100% !important;
}
.majlis-live-swatch-card .mls-name,
.majlis-live-swatch-card .mls-meta {
  min-width: 0 !important;
  overflow-wrap: anywhere !important;
}
@media (min-width: 761px) {
  .majlis-live-swatch-card {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .majlis-live-swatch-card .mls-photo,
  .majlis-live-swatch-card .mls-copy {
    width: auto !important;
    justify-self: stretch !important;
  }
}