/* ==========================================================
   RONIN v3.1.7
   MOBILE MOTION / WEBKIT COMPOSITOR STABILIZATION
========================================================== */

@media(max-width:1199px){

  #gameScreen .board-shell{
    -webkit-backface-visibility:hidden!important;
    backface-visibility:hidden!important;

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

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

    isolation:isolate!important;

    -webkit-tap-highlight-color:
      transparent!important;
  }


  #gameScreen .board{
    -webkit-backface-visibility:hidden!important;
    backface-visibility:hidden!important;

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

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

    perspective:1000px!important;

    -webkit-perspective:1000px!important;
  }


  #gameScreen .tile{
    -webkit-backface-visibility:
      hidden!important;

    backface-visibility:
      hidden!important;

    transform:
      translate3d(0,0,0);

    -webkit-transform:
      translate3d(0,0,0);

    transform-origin:
      center center!important;

    -webkit-transform-origin:
      center center!important;

    -webkit-font-smoothing:
      antialiased!important;

    -webkit-tap-highlight-color:
      transparent!important;
  }


  /*
   * v315 positions tile art at 50/50.
   * Keep the same geometry while explicitly promoting
   * image rendering to a stable composited plane.
   */
  #gameScreen .tile img{

    -webkit-backface-visibility:
      hidden!important;

    backface-visibility:
      hidden!important;

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

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

    image-rendering:auto!important;

    -webkit-user-drag:none!important;

    user-select:none!important;

    -webkit-user-select:none!important;

    pointer-events:none!important;
  }


  /*
   * Do not allow generic CSS transitions from older styling
   * to compete with the movement engine.
   */
  #gameScreen .tile,
  #gameScreen .tile img{

    transition-property:
      transform,
      opacity!important;

    transition-timing-function:
      cubic-bezier(.2,.82,.2,1)!important;
  }


  /*
   * Prevent accidental native browser highlighting during
   * very fast swipes.
   */
  #gameScreen,
  #gameScreen .board-shell,
  #gameScreen .board,
  #gameScreen .tile{

    -webkit-touch-callout:none!important;

    user-select:none!important;

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

}


/* ==========================================================
   PHONE — prioritize frame rate above decorative effects
========================================================== */

@media(max-width:767px){

  /*
   * Expensive continuous filters can trigger WebKit texture
   * re-rasterization during tile movement.
   */

  #gameScreen .tile{
    filter:none!important;
  }


  /*
   * Keep glow on artwork itself instead of applying animated
   * filter chains to the moving parent.
   */
  #gameScreen .tile img{
    will-change:auto!important;
  }


  .drag-proxy{
    -webkit-backface-visibility:
      hidden!important;

    backface-visibility:
      hidden!important;

    will-change:transform!important;

    transform:
      translate3d(0,0,0);

    -webkit-transform:
      translate3d(0,0,0);
  }

}