html {
  -webkit-font-smoothing:      subpixel-antialiased;
  -webkit-text-size-adjust:    100%;
  -webkit-touch-callout:       none;
  -webkit-user-select:         none;
  -khtml-user-select:          none;
  -moz-user-select:            none;
  -ms-user-select:             none;
  user-select:                 none;
  webkit-tap-highlight-color:  rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
  -webkit-backface-visibility: hidden;
}
html,
body {
  width:  100%;
  height: 100%;
  overflow:   hidden !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}
body {
  background-color: #000;
  font-family: 'Play Bold', Verdana, Arial, Helvetica, sans-serif;
  font-weight: normal;
  font-size: 14px;
  text-align: center;
}


/* Fonts ---------------------------------------------------------------------------------------- */

@font-face {
  font-family: 'FontAwesome';
  src: url('fonts/fontawesome/fontawesome-webfont.eot?v=4.6.3');
  src: url('fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.6.3')             format('embedded-opentype'),
       url('fonts/fontawesome/fontawesome-webfont.woff2?v=4.6.3')                  format('woff2'),
       url('fonts/fontawesome/fontawesome-webfont.woff?v=4.6.3')                   format('woff'),
       url('fonts/fontawesome/fontawesome-webfont.ttf?v=4.6.3')                    format('truetype'),
       url('fonts/fontawesome/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Play Bold';
  src: url('fonts/play/bold/Play-bold.eot');
  src: url('fonts/play/bold/Play-bold.eot?#iefix') format('embedded-opentype'),
       url('fonts/play/bold/Play-bold.woff2')      format('woff2'),
       url('fonts/play/bold/Play-bold.woff')       format('woff'),
       url('fonts/play/bold/Play-bold.ttf')        format('truetype'),
       url('fonts/play/bold/Play-bold.svg#Play')   format('svg');
  font-weight: normal;
  font-style: normal;
}


/* General -------------------------------------------------------------------------------------- */

* {
  padding: 0;
  border: 0;
  margin: 0;
}

a {
  cursor: pointer;
}

strong {
  font-weight: 700;
}

table {
  border-collapse: collapse;
}
table th,
table td {
  font-weight: normal;
  text-align: center;
}


/* Screens -------------------------------------------------------------------------------------- */

#screens_container {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}


/* Screen --------------------------------------------------------------------------------------- */

.screen {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
.screen.header {
  padding-top: 42px;
}
.screen.footer {
  padding-bottom: 66px;
}

.screen.shake {
  -webkit-animation: shake 0.5s linear;
  -moz-animation:    shake 0.5s linear;
  -ms-animation:     shake 0.5s linear;
  animation:         shake 0.5s linear;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

@keyframes shake {
    0% { transform: translate(2px,   1px) rotate(0deg);  }
   10% { transform: translate(-1px, -2px) rotate(-1deg); }
   20% { transform: translate(-3px,  0px) rotate(1deg);  }
   30% { transform: translate(0px,   2px) rotate(0deg);  }
   40% { transform: translate(1px,  -1px) rotate(1deg);  }
   50% { transform: translate(-1px,  2px) rotate(-1deg); }
   60% { transform: translate(-3px,  1px) rotate(0deg);  }
   70% { transform: translate(2px,   1px) rotate(-1deg); }
   80% { transform: translate(-1px, -1px) rotate(1deg);  }
   90% { transform: translate(2px,   2px) rotate(0deg);  }
  100% { transform: translate(1px,  -2px) rotate(-1deg); }
}

.screen_content_container1 {
  width: 100%;
  height: 100%;
  display: table;
}
.screen_content_container2 {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.screen_content {
  display: inline-block;
  position: relative;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.65);
  text-transform: uppercase;
  color: #fff;
  padding: 20px;
  border: 2px solid #fa0;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  -webkit-box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow:    0 0 4px 2px rgba(0, 0, 0, 0.25);
  box-shadow:         0 0 4px 2px rgba(0, 0, 0, 0.25);
  margin: 0 auto 0 auto;
}

/* Screen header */
.screen_header {
  width: 100%;
  height: 42px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.65);
  font-weight: normal;
  text-shadow: 1px 1px #000;
  text-transform: uppercase;
  line-height: 40px;
  color: #fff;
  padding: 0 5px 0 5px;
  border-bottom: 2px solid;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
.screen_header.language_switch {
  padding-right: 50px;
}
#screen_language .screen_header.language_switch {
  padding-right: 5px;
}
.screen_header.player1 {
  background-color: rgba(0, 0, 0, 0.65);
  text-shadow: 1px 1px #000;
  color: #fff;
  border-bottom-color: #fff;
}
.screen_header.player2 {
  background-color: rgba(255, 255, 255, 0.65);
  text-shadow: 1px 1px #fff;
  color: #000;
  border-bottom-color: #000;
}

/* Screen footer */
.screen_footer {
  width: 100%;
  height: 66px;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.65);
  border-top: 2px solid #fff;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
.screen_footer_container1 {
  width: 100%;
  height: 64px;
  display: table;
}
.screen_footer_container2 {
  width: 100%;
  height: 64px;
  display: table-cell;
  vertical-align: middle;
}
.screen_footer p {
  line-height: 20px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  color: #fff;
}

/* Short message */
.short_message {
  width: 100%;
  height: auto;
  position: absolute;
  left: 0;
  z-index: 30;
  left: 0;
  display: block;
  font-weight: normal;
  text-transform: uppercase;
  line-height: 20px;
  padding: 10px;
  border-top: 2px solid;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  -webkit-transition: bottom 0.3s ease 0s;
  -moz-transition:    bottom 0.3s ease 0s;
  -o-transition:      bottom 0.3s ease 0s;
  transition:         bottom 0.3s ease 0s;
}
.short_message.show {
  bottom: 0 !important;
}
.short_message.player1,
.short_message.player2 {
  background-color: #fff;
  color: #000;
  border-top-color: #000;
}

/* Screen overlay */
.screen_overlay_container1 {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -100%;
  left: 0;
  z-index: 20;
  display: block;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  -webkit-transition: top 0.3s ease 0s;
  -moz-transition:    top 0.3s ease 0s;
  -o-transition:      top 0.3s ease 0s;
  transition:         top 0.3s ease 0s;
  /* prevent flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
.screen_overlay_container1.hide {
  top: -100%;
}
.screen_overlay_container1.show {
  top: 0;
}
.screen_overlay_container2 {
  width: 100%;
  height: 100%;
  display: table;
}
.screen_overlay_container3 {
  width: 100%;
  height: 100%;
  display: table-cell;
  vertical-align: middle;
}
.screen_overlay {
  max-width: 90%;
  display: inline-block;
  position: relative;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.65);
  text-transform: uppercase;
  color: #fff;
  padding: 25px;
  border: 2px solid #fa0;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  -webkit-box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow:    0 0 4px 2px rgba(0, 0, 0, 0.25);
  box-shadow:         0 0 4px 2px rgba(0, 0, 0, 0.25);
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

@media all and (max-height:250px) {
  .screen_overlay {
    padding: 15px !important;
  }
  .message_icon {
    display: none !important;
  }
}


/* Language indicator --------------------------------------------------------------------------- */

.language_indicator {
  width: 50px;
  height: 40px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 15;
  display: block;
  font-size: 0;
  line-height: 0;
}
.language_indicator:before {
  width: 27px;
  height: 20px;
  position: absolute;
  top: 10px;
  left: 5px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  content: ' ';
  box-shadow: 1px 1px #000;
}
.language_indicator.reverse:before {
  background-color: #000;
  box-shadow: 1px 1px #fff;
}
.language_indicator:after {
  position: absolute;
  top: 0;
  right: 5px;
  font-family: 'FontAwesome';
  font-weight: normal;
  font-size: 14px;
  line-height: 40px;
  text-shadow: 1px 1px #000;
  color: #fff;
  content: '\f107';
}
.language_indicator.reverse:after {
  text-shadow: 1px 1px #fff;
  color: #000;
}
.no-touchevents .language_indicator:hover:after,
                .language_indicator:active:after,
.no-touchevents .language_indicator:focus:after {
  color: #fa0;
}

.language_indicator.en:before { background-image: url('images/flags/en.svg'); }
.language_indicator.de:before { background-image: url('images/flags/de.svg'); }
.language_indicator.fr:before { background-image: url('images/flags/fr.svg'); }
.language_indicator.nl:before { background-image: url('images/flags/nl.svg'); }
.language_indicator.es:before { background-image: url('images/flags/es.svg'); }
.language_indicator.pt:before { background-image: url('images/flags/pt.svg'); }
.language_indicator.pl:before { background-image: url('images/flags/pl.svg'); }
.language_indicator.tr:before { background-image: url('images/flags/tr.svg'); }
.language_indicator.ru:before { background-image: url('images/flags/ru.svg'); }


/* Message -------------------------------------------------------------------------------------- */

.message {
  display: none;
}

.message_icon {
  width: 75px;
  height: 75px;
  display: block;
  background-image: url('images/icon.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  font-size: 0;
  line-height: 0;
  margin: 0 auto 20px auto;
}
.boatbattles .message_icon {
  background-image: url('images/icon_boatbattles.svg');
}
.message_icon:before {
  content: ' ';
}

.message p {
  font-weight: normal;
  line-height: 20px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
}

#message_pause p {
  -webkit-animation: blinker 1s linear infinite;
  -moz-animation:    blinker 1s linear infinite;
  -ms-animation:     blinker 1s linear infinite;
  animation:         blinker 1s linear infinite;
  /* prevent text flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}

@keyframes blinker {
  0% {
    text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 1);
  }
  50% {
    text-shadow: 1px 1px rgba(0, 0, 0, 0);
    color: rgba(255, 255, 255, 0);
  }
  100% {
    text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
    color: rgba(255, 255, 255, 1);
  }
}

.message .table_container {
  margin: 20px 0 0 0;
}
.message table {
  line-height: 20px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  text-transform: uppercase;
  margin: 0;
}
.message table th,
.message table td {
  text-align: center;
  padding: 2px 10px 3px 10px;
  border-top:    1px solid #999;
  border-bottom: 1px solid #999;
}
.message table th.first,
.message table td.first {
  padding-left: 0;
}
.message table th.last,
.message table td.last {
  padding-right: 0;
}
.message table th {
  text-align: left;
}

.message .buttons {
  font-size: 0;
  line-height: 0;
  padding: 20px 0 0 0;
}
.message a.button {
  display: inline-block;
  margin: 0 10px 0 10px;
}

#message_over {
  display: block;
}


/* Button --------------------------------------------------------------------------------------- */

a.button {
  width: 50px;
  height: 50px;
  display: block;
  background-color: #444;
  background-image: linear-gradient(
    to bottom,
    #444, #222
  );
  font-family: 'FontAwesome';
  font-weight: normal;
  font-size: 25px;
  line-height: 50px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
  text-align: center;
  color: #fff;
  border: 2px solid #fff;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  -webkit-box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow:    0 0 4px 2px rgba(0, 0, 0, 0.25);
  box-shadow:         0 0 4px 2px rgba(0, 0, 0, 0.25);
}
a.button.large {
  width: 75px;
  height: 75px;
  font-size: 38px;
  line-height: 75px;
}
a.button.mute {
  color: #f00;
  border-color: #f00 !important;
}
.no-touchevents a.button:hover,
                a.button:active,
.no-touchevents a.button:focus {
  background-color: #222;
  background-image: linear-gradient(
    to bottom,
    #222, #444
  );
  color: #fa0;
  border-color: #fa0 !important;
}
.no-touchevents a.button.mute:hover,
                a.button.mute:active,
.no-touchevents a.button.mute:focus {
  color: #f00;
  border-color: #f00 !important;
}

                a.button.disabled,
.no-touchevents a.button.disabled:hover,
                a.button.disabled:active,
.no-touchevents a.button.disabled:focus {
  background-color: #444;
  background-image: linear-gradient(
    to bottom,
    #444, #222
  );
  color: #666;
  cursor: auto;
  border-color: #666 !important;
}


/* Screen splash -------------------------------------------------------------------------------- */

#screen_splash {
  background: -webkit-gradient(radial, center center, 0, center center, 460, from(#304896), to(#000));
  background: -webkit-radial-gradient(circle, #304896, #000);
  background: -moz-radial-gradient(circle,    #304896, #000);
  background: -ms-radial-gradient(circle,     #304896, #000);
  cursor: pointer;
}

#logo_splash {
  width: 60%;
  height: 60%;
  position: absolute;
  top: 20%;
  left: 20%;
  display: none;
  background-image: url('images/logo_splash.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 1;
}
#logo_splash.animation {
  -webkit-animation: logo_splash_pop_in 1s linear;
  -moz-animation:    logo_splash_pop_in 1s linear;
  -ms-animation:     logo_splash_pop_in 1s linear;
  animation:         logo_splash_pop_in 1s linear;
}

@keyframes logo_splash_pop_in {
  0% {
    width: 50%;
    height: 50%;
    top: 25%;
    left: 25%;
    opacity: 0;
  }
  100% {
    width: 60%;
    height: 60%;
    top: 20%;
    left: 20%;
    opacity: 1;
  }
}


/* Screen loading ------------------------------------------------------------------------------- */

#screen_loading {
  background-color: #75cbec;
  background-image: url('images/backgrounds/clouds.svg');
}

#screen_loading .screen_content {
  padding-top: 25px;
  border-color: #fff;
}

/* Logo */
#loading_logo {
  width: 75px;
  height: 75px;
  display: block;
  background-image: url('images/icon.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  font-size: 0;
  line-height: 0;
  margin: 0 auto 20px auto;
}
.boatbattles #loading_logo {
  background-image: url('images/icon_boatbattles.svg');
}

@media all and (max-height:250px) {
  #loading_logo {
    display: none !important;
  }
}

/* Loading indicator */
#loading_indicator_container {
  width: 200px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  overflow: hidden;
  border: 2px solid #fff;
  margin: 0 auto 10px auto;
  -webkit-border-radius: 15px;
  -moz-border-radius:    15px;
  border-radius:         15px;
}
#loading_indicator {
  height: 15px;
  background-color: #fa0;
  background-image: linear-gradient(
    to bottom,
    #fa0, #ef7b1c
  );
}

#loading_perc {
  line-height: 20px;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.5);
}


