/* FONT ======================================================================*/
@font-face { font-family: 'Dosis'; font-style: normal; font-weight: 500; font-display: swap; src: local(''), url('assets/dosis-v17-latin-ext_latin-500.woff2') format('woff2'), url('assets/dosis-v17-latin-ext_latin-500.woff') format('woff'); }
@font-face { font-family: 'Dosis'; font-style: normal; font-weight: 800; font-display: swap; src: local(''), url('assets/dosis-v17-latin-ext_latin-800.woff2') format('woff2'), url('assets/dosis-v17-latin-ext_latin-800.woff') format('woff'); }

/* GENERAL ===================================================================*/
html { height: 100%; }
body { background: linear-gradient(180deg, rgba(248,245,164,1) 0%, rgba(133,250,224,1) 50%, rgba(76,175,255,1) 100%); background-size: cover; width: 100%; height: 100%; font-family: 'Dosis'; margin: 0; direction: ltr; overflow: hidden; }
a { text-decoration: none; }
* { user-select: none; -webkit-user-drag: none; }

/* svg */
.svg { fill: currentColor; fill-rule: evenodd; display: inline-block; }

/* Holder */
.game-holder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* Dialog */
.game-dialog > .dialog-back, .game-dialog > .dialog-cookies { display: none; }

/* Container */
.game-container { /*background: rgba(255,255,255,.5);*/ position: relative; }
.state-init .game-container { display: none; }

/* UI static */
.game-ui-static { width: 90%; position: absolute; left: 5%; z-index: 6; display: flex; }
.portrait .game-ui-static { top: 2.8%; }
.landscape .game-ui-static { top: 4%; }
.state-menu .game-ui-static { animation: default-entrance-top .4s ease-out both; }

.button-ui { transition: transform .2s cubic-bezier(0.68, -0.6, 0.32, 1.6); overflow: hidden; }
.button-ui > img { display: inline-block; pointer-events: none; float: left; }
.button-ui > .bg { width: 100%; position: relative; z-index: 1; }
.button-ui.hover { transform: scale(1.2); }

