/* Final main-module artwork integration. Uploaded coded buttons are the entire control. */
#viewMain .hubModuleGrid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:8px!important;
  align-items:stretch!important;
}
#viewMain .hubModuleTile.moduleArtworkTile{
  display:block!important;
  position:relative!important;
  min-width:0!important;
  min-height:0!important;
  width:100%!important;
  aspect-ratio:313/340!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:17px!important;
  background:#050504!important;
  color:#f3cc55!important;
  overflow:hidden!important;
  box-shadow:0 10px 24px rgba(0,0,0,.34)!important;
  isolation:isolate!important;
  transition:transform .16s ease,filter .16s ease,box-shadow .16s ease!important;
}
#viewMain .hubModuleTile.moduleArtworkTile::before,
#viewMain .hubModuleTile.moduleArtworkTile::after{display:none!important}
#viewMain .hubModuleTile.moduleArtworkTile:hover,
#viewMain .hubModuleTile.moduleArtworkTile:focus-visible{
  transform:translateY(-2px)!important;
  filter:brightness(1.08)!important;
  box-shadow:0 15px 30px rgba(0,0,0,.43),0 0 0 2px rgba(244,202,75,.52)!important;
  outline:0!important;
}
#viewMain .hubModuleTile.moduleArtworkTile:active{transform:translateY(1px) scale(.975)!important}
#viewMain .hubModuleArtwork{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:fill!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  user-select:none!important;
}
.moduleTileA11y{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}
/* Matching Inventory card, placed after the twelve supplied coded buttons. */
#viewMain .inventoryArtworkTile{background:#070604!important}
#viewMain .inventoryModuleArtwork{
  position:absolute!important;inset:0!important;
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto auto!important;
  justify-items:center!important;align-items:center!important;
  gap:3px!important;
  padding:15% 9% 10%!important;
  border:2px solid #d7aa31!important;
  border-radius:17px!important;
  background:
    radial-gradient(circle at 50% 4%,rgba(255,215,91,.17),transparent 36%),
    linear-gradient(145deg,#15130e 0%,#050504 74%)!important;
  box-shadow:
    inset 0 0 0 4px #070604,
    inset 0 0 0 5px rgba(246,201,70,.65),
    inset 0 1px 0 rgba(255,235,159,.23)!important;
}
#viewMain .inventoryArtworkIcon{
  align-self:center!important;
  display:grid!important;place-items:center!important;
  width:55%!important;aspect-ratio:1!important;
  color:#f1c746!important;
  filter:drop-shadow(0 0 8px rgba(236,184,45,.28))!important;
}
#viewMain .inventoryArtworkIcon svg{display:block!important;width:100%!important;height:100%!important}
#viewMain .inventoryArtworkCode{
  color:#d6a52d!important;
  font-size:clamp(17px,5vw,28px)!important;
  line-height:1!important;font-weight:700!important;
  font-family:Arial,sans-serif!important;
}
#viewMain .inventoryArtworkName{
  color:#f7f2e8!important;
  font-size:clamp(10px,3.2vw,18px)!important;
  line-height:1.05!important;font-weight:800!important;
  font-family:Arial,sans-serif!important;
}
@media(max-width:360px){
  #viewMain .hubModuleGrid{gap:6px!important}
  #viewMain .hubModuleTile.moduleArtworkTile,#viewMain .inventoryModuleArtwork{border-radius:14px!important}
}
@media(min-width:700px){
  #viewMain .hubModuleGrid{grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important}
  #viewMain .hubModuleTile.moduleArtworkTile,#viewMain .inventoryModuleArtwork{border-radius:20px!important}
}
@media(min-width:1180px){
  #viewMain .hubModuleGrid{grid-template-columns:repeat(6,minmax(0,1fr))!important}
}
@media(prefers-reduced-motion:reduce){
  #viewMain .hubModuleTile.moduleArtworkTile{transition:none!important}
}