/* Screen home ---------------------------------------------------------------------------------- */

#screen_home {
  background-color: #95d6f6;
  background-image: url('images/backgrounds/sea.svg');
}

/* Boats */
#boats,
#boats_over {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#screen_over.loser #boats_over {
  display: none;
}

#boat1,
#boat2,
#boat_over1,
#boat_over2 {
  width: 30%;
  height: 30%;
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  font-size: 0;
  line-height: 0;
  /* prevent text flicker */
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
}
#boat1,
#boat_over1 {
  top: 35%;
  left: -30%;
  background-image: url('images/ship.svg');
  -webkit-animation: left_to_right 10s linear infinite;
  -moz-animation:    left_to_right 10s linear infinite;
  -ms-animation:     left_to_right 10s linear infinite;
  animation:         left_to_right 10s linear infinite;
}
#boat2,
#boat_over2 {
  top: 40%;
  right: 130%;
  background-image: url('images/ship2.svg');
  -webkit-animation: right_to_left 15s linear infinite;
  -moz-animation:    right_to_left 15s linear infinite;
  -ms-animation:     right_to_left 15s linear infinite;
  animation:         right_to_left 15s linear infinite;
}

@keyframes left_to_right {
  0% {
    left: -30%;
  }
  50% {
    left: 50%;
  }
  100% {
    left: 130%;
  }
}

