/*
REVISION HISTORY
 (much missing here)
 20140424 Finish extensive reordering of the @media sections, so that
each @media override block is alongside the selector it overrides. Add
a medium view for widths from 400px to 588px inclusive, with
completely customized values to get a much better appearance on big
phones and most any smartphone in landscape mode.
 20140803 Remove ".tile-inner" attribute for all the "div.heretical
.tile.tile-N" selectors which define the colours of the tiles in
flutterbee mode, because I'm switching to CSS sprites and a
background-color: attribute is ignored when the background: attribute
is present.
 20140812 Using #convert-css.hid#, add image pathnames to all the
lines with a background: specifier, so I can automate the process of
rearranging the stamps in each CSS sprite image.
  Add highlight styles for achieve messages and primed boost icons.
 */

html, body {
  margin: 0;
  padding: 0;
  background: #eee;
  color: #777;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 18px;
 }

/* Specific dimensions for many types of devices (phones, tablets, etc.)
   are at:
   css-tricks.com/snippets/css/media-queries-for-standard-devices/
*/
@media screen and (min-width: 400px) and (max-width: 588px) {
  html, body { font-size: 16px; }
}
@media screen and (max-width: 399px) {
  html, body { font-size: 14px; }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
  html, body { font-size: 14px; }
}


.heading {
  height: 54px;
}
@media screen and (min-width: 400px) and (max-width: 588px) {
 .heading { height: 39px; margin-bottom: 0; }
}
@media screen and (max-width: 399px) {
 .heading { height: 29px; margin-bottom: 0; }
}
@media screen and (max-height: 591px) and (min-width: 865px) {
  .heading {
    float: left;
    position: relative;
    right: 253px;
    top: 3px;
    height: 3px;
    width: 250px;
  }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
  .heading {
    float: left;
    position: relative;
    right: 303px;
    top: 0px;
    height: 0px;
    width: 250px;
  }
}


.heading:after {
  content: "";
  display: block;
  clear: both;
}

h1.title {
  font-family: "xkcd_beanish-Regular", "Helvetica Neue", Arial, sans-serif;
  font-size: 52px;
  line-height: 52px;
  font-weight: bold;
  margin: 0;
  display: block;
  float: left;
 }
@media screen and (min-width: 400px) and (max-width: 588px) {
  h1.title { font-size: 32px; line-height: 28px;  }
}
@media screen and (max-width: 399px) {
  h1.title { font-size: 20px; line-height: 18px; margin-top: 0; float: right; }
}
@media screen and (max-height: 591px) and (min-width: 865px) {
  h1.title {
    font-size: 44px;
    line-height: 44px;
    display: block;
    float: right;
    clear: both;
    text-align: right;
   }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
  h1.title {
    font-size: 28px;
    line-height: 28px;
    margin-top: 0; 
    display: block;
    float: right;
    clear: both;
    text-align: right;
  }
}

h1.title a {
 text-decoration: none !important;
 z-index: 100;
 position: relative;
}

h1.title .version {
  font-size: 13px; line-height: 13px;
  position: absolute; z-index: 90; color:#000;
  text-align: center;
}
@media screen and (min-width: 400px) and (max-width: 588px) {
 h1.title .version { font-size: 9px; line-height: 9px; }
}
@media screen and (max-width: 399px) {
 h1.title .version { font-size: 9px; line-height: 9px; }
}
@media screen and (max-height: 591px) and (min-width: 865px) {
 h1.title .version { font-size: 9px; line-height: 9px; }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
 h1.title .version { font-size: 9px; line-height: 9px; }
}

span.xkcdButton a {
  list-style-type:none;
  display: inline;

  background-color:#FFF;
  color: #000;

  font-size: 12px;
  font-weight: 600;
  font-family:xkcd-Regular, Optima, "Trebuchet MS", sans-serif;
  text-align:center;
  text-decoration: none;

  padding: 1.5px 12px;
  margin: 0 4px;
  border: 1.5px solid #333;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  box-shadow: 0 0 5px 0 gray;
  -moz-box-shadow: 0 0 5px 0 gray;
  -webkit-box-shadow: 0 0 5px 0 gray;  
}

