@font-face {
  font-family: bomberFont;
  src: url(bomberfont.otf);
}
@font-face {
  font-family: nrFont;
  src: url(kongtext.ttf);
}
:root {
  --size: 0;
  --gbwidth: 0;
  --gbheight: 0;
  --mode: green;
  --filter: ;
}
* {
  margin: 0;
  padding: 0;
  user-select: none;
  font-family: bomberFont;
}
body {
  overflow: hidden;
  background-color: black;
}
div,
canvas {
  height: var(--size);
  width: var(--size);
  background-size: contain;
  image-rendering: pixelated;
}
#app {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow:hidden;
  transform: scale(5);
  transition: all 1s ease-in-out;
  opacity: 0;
}
#test {
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition-duration: .3s;
  /* margin-top: calc(11 * var(--size) / 2); */
}
.container {
  display: flex;
  width: max-content;
  flex-direction: row;
}
body {
  display: flex;
  flex-direction: column;
}
.sprite, .baloon, .explosion {
  margin-left: calc(50% - var(--gbwidth)* var(--size) / 2);
  /* margin-top: calc(11 * var(--size) / 2); */
  filter: drop-shadow(2px 2px 1px black);
}
.baloon {
  z-index: 92;
  position: absolute;
  transition: linear 1s;
}
.ghost {
  z-index: 101;
}
.sprite {
  position: absolute;
  z-index: 94;
}
.explosion {
  position: absolute;
  z-index: 91;
  filter: drop-shadow(0px 0px 20px orange);
}
.door {
  z-index: 90;
}
#player,
#dead_guy {
  transform: translate(calc(var(--size) * 0.25), calc(var(--size) * 0.37));
  z-index: 93;
}
#player {
  transition-duration: .04s;
}
/* #bomb {
  z-index: 96;
} */
.stone {
  z-index: 100;
  filter: drop-shadow(2px 2px 1px black) var(--filter);
  background-size: cover;
}
.brick {
  filter: drop-shadow(2px 2px 1px black) var(--filter);
}
.title1, .title2 {
  transition: color 1s ease-in-out, text-shadow 1s ease-in-out, opacity .3s ease-in-out;
  color: black; 
  background-size: contain !important;
  text-shadow: none;
}
.title {
  z-index: 1000;
  font-family: bomberFont;
  position: absolute;
  font-size: 5vw;
  top: 95px;
  left: 50%;
  letter-spacing: 2px;
  transform: translateX(-50%);
}
.controls {
  position: absolute;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  display: flex;
  gap: 4px;
  transition-duration: .5s;
}
.controls button {
  border-top: 3px solid gray;
  background: transparent;
  color: white;
  font-family: bomberFont;
  font-size: calc(var(--size) / 2);
  letter-spacing: 2px;
}
.controls button:first-of-type, .controls button:nth-of-type(2) {
  border-top: 3px solid aqua;
  background: teal;
}
.unstarted canvas {
  filter: sepia(1) hue-rotate(120deg);
  opacity: .5 !important;
}
.controls button span {
  color:aqua;
  font-family: nrFont;
  letter-spacing: -3px;
}
#lvlbtn {
  display: flex;
  align-items: center;
}
#lvl {
  font-family: nrfont;
  background-size: cover;
  width: max-content;
}
img {
  width: var(--size);
  height: var(--size);
}
#end-screen {
  position: absolute;
  left: 50%;
  top: -100%;
  transition-duration: .3s;
  transform: translate(-50%,-50%);
  background-color: black;
  color: white;
  width: max-content;
  height: fit-content;
  border: 3px solid red;
  display: flex;
  z-index: 102;
  padding: 20px;
  box-shadow: 2px 2px 10px black;
}
#end-screen img {
  width: 100px;
  height: 100px;
  align-self: center;
}
h1 {
  font-family: bomberFont;
  letter-spacing: 2px;
  color: lightgray;
}
#end-screen div {
  width: fit-content;
  height: fit-content;
}
#end-screen div h2 {
  font-family: bomberFont;
  display: flex;
  justify-content: space-between;
}
#end-screen div h2 span {
  font-family: nrFont;
  color: aqua;
}

.active {
  filter: invert(1);
}
.active p {
  filter: invert(1);
}
.modes {
  font-family: nrFont;
  text-align: center;
  font-size: calc(var(--size) * 0.8);
  text-transform: uppercase;
  cursor: pointer;
}
.modes:hover {
  filter: brightness(150%);
}
.active:hover {
  filter: invert(1) brightness(150%);
}
.modes:nth-of-type(10) {
  color: green;
}
.modes:nth-of-type(11) {
  color: orange;
}
.modes:nth-of-type(12) {
  color: black;
}
.field {
  background: var(--mode);
}
.stone {
  background-size: cover;
}
.off {
  opacity: 0 !important;
  color: yellow !important;
}
.comm {
  transition: color ease-in-out 2s;
  font-size: calc(var(--size) / 2);
  font-family: nrFont;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1000;
  opacity: 100%;
  position: absolute;
  color: white;
  font-weight: bolder;
  -webkit-text-stroke: 1px darkred;
}
#tk {
  color: orange;
  animation: wobble-tk .1s ease-in-out infinite;
}
#qk {
  color: red;
  animation: wobble-qk .1s ease-in-out infinite;
}
#ik {
  color: black;
  animation: wobble-ik .1s ease-in-out infinite;
}

#mobile-controls {
  display:none;
  flex-direction: column;
  align-items: end;
  position: absolute;
  right: 50%;
  transform: translateX(50%);
  bottom: 0;
  width: fit-content;
  height: fit-content;
}
#mobile-controls div button {
  width: calc(2*var(--size));
  height: calc(2*var(--size));
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: 2px solid gray;
  border-radius: 20px;
  font-size: 20px;
}

#mobile-controls div button:active {
  background-color: rgba(100, 100, 100, 0.5);
}

#mobile-controls div {
  display: flex;
  width: fit-content;
  height: fit-content;
}

.powup {
  animation: powup 2s infinite ease-in-out;
  transform: translate(0,-10%) scale(.7);
}

#loading {
  z-index: 1000;
  width: 100%;
  height: 100vh;
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  font-size: var(--size);
  transition: 1s ease-in-out opacity;
}

@keyframes powup {
  0% {
  transform: translate(0,-10%) scale(.7);
  }
  50% {
  transform: translate(0,10%) scale(.7);
  }
  100% {
  transform: translate(0,-10%) scale(.7);
  }
}
@keyframes powered {
  0% {
  filter: drop-shadow(2px 2px 1px black) drop-shadow(0 0 0px orange) sepia(0);
  }
  33% {
  filter: drop-shadow(2px 2px 1px black) drop-shadow(0 0 10px orange) sepia(.5);
  }
  66% {
  filter: drop-shadow(2px 2px 1px black) drop-shadow(0 0 10px orange) sepia(.5);
  }
  100% {
  filter: drop-shadow(2px 2px 1px black) drop-shadow(0 0 0px orange) sepia(0);
  }
}
@keyframes wobble-tk {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-49%, - 2px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
@keyframes wobble-qk {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-48%, - 2px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}
@keyframes wobble-ik {
  0% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-48%, - 5px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}

@media only screen and (max-width: 450px) {
  .title1, .title2 {
    width: min-content;
  }
  .title {
    padding: 10px;
    top: 0;
    left: 0;
    transform: translate(0,0);
    display: flex;
    flex-direction: column;
    justify-content: start;
  }
  .controls {
    position: static;
    display: flex;
    justify-content: start;
  }
}