@keyframes right_to_left {
  0% {
    right: -30%;
  }
  50% {
    right: 50%;
  }
  100% {
    right: 130%;
  }
}

/* Logo */
#logo {
  width: 80%;
  height: 30%;
  position: absolute;
  top: -30%;
  left: 10%;
  background-image: url('images/logo.svg');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  -webkit-transition: top 1s ease 0s;
  -moz-transition:    top 1s ease 0s;
  -o-transition:      top 1s ease 0s;
  transition:         top 1s ease 0s;
}
.boatbattles #logo {
  background-image: url('images/logo_boatbattles.svg');
}
#logo.show {
  top: 5%;
}

/* Start button, mute button & mute SFX button */
a#start_button,
a#mute_button,
a#mute_sfx_button {
  height: 15%;
  display: block;
  position: absolute;
  top: 45%;
  z-index: 10;
  background-image: linear-gradient(
    to bottom,
    rgba(68, 68, 68, 0.8), rgba(34, 34, 34, 0.8)
  );
  border: 2px solid #fff;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
  -webkit-box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);
  -moz-box-shadow:    0 0 4px 2px rgba(0, 0, 0, 0.25);
  box-shadow:         0 0 4px 2px rgba(0, 0, 0, 0.25);
}
.no-touchevents a#start_button:hover,
                a#start_button:active,