span.xkcdButton a:hover {
  background-color: #999;
  color: #CCC;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

.scores-container { float: right; text-align: right; }

@media screen and (min-width: 400px) and (max-width: 588px) {
  .scores-container { float: none; text-align: center; }
}
@media screen and (max-width: 399px) {
  .scores-container { float: left; text-align: left; }
}
@media screen and (max-height: 591px) and (min-width: 865px) {
 .scores-container {
   text-align: right; clear: both; position: relative;
 }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
 .scores-container {
   text-align: right; clear: both; position: relative;
 }
}


.score-container,
 .best-container {
  position: relative;
  display: inline-block;
  padding: 0;
  font-size: 20px;
  line-height: 23px;
  height: 46px;
  font-weight: bold;
  border-radius: 3px;
  margin-top: 0;
  text-align: center;
  min-width: 80px;
  float: right;
  position: relative;
 }

.score-container {
  background: #eee;
  color: #555;
  left: -163px;
}
.best-container {
  background: #999;
  color: #fff;
  left: 80px;
 }

@media screen and (min-width: 400px) and (max-width: 588px) {
 .score-container,
 .best-container {
   font-size: 16px;
   line-height: 16px;
   height: 32px;
   min-width: 60px;
   left: 0px;
 }
 .score-container { float: left; }
 h1.title {
   position: relative; left: 90px;
 }
}
@media screen and (max-width: 399px) {
 .score-container, .best-container {
   font-size: 14px;
   line-height: 14px;
   height: 28px;
   min-width: 40px;
   float: left;
   left: 0px;
 }
.best-container { left: 30px; }
}
@media screen and (max-height: 591px) and (min-width: 865px) {
   .score-container,
   .best-container {
     left: -10px;
    clear: both;
   }
   .score-container { margin-top: 62px; float: none; }
   .best-container { top: -30px; }
   h1.title { position: relative; top: -112px; }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
   .score-container,
   .best-container {
     left: 10px;
    clear: both;
   }
   .score-container { margin-top: 14px; float: none; left: 40px; }
   .best-container { top: 20px; left: 40px; }
   h1.title { position: relative; top: 4px; left: 50px; }
}



/* I thought you weren't supposed to put content in CSS  O_o

.score-container:after, .best-container:after {
    position: absolute;
    width: 100%;
    top: 10px;
    left: 0;
    text-transform: uppercase;
    font-size: 13px;
    line-height: 13px;
    text-align: center;
    color: #eee;
}

.score-container:after { content: "Score"; }
.best-container:after { content: "Best"; }  */

/* See http://www.css3files.com/animation/ */

@-webkit-keyframes move-up
 { 0%   { top: 25px; opacity: 1; } 100% { top: -50px; opacity: 0; } }
@-moz-keyframes move-up
 { 0%   { top: 25px; opacity: 1; } 100% { top: -50px; opacity: 0; } }
@keyframes move-up
 { 0%   { top: 25px; opacity: 1; } 100% { top: -50px; opacity: 0; } }

.score-container .score-addition,
 .best-container .score-addition {
    position: absolute;
    right: -27px;
    font-size: 25px;
    line-height: 25px;
    font-weight: bold;
    color: rgba(110, 110, 110, 0.9);
    z-index: 90;
    -webkit-animation: move-up 1200ms ease-in;
    -moz-animation: move-up 1200ms ease-in;
    animation: move-up 1200ms ease-in;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
}
@media screen and (min-width: 400px) and (max-width: 588px) {
 .score-container .score-addition,
 .best-container .score-addition {
  font-size: 20px; line-height: 17px;
 }
}
@media screen and (max-width: 399px) {
 .score-container .score-addition,
 .best-container .score-addition {
  font-size: 16px; line-height: 12px;
 }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
 .score-container .score-addition,
 .best-container .score-addition {
  font-size: 16px; line-height: 12px;
 }
}

@-webkit-keyframes ach-up
 { 0%   { top: 20px; opacity: 1; } 100% { top: -20px; opacity: 0; } }
@-moz-keyframes ach-up
 { 0%   { top: 20px; opacity: 1; } 100% { top: -20px; opacity: 0; } }
@keyframes ach-up
 { 0%   { top: 20px; opacity: 1; } 100% { top: -20px; opacity: 0; } }

/* Notification, notify, achievement message */
.achieve-container .achieve,
.achieve-container .achieve-heretical,
.achieve-container .achieve-high1,
.achieve-container .achieve-high2 {
    font-family:xkcd-Regular, Optima, "Trebuchet MS", sans-serif;
    position: absolute;
    left: 0px;
    width: 553px;
    top: 180px;
    padding-top: 0px;
    text-align: center;
    font-size: 37px;
    line-height: 37px;
    /* font-weight: bold; */
    text-shadow: 0 0 20px #FFF;
    z-index: 91;
    -webkit-animation: ach-up 12s ease-in;
    -moz-animation: ach-up 12s ease-in;
    animation: ach-up 12s ease-in;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
}

.achieve-container .achieve,
  .achieve-container .achieve-heretical { color: #055; }
.achieve-container .achieve-high1 { color: #07D; }
.achieve-container .achieve-high2 { color: #BA0; }

/* Colours are different depending on flutterbee */
.achieve-container .achieve {
  text-shadow: 0 0 5px #FFF;
}
.achieve-container .achieve-heretical {
  text-shadow: 0 0 5px #FF4;
}

/* Override the sizing and positioning for mobile views */
@media screen and (min-width: 400px) and (max-width: 588px) {
 .achieve-container .achieve,
 .achieve-container .achieve-heretical,
 .achieve-container .achieve-high1,
 .achieve-container .achieve-high2 {
   font-size: 26px; line-height: 26px;
   width: 400px;
 }
}
@media screen and (max-width: 399px) {
 .achieve-container .achieve,
 .achieve-container .achieve-heretical,
 .achieve-container .achieve-high1,
 .achieve-container .achieve-high2 {
   font-size: 18px; line-height: 18px;
   width: 280px;
 }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
 .achieve-container .achieve,
 .achieve-container .achieve-heretical,
 .achieve-container .achieve-high1,
 .achieve-container .achieve-high2 {
   font-size: 18px; line-height: 18px;
   width: 280px;
 }
}



/* An entirely separate layer for another channel of messages, e.g.
lyrics for Lucky */
.lyric-container .lyric,
.lyric-container .lyric-heretical {
  font-family: Courier, "Courier New", monospace;
  font-style: oblique;
  font-weight: bold;
  position: absolute;
  left: 0px;
  width: 553px;
  top: 355px; /* 79*4.5 */
  padding-top: 0;
  text-align: center;
  font-size: 37px;
  line-height: 37px;
  /* font-weight: bold; */
  text-shadow: 0 0 20px #FFF;
  color: #000;
  z-index: 90;
}

/* Colours are different depending on flutterbee */
.lyric-container .lyric {
  text-shadow: 0 0 2px #FFF;
  color: #000;
}
.lyric-container .lyric-heretical {
  text-shadow: 0 0 2px #FF4;
  color: #44F;
}

/* Override the sizing and positioning for mobile views */
@media screen and (min-width: 400px) and (max-width: 588px) {
 .lyric-container .lyric,
 .lyric-container .lyric-heretical {
   font-size: 26px; line-height: 26px;
   width: 400px; top: 256px;
 }
}
@media screen and (max-width: 399px) {
 .lyric-container .lyric,
 .lyric-container .lyric-heretical {
   font-size: 18px; line-height: 18px;
   width: 280px; top: 180px;
 }
}
@media screen and (max-height: 591px) and (min-width: 865px) {
 .lyric-container .lyric,
 .lyric-container .lyric-heretical {
   top: 386px; width: 800px; left: -166px;
 }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
 .lyric-container .lyric,
 .lyric-container .lyric-heretical {
   font-size: 18px; line-height: 18px;
   top: 200px; width: 480px; left: -100px;
 }
}




a {
  color: #707070;
  font-weight: bold;
  text-decoration: underline;
  cursor: pointer;
}

strong.important {
  text-transform: uppercase; }

hr {
  border: none;
  border-bottom: 1px solid #ddd;
 }


.container { width: 579px;  margin: 0 auto; }

@media screen and (min-width: 400px) and (max-width: 588px) {
  .container { width: 400px; }
}
@media screen and (max-width: 399px) {
  .container { width: 280px; }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
  .container { width: 280px; }
}


@-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@-moz-keyframes    fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes         fade-in { 0% { opacity: 0; } 100% { opacity: 1; } }

.game-margin {
  background: #EEE;
}

.game-container {
  position: relative;
  border-style: solid;
  border-width: 15px;
  border-radius: 12px;
  border-color: #BBB;
  cursor: default;
  -webkit-touch-callout: none;
  -ms-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -ms-touch-action: none;
  touch-action: none;
  background: #FFF;
  width: 583px;
  height: 425px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }

@media screen and (min-width: 400px) and (max-width: 588px) {
  .game-container {
    margin-top: 0;
    border-width: 0px;
    border-radius: 0px;
    position: relative;
    width: 400px;
    height: 285px;
   }
}

@media screen and (max-width: 399px) {
  .game-container {
    margin-top: 0;
    border-width: 0px;
    border-radius: 0px;
    position: relative;
    width: 280px;
    height: 200px;
   }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
  .game-container {
    margin-top: 0;
    border-width: 0px;
    border-radius: 0px;
    position: relative;
    width: 280px;
    height: 200px;
   }
}

.startup-message {
  position: absolute;
  z-index: 200;
}


.game-container .game-message {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(240, 240, 240, 0.5); color: black;
    z-index: 90;
    text-align: center;
    -webkit-animation: fade-in 800ms ease 1200ms;
    -moz-animation: fade-in 800ms ease 1200ms;
    animation: fade-in 800ms ease 1200ms;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    animation-fill-mode: both;
 }


.game-message p {
  font-weight: bold;
  font-size: 60px; height: 60px; line-height: 60px;
  margin-top: 190px;
}

@media screen and (min-width: 400px) and (max-width: 588px) {
 .game-message p { font-size: 42px; height: 42px; line-height: 42px; margin-top: 130px; }
}
@media screen and (max-width: 399px) {
 .game-message p { font-size: 30px; height: 30px; line-height: 30px; margin-top: 90px; }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
 .game-message p { font-size: 30px; height: 30px; line-height: 30px; margin-top: 90px; }
}



.game-message .lower {
  display: block;
  margin-top: 59px;
 }
@media screen and (min-width: 400px) and (max-width: 588px) {
  .game-message .lower {  margin-top: 42px }
}
@media screen and (max-width: 399px) {
  .game-message .lower {  margin-top: 30px }
 }
@media screen and (max-height: 431px) and (min-width: 480px) {
  .game-message .lower {  margin-top: 30px }
}

.game-container .game-message a {
      display: inline-block;
      background: #777;
      border-radius: 3px;
      padding: 0 20px;
      text-decoration: none;
      color: #eee;
      height: 40px;
      font-size: 24px;
      line-height: 40px;
      margin-left: 9px; }
@media screen and (min-width: 400px) and (max-width: 588px) {
 .game-container .game-message a { height: 33px; font-size: 20px; line-height: 33px; }
}
@media screen and (max-width: 399px) {
 .game-container .game-message a { height: 27px; font-size: 16px; line-height: 27px; }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
 .game-container .game-message a { height: 27px; font-size: 16px; line-height: 27px; }
}

.game-container .game-message a.keep-playing-button {
      display: none; }

.game-container .game-message.game-won {
      background: rgba(100, 100, 100, 0.5);  color: #FFF; }

.game-container .game-message.game-won a.keep-playing-button {
      display: inline-block; }

.game-container .game-message.game-won,
 .game-container .game-message.game-over {
      display: block; }




.grid-container {
  position: absolute;
  z-index: 1;
}

.grid-row {
  margin-bottom: 0px;
 }

.grid-row:last-child {
    margin-bottom: 0;
 }

.grid-row:after {
    content: "";
    display: block;
    clear: both;
 }


.grid-cell {
  width: 77px; /* 79 - 2 because of all-around margins */
  height: 77px;
  margin: 1px; /* all around */
  float: left;
  border-radius: 0px;
  background: rgba(228, 228, 228, 0.35);
  cursor: pointer;
 }

@media screen and (min-width: 400px) and (max-width: 588px) {
  .grid-cell { width: 55px; height: 55px; } /* 57 - 2 */
}
@media screen and (max-width: 399px) {
  .grid-cell { width: 38px; height: 38px; } /* 40 - 2 */
}
@media screen and (max-height: 431px) and (min-width: 480px) {
  .grid-cell { width: 38px; height: 38px; } /* 40 - 2 */
}

.grid-cell:last-child {
    margin-right: 0; }



.tile-container {
  position: absolute;
  z-index: 2; }

.tile, .tile .tile-inner {
  width: 78px;
  height: 78px;
  margin-right: 1px;
  margin-bottom: 1px;
  line-height: 79px; }

@media screen and (min-width: 400px) and (max-width: 588px) {
  .tile, .tile .tile-inner {  width: 56px; height: 56px; line-height: 57px; }
}
@media screen and (max-width: 399px) {
  .tile, .tile .tile-inner {  width: 39px; height: 39px; line-height: 40px; }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
  .tile, .tile .tile-inner {  width: 39px; height: 39px; line-height: 40px; }
}


.tile.tile-position-1-1 { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); transform: translate(0px, 0px); }
.tile.tile-position-1-2 { -webkit-transform: translate(0px, 79px); -moz-transform: translate(0px, 79px); transform: translate(0px, 79px); }
.tile.tile-position-1-3 { -webkit-transform: translate(0px, 158px); -moz-transform: translate(0px, 158px); transform: translate(0px, 158px); }
.tile.tile-position-1-4 { -webkit-transform: translate(0px, 237px); -moz-transform: translate(0px, 237px); transform: translate(0px, 237px); }
.tile.tile-position-1-5 { -webkit-transform: translate(0px, 316px); -moz-transform: translate(0px, 316px); transform: translate(0px, 316px); }
.tile.tile-position-1-6 { -webkit-transform: translate(0px, 395px); -moz-transform: translate(0px, 395px); transform: translate(0px, 395px); }

.tile.tile-position-2-1 { -webkit-transform: translate(79px, 0px); -moz-transform: translate(79px, 0px); transform: translate(79px, 0px); }
.tile.tile-position-2-2 { -webkit-transform: translate(79px, 79px); -moz-transform: translate(79px, 79px); transform: translate(79px, 79px); }
.tile.tile-position-2-3 { -webkit-transform: translate(79px, 158px); -moz-transform: translate(79px, 158px); transform: translate(79px, 158px); }
.tile.tile-position-2-4 { -webkit-transform: translate(79px, 237px); -moz-transform: translate(79px, 237px); transform: translate(79px, 237px); }
.tile.tile-position-2-5 { -webkit-transform: translate(79px, 316px); -moz-transform: translate(79px, 316px); transform: translate(79px, 316px); }
.tile.tile-position-2-6 { -webkit-transform: translate(79px, 395px); -moz-transform: translate(79px, 395px); transform: translate(79px, 395px); }

.tile.tile-position-3-1 { -webkit-transform: translate(158px, 0px); -moz-transform: translate(158px, 0px); transform: translate(158px, 0px); }
.tile.tile-position-3-2 { -webkit-transform: translate(158px, 79px); -moz-transform: translate(158px, 79px); transform: translate(158px, 79px); }
.tile.tile-position-3-3 { -webkit-transform: translate(158px, 158px); -moz-transform: translate(158px, 158px); transform: translate(158px, 158px); }
.tile.tile-position-3-4 { -webkit-transform: translate(158px, 237px); -moz-transform: translate(158px, 237px); transform: translate(158px, 237px); }
.tile.tile-position-3-5 { -webkit-transform: translate(158px, 316px); -moz-transform: translate(158px, 316px); transform: translate(158px, 316px); }
.tile.tile-position-3-6 { -webkit-transform: translate(158px, 395px); -moz-transform: translate(158px, 395px); transform: translate(158px, 395px); }

.tile.tile-position-4-1 { -webkit-transform: translate(237px, 0px); -moz-transform: translate(237px, 0px); transform: translate(237px, 0px); }
.tile.tile-position-4-2 { -webkit-transform: translate(237px, 79px); -moz-transform: translate(237px, 79px); transform: translate(237px, 79px); }
.tile.tile-position-4-3 { -webkit-transform: translate(237px, 158px); -moz-transform: translate(237px, 158px); transform: translate(237px, 158px); }
.tile.tile-position-4-4 { -webkit-transform: translate(237px, 237px); -moz-transform: translate(237px, 237px); transform: translate(237px, 237px); }
.tile.tile-position-4-5 { -webkit-transform: translate(237px, 316px); -moz-transform: translate(237px, 316px); transform: translate(237px, 316px); }
.tile.tile-position-4-6 { -webkit-transform: translate(237px, 395px); -moz-transform: translate(237px, 395px); transform: translate(237px, 395px); }

.tile.tile-position-5-1 { -webkit-transform: translate(316px, 0px); -moz-transform: translate(316px, 0px); transform: translate(316px, 0px); }
.tile.tile-position-5-2 { -webkit-transform: translate(316px, 79px); -moz-transform: translate(316px, 79px); transform: translate(316px, 79px); }
.tile.tile-position-5-3 { -webkit-transform: translate(316px, 158px); -moz-transform: translate(316px, 158px); transform: translate(316px, 158px); }
.tile.tile-position-5-4 { -webkit-transform: translate(316px, 237px); -moz-transform: translate(316px, 237px); transform: translate(316px, 237px); }
.tile.tile-position-5-5 { -webkit-transform: translate(316px, 316px); -moz-transform: translate(316px, 316px); transform: translate(316px, 316px); }
.tile.tile-position-5-6 { -webkit-transform: translate(316px, 395px); -moz-transform: translate(316px, 395px); transform: translate(316px, 395px); }

.tile.tile-position-6-1 { -webkit-transform: translate(395px, 0px); -moz-transform: translate(395px, 0px); transform: translate(395px, 0px); }
.tile.tile-position-6-2 { -webkit-transform: translate(395px, 79px); -moz-transform: translate(395px, 79px); transform: translate(395px, 79px); }
.tile.tile-position-6-3 { -webkit-transform: translate(395px, 158px); -moz-transform: translate(395px, 158px); transform: translate(395px, 158px); }
.tile.tile-position-6-4 { -webkit-transform: translate(395px, 237px); -moz-transform: translate(395px, 237px); transform: translate(395px, 237px); }
.tile.tile-position-6-5 { -webkit-transform: translate(395px, 316px); -moz-transform: translate(395px, 316px); transform: translate(395px, 316px); }
.tile.tile-position-6-6 { -webkit-transform: translate(395px, 395px); -moz-transform: translate(395px, 395px); transform: translate(395px, 395px); }

.tile.tile-position-7-1 { -webkit-transform: translate(474px, 0px); -moz-transform: translate(474px, 0px); transform: translate(474px, 0px); }
.tile.tile-position-7-2 { -webkit-transform: translate(474px, 79px); -moz-transform: translate(474px, 79px); transform: translate(474px, 79px); }
.tile.tile-position-7-3 { -webkit-transform: translate(474px, 158px); -moz-transform: translate(474px, 158px); transform: translate(474px, 158px); }
.tile.tile-position-7-4 { -webkit-transform: translate(474px, 237px); -moz-transform: translate(474px, 237px); transform: translate(474px, 237px); }
.tile.tile-position-7-5 { -webkit-transform: translate(474px, 316px); -moz-transform: translate(474px, 316px); transform: translate(474px, 316px); }
.tile.tile-position-7-6 { -webkit-transform: translate(474px, 395px); -moz-transform: translate(474px, 395px); transform: translate(474px, 395px); }

@media screen and (min-width: 400px) and (max-width: 588px) {
  .tile.tile-position-1-1 { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  .tile.tile-position-1-2 { -webkit-transform: translate(0px, 57px); -moz-transform: translate(0px, 57px); transform: translate(0px, 57px); }
  .tile.tile-position-1-3 { -webkit-transform: translate(0px, 114px); -moz-transform: translate(0px, 114px); transform: translate(0px, 114px); }
  .tile.tile-position-1-4 { -webkit-transform: translate(0px, 171px); -moz-transform: translate(0px, 171px); transform: translate(0px, 171px); }
  .tile.tile-position-1-5 { -webkit-transform: translate(0px, 228px); -moz-transform: translate(0px, 228px); transform: translate(0px, 228px); }
  .tile.tile-position-1-6 { -webkit-transform: translate(0px, 285px); -moz-transform: translate(0px, 285px); transform: translate(0px, 285px); }

  .tile.tile-position-2-1 { -webkit-transform: translate(57px, 0px); -moz-transform: translate(57px, 0px); transform: translate(57px, 0px); }
  .tile.tile-position-2-2 { -webkit-transform: translate(57px, 57px); -moz-transform: translate(57px, 57px); transform: translate(57px, 57px); }
  .tile.tile-position-2-3 { -webkit-transform: translate(57px, 114px); -moz-transform: translate(57px, 114px); transform: translate(57px, 114px); }
  .tile.tile-position-2-4 { -webkit-transform: translate(57px, 171px); -moz-transform: translate(57px, 171px); transform: translate(57px, 171px); }
  .tile.tile-position-2-5 { -webkit-transform: translate(57px, 228px); -moz-transform: translate(57px, 228px); transform: translate(57px, 228px); }
  .tile.tile-position-2-6 { -webkit-transform: translate(57px, 285px); -moz-transform: translate(57px, 285px); transform: translate(57px, 285px); }

  .tile.tile-position-3-1 { -webkit-transform: translate(114px, 0px); -moz-transform: translate(114px, 0px); transform: translate(114px, 0px); }
  .tile.tile-position-3-2 { -webkit-transform: translate(114px, 57px); -moz-transform: translate(114px, 57px); transform: translate(114px, 57px); }
  .tile.tile-position-3-3 { -webkit-transform: translate(114px, 114px); -moz-transform: translate(114px, 114px); transform: translate(114px, 114px); }
  .tile.tile-position-3-4 { -webkit-transform: translate(114px, 171px); -moz-transform: translate(114px, 171px); transform: translate(114px, 171px); }
  .tile.tile-position-3-5 { -webkit-transform: translate(114px, 228px); -moz-transform: translate(114px, 228px); transform: translate(114px, 228px); }
  .tile.tile-position-3-6 { -webkit-transform: translate(114px, 285px); -moz-transform: translate(114px, 285px); transform: translate(114px, 285px); }

  .tile.tile-position-4-1 { -webkit-transform: translate(171px, 0px); -moz-transform: translate(171px, 0px); transform: translate(171px, 0px); }
  .tile.tile-position-4-2 { -webkit-transform: translate(171px, 57px); -moz-transform: translate(171px, 57px); transform: translate(171px, 57px); }
  .tile.tile-position-4-3 { -webkit-transform: translate(171px, 114px); -moz-transform: translate(171px, 114px); transform: translate(171px, 114px); }
  .tile.tile-position-4-4 { -webkit-transform: translate(171px, 171px); -moz-transform: translate(171px, 171px); transform: translate(171px, 171px); }
  .tile.tile-position-4-5 { -webkit-transform: translate(171px, 228px); -moz-transform: translate(171px, 228px); transform: translate(171px, 228px); }
  .tile.tile-position-4-6 { -webkit-transform: translate(171px, 285px); -moz-transform: translate(171px, 285px); transform: translate(171px, 285px); }

  .tile.tile-position-5-1 { -webkit-transform: translate(228px, 0px); -moz-transform: translate(228px, 0px); transform: translate(228px, 0px); }
  .tile.tile-position-5-2 { -webkit-transform: translate(228px, 57px); -moz-transform: translate(228px, 57px); transform: translate(228px, 57px); }
  .tile.tile-position-5-3 { -webkit-transform: translate(228px, 114px); -moz-transform: translate(228px, 114px); transform: translate(228px, 114px); }
  .tile.tile-position-5-4 { -webkit-transform: translate(228px, 171px); -moz-transform: translate(228px, 171px); transform: translate(228px, 171px); }
  .tile.tile-position-5-5 { -webkit-transform: translate(228px, 228px); -moz-transform: translate(228px, 228px); transform: translate(228px, 228px); }
  .tile.tile-position-5-6 { -webkit-transform: translate(228px, 285px); -moz-transform: translate(228px, 285px); transform: translate(228px, 285px); }

  .tile.tile-position-6-1 { -webkit-transform: translate(285px, 0px); -moz-transform: translate(285px, 0px); transform: translate(285px, 0px); }
  .tile.tile-position-6-2 { -webkit-transform: translate(285px, 57px); -moz-transform: translate(285px, 57px); transform: translate(285px, 57px); }
  .tile.tile-position-6-3 { -webkit-transform: translate(285px, 114px); -moz-transform: translate(285px, 114px); transform: translate(285px, 114px); }
  .tile.tile-position-6-4 { -webkit-transform: translate(285px, 171px); -moz-transform: translate(285px, 171px); transform: translate(285px, 171px); }
  .tile.tile-position-6-5 { -webkit-transform: translate(285px, 228px); -moz-transform: translate(285px, 228px); transform: translate(285px, 228px); }
  .tile.tile-position-6-6 { -webkit-transform: translate(285px, 285px); -moz-transform: translate(285px, 285px); transform: translate(285px, 285px); }

  .tile.tile-position-7-1 { -webkit-transform: translate(342px, 0px); -moz-transform: translate(342px, 0px); transform: translate(342px, 0px); }
  .tile.tile-position-7-2 { -webkit-transform: translate(342px, 57px); -moz-transform: translate(342px, 57px); transform: translate(342px, 57px); }
  .tile.tile-position-7-3 { -webkit-transform: translate(342px, 114px); -moz-transform: translate(342px, 114px); transform: translate(342px, 114px); }
  .tile.tile-position-7-4 { -webkit-transform: translate(342px, 171px); -moz-transform: translate(342px, 171px); transform: translate(342px, 171px); }
  .tile.tile-position-7-5 { -webkit-transform: translate(342px, 228px); -moz-transform: translate(342px, 228px); transform: translate(342px, 228px); }
  .tile.tile-position-7-6 { -webkit-transform: translate(342px, 285px); -moz-transform: translate(342px, 285px); transform: translate(342px, 285px); }
}

@media screen and (max-width: 399px) {
  .tile.tile-position-1-1 { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  .tile.tile-position-1-2 { -webkit-transform: translate(0px, 40px); -moz-transform: translate(0px, 40px); transform: translate(0px, 40px); }
  .tile.tile-position-1-3 { -webkit-transform: translate(0px, 80px); -moz-transform: translate(0px, 80px); transform: translate(0px, 80px); }
  .tile.tile-position-1-4 { -webkit-transform: translate(0px, 120px); -moz-transform: translate(0px, 120px); transform: translate(0px, 120px); }
  .tile.tile-position-1-5 { -webkit-transform: translate(0px, 160px); -moz-transform: translate(0px, 160px); transform: translate(0px, 160px); }
  .tile.tile-position-1-6 { -webkit-transform: translate(0px, 200px); -moz-transform: translate(0px, 200px); transform: translate(0px, 200px); }

  .tile.tile-position-2-1 { -webkit-transform: translate(40px, 0px); -moz-transform: translate(40px, 0px); transform: translate(40px, 0px); }
  .tile.tile-position-2-2 { -webkit-transform: translate(40px, 40px); -moz-transform: translate(40px, 40px); transform: translate(40px, 40px); }
  .tile.tile-position-2-3 { -webkit-transform: translate(40px, 80px); -moz-transform: translate(40px, 80px); transform: translate(40px, 80px); }
  .tile.tile-position-2-4 { -webkit-transform: translate(40px, 120px); -moz-transform: translate(40px, 120px); transform: translate(40px, 120px); }
  .tile.tile-position-2-5 { -webkit-transform: translate(40px, 160px); -moz-transform: translate(40px, 160px); transform: translate(40px, 160px); }
  .tile.tile-position-2-6 { -webkit-transform: translate(40px, 200px); -moz-transform: translate(40px, 200px); transform: translate(40px, 200px); }

  .tile.tile-position-3-1 { -webkit-transform: translate(80px, 0px); -moz-transform: translate(80px, 0px); transform: translate(80px, 0px); }
  .tile.tile-position-3-2 { -webkit-transform: translate(80px, 40px); -moz-transform: translate(80px, 40px); transform: translate(80px, 40px); }
  .tile.tile-position-3-3 { -webkit-transform: translate(80px, 80px); -moz-transform: translate(80px, 80px); transform: translate(80px, 80px); }
  .tile.tile-position-3-4 { -webkit-transform: translate(80px, 120px); -moz-transform: translate(80px, 120px); transform: translate(80px, 120px); }
  .tile.tile-position-3-5 { -webkit-transform: translate(80px, 160px); -moz-transform: translate(80px, 160px); transform: translate(80px, 160px); }
  .tile.tile-position-3-6 { -webkit-transform: translate(80px, 200px); -moz-transform: translate(80px, 200px); transform: translate(80px, 200px); }

  .tile.tile-position-4-1 { -webkit-transform: translate(120px, 0px); -moz-transform: translate(120px, 0px); transform: translate(120px, 0px); }
  .tile.tile-position-4-2 { -webkit-transform: translate(120px, 40px); -moz-transform: translate(120px, 40px); transform: translate(120px, 40px); }
  .tile.tile-position-4-3 { -webkit-transform: translate(120px, 80px); -moz-transform: translate(120px, 80px); transform: translate(120px, 80px); }
  .tile.tile-position-4-4 { -webkit-transform: translate(120px, 120px); -moz-transform: translate(120px, 120px); transform: translate(120px, 120px); }
  .tile.tile-position-4-5 { -webkit-transform: translate(120px, 160px); -moz-transform: translate(120px, 160px); transform: translate(120px, 160px); }
  .tile.tile-position-4-6 { -webkit-transform: translate(120px, 200px); -moz-transform: translate(120px, 200px); transform: translate(120px, 200px); }

  .tile.tile-position-5-1 { -webkit-transform: translate(160px, 0px); -moz-transform: translate(160px, 0px); transform: translate(160px, 0px); }
  .tile.tile-position-5-2 { -webkit-transform: translate(160px, 40px); -moz-transform: translate(160px, 40px); transform: translate(160px, 40px); }
  .tile.tile-position-5-3 { -webkit-transform: translate(160px, 80px); -moz-transform: translate(160px, 80px); transform: translate(160px, 80px); }
  .tile.tile-position-5-4 { -webkit-transform: translate(160px, 120px); -moz-transform: translate(160px, 120px); transform: translate(160px, 120px); }
  .tile.tile-position-5-5 { -webkit-transform: translate(160px, 160px); -moz-transform: translate(160px, 160px); transform: translate(160px, 160px); }
  .tile.tile-position-5-6 { -webkit-transform: translate(160px, 200px); -moz-transform: translate(160px, 200px); transform: translate(160px, 200px); }

  .tile.tile-position-6-1 { -webkit-transform: translate(200px, 0px); -moz-transform: translate(200px, 0px); transform: translate(200px, 0px); }
  .tile.tile-position-6-2 { -webkit-transform: translate(200px, 40px); -moz-transform: translate(200px, 40px); transform: translate(200px, 40px); }
  .tile.tile-position-6-3 { -webkit-transform: translate(200px, 80px); -moz-transform: translate(200px, 80px); transform: translate(200px, 80px); }
  .tile.tile-position-6-4 { -webkit-transform: translate(200px, 120px); -moz-transform: translate(200px, 120px); transform: translate(200px, 120px); }
  .tile.tile-position-6-5 { -webkit-transform: translate(200px, 160px); -moz-transform: translate(200px, 160px); transform: translate(200px, 160px); }
  .tile.tile-position-6-6 { -webkit-transform: translate(200px, 200px); -moz-transform: translate(200px, 200px); transform: translate(200px, 200px); }

  .tile.tile-position-7-1 { -webkit-transform: translate(240px, 0px); -moz-transform: translate(240px, 0px); transform: translate(240px, 0px); }
  .tile.tile-position-7-2 { -webkit-transform: translate(240px, 40px); -moz-transform: translate(240px, 40px); transform: translate(240px, 40px); }
  .tile.tile-position-7-3 { -webkit-transform: translate(240px, 80px); -moz-transform: translate(240px, 80px); transform: translate(240px, 80px); }
  .tile.tile-position-7-4 { -webkit-transform: translate(240px, 120px); -moz-transform: translate(240px, 120px); transform: translate(240px, 120px); }
  .tile.tile-position-7-5 { -webkit-transform: translate(240px, 160px); -moz-transform: translate(240px, 160px); transform: translate(240px, 160px); }
  .tile.tile-position-7-6 { -webkit-transform: translate(240px, 200px); -moz-transform: translate(240px, 200px); transform: translate(240px, 200px); }
}

@media screen and (max-height: 431px) and (min-width: 480px) {
  .tile.tile-position-1-1 { -webkit-transform: translate(0px, 0px); -moz-transform: translate(0px, 0px); transform: translate(0px, 0px); }
  .tile.tile-position-1-2 { -webkit-transform: translate(0px, 40px); -moz-transform: translate(0px, 40px); transform: translate(0px, 40px); }
  .tile.tile-position-1-3 { -webkit-transform: translate(0px, 80px); -moz-transform: translate(0px, 80px); transform: translate(0px, 80px); }
  .tile.tile-position-1-4 { -webkit-transform: translate(0px, 120px); -moz-transform: translate(0px, 120px); transform: translate(0px, 120px); }
  .tile.tile-position-1-5 { -webkit-transform: translate(0px, 160px); -moz-transform: translate(0px, 160px); transform: translate(0px, 160px); }
  .tile.tile-position-1-6 { -webkit-transform: translate(0px, 200px); -moz-transform: translate(0px, 200px); transform: translate(0px, 200px); }

  .tile.tile-position-2-1 { -webkit-transform: translate(40px, 0px); -moz-transform: translate(40px, 0px); transform: translate(40px, 0px); }
  .tile.tile-position-2-2 { -webkit-transform: translate(40px, 40px); -moz-transform: translate(40px, 40px); transform: translate(40px, 40px); }
  .tile.tile-position-2-3 { -webkit-transform: translate(40px, 80px); -moz-transform: translate(40px, 80px); transform: translate(40px, 80px); }
  .tile.tile-position-2-4 { -webkit-transform: translate(40px, 120px); -moz-transform: translate(40px, 120px); transform: translate(40px, 120px); }
  .tile.tile-position-2-5 { -webkit-transform: translate(40px, 160px); -moz-transform: translate(40px, 160px); transform: translate(40px, 160px); }
  .tile.tile-position-2-6 { -webkit-transform: translate(40px, 200px); -moz-transform: translate(40px, 200px); transform: translate(40px, 200px); }

  .tile.tile-position-3-1 { -webkit-transform: translate(80px, 0px); -moz-transform: translate(80px, 0px); transform: translate(80px, 0px); }
  .tile.tile-position-3-2 { -webkit-transform: translate(80px, 40px); -moz-transform: translate(80px, 40px); transform: translate(80px, 40px); }
  .tile.tile-position-3-3 { -webkit-transform: translate(80px, 80px); -moz-transform: translate(80px, 80px); transform: translate(80px, 80px); }
  .tile.tile-position-3-4 { -webkit-transform: translate(80px, 120px); -moz-transform: translate(80px, 120px); transform: translate(80px, 120px); }
  .tile.tile-position-3-5 { -webkit-transform: translate(80px, 160px); -moz-transform: translate(80px, 160px); transform: translate(80px, 160px); }
  .tile.tile-position-3-6 { -webkit-transform: translate(80px, 200px); -moz-transform: translate(80px, 200px); transform: translate(80px, 200px); }

  .tile.tile-position-4-1 { -webkit-transform: translate(120px, 0px); -moz-transform: translate(120px, 0px); transform: translate(120px, 0px); }
  .tile.tile-position-4-2 { -webkit-transform: translate(120px, 40px); -moz-transform: translate(120px, 40px); transform: translate(120px, 40px); }
  .tile.tile-position-4-3 { -webkit-transform: translate(120px, 80px); -moz-transform: translate(120px, 80px); transform: translate(120px, 80px); }
  .tile.tile-position-4-4 { -webkit-transform: translate(120px, 120px); -moz-transform: translate(120px, 120px); transform: translate(120px, 120px); }
  .tile.tile-position-4-5 { -webkit-transform: translate(120px, 160px); -moz-transform: translate(120px, 160px); transform: translate(120px, 160px); }
  .tile.tile-position-4-6 { -webkit-transform: translate(120px, 200px); -moz-transform: translate(120px, 200px); transform: translate(120px, 200px); }

  .tile.tile-position-5-1 { -webkit-transform: translate(160px, 0px); -moz-transform: translate(160px, 0px); transform: translate(160px, 0px); }
  .tile.tile-position-5-2 { -webkit-transform: translate(160px, 40px); -moz-transform: translate(160px, 40px); transform: translate(160px, 40px); }
  .tile.tile-position-5-3 { -webkit-transform: translate(160px, 80px); -moz-transform: translate(160px, 80px); transform: translate(160px, 80px); }
  .tile.tile-position-5-4 { -webkit-transform: translate(160px, 120px); -moz-transform: translate(160px, 120px); transform: translate(160px, 120px); }
  .tile.tile-position-5-5 { -webkit-transform: translate(160px, 160px); -moz-transform: translate(160px, 160px); transform: translate(160px, 160px); }
  .tile.tile-position-5-6 { -webkit-transform: translate(160px, 200px); -moz-transform: translate(160px, 200px); transform: translate(160px, 200px); }

  .tile.tile-position-6-1 { -webkit-transform: translate(200px, 0px); -moz-transform: translate(200px, 0px); transform: translate(200px, 0px); }
  .tile.tile-position-6-2 { -webkit-transform: translate(200px, 40px); -moz-transform: translate(200px, 40px); transform: translate(200px, 40px); }
  .tile.tile-position-6-3 { -webkit-transform: translate(200px, 80px); -moz-transform: translate(200px, 80px); transform: translate(200px, 80px); }
  .tile.tile-position-6-4 { -webkit-transform: translate(200px, 120px); -moz-transform: translate(200px, 120px); transform: translate(200px, 120px); }
  .tile.tile-position-6-5 { -webkit-transform: translate(200px, 160px); -moz-transform: translate(200px, 160px); transform: translate(200px, 160px); }
  .tile.tile-position-6-6 { -webkit-transform: translate(200px, 200px); -moz-transform: translate(200px, 200px); transform: translate(200px, 200px); }

  .tile.tile-position-7-1 { -webkit-transform: translate(240px, 0px); -moz-transform: translate(240px, 0px); transform: translate(240px, 0px); }
  .tile.tile-position-7-2 { -webkit-transform: translate(240px, 40px); -moz-transform: translate(240px, 40px); transform: translate(240px, 40px); }
  .tile.tile-position-7-3 { -webkit-transform: translate(240px, 80px); -moz-transform: translate(240px, 80px); transform: translate(240px, 80px); }
  .tile.tile-position-7-4 { -webkit-transform: translate(240px, 120px); -moz-transform: translate(240px, 120px); transform: translate(240px, 120px); }
  .tile.tile-position-7-5 { -webkit-transform: translate(240px, 160px); -moz-transform: translate(240px, 160px); transform: translate(240px, 160px); }
  .tile.tile-position-7-6 { -webkit-transform: translate(240px, 200px); -moz-transform: translate(240px, 200px); transform: translate(240px, 200px); }
}


.tile {
  position: absolute;
  /* This governs the normal animation for moving a tile */
  -webkit-transition: 143ms ease-in-out;
  -moz-transition: 143ms ease-in-out;
  transition: 143ms ease-in-out;
  -webkit-transition-property: -webkit-transform;
  -moz-transition-property: -moz-transform;
  transition-property: transform; 
}

.tile .tile-inner {
    border-radius: 3px;
    /* background: #eee; */
    text-align: center;
    font-weight: bold;
    z-index: 10;
    font-size: 55px;
 }
@media screen and (min-width: 400px) and (max-width: 588px) {
  .tile .tile-inner { font-size: 41px; }
}
@media screen and (max-width: 399px) {
  .tile .tile-inner { font-size: 30px; }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
  .tile .tile-inner { font-size: 30px; }
}

  /* Original colours for the powers of 2 tiles:
     I used www.w3schools.com/tags/ref_colorpicker.asp
     In the "hexagon", select from the ring that has 24 swatches (it is
        the 4th ring out from the white center)
     Then select a shade from the "Darker/lighter shades" on the right.
     I started with the all-magenta swatch, and proceeded counterclockwise.

           1  FFF
           2  FFF0FF  hue.00 magenta  very light
           4  F0B6FF     .00 again    notso light
           8  E085FF  hue.01
          16  AD85FF  hue.02
          32  8585FF  hue.03
          64  4A68DF  hue.04 blue
         128  0066FF  hue.05
         256  0099FF  hue.06
         512  00CCFF  hue.07
        1024  33CCCC  hue.08 cyan
        2048  00FFCC  hue.09
        4096  00FF99  hue.10
        8192  00FF00  hue.11
       16384  33CC33  hue.12
       32768  669900
       65536  99CC00
      131072  CCCC00
      262144  CC9900

     Later some colours were changed and a few more added at the end;
     the present colours are seen in the style elements starting with
     "div.heretical".

  */

.tile-inner {
  background-repeat: no-repeat;
}

/* .tile { background-color: rgba(255,255,255,0.5); } */

.tile.tile-1 .tile-inner { background: url(../i/stamps-79.png) -0px -0px; } /* PN 1.png */
.tile.tile-2 .tile-inner { background: url(../i/stamps-79.png) -79px -0px; } /* PN 2.png */
.tile.tile-4 .tile-inner { background: url(../i/stamps-79.png) -158px -0px; } /* PN 4.png */
.tile.tile-8 .tile-inner { background: url(../i/stamps-79.png) -237px -0px; } /* PN 8.png */
.tile.tile-16 .tile-inner { background: url(../i/stamps-79.png) -316px -0px; } /* PN 16.png */
.tile.tile-32 .tile-inner { background: url(../i/stamps-79.png) -395px -0px; } /* PN 32.png */
.tile.tile-64 .tile-inner { background: url(../i/stamps-79.png) -474px -0px; } /* PN 64.png */
.tile.tile-128 .tile-inner { background: url(../i/stamps-79.png) -553px -0px; } /* PN 128.png */
.tile.tile-256 .tile-inner { background: url(../i/stamps-79.png) -632px -0px; } /* PN 256.png */
.tile.tile-512 .tile-inner { background: url(../i/stamps-79.png) -711px -0px; } /* PN 512.png */
.tile.tile-1024 .tile-inner { background: url(../i/stamps-79.png) -790px -0px; } /* PN 1024.png */
.tile.tile-2048 .tile-inner { background: url(../i/stamps-79.png) -869px -0px; } /* PN 2048.png */
.tile.tile-4096 .tile-inner { background: url(../i/stamps-79.png) -948px -0px; } /* PN 4096.png */
.tile.tile-8192 .tile-inner { background: url(../i/stamps-79.png) -1027px -0px; } /* PN 8192.png */
.tile.tile-16384 .tile-inner { background: url(../i/stamps-79.png) -1106px -0px; } /* PN 16384.png */
.tile.tile-32768 .tile-inner { background: url(../i/stamps-79.png) -1185px -0px; } /* PN 32768.png */
.tile.tile-65536 .tile-inner { background: url(../i/stamps-79.png) -1264px -0px; } /* PN 65536.png */
.tile.tile-131072 .tile-inner { background: url(../i/stamps-79.png) -1343px -0px; } /* PN 131072.png */
.tile.tile-262144 .tile-inner { background: url(../i/stamps-79.png) -1422px -0px; } /* PN 262144.png */
.tile.tile-524288 .tile-inner { background: url(../i/stamps-79.png) -1501px -0px; } /* PN 524288.png */
.tile.tile-1048576 .tile-inner { background: url(../i/stamps-79.png) -1580px -0px; } /* PN 1048576.png */
.tile.tile-2097152 .tile-inner { background: url(../i/stamps-79.png) -1659px -0px; } /* PN 2097152.png */
.tile.tile-4194304 .tile-inner { background: url(../i/stamps-79.png) -1738px -0px; } /* PN 4194304.png */
.tile.tile-8388608 .tile-inner { background: url(../i/stamps-79.png) -1817px -0px; } /* PN 8388608.png */
.tile.tile-16777216 .tile-inner { background: url(../i/stamps-79.png) -1896px -0px; } /* PN 16777216.png */

.tile.tile-super .tile-inner {
    color: #fff;
    background: #333;
    font-size: 15px;
}
@media screen and (min-width: 400px) and (max-width: 588px) {
  .tile.tile-super .tile-inner { font-size: 11px; }
}
@media screen and (max-width: 399px) {
  .tile.tile-super .tile-inner { font-size: 8px; }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
  .tile.tile-super .tile-inner { font-size: 8px; }
}

/* Override image URLs for small screens */
@media screen and (min-width: 400px) and (max-width: 588px) {
 .tile.tile-1   .tile-inner { background: url(../i/stamps-57.png) -0px -0px; } /* PN med/1.png */
 .tile.tile-2   .tile-inner { background: url(../i/stamps-57.png) -57px -0px; } /* PN med/2.png */
 .tile.tile-4   .tile-inner { background: url(../i/stamps-57.png) -114px -0px; } /* PN med/4.png */
 .tile.tile-8   .tile-inner { background: url(../i/stamps-57.png) -171px -0px; } /* PN med/8.png */
 .tile.tile-16  .tile-inner { background: url(../i/stamps-57.png) -228px -0px; } /* PN med/16.png */
 .tile.tile-32  .tile-inner { background: url(../i/stamps-57.png) -285px -0px; } /* PN med/32.png */
 .tile.tile-64  .tile-inner { background: url(../i/stamps-57.png) -342px -0px; } /* PN med/64.png */
 .tile.tile-128 .tile-inner { background: url(../i/stamps-57.png) -399px -0px; } /* PN med/128.png */
 .tile.tile-256 .tile-inner { background: url(../i/stamps-57.png) -456px -0px; } /* PN med/256.png */
 .tile.tile-512 .tile-inner { background: url(../i/stamps-57.png) -513px -0px; } /* PN med/512.png */
 .tile.tile-1024 .tile-inner { background: url(../i/stamps-57.png) -570px -0px; } /* PN med/1024.png */
 .tile.tile-2048 .tile-inner { background: url(../i/stamps-57.png) -627px -0px; } /* PN med/2048.png */
 .tile.tile-4096 .tile-inner { background: url(../i/stamps-57.png) -684px -0px; } /* PN med/4096.png */
 .tile.tile-8192 .tile-inner { background: url(../i/stamps-57.png) -741px -0px; } /* PN med/8192.png */
 .tile.tile-16384 .tile-inner { background: url(../i/stamps-57.png) -798px -0px; } /* PN med/16384.png */
 .tile.tile-32768 .tile-inner { background: url(../i/stamps-57.png) -855px -0px; } /* PN med/32768.png */
 .tile.tile-65536 .tile-inner { background: url(../i/stamps-57.png) -912px -0px; } /* PN med/65536.png */
 .tile.tile-131072 .tile-inner { background: url(../i/stamps-57.png) -969px -0px; } /* PN med/131072.png */
 .tile.tile-262144 .tile-inner { background: url(../i/stamps-57.png) -1026px -0px; } /* PN med/262144.png */
 .tile.tile-524288 .tile-inner { background: url(../i/stamps-57.png) -1083px -0px; } /* PN med/524288.png */
 .tile.tile-1048576 .tile-inner { background: url(../i/stamps-57.png) -1140px -0px; } /* PN med/1048576.png */
 .tile.tile-2097152 .tile-inner { background: url(../i/stamps-57.png) -1197px -0px; } /* PN med/2097152.png */
 .tile.tile-4194304 .tile-inner { background: url(../i/stamps-57.png) -1254px -0px; } /* PN med/4194304.png */
 .tile.tile-8388608 .tile-inner { background: url(../i/stamps-57.png) -1311px -0px; } /* PN med/8388608.png */
 .tile.tile-16777216 .tile-inner { background: url(../i/stamps-57.png) -1368px -0px; } /* PN med/16777216.png */
}

@media screen and (max-width: 399px) {
 .tile.tile-1   .tile-inner { background: url(../i/stamps-40.png) -0px -0px; } /* PN sm/1.png */
 .tile.tile-2   .tile-inner { background: url(../i/stamps-40.png) -40px -0px; } /* PN sm/2.png */
 .tile.tile-4   .tile-inner { background: url(../i/stamps-40.png) -80px -0px; } /* PN sm/4.png */
 .tile.tile-8   .tile-inner { background: url(../i/stamps-40.png) -120px -0px; } /* PN sm/8.png */
 .tile.tile-16  .tile-inner { background: url(../i/stamps-40.png) -160px -0px; } /* PN sm/16.png */
 .tile.tile-32  .tile-inner { background: url(../i/stamps-40.png) -200px -0px; } /* PN sm/32.png */
 .tile.tile-64  .tile-inner { background: url(../i/stamps-40.png) -240px -0px; } /* PN sm/64.png */
 .tile.tile-128 .tile-inner { background: url(../i/stamps-40.png) -280px -0px; } /* PN sm/128.png */
 .tile.tile-256 .tile-inner { background: url(../i/stamps-40.png) -320px -0px; } /* PN sm/256.png */
 .tile.tile-512 .tile-inner { background: url(../i/stamps-40.png) -360px -0px; } /* PN sm/512.png */
 .tile.tile-1024 .tile-inner { background: url(../i/stamps-40.png) -400px -0px; } /* PN sm/1024.png */
 .tile.tile-2048 .tile-inner { background: url(../i/stamps-40.png) -440px -0px; } /* PN sm/2048.png */
 .tile.tile-4096 .tile-inner { background: url(../i/stamps-40.png) -480px -0px; } /* PN sm/4096.png */
 .tile.tile-8192 .tile-inner { background: url(../i/stamps-40.png) -520px -0px; } /* PN sm/8192.png */
 .tile.tile-16384 .tile-inner { background: url(../i/stamps-40.png) -560px -0px; } /* PN sm/16384.png */
 .tile.tile-32768 .tile-inner { background: url(../i/stamps-40.png) -600px -0px; } /* PN sm/32768.png */
 .tile.tile-65536 .tile-inner { background: url(../i/stamps-40.png) -640px -0px; } /* PN sm/65536.png */
 .tile.tile-131072 .tile-inner { background: url(../i/stamps-40.png) -680px -0px; } /* PN sm/131072.png */
 .tile.tile-262144 .tile-inner { background: url(../i/stamps-40.png) -720px -0px; } /* PN sm/262144.png */
 .tile.tile-524288 .tile-inner { background: url(../i/stamps-40.png) -760px -0px; } /* PN sm/524288.png */
 .tile.tile-1048576 .tile-inner { background: url(../i/stamps-40.png) -800px -0px; } /* PN sm/1048576.png */
 .tile.tile-2097152 .tile-inner { background: url(../i/stamps-40.png) -840px -0px; } /* PN sm/2097152.png */
 .tile.tile-4194304 .tile-inner { background: url(../i/stamps-40.png) -880px -0px; } /* PN sm/4194304.png */
 .tile.tile-8388608 .tile-inner { background: url(../i/stamps-40.png) -920px -0px; } /* PN sm/8388608.png */
 .tile.tile-16777216 .tile-inner { background: url(../i/stamps-40.png) -960px -0px; } /* PN sm/16777216.png */
}

@media screen and (max-height: 431px) and (min-width: 480px) {
 .tile.tile-1   .tile-inner { background: url(../i/stamps-40.png) -0px -0px; } /* PN sm/1.png */
 .tile.tile-2   .tile-inner { background: url(../i/stamps-40.png) -40px -0px; } /* PN sm/2.png */
 .tile.tile-4   .tile-inner { background: url(../i/stamps-40.png) -80px -0px; } /* PN sm/4.png */
 .tile.tile-8   .tile-inner { background: url(../i/stamps-40.png) -120px -0px; } /* PN sm/8.png */
 .tile.tile-16  .tile-inner { background: url(../i/stamps-40.png) -160px -0px; } /* PN sm/16.png */
 .tile.tile-32  .tile-inner { background: url(../i/stamps-40.png) -200px -0px; } /* PN sm/32.png */
 .tile.tile-64  .tile-inner { background: url(../i/stamps-40.png) -240px -0px; } /* PN sm/64.png */
 .tile.tile-128 .tile-inner { background: url(../i/stamps-40.png) -280px -0px; } /* PN sm/128.png */
 .tile.tile-256 .tile-inner { background: url(../i/stamps-40.png) -320px -0px; } /* PN sm/256.png */
 .tile.tile-512 .tile-inner { background: url(../i/stamps-40.png) -360px -0px; } /* PN sm/512.png */
 .tile.tile-1024 .tile-inner { background: url(../i/stamps-40.png) -400px -0px; } /* PN sm/1024.png */
 .tile.tile-2048 .tile-inner { background: url(../i/stamps-40.png) -440px -0px; } /* PN sm/2048.png */
 .tile.tile-4096 .tile-inner { background: url(../i/stamps-40.png) -480px -0px; } /* PN sm/4096.png */
 .tile.tile-8192 .tile-inner { background: url(../i/stamps-40.png) -520px -0px; } /* PN sm/8192.png */
 .tile.tile-16384 .tile-inner { background: url(../i/stamps-40.png) -560px -0px; } /* PN sm/16384.png */
 .tile.tile-32768 .tile-inner { background: url(../i/stamps-40.png) -600px -0px; } /* PN sm/32768.png */
 .tile.tile-65536 .tile-inner { background: url(../i/stamps-40.png) -640px -0px; } /* PN sm/65536.png */
 .tile.tile-131072 .tile-inner { background: url(../i/stamps-40.png) -680px -0px; } /* PN sm/131072.png */
 .tile.tile-262144 .tile-inner { background: url(../i/stamps-40.png) -720px -0px; } /* PN sm/262144.png */
 .tile.tile-524288 .tile-inner { background: url(../i/stamps-40.png) -760px -0px; } /* PN sm/524288.png */
 .tile.tile-1048576 .tile-inner { background: url(../i/stamps-40.png) -800px -0px; } /* PN sm/1048576.png */
 .tile.tile-2097152 .tile-inner { background: url(../i/stamps-40.png) -840px -0px; } /* PN sm/2097152.png */
 .tile.tile-4194304 .tile-inner { background: url(../i/stamps-40.png) -880px -0px; } /* PN sm/4194304.png */
 .tile.tile-8388608 .tile-inner { background: url(../i/stamps-40.png) -920px -0px; } /* PN sm/8388608.png */
 .tile.tile-16777216 .tile-inner { background: url(../i/stamps-40.png) -960px -0px; } /* PN sm/16777216.png */
}


/* Colors for Flutterbee (also known as Chromatic Heresy). The tiles
   become transparent (just like the fruit list icons, which always are) and
   acquire a background-color.

  %%% To make it transparent the code is:

    background-color: rgba(240, 182, 255, 0.5);

  but it doesn't work right now because merged tiles display on top of
  (at least one of) their progenitors. The progenitors need to be displayed
  for the transition animation. The solution is to define a class for merging
  tiles that gives them a fade-out transition, and modify HTMLActuator::addTile
  to push this class for those tiles only. Look at .../2048-cyberzhg/ and
  compare the merging of 2+2->4 to the 4+4->8 and higher merges.
 */
div.heretical .tile.tile-1,    div.heretical .fruit-1 {
 background-color: rgba(255,255,255,0.7); } /* #FFF; */
div.heretical .tile.tile-2,    div.heretical .fruit-2 {
 background-color: rgba(255,224,255,0.7); } /* #FFE0FF; */
div.heretical .tile.tile-4,    div.heretical .fruit-4 {
 background-color: rgba(240,182,255,0.7); } /* #F0B6FF; */
div.heretical .tile.tile-8,    div.heretical .fruit-8 {
 background-color: rgba(224,149,255,0.7); } /* #E095FF; */
div.heretical .tile.tile-16,   div.heretical .fruit-16 {
 background-color: rgba(189,133,255,0.7); } /* #BD85FF; */
div.heretical .tile.tile-32,   div.heretical .fruit-32 {
 background-color: rgba(149, 85,255,0.7); } /* #9555FF; */
div.heretical .tile.tile-64,   div.heretical .fruit-64 {
 background-color: rgba(106, 40,239,0.7); } /* #6A28EF; */
div.heretical .tile.tile-128,  div.heretical .fruit-128 {
 background-color: rgba( 82, 34,255,0.7); } /* #5222FF; */
div.heretical .tile.tile-256,  div.heretical .fruit-256 {
 background-color: rgba(  0,119,255,0.7); } /* #0077FF; */
div.heretical .tile.tile-512,  div.heretical .fruit-512 {
 background-color: rgba(  0,170,255,0.7); } /* #00AAFF; */
div.heretical .tile.tile-1024, div.heretical .fruit-1024 {
 background-color: rgba(  0,221,255,0.7); } /* #00DDFF; */
div.heretical .tile.tile-2048, div.heretical .fruit-2048 {
 background-color: rgba(  0,255,221,0.7); } /* #00FFDD; */
div.heretical .tile.tile-4096, div.heretical .fruit-4096 {
 background-color: rgba(  0,255,153,0.7); } /* #00FF99; */
div.heretical .tile.tile-8192, div.heretical .fruit-8192 {
 background-color: rgba(  0,221, 68,0.7); } /* #00DD44; */
div.heretical .tile.tile-16384, div.heretical .fruit-16384 {
 background-color: rgba( 51,187,  0,0.7); } /* #33BB00; */
div.heretical .tile.tile-32768, div.heretical .fruit-32768 {
 background-color: rgba(119,170,  0,0.7); } /* #77AA00; */
div.heretical .tile.tile-65536, div.heretical .fruit-65536 {
 background-color: rgba(255,255, 51,0.7); } /* #FFFF33; (old: 9C0, CF4) */
div.heretical .tile.tile-131072, div.heretical .fruit-131072 {
 background-color: rgba(221,204,  0,0.7); } /* #DDCC00; */
div.heretical .tile.tile-262144, div.heretical .fruit-262144 {
 background-color: rgba(229,170,  0,0.7); } /* #E5AA00; */
div.heretical .tile.tile-524288, div.heretical .fruit-524288 {
 background-color: rgba(229,119,  0,0.7); } /* #E57700; (old: C40, F84) */
div.heretical .tile.tile-1048576, div.heretical .fruit-1048576 {
 background-color: rgba(238, 68,  0,0.7); } /* #EE4400; */
div.heretical .tile.tile-2097152, div.heretical .fruit-2097152 {
 background-color: rgba(255,  0, 51,0.7); } /* #FF0033; */
div.heretical .tile.tile-4194304, div.heretical .fruit-4194304 {
 background-color: rgba(255,  0,136,0.7); } /* #FF0088; */
div.heretical .tile.tile-8388608, div.heretical .fruit-8388608 {
 background-color: rgba(213,  0,170,0.7); } /* #D500AA; */
div.heretical .tile.tile-16777216, div.heretical .fruit-16777216 {
 background-color: rgba(170,  0,136,0.7); } /* #AA0088; */


/* Transparent tiles for Flutterbee. */
div.heretical .tile.tile-1 .tile-inner {
  background: url(../i/stamps-79.png) -0px -79px; /* PN tr79/1.png */
}

div.heretical .tile.tile-2 .tile-inner {
  background: url(../i/stamps-79.png) -79px -79px; /* PN tr79/2.png */
}

div.heretical .tile.tile-4 .tile-inner {
  background: url(../i/stamps-79.png) -158px -79px; /* PN tr79/4.png */
}

div.heretical .tile.tile-8 .tile-inner {
  background: url(../i/stamps-79.png) -237px -79px; /* PN tr79/8.png */
}

div.heretical .tile.tile-16 .tile-inner {
  background: url(../i/stamps-79.png) -316px -79px; /* PN tr79/16.png */
}

div.heretical .tile.tile-32 .tile-inner {
  background: url(../i/stamps-79.png) -395px -79px; /* PN tr79/32.png */
}

div.heretical .tile.tile-64 .tile-inner {
  background: url(../i/stamps-79.png) -474px -79px; /* PN tr79/64.png */
}

div.heretical .tile.tile-128 .tile-inner {
  background: url(../i/stamps-79.png) -553px -79px; /* PN tr79/128.png */
}

div.heretical .tile.tile-256 .tile-inner {
  background: url(../i/stamps-79.png) -632px -79px; /* PN tr79/256.png */
}

div.heretical .tile.tile-512 .tile-inner {
  background: url(../i/stamps-79.png) -711px -79px; /* PN tr79/512.png */
}

div.heretical .tile.tile-1024 .tile-inner {
  background: url(../i/stamps-79.png) -790px -79px; /* PN tr79/1024.png */
}

div.heretical .tile.tile-2048 .tile-inner {
  background: url(../i/stamps-79.png) -869px -79px; /* PN tr79/2048.png */
}

div.heretical .tile.tile-4096 .tile-inner {
  background: url(../i/stamps-79.png) -948px -79px; /* PN tr79/4096.png */
}

div.heretical .tile.tile-8192 .tile-inner {
  background: url(../i/stamps-79.png) -1027px -79px; /* PN tr79/8192.png */
}

div.heretical .tile.tile-16384 .tile-inner {
  background: url(../i/stamps-79.png) -1106px -79px; /* PN tr79/16384.png */
}

div.heretical .tile.tile-32768 .tile-inner {
  background: url(../i/stamps-79.png) -1185px -79px; /* PN tr79/32768.png */
}

div.heretical .tile.tile-65536 .tile-inner {
  background: url(../i/stamps-79.png) -1264px -79px; /* PN tr79/65536.png */
}

div.heretical .tile.tile-131072 .tile-inner {
  background: url(../i/stamps-79.png) -1343px -79px; /* PN tr79/131072.png */
}

div.heretical .tile.tile-262144 .tile-inner {
  background: url(../i/stamps-79.png) -1422px -79px; /* PN tr79/262144.png */
}

div.heretical .tile.tile-524288 .tile-inner {
  background: url(../i/stamps-79.png) -1501px -79px; /* PN tr79/524288.png */
}

div.heretical .tile.tile-1048576 .tile-inner {
  background: url(../i/stamps-79.png) -1580px -79px; /* PN tr79/1048576.png */
}

div.heretical .tile.tile-2097152 .tile-inner {
  background: url(../i/stamps-79.png) -1659px -79px; /* PN tr79/2097152.png */
}

div.heretical .tile.tile-4194304 .tile-inner {
  background: url(../i/stamps-79.png) -1738px -79px; /* PN tr79/4194304.png */
}

div.heretical .tile.tile-8388608 .tile-inner {
  background: url(../i/stamps-79.png) -1817px -79px; /* PN tr79/8388608.png */
}

div.heretical .tile.tile-16777216 .tile-inner {
  background: url(../i/stamps-79.png) -1896px -79px; /* PN tr79/16777216.png */
}


@media screen and (min-width: 400px) and (max-width: 588px) {
 div.heretical .tile.tile-1 .tile-inner {  background: url(../i/stamps-57.png) -0px -57px; } /* PN trm/1.png */
 div.heretical .tile.tile-2 .tile-inner {  background: url(../i/stamps-57.png) -57px -57px; } /* PN trm/2.png */
 div.heretical .tile.tile-4 .tile-inner {  background: url(../i/stamps-57.png) -114px -57px; } /* PN trm/4.png */
 div.heretical .tile.tile-8 .tile-inner {  background: url(../i/stamps-57.png) -171px -57px; } /* PN trm/8.png */
 div.heretical .tile.tile-16 .tile-inner {  background: url(../i/stamps-57.png) -228px -57px; } /* PN trm/16.png */
 div.heretical .tile.tile-32 .tile-inner {  background: url(../i/stamps-57.png) -285px -57px; } /* PN trm/32.png */
 div.heretical .tile.tile-64 .tile-inner {  background: url(../i/stamps-57.png) -342px -57px; } /* PN trm/64.png */
 div.heretical .tile.tile-128 .tile-inner {  background: url(../i/stamps-57.png) -399px -57px; } /* PN trm/128.png */
 div.heretical .tile.tile-256 .tile-inner {  background: url(../i/stamps-57.png) -456px -57px; } /* PN trm/256.png */
 div.heretical .tile.tile-512 .tile-inner {  background: url(../i/stamps-57.png) -513px -57px; } /* PN trm/512.png */
 div.heretical .tile.tile-1024 .tile-inner {  background: url(../i/stamps-57.png) -570px -57px; } /* PN trm/1024.png */
 div.heretical .tile.tile-2048 .tile-inner {  background: url(../i/stamps-57.png) -627px -57px; } /* PN trm/2048.png */
 div.heretical .tile.tile-4096 .tile-inner {  background: url(../i/stamps-57.png) -684px -57px; } /* PN trm/4096.png */
 div.heretical .tile.tile-8192 .tile-inner {  background: url(../i/stamps-57.png) -741px -57px; } /* PN trm/8192.png */
 div.heretical .tile.tile-16384 .tile-inner {  background: url(../i/stamps-57.png) -798px -57px; } /* PN trm/16384.png */
 div.heretical .tile.tile-32768 .tile-inner {  background: url(../i/stamps-57.png) -855px -57px; } /* PN trm/32768.png */
 div.heretical .tile.tile-65536 .tile-inner {  background: url(../i/stamps-57.png) -912px -57px; } /* PN trm/65536.png */
 div.heretical .tile.tile-131072 .tile-inner {  background: url(../i/stamps-57.png) -969px -57px; } /* PN trm/131072.png */
 div.heretical .tile.tile-262144 .tile-inner {  background: url(../i/stamps-57.png) -1026px -57px; } /* PN trm/262144.png */
 div.heretical .tile.tile-524288 .tile-inner {  background: url(../i/stamps-57.png) -1083px -57px; } /* PN trm/524288.png */
 div.heretical .tile.tile-1048576 .tile-inner { background: url(../i/stamps-57.png) -1140px -57px; } /* PN trm/1048576.png */
 div.heretical .tile.tile-2097152 .tile-inner { background: url(../i/stamps-57.png) -1197px -57px; } /* PN trm/2097152.png */
 div.heretical .tile.tile-4194304 .tile-inner { background: url(../i/stamps-57.png) -1254px -57px; } /* PN trm/4194304.png */
 div.heretical .tile.tile-8388608 .tile-inner { background: url(../i/stamps-57.png) -1311px -57px; } /* PN trm/8388608.png */
 div.heretical .tile.tile-16777216 .tile-inner { background: url(../i/stamps-57.png) -1368px -57px; } /* PN trm/16777216.png */
}

@media screen and (max-width: 399px) {
 div.heretical .tile.tile-1 .tile-inner {  background: url(../i/stamps-40.png) -0px -40px; } /* PN trs/1.png */
 div.heretical .tile.tile-2 .tile-inner {  background: url(../i/stamps-40.png) -40px -40px; } /* PN trs/2.png */
 div.heretical .tile.tile-4 .tile-inner {  background: url(../i/stamps-40.png) -80px -40px; } /* PN trs/4.png */
 div.heretical .tile.tile-8 .tile-inner {  background: url(../i/stamps-40.png) -120px -40px; } /* PN trs/8.png */
 div.heretical .tile.tile-16 .tile-inner {  background: url(../i/stamps-40.png) -160px -40px; } /* PN trs/16.png */
 div.heretical .tile.tile-32 .tile-inner {  background: url(../i/stamps-40.png) -200px -40px; } /* PN trs/32.png */
 div.heretical .tile.tile-64 .tile-inner {  background: url(../i/stamps-40.png) -240px -40px; } /* PN trs/64.png */
 div.heretical .tile.tile-128 .tile-inner {  background: url(../i/stamps-40.png) -280px -40px; } /* PN trs/128.png */
 div.heretical .tile.tile-256 .tile-inner {  background: url(../i/stamps-40.png) -320px -40px; } /* PN trs/256.png */
 div.heretical .tile.tile-512 .tile-inner {  background: url(../i/stamps-40.png) -360px -40px; } /* PN trs/512.png */
 div.heretical .tile.tile-1024 .tile-inner {  background: url(../i/stamps-40.png) -400px -40px; } /* PN trs/1024.png */
 div.heretical .tile.tile-2048 .tile-inner {  background: url(../i/stamps-40.png) -440px -40px; } /* PN trs/2048.png */
 div.heretical .tile.tile-4096 .tile-inner {  background: url(../i/stamps-40.png) -480px -40px; } /* PN trs/4096.png */
 div.heretical .tile.tile-8192 .tile-inner {  background: url(../i/stamps-40.png) -520px -40px; } /* PN trs/8192.png */
 div.heretical .tile.tile-16384 .tile-inner {  background: url(../i/stamps-40.png) -560px -40px; } /* PN trs/16384.png */
 div.heretical .tile.tile-32768 .tile-inner {  background: url(../i/stamps-40.png) -600px -40px; } /* PN trs/32768.png */
 div.heretical .tile.tile-65536 .tile-inner {  background: url(../i/stamps-40.png) -640px -40px; } /* PN trs/65536.png */
 div.heretical .tile.tile-131072 .tile-inner {  background: url(../i/stamps-40.png) -680px -40px; } /* PN trs/131072.png */
 div.heretical .tile.tile-262144 .tile-inner {  background: url(../i/stamps-40.png) -720px -40px; } /* PN trs/262144.png */
 div.heretical .tile.tile-524288 .tile-inner {  background: url(../i/stamps-40.png) -760px -40px; } /* PN trs/524288.png */
 div.heretical .tile.tile-1048576 .tile-inner { background: url(../i/stamps-40.png) -800px -40px; } /* PN trs/1048576.png */
 div.heretical .tile.tile-2097152 .tile-inner { background: url(../i/stamps-40.png) -840px -40px; } /* PN trs/2097152.png */
 div.heretical .tile.tile-4194304 .tile-inner { background: url(../i/stamps-40.png) -880px -40px; } /* PN trs/4194304.png */
 div.heretical .tile.tile-8388608 .tile-inner { background: url(../i/stamps-40.png) -920px -40px; } /* PN trs/8388608.png */
 div.heretical .tile.tile-16777216 .tile-inner { background: url(../i/stamps-40.png) -960px -40px; } /* PN trs/16777216.png */
}
@media screen and (max-height: 431px) and (min-width: 480px) {
 div.heretical .tile.tile-1 .tile-inner {  background: url(../i/stamps-40.png) -0px -40px; } /* PN trs/1.png */
 div.heretical .tile.tile-2 .tile-inner {  background: url(../i/stamps-40.png) -40px -40px; } /* PN trs/2.png */
 div.heretical .tile.tile-4 .tile-inner {  background: url(../i/stamps-40.png) -80px -40px; } /* PN trs/4.png */
 div.heretical .tile.tile-8 .tile-inner {  background: url(../i/stamps-40.png) -120px -40px; } /* PN trs/8.png */
 div.heretical .tile.tile-16 .tile-inner {  background: url(../i/stamps-40.png) -160px -40px; } /* PN trs/16.png */
 div.heretical .tile.tile-32 .tile-inner {  background: url(../i/stamps-40.png) -200px -40px; } /* PN trs/32.png */
 div.heretical .tile.tile-64 .tile-inner {  background: url(../i/stamps-40.png) -240px -40px; } /* PN trs/64.png */
 div.heretical .tile.tile-128 .tile-inner {  background: url(../i/stamps-40.png) -280px -40px; } /* PN trs/128.png */
 div.heretical .tile.tile-256 .tile-inner {  background: url(../i/stamps-40.png) -320px -40px; } /* PN trs/256.png */
 div.heretical .tile.tile-512 .tile-inner {  background: url(../i/stamps-40.png) -360px -40px; } /* PN trs/512.png */
 div.heretical .tile.tile-1024 .tile-inner {  background: url(../i/stamps-40.png) -400px -40px; } /* PN trs/1024.png */
 div.heretical .tile.tile-2048 .tile-inner {  background: url(../i/stamps-40.png) -440px -40px; } /* PN trs/2048.png */
 div.heretical .tile.tile-4096 .tile-inner {  background: url(../i/stamps-40.png) -480px -40px; } /* PN trs/4096.png */
 div.heretical .tile.tile-8192 .tile-inner {  background: url(../i/stamps-40.png) -520px -40px; } /* PN trs/8192.png */
 div.heretical .tile.tile-16384 .tile-inner {  background: url(../i/stamps-40.png) -560px -40px; } /* PN trs/16384.png */
 div.heretical .tile.tile-32768 .tile-inner {  background: url(../i/stamps-40.png) -600px -40px; } /* PN trs/32768.png */
 div.heretical .tile.tile-65536 .tile-inner {  background: url(../i/stamps-40.png) -640px -40px; } /* PN trs/65536.png */
 div.heretical .tile.tile-131072 .tile-inner {  background: url(../i/stamps-40.png) -680px -40px; } /* PN trs/131072.png */
 div.heretical .tile.tile-262144 .tile-inner {  background: url(../i/stamps-40.png) -720px -40px; } /* PN trs/262144.png */
 div.heretical .tile.tile-524288 .tile-inner {  background: url(../i/stamps-40.png) -760px -40px; } /* PN trs/524288.png */
 div.heretical .tile.tile-1048576 .tile-inner { background: url(../i/stamps-40.png) -800px -40px; } /* PN trs/1048576.png */
 div.heretical .tile.tile-2097152 .tile-inner { background: url(../i/stamps-40.png) -840px -40px; } /* PN trs/2097152.png */
 div.heretical .tile.tile-4194304 .tile-inner { background: url(../i/stamps-40.png) -880px -40px; } /* PN trs/4194304.png */
 div.heretical .tile.tile-8388608 .tile-inner { background: url(../i/stamps-40.png) -920px -40px; } /* PN trs/8388608.png */
 div.heretical .tile.tile-16777216 .tile-inner { background: url(../i/stamps-40.png) -960px -40px; } /* PN trs/16777216.png */
}


.fruit-list {
  background:#fff;
  margin-left: 11px;
  margin-right: 12px;
  margin-top: 4px;
  /* One row of 14 (each 40x40) */
  width: 560px; height: 40px;
}
@media screen and (min-width: 400px) and (max-width: 588px) {
 .fruit-list {
  margin-left: 0px;
  margin-right: 0px;
  /* One row of 10 (each 40x40) */
  width: 400px; height: 40px;
 }
}
@media screen and (max-width: 399px) {
 .fruit-list {
  margin-left: 0px;
  margin-right: 0px;
  /* One row of 10 (each 28x28) */
  width: 280px; height: 28px;
 }
}
@media screen and (max-height: 591px) and (min-width: 865px) {
 .fruit-list {
  position: absolute;
  right:4px; top: 0px;
  margin: 11px 0 12px 4px;
  /* Ten rows of 2 (each 40x40) */
  width: 80px; height: 400px;
 }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
 .fruit-list {
  position: absolute;
  right:4px; top: 0px;
  margin: 0;
  /* Seven rows of 2 (each 28x28) */
  width: 56px; height: 196px;
 }
}


.fruit-cell {
  display: none;  /* Until revealed by JS */
  width: 40px;
  height: 40px;
  margin-right: 0px;
  float: left;
  border-radius: 0px;
  background: rgba(138, 138, 138, 0.35);
}
@media screen and (min-width: 400px) and (max-width: 588px) {
  .fruit-cell { width: 40px; height: 40px; }
}
@media screen and (max-width: 399px) {
  .fruit-cell { width: 28px; height: 28px; }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
  .fruit-cell { width: 28px; height: 28px; }
}

.fruit-1 {width:40px;height:40px; background: url(../i/stamps-40.png) -0px -40px; } /* PN trs/1.png */
.fruit-2 {width:40px;height:40px; background: url(../i/stamps-40.png) -40px -40px; } /* PN trs/2.png */
.fruit-4 {width:40px;height:40px; background: url(../i/stamps-40.png) -80px -40px; } /* PN trs/4.png */
.fruit-8 {width:40px;height:40px; background: url(../i/stamps-40.png) -120px -40px; } /* PN trs/8.png */
.fruit-16{width:40px;height:40px; background: url(../i/stamps-40.png) -160px -40px; } /* PN trs/16.png */
.fruit-32{width:40px;height:40px; background: url(../i/stamps-40.png) -200px -40px; } /* PN trs/32.png */
.fruit-64{width:40px;height:40px; background: url(../i/stamps-40.png) -240px -40px; } /* PN trs/64.png */
.fruit-128{width:40px;height:40px; background: url(../i/stamps-40.png) -280px -40px; } /* PN trs/128.png */
.fruit-256{width:40px;height:40px; background: url(../i/stamps-40.png) -320px -40px; } /* PN trs/256.png */
.fruit-512{width:40px;height:40px; background: url(../i/stamps-40.png) -360px -40px; } /* PN trs/512.png */
.fruit-1024{width:40px;height:40px; background: url(../i/stamps-40.png) -400px -40px; } /* PN trs/1024.png */
.fruit-2048{width:40px;height:40px; background: url(../i/stamps-40.png) -440px -40px; } /* PN trs/2048.png */
.fruit-4096{width:40px;height:40px; background: url(../i/stamps-40.png) -480px -40px; } /* PN trs/4096.png */
.fruit-8192{width:40px;height:40px; background: url(../i/stamps-40.png) -520px -40px; } /* PN trs/8192.png */
.fruit-16384{width:40px;height:40px; background: url(../i/stamps-40.png) -560px -40px; } /* PN trs/16384.png */
.fruit-32768{width:40px;height:40px; background: url(../i/stamps-40.png) -600px -40px; } /* PN trs/32768.png */
.fruit-65536{width:40px;height:40px; background: url(../i/stamps-40.png) -640px -40px; } /* PN trs/65536.png */
.fruit-131072{width:40px;height:40px; background: url(../i/stamps-40.png) -680px -40px; } /* PN trs/131072.png */
.fruit-262144{width:40px;height:40px; background: url(../i/stamps-40.png) -720px -40px; } /* PN trs/262144.png */
.fruit-524288{width:40px;height:40px; background: url(../i/stamps-40.png) -760px -40px; } /* PN trs/524288.png */
.fruit-1048576{width:40px;height:40px; background: url(../i/stamps-40.png) -800px -40px; } /* PN trs/1048576.png */
.fruit-2097152{width:40px;height:40px; background: url(../i/stamps-40.png) -840px -40px; } /* PN trs/2097152.png */
.fruit-4194304{width:40px;height:40px; background: url(../i/stamps-40.png) -880px -40px; } /* PN trs/4194304.png */
.fruit-8388608{width:40px;height:40px; background: url(../i/stamps-40.png) -920px -40px; } /* PN trs/8388608.png */
.fruit-16777216{width:40px;height:40px; background: url(../i/stamps-40.png) -960px -40px; } /* PN trs/16777216.png */

/* Here we do *not* need a
      @media screen and (min-width: 400px) and (max-width: 588px)
   for medium-size layout version, because the fruit tiles
   for medium are the same size (40x40) as for full-size */

@media screen and (max-width: 399px) {
  .fruit-1 {width:28px;height:28px; background: url(../i/stamps-28.png) -0px -28px; } /* PN trt/1.png */
  .fruit-2 {width:28px;height:28px; background: url(../i/stamps-28.png) -28px -28px; } /* PN trt/2.png */
  .fruit-4 {width:28px;height:28px; background: url(../i/stamps-28.png) -56px -28px; } /* PN trt/4.png */
  .fruit-8 {width:28px;height:28px; background: url(../i/stamps-28.png) -84px -28px; } /* PN trt/8.png */
  .fruit-16{width:28px;height:28px; background: url(../i/stamps-28.png) -112px -28px; } /* PN trt/16.png */
  .fruit-32{width:28px;height:28px; background: url(../i/stamps-28.png) -140px -28px; } /* PN trt/32.png */
  .fruit-64{width:28px;height:28px; background: url(../i/stamps-28.png) -168px -28px; } /* PN trt/64.png */
  .fruit-128{width:28px;height:28px; background: url(../i/stamps-28.png) -196px -28px; } /* PN trt/128.png */
  .fruit-256{width:28px;height:28px; background: url(../i/stamps-28.png) -224px -28px; } /* PN trt/256.png */
  .fruit-512{width:28px;height:28px; background: url(../i/stamps-28.png) -252px -28px; } /* PN trt/512.png */
  .fruit-1024{width:28px;height:28px; background: url(../i/stamps-28.png) -280px -28px; } /* PN trt/1024.png */
  .fruit-2048{width:28px;height:28px; background: url(../i/stamps-28.png) -308px -28px; } /* PN trt/2048.png */
  .fruit-4096{width:28px;height:28px; background: url(../i/stamps-28.png) -336px -28px; } /* PN trt/4096.png */
  .fruit-8192{width:28px;height:28px; background: url(../i/stamps-28.png) -364px -28px; } /* PN trt/8192.png */
  .fruit-16384{width:28px;height:28px; background: url(../i/stamps-28.png) -392px -28px; } /* PN trt/16384.png */
  .fruit-32768{width:28px;height:28px; background: url(../i/stamps-28.png) -420px -28px; } /* PN trt/32768.png */
  .fruit-65536{width:28px;height:28px; background: url(../i/stamps-28.png) -448px -28px; } /* PN trt/65536.png */
  .fruit-131072{width:28px;height:28px; background: url(../i/stamps-28.png) -476px -28px; } /* PN trt/131072.png */
  .fruit-262144{width:28px;height:28px; background: url(../i/stamps-28.png) -504px -28px; } /* PN trt/262144.png */
  .fruit-524288{width:28px;height:28px; background: url(../i/stamps-28.png) -532px -28px; } /* PN trt/524288.png */
  .fruit-1048576{width:28px;height:28px; background: url(../i/stamps-28.png) -560px -28px; } /* PN trt/1048576.png */
  .fruit-2097152{width:28px;height:28px; background: url(../i/stamps-28.png) -588px -28px; } /* PN trt/2097152.png */
  .fruit-4194304{width:28px;height:28px; background: url(../i/stamps-28.png) -616px -28px; } /* PN trt/4194304.png */
  .fruit-8388608{width:28px;height:28px; background: url(../i/stamps-28.png) -644px -28px; } /* PN trt/8388608.png */
  .fruit-16777216{width:28px;height:28px; background: url(../i/stamps-28.png) -672px -28px; } /* PN trt/16777216.png */
}
@media screen and (max-height: 431px) and (min-width: 480px) {
  .fruit-1 {width:28px;height:28px; background: url(../i/stamps-28.png) -0px -28px; } /* PN trt/1.png */
  .fruit-2 {width:28px;height:28px; background: url(../i/stamps-28.png) -28px -28px; } /* PN trt/2.png */
  .fruit-4 {width:28px;height:28px; background: url(../i/stamps-28.png) -56px -28px; } /* PN trt/4.png */
  .fruit-8 {width:28px;height:28px; background: url(../i/stamps-28.png) -84px -28px; } /* PN trt/8.png */
  .fruit-16{width:28px;height:28px; background: url(../i/stamps-28.png) -112px -28px; } /* PN trt/16.png */
  .fruit-32{width:28px;height:28px; background: url(../i/stamps-28.png) -140px -28px; } /* PN trt/32.png */
  .fruit-64{width:28px;height:28px; background: url(../i/stamps-28.png) -168px -28px; } /* PN trt/64.png */
  .fruit-128{width:28px;height:28px; background: url(../i/stamps-28.png) -196px -28px; } /* PN trt/128.png */
  .fruit-256{width:28px;height:28px; background: url(../i/stamps-28.png) -224px -28px; } /* PN trt/256.png */
  .fruit-512{width:28px;height:28px; background: url(../i/stamps-28.png) -252px -28px; } /* PN trt/512.png */
  .fruit-1024{width:28px;height:28px; background: url(../i/stamps-28.png) -280px -28px; } /* PN trt/1024.png */
  .fruit-2048{width:28px;height:28px; background: url(../i/stamps-28.png) -308px -28px; } /* PN trt/2048.png */
  .fruit-4096{width:28px;height:28px; background: url(../i/stamps-28.png) -336px -28px; } /* PN trt/4096.png */
  .fruit-8192{width:28px;height:28px; background: url(../i/stamps-28.png) -364px -28px; } /* PN trt/8192.png */
  .fruit-16384{width:28px;height:28px; background: url(../i/stamps-28.png) -392px -28px; } /* PN trt/16384.png */
  .fruit-32768{width:28px;height:28px; background: url(../i/stamps-28.png) -420px -28px; } /* PN trt/32768.png */
  .fruit-65536{width:28px;height:28px; background: url(../i/stamps-28.png) -448px -28px; } /* PN trt/65536.png */
  .fruit-131072{width:28px;height:28px; background: url(../i/stamps-28.png) -476px -28px; } /* PN trt/131072.png */
  .fruit-262144{width:28px;height:28px; background: url(../i/stamps-28.png) -504px -28px; } /* PN trt/262144.png */
  .fruit-524288{width:28px;height:28px; background: url(../i/stamps-28.png) -532px -28px; } /* PN trt/524288.png */
  .fruit-1048576{width:28px;height:28px; background: url(../i/stamps-28.png) -560px -28px; } /* PN trt/1048576.png */
  .fruit-2097152{width:28px;height:28px; background: url(../i/stamps-28.png) -588px -28px; } /* PN trt/2097152.png */
  .fruit-4194304{width:28px;height:28px; background: url(../i/stamps-28.png) -616px -28px; } /* PN trt/4194304.png */
  .fruit-8388608{width:28px;height:28px; background: url(../i/stamps-28.png) -644px -28px; } /* PN trt/8388608.png */
  .fruit-16777216{width:28px;height:28px; background: url(../i/stamps-28.png) -672px -28px; } /* PN trt/16777216.png */
}


div.bright-cell { background-color: #FFF; }








.boost-list {
  display: none;  /* Until revealed by JS */
  margin-left: auto; margin-right: auto; /* Center */
  margin-top: 4px;
  /* One row of 10 (each 40x40 with l+r margins of 8+8) %%% If the 28x28
   * icons in small view are good enough to see clearly, then I could use
   * that size in this view instead, giving me 14 fruit instead of only 10. */
  width: 100%;
  height: 40px;
}
@media screen and (min-width: 400px) and (max-width: 588px) {
 .boost-list {
  /* One row of 10 (each 40x40) */
  width: 400px; height: 40px;
 }
}
@media screen and (max-width: 399px) {
 .boost-list {
  /* One row of 10 (each 28x28) */
  width: 280px; height: 28px;
 }
}
@media screen and (max-height: 591px) and (min-width: 865px) {
 .boost-list {
  position: absolute;
  right: 84px; top: 0px;
  width: 56px;
 }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
 .boost-list {
  position: absolute;
  right: 66px; top: 0px;
  width: 28px;
 }
}

.boost-cell {
  display: none;  /* Until revealed by JS */
  width: 40px;
  height: 40px;
  margin-left: 8px;
  margin-right: 8px;
  float: left;
  border-radius: 0px;
  background: rgba(128, 0, 128, 0.0);
}
@media screen and (min-width: 400px) and (max-width: 588px) {
 .boost-cell {
   margin-left: 0px; margin-right: 0px;
 }
}
@media screen and (max-width: 399px) {
 .boost-cell {
   width: 28px; height: 28px;
   margin-left: 0px; margin-right: 0px;
 }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
 .boost-cell {
   width: 28px; height: 28px;
   margin-left: 0px; margin-right: 0px;
 }
}

.boost-00{width:40px;height:40px;background: url(../i/stamps-40.png) -360px -80px;} /* PN b/sm/b-00.png */
.boost-01{width:40px;height:40px;background: url(../i/stamps-40.png) -400px -80px;} /* PN b/sm/b-01.png */
.boost-02{width:40px;height:40px;background: url(../i/stamps-40.png) -440px -80px;} /* PN b/sm/b-02.png */
.boost-02-1{width:40px;height:40px;background: url(../i/stamps-40.png) -640px -80px;} /* PN b/sm/b-02-1.png */
.boost-03{width:40px;height:40px;background: url(../i/stamps-40.png) -480px -80px;} /* PN b/sm/b-03.png */
.boost-04{width:40px;height:40px;background: url(../i/stamps-40.png) -520px -80px;} /* PN b/sm/b-04.png */
.boost-05{width:40px;height:40px;background: url(../i/stamps-40.png) -560px -80px;} /* PN b/sm/b-05.png */

.phobia-none{width:40px;height:40px;background: url(../i/stamps-40.png) -0px -80px;} /* PN b/sm/rr-all.png */
.phobia-0{width:40px;height:40px;background: url(../i/stamps-40.png) -40px -80px;} /* PN b/sm/rr-0.png */
.phobia-1{width:40px;height:40px;background: url(../i/stamps-40.png) -80px -80px;} /* PN b/sm/rr-1.png */
.phobia-2{width:40px;height:40px;background: url(../i/stamps-40.png) -120px -80px;} /* PN b/sm/rr-2.png */
.phobia-3{width:40px;height:40px;background: url(../i/stamps-40.png) -160px -80px;} /* PN b/sm/rr-3.png */
.phobia-4{width:40px;height:40px;background: url(../i/stamps-40.png) -200px -80px;} /* PN b/sm/rr-4.png */
.phobia-5{width:40px;height:40px;background: url(../i/stamps-40.png) -240px -80px;} /* PN b/sm/rr-5.png */
.phobia-6{width:40px;height:40px;background: url(../i/stamps-40.png) -280px -80px;} /* PN b/sm/rr-6.png */
.phobia-7{width:40px;height:40px;background: url(../i/stamps-40.png) -320px -80px;} /* PN b/sm/rr-7.png */

/* Here we do *not* need a
      @media screen and (min-width: 400px) and (max-width: 588px)
   for medium-size layout version, because the boost tiles
   for medium are the same size (40x40) as for full-size */

@media screen and (max-width: 399px) {
 .boost-00{width:28px;height:28px;background: url(../i/stamps-28.png) -252px -56px;} /* PN b/ti/b-00.png */
 .boost-01{width:28px;height:28px;background: url(../i/stamps-28.png) -280px -56px;} /* PN b/ti/b-01.png */
 .boost-02{width:28px;height:28px;background: url(../i/stamps-28.png) -308px -56px;} /* PN b/ti/b-02.png */
 .boost-02-1{width:28px;height:28px;background: url(../i/stamps-28.png) -448px -56px;} /* PN b/ti/b-02-1.png */
 .boost-03{width:28px;height:28px;background: url(../i/stamps-28.png) -336px -56px;} /* PN b/ti/b-03.png */
 .boost-04{width:28px;height:28px;background: url(../i/stamps-28.png) -364px -56px;} /* PN b/ti/b-04.png */
 .boost-05{width:28px;height:28px;background: url(../i/stamps-28.png) -392px -56px;} /* PN b/ti/b-05.png */

 .phobia-none{width:28px;height:28px;background: url(../i/stamps-28.png) -0px -56px;} /* PN b/ti/rr-all.png */
 .phobia-0{width:28px;height:28px;background: url(../i/stamps-28.png) -28px -56px;} /* PN b/ti/rr-0.png */
 .phobia-1{width:28px;height:28px;background: url(../i/stamps-28.png) -56px -56px;} /* PN b/ti/rr-1.png */
 .phobia-2{width:28px;height:28px;background: url(../i/stamps-28.png) -84px -56px;} /* PN b/ti/rr-2.png */
 .phobia-3{width:28px;height:28px;background: url(../i/stamps-28.png) -112px -56px;} /* PN b/ti/rr-3.png */
 .phobia-4{width:28px;height:28px;background: url(../i/stamps-28.png) -140px -56px;} /* PN b/ti/rr-4.png */
 .phobia-5{width:28px;height:28px;background: url(../i/stamps-28.png) -168px -56px;} /* PN b/ti/rr-5.png */
 .phobia-6{width:28px;height:28px;background: url(../i/stamps-28.png) -196px -56px;} /* PN b/ti/rr-6.png */
 .phobia-7{width:28px;height:28px;background: url(../i/stamps-28.png) -224px -56px;} /* PN b/ti/rr-7.png */
}
@media screen and (max-height: 431px) and (min-width: 480px) {
 .boost-00{width:28px;height:28px;background: url(../i/stamps-28.png) -252px -56px;} /* PN b/ti/b-00.png */
 .boost-01{width:28px;height:28px;background: url(../i/stamps-28.png) -280px -56px;} /* PN b/ti/b-01.png */
 .boost-02{width:28px;height:28px;background: url(../i/stamps-28.png) -308px -56px;} /* PN b/ti/b-02.png */
 .boost-02-1{width:28px;height:28px;background: url(../i/stamps-28.png) -448px -56px;} /* PN b/ti/b-02-1.png */
 .boost-03{width:28px;height:28px;background: url(../i/stamps-28.png) -336px -56px;} /* PN b/ti/b-03.png */
 .boost-04{width:28px;height:28px;background: url(../i/stamps-28.png) -364px -56px;} /* PN b/ti/b-04.png */
 .boost-05{width:28px;height:28px;background: url(../i/stamps-28.png) -392px -56px;} /* PN b/ti/b-05.png */

 .phobia-none{width:28px;height:28px;background: url(../i/stamps-28.png) -0px -56px;} /* PN b/ti/rr-all.png */
 .phobia-0{width:28px;height:28px;background: url(../i/stamps-28.png) -28px -56px;} /* PN b/ti/rr-0.png */
 .phobia-1{width:28px;height:28px;background: url(../i/stamps-28.png) -56px -56px;} /* PN b/ti/rr-1.png */
 .phobia-2{width:28px;height:28px;background: url(../i/stamps-28.png) -84px -56px;} /* PN b/ti/rr-2.png */
 .phobia-3{width:28px;height:28px;background: url(../i/stamps-28.png) -112px -56px;} /* PN b/ti/rr-3.png */
 .phobia-4{width:28px;height:28px;background: url(../i/stamps-28.png) -140px -56px;} /* PN b/ti/rr-4.png */
 .phobia-5{width:28px;height:28px;background: url(../i/stamps-28.png) -168px -56px;} /* PN b/ti/rr-5.png */
 .phobia-6{width:28px;height:28px;background: url(../i/stamps-28.png) -196px -56px;} /* PN b/ti/rr-6.png */
 .phobia-7{width:28px;height:28px;background: url(../i/stamps-28.png) -224px -56px;} /* PN b/ti/rr-7.png */
}

div.inactive, div.primed,
 div.primed-high1,
 div.primed-high2 { border-radius: 28px; background-color: #CCC; }

div.primed { box-shadow: 0 0 27px 1px rgba(0, 0, 0, 1.0); }
div.primed-high1 { box-shadow: 0 0 19px 1px #07D; }
div.primed-high2 { box-shadow: 0 0 19px 1px #BA0; }

@media screen and (max-width: 399px) {
 div.primed { box-shadow: 0 0 19px 1px rgba(0, 0, 0, 1.0); }
 div.primed-high1 { box-shadow: 0 0 19px 1px #07D; }
 div.primed-high2 { box-shadow: 0 0 19px 1px #BA0; }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
 div.primed { box-shadow: 0 0 19px 1px rgba(0, 0, 0, 1.0); }
 div.primed-high1 { box-shadow: 0 0 19px 1px #07D; }
 div.primed-high2 { box-shadow: 0 0 19px 1px #BA0; }
}

/* We don't need to override the border-radius for smaller sizes
because HTML5 automatically chooses a smaller radius when needed if
the bounding rectangle is smaller. */

div.primed .boost-00,
div.inactive .boost-00 { background: url(../i/stamps-40.png) -360px -120px; } /* PN b/trs/b-00.png */

div.primed .boost-01,
div.inactive .boost-01 { background: url(../i/stamps-40.png) -400px -120px; } /* PN b/trs/b-01.png */

div.primed .boost-02,
div.inactive .boost-02 { background: url(../i/stamps-40.png) -440px -120px; } /* PN b/trs/b-02.png */

div.primed .boost-02-1,
div.inactive .boost-02-1 { background: url(../i/stamps-40.png) -640px -120px; } /* PN b/trs/b-02-1.png */

div.primed .boost-03,
div.inactive .boost-03 { background: url(../i/stamps-40.png) -480px -120px; } /* PN b/trs/b-03.png */

div.primed .boost-04,
div.inactive .boost-04 { background: url(../i/stamps-40.png) -520px -120px; } /* PN b/trs/b-04.png */

div.primed .boost-05,
div.inactive .boost-05 { background: url(../i/stamps-40.png) -560px -120px; } /* PN b/trs/b-05.png */



@media screen and (max-width: 399px) {
div.primed .boost-00,
 div.inactive .boost-00 { background: url(../i/stamps-28.png) -252px -84px; } /* PN b/trt/b-00.png */

div.primed .boost-01,
 div.inactive .boost-01 { background: url(../i/stamps-28.png) -280px -84px; } /* PN b/trt/b-01.png */

div.primed .boost-02,
 div.inactive .boost-02 { background: url(../i/stamps-28.png) -308px -84px; } /* PN b/trt/b-02.png */

div.primed .boost-02-1,
 div.inactive .boost-02-1 { background: url(../i/stamps-28.png) -448px -84px; } /* PN b/trt/b-02-1.png */

div.primed .boost-03,
 div.inactive .boost-03 { background: url(../i/stamps-28.png) -336px -84px; } /* PN b/trt/b-03.png */

div.primed .boost-04,
 div.inactive .boost-04 { background: url(../i/stamps-28.png) -364px -84px; } /* PN b/trt/b-04.png */

div.primed .boost-05,
 div.inactive .boost-05 { background: url(../i/stamps-28.png) -392px -84px; } /* PN b/trt/b-05.png */
}
@media screen and (max-height: 431px) and (min-width: 480px) {
div.primed .boost-00,
 div.inactive .boost-00 { background: url(../i/stamps-28.png) -252px -84px; } /* PN b/trt/b-00.png */

div.primed .boost-01,
 div.inactive .boost-01 { background: url(../i/stamps-28.png) -280px -84px; } /* PN b/trt/b-01.png */

div.primed .boost-02,
 div.inactive .boost-02 { background: url(../i/stamps-28.png) -308px -84px; } /* PN b/trt/b-02.png */

div.primed .boost-02-1,
 div.inactive .boost-02-1 { background: url(../i/stamps-28.png) -448px -84px; } /* PN b/trt/b-02-1.png */

div.primed .boost-03,
 div.inactive .boost-03 { background: url(../i/stamps-28.png) -336px -84px; } /* PN b/trt/b-03.png */

div.primed .boost-04,
 div.inactive .boost-04 { background: url(../i/stamps-28.png) -364px -84px; } /* PN b/trt/b-04.png */

div.primed .boost-05,
 div.inactive .boost-05 { background: url(../i/stamps-28.png) -392px -84px; } /* PN b/trt/b-05.png */
}


span.credit {
  font-family:xkcd-Regular, Optima, "Trebuchet MS", sans-serif;
  font-weight: bold; color: #000;
  text-shadow: 3px 1px 3px #FFF;
  font-size: 22px; line-height: 22px;
  float:right;
}

@media screen and (max-width: 399px) {
 span.credit { font-size: 16px; line-height: 16px; }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
 span.credit { font-size: 16px; line-height: 16px; }
}


@-webkit-keyframes appear {
  0% { opacity: 0; -webkit-transform: scale(0); }
  100% { opacity: 1; -webkit-transform: scale(1); } }
@-moz-keyframes appear {
  0% { opacity: 0; -moz-transform: scale(0); }
  100% { opacity: 1; -moz-transform: scale(1); } }
@keyframes appear {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); } }

.tile-new .tile-inner {
  -webkit-animation: appear 200ms ease 143ms;
  -moz-animation: appear 200ms ease 143ms;
  animation: appear 200ms ease 143ms;
  -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards; }

@-webkit-keyframes vanish { 0% { opacity: 1; } 100% { opacity: 0; } }
@-moz-keyframes vanish { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes vanish { 0% { opacity: 1; } 100% { opacity: 0; } }

.tile-vanish {
  -webkit-animation: vanish 143ms linear 143ms 1 normal forwards;
  -moz-animation: vanish 143ms linear 143ms 1 normal forwards;
  animation: vanish 143ms linear 143ms 1 normal forwards;
 }


@-webkit-keyframes pop {
  0% { -webkit-transform: scale(0); }
  50% { -webkit-transform: scale(1.2); }
  100% { -webkit-transform: scale(1); } }
@-moz-keyframes pop {
  0% { -moz-transform: scale(0); }
  50% { -moz-transform: scale(1.2); }
  100% { -moz-transform: scale(1); } }
@keyframes pop {
  0% { transform: scale(0); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); } }

.tile-merged .tile-inner {
  z-index: 20;
  -webkit-animation: pop 200ms ease 143ms;
  -moz-animation: pop 200ms ease 143ms;
  animation: pop 200ms ease 143ms;
  -webkit-animation-fill-mode: backwards;
  -moz-animation-fill-mode: backwards;
  animation-fill-mode: backwards; }

.above-game:after {
  content: "";
  display: block;
  clear: both; }


.instruc {
  font-size: 18px;  line-height: 25px;
 }
@media screen and (min-width: 400px) and (max-width: 588px) {
 .instruc { font-size: 16px; line-height: 20px; }
}
@media screen and (max-width: 399px) {
 .instruc { font-size: 14px; line-height: 16px; }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
 .instruc { font-size: 14px; line-height: 16px; }
}

.instruc .opts-prompt { text-align: center; }
@media screen and (max-height: 591px) and (min-width: 865px) {
 .instruc .opts-prompt {
  position: absolute; top: 360px; left:15px; width: 120px; }
}
@media screen and (max-height: 431px) and (min-width: 480px) {
 .instruc .opts-prompt {
  position: absolute; top: 148px; left:15px; width: 80px; }
}

.game-explanation {
  margin-top: 0;
 }


div.changelog {
  color: black;
  font-family: Courier, "Courier New", monospace;
  font-size: .65em;
  white-space: pre
}

div.license {
  color: black;
  /* font-family: Courier, "Courier New", monospace; */
  font-size: .65em;
  white-space: pre
}

@font-face {
  font-family: 'xkcd-Regular';
  src: url('../../../fonts/xkcd-Regular.eot?') format('eot'),
       url('../../../fonts/xkcd-Regular.otf') format('opentype'),
       url('../../../fonts/xkcd-Regular.woff') format('woff');
}
@font-face {
  font-family: 'xkcd_beanish-Regular';
  src: url('../../../fonts/xkcd_beanish-Regular.ttf') format('truetype'),
       url('../../../fonts/xkcd_beanish-Regular.otf') format('opentype'),
       url('../../../fonts/xkcd_beanish-Regular.woff') format('woff');
}