.game-ui-static > .button-ui { position: absolute; top: 0; display: none; }
.portrait .game-ui-static > div { width: 15%; }
.landscape .game-ui-static > div { width: 7%; }
.game-ui-static > div > img { display: inline-block; pointer-events: none; float: left; }
.game-ui-static > div > .bg { width: 100%; position: relative; z-index: 1; }
.game-ui-static > div > .ico { width: 50%; position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.game-ui-static > div > .off { transform: translate(0, 150%); }
.game-ui-static > div.sound-off > .on { transform: translate(0, 150%); }
.game-ui-static > div.sound-off > .off { transform: translate(-50%, -50%); }


.game-ui-static .button-sound { right: 0; }
.state-menu .button-sound, .state-game .button-sound, .state-score .button-sound { display: inline-block; }
.game-ui-static .button-back { left: 0; }
.state-game .button-back { display: inline-block; }

/* Preloader */
.game-preloader { width: 100%; height: 100%; display: none; flex-flow: column wrap; }
.state-preloader .game-preloader { display: flex; }

/* Preloader logo */
.preloader-logo { width: 100%; height: 70%; display: flex; align-items: center; justify-content: center; transition: height .3s; pointer-events: none; }
.loaded .preloader-logo { height: 60%; }
.preloader-logo > img { animation: default-entrance-top .5s ease-out both; }
.portrait .preloader-logo > img { width: 46%; margin-top: 20%; }
.landscape .preloader-logo > img { width: 23%; margin-top: 10%; }

/* Preloader start */
.preloader-start { width: 100%; height: 30%; display: flex; align-items: start; justify-content: center; transition: height .3s; }
.loaded .preloader-start { height: 40%; }

/* Preloader wait */
.portrait .preloader-wait { width: 22%; }
.landscape .preloader-wait { width: 11%; }
.preloader-wait > img { width: 100%; }
.loaded .preloader-wait { display: none; }

/* Preloader button */

.preloader-button { display: none; pointer-events: none; }
.portrait .preloader-button { width: 23%; }
.landscape .preloader-button { width: 12%; margin-top: 5%; }
.loaded .preloader-button { display: flex; animation: default-entrance-bottom .5s ease-out both; pointer-events: auto; }
.preloader-button > button { background: #ffffff; width: 100%; position: relative; border: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 5px 0 rgba(0, 0, 0, .1); transition: transform .2s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.preloader-button > button:after { content: ''; padding-bottom: 100%; display: block; }
.preloader-button > button > img { width: 45%; fill: #54D252; margin-right: -2px; filter: drop-shadow( 0 4px 0 rgba(0, 0, 0, .1)); display: inline-block; pointer-events: none; transition: transform .3s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.preloader-button > button.hover { transform: scale(1.2); }
.preloader-button > button.hover > img { transform: scale(1.1); }


/* Header UI */
.game-ui-header { display: none; }
.portrait .game-ui-header { width: 90%; margin-top: 22%; }
.landscape .game-ui-header { width: 70%; margin-top: 2.8%; }
.state-game .game-ui-header { display: flex; flex-flow: column wrap; animation: default-entrance-top .7s ease both; }
.game-question { background: #ffffff; width: 100%; padding-bottom: 2px; color: #205279; text-align: center; text-transform: uppercase; font-weight: 800; display: flex; align-items: center; justify-content: center; border-radius: 10px; box-shadow: 0 6px 0 rgba(0, 0, 0, .1); }
.portrait .game-question { height: 7vh; font-size: 3.8vh; }
.landscape .game-question { height: 9vh; font-size: 4vh; }
.game-timer { background: #a5c797; width: 99%; height: 1.2vh; margin-top: 20px; border: 3px solid #badda6; border-radius: 10px; overflow: hidden; position: relative; }
.timer { background: #fff64f; width: 100%; height: 100%; position: absolute; }
.fired { animation: timer 6s linear both; }

/* Game default container / after preloader */
.game-default { display: none; flex-flow: column wrap; align-items: center; justify-content: center; }
.state-menu .game-default, .state-game .game-default, .state-score .game-default { display: flex; }

/* Game title */
.game-title { width: 100%; margin-top: -4%; display: none; transition: height .2s; position: absolute; top: 0; left: 0; pointer-events: none; }
.state-menu .game-title { display: flex; justify-content: center; align-items: center; animation: default-entrance-top .3s ease-out both; }
.portrait .game-title > img { width: 82%; margin-top: 12%; }
.landscape .game-title > img { width: 38%; margin-top: 6%; }

/* Game menu */
.game-menu { width: 100%; display: none; position: absolute; bottom: 0; left: 0; }
.state-menu .game-menu { height: 26%; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; animation: default-entrance-bottom .3s ease-out both; }
.portrait .game-menu > .button-ui { width: 56%; }
.landscape .game-menu > .button-ui { width: 26%; }
.game-menu > .menu-score { margin-top: 2%; font-size: 2.7vh; color: #fff; }

/* Bottom UI */
.game-ui-bottom { width: 100%; height: 17%; align-items: center; justify-content: center; display: none; position: absolute; bottom: 0; left: 0; }
.state-game .game-ui-bottom { display: flex; }
.game-ui-bottom > div { position: relative; overflow: hidden; }
.game-ui-bottom > div > .bg { width: 100%; position: relative; z-index: 1; }
.game-ui-bottom > div > .value { width: 100%; height: 100%; font-weight: 800; display: flex; box-sizing: border-box; align-items: center; justify-content: center; position: absolute; top: 0; left: 0; z-index: 2;  }
.portrait .game-ui-bottom > .game-answer { width: 14%; }
.landscape .game-ui-bottom > .game-answer { width: 7%; }
.game-ui-bottom > .game-answer > .value { color: #ffffff; font-size: 3.5vh; transform: translate(0, -5%); }
.game-ui-bottom > .ping { animation: pulse .3s ease-out both; }
.portrait .game-ui-bottom .game-current { margin: 0 4%; width: 30%; }
.landscape .game-ui-bottom .game-current { margin: 0 3%; width: 15%; }
.game-ui-bottom > .game-current > .value { color: #205279; font-size: 4vh; transform: translate(0, -7%); }

/* Score */
.game-score { width: 100%; height: 100%; flex-flow: column; align-items: center; position: absolute; top: 0; left: 0; display: none; }
.state-score .game-score { display: flex; }

/* Stars */
.score-stars { animation: default-entrance-top .3s ease-out both; }
.portrait .score-stars { width: 80%; margin-top: 15%; }
.landscape .score-stars { width: 35%; margin-top: 5%; }
.stars { width: 100%; display: none; }
.results-0 .stars-0 { display: block; }
.results-1 .stars-1 { display: block; }
.results-2 .stars-2 { display: block; }
.results-3 .stars-3 { display: block; }

/* Score results */
.score-results { position: relative; animation: pulse .3s ease both; }
.portrait .score-results { width: 55%; margin-top: 5%; }
.landscape .score-results { width: 26%; margin-top: 1%; }
.score-results > div { position: absolute; }
.record .results { transform: translate(0, -5%); }
.results { width: 100%; height: 100%; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; transform: translate(0, 0); transition: transform .3s cubic-bezier(0.68, -0.6, 0.32, 1.6); }
.results .results-label { color: #646464; font-size: 2.5vh; font-weight: 500; text-transform: uppercase; }
.results .results-value { color: #178BAE; font-size: 7vh; font-weight: 800; }
.score-results > .bg { width: 100%; }

/* Score record */
.score-results > .results-record { width: 60%; position: absolute; left: 50%; bottom: 20%; transform: translate(-50%, 10%); opacity: 0; transition: transform .5s cubic-bezier(0.68, -0.6, 0.32, 1.6), opacity .3s; }
.record .results-record { transform: translate(-50%, 0); opacity: 1; }
.results-record > .bg { width: 100%; }


/* Score menu */
.score-menu { width: 100%; height: 30%; display: flex; flex-flow: column wrap; align-items: center; justify-content: center; position: absolute; bottom: 0; left: 0; }
.state-score .score-menu { animation: default-entrance-bottom .3s ease-out both; }
.portrait .score-menu > .button-ui { width: 56%; margin-bottom: 3%; }
.landscape .score-menu > .button-ui { width: 26%; margin-bottom: 1%; }
.landscape .score-menu > .button-ui:after { content: ''; display: inline-block; clear: both; }


/* Map */
.game-content { width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; }
.state-menu .game-content, .state-game .game-content { display: block; }
.state-menu .game-content { pointer-events: none; }

.game-map { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; }

.map-container { display: none; transition: transform .5s; transform-origin: 50% 50%; }
.portrait .map-container { width: 90%; }
.landscape .map-container { width: 50%; } /* 42 w menu */
.state-menu .map-container, .state-game .map-container { display: inline-block; }

.state-menu .portrait .map-container { animation: map-entrance-portrait .4s ease-out both; }
.state-menu .landscape .map-container {  animation: map-entrance .4s ease-out both; }

.state-game .portrait .map-container { animation: map-entrance-game-portrait .4s ease-out both; }
.state-game .landscape .map-container { animation: map-entrance-game .4s ease-out both; }
/* map element */
.map-element { transition: transform .2s; transform-origin: center; }
.state-game .map-container:not(.map-results) .map-element.hover { fill: #a1e8ff; }
.state-game .map-container:not(.map-results) .map-element:active { transform: scale(.98); }
/* rezultaty */
.state-game .map-results .answer-good { fill: #88EA53; }
.state-game .map-results .answer-wrong { fill: #FB7B6F; }
/* szara mapa */
.map-results .map-element { fill: #EAEAEA; }


/* animsy */

@-webkit-keyframes pulse {
  0% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -10px, 0) scale(1.1); }
  100% { transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes timer {
  0% { width: 100%; }
  100% { width: 0%; }
}

@-webkit-keyframes default-entrance-top {
  0% { transform: translate3d(0, -10%, 0); }
  50% { transform: translate3d(0, 3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes default-entrance-bottom {
  0% { transform: translate3d(0, 10%, 0); }
  50% { transform: translate3d(0, -3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes map-entrance {
  0% { transform: scale(1) translate3d(0, 0, 0); }
  50% { transform: scale(0.65) translate3d(0, 6%, 0); }
  100% { transform: scale(0.7) translate3d(0, 6%, 0); }
}

@-webkit-keyframes map-entrance-portrait {
  0% { transform: scale(1.1) translate3d(0, 12%, 0); }
  50% { transform: scale(0.75) translate3d(0, 0%, 0); }
  100% { transform: scale(0.85) translate3d(0, 9%, 0); }
}

@-webkit-keyframes map-entrance-game {
  0% { transform: scale(.85) translate3d(0, 6%, 0); }
  50% { transform: scale(1.1) translate3d(0, 4%, 0); }
  100% { transform: scale(1) translate3d(0, 4%, 0); }
}

@-webkit-keyframes map-entrance-game-portrait {
  0% { transform: scale(.85) translate3d(0, 6%, 0); }
  50% { transform: scale(1.1) translate3d(0, 13%, 0); }
  100% { transform: scale(1) translate3d(0, 13%, 0); }
}