.no-touchevents a#start_button:focus,
.no-touchevents a#mute_button:hover,
                a#mute_button:active,
.no-touchevents a#mute_button:focus,
.no-touchevents a#mute_sfx_button:hover,
                a#mute_sfx_button:active,
.no-touchevents a#mute_sfx_button:focus {
  background-image: linear-gradient(
    to bottom,
    rgba(34, 34, 34, 0.8), rgba(68, 68, 68, 0.8)
  );
  border-color: #fa0;
}
a#start_button {
  animation-name: pulse;
  animation-duration: 3000ms;
  transform-origin: 70% 70%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
a#mute_button,
a#mute_sfx_button {
  height: 10%;
  top: 65%;
}
a#mute_button.mute,
a#mute_sfx_button.mute {
  border-color: #f00 !important;
}

/* width < 500px */
a#start_button {
  width: 30%;
  left: 35%;
}
a#mute_button,
a#mute_sfx_button {
  width: 20%;
}
a#mute_button {
  left: 25%;
}
a#mute_sfx_button {
  right: 25%;
}

@media all and (orientation:portrait) {
  a#start_button {
    width: 40%;
    left: 30%;
  }
}

/* width > 500px */
@media all and (orientation:landscape) and (min-width:500px) {
  a#start_button {
    width: 20%;
    left: 40%;
  }
  a#mute_button,
  a#mute_sfx_button {
    width: 15%;
  }
  a#mute_button {
    left: 30%;
  }
  a#mute_sfx_button {
    right: 30%;
  }
}

