* {
  user-select: none! important;
  box-sizing: border-box;
  image-rendering: pixelated;
}

:root {
  --c-bg: #000;
  --c-solid: #000;
  --c-text: #eee;
}

.light {
  --c-bg: #1f34fb;
  --c-solid: #fff;
  --c-text: #111;
}

html {
  background: var(--c-bg);
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Share Tech Mono', 'ubuntu mono', monospace;
}

body {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
  margin: 0 auto;
  /* margin-top: 4vh; */
  background: var(--c-solid);
}

#score {
  font-size: 8vh;
  margin: 2vh 1vh;
  color: var(--c-text);
}

#debug {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: 20px 40px;
  background: rgba(49, 36, 36, 0.1);
  color: black;
  margin: 0;
  font-size: 1.6rem;
  pointer-events: none;
  width: 100%;
}



#touch-controls {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px;
}

#touch-controls div {
  opacity: 0;
  background-repeat: no-repeat;
  background-color: white;
  background-size: contain;
  background-position: center;
  animation-name: reveal;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 1;
}

#touch-controls div:nth-child(1) {
  animation-delay: 0s;
  width: 100%;
}
#touch-controls div:nth-child(2) {
  animation-delay: 0.25s;
}
#touch-controls div:nth-child(3) {
  animation-delay: 0.5s;
}
#touch-controls div:nth-child(4) {
  animation-delay: 0.75s;
}
#touch-controls div:nth-child(5) {
  animation-delay: 1s;
}


#touch-controls .left {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M22 12a10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2a10 10 0 0 1 10 10m-8-5l-5 5 5 5V7z"/></svg>');
}
#touch-controls .right {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M2 12A10 10 0 0 1 12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12m8 5l5-5-5-5v10z"/></svg>');
}
#touch-controls .down {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2m-5 8l5 5 5-5H7z"/></svg>');
}
#touch-controls .up {
  background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2a10 10 0 0 1 10 10 10 10 0 0 1-10 10A10 10 0 0 1 2 12 10 10 0 0 1 12 2m-5 8l5 5 5-5H7z"/></svg>');
  transform: scaleY(-1);
}

#touch-controls :active,
#touch-controls .show {
  opacity: 0.5;
}

@keyframes reveal {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}

/*
     left / right
   rotate / down
*/
.layout-1 .left {
  grid-area: 1 / 1 / 2 / 2;
}
.layout-1 .right {
  grid-area: 1 / 2 / 2 / 3;
}
.layout-1 .down {
  grid-area: 2 / 2 / 3 / 3;
}
.layout-1 .rotate {
  grid-area: 2 / 1 / 3 / 2;
}

.layout-2 #touch-controls {
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.layout-2 .left {
  grid-area: 1 / 1 / 2 / 2;
}
.layout-2 .right {
  grid-area: 1 / 3 / 2 / 4;
}
.layout-2 .down {
  grid-area: 2 / 1 / 3 / 4;
}
.layout-2 .rotate {
  grid-area: 1 / 2 / 2 / 3;
}

.layout-3 #touch-controls {
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.layout-3 .left {
  grid-area: 1 / 1 / 2 / 3;
}
.layout-3 .right {
  grid-area: 1 / 3 / 2 / 5;
}
.layout-3 .down {
  grid-area: 2 / 3 / 3 / 5;
}
.layout-3 .rotate-anti {
  grid-area: 2 / 2 / 3 / 3;
}
.layout-3 .rotate {
  grid-area: 2 / 1 / 3 / 2;
}