* {
  box-sizing: border-box;
}
body,
html {
  height: 100%;
}
body,
div,
html,
main {
  margin: 0;
  padding: 0;
}
body {
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  user-select: none;
  background-color: #000;
  font-family: sans-serif;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.cover-img {
  background-image: url(cover.png),
    repeating-linear-gradient(45deg, #0000 20px, #0006 40px),
    repeating-linear-gradient(-45deg, #fff0 20px, #fff5 40px);
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  background-size: contain, 100%;
  background-color: #000;
  background-repeat: no-repeat, repeat;
  background-position: center, center;
}
main {
  display: grid;
  height: 100%;
  width: 100%;
  background-size: 50vmin;
}
button {
  cursor: pointer;
}
#tiles {
  background-color: #000;
  background-image: repeating-linear-gradient(45deg, #0000 20px, #0006 40px),
    repeating-linear-gradient(-45deg, #fff0 20px, #fff5 40px);
  position: relative;
  grid-area: tiles;
  display: flex;
  overflow: hidden;
}
#info {
  background-color: #000;
  grid-area: info;
  color: #ffebcd;
  font-size: 3vw;
  background-image: linear-gradient(#0003 0, #fff3 40%, #fff3 60%, #0003 100%);
}
#commands {
  background-color: #8b0000;
  background-image: repeating-linear-gradient(45deg, #0000 1px, #0006 2px),
    repeating-linear-gradient(-45deg, #fff0 1px, #fff5 2px);
  grid-area: commands;
  font-size: 2.7vw;
  box-shadow: inset 0 0 1em 1px #0009;
}
#languages {
  background-color: #8b0000;
  background-image: repeating-linear-gradient(45deg, #0000 1px, #0006 2px),
    repeating-linear-gradient(-45deg, #fff0 1px, #fff5 2px);
  grid-area: languages;
  font-size: 2.7vw;
}
#help {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  min-width: 100%;
  height: 100%;
  min-height: 100%;
  overflow-y: auto;
  padding: 1em;
  font-size: 8vmin;
  color: #fff;
  background-color: #000c;
}
#help h1 {
  text-align: center;
  font-size: 1.5em;
}
#help p {
  text-align: justify;
}
@media (min-aspect-ratio: 101/100) {
  main {
    grid-template-columns: 1fr 40vh;
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "tiles languages" "tiles info" "tiles commands";
  }
  #commands,
  #info {
    flex-direction: column;
  }
  #languages {
    font-size: 3vh;
    flex-wrap: wrap;
  }
  #languages .flag {
    margin: 2vh;
  }
  #commands {
    font-size: 4vh;
  }
  #commands .command-button {
    border-radius: 1em;
    margin: 1em 0;
  }
  #commands .command-button:first-child {
    margin-top: 0.25em;
  }
  #commands .command-button:last-child {
    margin-bottom: 0.25em;
  }
  #info {
    font-size: 3vh;
  }
  #info span {
    display: block;
    margin: 0;
  }
}
@media (max-aspect-ratio: 101/100) {
  main {
    grid-template-columns: auto;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "languages" "tiles" "info" "commands";
  }
  #languages {
    height: 4em;
  }
  #commands {
    font-size: 6vw;
    padding: 0.25em;
  }
  #info {
    font-size: 4vw;
  }
  .info span {
    display: inline-block;
  }
}
.bar {
  box-shadow: inset 0 0 1em 2px #0009;
  padding: 0.5em;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.invisible {
  display: block;
  color: #0000;
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  position: absolute;
  pointer-events: none;
}
.switch {
  position: relative;
  display: inline-block;
  width: 4em;
  height: 2em;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.slider,
.slider:before {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 2em;
  height: 2em;
  background-color: transparent;
  border-radius: 0.15em;
  background-image: var(--currentfg, url("front0.jpg"));
  background-position: -6em -6em;
  background-size: 8em 8em;
  box-shadow: inset -0.05em -0.05em 0.05em 1px #000e,
    inset 0.05em 0.05em 0.05em 1px #fffe;
}
.slider:before {
  content: "16";
  left: 2em;
  display: grid;
  align-items: center;
  justify-items: center;
  color: #fff;
  text-shadow: -0.05em -0.05em 0.05em #0003, 0.05em 0.05em 0.05em #000;
}
.slider:after {
  position: absolute;
  content: "";
  height: 2em;
  width: 2em;
  left: 0;
  bottom: 0;
  background-color: transparent;
  box-shadow: inset 0 0 0 0.2em #ed143ddd;
  transition-duration: 0.25s;
  transition-property: transform;
}
input:checked + .slider:after {
  transform: translateX(2em);
}
.command-button {
  border-radius: 1em;
  margin: 0.25em 0;
  padding: 0 0.5em;
  height: 2em;
  min-width: 2em;
  border: solid 0.1em #dc143c;
  background-color: #b8860b;
  color: wheat;
  font-size: inherit;
  font-weight: 700;
  box-shadow: 0 0 0.1em #000, inset 0 0 0.05em 0.05em #fff;
}
.info span {
  font-family: monospace;
  margin: 0 2em 0 0;
}
.info.record {
  color: #0c0;
}
.flag {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  margin: 0;
  border-radius: 0.1em;
  width: 3em;
  height: 2em;
  border: solid 1px #0009;
  transition-property: transform, box-shadow, margin, opacity;
  transition-duration: 0.3s, 0.3s, 0.3s, 0.3s;
  transition-timing-function: ease, ease, ease, ease;
  font-size: inherit;
  transform: scale(1) translateZ(0);
  transform-origin: center center;
  box-shadow: 0 0 0.1em #000, inset 0 0 0.05em 0.05em #fff;
  opacity: 0.8;
}
.flag.selected {
  opacity: 1;
  margin: 0 0.5em;
  box-shadow: 0 0 0.2em #000, inset 0 0 0.5em 0.1em #fff;
  transform: scale(1.5) translateZ(0);
}
.de {
  background-image: url(de.svg);
}
.es {
  background-image: url(es.svg);
}
.en {
  background-image: url(en.svg);
}
.fr {
  background-image: url(fr.svg);
}
.gr {
  background-image: url(gr.svg);
}
.it {
  background-image: url(it.svg);
}
.ru {
  background-image: url(ru.svg);
}
.arrow-btn {
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  background-image: linear-gradient(45deg, transparent 50%, #fffe 50%);
  filter: drop-shadow(0 0 0.5em #000) drop-shadow(0 0 0.1em #000);
  width: calc(var(--tilesetsize, 1600%) / 8 / 1.4);
  height: calc(var(--tilesetsize, 1600%) / 8 / 1.4);
  position: absolute;
  display: none;
}
.arrow-btn:focus,
.arrow-btn:hover {
  background-image: linear-gradient(45deg, transparent 50%, coral 50%);
  outline: 0;
}
.arrow-btn span {
  opacity: 0;
}
.veiled.disabled ~ .arrow-btn {
  display: block;
}
.arrow-btn.prev {
  left: 0;
  top: 50%;
  transform: translate3d(35%, -50%, 0) rotate(-135deg);
}
.arrow-btn.next {
  right: 0;
  top: 50%;
  transform: translate3d(-35%, -50%, 0) rotate(45deg);
}
.tileset.disabled,
.tileset.moving,
.tileset.unveiled {
  pointer-events: none;
}
.tileset-bg-image {
  border-radius: calc(var(--tilesetsize, 1600%) / 32);
}
.tiles-parent,
.tileset-bg-image {
  position: absolute;
  transform: translate3d(-50%, -50%, 0);
  top: 50%;
  left: 50%;
  width: var(--tilesetsize, auto);
  height: var(--tilesetsize, auto);
}
.tile {
  position: absolute;
  z-index: 2;
  font-family: serif;
  font-size: calc(var(--tilesetsize, 1600%) / 8);
  color: #fff;
  text-shadow: -0.05em -0.05em 0.05em #0003, 0.05em 0.05em 0.05em #000;
  border: 0;
  margin: 0;
  padding: 0;
  background-image: var(--currentfg, url("front0.jpg"));
  background-size: 400%;
  background-color: #000;
  border-radius: 0.15em;
  box-shadow: inset -0.05em -0.05em 0.05em 1px #000e,
    inset 0.05em 0.05em 0.05em 1px #fffe;
  width: 25%;
  height: 25%;
  overflow: hidden;
  opacity: 1;
  transition-property: opacity;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
  will-change: transform;
}
.tilenum {
  display: block;
  pointer-events: none;
  opacity: 0;
  transform: scale(0) translate3d(0, 0, 1px);
  transition-property: transform, opacity;
  transform-origin: center;
  transition-duration: 0.4s, 0.4s;
  transition-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045), ease;
}
.numbered .tilenum {
  opacity: 1;
  transform: scale(1);
  transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1), ease;
}
.tileset-msg {
  position: absolute;
  top: 50%;
  left: 50%;
  color: #251d05;
  background-color: #ffff0099;
  width: var(--tilesetsize, 100%);
  text-align: center;
  font-size: calc(var(--tilesetsize, 1600%) / 16);
  transform: translate3d(-50%, -50%, 0);
  display: block;
  padding: 1em;
  margin: 0;
  border-radius: 1em;
  border: double 0.5em #ff0;
  text-transform: uppercase;
  font-weight: 700;
  font-family: sans-serif;
  text-shadow: -1px -1px 2px #fff, 1px 1px 1px #ccc;
  pointer-events: none;
  opacity: 0;
  transition-timing-function: ease;
  transition-property: opacity;
  transition-duration: 0.4s;
  transition-delay: 0.5s;
}
.tileset-msg.visible,
.tileset.unveiled .won-msg,
.tileset.unveiled.new-record .record-msg {
  animation-name: tileset-msg-animation;
  animation-duration: 4s;
  animation-iteration-count: 1;
  animation-direction: alternate;
  animation-timing-function: ease-out;
}
@keyframes tileset-msg-animation {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
}
.tileset.moving .tile {
  transition-property: transform, position;
  transition-duration: 50ms, 50ms;
}
.tile.touch-moving {
  z-index: 3;
}
.tileset.unveiled .tile {
  opacity: 0;
}
.tile_0 {
  background-position: 0 0;
}
.tile_1 {
  background-position: -100% 0;
}
.tile_2 {
  background-position: -200% 0;
}
.tile_3 {
  background-position: -300% 0;
}
.tile_4 {
  background-position: 0 -100%;
}
.tile_5 {
  background-position: -100% -100%;
}
.tile_6 {
  background-position: -200% -100%;
}
.tile_7 {
  background-position: -300% -100%;
}
.tile_8 {
  background-position: 0 -200%;
}
.tile_9 {
  background-position: -100% -200%;
}
.tile_10 {
  background-position: -200% -200%;
}
.tile_11 {
  background-position: -300% -200%;
}
.tile_12 {
  background-position: 0 -300%;
}
.tile_13 {
  background-position: -100% -300%;
}
.tile_14 {
  background-position: -200% -300%;
}
.tile_15 {
  background-position: -300% -300%;
  display: none;
}
.tile-at-0 {
  transform: translate3d(0, 0, 0);
}
.tile-at-1 {
  transform: translate3d(100%, 0, 0);
}
.tile-at-2 {
  transform: translate3d(200%, 0, 0);
}
.tile-at-3 {
  transform: translate3d(300%, 0, 0);
}
.tile-at-4 {
  transform: translate3d(0, 100%, 0);
}
.tile-at-5 {
  transform: translate3d(100%, 100%, 0);
}
.tile-at-6 {
  transform: translate3d(200%, 100%, 0);
}
.tile-at-7 {
  transform: translate3d(300%, 100%, 0);
}
.tile-at-8 {
  transform: translate3d(0, 200%, 0);
}
.tile-at-9 {
  transform: translate3d(100%, 200%, 0);
}
.tile-at-10 {
  transform: translate3d(200%, 200%, 0);
}
.tile-at-11 {
  transform: translate3d(300%, 200%, 0);
}
.tile-at-12 {
  transform: translate3d(0, 300%, 0);
}
.tile-at-13 {
  transform: translate3d(100%, 300%, 0);
}
.tile-at-14 {
  transform: translate3d(200%, 300%, 0);
}
.tile-at-15 {
  transform: translate3d(300%, 300%, 0);
}