@media all and (orientation:portrait) and (min-width:500px) {
  a#start_button {
    width: 20%;
    left: 40%;
  }
  a#mute_button,
  a#mute_sfx_button {
    width: 15%;
  }
  a#mute_button {
    left: 30%;
  }
  a#mute_sfx_button {
    right: 30%;
  }
}

/* width > 1000px */
@media all and (orientation:landscape) and (min-width:1000px) {
  a#start_button {
    width: 15%;
    left: 42.5%;
  }
  a#mute_button,
  a#mute_sfx_button {
    width: 10%;
  }
  a#mute_button {
    left: 37.5%;
  }
  a#mute_sfx_button {
    right: 37.5%;
  }
}

@media all and (orientation:portrait) and (min-width:1000px) {
  a#start_button {
    width: 17.5%;
    left: 41.25%;
  }
  a#mute_button,
  a#mute_sfx_button {
    width: 10%;
  }
  a#mute_button {
    left: 35%;
  }
  a#mute_sfx_button {
    right: 35%;
  }
}

a#start_button    span,
a#mute_button     span,
a#mute_sfx_button span {
  width: 100%;
  height: 100%;
  display: block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
a#start_button span {
  background-image: url('images/start.svg');
}
a#mute_button span {
  background-image: url('images/mute.svg');
}
a#mute_button.mute span {
  background-image: url('images/mute3.svg') !important;
}
a#mute_sfx_button span {
  background-image: url('images/sound.svg');
}
a#mute_sfx_button.mute span {
  background-image: url('images/sound3.svg') !important;
}
.no-touchevents a#start_button:hover  span,
                a#start_button:active span,
.no-touchevents a#start_button:focus  span {
  background-image: url('images/start2.svg');
}
.no-touchevents a#mute_button:hover  span,
                a#mute_button:active span,
.no-touchevents a#mute_button:focus  span {
  background-image: url('images/mute2.svg');
}
.no-touchevents a#mute_sfx_button:hover  span,
                a#mute_sfx_button:active span,
.no-touchevents a#mute_sfx_button:focus  span {
  background-image: url('images/sound2.svg');
}

@keyframes pulse {
    0% { transform: scale(1.0); }
   25% { transform: scale(1.1); }
   50% { transform: scale(1.0); }
   75% { transform: scale(1.1); }
  100% { transform: scale(1.0); }
}

/* Publisher */
#publisher {
  width: 80%;
  height: 10%;
  position: absolute;
  bottom: 5%;
  left: 10%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  cursor: pointer;
}


/* Screen mode ---------------------------------------------------------------------------------- */

#screen_mode {
  background-color: #13558f;
  background-image: url('images/backgrounds/storm.svg');
}

#screen_mode .screen_content {
  padding: 30px;
  border-color: #7497b9;
}

/* Buttons */
#screen_mode .buttons_container {
  font-size: 0;
  line-height: 0;
}

#button_computer {
  display: inline-block;
  margin: 0 15px 0 0;
}
#button_computer:before {
  content: '\f108';
}

#button_human {
  display: inline-block;
  margin: 0 0 0 15px;
}
#button_human:before {
  content: '\f007';
}

#button_back_home {
  position: absolute;
  top: 5px;
  left: 5px;
}
#button_back_home:before {
  content: '\f060';
}


/* Screen language ------------------------------------------------------------------------------ */

