/* ==========================================================
   RONIN v3.1.9
   CLEAN MOBILE DRAG PROXY
========================================================== */

.ronin-clean-drag-proxy{

  position:fixed!important;


  margin:0!important;
  padding:0!important;

  border:0!important;
  outline:0!important;

  border-radius:16%!important;

  background:
    rgba(7,18,29,.94)!important;

  box-shadow:
    0 0 0 1px rgba(0,230,255,.40),
    0 0 18px rgba(0,220,255,.24),
    0 8px 25px rgba(0,0,0,.55)!important;

  overflow:hidden!important;

  pointer-events:none!important;

  touch-action:none!important;

  user-select:none!important;
  -webkit-user-select:none!important;

  -webkit-touch-callout:none!important;

  z-index:99999!important;

  opacity:.98!important;

  transform-origin:center center!important;

  -webkit-backface-visibility:hidden!important;
  backface-visibility:hidden!important;

  contain:strict!important;

  will-change:transform!important;
}


.ronin-clean-drag-proxy img{

  position:absolute!important;

  left:50%!important;
  top:50%!important;

  width:86%!important;
  height:86%!important;

  max-width:none!important;
  max-height:none!important;

  object-fit:contain!important;

  transform:
    translate3d(-50%,-50%,0)!important;

  -webkit-transform:
    translate3d(-50%,-50%,0)!important;

  filter:none!important;
  -webkit-filter:none!important;

  opacity:1!important;

  pointer-events:none!important;

  user-select:none!important;
  -webkit-user-select:none!important;

  -webkit-backface-visibility:hidden!important;
  backface-visibility:hidden!important;
}


/*
 * Absolutely prohibit status overlays from appearing inside
 * any drag proxy, even if older cached markup somehow exists.
 */

.drag-proxy .tile-status-seal,
.drag-proxy .chain-status-seal,
.drag-proxy .curse-status-seal,
.drag-proxy .chain-link,
.drag-proxy small,
.ronin-clean-drag-proxy .tile-status-seal{

  display:none!important;
}


/*
 * Source tile remains visible but subdued while its artwork
 * is being carried by the floating proxy.
 */

#gameScreen .tile.drag-source{

  opacity:.38!important;

  transform:
    translate3d(0,0,0)!important;

  filter:none!important;
  -webkit-filter:none!important;
}


/*
 * Target cell should indicate destination without enlarging
 * or re-rasterizing the whole tile.
 */

#gameScreen .tile.swap-target{

  transform:
    translate3d(0,0,0)!important;

  box-shadow:
    inset 0 0 0 2px rgba(0,235,255,.72),
    0 0 12px rgba(0,220,255,.28)!important;

  filter:none!important;
  -webkit-filter:none!important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media(max-width:1199px){

  .ronin-clean-drag-proxy{

    /*
     * No backdrop filters or blur on a moving compositor
     * layer. Safari can distort these during touch movement.
     */

    backdrop-filter:none!important;
    -webkit-backdrop-filter:none!important;

    transition:none!important;

    animation:none!important;
  }


  .ronin-clean-drag-proxy img{

    animation:none!important;

    transition:none!important;

    will-change:auto!important;
  }


  #gameScreen .tile.drag-source img{

    opacity:.72!important;
  }

}


/* Slightly tighter on phones */

@media(max-width:767px){

  .ronin-clean-drag-proxy{

    border-radius:14%!important;

    box-shadow:
      0 0 0 1px rgba(0,230,255,.34),
      0 0 12px rgba(0,220,255,.20),
      0 7px 18px rgba(0,0,0,.52)!important;
  }


  .ronin-clean-drag-proxy img{

    width:84%!important;
    height:84%!important;
  }

}