/* reset */
html{margin:0; padding:0; background: #ddd;}
body{margin:0; padding:0; font:normal 12px arial, sans-serif; color:#333;}
img{border:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}

/* clearfix */
.cf:before,
.cf:after{content:""; display:table;}
.cf:after{clear:both;}
.cf{zoom:1;}
.clear{content:"."; display:block; height:0; clear:both; visibility:hidden;}

@font-face {
    font-family: 'VanillaRegular';
    src: url('../fonts/Vanilla-webfont.eot');
    src: url('../fonts/Vanilla-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Vanilla-webfont.woff') format('woff'),
         url('../fonts/Vanilla-webfont.ttf') format('truetype'),
         url('../fonts/Vanilla-webfont.svg#VanillaRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


#page{margin: 0 auto; max-width: 640px; min-height: 416px; position: relative;}

h1{font: normal 35px VanillaRegular,Arial,sans-serif; text-align: center; margin: 10px 0 5px 0; color: #555;}

#zone_score{font: bold 18px Arial,sans-serif; padding: 5px;}
.col_score{float: left;}
.col_combo{float: right; text-align: right;}
#best_score{color: #999;}
#current_score{}
#best_combo{color: #999;}
#current_combo{}

.col_moves{text-align: center; color: #d63;}
.col_moves .critical{color: #c33;}

#zone_jeu{position: relative; overflow: hidden;}
.icone{
  width: 12.5%;
  height: 12.5%;
  display: block;
  position: absolute;
  z-index: 10;
  cursor: pointer;
  background-size: 800% 100%;
  background-repeat: no-repeat;
  background-image: url(sprite.png);
  -webkit-transition:top .2s ease-in, left .2s ease-in;
  -moz-transition:top .2s ease-in, left .2s ease-in;
  -ms-transition:top .2s ease-in, left .2s ease-in;
  -o-transition:top .2s ease-in, left .2s ease-in;
  transition:top .2s ease-in, left .2s ease-in;
}
.icone_1{background-position: 0 0;}
.icone_2{background-position: 14.29% 0;}
.icone_3{background-position: 28.57% 0;}
.icone_4{background-position: 42.86% 0;}
.icone_5{background-position: 57.14% 0;}
.icone_6{background-position: 71.43% 0;}
.icone_7{background-position: 85.71% 0;}
.icone_8{background-position: 100% 0;}

.icone_1.fire{background-position: center bottom, 0 0; background-image:url(fire4.gif),url(sprite.png); background-size: 100% 60%,800% 100%;}
.icone_2.fire{background-position: center bottom,14.29% 0; background-image: url(fire4.gif),url(sprite.png); background-size: 100% 60%,800% 100%;}
.icone_3.fire{background-position: center bottom,28.57% 0; background-image: url(fire4.gif),url(sprite.png); background-size: 100% 60%,800% 100%;}
.icone_4.fire{background-position: center bottom,42.86% 0; background-image: url(fire4.gif),url(sprite.png); background-size: 100% 60%,800% 100%;}
.icone_5.fire{background-position: center bottom,57.14% 0; background-image: url(fire4.gif),url(sprite.png); background-size: 100% 60%,800% 100%;}
.icone_6.fire{background-position: center bottom,71.43% 0; background-image: url(fire4.gif),url(sprite.png); background-size: 100% 60%,800% 100%;}
.icone_7.fire{background-position: center bottom,85.71% 0; background-image: url(fire4.gif),url(sprite.png); background-size: 100% 60%,800% 100%;}
.icone_8.fire{background-position: center bottom,100% 0; background-image: url(fire4.gif),url(sprite.png); background-size: 100% 60%,800% 100%;}


@-webkit-keyframes anim_hypercube {
  from { background-position: 0 0; }
  to { background-position: 114.2857% 0; }
}
@-moz-keyframes anim_hypercube {
  from { background-position: 0 0; }
  to { background-position: 114.2857% 0; }
}
@-o-keyframes anim_hypercube {
  from { background-position: 0 0; }
  to { background-position: 114.2857% 0; }
}
@keyframes anim_hypercube {
  from { background-position: 0 0; }
  to { background-position: 114.2857% 0; }
}
/* 100 + (100/(8-1)) = 114.2857 */

#zone_jeu .hypercube{
  background-image: url(sprite.png);
  background-size: 800% 100%;
  -webkit-animation: anim_hypercube .6s steps(8, end) infinite;
  -moz-animation: anim_hypercube .6s steps(8, end) infinite;
  -o-animation: anim_hypercube .6s steps(8, end) infinite;
  animation: anim_hypercube .6s steps(8, end) infinite;
}


@-webkit-keyframes hint_pulse {
  from { box-shadow: inset 0 0 9px #ddd; }
  50% { box-shadow: inset 0 0 18px #9109bd; }
  to {  box-shadow: inset 0 0 9px #ddd; }
}
@-moz-keyframes hint_pulse {
  from { box-shadow: inset 0 0 9px #ddd; }
  50% { box-shadow: inset 0 0 18px #9109bd; }
  to {  box-shadow: inset 0 0 9px #ddd; }
}
@-o-keyframes hint_pulse {
  from { box-shadow: inset 0 0 9px #ddd; }
  50% { box-shadow: inset 0 0 18px #9109bd; }
  to {  box-shadow: inset 0 0 9px #ddd; }
}
.icone.hint{
  border-radius: 20%;
  -webkit-animation-name: hint_pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: hint_pulse;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: hint_pulse;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
}
.icone.click{}
.icone.adjacent{border-radius: 20%; box-shadow: inset 0 0 9px #999;}


.aff_score{position: absolute; z-index: 50; font: bold 14px Arial,sans-serif; padding: 10px 0 0 10px; color: #333;}
.aff_combo{position: absolute; z-index: 60; font: bold 30px VanillaRegular,Arial,sans-serif; color: #fff; text-shadow: 0px 2px 5px #333;}

@-webkit-keyframes anim_explosion {
  from { background-position: 0 0; }
  to { background-position: 109.09% 0; }
}
@-moz-keyframes anim_explosion {
  from { background-position: 0 0; }
  to { background-position: 109.09% 0; }
}
@-o-keyframes anim_explosion {
  from { background-position: 0 0; }
  to { background-position: 109.09% 0; }
}
/* 100 + (100/(12-1)) = 109.09 */

.explosion{
  position: absolute;
  z-index: 40;
  background-image: url(explosion.png);
  background-size: 1200% 100%;
  width: 37.5%;
  height: 37.5%;
  -webkit-animation: anim_explosion .6s steps(12, end) 1;
  -moz-animation: anim_explosion .6s steps(12, end) 1;
  -o-animation: anim_explosion .6s steps(12, end) 1;
 }

#zone_message{
  position: absolute;
  left: 0;
  top: 120px;
  z-index: 100;
  width: 100%;
  color: #fff;
  font: normal 40px VanillaRegular,Arial,sans-serif;
  text-align: center;
  background: rgba(0,0,0,.2);
}
#zone_message div{padding: 5px 0;}
#zone_message .good{text-shadow: 0px 2px 5px #3c3;}
#zone_message .bad{text-shadow: 0px 2px 5px #c33;}
#zone_message .fire{text-shadow: 0px 2px 5px #c93;}
#zone_message .star{text-shadow: 0px 2px 5px #33c;}
#zone_message .hypercube{text-shadow: 0px 2px 5px #93c;}

#zone_message .button{
  cursor: pointer;
  padding: 10px 20px;
  margin: 10px auto;
  border-radius: 15px;
  border: 1px solid #999;
  display: inline-block;
  color: #fafafa;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.5);
  background: #eeeeee; /* Old browsers */
  background: -moz-linear-gradient(top,  #eeeeee 0%, #999999 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#999999)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #eeeeee 0%,#999999 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #eeeeee 0%,#999999 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #eeeeee 0%,#999999 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #eeeeee 0%,#999999 100%); /* W3C */
}
#zone_message .button:hover{
  background: #dddddd; /* Old browsers */
  background: -moz-linear-gradient(top,  #dddddd 0%, #888888 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#888888)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top,  #dddddd 0%,#888888 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top,  #dddddd 0%,#888888 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top,  #dddddd 0%,#888888 100%); /* IE10+ */
  background: linear-gradient(to bottom,  #dddddd 0%,#888888 100%); /* W3C */
}
#zone_message .bt-app-wall {
  display: none;
}


#msg_portrait{display: none;}


#zone_multiplier{font: bold 18px Arial,sans-serif; float: right;}

#bt_hint{float: left; border-radius: 5px; padding: 2px 10px; border: 1px solid #aaa; background: #666; cursor: pointer; font: bold 14px arial, sans-serif;}
#bt_hint:hover{background: #888;}
#bt_hint.on{background: #839E2A;}

.about{display: none;}

#ad {
  width: 320px;
  height: 50px;
  margin: 10px auto 0 auto;
}
#app-wall {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 200;
  width: 100%;
  padding: 32px 0;
}
#app-wall-iframe {
  width: 80%;
  height: 400px;
  margin: 0 10%;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  border: 5px solid #fff;
  border-radius: 5px;
}
#app-wall .close-bt {
  position: absolute;
  right: 5%;
  top: 16px;
  cursor: pointer;
}

#download_zone{position: absolute; top: 35px; left: 50px; text-align: center;}
#download_zone h2{font: normal 18px VanillaRegular,Arial,sans-serif; color: #555;}

#send_to_phone{position: absolute; top: 35px; right: 50px; text-align: center;}
#send_to_phone h2{font: normal 18px VanillaRegular,Arial,sans-serif; color: #555;}
.illus_qr{width: 123px; height: 123px; display: block; margin: 20px auto;}
.illus_fleche{width: 40px; height: 45px; display: block; margin: 20px auto;}


/* short screen (laptop) */
@media screen and (max-height: 720px) {
  #page{max-width: 480px;}
}

@media screen and (max-height: 720px) and (max-width: 1000px) {
  #download_zone{display: none;}
  #send_to_phone{display: none;}
}

@media screen and (min-height: 720px) and (max-width: 1200px) {
  #download_zone{display: none;}
  #send_to_phone{display: none;}
}

/* mobile (vertical) */
@media screen and (max-width: 640px) {
  h1{font-size: 30px;}
  #zone_message{font-size: 35px;}
  #zone_score{font-size: 14px;}
  /*#download_zone{display: block; position: relative; left: 0; top: 0;}*/
  #download_zone{display: none;}
  #send_to_phone{display: none;}
  #zone_message .bt-app-wall {
    display: inline-block;
  }
}

/* mobile (horizontal) */
@media screen and (max-width: 640px) and (orientation: landscape) {
  #page{min-height: 0;}
  #zone_score{display: none;}
  #zone_jeu{display: none;}
  #zone_message{display: none;}
  #download_zone{display: none;}
  #send_to_phone{display: none;}
  #msg_portrait{display: block; font-size: 20px; text-align: center; padding: 30px;}
}









/*neu*/
@keyframes hint_pulse{
	0% {
	    opacity: 1;
	}
	50% {
	    opacity: .5;
	}
	100% {
	    opacity: 1;
	}
}


@-webkit-keyframes hint_pulse {
	0% {
	    opacity: 1;
	}
	50% {
	    opacity: .5;
	}
	100% {
	    opacity: 1;
	}
}

@-moz-keyframes hint_pulse {
	0% {
	    opacity: 1;
	}
	50% {
	    opacity: .5;
	}
	100% {
	    opacity: 1;
	}
}

@-o-keyframes hint_pulse {
	0% {
	    opacity: 1;
	}
	50% {
	    opacity: .5;
	}
	100% {
	    opacity: 1;
	}
}

.icone.hint{
  border-radius: 20%;
  -webkit-animation-name: hint_pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: hint_pulse;
  -moz-animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: hint_pulse;
  -o-animation-duration: 2s;
  -o-animation-iteration-count: infinite;
}


.item_1.star{background-position: 0 0; background-image: url(sprite.png); background-size: 800% 100%;}
.item_2.star{background-position: 14.29% 0; background-image: url(sprite.png); background-size: 800% 100%;}
.item_3.star{background-position: 28.57% 0; background-image: url(sprite.png); background-size: 800% 100%;}
.item_4.star{background-position: 42.86% 0; background-image: url(sprite.png); background-size: 800% 100%;}
.item_5.star{background-position: 57.14% 0; background-image: url(sprite.png); background-size: 800% 100%;}
.item_6.star{background-position: 71.43% 0; background-image: url(sprite.png); background-size: 800% 100%;}
.item_7.star{background-position: 85.71% 0; background-image: url(sprite.png); background-size: 800% 100%;}
.item_8.star{background-position: 100% 0; background-image: url(sprite.png); background-size: 800% 100%;}
.star {
  -webkit-animation-name: star_pulse;
  -webkit-animation-duration: 1.4s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-name: star_pulse;
  -moz-animation-duration: 1.4s;
  -moz-animation-iteration-count: infinite;
  -o-animation-name: star_pulse;
  -o-animation-duration: 1.4s;
  -o-animation-iteration-count: infinite;
}
@keyframes star_pulse {
	0% {transform: scale(.95);}
	11.11% {transform: scale(1);}
	22.22% {transform: scale(1.05);}
	33.33% {transform: scale(1.1);}
	44.44% {transform: scale(1.15);}
	55.55% {transform: scale(1.1);}
	66.66% {transform: scale(1.05);}
	77.77% {transform: scale(1);}
	88.88% {transform: scale(.95);}
	99.99% {transform: scale(.9);}
	100% {transform: scale(.95;}
}
@-moz-keyframes star_pulse {
	0% {transform: scale(.95);}
	11.11% {transform: scale(1);}
	22.22% {transform: scale(1.05);}
	33.33% {transform: scale(1.1);}
	44.44% {transform: scale(1.15);}
	55.55% {transform: scale(1.1);}
	66.66% {transform: scale(1.05);}
	77.77% {transform: scale(1);}
	88.88% {transform: scale(.95);}
	99.99% {transform: scale(.9);}
	100% {transform: scale(.95;}
}
@-webkit-keyframes star_pulse {
	0% {transform: scale(.95);}
	11.11% {transform: scale(1);}
	22.22% {transform: scale(1.05);}
	33.33% {transform: scale(1.1);}
	44.44% {transform: scale(1.15);}
	55.55% {transform: scale(1.1);}
	66.66% {transform: scale(1.05);}
	77.77% {transform: scale(1);}
	88.88% {transform: scale(.95);}
	99.99% {transform: scale(.9);}
	100% {transform: scale(.95;}
}
@-o-keyframes star_pulse {
	0% {transform: scale(.95);}
	11.11% {transform: scale(1);}
	22.22% {transform: scale(1.05);}
	33.33% {transform: scale(1.1);}
	44.44% {transform: scale(1.15);}
	55.55% {transform: scale(1.1);}
	66.66% {transform: scale(1.05);}
	77.77% {transform: scale(1);}
	88.88% {transform: scale(.95);}
	99.99% {transform: scale(.9);}
	100% {transform: scale(.95;}
}