#screen_language {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 999;
  background-color: #13558f;
  background-image: url('images/backgrounds/storm.svg');
}

#screen_language .screen_body {
  width: 100%;
  height: 100%;
  font-size: 0;
  line-height: 0;
}

a.language_button {
  width:  33.333333333333333%;
  height: 33.333333333333333%;
  display: inline-block;
}
a.language_button div.flag_container1 {
  width: 100%;
  height: 100%;
  display: table;
}
a.language_button div.flag_container2 {
  width: 100%;
  height: 100%;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
a.language_button span {
  width: 100%;
  height: 100%;
  max-width: 67px;
  max-height: 50px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  margin: 0 auto 0 auto;
}
@media all and (min-width:700px){
  a.language_button span {
    max-width: 133px;
    max-height: 100px;
  }
}
@media all and (min-height:700px){
  a.language_button span {
    max-width: 133px;
    max-height: 100px;
  }
}

     a#language_button_en span { background-image: url('images/flags/en.svg'); }
.svg a#language_button_en span { background-image: url('images/flags/en.svg'); }

     a#language_button_de span { background-image: url('images/flags/de.svg'); }
.svg a#language_button_de span { background-image: url('images/flags/de.svg'); }

     a#language_button_fr span { background-image: url('images/flags/fr.svg'); }
.svg a#language_button_fr span { background-image: url('images/flags/fr.svg'); }

     a#language_button_nl span { background-image: url('images/flags/nl.svg'); }
.svg a#language_button_nl span { background-image: url('images/flags/nl.svg'); }

     a#language_button_es span { background-image: url('images/flags/es.svg'); }
.svg a#language_button_es span { background-image: url('images/flags/es.svg'); }

     a#language_button_pt span { background-image: url('images/flags/pt.svg'); }
.svg a#language_button_pt span { background-image: url('images/flags/pt.svg'); }

     a#language_button_pl span { background-image: url('images/flags/pl.svg'); }
.svg a#language_button_pl span { background-image: url('images/flags/pl.svg'); }

     a#language_button_tr span { background-image: url('images/flags/tr.svg'); }
.svg a#language_button_tr span { background-image: url('images/flags/tr.svg'); }

     a#language_button_ru span { background-image: url('images/flags/ru.svg'); }
.svg a#language_button_ru span { background-image: url('images/flags/ru.svg'); }

#button_return {
  position: absolute;
  top: 5px;
  left: 5px;
}
#button_return:before {
  content: '\f060';
}


/* Screen prepare ------------------------------------------------------------------------------- */

#screen_prepare {
  background-color: #0087c4;
  background-image: url('images/backgrounds/water.svg');
}

#screen_prepare .screen_body {
  width: 100%;
  font-size: 0;
  line-height: 0;
}

/* Board */
#board_prepare {
  display: inline-block;
  position: relative;
  border: 2px solid #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
#board_prepare .canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* Buttons */
#button_prev {
  position: absolute;
  top: 5px;
  left: 5px;
}
#button_prev:before {
  content: '\f060';
}

#button_next {
  position: absolute;
  top: 5px;
  right: 5px;
}
#button_next:before {
  content: '\f061';
}

#button_shuffle {
  position: absolute;
  top: 5px;
  right: 64px;
  line-height: 52px;
}
#button_shuffle:before {
  content: '\f074';
}

/* Screen footer */
#screen_prepare .screen_footer {
  padding: 0 123px 0 64px;
}

/* Messages */
#button_ships_on_board:before {
  content: '\f00c';
}
#button_ships_on_top:before {
  content: '\f00c';
}

#screen_prepare .screen_overlay {
  border-color: #999;
}


/* Screen play ---------------------------------------------------------------------------------- */

#screen_play {
  background-color: #0087c4;
  background-image: url('images/backgrounds/water.svg');
}

@media all and (orientation:portrait) {
  #screen_play.screen.footer {
    padding-bottom: 145px;
  }
}

#screen_play .screen_body {
  width: 100%;
  font-size: 0;
  line-height: 0;
  padding: 0 143px 0 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

@media all and (orientation:portrait) {
  #screen_play .screen_body {
    padding: 0;
  }
}

/* Board */
#board_play {
  display: inline-block;
  position: relative;
  cursor: pointer;
  border: 2px solid #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
#board_play .canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  cursor: pointer;
}

