/* reset */
html{margin:0; padding:0; background: #ddd;}
body{margin:0; padding:0; font:normal 12px arial, sans-serif; color:#333;}
html, body {
    height: 100%;          /* Ensures full height coverage */
    overflow: hidden;      /* Prevents body overscroll/bounce */
    position: fixed;       /* Locks the body in place */
    width: 100%;           /* Ensures full width coverage */
    -webkit-overflow-scrolling: touch;  /* Improves touch scrolling feel on iOS */
}
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: 316px; position: relative;}
h1{font: normal 35px VanillaRegular,Arial,sans-serif; text-align: center; margin: 10px 0 5px 0; color: #555;}
#zone_score{font: bold 16px 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(images/icones/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: 0 0, 0 0; background-image: url(images/icones/sprite.png), url(images/picto/fire.gif); background-size: 800% 100%, 100% 100%;}
.icone_2.fire{background-position: 14.29% 0, 0 0; background-image: url(images/icones/sprite.png), url(images/picto/fire.gif); background-size: 800% 100%, 100% 100%;}
.icone_3.fire{background-position: 28.57% 0, 0 0; background-image: url(images/icones/sprite.png), url(images/picto/fire.gif); background-size: 800% 100%, 100% 100%;}
.icone_4.fire{background-position: 42.86% 0, 0 0; background-image: url(images/icones/sprite.png), url(images/picto/fire.gif); background-size: 800% 100%, 100% 100%;}
.icone_5.fire{background-position: 57.14% 0, 0 0; background-image: url(images/icones/sprite.png), url(images/picto/fire.gif); background-size: 800% 100%, 100% 100%;}
.icone_6.fire{background-position: 71.43% 0, 0 0; background-image: url(images/icones/sprite.png), url(images/picto/fire.gif); background-size: 800% 100%, 100% 100%;}
.icone_7.fire{background-position: 85.71% 0, 0 0; background-image: url(images/icones/sprite.png), url(images/picto/fire.gif); background-size: 800% 100%, 100% 100%;}
.icone_8.fire{background-position: 100% 0, 0 0; background-image: url(images/icones/sprite.png), url(images/picto/fire.gif); background-size: 800% 100%, 100% 100%;}


.icone_1.star{background-position: 0 0, 0 0; background-image: url(images/icones/sprite.png), url(images/picto/star.gif); background-size: 800% 100%, 100% 100%;}
.icone_2.star{background-position: 14.29% 0, 0 0; background-image: url(images/icones/sprite.png), url(images/picto/star.gif); background-size: 800% 100%, 100% 100%;}
.icone_3.star{background-position: 28.57% 0, 0 0; background-image: url(images/icones/sprite.png), url(images/picto/star.gif); background-size: 800% 100%, 100% 100%;}
.icone_4.star{background-position: 42.86% 0, 0 0; background-image: url(images/icones/sprite.png), url(images/picto/star.gif); background-size: 800% 100%, 100% 100%;}
.icone_5.star{background-position: 57.14% 0, 0 0; background-image: url(images/icones/sprite.png), url(images/picto/star.gif); background-size: 800% 100%, 100% 100%;}
.icone_6.star{background-position: 71.43% 0, 0 0; background-image: url(images/icones/sprite.png), url(images/picto/star.gif); background-size: 800% 100%, 100% 100%;}
.icone_7.star{background-position: 85.71% 0, 0 0; background-image: url(images/icones/sprite.png), url(images/picto/star.gif); background-size: 800% 100%, 100% 100%;}
.icone_8.star{background-position: 100% 0, 0 0; background-image: url(images/icones/sprite.png), url(images/picto/star.gif); background-size: 800% 100%, 100% 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(images/icones/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 #ff0000; }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 #ff0000; }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 #ff0000; }to {  box-shadow: inset 0 0 9px #ddd; }}

.icone.hint{border-radius: 10%;-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(images/anim/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: 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;}
}