.tile-mask .t,
.tile-mask .b {
  height: 12.5%;
  width: 125%;
}
.tile-mask .l,
.tile-mask .r {
  width: 12.5%;
  height: 125%;
}
.tile-mask .t {
  top: -12.5%;
  left: -12.5%;
  position: absolute;
  display: none;
}
.tile-mask .t.show {
  display: block;
}
.tile-mask .b {
  bottom: -12.5%;
  left: -12.5%;
  position: absolute;
  display: none;
}
.tile-mask .b.show {
  display: block;
}
.tile-mask .l {
  top: -12.5%;
  left: -12.5%;
  position: absolute;
  display: none;
}
.tile-mask .l.show {
  display: block;
}
.tile-mask .r {
  top: -12.5%;
  right: -12.5%;
  position: absolute;
  display: none;
}
.tile-mask .r.show {
  display: block;
}
.tile-mask .tl {
  top: -12.5%;
  left: -12.5%;
  position: absolute;
  z-index: 2;
  height: 12.5%;
  width: 12.5%;
  border-radius: 0 0 0.5rem 0;
}
.tile-mask .tr {
  top: -12.5%;
  right: -12.5%;
  position: absolute;
  z-index: 2;
  height: 12.5%;
  width: 12.5%;
  border-radius: 0 0 0 0.5rem;
}
.tile-mask .bl {
  bottom: -12.5%;
  left: -12.5%;
  position: absolute;
  z-index: 2;
  height: 12.5%;
  width: 12.5%;
  border-radius: 0 0.5rem 0 0;
}
.tile-mask .br {
  bottom: -12.5%;
  right: -12.5%;
  position: absolute;
  z-index: 2;
  height: 12.5%;
  width: 12.5%;
  border-radius: 0.5rem 0 0 0;
}
.tile-mask:not(.t) > .tl, .tile-mask:not(.l) > .tl {
  background-color: #1a191e;
  border-radius: 0;
}
.tile-mask.t.l:not(.tl) > .tl {
  background-color: #1a191e;
}
.tile-mask:not(.t) > .tr, .tile-mask:not(.r) > .tr {
  background-color: #1a191e;
  border-radius: 0;
}
.tile-mask.t.r:not(.tr) > .tr {
  background-color: #1a191e;
}
.tile-mask:not(.b) > .bl, .tile-mask:not(.l) > .bl {
  background-color: #1a191e;
  border-radius: 0;
}
.tile-mask.b.l:not(.bl) > .bl {
  background-color: #1a191e;
}
.tile-mask:not(.b) > .br, .tile-mask:not(.r) > .br {
  background-color: #1a191e;
  border-radius: 0;
}
.tile-mask.b.r:not(.br) > .br {
  background-color: #1a191e;
}

.tile-mask {
  position: relative;
  box-sizing: content-box;
  color: white;
  font-size: 1rem;
  align-content: center;
}
.tile-mask:not(.odd) {
  background-color: #00a4c9;
}
.tile-mask:not(.odd).uncovered {
  background-color: #1a191e;
}
.tile-mask:not(.odd).uncovered *.show, .tile-mask:not(.odd).uncovered *:not(.show) {
  background-color: #1a191e;
}
.tile-mask:not(.odd) *.show {
  background-color: #00a4c9;
}
.tile-mask:not(.odd):not(.t):not(.l) {
  border-top-left-radius: 0.5rem;
}
.tile-mask:not(.odd):not(.t):not(.r) {
  border-top-right-radius: 0.5rem;
}
.tile-mask:not(.odd):not(.b):not(.l) {
  border-bottom-left-radius: 0.5rem;
}
.tile-mask:not(.odd):not(.b):not(.r) {
  border-bottom-right-radius: 0.5rem;
}
.tile-mask.odd {
  background-color: #00a4c9;
}
.tile-mask.odd.uncovered {
  background-color: #1a191e;
}
.tile-mask.odd.uncovered *.show, .tile-mask.odd.uncovered *:not(.show) {
  background-color: #1a191e;
}
.tile-mask.odd *.show {
  background-color: #00a4c9;
}
.tile-mask.odd:not(.t):not(.l) {
  border-top-left-radius: 0.5rem;
}
.tile-mask.odd:not(.t):not(.r) {
  border-top-right-radius: 0.5rem;
}
.tile-mask.odd:not(.b):not(.l) {
  border-bottom-left-radius: 0.5rem;
}
.tile-mask.odd:not(.b):not(.r) {
  border-bottom-right-radius: 0.5rem;
}
.tile-mask > img {
  width: inherit;
}

.tile {
  align-items: center;
  justify-content: center;
  display: flex;
  user-select: none;
  -webkit-user-select: none;
}
.tile.flipped {
  background-color: gray;
}
.tile img {
  visibility: hidden;
  width: inherit;
  height: inherit;
}
.tile.img img {
  visibility: visible;
}

.game-panel {
  background-color: #1a191e;
  padding: 16px;
  width: fit-content;
  justify-content: center;
}

.tilemap {
  display: grid;
  grid-template-columns: repeat(9, auto);
}
.tilemap .tile {
  width: 3rem;
  height: 3rem;
}
.tilemap .tile-mask {
  height: 80%;
  width: 80%;
}

.tilemap.medium {
  grid-template-columns: repeat(16, auto);
}
.tilemap.medium .tile {
  width: 2rem;
  height: 2rem;
}

.tilemap.hard {
  grid-template-columns: repeat(30, auto);
}
.tilemap.hard .tile {
  width: 2rem;
  height: 2rem;
}

.linha {
  display: flex;
}

.control-panel {
  width: 300px;
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #1f2329;
  border-radius: 0 20px 20px 0;
  color: whitesmoke;
  justify-content: center;
}
.control-panel select {
  border: none;
  border-radius: 0.25rem;
  font-size: 1rem;
  color: white;
  text-align: center;
  align-self: center;
  padding: 0.5rem;
  background-color: #1a191e;
}

.game-wrapper {
  display: flex;
  flex-direction: row;
  margin: auto;
}

/*# sourceMappingURL=style.css.map */