/* Fires */
.fires {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.fire {
  position: absolute;
}

.flames {
  width: 50%;
  height: 50%;
  position: relative;
  transform-origin: center bottom;
  margin: 20% 0 0 25%;
}
.flames.animated {
  animation-name: flicker;
  animation-duration: 3ms;
  animation-delay: 200ms;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  /* force hardware acceleration */
  transform: translate3d(0, 0, 0);
}

.flame {
  position: absolute;
  bottom: 0;
  transform: rotate(-45deg) scale(1.5, 1.5);
  border-bottom-right-radius: 50%;
  border-bottom-left-radius:  50%;
  border-top-left-radius:     50%;
}

.red {
  width:  83%;
  height: 83%;
  left:   8.5%;
  background-color: #ff4500;
}

.orange {
  width:  67%;
  height: 67%;
  left:   16.5%;
  background-color: #ffa500;
}

.yellow {
  width:  55%;
  height: 55%;
  left:   22.5%;
  background-color: #ffd700;
}

.white {
  width:  45%;
  height: 45%;
  left:   27.5%;
  background-color: #fff;
}

@keyframes flicker {
    0% { transform: rotate(-2deg);              }
   20% { transform: rotate(2deg);               }
   40% { transform: rotate(-2deg);              }
   60% { transform: rotate(2deg)  scaleY(1.08); }
   80% { transform: rotate(-4deg) scaleY(0.84); }
  100% { transform: rotate(2deg);               }
}

/* Side bar */
#side_bar_container {
  width: 143px;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  padding: 42px 0 66px 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
#side_bar {
  width: 100%;
  height: 100%;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}

@media all and (orientation:portrait) {
  #side_bar_container {
    width: 100%;
    height: 145px;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    padding: 0;
  }
  #side_bar {
    border-top: 2px solid #fff;
    border-left: 0;
  }
}

@media all and (orientation:landscape) and (max-height:443px) {
  #screen_play.footer {
    padding-bottom: 0;
  }
  #screen_play .screen_footer {
    display: none;
  }
  #side_bar_container {
    padding-bottom: 0;
  }
}

/* Stats */
#stats {
  width: 123px;
  height: 182px;
  position: absolute;
  top: 52px;
  left: 10px;
  z-index: 15;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  line-height: 20px;
  color: #fff;
  -webkit-border-radius: 13px;
  -moz-border-radius:    13px;
  border-radius:         13px;
}

@media all and (orientation:portrait) {
  #stats {
    width: 123px;
    height: 123px;
    top: 12px;
    left: 5px;
  }
}

#time {
  width: 109px;
  height: 50px;
  position: absolute;
  top: 64px;
  left: 5px;
  font-size: 18px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  border: 2px solid #999;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
}

@media all and (orientation:portrait) {
  #time {
    display: none;
  }
}

#points1,
#points2,
#hits,
#misses {
  width: 50px;
  height: 50px;
  display: block;
  position: absolute;
  font-size: 18px;
  line-height: 50px;
  text-align: center;
  border: 2px solid;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
}
#points1 {
  top: 5px;
  left: 5px;
  border-color: #fff;
  border-color: #999;
}
#points2 {
  top: 5px;
  right: 5px;
  border-color: #fff;
  border-color: #999;
}
#points1.active,
#points2.active {
  border-color: #fa0;
}
#hits {
  bottom: 5px;
  left: 5px;
  border-color: #0f0;
}
#misses {
  bottom: 5px;
  right: 5px;
  border-color: #f00;
}

@media all and (orientation:landscape) and (max-height:376px) {
  #stats {
    height: 64px;
    top: 47px;
  }
  #points1 {
    display: none;
  }
  #points2 {
    display: none;
  }
  #time {
    top: 5px;
  }
  #hits {
    display: none;
  }
  #misses {
    display: none;
  }
}

/* Buttons */
#buttons {
  width: 123px;
  height: 123px;
  position: absolute;
  top: 244px;
  left: 10px;
  z-index: 15;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 0;
  line-height: 0;
  -webkit-border-radius: 13px;
  -moz-border-radius:    13px;
  border-radius:         13px;
}

@media all and (orientation:landscape) and (max-height:376px) {
  #buttons {
    top: 116px;
  }
}

@media all and (orientation:portrait) {
  #buttons {
    top: 12px;
    left: auto;
    right: 5px;
  }
}

#buttons a.button {
  border-color: #999;
}

#button_music {
  position: absolute;
  top: 5px;
  left: 5px;
}
#button_music:before {
  content: '\f001';
}

