/* =========================================================
   SMOOTH JAZZ SOLITAIRE WEBSITE
   FLICKER / LAYOUT-STABILITY REPAIR
========================================================= */

/*
 * Prevent the Play screen from becoming visible before the
 * website-only header restructuring has completed.
 */
html.sjs-web-layout-booting body:not(.native-app)
#screen-play{
  visibility:hidden!important;
}

/*
 * One screen state only.
 * Remove duplicate fade/translate animations from style.css
 * and supreme-ui.css.
 */
body:not(.native-app) .app-screen{
  animation:none!important;
  transition:none!important;
  transform:none!important;
}

body:not(.native-app) .app-screen:not(.is-active){
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

body:not(.native-app) .app-screen.is-active{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  pointer-events:auto!important;
  animation:none!important;
  transform:none!important;
}

/*
 * Stop the moving pseudo-background compositor layer.
 * The visible artwork remains; only its continuous movement
 * is disabled.
 */
body:not(.native-app) .app-bg::after{
  animation:none!important;
  transform:none!important;
  will-change:auto!important;
  backface-visibility:visible!important;
}

/*
 * Board geometry must update immediately rather than tween
 * between measurements.
 */
body:not(.native-app)[data-screen="play"] .board-hud,
body:not(.native-app)[data-screen="play"] .play-actions,
body:not(.native-app)[data-screen="play"] .status-strip,
body:not(.native-app)[data-screen="play"] #gameBoard,
body:not(.native-app)[data-screen="play"] #tableau,
body:not(.native-app)[data-screen="play"] #tableau > .column{
  transition:none!important;
  animation:none!important;
  will-change:auto!important;
}

/*
 * Card placement must never animate width, height, top,
 * left, or transforms during a state render.
 */
body:not(.native-app)[data-screen="play"]
#tableau > .column > .sjs-card,
body:not(.native-app)[data-screen="play"]
#tableau > .column > .card,
body:not(.native-app)[data-screen="play"]
.foundation .sjs-card,
body:not(.native-app)[data-screen="play"]
.foundation .card,
body:not(.native-app)[data-screen="play"]
#stock .sjs-card,
body:not(.native-app)[data-screen="play"]
#waste .sjs-card{
  animation:none!important;

  transition:
    filter .10s ease,
    box-shadow .10s ease,
    opacity .10s ease!important;

  will-change:auto!important;
  backface-visibility:visible!important;
  -webkit-backface-visibility:visible!important;
}

/*
 * Keep drag operations immediate.
 */
body:not(.native-app).card-drag-pending
#tableau .sjs-card,
body:not(.native-app).card-drag-active
#tableau .sjs-card,
body:not(.native-app) .sjs-drag-layer,
body:not(.native-app) .dragging-source{
  transition:none!important;
  animation:none!important;
}

/*
 * Avoid image decode flashes when cards are rendered.
 */
body:not(.native-app) .sjs-card img,
body:not(.native-app) .card img{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  transition:none!important;
  animation:none!important;
}

/*
 * Reduce broad browser repainting while preserving all
 * page positioning and scrolling.
 */
body:not(.native-app)[data-screen="play"] #gameBoard{
  contain:layout style!important;
}