#button_sound {
  position: absolute;
  top: 5px;
  right: 5px;
}
#button_sound:before {
  content: '\f028';
}

#button_play:before {
  content: '\f00c';
}

#button_start:before {
  content: '\f00c';
}

#button_pause {
  position: absolute;
  bottom: 5px;
  left: 5px;
  font-size: 20px;
}
#button_pause:before {
  content: '\f04c';
}

#button_resume:before {
  content: '\f00c';
}

#button_restart {
  position: absolute;
  bottom: 5px;
  right: 5px;
}
#button_restart:before {
  content: '\f0e2';
}

#button_yes:before {
  content: '\f00c';
}
#button_no:before {
  content: '\f00d';
}

/* Time bar */
#time_shots_bar_container {
  width: 100%;
  height: 123px;
  position: absolute;
  top: 12px;
  left: 0;
  z-index: 10;
  display: none;
  padding: 0 133px 0 133px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
}
#time_shots_bar {
  width: 100%;
  height: 123px;
  background-color: #000;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  -webkit-border-radius: 13px;
  -moz-border-radius:    13px;
  border-radius:         13px;
}
#time_bar {
  width: 100%;
  height: 54px;
  display: block;
  font-size: 18px;
  line-height: 50px;
  text-align: center;
  color: #fff;
  overflow: hidden;
  border: 2px solid #999;
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  -webkit-border-radius: 10px;
  -moz-border-radius:    10px;
  border-radius:         10px;
}

@media all and (orientation:portrait) and (min-width:370px) {
  #time_shots_bar_container {
    display: block;
  }
}

/* Shots */
#shots,
#shots_bar {
  font-size: 0;
  line-height: 0;
  padding: 17px 0 0 0;
  margin: 0 auto 0 auto;
}
#shots_bar {
  display: none;
}

@media all and (orientation:portrait) {
  #shots_bar {
    width: 100%;
    height: 54px;
    display: block;
    padding: 18px 0 0 0;
    overflow: hidden;
    border: 2px solid #999;
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
    -webkit-border-radius: 10px;
    -moz-border-radius:    10px;
    border-radius:         10px;
    margin: 5px 0 0 0;
  }
}

#shots     .shot,
#shots_bar .shot {
  width: 30px;
  height: 30px;
  display: inline-block;
  background-image: url('images/missile.svg');
  background-repeat: no-repeat;
  background-position: center center;
  margin: 0 10px 0 10px;
}

@media all and (orientation:portrait) {
  #shots_bar .shot {
    width: 15px;
    height: 15px;
    background-size: contain;
    margin: 0 1px 0 1px;
  }
}

#shots     .shot.fired,
#shots_bar .shot.fired {
  background-image: url('images/missile2.svg');
}

/* Screen footer */
@media all and (orientation:portrait) {
  #screen_play .screen_footer {
    display: none;
  }
}

#screen_play .screen_overlay {
  min-width: 50%;
  border-color: #999;
}


/* Screen over ---------------------------------------------------------------------------------- */

#screen_over.winner {
  background-color: #aadbe6;
  background-image: url('images/backgrounds/winner.svg');
}
#screen_over.winner .screen_content {
  border-color: #fff;
}

#screen_over.loser {
  background-color: #0a8cb4;
  background-image: url('images/backgrounds/loser.svg');
}
#screen_over.loser .screen_content {
  border-color: #fff;
}

#winner_text {
  font-weight: normal;
  color: #fa0;
}

/* Small buttons */
#button_board1:before,
#button_board2:before {
  content: '\f00a';
}

/* Large buttons */
#button_newgame:before {
  content: '\f0e2';
}
#button_home:before {
  content: '\f015';
}


/* Screen result -------------------------------------------------------------------------------- */

#screen_result {
  background-color: #0087c4;
  background-image: url('images/backgrounds/water.svg');
}

#screen_result .screen_body {
  width: 100%;
  font-size: 0;
  line-height: 0;
}

/* Board */
#board_result {
  display: inline-block;
  position: relative;
  border: 2px solid #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
#board_result .canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

/* Button */
#button_back {
  position: absolute;
  top: 5px;
  left: 5px;
}
#button_back:before {
  content: '\f060';
}


/* Loaded graphics ------------------------------------------------------------------------------ */

#loaded_graphics {
  display: none;
}


/* Ad overlay ----------------------------------------------------------------------------------- */

#ad_overlay {
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.75);
  cursor: pointer;
}